/* 컨트롤 — 단추 · 링크 · 입력칸 · 칩 · 고르기 · 켜고끄기 · 묶음단추 · 하위 탭 · 거르기 줄 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-m);border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font-size:var(--t-md);font-weight:750;text-decoration:none;white-space:nowrap;transition:background var(--fast),color var(--fast),transform var(--fast) var(--ease)}
.btn:hover{background:#000}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper-2)}
.btn.signal{background:var(--signal);border-color:var(--signal);color:#fff}
.btn.signal:hover{background:var(--signal-ink);border-color:var(--signal-ink)}
.btn.danger{background:transparent;color:var(--signal-ink);border-color:var(--signal-ink)}
.btn.wide{width:100%}
.btn svg{width:18px;height:18px;flex:none}
.link{background:none;border:0;padding:2px 0;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:4px;text-decoration-thickness:1.5px}
.link:hover{text-decoration-color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:var(--t-sm);font-weight:750}
.field small{font-size:var(--t-xs);color:var(--ink-3);line-height:1.55}
.in{width:100%;min-height:44px;background:var(--sheet);border:1.5px solid var(--rule);border-radius:var(--r-m);padding:9px 12px;font-size:var(--t-md);font-weight:600;outline:none;transition:border-color var(--fast)}
.in:hover{border-color:var(--rule-2)}
.in:focus{border-color:var(--ink)}
.in::placeholder{color:var(--ink-3);font-weight:500}
.msg{min-height:1.4em;font-size:var(--t-sm);font-weight:700;white-space:pre-line}
.msg.bad{color:var(--signal-ink)}
.msg.good{color:var(--up)}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-5)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid var(--rule);background:transparent;border-radius:999px;padding:6px 14px;font-size:var(--t-sm);font-weight:700;color:var(--ink-2);white-space:nowrap;transition:border-color var(--fast),background var(--fast),color var(--fast)}
.chip:hover{border-color:var(--ink-2);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pick{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:650;color:var(--ink-3)}
.pick select{appearance:none;-webkit-appearance:none;min-height:36px;border:1.5px solid var(--rule);border-radius:999px;background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2317140f' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center/10px;padding:5px 32px 5px 13px;font-size:var(--t-sm);font-weight:700;color:var(--ink);max-width:220px}
.pick select:hover{border-color:var(--ink-2)}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:700;color:var(--ink-2);cursor:pointer;user-select:none}
.toggle input{appearance:none;-webkit-appearance:none;width:34px;height:20px;border-radius:999px;background:var(--rule-2);position:relative;cursor:pointer;transition:background var(--fast);flex:none}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform var(--fast) var(--ease)}
.toggle input:checked{background:var(--ink)}
.toggle input:checked::after{transform:translateX(14px)}
.count{font:600 var(--t-sm)/1 var(--num);color:var(--ink-3);margin-left:auto}
.seg{display:inline-flex;border:1.5px solid var(--rule);border-radius:var(--r-m);overflow:hidden}
.seg button{border:0;background:none;padding:6px 12px;font-size:var(--t-sm);font-weight:700;color:var(--ink-3)}
.seg button+button{border-left:1.5px solid var(--rule)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.more{display:block;margin:var(--sp-6) auto 0}
.subnav{display:flex;gap:var(--sp-5);overflow-x:auto;scrollbar-width:none;margin:-8px 0 var(--sp-6);border-bottom:1px solid var(--rule)}
.subnav::-webkit-scrollbar{display:none}
.subnav button{flex:none;border:0;background:none;padding:10px 0 12px;font-size:var(--t-md);font-weight:700;color:var(--ink-3);border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap}
.subnav button:hover{color:var(--ink)}
.subnav button[aria-selected=true]{color:var(--ink);font-weight:850;border-bottom-color:var(--signal)}
/* 넘치는 탭 줄 — 더 있는 쪽 끝을 흐리게(scrollFade.js 가 fade-l · fade-r 를 붙인다) */
.subnav{--fade:48px;scroll-padding-inline:var(--fade)}
.subnav.fade-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--fade)),transparent)}
.subnav.fade-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to left,#000 calc(100% - var(--fade)),transparent)}
.subnav.fade-l.fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
@media (max-width:1023px){
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter);gap:8px}
  .filters::-webkit-scrollbar{display:none}
  .filters>*{flex:none}
  .pick{gap:4px;font-size:var(--t-xs)}
  .pick select{max-width:none}
  .count{order:-1;margin:0 4px 0 0}
  .chips{flex-wrap:nowrap}
}