/* 플랜짐 예약앱 — 시안 v1.1 모양 그대로. 브랜드 색 = 로고 파랑 #1821AA(--ac-deep), 버튼 등 강조는 살짝 밝은 #2233C8(--ac) */
:root{--ff:Pretendard,'Apple SD Gothic Neo','Noto Sans KR',system-ui,-apple-system,sans-serif;--ac:#2233C8;--ac-deep:#1821AA;--ac-soft:#E9EBFB;--ink:#1C1C1E;--sub:#6B7280;--line:#E5E7EB;--bg:#F5F6F8;--card:#fff;--ok:#16A34A;--ok-soft:#DCFCE7;--warn:#D97706;--warn-soft:#FEF3C7;--no:#DC2626;--no-soft:#FEE2E2;--cw:640px;--side:240px;color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font:14px/1.4 var(--ff);color:var(--ink);min-height:100vh;min-height:100dvh;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
#app{position:relative;min-height:100vh;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column}
.mockbar{background:var(--warn-soft);color:var(--warn);font-size:11px;font-weight:700;text-align:center;padding:4px 8px;padding-top:calc(4px + env(safe-area-inset-top,0px))}
header{position:sticky;top:0;z-index:10;background:var(--card);padding:18px max(20px,calc((100% - var(--cw))/2 + 20px)) 12px;padding-top:calc(18px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line)}
.mockbar+header{padding-top:14px}
header .who{font-size:12px;color:var(--sub);padding-right:150px} header h1{font-size:20px;font-weight:800;margin-top:2px}
.rsw{position:absolute;right:calc(max(14px,calc((100% - var(--cw))/2 + 14px)) + 44px);bottom:14px;display:flex;background:#F3F4F6;border-radius:999px;padding:3px}.rsw button{border:0;background:none;padding:6px 10px;border-radius:999px;font:700 12px var(--ff);color:var(--sub);cursor:pointer}.rsw button.on{background:var(--ink);color:#fff}
.acct{position:absolute;right:max(14px,calc((100% - var(--cw))/2 + 14px));bottom:12px;border:0;background:#F3F4F6;border-radius:999px;width:36px;height:36px;font-size:17px;cursor:pointer;color:var(--ink)}
main{flex:1;width:100%;max-width:calc(var(--cw) + 32px);margin:0 auto;padding:14px 16px calc(96px + env(safe-area-inset-bottom,0px))}
main.login{padding-bottom:40px;max-width:460px}
main.busy{opacity:.6;transition:opacity .15s .1s;pointer-events:none}
nav.tabs{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;background:var(--card);border-top:1px solid var(--line);padding:8px 0 calc(10px + env(safe-area-inset-bottom,0px))}
nav.tabs button{flex:1;min-width:0;border:0;background:none;font:600 11px var(--ff);color:var(--sub);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative;white-space:nowrap}
nav.tabs button .ic{font-size:20px} nav.tabs button.on{color:var(--ac)}
nav.tabs .tf,.side-top,.wide-only{display:none}
.badge{position:absolute;top:-2px;left:56%;background:var(--no);color:#fff;font-size:10px;border-radius:999px;padding:1px 6px}
.days{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.day{flex:0 0 46px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 0;text-align:center;cursor:pointer}
.day .w{font-size:11px;color:var(--sub)} .day .d{font-size:17px;font-weight:700;margin-top:2px}
.day.on{background:var(--ink);border-color:var(--ink);color:#fff} .day.on .w{color:#ccc}
.day.off{opacity:.45} .day.off .d{text-decoration:line-through}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto}.chips.scroll .chip{flex:0 0 auto}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;font:600 13px var(--ff);cursor:pointer;color:var(--ink)}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff}
.legend{display:flex;gap:10px;font-size:11px;color:var(--sub);margin-bottom:10px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.slot{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:6px;cursor:pointer}
.slot .t{font-weight:700;font-size:15px;width:96px;flex:0 0 auto} .slot .s{font-size:13px;color:var(--sub);flex:1}
.slot.free .s{color:var(--ac);font-weight:600}
.slot.blocked{background:repeating-linear-gradient(45deg,#F3F4F6,#F3F4F6 6px,#EBECEF 6px,#EBECEF 12px);cursor:default}
.slot.taken{opacity:.55;cursor:default} .slot.taken.w{opacity:.85;cursor:pointer}
.slot.pending,.slot.waiting{border-color:var(--warn);background:var(--warn-soft);cursor:default} .slot.pending .s,.slot.waiting .s{color:var(--warn);font-weight:700}
.slot.mine{border-color:var(--ok);background:var(--ok-soft);cursor:default} .slot.mine .s{color:var(--ok);font-weight:700}
.banner{background:var(--no-soft);color:var(--no);border-radius:12px;padding:14px;font-weight:600;font-size:14px;margin-bottom:10px;line-height:1.5}
.banner.info{background:var(--ac-soft);color:var(--ac)} .banner.warn{background:var(--warn-soft);color:var(--warn)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:8px}
.r{display:flex;justify-content:space-between;align-items:center;gap:8px}
.n{font-weight:700} .m{font-size:13px;color:var(--sub);margin-top:3px}
.btn{border:0;border-radius:10px;padding:9px 14px;font:700 13px var(--ff);cursor:pointer;color:var(--ink)}
.btn:disabled{opacity:.45;cursor:default}
.btn.p{background:var(--ac);color:#fff} .btn.g{background:#F3F4F6;color:var(--ink)} .btn.ok{background:var(--ok);color:#fff} .btn.no{background:var(--no-soft);color:var(--no)} .btn.ink{background:var(--ink);color:#fff}
.btn.full{display:block;width:100%;padding:14px;font-size:15px;margin-top:10px}
.btn.sm{padding:10px;font-size:13px}
.sec{font-size:13px;font-weight:700;color:var(--sub);margin:16px 2px 8px}
.empty{text-align:center;color:var(--sub);font-size:13px;padding:30px 0}
.pill{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.no{background:var(--no-soft);color:var(--no)} .pill.w{background:var(--warn-soft);color:var(--warn)} .pill.g{background:#F3F4F6;color:var(--sub)}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:16px var(--ff);background:#fff;margin-top:6px;color:var(--ink)}
textarea{min-height:80px;resize:vertical}
label{font-size:13px;font-weight:600;color:var(--sub);display:block;margin-top:10px}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:flex-end;justify-content:center;z-index:20}
.sheet-bg.on{display:flex}
.sheet{background:#fff;width:100%;max-width:640px;border-radius:22px 22px 0 0;padding:22px 20px calc(26px + env(safe-area-inset-bottom,0px));max-height:88vh;overflow-y:auto}
.sheet h3{font-size:18px;margin-bottom:6px}
.sheet .lead{color:var(--sub);font-size:14px;line-height:1.6}
.note{font-size:13px;color:var(--sub);margin-top:12px;background:var(--bg);padding:10px;border-radius:10px;line-height:1.5}
.err{color:var(--no);font-size:13px;margin-top:8px;min-height:18px}
.rte{border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:8px;background:var(--bg)}.rte .rr{display:flex;gap:6px;align-items:center}.rte .rr input{margin:0}.rt3 input{margin-top:2px}.rte .rr .btn{flex:0 0 auto}.rt3{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:6px}
.rt-row{padding:8px 0;border-bottom:1px solid var(--line)}.rt-row:last-child{border-bottom:0}.rt-memo{background:var(--bg);border-radius:10px;padding:10px;font-size:13px;margin-top:8px;white-space:pre-wrap}
.nbox{display:flex;gap:6px;margin-top:10px}.nbox div{flex:1;text-align:center;background:var(--bg);border-radius:8px;padding:6px 0}.nbox b{display:block;font-size:17px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.cal .h{font-size:11px;color:var(--sub)}
.cal .c{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 0;font-weight:600;cursor:pointer;font-size:14px;min-width:0}
.cal .c.dim{opacity:.35;cursor:default}
.cal .c.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.cal .c.off{background:var(--no-soft);border-color:var(--no);color:var(--no)}
.cal .c.hol{background:var(--ac-soft);border-color:var(--ac);color:var(--ac)}
.cal .c.exc{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.cal .c.okc{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.cal .c.today{border-color:var(--ac)}
.cal .c .sm{font-size:9px;font-weight:700}
.dots{display:flex;gap:3px;justify-content:center;height:6px;margin-top:3px}.dots i{display:block;width:6px;height:6px;border-radius:50%}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:18px;font-size:13px;display:none;z-index:30;max-width:min(92vw,400px);width:max-content;text-align:center;line-height:1.45}
.toast.on{display:block} .toast.bad{background:var(--no)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.grid button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 0;font:600 12px var(--ff);cursor:pointer;color:var(--ink)}
.grid button.off{background:#374151;color:#fff;border-color:#374151}
.grid button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.skel{height:64px;border-radius:14px;margin-bottom:8px;background:linear-gradient(90deg,#ECEEF1 25%,#F6F7F9 50%,#ECEEF1 75%);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.loadmsg{text-align:center;color:var(--sub);font-size:13px;margin:6px 0 14px}
.errbox{background:var(--card);border:1px solid var(--no);border-radius:14px;padding:18px;text-align:center;margin-top:10px}
.errbox .t{font-weight:800;color:var(--no);font-size:15px}.errbox .d{font-size:13px;color:var(--sub);margin-top:6px;line-height:1.55}
#splash{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--ac-deep);color:#fff;transition:opacity .35s}
#splash.hide{opacity:0;pointer-events:none}
.logo{font-size:32px;font-weight:800;letter-spacing:.1em}
.logo-img{width:120px;height:auto;display:block;margin:0 auto}
.side-brand{display:flex;align-items:center;gap:8px}.side-brand img{width:36px;height:36px}.side-brand .logo{font-size:18px;color:var(--ac-deep)}
.stat3{display:flex;gap:8px}.stat3 .card{flex:1;margin:0}
.big{font-size:22px;font-weight:800;margin-top:4px}.big small{font-size:13px;font-weight:600}
.soon{display:inline-block;background:var(--warn-soft);color:var(--warn);font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px;vertical-align:2px;margin-left:4px}

/* ── 반응형 (대표님 11/10: 컴퓨터 브라우저에서도 보기 편하게) ──
   ~640px = 폰(아래 탭바) · 641~1024px = 아래 탭바 + 내용 폭 720px, 카드 2열 · 1025px~ = 왼쪽 세로 메뉴 + 내용 최대 1100px */
.cols>.card{margin:0}.cols{display:grid;gap:8px;margin-bottom:8px}
@media (min-width:641px){
  :root{--cw:720px}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btnrow{display:flex;gap:8px}.btnrow .btn{flex:1}
  .sheet-bg{align-items:center;padding:20px}
  .sheet{max-width:520px;border-radius:22px;max-height:86vh;padding-bottom:24px}
}
@media (min-width:1025px){
  :root{--cw:1100px}
  #app{padding-left:var(--side)}
  header{padding-top:22px}
  header .who{padding-right:0} header .rsw,header .acct{display:none}
  .mockbar+header{padding-top:18px}
  main{padding-bottom:40px}
  nav.tabs{top:0;right:auto;width:var(--side);flex-direction:column;border-top:0;border-right:1px solid var(--line);padding:18px 12px;overflow-y:auto;gap:2px}
  nav.tabs button{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:10px;padding:11px 12px;border-radius:10px;font-size:14px}
  nav.tabs button[data-k]:hover{background:var(--bg)}
  nav.tabs button.on{background:var(--ac-soft)}
  nav.tabs button .ic{font-size:18px}
  nav.tabs .tl{display:none} nav.tabs .tf{display:inline}
  nav.tabs .badge{position:static;margin-left:auto}
  .side-top{display:block;padding:6px 8px 16px;margin-bottom:8px;border-bottom:1px solid var(--line)}
  .side-top .side-rsw{position:static;display:inline-flex;margin-top:10px}
  nav.tabs .side-rsw button{padding:6px 12px;font-size:12px;border-radius:999px;color:var(--sub);background:none}
  nav.tabs .side-rsw button.on{background:var(--ink);color:#fff}
  .side-top .side-acct{display:block;width:100%;margin-top:10px;text-align:left}
  .wide-only{display:block}
  .cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
  .split>div>.sec:first-child{margin-top:0}
  .statrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:start}
  .statrow .chartcard{margin:0}
  .calbox{max-width:640px}
  .toast{bottom:28px}
}

/* 처음 시작하기 · 빈 화면 안내 · 접기 */
.start{border:1.5px solid var(--ac);background:linear-gradient(180deg,var(--ac-soft),#fff 70%)}
.step{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:0}
.step .no{flex:0 0 28px;height:28px;border-radius:50%;background:var(--ac);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.step.done .no{background:var(--ok)} .step.done .n{color:var(--sub);text-decoration:line-through}
.step .btn{flex:0 0 auto}
.empty-cta{text-align:center;padding:24px 18px}
.empty-cta .m{margin-top:6px;line-height:1.5}
details.more{margin-top:12px}
details.more>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--sub);padding:8px 2px;list-style:none}
details.more>summary::before{content:'▸ '}details.more[open]>summary::before{content:'▾ '}
details.more>summary::-webkit-details-marker{display:none}
#slotsHead{scroll-margin-top:110px}
@media (min-width:1025px){.phone-only{display:none}}

/* 홈페이지로 돌아가기 */
.hhome{display:inline-block;font-size:12px;font-weight:700;color:var(--ac);text-decoration:none;margin-bottom:4px}
.home-link{display:block;text-align:center;margin-top:22px;font-size:14px;font-weight:700;color:var(--sub);text-decoration:none}
.home-link:hover,.hhome:hover{text-decoration:underline}
.privacy-link{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--sub);text-decoration:underline;padding-bottom:18px}
.side-home{display:block;text-align:center;text-decoration:none;margin-top:8px}
@media (min-width:1025px){header .hhome{display:none}}
/* 간편 로그인 버튼 — 각 회사 디자인 안내: 카카오 #FEE500·검정 85%, 네이버 #03C75A·흰 글자, 구글 흰 바탕·#747775 테두리 */
.or{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:12px;margin:22px 0 2px}.or:before,.or:after{content:'';flex:1;height:1px;background:var(--line)}
.sbtn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin-top:8px;border:0;border-radius:12px;font:600 15px var(--ff);cursor:pointer}
.sbtn svg{position:absolute;left:18px;top:50%;width:20px;height:20px;transform:translateY(-50%)}
.sbtn.kakao{background:#FEE500;color:rgba(0,0,0,.85)}
.sbtn.naver{background:#03C75A;color:#fff}
.sbtn.google{background:#fff;color:#1F1F1F;border:1px solid #747775}
.sic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex:0 0 auto}.sic svg{width:17px;height:17px}
.sic.kakao{background:#FEE500}.sic.naver{background:#03C75A}.sic.google{background:#fff;border:1px solid var(--line)}
.slink-hd{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 14px 4px 4px;font-weight:700;font-size:13px}
.idrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.idrow:first-child{border-top:0;padding-top:0}

/* 관리자 '상담' 탭(홈페이지 온라인 상담 신청) */
.ask-pref{color:var(--ac)}
.ask-tel{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.ask-tel .ask-num{font-weight:800;font-size:16px;color:var(--ink);text-decoration:none;margin-right:auto}
.ask-tel .btn{text-decoration:none;display:inline-block}
.ask-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.ask-tags span{background:var(--ac-soft);color:var(--ac-deep);font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px}
.ask-msg{background:var(--bg);border-radius:8px;padding:8px 10px;margin-top:8px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ask-note{background:var(--warn-soft);border-radius:8px;padding:8px 10px;margin-top:8px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}

/* 그린 아이콘(icons.js): 선은 글자색, 면은 연한 색. 켜진 탭은 플랜짐 파랑 */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none}
.ico .f{fill:#E6E8EF}
nav.tabs button .ic{display:flex;align-items:center;justify-content:center;height:28px}
nav.tabs button .ic .ico{width:26px;height:26px;color:#8A90A0}
nav.tabs button.on .ic .ico{color:var(--ac)}
nav.tabs button.on .ic .ico .f{fill:#C9D0FA}
nav.tabs button.on .ic .ico .dot{fill:var(--ac)}
@media (min-width:1025px){nav.tabs button .ic{height:auto} nav.tabs button .ic .ico{width:21px;height:21px}}
#acct .ico{width:24px;height:24px;color:var(--ink)} #acct{display:flex;align-items:center;justify-content:center}
.side-acct .ico,.side-home .ico{width:17px;height:17px;margin-right:4px}
.wdl{display:block;margin:14px auto 0;background:none;border:0;color:var(--no);font:inherit;font-size:13px;opacity:.8;text-decoration:underline;padding:6px 10px;cursor:pointer}