/* 교시 종료 시각 계산기 — 하루 리본 + 교시 줄(2026-10-22). 결과 띠[종료 | 지금 | 합계] + 리본 → 조건 줄 → 교시 줄 → 복사·링크·인쇄.
   작업면 720px 이상은 결과 세 칸, 480~719px은 '종료 | 지금' + 합계 한 줄, 그보다 좁으면 위아래로 쌓는다(리본은 지금 아래).
   교시 줄은 520px 이상이면 두 열을 위에서 아래로(1~4 | 5~7), 머리 줄이 칸 이름을 대신한다. accent 는 '지금'(바늘·진행 중인 교시)에만. */
.pet{container:pet / inline-size}
.pet [hidden]{display:none!important}
.pet-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pet-ttl{margin:0;font-family:var(--sans)}
.pet-ttl b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.pet-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.pet-exl{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}

/* 결과 띠 */
.pet-sum{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"end now st" "rib rib rib";gap:16px 22px;padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.pet-end{grid-area:end;min-width:0}
.pet-end .v2-big{margin-top:6px;flex-wrap:wrap;row-gap:2px}
.pet-end .v2-big small{font-family:var(--sans);font-size:14px;font-weight:700}
.pet-end .v2-sub{margin-top:8px}
.pet-now{grid-area:now;min-width:0;padding-left:20px;border-left:1px solid var(--soft)}
.pet-nowt{margin:6px 0 0;font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.4;color:var(--ink)}
.pet-nowb{margin:2px 0 0;font-family:var(--sans);font-size:22px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.pet-nowb:empty{display:none}
.pet-now.is-on .pet-nowb{color:var(--accent)}
.pet-nowbar{display:block;height:4px;margin-top:10px;border-radius:2px;background:var(--soft);overflow:hidden}
.pet-nowbar i{display:block;width:0;height:100%;background:var(--muted);transition:width .6s ease}
.pet-now.is-on .pet-nowbar i{background:var(--accent)}
.pet-stats{grid-area:st;min-width:0;margin:0;display:grid;gap:8px;align-content:start;padding-left:20px;border-left:1px solid var(--soft)}
.pet-stats div{min-width:0}
.pet-stats dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.pet-stats dd{margin:1px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.pet-stats b{font-family:var(--sans);font-size:15px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.pet-stats span{font-family:var(--sans);font-size:12px;color:var(--muted)}

/* 하루 리본: 첫 시작 ~ 마지막 종료 = 100% */
.pet-rib{grid-area:rib;min-width:0;padding-top:14px}
.pet-track{position:relative;height:38px;border-radius:var(--radius);background:color-mix(in srgb,var(--soft) 55%,transparent)}
.pet-rb{position:absolute;top:0;bottom:0;display:grid;place-items:center;overflow:hidden;border:1px solid color-mix(in srgb,var(--fill) 45%,transparent);border-radius:3px;background:color-mix(in srgb,var(--fill) 22%,var(--paper));transition:left .32s ease,width .32s ease,border-color var(--ease)}
.pet-rb span{position:relative;font-family:var(--sans);font-size:11.5px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.pet-rb.is-tiny span{display:none}
.pet-rbf{position:absolute;top:0;bottom:0;left:0;width:0;background:color-mix(in srgb,var(--accent) 32%,transparent);transition:width .6s ease}
.pet-rb.is-now{border-color:var(--accent)}
.pet-rg{position:absolute;top:7px;bottom:7px;display:grid;place-items:center;overflow:hidden;border-radius:2px;transition:left .32s ease,width .32s ease}
.pet-rg.is-set{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 16%,transparent) 0 1.5px,transparent 1.5px 6px)}
.pet-rg span{font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--ink);background:color-mix(in srgb,var(--soft) 55%,var(--paper));padding:0 3px;border-radius:2px;white-space:nowrap}
.pet-rg span:empty{display:none}
.pet-rg.is-hot{outline:2px solid var(--ink);outline-offset:-1px}
.pet-needle{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--accent);z-index:2;pointer-events:none;transition:left .6s ease}
.pet-needle b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:1px;font-family:var(--sans);font-size:10.5px;font-weight:750;color:var(--accent);white-space:nowrap}
.pet-axis{position:relative;height:20px;margin-top:3px}
.pet-tk{position:absolute;top:0;width:1px;height:5px;background:var(--line)}
.pet-tk b{position:absolute;top:6px;left:0;transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.pet-rib.is-empty .pet-track{opacity:.5}

/* 조건 줄 */
.pet-set{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.pet-set .v2-input input[type="time"]{text-align:left}
.pet-msg{grid-column:1 / -1;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--accent)}

/* 교시 줄 */
.pet-sch{padding:12px 18px 14px;border-bottom:1px solid var(--soft)}
.pet-sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 10px}
.pet-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.pet-lh,.pet-r{display:grid;grid-template-columns:var(--kw,54px) minmax(0,1fr) 58px;align-items:center;gap:0 10px}
.pet-list .pet-lh--2{display:none} /* 한 열에서는 머리 줄 하나(검토 B1: 위 display:grid 가 덮었음) */
.pet-lh{padding:0 9px 0 11px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted)}
.pet-lh span{grid-row:1;white-space:nowrap}
.pet-lh span:nth-child(2){grid-column:2}
.pet-lh span:last-child{grid-column:2 / 4;justify-self:end}
.pet-r{position:relative;min-height:calc(var(--v2-ctl) + 10px);padding:4px 4px 4px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);transition:border-color var(--ease),background var(--ease)}
.pet-rk{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.pet-rt{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 5px;min-width:0;font-family:var(--sans);font-size:15.5px;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.pet-rt b{font-weight:750;white-space:nowrap}
.pet-rt i{font-style:normal;color:var(--muted)}
.pet-rn{flex-basis:100%;font-style:normal;font-size:11px;font-weight:600;color:var(--muted);line-height:1.3}
.pet-gf .v2-input input{padding:0 9px}
.pet-gf.is-set .v2-input{border-color:var(--ink)}
.pet-gf.is-set .v2-input input{font-weight:800}
.pet-rend{display:flex;align-items:center;justify-content:flex-end;min-height:var(--v2-ctl);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);text-align:right}
.pet-rbar{position:absolute;left:-1px;right:-1px;bottom:-1px;height:3px;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;pointer-events:none}
.pet-rbar i{display:block;width:0;height:100%;background:var(--accent);transition:width .6s ease}
.pet-r.is-now{border-color:var(--accent);background:color-mix(in srgb,var(--accent-wash) 55%,var(--paper))}
.pet-r.is-now .pet-rk{color:var(--accent)}
.pet-r.is-next{border-color:var(--line)}
.pet-r.is-done .pet-rt,.pet-r.is-done .pet-rk{opacity:.55}

/* 복사·인쇄 */
.pet-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 18px}
.pet-fa{display:inline-flex;flex-wrap:wrap;gap:6px}
.pet-foot .v2-status{margin:0;flex:1 1 220px;min-width:0}
.pet-ns{margin:0;padding:12px 18px;font-size:13px;color:var(--muted)}

@container pet (min-width:520px){
  .pet-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(var(--rows,4),auto);grid-auto-flow:column;column-gap:16px}
  .pet-lh--1{grid-row:1;grid-column:1}
  .pet-list .pet-lh--2{display:grid;grid-row:1;grid-column:2}
  .pet-list.is-one .pet-lh--2{display:none}
}
@container pet (min-width:520px) and (max-width:579px){ .pet-lh,.pet-r{column-gap:8px} .pet-rt{font-size:14px;column-gap:4px} } /* 두 열 문턱 바로 위에서 '09:00 – 09:50'이 꺾이지 않게(검토 R1) */
@container pet (max-width:719px){
  .pet-sum{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"end now" "rib rib" "st st"}
  .pet-stats{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 0 0;border-left:0;border-top:1px solid var(--soft)}
}
@container pet (max-width:599px){
  .pet-set{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container pet (max-width:479px){
  .pet-sum{grid-template-columns:minmax(0,1fr);grid-template-areas:"end" "now" "rib" "st";gap:14px}
  .pet-now{padding:12px 0 0;border-left:0;border-top:1px solid var(--soft)}
  .pet-stats{grid-template-columns:minmax(0,1fr);gap:6px}
  .pet-stats div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .pet-stats dd{justify-content:flex-end;text-align:right}
  .pet-lh,.pet-r{grid-template-columns:var(--kw,48px) minmax(0,1fr) 58px;gap:0 8px}
}
@media (prefers-reduced-motion:reduce){
  .pet-rb,.pet-rg,.pet-rbf,.pet-needle,.pet-rbar i,.pet-nowbar i{transition:none}
}
@media print{
  body.pet-printing > *:not(#petPrintRoot){display:none!important}
  body.pet-printing{background:#fff!important;margin:0}
  #petPrintRoot{display:none}
  body.pet-printing #petPrintRoot{display:block;font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Hiragino Sans","Yu Gothic","Segoe UI",sans-serif;color:#000}
  #petPrintRoot h2{margin:0 0 4pt;font-size:16pt}
  #petPrintRoot p{margin:0 0 10pt;font-size:10.5pt}
  #petPrintRoot table{width:100%;border-collapse:collapse;margin:0 0 10pt;font-size:13pt}
  #petPrintRoot th,#petPrintRoot td{padding:6pt 8pt;border:.5pt solid #b5ad9f;text-align:left}
  #petPrintRoot th{background:#f1ece3;font-size:10pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
#petPrintRoot{display:none}