:root{
  --bg:#F5F3EF; --surface:#FFF; --surface-alt:#FAF9F6;
  --dark:#1C1917; --ink:#1C1917; --sub:#6B6560; --faint:#9C9590;
  --gold:#A8843C; --gold-light:#F0E8D5;
  --border:#E4E0D8;
  --ok:#2D6A4F; --ok-bg:#D8F3DC;
  --warn:#7B4C00; --warn-bg:#FFF3CD;
  --danger:#922020; --danger-bg:#FDEAEA;
  --info:#1A3A6B; --info-bg:#E0E9FA;
  --sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
  --mincho:'Shippori Mincho','Hiragino Mincho ProN',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--dark)}
body{font-family:var(--sans);color:var(--ink)}
.app{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;position:relative}
a{text-decoration:none;color:inherit}

.hd{background:var(--dark);padding:14px 16px 12px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.hd .brand{font-family:var(--mincho);font-size:18px;font-weight:700;color:#fff;line-height:1}
.hd .tagline{font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.15em;margin-top:3px}
.hd .user{display:flex;align-items:center;gap:8px}
.hd .user .nm{font-size:13px;color:rgba(255,255,255,.8);font-weight:600;text-align:right}
.hd .user .st{font-size:11px;color:rgba(255,255,255,.35);text-align:right}
.hd .avatar{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gold);font-weight:700}

.pt{background:var(--surface);padding:12px 16px;border-bottom:1px solid var(--border)}
.pt h1{font-size:15px;font-weight:700;font-family:var(--mincho);letter-spacing:.06em}
.pt .crumb{font-size:11px;color:var(--faint);margin-bottom:2px}

main{flex:1;padding:14px 14px 84px;overflow-y:auto}

.card{background:var(--surface);border-radius:10px;border:1px solid var(--border);overflow:hidden;margin-bottom:12px}
.card-hd{padding:14px 16px;border-bottom:1px solid var(--border);border-left:3px solid var(--gold);display:flex;justify-content:space-between;align-items:center}
.card-hd .t{font-size:14px;font-weight:700}
.card-bd{padding:16px}

.bdg{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:3px;white-space:nowrap;letter-spacing:.03em}
.bdg.gray{background:#EFEDE8;color:var(--sub)}
.bdg.blue{background:var(--info-bg);color:var(--info)}
.bdg.gold{background:var(--gold-light);color:var(--warn)}
.bdg.green{background:var(--ok-bg);color:var(--ok)}
.bdg.red{background:var(--danger-bg);color:var(--danger)}
.bdg.solid{background:var(--gold);color:#fff}
.bdg.lg{font-size:13px;padding:6px 16px}

.alert{border-radius:8px;padding:12px 14px;font-size:13px;font-weight:600;line-height:1.6;margin-bottom:12px}
.alert.red{background:var(--danger-bg);border:1px solid #F5BCBC;color:var(--danger)}
.alert.gold{background:var(--warn-bg);border:1px solid #E8C97A;color:var(--warn)}
.alert span{font-size:12px;font-weight:400}

.stepper{display:flex;align-items:center;margin-bottom:14px}
.step{flex:1;text-align:center;position:relative}
.step .dot{width:26px;height:26px;border-radius:50%;background:var(--surface);border:2px solid var(--border);margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--faint);position:relative;z-index:1}
.step.done .dot{background:var(--gold);border-color:var(--gold);color:#fff}
.step.now .dot{background:var(--gold-light);border-color:var(--gold);color:var(--warn)}
.step .lbl{font-size:10px;color:var(--faint);font-weight:600}
.step.done .lbl,.step.now .lbl{color:var(--warn)}
.step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--border)}
.step:first-child::before{display:none}
.step.done::before,.step.now::before{background:var(--gold)}

.scores{display:flex;gap:6px}
.scores button,.scores .sc{width:44px;height:44px;border-radius:6px;border:1.5px solid var(--border);background:var(--surface-alt);color:var(--sub);font-weight:700;font-size:15px;font-family:var(--sans);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.scores .sel{background:var(--gold);border-color:var(--gold);color:#fff}
.score-hint{margin-top:8px;font-size:12px;color:var(--gold);font-weight:600;min-height:18px}

textarea{width:100%;min-height:80px;padding:10px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface-alt);font-size:13px;font-family:var(--sans);color:var(--ink);resize:vertical;line-height:1.7;outline:none}
textarea.filled{border-color:var(--gold)}
textarea:disabled{background:#F0EEE9;color:var(--sub)}

.lbl-sm{font-size:12px;color:var(--sub);font-weight:700;letter-spacing:.05em;margin-bottom:8px}
.hint{font-size:11px;color:var(--faint);line-height:1.6;margin-bottom:6px}

details.sample{margin-top:10px}
details.sample summary{padding:8px 12px;background:var(--surface-alt);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:12px;color:var(--sub);font-weight:600;list-style:none}
details.sample[open] summary{border-radius:6px 6px 0 0}
details.sample .sample-bd{padding:12px 14px;background:var(--gold-light);border:1px solid #D4B97A;border-top:none;border-radius:0 0 6px 6px;font-size:13px;line-height:1.7}
details.sample .sample-bd .s-hd{font-size:11px;color:var(--warn);font-weight:700;margin-bottom:6px}

.pillar-hd{padding:14px 16px;border-left:3px solid var(--gold);border-bottom:1px solid var(--border)}
.pillar-hd .num{font-size:12px;color:var(--gold);font-weight:700;letter-spacing:.05em;margin-bottom:2px}
.pillar-hd .name{font-size:14px;font-weight:700}
.pillar-hd .desc{font-size:12px;color:var(--sub);margin-top:4px;line-height:1.6}

.btn{display:block;width:100%;padding:16px 0;border:none;border-radius:8px;font-weight:700;font-size:15px;font-family:var(--sans);cursor:pointer;text-align:center}
.btn.primary{background:var(--ink);color:#fff}
.btn.disabled{background:var(--border);color:var(--faint);cursor:default}
.btn.gold{background:var(--gold);color:#fff}
.btn.ghost{background:var(--surface-alt);color:var(--sub);border:1px solid var(--border);padding:12px 0;font-size:13px}

.row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--border);background:var(--surface)}
.row:first-of-type{border-top:none}
.row .grow{flex:1;min-width:0}
.row .nm{font-size:14px;font-weight:700}
.row .meta{font-size:12px;color:var(--faint);margin-top:2px}
.row .arrow{color:var(--faint);font-size:18px}

.ans{background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.ans .a-score{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ans .a-score .n{font-size:22px;font-weight:800}
.ans .a-txt{font-size:13px;color:var(--sub);line-height:1.7}

.wip{padding:48px 20px;text-align:center}
.wip .mark{width:56px;height:56px;border-radius:50%;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:11px;color:var(--faint);font-weight:700}
.wip .t{font-size:15px;font-weight:700;margin-bottom:6px}
.wip .d{font-size:13px;color:var(--sub)}

.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--surface);border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);z-index:20;box-shadow:0 -2px 10px rgba(28,25,23,.08)}
.tabs a{padding:13px 4px 12px;border-top:2px solid transparent;font-size:12px;color:var(--faint);text-align:center}
.tabs a.on{border-top-color:var(--gold);color:var(--gold);font-weight:700}

.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;align-items:center}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--sub)}
.kv .v{font-weight:600}

.tl-item{display:flex;gap:12px;padding:7px 0;align-items:flex-start}
.tl-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;margin-top:3px;background:var(--surface);border:2px solid var(--border)}
.tl-dot.on{background:var(--gold);border-color:var(--gold)}
.tl-d{font-size:11px;color:var(--faint);font-weight:700}
.tl-d.on{color:var(--warn)}
.tl-l{font-size:13px;font-weight:500;color:var(--sub)}
.tl-l.on{font-weight:700;color:var(--ink)}

.note{font-size:12px;color:var(--faint);text-align:center;margin-top:8px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb12{margin-bottom:12px}

/* login */
.login-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px}
.login-logo{text-align:center;margin-bottom:36px}
.login-logo .b{font-family:var(--mincho);font-size:28px;font-weight:700;color:var(--ink)}
.login-logo .s{font-size:11px;color:var(--faint);letter-spacing:.2em;margin-top:6px}
input[type=text],input[type=password]{width:100%;padding:14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);font-size:15px;font-family:var(--sans);outline:none;margin-bottom:10px}
input:focus{border-color:var(--gold)}