:root{
  --bg:#f4f5f7; --card:#ffffff; --ink:#1d2330; --muted:#636b78; --line:#d8dde5; --soft:#eef1f5;
  --accent:#3b5bdb; --edge:#b4bcc8; --edge-on:#3b5bdb; --flash:#ffe8a3;
  --no:#d6336c; --part:#d9480f; --add:#2b8a3e; --dup:#7048e8; --fix:#b35c00; --memo:#e8590c; --lc:#0c8599; --gap:#8a6d00; --exp:#5c636a; --kink:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#11161d; --card:#1a212b; --ink:#e6eaf0; --muted:#9ba5b3; --line:#2c3643; --soft:#222b36;
    --accent:#7c96ff; --edge:#445062; --edge-on:#8fa5ff; --flash:#5a4a17;
    --no:#ff6b9a; --part:#ff9950; --add:#69db7c; --dup:#b197fc; --fix:#ffc078; --memo:#ff9950; --lc:#3bc9db; --gap:#fcc419; --exp:#adb5bd; --kink:#11161d;
  }
}
:root[data-theme="dark"]{
  --bg:#11161d; --card:#1a212b; --ink:#e6eaf0; --muted:#9ba5b3; --line:#2c3643; --soft:#222b36;
  --accent:#7c96ff; --edge:#445062; --edge-on:#8fa5ff; --flash:#5a4a17;
  --no:#ff6b9a; --part:#ff9950; --add:#69db7c; --dup:#b197fc; --fix:#ffc078; --memo:#ff9950; --lc:#3bc9db; --gap:#fcc419; --exp:#adb5bd; --kink:#11161d;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:15px/1.6 "Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;padding-inline:20px}
button,textarea{font:inherit;color:inherit}
button:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{padding-block:22px 60px}
header h1{margin:0 0 6px;font-size:24px;line-height:1.3}
.how{margin:0;color:var(--muted);max-width:980px}
.how b{color:var(--ink)}
.bar{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0;margin-top:12px;background:var(--bg);border-bottom:1px solid var(--line)}
.btn{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:7px 13px;min-height:40px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.seg{display:inline-flex;border:2px solid var(--accent);border-radius:10px;overflow:hidden;background:var(--card)}
.seg span{padding:0 8px 0 12px;align-self:center;font-size:14px;font-weight:700;color:var(--ink)}
.seg button{border:0;background:transparent;padding:7px 12px;min-height:40px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:700}
.saved{margin-left:auto;font-size:13px;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 0;padding:10px 12px;font-size:14px;color:var(--ink);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px}
.legend .no{color:var(--no);font-weight:700}.legend .part{color:var(--part);font-weight:700}
.copybox{margin-top:10px}
.copybox textarea{width:100%;height:220px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:10px;font-size:13px}

.big{margin-top:22px}
.bigh,.rowh{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;cursor:pointer}
.bigh{font-size:20px;font-weight:800;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.bigh small,.rowh small{font-size:13px;font-weight:500;color:var(--muted)}
.bigh:focus-visible,.rowh:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tri{display:inline-block;width:16px;color:var(--muted);font-size:13px}
.bigbody{padding-top:14px}
.area{position:relative}
svg.lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:0}
path.ln{fill:none;stroke:var(--edge);stroke-width:1.5;opacity:.7}
path.ln.on{stroke:var(--edge-on);stroke-width:2.6;opacity:1}
.row{position:relative;z-index:1;padding-bottom:40px}
.rowh{font-size:17px;font-weight:700;margin:0 0 10px;padding:2px 0}
.step{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:14px;background:var(--ink);color:var(--bg);font-size:14px}
.cards{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}

body[data-min="3"] [data-imp="2"],body[data-min="3"] [data-imp="1"],body[data-min="2"] [data-imp="1"]{display:none!important}

.card{width:270px;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgb(0 0 0 / .04);transition:box-shadow .15s,background .4s}
.card:hover{box-shadow:0 3px 12px rgb(0 0 0 / .1)}
.card.open{width:430px}
.card.flash,.fn.flash,.sub.flash{background:var(--flash)}
.card.stno{border-color:color-mix(in srgb,var(--no) 55%,var(--line))}
.head{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:flex-start;width:100%;padding:12px 12px 2px;cursor:pointer}
.head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:14px}
.num{flex:none;display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;font-size:16px}
.sys .num{background:#0c8599}
.ttl{flex:1;font-weight:700;font-size:16px;line-height:1.35;padding-top:5px}
.imp{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;border-radius:6px;padding:0 6px;vertical-align:2px;border:1px solid var(--line);color:var(--muted)}
.imp.i3{background:var(--accent);border-color:var(--accent);color:var(--kink)}
.imp.i1{border-style:dashed}
.chev{flex:none;padding-top:6px;color:var(--muted);font-size:13px}
.sum{margin:0;padding:0 12px 0 56px;color:var(--muted);font-size:14px}
.cardst{margin:2px 12px 0 56px;font-size:13px;color:var(--no);font-weight:600}
.cardst.part{color:var(--part)}
.foot{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;padding:6px 12px 10px 56px;font-size:13px;color:var(--muted)}
.c{border-radius:6px;padding:0 6px;font-weight:600;border:1px solid currentColor;line-height:20px;font-size:13px}
.c.no{color:var(--no)}.c.part{color:var(--part)}.c.add{color:var(--add)}.c.dup{color:var(--dup)}.c.fix{color:var(--fix)}.c.lc{color:var(--lc)}.c.gap{color:var(--gap)}.c.exp{color:var(--exp);border-style:dotted}
.memoflag{color:var(--memo);font-weight:600}
.body{border-top:1px solid var(--line);padding:8px 12px 12px}
.cardtags{margin-bottom:6px}
.fns,.subs{list-style:none;margin:0;padding:0}
.grp{font-size:12px;font-weight:700;color:var(--muted);margin:10px 0 2px}
.grp:first-child{margin-top:2px}
.fn{display:grid;grid-template-columns:auto 1fr;gap:0 8px;padding:6px 4px;border-bottom:1px dashed var(--line);border-radius:6px;transition:background .4s}
.fn:last-child{border-bottom:0}
.fno{font-weight:700;color:var(--accent);font-size:13px;min-width:40px;padding-top:2px;white-space:nowrap}
.sys .fno{color:#0c8599}
.fname{font-weight:600}
.stl{margin-left:6px;font-size:11.5px;font-weight:700;border-radius:6px;padding:0 5px;border:1px solid currentColor;vertical-align:1px}
.st-no > .fbody > .fline .fname,.st-no > .fbody > .fline .stl,.sub.st-no .sname,.sub.st-no .stl{color:var(--no)}
.st-part > .fbody > .fline .fname,.st-part > .fbody > .fline .stl,.sub.st-part .sname,.sub.st-part .stl{color:var(--part)}
.fdesc{color:var(--muted);font-size:13.5px}
.why{font-size:13px}
.st-no > .fbody > .why,.sub.st-no .why{color:var(--no)}
.st-part > .fbody > .why,.sub.st-part .why{color:var(--part)}
.tg{font-size:13px;margin-top:3px}
.tg .k{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:0 5px;margin-right:5px;color:var(--kink);vertical-align:1px}
.tg.add .k{background:var(--add)}.tg.dup .k{background:var(--dup)}.tg.fix .k{background:var(--fix)}.tg.lc .k{background:var(--lc)}.tg.gap .k{background:var(--gap)}.tg.exp .k{background:var(--exp)}
.tg small{color:var(--muted)}
.acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.jump,.more{border:1px solid var(--line);background:var(--soft);border-radius:8px;padding:0 8px;font-size:12.5px;cursor:pointer;line-height:22px}
.jump:hover,.more:hover{border-color:var(--accent);color:var(--accent)}
.jump.sysj{border-style:dashed}
.subs{margin:6px 0 2px;border-left:3px solid var(--line);padding-left:8px}
.sub{display:grid;grid-template-columns:auto 1fr;gap:0 6px;padding:5px 4px;border-radius:6px;transition:background .4s}
.sub+.sub{border-top:1px dotted var(--line)}
.sub .fno{font-size:12px;min-width:48px;color:var(--muted)}
.sname{font-weight:600;font-size:14px}
.sdesc{color:var(--muted);font-size:13px}
.memo{display:block;margin-top:12px;font-size:13px;font-weight:700;color:var(--memo)}
.memo textarea{display:block;width:100%;margin-top:4px;min-height:64px;resize:vertical;border:1px solid var(--line);border-radius:10px;background:var(--soft);padding:8px 10px;font-size:14px;font-weight:400;color:var(--ink)}

.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.mbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.mbox h3{margin:0 0 6px;font-size:15px;display:flex;gap:8px;align-items:center}
.mbox h3 .dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.mbox ul{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto}
.mbox li{padding:4px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.mbox li:last-child{border-bottom:0}
.mj{border:1px solid var(--line);background:var(--soft);border-radius:6px;padding:0 6px;font-weight:700;font-size:12.5px;cursor:pointer;margin-right:4px}
.mbox small{color:var(--muted)}
.general{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;max-width:900px}
.general textarea{width:100%;min-height:90px;border:1px solid var(--line);border-radius:10px;background:var(--soft);padding:8px 10px;font-size:14px}
.note{margin-top:22px;font-size:12.5px;color:var(--muted);max-width:980px}
@media (max-width:640px){body{padding-inline:16px}header h1{font-size:20px}.card,.card.open{width:100%}.saved{margin-left:0;width:100%}.fn{grid-template-columns:1fr}.sub{grid-template-columns:1fr}}
@media print{.bar{position:static}}
/* 탭 허브 */
.hubtabs{position:sticky;top:0;z-index:45;display:flex;flex-wrap:wrap;gap:6px;padding:8px 0;margin:4px 0 8px;background:var(--bg);border-bottom:1px solid var(--line)}
.hubtab{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 14px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;min-height:44px}
.hubtab small{font-weight:500;color:var(--muted);margin-left:4px;font-size:12.5px}
.hubtab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--kink)}
.hubtab[aria-selected="true"] small{color:var(--kink)}
.hubtab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bar{top:var(--hubh,62px)}
@media (min-width:1100px){.wstage .wdetail{top:calc(var(--hubh,62px) + 8px);max-height:calc(100vh - var(--hubh,62px) - 20px)}}
.hubh{font-size:16px;margin:16px 0 6px}.hubh small{font-weight:500;color:var(--muted);font-size:13px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.hubtable{border-collapse:collapse;width:100%;min-width:760px;font-size:13.5px}
.hubtable th,.hubtable td{border-bottom:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
.hubtable th{background:var(--soft);font-size:13px;white-space:nowrap}
/* 한눈에 보기 */
.gctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.gthumb{width:28px;height:28px;border-radius:6px;object-fit:cover;vertical-align:middle;margin-right:6px}
.gpanels{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:10px;margin:10px 0}
.gpanel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.gpanel h3{margin:0 0 4px;font-size:16px}
.gpanel .wmeta{margin:2px 0 6px}
.gwave{font-size:12px;color:var(--muted);font-weight:700;margin:8px 0 3px}
.gtask{display:inline-block;font:inherit;font-size:12.5px;border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--soft);color:var(--ink);border-radius:6px;padding:2px 7px;margin:2px 3px 2px 0;cursor:pointer;text-align:left}
.gtask small{color:var(--muted);margin-left:4px}
.gdec{border-top:1px dashed var(--line);padding:7px 0}
.gdec:first-of-type{border-top:0}
.gdec b{color:var(--accent)}
.gopts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.gopt{font:inherit;font-size:12.5px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:3px 9px;cursor:pointer;text-align:left;min-height:32px}
.gopt.on{background:var(--add);border-color:var(--add);color:var(--kink);font-weight:700}
.gopt.clear{border-style:dashed;color:var(--muted)}
.gdone{color:var(--add);font-weight:700}
.gmenubar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin:10px 0}
.gtile{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:10px;padding:8px 10px}
.gtile h4{margin:0 0 2px;font-size:15px}
.gtitle{font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.gtitle:hover{color:var(--accent)}
.gcol{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.gboard.simple .gsec.detail,.gboard.simple .gask.detail{display:none}
.gtile p{margin:0 0 6px;font-size:12px;color:var(--muted)}
.gsub{display:flex;flex-wrap:wrap;gap:4px}
.ggo{font:inherit;font-size:12.5px;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:6px;padding:2px 7px;cursor:pointer;text-align:left}
.ggroup{margin:18px 0 6px}
.ggroup>h3{font-size:18px;margin:0 0 4px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.ggroup>h3 small{font-size:13px;font-weight:500;color:var(--muted)}
.gboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:12px;padding:10px 12px;margin:8px 0;scroll-margin-top:calc(var(--hubh,62px) + 10px)}
.gboard.none{border-left-color:var(--muted)}
.gboard.flash{background:var(--flash)}
.gboard h4{margin:0 0 6px;font-size:16px;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.gboard h4 small{font-size:12.5px;font-weight:500;color:var(--muted)}
.gsec{margin:6px 0;font-size:13.5px;line-height:1.5}
.gsec>.gl{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-bottom:2px}
.gsec .jump,.gsec .wj,.gsec .mj{font-size:12.5px;margin:1px 3px 1px 0}
.gissue{display:block;font-size:13px;margin:2px 0}
.gissue .c{margin-right:4px}
.gslot{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:0 6px;margin:1px 3px 1px 0;background:var(--soft)}
.gslot.p0{border-color:var(--accent)}
.gask{font-size:12.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:5px;margin-top:6px}
/* 틀 그림(와이어프레임) */
.wf{position:relative;aspect-ratio:16/10;width:100%;display:grid;grid-template-columns:19% minmax(0,1fr);border:1px solid var(--wf-border);border-radius:var(--wf-r);overflow:hidden;background:var(--wf-bg);color:var(--wf-text);font-size:11px;line-height:1.3}
.wf-nav{background:var(--wf-nav);padding:6px 4px;display:flex;flex-direction:column;gap:3px;min-width:0}
.wf-nav span{display:block;border-radius:4px;padding:3px 5px;color:#f1f3f5;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-nav span.on{background:var(--wf-accent);color:var(--wf-on);font-weight:700}
.wf-main{position:relative;padding:7px 8px;display:flex;flex-direction:column;gap:5px;min-width:0;min-height:0}
.wf-main.has-bg{background-image:repeating-linear-gradient(135deg,transparent 0 9px,rgba(127,127,127,.13) 9px 18px)}
.wf-tag{position:absolute;right:6px;font-size:9.5px;background:var(--wf-panel);border:1px dashed var(--wf-accent);border-radius:4px;padding:1px 5px;color:var(--wf-text);max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-tag.top{top:6px}.wf-tag.bottom{bottom:6px}
.wf-title{font-weight:800;font-size:13px;padding-right:40%}
.wf-title small{display:block;font-weight:500;font-size:10.5px;color:var(--wf-muted)}
.wf-zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;flex:1;min-height:0}
.wf-zone{background:var(--wf-panel);border:1px solid var(--wf-border);border-radius:calc(var(--wf-r) * .6);padding:5px;overflow:hidden;min-height:0}
.wf-zone b{display:block;font-size:10.5px;margin-bottom:3px}
.wf-slot{display:block;border:1px dashed var(--wf-accent);border-radius:4px;padding:3px 4px;font-size:9.5px;color:var(--wf-text);margin-top:3px;background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(127,127,127,.12) 5px 10px)}
.wf-acts{display:flex;gap:4px;flex-wrap:wrap}
.wf-acts span{background:var(--wf-button);border:1px solid var(--wf-border);border-radius:calc(var(--wf-r) * .5);padding:1px 7px;font-size:10px;color:var(--wf-text)}
.wf-none{display:grid;place-items:center;aspect-ratio:16/10;width:100%;border:2px dashed var(--line);border-radius:10px;background:var(--soft);color:var(--muted);text-align:center;padding:12px;font-size:13px}
.wf-none b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}
@media (max-width:900px){.gboard{grid-template-columns:1fr}}
@media (max-width:560px){.wf{aspect-ratio:auto;grid-template-columns:1fr}.wf-nav{flex-direction:row;flex-wrap:wrap}.wf-zones{grid-template-columns:1fr}.wf-title{padding-right:0}.wf-tag{position:static;display:inline-block;max-width:100%;margin:2px 0}}

/* 개발 할거리 거미줄 */
.wbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.wlab{font-size:13px;font-weight:700;color:var(--muted);margin-right:2px}
.wchip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:4px 11px;font-size:13px;cursor:pointer;min-height:32px}
.wchip[aria-pressed="true"]{border-color:var(--accent);font-weight:700}
.wchip[aria-pressed="false"]{opacity:.5}
.wchip .dot,.wgroup .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0}
.wlegend{font-size:13px;color:var(--muted);margin:4px 0 6px}
.webwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);margin:6px 0}
.web{display:block;width:100%;min-width:760px;max-width:1100px;height:auto;margin:0 auto}
.web .ring{fill:none;stroke:var(--line);stroke-dasharray:3 6}
.web .spoke{stroke:var(--line);stroke-width:1}
.web .tlab{font-size:17px;font-weight:700;fill:var(--ink)}
.web .center{fill:var(--soft);stroke:var(--line)}
.web .ctext{font-size:15px;font-weight:700;fill:var(--muted);text-anchor:middle;dominant-baseline:central}
.web .wedge{fill:none;stroke:var(--edge);stroke-width:1.4;opacity:.42}
.web .wedge.rel{stroke-dasharray:2 7;stroke-width:1.1;opacity:.22}
.web .sector{stroke:none;opacity:.07;cursor:pointer;transition:opacity .15s}
.web .sector:hover,.web .sector.on{opacity:.2}
.web .tlab{cursor:pointer}
.web .tlab:focus{outline:none}.web .tlab:focus-visible{text-decoration:underline}
.web .wedge.on{stroke:var(--edge-on);stroke-width:2.8;opacity:1}
.web .wedge.dim{opacity:.06}
.web .warrh{fill:var(--edge)}
.web .wnode{cursor:pointer}
.web .wnode circle.b{fill:var(--card);stroke-width:2.6}
.web .wnode.w1 circle.b{stroke-width:4.5}
.web .wnode.cond circle.b{stroke-dasharray:4 3}
.web .wnode .act{fill:none;stroke:var(--accent);stroke-width:2}
.web .wnode text{font-size:13px;font-weight:800;fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.web .wnode.q rect{fill:var(--soft);stroke:var(--accent);stroke-width:2}
.web .wnode.sel circle.b,.web .wnode.sel rect{stroke:var(--edge-on)!important;stroke-width:6}
.web .wnode:focus{outline:none}
.web .wnode:focus-visible circle.b,.web .wnode:focus-visible rect{stroke:var(--edge-on)!important;stroke-width:6}
.web .wnode.dim{opacity:.2}
.web .wnode.off,.web .wedge.off{opacity:.05;pointer-events:none}
.wdetail{border:2px solid var(--accent);border-radius:12px;padding:10px 12px;background:var(--card);margin:8px 0}
.wstage{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
.wstage .webwrap{min-width:0}
@media (min-width:1100px){.wstage{grid-template-columns:minmax(0,1fr) 360px}.wstage .wdetail{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;margin:6px 0}}
.wempty{color:var(--muted);font-size:13.5px;margin:2px 0}
.wtip{position:fixed;z-index:60;max-width:340px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.45;box-shadow:0 6px 22px rgba(0,0,0,.22);pointer-events:none}
.wtip b{font-size:14px}
.wtip .tmeta{color:var(--muted);font-size:12px;margin-top:3px}
.wtip .thint{color:var(--accent);font-size:12px;margin-top:5px;font-weight:700}
.wtlist{list-style:none;margin:6px 0 0;padding:0}
.wtlist li{padding:7px 0;border-top:1px dashed var(--line)}
.wtlist .wwhy{margin:3px 0 0}
.wgroup{margin:10px 0}
.wcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px;margin-top:4px}
.wcard{border:1px solid var(--line);border-left:5px solid var(--edge);border-radius:10px;padding:8px 10px;background:var(--card);transition:background .4s}
.wcard.flash{background:var(--flash)}
.whead{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline}
.wid{font-weight:800;font-size:15px;color:var(--ink)}
.wtitle{font-size:15px;margin-right:2px}
.wb{font-size:11.5px;border:1px solid var(--line);border-radius:6px;padding:0 5px;color:var(--muted);white-space:nowrap}
.wb.act{border-color:var(--accent);color:var(--accent);font-weight:700}
.wwhat{margin:6px 0 2px;font-size:14px}
.wwhy{margin:2px 0;font-size:13px;color:var(--muted)}
.wmeta{margin:3px 0;font-size:12px;color:var(--muted)}
.wcond{margin:4px 0;font-size:13px;color:var(--part)}
.wopts{margin:4px 0 2px;padding-left:20px;font-size:13.5px}
.wlinks{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:5px;font-size:12.5px}
.wlinks>span:first-child{color:var(--muted);min-width:96px;font-weight:600}
.wj,.wlinks .mj,.wgo,.wclear,.wsel,.wpick,.wgotrack,.wbacktrack{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:6px;background:var(--soft);color:var(--ink);padding:2px 7px;cursor:pointer;text-align:left}
.wsel{margin-top:6px}
.wmall{font-size:12.5px;border:1px dashed var(--line);border-radius:6px;padding:2px 7px;color:var(--muted)}
.mlink{margin-left:4px;white-space:nowrap}
.mlink .wj{font-size:11.5px;padding:0 5px}
@media (max-width:640px){.wcards{grid-template-columns:1fr}.wlinks>span:first-child{min-width:0;width:100%}}


/* 사이트 껍데기 (chan-woo.com 공통 머리말·꼬리말) */
header.site{display:flex;justify-content:space-between;gap:20px;align-items:center;
  max-width:1280px;margin:auto;padding:18px 24px;border-bottom:1px solid var(--line,#dfe5dc);font-size:14px}
header.site nav{display:flex;gap:18px}
header.site a{color:inherit;text-decoration:none}
header.site a:hover{text-decoration:underline}
footer.site{max-width:1280px;margin:auto;padding:24px;border-top:1px solid var(--line,#dfe5dc);
  font-size:12px;color:var(--muted,#6b776e)}

/* 항목별 요청 링크 */
a.req{display:inline-block;font-size:12px;font-weight:700;text-decoration:none;
  padding:2px 8px;border-radius:999px;border:1px solid currentColor;margin-right:6px}
a.req:hover{text-decoration:underline}

.co-progress{margin:20px 0;padding:18px;border:2px solid #4263eb;border-radius:12px;background:#fff;color:#222}.co-progress h2{margin-top:0}.co-progress p{overflow-wrap:anywhere}.co-progress select{padding:8px;margin:8px;max-width:100%}.co-progress summary{cursor:pointer;padding:10px}.co-progress-item{padding:12px;border-top:1px solid #ddd}.co-progress-item button{white-space:normal;text-align:left;max-width:100%}.co-progress-item strong{font-size:.9em}