/* ════════ v2 · 섬처럼 떠 있는 디자인 (2026-11-08 사장님 "둘 다 강하게") ════════ */
:root{
  
  
  --island-bg:linear-gradient(180deg,#ffffff 0%,#fbfbfc 100%);
  
  --glass2:rgba(255,255,255,.6);--glass2-filter:blur(24px) saturate(190%);
  --rim:inset 0 0 0 .5px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.95);
  
  
  
  
  
  
  --tb-bottom:max(12px,calc(var(--sb) - 8px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  
  
  
  --rim:inset 0 0 0 .5px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.1);
  --float-shadow:0 12px 32px rgba(0,0,0,.55);
  
  
  
}}
:root[data-theme="dark"]{
  
  
  
  --rim:inset 0 0 0 .5px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.1);
  --float-shadow:0 12px 32px rgba(0,0,0,.55);
  
  
  
}
html,body{background:var(--page-top)}
#app,.page,.pick,.done-screen{background-color:var(--page-top);background-image:var(--page-bg)}

/* 섬(카드) */
.group{border-radius:24px;background:var(--island-bg);box-shadow:var(--island-shadow)}
.card{border-radius:24px;background:var(--island-bg);box-shadow:var(--island-shadow)}
.hero{padding:20px}
.hero-v:first-child{margin-top:0}
.profile{padding:20px}
.av{background:var(--av-bg);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.04)}
.avs .av{box-shadow:0 0 0 2px var(--cell)}
.ricon{border-radius:9px;background:var(--av-bg);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.6)}
.step-n{background:var(--av-bg)}

/* 버튼·부품: 알약 모양 */
.btn{border-radius:980px;background:var(--btn-grad);box-shadow:var(--btn-glow)}
.btn.sec{background:var(--lens);box-shadow:none}
.btn.plain{background:transparent;box-shadow:none}
.btn:disabled{box-shadow:none}
.seg{border-radius:16px;background:var(--lens)}
.seg-th{border-radius:14px;box-shadow:0 0 0 .5px rgba(0,0,0,.04),0 3px 10px rgba(0,0,0,.12)}
.stp,.stp button{border-radius:16px}
.stp{background:var(--lens)}
.time-in{border-radius:16px;background:var(--lens)}

/* 위쪽: 막대 대신 흐려지며 사라지는 가장자리 + 유리 동그라미 버튼 */
.nav-bg{bottom:-20px;background:linear-gradient(180deg,var(--page-top) 0%,color-mix(in srgb,var(--page-top) 72%,transparent) 55%,transparent 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.nav-bg::after{display:none}
.nav-title{left:76px;right:76px}
.nav-back,.nav-act{bottom:0;width:44px;height:44px;min-width:0;max-width:none;padding:0;justify-content:center;border-radius:22px;color:var(--label);
  background:var(--glass2);-webkit-backdrop-filter:var(--glass2-filter);backdrop-filter:var(--glass2-filter);box-shadow:var(--rim),var(--float-shadow);
  transition:transform var(--t-base) var(--ease-out)}
.nav-back{left:16px}.nav-act{right:16px}
.nav-back span{display:none}
.nav-back svg{width:24px;height:24px;margin-left:-2px}
.nav-back.pressing,.nav-act.pressing{opacity:1;transform:scale(.9);transition-duration:var(--t-micro)}

/* 아래: 떠 있는 유리 알약 탭 막대 */
.tabbar{left:16px;right:16px;bottom:var(--tb-bottom);height:64px;padding:4px;border-radius:32px;
  background:var(--glass2);-webkit-backdrop-filter:var(--glass2-filter);backdrop-filter:var(--glass2-filter);box-shadow:var(--rim),var(--float-shadow);
  transition:transform var(--t-screen) var(--sheet-ease),opacity var(--t-fade) var(--ease)}
.tabbar::before{display:none}
.tabbar.away{transform:translateY(calc(100% + 40px));opacity:0}
.tab{z-index:1;height:56px;padding-top:7px;border-radius:28px}
.tab .tb{top:4px}
.tab-ind{position:absolute;top:4px;left:4px;z-index:0;width:calc((100% - 8px) / var(--n,4));height:56px;border-radius:28px;background:var(--lens);
  transform:translateX(calc(100% * var(--i,0)));transition:transform var(--t-move,400ms) var(--ease-move,ease),scale var(--t-base) var(--ease-out)}
.tabbar:has(.tab.pressing) .tab-ind{scale:1.05}
.scroller{padding-bottom:calc(var(--tb-bottom) + 64px + 32px)}
.toast{bottom:calc(var(--tb-bottom) + 64px + 12px);box-shadow:var(--float-shadow)}
#app.tab-hidden .toast{bottom:calc(var(--sb) + 120px)}

/* 아래 고정 버튼: 막대 없이 떠 있게 */
.actbar{padding-top:28px;background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--bg-grouped) 96%,transparent) 22px);-webkit-backdrop-filter:none;backdrop-filter:none}
.actbar::before{display:none}

/* 시트: 가장자리에서 떨어져 뜨는 카드 */
.sheet{left:8px;right:8px;bottom:8px;max-height:calc(100% - var(--st) - 24px);border-radius:36px;background:var(--sheet-glass);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:var(--rim),0 24px 64px rgba(0,0,0,.28);
  transform:translateY(calc(100% + 24px))}
.sheet.full{height:calc(100% - var(--st) - 24px)}
.sheet-body{padding-bottom:calc(var(--sb) / 2 + 20px)}
.sheet .group{border-radius:20px;background:var(--cell-sheet);box-shadow:0 0 0 .5px rgba(0,0,0,.03),0 1px 3px rgba(0,0,0,.04)}
.sheet-x{right:10px;top:6px}
.sheet-x span{width:32px;height:32px;border-radius:16px;background:var(--lens)}
.sheet.cam{background:var(--black);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.1),0 24px 64px rgba(0,0,0,.4)}
.cam-feed{border-radius:24px}
.sheet .sec.first{margin-top:8px}
.sheet .sheet-text{padding-top:0}

@media (min-width:600px){
  .tabbar{top:12px;left:12px;bottom:12px;right:auto;width:calc(var(--side) - 24px);height:auto;padding:calc(var(--st) + 12px) 0 16px;border-radius:28px;
    background:var(--glass2);-webkit-backdrop-filter:var(--glass2-filter);backdrop-filter:var(--glass2-filter);box-shadow:var(--rim),var(--float-shadow)}
  .tabbar.away{transform:none;opacity:1}
  /* 옆 메뉴: 선택 표시가 위아래로 미끄러짐(사장님 11-09). side-h 높이를 79px로 고정해 첫 메뉴 위치를 계산 */
  .tab-ind{top:calc(var(--st) + 95px);left:8px;width:calc(100% - 16px);height:44px;border-radius:14px;transform:translateY(calc(48px * var(--i,0)))}
  .tabbar:has(.tab.pressing) .tab-ind{scale:1}
  .side-h{padding:8px 20px 16px;height:79px;overflow:hidden}
  .tab{height:44px;margin:0 8px;padding:0 12px;border-radius:14px}
  .tab.on{background:transparent}
  .scroller,.page.no-tab .scroller{padding-bottom:calc(var(--sb) + 48px)}
  .toast,#app.tab-hidden .toast{bottom:calc(var(--sb) + 24px)}
  #app.tab-hidden .toast{bottom:calc(var(--sb) + 120px)}
  .sheet{left:50%;right:auto;top:50%;bottom:auto;border-radius:32px;transform:translate(-50%,calc(50vh + 50%))}
  .sheet-root.open .sheet{transform:translate(-50%,-50%)}
}

/* v3 · 움직임: 탭 막대 작아지기·끌기·빛, 큰 제목 늘어나기 */
.tabbar{transform-origin:50% 100%;touch-action:none}
.tabbar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t-fade) var(--ease);
  background:radial-gradient(96px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6),transparent 70%);mix-blend-mode:soft-light}
.tabbar.lit::after{opacity:1;transition-duration:var(--t-micro)}
.tabbar.dragging .tab-ind{transition:transform var(--t-base) var(--ease-out),scale var(--t-base) var(--ease-out);scale:1.08}
.nav-back::after,.nav-act::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.55),transparent 70%);transition:opacity var(--t-fade) var(--ease)}
.nav-back.pressing::after,.nav-act.pressing::after{opacity:1;transition-duration:80ms}
.lt{transform-origin:0 100%}
@media (max-width:599px){
  .tab span:not(.tb){transition:opacity var(--t-fade) var(--ease)}
  .tab svg{transition:transform var(--t-base) var(--sheet-ease)}
  .tabbar.min{transform:translateY(8px) scale(.84)}
  .tabbar.min .tab span:not(.tb){opacity:0}
  .tabbar.min .tab svg{transform:translateY(7px)}
  .tab .tb{transition:transform var(--t-base) var(--sheet-ease)}
  .tabbar.min .tb{transform:translateY(7px)}
  .tabbar.away,.tabbar.min.away{transform:translateY(calc(100% + 40px))}
}
/* ════════ v4 · 로고 색(밤하늘 남색 + 달빛)으로 앱 색 맞춤 ════════ */
:root{
  --page-top:#f5f7fb;--page-bg:linear-gradient(180deg,#f5f7fb 0%,#edf0f6 40%,#e6eaf2 100%);--bg-grouped:#edf0f6;
  --label:#16213e;--label-2:rgba(22,33,62,.66); /* 대비 4.5:1 이상(부장 11-09, .58은 3.95) */--label-3:rgba(22,33,62,.28);--sep:rgba(22,33,62,.14);--fill-3:rgba(15,52,96,.08);
  --blue:#0f3460;--focus:#0f3460;--lens:rgba(15,52,96,.1);
  --cell:#fff;--cell-sheet:#fff;--sheet-glass:rgba(245,247,251,.95);
  --island-shadow:0 0 0 .5px rgba(22,33,62,.05),0 1px 2px rgba(22,33,62,.05),0 6px 16px rgba(22,33,62,.06),0 20px 40px -10px rgba(22,33,62,.16);
  --float-shadow:0 0 0 .5px rgba(22,33,62,.06),0 2px 6px rgba(22,33,62,.06),0 12px 32px rgba(22,33,62,.16);
  --btn-grad:linear-gradient(180deg,#0f3460 0%,#0f3460 100%);--on-btn:#fff;
  --btn-glow:0 1px 1px rgba(26,26,46,.25),0 8px 18px -8px rgba(15,52,96,.55),inset 0 1px 0 rgba(255,255,255,.18);
  --ck-bg:#0f3460;--ck-mark:#efc07b;--badge-bg:#efc07b;--badge-fg:#16213e;
  --toast:rgba(14,26,48,.92);--av-bg:linear-gradient(180deg,#f3f5f9 0%,#e3e8f0 100%);--seg-th:#fff;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --page-top:#1a1a2e;--page-bg:linear-gradient(180deg,#1a1a2e 0%,#1a1a2e 45%,#1a1a2e 100%);--bg-grouped:#1a1a2e;
  --label:#f2f4f8;--label-2:rgba(226,232,244,.62);--label-3:rgba(226,232,244,.3);--sep:rgba(140,160,200,.22);--fill-3:rgba(140,160,200,.16);
  --blue:#efc07b;--focus:#efc07b;--lens:rgba(255,255,255,.12);
  --cell:#16213e;--cell-sheet:#16213e;--sheet-glass:rgba(18,27,46,.95);--glass2:rgba(26,37,62,.55);
  --island-bg:linear-gradient(180deg,#16213e 0%,#16213e 100%);
  --island-shadow:inset 0 0 0 .5px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.06),0 20px 40px -10px rgba(0,0,0,.7);
  --btn-grad:linear-gradient(180deg,#f3cf98 0%,#efc07b 100%);--on-btn:#16213e;
  --btn-glow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5);
  --ck-bg:#efc07b;--ck-mark:#16213e;--badge-bg:#efc07b;--badge-fg:#16213e;
  --toast:rgba(34,46,72,.94);--av-bg:linear-gradient(180deg,#26355d 0%,#16213e 100%);--seg-th:#2c2c47;--sw-off:rgba(140,160,200,.28);
}}
:root[data-theme="dark"]{
  --page-top:#1a1a2e;--page-bg:linear-gradient(180deg,#1a1a2e 0%,#1a1a2e 45%,#1a1a2e 100%);--bg-grouped:#1a1a2e;
  --label:#f2f4f8;--label-2:rgba(226,232,244,.62);--label-3:rgba(226,232,244,.3);--sep:rgba(140,160,200,.22);--fill-3:rgba(140,160,200,.16);
  --blue:#efc07b;--focus:#efc07b;--lens:rgba(255,255,255,.12);
  --cell:#16213e;--cell-sheet:#16213e;--sheet-glass:rgba(18,27,46,.95);--glass2:rgba(26,37,62,.55);
  --island-bg:linear-gradient(180deg,#16213e 0%,#16213e 100%);
  --island-shadow:inset 0 0 0 .5px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.06),0 20px 40px -10px rgba(0,0,0,.7);
  --btn-grad:linear-gradient(180deg,#f3cf98 0%,#efc07b 100%);--on-btn:#16213e;
  --btn-glow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5);
  --ck-bg:#efc07b;--ck-mark:#16213e;--badge-bg:#efc07b;--badge-fg:#16213e;
  --toast:rgba(34,46,72,.94);--av-bg:linear-gradient(180deg,#26355d 0%,#16213e 100%);--seg-th:#2c2c47;--sw-off:rgba(140,160,200,.28);
}
.btn{color:var(--on-btn)}
.btn.sec,.btn.plain{color:var(--blue)}
.done .ck{background:var(--ck-bg);box-shadow:inset 0 0 0 1.5px var(--ck-bg)}
.badge,.tab .tb{background:var(--badge-bg);color:var(--badge-fg)}
.toast svg{color:var(--brand-gold)}
.sw[aria-checked="true"] i{background:var(--white)}
.bar i{background:var(--blue)}

/* 로고·이름 */
.bicon{display:block;flex:none;border-radius:22.4%;box-shadow:0 1px 2px rgba(26,26,46,.2),0 6px 16px rgba(26,26,46,.18)}
.wordmark{display:block;width:auto;color:var(--label)}
.pick-brand{display:flex;align-items:center;gap:12px;padding:0 32px 28px}
.pick-brand .wordmark{height:24px;transform:translateY(3px)}
.side-brand{display:flex;align-items:center;gap:10px}
.side-brand .wordmark{height:18px;transform:translateY(2px)}
.side-h p{margin-top:8px}
.brand-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px;font:400 13px/19px var(--font);color:var(--label-2)}
.brand-foot .bicon{box-shadow:none}

/* 켜질 때: 밤하늘 첫 화면 */
.launch{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding-bottom:64px;
  background:radial-gradient(120% 70% at 50% 35%,#0f3460 0%,#1a1a2e 75%);color:var(--on-navy);transition:opacity var(--t-fade) var(--ease)}
.launch .bicon{box-shadow:0 0 0 .5px rgba(255,255,255,.12),0 16px 40px rgba(0,0,0,.45);animation:launchIn 700ms var(--ease-out) both}
.launch .wordmark{height:26px;color:var(--on-navy);animation:launchIn 700ms var(--ease-out) 120ms both}
.launch.gone{opacity:0;pointer-events:none}
@keyframes launchIn{from{opacity:0;transform:translateY(8px) scale(.95)}}

/* 마감 완료 = 로고의 '밤의 마감' 장면 */
.done-screen .big-ck path{stroke:var(--brand-gold)}
.done-moon{position:relative;width:88px;height:88px}
.done-moon i{position:absolute;right:-18px;top:-14px;width:28px;height:28px;border-radius:50%;background:var(--brand-gold);
  -webkit-mask:radial-gradient(circle 12px at 72% 28%,transparent 98%,#000 100%);mask:radial-gradient(circle 12px at 72% 28%,transparent 98%,#000 100%);
  opacity:0;transform:translate(-6px,6px) scale(.9);transition:opacity 500ms var(--ease-out) 700ms,transform 700ms var(--ease-out) 700ms}
.done-screen.on .done-moon i{opacity:1;transform:none}
.done-screen .done-btn{background:linear-gradient(180deg,#f3cf98 0%,var(--brand-gold) 100%);color:var(--brand-navy);box-shadow:0 8px 24px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5)}

/* ════════ v5 · 로그인·가입·초대 / 사장님 일 화면 / 가게 컴퓨터 QR / 알림 ════════ */
div.row[data-act]{cursor:pointer}
div.row[data-act].pressing{background:var(--press);transition-duration:var(--t-micro)}
.add-row .rt{color:var(--blue)}
.add-row .ricon{background:transparent;box-shadow:none;color:var(--blue)}
.hair{height:.5px;background:var(--sep);margin-left:16px}
.brand-name{display:flex;flex-direction:column;align-items:center}
.brand-name.left{align-items:flex-start}
.brand-ko{margin-top:6px;font:600 13px/19px var(--font);color:var(--label-2)}
.welcome .brand-name{margin-top:24px}
.welcome .brand-name .wordmark{margin-top:0}
.launch .brand-ko{animation:launchIn 700ms var(--ease-out) 200ms both}
.login-brand{display:flex;align-items:center;gap:12px;padding:12px 16px 12px}
.login-brand .wordmark{height:20px}
.login-brand .brand-ko{margin-top:4px}
.sec-f,.reason,.sheet-text{text-wrap:pretty}
.todo .rs{white-space:normal}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px}
.chip{position:relative;height:32px;padding:0 12px;border-radius:16px;background:var(--lens);font:600 15px/22px var(--font);
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out)}
.chip::before{content:"";position:absolute;inset:-6px -2px}
.chip[aria-pressed="true"]{background:var(--badge-bg);color:var(--badge-fg)}
.chip.pressing{transform:scale(.94);transition-duration:var(--t-micro)}
.time-row{display:flex;align-items:center;gap:8px;font:400 15px/22px var(--font);color:var(--label-2)}
.weekbar{display:flex;align-items:center;justify-content:space-between;margin:16px 16px 0;font:600 17px/24px var(--font)}
.weekbar button{position:relative;width:44px;height:44px;border-radius:22px;display:grid;place-items:center;color:var(--label);
  background:var(--glass2);-webkit-backdrop-filter:var(--glass2-filter);backdrop-filter:var(--glass2-filter);box-shadow:var(--rim),var(--float-shadow);transition:transform var(--t-base) var(--ease-out)}
.weekbar button svg{width:22px;height:22px;stroke-width:2}
.weekbar button.pressing{transform:scale(.9);transition-duration:var(--t-micro)}
.shake{animation:shake var(--t-screen) var(--ease)}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.ok-state{display:flex;flex-direction:column;align-items:center;padding:8px 32px 0;text-align:center}
.ok-state svg{width:44px;height:44px;color:var(--blue);stroke-width:1.8}
.ok-state b{margin-top:12px;font:600 17px/24px var(--font)}
.ok-state span{margin-top:4px;font:400 15px/22px var(--font);color:var(--label-2);text-wrap:balance}


/* ════════ 탭 막대 아이콘만 (사장님 11-09 04:45 지시, 부장) — 폰 폭(599px 이하)만 ════════
   평소 이름 글자 숨김 → 누르면 1.2초 보였다 사라짐(nav.js tabPeek). 이름은 aria-label에 남아 있음.
   막대 64→56px, 탭 48px(터치 44px 이상), 아이콘 24px. PC 사이드바(600px 이상)는 이름 그대로 */
@media (max-width:599px){
  .tabbar{height:56px}
  .tab{height:48px;padding-top:0;justify-content:center;gap:0;border-radius:24px}
  .tab-ind{height:48px;border-radius:24px}
  .tab svg{width:24px;height:24px}
  .tab span:not(.tb){position:absolute;left:0;right:0;bottom:5px;text-align:center;opacity:0;transform:translateY(3px);
    transition:opacity var(--t-fade) var(--ease),transform var(--t-base) var(--sheet-ease);pointer-events:none}
  .tab.peek span:not(.tb){opacity:1;transform:none}
  .tab.peek svg{transform:translateY(-7px)}
  .tab .tb{top:3px}
  .scroller{padding-bottom:calc(var(--tb-bottom) + 56px + 32px)}
  .toast{bottom:calc(var(--tb-bottom) + 56px + 12px)}
  .tabbar.min .tab.peek svg{transform:translateY(7px)}
}
@media (max-width:599px) and (prefers-reduced-motion:reduce){.tab span:not(.tb),.tab svg{transition:none}}

/* 화면 밝기 바꿀 때 색이 스르륵 이어지게(0.3초, 부장 11-09). core.js setTh가 html에 th-anim을 420ms만 붙임. 모션 줄이기면 안 붙음 */
html.th-anim,html.th-anim *,html.th-anim *::before,html.th-anim *::after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,fill .3s ease,stroke .3s ease,box-shadow .3s ease!important}

/* ════════ 탭 이동 슬라이드 + 글자 크기 미리보기 (부장 11-09, 사장님 결정) — 폰 폭만, 모션 줄이기면 없음 ════════ */
@media (max-width:599px) and (prefers-reduced-motion:no-preference){
  .view.slide-r{animation:vInR var(--t-move,400ms) var(--ease-move,ease) both}
  .view.slide-l{animation:vInL var(--t-move,400ms) var(--ease-move,ease) both}
  .view.so-r,.view.so-l{visibility:visible!important;pointer-events:none;z-index:0}
  .view.so-r{animation:vOutL var(--t-move,400ms) var(--ease-move,ease) both}
  .view.so-l{animation:vOutR var(--t-move,400ms) var(--ease-move,ease) both}
}
/* 넓은 화면: 옆 메뉴가 위아래로 놓여 있으니 화면도 위아래로 이동(아래 메뉴 → 아래에서 올라옴) */
@media (min-width:600px) and (prefers-reduced-motion:no-preference){
  .view.slide-r{animation:vInD var(--t-move,400ms) var(--ease-move,ease) both}
  .view.slide-l{animation:vInU var(--t-move,400ms) var(--ease-move,ease) both}
  .view.so-r,.view.so-l{visibility:visible!important;pointer-events:none;z-index:0}
  .view.so-r{animation:vOutU var(--t-move,400ms) var(--ease-move,ease) both}
  .view.so-l{animation:vOutD var(--t-move,400ms) var(--ease-move,ease) both}
}
/* 나가는 화면은 앞 35%에 사라지고 들어오는 화면은 15~60%에 나타남 → 두 화면 글자가 겹쳐 보이지 않음. 이동(transform)은 처음부터 끝까지 한 번에 */
@keyframes vInD{0%{transform:translateY(36px);opacity:0}15%{opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes vInU{0%{transform:translateY(-36px);opacity:0}15%{opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes vOutU{0%{transform:none;opacity:1}35%{opacity:0}100%{transform:translateY(-36px);opacity:0}}
@keyframes vOutD{0%{transform:none;opacity:1}35%{opacity:0}100%{transform:translateY(36px);opacity:0}}
@keyframes vInR{0%{transform:translateX(56px);opacity:0}15%{opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes vInL{0%{transform:translateX(-56px);opacity:0}15%{opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes vOutL{0%{transform:none;opacity:1}35%{opacity:0}100%{transform:translateX(-56px);opacity:0}}
@keyframes vOutR{0%{transform:none;opacity:1}35%{opacity:0}100%{transform:translateX(56px);opacity:0}}
.fs-sample{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;align-items:end;gap:2px;margin:12px 16px 0;padding:10px 12px;border-radius:14px;background:var(--fill-3)}
.fs-sample span{text-align:center;color:color-mix(in srgb,var(--label) 82%,transparent);white-space:nowrap;line-height:1.2;transition:color .25s ease}
.fs-sample span.on{color:var(--label);font-weight:600}

/* ════════ 불러오는 중 = 실제 화면 모양의 회색 자리표시(스켈레톤) 공통 (부장 11-09, 사장님 요청 「체감 속도」) ════════
   .sk 막대는 은은하게 숨 쉬듯 밝기만 바뀐다(1.4초). 「모션 줄이기」면 멈춤. 스크린리더에는 .sr-only 「불러오는 중」 한 줄 */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:no-preference){.sk{animation:skPulse 1.4s ease-in-out infinite}}
@keyframes skPulse{0%,100%{opacity:1}50%{opacity:.5}}
.skel-bub{display:flex;padding:0 16px;margin:10px 0}
.skel-bub.me{justify-content:flex-end}
.skel-bub .sk{height:38px;border-radius:18px}

/* ════════ 서류 종이 보기(KDOC.paperHTML, 부장 11-09 · 11-10 디자인 점검 부장: 시안 「화면 시안 - 서류 문서 보기·PDF」대로) — 종이는 항상 흰 바탕, 어둡게에서도 ════════ */
.paper{position:relative;display:flex;flex-direction:column;margin:8px 16px 0;padding:24px 24px 14px;border-radius:4px;background:var(--white);color:var(--brand-navy);color-scheme:light;
  box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.05),0 12px 32px rgba(16,24,40,.10)}
.paper>*{position:relative;z-index:1}
.paper-wm{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none;background-repeat:repeat;background-size:260px 160px}
.paper header{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:.5px solid rgba(22,33,62,.14);font:400 12px/16px var(--font);color:rgba(22,33,62,.6)}
.paper-brand{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--brand-navy)}
.paper h2{margin:22px 0 0;font:700 20px/28px var(--font);letter-spacing:.02em;text-align:center}
.paper-basis{margin:4px 0 0;font:400 12px/18px var(--font);color:rgba(22,33,62,.6);text-align:center}
.paper-rule{height:.5px;margin:14px 0 16px;border:0;background:var(--paper-line)}
.paper-body{font:400 15px/26px var(--font);word-break:keep-all;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.paper-body p{margin:0}
.paper-body .paper-gap{height:10px}
.paper-body .paper-h{margin-top:6px;font-weight:600}
.paper-body .paper-li{display:grid;grid-template-columns:24px 1fr}
.paper-date{margin:24px 0 0;font:400 15px/22px var(--font);text-align:center}
.paper-sign{width:200px;margin:16px 0 0 auto;text-align:center}
.paper-sign-box{position:relative;height:60px;border-bottom:1px solid var(--brand-navy)}
.paper-sign-box.empty{display:grid;place-items:center;border:1px dashed rgba(22,33,62,.3);border-radius:8px;font:400 13px/19px var(--font);color:rgba(22,33,62,.45)}
.paper-sig{position:absolute;left:50%;bottom:2px;height:56px;max-width:100%;transform:translateX(-50%);mix-blend-mode:multiply;object-fit:contain}
.paper-sign b{display:block;margin-top:6px;font:600 15px/22px var(--font)}
.paper-sign small{display:block;font:400 12px/16px var(--font);color:rgba(22,33,62,.6)}
.paper-ev{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:20px 0 0;padding:12px 14px;border:.5px solid rgba(22,33,62,.18);border-radius:8px;font:400 12px/18px var(--font)}
.paper-ev dt{color:rgba(22,33,62,.6)}.paper-ev dd{margin:0;font-weight:600}
.paper-note{margin:8px 0 0;font:400 11px/15px var(--font);color:rgba(22,33,62,.6)}
.paper-foot{display:flex;justify-content:space-between;gap:8px;margin-top:20px;padding-top:10px;border-top:.5px solid rgba(22,33,62,.14);font:400 11px/15px var(--font);color:rgba(22,33,62,.6);font-variant-numeric:tabular-nums}

.paper{position:relative;overflow:hidden}
.paper::after{content:attr(data-wm);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-30deg);font:700 34px/1 var(--font);color:var(--brand-navy);opacity:.05;white-space:nowrap;pointer-events:none}
.paper-body .li{display:block;padding-left:1.6em;text-indent:-1.6em}

/* ════════ 날짜 고르기 시트(js/datepick.js, 부장 11-10) — 입력 UI 시안 ①: 시트·44px 칸·남색 선택 원·오늘 얇은 테두리·일요일 붉게·범위 밖 흐리게 ════════ */
.dp-head{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px}
.dp-nav{width:44px;height:44px;border:0;background:none;color:var(--label);font:400 26px/1 var(--font);border-radius:22px}
.dp-ttl{min-height:44px;padding:0 12px;border:0;background:none;color:var(--label);font:600 17px/24px var(--font);border-radius:12px}
.dp-ttl span{color:var(--label-2)}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;padding:0 12px;font:600 13px/24px var(--font);color:var(--label-2)}
.dp-dow .su,.dp-d.su{color:var(--danger)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 12px}
.dp-d{height:44px;border:0;background:none;border-radius:22px;font:400 17px/1 var(--font);color:var(--label);font-variant-numeric:tabular-nums;text-align:center}
.dp-grid:not(.rg) .dp-d{width:100%;max-width:44px;justify-self:center} /* 11-14: 버튼이 text-align:inherit라 숫자가 왼쪽으로 쏠리고 오늘·선택 원이 늘어났음 */
.dp-d.td{box-shadow:inset 0 0 0 1px var(--label-3)}
.dp-d.sel{background:var(--brand-navy);color:var(--on-navy);font-weight:700;box-shadow:none}
.dp-d:disabled,.dp-c:disabled{opacity:.32}
.dp-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 16px}
.dp-c{height:48px;border:0;border-radius:12px;background:var(--fill-3);font:400 17px/1 var(--font);color:var(--label);font-variant-numeric:tabular-nums;text-align:center}
.dp-c.sel{background:var(--brand-navy);color:var(--on-navy);font-weight:700}
.dp-note{margin:12px 16px 0;font:400 13px/19px var(--font);color:var(--label-2);text-align:center}
.dp-foot{display:flex;justify-content:center;gap:24px;padding:8px 16px 4px}
.dp-link{min-height:44px;padding:0 12px;border:0;background:none;color:var(--blue);font:600 15px/1 var(--font)}
.dp-link:disabled{opacity:.32}
/* ── 11-12 날짜 입력 3종(js/datepick.js): ① 빠른 선택 칩 ② 휠 피커(연·월·일 / 오전오후·시·분) ③ 시작~끝 범위 선택 ── */
.dp-quick{display:flex;gap:8px;padding:0 16px 8px;overflow-x:auto;scrollbar-width:none}
.dp-quick::-webkit-scrollbar{display:none}
.dp-quick .chip{flex:none}
.dp-grid.rg{gap:2px 0}
.dp-grid.rg .dp-d.in{border-radius:0;background:var(--lens)}
.dp-grid.rg .dp-d.ra.cap{border-radius:22px 0 0 22px}
.dp-grid.rg .dp-d.rb.cap{border-radius:0 22px 22px 0}
.dp-sum{margin:12px 16px 0;font:400 15px/22px var(--font);color:var(--label-2);text-align:center}
.wh-read{margin:0;padding:0 16px 12px;text-align:center;font:600 17px/24px var(--font)}
.wh{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:220px;margin:0 16px;border-radius:var(--r-in,16px);background:var(--cell-sheet);overflow:hidden}
.wh::before{content:"";position:absolute;left:8px;right:8px;top:88px;height:44px;border-radius:var(--r-btn,12px);background:var(--lens);pointer-events:none}
.wh-col{position:relative;height:220px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent)}
.wh-col::-webkit-scrollbar{display:none}
.wh-col:focus-visible{outline-offset:-2px;border-radius:var(--r-btn,12px)}
.wh-pad{height:88px}
.wh-i{display:block;width:100%;height:44px;border:0;background:none;scroll-snap-align:center;font:400 22px/44px var(--font);color:var(--label-2);text-align:center;font-variant-numeric:tabular-nums;transition:color var(--t-micro) var(--ease)}
.wh-i.sel{color:var(--label);font-weight:600}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dp-dow .su,:root:not([data-theme="light"]) .dp-d.su{color:var(--danger)}:root:not([data-theme="light"]) .dp-d.sel,:root:not([data-theme="light"]) .dp-c.sel{background:#e8edf9;color:var(--brand-navy)}}
:root[data-theme="dark"] .dp-dow .su,:root[data-theme="dark"] .dp-d.su{color:var(--danger)}:root[data-theme="dark"] .dp-d.sel,:root[data-theme="dark"] .dp-c.sel{background:#e8edf9;color:var(--brand-navy)}

/* ════════ 앱 버전 표시(설정·나 맨 아래, 부장 11-11): 마크 → 이름 → 버전·빌드, 가운데 2줄 ════════ */
.ver-line{margin:28px 16px 24px;text-align:center}
.ver{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:44px;min-height:44px;margin:0 auto;padding:10px 16px;border:0;background:none;color:var(--label-2);border-radius:12px}
.ver-mk{display:block;line-height:0;opacity:.5}
.ver-nm{font:600 12px/16px var(--font);color:var(--label-2);letter-spacing:-.01em}
.ver-no{font:400 11px/14px var(--font);color:var(--label-3,var(--label-2));font-variant-numeric:tabular-nums;opacity:.9}

/* ════════ 서비스 이름 글자(마감노트, 부장 11-11): 글자 모양 SVG 대신 SUIT 글자. 마크(아이콘)는 그대로 ════════ */
html .wordmark.wm-t{width:auto;height:auto;font:700 20px/1.2 var(--font);letter-spacing:-.02em;white-space:nowrap}
html .side-brand .wordmark.wm-t{font-size:19px;transform:none}
html .pick-brand .wordmark.wm-t{font-size:26px;transform:none}
html .login-brand .wordmark.wm-t{font-size:22px}
html .welcome .wordmark.wm-t{font-size:30px}
html .launch .wordmark.wm-t{font-size:28px}
html .intro .wordmark.wm-t,html .launch.intro .wordmark.wm-t{width:auto;font-size:30px}
.wm-wrap .wordmark.wm-t{display:inline-block}
.brand-ko:empty,.wm-ko:empty{display:none}

/* ════════ 오류 글자 대비·시트 포커스(전체 점검 4차 #41·#42, 부장 11-11) ════════
   오류 글자색 #ff3b30(흰 바탕 3.2:1)을 4.5:1 이상으로. 큰 면·아이콘은 기존 --red 그대로, 글자만 진하게 */
/* 11-12: --red-text는 base.css의 --danger 별칭 하나로 통일(여기서 따로 정하지 않음) */
html .err,html .err-in,html .auth .err{color:var(--red-text)}
#sheet:focus{outline:none}

/* ════════ 인터넷 끊김 띠(부장 11-11): 위에서 내려오는 작은 알약, transform·opacity만 ════════ */
.net-bar{width:max-content;position:fixed;left:50%;top:calc(var(--st,0px) + 52px);z-index:1900;display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:8px 14px;border-radius:999px;background:var(--label);color:var(--bg);font:500 13px/18px var(--font);box-shadow:var(--float-shadow,0 4px 16px rgba(0,0,0,.2));transform:translate(-50%,-140%);opacity:0;pointer-events:none;transition:transform var(--t-base,.25s) var(--ease-out,ease-out),opacity var(--t-base,.25s) var(--ease-out,ease-out)}
.net-bar.on{transform:translate(-50%,0);opacity:1}
@media (min-width:600px){.net-bar{left:calc(var(--side,0px) + (100% - var(--side,0px)) / 2);top:calc(var(--st,0px) + 64px)}} /* 넓은 화면: 본문 열 가운데·56px 상단바 아래 */
.net-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#ff9f0a}
.net-bar.ok .net-dot{background:#30d158}
.nav-title:focus{outline:none}