/* 12·24시간제 변환기 (2026-10-20). 입력 한 칸 + 칩 → 결과 판[답·식·안내 | 표기별 줄 | 두 겹 시계판] → 하루 24칸 표 → 여러 줄 한꺼번에 → 복사·링크.
   툴 폭 520px 미만: 결과 판을 답 → 줄 → 시계판(200px) 한 열로, 560px 미만: 24칸 표를 6칸 × 4줄로.
   움직임: 시계 바늘 450ms·표 분 막대 300ms(transitions.dev --ease-smooth-out), 동작 줄이기면 끔. 테마 --ease는 120ms라 시간 뒤에 쓰지 않음. */
.tf-work{container:tfw / inline-size}
.tf-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 입력 */
.tf-in{padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.tf-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.tf-input input{text-align:left;font-size:18px;font-weight:700;letter-spacing:.01em}
.tf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tf-chips button{height:28px;padding:0 10px;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(--ink);font-variant-numeric:tabular-nums lining-nums;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.tf-chips button:hover{background:var(--btn);border-color:var(--line)}

/* 결과 판 */
.tf-res{display:grid;grid-template-columns:minmax(0,1fr) 216px;grid-template-areas:"ans dial" "rows dial";gap:4px 22px;align-items:start;padding:18px 18px 16px}
.tf-ans{grid-area:ans;min-width:0;container:tfa / inline-size}
.tf-big{margin-top:6px;font-size:clamp(30px,calc(150cqi / var(--len,6)),54px);flex-wrap:wrap;row-gap:0}
.tf-big:not(.is-empty){white-space:nowrap}
.tf-tags{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0}
.tf-tags:empty{display:none}
.tf-tags span{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--ink);background:var(--paper)}
.tf-rule{margin:12px 0 0;white-space:normal;font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.tf-read{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.tf-read:empty{display:none}
.tf-read.is-error{color:var(--accent)}
.tf-alt{height:28px;margin-top:8px;font-size:12px}
.tf-alt[hidden]{display:none}
.tf-rows{grid-area:rows;margin-top:10px}
.tf-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:6px 0}
.tf-rows li span{min-width:0}
.tf-rows li b{font-size:14.5px}
.tf-cp{height:24px;padding:0 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:background var(--ease),color var(--ease)}
.tf-cp:hover{background:var(--btn);color:var(--ink)}

/* 두 겹 시계판: 안쪽 1~12, 바깥 13~23·00 */
.tf-dial{grid-area:dial;margin:0;align-self:center}
.tf-dial svg{display:block;width:100%;height:auto}
.tf-lg{display:grid;gap:3px;margin-top:10px;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--ink)}
.tf-lg span{display:flex;align-items:center;gap:7px}
.tf-lg span::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line)}
.tf-lg-i::before{background:var(--card)}
.tf-lg-o::before{background:var(--wash)}
.tf-lg small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
.tf-ring{fill:var(--wash);stroke:var(--soft)}
.tf-face{fill:var(--card);stroke:var(--line)}
.tf-tick{stroke:var(--soft);stroke-width:1}
.tf-tick.is-h{stroke:var(--muted);stroke-width:1.6}
.tf-num circle{fill:transparent;transition:fill 250ms cubic-bezier(.22,1,.36,1)}
.tf-num text{font-family:var(--sans);font-size:15px;font-weight:700;fill:var(--ink);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.tf-num--o text{font-size:11px;font-weight:650;fill:var(--muted)}
.tf-num.is-on circle{fill:var(--accent)}
.tf-num.is-on text{fill:var(--card)}
.tf-dial-p{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--muted);text-anchor:middle}
.tf-hand{transform-box:view-box;transform-origin:110px 110px}
.tf-hand line{stroke:var(--ink);stroke-linecap:round}
.tf-hand--h line{stroke-width:5}
.tf-hand--m line{stroke-width:3}
.tf-pin{fill:var(--ink)}
.tf-dial.is-ready .tf-hand{transition:transform 450ms cubic-bezier(.22,1,.36,1)}
.tf-dial.is-empty .tf-hand{opacity:.2}

/* 하루 24칸 표 */
.tf-bd{padding:14px 18px 16px;border-top:1px solid var(--soft)}
.tf-board{display:grid;grid-template-columns:auto repeat(12,minmax(0,1fr));gap:4px;margin-top:9px}
.tf-bh{display:flex;align-items:center;padding-right:6px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.tf-c{--pc:color-mix(in srgb,var(--muted) 40%,var(--soft));position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1px;min-width:0;min-height:56px;padding:14px 2px 7px;border:1px solid var(--soft);border-top:3px solid var(--pc);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums;cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.tf-c[data-pp="1"]{--pc:color-mix(in srgb,var(--accent) 45%,var(--soft))}
.tf-c:hover{background:var(--btn)}
.tf-c i{position:absolute;z-index:2;top:1px;left:4px;font-family:var(--sans);font-size:10px;font-style:normal;font-weight:650;line-height:1.2;color:var(--muted);white-space:nowrap;pointer-events:none}
.tf-c small{font-size:11px;font-weight:600;line-height:1.1;color:var(--muted)}
.tf-c b{font-size:17px;font-weight:800;line-height:1.1}
.tf-c u{position:absolute;left:0;bottom:0;width:0;height:3px;background:currentColor;opacity:.55;transition:width 300ms cubic-bezier(.22,1,.36,1)}
.tf-c.is-on{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.tf-c.is-on small,.tf-c.is-on i{color:var(--on-fill)}
.tf-c.is-on u{width:calc(var(--m,0) * 100%)}
.tf-c:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* 여러 줄 한꺼번에 */
.tf-bulk{border-top:1px solid var(--soft)}
.tf-bulk summary{display:flex;align-items:center;gap:10px;padding:12px 18px;cursor:pointer;list-style:none;font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink)}
.tf-bulk summary::-webkit-details-marker{display:none}
.tf-bulk summary::before{content:"+";flex:none;width:14px;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--accent)}
.tf-bulk[open] summary::before{content:"−"}
.tf-bw{padding:0 18px 16px}
.tf-bw > .v2-hint{margin:0;line-height:1.55}
.tf-bdir{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:10px 0 12px}
.tf-bio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tf-bcol{min-width:0}
.tf-bcol > .v2-label{display:block;margin-bottom:5px}
.tf-bcol textarea,.tf-bout{box-sizing:border-box;width:100%;min-height:150px;margin:0;padding:9px 10px;border-radius:var(--radius);font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.tf-bcol textarea{display:block;resize:vertical;border:1px solid var(--line);background:var(--paper)}
.tf-bcol textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.tf-bout{max-height:340px;overflow:auto;border:1px solid var(--soft);background:var(--card);white-space:pre-wrap;overflow-wrap:anywhere}
.tf-bout.is-empty{color:var(--muted);font-size:13px}
.tf-m{padding:0 1px;background:var(--accent-wash);color:inherit;border-bottom:1.5px solid var(--accent)}
.tf-m.is-amb{border-bottom-style:dotted}
.tf-bfoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:9px}
.tf-bfoot .v2-hint{margin:0;flex:1 1 220px}

/* 복사·링크 */
.tf-act{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.tf-act .v2-status{flex:1 1 180px;margin:0}

@container tfw (max-width:559px){
  .tf-board{grid-template-columns:auto repeat(6,minmax(0,1fr))}
  .tf-bh{grid-row:span 2}
  .tf-bio{grid-template-columns:minmax(0,1fr)}
}
@container tfw (max-width:519px){
  .tf-res{grid-template-columns:minmax(0,1fr);grid-template-areas:"ans" "rows" "dial";gap:4px}
  .tf-dial{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);align-items:center;gap:14px;margin-top:12px}
  .tf-lg{margin-top:0}
  .tf-in,.tf-res,.tf-bd,.tf-bw,.tf-act{padding-left:14px;padding-right:14px}
  .tf-bulk summary{padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion:reduce){
  .tf-dial.is-ready .tf-hand,.tf-c u,.tf-num circle{transition:none}
}