/* 국제 신발 사이즈 변환기 — 작업면(구분·찾는 방법 → 입력 → 결과 타일 → 브랜드별 사다리 → 발 길이 자). accent는 '지금 사이즈' 표시 한 가지(사다리 칸·자 눈금·발끝 선) */
.ss-work{container:ss / inline-size}
.ss-work .v2-status:empty{display:none}
.ss-top{padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.ss-segs{display:flex;flex-wrap:wrap;gap:10px 24px;margin-bottom:12px}
.ss-ctl{display:flex;flex-direction:column;gap:6px}
.ss-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:10px 12px;align-items:start}
.ss-form[hidden]{display:none}
.ss-form--foot{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.ss-select{display:block;width:100%;max-width:100%;height:var(--v2-ctl,42px);padding:0 6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums lining-nums;text-overflow:ellipsis}
.ss-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ss-step{display:grid;grid-template-columns:var(--v2-ctl,42px) minmax(0,1fr) var(--v2-ctl,42px);gap:6px}
.ss-step .v2-btn{justify-content:center;padding:0;font-size:18px;font-weight:600}
.ss-step .v2-btn:disabled{opacity:.4;cursor:default}
.ss-step .ss-select{text-align:center;text-align-last:center}
.ss-pair{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:6px}
.ss-fhelp{margin:0;align-self:end;min-height:var(--v2-ctl,42px);display:flex;align-items:center;font-size:12.5px;line-height:1.5;color:var(--muted)}

.ss-out{padding:14px 18px;border-bottom:1px solid var(--soft)}
.ss-ctx{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 10px}
.ss-date{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.ss-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ss-tiles--k{grid-template-columns:repeat(4,minmax(0,1fr))}
.ss-tiles li{min-width:0}
.ss-tiles button{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px 9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);text-align:left;font-family:var(--sans);transition:background var(--ease),border-color var(--ease),box-shadow var(--ease)}
.ss-tiles button:hover{background:var(--btn)}
.ss-tiles button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ss-tn{font-size:11.5px;font-weight:650;letter-spacing:.02em;color:var(--muted)}
.ss-tv{font-size:clamp(17px,2.9cqi,23px);font-weight:750;line-height:1.15;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:normal;word-break:keep-all}
.ss-tv small{font-size:12px;font-weight:650;color:var(--muted)}
.ss-ts{font-size:11.5px;color:var(--muted);line-height:1.35}
.ss-tiles .is-diff .ss-ts{color:var(--ink);font-weight:600}
.ss-tiles .ss-tmm .ss-ts{color:var(--muted);font-weight:400}
.ss-tiles li:not(.ss-tmm) .is-diff .ss-ts::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border:1.5px solid var(--ink);border-radius:50%;vertical-align:0}
.ss-sentence{margin:12px 0 0}
.ss-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}

.ss-lad{padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.ss-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 8px}
.ss-hint{font-size:12px;color:var(--muted)}
.ss-ladt{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums lining-nums}
.ss-ladt th,.ss-ladt td{height:34px;padding:0 2px;text-align:center;border-bottom:1px solid var(--soft);font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.ss-ladt thead th{height:38px;border-bottom:1px solid var(--line)}
.ss-ladt .ss-corner,.ss-ladt tbody th{width:78px;text-align:left;font-size:11.5px;font-weight:650;color:var(--muted)}
.ss-ladt thead button{width:100%;max-width:58px;height:28px;padding:0;border:1px solid transparent;border-radius:var(--radius);background:none;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ss-ladt thead button:hover{background:var(--btn)}
.ss-ladt thead button.is-on{background:var(--fill);color:var(--on-fill)}
.ss-ladt td{transition:background var(--ease),color var(--ease),box-shadow var(--ease)}
.ss-ladt td.is-on{background:var(--accent-wash);color:var(--accent);font-weight:800;box-shadow:inset 0 0 0 1.5px var(--accent)}
.ss-ladt td.is-near{box-shadow:none;outline:1.5px dashed var(--accent);outline-offset:-3px}
.ss-ladt tr.is-off th,.ss-ladt tr.is-off td{opacity:.42}
.ss-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.ss-rul{padding:14px 18px 14px}
.ss-rulw{position:relative;height:190px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ss-rulw[role="slider"]{cursor:grab}
.ss-rulw.is-drag{cursor:grabbing}
.ss-rulw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ss-rulw svg{display:block}
.ss-tape{transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.ss-rulw.is-drag .ss-tape{transition:none}
.ss-trk{stroke:var(--soft);stroke-width:1}
.ss-tk line{stroke:var(--muted);stroke-width:1.2}
.ss-tkl{font-family:var(--sans);font-size:10.5px;font-weight:600;fill:var(--muted);text-anchor:middle}
.ss-tkl.is-minor{display:none}
.ss-tk.is-on line{stroke:var(--accent);stroke-width:2.6}
.ss-tk.is-on .ss-tkl{display:inline;fill:var(--accent);font-size:12px;font-weight:800}
.ss-mt{stroke:var(--muted);stroke-width:1;opacity:.5}
.ss-mt.is-major{opacity:1}
.ss-mbase{stroke:var(--line);stroke-width:1}
.ss-mtl{font-family:var(--mono);font-size:10px;fill:var(--muted);text-anchor:middle}
.ss-mtl.is-mid{opacity:.65}
.ss-sole{stroke-width:1.2;stroke-linejoin:round}
.ss-fsf{stop-color:color-mix(in srgb,var(--ink) 9%,var(--paper))}
.ss-fsl{stop-color:var(--line)}
.ss-nail{fill:none;stroke:var(--line);stroke-width:1}
.ss-toeline{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 3}
.ss-tag rect{fill:var(--accent)}
.ss-tag text{font-family:var(--sans);font-size:11.5px;font-weight:700;fill:var(--paper);text-anchor:middle;font-variant-numeric:tabular-nums}
.ss-bn rect{fill:var(--paper)}
.ss-bn text{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--ink)}
.ss-rempty{display:none}
.ss-rulw.is-empty svg{visibility:hidden}
.ss-rulw.is-empty .ss-rempty{display:grid;place-items:center;position:absolute;inset:0;margin:0;padding:0 16px;text-align:center;font-size:13px;color:var(--muted)}
.ss-leg{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.ss-tape,.ss-ladt td,.ss-tiles button{transition:none}}

@container ss (max-width:639px){
  .ss-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ss-tiles .ss-tmm{grid-column:span 2}
  .ss-tiles--k{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ss-tiles--k .ss-tmm{grid-column:auto}
}
@container ss (max-width:459px){
  .ss-top,.ss-out,.ss-lad,.ss-rul{padding-left:14px;padding-right:14px}
  .ss-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-tiles .ss-tmm{grid-column:1 / -1}
  .ss-tiles .ss-tmm button{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .ss-tiles .ss-tmm .ss-tn{flex:0 0 100%}
  .ss-tiles--k{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-tiles--k .ss-tmm{grid-column:auto}
  .ss-tiles--k .ss-tmm button{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}
  .ss-tiles--k .ss-tmm .ss-tn{flex:none}
  .ss-ladt .ss-corner,.ss-ladt tbody th{width:52px}
}
@container v2in (max-width:519px){
  .ss-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ss-form > .v2-f:last-child{grid-column:1 / -1}
  .ss-step{grid-template-columns:34px minmax(0,1fr) 34px;gap:4px}
  .ss-step .ss-select{padding:0 2px}
  .ss-form--foot{grid-template-columns:minmax(0,1fr)}
  .ss-fhelp{min-height:0}
}