/* ============================================================
   Triplanner 일정 시간표·소요 시간 — 신규 클래스 (접두 tt-)
   이 파일은 design/ 안의 시안용이다. 구현 때 public/style.css 의 새 구역
   (「일정 시간표·소요 시간 (tt-)」 머리 주석 아래)로 옮긴다(handoff 0장).
   - 신규 CSS 변수 없음, 신규 @keyframes 1개(ttNext). 색은 :root 의 기존 토큰만 쓴다(--blue·--blue-bg·--bg2·--line2·--fg·--fg2·--fg3·--warn-*·--danger).
   - font-size 는 모두 calc(Npx*var(--fs)). 입력은 .se-inp/.se-sel 의 max(16px, …) 를 그대로 쓴다.
   - 누름 영역은 모두 44px 이상. 보이는 상자가 작은 빈 칸은 「누름 상자 44px + 안쪽 보이는 상자 36px」로 만든다(이웃 칸과 누름 영역이 겹치지 않는다).
   - 시트·칩·알약·접기 줄은 기존 부품(.se-*, .se-date, .mt-fold, .mt-btn, .se-note)을 그대로 쓴다.
   ============================================================ */

/* ---------- 카드 시각 줄: 범위 표기·「다음 날」 꼬리표(D17) ---------- */
.ev-t{font-variant-numeric:tabular-nums}
.tt-nd{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--line2);border-radius:4px;background:var(--bg2);color:var(--fg2);font-size:calc(11px*var(--fs));font-weight:600;letter-spacing:0;line-height:1.5;vertical-align:1px;white-space:nowrap}

/* ---------- 편집 모드 안내 줄(두 문장, 각각 한 덩이) ----------
   현행 margin:-4px 는 첫 줄 윗부분이 고정 영역(.days-sticky 아래 여백 18px)에 4px 가려진다 — 시안은 0으로 맞춘다(handoff 0장 4항 확인) */
.sch-edit-note{margin:0 0 14px}
.sch-edit-note span{display:block}

/* ---------- 빈 시간 칸(편집 모드의 .tl 안, 소유자·편집자만) ----------
   누름 상자(.tt-slot) = 44px, 보이는 상자(.tt-slot-in) = 36px 점선. 칸 사이 보이는 간격 8px, 누름 영역은 맞닿되 겹치지 않는다.
   타임라인 점(::before)은 일정 카드 점(10px)보다 작은 6px 빈 점 — 「아직 비어 있는 시각」. */
.tt-slot,.tt-run{position:relative;display:flex;align-items:stretch;width:100%;min-height:44px;padding:4px 0;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tt-slot::before,.tt-run::before{content:'';position:absolute;left:-22.5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;border:1.5px solid var(--line2);background:var(--bg)}
.tt-slot-in,.tt-run-in{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:0 12px;border:1px dashed var(--line2);border-radius:8px;transition:background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}
.tt-slot-t{font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tt-slot-add{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:calc(12px*var(--fs));font-weight:700;color:var(--blue);white-space:nowrap}
.tt-slot-add svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tt-slot:active .tt-slot-in{background:var(--blue-bg);border-color:var(--blue)}
.tt-slot:focus-visible,.tt-run:focus-visible{outline:none}
.tt-slot:focus-visible .tt-slot-in,.tt-run:focus-visible .tt-run-in{outline:2px solid var(--blue);outline-offset:2px}
/* 카드·지운 줄과의 간격: 칸이 카드 바로 앞뒤에 올 때 */
.ev:has(+ .tt-slot),.ev:has(+ .tt-run),.ev--exp:has(+ .tt-slot),.ev--exp:has(+ .tt-run){padding-bottom:12px;margin-bottom:0}
.tt-slot:has(+ .ev),.tt-slot:has(+ .ev-undo),.tt-run:has(+ .ev){margin-bottom:12px}
.ev-undo:has(+ .tt-slot),.ev-undo:has(+ .tt-run),.tt-run:has(+ .ev-undo){margin-bottom:12px}
/* 칸 앞 카드는 padding-bottom 22 → 12 라 현행 강조 바탕(.ev.flash::after bottom:16px)이 4px 모자란다 — 6px 로 맞춘다(L6). 카드가 22px 일 때 바탕 아래 여백이 6px */
.ev.flash:has(+ .tt-slot)::after,.ev.flash:has(+ .tt-run)::after{bottom:6px}
/* 고정 영역(.days-sticky: 일차 탭 + 편집 띠 + 아래 여백)에 칸이 가려지지 않게 — 초점·scrollIntoView 가 이 값만큼 내려 받는다(1.3배에서 고정 영역이 커지면 값을 키운다) */
.tt-slot,.tt-run{scroll-margin-top:calc(var(--hdr-height) + var(--tab-panel-gap) + 160px)}
/* 오프라인(편집 모드 중 끊김): 점선 유지 + 바탕 + 글자 흐림. 눌러도 이유 토스트만(D8·2.6) */
.tt-slot[aria-disabled="true"]{cursor:default}
.tt-slot[aria-disabled="true"] .tt-slot-in{background:var(--bg2)}
.tt-slot[aria-disabled="true"] .tt-slot-t,.tt-slot[aria-disabled="true"] .tt-slot-add{color:var(--fg3)}
/* 저장 뒤 「다음 빈 칸」 강조(D10) — 새 카드 강조(.ev.flash, 바탕이 서서히 사라짐)와 구분: 점선이 파랑 실선으로 바뀌고 바깥으로 번지는 고리가 두 번 지나간다.
   JS 가 2.4초 뒤 .next 를 뺀다(포커스는 그대로 남는다). 움직임 줄이기: 고리 없이 파랑 실선·바탕만 2.4초 */
.tt-slot.next .tt-slot-in{border-style:solid;border-color:var(--blue);background:var(--blue-bg);animation:ttNext 1.2s cubic-bezier(.4,0,.2,1) 2}
.tt-slot.next .tt-slot-t{color:var(--blue)}
@keyframes ttNext{0%{box-shadow:0 0 0 0 var(--blue)}70%,100%{box-shadow:0 0 0 8px transparent}}
@media (prefers-reduced-motion:reduce){.tt-slot.next .tt-slot-in{animation:none}.tt-slot-in,.tt-run-in{transition:none}}

/* 「연속 빈 칸 묶기」 대안(R1) — 하루 칸이 17개 이상일 때 연속 3칸 이상을 한 줄로 접는다. 펼침 버튼 한 줄이 곧 머리 */
.tt-run-in{background:var(--bg2)}
.tt-run-t{flex:1;min-width:0;font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg2);font-variant-numeric:tabular-nums;line-height:1.35}
.tt-run-t small{display:block;font-size:calc(11px*var(--fs));font-weight:500;color:var(--fg2)}
.tt-run-in svg{width:16px;height:16px;flex:none;stroke:var(--fg2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.tt-run[aria-expanded="true"] svg{transform:rotate(180deg)}
.tt-run[aria-expanded="true"] .tt-run-in{background:var(--bg)}
@media (prefers-reduced-motion:reduce){.tt-run-in svg{transition:none}}

/* ---------- 편집 모드 끝 시간표 요약 줄(D19) — .ev-undo 와 같은 가족(둥근 10px 상자), 실선 ---------- */
.tt-sum-row{display:none;align-items:center;gap:8px;margin-top:22px;padding:4px 4px 4px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.is-editing .tt-sum-row{display:flex}
.tt-sum-tx{flex:1;min-width:0;word-break:keep-all}
.tt-sum-tx small{display:block;font-size:calc(11px*var(--fs));font-weight:600;color:var(--fg2);line-height:1.4}
.tt-sum-tx b{display:block;font-size:calc(13px*var(--fs));font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1.4}
.tt-sum-btn{flex:none;min-height:44px;min-width:64px;padding:0 14px;border:1px solid var(--line2);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit;font-size:calc(13px*var(--fs));font-weight:600;white-space:nowrap;cursor:pointer}
.tt-sum-btn:active{background:var(--bg2)}
.tt-sum-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tt-sum-btn[aria-disabled="true"]{color:var(--fg3);border-style:dashed;cursor:default}

/* ---------- 편집 시트: 소요 시간 칩(.tt-chip) — 선택 모양은 날짜 칩(.se-date[aria-checked])과 같다 ---------- */
.tt-chips{display:flex;flex-wrap:wrap;gap:6px}
.tt-chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:8px;background:var(--bg);color:var(--fg2);font:inherit;font-size:calc(13px*var(--fs));font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3;white-space:nowrap;cursor:pointer;transition:transform .15s cubic-bezier(.4,0,.2,1)}
.tt-chip:active{transform:scale(.96)}
.tt-chip[aria-checked="true"]{background:var(--fg);border-color:var(--fg);color:#fff}
.tt-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 잠김(시작 미정, D13): aria-disabled — 점선 + 흐림, 눌러도 아무 일 없다(읽는 이름에 이유) */
.tt-lock .tt-chip{background:var(--bg2);border-style:dashed;color:var(--fg3);cursor:default}
.tt-lock .tt-chip:active{transform:none}
@media (prefers-reduced-motion:reduce){.tt-chip{transition:none}.tt-chip:active{transform:none}}
/* 「직접 입력」 펼침 상자 */
.tt-custom{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.tt-custom .se-lbl{margin-bottom:6px}
.tt-calc{margin-top:10px;font-size:calc(13px*var(--fs));font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1.45}
.tt-calc.nd{color:var(--warn-text);background:var(--warn-bg);padding:7px 10px;border-radius:8px}
.tt-calc.bad{color:var(--danger)}
.se-f .tt-note{margin-top:8px}

/* ---------- 시각 고르기 칩 시안(Q2) — 시 칩 + 분 칩 ---------- */
.tt-pk-lbl{margin:12px 0 6px;font-size:calc(11px*var(--fs));font-weight:600;color:var(--fg2)}
.tt-pk-lbl:first-child{margin-top:0}
.tt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.tt-grid.m4{grid-template-columns:repeat(4,1fr)}
.tt-grid .tt-chip{min-width:0;padding:0}
.tt-grid.w{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
.tt-chip small{display:block;font-size:calc(11px*var(--fs));font-weight:500;line-height:1.2}
.tt-grid .tt-chip:has(small){flex-direction:column;padding:4px 0}
.tt-pk-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.tt-pk-hd .tt-pk-lbl{margin:0}
.tt-fold{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 0 0 12px;border:0;background:none;font:inherit;font-size:calc(12px*var(--fs));font-weight:600;color:var(--blue);cursor:pointer;white-space:nowrap}
.tt-fold svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.tt-fold[aria-expanded="true"] svg{transform:rotate(180deg)}
.tt-fold:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:6px}
.se-lbl em.tt-val{font-weight:700;color:var(--fg)}
.tt-pk.tt-lock .tt-chip{background:var(--bg2)}
@media (prefers-reduced-motion:reduce){.tt-fold svg{transition:none}}

/* ---------- 여행 만들기 2단계·여행 설정 「일정 시간표」 묶음 ---------- */
.tt-sumline{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--bg)}
.tt-sumline-tx{flex:1;min-width:0;font-size:calc(14px*var(--fs));font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;word-break:keep-all}
.tt-sumline .tt-sum-btn{background:var(--bg)}
.tt-edit{margin-top:10px;padding:12px 12px 4px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.tt-edit .se-f{margin-bottom:16px}
.tt-edit .se-sel{width:100%}
.tt-edit .tt-chips .tt-chip{min-width:56px}

/* (마스크의 #000 은 색이 아니라 투명도 값이다 — 가장자리만 흐리게) */
/* ---------- 칩 시안 · 압축(가로 한 줄) — 시 칩 24개를 한 줄로 밀어 보고, 분은 네 칩 + 「5분」 ----------
   시간표 범위 밖 시(.out)는 글자만 흐리다(칩은 그대로 눌린다). 라벨(시·분)은 줄 왼쪽에 붙여 줄 수를 줄인다 */
.tt-line{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tt-line .tt-pk-lbl{flex:none;width:16px;margin:0}
.tt-scroll{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0;mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.tt-scroll::-webkit-scrollbar{display:none}
.tt-scroll .tt-chip{flex:none;min-width:48px;padding:0;scroll-snap-align:center}
.tt-chip.out:not([aria-checked="true"]){color:var(--fg3)}
.tt-chips2{flex:1;min-width:0;display:flex;gap:6px}
.tt-chips2 .tt-chip{flex:1 1 0;min-width:0;padding:0}
.tt-chips2.open{display:grid;grid-template-columns:repeat(6,1fr)}
.tt-chip.tt-dash{border-style:dashed}
.tt-chip.tt-dash[aria-expanded="true"]{border-style:solid;border-color:var(--fg2);color:var(--fg)}
.tt-pk2 .tt-grid{margin:0 0 6px 24px}