@font-face{font-family:Outfit;font-weight:700;font-display:swap;src:local('Outfit Bold'),local('Outfit-Bold')}
:root{
  --bg:#EEF1F6;--card:#FFFFFF;--panel:#F4F6FA;--line:#D9DFE8;
  --ink:#13234F;--ink2:#3B4558;--muted:#5D6779;
  --flare:#B8650A;--flare-soft:#FBEBD6;--on-flare:#FFFFFF;--orange:#F2A541;
  --ok:#137A4B;--ok-soft:#DDF2E7;--info:#2852C4;--info-soft:#E2E9FB;--risk:#B3261E;--risk-soft:#FBE3E1;
  --f:"Pretendard","IBM Plex Sans KR","Hiragino Sans","Noto Sans JP","Noto Sans TC","Microsoft JhengHei","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --fn:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0D1422;--card:#141D2F;--panel:#1A2439;--line:#2A3650;--ink:#E7ECF5;--ink2:#C0C8D8;--muted:#94A0B6;
  --flare:#F2A541;--flare-soft:#3A2A12;--on-flare:#1A1206;--ok:#5ED19B;--ok-soft:#14352A;--info:#8EA9FF;--info-soft:#1E2A4D;--risk:#F28B82;--risk-soft:#3D1F1D;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.shell{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:0 0 calc(76px + env(safe-area-inset-bottom))}
.boot{padding:40vh 0;text-align:center;color:var(--muted)}
header.top{position:sticky;top:0;z-index:5;background:var(--bg);padding:calc(10px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
header.top .logo{width:30px;height:30px;flex:none}
header.top .ttl{min-width:0;flex:1}
header.top .ttl b{display:block;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.top .ttl span{font-size:.75rem;color:var(--muted)}
.livedot{font-size:.7rem;color:var(--ok);display:flex;align-items:center;gap:4px}
.livedot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.livedot.off{color:var(--muted)}
main{padding:14px 16px;display:grid;gap:14px;align-content:start;flex:1}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs div{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
nav.tabs button{border:0;background:none;padding:10px 2px 9px;min-height:56px;display:grid;justify-items:center;gap:2px;color:var(--muted);font-size:.74rem;cursor:pointer}
nav.tabs button i{font-style:normal;font-size:1.2rem;line-height:1}
nav.tabs button[aria-current="page"]{color:var(--ink);font-weight:700}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px}
.card h2{margin:0;font-size:1rem}
.muted{color:var(--muted)}.small{font-size:.8rem}
.hero{padding:22px 4px 4px;display:grid;gap:12px;justify-items:start}
.hero .wm{height:38px}
.hero p{margin:0;font-size:1.05rem;color:var(--ink2)}
.feats{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.feats li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:.9rem}
.feats li::before{content:"✓ ";color:var(--ok);font-weight:700}
form.f{display:grid;gap:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
label.fl{display:grid;gap:4px;font-size:.78rem;color:var(--muted);min-width:0}
label.fl input,label.fl select,label.fl textarea,select.in,input.in{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 10px;min-height:42px;width:100%;font-size:.95rem;color:var(--ink)}
textarea{min-height:76px;resize:vertical}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:999px;padding:6px 12px;min-height:34px;cursor:pointer;font-size:.86rem;color:var(--ink2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--card);font-weight:700}
.btn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 16px;min-height:42px;cursor:pointer;font-size:.92rem;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.primary{background:var(--flare);border-color:transparent;color:var(--on-flare);font-weight:700}
.btn.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent;font-weight:700}
.btn.danger{color:var(--risk);border-color:var(--risk-soft)}
.btn.sm{min-height:32px;padding:4px 10px;font-size:.8rem}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:default}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.acts .btn{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.74rem;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--ink2);white-space:nowrap}
.role{font-size:.66rem;font-weight:700;border-radius:6px;padding:0 5px;margin-left:4px;background:var(--info-soft);color:var(--info);vertical-align:1px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line);margin-right:5px;vertical-align:1px}
.dot.on{background:var(--ok)}
table.t{width:100%;border-collapse:collapse;font-size:.86rem}
table.t th{font-size:.7rem;color:var(--muted);text-align:left;font-weight:500;padding:6px 8px}
table.t td{padding:8px;border-top:1px solid var(--line);vertical-align:middle}
table.t td.tm{font-family:var(--fn);font-size:1.05rem;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t td small{display:block;color:var(--muted);font-size:.72rem;font-family:var(--f)}
table.t tr.me td{background:var(--flare-soft)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.big{font-family:var(--fn);font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums;font-weight:700}
.k{font-size:.72rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.plan{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.plan.next{border:2px solid var(--flare)}
.plan .hd{padding:10px 14px;background:var(--panel);display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.plan .hd b{font-size:1rem}
.plan .bd{padding:12px 14px;display:grid;gap:8px}
.plan.cx{opacity:.6}
.warn{font-size:.82rem;color:var(--flare)}
.good{font-size:.82rem;color:var(--ok)}
.note{background:var(--panel);border-radius:10px;padding:10px;display:grid;gap:4px;white-space:pre-wrap}
.note small{color:var(--muted);font-size:.72rem;white-space:normal}
.note .tr{color:var(--info)}
.link{border:0;background:none;color:var(--info);padding:0;cursor:pointer;font-size:.8rem;text-decoration:underline;text-underline-offset:2px;justify-self:start}
.st{font-size:.74rem;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.st.wait{background:var(--panel);color:var(--muted)}.st.read{background:var(--info-soft);color:var(--info)}.st.yes{background:var(--ok-soft);color:var(--ok)}.st.no{background:var(--flare-soft);color:var(--flare)}
.heat{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.heat button{border:1px solid transparent;border-radius:6px;padding:3px 0;min-height:46px;cursor:pointer;display:grid;gap:1px;justify-items:center;align-content:end;background:var(--panel);font-size:.66rem;color:var(--muted);font-variant-numeric:tabular-nums;position:relative;overflow:hidden}
.heat button i{position:absolute;left:0;right:0;bottom:0;background:var(--ok-soft)}
.heat button span,.heat button em{position:relative;font-style:normal}
.heat button em{font-weight:700;color:var(--ink2);font-size:.74rem}
.heat button.best i{background:var(--ok);opacity:.35}
.heat button[aria-pressed="true"]{border-color:var(--flare);background:var(--flare-soft)}
.pickline{font-size:.84rem;background:var(--panel);border-radius:10px;padding:8px 10px}
.invite{display:flex;gap:6px;align-items:center}
.invite code{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot{font-size:.74rem;color:var(--muted);padding:6px 4px 0;display:grid;gap:4px}
.foot a{color:var(--muted)}
details>summary{cursor:pointer;color:var(--ink2);font-size:.9rem;min-height:36px;display:flex;align-items:center}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--card);padding:10px 16px;border-radius:999px;font-size:.86rem;max-width:calc(100% - 32px);text-align:center;z-index:9}
.banner{background:var(--risk-soft);color:var(--risk);border-radius:10px;padding:8px 12px;font-size:.84rem}
.menu{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}