/* ISO 날짜 ↔ 한국 시각 변환기 (2026-10-20). 글자 칸 + 해부 → 설정 줄 → 결과 판[답·태그·문장 | 날짜 이음매 띠 | 하루의 UTC 범위] → 표기 10줄 → 여러 줄 → 복사·링크.
   해부 칸 색은 툴 안 토큰(--ik-d 날짜·--ik-t 시각·--ik-f 소수 초·--ik-z 시간대), 강조색은 띠의 표식 하나. 툴 폭 600px 미만: 표기 한 열, 480px 미만: 띠 이름 칸 좁게·6시/18시 눈금 글자 숨김.
   움직임: 띠의 날짜 칸·눈금·말풍선·표식이 새 순간으로 옮겨 감(400ms, transitions.dev --ease-smooth-out). 동작 줄이기면 끔. 테마 --ease는 120ms 포함이라 시간 뒤에 쓰지 않음. */
.ik-work{container:ikw / inline-size;--ik-d:#2c5f8a;--ik-t:#3d6b2f;--ik-f:#8a5a12;--ik-z:#8b2f6b;--ik-w:#5a4a30;--ik-out:cubic-bezier(.22,1,.36,1)}
:root[data-theme="dark"] .ik-work{--ik-d:#8fb8de;--ik-t:#a5c98a;--ik-f:#e0b066;--ik-z:#e39ac9;--ik-w:#cdbb9c}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ik-work{--ik-d:#8fb8de;--ik-t:#a5c98a;--ik-f:#e0b066;--ik-z:#e39ac9;--ik-w:#cdbb9c} }

/* 입력 + 해부 */
.ik-in{padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.ik-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.ik-input input{text-align:left;font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:0}
.ik-anat{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 2px;margin-top:10px}
.ik-anat[hidden]{display:none}
.ik-sg{--c:var(--muted);display:inline-flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%}
.ik-sg code{box-sizing:border-box;max-width:100%;padding:3px 6px 4px;border-top:3px solid var(--c);border-radius:0 0 3px 3px;background:color-mix(in srgb,var(--c) 10%,transparent);font-family:var(--mono);font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.ik-sg small{padding:3px 6px 0;font-family:var(--sans);font-size:11px;font-weight:700;line-height:1.2;color:var(--c);white-space:nowrap}
.ik-sg[data-t="d"],.ik-sg[data-t="n"]{--c:var(--ik-d)}
.ik-sg[data-t="t"],.ik-sg[data-t="p"]{--c:var(--ik-t)}
.ik-sg[data-t="f"]{--c:var(--ik-f)}
.ik-sg[data-t="z"]{--c:var(--ik-z)}
.ik-sg[data-t="w"],.ik-sg[data-t="x"]{--c:var(--ik-w)}
.ik-sg[data-t="b"]{--c:var(--accent)}
.ik-sg[data-bad] code{border-top-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);text-decoration:underline wavy var(--accent) 1px;text-underline-offset:4px}
.ik-sg[data-bad] small{color:var(--accent)}
.ik-sg[data-warn] code{border-top-style:dashed}
.ik-gap{padding:7px 1px 0;font-family:var(--mono);font-size:14px;line-height:1.35;color:var(--muted);white-space:pre}
.ik-fmt{margin:9px 0 0;line-height:1.55}
.ik-fmt b{color:var(--ink);font-weight:700}
.ik-fmt.is-error{color:var(--accent)}
.ik-note{display:block;margin-top:2px;color:var(--ink)}
.ik-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ik-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);cursor:pointer;transition:background 150ms ease,border-color 150ms ease}
.ik-chips button:hover{background:var(--btn);border-color:var(--line)}

/* 설정 줄 */
.ik-opt{display:flex;flex-wrap:wrap;align-items:end;gap:10px 16px;padding:12px 18px 14px;border-bottom:1px solid var(--soft)}
.ik-opt > .v2-f > .v2-label{display:block;margin:0 0 5px}
.ik-onz{flex:0 0 auto}
.ik-onz .v2-seg{flex-wrap:nowrap}
.ik-onz .v2-seg button{height:var(--v2-ctl,42px)}
.ik-otz{flex:1 1 200px}
.ik-opick{flex:1 1 230px}
.ik-ctl{display:block;box-sizing:border-box;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
.ik-ctl:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
select.ik-ctl{padding-right:6px;text-overflow:ellipsis}

/* 결과 판 */
.ik-res{container:ikr / inline-size;padding:18px 18px 16px}
.ik-big{margin-top:6px;font-size:clamp(16px,calc(158cqi / var(--len,12)),44px)}
.ik-big:not(.is-empty){white-space:nowrap}
.ik-tags{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0}
.ik-tags:empty{display:none}
.ik-tags span{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.ik-tags span.is-shift{border-color:var(--fill);background:var(--fill);color:var(--on-fill)}
.ik-sent{margin:10px 0 0;font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1.55;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.ik-sent:empty{display:none}

/* 날짜 이음매 띠: 줄마다 [이름 | 시간축], 표식은 모든 줄을 가로지름 */
.ik-seam{margin:16px 0 0}
.ik-seam-l{margin:0 0 6px}
.ik-lanes{--lw:86px;position:relative;display:grid;gap:6px}
.ik-lane{display:grid;grid-template-columns:var(--lw) minmax(0,1fr);align-items:stretch}
.ik-lane[hidden]{display:none}
.ik-ln{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding-right:8px;font-family:var(--sans);line-height:1.2}
.ik-ln b{overflow:hidden;font-size:12.5px;font-weight:800;color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.ik-ln small{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.ik-tr{position:relative;height:56px;overflow:hidden;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.ik-dy{position:absolute;top:0;bottom:0;overflow:hidden;border-left:1px solid var(--line)}
.ik-dy.is-cur{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.ik-lane.is-tgt .ik-dy.is-cur{background:color-mix(in srgb,var(--ink) 13%,transparent)}
.ik-dy em{position:absolute;top:5px;left:6px;font-family:var(--sans);font-size:11.5px;font-style:normal;font-weight:700;color:var(--ink);white-space:nowrap}
.ik-tk{position:absolute;bottom:0;width:0;height:7px;border-left:1px solid var(--line);text-decoration:none}
.ik-tk[hidden]{display:none}
.ik-tk u{position:absolute;bottom:8px;left:0;transform:translateX(-50%);font-family:var(--sans);font-size:9.5px;font-weight:600;line-height:1;color:var(--muted);text-decoration:none;font-variant-numeric:tabular-nums}
.ik-bub{position:absolute;top:31px;z-index:2;transform:translate(-50%,-50%);padding:1px 6px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:800;line-height:1.35;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ik-bub.is-l{transform:translate(0,-50%)}
.ik-bub.is-r{transform:translate(-100%,-50%)}
.ik-mk{position:absolute;top:-4px;bottom:-4px;left:calc(var(--lw) + (100% - var(--lw)) * var(--p,0));z-index:1;width:2px;margin-left:-1px;background:var(--accent);pointer-events:none}
.ik-mk[hidden]{display:none}
.ik-lanes.is-anim .ik-dy{transition:left 400ms var(--ik-out),width 400ms var(--ik-out)}
.ik-lanes.is-anim .ik-tk,.ik-lanes.is-anim .ik-bub,.ik-lanes.is-anim .ik-mk{transition:left 400ms var(--ik-out)}
.ik-day{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink)}
.ik-day span{flex:1 1 260px;min-width:0}
.ik-day code{padding:1px 4px;border-radius:3px;background:color-mix(in srgb,var(--ink) 7%,transparent);font-family:var(--mono);font-size:12px;white-space:nowrap}
.ik-cp{flex:none;height:26px;padding:0 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted);cursor:pointer;transition:background 150ms ease,color 150ms ease}
.ik-cp:hover:not(:disabled){background:var(--btn);color:var(--ink)}
.ik-cp:disabled{opacity:.5;cursor:default}

/* 표기 10줄 */
.ik-fm{padding:14px 18px 16px;border-top:1px solid var(--soft)}
.ik-fm > .v2-label{margin:0}
.ik-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;margin:8px 0 0;padding:0;list-style:none}
.ik-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l c" "v v";align-items:center;gap:3px 8px;padding:8px 0;border-top:1px solid var(--soft)}
.ik-rows li > span{grid-area:l;min-width:0;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.ik-rows li > .ik-cp{grid-area:c;height:24px}
.ik-rows li > b{grid-area:v;min-width:0;font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ik-rows li > b i{font-style:normal;font-weight:800;color:var(--ik-z)}

/* 여러 줄 */
.ik-bulk{border-top:1px solid var(--soft)}
.ik-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)}
.ik-bulk summary::-webkit-details-marker{display:none}
.ik-bulk summary::before{content:"+";flex:none;width:14px;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--muted)}
.ik-bulk[open] summary::before{content:"−"}
.ik-bw{padding:0 18px 16px}
.ik-bw > .v2-hint{margin:0;line-height:1.55}
.ik-bmode{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0}
.ik-bio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ik-bcol{min-width:0}
.ik-bcol > .v2-label{display:block;margin:0 0 5px}
.ik-bcol textarea,.ik-bout{box-sizing:border-box;width:100%;min-height:160px;margin:0;padding:9px 10px;border-radius:var(--radius);font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink)}
.ik-bcol textarea{display:block;resize:vertical;border:1px solid var(--line);background:var(--paper)}
.ik-bcol textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.ik-bout{max-height:360px;overflow:auto;border:1px solid var(--soft);background:var(--card);white-space:pre-wrap;overflow-wrap:anywhere}
.ik-bout.is-empty{font-family:var(--sans);font-size:13px;color:var(--muted)}
.ik-bfoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:9px}
.ik-bfoot .v2-hint{flex:1 1 220px;margin:0}

.ik-act{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.ik-act .v2-status{flex:1 1 180px;margin:0}

/* 본문의 코드 글자(이 툴 페이지에서만 불러옴) */
.v2-article code{padding:1px 4px;border-radius:3px;background:color-mix(in srgb,var(--ink) 6%,transparent);font-family:var(--mono);font-size:.9em;overflow-wrap:anywhere}
.v2-article pre.ik-code{margin:12px 0;padding:12px 14px;overflow-x:auto;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink)}
.v2-article pre.ik-code code{padding:0;background:none;font-size:inherit;overflow-wrap:normal}

@container ikw (max-width:599px){
  .ik-rows{grid-template-columns:minmax(0,1fr)}
  .ik-bio{grid-template-columns:minmax(0,1fr)}
}
@container ikw (max-width:479px){
  .ik-in,.ik-opt,.ik-res,.ik-fm,.ik-bw,.ik-act{padding-left:14px;padding-right:14px}
  .ik-bulk summary{padding-left:14px;padding-right:14px}
  .ik-input input{font-size:14px}
  .ik-lanes{--lw:62px}
  .ik-dy em{left:4px;font-size:10.5px}
  .ik-tk.is-6 u{display:none}
  .ik-onz{flex:1 1 100%}
}
@container ikw (max-width:399px){ .ik-input input{font-size:13px} }
@media (prefers-reduced-motion: reduce){
  .ik-lanes .ik-dy,.ik-lanes .ik-tk,.ik-lanes .ik-bub,.ik-lanes .ik-mk{transition:none}
}