/* ─────────────────────────────────────────────────────────────
   종이 식권 사용 등록 앱 — 직원용 모바일 웹앱 스타일
   화면예시(종이식권_사용등록앱_화면예시.html)의 변수·컴포넌트를 그대로 옮기고
   실제 앱 셸(뷰포트 채움, 데스크톱 480px 카드)에 맞는 레이아웃을 더했다.
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:#191D1A; --ink2:#5B635E; --ink3:#8C938E;
  --line:#E3E6E3; --line2:#D2D7D3;
  --bg:#F3F5F2; --card:#FFFFFF;
  --gr:#1F5D4C; --gr-soft:#E3EFE9; --gr-line:#B9D5C9;
  --am:#8A5A0B; --am-soft:#FAF0DB;
  --rd:#98302F; --rd-soft:#FAE9E8;
  --map:#E7EDE5; --road:#F7F9F6;
  --sheet-h:150px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.6;
  overscroll-behavior:none;
}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit;color:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gr-line);outline-offset:0}
img{max-width:100%}

/* ── app shell ─────────────────────────── */
#app{position:relative;height:100vh;height:100dvh;width:100%;margin:0 auto;display:flex;flex-direction:column;background:var(--card);overflow:hidden}
@media(min-width:600px){
  #app{width:480px;border-left:1px solid var(--line2);border-right:1px solid var(--line2)}
}
#view{flex:1;min-height:0;display:flex;flex-direction:column}
.screen{flex:1;min-height:0;display:flex;flex-direction:column}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pad{padding:4px 18px 28px}
.err-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 26px;text-align:center;color:var(--ink2);font-size:14px}
.err-screen .btn{max-width:220px}

/* ── app chrome ────────────────────────── */
.topbar{flex:none;padding:11px 18px 13px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.topbar .cnt{font-size:17px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap}
.topbar .cnt em{font-style:normal;color:var(--gr)}
.topbar .mo{font-size:12px;color:var(--ink3);white-space:nowrap}
.topbar .mo a,.topbar .mo button{font-size:12px;color:var(--ink3);position:relative;padding:4px 2px}
.topbar .mo .dot{display:inline-block;vertical-align:1px;margin-left:3px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--rd);color:#fff;font-size:9.5px;font-weight:700;font-style:normal;line-height:15px;text-align:center}
.topbar .mo .sep{margin:0 4px}
.topbar .cnt.sm{font-size:16px}
.topbar .back{font-size:14px;color:var(--ink2);margin-right:6px;padding:4px 6px 4px 0}

.tabs{flex:none;display:flex;border-top:1px solid var(--line);background:#fff;padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;text-align:center;padding:9px 0 11px;font-size:11.5px;color:var(--ink3)}
.tabs a.on{color:var(--gr);font-weight:600;box-shadow:inset 0 2px 0 var(--gr)}
.tabs .ic{display:block;width:19px;height:19px;margin:0 auto 3px;border:1.6px solid currentColor;border-radius:4px}
.tabs a.on .ic{background:var(--gr-soft)}

/* ── map ───────────────────────────────── */
.mapwrap{position:relative;flex:1;min-height:0;background:var(--map);overflow:hidden}
#map{position:absolute;inset:0;z-index:1}
.map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--ink3);font-size:13px;line-height:1.6}
.map-fallback:before{content:"";position:absolute;left:0;top:38%;width:100%;height:14px;background:var(--road)}
.map-fallback:after{content:"";position:absolute;left:36%;top:0;width:12px;height:100%;background:var(--road)}
.map-fallback span{position:relative;z-index:1;background:rgba(255,255,255,.85);padding:10px 14px;border-radius:10px}
.leaflet-container{font-family:inherit;background:var(--map)}
/* Leaflet 기본 국기 SVG 는 숨긴다 (실제 구조가 <a><svg class="leaflet-attribution-flag">라 태그를 특정하지 않는다) */
.leaflet-container .leaflet-attribution-flag{display:none!important}
.leaflet-control-attribution{font-size:10px;line-height:1.5;padding:1px 5px;color:var(--ink3);background:rgba(255,255,255,.75)}
/* 저작권 표기가 바텀시트 뒤에 숨지 않게 시트 높이만큼 올린다 (시트와 같은 트랜지션) */
.mapwrap .leaflet-bottom{bottom:var(--sheet-h,0px);transition:bottom .28s cubic-bezier(.2,.8,.2,1)}
.mapwrap.dragging .leaflet-bottom{transition:none}
/* 가맹점 핀: L.divIcon 컨테이너는 0×0으로 두고 안쪽 .pin 을 좌표에 맞춰 이동한다 */
.pin-wrap{width:0!important;height:0!important;margin:0!important;background:none;border:none}
.pin{position:absolute;left:0;top:0;transform:translate(-11px,-50%);display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--gr-line);border-radius:20px;padding:3px 9px 3px 6px;font-size:11.5px;font-weight:600;color:var(--gr);white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.09);cursor:pointer;line-height:1.5}
.pin b{width:7px;height:7px;border-radius:50%;background:var(--gr);display:block;flex:none}
.pin.off{border-color:var(--line2);color:var(--ink3);font-weight:400}
.pin.off b{background:var(--ink3)}
.pin.fav{background:var(--gr);border-color:var(--gr);color:#fff}
.pin.fav b{background:#fff}
.pin.sel{box-shadow:0 0 0 2px var(--gr),0 2px 8px rgba(0,0,0,.2)}
.pin.fav.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gr)}
.pin span{display:block}
/* ── 라벨 겹침 회피 변형 (map.js placeLabels) ──
   flip: 라벨을 점 기준 왼쪽으로 뒤집는다 (점은 그대로 좌표 위) */
.pin.flip{transform:translate(calc(-100% + 11px),-50%);flex-direction:row-reverse;padding:3px 6px 3px 9px}
/* up/down: 점(b)은 좌표에 남기고 말풍선만 점 위/아래로 띄운다. 점은 흰 테두리를 둘러 지도 위에서도 보이게 한다.
   far 는 내 위치 버튼(38px) 바로 아래에 점이 있을 때 쓰는 큰 간격 */
.pin.up,.pin.down{padding:3px 9px;gap:0}
.pin.up{transform:translate(-50%,calc(-100% - 6px))}
.pin.down{transform:translate(-50%,6px)}
.pin.up.far{transform:translate(-50%,calc(-100% - 22px))}
.pin.down.far{transform:translate(-50%,22px)}
.pin.up b,.pin.down b{position:absolute;left:calc(50% - 3.5px);box-shadow:0 0 0 2px #fff}
.pin.up b{top:calc(100% + 3.5px)}
.pin.up.far b{top:calc(100% + 19.5px)}
.pin.down b{top:-10.5px}
.pin.down.far b{top:-26.5px}
.pin.fav.up b,.pin.fav.down b{background:var(--gr)}
/* nolabel: 라벨을 놓을 자리가 없는 저우선 핀은 점만 남긴다 (탭 영역은 넉넉히) */
.pin.nolabel{padding:3px;gap:0;transform:translate(-50%,-50%)}
.pin.nolabel span{display:none}
.pin.nolabel:after{content:"";position:absolute;inset:-9px;border-radius:50%}
/* ── 클러스터 아이콘 (SPEC §6.1 · map.js clusterIcon) ──
   markercluster 기본 아이콘(연두·노랑·주황)은 화면예시의 초록(--gr)과 충돌해 쓰지 않는다.
   핀(.pin)과 같은 흰 배경 + 초록 테두리를 기본으로, 건수가 많을수록 크고 진하게 채워 밀도가 한눈에 읽히게 한다.
   ※ transform 은 쓰지 않는다 — Leaflet 이 마커 위치를 transform 으로 잡고 있어 덮어쓰면 좌표가 어긋난다. */
.mcl{display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1.5px solid var(--gr);color:var(--gr);font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 0 0 4px rgba(31,93,76,.10),0 1px 4px rgba(0,0,0,.14)}
.mcl span{display:block;letter-spacing:-.02em}
.mcl:after{content:"";position:absolute;inset:-6px;border-radius:50%}   /* 탭 영역만 넓힌다 (작은 클러스터 34px) */
.mcl.m{background:var(--gr-soft);font-size:13px}
.mcl.l{background:var(--gr);border-color:#fff;color:#fff;font-size:14px;box-shadow:0 0 0 5px rgba(31,93,76,.18),0 2px 6px rgba(0,0,0,.18)}
.mcl:active{box-shadow:0 0 0 7px rgba(31,93,76,.18),0 1px 4px rgba(0,0,0,.14)}
@media (hover:hover){.mcl:hover{box-shadow:0 0 0 6px rgba(31,93,76,.16),0 1px 4px rgba(0,0,0,.14)}}
.me-wrap{background:none!important;border:none!important}
.me{position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;background:#2C6FD1;border:3px solid #fff;box-shadow:0 0 0 5px rgba(44,111,209,.16)}
.gps{position:absolute;right:12px;bottom:calc(var(--sheet-h,0px) + 12px);width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;z-index:800;box-shadow:0 1px 4px rgba(0,0,0,.1);transition:bottom .28s cubic-bezier(.2,.8,.2,1)}
.gps b{width:11px;height:11px;border:2px solid var(--ink2);border-radius:50%;display:block}
.gps.busy b{border-color:var(--gr);border-top-color:transparent;animation:spin .8s linear infinite}
.mapwrap.dragging .gps{transition:none}

/* ── 지도 위 오버레이 (위치 안내 배너 + 체류 제안 카드) ── */
.moverlay{position:absolute;top:10px;left:12px;right:12px;z-index:950;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.moverlay>*{pointer-events:auto}
.moverlay>*:empty{display:none}
/* LC-05 위치 안내: 시트가 아니라 지도 위 한 줄 배너 — 접힘 시트가 커져 지도 가시 영역이 60% 아래로 내려가지 않게 한다 */
.locbar{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:8px;padding:6px 11px;font-size:12px;line-height:1.5;color:var(--ink2);box-shadow:0 1px 4px rgba(0,0,0,.08);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.locbar a{color:var(--gr);font-weight:600}

/* ── suggestion card (.noti) ───────────── */
.suggest{position:relative}
.noti{background:rgba(255,255,255,.97);border-radius:15px;padding:13px 15px 12px;box-shadow:0 6px 24px rgba(0,0,0,.14);border:1px solid var(--line)}
.noti .hd{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--ink3);margin-bottom:7px}
.noti .hd b{color:var(--ink2);font-weight:600}
.noti .t{font-size:14.5px;font-weight:600;letter-spacing:-0.01em}
.noti .d{font-size:13px;color:var(--ink2);margin-top:3px;line-height:1.5}
.noti .d.alt{font-size:12.5px;color:var(--ink3)}
.noti .altbtn{color:var(--gr);font-weight:600;text-decoration:underline;text-underline-offset:2px;padding:0}
.acts{display:flex;gap:7px;margin-top:12px}
.acts button{flex:1;text-align:center;font-size:12.5px;font-weight:600;padding:8px 0;border-radius:7px;background:var(--gr);color:#fff}
.acts button.sec{background:#EDEFEC;color:var(--ink2);font-weight:500}
.acts button:disabled{opacity:.6}

/* ── sheet ─────────────────────────────── */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:900;height:var(--sheet-h);background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.06);display:flex;flex-direction:column;transition:height .28s cubic-bezier(.2,.8,.2,1)}
.sheet.dragging{transition:none}
.grab-zone{flex:none;padding:9px 18px 6px;cursor:grab;touch-action:none;user-select:none}
.grab-zone:active{cursor:grabbing}
.grab{width:34px;height:4px;border-radius:9px;background:var(--line2);margin:0 auto 8px}
.sheet-body{flex:1;min-height:0;overflow-y:auto;padding:0 18px 16px;-webkit-overflow-scrolling:touch}
.sheet.collapsed .sheet-body{overflow:hidden}
.sheet-foot{flex:none;padding:0 18px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
/* 접힘 시트에는 푸터 내용이 없다 — 빈 푸터의 패딩만큼 시트가 커지지 않게 (지도 가시 영역 60% 확보) */
.sheet-foot:empty{display:none}
/* S-210: [등록하기]는 시트 푸터에 고정 — 작은 화면에서 본문이 스크롤돼도 버튼은 항상 보인다 */
.sheet[data-mode="form"] .sheet-foot .btn{margin-top:8px}
.sheet[data-mode="form"] .sheet-foot .alert{margin-top:8px}
/* 짧은 화면(예 360×640): 접힘 시트를 촘촘히 해 지도 가시 영역 60% 이상을 지킨다 (SPEC §6.1) */
@media (max-height:700px){
  .grab-zone{padding:6px 18px 3px}
  .grab{margin-bottom:5px}
  .sheet.collapsed h3{line-height:1.35}
  .sheet.collapsed .sub{margin-top:1px;line-height:1.45}
  .sheet.collapsed .btn{margin-top:9px;padding:11px 0}
  .sheet.collapsed .sheet-body{padding-bottom:10px}
  .locbar{padding:5px 10px;font-size:11.5px}
}
.sheet h3{font-size:17px;font-weight:600;letter-spacing:-0.01em}
.sheet .sub{font-size:13px;color:var(--ink2);margin-top:2px}
.sheet-drag{touch-action:none;cursor:grab}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sheet-head .x{flex:none;font-size:16px;line-height:1;color:var(--ink3);width:32px;height:32px;margin:-4px -8px 0 0;display:flex;align-items:center;justify-content:center;border-radius:50%}
.sheet-head .x:hover{background:var(--bg)}

.btn{display:block;width:100%;text-align:center;background:var(--gr);color:#fff;border:none;border-radius:9px;padding:14px 0;font:inherit;font-size:15px;font-weight:600;margin-top:14px;cursor:pointer}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line2);font-weight:500}
.btn.danger{background:#fff;color:var(--rd);border:1px solid var(--line2);font-weight:500}
.btn:disabled{opacity:.45;cursor:default}
.btn.sm{padding:10px 0;font-size:14px;margin-top:10px}
.btnrow{display:flex;gap:8px}
.btnrow .btn{flex:1}
.link{color:var(--gr);font-size:13.5px;font-weight:500;padding:6px 0;display:inline-block}

.badge{display:inline-flex;align-items:center;gap:5px;background:var(--gr-soft);color:var(--gr);border-radius:5px;padding:3px 9px;font-size:12px;font-weight:600;margin-top:9px}
.badge svg{display:block}
.badge.off{background:var(--bg);color:var(--ink3)}
.badge.rd{background:var(--rd-soft);color:var(--rd)}
.badge.am{background:var(--am-soft);color:var(--am)}
.badge.e2{background:#EFEAF7;color:#5A4494}

/* list rows in sheet */
.lgroup{font-size:11.5px;font-weight:600;color:var(--ink3);padding:14px 0 6px}
.lgroup:first-child{padding-top:4px}
.lrow{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
.lrow .lmain{min-width:0;flex:1}
.lrow .nm{font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .mt{font-size:12px;color:var(--ink3);margin-top:1px}
.lrow .lright{display:flex;align-items:center;gap:6px;flex:none}
.lrow .ds{font-size:13px;color:var(--ink2);white-space:nowrap;margin-left:12px}
.star{width:32px;height:32px;border-radius:50%;font-size:17px;color:var(--line2);line-height:1;display:flex;align-items:center;justify-content:center}
.star.on{color:var(--gr)}
.star:hover{background:var(--bg)}
.other{border-top:1px solid var(--line);padding-top:13px;font-size:14px;color:var(--gr);font-weight:500;cursor:pointer;display:block}
.other:after{content:" ›";color:var(--gr-line)}
.search .inp{width:100%;padding:10px 13px;font-size:14px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line2);border-radius:20px;padding:5px 12px;font-size:12.5px;color:var(--ink2);background:#fff;line-height:1.4}
.chip.on{background:var(--gr-soft);color:var(--gr);border-color:var(--gr-line);font-weight:600}

/* ── form ──────────────────────────────── */
.field{margin-top:16px}
.field label{display:block;font-size:13px;color:var(--ink2);margin-bottom:6px}
.field label .req{color:var(--rd);margin-left:2px}
.inp{display:block;width:100%;border:1px solid var(--line2);border-radius:9px;padding:12px 13px;font-size:15px;background:#fff;line-height:1.4}
.inp.ph-{color:var(--ink3)}
textarea.inp{min-height:76px;resize:vertical}
.inp::placeholder{color:var(--ink3)}
.datebox{position:relative}
.datebox .dateov{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.stepper{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line2);border-radius:9px;padding:7px 9px}
.stepper .qb{width:36px;height:36px;border:1px solid var(--line2);border-radius:7px;background:#fff;font-size:19px;color:var(--ink2);display:flex;align-items:center;justify-content:center}
.stepper .qb:disabled{opacity:.35}
.stepper .qv{font-size:17px;font-weight:600}
.hint{font-size:12px;color:var(--ink3);margin-top:7px}
.alert{background:var(--am-soft);color:var(--am);border-radius:8px;padding:11px 13px;font-size:12.5px;line-height:1.55;margin-top:16px}
.alert.rd{background:var(--rd-soft);color:var(--rd)}
.alert.gr{background:var(--gr-soft);color:var(--gr)}
.filebox{position:relative}
.filebox input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.filebox .thumb{display:block;max-height:140px;border-radius:8px;margin-top:8px;border:1px solid var(--line)}
.filebox .inp{display:flex;align-items:center;justify-content:space-between;gap:8px}
.filebox .inp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filebox .inp i{font-style:normal;font-size:12px;color:var(--gr);font-weight:600;flex:none}

/* ── history ───────────────────────────── */
.sum{flex:none;display:flex;border-bottom:1px solid var(--line);cursor:pointer}
/* 셀(직계 자식)에만 패딩·구분선. 안쪽 .k/.v/.s 에는 적용되지 않게 한다 */
.sum > div{flex:1;padding:14px 0 16px;text-align:center;border-right:1px solid var(--line)}
.sum > div:last-child{border-right:none}
.sum .k{font-size:11.5px;color:var(--ink3)}
.sum .v{font-size:20px;font-weight:600;margin-top:2px;letter-spacing:-0.01em;line-height:1.3}
.sum .v.hl{color:var(--gr)}
.sum .s{font-size:11px;color:var(--am);margin-top:2px}
.sumlink{text-align:right;font-size:12px;color:var(--ink3);padding:6px 18px 0}
.sumlink a{color:var(--gr)}
.mnav{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 18px}
.mnav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);font-size:16px;color:var(--ink2);display:flex;align-items:center;justify-content:center}
.mnav button:disabled{opacity:.3}
.mnav .ml{font-size:15px;font-weight:600;min-width:120px;text-align:center}
.filters{padding:0 18px 4px}
.hist{flex:1;min-height:0;overflow-y:auto;padding:0 18px}
.hrow{padding:13px 0;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:10px;cursor:pointer}
.hrow .nm{font-size:15px;font-weight:500}
.hrow .mt{font-size:12px;color:var(--ink3);margin-top:2px}
.st{flex:none;font-size:11.5px;font-weight:600;border-radius:4px;padding:2px 8px;margin-top:2px;white-space:nowrap}
.st.ok{background:var(--gr-soft);color:var(--gr)}
.st.wt{background:var(--am-soft);color:var(--am)}
.st.no{background:var(--rd-soft);color:var(--rd)}

/* ── detail ────────────────────────────── */
.dhead{padding:16px 0 8px;border-bottom:1px solid var(--line)}
.dhead h3{font-size:19px;font-weight:600;letter-spacing:-0.01em}
.dhead .sub{font-size:13px;color:var(--ink2);margin-top:3px}
.dhead .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sect{font-size:11.5px;font-weight:600;color:var(--ink3);padding:18px 0 6px}
.kv > div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv dt{font-size:13px;color:var(--ink2);flex:none}
.kv dd{font-size:14px;text-align:right;min-width:0;word-break:break-word}
.kv dd .s{display:block;font-size:12px;color:var(--ink3)}
.flags .fl{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.flags .fl .desc{color:var(--ink2)}
.flag{display:inline-block;font-size:11.5px;font-weight:600;border-radius:4px;padding:2px 7px;background:var(--am-soft);color:var(--am);flex:none;margin-top:2px}
.flag.e2{background:#EFEAF7;color:#5A4494}
.evi{display:block;width:100%;max-height:320px;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:var(--bg);margin-top:6px}
.tl .ti{display:flex;gap:12px;padding:8px 0;position:relative}
.tl .ti:before{content:"";position:absolute;left:3.5px;top:22px;bottom:-8px;width:1px;background:var(--line2)}
.tl .ti:last-child:before{display:none}
.tl .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gr);margin-top:8px}
.tl .ti.wt .dot{background:var(--am)}
.tl .ti.no .dot{background:var(--rd)}
.tl .ti.mu .dot{background:var(--ink3)}
.tl .tt{font-size:14px;font-weight:500}
.tl .tr{font-size:13px;color:var(--rd);margin-top:1px}
.tl .ts{font-size:12px;color:var(--ink3);margin-top:1px}
.note-foot{font-size:12px;color:var(--ink3);text-align:center;padding:18px 0 6px;line-height:1.5}

/* ── cards (distributions) ─────────────── */
.dcard{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dcard .ym{font-size:13px;color:var(--ink2);font-weight:500}
.dcard .meta{font-size:12px;color:var(--ink3);margin-top:3px}
.dcard .cnt{font-size:22px;font-weight:600;color:var(--gr);white-space:nowrap}
.dcard.past .cnt{color:var(--ink3)}
.dcard .tag{font-size:11px;color:var(--ink3);margin-left:6px;font-weight:400}

/* ── settings ──────────────────────────── */
.prof{padding:18px 0 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}
.prof .av{width:46px;height:46px;border-radius:14px;background:var(--gr);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;flex:none}
.prof .nm{font-size:17px;font-weight:600}
.prof .dp{font-size:13px;color:var(--ink2)}
.srow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.srow .st-t{font-size:15px}
.srow .st-d{font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.5}
.srow .r{flex:none;font-size:13px;color:var(--gr);font-weight:500}
.srow.clickable{cursor:pointer}
.tg{position:relative;flex:none;width:44px;height:26px;border-radius:13px;background:var(--line2);transition:background .2s}
.tg:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.tg.on{background:var(--gr)}
.tg.on:after{left:21px}
.tg:disabled{opacity:.5}
.sub-form{background:var(--bg);border-radius:12px;padding:4px 14px 14px;margin:10px 0}
.sub-form .field{margin-top:12px}
.dev{margin-top:26px;border-top:1px dashed var(--line2);padding-top:6px}
.dev .sect{color:var(--am)}
.status-line{font-size:12px;color:var(--ink3);padding:4px 0}

/* ── notifications ─────────────────────── */
.nrow{padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.nrow .hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nrow .ty{font-size:11px;color:var(--gr);background:var(--gr-soft);border-radius:4px;padding:1px 6px;font-weight:600}
.nrow .ty.no{color:var(--rd);background:var(--rd-soft)}
.nrow .ty.am{color:var(--am);background:var(--am-soft)}
.nrow .ty.mu{color:var(--ink2);background:var(--bg)}
.nrow .ts{font-size:11.5px;color:var(--ink3)}
.nrow .t{font-size:14.5px;margin-top:5px;color:var(--ink2)}
.nrow.unread .t{font-weight:600;color:var(--ink)}
.nrow.unread .t:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rd);margin-right:6px;vertical-align:middle}
.nrow .b{font-size:13px;color:var(--ink2);margin-top:2px;line-height:1.5}
.nrow .go{font-size:12px;color:var(--gr);margin-top:4px;font-weight:500}
.notice{padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.notice .t{font-size:14.5px;font-weight:500;display:flex;justify-content:space-between;gap:8px}
.notice .t span:last-child{font-size:11.5px;color:var(--ink3);font-weight:400;flex:none}
.notice .b{font-size:13.5px;color:var(--ink2);margin-top:8px;white-space:pre-wrap;line-height:1.6}
.notice.hl{background:var(--gr-soft);margin:0 -18px;padding:12px 18px}
.secthd{display:flex;align-items:center;justify-content:space-between}
.secthd .sect{padding-bottom:6px}
.secthd button{font-size:12.5px;color:var(--gr);font-weight:500}

/* ── login ─────────────────────────────── */
.login{flex:1;min-height:0;overflow-y:auto;padding:56px 26px 26px;display:flex;flex-direction:column}
.login .mark{width:44px;height:44px;border-radius:12px;background:var(--gr);margin-bottom:22px;flex:none;display:flex;align-items:center;justify-content:center}
.login h2{font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1.35}
.login .sub{font-size:14px;color:var(--ink2);margin-top:6px}
.login .foot{margin-top:auto;padding-top:28px;text-align:center;font-size:13px;color:var(--ink3)}
.login .foot button{color:var(--ink2);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.pin-dots{display:flex;gap:12px;justify-content:center;margin:26px 0 10px}
.pin-dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line2);display:block}
.pin-dots i.on{background:var(--gr);border-color:var(--gr)}
.pin-in{text-align:center;letter-spacing:.4em;font-size:20px}

/* ── common ────────────────────────────── */
.empty{padding:40px 12px;text-align:center;color:var(--ink3);font-size:13.5px;line-height:1.6}
.loading{padding:36px 0;display:flex;justify-content:center;align-items:center;flex:1}
.spin{width:24px;height:24px;border:3px solid var(--line);border-top-color:var(--gr);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#toast{position:absolute;left:0;right:0;bottom:78px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3000;pointer-events:none;padding:0 18px}
.toastmsg{background:var(--ink);color:#fff;border-radius:10px;padding:10px 16px;font-size:13.5px;box-shadow:0 6px 20px rgba(0,0,0,.2);animation:toastin .22s ease-out;max-width:100%;text-align:center}
.toastmsg.out{opacity:0;transition:opacity .3s}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.muted{color:var(--ink3)}
.tar{text-align:right}