:root{
  --paper:#f5f3ec; --card:#fffdf8; --ink:#14202a; --mute:#5b6670; --line:#e3dfd3;
  --green:#176b4d; --green2:#2f9e6b; --mint:#dff3e8; --amber:#b7791f; --amberbg:#fdf3dc;
  --red:#b4442f; --redbg:#fbe7e2; --violet:#5b4bc4; --violetbg:#ecebfb;
  --shadow:0 1px 2px rgba(20,32,42,.06),0 6px 22px rgba(20,32,42,.06);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:16px/1.55 'Pretendard','Noto Sans KR','Malgun Gothic',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
code{font-family:Consolas,ui-monospace,monospace;font-size:.88em;background:#eeebe1;padding:1px 5px;border-radius:4px}

.top{display:flex;align-items:center;gap:14px;padding:14px 28px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.3px}
.mark{width:30px;height:30px}
.mark rect{fill:var(--green)}
.mark path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.chip{font-size:13px;font-weight:700;padding:4px 12px;border-radius:99px;background:var(--amberbg);color:var(--amber);border:1px solid #f0d9a8}
.chip.live{background:var(--mint);color:var(--green);border-color:#b9e2cc}
.top-nav{margin-left:auto;display:flex;gap:4px}
.link{background:none;border:0;color:var(--mute);padding:6px 10px;border-radius:8px;font-size:15px}
.link:hover{background:#efece3;color:var(--ink)}

.btn{border:1px solid transparent;border-radius:10px;padding:9px 16px;font-weight:700;font-size:15px;transition:transform .08s,background .15s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--green);color:#fff}
.btn.primary:hover:not(:disabled){background:#12573f}
.btn.ghost{background:transparent;border-color:#cfcabc;color:var(--ink)}
.btn.ghost:hover:not(:disabled){background:#efece3}
.btn.danger{background:var(--red);color:#fff}
.btn.ai{background:var(--violet);color:#fff}
.btn.big{padding:14px 26px;font-size:17px;border-radius:12px}

.start{max-width:1080px;margin:0 auto;padding:64px 28px}
.eyebrow{color:var(--green2);font-weight:800;letter-spacing:.5px;margin:0 0 10px}
.hero h1{font-size:46px;line-height:1.22;letter-spacing:-1.2px;margin:0 0 18px}
.lead{font-size:19px;color:#36424c;max-width:720px;margin:0 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hint{color:var(--mute);font-size:14px;margin-top:14px}
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.promise div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow)}
.promise b{display:block;font-size:17px;margin-bottom:6px;color:var(--green)}
.promise span{color:#45505a;font-size:15px}

.work{max-width:1180px;margin:0 auto;padding:24px 28px 120px}
.steps{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 18px;counter-reset:s}
.steps li{flex:1;text-align:center;padding:9px 0;border-radius:10px;background:#ebe8de;color:var(--mute);font-weight:700;font-size:14px;counter-increment:s}
.steps li::before{content:counter(s) '. '}
.steps li.on{background:var(--green);color:#fff}
.steps li.done{background:var(--mint);color:var(--green)}
.card{scroll-margin-top:84px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow)}
.card h2{font-size:21px;margin:0 0 14px;display:flex;align-items:center;gap:10px;letter-spacing:-.3px}
.card h2 .n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
.note{color:var(--mute);font-size:14px;margin:8px 0 0}
.find-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tog{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.tog small{color:var(--mute);font-family:Consolas,monospace;font-size:12px}
.tog.small{padding:6px 10px;font-size:14px}
.tog input{width:18px;height:18px;accent-color:var(--green)}
.sel{display:inline-flex;align-items:center;gap:8px;font-weight:600}
select,input[type=number],.field input{font:inherit;padding:8px 10px;border:1px solid #cfcabc;border-radius:9px;background:#fff}
.progress{margin-top:14px;height:30px;border-radius:9px;background:#ebe8de;position:relative;overflow:hidden}
.progress i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--green2),var(--green));transition:width .2s}
.progress span{position:relative;display:block;text-align:center;line-height:30px;font-size:14px;font-weight:700;color:var(--ink)}

.ai-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.ai-left,.ai-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ai-status{font-size:14px;color:var(--violet);font-weight:600}
.filters{display:flex;gap:6px;margin:14px 0 10px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 14px;font-size:14px;color:var(--mute)}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.table-wrap{max-height:520px;overflow:auto;border:1px solid var(--line);border-radius:12px}
table.groups{width:100%;border-collapse:collapse;font-size:14.5px}
.groups th{position:sticky;top:0;background:#f1eee5;text-align:left;padding:9px 10px;font-size:13px;color:var(--mute);z-index:1}
.groups td{padding:9px 10px;border-top:1px solid #eeeae0;vertical-align:middle}
.groups tr.picked td{background:#f2f9f5}
.groups .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.groups .c-chk{width:36px}
.groups input[type=checkbox]{width:18px;height:18px;accent-color:var(--red)}
.who b{display:block;font-size:15px}
.who small{color:var(--mute);font-size:12.5px}
.folder{display:inline-block;font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:6px;margin-left:6px;vertical-align:1px}
.folder.promo{background:#eef3fb;color:#3b5c99}
.folder.spam{background:var(--redbg);color:var(--red)}
.subj{color:#3d4852;max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{display:inline-block;font-size:12.5px;font-weight:800;padding:3px 9px;border-radius:7px;white-space:nowrap}
.badge.delete{background:var(--redbg);color:var(--red)}
.badge.keep{background:var(--mint);color:var(--green)}
.badge.review{background:var(--amberbg);color:var(--amber)}
.badge.none{background:#efece3;color:var(--mute)}
.why{display:block;font-size:12.5px;color:var(--mute);margin-top:3px;max-width:260px}
.rule{display:block;font-size:12px;color:var(--amber);font-weight:700;margin-top:3px}

.selbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:14px;padding:10px 12px 10px 20px;display:flex;gap:18px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:30;font-weight:700}

.dlg{border:0;border-radius:16px;padding:24px 26px;max-width:520px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(0,0,0,.3);color:var(--ink);background:var(--card)}
.dlg.wide{max-width:760px}
.dlg::backdrop{background:rgba(20,32,42,.45)}
.dlg h3{margin:0 0 12px;font-size:20px}
.dlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.checks{padding-left:20px;color:#3d4852;font-size:14.5px}
.warn{background:var(--amberbg);border:1px solid #f0d9a8;color:#7a5212;border-radius:10px;padding:10px 12px;font-size:14px;margin-top:8px}
.big-num{font-size:30px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums}
fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 12px}
legend{font-weight:800;padding:0 6px}
.field{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;margin:8px 0}
.row{display:flex;gap:10px;align-items:center}
.plain{padding-left:18px}.plain li{margin-bottom:6px;font-size:15px}
.method table{border-collapse:collapse;width:100%;font-size:14px;margin:8px 0}
.method td,.method th{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.method th{background:#f1eee5}
.method h4{margin:14px 0 4px}
.method .formula{font-family:Consolas,monospace;background:#f1eee5;border-radius:8px;padding:8px 10px;font-size:13.5px}
.method ol{padding-left:20px;font-size:13.5px}

.result .meters{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:14px}
.meter{background:#13241d;color:#fff;border-radius:14px;padding:16px 18px;position:relative;overflow:hidden}
.meter label{display:block;font-size:13.5px;color:#a9d8bf;font-weight:700;margin-bottom:6px}
.meter label em{font-style:normal;background:#f7d78a;color:#4b3709;border-radius:5px;padding:0 6px;margin-left:4px;font-size:12px}
.meter .unit{font-size:16px;color:#cfe8da;margin-left:6px;font-weight:700}
.range{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tilde{font-size:30px;color:#a9d8bf}
.eq{margin:6px 0 0;font-size:14px;color:#cfe8da}
.odo{display:inline-flex;font-size:46px;font-weight:800;line-height:1;height:1em;overflow:hidden;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.odo .d{display:inline-block;height:1em;overflow:hidden;width:.62em;text-align:center}
.odo .d i{display:block;font-style:normal;transition:transform 1.6s cubic-bezier(.15,.8,.2,1)}
.odo .d i b{display:block;height:1em;font-weight:800}
.odo .s{display:inline-block;width:.3em;text-align:center}
.undo-row{display:flex;gap:12px;align-items:center;margin-top:12px}
.unsub{margin-top:22px;border-top:1px dashed #d8d3c4;padding-top:18px}
.unsub h3,.share h3{margin:0 0 4px;font-size:18px}
.unsub-sum{margin:12px 0;font-size:15px;background:var(--mint);border-radius:10px;padding:10px 14px;color:#0f4a35}
.unsub-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.unsub-list li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff}
.unsub-list .meta{flex:1;min-width:0}
.unsub-list .meta b{display:block;font-size:14.5px}
.unsub-list .meta small{color:var(--mute)}
.unsub-list li.done{opacity:.55}
.unsub-list li.done .btn{pointer-events:none}
.share{display:grid;grid-template-columns:1fr 300px;gap:24px;margin-top:22px;border-top:1px dashed #d8d3c4;padding-top:18px}
.share-r canvas{width:300px;height:533px;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.18);display:block}
.cap-row{display:flex;gap:10px;align-items:center;margin:12px 0 8px}
.cap-list{display:flex;flex-direction:column;gap:6px}
.cap-list button{text-align:left;border:1px solid var(--violetbg);background:#f7f6fe;border-radius:9px;padding:7px 12px;font-size:14.5px;color:#2f2770}
.cap-list button:hover{border-color:var(--violet)}
.share-actions{display:flex;gap:10px;margin-top:12px}
.toast{position:fixed;top:76px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:10px;font-weight:700;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* ---------- 휴대폰 화면 기본 (데스크톱에서는 가운데 휴대폰 폭으로) ---------- */
html{background:#e4e0d5}
body{max-width:440px;margin:0 auto;min-height:100vh;box-shadow:0 0 0 1px var(--line),0 10px 40px rgba(20,32,42,.08)}
.top{flex-wrap:wrap;gap:6px 8px;padding:10px 14px}
.brand{font-size:17px;gap:8px}
.mark{width:26px;height:26px}
.top-nav{gap:0}
.link{font-size:13.5px;padding:6px 7px}
.chip{order:3;font-size:12px;padding:3px 10px}
.start{padding:28px 18px 40px}
.eyebrow{font-size:14px}
.hero h1{font-size:29px;letter-spacing:-.8px;margin-bottom:14px}
.lead{font-size:16px;margin-bottom:22px}
.hero-actions{flex-direction:column}
.hero-actions .btn{width:100%}
.btn.big{padding:13px 20px;font-size:16.5px}
.hint{font-size:13.5px}
.promise{grid-template-columns:1fr;gap:10px;margin-top:26px}
.promise div{padding:14px 16px;border-radius:12px}
.promise b{font-size:16px}
.promise span{font-size:14px}
.work{padding:14px 12px 110px}
.steps{gap:4px;margin-bottom:12px}
.steps li{font-size:12.5px;padding:7px 0;border-radius:8px}
.card{padding:16px 14px;border-radius:14px;margin-bottom:12px;scroll-margin-top:96px}
.card h2{font-size:18px;margin-bottom:12px}
.card h2 .n{width:24px;height:24px;font-size:13px}
.note{font-size:13px}
.find-row{gap:8px}
.find-row .tog{flex:1 1 40%;flex-wrap:wrap;row-gap:0;padding:8px 10px}
.tog small{flex-basis:100%;padding-left:26px;font-size:11px}
.sel{flex:1 1 100%;justify-content:space-between}
.sel select{flex:1}
#btn-scan{width:100%;padding:12px}
.ai-bar{flex-direction:column;align-items:stretch;gap:8px}
.ai-left,.ai-right{gap:8px}
#btn-ai{flex:1 1 100%;padding:11px}
.ai-right .btn{flex:1;padding:9px 8px;font-size:14px}
.filters{gap:5px;margin:12px 0 8px}
.filters button{padding:5px 11px;font-size:13px}
.table-wrap{max-height:none;overflow:visible;border:0;border-radius:0}
table.groups,.groups tbody{display:block}
.groups thead{display:none}
.groups tr{display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:10px;row-gap:3px;align-items:start;padding:11px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:#fff}
.groups tr.picked{background:#f2f9f5;border-color:#9fd3b8}
.groups td{padding:0;border:0;background:none!important;min-width:0}
.groups td:nth-child(1){grid-column:1;grid-row:1;padding-top:2px}
.groups td:nth-child(2){grid-column:2;grid-row:1}
.groups td:nth-child(3){grid-column:3;grid-row:1;align-self:start;font-weight:800}
.groups td:nth-child(4){grid-column:3;grid-row:1;align-self:end;color:var(--mute);font-size:12.5px}
.groups td:nth-child(5){grid-column:2/4;grid-row:2;max-width:none;font-size:13px}
.groups td:nth-child(6){grid-column:2/4;grid-row:3;margin-top:3px}
.groups td[colspan]{display:block}
.who b{font-size:15px}
.who small{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.why{max-width:none}
.selbar{left:50%;width:min(416px,calc(100% - 24px));justify-content:space-between;bottom:14px;padding:9px 10px 9px 16px;gap:10px;font-size:14.5px}
.selbar .btn{padding:10px 14px;white-space:nowrap}
#sel-text{font-size:13px;line-height:1.35}
.dlg{padding:18px 16px;width:calc(100% - 24px);max-width:416px}
.dlg.wide{max-width:416px}
.dlg h3{font-size:18px}
.big-num{font-size:26px}
.checks{font-size:13.5px}
.plain li{font-size:14px}
.method{overflow-x:auto}
.method table{font-size:12.5px}
.method .formula{font-size:12px;overflow-x:auto}
fieldset{padding:10px 12px}
.result .meters{grid-template-columns:1fr;gap:10px}
.meter{padding:14px 16px}
.odo{font-size:40px}
.tilde{font-size:26px}
.undo-row{flex-wrap:wrap;gap:6px}
.unsub-list{grid-template-columns:1fr}
.unsub-list li{padding:8px 10px}
.unsub-list .btn{padding:7px 10px;font-size:13.5px;white-space:nowrap}
.unsub-sum{font-size:14px}
.share{grid-template-columns:1fr;gap:16px}
.share-r{display:flex;justify-content:center}
.share-r canvas{width:260px;height:462px}
.cap-list button{font-size:14px}
.toast{top:70px;width:max-content;max-width:min(400px,calc(100% - 32px));font-size:14px;text-align:center}

/* 배포판 하단 */
.foot{display:flex;flex-direction:column;gap:2px;align-items:center;padding:18px 16px 96px;font-size:12.5px;color:var(--mute);text-align:center}
.foot a{color:var(--green);font-weight:700}