/* SUIT Variable 자체 제공(부장 11-09): 외부 CDN(jsdelivr) 의존·연결 시간 제거. 글꼴 파일은 서비스 워커가 따로(kp-font-v1) 저장해 배포해도 다시 안 받음. 라이선스 OFL(SUIT, sun-typeface) */
@font-face{font-family:'SUIT Variable';font-weight:100 900;font-display:swap;src:url('/fonts/SUIT-Variable-s1.woff2') format('woff2-variations'),url('/fonts/SUIT-Variable-s1.woff2') format('woff2')}
:root{
  --brand-navy:#16213e;--brand-gold:#efc07b;--white:#fff;--black:#000;--on-navy:var(--white);--on-navy-2:rgba(255,255,255,.74);--paper-line:rgba(22,33,62,.2); /* 로고 색(밝게·어둡게에서 값이 안 변함). 가게 컴퓨터 화면도 base.css를 읽으므로 여기에 둔다 */
  --font:"SUIT Variable",SUIT,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --bg:#fff;
  
  
  --btn:var(--primary,#16213e);
  /* 오류 색은 --danger 하나(11-12 디자인 최종 확정본 2절). 밝게 #b93a32(흰 5.65·바탕 #edf0f6 4.95), 어둡게 #ff8a80(카드 #16213e 6.96). --red·--red-text는 옛 이름(같은 색) */
  --danger:#b93a32;--red:var(--danger);--red-text:var(--danger);
  --glass:var(--glass-bg,rgba(250,250,252,.8));--glass-filter:saturate(180%) blur(20px);
  /* ── 모션 한 벌(디자인 점검 부장 11-11, 규칙 표: 「Keepr 조직/모션 디테일 규칙 2026-11-11」) ──
     곡선 2개: 이즈 아웃 --ease-out 하나(나타남·눌림·켜짐·페이드 전부. --ease·--sheet-ease는 옛 이름, 같은 곡선) + 스프링 --spring 하나(시트 올라옴·스위치·라디오·뱃지·완료 체크, 넘침 1.5%)
     길이 3개: --t-micro 0.15s(눌림·포커스 링·색) · --t-base 0.25s(나타남·켜짐·토스트·체크·숫자) · --t-screen 0.35s(화면·시트·모달·전체 화면) · 페이드만 --t-fade 0.25s
     「모션 줄이기」면 motion.css가 길이를 0으로(이동 즉시), --t-fade만 0.2s(나타남·사라짐은 짧은 페이드) */
  --ease-out:cubic-bezier(.33,1,.68,1);--ease:cubic-bezier(.33,1,.68,1);--sheet-ease:cubic-bezier(.33,1,.68,1);
  --spring:cubic-bezier(.32,1.2,.42,1);
  --t-micro:150ms;--t-base:250ms;--t-screen:350ms;--t-fade:250ms;
  /* 자리 옮기는 움직임(탭 화면·탭 표시·선택 칸)만 따로: 처음에 몰리지 않고 고르게 흐르는 곡선(애플 기본 타이밍) + 0.4s (사장님 11-09 「이동하는 느낌」 확정, 탭 모션 끊김 노트) */
  --ease-move:cubic-bezier(.25,.1,.25,1);--t-move:400ms;
  --press:rgba(0,0,0,.05);--sheet:var(--bg-grouped);--scrim:rgba(0,0,0,.32);
  --sw-off:rgba(120,120,128,.16);
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000;
  
  --btn:var(--primary,#efc07b);--danger:#ff8a80;--glass:var(--glass-bg,rgba(22,22,23,.8));
  --press:rgba(255,255,255,.08);--sheet:var(--bg-grouped);--scrim:rgba(0,0,0,.56);
  
}}
:root[data-theme="dark"]{
  --bg:#000;
  
  --btn:var(--primary,#efc07b);--danger:#ff8a80;--glass:var(--glass-bg,rgba(22,22,23,.8));
  --press:rgba(255,255,255,.08);--sheet:var(--bg-grouped);--scrim:rgba(0,0,0,.56);
  
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;height:100%;word-break:keep-all;overflow-wrap:break-word;letter-spacing:-.01em}
body{margin:0;height:100%;overflow:hidden;font:400 17px/24px var(--font);color:var(--label);background:var(--bg-grouped);
  -webkit-font-smoothing:antialiased;word-break:keep-all;letter-spacing:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;touch-action:manipulation}
button:disabled{cursor:default}
input,textarea{font:400 17px/24px var(--font);color:var(--label);-webkit-user-select:text;user-select:text}
/* 글꼴 통일(디자인 점검 11-09): 브라우저가 따로 글꼴을 주는 요소도 --font를 물려받게. select는 기본이 Arial 13px였음(택배사 고르기) */
select,optgroup{font:inherit;color:inherit}
pre,code,kbd,samp{font-family:inherit}
b,strong{font-weight:700}
svg{display:block}
h1,h2,h3,p{margin:0}
/* 숫자 폭 고정. 뒤에 오는 font: 줄임 규칙이 이 값을 지워서(.rv·.hero-v·.pc-clock 등) 실제로는 안 먹고 있었음 → !important. SUIT는 11처럼 붙는 숫자를 당겨서 커닝도 끔 */
.num,.num *{font-variant-numeric:tabular-nums!important;font-kerning:none!important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* 뼈대 */
#app{position:fixed;inset:0;overflow:hidden;background:var(--bg-grouped)}
.view{position:absolute;inset:0;visibility:hidden}
.view.on{visibility:visible}
.page{position:absolute;inset:0;background:var(--bg-grouped);overflow:hidden;transition:transform var(--t-screen) var(--sheet-ease)}
.page.pushed{box-shadow:0 0 24px rgba(0,0,0,.08)}
.page.off-right{transform:translateX(100%)}
.page.off-left{transform:translateX(-30%)}
.shade{position:absolute;inset:0;background:var(--black);opacity:0;pointer-events:none;z-index:9;transition:opacity var(--t-fade) var(--ease)}
.page.off-left .shade{opacity:.08}
.scroller{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding-top:calc(var(--st) + 44px);padding-bottom:calc(var(--sb) + 49px + 32px)}
.page.no-tab .scroller{padding-bottom:calc(var(--sb) + 32px)}
.page.has-act .scroller{padding-bottom:calc(var(--sb) + 136px)}
.ptr-wrap{position:relative}

/* 내비게이션 막대 */
.nav{position:absolute;top:0;left:0;right:0;z-index:5;height:calc(var(--st) + 44px);padding-top:var(--st);pointer-events:none}
.nav>*{pointer-events:auto}
.nav-bg{position:absolute;inset:0;background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);opacity:0;transition:opacity var(--t-fade) var(--ease);pointer-events:none}
.nav-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.5px;background:var(--sep)}
.collapsed .nav-bg{opacity:1}
.nav-title{position:absolute;left:96px;right:96px;bottom:0;height:44px;display:flex;align-items:center;justify-content:center;font:600 17px/24px var(--font);white-space:nowrap;overflow:hidden;
  opacity:0;transform:translateY(10px);filter:blur(4px);pointer-events:none;
  transition:opacity var(--t-fade) var(--ease),filter var(--t-base) var(--ease-out),transform var(--t-screen) var(--ease-out)}
.collapsed .nav-title,.inline .nav-title{opacity:1;transform:none;filter:none}
.nav-back{position:absolute;left:0;bottom:0;height:44px;min-width:44px;max-width:45%;padding:0 8px 0 4px;display:flex;align-items:center;color:var(--blue);font:400 17px/24px var(--font);white-space:nowrap;overflow:hidden;transition:opacity var(--t-fade) var(--ease)}
.nav-back svg{width:28px;height:28px;flex:none;stroke-width:2.2}
.nav-back span{overflow:hidden;text-overflow:ellipsis;margin-left:-4px}
.nav-act{position:absolute;right:4px;bottom:0;width:44px;height:44px;display:grid;place-items:center;color:var(--blue);transition:opacity var(--t-fade) var(--ease)}
.nav-act svg{width:24px;height:24px;stroke-width:1.8}
.nav-back.pressing,.nav-act.pressing{opacity:.35;transition-duration:var(--t-micro)}

/* 큰 제목 */
.lt{padding:3px 16px 8px 15px;font:700 34px/41px var(--font)}
.lt-sub{padding:0 16px;font:400 15px/22px var(--font);color:var(--label-2)}
/* 탭 첫 화면은 큰 제목 대신 위 가운데 작은 제목(17px)으로 통일 — 사장님 결정 11-09, 디자인 점검 #5. 하위 화면은 그대로 */
/* (보강) 큰 제목을 쓰던 하위 화면(연락방)도 같은 규칙 — 모든 화면이 위 가운데 작은 제목 하나 */
.page .lt{display:none}
.page .nav-title{opacity:1;transform:none;filter:none}
.page .lt+.lt-sub{padding-top:4px}
.sentinel{height:1px;margin-top:-1px}

/* 섹션·그룹 */
.sec{margin-top:32px}
.sec.first{margin-top:24px}
.inline .sec.first{margin-top:16px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 32px 8px;font:400 13px/20px var(--font);color:var(--label-2)}
.sec-f{padding:8px 32px 0;font:400 13px/19px var(--font);color:var(--label-2)}
.group{position:relative;margin:0 16px;background:var(--cell);border-radius:12px;overflow:hidden}

/* 행 */
.row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 16px;text-align:left;transition:background-color var(--t-base) var(--ease)}
button.row.pressing,.todo.pressing{background:var(--press);transition-duration:var(--t-micro)}
.group>.row:not(:last-child)::after,.group>.todo:not(:last-child)::after{content:"";position:absolute;left:var(--sep-l,16px);right:0;bottom:0;height:.5px;background:var(--sep)}
.row.has-icon{--sep-l:56px}
.row.has-av{--sep-l:60px}
.row.has-dot{--sep-l:36px}
/* 11-12 확정본 3절: 한 줄 행 48 = 위 12 + 글자 24 + 아래 12 (전 46) */
.main{flex:1;min-width:0;display:flex;flex-direction:column;padding:12px 0}
.row.two .main{padding:10px 0}
.rt{font:400 17px/24px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt.w{white-space:normal}
.rs{margin-top:4px;font:400 13px/16px var(--font);color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv{font:400 17px/24px var(--font);color:var(--label-2);white-space:nowrap;flex:none}
.rv.strong{color:var(--label)}
.chev{width:8px;height:14px;flex:none;color:var(--label-3);stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rv+.chev,.badge+.chev{margin-left:-6px}
.ricon{width:28px;height:28px;border-radius:8px;background:var(--fill-3);display:grid;place-items:center;flex:none;color:var(--label)}
.ricon svg{width:18px;height:18px}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--blue);font:600 13px/20px var(--font);text-align:center;flex:none}
.udot{width:8px;height:8px;border-radius:4px;background:var(--blue);flex:none;transition:opacity var(--t-fade) var(--ease),transform var(--t-base) var(--ease-out)}
.udot.read{opacity:0;transform:scale(.5)}
.av{width:32px;height:32px;border-radius:16px;background:var(--fill-3);display:grid;place-items:center;font:600 13px/1 var(--font);flex:none;color:var(--label)}
.av.lg{width:60px;height:60px;border-radius:30px;font-size:22px}
.avs{display:flex;flex:none}
.avs .av{box-shadow:0 0 0 2px var(--cell)}
.avs .av+.av{margin-left:-8px}
/* 묶음 C(디자인 점검 #4·#11, 11-09) — js는 안 건드리고 css로만
   근무 중인 사람이 없으면 빈 얼굴 자리 때문에 글자가 12px 밀리고 구분선이 60px에서 시작하던 것 → 얼굴이 없을 땐 다른 줄과 같은 16px 시작선 */
.avs:empty{display:none}
.row.has-av:has(.avs:empty){--sep-l:16px}
/* 로그아웃은 다른 화면으로 가는 줄이 아니라 바로 실행되는 줄 → 꺾쇠(›) 없음 */
.row[data-act="logout"] .chev{display:none}

/* 큰 칸(히어로) */
.hero{padding:20px 16px 16px}
.hero-k{font:600 13px/19px var(--font);color:var(--label-2)}
.hero-v{margin-top:4px;font:700 28px/34px var(--font);display:flex;align-items:baseline;gap:2px}
.hero-v small{font:600 17px/24px var(--font);color:var(--label-2)}
.hero-s{margin-top:4px;font:400 15px/22px var(--font);color:var(--label-2);text-wrap:balance}
.hero .btn{margin-top:20px}
.profile{display:flex;align-items:center;gap:16px;padding:16px}
.profile h2{font:700 22px/28px var(--font)}
.profile p{margin-top:2px;font:400 15px/22px var(--font);color:var(--label-2)}