/* ============================================================
   v2 — 제안 방향 공용 스타일 (dday.html · discount-v2.html)
   원칙
   · 한글 라벨·보조 문구는 sans, 숫자·날짜·코드만 tabular/mono
   · 구역은 선이 아니라 톤(wash)으로 나누고, 선은 표와 경계에만
   · accent는 한 화면에 한 곳(다음 기념일 · 절약액 · 현재 항목)
   · 활성 채움은 --fill/--on-fill(다크에서 양피지 톤)
   ============================================================ */

/* ---------- 작업면 기본 ---------- */
.v2-work{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.v2-work__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--soft)}
.v2-label{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.v2-hint{font-family:var(--sans);font-size:12px;color:var(--muted)}
.v2-tone{background:color-mix(in srgb, var(--wash) 70%, var(--paper))}

.v2-seg{display:inline-flex;flex-wrap:wrap;gap:4px}
.v2-seg 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);transition:background var(--ease),color var(--ease),border-color var(--ease)}
.v2-seg button:hover{background:var(--btn);color:var(--ink)}
.v2-seg button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

.v2-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);transition:background var(--ease),opacity var(--ease)}
.v2-btn:hover{background:var(--btn-hover)}
.v2-btn--primary{background:var(--fill);color:var(--on-fill);border-color:var(--fill)}
.v2-btn--primary:hover{background:var(--fill-hover);border-color:var(--fill-hover)}
.v2-btn--tall{height:var(--v2-ctl)}
.v2-btn:disabled{opacity:.45;cursor:not-allowed}
.v2-btn .i{width:14px;height:14px}

.v2-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);user-select:none}
.v2-switch input{position:absolute;opacity:0;width:0;height:0}
.v2-switch i{flex:0 0 auto;width:32px;height:18px;border:1px solid var(--line);border-radius:9px;background:var(--paper);position:relative;transition:background var(--ease),border-color var(--ease)}
.v2-switch i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform var(--ease),background var(--ease)}
.v2-switch input:checked + i{background:var(--fill);border-color:var(--fill)}
.v2-switch input:checked + i::after{transform:translateX(14px);background:var(--on-fill)}
.v2-switch input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}
.v2-switch small{font-family:var(--sans);font-weight:400;color:var(--muted)}

/* 입력 상자 높이 기준(2026-10-07): .v2-input·단독 날짜·시각·선택 입력과 옆 v2-btn--tall은 바깥 높이 --v2-ctl 하나로 맞춘다 */
:root{--v2-ctl:42px}
.v2-f{min-width:0}
.v2-f > label{display:block;margin:0 0 5px}
.v2-f > label.v2-switch{display:inline-flex} /* 필드 칸 바로 아래 스위치가 block이 되면 몸통(i)이 2px로 눌린다 */
.v2-f > label em{font-style:normal;font-weight:400;margin-left:5px}
.v2-input{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transition:border-color var(--ease),box-shadow var(--ease)}
.v2-input:focus-within{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.v2-input input{flex:1 1 0;width:100%;min-width:0;height:calc(var(--v2-ctl) - 2px);padding:0 10px;border:0;background:none;outline:0;text-align:right;font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.v2-input input::placeholder{font-weight:400;color:var(--ink);opacity:.35}
.v2-input b{display:grid;place-items:center;min-width:36px;padding:0 9px;border-left:1px solid var(--soft);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);background:var(--wash)}
.v2-f.is-invalid .v2-input{border-color:var(--accent)}
.v2-input input[type="date"]{text-align:left;min-width:170px}
.v2-status{font-family:var(--sans);font-size:12px;color:var(--muted)}
.v2-status.is-ok{color:var(--ink)}
.v2-status.is-error{color:var(--accent)}

/* 큰 결과 숫자 */
.v2-big{display:flex;align-items:baseline;gap:8px;margin:0;font-family:var(--sans);font-weight:800;font-size:46px;line-height:1;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.v2-big small{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--muted)}
.v2-big.is-empty{font-size:22px;color:var(--muted);opacity:.6;font-weight:600}
.v2-sub{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.v2-sub .alt{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:2px}

/* 결과 행 (점선 대신 soft 한 줄, 숫자는 오른쪽 정렬) */
.v2-rows{list-style:none;margin:0;padding:0}
.v2-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--soft);font-size:13.5px}
.v2-rows li span{color:var(--muted);font-family:var(--sans);font-size:13px}
.v2-rows li span em{font-style:normal;font-variant-numeric:tabular-nums;opacity:.8}
.v2-rows li b{font-family:var(--sans);font-weight:700;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);white-space:nowrap}
.v2-rows li b.neg{color:var(--accent)}
.v2-rows li.sum{border-top:1px solid var(--line);margin-top:2px;padding-top:10px}
.v2-rows li.sum span{color:var(--ink);font-weight:700}
.v2-formula{margin:12px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow-x:auto}
.v2-formula:empty{display:none}

/* ---------- 본문 (Article) ---------- */
.v2-article{max-width:720px;counter-reset:sec}
.v2-article h2{position:relative;font-family:var(--serif);font-size:21px;font-weight:900;letter-spacing:-.03em;line-height:1.3;margin:38px 0 12px;padding-top:16px;border-top:1px solid var(--soft)}
.v2-article h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:6px}
.v2-article > h2:first-child{margin-top:6px;padding-top:0;border-top:0}
.v2-article h3{font-family:var(--serif);font-size:16px;font-weight:800;letter-spacing:-.01em;margin:22px 0 6px}
.v2-article p{font-size:15px;line-height:1.85;margin:0 0 14px;color:var(--ink)}
.v2-article p b,.v2-article li b{font-weight:750}
.v2-article a:not([class]){text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.v2-article a:not([class]):hover{text-decoration-color:var(--accent)}
.v2-article ul,.v2-article ol{list-style:none;margin:0 0 14px;padding:0}
.v2-article ul li{position:relative;padding-left:16px;font-size:15px;line-height:1.8;margin:0 0 4px}
.v2-article ul li::before{content:"";position:absolute;left:2px;top:.8em;width:5px;height:5px;background:var(--line)}
.v2-article ol{counter-reset:li}
.v2-article ol li{position:relative;padding-left:30px;font-size:15px;line-height:1.8;margin:0 0 6px;counter-increment:li}
.v2-article ol li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:.28em;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent)}

/* 표: 머리 wash, 숫자 열 오른쪽 정렬, 합계 행 강조 */
.v2-article table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:14px;background:var(--card);border:1px solid var(--soft)}
.v2-article caption{caption-side:top;text-align:left;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);padding:0 0 6px}
.v2-article th{background:var(--wash);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.v2-article td{padding:9px 10px;border-bottom:1px solid var(--soft);vertical-align:top;line-height:1.55}
.v2-article tr:last-child td{border-bottom:0}
.v2-article td.n,.v2-article th.n{font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums;text-align:right;white-space:nowrap}
.v2-article td.k{font-weight:650;white-space:nowrap}
.v2-article tr.sum td{background:var(--wash);font-weight:750;border-top:1px solid var(--line)}
.v2-article .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 메모·인용 */
.v2-note{margin:14px 0;padding:12px 14px;background:var(--wash);border-radius:var(--radius);font-family:var(--sans);font-size:13px;line-height:1.65;color:var(--muted)}
.v2-note b{color:var(--ink)}
.v2-quote{margin:12px 0;padding:12px 14px;border-left:2px solid var(--line);background:color-mix(in srgb, var(--wash) 60%, var(--paper));font-size:14.5px;line-height:1.75}
.v2-quote small{display:block;font-family:var(--sans);font-size:11.5px;color:var(--muted);margin-top:6px}

/* FAQ: +/− 표시, 질문 serif, 답 들여쓰기 */
.v2-faq{margin:0 0 14px}
.v2-faq details{border-top:1px solid var(--soft)}
.v2-faq details:last-child{border-bottom:1px solid var(--soft)}
.v2-faq summary{display:flex;align-items:flex-start;gap:12px;padding:12px 0;cursor:pointer;list-style:none;font-family:var(--serif);font-size:15px;font-weight:750;line-height:1.5}
.v2-faq summary::-webkit-details-marker{display:none}
.v2-faq summary::before{content:"+";flex:none;width:18px;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--accent);line-height:1.5}
.v2-faq details[open] summary::before{content:"−"}
.v2-faq summary:hover{color:var(--accent)}
.v2-faq details p{margin:0 0 14px 30px;font-size:14.5px;line-height:1.8}

/* 출처 */
.v2-src{list-style:none;margin:0 0 14px;padding:0}
.v2-src li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 8px;padding:10px 0;border-top:1px solid var(--soft);font-size:14px;line-height:1.6}
.v2-src li:last-child{border-bottom:1px solid var(--soft)}
.v2-src .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);padding-top:3px}
.v2-src a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.v2-src a:hover{text-decoration-color:var(--accent)}
.v2-src small{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:2px}

/* 함께 쓰는 도구: 2열 카드 */
.v2-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px}
.v2-related a{display:block;padding:10px 12px;border:1px solid var(--soft);background:var(--card);border-radius:var(--radius);transition:border-color var(--ease),background var(--ease)}
.v2-related a:hover{border-color:var(--line);background:var(--paper)}
.v2-related b{display:block;font-size:14px;font-weight:750}
.v2-related span{display:block;font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}

/* 버전 전환 배지 (시안 비교용) */
.v2-ver{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--ink);transition:background var(--ease)}
.v2-ver:hover{background:var(--btn-hover)}
.v2-ver .i{width:12px;height:12px}

@media (max-width:560px){
  .v2-related{grid-template-columns:minmax(0,1fr)}
  .v2-big{font-size:38px}
}