/* 양미관 실험계(lab) — 셸 레이아웃 · 내비 · 손잡이
   정본: design_gate/canvas (store-canvas-01 · 03). 새로 상상하지 않는다.

   중단점
     ~599    모바일 · 커버   — 한 열 + 떠 있는 가로 알약. (~359 는 커버 밀도)
     600~839 넓은 한 열       — 같은 문법, 여백만 넓다
     840~1199 폴드 펼침        — 세로 알약 레일(88) + 목록 + 접히는 선 + 상세
     1200~   PC               — 붙어 있는 레일(240) + 상단 바(72) + 목록 + 상세

   규칙
     · 카드 상자를 쓰지 않는다. 구역은 아래쪽 1px hair 선으로만.
     · 떠 있는 동작은 한 열에 하나 — + 는 목록, 확정 동작은 상세.
     · 폴드에서 떠 있는 동작은 기기 바깥 아래 모서리. 접히는 선 쪽에 두지 않는다.
     · PC 는 엄지 규칙을 적용하지 않는다 — + 가 상단 바, 확정 동작은 상세 열 아래.
     · 잠김은 회색으로 죽이지 않는다 — 실제 화면을 흐리게 깔고 안내 카드 한 장.
     · 그라디언트 · 이모지 · 좌측 강조 바 금지. 액센트는 하나. */

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
/* 앱 화면은 **딱 한 장**이다 — 문서가 스크롤되면 바닥에 떠 있는 내비가 화면 밖으로
   밀려 사라진다. 계 표식 띠가 위에 붙어도 띠와 앱이 한 화면을 나눠 쓴다.
   로그인 화면(.app 이 없다)은 평소대로 길어질 수 있으므로 건드리지 않는다.
   (2026-09-18 대표 지적: 「검증계 줄 때문에 스크롤이 생기고 내비가 숨는다」) */
body:has(> .app){ height:100dvh; min-height:0; overflow:hidden; }

button{ font-family:inherit; color:inherit; }
a{ color:var(--accent); }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ══ 뼈대 ═════════════════════════════════════════════════════ */
/* 높이를 뷰포트에 못 박지 않는다 — 계 표식 띠가 위에 붙으면 그만큼 넘쳐서
   떠 있는 내비와 확정 버튼이 화면 밖으로 밀린다. body 가 높이를 쥐고 앱은 남은 것을 쓴다. */
.app{
  flex:1;
  min-height:0;
  display:flex;
  overflow:hidden;
  position:relative;
  background:var(--bg);
}
.stackc{ flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.cols{ flex:1; display:flex; min-height:0; min-width:0; position:relative; }

/* 스크롤하지 않는 층 — 떠 있는 것(+ · 확정)은 열 안이 아니라 여기에 앉는다.
   열 안에 두면 본문과 함께 스크롤되어 화면 밖으로 밀려난다. */
.ovl{ position:absolute; top:0; bottom:0; z-index:30; pointer-events:none; }
.ovl > *{ pointer-events:auto; }
#ovlMain{ left:0; width:var(--list-w); }
#ovlDet{ left:calc(var(--list-w) + var(--crease)); right:0; }
@media (max-width:839.98px){
  #ovlMain,#ovlDet{ left:0; right:0; width:auto; }
  html[data-pane="main"] #ovlDet{ display:none; }
  html[data-pane="detail"] #ovlMain{ display:none; }
}

.pn{
  min-width:0;
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  /* 세로는 브라우저가, 가로는 우리가 받는다 — 이게 없으면 안드로이드·아이폰 모두
     가로 손짓을 브라우저가 먼저 먹어 탭 넘기기가 안 된다. (2026-09-18 대표 지적) */
  touch-action:pan-y;
  /* 바닥 여백 = 안전영역 + 내비 알약 + 그 위에 뜨는 버튼 한 줄까지.
     이게 모자라면 마지막 줄이 내비 밑으로 들어가 읽히지 않는다. (2026-09-18 확인) */
  padding:var(--pad-top) var(--pad-x)
          calc(var(--safe-b) + var(--nav-h) + var(--dockh) + 26px + var(--vvb, 0px));
}
/* View Transition 이름은 한 번에 하나만 살아 있어야 한다.
   좁은 기기는 둘 중 하나가 display:none 이라 둘 다 이름을 줘도 안전하고,
   두 열이 함께 보이는 기기에서는 바뀌는 쪽(상세)에만 준다. */
/* 홈처럼 한 열을 다 쓰는 화면 — 상세 열과 접히는 선을 접는다 */
html[data-full] .pn.det, html[data-full] .rz.crease{ display:none; }
html[data-full] .pn.list{ width:auto; flex:1; }
html[data-full] #ovlMain{ left:0; right:0; width:auto; }
html[data-full] #ovlDet{ display:none; }

/* 영상 머리가 떠 있는 동안에는 위쪽 로고를 감춘다 — 영상 안에 이미 로고가 있다.
   (2026-09-19 대표 지적: 「로고가 두 번 뜬다」) */
html[data-hero] .topmark{ display:none; }
/* 영상 머리가 있는 화면은 제목 줄도 비운다 — 영상 안에 인사와 이름이 이미 있다.
   확정 줄이 올라와 있을 때는 남긴다(누를 것이 사라지면 안 된다). */
html[data-hero] .tbar:not(:has(.abar)){ display:none; }

.pn.det{ view-transition-name:pane; }
@media (max-width:839.98px){ .pn.list,.pn.det{ view-transition-name:pane; } }
.pn.list{ flex:none; width:var(--list-w); }
.pn.det{ flex:1; }

/* 한 열짜리 기기 — 목록과 상세 중 하나만 보인다 */
@media (max-width:839.98px){
  .pn.list{ width:100%; flex:1; }
  html[data-pane="main"] .pn.det{ display:none; }
  html[data-pane="detail"] .pn.list{ display:none; }
  .rz{ display:none; }
}

/* ══ 확정 줄이 떠 있는 동안의 본문 ════════════════════════════════
   세로 기기에서 확정 줄은 본문 위에 **떠** 있다. 바닥 여백만 키우면 끝까지
   스크롤했을 때만 비켜날 뿐, 화면을 연 첫 모습에서는 카드 안 버튼이 확정 줄
   뒤로 비친다. (2026-09-20 대표 지적)
   그래서 여백이 아니라 **보이는 영역 자체**를 확정 줄 위에서 끝낸다 —
   열(.cols)을 그만큼 줄이고, 본문 여백은 보통 여백으로 되돌린다.
   예약 높이(--action-reserve)는 shell.js 가 잰다. 재기 전에도 겹치지 않도록
   기본값은 원래 바닥 여백과 같게 둔다. 폭이 840px 이상이거나 확정 줄이
   사라지면 shell.js 가 속성과 변수를 지워 원래대로 돌아간다. */
@media (max-width:839.98px){
  /* 재기 전 기본값 = 확정줄이 앉는 자리를 식으로 그대로 쓴 것.
     안전영역 + dock 띄움 10 + 내비 알약 + 사이 12 + 버튼 지름 + 본문과의 사이 12.
     버튼이 커지면(큰 글자 72px) 이 값도 같이 커져야 첫 화면에서 겹치지 않는다. */
  html[data-bottom-actions]{
    --action-reserve:calc(var(--safe-b) + 10px + var(--nav-h) + 12px + var(--abb) + 12px + var(--vvb, 0px));
  }
  html[data-bottom-actions] .cols{ margin-bottom:var(--action-reserve); }
  html[data-bottom-actions] .pn{ padding-bottom:16px; scroll-padding-bottom:16px; }
}

/* ══ 바닥 한 줄(dock) — 내비 알약 + 큰 버튼 ══════════════════════
   큰 버튼(+ · 저장 · 만들기)은 본문 위에 따로 떠 있지 않는다. **내비와 같은 줄,
   같은 높이**로 그 옆에 선다. 높이는 한 값(--dockh)에서 나오므로 동그란 버튼은
   지름이 곧 그 높이다 — 타원이 될 수 없다. 오른손잡이면 오른쪽, 왼손잡이면 왼쪽.
   (대표 지침 · 캔버스 dock) */
.dock{
  /* 화면에 대고 못 박는다(absolute 가 아니라 fixed) — 조상이 넘치거나 자리를 옮겨도
     내비가 화면 밖으로 잘리지 않는다. (2026-09-18 대표 지적: 「홈에서 내비가 잘린다」) */
  position:fixed; z-index:40;
  left:20px; right:20px;
  /* --vvb = 보이는 창과 문서 창의 차이(브라우저 아래 막대 · 키보드). shell.js 가 잰다.
     이걸 안 더하면 주소창이 접혔다 펴질 때 내비가 아래로 숨는다. (2026-09-18 대표 지적) */
  bottom:calc(var(--safe-b) + 10px + var(--vvb, 0px));
  --dockh:var(--nav-h);
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:center;
  gap:10px; pointer-events:none;
}
.dock > *{ pointer-events:auto; }
/* 로고 = 정본 에셋 한 장(assets/yangmiguan-lockup.png). 좁은 데서는 아래 글씨를
   잘라 **위쪽 심벌만** 보여 준다. 새 로고를 그리지 않는다.
   (2026-09-18 대표 지시: 「로고가 네비게이션 바에 항상 있어야 한다」) */
/* 로고 = 화면 맨 위 한 줄, 제목 위. 폭이 바뀌어도 자리는 바뀌지 않는다.
   (2026-09-18 대표 지시: 「가로일 때도 타이틀 위. 네비게이션 바가 아니라」) */
.topmark{ flex:none; padding:10px var(--pad-x) 2px; }
.topmark img{ display:block; width:54px; height:auto; }
@media (min-width:1200px){ .topmark{ padding:14px 32px 0; } }
.dock .bnav{ position:static; left:auto; right:auto; bottom:auto; transform:none;
             flex:none; height:var(--dockh); align-content:center; box-sizing:border-box; }
.dock .fab{ position:static; left:auto; right:auto; bottom:auto;
            width:var(--dockh); height:var(--dockh); flex:none; }
.dock .abar{ position:static; left:auto; right:auto; bottom:auto; flex:0 1 auto; gap:8px; }
.dock .ab-b{ min-height:var(--dockh); padding:0 20px; display:inline-flex; align-items:center;
             white-space:nowrap; }
/* 처리·확정 버튼 = **1:1 동그라미 + 글자**. ✓ · ✕ 는 쓰지 않는다 —
   무엇을 거절하고 무엇을 승인하는지가 그림으로는 안 읽힌다.
   (2026-09-20 대표 지시: 「전체 승인 전체 거절 이렇게 네이밍을 해줘야지,
    그리고 버튼이 무조건 동그라미라고 했지?」)
   글자는 **두 줄**이다 — 「전체 / 거절」. 줄이지 않는다.
   이 규칙은 **처리·확정 버튼에만** 적용한다(탭 · 입력칸은 그대로다). */
:root{ --abb:64px; }
:root[data-fontsize="xlarge"]{ --abb:72px; }   /* 큰 글자(tsc 1.26) */
.ab-b.rnd{
  width:var(--abb); height:var(--abb); min-height:0; padding:0; flex:none;
  border-radius:50%; display:grid; place-items:center;
  font-size:calc(13px * var(--tsc)); line-height:1.2; font-weight:650;
  white-space:normal; word-break:keep-all; text-align:center;
}
.ab-b.rnd svg{ width:22px; height:22px; }
html[data-hand="left"] .dock{ flex-direction:row-reverse; }

/* ── 한 열짜리 기기(손전화 · 커버)는 **운영계와 같은 모양** ───────
   내비 알약은 **모든 화면에서 같은 모양 같은 자리**다. 화면에 큰 버튼이 생기든 말든
   알약은 줄지도 늘지도 않는다 — 버튼은 그 **위에** 선다.
   (2026-09-18 대표 지시: 「네비게이션바는 뭐가 됐든 모든 화면에서 통일」) */
@media (max-width:839.98px){
  .dock{ display:flex; align-items:center; gap:10px; }
  /* 알약은 화면 폭을 다 쓰지 않는다 — 칸 수만큼만 차지하고 줄 전체가 가운데로 선다. */
  .dock .bnav{ display:grid; flex:none; min-width:0;
               grid-template-columns:repeat(var(--n,4), var(--navcol,64px)); }
  /* 떠 있는 + 는 **주 손 쪽 모서리**다(운영계와 같은 자리).
     가운데로 옮겨 보았더니 「뜬금없이 내비 위에 떠 있다」 — 되돌린다.
     (2026-09-18 대표 지적) */
  .dock .fab{
    position:absolute; right:0; left:auto; bottom:calc(var(--dockh) + 12px);
    transform:none;
    width:var(--dockh); height:var(--dockh);
  }
  .dock .abar, .dock .fab{ z-index:2; }
  html[data-hand="left"] .dock .fab{ right:auto; left:0; }
  /* 확정 줄은 **내비 알약 위**에 선다 — 옆에 선 프로필 위가 아니다.
     (+ 는 엄지 쪽 모서리에 그대로 둔다 — 그 둘은 하는 일이 다르다.) */
  /* 세로에서는 **가운데**에 선다 — 내비 알약과 같은 축이라 눈이 한 줄만 따라간다.
     (2026-09-20 대표 지시: 「세로 모드일 때는 그냥 가운데 정렬해 달라」)
     그 전에는 엄지 쪽 구석에 붙여 두었는데, 옆에 선 프로필 동그라미와 붙어 보였다. */
  .dock .abar{
    position:absolute; left:0; right:0; bottom:calc(var(--dockh) + 12px);
    transform:none;
    max-width:280px; margin-inline:auto;
    display:flex; justify-content:center; gap:8px;
  }
  /* 세로에서도 **동그라미 안에 글자**다(shell.js paintAbarNow · .ab-b.rnd).
     둥근 네모로 줄을 반씩 나눠 갖게 했었으나, 「버튼은 무조건 동그라미」로 되돌린다.
     (2026-09-20 대표 지시) 두 원은 제 지름만 차지하고 줄 가운데에 모인다.
     순서 = 거절(ghost · ab-l) → 승인(ab-r). */
  .dock .ab-l, .dock .ab-r{ flex:0 0 auto; min-width:0; display:flex; }
  /* 한 열에 하나 — 확정 막대가 떠 있으면 + 는 물러난다. 둘을 같은 구석에 쌓지 않는다.
     (2026-09-18 전수조사: 폰에서 「수정」 동그라미가 + 를 덮고 있었다) */
  .dock:has(.abar) .fab{ display:none; }

}

.bnav{
  /* 알약은 화면 폭을 다 쓰지 않는다 — 칸 수만큼만 차지하고 가운데 선다 */
  display:grid; grid-template-columns:repeat(var(--n,4), var(--navcol,56px));
  padding:6px 6px;
  border-radius:var(--r-pill);
  background:var(--nav-glass);
  box-shadow:var(--nav-sh);
  outline:1px solid var(--nav-edge);
  -webkit-backdrop-filter:saturate(1.7) blur(20px);
  backdrop-filter:saturate(1.7) blur(20px);
}
.nv{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:5px 0 4px; border:0; background:none;
  border-radius:var(--r-pill);
  color:var(--ink-3);
}
.nv.on{ color:var(--accent); background:var(--band); }
.nv svg{ width:19px; height:19px; }
.nv em{ font-style:normal; font-size:calc(9.5px * var(--tsc)); font-weight:600; }

/* 커버(372 이하) — 좌우를 조금 더 좁게, 제목 한 단계 작게 */
@media (max-width:399.98px){
  :root{ --pad-x:18px; --pad-top:20px; --nav-h:58px; --t-title:var(--t-title-sm); }
  .dock{ left:16px; right:16px; bottom:calc(var(--safe-b) + 8px); }
  /* 사장은 칸이 넷이다. 64px 고정이면 알약(4×64+12=268)에 프로필과 사이 간격까지 더해
     320px 화면을 8px 씩 넘겨 **좌우가 잘렸다**. 줄에 남는 만큼으로 칸 폭만 줄인다 —
     알약 · 프로필 생김새는 그대로다. (2026-09-20 Codex 실측) */
  .dock .bnav{
    --navcol:min(64px, calc((100vw - 32px - var(--dockh) - 10px - 12px) / 4));
  }
}
@media (min-width:600px) and (max-width:839.98px){
  :root{ --pad-x:32px; }
  .dock{ left:50%; right:auto; transform:translateX(-50%); width:min(560px, calc(100% - 48px)); }
}
@media (min-width:840px){ .dock{ display:none; } }

/* ══ 레일 ═══════════════════════════════════════════════════════ */
.rail{ display:none; }

/* 손잡이를 바꾸면 이 조각들이 **미끄러져** 반대편으로 간다(View Transition).
   이름이 있어야 「사라졌다 나타나는」 것이 아니라 「옮겨 가는」 것으로 보인다. */
.rail{ view-transition-name:rail; }
.stackc{ view-transition-name:body-cols; }
.dock .bnav{ view-transition-name:navpill; }
#avatarTop{ view-transition-name:avatar; }
.fab{ view-transition-name:fab; }
.abar{ view-transition-name:abar; }

/* 폴드 펼침 — 세로 알약이 레일 칸 안에서 떠 있다. 아래에 모은다. */
@media (min-width:840px) and (max-width:1199.98px){
  :root{ --pad-x:20px; --pad-top:22px; --list-w:374px; }
  .pn{ padding-bottom:26px; }
  .rail{
    display:flex; flex:none; width:var(--rail-w);
    flex-direction:column; align-items:center;
    padding:16px 0;
  }
  .rl-sp{ flex:1; }
  .rcap{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    /* 폴드 레일이 너무 작았다 — 손가락으로 누르는 것이다. 알약과 칸을 키운다.
       (2026-09-18 대표 지적) */
    width:74px; padding:10px 0 9px;
    border-radius:var(--r-pill);
    background:var(--nav-glass);
    box-shadow:var(--nav-sh);
    outline:1px solid var(--nav-edge);
    -webkit-backdrop-filter:saturate(1.7) blur(20px);
    backdrop-filter:saturate(1.7) blur(20px);
  }
  .rail .ub-who{ display:none; }
  /* 확정·도구 버튼은 세로 알약 **위에 떠 있다**. 알약의 자리를 밀지 않는다 —
     버튼이 생기든 없어지든 내비는 늘 같은 자리다. (2026-09-18 대표 지적) */
  .rcap{ position:relative; }
  /* 알약과 **같은 세로축**에 선다. left:50% + translateX 로 맞추면 바깥에서 물려받은
     right 값이 남아 상자가 한쪽으로 쏠린다 — 알약 폭에 딱 맞춰 놓고 가운데로 모은다.
     (2026-09-18 대표 지적: 「버튼이 세로로 가운데 정렬이 안 돼 있다」) */
  /* 세로로 선다 — **거절이 위, 승인이 아래**. 묶음 높이 = 지름 둘 + 8px
     (보통 136px · 큰 글자 152px). */
  .rail .abar{
    position:absolute; bottom:calc(100% + 12px); left:0; right:0; transform:none;
    width:auto; margin:0;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    pointer-events:auto;
  }
  .rail .ab-l, .rail .ab-r{
    display:flex; flex-direction:column; align-items:center; gap:8px; width:auto;
  }
  /* 폴드 레일에서도 **동그라미**다 — 세로 알약과 같은 폭의 원 */
  .rail .abar{ align-items:center; }
  /* + 도 알약 위에 선다. 확정 줄이 있으면 그 위로 한 칸 더 올라간다. */
  .rail .fab{
    position:absolute; left:0; right:0; margin:0 auto;
    bottom:calc(100% + 10px);
    width:var(--dockh); height:var(--dockh);
  }
  .rcap:has(.abar) .fab{ bottom:calc(100% + 12px + (var(--abb) * 2) + 8px + 8px); }
  /* 지름·글자는 .ab-b.rnd 한 곳에서 나온다 — 여기서는 그림자만 얹는다 */
  .rail .ab-b{ box-shadow:var(--nav-sh); }
  .rail .ab-b svg{ width:22px; height:22px; }
  .railfoot .userblk{ flex-direction:column; gap:3px; justify-content:center; }
  .rail .ub-cog{ display:none; }
  .rail .ub-avatar{ width:42px; height:42px; font-size:calc(14px * var(--tsc)); }
  /* 오른손잡이 → 레일이 오른쪽. 왼손잡이 → 왼쪽.
     order 는 보간되지 않으므로 자리바꿈을 View Transition 이 이어 그린다(shell.js applyPrefs). */
  /* 이름은 아래에서 기기와 상관없이 준다(손잡이를 바꾸면 어느 기기에서든 미끄러져야 한다) */
  html[data-hand="right"] .rail{ order:2; }
  html[data-hand="right"] .stackc{ order:1; }
  /* 레일이 오른쪽이면 상세가 280 으로 좁아지는 대신 목록이 넓어진다(캔버스 foldr) */
  html[data-hand="right"]{ --list-w:462px; }
}

.rl-i{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  width:60px; padding:9px 0; border:0; background:none;
  border-radius:var(--r-pill); color:var(--ink-3);
}
.rl-i.on{ color:var(--accent); background:var(--band); }
.rail svg{ width:23px; height:23px; flex:none; }
.rl-i em{ font-style:normal; font-size:calc(11px * var(--tsc)); font-weight:600; }
.rl-div{ width:34px; height:1px; background:var(--hair); margin:6px 0 4px; }

/* 레일 하단 = [아바타][이름/역할][설정][로그아웃]. 전 서비스 같은 구성이다. */
.railfoot{ width:100%; position:relative; }
/* 사람 메뉴는 아래(레일 하단)에서 **위로** 펼쳐진다 */
.menupop.user{ top:auto; bottom:calc(100% + 8px); left:0; right:auto; min-width:210px; }
/* 좁은 기기의 아바타는 화면 오른쪽 위에 떠 있다 — 메뉴도 화면에 대고 편다 */
/* 내비 옆 사람 자리에서 펴는 메뉴 — 아래는 화면 끝이므로 **위로** 펼친다 */
.menupop.fixed{ position:fixed; top:auto; left:auto; }
/* 손잡이를 바꾸면 이 메뉴도 내비와 **같이** 미끄러져 간다 */
.menupop.user{ view-transition-name:usermenu; }

.userblk{
  display:flex; align-items:center; gap:8px; width:100%;
  border:0; background:none; padding:6px; border-radius:var(--r-md);
  text-align:left; color:inherit;
}
.userblk .ufb{
  flex:none; width:36px; height:36px; padding:0; border:0; border-radius:50%;
  display:none; place-items:center; background:transparent; color:inherit;
}
.userblk .ufb:hover{ background:var(--fill); }
.userblk .ufb:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.userblk .ufb svg{ width:18px; height:18px; }
.userblk .ub-who{ flex:1; }
.userblk .ub-who b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width:840px) and (max-width:1199.98px){
  .railfoot .userblk{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 2px 8px; border:1px solid var(--hair); background:var(--fill); border-radius:16px; }
  .railfoot .ub-avatar,.railfoot .ub-who{ flex:none; text-align:center; }
  .railfoot .ub-who{ display:block; width:100%; }
  .railfoot .ub-who b{ font-size:11px; line-height:16px; }
  .railfoot .ub-who span{ font-size:10px; line-height:14px; }
  .railfoot #settingsBtn,.railfoot #logoutBtn{ display:none; }
}
.ub-cog{ flex:none; margin-left:auto; color:var(--ink-3); display:grid; place-items:center; }
.ub-cog svg{ width:17px; height:17px; }
.ub-avatar{
  flex:none; width:36px; height:36px; border-radius:50%; border:0;
  background:var(--fill); color:var(--ink-2);
  display:grid; place-items:center;
  font-size:calc(12px * var(--tsc)); font-weight:700;
}
.ub-who{ min-width:0; }
.ub-who b{ display:block; font-size:calc(13px * var(--tsc)); font-weight:700; }
.ub-who span{ display:block; font-size:calc(11px * var(--tsc)); color:var(--ink-3); }


/* 좁은 기기 — 레일이 없다. 사람 자리는 **내비 알약 옆**에 선다(같은 높이). */
/* 사진이 있으면 첫 글자 대신 사진이 동그라미를 채운다. */
.haspho{ background-size:cover !important; background-position:center !important; color:transparent !important; }
#avatarTop{
  flex:none; width:var(--dockh); height:var(--dockh); border-radius:50%; border:0;
  background:var(--nav-glass); color:var(--ink-2);
  outline:1px solid var(--nav-edge); box-shadow:var(--nav-sh);
  -webkit-backdrop-filter:saturate(1.7) blur(20px);
  backdrop-filter:saturate(1.7) blur(20px);
  display:grid; place-items:center;
  font-size:var(--t-body); font-weight:700;
}
@media (min-width:840px){ #avatarTop{ display:none; } }

/* PC — 레일은 붙어 있다. 아이콘 + 가로 라벨. 손잡이를 적용하지 않는다. */
@media (min-width:1200px){
  :root{ --pad-x:20px; --pad-top:22px; --list-w:380px; }
  .pn{ padding-bottom:26px; }
  .pn.det{ padding-left:32px; }
  .rail{
    display:flex; flex:none; order:0 !important;
    width:var(--rail-wide); flex-direction:column; align-items:stretch;
    padding:20px 14px 18px;
    border-right:1px solid var(--hair);
  }
  .stackc{ order:1 !important; }
  .rl-sp{ flex:1; }
  /* 레일이 붙어 있는 PC 는 브랜드 · 탭 · 빈칸 · 아바타 순서다 */
  .rcap{ display:contents; }
  .rl-i{ order:1; }
  .rl-sp{ order:2; }
  .rl-div{ order:3; }
  .rl-me{ order:4; }

  .rl-i{
    width:auto; white-space:nowrap; flex-direction:row; gap:11px;
    padding:10px 12px; font-size:calc(14px * var(--tsc));
  }
  .rl-i em{ font-size:calc(14px * var(--tsc)); }
  .rl-div{ display:none; }
  .railfoot{ order:4; padding:12px 6px 0; border-top:1px solid var(--hair); }
  .railfoot #settingsBtn,.railfoot #logoutBtn{ display:grid; }
  .ub-who{ flex:1; }
}

/* ══ PC 상단 바 ══════════════════════════════════════════════════ */
.tbar{ display:none; }
@media (min-width:1200px){
  .tbar{
    flex:none; height:var(--topbar-h);
    display:flex; align-items:center; gap:12px;
    padding:0 32px; border-bottom:1px solid var(--hair);
  }
  .tbar b{ font-size:calc(24px * var(--tsc)); font-weight:800; letter-spacing:-0.04em; }
  .tbar span{ font-size:calc(13px * var(--tsc)); color:var(--ink-3); }
  .tbar .sp{ flex:1; }
}
.rbtn{
  width:36px; height:36px; border-radius:50%; background:var(--fill);
  display:grid; place-items:center; flex:none; color:var(--ink-2); border:0;
}
.rbtn svg{ width:17px; height:17px; }

/* ══ 너비 조절 손잡이 (접히는 선) ═══════════════════════════════ */
.rz{
  flex:none; width:4px; background:var(--hair); cursor:col-resize;
  border:0; padding:0; position:relative;
}
.rz.crease{ width:var(--crease); background:var(--fill); }
.rz.crease::after{
  content:""; position:absolute; left:calc(50% - 0.5px); top:12%; bottom:12%;
  width:1px; background:var(--hair);
}
@media (min-width:840px) and (max-width:1199.98px){ .rz{ width:var(--crease); background:var(--fill); } }

/* ══ 떠 있는 동작 — 한 열에 하나 ═══════════════════════════════ */
.fab{
  position:absolute; z-index:30;
  right:20px; bottom:calc(var(--safe-b) + var(--nav-h) + 6px + var(--vvb, 0px));
  /* 지름은 하나다 — 내비 옆에 서든 열 모서리에 서든 같은 동그라미. */
  width:var(--dockh); height:var(--dockh); border-radius:50%; border:0;
  background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center;
  box-shadow:var(--fab-sh);
}
.fab svg{ width:24px; height:24px; }
html[data-hand="left"] .fab{ right:auto; left:20px; }

.abar{
  position:absolute; z-index:30;
  left:16px; right:16px;
  bottom:calc(var(--safe-b) + var(--nav-h) + 6px);
  display:flex; align-items:center; gap:10px;
  pointer-events:none;
}
.abar > *{ pointer-events:auto; }
/* 취소와 저장을 화면 양 끝으로 갈라 놓지 않는다.
   갈라 두면 한 손으로는 둘 다 못 누르고, 두 버튼 사이 본문이 버튼에 눌려 안 읽힌다.
   둘은 **한 덩어리로 주 손 쪽에** 모인다. 확정이 바깥쪽(더 닿기 쉬운 쪽)이다.
   (2026-09-18 대표 지적) */
.ab-l, .ab-r{ display:flex; gap:var(--s2); }
.abar{ justify-content:flex-end; }
html[data-hand="left"] .abar{ justify-content:flex-start; }
html[data-hand="left"] .ab-l{ order:2; }
html[data-hand="left"] .ab-r{ order:1; }
.ab-b{
  border:0; border-radius:var(--r-pill); padding:13px 28px;
  font-size:calc(14px * var(--tsc)); font-weight:700;
  background:var(--accent); color:var(--on-accent); box-shadow:var(--nav-sh);
}
.ab-b.ghost{
  background:var(--nav-glass); color:var(--ink-2); font-weight:600;
  outline:1px solid var(--nav-edge);
  -webkit-backdrop-filter:saturate(1.7) blur(20px);
  backdrop-filter:saturate(1.7) blur(20px);
}
.ab-b[disabled]{ opacity:.6; }

/* 두 열짜리 기기 — + 는 목록 열 바깥 아래 모서리, 확정은 상세 열 아래 */
@media (min-width:840px){
  #ovlMain .fab{ left:20px; right:auto; bottom:20px; }
  #ovlDet .fab{ right:18px; left:auto; bottom:20px; }
  .ovl .abar{ left:20px; right:20px; bottom:18px; }
}
/* PC 는 엄지 규칙을 적용하지 않는다 — + 도 확정도 상단 바로 올라간다.
   마우스는 어디든 같은 거리라 아래에 띄울 이유가 없고, 띄워 두면 본문을 덮는다.
   확정은 **오른쪽 위에 나란히**. (2026-09-18 대표 지적) */
@media (min-width:1200px){
  #ovlMain .fab{ display:none; }
  .ovl .abar{
    position:static; left:auto; right:auto; bottom:auto;
    justify-content:flex-end;
  }
  /* 상단 바 오른쪽으로 옮겨 앉는다 */
  .tbar .abar{ position:static; margin-left:auto; box-shadow:none; }
  .tbar .ab-b{ box-shadow:none; padding:10px 20px; font-size:calc(13px * var(--tsc)); }
  .tbar .ab-b.ghost{ background:var(--fill); outline:0; backdrop-filter:none; }
}

/* ══ 잠김 · 덮개 ════════════════════════════════════════════════ */
.veil{ filter:blur(3px); opacity:.42; pointer-events:none; user-select:none; }
.gate{
  position:absolute; z-index:35; left:var(--pad-x); right:var(--pad-x); top:40%;
  background:var(--bg); border-radius:var(--r-lg); padding:22px; text-align:center;
  outline:1px solid var(--hair); box-shadow:var(--card-sh);
}
@media (min-width:1200px){
  .gate{ left:50%; right:auto; width:420px; transform:translateX(-50%); }
}
.gate .gi{
  width:42px; height:42px; border-radius:50%; background:var(--band); color:var(--accent);
  display:grid; place-items:center; margin:0 auto 12px;
}
.gate .gi svg{ width:19px; height:19px; }
.gate b{ display:block; font-size:calc(16px * var(--tsc)); font-weight:700; letter-spacing:-0.02em; }
.gate span{ display:block; font-size:var(--t-body); color:var(--ink-3); margin-top:7px; line-height:1.55; }

/* ══ 알림 띠 · 확인 카드 · 맨 위 띠 (shell.js 가 띄운다) ═════════ */
#uiLayer{ position:fixed; inset:0; z-index:60; pointer-events:none; }
#uiLayer > *{ pointer-events:auto; }

.toast{
  position:absolute; left:16px; right:16px;
  /* 확정 동작 위로 올려 앉힌다 — 알림 띠가 저장 버튼을 가리면 안 된다 */
  bottom:calc(var(--safe-b) + var(--nav-h) + 74px + var(--vvb, 0px));
  display:flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--bg);
  border-radius:var(--r-md); padding:12px 12px 12px 16px;
  font-size:var(--t-body); font-weight:600;
  box-shadow:var(--nav-sh);
}
.toast button{
  margin-left:auto; border:0; background:none; color:var(--bg);
  font-size:var(--t-body); font-weight:700; text-decoration:underline; padding:4px 6px;
}
@media (min-width:840px){
  .toast{ left:auto; right:24px; bottom:24px; max-width:420px; }
  html[data-hand="left"] .toast{ left:24px; right:auto; }
}

.scrim{ position:absolute; inset:0; background:var(--scrim-1); }
.cfm{
  position:absolute; left:var(--pad-x); right:var(--pad-x); top:30%;
  background:var(--bg); border-radius:var(--r-lg); padding:22px;
  outline:1px solid var(--hair); box-shadow:var(--card-sh);
}
@media (min-width:840px){
  .cfm{ left:50%; right:auto; width:400px; transform:translateX(-50%); top:26%; }
}
.cfm b{ display:block; font-size:calc(16px * var(--tsc)); font-weight:700; letter-spacing:-0.02em; }
.cfm p{ margin:8px 0 0; font-size:var(--t-body); color:var(--ink-3); line-height:1.6; white-space:pre-line; }
.cfmb.three{ flex-wrap:wrap; }
.cfmb.three button{ flex:1 1 auto; min-width:120px; }
.cfmb button.danger{ color:var(--err); }
.cfmb{ display:flex; gap:9px; margin-top:18px; }
.cfmb button{
  flex:1; border:0; border-radius:var(--r-pill); padding:12px 0;
  font-size:calc(14px * var(--tsc)); font-weight:700;
  background:var(--accent); color:var(--on-accent);
}
.cfmb button.ghost{ background:var(--fill); color:var(--ink-2); font-weight:600; }
/* 지우는 확인 — 위험은 err 채움, 기본 선택은 「그대로 두기」(accent 1.5 테두리)
   (Figma 확인 대화 120:361 · 2026-09-23 대표: 취소 기본선택, 지우기는 err 색) */
.cfmb button.dz{ background:var(--err); color:var(--on-accent); }
.cfmb button.ghost.keep{ box-shadow:inset 0 0 0 1.5px var(--accent); }

/* 맨 위 안내 띠 — 연결 끊김 띠는 사람이 닫을 수 없다 */
.bnr{
  display:flex; align-items:center; gap:9px; padding:10px 13px;
  border-radius:var(--r-md); background:var(--band); color:var(--accent);
  margin-bottom:var(--s3);
}
.bnr svg{ width:17px; height:17px; flex:none; }
.bnr span{ flex:1; font-size:var(--t-body); font-weight:600; line-height:1.45; }
.bnr.quiet{ background:var(--fill); color:var(--ink-2); }
.bnr-a{
  border:0; border-radius:var(--r-pill); padding:7px 13px;
  font-size:calc(12px * var(--tsc)); font-weight:700;
  background:var(--accent); color:var(--on-accent);
}
.bnr.quiet .bnr-a{ background:var(--band); color:var(--accent); }
#topBanner{ padding:0 var(--pad-x); margin-top:var(--s1); }
/* 영상 머리가 있는 화면에서는 이 자리의 위 여백이 영상 위 흰 줄로 보인다.
   띠가 실제로 뜰 때만 여백을 준다. (2026-09-19) */
html[data-hero] #topBanner:empty{ margin-top:0; }
@media (min-width:1200px){ #topBanner{ padding:0 32px; } }

/* ══ 기본 부품 — 캔버스의 원자들. 탭 화면이 그대로 쓴다. ═════════ */
.tt{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:var(--s4); }
.tt h3{ margin:0; font-size:var(--t-title); font-weight:800; letter-spacing:-0.045em; line-height:1.05; }
.tt .eb{ font-size:var(--t-eb); color:var(--ink-3); margin-bottom:4px; font-weight:400; }
.tt .sb{ margin-top:5px; font-size:var(--t-body); color:var(--ink-3); }
/* (예전) PC 에서는 목록 열 머리를 숨겼다 — 상단 바가 제목을 대신 보였기 때문이다.
   상단 바를 모든 화면에서 걷었으니(아래 「윗부분 — 모든 화면 같다」) 머리는 화면 안에 그대로 둔다. */

/* 달·주 이동 머리 — 근태가 쓰던 것을 매출도 같이 쓴다(한 앱에 머리가 둘일 이유가 없다).
   (2026-09-18 대표 지시: 「근태 머리 그대로 매출에도」) */
.atper{ display:flex; align-items:center; gap:8px; margin-bottom:var(--s2); }
.atper b{ flex:1; text-align:center; font-size:var(--t-card); font-weight:700; letter-spacing:-0.02em; }
/* 달 이름은 **가운데**에 선다 — 왼쪽에 붙여 두면 앞뒤 화살표와 무게가 안 맞는다.
   (2026-09-18 대표 지적) */
.atper button{
  border:0; background:var(--fill); color:var(--ink-2); border-radius:var(--r-pill);
  height:32px; min-width:32px; padding:0 10px; font-family:inherit;
  font-size:var(--t-lbl); font-weight:600; display:inline-grid; place-items:center;
}
.atper button svg{ width:15px; height:15px; }
.atper button[disabled]{ opacity:.35; }

.bhead{ margin-bottom:18px; }
.bk{
  display:inline-flex; align-items:center; gap:3px; border:0; background:none;
  padding:0; color:var(--ink-3); font-size:var(--t-body); font-weight:600; margin-bottom:var(--s1);
}
.bk svg{ width:15px; height:15px; }
.bhead h3{ margin:0; font-size:var(--t-title); font-weight:800; letter-spacing:-0.045em; line-height:1.05; }
@media (min-width:840px){ .bhead .bk{ display:none; } }

.lbl{ font-size:var(--t-lbl); font-weight:600; color:var(--ink-3); padding:16px 0 6px; }
/* 탭 줄 — 고른 칸은 색만으로 말하지 않는다. 굵기와 선으로 같이 말한다.
   칸 사이는 저울의 s3(18) 만큼 벌린다 — 붙여 놓으면 어디까지가 한 칸인지 모른다. */
/* ══ 스크롤 막대 — 굴릴 때만 보인다 ══════════════════════════════
   대표 지시(2026-09-20): 「스크롤이 있는 곳에 자꾸 스크롤바가 보이는데,
   숨겨져 있다가 스크롤할 때만 보이면 안 되나?」
   그래서 **자리는 늘 잡아 두고 색만 없앤다.** 나타날 때 글이 밀리지 않게 하려는 것이다
   (scrollbar-gutter 로 폭을 미리 비워 둔다 — 안 그러면 굴릴 때마다 본문이 흔들린다).
   보이는 때는 **굴리는 동안뿐**이다(shell.js 가 html[data-scrolling] 을 켜고, 멈추고 0.9초 뒤 끈다).
   포인터만 올려도 보이게 하지 않는다 — 대표가 「스크롤할 때만」이라 하셨다.
   손가락 기기에는 원래 겹쳐 떴다 사라지는 막대라 이 규칙이 방해되지 않는다. */
html{ scrollbar-gutter:stable; }
*{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:transparent; border-radius:999px; }
html[data-scrolling] *{ scrollbar-color:var(--hair) transparent; }
html[data-scrolling] *::-webkit-scrollbar-thumb{ background:var(--hair); }
/* 이미 「아예 안 보임」으로 정해 둔 곳(세그먼트 줄·시간별 띠 등)은 그대로 둔다 —
   아래 개별 규칙이 이 규칙보다 뒤에 오므로 그쪽이 이긴다. */

.segs{
  display:flex; gap:var(--s3); overflow-x:auto; touch-action:pan-x pan-y;
  margin-bottom:var(--s3); scrollbar-width:none;
}
.segs::-webkit-scrollbar{ display:none; }

/* ══ 붙어 있는 머리 ════════════════════════════════════════════════
   화면의 머리(제목 · 탭 · 찾기 칸 · 고르개)는 **자리를 지킨다.** 아래 내용만 굴러간다.
   · 탭만 붙이면 그 위아래로 본문이 비쳐 지나간다 — 머리 한 덩어리가 통째로 붙어야
     뒤가 비치지 않는다. 좌우 여백까지 덮도록 **폭을 다 쓴다**. (2026-09-18 대표 지적)
   · 찾기 칸이 있는 화면은 찾기 칸까지 머리다 — 스무 줄 아래에서 다시 찾으려고
     맨 위까지 올라오게 두지 않는다. */
/* 머리 한 덩어리. **붙는 것은 그 안의 탭 줄(과 찾기 줄)뿐**이다 —
   제목까지 붙여 두면 머리가 두꺼워져 정작 볼 것이 가려진다. (2026-09-18 대표 지적) */
/* 머리(제목 + 탭)는 **통째로 붙는다.** 스크롤해도 제목이 위로 사라지지 않는다.
   바탕은 열의 좌우 여백과 **위쪽 여백까지** 덮는다 — 한 군데라도 투명하면
   그 틈으로 본문이 비쳐 지나간다. (2026-09-18 대표 지시) */
.stick{
  position:sticky; top:0; z-index:8;
  background:var(--bg);
  /* 위쪽은 **음수 margin 을 쓰지 않는다** — 음수 margin 은 뒤따르는 내용까지 끌어올려
     머리 밑이 통째로 겹친다. 열의 위 여백을 머리가 대신 갖는다(.pn:has(>.stick)).
     좌우만 넓혀 바탕이 여백까지 덮게 한다. (2026-09-18 대표 지적) */
  margin:0 calc(-1 * var(--pad-x));
  padding:var(--pad-top) var(--pad-x) var(--s3);
}
.pn:has(> .stick){ padding-top:0; }
/* 좁은 기기의 「뒤로」 머리는 붙는 머리보다 위에 있다 — 열의 위 여백을 대신 갖는다 */
.pn:has(> .stick) > .bhead{ padding-top:var(--pad-top); }
.stick > :last-child{ margin-bottom:0; }
/* 머리 안쪽 간격 — 제목은 위로 바짝, 탭과 달 고르개 사이는 한 칸 벌린다 */
.stick{ padding-top:var(--s3); }
.stick .tt{ margin-bottom:var(--s3); }
.stick .segbar{ margin-bottom:var(--s3); }
.stick .atper{ margin-bottom:0; }
@media (min-width:1200px){
  .pn.det .stick{ margin-left:-32px; padding-left:32px; }
}

/* 붙는 줄 — 바탕은 열의 좌우 여백까지 **넉넉히 덮는다**.
   덜 덮으면 그 틈으로 본문이 비쳐 지나간다(열은 가로 스크롤이 없어 넘겨 덮어도 된다). */
/* 붙는 줄은 **감싸개**가 붙는다.
   탭 줄 자신은 가로로 구르는 상자(overflow-x:auto)라 바탕을 넓히면 잘려 나가고,
   그림자로 넓히면 구르지 않을 때도 위쪽(제목)을 덮어 버린다.
   구르지 않는 감싸개를 하나 두고 그 바탕을 좌우로 넓히면 둘 다 풀린다.
   (2026-09-18 대표 지적: 「탭 뒤가 비친다」 → 「제목이 잘려 보인다」) */
.segbar{ background:var(--bg); }
.segbar .segs{ margin-bottom:0; }
.gqrow{ background:var(--bg); }
/* 사진 맞추기 창 — 동그라미로 보일 자리를 사람이 직접 맞춘다. */
.cropw{
  position:fixed; z-index:1200; left:50%; top:50%; transform:translate(-50%, -50%);
  width:min(384px, calc(100vw - 32px));
  background:var(--card, var(--bg)); border-radius:var(--r-lg);
  box-shadow:var(--fab-sh); padding:var(--s3);
  display:flex; flex-direction:column; gap:var(--s3); align-items:center;
}
.croph{ width:100%; text-align:center; }
.croph b{ display:block; font-size:var(--t-card); font-weight:800; letter-spacing:-0.03em; }
.croph span{ display:block; font-size:var(--t-lbl); color:var(--ink-3); margin-top:var(--s1); }
.cropv{
  position:relative; border-radius:50%; overflow:hidden; touch-action:none;
  background:var(--fill); outline:2px solid var(--accent); outline-offset:3px;
  cursor:grab;
}
.cropv:active{ cursor:grabbing; }
.cropc{ display:block; }
.cropz{ width:100%; accent-color:var(--accent); }
.cropb{ display:flex; gap:var(--s2); width:100%; }
.cropb .btn{ flex:1; }

/* 기다리는 팝업 — 도는 표시 하나. 버튼 안이 아니라 화면 가운데서 말한다. */
.cfmw{ display:flex; justify-content:center; padding:10px 0 2px; color:var(--accent); }
.segs{ padding-bottom:0; }
.segs::-webkit-scrollbar{ display:none; }
.sg{
  flex:none; border:0; background:none; padding:6px 0 9px;
  font-size:var(--t-name); font-weight:600; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:4px;
  border-bottom:3px solid transparent;   /* 탭은 알약이 아니라 밑줄 */
  transition:color var(--d-instant,180ms) ease;
}
.sg.on{ color:var(--ink); font-weight:800; border-bottom-color:var(--accent); }
.sg svg{ width:12px; height:12px; }
/* 기다리는 요청의 수 — 색만으로 말하지 않으려고 숫자를 같이 적는다.
   (2026-09-20 대표 지시: 「요청 탭에 항상 몇 건인지 빨간색으로, 실시간으로」) */
.sg .sg-n{
  flex:none; min-width:calc(18px * var(--tsc)); height:calc(18px * var(--tsc));
  padding:0 calc(5px * var(--tsc)); border-radius:999px;
  background:var(--err); color:#fff;
  font-size:calc(11px * var(--tsc)); font-weight:700;
  line-height:calc(18px * var(--tsc)); text-align:center;
}

.blk{ padding:18px 0; border-bottom:1px solid var(--hair); }
.blk.center{ text-align:center; padding:26px 0; }
.blk .k{ font-size:var(--t-body); color:var(--ink-3); }
.blk .v{
  font-size:var(--t-num); font-weight:800; letter-spacing:-0.045em;
  margin-top:5px; line-height:1.08; font-variant-numeric:tabular-nums;
}
.blk .v.sm{ font-size:var(--t-card); font-weight:700; letter-spacing:-0.02em; }
.blk .u{ font-size:var(--t-body); color:var(--ink-3); margin-top:4px; }
.row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.duo{ display:flex; border-bottom:1px solid var(--hair); }
.duo > div{ flex:1; padding:18px 0; min-width:0; }
.duo > div + div{ border-left:1px solid var(--hair); padding-left:18px; }
.duo .k{ font-size:var(--t-body); color:var(--ink-3); }
.duo .v{
  font-size:calc(var(--t-num) * .72); font-weight:800; letter-spacing:-0.04em;
  margin-top:4px; font-variant-numeric:tabular-nums;
}

.li{
  display:flex; align-items:center; gap:11px;
  padding:13px 0; border-bottom:1px solid var(--hair);
  width:100%; text-align:left; border-left:0; border-right:0; border-top:0;
  background:none; color:inherit;
}
.li .nb{ flex:1; min-width:0; }
.li .nb b{ display:block; font-size:var(--t-name); font-weight:600; }
.li .nb span{ display:block; font-size:var(--t-body); color:var(--ink-3); margin-top:2px; }
.li .r{ font-size:var(--t-body); color:var(--ink-3); flex:none; font-variant-numeric:tabular-nums; }
/* 고른 줄 — **넓이가 달라지지 않는다.**
   전에는 고를 때만 좌우 패딩을 더하고 음수 margin 으로 끌어내서, 고르는 순간
   줄이 움찔하고 안쪽 내용이 좁아졌다. 모든 줄이 같은 패딩을 늘 가지고 있고,
   고른 줄은 **바탕과 테두리만** 바뀐다. (2026-09-18 대표 지적) */
.li{ padding-left:12px; padding-right:12px; margin:0 -12px; border-radius:var(--r-sm); }
/* 고른 줄은 **채워서** 말한다. 테두리를 두르면 줄 하나하나가 상자처럼 보여
   목록이 버튼 더미가 된다. (2026-09-18 대표 지적: 「버튼 디자인들이 마음에 안 든다」) */
.li.sel{
  background:var(--band);
  outline:0;
  border-bottom-color:transparent;
}
.li.sel .nb b{ color:var(--accent); font-weight:700; }
.li.sel .r{ color:var(--accent); }
.li:not(.sel):hover{ background:var(--fill); }
.av{
  flex:none; width:36px; height:36px; border-radius:50%; background:var(--fill);
  display:grid; place-items:center; font-size:var(--t-body); font-weight:700; color:var(--ink-2);
}

/* 누르는 것은 **한 벌**이다 — 어디에 놓이든 같은 높이, 같은 알약, 같은 두 갈래.
     채운 알약  = 이 화면에서 하는 일 하나
     연한 알약  = 그 밖의 것(취소 · 보조)
   (2026-09-18 대표 지적: 「버튼 디자인들이 마음에 안 든다」) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; border:0;
  background:var(--accent); color:var(--on-accent); border-radius:var(--r-pill);
  min-height:46px; padding:0 22px; font-size:var(--t-btn); font-weight:700;
  margin-top:var(--s3); font-family:inherit;
}
.btn.ghost{ background:var(--fill); color:var(--ink-2); }
.btn:disabled{ opacity:.45; }
/* 폭을 다 쓰는 버튼도 330 에서 멈추고 가운데 선다 — 하네스 규칙(자리). */
.btn.full{ width:100%; max-width:330px; margin-left:auto; margin-right:auto; }
/* 내용만큼만 — 가운데 서는 보조 버튼(더 보기 따위) */
/* ── 폼 안의 고르개 — 세그먼트(밑줄)가 아니다 ── */
/* 네 갈래가 한 줄에 서면 글자가 찌그러진다 — 모자라면 다음 줄로 접는다. */
.chs{ display:flex; flex-wrap:wrap; gap:8px; }
.ch{
  flex:1 1 calc(50% - 4px); font-family:inherit; border:0; border-radius:var(--r-pill); min-height:46px;
  padding:0 14px; font-weight:700; font-size:var(--t-btn);
  background:var(--fill); color:var(--ink-2);
}
.ch.on{ background:var(--accent); color:var(--on-accent); font-weight:700; }

.btn.mid{ display:block; margin:var(--s2) auto 0; }
/* 줄 안에 붙는 작은 버튼(취소·전화 따위) — 큰 버튼과 같은 모양, 높이만 한 단계 아래. */
.btn.sm{ min-height:36px; margin-top:0; padding:0 14px; font-size:var(--t-lbl); }
/* 이름·값 설명 — 누를 수 없는 것은 줄이 아니다 */
.kvs{ display:grid; gap:var(--s1); margin:var(--s2) 0; }
.kv{ display:flex; gap:var(--s2); align-items:baseline; }
.kv b{ flex:none; min-width:92px; font-size:var(--t-lbl); color:var(--ink-3); font-weight:600; }
.kv span{ flex:1; }
.btn.big{ padding:18px 22px; font-size:var(--t-btn-lg); }
.pair{ display:flex; gap:9px; }
.pair .btn{ flex:1; }

.fld{ margin-bottom:var(--s3); }
/* 줄(.li)의 밑줄과 바로 다음 칸 제목이 맞붙어 겹쳐 보였다 — 한 칸 띄운다.
   (2026-09-20 대표 지적: 「이 날은」 글자가 위 카드 테두리와 겹친다) */
.li + .fld{ margin-top:var(--s3); }
.fld .k{ font-size:var(--t-lbl); color:var(--ink-3); margin-bottom:7px; font-weight:600; }
.fld input,.fld select,.fld textarea{
  width:100%; height:46px; border:0; border-radius:var(--r-pill);
  background:var(--fill); color:var(--ink);
  padding:0 18px; font-family:inherit; font-size:var(--t-name);
}
.fld textarea{ height:auto; min-height:96px; border-radius:var(--r-md); padding:14px 18px; resize:vertical; }
.fld.err input,.fld.err select,.fld.err textarea{ box-shadow:inset 0 0 0 1.5px var(--accent); }
.fld .e{ font-size:var(--t-lbl); color:var(--accent); margin-top:6px; font-weight:600; }

/* 뼈대 · 빈 상태 · 실패 — 규격은 G 묶음(st-kit) */
.skel{ background:var(--fill); border-radius:8px; height:14px; margin:var(--s3) 0; }
.skelblk .skel:nth-child(2){ width:64%; }
.skelblk .skel:nth-child(3){ width:82%; }
.empty{ text-align:center; padding:48px 12px; }
.empty .ei{
  width:44px; height:44px; border-radius:50%; background:var(--fill); color:var(--ink-3);
  display:grid; place-items:center; margin:0 auto var(--s3);
}
.empty .ei svg{ width:20px; height:20px; }
.empty b{ display:block; font-size:var(--t-card); font-weight:700; letter-spacing:-0.02em; }
.empty p{ margin:var(--s1) 0 0; font-size:var(--t-body); color:var(--ink-3); line-height:1.6; }
.spin{ width:16px; height:16px; }

/* ══ 로그인 2단 (index.html) ════════════════════════════════════ */
/* .app 과 같은 이유로 높이를 못 박지 않는다 — 계 표식 띠가 붙으면 넘친다. */
.login-app{ flex:1; min-height:0; display:flex; overflow:hidden; background:var(--bg); }
.hero-pn{ flex:1; position:relative; overflow:hidden; }
.hero-pn img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-pn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--scrim-0), var(--scrim-1));
}
.hcap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px 30px 34px; color:var(--on-photo); }
.hcap .ht{ font-size:calc(19px * var(--tsc)); font-weight:700; letter-spacing:-0.025em; }
.hcap .hs{ font-size:var(--t-body); opacity:.84; margin-top:7px; line-height:1.6; }
/* 로그인 — 한 줄기로 내려온다: 로고 → 인사 → 칸 → 버튼 → 안내 → ©.
   간격은 저울(s1 6 · s2 10 · s3 18 · s4 26 · s5 34)만 쓴다.
   (2026-09-18 대표 지적: 「로그인 화면 간격·위치가 제대로 안 되어 있다」) */
.login-pn{
  flex:none; width:368px; display:flex; flex-direction:column; justify-content:center;
  padding:var(--s5) 40px; overflow-y:auto;
}
/* 세로가 모자라면 가운데 정렬이 위를 잘라낸다 — 그때는 위에서부터 흐르게 둔다. */
@media (max-height:640px){ .login-pn{ justify-content:flex-start; } }
.login-pn .ymlogo{ width:132px; margin:0 0 var(--s4); }
.welcome{ margin-bottom:var(--s4); }
.welcome .w1{ font-size:calc(23px * var(--tsc)); font-weight:800; letter-spacing:-0.04em; }
.welcome .w2{ font-size:var(--t-body); color:var(--ink-3); margin-top:var(--s1); line-height:1.6; }
/* 로그인은 **결정이 하나뿐인 화면**이라 버튼이 칸과 같은 폭으로 선다(330 상한 없음). */
.login-pn .btn.full{ max-width:none; margin-top:var(--s2); }
.hint{ font-size:var(--t-body); color:var(--ink-3); margin-top:var(--s3); line-height:1.6; }
.foot{ font-size:var(--t-lbl); color:var(--ink-3); margin-top:var(--s5); }
/* 좁으면 사진을 감춘다. 글자는 가운데로 몰지 않는다 — 칸 이름이 칸과 어긋나 보인다. */
@media (max-width:839.98px){
  .hero-pn{ display:none; }
  .login-pn{
    flex:1; width:auto; padding:var(--s5) var(--pad-x) var(--s4);
    align-items:stretch; text-align:left;
  }
  .login-pn > *{ width:100%; max-width:360px; margin-left:auto; margin-right:auto; }
  .login-pn .ymlogo{ width:120px; margin:0 auto var(--s4); }
  .welcome{ text-align:center; }
  .foot{ text-align:center; }
}
@media (min-width:1200px){ .login-pn{ width:460px; padding:var(--s5) 60px; } }

/* 시작조차 못 했을 때 — 화면 한가운데 한 장 */
.bootfail{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:var(--pad-top) var(--pad-x);
}

/* ── 카드 ────────────────────────────────────────────────────
   카드는 **서로 다른 결정·서로 다른 이야기**를 가를 때 쓴다.
   같은 성격의 줄이 이어지는 목록에는 쓰지 않는다(그러면 아무것도 안 갈린다).
   한 화면에 표·그래프·요약이 줄줄이 이어지면 어디까지가 한 이야기인지
   눈이 못 가른다 — 그때가 카드를 쓸 자리다. (2026-09-18 대표 지적) */
.card{
  background:var(--surface, var(--bg));
  border-radius:var(--r-lg);
  padding:var(--s3);
  margin-bottom:var(--s2);
  box-shadow:0 1px 2px rgba(40,32,22,.05), 0 6px 16px rgba(40,32,22,.05);
}
.card > .lbl:first-child,
.card > .k:first-child{ margin-top:0; }
.card > *:last-child{ margin-bottom:0; }
/* 카드가 곧 한 줄인 경우(눈에 띄는 것) — 제목과 설명이 붙어 나오지 않게 한다 */
.card > .nb b{ display:block; font-size:var(--t-name); font-weight:700; letter-spacing:-0.02em; }
.card > .nb span{ display:block; font-size:var(--t-body); color:var(--ink-3); margin-top:var(--s1); line-height:1.6; }
/* 카드 안의 블록은 자기 밑줄을 그리지 않는다 — 카드 테두리가 이미 가른다 */
.card > .blk:last-child,
.card > .duo{ border-bottom:0; }
.card > .blk{ padding-top:0; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .card{
    background:#191512;
    box-shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] .card{
  background:#191512;
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.4);
}

/* 서로 대등한 짧은 카드는 넓은 화면에서 나란히 선다.
   한 장씩 세로로 쌓으면 오른쪽이 통째로 빈다. (2026-09-18 대표 지적) */
.cardrow{ display:grid; gap:var(--s2); }
@media (min-width:840px){ .cardrow{ grid-template-columns:repeat(3, 1fr); } }
/* 상세 열은 화면보다 좁다 — 거기서는 둘까지만 편다. (2026-09-18 전수조사) */
@media (min-width:840px){ .pn.det .cardrow{ grid-template-columns:repeat(2, 1fr); } }
.cardrow > .card{ margin-bottom:0; }

/* ══ 짚으면 뜨는 값 — 그래프 공용 ═══════════════════════════════
   그래프는 모양만 말한다. 짚은 자리의 숫자는 그 자리에서 떠야 한다.
   매출 화면만의 것이 아니므로 셸이 갖는다. (2026-09-18) */
.ctip{
  position:absolute; transform:translateX(-50%); z-index:4; pointer-events:none;
  background:var(--ink); color:var(--bg);
  padding:7px 11px; border-radius:var(--r-sm);
  font-size:var(--t-lbl); line-height:1.35; text-align:center; white-space:nowrap;
  box-shadow:0 6px 18px rgba(40,32,22,.18);
}
.ctip b{ display:block; font-weight:800; font-variant-numeric:tabular-nums; }
.ctip span{ display:block; opacity:.72; }

/* ══ 떠오르는 작은 메뉴 ════════════════════════════════════════════
   버튼 하나로 여러 갈래를 고를 때 쓴다(정렬 · 밝기 · 사람 메뉴).
   화면을 새로 열지 않고 그 자리에서 고른다. */
.menupop{
  position:absolute; right:0; top:calc(100% + 6px); z-index:60;
  min-width:186px; padding:6px;
  background:var(--bg); border-radius:var(--r-md);
  outline:1px solid var(--hair); box-shadow:0 12px 32px rgba(40,32,22,.16);
  display:flex; flex-direction:column; gap:2px;
  animation:popIn .14s var(--e-out, ease) both;
}
@keyframes popIn{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
.menuit{
  border:0; background:none; color:var(--ink); font-family:inherit;
  text-align:left; padding:11px 12px; border-radius:var(--r-sm);
  font-size:var(--t-body); font-weight:600;
}
.menuit:hover{ background:var(--fill); }
.menuit.on{ background:var(--band); color:var(--accent); font-weight:700; }
.menupop hr{ border:0; border-top:1px solid var(--hair); margin:5px 2px; }
.menukey{ font-size:var(--t-lbl); color:var(--ink-3); font-weight:600; padding:8px 12px 4px; }
.menuit.danger{ color:var(--err); }

/* 아이콘으로 고르는 한 줄(밝기 · 손잡이) */
.iconrow{ display:flex; gap:6px; padding:2px 4px 6px; }
.iconpick{
  flex:1; border:0; background:var(--fill); color:var(--ink-2); font-family:inherit;
  border-radius:var(--r-sm); padding:10px 4px 8px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.iconpick svg{ width:19px; height:19px; }
.iconpick em{ font-style:normal; font-size:calc(10.5px * var(--tsc)); font-weight:600; }
.iconpick.on{ background:var(--accent); color:var(--on-accent); }

/* ══ 영상 머리 — 레일을 영상 **위에** 얹는다 ═══════════════════════
   (2026-09-19 대표 지시: 「폴드일 경우에 우측 내비게이션 바 때문에 흰색이 생기는데
    그 부분을 영상으로 채워 줬으면 좋겠어」)

   레일의 모양·아이콘·사람 동그라미는 한 개도 바꾸지 않는다. **자리만** 띄워
   (absolute) 영상 위로 올린다. 그러면 목록 열이 앱 폭을 통째로 쓰게 되고,
   히어로가 되무는 여백이 곧 전체 폭이 되어 영상이 레일 뒤까지 이어진다.
   레일이 비운 자리는 목록 열의 여백으로 되돌려 준다 — 글은 레일 밑으로 안 들어간다.
   손잡이를 바꿔도 **레일만** 옮겨 간다(영상은 그대로다). */
@media (min-width:840px) and (max-width:1199.98px){
  html[data-hero]{ --rail-edge-w:var(--rail-w); }
}
@media (min-width:1200px){
  html[data-hero]{ --rail-edge-w:var(--rail-wide); }
}
@media (min-width:840px){
  html[data-hero] .app > .rail{
    position:absolute; z-index:20;
    top:0; bottom:0; left:0; right:auto;
    background:none; border-right:0;
  }
  html[data-hero][data-hand="right"] .app > .rail{ left:auto; right:0; }
  html[data-hero] .pn{ padding-left:calc(var(--pad-x) + var(--rail-edge-w)); }
  html[data-hero][data-hand="right"] .pn{
    padding-left:var(--pad-x);
    padding-right:calc(var(--pad-x) + var(--rail-edge-w));
  }
}
/* PC 레일은 손잡이를 쓰지 않는다 — 늘 왼쪽이다(위 규칙의 order:0 !important 와 같은 뜻) */
@media (min-width:1200px){
  html[data-hero][data-hand="right"] .app > .rail{ left:0; right:auto; }
  html[data-hero][data-hand="right"] .pn{
    padding-left:calc(var(--pad-x) + var(--rail-wide));
    padding-right:var(--pad-x);
  }
}

/* ══ PC 홈 — 영상 위에 뜬 레일의 대비 ═════════════════════════════
   (2026-09-20 대표 지적: 「맑은 하늘·잔디 위에서 가게·매출·근태 글자가 묻힌다」
    → 「레일 전체가 회색 판이 됐다」)

   레일 전체를 한 번에 전환하면 안 된다. 같은 순간에도 위쪽 「가게」는 영상 위에,
   아래쪽 사용자 정보는 대시보드 위에 있다. 그래서 **항목별**로 갈린다 —
   전체 높이를 덮던 그라데이션 막(::before)은 없애고, 버튼의 **기존 알약 영역 안에만**
   어두운 막을 둔다. 흐림은 더하지 않는다.

   상태는 home-hero.js : scrollState() 가 항목마다 재어 data-surface 로 붙인다.
     data-surface="hero"     그 항목 뒤가 영상   → 흰 글자(막 없음, 글자에 그림자)
     data-surface="content"  그 항목 뒤가 대시보드 → 본디 글자색, 막 없음

   ※ 2026-09-20 대표 지적으로 **어두운 막을 뺀다.** 항목마다 막을 깔았더니
      검은 알약 넉 장이 다닥다닥 붙어 레일이 검은 덩어리로 보였다.
      「흰색에 선택된 것만 강조」가 대표 지시다. 그래서 읽힘은 막이 아니라
      **글자·아이콘 그림자**로 지킨다 — 선택된 알약(.rl-i.on)만 배경을 갖는다.
   홈을 떠나면 속성이 지워지므로 이 규칙은 저절로 꺼진다.

   적용은 ≥1200px PC 홈뿐이다 — 폴드 알약과 좁은 기기 하단 내비는 그대로 둔다.
   레일의 위치·폭·선택 알약(.rl-i.on)·사람 동그라미 모양·크기·패딩은 한 개도 바꾸지 않는다.
   (설계자 Codex 값 그대로) */
@media (min-width:1200px){
  html[data-hero] .app > .rail{
    /* 막을 레일 제 층 안에 가둔다 — 영상 뒤로 내려가지 않게 */
    isolation:isolate;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  /* 레일 전체를 덮던 막은 없앤다 — 회색 판의 정체였다 */
  html[data-hero] .app > .rail::before{ content:none; }

  /* ── 항목 하나하나 ── */
  .rail .rl-i:not(.on)[data-surface="hero"]{
    color:#FFF; background:transparent; transition:none;
    /* 막 대신 그림자 — 밝은 하늘·잔디 위에서도 글자와 아이콘이 뜬다 */
    text-shadow:0 1px 3px rgba(12, 10, 8, .72), 0 0 10px rgba(12, 10, 8, .38);
  }
  .rail .rl-i:not(.on)[data-surface="hero"] svg{
    filter:drop-shadow(0 1px 3px rgba(12, 10, 8, .72)) drop-shadow(0 0 10px rgba(12, 10, 8, .38));
  }
  /* 누를 때만 옅게 — 평소에는 아무 판도 없다 */
  .rail .rl-i:not(.on)[data-surface="hero"]:hover{ background:rgba(255, 255, 255, .14); }
  .rail .rl-i:not(.on)[data-surface="content"]{
    color:var(--ink-2); background:transparent; transition:none;
  }
  .rail .rl-i:not(.on)[data-surface="content"]:hover{ background:var(--fill); }
  .rail .rl-i:not(.on)[data-surface] em{ opacity:1; }
  .rail .rl-i[data-surface="hero"]:focus-visible{ outline:2px solid #FFF; outline-offset:3px; }
  .rail .rl-i[data-surface="content"]:focus-visible{
    outline:2px solid var(--ink); outline-offset:3px;
  }

  /* ── 레일 하단 사람 — 독립적으로 판정한다 ──
     크기·패딩·동그라미는 그대로다. 막만 알약 자리에 깐다. */
  .railfoot[data-surface="hero"] .userblk{
    background:transparent; transition:none;
    text-shadow:0 1px 3px rgba(12, 10, 8, .72), 0 0 10px rgba(12, 10, 8, .38);
  }
  .railfoot[data-surface="hero"] .ub-who b{ color:#FFF; }
  .railfoot[data-surface="hero"] .ub-who span{ color:rgba(255, 255, 255, .85); }
  .railfoot[data-surface="hero"] .ub-cog{ color:#FFF; }
  .railfoot[data-surface="hero"] .ub-cog svg{
    filter:drop-shadow(0 1px 3px rgba(12, 10, 8, .72)) drop-shadow(0 0 10px rgba(12, 10, 8, .38));
  }
  .railfoot[data-surface="hero"] .userblk:focus-visible{
    outline:2px solid #FFF; outline-offset:3px;
  }
  .railfoot[data-surface="content"] .userblk{ background:transparent; transition:none; }
  .railfoot[data-surface="content"] .ub-who b{ color:var(--ink); }
  .railfoot[data-surface="content"] .ub-who span{ color:var(--ink-2); }
  .railfoot[data-surface="content"] .ub-cog{ color:var(--ink-2); }
  .railfoot[data-surface="content"] .userblk:focus-visible{
    outline:2px solid var(--ink); outline-offset:3px;
  }
}

/* ══ 윗부분 — 모든 화면 같다 ═══════════════════════════════════
   상단 바(로고 줄 + 「가게 · 메뉴 — …」 제목 줄)는 **어느 화면에도 두지 않는다.** 제목은 화면 안 머리
   (작은 「양미관」 · 큰 탭 이름 · 밑줄 탭)가 말한다. PC 에서는 + 와 확정 버튼(취소·저장)만 오른쪽 위에 뜬다.
   예전에는 매출(figma-sales.css) · 가게(store-kit noTopbar) · 사장 홈(data-hero)이 **각자** 끄고 있어서
   화면마다 윗부분과 폴드 내비 위치가 달랐다. 이제 셸 한 곳만 정한다 — 화면 CSS 는 셸 요소를 건드리지 않는다.
   (2026-09-23 대표: 「네비게이션바는 좀 공통되게 관리 불가해? 버튼 추가될 때만 로직 추가되면 되잖아」)
   떠 있는 자리 값은 매출이 쓰던 figma-sales.css 값을 그대로 옮겼다. */
.app .topmark{ display:none; }
.app #topBanner:empty{ display:none; }
@media (min-width:1200px){
  .app .tbar{ display:none; }
  .app .tbar:has(#tbarAction:not([hidden])){ display:flex; position:absolute; right:32px; top:58px; left:auto; height:38px; padding:0; z-index:20; border:0; background:none; }
  .app .tbar:has(.abar){ display:flex; position:absolute; right:32px; top:52px; left:auto; height:auto; padding:0; z-index:20; border:0; background:none; }
  .app .tbar:has(.abar) #tbarAction{ display:none; }
  .app .tbar > :not(#tbarAction):not(.abar){ display:none; }
  /* PC + — 셸 공통 38 원 accent/on-accent · 아이콘 20 (2026-09-23 Codex 확정: 화면별 예외 금지) */
  .app #tbarAction{ width:38px; height:38px; padding:0; border:0; border-radius:999px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; }
  .app #tbarAction svg{ width:20px; height:20px; }
}