/* ============================================================
   신도랑 상품 라인업 — 스타일
   ============================================================ */
:root{
  --bg-top:#f3f5fb;
  --bg-bot:#eceefa;
  --ink:#1f2433;
  --ink-soft:#6b7186;
  --line:#d7dbe8;
  --card:#ffffff;
  --center:#4f63e0;
  --radius:22px;
  --shadow-sm:0 2px 8px rgba(31,40,80,.06);
  --shadow-md:0 14px 40px -16px rgba(40,52,110,.28);
  --shadow-lg:0 40px 90px -30px rgba(40,52,110,.40);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,var(--bg-top),var(--bg-bot));
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

.wrap{max-width:1180px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(16px,4vw,40px) 80px;}

/* ---------- Header ---------- */
.head{text-align:center;position:relative;}
.eyebrow{
  font-size:clamp(11px,1.1vw,13px);font-weight:700;letter-spacing:.28em;
  color:var(--ink-soft);text-transform:uppercase;margin:0 0 10px;
}
.title{
  font-size:clamp(30px,5vw,52px);font-weight:800;letter-spacing:-.02em;margin:0;
  background:linear-gradient(180deg,#2c3350,#4a5379);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Toggle ---------- */
.toggle{
  margin:clamp(26px,4vw,40px) auto 0;display:flex;width:max-content;
  background:#e7e9f4;border-radius:999px;padding:6px;position:relative;
  box-shadow:inset 0 1px 3px rgba(40,52,110,.12);
}
.toggle .pill{
  position:absolute;top:6px;bottom:6px;border-radius:999px;
  background:linear-gradient(180deg,#2a2f44,#16192a);
  box-shadow:0 6px 18px -6px rgba(20,24,45,.65);
  transition:left .42s var(--ease),width .42s var(--ease);
}
.toggle button{
  position:relative;z-index:1;padding:12px clamp(26px,4vw,46px);
  font-size:clamp(15px,1.6vw,18px);font-weight:700;color:var(--ink-soft);
  border-radius:999px;transition:color .3s var(--ease);white-space:nowrap;
}
.toggle button.on{color:#fff;}

/* ---------- Board ---------- */
.board{
  position:relative;margin:clamp(30px,5vw,56px) auto 0;
  width:100%;max-width:1060px;height:clamp(540px,58vw,660px);
}
.svg-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;}
.svg-layer line{stroke:#c4c9dc;stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round;}
.conn-label{
  position:absolute;transform:translate(-50%,-50%);z-index:2;
  font-size:13px;font-weight:600;color:#a9aec4;letter-spacing:.02em;
  background:linear-gradient(180deg,var(--bg-top),var(--bg-top));padding:2px 8px;border-radius:8px;
  white-space:nowrap;pointer-events:none;
}

/* ---------- Cards ---------- */
.card-slot{
  position:absolute;z-index:3;width:clamp(190px,21vw,236px);
}
.card-slot.tl{left:0;top:25%;transform:translateY(-50%);}
.card-slot.tr{right:0;top:25%;transform:translateY(-50%);}
.card-slot.bl{left:0;top:75%;transform:translateY(-50%);}
.card-slot.br{right:0;top:75%;transform:translateY(-50%);}
.card{
  position:relative;width:100%;
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow-md);border:1px solid rgba(215,219,232,.7);
  padding:22px 22px 24px;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  animation:floaty 7s var(--ease) infinite;
}
.card:hover{transform:translateY(-8px) scale(1.015);box-shadow:var(--shadow-lg);}
.card .accent-bar{height:4px;width:64px;border-radius:99px;margin-bottom:16px;}
.card .cat{font-size:15px;font-weight:800;margin:0 0 4px;}
.card .name{font-size:20px;font-weight:800;color:var(--ink);margin:0 0 10px;letter-spacing:-.01em;}
.card .desc{font-size:13px;color:var(--ink-soft);margin:0 0 8px;line-height:1.45;white-space:pre-line;}
.card .price{font-size:15px;font-weight:700;color:#3a4060;margin:0;}

.card.tr,.card.br{text-align:right;}
.card.tr .accent-bar,.card.br .accent-bar{margin-left:auto;}

/* stagger float */
.card.tl{animation-delay:0s;}
.card.tr{animation-delay:-1.6s;}
.card.bl{animation-delay:-3.2s;}
.card.br{animation-delay:-4.8s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media (prefers-reduced-motion:reduce){.card{animation:none;}}

/* ---------- Center card ---------- */
.center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:clamp(230px,26vw,290px);background:var(--card);border-radius:26px;
  border:2px solid var(--center);box-shadow:0 30px 70px -24px rgba(79,99,224,.55);
  padding:30px 26px 28px;text-align:center;cursor:pointer;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  animation:floaty-center 6s var(--ease) infinite;
}
.center:hover{transform:translate(-50%,calc(-50% - 8px)) scale(1.02);box-shadow:0 44px 90px -26px rgba(79,99,224,.6);}
@keyframes floaty-center{0%,100%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,calc(-50% - 9px));}}
.center .top-rule{height:4px;width:120px;border-radius:99px;background:var(--center);margin:6px auto 18px;}
.center .cat{font-size:20px;font-weight:800;color:var(--center);margin:0 0 8px;}
.center .name{font-size:30px;font-weight:800;color:var(--ink);margin:0 0 10px;letter-spacing:-.02em;}
.center .price{font-size:18px;font-weight:700;color:#3a4060;margin:0;}
.center .hint{margin-top:14px;font-size:12px;font-weight:600;color:var(--center);opacity:.8;}

/* recommend badge */
.badge-rec{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#7d8bf0,#5566e6);color:#fff;
  font-size:14px;font-weight:800;padding:7px 22px;border-radius:999px;
  box-shadow:0 10px 22px -8px rgba(79,99,224,.7);letter-spacing:.04em;z-index:6;
}
/* BEST ribbon */
.ribbon{
  position:absolute;top:6px;left:-16px;z-index:7;
  background:linear-gradient(135deg,#ff5b5b,#e23434);color:#fff;
  font-style:italic;font-weight:900;font-size:16px;letter-spacing:.04em;
  padding:7px 16px 7px 14px;transform:rotate(-9deg);
  box-shadow:0 8px 18px -6px rgba(226,52,52,.6);
  clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%,12% 50%);
}

/* floating circle (purchase) */
.float-circle{
  position:absolute;z-index:8;right:-26px;top:64%;
  width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5ec8b8,#2bb39c);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;line-height:1.45;text-align:center;
  box-shadow:0 16px 30px -10px rgba(43,179,156,.6);cursor:pointer;
  animation:floaty 5s var(--ease) infinite;animation-delay:-2s;
}
.float-circle:hover{transform:scale(1.06);}
.float-circle .plus{font-size:18px;font-weight:800;line-height:1;margin-bottom:2px;}

/* ---------- Mobile board ---------- */
.board.mobile{height:auto;display:flex;flex-direction:column;gap:18px;max-width:440px;}
.board.mobile .card-slot{position:static;transform:none;width:100%;}
.board.mobile .card,.board.mobile .center{
  position:static;transform:none;width:100%;animation:none;text-align:left;margin:0;
}
.board.mobile .card.tr,.board.mobile .card.br{text-align:left;}
.board.mobile .card.tr .accent-bar,.board.mobile .card.br .accent-bar{margin-left:0;}
.board.mobile .center{order:-1;}
.board.mobile .center:hover,.board.mobile .card:hover{transform:translateY(-4px);}
.board.mobile .float-circle{position:static;margin:6px auto 0;animation:none;}
.board.mobile .conn-mobile{
  display:flex;align-items:center;gap:8px;color:#a9aec4;font-size:12px;font-weight:700;
  justify-content:center;margin:-6px 0;
}
.board.mobile .conn-mobile::before,.board.mobile .conn-mobile::after{
  content:"";flex:0 0 26px;height:0;border-top:2px dashed #cdd2e4;
}

/* ---------- Admin button + panel ---------- */
.admin-fab{
  position:fixed;top:18px;right:18px;z-index:50;
  width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;
  color:#5a6076;transition:transform .3s var(--ease),color .3s;
}
.admin-fab:hover{transform:rotate(40deg);color:var(--center);}
.admin-fab.active{background:var(--center);color:#fff;}

.adminbar{
  position:fixed;top:0;left:0;right:0;z-index:45;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:14px;padding:12px 70px 12px 22px;
  font-size:14px;
}
.adminbar .dot{width:9px;height:9px;border-radius:50%;background:#2bb39c;box-shadow:0 0 0 4px rgba(43,179,156,.18);}
.adminbar b{font-weight:800;}
.adminbar .spacer{flex:1;}
.adminbar .be{color:var(--ink-soft);font-size:12.5px;}
.btn{
  padding:9px 18px;border-radius:10px;font-weight:700;font-size:13.5px;
  transition:filter .2s,transform .2s,background .2s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--center);color:#fff;}
.btn-primary:hover{filter:brightness(1.07);}
.btn-ghost{background:#eef0f8;color:#4a5070;}
.btn-ghost:hover{background:#e3e6f2;}
.btn-danger{background:#fde7e7;color:#d23b3b;}
.btn-danger:hover{background:#fbd5d5;}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:8px;}

.with-adminbar{padding-top:64px;}

/* editable */
.editable{outline:none;border-radius:6px;transition:box-shadow .2s,background .2s;}
[data-editing="true"] .editable{box-shadow:0 0 0 1.5px rgba(79,99,224,.35);background:rgba(79,99,224,.05);padding:0 4px;cursor:text;}
[data-editing="true"] .editable:focus{box-shadow:0 0 0 2px var(--center);background:#fff;}

.card-tools{
  position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:9;
}
.card-tools button{
  width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:13px;background:#fff;box-shadow:var(--shadow-sm);color:#6b7186;
}
.card-tools button:hover{color:var(--center);}
.card-tools .del:hover{color:#d23b3b;}
.swatch-row{display:flex;gap:7px;margin-top:12px;justify-content:inherit;flex-wrap:wrap;}
.swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:transform .15s;}
.swatch:hover{transform:scale(1.18);}
.swatch.on{box-shadow:0 0 0 2px var(--center);}
.add-card{
  position:absolute;z-index:4;width:clamp(190px,21vw,236px);height:120px;
  border:2px dashed #c4c9dc;border-radius:var(--radius);background:rgba(255,255,255,.5);
  color:#9aa0ba;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px;
  transition:border-color .2s,color .2s,background .2s;
}
.add-card:hover{border-color:var(--center);color:var(--center);background:rgba(79,99,224,.04);}

/* ---------- Modal ---------- */
.overlay{
  position:fixed;inset:0;z-index:60;background:rgba(28,32,55,.5);
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;animation:fadein .3s var(--ease) forwards;
}
@keyframes fadein{to{opacity:1;}}
.modal{
  position:relative;width:min(760px,100%);max-height:90vh;overflow:auto;
  background:#fff;border:2.5px solid var(--center);border-radius:30px;
  box-shadow:var(--shadow-lg);padding:46px 40px 40px;
  transform:translateY(16px) scale(.98);animation:pop .42s var(--ease) forwards;
}
@keyframes pop{to{transform:translateY(0) scale(1);}}
.modal .ribbon{top:-14px;left:24px;font-size:20px;padding:9px 20px;}
.modal .badge-rec{top:-20px;left:auto;right:60px;transform:none;font-size:16px;padding:9px 28px;}
.modal .top-rule{height:5px;width:60%;max-width:380px;border-radius:99px;background:var(--center);margin:14px auto 26px;}
.modal-close{position:absolute;top:16px;right:18px;font-size:22px;color:#9aa0ba;width:34px;height:34px;border-radius:50%;}
.modal-close:hover{background:#f0f1f7;color:var(--ink);}
.svc-title{text-align:center;font-size:14px;font-weight:700;color:var(--ink-soft);margin:0 0 16px;}
.svc-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 28px;}
.chip{
  display:flex;align-items:center;gap:8px;background:#f4f5fb;border:1px solid #e7e9f4;
  border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700;color:#3a4060;
}
.chip .ico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;
  background:linear-gradient(180deg,#eef0fb,#dfe3f7);}
.svc-body{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:center;}
.printer{
  flex:0 0 180px;height:200px;border-radius:18px;background:linear-gradient(160deg,#eef0f6,#e2e5ee);
  display:flex;align-items:center;justify-content:center;color:#aab;font-size:13px;font-weight:700;text-align:center;
  border:1px solid #e1e4ee;
}
.svc-desc{flex:1;min-width:240px;}
.bubble{
  display:inline-block;background:#eef0fb;border:1px solid #dfe3f7;border-radius:14px;
  padding:10px 14px;font-size:13px;font-weight:700;color:#4a5070;white-space:pre-line;margin-bottom:14px;line-height:1.5;
}
.svc-desc .txt{font-size:15px;line-height:1.7;color:#3a4060;white-space:pre-line;font-weight:600;}

/* password modal */
.pw-modal{width:min(380px,100%);border:none;border-radius:22px;padding:30px 28px;text-align:center;}
.pw-modal h3{margin:0 0 6px;font-size:19px;font-weight:800;}
.pw-modal p{margin:0 0 18px;font-size:13.5px;color:var(--ink-soft);}
.pw-modal input{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
  font-size:15px;font-family:inherit;margin-bottom:14px;outline:none;transition:border-color .2s;
}
.pw-modal input:focus{border-color:var(--center);}
.pw-modal .err{color:#d23b3b;font-size:13px;margin:-8px 0 12px;font-weight:600;}
.pw-modal .row{display:flex;gap:10px;}
.pw-modal .row .btn{flex:1;}

.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1f2433;color:#fff;padding:12px 22px;border-radius:12px;font-size:14px;font-weight:600;
  box-shadow:var(--shadow-md);z-index:80;opacity:0;transition:all .35s var(--ease);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:640px){
  .modal{padding:40px 22px 30px;}
  .modal .badge-rec{right:24px;}
  .adminbar{padding:10px 60px 10px 16px;font-size:13px;gap:10px;flex-wrap:wrap;}
}