/* 글자 간격 조절기 전용 CSS (2026-10-22). 자간 시험대: 예시 띠 → 글꼴 막대 → [실제 크기 견본 | 확대 투시] → 자간 눈금자 → [다른 프로그램 값 | CSS] → [비교 사다리 | 크기별 기준].
   작업면 600px 미만이면 견본·투시를 한 열로, 760px 이상이면 환산표·CSS와 사다리·그래프를 두 열로. accent는 확대 투시의 자간 자리와 그래프의 지금 값. 공용 부품은 assets/v2.css */
.lsa{container:lsawork / inline-size}
.lsa-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 10px}
.lsa-hint{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}
.lsa-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}
.lsa-select{display:block;width:100%;max-width:100%;height:var(--v2-ctl,42px);padding:0 8px;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;text-overflow:ellipsis}
.lsa-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 예시 띠 */
.lsa-pre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.lsa-pre .v2-seg button{height:auto;min-height:30px;padding:4px 10px;white-space:nowrap}

/* 글꼴 막대: 넓으면 한 줄 4칸(글꼴 | 크기 | 줄 간격 | 굵기), 좁으면 글꼴 / 크기 | 줄 간격 / 굵기 */
.lsa-bar{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.1fr);gap:10px 12px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.lsa-cf{grid-column:1 / -1}
.lsa-cf small{display:block;margin-top:5px}
.lsa-cin input{text-align:left}
@container lsawork (max-width:560px){ .lsa-bar{grid-template-columns:repeat(2,minmax(0,1fr))} .lsa-ff,.lsa-fw{grid-column:1 / -1} }

/* 실제 크기 견본 | 확대 투시 */
.lsa-stage{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.lsa-spec,.lsa-lens{padding:14px 18px 16px;min-width:0;display:flex;flex-direction:column}
.lsa-lens{border-left:1px solid var(--soft)}
.lsa-spec textarea{flex:1 1 auto;display:block;width:100%;min-height:96px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);resize:vertical;overflow-wrap:anywhere;outline:0;transition:border-color var(--ease),box-shadow var(--ease)}
.lsa-spec textarea:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.lsa-keys{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.lsa-keys i{display:inline-block;width:12px;height:12px;margin-left:4px}
.lsa-keys i:first-child{margin-left:0}
.lsa-keys .k-pos,.lsa-marks .g.pos{background:repeating-linear-gradient(135deg,var(--accent) 0 1.5px,transparent 1.5px 4.5px);box-shadow:inset 0 0 0 1px var(--accent)}
.lsa-keys .k-neg,.lsa-marks .g.neg{background:color-mix(in srgb,var(--accent) 32%,transparent);box-shadow:inset 0 0 0 1px var(--accent)}
.lsa-lbox{position:relative;flex:1 1 auto;display:flex;align-items:center;min-height:132px;padding:10px 14px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.lsa-lwrap{position:relative;display:block}
.lsa-ltxt{white-space:pre;line-height:1.3;color:var(--ink)}
.lsa-marks{position:absolute;inset:0;pointer-events:none}
.lsa-marks i{position:absolute;display:block}
.lsa-marks .t{width:0;border-left:1px dashed var(--line)}
.lsa-marks .g.end{opacity:.5;box-shadow:inset 0 0 0 1px var(--accent),0 0 0 1px var(--paper)}
@container lsawork (max-width:600px){ .lsa-stage{grid-template-columns:minmax(0,1fr)} .lsa-lens{border-left:0;border-top:1px solid var(--soft)} .lsa-lbox{min-height:112px} }

/* 자간 눈금자 */
.lsa-val{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr);gap:8px 26px;align-items:center;padding:14px 18px 16px;border-bottom:1px solid var(--soft)}
.lsa-now .v2-big{margin-top:6px;white-space:nowrap}
.lsa-nowpx{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.lsa-rule{min-width:0}
.lsa-rule .lsa-head{margin-bottom:4px}
.lsa-play{margin-left:auto}
.lsa-play span:first-child{font-size:10px}
.lsa-rule input[type=range]{display:block;width:100%;margin:6px 0 0;accent-color:var(--ink);cursor:pointer}
.lsa-ticks{position:relative;height:32px;margin:3px 8px 0}
.lsa-ticks .tk{position:absolute;top:2px;transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;line-height:1.2;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.lsa-ticks .tk::before{content:"";position:absolute;left:50%;top:-5px;height:4px;border-left:1px solid var(--line)}
.lsa-ticks .tk.w{top:17px;color:var(--ink);font-weight:600}
.lsa-ticks .tk.w::before{top:-20px;height:19px;border-left:1px dashed var(--muted)}
.lsa-sum{grid-column:1 / -1;margin:0}
@container lsawork (max-width:480px){ .lsa-val{grid-template-columns:minmax(0,1fr)} }

/* [다른 프로그램 값 | CSS], [비교 사다리 | 크기별 기준] */
.lsa-mid,.lsa-cmp{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--soft)}
.lsa-cmp{border-bottom:0}
.lsa-conv,.lsa-out,.lsa-lad,.lsa-ref{padding:14px 18px 16px;min-width:0}
.lsa-out,.lsa-ref{border-top:1px solid var(--soft)}
@container lsawork (min-width:760px){ .lsa-mid,.lsa-cmp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .lsa-out,.lsa-ref{border-top:0;border-left:1px solid var(--soft)} }

/* 환산표: 줄마다 이름·설명 | 입력 */
.lsa-cform{display:grid;gap:8px}
.lsa-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,220px);align-items:center;gap:4px 12px;padding:0 0 8px;border-bottom:1px solid var(--soft)}
.lsa-row:last-child{padding-bottom:0;border-bottom:0}
.lsa-row label{display:block;min-width:0;font-family:var(--sans);word-break:keep-all;overflow-wrap:anywhere}
.lsa-row label b{display:block;font-size:13px;font-weight:700;line-height:1.35;color:var(--ink)}
.lsa-row label small{display:block;margin-top:1px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.lsa-row .v2-input b{min-width:50px}

/* CSS 결과 */
.lsa-out{display:flex;flex-direction:column}
.lsa-out .lsa-head .v2-seg{margin-left:auto}
.lsa-code{flex:1 1 auto;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.lsa-code b{color:var(--ink);font-weight:700}
.lsa-tw{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:10px 0 0}
.lsa-tw code{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.lsa-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lsa-status{min-height:18px;margin:8px 0 0}
.lsa.is-stale .lsa-code,.lsa.is-stale .lsa-tw code,.lsa.is-stale .v2-big{opacity:.45}

/* 비교 사다리 */
.lsa-ladhint{margin:-4px 0 10px}
.lsa-rungs{display:grid;gap:4px}
.lsa-rung{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-width:0;padding:7px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.lsa-rung:hover{background:var(--wash)}
.lsa-rung.is-now{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink);cursor:default}
.lsa-rung.is-now:hover{background:var(--paper)}
.lsa-rung:disabled{opacity:.4;cursor:not-allowed}
.lsa-rung:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lsa-rung .v{display:flex;flex-direction:column;min-width:0;font-family:var(--sans);font-variant-numeric:tabular-nums}
.lsa-rung .v b{font-size:12.5px;font-weight:700;white-space:nowrap}
.lsa-rung .v em{font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap}
.lsa-rung .s{display:block;min-width:0;overflow:hidden;white-space:pre;line-height:1.3;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}

/* 크기별 기준 그래프 */
.lsa-plot{position:relative;min-height:236px}
.lsa-svg{display:block;width:100%;overflow:visible;font-family:var(--sans);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.lsa-svg text{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.lsa-svg .gy line,.lsa-svg .gx line{stroke:var(--soft);stroke-width:1}
.lsa-svg .zero{stroke:var(--line);stroke-width:1.2}
.lsa-svg .apple{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.lsa-svg .inter{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:5 4}
.lsa-svg .m3 circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.lsa-svg .krds rect{fill:var(--muted)}
.lsa-svg .hit{fill:transparent;cursor:ew-resize}
.lsa-svg .cur{outline:none;cursor:ew-resize}
.lsa-svg .cur line{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.lsa-svg .cur .cb{fill:var(--ink)}
.lsa-svg .cur text{fill:var(--paper);font-weight:700}
.lsa-svg .cur:focus-visible .cb{stroke:var(--accent);stroke-width:2.5}
.lsa-svg .cur.is-out line{opacity:.35}
.lsa-svg .pt{pointer-events:none}
.lsa-svg .pt circle{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.lsa-svg .pt .ar{fill:var(--accent)}
.lsa-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.lsa-legend span{display:inline-flex;align-items:center;gap:6px}
.lsa-legend span::before{content:"";display:inline-block;width:16px;height:0;border-top:2px solid var(--ink)}
.lsa-legend .k-inter::before{border-top:2px dashed var(--muted)}
.lsa-legend .k-m3::before{width:7px;height:7px;border:1.4px solid var(--ink);border-radius:50%;background:var(--paper)}
.lsa-legend .k-krds::before{width:7px;height:7px;border:0;background:var(--muted)}
.lsa-legend .k-now::before{width:9px;height:9px;border:0;border-radius:50%;background:var(--accent)}
.lsa-refs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lsa-chip{flex:1 1 140px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:7px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.lsa-chip:hover{background:var(--wash)}
.lsa-chip b{font-size:11.5px;font-weight:600;line-height:1.35;color:var(--muted)}
.lsa-chip span{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.lsa-chip[aria-pressed="true"]{border-color:var(--ink);background:var(--wash)}
.lsa-chip:disabled{opacity:.5;cursor:not-allowed}
.lsa-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}