/* 폰 정보 구조 - 위 페이지 탭 · 스와이프 · 내 앱 캐러셀 (2026-10-03 대표)
   「내앱(위젯) 모바일에선 스와이핑으로 하나씩 선택하게」
   「하단 메뉴말고 상단 페이지탭 스와이핑으로 전환가능」
   app.html 맨 마지막에 읽힌다 - 앞의 mobile.css · operations.css 의 아래 탭 막대 규칙을 이 파일이 덮는다.
   PC(768px 이상)는 손대지 않는다. 글자 단계는 폰 한 세트(20 · 16 · 14 · 12)를 따른다. */

/* 2026-10-03 bc84c660 의 폰 위 페이지 탭 줄 · 머리 오른쪽 만들기를 걷었다. 폰 하단 메뉴는 mobile.css · operations.css 의 원래 규칙이 맡는다. 스와이프는 페이지 안 위쪽 하위 탭을 넘긴다(app.html bindPageSwipe). */

/* ------------------------------------------------------------ 2. 내 앱 카드 - 폰은 한 장씩 넘기는 캐러셀 */
.mine-track { min-width:0; }
.mine-dots { display:none; }
@media (max-width:767px) {
  .operations-ui .mine-track {
    display:flex; align-items:stretch; gap:12px; margin:0 -16px; padding:4px 16px 8px;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding:0 16px;
    scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  }
  .operations-ui .mine-track::-webkit-scrollbar { display:none; }
  .operations-ui .mine-track > .mine-grid { display:contents; }
  /* 한 화면에 한 장이 크게, 다음 장 끝이 오른쪽에 32px 남짓 보여 넘길 수 있다는 것이 드러난다. */
  .operations-ui .mine-track .mine-card { flex:0 0 calc(100% - 40px); max-width:calc(100% - 40px); scroll-snap-align:start; scroll-snap-stop:always; }
  .operations-ui .mine-track .mine-card:only-child { flex-basis:100%; max-width:100%; }
  .operations-ui .mine-track .mine-card[data-size=small] { padding:12px 14px 14px; gap:10px; }
  .operations-ui .mine-dots { display:flex; justify-content:center; align-items:center; gap:8px; height:20px; margin:4px 0 0; }
  .operations-ui .mine-dots[hidden] { display:none; }
  .mine-dot { width:8px; height:8px; border-radius:50%; background:var(--color-gray-300); transition:width .15s, background-color .15s; }
  .mine-dot.on { width:20px; border-radius:4px; background:var(--primary); }
}

/* ------------------------------------------------------------ 3. 스케줄 > 시간대 > 재생목록 (timetable.js)
   글자 단계는 시트와 같다: 20 · 16 · 14. 누르는 자리 44px. */
.tt-plpick-list { display:grid; gap:8px; max-height:56vh; overflow-y:auto; }
.tt-plpick { display:flex; align-items:center; gap:12px; width:100%; min-height:64px; margin:0; padding:8px 12px;
  border:1px solid var(--color-gray-300); border-radius:12px; background:var(--bg); color:var(--text); text-align:left; font-weight:400; }
.tt-plpick:hover { background:var(--color-gray-100); }
.tt-plpick[aria-pressed="true"] { border-color:var(--primary); background:var(--color-blue-50); box-shadow:0 0 0 1px var(--primary) inset; }
.tt-plpick-img { flex:none; width:80px; height:45px; border-radius:6px; object-fit:cover; background:var(--color-gray-200); }
.tt-plpick-text { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.tt-plpick-text strong { font-size:16px; line-height:24px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt-plpick-text small { font-size:14px; line-height:20px; color:var(--text-sub); }
.tt-plpick.tt-plnew { justify-content:center; min-height:48px; border-style:dashed; color:var(--primary); font-size:16px; font-weight:600; }
.tt-plname { min-height:44px; font-size:16px; width:100%; box-sizing:border-box; }
.tt-plrow { display:flex; align-items:center; gap:12px; min-width:0; }
.tt-plrow .tt-plpick { flex:1 1 auto; min-width:0; }
.tt-plchange { flex:none; min-height:44px; margin:0; }
.tt-block-pl { font-size:14px; line-height:20px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
dialog.tt-sheet .tt-foot button { min-height:48px; }
.tt-slot-acts { display:grid; gap:8px; }
.tt-slot-acts button { min-height:48px; margin:0; }
/* 끌기 - 블록 옮기기 · 아래 끝 늘이기 · 빈 칸 끌어 만들기 · 내 재생목록 칩 끌어다 놓기 */
.tt-cal, .tt-week-body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.tt-block { touch-action:pan-y; -webkit-touch-callout:none; }
.tt-block .tt-resize { position:absolute; left:0; right:0; bottom:0; height:14px; cursor:ns-resize; touch-action:none; }
.tt-block .tt-resize::after { content:''; position:absolute; left:50%; bottom:4px; width:24px; height:4px; margin-left:-12px; border-radius:2px; background:var(--tt-c); opacity:.55; }
.tt-dragging .tt-block, .tt-dragging .tt-grid, .tt-dragging .tt-week-col { cursor:grabbing; }
.tt-block.tt-lifted { opacity:.35; }
.tt-ghost { position:absolute; z-index:5; pointer-events:none; display:flex; flex-direction:column; justify-content:flex-start; padding:4px 8px; box-sizing:border-box;
  border:2px dashed var(--primary); border-radius:8px; background:color-mix(in srgb, var(--primary) 12%, var(--bg)); color:var(--text); }
.tt-ghost.tt-clash { border-color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, var(--bg)); }
.tt-ghost { overflow:hidden; }
.tt-ghost-time { font-size:14px; line-height:20px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tt-ghost-note { font-size:14px; line-height:20px; color:var(--danger); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 짧은 칸(한 시간)에서 안의 글이 아래 칸 위로 새지 않게 */
.tt-block { overflow:hidden; }
.tt-mypl { display:grid; gap:8px; padding:12px 0 0; border-top:1px solid var(--color-gray-200); }
/* 시트 아래에 붙어 캘린더를 굴려도 칩이 늘 보인다 - 칩을 위쪽 시각으로 끌어갈 수 있게. */
dialog.tt-sheet .tt-mypl { position:sticky; bottom:0; z-index:6; margin:0 -4px; padding:10px 4px calc(8px + env(safe-area-inset-bottom)); background:var(--bg); box-shadow:0 -6px 12px -8px rgba(0,0,0,.18); }
.tt-mypl-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tt-mypl-head .tt-q { margin:0; }
.tt-mypl-head button { min-height:44px; margin:0; }
.tt-mypl-hint { margin:0; font-size:14px; line-height:20px; color:var(--text-sub); }
.tt-mypl-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:thin; }
.tt-mypl-chip { flex:none; display:flex; align-items:center; gap:8px; min-height:48px; max-width:220px; margin:0; padding:4px 12px 4px 4px;
  border:1px solid var(--color-gray-300); border-radius:999px; background:var(--bg); color:var(--text); font-size:14px; font-weight:600;
  touch-action:pan-x; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; cursor:grab; }
.tt-mypl-chip img, .tt-mypl-chip i { flex:none; width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--color-gray-200); }
.tt-mypl-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt-chip-float { position:fixed; z-index:1000; pointer-events:none; opacity:.92; box-shadow:var(--shadow-elevation-5, 0 8px 24px rgba(0,0,0,.2)); }
.tt-hold-on { outline:2px solid var(--primary); outline-offset:2px; }