/* MapInLife — 다국어 프로토타입 스타일시트
   전부 원본 시안 이미지를 변형 없이 사용하고, 상호작용 레이어만 위에 얹습니다. */

:root{
  --bg:#100f0d;
  --chrome:#0b0b0c;
  --chrome-line:#24242a;
  --tab-off:#9b968e;
  --tab-on-bg:#f3efe6;
  --tab-on-fg:#121212;
  --tab-border:#33333a;
  --accent:#1a3ec7;
  --accent-warm:#d8a33c;
  --hot:#f4491f;
  --paper:#efe9dd;
  --ink:#221f18;
  --gold-line:#c4ad48;
  --font-kr:'Noto Sans KR',system-ui,sans-serif;
  --font-serif:'Noto Serif',Georgia,serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);font-family:var(--font-kr)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--hot)}
img{display:block;border:0}
button,select{font-family:inherit}
::selection{background:var(--accent);color:#fff}

/* ---------- 상단 크롬 ---------- */
.chrome{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;
  padding:9px 20px;background:var(--chrome);border-bottom:1px solid var(--chrome-line);flex-wrap:wrap}
.chrome__logo{height:34px;width:auto}
.tabs{display:flex;gap:4px}
.tab{white-space:nowrap;flex:none;padding:7px 15px;font-size:12.5px;font-weight:500;
  color:var(--tab-off);background:transparent;border:1px solid var(--tab-border);
  border-radius:3px;cursor:pointer;transition:background .15s,color .15s}
.tab:hover{color:#d9d3c8;border-color:#4a4a52}
.tab--on{background:var(--tab-on-bg);color:var(--tab-on-fg);border-color:var(--tab-on-bg);font-weight:700}
.chrome__meta{margin-left:auto;font-size:11px;letter-spacing:.14em;color:#7d7a74}

/* ---------- 스테이지 ---------- */
.viewport{display:flex;justify-content:center;padding:26px 0 64px}
.stage{transform-origin:top center}
.screen{position:relative;box-shadow:0 34px 90px rgba(0,0,0,.55)}
.screen img.base{width:100%;height:100%}

/* ---------- 클릭 영역 ---------- */
.hot{position:absolute;cursor:pointer;border-radius:6px;z-index:15;
  transition:box-shadow .18s ease,background .18s ease}
.hot:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 0 26px rgba(244,73,31,.5);
  background:rgba(255,255,255,.12)}
.hints .hot{box-shadow:inset 0 0 0 2px rgba(26,62,199,.85);background:rgba(26,62,199,.18);
  animation:mil-pulse 2.6s ease-in-out infinite}

/* ---------- 입력 컨트롤 ---------- */
.fld{position:absolute;z-index:16}
.fld select{width:100%;height:100%;border-radius:1px;padding:0 22px 0 8px;
  font-size:13px;line-height:1;cursor:pointer;outline:none;
  appearance:none;-webkit-appearance:none}
.fld__mark{position:absolute;right:7px;top:50%;transform:translateY(-50%);pointer-events:none}
.fld__mark--arrow{font-size:8px}
.fld__mark--unit{font-size:12.5px}

/* 종이(노란 카드) 폼 — 한/일 스킨1 */
.fld--paper select{background:#fff;border:1px solid var(--gold-line);color:var(--ink)}
.fld--paper .fld__mark--arrow{color:#7c6f3e}
.fld--paper .fld__mark--unit{color:#3a3428}

/* 다크 폼 — 한국 스킨2 */
.fld--dark select{background:rgba(12,16,24,.94);border:1px solid rgba(185,154,99,.5);
  border-radius:4px;color:#efe3cd;padding-right:24px;font-size:13.5px}
.fld--dark .fld__mark--arrow{color:#b99a63}

/* 다크 폼 — 미국 */
.fld--us select{background:rgba(9,20,33,.92);border:1px solid rgba(201,163,93,.45);
  border-radius:3px;color:#f0e6d2;font-family:var(--font-serif);padding-right:20px}
.fld--us .fld__mark--arrow{color:#c9a35d}

.seg{position:absolute;z-index:16;cursor:pointer;border-radius:3px;font-size:13px;
  font-family:var(--font-serif);transition:background .15s,border-color .15s,color .15s}
.seg--off{background:rgba(9,20,33,.92);border:1px solid rgba(201,163,93,.40);color:#cfc4ae}
.seg--on{background:rgba(201,163,93,.20);border:1px solid #c9a35d;color:#f4e3bd}

.chip{position:absolute;z-index:16;display:flex;align-items:center;gap:5px;
  padding:4px 10px;font-size:12px;border-radius:2px;cursor:pointer;color:#231f16;
  background:rgba(255,255,255,.45);border:1px solid var(--gold-line)}
.chip--on{background:#fff;border-color:#8a6a12;font-weight:700}

.toggle-area{position:absolute;z-index:16;cursor:pointer;border-radius:4px;background:transparent}
.toggle-area--on{background:rgba(185,154,99,.16)}

.cta-primary{position:absolute;z-index:16;white-space:nowrap;border:0;cursor:pointer;
  background:var(--accent-warm);color:#161106;font-size:15px;font-weight:700;
  letter-spacing:.02em;border-radius:4px;padding:0 26px;height:48px;
  box-shadow:0 10px 26px rgba(0,0,0,.5)}
.cta-primary:hover{filter:brightness(1.08)}

/* ---------- 오버레이 패치 & 로고 ---------- */
.patch{position:absolute;z-index:11;background-repeat:no-repeat;background-position:left top;background-size:100% 100%}
.brand{position:absolute;z-index:12;width:auto}
.relabel{position:absolute;z-index:12;display:flex;align-items:center;
  font-family:var(--font-serif);color:#2b2317;letter-spacing:.05em}

/* ---------- 히어로 모션 ---------- */
.fx{position:absolute;z-index:8;pointer-events:none;overflow:hidden}
.fx__streak{position:absolute;left:0;mix-blend-mode:screen}
.fx__spark{position:absolute;border-radius:50%}
.flow{position:absolute;inset:0;width:100%;height:100%;z-index:9;
  pointer-events:none;mix-blend-mode:screen}
.hero-photo{position:absolute;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.hero-photo__inner{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:62% 55%;animation:mil-ken 24s ease-in-out infinite alternate}

/* ---------- 인트로(글씨 써지기) ---------- */
.intro{position:absolute;z-index:10;background-repeat:no-repeat;background-size:100% 100%}
.intro--text{animation:mil-wipe 1.3s .35s cubic-bezier(.4,.05,.5,.95) forwards}
.intro--line{animation:mil-wipe .5s 1.75s linear forwards}
.nib{position:absolute;top:8px;width:13px;height:26px;border-radius:3px 3px 6px 6px;
  background:linear-gradient(#1b2a52,#0d1730);box-shadow:0 3px 8px rgba(0,0,0,.35);
  transform:rotate(14deg);animation:mil-nib .5s 1.75s linear forwards}

/* ---------- 카드 인터랙션 ---------- */
.tarot{position:absolute;z-index:16;cursor:pointer;perspective:600px}
.tarot__inner{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.45,.05,.3,1)}
.tarot--flip .tarot__inner{transform:rotateY(180deg)}
.tarot__face{position:absolute;inset:0;width:100%;height:100%;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tarot__face--back{transform:rotateY(180deg)}
.face{position:absolute;z-index:16;overflow:hidden;cursor:ew-resize}
.face__dim{position:absolute;top:0;bottom:0;pointer-events:none;background:rgba(6,7,10,0)}
.face__line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,248,232,0),rgba(255,248,232,.85) 20%,rgba(255,248,232,.85) 80%,rgba(255,248,232,0));
  box-shadow:0 0 12px rgba(255,238,200,.8)}
.node{position:absolute;border-radius:50%;pointer-events:none;z-index:9}
.sweep{position:absolute;pointer-events:none;z-index:8;mix-blend-mode:screen}

/* ---------- 모바일 ---------- */
.phones{display:flex;gap:34px;justify-content:center;align-items:flex-start}
.phone{position:relative;filter:drop-shadow(0 26px 60px rgba(0,0,0,.55))}
.phone img.base{border-radius:var(--r,30px)}
.phone__label{position:absolute;left:0;right:0;bottom:-30px;text-align:center;
  font-size:11.5px;letter-spacing:.12em;color:#8d8880}
.menu-btn{position:absolute;right:10px;bottom:12%;width:38px;height:38px;z-index:20;
  border-radius:50%;border:1px solid rgba(232,214,178,.35);background:rgba(14,16,22,.82);
  color:#efe6d4;font-size:15px;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.4)}
.menu-btn--on{background:rgba(232,214,178,.95);color:#14110c}
.scrim{position:absolute;inset:0;z-index:18;background:rgba(6,8,12,.55);
  opacity:0;pointer-events:none;transition:opacity .28s ease}
.scrim--on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:19;max-height:74%;overflow:auto;
  padding:10px 16px 18px;background:linear-gradient(#12151d,#0b0d13);
  border-radius:16px 16px 0 0;box-shadow:0 -14px 40px rgba(0,0,0,.6);
  transform:translateY(102%);transition:transform .34s cubic-bezier(.22,.8,.28,1)}
.sheet--on{transform:translateY(0)}
.sheet__grip{width:38px;height:4px;border-radius:3px;margin:2px auto 12px;background:rgba(240,232,214,.28)}
.sheet__title{font-size:11px;letter-spacing:.14em;color:#9c968a;margin:0 2px 8px}
.sheet__item{display:flex;align-items:center;gap:11px;padding:11px 4px;font-size:14px;
  color:#eee7d8;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer}
.sheet__item:hover{background:rgba(255,255,255,.04)}
.sheet__dot{width:6px;height:6px;border-radius:50%;background:rgba(216,178,104,.35)}
.sheet__dot--hi{background:#d8b268}
.sheet__chev{opacity:.45;font-size:12px}

/* ---------- 키프레임 ---------- */
@keyframes mil-ken{0%{transform:scale(1.002) translate3d(0,0,0)}100%{transform:scale(1.035) translate3d(-.7%,-.4%,0)}}
@keyframes mil-pulse{0%,100%{opacity:.28}50%{opacity:.62}}
@keyframes mil-wipe{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes mil-nib{0%{left:-2%;opacity:0}6%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes mil-sweep-h{0%{transform:translateX(-30%);opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:translateX(130%);opacity:0}}
@keyframes mil-sweep-v{0%{transform:translateY(30%);opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:translateY(-130%);opacity:0}}
@keyframes mil-node{0%,100%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1.25)}34%{opacity:.55;transform:scale(1)}62%{opacity:0;transform:scale(.7)}}
@keyframes mil-drift{0%{transform:translateX(-24%) skewX(-14deg);opacity:0}14%{opacity:.9}82%{opacity:.9}100%{transform:translateX(124%) skewX(-14deg);opacity:0}}
@keyframes mil-twinkle{0%,100%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.15)}70%{opacity:.35;transform:scale(.85)}}
@keyframes mil-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-1600}}