Common.css: 두 판 사이의 차이

2026년 5월 15일 (금) 05:57 기준 최신판

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/* ===== CABAL WIKI — 세계관 스타일 ===== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap');

/* 히어로 헤더 */
.cabal-hero {
  background: linear-gradient(135deg, #0D1428 0%, #0A0C12 100%);
  border: 1px solid rgba(201,168,76,0.25);
  border-top: 3px solid #C9A84C;
  padding: 2.5rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.cabal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(58,111,216,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(139,58,58,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.cabal-hero-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  color: #8A6820;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.6rem;
}
.cabal-hero-title {
  font-family: 'Cinzel', serif !important;
  font-size: 2.4rem !important;
  font-weight: 900 !important;
  color: #F0D080 !important;
  text-shadow: 0 0 40px rgba(201,168,76,0.35);
  letter-spacing: 0.06em;
  border: none !important;
  margin: 0 0 0.3rem !important;
  padding: 0 !important;
}
.cabal-hero-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  color: #5B9EFF;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1.5rem;
}
.cabal-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 400px;
  margin: 0 auto 1.5rem;
}
.cabal-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8A6820, transparent);
}
.cabal-divider-gem {
  width: 7px;
  height: 7px;
  background: #C9A84C;
  transform: rotate(45deg);
  box-shadow: 0 0 8px #C9A84C;
  flex-shrink: 0;
}

/* 언어 선택 버튼 */
.cabal-lang-bar {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.cabal-lang-bar a {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  padding: 0.25rem 0.85rem;
  border: 1px solid #8A6820;
  color: #C9A84C !important;
  text-decoration: none !important;
  transition: all 0.2s;
}
.cabal-lang-bar a:hover,
.cabal-lang-bar a.active {
  background: #8A6820;
  color: #F0D080 !important;
}

/* 섹션 레이블 */
.cabal-section-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  color: #5B9EFF;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.3rem;
}
.cabal-section-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.3rem !important;
  color: #F0D080 !important;
  border: none !important;
  padding: 0 0 0.6rem !important;
  margin: 0 0 1.2rem !important;
  border-bottom: 2px solid !important;
  border-image: linear-gradient(90deg, #C9A84C, transparent) 1 !important;
}

/* 로어 카드 */
.cabal-lore-card {
  background: linear-gradient(135deg, rgba(26,34,64,0.85), rgba(13,20,40,0.9));
  border: 1px solid rgba(201,168,76,0.2);
  border-left: 3px solid #C9A84C;
  padding: 1.6rem 2rem;
  margin-bottom: 1.8rem;
  font-size: 0.97rem;
  line-height: 1.9;
  color: #D8D4C8;
}
.cabal-kw-gold  { color: #C9A84C; font-weight: 700; }
.cabal-kw-blue  { color: #5B9EFF; font-weight: 700; }
.cabal-kw-ruin  { color: #D46A6A; font-weight: 700; }

/* 핵심 개념 카드 그리드 */
.cabal-concepts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-bottom: 2rem;
}
.cabal-concept-card {
  background: rgba(13,20,40,0.8);
  border: 1px solid rgba(201,168,76,0.15);
  padding: 1.3rem 1rem;
  text-align: center;
  transition: border-color 0.25s, transform 0.25s;
}
.cabal-concept-card:hover {
  border-color: rgba(201,168,76,0.5);
  transform: translateY(-3px);
}
.cabal-concept-icon { font-size: 1.8rem; display: block; margin-bottom: 0.5rem; }
.cabal-concept-name {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: #C9A84C;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.35rem;
}
.cabal-concept-desc { font-size: 0.73rem; color: #8A8880; line-height: 1.5; }

/* 구분선 */
.cabal-glow-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), rgba(91,158,255,0.25), transparent);
  margin: 2rem 0;
}

/* 타임라인 */
.cabal-timeline {
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 2rem;
}
.cabal-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, #8A6820, #3A6FD8, #C9A84C);
}
.cabal-timeline-item {
  position: relative;
  margin-bottom: 1.4rem;
}
.cabal-timeline-item::before {
  content: '';
  position: absolute;
  left: -2.2rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 13px;
  height: 13px;
  background: #0A0C12;
  border: 2px solid #C9A84C;
  box-shadow: 0 0 10px rgba(201,168,76,0.35);
}
.cabal-timeline-item.current::before {
  background: #C9A84C;
  box-shadow: 0 0 16px rgba(201,168,76,0.7);
}
.cabal-timeline-body {
  background: linear-gradient(90deg, rgba(26,34,64,0.65), rgba(13,20,40,0.45));
  border: 1px solid rgba(201,168,76,0.12);
  padding: 0.85rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  transition: border-color 0.25s;
}
.cabal-timeline-body:hover { border-color: rgba(201,168,76,0.35); }
.cabal-timeline-year {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: #C9A84C;
  font-weight: 700;
  min-width: 55px;
  white-space: nowrap;
}
.cabal-timeline-sep {
  width: 1px;
  height: 26px;
  background: rgba(201,168,76,0.22);
  flex-shrink: 0;
}
.cabal-timeline-era {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  color: #8A8880;
  text-transform: uppercase;
  display: block;
}
.cabal-timeline-name {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  color: #F0D080;
}
.cabal-timeline-item.current .cabal-timeline-name { color: #5B9EFF; }

/* 푸터 */
.cabal-footer {
  border-top: 1px solid rgba(201,168,76,0.15);
  padding-top: 1.4rem;
  margin-top: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.cabal-footer-meta {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: #8A8880;
}
.cabal-footer-links {
  display: flex;
  gap: 1.2rem;
}
.cabal-footer-links a {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: #8A6820 !important;
  text-decoration: none !important;
  text-transform: uppercase;
}
.cabal-footer-links a:hover { color: #C9A84C !important; }

/* 반응형 */
@media (max-width: 640px) {
  .cabal-concepts { grid-template-columns: 1fr; }
  .cabal-hero-title { font-size: 1.6rem !important; }
  .cabal-timeline-body { flex-wrap: wrap; gap: 0.5rem; }
}