/* ============================================================
   Why WOS — docs-style page (sidebar + advantage tabs)
   Reuses tokens from styles.css. Light/paper theme.
   ============================================================ */

/* layout */
.why-shell { width: min(1280px, 94vw); margin: 0 auto; display: grid;
  grid-template-columns: 256px minmax(0,1fr); gap: 0; align-items: start; }
@media (max-width: 900px){ .why-shell { grid-template-columns: 1fr; } }

/* top group tabs (docs-style) */
.why-tabs { border-bottom: 1px solid var(--border); }
.why-tabs .ti { width: min(1280px, 94vw); margin: 0 auto; display: flex; align-items: center; gap: 2px; height: 50px; }
.why-tabs button { border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--text-2); padding: 8px 16px; cursor: pointer; position: relative; transition: color .15s; white-space: nowrap; }
.why-tabs button:hover { color: var(--text); }
.why-tabs button.on { color: var(--accent); }
.why-tabs button.on::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }

/* top tabs now label the groups → hide sidebar sub-headers */
.why-side h6 { display: none; }

/* ---- sidebar ---- */
.why-side { position: sticky; top: 70px; align-self: start;
  padding: 30px 26px 60px 2px; border-right: 1px solid var(--border);
  max-height: calc(100vh - 70px); overflow-y: auto; }
@media (max-width: 900px){
  .why-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--border);
    display: flex; gap: 8px; overflow-x: auto; padding: 14px 0; }
  .why-side .sgroup { flex: none; }
}
.why-side .sgroup + .sgroup { margin-top: 26px; }
.why-side h6 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; margin: 0 0 12px; padding-left: 12px; }
@media (max-width: 900px){ .why-side h6 { display:none; } }
.why-side button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  border: 0; background: none; font: inherit; cursor: pointer; color: var(--text-2);
  font-size: 14.5px; font-weight: 500; padding: 9px 12px; border-radius: 9px; line-height: 1.25;
  transition: background .15s, color .15s; white-space: nowrap; }
.why-side button .si { width: 17px; height: 17px; flex: none; color: var(--muted); transition: color .15s; display: none; }
.why-side button:hover { background: var(--surface-2); color: var(--text); }
.why-side button.on { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 1px var(--border); }
.why-side button.on .si { color: var(--accent); }

/* ---- content ---- */
.why-main { padding: 38px clamp(8px,3vw,56px) 100px; min-width: 0; }
.why-pane { display: none; }
.why-pane.on { display: block; }
@keyframes whyfade { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

.why-kicker { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  font-weight: 600; margin: 0 0 14px; display:inline-flex; align-items:center; gap:9px; }
.why-kicker::before { content:""; width: 22px; height:1px; background: var(--accent); opacity:.6; }
.why-pane h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.02em;
  font-weight: 400; margin: 0 0 14px; max-width: 20ch; text-wrap: balance; }
[data-lang="ko"] .why-pane h1 { word-break: keep-all; }
.why-pane .lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--text-2); line-height: 1.55;
  max-width: 60ch; margin: 0 0 34px; }
[data-lang="ko"] .why-pane .lead { word-break: keep-all; }
.why-pane h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; letter-spacing: -0.01em;
  margin: 44px 0 14px; }
.why-pane p { color: var(--text-2); font-size: 16px; line-height: 1.7; max-width: 64ch; margin: 0 0 16px; }
[data-lang="ko"] .why-pane p { word-break: keep-all; }
.why-pane p b, .why-pane li b { color: var(--text); font-weight: 600; }
.why-pane code { font-family: "JetBrains Mono", monospace; font-size: 13.5px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--text); }
.why-pane ul { margin: 0 0 18px; padding: 0; list-style: none; max-width: 64ch; }
.why-pane li { position: relative; padding-left: 26px; color: var(--text-2); font-size: 16px;
  line-height: 1.6; margin-bottom: 11px; }
[data-lang="ko"] .why-pane li { word-break: keep-all; }
.why-pane li::before { content: ""; position: absolute; left: 6px; top: 10px; width: 6px; height: 6px;
  border-radius: 2px; background: var(--accent); }

/* stat strip */
.why-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin: 8px 0 34px; }
.why-stats .st { background: var(--surface); padding: 20px 22px; }
.why-stats .st .v { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; line-height: 1;
  font-family: "Newsreader", serif; }
.why-stats .st .v .u { font-size: .5em; color: var(--muted); }
.why-stats .st .l { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

/* callout */
.why-note { display: flex; gap: 12px; background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 13px;
  padding: 16px 20px; margin: 24px 0; font-size: 14.5px; color: var(--text-2); line-height: 1.6; max-width: 64ch; }
.why-note svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }
.why-note b { color: var(--text); }

/* code block */
.why-code { background: var(--code-bg); border-radius: 13px; padding: 20px 22px; overflow-x: auto;
  margin: 0 0 22px; max-width: 64ch; }
.why-code pre { margin: 0; font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.7; color: #d8d2c4; }
.why-code .k { color: #c89bd8; } .why-code .s { color: #9ec78f; } .why-code .c { color: #7d765f; }
.why-code .f { color: #7fb0e0; }

/* steps (how it works) */
.why-steps { display: grid; gap: 14px; margin: 6px 0 26px; }
.why-step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; }
.why-step .n { width: 44px; height: 44px; border-radius: 11px; background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-family: "Newsreader", serif; font-size: 20px; }
.why-step h3 { margin: 0 0 5px; font-size: 17px; font-weight: 600; }
.why-step p { margin: 0; font-size: 14.5px; }
.why-step code { font-size: 12.5px; }

/* ============ COST CALCULATOR + CHART ============ */
.cost-wrap { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow); margin: 8px 0 14px; }
.cost-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cost-head .t { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.cost-head .t svg { width: 16px; height: 16px; color: var(--accent); }
.cost-head .mode { display: flex; gap: 4px; padding: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; }
.cost-head .mode button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); padding: 6px 13px; border-radius: 7px; cursor: pointer; transition: all .18s; }
.cost-head .mode button.on { background: var(--ink); color: var(--bg); }

.cost-body { display: grid; grid-template-columns: 280px 1fr; gap: 0; }
@media (max-width: 760px){ .cost-body { grid-template-columns: 1fr; } }
.cost-controls { padding: 24px; border-right: 1px solid var(--border); display: grid; gap: 22px; align-content: start; }
@media (max-width: 760px){ .cost-controls { border-right: 0; border-bottom: 1px solid var(--border); } }
.cost-controls.hidden { display: none; }
.cost-ctl .cl { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px;
  color: var(--text-2); margin-bottom: 10px; }
.cost-ctl .cl b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.cost-ctl input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 5px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); outline: none; }
.cost-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--ink); cursor: pointer; border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.cost-ctl input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); cursor: pointer; border: 3px solid var(--surface); }
.cost-seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.cost-seg button { flex: 1; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-2); padding: 8px 6px; border-radius: 7px; cursor: pointer; transition: all .18s; }
.cost-seg button.on { background: var(--ink); color: var(--bg); }

/* chart */
.cost-chart { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; }
.cc-bigrow { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.cc-big { font-family: "Newsreader", serif; font-size: clamp(40px, 6vw, 60px); line-height: .9; letter-spacing: -0.03em; color: var(--accent); }
.cc-biglab { font-size: 14px; color: var(--text-2); }
.cc-biglab b { color: var(--text); }
.ccbar { margin-bottom: 16px; }
.ccbar .h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; margin-bottom: 7px; }
.ccbar .h .nm { color: var(--text); font-weight: 600; }
.ccbar .h .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.ccbar .track { height: 30px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ccbar .fill { height: 100%; border-radius: 7px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.ccbar.without .fill { background: linear-gradient(90deg,#c98b6a,#b87355); }
.ccbar.without .amt { color: #a85f3f; }
.ccbar.with .fill { background: linear-gradient(90deg, var(--accent-strong), var(--accent)); }
.ccbar.with .amt { color: var(--accent); }
.cc-foot { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.cc-foot b { color: var(--text-2); }