/* 공주님, 귀환은요? — NTMR 랜딩의 뼈대(클래스 이름·반응형 규칙)를 따르되 게임의 「여행 안내서」 화면 색으로 칠한다.
   색은 게임 코드(TravelAtlasUi.cs)의 Paper·Page·Ink·Green·Gold·Rule·Sage 를 그대로 쓴다.
   게임 화면이 2340×1080(13:6) 가로라 가로 화면 틀(.screen)을 쓴다. 컷신 포스터만 16:9. */

:root{
  --paper:#f7ebcf;
  --page:#fff3d8;
  --sage:#dee0c5;
  --ink:#344b40;
  --sub:#544f3c;      /* 본문 — 게임의 Muted(#82795F)는 종이 위 대비가 3.7 이라 한 단계 어둡게 */
  --mist:#6b6450;
  --line:#e2d3ae;
  --rule:#cebd96;
  --green:#355748;
  --green-2:#264236;
  --gold:#b38b45;
  --accent:#83601f;   /* 제목 강조 — 게임의 Gold 를 종이 위 대비 4.5 이상으로 어둡게 */
  --red:#994d3f;
  --max:1180px;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-en:'DM Sans',var(--font);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  min-width:320px;
  overflow-x:hidden;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--font);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{color:var(--page);background:var(--green)}
.skip-link{position:fixed;left:12px;top:12px;z-index:100;padding:10px 15px;border-radius:999px;color:var(--page);background:var(--green);transform:translateY(-150%)}
.skip-link:focus{transform:none}
.shell{width:min(var(--max),calc(100% - 48px));margin:0 auto}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* navigation */
#nav{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--rule);
  background:rgba(255,243,216,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.nav__inner{width:min(var(--max),calc(100% - 48px));height:78px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__left{display:flex;align-items:center;gap:12px;min-width:0}
.nav__home{display:flex;align-items:center;gap:9px;color:var(--mist);font-family:var(--font-en);font-size:13px;font-weight:700;white-space:nowrap}
.nav__home:hover{color:var(--ink)}
.nav__home-mark{width:38px;height:38px;padding:3px;border:1px solid var(--rule);border-radius:12px;background:#fff}
.nav__crumb{width:1px;height:29px;overflow:hidden;color:transparent;background:var(--rule)}
.nav__logo{display:flex;align-items:center;gap:10px;min-width:0}
.nav__logo>img{width:40px;height:40px;border-radius:12px;box-shadow:0 0 0 1px var(--rule),0 8px 20px rgba(53,87,72,.16)}
.nav__logo>span{display:flex;flex-direction:column;color:var(--ink);font-size:15px;font-weight:800;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
.nav__logo small{color:var(--mist);font-family:var(--font-en);font-size:8px;font-weight:700;letter-spacing:.16em}
.nav__end{display:flex;align-items:center;gap:16px}
.nav__links{display:flex;align-items:center;gap:3px;padding:5px;border:1px solid var(--rule);border-radius:999px;background:rgba(255,255,255,.35)}
.nav__links a{padding:8px 13px;border-radius:999px;color:var(--sub);font-size:12px;font-weight:700;transition:color .15s,background .15s}
.nav__links a:hover{color:var(--ink);background:var(--sage)}
.nav__cta{min-height:42px;padding:0 17px;display:flex;align-items:center;gap:10px;border-radius:999px;color:var(--page);background:var(--green);font-size:13px;font-weight:700;white-space:nowrap;transition:background .15s,transform .15s}
.nav__cta:hover{background:var(--green-2);transform:translateY(-1px)}

/* shared type and controls */
.tag{margin-bottom:19px;display:inline-flex;align-items:center;gap:10px;color:var(--mist);font-size:12px;font-weight:700;letter-spacing:.04em}
.tag::before{content:'';width:9px;height:9px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
.tag b{color:var(--green);font-family:var(--font-en);font-variant-numeric:tabular-nums;letter-spacing:.1em}
h1,h2{font-weight:800;line-height:1.15;letter-spacing:-.045em;word-break:keep-all}
h2{font-size:clamp(34px,4vw,52px)}
h2 em{color:var(--accent);font-style:normal}
.body-p{color:var(--sub);word-break:keep-all}
.btn{min-height:52px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--rule);border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap;transition:transform .15s,background .15s,color .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn--primary{color:var(--page);border-color:var(--green);background:var(--green);box-shadow:0 12px 26px rgba(53,87,72,.22)}
.btn--primary:hover{background:var(--green-2)}
.btn small{font-size:10px;font-weight:600;opacity:.8}
.btn--store{min-width:184px;min-height:62px;padding:11px 22px;flex-direction:column;align-items:center;gap:3px;line-height:1.15;text-align:center}
.btn--store span{font-family:var(--font-en);font-size:14px;letter-spacing:.01em}
.btn--store small{font-size:10px;letter-spacing:.02em}
/* 아직 열리지 않은 스토어 — 테두리만 남기고 눌리지 않게 */
.btn--soon{color:var(--ink);border-color:var(--rule);background:rgba(255,255,255,.4);box-shadow:none;pointer-events:none}
.btn--soon small{opacity:1;color:var(--sub)}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);background:
  radial-gradient(60% 70% at 85% 25%,rgba(179,139,69,.20),transparent 70%),
  radial-gradient(55% 60% at 8% 95%,rgba(53,87,72,.13),transparent 70%),
  linear-gradient(180deg,var(--page) 0%,var(--paper) 100%)}
.hero__grid{position:relative;z-index:2;width:min(var(--max),calc(100% - 48px));min-height:700px;margin:0 auto;padding:76px 0 84px;display:grid;grid-template-columns:.86fr 1.14fr;gap:52px;align-items:center}
.hero__copy{position:relative;z-index:2}
.hero__brand{margin-bottom:38px;display:flex;align-items:center;gap:16px}
.hero__brand img{width:66px;height:66px;border-radius:18px;box-shadow:0 0 0 1px var(--rule),0 14px 30px rgba(53,87,72,.2)}
.hero__brand div{display:flex;flex-direction:column;gap:3px}
.hero__brand small{color:var(--mist);font-family:var(--font-en);font-size:9px;font-weight:700;letter-spacing:.16em}
.hero__brand strong{font-size:20px;font-weight:800;letter-spacing:-.03em}
.hero__eyebrow{margin-bottom:19px;display:flex;align-items:center;gap:10px;color:var(--green);font-size:13px;font-weight:700}
.hero__eyebrow::before{content:'';width:31px;height:2px;background:var(--gold)}
.hero h1{font-size:clamp(42px,5vw,66px)}
.hero h1 em{color:var(--accent);font-style:normal}
.hero__lead{max-width:520px;margin:26px 0 25px;color:var(--sub);font-size:17px;line-height:1.8;word-break:keep-all}
.hero__lead b{color:var(--ink)}
.hero__actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:11px}
.hero__more{display:inline-flex;margin-top:18px;align-items:center;gap:7px;color:var(--sub);font-size:13px;font-weight:700;border-bottom:1px solid var(--rule);transition:color .15s,border-color .15s}
.hero__more:hover{color:var(--ink);border-color:var(--ink)}
.hero__media{position:relative;width:100%}
.hero__media .screen{transform:rotate(1.5deg)}
.hero-chip{position:absolute;z-index:5;padding:9px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--page);color:var(--ink);font-size:13px;font-weight:800;box-shadow:0 10px 24px rgba(52,75,64,.16)}
.hero-chip--one{top:-18px;right:7%;transform:rotate(4deg)}
.hero-chip--two{left:5%;bottom:-18px;color:var(--red);transform:rotate(-4deg)}

/* 가로 화면 틀 — 눕힌 휴대폰. 테두리는 게임 하단 카드 막대의 짙은 나무색 */
.screen{position:relative;overflow:hidden;border:7px solid #2b2620;border-radius:26px;background:#1d1a16;box-shadow:0 0 0 1px rgba(52,75,64,.2),0 28px 60px rgba(52,60,40,.28)}
.screen img{width:100%;aspect-ratio:13/6;object-fit:cover}
.screen--film img{aspect-ratio:16/9}

/* facts */
.facts{position:relative;z-index:3;border-bottom:1px solid var(--rule);background:var(--green)}
.facts__inner{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:19px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px}
.facts span{display:flex;align-items:center;gap:9px;color:var(--page);font-size:13px;font-weight:700}
.facts span::before{content:'';width:6px;height:6px;border-radius:1px;background:var(--gold);transform:rotate(45deg)}

/* story sections */
.sec{position:relative;padding:108px 0;border-bottom:1px solid var(--rule);background:var(--paper);overflow-x:clip}
.sec:nth-of-type(even){background:var(--page)}
.row{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.row--flip{grid-template-columns:1.15fr .85fr}
.row--flip .row__copy{order:2}
.row--flip .row__media{order:1}
.row__copy .body-p{max-width:520px;margin-top:22px;font-size:16px;line-height:1.8}
.row__media{position:relative}
.row__media figcaption,.gallery figcaption{position:relative;z-index:2;margin-top:14px;color:var(--sub);font-size:13px;line-height:1.6;word-break:keep-all}
.row__media figcaption b,.gallery figcaption b{color:var(--ink)}
.shotcap{position:relative;z-index:2;margin-top:12px;display:flex;align-items:center;gap:8px;color:var(--mist);font-size:12px}
.shotcap::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold)}
.feature-list{max-width:540px;margin-top:28px;list-style:none;border-top:1px solid var(--rule)}
.feature-list li{position:relative;padding:13px 0 13px 23px;border-bottom:1px solid var(--rule);color:var(--sub);font-size:15px;word-break:keep-all}
.feature-list li::before{content:'';position:absolute;left:2px;top:22px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.feature-list li b{color:var(--ink)}

/* 동료 계열 — 다섯 계열, 열세 직업 */
.classes{margin-top:30px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:560px}
.class{padding:13px 10px 11px;border:1px solid var(--rule);border-top:3px solid var(--green);border-radius:12px;background:rgba(255,255,255,.45);text-align:center}
.class b{display:block;font-size:15px;font-weight:800}
.class span{display:block;margin-top:2px;color:var(--mist);font-size:12px;font-weight:600}

/* regions — 열두 지역과 Extra */
.regions{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;list-style:none;counter-reset:region}
.regions li{position:relative;padding:15px 16px 14px 48px;border:1px solid var(--rule);border-radius:14px;background:rgba(255,255,255,.45);font-size:15px;font-weight:700;word-break:keep-all}
.regions li::before{counter-increment:region;content:counter(region,decimal-leading-zero);position:absolute;left:16px;top:16px;color:var(--gold);font-family:var(--font-en);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.regions li.is-extra{border-color:var(--green);background:var(--sage)}
.regions li.is-extra::before{content:'EX';color:var(--green)}
.regions-note{margin-top:14px;color:var(--mist);font-size:13px}
.map-shot{margin-top:40px}

/* 여행 영상 스틸 */
.gallery{margin-top:46px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 30px}
.gallery .screen{border-width:5px;border-radius:18px}

/* download */
.sec--dl{overflow:hidden;border:0;background:
  radial-gradient(50% 80% at 50% 0%,rgba(179,139,69,.22),transparent 70%),
  var(--sage)!important}
.dl__inner{position:relative;z-index:2;width:min(var(--max),calc(100% - 48px));margin:0 auto;text-align:center}
.dl__inner .body-p{max-width:540px;margin:18px auto 34px}
.dl__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.dl__note{margin-top:22px;color:var(--mist);font-size:13px}
.dl__note a{color:var(--sub);border-bottom:1px solid var(--rule)}

/* footer */
.footer{padding:46px 0 38px;border-top:1px solid var(--rule);background:var(--page)}
.footer__inner{width:min(var(--max),calc(100% - 48px));margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:19px 28px}
.footer__logo{font-size:14px;font-weight:800;letter-spacing:-.02em}
.footer__nav{display:flex;flex-wrap:wrap;gap:9px 21px;color:var(--sub);font-size:13px}
.footer__nav a:hover{color:var(--ink)}
.footer__copy{width:100%;padding-top:24px;border-top:1px solid var(--rule);color:var(--mist);font-size:12px}

@media(max-width:980px){
  .nav__links{display:none}
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .hero__media{width:min(100%,680px);justify-self:center}
  .row,.row--flip{gap:48px}
}

@media(max-width:760px){
  .shell,.nav__inner,.hero__grid,.facts__inner,.dl__inner,.footer__inner{width:min(100% - 32px,620px)}
  .nav__inner{height:70px}
  .nav__home-text,.nav__crumb{display:none}
  .nav__home-mark,.nav__logo>img{width:35px;height:35px;border-radius:10px}
  .nav__cta{min-height:38px;padding:0 13px;font-size:12px}
  .hero__grid{min-height:auto;padding:60px 0 64px;text-align:center}
  .hero__copy{display:flex;flex-direction:column;align-items:center}
  .hero__brand{margin-bottom:30px}
  .hero h1{font-size:clamp(38px,11vw,54px)}
  .hero__lead{font-size:16px}
  .hero__actions{justify-content:center}
  .screen{border-width:5px;border-radius:18px}
  .hero-chip{font-size:12px;padding:7px 11px}
  .facts__inner{justify-content:flex-start}
  .sec{padding:80px 0}
  .row,.row--flip{grid-template-columns:1fr;gap:40px}
  .row--flip .row__copy,.row--flip .row__media{order:unset}
  .gallery{grid-template-columns:1fr;gap:26px}
  .footer__inner{align-items:flex-start;flex-direction:column}
}

@media(max-width:460px){
  .nav__home{display:none}
  .nav__left{gap:0}
  .nav__logo>span{font-size:13px}
  .nav__cta span{display:none}
  .hero__brand img{width:56px;height:56px}
  .hero__actions{width:100%}
  .hero__actions .btn{width:100%}
  .classes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .regions{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}