:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f6f8fa; --border:#d0d7de;
  --text:#1f2328; --text-dim:#59636e; --accent:#0969da; --accent-soft:#ddf4ff;
  --buy:#1a7f37; --buy-soft:#dafbe1; --danger:#cf222e; --danger-soft:#ffebe9;
  color-scheme:light;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;}
body{padding-inline:18px;}
h1,h2,h3{font-family:inherit;font-weight:600;margin:0;}
.mono{font-family:ui-monospace,'SFMono-Regular','IBM Plex Mono',monospace;}
a{color:inherit;}
img{max-width:100%;}

/* ---- 공통 네비 ---- */
.topnav{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:.88rem;}
.topnav a{text-decoration:none;color:var(--accent);font-weight:600;}

/* ---- 카탈로그 뷰 ---- */
.shell{max-width:1240px;margin:0 auto;padding-block:26px 60px;}
.shell-head{border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:22px;}
.shell-head h1{font-size:1.5rem;letter-spacing:-0.01em;margin-bottom:6px;}
.shell-head p{color:var(--text-dim);font-size:.88rem;max-width:68ch;line-height:1.55;margin:0 0 16px;}
#search{width:100%;max-width:420px;padding:7px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:.88rem;font-family:inherit;}
#search:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft);}
.layout{display:flex;gap:28px;align-items:flex-start;}
.sidebar{width:190px;flex:none;position:sticky;top:16px;}
.side-group{margin-bottom:24px;}
.side-group h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:0 0 8px;font-weight:600;}
.side-item{display:flex;justify-content:space-between;align-items:center;gap:6px;width:100%;text-align:left;padding:6px 10px;border-radius:6px;border:none;background:none;color:var(--text);font-size:.85rem;cursor:pointer;font-family:inherit;}
.side-item:hover{background:var(--surface-2);}
.side-item[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600;}
.side-item .n{color:var(--text-dim);font-size:.76rem;}
.side-item[aria-pressed="true"] .n{color:var(--accent);}
.cat-main{flex:1;min-width:0;}
.count{font-size:.8rem;color:var(--text-dim);margin-bottom:12px;}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:26px;flex-wrap:wrap;}
.page-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.82rem;cursor:pointer;font-family:inherit;}
.page-btn:hover{border-color:var(--accent);}
.page-btn[aria-current="true"]{background:var(--accent);color:#fff;border-color:var(--accent);}
.page-btn:disabled{opacity:.4;cursor:not-allowed;}
@media (max-width:760px){
  .layout{flex-direction:column;}
  .sidebar{width:100%;position:static;display:flex;flex-wrap:wrap;gap:18px;}
  .side-group{margin-bottom:0;}
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.newsbar{margin-bottom:26px;}
.newsbar h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:0 0 8px;font-weight:600;}
.newsrow{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;}
.newsitem{flex:none;width:220px;border:1px solid var(--border);border-radius:8px;padding:10px 12px;cursor:pointer;background:var(--surface);text-align:left;font-family:inherit;text-decoration:none;display:block;}
.newsitem:hover{border-color:var(--accent);box-shadow:0 2px 6px rgba(140,149,159,.15);}
.newsitem .date{font-size:.68rem;color:var(--text-dim);}
.newsitem .title{font-size:.84rem;font-weight:600;margin:3px 0 7px;line-height:1.3;color:var(--text);}
.newsitem .link{font-size:.72rem;color:var(--accent);font-weight:600;}
.newsitem .link.pending{color:var(--text-dim);font-weight:500;}
.card{display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px;transition:box-shadow .15s,border-color .15s;font-family:inherit;text-decoration:none;}
.card:hover{border-color:var(--accent);box-shadow:0 3px 10px rgba(140,149,159,.2);}
.card.hide{display:none;}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.card-top .name{font-weight:600;font-size:1rem;line-height:1.35;color:var(--accent);}
.price{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-dim);flex:none;border:1px solid var(--border);}
.price.free{background:var(--buy-soft);color:var(--buy);border-color:transparent;}
.desc{color:var(--text-dim);font-size:.84rem;line-height:1.5;}
.meta{display:flex;align-items:center;gap:12px;font-size:.76rem;color:var(--text-dim);margin-top:auto;padding-top:10px;border-top:1px solid var(--border);}
.cat-tag{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;padding:1px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);}
.empty-slot{border:1px dashed var(--border);border-radius:8px;padding:16px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:.8rem;text-align:center;background:var(--surface-2);}
.badges{display:flex;gap:5px;flex:none;}
.diff{font-size:.66rem;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;}
.diff.easy{background:var(--buy-soft);color:var(--buy);}
.diff.medium{background:#fff8c5;color:#9a6700;}
.diff.hard{background:var(--danger-soft);color:var(--danger);}
.card.candidate{cursor:default;border-style:dashed;background:var(--surface-2);}
.card.candidate:hover{box-shadow:none;border-color:var(--border);}
.card.candidate .name{color:var(--text-dim);}
.planned-tag{font-size:.68rem;color:var(--text-dim);font-weight:600;}
.empty{color:var(--text-dim);font-size:.85rem;padding:30px 0;text-align:center;display:none;}
.empty.show{display:block;}
footer{margin-top:30px;color:var(--text-dim);font-size:.78rem;}
footer .mono{color:var(--text);}

/* ---- 상품 상세 뷰 ---- */
.wrap{max-width:900px;margin:0 auto;padding-block:26px 60px;}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);padding:4px 10px;border-radius:999px;margin-bottom:12px;}
.p-h1{font-size:1.7rem;letter-spacing:-0.01em;margin-bottom:10px;line-height:1.3;}
.lead{color:var(--text-dim);font-size:.93rem;max-width:62ch;line-height:1.6;margin:0 0 18px;}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
a.btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:.85rem;padding:9px 15px;border-radius:7px;border:1px solid var(--border);color:var(--text);background:var(--surface-2);}
a.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;}
.psec{margin-top:36px;}
.psec h2{font-size:1.1rem;margin-bottom:10px;}
.psec > p{color:var(--text-dim);font-size:.9rem;line-height:1.65;max-width:64ch;}
.evidence{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:14px;}
.ecard{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;}
.ecard .n{font-size:1.25rem;font-weight:700;color:var(--accent);}
.ecard .d{font-size:.78rem;color:var(--text-dim);margin-top:3px;line-height:1.4;}
.filebox{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:16px;}
.filehead{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);}
.filehead span{font-size:.82rem;font-family:ui-monospace,monospace;color:var(--text-dim);}
.copybtn{font-family:inherit;font-size:.74rem;padding:6px 11px;border-radius:7px;border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;}
.copybtn:hover{border-color:var(--accent);}
.copybtn.copied{color:var(--buy);border-color:var(--buy);}
pre{margin:0;padding:16px;overflow-x:auto;font-size:.78rem;line-height:1.65;}
code{font-family:ui-monospace,'SFMono-Regular','IBM Plex Mono',monospace;}
.kw{color:#cf222e;} .str{color:#0a3069;} .com{color:#6e7781;} .fn{color:#8250df;}
.pricebox{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;margin-top:14px;}
.pricebox .now{font-size:1.5rem;font-weight:700;color:var(--buy);}
.pricebox .soon{font-size:.85rem;color:var(--text-dim);margin-top:4px;}
.notify{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;align-items:center;}
.notify button{font-family:inherit;font-size:.85rem;padding:9px 15px;border-radius:7px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:600;cursor:pointer;}
.notice{font-size:.78rem;color:var(--text-dim);margin-top:8px;}
.warn-box{background:var(--danger-soft);border:1px solid var(--danger);border-radius:10px;padding:12px 14px;margin-top:30px;font-size:.82rem;color:var(--text-dim);}
.warn-box b{color:var(--danger);}

/* ---- 라이브 데모 뷰 ---- */
.d-badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);padding:4px 10px;border-radius:999px;margin-bottom:10px;}
.d-lead{color:var(--text-dim);font-size:.88rem;max-width:68ch;line-height:1.55;margin:0 0 16px;}
.grid2{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-top:8px;}
@media (max-width:780px){.grid2{grid-template-columns:1fr;}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;}
.panel h2{font-size:.95rem;color:var(--text);display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-weight:600;}
.panel h2 .tag{font-size:.68rem;color:var(--text-dim);font-weight:400;}
.book{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.col h3{font-size:.72rem;letter-spacing:.04em;margin-bottom:6px;font-weight:600;}
.col.buy h3{color:var(--buy);}
.col.sell h3{color:var(--danger);}
.rows{display:flex;flex-direction:column;gap:3px;min-height:220px;}
.row{display:flex;justify-content:space-between;font-size:.78rem;padding:4px 8px;border-radius:5px;background:var(--surface-2);}
.row.buy{color:var(--buy);}
.row.sell{color:var(--danger);}
.row .qty{color:var(--text-dim);}
.row.flash{animation:flash .6s ease-out;}
@keyframes flash{0%{background:var(--accent-soft);}100%{background:var(--surface-2);}}
.mid{text-align:center;font-size:.72rem;color:var(--text-dim);padding:8px 0 2px;border-top:1px dashed var(--border);margin-top:8px;}
.mid b{color:var(--text);}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.dbtn{font-family:inherit;font-size:.8rem;padding:9px 13px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;}
.dbtn:hover{border-color:var(--accent);}
.dbtn:disabled{opacity:.5;cursor:not-allowed;}
.dbtn.danger{background:var(--danger);color:#fff;border-color:var(--danger);font-weight:600;}
.steps{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
.step{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--text-dim);padding:7px 9px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);}
.step .dot{width:8px;height:8px;border-radius:50%;background:var(--border);flex:none;}
.step.active{color:var(--text);border-color:var(--accent);}
.step.active .dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.step.done{color:var(--buy);}
.step.done .dot{background:var(--buy);}
.step.blocked{color:var(--danger);border-color:var(--danger);background:var(--danger-soft);}
.step.blocked .dot{background:var(--danger);}
.result{margin-top:4px;padding:12px;border-radius:9px;text-align:center;font-size:.85rem;display:none;}
.result.show{display:block;}
.result.ok{background:var(--buy-soft);border:1px solid var(--buy);color:var(--buy);}
.result.blocked{background:var(--danger-soft);border:1px solid var(--danger);color:var(--danger);}
.result .big{font-size:1.05rem;font-weight:700;display:block;margin-bottom:3px;}
.console{margin-top:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;height:190px;overflow-y:auto;font-size:.74rem;line-height:1.7;}
.console .ln{white-space:pre-wrap;word-break:break-all;color:var(--text);}
.console .t{color:var(--text-dim);}
.console .ok{color:var(--buy);}
.console .warn{color:#9a6700;}
.console .bad{color:var(--danger);}