@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --fs:1; /* #74 글자 크기 배율 (1 | 1.15 | 1.3) — app.js applyFontScale()가 설정. 텍스트만 확대, 레이아웃 px 유지 */
  --bg:#fff;
  --bg2:#f8f8f8;
  --fg:#0a0a0a;
  --fg2:#555;
  --fg3:#6B7280; /* #114: #999(흰 바탕 2.85:1)에서 #6B7280(4.83:1, 흰 바탕·--bg2 위 4.5:1 이상)으로. 어두운 바탕(잠금·뷰어·시트)에서는 쓰이지 않는다(전수 확인) */
  --line:#eee;
  --line2:#e0e0e0;
  --blue:#2563eb;
  --blue-bg:#eff4ff;
  --lock-bg:#0c1220;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);   /* #123: 가로 화면 전체 화면 모드의 좌우 안전 영역 */
  --safe-right:env(safe-area-inset-right,0px);
  --hdr-height:0px; /* #96: app.js가 .hdr의 실제 높이를 측정해 갱신 — 장소 필터의 sticky 기준점 */
  --tab-panel-gap:10px; /* 탭 네비게이션과 각 탭 본문 사이의 기본 여백 — 장소 필터도 sticky일 때 유지.
     2026-09-22 사용자 지적으로 20px에서 줄였다("탭 네비게이션과의 여백도 좀 눈에 거슬리게 크고").
     .main 위쪽 패딩·일정 일차 버튼과 장소 컨트롤 줄의 sticky 기준점·그 위를 덮는 배경 네 곳이
     이 값을 함께 쓰므로 한 곳만 고치면 어긋난다 */
  --stt-offset: calc(20px + env(safe-area-inset-bottom,34px)); /* #95: #safe-bottom(네이비 하단 띠) 높이와 문자 그대로 같은 식 — 다른 값을 쓰면 알약이 띠 밑에 파묻힌다 */
  --tw-red:#E8001C;     /* PDF 문서 아이콘 색(.dc-ic.pdf·.dps-ic.pdf). 항공 카드는 쓰지 않는다 */
  --tw-red-hover:#C50018;
  --tw-red-bg:#fff0f1;
  --sheet-bg:#111827;
  --danger:#DC2626;
  --danger-hover:#B91C1C;
  --danger-active:#991B1B;
  --danger-bg:#FEF2F2;
  --danger-bg-active:#FEE2E2;
  --success:#166534;
  --success-text:#166534;
  --success-bg:#f0fdf4;
  --warn-text:#92400E;
  --warn-bg:#FFF7E6;
  --blue-hover:#1d4ed8;
  --blue-active:#1e40af;
  --dc-navy-line:#2b3850;
  --dc-navy-line2:#3a4a6a;
  --dc-navy-warn-bg:#2a2108;
  --dc-navy-warn-fg:#fcd34d;
  --dc-navy-danger:#f87171;
}

html{
  background:var(--lock-bg);
  font-family:'Inter','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:calc(14px*var(--fs));
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  /* Safari Liquid Glass: body-level 스크롤이 있어야 toolbar 투명 처리됨.
     overflow/height 제한 없이 body가 자연스럽게 스크롤되도록 함. */
}
html.unlocked{background:var(--bg)}
body{background:var(--bg);color:var(--fg);}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}

/* ===== LOCK ===== */
.lock{
  position:fixed;top:0;left:0;right:0;z-index:9999;background:var(--lock-bg);
  bottom:calc(-1 * env(safe-area-inset-bottom,34px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-bottom:100px;
  transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);
  isolation:isolate;overflow:hidden;
}
.lock::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(255,255,255,.03) 0%,transparent 100%);
  pointer-events:none;
}
.lock.out{opacity:0;transform:scale(1.02);pointer-events:none;filter:blur(8px)}

/* 브랜드 마크(t. — Inter 800 t 윤곽 + 블루 점). 스플래시·잠금·점검·헤더가 같은 SVG를 쓴다. DESIGN.md 「브랜딩·첫 화면」 */
.brand-mark{display:block;overflow:visible}
.brand-mark .bm-t{fill:#fff}
.brand-mark .bm-dot{fill:var(--blue)}
.brand-mark .bm-tile{fill:var(--lock-bg)}

/* Lock — 브랜드 마크 */
.lock-char{
  position:relative;z-index:2;
  width:88px;height:96px;margin-bottom:22px;
  animation:lockCharIn 1.0s cubic-bezier(.34,1.56,.64,1) .15s both;
}
@keyframes lockCharIn{
  from{opacity:0;transform:translateY(20px) scale(.86)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Lock — 브랜드 타이틀 블록 */
.lock-title-block{
  position:relative;z-index:1;text-align:center;
  animation:lockTitleIn .8s cubic-bezier(.4,0,.2,1) .6s both;
}
@keyframes lockTitleIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.lock-brand{
  font-size:calc(42px*var(--fs));font-weight:800;color:#fff;
  letter-spacing:-2px;line-height:1;
}
.lock-sub{
  margin-top:8px;font-size:calc(13px*var(--fs));
  color:rgba(255,255,255,.55);letter-spacing:.5px; /* 옛 .25는 대비 1.9:1 — .55(약 6:1)로 올림 */
  font-weight:400;text-align:center;
}

/* #74: 낮은 화면(iPhone SE 667px 등)에서는 타이틀을 위로 올려 확대된 로그인 영역과 겹치지 않게 한다 */
@media (max-height:700px){.lock{padding-bottom:180px}}
@media (max-height:600px){.lock{padding-bottom:220px}}

/* Lock — 로그인 액션 영역 (absolute로 flex 센터링에서 제외) */
.lock-actions{
  position:absolute;
  bottom:calc(100px + 60px);
  left:0;right:0;
  display:flex;flex-direction:column;align-items:center;
  animation:lockActionsIn .7s cubic-bezier(.4,0,.2,1) .9s both;
}
@keyframes lockActionsIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.lock-msg{color:#ef4444;font-size:calc(12px*var(--fs));margin-top:6px;min-height:16px;opacity:0;transition:opacity .2s}
.lock-msg.on{opacity:1}
/* ===== APP ===== */
/* body 스크롤 아키텍처: .app은 min-height만 설정, overflow 제한 없음.
   콘텐츠가 뷰포트를 넘으면 body가 스크롤 → Safari Liquid Glass 적용 */
.app{display:none;flex-direction:column;min-height:100dvh}
.app.on{display:flex}

.hdr{
  background:var(--bg);position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);
  flex-shrink:0;
}
.hdr-top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 0}
.hdr-top h1{display:flex;align-items:center;gap:8px;font-size:calc(15px*var(--fs));font-weight:700;letter-spacing:-.3px}
.hdr-mark{width:22px;height:22px;flex-shrink:0;border-radius:6px} /* 앱 아이콘 축소판(네이비 타일) */
.hdr-top span{font-size:calc(11px*var(--fs));font-weight:600;color:var(--blue);background:var(--blue-bg);padding:3px 8px;border-radius:4px}

/* ===== 환율 — 헤더 한 줄 버튼 (#83, S3b 여행의 현지 통화) =====
   정상/캐시 상태를 구분하지 않는다(2026-09-08 사용자 결정) — 캐시로 읽은 값도 이 규칙 그대로 렌더링된다.
   보조 문구(시각·등락)는 --fg3 대신 --fg2를 쓴다(#60 대비 문제). */
.fx-skel{display:inline-block;background:var(--line);color:transparent;border-radius:4px;animation:skeletonShimmer 1.5s ease-in-out infinite}
@keyframes skeletonShimmer{0%{opacity:1}50%{opacity:.4}100%{opacity:1}} /* #101: 옛 항공 카드 스켈레톤 규칙과 함께 있었으나 .fx-skel이 계속 쓴다 — 삭제하지 않는다 */

.fx-line{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px;width:100%;text-align:left;
  background:none;border:0;font:inherit;cursor:pointer;
  padding:14px 20px;margin:-6px 0 -12px; /* 44px 히트 영역(14+16+14). 음수 마진으로 시각적 여백을 상쇄 — 아래 -12px는 .tabs{margin-top:12px}와 정확히 맞물려 박스가 겹치지 않는다(.sync-item .h a 관행) */
  min-height:44px; /* 스켈레톤(13px)과 텍스트(16px) 높이 차이로 값 도착 시 탭 바가 튀지 않게 — 히트 영역도 항상 44px 보장 */
  font-size:calc(11.5px*var(--fs));color:var(--fg2);transition:opacity .15s;
}
.fx-line:active{opacity:.7}
.fx-line:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.fx-line-val{font-weight:700;color:var(--fg)}
.fx-line-chg{font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg2)} /* 보합 기본값 */
.fx-line-chg.up{color:var(--danger)}   /* 상승 — 국내 증권 관례 */
.fx-line-chg.down{color:var(--blue)}   /* 하락 */
.fx-line-time{color:var(--fg2)}
.fx-line-skel{width:180px;height:13px}
.fx-line-empty{color:var(--fg2)} /* 실패(값 없음) — 무채색으로 낮추되 계속 탭 가능 */
.fx-line[hidden]{display:none} /* S3b: 현지 통화가 원이거나 환율을 껐다(handoff 5장 8번) */
.fx-line-attr{color:var(--fg2);font-size:calc(10.5px*var(--fs))} /* S3b: 표기가 의무인 출처(open.er-api) — 링크는 시트에 */

.tabs{display:flex;padding:0 20px;margin-top:12px}
.tab{
  /* #114: 글자 폭만 누르던 탭(약 24×39px)을 5등분 칸(flex:1)·높이 44px 이상으로 — 60대 손가락 기준 */
  flex:1 1 0;min-width:0;min-height:44px;padding:8px 0 10px;margin-right:0;font-size:calc(13px*var(--fs));font-weight:500;
  color:#6B7280;border-bottom:2px solid transparent;transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.tab.on{color:var(--fg);border-color:var(--fg)}
.tab:active{transform:scale(.95)}

.main{padding:var(--tab-panel-gap) 20px 0;background:var(--bg)}
.main::after{content:'';display:block;height:calc(76px + env(safe-area-inset-bottom,34px))} /* #95: 기존 20px+네이비 띠 인셋에 알약 높이(44px)+알약-콘텐츠 간격(12px)=+56px. 알약 표시 여부와 무관하게 항상 이 값 */
.pn{display:none}
.pn.on{display:block;animation:panelIn .35s cubic-bezier(.4,0,.2,1) both}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ===== STAGGER CHILDREN ===== */
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.05s}
.stagger.in>*:nth-child(2){transition-delay:.1s}
.stagger.in>*:nth-child(3){transition-delay:.15s}
.stagger.in>*:nth-child(4){transition-delay:.2s}
.stagger.in>*:nth-child(5){transition-delay:.25s}
.stagger.in>*:nth-child(6){transition-delay:.3s}
.stagger.in>*:nth-child(7){transition-delay:.35s}
.stagger.in>*:nth-child(8){transition-delay:.4s}
.stagger.in>*:nth-child(9){transition-delay:.45s}

/* ===== LOCK SHAKE ===== */
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ===== KAKAO LOGIN ===== */
.kakao-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;max-width:240px;padding:12px 16px;
  background:#FEE500;border-radius:8px;
  font-size:calc(14px*var(--fs));font-weight:600;color:#191919;
  transition:opacity .15s,transform .15s;
  cursor:pointer;
}
.kakao-btn:active{opacity:.8;transform:scale(.97)}
.kakao-btn svg{flex-shrink:0}
.lock-msg.deny{color:#ef4444}
.lock-msg.wait{color:rgba(255,255,255,.4)}

/* ===== 헤더 오른쪽(D-day·프로필 버튼) — S1-1: 관리자 버튼·관리자 패널·#94 구성원 시트는 지웠다 ===== */
.hdr-r{display:flex;align-items:center;gap:8px}
.prof-btn{
  position:relative;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--fg2);background:transparent;
  transition:background .15s,transform .15s;cursor:pointer;flex-shrink:0;
}
.prof-btn::after{content:'';position:absolute;inset:-6px}
.prof-btn:hover{background:var(--bg2)}
.prof-btn:active{transform:scale(.9)}
.prof-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ===== PROFILE PANEL ===== */
.prof-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  display:none;opacity:0;transition:opacity .25s;
}
.prof-overlay.on{display:block;opacity:1}
.prof-panel{
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:var(--bg);border-radius:16px 16px 0 0;
  padding:20px 20px calc(20px + var(--safe-bottom));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s .35s;
  box-shadow:0 -4px 24px rgba(0,0,0,.1);
  visibility:hidden;
  max-height:calc(100dvh - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch; /* #74: 가로 모드·확대 시 상단 잘림 방지 */
}
.prof-panel.on{transform:translateY(0);visibility:visible;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s}
.prof-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.prof-hdr span{font-size:calc(15px*var(--fs));font-weight:700}
.prof-hdr button{font-size:calc(18px*var(--fs));color:var(--fg3);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s}
.prof-hdr button:hover{background:var(--bg2)}
.prof-hdr button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.prof-info{padding:4px 0}
.prof-name{font-size:calc(15px*var(--fs));font-weight:600;margin-bottom:2px}
.prof-email{font-size:calc(12px*var(--fs));color:var(--fg3)}
.prof-ver{font-size:calc(11px*var(--fs));color:var(--fg3);margin-top:4px;opacity:.6}
.logout-sep{height:1px;background:var(--line);margin:16px 0 8px}
.logout-btn{
  display:flex;align-items:center;gap:8px;
  min-height:48px;width:100%;
  padding:12px 16px;
  color:var(--danger);background:transparent;
  border:none;border-radius:6px;
  font-size:calc(14px*var(--fs));font-weight:500;cursor:pointer;
  transition:background 150ms ease-in-out,color 150ms ease-in-out;
}
.logout-btn:hover{background:var(--danger-bg);color:var(--danger-hover)}
.logout-btn:active{background:var(--danger-bg-active);transform:scale(.98)}
.logout-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ===== CONFIRM MODAL ===== */
.confirm-overlay{
  position:fixed;inset:0;z-index:99999;
  background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s cubic-bezier(.4,0,.2,1);
}
.confirm-overlay.on{opacity:1;pointer-events:auto}
.confirm-overlay.closing{opacity:0;pointer-events:none}
.confirm-modal{
  background:var(--bg);border-radius:12px 12px 0 0;
  width:100%;max-width:400px;
  padding:24px 20px calc(20px + var(--safe-bottom));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.confirm-overlay.on .confirm-modal{transform:translateY(0)}
.confirm-overlay.closing .confirm-modal{transform:translateY(100%)}
.confirm-title{font-size:calc(18px*var(--fs));font-weight:700;margin-bottom:8px}
/* #111 D25: 저장본 안내 줄을 이어 붙일 때 \n으로 줄바꿈한다 — \n을 안 쓰는 기존 5개 호출부는
   한 줄 그대로라 영향이 없다 */
.confirm-body{font-size:calc(15px*var(--fs));color:var(--fg2);margin-bottom:24px;white-space:pre-line}
/* #111 D25: 로그아웃 시 인터넷 없음 경고 — 로그아웃 버튼 자체(--danger)와 색을 나눠 "지금은 때가
   안 좋다"(주황)와 "이 버튼을 누르면 로그아웃된다"(빨강)를 구분한다 */
.confirm-warn{display:flex;gap:6px;align-items:flex-start;background:var(--warn-bg);color:var(--warn-text);border-radius:8px;padding:9px 11px;font-size:calc(13px*var(--fs));line-height:1.5;margin-bottom:14px}
.confirm-warn[hidden]{display:none}
.confirm-actions{display:flex;gap:8px}
.confirm-actions button{
  flex:1;padding:12px;border-radius:8px;font-size:calc(14px*var(--fs));font-weight:600;
  min-height:44px;cursor:pointer;transition:all 150ms ease-in-out;
}
.confirm-cancel{background:var(--bg2);color:var(--fg);border:1px solid var(--line)}
.confirm-cancel:hover{background:var(--line)}
.confirm-cancel:active{background:var(--line2)}
.confirm-cancel:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.confirm-danger{background:var(--danger);color:#fff;border:none}
.confirm-danger:hover{background:var(--danger-hover)}
.confirm-danger:active{background:var(--danger-active);transform:scale(.98)}
.confirm-danger:focus-visible{outline:2px solid var(--danger);outline-offset:2px}

.confirm-primary{background:var(--blue);color:#fff;border:none}
.confirm-primary:hover{background:var(--blue-hover)}
.confirm-primary:active{background:var(--blue-active);transform:scale(.98)}
.confirm-primary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Toast */
#toast-host{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:100000;display:flex;flex-direction:column-reverse;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;font-size:calc(13px*var(--fs));font-weight:500;white-space:normal;text-align:center;max-width:min(calc(100vw - 32px),360px);word-break:keep-all;line-height:1.4;pointer-events:auto;box-shadow:0 4px 16px rgba(0,0,0,.14);animation:toastIn .2s cubic-bezier(.4,0,.2,1) forwards;color:#fff;transition:margin-bottom .2s cubic-bezier(.4,0,.2,1)} /* margin-bottom 트랜지션: #95 알약이 보이는 동안 토스트를 알약 위로 올릴 때 쓴다(app.js sttRaiseToastIfNeeded) */
.toast.out{animation:toastOut .2s cubic-bezier(.4,0,.2,1) forwards}
.toast--info{background:var(--fg)}
.toast--success{background:var(--success)}
.toast--error{background:var(--danger)}
.toast__icon{flex-shrink:0;width:16px;height:16px}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}

/* #95: 조건부 하단 "맨 위로" 알약 — 평소 없음(DOM엔 있으나 visibility:hidden), 스크롤 300px 넘으면
   등장, 200px 아래로 돌아오면 소멸(이력 구간, app.js STT_SHOW_AT/STT_HIDE_AT). 쌓임 순서는 헤더(100)와
   동일 — 모달·시트(9998+)·토스트(100000)·네이비 띠(1000000)보다 낮다. bottom 오프셋은 #safe-bottom과
   정확히 같은 공식(--stt-offset)을 쓴다 — 다른 값을 쓰면 알약이 네이비 띠 밑에 파묻히는 버그가 난다
   (design/issue-95-handoff.md 5절 "발견한 함정"). */
.stt-pill{
  position:fixed;left:50%;bottom:var(--stt-offset);z-index:100;
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 18px;border-radius:999px;
  background:var(--blue);color:#fff;font-size:calc(13.5px*var(--fs));font-weight:700;
  /* 토스트와 같은 중립 그림자 — "떠 있는 액션 버튼(FAB)" 인상을 낮추려고 파란 글로우 대신 이 값을 쓴다 */
  box-shadow:0 4px 16px rgba(0,0,0,.14);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);pointer-events:none;
  transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),visibility 0s linear .2s;
}
.stt-pill.show{
  opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;
  transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s;
}
/* R11: 다른 버튼들처럼 눌린 느낌을 준다 — transform엔 이미 위치 이동(translate)이 들어 있어 scale을
   더하면 좌표 계산이 꼬이기 쉬우므로, 크기 대신 투명도로 누른 느낌을 낸다. .show보다 뒤에 와야
   같은 특이성(클래스 2개)에서 소스 순서로 이긴다 */
.stt-pill.show:active{opacity:.85}
/* R12: .stt-icon의 stroke:currentColor는 항상 앞의(더 구체적인) .stt-pill .stt-icon 규칙에 덮여
   실제로 쓰이지 않는 죽은 선언이었다 — .stt-pill이 이미 color:#fff이므로 currentColor가 상속으로
   같은 값을 내니 중복 규칙을 없앤다 */
.stt-icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* outline-offset을 안쪽(-4px)으로 둔다 — 이 알약은 화면 위치가 고정이라 뒤에 무엇이 있을지 예측할 수
   없다(스크롤에 따라 달라진다). 바깥쪽(양수)이면 알약 뒤 배경 위에 그려져 흰 아웃라인이 묻힐 수 있다.
   안쪽에 두면 항상 파란 알약 채우기 위에 그려져 대비가 보장된다(흰 위 파랑 5.17:1). 이 프로젝트의
   다른 버튼(예: .fx-line, .prof-btn)은 배경이 항상 --bg(흰색)로 고정이라 양수 오프셋이 안전하지만,
   이 알약만 예외다 */
.stt-pill:focus-visible{outline:2px solid #fff;outline-offset:-4px}
/* R4: 미디어 쿼리는 특이성을 더해주지 않는다 — .stt-pill(클래스 1개)만 덮으면 .stt-pill.show(클래스
   2개)가 항상 이겨 실제로는 감소 모션에서도 .2s 등장 전환이 그대로 재생됐다. .show 쪽도 같이 덮어
   특이성을 맞춘다(소스 순서상 이 블록이 더 뒤라 동률에서도 이긴다) */
@media (prefers-reduced-motion:reduce){
  .stt-pill,.stt-pill.show{transition:visibility 0s}
}

@media (prefers-reduced-motion:reduce){
  .toast,.toast.out{animation:none}
  .toast.out{opacity:0}
}

.lbl{font-size:calc(11px*var(--fs));font-weight:600;color:var(--fg3);letter-spacing:.5px;margin-bottom:10px}
.hr{height:1px;background:var(--line);margin:24px 0}

/* ===== SCHEDULE ===== */
.days-sticky{position:sticky;top:calc(var(--hdr-height) + var(--tab-panel-gap));z-index:5;background:var(--bg);padding-bottom:18px}
.days-sticky::before{content:'';position:absolute;pointer-events:none;top:calc(-1 * var(--tab-panel-gap));left:0;right:0;height:var(--tab-panel-gap);background:var(--bg)}
.days{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.days::-webkit-scrollbar{display:none}
.days .dy{flex:1 0 auto;padding:9px 4px} /* #114: 78px 하한이 360px·글자 1.3에서 4일차를 잘랐다 — 하한을 없애고 좌우 여백만 줄여 4칸이 다 들어간다(내용 폭 기준 확장은 유지, 넘치면 가로 스크롤 폴백) */
.dy{
  flex:1;padding:9px;text-align:center;border:1px solid var(--line);
  border-radius:7px;font-size:calc(12px*var(--fs));font-weight:500;color:var(--fg3);transition:all .2s cubic-bezier(.4,0,.2,1);
}
.dy:active{transform:scale(.96)}
.dy.on{background:var(--fg);border-color:var(--fg);color:#fff}
.dy em{display:block;font-style:normal;font-size:calc(11px*var(--fs));font-weight:400;margin-top:2px} /* #114: opacity:.5·굵기 300(대비 1.61:1)을 버리고 탭 글자색을 그대로 물려받는다 — 비활성 4.83:1, 활성(흰 글자·검정 배경) 그대로 */

.tl{margin-left:6px;padding-left:18px;border-left:1.5px solid var(--line);position:relative}
.ev{padding-bottom:22px;position:relative}
.ev:last-child{padding-bottom:0}
.ev::before{
  content:'';position:absolute;left:-24.5px;top:4px;
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--line2);background:var(--bg);
}
.ev.k::before{background:var(--blue);border-color:var(--blue)}
.ev-t{font-size:calc(11px*var(--fs));color:var(--blue);font-weight:600;letter-spacing:.2px;margin-bottom:2px}
.ev-h{font-size:calc(14px*var(--fs));font-weight:600;margin-bottom:1px}
.ev-p{font-size:calc(13px*var(--fs));color:var(--fg2);line-height:1.5;white-space:pre-line}

/* ===== SCHEDULE — 일정 카드 확장(사진·링크·로딩·빈 상태, ISS-55에서 시작) ===== */
.ev-t.tbd{color:var(--fg2)}
.ev-img{display:flex;gap:6px;margin-top:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ev-img::-webkit-scrollbar{display:none}
.ev-img-btn{flex:none;padding:0;border:0;background:none;border-radius:6px;line-height:0;cursor:pointer}
.ev-img-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ev-img img{width:72px;height:54px;object-fit:cover;border-radius:6px;display:block;background:var(--bg2)}
.sch-loading{padding:4px 0 16px}
.sch-skel{padding:0 0 22px 24px;position:relative}
.sch-skel::before{content:'';position:absolute;left:0;top:4px;width:10px;height:10px;border-radius:50%;border:2px solid var(--line2);background:var(--bg)}
.sch-skel i,.sch-skel b,.sch-skel span{display:block;background:var(--line);border-radius:4px;animation:schSkel 1.2s ease-in-out infinite}
.sch-skel i{width:36px;height:10px;margin-bottom:6px}
.sch-skel b{width:55%;height:14px;margin-bottom:6px}
.sch-skel span{width:80%;height:12px}
.sch-loading small{display:block;text-align:center;font-size:calc(12px*var(--fs));color:var(--fg2)}
@keyframes schSkel{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.sch-skel i,.sch-skel b,.sch-skel span{animation:none}}
.ev-l{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
/* #112: 앱 링크 버튼(.ev-al)은 외부 링크 칩(.ev-l a)과 같은 컨테이너·같은 시각 크기를 쓴다(D10) —
   <button>이라 border:0·font-family·cursor를 추가로 맞춘다(handoff §4.5) */
.ev-l a,.ev-l .ev-al{
  display:inline-flex;align-items:center;gap:4px;min-height:28px;
  font-size:calc(11px*var(--fs));font-weight:600;color:var(--blue);background:var(--blue-bg);
  padding:5px 9px;border-radius:5px;text-decoration:none;border:0;font-family:inherit;cursor:pointer;
}
.ev-l a:active,.ev-l .ev-al:active{opacity:.7}
.ev-l a:focus-visible,.ev-l .ev-al:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ev-l svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* #112: 로딩 중에는 라벨 글자를 그대로 두고 아이콘 자리만 스피너로 바꾼다(폭 불변 실측,
   handoff §4.3 — 라벨을 "불러오는 중…"으로 바꾸면 최대 +56.8px까지 늘어나 형제 칩이 밀린다) */
.ev-al-spin{
  width:11px;height:11px;border-radius:50%;flex:none;
  border:1.5px solid var(--line2);border-top-color:var(--blue); /* 신규 rgba 없이 .dps-spinner와 같은 토큰 조합 */
  animation:dpsSpin .7s linear infinite;display:none;
}
.ev-l .ev-al[aria-busy="true"] svg{display:none}
.ev-l .ev-al[aria-busy="true"] .ev-al-spin{display:inline-block}
/* #112 L1(코드 리뷰): opacity를 버튼 전체가 아니라 스피너에만 준다 — 라벨 글자(--blue on
   --blue-bg)가 흐려지면 대비가 떨어진다. 버튼 자체는 색은 그대로 두고 커서만 바꾼다 */
.ev-l .ev-al[aria-busy="true"]{cursor:default}
.ev-l .ev-al[aria-busy="true"] .ev-al-spin{opacity:.65}
@media(prefers-reduced-motion:reduce){.ev-al-spin{animation:none}}
.sch-empty{text-align:center;padding:48px 16px 32px;color:var(--fg2)}
.sch-empty b b{display:block;font-size:calc(15px*var(--fs));font-weight:600;color:var(--fg);margin-bottom:6px}
.sch-empty small small{display:block;font-size:calc(13px*var(--fs));color:var(--fg2);line-height:1.5}
.sch-empty .cta .cta{display:inline-flex;align-items:center;margin-top:14px;font-size:calc(13px*var(--fs));font-weight:600;color:var(--blue);background:var(--blue-bg);padding:10px 16px;border-radius:6px;min-height:44px}
.sch-empty .cta:focus-visible .cta:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sch-upd{font-size:calc(11px*var(--fs));color:var(--fg2);text-align:center;padding:18px 0 4px;letter-spacing:.2px}
.sch-upd:empty:empty{display:none}
.sch-upd.off.off{color:var(--warn-text)}

.dp{display:none}.dp.on{display:block}

/* ===== FLIGHT CARD (#101: 카드 자체가 버튼 — 가짜 탑승권 요소를 걷어내고 확정 정보 + 문서 상태 띠만) =====
   기획: docs/flight-tab-docs-spec.md 3절 D1~D18 · 디자인: design/issue-101-handoff.md.
   BOARDING/GATE/SEAT 정보 박스·절취선·바코드·E-ticket·상태 배지 규칙은 전부 삭제했다(옛 .fc-box*·
   .fc-perforation·.fc-notch*·.fc-dashline·.fc-stub·.fc-eticket·.fc-status-*·.fc-barcode·
   .fc-tway.--skeleton*·.fc-tway.--cancelled). 헤더(.fc-header*)는 항공사 이름 글자와 편명만 둔다 — S3(다중 여행 ⑩):
   항공사 로고·브랜드 색은 없고 중립 색만 쓴다(옛 #146 브랜드 헤더·로고·전용 색 변수는 지웠다) */
.fl-lbl-second{margin-top:4px} /* QA R10: "오는 편" 라벨 여백 — 인라인 style 대신 클래스로 */
button.fc-tway{
  display:block;width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  margin-bottom:12px;background:var(--bg);text-align:left;font:inherit;color:inherit;cursor:pointer;padding:0;
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}
button.fc-tway:active{transform:scale(.985)}
button.fc-tway[aria-disabled="true"]{cursor:default}
button.fc-tway[aria-disabled="true"]:active{transform:none}
button.fc-tway:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fc-header{background:var(--bg2);border-bottom:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.fc-header-name{display:flex;align-items:center;gap:6px;min-width:0}
.fc-airline{font-size:calc(11px*var(--fs));font-weight:600;color:var(--fg);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fc-header-right{display:flex;align-items:center;gap:6px}
.fc-tag{font-size:calc(11px*var(--fs));font-weight:600;padding:2px 6px;border-radius:3px;background:var(--line);color:var(--fg);white-space:nowrap}
.fc-route{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 14px 10px}
.fc-city{display:flex;flex-direction:column;gap:1px}
.fc-city.--right{text-align:right}
.fc-iata{font-size:calc(26px*var(--fs));font-weight:800;color:var(--fg);line-height:1;letter-spacing:-.5px}
.fc-city-name{font-size:calc(12px*var(--fs));color:var(--fg3);font-weight:500;margin-top:1px}
.fc-time{font-size:calc(15px*var(--fs));font-weight:700;color:var(--fg);margin-top:3px}
.fc-flight-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 8px 0}
.fc-flight-no{font-size:calc(11px*var(--fs));font-weight:700;color:var(--fg);letter-spacing:.5px}
.fc-flight-line{display:flex;align-items:center;width:100%;gap:4px}
.fc-flight-line::before,.fc-flight-line::after{content:'';flex:1;height:1px;background:var(--line2)}
.fc-plane{font-size:calc(12px*var(--fs));color:var(--blue)}
.fc-duration{font-size:calc(11px*var(--fs));color:var(--fg2);font-weight:500;text-align:center;line-height:1.3} /* #114: 9px→11px, 색 --fg3→--fg2(7.5:1) */

/* -- 문서 상태 띠(.fc-doc-strip) — 옛 .fc-stub(바코드·E-ticket·상태 배지) 자리. 절취선은 삭제하고
   일반 구분선만 둔다(9절 근거: 탑승권 시각 관습을 남기지 않는다).
   #111: 모든 상태에서 첫 줄을 .fc-doc-strip-main으로 감싼다(2.1·2.2절). 저장 보조줄
   (.fc-doc-strip-saved)은 2026-09-28 사용자 결정으로 없앴다 — 띠는 항상 한 줄이다 */
.fc-doc-strip{
  display:block; /* <span>이라 display가 없으면 인라인으로 흘러 구분선이 조각나고 여백이 벌어진다(2026-09-28 실기기) */
  padding:10px 14px;border-top:1px solid var(--line);
  font-size:calc(12px*var(--fs));font-weight:600;color:var(--fg);
}
.fc-doc-strip-main{display:flex;align-items:center;gap:6px}
.fc-doc-strip-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-doc-strip-chev{flex-shrink:0;color:var(--fg2);font-size:calc(13px*var(--fs));margin-left:auto}
button.fc-tway[data-doc-state="loading"] .fc-doc-strip,
button.fc-tway[data-doc-state="offline"] .fc-doc-strip{color:var(--fg2);font-weight:500}
button.fc-tway[data-doc-state="empty"] .fc-doc-strip{color:var(--blue);font-weight:700}
button.fc-tway[data-doc-state="empty"] .fc-doc-strip-chev{color:var(--blue)}
button.fc-tway[data-doc-state="failed"] .fc-doc-strip{color:var(--fg2)}
button.fc-tway[data-doc-state="failed"] .fc-doc-strip-retry{color:var(--blue);font-weight:700}
button.fc-tway[data-doc-state="failed"] .fc-doc-strip-chev{color:var(--blue)}
/* -- 1장/2장 이상은 제목 대신 고정 문구 벳지(메인 액센트 색) -- */
.fc-doc-badge{
  display:inline-flex;align-items:center;white-space:nowrap;
  background:var(--blue-bg);color:var(--blue);
  font-size:calc(11px*var(--fs));font-weight:700;
  padding:4px 10px;border-radius:999px;
}

/* ===== #110: 비짓재팬 QR — 항공 탭 카드 · 멤버 QR 줄 =====
   기획: docs/visit-japan-qr-spec.md v2 · 디자인: design/issue-110-handoff.md §2·§4.
   #113(Option B, 2026-09-25)로 카드 헤더가 .vj-band(색 밴드)+.vj-body(본문)+.vj-strip(상태 띠)
   3단으로 바뀌었다(design/issue-113-handoff.md §5.2). .vj-strip은 .fc-doc-strip과 값이 완전히
   같지만, .fc-doc-strip이 button.fc-tway 조상 선택자에 묶여 있어(다른 조상 아래에선 상태 색이
   전혀 걸리지 않는다) 새 클래스로 둔다(항공사 카드처럼 보이지 않아야 한다는 요구, D11과 부딪히지
   않기 위해 셀렉터를 합치지 않고 값만 맞췄다) */
.vj-lbl{
  font-size:calc(11px*var(--fs));font-weight:600;color:var(--fg2);
  letter-spacing:.5px;text-transform:uppercase;margin:16px 0 8px;
}
.vj-card{
  display:block;width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--bg);text-align:left;font:inherit;color:inherit;cursor:pointer;padding:0;
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.vj-card:active{transform:scale(.985)}
.vj-card[aria-disabled="true"]{cursor:default}
.vj-card[aria-disabled="true"]:active{transform:none}
.vj-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* #113(Option B, 2026-09-25 사용자 결정): 항공편 카드(.fc-header)와 같은 문법의 색 헤더
   밴드 — "정체성은 색, 상태는 아래 흰 띠(.vj-strip)"만 담당하고 상태와 무관하게 항상 파랑이다
   (design/issue-113-handoff.md §5.2·§5.4 설계 근거, 일본 정부·Visit Japan Web 로고·색은 쓰지 않는다) */
.vj-band{display:flex;align-items:center;gap:8px;background:var(--blue);padding:9px 12px;min-height:34px}
.vj-band-ic{display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.vj-band-ic svg{display:block;width:16px;height:16px}
.vj-band-title{font-size:calc(12.5px*var(--fs));font-weight:800;color:#fff;letter-spacing:-.1px}
/* 본문 — 제목(비짓재팬 QR)·설명 두 줄을 가운데 정렬로 쌓는다. §2.4 결함(두 span이 display 없이
   인라인으로 붙던 것)과 같은 이유로 컨테이너에 display:flex;flex-direction:column이 필수다 */
.vj-body{display:flex;flex-direction:column;align-items:center;text-align:center;padding:13px}
.vj-body-title{font-size:calc(14.5px*var(--fs));font-weight:800;color:var(--fg)}
.vj-body-desc{font-size:calc(11.5px*var(--fs));color:var(--fg2);margin-top:3px;line-height:1.4}

/* #111: 항공편 띠와 같은 구조 — 첫 줄(.vj-strip-main)만 그린다. 저장 보조줄(.vj-strip-saved)은
   2026-09-28 사용자 결정으로 없앴다 */
.vj-strip{display:block;padding:10px 14px;border-top:1px solid var(--line);font-size:calc(12px*var(--fs));font-weight:600;color:var(--fg)}
.vj-strip-main{display:flex;align-items:center;gap:6px}
.vj-strip-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vj-strip-chev{flex-shrink:0;color:var(--fg2);font-size:calc(13px*var(--fs));margin-left:auto}
.vj-card[data-doc-state="loading"] .vj-strip,
.vj-card[data-doc-state="offline"] .vj-strip{color:var(--fg2);font-weight:500}
.vj-card[data-doc-state="empty"] .vj-strip{color:var(--blue);font-weight:700}
.vj-card[data-doc-state="empty"] .vj-strip-chev{color:var(--blue)}
.vj-card[data-doc-state="failed"] .vj-strip{color:var(--fg2)}
.vj-card[data-doc-state="failed"] .vj-strip-retry{color:var(--blue);font-weight:700}
.vj-card[data-doc-state="failed"] .vj-strip-chev{color:var(--blue)}
/* one/many 배지는 신규 클래스를 만들지 않고 기존 .fc-doc-badge를 그대로 쓴다 */

/* 「멤버 QR N장 보기」 줄 — .ckl-edit과 같은 "가벼운 텍스트 버튼" 언어, 카드 같은 테두리는 두지 않는다 */
.vj-family-row{
  display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:44px;
  margin-top:8px;background:none;border:0;font-size:calc(13px*var(--fs));font-weight:600;
  color:var(--blue);cursor:pointer;
}
.vj-family-row:active{opacity:.7}
.vj-family-row:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
/* 리뷰 L4: 자리를 숨기지 않고(들썩임 방지) 카드와 같은 못 누름 모양만 준다(#108·#144 .dc-fab-btn 관행) */
.vj-family-row[aria-disabled="true"]{color:var(--fg2);cursor:default}
.vj-family-row[aria-disabled="true"]:active{opacity:1}

/* 「멤버 비짓재팬 QR」 고르기 시트 행 — .ckl-row와 같은 "행 전체가 버튼" 문법. 소유자 이름이
   제목보다 먼저·크게 보여야 한다(D14) — dcCard()의 "제목 먼저" 순서와 다르게 새로 만든다 */
.vjf-list{list-style:none;margin:0;padding:0}
.vjf-row{
  width:100%;min-height:56px;padding:10px 4px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);text-align:left;background:none;border-width:0 0 1px 0;
  font:inherit;color:inherit;cursor:pointer;
}
.vjf-list li:last-child .vjf-row{border-bottom:none}
.vjf-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:8px}
.vjf-info{flex:1;min-width:0}
.vjf-name{font-size:calc(15px*var(--fs));font-weight:700;color:var(--fg);line-height:1.3}
.vjf-doctitle{
  font-size:calc(12px*var(--fs));color:var(--fg2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vjf-chev{flex-shrink:0;color:var(--fg2);font-size:calc(15px*var(--fs))}

/* 등록 시트 안내(종류=비짓재팬 QR일 때만, D10) — 오류가 아니라 순수 도움말이라 warn 톤을 쓰지
   않는다(.dc-prog가 이미 쓰는 "눈에 띄되 경고는 아닌" --blue-bg/--fg 조합) */
.vj-guide{
  background:var(--blue-bg);color:var(--fg);border-radius:8px;padding:8px 10px;
  font-size:calc(11.5px*var(--fs));line-height:1.5;margin-bottom:14px;
}
@media(prefers-reduced-motion:reduce){.vj-card,.vj-family-row{transition:none!important}}

/* ===== 체크리스트 (#102) — 문서 탭 「체크리스트」 서브 탭·관리자 패널 절·항목 시트 =====
   design/issue-102-handoff.md 9절. checkPop 키프레임은 옛 .bx.on이 쓰던 것을 이름 그대로 재사용한다 */
@keyframes checkPop{0%{transform:scale(.8)}50%{transform:scale(1.15)}100%{transform:scale(1)}}

/* 문서 탭 상단 분절 컨트롤 「문서 | 체크리스트」 — #p-dc 맨 위, 자동 삭제 안내보다 앞.
   일차 버튼과 같은 시각 언어, 44px 터치 타깃을 flex 중앙 정렬로 맞춘다 */
.dc-subtabs{display:flex;gap:6px;margin-bottom:16px}
.dc-subtab{
  flex:1 1 auto;min-height:44px;padding:0 4px;white-space:nowrap;display:flex;align-items:center;justify-content:center; /* #145 D32: 3칸·4칸 모두 한 줄 고정(내용 폭 기준 + 남는 공간 균등 분배) */
  border:1px solid var(--line);background:var(--bg);border-radius:7px;
  font-size:calc(12.5px*var(--fs));font-weight:600;color:var(--fg2);cursor:pointer; /* 11번: 누를 수 있는 탭 버튼이라 --fg3(2.85:1)이 아니라 --fg2(7.5:1) */
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.dc-subtab[hidden]{display:none} /* #133: 「예산」 버튼(관리자만) — UA 기본 hidden이 display:flex에 덮이지 않게 */
.dc-subtab[aria-selected="true"]{background:var(--fg);border-color:var(--fg);color:#fff}
.dc-subtab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* 「체크리스트」 탭패널 헤더(관리자 [편집] 링크만 — 절 제목은 탭이 이미 라벨을 준다) */
.ckl-hdr{display:flex;justify-content:flex-end;margin-bottom:10px}
.ckl-edit{min-width:44px;min-height:44px;padding:0 8px;color:var(--blue);font-size:calc(12.5px*var(--fs));font-weight:600}
.ckl-edit:active{background:var(--blue-bg)}
.ckl-edit:focus-visible{outline:2px solid var(--blue);outline-offset:2px} /* 8번 */

.ckl-grp{margin-bottom:22px}
.ckl-grp:last-child{margin-bottom:0}
.ckl-grp-title{font-size:calc(13px*var(--fs));font-weight:700;color:var(--fg)}
.ckl-grp-cnt{color:var(--blue);font-weight:700;font-variant-numeric:tabular-nums}
.ckl-grp-sub{font-size:calc(11.5px*var(--fs));color:var(--fg2);margin-top:2px}
.ckl-list{list-style:none;margin-top:6px}

/* 행 전체가 하나의 버튼 — 체크박스 그림+글자를 다 안에 둔다(D5·8절) */
.ckl-row{
  width:100%;min-height:44px;padding:10px 2px;display:flex;align-items:flex-start;gap:10px;
  border-bottom:1px solid var(--line);text-align:left;background:none;border-width:0 0 1px 0;
  font:inherit;color:inherit;cursor:pointer;
}
.ckl-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:8px} /* 8번(#9) */
.ckl-list li:last-child .ckl-row{border-bottom:none}
.ckl-box{
  width:22px;height:22px;border-radius:6px;flex-shrink:0;margin-top:1px;
  border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
/* 4번: 애니메이션은 여기(선택자 상시 매치)가 아니라 cklPatchRow()의 인라인 style로만 튼다 —
   그래야 재렌더·서브 탭 전환처럼 aria-checked="true"가 다시 "적용"될 때가 아니라 실제로 값이
   바뀔 때만(체크 순간만) 재생된다 */
.ckl-row[aria-checked="true"] .ckl-box{background:var(--fg);border-color:var(--fg)}
.ckl-box svg{width:12px;height:12px;stroke:#fff;stroke-width:2.5;fill:none;opacity:0;transition:opacity .12s}
.ckl-row[aria-checked="true"] .ckl-box svg{opacity:1}
.ckl-tx{min-width:0;font-size:calc(13px*var(--fs));line-height:1.4;padding-top:2px;word-break:keep-all;overflow-wrap:anywhere} /* 1번: flex 자식의 기본 최소 폭(auto)이 공백 없는 제목의 폭을 통째로 요구해 가로 스크롤을 만든다 — min-width:0으로 줄이고, overflow-wrap:anywhere로 keep-all이 못 끊는 긴 덩어리도 강제로 자른다(어절 우선은 keep-all이 유지) */
.ckl-row[aria-checked="true"] .ckl-tx{color:var(--fg3);text-decoration:line-through} /* 완료 상태 — --fg3 예외(대비 규칙 8절) */
@media (prefers-reduced-motion: reduce){.ckl-box{animation:none!important}}

/* 체크리스트 관리 화면(Checklist Admin Panel, #104) — #102에서는 관리자 패널 안 절이었으나
   전용 화면(.ckl-panel-*, 아래)으로 분리됐다. 안쪽 콘텐츠(.ckl-admin-*)는 그릇만 바뀌었을 뿐
   그대로 재사용한다 */
.ckl-admin-add{width:100%;min-height:52px;padding:10px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--fg);font-size:calc(13px*var(--fs));font-weight:600;text-align:left;margin-bottom:10px}
.ckl-admin-add:disabled,.ckl-admin-add[aria-disabled="true"]{color:var(--fg3);cursor:default} /* S3: 가득 찬 상태는 aria-disabled(눌러도 이유 토스트) */
.ckl-admin-add:focus-visible{outline:2px solid var(--blue);outline-offset:2px} /* 8번 */
.ckl-admin-add-sub{display:block;font-size:calc(10.5px*var(--fs));color:var(--fg2);font-weight:500;margin-top:2px}
.ckl-admin-add:disabled .ckl-admin-add-sub,.ckl-admin-add[aria-disabled="true"] .ckl-admin-add-sub{color:var(--fg3)}
.ckl-fam{background:var(--bg2);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.ckl-fam-title{font-size:calc(11px*var(--fs));font-weight:600;color:var(--fg2);margin-bottom:6px}
.ckl-fam-list{display:flex;flex-wrap:wrap;gap:8px 14px}
.ckl-fam-row{font-size:calc(12px*var(--fs));color:var(--fg);display:flex;align-items:center;gap:4px}
.ckl-fam-row b{color:var(--blue);font-weight:700;font-variant-numeric:tabular-nums}
/* 4번: 관리자 목록도 구성원 화면과 같이 「함께 챙기기」/「내가 챙기기」 두 묶음으로 나눈다 —
   .ckl-admin-cnt를 각 묶음 제목으로 재사용한다("항목 9개" 한 줄 대신 묶음마다 "함께 챙기기 · 5개") */
.ckl-admin-grp{margin-bottom:14px}
.ckl-admin-grp:last-child{margin-bottom:0}
.ckl-admin-cnt{font-size:calc(11px*var(--fs));color:var(--fg2);margin-bottom:6px}
.ckl-admin-list{list-style:none}
.ckl-admin-item{border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:8px}
.ckl-admin-item:last-child{margin-bottom:0}
.ckl-admin-item-top{display:flex;align-items:flex-start;gap:8px} /* #104: 손잡이(44px) 자리 확보 — 값 자체는 기존과 동일, 자식만 늘었다 */
.ckl-admin-item-title{min-width:0;font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg);word-break:keep-all;overflow-wrap:anywhere;padding-top:12px} /* 1번: .ckl-tx와 같은 함정(가로 배치 자식의 기본 최소 폭). padding-top은 44px 손잡이와 첫 줄을 광학 정렬한다 */
.ckl-admin-item-sub{font-size:calc(11px*var(--fs));color:var(--fg2);margin-top:4px}
.ckl-admin-item-acts{display:flex;gap:6px;margin-top:8px}
.ckl-admin-act{min-width:44px;min-height:44px;border-radius:8px;background:var(--bg2);color:var(--fg2)}
.ckl-admin-act:disabled{color:var(--line2);cursor:default}
.ckl-admin-act:focus-visible{outline:2px solid var(--blue);outline-offset:-2px} /* 8번 */
.ckl-admin-act.text{flex:1;font-size:calc(12.5px*var(--fs));font-weight:600;color:var(--fg)}
.ckl-admin-act.text:disabled{color:var(--fg2)}
.ckl-admin-act.danger{color:var(--danger)}
.ckl-admin-act.danger:disabled{color:var(--fg2)}

/* ===== #104 신규: 체크리스트 관리 전용 화면(.ckl-panel-*) =====
   관리자 패널(.admin-panel, 9998/9999)과 같은 층·같은 시각 언어(바텀시트: 둥근 위 모서리,
   슬라이드업, 블러 오버레이)지만 높이는 92vh — 이 앱에서 가장 크다(design/issue-104-handoff.md 3절).
   제목 줄(.ckl-panel-hdr)은 flex:none로 고정, 본문(.ckl-panel-body)만 스크롤된다. */
.ckl-panel-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  display:none;opacity:0;transition:opacity .25s;
}
.ckl-panel-overlay.on{display:block;opacity:1}
.ckl-panel{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  height:92vh;display:flex;flex-direction:column;
  background:var(--bg);border-radius:16px 16px 0 0;
  box-shadow:0 -4px 24px rgba(0,0,0,.1);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s .35s;
  visibility:hidden;
}
.ckl-panel.on{transform:translateY(0);visibility:visible;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s}
.ckl-panel-hdr{flex:none;padding:14px 20px 12px;border-bottom:1px solid var(--line)}
.ckl-panel-handle{width:36px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 12px}
.ckl-panel-hdr-row{display:flex;align-items:center;justify-content:space-between}
.ckl-panel-hdr-row span{font-size:calc(15px*var(--fs));font-weight:700}
.ckl-panel-hdr-row button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:calc(18px*var(--fs));color:var(--fg2);border:0;background:none;cursor:pointer} /* --fg3 금지(대비 규칙) — .aps-close(#94 F-10)와 같은 선례 */
.ckl-panel-hdr-row button:hover{background:var(--bg2)}
.ckl-panel-hdr-row button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ckl-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 20px calc(20px + var(--safe-bottom))}
.ckl-panel-total{font-size:calc(11.5px*var(--fs));color:var(--fg2);margin-bottom:12px}
.ckl-panel-empty{text-align:center;padding:28px 16px 8px;color:var(--fg2)}
.ckl-panel-empty b{display:block;font-size:calc(14px*var(--fs));font-weight:600;color:var(--fg)}

/* ===== #104: 순서 변경 안내 + 드래그 손잡이 + 드래그 상태 =====
   [위로]/[아래로] 버튼을 없애고 이 손잡이 하나가 포인터 드래그 시작점이자 키보드
   방향키 이동의 포커스 대상을 겸한다(핸드오프 8절). touch-action:none은 이 44px
   손잡이 안에서만 브라우저 기본 스크롤 제스처 인식을 끈다 — 나머지 행·목록은 평소처럼
   스크롤된다(#90 .dc-viewer-stage와 같은 스코프 원칙). 손잡이 색은 --fg3(2.85:1, 대비 미달)
   대신 --fg2를 쓴다 — 새 컴포넌트에는 --fg3를 쓰지 않는다(대비 규칙). */
.ckl-panel-hint{font-size:calc(11.5px*var(--fs));color:var(--fg2);line-height:1.5;margin-bottom:14px}
.ckl-drag-handle{
  width:44px;height:44px;min-width:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;border-radius:8px;
  background:none;border:0;color:var(--fg2);
  touch-action:none;-webkit-user-drag:none;user-select:none;cursor:grab;
}
.ckl-drag-handle svg{width:16px;height:16px;fill:currentColor;pointer-events:none}
.ckl-drag-handle:active{cursor:grabbing;background:var(--bg2)}
.ckl-drag-handle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ckl-drag-handle:disabled{opacity:.4;cursor:default}
.ckl-admin-list{position:relative;user-select:none} /* 코드 리뷰 12번: 손잡이에만 걸려 있던 선택 방지를
  목록 전체로 넓힌다 — 마우스로 끌 때 포인터가 지나가는 형제 항목의 제목까지 파랗게 선택되던 것을 막는다 */
.ckl-admin-item{touch-action:pan-y} /* 손잡이 밖에서는 평소처럼 세로 스크롤 제스처를 허용한다 */
.ckl-admin-item.dragging{
  position:relative;z-index:5; /* 같은 <ul> 안 형제보다만 위 — 이 화면 내부의 지역 스택일 뿐 앱 전역
    z-index(9998~100000)와는 무관하다(핸드오프 12절) */
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  background:var(--bg);
  transition:none;
}
.ckl-admin-item.dragging.blocked{outline:2px solid var(--danger);background:var(--danger-bg)}
.ckl-admin-item.shift-up{transition:transform .18s cubic-bezier(.4,0,.2,1)}
.ckl-admin-item.shift-down{transition:transform .18s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){
  .ckl-admin-item.shift-up,
  .ckl-admin-item.shift-down,
  .ckl-admin-item.dragging{transition:none!important}
}

/* 항목 시트(.ckis-*, 추가·편집 공용) — .aps-overlay/.aps-sheet와 같은 그릇·z-index(10001/10002,
   동시에 열리지 않으므로 같은 층 공유), DOM은 완전히 분리 */
.ckis-overlay{
  position:fixed;inset:0;z-index:10001;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  display:none;opacity:0;transition:opacity .25s;
}
.ckis-overlay.on{display:block;opacity:1}
.ckis-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:10002;
  background:var(--bg);border-radius:16px 16px 0 0;
  max-height:82vh;overflow-y:auto;
  padding:20px 20px calc(20px + var(--safe-bottom));
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s .35s;
  box-shadow:0 -4px 24px rgba(0,0,0,.14);
  visibility:hidden;
}
.ckis-sheet.on{transform:translateY(0);visibility:visible;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s}
/* 기존 .dc-leg-btn에는 disabled 상태 규칙이 없었다(#101에서는 버튼이 항상 활성) — 수정 모드에서
   구분을 잠글 때 쓴다 */
.dc-leg-btn:disabled{opacity:.5;cursor:default}

/* ===== LIGHTBOX ===== */
.lb{
  position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  backdrop-filter:blur(12px);
  opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1);
}
.lb.on{opacity:1;pointer-events:auto}
.lb:not(.on){visibility:hidden} /* #81: 닫힌 상태는 탭 순서에서도 제외 */
/* 코드리뷰 M3(#109): 아래 세 규칙은 원래 .lb img/.lb .lb-err(자손 선택자)로 .lb 하위 모든 img를
   가리켰다 — .lb-photo-in(#lbi-in)이 새로 생기면서, 메인 패널(#lbi)이 실패·로딩 중이면 "들어오는"
   패널이 멀쩡히 준비됐어도 함께 흐려지거나 숨어 버렸다(핸드오프 §2.3·§18이 이미 지적한 함정).
   id로 메인 패널만 정확히 겨냥한다 */
.lb.loading #lbi{opacity:.35}
.lb-err{display:none;color:#fff;font-size:calc(13px*var(--fs));margin-top:12px}
.lb.err #lberr{display:block}
.lb.err #lbi{display:none}
.lb img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:4px;-webkit-user-drag:none;user-select:none}
.lb-x{position:absolute;top:max(20px,calc(env(safe-area-inset-top,0px) + 14px));right:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(16px*var(--fs));z-index:3}
.lb-a{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(18px*var(--fs));z-index:3;transition:opacity .2s cubic-bezier(.4,0,.2,1)}
.lb-a.p{left:8px}.lb-a.n{right:8px}
/* #109: 시각 크기(38px)는 유지하고 손가락 히트 영역만 44px로 넓힌다(design/issue-109-handoff.md §8).
   .lb-a는 이미 position:absolute다 — position을 다시 선언하면 절대 위치가 깨지므로 ::after만 추가한다 */
.lb-a::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.lb-c{color:rgba(255,255,255,.35);font-size:calc(11px*var(--fs));margin-top:10px}

/* #109: 스와이프 넘기기 페어 전환 — 평소엔 .lb-photo 하나만 있고, 넘김이 확정되는 순간에만
   .lb-photo-in이 반대편에서 나타나 함께 움직인 뒤 .lb-photo로 승격된다(design/issue-109-handoff.md
   §2). 두 패널 모두 스테이지 전체(inset:0)를 차지하고 스스로 이미지를 가운데 둔다 — img 자체의
   크기 규칙(.lb img, 아래 참고)은 중첩 깊이와 무관하게 그대로 적용된다 */
.lb-photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform}
.lb-photo-in{pointer-events:none} /* 전환 중에만 잠깐 보이고 클릭·탭 대상이 아니다 */
.lb-photo-in[hidden]{display:none} /* .lb-photo{display:flex}보다 우선하도록 명시(hidden 속성만으로는 특정도가 밀린다) */
/* 들어오는 패널의 자체 로딩·실패 상태 — 메인 패널(#lb)의 기존 .lb.loading/.lb.err 규칙과는 별개다.
   전환 도중 두 패널이 서로 다른 상태(예: 현재는 정상, 들어오는 사진은 아직 로딩 중)일 수 있다 */
.lb-photo-in.loading img{opacity:.35}
.lb-photo-in .lb-err{display:none}
.lb-photo-in.err .lb-err{display:block}
.lb-photo-in.err img{display:none}

/* #90: 확대 중에는 좌우 화살표를 숨겨 팬 제스처와의 오조작을 막는다. opacity만으로는 탭 순서에
   남아(코드리뷰 J-2) 숨은 화살표에 포커스가 가고 Enter로 사진이 넘어갔다 — visibility를 함께
   꺼서 탭 순서에서 제외하되, 사라지는 애니메이션이 끝난 뒤(opacity와 같은 .2s)에만 hidden으로
   바뀌도록 지연한다(사라지는 도중 잠깐 안 보이는데 상호작용은 되는 상태를 피한다) */
.lb.zoomed .lb-a{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s cubic-bezier(.4,0,.2,1),visibility 0s .2s}

/* #90: .lb-stage — 확대 좌표계의 기준(라이트박스는 오버레이 전체가 "스테이지"이지만, 클리핑·포인터
   영역은 카운터 위 공간인 이 래퍼가 담당한다). 기존 열림 애니메이션(scale(.92)→scale(1))은 #lbi가
   아니라 이 래퍼로 옮겼다 — JS 줌 엔진이 #lbi의 transform을 직접 제어하므로 같은 속성을 다투지 않게
   분리한다(6.1절) */
.lb-stage{
  position:relative;flex:1;width:100%;min-height:0;overflow:hidden;touch-action:none;
  display:flex;align-items:center;justify-content:center;
  transform:scale(.92);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.lb.on .lb-stage{transform:scale(1)}

.lb-zoom,.dc-viewer-zoom{
  /* 코드리뷰: 라이트박스는 top:10px 고정이라 노치 있는 기기에서 상태 표시줄에 가렸다.
     닫기 버튼(.lb-x)과 같은 식으로 safe-area를 더해 노치 아래로 내린다 */
  position:absolute;top:max(20px,calc(env(safe-area-inset-top,0px) + 14px));left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;
  font-size:calc(11px*var(--fs));font-weight:600;letter-spacing:.2px;font-variant-numeric:tabular-nums;
  padding:4px 11px;border-radius:999px;pointer-events:none;
  opacity:0;transition:opacity .18s cubic-bezier(.4,0,.2,1);z-index:2;
}
/* #92: 확대 상태 내내 떠 있지 않고, 배율이 바뀔 때만 잠깐 나타난다(JS 가 .show 를 붙였다 뗀다) */
.lb-zoom.show,.dc-viewer-zoom.show{opacity:1}

/* #90 코드리뷰 J-2: 배율 1일 때(원복 버튼이 숨어 있을 때) opacity만으로는 탭 순서에 남아 포커스가
   가능했다. visibility를 함께 꺼서 탭 순서에서 제외한다 — 나타날 때는 즉시 visible로 바꿔 바로
   포커스·탭이 가능해야 하고(그래서 .zoomed 쪽은 지연 없음), 사라질 때는 opacity 페이드가 끝난
   뒤에야 hidden으로 바뀌어야(그래서 기본 쪽에 delay) 사라지는 중간에 눈에는 안 보이는데 탭은
   되는 상태를 피한다 */
.lb-reset{
  position:absolute;bottom:12px;left:50%;
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;
  display:flex;align-items:center;justify-content:center;z-index:2;
  opacity:0;pointer-events:none;visibility:hidden;transform:translateX(-50%) scale(.8);
  transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.34,1.56,.64,1),visibility 0s .2s;
}
.lb.zoomed .lb-reset{
  opacity:1;pointer-events:auto;visibility:visible;transform:translateX(-50%) scale(1);
  transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.34,1.56,.64,1),visibility 0s 0s;
}
.lb-reset svg{width:19px;height:19px}
.lb-reset:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.lb-hint,.dc-viewer-hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  max-width:90%;text-align:center;
  background:rgba(0,0,0,.62);backdrop-filter:blur(6px);color:#fff;
  font-size:calc(12px*var(--fs));line-height:1.4;padding:8px 14px;border-radius:14px;z-index:2;
  opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1);
}
.lb-hint.show,.dc-viewer-hint.show{opacity:1}

@media(prefers-reduced-motion:reduce){
  /* .lb.zoomed .lb-a·.lb.zoomed .lb-reset는 그 자체로 transition
     단축 속성(visibility 지연 포함)을 다시 선언해 특정도가 이 규칙의 기본 선택자(.lb-a 단독 등)보다
     높다 — 그 상태에서도 이 규칙이 이기도록 같은 특정도의 선택자를 나란히 추가한다(코드리뷰: 원래는
     .zoomed 쪽에 별도 transition 선언이 없어 문제가 없었으나, J-2 수정으로 visibility 지연을 추가하며
     생긴 특정도 역전이다) */
  .lb-stage,.lb-zoom,.dc-viewer-zoom,.lb-reset,.lb-hint,.dc-viewer-hint,.lb-a,
  .lb.zoomed .lb-a,.lb.zoomed .lb-reset{transition-duration:.01s;transition-delay:0s}
}

/* safe-area-inset-bottom is handled by .app padding-bottom */

/* ===== SPLASH — #03 Character Minimal (Blue Signal) ===== */
.splash{
  position:fixed;top:0;left:0;right:0;z-index:99999;
  bottom:calc(-1 * env(safe-area-inset-bottom,34px));
  background:var(--lock-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-bottom:100px;
  overflow:hidden;
  transition:opacity .53s cubic-bezier(.4,0,.2,1),
             filter .53s cubic-bezier(.4,0,.2,1);
}
.splash.out{opacity:0;filter:blur(6px);pointer-events:none}

.splash::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(255,255,255,.03) 0%,transparent 100%);
  pointer-events:none;
}

.splash-char{
  position:relative;z-index:2;
  width:88px;height:96px;margin-bottom:22px;
  animation:charBounce 1.1s cubic-bezier(.34,1.56,.64,1) .4s both;
}
/* 점은 t가 자리 잡은 뒤 찍힌다(1.1s~1.45s, dismissSplash 1740ms 전에 끝) */
.splash-char .bm-dot{transform-box:fill-box;transform-origin:center;animation:bmPop .35s cubic-bezier(.34,1.56,.64,1) 1.1s both}
@keyframes bmPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes charBounce{
  from{opacity:0;transform:translateY(24px) scale(.84)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.splash-title-block{
  position:relative;z-index:1;text-align:center;
  animation:titleSlide .9s cubic-bezier(.4,0,.2,1) 1.0s both;
}
@keyframes titleSlide{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.splash-brand{
  font-size:42px;font-weight:800;color:#fff;
  letter-spacing:-2px;line-height:1;
}
.splash-sub{
  margin-top:8px;font-size:13px;
  color:rgba(255,255,255,.55);letter-spacing:.5px;
  font-weight:400;text-align:center;
}

/* (splash-kakao 제거됨: 이슈 #22 — 스플래시/로그인 분리) */

@media(prefers-reduced-motion:reduce){
  .splash *,.splash *::before,.splash *::after,
  .lock *,.lock *::before,.lock *::after{
    animation-duration:0.01ms!important;
  }
}

/* ===== MAINTENANCE ===== */
.maintenance{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  bottom:calc(-1 * env(safe-area-inset-bottom,34px));
  background:var(--lock-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-bottom:100px;
  isolation:isolate;overflow:hidden;
}
/* #98 발견9(코드 리뷰)에서 장소 탭 때문에 넣은 전역 규칙 — `display:grid`·`flex` 같은 작성자 규칙은
   특이성이 있어 브라우저 기본 `[hidden]{display:none}`을 이긴다. `!important` 없이는 hidden 속성으로 숨긴
   요소가 다시 보인다. 장소 탭은 S1-1에서 지웠지만 hidden 속성을 쓰는 다른 화면이 이 규칙에 기댄다 */
[hidden]{display:none!important}
.maintenance-char{
  width:72px;height:79px;
  margin-bottom:32px;opacity:.9;
}
.maintenance-content{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:36px;gap:12px;
}
.maintenance-title{
  font-size:calc(20px*var(--fs));font-weight:700;color:rgba(255,255,255,1);
  text-align:center;padding:0 32px;
}
.maintenance-body{
  font-size:calc(16px*var(--fs));font-weight:400;
  color:rgba(255,255,255,.65);
  text-align:center;max-width:260px;line-height:1.6;word-break:keep-all;
}
.maintenance-cta{
  background:var(--blue);color:#fff;border:none;border-radius:8px;
  padding:14px 28px;font-size:calc(16px*var(--fs));font-weight:600;
  min-width:160px;min-height:44px;
  cursor:pointer;font-family:inherit;
  transition:opacity .15s,transform .15s;
}
.maintenance-cta:active{opacity:.8;transform:scale(.97)}
.maintenance-cta:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.maintenance-cta.pulse{animation:maintenancePulse 1.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes maintenancePulse{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(37,99,235,.6)}
  50%{opacity:.85;transform:scale(1.03);box-shadow:0 0 0 8px rgba(37,99,235,0)}
}
@media(prefers-reduced-motion:reduce){
  .maintenance-cta.pulse{animation:none}
}

/* ========================================
   PWA — iOS 설치 안내 배너
   ======================================== */

.pwa-backdrop{
  position:fixed;inset:0;z-index:19998;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}
.pwa-backdrop.on{opacity:1;pointer-events:auto}

.pwa-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:19999;
  background:#111827;
  border-radius:22px 22px 0 0;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);
  transition:transform .42s cubic-bezier(.34,1.2,.64,1);
  box-shadow:0 -12px 48px rgba(0,0,0,.5);
}
.pwa-sheet.on{transform:translateY(0)}

.pwa-handle{
  width:36px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.15);
  margin:12px auto 6px;
}

.pwa-sheet-inner{padding:4px 22px 0}

.pwa-app-icon{display:flex;justify-content:center;margin-bottom:14px}
.pwa-app-icon img{
  width:62px;height:62px;border-radius:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}

.pwa-sheet-title{
  font-size:calc(18px*var(--fs));font-weight:700;color:#fff;
  text-align:center;letter-spacing:-.4px;margin-bottom:5px;
}
.pwa-sheet-sub{
  font-size:calc(13px*var(--fs));color:rgba(255,255,255,.38);
  text-align:center;margin-bottom:20px;
}

.pwa-steps{
  list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:20px;
}
.pwa-steps li{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:11px 13px;
}

.pwa-step-badge{
  width:22px;height:22px;border-radius:50%;
  background:#2563eb;color:#fff;
  font-size:calc(11px*var(--fs));font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

.pwa-step-content{display:flex;align-items:center;gap:10px;flex:1}
.pwa-step-content>span{font-size:calc(13px*var(--fs));color:rgba(255,255,255,.65);line-height:1.45}
.pwa-step-content strong{color:#fff;font-weight:600}

.pwa-step-icon{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.pwa-step-icon--share{
  background:rgba(96,165,250,.12);
  border:1px solid rgba(96,165,250,.2);
  color:#60a5fa;
}
.pwa-step-icon--home{
  background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.18);
  color:#4ade80;
}
.pwa-step-icon--add{
  background:rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.25);
  color:#93c5fd;
}
.pwa-step-icon--add span{font-size:calc(11px*var(--fs));font-weight:700;letter-spacing:-.3px}

.pwa-actions{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}

.pwa-primary{
  width:100%;min-height:44px;border-radius:11px;
  background:#2563eb;color:#fff;
  font-size:calc(13px*var(--fs));font-weight:600;
  cursor:pointer;transition:opacity .15s;
  border:none;
}
.pwa-primary:active{opacity:.82}

.pwa-secondary{
  width:100%;min-height:44px;border-radius:11px;
  background:transparent;
  color:rgba(255,255,255,.6);
  font-size:calc(12px*var(--fs));font-weight:500;
  border:1px solid rgba(255,255,255,.13);
  cursor:pointer;transition:background .15s;
}
.pwa-secondary:active{background:rgba(255,255,255,.08)}

.pwa-never{
  width:100%;padding:8px;
  background:none;border:none;
  color:rgba(255,255,255,.3);
  font-size:calc(11px*var(--fs));text-decoration:underline;
  cursor:pointer;transition:color .15s;
}
.pwa-never:active{color:rgba(255,255,255,.55)}

.pwa-arrow-hint{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 0 0;
  color:rgba(255,255,255,.2);
  animation:pwaArrowBounce 1.6s ease-in-out infinite;
}
.pwa-arrow-hint span{font-size:calc(10px*var(--fs));letter-spacing:.3px}
@keyframes pwaArrowBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}

/* ========================================
   PWA — SW 업데이트 배너 (상단 알림 pill)
   ======================================== */

.pwa-update{
  display:none;
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 14px);
  left:50%;
  transform:translateX(-50%) translateY(-200px);
  z-index:20000;
  transition:transform .4s cubic-bezier(.34,1.3,.64,1);
  pointer-events:none;
}
.pwa-update.on{display:block;transform:translateX(-50%) translateY(0);pointer-events:auto}

.pwa-update-inner{
  display:flex;align-items:center;gap:8px;
  background:#0d1b36;
  border:1px solid rgba(37,99,235,.35);
  border-radius:999px;
  padding:8px 12px 8px 14px;
  box-shadow:0 6px 24px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.04) inset;
  white-space:nowrap;
}

.pwa-update-dot{
  width:7px;height:7px;border-radius:50%;
  background:#4ade80;flex-shrink:0;
  animation:pwaUpdatePulse 2s ease infinite;
}
@keyframes pwaUpdatePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.75)}
}

.pwa-update-msg{font-size:calc(13px*var(--fs));color:rgba(255,255,255,.8);font-weight:500}

.pwa-update-inner button:not(.pwa-update-x){
  font-size:calc(12px*var(--fs));font-weight:600;color:#93c5fd;
  background:rgba(37,99,235,.15);
  border:1px solid rgba(37,99,235,.28);
  border-radius:999px;padding:4px 12px;
  cursor:pointer;transition:background .15s;
}
.pwa-update-inner button:not(.pwa-update-x):active{background:rgba(37,99,235,.28)}

.pwa-update-x{
  font-size:calc(14px*var(--fs));color:rgba(255,255,255,.28);
  cursor:pointer;padding:2px 4px;
  transition:color .15s;
}
.pwa-update-x:active{color:rgba(255,255,255,.55)}

/* ========================================
   PWA — 재설치 안내 모달 (iOS standalone + 버전 변경)
   ======================================== */

.pwa-reinstall-overlay{
  position:fixed;inset:0;z-index:19998;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}
.pwa-reinstall-overlay.on{opacity:1;pointer-events:auto}

.pwa-reinstall{
  position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.9);
  z-index:19999;
  background:#111827;
  border-radius:22px;
  padding:28px 24px 24px;
  width:min(88vw,360px);
  box-shadow:0 24px 64px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.07);
  opacity:0;pointer-events:none;
  transition:opacity .3s cubic-bezier(.4,0,.2,1),
             transform .35s cubic-bezier(.34,1.2,.64,1);
}
.pwa-reinstall.on{
  opacity:1;pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

.pwa-reinstall-icon{font-size:calc(42px*var(--fs));text-align:center;margin-bottom:12px}

.pwa-reinstall-title{
  font-size:calc(17px*var(--fs));font-weight:700;color:#fff;
  text-align:center;letter-spacing:-.3px;margin-bottom:8px;
}
.pwa-reinstall-sub{
  font-size:calc(13px*var(--fs));color:rgba(255,255,255,.4);
  text-align:center;line-height:1.65;margin-bottom:20px;
}

.pwa-reinstall-steps{
  list-style:none;counter-reset:reinstall-step;
  display:flex;flex-direction:column;gap:7px;margin-bottom:22px;
}
.pwa-reinstall-steps li{
  counter-increment:reinstall-step;
  display:flex;align-items:flex-start;gap:9px;
  font-size:calc(13px*var(--fs));color:rgba(255,255,255,.6);
  line-height:1.5;
  background:rgba(255,255,255,.04);
  border-radius:9px;padding:9px 12px;
}
.pwa-reinstall-steps li::before{
  content:counter(reinstall-step);
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:rgba(37,99,235,.25);color:#60a5fa;
  font-size:calc(10px*var(--fs));font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.pwa-reinstall-steps li strong{color:#fff;font-weight:600}

.pwa-rein-safe{
  font-size:calc(11px*var(--fs));color:rgba(255,255,255,.4);
  text-align:center;line-height:1.65;margin-bottom:18px;
}

.pwa-reinstall-actions{display:flex;gap:8px}

.pwa-reinstall-later{
  flex:1;height:43px;border-radius:11px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.4);
  font-size:calc(13px*var(--fs));font-weight:500;cursor:pointer;
  transition:background .15s;
}
.pwa-reinstall-later:active{background:rgba(255,255,255,.12)}

.pwa-reinstall-ok{
  flex:1.5;height:43px;border-radius:11px;
  background:#2563eb;color:#fff;
  font-size:calc(13px*var(--fs));font-weight:600;cursor:pointer;
  transition:opacity .15s;
}
.pwa-reinstall-ok:active{opacity:.8}

/* ========================================
   접근성 — 모션 감소 설정 대응
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .pwa-sheet{transition:none}
  .pwa-backdrop{transition:none}
  .pwa-update{transition:none}
  .pwa-reinstall{transition:none}
  .pwa-reinstall-overlay{transition:none}
  .pwa-update-dot{animation:none}
  .pwa-arrow-hint{animation:none}
}

/* ========================================
   DOCS TAB — 여행 문서 비공개 스토리지
   기획: docs/travel-docs-storage-spec.md · handoff: design/02-components/docs-upload/handoff.md
   ======================================== */
.tab:last-child{margin-right:0}

/* #111 D19·4.3, 2026-09-28 사용자 결정으로 단순화: 저장 진행 요약은 없애고 연결 상태 최소
   안내(인터넷 없음/목록 조회 실패)만 남겼다 — 분절 컨트롤 다음(#144: [+ 문서 추가] 줄은 오른쪽 아래 플로팅 버튼으로 옮겼다), 자동 삭제 안내와 준비
   현황 사이. 플렉스가 아니라 블록이라 텍스트가 자연스럽게 여러 줄로 접히고, [다시 시도]는
   자기만의 44px 줄을 갖는다(4.4절 실측 — 인라인으로 두면 줄바꿈과 얽혀 터치 타깃이 불안정했다) */
.dc-save-line{font-size:calc(11px*var(--fs));color:var(--fg2);line-height:1.5;margin:0 0 14px}
.dc-save-line.--attn{color:var(--warn-text)}
/* .dc-retry-btn(기존, .dc-empty 안 실패 화면과 공유)에 margin-top:14px가 이미 있어 텍스트
   바로 아래 자체 줄로 붙는다 — 새 CSS 없음 */
.dc-prog{background:var(--bg2);border-radius:10px;padding:12px 14px;margin-bottom:16px}
.dc-prog-row{display:flex;justify-content:space-between;align-items:baseline}
.dc-prog-lbl{font-size:calc(11px*var(--fs));font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--fg3)}
.dc-prog-cnt{font-size:calc(12px*var(--fs));font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}
.dc-prog-bar{height:6px;background:var(--line2);border-radius:999px;margin-top:8px;overflow:hidden}
.dc-prog-bar i{display:block;height:100%;background:var(--blue);border-radius:999px}
.dc-prog-sub{display:flex;gap:12px;margin-top:8px;font-size:calc(11px*var(--fs));color:var(--fg2);flex-wrap:wrap}

/* #143 문서 종류 필터 — 값은 #136 .bg-day-chip과 같고, 줄 여백만 포커스 링이 잘리지 않게 넓혔다 */
.dc-flt{display:flex;margin:-2px -8px 4px;padding:0 5px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-inline:12px}
.dc-flt[hidden]{display:none}
.dc-flt::-webkit-scrollbar{display:none}
.dc-flt-chip{flex:none;min-width:44px;min-height:44px;padding:0 3px;border:0;background:none;font-family:inherit;cursor:pointer}
.dc-flt-chip>span{display:flex;align-items:center;justify-content:center;gap:5px;min-height:32px;padding:4px 12px;border:1px solid var(--line2);border-radius:999px;background:var(--bg);color:var(--fg2);font-size:calc(12.5px*var(--fs));font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;transition:transform .15s cubic-bezier(.4,0,.2,1)}
.dc-flt-chip>span>b{font-weight:700}
.dc-flt-chip:active>span{transform:scale(.96)}
.dc-flt-chip[aria-pressed="true"]>span{background:var(--blue-bg);border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue)}
.dc-flt-chip:focus-visible{outline:none}
.dc-flt-chip:focus-visible>span{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.dc-flt-chip>span{transition:none}}

.dc-grp{font-size:calc(11px*var(--fs));font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--fg3);margin:16px 0 8px;
  /* #112 M1(코드 리뷰): 일정 앱 링크의 goToDocsGroupTab()이 scrollIntoView(block:'start')로
     이 머리글을 맨 위로 올리는데, .hdr가 top:0 sticky라 그대로 두면 헤더 뒤로 가려진다.
     .days-sticky/.plc-bar와 같은 공식(--hdr-height + --tab-panel-gap)을 쓴다. 문서 탭 분절
     컨트롤(.dc-subtabs)은 현재 sticky가 아니라 그 높이는 포함하지 않는다 — sticky로 바뀌면 더한다 */
  scroll-margin-top:calc(var(--hdr-height) + var(--tab-panel-gap));
}
.dc-grp:first-child{margin-top:0}

/* #100: 카드 전체가 하나의 <button>이다(이전에는 본문 <button>+.dc-tail 이중 구조).
   ⋮(케밥 메뉴)를 없애고 배지를 부제 줄로 옮겨 제목 폭을 넓힌다 — 카드를 누르면 파일이 바로
   열리지 않고 문서 상세 패널(.dps-*)이 먼저 뜬다. 공유 전환·삭제는 패널의 행으로 옮겼다 */
button.dc-card{
  display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:flex-start;
  width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:56px;margin-bottom:8px;
  background:var(--bg);text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:transform .15s cubic-bezier(.4,0,.2,1);
}
.dc-card:active{transform:scale(.98)}
.dc-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dc-ic{width:30px;height:30px;border-radius:8px;background:var(--blue-bg);color:var(--blue);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(10px*var(--fs));font-weight:600;flex-shrink:0;margin-top:1px}
.dc-ic.pdf{background:var(--tw-red-bg);color:var(--tw-red)}
.dc-ic.add{background:var(--bg2);color:var(--fg3)}
.dc-info{min-width:0}
/* #100 A안: nowrap 말줄임을 버리고 max-height 2줄 클램프로(#99 .dc-meta·#88 교훈과 동일 기법,
   -webkit-line-clamp는 WebKit 미동작 전례가 있어 쓰지 않는다). word-break:keep-all로 한글 단어가
   중간에서 끊기는 것을 막는다. max-height를 정확히 "2줄"보다 살짝(2px) 줄여 3줄째 글자 윗부분이
   가늘게 클리핑 경계에 비치는 현상(서브픽셀 반올림·글자 상단 오버슈트)을 가린다 — 2번째 줄 내용은
   줄 높이 안에 완전히 들어가므로 잘리지 않는다. 50자 라벨은 2줄에 다 담기지 않고 그대로 잘리며
   말줄임표는 붙지 않는다(.dc-meta·.plc-memo-text와 동일한 트레이드오프) — 패널에는 전체가 나온다 */
.dc-title{
  font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg);line-height:1.3;
  max-height:calc(1.3em*2 - 2px);overflow:hidden;
  word-break:keep-all;overflow-wrap:break-word;
}
/* #100 결정③: 배지를 꼬리(⋮ 옆)에서 부제와 같은 행으로. flex-wrap이라 넘치면 2번째 줄로 내려가고,
   실사용 문구는 대부분 1줄에 들어가 카드 높이가 늘지 않는다(핸드오프 §7 실측) */
/* F-3(코드리뷰) 재구성: 처음엔 .dc-meta-row(행 전체)에 max-height를 걸었는데, 그 안에 서로 다른
   두 종류의 아이템(.dc-meta 텍스트·.dc-pill 배지)이 섞여 있어 em 기준을 아무리 맞춰도 안 맞는다 —
   .dc-pill은 고정 padding(4px, 배율과 무관) 때문에 자기 줄을 1.4em보다 더 크게 만들고, 줄바꿈
   되면 gap(6px)도 별도로 차지해 "2*line-height" 계산과 항상 어긋난다(가장 좁은 폭·가장 큰 배율
   회귀 테스트로 실측). 대신 클램프를 실제로 길어질 수 있는 .dc-title과 동일한 자리 — 텍스트
   콘텐츠 자신(.dc-meta) — 로 옮긴다: .dc-meta는 자기 font-size 기준 정확히 2줄로 클램프하고
   (.dc-title과 같은 -2px 서브픽셀 여유 포함), .dc-pill은 애초에 한 줄 배지라 클램프가 필요 없다
   (white-space:nowrap). .dc-meta-row 자체는 높이를 제한하지 않는다 — 안의 .dc-meta가 이미
   최대 2줄로 막혀 있고 .dc-pill은 항상 1줄이라, 행 전체 높이는 "메타 2줄 + 배지 1줄"을 넘지
   않는다(런어웨이 방지라는 원래 목적은 이걸로 충분하다) */
.dc-meta-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px;
}
.dc-meta{
  color:var(--fg2);font-size:calc(11px*var(--fs));line-height:1.4;
  max-height:calc(1.4em*2 - 2px);overflow:hidden;
  word-break:keep-all;overflow-wrap:break-word;
}
.dc-pill{font-size:calc(10px*var(--fs));font-weight:600;padding:2px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.dc-pill.private{background:var(--bg2);color:var(--fg2)}
.dc-pill.shared{background:var(--success-bg);color:var(--success)}
.dc-pill.warn{background:var(--warn-bg);color:var(--warn-text)}
/* #100: 배지는 이제 어디서든 정적 표시(<span>) — 공유 전환은 패널로 옮겼다(카드에서의 이중 진입점 제거) */

/* #111 D19·5.2, 2026-09-28 사용자 결정: "이 기기에 저장됨"(done) 배지는 없앴다 — 저장 목록
   (서버 데이터 없음)에서 아직 파일을 못 받은 카드를 구분하는 online-only만 남긴다(dc-pill의
   shared(초록)·warn(주황)과 겹치지 않는 중립 회색) */
.dc-save-pill{font-size:calc(10px*var(--fs));font-weight:600;padding:2px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.dc-save-pill[data-save="online-only"]{background:var(--bg2);color:var(--fg2)}
/* 저장 목록(서버 데이터 없음)에서 파일이 없는 카드 — 여전히 포커스·클릭 가능(aria-disabled 아님).
   리뷰 L10: opacity로 전체를 낮추면 글자 대비까지 함께 떨어져 4.5:1 밑으로 갈 수 있다 — 대신
   아이콘(장식 요소, 대비 규정과 무관)만 흐리게 하고 제목은 --fg2(#60 대비 문제로 이미 검증된
   보조 문구 색)로 톤을 낮춘다. 메타·배지는 원래도 --fg2/--bg2 조합이라 손대지 않는다 */
.dc-card--unavailable .dc-ic{opacity:.55}
.dc-card--unavailable .dc-title{color:var(--fg2)}

.dc-empty,.dc-offline,.tn-empty{text-align:center;padding:48px 16px 32px;color:var(--fg2)}
.dc-empty b,.dc-offline b,.tn-empty b{display:block;font-size:calc(15px*var(--fs));font-weight:600;color:var(--fg);margin-bottom:6px}
.dc-empty small,.dc-offline small,.tn-empty small{display:block;font-size:calc(13px*var(--fs));color:var(--fg3);line-height:1.5}
.dc-loading{text-align:center;padding:32px 16px;color:var(--fg3);font-size:calc(13px*var(--fs))}
/* DOC-15: 목록 로드 실패 화면의 "다시 시도" 버튼 */
.dc-retry-btn,.tn-retry{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;margin-top:14px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);color:var(--fg);font-size:calc(13px*var(--fs));font-weight:600}
.dc-retry-btn:active,.tn-retry:active{opacity:.85}

.dc-notice,.tn-notice{background:var(--warn-bg);color:var(--warn-text);border-radius:8px;padding:8px 10px;font-size:calc(11px*var(--fs));line-height:1.45;margin:16px 0 12px}
/* #99: 문서 탭 맨 위 자동 삭제 안내 — 닫기(×) 버튼과 나란히. 플렉스 하나만 더해도 관리자 패널의
   기존 .dc-notice(#dc-purge-banner, 버튼 없는 텍스트 한 줄)는 그대로 렌더된다(단일 자식이라 영향 없음) */
.dc-notice-top{display:flex;align-items:flex-start;gap:6px}
.dc-notice-top span{flex:1}
/* 히트 영역 44×44. margin은 .dc-notice 자체 padding(8px 10px)을 정확히 상쇄해 버튼이 박스 밖으로
   튀어나오지 않으면서(.dc-more·.sync-item .h a와 같은 음수 마진 기법) 닫기를 박스 모서리에 붙인다 */
.dc-notice-x{flex-shrink:0;width:44px;height:44px;margin:-8px -10px -8px 0;display:flex;align-items:center;justify-content:center;color:var(--warn-text);font-size:calc(18px*var(--fs));line-height:1;border-radius:50%;border:0;background:none;cursor:pointer;transition:background .15s}
.dc-notice-x:hover{background:rgba(0,0,0,.06)}
.dc-notice-x:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* ===== 업로드 시트 (.fx-sheet* 는 #83 환율 계산기 시트가 같은 그릇 수치를 공유한다) ===== */
.dc-sheet-overlay,.fx-sheet-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:none;opacity:0;transition:opacity .25s}
.dc-sheet-overlay.on,.fx-sheet-overlay.on{display:block;opacity:1}
.dc-sheet,.fx-sheet{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--bg);border-radius:16px 16px 0 0;max-height:85vh;overflow-y:auto;padding:20px 20px calc(20px + var(--safe-bottom));transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s .35s;visibility:hidden;box-shadow:0 -4px 24px rgba(0,0,0,.1)}
.dc-sheet.on,.fx-sheet.on{transform:translateY(0);visibility:visible;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s}
.dc-sheet-hdr,.fx-sheet-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.dc-sheet-hdr span,.fx-sheet-hdr span{font-size:calc(15px*var(--fs));font-weight:700}
.dc-sheet-hdr button,.fx-sheet-hdr button{font-size:calc(18px*var(--fs));color:var(--fg3);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s;border:0;background:none;cursor:pointer}
.dc-sheet-hdr button:hover,.fx-sheet-hdr button:hover{background:var(--bg2)}
.dc-field{margin-bottom:14px}
.dc-sheet>.se-note.warn{margin:0 0 14px} /* S3(handoff ⑯): 시트 맨 위 「여권·신분증 사본은 올리지 마세요.」 */
.dc-field-lbl{display:block;margin-bottom:6px;font-size:calc(11px*var(--fs));font-weight:600;color:var(--fg3)}
.dc-input,.dc-select{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:6px;font-size:calc(13px*var(--fs));outline:none;transition:border-color .2s;font-family:inherit;background:var(--bg);color:var(--fg)}
.dc-input:focus,.dc-select:focus{border-color:var(--blue)}
.dc-select:disabled{background:var(--bg2);color:var(--fg3)}
/* #92 후속(2026-09-19) — "아래 입력 칸"이라는 문구만으로는 어느 칸인지 알 수 없다는 실사용 피드백으로
   안내 문구를 없애고 붙여넣기 전용 입력 칸으로 바꿨다. navigator.clipboard.read()는 그림 데이터·텍스트만
   읽고 파일 참조를 읽지 못해("탐색기·사진 앱에서 복사"·PDF 전반이 항상 이 경로) 되는 범위가 좁아
   버튼째로 뺐고(위 #92 후속 주석 — 이전 리비전), paste 이벤트(Ctrl/⌘+V·길게 눌러 붙여넣기)만 받는다.
   .dc-input과 구분되도록 .dc-file-btn과 같은 점선 테두리를 쓴다 — "여기에 넣는 자리"로 읽히게 */
.dc-paste-field{width:100%;min-height:44px;margin-top:6px;padding:9px 12px;border:1.5px dashed var(--line2);border-radius:8px;font-size:calc(12px*var(--fs));font-family:inherit;background:var(--bg2);color:var(--fg);outline:none;transition:border-color .2s}
.dc-paste-field::placeholder{color:var(--fg2)} /* --fg2: 대비 확보, --fg3는 2.85:1로 미달(#60) */
.dc-paste-field:focus{border-color:var(--blue)}
.dc-file-btn{width:100%;min-height:44px;border:1.5px dashed var(--line2);border-radius:8px;font-size:calc(13px*var(--fs));font-weight:500;color:var(--fg2);background:var(--bg2)}
.dc-file-name{font-size:calc(12px*var(--fs));color:var(--fg2);margin-top:6px}
.dc-subject-err{font-size:calc(11px*var(--fs));color:var(--danger);margin-top:6px}
/* #100: 라벨 칸 도움말·글자 수 — 50자 상한(사용자 결정, 기획 권장 24자 대신). 상한에 닿으면
   카운터 색만 --danger로 바꾸고 별도 안내는 띄우지 않는다(.aps-count.over와 같은 원칙) */
.dc-help{font-size:calc(11.5px*var(--fs));color:var(--fg2);line-height:1.5;margin-top:6px}
.dc-count{font-size:calc(11px*var(--fs));color:var(--fg2);text-align:right;margin-top:4px}
.dc-count.at-max{color:var(--danger);font-weight:600}
.dc-progress{margin-bottom:14px}
.dc-progress-bar{height:6px;background:var(--line2);border-radius:999px;overflow:hidden}
/* DOC-17: 실제 진행률을 알 수 없으므로(SDK가 업로드 진행 콜백을 주지 않음) 퍼센트 표기 대신 무한 진행 바를 쓴다 */
.dc-progress-bar.indeterminate i{display:block;height:100%;width:40%;background:var(--blue);border-radius:999px;animation:dcProgressIndeterminate 1.2s ease-in-out infinite}
@keyframes dcProgressIndeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media(prefers-reduced-motion:reduce){.dc-progress-bar.indeterminate i{animation:none;width:100%;transform:none}}
.dc-progress-pct{display:block;font-size:calc(11px*var(--fs));color:var(--fg2);margin-top:4px}
.dc-sheet-submit{width:100%;min-height:44px;background:var(--blue);color:#fff;border-radius:8px;font-size:calc(14px*var(--fs));font-weight:600}
.dc-sheet-submit:disabled,.dc-sheet-submit[aria-disabled="true"]{background:var(--line2);color:var(--fg3)}

/* ===== 이미지 뷰어 (네이비, 불투명) ===== */
.dc-viewer{
  position:fixed;inset:0;z-index:10000;background:var(--lock-bg);isolation:isolate;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility 0s .3s,padding .22s cubic-bezier(.4,0,.2,1);
}
/* DOC-03: 닫힌 상태는 visibility:hidden으로 포커스·스크린리더 접근을 완전히 차단한다(aria-hidden은 JS가 함께 토글) */
.dc-viewer.on{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility 0s,padding .22s cubic-bezier(.4,0,.2,1)}
/* #103: 전체 보기 — 좌우 여백 제거, 상단은 노치만 남기고 여분(14px) 제거. 하단은 그대로 둔다
   (F24 — #safe-bottom 네이비 띠는 뷰어보다 위 층이라 절대 침범하지 않기 위한 안전마진, DESIGN.md 참고) */
.dc-viewer.immersive{padding-left:0;padding-right:0;padding-top:env(safe-area-inset-top,0px)}

.dc-viewer-top{
  display:flex;justify-content:space-between;align-items:center;font-size:calc(12px*var(--fs));color:rgba(255,255,255,.65);
  /* #103 코드리뷰: 닫기 버튼이 빠지며 제목이 왼쪽으로 붙지 않도록, 버튼이 차지하는 자리(최대
     실측 폭 약 66px, fs=1.3·"‹ 항공" 기준)만큼 왼쪽 여백을 남긴다(6.1절 재실측) */
  padding-left:64px;
  /* #103 재실측(Playwright, 코드리뷰 이후 — 닫기 버튼을 빼고 padding-left:64px로 자리만 남긴 뒤):
     360px 폭·50자(DOCS_LABEL_MAX) 제목 기준 — fs=1 34px(2줄), fs=1.3 66px(3줄, 최악값 — 좁은
     화면일수록 padding-left가 차지하는 비중이 커져 393px의 44px보다 더 랩된다). 짧은 제목은
     fs=1 17px/fs=1.3 22px로 버튼이 있던 이전과 같다. 84px은 66px 위에 약 25%(.dc-viewer-warn과
     같은 비율) 여유. max-height가 없으면 immersive의 max-height:0과의 전환이 "none→0"으로
     보간되지 않아 순간적으로 잘린다 */
  overflow:hidden;max-height:84px;opacity:1;visibility:visible;
  transition:opacity .2s cubic-bezier(.4,0,.2,1),max-height .22s cubic-bezier(.4,0,.2,1),visibility 0s 0s;
}
.dc-viewer-top b{color:#fff;font-weight:600;min-width:0;overflow-wrap:anywhere} /* #117 L3: 공백 없는 긴 제목이 칩을 밀어내지 않게 */
/* #117 C안: 긴 제목에서 공개 범위 칩(「멤버 공유」)이 두 줄로 접히지 않게 — 제목이 줄어든다 */
.dc-viewer-vis{white-space:nowrap;flex-shrink:0;margin-left:8px}
/* #103 코드리뷰: .dc-viewer-top 밖으로 뺀 독립 오버레이 버튼(위 index.html 주석 참고) —
   .dc-viewer가 position:fixed라 이것이 포함 블록이 된다. 44px 터치 영역이 행의 실제 렌더 높이와
   완전히 분리되어, 짧은 제목에서도 상단 띠가 다시 커지지 않는다. 문구가 고정 텍스트에서
   동적("‹ 문서"/"‹ 항공")으로 바뀌며 이 터치 영역도 함께 마련했다 */
.dc-viewer-back{
  /* 코드리뷰(재측정): 절대 위치의 오프셋은 조상의 패딩을 무시하고 패딩 바깥 모서리(0,0) 기준이다
     — .dc-viewer 자신의 상단 패딩(safe-area+14px)을 top 값에 다시 더해야 원래 제목 줄과 비슷한
     높이에 온다. 13px은 44px 박스를 짧은 제목 줄(약 17~22px)의 세로 중심에 맞추기 위한 보정값 */
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px - 13px);left:6px;z-index:3;
  color:rgba(255,255,255,.65);display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 10px;
  opacity:1;visibility:visible;
  transition:opacity .2s cubic-bezier(.4,0,.2,1),visibility 0s 0s;
}
.dc-viewer.immersive .dc-viewer-top{
  opacity:0;max-height:0;pointer-events:none;visibility:hidden;
  transition:opacity .2s cubic-bezier(.4,0,.2,1),max-height .22s cubic-bezier(.4,0,.2,1),visibility 0s .2s;
}
.dc-viewer.immersive .dc-viewer-back{
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .2s cubic-bezier(.4,0,.2,1),visibility 0s .2s;
}

.dc-viewer-stage{
  position:relative;flex:1;display:flex;align-items:center;justify-content:center;margin:16px 0;min-height:0;overflow:hidden;touch-action:none;
  transition:margin .22s cubic-bezier(.4,0,.2,1);
}
.dc-viewer.immersive .dc-viewer-stage{margin:0}
.dc-viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;touch-action:none;-webkit-user-drag:none;user-select:none;transition:border-radius .22s} /* #90: pinch-zoom → none(자체 줌 엔진이 포인터 이벤트를 온전히 받는다). user-drag:none — 코드리뷰: draggable 기본값 때문에 브라우저 이미지 드래그가 시작돼 팬이 30px에서 끊겼다 */
.dc-viewer.immersive .dc-viewer-stage img{border-radius:0}
.dc-viewer-loading{color:rgba(255,255,255,.5);font-size:calc(13px*var(--fs))}
.dc-viewer-fail{display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(255,255,255,.65);font-size:calc(13px*var(--fs))}
.dc-viewer-fail .dc-viewer-act{flex:none;padding:0 16px}
.dc-viewer-warn{
  background:var(--dc-navy-warn-bg);color:var(--dc-navy-warn-fg);border-radius:8px;padding:8px 10px;font-size:calc(11px*var(--fs));line-height:1.45;
  /* #103 코드리뷰 재실측(360px 폭 기준, Playwright): fs=1에서 48px, fs=1.3에서 문구가 3줄로
     꺾여 78px — 393px 기준(57.4px)으로 잡았던 최초 상한(72px)이 좁은 화면(360px·갤럭시 S8급)에서
     6px 잘렸다. 98px은 78px 위에 약 25%(.dc-viewer-top 110px/88px과 같은 비율) 여유를 둔 값 */
  overflow:hidden;max-height:98px;opacity:1;visibility:visible;
  transition:opacity .2s cubic-bezier(.4,0,.2,1),max-height .22s cubic-bezier(.4,0,.2,1),visibility 0s 0s;
}
.dc-viewer.immersive .dc-viewer-warn{
  opacity:0;max-height:0;padding-top:0;padding-bottom:0;pointer-events:none;visibility:hidden;
  transition:opacity .2s cubic-bezier(.4,0,.2,1),max-height .22s cubic-bezier(.4,0,.2,1),visibility 0s .2s;
}
.dc-viewer-acts{
  display:flex;gap:8px;margin-top:12px;
  overflow:hidden;max-height:64px;opacity:1;visibility:visible;
  transition:opacity .2s cubic-bezier(.4,0,.2,1),max-height .22s cubic-bezier(.4,0,.2,1),margin-top .2s cubic-bezier(.4,0,.2,1),visibility 0s 0s;
}
.dc-viewer-acts:empty{display:none;margin-top:0}
.dc-viewer.immersive .dc-viewer-acts{
  opacity:0;max-height:0;margin-top:0;pointer-events:none;visibility:hidden;
  transition:opacity .2s cubic-bezier(.4,0,.2,1),max-height .22s cubic-bezier(.4,0,.2,1),margin-top .2s cubic-bezier(.4,0,.2,1),visibility 0s .2s;
}
.dc-viewer-act{flex:1;text-align:center;min-height:44px;border:1px solid var(--dc-navy-line);border-radius:8px;font-size:calc(12px*var(--fs));color:rgba(255,255,255,.9);background:transparent}
.dc-viewer-act.danger{color:var(--dc-navy-danger)}
.dc-viewer-act.info{border-color:var(--dc-navy-line2)} /* #103: [문서 정보] — 나머지는 .dc-viewer-act 그대로 상속 */
/* #103 코드리뷰(항목14): 뷰어 버튼에 키보드 초점 표시 규칙이 없었다 — 전체 보기를 풀면 닫기
   버튼으로 포커스가 가는 경로가 상시화되며 체감이 커졌다. .dc-card/.dps-close와 같은 --blue
   윤곽 관행을 그대로 따른다 */
.dc-viewer-back:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.dc-viewer-act:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dc-viewer-stage:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* #103: 전체 보기 진입 안내(매번 약 2초) — 확대 힌트(.dc-viewer-hint)와 같은 시각 언어의 별도
   엘리먼트다. localStorage "한 번 봄" 상태를 공유하면 안 된다 */
.dc-viewer-immersive-hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);max-width:90%;text-align:center;
  background:rgba(0,0,0,.62);backdrop-filter:blur(6px);color:#fff;
  font-size:calc(13px*var(--fs));font-weight:600;line-height:1.4;padding:9px 16px;border-radius:14px;z-index:2;
  opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.4,0,.2,1);
}
.dc-viewer-immersive-hint.show{opacity:1}

/* #103: .immersive 상태 규칙(예: .dc-viewer.immersive .dc-viewer-top)은 특정도가 이 미디어쿼리의
   기본 선택자보다 높아 밀려날 수 있다(#95 교훈) — !important로 상태와 무관하게 강제한다.
   코드리뷰: .dc-viewer-immersive-hint는 특정도가 아니라 "선언 순서" 문제였다 — 이 요소의 본
   transition 규칙이 1211행 근처의 완화 목록보다 아래(여기)에 있어 나중 규칙이 이겨 그 목록에
   넣어 둔 것이 무효했다. 본 규칙과 같은 블록(더 아래)에 둬야 항상 이긴다 */
@media(prefers-reduced-motion:reduce){
  .dc-viewer,.dc-viewer-top,.dc-viewer-stage,.dc-viewer-stage img,.dc-viewer-warn,.dc-viewer-acts,.dc-viewer-immersive-hint{transition:none!important}
}

/* ===== QR 표시 상태 — 흰 바탕 (#110, D17·D18) =====
   새 화면이 아니라 .dc-viewer에 .immersive와 같은 패턴으로 클래스 하나(.qr)를 더한 것이다 —
   문서 종류가 비짓재팬 QR이면 항공 탭 카드·멤버 줄·문서 탭 패널 어디서 열든 이 상태로 연다(D17).
   흰 배경 대비(WCAG, sRGB 선형화 직접 계산): --fg 19.80:1, --fg2 7.46:1, --blue 5.17:1 —
   전부 4.5:1 이상이라 어두운 테마 전용 토큰(--dc-navy-*)을 쓰지 않는다(D18, design/issue-110-handoff.md §7.2).
   --fg3(2.85:1)는 이 상태의 텍스트로 쓰지 않는다 */
.dc-viewer.qr{background:var(--bg)}
.dc-viewer.qr .dc-viewer-top{color:var(--fg2)}
/* 리뷰 L2: 배율 1.3·긴 제목이면 .dc-viewer-top의 max-height(84px)에 말없이 잘리던 것을
   두 줄 말줄임(기획 E11)으로 바꾼다 — "{소유자 이름} · {제목}" 순서상 이름이 항상 맨 앞이라
   2줄 안에서는 이름이 잘리지 않는다(실용적 해법, 이름 자체가 극단적으로 길면 예외) */
.dc-viewer.qr .dc-viewer-top b{
  color:var(--fg);font-size:calc(15px*var(--fs));font-weight:700;min-width:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:1.3;
}
.dc-viewer.qr .dc-viewer-vis{display:none} /* 공개 범위 배지 — 스캔 순간에 필요한 정보가 아니다 */
.dc-viewer.qr .dc-viewer-back{color:var(--fg2)}
.dc-viewer.qr .dc-viewer-warn{display:none} /* 캡처 경고 — QR은 보여 주려고 여는 문서라 항상 숨긴다(D18④) */
.dc-viewer.qr .dc-viewer-loading{color:var(--fg2)}
.dc-viewer.qr .dc-viewer-fail{color:var(--fg2)}
.dc-viewer.qr .dc-viewer-act{border-color:var(--line2);color:var(--fg2);background:var(--bg)}
.dc-viewer.qr .dc-viewer-act.info{border-color:var(--line2)}

/* ===== 문서 상세 패널 (Document Panel Sheet, .dps-*, #100) =====
   .aps-overlay/.aps-sheet(#94)와 같은 그릇·같은 z-index 층(10001/10002 — 구성원 상세 시트와
   동시에 열리지 않아 층을 공유한다, .lb/.dc-viewer가 10000을 공유하는 전례와 동일한 이유)이지만
   DOM은 완전히 분리한다(.dps-*, #94 상태와 섞이지 않는다). 카드를 누르면 파일이 바로 열리지
   않고 이 패널이 먼저 뜬다 — 전체 제목·정보를 보여주고 [파일 보기]가 1차 액션이다 */
.dps-overlay{
  position:fixed;inset:0;z-index:10001;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  display:none;opacity:0;transition:opacity .25s;
}
.dps-overlay.on{display:block;opacity:1}
.dps-panel{
  position:fixed;left:0;right:0;bottom:0;z-index:10002;
  background:var(--bg);border-radius:16px 16px 0 0;
  max-height:82vh;overflow-y:auto;
  padding:14px 20px calc(18px + var(--safe-bottom));
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s .35s;
  box-shadow:0 -4px 24px rgba(0,0,0,.14);
  visibility:hidden;
}
.dps-panel.on{transform:translateY(0);visibility:visible;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s}
.dps-handle{width:36px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 14px}

.dps-hdr{display:flex;align-items:flex-start;gap:12px;margin-bottom:2px}
.dps-ic{
  width:44px;height:44px;border-radius:10px;background:var(--blue-bg);color:var(--blue);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(11px*var(--fs));font-weight:700;
}
.dps-ic.pdf{background:var(--tw-red-bg);color:var(--tw-red)}
.dps-hdr-info{flex:1;min-width:0}
/* 제목은 #94 .aps-name과 동일하게 줄 수 제한이 없다(줄바꿈 그대로 허용) — 이 패널의 핵심 목적 */
.dps-title{font-size:calc(16px*var(--fs));font-weight:700;color:var(--fg);line-height:1.35;word-break:keep-all;overflow-wrap:break-word}
.dps-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.dps-close{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--fg2);font-size:calc(18px*var(--fs));flex-shrink:0;border:0;background:none;cursor:pointer;
}
.dps-close:hover{background:var(--bg2)}
.dps-close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* 정보 행 — 종류·소유자·날짜·공개 여부는 2열 그리드, 등록한 사람(대리 등록만)·여권 만료일(여권만)은
   조건부 전체폭 행. 라벨 색상은 --fg2를 쓴다(--fg3 금지 — #60 대비 부족, 기존 .sg/.si의 --fg3
   관행을 따르지 않는다) */
.dps-info{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:8px;overflow:hidden}
.dps-info-cell{background:var(--bg);padding:9px 12px}
.dps-info-cell.full{grid-column:1 / -1}
.dps-info-lbl{font-size:calc(11px*var(--fs));color:var(--fg2);font-weight:600}
.dps-info-val{font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg);margin-top:2px;word-break:keep-all}
.dps-info-val.warn{color:var(--warn-text)}

/* #111 D20·7.3: 저장 상태 한 줄(.dps-save-row)은 2026-09-28 사용자 결정으로 없앴다 */

.dps-offline-banner{margin-top:12px;background:var(--warn-bg);color:var(--warn-text);border-radius:8px;padding:9px 11px;font-size:calc(11.5px*var(--fs));line-height:1.5;display:none}
.dps-offline-banner.on{display:block}

.dps-actions{list-style:none;margin-top:14px;padding:0}
.dps-actions li{list-style:none}
.dps-action{
  display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 4px;
  background:none;border:none;border-top:1px solid var(--line);text-align:left;font:inherit;color:var(--fg);
  cursor:pointer;text-decoration:none;
}
.dps-actions li:first-child .dps-action{border-top:none}
.dps-action:active:not([aria-disabled="true"]):not([disabled]){background:var(--bg2)}
.dps-action:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.dps-action-ic{width:32px;height:32px;border-radius:8px;background:var(--bg2);color:var(--fg2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dps-action.primary .dps-action-ic{background:var(--blue-bg);color:var(--blue)}
.dps-action[aria-disabled="true"],.dps-action[disabled]{color:var(--fg2);cursor:default}
.dps-action[aria-disabled="true"] .dps-action-ic,.dps-action[disabled] .dps-action-ic{background:var(--bg2);color:var(--line2)}
.dps-action-body{flex:1;min-width:0}
.dps-action-lbl{display:block;font-size:calc(14px*var(--fs));font-weight:700}
.dps-action:not(.primary) .dps-action-lbl{font-weight:600}
.dps-action-sub{display:block;font-size:calc(11px*var(--fs));color:var(--fg2);margin-top:2px;line-height:1.4}
.dps-action-sub.err{color:var(--danger)}
.dps-action-chev{color:var(--fg2);font-size:calc(15px*var(--fs));flex-shrink:0}
.dps-action[aria-disabled="true"] .dps-action-chev{display:none}
/* 13.1절 함정: .dps-action이 display:flex를 지정하는 저작 규칙이라 [hidden]의 UA 기본값
   (display:none)이 씹힌다 — 파일 보기 행(링크/버튼 전환)에서 명시적으로 되살린다 */
.dps-action[hidden]{display:none}

.dps-spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--blue);animation:dpsSpin .7s linear infinite;flex-shrink:0;display:none}
.dps-action.is-loading .dps-spinner{display:block}
.dps-action.is-loading .dps-action-chev{display:none}
@keyframes dpsSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.dps-spinner{animation:none}}

.dps-retry-btn{
  width:100%;min-height:44px;margin-top:6px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  color:var(--fg);font-size:calc(13px*var(--fs));font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;
}
.dps-retry-btn[hidden]{display:none}

.dps-danger-zone{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.dps-danger-zone .dps-action{border-top:none;color:var(--danger)}
.dps-danger-zone .dps-action .dps-action-ic{background:var(--danger-bg);color:var(--danger)}

/* #101 10.2·v3: [소유자 변경]·[편 변경] 서브뷰 — #94 .aps-sheet[data-view] 패턴을 .dps-panel에
   3단으로 적용(패널 DOM을 새로 만들지 않고, 같은 패널 안에서 다른 view로 전환한다) */
.dps-panel:not([data-view="owner"]) .dps-owner-view{display:none}
.dps-panel:not([data-view="leg"]) .dps-leg-view{display:none}
.dps-panel[data-view="owner"] .dps-view-detail,
.dps-panel[data-view="leg"] .dps-view-detail{display:none}
.dps-back{
  display:inline-flex;align-items:center;gap:4px;color:var(--fg2);font-size:calc(13px*var(--fs));font-weight:600;
  min-height:44px;box-sizing:border-box;padding:6px 8px;margin:-10px 0 6px -8px;background:none;border:none;cursor:pointer;
}
.dps-back:hover{color:var(--fg)}
.dps-back:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.dps-owner-title{font-size:calc(15px*var(--fs));font-weight:700;margin-bottom:10px}
.dps-owner-doc{font-size:calc(12px*var(--fs));color:var(--fg2);margin-bottom:14px;word-break:keep-all;overflow-wrap:break-word}
.dps-field{margin-bottom:4px}
.dps-field-lbl{display:block;font-size:calc(12px*var(--fs));font-weight:600;color:var(--fg2);margin-bottom:6px}
.dps-owner-err{font-size:calc(11.5px*var(--fs));color:var(--danger);margin-top:8px;line-height:1.5}
.dps-owner-actions{display:flex;gap:8px;margin-top:20px}
.dps-btn{flex:1;min-height:44px;border-radius:8px;font-size:calc(13px*var(--fs));font-weight:600;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.dps-btn-ghost{background:var(--bg2);color:var(--fg);border:1px solid var(--line)}
.dps-btn-primary{background:var(--blue);color:#fff}
.dps-btn-primary:disabled{background:var(--line2);color:var(--fg2);cursor:default}
.dps-btn-primary .dps-spinner{display:none;border-color:rgba(255,255,255,.4);border-top-color:#fff}
.dps-btn-primary.pending .dps-spinner{display:block}
.dps-btn-primary.pending .dps-owner-save-lbl{opacity:.85}

/* #101 v3(4.1절): "편" 세그먼트 버튼 2개 — 등록 시트(#dc-field-leg)·문서 상세 패널 [편 변경]
   서브뷰(#dps-leg-field) 공용. 드롭다운이 아니라 세그먼트로 만든 근거: 옵션이 정확히 2개뿐이라
   1탭으로 끝나고, 지금 무엇이 선택됐는지 항상 화면에 보이며, 44px 터치 타깃을 직접 보장하기
   쉽다(handoff 4.1절) */
.dc-leg-seg{display:flex;gap:8px}
.dc-leg-btn{
  flex:1;min-height:44px;padding:10px;text-align:center;
  border:1px solid var(--line);background:var(--bg);border-radius:8px;
  font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg2);cursor:pointer;
  transition:all .15s cubic-bezier(.4,0,.2,1);
}
.dc-leg-btn:active{transform:scale(.97)}
.dc-leg-btn[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:#fff}
.dc-leg-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ===== iOS PWA Standalone Safe Area Fix ===== */
/* 100dvh in standalone mode EXCLUDES safe area (shorter than full screen).
   100vh in standalone mode = full screen (no browser chrome).
   See: velog.io/@sangpok/PWA-Standalone-레이아웃 */
@media all and (display-mode: standalone) {
  html,body{height:100vh}
}

/* ===== PROFILE — 글자 크기 설정 (#74) ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.prof-sep{height:1px;background:var(--line);margin:16px 0 12px}
.prof-fs-lbl{font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg)}
.prof-fs-sub{font-size:calc(11.5px*var(--fs));color:var(--fg2);margin:2px 0 10px} /* --fg2: 대비 7:1 (리뷰 — --fg3는 2.85:1로 미달) */
.prof-fs-seg{display:flex;gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:4px}
.prof-fs-btn{flex:1;min-height:52px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;color:var(--fg2);transition:background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}
.prof-fs-btn:hover{background:var(--line)}
.prof-fs-btn:active{transform:scale(.96)}
.prof-fs-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.prof-fs-btn[aria-checked="true"]{background:var(--blue);color:#fff}
.prof-fs-btn[aria-checked="true"]:hover{background:var(--blue)}
/* 미리보기 "가"는 규약 예외 — --fs 를 곱하지 않고 각 칸의 배율(14px×1 / ×1.15 / ×1.3)로 고정. 세 단계의 상대 크기를 보여 주기 위함 */
.prof-fs-preview{font-weight:700;line-height:1;display:block}
.prof-fs-btn[data-fs="1"] .prof-fs-preview{font-size:14px}
.prof-fs-btn[data-fs="1.15"] .prof-fs-preview{font-size:calc(14px*1.15)}
.prof-fs-btn[data-fs="1.3"] .prof-fs-preview{font-size:calc(14px*1.3)}
.prof-fs-name{font-size:calc(11px*var(--fs));font-weight:500}

/* ===== 엔화 환율 계산기 시트 (#83) — 그릇은 .dc-sheet*, 여기는 안쪽 콘텐츠만 =====
   보조 문구는 --fg3 대신 --fg2를 쓴다(#60 대비 문제). 직접 입력 줄의 input/output은 min-width:0 필수 —
   flex 항목의 기본 최소 폭(WebKit 238px)이 결과값을 시트 밖으로 밀어낸다(QA FX-2). */
.fx-sheet-rate{text-align:center;padding:2px 0 14px}
.fx-sheet-skel-val{width:150px;height:28px}
.fx-sheet-skel-sub{width:140px;height:14px;margin:8px auto 0}
.fx-sheet-val-row{display:flex;align-items:center;justify-content:center;gap:8px}
.fx-sheet-val{font-size:calc(24px*var(--fs));font-weight:800;color:var(--fg);letter-spacing:-.4px}
.fx-sheet-sub{display:flex;justify-content:center;gap:8px;margin-top:6px;font-size:calc(12.5px*var(--fs));color:var(--fg2);flex-wrap:wrap}
.fx-sheet-chg{font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg2)} /* 보합 기본값 */
.fx-sheet-chg.up{color:var(--danger)}
.fx-sheet-chg.down{color:var(--blue)}
.fx-sheet-time{color:var(--fg2)}
.fx-sheet-src{margin-top:4px;font-size:calc(11px*var(--fs));color:var(--fg2)}
.fx-sheet-attr{margin-top:2px;font-size:calc(11px*var(--fs))}
.fx-sheet-attr a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);text-decoration:underline;text-underline-offset:3px} /* 출처 표기 의무 링크(open.er-api) */

/* 방향 토글 */
.fx-dir-seg{display:flex;gap:4px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:16px}
.fx-dir-btn{flex:1;min-height:44px;border:0;background:transparent;border-radius:7px;font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg2);font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.fx-dir-btn[aria-pressed="true"]{background:var(--bg);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.fx-dir-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.fx-calc-lbl{font-size:calc(11px*var(--fs));font-weight:600;color:var(--fg2);letter-spacing:.5px;margin-bottom:8px}
.fx-calc-grid{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.fx-calc-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:calc(13px*var(--fs));border-bottom:1px solid var(--line)}
.fx-calc-row:last-child{border-bottom:0}
.fx-calc-row span{color:var(--fg2)}
.fx-calc-row b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.fx-calc-custom-lbl{display:block;font-size:calc(11px*var(--fs));font-weight:600;color:var(--fg2);margin-bottom:6px}
.fx-calc-custom-row{display:flex;align-items:center;gap:8px}
.fx-calc-custom-row input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font-size:calc(14px*var(--fs));outline:none;transition:border-color .2s;font-family:inherit;background:var(--bg);color:var(--fg)}
.fx-calc-custom-row input:focus{border-color:var(--blue)}
.fx-calc-eq{font-size:calc(14px*var(--fs));color:var(--fg2)}
.fx-calc-custom-row output{flex:1;min-width:0;overflow:hidden;min-height:44px;display:flex;align-items:center;padding:0 12px;background:var(--blue-bg);color:var(--blue);border-radius:8px;font-size:calc(14px*var(--fs));font-weight:700;font-variant-numeric:tabular-nums}
.fx-calc-custom-row output.empty{color:var(--fg2);background:var(--bg2)}

.fx-sheet-empty{text-align:center;padding:36px 16px 24px}
.fx-sheet-empty b{display:block;font-size:calc(15px*var(--fs));font-weight:600;color:var(--fg);margin-bottom:6px}
.fx-sheet-empty small{display:block;font-size:calc(13px*var(--fs));color:var(--fg2);margin-bottom:14px}
.fx-sheet-retry{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;font-size:calc(13px*var(--fs));font-weight:600;color:#fff;background:var(--blue);border-radius:8px;border:0;font-family:inherit;cursor:pointer}
.fx-sheet-retry:disabled{opacity:.6;cursor:default}

/* ===== #116 비행 위치 (전체 화면 덮개) — 기획 docs/flight-position-spec.md · 디자인 design/issue-116-handoff.md·DESIGN.md. 새 토큰 없음 ===== */
.fp,.fp *{box-sizing:border-box}
.fp{font-family:'Inter','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--fg);-webkit-font-smoothing:antialiased}
.fp button{font-family:inherit;cursor:pointer}
.fp [hidden]{display:none!important}
.fp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 덮개 틀 (실제: position:fixed; inset:0; z-index:10000 — 문서 뷰어·라이트박스와 같은 층) */
.fp{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);overscroll-behavior:contain;
  transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),visibility 0s .3s,background-color .28s cubic-bezier(.4,0,.2,1)}
.fp.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),visibility 0s,background-color .28s cubic-bezier(.4,0,.2,1)}
.fp-hd{touch-action:none;flex:none;display:flex;align-items:flex-start;gap:12px;padding:calc(var(--safe-top) + 10px) 12px 10px 16px;border-bottom:1px solid var(--line)}
.fp-hd-tx{flex:1;min-width:0}
.fp-title{margin:0;font-size:calc(18px*var(--fs));font-weight:800;letter-spacing:-.3px;line-height:1.3}
.fp-title:focus{outline:none}
.fp-meta{font-size:calc(13px*var(--fs));color:var(--fg2);line-height:1.45;margin:2px 0 0}
.fp-meta b{color:var(--fg);font-weight:700}
.fp-x{flex:none;min-width:68px;min-height:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--line2);border-radius:22px;background:var(--bg);color:var(--fg);font-size:calc(14px*var(--fs));font-weight:700}
.fp-x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;flex:none}
.fp-x:active{background:var(--bg2)}
.fp-x:focus-visible,.fp-perm button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fp-body>*{flex:none}
.fp-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px calc(var(--safe-bottom) + 16px);display:flex;flex-direction:column;gap:10px}

/* ② 위치 출처 줄 */
.fp-src{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fp-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px 4px 9px;border-radius:16px;
  font-size:calc(14px*var(--fs));font-weight:800;line-height:1.3;border:1.5px solid transparent}
.fp-chip svg{width:16px;height:16px;flex:none}
.fp-chip--real{background:var(--blue);color:var(--bg);border-color:var(--blue)}
.fp-chip--real svg{fill:var(--bg)}
.fp-chip--exp{background:var(--bg);color:var(--blue);border:1.5px dashed var(--blue)}
.fp-chip--exp svg{fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linejoin:round}
.fp-chip--idle{background:var(--bg2);color:var(--fg);border-color:var(--line2)}
.fp-chip--warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-text)}
.fp-chip--done{background:var(--success-bg);color:var(--success-text);border-color:var(--success-text)}
.fp-chip--idle svg,.fp-chip--warn svg,.fp-chip--done svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fp-src-d{font-size:calc(13px*var(--fs));line-height:1.5;color:var(--fg2)}

/* 지도 */
.fp-map-wrap{background:var(--bg2);border-radius:12px;display:flex;justify-content:center;padding:8px 0;overflow:hidden;border:1px solid var(--line)}
.fp-map-frame{position:relative;flex:none}
/* v1.3 확대: 1배에서는 pan-y — 한 손가락 세로 끌기는 브라우저 기본 스크롤이 처리하고 두 번 탭 확대도 막힌다. 확대 중(.z)에는 none — 한 손가락 이동을 앱이 처리 */
.fp-map{overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:relative;background:var(--blue-bg);outline:1px solid var(--line2);height:clamp(220px,calc(1dvh*30),280px);aspect-ratio:553.3/610;flex:none}
.fp-map.z{touch-action:none;cursor:grab}.fp-map.z:active{cursor:grabbing}
.fp-map:focus{outline:none}.fp-map:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.fp-zoom-reset{position:absolute;top:6px;right:6px;z-index:3;min-height:44px;padding:0 12px 0 10px;display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line2);border-radius:22px;background:var(--bg);color:var(--fg);font-size:calc(13px*var(--fs));font-weight:700;font-family:inherit;cursor:pointer}
.fp-zoom-reset[hidden]{display:none}
.fp-zoom-reset svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fp-zoom-reset:active{background:var(--bg2)}
.fp-zoom-reset:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fp-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fp-land{fill:var(--bg);fill-rule:evenodd;stroke:none} /* S3b: 세계 고리에 구멍(카스피해)이 있다 — 선은 해안선만 */
.fp-coast{fill:none;stroke:var(--fg3);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.fp-route{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.fp-route--rest{stroke:var(--fg2);stroke-width:2px;stroke-dasharray:6 5}
.fp-route--done{stroke:var(--blue);stroke-width:4px}
.fp-apt{position:absolute;width:0;height:0}
.fp-apt i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:3px solid var(--fg)}
.fp-apt span{position:absolute;top:0;transform:translateY(-50%);white-space:nowrap;font-size:calc(13px*var(--fs));font-weight:800;color:var(--fg);
  text-shadow:0 0 3px var(--bg),0 0 3px var(--bg),0 0 3px var(--bg),0 0 5px var(--bg)}
.fp-apt--up span{left:0;top:-32px;transform:translate(-50%,-50%)} /* 비행기 아이콘 지름 40 → 점에서 32px 떨어뜨려 겹침 방지 */
.fp-apt--dn span{left:0;top:32px;transform:translate(-50%,-50%)}
.fp-plane{position:absolute;width:0;height:0}
.fp-plane-disc{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.fp-plane-disc svg{width:24px;height:24px;display:block}
.fp-plane--real .fp-plane-disc{background:var(--blue);border:2px solid var(--bg)}
.fp-plane--real svg{fill:var(--bg)}
.fp-plane--exp .fp-plane-disc{background:var(--bg);border:2px dashed var(--blue)}
.fp-plane--exp svg{fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linejoin:round}
.fp-plane-tag{position:absolute;left:0;top:24px;transform:translateX(-50%);white-space:nowrap;font-size:calc(11px*var(--fs));font-weight:800;line-height:1.3;padding:1px 7px;border-radius:9px}
.fp-plane--real .fp-plane-tag{background:var(--blue);color:var(--bg)}
.fp-plane--exp .fp-plane-tag{background:var(--bg);color:var(--blue);border:1px dashed var(--blue)}

/* ④ 진행률 */
.fp-prog{display:flex;flex-direction:column;gap:6px}
.fp-prog-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:calc(13px*var(--fs));font-weight:700}
.fp-prog-top .pct{font-size:calc(18px*var(--fs));font-weight:800;color:var(--blue)}
.fp-bar{height:12px;border-radius:6px;background:var(--line);overflow:hidden;border:1px solid var(--line2)}
.fp-bar i{display:block;height:100%;width:0;background:var(--blue)}
.fp-bar--exp i{background:repeating-linear-gradient(45deg,var(--blue) 0 5px,var(--blue-bg) 5px 10px)}

/* ⑤ 값 네 칸 */
.fp-vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;margin:0}
.fp-val{border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:76px;min-width:0}
.fp-val dt{font-size:calc(12px*var(--fs));font-weight:600;color:var(--fg2);line-height:1.3}
.fp-val dd{margin:0}
.fp-val .v{font-size:calc(22px*var(--fs));font-weight:800;letter-spacing:-.4px;line-height:1.25;margin-top:2px;overflow-wrap:break-word}
.fp-val .v small{font-size:calc(13px*var(--fs));font-weight:600;letter-spacing:0;color:var(--fg2);margin:0 1px}
.fp-val .v.none{color:var(--fg3)}
.fp-val .s{font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.4;margin-top:1px}

/* ⑥ 보조 안내 · 권한 카드 */
.fp-hint{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:12px;font-size:calc(14px*var(--fs));line-height:1.55;background:var(--bg2);border:1px solid var(--line)}
.fp-hint svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fp-hint--warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-text)}
.fp-spin{width:16px;height:16px;border-radius:50%;flex:none;margin-top:3px;border:2px solid var(--line2);border-top-color:var(--blue);animation:dpsSpin .8s linear infinite}
.fp-perm{border:1.5px solid var(--blue);background:var(--blue-bg);border-radius:12px;padding:14px}
.fp-perm p{margin:0;font-size:calc(14px*var(--fs));line-height:1.6;font-weight:500}
.fp-perm button{margin-top:12px;width:100%;min-height:48px;border:0;border-radius:10px;background:var(--blue);color:var(--bg);font-size:calc(15px*var(--fs));font-weight:700}
.fp-perm button:active{background:var(--blue-hover)}

/* 첫 그림·앞으로 복귀한 첫 그림에는 전환을 끈다 — app.js가 첫 프레임 뒤 .mv를 얹는다(핸드오프 §6) */
.fp.mv .fp-plane{transition:left .9s linear,top .9s linear}
.fp.mv .fp-plane-disc svg{transition:transform .9s linear}
.fp.mv .fp-bar i{transition:width .9s linear}
.fp.mv .fp-map.zm .fp-plane{transition:none} /* 손가락·확대 애니메이션 중에는 비행기 left/top 전환을 끈다 */
.fp-chip-ic{display:inline-flex;flex:none}
@media (prefers-reduced-motion:reduce){
  .fp,.fp.on{transition:none;transform:none}
  .fp.mv .fp-plane,.fp.mv .fp-plane-disc svg,.fp.mv .fp-bar i{transition:none}
  .fp-spin{animation:none}
}
/* ===== #123 지도 전체 화면 (v1.4) — .fp 위에 .big 을 얹어 같은 화면 안에서 모드만 바꾼다(design/issue-123-handoff.md §2) ===== */
/* [크게 보기] — 기본 화면 지도 왼쪽 아래 (오른쪽 위는 확대 중 [전체 보기] 자리) */
.fpf-grow{position:absolute;left:6px;bottom:6px;z-index:3;min-height:44px;padding:0 12px 0 10px;display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line2);border-radius:22px;background:var(--bg);color:var(--fg);font-size:calc(13px*var(--fs));font-weight:700}
.fpf-grow.fpf-grow--r{left:auto;right:6px} /* S3b: 왼쪽 아래에 공항이 있는 경로 */
.fpf-grow svg,.fpf-shrink svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fpf-grow:active,.fpf-shrink:active{background:var(--bg2)}
.fpf-grow:focus-visible,.fpf-shrink:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 기본 화면에서는 전체 화면 전용 요소를 그리지 않는다(display:none → Tab·낭독기에서도 빠진다) */
.fpf-shrink,.fpf-info{display:none}
.fpf-stage,.fpf-group{display:contents}
.fp.big{background:var(--bg2)}
.fp.big .fp-hd,.fp.big .fp-src,.fp.big .fp-perm,.fp.big .fp-prog,.fp.big .fp-vals,.fp.big .fp-hint,.fp.big .fpf-grow{display:none} /* D64 — display:none 이라 trapSheetTab 의 offsetParent 판정·낭독기에서 빠진다 */
.fp.big .fp-body{position:absolute;inset:0;padding:0;overflow:hidden;display:block;touch-action:none} /* 빈 바탕 끌기가 고무줄·뒤 스크롤로 새지 않게(R2) */
.fp.big .fp-map-wrap{position:absolute;inset:0;border:0;border-radius:0;padding:0;background:transparent;display:block;overflow:hidden}
.fp.big .fpf-shrink{display:inline-flex;align-items:center;gap:6px;position:absolute;z-index:4;
  top:calc(var(--safe-top) + 8px);right:calc(var(--safe-right) + 16px);min-height:44px;padding:0 16px 0 13px;
  border:1px solid var(--line2);border-radius:22px;background:var(--bg);color:var(--fg);font-size:calc(14px*var(--fs));font-weight:700}
.fp.big .fpf-shrink svg{width:16px;height:16px}
/* 무대: 안전 영역 안쪽(위는 버튼 줄 60px 비움)을 컨테이너로 삼아 cqw/cqh 로 지도 크기를 정한다 */
.fp.big .fpf-stage{display:flex;position:absolute;inset:0;align-items:flex-start;container-type:size;
  --fpf-pb:calc(var(--safe-bottom) + 24px);                       /* 홈 화면 앱 하단 남색 띠(#safe-bottom = 안전 영역 + 20px) 위로 */
  --fpf-strip:calc(52px + 4px + 15px*var(--fs)*1.4);               /* 한 줄 정보 띠 1줄 높이 + 둘째 줄 예약 */
  padding:calc(var(--safe-top) + 60px) var(--safe-right) var(--fpf-pb) var(--safe-left)}
.fp.big .fpf-group{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none;margin:auto; /* 가운데, 넘치면 위에 붙고 아래로만 넘침 */
  width:min(100cqw, calc((100cqh - var(--fpf-strip) - 12px) * 553.3 / 610));   /* D63: 지도 범위 전체가 보이는 가장 큰 크기 */
  padding-bottom:calc(4px + 15px*var(--fs)*1.4)}                                /* 둘째 줄이 생겨도 지도가 안 움직이게 아래로만 자란다 */
.fp.big .fp-map-frame{width:100%}
.fp.big .fp-map{width:100%;height:auto;aspect-ratio:553.3/610;touch-action:none}   /* D67: 1배에서도 손가락 입력을 지도가 모두 받는다 */
/* 한 줄 정보 띠 */
.fp.big .fpf-info{display:block;width:calc(100% - 32px);min-height:52px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.fpf-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.fpf-chip{min-height:28px;padding:3px 10px 3px 8px;gap:5px;font-size:calc(13px*var(--fs));border-radius:14px;max-width:100%}
.fpf-chip svg{width:14px;height:14px}
.fpf-tx{font-size:calc(15px*var(--fs));font-weight:700;line-height:1.4;min-width:0;word-break:keep-all}
.fpf-tx b{font-weight:800;color:var(--blue)}
.fpf-tx:empty{display:none}
/* 가로 화면 (Q11 A): 지도를 높이에 맞추고 한 줄 정보는 지도 옆. 버튼은 같은 오른쪽 위 자리 */
@media (orientation:landscape){
  .fp.big .fpf-stage{padding:6px var(--safe-right) var(--fpf-pb) var(--safe-left)}
  .fp.big .fpf-group{flex-direction:row;gap:24px;width:auto;padding-bottom:0;
    --fpf-w:min(calc(100cqh * 553.3 / 610), calc(100cqw - 244px))}
  .fp.big .fp-map-frame{width:var(--fpf-w)}
  .fp.big .fpf-info{width:min(340px, calc(100cqw - var(--fpf-w) - 24px))}
}
/* 전환 (D75): 지도 틀만 FLIP 으로 확대·축소, 나머지는 페이드 */
@keyframes fpfIn{from{opacity:0}to{opacity:1}}
.fp.big .fpf-info,.fp.big .fpf-shrink{animation:fpfIn .2s cubic-bezier(.4,0,.2,1) .1s both}
.fp.back .fp-hd,.fp.back .fp-src,.fp.back .fp-perm,.fp.back .fp-prog,.fp.back .fp-vals,.fp.back .fp-hint{animation:fpfIn .22s cubic-bezier(.4,0,.2,1) .06s both}
.fp.tr .fp-map-wrap{overflow:visible}
.fp.tr .fp-map-frame{position:relative;z-index:5;will-change:transform}
@media (prefers-reduced-motion:reduce){
  .fp.big .fpf-info,.fp.big .fpf-shrink,.fp.back .fp-hd,.fp.back .fp-src,.fp.back .fp-perm,.fp.back .fp-prog,.fp.back .fp-vals,.fp.back .fp-hint{animation:none}
}
/* 일정 카드의 비행 위치 버튼 — 채운 비행기 실루엣(문서 아이콘과 모양이 달라 같은 줄에서 구분된다, D4) */
.ev-l .ev-al--fp svg{width:13px;height:13px;fill:currentColor;stroke:none;transform:rotate(45deg)}

/* 사진 위 덧그림(메모 사진 줄의 「+N」 .tn-ph-more) — 옛 #115 동영상 칸 토큰 중 이것만 남았다(S3 Q15에서 동영상 칸 삭제) */
:root{
  --lbv-ctl-bg:rgba(0,0,0,.6);
  --lbv-ctl-fg:#fff;
}

/* ==============================================================   #129 일정 편집 — style.css에 그대로 옮길 규칙 (새 색 토큰 없음, 새 z-index 층 없음)
   접두어: .sch-edit-*(일정 탭) · .ev-ed* · .ev-undo(카드) · .sch-trash* · .se-*(편집 시트)
   ===================================================================== */
:root{--se-vvh:100dvh;--se-kb:0px} /* app.js가 visualViewport로 갱신(키보드 대응). 기본값 = 키보드 없음.
   S1-2b: 바로 위 주석 안의 「별표+빗금」이 주석을 일찍 닫아 이 기본값이 통째로 버려지고 있었다(편집 시트는 열 때 app.js가 값을 넣어 드러나지 않았다) — 주석을 고쳤다 */

/* ---- S1 진입 버튼 — #141 오른쪽 아래 플로팅 버튼(앱 단 fixed, 일정 탭에서만 hidden 해제).
   "맨 위로" 알약(#95)과 같은 bottom(--stt-offset)·z-index·그림자. 알약은 가운데라 320px·글자 1.3배에서도
   (알약 오른쪽 끝 ≈216px < 버튼 왼쪽 252px) 겹치지 않는다. 끝 여백(.main::after)은 이미 알약 높이만큼 확보돼 있다 ---- */
.sch-edit-row,.dc-fab-row{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:var(--stt-offset);z-index:100}
.sch-edit-row[hidden],.dc-fab-row[hidden]{display:none}
.sch-edit-btn,.dc-fab-btn{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:none;background:var(--blue);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.14);
}
.sch-edit-btn svg,.dc-fab-btn svg{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dc-fab-btn svg{stroke-width:2.4}
.sch-edit-btn:active,.dc-fab-btn:active{background:var(--blue-active)}
.sch-edit-btn:focus-visible,.dc-fab-btn:focus-visible{outline:2px solid #fff;outline-offset:-4px}   /* 뒤 배경을 예측할 수 없어 안쪽(#95 알약과 같은 이유) */
.sch-edit-btn[aria-disabled="true"],.dc-fab-btn[aria-disabled="true"]{color:var(--fg3);background:var(--bg2);border:1.5px dashed var(--line2)}            /* 오프라인: 잠긴 모양, 눌러도 토스트만 */
.sch-edit-btn[aria-disabled="true"],.dc-fab-btn[aria-disabled="true"]{cursor:default}
.sch-edit-btn[aria-disabled="true"]:focus-visible,.dc-fab-btn[aria-disabled="true"]:focus-visible{outline-color:var(--blue)} /* 못 누름 배경(--bg2)에서 흰 초점 링은 대비 1.06:1이라 안 보인다(WCAG 2.4.7) */
.sch-edit-btn[aria-busy="true"]{cursor:default}
.sch-edit-btn .sch-edit-spin{display:none;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:dpsSpin .7s linear infinite;flex:none}
.sch-edit-btn[aria-busy="true"] svg{display:none}
.sch-edit-btn[aria-busy="true"] .sch-edit-spin{display:inline-block}

/* ---- S2 편집 모드 표시줄 (.days-sticky 안, .days 아래) — 색 + 글자 + 테두리 + 연필 아이콘 ---- */
.sch-edit-banner{display:none;align-items:center;gap:6px;margin-top:8px;padding:3px 3px 3px 12px;border:1.5px solid var(--blue);border-radius:10px;background:var(--blue-bg)}
.is-editing .sch-edit-banner{display:flex}
.sch-edit-banner svg{width:15px;height:15px;flex:none;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sch-edit-banner-tx{flex:1;min-width:0;font-size:calc(13px*var(--fs));font-weight:700;color:var(--blue);line-height:1.3;word-break:keep-all}
.sch-edit-banner.off{border-color:var(--warn-text);background:var(--warn-bg)}
.sch-edit-banner.off svg{stroke:var(--warn-text)}
.sch-edit-banner.off .sch-edit-banner-tx{color:var(--warn-text)}
/* #137 [+ 추가] — 고정 띠 안이라 스크롤과 무관하게 늘 보인다. 일차마다 있던 폭 100% 버튼(48px)을 대신한다 */
.sch-edit-add{min-height:44px;padding:0 12px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--blue);border-radius:8px;background:var(--bg);color:var(--blue);font-size:calc(13px*var(--fs));font-weight:700;white-space:nowrap}
.sch-edit-banner .sch-edit-add svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4}
.sch-edit-add:active{background:var(--blue-bg)}
.sch-edit-add:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sch-edit-add[aria-disabled="true"]{color:var(--fg3);border-color:var(--line2);border-style:dashed}
.sch-edit-done{min-height:44px;min-width:68px;padding:0 14px;border-radius:8px;background:var(--blue);color:#fff;font-size:calc(13px*var(--fs));font-weight:700}
.sch-edit-done:active{background:var(--blue-active)}
.sch-edit-done:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sch-edit-note{display:none;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5;margin:-4px 0 14px}   /* 스크롤되어 사라지는 보조 문구 — 고정 영역을 키우지 않으려고 분리 */
.is-editing .sch-edit-note{display:block}

/* ---- 카드 [수정]·[삭제] (편집 모드에서만 보임) ---- */
.ev-ed{display:none;align-items:center;gap:8px;margin-top:10px;padding-top:6px;border-top:1px dashed var(--line2)}
.is-editing .ev-ed{display:flex}
.ev-ed button{min-height:44px;padding:0 14px;border-radius:8px;font-size:calc(13px*var(--fs));font-weight:600;display:inline-flex;align-items:center;gap:5px}
.ev-ed button svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ev-ed .ev-ed-mod{border:1px solid var(--line2);background:var(--bg);color:var(--fg)}
.ev-ed .ev-ed-mod:active{background:var(--bg2)}
.ev-ed .ev-ed-del{margin-left:auto;color:var(--danger);background:none;border:1px solid transparent}   /* 위험 동작: 테두리·채움 없이 글자만 + 오른쪽 끝으로 떨어뜨려 [수정]과 멀리 */
.ev-ed .ev-ed-del:active{background:var(--danger-bg)}
.ev-ed button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ev-ed button[aria-disabled="true"]{color:var(--fg3);background:none;border-color:var(--line)}
.ev-ed .ev-ed-del[aria-disabled="true"]{border-color:transparent}

/* 저장 직후 강조 — 배경이 서서히 사라짐. JS가 2.4초 뒤 .flash를 뺀다 */
.ev.flash{isolation:isolate}
.ev.flash::after{content:'';position:absolute;z-index:-1;left:-8px;right:-8px;top:-6px;bottom:16px;border-radius:8px;background:var(--blue-bg);animation:evFlash 2.4s ease-out forwards}
@keyframes evFlash{0%,65%{opacity:1}100%{opacity:0}}
.ev:last-child.flash::after{bottom:-6px}

/* 지운 자리 한 줄 */
.ev-undo{display:flex;align-items:center;gap:6px;margin-bottom:22px;padding:4px 4px 4px 12px;border:1px dashed var(--line2);border-radius:10px;background:var(--bg2)}
.ev-undo-tx{flex:1;min-width:0;font-size:calc(13px*var(--fs));color:var(--fg2);line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.ev-undo button{min-height:44px;padding:0 12px;border-radius:8px;color:var(--blue);font-size:calc(13px*var(--fs));font-weight:700;white-space:nowrap}
.ev-undo button:active{background:var(--blue-bg)}
.ev-undo button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ev-undo button[aria-disabled="true"]{color:var(--fg3)}

.sch-day-empty{text-align:center;padding:36px 16px 8px;font-size:calc(14px*var(--fs));color:var(--fg2);line-height:1.5}
/* ======================================================================
   #139 신규 — 일정 탭 날씨 카드 (wx-)  ·  새 색 없음, 전부 기존 토큰. S3b: 현재 위치 버튼·꼬리표·확인 중 표시(.wx-btn·.wx-tag·.wx-pin·.wx-chk·.wx-spin)는 지웠다
   ====================================================================== */
.wx{margin:0 0 18px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg)}
.wx-hd{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:22px}
.wx-name{display:inline-flex;align-items:center;gap:5px;font-size:calc(13px*var(--fs));font-weight:700;color:var(--fg);line-height:1.4;word-break:keep-all}
.wx-main{display:flex;align-items:center;gap:12px;margin-top:10px}
.wx-ico{width:36px;height:36px;flex:none;color:var(--fg);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wx-ico .a{stroke:var(--blue)}
.wx--now .wx-ico{width:40px;height:40px}
.wx-now{flex:none;font-size:calc(34px*var(--fs));font-weight:800;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.wx-side{flex:1;min-width:0}
.wx-sky{font-size:calc(16px*var(--fs));font-weight:700;line-height:1.3;word-break:keep-all}
.wx-feel{margin-top:1px;font-size:calc(12.5px*var(--fs));color:var(--fg2);line-height:1.4}
.wx-st{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:4px}
.wx--now .wx-st{margin-top:10px}
.wx-st>span{white-space:nowrap;font-size:calc(12.5px*var(--fs));color:var(--fg2);line-height:1.5}
.wx-st b{margin-left:3px;font-size:calc(15px*var(--fs));font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.wx-rain{display:flex;align-items:center;gap:6px;margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--blue-bg);color:var(--blue);font-size:calc(13px*var(--fs));font-weight:600;line-height:1.4;word-break:keep-all}
.wx-rain svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wx-none{margin-top:8px;font-size:calc(13px*var(--fs));color:var(--fg2);line-height:1.5}
.wx-asof{margin-top:8px;text-align:right;font-size:calc(11.5px*var(--fs));color:var(--fg2);line-height:1.4}
/* 실패(S10) — 한 줄 높이 */
.wx--fail{display:flex;align-items:center;gap:8px;min-height:56px;padding:5px 5px 5px 14px}
.wx--fail .wx-tx{flex:1;min-width:0;font-size:calc(13px*var(--fs));color:var(--fg2);line-height:1.4;word-break:keep-all}
.wx-retry{flex:none;min-height:44px;min-width:68px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--blue);font-family:inherit;font-size:calc(13px*var(--fs));font-weight:700;cursor:pointer}
.wx-retry:active{background:var(--blue-bg)}
.wx-retry:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wx-retry[aria-busy="true"]{color:var(--fg2);cursor:default}
/* 로딩(S9) 뼈대 — 높이를 실제 카드와 같게 잡아 채워질 때 들썩이지 않는다 */
.wx-sk i{display:block;border-radius:4px;background:var(--line);animation:wxSkel 1.2s ease-in-out infinite}
.wx-sk .r1{width:38%;height:13px}
.wx-sk .r2{display:flex;align-items:center;gap:12px;margin-top:12px;background:none;animation:none}
.wx-sk .r2 i.ic{width:36px;height:36px;border-radius:50%}
.wx-sk .r2 i.t{width:34%;height:16px}
.wx-sk .r3{width:70%;height:13px;margin-top:10px}
.wx--now.wx-sk .r2 i.ic{width:40px;height:40px}
.wx--now.wx-sk .r2 i.n{width:56px;height:30px}
@keyframes wxSkel{0%,100%{opacity:1}50%{opacity:.45}}
/* 출처 줄 — 카드 밖, #sch-upd 바로 아래 */
.wx-credit{padding:0 0 4px;text-align:center;font-size:calc(11px*var(--fs));color:var(--fg2);letter-spacing:.2px}
.wx-credit:empty{display:none}
.wx-credit a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:2px} /* S3b: 출처 라이선스 링크(MET Norway) */
@media (prefers-reduced-motion:reduce){.wx-sk i{animation:none}}

/* ---- S3 최근 삭제한 일정 ---- */
.sch-trash{display:none;margin-top:28px;border-top:1px solid var(--line)}
.is-editing .sch-trash{display:block}
.sch-trash-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:48px;text-align:left;font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg)}
.sch-trash-toggle svg{width:16px;height:16px;flex:none;stroke:var(--fg2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.sch-trash-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.sch-trash-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.sch-trash-body{padding-bottom:4px}
.sch-trash-body[hidden]{display:none}
.sch-trash-msg{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:4px 0 10px;font-size:calc(13px*var(--fs));color:var(--fg2);line-height:1.5}
.sch-trash-msg button{min-height:44px;padding:0 12px;color:var(--blue);font-weight:700;font-size:calc(13px*var(--fs))}
.sch-trash-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.sch-trash-row:first-child{border-top:0}
.sch-trash-tx{flex:1;min-width:0}
.sch-trash-tx b{display:block;font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg);word-break:keep-all;overflow-wrap:anywhere}
.sch-trash-tx small{display:block;margin-top:2px;font-size:calc(11.5px*var(--fs));color:var(--fg2);line-height:1.45}
.sch-trash-row button{flex:none;min-height:44px;min-width:68px;padding:0 12px;border:1px solid var(--line2);border-radius:8px;background:var(--bg);color:var(--blue);font-size:calc(13px*var(--fs));font-weight:700}
.sch-trash-row button[aria-disabled="true"]{color:var(--fg3);background:var(--bg2)}
.sch-trash-row button:focus-visible,.sch-trash-msg button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---- S9 업로드 사진의 오프라인 자리 표시 (카드 72x54, 카드 사진 칸과 같은 크기) ---- */
.ev-ph{width:72px;height:54px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--line)}
.ev-ph svg{width:20px;height:20px;stroke:var(--fg3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   S4 편집 시트 — 기존 시트 그릇 규약(.aps-/.dps- 10001/10002 층 공유), 높이 고정 + 안쪽 스크롤 + 하단 고정 버튼
   ===================================================================== */
.se-overlay{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:none;opacity:0;transition:opacity .25s}
.se-overlay.on{display:block;opacity:1}
.se-sheet{
  position:fixed;left:0;right:0;bottom:var(--se-kb);z-index:10002;margin:0 auto;max-width:520px;
  height:calc(var(--se-vvh) - var(--safe-top) - 8px);
  display:flex;flex-direction:column;background:var(--bg);border-radius:16px 16px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.14);
  transform:translateY(100%);visibility:hidden;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s .35s;
}
.se-sheet.on{transform:translateY(0);visibility:visible;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s}
.se-hd{flex:none;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 20px;border-bottom:1px solid var(--line)}
.se-title{flex:1;min-width:0;font-size:calc(17px*var(--fs));font-weight:700;line-height:1.3}
.se-title:focus{outline:none}
.se-x{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;color:var(--fg2)}
.se-x svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.se-x:active{background:var(--bg2)}
.se-x:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.se-banner{flex:none;display:none;padding:9px 20px;background:var(--warn-bg);color:var(--warn-text);font-size:calc(12px*var(--fs));line-height:1.5;font-weight:600}
.se-sheet.off .se-banner{display:block}
.se-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:18px 20px 28px;scroll-padding-bottom:96px}
.se-foot{flex:none;padding:10px 20px calc(10px + var(--safe-bottom));border-top:1px solid var(--line);background:var(--bg)}
.se-sheet.kb .se-foot{padding-bottom:10px}                       /* 키보드가 올라오면 안전 영역은 키보드 밑이므로 뺀다 */
.se-foot-hint{font-size:calc(11.5px*var(--fs));color:var(--fg2);line-height:1.45;margin-bottom:8px;display:none}
.se-sheet.busy .se-foot-hint{display:block}
.se-foot-btns{display:flex;gap:8px}
.se-foot-btns button{min-height:48px;padding:0 14px;border-radius:10px;font-size:calc(14px*var(--fs));font-weight:700}
.se-cancel{flex:1 1 0;background:var(--bg2);color:var(--fg);border:1px solid var(--line)}
.se-save{flex:2 1 0;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.se-save:active{background:var(--blue-active)}
.se-save[aria-disabled="true"]{background:var(--line2);color:var(--fg2)}
.se-save .se-spin{display:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--blue);animation:dpsSpin .7s linear infinite}
.se-save[aria-busy="true"] .se-spin{display:inline-block}
.se-foot button:focus-visible,.se-body button:focus-visible,.se-body a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* 칸 공통 */
.se-f{margin-bottom:22px;min-width:0}
.se-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;font-size:calc(12px*var(--fs));font-weight:600;color:var(--fg2)}
.se-lbl em{font-style:normal;font-weight:400;color:var(--fg2);font-variant-numeric:tabular-nums}
.se-inp,.se-sel,.se-ta{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit;font-size:max(16px,calc(15px*var(--fs)));line-height:1.4} /* 16px 하한: iOS가 포커스 때 화면을 확대하지 않게 */
.se-ta{min-height:96px;resize:vertical;line-height:1.5}
.se-inp:focus,.se-sel:focus,.se-ta:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.se-inp[aria-invalid="true"],.se-ta[aria-invalid="true"]{border-color:var(--danger)}
.se-err{display:flex;gap:5px;align-items:flex-start;margin-top:6px;font-size:calc(12px*var(--fs));color:var(--danger);line-height:1.45;font-weight:600}
.se-err[hidden]{display:none}
.se-err svg{width:14px;height:14px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.se-note{margin-top:6px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5}
.se-note.warn{color:var(--warn-text);background:var(--warn-bg);padding:7px 10px;border-radius:8px}
.se-note[hidden]{display:none}

/* S5 날짜 칩 + 시각 */
.se-dates{display:flex;gap:6px}
.se-dates.long{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} /* S3: 5일 넘는 여행 — 일차 탭(.days.long)과 같은 가로 스크롤 */
.se-dates.long::-webkit-scrollbar{display:none}
.se-dates.long .se-date{flex:none;min-width:48px}
.se-date{flex:1 1 0;min-width:0;min-height:48px;padding:6px 2px;border:1px solid var(--line);border-radius:7px;text-align:center;font-size:calc(12px*var(--fs));font-weight:600;color:var(--fg2);line-height:1.3}
.se-date em{display:block;font-style:normal;font-weight:400;font-size:calc(11px*var(--fs))}
.se-date[aria-checked="true"]{background:var(--fg);border-color:var(--fg);color:#fff}
.se-time{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.se-time .se-sel{width:auto;min-width:80px;flex:none;appearance:none;-webkit-appearance:none;text-align:center;text-align-last:center;padding-right:12px}
.se-time-col{font-weight:700;color:var(--fg2)}
.se-tbd{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 8px;border:1px solid var(--line2);border-radius:8px;font-size:calc(14px*var(--fs));font-weight:600;color:var(--fg);cursor:pointer}
.se-tbd input{width:22px;height:22px;accent-color:var(--blue);margin:0}
.se-tbd:has(input:checked){background:var(--blue-bg);border-color:var(--blue);color:var(--blue)}
.se-tbd:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.se-sel:disabled{background:var(--bg2);color:var(--fg3)}

/* 강조 스위치 */
.se-switch-row{display:flex;align-items:center;gap:12px;min-height:52px}
.se-switch-tx{flex:1;min-width:0}
.se-switch-tx b{display:block;font-size:calc(14px*var(--fs));font-weight:600}
.se-switch-tx small{display:block;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.45;margin-top:1px}
.se-switch{flex:none;position:relative;width:52px;height:44px;border-radius:22px}
.se-switch::before{content:'';position:absolute;left:0;top:9px;width:52px;height:26px;border-radius:13px;background:var(--line2);transition:background .15s}
.se-switch::after{content:'';position:absolute;left:3px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s cubic-bezier(.4,0,.2,1)}
.se-switch[aria-checked="true"]::before{background:var(--blue)}
.se-switch[aria-checked="true"]::after{transform:translateX(26px)}

/* S6 사진과 동영상 */
.se-media{display:flex;gap:8px;overflow-x:auto;padding:3px 3px 8px;margin:0 -3px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.se-media::-webkit-scrollbar{display:none}
.se-media:empty{display:none}
.se-tile{position:relative;flex:none;width:96px;height:72px;padding:0;border-radius:8px;overflow:hidden;border:2px solid transparent;background:var(--bg2);scroll-snap-align:start;line-height:0}
.se-tile .th{position:absolute;inset:0;background:var(--bg2)}
.se-tile .th img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.se-tile[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.se-tile:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.se-tile .main{position:absolute;left:4px;top:4px;z-index:2;padding:2px 6px;border-radius:4px;background:var(--blue);color:#fff;font-size:calc(10px*var(--fs));font-weight:700;line-height:1.3}
.se-tile .state{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;text-align:center;font-size:calc(11px*var(--fs));font-weight:700;line-height:1.3;background:color-mix(in srgb,var(--bg) 86%,transparent);color:var(--fg)}
.se-tile.up .state,.se-tile.fail .state{display:flex}
.se-tile.fail{border-color:var(--danger)}
.se-tile.fail .state{color:var(--danger)}
.se-tile .state svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.se-tile .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--line2);z-index:4;display:none}
.se-tile.up .bar{display:block}
.se-tile .bar i{display:block;height:100%;width:0;background:var(--blue);transition:width .25s linear}
.se-tool{display:none;margin:2px 0 10px;padding:8px 8px 8px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.se-tool.on{display:block}
.se-tool-nm{font-size:calc(12px*var(--fs));font-weight:700;color:var(--fg);padding:0 4px 6px}
.se-tool-btns{display:flex;flex-wrap:wrap;gap:6px}
.se-tool-btns button{flex:1 1 0;min-width:84px;min-height:44px;padding:0 8px;border:1px solid var(--line2);border-radius:8px;background:var(--bg);font-size:calc(13px*var(--fs));font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.se-tool-btns button svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.se-tool-btns .rm{color:var(--danger)}
.se-tool-btns button[aria-disabled="true"]{color:var(--fg3);background:var(--bg2);border-color:var(--line)}
.se-addrow{display:flex;gap:8px;flex-wrap:wrap}
.se-addrow button,.se-btn2{flex:1 1 120px;min-height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:8px;background:var(--bg);font-size:calc(13px*var(--fs));font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--fg)}
.se-addrow button svg,.se-btn2 svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.se-addrow .primary{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.se-addrow button[aria-disabled="true"],.se-btn2[aria-disabled="true"]{color:var(--fg3);background:var(--bg2);border-color:var(--line);border-style:dashed}

/* S7 링크 */
.se-link{border:1px solid var(--line);border-radius:10px;padding:4px 6px 12px 12px;margin-bottom:8px;background:var(--bg)}
.se-link-hd{display:flex;align-items:center;gap:2px}
.se-link-kind{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:calc(12px*var(--fs));font-weight:700;color:var(--fg2)}
.se-link-kind svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.se-link-kind svg.fill{fill:currentColor;stroke:none}
.se-ib{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--fg2)}
.se-ib svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.se-ib:active{background:var(--bg2)}
.se-ib.danger{color:var(--danger)}
.se-ib[aria-disabled="true"]{color:var(--line2)}
.se-link-body{display:grid;gap:8px;padding-right:6px}
.se-link-tg{font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.45}
.se-link-tg b{color:var(--fg)}
.se-pick{margin-top:8px;border:1px solid var(--line2);border-radius:10px;background:var(--bg);overflow:hidden}
.se-pick[hidden]{display:none}
.se-pick-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 2px 12px;border-bottom:1px solid var(--line);font-size:calc(12px*var(--fs));font-weight:700;color:var(--fg2)}
.se-pick-hd button{min-height:44px;padding:0 10px;color:var(--fg2);font-weight:600;font-size:calc(12px*var(--fs))}
.se-pick-it{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 12px;border-top:1px solid var(--line);text-align:left;font-size:calc(14px*var(--fs));font-weight:600}
.se-pick-hd+.se-pick-it{border-top:0}
.se-pick-it:active{background:var(--bg2)}
.se-pick-ic{flex:none;width:30px;height:30px;border-radius:8px;background:var(--blue-bg);color:var(--blue);display:flex;align-items:center;justify-content:center}
.se-pick-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.se-pick-ic svg.fill{fill:currentColor;stroke:none;transform:rotate(45deg)}

.se-del-wrap{margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.se-del{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;border-radius:8px;color:var(--danger);font-size:calc(13px*var(--fs));font-weight:600}
.se-del svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.se-del:active{background:var(--danger-bg)}
.se-del[aria-disabled="true"]{color:var(--fg3)}

/* 오프라인 중 잠기는 컨트롤 — aria-disabled + 흐리게(눌러도 아무 일 없음) */
.se-sheet.off [data-net]{opacity:.5}

/* S8 확인창 확장 — 기존 .confirm-* 그릇 위에 세 가지만 더한다 */
.confirm-actions.stack{flex-direction:column}
.confirm-actions.stack button{flex:none;width:100%}
.confirm-sub{margin:-4px 0 12px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5}
.confirm-detail{margin:-14px 0 20px;font-size:calc(13px*var(--fs));color:var(--fg2);line-height:1.5}

/* 움직임 줄이기 */
@media (prefers-reduced-motion:reduce){
  .se-sheet,.se-sheet.on{transition:visibility 0s}
  .se-overlay{transition:none}
  .sch-edit-spin,.se-spin{animation:none}
  .ev.flash::after{animation:none;opacity:1}                 /* 깜빡임 없이 2.4초간 고정 표시 후 JS가 제거 */
  .sch-trash-toggle svg,.se-tile .bar i,.se-switch::after,.se-switch::before{transition:none}
}

/* #129 Q-D3 사진 끌어 놓기 — 길게 눌러(약 300ms) 시작, 끄는 동안 레이아웃은 그대로 두고 transform으로만 움직인다 */
.se-media{touch-action:pan-x}
.se-tile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.se-media.dragging{overflow-x:hidden;scroll-snap-type:none;touch-action:none}
.se-media.dragging .se-tile:not(.drag){transition:transform .15s cubic-bezier(.4,0,.2,1)}
.se-tile.drag{z-index:6;box-shadow:0 6px 16px rgba(0,0,0,.28);transform-origin:center;opacity:.95;cursor:grabbing}
.se-tile.drag::after{content:'';position:absolute;inset:0;border:2px solid var(--blue);border-radius:8px;pointer-events:none}
@media (prefers-reduced-motion:reduce){.se-media.dragging .se-tile:not(.drag){transition:none}}

/* ======================================================================
   #133 신규 — 일정 카드 (관리자만, 클래스 .ev--exp가 붙은 카드)
   ====================================================================== */
.ev--exp{padding-bottom:0;margin-bottom:22px;cursor:pointer;border-radius:4px;transition:background .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}
.ev--exp:last-child{margin-bottom:0}
.ev--exp .ev-h{padding-right:22px}
.ev-h-btn{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-touch-callout:none}
.ev-h-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
.ev-chev{position:absolute;top:1px;right:0;width:18px;height:18px;color:var(--fg3);pointer-events:none}
.ev-chev svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ev-spent{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin-top:8px;font-size:calc(12px*var(--fs));line-height:1.5}
.ev-spent-lbl{color:var(--fg2);font-weight:500}
.ev-spent-val{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.ev--exp:active:not(:has(a:active,.ev-img-btn:active,.ev-al:active,.pm-line:active,.pm-add:active)),
.ev--exp.pressing{background:var(--bg2);box-shadow:0 0 0 6px var(--bg2)}
@media (hover:hover){.ev--exp:hover{background:var(--bg2);box-shadow:0 0 0 6px var(--bg2)}}
/* #129×#133: 일정 편집 모드에서는 카드 지출 진입을 막는다 — 눌림 면·›·손가락 커서를 걷고 제목 버튼은 글자로만 둔다(JS도 openEventSpendSheet에서 막음) */
.is-editing .ev--exp,.is-editing .ev--exp:active:not(:has(a:active,.ev-img-btn:active,.ev-al:active,.pm-line:active,.pm-add:active)),.is-editing .ev--exp.pressing{cursor:default;background:none;box-shadow:none}
@media (hover:hover){.is-editing .ev--exp:hover{background:none;box-shadow:none}}
.is-editing .ev--exp .ev-h{padding-right:0}
.is-editing .ev--exp .ev-h-btn{pointer-events:none;cursor:default}
.is-editing .ev--exp .ev-chev{display:none}

/* ======================================================================
   #133 신규 — 문서 탭 「예산」 서브 탭 (bg-)
   ====================================================================== */
.bg-sum{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);margin-bottom:14px;font-variant-numeric:tabular-nums}
.bg-sum th,.bg-sum td{padding:9px 12px;text-align:right;font-size:calc(14px*var(--fs));font-weight:600;color:var(--fg);vertical-align:baseline}
.bg-sum thead th{padding:8px 12px 4px;font-size:calc(11px*var(--fs));font-weight:600;color:var(--fg3)}
.bg-sum tbody th{text-align:left;width:1%;white-space:nowrap;font-size:calc(12px*var(--fs));font-weight:600;color:var(--fg2)}
.bg-sum tbody tr+tr th,.bg-sum tbody tr+tr td{border-top:1px solid var(--line)}
.bg-sum tbody tr.bg-rem th,.bg-sum tbody tr.bg-rem td{background:var(--bg2);font-weight:700}
/* S3(multi-trip-spec 5.4-6): 여행 통화를 바꾸기 전의 항목 — 통화마다 한 줄, 왼쪽 정렬·작은 글자(디자인 프레임 없음, 기존 표에 줄만 더한다) */
.bg-sum tbody tr.bg-old td{text-align:left;font-size:calc(12px*var(--fs));font-weight:500;color:var(--fg2);line-height:1.5}
.bg-sum tbody tr.bg-old td b{font-weight:700;color:var(--fg)}
.bg-ro-note{margin:0 0 12px}
.bg-sum td.zero{color:var(--fg3);font-weight:500}
.bg-sum td.over{color:var(--danger)}
.bg-over-tag{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:4px;background:var(--danger-bg);color:var(--danger);font-size:calc(11px*var(--fs));font-weight:700;vertical-align:1px}
.bg-bar{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.bg-flt{flex:1;display:flex;background:var(--bg2);border-radius:8px}
.bg-flt-btn{position:relative;flex:1;min-height:44px;border:0;background:none;font-family:inherit;font-size:calc(12.5px*var(--fs));font-weight:600;color:var(--fg2);cursor:pointer}
.bg-flt-btn span{position:relative}
.bg-flt-btn[aria-pressed="true"]{color:var(--fg)}
.bg-flt-btn[aria-pressed="true"]::before{content:'';position:absolute;inset:3px;background:var(--bg);border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.bg-flt-btn:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:8px}
.bg-add{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 16px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-family:inherit;font-size:calc(13px*var(--fs));font-weight:600;cursor:pointer}
.bg-add:active{background:var(--blue-active)}
.bg-add:disabled{background:var(--line2);color:var(--fg3);cursor:default}
.bg-add:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bg-day{display:flex;align-items:center;gap:10px;margin:18px 0 2px;font-size:calc(11px*var(--fs));font-weight:600;color:var(--fg3);letter-spacing:.3px}
.bg-day::after{content:'';flex:1;height:1px;background:var(--line)}
.bg-list{list-style:none}
.bg-row{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font-family:inherit;color:var(--fg);cursor:pointer}
.bg-row:active{background:var(--bg2)}
.bg-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:6px}
.bg-kind{flex:none;min-width:36px;padding:3px 7px;border-radius:5px;text-align:center;font-size:calc(11px*var(--fs));font-weight:700;line-height:1.3}
.bg-kind--plan{background:var(--blue-bg);color:var(--blue)}
.bg-kind--actual{background:var(--bg2);color:var(--fg);border:1px solid var(--line2)}
.bg-main{flex:1;min-width:0}
.bg-ttl{font-size:calc(14px*var(--fs));font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bg-sub{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:calc(12px*var(--fs));color:var(--fg2);min-width:0}
.bg-sub>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bg-sub svg{flex:none;width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bg-amt{flex:none;font-size:calc(14px*var(--fs));font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.bg-chev{flex:none;width:14px;height:14px;color:var(--fg3)}
.bg-chev svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bg-skel{padding:4px 0}
.bg-skel i{display:block;background:var(--line);border-radius:4px;animation:bgSkel 1.2s ease-in-out infinite}
@keyframes bgSkel{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.bg-skel i{animation:none}}
/* ======================================================================
   #136 신규 — 예산 탭 날짜 필터 (bg-days / bg-day-chip / bg-day-sum)
   ====================================================================== */
.bg-days{display:flex;margin:0 -3px 2px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-inline:12px}
.bg-days::-webkit-scrollbar{display:none}
.bg-day-chip{flex:none;min-width:44px;min-height:44px;padding:0 3px;border:0;background:none;font-family:inherit;cursor:pointer}
.bg-day-chip>span{display:flex;align-items:center;justify-content:center;min-height:32px;padding:4px 12px;border:1px solid var(--line2);border-radius:999px;background:var(--bg);color:var(--fg2);font-size:calc(12.5px*var(--fs));font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;transition:transform .15s cubic-bezier(.4,0,.2,1)}
.bg-day-chip:active>span{transform:scale(.96)}
.bg-day-chip[aria-pressed="true"]>span{background:var(--blue-bg);border-color:var(--blue);color:var(--blue)}
.bg-day-chip:focus-visible{outline:none}
.bg-day-chip:focus-visible>span{outline:2px solid var(--blue);outline-offset:2px}
.bg-day-sum{margin:2px 0 0;padding:9px 12px;border-radius:8px;background:var(--bg2);font-size:calc(13px*var(--fs));line-height:1.5;color:var(--fg2);font-variant-numeric:tabular-nums}
.bg-day-sum-d{font-weight:600;color:var(--fg)}
.bg-day-sum-g{display:inline-block;margin-right:12px;white-space:nowrap}
.bg-day-sum-g:last-child{margin-right:0}
.bg-day-sum b{font-weight:700;color:var(--fg)}
@media (prefers-reduced-motion:reduce){.bg-day-chip>span{transition:none}}

/* ======================================================================
   #133 신규 — 입력 칸 공용 (bgf-): 항목 시트(bgs-)와 일정 지출 시트(ebs-)가 같이 쓴다
   ====================================================================== */
.bgf-amt{display:flex;gap:8px;align-items:stretch}
.bgf-amt-in{flex:1;min-width:0;min-height:44px;text-align:right;font-size:calc(16px*var(--fs));font-weight:700;font-variant-numeric:tabular-nums}
/* ======================================================================
   #142 신규 — 예산 항목 마이너스 금액 ([+/−] 부호 버튼, 도움말)
   ====================================================================== */
.bgf-sign{flex:none;width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg2);font-family:inherit;font-size:calc(20px*var(--fs));font-weight:700;line-height:1;cursor:pointer;transition:transform .15s cubic-bezier(.4,0,.2,1)}
.bgf-sign:active{transform:scale(.96)}
.bgf-sign[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:#fff}
.bgf-sign:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bgf-sign:disabled{opacity:.5;cursor:default}
.bgf-sign[hidden]{display:none}
.bgf-amt:has(>.bgf-sign){gap:6px}
.bgf-amt:has(>.bgf-sign) .bgf-amt-in{padding-left:8px;padding-right:8px}
.bgf-hint{min-height:calc(18px*var(--fs));margin-top:6px;font-size:calc(11.5px*var(--fs));line-height:1.5;color:var(--fg2)}
.bg-sum td{overflow-wrap:anywhere}
.bg-sum .bg-u{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.bgf-sign{transition:none}}
/* S3: 통화가 여행마다 다르다(「바트」·「싱가포르 달러」, 옛 통화 항목이면 버튼 3개) — 고정 폭 대신 글자만큼 넓히고 버튼은 44px 이상 */
.bgf-unit{flex:none;display:flex;min-width:104px;max-width:60%;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.bgf-unit button{flex:1 0 auto;min-width:44px;min-height:42px;padding:0 8px;white-space:nowrap;border:0;background:var(--bg);font-family:inherit;font-size:calc(14px*var(--fs));font-weight:700;color:var(--fg2);cursor:pointer}
.bgf-unit button[aria-pressed="true"]{background:var(--fg);color:#fff}
.bgf-unit button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.bgf-unit button:disabled{opacity:.5;cursor:default}
.bgf-date{min-height:44px}
.bgf-note{min-height:72px;resize:none;line-height:1.5}
.bgf-err{margin-top:6px;font-size:calc(11.5px*var(--fs));color:var(--danger);font-weight:600;line-height:1.4}
.dc-input.invalid{border-color:var(--danger)}
.dc-input:disabled{background:var(--bg2);color:var(--fg2)}
.bgf-title{min-height:44px}
.bgf-link{display:flex;align-items:center;gap:8px;background:var(--bg2);border-radius:8px;padding:4px 4px 4px 12px;min-height:48px}
.bgf-link svg{flex:none;width:14px;height:14px;stroke:var(--fg2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bgf-link-tx{flex:1;min-width:0;font-size:calc(12.5px*var(--fs));color:var(--fg);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgf-link button{flex:none;min-height:44px;padding:0 12px;border:0;background:none;font-family:inherit;font-size:calc(12.5px*var(--fs));font-weight:600;color:var(--blue);cursor:pointer}
.bgf-link.cut .bgf-link-tx{color:var(--fg2)}
.bgf-foot{display:flex;gap:8px}
.bgf-foot .dc-sheet-submit{flex:1}
.bgf-del{flex:none;min-height:44px;padding:0 18px;border:1px solid var(--danger);border-radius:8px;background:var(--bg);color:var(--danger);font-family:inherit;font-size:calc(14px*var(--fs));font-weight:600;cursor:pointer}
.bgf-del:active{background:var(--danger-bg-active)}
.bgf-del:disabled{border-color:var(--line2);color:var(--fg3);cursor:default}
.bgf-spin{display:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:bgSpin .7s linear infinite;margin-right:6px;vertical-align:-2px}
.pending .bgf-spin{display:inline-block}
@keyframes bgSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bgf-spin{animation:none}}

/* ======================================================================
   #133 신규 — 항목 시트 (bgs-) · 일정 지출 시트 (ebs-). 그릇은 .ckis-*와 같은 z-index 10001/10002
   ====================================================================== */
/* 시트 안 오프라인 띠(체크 항목·예산·메모 시트 공용). S1-1에서 관리자 패널(.aps-*)과 함께 규칙이 지워져 띠가 늘 보이던 것을 S3에서 되살렸다 */
.aps-offline-banner{margin-top:12px;background:var(--warn-bg);color:var(--warn-text);border-radius:8px;padding:9px 11px;font-size:calc(11.5px*var(--fs));line-height:1.5;display:none}
.aps-offline-banner.on{display:block}
.bgs-overlay,.ebs-overlay,.tns-overlay{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:none;opacity:0;transition:opacity .25s}
.bgs-overlay.on,.ebs-overlay.on,.tns-overlay.on{display:block;opacity:1}
.bgs-sheet,.ebs-sheet,.tns-sheet{position:fixed;left:0;right:0;bottom:0;z-index:10002;background:var(--bg);border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s .35s;box-shadow:0 -4px 24px rgba(0,0,0,.14);visibility:hidden}
.bgs-sheet.on,.ebs-sheet.on,.tns-sheet.on{transform:translateY(0);visibility:visible;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s}
.bgs-sheet,.tns-sheet{max-height:88vh;overflow-y:auto;padding:20px 20px calc(20px + var(--safe-bottom))}
.ebs-sheet{max-height:88vh;display:flex;flex-direction:column}
.ebs-views{display:grid;flex:1;min-height:0}
.ebs-view{grid-area:1/1;display:flex;flex-direction:column;min-height:0;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s cubic-bezier(.4,0,.2,1),visibility 0s}
.ebs-view[data-state="out-left"]{transform:translateX(-24px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s cubic-bezier(.4,0,.2,1),visibility 0s .28s}
.ebs-view[data-state="out-right"]{transform:translateX(24px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s cubic-bezier(.4,0,.2,1),visibility 0s .28s}
@media (prefers-reduced-motion:reduce){.ebs-view,.ebs-view[data-state]{transition:none}}
.ebs-hdr{display:flex;align-items:flex-start;gap:4px;padding:16px 8px 8px 20px}
.ebs-hdr-tx{flex:1;min-width:0;padding-top:2px}
.ebs-ttl{display:block;font-size:calc(16px*var(--fs));font-weight:700;line-height:1.35;outline:none;word-break:keep-all}
.ebs-sub{display:block;margin-top:2px;font-size:calc(12px*var(--fs));color:var(--fg2)}
.ebs-x,.ebs-back{flex:none;min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;gap:2px;border:0;background:none;border-radius:22px;color:var(--fg2);font-family:inherit;cursor:pointer}
.ebs-x{font-size:calc(18px*var(--fs));width:44px}
.ebs-back{padding:0 12px 0 6px;font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg)}
.ebs-back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ebs-x:hover,.ebs-back:hover{background:var(--bg2)}
.ebs-x:focus-visible,.ebs-back:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ebs-hdr--edit{align-items:center}
.ebs-hdr--edit .ebs-hdr-tx{text-align:center;padding-top:0}
.ebs-hdr--edit .ebs-x{visibility:visible}
.ebs-body{flex:1;min-height:0;overflow-y:auto;padding:0 20px 8px}
.ebs-foot{padding:12px 20px calc(12px + var(--safe-bottom));border-top:1px solid var(--line);background:var(--bg)}
.ebs-total{margin:0 0 6px;font-size:calc(13px*var(--fs));color:var(--fg2)}
.ebs-total b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.ebs-none{padding:14px 0;font-size:calc(13px*var(--fs));color:var(--fg3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ebs-items{list-style:none;border-top:1px solid var(--line)}
.ebs-newttl{margin:18px 0 10px;font-size:calc(13px*var(--fs));font-weight:700}
.ebs-offnote{margin-top:18px}
/* #133: 스켈레톤 크기(인라인 style은 CSP style-src가 막으므로 클래스로) */
.bg-skel .sk-sum{height:112px;border-radius:10px;margin-bottom:14px}
.bg-skel .sk-bar{height:44px;margin-bottom:18px}
.bg-skel .sk-row{height:48px;margin-bottom:10px}
.bg-notice-retry{margin:0 0 0 6px;padding:0 12px}

/* #144 D14: 문서 0건 빈 상태 장식 아이콘 — 누를 수 없다. em 단위라 글자 배율과 함께 커진다 */
.dc-empty small .fab-ic,.tn-empty small .fab-ic{display:inline-flex;align-items:center;justify-content:center;width:1.45em;height:1.45em;margin:0 .1em;border-radius:50%;background:var(--blue);color:#fff;vertical-align:-.35em}
.dc-empty small .fab-ic svg,.tn-empty small .fab-ic svg{width:.8em;height:.8em;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}

/* ======================================================================
   #145 링크·메모 — 문서 탭 「메모」 서브 탭(목록 tn-, 추가·수정 시트 tns-). 새 색·z-index 층·애니메이션 없음
   ====================================================================== */
/* 2) 목록 */
.tn-notice{margin:0 0 12px}
.tn-notice .tn-retry{margin:6px 0 -6px;min-height:44px}
.tn-list{list-style:none}
.tn-card{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:12px 14px;margin-bottom:8px}
.tn-head{display:flex;align-items:flex-start;gap:8px}
.tn-ttl{flex:1;min-width:0;margin:0;font-size:calc(14px*var(--fs));font-weight:600;line-height:1.35;color:var(--fg);max-height:calc(1.35em*2);overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
.tn-edit{flex:none;min-width:44px;height:44px;margin:-10px -8px 0 0;padding:0 8px;border:0;background:none;font-family:inherit;font-size:calc(12.5px*var(--fs));font-weight:600;color:var(--blue);cursor:pointer;border-radius:8px}
.tn-edit:active{background:var(--blue-bg)}
.tn-edit[aria-disabled="true"]{color:var(--fg3);cursor:default}
.tn-edit:focus-visible,.tn-more:focus-visible,.tn-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tn-memo{margin-top:2px;font-size:calc(13px*var(--fs));line-height:1.5;color:var(--fg2);white-space:pre-line;overflow-wrap:anywhere;max-height:calc(1.5em*3);overflow:hidden}
.tn-memo.open{max-height:none}
.tn-more{display:flex;align-items:center;min-height:44px;padding:0 2px;border:0;background:none;font-family:inherit;font-size:calc(12.5px*var(--fs));font-weight:600;color:var(--blue);cursor:pointer}
.tn-tags{display:flex;flex-wrap:wrap;gap:0 5px;list-style:none}
.tn-tag{flex:none;min-height:44px;padding:0 1px;border:0;background:none;font-family:inherit;cursor:pointer}
.tn-tag>span{display:inline-flex;align-items:center;font-size:calc(10.5px*var(--fs));font-weight:600;line-height:1.4;color:var(--blue);background:var(--blue-bg);padding:2px 7px;border-radius:6px}
.tn-tag[aria-pressed="true"]>span{box-shadow:inset 0 0 0 1px var(--blue)}
.tn-tag:focus-visible{outline:none}
.tn-tag:focus-visible>span{outline:2px solid var(--blue);outline-offset:2px}
.tn-link{position:relative;display:flex;align-items:center;gap:6px;min-height:32px;margin-top:6px;padding:0 10px;border-radius:6px;background:var(--bg2);color:var(--blue);text-decoration:none;font-size:calc(12px*var(--fs));font-weight:600}
.tn-link::after{content:'';position:absolute;left:0;right:0;top:-6px;bottom:-6px} /* 보이는 칩은 32px, 터치 영역은 44px */
.tn-link:active{background:var(--blue-bg)}
.tn-link svg{flex:none;width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tn-link-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-meta{margin-top:8px;font-size:calc(11px*var(--fs));line-height:1.4;color:var(--fg3);overflow-wrap:anywhere}
.tn-flt{margin-bottom:6px}
.tn-skel{padding:4px 0}
.tn-skel i{display:block;background:var(--line);border-radius:10px;height:92px;margin-bottom:8px;animation:bgSkel 1.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.tn-skel i,.bgf-spin{animation:none}}

.tns-in{min-height:44px}
.tns-ta{min-height:96px;resize:none;line-height:1.5;display:block}
.tns-cnt{margin-top:4px;text-align:right;font-size:calc(11px*var(--fs));color:var(--fg3)}
.tns-cnt.over{color:var(--danger);font-weight:600}
.tns-tagbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.tns-tagbox:focus-within{border-color:var(--blue)}
.tns-tagbox.invalid{border-color:var(--danger)}
.tns-chip{display:inline-flex;align-items:center;min-height:36px;padding-left:10px;border-radius:999px;background:var(--blue-bg);color:var(--blue);font-size:calc(12.5px*var(--fs));font-weight:600;max-width:100%}
.tns-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tns-chip button{position:relative;flex:none;width:36px;height:36px;border:0;background:none;color:var(--blue);font-family:inherit;font-size:calc(16px*var(--fs));line-height:1;cursor:pointer}
.tns-chip button::after{content:'';position:absolute;inset:-4px} /* 36px 버튼 + 4px = 44px 터치 */
.tns-chip button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:50%}
.tns-tagin{flex:1;min-width:96px;min-height:36px;border:0;outline:none;background:none;padding:0 6px;font-family:inherit;font-size:calc(13px*var(--fs));color:var(--fg)}
.tns-tagin[readonly]{color:var(--fg3)}
.tns-sug{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin-top:2px}
.tns-sug-lbl{font-size:calc(11px*var(--fs));color:var(--fg3);margin-right:4px}
.tns-sug button{min-height:44px;padding:0 2px;border:0;background:none;font-family:inherit;cursor:pointer}
.tns-sug button>span{display:flex;align-items:center;min-height:30px;padding:2px 11px;border:1px solid var(--line2);border-radius:999px;background:var(--bg);color:var(--fg2);font-size:calc(12px*var(--fs));font-weight:600}
.tns-sug button:active>span{transform:scale(.96)}
.tns-sug button:focus-visible{outline:none}
.tns-sug button:focus-visible>span{outline:2px solid var(--blue);outline-offset:2px}
.tns-safe{margin:-6px 0 16px;font-size:calc(11.5px*var(--fs));line-height:1.5;color:var(--fg2)}
.tns-conflict{margin:0 0 14px;padding:9px 11px;border-radius:8px;background:var(--warn-bg);color:var(--warn-text);font-size:calc(11.5px*var(--fs));line-height:1.5}
.tns-conflict[hidden],.tns-cnt[hidden],.bgf-del[hidden]{display:none}
.tns-foot{display:flex;flex-direction:column;gap:8px}
.tns-foot .bgf-del{width:100%}
.tns-sug[hidden]{display:none}
.bgf-err.tns-note{color:var(--fg2);font-weight:500}
.tn-edit[aria-disabled="true"]:active{background:none}
/* 사진(D33~D39): 카드 사진 띠 .tn-ph*, 시트 안내 */
.tn-ph{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.tn-ph-btn{position:relative;display:block;width:100%;height:56px;padding:0;border:0;border-radius:6px;overflow:hidden;background:var(--bg2);line-height:0;cursor:pointer}
.tn-ph-btn img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.tn-ph-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tn-ph-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--lbv-ctl-bg);color:var(--lbv-ctl-fg);font-size:calc(13px*var(--fs));font-weight:700;line-height:1}
.tn-ph-ph{height:56px;border-radius:6px;background:var(--bg2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.tn-ph-ph svg{width:20px;height:20px;stroke:var(--fg3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tn-ph-note{margin-top:4px;font-size:calc(11px*var(--fs));line-height:1.4;color:var(--fg3)}
.tn-ph+.tn-memo,.tn-ph-note+.tn-memo{margin-top:8px}
.tns-ph-hint{margin-top:6px;font-size:calc(11.5px*var(--fs));line-height:1.5;color:var(--fg2)}
.tns-upnote{margin:0 0 10px;font-size:calc(11.5px*var(--fs));line-height:1.5;color:var(--fg2);text-align:center}
.tns-upnote[hidden],.tns-ph-hint[hidden]{display:none}
.tn-ph[hidden]{display:none}

/* ===== 다중 여행 (mt-) — 3단계 S1-2b =====
   design/02-components/multi-trip/multi-trip.css에서 이번 화면(시작·약관·계정 정지·프로필·여행 없음·열 수 없는 여행·헤더·내 여행 시트)이
   쓰는 규칙만 옮겼다(handoff 0장). 신규 CSS 변수·@keyframes 없음. 나머지 화면(만들기·설정·초대·멤버·항공편·날씨 도시·운영자)의 규칙은
   그 화면을 만드는 묶음(S1-3·S2·S3b·S4)에서 옮긴다. 데모 틀(multi-trip-demo.css)은 옮기지 않는다 */

/* ---------- 풀 페이지 (약관) ---------- */
.mt-page{position:fixed;inset:0;z-index:9990;background:var(--bg);word-break:keep-all;display:flex;flex-direction:column;overflow:hidden}
.mt-top{flex:none;display:flex;align-items:center;gap:4px;min-height:56px;padding:calc(6px + var(--safe-top)) 8px 6px 8px;border-bottom:1px solid var(--line)}
.mt-top-t{flex:1;min-width:0;padding-left:8px;font-size:calc(16px*var(--fs));font-weight:700;line-height:1.3}
.mt-top-t:first-child{padding-left:12px}
.mt-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:22px 20px 28px}
.mt-h1{font-size:calc(22px*var(--fs));font-weight:800;letter-spacing:-.5px;line-height:1.3;word-break:keep-all}
.mt-h1:focus{outline:none}
.mt-p{margin-top:8px;font-size:calc(14px*var(--fs));color:var(--fg2);line-height:1.6;word-break:keep-all}
.mt-sm{font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5;word-break:keep-all}
.mt-gap{height:16px}.mt-gap-s{height:8px}

/* ---------- 버튼 ----------
   색 변형은 기존 부품을 쓴다: 주=.se-save, 보조=.se-cancel, 비활성=.se-save[aria-disabled].
   .mt-btn은 그 위에 「폭 가득·48px」 배치만 얹는다 */
.mt-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:6px 16px;border-radius:10px;font-size:calc(14px*var(--fs));font-weight:700;line-height:1.3;text-align:center;flex:none}
.mt-btn svg,.mt-link svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mt-btn.line{background:var(--bg);color:var(--blue);border:1px solid var(--blue)}
.mt-btn.line:active{background:var(--blue-bg)}
.mt-btn.dashed[aria-disabled="true"]{background:var(--bg2);color:var(--fg2);border:1.5px dashed var(--line2)}
.mt-btn.sm{width:auto;min-height:44px;padding:0 14px;font-size:calc(13px*var(--fs));white-space:nowrap}
.mt-btn .se-spin{border-color:rgba(255,255,255,.4);border-top-color:#fff}
.mt-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;color:var(--fg2);font-size:calc(13px*var(--fs));font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mt-link.mut{color:var(--fg2);font-size:calc(12px*var(--fs));min-height:44px}
.mt-center{display:flex;justify-content:center}
.mt-btn:focus-visible,.mt-link:focus-visible,.mt-chk:focus-visible,.mt-trip:focus-visible,.mt-fold:focus-visible,.mt-row:focus-visible,.mt-view:focus-visible,.mt-mail:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.se-foot>.mt-btn+.mt-btn{margin-top:8px}

/* ---------- 빈 상태·결과 (여행 없음·열 수 없는 여행) ---------- */
.mt-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 8px 16px}
.mt-empty-ic{width:72px;height:72px;border-radius:50%;margin-bottom:20px;display:flex;align-items:center;justify-content:center;background:var(--blue-bg);color:var(--blue)}
.mt-empty-ic svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mt-empty-ic.warn{background:var(--warn-bg);color:var(--warn-text)}
.mt-empty-ic.mute{background:var(--bg2);color:var(--fg2)}
.mt-empty .mt-p{max-width:300px;word-break:keep-all;overflow-wrap:break-word}
.mt-empty-acts{width:100%;max-width:320px;margin-top:28px}
.mt-empty.sm{padding:24px 8px 8px}
.mt-empty.sm .mt-empty-ic{width:48px;height:48px;margin-bottom:12px}
.mt-empty.sm .mt-empty-ic svg{width:24px;height:24px}
.mt-empty.sm .mt-h1{font-size:calc(17px*var(--fs));font-weight:700}
.mt-empty.sm .mt-empty-acts{margin-top:18px}
.mt-empty-btns{padding:0 4px}
/* 여행이 없거나 열 수 없는 여행 — 탭 바·환율 줄·플로팅 버튼을 숨기고 #p-trip만 보인다(handoff ③ 「탭 바 없음」) */
.app.mt-notrip .tabs,.app.mt-notrip .fx-line,.app.mt-notrip .sch-edit-row,.app.mt-notrip .dc-fab-row{display:none!important}
.mt-page.off .se-banner,.mt-off .se-banner{display:block}
.mt-off{margin:0 -20px}

/* ---------- 필드 보조 ---------- */
.mt-two{display:flex;gap:8px}.mt-two>*{flex:1 1 0;min-width:0}
.mt-two>.mt-fixed{flex:none}

/* ---------- 약관 체크 ---------- */
.mt-chk-row{display:flex;align-items:flex-start;gap:4px;border-bottom:1px solid var(--line)}
.mt-chk-row:last-child{border-bottom:0}
.mt-chk{flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;min-height:48px;padding:11px 0;text-align:left;width:100%}
.mt-chk-tx{flex:1;min-width:0;font-size:calc(14px*var(--fs));line-height:1.45;word-break:keep-all}
.mt-chk-tx small{display:block;margin-top:3px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5}
.mt-chk-all .mt-chk-tx{font-weight:700;font-size:calc(15px*var(--fs))}
.mt-tag{font-weight:700;color:var(--blue)}.mt-tag.opt{color:var(--fg2)}
.mt-chk .ckl-box{border-color:var(--fg3);margin-top:0;width:24px;height:24px}
.mt-chk[aria-checked="true"] .ckl-box{background:var(--fg);border-color:var(--fg)}
.mt-chk[aria-checked="true"] .ckl-box svg{opacity:1}
.mt-view{flex:none;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 6px;font-size:calc(12px*var(--fs));font-weight:600;color:var(--fg2);text-decoration:underline;text-underline-offset:3px}

/* ---------- 알약·D-day ---------- */
.dc-pill.own{background:var(--fg);color:#fff}
.dc-pill.edt{background:var(--blue-bg);color:var(--blue)}
.dc-pill.mem{background:var(--bg2);color:var(--fg2);border:1px solid var(--line)}
.dc-pill.err{background:var(--danger-bg);color:var(--danger-hover)}
.mt-dd{display:inline-flex;align-items:center;flex:none;padding:3px 8px;border-radius:4px;background:var(--blue-bg);color:var(--blue);font-size:calc(11px*var(--fs));font-weight:600;line-height:1.4;white-space:nowrap}
.mt-dd.now{background:var(--blue);color:#fff}
.mt-dd.end{background:var(--bg2);color:var(--fg2)}
.hdr-top .mt-dd.now{background:var(--blue);color:#fff}
.hdr-top .mt-dd.end{background:var(--bg2);color:var(--fg2)}

/* ---------- 헤더의 여행 제목 버튼 ---------- */
.hdr-top h1{min-width:0;flex:1 1 auto}
.hdr-r{flex:none}
/* 여행 제목 앞 국기(tpFlagAttr) — 글자가 아니라 장식이라 제목 문자열은 그대로다. 대체 글자 "" 문법을 모르는 브라우저는 첫 줄을 쓴다 */
[data-flag]::before{content:attr(data-flag);content:attr(data-flag) / "";margin-right:.3em;font-weight:400}
.mt-trip-btn{display:flex;align-items:center;gap:4px;min-width:0;min-height:44px;padding:0 4px 0 0;font-size:calc(15px*var(--fs));font-weight:700;letter-spacing:-.3px;text-align:left}
.mt-trip-btn b{min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-trip-btn svg{width:16px;height:16px;flex:none;stroke:var(--fg2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mt-trip-btn:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:6px}
.mt-trip-plain{font-size:calc(15px*var(--fs));font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.3px}

/* ---------- 내 여행 시트·여행 줄 ---------- */
.mt-day-lbl{font-size:calc(12px*var(--fs));color:var(--fg2);margin:0 0 8px}
.mt-quick{display:flex;gap:8px;margin-bottom:6px}
.mt-quick .mt-btn{flex:1 1 0;min-width:0}
.mt-sec-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;margin:14px 0 8px}
.mt-sec-hd .lbl{margin:0}
.mt-trip{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 14px;margin-bottom:8px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.mt-trip:active{background:var(--bg2)}
.mt-trip[aria-current="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.mt-trip[aria-disabled="true"]{border-style:dashed;cursor:default}                     /* 열 수 없는 여행(리뷰 S1 2번) — 누르면 이유 토스트만 */
.mt-trip[aria-disabled="true"]:active{background:var(--bg)}
.mt-trip[aria-disabled="true"] .mt-trip-name{color:var(--fg2)}
.mt-trip-main{flex:1;min-width:0}
.mt-trip-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:calc(15px*var(--fs));font-weight:700;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.mt-trip-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:5px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.4}
.mt-fold{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;font-size:calc(12px*var(--fs));font-weight:600;color:var(--fg2);text-align:left}
.mt-fold svg{width:16px;height:16px;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)}
.mt-fold[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.mt-fold svg{transition:none}}
.mt-nb{white-space:nowrap}

/* ---------- 프로필 패널 줄 ---------- */
.mt-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 0;border-bottom:1px solid var(--line);text-align:left;color:inherit;text-decoration:none}
.mt-row:last-child{border-bottom:0}
.mt-row-tx{flex:1;min-width:0}
.mt-row-tx b{display:block;font-size:calc(14px*var(--fs));font-weight:600;line-height:1.4}
.mt-row-tx small{display:block;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.45;margin-top:1px;overflow-wrap:anywhere}
.mt-row svg.ch{width:16px;height:16px;flex:none;stroke:var(--fg2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-name{margin-bottom:12px}
.pf-name .mt-two{gap:8px}

/* ---------- 안내 박스 변형 ---------- */
.se-note.ic{display:flex;gap:6px;align-items:flex-start}
.se-note.ic>svg{flex:none;margin-top:2px}
.se-note.ic>span{flex:1;min-width:0}
.se-note.info{background:var(--blue-bg);color:var(--blue-active);padding:7px 10px;border-radius:8px}
.se-note.err{background:var(--danger-bg);color:var(--danger-hover);padding:7px 10px;border-radius:8px}
.se-note.ok{background:var(--success-bg);color:var(--success-text);padding:7px 10px;border-radius:8px}
.se-note.info b{color:var(--blue-active)}.se-note.err b{color:var(--danger-hover)}
.se-note.warn b{color:var(--warn-text)}

/* ---------- 시작 화면·계정 정지 (.lock·.maintenance 재사용) 추가분 ---------- */
.lock-actions .lock-msg{max-width:280px;padding:0 4px;text-align:center;line-height:1.5}
.kakao-btn[aria-disabled="true"]{opacity:.45}
.mt-mail{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:underline;font-size:calc(14px*var(--fs))}

/* ---------- 아이콘 ---------- */
.mt-i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 긴 이름·제목, 줄바꿈(handoff 1장 끝) ---------- */
.mt-h1,.confirm-title{overflow-wrap:anywhere}
.se-err,.se-note{word-break:keep-all;overflow-wrap:break-word}
.se-err>span{min-width:0}
.se-sheet,.confirm-modal,.lock-actions,.mt-page,.dc-sheet,.prof-panel{word-break:keep-all;overflow-wrap:break-word}
.confirm-title{word-break:keep-all}
.confirm-body,.confirm-warn,.se-banner{word-break:keep-all}

/* ===== 다중 여행 (mt-) — 3단계 S1-3 추가분 =====
   design/02-components/multi-trip/multi-trip.css의 나머지 규칙을 같은 순서로 옮겼다(handoff 0장 1번 — 이로써 그 파일 전체가 앱에 있다).
   위 S1-2b 구역에 이미 같은 규칙(또는 S1-2b가 덧붙여 더 넓힌 규칙: .mt-btn.sm·.mt-empty .mt-p·.mt-trip-name·.mt-row·.mt-row-tx small)이 있는 것은 뺐다.
   만들기·설정·항공편·상한 안내 말고 초대·멤버·날씨 도시·운영자 화면 규칙도 함께 옮겼다(그 화면은 S2·S3b·S4가 만든다).
   기존 화면에도 닿는 규칙은 DESIGN.md 「다중 여행 화면」의 「기존 규칙에 덧붙이는 것」 표와 같다. 신규 CSS 변수·@keyframes 없음 */
/* ---------- 풀 페이지 (약관·합류·운영자) ---------- */
.mt-h2{font-size:calc(17px*var(--fs));font-weight:700;line-height:1.35;word-break:keep-all}
.mt-gap-l{height:28px}

/* ---------- 버튼 ----------
   색 변형은 기존 부품을 쓴다: 주=.se-save, 보조=.se-cancel, 위험=.confirm-danger, 비활성=.se-save[aria-disabled].
   .mt-btn은 그 위에 「폭 가득·48px」 배치만 얹는다. */
.mt-btn.danger-line{background:var(--bg);color:var(--danger);border:1px solid var(--line2)}
.mt-btn.danger-line:active{background:var(--danger-bg)}
.mt-link.blue{color:var(--blue);text-decoration:none}
.mt-link.red{color:var(--danger);text-decoration:none}
.mt-btn:focus-visible,.mt-link:focus-visible,.mt-opt:focus-visible,.mt-chk:focus-visible,.mt-pick:focus-visible,.mt-trip:focus-visible,.mt-ac-i:focus-visible,.mt-fold:focus-visible,.mt-row:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- 빈 상태·결과 ---------- */
.mt-empty-ic.err{background:var(--danger-bg);color:var(--danger-hover)}

/* ---------- 필드 보조 ---------- */
.mt-summary{margin-top:8px;font-size:calc(13px*var(--fs));font-weight:700;color:var(--blue)}
.mt-pick{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--bg);color:var(--fg);font-size:calc(15px*var(--fs));text-align:left;line-height:1.4}
.mt-pick>span{flex:1;min-width:0;word-break:keep-all}
.mt-pick svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--fg2)}
.mt-pick[aria-disabled="true"]{background:var(--bg2);color:var(--fg2)}
.mt-pick small{display:block;font-size:calc(12px*var(--fs));color:var(--fg2);margin-top:1px}
.mt-ro-note{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.45}
.mt-ro-note svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mt-steps{flex:none;padding:12px 20px 0}
.mt-steps-bar{display:flex;gap:6px}
.mt-steps-bar i{flex:1;height:4px;border-radius:2px;background:var(--line2)}
.mt-steps-bar i.on{background:var(--blue)}
.mt-steps-lbl{margin-top:8px;font-size:calc(12px*var(--fs));font-weight:600;color:var(--fg2)}
.mt-rules{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.mt-rules-i{display:flex;align-items:center;gap:8px;font-size:calc(13px*var(--fs));line-height:1.45}
.mt-rules-i svg{width:16px;height:16px;flex:none;stroke:var(--blue);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 체크·라디오 ---------- */
.mt-opts{display:flex;flex-direction:column;gap:8px}
.mt-opt{display:flex;gap:12px;align-items:flex-start;width:100%;min-height:56px;padding:12px 14px;text-align:left;border:1px solid var(--line2);border-radius:10px;background:var(--bg)}
.mt-opt .mt-radio{flex:none;width:20px;height:20px;margin-top:2px;border:2px solid var(--fg3);border-radius:50%;position:relative}
.mt-opt[aria-checked="true"]{border-color:var(--blue);background:var(--blue-bg);box-shadow:inset 0 0 0 1px var(--blue)}
.mt-opt[aria-checked="true"] .mt-radio{border-color:var(--blue)}
.mt-opt[aria-checked="true"] .mt-radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--blue)}
.mt-opt-tx{flex:1;min-width:0}
.mt-opt b{display:block;font-size:calc(14px*var(--fs));font-weight:700;line-height:1.4}
.mt-opt small{display:block;margin-top:2px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5;word-break:keep-all}
.mt-opt[aria-disabled="true"]{background:var(--bg2);border-style:dashed}
.mt-opt[aria-disabled="true"] b{color:var(--fg2)}

/* ---------- 내 여행 시트·여행 줄 ---------- */
.mt-trip.pending{border-style:dashed;background:var(--bg2);cursor:default}
.mt-trip-act{flex:none}

/* ---------- 초대 ---------- */
.mt-linkbox{display:flex;align-items:center;gap:6px;min-height:48px;padding:0 6px 0 12px;border:1px solid var(--line2);border-radius:8px;background:var(--bg2);font-size:calc(13px*var(--fs));color:var(--fg)}
.mt-linkbox-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-share{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.mt-share .kakao-btn{max-width:none;min-height:48px;border-radius:10px;font-weight:700}
.mt-inv{border:1px solid var(--line);border-radius:10px;padding:10px 6px 10px 14px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.mt-inv-main{flex:1;min-width:0}
.mt-inv-meta{margin-top:5px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5}
.mt-inv .mt-link{flex:none}
.mt-count{font-variant-numeric:tabular-nums}

/* ---------- 멤버 ---------- */
.mt-mem{display:flex;align-items:center;gap:12px;min-height:60px;padding:6px 0 6px;border-bottom:1px solid var(--line)}
.mt-mem:last-child{border-bottom:0}
.mt-av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:calc(14px*var(--fs));font-weight:700;color:var(--fg2)}
.mt-av.me{background:var(--blue-bg);border-color:var(--blue);color:var(--blue)}
.mt-mem-main{flex:1;min-width:0}
.mt-mem-nm{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:calc(14px*var(--fs));font-weight:600;line-height:1.4}
.mt-mem-nm i{font-style:normal;font-weight:400;color:var(--fg2)}
.mt-mem-sub{margin-top:1px;font-size:calc(12px*var(--fs));color:var(--fg2)}
.mt-mem.gone .mt-mem-nm{color:var(--fg2)}

/* ---------- 자동완성 (국가·공항·도시) ---------- */
.mt-ac{margin-top:6px;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--bg)}
.mt-ac-i{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 12px;text-align:left;border-bottom:1px solid var(--line)}
.mt-ac-i:last-child{border-bottom:0}
.mt-ac-i:active{background:var(--bg2)}
.mt-ac-code{flex:none;min-width:46px;text-align:center;padding:3px 6px;border-radius:5px;background:var(--blue-bg);color:var(--blue);font-size:calc(12px*var(--fs));font-weight:800;letter-spacing:.5px}
.mt-ac-tx{flex:1;min-width:0}
.mt-ac-tx b{display:block;font-size:calc(14px*var(--fs));font-weight:600;line-height:1.4}
.mt-ac-tx small{display:block;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.4}
.mt-ac-tx mark{background:none;color:var(--blue);font-weight:800}
.mt-ac-empty{padding:14px 12px;font-size:calc(13px*var(--fs));color:var(--fg2);line-height:1.5;word-break:keep-all}
.mt-sel{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 6px 6px 12px;border:1px solid var(--blue);border-radius:8px;background:var(--blue-bg)}
.mt-sel .mt-ac-tx{flex:1}

/* ---------- 항공편 ---------- */
.mt-fl .fc-header{background:var(--bg2);border-bottom:1px solid var(--line)}
.mt-fl .fc-flight-no{color:var(--fg)}
.mt-fl .fc-plane{color:var(--blue)}
.mt-fl .fc-flight-line::before,.mt-fl .fc-flight-line::after{background:var(--line2)}
.mt-fl .fc-city.--right .mt-fl-d{text-align:right}
.mt-fl-d{font-size:calc(11px*var(--fs));color:var(--fg2);line-height:1.4}
.mt-fl-d em{font-style:normal;font-weight:700;color:var(--blue)}
.mt-fl-note{padding:0 14px 10px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5}
.mt-fl-acts{display:flex;justify-content:flex-end;margin:-6px 0 8px}
.mt-fl-empty{border:1.5px dashed var(--line2);border-radius:10px;padding:16px 16px 14px;margin-bottom:12px}
.mt-fl-empty .mt-fl-empty-t{margin-top:2px;font-size:calc(13px*var(--fs));color:var(--fg2);line-height:1.55;word-break:keep-all}
.mt-fl-empty .mt-btn{margin-top:12px}
.mt-dur{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:var(--blue-bg);color:var(--blue-active)}
.mt-dur svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mt-dur b{display:block;font-size:calc(17px*var(--fs));font-weight:800;line-height:1.3}
.mt-dur small{display:block;font-size:calc(12px*var(--fs));line-height:1.45}
.mt-dur.err{background:var(--danger-bg);color:var(--danger-hover)}
.mt-dur.none{background:var(--bg2);color:var(--fg2)}

/* ---------- 날씨 도시 ---------- */
.mt-day{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:6px 6px 8px 14px}
.mt-day-hd{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:44px}
.mt-day-hd b{font-size:calc(14px*var(--fs));font-weight:700}
.mt-day-hd em{font-style:normal;font-weight:400;color:var(--fg2);margin-left:6px;font-size:calc(12px*var(--fs))}
.mt-city{display:flex;align-items:center;gap:6px;min-height:48px;padding:0 0 0 0}
.mt-city-tx{flex:1;min-width:0;font-size:calc(14px*var(--fs));font-weight:600;line-height:1.4}
.mt-city-tx small{display:block;font-weight:400;font-size:calc(12px*var(--fs));color:var(--fg2)}
.mt-add{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 8px);min-height:44px;margin-top:4px;border:1.5px dashed var(--line2);border-radius:8px;color:var(--blue);font-size:calc(13px*var(--fs));font-weight:600}
.mt-add svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.mt-add[aria-disabled="true"]{color:var(--fg2);background:var(--bg2)}
.mt-day-none{padding:2px 0 6px;font-size:calc(12.5px*var(--fs));color:var(--fg2)}
.mt-wxcard-empty{border:1.5px dashed var(--line2);border-radius:10px;padding:14px;margin-bottom:12px}
/* S3b 앱 적용(시안의 인라인 style을 클래스로): 점선 카드 머리·문단·단추 줄, 날씨 도시 시트 머리 문단·[첫날 도시를…] 줄, 되돌리기 토스트 */
.mt-wxcard-empty .wx-hd{display:flex;gap:6px;align-items:center}
.mt-wxcard-empty .wx-hd b{font-size:calc(14px*var(--fs))}
.wx-empty-ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mt-wxcard-empty .mt-sm{margin:6px 0 10px}
.mt-wxcard-empty .mt-two{align-items:center}
.wx-sp-intro{margin-bottom:8px}
.wx-sp-all{display:flex;justify-content:flex-start}
.wx-undo-btn{color:inherit;min-height:44px;margin:-10px -8px -10px 0;flex:none} /* 토스트 글자색(흰색)을 따른다 */
.wx-attr a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue)} /* 도시 검색 출처(GeoNames, CC BY 4.0) 링크 */

/* ---------- 저장 공간 ---------- */
.dc-prog-bar.warn i{background:var(--warn-text)}
.dc-prog-bar.full i{background:var(--danger)}
.mt-meter-wrap{position:relative}
.mt-meter-mark{position:absolute;left:80%;top:2px;bottom:-4px;width:2px;background:var(--fg)}
.mt-meter-tx{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:calc(12px*var(--fs));color:var(--fg2);font-variant-numeric:tabular-nums}
.mt-meter-tx b{color:var(--fg)}

/* ---------- 설정 목록 ---------- */
.mt-group{margin-bottom:26px}
.mt-group>.lbl{margin-bottom:6px}
.mt-row-v{flex:none;max-width:45%;font-size:calc(13px*var(--fs));color:var(--fg2);text-align:right;line-height:1.4}
.mt-danger-zone{border:1px solid var(--line2);border-radius:10px;padding:4px 14px}
.mt-danger-zone .mt-row:last-child b{color:var(--danger)}

/* ---------- 일정 탭 안내 카드·자리표시 ---------- */
.mt-guide{position:relative;border:1px solid var(--blue);background:var(--blue-bg);border-radius:10px;padding:14px 14px 14px;margin-bottom:12px}
.mt-guide b{display:block;font-size:calc(14px*var(--fs));font-weight:700;padding-right:36px}
.mt-guide p{margin:4px 0 12px;font-size:calc(12.5px*var(--fs));color:var(--fg2);line-height:1.55}
.mt-guide .se-x{position:absolute;right:2px;top:2px}
.mt-skel{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px}
.mt-skel i{display:block;height:10px;border-radius:5px;background:var(--line);margin-bottom:8px}
.mt-skel i:last-child{margin-bottom:0;width:60%}

/* ---------- 운영자 ---------- */
.mt-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mt-stat{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.mt-stat b{display:block;font-size:calc(24px*var(--fs));font-weight:800;letter-spacing:-.5px;line-height:1.2;font-variant-numeric:tabular-nums}
.mt-stat small{display:block;margin-top:2px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.4}
.mt-stat.wide{grid-column:1 / -1}
.mt-log{display:flex;flex-direction:column;gap:0}
.mt-log-i{padding:10px 0;border-bottom:1px solid var(--line);font-size:calc(12.5px*var(--fs));line-height:1.5;color:var(--fg2)}
.mt-log-i:last-child{border-bottom:0}
.mt-log-i b{color:var(--fg);font-weight:600}
.mt-opbar{flex:none;display:flex;align-items:center;gap:8px;min-height:48px;padding:calc(4px + var(--safe-top)) 6px 4px 14px;background:var(--lock-bg);color:#fff;font-size:calc(12px*var(--fs));line-height:1.45} /* .hdr 안 맨 위에 넣는다(sticky 아님) — 안전 영역 여백 포함 */
.mt-opbar>span{flex:1;min-width:0}
.mt-opbar svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mt-opbar button{flex:none;min-height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.45);border-radius:8px;color:#fff;font-size:calc(12px*var(--fs));font-weight:700}
.mt-op-item{display:flex;align-items:center;gap:10px;width:100%;min-height:64px;padding:10px 0;border-bottom:1px solid var(--line);text-align:left}
.mt-op-item:last-child{border-bottom:0}

/* ---------- 기타 ---------- */
.mt-cnt{margin-top:4px;text-align:right;font-size:calc(11px*var(--fs));color:var(--fg2);font-variant-numeric:tabular-nums}

/* ---------- 시작 화면 (.lock 재사용) 추가분 ---------- */
.lock-invite{font-size:calc(20px*var(--fs));font-weight:700;color:#fff;letter-spacing:-.4px;line-height:1.3;margin-top:14px}
.lock-invite-sub{margin-top:6px;font-size:calc(13px*var(--fs));color:rgba(255,255,255,.65);line-height:1.5;word-break:keep-all;max-width:260px;margin-left:auto;margin-right:auto}

/* ---------- 그릇 ----------
   시트 전용 클래스를 따로 만들지 않고 일정 편집 시트의 .se-overlay/.se-sheet를 그대로 쓴다(#129 키보드 대응 --se-kb·--se-vvh 포함).
   .se-sheet는 높이가 항상 꽉 차므로 내용 높이만큼만 여는 시트는 .mt-fit을 더한다. */
.se-sheet.mt-fit{height:auto;max-height:calc(var(--se-vvh) - var(--safe-top) - 8px)}
.se-foot>.mt-btn+.mt-btn,.mt-scroll+.se-foot>.mt-btn+.mt-btn{margin-top:8px}
/* 긴 이름·제목 */
.mt-mem-nm,.mt-trip-name,.mt-op-item,.confirm-title,.mt-h1,.mt-h2,.mt-city-tx{overflow-wrap:anywhere}
.mt-mem-nm>span:first-child{min-width:0;overflow-wrap:anywhere}
.se-err,.mt-empty .mt-p,.se-note{word-break:keep-all;overflow-wrap:break-word}
.mt-pill-chg{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--blue-bg);color:var(--blue);font-size:calc(11px*var(--fs));font-weight:700}
.dc-sheet .dc-select,.dc-sheet .dc-input{min-height:44px} /* 문서 등록 시트 칸 44px (기존 38/36px) */
.mt-city-btn{text-align:left;min-height:48px;display:block;padding:0}
.mt-city-btn span{display:block;font-size:calc(14px*var(--fs));font-weight:600;line-height:1.4}
.mt-city-btn small{display:block}
.mt-fl-wrap{margin-bottom:12px}
.mt-fl-wrap .mt-fl-empty{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-style:solid}
.mt-fl-strip{margin-bottom:0;border-top-left-radius:0;border-top-right-radius:0;border-top:0}
.mt-fl-vj{display:block;padding:12px 14px 0}
.mt-fl-vj b{display:block;font-size:calc(14px*var(--fs))}
.mt-fl-vj small{display:block;margin-top:2px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5}
.mt-wxcard{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px;font-size:calc(13px*var(--fs))}
.mt-ac-i{word-break:keep-all}
.mt-pick{overflow-wrap:anywhere}
.mt-fl-strip .fc-doc-strip{min-height:44px;display:flex;align-items:center}
.mt-fl-strip .fc-doc-strip-main{width:100%}

/* ---------- 아이콘 ---------- */
.mt-i.f{fill:currentColor;stroke:none}

/* ---------- 라운드 2 정리 ---------- */
.mt-chk-all .mt-chk-tx,.mt-chk.mt-chk-all .mt-chk-tx{font-weight:700;font-size:calc(15px*var(--fs))}
.confirm-danger[aria-disabled="true"]{background:var(--line2);color:var(--fg2)}
.mt-card{border:1px solid var(--line);border-radius:10px;padding:4px 14px}
.mt-mem-name{min-width:0;overflow-wrap:anywhere}
/* ---------- S2 초대·합류·멤버(tp-members.js)에서 덧붙인 것 — 시안의 인라인 style을 클래스로 ---------- */
.mt-mem-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}   /* 멤버 시트 머리 「멤버 n/20명」 + [초대] */
.mt-mem-top>.mt-sm{flex:1 1 auto;min-width:0}
.mt-mem .se-ib,.mt-mem .mt-link{flex:none}
.mt-leave-why{margin-top:6px}                                    /* 소유자 [나가기] 아래 이유 줄(mem-owner) */
.mt-ban-note{margin:4px 0 6px}                                   /* 내보낸 멤버 접이식 안 안내 */
.mt-row.danger b{color:var(--danger)}                            /* ⋯ 작업 시트 「여행에서 내보내기」 */
.se-body.mt-ma-body{padding-top:6px}
.confirm-warn.mt-after{margin-top:-8px;margin-bottom:16px}       /* 내보내기 확인 — 경고는 본문 뒤(mem-remove) */
.mt-sel.mt-sel-fixed{background:var(--bg2);border-color:var(--line2)}   /* 만든 뒤 고정된 역할 요약(inv-created) */
.mt-inv-hint{margin-bottom:8px}
.mt-btn.se-save[aria-busy="true"]>.mt-i{display:none}            /* 작업 중이면 아이콘 대신 스피너 */
.mt-jn{margin-top:24px}                                          /* 합류 입력(empty-join·my-join) */
.mt-jn-row{display:flex;gap:8px;align-items:flex-start}
.mt-jn-row>.se-inp{flex:1 1 auto;min-width:0}
.mt-jn-row>.mt-btn{flex:none}
.mt-jn-pill{margin-top:8px}                                      /* 합류 카드 머리 알약(join) */
.mt-card .mt-row-tx small.mt-jn-desc{margin-top:4px}
/* 시트 위에 또 시트(둘째 층) — 아래 시트는 오버레이가 어둡게 가린다. Esc·포커스·Tab 가둠·키보드 대응은 맨 위 층만 */
.se-overlay.l2{z-index:10003}
.se-sheet.l2{z-index:10004}
/* 여행이 길어 일차 탭이 가로로 스크롤될 때(#114 예외): 탭 최소 폭 44px */
.days.long .dy{flex:none;min-width:44px}
/* 항공 카드(중립) — 가운데 열은 줄바꿈 없이, 공항 이름은 2줄까지 */
.mt-fl .fc-flight-center{flex:none;white-space:nowrap}
.mt-fl .fc-city{min-width:0;flex:1 1 0}
.mt-fl .fc-city-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:keep-all}
.mt-sm a{color:var(--blue);text-decoration:underline}
/* 그릇 안 한글은 음절 사이에서 끊지 않는다(기존 시트·확인 모달·프로필 패널·시작 화면 글자에도 적용). 이름·제목 클래스만 anywhere로 긴 낱말을 끊는다 */
.se-sheet,.confirm-modal,.lock-actions,.mt-app,.mt-page,.dc-sheet,.prof-panel{word-break:keep-all;overflow-wrap:break-word}
.confirm-title{word-break:keep-all;overflow-wrap:anywhere}
.mt-btn.sm,.mt-add{white-space:nowrap}
.mt-view:focus-visible,.mt-op-item:focus-visible,.mt-mail:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mt-opbar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hdr.viewing{padding-top:0}
/* S4 ⑮ 운영자 열람 중(body.tp-viewing, tp-ops.js) — 멤버 전원에게 열린 쓰기 「+」(문서·메모)와 일정 편집 버튼을 숨긴다. 체크 토글·내 항공권 띠는 눌러도 아무 일이 없다 */
body.tp-viewing #dc-fab-row,body.tp-viewing #sch-edit-row{display:none!important}
body.tp-viewing .ckl-row,body.tp-viewing #fl-cards .fc-tway,body.tp-viewing #vj-card{cursor:default}
.mt-opbar.ended{background:var(--fg2)}
/* 운영자 화면 — 검색 줄(입력 + 돋보기)·목록 개수·현황 카드의 「/ 1GB」 */
.mt-op-search{display:flex;align-items:center;gap:8px}
.mt-op-search .se-inp{flex:1;min-width:0}
.mt-op-search .mt-btn.sm{flex:none;width:48px;padding:0}
.mt-op-count{margin:10px 0 2px}
.mt-stat b span{font-size:calc(13px*var(--fs));font-weight:600;color:var(--fg2);letter-spacing:0}
/* 탈퇴 시트 바닥 안내 한 줄 */
.mt-ad-foot{margin-top:6px;text-align:center}
.mt-group>.lbl{font-size:calc(13px*var(--fs));font-weight:700;color:var(--fg);letter-spacing:0;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.mt-group .se-switch-row{padding:8px 0;border-bottom:1px solid var(--line)}
.mt-fl-memo{padding:0 14px;margin-bottom:10px;max-height:calc(1.5em*2);text-align:left;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mt-bk{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:calc(13px*var(--fs))}
.mt-bk>span:first-child{flex:1;min-width:0}
.mt-bk b{font-variant-numeric:tabular-nums}
.mt-rocard{border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:calc(13px*var(--fs))}
.mt-rocard>span:first-child{flex:1}
.mt-tag-n{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--bg2);color:var(--fg2);font-size:calc(11px*var(--fs));font-weight:700}
.mt-row[aria-disabled="true"] b{color:var(--fg2)}
.mt-row[aria-disabled="true"]{cursor:default}
.mt-hatch{height:72px;border:1.5px dashed var(--line2);border-radius:10px;background:var(--bg2);margin-bottom:10px}

/* ---------- S1-3 화면에서 덧붙인 것(시안의 인라인 style을 클래스로) ---------- */
.mt-fld-l{display:block;margin-bottom:4px}                     /* 기간 칸 「출발일」「마지막 날」 라벨(시안 style="margin-bottom:4px") */
.mt-p0{margin-top:0}                                            /* 만들기 3/3 첫 문단 */
.mt-pick.mt-static{cursor:default}                              /* 고를 것이 하나뿐인 칸(시간대가 하나인 나라) — 모양만 */
.mt-rules-end{display:block;margin-top:8px}                     /* 나라별 기능 미리보기 끝 줄 */
.mt-attr{margin-top:14px;font-size:calc(11px*var(--fs));color:var(--fg2);line-height:1.5}  /* 나라·공항 데이터 출처(public/data/ATTRIBUTION.md) */
.mt-link.mt-link-in{min-height:44px;padding:0}                  /* 안내 상자 안 [일정 보러 가기](시안 style) */
.mt-full-note{margin-top:6px;text-align:center}                 /* my-full 「지금은 새 여행을 만들 수 없어요.」 */
.se-note.info .mt-rules,.se-note.info .mt-rules-i{color:var(--blue-active)}

/* ===== 일정 장소: 지도 카드·지도 화면 (tp-map.js) =====
   design/02-components/schedule-place-map/schedule-place-map.css(시안)의 지도 카드·지도 화면 부분을 옮겼다(handoff 0장 1~4항, ②⑥).
   신규 변수는 일차 색 --pm-d1~6뿐. 글자는 calc(Npx*var(--fs)), 핀·배지·버튼 상자는 px 고정.
   .pm-badge,.pm-pin / .pm-pin / .pm-pin::after / .pm-pin.sel 네 규칙과 :root 여섯 색은 public/map.html과 글자 그대로 같아야 한다(tests/unit/mapPage.test.js). */
:root{
  --pm-d1:#a16207;   /* 4.92:1 — 선택·강조색 --blue 와 겹치지 않게 파랑을 쓰지 않는다 */
  --pm-d2:#c2410c;   /* 5.18:1 */
  --pm-d3:#15803d;   /* 5.02:1 */
  --pm-d4:#7e22ce;   /* 6.98:1 */
  --pm-d5:#0e7490;   /* 5.36:1 */
  --pm-d6:#be123c;   /* 6.29:1 */
}
.pm-d1{--pm-c:var(--pm-d1)}.pm-d2{--pm-c:var(--pm-d2)}.pm-d3{--pm-c:var(--pm-d3)}
.pm-d4{--pm-c:var(--pm-d4)}.pm-d5{--pm-c:var(--pm-d5)}.pm-d6{--pm-c:var(--pm-d6)}
.pm-i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pm-spin{display:inline-block;width:14px;height:14px;flex:none;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--blue);animation:dpsSpin .7s linear infinite}

/* 지도 카드(일차 패널, 날씨 카드 아래·첫 일정 위) — 누르기 전에는 지도를 불러오지 않는다 */
.pm-mapcard{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin:0 0 18px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);text-align:left}
.pm-mapcard:active{background:var(--bg2)}
.pm-mapcard:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pm-mapcard-ic{flex:none;width:36px;height:36px;border-radius:8px;background:var(--blue-bg);color:var(--blue);display:flex;align-items:center;justify-content:center}
.pm-mapcard-ic .pm-i{width:20px;height:20px}
.pm-mapcard-tx{flex:1;min-width:0;font-size:calc(14px*var(--fs));font-weight:700;line-height:1.35;word-break:keep-all}
.pm-mapcard-go{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:calc(13px*var(--fs));font-weight:700;color:var(--blue);white-space:nowrap}
.pm-mapcard-go .pm-i{width:14px;height:14px;stroke-width:2.4}
.pm-mapcard[aria-disabled="true"]{border:1.5px dashed var(--line2);background:var(--bg2);cursor:default}
.pm-mapcard[aria-disabled="true"] .pm-mapcard-ic{background:var(--line);color:var(--fg2)}
.pm-mapcard[aria-disabled="true"] .pm-mapcard-tx{color:var(--fg2)}
.pm-mapcard-tx small{display:block;margin-top:1px;font-size:calc(12px*var(--fs));font-weight:500;color:var(--fg2);line-height:1.4}

/* 지도 화면(풀 페이지 .mt-page) — 머리 · (오프라인 띠) · 일차 칩 · 안내 띠 · 지도(iframe) · 정보 창 · 장소 목록 */
.pm-chips{flex:none;display:flex;align-items:center;padding:2px 0 2px max(14px,var(--safe-left));border-bottom:1px solid var(--line)}
.pm-chips-all{flex:none;padding-right:6px;margin-right:2px;border-right:1px solid var(--line)}   /* 「전체」는 스크롤 밖에 고정 */
.pm-chips-sc{--fl:0px;flex:1;min-width:0;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-right:14px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - 22px),transparent 100%)}   /* 스크롤 단서: 오른쪽은 늘 흐리고, 왼쪽은 스크롤된 뒤(.sl)에만 흐리다 */
.pm-chips-sc.sl{--fl:22px}
.pm-chips-sc::-webkit-scrollbar{display:none}
.pm-chips-x{display:none;flex:none}
.pm-chips .dc-flt-chip>span{gap:6px}
.pm-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--pm-c,var(--pm-d1))}
.pm-chips .dc-flt-chip[aria-disabled="true"]{cursor:default}
.pm-chips .dc-flt-chip[aria-disabled="true"]>span{background:var(--bg2);border-style:dashed;color:var(--fg3)}
.pm-chips .dc-flt-chip[aria-disabled="true"]:focus-visible>span{outline:2px solid var(--blue);outline-offset:2px}
.pm-note{flex:none;display:flex;align-items:flex-start;gap:6px;padding:6px max(20px,var(--safe-right)) 6px max(20px,var(--safe-left));background:var(--bg2);border-bottom:1px solid var(--line);font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5}
.pm-note .pm-i{width:13px;height:13px;margin-top:2px}
.pm-note-short{display:none}
.pm-map{position:relative;flex:1 1 0;min-height:140px;background:var(--bg2);overflow:hidden}
.pm-map .pm-map-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.pm-map-state{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;font-size:calc(14px*var(--fs));color:var(--fg2);line-height:1.5;background:var(--bg2)}
.pm-map-state .pm-spin{width:22px;height:22px}
.pm-map-state .mt-h1{margin:0;font-size:calc(17px*var(--fs));font-weight:700;color:var(--fg)}
.pm-map-state .pm-fail-ic{width:48px;height:48px;margin:0;background:var(--danger-bg);color:var(--danger-hover)}
.pm-map-state .pm-fail-ic .pm-i{width:24px;height:24px}
.pm-map.fail{flex:none;min-height:0}
.pm-map.fail .pm-map-state{position:static;padding:22px 20px 14px}
.pm-mp>.mt-opbar+.mt-top{padding-top:6px}   /* 운영자 열람 띠가 이미 안전 영역을 띄웠다 */

/* 정보 창: 지도 아래 흐름 안(지도가 줄어든다 — Google 로고를 가리지 않는다) */
.pm-info{flex:none;display:flex;gap:10px;align-items:flex-start;padding:10px max(4px,var(--safe-right)) 10px max(20px,var(--safe-left));border-top:1px solid var(--line);background:var(--bg)}
.pm-info-main{flex:1;min-width:0}
.pm-info .pm-info-name{margin:0;font-size:calc(15px*var(--fs));font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.pm-info-name:focus{outline:none}
.pm-info-s{margin-top:1px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.pm-info-ev{margin-top:1px;font-size:calc(12px*var(--fs));color:var(--fg);font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.pm-info-btns{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.pm-info-btns .mt-btn{width:auto;display:inline-flex;flex:1 1 150px}
.pm-info-nav{display:flex;flex:none;gap:6px}   /* 이전·다음은 줄바꿈 없이 한 묶음 — 좁으면 묶음이 통째로 다음 줄로 */
.pm-info-nav .se-ib{border:1px solid var(--line2);border-radius:8px;color:var(--fg)}
.pm-info-nav .se-ib[aria-disabled="true"]{color:var(--fg3);background:var(--bg2);border-style:dashed;cursor:default}
.pm-info-nav .se-ib:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pm-info .se-x{flex:none}
.pm-info>.pm-badge{margin-top:2px}

/* 번호 배지·핀: 같은 모양·같은 번호. 크기는 px 고정(글자만 --fs). 「2·3」은 폭이 늘어난 알약 */
.pm-badge,.pm-pin{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:28px;height:28px;padding:0 7px;border-radius:14px;background:var(--pm-c,var(--pm-d1));color:#fff;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);font-size:calc(12px*var(--fs));font-weight:800;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.pm-pin{position:relative;transform:translate(var(--pm-tx,0),var(--pm-ty,0)) scale(var(--pm-s,1))}
.pm-pin::after{content:'';position:absolute;inset:-8px}
.pm-pin.sel{--pm-s:1.25;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fg)}

/* 아래 장소 목록 — 접고 펴는 고정 높이 패널(펼침 최대 46%, 안에서 스크롤) */
.pm-list{flex:none;display:flex;flex-direction:column;border-top:1px solid var(--line);background:var(--bg);min-height:0}
.pm-list.open{flex:0 1 auto;max-height:46%}
.pm-list.fill{flex:1 1 0;max-height:none}   /* 지도 실패 중: 목록이 남은 높이를 채운다 */
.pm-list-hd{flex:none;display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:0 max(14px,var(--safe-right)) 0 max(20px,var(--safe-left));text-align:left;font-size:calc(14px*var(--fs));font-weight:700}
.pm-list-hd>span{flex:1;min-width:0}
.pm-list-hd em{font-style:normal;font-weight:400;color:var(--fg2);margin-left:6px}
.pm-list-hd .pm-i{width:16px;height:16px;stroke-width:2.2;color:var(--fg2);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.pm-list-hd[aria-expanded="true"] .pm-i{transform:rotate(180deg)}
.pm-list-hd[aria-disabled="true"] .pm-i{display:none}
.pm-list-hd[aria-disabled="true"]{cursor:default}
.pm-list-hd:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pm-list-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line);padding-bottom:var(--safe-bottom)}
.pm-list-body ul{list-style:none;margin:0;padding:0}
.pm-list .pm-grp-hd{margin:0;position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;min-height:36px;padding:0 max(20px,var(--safe-right)) 0 max(20px,var(--safe-left));background:var(--bg2);border-bottom:1px solid var(--line);font-size:calc(12px*var(--fs));font-weight:700;color:var(--fg)}
.pm-grp-hd em{font-style:normal;font-weight:400;color:var(--fg2)}
.pm-li{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line);padding:0 max(4px,var(--safe-right)) 0 max(20px,var(--safe-left))}
.pm-li[aria-current="true"]{background:var(--blue-bg);box-shadow:inset 4px 0 0 var(--blue)}   /* 바탕색 + 왼쪽 막대 */
.pm-li[aria-current="true"] .pm-li-tx b{font-weight:800}
.pm-li-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;text-align:left}
.pm-li-main:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pm-li-tx{flex:1;min-width:0}
.pm-li-tx b{display:block;font-size:calc(14px*var(--fs));font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-li-tx small{display:block;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-li .se-ib{color:var(--blue)}
.pm-li .se-ib:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* 가로 화면(높이 500px 미만): 머리 줄을 없애고 닫기를 칩 줄 끝으로, 선 안내는 한 줄, 정보 창 2단, 목록을 펼치면 지도를 가리고 남은 높이를 쓴다 */
@media (max-height:500px){
  .pm-mp>.mt-top{display:none}
  .pm-chips{padding-top:calc(2px + var(--safe-top))}
  .pm-mp>.mt-opbar~.pm-chips{padding-top:2px}
  .pm-chips-x{display:inline-flex;margin-right:max(0px,var(--safe-right))}
  .pm-mp .pm-note:not(.keep){padding-top:2px;padding-bottom:2px}   /* 선 안내(R7)는 한 줄로 줄여 남긴다. 핀 많음 안내(.keep)는 그대로 */
  .pm-note-full{display:none}.pm-note-short{display:inline}
  .pm-map.fail .pm-map-state{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 12px;padding:6px 12px}
  .pm-map.fail .pm-map-state .mt-sm,.pm-map.fail .pm-map-state .mt-empty-ic{display:none!important}
  .pm-map.fail .mt-h1{font-size:calc(14px*var(--fs))!important}
  .pm-mp>.se-banner{padding-top:4px;padding-bottom:4px}
  .pm-map{min-height:80px}
  .pm-mp:has(.pm-list.open) .pm-map:not(.fail){display:none}
  .pm-list.open{flex:1 1 0;max-height:none}
  .pm-info{padding-top:4px;padding-bottom:4px}
  .pm-info-main{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
  .pm-info-main>.pm-info-name,.pm-info-main>.pm-info-s,.pm-info-main>.pm-attr,.pm-info-main>.pm-info-ev{grid-column:1}
  .pm-info-main>.pm-info-btns{grid-column:2;grid-row:1/5;margin-top:0;flex-wrap:nowrap}
}
@media (prefers-reduced-motion:reduce){.pm-list-hd .pm-i{transition:none}.pm-spin{animation:none}}

/* ===== 일정 장소: 카드·장소 시트·검색·편집 시트 (tp-places.js) =====
   design/02-components/schedule-place-map/schedule-place-map.css 중 카드 장소 줄·장소 행·장소 시트·검색 시트 부분(handoff 0장 1항).
   지도 카드·지도 화면·핀·일차 색(--pm-d1~6)은 지도 묶음(tp-map.js)의 절에 있다. 카드 눌림 면의 :has() 제외 목록(.pm-line·.pm-add)은 #133 규칙에 더했다.
   글자는 calc(Npx*var(--fs)), 상자·터치 높이는 px. 색은 기존 토큰만 */

/* 일정 카드: 장소 줄(상자 자체가 44px — 이웃 링크 칩·쓴 돈 줄의 누름 영역을 가로채지 않는다) */
.pm-line{position:relative;display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:44px;margin:0;padding:0;text-align:left;font-size:calc(12.5px*var(--fs));font-weight:600;line-height:1.4;color:var(--fg2)}
.pm-line+.ev-spent{margin-top:0}
.pm-line:last-child,.pm-line:has(+ .ev-chev){margin-bottom:-11px}   /* 쓴 돈 줄이 없으면 장소 줄이 카드의 마지막 — 상자 아래 여백(11px)을 카드 간격으로 쓴다 */
button.pm-line:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:4px}
.pm-line .pm-i{width:15px;height:15px;color:var(--blue)}
.pm-nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
button.pm-line .pm-nm{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.pm-nm.b{min-width:3em}   /* 첫 이름이 길어도 둘째 이름과 「외 n곳」이 묻히지 않는다 */
.pm-sep,.pm-line-more{flex:none;white-space:nowrap}
.pm-line.ro .pm-i{color:var(--fg3)}
.pm-line.ro .pm-nm{color:var(--fg2)}
/* 장소 0곳 카드의 [장소 추가] — 점선 테두리 + 회색 글자, 누름 영역은 ::after로 44px */
.pm-add{position:relative;display:inline-flex;align-items:center;gap:4px;min-height:28px;margin-top:12px;padding:4px 9px;border:1px dashed var(--line2);border-radius:5px;background:none;color:var(--fg2);font-size:calc(12px*var(--fs));font-weight:600;line-height:1.3}
.pm-add::after{content:'';position:absolute;inset:-8px -4px}
.pm-add+.ev-spent{margin-top:12px}
.pm-add[aria-disabled="true"]{color:var(--fg3);background:var(--bg2);cursor:default}
.pm-add:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pm-add .pm-i{width:12px;height:12px;stroke-width:2.4}

/* 장소 행(장소 시트·편집 시트 「장소」 칸 공용) — 번호는 두지 않는다 */
.pm-rows{list-style:none}
.pm-row{position:relative;padding:8px 0;border-bottom:1px solid var(--line)}
.pm-row:last-child{border-bottom:0}
.pm-row-top{display:flex;align-items:center;gap:4px}
.pm-row-main{flex:1;min-width:0}
.pm-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(15px*var(--fs));font-weight:700;line-height:1.35}
.pm-addr{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5}
.pm-by{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:calc(11.5px*var(--fs));color:var(--fg2);line-height:1.5}
.pm-acts{flex:none;display:flex}
.pm-acts .se-ib.pm-open{color:var(--blue)}
.pm-acts .se-ib.danger{color:var(--danger-hover)}
.pm-acts .se-ib[aria-disabled="true"]{color:var(--fg3);background:var(--bg2);border:1.5px dashed var(--line2)}
.pm-acts .se-ib:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pm-row.saving .pm-row-top{opacity:.5}
.pm-row.saving .pm-name::after{content:'';display:inline-block;width:12px;height:12px;margin-left:8px;vertical-align:-1px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--blue);animation:dpsSpin .7s linear infinite}
.pm-rename{margin:6px 0 0}
.pm-rename-hint{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5}
.pm-rename-hint em{font-style:normal;font-variant-numeric:tabular-nums}
.pm-rename-btns{display:flex;gap:8px;margin-top:6px}
.pm-rename-btns .mt-btn{flex:1 1 0}
.pm-rename-btns .mt-btn[aria-disabled="true"]{background:var(--line2);color:var(--fg2)}
.pm-row.drag{z-index:2;background:var(--bg);border-radius:10px;border-bottom-color:transparent;box-shadow:0 6px 16px rgba(0,0,0,.28);opacity:.95;padding-left:6px;padding-right:6px;margin:0 -6px}
.pm-row.drag::after{content:'';position:absolute;inset:0;border:2px solid var(--blue);border-radius:10px;pointer-events:none}
.pm-drop{height:3px;margin:-1px 0;border-radius:2px;background:var(--blue)}
.pm-rows[data-pm-order]{user-select:none}
.pm-undo .ev-undo{margin:6px 0}
.pm-lblrow{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-bottom:2px}
.pm-lblrow .se-lbl{margin:0}
.pm-text-btn{min-height:44px;min-width:44px;padding:0 4px 0 12px;font-size:calc(13px*var(--fs));font-weight:700;color:var(--blue);white-space:nowrap}
.pm-text-btn:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:6px}
.pm-text-btn[aria-disabled="true"]{color:var(--fg3);border:1.5px dashed var(--line2);border-radius:8px;background:var(--bg2)}
@media (hover:hover){.pm-acts .se-ib:hover{background:var(--bg2)}}
.pm-ro{margin:0 0 6px}
.pm-order-hint{margin:0 0 4px}
.pm-over{color:var(--danger-hover)}
.pm-es-rej{margin:0 0 8px}
.pm-es-empty{margin:0 0 10px}

/* 장소 시트 머리(일정 제목 + 「n일차 · 시각」) */
.pm-ttl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.pm-sub{display:block;margin-top:1px;font-size:calc(12px*var(--fs));font-weight:400;color:var(--fg2)}
.se-foot-hint.on{display:block}
.pm-dashed[aria-disabled="true"]{background:var(--bg2);color:var(--fg2);border:1.5px dashed var(--line2)}
.se-foot-btns .pm-solo{flex:1 1 100%}

/* 장소 검색 시트(둘째 층) — 결과 목록은 자동완성 부품 .mt-ac 그대로 */
.pm-sr-box{position:relative}
.pm-sr-box .se-inp{padding-left:38px;padding-right:44px}
.pm-sr-box .se-inp[readonly]{background:var(--bg2);color:var(--fg2)}
.pm-sr-box>.pm-i{position:absolute;left:12px;top:15px;width:16px;height:16px;color:var(--fg2);pointer-events:none}
.pm-sr-clear{position:absolute;right:0;top:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--fg2);border-radius:8px}
.pm-sr-clear .pm-i{width:16px;height:16px}
.pm-sr-clear:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pm-sr-busy{position:absolute;right:15px;top:15px}
.pm-sr-bias{display:flex;gap:6px;align-items:flex-start;margin-top:8px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.5}
.pm-sr-bias .pm-i{width:13px;height:13px;margin-top:2px}
.pm-sr-empty{text-align:center;margin-top:18px}
.pm-sr-skel{margin-top:10px}
.pm-sr-alert{margin-top:12px}
.pm-sr-retry{margin-top:10px}
.mt-ac-code .pm-i{width:15px;height:15px}
.mt-ac-i[aria-selected="true"]{background:var(--blue-bg);box-shadow:inset 0 0 0 2px var(--blue)}   /* 바탕색만으로 알리지 않는다 */
.mt-ac.picking .mt-ac-i:not([aria-selected="true"]){opacity:.5}
.mt-ac-i .dc-pill{margin-left:auto;flex:none}
.pm-attr{display:flex;justify-content:flex-end;padding:8px 12px;font-size:calc(12px*var(--fs));color:var(--fg2);line-height:1.4;background:var(--bg2);border-top:1px solid var(--line)}
.se-body>.pm-attr{margin-top:12px;border:1px solid var(--line);border-radius:8px}   /* 장소 시트 본문 끝(C2) */
.pm-info .pm-info-attr{justify-content:flex-start;padding:0;margin-top:1px;background:none;border:0}   /* 정보 창 주소 아래(C2) — 띠 없이 한 줄 */
.pm-added{margin-top:14px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--bg2)}
.pm-added-hd{font-size:calc(12px*var(--fs));font-weight:700;color:var(--fg2);margin-bottom:4px}
.pm-added ul{list-style:none}
.pm-added li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;font-size:calc(14px*var(--fs));font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.pm-added li>span{display:flex;align-items:center;gap:8px;min-width:0}
.pm-added li .pm-i{color:var(--success);width:15px;height:15px}
.pm-added .se-ib.danger{color:var(--danger-hover)}
.pm-added .se-ib[aria-disabled="true"]{color:var(--fg3);background:var(--bg2);border:1.5px dashed var(--line2)}
.pm-added-sum{margin-top:8px;font-size:calc(12px*var(--fs));font-weight:600;color:var(--fg2);line-height:1.5}   /* 입력 중에는 「방금 2곳 추가」 한 줄로 접는다 */
.pm-srsheet .pm-added-sum{display:none}
.pm-srsheet.pm-typing .pm-added-sum,.pm-srsheet.kb .pm-added-sum{display:block}
.pm-srsheet.kb .pm-added-wrap{display:none}
.pm-hd-done{display:none;flex:none;min-height:44px;min-width:44px;padding:0 12px;font-size:calc(14px*var(--fs));font-weight:700;color:var(--blue)}
.pm-hd-done:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:8px}
.se-sheet.kb .pm-hd-done,.pm-srsheet.pm-preview .pm-hd-done{display:inline-flex;align-items:center;justify-content:center}
/* 검색 시트 지도(D31~D35): 평소 작게, 키보드가 올라오면 접고(iframe은 남긴다), 확인 화면에서 크게 */
.pm-sr-map{flex:none;height:clamp(140px,26vh,220px);min-height:0;margin:0 0 12px;border:1px solid var(--line);border-radius:12px}
.pm-srsheet.kb:not(.pm-preview) .pm-sr-map{height:0;margin:0;border:0;visibility:hidden}
.pm-srsheet.pm-preview .pm-sr-map{height:clamp(220px,48vh,440px)}
.pm-srsheet.pm-preview .se-f,.pm-srsheet.pm-preview #pm-sr-dyn,.pm-srsheet.pm-preview #pm-sr-done{display:none}
.pm-srsheet:not(.pm-preview) .pm-sr-pv,.pm-srsheet:not(.pm-preview) #pm-sr-pvbtns{display:none}
#pm-sr-pvbtns{width:100%}
#pm-sr-pvbtns .mt-btn{width:auto;min-width:0}
#pm-sr-pvbtns .se-cancel{flex:1 1 0}
#pm-sr-pvbtns .se-save{flex:2 1 0}
.pm-sr-pv .pm-sr-alert{margin:0 0 10px}
.pm-sr-pv-name{font-size:calc(17px*var(--fs));font-weight:700;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.pm-sr-pv-addr{margin-top:3px;font-size:calc(13px*var(--fs));line-height:1.45;color:var(--fg2);overflow-wrap:anywhere}
.pm-sr-pv-link{display:inline-flex;align-items:center;min-height:44px;font-size:calc(13px*var(--fs));font-weight:700;color:var(--blue)}
.pm-sr-pv .pm-attr{margin-top:2px;padding:0;background:none;border:0}
.pm-srsheet.kb .se-foot{display:none}
.pm-srsheet.kb .pm-sr-bias{display:none}
.pm-srsheet.kb .se-body{padding-top:10px}
.pm-srsheet.kb .se-f{margin-bottom:6px}
@media (prefers-reduced-motion:reduce){.pm-spin,.pm-row.saving .pm-name::after{animation:none}}