/* 반복 시각 목록 계산기 — 역 시각표 보드(2026-10-22). 머리 → 예시 띠 → 조건(폼 3칸 + 규칙 줄 + 간격 칩) → 요약 띠 → 시각표 보드 → 복사 줄.
   시각표는 시 줄(굵은 시 | 분 칸)을 여러 단으로 놓아 빈 폭을 남기지 않는다. 단 너비는 한 시에 놓인 분 칸 수(--per, 최대 6)로 정하고,
   단마다 줄 수는 스크립트가 고르게 나눈다(10줄 4단 = 3·3·2·2, 마지막 단에 한 줄만 남지 않게).
   값이 바뀌면 분 칸이 차례로 위에서 뒤집혀 들어온다(R45, 역 발차표의 플립). 동작 줄이기면 멈춘다. */
.rtm{container:rtm / inline-size}
.rtm [hidden]{display:none!important}
.rtm-ttl{margin:0;font-family:var(--sans)}
.rtm-ttl b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.rtm-exl{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}

/* 예시 띠 */
.rtm-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 18px;border-bottom:1px solid var(--soft)}
.rtm-ex .v2-seg button,.rtm-chips .v2-seg button{height:28px;padding:0 10px}

/* 조건: 첫 시각 | 끝 시각(또는 개수) | 간격(시간 + 분) */
.rtm-set{display:grid;gap:12px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.rtm-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr);gap:12px 14px;margin:0}
.rtm-f > .v2-label{display:block;margin:0 0 5px}
.rtm-f input[type="time"]{text-align:left;padding:0 10px}
.rtm-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.rtm-err{margin:-4px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--accent)}
.rtm-rule{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.rtm-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
@container v2in (max-width:460px){
  .rtm-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rtm-f--iv{grid-column:1 / -1}
}

/* 요약 띠: 큰 수 | 네 칸 */
.rtm-sum{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:14px 24px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--soft)}
.rtm-tot{min-width:0}
.rtm-tot .v2-big{margin-top:6px;flex-wrap:wrap;column-gap:6px}
.rtm-tot .v2-big span{white-space:nowrap}
.rtm-tot .v2-big small{color:var(--accent)}
.rtm-tot .v2-big.is-empty{font-size:46px;opacity:.35}
.rtm-tot .v2-sub{margin-top:8px;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted)}
.rtm-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--soft);border:1px solid var(--soft)}
.rtm-stats div{min-width:0;padding:8px 10px;background:var(--card)}
.rtm-stats dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.rtm-stats dd{min-height:2.75em;margin:3px 0 0;font-family:var(--sans);font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums}
.rtm-stats dd small{display:block;margin-top:1px;font-size:11.5px;font-weight:500;line-height:1.4;color:var(--muted)}
.rtm.is-wait .rtm-stats{opacity:.55}
@container rtm (min-width:880px){ .rtm-stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
@container rtm (max-width:560px){ .rtm-sum{grid-template-columns:minmax(0,1fr)} }

/* 시각표 보드: 날 머리 → 시 줄(시 | 분 칸)을 여러 단으로 */
.rtm-board{padding:12px 18px 14px;border-bottom:1px solid var(--soft)}
.rtm-bh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 10px}
.rtm-cnt{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rtm-tt{--per:2;--hw:3.1em}
.rtm-day + .rtm-day{margin-top:14px}
.rtm-dh{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink)}
.rtm-dh small{font-size:11.5px;font-weight:700;color:var(--accent)}
.rtm-dh::after{content:"";flex:1;align-self:center;border-top:1px solid var(--soft)}
.rtm-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--hw) + 1.4em + var(--per) * 2.75em)),1fr));border-top:2px solid var(--ink);border-right:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.rtm-hr{display:grid;grid-template-columns:var(--hw) minmax(0,1fr);border-left:1px solid var(--soft);border-bottom:1px solid var(--soft)} /* 스크립트가 단마다 줄 수를 고르게 나눠 위에서 아래로 놓는다(balance) */
.rtm-hr.is-bottom{border-bottom-color:transparent} /* 맨 아래 줄은 판의 아래선이 대신한다 */
.rtm-hr b{display:flex;align-items:center;justify-content:flex-end;padding:0 9px 0 4px;background:var(--wash);border-right:1px solid var(--soft);font-family:var(--sans);font-size:17px;font-weight:800;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.rtm-hr span{display:grid;grid-template-columns:repeat(var(--per),max-content);align-content:center;gap:4px;padding:5px 8px} /* 한 시에 12칸(5분)이면 6 + 6 = 정각~25분 / 30~55분 */
.rtm-hr i{display:inline-grid;place-items:center;min-width:2.35em;height:26px;padding:0 4px;border:1px solid var(--soft);border-radius:3px;background:linear-gradient(var(--paper) 50%,color-mix(in srgb,var(--wash) 75%,var(--paper)) 50%);font-style:normal;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;cursor:default;transform-origin:50% 0}
.rtm-hr i:hover{border-color:var(--ink)}
.rtm-tt.is-h12{--hw:3.7em}
.rtm-tt.is-h12 .rtm-hr b{flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;font-size:15px}
.rtm-hr b small{font-size:10.5px;font-weight:700;line-height:1;color:var(--muted)} /* 12시간제: 오전·오후(작게) 위, 시 아래 */
.rtm-empty{margin:0;padding:16px 0;font-family:var(--sans);font-size:13px;color:var(--muted)}
@keyframes rtmFlip{from{opacity:0;transform:perspective(160px) rotateX(-85deg)}to{opacity:1;transform:none}}
.rtm.is-flip .rtm-hr i{animation:rtmFlip .34s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i) * 14ms)}
@media (prefers-reduced-motion:reduce){ .rtm.is-flip .rtm-hr i{animation:none} }

/* 번호 목록 보기 */
.rtm-ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5em,1fr));margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.rtm-ol li{display:grid;grid-template-columns:2.3em minmax(0,1fr) auto;align-items:baseline;gap:6px;padding:6px 8px;border-bottom:1px solid var(--soft);font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums}
.rtm-ol b{font-size:11.5px;font-weight:600;color:var(--muted);text-align:right}
.rtm-ot{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px;min-width:0;font-size:14.5px;font-weight:700;color:var(--ink)}
.rtm-ot > *{white-space:nowrap} /* 시각과 +N일은 각각 붙여 두고, 칸이 좁으면 +N일만 다음 줄로 */
.rtm-ot em{font-style:normal;font-size:11px;font-weight:700;color:var(--accent)}
.rtm-ol small{font-size:11.5px;color:var(--muted)}

/* 복사 줄 */
.rtm-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 18px}
.rtm-fmt{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.rtm-fa{display:inline-flex;flex-wrap:wrap;gap:8px}
.rtm-foot .v2-status{flex:1 1 100%;margin:0}
.rtm-ns{margin:0;padding:0 18px 14px;font-family:var(--sans);font-size:13px}

@container rtm (max-width:480px){
  .rtm-ex,.rtm-set,.rtm-sum,.rtm-board,.rtm-foot{padding-left:14px;padding-right:14px}
  .rtm-tot .v2-big{font-size:40px}
  .rtm-hr b{font-size:15px;padding-right:7px}
  .rtm-hr span{gap:3px;padding:5px 6px}
  .rtm-hr i{min-width:2.1em;font-size:13px}
  .rtm-tt.is-h12 .rtm-hr b{font-size:14px;padding-right:6px}
}