/* 전체 화면(로그인·가입·가게 컴퓨터·알림 미리보기) */
.scr{position:absolute;inset:0;z-index:85;overflow-y:auto;overflow-x:hidden;background-color:var(--page-top);background-image:var(--page-bg);
  transition:transform var(--t-screen) var(--sheet-ease),opacity var(--t-fade) var(--ease)}
.scr.off-right{transform:translateX(100%)}
.scr.off-left{transform:translateX(-30%)}
.scr.leaving{opacity:0;pointer-events:none}
.scr-in{position:relative;min-height:100%;display:flex;flex-direction:column;max-width:480px;margin:0 auto;padding:calc(var(--st) + 44px) 0 calc(var(--sb) + 24px)}
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 32px}
.welcome .wordmark{height:30px;margin-top:24px}
.tagline{margin-top:12px;font:400 17px/24px var(--font);color:rgba(255,255,255,.66);text-wrap:balance}
.welcome-acts{display:grid;gap:12px;padding:0 16px}
.btn.moon{background:linear-gradient(180deg,#f3cf98 0%,var(--brand-gold) 100%);color:var(--brand-navy);box-shadow:0 8px 24px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ghost{background:rgba(255,255,255,.1);color:var(--on-navy);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2)}
.proto-link{display:block;width:100%;height:44px;font:400 13px/19px var(--font);color:rgba(255,255,255,.42);text-align:center}
.scr:not(.night) .proto-link{color:var(--label-3)}
.pend-moon{width:72px;height:72px;border-radius:50%;background:var(--brand-gold);
  -webkit-mask:radial-gradient(circle 30px at 70% 30%,transparent 98%,#000 100%);mask:radial-gradient(circle 30px at 70% 30%,transparent 98%,#000 100%);animation:launchIn 900ms var(--ease-out) both}
.pend-t{margin-top:28px;font:700 28px/34px var(--font)}
.scr-x{position:absolute;top:calc(var(--st) + 8px);right:16px;z-index:2;width:44px;height:44px;border-radius:22px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:var(--on-navy);transition:transform var(--t-base) var(--ease-out)}
.scr-x svg{width:18px;height:18px;stroke-width:2.2}
.scr-x.pressing{transform:scale(.9);transition-duration:var(--t-micro)}

/* 서류·서명 */
.doc-paper{padding:16px;font:400 15px/24px var(--font);white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.doc-sig{display:block;width:240px;max-width:calc(100% - 32px);margin:16px auto;background:var(--white);border-radius:8px;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
/* 가게 컴퓨터 연결 */
.pair-url .rt{font:400 15px/22px var(--font);overflow-wrap:anywhere}
.pair-acts{display:flex;flex:none;margin-right:-12px}
.pair-acts button{width:44px;height:44px;display:grid;place-items:center;color:var(--blue);transition:opacity var(--t-micro) var(--ease)}
.pair-acts button svg{width:22px;height:22px}
.pair-acts button.pressing{opacity:.35;transition-duration:var(--t-micro)}

/* 잠금화면 알림 미리보기 */
.scr.lock{background-image:radial-gradient(120% 80% at 75% 5%,#0f3460 0%,#0f3460 38%,#1a1a2e 100%)}
.lock-in{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:calc(var(--st) + 40px) 12px calc(var(--sb) + 24px)}
.lock-date{font:600 20px/25px var(--font);color:rgba(255,255,255,.85)}
.lock-time{margin-top:4px;font:700 96px/1 var(--font);color:rgba(255,255,255,.95)}
.notifs{width:100%;max-width:440px;margin-top:auto;display:grid;gap:8px}
.notif{display:flex;gap:12px;width:100%;padding:14px;border-radius:24px;text-align:left;color:var(--on-navy);background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2);transition:transform var(--t-micro) var(--ease-out)}
.notif>div{flex:1;min-width:0}
.notif .bicon,.banner .bicon{box-shadow:none;border-radius:9px}
.n-top{display:flex;justify-content:space-between;gap:8px;font:600 15px/22px var(--font)}
.n-top span{font:400 13px/19px var(--font);color:rgba(255,255,255,.6);flex:none}
.notif p{margin-top:2px;font:400 15px/22px var(--font);color:rgba(255,255,255,.86)}
.notif.dim{opacity:.7}
.lock-hint{margin-top:16px;font:400 13px/19px var(--font);color:rgba(255,255,255,.55)}

/* 앱 안 위쪽 알림 띠 */
.banner{position:absolute;left:8px;right:8px;top:calc(var(--st) + 8px);z-index:65;display:flex;gap:12px;padding:12px 14px;border-radius:24px;text-align:left;
  background:var(--sheet-glass);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:var(--rim),0 16px 40px rgba(22,33,62,.22);
  transform:translateY(calc(-100% - var(--st) - 16px));transition:transform var(--t-screen) var(--sheet-ease)}
.banner.on{transform:none}
.banner>div{flex:1;min-width:0}
.banner b{display:block;font:600 15px/22px var(--font)}
.banner span{display:block;margin-top:2px;font:400 15px/22px var(--font);color:var(--label-2)}
@media (min-width:600px){.banner{left:auto;right:16px;width:380px}}

/* ════════ v6 · 처음 화면 = 시안 C「움직이는 빛」(사장님 선택 11-08) ════════ */
.glow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.glow i{position:absolute;border-radius:50%;filter:blur(56px);will-change:transform}
.glow i:nth-child(1){width:320px;height:320px;left:-96px;top:64px;background:rgba(15,52,96,.30);animation:g1 18s var(--ease) infinite alternate}
.glow i:nth-child(2){width:280px;height:280px;right:-88px;top:216px;background:rgba(239,192,123,.55);animation:g2 22s var(--ease) infinite alternate}
.glow i:nth-child(3){width:240px;height:240px;left:64px;top:360px;background:rgba(22,33,62,.16);animation:g3 20s var(--ease) infinite alternate}
.glow::after{content:"";position:absolute;inset:0;background:rgba(245,245,247,.32)}
@keyframes g1{to{transform:translate(96px,64px) scale(1.12)}}
@keyframes g2{to{transform:translate(-80px,-48px) scale(.92)}}
@keyframes g3{to{transform:translate(48px,-96px) scale(1.08)}}
.intro-in{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;max-width:480px;margin:0 auto;padding:calc(var(--st) + 59px) 16px 0}
.intro .hero-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:32px;transition:transform var(--t-screen) var(--ease-out)}
.intro .bicon{box-shadow:none;border-radius:22.4%}
.intro .wm-wrap{margin-top:24px;line-height:0}
.intro .wordmark{width:104px;height:auto;overflow:visible;transform:none}
.intro .wm-ko{margin-top:4px;font:400 13px/19px var(--font)}
.intro .tag{margin-top:12px;font:400 17px/24px var(--font)}
.intro .acts{display:flex;flex-direction:column;gap:12px;padding-bottom:6px}
.intro .acts .btn{height:52px;border-radius:12px;box-shadow:none}
.intro .btn.b2{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.intro .proto-link{color:rgba(60,60,67,.3);margin-top:-12px}
/* 열림 연출: 아이콘만 화면 한가운데 0.7초 → 0.35초 감속으로 제자리, 로고 60ms·설명 120ms·버튼 180ms 늦게 */
.intro .wordmark,.intro .wm-ko,.intro .tag,.intro .acts{transition:opacity var(--t-fade) var(--ease-out),transform var(--t-screen) var(--ease-out)}
.intro .wordmark{transition-delay:60ms}.intro .wm-ko,.intro .tag{transition-delay:120ms}.intro .acts{transition-delay:180ms}
.intro.splash .wordmark,.intro.splash .wm-ko,.intro.splash .tag{opacity:0;transform:translateY(8px);transition:none}
.intro.splash .acts{opacity:0;transform:translateY(12px);transition:none}
.intro.splash .hero-c{transform:translateY(var(--dy,0px));transition:none}
.launch.intro{gap:0;padding-bottom:0}
.launch.intro>*:not(.glow){position:relative;z-index:1}
.launch.intro .bicon{box-shadow:none;animation:none}
.launch.intro .brand-name{margin-top:24px}
.launch.intro .wordmark{width:104px;height:auto;animation:launchIn 500ms var(--ease-out) 60ms both}
.launch.intro .brand-ko{margin-top:4px;font-weight:400;animation:launchIn 500ms var(--ease-out) 120ms both}
@media (prefers-reduced-motion:reduce){.glow i{animation:none!important}}

/* ════════ v7 · 하나의 기준(사장님 "처음부터 끝까지 통일, 애플 최신 유리") ════════
   색: 바탕 1 · 면 1 · 글자 3단 · 강조 1(밝음=남색 / 다크=달빛) · 주 버튼 1(밝음=검정 / 다크=흰색)
   둥글기: 8(작은 칸) · 12(버튼) · 16(시트 안 카드) · 24(카드) · 32(시트) · 알약 · 원
   그림자: 카드 1 · 떠 있는 것 1
   유리: 떠 있는 것(탭 막대·위 동그라미 버튼·시트·띠 알림·토스트)에만. 유리가 안 되는 브라우저는 단색으로 */
:root{
  --bg:#f5f5f7;--page-top:#f5f5f7;--bg-grouped:#f5f5f7;
  --surface:#fff;--cell:#fff;--cell-sheet:#fff;
  --label:#1d1d1f;--label-2:rgba(60,60,67,.72);--label-3:rgba(60,60,67,.3);
  --sep:rgba(60,60,67,.16);--fill-3:rgba(120,120,128,.12);--lens:rgba(120,120,128,.14);--press:rgba(0,0,0,.05);
  --blue:#0f3460;--focus:#0f3460;
  --primary:#16213e;--on-primary:#fff;
  --ck-bg:#0f3460;--ck-mark:#efc07b;--badge-bg:#efc07b;--badge-fg:#16213e;
  --glass-bg:rgba(255,255,255,.64);--glass-solid:#fbfbfd;--glass-blur:saturate(180%) blur(24px);
  --glass-edge:inset 0 0 0 .5px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.9);
  --sheet-glass:rgba(250,250,252,.92);
  --sh-card:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
  --sh-float:0 2px 8px rgba(0,0,0,.06),0 16px 40px rgba(0,0,0,.12);
  --r-ctl:8px;--r-btn:12px;--r-in:16px;--r-card:24px;--r-sheet:32px;--r-pill:999px;
  --seg-th:#fff;--sw-off:rgba(120,120,128,.16);--toast:rgba(29,29,31,.86);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1a1a2e;--page-top:#1a1a2e;--bg-grouped:#1a1a2e;
  --surface:#23233b;--cell:#23233b;--cell-sheet:#2c2c47;
  --label:#f5f5f7;--label-2:rgba(235,235,245,.6);--label-3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.5);--fill-3:rgba(118,118,128,.24);--lens:rgba(255,255,255,.12);--press:rgba(255,255,255,.08);
  --blue:#efc07b;--focus:#efc07b;--primary:#efc07b;--on-primary:#16213e;
  --ck-bg:#efc07b;--ck-mark:#16213e;--badge-bg:#efc07b;--badge-fg:#16213e;
  --glass-bg:rgba(40,40,66,.62);--glass-solid:#2c2c47;--glass-edge:inset 0 0 0 .5px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.08);
  --sheet-glass:rgba(30,30,52,.92);--sh-card:inset 0 0 0 .5px rgba(255,255,255,.06);--sh-float:0 16px 40px rgba(0,0,0,.5);
  --seg-th:#45456a;--sw-off:rgba(120,120,128,.32);--toast:rgba(52,52,82,.92);
}}
:root[data-theme="dark"]{
  --bg:#1a1a2e;--page-top:#1a1a2e;--bg-grouped:#1a1a2e;
  --surface:#23233b;--cell:#23233b;--cell-sheet:#2c2c47;
  --label:#f5f5f7;--label-2:rgba(235,235,245,.6);--label-3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.5);--fill-3:rgba(118,118,128,.24);--lens:rgba(255,255,255,.12);--press:rgba(255,255,255,.08);
  --blue:#efc07b;--focus:#efc07b;--primary:#efc07b;--on-primary:#16213e;
  --ck-bg:#efc07b;--ck-mark:#16213e;--badge-bg:#efc07b;--badge-fg:#16213e;
  --glass-bg:rgba(40,40,66,.62);--glass-solid:#2c2c47;--glass-edge:inset 0 0 0 .5px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.08);
  --sheet-glass:rgba(30,30,52,.92);--sh-card:inset 0 0 0 .5px rgba(255,255,255,.06);--sh-float:0 16px 40px rgba(0,0,0,.5);
  --seg-th:#45456a;--sw-off:rgba(120,120,128,.32);--toast:rgba(52,52,82,.92);
}

/* 바탕: 그라데이션 없이 한 색 */
html,body,#app,.page,.pick{background:var(--bg);background-image:none}
.page{background-color:var(--bg)}

/* 면(카드) */
.group,.card{background:var(--surface);background-image:none;box-shadow:var(--sh-card);border-radius:var(--r-card)}
.sheet .group{background:var(--cell-sheet);box-shadow:none;border-radius:var(--r-in)}
.ricon,.av,.step-n{background:var(--lens);background-image:none;box-shadow:none}
.ricon{border-radius:var(--r-ctl)}
.avs .av{box-shadow:0 0 0 2px var(--surface)}
.bicon{box-shadow:none}

/* 버튼: 주 버튼 1종 · 보조 1종 · 글자 버튼 1종 */
.btn{background:var(--primary);background-image:none;color:var(--on-primary);box-shadow:none;border-radius:var(--r-btn)}
.btn.sec{background:var(--lens);color:var(--label)}
.btn.plain{background:none;color:var(--blue)}
.btn.small{border-radius:var(--r-ctl)}
.btn.moon{background:var(--primary);color:var(--on-primary);box-shadow:none}
.btn.ghost{background:var(--glass-bg);color:var(--label);box-shadow:var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.done-screen .done-btn{background:var(--primary);background-image:none;color:var(--on-primary);box-shadow:none}

/* 작은 부품: 알약으로 통일 */
.seg,.stp,.stp button,.chip{border-radius:var(--r-pill)}
.seg{background:var(--lens)}
.seg-th{border-radius:var(--r-pill);background:var(--seg-th);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
.stp{background:var(--lens)}
.time-in{border-radius:var(--r-ctl);background:var(--lens)}
.chip[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
.badge,.tab .tb{background:var(--badge-bg);color:var(--badge-fg)}
.bar i{background:var(--blue)}
.done .ck{background:var(--ck-bg);box-shadow:inset 0 0 0 1.5px var(--ck-bg)}
.sw[aria-checked="true"]{background:var(--blue)}

/* 유리: 떠 있는 것에만 */
.tabbar,.nav-back,.nav-act,.weekbar button,.scr-x{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge),var(--sh-float);color:var(--label)}
.tabbar{border-radius:var(--r-pill)}
.tab-ind{background:var(--lens)}
.sheet,.banner{background:var(--sheet-glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge),0 24px 64px rgba(0,0,0,.2)}
.sheet{border-radius:var(--r-sheet)}
.sheet-x span{background:var(--lens);color:var(--label-2)}
.toast{background:var(--toast);box-shadow:var(--sh-float)}
.toast svg{color:var(--on-navy)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .tabbar,.nav-back,.nav-act,.weekbar button,.scr-x,.btn.ghost{background:var(--glass-solid)}
  .sheet,.banner{background:var(--glass-solid)}
  .toast{background:#1d1d1f}
}
@media (min-width:600px){.tabbar{border-radius:28px}.tab{border-radius:var(--r-btn)}}

/* 전체 화면들도 처음 화면(시안 C)과 같은 결: 밝은 바탕 + 흐르는 빛 */
.scr.night,.scr.intro{background:var(--bg)!important;background-image:none!important;color:var(--label)}
.night .wordmark,.intro .wordmark,.launch.intro .wordmark{color:var(--label)}
.tagline,.intro .tag,.intro .wm-ko,.night .brand-ko,.launch.intro .brand-ko{color:var(--label-2)}
.proto-link,.intro .proto-link{color:var(--label-3)}
.scr>.scr-in,.scr>.intro-in,.scr>.lock-in{position:relative;z-index:1}
.intro .btn.b1{background:var(--primary);color:var(--on-primary)}
.intro .btn.b2{background:var(--glass-bg);color:var(--label);box-shadow:var(--glass-edge)}
.launch.intro{background:var(--bg)!important}
/* 다크 모드에서도 빛은 그대로, 위 막만 어둡게 */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .glow::after{background:rgba(26,26,46,.5)}}
:root[data-theme="dark"] .glow::after{background:rgba(26,26,46,.5)}
/* 마감 완료 화면 */
.done-screen{background:var(--bg)!important;background-image:none!important;color:var(--label)}
.done-screen>.done-moon,.done-screen>.done-t,.done-screen>.done-s{position:relative;z-index:1}
.done-screen .done-btn{z-index:1}
.done-screen .done-s{color:var(--label-2)}
.done-screen .big-ck circle{stroke:var(--fill-3)}
.done-screen .big-ck path{stroke:var(--blue)}
/* 잠금화면 미리보기: 휴대폰 바탕화면이라 어둡게, 같은 빛 */
.scr.lock{background:#1a1a2e!important;background-image:none!important;color:var(--on-navy)}
.scr.lock .glow::after{background:rgba(0,0,0,.4)}
.scr.lock .scr-x{background:rgba(255,255,255,.14);color:var(--on-navy);box-shadow:none}
.notif{border-radius:var(--r-card)}
.banner{border-radius:var(--r-card)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0ms!important;animation-delay:0ms!important}}


.inv-qr{display:grid;justify-items:center;gap:8px;padding:12px 32px 0}
.inv-qr svg{width:176px;height:176px;border-radius:12px;background:var(--white)}
.inv-qr p{font:400 13px/19px var(--font);color:var(--label-2)}

/* 가로 근무표(52절): 이름 열 고정 + 요일 7칸, 칸 터치 44px 이상 */
.sch-wrap{margin:0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--cell);border-radius:12px}
.sch{border-collapse:separate;border-spacing:0;min-width:100%;table-layout:fixed}
.sch th,.sch td{padding:0;border-bottom:.5px solid var(--sep);text-align:center;font:400 12px/16px var(--font);color:var(--label)}
.sch thead th{height:44px;color:var(--label-2);font-weight:600}
.sch thead th span{display:block;font-weight:400}
.sch thead th.today{color:var(--blue)}
.sch .sch-n{position:sticky;left:0;z-index:1;width:76px;min-width:76px;max-width:76px;padding:0 8px;background:var(--cell);text-align:left;font:600 14px/20px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:.5px solid var(--sep)}
.sch tbody tr:last-child th,.sch tbody tr:last-child td{border-bottom:0}
.sch td{width:88px;min-width:88px;padding:0}
.sch-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:56px;padding:4px 2px;color:var(--label)}
.sch-c.on{background:var(--fill-3);border-radius:8px}
.sch-c span.draft::before{content:"";display:inline-block;width:5px;height:5px;margin-right:3px;border-radius:50%;background:var(--blue);vertical-align:middle}
.sch-sum td,.sch-sum th{height:40px;color:var(--label-2);font-weight:600}

/* 도움말·문의(시안 11-09): 새 부품 — .chat-note .bub-who .bub.ai .bub-acts .bub-meta .bub-read .ck-row */
.sp-msgs{display:flex;flex-direction:column;gap:8px;padding:8px 16px 120px}
.chat-note{align-self:center;max-width:90%;padding:6px 12px;border-radius:999px;background:var(--fill-3);font:400 13px/19px var(--font);color:var(--label-2);text-align:center}
.bub-who{margin:4px 0 -4px 4px;font:600 13px/19px var(--font);color:var(--label-2)}
.bub.ai{box-shadow:inset 0 0 0 1px var(--sep)}
.bub-acts{display:flex;gap:8px}
.bub-acts button{position:relative;height:36px;padding:0 16px;border-radius:18px;background:var(--cell);font:600 15px/22px var(--font);color:var(--label)}
.bub-acts button::before{content:"";position:absolute;inset:-4px 0}
.bub-meta{display:flex;flex-direction:column;align-items:flex-start}
.bub-read{font:600 11px/14px var(--font);color:var(--label-2)}
.bub-row.me .bub-meta{align-items:flex-end}
.sp-ph{display:block;margin-top:6px;padding:0;color:inherit;text-decoration:underline;font:400 14px/20px var(--font)}
.sp-pics{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sp-pics img{width:96px;height:96px;object-fit:cover;border-radius:10px}
.sp-solve{padding-top:4px}
.sp-steps{margin:0;padding:16px 20px 16px 40px;font:400 17px/26px var(--font);color:var(--label)}
.sp-steps li{padding:2px 0 2px 4px}
.sp-acts2{display:grid;gap:12px;padding:0 16px}
.sp-chips{padding:0 16px}
.sp-photos{display:flex;align-items:center;gap:8px;padding:0 16px}
.sp-photos .ph-strip{margin:0;order:0}
.sp-photos .ph-plus{order:1}
.sp-th{position:relative;width:56px;height:56px;flex:none}
.sp-th img{width:56px;height:56px;object-fit:cover;border-radius:10px}
.sp-th button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:11px;background:var(--label);color:var(--cell);font:600 14px/22px var(--font)}
.sp-new{color:var(--primary);font-weight:600}
.sp-st{color:var(--label-2)}
.ck-row{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:48px;padding:12px 16px;text-align:left}
.ck-row .ck{margin:-1px 0} /* 24짜리 동그라미를 22 높이 첫 줄 가운데에(위아래 -1) → 한 줄 체크 줄 48 */
.ck-row .main{display:flex;flex-direction:column;gap:2px;padding:0;min-height:0} /* 공통 .main의 위아래 12가 겹쳐 한 줄 체크 줄이 70이 되던 것(디자인 점검 N4) */
.ck-row .rt{font:400 15px/22px var(--font)}
.ck-row .rt b{font-weight:700}
.ck-row .rs{font:400 13px/20px var(--font);color:var(--label-2)}

/* ════════ v6 · 브랜드 반영 B안 (사장님 결정 2026-11-09, 디자인 점검 부장) ════════
   밝게: 색 없는 회색 바탕 → 아주 옅은 남색 / 어둡게: 검보라 → 로고 남색 + 카드 층 구분 / 첫 화면 대표 카드 하나만 로고 남색
   위쪽 테마 블록의 값을 같은 선택자로 다시 정해 덮는다 → 되돌리려면 이 블록만 지우면 됨.
   대비 계산·시안: Keepr 조직/화면 시안 - 브랜드 반영 2026-11-09.md */
:root{
  --brand-navy:#16213e;--brand-gold:#efc07b;
  --hero-bg:linear-gradient(160deg,#1c3768 0%,#13264b 100%);
  --bg:#e9eef6;--page-top:#eef2f8;--bg-grouped:#e9eef6;--page-bg:linear-gradient(180deg,#eef2f8 0%,#e6ebf4 55%,#e1e7f1 100%);
  --label:#16213e;--label-2:rgba(22,33,62,.7);--label-3:rgba(22,33,62,.3);
  --sep:rgba(22,33,62,.13);--fill-3:rgba(15,52,96,.08);--lens:rgba(15,52,96,.11);--press:rgba(15,52,96,.06);
  --sh-card:0 1px 2px rgba(22,33,62,.05),0 8px 24px rgba(22,33,62,.08);
  --glass-bg:rgba(255,255,255,.7);--toast:rgba(14,26,48,.9);--sw-off:rgba(15,52,96,.14);
  --chip-bg:rgba(15,52,96,.09);--chip-fg:#0f3460;--mark-bg:rgba(15,52,96,.07);
  --mark-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 22 17 13.500 27 22' stroke='%2316213e' stroke-opacity='.42'/%3E%3Cpath d='M28.700 5.700a4.600 4.600 0 1 0 3.600 7.100 3.900 3.900 0 0 1-3.600-7.100z' fill='%23c9953f'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#131c35;--page-top:#182446;--bg-grouped:#131c35;--page-bg:linear-gradient(180deg,#182446 0%,#131c35 45%,#101830 100%);
  --surface:#1d2a4c;--cell:#1d2a4c;--cell-sheet:#26355d;
  --label:#f3f5fa;--label-2:rgba(226,232,246,.7);--label-3:rgba(226,232,246,.32);
  --sep:rgba(150,170,210,.2);--fill-3:rgba(150,170,210,.16);--lens:rgba(239,192,123,.16);--press:rgba(255,255,255,.07);
  --sh-card:inset 0 0 0 .5px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(5,10,25,.3);
  --glass-bg:rgba(29,42,76,.7);--glass-solid:#26355d;--sheet-glass:rgba(24,36,70,.94);--seg-th:#34457a;--toast:rgba(38,53,93,.94);--sw-off:rgba(150,170,210,.28);
  --chip-bg:rgba(239,192,123,.14);--chip-fg:#efc07b;--mark-bg:rgba(255,255,255,.06);
  --mark-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 22 17 13.500 27 22' stroke='%23e2e8f6' stroke-opacity='.5'/%3E%3Cpath d='M28.700 5.700a4.600 4.600 0 1 0 3.600 7.100 3.900 3.900 0 0 1-3.600-7.100z' fill='%23efc07b'/%3E%3C/svg%3E");
}}
:root[data-theme="dark"]{
  --bg:#131c35;--page-top:#182446;--bg-grouped:#131c35;--page-bg:linear-gradient(180deg,#182446 0%,#131c35 45%,#101830 100%);
  --surface:#1d2a4c;--cell:#1d2a4c;--cell-sheet:#26355d;
  --label:#f3f5fa;--label-2:rgba(226,232,246,.7);--label-3:rgba(226,232,246,.32);
  --sep:rgba(150,170,210,.2);--fill-3:rgba(150,170,210,.16);--lens:rgba(239,192,123,.16);--press:rgba(255,255,255,.07);
  --sh-card:inset 0 0 0 .5px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(5,10,25,.3);
  --glass-bg:rgba(29,42,76,.7);--glass-solid:#26355d;--sheet-glass:rgba(24,36,70,.94);--seg-th:#34457a;--toast:rgba(38,53,93,.94);--sw-off:rgba(150,170,210,.28);
  --chip-bg:rgba(239,192,123,.14);--chip-fg:#efc07b;--mark-bg:rgba(255,255,255,.06);
  --mark-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 22 17 13.500 27 22' stroke='%23e2e8f6' stroke-opacity='.5'/%3E%3Cpath d='M28.700 5.700a4.600 4.600 0 1 0 3.600 7.100 3.900 3.900 0 0 1-3.600-7.100z' fill='%23efc07b'/%3E%3C/svg%3E");
}
/* 바탕: 위에서 아래로 한 번만 아주 옅게 진해짐(움직이지 않음) */
html,body,#app,.page,.pick{background-image:var(--page-bg)}
/* 아이콘 칩: 회색 → 브랜드색 */
.ricon{background:var(--chip-bg);color:var(--chip-fg)}
/* 빈 화면: 로고의 지붕·달 그림. 한 화면에 하나만(첫 번째 빈 화면에만) */
.empty::before{content:"";width:64px;height:64px;margin-bottom:12px;border-radius:22.4%;background:var(--mark-bg) var(--mark-img) center/36px 36px no-repeat}
.sec:has(.empty)~.sec .empty::before,.sheet .empty::before{display:none}
/* 대표 카드: 알바 「오늘」 첫 카드(출근 전·근무 중·마감 뒤)와 사장님 「홈」 「지금 매장」만 로고 남색.
   카드 안에서는 색 변수를 흰 글자·금색 버튼 쪽으로 다시 정해 안쪽 부품이 그대로 따라오게 한다 */
:is(.view[data-tab="today"] .group:has(>.hero),.view[data-tab="today"] .group:has(>.row [data-elapsed]),.view[data-tab="home"]>.page:first-child .content>.sec.first>.group){
  position:relative;overflow:hidden;background:var(--hero-bg);color:var(--on-navy);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(10,23,49,.2),0 14px 28px -8px rgba(10,23,49,.45);
  --label:#fff;--label-2:rgba(255,255,255,.74);--label-3:rgba(255,255,255,.42);--sep:rgba(255,255,255,.14);--fill-3:rgba(255,255,255,.14);--press:rgba(255,255,255,.08);
  --primary:#efc07b;--on-primary:#16213e;--blue:#efc07b;--focus:#efc07b;--cell:#182f5a;--chip-bg:rgba(255,255,255,.14);--chip-fg:#fff;--av-bg:rgba(255,255,255,.16)}
:is(.view[data-tab="today"] .group:has(>.hero),.view[data-tab="today"] .group:has(>.row [data-elapsed]),.view[data-tab="home"]>.page:first-child .content>.sec.first>.group)>*{position:relative}
/* 큰 문장이 있는 대표 카드에만 모서리에 지붕·체크 모양(10%). 숫자 줄이 있는 카드는 숫자와 겹쳐서 넣지 않음 */
.view[data-tab="today"] .group:has(>.hero)::before{content:"";position:absolute;right:-18px;top:-22px;width:132px;height:132px;opacity:.1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='none' stroke='%23fff' stroke-width='64' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M256 520 496 320 736 520'/%3E%3Cpath d='M372 664 454 746 628 572'/%3E%3C/svg%3E") center/contain no-repeat}

/* 고르기 줄(라디오): 고른 줄은 채운 체크+옅은 강조, 안 고른 줄은 빈 동그라미. 한 그룹에 하나만 */
.row.opt{gap:12px;transition:background-color var(--t-base) var(--ease)}
.row.opt .ck{transition:background-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.row.opt.done{background:var(--fill-3)}
.row.opt.done .ck path{stroke-dashoffset:0}
.pay-in{min-height:48px;padding:0 4px;border:0;background:transparent;text-align:right;font:400 17px/24px var(--font);color:var(--label)}
.pay-unit{flex:none;min-width:28px;text-align:left;color:var(--label-2)}

/* 오른쪽 채운 체크(네모 .sq): 설정 › 매장 24시간 영업 */
.rk{width:24px;height:24px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--label-3);display:grid;place-items:center;flex:none;margin-left:auto;transition:background-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.rk.sq{border-radius:7px}
.rk svg{width:14px;height:14px;stroke:var(--ck-mark);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rk path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset var(--t-base) var(--ease-out)}
.row.opt.done .rk{background:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
.row.opt.done .rk path{stroke-dashoffset:0}
.row.opt.done .rt{font-weight:600}
.time-in.op-t{min-height:44px;height:44px}

select.pay-in.sel{appearance:auto;-webkit-appearance:menulist;min-width:140px;max-width:200px;text-align-last:right;background:transparent}

.tag-auto{display:inline-block;font:400 11px/20px var(--font);color:var(--label-2);background:var(--fill-3);border-radius:var(--r-ctl,8px);padding:0 6px;vertical-align:top;margin-top:2px}

/* 도움말·문의 팝업: 시트 안에서 위(스크롤)·아래(고정 입력/버튼)로 나뉨 */
.sheet-body:has(.sp-wrap){overflow:hidden;padding-bottom:0;display:flex;flex-direction:column}
.sp-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.sp-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.sp-scroll .sp-msgs{padding-bottom:16px}
.sp-foot{flex:none;padding:16px 16px calc(var(--sb) + 16px);border-top:.5px solid var(--sep)}
.sp-foot .reason{margin:0 0 8px}
.sheet-back{position:absolute;left:8px;top:6px;width:44px;height:44px;display:grid;place-items:center}
.sheet-back span{width:30px;height:30px;border-radius:15px;background:var(--lens);display:grid;place-items:center;color:var(--label-2)}
.sheet-back svg{width:14px;height:14px;stroke-width:2.4}
.sheet:not(.full) .sp-wrap{display:block}
.sheet.full:has(.sp-wrap){height:min(90%,720px,calc(100% - var(--st) - 12px))}

/* 계약 조건 칩 줄 */
.tm-row .main{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.tm-chips{display:flex;flex-wrap:wrap;gap:8px}
.tm-need{font:400 13px/19px var(--font);color:var(--label-2)}
.tm-auto{align-self:flex-start;min-height:32px;padding:0 12px;border-radius:16px;background:var(--fill-3);font:500 13px/32px var(--font);color:var(--blue)}
.tm-warn{color:var(--label-2)}
.tm-row .err-in{margin:0}
.tm-row .err-in:empty{display:none}

/* 근무표 한 화면: 가로 스크롤 없이 이름 48px + 요일 7칸(375폭에서 약 46px). 320은 막대 색, 768+는 시간 전체 */
.sch-wrap{margin:0;border-radius:0;overflow:hidden}
@media(min-width:481px){.sch-wrap{margin:0 16px;border-radius:12px}}
.sch{width:100%;min-width:0;table-layout:fixed}
.sch .sch-n{width:48px;min-width:48px;max-width:48px;padding:0 4px;font:600 12px/16px var(--font)}
.sch td{width:auto;min-width:0}
.sch thead th{font-size:12px}
.sch thead th span{display:inline;margin-left:2px}
.sch-c{min-height:48px;gap:0;padding:2px 0;font:400 11px/14px var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.sch-c .t-l{display:none}
.sch-c .more{font-weight:600}
.sch-c .more::before{content:"";display:inline-block;width:5px;height:5px;margin-right:3px;border-radius:50%;background:var(--blue);vertical-align:middle}
.sch-c .no{font-size:11px}
.sch-c .lvt{font:600 10px/12px var(--font);color:var(--label-2)}
.sch-c.lv-wait{background:var(--fill-3);border-radius:8px;outline:1px dashed var(--label-3);outline-offset:-3px}
.sch-c.lv-ok{background:var(--fill-3);border-radius:8px}
@media(max-width:340px){
  .sch .sch-n{width:40px;min-width:40px;max-width:40px;padding:0 2px;font-size:11px}
  .sch-c.on .t-s,.sch-c.on .more{font-size:0}
  .sch-c.on .t-s::after,.sch-c.on .more::after{content:"";display:block;width:70%;height:8px;margin:0 auto;border-radius:4px;background:var(--primary,var(--blue))}
  .sch-c .more::before{display:none}
}
@media(min-width:700px){
  .sch .sch-n{width:64px;min-width:64px;max-width:64px;padding:0 8px;font-size:13px}
  .sch-c .t-s{display:none}.sch-c .t-l{display:flex;flex-direction:column;align-items:center;white-space:nowrap}.sch-c .t-l i{font-style:normal}.sch-c .t-l i+i::before{content:"~ "}
}

/* 급할 때 이 폰에서 QR */
.oq{display:flex;flex-direction:column;align-items:center;padding:8px 0 0}
.oq-qr{width:min(calc(100% - 48px),360px);aspect-ratio:1;background:var(--white);border-radius:16px;padding:12px;box-sizing:border-box}
.oq-qr svg{display:block;width:100%;height:100%}
.oq-ring{position:relative;width:44px;height:44px;margin-top:16px;display:grid;place-items:center}
.oq-ring svg{position:absolute;inset:0;width:100%;height:100%}
.oq-ring span{font:600 15px/20px var(--font);font-variant-numeric:tabular-nums}
.oq-note{margin:16px 24px 0;text-align:center;font:400 15px/22px var(--font);color:var(--label-2)}

.sp-diag{margin:0;padding:8px 16px 12px 36px;font:400 15px/22px var(--font);color:var(--label-2)}
.sp-diag em{font-style:normal;color:var(--label-2)}

/* 터치 44px: 보이는 크기는 그대로, 누르는 범위만 넓힘(칩·자동 채우기·사진 더하기) */
.tm-chips{gap:12px 8px}
.tm-chips .chip,.sp-chips .chip,.tm-auto{position:relative}
.tm-chips .chip::after,.sp-chips .chip::after,.tm-auto::after{content:"";position:absolute;inset:-6px -2px}
.sp-chips{gap:12px 8px}
.sp-wrap .ph-plus{width:44px;height:44px}

/* 급여 확정: 단계 표시·확인 필요 강조 */
.pc-steps{display:flex;gap:8px;margin:16px 16px 8px;padding:0;list-style:none}
.pc-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font:400 12px/16px var(--font);color:var(--label-2)}
.pc-steps i{display:block;width:100%;height:4px;border-radius:2px;background:var(--fill-3)}
.pc-steps li.done i,.pc-steps li.cur i{background:var(--blue)}
.pc-steps li.cur{color:var(--label);font-weight:600}
.pc-need{display:inline-block;padding:0 8px;border-radius:10px;background:var(--fill-3);font:600 13px/20px var(--font)}
.pc-need,.t-danger,.btn.t-danger,.btn.plain.t-danger{color:var(--danger)} /* .btn.plain의 남색이 이기던 것(밝게, 디자인 점검 N1) */
:root[data-theme="dark"] .pc-need,:root[data-theme="dark"] .t-danger{color:var(--danger)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-need,:root:not([data-theme="light"]) .t-danger{color:var(--danger)}}

/* 근무표 복사 중 줄 */
.cp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 16px 0;padding:8px 16px;min-height:56px;box-sizing:border-box;border-radius:12px;background:var(--fill-3);font:600 14px/20px var(--font)}
.cp-bar small{font:400 13px/18px var(--font);color:var(--label-2)}
.cp-x{flex:none;min-height:44px;padding:0 8px;font:600 15px/22px var(--font);color:var(--blue)}
.cp-plus{margin:8px 16px 0}

.sch-wrap.cp-wait{opacity:.55;pointer-events:none}

.sch-sum td.short{color:var(--danger);font-weight:700}
:root[data-theme="dark"] .sch-sum td.short{color:var(--danger)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sch-sum td.short{color:var(--danger)}}

/* 눌리는 범위 44(모양은 그대로): 근무표 보조 버튼 */
.cp-plus{display:flex;flex-wrap:wrap;gap:8px}
.cp-plus .btn.small{position:relative;min-height:32px}
.cp-plus .btn.small::after{content:"";position:absolute;inset:-6px -2px}

/* 행 안의 글자 버튼(예: 「되돌리기」) — 글자는 작아도 누르는 영역은 44 (디자인 점검 N3). 오른쪽 여백 -8로 글자 끝을 행 여백 선에 맞춘다 */
.btn-inline{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;min-width:44px;padding:0 8px;margin-right:-8px;border-radius:var(--r-ctl,8px);font:400 15px/22px var(--font);white-space:nowrap}
@media (hover:hover){.btn-inline:hover{background:var(--press)}}
/* 배너 줄(.note-row) — 묶음 안의 안내·경고 한두 줄: 13/20, 두 줄이면 64(12+40+12), 한 줄이면 48. 아이콘은 첫 줄 높이(20)에 맞춤 (디자인 점검 N7·8-3) */
.note-row{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:48px;padding:12px 16px;text-align:left}
.note-row .main{flex:1;min-width:0;padding:0;min-height:0}
.note-row .rt,.note-row .rs,.note-row p{margin:0;font:400 13px/20px var(--font);color:var(--label-2);white-space:normal;overflow:visible;text-overflow:clip}
.note-row .ricon{width:20px;height:20px;border-radius:0;background:none;color:var(--label-2)}
.note-row .ricon svg{width:18px;height:18px}
.note-row.t-danger .rt,.note-row.t-danger .ricon{color:var(--danger)}

/* 통합 검색 화면(OW_SEARCH) — 검색창 알약 48, 돋보기·지우기, 일치 글자 600 (디자인 지시 통합 검색 2·10절) */
.ow-sr-wrap{padding:12px 16px 4px}
.ow-sr-box{position:relative;display:flex;align-items:center;gap:8px;height:48px;padding:0 4px 0 16px;border-radius:24px;background:var(--fill-3)}
.ow-sr-box:focus-within{box-shadow:inset 0 0 0 1.5px var(--blue)}
.ow-sr-ic{flex:none;width:20px;height:20px;fill:none;stroke:var(--label-2);stroke-width:1.8;stroke-linecap:round}
.ow-sr-in{flex:1;min-width:0;height:48px;border:0;background:transparent;color:var(--label);font:400 17px/24px var(--font);outline:0;-webkit-appearance:none;appearance:none}
.ow-sr-in::placeholder{color:var(--label-3)}
.ow-sr-x{flex:none;display:grid;place-items:center;width:44px;height:44px;color:var(--label-2);border-radius:50%}
.ow-sr-hit{font-weight:600}
.ow-sr-more{color:var(--blue)}
.ow-sr-x[hidden]{display:none}
#osRes .empty{padding:48px 32px 24px}

/* 출퇴근 수정 시트: 변경 기록 자리를 두 줄 높이로 미리 잡아 늦게 와도 시트가 늘지 않게 */
.ed-log{min-height:128px}
.ed-log>.rs{margin:0;padding:24px 16px;text-align:center}

/* 통합 검색 입구 — 폰: 헤더 돋보기(.nav-act 안 SVG), 768 이상: 옆 메뉴 맨 위 검색창 48 */
.nav-act[data-act="owSearchOpen"] svg{fill:none;stroke:currentColor;stroke-linecap:round} /* 크기·굵기는 다른 상단 아이콘과 같게(24·1.8). 전에는 .nav-act svg 전체에 걸려 초대(+) 아이콘까지 22로 줄었다 */
.nav-act+.nav-act[data-act="owSearchOpen"]{right:68px} /* 사람 탭: 초대(오른쪽 끝) 왼쪽에 검색 — 44 + 간격 8 */
.side-search{display:none}
@media (min-width:768px){.side-search{display:flex;align-items:center;gap:8px;width:calc(100% - 32px);height:48px;margin:0 16px 8px;padding:0 16px;border-radius:24px;background:var(--fill-3);color:var(--label-2);font:400 17px/24px var(--font);text-align:left;flex:none;transition:transform var(--t-micro,100ms) var(--ease-out,ease)}
  .side-search svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .side-search.pressing{transform:scale(.97)}
  .nav-act[data-act="owSearchOpen"]{display:none} /* 넓은 화면의 입구는 옆 메뉴 검색창 하나 */
  .tabbar:has(.side-search) .tab-ind{top:calc(var(--st) + 155px)}} /* 검색창 48 + 아래 8 + 간격 4 = 60만큼 탭이 내려가므로 선택 표시도 같이(95 → 155) */
@media (hover:hover) and (min-width:768px){.side-search:hover{filter:brightness(.96)}}

/* 글줄 안에 끼우는 작은 아이콘(예: 근무 시트 경고 앞 alert) — 크기 지정이 없으면 svg가 화면 폭만큼 커짐(11-12 대리) */
.ic-inline{display:inline-block;width:16px;height:16px;vertical-align:-3px}

/* 급여 설정 3종(11-13): 값 없음 글자색 · 주 이동 막대 끝 비활성 */
.v-none{color:var(--label-2)}
.weekbar button:disabled{opacity:.32;pointer-events:none}

/* 직원 아이콘 아바타(11-14, OW_NEW.avatar): 색 8개는 기존 토큰만(남색·금·초록·주황·빨강·파랑·회색·옅은 바탕) */
.av .avx{width:100%;height:100%;border-radius:inherit;display:grid;place-items:center}
.av .avx svg{width:58%;height:58%}
.avx.c1{background:var(--brand-navy);color:var(--brand-gold)}
.avx.c2{background:var(--brand-gold);color:var(--brand-navy)}
.avx.c3{background:var(--dot-ok,#30d158);color:var(--brand-navy)}
.avx.c4{background:var(--dot-wait,#ff9f0a);color:var(--brand-navy)}
.avx.c5{background:var(--danger);color:#fff}
.avx.c6{background:var(--blue);color:var(--on-btn)}
.avx.c7{background:var(--label-2);color:var(--bg-grouped)}
.avx.c8{background:var(--fill-3);color:var(--label)}
:root[data-theme="dark"] .avx.c5{color:var(--brand-navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .avx.c5{color:var(--brand-navy)}}
.av-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 16px}
.av-pick button{aspect-ratio:1;border:0;border-radius:12px;background:var(--fill-3);color:var(--label);display:grid;place-items:center;min-height:48px}
.av-pick button svg{width:56%;height:56%}
.av-pick button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--blue) inset}
.av-cols{display:flex;gap:10px;flex-wrap:wrap;padding:4px 16px 12px}
.av-cols button{width:44px;height:44px;border-radius:22px;border:0;padding:0;display:grid;place-items:center}
.av-cols button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--cell),0 0 0 4px var(--blue)}
.av-cols .avx{width:100%;height:100%;border-radius:inherit}
.av-cols .avx svg{display:none}
.av-prev{display:flex;justify-content:center;padding:16px 0 4px}
.av-prev .av{width:72px;height:72px;border-radius:36px}

/* 근무표 이름 칸 앞 작은 아이콘(OW_NEW.avatar, 11-15): 이름 칸이 64px 이상인 넓은 화면(700px~)에서만 보이고, 폰 폭(이름 칸 48·40px)에서는 숨김 */
.sch .sch-n .sch-av{display:none}
@media(min-width:700px){.sch .sch-n .sch-av{display:inline-grid;width:16px;height:16px;border-radius:8px;margin-right:4px;vertical-align:-3px;font-size:10px}.sch .sch-n .sch-av .avx svg{width:60%;height:60%}}

/* AI(11-15) 아바타 전부 제거: core.js AV_OFF=true일 때 html[data-av="off"]. 그림·이니셜 원과 근무표 작은 아이콘·프로필 큰 원을 숨기고 이름만, 구분선은 왼쪽 16px부터. 줄 높이(48)·터치 영역은 그대로 */
html[data-av="off"] .row .av,html[data-av="off"] .row .avs,html[data-av="off"] .profile .av,html[data-av="off"] .sch .sch-av{display:none}
html[data-av="off"] .row.has-av{--sep-l:16px}


/* AJ(11-15) 사장님 화면 구조(OW_NEW.subNav): 제목 삭제 뒤 sr-only 제목 · PC 사이드바 소탭 펼침 · 폰 하단 소탭 한 줄. 스위치 꺼짐이면 .side-sub·.subbar·.no-lt가 생기지 않아 영향 없음 */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.side-sub{display:none}
.subbar{display:none}
.subbar:not([hidden]){display:flex;position:absolute;left:16px;right:16px;bottom:calc(var(--tb-bottom,12px) + 64px + 8px);z-index:9;gap:4px;padding:4px;border-radius:24px;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge),var(--sh-float)}
.sub-i{flex:1;min-width:0;min-height:44px;padding:0 6px;border-radius:20px;font:600 12px/16px var(--font);color:var(--label-2);text-align:center;white-space:normal;word-break:keep-all}
.sub-i[aria-current="page"]{color:var(--label);background:var(--lens)}
#app.tab-hidden .subbar,.tabbar.away~.subbar{display:none}
@media (max-width:599px){#app.has-sub .scroller{padding-bottom:calc(var(--tb-bottom,12px) + 64px + 32px + 60px)}}
@media (min-width:600px){
  .subbar,.subbar:not([hidden]){display:none}
  .page.no-lt>.nav{display:none}
  .side-sub{display:block;margin:0 8px 4px}
  .side-sub-i{display:block;position:relative;width:100%;height:44px;padding:0 12px 0 44px;border-radius:14px;text-align:left;font:400 15px/44px var(--font);color:var(--label-2)}
  .side-sub-i[aria-current="page"]{color:var(--label);font-weight:600}
  .side-sub-i[aria-current="page"]::before{content:"";position:absolute;left:30px;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--brand-navy)}
  .side-sub-i:hover{background:var(--press)}
}


.prog-code{margin:20px 16px 4px;padding:20px 0;border-radius:16px;background:var(--fill-3);text-align:center;font:600 30px/36px var(--font);letter-spacing:.14em;color:var(--label);user-select:all;-webkit-user-select:all}

/* 11-15 알바 하단 소탭만 작게(사장님 소탭 .sub-i는 그대로): 보이는 알약 높이 32·글자 13·글자 폭+좌우 여백, 눌리는 영역은 위아래 포함 44, 줄 높이 38. 선택은 알약 배경+글자색(밑줄 없음) */
@media (max-width:599px){
  .subbar.st:not([hidden]){right:auto;width:fit-content;max-width:calc(100% - 32px);padding:3px;gap:2px;border-radius:19px}
  .subbar.st .sub-i{position:relative;flex:none;min-height:32px;height:32px;padding:0 14px;border-radius:16px;font:600 13px/32px var(--font);white-space:nowrap}
  .subbar.st .sub-i::after{content:"";position:absolute;left:-1px;right:-1px;top:-6px;bottom:-6px}
  #app.has-sub.has-sub-st .scroller{padding-bottom:calc(var(--tb-bottom,12px) + 64px + 8px + 38px + 24px)}
}