/* 2027 신년 미리보기 웹 — 동물 카드 페이지와 같은 집안(한지 크림 종이 · 고운바탕 굵은 제목 · Pretendard ·
   가는 이중선). 이 페이지만의 한 방은 '붉은 양의 해' 연말 카드 넘김(다섯 장).
   어른들도 보는 화면이라 본문 18px 이상, 버튼 글씨 20px 이상 · 높이 56px 이상.
   한글은 어절 중간에서 끊지 않는다(사장님 절대 규칙). 필기체 · 세로쓰기 · 낙관 없음. docs/36 §4 */

:root {
  color-scheme: only light;
  --paper: #F4EDE2;      /* 카드 위아래 띠와 같은 종이 색 */
  --paper-hi: #FBF7EF;   /* 한 겹 위 종이(입력판 · 칸) */
  --paper-lo: #EBE1D1;   /* 한 겹 아래 종이(안내 상자) */
  --ink: #4A3426;        /* 카드 본문 먹색 */
  --soft: #7A5A44;       /* 안내 글씨 · 이중선 */
  --field: #9C8169;      /* 입력칸 테두리(종이 위 대비 3:1 이상) */
  --focus: #2C5A8A;
  --red: #9E2B22;        /* 붉은 양 — 동물 카드의 '붉은' 제목 색 */
  --red-deep: #7E1F18;
  --blue: #2C5A8A;       /* 조심할 달 — 겁주는 빨강 대신 차분한 푸른색(카드 페이지 '부딪히기 쉬운 짝'과 같다) */
  --blue-deep: #22476E;
  --gold: #E9C77B;       /* 붉은 장 위의 금빛 줄 · 단추 */
  --gold-ink: #3A2A10;
  --night: #3A2A20;      /* 열두 달 장 — 먹갈색 밤 */
  --sky: #CFE0F2;        /* 밤 장 위의 '조심할 달' 표시(카드 페이지 '부딪히기 쉬운 짝'과 같은 결) */
  --cream: #FBF7EF;
  --gutter: 16px;
  --slide-w: min(400px, calc(100vw - 56px));
  --shadow: 0 1px 2px rgba(74, 52, 38, .10), 0 14px 30px -14px rgba(74, 52, 38, .45);
  --serif: "Gowun Batang", "Nanum Myeongjo", "AppleMyungjo", serif;
  --sans: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 700; }
.hero-lead, .note, .hint, .memo, .s-line, .s-note, .swipe-hint, .appbox-title, .toast { text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; }
button, select, input { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* 카드의 가는 이중선(굵은 선 + 가는 선) */
.rule { height: 9px; border-top: 3px solid var(--soft); border-bottom: 1px solid var(--soft); }
.rule-rev { border-top-width: 1px; border-bottom-width: 3px; }
.eyebrow { font: 600 17px/1.5 var(--sans); color: var(--soft); letter-spacing: .01em; }

/* 이 휴대폰이 기억하는 나가 있으면(머리의 한 줄 스크립트가 표시) 입력판 대신 '불러오는 중' */
.me-loading { display: none; margin: 48px 16px; text-align: center; font: 600 18px/1.6 var(--sans); color: var(--soft); }
.has-me #intro { display: none; }
.has-me .me-loading { display: block; }

/* ── 머리 ─────────────────────────────── */
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.brand { font: 700 24px/1 var(--serif); color: var(--ink); text-decoration: none; padding: 10px 0; }
.top-tag { font: 600 16px/1.3 var(--sans); color: var(--soft); }
/* 머리 오른쪽 [인생지도 앱 받기] — 늘 보이는 작은 보조 단추(카드 페이지와 같다 · 누르기 48px) */
.top-app {
  display: inline-flex; align-items: center; min-height: 48px; padding: 6px 14px; border-radius: 10px;
  border: 2px solid var(--ink); background: var(--paper-hi); color: var(--ink);
  font: 700 16px/1.2 var(--sans); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.top-app:hover { background: #fff; }

/* ── 첫 화면 ───────────────────────────── */
.intro { padding-top: 20px; padding-bottom: 44px; }
.hero-art { position: relative; width: 100%; max-width: 340px; margin: 4px auto 0; }
.hero-art img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px;
  box-shadow: var(--shadow); background: var(--paper-hi);
}
.hero-text { text-align: center; margin-top: 20px; }
.hero-title { margin-top: 6px; font: 700 clamp(30px, 8.6vw, 50px)/1.28 var(--serif); color: var(--ink); }
.hero-title .em { color: var(--red); }
.hero-lead { margin-top: 12px; font-size: 18px; color: var(--soft); }

/* ── 입력판 — 카드처럼 이중 테두리(카드 페이지와 같다) ───────────── */
.panel {
  background: var(--paper-hi);
  border: 2px solid var(--soft);
  box-shadow: inset 0 0 0 5px var(--paper-hi), inset 0 0 0 6px var(--soft);
  border-radius: 3px;
}
.form { margin-top: 22px; padding: 26px 16px 22px; }
.field { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.label { display: block; padding: 0; margin-bottom: 10px; font: 700 18px/1.4 var(--sans); color: var(--ink); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg-opt { position: relative; display: block; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-opt span {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px;
  border: 2px solid var(--field); border-radius: 10px; background: transparent;
  font: 600 20px/1.2 var(--sans); color: var(--soft);
}
.seg-opt span::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.seg-opt input:checked + span { border-color: var(--ink); background: #fff; color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--ink); }
.seg-opt input:checked + span::before { background: radial-gradient(circle, var(--ink) 0 5px, transparent 5.5px); }
.seg-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-top: 12px; cursor: pointer; font: 600 19px/1.4 var(--sans); }
.check input { width: 26px; height: 26px; margin: 0; accent-color: var(--ink); flex: none; }
/* 년 · 월 · 일 한 줄은 380px 이상에서만 — 더 좁으면 해 한 줄, 달 · 날 한 줄('12월' · '31일'이 칸에서 잘리지 않게) */
.ymd { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.hm { display: grid; grid-template-columns: 1.7fr 1fr; gap: 8px; }
.hm.no-min { grid-template-columns: 1fr; }
@media (max-width: 379.98px) {
  .ymd { grid-template-columns: 1fr 1fr; }
  .ymd .select:first-of-type { grid-column: 1 / -1; }
}
.select {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 58px; margin: 0;
  padding: 0 30px 0 12px; border: 2px solid var(--field); border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%237A5A44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 14px 9px;
  font: 600 20px/1.2 var(--sans); color: var(--ink); cursor: pointer; text-overflow: ellipsis; white-space: nowrap;
}
.select:invalid, .select.is-empty { color: var(--soft); font-weight: 500; }
.select option { color: var(--ink); }
.hint { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--soft); }
.form-error { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #F6E3DE; color: #8A2A1E; font: 600 18px/1.55 var(--sans); }
.note { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--soft); text-align: center; }

/* ── 버튼 — 채움 하나(주) · 테두리(보조) · 금빛(붉은 장 위의 앱 단추) ───────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px;
  padding: 12px 20px; border-radius: 12px; border: 2px solid var(--ink);
  font: 700 21px/1.35 var(--sans); text-align: center; text-decoration: none; cursor: pointer; text-wrap: balance;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--paper-hi); }
.btn-primary:hover { background: #3A281C; }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--paper-lo); }
.btn-gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn-gold:hover { background: #F0D493; }
/* 공유 한 쌍(7차 — 카드 페이지와 같다) — 크고 노란 [카카오톡으로 공유](카카오 디자인 가이드: 바탕 #FEE500 · 말풍선 #000 ·
   글씨 #000 85%) + 작은 [다른 앱](외곽선 · 공유 그림 — 그림 위 · 글씨 아래로 좁게, 320 폭에서도 한 줄 · 같은 높이) */
.share2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.share2 .btn { min-height: 64px; padding: 10px 12px; gap: 8px; font-size: 20px; line-height: 1.25; }
.share2 .btn svg { flex: none; }
.btn-kakao { background: #FEE500; border-color: #FEE500; color: rgba(0, 0, 0, .85); box-shadow: 0 1px 0 rgba(74, 52, 38, .18); }
.btn-kakao:hover { background: #F2DA00; border-color: #F2DA00; }
.btn-apps { background: var(--paper-hi); color: var(--ink); }
.btn-apps:hover { background: #fff; }
.share2 .btn-apps { flex-direction: column; gap: 2px; width: auto; min-width: 84px; padding: 6px 10px; font-size: 16px; line-height: 1.2; }
.share2 .btn-apps svg { width: 22px; height: 22px; }
/* 좁은 폰(380 아래) — '카카오톡으로 공유'가 한 줄에 들게(카드 페이지와 같다) */
@media (max-width: 379.98px) {
  .share2 { gap: 6px; }
  .share2 .btn { padding: 8px 8px; gap: 6px; font-size: 19px; }
  .share2 .btn-apps { min-width: 72px; padding: 6px 6px; font-size: 16px; }
}
.btn[disabled] { cursor: progress; opacity: .85; }
.spin {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 3px solid rgba(251, 247, 239, .35); border-top-color: var(--paper-hi); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-text {
  display: block; margin: 22px auto 0; min-height: 52px; padding: 10px 18px; border: 0; background: none;
  font: 600 19px/1.4 var(--sans); color: var(--soft); text-decoration: underline; text-underline-offset: 5px; cursor: pointer;
}

/* ── 결과 — 넘겨 보는 다섯 장 ───────────────────── */
.result { padding-top: 18px; padding-bottom: 48px; }
.result:focus { outline: none; }
.result-head { text-align: center; }
.result-title { margin-top: 2px; font: 700 clamp(26px, 7.4vw, 38px)/1.3 var(--serif); color: var(--ink); }
.result-title:focus { outline: none; }
.swipe-hint { margin-top: 4px; font: 600 16px/1.5 var(--sans); color: var(--soft); }

/* 장 하나 = 화면 폭보다 조금 좁게 — 옆 장이 살짝 보여 '넘겨 볼 수 있다'가 보인다. 장을 가운데에 세운다. */
.deck {
  margin-top: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: -3px;
}
.deck::-webkit-scrollbar { display: none; }
/* 줄 폭을 장들에 맞춰야(max-content) 오른쪽 여백까지 넘김 폭에 들어 마지막 장도 가운데에 선다 */
.track {
  display: flex; gap: 14px; width: max-content; margin: 0; list-style: none;
  padding: 6px max(var(--gutter), calc((100% - var(--slide-w)) / 2)) 22px;
}
.slide {
  flex: 0 0 var(--slide-w); scroll-snap-align: center; scroll-snap-stop: always;
  position: relative; min-height: min(560px, calc(var(--slide-w) * 1.42)); border-radius: 18px;
  color: var(--cream); box-shadow: 0 2px 4px rgba(58, 30, 20, .18), 0 22px 40px -18px rgba(58, 30, 20, .6);
  transition: opacity .3s, transform .3s;
}
.slide:not(.is-on) { opacity: .55; transform: scale(.96); }
/* 장 안쪽 이중선 — 카드 틀과 같은 결(금빛) */
.slide::before {
  content: ""; position: absolute; inset: 10px; border: 2px solid rgba(233, 199, 123, .75);
  box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(233, 199, 123, .45); border-radius: 10px; pointer-events: none;
}
.slide-in { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 30px 26px 30px; text-align: center; }
.s-word, .s-good { background: radial-gradient(120% 80% at 50% 0%, #B3362B 0%, var(--red) 46%, var(--red-deep) 100%); }
.s-caution { background: radial-gradient(120% 80% at 50% 0%, #3A6E9F 0%, var(--blue) 50%, var(--blue-deep) 100%); }
.s-lock { background: radial-gradient(120% 80% at 50% 0%, #4E3A2C 0%, var(--night) 55%, #2A1E17 100%); }
.s-lucky { background: var(--paper-hi); color: var(--ink); }
.s-lucky::before { border-color: rgba(122, 90, 68, .7); box-shadow: inset 0 0 0 5px rgba(122, 90, 68, .35); }

.s-eyebrow { font: 700 16px/1.5 var(--sans); letter-spacing: .04em; color: var(--gold); }
.s-lucky .s-eyebrow { color: var(--soft); }
.s-line { margin-top: 14px; font: 600 19px/1.65 var(--sans); color: var(--cream); }
.s-lucky .s-line { color: var(--ink); }
.s-note { margin-top: 16px; font: 600 17px/1.6 var(--sans); color: var(--cream); }
/* 머리 글(위) 아래 남은 자리의 가운데에 — 글이 적은 장도 아래가 휑하지 않게 */
.s-body { display: flex; flex-direction: column; align-items: center; width: 100%; margin: auto 0; padding-bottom: 10px; }

/* 1 · 한 단어 */
.s-art { width: 100%; max-width: 250px; margin-top: 14px; border-radius: 10px; overflow: hidden; border: 3px solid rgba(251, 247, 239, .85); }
.s-art img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 60% 62%; }
.s-ask { margin-top: 18px; font: 700 20px/1.4 var(--serif); color: var(--cream); }
.s-word-text { margin-top: 4px; font: 700 clamp(60px, 18vw, 80px)/1.12 var(--serif); color: #FFF4DA; white-space: nowrap; letter-spacing: .02em; }
.s-word-text .q { font-size: .62em; color: var(--gold); vertical-align: .18em; }
.s-word .s-line { margin-top: 10px; }

/* 잠긴 한 줄 — 자물쇠 + 흐린 낱말 모양(앱 _LockedLine 과 같은 생김). 글자가 없는 모양만이다 — 풀이는 서버가 보내지 않고,
   흐린 글을 두면 소스 보기로 읽힌다. 낱말 사이 틈이 있는 막대를 흐려 '가려진 글'처럼 보이게 한다 */
.locked-line { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 12px; }
.locked-line .lock { flex: none; width: 20px; height: 20px; opacity: .9; }
.ghost {
  flex: 0 1 auto; height: 13px; border-radius: 7px; opacity: .5; filter: blur(2.5px);
  background: linear-gradient(90deg, currentColor 0 21%, transparent 21% 26%, currentColor 26% 49%,
    transparent 49% 54%, currentColor 54% 66%, transparent 66% 71%, currentColor 71% 100%);
}
.ghost.g0 { width: 80%; }
.ghost.g1 { width: 64%; }
.ghost.g2 { width: 72%; }

/* 2 · 좋은 달 둘 — 어느 달인지만(한 줄 자리는 잠긴 줄) */
.months { display: grid; gap: 14px; width: 100%; margin-top: 8px; }
.month { padding: 14px 14px 18px; border-radius: 14px; background: rgba(251, 247, 239, .1); border: 1px solid rgba(233, 199, 123, .45); }
.month-n { display: block; font: 700 clamp(48px, 14vw, 60px)/1.05 var(--serif); color: #FFF4DA; }
.month-n small { font-size: .5em; margin-left: 2px; }

/* 3 · 조심할 달 — 어느 달인지만 */
.s-big { font: 700 clamp(76px, 22vw, 96px)/1 var(--serif); color: #F2F6FB; }
.s-big small { font-size: .45em; margin-left: 2px; }
.s-caution .s-eyebrow { color: var(--sky); }
.s-caution .locked-line { margin-top: 22px; color: #F2F6FB; }

/* 5 · 열두 달 — 앱 '2027 열두 달'과 같은 줄(달 · 표시 · 점수 막대 · 점수). 잠긴 달은 끝에 자물쇠, 맛보기 달(1월)만
   아래에 한 줄. 표시 자리는 늘 비워 둔다 — 표시가 있는 달만 막대가 밀리지 않게(앱과 같다) */
.taster { margin-top: 4px; font-size: 16px; line-height: 1.5; }
.mlist { display: grid; width: 100%; margin: 10px 0 14px; padding: 0; list-style: none; text-align: left; }
.mrow { padding: 1px 0; }
.mrow-top {
  display: grid; grid-template-columns: 2.4em 18px minmax(0, 1fr) 1.6em 15px; align-items: center; column-gap: 7px;
  min-height: 21px; font: 700 16px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--cream);
}
.mrow-i, .mrow-k { display: grid; place-items: center; }
.mrow-i .mark { width: 18px; height: 18px; }
.mrow-bar { height: 8px; border-radius: 4px; background: rgba(251, 247, 239, .16); overflow: hidden; }
.mrow-bar i { display: block; height: 100%; border-radius: inherit; background: rgba(251, 247, 239, .8); }
.mrow-bar.is-empty { visibility: hidden; } /* 점수가 없는 옛 서버 답 — 자리만 둔다 */
.mrow-s { text-align: right; }
.mrow-k { color: rgba(251, 247, 239, .62); }
.mrow-k .lock { width: 15px; height: 15px; }
.mrow.is-good .mrow-m, .mrow.is-good .mrow-i { color: var(--gold); }
.mrow.is-good .mrow-bar i { background: var(--gold); }
.mrow.is-caution .mrow-m, .mrow.is-caution .mrow-i { color: var(--sky); }
.mrow.is-caution .mrow-bar i { background: var(--sky); }
.mrow-line { margin: 3px 0 5px; padding: 6px 12px; border-radius: 10px; background: rgba(251, 247, 239, .08); font: 600 17px/1.5 var(--sans); color: var(--cream); }
.s-lock .btn { margin-top: auto; font-size: 20px; }

/* 4 · 행운 */
.lucky { display: flex; align-items: center; gap: 18px; width: 100%; margin-top: 22px; text-align: left; }
.swatch { flex: none; width: 96px; height: 96px; border-radius: 50%; background: #ccc; box-shadow: inset 0 0 0 2px rgba(74, 52, 38, .25), 0 6px 16px -8px rgba(74, 52, 38, .6); }
.lucky-rows { display: grid; gap: 8px; min-width: 0; }
.lucky-row { display: flex; flex-direction: column; }
.lucky-k { font: 600 16px/1.4 var(--sans); color: var(--soft); }
.lucky-row b { font: 700 clamp(28px, 7.6vw, 34px)/1.25 var(--serif); color: var(--ink); }
.s-lucky .s-line { margin-bottom: 18px; }
.s-app { display: inline-flex; align-items: center; min-height: 48px; margin-top: 8px; padding: 8px 4px; font: 600 18px/1.4 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

/* 넘김 단추 · 점 다섯 */
.deck-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.nav-btn {
  display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%;
  border: 2px solid var(--soft); background: var(--paper-hi); color: var(--ink); cursor: pointer;
  font: 400 34px/1 var(--sans); -webkit-tap-highlight-color: transparent;
}
.nav-btn span { margin-top: -4px; }
.nav-btn:disabled { opacity: .35; cursor: default; }
.dots { display: flex; gap: 2px; }
.dot { width: 34px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dot::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #CDBBA5; transition: width .2s, background-color .2s; }
.dot.is-on::before { width: 26px; border-radius: 6px; background: var(--red); }
/* 좁은 폰(360 아래) — 단추 둘과 점 다섯이 여백 안에 들어오게 */
@media (max-width: 359.98px) {
  .deck-nav { gap: 6px; }
  .dot { width: 26px; }
}

/* 넘김 아래 — 공유하기 · 앱 · 내 카드 · 다시 · 지우기 */
.after { display: grid; gap: 14px; max-width: 560px; margin-top: 18px; }
.appbox {
  margin-top: 14px; padding: 22px 18px 20px; border-radius: 3px; background: var(--paper-hi); text-align: center;
  border: 2px solid var(--soft); box-shadow: inset 0 0 0 5px var(--paper-hi), inset 0 0 0 6px var(--soft);
}
/* 앱 이름표 — 아이콘 + '인생지도' + 한 줄(첫눈에 앱 소개인 줄 알게 — 6차, 카드 페이지와 같다) */
.app-id { display: flex; align-items: center; gap: 14px; text-align: left; }
.app-icon {
  flex: none; width: 56px; height: 56px; border-radius: 14px; background: #DCE7F1;
  box-shadow: 0 0 0 1px rgba(74, 52, 38, .14), 0 6px 14px -8px rgba(74, 52, 38, .6);
}
.app-id-text { display: flex; flex-direction: column; min-width: 0; }
.app-name { font: 700 24px/1.25 var(--serif); color: var(--ink); }
.app-id-text span { margin-top: 2px; font: 600 16px/1.45 var(--sans); color: var(--soft); }
.appbox .app-id { justify-content: center; } /* 이 페이지의 앱 칸은 가운데 맞춤 */
.appbox-title { margin-top: 14px; font: 700 clamp(22px, 6vw, 26px)/1.4 var(--serif); color: var(--ink); }
.appbox-list { display: grid; gap: 8px; margin: 14px 0 18px; padding: 0; list-style: none; text-align: left; }
.appbox-list li { position: relative; padding-left: 26px; font-size: 18px; line-height: 1.6; }
.appbox-list li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 9px; height: 9px; background: var(--red); transform: rotate(45deg); }
.appbox .btn-gold { border-color: #C9A24E; }
.cardlink {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 92px;
  padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--paper-hi); border: 1.5px solid #CDBBA5;
  text-decoration: none; color: var(--ink);
}
.cardlink:hover { border-color: var(--soft); background: #fff; }
.cardlink img { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; object-position: 50% 72%; background: var(--paper); }
.cardlink-text { display: flex; flex-direction: column; min-width: 0; }
.cardlink-k { font: 600 16px/1.4 var(--sans); color: var(--soft); }
.cardlink-name { font: 700 22px/1.3 var(--serif); color: var(--red); }
.go { font: 400 30px/1 var(--sans); color: var(--soft); }
.memo { margin-top: -8px; text-align: center; font-size: 16px; color: var(--soft); }
.link-btn {
  min-height: 44px; padding: 8px 6px; border: 0; background: none; cursor: pointer;
  font: 600 16px/1.4 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
}

/* ── 바닥 ─────────────────────────────── */
.foot { padding-bottom: 40px; color: var(--soft); font-size: 16px; }
.foot p { margin-top: 16px; }
.foot a { color: var(--ink); text-underline-offset: 4px; }
.toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 10;
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  padding: 14px 20px; border-radius: 12px; background: var(--ink); color: var(--paper-hi);
  font: 600 18px/1.5 var(--sans); text-align: center; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
}

/* ── 넓은 화면 ─────────────────────────── */
@media (min-width: 760px) {
  :root { --gutter: 32px; --slide-w: 400px; }
  .after { margin-left: auto; margin-right: auto; }
}
@media (min-width: 960px) {
  /* 결과 — 왼쪽 넘김(한 장씩, 옆 장은 감춤), 오른쪽 제목과 보내기 · 앱 · 내 카드 */
  .result-body {
    display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-areas: "stage head" "stage after";
    grid-template-rows: auto 1fr; column-gap: 64px; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter);
  }
  .result-head { grid-area: head; padding: 26px 0 0; text-align: left; }
  .stage { grid-area: stage; position: sticky; top: 12px; align-self: start; }
  .track { gap: 40px; }
  .deck-nav { padding: 0; }
  .result-body .after { grid-area: after; max-width: 560px; margin: 22px 0 0; padding: 0; }
  .intro {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    grid-template-areas: "art text" "art form"; grid-template-rows: auto 1fr;
    column-gap: 64px; padding-top: 44px; padding-bottom: 64px; align-items: start;
  }
  .hero { display: contents; }
  .hero-art { grid-area: art; align-self: center; max-width: 480px; margin: 0 auto; }
  .hero-text { grid-area: text; text-align: left; margin-top: 0; }
  .hero-lead { font-size: 19px; }
  .form { grid-area: form; margin-top: 26px; padding: 30px 30px 26px; }
  .result-head { margin-top: 10px; }
  .swipe-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .slide:not(.is-on) { transform: none; }
}