/* 에르다인 개편 화면 */
main { --edge: clamp(1.1rem, 5vw, 5rem); --brass-line: #685039; }
.site-header, .site-header.scrolled { height: 68px; }
.site-header {
  background: linear-gradient(110deg, #171316, #0b0b0def 52%, #171316);
  border-bottom: 1px solid #80654a;
  box-shadow: 0 2px #0c090a, 0 3px #84644673;
}
.site-header.scrolled { background: #0c0b0de8; border-bottom: 1px solid #685039; }
.site-header .brand .brand-logo { height: 42px; }
.site-header nav { gap: clamp(.65rem, 1.4vw, 1.6rem); }
.nav-cta { color: #fae6d1; }
.hero-actions .button, .nav-cta {
  --button-shape: polygon(.8rem 0, calc(100% - .8rem) 0, 100% 50%, calc(100% - .8rem) 100%, .8rem 100%, 0 50%);
  position: relative;
  isolation: isolate;
  border: 0;
  clip-path: var(--button-shape);
  background: linear-gradient(#e8cc9f, #795336 51%, #c39865);
}
.hero-actions .button.primary, .hero-actions .button.ghost { background: linear-gradient(#e8cc9f, #795336 51%, #c39865); }
.hero-actions .button::before, .nav-cta::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: var(--button-shape);
  background: linear-gradient(160deg, #6f2928, #250e12 58%, #59211d);
  box-shadow: inset 0 0 0 1px #e0ad755c;
}
.hero-actions .button.ghost::before { background: linear-gradient(160deg, #312828, #100e10 63%, #241a19); }
.hero-actions .button:hover, .nav-cta:hover { filter: brightness(1.22); }
.hero-actions .button:focus-visible, .nav-cta:focus-visible { outline-offset: -5px; }
.section[id] {
  position: relative;
  padding: clamp(2.8rem, 5vw, 5.4rem) var(--edge);
  border-top: 1px solid var(--brass-line);
  box-shadow: inset 0 3px 0 #100e0f, inset 0 4px 0 #69513855;
  scroll-margin-top: 68px;
}
.section[id]::before {
  content: '';
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  width: 9px;
  height: 9px;
  background: #221719;
  border: 1px solid #b08a5c;
  transform: rotate(45deg);
  z-index: 1;
}
.section-heading { margin-bottom: 1.7rem; }
.section-heading h2, .world h2, .siege-chronicle h3 {
  background: none;
  color: #f0ddc0;
  filter: none;
  font-size: clamp(1.8rem, 3.5vw, 3.3rem);
  text-shadow: 0 2px 3px #000;
}
.section-heading p, .world-copy > p { color: #c5b9ab; }
.section p, .hero-copy { word-break: keep-all; overflow-wrap: anywhere; }
.section-heading .kicker, .world-copy > .kicker { color: #c9a976; }
.title-rule { filter: none; margin-bottom: 1.1rem; }

.hero {
  --hero-edge: clamp(1.1rem, 8vw, 9rem);
  height: auto;
  min-height: max(680px, 100svh);
  padding: 7.5rem var(--hero-edge) 6rem;
}
.hero-art {
  inset-block-start: 68px;
  animation: none;
  background-image: url('assets/andras-knight.webp');
  background-position: 72% 0%;
  transition: opacity 1.1s ease;
}
.hero-art-ruins {
  background-image: url('assets/andras-hero.webp');
  background-position: 66% 20%;
  opacity: 0;
}
.hero[data-slide="1"] .hero-art-ruins { opacity: 1; }
.hero-shade {
  background: linear-gradient(90deg, #08090b6e, #08090b38 42%, transparent 64%),
    linear-gradient(0deg, #0b0a0d 0%, #0b0a0d33 13%, transparent 35%);
}
.hero-content { width: min(43vw, 590px); text-align: center; }
.game-title { margin: 0; }
.game-title img { display: block; width: min(94%, 510px); height: auto; margin-inline: auto; }
.hero .title-rule { margin-inline: auto; }
.hero h1 { margin: 1.05rem 0 1.05rem; }
.hero h1 span, .hero h1 strong {
  font-family: var(--serif);
  font-style: oblique 8deg;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.65vw, 3.7rem);
  line-height: 1.3;
  letter-spacing: -.045em;
  word-break: keep-all;
  text-wrap: initial;
  background: none;
  color: #f2e2c9;
  filter: none;
  text-shadow: 0 2px 2px #1a0f0c, 0 3px 14px #060507;
}
.hero h1 em { color: #e08770; font-style: inherit; }
.hero-copy { color: #e0d5c8; font-weight: 500; text-shadow: 0 2px 7px #000; }
.hero-actions { justify-content: center; margin-top: 1.65rem; }
.hero-actions .button { min-width: min(44%, 13rem); gap: .7rem; padding: .65rem 1.35rem; }
.hero-controls {
  position: absolute;
  z-index: 3;
  bottom: 1.4rem;
  left: var(--hero-edge);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.hero-controls[hidden], .hero-controls button[hidden] { display: none; }
.hero-controls button {
  padding: .32rem .7rem;
  border: 1px solid #745e46;
  background: #111014e8;
  color: #d6c9b6;
  font-size: .72rem;
  cursor: pointer;
}
.hero-controls button[aria-pressed="true"] { background: #471e22; color: #fff0dc; border-color: #d2a87d; }

.world.section { min-height: 320px; gap: 3rem; grid-template-columns: 1.25fr .75fr; isolation: isolate; }
.world.section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #0a0a0eea 18%, #0a0a0e75 52%, #0a0a0e28 82%),
    url('assets/andras-sealfall.webp') center 48% / cover;
}
.world h2 { font: 600 clamp(1.8rem, 3.5vw, 3.3rem)/1.25 var(--serif); }
.world .sigil { width: min(100%, 225px); }
.world.is-in-view .sigil-core { animation: seal-breath 4.8s ease-in-out; }
@keyframes seal-breath {
  0%, 100% { box-shadow: 0 0 15px #ad423d50; }
  50% { box-shadow: 0 0 40px #ad423da0; }
}
.features, .story, .territories, .legacy, .news {
  --section-art-position: center top;
  --section-art-size: max(100%, 72rem) auto;
  --section-veil: linear-gradient(180deg, #0d0b0e80, #0d0b0e99 17rem, #0d0b0e 48rem);
  background:
    var(--section-veil),
    var(--section-art) var(--section-art-position) / var(--section-art-size) no-repeat,
    #0d0b0e;
}
.features { --section-art: url('assets/andras-backdrop-features.webp'); }
.story { --section-art: url('assets/andras-backdrop-story.webp'); }
.territories { --section-art: url('assets/andras-backdrop-territories.webp'); }
.news { --section-art: url('assets/andras-backdrop-news.webp'); }
.legacy {
  --section-art: url('assets/andras-stone-vault.webp');
  --section-art-position: center -2.5rem;
  --section-veil: linear-gradient(180deg, #0d0b0e0a, transparent 13rem, #0d0b0e 48rem);
}
#features, #story { padding-block: clamp(2rem, 3vw, 3.4rem); }
.framed-heading {
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr);
  align-items: center;
  column-gap: clamp(.65rem, 2vw, 2rem);
  max-width: 58rem;
}
.framed-heading h2 {
  margin: 0;
  font: 600 clamp(1.45rem, 3.35vw, 3rem)/1.3 var(--serif);
  letter-spacing: -.025em;
}
.framed-heading::before, .framed-heading::after {
  content: '';
  height: 11px;
  background:
    conic-gradient(from 45deg, #59402d, #ddc19a, #59402d, #ddc19a, #59402d) right 3px center / 8px 8px no-repeat,
    linear-gradient(90deg, transparent, #9b805f) right center / 100% 1px no-repeat;
}
.framed-heading::after { transform: scaleX(-1); }
.feature-grid, .legacy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.feature-card, .legacy-card, .legacy-card:last-child, .chapter, .territory-card {
  border: 1px solid #72563d;
  box-shadow: inset 0 0 0 3px #100e10, inset 0 0 0 4px #66492f4d;
  background: linear-gradient(170deg, #21191a, #141214 70%);
}
.feature-card::before, .legacy-card::before {
  content: '';
  display: block;
  aspect-ratio: 2 / 1;
  border-bottom: 1px solid #72563d;
}
.feature-card::before {
  background: url('assets/andras-scenes.webp') var(--scene-x) 50.9% / 470.5% auto no-repeat;
}
.legacy-card::before { background: #20181a var(--record-art) center / cover no-repeat; }
.feature-hunt { --scene-x: 6%; }
.feature-gear { --scene-x: 36%; }
.feature-field { --scene-x: 65%; }
.feature-guild { --scene-x: 94%; }
.record-history { --record-art: url('assets/legacy-chronicle.webp'); }
.record-weapon { --record-art: url('assets/legacy-transfer.webp'); }
.record-reign { --record-art: url('assets/legacy-reign.webp'); }
.record-world { --record-art: url('assets/legacy-seal.webp'); }
.record-first-kill { --record-art: url('assets/legacy-first-kill.webp'); }
.feature-card, .chapter, .legacy-card, .legacy-card:last-child {
  border: 1px solid #a1896e;
  border-radius: 11px 3px 11px 3px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 115%, #5a3029 0%, #201517 43%, #110e10 78%);
  box-shadow: inset 0 0 0 2px #0e0b0d, inset 0 0 0 3px #85695266, 0 3px 12px #0007;
}
.feature-card::before { aspect-ratio: 2.25; }
.chapter::before { aspect-ratio: 2.15; }
.feature-card .card-copy { position: relative; padding: 1.5rem 1rem 1.05rem; text-align: center; }
.feature-crest {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -59%);
  display: grid;
  place-items: center;
  width: 2.55rem;
  aspect-ratio: 1;
  color: #dec19a;
  border: 1px solid #b79670;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 26%, #332321, #100e10 72%);
  box-shadow: 0 0 0 3px #161012, inset 0 0 0 3px #392921;
}
.feature-crest svg { width: 55%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.feature-card h3, .legacy-card h3 { margin: .2rem 0 .4rem; font-family: var(--title); font-size: 1.12rem; color: #f0ddc0; background: none; filter: none; }
.feature-card p, .legacy-card p {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: #e0d3c3;
}
.legacy-card, .legacy-card:last-child { padding: 0 0 1rem; }
.legacy-card h3, .legacy-card p { margin-inline: .9rem; }
.legacy-card h3 { margin-top: .75rem; }
.feature-card h3 { font: 700 clamp(.92rem, 1.5vw, 1.4rem)/1.35 var(--serif); }
.feature-card h3::after, .chapter-heading::after {
  content: ""; display: block; height: 1px; margin: .52rem auto 0;
  background: linear-gradient(90deg, transparent, #9b805f80, transparent);
}
.legacy-card .roman { display: block; margin: .42rem .9rem 0; }
.legacy-card:hover { transform: none; }
.legacy-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.legacy .section-heading h2, .territories .section-heading h2, .siege-copy h3, .relic-copy h3 {
  font-family: var(--title);
  font-weight: 800;
  background: var(--gold-soft);
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 3px #100b08);
}
.legacy .section-heading h2 {
  font-family: Georgia, var(--serif);
  font-size: clamp(2.5rem, 6vw, 5.4rem);
  font-weight: 500;
  filter: drop-shadow(0 2px 2px #100b08) drop-shadow(0 0 .22em #b887474d);
}
.relic-feature {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  margin: 0 0 1.15rem;
  align-items: stretch;
  border-color: #8f6b44;
}
.relic-art {
  min-height: 18rem;
  background: #1b1313 url('assets/andras-arcadion.webp') center / cover;
}
.relic-copy { padding: clamp(1.2rem, 3vw, 2.5rem); }
.relic-copy h3 { font-size: clamp(1.7rem, 3.6vw, 3.3rem); line-height: 1.2; }
.relic-copy > p:not(.kicker) { color: #dfcdbb; margin-block: .7rem 1.1rem; }
.relic-copy ol { padding-left: 1.4rem; }
.relic-copy li { padding-block: .4rem; color: #d2c5b4; }
.relic-copy li + li { border-top: 1px solid #60472e; }
.relic-copy li strong { display: inline-block; min-width: 6rem; }
.story .section-heading { margin-inline: auto; }
.chapter { min-width: 0; text-align: center; }
.chapter-heading { padding: .55rem .32rem .35rem; line-height: 1.35; }
.chapter-heading strong, .chapter-heading span {
  display: inline;
  font: 700 clamp(.86rem, 1.22vw, 1.22rem)/1.4 var(--serif);
  letter-spacing: -.025em;
  background: none;
  color: #f0ddc0;
  filter: none;
}
.chapter-heading span { color: #d3b189; }
.chapter p { padding: .15rem .7rem .85rem; font-size: 1rem; color: #e0d3c3; line-height: 1.55; }
.territory-card h3, .legacy-card h3 { font-weight: 800; }
.territory-card figure { aspect-ratio: 3 / 2; }
.territory-card img { height: 100%; object-fit: cover; }
.territory-key { margin-bottom: 1.4rem; }
.siege-chronicle { margin-top: 1.25rem; padding: 1.2rem; }
.siege-chronicle h3 { font-size: clamp(1.45rem, 2.5vw, 2.2rem); }
.development-note {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 960px;
  margin-inline: auto;
  border: 1px solid #685039;
  background: #1b1516;
}
.development-note > div { padding: 1.2rem; }
.development-note > div + div { border-left: 1px solid #685039; }
.development-note p { margin: .3rem 0; color: #d2c5b4; }
.pre-register.section {
  display: grid;
  place-items: end center;
  min-height: clamp(310px, 28vw, 490px);
  isolation: isolate;
  background: linear-gradient(0deg, #0a080bd9, transparent 67%), url('assets/andras-finale.webp') center 29% / cover;
  padding-bottom: clamp(2rem, 5vw, 4.5rem);
}
.pre-register.section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 18%, #ee66523b, transparent 48%);
  opacity: .25;
}
.pre-register.section.is-in-view::after { animation: ember-breath 4.8s ease-in-out; }
@keyframes ember-breath { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
.finale-copy { text-align: center; text-shadow: 0 2px 12px #000, 0 2px 2px #000; }
.finale-copy h2 { margin: 0 0 .45rem; font: oblique 8deg 500 clamp(1.75rem, 4.15vw, 4.2rem)/1.3 var(--serif); color: #f5e2c1; word-break: keep-all; text-wrap: balance; }
.finale-copy em { font-style: inherit; color: #ffe0b6; text-shadow: 0 0 .42em #e95d33, 0 2px 3px #3b1a11; }
.finale-brand { display: flex; align-items: center; justify-content: center; gap: .8rem; color: #eee0ca; font-size: clamp(.65rem, 1.2vw, .95rem); letter-spacing: .16em; }
.finale-brand::before, .finale-brand::after { content: ''; width: clamp(1rem, 5vw, 4.5rem); height: 1px; background: linear-gradient(90deg, transparent, #c7a97d); }
.finale-brand::after { transform: scaleX(-1); }
.finale-status { margin-bottom: 0; color: #d2c3b1; font-size: .8rem; }
footer { border-color: #574534; background: #0c0b0d; color: #b7a798; }
footer > p { text-align: center; }
.footer-credit { display: block; margin-top: .25rem; color: #d8bc91; letter-spacing: .08em; }

@media (max-width: 1040px) {
  .feature-grid, .legacy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header nav { font-size: .75rem; }
}
@media (max-width: 760px) {
  .features, .story, .territories, .legacy, .news {
    --section-art-size: auto 30rem;
    --section-art-position: left top;
    --section-veil: linear-gradient(180deg, #0d0b0e99, #0d0b0eae 10rem, #0d0b0e 30rem);
  }
  .story, .news { --section-art-position: right top; }
  .legacy {
    --section-veil: linear-gradient(180deg, #0d0b0e3b, #0d0b0e29 10rem, #0d0b0e 30rem);
  }
  .hero { --hero-edge: var(--edge); min-height: max(680px, 100svh); padding-top: 11rem; padding-bottom: 6rem; align-items: end; }
  .hero-content { width: 100%; }
  .hero-art { background-position: 77% top; }
  .hero-art-ruins { background-position: 72% top; }
  .hero-shade { background: linear-gradient(0deg, #08080b 0%, #08080bcf 38%, transparent 80%); }
  .game-title img { width: min(78vw, 375px); }
  .hero h1 span, .hero h1 strong { font-size: clamp(1.65rem, 6.2vw, 2.45rem); }
  .hero-actions { flex-direction: row; width: auto; }
  .hero-actions .button { padding-inline: .7rem; }
  .world.section { grid-template-columns: 1fr; gap: 1rem; }
  .world.section::after {
    background: linear-gradient(180deg, #0a0a0ed9, #0a0a0ea8 52%, #0a0a0e40),
      url('assets/andras-sealfall.webp') 75% 50% / cover;
  }
  .world .sigil { width: min(56%, 180px); }
  .chapter { min-height: 0; }
  .relic-feature { grid-template-columns: 1fr; }
  .relic-art { min-height: 0; aspect-ratio: 3 / 2; }
  .development-note { grid-template-columns: 1fr; }
  .development-note > div + div { border-left: 0; border-top: 1px solid #685039; }
}
@media (max-width: 480px) {
  .feature-grid, .legacy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .chapters { grid-template-columns: 1fr; }
  .hero-controls button { padding-inline: .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art { transition: none; }
  .world.is-in-view .sigil-core, .pre-register.section.is-in-view::after { animation: none; }
}