/* ─────────────────────────────────────────────
   SEED Design tokens (daangn) : seed-design.io
   ───────────────────────────────────────────── */
:root{
  /* palette */
  --gray-00:#ffffff;  --gray-100:#f7f8f9; --gray-200:#f3f4f5; --gray-300:#eeeff1;
  --gray-400:#dcdee3; --gray-500:#d1d3d8; --gray-600:#b0b3ba; --gray-700:#868b94;
  --gray-800:#555d6d; --gray-900:#2a3038; --gray-1000:#1a1c20;
  --carrot-100:#fff2ec; --carrot-200:#ffe8db; --carrot-300:#ffd5c0;
  --carrot-500:#ff9364;  --carrot-600:#ff6600; --carrot-700:#e14d00; --carrot-800:#b93901;
  --blue-100:#eff6ff;  --blue-800:#135fcd;
  --green-100:#edfaf6; --green-700:#079171; --green-800:#00745f;
  --banner-orange:#fff2e1; --banner-cool-gray:#ebf1f5; --banner-yellow:#fffae1;

  /* semantic */
  --bg:var(--gray-100);
  --surface:var(--gray-00);
  --fg:var(--gray-1000);
  --fg-neutral:var(--gray-800);
  --fg-subtle:var(--gray-700);
  --line:var(--gray-300);
  --line-strong:var(--gray-400);
  --primary:var(--carrot-600);
  --primary-pressed:var(--carrot-700);

  /* radius */
  --r1:4px; --r2:8px; --r2_5:10px; --r3:12px; --r4:16px; --r5:20px; --r6:24px; --rfull:9999px;

  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans KR",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --maxw:1200px;
}

@media (min-width:1500px){:root{--maxw:1360px}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
section[id],div[id]{scroll-margin-top:112px}
button,a,input,label,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html{font-size:112.5%;-webkit-text-size-adjust:100%}   /* 1rem = 18px */
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);
  font-size:1rem;line-height:1.5rem;font-weight:400;
  -webkit-font-smoothing:antialiased;letter-spacing:-0.01em;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--carrot-600);outline-offset:2px;border-radius:var(--r1)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.num{font-variant-numeric:tabular-nums}

/* ── header ─────────────────────────────── */
/* 상단바 : 처음엔 배경 없이 얹혀 있다가, 스크롤하면 알약으로 바뀝니다 */
/* 상단바 : 처음엔 화면 폭을 다 쓰다가, 스크롤하면 가운데 알약으로 모입니다 */
.gnb{position:fixed;top:0;left:0;right:0;z-index:50;padding:20px 24px;background:transparent;
  pointer-events:none;transition:padding .35s cubic-bezier(.4,0,.2,1)}
.gnb-in{width:100%;max-width:1600px;margin:0 auto;height:84px;display:flex;align-items:center;gap:12px;
  padding:0 14px 0 10px;border-radius:var(--rfull);pointer-events:auto;
  background:transparent;box-shadow:none;
  transition:max-width .45s cubic-bezier(.4,0,.2,1),padding .35s cubic-bezier(.4,0,.2,1),
             background .3s ease,box-shadow .3s ease,height .35s ease}
.gnb.stuck{padding:12px 20px}
.gnb.stuck nav{gap:4px}
.gnb.stuck .gnb-in{max-width:var(--maxw);height:78px;padding:0 18px 0 24px;
  background:rgba(26,28,32,.68);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 10px 34px -14px rgba(19,26,27,.5)}

/* 로고 : 밝은 배경용과 어두운 배경용을 상황에 맞게 바꿔 씁니다 */
.logo{display:inline-flex;align-items:center;background:transparent;padding:0 6px}
.logo img{height:60px;width:auto;display:block;transition:height .3s ease}
.logo .l-dark{display:none}
.gnb[data-over="dark"] .logo .l-light,
.gnb.stuck .logo .l-light{display:none}
.gnb[data-over="dark"] .logo .l-dark,
.gnb.stuck .logo .l-dark{display:block}
.gnb.stuck .logo img{height:60px}
footer .flogo{height:56px;width:auto;display:block;margin-bottom:14px}
@media (max-width:640px){footer .flogo{height:44px}}
.cbox .cv a{border-bottom:1px solid rgba(255,255,255,.25)}
.gnb nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.gnb nav a{font-size:0.9375rem;font-weight:500;padding:8px 12px;border-radius:var(--rfull);
  color:var(--gray-800);transition:color .2s ease,background .2s ease}
.gnb nav a:hover{color:var(--gray-1000);background:rgba(0,0,0,.06)}
.gnb[data-over="dark"] nav a{color:rgba(255,255,255,.86);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.gnb[data-over="dark"] nav a:hover{color:#fff;background:rgba(255,255,255,.14)}
.gnb.stuck nav a{color:rgba(255,255,255,.72);text-shadow:none}
.gnb.stuck nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
@media (max-width:860px){.gnb nav{display:none}}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;border-radius:var(--r2);font-weight:700;letter-spacing:-0.02em;
  background:var(--primary);color:#fff;transition:background .12s ease;
}
.btn:hover{background:var(--primary-pressed)}
.btn:active{background:var(--carrot-800)}
.btn-sm{height:42px;padding:0 20px;font-size:0.875rem;border-radius:var(--rfull)}
.btn-lg{height:54px;padding:0 24px;font-size:1.0625rem;border-radius:var(--r3)}
.btn-ghost{background:var(--gray-200);color:var(--gray-900)}
.btn-ghost:hover{background:var(--gray-300)}
.btn-ghost:active{background:var(--gray-400)}
.btn-block{width:100%}

/* ── hero ───────────────────────────────── */
.hero{background:var(--surface);border-bottom:1px solid var(--line);padding:112px 0 44px}
.pill{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;
  border-radius:var(--rfull);background:var(--carrot-100);color:var(--carrot-800);
  font-size:0.8125rem;font-weight:700;
}
h1{
  margin-top:18px;font-size:2.5rem;line-height:3.25rem;font-weight:700;letter-spacing:-0.035em;
  word-break:keep-all;
}
.hero p.lede{margin-top:14px;font-size:1.125rem;line-height:1.875rem;color:var(--fg-neutral);max-width:34em;word-break:keep-all}
.hero-price{display:flex;align-items:baseline;gap:10px;margin-top:28px;flex-wrap:wrap}
.hero-price .was{font-size:1.125rem;color:var(--gray-700);text-decoration:line-through}
.hero-price .now{font-size:2.25rem;font-weight:700;letter-spacing:-0.04em;color:var(--primary)}
.hero-price .unit{font-size:1rem;color:var(--fg-neutral);font-weight:500}
.hero-cta{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.notice{display:flex;gap:13px;align-items:flex-start;margin-top:26px;padding:16px 18px;
  background:var(--banner-yellow);border-radius:var(--r3);max-width:62ch}
.notice .ni{flex:none;width:22px;height:22px;border-radius:var(--rfull);background:var(--carrot-600);
  color:#fff;font-size:0.8125rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.notice strong{display:block;font-size:1rem;font-weight:700;margin-bottom:3px;letter-spacing:-0.02em}
.notice div{font-size:0.9375rem;line-height:1.5rem;color:var(--gray-900);word-break:keep-all}
.notice div strong{display:inline;font-size:inherit;margin:0;color:var(--carrot-800)}
.hero-facts{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.fact{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:var(--rfull);
  background:var(--gray-100);color:var(--gray-900);font-size:0.875rem;font-weight:500;
}
.fact b{color:var(--green-800);font-weight:700}
@media (max-width:640px){
  .hero{padding:96px 0 32px}
  h1{font-size:1.75rem;line-height:2.375rem;margin-top:14px}
  .hero p.lede{font-size:1rem;line-height:1.625rem}
  .hero-price .now{font-size:1.875rem}
  .hero-cta .btn{flex:1 1 100%}
}

/* ── section ────────────────────────────── */
section{padding:56px 0}
section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:26px}
/* 구역 제목. 화면이 넓을수록 조금씩 커집니다 */
h2{font-size:clamp(1.625rem, 1.35rem + 0.85vw, 2.25rem);line-height:1.32;
  font-weight:700;letter-spacing:-0.035em;word-break:keep-all}
.sec-head p{margin-top:10px;color:var(--fg-neutral);font-size:clamp(1rem, 0.95rem + 0.2vw, 1.1875rem);
  line-height:1.7;word-break:keep-all;max-width:44em}
h3{font-size:1.1875rem;line-height:1.8125rem;font-weight:700;letter-spacing:-0.03em;margin-bottom:12px}
@media (max-width:640px){section{padding:40px 0}h2{font-size:1.5rem;line-height:1.35}}

/* ── segmented control (일수) ───────────── */
.seg{display:inline-flex;background:var(--gray-200);border-radius:var(--r3);padding:4px;gap:2px}
.seg button{
  border:0;background:transparent;color:var(--gray-800);font-weight:700;font-size:0.9375rem;
  height:40px;padding:0 20px;border-radius:var(--r2_5);transition:background .12s,color .12s;
  white-space:nowrap;
}
/* 좁은 화면에서는 글자가 줄바꿈되지 않게 폭을 나눠 씁니다 */
@media (max-width:640px){
  .seg{display:flex;width:100%}
  .seg button{flex:1 1 0;min-width:0;padding:0 6px;font-size:0.8125rem}
}
.seg button:active{background:rgba(0,0,0,.06)}
.seg button[aria-pressed="true"]{background:var(--gray-00);color:var(--gray-1000);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ── plan cards ─────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
@media (max-width:900px){.plans{grid-template-columns:repeat(2,1fr)}.plan.pick{grid-column:span 2}}
@media (max-width:640px){.plans{grid-template-columns:1fr}.plan.pick{grid-column:auto}}
.plan{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r4);
  padding:24px 22px;display:flex;flex-direction:column;position:relative;
}
.plan.pick{border:2px solid var(--carrot-600);padding:23px 21px}
.plan .tag{
  position:absolute;top:-11px;left:21px;height:24px;padding:0 10px;border-radius:var(--rfull);
  background:var(--carrot-600);color:#fff;font-size:0.75rem;font-weight:700;display:inline-flex;align-items:center;
}
.plan .who{font-size:0.75rem;font-weight:800;color:var(--primary);margin-bottom:7px;letter-spacing:.14em}
.plan .name{font-size:1.25rem;font-weight:700;letter-spacing:-0.03em}
.plan .desc{margin-top:6px;font-size:0.9375rem;color:var(--fg-neutral);line-height:1.5rem;word-break:keep-all}
.plan .price{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.plan .price .was{font-size:0.875rem;color:var(--gray-700);text-decoration:line-through}
.plan .price .now{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.plan .price .now b{font-size:2rem;font-weight:700;letter-spacing:-0.04em;color:var(--fg)}
.plan.pick .price .now b{color:var(--primary)}
.plan .price .now span{font-size:0.9375rem;color:var(--fg-subtle);font-weight:500}
.vatmark{margin-top:5px;font-size:0.8125rem;color:var(--fg-subtle)}
.plan ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.plan li{font-size:0.9375rem;color:var(--gray-900);display:flex;gap:8px;align-items:flex-start;word-break:keep-all}
.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:var(--rfull);background:var(--carrot-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ff6600'%3E%3Cpath d='M8.2 13.6 5.1 10.5l1.1-1.1 2 2 5-5 1.1 1.1z'/%3E%3C/svg%3E") center/16px no-repeat}
.plan .foot{margin-top:auto;padding-top:20px}


/* ── list rows (콘텐츠) ─────────────────── */
.rows{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r4);overflow:hidden}
.row{display:flex;gap:14px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .rname{font-size:1rem;font-weight:700;flex:none;width:150px;letter-spacing:-0.02em}
.row .rdesc{font-size:0.9375rem;color:var(--fg-neutral);line-height:1.5rem;word-break:keep-all}
.row.free-row{background:var(--carrot-100)}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:var(--r1);
  background:var(--gray-200);color:var(--gray-800);font-size:0.75rem;font-weight:700;margin-left:8px}
.chip.g{background:var(--green-100);color:var(--green-800)}
@media (max-width:640px){
  .row{flex-direction:column;align-items:flex-start;gap:5px}
  .row .rname{width:auto}
}

/* ── tables ─────────────────────────────── */
.tw{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r4);overflow:hidden}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.swipe{display:none;padding:11px 18px 0;font-size:0.8125rem;color:var(--fg-subtle)}
@media (max-width:640px){.swipe{display:block}}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{padding:14px 18px;text-align:left;font-size:0.9375rem;border-bottom:1px solid var(--line)}
thead th{background:var(--gray-100);font-weight:700;font-size:0.875rem;color:var(--gray-800);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.was{color:var(--gray-700);text-decoration:line-through}
td.now{color:var(--primary);font-weight:700}
td.free{color:var(--green-800);font-weight:700}
.tnote{padding:14px 18px;background:var(--gray-100);font-size:0.875rem;line-height:1.375rem;color:var(--gray-800);border-top:1px solid var(--line);word-break:keep-all}
.tname{font-weight:700}
.tsub{display:block;font-size:0.8125rem;color:var(--fg-subtle);font-weight:400;margin-top:2px}

/* ── calculator ─────────────────────────── */
.calc{display:grid;grid-template-columns:1.25fr .95fr;gap:16px;align-items:start}
@media (max-width:860px){.calc{grid-template-columns:1fr}.sum{position:static}}
.card{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r4);padding:24px 22px}
.field{margin-bottom:22px}
.field:last-child{margin-bottom:0}
.flabel{font-size:0.9375rem;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{
  border:1px solid var(--line-strong);background:var(--surface);color:var(--gray-800);
  border-radius:var(--r2_5);padding:11px 15px;font-size:0.9375rem;font-weight:500;
  transition:border-color .12s,background .12s,color .12s;
}
.opt:active{background:var(--gray-200)}
.opt[aria-pressed="true"]{border-color:var(--carrot-600);background:var(--carrot-100);color:var(--carrot-800);font-weight:700}
.fnote{margin-top:10px;font-size:0.875rem;color:var(--fg-subtle);line-height:1.375rem}
.opt:disabled{cursor:default;border-style:dashed}
.opt small{display:block;font-size:0.75rem;font-weight:500;color:var(--fg-subtle);margin-top:2px}
.opt[aria-pressed="true"] small{color:var(--carrot-700)}
.check{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.check:last-of-type{border-bottom:0}
.check input{width:22px;height:22px;accent-color:var(--carrot-600);flex:none}
.check label{flex:1;font-size:0.9375rem;cursor:pointer;word-break:keep-all}
/* 옵션 이름 옆 설명이 「작업 2」 / 「일」 처럼 끊기지 않게 합니다 */
.check label span{white-space:nowrap}
.check.off{opacity:.5}
.check.off label{cursor:default}
.check .lsub{color:var(--fg-subtle);font-size:0.8125rem}
.check .need{display:none;color:var(--fg-subtle);font-size:0.8125rem}
.check.off .need{display:inline}
.check.off .lsub{display:none}
.check .p{font-size:0.9375rem;color:var(--fg-neutral);font-variant-numeric:tabular-nums;white-space:nowrap}
.step{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stepper{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line-strong);border-radius:var(--rfull);background:var(--surface)}
.stepper button{
  width:34px;height:34px;border-radius:var(--rfull);border:0;background:transparent;
  font-size:1.125rem;font-weight:700;color:var(--gray-800);line-height:1;
}
.stepper button:hover{background:var(--gray-100)}
.stepper button:active{background:var(--gray-300)}
.stepper button:disabled{color:var(--gray-500);cursor:default;background:transparent}
.stepper .v{min-width:32px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.sunit{font-size:0.9375rem;color:var(--fg-neutral)}
.sum{position:sticky;top:100px;background:var(--gray-1000);color:#fff;border-radius:var(--r4);padding:24px 22px}
.sum h3{color:#fff;margin-bottom:16px}
.sum .line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:0.9375rem;color:var(--gray-500)}
.sum .line b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.sum .line.sub{padding:7px 0;font-size:0.875rem}
.sum .line.sub span{padding-left:11px;position:relative}
.sum .line.sub span::before{content:"";position:absolute;left:0;top:9px;width:3px;height:3px;border-radius:50%;background:var(--gray-700)}
.sum .div{height:1px;background:rgba(255,255,255,.16);margin:12px 0}
.sum .list{display:flex;justify-content:space-between;font-size:0.875rem;color:var(--gray-600)}
.sum .list b{text-decoration:line-through;font-weight:400}
.sum .total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px}
.sum .total span{font-size:1rem;font-weight:700}
.sum .total strong{font-size:2rem;font-weight:700;letter-spacing:-0.04em;color:var(--carrot-500);font-variant-numeric:tabular-nums}
.sum .save{margin-top:10px;background:rgba(255,102,0,.16);color:var(--carrot-300);border-radius:var(--r2);
  padding:9px 12px;font-size:0.875rem;font-weight:700;text-align:center}
.sum .vat{margin-top:14px;font-size:0.8125rem;color:var(--gray-600);line-height:1.25rem}
.sum .btn{margin-top:16px}


/* ── faq ────────────────────────────────── */
.faq{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r4);overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 54px 18px 20px;font-size:1rem;font-weight:700;
  position:relative;letter-spacing:-0.02em;word-break:keep-all;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:20px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--gray-700);border-bottom:2px solid var(--gray-700);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:hover{background:var(--gray-100)}
.faq .a{padding:0 20px 20px;font-size:0.9375rem;line-height:1.625rem;color:var(--fg-neutral);word-break:keep-all}

/* ── contact ────────────────────────────── */
.contact{background:var(--gray-1000);color:#fff;padding:56px 0}
.contact h2{color:#fff}
.contact p{color:var(--gray-500);margin-top:10px;font-size:1rem;line-height:1.625rem;word-break:keep-all}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
@media (max-width:760px){.cgrid{grid-template-columns:1fr}}
.cbox{background:rgba(255,255,255,.06);border-radius:var(--r4);padding:22px 20px}
.cbox .ct{font-size:0.8125rem;font-weight:700;color:var(--carrot-500)}
.cbox .cv{margin-top:8px;font-size:1.125rem;font-weight:700;letter-spacing:-0.02em}
.cbox .cs{margin-top:6px;font-size:0.875rem;color:var(--gray-600);line-height:1.375rem}
.ph{background:rgba(255,255,255,.14);border-radius:var(--r1);padding:1px 7px;color:var(--gray-500);font-weight:500}
.contact .btn{margin-top:22px}
/* 상담 버튼과 요금 계산 버튼 */
.cbtns{display:flex;gap:10px;flex-wrap:wrap}
.contact .cbtns .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:transparent}
.contact .cbtns .btn-ghost:hover{background:rgba(255,255,255,.18)}
@media (max-width:560px){ .cbtns .btn{flex:1 1 100%} }

footer{background:var(--gray-1000);color:var(--gray-700);padding:0 0 40px;font-size:0.8125rem;line-height:1.375rem}
footer .wrap{border-top:1px solid rgba(255,255,255,.1);padding-top:24px}

/* ── mobile sticky bar ──────────────────── */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);
  border-top:1px solid var(--line-strong);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:12px;
}
.bar .bp{flex:1;font-size:0.9375rem;font-weight:700;letter-spacing:-0.02em}
.bar .bp small{display:block;font-size:0.75rem;color:var(--fg-subtle);font-weight:500}
@media (max-width:760px){
  .bar{display:flex}
  body{padding-bottom:76px}
}
@media (max-width:640px){
  th,td{padding:12px 14px;font-size:0.875rem}
  table{min-width:460px}
  thead th{font-size:0.8125rem}
  .card{padding:20px 17px}
  .plan{padding:20px 18px}
  .plan.pick{padding:19px 17px}
  .plan .price .now b{font-size:1.75rem}
  .sum{padding:20px 18px}
  .sum .total strong{font-size:1.75rem}
  .field{margin-bottom:20px}
  .stepper button{width:38px;height:38px}
  .gnb{padding:12px 14px}
  .gnb.stuck{padding:10px 14px}
  .gnb-in{height:66px}
  .gnb.stuck .gnb-in{height:64px}
  .logo img{height:44px}
  .gnb.stuck .logo img{height:44px}
  .opt{padding:12px 14px}
    .faq summary{padding:16px 48px 16px 17px;font-size:0.9375rem}
  .faq .a{padding:0 17px 18px}
  .row{padding:14px 17px}
  .tnote{padding:12px 14px}
  .swipe{padding:11px 14px 0}
  .contact{padding:40px 0}
  .cbox{padding:18px 17px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ── 이미지 자리표시자 (사진·영상 넣을 곳) ───────────── */
.ph-img{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--gray-200);border:1px dashed var(--gray-600);border-radius:var(--r3);
  color:var(--fg-subtle);font-size:0.8125rem;line-height:1.375rem;padding:20px;overflow:hidden;
}
.ph-img b{display:block;color:var(--gray-800);font-size:0.9375rem;font-weight:700;margin-bottom:3px}
.ph-img::before{
  content:"이미지";position:absolute;top:9px;left:9px;background:var(--gray-00);
  border-radius:var(--r1);padding:2px 8px;font-size:0.6875rem;font-weight:700;color:var(--fg-subtle);
}
.ph-img.video::before{content:"영상"}

/* ── 콘텐츠 카드 ─────────────────────────────────── */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.ccards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.ccards{grid-template-columns:1fr}}
.ccard{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r4);overflow:hidden;display:flex;flex-direction:column}
.ccard .ph-img{border:0;border-radius:0;border-bottom:1px dashed var(--gray-600)}
.ccard .cbody{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.ccard h4{font-size:1.0625rem;font-weight:700;letter-spacing:-0.02em;margin:0 0 5px}
.ccard p{font-size:0.9375rem;color:var(--fg-neutral);line-height:1.5rem;word-break:keep-all}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:13px}
.tag2{height:28px;padding:0 9px;border-radius:var(--r1);background:var(--gray-200);color:var(--gray-800);
  font-size:0.75rem;font-weight:600;display:inline-flex;align-items:center}
.tag2.on{background:var(--carrot-100);color:var(--carrot-800)}

/* ── 레퍼런스 로고 자리 ──────────────────────────── */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:700px){.logos{grid-template-columns:repeat(2,1fr)}}
.logos .ph-img{aspect-ratio:16/7;font-size:0.75rem}

/* ── 메인 페이지 요금 미리보기 ─────────────────────── */
.pricerow{display:flex;align-items:baseline;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pricerow s{color:var(--gray-700);font-size:0.875rem}
.pricerow b{font-size:1.75rem;font-weight:700;letter-spacing:-0.04em;color:var(--primary);font-variant-numeric:tabular-nums}
.pricerow span{font-size:0.875rem;color:var(--fg-subtle)}

/* ══ 움직임 ══════════════════════════════════════════ */

/* 히어로 배경 : QR 코드를 닮은 점 격자 위로 칸이 하나씩 켜졌다 꺼짐 */
.hero{position:relative;overflow:hidden}
.hero > .wrap{position:relative;z-index:1}
.qrbg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(var(--gray-400) 1.4px,transparent 1.5px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(170deg,#000 0%,transparent 72%);
  mask-image:linear-gradient(170deg,#000 0%,transparent 72%);opacity:.75}
.qrbg i{position:absolute;width:20px;height:20px;border-radius:4px;
  background:var(--carrot-300);opacity:0;animation:qrblink 7s ease-in-out infinite}
@keyframes qrblink{0%,72%,100%{opacity:0;transform:scale(.7)}
  78%{opacity:.85;transform:scale(1)}88%{opacity:.5;transform:scale(1)}}

/* 스크롤에 맞춰 한 번만 나타남 */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}

/* 카드 : 손을 올리면 살짝 떠오름 */
.ccard,.plan{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ccard:hover,.plan:hover{transform:translateY(-3px);
  box-shadow:0 10px 26px -16px rgba(19,26,27,.45);border-color:var(--gray-500)}
.plan.pick:hover{border-color:var(--carrot-700)}
.ccard:active,.plan:active{transform:translateY(-1px)}

/* 이미지 자리 : 사선 빛이 천천히 지나가서 "여기 들어갑니다"가 보이게 */
.ph-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%);
  transform:translateX(-120%);animation:sheen 5s ease-in-out infinite}
.ph-img span{position:relative;z-index:1}
@keyframes sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}

/* 카테고리 칩 : 지금 보고 있는 곳 표시 */

/* 견적 금액이 바뀔 때 */
.sum .total strong{transition:color .2s ease}


/* ── 현장 사진·영상 갤러리 ──────────────────────────── */
.gfilter{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gfilter::-webkit-scrollbar{display:none}
.gfilter button{flex:none;height:38px;padding:0 16px;border-radius:var(--rfull);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--gray-800);font-size:0.9375rem;font-weight:600}
.gfilter button[aria-pressed="true"]{background:var(--gray-1000);border-color:var(--gray-1000);color:#fff}
.gfull{padding:0 14px}                               /* 화면 폭을 거의 다 씁니다 */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1100px){.ggrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .gfull{padding:0 16px}
  .ggrid{grid-template-columns:1fr;gap:12px}          /* 모바일은 한 줄에 하나 */
}
.gitem{position:relative;padding:0;border:0;background:var(--gray-200);border-radius:var(--r4);overflow:hidden;
  display:block;width:100%;text-align:left;cursor:pointer}
.gitem img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gitem .ph-img{border-radius:0;border:0}
.gitem .gcap{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;color:#fff;font-size:0.875rem;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));line-height:1.25rem}
.gitem .gcap b{display:block;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em}
.gitem .gplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;
  border-radius:var(--rfull);background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;padding-left:4px;backdrop-filter:blur(4px)}
.gitem:hover img{transform:scale(1.04)}
.gitem img{transition:transform .3s ease}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,12,14,.94);display:none;
  align-items:center;justify-content:center;padding:24px 84px}
.lightbox.on{display:flex}
.lightbox .lbody{max-width:1500px;width:100%}
.lightbox img,.lightbox video{width:100%;max-height:82vh;object-fit:contain;border-radius:var(--r3);display:block}
.lightbox .lframe{position:relative;padding-top:56.25%;border-radius:var(--r3);overflow:hidden}
.lightbox .lframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox .lcap{margin-top:14px;color:var(--gray-500);font-size:0.9375rem;text-align:center}
.lightbox .lcap b{color:#fff}
.lclose{position:absolute;top:18px;right:18px;width:48px;height:48px;border-radius:var(--rfull);
  border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.125rem;z-index:2}
.lclose:hover{background:rgba(255,255,255,.24)}

/* ── 넓은 화면에서 히어로를 좌우로 나눔 ─────────────── */
.hero-grid{display:grid;grid-template-columns:1fr;gap:26px}
.hero-copy h1{margin-top:18px}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:44px;align-items:center}
  .hero-copy .lede{max-width:none}
  .hero-media .ph-img{max-height:none}
}
@media (max-width:999px){
  .hero-media{order:2}
}

/* ── 선택 안 했을 때 알림 ─────────────────────────── */
.warn{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:11px 13px;border-radius:var(--r2_5);
  background:var(--red-100);color:#ca1d13;font-size:0.875rem;line-height:1.375rem;word-break:keep-all}
.warn b{flex:none;width:18px;height:18px;border-radius:var(--rfull);background:#ca1d13;color:#fff;
  font-size:0.6875rem;display:flex;align-items:center;justify-content:center;margin-top:2px}
.warn.flash{animation:warnflash .9s ease}
@keyframes warnflash{0%,100%{transform:translateX(0)}15%{transform:translateX(-5px)}30%{transform:translateX(5px)}45%{transform:translateX(-3px)}60%{transform:translateX(3px)}}
.swarn{margin-top:14px;padding:10px 12px;border-radius:var(--r2);background:rgba(250,52,44,.16);
  color:#feb7b3;font-size:0.875rem;line-height:1.25rem;text-align:center}
.btn.off{background:var(--gray-600);pointer-events:none}

/* ── 요금표를 간결하게 ─────────────────────────────── */
table.simple{min-width:0}
table.simple td,table.simple th{padding:13px 20px}
table.simple td.r{white-space:nowrap;line-height:1.375rem}
table.simple td.r s{color:var(--gray-700);font-size:0.8125rem;margin-right:3px}
table.simple td.r b{font-size:1rem;font-weight:700;color:var(--primary)}
table.simple td.r .tsub{color:var(--fg-subtle)}
table.simple td.free{color:var(--green-800);font-weight:700}
.faq details .tscroll{overflow-x:auto}
.faq details .tnote{margin:0;border-top:1px solid var(--line)}

/* ── 견적 합계 옆 VAT 표기 ─────────────────────────── */
.sum .total .tright{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.sum .vatx{font-style:normal;font-size:0.6875rem;font-weight:600;color:var(--gray-600);margin-top:5px;letter-spacing:.02em}

/* ── 문의 팝업 ──────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:110;background:rgba(10,12,14,.6);display:flex;align-items:center;
  justify-content:center;padding:20px;overflow-y:auto}
.modal[hidden]{display:none!important}
.mbox{position:relative;background:var(--surface);border-radius:var(--r4);padding:28px 26px;
  width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.mbox h3{font-size:1.375rem;margin-bottom:6px}
.msub{font-size:0.9375rem;color:var(--fg-neutral);margin-bottom:18px}
.mclose{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:var(--rfull);border:0;
  background:var(--gray-200);color:var(--gray-800);font-size:1rem}
.mclose:hover{background:var(--gray-300)}
.mquote{background:var(--gray-100);border-radius:var(--r3);padding:16px 18px;font-size:0.875rem;
  line-height:1.5rem;color:var(--gray-900);margin-bottom:18px;white-space:pre-line}
.mquote b{color:var(--primary)}
.mform{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.mform{grid-template-columns:1fr}}
.mform label{display:flex;flex-direction:column;gap:7px;font-size:0.875rem;font-weight:700;color:var(--gray-900)}
.mform .lb{display:block;line-height:1.25rem}
.mform .lb em{font-style:normal;color:var(--carrot-700)}
.mform label.full{grid-column:1/-1}
.mform input,.mform textarea,.mform select{font-family:inherit;font-size:1rem;font-weight:400;color:var(--fg);
  border:1px solid var(--line-strong);border-radius:var(--r2_5);padding:12px 14px;background:var(--surface);
  width:100%;resize:vertical}
.mform input:focus,.mform textarea:focus,.mform select:focus{border-color:var(--carrot-600);outline:none}
.mform input::placeholder,.mform textarea::placeholder{color:var(--gray-600)}
/* 고르는 칸도 나머지 칸과 같은 모양으로 맞춥니다 */
.mform select{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23868b94' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.merr{margin:14px 0 0;padding:11px 13px;border-radius:var(--r2_5);background:var(--red-100);color:#ca1d13;font-size:0.875rem}
.mbox .btn{margin-top:16px}
.mnote{margin-top:12px;font-size:0.8125rem;color:var(--fg-subtle);text-align:center;line-height:1.25rem}
.mdone{text-align:center;padding:20px 0}
.mdone .ic{width:60px;height:60px;border-radius:var(--rfull);background:var(--carrot-100);color:var(--carrot-700);
  font-size:1.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.mdone h3{margin-bottom:8px}
.mdone p{font-size:0.9375rem;color:var(--fg-neutral);line-height:1.625rem}
.mdone .mcount{margin-top:14px;font-size:0.8125rem;color:var(--fg-subtle)}

/* ── 날짜 기간 선택 ─────────────────────────────────── */
.daterange{display:flex;align-items:center;gap:10px}
.daterange input{flex:1;min-width:0}
.daterange em{font-style:normal;color:var(--fg-subtle);font-weight:400}
.mform input[type="date"]{font-variant-numeric:tabular-nums}

/* ── 리캡차 ────────────────────────────────────────── */
.mcaptcha{margin-top:18px;display:flex;justify-content:center}
.mcaptcha:empty{display:none}

.mlegal{margin-top:14px;font-size:0.75rem;line-height:1.125rem;color:var(--fg-subtle);text-align:center}
.mlegal a{color:var(--fg-subtle);text-decoration:underline}

/* ── 대표 콘텐츠 슬라이드 ───────────────────────────── */
.hero-slider{position:relative;overflow:hidden;background:var(--gray-200);padding:0;
  height:clamp(380px,58vh,620px);border-bottom:1px solid var(--line)}
.hs-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.hs-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.hs-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;border:0;
  object-position:50% 18%}   /* 위쪽을 더 보여주고 아래를 잘라냅니다 */
.hs-slide .ph-img{border:0;border-radius:0;background:linear-gradient(160deg,var(--gray-400),var(--gray-600))}
.hs-slide .ph-img span{opacity:.55;transform:translateY(-12%)}
.hs-slide .ph-img::before{top:18px;left:18px}
.hs-shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,14,.18) 0%,rgba(10,12,14,.30) 40%,rgba(10,12,14,.78) 78%,rgba(10,12,14,.92) 100%)}
.hs-body{position:absolute;left:0;right:0;bottom:0;padding:0 0 40px}
.hs-tag{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:var(--rfull);
  background:var(--carrot-600);color:#fff;font-size:0.8125rem;font-weight:700}
.hs-body h2{color:#fff;margin-top:14px;font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.2;
  letter-spacing:-.035em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hs-body p{color:rgba(255,255,255,.86);margin-top:10px;font-size:1.0625rem;line-height:1.75rem;
  max-width:34em;word-break:keep-all;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.hs-cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.hs-cta .btn-ghost{background:rgba(255,255,255,.92);color:var(--gray-1000)}
.hs-cta .btn-ghost:hover{background:#fff}

.hs-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;
  border-radius:var(--rfull);background:rgba(255,255,255,.85);color:var(--gray-900);font-size:1.5rem;
  line-height:1;display:flex;align-items:center;justify-content:center;z-index:2}
.hs-nav:hover{background:#fff}
.hs-nav.prev{left:20px}
.hs-nav.next{right:20px}
@media (max-width:760px){.hs-nav{display:none}}

.hs-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;gap:8px;justify-content:center;z-index:2}
.hs-dots button{width:9px;height:9px;padding:0;border:0;border-radius:var(--rfull);
  background:rgba(255,255,255,.45);transition:width .2s ease,background .2s ease}
.hs-dots button[aria-current]{width:26px;background:#fff}

@media (max-width:640px){
  .hero-slider{height:clamp(340px,64vh,520px)}
  .hs-body{padding-bottom:44px}
  .hs-body p{font-size:0.9375rem;line-height:1.5rem}
  .hs-cta .btn{flex:1 1 100%}
}

/* ── 전체 화면 슬라이드 ────────────────────────────── */
/* 화면 높이의 90% : 모니터 해상도가 달라도 비율이 유지됩니다 */
.hero-slider.full{height:90svh;min-height:520px;max-height:1100px;border-radius:0;border:0;
  margin:0;padding:0;border-bottom:0}
@supports not (height:90svh){ .hero-slider.full{height:90vh} }
body > .gnb + section.hero-slider.full{margin-top:0}
.hero-slider.full .hs-body{padding-bottom:64px}
.hero-slider.full .hs-body h2{font-size:clamp(2rem,5.2vw,3.75rem)}
.hero-slider.full .hs-body p{font-size:1.125rem;line-height:1.875rem}
.hero-slider.full .hs-dots{bottom:26px}
@media (max-width:640px){
  .hero-slider.full{height:90svh;min-height:460px}
  .hs-media{object-position:50% 12%}
  .hero-slider.full .hs-body{padding-bottom:56px}
  .hero-slider.full .hs-body p{font-size:1rem;line-height:1.625rem}
}

/* ── 요약 타일 ─────────────────────────────────────── */
.tiles{padding:16px 0 8px}
.tiles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;grid-auto-rows:minmax(170px,auto)}
.bt{border-radius:var(--r6);overflow:hidden;position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;padding:26px;min-width:0}
.bt h2{font-size:clamp(1.375rem,2.2vw,1.875rem);line-height:1.25;letter-spacing:-.035em;word-break:keep-all}
.bt p{margin-top:10px;font-size:0.9375rem;line-height:1.5625rem;word-break:keep-all}
.bt .btn{margin-top:18px;align-self:flex-start}
.bt-brand{grid-column:span 2;background:var(--gray-1000);color:#fff}
.bt-brand h2{color:#fff}
.bt-brand p{color:var(--gray-500)}
.bt-price{background:var(--carrot-600);color:#fff;justify-content:center}
.bt-price .big{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:-.04em;line-height:1.15}
.bt-price .sm{font-size:0.875rem;opacity:.9;margin-top:6px}
.bt-price s{opacity:.75;font-size:0.875rem}
.bt-note{background:var(--banner-yellow);justify-content:center}
.bt-note strong{display:block;font-size:1.0625rem;font-weight:700;margin-bottom:6px}
.bt-note span{font-size:0.9375rem;line-height:1.5rem;color:var(--gray-800)}
.bt-cat{grid-column:span 4;background:var(--surface);border:1px solid var(--line-strong);justify-content:center}
.bt-cat .cats{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.bt-cat .cats span{height:34px;padding:0 13px;border-radius:var(--rfull);background:var(--gray-100);
  display:inline-flex;align-items:center;font-size:0.875rem;font-weight:600;color:var(--gray-800)}
.bt-cat .ttl{font-size:0.8125rem;font-weight:700;color:var(--primary)}
@media (max-width:900px){
  .tiles-grid{grid-template-columns:repeat(2,1fr)}
  .bt-brand{grid-column:span 2}
  .bt-cat{grid-column:span 2}
}
@media (max-width:600px){
  .tiles-grid{grid-template-columns:1fr}
  .bt-brand,.bt-cat{grid-column:span 1}
  .bt{padding:22px;border-radius:var(--r5)}
}

/* ── 상단 메뉴 드롭다운 ─────────────────────────────── */
.navdrop{position:relative}
.ndbtn{border:0;background:transparent;font-family:inherit;font-size:0.9375rem;font-weight:500;
  padding:8px 12px;border-radius:var(--rfull);color:var(--gray-800);display:inline-flex;align-items:center;gap:5px}
.ndbtn::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s ease}
.ndbtn:hover{background:rgba(0,0,0,.06)}
.gnb[data-over="dark"] .ndbtn{color:rgba(255,255,255,.86);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.gnb[data-over="dark"] .ndbtn:hover,.gnb.stuck .ndbtn:hover{background:rgba(255,255,255,.14);color:#fff}
.gnb.stuck .ndbtn{color:rgba(255,255,255,.72);text-shadow:none}
.navdrop.open .ndbtn::after{transform:rotate(-135deg) translate(-2px,-2px)}

.ndmenu{position:absolute;top:calc(100% + 10px);left:0;min-width:190px;padding:8px;border-radius:var(--r4);
  background:rgba(26,28,32,.94);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 16px 40px -16px rgba(19,26,27,.6);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.navdrop.open .ndmenu{opacity:1;visibility:visible;transform:translateY(0)}
.ndmenu a{display:block;padding:10px 14px;border-radius:var(--r2_5);font-size:0.9375rem;font-weight:500;
  color:rgba(255,255,255,.8);text-shadow:none}
.ndmenu a:hover{background:rgba(255,255,255,.12);color:#fff}

/* ── 도입 기관 로고 띠 ─────────────────────────────── */
.marquee{position:relative;overflow:hidden;margin:8px 0 20px;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;align-items:center;gap:56px;width:max-content;
  animation:mqmove 24s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mqmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{flex:none;height:64px;min-width:170px;display:flex;align-items:center;justify-content:center}
.mq-item img{max-height:56px;max-width:180px;width:auto;object-fit:contain;
  transition:transform .2s ease}
.mq-item:hover img{transform:scale(1.06)}
.mq-item span{display:inline-flex;align-items:center;height:48px;padding:0 20px;border-radius:var(--rfull);
  background:var(--surface);border:1px dashed var(--gray-500);color:var(--fg-subtle);
  font-size:0.9375rem;font-weight:600;white-space:nowrap}
@media (max-width:640px){
  .mq-track{gap:36px}
  .mq-item{min-width:140px;height:56px}
  .mq-item span{height:42px;padding:0 16px;font-size:0.875rem}
}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* ── 모든 요금제 공통 혜택 ─────────────────────────── */
.perks{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.perks > b{font-size:0.9375rem;font-weight:700;color:var(--fg)}
.perkrow{display:flex;gap:8px;flex-wrap:wrap}
.perkrow span{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px;
  border-radius:var(--rfull);background:var(--carrot-100);color:var(--gray-900);
  font-size:0.875rem;font-weight:600}
.perkrow em{font-style:normal;color:var(--carrot-700);font-weight:700}
@media (max-width:640px){
  .perks{gap:10px;margin-bottom:20px}
  .perks > b{font-size:0.875rem;flex:1 1 100%}
  .perkrow span{height:32px;padding:0 13px;font-size:0.8125rem}
}

/* ── 포함 항목 칩 + 버튼 한 줄 ─────────────────────── */
.inclrow{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;margin-top:22px}
.inclrow span{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 15px;
  border-radius:var(--rfull);background:var(--banner-orange);color:var(--gray-900);
  font-size:0.875rem;font-weight:500}
.inclrow b{color:var(--carrot-800);font-weight:700}

.pricefoot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:22px;flex-wrap:wrap}
.pricefoot .inclrow{flex:1 1 320px}
.pricefoot .pf-btns{display:flex;gap:10px;flex:none}
@media (max-width:760px){
  .pricefoot{flex-direction:column;align-items:stretch}
  /* 세로로 쌓일 때 320px 이 높이로 잡히지 않게 되돌립니다 */
  .pricefoot .inclrow{flex:0 0 auto}
  .pricefoot .pf-btns{flex-wrap:wrap}
  .pricefoot .pf-btns .btn{flex:1 1 100%}
}

/* ── 이런 곳에 어울려요 ────────────────────────────── */
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.uses{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.uses{grid-template-columns:1fr}}
.usecard{position:relative;overflow:hidden;background:var(--surface) center right/cover no-repeat;
  border:1px solid var(--line-strong);border-radius:var(--r4);
  min-height:260px;padding:26px 24px;display:flex;flex-direction:column;justify-content:center;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
/* 왼쪽을 흐리게 덮어 글이 또렷하게 보이도록 */
.usecard::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 38%,rgba(255,255,255,.35) 68%,rgba(255,255,255,0) 100%)}
.usecard > *{position:relative;z-index:1}
.usecard.u1{background-image:url('uses/u1.jpg')}
.usecard.u2{background-image:url('uses/u2.jpg')}
.usecard.u3{background-image:url('uses/u3.jpg')}
.usecard.u4{background-image:url('uses/u4.jpg')}
.usecard.u5{background-image:url('uses/u5.jpg')}
.usecard.u6{background-image:url('uses/u6.jpg')}
.usecard:hover{transform:translateY(-3px);box-shadow:0 10px 26px -16px rgba(19,26,27,.45);
  border-color:var(--gray-500)}
.usecard .ic{font-size:2rem;line-height:1;display:block;margin-bottom:14px}
.usecard h3{font-size:1.1875rem;letter-spacing:-.03em;margin-bottom:10px}
.usecard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.usecard .tags span{height:28px;padding:0 10px;border-radius:var(--r1);background:rgba(255,255,255,.9);border:1px solid var(--line);
  color:var(--gray-800);font-size:0.8125rem;font-weight:600;display:inline-flex;align-items:center}
.usecard p{font-size:0.9375rem;line-height:1.5625rem;color:var(--fg-neutral);word-break:keep-all;max-width:17em}

/* 갤러리 타일을 16:9로 */
.gitem img{aspect-ratio:16/9}
.gitem .ph-img{aspect-ratio:16/9}
.gmore{display:block;margin:20px auto 0;min-width:220px}

/* 히어로 없이 바로 시작하는 페이지의 첫 섹션 (고정 상단바만큼 띄웁니다) */
.toppad{padding-top:132px}
.pagehead.toppad{padding-top:120px}
@media (max-width:640px){.toppad{padding-top:104px}.pagehead.toppad{padding-top:100px}}

/* ── 모바일 메뉴 (860px 이하에서만) ─────────────────── */
.mnav-btn{display:none;width:44px;height:44px;border:0;border-radius:var(--rfull);background:rgba(255,255,255,.14);
  position:relative;flex:none;margin-left:6px}
.mnav-btn span,.mnav-btn span::before,.mnav-btn span::after{position:absolute;left:12px;width:20px;height:2px;
  border-radius:2px;background:#fff;content:"";transition:transform .2s ease,opacity .2s ease}
.mnav-btn span{top:21px}
.mnav-btn span::before{top:-6px;left:0}
.mnav-btn span::after{top:6px;left:0}
.gnb:not([data-over="dark"]):not(.stuck) .mnav-btn{background:rgba(0,0,0,.06)}
.gnb:not([data-over="dark"]):not(.stuck) .mnav-btn span,
.gnb:not([data-over="dark"]):not(.stuck) .mnav-btn span::before,
.gnb:not([data-over="dark"]):not(.stuck) .mnav-btn span::after{background:var(--gray-900)}
.gnb.menu-open .mnav-btn span{background:transparent}
.gnb.menu-open .mnav-btn span::before{transform:translateY(6px) rotate(45deg)}
.gnb.menu-open .mnav-btn span::after{transform:translateY(-6px) rotate(-45deg)}

.mnav{display:none;pointer-events:auto;margin:10px auto 0;max-width:var(--maxw);padding:10px;border-radius:var(--r4);
  background:rgba(26,28,32,.96);backdrop-filter:blur(18px);box-shadow:0 16px 40px -16px rgba(19,26,27,.6)}
.mnav a{display:block;padding:14px 16px;border-radius:var(--r2_5);font-size:1.0625rem;font-weight:600;color:rgba(255,255,255,.85)}
.mnav a:active{background:rgba(255,255,255,.12)}
.mnav a.on{color:var(--carrot-500)}
@media (max-width:860px){
  /* 오른쪽 끝으로 붙입니다. 숨어 있는 견적 버튼이 자리를 밀어주지 못하기 때문입니다 */
  .mnav-btn{display:block;margin-left:auto}
  .gnb.menu-open .mnav{display:block}
  .gnb .btn-sm{display:none}          /* 좁은 화면에선 메뉴 안의 항목으로 대신 */
}

/* ── 같은 행사 사진 묶음 ───────────────────────────── */
.gitem .gcount{position:absolute;top:12px;right:12px;height:28px;padding:0 11px;border-radius:var(--rfull);
  background:rgba(10,12,14,.62);backdrop-filter:blur(6px);color:#fff;font-size:0.8125rem;font-weight:700;
  display:inline-flex;align-items:center;z-index:1}

/* 크게보기에서 앞뒤로 넘기기 */
.lightbox .lstage{position:relative}
.lnav{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:80px;border:0;
  background:transparent;color:rgba(255,255,255,.7);font-size:2.75rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:color .15s ease,transform .15s ease}
.lnav:hover{color:#fff}
.lprev{left:-76px}
.lnext{right:-76px}
.lprev:hover{transform:translateY(-50%) translateX(-3px)}
.lnext:hover{transform:translateY(-50%) translateX(3px)}
.lightbox .lnum{margin-left:10px;color:var(--gray-600);font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .lightbox{padding:20px 52px}
  .lnav{width:44px;font-size:2.25rem}
  .lprev{left:-50px}
  .lnext{right:-50px}
}
@media (max-width:600px){
  .lightbox{padding:16px 12px}
  .lnav{width:40px;height:64px;font-size:2rem;color:rgba(255,255,255,.85);
    text-shadow:0 2px 10px rgba(0,0,0,.6)}
  .lprev{left:0}
  .lnext{right:0}
}

/* ── 연간 이용권 ───────────────────────────────────── */
.ycard{background:var(--surface);border:2px solid var(--carrot-600);border-radius:var(--r4);overflow:hidden}
.yhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:24px 26px;background:var(--carrot-100)}
.ycode{display:block;font-size:0.75rem;font-weight:700;color:var(--carrot-700);letter-spacing:.06em}
.yhead b{font-size:1.5rem;letter-spacing:-.03em;color:var(--gray-1000)}
.yprice{font-size:2.125rem;font-weight:700;letter-spacing:-.04em;color:var(--primary);font-variant-numeric:tabular-nums}
.yprice span{font-size:0.9375rem;font-weight:600;color:var(--fg-neutral);margin-left:6px}
.ylist{list-style:none;margin:0;padding:22px 26px;display:flex;flex-direction:column;gap:12px}
.ylist li{position:relative;padding-left:22px;font-size:0.9375rem;line-height:1.5625rem;color:var(--gray-900);word-break:keep-all}
.ylist li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--carrot-500)}
.ylist b{font-weight:700}
.ynote{margin:0;padding:16px 26px;border-top:1px dashed var(--line-strong);background:var(--gray-100);
  font-size:0.875rem;color:var(--fg-subtle);line-height:1.375rem}
@media (max-width:640px){
  .yhead{padding:20px}
  .ylist{padding:18px 20px}
  .ynote{padding:14px 20px}
  .yprice{font-size:1.75rem}
}

/* ── 요금 탭 (단기 / 연간) ─────────────────────────── */
.ptabs{background:var(--bg);padding-bottom:0}
.ptab-head{display:flex;gap:10px;border-bottom:1px solid var(--line-strong);padding-bottom:0}
.ptab{flex:1;border:0;background:transparent;font-family:inherit;text-align:left;
  padding:18px 22px;border-radius:var(--r4) var(--r4) 0 0;position:relative;
  font-size:1.125rem;font-weight:700;letter-spacing:-.03em;color:var(--fg-subtle);
  transition:color .18s ease,background .18s ease}
.ptab small{display:block;margin-top:4px;font-size:0.875rem;font-weight:500;color:var(--gray-600)}
.ptab:hover{background:var(--gray-200);color:var(--gray-900)}
.ptab.on{background:var(--surface);color:var(--gray-1000);box-shadow:0 -1px 0 var(--line-strong) inset}
.ptab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--carrot-600);
  border-radius:2px 2px 0 0}
.ptab.on small{color:var(--primary)}
@media (max-width:640px){
  .ptab{padding:14px 14px;font-size:1rem}
  .ptab small{font-size:0.8125rem}
}
.ptab-panel[hidden]{display:none!important}
/* 탭 바로 아래 첫 섹션은 위 여백을 줄입니다 */
.ptab-panel > section:first-child{padding-top:44px}

/* ── 요금 페이지 제목 (탭 위) ──────────────────────── */
.pagehead{background:var(--bg);padding-bottom:26px}
.pagehead h1{font-size:clamp(1.875rem,3.4vw,2.625rem);line-height:1.25;letter-spacing:-.035em;word-break:keep-all}
.pagehead p{margin-top:14px;font-size:1.0625rem;line-height:1.75rem;color:var(--fg-neutral);
  max-width:52em;word-break:keep-all}
.pagehead strong{font-weight:700;color:var(--gray-1000)}
@media (max-width:640px){
  .pagehead{padding-bottom:20px}
  .pagehead p{font-size:0.9375rem;line-height:1.5625rem;margin-top:10px}
}

/* ── 요금 페이지 제목 배경 사진 ─────────────────────── */
.pagehead{position:relative;overflow:hidden;background:var(--gray-1000);
  background-image:url('gallery/price-hero.jpg');background-size:cover;background-position:center 45%;
  min-height:65svh;display:flex;align-items:center;padding-bottom:48px}
.pagehead::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,12,14,.82) 0%,rgba(10,12,14,.55) 42%,rgba(10,12,14,.22) 75%,rgba(10,12,14,.35) 100%)}
@supports not (min-height:65svh){ .pagehead{min-height:65vh} }
.pagehead .wrap{position:relative;z-index:1;width:100%;flex:1 1 auto}
.pagehead h1{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.pagehead p{color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(0,0,0,.4)}
.pagehead strong{color:#fff}
@media (max-width:640px){.pagehead{background-position:center 42%;min-height:60svh}}
.ylist .ysub{display:block;margin-top:3px;color:var(--fg-neutral);font-weight:400}

/* ── 메인 히어로 (한 장짜리) ────────────────────────── */
.mainhero{position:relative;overflow:hidden;padding:0;margin:0;display:block;vertical-align:top;
  /* 화면 전체를 채웁니다 */
  min-height:100svh;display:flex;align-items:center;
  background-color:var(--gray-1000);
  background-image:url('gallery/main-hero.jpg?v=107');   /* ← 배경 사진은 여기만 바꾸면 됩니다 */
  background-size:cover;background-position:center 55%;background-repeat:no-repeat}
@supports not (min-height:100svh){ .mainhero{min-height:100vh} }
.mainhero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,10,12,.82) 0%,rgba(8,10,12,.55) 38%,rgba(8,10,12,.12) 70%,rgba(8,10,12,.30) 100%)}
/* 상단바 로고와 같은 왼쪽 선에 맞춥니다 (gnb 와 같은 1600px 기준) */
.mainhero .hero-wrap{position:relative;z-index:1;padding:96px 20px 0;max-width:1600px;
  width:100%;flex:1 1 auto;text-align:left}
.mainhero .hsub{margin-top:20px;color:#fff;font-size:clamp(1.125rem,2vw,1.625rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.4;text-shadow:0 2px 16px rgba(0,0,0,.5);word-break:keep-all}

/* 제목 위 작은 영문 한 줄 */
.mainhero .heye{color:rgba(255,255,255,.72);font-size:0.8125rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;margin-bottom:18px}
/* 제목 안 핵심 단어는 주황으로 */
.mainhero h1 em{font-style:normal;color:var(--carrot-500)}
/* 줄바꿈 자리가 화면 폭에 따라 다릅니다. bd 는 넓은 화면, bm 은 좁은 화면 */
.mainhero h1 .bm{display:none}
.mainhero h1{color:#fff;font-size:clamp(2.25rem,5.6vw,4.25rem);line-height:1.18;letter-spacing:-.04em;
  text-shadow:0 3px 24px rgba(0,0,0,.5);word-break:keep-all}
.mainhero .lede{margin-top:16px;color:rgba(255,255,255,.86);font-size:clamp(1rem,1.6vw,1.25rem);
  line-height:1.75;max-width:34em;word-break:keep-all;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.mainhero .hero-cta{margin-top:28px}
.mainhero .btn-ghost{background:rgba(255,255,255,.92);color:var(--gray-1000)}
.mainhero .btn-ghost:hover{background:#fff}
@media (max-width:640px){
  .mainhero{min-height:100svh;background-position:62% center}
  .mainhero .hero-wrap{padding:84px 20px 0}
  .mainhero .hsub{margin-top:12px}
  .mainhero .heye{font-size:0.6875rem;letter-spacing:.22em;margin-bottom:12px}
  .mainhero h1{font-size:clamp(1.875rem,8.6vw,2.25rem)}
  .mainhero h1 .bd{display:none}
  .mainhero h1 .bm{display:inline}
  .mainhero .lede{margin-top:12px}
  .mainhero .hero-cta{margin-top:24px}
  .mainhero .hero-cta .btn{flex:1 1 100%}
}

/* ── 아래에 더 있다는 신호 ─────────────────────────── */
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--rfull);
  color:rgba(255,255,255,.78);font-size:0.8125rem;font-weight:600;letter-spacing:.02em;
  transition:color .2s ease,background .2s ease}
.scrollcue:hover{color:#fff;background:rgba(255,255,255,.1)}
.scrollcue .arrow{width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);animation:cuebounce 1.8s ease-in-out infinite}
@keyframes cuebounce{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.65}
  50%{transform:rotate(45deg) translate(4px,4px);opacity:1}}
@media (max-width:640px){.scrollcue{bottom:18px;font-size:0.75rem}.scrollcue .txt{display:none}}
@media (prefers-reduced-motion:reduce){.scrollcue .arrow{animation:none}}

/* ── 핵심 세 가지 ──────────────────────────────────── */
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.keys{grid-template-columns:1fr;gap:14px}}
.key{padding:4px 0}
.key .kno{display:block;font-size:0.875rem;font-weight:700;color:var(--primary);letter-spacing:.06em;margin-bottom:12px}
.key h3{font-size:clamp(1.25rem,2vw,1.625rem);letter-spacing:-.03em;margin-bottom:10px;word-break:keep-all}
.key p{font-size:0.9375rem;line-height:1.625rem;color:var(--fg-neutral);word-break:keep-all}

.dispbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:36px;padding:20px 24px;
  background:var(--gray-1000);border-radius:var(--r4)}
.dispbar .dtitle{color:#fff;font-size:0.9375rem;font-weight:700;white-space:nowrap}
.dchips{display:flex;flex-wrap:wrap;gap:8px}
.dchips span{height:38px;padding:0 16px;border-radius:var(--rfull);background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.9);font-size:0.9375rem;font-weight:600;display:inline-flex;align-items:center}
@media (max-width:640px){
  .dispbar{padding:18px;gap:12px}
  .dchips span{height:34px;padding:0 13px;font-size:0.875rem}
}

/* ── 운영 방식 ─────────────────────────────────────── */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){.ways{grid-template-columns:1fr}}
.way{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r4);padding:26px 24px;
  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.way:hover{transform:translateY(-3px);box-shadow:0 10px 26px -16px rgba(19,26,27,.45);border-color:var(--gray-500)}
.wtag{display:inline-flex;align-items:center;align-self:flex-start;height:30px;padding:0 12px;
  border-radius:var(--rfull);background:var(--carrot-100);color:var(--carrot-800);
  font-size:0.8125rem;font-weight:700;margin-bottom:14px}
.way h3{font-size:1.1875rem;letter-spacing:-.03em;margin-bottom:10px}
.way p{font-size:0.9375rem;line-height:1.5625rem;color:var(--fg-neutral);word-break:keep-all}
.wlink{margin-top:auto;padding-top:16px;font-size:0.9375rem;font-weight:700;color:var(--primary)}
.wlink:hover{text-decoration:underline}

/* ── 핵심 (스크롤 연동) ────────────────────────────── */
.core{padding:0;background:var(--gray-1000);margin-top:-1px}
.core-grid{display:grid;grid-template-columns:6fr 4fr}
@media (max-width:900px){.core-grid{grid-template-columns:1fr}}

/* 왼쪽: 화면을 가득 채운 채 붙어 있는 사진 */
.core-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--gray-300)}
@supports not (height:100svh){ .core-stage{height:100vh} }
.core-shot{position:absolute;inset:0;margin:0;background:var(--gray-400) center/cover no-repeat;
  opacity:0;transform:scale(1.05);transition:opacity .6s ease,transform 1.1s ease}
.core-stage[data-step="1"] .s1,
.core-stage[data-step="2"] .s2,
.core-stage[data-step="3"] .s3{opacity:1;transform:scale(1)}
.core-shot .tag{position:absolute;left:0;right:0;bottom:0;padding:80px 40px 40px;color:#fff;
  font-size:1.125rem;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(180deg,transparent,rgba(10,12,14,.82))}
/* ↓ 사진을 넣을 때 이 네 줄만 바꾸면 됩니다 */
.core-shot.s1{background-image:url('core/c1.jpg?v=128')}
.core-shot.s2{background-image:url('core/c2.jpg?v=128')}
.core-shot.s3{background-image:url('core/c3.jpg?v=128')}

/* 오른쪽: 한 항목이 한 화면, 세로 가운데 정렬 */
.core-steps{padding:0;background:var(--surface)}
.core-step{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,2.5vw,48px) 0 clamp(36px,5vw,104px);margin:0;
  opacity:.3;transition:opacity .35s ease}
@supports not (min-height:100svh){ .core-step{min-height:100vh} }
.core-step.on{opacity:1}
.core-step .cno{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--rfull);
  background:var(--carrot-100);color:var(--carrot-800);font-size:0.875rem;font-weight:700;
  letter-spacing:.08em;margin-bottom:20px;align-self:flex-start}
/* 번호 옆 영문 꼬리표 */
.core-step .cno i{font-style:normal;margin-left:8px;padding-left:9px;letter-spacing:.04em;
  border-left:1px solid var(--carrot-300);color:var(--carrot-700)}
.core-step h2{font-size:clamp(1.875rem,3vw,3rem);line-height:1.25;letter-spacing:-.04em;
  margin-bottom:22px;word-break:keep-all}
/* 강조 한 줄 */
.core-step .cpoint{margin-top:18px;padding-left:16px;border-left:3px solid var(--carrot-500);
  font-size:clamp(0.9375rem,1.2vw,1.0625rem);line-height:1.6;color:var(--fg-neutral);word-break:keep-all}
.core-step .cpoint b{display:inline-block;margin-top:3px;color:var(--carrot-700);font-weight:700}
.core-step p{font-size:clamp(1.0625rem,1.35vw,1.3125rem);line-height:1.95;color:var(--gray-900);
  word-break:keep-all;max-width:24em}
.core-step .dchips{margin-top:24px}
.core-step .dchips span{height:44px;padding:0 18px;border-radius:var(--rfull);background:var(--gray-1000);
  color:#fff;font-size:0.9375rem;font-weight:600;display:inline-flex;align-items:center}

/* 항목 안에 붙는 사진 : 모바일에서만 보입니다 */
.step-img{display:none}

@media (max-width:900px){
  /* 모바일에서는 사진이 따라다니지 않고, 항목마다 사진이 하나씩 놓입니다 */
  .core-stage{display:none}
  .core-grid{grid-template-columns:1fr}
  .step-img{display:block;aspect-ratio:16/10;border-radius:var(--r4);margin-bottom:22px;
    background:var(--gray-300) center/cover no-repeat}
  .step-img.s1{background-image:url('core/c1.jpg?v=128')}
  .step-img.s2{background-image:url('core/c2.jpg?v=128')}
  .step-img.s3{background-image:url('core/c3.jpg?v=128')}
  .core{background:var(--surface)}
  .core-step{min-height:auto;padding:40px 20px;opacity:1}
  .core-step:first-child{padding-top:56px}
  .core-step:last-child{padding-bottom:56px}
  .core-step h2{font-size:1.625rem}
  .core-step p{font-size:1.0625rem}
}
@media (prefers-reduced-motion:reduce){
  .core-step{opacity:1}
  .core-shot{transition:none}
}

/* ── 구동 PC 사양 (FAQ 안) ─────────────────────────── */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
@media (max-width:760px){.specs{grid-template-columns:repeat(2,1fr)}}
.specs span{display:block;background:var(--gray-100);border:1px solid var(--line);border-radius:var(--r3);
  padding:14px 16px;font-size:0.9375rem;font-weight:600;color:var(--gray-900);line-height:1.375rem}
.specs b{display:block;font-size:0.75rem;font-weight:700;color:var(--primary);letter-spacing:.04em;margin-bottom:6px}

/* ── 자주 묻는 질문: 질문에 색을 주어 구분 ─────────── */
#faq-list summary{padding-left:58px}
#faq-list summary::before{content:"Q";position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:var(--rfull);background:var(--carrot-100);color:var(--carrot-700);
  font-size:0.8125rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,color .18s ease}
#faq-list details[open] summary{color:var(--carrot-800);background:var(--carrot-100)}
#faq-list details[open] summary::before{background:var(--carrot-600);color:#fff}
#faq-list details[open] summary::after{border-color:var(--carrot-700)}
#faq-list .a{padding-left:58px;background:var(--gray-100);padding-top:18px;border-top:1px solid var(--line)}
@media (max-width:640px){
  #faq-list summary{padding-left:48px}
  #faq-list summary::before{left:14px;width:24px;height:24px;font-size:0.75rem}
  #faq-list .a{padding-left:48px}
}

/* FAQ 분류 칩 */
.faq-filter{margin-bottom:16px}
.faq-filter:empty{display:none}

/* ── 요금표 열 정리 ────────────────────────────────── */
#rates table.simple{table-layout:fixed;width:100%}
/* 단기 요금표: 기간도 가운데로 */
#t-short td:first-child,#rates thead th:first-child{text-align:center}
#t-short td:first-child{width:20%;min-width:110px}
#t-short td .tsub{display:block;margin-top:3px}
/* 운송비표: 권역은 왼쪽, 넓게 */
#t-region td:first-child{width:38%;min-width:180px;text-align:left}
#rates table.simple th:not(:first-child),
#rates table.simple td:not(:first-child){text-align:center}
#rates table.simple td.r,#rates table.simple th.r{text-align:center}
#rates table.simple td.r b{font-size:1.0625rem}
.tsub.inline{display:inline;margin-left:10px;font-weight:400}
@media (max-width:760px){
  .tsub.inline{display:block;margin-left:0;margin-top:3px}
  #t-region td:first-child{width:34%;min-width:130px}
  #t-short td:first-child{width:24%;min-width:88px}
}

/* ── 요금표 아코디언: 제목 줄을 내용과 분리 ────────── */
#rates .faq details{border-bottom:0;margin-bottom:12px;border:1px solid var(--line-strong);
  border-radius:var(--r4);overflow:hidden;background:var(--surface)}
#rates .faq{background:transparent;border:0;border-radius:0;overflow:visible}
#rates summary{background:var(--surface);border-bottom:1px solid var(--line);
  font-size:1.0625rem;padding:18px 22px}
#rates summary::after{right:22px}
#rates details[open] summary{background:var(--surface);color:var(--gray-1000)}
#rates details[open]{border-color:var(--gray-500)}
#rates details[open] summary::after{border-color:var(--gray-700)}
#rates .tlead{background:var(--gray-100);color:var(--fg-neutral);border-bottom:1px solid var(--line)}
#rates .tlead b{color:var(--gray-1000);border-bottom:0}
#rates thead th{background:var(--surface)}

@media (max-width:600px){
  .usecard{min-height:230px;background-position:right -30px center}
  .usecard::before{background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 46%,rgba(255,255,255,.5) 78%,rgba(255,255,255,.15) 100%)}
  .usecard p{max-width:none}
}

/* ── 스크린 크기 비교 ──────────────────────────────── */
/* 사람과 화면 두 대를 같은 축척으로 놓습니다. 자리와 크기는 size.js 가 % 로 계산합니다 */
.sizebox{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r5);padding:24px}

/* --szh: 그림의 최대 높이. 화면이 좁아지면 가로 폭에 맞춰 알아서 줄어듭니다 */
.sz-wrap{position:relative;--szh:min(54svh,470px)}
@supports not (height:1svh){ .sz-wrap{--szh:470px} }

.szc-stage{position:relative;margin:0 auto 58px}
.szc-floor{position:absolute;left:2%;right:2%;bottom:0;height:1px;background:var(--line-strong)}

.szc-item{position:absolute;bottom:0;display:flex;align-items:flex-end;justify-content:center}
.szc-item img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom}

/* 화면 위쪽 가로 치수선 */
.szc-top{position:absolute;left:0;right:0;bottom:calc(100% + 10px);
  display:flex;align-items:center;gap:8px}
.szc-top i{flex:1;height:1px;background:var(--carrot-300)}
.szc-top b{font-size:0.75rem;font-weight:700;color:var(--carrot-700);white-space:nowrap}

/* 화면 안쪽 세로 치수선. 옆에 두면 옆 화면과 겹쳐서 안으로 넣었습니다 */
.szc-side{position:absolute;left:6%;top:3%;bottom:6%;
  border-left:1px solid rgba(255,255,255,.5)}
.szc-side::before,.szc-side::after{content:"";position:absolute;left:-4px;width:9px;height:1px;
  background:rgba(255,255,255,.5)}
.szc-side::before{top:0}
.szc-side::after{bottom:0}
.szc-side b{position:absolute;left:10px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:0.75rem;font-weight:700;color:rgba(255,255,255,.92)}

/* 바닥선 아래 이름 */
.szc-cap{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:12px;
  text-align:center;font-size:0.9375rem;font-weight:700;color:var(--fg);white-space:nowrap}

.szc-note{margin-top:16px;font-size:0.75rem;line-height:1.25rem;color:var(--fg-subtle);word-break:keep-all}

@media (max-width:760px){
  .sizebox{padding:18px}
  .sz-wrap{--szh:min(46svh,380px)}
  .szc-stage{margin-bottom:38px}
  .szc-top b{font-size:0.6875rem}
  .szc-cap{font-size:0.75rem;margin-top:9px}
  /* 사람 이름표가 옆 이름표와 겹치지 않게 짧게 줄입니다 */
  .szc-me .szc-cap{left:0;transform:none;text-align:left}
  .szc-long{display:none}
  .szc-side b{left:7px;font-size:0.625rem}
}

/* ── 이런 고민, 하고 계신가요 ──────────────────────── */
/* 나타나기 전의 글자가 1.5배로 커져 있어 좌우로 삐져나갑니다.
   clip 은 스크롤 상자를 만들지 않아 안쪽 sticky 가 그대로 동작합니다 */
.worry{background:var(--gray-1000);padding:0;text-align:center;margin-bottom:-1px;overflow-x:clip}
/* C. 스크롤이 진행될수록(--wp 가 0 → 1) 주황빛이 번집니다. motion.js 가 값을 넣습니다 */
.worry-sticky::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 116%, rgba(255,106,0,.42) 0%, rgba(255,106,0,0) 62%),
    radial-gradient(80% 60% at 50% 100%, rgba(255,138,46,.28) 0%, rgba(255,138,46,0) 70%);
  opacity:calc(var(--wp, 0) * 0.9);transition:opacity .25s linear}
.worry-track{position:relative;height:520svh;background:var(--gray-1000)}
@supports not (height:520svh){ .worry-track{height:520vh} }
.worry-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate}
/* 상단바에 제목이 가리지 않게 위쪽을 비워둡니다 */
.worry-sticky .wrap{position:relative;z-index:1;padding-top:clamp(56px,7vh,84px)}
@supports not (height:100svh){ .worry-sticky{height:100vh} }
.worry .wrap{width:100%}
/* 스크롤에 맞춰 한 줄씩, 크게 나타났다가 제자리로 */
.worry [data-w]{opacity:0;transform-origin:center;transform:scale(1.5) translateY(16px);
  transition:opacity .6s ease,transform 1.15s cubic-bezier(.16,.84,.28,1)}
.worry [data-w].on{opacity:1;transform:scale(1) translateY(0)}
/* 제목. --wi 가 1이면 화면 한가운데에서 크게, 0이면 제자리로 돌아옵니다 */
.whead{margin-bottom:clamp(20px,3vh,34px);
  transform:translateY(calc(var(--wi, 1) * var(--wshift, 0px))) scale(calc(1 + var(--wi, 1) * 0.42));
  transform-origin:center center;will-change:transform}
.wh2{color:#fff;font-size:clamp(1.625rem,min(3.4vw,4.6vh),2.5rem);font-weight:800;letter-spacing:-.045em;
  line-height:1.2;word-break:keep-all}
.wh2 em{font-style:normal;color:var(--carrot-500)}
/* 좁은 화면에서만 「고민」 뒤에서 줄을 나눕니다 */
.wbr{display:none}

/* 카드와 답. 도입 구간에서는 보이지 않습니다 */
/* 제목이 제자리로 거의 돌아온 뒤에야 나타납니다. 겹쳐 보이지 않게 */
.wbody{opacity:clamp(0, calc(1 - var(--wi, 1) * 2.6), 1);
  transform:translateY(calc(var(--wi, 1) * 24px));will-change:opacity,transform}

/* 고민 카드 넷 */
.wcards{list-style:none;margin:0 auto;padding:0;max-width:1000px;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vh,18px);text-align:left}
.wcard{position:relative;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r5);padding:clamp(20px,2.8vh,32px) clamp(22px,2.4vw,32px)}
.wno{display:block;color:rgba(255,255,255,.3);font-size:0.8125rem;font-weight:800;
  letter-spacing:.08em;font-variant-numeric:tabular-nums;margin-bottom:14px;
  transition:color .5s ease}
.wcard h3{color:#fff;font-size:clamp(1.25rem,1.9vw,1.625rem);font-weight:700;letter-spacing:-.035em;
  line-height:1.35;word-break:keep-all}
.wcard h3 em{font-style:normal;color:var(--carrot-500)}
.wcard p{margin-top:12px;color:rgba(255,255,255,.55);font-size:clamp(0.875rem,1.1vw,1rem);
  line-height:1.6;word-break:keep-all}

/* A. 지금 켜진 카드만 밝게. 나머지는 뒤로 가라앉습니다 */
.worry .wcard[data-w]{opacity:.28;transform:scale(.97) translateY(10px);
  transition:opacity .55s ease,transform .7s cubic-bezier(.16,.84,.28,1),
             background .55s ease,border-color .55s ease}
.worry .wcard[data-w].on{opacity:1;transform:none;
  background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.16)}
.worry .wcard[data-w].on .wno{color:var(--carrot-500)}

/* 마지막 구간에서는 제목과 고민 카드가 사라집니다 */
/* 답이 올라오기 전에 먼저 비켜줍니다 */
.whead{opacity:clamp(0, calc(1 - var(--wf, 0) * 2.4), 1)}
.wcards{opacity:clamp(0, calc(1 - var(--wf, 0) * 2.4), 1);
  transform:translateY(calc(var(--wf, 0) * -18px));will-change:opacity,transform}

/* 답 */
.wanswer{margin-top:clamp(22px,3.4vh,42px)}
/* --wf 가 1이면 화면 한가운데로 올라와 커집니다 */
.worry .wanswer[data-w]{
  transform:translateY(calc(var(--wf, 0) * -1 * var(--wshift2, 0px)))
            scale(calc(1 + var(--wf, 0) * 0.34));
  transform-origin:center center;will-change:transform}
/* 고민 카드 네 장이 다 나온 뒤에야 모습을 드러냅니다 */
.worry .wanswer[data-w]:not(.on){opacity:0}
.weye{color:var(--carrot-500);font-size:0.75rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase}
.wans-h{margin-top:10px;color:#fff;font-weight:800;letter-spacing:-.045em;
  font-size:clamp(1.75rem,min(4vw,5.4vh),3rem);line-height:1.18;word-break:keep-all}
.wans-h span{color:var(--carrot-500)}
.wans-s{margin-top:12px;color:rgba(255,255,255,.72);font-size:clamp(0.9375rem,1.3vw,1.125rem);
  font-weight:500;word-break:keep-all}
.wans-s b{color:#fff;font-weight:800}
@media (max-width:640px){
  .worry-track{height:440svh}
  .worry-sticky{height:100svh}
  /* 상단바 아래로 내려 제목이 가려지지 않게 합니다 */
  .worry-sticky .wrap{padding-top:68px}
  .whead{margin-bottom:16px}
  .wbr{display:inline}
  .wcards{grid-template-columns:1fr;gap:7px}
  .wcard{padding:10px 15px;border-radius:var(--r4)}
  .wno{font-size:0.6875rem;margin-bottom:5px}
  .wcard h3{font-size:0.9375rem;line-height:1.4}
  .wcard h3 br{display:none}
  .wcard p{margin-top:4px;font-size:0.75rem;line-height:1.45}
  .wanswer{margin-top:13px}
  .weye{font-size:0.625rem}
  .wans-h{margin-top:7px;font-size:1.3125rem}
  .wans-s{margin-top:5px;font-size:0.75rem}
}
/* 세로가 짧은 데스크톱 창에서는 카드 설명과 여백을 줄여 한 화면에 맞춥니다 */
@media (min-width:641px) and (max-height:820px){
  .worry-sticky .wrap{padding-top:60px}
  .wcard{padding:16px 22px}
  .wcard h3{font-size:1.125rem}
  .wcard p{margin-top:7px;font-size:0.875rem}
  .wno{margin-bottom:9px}
  .wanswer{margin-top:20px}
  .wans-h{font-size:1.875rem}
  .wans-s{margin-top:8px;font-size:0.9375rem}
}

/* 폰에서는 화면을 붙잡아 두는 연출을 쓰지 않습니다.
   좁은 화면에 다 담기지도 않고, 손가락 스크롤과도 잘 맞지 않습니다.
   대신 화면에 들어오는 순서대로 하나씩 나타납니다 (motion.js) */
@media (max-width:640px){
  .worry-track{height:auto}
  .worry-sticky{position:static;height:auto;padding:80px 0 56px}
  .worry-sticky .wrap{padding-top:0}
  .whead{transform:none;opacity:1}
  .wbody{opacity:1;transform:none}
  .wcards{opacity:1;transform:none}
  .worry .wanswer[data-w]{transform:none}
  .worry .wanswer[data-w]:not(.on){opacity:.28;transform:scale(.97) translateY(10px)}
}
@media (prefers-reduced-motion:reduce){
  .worry [data-w]{opacity:1;transform:none;transition:none}
}

/* 게임 카드 사진 (자리표시자 배지 없음) */
.ccard .gshot{aspect-ratio:16/9;background:var(--gray-200) center/cover no-repeat;display:block}

/* ── 게임 소개 페이지 (games/*.html) ────────────────── */
/* 카드가 링크가 되면 「자세히 보기」가 붙습니다 */
/* 태그와 「자세히 보기」를 한 줄에. 「자세히 보기」는 오른쪽에 조용히 */
.cfoot{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:13px}
.cfoot .tagrow{margin-top:0;padding-top:0;min-width:0}
.cmore{flex:none;white-space:nowrap;color:var(--fg-subtle);
  font-size:0.875rem;font-weight:500;transition:color .15s ease}
a.ccard:hover .cmore{color:var(--gray-900)}
/* 좁아지면 태그가 두 줄로 접히고 「자세히 보기」는 오른쪽 위에 남습니다 */
.cmore{padding-top:4px}

/* 제목 영역 : 대표 사진 위에 글이 얹힙니다 */
.gphead{position:relative;overflow:hidden;background:var(--gray-1000);
  background-size:cover;background-position:center 50%;background-repeat:no-repeat;
  min-height:56svh;display:flex;align-items:flex-end;padding:120px 0 44px}
@supports not (min-height:56svh){ .gphead{min-height:56vh} }
.gphead.noimg{background-image:linear-gradient(140deg,var(--gray-900),var(--gray-1000))}
.gphead::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,14,.55) 0%,rgba(10,12,14,.25) 34%,rgba(10,12,14,.86) 100%)}
.gphead .wrap{position:relative;z-index:1;width:100%}
.gback{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;
  border-radius:var(--rfull);background:rgba(255,255,255,.16);color:#fff;
  font-size:0.8125rem;font-weight:700;backdrop-filter:blur(6px);margin-bottom:16px}
.gback::before{content:"";width:6px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg);margin-right:1px}
.gback:hover{background:rgba(255,255,255,.28)}
.gphead h1{color:#fff;font-size:clamp(1.875rem,4.4vw,3.25rem);line-height:1.2;letter-spacing:-.04em;
  text-shadow:0 3px 24px rgba(0,0,0,.5);word-break:keep-all}
.glede{margin-top:14px;color:rgba(255,255,255,.9);font-size:clamp(1rem,1.5vw,1.1875rem);
  line-height:1.75;max-width:38em;word-break:keep-all;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.gptags{margin-top:20px}
.gptags .tag2{background:rgba(255,255,255,.18);color:#fff}
.gptags .tag2.on{background:var(--carrot-600);color:#fff}

/* 스펙 띠 */
.gspecs-wrap{background:var(--surface);border-bottom:1px solid var(--line)}
.gspecs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0}
.gspecs > div{padding:24px 0;border-left:1px solid var(--line)}
.gspecs > div:first-child{border-left:0;padding-left:0}
.gspecs > div:not(:first-child){padding-left:26px}
.gspecs dt{color:var(--fg-subtle);font-size:0.8125rem;font-weight:700;letter-spacing:.02em}
.gspecs dd{margin:6px 0 0;font-size:1.125rem;font-weight:700;letter-spacing:-.02em;word-break:keep-all}
@media (max-width:640px){
  .gspecs{grid-template-columns:1fr}
  .gspecs > div{border-left:0;border-top:1px solid var(--line);padding:16px 0}
  .gspecs > div:first-child{border-top:0;padding-top:20px}
  .gspecs > div:not(:first-child){padding-left:0}
  .gspecs dd{font-size:1rem}
}

/* 본문 : 한 줄이 너무 길지 않게 잡습니다 */
/* 배경은 나누지 않고 흰색 하나로 갑니다 */
.gsec{padding:56px 0;background:var(--surface);border:0}
.gsec + .gsec{padding-top:0}
.gsec:last-of-type{padding-bottom:64px}
/* 본문도 상단바·제목과 같은 왼쪽 선에 맞춥니다 */
.gwrap{max-width:var(--maxw)}
.gh2{font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.35;letter-spacing:-.03em;margin-bottom:20px}
.gdetail{max-width:46em}
.gdetail p{font-size:1.0625rem;line-height:1.95;color:var(--gray-900);word-break:keep-all}
.gdetail p + p{margin-top:1.25em}
.gdetail strong{font-weight:700;color:var(--fg)}

/* 영상 */
.gvideo{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--gray-1000)}
.gvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 사진 : 한 줄에 한 장, 가로 폭을 다 씁니다 */
.gshots{display:flex;flex-direction:column;gap:24px}
.gshots figure{margin:0;overflow:hidden;background:var(--gray-200);border:1px solid var(--line)}
.gshots img{display:block;width:100%;height:auto}
@media (max-width:640px){ .gshots{gap:14px} }

/* 견적 안내 */
.gcta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:30px 32px;border-radius:var(--r5);background:var(--carrot-100);
  border:1px solid var(--carrot-200)}
.gcta h2{font-size:1.375rem;letter-spacing:-.03em;word-break:keep-all}
.gcta p{margin-top:7px;color:var(--gray-900);font-size:0.9375rem;line-height:1.5rem;word-break:keep-all}
.gcta-btns{display:flex;gap:10px;flex-wrap:wrap}
.gcta .btn-ghost{background:var(--surface);color:var(--gray-900)}
@media (max-width:640px){
  .gcta{padding:24px 20px}
  .gcta-btns{width:100%}
  .gcta-btns .btn{flex:1 1 100%}
}

/* 다른 콘텐츠 : 배경색으로 본문과 구분합니다 */
.gsec.gothers-sec{background:var(--bg);border-top:1px solid var(--line);padding-top:56px}

/* 사진이 붙은 한 줄짜리 목록 */
.gothers{display:flex;flex-direction:column;gap:8px;max-width:820px}
.gother{display:flex;align-items:center;gap:16px;padding:10px 18px 10px 10px;
  border:1px solid var(--line-strong);border-radius:var(--r3);background:var(--surface);
  transition:border-color .18s ease,background .18s ease}
.gother:hover{border-color:var(--carrot-500);background:var(--carrot-100)}
.gothumb{flex:none;width:112px;aspect-ratio:16/10;border-radius:var(--r2_5);
  background:var(--gray-200) center/cover no-repeat}
.gotext{flex:1 1 auto;min-width:0}
.gother b{display:block;font-size:1rem;font-weight:700;letter-spacing:-.02em}
.gotext > span{display:block;margin-top:3px;color:var(--fg-neutral);font-size:0.875rem;
  line-height:1.375rem;word-break:keep-all}
.gother::after{content:"";flex:none;width:8px;height:8px;margin-left:4px;
  border-top:2px solid var(--gray-600);border-right:2px solid var(--gray-600);
  transform:rotate(45deg);transition:border-color .18s ease}
.gother:hover::after{border-color:var(--carrot-600)}
@media (max-width:640px){
  .gother{gap:12px;padding:8px 14px 8px 8px}
  .gothumb{width:84px}
  .gotext > span{font-size:0.8125rem;line-height:1.25rem}
}

/* ── 맨 위로 버튼 (motion.js 가 만듭니다) ───────────── */
.totop{position:fixed;right:20px;bottom:24px;z-index:70;width:44px;height:44px;border-radius:var(--rfull);
  border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,background .15s ease}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop span{width:10px;height:10px;border-left:2px solid var(--gray-900);border-top:2px solid var(--gray-900);
  transform:rotate(45deg);margin-top:4px}
.totop:hover{background:var(--gray-100)}
.totop:focus-visible{outline:2px solid var(--carrot-600);outline-offset:2px}
/* 모바일에서는 아래 고정 바 위에 얹습니다 */
@media (max-width:760px){
  .totop{right:14px;bottom:calc(88px + env(safe-area-inset-bottom));width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){ .totop{transition:none} }

/* ── 섹션 바로가기 (상단바 안) ─────────────────────── */
/* 바를 하나만 두려고 상단바 안에 넣었습니다.
   히어로를 지나면 왼쪽의 기본 메뉴 옆으로 슬며시 들어옵니다 */
.secnav{display:flex;align-items:center;gap:2px;overflow:hidden;
  max-width:0;opacity:0;margin-left:0;
  transition:max-width .45s cubic-bezier(.4,0,.2,1),opacity .25s ease,margin-left .45s cubic-bezier(.4,0,.2,1)}
.secnav.on{max-width:420px;opacity:1;margin-left:10px;padding-left:10px;
  border-left:1px solid rgba(255,255,255,.16)}
.secnav a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--rfull);
  font-size:0.875rem;font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  color:rgba(255,255,255,.7);transition:color .15s ease,background .15s ease}
.secnav a:hover{color:#fff;background:rgba(255,255,255,.12)}
.secnav a.here{color:var(--gray-1000);background:#fff}
/* 상단바가 아직 투명할 때(히어로 위)는 글자에 그림자를 줍니다 */
.gnb:not(.stuck) .secnav a{text-shadow:0 1px 6px rgba(0,0,0,.4)}
.gnb:not(.stuck) .secnav.on{border-left-color:rgba(255,255,255,.3)}
/* 좁은 화면에서는 기본 메뉴부터 숨으므로 함께 숨깁니다 */
@media (max-width:1100px){ .secnav{display:none} }

/* ── 가로로 넘기는 콘텐츠 카드 ─────────────────────── */
.railwrap{position:relative}
.crail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  padding:4px 4px 10px;margin:-4px -4px -10px}
.crail::-webkit-scrollbar{display:none}
.crail > .ccard{flex:0 0 calc((100% - 32px) / 3);scroll-snap-align:start}
@media (max-width:1000px){ .crail > .ccard{flex-basis:calc((100% - 16px) / 2)} }
@media (max-width:640px){
  .crail{gap:12px}
  /* 다음 카드가 살짝 보이게 남겨 둡니다 */
  .crail > .ccard{flex-basis:86%}
}

/* 줄이 화면 밖으로 나가도 가로 스크롤이 생기지 않게 잘라 둡니다 */
#games{overflow-x:clip}

/* 줄 아래 넘기는 단추. 가운데에 둥근 단추 두 개 */
.railctl{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:26px}
.railbtns{display:flex;gap:10px}
.railbtn{position:relative;width:38px;height:38px;border-radius:var(--rfull);
  border:0;background:var(--gray-200);cursor:pointer;transition:background .15s ease}
.railbtn::before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;
  border-top:2px solid var(--gray-800);border-right:2px solid var(--gray-800)}
.railbtn.prev::before{transform:translate(-30%,-50%) rotate(-135deg)}
.railbtn.next::before{transform:translate(-70%,-50%) rotate(45deg)}
.railbtn:hover{background:var(--gray-300)}
.railbtn:focus-visible{outline:2px solid var(--carrot-600);outline-offset:2px}
@media (max-width:640px){
  .railbtns{display:none}
  .railctl{margin-top:0}
}

/* ── 한 화면을 꽉 채우는 섹션 ──────────────────────── */
/* min-height 라서 내용이 더 길면 알아서 늘어납니다. 잘리지 않습니다.
   상단바에 제목이 가리지 않도록 위쪽을 조금 더 비워 둡니다.
   「행사 현장」은 사진 수에 따라 길이가 달라져서 제외했습니다 */
@media (min-width:901px){
  .fullsec{min-height:100svh;display:flex;align-items:center;
    padding-top:104px;padding-bottom:56px}
  .fullsec > .wrap{width:100%}
}
@supports not (height:100svh){
  @media (min-width:901px){ .fullsec{min-height:100vh} }
}

/* ── 한 화면 섹션은 좌우도 넓게 씁니다 ────────────────
   사진 비율은 그대로 두고 카드 자체를 키웁니다.
   세로로만 늘리면 16:9 게임 화면이 위아래로 잘립니다 */
@media (min-width:901px){
  /* 메인은 모든 구역이 같은 왼쪽 선에서 시작합니다.
     요금 안내 페이지(.home 없음)는 예전 폭 그대로입니다 */
  .home .wrap{max-width:min(1720px, 94vw)}
  .fullsec > .wrap{max-width:min(1720px, 94vw)}
  /* 활용 카드: 두 줄이라 한 줄당 높이를 조금 키웁니다 */
  #uses .usecard{min-height:clamp(250px, calc(34vh - 20px), 360px)}

  /* 게임 카드: 줄이 화면 끝까지 이어지고 다음 카드가 오른쪽에 걸쳐 보입니다.
     첫 카드는 본문 왼쪽 선에 맞고, 사진 비율은 16:9 그대로입니다 */
  /* 본문 가장자리에서 화면 끝까지의 거리.
     scroll-padding 은 %를 쓰면 기준이 달라져서 vw 로 직접 계산합니다 */
  #games{--gut:calc((100vw - min(1720px, 94vw) + 40px) / 2)}
  #games .crail{
    /* 줄이 양옆으로 화면 끝까지 이어집니다. 지나간 카드는 왼쪽에 걸쳐 보입니다 */
    margin-left:calc(-1 * var(--gut));
    margin-right:calc(-1 * var(--gut));
    padding-left:var(--gut);
    padding-right:var(--gut);
    scroll-padding-left:var(--gut);
  }
  #games .crail > .ccard{flex-basis:calc((100% - 32px) / 2.2)}
}

/* ── NEW · 출시예정 딱지 ───────────────────────────── */
.cshotwrap{position:relative;display:block}
.cbadge{position:absolute;top:12px;left:12px;z-index:1;
  display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--rfull);
  background:var(--carrot-600);color:#fff;font-size:0.75rem;font-weight:800;letter-spacing:.02em;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.35)}
.cbadge.soon{background:var(--gray-1000);color:rgba(255,255,255,.92)}

/* 소개 페이지 제목 옆 */
.gbadge{display:inline-flex;align-items:center;vertical-align:middle;margin-left:12px;
  height:30px;padding:0 13px;border-radius:var(--rfull);
  background:var(--carrot-600);color:#fff;font-size:0.8125rem;font-weight:800;letter-spacing:.02em}
.gbadge.soon{background:rgba(255,255,255,.22);color:#fff}
@media (max-width:640px){
  .cbadge{top:9px;left:9px;height:23px;padding:0 9px;font-size:0.6875rem}
  .gbadge{height:25px;padding:0 10px;font-size:0.75rem;margin-left:8px}
}

/* ── 본문 글자를 한 단계 키웁니다 ─────────────────── */
.usecard p{font-size:1rem;line-height:1.6}
.usecard h3{font-size:1.25rem}
.ccard h4{font-size:1.1875rem}
.ccard .cbody p{font-size:1rem;line-height:1.65}
.plan .desc{font-size:1rem;line-height:1.6}
.plan li{font-size:1rem}
.contact .lede,.contact p{font-size:1.0625rem}
@media (max-width:640px){
  .usecard p,.ccard .cbody p,.plan .desc{font-size:0.9375rem}
  .usecard h3{font-size:1.125rem}
  .ccard h4{font-size:1.0625rem}
}

/* ── 계산기 콘텐츠 미리보기 ────────────────────────── */
.cpre{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px;
  background:var(--gray-100);border-radius:var(--r3)}
.cpre-img{flex:none;width:128px;aspect-ratio:16/9;border-radius:var(--r2_5);
  background:var(--gray-300) center/cover no-repeat}
.cpre-img.empty{background:repeating-linear-gradient(45deg,var(--gray-200),var(--gray-200) 6px,
  var(--gray-300) 6px,var(--gray-300) 12px)}
.cpre-txt{min-width:0}
.cpre-txt b{display:block;font-size:1rem;font-weight:700;letter-spacing:-.02em}
.cpre-txt span{display:block;margin-top:4px;color:var(--fg-neutral);font-size:0.9375rem;
  line-height:1.45;word-break:keep-all}
@media (max-width:640px){
  .cpre{gap:10px;padding:10px}
  .cpre-img{width:92px}
  .cpre-txt b{font-size:0.9375rem}
  .cpre-txt span{font-size:0.8125rem}
}