/* 큰 제목 장식. 글자는 진짜 글자로 두고(검색·수정 가능) 금속 금색·테두리·입체·금빛만 겹친다.
   크기별 3단계: 첫 화면(빛줄기까지) > 섹션 제목 > 이름·막 제목(가볍게). 금속 필터는 index.html의 <svg> 안에 있다. */
:root {
  --title: 'Hahmlet', 'Noto Serif KR', serif;
  --gold-metal: linear-gradient(180deg, #fffbea 0%, #f7e0a6 20%, #dcb066 42%, #93622a 51%, #c99a52 60%, #f4d892 79%, #a97634 100%);
  --gold-soft: linear-gradient(180deg, #fff6df 0%, #f0d9a6 45%, #c99b58 100%);
}

/* 1·2단계 공통: 금속 금색 */
.hero h1 strong,
.section-heading h2,
.world h2,
.register-inner h2,
.siege-chronicle h3 {
  font-family: var(--title);
  font-weight: 700;
  letter-spacing: -.01em;
  word-break: keep-all;
  text-wrap: balance;
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: url(#title-metal) drop-shadow(0 0 .35em rgba(226, 168, 84, .28));
}

/* 1단계: 첫 화면 */
.hero-content { position: relative; }
.hero h1 { position: relative; isolation: isolate; letter-spacing: 0; }
.hero h1 span {
  font-family: var(--title);
  font-weight: 500;
  color: #e6dac3;
  letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
.hero h1 strong {
  font-weight: 800;
  line-height: 1.18;
  filter: url(#title-metal-lg) drop-shadow(0 0 .3em rgba(232, 176, 88, .32));
}
.title-gem {
  display: inline-block;
  width: .3em;
  height: .3em;
  margin: 0 .3em 0 0;
  vertical-align: .2em;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #fff8dd, #dca752 55%, #774c1a);
  outline: 1px solid rgba(255, 238, 196, .55);
  outline-offset: .07em;
  box-shadow: 0 0 .2em rgba(255, 216, 146, .9), 0 0 .7em rgba(232, 176, 88, .6);
}
.title-swoosh {
  position: absolute;
  left: -6%;
  top: 50%;
  width: 118%;
  height: 210%;
  transform: translateY(-46%);
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}
.title-swoosh .spark { animation: title-twinkle 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.title-swoosh .spark:nth-of-type(2n) { animation-delay: -1.2s; }
.title-swoosh .spark:nth-of-type(3n) { animation-delay: -2.3s; }
@keyframes title-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .title-swoosh .spark { animation: none; opacity: .8; } }

/* 2단계: 섹션 제목 — 작은 글씨(kicker) 아래, 제목 밑에 마름모가 달린 금선 */
.section-heading h2,
.world h2,
.register-inner h2 { line-height: 1.22; padding-bottom: .05em; }
.title-rule {
  position: relative;
  display: block;
  width: min(260px, 60%);
  height: 1px;
  margin: .55rem 0 1.4rem;
  background: linear-gradient(90deg, rgba(214, 170, 96, 0), rgba(214, 170, 96, .9) 35%, rgba(214, 170, 96, .9) 65%, rgba(214, 170, 96, 0));
  filter: drop-shadow(0 0 4px rgba(232, 176, 88, .55));
}
.title-rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, #fff6d8, #d9a24c 60%, #7a4f1c);
  outline: 1px solid rgba(255, 236, 190, .5);
  outline-offset: 2px;
}
.centered .title-rule,
.territory-heading .title-rule,
.register-inner .title-rule { margin-left: auto; margin-right: auto; }

/* 3단계: 이름·막 제목 — 입체 없이 부드러운 금색과 그림자만 */
.territory-card h3,
.siege-copy h3,
.chapter-heading strong,
.legacy-card h3,
.news-feature h3,
.relic h3 {
  font-family: var(--title);
  font-weight: 700;
  letter-spacing: 0;
  word-break: keep-all;
  background: var(--gold-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .9)) drop-shadow(0 2px 6px rgba(0, 0, 0, .75));
}
.chapter-heading span { font-family: var(--title); letter-spacing: .04em; }

@media (max-width: 760px) {
  .title-swoosh { width: 112%; left: -4%; }
  .title-rule { width: 180px; }
}

/* 첫 화면 로고 그림 */
.game-title { margin: 0 0 .4rem; line-height: 0; }
.game-title img { width: min(560px, 100%); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .85)); }

/* 머리글·바닥글 로고 그림 */
.brand .brand-logo { display: block; height: 46px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8)); transition: height .3s; }
.site-header.scrolled .brand .brand-logo { height: 40px; }
.footer-brand .brand-logo { height: 52px; }
@media (max-width: 760px) { .brand .brand-logo { height: 38px; } .game-title img { width: min(420px, 100%); } }
.hero h1 strong { font-size: clamp(2.3rem, 4.6vw, 4.6rem); }
@media (max-width: 760px) { .hero h1 strong { font-size: 2.3rem; } }