/* 고백데이 계산기 전용 CSS (2026-10-11). 2패널(목표일·며칠째 | 고백할 날) + 1년 데이 시계(고백할 날 → 목표일 구간 그리기, 오늘 표시 회전) + 커플 데이 목록. 공용 부품은 assets/v2.css */
.cd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.cd-in{padding:16px 18px 18px;min-width:0}
.cd-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.cd-fields .v2-f{min-width:0}
.cd-fields .v2-f > .v2-label{display:block}
.cd-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cd-chips{margin-top:6px}
.cd-chips button{height:auto;min-height:32px;padding:4px 10px;white-space:nowrap}
.cd-date{display:block;width:100%;height:var(--v2-ctl,42px);margin:0;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600}
.cd-date:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cd-date[aria-invalid="true"]{border-color:var(--accent);color:var(--accent)}
.cd-fields .v2-input:has(input[aria-invalid="true"]){border-color:var(--accent)}
.cd-help{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.cd-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.cd-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column}
.cd-out > .v2-label{display:block;margin-bottom:6px}
.cd-out .v2-big{flex-wrap:wrap;row-gap:4px}
.cd-out .v2-big small{flex-basis:100%;display:block;margin:0;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cd-out .v2-big.is-past span{color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px}
.cd-out .v2-big.is-past small{color:var(--muted)}
.cd-out .v2-big.is-long > span{font-size:.72em}
.v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.cd-rows{margin-top:12px}
.cd-rows li span{min-width:0;flex:1 1 auto}
.cd-rows li b{flex:0 1 auto;white-space:normal;text-align:right}
.cd-rows li span,.cd-rows li b{word-break:keep-all;overflow-wrap:anywhere}
.cd-path{margin-top:12px}
.cd-path[hidden]{display:none}
.cd-path .v2-label{display:block;margin-bottom:6px}
.cd-path ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cd-path li{padding:3px 8px;border:1px solid var(--soft);border-radius:999px;background:var(--paper);font-family:var(--sans);font-size:12px;color:var(--ink);white-space:nowrap}
.cd-path li b{color:var(--accent);font-variant-numeric:tabular-nums}
.cd-path li small{color:var(--muted);font-size:11px}
.cd-path li.is-past{opacity:.55}
.cd-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.cd-foot .v2-status{margin-left:auto}
/* 1년 데이 시계 + 목록 */
.cd-cal{container:cdcal / inline-size;border-top:1px solid var(--soft)} /* 시계 옆 목록은 작업면이 760px 이상일 때만(1280px 화면은 646px라 쌓음) */
.cd-calin{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.cd-ringbox{padding:14px 18px 16px;min-width:0}
.cd-ringbox > .v2-label{display:block;margin-bottom:4px}
.cd-ringwrap{position:relative;width:100%;max-width:304px;margin:0 auto}
.cd-ring svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)}
.cd-track{fill:none;stroke:var(--soft);stroke-width:10}
.cd-arc{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-dasharray:0 1000;transition:stroke-dasharray .9s cubic-bezier(.3,.7,.3,1)}
.cd-tick{stroke:var(--line);stroke-width:1}
.cd-mon{fill:var(--muted);font-size:11px;font-weight:600}
.cd-today{transform-box:view-box;transform-origin:160px 160px;transition:transform 1s cubic-bezier(.3,.7,.3,1)}
.cd-today line{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.cd-today circle{fill:var(--ink)}
.cd-end circle{fill:var(--paper);stroke:var(--accent);stroke-width:2.5}
.cd-dot{cursor:pointer;outline:none}
.cd-dot .hit{fill:transparent}
.cd-dot .pin{fill:var(--paper);stroke:var(--ink);stroke-width:2;transition:fill .2s,stroke .2s}
.cd-dot.is-k .pin{fill:var(--ink);stroke:var(--paper)}
.cd-dot.is-hl .pin{fill:var(--paper);stroke:var(--accent);stroke-width:2.5}
.cd-dot.is-in .pin{stroke:var(--accent)}
.cd-dot.is-k.is-in .pin{fill:var(--accent);stroke:var(--paper)}
.cd-dot.is-sel .pin{fill:var(--accent);stroke:var(--ink);stroke-width:2.5}
.cd-dot:hover .hit{fill:var(--accent-wash)}
.cd-dot:focus-visible .hit{fill:var(--accent-wash);stroke:var(--accent);stroke-width:2}
.cd-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center;font-family:var(--sans)}
.cd-center strong{font-size:28px;font-weight:800;line-height:1.1;color:var(--accent);font-variant-numeric:tabular-nums}
.cd-center span{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.cd-center small{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.cd-keys{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.cd-keys i{display:inline-block;width:9px;height:9px;margin-right:4px;border-radius:50%;vertical-align:-1px}
.cd-keys i.k{background:var(--ink)}
.cd-keys i.o{border:2px solid var(--ink);width:8px;height:8px}
.cd-keys i.a{width:16px;height:5px;border-radius:3px;background:var(--accent);vertical-align:1px}
.cd-keys i.n{width:3px;height:12px;border-radius:2px;background:var(--ink);vertical-align:-2px}
.cd-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.cd-listbox{padding:14px 18px 16px;min-width:0;border-left:1px solid var(--soft)}
.cd-listhead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cd-table{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.cd-table table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.cd-table th,.cd-table td{padding:5px 8px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.cd-table thead th{font-size:11.5px;font-weight:700;color:var(--muted);border-top:0;white-space:normal;vertical-align:bottom}
.cd-table .w{text-align:center}
.cd-table .r{text-align:right;font-weight:700}
.cd-table td.is-we{color:var(--accent);font-weight:700}
.cd-table tbody th button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.cd-table tbody th button:hover{color:var(--accent)}
.cd-table tbody th button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.cd-table tbody th i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.cd-table tbody th i.o{background:none;border:2px solid var(--ink);width:6px;height:6px}
.cd-table tr.is-sel th,.cd-table tr.is-sel td{background:var(--accent-wash)}
.cd-table tr.is-sel th button{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.cd-table tr.is-today td.r{color:var(--accent)}
.cd-table .none{color:var(--muted);text-align:center;white-space:normal}
.cd-table tbody th,.cd-table td.d,.cd-table td.r{white-space:normal} /* 긴 로케일 이름·'faltan 73 días'가 좁은 목록 칸을 넘지 않게 */
@container v2in (max-width:330px){ .cd-pair{grid-template-columns:minmax(0,1fr)} } /* 날짜 글자 폭(135px 안팎)이 반쪽 칸에 안 들어가면 한 열 */
@media (prefers-reduced-motion:reduce){.cd-arc,.cd-today,.cd-dot .pin{transition:none}}
@container cdcal (max-width:759px){
  .cd-calin{grid-template-columns:minmax(0,1fr)}
  .cd-listbox{border-left:0;border-top:1px solid var(--soft)}
}
@media (max-width:720px){
  .cd-grid{grid-template-columns:minmax(0,1fr)}
  .cd-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .cd-in,.cd-out,.cd-ringbox,.cd-listbox{padding-left:12px;padding-right:12px}
  .cd-table th,.cd-table td{padding:5px 5px}
}