/* ============ tokens ============ */
:root{
  --canvas:#ffffff;
  --parchment:#f3f3f6;
  --pearl:#fafafc;
  --ink:#14162a;
  --ink-70:#454860;
  --ink-45:#787c93;
  --hairline:#e3e3ea;
  --divider:#eeeef3;
  --action:#1f2a5e;
  --action-hi:#2c3c86;
  --gold:#d9992a;
  --gold-lit:#e0a93b;
  --crimson:#8e1f26;
  --tile:#191b2c;
  --tile-2:#1e2033;
  --tile-3:#151726;
  --on-dark:#ffffff;
  --on-dark-70:#b9bccd;
  --on-dark-45:#7e8298;
  --shell-1:#f4f4f7;
  --shell-2:#dcdde4;
  --shell-line:#b9bbc7;
  --shell-text:#4a4d63;
  --rail-1:#d6d8e0;
  --rail-2:#9a9dad;
  --rail-3:#5f6272;
  --plate:#e6e7ec;
  --nav:#101223;
  --shadow-product:0 5px 30px rgba(20,22,42,.22);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#111327;
    --parchment:#0a0b16;
    --pearl:#1a1c2f;
    --ink:#f1f2f8;
    --ink-70:#b6b9cb;
    --ink-45:#82869d;
    --hairline:#282b41;
    --divider:#1e2136;
    --action:#93a6ff;
    --action-hi:#b0bcff;
    --gold:#e0a93b;
    --gold-lit:#f0bf5c;
    --crimson:#e0707a;
    --tile:#171930;
    --tile-2:#1c1e36;
    --tile-3:#121427;
    --shell-1:#3a3d54;
    --shell-2:#22243a;
    --shell-line:#4c5069;
    --shell-text:#b3b7cc;
    --rail-1:#4a4d63;
    --rail-2:#33364b;
    --rail-3:#22243a;
    --plate:#1a1c2e;
    --nav:#05060f;
    --shadow-product:0 5px 34px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --canvas:#111327;
  --parchment:#0a0b16;
  --pearl:#1a1c2f;
  --ink:#f1f2f8;
  --ink-70:#b6b9cb;
  --ink-45:#82869d;
  --hairline:#282b41;
  --divider:#1e2136;
  --action:#93a6ff;
  --action-hi:#b0bcff;
  --gold:#e0a93b;
  --gold-lit:#f0bf5c;
  --crimson:#e0707a;
  --tile:#171930;
  --tile-2:#1c1e36;
  --tile-3:#121427;
  --shell-1:#3a3d54;
  --shell-2:#22243a;
  --shell-line:#4c5069;
  --shell-text:#b3b7cc;
  --rail-1:#4a4d63;
  --rail-2:#33364b;
  --rail-3:#22243a;
  --plate:#1a1c2e;
  --nav:#05060f;
  --shadow-product:0 5px 34px rgba(0,0,0,.5);
}

/* ============ base ============ */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Noto Sans KR",system-ui,sans-serif;
  font-size:17px; line-height:1.47; letter-spacing:-.374px;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
}
h1,h2,h3,h4{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Noto Sans KR",system-ui,sans-serif;
  font-weight:600; margin:0; text-wrap:balance;
}
p{margin:0}
a{color:var(--action); text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--action-hi); outline-offset:3px; border-radius:4px}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; letter-spacing:0}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.narrow{max-width:760px; margin:0 auto; padding:0 24px}

/* ============ global nav ============ */
.gnav{
  position:sticky; top:0; z-index:60; height:46px;
  background:var(--nav); color:#fff;
  display:flex; align-items:center; gap:18px;
  padding:0 24px; font-size:12px; letter-spacing:-.12px;
}
.gnav .brandbtn{display:flex; align-items:center; gap:8px; color:#fff}
.gnav .brandbtn svg{display:block}
.gnav .brandname{font-weight:600; font-size:13px; letter-spacing:-.2px}
.gnav nav{display:flex; gap:20px; margin-left:auto}
.gnav nav button{color:#d7d9e6; transition:color .2s}
.gnav nav button:hover, .gnav nav button[aria-current="true"]{color:#fff}
.gnav .util{
  margin-left:20px; background:#fff; color:var(--nav);
  border-radius:8px; padding:6px 13px; font-size:12px; font-weight:500;
  transition:transform .1s;
}
.gnav .util:active{transform:scale(.95)}
@media (max-width:820px){ .gnav nav{display:none} }

/* ============ hero / machine ============ */
.hero{
  position:relative; background:var(--parchment);
  padding:0 0 56px; overflow:hidden;
  border-bottom:1px solid var(--divider);
}
.gantry{position:relative; padding-top:34px}
.track{position:relative; height:280px; margin:0 auto; max-width:1440px}
@media (max-width:860px){
  .track{height:236px}
  .head{width:104px; margin-left:-52px}
  .plumb{top:146px}
}
@media (max-width:520px){
  .track{height:214px}
  .head{width:88px; margin-left:-44px}
  .plumb{top:124px}
}

/* rail */
.rail{
  position:absolute; left:16px; right:16px; top:0; height:16px;
  border-radius:3px;
  background:linear-gradient(180deg,var(--rail-1) 0%,var(--rail-2) 42%,var(--rail-3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(20,22,42,.18);
}
.rail::after{
  content:""; position:absolute; left:0; right:0; top:6px; height:2px;
  background:rgba(0,0,0,.22);
}
.ticks{position:absolute; left:16px; right:16px; top:20px; height:14px; display:flex}
.tick{flex:1; display:flex; justify-content:center}
.tick i{
  display:block; width:2px; height:7px; background:var(--ink-45);
  opacity:.45; transition:opacity .3s, background .3s, height .3s;
}
.tick.on i{opacity:1; background:var(--gold); height:12px}

/* carriage + toolhead */
.plumb{
  position:absolute; left:0; top:186px; bottom:62px; width:0; margin-left:0;
  border-left:1px dashed var(--ink-45); opacity:.32;
  transition:transform 940ms cubic-bezier(.36,.92,.22,1);
}
.head{
  position:absolute; top:-14px; left:0; width:132px; margin-left:-66px;
  transform:translateX(0);
  transition:transform 940ms cubic-bezier(.36,.92,.22,1);
  will-change:transform;
}
.head svg{display:block; width:100%; height:auto; filter:drop-shadow(var(--shadow-product))}
.melt{opacity:0; transition:opacity .35s}
.head.moving .melt, .head.printing .melt{opacity:1}
.fan{transform-origin:100px 130px; animation:spin 2.4s linear infinite}
.head.moving .fan{animation-duration:.55s}
@keyframes spin{to{transform:rotate(360deg)}}
.head.park{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{translate:0 0}50%{translate:0 3px}}

/* extrusion line drawn on arrival */
.plate{
  position:absolute; left:16px; right:16px; bottom:52px; height:10px;
  border-radius:2px; background:var(--plate);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  overflow:hidden;
}
.bead{
  position:absolute; top:3px; height:4px; left:0; width:0; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-lit),var(--gold));
}
.bead.draw{animation:bead 820ms cubic-bezier(.3,.8,.3,1) forwards}
@keyframes bead{from{width:0;opacity:1}to{width:172px;opacity:.9}}

/* readout */
.readout{
  position:absolute; right:16px; top:44px; display:flex; gap:14px; align-items:center;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  font-size:11px; color:var(--ink-45); letter-spacing:0;
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--hairline); background:var(--canvas);
  border-radius:9999px; padding:4px 11px; font-size:10px; letter-spacing:.06em;
}
.chip b{width:6px; height:6px; border-radius:50%; background:#3f9f6b; font-size:0}
.chip.moving b{background:var(--gold)}
@media (max-width:860px){ .readout{display:none} }

/* stops */
.stops{position:absolute; left:16px; right:16px; bottom:0; display:flex}
.stop{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px}
.stop .ko{font-size:15px; font-weight:600; letter-spacing:-.3px; color:var(--ink-70); transition:color .25s}
.stop .en{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); transition:color .25s;
}
.stop:hover .ko{color:var(--ink)}
.stop[aria-current="true"] .ko{color:var(--action)}
.stop[aria-current="true"] .en{color:var(--gold)}
@media (max-width:520px){ .stop .ko{font-size:12px} .stop .en{display:none} }

/* hero lockup */
.lockup{text-align:center; padding:48px 24px 0}
.lockup .mark{margin:0 auto 22px; display:block}
.lockup h1{
  font-size:52px; line-height:1.07; letter-spacing:-1.4px;
}
.lockup .lead{
  margin-top:16px; font-size:23px; font-weight:300; line-height:1.5;
  color:var(--ink-70); max-width:33ch; margin-left:auto; margin-right:auto;
}
.cta{display:flex; gap:20px; justify-content:center; margin-top:26px; flex-wrap:wrap}
.btn{
  border-radius:9999px; padding:11px 24px; font-size:16px; font-weight:400;
  transition:transform .1s, background .2s;
}
.btn:active{transform:scale(.95)}
.btn-fill{background:var(--action); color:#fff}
:root[data-theme="dark"] .btn-fill{color:#0a0b16}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-fill{color:#0a0b16}}
.btn-ghost{border:1px solid var(--action); color:var(--action)}
@media (max-width:640px){ .lockup h1{font-size:34px; letter-spacing:-.8px} .lockup .lead{font-size:19px} }

/* ============ page panels ============ */
.stage{position:relative}
.page{display:none}
.page.on{display:block; animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}

/* tiles */
.tile{padding:88px 0; background:var(--canvas); color:var(--ink)}
.tile.parch{background:var(--parchment)}
.tile.dark{background:var(--tile); color:var(--on-dark)}
.tile.dark2{background:var(--tile-2); color:var(--on-dark)}
.tile.dark3{background:var(--tile-3); color:var(--on-dark)}
.tile.dark .sub, .tile.dark2 .sub, .tile.dark3 .sub{color:var(--on-dark-70)}
.tile.dark a, .tile.dark2 a, .tile.dark3 a{color:var(--action)}
.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  display:block; margin-bottom:14px;
}
.tile h2{font-size:40px; line-height:1.1; letter-spacing:-.9px}
.tile h3{font-size:21px; line-height:1.24; letter-spacing:-.4px}
.sub{margin-top:14px; font-size:21px; font-weight:300; line-height:1.5; color:var(--ink-70); max-width:62ch}
.center{text-align:center}
.center .sub{margin-left:auto; margin-right:auto}
@media (max-width:640px){ .tile{padding:56px 0} .tile h2{font-size:29px; letter-spacing:-.5px} .sub{font-size:17px} }

/* cards */
.grid{display:grid; gap:20px; margin-top:44px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .g3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .g3,.g2{grid-template-columns:1fr} }
.card{
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:10px;
}
.tile.dark .card, .tile.dark2 .card, .tile.dark3 .card{background:var(--tile-2); border-color:rgba(255,255,255,.09)}
.card .thumb{
  height:120px; border-radius:8px; margin-bottom:6px;
  background:var(--parchment); display:grid; place-items:center;
}
.tile.dark .card .thumb{background:rgba(255,255,255,.05)}
.card .name{font-size:17px; font-weight:600; letter-spacing:-.374px}
.card .meta{font-size:14px; color:var(--ink-45); letter-spacing:-.224px; line-height:1.5}
.tile.dark .card .meta{color:var(--on-dark-45)}

/* numbered steps (real sequence) */
.steps{counter-reset:s; display:grid; gap:0; margin-top:44px}
.step{
  counter-increment:s; display:grid; grid-template-columns:64px 1fr; gap:20px;
  padding:26px 0; border-top:1px solid var(--hairline);
}
.step:last-child{border-bottom:1px solid var(--hairline)}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px;
  color:var(--gold); letter-spacing:.06em; padding-top:4px;
}
.step p{color:var(--ink-70); font-size:16px; margin-top:6px}
.tile.dark .step{border-color:rgba(255,255,255,.1)}
.tile.dark .step p{color:var(--on-dark-70)}
@media (max-width:600px){ .step{grid-template-columns:44px 1fr; gap:12px} }

/* spec table */
.specs{width:100%; border-collapse:collapse; margin-top:36px; font-size:16px}
.specs th,.specs td{text-align:left; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.specs th{font-weight:400; color:var(--on-dark-70); width:52%}
.specs td{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; letter-spacing:0; font-size:15px}
.note{margin-top:16px; font-size:12px; color:var(--on-dark-45)}

/* form */
.form{display:grid; gap:16px; margin-top:36px; text-align:left}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:600px){ .row{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-size:14px; font-weight:600; letter-spacing:-.224px; color:var(--ink-70)}
.field input,.field select,.field textarea{
  font:inherit; font-size:16px; color:var(--ink);
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:11px; padding:12px 15px; width:100%;
}
.field textarea{min-height:118px; resize:vertical}
.formnote{font-size:13px; color:var(--ink-45); margin-top:4px}
.sent{
  margin-top:14px; border-radius:11px; padding:13px 16px;
  background:var(--pearl); border:1px solid var(--hairline);
  font-size:14px; color:var(--ink-70); display:none;
}
.sent.on{display:block}

/* footer */
.foot{background:var(--parchment); padding:60px 0 34px; border-top:1px solid var(--divider)}
.footgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
@media (max-width:760px){ .footgrid{grid-template-columns:repeat(2,1fr)} }
.footgrid h4{font-size:14px; font-weight:600; letter-spacing:-.224px; margin-bottom:6px}
.footgrid button{display:block; font-size:14px; line-height:2.2; color:var(--ink-45); text-align:left}
.footgrid button:hover{color:var(--ink)}
.legal{
  margin-top:34px; padding-top:20px; border-top:1px solid var(--hairline);
  font-size:12px; color:var(--ink-45); display:flex; gap:18px; flex-wrap:wrap;
}

/* ============ product hub (Z-axis drilldown) ============ */
.card-link{
  text-align:left; cursor:pointer; border:1px solid var(--hairline);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.card-link:hover{ transform:translateY(-2px); border-color:var(--action); box-shadow:0 10px 24px rgba(20,22,42,.08) }
.card-link .open{
  margin-top:2px; font-size:13px; font-weight:600; color:var(--action);
  display:inline-flex; align-items:center; gap:4px;
}
.card-link .open svg{transition:transform .15s}
.card-link:hover .open svg{transform:translateX(3px)}

.hub-hidden{display:none !important}

.crumb{
  display:flex; align-items:center; gap:8px; margin-bottom:22px;
  font-size:13px; color:var(--ink-45); flex-wrap:wrap;
}
.crumb button{color:var(--ink-45); transition:color .15s}
.crumb button:hover{color:var(--action)}
.crumb .now{color:var(--ink); font-weight:600}
.crumb .sep{opacity:.5}

.hub-wrap{display:grid; grid-template-columns:150px 1fr; gap:40px; align-items:start}
@media (max-width:820px){ .hub-wrap{grid-template-columns:1fr; gap:28px} }

/* vertical Z rail */
.zrail{position:relative; min-height:460px}
.zrail-track{
  position:absolute; left:22px; top:8px; bottom:8px; width:10px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--rail-1) 0%,var(--rail-2) 45%,var(--rail-3) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 1px 0 3px rgba(20,22,42,.15);
}
.zrail-track::after{
  content:""; position:absolute; top:0; bottom:0; left:6px; width:2px; background:rgba(0,0,0,.2);
}
.zrail-ticks{position:absolute; left:34px; top:8px; bottom:8px; width:26px}
.ztick{position:absolute; left:0; width:26px; height:2px; background:var(--ink-45); opacity:.35; transition:opacity .3s,background .3s,height .3s}
.ztick.on{opacity:1; background:var(--gold); height:3px}

.zrail-head{
  position:absolute; left:0; top:0; width:58px; margin-left:-3px;
  transform:translateY(0);
  transition:transform 700ms cubic-bezier(.36,.92,.22,1);
}
.zrail-head svg{display:block; width:100%; height:auto; filter:drop-shadow(0 4px 14px rgba(20,22,42,.25))}

.zstops{position:absolute; left:66px; top:0; right:0; bottom:0}
.zstop{
  position:absolute; left:0; right:0; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:6px 4px; text-align:left;
}
.zstop .zko{font-size:15px; font-weight:600; letter-spacing:-.3px; color:var(--ink-70); transition:color .2s}
.zstop .zen{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45);
}
.zstop:hover .zko{color:var(--ink)}
.zstop[aria-current="true"] .zko{color:var(--action)}
.zstop[aria-current="true"] .zen{color:var(--gold)}
.zstop.ghost{cursor:default}
.zstop.ghost .zko{color:var(--ink-45); font-weight:400}
.zstop.ghost .zen{border:1px dashed var(--hairline); border-radius:4px; padding:1px 5px}

@media (max-width:820px){
  .zrail{min-height:0}
  .zrail-track,.zrail-ticks,.zrail-head{display:none}
  .zstops{position:static; display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
  .zstop{position:static; transform:none; flex:0 0 auto; padding:8px 14px; border:1px solid var(--hairline); border-radius:9999px}
  .zstop .zen{display:none}
}

/* product detail panel */
.prod{display:none}
.prod.on{display:block; animation:rise .5s cubic-bezier(.2,.7,.2,1) both}

.prod-hero{
  position:relative; border-radius:18px; overflow:hidden; margin-bottom:32px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 3px, transparent 3px 9px),
    var(--parchment);
  border:1px solid var(--hairline);
  min-height:240px; display:flex; align-items:center; justify-content:center; padding:32px;
}
.prod-hero svg{filter:drop-shadow(var(--shadow-product)); max-width:100%; height:auto}
.prod-hero .zbadge{
  position:absolute; top:14px; left:16px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.1em;
  color:var(--ink-45); background:var(--canvas); border:1px solid var(--hairline);
  border-radius:9999px; padding:4px 10px;
}

.prod h2{font-size:34px; line-height:1.1; letter-spacing:-.7px}
.prod .tagline{font-size:21px; font-weight:300; color:var(--ink-70); margin-top:10px; line-height:1.5}
.prod .desc{font-size:16px; color:var(--ink-70); margin-top:16px; max-width:60ch; line-height:1.6}

.spec-table{width:100%; border-collapse:collapse; margin-top:28px; font-size:15px}
.spec-table th,.spec-table td{text-align:left; padding:12px 0; border-bottom:1px solid var(--hairline)}
.spec-table th{font-weight:400; color:var(--ink-45); width:38%}
.spec-table td{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; letter-spacing:0; font-size:14px; color:var(--ink)}

.opt-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:24px}
@media (max-width:560px){ .opt-grid{grid-template-columns:1fr} }
.opt-chip{border:1px solid var(--hairline); border-radius:11px; padding:14px 16px}
.opt-chip .k{font-size:13px; font-weight:600; color:var(--ink); letter-spacing:-.2px}
.opt-chip .v{font-size:13px; color:var(--ink-45); margin-top:3px; line-height:1.5}

.prod-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* =====================================================================
   서브페이지 (order / terms / privacy / order-complete)
   ===================================================================== */
.gnav nav a{color:#d7d9e6; transition:color .2s}
.gnav nav a:hover{color:#fff}
a.util{
  margin-left:20px; background:#fff; color:var(--nav);
  border-radius:8px; padding:6px 13px; font-size:12px; font-weight:500;
  transition:transform .1s; text-decoration:none;
}
a.util:active{transform:scale(.95)}
.subpage .stage{min-height:60vh}
.crumb a{color:var(--ink-45); transition:color .15s}
.crumb a:hover{color:var(--action)}

.footlinks{display:flex; gap:20px; flex-wrap:wrap; font-size:14px}
.footlinks a{color:var(--ink-45)}
.footlinks a:hover{color:var(--ink)}

.legal-todo{
  color:var(--crimson); border:1px dashed var(--crimson);
  border-radius:6px; padding:2px 8px;
}

/* 허니팟 — 사람에게는 보이지 않고, 스크린리더에서도 제외됩니다 */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* =====================================================================
   제품 카드 · 상세 가격 표시
   ===================================================================== */
.price-from{
  font-size:13px; color:var(--ink-70); margin-top:auto; padding-top:6px;
  border-top:1px solid var(--divider);
}
.price-from .mono{font-weight:600; color:var(--ink)}
.tile.dark .price-from, .tile.dark2 .price-from{border-color:rgba(255,255,255,.1); color:var(--on-dark-70)}

.pricebar{
  display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start;
  margin-top:28px; padding:20px 22px;
  background:var(--pearl); border:1px solid var(--hairline); border-radius:14px;
}
.pricebar-k{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45);
}
.pricebar-v{font-size:26px; font-weight:600; letter-spacing:-.6px; margin-top:5px}
.pricebar-u{font-size:13px; color:var(--ink-45); margin-top:4px}
.pricebar-lead .pricebar-v{font-size:17px; font-weight:400; color:var(--ink-70)}

.btn-plain{color:var(--ink-45); padding:11px 6px}
.btn-plain:hover{color:var(--action)}
.hub-note{color:var(--ink-45); margin-top:28px}

/* =====================================================================
   주문 페이지
   ===================================================================== */
.order-layout{
  display:grid; grid-template-columns:1fr 360px; gap:40px;
  align-items:start; margin-top:44px;
}
@media (max-width:900px){ .order-layout{grid-template-columns:1fr; gap:28px} }

.order-form{display:grid; gap:26px}
.ofield{border:0; padding:0; margin:0; display:grid; gap:16px}
.ofield legend{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  padding:0 0 12px; border-bottom:1px solid var(--hairline); width:100%;
}
.hint{font-size:13px; color:var(--ink-45); line-height:1.5}
.req{
  font-size:10px; font-weight:400; color:var(--crimson);
  border:1px solid currentColor; border-radius:4px; padding:1px 5px; margin-left:5px;
  vertical-align:1px;
}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-70); line-height:1.55}
.check input{margin-top:3px; width:16px; height:16px; accent-color:var(--action); flex:0 0 auto}

/* --- 금액 요약 --- */
.order-summary{
  position:sticky; top:66px;
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:18px; padding:24px;
}
@media (max-width:900px){ .order-summary{position:static} }
.order-summary.busy{opacity:.55; transition:opacity .15s}

.sum-head{padding-bottom:16px; border-bottom:1px solid var(--divider)}
.sum-title{font-size:19px; font-weight:600; letter-spacing:-.4px}
.sum-unit{font-size:13px; color:var(--ink-45); margin-top:4px}

.sum-rows{margin:16px 0 0; display:grid; gap:9px}
.sum-row{display:flex; justify-content:space-between; gap:14px; font-size:14px}
.sum-row dt{color:var(--ink-45); line-height:1.4}
.sum-row dd{margin:0; color:var(--ink-70); white-space:nowrap}
.sum-row.strong{
  padding-top:9px; margin-top:2px; border-top:1px solid var(--divider);
}
.sum-row.strong dt, .sum-row.strong dd{color:var(--ink); font-weight:600}
.sum-row.off dd{color:var(--crimson)}
.sum-err{font-size:14px; color:var(--crimson); line-height:1.5}

.sum-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline);
  font-size:15px; color:var(--ink-70);
}
.sum-total b{font-size:26px; letter-spacing:-.6px; color:var(--ink)}
.sum-lead{font-size:12px; color:var(--ink-45); margin-top:8px; line-height:1.5}

.pay-block{margin-top:22px; display:grid; gap:10px}
.pay-btn{width:100%; padding:13px 18px; font-size:15px; font-weight:500}
.pay-btn:disabled{opacity:.4; cursor:not-allowed}
.pay-btn:disabled:active{transform:none}
#pay-naver{background:#03c75a; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px}
#pay-naver:disabled{background:var(--ink-45)}
.npay-mark{
  font-family:Helvetica,Arial,sans-serif; font-weight:700; font-size:15px;
  background:#fff; color:#03c75a; border-radius:4px; width:20px; height:20px;
  display:grid; place-items:center; line-height:1;
}
.paynote{font-size:12px; color:var(--ink-45); line-height:1.6; margin-top:4px}
.paynote-keys code{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  background:var(--parchment); border-radius:4px; padding:1px 4px;
}

.sum-result{display:none; margin-top:18px; border-radius:11px; padding:14px 16px; font-size:14px; line-height:1.6}
.sum-result.on{display:block}
.sum-result.wait{background:var(--pearl); border:1px solid var(--hairline); color:var(--ink-70)}
.sum-result.ok{background:rgba(63,159,107,.1); border:1px solid rgba(63,159,107,.4); color:var(--ink)}
.sum-result.err{background:rgba(142,31,38,.08); border:1px solid var(--crimson); color:var(--ink)}

/* 문의 폼 상태 */
.sent.ok{border-color:rgba(63,159,107,.5); background:rgba(63,159,107,.08)}
.sent.err{border-color:var(--crimson); background:rgba(142,31,38,.07)}
.sent-warn{display:block; margin-top:6px; font-size:13px; color:var(--crimson)}
.sent code, .doc code{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px;
  background:var(--parchment); border-radius:4px; padding:1px 5px;
}

/* =====================================================================
   결제 결과 페이지
   ===================================================================== */
.receipt{
  background:var(--canvas); border:1px solid var(--hairline); border-radius:18px;
  padding:44px 36px; text-align:center;
}
@media (max-width:600px){ .receipt{padding:32px 22px} }
.receipt-state{display:flex; align-items:center; justify-content:center; gap:12px; font-size:17px; color:var(--ink-70)}
.receipt-warn{margin-top:14px; font-size:13px; color:var(--ink-45)}
.receipt-icon{
  width:56px; height:56px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; font-size:26px; font-weight:600;
  background:var(--pearl); color:var(--ink-45); border:1px solid var(--hairline);
}
.receipt.ok   .receipt-icon{background:rgba(63,159,107,.12); color:#3f9f6b; border-color:rgba(63,159,107,.4)}
.receipt.err  .receipt-icon{background:rgba(142,31,38,.1); color:var(--crimson); border-color:var(--crimson)}
.receipt.warn .receipt-icon{background:rgba(217,153,42,.12); color:var(--gold); border-color:var(--gold)}
.receipt-title{font-size:29px; line-height:1.15; letter-spacing:-.7px; font-weight:600}
.receipt-body{margin-top:16px; font-size:16px; color:var(--ink-70); line-height:1.6}
.receipt-body p + p{margin-top:12px}
.receipt-rows{
  margin:22px auto; max-width:420px; text-align:left;
  border:1px solid var(--hairline); border-radius:12px; overflow:hidden;
}
.receipt-rows > div{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 18px; font-size:15px;
}
.receipt-rows > div + div{border-top:1px solid var(--divider)}
.receipt-rows dt{color:var(--ink-45)}
.receipt-rows dd{margin:0; color:var(--ink); font-weight:500}
.receipt-cta{display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap}
.receipt-cta .btn{text-decoration:none}

.spinner{
  width:17px; height:17px; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--hairline); border-top-color:var(--action);
  animation:spinner .7s linear infinite;
}
@keyframes spinner{to{transform:rotate(360deg)}}

/* =====================================================================
   약관 · 개인정보처리방침 문서
   ===================================================================== */
.doc h1{font-size:40px; line-height:1.1; letter-spacing:-.9px}
.doc-meta{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px;
  color:var(--ink-45); margin-top:10px;
}
.doc h2{font-size:21px; letter-spacing:-.4px; margin-top:40px}
.doc h3{font-size:17px; letter-spacing:-.3px; margin-top:24px; color:var(--ink-70)}
.doc p{margin-top:12px; font-size:16px; color:var(--ink-70); line-height:1.7}
.doc ul, .doc ol{margin-top:12px; padding-left:22px; color:var(--ink-70); font-size:16px; line-height:1.8}
.doc li + li{margin-top:4px}
.doc ul ul, .doc ol ul{margin-top:4px}
.doc a{text-decoration:underline; text-underline-offset:2px}
.doc-note{font-size:14px !important; color:var(--ink-45) !important}

.doc-alert{
  margin-top:26px; border-radius:12px; padding:16px 18px; font-size:14px; line-height:1.65;
  background:rgba(217,153,42,.1); border:1px solid var(--gold); color:var(--ink);
}
.doc-table{width:100%; border-collapse:collapse; margin-top:16px; font-size:15px}
.doc-table th, .doc-table td{
  text-align:left; padding:11px 12px; border:1px solid var(--hairline);
  color:var(--ink-70); line-height:1.5; vertical-align:top;
}
.doc-table thead th{background:var(--pearl); color:var(--ink); font-weight:600; font-size:14px}
.doc-table tbody th{width:30%; background:var(--pearl); font-weight:500; color:var(--ink)}
.doc-todo-inline{color:var(--crimson)}
.doc-foot{margin-top:44px; padding-top:22px; border-top:1px solid var(--hairline)}
.doc-foot p{font-size:14px}
.doc-todo{
  color:var(--crimson) !important; border:1px dashed var(--crimson);
  border-radius:8px; padding:12px 14px; font-size:13px !important;
}
@media (max-width:600px){
  .doc h1{font-size:29px; letter-spacing:-.5px}
  .doc-table{font-size:14px}
  .doc-table th, .doc-table td{padding:9px 10px}
}

/* =====================================================================
   계정 위젯 (헤더)
   ===================================================================== */
.gmark{display:block; flex:0 0 auto}
.acct-login{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; color:var(--nav); border-radius:8px; padding:5px 12px;
  font-size:12px; font-weight:500; margin-left:auto; white-space:nowrap;
}
.gnav nav + .acct-login, .gnav nav + .acct{margin-left:20px}
.acct{position:relative; margin-left:auto}
.gnav nav ~ #account-slot{margin-left:auto}
#account-slot{display:flex; align-items:center}
.acct-btn{display:flex; align-items:center; gap:8px; color:#fff; padding:3px 4px}
.acct-face{
  width:24px; height:24px; border-radius:50%; display:block; object-fit:cover;
  border:1px solid rgba(255,255,255,.28);
}
.acct-face-text{
  display:grid; place-items:center; background:var(--gold); color:var(--nav);
  font-size:12px; font-weight:700;
}
.acct-name{font-size:12px; max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:520px){ .acct-name{display:none} }

.acct-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:230px; z-index:80;
  background:var(--canvas); color:var(--ink);
  border:1px solid var(--hairline); border-radius:12px; padding:6px;
  box-shadow:0 14px 40px rgba(20,22,42,.22);
}
.acct-head{padding:10px 12px 12px; border-bottom:1px solid var(--divider); margin-bottom:6px}
.acct-email{font-size:12px; color:var(--ink-45); word-break:break-all}
.acct-points{font-size:14px; margin-top:6px}
.acct-badge{
  margin-top:8px; font-size:11px; color:var(--gold);
  border:1px solid var(--gold); border-radius:9999px; padding:3px 9px; display:inline-block;
}
.acct-menu a, .acct-menu button{
  display:block; width:100%; text-align:left; padding:9px 12px;
  font-size:14px; color:var(--ink); border-radius:8px;
}
.acct-menu a:hover, .acct-menu button:hover{background:var(--parchment)}

/* =====================================================================
   구글 로그인 버튼
   ===================================================================== */
.btn-google{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:#1f1f1f; border:1px solid #dadce0;
  border-radius:9999px; padding:11px 22px; font-size:15px; font-weight:500;
  transition:box-shadow .15s, transform .1s; text-decoration:none;
}
.btn-google:hover{box-shadow:0 1px 6px rgba(32,33,36,.28)}
.btn-google:active{transform:scale(.97)}
.btn-google-sm{padding:8px 15px; font-size:13px}
:root[data-theme="dark"] .btn-google{background:#fff; color:#1f1f1f}

/* =====================================================================
   로그인 페이지
   ===================================================================== */
.login-card{
  background:var(--canvas); border:1px solid var(--hairline); border-radius:18px;
  padding:40px 36px; margin-top:8px;
}
@media (max-width:600px){ .login-card{padding:28px 22px} }
.login-card h1{font-size:34px; line-height:1.15; letter-spacing:-.7px}
.perk-list{list-style:none; margin:28px 0 0; padding:0}
.perk-list li{
  display:grid; grid-template-columns:104px 1fr auto; gap:14px; align-items:baseline;
  padding:16px 0; border-top:1px solid var(--hairline);
}
.perk-list li:last-child{border-bottom:1px solid var(--hairline)}
.perk-k{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
}
.perk-v{font-size:16px; color:var(--ink-70)}
.perk-v b{color:var(--ink)}
.perk-n{font-size:12px; color:var(--ink-45); white-space:nowrap}
@media (max-width:600px){
  .perk-list li{grid-template-columns:1fr; gap:4px}
  .perk-n{white-space:normal}
}
.login-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:30px}
.login-actions .btn, .login-actions .btn-google{text-decoration:none}
.login-err, .login-ok{
  width:100%; border-radius:11px; padding:13px 16px; font-size:14px; line-height:1.6;
}
.login-err{background:rgba(142,31,38,.08); border:1px solid var(--crimson); color:var(--ink)}
.login-ok{background:rgba(63,159,107,.1); border:1px solid rgba(63,159,107,.4); color:var(--ink)}
.login-note{margin-top:26px; font-size:14px; color:var(--ink-70); line-height:1.7}
.login-fine{margin-top:12px; font-size:12px; color:var(--ink-45); line-height:1.6}

/* =====================================================================
   회원 배너 (주문 페이지)
   ===================================================================== */
.mbanner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:36px; padding:18px 22px; border-radius:14px;
  background:var(--canvas); border:1px solid var(--hairline);
}
.mbanner-on{border-color:var(--action); background:var(--pearl)}
.mbanner-warn{border-color:var(--gold); background:rgba(217,153,42,.08)}
.mbanner-text{display:flex; flex-direction:column; gap:6px; min-width:0}
.mbanner-text b{font-size:16px; letter-spacing:-.3px}
.mbanner-text span{font-size:13px; color:var(--ink-70); line-height:1.6}
.mbadge{
  display:inline-block; font-size:12px; border-radius:9999px; padding:3px 10px;
  border:1px solid var(--hairline); color:var(--ink-70); margin-right:6px;
}
.mbadge-gold{border-color:var(--gold); color:var(--gold); font-weight:500}

/* 적립금 사용 입력 */
.points-use{margin-top:18px; padding-top:16px; border-top:1px solid var(--divider)}
.points-use > label{font-size:13px; font-weight:600; color:var(--ink-70); display:block; margin-bottom:7px}
.points-row{display:flex; gap:8px}
.points-row input{
  font:inherit; font-size:15px; color:var(--ink); flex:1; min-width:0;
  background:var(--canvas); border:1px solid var(--hairline); border-radius:9px; padding:9px 12px;
}
.sum-row.member dd{color:var(--action); font-weight:500}
.result-perk{color:var(--action); font-weight:500}

/* =====================================================================
   통계 카드 · 표 (마이페이지 · 관리자 공용)
   ===================================================================== */
.wrap.wide{max-width:1400px}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px}
@media (max-width:900px){ .stat-row{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .stat-row{grid-template-columns:1fr} }
.stat{background:var(--canvas); border:1px solid var(--hairline); border-radius:14px; padding:18px 20px}
.stat-hot{border-color:var(--gold)}
.stat-k{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45);
}
.stat-v{font-size:26px; font-weight:600; letter-spacing:-.6px; margin-top:6px}
.stat-n{font-size:12px; color:var(--ink-45); margin-top:5px; line-height:1.5}
.sec-title{font-size:19px; letter-spacing:-.4px; margin-top:44px}

.tablewrap{overflow-x:auto; margin-top:18px; border:1px solid var(--hairline); border-radius:12px}
.data-table{width:100%; border-collapse:collapse; font-size:14px; min-width:720px}
.data-table th, .data-table td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--divider); vertical-align:top;
}
.data-table thead th{
  background:var(--pearl); color:var(--ink-45); font-weight:500; font-size:12px;
  letter-spacing:-.1px; white-space:nowrap; position:sticky; top:0;
}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table .num{text-align:right}
.data-table .nowrap{white-space:nowrap}
.data-table .pre{white-space:pre-wrap; max-width:32ch}
.data-table .minus{color:var(--crimson)}
.data-table .plus{color:#3f9f6b}
.row-done td{opacity:.5}
.row-warn td{background:rgba(217,153,42,.07)}
.tiny{font-size:11.5px; color:var(--ink-45); line-height:1.5}
.linkish{color:var(--action); font:inherit; text-decoration:underline; text-underline-offset:2px}

.pill{
  display:inline-block; font-size:11px; border-radius:9999px; padding:2px 8px;
  border:1px solid var(--hairline); color:var(--ink-45); white-space:nowrap; margin:1px 2px 1px 0;
}
.pill-gold{border-color:var(--gold); color:var(--gold)}
.pill-done{border-color:#3f9f6b; color:#3f9f6b}

.badge{
  display:inline-block; font-size:12px; border-radius:6px; padding:3px 9px;
  white-space:nowrap; border:1px solid transparent;
}
.badge-received  {background:var(--parchment); color:var(--ink-70); border-color:var(--hairline)}
.badge-paid      {background:rgba(31,42,94,.1); color:var(--action); border-color:var(--action)}
.badge-proof     {background:rgba(217,153,42,.12); color:var(--gold); border-color:var(--gold)}
.badge-production{background:rgba(217,153,42,.2); color:var(--gold); border-color:var(--gold)}
.badge-shipped   {background:rgba(63,159,107,.12); color:#3f9f6b; border-color:#3f9f6b}
.badge-done      {background:rgba(63,159,107,.22); color:#2f7a52; border-color:#3f9f6b}
.badge-cancelled {background:rgba(142,31,38,.1); color:var(--crimson); border-color:var(--crimson)}

/* =====================================================================
   관리자 전용
   ===================================================================== */
.admin-tag{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--gold); color:var(--gold);
  border-radius:4px; padding:1px 5px; margin-left:6px;
}
.admin-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.btn-sm{padding:7px 16px; font-size:13px}
.btn-mini{
  font-size:12px; border:1px solid var(--hairline); border-radius:7px;
  padding:5px 10px; color:var(--ink-70); background:var(--canvas);
  margin:1px 3px 1px 0; white-space:nowrap; transition:border-color .15s, color .15s;
  text-decoration:none; display:inline-block;
}
.btn-mini:hover{border-color:var(--action); color:var(--action)}
.btn-mini:disabled{opacity:.4; cursor:not-allowed}
.btn-mini.danger:hover{border-color:var(--crimson); color:var(--crimson)}

.tabs{display:flex; gap:4px; margin-top:36px; border-bottom:1px solid var(--hairline)}
.tabs button{
  padding:11px 18px; font-size:14px; color:var(--ink-45);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--action); border-bottom-color:var(--action); font-weight:600}

.filters{display:flex; gap:12px; align-items:center; margin-top:22px; flex-wrap:wrap}
.filters input[type="search"], .filters select{
  font:inherit; font-size:14px; color:var(--ink);
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:9px; padding:9px 13px;
}
.filters input[type="search"]{min-width:260px; flex:1; max-width:420px}
.filter-count{font-size:13px; color:var(--ink-45); margin-left:auto}

.detail-row td{background:var(--pearl); padding:0}
.detail{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
  padding:22px 18px; font-size:13px;
}
@media (max-width:1100px){ .detail{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .detail{grid-template-columns:1fr} }
.detail h4{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.detail dl{margin:0}
.detail dl > div{display:flex; gap:10px; padding:4px 0; align-items:baseline}
.detail dt{color:var(--ink-45); flex:0 0 5.5em}
.detail dd{margin:0; color:var(--ink-70); min-width:0; word-break:break-word}
.detail dd.pre{white-space:pre-wrap}
.detail-warn{
  margin-top:12px; font-size:12px; color:var(--crimson);
  border:1px dashed var(--crimson); border-radius:8px; padding:9px 11px; line-height:1.6;
}
.history{list-style:none; margin:0; padding:0; font-size:12px; color:var(--ink-70)}
.history li{padding:4px 0; border-bottom:1px solid var(--divider); line-height:1.55}
.history li:last-child{border-bottom:0}

/* =====================================================================
   제품 사진 — 일러스트 ↔ 실제 사진 뒤집기
   ===================================================================== */
.flip{
  perspective:1600px; margin-bottom:32px;
  /* 앞/뒷면 높이가 달라도 카드가 튀지 않도록 최소 높이를 잡아 둡니다 */
  min-height:300px;
}
.flip-inner{
  position:relative; width:100%; min-height:300px;
  transition:transform 700ms cubic-bezier(.36,.92,.22,1);
  transform-style:preserve-3d;
}
.flip.flipped .flip-inner{transform:rotateY(180deg)}

.flip-face{
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  width:100%;
}
.flip-front{position:relative}
.flip-back{
  position:absolute; inset:0; transform:rotateY(180deg);
  display:flex; align-items:stretch;
}
.flip.flipped .flip-front{pointer-events:none}
.flip:not(.flipped) .flip-back{pointer-events:none}
.flip .prod-hero{margin-bottom:0; height:100%}

/* 앞/뒷면 전환 버튼 */
.flip-cta{
  position:absolute; right:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--canvas); color:var(--action);
  border:1px solid var(--hairline); border-radius:9999px;
  padding:8px 15px; font-size:13px; font-weight:500;
  box-shadow:0 3px 12px rgba(20,22,42,.12);
  transition:border-color .15s, transform .1s, color .15s;
}
.flip-cta:hover{border-color:var(--action); transform:translateY(-1px)}
.flip-cta:active{transform:scale(.96)}
.flip-back-cta{right:14px; bottom:14px; color:var(--ink-70)}
.flip-back-cta:hover{color:var(--action)}

/* 뒷면 — 큰 사진 + 썸네일 */
.shots{
  position:relative; width:100%;
  border:1px solid var(--hairline); border-radius:18px;
  background:var(--parchment); overflow:hidden;
  display:flex; flex-direction:column;
}
.shot-main{
  position:relative; display:block; width:100%; flex:1;
  min-height:220px; background:var(--pearl); cursor:zoom-in; padding:0;
}
.shot-main img{
  display:block; width:100%; height:100%; max-height:420px;
  object-fit:contain; padding:14px;
}
.shot-zoom{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--canvas); color:var(--ink-70);
  border:1px solid var(--hairline); opacity:0; transition:opacity .2s;
}
.shot-main:hover .shot-zoom, .shot-main:focus-visible .shot-zoom{opacity:1}

.shot-thumbs{
  display:flex; gap:8px; padding:12px 14px; overflow-x:auto;
  border-top:1px solid var(--hairline); background:var(--canvas);
}
.shot-thumb{
  flex:0 0 auto; width:58px; height:58px; padding:0;
  border:1px solid var(--hairline); border-radius:9px; overflow:hidden;
  background:var(--pearl); transition:border-color .15s, transform .1s;
}
.shot-thumb img{display:block; width:100%; height:100%; object-fit:cover}
.shot-thumb:hover{border-color:var(--action); transform:translateY(-1px)}
.shot-thumb.on{border-color:var(--action); box-shadow:0 0 0 2px var(--action) inset}

@media (max-width:600px){
  .flip, .flip-inner{min-height:260px}
  .shot-main img{max-height:300px}
  .flip-cta{right:10px; bottom:10px; padding:7px 12px; font-size:12px}
}

/* 움직임을 줄이는 설정에서는 뒤집기 대신 즉시 전환 */
@media (prefers-reduced-motion:reduce){
  .flip-inner{transition:none}
}

/* =====================================================================
   사진 확대 (라이트박스)
   ===================================================================== */
body.lb-open{overflow:hidden}
.lightbox{display:none}
body.lb-open .lightbox{
  display:grid; place-items:center;
  position:fixed; inset:0; z-index:200;
  background:rgba(10,11,22,.92);
  padding:32px 20px;
  animation:lbin .2s ease-out both;
}
@keyframes lbin{from{opacity:0}to{opacity:1}}

.lb-frame{margin:0; position:relative; max-width:1100px; width:100%}
.lb-frame img{
  display:block; margin:0 auto; max-width:100%; max-height:78vh;
  object-fit:contain; border-radius:10px; background:#0a0b16;
}
.lb-frame figcaption{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:14px; color:#c9ccd8; font-size:14px;
}
.lb-count{color:#8b8fa3}

.lb-close{
  position:fixed; top:18px; right:20px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; font-size:17px;
  display:grid; place-items:center; transition:background .15s;
}
.lb-close:hover{background:rgba(255,255,255,.22)}

.lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; font-size:26px; line-height:1;
  display:grid; place-items:center; transition:background .15s;
}
.lb-arrow:hover{background:rgba(255,255,255,.22)}
.lb-prev{left:-4px}
.lb-next{right:-4px}
@media (max-width:820px){
  .lb-prev{left:4px} .lb-next{right:4px}
  .lb-arrow{width:38px; height:38px; font-size:21px}
}

/* =====================================================================
   관리자 — 상품 · 가격 · 사진
   ===================================================================== */
.prodadmin{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px}
@media (max-width:1000px){ .prodadmin{grid-template-columns:1fr} }

.pcard{
  border:1px solid var(--hairline); border-radius:14px; padding:18px 20px;
  background:var(--canvas); display:flex; flex-direction:column; gap:12px;
}
.pcard-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.pcard-name{font-size:16px; font-weight:600; letter-spacing:-.3px}
.pcard-cat{font-size:12px; color:var(--ink-45); margin-top:3px}

.pcard-row{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.pcard-row label{display:flex; flex-direction:column; gap:5px; flex:1; min-width:110px}
.pcard-row label span{font-size:12px; color:var(--ink-45)}
.pcard-row input{
  font:inherit; font-size:14px; color:var(--ink); width:100%;
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:8px; padding:8px 11px;
}
.pcard-row input::placeholder{color:var(--ink-45); opacity:.7}
.pcard-note{font-size:11.5px; color:var(--ink-45); line-height:1.5}

.pcard-photos{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1px solid var(--divider); padding-top:12px;
}
.pphotos{display:flex; gap:7px; flex-wrap:wrap; align-items:center; flex:1; min-width:0}
.pphoto{
  position:relative; width:56px; height:56px; border-radius:8px; overflow:hidden;
  border:1px solid var(--hairline); background:var(--pearl); display:block;
}
.pphoto.first{border-color:var(--gold)}
.pphoto img{display:block; width:100%; height:100%; object-fit:cover}
.pphoto-tag{
  position:absolute; left:0; bottom:0; right:0;
  background:var(--gold); color:#fff; font-size:9px; font-weight:500;
  text-align:center; padding:1px 0; letter-spacing:.04em;
}
.pphoto-del, .pphoto-up{
  position:absolute; width:18px; height:18px; border-radius:50%;
  background:rgba(10,11,22,.72); color:#fff; font-size:10px; line-height:1;
  display:grid; place-items:center; opacity:0; transition:opacity .15s;
}
.pphoto-del{top:3px; right:3px}
.pphoto-up{top:3px; left:3px}
.pphoto:hover .pphoto-del, .pphoto:hover .pphoto-up{opacity:1}
.pphoto-del:hover{background:var(--crimson)}
.pphoto-up:hover{background:var(--action)}

.upload-btn{
  display:inline-block; font-size:12px; cursor:pointer; white-space:nowrap;
  border:1px dashed var(--hairline); border-radius:8px; padding:8px 13px;
  color:var(--ink-70); transition:border-color .15s, color .15s;
}
.upload-btn:hover{border-color:var(--action); color:var(--action)}
.upload-btn.off{opacity:.45; cursor:not-allowed}
.upload-btn.off:hover{border-color:var(--hairline); color:var(--ink-70)}

.pcard-status{font-size:12px; color:var(--ink-45); flex-basis:100%; line-height:1.5}
.pcard-status.ok{color:#3f9f6b}
.pcard-status.err{color:var(--crimson)}
.warn-inline{
  font-size:12px; color:var(--gold);
  border:1px solid var(--gold); border-radius:8px; padding:5px 10px;
}

/* 관리자 — 옵션 추가금 */
.optadmin{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px}
@media (max-width:1200px){ .optadmin{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .optadmin{grid-template-columns:1fr} }

.ocard{
  border:1px solid var(--hairline); border-radius:14px; padding:16px 18px;
  background:var(--canvas); display:flex; flex-direction:column; gap:12px;
}
.ocard-name{font-size:15px; font-weight:600; letter-spacing:-.3px}
.ocard-help{font-size:11.5px; color:var(--ink-45); margin-top:3px; line-height:1.5}
.ocard-rows{display:grid; gap:8px}
.orow{display:grid; grid-template-columns:1fr 92px; gap:8px; align-items:center}
.orow-ko{font-size:13px; color:var(--ink-70); line-height:1.4}
.orow input{
  font:inherit; font-size:13px; color:var(--ink); width:100%; text-align:right;
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:7px; padding:6px 9px;
}
.orow input::placeholder{color:var(--ink-45); opacity:.7}
.orow-base{grid-column:1 / -1; text-align:right; margin-top:-3px}
.ocard .btn-mini{align-self:flex-start}

/* =====================================================================
   관리자 — 매출 · 부가세 (ERP)
   ===================================================================== */
.erp-note{
  margin-top:20px; padding:12px 16px; border-radius:11px; font-size:13px; line-height:1.65;
  background:rgba(217,153,42,.08); border:1px solid var(--gold); color:var(--ink-70);
}
.erp-bar{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top:18px}
.erp-bar label{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink-45)}
.erp-bar input, .erp-bar select{
  font:inherit; font-size:13px; color:var(--ink);
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:8px; padding:7px 10px;
}
.erp-quick{display:flex; gap:5px; flex-wrap:wrap; align-items:center}
.erp-bar > a.btn-mini{margin-left:auto}

.erp-due{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:18px; padding:16px 20px; border-radius:12px;
  background:var(--pearl); border:1px solid var(--action);
}
.erp-due-name{font-size:17px; font-weight:600; letter-spacing:-.3px; margin-top:5px}
.erp-due-date{text-align:right}
.erp-due-when{font-size:17px; font-weight:600; color:var(--action); margin-top:5px}
@media (max-width:600px){ .erp-due-date{text-align:left} }

.manual-form{
  display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:16px;
  padding:16px 18px; border:1px solid var(--hairline); border-radius:12px; background:var(--canvas);
}
.manual-form label{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink-45)}
.manual-form label.grow{flex:1; min-width:140px}
.manual-form input, .manual-form select{
  font:inherit; font-size:13px; color:var(--ink); width:100%;
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:8px; padding:7px 10px;
}
.manual-form input[type="number"]{width:110px}
.manual-form #manual-status{flex-basis:100%}

/* =====================================================================
   제품 자료 (매뉴얼)
   ===================================================================== */
.docs{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px}
.doc-chip{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--hairline); border-radius:9999px;
  padding:9px 17px; font-size:14px; color:var(--action);
  background:var(--canvas); text-decoration:none;
  transition:border-color .15s, transform .1s, background .15s;
}
.doc-chip:hover{border-color:var(--action); transform:translateY(-1px)}
.doc-chip:active{transform:scale(.98)}
.doc-chip svg{flex:0 0 auto}
.doc-meta{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
  font-weight:400; letter-spacing:.06em; color:var(--ink-45);
  border-left:1px solid var(--hairline); padding-left:9px; margin-left:2px;
}
.doc-chip-off{
  color:var(--ink-45); cursor:default;
  border-style:dashed; background:transparent;
}
.doc-chip-off:hover{border-color:var(--hairline); transform:none}

/* 관리자 — 상품 매뉴얼 */
.pcard-manual{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1px solid var(--divider); padding-top:12px;
}
.mfile{
  display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;
  text-decoration:none; color:var(--ink);
}
.mfile b{font-size:13px; font-weight:600; letter-spacing:-.2px}
.mfile:hover b{color:var(--action); text-decoration:underline; text-underline-offset:2px}
.mnone{flex:1; min-width:0}
.pcard-manual .pcard-status{flex-basis:100%}

/* Hidden payment methods must stay absent even when button rules set display. */
[hidden]{display:none!important}