/* 버튼 */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;padding:0 20px;border-radius:12px;font:600 17px/24px var(--font);background:var(--btn);
  transition:transform var(--t-base) var(--ease-out),opacity var(--t-fade) var(--ease)}
.btn svg{width:20px;height:20px;stroke-width:1.8}
.btn.sec{background:var(--fill-3);color:var(--blue)}
.btn.plain{background:transparent;color:var(--blue);height:44px}
.btn.small{width:auto;height:32px;padding:0 12px;border-radius:8px;font:600 15px/22px var(--font)}
.btn:disabled{opacity:.32}
.btn.pressing,.pressable.pressing{transform:scale(.97);opacity:.85;transition-duration:var(--t-micro)}
.btn.plain.pressing{transform:none;opacity:.35}
a.btn{text-decoration:none}
.btn .lbl{display:flex;align-items:center;gap:8px;transition:opacity var(--t-micro) var(--ease)}
.btn.busy .lbl{opacity:0}
.btn .spinner{position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px;opacity:0;transition:opacity var(--t-micro) var(--ease)}
.btn.busy .spinner{opacity:1}
.spinner{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:spin 800ms steps(8) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.reason{margin-bottom:8px;font:400 13px/19px var(--font);color:var(--label-2);text-align:center;min-height:18px}

/* 할 일(체크) */
.todo{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)}
.todo .main{padding:12px 0}
.todo .txt{background:linear-gradient(currentColor,currentColor) 0 58%/0 1px no-repeat;
  transition:color var(--t-base) var(--ease),background-size var(--t-base) var(--ease-out) var(--t-base)}
.todo.done .txt{background-size:100% 1px;color:var(--label-3);transition:background-size var(--t-base) var(--ease-out),color var(--t-base) var(--ease) var(--t-base)}
.ck{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;
  transition:background-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease-out)}
.ck svg{width:14px;height:14px;stroke:var(--ck-mark);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ck path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset var(--t-base) var(--ease-out)}
.done .ck{background:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
.done .ck path{stroke-dashoffset:0;transition-delay:40ms}
.todo.pressing .ck{transform:scale(.88);transition-duration:var(--t-micro)}

/* 세그먼트 */
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:32px;padding:2px;margin:0 16px;border-radius:8px;background:var(--fill-3)}
.seg-th{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / var(--n));border-radius:7px;background:var(--seg-th);
  box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);transform:translateX(calc(100% * var(--i)));transition:transform var(--t-move,400ms) var(--ease-move,ease)}
/* 밝기 바꿀 때(th-anim)도 선택 칸이 옆으로 미끄러지게 — th-anim의 전체 전환 규칙이 transform을 지워 툭 바뀌던 것 (디자인 점검, 사장님 11-09) */
html.th-anim .seg-th{transition:transform var(--t-move,400ms) var(--ease-move,ease),background-color .3s ease,box-shadow .3s ease!important}
.seg button{position:relative;z-index:1;font:600 13px/19px var(--font);text-align:center}
.seg button::before{content:"";position:absolute;inset:-8px 0}
.seg-body{transition:opacity var(--t-fade) var(--ease)}

/* 스위치 */
.sw{position:relative;width:51px;height:31px;border-radius:16px;background:var(--sw-off);flex:none;transition:background-color var(--t-base) var(--ease)}
.sw::before{content:"";position:absolute;inset:-7px -4px}
.sw i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:14px;background:var(--white);box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);
  transition:transform var(--t-base) var(--ease-out),width var(--t-base) var(--ease-out)}
.sw[aria-checked="true"]{background:var(--blue)}
.sw[aria-checked="true"] i{transform:translateX(20px)}
.sw.pressing i{width:33px}
.sw[aria-checked="true"].pressing i{transform:translateX(14px)}

/* 수량 조절 */
.stp{display:flex;align-items:center;height:32px;border-radius:8px;background:var(--fill-3);flex:none}
.stp button{position:relative;width:40px;height:32px;display:grid;place-items:center;border-radius:8px;transition:background-color var(--t-base) var(--ease)}
.stp button::before{content:"";position:absolute;inset:-6px 0}
.stp button svg{width:16px;height:16px;stroke-width:2}
.stp button.pressing{background:var(--press);transition-duration:var(--t-micro)}
.stp button:disabled{opacity:.32}
.stp .v{position:relative;min-width:32px;height:22px;overflow:hidden;text-align:center;font:600 17px/24px var(--font)}
.stp .v span{position:absolute;left:0;right:0;top:0}
.roll-in-up{animation:rollInUp var(--t-base) var(--ease-out) both}.roll-out-up{animation:rollOutUp var(--t-micro) var(--ease) both}
.roll-in-down{animation:rollInDown var(--t-base) var(--ease-out) both}.roll-out-down{animation:rollOutDown var(--t-micro) var(--ease) both}
@keyframes rollInUp{from{transform:translateY(70%);opacity:0}}@keyframes rollOutUp{to{transform:translateY(-70%);opacity:0}}
@keyframes rollInDown{from{transform:translateY(-70%);opacity:0}}@keyframes rollOutDown{to{transform:translateY(70%);opacity:0}}

/* 진행 막대 */
.bar{height:4px;border-radius:2px;background:var(--fill-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:2px;background:var(--blue);transform-origin:left;transform:scaleX(var(--p,0));transition:transform var(--t-base) var(--ease-out)}
.prog{padding:12px 16px 16px}
.prog-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.prog-top .rv{font-size:15px;line-height:20px}

/* 숫자 카드 */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 16px}
.card{display:block;width:100%;padding:16px;border-radius:16px;background:var(--cell);text-align:left;transition:transform var(--t-base) var(--ease-out),opacity var(--t-fade) var(--ease)}
.card-k{display:block;font:600 13px/19px var(--font);color:var(--label-2)}
.card-v{display:flex;align-items:baseline;gap:2px;margin-top:4px;font:700 28px/34px var(--font)}
.card-v small{font:600 17px/24px var(--font);color:var(--label-2)}
.card-s{display:block;margin-top:4px;font:400 13px/19px var(--font);color:var(--label-2)}

/* 빈 화면·스켈레톤 */
.empty{display:flex;flex-direction:column;align-items:center;padding:48px 32px;text-align:center}
.empty-t{font:600 17px/24px var(--font)}
.empty-s{margin-top:4px;font:400 15px/22px var(--font);color:var(--label-2);text-wrap:balance}
.empty .btn{margin-top:20px}
.sk{background:var(--fill-3);border-radius:6px}

/* 등장 */
.enter>*{animation:rise var(--t-base) var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.fade-in{animation:fadeIn var(--t-base) var(--ease) both}
@keyframes fadeIn{from{opacity:0}}

/* 탭 막대 */
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;height:calc(49px + var(--sb));padding-bottom:var(--sb);
  background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);transition:transform var(--t-screen) var(--sheet-ease)}
.tabbar::before{content:"";position:absolute;left:0;right:0;top:0;height:.5px;background:var(--sep)}
.tabbar.away{transform:translateX(-30%)}
.tab{position:relative;flex:1;height:49px;display:flex;flex-direction:column;align-items:center;padding-top:6px;gap:2px;color:var(--label-2)}
.tab svg{width:26px;height:26px;stroke-width:1.6;transition:transform var(--t-base) var(--ease-out)}
.tab span{font:600 10px/12px var(--font)}
.tab.on{color:var(--blue)}
.tab.pressing svg{transform:scale(.88);transition-duration:var(--t-micro)}
.tab .tb{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blue);font:600 12px/18px var(--font);text-align:center}

/* 아래 고정 버튼 막대 */
.actbar{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:12px 16px calc(var(--sb) + 16px);background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.actbar::before{content:"";position:absolute;left:0;right:0;top:0;height:.5px;background:var(--sep)}

/* 시트 */
.sheet-root{position:absolute;inset:0;z-index:90;visibility:hidden} /* 전체 화면(.scr 85) 위에 뜨도록 */
.sheet-root.on{visibility:visible}
.scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--t-fade) var(--ease)}
.sheet-root.open .scrim{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - var(--st) - 12px);display:flex;flex-direction:column;background:var(--sheet);border-radius:16px 16px 0 0;
  transform:translateY(100%);transition:transform var(--t-screen) var(--sheet-ease);will-change:transform}
.sheet-root.open .sheet{transform:translateY(0)}
.sheet-root.closing .sheet,.sheet-root.closing .scrim{transition-duration:var(--t-screen)}
.sheet.full{height:calc(100% - var(--st) - 12px)}
.sheet-head{position:relative;flex:none;height:56px;display:flex;align-items:center;justify-content:center;padding:0 60px;touch-action:none}
.grab{position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:2.5px;background:var(--label-3)}
.sheet-head h2{font:600 17px/24px var(--font);white-space:nowrap}
.sheet-x{position:absolute;right:8px;top:6px;width:44px;height:44px;display:grid;place-items:center;transition:opacity var(--t-fade) var(--ease)}
.sheet-x span{width:30px;height:30px;border-radius:15px;background:var(--fill-3);display:grid;place-items:center;color:var(--label-2)}
.sheet-x svg{width:14px;height:14px;stroke-width:2.4}
.sheet-x.pressing{opacity:.5;transition-duration:var(--t-micro)}
.sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 0 calc(var(--sb) + 16px)}
.sheet .group{background:var(--cell-sheet)}
.sheet .avs .av{box-shadow:0 0 0 2px var(--cell-sheet)}
.sheet-text{padding:0 32px;font:400 15px/22px var(--font);color:var(--label-2);text-align:center;text-wrap:balance}
.sheet-acts{display:grid;gap:12px;padding:24px 16px 0}
.field{display:block;width:100%;min-height:48px;padding:12px 16px;border:0;background:transparent;resize:none}
textarea.field{min-height:132px}
.field::placeholder{color:var(--label-3)}
.err{padding:8px 32px 0;font:400 13px/19px var(--font);color:var(--red)}
.err:empty{display:none}
.time-in{border:0;background:var(--fill-3);border-radius:8px;height:32px;padding:0 12px;font:400 17px/24px var(--font);color:var(--label);font-variant-numeric:tabular-nums}

/* 카메라 시트 */
.sheet.cam{background:var(--black);color:var(--white)}
.sheet.cam .grab{background:rgba(255,255,255,.3)}
.sheet.cam .sheet-x span{background:rgba(255,255,255,.16);color:rgba(255,255,255,.8)}
.cam-view{position:relative;display:flex;flex-direction:column;align-items:center;padding:24px 16px 0}
.cam-feed{position:relative;width:100%;aspect-ratio:3/4;max-height:56vh;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 40%,#2a2c31 0%,#141518 60%,#1a1a2e 100%);display:grid;place-items:center}
.cam-screen{position:absolute;width:62%;aspect-ratio:1;border-radius:8px;background:#e9eaee;filter:blur(1px);transform:perspective(600px) rotateX(6deg) rotateZ(-2deg);opacity:.9;display:grid;place-items:center}
.cam-screen svg{width:78%;height:78%}
.finder{position:relative;width:64%;aspect-ratio:1;transition:transform var(--t-base) var(--ease-out)}
.finder svg{position:absolute;inset:0;width:100%;height:100%;stroke:var(--white);stroke-width:4;fill:none;stroke-linecap:round;transition:stroke var(--t-base) var(--ease)}
.finder.got{transform:scale(.92)}
.finder.got svg{stroke:var(--brand-gold)}
.got-badge{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:32px;background:var(--brand-gold);display:grid;place-items:center;opacity:0;transform:scale(.95);transition:opacity var(--t-fade) var(--ease),transform var(--t-base) var(--ease-out)}
.got-badge svg{width:32px;height:32px;stroke:var(--white);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.got-badge path{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset var(--t-base) var(--ease-out) 120ms}
.finder.got+.got-badge,.got .got-badge{opacity:1;transform:scale(1)}
.cam-feed.got .got-badge path{stroke-dashoffset:0}
.cam-hint{margin-top:20px;font:400 15px/22px var(--font);color:rgba(255,255,255,.72);text-align:center}
.cam-view .btn.plain{margin-top:8px;color:var(--brand-gold);width:auto}
.cam-note{margin-top:4px;font:400 13px/19px var(--font);color:rgba(255,255,255,.4)}

/* 토스트 */
.toast{position:absolute;left:50%;bottom:calc(var(--sb) + 49px + 16px);z-index:95;min-height:44px;max-width:calc(100% - 32px);box-sizing:border-box;padding:11px 16px 11px 12px;border-radius:22px;display:flex;align-items:center;gap:8px;
  background:var(--toast);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--on-navy);font:600 15px/22px var(--font);white-space:normal;text-wrap:balance;word-break:keep-all;width:max-content;
  opacity:0;transform:translate(-50%,8px) scale(.95);transition:opacity var(--t-fade) var(--ease),transform var(--t-micro) var(--ease-out);pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1);transition-duration:var(--t-base)}
.toast svg{flex:none;width:20px;height:20px;stroke-width:2} /* 긴 안내도 화면 안에서 줄바꿈(대리 지적 11-09) */
#app.tab-hidden .toast{bottom:calc(var(--sb) + 136px)}

/* 완료 화면 */
.done-screen{position:absolute;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 32px calc(var(--sb) + 96px);opacity:0;transition:opacity var(--t-fade) var(--ease);visibility:hidden}
.done-screen.on{opacity:1;visibility:visible}
.done-screen.leaving{opacity:0;transition-duration:var(--t-base)}
.big-ck{width:88px;height:88px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.big-ck circle{stroke:var(--blue);stroke-width:3;stroke-dasharray:258;stroke-dashoffset:258;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 500ms var(--ease-out) 100ms}
.big-ck path{stroke:var(--blue);stroke-width:4;stroke-dasharray:48;stroke-dashoffset:48;transition:stroke-dashoffset 300ms var(--ease-out) 500ms}
.done-screen.on .big-ck circle,.done-screen.on .big-ck path{stroke-dashoffset:0}
.done-t{margin-top:24px;font:700 28px/34px var(--font);text-align:center;text-wrap:balance}
.done-s{margin-top:8px;font:400 17px/24px var(--font);color:var(--label-2);text-align:center;text-wrap:balance}
.done-t,.done-s{opacity:0;transform:translateY(12px);transition:opacity 400ms var(--ease-out) 600ms,transform 400ms var(--ease-out) 600ms}
.done-s{transition-delay:640ms}
.done-screen.on .done-t,.done-screen.on .done-s{opacity:1;transform:none}
.done-btn{position:absolute;left:16px;right:16px;bottom:calc(var(--sb) + 16px);width:auto}

/* 역할 고르기 */
.pick{position:absolute;inset:0;z-index:80;background:var(--bg-grouped);display:flex;flex-direction:column;justify-content:center;padding-bottom:calc(var(--sb) + 48px);transition:opacity var(--t-fade) var(--ease)}
.pick.leaving{opacity:0;pointer-events:none}
.pick h1{padding:0 32px;font:700 28px/34px var(--font)}
.pick>p{padding:8px 32px 0;font:400 15px/22px var(--font);color:var(--label-2)}
.pick .group{margin-top:24px}

/* 당겨서 새로고침 */
.ptr{position:absolute;left:50%;top:calc(var(--st) + 44px);width:28px;height:28px;margin-left:-14px;opacity:0;z-index:1;color:var(--label-2);pointer-events:none}
.ptr .spinner{width:28px;height:28px;animation:none}
.ptr.spinning .spinner{animation:spin 800ms steps(8) infinite}

/* QR 화면 */
.qr-box{display:flex;flex-direction:column;align-items:center;padding:24px 16px 20px}
.qr-box svg.qr{width:200px;height:200px;border-radius:8px;transition:opacity var(--t-fade) var(--ease)}
.qr-box h3{margin-top:16px;font:600 17px/24px var(--font)}
.qr-box p{margin-top:2px;font:400 15px/22px var(--font);color:var(--label-2)}
.qr-box .bar{width:200px;margin-top:16px}
.qr-box .bar i{transition:none}
.step-n{width:24px;height:24px;border-radius:12px;background:var(--fill-3);display:grid;place-items:center;font:600 13px/1 var(--font);flex:none}
.notice-h{padding:0 16px}
.notice-h h2{font:700 22px/28px var(--font);text-wrap:balance}
.notice-h p{margin-top:4px;font:400 13px/19px var(--font);color:var(--label-2)}
.notice-b{padding:16px;font:400 17px/26px var(--font);white-space:pre-line}