/* 웹 구성요소 도판 — 번호 핀이 꽂힌 견본 화면과 옆 목록. 색은 토큰으로만 쓰고 두 테마에서 같은 구조로 보인다.
   마크업은 scripts/lib/web-design-anatomy.js 가 만든다. 견본 안 부품은 wa- 접두어, 실제 조작부가 아니라 그림이다. */
.wa{--wa-ink:rgba(var(--ink-rgb),.14);--wa-ink-2:rgba(var(--ink-rgb),.08);--wa-line:rgba(var(--ink-rgb),.16);--wa-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* 프롬프트 두 장 — 이름을 모를 때와 알 때 */
.wa-ask{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.35fr);gap:16px;align-items:stretch;margin:34px 0 26px}
.wa-ask-card{border:1px solid var(--glass-line);border-radius:18px;background:var(--panel);overflow:hidden}
.wa-ask-card.is-precise{border-color:rgba(var(--ember-rgb),.45);box-shadow:0 18px 50px -24px rgba(var(--ember-rgb),.45)}
.wa-ask-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 18px;border-bottom:1px solid var(--glass-line);font-size:12px;color:var(--txt-dim)}
.wa-ask-head span{padding:1px 9px;border-radius:6px;background:var(--hilite);font-weight:650;color:var(--txt)}
.is-precise .wa-ask-head span{background:var(--accent-fill);color:var(--on-accent)}
.wa-ask-text{padding:16px 20px 20px;font-size:15px;line-height:2.05;color:var(--read)}
.is-vague .wa-ask-text{color:var(--txt-dim)}
.wa-ask-arrow{align-self:center;font-size:22px;color:var(--tag-peach)}
.wa-page .wa-seg{padding:2px 4px;border-radius:4px;background:rgba(var(--ember-rgb),.14);border-bottom:2px solid var(--ember);color:var(--txt);font-weight:650;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wa-page .wa-seg:hover{background:rgba(var(--ember-rgb),.26)}

/* 묶음 목차 */
.wa-index{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 44px}
.wa-index a{display:inline-flex;align-items:baseline;gap:8px;padding:9px 15px;border:1px solid var(--glass-line);border-radius:999px;background:var(--glass);font-size:13.5px}
.wa-index a b{font:600 11px var(--wa-mono);color:var(--tag-peach)}
.wa-index small{font-size:11px;color:var(--txt-dim)}
.wa-index a:hover{border-color:rgba(var(--ember-rgb),.5);color:var(--tag-peach)}

/* 도판 */
.wa-plate{margin:0 0 30px;padding:30px;border:1px solid var(--glass-line);border-radius:28px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-card);scroll-margin-top:100px}
.wa-plate-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;margin-bottom:24px}
.wa-plate-n{font:500 34px/1 var(--wa-mono);letter-spacing:-.04em;color:var(--tag-peach)}
.wa-plate-head h3{font-size:24px;line-height:1.35;font-weight:650;letter-spacing:-.03em}
.wa-plate-head p{margin-top:6px!important;max-width:760px;color:var(--txt-dim);font-size:14.5px}
.wa-plate-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:start}
.wa-fig{margin:0;position:sticky;top:96px}
.wa-fig figcaption{margin-top:12px;font-size:12.5px;line-height:1.7;color:var(--txt-dim)}
.wa-stage{position:relative;padding:34px 30px;border-radius:20px;border:1px solid var(--glass-line);background-color:var(--well);background-image:radial-gradient(rgba(var(--ink-rgb),.11) 1px,transparent 1.2px);background-size:16px 16px;font-size:12px;line-height:1.45;color:var(--txt);overflow:hidden}
.wa-src{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin-top:22px!important;padding-top:16px;border-top:1px dashed var(--glass-line);font-size:12px}
.wa-src span{font-weight:650;color:var(--txt-dim)}
.wa-src a{color:var(--tag-peach);text-decoration:underline;text-underline-offset:3px}
.wa .wd-dateline{margin-top:10px;font-size:12px;color:var(--txt-dim)}

/* 옆 목록 */
.wa-terms{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wa-terms li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:3px 12px;padding:11px 14px 12px 12px;border:1px solid var(--glass-line);border-radius:14px;background:var(--panel);transition:border-color .2s,background-color .2s;scroll-margin-top:110px}
.wa-terms li.is-lit,.wa-terms li:target{border-color:rgba(var(--ember-rgb),.6);background:rgba(var(--ember-rgb),.09)}
.wa-n{grid-row:span 3;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--accent-fill);color:var(--on-accent);font:700 13px var(--wa-mono)}
.wa-term-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.wa-term-head strong{font-size:16px;font-weight:650;letter-spacing:-.02em}
.wa-en{font:500 11.5px var(--wa-mono);color:var(--tag-peach)}
.wa-aka{font-size:11.5px;color:var(--txt-dim)}
.wa-aka::before{content:"· "}
.wa-desc{font-size:13px;line-height:1.65;color:var(--read);margin-top:2px!important}
.wa-say{margin-top:6px!important;padding:6px 10px;border-radius:8px;background:var(--well);font-size:12px;line-height:1.55;color:var(--txt)}
.wa-say span{display:inline-block;margin-right:8px;padding:0 7px;border-radius:5px;background:rgba(var(--tag-sky-rgb),.16);color:var(--tag-sky);font-size:11px;font-weight:650}

/* 차이 표 */
.wa-compare{margin:0 0 30px;padding:28px 30px;border:1px solid rgba(var(--ember-rgb),.35);border-radius:24px;background:var(--panel)}
.wa-compare h3{font-size:22px;font-weight:650;letter-spacing:-.03em}
.wa-compare .wd-muted{margin:6px 0 18px!important;font-size:14px}
.wa-table-wrap{overflow-x:auto}
.wa-compare table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.wa-compare th,.wa-compare td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--glass-line);vertical-align:top}
.wa-compare thead th{font-size:12px;font-weight:600;color:var(--txt-dim);background:var(--well)}
.wa-compare tbody th a{font-weight:650;color:var(--txt);text-decoration:underline;text-decoration-color:rgba(var(--ember-rgb),.5);text-underline-offset:4px}
.wa-compare td{color:var(--read)}

/* ── 견본 공통 ─────────────────────────────────── */
:where(.wa-stage [data-part]){position:relative}
.wa-pin{position:absolute;z-index:6;top:-10px;left:-10px;display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--accent-fill);color:var(--on-accent);font:700 11px/1 var(--wa-mono);box-shadow:0 0 0 2.5px var(--well),0 4px 10px -3px rgba(var(--shade-rgb),.5);transition:transform .2s,opacity .2s}
.wa-pin.at-r{left:auto;right:-10px}
.wa-pin.at-b{top:auto;bottom:-12px;left:50%;margin-left:-10px}
.wa-pin.at-in{top:7px;left:7px}
.wa-pin.at-inr{top:7px;left:auto;right:7px}
.wa-pin.at-sl{top:50%;left:-29px;margin-top:-10.5px}
.wa-pin.at-sr{top:50%;left:auto;right:-29px;margin-top:-10.5px}
.wa-stage [data-part]{transition:outline-color .2s,box-shadow .2s}
.wa-stage .is-lit{outline:2px solid var(--ember);outline-offset:3px;box-shadow:0 0 0 7px rgba(var(--ember-rgb),.16)}
.wa-stage .is-lit>.wa-pin{transform:scale(1.25)}
.wa-fig.has-lit .wa-pin{opacity:.35}
.wa-fig.has-lit .is-lit>.wa-pin{opacity:1}
.wa-ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wa-ln{display:block;height:6px;margin:6px 0;border-radius:3px;background:var(--wa-ink-2);width:100%}
.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}
.wa-thumb{display:block;height:34px;border-radius:5px;background:linear-gradient(135deg,rgba(var(--ember-rgb),.30),rgba(var(--amber-rgb),.18))}
.wa-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wa-row.is-end{justify-content:flex-end}
.wa-grow{flex:1}

/* 창 틀 */
.wa-win{position:relative;border:1px solid var(--wa-line);border-radius:12px;background:var(--inst);box-shadow:0 22px 50px -26px rgba(var(--shade-rgb),.55)}
.wa-bar{display:flex;align-items:center;gap:5px;padding:8px 11px;border-bottom:1px solid var(--wa-line);border-radius:12px 12px 0 0;background:var(--inst-2)}
.wa-bar>i{width:8px;height:8px;border-radius:50%;background:var(--wa-ink)}
.wa-bar>i:first-child{background:rgba(var(--ember-rgb),.7)}
.wa-bar span{margin-left:10px;flex:1;padding:2px 10px;border-radius:6px;background:var(--well);font:10px var(--wa-mono);color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-view{position:relative;padding:12px}
.wa-phone{position:relative;width:150px;margin:0 auto;padding:16px 7px 8px;border:1px solid var(--wa-line);border-radius:22px;background:var(--inst-2);box-shadow:0 22px 50px -26px rgba(var(--shade-rgb),.55)}
.wa-phone .wa-view{height:230px;padding:8px;border-radius:15px;background:var(--inst);overflow:hidden}
.wa-phone.is-short .wa-view{height:150px}
.wa-notch{position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--wa-ink)}
.wa-pbar{display:flex;align-items:center;gap:8px;margin:-8px -8px 8px;padding:8px 10px;border-bottom:1px solid var(--wa-line);font-weight:600;font-size:11px}
.wa-photo{display:block;height:80px;border-radius:8px;background:linear-gradient(160deg,rgba(var(--amber-rgb),.35),rgba(var(--ember-rgb),.15) 60%,var(--wa-ink-2))}
.wa-photo.is-short{height:46px}
.wa-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px;align-items:end}
.wa-tiles.is-nav{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.wa-tile{display:grid;gap:9px;justify-items:stretch}
.wa-tile-cap{text-align:center;font:500 10.5px var(--wa-mono);color:var(--txt-dim)}
.wa-panel{padding:12px;border:1px solid var(--wa-line);border-radius:10px;background:var(--inst)}

/* 페이지 틀 */
.wa-hd{display:flex;align-items:center;gap:12px;margin:-12px -12px 0;padding:9px 12px;border-bottom:1px solid var(--wa-line);background:var(--inst-hi)}
.wa-logo{display:grid;place-items:center;width:24px;height:20px;border-radius:6px;background:var(--accent-fill);color:var(--on-accent);font:700 9px var(--wa-mono)}
.wa-nav{display:flex;gap:12px;margin-left:auto;font-size:10.5px;color:var(--txt-dim)}
.wa-nav .on{color:var(--txt);font-weight:650;box-shadow:inset 0 -2px 0 var(--ember)}
.wa-hd-search{color:var(--txt-dim)}
.wa-crumb{padding:9px 0 7px;font-size:10px;color:var(--txt-dim);justify-self:start;display:inline-block}
.wa-crumb em{font-style:normal;margin:0 3px;color:var(--txt-faint)}
.wa-hero{display:grid;gap:5px;justify-items:start;margin-bottom:12px;padding:18px 16px;border-radius:9px;background:linear-gradient(115deg,rgba(var(--ember-rgb),.26),rgba(var(--amber-rgb),.10) 55%,rgba(var(--tag-sky-rgb),.06))}
.wa-hero strong{font-size:15px;letter-spacing:-.02em}
.wa-hero .wa-ln{margin:2px 0 6px}
.wa-cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:12px}
.wa-main{padding:6px;border-radius:8px}
.wa-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
.wa-card{display:grid;gap:5px;padding:6px;border:1px solid var(--wa-line);border-radius:7px;background:var(--inst-hi);font-size:10px}
.wa-card .wa-thumb{height:30px}
.wa-card .wa-ln{margin:0}
.wa-side{padding:8px;border-radius:8px;background:var(--well);font-size:10px}
.wa-ft{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px -12px -12px;padding:11px 12px;border-top:1px solid var(--wa-line);border-radius:0 0 12px 12px;background:var(--inst-2);font-size:9.5px;color:var(--txt-dim)}
.wa-ft .wa-ln{margin:0}

/* 여백과 정렬 */
.wa-spacing{display:grid;gap:34px}
.wa-bm-tag{position:absolute;font:600 10px/1 var(--wa-mono);letter-spacing:.02em}
.wa-bm-margin{padding:30px;border:1.5px dashed var(--amber);border-radius:12px;background:repeating-linear-gradient(45deg,rgba(var(--amber-rgb),.13) 0 6px,transparent 6px 12px)}
.wa-bm-margin>.wa-bm-tag{top:10px;right:14px;color:var(--amber)}
.wa-bm-border{border:7px solid rgba(var(--tag-lav-rgb),.8);border-radius:10px;background:var(--inst)}
.wa-bm-tag.is-border{top:-22px;left:14px;color:var(--tag-lav)}
.wa-bm-padding{padding:26px;border-radius:3px;background:repeating-linear-gradient(-45deg,rgba(var(--green-rgb),.16) 0 6px,transparent 6px 12px)}
.wa-bm-padding>.wa-bm-tag{top:8px;right:10px;color:var(--green)}
.wa-bm-content{display:grid;place-items:center;min-height:64px;border:1px dashed var(--blue);border-radius:3px;background:rgba(var(--blue-rgb),.2);font-size:12.5px;font-weight:650}
.wa-gd{padding:30px 16px 16px;border:1.5px dashed var(--wa-line);border-radius:10px;background:var(--inst)}
.wa-gd>.wa-bm-tag{top:11px;left:16px;color:var(--txt-dim)}
.wa-gd-cols{display:flex;height:74px}
.wa-gd-col{flex:1;display:grid;place-items:center;border-radius:5px;border:1px solid rgba(var(--ember-rgb),.5);background:rgba(var(--ember-rgb),.16);font:600 11px var(--wa-mono);font-style:normal;color:var(--ember)}
.wa-gd-gut{flex:none;width:16px;background:repeating-linear-gradient(0deg,rgba(var(--tag-sky-rgb),.35) 0 3px,transparent 3px 6px)}

/* 버튼 견본 */
.wa-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:0 14px;border-radius:7px;border:1px solid transparent;font-size:11.5px;font-weight:650;white-space:nowrap;color:var(--txt)}
.wa-btn.is-sm{min-height:24px;padding:0 10px;font-size:10.5px;border-radius:6px}
.wa-btn.is-primary{background:var(--accent-fill);color:var(--on-accent)}
.wa-btn.is-outline{border-color:var(--wa-line);background:var(--inst)}
.wa-btn.is-outline.is-active{border-color:rgba(var(--ember-rgb),.6);color:var(--ember)}
.wa-btn.is-text{color:var(--txt-dim)}
.wa-btn.is-danger{background:var(--crim);color:rgb(var(--white-rgb))}
.wa-btn.is-cta{padding:0 12px}
.wa-btn.is-hover{background:var(--plasma)}
.wa-btn.is-focus{outline:2px solid var(--amber);outline-offset:3px}
.wa-btn.is-pressed{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(var(--shade-rgb),.35);filter:brightness(.88)}
.wa-btn.is-disabled{opacity:.38}
.wa-cursor{position:absolute;right:-9px;bottom:-12px;width:16px;height:16px;fill:var(--inst);stroke:var(--txt);stroke-width:1.6}
.wa-ibtn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;border:1px solid var(--wa-line);color:var(--txt-dim)}
.wa-fab{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--accent-fill);color:var(--on-accent);box-shadow:0 10px 22px -8px rgba(var(--ember-rgb),.7)}
.wa-fab .wa-ico{width:18px;height:18px;stroke-width:2.6}
.wa-win.is-buttons .wa-view{padding:12px 12px 64px}
.wa-promo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding:10px 12px;border-radius:9px;background:linear-gradient(100deg,rgba(var(--ember-rgb),.16),rgba(var(--amber-rgb),.08));font-weight:600}
.wa-sheet-card{padding:14px;border:1px solid var(--wa-line);border-radius:11px;background:var(--inst-hi)}
.wa-sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px}
.wa-fieldmock{display:grid;gap:4px;margin-bottom:9px}
.wa-fieldmock small{font-size:10px;color:var(--txt-dim)}
.wa-fieldmock i{display:block;padding:6px 9px;border:1px solid var(--wa-line);border-radius:6px;font-style:normal;font-size:11px;background:var(--inst)}
.wa-fieldmock i .wa-ln{margin:3px 0}
.wa-sheet-card .wa-row{margin-top:14px}

/* 상태 */
.wa-states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 14px;padding:6px 0}
.wa-state{display:grid;justify-items:center;gap:10px}
.wa-state.is-wide{grid-column:span 2}
.wa-state small{font:500 10.5px var(--wa-mono);color:var(--txt-dim)}
.wa-spin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--wa-ink);border-top-color:var(--ember);animation:wa-spin 1s linear infinite}
.wa-spin.is-on-accent{border-color:rgba(var(--shade-rgb),.2);border-top-color:var(--on-accent)}
@keyframes wa-spin{to{transform:rotate(360deg)}}
.wa-seg{display:inline-flex;border:1px solid var(--wa-line);border-radius:8px;background:var(--inst);overflow:visible}
.wa-seg span{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;font-size:11.5px;font-weight:600;color:var(--txt-dim)}
.wa-seg span+span{border-left:1px solid var(--wa-line)}
.wa-seg span.on{background:rgba(var(--ember-rgb),.16);color:var(--ember);border-radius:7px 0 0 7px}

/* 크게 뜨는 창 */
.wa-win.is-mini .wa-view{height:170px;overflow:hidden}
.wa-scrim{position:absolute;inset:0;background:var(--scrim)}
.wa-scrim.is-soft{opacity:.7}
.wa-modal{position:absolute;left:50%;top:50%;width:72%;transform:translate(-50%,-50%);display:grid;gap:6px;padding:14px;border-radius:11px;background:var(--pop);border:1px solid var(--wa-line);box-shadow:var(--shadow-pop)}
.wa-modal span{font-size:10.5px;color:var(--txt-dim)}
.wa-modal .wa-row{margin-top:6px}
.wa-layer{position:absolute;left:14px;top:12px;width:60%;display:grid;gap:6px;padding:10px 10px 0;border-radius:6px;background:var(--pop);border:1px solid var(--wa-line);box-shadow:var(--shadow-pop)}
.wa-layer .wa-thumb{height:38px}
.wa-layer>span{font-size:10.5px}
.wa-layer-foot{display:flex;justify-content:space-between;margin:2px -10px 0;padding:6px 10px;border-top:1px solid var(--wa-line);font-size:9.5px;color:var(--txt-dim)}
.wa-burger{display:inline-grid;gap:3px;width:16px;padding:2px 0}
.wa-burger>i{display:block;height:2px;border-radius:2px;background:var(--txt)}
.wa-drawer{position:absolute;left:0;top:0;bottom:0;width:72%;display:grid;align-content:start;gap:4px;padding:16px 10px;background:var(--pop);border-right:1px solid var(--wa-line);box-shadow:var(--shadow-pop)}
.wa-drawer strong{margin-bottom:6px;font-size:12px}
.wa-drawer span{display:flex;align-items:center;gap:7px;padding:6px 7px;border-radius:7px;font-size:10.5px;color:var(--txt-dim)}
.wa-drawer span.on{background:rgba(var(--ember-rgb),.14);color:var(--ember);font-weight:650}
.wa-bsheet{position:absolute;left:0;right:0;bottom:0;display:grid;gap:2px;padding:8px 12px 14px;border-radius:16px 16px 0 0;background:var(--pop);border-top:1px solid var(--wa-line);box-shadow:var(--shadow-pop)}
.wa-bsheet span{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:11px}
.wa-bsheet span.is-danger{color:var(--crim)}
.wa-handle{justify-self:center;width:32px;height:4px;margin-bottom:6px;border-radius:2px;background:var(--wa-ink)}

/* 작게 뜨는 것 */
.wa-win.is-transient .wa-view{padding:0 0 64px}
.wa-banner{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(var(--tag-sky-rgb),.16);border-bottom:1px solid rgba(var(--tag-sky-rgb),.35);color:var(--txt);font-size:11px}
.wa-banner em{margin-left:auto;font-style:normal;color:var(--txt-dim)}
.wa-banner .wa-ico{color:var(--tag-sky)}
.wa-toolbar{display:flex;align-items:center;gap:8px;padding:12px 12px 6px;font-size:13px}
.wa-tip-anchor{position:relative;display:inline-grid;place-items:center;color:var(--txt-dim)}
.wa-tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);padding:6px 9px;border-radius:6px;background:var(--txt);color:var(--bg);font-size:10px;font-weight:600;white-space:nowrap;z-index:4}
.wa-tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--txt)}
.wa-win.is-transient .wa-toolbar{padding-top:40px}
.wa-dd{position:relative}
.wa-menu,.wa-pop{position:absolute;top:calc(100% + 6px);z-index:5;display:grid;gap:1px;padding:6px;border-radius:9px;background:var(--pop);border:1px solid var(--wa-line);box-shadow:var(--shadow-pop);font-size:10.5px;white-space:nowrap}
.wa-menu{left:0;min-width:100%}
.wa-menu span{display:flex;align-items:center;gap:5px;padding:5px 8px 5px 22px;border-radius:5px}
.wa-menu span.on{padding-left:6px;background:rgba(var(--ember-rgb),.12);color:var(--ember);font-weight:650}
.wa-menu .wa-ico{width:11px;height:11px}
.wa-pop{right:0;gap:5px;padding:10px 12px;min-width:120px}
.wa-pop strong{font-size:11px;margin-bottom:2px}
.wa-pop span:not(.wa-btn){display:flex;align-items:center;gap:6px}
.wa-pop .wa-btn{margin-top:4px}
.wa-list{display:grid;gap:0;padding:0 12px}
.wa-list>div{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--wa-line);font-size:11px}
.wa-list .wa-ln{justify-self:end}
.wa-dot{width:7px;height:7px;border-radius:50%;background:var(--ember)}
.wa-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:10px;background:var(--txt);color:var(--bg);font-size:11px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-pop)}
.wa-toast em{font-style:normal;color:var(--tag-peach);filter:saturate(1.4) brightness(.8)}
.wa-toast .wa-ico{color:var(--green)}

/* 입력과 선택 */
.wa-formcard{padding:16px;border:1px solid var(--wa-line);border-radius:14px;background:var(--inst);box-shadow:0 22px 50px -26px rgba(var(--shade-rgb),.55)}
.wa-search{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--inst-2);color:var(--txt-dim);font-size:11px;margin-bottom:16px}
.wa-form-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.wa-fcol{display:grid;align-content:start;gap:8px;padding-left:24px}
.wa-fcol .wa-ph{padding-right:2px}
.wa-label{font-size:10.5px;font-weight:650;justify-self:start}
.wa-label em{margin-left:4px;font-style:normal;font-weight:500;color:var(--ember)}
.wa-input{padding:8px 10px;border:1px solid var(--wa-line);border-radius:7px;background:var(--inst-hi);font-size:11px}
.wa-input.is-error{border-color:var(--crim);box-shadow:0 0 0 3px rgba(var(--crim-rgb),.12)}
.wa-input.is-area{height:52px}
.wa-ph{color:var(--txt-faint)}
.wa-help{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--crim)}
.wa-help .wa-ico{width:12px;height:12px}
.wa-select{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--wa-line);border-radius:7px;background:var(--inst-hi);font-size:11px}
.wa-select em{font-style:normal;color:var(--txt-dim)}
.wa-opt{display:inline-flex;align-items:center;gap:7px;justify-self:start;font-size:11px}
.wa-cb{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:4px;border:1.5px solid var(--wa-line);background:var(--inst)}
.wa-cb.is-on{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.wa-cb .wa-ico{width:11px;height:11px;stroke-width:3}
.wa-rd{display:inline-block;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--wa-line);background:var(--inst)}
.wa-rd.is-on{border:4.5px solid var(--accent-fill)}
.wa-sw{position:relative;display:inline-block;width:30px;height:17px;border-radius:999px;background:var(--wa-ink)}
.wa-sw>i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--inst)}
.wa-sw.is-on{background:var(--accent-fill)}
.wa-sw.is-on>i{left:15px}
.wa-slider{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:10.5px}
.wa-track{position:relative;display:block;height:5px;border-radius:3px;background:var(--wa-ink)}
.wa-fill{position:absolute;inset:0 30% 0 0;border-radius:3px;background:var(--accent-fill)}
.wa-knob{position:absolute;top:50%;left:70%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--inst);border:2px solid var(--accent-fill)}

/* 길 찾기 */
.wa-tabs{display:flex;gap:2px;margin:-12px -12px 10px;padding:0 8px;border-bottom:1px solid var(--wa-line)}
.wa-tabs span{padding:9px 8px 7px;font-size:10.5px;color:var(--txt-dim);border-bottom:2px solid transparent}
.wa-tabs span.on{color:var(--txt);font-weight:650;border-bottom-color:var(--ember)}
.wa-acc{display:grid;font-size:10px}
.wa-acc>div{display:flex;justify-content:space-between;gap:6px;padding:7px 2px;border-bottom:1px solid var(--wa-line)}
.wa-acc>div.on{font-weight:650}
.wa-acc em{font-style:normal;color:var(--txt-dim)}
.wa-acc p{padding:2px 2px 6px;border-bottom:1px solid var(--wa-line)}
.wa-pager{display:flex;justify-content:center;gap:3px;margin-top:10px;font-size:10.5px}
.wa-pager span{display:grid;place-items:center;min-width:20px;height:20px;border-radius:5px;color:var(--txt-dim)}
.wa-pager span.on{background:var(--accent-fill);color:var(--on-accent);font-weight:700}
.wa-carousel{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center}
.wa-carousel>em{font-style:normal;font-size:15px;color:var(--txt-dim)}
.wa-slide{display:grid;align-items:end;height:84px;padding:8px;border-radius:8px;background:linear-gradient(150deg,rgba(var(--ember-rgb),.4),rgba(var(--amber-rgb),.2) 55%,rgba(var(--tag-sky-rgb),.2));font-style:normal;font-size:10px;font-weight:650}
.wa-dots{grid-column:1/-1;display:flex;justify-content:center;gap:4px;margin-top:4px}
.wa-dots i{width:5px;height:5px;border-radius:50%;background:var(--wa-ink)}
.wa-dots i.on{width:14px;border-radius:3px;background:var(--ember)}
.wa-stepper{display:flex;align-items:center;gap:4px;margin-bottom:10px;font-size:9.5px;color:var(--txt-dim)}
.wa-stepper span{display:grid;justify-items:center;gap:4px;white-space:nowrap}
.wa-stepper span i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--wa-line);font-style:normal;font-weight:700}
.wa-stepper span.done i{background:var(--green);border-color:var(--green);color:var(--inst)}
.wa-stepper span.done i .wa-ico{width:11px;height:11px;stroke-width:3}
.wa-stepper span.now{color:var(--txt);font-weight:650}
.wa-stepper span.now i{border-color:var(--ember);color:var(--ember);box-shadow:0 0 0 3px rgba(var(--ember-rgb),.15)}
.wa-stepper>b:not(.wa-pin){flex:1;height:2px;margin-bottom:16px;background:var(--wa-line)}

/* 상태와 피드백 */
.wa-win.is-feedback .wa-toolbar{padding:4px 0 14px}
.wa-win.is-feedback .wa-view{padding:12px 14px 14px 34px}
.wa-bell{position:relative;display:inline-grid;place-items:center;width:26px;height:26px;color:var(--txt-dim)}
.wa-bell .wa-ico{width:17px;height:17px}
.wa-badge{position:absolute;top:-3px;right:-5px;display:grid;place-items:center;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:var(--crim);color:rgb(var(--white-rgb));font-style:normal;font-size:9px;font-weight:700;box-shadow:0 0 0 2px var(--inst)}
.wa-badge>.wa-pin{top:-14px;right:-18px;left:auto}
.wa-avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,var(--grad-violet),var(--grad-teal));color:rgb(var(--white-rgb))}
.wa-chips{display:flex;gap:6px;margin-bottom:14px}
.wa-chips span{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;border:1px solid var(--wa-line);font-size:10.5px;color:var(--txt-dim)}
.wa-chips span.on{background:rgba(var(--ember-rgb),.14);border-color:rgba(var(--ember-rgb),.5);color:var(--ember);font-weight:650}
.wa-chips em{font-style:normal;margin-left:2px}
.wa-chips .wa-ico{width:11px;height:11px;stroke-width:3}
.wa-fb-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:center;margin-bottom:14px}
.wa-progress{display:grid;gap:6px;font-size:10.5px}
.wa-progress strong{color:var(--ember)}
.wa-progress .wa-fill{inset:0 36% 0 0}
.wa-spinbox{display:flex;align-items:center;gap:8px;justify-self:start;font-size:10.5px;color:var(--txt-dim)}
.wa-spinbox .wa-spin{width:16px;height:16px}
.wa-skel{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;margin-bottom:14px;padding:10px;border:1px solid var(--wa-line);border-radius:9px}
.wa-skel i{display:block;border-radius:4px;background:linear-gradient(90deg,var(--wa-ink-2),var(--wa-ink),var(--wa-ink-2));background-size:200% 100%;animation:wa-shimmer 1.6s linear infinite}
.wa-sk-img{height:44px}
.wa-skel span{display:grid;gap:6px}
.wa-skel span i{height:7px}
@keyframes wa-shimmer{to{background-position:-200% 0}}
.wa-empty{display:grid;justify-items:center;gap:5px;padding:16px 10px;border:1px dashed var(--wa-line);border-radius:10px;text-align:center}
.wa-empty>.wa-ico{width:26px;height:26px;color:var(--txt-faint);stroke-width:1.5}
.wa-empty strong{font-size:11.5px}
.wa-empty>span:not(.wa-btn){font-size:10px;color:var(--txt-dim)}
.wa-empty .wa-btn{margin-top:4px}

/* 디자인 요소 */
.wa-visual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.wa-vcell{padding:14px;border:1px solid var(--wa-line);border-radius:12px;background:var(--inst)}
.wa-type{display:grid;gap:3px;align-content:start}
.wa-type .t1{font-size:22px;font-weight:750;letter-spacing:-.03em;line-height:1.2}
.wa-type .t2{font-size:15px;font-weight:650}
.wa-type .t3{font-size:11.5px}
.wa-type .t4{font-size:9.5px;color:var(--txt-dim)}
.wa-lh{display:grid;gap:8px}
.wa-lh p{font-size:10.5px}
.wa-lh small{display:block;font:500 9px var(--wa-mono);color:var(--tag-peach)}
.wa-lh .tight{line-height:1.05}
.wa-lh .loose{line-height:1.9}
.wa-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:9.5px;text-align:center;color:var(--txt-dim)}
.wa-swatches span{display:grid;gap:5px}
.wa-swatches i{display:block;height:38px;border-radius:8px;border:1px solid var(--wa-line)}
.c-accent{background:var(--accent-fill)}.c-surface{background:var(--inst-2)}.c-ink{background:var(--txt)}.c-error{background:var(--crim)}
.wa-contrast{display:grid;gap:8px;align-content:center}
.wa-contrast span{padding:9px 10px;border-radius:7px;background:var(--inst-2);font-size:13px;font-weight:650}
.wa-contrast .good{color:var(--txt)}
.wa-contrast .bad{color:rgba(var(--ink-rgb),.24)}
.wa-radii,.wa-elev{display:flex;justify-content:space-around;align-items:end;gap:10px;min-height:86px}
.wa-radii>span,.wa-elev>span{display:grid;justify-items:center;gap:8px}
.wa-radii small,.wa-elev small{font:500 9.5px var(--wa-mono);color:var(--txt-dim)}
.wa-radii i{width:46px;height:46px;background:rgba(var(--ember-rgb),.22);border:1.5px solid var(--ember)}
.wa-radii .r0{border-radius:0}.wa-radii .r1{border-radius:10px}.wa-radii .r2{border-radius:50%}
.wa-elev i{width:46px;height:46px;border-radius:9px;background:var(--inst-2);border:1px solid var(--wa-line)}
.wa-elev .e0{box-shadow:none;background:var(--well)}
.wa-elev .e1{box-shadow:0 3px 8px -2px rgba(var(--shade-rgb),.35)}
.wa-elev .e2{box-shadow:0 18px 30px -6px rgba(var(--shade-rgb),.75),0 0 0 1px var(--hilite);transform:translateY(-8px)}
.wa-icons{display:flex;justify-content:space-around;align-items:center;min-height:76px}
.wa-icons .wa-ico{width:24px;height:24px;stroke-width:1.8}
.wa-divlist{display:grid;align-content:center;font-size:11px}
.wa-divlist>span{padding:4px 2px}
.wa-divlist>small{padding:4px 2px 0;font:600 9.5px var(--wa-mono);color:var(--tag-peach)}
.wa-divlist>.wa-hr{margin:8px 0}
.wa-hr{display:block;height:1px;background:var(--wa-line)}
.wa-hr .wa-pin{top:-10px}

@media (prefers-reduced-motion:reduce){.wa-spin,.wa-skel i{animation:none}.wa-pin,.wa-terms li,.wa-stage [data-part]{transition:none}}
@media (max-width:1100px){
  .wa-plate-body{grid-template-columns:1fr}
  .wa-fig{position:static}
}
@media (max-width:760px){
  .wa-ask{grid-template-columns:1fr}
  .wa-ask-arrow{justify-self:center;transform:rotate(90deg)}
  .wa-plate{padding:20px 16px;border-radius:20px}
  .wa-plate-head{gap:12px}
  .wa-plate-n{font-size:26px}
  .wa-stage{padding:26px 16px;overflow-x:auto}
  .wa-tiles,.wa-tiles.is-nav,.wa-visual{grid-template-columns:1fr}
  .wa-form-cols{grid-template-columns:1fr}
  .wa-states{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wa-compare{padding:20px 16px}
  .wa-win.is-transient .wa-toolbar{flex-wrap:wrap}
}