/* 다식단 — PT 맞춤 식단 관리 */
:root{
  --bg:#101208; --bg2:#161a10; --card:#1b1f16; --card2:#212617;
  --line:#2c3223; --line2:#3c4430;
  --key:#c9f24d; --key-d:#a8d130; --key2:#8fd14f; --warn:#ffb454; --bad:#ff6b5e;
  --txt:#f1f4e9; --sub:#a7b096; --dim:#6f7860;
  --r:14px; --r2:20px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font-family:var(--font);
  font-size:15px; line-height:1.6; -webkit-text-size-adjust:100%;
  word-break:keep-all; overflow-wrap:anywhere;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.3;letter-spacing:-.02em}
a{color:var(--key);text-decoration:none}
.hide{display:none!important}

/* ---------- 화면 전환 ---------- */
.screen{display:none;min-height:100dvh}
.screen.on{display:block}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 18px;border-radius:11px;border:1px solid var(--line2);
  background:var(--card2);color:var(--txt);font-weight:700;cursor:pointer;
  transition:.15s;white-space:nowrap;line-height:1.2;
}
.btn:hover{border-color:var(--key);color:var(--key)}
.btn.key{background:var(--key);color:#131707;border-color:var(--key)}
.btn.key:hover{background:var(--key-d);color:#131707;border-color:var(--key-d)}
.btn.ghost{background:transparent}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger-o{color:var(--bad);border-color:#5a2a26;background:transparent}
.btn.danger-o:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.wide{width:100%;margin-top:10px}
.btn.tiny{padding:7px 12px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 입력 ---------- */
.inp,.ta,select.inp{
  width:100%;padding:12px 14px;border-radius:11px;
  border:1px solid var(--line2);background:#0e1109;color:var(--txt);outline:none;
}
.inp:focus,.ta:focus{border-color:var(--key);box-shadow:0 0 0 3px rgba(201,242,77,.12)}
.inp.sm{padding:9px 12px;font-size:14px}
.inp.big{font-size:26px;font-weight:800;letter-spacing:.22em;text-align:center;text-transform:uppercase}
.ta{resize:vertical;line-height:1.6}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,"D2Coding",monospace;font-size:13px}
.fl{display:block;margin:14px 0 6px;font-size:13px;font-weight:700;color:var(--sub)}
.hint{margin:8px 0 0;font-size:12.5px;color:var(--dim);line-height:1.55}

/* ---------- 탭 ---------- */
.tabs{display:flex;gap:6px;background:#0e1109;padding:5px;border-radius:13px;border:1px solid var(--line)}
.tabs .tab{flex:1;padding:10px;border:0;background:transparent;color:var(--sub);font-weight:700;border-radius:9px;cursor:pointer;transition:.15s}
.tabs .tab.on{background:var(--key);color:#131707}
.tabs.sub{background:transparent;border:0;padding:0;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs.sub .tab{flex:0 0 auto;padding:9px 15px;border:1px solid var(--line);border-radius:999px;font-size:13.5px}
.tabs.sub .tab.on{border-color:var(--key)}
.tabs.sub.center{justify-content:center}
.gate-pane,.det-pane,.st-pane{display:none}
.gate-pane.on,.det-pane.on,.st-pane.on{display:block}

/* ---------- 입장 화면 ---------- */
.gate-wrap{max-width:660px;margin:0 auto;padding:56px 20px 72px}
.gate-head{text-align:center;margin-bottom:32px}
.logo{font-size:15px;font-weight:900;color:var(--key);letter-spacing:-.02em}
.logo.sm{font-size:15px}
.gate-head h1{font-size:36px;font-weight:900;margin:14px 0 12px;letter-spacing:-.035em}
.gate-head p{margin:0;color:var(--sub);font-size:14.5px;line-height:1.75}
.gate-step{display:none}
.gate-step.on{display:block;animation:rise .28s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pick-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;cursor:pointer;
  padding:22px 20px 18px;border-radius:var(--r2);border:1px solid var(--line2);
  background:linear-gradient(160deg,var(--card2),var(--card));transition:.18s;
}
.pick-card:hover{border-color:var(--key);transform:translateY(-3px);box-shadow:0 12px 30px -14px rgba(201,242,77,.5)}
.pc-ico{font-size:32px;line-height:1;margin-bottom:6px}
.pick-card b{font-size:18px;font-weight:900;letter-spacing:-.02em}
.pick-card s{text-decoration:none;font-size:13px;color:var(--sub);line-height:1.6}
.pick-card em{font-style:normal;margin-top:10px;font-size:13px;font-weight:800;color:var(--key)}

.how{margin-top:34px;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:24px 22px}
.how h2{font-size:16px;color:var(--key);margin-bottom:18px}
.how-steps{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:16px}
.how-steps li{display:flex;gap:14px;align-items:flex-start}
.how-steps i{
  flex:0 0 auto;width:27px;height:27px;border-radius:50%;background:var(--key);color:#131707;
  display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:14px;margin-top:1px;
}
.how-steps b{display:block;font-size:15px;margin-bottom:3px}
.how-steps s{text-decoration:none;display:block;font-size:13.5px;color:var(--sub);line-height:1.65}

.gate-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:22px}
.gc-title{font-size:19px;margin-bottom:6px}
.back-link{background:none;border:0;color:var(--sub);font-size:13.5px;font-weight:700;cursor:pointer;padding:0 0 14px}
.back-link:hover{color:var(--key)}
.or{display:flex;align-items:center;gap:12px;margin:20px 0 12px;color:var(--dim);font-size:12.5px}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.gate-foot{text-align:center;color:var(--dim);font-size:12px;margin-top:22px}
.hint.center{text-align:center}
.demo-badge{background:var(--warn);color:#2b1c05;font-weight:900;font-size:11px;padding:3px 9px;border-radius:999px;flex:0 0 auto}
.m-title{font-size:19px;margin-bottom:6px}
.m-desc{font-size:13.5px;color:var(--sub);margin:0 0 4px!important;line-height:1.65}
.m-warn{font-size:12.5px;color:var(--warn);background:rgba(255,180,84,.10);border-radius:10px;padding:9px 12px;margin:16px 0 0!important}
.modal .modal-btns{margin-top:20px}

/* ---------- 상단바 ---------- */
.top{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:rgba(16,18,8,.9);backdrop-filter:blur(8px);position:sticky;top:0;z-index:30;
}
.top-l{display:flex;align-items:center;gap:10px;min-width:0}
.top-r{display:flex;gap:6px;flex:0 0 auto}
.room-name{font-weight:800;font-size:14px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 선생님 레이아웃 ---------- */
.tr-body{display:grid;grid-template-columns:270px 1fr;min-height:calc(100dvh - 53px)}
.side{border-right:1px solid var(--line);padding:14px;background:var(--bg2)}
.side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cnt{color:var(--key)}
.st-list{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.st-item{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;transition:.15s;
}
.st-item:hover{border-color:var(--line2)}
.st-item.on{border-color:var(--key);background:rgba(201,242,77,.08)}
.st-item b{font-size:14.5px}
.st-item .meta{font-size:11.5px;color:var(--dim);display:block;margin-top:2px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line2);flex:0 0 auto}
.dot.ok{background:var(--key)}
.main{padding:20px;min-width:0}
.empty{text-align:center;padding:90px 20px;color:var(--sub)}
.empty-ico{font-size:44px;margin-bottom:12px}
.empty h2{font-size:20px;margin-bottom:8px}

.det-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.det-head h2{font-size:24px;font-weight:900}
.code-row{display:flex;align-items:center;gap:7px;margin-top:9px;flex-wrap:wrap}
.code-chip{
  font-family:ui-monospace,Consolas,monospace;font-weight:800;letter-spacing:.16em;
  background:#0e1109;border:1px solid var(--key);color:var(--key);padding:6px 12px;border-radius:9px;font-size:14px;
}
.kpi{display:flex;gap:8px;flex-wrap:wrap}
.kpi .k{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 14px;text-align:center;min-width:86px}
.kpi .k i{display:block;font-style:normal;font-size:11px;color:var(--dim)}
.kpi .k b{display:block;font-size:17px;color:var(--key);margin-top:2px}

.det-pane{margin-top:18px}

/* ---------- 폼 ---------- */
.fsec{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:16px 18px;margin-bottom:14px}
.fsec>h3{font-size:15px;color:var(--key);margin-bottom:4px}
.fsec>.desc{font-size:12.5px;color:var(--dim);margin:0 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 14px}
.fld label{display:block;font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:5px}
.fld .sfx{color:var(--dim);font-weight:500}
.fld.full{grid-column:1/-1}
.checks{display:flex;flex-wrap:wrap;gap:7px}
.chk{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line2);border-radius:999px;cursor:pointer;font-size:13px}
.chk input{accent-color:var(--key);margin:0}
.chk.on{border-color:var(--key);color:var(--key);background:rgba(201,242,77,.08)}

.calc-panel{background:linear-gradient(135deg,rgba(201,242,77,.10),rgba(143,209,79,.04));border:1px solid rgba(201,242,77,.32);border-radius:var(--r2);padding:16px 18px;margin-bottom:14px}
.calc-panel h3{font-size:15px;color:var(--key);margin-bottom:12px}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.calc-grid .c{background:rgba(0,0,0,.28);border-radius:12px;padding:11px 13px}
.calc-grid .c i{display:block;font-style:normal;font-size:11.5px;color:var(--sub)}
.calc-grid .c b{display:block;font-size:19px;font-weight:900;color:var(--key);margin-top:3px}
.calc-grid .c s{display:block;text-decoration:none;font-size:11px;color:var(--dim);margin-top:2px}
.calc-note{margin-top:12px;font-size:13px;color:var(--warn);background:rgba(255,180,84,.10);border-radius:10px;padding:10px 12px}
.meal-line{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.meal-line span{background:rgba(0,0,0,.3);border:1px solid var(--line2);border-radius:999px;padding:6px 12px;font-size:12.5px}
.meal-line span b{color:var(--key)}

.sticky-save{
  position:sticky;bottom:0;display:flex;align-items:center;gap:12px;
  padding:12px 0;background:linear-gradient(transparent,var(--bg) 30%);
}
.save-note{font-size:12.5px;color:var(--dim)}

/* ---------- 프롬프트 ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:14px}
.step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:13px;color:var(--sub)}
.step b{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;background:var(--key);color:#131707;font-size:12px;margin-right:7px}
.row-btn{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.start-wrap{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--sub);
  border:1px solid var(--line2);border-radius:11px;padding:5px 12px 5px 14px}
.start-wrap .inp{width:auto;padding:5px 8px;border:0;background:transparent}
.start-wrap .inp:focus{box-shadow:none}
.paste-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;margin-bottom:16px}
.paste-box summary{cursor:pointer;font-weight:700;color:var(--sub);margin-bottom:10px}

/* ---------- 식단표 ---------- */
.plan-view{display:flex;flex-direction:column;gap:14px}
.plan-head{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:18px}
.plan-head h3{font-size:19px;margin-bottom:8px}
.plan-head .expect{color:var(--sub);font-size:14px;margin:8px 0 0}
.prin{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.prin li{padding-left:24px;position:relative;font-size:14px;color:var(--txt)}
.prin li:before{content:"✓";position:absolute;left:0;color:var(--key);font-weight:900}
.warnbox{margin-top:12px;background:rgba(255,180,84,.10);border:1px solid rgba(255,180,84,.35);border-radius:12px;padding:11px 13px;color:var(--warn);font-size:13.5px}

.day{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.day-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 17px;background:var(--card2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.day-h b{font-size:16px}
.day-h .tot{font-size:13px;color:var(--key);font-weight:800}
.meal{padding:14px 17px;border-bottom:1px solid var(--line)}
.meal:last-child{border-bottom:0}
.meal-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.meal-t{font-size:12px;font-weight:800;color:var(--key);letter-spacing:.02em}
.meal-h b{font-size:15.5px}
.meal-k{font-size:12.5px;color:var(--sub);font-weight:700;white-space:nowrap}
.items{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.items li{font-size:13.5px;color:var(--sub);display:flex;justify-content:space-between;gap:10px}
.items li em{font-style:normal;color:var(--txt)}
.items li span{color:var(--dim);flex:0 0 auto}
.how{margin:9px 0 0;font-size:13px;color:var(--dim);line-height:1.6}
.swap{margin:5px 0 0;font-size:12.5px;color:var(--warn)}
.daytip{padding:12px 17px;background:rgba(201,242,77,.07);font-size:13.5px;color:var(--key)}

/* ---------- 장보기 ---------- */
.shop-view{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.shop-g{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:16px 18px}
.shop-g h4{color:var(--key);font-size:15px;margin-bottom:10px}
.shop-g ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.shop-g li{display:flex;gap:9px;align-items:flex-start;font-size:14px}
.shop-g li input{accent-color:var(--key);margin-top:4px;flex:0 0 auto}
.shop-g li s{text-decoration:none;display:block;font-size:11.5px;color:var(--dim)}

/* ---------- 기록 ---------- */
.log-view{display:flex;flex-direction:column;gap:14px}
.streak{display:flex;gap:10px;flex-wrap:wrap}
.streak .k{flex:1;min-width:120px;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:15px;text-align:center}
.streak .k i{font-style:normal;font-size:12px;color:var(--dim);display:block}
.streak .k b{display:block;font-size:28px;color:var(--key);font-weight:900}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .d{aspect-ratio:1;border-radius:9px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--dim);background:var(--card)}
.cal .d b{font-size:13px;color:var(--txt);font-weight:700}
.cal .d.p3{background:rgba(201,242,77,.55);border-color:var(--key)}
.cal .d.p2{background:rgba(201,242,77,.30);border-color:var(--key)}
.cal .d.p1{background:rgba(201,242,77,.13)}
.cal .d.p3 b,.cal .d.p2 b{color:#131707}
.cal .d.p3,.cal .d.p2{color:#2b3410}
.memo-list{display:flex;flex-direction:column;gap:8px}
.memo{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:14px}
.memo i{font-style:normal;display:block;font-size:11.5px;color:var(--dim);margin-bottom:3px}

/* ---------- 수강생 ---------- */
.st-body{max-width:640px;margin:0 auto;padding:16px 16px 60px}
.st-pane{margin-top:16px}
.today-head{background:linear-gradient(135deg,rgba(201,242,77,.13),rgba(143,209,79,.04));border:1px solid rgba(201,242,77,.3);border-radius:var(--r2);padding:18px;margin-bottom:14px}
.today-head h2{font-size:22px;font-weight:900}
.today-head p{margin:6px 0 0;color:var(--sub);font-size:13.5px}
.prog{height:9px;border-radius:99px;background:rgba(0,0,0,.35);margin-top:14px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--key);border-radius:99px;transition:.35s}
.chk-meal{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.chk-meal:last-child{border-bottom:0}
.chk-meal input{width:22px;height:22px;accent-color:var(--key);margin-top:2px;flex:0 0 auto}
.chk-meal.done .meal-body{opacity:.5}
.chk-meal.done b{text-decoration:line-through}
.meal-body{flex:1;min-width:0}
.wbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:16px}
.wbox h4{font-size:15px;margin-bottom:10px;color:var(--key)}
.info-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.info-row:last-child{border-bottom:0}
.info-row span{color:var(--sub)}
.info-row b{color:var(--txt);text-align:right}

/* ---------- 모달/토스트 ---------- */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;backdrop-filter:blur(3px)}
.modal{background:var(--card);border:1px solid var(--line2);border-radius:var(--r2);padding:22px;max-width:420px;width:100%}
.modal.wide{max-width:900px;max-height:88dvh;overflow:auto}
.modal p{margin:0 0 18px;line-height:1.7}
.modal-btns{display:flex;gap:8px;justify-content:flex-end}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.modal-head b{font-size:17px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.card-grid figure{margin:0;cursor:pointer;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0d0f0b;transition:.15s}
.card-grid figure:hover{border-color:var(--key);transform:translateY(-2px)}
.card-grid img{width:100%;display:block}
.card-grid figcaption{padding:8px 10px;font-size:12px;color:var(--sub);text-align:center}

#toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:var(--key);color:#131707;font-weight:800;padding:12px 22px;border-radius:12px;
  opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:88vw;text-align:center;font-size:14px;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.bad{background:var(--bad);color:#fff}

/* ---------- 반응형 ---------- */
@media (max-width:860px){
  .tr-body{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--line);position:sticky;top:53px;z-index:20}
  .st-list{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .st-item{flex:0 0 auto;min-width:150px}
  .main{padding:16px}
  .det-head h2{font-size:21px}
  .gate-wrap{padding:34px 18px 50px}
  .gate-head h1{font-size:27px}
  .pick{grid-template-columns:1fr}
  .pick-card{flex-direction:row;flex-wrap:wrap;align-items:center;padding:16px 18px;gap:0 14px}
  .pc-ico{font-size:26px;margin:0}
  .pick-card b{flex:1}
  .pick-card s{flex-basis:100%;margin-top:4px}
  .pick-card em{margin-top:8px;flex-basis:100%}
  .how{margin-top:24px;padding:20px 18px}
}

/* ---------- 인쇄 ---------- */
@media print{
  :root{--bg:#fff;--card:#fff;--card2:#f5f7ef;--line:#d8dcc9;--line2:#c3c9b0;
        --txt:#161a10;--sub:#4a5140;--dim:#6c7360;--key:#5c7a10;--key2:#4d6a12;--warn:#95591a}
  body{background:#fff;color:#161a10;font-size:11.5pt}
  .top,.side,.tabs,.row-btn,.paste-box,.sticky-save,.det-head .code-row,#toast,.modal-back{display:none!important}
  .det-pane{display:none!important}
  .det-pane[data-dp="plan"]{display:block!important}
  .screen{display:none!important}
  .screen.on{display:block!important}
  .tr-body{display:block}
  .main{padding:0}
  .day,.plan-head,.shop-g{break-inside:avoid;border:1px solid #d8dcc9;background:#fff}
  .day-h{background:#f5f7ef}
  .daytip{background:#f2f7e2;color:#4d6a12}
  a[href]:after{content:""}
}