/* 밸류클립 세금 캘린더 — 시각 정본 `밸류클립 캘린더 페이지.dc.html` 이식.
*
* 이 페이지가 답하는 질문은 하나다 — **"지금 내가 뭘 해야 하나."**
* 그래서 상단 다크 존이 주인공이고 달력은 선택을 바꾸는 장치다.
* 둘이 서로 다른 상태를 보이는 순간이 있으면 그게 결함이다(지침서 §0).
*
* 색은 고르지 않는다 — 일정의 유형(report|pay|pub|save)이 --vc-t 를 정하고
* 배지·띠·리스트 번호가 전부 그 하나를 읽는다. JS 는 data-t 만 바꾼다.
*
* 브레이크포인트 620/900 은 이 파일에만 있다. 캘린더 지침서 §4.1·§5.1 이
* 픽셀로 못 박은 값이라 사이트 공용 700/1000 으로 스냅하지 않았다.
* (tools/vc-check.py 가 이 파일만 예외로 허용한다)
*/
/* ══ 지역 별칭 — 이 파일 안에서만 산다 (2026-08-02) ══════════════════
* 공유 다리 `compat-v12.css` 는 없앴다. 캘린더가 마지막 사용처였는데, 여기서
* 쓰던 이름들은 **커스텀 프로퍼티라 DOM 을 타고 상속된다** — 규칙 선택자만 보고
* 값을 바꾸면 `.vc-cal` 자손이 통째로 어긋난다(실제로 상세 행이 1.02:1 이 됐다).
* 그래서 이름은 남기고 **값만** v13 토큰으로 세운다. 이 파일은 캘린더에서만 실린다.
*
* 아래 `.vc-cal{}` 이 이 중 몇을 다시 뒤집는다 — 그 블록이 v13 라이트 상세 존이다.
* **상속되는 이름을 기계적으로 치환하지 마라.** 두 층을 한 층으로 접으면 반드시 샌다. */
:where(html){
--vc-surface:var(--vc-paper);
--vc-honey:var(--vc-amber);
--vc-dark-btn-line:var(--vc-dark-line);
--vc-dark-dot:var(--vc-dark-line);
--vc-dark-text:var(--vc-on-dark);
--vc-gray-cool:var(--vc-on-dark-dim);
--vc-gray-dark:var(--vc-on-dark-dim);
--vc-risk-bg:var(--vc-ink);
--vc-risk-dot:var(--vc-dark-line);
--vc-risk-ex:var(--vc-on-dark-mute);
--vc-risk-label:var(--vc-amber);
--vc-risk-text:var(--vc-on-dark);
}
/* ══ 유형 → 색 (지침서 §3) ═════════════════════════════════════════ */
[data-t="report"]{--vc-t:var(--vc-primary)}
[data-t="pay"]{--vc-t:var(--vc-alert)}
[data-t="pub"]{--vc-t:var(--vc-primary-deep)}
[data-t="save"]{--vc-t:var(--vc-ok)}
[data-t="none"]{--vc-t:var(--vc-dark-line)}
/* ① 최상단 허니 라인 4px 은 header.php 의 .vc-topline 이 이미 낸다 — 새로 만들지 않는다. */
/* ══ 상세 존 — v13 에서 **다크가 걷혔다** ══════════════════════════
*
* §7.4 는 상세를 「연회색 머리 + 1단 상자」로 규정한다. 옛 캘린더 지침서의
* 다크 존은 v12 문법이고, 실측에서 이 화면 다크 면이 셋이었다(§11 은 ≤1).
*
* ★ 규칙을 하나하나 고치지 않는다. 이 구역 안에서 **토큰을 다시 정의**해
* 밝은-글자 전제를 통째로 뒤집는다 — 349줄을 손으로 훑으면 반드시 하나를
* 빠뜨리고, 그 하나가 흰 바닥의 흰 글자가 된다(계산소에서 그렇게 났다).
* 색 이름은 그대로 두고 **값만** 라이트로 바꾸는 것이라 대비가 한 번에 뒤집힌다. */
.vc-cal{
--vc-surface:var(--vc-ink); /* 다크 위 흰 글자 → 잉크 */
--vc-gray-cool:var(--vc-muted);
--vc-gray-dark:var(--vc-muted);
--vc-dark-line:var(--vc-line-2);
--vc-dark-btn-line:var(--vc-line-3);
--vc-dark-text:var(--vc-body);
--vc-honey:var(--vc-amber-tint); /* **면으로만** — 글자로 쓰는 자리는 아래에서 따로 */
/* 놓치면 블록 — 다크 카드였던 것을 주의 문법(앰버)으로 내린다 */
--vc-risk-bg:var(--vc-amber-tint);
--vc-risk-label:var(--vc-amber-ink);
--vc-risk-text:var(--vc-body);
--vc-risk-ex:var(--vc-muted);
--vc-risk-dot:var(--vc-line-2);
/* 상자 골격(테두리·바탕·라운드)은 공용 `.vc-box` 가 준다 — 여기서 다시 만들지 않는다. */
margin:12px var(--vc-gutter) 0;
}
/* ── 연회색 머리 (§7.4) — 배지·날짜·출처 / 제목 + D-day 칩 / 카운터 ──
* 상자와 **붙어 하나**다. 위쪽 라운드는 상자가 이미 잘라 준다. */
.vc-cald__top{background:var(--vc-tint);border-bottom:1px solid var(--vc-line-2);
padding:10px 11px 11px;display:flex;flex-direction:column;gap:7px}
.vc-cal .vc-cald__top{margin:0}
/* 상세 상자 헤더는 바로 위 머리와 같은 틴트면 두 줄이 한 덩어리로 뭉친다 — 흰 바닥에 룰만. */
.vc-box__hd--plain{background:var(--vc-paper)}
/* D-day 앰버 칩 — 큰 숫자 대신 조각 하나(시안 03). 앰버 면 위 글자는 --vc-amber-on 이다. */
.vc-dchip{margin-left:auto;flex:none;background:var(--vc-amber);color:var(--vc-amber-on);
font-size:13px;font-weight:800;letter-spacing:-.03em;
padding:3px 8px;border-radius:var(--vc-r-xs)}
.vc-dchip--today{background:var(--vc-ok);color:var(--vc-on-dark)}
.vc-dchip--past{background:var(--vc-line-2);color:var(--vc-muted)}
/* 연결 행 (§7.4) — 칩이 아니라 행. 우측 꺾쇠가 「간다」를 말한다. */
.vc-crow{display:flex;align-items:center;gap:8px;padding:11px 0;
border-top:1px solid var(--vc-line);color:var(--vc-primary);
font-size:13px;font-weight:700}
.vc-crow:hover{color:var(--vc-primary-deep)}
.vc-crow__t{flex:1;min-width:0}
.vc-crow__c{flex:none;font-size:15px;color:var(--vc-line-3)}
.vc-dlinks{display:flex;flex-direction:column}
/* 유형 배지만 예외 — 시안 03 의 「신고」 칩은 갈래색 면에 흰 글자다. */
.vc-cal .vc-pill--type{color:var(--vc-on-dark)}
/* `--vc-honey` 는 면(배지 바닥·버튼)과 글자(D-day 숫자) **두 곳**에 쓰인다.
* 한 값으로 둘 다는 못 한다 — 면은 틴트, 글자는 amber-ink 다.
* 밝은 바닥에 앰버 원색 글자는 1.6:1 이라 §11 이 0건으로 못 박았다. */
/* 놓치면 — v13 은 좌측 2px 앰버다(상단 룰은 다크 바닥용 대체였다). */
.vc-cal .vc-miss{border-top:0;border-left:2px solid var(--vc-amber);border-radius:0}
.vc-cal__in{max-width:var(--vc-container);margin:0 auto;padding:0 11px}
.vc-cal__kicker{
padding:18px 0 10px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.vc-cal__kickerhint{
margin-left:auto;font-size:11px;color:var(--vc-gray-cool);
}
.vc-cal__area{font-size:11.5px;color:var(--vc-gray-dark)}
.vc-pill{
display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;
padding:4px 9px;border-radius:var(--vc-r-sm);white-space:nowrap;
}
.vc-pill--honey{background:var(--vc-honey);color:var(--vc-ink)}
.vc-pill--type{background:var(--vc-t,var(--vc-primary));color:var(--vc-surface)}
/* 절세(save)·공시(proc)·신고(law)·납부(risk) 전부 흰 글자 4.6:1 이상.
* 유일한 예외가 value 인데 유형 색에는 value 가 없다(§3 표). */
.vc-detail{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;padding:11px 0 4px}
.vc-detail__l{display:flex;flex-direction:column;gap:13px;min-width:0}
.vc-detail__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vc-detail__when{font-size:12px;font-weight:700;color:var(--vc-surface)}
.vc-detail__src{font-size:11px;color:var(--vc-gray-cool)}
/* 필터 불일치 배너 — 선택을 옮기지 않고 알리기만 한다(§4.4) */
.vc-detail__banner{
font-size:11.5px;font-weight:700;color:var(--vc-ink);
background:var(--vc-honey);border-radius:var(--vc-r-sm);padding:7px 10px;
}
.vc-detail__banner[hidden]{display:none}
/* 겹친 날 — 어느 일정을 볼지 고르는 줄. 한 건뿐인 날엔 아예 안 뜬다.
*
* **유형색(--vc-t)을 쓰지 않는다.** 공시(proc)는 남색이라 다크 바닥에서 테두리
* 대비가 1.02:1 로 사라진다(실측). 유형은 바로 위 배지가 이미 말하고 있고,
* 여기는 "어느 걸 보는 중인가" 만 말하면 된다 —
* 토큰 주석대로 아웃라인은 --vc-dark-btn-line, 활성 칩은 --vc-honey 다. */
.vc-dtabs{display:flex;gap:5px;flex-wrap:wrap}
.vc-dtabs[hidden]{display:none}
.vc-dtab{
height:26px;padding:0 10px;border:1.5px solid var(--vc-dark-btn-line);
border-radius:var(--vc-r-sm);background:transparent;
font-family:inherit;font-size:11px;font-weight:700;color:var(--vc-dark-text);
display:inline-flex;align-items:center;
transition:background-color 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out;
}
.vc-dtab:hover{border-color:var(--vc-honey);color:var(--vc-surface)}
.vc-dtab[aria-pressed="true"]{
background:var(--vc-honey);border-color:var(--vc-honey);color:var(--vc-ink);
}
.vc-detail__title{display:flex;align-items:center;gap:10px}
/* 시안 03 의 제목은 15px 다 — 상자 머리 안이라 22~30px 은 제 자리를 넘는다. */
.vc-detail__h1{
margin:0;font-weight:800;font-size:15px;line-height:1.35;
letter-spacing:-.035em;color:var(--vc-ink);min-width:0;
}
.vc-clock{
font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;
color:var(--vc-gray-cool);padding-bottom:5px;
}
.vc-clock[hidden]{display:none}
/* ── 기간 축 (§6.11) — 3단 종속 도형. 골격은 공용 `.vc-sub` 가 준다. ── */
.vc-axis[hidden]{display:none}
.vc-axis__hd{display:flex;align-items:baseline;gap:8px}
.vc-axis__l{font-size:11.5px;font-weight:700;color:var(--vc-body)}
.vc-axis__n{margin-left:auto;font-size:11px;font-weight:700;color:var(--vc-muted)}
.vc-axis__trk{position:relative;height:26px;background:var(--vc-line);
border:1px solid var(--vc-line-2);border-radius:var(--vc-r-xs);overflow:hidden}
.vc-axis__fill{position:absolute;left:0;top:0;bottom:0;background:var(--vc-primary-tint)}
/* 오늘 자리를 2px 로 못 박는다 — 채움만 있으면 「어디까지」가 아니라 「얼마나」로 읽힌다. */
.vc-axis__mk{position:absolute;top:0;bottom:0;width:2px;background:var(--vc-primary);
transform:translateX(-1px)}
.vc-axis__ft{display:flex;justify-content:space-between;font-size:11px;color:var(--vc-muted)}
/* 점선 정보 행 */
.vc-drows{display:flex;flex-direction:column}
.vc-drow{
display:flex;align-items:baseline;gap:9px;padding:7px 0;
border-bottom:1.4px dotted var(--vc-dark-dot);
}
.vc-drow:last-child{border-bottom:0}
.vc-drow__l{
flex:none;font-size:10px;font-weight:700;color:var(--vc-ink);
background:var(--vc-honey);border-radius:4px;padding:3px 7px;
}
.vc-drow__l--mute{background:var(--vc-dark-line);color:var(--vc-dark-text)}
.vc-drow__t{font-size:12.5px;line-height:1.6;color:var(--vc-dark-text)}
/* 놓치면 블록 (§4.3)
*
* 지침서는 「바닥 #33221C · 좌측 3px #C6431F」로 적었지만 룰을 **위로 옮겼다.**
* 정본 §2.1 금지표가 좌측 컬러 보더 카드를 머지 금지로 못박고 대체를
* 「배경 틴트 또는 상단 룰」로 준다 — 화면별 지침서와 어긋나면 정본이 이긴다.
*
* 둘 중 틴트만 남기는 쪽은 안 된다. #33221C 는 잉크 바닥(#22262C) 위에서
* 1.00:1 이라 바닥만으로는 블록 경계가 통째로 사라진다(실측). 3px 코랄이
* 이 블록의 유일한 경계선이다 — 3.06:1 로 비텍스트 3:1 을 넘긴다. */
.vc-miss{
background:var(--vc-risk-bg);border-top:3px solid var(--vc-alert);
border-radius:var(--vc-r-sm);padding:11px 13px;
display:flex;flex-direction:column;gap:6px;
}
.vc-miss__l{font-size:10.5px;font-weight:700;color:var(--vc-risk-label)}
.vc-miss__t{font-size:12.5px;line-height:1.6;color:var(--vc-risk-text)}
.vc-miss__ex{
font-size:11.5px;line-height:1.6;color:var(--vc-risk-ex);
padding-top:5px;border-top:1px dotted var(--vc-risk-dot);
}
/* ══ 달력 ══════════════════════════════════════════════════════════ */
/* 좌우 여백은 상세 존(`.vc-cal__in`)과 같은 값이어야 한다 — 달력이 1단 상자가
* 되면서 여백 0 이면 상자만 화면 끝에 붙어 두 상자가 다른 자를 쓴 것처럼 보인다. */
.vc-calmain{
display:grid;grid-template-columns:1fr;gap:18px;
padding:20px var(--vc-gutter) 0;align-items:start;
}
.vc-calbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.vc-calbar__m{font-weight:800;font-size:17.5px;letter-spacing:-.05em;min-width:118px}
.vc-nav{
width:30px;height:30px;flex:none;border:1.5px solid var(--vc-line);
border-radius:var(--vc-r-md);background:var(--vc-surface);
display:flex;align-items:center;justify-content:center;
font-size:13px;color:var(--vc-ink);
transition:border-color 150ms ease-out,background-color 150ms ease-out;
}
.vc-nav:hover{border-color:var(--vc-ink);background:var(--vc-amber-tint)}
.vc-todaybtn{
font-size:11.5px;font-weight:700;color:var(--vc-amber-ink);
border:1.5px solid var(--vc-honey);background:var(--vc-amber-tint);
border-radius:var(--vc-r-sm);padding:5px 10px;
}
.vc-todaybtn:hover{color:var(--vc-ink)}
.vc-filters{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
/* 칩 본체는 공용 `.vc-fb`(components.css) 다 — 여기서는 배치(.vc-filters)만 준다. */
.vc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.vc-dow{
text-align:center;font-size:10.5px;font-weight:700;
color:var(--vc-muted);padding:4px 0;
}
.vc-dow--sun{color:var(--vc-alert)}
.vc-dow--sat{color:var(--vc-primary)}
.vc-cell{
/* aspect-ratio 와 min-height 가 함께 있으면 브라우저가 가로 최소폭을
* 46/.92=50px 로 잡는다. 7칸이면 374px 라 375 화면에서 넘친다(실측 확인).
* min-width:0 이 그 자동 최소폭을 풀어 준다 — 높이는 min-height 가 지킨다. */
min-width:0;
aspect-ratio:1/.92;min-height:46px;
border:1.5px solid var(--vc-line);border-radius:var(--vc-r-md);
background:var(--vc-surface);padding:5px;
display:flex;flex-direction:column;gap:3px;text-align:left;
font-family:inherit;color:inherit;
transition:border-color 150ms ease-out,transform 150ms ease-out,
background-color 150ms ease-out,opacity 180ms ease-out;
}
.vc-cell:hover{border-color:var(--vc-ink);transform:translateY(-2px)}
/* 전월·차월은 클릭 대상이 아니다 — data-k 를 안 붙이고 커서도 안 바꾼다 */
.vc-cell--out{
background:var(--vc-tint-2);border-color:var(--vc-line);cursor:default;
}
.vc-cell--out:hover{transform:none;border-color:var(--vc-line)}
.vc-cell--out .vc-cell__n{color:var(--vc-muted)}
.vc-cell--sel{border:2px solid var(--vc-ink);background:var(--vc-amber-tint)}
.vc-cell--dim{opacity:.32}
.vc-cell__n{font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;line-height:1.35}
.vc-cell--today .vc-cell__n{
background:var(--vc-ink);color:var(--vc-surface);border-radius:var(--vc-r-sm);
width:19px;height:19px;display:flex;align-items:center;justify-content:center;
}
.vc-cell__bar{height:3.5px;border-radius:var(--vc-r-sm);background:var(--vc-t)}
.vc-cell__l{
display:none;font-size:9.5px;font-weight:600;color:var(--vc-muted);
line-height:1.25;overflow:hidden;
}
/* 겹친 날의 나머지 건수. 라벨 뒤에 붙어 셀 폭을 늘리지 않는다 */
.vc-cell__more{margin-left:3px;font-weight:800;color:var(--vc-amber-ink)}
/* 달력 상자 꼬리의 안내 1줄(§7.4). 옛 범례는 필터 버튼과 같은 말을 해서 걷었다. */
.vc-calhint{
margin:11px 0 0;padding-top:9px;border-top:1px solid var(--vc-line-2);
font-size:11px;line-height:1.55;color:var(--vc-muted);
}
/* 그 달의 일정 리스트 — 상자는 공용 `.vc-box` 가 준다 */
.vc-mlist__body{display:flex;flex-direction:column;gap:8px;padding-top:11px}
.vc-mi{display:flex;align-items:baseline;gap:8px;padding:1px 0;width:100%;
border:0;background:transparent;text-align:left;font-family:inherit}
/* 시안 03 의 행 = 일자 · 제목 · 종류 · D-day */
.vc-mi__tag{flex:none;font-size:11px;color:var(--vc-muted)}
.vc-mi__d2{flex:none;font-size:11px;font-weight:800;color:var(--vc-ink);min-width:34px;text-align:right}
.vc-mi__d{
font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:800;
color:var(--vc-t);flex:none;width:24px;
}
.vc-mi__t{font-size:12px;line-height:1.5;font-weight:600;color:var(--vc-body)}
.vc-mi:hover .vc-mi__t{color:var(--vc-amber-ink)}
.vc-mi--cur .vc-mi__t{font-weight:800;color:var(--vc-ink)}
.vc-mi__sep{height:1px;background:var(--vc-line)}
.vc-mlist__empty{font-size:11.5px;line-height:1.6;color:var(--vc-muted)}
/* ══ 가산세 (§6.10) — 카드 2열이 아니라 **행 4개**다 ═══════════════
* 시안 03 의 마지막 상자: `66px 1fr` grid, % 는 17px/800 경고색,
* 이름 12.5px/700 + 예시 캡션. 적용되지 않는 행만 물러난다(opacity .34).
* 상자·좌우 여백은 공용 `.vc-box` 가 준다 — 여기서 다시 만들지 않는다. */
.vc-pen{margin:12px var(--vc-gutter) 0}
.vc-pen__note{margin:11px 0 12px;font-size:12px;line-height:1.7;color:var(--vc-muted)}
.vc-pen__note b{color:var(--vc-ink)}
.vc-pen__note--off{opacity:.75}
.vc-pen__rows{display:flex;flex-direction:column}
.vc-pen__row{
display:grid;grid-template-columns:66px minmax(0,1fr);gap:10px;align-items:baseline;
padding:9px 0;border-top:1px solid var(--vc-line);opacity:.34;
transition:opacity 180ms ease-out;
}
.vc-pen__row--on{opacity:1}
.vc-pen__rate{
font-variant-numeric:tabular-nums;font-weight:800;font-size:17px;
letter-spacing:-.045em;color:var(--vc-alert);text-align:right;
}
.vc-pen__row--relief .vc-pen__rate{color:var(--vc-ok)}
.vc-pen__b{display:flex;flex-direction:column;gap:2px;min-width:0}
.vc-pen__n{font-size:12.5px;font-weight:700;color:var(--vc-ink)}
.vc-pen__ex{font-size:11px;line-height:1.55;color:var(--vc-muted)}
.vc-calnote{padding:24px 0 28px;font-size:11.5px;line-height:1.75;color:var(--vc-muted)}
/* ══ 반응형 ════════════════════════════════════════════════════════ */
@media (min-width:620px){
.vc-cell__l{display:block}
}
@media (min-width:900px){
.vc-detail{grid-template-columns:minmax(0,1fr) 276px;gap:28px}
.vc-calmain{grid-template-columns:minmax(0,1fr) 276px;gap:24px}
.vc-cell{min-height:58px}
}
/* 모션을 끈 사람에게는 진행바·셀 이동을 걷어낸다 */
@media (prefers-reduced-motion:reduce){
.vc-cell,.vc-pen__row,.vc-nav,.vc-fb,.vc-dtab{transition:none}
.vc-cell:hover{transform:none}
}