/* 시간표 만들기(weekly-timetable) — 과목 붓 + 주간 시간표 판. 작업면 컨테이너 wttw:
   시간표 판은 늘 가로 전체(셸 본문 폭: 화면 1280 → 648, 1440 → 800, 1920 → 908), 그 아래 600 이상 [과목·일정 고르기 칸 | 주간 합계], 600 미만 한 줄.
   520 이하는 교시 칸(왼쪽 열)을 좁혀 시각을 두 줄로, 칸 안 장소를 숨긴다. 칸 색은 사용자가 고른 색 그대로(다크에서도 글자는 진한 색).
   강조색은 지금 칸·지금 선·끄는 미리 보기·오류에만. */
.wtt{container:wttw / inline-size}
.wtt [hidden]{display:none !important}
.wtt input[type="text"],.wtt input[type="time"]{text-align:left}
.wtt input[type="time"]{font-variant-numeric:tabular-nums}

/* ---------- 머리 ---------- */
.wtt-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding:14px 16px 13px;border-bottom:1px solid var(--soft)}
.wtt-bar{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 14px}
.wtt-tplw{display:flex;flex-direction:column;gap:5px;min-width:0}
.wtt-tpl{display:flex;flex-wrap:wrap;gap:4px}
.wtt-tpl button{height:32px;padding:0 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);cursor:pointer;white-space:nowrap}
.wtt-tpl button:hover{background:var(--btn)}
.wtt-tpl .is-blank{border-style:dashed;color:var(--muted)}
.wtt-act{display:flex;flex-wrap:wrap;gap:6px}
.wtt-act .v2-btn{white-space:nowrap}

/* ---------- 보기 줄·설정 ---------- */
.wtt-view{display:flex;flex-wrap:wrap;gap:10px 12px;padding:12px 16px;border-bottom:1px solid var(--soft)}
.wtt-segw{display:flex;flex-direction:column;gap:5px;min-width:0}
.wtt-segw .v2-seg button{white-space:nowrap}
.wtt-set{border-bottom:1px solid var(--soft)}
.wtt-set summary{display:flex;align-items:center;gap:8px;padding:10px 16px;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);cursor:pointer;list-style:none;font-variant-numeric:tabular-nums}
.wtt-set summary::-webkit-details-marker{display:none}
.wtt-set summary::before{content:"";flex:none;width:7px;height:7px;margin:0 3px 2px 1px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(-45deg);transition:transform .2s var(--ease,ease)}
.wtt-set[open] summary::before{transform:rotate(45deg)}
.wtt-set summary:hover{background:var(--wash)}
.wtt-setb{padding:2px 16px 14px}
.wtt-rule{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.wtt-sel{width:100%;height:var(--v2-ctl,42px);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.wtt-tabl{margin:12px 0 6px}
.wtt-btab{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:6px 18px}
.wtt-btab li{display:grid;grid-template-columns:4.4em minmax(136px,1fr) auto minmax(136px,1fr);align-items:center;gap:6px;font-family:var(--sans)}
.wtt-btab b{font-size:12.5px;font-weight:700;color:var(--ink)}
.wtt-btab i{font-style:normal;color:var(--muted)}
.wtt-note{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.wtt-err{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--accent)}

/* ---------- 과목 붓 ---------- */
.wtt-brushw{display:grid;gap:6px;padding:12px 16px 0}
.wtt-brush{display:flex;flex-wrap:wrap;gap:5px}
.wtt-sb,.wtt-er,.wtt-add{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);cursor:pointer;white-space:nowrap;max-width:100%}
.wtt-sb:hover,.wtt-er:hover,.wtt-add:hover{background:var(--btn)}
.wtt-sb i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(26,18,8,.16)}
.wtt-sb span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wtt-sb small{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.wtt-sb[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:color-mix(in srgb,var(--c) 40%,var(--paper))}
.wtt-sb[aria-pressed="true"] small{color:var(--ink)}
.wtt-er svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.wtt-er[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.wtt-add{border-style:dashed;color:var(--muted)}
.wtt-add span{font-size:15px;line-height:1}
.wtt-add:disabled{opacity:.45;cursor:not-allowed}
.wtt-hint{margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}

/* ---------- 시간표 판 ---------- */
.wtt-board{--wtt-rh:58px;--wtt-hh:52px;--lc:88px;padding:10px 16px 0}
.wtt-grid{display:grid;grid-template-columns:var(--lc) repeat(var(--nd,5),minmax(0,1fr));border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden;font-family:var(--sans);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.wtt-grid.is-t{--lc:54px}
.wtt-corner,.wtt-dh{grid-row:1;display:grid;place-items:center;height:36px;background:var(--wash);border-bottom:1px solid var(--line)}
.wtt-corner{grid-column:1;font-size:11px;font-weight:600;color:var(--muted)}
.wtt-dh{border-left:1px solid var(--soft);font-size:13px;color:var(--ink)}
.wtt-dh b{position:relative;font-weight:750}
.wtt-dh.is-today b{color:var(--accent)}
.wtt-dh.is-today b::after{content:"";position:absolute;left:50%;bottom:-5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)}
.wtt-pl{grid-column:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:var(--wtt-rh);padding:3px 4px;border-top:1px solid var(--soft);text-align:center}
.wtt-pl b{font-size:12.5px;font-weight:750;color:var(--ink)}
.wtt-pl span{font-size:10.5px;font-weight:550;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.wtt-pl i,.wtt-pl em{font-style:normal}
.wtt-brk{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:8px;height:24px;border-top:1px solid var(--soft);background:repeating-linear-gradient(135deg,var(--wash) 0 6px,transparent 6px 12px);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.wtt-brk b{font-weight:700;color:var(--ink)}
.wtt-fl,.wtt-fd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:40px;padding:4px 2px;border-top:1px solid var(--line);background:var(--wash);text-align:center;font-variant-numeric:tabular-nums}
.wtt-fl{grid-column:1;font-size:11px;font-weight:650;color:var(--muted)}
.wtt-fd{border-left:1px solid var(--soft);min-width:0}
.wtt-fd b{font-size:12px;font-weight:750;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.wtt-fd small{font-size:10.5px;font-weight:550;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}
.wtt-fd small:empty{display:none}
.wtt-fd.is-free b{font-weight:600;color:var(--muted)}
/* 교시 칸: 바탕은 ::before(색), 글자는 그 위. 이어지는 같은 과목은 사이를 붙인다 */
.wtt-c{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:var(--wtt-rh);padding:6px 5px;border:0;border-top:1px solid var(--soft);border-left:1px solid var(--soft);background:none;font-family:var(--sans);color:#2a2117;text-align:center;cursor:pointer;touch-action:manipulation}
.wtt-c::before{content:"";position:absolute;inset:3px;border-radius:7px;background:var(--c);opacity:0}
.wtt-c.is-on::before{opacity:1}
.wtt-c.is-cont::before{top:-1px;border-top-left-radius:0;border-top-right-radius:0}
.wtt-c.is-join::before{bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.wtt-c.is-cont{border-top-color:transparent}
.wtt-cn,.wtt-cp{position:relative;max-width:100%}
.wtt-cn{font-size:13px;font-weight:750;line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.wtt-cp{font-size:10.5px;font-weight:550;opacity:.68;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtt-cp:empty{display:none}
.wtt-grid[data-brush] .wtt-c:not(.is-on):hover::before{opacity:.38;background:var(--bc)}
.wtt-grid[data-brush="x"] .wtt-c.is-on:hover::before{background:repeating-linear-gradient(135deg,var(--c) 0 5px,var(--paper) 5px 9px)}
.wtt-c:focus-visible{outline:2px solid var(--ink);outline-offset:-3px;z-index:1}
.wtt-c.is-now::after{content:"";position:absolute;inset:2px;border:2px solid var(--accent);border-radius:8px;pointer-events:none}
.wtt-c.is-pop::before{animation:wtt-fill .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes wtt-fill{from{clip-path:inset(0 100% 0 0 round 7px)}to{clip-path:inset(0 0 0 0 round 7px)}}
/* 시각형 */
.wtt-axis,.wtt-col{grid-row:2;position:relative;height:calc(var(--hrs) * var(--wtt-hh))}
.wtt-axis{grid-column:1}
.wtt-axis span{position:absolute;right:7px;top:calc(var(--i) * var(--wtt-hh) + 3px);font-size:10.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}
.wtt-axis span:last-child{display:none}
.wtt-col{border-left:1px solid var(--soft);background-image:linear-gradient(to bottom,var(--soft) 1px,transparent 1px),linear-gradient(to bottom,transparent calc(var(--wtt-hh) / 2),color-mix(in srgb,var(--soft) 55%,transparent) calc(var(--wtt-hh) / 2),transparent calc(var(--wtt-hh) / 2 + 1px));background-size:100% var(--wtt-hh);cursor:crosshair}
.wtt-col.is-today{background-color:color-mix(in srgb,var(--accent) 4%,transparent)}
.wtt-b{position:absolute;left:3px;right:3px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:4px 6px;border:0;border-radius:7px;background:var(--c);font-family:var(--sans);color:#2a2117;text-align:left;overflow:hidden;cursor:grab;touch-action:manipulation;transition:top .18s var(--ease,ease),height .18s var(--ease,ease)}
.wtt-bn{max-width:100%;font-size:12.5px;font-weight:750;line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.wtt-bt,.wtt-bp{max-width:100%;font-size:10.5px;font-weight:550;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtt-bt{font-variant-numeric:tabular-nums;white-space:normal;line-height:1.25}
.wtt-bp:empty{display:none}
.wtt-b.is-sm .wtt-bp{display:none}
.wtt-b.is-md .wtt-bp{display:none}
.wtt-b.is-sm .wtt-bn{-webkit-line-clamp:1}
.wtt-b.is-sm .wtt-bt{white-space:nowrap}
.wtt-b.is-xs{padding:1px 6px;justify-content:center}
.wtt-b.is-xs .wtt-bt,.wtt-b.is-xs .wtt-bp{display:none}
.wtt-b.is-xs .wtt-bn{font-size:11px;-webkit-line-clamp:1}
.wtt-b:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.wtt-b.is-sel{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink);z-index:2}
.wtt-b.is-drag{transition:none;z-index:3;cursor:grabbing;box-shadow:0 6px 16px rgba(26,18,8,.2)}
.wtt-b.is-bad{outline:2px dashed var(--accent);outline-offset:1px;opacity:.8}
/* 새 일정은 위에서 아래로 그려진다. clip-path는 누르는 영역도 잘라 버리므로 mask(누르기 영향 없음)로 */
.wtt-b.is-new{-webkit-mask:linear-gradient(#000,#000) top / 100% 0% no-repeat;mask:linear-gradient(#000,#000) top / 100% 0% no-repeat;animation:wtt-grow .38s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wtt-grow{to{-webkit-mask-size:100% 100%;mask-size:100% 100%}}
.wtt-hd{position:absolute;left:0;right:0;height:10px;cursor:ns-resize;touch-action:none;opacity:0}
.wtt-hd--s{top:0}
.wtt-hd--e{bottom:0}
.wtt-hd::after{content:"";position:absolute;left:50%;top:3px;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:rgba(26,18,8,.5)}
.wtt-b:hover .wtt-hd,.wtt-b.is-sel .wtt-hd{opacity:1}
@media (pointer:coarse){.wtt-hd{height:18px}.wtt-hd::after{top:7px}}
.wtt-gh{position:absolute;left:3px;right:3px;z-index:3;padding:3px 6px;border:2px dashed var(--accent);border-radius:7px;background:var(--accent-wash);font-size:11px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;pointer-events:none}
.wtt-gh.is-bad{opacity:.45}
.wtt-nowl{position:absolute;left:-1px;right:0;z-index:4;height:2px;margin-top:-1px;background:var(--accent);pointer-events:none}
.wtt-nowl::before{content:"";position:absolute;left:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* 칸 모양: 색 띠(연한 바탕 + 왼쪽 띠, 잉크 절약) · 흑백(테두리만) */
.wtt-grid{--bk:color-mix(in srgb,var(--c) 62%,#000)}
html[data-theme="dark"] .wtt-grid{--bk:var(--c)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .wtt-grid{--bk:var(--c)}}
.wtt-grid.is-band .wtt-c::before,.wtt-grid.is-band .wtt-b{background:color-mix(in srgb,var(--c) 32%,var(--paper));box-shadow:inset 5px 0 0 var(--bk)}
.wtt-grid.is-band .wtt-c,.wtt-grid.is-band .wtt-b{color:var(--ink)}
.wtt-grid.is-band .wtt-b.is-sel{box-shadow:inset 5px 0 0 var(--bk),0 0 0 2px var(--card),0 0 0 4px var(--ink)}
.wtt-grid.is-mono .wtt-c::before,.wtt-grid.is-mono .wtt-b{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.wtt-grid.is-mono .wtt-c,.wtt-grid.is-mono .wtt-b{color:var(--ink)}
.wtt-grid.is-mono .wtt-b.is-sel{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 2px var(--card),0 0 0 4px var(--ink)}
.wtt-grid.is-band .wtt-hd::after,.wtt-grid.is-mono .wtt-hd::after{background:var(--muted)}
.wtt-now{margin:0;padding:8px 16px 12px;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- 아래: 고르기 칸 | 주간 합계 ---------- */
.wtt-low{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--soft);border-top:1px solid var(--soft)}
.wtt-low > *{min-width:0;padding:13px 16px 14px;background:var(--card)}
.wtt-snone,.wtt-bnone p{margin:0;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--ink)}
.wtt-sh{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.wtt-sh .v2-label{flex:none}
.wtt-sdot{flex:none;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(26,18,8,.16)}
.wtt-sh small{flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.wtt-del{flex:none;padding:2px 0;border:0;background:none;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.wtt-f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:8px}
.wtt-picks{display:grid;gap:5px;margin-top:10px}
.wtt-swr{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.wtt-sw{display:flex;flex-wrap:wrap;gap:4px}
.wtt-sw button,.wtt-cc{width:23px;height:23px;padding:0;border-radius:50%;cursor:pointer}
.wtt-sw button{border:1px solid rgba(26,18,8,.22);background:var(--c)}
.wtt-sw button[aria-pressed="true"],.wtt-cc.is-on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
.wtt-cc{position:relative;display:block;margin-left:3px;background:conic-gradient(#f2a3a3,#f6d38a,#c8e39c,#9fd8cf,#a9c4f0,#d2b0ec,#f2a3a3);border:1px solid rgba(26,18,8,.22)}
.wtt-cc input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.wtt-blk{padding:11px 16px 13px;border-top:1px solid var(--soft);background:var(--wash)}
.wtt-bform .wtt-sh{margin-bottom:8px}
.wtt-bform .wtt-sh small{text-align:left}
.wtt-badd{flex:none;height:28px;margin-left:6px;white-space:nowrap}
.wtt-bsame{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px}
.wtt-bnone{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.wtt-bnone p{flex:1 1 220px;font-size:12.5px;color:var(--muted)}
.wtt-bnone .v2-btn{flex:none;white-space:nowrap}
.wtt-f4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.wtt-same{display:flex;flex-wrap:wrap;gap:4px}
.wtt-same button{min-width:34px;height:32px;padding:0 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--muted);cursor:pointer}
.wtt-same button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.wtt-same button:disabled{cursor:default;opacity:1;box-shadow:inset 0 0 0 1px var(--ink)}
/* 한눈에(시각형) */
.wtt-gll{margin:12px 0 4px}
.wtt-gl{margin:0;font-family:var(--sans)}
.wtt-gl div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;padding:4px 0;border-top:1px solid var(--soft)}
.wtt-gl dt{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.wtt-gl dd{margin:0 0 0 auto;font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
/* 주간 합계: 과목 카드(이름·횟수 / 막대·시간). 넓으면 여러 열 */
.wtt-totw{display:flex;flex-direction:column}
.wtt-th{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0 0 4px}
.wtt-th small{font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.wtt-tnote{flex-basis:100%;font-weight:500 !important;color:var(--muted) !important}
.wtt-tnote:empty{display:none}
.wtt-tot{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:0 14px;align-content:start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.wtt-tot li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;grid-template-areas:"dot name k" "bar bar m";align-items:center;gap:3px 6px;padding:6px 0 7px;border-top:1px solid var(--soft);font-family:var(--sans)}
.wtt-tot li > i{grid-area:dot;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(26,18,8,.16)}
.wtt-tot b{grid-area:name;min-width:0;font-size:12.5px;font-weight:650;line-height:1.3;color:var(--ink);overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.wtt-tot li > small{grid-area:k;font-size:11.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.wtt-tb{grid-area:bar;display:block;height:7px;border-radius:4px;background:var(--wash);overflow:hidden}
.wtt-tb span{display:block;height:100%;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(26,18,8,.1);transition:width .45s var(--ease,ease)}
.wtt-tot em{grid-area:m;font-style:normal;font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.wtt-tot .wtt-tnone{display:block;grid-column:1 / -1;padding:6px 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
/* ---------- 아래 줄 ---------- */
.wtt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;padding:10px 16px 11px;border-top:1px solid var(--soft)}
.wtt-status{flex:1 1 300px;margin:0}
.wtt-foot .v2-btn{height:28px}
.wtt-store{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.wtt-linkbox{padding:0 16px 12px}

/* ---------- 너비별 배치 ---------- */
@container wttw (min-width:600px){
  .wtt-low{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
}
@container wttw (min-width:640px){
  .wtt-f4{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
}
@container wttw (min-width:760px){
  .wtt-board{--wtt-rh:62px;--lc:96px}
  .wtt-cn{font-size:13.5px}
}
@container wttw (max-width:560px){
  .wtt-head{grid-template-columns:minmax(0,1fr)}
  .wtt-bar{flex-direction:column;align-items:stretch}
  .wtt-act .v2-btn{flex:1 1 0;justify-content:center}
}
@container wttw (max-width:520px){
  .wtt-board{--wtt-rh:54px;--wtt-hh:46px;--lc:46px;padding:10px 10px 0}
  .wtt-grid.is-t{--lc:40px}
  .wtt-pl b{font-size:11.5px}
  .wtt-pl span{display:flex;flex-direction:column;font-size:9.5px;line-height:1.25}
  .wtt-pl i{display:none}
  .wtt-c{padding:5px 2px}
  .wtt-cn{font-size:12px}
  .wtt-cp{display:none}
  .wtt-b{left:2px;right:2px;padding:3px 4px}
  .wtt-bn{font-size:11.5px}
  .wtt-axis span{right:4px;font-size:9.5px}
  .wtt-brk{font-size:10.5px}
}
@container wttw (max-width:400px){
  .wtt-act .v2-btn{padding:0 8px;gap:4px}
  .wtt-f2,.wtt-f4{grid-template-columns:minmax(0,1fr)}
  .wtt-btab li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 8px}
  .wtt-btab b{grid-column:1 / -1}
  .wtt-btab i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wtt-c.is-pop::before,.wtt-b.is-new{animation:none}
  .wtt-b,.wtt-tb span,.wtt-set summary::before{transition:none}
}