:root{
  --ink:#14161A; --ink2:#6A7080; --ink3:#A0A6B4;
  --line:#ECEEF2; --soft:#F4F7FC; --point:#7A4DF5; --pointsoft:#F0EBFF;
  --red:#E23A2E; --amber:#E08700;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 목록을 훑다가 위로 튕기면 새로고침이 걸려 앱이 처음부터 다시 뜬다.
   업무 중 실수가 잦아 막아둔다. 갱신은 탭을 다시 누르면 된다. */
html{overscroll-behavior-y:contain}

html,body{overscroll-behavior-y:contain;margin:0;padding:0;background:#fff;height:100%}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif;
     color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.screen{display:none;min-height:100vh}
.screen.on{display:block}

/* ── 1. 스플래시 ── */
/* 안드로이드가 먼저 칠하는 색(manifest background_color)과 똑같은 단색으로 시작한다.
   여기가 어긋나면 앱이 뜨는 순간 색이 튀어서 겉도는 느낌이 난다.
   그라데이션은 그 위에 살짝 늦게 덮는다. */
#s-splash{background:#7B3FE4;
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  position:relative;overflow:hidden}
#s-splash::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;
  background:linear-gradient(150deg,#7B3FE4 0%,#9B3BE0 45%,#C93BC8 100%);
  background-size:220% 220%;
  animation:spFade .7s ease-out .35s forwards, spBg 3s ease-in-out .35s infinite}
@keyframes spFade{to{opacity:1}}
#s-splash.on{display:flex}

/* 안드로이드 스플래시 아이콘을 이어받아 커지며 흩어진다 */
.bn-icon{position:absolute;top:50%;left:50%;width:124px;height:124px;z-index:3;
  margin:-62px 0 0 -62px;border-radius:28px;
  animation:spIcon 1s cubic-bezier(.55,0,.35,1) both}

/* 아이콘이 터질 때 퍼지는 빛 */
#s-splash::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 65%);
  opacity:0;animation:spGlow .9s ease-out .48s both}

.bn{font-size:92px;font-weight:800;color:#fff;letter-spacing:-.06em;line-height:1;
  position:relative;z-index:2;display:flex}
.bn span{display:block;animation:spMark .72s cubic-bezier(.16,1.7,.3,1) both}
.bn span:nth-child(1){animation-name:spMarkL;animation-delay:.52s}
.bn span:nth-child(2){animation-name:spMarkR;animation-delay:.60s}

.bn-sub{position:relative;z-index:2;display:flex;gap:.28em;
  color:rgba(255,255,255,.78);font-size:14px;font-weight:600}
.bn-sub i{display:block;font-style:normal;
  animation:spSub .46s cubic-bezier(.2,1.3,.4,1) both}
.bn-sub i:nth-child(1){animation-delay:1.06s}
.bn-sub i:nth-child(2){animation-delay:1.11s}
.bn-sub i:nth-child(3){animation-delay:1.16s}
.bn-sub i:nth-child(4){animation-delay:1.21s}
.bn-sub i:nth-child(5){animation-delay:1.26s}
.bn-sub i:nth-child(6){animation-delay:1.31s}
.bn-sub i:nth-child(7){animation-delay:1.36s}
.bn-sub i:nth-child(8){animation-delay:1.41s}
.bn-sub i:nth-child(9){animation-delay:1.46s}

/* 넘어가기 직전 */
#s-splash.out{animation:spOut .3s ease forwards}

@keyframes spBg{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}
@keyframes spIcon{
  0%  {opacity:1;transform:scale(1);filter:blur(0)}
  38% {opacity:1;transform:scale(.92);filter:blur(0)}
  100%{opacity:0;transform:scale(3.4);filter:blur(22px)}
}
@keyframes spGlow{
  0%  {opacity:0;transform:scale(.4)}
  30% {opacity:1}
  100%{opacity:0;transform:scale(3.6)}
}
@keyframes spMarkL{
  0%  {opacity:0;transform:translateX(-140px) rotate(-24deg) scale(.5);filter:blur(16px)}
  55% {opacity:1;filter:blur(0)}
  100%{opacity:1;transform:translateX(0) rotate(0) scale(1);filter:blur(0)}
}
@keyframes spMarkR{
  0%  {opacity:0;transform:translateX(140px) rotate(24deg) scale(.5);filter:blur(16px)}
  55% {opacity:1;filter:blur(0)}
  100%{opacity:1;transform:translateX(0) rotate(0) scale(1);filter:blur(0)}
}
@keyframes spSub{
  0%  {opacity:0;transform:translateY(22px) scale(.7)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes spOut{
  0%  {opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.09)}
}

@media (prefers-reduced-motion: reduce){
  #s-splash,.bn-icon,.bn span,.bn-sub i,#s-splash::after{animation:none}
  .bn-icon,#s-splash::after{opacity:0}
}

/* ── 2. 온보딩 ── */
#s-intro{position:relative;height:100vh;background:#000;overflow:hidden;display:none}
#s-intro.on{display:block}
.photo{position:absolute;inset:0}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}
.photo img.on{opacity:1}
.scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.05) 24%,rgba(0,0,0,.30) 52%,rgba(0,0,0,.92) 100%)}
.wm{position:relative;z-index:3;text-align:center;padding:calc(env(safe-area-inset-top) + 24px) 0 0;
    font-size:25px;font-weight:800;letter-spacing:-.04em;color:#fff}
.btm{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 22px calc(env(safe-area-inset-bottom) + 26px)}
.cap h2{font-size:27px;font-weight:800;letter-spacing:-.04em;margin:0 0 9px;line-height:1.32;color:#fff}
.cap p{color:rgba(255,255,255,.72);font-size:15.5px;margin:0}
.dots{display:flex;gap:6px;justify-content:center;padding:20px 0 18px}
.dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.35);transition:.25s}
.dots i.on{width:22px;background:#fff}
.btn{display:block;width:100%;padding:17px;border:0;border-radius:14px;font-family:inherit;
     font-size:16px;font-weight:700;background:var(--point);color:#fff}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);margin-top:10px}

/* ── 3. 홈 ── */
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);
     padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;display:flex;align-items:center;gap:10px}
.mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,#7B3FE4,#C93BC8);
      color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:-.04em}
.top .st{flex:1;font-size:17px;font-weight:700;letter-spacing:-.03em}
.top .st i{font-style:normal;color:var(--ink3);font-size:12px;margin-left:3px}
.bell{position:relative;width:23px;height:23px;cursor:pointer}
/* 아이콘이 작아 잘 안 눌려서 주변 여백까지 눌리게 한다 */
.bell::after{content:'';position:absolute;left:-14px;right:-14px;top:-14px;bottom:-14px}
.bell .d{position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:50%;background:var(--red)}
main{padding:16px 18px calc(84px + env(safe-area-inset-bottom))}

/* 날짜·날씨 */
.wx{background:var(--soft);border-radius:16px;padding:18px 20px;display:flex;align-items:center;gap:16px;margin-bottom:12px}
.wx .l{flex:1}
.wx .dt{font-size:20px;font-weight:800;letter-spacing:-.03em}
.wx .wd{font-size:14px;color:var(--ink2);margin-top:3px}
.wx .tp{font-size:32px;font-weight:800;letter-spacing:-.04em}
.wx .ic{font-size:30px}

/* 특수일정 */
.spec{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;
      padding:15px 18px;margin-bottom:26px}
.dd{background:var(--ink);color:#fff;font-size:12px;font-weight:800;padding:5px 9px;border-radius:7px;flex:none}
.spec .t{flex:1;font-size:15px;font-weight:600}
.spec .s{font-size:13px;color:var(--ink2);margin-top:2px;font-weight:400}

.sh{font-size:16px;font-weight:700;letter-spacing:-.02em;margin:0 0 12px;display:flex;justify-content:space-between;align-items:baseline}
.sh span{font-size:13px;font-weight:500;color:var(--ink2)}
.sec{margin-bottom:30px}

/* 출퇴근 */
.att{border:1px solid var(--line);border-radius:16px;padding:6px 18px}
.att .r{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.att .r:last-child{border-bottom:0}
.av{width:38px;height:38px;border-radius:50%;flex:none}
/* 큰 자리 : 직원 목록 · 근무표 · 근로계약서. 코드는 lg 를 붙이고 있었는데
   규칙이 없어서 그동안 전부 작은 크기로 나왔다. */
.av.lg{width:56px;height:56px}
.av.off{opacity:.45}
.att .nm{flex:1;font-size:15.5px;font-weight:600}
.att .nm em{display:block;font-style:normal;font-size:12.5px;color:var(--ink3);font-weight:400;margin-top:1px}
.pill{font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:99px}
.pill.in{background:var(--pointsoft);color:var(--point)}
.pill.no{background:#FDECEA;color:var(--red)}
.pill.soon{background:#FFF4E0;color:var(--amber)}

/* 특이사항 */
.iss{border-top:1px solid var(--line)}
.iss .r{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot.r{background:var(--red)} .dot.a{background:var(--amber)}
.tx{flex:1;min-width:0}
.tx b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.tx span{display:block;font-size:13px;color:var(--ink2);margin-top:3px}
.act{font-size:14px;font-weight:700;color:var(--point);flex:none}

/* 빠른 실행 */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 0}
.gi{text-align:center;padding:6px 0}
.gi .bx{width:50px;height:50px;margin:0 auto 8px;border-radius:15px;background:var(--soft);
        display:flex;align-items:center;justify-content:center;color:var(--point)}
.gi .bx svg{width:23px;height:23px}
.gi .lb{font-size:12.5px;font-weight:500;letter-spacing:-.02em}

/* 본사 소식 */
.nt{display:flex;align-items:center;gap:11px;padding:15px 0;border-top:1px solid var(--line)}
.tag{background:var(--ink);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px;flex:none}
.go{color:var(--ink3);font-size:16px}

nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--line);
    display:flex;padding:9px 0 calc(env(safe-area-inset-bottom) + 9px)}
nav button{flex:1;background:0;border:0;font-family:inherit;color:var(--ink3);
           display:flex;flex-direction:column;align-items:center;gap:4px;padding:0}
nav svg{width:23px;height:23px}
nav .lb{font-size:11px;font-weight:600}
nav button.on{color:var(--point)}

/* ── 인증 · 매장 만들기 ── */
#s-auth,#s-store{display:none;min-height:100vh;background:#fff}
#s-auth.on,#s-store.on{display:block}
.form{padding:calc(env(safe-area-inset-top) + 34px) 22px 40px;max-width:460px;margin:0 auto}
.form .mk{width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,#7B3FE4,#C93BC8);
  color:#fff;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;
  letter-spacing:-.04em;margin-bottom:22px}
.form h1{font-size:26px;font-weight:800;letter-spacing:-.04em;margin:0 0 6px;line-height:1.28}
.form .lead{color:var(--ink2);font-size:14.5px;margin:0 0 28px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:13.5px;font-weight:600;color:var(--ink2);margin-bottom:7px}
.fld input,.fld select{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:13px;
  font-family:inherit;font-size:16px;color:var(--ink);background:#fff;outline:none}
.fld input:focus{border-color:var(--point)}
.fld .hint{font-size:12.5px;color:var(--ink3);margin-top:6px}
.msg{font-size:13.5px;padding:13px 15px;border-radius:12px;margin-bottom:16px;display:none}
.msg.on{display:block}
.msg.err{background:#FDECEA;color:var(--red)}
.msg.ok{background:var(--pointsoft);color:var(--point)}
.msg.info{background:#FFF4E0;color:#B36A00}
.btn-main{display:block;width:100%;padding:17px;border:0;border-radius:14px;font-family:inherit;
  font-size:16px;font-weight:700;background:var(--point);color:#fff;margin-top:8px}
.btn-main:disabled{background:#D6D9E0;color:#8E939C}
.btn-text{display:block;width:100%;padding:15px;border:0;background:0;font-family:inherit;
  font-size:14.5px;font-weight:600;color:var(--ink2);margin-top:4px}
.load{display:none;padding:80px 0;text-align:center;color:var(--ink3);font-size:14px}
.tpane{display:none}
.tpane.on{display:block}

/* 알림함 */
.bell .cnt{position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;
  display:none;align-items:center;justify-content:center}
.bell .cnt.on{display:flex}
#s-noti{display:none;min-height:100vh;background:#fff}
#s-noti.on{display:block}
.nhd{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 13px) 18px 13px;display:flex;align-items:center;gap:12px}
.nhd .bk{font-size:22px;color:var(--ink);line-height:1}
.nhd .tt{flex:1;font-size:17px;font-weight:700;letter-spacing:-.03em}
.nhd .rd{font-size:13px;font-weight:600;color:var(--point)}
.nlist{padding:4px 18px 40px}
.ni{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.ni .ic{width:34px;height:34px;border-radius:11px;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:16px;background:var(--soft)}
.ni.unread .ic{background:var(--pointsoft)}
.ni .tx b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.ni.unread .tx b::after{content:'';display:inline-block;width:6px;height:6px;border-radius:99px;
  background:var(--point);margin-left:6px;vertical-align:middle}
.ni .tx p{margin:4px 0 0;font-size:13px;color:var(--ink2);line-height:1.55}
.ni .tx .mt{margin-top:6px;font-size:11.5px;color:var(--ink3)}
.nempty{padding:90px 20px;text-align:center;color:var(--ink3);font-size:14px}

/* 직원 화면 */
#s-staff{display:none;min-height:100vh;background:#fff}
#s-staff.on{display:block}
.slist{padding:0 18px 46px}
.tipbox{background:var(--soft);border-radius:14px;padding:15px 16px;margin-bottom:22px;
  font-size:13.5px;color:var(--ink2);line-height:1.6}
.tipbox b{color:var(--ink)}
.bizno{display:flex;align-items:center;gap:8px;margin-top:9px;padding:11px 13px;
  background:#fff;border:1px solid var(--line);border-radius:11px}
.bizno .v{flex:1;font-size:15px;font-weight:800;letter-spacing:.01em}
.bizno .cp{font-size:12.5px;font-weight:700;color:var(--point)}
.kbtn{display:block;width:100%;margin-top:11px;padding:14px;border:0;border-radius:12px;
  background:#FEE500;color:#3A1D1D;font-family:inherit;font-size:14.5px;font-weight:800}
.reqcard{border:1.5px solid #FFD98A;background:#FFFDF7;border-radius:14px;padding:15px 16px;margin-bottom:10px}
.reqcard .rn{font-size:15.5px;font-weight:700}
.reqcard .rw{font-size:12.5px;color:var(--ink2);margin-top:3px}
.reqcard .ract{display:flex;gap:8px;margin-top:12px}
.reqcard select{flex:none;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:13px;background:#fff}
.reqcard button{flex:1;padding:10px;border:0;border-radius:9px;font-family:inherit;
  font-size:13.5px;font-weight:700}
.reqcard .ok{background:var(--point);color:#fff}
.reqcard .no{background:var(--soft);color:var(--ink2)}
.srow{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.srow .info{flex:1;min-width:0}
.srow .nm{font-size:16px;font-weight:700;letter-spacing:-.02em}
.srow .meta{font-size:13px;color:var(--ink2);margin-top:3px}
.srow .ctag{display:inline-block;font-size:11.5px;font-weight:700;border-radius:7px;
  padding:4px 9px;margin-top:7px}
.ctag.none{background:#FDECEA;color:var(--red)}
.ctag.wait{background:#FFF4E0;color:#B36A00}
.ctag.done{background:#E6F6EF;color:#0A7A54}
.srow .side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.wagein{width:96px;padding:8px 9px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:13px;text-align:right}
.leavebtn{font-size:11.5px;color:var(--ink3)}
.moretgl{display:block;width:100%;margin-top:22px;padding:14px;border:0;background:0;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink2)}
.load.on{display:block}

/* 광고 배너 */
.banner{position:relative;margin-bottom:18px;border-radius:16px;overflow:hidden;background:var(--soft);height:150px}
.banner .bslide{position:absolute;inset:0;padding:20px 22px;display:flex;flex-direction:column;
  justify-content:center;opacity:0;transition:opacity .5s;pointer-events:none}
.banner .bslide.on{opacity:1;pointer-events:auto}
.banner .bt{font-size:13px;font-weight:700;color:var(--point);margin-bottom:6px}
.banner .bh{font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.32}
.banner .bs{font-size:13.5px;color:var(--ink2);margin-top:6px}
.banner .bnum{position:absolute;right:12px;bottom:11px;background:rgba(20,22,26,.55);color:#fff;
  font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px}

/* 날씨 — 가로 스와이프 (높이 25% 축소) */
.wx{padding:0;overflow:hidden;position:relative}
.wxrail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.wxrail::-webkit-scrollbar{display:none}
.wxpage{flex:0 0 100%;scroll-snap-align:start;padding:13px 18px}
.wx .wtop{display:flex;align-items:center;gap:11px}
.wx .dt{font-size:16px;font-weight:800;letter-spacing:-.03em}
.wx .wd{font-size:12.5px;color:var(--ink2);margin-top:2px}
.wx .tp{font-size:24px;font-weight:800;letter-spacing:-.04em}
.wx .ic{font-size:22px}
.wxcmt{margin-top:11px;padding-top:11px;border-top:1px solid #E3E9F3;
  font-size:13px;color:var(--ink2);line-height:1.5}
.wx .peek{margin-left:auto;display:flex;align-items:center;gap:5px;
  font-size:12px;color:var(--ink2);font-weight:600;white-space:nowrap}
.wx .peek .pe{font-size:15px}
.wx .peek .pc{color:var(--ink3);font-size:13px;margin-left:1px}
.wx3{display:flex;gap:8px;min-height:52px;align-items:center}
.wx3 div{flex:1;text-align:center}
.wx3 .e{font-size:17px;margin:2px 0}
.wx3 div{flex:1;text-align:center}
.wx3 .d{font-size:12px;color:var(--ink2)}
.wx3 .e{font-size:19px;margin:4px 0 3px}
.wx3 .t{font-size:13px;font-weight:700}
.wx3 .t em{font-style:normal;color:var(--ink3);font-weight:500}

/* 특수일정 */
.spec{cursor:pointer;align-items:center}
.spec .t{font-size:15.5px;font-weight:700;line-height:1.3}
.spec .s{font-size:13px;color:var(--ink2);margin-top:3px;line-height:1.3}
.spec .arw{color:var(--ink3);font-size:26px;line-height:1;transition:transform .2s;
  width:26px;text-align:center}
.spec.open .arw{transform:rotate(180deg)}
.spec.open{border-radius:16px 16px 0 0;margin-bottom:0;border-bottom-color:transparent}
.spec-body{display:none;margin-top:-1px;border:1px solid var(--line);border-top:0;
  border-radius:0 0 16px 16px;margin-bottom:26px;
  max-height:186px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.spec-body.on{display:block}
.spec-body::-webkit-scrollbar{width:3px}
.spec-body::-webkit-scrollbar-thumb{background:#D9DDE5;border-radius:9px}
.spec-body .sr{display:flex;gap:12px;align-items:flex-start;padding:13px 18px;border-top:1px solid var(--line)}
.spec-body .sr:first-child{border-top:0}
.spec-body .sd{flex:none;min-width:52px;font-size:12px;font-weight:800;color:var(--point);padding-top:1px}
.spec-body .sd.duty{color:var(--red)}
.spec-body .sn{font-size:14.5px;font-weight:700}
.spec-body .sx{font-size:12.8px;color:var(--ink2);line-height:1.55;margin-top:3px}
.spec-body .sx b{color:var(--ink);font-weight:700}

/* 오늘의 팁 */
.tips{position:relative;height:138px;margin-bottom:26px;border-radius:16px;
  background:var(--pointsoft);overflow:hidden}
.tips .tp{position:absolute;inset:0;padding:15px 17px;opacity:0;transition:opacity .5s}
.tips .tp.on{opacity:1}
.tips .bd{display:inline-flex;align-items:center;gap:5px;background:var(--point);color:#fff;
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:99px;margin-bottom:9px}
.tips .th{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.35}
.tips .tb{font-size:12.8px;color:var(--ink2);line-height:1.52;margin-top:5px}
.tips .tb b{color:var(--point);font-weight:800}
.tips .ts{font-size:11px;color:var(--ink3);margin-top:7px}
.tips .tnum{position:absolute;right:13px;top:15px;font-size:11px;color:var(--ink3);font-weight:600}

/* 역할 선택 · 직원 신청 */
#s-role,#s-join,#s-wait{display:none;min-height:100vh;background:#fff}
#s-role.on,#s-join.on,#s-wait.on{display:block}
.pick{display:flex;align-items:center;gap:14px;padding:19px 18px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:16px;cursor:pointer}
.pick:active{background:var(--soft)}
.pick .pi{width:46px;height:46px;border-radius:14px;background:var(--soft);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:22px}
.pick .pt{flex:1}
.pick .pt b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em}
.pick .pt span{display:block;font-size:13px;color:var(--ink2);margin-top:3px}
.found{display:none;background:var(--pointsoft);border-radius:14px;padding:15px 16px;margin-bottom:16px}
.found.on{display:block}
.found .fn{font-size:16px;font-weight:700;letter-spacing:-.02em}
.found .fa{font-size:13px;color:var(--ink2);margin-top:4px}
.waitic{font-size:52px}
.waitbox{background:var(--soft);border-radius:14px;padding:17px 18px;margin:26px 0 10px;
  font-size:13.5px;color:var(--ink2);line-height:1.7}

/* 배지 · 주목 효과 */
nav button{position:relative}
.tabdot{position:absolute;top:-2px;right:calc(50% - 20px);min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;
  display:none;align-items:center;justify-content:center;line-height:1}
.tabdot.on{display:flex}

.gi{position:relative}
.gi .gdot{position:absolute;top:-3px;right:14px;min-width:19px;height:19px;padding:0 5px;
  border-radius:99px;background:var(--red);color:#fff;font-size:11px;font-weight:800;
  display:none;align-items:center;justify-content:center;line-height:1;z-index:2}
.gi .gdot.on{display:flex;animation:pop 1.4s ease-in-out infinite}
.gi.alert .bx{animation:glow 1.4s ease-in-out infinite}

@keyframes pop{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.18)}
}
@keyframes glow{
  0%,100%{background:var(--soft);box-shadow:0 0 0 0 rgba(226,58,46,0)}
  50%{background:#FDECEA;box-shadow:0 0 0 5px rgba(226,58,46,.13)}
}
@media (prefers-reduced-motion: reduce){
  .gi .gdot.on,.gi.alert .bx{animation:none}
}

/* 직원 화면 승인 대기 강조 */
.reqcard{animation:cardin .35s ease-out}
@keyframes cardin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 직원 단일 화면 */
#s-emp{display:none;min-height:100vh;background:#fff}
#s-emp.on{display:block}
.clockcard{background:var(--ink);border-radius:20px;padding:26px 22px 22px;color:#fff;
  text-align:center;margin-bottom:30px}
.clockcard .cst{font-size:13.5px;color:#8E949E}
.clockcard .cbig{font-size:34px;font-weight:800;letter-spacing:-.04em;margin-top:8px;line-height:1.15}
.clockcard .csub{font-size:14px;color:#9BA2AC;margin-top:7px;min-height:20px}
.clockcard .cbtn{display:block;width:100%;margin-top:20px;padding:19px;border:0;border-radius:15px;
  font-family:inherit;font-size:17px;font-weight:800;background:#33373F;color:#8E949E}
.clockcard .cbtn.go{background:var(--point);color:#fff}
.clockcard .cbtn.out{background:#fff;color:var(--ink)}
.clockcard .chint{font-size:12.5px;color:#7B818B;line-height:1.6;margin-top:13px}
.wkbox{display:flex;border:1px solid var(--line);border-radius:16px;margin-top:14px}
.wkbox div{flex:1;padding:19px 0;text-align:center}
.wkbox div+div{border-left:1px solid var(--line)}
.wk-n{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.wk-n::after{content:'시간';font-size:13px;font-weight:600;color:var(--ink2);margin-left:3px}
.wk-n.plain::after{content:'일'}
.wk-l{font-size:12.5px;color:var(--ink2);margin-top:7px}
.wrow{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}
.wrow .wd{width:26px;font-size:14px;font-weight:700;flex:none}
.wrow.today .wd{color:var(--point)}
.wrow .wt{flex:1;font-size:14.5px}
.wrow .wr{font-size:13px;color:var(--ink2)}
.wrow.today{background:var(--pointsoft);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:10px}

/* 매장 QR */
#s-qr{display:none;min-height:100vh;background:#fff}
#s-qr.on{display:block}
.qrsheet{border:1px solid var(--line);border-radius:20px;padding:26px 22px 22px;
  text-align:center;margin-bottom:18px}
.qs-brand{width:44px;height:44px;margin:0 auto 14px;border-radius:13px;
  background:linear-gradient(145deg,#7B3FE4,#C93BC8);color:#fff;font-size:16px;font-weight:800;
  display:flex;align-items:center;justify-content:center;letter-spacing:-.04em}
.qs-title{font-size:20px;font-weight:800;letter-spacing:-.03em}
.qs-sub{font-size:14px;color:var(--ink2);margin-top:5px}
.qs-box{margin:20px auto 16px;width:220px;max-width:100%}
.qs-box canvas{display:block;width:100%!important;height:auto!important;image-rendering:pixelated}
.qs-guide{font-size:14px;color:var(--ink);line-height:1.6;font-weight:600}
.qs-foot{font-size:12px;color:var(--ink3);margin-top:14px;letter-spacing:.1em}

@media print{
  body{background:#fff}
  .screen{display:none!important}
  #s-qr{display:block!important;min-height:auto}
  .nhd,.tipbox,.btn-main,.btn-text,.sh,.rows,nav{display:none!important}
  .slist{padding:0}
  .qrsheet{border:0;padding:0;margin:0;page-break-inside:avoid}
  /* 인쇄 버튼이 고른 한 장만 나온다 */
  body[data-print="clock"] #qr-sheet-promo,
  body[data-print="promo"] #qr-sheet-clock{display:none!important}
  #qr-stat{display:none!important}
  .qs-brand{width:70px;height:70px;border-radius:20px;font-size:26px;margin-bottom:26px}
  .qs-title{font-size:38px}
  .qs-sub{font-size:22px;margin-top:10px}
  .qs-box{width:420px;margin:44px auto 34px}
  .qs-guide{font-size:26px;line-height:1.55}
  .qs-foot{font-size:18px;margin-top:34px}
}

/* 새로 들어온 출퇴근 기록 — 사장님이 한 번 볼 때까지 */
.att .r.fresh{position:relative}
.att .r.fresh .pill{animation:pillblink 1.5s ease-in-out infinite}
.att .r.fresh::before{content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:99px;background:var(--point);animation:pillblink 1.5s ease-in-out infinite}
@keyframes pillblink{
  0%,100%{opacity:1}
  50%{opacity:.35}
}
@media (prefers-reduced-motion: reduce){
  .att .r.fresh .pill,.att .r.fresh::before{animation:none}
}

/* 오늘의 팁 — 좌우 슬라이드 */
.tips{touch-action:pan-y}
.tipdots{position:absolute;left:0;right:0;bottom:9px;display:flex;gap:5px;justify-content:center;z-index:2}
.tipdots i{width:5px;height:5px;border-radius:99px;background:#C9BFF0;transition:.2s;cursor:pointer}
.tipdots i.on{width:15px;background:var(--point)}
.tips .tnum{display:none}

/* 알림 설정 */
#s-notiset{display:none;min-height:100vh;background:#fff}
#s-notiset.on{display:block}
.swrow{display:flex;align-items:flex-start;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.swrow .sw-tx{flex:1}
.swrow .sw-tx b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.swrow .sw-tx span{display:block;font-size:13px;color:var(--ink2);margin-top:4px;line-height:1.5}
.swrow .sw-tx em{display:block;font-style:normal;font-size:12.5px;color:var(--amber);margin-top:5px}
.sw{position:relative;width:50px;height:30px;flex:none;border-radius:99px;background:#D9DDE5;
  transition:background .2s;cursor:pointer;margin-top:2px}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:99px;
  background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on{background:var(--point)}
.sw.on::after{transform:translateX(20px)}

/* 근무표 */
#s-sched,#s-schededit{display:none;min-height:100vh;background:#fff}
#s-sched.on,#s-schededit.on{display:block}
.dayrow{display:flex;align-items:center;gap:10px;padding:13px 13px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:14px;transition:.15s}
.dayrow.on{border-color:var(--point);background:var(--pointsoft)}
.daychk{width:26px;height:26px;border-radius:9px;border:1.5px solid var(--line);flex:none;
  display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer}
.dayrow.on .daychk{background:var(--point);border-color:var(--point)}
.daychk svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none;display:none}
.dayrow.on .daychk svg{display:block}
.dayname{width:26px;font-size:15px;font-weight:700;flex:none}
.dayrow:not(.on) .dayname{color:var(--ink3)}
.daytime{margin-left:auto;display:flex;align-items:center;gap:4px}
.daytime input{width:112px;padding:9px 4px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:14px;text-align:center;background:#fff}
.dayrow:not(.on) .daytime{opacity:.35;pointer-events:none}
.scrow{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.scrow .info{flex:1}
.scrow .nm{font-size:16px;font-weight:700}
.scrow .meta{font-size:13px;color:var(--ink2);margin-top:4px;line-height:1.5}
.scrow .meta.none{color:var(--red)}

/* 근로계약서 */
#s-contract,#s-contractnew{display:none;min-height:100vh;background:#fff}
#s-contract.on,#s-contractnew.on{display:block}
.lcs{font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--point);
  margin:28px 0 12px;padding-bottom:8px;border-bottom:1.5px solid var(--pointsoft)}
.bizbox{background:var(--soft);border-radius:13px;padding:14px 16px;font-size:13.5px;
  color:var(--ink2);line-height:2}
.bizbox b{color:var(--ink);font-weight:700}
.pick2{display:flex;gap:8px}
.p2{flex:1;padding:14px 10px;border:1.5px solid var(--line);border-radius:13px;background:#fff;
  font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink2);line-height:1.4}
.p2 span{display:block;font-size:11.5px;font-weight:500;color:var(--ink3);margin-top:4px}
.p2.on{border-color:var(--point);background:var(--pointsoft);color:var(--point)}
.p2.on span{color:var(--point);opacity:.75}
.pick1{display:flex;flex-direction:column;gap:8px}
.p1{padding:14px 15px;border:1.5px solid var(--line);border-radius:13px;background:#fff;
  font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);text-align:left}
.p1 b{font-size:12px;font-weight:600;color:var(--ink3);margin-left:6px}
.p1.on{border-color:var(--point);background:var(--pointsoft);color:var(--point)}
.p1.on b{color:var(--point);opacity:.7}
.chk{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink2);
  padding:12px 0;cursor:pointer}
.chk input{width:19px;height:19px;accent-color:var(--point)}
.inline{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink2)}
.inline input{padding:12px 12px;border:1px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:15px;width:120px;text-align:center}
.inline input#cn-wage{flex:1;text-align:right;font-weight:700}
.warnline{font-size:12.5px;color:#B36A00;line-height:1.6;margin-top:8px}
.daypick{display:flex;gap:6px;margin-top:12px}
.daypick button{flex:1;padding:12px 0;border:1.5px solid var(--line);border-radius:11px;
  background:#fff;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink3)}
.daypick button.on{border-color:var(--point);background:var(--pointsoft);color:var(--point)}
#s-contractnew textarea{width:100%;padding:14px;border:1px solid var(--line);border-radius:13px;
  font-family:inherit;font-size:15px;resize:vertical;line-height:1.6}
.signbox{border:1.5px dashed var(--line);border-radius:13px;background:var(--soft);overflow:hidden}
.signbox canvas{display:block;width:100%;height:150px;touch-action:none}
.ctrow{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.ctrow .info{flex:1}
.ctrow .nm{font-size:16px;font-weight:700}
.ctrow .st{font-size:12.5px;font-weight:700;border-radius:7px;padding:4px 9px;
  display:inline-block;margin-top:6px}
.st.none{background:#FDECEA;color:var(--red)}
.st.wait{background:#FFF4E0;color:#B36A00}
.st.done{background:#E6F6EF;color:#0A7A54}

/* ── 근로계약서 : 직원 작성 3단계 ── */
#s-contractme,#s-contractdoc{display:none;min-height:100vh;background:#fff}
#s-contractme.on,#s-contractdoc.on{display:block}
.nhd .rt{margin-left:auto;font-size:12.5px;font-weight:700;color:#0A7A54;
  background:#E6F6EF;border-radius:7px;padding:4px 9px}
.steps{display:flex;gap:6px;padding:0 18px 14px}
.stp{flex:1;height:4px;border-radius:99px;background:var(--line)}
.stp.on{background:var(--point)}
.stp.done{background:var(--pointsoft)}

.kbox{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.kb{background:var(--pointsoft);border-radius:14px;padding:15px 17px;
  display:flex;align-items:baseline;gap:12px}
.kb span{font-size:13px;font-weight:600;color:var(--point);opacity:.75;width:64px;flex-shrink:0}
.kb b{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--point)}
.trow{display:flex;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
.trow span{color:var(--ink2);width:88px;flex-shrink:0}
.trow b{font-weight:600;flex:1;text-align:right;word-break:keep-all}
.signview{border:1px solid var(--line);border-radius:13px;background:var(--soft);
  padding:10px;min-height:96px;display:flex;align-items:center;justify-content:center}
.signview img{max-width:100%;height:80px;object-fit:contain}

/* ── 근로계약서 : 완성 문서 (화면용) ── */
.docwrap{padding:14px 12px 46px;background:#EEF0F4;min-height:calc(100vh - 56px)}
#cd-paper{background:#fff;border-radius:8px;padding:20px 14px;
  box-shadow:0 2px 10px rgba(20,25,40,.08);overflow-x:auto}
.doc-load{padding:60px 0;text-align:center;color:var(--ink3);font-size:14px}

.lcp{font-size:12.5px;line-height:1.65;color:#1c1f26}
.lcp-t{text-align:center;font-size:18px;font-weight:800;letter-spacing:.06em;margin:0 0 6px}
.lcp-sub{text-align:center;color:var(--ink3);font-size:11.5px;margin-bottom:20px}
.lcp-b{margin-bottom:18px}
.lcp-s{font-weight:800;font-size:13px;margin-bottom:6px;padding-bottom:5px;
  border-bottom:1.5px solid #333}
.lcp table{width:100%;border-collapse:collapse;table-layout:fixed}
.lcp th{width:74px;background:#F4F6F9;border:1px solid #C9CEd8;padding:7px 8px;
  text-align:left;font-weight:600;color:#414651;font-size:11.5px;word-break:keep-all}
.lcp td{border:1px solid #C9CED8;padding:7px 8px;font-size:12px;word-break:break-word}
.lcp-c{padding:6px 2px;font-size:12px;line-height:1.9}
.lcp-date{text-align:center;margin:18px 0 14px;font-size:14px;font-weight:700}
.lcp-sign{display:flex;flex-direction:column;gap:14px}
.sgcol{font-size:12px;line-height:1.8}
.sglab{font-weight:800;margin-bottom:4px;font-size:12.5px}
.sgbox{margin-top:6px;border:1px solid #C9CED8;height:76px;display:flex;
  align-items:center;justify-content:center;position:relative;background:#FCFCFD}
.sgimg{max-height:62px;max-width:70%;object-fit:contain}
.sgnone{color:#A0A6B4;font-size:12px}
.sgcap{position:absolute;right:8px;bottom:5px;color:#A0A6B4;font-size:10px}
.lcp-foot{margin-top:16px;text-align:center;color:#9AA1AD;font-size:10.5px;line-height:1.6}

/* 직원 목록 : 계약서 기준 임금 */
.wagebox{text-align:right;line-height:1.3}
.wagebox b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.wagebox span{font-size:11px;color:var(--ink3)}
/* 로그인 : 이메일 저장 */
.remember{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink2);
  margin:-4px 0 18px;cursor:pointer}
.remember input{width:18px;height:18px;accent-color:var(--point)}

/* ── 목록 행 (내 서류 · 매장 · 내정보) ──
   .rows/.row 에 스타일이 없어서 글자만 붙어 나오던 것을 정리한다. */
.rows{border-top:1px solid var(--line)}
.rows .row{display:flex;align-items:center;gap:13px;padding:18px 2px;
  border-bottom:1px solid var(--line);cursor:pointer}
.rows .row:active{background:var(--soft)}
.rows .row .tx b{font-size:16px}
.rows .row .go{font-size:19px;line-height:1;flex:none;color:var(--ink3)}

/* ── 직원 화면 : 글씨·여백 키우기 ── */
#s-emp main{padding:18px 18px 60px !important}
#s-emp .sh{font-size:17px;margin-bottom:14px}
.clockcard{padding:30px 24px 24px}
.clockcard .cst{font-size:14.5px}
.clockcard .cbig{font-size:38px;margin-top:10px}
.clockcard .csub{font-size:15px;margin-top:9px}
.clockcard .cbtn{padding:21px;font-size:17px;margin-top:24px}
.clockcard .chint{font-size:13px;margin-top:15px}
.wrow{padding:17px 0;gap:14px}
.wrow .wd{width:30px;font-size:15.5px}
.wrow .wt{font-size:15.5px}
.wrow .wr{font-size:14px}
.wkbox div{padding:22px 0}
.wk-n{font-size:30px}
.wk-l{font-size:13.5px;margin-top:8px}

/* ── 계약서 문서 : 좁은 화면에서는 표를 풀어 세로로 ── */
@media (max-width:520px){
  #cd-paper{padding:20px 12px}
  .lcp table,.lcp tbody,.lcp tr,.lcp th,.lcp td{display:block;width:auto}
  .lcp tr{border:1px solid #DDE1E8;border-radius:11px;padding:4px 0 8px;
    margin-bottom:9px;background:#fff}
  .lcp th{border:0;background:none;padding:9px 13px 0;
    font-size:11.5px;font-weight:600;color:var(--ink3);letter-spacing:0}
  .lcp td{border:0;padding:2px 13px 0;font-size:14px;font-weight:600;
    color:var(--ink);line-height:1.6}
  .lcp-s{font-size:14px;border-bottom-width:2px;padding-bottom:7px;margin-bottom:10px}
  .lcp-c{font-size:13px}
  .lcp-t{font-size:20px}
}
.nhd .rt2{margin-left:8px;font-size:12.5px;font-weight:700;color:var(--point);
  background:var(--pointsoft);border-radius:7px;padding:5px 10px;cursor:pointer}

/* ── 서류함 ── */
#s-docs,#s-docadd{display:none;min-height:100vh;background:#fff}
#s-docs.on,#s-docadd.on{display:block}
.dc-empty{padding:44px 0;text-align:center;color:var(--ink3);font-size:14.5px;line-height:1.8}
.dc-empty span{font-size:12.5px}
.dcard{display:flex;align-items:center;gap:13px;padding:14px 0;
  border-bottom:1px solid var(--line);cursor:pointer}
.dthumb{width:56px;height:56px;border-radius:11px;object-fit:cover;flex:none;
  border:1px solid var(--line);background:var(--soft)}
.dthumb.no{display:flex;align-items:center;justify-content:center;font-size:22px}
.dinfo{flex:1;min-width:0}
.dinfo .dt{font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.dinfo .dsub{font-size:12.5px;color:var(--ink2);margin-top:3px}
.dtag{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:700;
  border-radius:7px;padding:3px 8px}
.dtag.ok{background:#E6F6EF;color:#0A7A54}
.dtag.amber{background:#FFF4E0;color:#B36A00}
.dtag.red{background:#FDECEA;color:var(--red)}
.ddel{font-size:12.5px;color:var(--ink3);flex:none;padding:6px}
.picks{display:flex;gap:10px}
.pickbtn{flex:1;height:86px;border:1.5px dashed var(--line);border-radius:14px;background:#fff;
  font-family:inherit;font-size:22px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;color:var(--point)}
.pickbtn span{font-size:13px;font-weight:700;color:var(--ink2)}

/* ── 직원 화면 : 3개 탭 ── */
.epane{display:none;padding:16px 18px 92px}
.epane.on{display:block}
#emp-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;
  border-top:1px solid var(--line);display:flex;
  padding:9px 0 calc(env(safe-area-inset-bottom) + 9px)}
#emp-nav button{flex:1;border:0;background:none;font-family:inherit;color:var(--ink3);
  display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
#emp-nav button svg{width:23px;height:23px}
#emp-nav button .lb{font-size:11.5px;font-weight:600}
#emp-nav button.on{color:var(--point)}

/* 인사 + 프로필 */
.ehello{display:flex;align-items:center;gap:13px;margin:4px 0 18px}
.eav{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line);background:var(--soft)}
.eav.ph{display:flex;align-items:center;justify-content:center;font-size:24px}
.ehi b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em}
.ehi span{display:block;font-size:13px;color:var(--ink2);margin-top:3px}

.todaybox{display:flex;border:1px solid var(--line);border-radius:16px;margin-top:14px}
.todaybox div{flex:1;padding:19px 0;text-align:center}
.todaybox div+div{border-left:1px solid var(--line)}

/* 할 일 카드 */
.todo{display:flex;align-items:center;gap:12px;padding:16px 15px;border-radius:15px;
  margin-bottom:10px;cursor:pointer}
.todo .tic{font-size:22px;flex:none}
.todo.wait{background:#FFF8E8;border:1px solid #F4E2B8}
.todo.urgent{background:#FDECEA;border:1px solid #F6C9C4;animation:todoblink 1.6s ease-in-out infinite}
.todo .tx b{font-size:15.5px}
.todo .tx span{font-size:12.5px;line-height:1.5}
@keyframes todoblink{0%,100%{opacity:1}50%{opacity:.62}}
/* 계약서 대기 — 눈에 확 띄게 */
.todo.urgent{background:#FFE9E6;border:2px solid var(--red);
  box-shadow:0 0 0 0 rgba(226,58,46,.45);animation:urgentpulse 1.25s ease-out infinite}
.todo.urgent .tx b{color:var(--red);font-weight:800}
@keyframes urgentpulse{
  0%{box-shadow:0 0 0 0 rgba(226,58,46,.45);background:#FFE9E6}
  60%{box-shadow:0 0 0 12px rgba(226,58,46,0);background:#FFF3F1}
  100%{box-shadow:0 0 0 0 rgba(226,58,46,0);background:#FFE9E6}}
@media (prefers-reduced-motion:reduce){ .todo.urgent{animation:none} }
.row.blink{background:#FFF3F1;border-radius:12px;padding-left:12px;padding-right:12px;
  margin:0 -12px;animation:urgentpulse 1.25s ease-out infinite}
.row.blink .tx b{color:var(--red);font-weight:800}
@media (prefers-reduced-motion:reduce){ .todo.urgent{animation:none} }

/* 서류 행 깜박임 */
.row.blink .tx b::after{content:'';display:inline-block;width:7px;height:7px;border-radius:99px;
  background:var(--red);margin-left:7px;vertical-align:middle;animation:todoblink 1.4s infinite}
.navdot{position:absolute;top:2px;right:calc(50% - 18px);width:7px;height:7px;border-radius:99px;
  background:var(--red);display:none}
.navdot.on{display:block}

/* 내정보 프로필 */
.meprof{text-align:center;padding:14px 0 4px}
.mephoto{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;position:relative;
  background:var(--soft);border:1px solid var(--line);cursor:pointer;overflow:hidden}
.mephoto img{width:100%;height:100%;object-fit:cover;display:none}
.mephoto .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px}
.mephoto .cam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;
  background:#fff;border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-size:14px}
.menm{font-size:20px;font-weight:800;letter-spacing:-.03em}
.mesub{font-size:13.5px;color:var(--ink2);margin-top:4px}
.st.review,.srow .ctag.review{background:#FDECEA;color:var(--red)}

/* 근무시간 선택 */
.timepick{display:flex;flex-direction:column;gap:10px}
.timepick .tp{display:flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:14px;padding:12px 14px}
.timepick .tplab{font-size:14px;font-weight:700;color:var(--ink2);width:38px;flex:none}
.timepick select{flex:1;min-width:0;padding:11px 8px;border:1px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:17px;font-weight:700;text-align:center;background:#fff;
  -webkit-appearance:none;appearance:none;text-align-last:center}
.timepick i{font-style:normal;font-size:14px;color:var(--ink2);flex:none}
.quickt{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.quickt button{flex:1;min-width:78px;padding:10px 0;border:1px solid var(--line);border-radius:11px;
  background:#fff;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink2)}
.quickt button.on{border-color:var(--point);background:var(--pointsoft);color:var(--point)}

/* 계약서 이력 */
.hrow{display:flex;align-items:center;gap:12px;padding:14px 2px;
  border-bottom:1px solid var(--line);cursor:pointer}
.hrow.cur{opacity:.55;cursor:default}
.hinfo{flex:1;min-width:0}
.hinfo b{display:block;font-size:14.5px;font-weight:700}
.hinfo span{display:block;font-size:12.5px;color:var(--ink2);margin-top:3px}
.hrow .st{font-size:11.5px;font-weight:700;border-radius:7px;padding:4px 9px;flex:none}
/* 목록 아바타 자리에 실제 사진 */
img.av{object-fit:cover;background:var(--soft);border:1px solid var(--line)}
.dact{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex:none}
.dren{font-size:12.5px;font-weight:700;color:var(--point);
  background:var(--pointsoft);border-radius:7px;padding:5px 10px}

/* 교부 대기 — 사장이 반드시 눌러야 하는 버튼 */
.btn-main.deliver{margin-top:16px;background:var(--red);color:#fff;border:0;
  box-shadow:0 0 0 0 rgba(226,58,46,.5);animation:deliverpulse 1.2s ease-out infinite}
@keyframes deliverpulse{
  0%{box-shadow:0 0 0 0 rgba(226,58,46,.5);background:var(--red)}
  60%{box-shadow:0 0 0 14px rgba(226,58,46,0);background:#F0544A}
  100%{box-shadow:0 0 0 0 rgba(226,58,46,0);background:var(--red)}}
@media (prefers-reduced-motion:reduce){ .btn-main.deliver{animation:none} }
.docbtn{font-size:12px;font-weight:700;color:var(--point);background:var(--pointsoft);
  border-radius:7px;padding:5px 9px;white-space:nowrap}

/* QR 성과 — 근무시간 박스와 달리 단위를 붙이지 않는다 */
.statbox{display:flex;border:1px solid var(--line);border-radius:16px;margin-top:14px}
.statbox div{flex:1;padding:20px 0;text-align:center}
.statbox div+div{border-left:1px solid var(--line)}
.statbox b{display:block;font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1}
.statbox b i{font-style:normal;font-size:15px;font-weight:700;margin-left:1px}
.statbox span{display:block;font-size:13px;color:var(--ink2);margin-top:9px}


/* 본사 점검 안내 카드 */
.qcsbox{border-radius:16px;padding:18px 20px;margin-bottom:12px;border:1px solid var(--line)}
.qcsbox.todo{background:#FFF6F5;border-color:#F3CFCB}
.qcsbox.done{background:#F1F7F4;border-color:#CFE5DB}
.qcsbox .tg{font-size:11.5px;font-weight:800;color:var(--red);margin-bottom:6px;
  animation:qcsblink 1.1s ease-in-out infinite}
.qcsbox.done .tg{color:#0A7A54;animation:none}
@keyframes qcsblink{0%,100%{opacity:1}50%{opacity:.3}}
.qcsbox .hd{font-size:16.5px;font-weight:800}
.qcsbox .sb{font-size:13px;color:var(--ink2);margin-top:5px;line-height:1.55}
.qcsbox button{width:100%;margin-top:13px;border:0;border-radius:12px;padding:13px;
  font-family:inherit;font-size:14.5px;font-weight:800;color:#fff;background:var(--red);cursor:pointer}
.qcsbox.done button{background:#0A7A54}
.gi.alert .bx{position:relative}
.gi.alert .bx::after{content:'';position:absolute;top:-2px;right:-2px;width:9px;height:9px;
  border-radius:50%;background:var(--red);animation:qcsblink 1.1s ease-in-out infinite}


/* 공지 본문 */
.ntbody{padding:2px 14px 16px;border-bottom:1px solid var(--line)}
.ntbody .tx{font-size:14px;line-height:1.65;color:var(--ink2);white-space:pre-wrap}
.ntrail{display:flex;gap:9px;overflow-x:auto;margin-top:12px;padding-bottom:4px;
  scroll-snap-type:x mandatory}
.ntrail>*{flex:none;width:240px;height:150px;border-radius:12px;overflow:hidden;
  background:#F2F3F6;scroll-snap-align:start}
.ntrail img{width:100%;height:100%;object-fit:cover;display:block}
.ntrail iframe{width:240px;height:150px;border:0;display:block}
.nt{cursor:pointer}

.ntrail{cursor:grab}
.ntrail.drag{cursor:grabbing}


/* 본사 탭 광고 영상 */
.advbox{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#000;margin-bottom:14px}
.advbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.advbox .hit{position:absolute;inset:0;cursor:pointer}
.advbox .more{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;
  border:0;border-radius:22px;padding:9px 14px;font-family:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer}
.advnone{border:1.5px dashed var(--line);border-radius:16px;padding:26px 18px;text-align:center;
  color:var(--ink3);font-size:13.5px;margin-bottom:14px}


/* ── 근무 기록 ── */
.mnav{display:flex;align-items:center;justify-content:center;gap:22px;margin:18px 0 4px}
.mnav b{font-size:17px;font-weight:800;letter-spacing:-.03em;min-width:118px;text-align:center}
.mnav button{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:12px;
  font-size:19px;color:var(--ink2);font-family:inherit}
.mnav button:disabled{opacity:.3}

.atcard{border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-top:14px}
.atcard .hd{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.atcard .hd b{font-size:16px;font-weight:700;letter-spacing:-.02em}
.atcard .hd span{font-size:12.5px;color:var(--ink3)}
.atcard .sum{font-size:13.5px;color:var(--ink2);margin-bottom:10px}
.atcard .sum em{font-style:normal;font-weight:700;color:var(--ink)}
.atrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);
  font-size:14px}
.atrow .d{width:62px;color:var(--ink2)}
.atrow .t{flex:1;font-variant-numeric:tabular-nums}
.atrow .h{font-weight:700;font-variant-numeric:tabular-nums}
/* 눌러서 고칠 수 있다는 걸 보이게 한다. 글자만 있으면 눌러보기 전엔 모른다. */
.atrow .t{display:inline-flex;align-items:center;gap:8px}
.atrow .t span{border-bottom:1px solid var(--line);padding-bottom:2px}
.atrow .t::after{content:"수정";font-size:11.5px;font-weight:700;color:var(--point);
  background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:3px 7px;line-height:1}
.atrow:active{background:var(--soft)}
.atrow .h.open{color:var(--point);font-weight:600;font-size:13px}


/* 근무기록 화면의 전달사항 칸 */
#s-att textarea{width:100%;padding:14px;border:1px solid var(--line);border-radius:13px;
  font-family:inherit;font-size:15px;line-height:1.6;resize:vertical;background:#fff;color:var(--ink)}
#s-att textarea:focus{outline:0;border-color:var(--point)}


/* ── 수익계산 ── */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips .chip{position:relative;padding:12px 18px;border:1.5px solid var(--line);
  border-radius:14px;font-size:14.5px;font-weight:600;color:var(--ink2);background:#fff;
  font-family:inherit;letter-spacing:-.01em;transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 1px 2px rgba(20,22,26,.04)}
.chips .chip:active{transform:scale(.95)}
/* 고른 것은 확실히 구분되게 — 채워서 보여준다 */
.chips .chip.on{border-color:var(--point);background:var(--point);color:#fff;
  box-shadow:0 4px 12px rgba(123,63,228,.28)}
.chips .chip.on::after{content:"✓";margin-left:7px;font-size:13px;font-weight:800}

.fnlog{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:4px}
.fnlog .r{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--line)}
.fnlog .r:first-child{border-top:0}
.fnlog .d{width:52px;font-size:13px;color:var(--ink3)}
.fnlog .c{flex:1;font-size:14.5px;font-weight:600}
.fnlog .c em{display:block;font-style:normal;font-size:12.5px;color:var(--ink3);font-weight:400;margin-top:2px}
.fnlog .a{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.fnlog .a.rev{color:var(--point)}
.fnlog .a.cost{color:#D93B3B}

.fnbreak .r{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px}
.fnbreak .n{width:76px;color:var(--ink2)}
.fnbreak .g{flex:1;height:8px;background:var(--soft);border-radius:99px;overflow:hidden}
.fnbreak .g i{display:block;height:100%;background:var(--point);border-radius:99px}
.fnbreak .v{font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink2)}


#s-fin textarea{width:100%;padding:14px;border:1px solid var(--line);border-radius:13px;
  font-family:inherit;font-size:15px;line-height:1.6;resize:vertical;background:#fff;color:var(--ink)}
#s-fin textarea:focus{outline:0;border-color:var(--point)}
.fnrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.fnrow:last-child{border-bottom:0}
.fnrow .k{width:96px;font-size:14.5px;color:var(--ink2)}
.fnrow input{flex:1;height:44px;border:1px solid var(--line);border-radius:11px;padding:0 13px;
  font-family:inherit;font-size:15px;text-align:right;font-variant-numeric:tabular-nums;
  background:#fff;color:var(--ink);min-width:0}
.fnrow input:focus{outline:0;border-color:var(--point)}
.fnrow .w{font-size:14px;color:var(--ink3)}
.fnrow.auto input{background:var(--soft);color:var(--ink3)}

.fnbig{border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:18px}
.fnbig .lb{font-size:13px;color:var(--ink3)}
.fnbig .v{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:6px}
.fnbig .ln{height:1px;background:var(--line);margin:15px 0}
.fnbig .r{display:flex;justify-content:space-between;font-size:14.5px;padding:5px 0}
.fnbig .r b{font-variant-numeric:tabular-nums}

.fnbar{display:flex;align-items:flex-end;gap:7px;height:110px;margin-top:6px}
.fnbar .c{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.fnbar .b{width:100%;background:var(--soft);border-radius:6px 6px 0 0;position:relative}
.fnbar .b i{position:absolute;left:0;right:0;bottom:0;background:var(--point);border-radius:6px 6px 0 0}
.fnbar .m{font-size:11.5px;color:var(--ink3)}


/* ── 국가지원사업 ── */
.gvcard{border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-top:12px}
.gvcard .ag{font-size:12.5px;font-weight:700;color:var(--point)}
.gvcard .ti{font-size:16px;font-weight:700;letter-spacing:-.02em;margin-top:5px;line-height:1.45}
.gvcard .br{font-size:13.5px;color:var(--ink2);margin-top:8px;line-height:1.6}
.gvcard .dd{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;
  padding:4px 9px;border-radius:8px;background:var(--soft);color:var(--ink2)}
.gvcard .dd.near{background:#FFECEC;color:#D93B3B}
.gvmatch{border:1px solid var(--point);background:var(--soft)}

/* ---------- 미출근자 전화 ---------- */
.att .callb{flex:none;margin-left:auto;padding:6px 12px;border-radius:999px;
  border:1px solid var(--point);background:#fff;color:var(--point);
  font-family:inherit;font-size:12.5px;font-weight:700;text-decoration:none;
  line-height:1.4;cursor:pointer}
.att .callb.no{border-color:var(--line);color:var(--ink3)}
.att .r .callb+.pill{margin-left:8px}

/* ---------- 보내기 전 점검 ---------- */
.warnbox{margin-top:14px;padding:13px 14px;border-radius:13px;
  background:#FFF6E8;color:#8A5A12;font-size:13px;line-height:1.7}
.warnbox b{font-weight:700}
.flags{margin-top:6px}
.atrow.flag{border-left:3px solid #E8A33D;padding-left:9px}
.atrow .h.fix{color:#B07420;font-weight:700}

.paylist{margin-top:18px;border:1px solid var(--line);border-radius:16px;
  padding:2px 16px;overflow:hidden}
.payrow{display:flex;align-items:center;gap:10px;padding:16px 0;
  border-top:1px solid var(--line);cursor:pointer}
.paylist>.payrow:first-child{border-top:0}
.payrow b{font-size:15.5px;font-weight:600}
.payrow .am{margin-left:auto;font-size:15.5px;font-weight:700}
.payrow .ar{color:var(--ink3);font-size:16px;transition:transform .18s}
.payrow.open .ar{transform:rotate(90deg)}
.payrow.tot{border-top:2px solid var(--line);cursor:default}
.payrow.tot b{font-weight:700}
.payrow.tot .am{color:var(--point);font-size:18px;font-weight:800}
.paywhy{display:none;padding:0 0 15px;margin-top:-4px}
.paywhy.open{display:block}
.paywhy div{font-size:13px;color:var(--ink2);line-height:1.75;
  padding-left:11px;border-left:2px solid var(--line)}

/* 계약서 전 임금 입력 — 시급/월급 구분 */
.wageedit{display:flex;align-items:center;gap:6px}
.wageedit .wt{flex:none;padding:8px 10px;border:1px solid var(--line);border-radius:10px;
  background:var(--soft);color:var(--ink2);font-family:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;white-space:nowrap}
.wageedit .wt[data-wt="monthly"]{border-color:var(--point);background:var(--pointsoft);color:var(--point)}
.payrow .am.bad{color:#D93B3B;font-size:14px}

/* ---------- 급여 계산 기준 (접이식) ---------- */
.calcbox{margin-top:16px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.calcbox .hd{display:flex;align-items:center;justify-content:space-between;
  padding:15px 16px;cursor:pointer}
.calcbox .hd b{font-size:14.5px}
.calcbox .hd .ar{color:var(--ink3);font-size:17px;transition:transform .18s}
.calcbox.open .hd .ar{transform:rotate(90deg)}
.calcbox .bd{display:none;padding:0 16px 16px}
.calcbox.open .bd{display:block}
.calcbox .ct{padding:13px 0;border-top:1px solid var(--line)}
.calcbox .ct .t{font-size:13.5px;font-weight:700;color:var(--point);margin-bottom:8px}
.calcbox .ct .t em{display:block;font-style:normal;font-size:12px;font-weight:400;
  color:var(--ink3);margin-top:2px}
.calcbox .rr{display:flex;gap:10px;padding:4px 0;font-size:12.5px;line-height:1.55}
.calcbox .rr span{flex:none;width:62px;color:var(--ink3)}
.calcbox .rr b{font-weight:400;color:var(--ink2)}
.calcbox .cn{margin-top:12px;padding:12px 13px;border-radius:12px;background:var(--soft)}
.calcbox .cn b{display:block;font-size:12.5px;margin-bottom:6px}
.calcbox .cn div{font-size:12.5px;color:var(--ink2);line-height:1.7}

/* ---------- 부팅 실패 화면 ---------- */
#s-bootfail{display:none;align-items:center;justify-content:center;padding:0 32px}
#s-bootfail.on{display:flex}
.bootfail{text-align:center;max-width:320px}
.bootfail .ic{font-size:42px;margin-bottom:16px}
.bootfail b{display:block;font-size:17px;margin-bottom:8px}
.bootfail p{font-size:14px;color:var(--ink2);line-height:1.65;margin-bottom:24px}

/* ---------- 휴대폰 알림 카드 ---------- */
.pushcard{margin-top:16px;border:1px solid var(--point);border-radius:16px;
  background:var(--pointsoft);padding:15px 16px}
.pushcard .hd{display:flex;align-items:center;gap:12px}
.pushcard .tx{flex:1}
.pushcard .tx b{display:block;font-size:14.5px}
.pushcard .tx span{display:block;font-size:12.5px;color:var(--ink2);
  margin-top:3px;line-height:1.5}
.pushcard .sw.off{opacity:.35;pointer-events:none}
.pushcard .ft{margin-top:12px}
.pushcard .ft button{width:100%;padding:10px;border:1px solid var(--point);
  border-radius:11px;background:#fff;color:var(--point);font-family:inherit;
  font-size:13px;font-weight:700;cursor:pointer}
.pushcard .ft button:disabled{opacity:.5}
.pushcard .ms{display:none;font-size:12.5px;color:var(--point);
  margin-top:10px;line-height:1.55}
.pushcard .ms.on{display:block}
.pushcard .ms.bad{color:#D93B3B}

/* ---------- 인앱 알림 배너 ----------
   앱을 보고 있을 때는 시스템 알림이 묻힌다. 화면 위에 직접 띄운다. */
#bn-banner{position:fixed;left:12px;right:12px;top:-120px;z-index:9999;
  display:flex;align-items:flex-start;gap:11px;padding:13px 14px;
  border-radius:16px;background:#fff;border:1px solid var(--line);
  box-shadow:0 8px 28px rgba(0,0,0,.16);cursor:pointer;
  transition:top .28s cubic-bezier(.2,.8,.3,1)}
#bn-banner.on{top:calc(env(safe-area-inset-top, 0px) + 10px)}
#bn-banner .ic{flex:none;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#7C5CFF,#A78BFA);color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
#bn-banner .tx{flex:1;min-width:0}
#bn-banner .tx b{display:block;font-size:14px;line-height:1.35}
#bn-banner .tx span{display:block;font-size:12.5px;color:var(--ink2);
  line-height:1.5;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#bn-banner .cl{flex:none;border:0;background:none;color:var(--ink3);
  font-size:15px;padding:2px 2px 2px 6px;cursor:pointer;font-family:inherit}

/* ---------- 앱 추천 버튼 (홈 헤더) ---------- */
.top .reco{margin-left:auto;margin-right:2px;display:flex;align-items:center;gap:5px;
  padding:6px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink2);
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;line-height:1}
.top .reco svg{width:15px;height:15px}
.top .reco:active{opacity:.75}
.top .reco + .bell{margin-left:0}

/* 알림 목록 글자를 길게 눌러도 선택되지 않게 (검색 팝업 방지) */
.ni, .ni *, .att .r, .atrow, .payrow, .calcbox{
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}

/* ---------- 못 본 알림 배너 (앱 안) ----------
   런처 아이콘 배지는 모양을 못 바꾸지만, 앱 안에서는 자유롭다.
   열었을 때만큼은 반드시 눈에 들어오게 한다. */
#bn-unread{display:flex;align-items:center;gap:9px;margin:0 0 14px;
  padding:13px 15px;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,#FFF1F1,#FFE4E4);
  border:1px solid #FFC9C9;animation:bnPulse 2.4s ease-in-out infinite}
#bn-unread .dot{flex:none;width:9px;height:9px;border-radius:50%;background:#E5484D;
  box-shadow:0 0 0 0 rgba(229,72,77,.55);animation:bnRing 1.8s ease-out infinite}
#bn-unread b{flex:1;font-size:14px;color:#B4262A;font-weight:700}
#bn-unread .go{font-size:13px;color:#E5484D;font-weight:700}

@keyframes bnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}
  50%    {box-shadow:0 0 0 5px rgba(229,72,77,.12)}
}
@keyframes bnRing{
  0%  {box-shadow:0 0 0 0 rgba(229,72,77,.55)}
  70% {box-shadow:0 0 0 9px rgba(229,72,77,0)}
  100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}
}
@media (prefers-reduced-motion: reduce){
  #bn-unread, #bn-unread .dot{animation:none}
}

/* ---------- 국가지원 조건 고르기 (접이식) ---------- */
.pickbox{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.pickbox .hd{display:flex;align-items:center;gap:10px;padding:14px 15px;cursor:pointer}
.pickbox .hd b{font-size:14px;font-weight:600;flex:none}
.pickbox .hd .v{flex:1;text-align:right;font-size:13px;color:var(--point);
  font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickbox .hd .ar{flex:none;color:var(--ink3);font-size:16px;transition:transform .18s}
.pickbox.open .hd .ar{transform:rotate(90deg)}
.pickbox .bd{display:none;padding:0 15px 15px}
.pickbox.open .bd{display:block}

/* 저장된 조건 요약 카드 */
.prefcard{margin-top:22px;border:1px solid var(--point);border-radius:16px;
  background:var(--pointsoft);padding:15px 16px}
.prefcard .hd{display:flex;align-items:center;gap:12px}
.prefcard .tx{flex:1;min-width:0}
.prefcard .tx b{display:block;font-size:14px;margin-bottom:4px}
.prefcard .tx span{display:block;font-size:12.5px;color:var(--ink2);line-height:1.6}
.prefcard .ed{flex:none;padding:8px 13px;border:1px solid var(--point);border-radius:10px;
  background:#fff;color:var(--point);font-family:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer}