/* night-vend-v2 프론트엔드 구조 CSS. 색상은 전부 /theme.css의 --bg/--ink/--g1/--g2 변수로 온다
   (운영자가 관리자 페이지에서 지정한 값 — 이 파일은 절대 색상을 하드코딩하지 않는다). */
:root{
  --surface: color-mix(in srgb, var(--bg) 88%, var(--ink) 12%);
  --muted: color-mix(in srgb, var(--ink) 52%, var(--bg) 48%);
  --line: color-mix(in srgb, var(--bg) 90%, var(--ink) 10%);
  --danger: #e5484d;
  --ok: #30a46c;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); min-height:100vh;
  font-family:"Inter","Noto Sans KR",ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.grad-text{background:linear-gradient(100deg,var(--g1),var(--g2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hidden{display:none !important;}

/* nav */
nav.topnav{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px;}
.logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px;}
.logo .mark{width:22px;height:22px;border-radius:7px; background:linear-gradient(135deg,var(--g1),var(--g2)); flex:none;}
.navcta{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.balance-pill{font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface);}

/* buttons */
.btn{font-size:14px; font-weight:600; padding:9px 16px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;}
.btn.primary{background:linear-gradient(120deg,var(--g1),var(--g2)); border:none; color:#fff;}
.btn.danger{border-color:var(--danger); color:var(--danger);}
.btn.sm{padding:6px 11px; font-size:12.5px; border-radius:7px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* hero */
.hero{padding:48px 0 40px; text-align:center;}
.eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; border:1px solid var(--line); padding:6px 14px; border-radius:999px;}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,var(--g1),var(--g2));}
h1{font-size:clamp(28px,5vw,44px); line-height:1.15; font-weight:700; letter-spacing:-.02em; margin:18px auto 14px;}
.sub{font-size:15px; color:var(--muted); max-width:44ch; margin:0 auto; line-height:1.6;}

.section{padding:36px 0; border-top:1px solid var(--line);}
.sectionhead{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:8px;}
.sectionhead h2{font-size:18px; font-weight:700; margin:0;}

/* category chips */
.catrow{display:flex; flex-wrap:wrap; gap:10px;}
.cat{border:1px solid var(--line); border-radius:12px; padding:10px 16px; text-align:center; cursor:pointer; font-size:13.5px; font-weight:600; background:transparent; color:var(--ink);}
.cat[aria-pressed="true"]{border-color:var(--g1); background:color-mix(in srgb, var(--g1) 14%, transparent);}
.cat .emoji{margin-right:6px;}

/* product grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px;}
.card{border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--surface); min-width:0;}
.card-name{font-size:14px; font-weight:700; margin:0 0 4px;}
.card-desc{font-size:12px; color:var(--muted); margin:0 0 14px; line-height:1.5; min-height:1.2em;}
.card-foot{display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line); gap:8px;}
.price{font-size:14.5px; font-weight:700;}
.stockleft{font-size:11px; color:var(--muted);}

/* forms */
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px;}
.field label{font-size:12px; font-weight:600; color:var(--muted);}
.field input, .field select, .field textarea{
  font:inherit; font-size:14px; padding:9px 11px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); width:100%;
}
.field textarea{min-height:110px; font-family:ui-monospace,monospace; font-size:12.5px; resize:vertical;}
.formrow{display:flex; gap:10px; flex-wrap:wrap;}
.formrow .field{flex:1; min-width:140px;}

/* messages */
.msg{font-size:13px; padding:9px 13px; border-radius:8px; margin-bottom:12px;}
.msg.error{background:color-mix(in srgb, var(--danger) 16%, transparent); color:var(--danger);}
.msg.ok{background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok);}

/* modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;}
.modal{background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:22px; max-width:400px; width:100%; max-height:90vh; overflow-y:auto;}
.modal h3{margin:0 0 14px; font-size:16px;}
.modal-close{float:right; background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1;}

/* table */
.tablewrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
table{width:100%; min-width:480px; border-collapse:collapse; font-size:13px;}
thead th{text-align:left; font-size:11px; color:var(--muted); font-weight:600; padding:9px 6px; border-bottom:1px solid var(--line); white-space:nowrap;}
tbody td{padding:11px 6px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}

footer.sitefoot{border-top:1px solid var(--line); padding:22px 0 40px;}
.footrow{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); flex-wrap:wrap; gap:8px;}
.powered{display:flex; align-items:center; gap:7px;}
.powered .mark{width:14px;height:14px;border-radius:5px; background:linear-gradient(135deg,var(--g1),var(--g2));}

/* ---------------- 통합 셸: 하나의 사이드바(고객 칸 + 운영자 칸), 브레인스토밍 2-5 ---------------- */
.shell{display:flex; min-height:100vh;}
.sidebar{
  width:250px; flex:none; border-right:1px solid var(--line); padding:18px 14px;
  display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .navitem{display:block; padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; border:none; background:none; text-align:left; width:100%;}
.sidebar .navitem[aria-current="true"]{color:var(--ink); background:var(--surface);}
.sidebar .navitem.sub{font-size:12.5px; font-weight:500;}
.navlabel{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:14px 12px 4px;}
.navsublabel{font-size:10.5px; font-weight:700; color:var(--muted); padding:10px 12px 2px; opacity:.75;}
.navdivider{height:1px; background:var(--line); margin:14px 0; flex:none;}
.navtree{display:flex; flex-direction:column; gap:1px;}
.sidebarfoot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px;}
.profilecard{font-size:12.5px; padding:0 2px;}
.profilename{font-weight:700; margin-bottom:4px;}
.profilebal{color:var(--muted); margin-bottom:6px;}
.poweredfoot{font-size:10.5px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:0 2px;}
.poweredfoot .mark{width:12px; height:12px; border-radius:4px; background:linear-gradient(135deg,var(--g1),var(--g2)); flex:none;}
.poweredfoot a{color:var(--muted);}

#content{flex:1; min-width:0; padding:24px 28px 60px;}

.menutoggle{
  display:none; position:fixed; top:14px; left:14px; z-index:80; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:16px; cursor:pointer;
}
.sidebarscrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:65;}

/* ---------------- 공용 패널 (고객/운영자 뷰 공통) ---------------- */
.panel{border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:var(--surface); margin-bottom:20px;}
.panel h2{margin:0 0 4px; font-size:16px;}
.panel .desc{margin:0 0 16px; font-size:12.5px; color:var(--muted);}
.itemrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.itemrow:last-child{border-bottom:none;}
.itemrow .meta{font-size:12px; color:var(--muted);}
.pill{font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--line); color:var(--muted);}

@media (max-width:820px){
  .menutoggle{display:block;}
  .shell{display:block;}
  .sidebar{
    position:fixed; top:0; left:0; z-index:70; width:270px; max-width:82vw;
    transform:translateX(-100%); transition:transform .2s ease; background:var(--bg);
  }
  .sidebar.open{transform:translateX(0);}
  #content{padding:64px 16px 40px;}
}
@media (max-width:520px){
  .wrap{padding:0 16px;}
  .grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------------- 테마 설정 위젯 (admin) ---------------- */
.grouptabs{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px;}
.grouptab{font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;}
.grouptab[aria-selected="true"]{color:var(--ink); border-color:var(--g1); background:color-mix(in srgb, var(--g1) 14%, transparent);}
.swatchrow{display:flex; flex-wrap:wrap; gap:9px;}
.swatch{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; padding:6px 11px 6px 6px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer;}
.swatch[aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset;}
.swatch[disabled]{opacity:.35; cursor:not-allowed;}
.swatch .dot{width:18px; height:18px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--sw-a),var(--sw-b));}
.locklabel{font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:999px; background:var(--line); color:var(--muted);}
.modetoggle{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.modebtn{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:8px 14px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer;}
.modebtn[aria-selected="true"]{border-color:var(--g1); box-shadow:0 0 0 1px var(--g1) inset;}
.modebtn[disabled]{opacity:.45; cursor:not-allowed;}
.splitpanel{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.slotcol h4{margin:0 0 10px; font-size:12.5px; font-weight:700;}
.custompanel{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; margin-top:4px;}
.custompanel .field{margin-bottom:0;}
.custompanel input[type=color]{width:40px; height:30px; border-radius:8px; border:1px solid var(--line); background:none; padding:0; cursor:pointer;}
@media (max-width:820px){ .splitpanel{grid-template-columns:1fr;} }