@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@500;600;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root{
  --green:#1e5c50;--green-d:#163f37;--green-l:#e3efeb;--green-m:#9fc2b8;
  --plum:#5b2a3a;--plum-m:#7a3f52;--plum-l:#e6c9d1;
  --rose:#8a3e50;--rose-l:#fdf4f6;--rose-b:#e9c9d1;
  --amber:#7a4f00;--amber-l:#fffaf0;--amber-b:#ecd3a3;
  --ink:#2b2523;--ink2:#4d4441;--muted:#6f6460;--faint:#9a8f8a;
  --line:#e6dfda;--line2:#f0eae6;--bg:#f7f4f1;--card:#fff;
  --head:'IBM Plex Sans KR',sans-serif;--body:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
button{font-family:inherit}
a{color:var(--green)}
#app{min-height:100%;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1280px;margin:0 auto}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid var(--green);background:var(--green);color:#fff;font:600 14px var(--body);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--green-d)}
.btn.ghost{background:#fff;color:var(--green)}
.btn.ghost:hover{background:var(--green-l)}
.btn.off,.btn:disabled{background:#d9d2cd;border-color:#d9d2cd;color:var(--muted);cursor:not-allowed}
.btn.sm{min-height:38px;padding:0 14px;font-size:13px}
.btn.warn{background:#fff;border-color:#c97a8c;color:var(--rose)}
.btn.warn:hover{background:var(--rose-l)}
.tlink{border:0;background:none;padding:6px 2px;font:600 13px var(--body);color:var(--muted);text-decoration:underline;cursor:pointer}
.tlink.warn{color:var(--rose)}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #e0d8d2;background:#fff;color:var(--ink);font:500 14px var(--body);cursor:pointer;white-space:nowrap}
.pill.on{border-color:var(--green);background:var(--green-l);color:var(--green-d);font-weight:700}
.seg{flex:1;min-height:38px;padding:0 14px;border:0;border-radius:8px;background:transparent;font:600 14px var(--body);color:var(--muted);cursor:pointer;white-space:nowrap}
.seg.on{background:#fff;color:var(--green-d);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.segs{display:flex;gap:4px;padding:4px;background:#ece5e0;border-radius:10px}
.nav{width:40px;height:40px;border-radius:10px;border:1px solid #e0d8d2;background:#fff;font:600 16px var(--body);color:var(--ink);cursor:pointer}
.nav:disabled{color:#c9bfb8;cursor:not-allowed}
.chipbtn{min-height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--amber-b);background:var(--amber-l);font:600 12.5px var(--body);color:var(--amber);cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* 입력 */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lbl{font:600 13px var(--body);color:var(--ink2)}
.field input{height:44px;padding:0 14px;border:1px solid #d9d2cd;border-radius:10px;font:400 15px var(--body);color:var(--ink);background:#fff;min-width:0;width:100%}
.chk{display:flex;align-items:center;gap:10px;min-height:44px;font:600 14px var(--body);color:var(--ink);cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--green);flex:none}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px}
.h2{margin:0;font:600 15px var(--head)}
.muted{color:var(--muted)}
.note{font-size:13px;color:var(--muted);line-height:1.6}
.err{font-size:13px;color:#a8425a}

/* 상단 */
.top{background:var(--green);color:#fff}
.top .in{padding:14px 32px 0;display:flex;flex-direction:column;gap:10px}
.top .row1{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{font:700 20px var(--head);letter-spacing:.02em}
.who{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid #3d7a6d;background:transparent;color:#c9dcd6;font:600 13px var(--body);cursor:pointer}
.who.on{background:#fff;color:var(--green-d);border-color:#fff}
.tabs{display:flex;gap:28px}
.tab{font:600 14px var(--body);color:#c9dcd6;padding:0 0 12px;border:0;border-bottom:3px solid transparent;background:none;cursor:pointer}
.tab.on{color:#fff;border-bottom-color:#fff}
.ctop{background:var(--plum);color:#fff}
.ctop .in{padding:12px 32px 14px;display:flex;flex-direction:column;gap:10px}
.back{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #9c6878;background:transparent;color:#fff;font:600 13px var(--body);cursor:pointer}
.back:hover{background:var(--plum-m)}
.live{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--plum-m);font-size:13px;font-weight:700}
.live i{width:8px;height:8px;border-radius:50%;background:#f3b6c4;display:inline-block}
.stepbtn{padding:6px 12px;border-radius:999px;font:700 13px var(--body);cursor:pointer;border:1px solid #9c6878;background:transparent;color:var(--plum-l)}
.stepbtn.done{background:var(--plum-m);border-color:var(--plum-m);color:#f6e3e8}
.stepbtn.cur{background:#fff;border-color:#fff;color:var(--plum)}
.stepbtn:disabled{opacity:.5;cursor:not-allowed}

/* 홈 */
.home{flex:1;display:flex;flex-direction:column;min-height:0}
.bar{padding:14px 32px 12px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.daytitle{margin:0;min-width:210px;text-align:center;font:700 20px var(--head)}
.body2{flex:1;display:flex;gap:14px;padding:0 32px 16px;min-height:0;align-items:flex-start}
.list{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.row{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;cursor:pointer;color:var(--ink)}
.row:hover{border-color:var(--green-m)}
.row.on{border:2px solid var(--green);padding:11px 15px;background:#f3f8f6}
.row.muted{background:#f2eeeb;color:#8a7f7a}
.row .t{font:700 17px var(--head);font-variant-numeric:tabular-nums;width:56px;flex:none}
.row .nm{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.row .nm b{font-size:16px}
.row .nm span{font-size:12.5px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:184px;padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;border:1px solid}
.chip i{width:6px;height:6px;border-radius:50%;display:inline-block}
.c-none{color:var(--rose);background:#fff;border-color:var(--rose-b)} .c-none i{background:#c97a8c}
.c-wait{color:var(--amber);background:var(--amber-l);border-color:var(--amber-b)} .c-wait i{background:#d4a24a}
.c-ready{color:var(--green-d);background:var(--green-l);border-color:#c5ddd6} .c-ready i{background:var(--green)}
.c-pend{color:var(--rose);background:var(--rose-l);border-color:var(--rose-b)} .c-pend i{background:#c4415e}
.c-done{color:var(--ink2);background:var(--line2);border-color:var(--line)} .c-done i{background:#8a7f7a}
.c-cancel{color:#8a7f7a;background:var(--line2);border-color:var(--line)} .c-cancel i{background:#c9bfb8}
.nowline{display:flex;align-items:center;gap:10px;padding:2px 4px;font-size:12px;font-weight:700;color:var(--green)}
.nowline span{flex:1;height:1px;background:var(--green-m)}
.empty{padding:40px;text-align:center;font-size:14px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:12px}
.panel{width:320px;flex:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px;position:sticky;top:16px}
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.steps4 div{display:flex;flex-direction:column;gap:5px}
.steps4 em{display:block;height:5px;border-radius:3px;background:#ece5e0}
.steps4 em.d{background:var(--green)} .steps4 em.c{background:var(--green-m)}
.steps4 span{font-size:12px;color:var(--muted)} .steps4 span.c{color:var(--green-d);font-weight:700}
.status{padding:12px 14px;background:#faf7f5;border-radius:10px;font-size:14px;line-height:1.6}

/* 예약 입력 */
.formwrap{flex:1;padding:18px 32px 0;display:flex;flex-direction:column;gap:12px}
.cols2{display:flex;gap:16px;align-items:flex-start}
.cust{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;width:100%;min-height:46px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font:500 14px var(--body);color:var(--ink);text-align:left;cursor:pointer}
.cust.on{border:2px solid var(--green);background:var(--green-l)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.cal .wd{font-size:12px;color:var(--muted);padding:2px 0}
.day{height:34px;border-radius:8px;border:0;background:transparent;font:500 13.5px var(--body);color:var(--ink);cursor:pointer;position:relative;font-variant-numeric:tabular-nums}
.day.on{background:var(--green);color:#fff;font-weight:700}
.day:disabled{color:#c9bfb8;cursor:not-allowed}
.day .dot{position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--green)}
.day.on .dot{background:#fff}
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.slot{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;border-radius:10px;border:1px solid #e0d8d2;background:#fff;color:var(--ink);font:600 14px var(--body);cursor:pointer;font-variant-numeric:tabular-nums}
.slot small{font-size:11px;font-weight:500}
.slot.on{border:2px solid var(--green);background:var(--green-l);color:var(--green-d)}
.slot:disabled{background:var(--line2);border-color:var(--line2);color:var(--faint);cursor:not-allowed}
#fsum{flex:1;font-size:14px;color:var(--ink2)}
.foot{position:sticky;bottom:0;margin:0 -32px;padding:12px 32px 16px;background:var(--bg);border-top:1px solid var(--line);display:flex;align-items:center;gap:12px}

/* 안내문 */
.kakao{background:#fef6c9;border-radius:14px;padding:18px 20px;font-size:15px;line-height:1.75;white-space:pre-line;overflow-wrap:anywhere}

/* 상담 */
.work{flex:1;background:#fff;padding:22px 32px;display:flex;flex-direction:column;gap:14px}
.kv{display:grid;grid-template-columns:100px 1fr;gap:10px 14px;font-size:15px}
.kv span{color:var(--muted)}
.memo{padding:16px;background:#faf7f5;border:1px solid #eee6e1;border-radius:10px;font:400 14px/1.75 var(--body);white-space:pre-line;word-break:break-all}
.big{flex:1;min-height:110px;border-radius:14px;border:1px solid #e0d8d2;background:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:0 24px;font:700 20px var(--head);cursor:pointer;text-align:left}
.res{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.res.r1{background:var(--green-l);color:var(--green-d)} .res.r2{background:#fbf0dc;color:var(--amber)} .res.r3{background:#f7e8ec;color:var(--rose)}
.buyrow{display:grid;grid-template-columns:1fr 90px 130px;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line2)}

/* 문진 (고객) */
.qbody{background:#fbf8f6}
.intake{flex:1;display:flex;flex-direction:column;min-height:0;background:#fbf8f6}
.intake .ihead{padding:20px 24px 0;display:flex;flex-direction:column;gap:10px}
.intake .imain{flex:1;display:flex;justify-content:center;padding:18px 24px}
.intake .icol{width:100%;max-width:600px;display:flex;flex-direction:column;gap:16px}
.intake .ifoot{padding:14px 24px 22px;display:flex;justify-content:center;border-top:1px solid #eee6e1;background:#fbf8f6;position:sticky;bottom:0}
.intake .ifoot div{width:100%;max-width:600px;display:grid;grid-template-columns:1fr 2fr;gap:10px}
.salon{font:700 12px var(--head);letter-spacing:.12em;color:var(--rose)}
.progress{display:flex;align-items:center;gap:12px}
.progress div{flex:1;height:4px;background:#eee6e1;border-radius:4px;overflow:hidden}
.progress div i{display:block;height:100%;background:var(--green)}
.progress span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ih1{margin:0;font:700 24px/1.4 var(--head)}
.ichip{min-height:48px;padding:0 10px;border-radius:12px;border:1px solid #e0d8d2;background:#fff;color:var(--ink);font:500 15px var(--body);cursor:pointer}
.ichip.on{border-color:var(--green);background:var(--green-l);color:var(--green-d);font-weight:700}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.g7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.tbtn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:12px;border:1px solid var(--green);background:var(--green);color:#fff;font:700 16px var(--body);cursor:pointer}
.tbtn.ghost{background:#fff;color:var(--green)}
.tbtn:disabled{background:#d9d2cd;border-color:#d9d2cd;color:var(--muted);cursor:not-allowed}
.box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.center{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;padding-bottom:40px}
.okmark{width:58px;height:58px;border-radius:50%;background:var(--green-l);display:flex;align-items:center;justify-content:center}

/* 관리 */
.admin{flex:1;display:flex;min-height:0}
.side{width:200px;padding:20px 14px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line)}
.sidebtn{display:flex;align-items:center;width:100%;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:transparent;font:600 14px var(--body);color:var(--ink2);text-align:left;cursor:pointer}
.sidebtn.on{background:#fff;color:var(--green-d);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.amain{flex:1;padding:24px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{gap:4px;padding:16px}
.tile b{font:700 26px var(--head)}
.lrow{display:grid;grid-template-columns:100px 1fr 90px 1.2fr;gap:10px;align-items:center;padding:10px 14px;border:1px solid #eee6e1;border-radius:10px;font-size:14px}
.tog{position:relative;width:44px;height:26px;border-radius:999px;border:0;background:#d9d2cd;cursor:pointer;padding:0}
.tog.on{background:var(--green)}
.tog i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.tog.on i{left:21px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2b2523;color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;z-index:50;box-shadow:0 4px 16px rgba(0,0,0,.18)}

}

/* 처리 중 표시 */
body::before{content:'';position:fixed;left:0;top:0;height:3px;width:0;background:var(--green-m);z-index:60;transition:width .25s ease}
body.busy::before{width:70%;transition:width 1.6s ease}
body.busy{cursor:progress}

/* 상담 완료 카드 */
.row.fin{background:#f3efea;border-color:#e8e0d9}
.row.on,.row.fin.on{border-color:var(--green)}
.cmeta{font-size:14px;color:var(--plum-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row.fin .nm b{color:var(--ink2)}
.row.muted{opacity:.62}
.stepscroll{display:flex;gap:6px;flex-wrap:wrap}
.strow{display:grid;grid-template-columns:1fr 170px 120px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line2)}
.res-m{display:none}
.xpanel{display:none}

/* 태블릿 세로 이하 */
@media (max-width: 900px){
  .cols2{flex-direction:column;align-items:stretch}
  .bar,.body2,.formwrap,.work{padding-left:16px;padding-right:16px}
  .top .in,.ctop .in{padding-left:16px;padding-right:16px}
  .foot{margin:0 -16px;padding-left:16px;padding-right:16px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin{flex-direction:column}
  .side{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 16px;gap:6px}
  .sidebtn{width:auto;white-space:nowrap;min-height:38px}
  .amain{padding:16px}
}

/* 휴대폰 */
@media (max-width: 760px){
  .top .in{padding-top:10px;gap:8px}
  .brand{font-size:18px;white-space:nowrap}
  .hsub,.hlbl{display:none}
  .who{min-height:30px;padding:0 10px;font-size:12px}
  .tab{padding-bottom:10px}

  .bar{padding-top:12px;gap:10px}
  .bar > div{width:100%}
  .bar > div:first-child{justify-content:space-between}
  .daytitle{min-width:0;flex:1;font-size:17px}
  .bar .segs{flex:1}
  .chipbtn{order:9;width:100%;margin-left:0 !important}

  .body2{display:block;padding-bottom:24px}
  .row{display:grid;grid-template-columns:50px 1fr;column-gap:10px;row-gap:6px;padding:12px 14px;align-items:start}
  .row.on{padding:11px 13px}
  .row .t{width:auto;font-size:16px;padding-top:1px}
  .row .chip{grid-column:2;justify-self:start;width:auto;min-width:0;font-size:12px;padding:4px 10px}

  /* 고객 패널 → 카드 안에서 펼침 */
  .panel{display:none}
  .row.open{border-radius:12px 12px 0 0;border-bottom:0;padding-bottom:13px}
  .xpanel{margin-top:-8px;background:#fff;border:2px solid var(--green);border-top:1px solid var(--line2);border-radius:0 0 12px 12px;padding:10px 14px 16px;display:flex;flex-direction:column;gap:12px}
  .xpanel .phead > :nth-child(1),.xpanel .phead > :nth-child(2){display:none}
  .xpanel .phead{padding-top:4px}
  .ctop .in{padding-top:10px;padding-bottom:12px}
  .stepscroll{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
  .stepscroll::-webkit-scrollbar{display:none}
  .stepbtn{flex:none}
  .work{padding-top:16px;padding-bottom:24px}
  .kv{grid-template-columns:84px 1fr;font-size:14px}
  .buyrow{grid-template-columns:1fr auto}
  .res-d{display:none}
  .res-m{display:inline-block;margin-right:4px}

  .foot{flex-wrap:wrap;gap:8px}
  #fsum{flex:1 1 100%;font-size:13px}
  .foot .btn{flex:1}
  .formwrap{padding-top:14px}
  .slot{min-height:46px}

  .lrow{grid-template-columns:1fr auto;row-gap:2px}
  .lrow > :nth-child(1){grid-column:1;grid-row:1}
  .lrow > :nth-child(3){grid-column:2;grid-row:1;justify-self:end;color:var(--muted)}
  .lrow > :nth-child(2){grid-column:1 / span 2;grid-row:2}
  .lrow > :nth-child(4){grid-column:1 / span 2;grid-row:3;font-size:13px}
  .strow{grid-template-columns:1fr auto;row-gap:8px}
  .strow > :nth-child(3){grid-column:2;grid-row:1}
  .strow > :nth-child(2){grid-column:1 / span 2}
  .tile b{font-size:22px}
}