:root {
  --bg:#f5f3ec; --surface:#ffffff; --surface-2:#faf8f3;
  --line:#dedad0; --line2:#eae7dd;
  --ink:#1c1b18; --muted:#65635a; --hint:#9e9c93;
  --accent:#2a5a40; --accent-h:#356b4e;
  --accent-bg:#e6efe9; --accent-ink:#163426;
  --danger:#b03333; --danger-bg:#fbeaea;
  --amber:#a06010; --amber-bg:#faebd5;
  --maehwa:#c03870; --maehwa-bg:#fce8f0;
  --nancho:#4a8a1a; --nancho-bg:#eaf4e0;
  --gukhwa:#a86010; --gukhwa-bg:#faecd5;
  --daenamu:#0d8a60; --daenamu-bg:#e0f4ec;
  --r:16px; --r-sm:10px; --r-xs:6px;
  --sh-xs:0 1px 3px rgba(0,0,0,.06);
  --sh-sm:0 2px 8px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.04);
  --sh-md:0 4px 20px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.05);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:15px;line-height:1.65;-webkit-tap-highlight-color:transparent;}
.wrap{max-width:560px;margin:0 auto;padding:24px 16px 72px;}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:20;background:rgba(245,243,236,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:14px 16px 12px;border-bottom:1px solid var(--line2);}
.topbar .inner{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px;}
.brand{font-size:14px;font-weight:700;letter-spacing:-0.3px;white-space:nowrap;}
.brand .sq{display:inline-grid;grid-template-columns:repeat(2,7px);grid-template-rows:repeat(2,7px);gap:2px;vertical-align:-2px;margin-right:8px;}
.brand .sq i{display:block;border-radius:2px;}
.prog{flex:1;height:5px;background:var(--line2);border-radius:6px;overflow:hidden;}
.prog>div{height:100%;background:var(--accent);width:0;transition:width .3s cubic-bezier(.4,0,.2,1);}
.prog-txt{font-size:12px;color:var(--muted);min-width:44px;text-align:right;font-variant-numeric:tabular-nums;}

/* ── SCREENS ── */
.screen{display:none;animation:fade .22s ease-out;}
.screen.on{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ── TYPOGRAPHY ── */
h1{font-size:26px;font-weight:800;margin:4px 0 8px;letter-spacing:-0.6px;line-height:1.25;}
h2{font-size:17px;font-weight:700;margin:0 0 12px;letter-spacing:-0.3px;}
.lead{color:var(--muted);font-size:14px;margin:0 0 20px;line-height:1.6;}
.small{font-size:13px;} .muted{color:var(--muted);}
.center{text-align:center;}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;margin-bottom:14px;box-shadow:var(--sh-xs);}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-bg);padding:4px 10px;border-radius:20px;margin-bottom:10px;}
.notice li{margin:7px 0;font-size:14px;color:var(--muted);}
.notice b{color:var(--ink);}

/* ── BUTTONS ── */
.btn{display:block;width:100%;text-align:center;padding:15px;border-radius:var(--r-sm);border:none;
  background:var(--accent);color:#fff;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;letter-spacing:-0.2px;transition:background .12s,transform .08s,box-shadow .12s;
  box-shadow:0 2px 6px rgba(42,90,64,.25);}
.btn:hover{background:var(--accent-h);box-shadow:0 4px 12px rgba(42,90,64,.3);}
.btn:active{transform:scale(.98);box-shadow:none;}
.btn[disabled]{background:#b0b8b3;box-shadow:none;cursor:not-allowed;}
.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);
  box-shadow:var(--sh-xs);}
.btn.ghost:hover{background:var(--line2);box-shadow:var(--sh-sm);}
.btn-row{display:flex;gap:10px;margin-top:14px;}
.btn-row .btn{flex:1;}

/* ── PART 1 · VS ── */
.qno{font-size:11px;font-weight:700;color:var(--hint);margin-bottom:10px;letter-spacing:.5px;}
.vs{display:flex;align-items:stretch;gap:0;border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;}
.vs .side{flex:1;padding:18px 12px;text-align:center;font-size:15px;cursor:pointer;transition:font-size .15s ease,background .12s,color .12s,font-weight .12s;
  user-select:none;background:var(--surface);transition:background .15s,color .15s;
  font-weight:500;line-height:1.4;}
.vs .side:first-child{border-right:none;}
.vs .side:last-child{border-left:none;}
.vs .side:hover{background:var(--accent-bg);}
.vs .mid{display:flex;align-items:center;justify-content:center;min-width:36px;
  font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--hint);
  background:var(--line2);flex-shrink:0;}
.vs .side.sel{background:var(--accent-bg);color:var(--accent-ink);font-weight:700;font-size:17px;}
.vs-card{margin-bottom:10px;}
.vs-card .card{padding:16px;margin-bottom:0;}

/* ── PART 2 · WORDS ── */
.words4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.word{position:relative;border:2px solid var(--line);border-radius:var(--r-sm);
  padding:16px 10px;text-align:center;font-size:15px;cursor:pointer;
  user-select:none;background:var(--surface);transition:border-color .15s,background .15s,opacity .15s;
  font-weight:500;min-height:58px;display:flex;align-items:center;justify-content:center;}
.word:hover{border-color:var(--accent);background:var(--accent-bg);}
.word.rank-1{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-ink);}
.word.rank-2{background:var(--amber-bg);border-color:var(--amber);color:var(--amber);}
.word.used{opacity:.4;}
.word .bdg{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--surface);box-shadow:var(--sh-xs);}
.bdg.o{background:var(--accent);color:#fff;}
.bdg.t{background:var(--amber);color:#fff;}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.slot{border:1.5px dashed var(--line);border-radius:var(--r-sm);padding:10px 12px;
  min-height:58px;display:flex;flex-direction:column;justify-content:center;gap:2px;
  cursor:pointer;transition:border-color .15s,background .15s;}
.slot:hover{background:var(--line2);}
.slot.f1{border-style:solid;border-color:var(--accent);background:var(--accent-bg);}
.slot.f2{border-style:solid;border-color:var(--amber);background:var(--amber-bg);}
.slot .cap{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.2px;}
.slot.f1 .cap{color:var(--accent-ink);}
.slot.f2 .cap{color:var(--amber);}
.slot .val{font-size:14px;font-weight:700;color:var(--hint);}
.slot.f1 .val{color:var(--accent-ink);}
.slot.f2 .val{color:var(--amber);}

/* ── FORM ── */
label.field{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:14px 0 6px;}
input.f{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:15px;background:var(--surface-2);transition:border-color .12s;}
input.f:focus{outline:none;border-color:var(--accent);background:#fff;}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:13px;color:var(--muted);cursor:pointer;}
.consent .box{flex:none;width:22px;height:22px;border:2px solid var(--line);border-radius:var(--r-xs);
  display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s;}
.consent.on .box{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ── POPOVER ── */
.pop{position:fixed;z-index:50;max-width:240px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;box-shadow:var(--sh-md);}
.pop .pw{font-size:14px;font-weight:700;margin:0 0 4px;}
.pop .pd{font-size:13px;color:var(--muted);margin:0;line-height:1.55;}
.pop .ps{font-size:11px;color:var(--hint);margin:8px 0 0;}
.pop .ps a{color:var(--accent);}

/* ── RESULT ── */
.result-header{padding:4px 0 20px;}
.result-header .tag{margin-bottom:6px;}
.result-name{font-size:24px;font-weight:800;margin:0 0 2px;letter-spacing:-0.5px;}
.result-date{font-size:13px;color:var(--hint);}

.hero{border-radius:var(--r);padding:24px;margin-bottom:14px;color:#fff;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.18);z-index:0;}
.hero>*{position:relative;z-index:1;}
.hero-emoji{font-size:44px;margin-bottom:8px;line-height:1;}
.hero-sub{font-size:12px;font-weight:700;letter-spacing:.8px;opacity:.85;text-transform:uppercase;margin-bottom:4px;}
.hero h2{font-size:26px;font-weight:800;margin:0 0 10px;color:#fff;letter-spacing:-0.5px;}
.hero-kw{font-size:13px;opacity:.88;margin:3px 0;}
.hero-kw b{font-weight:700;opacity:1;}

.summary{background:var(--accent-bg);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;
  display:flex;gap:12px;align-items:flex-start;}
.summary .ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;}
.summary p{margin:0;font-size:15px;font-weight:600;color:var(--accent-ink);line-height:1.6;letter-spacing:-0.2px;}

/* score bars */
.score-bars{display:flex;flex-direction:column;gap:10px;}
.sbar{display:flex;align-items:center;gap:10px;}
.sbar-label{width:80px;flex:none;display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;}
.sbar-track{flex:1;height:22px;background:var(--line2);border-radius:6px;overflow:hidden;}
.sbar-fill{height:100%;border-radius:6px;min-width:4px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.sbar-val{width:28px;text-align:right;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;}

/* score summary grid */
.score-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px;}
.score-tile{border-radius:var(--r-sm);padding:14px;text-align:center;border:2px solid transparent;}
.score-tile.primary{border-width:2px;}
.score-tile-emoji{font-size:24px;margin-bottom:4px;}
.score-tile-name{font-size:12px;font-weight:700;margin-bottom:6px;}
.score-tile-num{font-size:22px;font-weight:800;line-height:1;}

/* matrix */
.matrix{display:grid;grid-template-columns:46px repeat(4,1fr);gap:5px;text-align:center;font-size:12px;}
.matrix .hd{color:var(--muted);padding:4px 0;display:flex;align-items:center;justify-content:center;font-weight:600;}
.matrix .cell{height:38px;background:var(--line2);border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;}
.matrix .cell.o{background:var(--accent-bg);color:var(--accent);}
.matrix .cell.x{background:var(--danger-bg);color:var(--danger);}

/* info callout */
.info{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);
  background:var(--surface);padding:12px 14px;margin:10px 0;}
.info .it{font-size:12px;font-weight:700;color:var(--accent-ink);margin:0 0 6px;display:flex;align-items:center;gap:6px;}
.info p{margin:0;font-size:14px;line-height:1.7;color:var(--ink);}
.info p+p{margin-top:8px;}
.info.danger{border-left-color:var(--danger);}
.info.danger .it{color:var(--danger);}

/* facets */
.facets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;}
.facet{background:var(--surface-2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:12px;}
.facet .ft{font-size:12px;font-weight:700;margin:0 0 6px;color:var(--muted);letter-spacing:.2px;}
.facet ul{margin:0;padding-left:15px;}
.facet li{font-size:13px;line-height:1.65;color:var(--muted);}

details.more{margin-top:12px;}
details.more summary{cursor:pointer;font-size:13px;color:var(--accent);font-weight:700;list-style:none;}
details.more summary::-webkit-details-marker{display:none;}
details.more[open] summary{margin-bottom:10px;}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{background:var(--line2);border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;}

/* share */
.share{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 12px;}
.share input{flex:1;border:none;background:transparent;font:inherit;font-size:13px;color:var(--muted);}

/* misc */
.err{background:var(--danger-bg);color:var(--danger);border-radius:var(--r-sm);
  padding:11px 14px;font-size:14px;margin-top:10px;border:1px solid rgba(176,51,51,.15);}
.spinner{width:32px;height:32px;border:3px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;margin:48px auto;}
.spinner-sm{display:inline-block;width:14px;height:14px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;
  vertical-align:-3px;margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg);}}
.ai-loading{color:var(--muted);font-size:14px;padding:4px 0;}
.ai-result p{margin:0 0 12px;font-size:15px;line-height:1.75;}
.ai-result p:last-child{margin-bottom:0;}
.reading{margin-top:12px;}
.reading p{font-size:15px;line-height:2.0;color:var(--ink);margin:0 0 16px;letter-spacing:-0.2px;
  word-break:keep-all;overflow-wrap:break-word;}
.reading p:first-child{padding-left:12px;border-left:3px solid var(--accent);font-weight:500;}
.reading p:last-child{margin-bottom:0;}

/* ── PDF TYPE DETAIL SECTIONS ── */
.pdf-sections{display:flex;flex-direction:column;gap:16px;}
.pdf-section{background:var(--surface-2);border-radius:var(--r-sm);padding:14px 16px;}
.pdf-section-title{font-size:13px;font-weight:700;margin-bottom:10px;letter-spacing:-0.2px;}
.pdf-list{margin:0;padding-left:18px;}
.pdf-list li{font-size:14px;line-height:1.7;color:var(--ink);margin-bottom:4px;}
.pdf-list li:last-child{margin-bottom:0;}
.proverb-list{display:flex;flex-direction:column;gap:6px;}
.proverb-item{font-size:13px;color:var(--muted);padding:7px 12px 7px 30px;
  background:var(--surface);border-radius:var(--r-xs);border:1px solid var(--line2);
  position:relative;line-height:1.6;}
.proverb-item::before{content:'"';position:absolute;left:10px;top:5px;
  font-size:18px;color:var(--hint);font-family:Georgia,serif;line-height:1;}

/* intro */
.intro-brand{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.intro-sq{display:grid;grid-template-columns:repeat(2,11px);grid-template-rows:repeat(2,11px);gap:3px;}
.intro-sq i{display:block;border-radius:3px;}

@media print{
  .no-print{display:none !important;}
  body{background:#fff;}
  .wrap{max-width:100%;padding:0;}
  .card,.hero,.summary{break-inside:avoid;box-shadow:none;}
  details.more{display:none;}
}