/* 주식 수익률 계산기 전용 CSS (2026-10-20). 결과 띠 srt-strip(순손익 | 순수익률·본전·목표) → [주문표 srt-ticket | 매도가 사다리 srt-ladder(호가창처럼 높은 가격이 위, 0 가운데 막대, 지금 줄 강조 띠가 미끄러짐)] → 매도 정산 폭포 srt-wf. 공용 부품은 assets/v2.css. 접두 srt-
   상승·하락 색: KO·ja 는 빨강 상승·파랑 하락(east), en·es·id 는 청록 상승·빨강 하락(west) — dataviz 검사(밝게·어둡게) 통과, 하락 막대는 빗금을 더해 색만으로 구분하지 않는다 */
.srt{--srt-up:#c8322a;--srt-dn:#2f5fb3;container:srt / inline-size}
.srt[data-updown="west"]{--srt-up:#35a08c;--srt-dn:#e0685a}
html[data-theme="dark"] .srt{--srt-up:#dc6455;--srt-dn:#6a92de}
html[data-theme="dark"] .srt[data-updown="west"]{--srt-up:#30a08a;--srt-dn:#dc6455}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .srt{--srt-up:#dc6455;--srt-dn:#6a92de}
  html:not([data-theme="light"]) .srt[data-updown="west"]{--srt-up:#30a08a;--srt-dn:#dc6455}
}
.srt [hidden]{display:none !important}
.srt:lang(ko) .srt-kpi small,.srt:lang(ko) .v2-sub,.srt:lang(ko) .srt-mknote,.srt:lang(ko) .srt-help,.srt:lang(ko) .srt-hint,.srt:lang(ko) .srt-caveat,.srt:lang(ko) .srt-amts{word-break:keep-all;overflow-wrap:anywhere} /* 한국어는 어절 단위로 줄바꿈("2호 / 가 위" 방지) */

/* 결과 띠 */
.srt-strip{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr);border-bottom:1px solid var(--soft)}
.srt-hero{padding:16px 18px 18px;min-width:0;container:srthero / inline-size}
.srt-hero > .v2-label{display:block;margin-bottom:8px}
.srt-hero .v2-big{position:relative;padding-left:14px}
.srt-hero .v2-big::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;background:var(--soft);transition:background 350ms ease}
.srt-hero .v2-big.is-up::before{background:var(--srt-up)}
.srt-hero .v2-big.is-dn::before{background:var(--srt-dn)}
.srt-hero .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(20px, calc((100cqi - 14px) / (var(--srt-len, 8) * .6)), 1em)} /* 글자 수로 크기를 줄여 큰 금액도 한 줄 */
.srt-hero .v2-big.is-empty{padding-left:0}
.srt-hero .v2-big.is-empty::before{display:none}
.srt-hero .v2-big.is-empty span{font-size:17px;font-weight:600;line-height:1.45;color:var(--muted)}
.srt-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-left:1px solid var(--soft)}
.srt-kpi > div{padding:16px 14px 16px 16px;min-width:0;border-left:1px solid var(--soft);container:srtk / inline-size}
.srt-kpi > div:first-child{border-left:0}
.srt-kpi dt{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.srt-kpi dd{margin:8px 0 0;font-family:var(--sans);font-size:clamp(16px, 12.5cqi, 25px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.srt-kpi dd.is-off{color:var(--muted);opacity:.55}
.srt-kpi small{display:block;margin-top:7px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.srt-kpi small span{display:block}

/* 주문표 | 사다리 */
.srt-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.srt-ticket{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;min-width:0;container:srtin / inline-size}
.srt-ticket > .v2-f > .v2-label{display:block;margin:0 0 5px}
.srt-seg{display:grid;grid-template-columns:repeat(var(--srt-cols, 3),minmax(0,1fr));gap:4px}
.srt-seg button{min-width:0;height:34px;padding:0 6px;font-size:12.5px;line-height:1.15;white-space:normal;text-wrap:balance}
.srt-mknote{margin:7px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.srt-row{display:grid;grid-template-columns:repeat(var(--srt-n, 2),minmax(0,1fr));gap:12px}
.srt-pre b{border-left:0;border-right:1px solid var(--soft)}
.srt-pre input{padding-left:8px}
.srt-presets-box > .v2-label{display:block;margin-bottom:6px}
.srt-presets{display:flex;flex-wrap:wrap;gap:6px}
.srt-presets button{height:30px;padding:0 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.srt-presets button:hover{background:var(--btn);color:var(--ink);border-color:var(--line)}
.srt-help{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.srt-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:auto}

.srt-ladder-box{display:flex;flex-direction:column;padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 45%, var(--card));container:srtl / inline-size}
.srt-ladder-box > .v2-label{display:block;margin-bottom:8px}
.srt-ladder{position:relative;display:grid;grid-template-columns:auto auto minmax(40px,1fr) auto auto;column-gap:10px}
.srt-lrow{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;position:relative;z-index:1;min-height:31px;margin:0;padding:0 8px 0 10px;border:0;border-top:1px solid var(--soft);border-radius:0;background:none;font-family:var(--sans);font-size:13px;text-align:left;color:var(--ink);cursor:pointer}
.srt-lrow:hover{background:color-mix(in srgb, var(--btn) 70%, transparent)}
.srt-lrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.srt-lhead{min-height:22px;border-top:0;cursor:default;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.srt-lhead:hover{background:none}
.srt-lhead span:first-child,.srt-lhead span:nth-child(4),.srt-lhead span:nth-child(5){text-align:right}
.srt-lrow .p{text-align:right;font-weight:650;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.srt-lrow .tg{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.srt-lrow.is-cur .tg,.srt-lrow.is-tp .tg{color:var(--ink)}
.srt-lrow .trk{position:relative;height:10px;min-width:0}
.srt-lrow .z{position:absolute;left:50%;top:-11px;bottom:-11px;width:1px;background:var(--soft)}
.srt-lrow .bar,.srt-wf .bar{position:absolute;top:0;height:100%;border-radius:2px;transition:left 380ms cubic-bezier(.3,.7,.3,1),width 380ms cubic-bezier(.3,.7,.3,1),background 200ms ease}
.srt-lrow.is-up .bar,.srt-wf .is-up .bar{background:var(--srt-up)}
.srt-lrow.is-dn .bar,.srt-wf .is-dn .bar{background:repeating-linear-gradient(135deg,var(--srt-dn) 0 3px,color-mix(in srgb, var(--srt-dn) 45%, transparent) 3px 5px)}
.srt-lrow .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.srt-lrow .r{text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.srt-lrow[aria-pressed="true"] .p,.srt-lrow[aria-pressed="true"] .v{font-weight:800}
.srt-lrow.is-be{box-shadow:inset 0 -2px 0 var(--ink)} /* 이 줄 위로는 이익(호가창처럼 높은 가격이 위) */
.srt-lrow.is-buy .p{text-decoration:underline dotted var(--line);text-underline-offset:3px}
.srt-hl{position:absolute;left:0;right:0;top:0;height:31px;z-index:0;background:var(--accent-wash);border-left:3px solid var(--accent);pointer-events:none;opacity:0;transition:transform 380ms cubic-bezier(.3,.7,.3,1),height 380ms cubic-bezier(.3,.7,.3,1),opacity 200ms ease} /* 지금 매도가 줄을 따라 미끄러진다(R45) */
.srt-ladder.is-empty .srt-lhead{opacity:.5}
.srt-hint{display:block;margin-top:10px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}

/* 매도 정산 폭포 */
.srt-flow{padding:16px 18px 18px;min-width:0;container:srtf / inline-size}
.srt-flow.is-empty{display:none}
.srt-fh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:8px}
.srt-amts{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.srt-wf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,max-content) minmax(72px,1fr) auto;column-gap:16px}
.srt-wf li{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;min-height:38px;padding:4px 0;border-top:1px solid var(--soft);font-family:var(--sans);font-size:13px}
.srt-wf .n{font-weight:650;line-height:1.3;color:var(--ink)}
.srt-wf .n em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.srt-wf .trk{position:relative;height:12px;min-width:0}
.srt-wf .z{position:absolute;top:-10px;bottom:-10px;width:1px;background:var(--line)}
.srt-wf .bar{min-width:2px}
.srt-wf .is-cost .bar{background:var(--muted)}
.srt-wf .is-nil .bar{display:none}
.srt-wf .is-zero .bar{display:none}
.srt-wf li b{text-align:right;font-weight:700;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.srt-wf .is-cost b{font-weight:600;color:var(--muted)}
.srt-wf .is-net{border-top:1px solid var(--line)}
.srt-wf .is-net .n,.srt-wf .is-net b{font-weight:800}
.srt-flow .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.srt-caveat{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.srt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}

@media (prefers-reduced-motion: reduce){
  .srt-lrow .bar,.srt-wf .bar,.srt-hl,.srt-hero .v2-big::before{transition:none}
}

/* 좁은 작업면: 결과 띠·주문표·사다리를 한 줄씩(화면 순서 = DOM 순서) */
@container srt (max-width:660px){
  .srt-strip{grid-template-columns:minmax(0,1fr)}
  .srt-kpi{border-left:0;border-top:1px solid var(--soft)}
  .srt-main{grid-template-columns:minmax(0,1fr)}
  .srt-ladder-box{border-left:0;border-top:1px solid var(--soft)}
}
@container srt (max-width:460px){
  .srt-kpi{grid-template-columns:minmax(0,1fr)}
  .srt-kpi > div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:12px;padding:10px 16px;border-left:0;border-top:1px solid var(--soft)}
  .srt-kpi > div:first-child{border-top:0}
  .srt-kpi dd{margin:0;font-size:20px;text-align:right}
  .srt-kpi small{grid-column:1 / -1;margin-top:3px}
  .srt-kpi small span{display:inline}
  .srt-kpi small span + span::before{content:" · "}
}
@container srtin (max-width:330px){
  .srt-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .srt-fees{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@container srtin (max-width:250px){
  .srt-row,.srt-fees{grid-template-columns:minmax(0,1fr)}
}
@container srtl (max-width:340px){
  .srt-ladder{grid-template-columns:auto auto minmax(32px,1fr) auto;column-gap:8px}
  .srt-lrow .r,.srt-lhead span:nth-child(5){display:none}
  .srt-lrow{padding:0 6px 0 8px}
}
@container srtl (max-width:290px){
  .srt-ladder{grid-template-columns:auto minmax(24px,1fr) auto}
  .srt-lrow .tg,.srt-lhead span:nth-child(2){display:none}
}
@container srtf (max-width:440px){
  .srt-wf{grid-template-columns:minmax(0,44%) minmax(40px,1fr) auto;column-gap:10px}
}