/* ============================================================
   TAEGEUK — dani.ko's design language, extracted VERBATIM from
   docs/design/final-design.html, the mock Ted chose 2026-08-05.

   Every redesign file links this. Nothing redeclares a value.
   If a screen needs something this file does not have, ADD IT
   HERE so every screen gets it — do not write it inline.
   ============================================================ */

/* ============================================================
   PROPOSAL D — "TAEGEUK"
   A's editorial photo-led layout + C's readiness spine.
   Palette from 태극기: flag blue leads, flag red warns.
   Display weight capped at 700. Leading opened. No serif.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0A0D12;color:#F0F3F7;font-family:'Manrope',system-ui,sans-serif;padding:32px}

.dark{
  --bg:#0D1117; --surface:#161B22; --surface2:#1D242E; --border:#28313D;
  --text:#F0F3F7; --text2:#A2AEBD; --text3:#6E7B8B;
  /* THE EXACT 태극기 VALUES, in dark mode too. Fills carry white text:
     #FFF on #0047A0 = 8.6:1, #FFF on #CD2E3A = 5.2:1. Both excellent.
     --blueText is the ONLY lift, used where blue is thin TEXT on the dark
     background — #0047A0 there measures 2.41:1 and is genuinely unreadable.
     Flag red needs no lift at all: #CD2E3A on #0D1117 is 3.66:1. */
  --blue:#0047A0; --onBlue:#FFFFFF; --blueSoft:#0E1D38; --blueText:#3D7BD9;
  --red:#CD2E3A;  --onRed:#FFFFFF;  --redSoft:#2E1216;
  --ok:#4ADE80; --okSoft:#0F2E1C;
  --shadow:0 14px 36px rgba(0,0,0,.55);
}
.light{
  --bg:#F7F8FA; --surface:#FFFFFF; --surface2:#EEF1F5; --border:#DDE2E9;
  --text:#0E1420; --text2:#54606F; --text3:#8593A3;
  /* the exact 태극기 values */
  --blue:#0047A0; --onBlue:#FFFFFF; --blueSoft:#E3ECFA; --blueText:#0047A0;
  --red:#CD2E3A;  --onRed:#FFFFFF;  --redSoft:#FDE7E9;
  --ok:#12855A; --okSoft:#DFF5EB;
  --shadow:0 10px 28px rgba(15,35,70,.10);
}

/* ---- page chrome ---- */
h1{font-size:44px;font-weight:800;letter-spacing:-1.1px;line-height:1.1}
h1 em{font-style:normal;color:#3D7BD9}
h1 b{color:#CD2E3A}
.lede{color:#a2aebd;max-width:780px;margin-top:12px;line-height:1.65;font-size:15px}
.hint{font-size:12px;color:#6e7b8b;margin:10px 0 30px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 34px}
.sw{width:112px;border-radius:14px;overflow:hidden;border:1px solid #28313d}
.sw i{display:block;height:44px}
.sw span{display:block;font:500 10px/1.55 'DM Mono',monospace;padding:6px 8px;color:#a2aebd;background:#161b22}
.modebar{font:700 11px/1 'Manrope';letter-spacing:.16em;text-transform:uppercase;color:#6e7b8b;margin:32px 0 16px;display:flex;align-items:center;gap:12px}
.modebar:after{content:'';flex:1;height:1px;background:#28313d}
.row{display:flex;gap:22px;overflow-x:auto;padding-bottom:22px}

/* ---- frame ---- */
.frame{flex:0 0 375px;width:375px;height:812px;border-radius:40px;overflow:hidden;position:relative;
  background:var(--bg);color:var(--text);box-shadow:var(--shadow);border:1px solid var(--border);display:flex;flex-direction:column}
.frame .cap{position:absolute;bottom:0;left:0;right:0;z-index:9;font:700 10px/1 'Manrope';letter-spacing:.1em;
  text-transform:uppercase;background:var(--blue);color:var(--onBlue);padding:7px 12px;text-align:center}
.scroll{flex:1;overflow:hidden;display:flex;flex-direction:column}
/* 🚨 A REAL BUG IN THE APPROVED MOCK, found independently by three of the six
   agents drawing against it. `.scroll` is a flex column, so a screen taller than
   its frame does not overflow — it SHRINKS its children, and the first thing to
   give is the `.ph` hero, which collapses to nothing. In final-design.html this
   silently eats screen 2's 206px hero: the trip name, the dates, the cities and
   the countdown never draw at all, on the single most important screen in the
   product. It reads as a missing illustration rather than a height problem,
   which is why it survived being chosen. */
.scroll>*{flex-shrink:0}
.status{display:flex;justify-content:space-between;padding:13px 20px 4px;font:500 12px/1 'DM Mono',monospace;color:var(--text2)}
.nav{display:flex;border-top:1px solid var(--border);background:var(--surface);padding:10px 0 26px}
.nav div{flex:1;text-align:center;font:700 10px/1.7 'Manrope';color:var(--text3)}
.nav div.on{color:var(--blueText)}
.nav em{display:block;font-style:normal;font-size:17px;margin-bottom:1px}

/* ---- primitives ---- */
.pad{padding:0 20px}
/* THE TYPE FIX: 700 max, -0.3px tracking, 1.16 leading. C was 900 / -1.6px / 0.94. */
.disp{font-weight:700;letter-spacing:-.3px;line-height:1.16}
.lbl{font:700 10.5px/1 'Manrope';letter-spacing:.15em;text-transform:uppercase;color:var(--text3)}
.mono{font-family:'DM Mono',monospace}
.ph{position:relative;overflow:hidden;background:var(--surface2)}
.ph svg{width:100%;height:100%;display:block}
.ph .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,22,0) 36%,rgba(4,10,22,.8) 100%)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:17px}
.tag{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:6px 11px;font-size:10.5px;font-weight:700;letter-spacing:.04em}
.tag.b{background:var(--blue);color:var(--onBlue)}
.tag.r{background:var(--red);color:var(--onRed)}
.tag.rs{background:var(--redSoft);color:var(--red)}
.tag.g{background:var(--okSoft);color:var(--ok)}
.tag.o{background:transparent;border:1px solid var(--border);color:var(--text2)}
/* 🚨 PROMOTED — the confidence vocabulary. Four of the six files needed `unknown`
   and each invented it, because the mock has `verified` (.tag.g) and can express
   `stale` (.tag.o plus a mono date) but has no token for "we do not know".
   Coverage of Korean venue data is partial and always will be, so this is not an
   edge case — it is the most common state on any externally sourced surface.
   DASHED, NEUTRAL, AND NEVER RED: an honest gap is not an error, and red is
   reserved for a deadline. A red `unknown` reads as "you did something wrong"
   when the thing missing is ours. */
.tag.u{background:transparent;border:1px dashed var(--border);color:var(--text3)}
.tag.s{background:transparent;border:1px solid var(--border);color:var(--text3)}
.card.u,.docrow.u,.task.u{border-style:dashed;background:transparent}
.btn{display:block;width:100%;text-align:center;border-radius:16px;padding:16px;font-size:15px;font-weight:700;
  background:var(--blue);color:var(--onBlue);border:0;letter-spacing:-.1px}
.btn.o{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.hdr{display:flex;align-items:center;gap:10px;margin:23px 0 9px}
.hdr b{font-size:12.5px;font-weight:700;letter-spacing:.02em}
.hdr .ln{flex:1;height:1px;background:var(--border)}
.hdr .n{font:500 11.5px/1 'DM Mono';color:var(--text3)}

/* readiness spine — C's best idea, without the shout */
.bar{height:9px;border-radius:99px;background:var(--surface2);overflow:hidden;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;width:58%;background:var(--blue);border-radius:99px}
.task{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.cb{width:24px;height:24px;border-radius:99px;border:1.5px solid var(--border);flex:0 0 auto;display:grid;place-items:center;font-size:12px;color:transparent;margin-top:1px}
.cb.on{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.cb.now{border-color:var(--red);border-width:2px}
.docrow{display:flex;gap:13px;align-items:center;padding:14px 15px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.docrow .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:19px;flex:0 0 auto;background:var(--surface2)}
.no{font:500 12px/1.55 'DM Mono';color:var(--text2);letter-spacing:.02em}
.mason{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mason .t{border-radius:16px;overflow:hidden;position:relative;background:var(--surface2)}
.mason .t.tall{grid-row:span 2}
.mason .t .lb{position:absolute;left:10px;right:10px;bottom:9px;color:#fff;font-size:12px;font-weight:700;line-height:1.3;text-shadow:0 1px 7px rgba(0,0,0,.75)}
.dots{display:flex;gap:5px;justify-content:center}
.dots i{width:5px;height:5px;border-radius:99px;background:#fff;opacity:.45}
.dots i.on{opacity:1;width:17px}

/* ============================================================
   PROMOTED FROM THE SCREEN FILES
   Patterns that three or more of the six redesign files each
   invented separately. They belong to the language, not to a
   screen — a value defined twice is a value that drifts.
   ============================================================ */

/* Korean at display size. Manrope carries NO Hangul, so the fallback stack is
   load-bearing, not defensive. Two rules that are not stylistic:
     • letter-spacing 0 — `.disp`'s -0.3px closes up Hangul counters until the
       characters read as smudges at exactly the size someone is squinting at.
     • always full contrast, never accent-coloured — this is the string a taxi
       driver or a restaurant server reads off a stranger's phone. */
.krn{font-family:'Manrope','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  font-weight:700;letter-spacing:0;line-height:1.3;color:var(--text)}
.eng{font-size:12.5px;line-height:1.5;color:var(--text2)}

/* The copy pill. Copy ALWAYS copies the Korean string, never the romanisation —
   the button exists so the other person can read it or Kakao T can route to it. */
.cpy{display:inline-flex;align-items:center;gap:7px;border-radius:99px;padding:9px 14px;
  font-size:12px;font-weight:700;background:var(--blue);color:var(--onBlue);border:0}
.cpy.o{background:transparent;border:1.5px solid var(--border);color:var(--text)}

/* The circular back button that sits ON a hero. Inline in the mock, unnamed. */
.back{width:34px;height:34px;border-radius:99px;display:grid;place-items:center;
  background:rgba(10,16,28,.55);color:#fff;backdrop-filter:blur(8px);border:0}

/* Text input. Paste, "name it yourself", the new-shelf row, search. */
.field{width:100%;border-radius:16px;padding:14px 15px;background:var(--surface);
  border:1px solid var(--border);color:var(--text);font-size:14px;font-family:inherit}
.field.mono{font-family:'DM Mono',monospace;font-size:12.5px}
.field:focus,.field.focus{outline:0;border-color:var(--blue);border-width:1.5px}

/* 🚨 A done row carries BOTH a strike-through AND a filled check. Colour is
   never the only signal — DESIGN_SYSTEM §9. Removing either half breaks it for
   anyone who cannot distinguish the green. */
.task.done .ttl{text-decoration:line-through;color:var(--text3)}

/* The honest gap: where an answer, a photo or a rule would go and none is
   sourced. Says what is missing. Never filler prose, never an error style. */
.gap{border:1px dashed var(--border);border-radius:18px;padding:15px;background:transparent}
.gap .k{font:700 10.5px/1 'Manrope';letter-spacing:.15em;text-transform:uppercase;color:var(--text3)}