/* 솔루션 v2 — 계획에서 출발하는 안내(요건 → 유형 → 공개 수치) + 지금 반영된 것. 베타 시각 언어(lab/beta) 위에 얹는다. 라이트 고정(베타 규칙), 대비 AA. */
.s2 { --ink: #14213d; --mut: #4a5468; --line: #d9dde7; --paper: #fbfaf7; --acc: #164ed8;
  --teal: #0f766e; --teal-bg: #e3f3f0; --green: #166534; --green-bg: #e6f4ea; --indigo: #3730a3; --indigo-bg: #ebe9fc; --amber: #8a3b06; --amber-bg: #fbeee0;
  --ok: #166534; --due: #92400e; --old: #b91c1c;
  color: var(--ink); }
.s2 .lx-main { padding: 17px 32px 56px; }
.s2-toc { display: grid; gap: 2px; font-size: 14px; }
.s2-toc a { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 8px; color: var(--lx-text, var(--ink)); text-decoration: none; border: 0.8px solid transparent; }
.s2-toc a:hover { background: #eef1f7; color: var(--ink); } .s2-toc a span { font-weight: 800; color: var(--acc); font-variant-numeric: tabular-nums; }
.s2-toc a[aria-current="true"] { background: var(--lx-soft, #eef3ff); border-color: var(--lx-aline, #b9c8f0); color: var(--lx-accent, var(--acc)); }
@media (min-width: 960px) { .s2 .lx-side > details { position: sticky; top: 46px; max-height: calc(100vh - 46px); overflow-y: auto; } .s2 .lx-side-in { padding-top: 20px; } }
.s2-rd { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; } .s2-rd li { display: flex; gap: 8px; align-items: center; }
.s2-lnk { display: inline-block; margin-top: 8px; text-decoration: none; }
.s2-body { min-width: 0; }
/* hero */
.s2-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: end; padding: 18px 0 20px; border-bottom: 2px solid var(--ink); }
.s2-eye { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin: 0 0 8px; display: block; }
.s2-hero h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 12px; max-width: 18ch; }
.s2-lede { font-size: 16.5px; line-height: 1.6; color: var(--mut); margin: 0; max-width: 62ch; }
.hz-b { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; }
.hz-b b { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; } .hz-b span { color: var(--mut); } .hz-b:hover { border-color: var(--ok); }
.s2-disc { font-size: 13px; line-height: 1.55; color: var(--mut); margin: 12px 0 0; padding: 8px 12px; background: #fbf3e3; border: 1px solid #e7cf8f; border-radius: 10px; }
.s2-draft { display: inline-block; vertical-align: middle; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 1px 9px; border-radius: 999px; background: #fff1cc; color: #5c3b00; border: 1px dashed #b07a10; }
/* section frame */
.s2-sec { padding: 34px 0 6px; border-bottom: 1px solid var(--line); }
.s2-h { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; margin: 0 0 18px; }
.s2-n { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.s2-h h2 { font-size: 23px; line-height: 1.25; margin: 4px 0 6px; } .s2-h p { margin: 0 0 4px; color: var(--mut); line-height: 1.55; max-width: 75ch; }
.s2-hh { display: inline-block; font-size: 12.5px; color: #6b4a06; background: #fdf3dc; border: 1px dashed #c9a24a; border-radius: 8px; padding: 0 8px; }
.s2-note { font-size: 12.5px; color: var(--mut); line-height: 1.5; }
/* 1 needs ribbon */
.s2-needs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.need { padding: 14px 16px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; display: grid; gap: 4px; align-content: start; cursor: default; }
.need.on { background: #f3f6ff; } .need .nk { font-size: 11px; font-weight: 800; color: var(--acc); letter-spacing: .04em; }
.need h3 { font-size: 14.5px; margin: 0; color: var(--mut); font-weight: 700; } .need .nv b { font-size: 34px; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .need .nv span { font-size: 13px; color: var(--mut); }
.need .nr { font-size: 12.5px; color: var(--mut); } .need p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.need.unk { background: repeating-linear-gradient(135deg, #fff 0 10px, #f6f7fa 10px 20px); } .need.unk .nv b { display: inline-grid; place-items: center; width: 40px; height: 40px; font-size: 24px; border: 2px dashed #5b6475; border-radius: 50%; color: #3a4252; }
.nd { display: flex; gap: 4px; align-items: center; margin-top: 6px; } .nd small { font-size: 12px; color: var(--mut); margin-left: 4px; }
.gd { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .gd.teal { background: var(--teal); } .gd.green { background: var(--green); } .gd.indigo { background: var(--indigo); } .gd.amber { background: var(--amber); }
/* 2 map */
.s2-mapwrap { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.s2-map { width: 100%; height: auto; display: block; font-family: inherit; }
.mn rect { fill: #fff; stroke: var(--ink); stroke-width: 1.4; } .mn .t1 { font-size: 14px; font-weight: 700; fill: var(--ink); } .mn .t2 { font-size: 11.5px; fill: #4a5468; } .mn { cursor: pointer; outline: none; }
.mn.on rect, .mn:focus rect { fill: var(--ink); } .mn.on text, .mn:focus text { fill: #fff; }
.mf rect { stroke-width: 1.4; } .mf text { font-size: 13.5px; font-weight: 700; } .mg { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mf.teal rect { fill: var(--teal-bg); stroke: var(--teal); } .mf.teal text, .mg.teal { fill: var(--teal); } .mf.green rect { fill: var(--green-bg); stroke: var(--green); } .mf.green text, .mg.green { fill: var(--green); }
.mf.indigo rect { fill: var(--indigo-bg); stroke: var(--indigo); } .mf.indigo text, .mg.indigo { fill: var(--indigo); } .mf.amber rect { fill: var(--amber-bg); stroke: var(--amber); } .mf.amber text, .mg.amber { fill: var(--amber); }
.ml { fill: none; stroke-width: 2.2; opacity: .55; transition: opacity .15s, stroke-width .15s; } .ml.explain { stroke-dasharray: 6 5; }
.ml.teal { stroke: var(--teal); } .ml.green { stroke: var(--green); } .ml.indigo { stroke: var(--indigo); } .ml.amber { stroke: var(--amber); }
.s2-map.hl .ml { opacity: .12; } .s2-map.hl .ml.on { opacity: 1; stroke-width: 3.4; } .s2-map.hl .mf { opacity: .35; } .s2-map.hl .mf.on { opacity: 1; }
.s2-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--mut); margin: 10px 0 0; }
.lg { display: inline-block; width: 28px; height: 0; border-top: 2.5px solid var(--ink); vertical-align: middle; margin-right: 6px; } .lg.explain { border-top-style: dashed; }
.s2-mapm { display: none; list-style: none; padding: 0; margin: 0; }
.chip { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 8px; line-height: 1.35; margin: 2px 4px 2px 0; text-decoration: none; border: 1px solid; }
.chip.teal { color: var(--teal); background: var(--teal-bg); border-color: var(--teal); } .chip.green { color: var(--green); background: var(--green-bg); border-color: var(--green); }
.chip.indigo { color: var(--indigo); background: var(--indigo-bg); border-color: var(--indigo); } .chip.amber { color: var(--amber); background: var(--amber-bg); border-color: var(--amber); } .chip.ex { border-style: dashed; }
/* 3 field guide */
.s2-gh { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 22px 0 8px; padding-top: 8px; border-top: 3px solid; }
.s2-gh.teal { color: var(--teal); border-color: var(--teal); } .s2-gh.green { color: var(--green); border-color: var(--green); } .s2-gh.indigo { color: var(--indigo); border-color: var(--indigo); } .s2-gh.amber { color: var(--amber); border-color: var(--amber); }
.s2-sheet { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 470px); gap: 22px; padding: 16px 0 18px; border-bottom: 1px dashed var(--line); }
.sh-a h4 { font-size: 18px; line-height: 1.25; margin: 0 0 8px; } .sh-n { font-size: 12px; color: var(--mut); display: grid; gap: 4px; justify-items: start; }
.nchip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 6px; background: #eef1f7; color: var(--ink); }
.sh-b { display: grid; gap: 10px; align-content: start; } .dz { padding-left: 12px; border-left: 3px solid var(--ok); } .dz.stop { border-left-color: var(--old); }
.dz b { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); } .dz p { margin: 2px 0 0; line-height: 1.55; font-size: 14.5px; }
.s2-fact { margin: 2px 0 0; padding: 8px 12px; background: #f6f7fa; border-radius: 8px; font-size: 13.5px; line-height: 1.55; } .s2-fact cite { display: block; font-style: normal; font-size: 12px; color: var(--mut); margin-top: 4px; }
.sh-c { min-width: 0; } .sh-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.s2-src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: none; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.fd { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .fd.fresh { background: var(--ok); } .fd.aging { background: #d97706; } .fd.stale, .fd.failed { background: var(--old); }
.s2-fig { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 8px; } .s2-fig svg { width: 100%; height: auto; display: block; }
.s2-fig figcaption { font-size: 12px; color: var(--mut); line-height: 1.45; margin-top: 4px; }
.gl { stroke: #e4e7ee; stroke-width: 1; } .bl { stroke: #8a92a3; stroke-width: 1.2; } .ax { font-size: 11px; fill: #4a5468; } .pl { font-size: 12px; font-weight: 800; fill: var(--ink); }
.pt { fill: #c3c8d4; stroke: #fff; stroke-width: 1.5; } .pt.on.teal { fill: var(--teal); } .pt.on.green { fill: var(--green); } .pt.on.indigo { fill: var(--indigo); } .pt.on.amber { fill: var(--amber); }
.s2-vals { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; display: grid; gap: 3px; } .s2-vals small { color: var(--mut); }
.s2-void { padding: 14px 16px; border: 1px dashed #8a92a3; border-radius: 12px; background: #fafbfc; display: grid; gap: 6px; justify-items: start; } .s2-void p { margin: 0; font-size: 14px; line-height: 1.5; } .s2-void small { color: var(--mut); font-size: 12px; }
.s2-out { font-weight: 800; color: var(--acc); }
.s2-all { margin-top: 8px; font-size: 13px; } .s2-all summary { cursor: pointer; font-weight: 700; color: var(--acc); }
.s2-scroll { overflow-x: auto; } .s2-all table { border-collapse: collapse; width: 100%; min-width: 680px; margin-top: 6px; } .s2-all th, .s2-all td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 12.5px; }
.s2-all th { color: var(--mut); font-weight: 700; } .s2-all td small { display: block; color: var(--mut); font-size: 11px; }
.rep { color: var(--acc); font-weight: 700; }
/* 4 questions */
.s2-qflow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: q; }
.qn { position: relative; padding: 14px 14px 12px; background: #fff; border: 1px solid var(--line); margin-right: 18px; border-radius: 12px; display: grid; gap: 8px; align-content: start; }
.qn:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 30px; border: 7px solid transparent; border-left-color: var(--ink); }
.qn .qk { font-size: 11px; font-weight: 800; color: var(--acc); } .qn > b { font-size: 15px; line-height: 1.35; } .qa { display: grid; gap: 3px; justify-items: start; padding-top: 6px; border-top: 1px dashed var(--line); }
.qa-a { font-size: 12px; font-weight: 700; color: var(--mut); }
/* 5 quote */
.s2-priv { color: #14532d !important; } .s2-quote { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.s2-quote form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.s2-qout { display: grid; gap: 8px; } .qo { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 8px; padding: 8px 12px; border-radius: 10px; background: #f6f7fa; }
.qo span { grid-row: span 2; font-size: 11.5px; font-weight: 800; color: var(--acc); } .qo b { font-size: 13px; color: var(--mut); font-weight: 600; } .qo output { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.s2-btn { display: inline-block; font: inherit; font-size: 14px; font-weight: 700; border: 1px solid var(--acc); background: #fff; color: var(--acc); border-radius: 9px; padding: 7px 14px; cursor: pointer; text-decoration: none; margin-right: 6px; }
.s2-btn.pri { background: var(--acc); color: #fff; }
/* 6 current */
.st { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; margin-right: 6px; } .st.fresh { color: var(--ok); background: #e6f4ea; } .st.aging { color: var(--due); background: #fdf0dc; } .st.stale, .st.failed { color: var(--old); background: #fde8e8; }
.s2-cur { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.s2-srcs { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.s2-srcs li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; } .s2-srcs .fd { margin-top: 6px; }
.cu-a a { font-weight: 700; font-size: 14px; color: var(--ink); } .cu-a small { display: block; color: var(--mut); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.cu-b { display: grid; gap: 1px; font-size: 12px; color: var(--mut); text-align: right; justify-items: end; } .cu-b b { color: var(--ink); }
.s2-log { list-style: none; padding: 0; margin: 0 0 16px; border-left: 2px solid var(--ink); } .s2-log li { padding: 4px 0 8px 14px; position: relative; font-size: 13px; line-height: 1.45; }
.s2-log li::before { content: ""; position: absolute; left: -6px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); } .s2-log time { font-weight: 800; margin-right: 6px; font-variant-numeric: tabular-nums; } .s2-log code { font-size: 12px; background: #eef1f7; padding: 0 5px; border-radius: 4px; margin-right: 4px; }
.s2-rep { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .s2-rep h3 { margin: 0 0 6px; font-size: 16px; } .s2-rep ol { margin: 0 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.55; } .s2-rep code { font-size: 12px; background: #eef1f7; padding: 2px 6px; border-radius: 4px; }
/* 7 packs */
.s2-packs { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.s2-packs li { padding: 12px 14px; border: 1px dashed #8a92a3; border-radius: 12px; display: grid; gap: 4px; font-size: 13px; color: var(--mut); } .s2-packs li b { color: var(--ink); font-size: 15px; } .s2-packs li.on { border: 2px solid var(--ok); background: #f3faf5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* tablet / mobile */
@media (max-width: 1100px) {
  .s2-sheet { grid-template-columns: minmax(0, 1fr); gap: 12px; } .s2-qflow { grid-template-columns: minmax(0, 1fr); gap: 14px; } .qn { margin-right: 0; } .qn:not(:last-child)::after { right: 30px; top: auto; bottom: -15px; border-left-color: transparent; border-top-color: var(--ink); } }
@media (max-width: 760px) { .s2 .lx-main { padding: 8px 16px 40px; } .s2-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; } .s2-needs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .need .nv b { font-size: 26px; } .need p { display: none; }
  .s2-mapwrap { display: none; } .s2-mapm { display: grid; gap: 10px; } .s2-mapm li { display: grid; gap: 4px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; } .s2-mapm b { font-size: 14px; }
  .s2-quote, .s2-cur { grid-template-columns: minmax(0, 1fr); } .s2-packs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .s2-h { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; } .s2-n { width: 30px; height: 30px; font-size: 14px; } .s2-h h2 { font-size: 20px; }
  .s2-srcs li { grid-template-columns: 14px minmax(0, 1fr); } .cu-b { grid-column: 2; text-align: left; justify-items: start; } }
.s2-quote .sol-fg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.trk { width: 180px; height: 14px; display: block; margin-top: 4px; } .trk .k1 { fill: #86c79a; } .trk .k2 { fill: #f0c27b; } .trk .k3 { fill: #ef9a9a; } .trk .k0 { stroke: var(--ink); stroke-width: 2; }
.s2-note .trk { display: inline-block; vertical-align: middle; width: 120px; margin: 0 6px 0 0; }
@media (max-width: 760px) { .s2-quote .sol-fg { grid-template-columns: minmax(0, 1fr); } }