/* Unboxing Seoul app: a bright sketchbook. White canvas, olive ink, cards with hairline borders,
   one yellow-orange call to action per screen, pastel callouts, and Haechi, Seoul's official
   character, instead of decoration. No gradients, no drop shadows. */
:root {
  --canvas: #ffffff; --surface-soft: #f1f2ec; --surface-card: #ffffff; --surface-doc: #fafaf7;
  --hairline: #d3d5cb; --hairline-soft: #e6e7e0;
  --ink: #23251d; --charcoal: #33342d; --body: #4d4f46; --mute: #6c6e63; --ash: #9b9c92;
  --primary: #f7a501; --primary-pressed: #dd9001; --on-primary: #23251d;
  --blue: #2c84e0; --blue-soft: #dceaf6; --green: #2c8c66; --green-soft: #d9eddf;
  --red: #cd4239; --red-soft: #f7d6d3; --purple: #7c44a6; --purple-soft: #e7d8ee; --yellow-soft: #fdf0cf; --link: #1078a3;
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-pill: 9999px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--canvas); color: var(--body); }
body { font: 16px/1.5 "IBM Plex Sans", -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
a { color: var(--link); }
.ko { font-family: "Noto Sans KR", "IBM Plex Sans", sans-serif; }

/* ---------- app frame ---------- */
#app { min-height: 100%; }
.frame { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column;
         padding-top: var(--safe-t); position: relative; }
.top { height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 12px; position: sticky; top: 0;
       z-index: 9; background: var(--canvas); }
.top .title { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
              color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 40px; height: 40px; flex: none; border-radius: var(--r-md); border: 0; background: transparent;
            display: grid; place-items: center; color: var(--ink); cursor: pointer; }
.top .icon-btn:first-child { margin-left: -6px; }
.skip { border: 0; background: none; color: var(--mute); font-size: 14px; font-weight: 600; padding: 10px 6px; cursor: pointer; }
.icon-btn:active { background: var(--surface-soft); }
.plan-btn { border: 0; border-radius: var(--r-pill); background: var(--surface-soft); color: var(--ink); padding: 9px 14px;
            font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; flex: none; }
.plan-btn.on { background: var(--ink); color: #fff; }
.progress { height: 4px; background: var(--hairline-soft); border-radius: var(--r-pill); margin: 0 20px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--ink); border-radius: inherit; transition: width .35s ease; }
.segments { display: flex; gap: 4px; margin: 0 20px; }
.segments > i { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--hairline-soft); }
.segments > i.done { background: var(--ink); }
.segments > i.now { background: var(--primary); }

.screen { flex: 1; padding: 20px 20px calc(170px + var(--safe-b)); animation: in-next .3s ease both; }  /* clears a two-button bar */
.screen.one { padding-bottom: calc(100px + var(--safe-b)); }   /* one-button bar */
.screen.back { animation-name: in-back; }
@keyframes in-next { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes in-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--canvas);
       border-top: 1px solid var(--hairline-soft); padding: 12px 20px calc(12px + var(--safe-b)); }
.bar > div { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }

/* ---------- type ---------- */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; }
.q { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -.5px; color: var(--ink); margin: 8px 0 6px; }
.sub { font-size: 15px; line-height: 1.6; color: var(--mute); margin: 0 0 22px; }
.display { font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.8px; color: var(--ink); margin: 0; }
.hint { font-size: 21px; line-height: 1.4; font-weight: 600; letter-spacing: -.3px; color: var(--ink); margin: 6px 0 4px; }
.small { font-size: 13px; line-height: 1.5; color: var(--mute); }
.center { text-align: center; }

/* ---------- buttons ---------- */
.btn { min-height: 50px; width: 100%; border-radius: var(--r-md); border: 0; background: var(--surface-soft);
       color: var(--ink); font-weight: 700; font-size: 15px; padding: 0 16px; cursor: pointer; display: flex;
       align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: transform .08s ease; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.primary:active { background: var(--primary-pressed); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.soft { background: var(--surface-card); border: 1px solid var(--hairline); }
.btn:disabled { background: var(--surface-soft); color: var(--ash); cursor: default; transform: none; }
.btn.small { min-height: 42px; font-size: 14px; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
.link { background: none; border: 0; padding: 8px; color: var(--mute); font-size: 14px; font-weight: 500;
        text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- choices ---------- */
.choices { display: flex; flex-direction: column; gap: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice { width: 100%; text-align: left; border: 1px solid var(--hairline); background: var(--surface-card);
          border-radius: var(--r-md); padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 12px;
          font-size: 16px; font-weight: 600; color: var(--ink); position: relative;
          transition: border-color .15s, box-shadow .15s, transform .08s; }
.choice:active { transform: scale(.98); }
.choice .emo { font-size: 24px; line-height: 1; }
.choice .txt { flex: 1; }
.choice .txt small { display: block; color: var(--mute); font-weight: 400; font-size: 13px; margin-top: 2px; }
.choice.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice.sel::after { content: "✓"; font-weight: 700; color: var(--ink); }
.grid2 .choice { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 92px; }
.grid2 .choice.sel::after { position: absolute; top: 10px; right: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--hairline); background: var(--surface-card); border-radius: var(--r-pill);
        padding: 9px 15px; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--ink); }
.chip.sel { border-color: var(--ink); background: var(--ink); color: #fff; }
.field { width: 100%; border: 1px solid var(--hairline); background: var(--surface-card); border-radius: var(--r-md);
         padding: 12px 14px; font-size: 16px; color: var(--ink); outline: none; }
.field:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .3); }
.label { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mute); margin: 22px 0 10px; }
label > .label { display: block; margin-top: 0; }
.choice.small { padding: 12px 14px; font-size: 15px; justify-content: center; text-align: center; }
.choice.small.sel::after { content: none; }
.warn { color: var(--red); }
.toggle { display: flex; align-items: center; gap: 14px; }
.switch { width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--hairline-soft); position: relative;
          flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
                 background: #fff; box-shadow: 0 0 0 1px var(--hairline); transition: transform .2s; }
.sel .switch { background: var(--ink); }
.sel .switch::after { transform: translateX(18px); box-shadow: none; }
.choice.toggle.sel::after { content: none; }

.stepper { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 28px 0 8px; }
.stepper .num { font-size: 64px; font-weight: 700; letter-spacing: -2px; color: var(--ink); min-width: 100px; text-align: center; }
.stepper .num small { font-size: 20px; letter-spacing: 0; margin-left: 4px; color: var(--mute); }
.round { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface-card);
         font-size: 24px; color: var(--ink); cursor: pointer; }
.note { background: var(--blue-soft); color: var(--ink); border-radius: var(--r-md); padding: 14px 16px; font-size: 14px; margin-top: 18px; }

/* ---------- Haechi (official images, shown whole and unchanged) ---------- */
.haechi { display: block; width: auto; }
.hero .haechi { margin: 0 auto 18px; animation: bob 3.4s ease-in-out infinite; }
.haechi.float { margin: 12px auto 6px; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.haechi.pop { margin: 0 auto; animation: pop .9s cubic-bezier(.2, .9, .3, 1.3) both; transform-origin: 50% 100%; }
@keyframes pop { 0% { transform: translateY(24px) scale(.7); opacity: 0; } 60% { transform: translateY(-6px) scale(1.04); opacity: 1; }
                 100% { transform: none; } }
.credit { font-size: 11.5px; line-height: 1.5; color: var(--mute); text-align: center; margin: 20px 0 0; }
.langs .choice { padding: 12px 14px; min-height: 0; flex-direction: row; align-items: center; font-size: 15px; }
.langs .choice.sel::after { position: static; }

/* ---------- how it works ---------- */
.guide-card { border-radius: var(--r-lg); padding: 22px 22px 26px; text-align: center; color: var(--ink); min-height: 400px; }
.guide-card.blue { background: var(--blue-soft); }
.guide-card.green { background: var(--green-soft); }
.guide-card.purple { background: var(--purple-soft); }
.guide-card.yellow { background: var(--yellow-soft); }
.guide-card .haechi { margin: 6px auto 14px; animation: bob 3s ease-in-out infinite; }
.guide-card .q { margin: 0 0 8px; }
.guide-card p:last-child { font-size: 16px; line-height: 1.6; color: var(--charcoal); margin: 0; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--hairline);
               cursor: pointer; transition: width .2s, background .2s; }
.dots button.on { width: 22px; background: var(--ink); }

/* ---------- cards and callouts ---------- */
.card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg);
        padding: 22px 20px; color: var(--ink); margin-bottom: 14px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.pill { font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-soft); color: var(--charcoal); }
.pill.live { background: var(--green-soft); color: #1d5c43; }
.pill.more { border: 1px solid var(--blue); background: var(--blue-soft); color: var(--ink); cursor: pointer; font-family: inherit;
             display: inline-flex; align-items: center; gap: 4px; }
.pill.more .caret { font-size: 11px; transition: transform .2s; }
.pill.more.on .caret { transform: rotate(180deg); }
.route { margin-top: 10px; animation: rise .25s ease both; }
.route p { margin: 10px 0 0; }
.frag { border-radius: var(--r-md); padding: 14px 16px; margin-top: 14px; font-size: 15px; color: var(--ink); background: var(--surface-doc);
        border: 1px solid var(--hairline-soft); }
.frag b { font-weight: 700; }
.frag.blue { background: var(--blue-soft); border-color: transparent; }
.frag.green { background: var(--green-soft); border-color: transparent; }
.frag.purple { background: var(--purple-soft); border-color: transparent; }

/* ---------- planning ---------- */
.log { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.log li { background: var(--surface-card); border: 1px solid var(--hairline-soft); border-radius: var(--r-md);
          padding: 11px 14px; font-size: 15px; color: var(--ink); animation: in-next .3s ease both; }
.log li.busy { color: var(--mute); }
.log li.busy::after { content: " ···"; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.stats > div { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 12px 14px; }
.stats small { display: block; font-size: 12px; color: var(--mute); font-weight: 500; }
.stats b { font-size: 24px; font-weight: 700; letter-spacing: -.5px; color: var(--ink); }
.stats b + small { display: inline; margin-left: 6px; }

/* ---------- reveal ---------- */
.unbox { text-align: center; padding: 24px 0 8px; }
.revealed { animation: rise .5s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.place-en { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.7px; color: var(--ink); margin: 6px 0 4px; }
.place-ko { font-family: "Noto Sans KR", sans-serif; font-weight: 700; font-size: 24px; color: var(--ink); margin: 0; }
.photo { width: 100%; border-radius: var(--r-md); margin-top: 14px; display: block; border: 1px solid var(--hairline-soft); }

/* ---------- trip agent ---------- */
.agent-panel { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg);
               padding: 16px 18px; margin-bottom: 14px; color: var(--ink); animation: rise .35s ease both; }
.agent-head { display: flex; align-items: center; gap: 10px; }
.agent-head .haechi { flex: none; }
.agent-head .eyebrow { margin: 0; }
.agent-panel .msg { font-size: 16px; font-weight: 600; line-height: 1.45; margin: 10px 0 8px; }
.trace { font-size: 13.5px; line-height: 1.6; color: var(--body); margin: 0 0 12px; padding: 0; list-style: none; }
.flash { background: var(--green-soft); color: var(--ink); border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.error { background: var(--red-soft); color: #6e211b; border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; margin: 12px 0; }

/* ---------- sheets and the plans drop-down ---------- */
.scrim, .drop-scrim { position: fixed; inset: 0; background: rgba(35, 37, 29, .32); animation: fade .2s ease both; }
.scrim { z-index: 20; }
.drop-scrim { z-index: 7; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-width: 480px; margin: 0 auto;
         background: var(--canvas); border: 1px solid var(--hairline); border-bottom: 0; border-radius: 12px 12px 0 0;
         padding: 10px 20px calc(24px + var(--safe-b)); max-height: 88dvh; overflow: auto;
         animation: up .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes up { from { transform: translateY(100%); } }
.sheet .grab { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--hairline); margin: 0 auto 14px; }
.sheet h3 { font-size: 21px; font-weight: 700; letter-spacing: -.4px; color: var(--ink); margin: 0 0 4px; }
.drop { position: fixed; top: calc(56px + var(--safe-t)); left: 0; right: 0; z-index: 8; max-width: 480px; margin: 0 auto;
        background: var(--canvas); border: 1px solid var(--hairline); border-top: 0; border-radius: 0 0 12px 12px;
        padding: 4px 20px 20px; animation: down .3s cubic-bezier(.2, .8, .2, 1) both; }
.drop .small { margin: 0 0 12px; }
@keyframes down { from { transform: translateY(-100%); } }

/* ---------- passport ---------- */
.passport { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 22px 20px; color: var(--ink); }
.passport .haechi { float: right; margin: -6px -4px 0 8px; }
.stamps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; clear: both; }
.stamp { border: 2px dashed var(--ink); border-radius: var(--r-md); padding: 12px; text-align: center; background: var(--canvas);
         animation: rise .4s ease both; }
.stamp .n { font-size: 12px; font-weight: 700; letter-spacing: .6px; }
.stamp .en { font-size: 14px; font-weight: 600; line-height: 1.25; margin: 6px 0 2px; }
.stamp .ko { font-weight: 700; font-size: 15px; }
.stamp .t { font-size: 12px; color: var(--mute); margin-top: 4px; }

/* ---------- judge ---------- */
.judge { background: var(--surface-doc); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px; margin-top: 24px; font-size: 14px; }
.judge h4 { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mute); }
.judge table { width: 100%; border-collapse: collapse; font-size: 13px; }
.judge td, .judge th { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--hairline-soft); vertical-align: top; }
.judge th { font-weight: 600; color: var(--mute); }

.toast { position: fixed; left: 50%; bottom: calc(110px + var(--safe-b)); transform: translateX(-50%); z-index: 30;
         background: var(--ink); color: #fff; border-radius: var(--r-md); padding: 10px 16px; font-size: 14px;
         animation: rise .25s ease both; max-width: 90vw; }


/* Design study: a warm travel journal, forest ink and generous breathing room. */
:root {
  --canvas:#f8f7f2; --surface-card:#fffefa; --surface-soft:#eeeee5; --surface-doc:#f3f2e9;
  --hairline:#dcded3; --hairline-soft:#e7e8de;
  --ink:#213e34; --charcoal:#334b40; --body:#4e6056; --mute:#6c776e; --ash:#9baba0;
  --primary:#244c3e; --primary-pressed:#173b2e; --on-primary:#fffef7;
  --blue:#477764; --blue-soft:#e9efe7; --green:#397253; --green-soft:#e5eedf;
  --purple:#7c6470; --purple-soft:#f1e9eb; --yellow-soft:#f3ecd9; --link:#285f49;
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px;
}
html,body {background:#eaece5;}
body {font-size:16px;line-height:1.55;}
.frame {max-width:520px;background:var(--canvas);box-shadow:0 0 80px #243d3410;}
.top {height:76px;padding:0 28px;background:var(--canvas);border-bottom:1px solid var(--hairline-soft);}
.top .title {font-size:11px;letter-spacing:1.6px;color:var(--ink);}
.icon-btn {border:1px solid var(--hairline);border-radius:50%;width:38px;height:38px;}
.icon-btn svg {width:18px;height:18px;}
.top .icon-btn:first-child {margin-left:0;}
.top:has(.title:first-child) .title {padding-left:22px;position:relative;}
.top:has(.title:first-child) .title::before {content:"";position:absolute;left:2px;top:5px;width:10px;height:10px;border:1.5px solid var(--ink);transform:rotate(45deg);}
.screen {padding:32px 28px calc(175px + var(--safe-b));}
.screen.one {padding-bottom:calc(112px + var(--safe-b));}
.bar {left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:520px;background:#f8f7f2f5;border-color:var(--hairline-soft);padding:16px 28px calc(18px + var(--safe-b));backdrop-filter:blur(12px);}
.bar > div {max-width:none;gap:10px;}
.btn {min-height:54px;font-size:15px;letter-spacing:.1px;border-radius:16px;transition:background .18s,transform .18s;}
.btn.primary {box-shadow:0 5px 12px #244c3e12;}
.btn:disabled {box-shadow:none;}
.view-welcome .bar .primary {justify-content:space-between;padding:0 22px;}
.view-welcome .bar .primary span:last-child {font-size:24px;font-weight:400;}
.q {font-size:30px;line-height:1.23;letter-spacing:-.9px;margin:6px 0 12px;}
.sub {font-size:15px;line-height:1.75;margin-bottom:28px;}
.eyebrow,.label {font-size:10.5px;letter-spacing:1.45px;line-height:1.7;}
.label {margin:26px 0 12px;}
.hero {padding-top:24px;padding-bottom:112px;}
.hero-intro {display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:20px;}
.hero .haechi {margin:0;animation:none;object-fit:contain;max-width:48%;height:auto!important;max-height:144px;}
.travel-mark {display:flex;flex-direction:column;align-items:flex-start;color:var(--ink);gap:12px;}
.travel-mark>span:first-child {font-size:12px;letter-spacing:4px;font-weight:600;}
.travel-route {color:#a56b50;font-size:21px;letter-spacing:2px;white-space:nowrap;}
.travel-mark small {font-size:8px;letter-spacing:1.5px;color:var(--mute);}
.display {font-size:43px;line-height:1.12;letter-spacing:-1.7px;font-weight:600;}
.display>span {display:block;}
.display>span:last-child {font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;color:#a26b51;margin-top:6px;letter-spacing:-1.4px;}
html[lang="ko"] .display>span:last-child,html[lang="ja"] .display>span:last-child,html[lang="zh"] .display>span:last-child {font-family:inherit;font-style:normal;font-weight:500;letter-spacing:-1.6px;font-size:.86em;line-height:1.35;}
.hero>.sub {max-width:380px;margin-top:18px!important;margin-bottom:25px;}
.language-label {display:flex;align-items:center;gap:15px;}
.language-label::after {content:"";height:1px;flex:1;background:var(--hairline);}
.grid2 {gap:12px;}
.choices {gap:12px;}
.choice {padding:17px 18px;border-color:var(--hairline);font-weight:500;transition:background .18s,border-color .18s,transform .18s;}
.choice.sel {border-color:#688573;box-shadow:inset 0 0 0 .5px #688573;background:#edf2e8;}
.choice .txt {min-width:0;line-height:1.35;}
.choice .txt small {font-size:13px;line-height:1.5;margin-top:6px;}
.choice.sel::after {color:var(--ink);font-size:13px;}
.grid2 .choice {min-height:116px;padding:18px;gap:14px;}
.grid2 .choice .emo {font-size:25px;}
.langs {gap:10px;}
.langs .choice {min-height:52px;padding:12px 14px;font-size:14px;gap:10px;border-radius:13px;}
.langs .choice .emo {font-size:19px;}
.langs .choice.sel::after {font-size:12px;}
.credit {font-size:9px;line-height:1.6;opacity:.85;margin-top:24px;}
.progress {margin:24px 28px 0;height:3px;background:#dfe4d9;}
.progress>i {background:#688573;}
.segments {margin:20px 28px 0;gap:6px;}
.segments>i {height:3px;}
.guide-card,.guide-card.blue,.guide-card.green,.guide-card.purple,.guide-card.yellow {background:#eeefe5;border:1px solid #dfe3d6;border-radius:28px;padding:26px 24px 34px;min-height:440px;}
.guide-card .eyebrow {color:#87907f;margin-bottom:24px;}
.guide-card .haechi {margin:0 auto 28px;animation:none;max-width:100%;object-fit:contain;}
.guide-card .q {font-size:28px;}
.guide-card p:last-child {font-size:15px;line-height:1.8;color:var(--body);}
.dots {gap:10px;margin-top:24px;}
.dots button {width:9px;height:9px;}
.dots button.on {width:28px;background:#688573;}
.card,.agent-panel,.passport {padding:24px;border-color:var(--hairline-soft);box-shadow:0 4px 20px #243d3405;}
.hint {font-size:25px;line-height:1.45;letter-spacing:-.6px;}
.pills {gap:8px;}
.pill {font-size:12px;padding:6px 11px;}
.frag {padding:17px;border-radius:15px;line-height:1.65;}
.field {min-height:54px;padding:14px 16px;}
.field:focus {border-color:#688573;box-shadow:0 0 0 3px #68857320;}
.row>* {min-width:0;}
.note {background:#eeefe5;border:1px solid #dfe3d6;padding:18px;font-size:14px;line-height:1.65;}
.stepper {background:#eeefe5;border:1px solid #dfe3d6;border-radius:28px;padding:34px 10px;margin:28px 0 16px;gap:20px;}
.stepper .num {font-size:76px;font-weight:500;}
.round {width:46px;height:46px;border-color:#cad4c5;}
.stats {gap:12px;}
.stats>div {padding:18px;border-color:var(--hairline-soft);}
.sheet {max-width:520px;border-radius:28px 28px 0 0;padding-left:28px;padding-right:28px;box-shadow:0 -12px 60px #213e3415;}
.sheet .grab {height:3px;margin:2px auto 22px;}
.drop {max-width:520px;top:calc(76px + var(--safe-t));padding:22px 28px;border-radius:0 0 24px 24px;}
.scrim,.drop-scrim {background:#142d2655;backdrop-filter:blur(3px);}
.stamp {border:1px dashed #81947e;border-radius:16px;background:#f5f6ee;padding:17px 12px;}
.toast {bottom:calc(110px + var(--safe-b));animation:fade .2s ease both;box-shadow:0 6px 28px #213e3420;}
button:focus-visible,a:focus-visible {outline:3px solid #a26b51;outline-offset:4px;}
@media(hover:hover) {
  .choice:hover {border-color:#8da18c;background:#f0f3e9;}
  .btn.primary:hover {background:#35614e;}
  .icon-btn:hover,.round:hover {background:#e9eee2;}
}
@media(max-width:390px) {
  .top {padding:0 22px;}
  .screen {padding-left:22px;padding-right:22px;}
  .bar {padding-left:22px;padding-right:22px;}
  .display {font-size:37px;}
  .hero-intro {margin-bottom:18px;}
  .hero .haechi {max-height:120px;}
  .q {font-size:28px;}
  .grid2 .choice {padding:15px;}
  .langs .choice {padding:11px;font-size:13px;}
  .top .title {letter-spacing:1px;}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* Mood picker: compact editorial list with a single, quiet icon language. */
.view-mood .screen {padding-top:24px;}
.view-mood .q {font-size:28px;letter-spacing:-1px;margin-bottom:10px;}
.view-mood .sub {font-size:14px;line-height:1.65;margin-bottom:22px;max-width:350px;}
.mood-grid {column-gap:14px;row-gap:6px;}
.mood-grid .choice {min-height:64px;flex-direction:row;align-items:center;gap:11px;padding:10px 9px;border:0;border-bottom:1px solid #dfe3d9;border-radius:0;background:transparent;font-size:13px;font-weight:500;}
.mood-grid .choice .txt {line-height:1.45;word-break:keep-all;}
.mood-icon {display:flex;align-items:center;justify-content:center;width:25px;min-width:25px;color:#698171;}
.mood-icon svg {width:22px;height:22px;stroke-width:1.5;}
.mood-grid .choice.sel {background:#244c3e;border-color:transparent;border-radius:12px;box-shadow:none;color:#fffef7;}
.mood-grid .choice.sel .mood-icon {color:#c7dbc3;}
.mood-grid .choice.sel::after {content:none;}
.mood-grid .choice:hover:not(.sel) {background:#eef0e7;border-radius:12px;}
.view-mood .label {margin-top:26px;font-size:11px;letter-spacing:.3px;text-transform:none;}
.view-mood .field {background:transparent;border-radius:0;border-width:0 0 1px;padding:10px 0;min-height:48px;font-size:13px;}
.view-mood .field:focus {box-shadow:none;border-color:var(--ink);}
.view-mood .field::placeholder {color:#8a9388;}
@media(min-width:480px) {.mood-grid .choice {font-size:14px;min-height:66px;padding-left:12px;}}
.view-mood .sub {word-break:keep-all;}

/* Approved roof-and-box identity. */
.brand-lockup{display:inline-flex;align-items:center;gap:9px;color:#183b32;font-size:13px;letter-spacing:.055em;white-space:nowrap}.brand-lockup img{display:block;flex:none;width:32px;height:32px}