/* FFFF — porcelain, ink, jade. Final visual tokens, shared by every view.
   Four vertical F forms echo the four pillars; motion settles in under 1 second. */
:root {
  --ref-porcelain: #f5f6f8; --ref-white: #ffffff; --ref-ink: #202832;
  --ref-mist: #e8edf0; --ref-jade: #245e52; --ref-jade-soft: #e6efeb;
  --ref-muted: #606b76; --ref-cinnabar: #a44a42; --ref-gold: #8a6b35;
  --bg: var(--ref-porcelain); --bg2: var(--ref-mist); --card: var(--ref-white);
  --text: var(--ref-ink); --ink: var(--ref-ink); --muted: var(--ref-muted); --line: #dce2e5;
  --cobalt: var(--ref-jade); --cobalt-s: var(--ref-jade-soft);
  --blue: var(--ref-jade); --blue-h: #19483f; --blue-s: var(--ref-jade-soft); --link: var(--ref-jade);
  --tangerine: var(--ref-cinnabar); --tangerine-s: #f6eae7;
  --lav-s: var(--bg); --pink-s: var(--bg); --mint-s: var(--ref-jade-soft);
  --butter-s: var(--bg); --sky-s: var(--bg); --peach-s: var(--bg);
  --el0: #32724f; --el1: #ac3947; --el2: #84601e; --el3: #636572; --el4: #32638e;
  --font: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard Variable', sans-serif;
  --display: var(--font); --title: var(--font);
  --checker: linear-gradient(90deg, var(--cobalt), var(--cobalt));
  --rainbow: linear-gradient(110deg, var(--text), var(--cobalt));
  --shadow: 0 12px 40px #20283206; --shadow-s: 0 2px 10px #20283205;
}
[hidden] { display: none !important; }
body { line-height: 1.55; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }
button { touch-action: manipulation; }
.top { background: #f5f6f8dd; border-color: var(--line); }
.logo .wm span { color: var(--text); -webkit-text-stroke: 0; }
.logo .wm { font-weight: 800; letter-spacing: -.08em; gap: 3px; }
.logo .wm::after, .h2::before, .panel::before, .tag::after, .pk-card::after, .sc-eyebrow::before, .sc-tape { display: none !important; }
nav { box-shadow: none; background: var(--bg2); }
nav .nav-ind { background: var(--text); }
.panel { border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); box-shadow: var(--shadow); border-radius: 24px; }
.h1, .h2, .td-title, .pk-q, .ob-q, .rec-tag { letter-spacing: -.045em; font-weight: 700; }
.h2 { font-size: 24px; }
.btn, .ob-next { box-shadow: none; }
.btn.ghost { background: var(--bg2); }
.chip, .tchip, .lk { border-radius: 10px; }
.pillars .hanja, .px-ch, .ij-pair, .rd-dm { font-family: var(--hanja); }
.ob-prog i, .f4-prog, .px-base { background: var(--cobalt); }
.ritual-guide { display: flex; gap: 15px; align-items: center; margin: 0 0 26px; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.ritual-guide p { margin: 0; word-break: keep-all; }
.ritual-guide-label, .ritual-eyebrow { color: var(--cobalt); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.ritual-guide-action { margin-top: 4px !important; font-size: 13px; color: var(--muted); }
.ritual-mark { display: flex; gap: 3px; flex: none; }
.ritual-mark i { display: grid; place-items: center; width: 16px; height: 32px; border: 1px solid var(--line); border-radius: 5px; font: normal 800 15px/1 var(--display); color: var(--cobalt); background: var(--card); }
.ritual-mark i:nth-child(2) { --i: 1; } .ritual-mark i:nth-child(3) { --i: 2; } .ritual-mark i:nth-child(4) { --i: 3; background: var(--cobalt); color: var(--card); border-color: var(--cobalt); }
.arrive .ritual-mark i, .arrive .brand-pillar { animation: ritual-rise .65s var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 90ms); }
.arrive .ritual-guide-action { animation: ritual-rise .5s var(--ease-expo) .15s both; }
@keyframes ritual-rise { from { opacity: .25; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Home: four quiet columns, readable meanings, one clear promise. */
.hm-hero { padding: 65px 24px 42px; }
.ff-mark { display: grid; grid-template-columns: repeat(4, 1fr); width: min(480px, 100%); gap: 10px; margin: 0 0 30px; }
.brand-pillar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 160px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(155deg, var(--card), var(--ref-jade-soft)); }
.brand-pillar > b { font: 700 58px/1 var(--display); letter-spacing: -.07em; z-index: 1; color: var(--cobalt); }
.brand-glyph { position: absolute; top: 10px; right: 8px; font: 500 36px/1 var(--hanja); color: var(--cobalt); opacity: .09; }
.brand-word { margin-top: 12px; font: 600 12px/1.4 var(--font); letter-spacing: -.025em; }
.brand-pillar small { margin-top: 3px; font: 400 10px/1.4 var(--font); color: var(--muted); letter-spacing: -.03em; }
.hm-title, .al-title, .hm-title.kin .wi, .al-title .wi { background: none; color: var(--text); -webkit-text-fill-color: var(--text); }
.hm-title { font-size: clamp(48px, 6.5vw, 80px); font-weight: 700; letter-spacing: -.065em; }
.hm-sub { font-size: 19px; color: var(--muted); }
.hm-strip { padding-bottom: 25px; }
.hm-track { animation: none; width: auto; justify-content: center; }
.hm-track .sc-card:nth-child(n+5) { display: none; }
.hm-track .sc-card { --w: 180px; border-radius: 20px; box-shadow: var(--shadow); }
.hm-track .sc-card:nth-child(odd) { transform: none; }
.sc-tier { background: var(--cobalt); box-shadow: none; }
.sc-tier.s { background: var(--cobalt); color: var(--card); }
.s-card { box-shadow: var(--shadow); border: 1px solid var(--line); }
.s-head, .bt h3 { letter-spacing: -.035em; }

/* Natural document flow prevents long MBTI/review content covering the CTA. */
#view-start .ob { min-height: 100svh; max-width: 600px; padding-top: max(20px, env(safe-area-inset-top)); }
#view-start .ritual-guide, #view-photos .ritual-guide, #view-pick .ritual-guide { margin: 22px 0 0; padding-bottom: 18px; }
#view-start .ob-steps { flex: 1 0 auto; min-height: 0; }
#view-start .ob-step { display: none; position: relative; inset: auto; padding: clamp(24px, 5vh, 52px) 0 24px; transform: none; }
#view-start .ob-step.on { display: block; }
#view-start .ob-q { font-size: clamp(29px, 4vw, 40px); line-height: 1.25; }
#view-start .ob-hint { font-size: 15px; margin-bottom: 22px; }
#view-start .ob-foot { position: sticky; bottom: 0; z-index: 3; flex-shrink: 0; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(16px); padding: 16px 0 max(18px, env(safe-area-inset-bottom)); }
#view-start .ob-top { flex-shrink: 0; }
#view-start .ob-input, #view-start .ob-choice button, #view-start .ob-seg button, #view-start .ob-mbti button, #view-start .ob-group { background: var(--card); }
#view-start .ob-choice button { height: 96px; }
#view-start .ob-choice button.on, #view-start .ob-seg button.on, #view-start .ob-mbti button.on { background: var(--cobalt-s); border-color: var(--cobalt); color: var(--cobalt); }
#view-start .ob-mbti { margin-top: 8px; }
#view-start .ob-mbti button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 52px; font-family: var(--font); }
#view-start .ob-mbti small { font-size: 11px; font-weight: 500; }
#view-start .ob-mbti-out { margin-top: 14px; font-size: 24px; letter-spacing: .3em; }
.ob-extra-hint { color: var(--muted); font-size: 13px; margin: 3px 0 0; word-break: keep-all; }
#view-start .ob-row { font-size: 15px; min-height: 50px; }
#view-start .ob-row b { overflow-wrap: anywhere; }
#view-start .ob-legal { font-size: 11px; }
#view-pick .pk-q { line-height: 1.23; }
#view-pick .pk-card { box-shadow: none; border-color: var(--line); }
#view-pick .pk-card.on { border-color: var(--cobalt); background: var(--card); box-shadow: 0 0 0 3px var(--cobalt-s); }

/* Recommendation: why → a simple outfit → optional details. */
#view-rec .rec-reason { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 26px; margin: 20px 0 24px; }
#view-rec .rec-reason h2 { margin: 8px 0; font-size: 26px; letter-spacing: -.04em; }
#view-rec .rec-reason-lead { font-size: 17px; font-weight: 500; margin: 0 0 24px; word-break: keep-all; }
.rec-reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.reason-item { min-width: 0; animation: ritual-rise .55s var(--ease-expo) both; animation-delay: calc(var(--i) * 100ms); }
.reason-item > span { color: var(--muted); font-size: 11px; }
.reason-item strong { display: block; font-size: 15px; font-weight: 650; margin: 6px 0; word-break: keep-all; }
.reason-item strong i { display: inline-block; vertical-align: -2px; width: 14px; height: 14px; border-radius: 50%; margin-right: 7px; border: 1px solid var(--line); }
.reason-item p { margin: 0; color: var(--muted); font-size: 12px; word-break: keep-all; }
.rec-simple { margin: 20px 0 0; padding: 15px 18px; border-radius: 14px; background: var(--cobalt-s); color: var(--cobalt); font-size: 14px; font-weight: 600; word-break: keep-all; }
#view-rec .rec-prog { display: none; }
#view-rec .flow { max-width: 640px; margin: 20px auto 12px; }
#view-rec .flow-say { font-family: var(--font); font-weight: 500; font-size: 15px; color: var(--muted); }
#view-rec .palette { gap: 8px; margin: 18px 0 24px; }
#view-rec .sw { min-height: 62px; border-radius: 14px; padding: 12px; font-size: 12px; box-shadow: inset 0 0 0 1px #20283218; }
#view-rec .sw .hex { display: none; }
#view-rec .sw.avoid { display: none; }
#view-rec .or { border: 1px solid var(--line); background: var(--card); border-radius: 18px; padding: 18px; margin: 12px 0; }
#view-rec .or-head { margin-bottom: 12px; flex-wrap: wrap; }
#view-rec .or-need { display: none; }
#view-rec .or-body { align-items: center; }
#view-rec .or-main b { font-size: 16px; }
#view-rec .or-why { font-size: 12px; }
#view-rec .thumb.none { font-size: 0; background: var(--bg); border: 1px solid var(--line); box-shadow: none; }
#view-rec .thumb.none::after { content: '衣'; font: 500 28px var(--hanja); color: var(--cobalt); }
#view-rec .fitbox { font-size: 12px; }
.rec-details > summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.rec-details[open] > summary { margin-bottom: 18px; }
.rec-details:not([open]) { padding-top: 18px; padding-bottom: 18px; }
.rec-details .why { margin-top: 12px; }
#view-today .intro.play .in-ring { animation-delay: .3s; animation-duration: 1s; }
#view-today .intro.play .in-line { animation-delay: .3s; }

@media (max-width: 760px) {
  nav { background: #f5f6f8ed; border-top: 1px solid var(--line); }
  main { padding-top: 26px; }
  .ritual-guide { margin-bottom: 22px; gap: 12px; }
  .ritual-guide-action { font-size: 12px; }
  .panel { padding: 22px 20px; }
  .h2 { font-size: 21px; }
  body.app #view-home .al-slide[data-title="소개"] { justify-content: center; padding-top: 0; }
  body.app .al-strip { display: none; }
  body.app .ff-mark { width: 100%; max-width: 380px; gap: 7px; margin: 12px 0 28px; }
  body.app .brand-pillar { height: clamp(115px, 20vh, 165px); border-radius: 20px; }
  body.app .brand-pillar > b { font-size: 46px; }
  body.app .brand-word { font-size: 10px; margin-top: 8px; }
  body.app .brand-pillar small { font-size: 9px; }
  body.app .al-title { font-size: 46px; line-height: 1.12; font-weight: 700; margin-bottom: 16px; }
  body.app .al-sub { font-size: 14px; max-width: 280px; }
  body.app #view-home .al-slide { overflow-y: auto; }
  #view-start .ob { padding-inline: 22px; padding-bottom: 0; }
  #view-start .ob-mbti button { flex-direction: column; gap: 1px; height: 58px; }
  #view-start .ob-mbti small { font-size: 10px; }
  #view-start .ob-row { padding: 12px; font-size: 14px; gap: 8px; }
  #view-rec .rec-reason { padding: 20px; }
  #view-rec .rec-reason h2 { font-size: 23px; }
  #view-rec .rec-reason-lead { font-size: 16px; margin-bottom: 18px; }
  .rec-reason-grid { grid-template-columns: 1fr; gap: 12px; }
  .reason-item { display: grid; grid-template-columns: 105px 1fr; gap: 3px 8px; align-items: baseline; }
  .reason-item strong { margin: 0; font-size: 14px; }
  .reason-item p { grid-column: 2; font-size: 11px; }
  .rec-simple { margin-top: 16px; padding: 12px; font-size: 13px; }
  #view-rec .rec-head { margin-bottom: 0; }
  #view-rec .rec-f4wrap { display: none; }
  #view-rec .or { padding: 14px; }
  #view-rec .or-body { grid-template-columns: 56px minmax(0, 1fr); }
  #view-rec .or-main { min-width: 0; overflow-wrap: anywhere; }
  #view-rec .or-acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: flex-end; margin-top: 8px; }
  #view-rec .sw { min-width: 0; flex: 1; font-size: 11px; padding: 10px 7px; }
}
@media (max-height: 700px) and (max-width: 760px) {
  body.app .brand-pillar { height: 106px; }
  body.app .ff-mark { margin-bottom: 16px; }
  body.app .al-title { font-size: 35px; margin-bottom: 8px; }
  #view-start .ob-step { padding-top: 22px; }
  #view-start .ritual-guide { margin-top: 12px; padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .arrive .ritual-mark i, .arrive .brand-pillar, .arrive .ritual-guide-action, .reason-item { animation: none !important; opacity: 1; transform: none; }
}