/* Imported from https://qr-app-prototype.vercel.app/ on 2026-10-21.
 * QR planning: Sophie. Original screen content and interactions retained.
 * Quantum Park integration lives in integration.js / integration.css. */

/* ============================================================
   디자인 토큰 — FriendsScreen 통합앱_Flutter Figma 실측
   Green/600 p1 #22BB5F · b1 #2A2C30 · Grey/800 #272C30
   b2 #697375 · Grey/500 #6C7883 · b3 #B0B9C2 · Grey/300 #ADB9C2
   Grey/200 #D0D7DC · Grey/100 #ECEFF1 · 앱바 #101214 · 배경 #F6F8F9
   Type: Spoqa Han Sans Neo — h4 B16/24/-.3 · h6 B14/20/-.2
         h7 M14/-.2 · c2 B10/-.2
   ============================================================ */
:root{
  --p1:#22BB5F; --p1-dk:#1AA652; --p1-tint:#E9F8F0;
  --b1:#2A2C30; --g800:#272C30; --b2:#697375; --g500:#6C7883;
  --b3:#B0B9C2; --g300:#ADB9C2; --g200:#D0D7DC; --g100:#ECEFF1;
  --bg:#F6F8F9; --ink:#101214; --white:#fff;
  --purple:#623097; --danger:#FA5E4C; --danger-tint:#FEEDEA;
  --yellow:#FFB200; --yellow-tint:#FFF6E0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#E7EAEC;color:var(--b1);
  font-family:'Spoqa Han Sans Neo','Pretendard','Noto Sans KR','Apple SD Gothic Neo',system-ui,sans-serif;
  font-size:14px;line-height:1.5;letter-spacing:-.2px;-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;letter-spacing:inherit}
.mono{font-family:ui-monospace,SFMono-Regular,'SF Mono',monospace;letter-spacing:0}

/* ---------- 문서 셸 ---------- */
.top{position:sticky;top:0;z-index:300;background:var(--ink);color:#fff;
  padding:14px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top h1{font-size:15px;font-weight:700;letter-spacing:-.3px}
.top h1 .accent{color:var(--p1)}
.top .v{font-size:11px;background:rgba(255,255,255,.14);padding:3px 10px;border-radius:999px;font-weight:700}
.top .meta{font-size:11px;color:#8F979B;margin-left:auto}
.wrap{display:grid;grid-template-columns:var(--navw,220px) minmax(0,1fr) minmax(300px,380px);
  gap:22px;padding:22px;align-items:start;max-width:1560px;margin:0 auto}
body.navoff{--navw:0px}
body.navoff .wrap{grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:20px}
body.navoff #nav{display:none}

/* ---------- 좌측 내비 ---------- */
#nav{background:#fff;border-radius:14px;padding:11px;position:sticky;top:78px;
  max-height:calc(100vh - 104px);overflow:auto}
#nav::-webkit-scrollbar{width:0}
#nav .gh{font-size:10px;font-weight:700;color:var(--b3);letter-spacing:.06em;padding:13px 10px 6px}
#nav button.grp{display:flex;width:100%;align-items:center;gap:6px;padding:9px 10px;border-radius:8px;
  font-size:11.5px;font-weight:700;color:var(--b2);letter-spacing:.01em;margin-top:3px}
#nav button.grp:hover{background:var(--bg)}
#nav button.grp.open{color:var(--b1)}
#nav button.grp .cnt{margin-left:auto;font-size:10px;color:var(--b3);font-weight:700;
  background:var(--bg);border-radius:999px;padding:1px 7px}
#nav button.grp .arw{font-size:9px;color:var(--b3);width:9px;text-align:right}
#nav button.grp.open .arw{color:var(--b1)}
#nav .sub{padding-left:4px}
#nav button{display:flex;width:100%;align-items:center;gap:8px;text-align:left;
  padding:8px 10px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--b1)}
#nav button:hover{background:var(--bg)}
#nav button.on{background:var(--p1);color:#fff;font-weight:700}
#nav button .id{font-size:10px;font-weight:700;color:var(--b3);min-width:27px}
#nav button.on .id{color:rgba(255,255,255,.75)}
#nav .dot{width:5px;height:5px;border-radius:50%;margin-left:auto;flex:none}
#nav .dot.n{background:var(--danger)} #nav .dot.u{background:var(--g300)}
#nav button.on .dot{background:#fff}

/* ============================================================
   폰 — 360×720 (Figma 실측)
   ============================================================ */
.stage{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.device{width:392px;background:#1B1F28;border-radius:40px;padding:16px;flex:none;
  box-shadow:0 30px 70px -18px rgba(20,30,45,.4)}
.phone{width:360px;height:720px;border-radius:26px;overflow:hidden;position:relative;background:var(--bg)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.scroll{overflow-y:auto;overflow-x:hidden;flex:1;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.hint{font-size:11px;color:#7C858B;text-align:center}

/* ---------- 앱바 (블랙 106px, 하단 라운드 20) ---------- */
.appbar{flex:none;height:106px;background:var(--ink);color:#fff;
  border-radius:0 0 16px 16px;display:flex;flex-direction:column;position:relative;z-index:5}
.appbar.flat{border-radius:0}
/* 홈 앱바 + 서비스 탭(10/16) — 브랜드 아래 탭이 들어가 높이가 늘어난다 */
.appbar.svc{height:auto}
.appbar.svc .abrow{flex:none;padding:4px 18px 4px;transition:padding .22s ease}
/* 스크롤을 내리면 서비스 탭 줄만 접히고(로고 · 알림 · 메뉴 줄은 유지), 올리면 다시 펼친다(10/19) */
.appbar.svc .svtab{overflow:hidden;transition:height .22s ease,padding .22s ease,opacity .16s ease}
.appbar.svc.tabhide .svtab{height:0;padding-bottom:0;opacity:0}
.appbar.svc.tabhide .abrow{padding-bottom:14px}
.bsw{display:flex;align-items:center;gap:6px;height:32px}
.bsw .bwm{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:24px;color:#fff;white-space:nowrap}
.bsw .cv{display:block;width:14px;height:14px;opacity:.75}
.svtab{display:flex;padding:0 18px 4px;height:48px}
.svtab b{flex:1;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;letter-spacing:-.3px;color:rgba(255,255,255,.45);position:relative}
.svtab b.on{color:#fff}
.svtab b.on::after{content:'';position:absolute;left:30%;right:30%;bottom:6px;height:3px;border-radius:2px;background:#fff}
/* 서비스 선택 시트(브랜드명 ⌄) */
.svcard{display:flex;align-items:center;gap:12px;margin-top:12px;padding:16px 16px 16px 18px;border:1px solid var(--g100);border-left:4px solid;border-radius:12px;background:#fff}
.svcard.on{background:var(--bg)}
.svcard .wm{font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.3}
.svcard .nm{font-size:14px;font-weight:700;color:var(--b1);margin-top:6px}
.svcard .ck{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--g200);flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
.svcard .ck.on{background:var(--ink);border-color:var(--ink)}
/* 홈 다가오는 예약 카드 */
.upc{margin:0 18px;background:#fff;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px}
.upc .dt{width:52px;height:58px;border-radius:10px;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.upc .dt span{font-size:11px;font-weight:500;color:var(--g500)}
.upc .dt b{font-size:22px;font-weight:800;color:var(--ink);line-height:1.15}
.upc .st{display:flex;gap:4px}
.upc .nm{font-size:15px;font-weight:700;color:var(--b1);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upc .cap{margin-top:2px}
.sbar{height:60px;flex:none;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:3px;position:relative}
.sbar .tm{position:absolute;left:10px;bottom:11px;width:54px;text-align:center;
  font-size:16px;font-weight:500;letter-spacing:-.32px;line-height:21px}
.sbar .di{width:125px;height:37px;background:#000;border-radius:100px;margin-bottom:8px}
.sbar .swb{position:absolute;right:11px;bottom:15px;width:78.4px;height:13px}
.abrow{flex:1;display:flex;align-items:center;gap:10px;padding:4px 18px 18px}
.bi{width:149.5px;height:24px;position:relative;flex:none}
.bi img{position:absolute;left:3px;top:5px;width:146.5px;height:14px;display:block;max-width:none}
.brand{font-size:19px;font-weight:700;letter-spacing:-.6px}
.abtitle{font-size:17px;font-weight:700;letter-spacing:-.3px}
.abright{margin-left:auto;display:flex;gap:14px;align-items:center}
.iconbtn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  position:relative;color:#fff;flex:none}
.iconbtn svg{width:24px;height:24px}
.iconbtn img{display:block;max-width:none}
.iconbtn .newdot{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;
  background:var(--danger);border:1.5px solid var(--ink)}
/* 앱바 신규 표시는 아이콘 우상단 newdot 하나만 사용 */
.back{font-size:24px;line-height:1;width:26px;color:#fff}
/* 서브 페이지 = 화이트 앱바 + 가운데 정렬 제목 (Figma 실측) */
.appbar.w{background:#fff;color:var(--b1);border-radius:0}
.appbar.w .sbar{color:var(--b1)}
.appbar.w .swb{filter:invert(1)}
.appbar.w .abrow{position:relative;padding:4px 18px 16px}
.appbar.w .back{color:var(--b1)}
.appbar.w .abtitle{position:absolute;left:56px;right:56px;text-align:center;
  font-size:17px;font-weight:700;letter-spacing:-.3px}
.appbar.w .abright{position:relative;z-index:2}
.appbar.w .iconbtn{color:var(--b1)}

/* ---------- 탭바 58px ---------- */
.tabbar{flex:none;margin-top:auto;height:58px;background:#fff;position:relative;z-index:45;
  border-top:.5px solid var(--g100);padding:2px 0 0 12px;display:flex;gap:14px;align-items:flex-start}
.tabbar .ti{width:56px;height:56px;position:relative;overflow:visible;flex:none}
.tabbar .ti .ic{position:absolute;left:50%;transform:translateX(-50%);top:5px;width:24px;height:24px}
.tabbar .ti .lb{position:absolute;left:0;right:0;top:35px;text-align:center;
  font-size:10px;font-weight:700;letter-spacing:-.2px;color:var(--b2)}
.tabbar .ti.on .lb{color:var(--b1)}
.tabbar .ti.qr{display:flex;align-items:flex-start;justify-content:center}
.tabbar .ti.qr svg{margin-top:-6px}

/* ---------- 타이포 ---------- */
.h-sec{font-size:20px;font-weight:700;letter-spacing:-.5px;color:var(--b1)}
.h4{font-size:16px;font-weight:700;letter-spacing:-.3px;line-height:24px}
.h6{font-size:14px;font-weight:700;letter-spacing:-.2px;line-height:20px}
.h7{font-size:14px;font-weight:500;letter-spacing:-.2px}
.cap{font-size:12px;font-weight:500;color:var(--b2);letter-spacing:-.2px}
.cap-s{font-size:11px;font-weight:500;color:var(--b3);letter-spacing:-.2px}
.num{font-size:20px;font-weight:700;letter-spacing:-.5px}
.g{color:var(--p1)} .mute{color:var(--b2)} .weak{color:var(--b3)}

/* ---------- 레이아웃 ---------- */
.pad{padding:0 18px}
.sec{display:flex;align-items:center;padding:30px 18px 16px}
.sec .more{margin-left:auto;font-size:12px;font-weight:500;color:var(--b2);display:flex;align-items:center;gap:2px}
.card{background:#fff;border-radius:16px}
.card.sm{border-radius:12px}
.card.line{border:.5px solid var(--g200)}
.hr{height:.5px;background:var(--g100)}
.hscroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:0 18px}
.hscroll::-webkit-scrollbar{display:none}

/* ---------- 예약 폼 개편 (N-9a 2228:21413 · N-9b 2228:21516 실측) ---------- */
.d7{display:flex;padding:0 18px}
.d7 .dd{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;line-height:1.5;color:var(--g500)}
.d7 .dd b{width:32px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:400;color:var(--ink);background:#fff}
.d7 .dd.on{color:var(--p1)} .d7 .dd.on b{background:var(--p1);color:#fff;font-weight:700}
.d7 .dd.off{color:var(--b3)} .d7 .dd.off b{color:var(--b3)}
.fch{display:flex;gap:8px;padding:0 18px;overflow-x:auto;scrollbar-width:none}
.fch::-webkit-scrollbar{display:none}
.fch b{padding:7px 14px;border-radius:16px;border:1px solid var(--g200);background:#fff;font-size:13px;
  line-height:1.5;font-weight:400;color:var(--g500);white-space:nowrap;flex:none}
.fch b.on{background:#D3F1DF;border-color:var(--p1);color:var(--p1);font-weight:700}
.tg2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 18px}
.tg2 .tt{border:1px solid var(--g200);border-radius:10px;background:#fff;padding:11px 0;display:flex;
  flex-direction:column;align-items:center;gap:2px;line-height:1.5}
.tg2 .tt .ta{font-size:15px;font-weight:700;color:var(--ink)} .tg2 .tt .tb{font-size:11px;color:var(--g500)}
.tg2 .tt.on{background:var(--p1);border-color:var(--p1)} .tg2 .tt.on .ta,.tg2 .tt.on .tb{color:#fff}
.tg2 .tt.dis,.tg2 .tt.warn{background:var(--bg)}
.tg2 .tt.dis .ta,.tg2 .tt.dis .tb,.tg2 .tt.warn .ta,.tg2 .tt.warn .tb{color:var(--g300);font-weight:400}
.tlg{display:flex;gap:14px;padding:10px 18px 0;font-size:11.5px;color:var(--g500)}
.tlg span{display:flex;align-items:center;gap:5px}
.tlg i{width:10px;height:10px;border-radius:2px;border:1px solid var(--g200);background:#fff;display:block}
.tlg i.on{background:var(--p1);border-color:var(--p1)} .tlg i.dis{background:var(--bg)}
.opn{margin:16px 18px 0;background:var(--bg);border-radius:10px;padding:14px;font-size:12.5px;line-height:1.5;color:var(--g500)}
.opn b{display:block;font-size:13px;margin-bottom:4px}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:8}
.bsheet{position:absolute;left:0;right:0;bottom:0;z-index:9;background:#fff;border-radius:18px 18px 0 0;
  padding:20px 18px 16px;max-height:640px;overflow-y:auto;scrollbar-width:none}
.bsheet::-webkit-scrollbar{display:none}
.bsheet .bs-hd{display:flex;align-items:center;gap:8px}
.bsheet .bs-hd b{flex:1;font-size:17px;font-weight:700;color:var(--ink);line-height:1.5}
.bsheet .bs-hd .bs-x{color:var(--g500);font-size:16px;padding:0 2px}
.bsheet .bs-lb{font-size:15px;line-height:1.5;color:var(--g500);margin-top:18px}
.bsheet .bs-row{display:flex;align-items:center;gap:8px;margin-top:18px}
.bsheet .bs-row .bs-lb{margin:0;flex:1}
/* 시트 폐지 후 폼 안에 들어온 조건 행 */
.pad .bs-lb{font-size:15px;line-height:1.5;color:var(--g500)}
.bsx-row{display:flex;align-items:center;gap:8px}.bsx-row .bs-lb{flex:1}
/* 요청사항 체크 리스트 (FS 2091:13379) */
.rql{display:flex;flex-direction:column}
.alert.inl b{display:inline;font-size:inherit}
/* 전체 메뉴 */
.mhd{background:#272C30;color:#fff}
.mhd .sbar{color:#fff}
.mme{display:flex;gap:10px;padding:4px 18px 14px}
.mava{width:36px;height:36px;border-radius:18px;overflow:hidden;background:#fff;flex:none}
.mava img{width:100%;height:100%;object-fit:cover;display:block}
.mnm{display:flex;align-items:center;height:24px}.mnm b{font-size:18px;font-weight:700;letter-spacing:-.2px}
.mbtns{display:flex;gap:4px;margin-top:6px}
.cpc{display:flex;margin:0 18px 12px;border:.5px solid var(--g200);border-radius:12px;background:#fff;overflow:hidden}
.cpc .am{width:92px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--p1-tint);color:var(--p1-dk);border-right:1px dashed var(--g200);padding:14px 4px;text-align:center}
.cpc .am b{font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.25}
.cpc .am span{font-size:11px;font-weight:700;margin-top:2px}
.cpc.ons .am{background:#FFF6D6;color:#9A6A00}
.cpc .bd{flex:1;min-width:0;padding:13px 14px}
.cpc .bd .nm{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.45}
.cpc .bd .tg{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.cpc .bd .tg .tag{height:20px;font-size:10.5px;padding:0 6px}
.cpc .bd .cap{margin-top:3px}
.cpc .go{align-self:center;margin-right:12px;flex:none;height:32px;padding:0 12px;border-radius:8px;background:var(--p1);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center}
.cpc.old{opacity:.5}
.cpqr{width:150px;height:150px;margin:18px auto 0;border-radius:10px;background:repeating-conic-gradient(#101214 0 25%,#fff 0 50%) 0 0/18px 18px;border:8px solid #fff;box-shadow:0 0 0 1px var(--g200)}
.mstat{display:flex;margin:0 18px 16px;background:rgba(255,255,255,.07);border-radius:10px}
.mstat>div{flex:1;text-align:center;padding:12px 0 11px}
.mstat>div+div{border-left:.5px solid rgba(255,255,255,.12)}
.mstat b{display:block;font-size:18px;font-weight:700;color:#fff;line-height:1.3}
.mstat span{font-size:11px;color:#AEB7BF}
.mbtn{border:.5px solid #6C7883;border-radius:4px;padding:6px 12px;font-size:10px;color:#ECEFF1;line-height:1}
.mbook{display:flex;justify-content:space-between;align-items:center;background:#22BB5F;color:#fff;padding:16px 18px;font-size:14px;letter-spacing:-.2px}
.mbook span{display:flex;align-items:center;gap:6px}
.msec{padding:30px 18px}.msec.line{border-bottom:.5px solid #ECEFF1}
.mst{font-size:16px;font-weight:700;color:#101214;letter-spacing:-.3px;line-height:24px;margin-bottom:20px}
.mrow{display:flex;align-items:center;gap:12px;margin-top:16px}.mst+.mrow{margin-top:0}
.mic{width:36px;height:36px;border-radius:8px;background:#F6F8F9;display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.mic img{width:24px;height:24px}
.mic.todo:after{content:"";position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--danger)}
.mlb{font-size:15px;font-weight:500;color:#3E454B;letter-spacing:-.2px;line-height:20px}
.mnew{font-size:10px;font-weight:700;color:var(--p1);background:var(--p1-tint);border-radius:4px;padding:2px 5px}
.mad{margin:0 18px;height:86px;border-radius:12px;background:linear-gradient(135deg,#FFE08A,#F2B84B);position:relative;padding:22px 20px;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;color:#3E2C00}
.mad span{font-size:13px}.mad b{font-size:15px}.mad i{position:absolute;right:10px;top:10px;font-style:normal;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.2);border-radius:12px;padding:3px 8px}
.lbk{background:var(--bg);border-radius:10px;padding:12px 14px;margin-top:10px}
.lbk .lh{display:flex;align-items:center;gap:8px;font-size:15px}
.tgl{width:40px;height:24px;border-radius:12px;background:var(--g200);position:relative;flex:none}
.tgl i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.tgl.on{background:var(--p1)} .tgl.on i{left:19px}
.rqi{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:15px;line-height:1.5;color:var(--ink)}
.rqi i{width:22px;height:22px;border-radius:50%;background:var(--g100);display:inline-flex;align-items:center;justify-content:center;flex:none}
.rqi i.on{background:var(--p1)}
.rqta{display:block;width:100%;box-sizing:border-box;margin-top:8px;height:120px;resize:none;border:1px solid var(--p1);border-radius:8px;padding:12px 14px;font:inherit;font-size:14px;line-height:1.6;color:var(--ink);outline:none}
.rqta::placeholder{color:var(--g300)}
.rqcnt{text-align:right;font-size:12px;color:var(--g300);margin-top:6px}
.stp{display:inline-flex;align-items:center;border:1px solid var(--g200);border-radius:8px}
.stp span{padding:9px 16px;font-size:17px;font-weight:700;color:var(--g500);line-height:1.5}
.stp b{padding:9px 18px;font-size:15px;font-weight:700;color:var(--ink);line-height:1.5}
.stp span.dim{color:var(--g200);background:transparent}
.opt{display:flex;gap:8px;margin-top:8px}
.opt b{flex:1;text-align:center;padding:11px 0;border-radius:10px;border:1px solid var(--g200);background:#fff;
  font-size:15px;line-height:1.5;font-weight:700;color:var(--g500)}
.opt b.on{background:var(--p1);border-color:var(--p1);color:#fff}
.opt b.dis{background:var(--bg);color:var(--g300);font-weight:400}
.opt.sm b{padding:10px 0;font-size:14px}
.ptab{display:flex;margin-top:16px}
.ptab b{flex:1;text-align:center;padding:10px 0 8px;font-size:15px;line-height:1.5;font-weight:400;color:var(--g500);
  border-bottom:1px solid var(--g200)}
.ptab b.on{font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink)}
.frow{display:flex;justify-content:space-between;align-items:center;font-size:14px;line-height:1.5;margin-top:6px;color:var(--g500)}
.frow em{font-style:normal;color:var(--ink);font-weight:500}
.frow.tot{font-weight:700;color:var(--ink);font-size:15px} .frow.tot em{color:var(--p1);font-size:17px;font-weight:700}
.gd{margin-top:14px;font-size:12px;line-height:1.5;color:var(--g500)}
.gd b{display:block;font-size:12.5px;margin-bottom:3px}
.bsheet .btn{margin-top:18px;border-radius:10px}

/* ---------- 연습 캘린더 — 원본 Calendar/History 29607:159739 실측 (예약 내역 캘린더 재사용) ---------- */
.mcal{background:#fff;padding:0 0 6px}
.mcal .mh{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 0 14px}
.mcal .mh b{font-size:16px;font-weight:700;line-height:24px;letter-spacing:-.3px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.mcal .mh i{width:16px;height:16px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--g500)}
.mcal .mh i.dis{color:var(--g100);pointer-events:none}
.mcal .mh i svg{width:6px;height:10.6px;display:block;transform:scaleX(-1)}
.mcal .mh i.r svg{transform:none}
.mcal .wk{display:grid;grid-template-columns:repeat(7,1fr);column-gap:9px;padding:0 6px;font-size:14px;line-height:24px;color:var(--g300);text-align:center;letter-spacing:-.2px}
.mcal .dg{display:grid;grid-template-columns:repeat(7,42px);column-gap:9px;row-gap:12px;padding:12px 6px 0}
.mcal .dc{height:48px;display:flex;flex-direction:column;align-items:center}
.mcal .dc b{width:42px;height:42px;border-radius:21px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;line-height:24px;letter-spacing:-.3px;color:var(--g500);margin-bottom:-8px}
.mcal .dc.fut b{color:var(--g300);font-weight:400}
.mcal .dc.today b{color:var(--p1)}
.mcal .dc.sel b{background:var(--bg)}
.mcal .dc .mk{height:12px;display:flex;gap:2px;align-items:center;justify-content:center;color:var(--p1)}
.mcal .dc.fut .mk,.mcal .dc.none .mk{color:transparent}
.mcal .dc .mk svg{width:12px;height:12px;display:block}
.tkban{margin:14px 18px 0;background:var(--p1-tint);border-radius:12px;padding:14px}
.tkban .hd{display:flex;align-items:center;gap:6px}
.tkban .hd b{font-size:12px;font-weight:700;color:#0F7A3C}
.tkban .nm{font-size:15px;font-weight:700;color:var(--ink);margin-top:8px;line-height:1.4}
.tkban .sub{font-size:12px;color:#0F7A3C;margin-top:4px}
.tkban .go{margin-left:auto;background:var(--p1);color:#fff;font-size:12px;font-weight:700;
  padding:7px 12px;border-radius:8px;flex:none}
.tkban.none{background:var(--bg)} .tkban.none .nm{color:var(--b2)} .tkban.none .go{background:var(--b1)}
.tkban .dots{display:flex;gap:5px;justify-content:center;margin-top:10px}
.tkban .dots i{width:5px;height:5px;border-radius:50%;background:var(--g200)}
.tkban .dots i.on{background:var(--p1)}
.tkwrap{position:relative;margin-top:14px}
.scard{margin:0 18px 12px;background:var(--bg);border-radius:12px;padding:15px;border:1.5px solid transparent}
.scard.on{border-color:var(--p1);background:var(--p1-tint)}.scard.dim{opacity:.6}
.sflt{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.sflt::-webkit-scrollbar{display:none}
.smap{position:relative;flex:1;overflow:hidden;background:#E9EEF0}
.smapimg{position:absolute;left:0;top:-200px;width:362px;height:784px;display:block;max-width:none}
.spin{position:absolute;display:flex;flex-direction:column;align-items:center}
.sown{font-size:10px;font-weight:700;color:#fff;background:var(--p1);border-radius:8px;padding:1px 6px;margin-bottom:2px;white-space:nowrap}
.sprev{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;padding:18px 18px 16px;box-shadow:0 -4px 20px rgba(20,30,45,.12);z-index:8}
.dcbox{display:flex;align-items:center;gap:8px;border:1px solid var(--g100);border-radius:12px;padding:16px;margin-top:10px;font-size:15px}
.dcbox .k{color:var(--ink);font-weight:500}.dcbox .v{margin-left:auto;color:var(--g500)}.dcbox .v b{color:var(--ink)}.dcbox .ar{color:var(--b3);font-size:18px}
.dcon{font-size:11px;font-weight:700;color:#E0457B;background:#FDEBF2;border-radius:4px;padding:2px 6px}
.dcin{flex:1;min-width:0;height:44px;border:1px solid var(--g100);border-radius:10px;text-align:right;padding:0 14px;font:inherit;font-size:16px;outline:none}
.dcin:focus{border-color:var(--p1)}
.dcmax{flex:none;border:1px solid var(--g200);border-radius:22px;padding:10px 14px;font-size:13px;font-weight:700;color:var(--ink)}
.cpc{display:flex;gap:12px;border:1px solid var(--g100);border-radius:12px;padding:16px;margin-bottom:10px}
.cpc.on{border-color:var(--ink)}.cpc.off{opacity:.45}
.cbx{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--g200);display:flex;align-items:center;justify-content:center;flex:none;font-size:13px;color:#fff;margin-top:2px}
.cbx.on{background:var(--ink);border-color:var(--ink)}
.cpa{font-size:18px;font-weight:700;color:var(--ink)}.cpn{font-size:14px;color:var(--b1);margin-top:4px}.cpw{font-size:12.5px;color:var(--g500);margin-top:4px}
.lkext{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:.5px solid var(--g100);font-size:13px;color:#E0457B}
.lkext b{font-size:13px;color:var(--ink);border:1px solid var(--g200);border-radius:16px;padding:5px 12px;background:#fff}
.procard{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:.5px solid var(--g100)}
.proava{width:48px;height:48px;border-radius:50%;background:var(--p1-tint);color:var(--p1-dk);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none}
.prowk{display:flex;gap:6px;padding:0 18px}
.prowk div{flex:1;border:1px solid var(--g200);border-radius:10px;padding:8px 0;text-align:center;display:flex;flex-direction:column;gap:2px}
.prowk span{font-size:11px;color:var(--g500)}.prowk b{font-size:15px}.prowk i{font-style:normal;font-size:10px;color:var(--p1);font-weight:700}
.prowk div.off{background:var(--bg);border-color:var(--g100)}.prowk div.off b,.prowk div.off i{color:var(--g300)}
.rvn{font-size:12.5px;color:#E0457B;margin-top:8px}
.sbox{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:10px;padding:0 14px;height:44px}
.sbox input{flex:1;border:0;background:transparent;font:inherit;font-size:15px;outline:none;color:var(--ink)}
.sgh{font-size:12.5px;font-weight:700;color:var(--b2);padding:18px 18px 6px}
.srow{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:.5px solid var(--g100)}
.srow .sn{flex:1;font-size:15px;color:var(--ink)}.srow .sn.on{color:var(--p1);font-weight:700}.srow .sn b{color:var(--p1)}
.srow .sd{font-size:12.5px;color:var(--b3)}
.srow .stg{font-size:10px;font-weight:700;color:var(--p1);background:var(--p1-tint);border-radius:4px;padding:2px 5px}
.tkgh{font-size:12.5px;font-weight:700;color:var(--b2);margin:10px 0 8px}.tkgh span{font-weight:400;color:var(--p1-dk)}
.tkwrap .tkbs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 18px;scroll-padding:0 18px;scrollbar-width:none}
.tkwrap .tkbs::-webkit-scrollbar{display:none}
.tkwrap .tkban{margin:0;flex:0 0 100%;box-sizing:border-box;scroll-snap-align:start}
.tkwrap .tkbs:has(.tkban+.tkban) .tkban{flex-basis:calc(100% - 28px)}
.tkwrap .dots{display:flex;gap:0;justify-content:center;margin-top:4px}
.tkwrap .dots i,.tkwrap .dots i.on{display:block;width:auto;height:auto;border-radius:0;background:none;padding:6px 2.5px;cursor:pointer}   /* 점을 눌러도 넘어간다 — i는 누르는 범위, 보이는 점은 ::before(기존 모양 그대로) */
.tkwrap .dots i::before{content:"";display:block;width:5px;height:5px;border-radius:50%;background:var(--g200)}
.tkwrap .dots i.on::before{width:12px;border-radius:3px;background:var(--p1)}
.tkwrap .tkcnt{position:absolute;right:28px;top:12px;font-size:10px;font-weight:700;color:#0F7A3C;z-index:2}
.rdo{display:flex;align-items:center;gap:10px;padding:15px 0}
.rdo span.c{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--g200);flex:none;
  display:flex;align-items:center;justify-content:center}
.rdo.on span.c{border-color:var(--p1)} .rdo.on span.c::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--p1)}
.rdo .t{font-size:15px;color:var(--ink);line-height:1.5}
.cxlta{width:100%;box-sizing:border-box;border:1px solid var(--g200);border-radius:10px;padding:14px;
  min-height:120px;font-family:inherit;font-size:14px;line-height:1.6;color:var(--b3);background:#fff;resize:none}
#cxl-submit:disabled{background:var(--g200);color:var(--g500);cursor:default}
/* W2 예약 확인·결제 (2132:16519 실측) */
.w2h{font-size:16px;font-weight:700;line-height:1.5;color:var(--g500);margin:18px 0 0}
.w2box{background:var(--bg);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px;margin-top:8px}
.w2box p{font-size:16px;line-height:1.5;color:var(--ink);margin:0}
.w2box p.sub{color:var(--g500)}
.w2row{display:flex;align-items:center;gap:8px;padding:13px 0;font-size:16px;line-height:1.5}
.w2row .k{color:var(--g500);white-space:nowrap}
.w2row .v{flex:1;text-align:right;color:var(--ink)}
.w2row .ar{color:var(--g300)}
.w2row.tot .k{color:var(--g500)} .w2row.tot .v{color:var(--p1);font-size:18px;font-weight:700}
.w2hr{height:1px;background:#DADADA}
.w2rd{display:flex;align-items:center;gap:10px;padding:12px 0}
.w2rd .c{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--g300);flex:none;display:flex;align-items:center;justify-content:center}
.w2rd.on .c{border-color:var(--p1)} .w2rd.on .c::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--p1)}
.w2rd .t{font-size:16px;line-height:1.5;color:var(--ink)}
.w2note{background:var(--bg);border-radius:10px;padding:14px;margin-top:10px}
.w2note b{display:block;font-size:14px;font-weight:700;line-height:1.5;color:var(--g500)}
.w2note span{display:block;font-size:12px;line-height:1.5;color:var(--g500);margin-top:6px}
/* 5분 점유 카드 — 스크린 결제(P-6) · 연습장 이용권 결제(P-17) 공용. 경고(분홍)가 아니라 «잡아둔 상태»라 초록 */
.hold{background:var(--p1-tint);border-radius:12px;padding:14px 14px 13px;margin-top:12px}
.hold-top{display:flex;align-items:center;gap:10px}
.hold-ic{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.hold-t{font-size:22px;font-weight:700;letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums;color:var(--p1-dk);flex:none}
.hold-bar{height:4px;border-radius:2px;background:rgba(34,187,95,.18);margin-top:12px;overflow:hidden}
.hold-bar i{display:block;height:100%;background:var(--p1);border-radius:2px}
/* 결제 화면 예약 요약 카드 */
.bsum{border:.5px solid var(--g200);border-radius:12px;padding:0 16px;margin-top:8px}
.bsum .hd{display:flex;align-items:center;gap:6px;padding:14px 0 12px;margin-bottom:3px;border-bottom:.5px solid var(--g100)}
.bsum .hd span.t{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.3px;line-height:1.4}
.bsum .r{display:flex;gap:12px;padding:9px 0;font-size:13.5px;line-height:1.5}
.bsum .r:last-child{padding-bottom:14px}
.bsum .r .k{width:56px;flex:none;color:var(--g500)}
.bsum .r .v{flex:1;color:var(--ink);font-weight:500;text-align:right}
.w2ag{display:flex;align-items:center;gap:10px;padding:4px 0;margin-top:14px}
.w2ag i{width:18px;height:18px;border-radius:4px;background:var(--g200);flex:none;display:block}
.w2ag.on i{background:var(--p1)}
.w2ag .t{font-size:14px;line-height:1.5;color:var(--ink)}
.w2cta{background:var(--p1);color:#fff;border-radius:10px;padding:16px 0;text-align:center;
  font-size:16px;font-weight:700;line-height:1.5;margin-top:18px;width:100%}
.w2cta.dis{background:var(--g100);color:var(--b3)}
/* 아카데미 예약 폼 — 와이어 N-0b 2215:17105 · 타석 유형 N-1a/N-1b 2209:16747·16803 */
/* 예약 상세 3종 (스크린·타석·레슨) · 취소 완료 · 레슨권 목록 */
.dkind{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.5;padding:12px 18px 0}
.dkind .kn{color:var(--g500)} .dkind .st{margin-left:auto;font-weight:700}
.dbig{padding:12px 18px 0}
.dbig .dt{font-size:13px;color:var(--g500)}
.dbig .rowb{display:flex;align-items:baseline;margin-top:4px}
.dbig .rowb b{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--ink)}
.dbig .rowb span{margin-left:auto;font-size:19px;font-weight:700;color:var(--ink)}
.dsec{font-size:14px;font-weight:700;color:var(--g500);padding:20px 18px 2px}
.tkdone{margin:0 18px;background:var(--g100);border-radius:8px;padding:13px;text-align:center;
  font-size:13px;font-weight:500;color:var(--b2)}
.cxldone{display:flex;flex-direction:column;align-items:center;padding:48px 24px 0;text-align:center}
.cxldone .h{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.4px}
.cxldone .s{font-size:13px;color:var(--g500);margin-top:10px;line-height:1.65}
.cxldone .ill{width:150px;height:150px;border-radius:50%;background:var(--bg);margin:34px auto 0;
  display:flex;align-items:center;justify-content:center;font-size:52px}
.lcard{margin:0 18px 10px;background:var(--bg);border-radius:12px;padding:16px}
.lcard .top{display:flex;align-items:center;gap:8px}
.lcard .tag2{font-size:11px;font-weight:700;color:var(--g500);background:#fff;border-radius:6px;padding:3px 8px}
.lcard .rt{margin-left:auto;font-size:12px;font-weight:500;color:var(--g500)}
.lcard .nm{font-size:16px;font-weight:700;color:var(--ink);margin-top:10px}
.lcard .st2{font-size:13px;color:var(--p1);margin-top:5px;display:flex;align-items:center;gap:4px}
.lcard .bar2{height:4px;border-radius:2px;background:var(--g200);margin-top:12px;overflow:hidden}
.lcard .bar2 i{display:block;height:100%;background:var(--p1)}
.lcard .ft{display:flex;align-items:baseline;margin-top:10px;font-size:13px}
.lcard .ft .u{font-weight:700;color:var(--ink)} .lcard .ft .t{color:var(--b3)}
.lcard .ft .r{margin-left:auto;font-weight:700;color:var(--p1)}
.lcard.off .st2,.lcard.off .ft .r{color:var(--b3)} .lcard.off .bar2 i{background:var(--b3)}

/* 날짜 가로 스와이프 (매장 예약 가능 기간) */
.dstrip{display:flex;gap:8px;padding:2px 18px 0;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.dstrip::-webkit-scrollbar{display:none}
.dstrip b{flex:none;width:56px;scroll-snap-align:start;border:1px solid var(--g200);
  border-radius:10px;background:#fff;padding:9px 0;text-align:center;line-height:1.3}
.dstrip b .w{display:block;font-size:11px;color:var(--g500)}
.dstrip b .n{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-top:2px}
.dstrip b .m{display:block;font-size:10px;color:var(--b3);margin-top:1px}
.dstrip b.on{background:#E9F8F0;border-color:var(--p1)}
.dstrip b.on .w,.dstrip b.on .n,.dstrip b.on .m{color:var(--p1)}
.dstrip b.sun .w{color:#E0457B} .dstrip b.on.sun .w{color:var(--p1)}
.dstrip b.off{background:var(--bg);border-color:var(--g100)}
.dstrip b.off .w,.dstrip b.off .n,.dstrip b.off .m{color:var(--g300);font-weight:400}
.dhint{font-size:11px;color:var(--b3);padding:8px 18px 0}

/* 시작 시간 — 30분 단위 칩 한 줄로 시·분 동시 선택 */
.hstrip{display:flex;gap:6px;padding:2px 18px 0;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity}
.hstrip::-webkit-scrollbar{display:none}
.tstrip b{width:58px}
.tstrip b .ap{display:block;font-size:9.5px;font-weight:700;color:#3E63DD;line-height:1;margin-bottom:3px}
.tstrip b.on .ap{color:#fff}
.hstrip b{flex:none;width:46px;scroll-snap-align:start;border:1px solid var(--g200);border-radius:9px;
  background:#fff;padding:7px 0;text-align:center;line-height:1.25}
.hstrip b .hn{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.hstrip b .hd{display:block;font-size:9.5px;color:var(--g500);margin-top:2px}
.hstrip b .htr{display:block;font-size:9px;font-weight:700;margin-top:3px;line-height:1}
.hstrip b.on{background:var(--ink);border-color:var(--ink)}
.hstrip b.on .hn,.hstrip b.on .hd{color:#fff}
.hstrip b.warn{border-color:#F5A8C4;background:#FDEBF2}
.hstrip b.warn .hn,.hstrip b.warn .hd{color:#C2255C}
.hstrip b.off{background:var(--bg);border-color:var(--g100)}
.hstrip b.off .hn,.hstrip b.off .hd{color:var(--g300);font-weight:400}
.tchips{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 18px}
.tchips b{border:1px solid var(--g200);border-radius:9px;background:#fff;padding:8px 0;
  text-align:center;line-height:1.25}
.tchips b .hh{display:block;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.tchips b .rr{display:block;font-size:10px;color:var(--g500);margin-top:2px}
.tchips b.on{background:var(--p1);border-color:var(--p1)}
.tchips b.on .hh,.tchips b.on .rr{color:#fff}
.tchips b.dis{background:var(--bg);border-color:var(--g100)}
.tchips b.dis .hh,.tchips b.dis .rr{color:var(--g300);font-weight:400}
.tchips b.warn{border-color:#F5A8C4;background:#FDEBF2}
.tchips b.warn .hh,.tchips b.warn .rr{color:#C2255C}
.tempty{margin:0 18px;background:var(--bg);border-radius:10px;padding:18px;text-align:center;
  font-size:13px;color:var(--g500)}

/* M-1 타석 목록 (2274:21413) */
.baylist{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px}
.baylist b{border:1px solid var(--g200);border-radius:10px;background:#fff;padding:12px 0;
  text-align:center;line-height:1.35}
.baylist b .n1{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.baylist b .n2{display:block;font-size:11px;color:var(--g500);margin-top:2px}
.mx{margin:0 18px;background:#fff;border:.5px solid var(--g200);border-radius:12px;overflow:hidden}
.mx .r{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border-bottom:.5px solid var(--g100)}
.mx .r:last-child{border-bottom:0}
.mx .r .ax{width:74px;flex:none;font-size:11.5px;font-weight:700;color:var(--b3);line-height:1.5;padding-top:2px}
.mx .r .vv{flex:1;min-width:0}
.mx .r .vv b{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.45}
.mx .r .vv span{display:block;font-size:11.5px;color:var(--g500);margin-top:3px;line-height:1.5}
.mx .r.off .vv b{color:var(--b3)} .mx .r.off .vv span{color:var(--b3)}
.flw{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px}
.flw b{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border-radius:999px;
  padding:7px 12px;font-size:12.5px;font-weight:700;color:var(--ink)}
.flw b i{font-style:normal;font-size:10px;color:#fff;background:var(--p1);width:15px;height:15px;
  border-radius:50%;display:flex;align-items:center;justify-content:center}
.flw em{font-style:normal;align-self:center;color:var(--b3);font-size:12px}
.baylist b .bdev{display:inline-block;margin-top:6px;font-size:9.5px;font-weight:700;line-height:1;
  padding:3px 6px;border-radius:4px;background:var(--g100);color:var(--g500)}
.baylist b.on .bdev{background:var(--p1);color:#fff}
.baylist b.off .bdev{background:var(--bg);color:var(--g300)}
.baylist b.on{background:#E9F8F0;border-color:var(--p1)}
.baylist b.on .n1,.baylist b.on .n2{color:var(--p1)}
.baylist b.off{background:var(--bg);border-color:var(--g100)}
.baylist b.off .n1,.baylist b.off .n2{color:var(--g300);font-weight:400}
/* 연습장 타석 × 시간표 — 타석마다 비는 시간이 달라, 타석 줄에서 이용할 범위를 직접 고른다(«번호 직접» 매장) */
.tt{display:flex;padding:2px 0 0 18px}
.tt-l{flex:none;width:58px;padding-top:24px}
.tt-n{height:40px;margin-bottom:6px;display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.tt-n b{font-size:14px;font-weight:700;color:var(--ink)} .tt-n span{font-size:10.5px;color:var(--g500)}
.tt-n.on b{color:var(--p1-dk)}
.tt-sc{flex:1;position:relative;overflow-x:auto;scrollbar-width:none}
.tt-sc::-webkit-scrollbar{display:none}
.tt-in{display:inline-block;padding-right:18px}
.tt-hd{display:flex;height:24px}
.tt-hd span{flex:none;width:60px;font-size:10.5px;color:var(--b3);font-variant-numeric:tabular-nums;border-left:1px solid var(--g100);padding-left:3px;line-height:16px}
.tt-r{display:flex;gap:2px;height:40px;margin-bottom:6px}
.tt-r i{flex:none;width:27px;height:40px;border-radius:4px;display:flex;overflow:hidden}
.tt-r i:nth-child(2n){margin-right:2px}
.tt-r i u{flex:1;background:#CDEFD9;text-decoration:none}
.tt-r i u.x{background:repeating-linear-gradient(135deg,var(--g100) 0 4px,#E3E7EA 4px 8px)}
.tt-r i u.p{background:var(--bg)}
.tt-r i u.s{background:var(--p1)}
.tt-r i u.l{background:#0F7A3C}   /* 레슨 예약의 레슨 구간(타석 이용의 앞부분) */
.tt-r i.a{box-shadow:inset 0 0 0 2px #0F7A3C}
.tt-r i.nx{opacity:.8} .tt-r i.nx u:not(.s):not(.x){background:#E2F4E9}
.tt-hd span.nx0{border-left:2px solid var(--ink);color:var(--ink);font-weight:700} .tt-hd span.nx{color:var(--b2)}
.ttsum{margin:12px 18px 0;padding:12px 14px;border-radius:10px;background:var(--p1-tint);display:flex;align-items:center;gap:10px}
.ttsum b{font-size:15px;font-weight:700;color:var(--p1-dk)} .ttsum span{font-size:12px;color:#0F7A3C;margin-left:auto;text-align:right;line-height:1.4}
.ttsum.off{background:var(--bg)} .ttsum.off b{color:var(--g500)}
/* 시작 · 종료 5분 조정 — 연습장 시간표(번호 직접) · 이용 시간(매장 배정) 공용 */
.ttadj{margin:12px 18px 0;padding:6px 14px 12px;border-radius:12px;background:var(--p1-tint)}
.ttadj .hd{display:flex;align-items:center;padding:8px 0 4px}
.ttadj .hd b{font-size:15px;font-weight:700;color:var(--p1-dk)} .ttadj .hd span{margin-left:auto;font-size:12px;font-weight:700;color:var(--p1-dk)}
.ttadj .r{display:flex;align-items:center;gap:8px;padding:6px 0}
.ttadj .r .k{width:34px;font-size:13px;color:#0F7A3C}
.ttadj .r .mn,.ttadj .r .pl{width:36px;height:34px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--p1-dk);flex:none}
.ttadj .r .mn.dim,.ttadj .r .pl.dim{color:var(--g200)}
.ttadj .r b{flex:1;text-align:center;font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.ttadj .r .fx{flex:1;text-align:center;font-size:12px;color:#0F7A3C}
.ttadj .ft{font-size:11.5px;color:#0F7A3C;margin-top:4px;line-height:1.5}
.rblg{display:flex;gap:12px;padding:6px 18px 0;font-size:10.5px;color:var(--g500)}
.rblg span{display:flex;align-items:center;gap:4px}
.rblg i{width:12px;height:10px;border-radius:2px;background:#CDEFD9}
.rblg i.l{background:#0F7A3C}
.rblg i.x{background:repeating-linear-gradient(135deg,var(--g100) 0 3px,#E3E7EA 3px 6px)} .rblg i.s{background:var(--p1)}
.dch{display:flex;gap:8px;padding:0 18px}
.dch b{flex:1;border:1px solid var(--g200);border-radius:10px;background:#fff;padding:10px 0;
  text-align:center;line-height:1.35}
.dch b .d1{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.dch b .d2{display:block;font-size:11px;color:var(--g500);margin-top:2px}
.dch b.on{background:#E9F8F0;border-color:var(--p1)}
.dch b.on .d1{color:var(--p1)} .dch b.on .d2{color:var(--p1)}
.dch b.off{background:var(--bg);border-color:var(--g100)}
.dch b.off .d1,.dch b.off .d2{color:var(--g300);font-weight:400}
.durb{display:flex;align-items:center;border:1px solid var(--g200);border-radius:10px;
  background:#fff;margin:0 18px;overflow:hidden}
.durb .mn{width:48px;height:58px;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;color:var(--g500);background:var(--bg);flex:none}
.durb .mn.dim{color:var(--g200)}
.durb .mid{flex:1;text-align:center;line-height:1.35}
.durb .mid b{display:block;font-size:17px;font-weight:700;color:var(--ink)}
.durb .mid span{display:block;font-size:11.5px;color:var(--g500);margin-top:2px}
.durb .pl{width:48px;height:58px;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;color:#fff;background:var(--p1);flex:none}
.durb .pl.dim{background:var(--g100);color:var(--g300)}
.btyp{display:flex;gap:10px;padding:0 18px}
.btyp b{flex:1;border:1px solid var(--g200);border-radius:10px;background:#fff;padding:14px 0;
  text-align:center;line-height:1.4}
.btyp b .t1{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.btyp b .t2{display:block;font-size:11.5px;color:var(--g500);margin-top:3px}
.btyp b.on{background:#E9F8F0;border-color:var(--p1)}
.btyp b.on .t1,.btyp b.on .t2{color:var(--p1)}
.flb{font-size:15px;font-weight:700;color:var(--ink);padding:18px 18px 8px}
.flb.sub{font-size:13px;font-weight:600;color:var(--g500);padding:14px 18px 8px}
/* 예약 폼 단계 라벨 — 날짜 / 시간 / 룸 중 어느 단계인지 번호로 구분한다 */
.stpl{display:flex;align-items:center;gap:7px;padding:16px 18px 8px;
  font-size:15px;font-weight:700;color:var(--ink);line-height:1.4}
.stpl i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:var(--p1);color:#fff;font-size:11px;font-weight:700;font-style:normal}
.stpl em{margin-left:auto;font-size:12.5px;font-weight:600;font-style:normal;color:var(--p1);text-align:right;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:12px}  /* 요약이 길어도 단계 제목을 밀지 않게 한 줄로 */
.stpl em.off{color:var(--g300)}
.sband{height:8px;background:var(--bg);margin-top:16px}
.fnote{font-size:11.5px;color:var(--g500);padding:8px 18px 0;line-height:1.5}
.fnote.warn{color:#E0457B}
.prg{display:flex;align-items:center;justify-content:center;gap:16px;padding:2px 18px 4px}
.prg b{font-size:16px;font-weight:700;line-height:24px;letter-spacing:-.3px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prg i{width:16px;height:16px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--g500)}
.prg i.dis{color:var(--g100);pointer-events:none}
.prg i svg{width:6px;height:10.6px;display:block;transform:scaleX(-1)} .prg i.r svg{transform:none}
.prg-sub{text-align:center;font-size:12px;color:var(--b2);letter-spacing:-.2px;padding-bottom:12px}
.msum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 18px 0}
.msum .cell{background:var(--bg);border-radius:12px;padding:12px 10px;text-align:center}
.msum .cell .k{font-size:11px;font-weight:500;color:var(--b2)}
.msum .cell .v{font-size:18px;font-weight:700;letter-spacing:-.4px;margin-top:3px;color:var(--b1)}

/* ---------- 예약 상세·내역·레슨·체크인 (W5 · N-3 · N-4 · N-6 · W6-B · L-2~4 · N-10 와이어) ---------- */
.kv{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:.5px solid var(--g100);font-size:14px;line-height:1.5}
.kv .k{color:var(--g500)} .kv .v{color:var(--ink);font-weight:500;font-size:15px;text-align:right}
.kv .v.g{color:var(--p1)} .kv .v.pk{color:#E0457B}
.sh{font-size:16px;font-weight:700;line-height:1.5;margin:22px 0 2px;color:var(--ink)}
.alert{border:1px solid #F5A8C4;background:#FDEBF2;border-radius:10px;padding:14px;margin:16px 0 0;font-size:12.5px;line-height:1.55;color:#C2255C}
.alert b{display:block;font-size:14px;margin-bottom:4px}
.pillpk{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid #F5A8C4;background:#FDEBF2;color:#E0457B;font-size:12px;font-weight:500}
.rsv{background:#fff;border:.5px solid var(--g200);border-radius:12px;padding:14px;margin:0 18px 12px}
.rsv .st{display:flex;align-items:center;gap:8px}
.rsv .nm{font-size:15px;font-weight:700;color:var(--ink);margin-top:10px;line-height:1.5}
.rsv .dt{font-size:13px;color:var(--g500);margin-top:4px}
.popwrap{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:0 30px}
.pop{background:#fff;border-radius:16px;padding:26px 20px 20px;width:100%;text-align:center}
.pop .t{font-size:17px;font-weight:700;color:var(--ink);line-height:1.5}
.pop .s{font-size:13.5px;color:var(--g500);margin-top:10px;line-height:1.6}
.pop .c{font-size:12px;color:var(--b3);margin-top:8px}
.pop .bt{display:flex;gap:8px;margin-top:20px}
.ktype{display:flex;flex-direction:column;gap:10px;padding:0 18px}
.ktype b{height:60px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--b3)}
.ktype b.on{background:#fff;border:1px solid var(--p1);color:var(--p1)}
.okc{width:64px;height:64px;border-radius:50%;background:var(--p1-tint);border:1.5px solid var(--p1);display:flex;align-items:center;justify-content:center;margin:0 auto;color:var(--p1);font-size:28px}

/* 권종 퀵메뉴 — 원본 tab/sort_s 29607:160120 (이용권 종류 화면) 실측 */
.tsort{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
  background:#fff;padding:20px 18px}
.tsort::-webkit-scrollbar{display:none}
.tsort b{display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:48px;padding:6px 12px;border-radius:16px;background:#fff;
  border:.5px solid #ADB9C2;color:#6C7883;font-size:14px;line-height:20px;
  font-weight:400;letter-spacing:-.2px;white-space:nowrap}
.tsort b.on{background:#101214;border-color:#101214;color:#fff}

/* ---------- 칩 (Figma 실측) ---------- */
.chip{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:999px;
  background:#fff;border:.5px solid var(--g200);font-size:14px;font-weight:500;
  color:var(--g500);letter-spacing:-.2px;flex:none;white-space:nowrap}
.chip.on{height:38px;background:var(--g800);border-color:var(--g800);color:#fff;font-weight:700}
.chip.off{opacity:.4;text-decoration:line-through}
/* 작은 상태 뱃지 */
.tag{display:inline-flex;white-space:nowrap;flex:none;align-items:center;height:22px;padding:0 8px;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:-.2px;background:var(--g100);color:var(--b2)}
.tag.g{background:var(--p1-tint);color:var(--p1-dk)}
.tag.r{background:var(--danger-tint);color:var(--danger)}
.tag.y{background:var(--yellow-tint);color:#9A6A00}
.tag.d{background:var(--g800);color:#fff}

/* ---------- 버튼 (Figma: h48 r8 16B) ---------- */
.btn{height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;letter-spacing:-.3px;width:100%;padding:0 24px}
.btn-p{background:var(--p1);color:#fff}
.btn-o{background:#fff;color:var(--b1);border:1px solid var(--g200)}
.btn-dis{background:var(--g100);color:var(--b3)}
.btn-s{height:40px;font-size:14px;border-radius:8px}

/* ---------- 프로필 카드 (Figma: 324×203 · pad 18/12 · CTA 300×48) ---------- */
.pcard{margin:20px 18px 0;background:#fff;border-radius:16px;height:203px;padding:12px 18px}
.pcard .pf{height:30px;display:flex;align-items:center;gap:10px}
.pcard .pf .ava{width:30px;height:30px;border-radius:50%;flex:none;position:relative;
  overflow:hidden;background:var(--g100);box-shadow:inset 0 0 0 1px rgba(173,185,194,.55)}
.pcard .pf .ava img{position:absolute;left:-54px;top:-12px;width:136px;height:89px;
  max-width:none;object-fit:cover;display:block}
.pcard .pf .nm{font-size:16px;font-weight:700;letter-spacing:-.3px}
.pcard .pl{height:.5px;background:var(--g100);margin-top:17px}
.pcard .sm{display:flex;margin-top:17px;height:50px}
.pcard .sm .lb{height:18px;display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:12px;font-weight:500;color:var(--b2);letter-spacing:-.2px}
.pcard .sm .lb svg{width:12px;height:12px;flex:none}
.pcard .sm .vl{margin-top:6px;height:26px;display:flex;align-items:baseline;
  font-size:20px;font-weight:700;letter-spacing:-.5px;color:var(--b1)}
.pcard .sm .vl .u{font-size:16px;margin-left:1px}
.pcard .sm .vl .sep{color:var(--g200);margin:0 7px;font-weight:500}
.pcard .cta{margin:17px -6px 0}

/* ---------- 배너 (Figma: 324×86 · r12) ---------- */
.bn{margin:0 18px;height:86px;border-radius:8px;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,#3E3185 0%,#9435C0 100%)}
.bn .ry{position:absolute;left:159px;top:2px;width:131px;height:131px;border-radius:8px;
  object-fit:cover;display:block;max-width:none}
.bn .t1,.bn .t2{position:absolute;left:20px;white-space:nowrap;
  text-shadow:0 4px 20px rgba(0,0,0,.6);letter-spacing:-.3px}
.bn .t1{top:20px;font-size:16px;font-weight:700;line-height:24px}
.bn .t2{top:48px;font-size:16px;font-weight:400;line-height:16px}
.bn .ind{position:absolute;left:276px;top:18px;display:flex;gap:6px}
.bn .ind i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3)}
.bn .ind i.on{background:#fff}

/* ============================================================
   서브 화면 컴포넌트 — Figma 실측
   예약 28370:34808/34173 · 이용권 29260:100284
   매장 상세 27497:21363 · 지도 27497:21506
   ============================================================ */
/* 정보 행 · 밴드 · 구분선 */
.inforow{display:flex;align-items:center;padding:15px 18px;gap:12px}
.inforow .k{font-size:14px;color:var(--b2);font-weight:500;flex:none;width:52px}
.inforow .v{flex:1;text-align:right;font-size:15px;font-weight:700;letter-spacing:-.3px}
.band{height:8px;background:var(--bg)}
.divl{height:1px;background:var(--g100)}

/* 주간 캘린더 */
.wcal{padding:0 12px 6px}
.wcal .hd,.wcal .dy{display:grid;grid-template-columns:repeat(7,1fr)}
.wcal .hd span{text-align:center;font-size:13px;color:var(--b3);font-weight:500;padding:4px 0 8px}
.wcal .dy b{height:40px;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;color:var(--b1)}
.wcal .dy b.off{color:var(--b3)}
.wcal .dy b.on{background:var(--p1);color:#fff;font-weight:700;width:40px;
  border-radius:50%;margin:0 auto}

/* 예약 시간 칩 (초록 아웃라인) */
.tchip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;
  border-radius:999px;border:1px solid var(--g200);background:#fff;font-size:15px;
  font-weight:500;color:var(--b1);flex:none;white-space:nowrap}
.tchip.on{border-color:var(--p1);color:var(--p1);font-weight:700}
.tchip.off{color:var(--b3);border-color:var(--g100)}

/* 타석 카드 그리드 */
.bays{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 18px}
.bays .b{background:var(--bg);border-radius:8px;height:56px;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;text-align:center;padding:0 6px;line-height:1.3}
.bays .b.on{background:var(--p1-tint);color:var(--p1-dk);box-shadow:inset 0 0 0 1.5px var(--p1)}
.bays .b.off{color:var(--b3)}

/* 시간대 선택 리스트 */
.trow{margin:0 18px 10px;background:var(--bg);border-radius:12px;height:56px;
  display:flex;align-items:center;padding:0 16px;gap:10px}
.trow .t{font-size:15px;font-weight:600;flex:1}
.trow .s{font-size:14px;font-weight:700;color:var(--p1)}
.trow .s.done{color:var(--b3)}
.trow .cv{color:var(--b3);font-size:12px}

/* 이용권 카드 */
.tkc{margin:0 18px 12px;background:var(--bg);border-radius:12px;padding:16px}
.tkc .hd{display:flex;align-items:center;gap:8px}
.tkc .kind{background:#8A9299;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.tkc .left{margin-left:auto;font-size:14px;font-weight:700;color:var(--b2)}
.tkc .nm{font-size:16px;font-weight:700;margin-top:11px;line-height:1.38;letter-spacing:-.3px}
.tkc .st{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--b2);margin-top:9px;font-weight:500}
.tkc .pg{height:6px;border-radius:3px;background:#9BE0B8;margin-top:15px;overflow:hidden}
.tkc .pg>i{display:block;height:100%;background:var(--b1);border-radius:3px}
.tkc .ft{display:flex;align-items:baseline;margin-top:11px;font-size:14px;font-weight:700}
.tkc .ft .u{color:var(--b3);font-weight:500;margin-left:3px}
.tkc .ft .r{margin-left:auto;color:var(--p1)}

/* 매장 상세 */
.sdtabs{display:flex;border-bottom:1px solid var(--g100)}
.sdtabs button{flex:1;padding:13px 0;font-size:14px;font-weight:600;color:var(--b2);
  border-bottom:2px solid transparent}
.sdtabs button.on{color:var(--b1);font-weight:700;border-bottom-color:var(--b1)}
.sdir{display:flex;gap:10px;padding:9px 18px;font-size:14px;align-items:flex-start}
.sdir .ic{width:16px;flex:none;color:var(--b3);text-align:center;font-size:13px;line-height:21px}
.sdir .tx{flex:1;color:var(--b1);font-weight:500;line-height:21px}
.sdcp{color:var(--p1);font-weight:700;font-size:13px;margin-left:6px}
.sddev{display:flex;padding:11px 18px;font-size:14px;font-weight:500}
.sddev .n{margin-left:auto;font-weight:700}
.sdfac{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 18px 10px}
.sdfac .f{border:1px solid var(--g200);border-radius:10px;padding:13px 2px;text-align:center}
.sdfac .f .e{font-size:20px;line-height:1}
.sdfac .f .l{font-size:11px;margin-top:9px;color:var(--b1);font-weight:500}

/* 지도 화면 — Figma 27497:21506 실측 컴포넌트 */
.msearch{position:relative;width:324px;height:48px;flex:none}
.mtoggle{width:64px;height:32px;border-radius:820px;background:#fff;border:.5px solid var(--g100);
  display:flex;align-items:center;overflow:hidden;flex:none}
.mtoggle .l{flex:1;height:100%;background:var(--p1);display:flex;align-items:center;
  justify-content:center;padding-left:4px;border-radius:50px 0 0 50px}
.mtoggle .r{flex:1;height:100%;display:flex;align-items:center;justify-content:center;padding-right:4px;
  border-radius:0 50px 50px 0}
.mtoggle .l.off{background:#fff}
.mtoggle .r.on{background:var(--p1)}
.mtoggle i{width:12px;height:12px;display:block;background:#fff;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.mtoggle .l.off i,.mtoggle .r:not(.on) i{background:var(--p1)}
.mtab{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:16px;
  background:#fff;border:.5px solid var(--g100);font-size:14px;font-weight:400;color:var(--g500);
  line-height:20px;white-space:nowrap;flex:none}
.mtab.on{background:#101214;color:#fff;border-color:#101214}
/* 매장찾기 필터 칩 줄(좌우 스크롤) · 시트 · 정렬 바 (10/16) */
.sfchips{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;margin-right:-18px;padding-right:18px}
.sfchips::-webkit-scrollbar{display:none}
.sfo{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 14px;border-radius:999px;border:.5px solid var(--g200);font-size:14px;color:var(--b1);background:#fff}
.sfo.on{background:var(--g800);border-color:var(--g800);color:#fff;font-weight:700}
.sfo i{font-style:normal;font-size:10px;font-weight:700;color:#fff;background:var(--p1);border-radius:4px;padding:1px 4px}
.sfos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sfr{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:.5px solid var(--g100)}
.sfr b{font-size:15px;font-weight:700;color:var(--b1)}
.sfr.on b{color:var(--p1-dk)}
.sfr .ck{width:22px;font-size:16px;font-weight:700;color:var(--p1);text-align:right}
.sfbar{display:flex;align-items:center;padding:2px 18px 12px;font-size:13px;color:var(--b2)}
.sfbar b{color:var(--b1)}
.sfstar{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex:none;margin-right:-4px}
.mround{position:absolute;left:50%;transform:translateX(-50%);bottom:118px;z-index:6;
  display:flex;align-items:center;gap:4px;background:#fff;border:.5px solid var(--g300);
  border-radius:820px;padding:9px 12px;font-size:14px;font-weight:500;color:var(--p1)}
.mfloat{position:absolute;right:18px;bottom:88px;z-index:6;width:40px;height:40px;border-radius:20px;
  background:#fff;border:.5px solid var(--g300);display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 0 15px rgba(42,44,48,.2))}

/* 통계 — 데이터맵(Q-Range) 로비 카드·종합 통계 */
.stc{display:flex;align-items:center;gap:12px;margin:0 18px 10px;background:var(--bg);
  border-radius:12px;padding:14px 16px}
.stc .bd{flex:1;min-width:0}
.stc .kd{font-size:12px;font-weight:500;color:var(--b2);letter-spacing:-.2px}
.stc .vl{font-size:20px;font-weight:700;letter-spacing:-.5px;margin-top:3px;
  display:flex;align-items:baseline;gap:6px}
.stc .vl .u{font-size:13px;font-weight:600;color:var(--b2)}
.stc .dt{font-size:12px;font-weight:500;color:var(--b2);margin-top:4px}
.stc .dl{font-size:12px;font-weight:700;margin-left:2px}
.stc .dl.up,.dl.up{color:var(--danger)} .stc .dl.good,.dl.good{color:var(--p1)}
.spark{display:flex;gap:4px;align-items:flex-end;height:36px;flex:none}
.spark i{width:7px;border-radius:2px;background:var(--p1);min-height:3px}
.spark i.dim{background:var(--g200)}
.spark i.none{background:transparent;border:1px dashed var(--g200);border-radius:2px}
/* 통계 모션 — 화면에 들어올 때 한 번. 데모 토글로 다시 그릴 때는 움직이지 않는다 */
@keyframes stUp{from{transform:scaleY(0)}}
@keyframes stFade{from{opacity:0;transform:translateY(4px)}}
@keyframes stPop{from{transform:scale(0);opacity:0}}
@keyframes stGrow{from{width:0}}
@keyframes stSlide{from{left:calc(50% - 7px)}}
.phone.anim .bars .b i,.phone.anim .spark i{transform-origin:50% 100%;animation:stUp .65s cubic-bezier(.2,.8,.2,1) both}
.phone.anim .bars .b em{animation:stFade .4s .35s both}
.phone.anim .bars .b:nth-child(2) i,.phone.anim .spark i:nth-child(2){animation-delay:.06s}
.phone.anim .bars .b:nth-child(3) i,.phone.anim .spark i:nth-child(3){animation-delay:.12s}
.phone.anim .bars .b:nth-child(4) i,.phone.anim .spark i:nth-child(4){animation-delay:.18s}
.phone.anim .bars .b:nth-child(5) i,.phone.anim .spark i:nth-child(5){animation-delay:.24s}
.phone.anim .bars .b:nth-child(6) i{animation-delay:.30s}
.phone.anim .pt{transform-box:fill-box;transform-origin:center;animation:stPop .35s cubic-bezier(.2,.9,.3,1.4) both}
.phone.anim .hb{animation:stGrow .8s cubic-bezier(.2,.8,.2,1) both}
.phone.anim .gslide{animation:stSlide .8s .2s cubic-bezier(.2,.8,.2,1) both}
.phone.anim .avgl{animation:stFade .5s .6s both}
.phone.anim .gch{animation:stPop .4s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes stDraw{from{stroke-dasharray:700;stroke-dashoffset:700}to{stroke-dasharray:700;stroke-dashoffset:0}}
.phone.anim .ln{animation:stDraw 1s .1s ease-out both}
.phone.anim .br{transform-box:fill-box;transform-origin:50% 100%;animation:stUp .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes stDn{from{stroke-dasharray:0 999}}
.phone.anim .dn{animation:stDn .9s ease-out both}
.sct{width:calc(100% - 20px);margin:12px 10px 0;border-collapse:collapse;font-size:12.5px;text-align:center}
.sct th{background:var(--bg);color:var(--b2);font-weight:600;padding:9px 0}
.sct th.on{color:var(--p1-dk);font-weight:800;box-shadow:inset 0 -2px 0 var(--p1)}
.sct td{padding:8px 0;border-bottom:.5px solid var(--g100)} .sct td.k,.sca td.k{text-align:left;color:var(--b2);padding-left:6px;font-size:12px}
.sclg{display:flex;flex-wrap:wrap;gap:10px;padding:14px 18px;font-size:11.5px;color:var(--b2)}
.sclg i{display:inline-block;width:11px;height:11px;margin-right:4px;vertical-align:-1px}
.sca{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px;text-align:center}
.sca th{font-size:11.5px;color:var(--b3);font-weight:600;padding:8px 0;border-top:1px solid var(--g200)}
.sca td{padding:10px 0;border-top:.5px solid var(--g100)}
/* 라운드 통계(T-5) */
.rkpi{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 18px 0}
.rkpi>div{background:#fff;border-radius:12px;padding:12px 14px}
.rkpi>div.k1{box-shadow:inset 3px 0 0 var(--p1)}
.rkpi span{font-size:11.5px;font-weight:600;color:var(--b2)}
.rkpi b{display:block;font-size:24px;font-weight:700;letter-spacing:-.6px;margin-top:4px;color:var(--b1)}
.rkpi b i{font-style:normal} .rkpi b small,.r3 b small{font-size:12px;color:var(--b2);margin-left:1px;font-weight:600}
.rkpi em{font-style:normal;font-size:11px;color:var(--b3)}
.rrow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:11px 14px;margin-bottom:6px}
.rrow.on{box-shadow:inset 0 0 0 1.5px var(--p1)}
.rrow>i{font-style:normal;width:22px;height:22px;border-radius:6px;background:var(--bg);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.rrow .h6 small{font-size:10.5px;color:var(--b3);font-weight:600}
.rrow b{font-size:17px;font-weight:700} .rrow em{display:block;font-style:normal;font-size:11px;font-weight:700;color:#E8890C}
.rbest{font-size:10px;font-weight:800;color:#fff;background:var(--p1);border-radius:6px;padding:2px 6px}
.rcard{background:#fff;border-radius:14px;margin:14px 18px 0;padding:14px 14px 10px}
.rch{font-size:15px;font-weight:700;display:flex;align-items:baseline;gap:6px;margin-bottom:10px}
.rch span{font-size:11px;font-weight:600;color:var(--b3)}
.r3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.r4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px;text-align:center}
.r3>div,.r4>div{background:var(--bg);border-radius:10px;padding:10px}
.r3 b,.r4 b{display:block;font-size:19px;font-weight:700;letter-spacing:-.4px}
.r3 span,.r4 span{display:block;font-size:11px;font-weight:600;color:var(--b2);margin-top:3px}
.rsub{display:flex;font-size:12.5px;font-weight:700;margin:12px 0 4px}
.rsub span{margin-left:auto;font-size:11px;font-weight:600;color:var(--b3)}
/* 가장 최근 기록을 눈에 띄게 */
.bars .b:last-child em{color:var(--p1-dk);font-size:13px}
.avgl{position:absolute;left:18px;right:18px;border-top:1.5px dashed #272C30;opacity:.35;pointer-events:none}
.avgl span{position:absolute;right:0;top:-17px;font-size:10.5px;font-weight:700;color:#272C30}
@media (prefers-reduced-motion:reduce){.phone.anim *{animation:none!important}}

.bars{display:flex;gap:8px;align-items:flex-end;height:132px;padding:0 18px 6px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bars .b i{width:100%;max-width:34px;border-radius:5px 5px 0 0;background:var(--p1);min-height:4px}
.bars .b i.dim{background:#9BE0B8}
.bars .b i.none{background:transparent;border:1px dashed var(--g200)}
.bars .b em{font-style:normal;font-size:12px;font-weight:700;margin-bottom:6px}
.barx{display:flex;gap:8px;padding:0 18px 18px}
.barx span{flex:1;text-align:center;font-size:11px;font-weight:500;color:var(--b2)}

.ring{width:132px;height:132px;margin:0 auto;border-radius:50%;display:flex;
  align-items:center;justify-content:center;position:relative}
.ring .in{width:104px;height:104px;border-radius:50%;background:#fff;display:flex;
  flex-direction:column;align-items:center;justify-content:center}
.ring .in b{font-size:24px;font-weight:700;letter-spacing:-.5px}
.ring .in s{text-decoration:none;font-size:12px;color:var(--b2);font-weight:500;margin-top:2px}
.stgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 18px 12px}
.stgrid .cell{background:var(--bg);border-radius:12px;padding:14px;color:var(--b1)}
.stgrid .cell .k{font-size:12px;font-weight:500;color:var(--b2)}
.stgrid .cell .v{font-size:19px;font-weight:700;letter-spacing:-.4px;margin-top:5px;color:var(--b1)}
.stgrid .cell .d{font-size:12px;font-weight:700;margin-top:3px}

/* 핀 선택 → 매장 프리뷰 시트 (Figma 27497:21279) */
.mprev{position:absolute;left:0;right:0;bottom:58px;z-index:8;background:#fff;
  border-radius:16px 16px 0 0;padding:20px 18px 14px;box-shadow:0 -4px 20px rgba(20,30,45,.12)}
.mprev .nm{display:flex;align-items:center;gap:8px}
.mprev .nm b{font-size:18px;font-weight:700;letter-spacing:-.2px;line-height:26px}
.mprev .cpn{display:inline-flex;align-items:center;gap:4px;background:var(--bg);
  border-radius:999px;padding:4px 10px;font-size:13px;font-weight:500;color:var(--b1);flex:none}
.mprev .addr{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;
  line-height:20px;color:var(--g500);min-width:0}
.mprev .addr .op{color:var(--p1);font-weight:700;flex:none}
.mprev .addr .sep{width:1px;height:12px;background:var(--g200);flex:none}
.mprev .addr .a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mprev .hr2{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;line-height:20px}
.mprev .hr2 .bd{font-size:10px;font-weight:700;min-width:22px;min-height:20px;padding:2px 5px;
  border-radius:4px;display:flex;align-items:center;justify-content:center;flex:none}
.mprev .btns{display:flex;gap:8px;margin-top:18px}
.mprev .dots{display:flex;gap:6px;justify-content:center;margin-top:16px}
.mprev .dots i{width:6px;height:6px;border-radius:50%;background:var(--g200)}
.mprev .dots i.on{background:var(--p1)}
.mpin.sel{transform:scale(1.35);filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}

/* 지도 전체화면 + 플로팅 */
.mapfull{position:absolute;inset:0;z-index:1;background:
  repeating-linear-gradient(0deg,#E4E9E6 0 1px,transparent 1px 52px),
  repeating-linear-gradient(90deg,#E4E9E6 0 1px,transparent 1px 52px),
  radial-gradient(circle at 26% 30%,rgba(34,187,95,.10),transparent 44%),
  radial-gradient(circle at 74% 66%,rgba(122,180,255,.14),transparent 46%),#EEF2EF}
.mfsearch{position:absolute;left:18px;right:18px;top:62px;height:44px;border-radius:999px;
  background:rgba(255,255,255,.97);display:flex;align-items:center;gap:12px;padding:0 16px;
  box-shadow:0 2px 12px rgba(20,30,45,.14);font-size:15px;color:var(--b2);z-index:6;font-weight:500}
.mftog{position:absolute;left:14px;top:120px;display:flex;z-index:6;border-radius:999px;
  overflow:hidden;box-shadow:0 2px 8px rgba(34,187,95,.28)}
.mftog button{width:36px;height:32px;background:var(--p1);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:14px}
.mftog button+button{box-shadow:inset 1px 0 0 rgba(255,255,255,.35)}
.mfchips{position:absolute;left:96px;right:0;top:120px;display:flex;gap:6px;z-index:6;
  overflow-x:auto;padding-right:14px;scrollbar-width:none}
.mfchips::-webkit-scrollbar{display:none}
.mfchip{height:32px;padding:0 12px;border-radius:999px;background:#fff;display:inline-flex;
  align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--b1);flex:none;
  box-shadow:0 1px 6px rgba(20,30,45,.12);white-space:nowrap}
.mfchip.on{background:var(--g800);color:#fff}
.mfre{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;z-index:6;
  background:#fff;border-radius:999px;height:36px;padding:0 16px;display:flex;align-items:center;
  gap:6px;font-size:13px;font-weight:700;box-shadow:0 3px 14px rgba(20,30,45,.18)}
.mfloc{position:absolute;right:14px;bottom:60px;z-index:6;width:38px;height:38px;border-radius:50%;
  background:var(--p1);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:15px;box-shadow:0 3px 12px rgba(34,187,95,.34)}
.mpin{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--p1);color:#fff;font-size:10px;font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.22)}
.mpin>span{transform:rotate(45deg)}
.mpin.fav{background:#F6BA21}
.mpin.np{background:var(--danger)}
.mpin.me{width:16px;height:16px;border-radius:50%;transform:none;background:#FA5E4C;
  box-shadow:0 0 0 5px rgba(250,94,76,.22)}

/* ---------- 상호작용 ---------- */
.tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
.tap:active{opacity:.55}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.toast-live{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);z-index:300;
  animation:tin .2s ease-out;white-space:nowrap;max-width:300px}

/* ---------- 퀵메뉴 아이콘 (Figma 원본 에셋) ---------- */
.qi{position:relative;display:block;width:30px;height:30px;flex:none}
.qi img,.qi span,.qi i{position:absolute;display:block}
.qi img{max-width:none;width:auto;height:auto}
.qi img[style*="inset:0"]{width:100%;height:100%}
.qi i{background:#925757;border-radius:3px}

/* ---------- 퀵메뉴 4열 (Figma: 64×58, gap16, icon30) ---------- */
.qm{display:grid;grid-template-columns:repeat(4,64px);grid-auto-rows:58px;gap:24px 16px;padding:0 28px 6px}
.qm .it{width:64px;height:58px;display:flex;flex-direction:column;align-items:center}
.qm .it .ic{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:17px}
.qm .it .lb{margin-top:10px;font-size:14px;line-height:18px;font-weight:500;color:var(--g500);letter-spacing:-.2px;white-space:nowrap}
.qm .it.empty{visibility:hidden;pointer-events:none}
.qm .it.todo .ic{border-radius:9px;background:var(--g100);position:relative}
.qm .it.todo .ic:after{content:"";position:absolute;top:-3px;right:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--danger);border:1.5px solid var(--bg)}

/* ---------- 리스트 행 ---------- */
.row{display:flex;align-items:center;gap:12px;padding:14px 18px}
.row+.row{border-top:.5px solid var(--g100)}
.av{width:44px;height:44px;border-radius:50%;background:var(--g100);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--b2)}
.av.g{background:var(--p1-tint);color:var(--p1-dk)}
.av.r{background:var(--danger-tint);color:var(--danger)}
.av svg{display:block}
.av.sq{border-radius:12px}

/* ---------- 진행바 · 도트 ---------- */
.bar{height:4px;border-radius:2px;background:var(--g100);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--p1);border-radius:2px}
.dots{display:flex;gap:6px}
.dots i{width:20px;height:5px;border-radius:3px;background:var(--g100)}
.dots i.on{background:var(--danger)}

/* ---------- 타임 그리드 ---------- */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 14px}
.tg .t{height:56px;border-radius:8px;border:1px solid var(--g200);background:#fff;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 12px}
.tg .t .a{font-size:14px;font-weight:700;letter-spacing:-.2px}
.tg .t .b{font-size:11px;font-weight:500;color:var(--b2);margin-top:2px}
.tg .t.on{background:var(--p1);border-color:var(--p1);color:#fff}
.tg .t.on .b{color:rgba(255,255,255,.85)}
.tg .t.dis{background:var(--g100);border-color:var(--g100);color:var(--b3)}
.tg .t.dis .b{color:var(--b3)}
.tg .t.warn{border-color:var(--yellow);background:var(--yellow-tint)}
.tg .t.warn .b{color:#9A6A00}

/* ---------- 안내 박스 ---------- */
.note{margin:0 18px 14px;border-radius:12px;padding:13px 14px;font-size:12.5px;line-height:1.65;font-weight:500}
.note.gy{background:#fff;border:.5px solid var(--g200);color:var(--b2)}
.note.gr{background:var(--p1-tint);color:#0F7A3C}
.note.rd{background:var(--danger-tint);color:#C0392B}
.note.yl{background:var(--yellow-tint);color:#8A6000}
.note.dk{background:var(--g800);color:#E3E6E8}
.note b{font-weight:700}
.nsfx{margin-top:12px;border-top:.5px solid var(--g100);padding-top:6px}
.nsfx>div{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0}
.nsfx b{font-weight:600;color:var(--b1)} .nsfx span{color:var(--danger);text-align:right}
.nsask{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:.5px solid var(--g200);border-radius:12px}
.nsask .btn{width:auto;flex:none;padding:0 14px;height:36px;font-size:13px}

/* ---------- 기타 ---------- */
.empty{text-align:center;padding:70px 24px}
.empty .em{display:flex;justify-content:center;opacity:.9;margin-bottom:14px}
.push{margin:16px 18px;border-radius:14px;background:#fff;padding:14px;display:flex;gap:12px;
  box-shadow:0 8px 24px rgba(20,30,45,.12);border:.5px solid var(--g100)}
.push .ap{width:34px;height:34px;border-radius:9px;background:var(--ink);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.toast{display:inline-flex;background:rgba(42,44,48,.94);color:#fff;padding:11px 16px;
  border-radius:10px;font-size:13px;font-weight:500}
.banner{margin:0 18px 14px;height:86px;border-radius:12px;background:var(--purple);
  color:#fff;padding:20px;position:relative;overflow:hidden}
.banner .t1{font-size:16px;font-weight:700;letter-spacing:-.3px}
.banner .t2{font-size:13px;font-weight:500;margin-top:4px;color:rgba(255,255,255,.88)}
.banner .ryan{position:absolute;right:14px;bottom:-14px;font-size:54px;line-height:1}
.ph{background:repeating-linear-gradient(135deg,#EDF0F2 0 10px,#F6F8F9 10px 20px);
  color:var(--b3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500}
.map{height:230px;position:relative;flex:none;background:
  repeating-linear-gradient(0deg,#E8ECEE 0 1px,transparent 1px 44px),
  repeating-linear-gradient(90deg,#E8ECEE 0 1px,transparent 1px 44px),
  radial-gradient(circle at 30% 40%,rgba(34,187,95,.09),transparent 42%),#F1F4F5}
.pin{position:absolute;width:32px;height:32px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--p1);display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:11px;font-weight:700;box-shadow:0 3px 8px rgba(34,187,95,.32)}
.pin>span{transform:rotate(45deg);letter-spacing:0}
.pin.dk{background:var(--g800);box-shadow:0 3px 8px rgba(39,44,48,.3)}
.pin.gy{background:var(--g300);box-shadow:none}
.pin.me{width:18px;height:18px;border-radius:50%;transform:none;background:#2E7DF6;
  box-shadow:0 0 0 5px rgba(46,125,246,.18)}
.lgd{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.96);border-radius:8px;
  padding:8px 10px;display:flex;gap:10px;font-size:10px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.lgd b{display:flex;align-items:center;gap:4px;color:var(--b2)}
.lgd i{width:8px;height:8px;border-radius:50%}
.seg{display:flex;gap:4px;padding:4px;background:var(--g100);border-radius:10px;margin:14px 18px 0}
.seg button{flex:1;padding:9px 12px;border-radius:7px;font-size:13px;font-weight:700;
  color:var(--b2);letter-spacing:-.2px}
.seg button.on{background:#fff;color:var(--b1);box-shadow:0 1px 3px rgba(0,0,0,.07)}
.seg button.dis{opacity:.4;text-decoration:line-through}
.sw{width:44px;height:26px;border-radius:999px;position:relative;flex:none;background:var(--g200)}
.sw.on{background:var(--p1)}
.sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff}
.sw.on i{left:21px}

/* ---------- 보기 모드 ---------- */
.vt{display:flex;gap:3px;padding:3px;background:rgba(255,255,255,.12);border-radius:999px;margin-left:14px}
.vt button{padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;color:#A9B4C8}
.vt button.on{background:#fff;color:var(--ink)}
.vt button:hover:not(.on){color:#fff}

.stage{--k:1}
.device{transform:scale(var(--k));transform-origin:top center;
  margin-bottom:calc(752px * (var(--k) - 1))}


body.present .wrap{grid-template-columns:minmax(0,1fr);max-width:none;padding:18px 18px 92px}
body.present #nav,body.present aside{display:none}
body.present .hint{display:none}
body.present .ov{grid-column:1;max-width:980px;margin:0 auto}
#nav .navtop{display:flex;align-items:center;gap:6px;padding:4px 6px 8px;border-bottom:1px solid var(--g100);margin-bottom:6px}
#nav .navtop b{font-size:10.5px;font-weight:700;color:var(--b3);letter-spacing:.06em;flex:1}
#nav .navtop button{width:auto;padding:4px 8px;border-radius:6px;font-size:10.5px;font-weight:700;
  color:var(--b2);background:var(--bg);flex:none}
#nav .navtop button:hover{background:var(--g100)}
.navbtn{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.14);
  color:#fff;border-radius:7px;padding:5px 10px;font-size:11.5px;font-weight:700;flex:none}
.navbtn:hover{background:rgba(255,255,255,.24)}
/* 3단을 최대한 유지한다 — 여백이 있으면 설명은 항상 오른쪽 */
@media (max-width:1320px){
  body:not(.present) .wrap{grid-template-columns:var(--navw,190px) minmax(0,1fr) minmax(270px,320px);gap:16px;padding:18px}
  body:not(.present).navoff .wrap{grid-template-columns:minmax(0,1fr) minmax(270px,320px)}
}
@media (max-width:1060px){
  body:not(.present) .wrap{grid-template-columns:var(--navw,168px) minmax(0,1fr) minmax(240px,280px);gap:12px;padding:14px}
  body:not(.present).navoff .wrap{grid-template-columns:minmax(0,1fr) minmax(240px,280px)}
  body:not(.present) aside{padding:15px}
  body:not(.present) #nav{padding:8px}
}
/* 여기서부터는 정말 자리가 없다 — 설명을 아래로 */
@media (max-width:860px){
  body:not(.present) .wrap{grid-template-columns:var(--navw,168px) minmax(0,1fr)}
  body:not(.present).navoff .wrap{grid-template-columns:minmax(0,1fr)}
  body:not(.present) aside{grid-column:1/3}
  body:not(.present).navoff aside{grid-column:1}
  body:not(.present) .ov{grid-column:1/3}
  body:not(.present).navoff .ov{grid-column:1}
}
@media (max-width:660px){
  body:not(.present) .wrap{grid-template-columns:minmax(0,1fr);padding:14px}
  body:not(.present) #nav{position:static;max-height:none}
  body:not(.present) aside{grid-column:1;position:static;max-height:none}
  body:not(.present) .ov{grid-column:1}
}
body.present .stage{padding-top:6px}
.pbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:400;
  display:none;align-items:center;gap:6px;background:rgba(16,18,20,.94);
  border-radius:999px;padding:8px 10px;box-shadow:0 12px 34px rgba(16,24,34,.32)}
body.present .pbar{display:flex}
.pbar button{width:34px;height:34px;border-radius:50%;color:#fff;font-size:17px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1)}
.pbar button:hover{background:rgba(255,255,255,.2)}
.pbar .lb{color:#fff;font-size:12.5px;font-weight:700;padding:0 12px;white-space:nowrap}
.pbar .lb s{color:#8F979B;text-decoration:none;font-weight:500;margin-left:6px}
.pbar .x{background:none;font-size:14px;color:#8F979B}
.pbar .on{background:#fff;color:var(--ink)}
.plive .note{margin:0 0 8px}
/* ---------- 모바일 화면만 보기(10/16) — 상단바 · 기기 테두리를 숨기고 폰 화면을 화면 가득. 목록 · 설명은 하단 바에서 시트로 ---------- */
body.mob{overflow-x:hidden}
body.present.mob .top{display:none}
body.present.mob .wrap{padding:6px 0 84px;gap:0}
body.present.mob .stage{padding-top:0}
body.present.mob .device{width:360px;padding:0;background:none;border-radius:0;box-shadow:none;margin-bottom:calc(720px * (var(--k) - 1))}
body.present.mob .phone{border-radius:18px;box-shadow:0 6px 24px rgba(16,24,34,.18)}
body.mob .pbar{bottom:calc(10px + env(safe-area-inset-bottom));padding:6px;gap:4px;max-width:calc(100vw - 16px)}
body.mob .pbar button{width:38px;height:38px;flex:none}
body.mob .pbar .lb{padding:0 6px;font-size:12px;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
body.mob .pbar .lb s{display:block;margin:0;font-size:10.5px}
body.present.mob.mnav #nav,body.present.mob.minfo aside{display:block;position:fixed;left:8px;right:8px;top:auto;
  bottom:calc(68px + env(safe-area-inset-bottom));max-height:calc(100vh - 160px);overflow:auto;z-index:420;border-radius:16px;
  box-shadow:0 12px 40px rgba(16,24,34,.35)}

/* ---------- 우측 패널 ---------- */
aside{background:#fff;border-radius:14px;padding:20px;position:sticky;top:78px;
  max-height:calc(100vh - 104px);overflow:auto}
aside::-webkit-scrollbar{width:0}
aside .idt{font-size:10.5px;font-weight:700;color:var(--b3);letter-spacing:.06em;margin-bottom:6px}
aside h2{font-size:17px;font-weight:700;letter-spacing:-.4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
aside h3{font-size:10px;font-weight:700;color:var(--b3);letter-spacing:.08em;margin:18px 0 8px}
aside ul{list-style:none}
aside li{font-size:12.5px;padding-left:13px;position:relative;margin-bottom:6px;line-height:1.65;font-weight:500}
aside li:before{content:"";position:absolute;left:3px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--p1)}
aside .q{background:var(--yellow-tint);border-radius:10px;padding:12px;font-size:12px;
  color:#8A6000;line-height:1.65;margin-bottom:8px;font-weight:500}
aside .q>b{display:block;margin-bottom:4px;font-weight:700}   /* 제목(첫 단계 b)만 블록 — 본문 속 강조는 줄을 끊지 않는다 */
aside .q.dm>b{display:inline;margin:0}
aside .q .df{display:block;margin-top:6px;font-size:11px;opacity:.85}
aside .src{font-size:11.5px;color:var(--b2);line-height:1.65;background:var(--bg);
  border-radius:10px;padding:11px;font-weight:500}
aside .warnp{background:var(--danger-tint);border-radius:10px;padding:12px;font-size:12px;
  color:#C0392B;line-height:1.65;font-weight:500}
aside .ctl{background:var(--bg);border-radius:10px;padding:12px;margin-bottom:6px}
aside .ctl .lb{font-size:10px;font-weight:700;color:var(--b3);letter-spacing:.08em;margin-bottom:8px}
aside .ctl .bs{display:flex;gap:6px;flex-wrap:wrap}
aside .ctl button{font-size:11.5px;font-weight:700;padding:7px 12px;border-radius:999px;
  border:.5px solid var(--g200);background:#fff;color:var(--g500)}
aside .ctl button.on{background:var(--p1);border-color:var(--p1);color:#fff}

/* ---------- 개요 ---------- */
.ov{background:#fff;border-radius:14px;padding:30px;grid-column:2/4}
.ov h2{font-size:22px;font-weight:700;letter-spacing:-.6px;margin-bottom:7px}
.ov .lead{color:var(--b2);font-size:13px;margin-bottom:22px;line-height:1.7;font-weight:500}
.ov h3{font-size:15px;font-weight:700;margin:26px 0 11px;padding-top:20px;border-top:.5px solid var(--g100)}
.ov h3:first-of-type{border-top:0;padding-top:0}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{text-align:left;padding:10px 11px;border-bottom:.5px solid var(--g100);vertical-align:top}
th{font-size:10.5px;color:var(--b3);letter-spacing:.06em;background:var(--bg);font-weight:700}
td{font-weight:500} td.c{text-align:center}
.warnbox{background:var(--danger-tint);border-radius:12px;padding:16px;margin-bottom:22px}
.warnbox>b{color:#C0392B;display:block;margin-bottom:6px;font-size:13.5px;font-weight:700}
.warnbox p{font-size:12.5px;color:#A93226;line-height:1.7;font-weight:500}
.warnbox.y{background:var(--yellow-tint)}
.warnbox.y b{color:#8A6000} .warnbox.y p{color:#96700B}
.lnk{font-size:11.5px;color:var(--p1);cursor:pointer;font-weight:700}
code{font-family:ui-monospace,SFMono-Regular,'SF Mono',monospace;font-size:.9em;
  background:var(--bg);padding:1px 5px;border-radius:4px;letter-spacing:0}
.toks{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tok{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--b2);background:var(--bg);
  border-radius:999px;padding:6px 11px;font-weight:700}
.tok i{width:12px;height:12px;border-radius:3px;border:.5px solid rgba(0,0,0,.08)}