/* ================================================================
   지붕박사 Dr. ROOF — Design Tokens & Global Styles
   ================================================================ */
:root {
  /* Brand — Trust Blue */
  --c-pri-50:#EBF4FF; --c-pri-100:#C3DAFE; --c-pri-300:#7F9CF5;
  --c-pri-500:#2563EB; --c-pri-600:#1D4ED8; --c-pri-700:#1E40AF; --c-pri-900:#1E3A8A;
  /* Accent — Sun Orange */
  --c-acc-50:#FFF7ED; --c-acc-300:#FDBA74; --c-acc-500:#F59E0B; --c-acc-600:#EA580C; --c-acc-700:#C2410C;
  /* Eco Green */
  --c-eco-50:#F0FDF4; --c-eco-500:#16A34A; --c-eco-700:#15803D;
  /* Trust beige */
  --c-trust-50:#FAF8F5; --c-trust-200:#E7DDC9; --c-trust-700:#8B6F47;
  /* Neutral */
  --c-bg:#FFFFFF; --c-bg-soft:#F8FAFC; --c-bg-alt:#F1F5F9;
  --c-text:#0F172A; --c-text-soft:#475569; --c-text-mute:#94A3B8;
  --c-border:#E2E8F0; --c-divider:#F1F5F9;
  /* Semantic */
  --c-success:#16A34A; --c-warning:#F59E0B; --c-danger:#DC2626; --c-info:#0EA5E9;

  /* Type */
  --font-sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;

  /* Radii */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;

  /* Shadows */
  --sh-sm:0 1px 2px rgba(15,23,42,.04);
  --sh-md:0 4px 12px rgba(15,23,42,.08);
  --sh-lg:0 12px 28px rgba(15,23,42,.12);
  --sh-cta:0 10px 24px rgba(245,158,11,.35);

  /* Layout */
  --container:1200px;
  --header-h:64px;
}
@media (min-width: 1024px){ :root{ --header-h:80px; } }

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss03","ss05";
}
img,svg,video{display:block;max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer;border:0;background:none;padding:0;color:inherit}
a{color:inherit;text-decoration:none}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* Hide scrollbar on horizontal scrollers but keep functionality */
.scroll-x{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.scroll-x::-webkit-scrollbar{display:none}

/* Layout helpers */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}
@media (min-width:1024px){ .container{padding:0 32px} }

/* Typography */
.eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-acc-600);
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--c-acc-500);border-radius:2px}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.h-display{font-size:clamp(34px, 6vw, 64px); font-weight:800; line-height:1.08; letter-spacing:-.03em}
.h-section{font-size:clamp(28px, 4vw, 44px); font-weight:800; line-height:1.18; letter-spacing:-.025em}
.h-card{font-size:20px; font-weight:700}
@media (min-width:1024px){ .h-card{font-size:22px} }
.text-lead{font-size:clamp(16px,1.6vw,19px); color:var(--c-text-soft); line-height:1.6; text-wrap:pretty}
.text-soft{color:var(--c-text-soft)}
.text-mute{color:var(--c-text-mute)}
.num-xl{font-family:var(--font-sans); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.04em;
  font-size:clamp(40px,6vw,60px); line-height:1; color:var(--c-pri-700)}

/* ============== Header / Nav ============== */
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--c-border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); gap:24px;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--c-pri-700)}
.logo-mark{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--c-pri-600) 0%,var(--c-pri-500) 60%,var(--c-acc-500) 100%);
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px;
  box-shadow:0 4px 10px rgba(37,99,235,.25);
  flex-shrink:0;
}
.logo-name{display:flex; flex-direction:column; line-height:1.1}
.logo-name b{font-size:18px}
.logo-name span{font-size:11px; font-weight:600; color:var(--c-text-mute); letter-spacing:.04em}
.nav{display:none; gap:32px; align-items:center}
.nav a{font-weight:600; font-size:15px; color:var(--c-text); padding:8px 4px; position:relative}
.nav a:hover{color:var(--c-pri-600)}
.nav a[data-active="true"]{color:var(--c-pri-700)}
.nav a[data-active="true"]::after{
  content:""; position:absolute; left:4px; right:4px; bottom:0; height:3px;
  background:var(--c-acc-500); border-radius:2px;
}
.drawer a[data-active="true"]{color:var(--c-pri-700)}
.header-cta{display:none; align-items:center; gap:12px}
.header-phone{display:flex; align-items:center; gap:6px; font-weight:700; color:var(--c-text); font-size:15px}
.header-phone b{color:var(--c-pri-700); font-size:17px; font-variant-numeric:tabular-nums}
.menu-btn{
  width:44px; height:44px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--c-bg-alt);
}
/* 데스크탑: nav/CTA 노출, 햄버거 숨김.
   (원본 styles.css는 .menu-btn 기본 규칙이 이 미디어쿼리 뒤에 있어 display:none이 덮어써지는 순서 버그가 있었음 → 순서 교정) */
@media (min-width:1024px){
  .nav, .header-cta{display:flex}
  .menu-btn{display:none}
}

/* ============== Buttons ============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:16px; line-height:1;
  padding:14px 20px; border-radius:12px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-lg{padding:18px 26px; font-size:17px; border-radius:14px}
.btn-primary{
  background:var(--c-acc-500); color:#fff;
  box-shadow:var(--sh-cta);
}
.btn-primary:hover{background:var(--c-acc-600); transform:translateY(-1px); box-shadow:0 14px 30px rgba(245,158,11,.45)}
.btn-secondary{background:var(--c-pri-600); color:#fff}
.btn-secondary:hover{background:var(--c-pri-700); transform:translateY(-1px)}
.btn-ghost{background:#fff; color:var(--c-text); border:1.5px solid var(--c-border)}
.btn-ghost:hover{border-color:var(--c-pri-500); color:var(--c-pri-700)}
.btn-line{background:transparent; color:var(--c-pri-700); border:1.5px solid var(--c-pri-500)}
.btn-line:hover{background:var(--c-pri-50)}

.kakao-btn{background:#FEE500; color:#191600}
.kakao-btn:hover{background:#FFD600}

/* ============== Page Hero (interior pages) ============== */
.page-hero{
  position:relative; overflow:hidden;
  background:#0F172A center/cover no-repeat;
  color:#fff;
}
.page-hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,23,42,.7) 0%, rgba(15,23,42,.85) 100%),
    radial-gradient(80% 60% at 0% 0%, rgba(37,99,235,.4) 0%, transparent 70%);
}
.page-hero-inner{
  position:relative; z-index:1;
  padding-top:72px; padding-bottom:80px;
}
@media (min-width:1024px){
  .page-hero-inner{padding-top:120px; padding-bottom:120px}
}

/* ============== Hero ============== */
.hero{
  position:relative; overflow:hidden;
  background:#0F172A;
  color:#fff;
}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 60%}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.45) 40%, rgba(15,23,42,.8) 100%),
    radial-gradient(120% 80% at 0% 20%, rgba(37,99,235,.45) 0%, transparent 60%);
}
.hero-inner{
  position:relative; z-index:1;
  padding-top:64px; padding-bottom:56px;
  display:grid; gap:48px;
}
@media (min-width:1024px){
  .hero-inner{padding-top:112px; padding-bottom:96px; grid-template-columns:1.2fr .8fr; align-items:end; gap:64px}
}
.hero h1{color:#fff}
.hero .eyebrow{color:#FDBA74}
.hero .eyebrow::before{background:#FDBA74}
.hero-lead{color:rgba(255,255,255,.85); margin-top:18px; max-width:540px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:40px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.15);
}
.hero-meta div b{
  display:block; font-size:clamp(24px,3vw,32px); font-weight:800;
  color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.hero-meta div span{font-size:13px; color:rgba(255,255,255,.7)}

.hero-card{
  background:rgba(255,255,255,.97);
  color:var(--c-text);
  border-radius:24px;
  padding:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
@media (min-width:1024px){ .hero-card{padding:28px} }
.hero-card h3{font-size:18px; margin-bottom:8px; display:flex; align-items:center; gap:8px}
.hero-card .qstep{
  display:flex; gap:10px; padding:14px;
  border:1.5px solid var(--c-border); border-radius:12px;
  margin-top:12px; align-items:center;
  transition:all .15s ease;
}
.hero-card .qstep:hover{border-color:var(--c-pri-500); background:var(--c-pri-50)}
.qstep-num{
  width:32px;height:32px;border-radius:50%;
  background:var(--c-pri-100); color:var(--c-pri-700);
  font-weight:800; display:grid; place-items:center; font-size:14px; flex-shrink:0;
}
.qstep-text{flex:1; font-weight:600; font-size:14px}
.qstep-text small{display:block; font-weight:500; color:var(--c-text-mute); font-size:12px; margin-top:2px}

/* ============== Sections ============== */
.section{padding:64px 0}
@media (min-width:1024px){ .section{padding:104px 0} }
.section-soft{background:var(--c-bg-soft)}
.section-dark{background:#0F172A; color:#fff}
.section-dark .text-soft{color:rgba(255,255,255,.7)}

.section-head{margin-bottom:40px}
@media (min-width:1024px){ .section-head{margin-bottom:56px} }
.section-head .h-section{margin-top:14px}
.section-head .text-lead{margin-top:16px; max-width:680px}

/* ============== Value Cards (3-up) ============== */
.value-grid{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:768px){ .value-grid{grid-template-columns:repeat(3,1fr); gap:20px} }
.value-card{
  position:relative;
  border-radius:20px; padding:28px;
  background:var(--c-bg);
  border:1px solid var(--c-border);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.value-card:hover{transform:translateY(-4px); box-shadow:var(--sh-lg)}
.value-card .ico{
  width:56px;height:56px;border-radius:14px;
  display:grid;place-items:center; margin-bottom:20px;
}
.value-card.v1 .ico{background:var(--c-acc-50); color:var(--c-acc-600)}
.value-card.v2 .ico{background:var(--c-pri-50); color:var(--c-pri-700)}
.value-card.v3 .ico{background:var(--c-eco-50); color:var(--c-eco-700)}
.value-card h3{margin-bottom:8px}
.value-card .big{
  font-size:48px; font-weight:800;
  letter-spacing:-.03em; line-height:1;
  margin:8px 0 14px;
  font-variant-numeric:tabular-nums;
}
.value-card.v1 .big{color:var(--c-acc-600)}
.value-card.v2 .big{color:var(--c-pri-700)}
.value-card.v3 .big{color:var(--c-eco-700)}

/* ============== Trust Stats Strip ============== */
.trust-strip{
  background:linear-gradient(135deg, var(--c-pri-700) 0%, var(--c-pri-900) 100%);
  color:#fff;
  border-radius:24px;
  padding:32px 24px;
  display:grid; gap:24px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .trust-strip{grid-template-columns:repeat(3,1fr); padding:40px} }
@media (min-width:1024px){ .trust-strip{grid-template-columns:repeat(6,1fr); padding:48px 40px} }
.trust-strip .stat b{
  display:block;
  font-size:clamp(28px,3.4vw,40px);
  font-weight:800; letter-spacing:-.03em;
  color:#FDE68A;
  font-variant-numeric:tabular-nums;
}
.trust-strip .stat span{font-size:13px; color:rgba(255,255,255,.75); margin-top:4px; display:block}

/* ============== Target Matcher ============== */
.matcher-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .matcher-grid{grid-template-columns:repeat(4,1fr)} }
.matcher-card{
  position:relative; overflow:hidden;
  border-radius:20px;
  aspect-ratio: 4/5;
  cursor:pointer;
  transition:transform .25s ease;
}
.matcher-card:hover{transform:translateY(-6px)}
.matcher-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.matcher-card:hover img{transform:scale(1.06)}
.matcher-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.85) 100%);
}
.matcher-card .inner{
  position:absolute; inset:0; z-index:2;
  padding:20px;
  color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
}
.matcher-card .badge{
  align-self:flex-start;
  background:rgba(255,255,255,.95); color:var(--c-pri-700);
  padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:700;
}
.matcher-card .label{
  font-size:22px; font-weight:800; letter-spacing:-.02em;
  display:flex; align-items:center; justify-content:space-between;
}
.matcher-card .label small{font-size:13px; font-weight:500; color:rgba(255,255,255,.8); display:block; margin-top:4px}
.matcher-arrow{
  width:36px;height:36px;border-radius:50%;
  background:var(--c-acc-500); color:#fff;
  display:grid; place-items:center;
  flex-shrink:0;
}

/* ============== Product Showcase ============== */
.product-grid{
  display:grid; gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:1024px){ .product-grid{grid-template-columns:repeat(3,1fr)} }
.product-card{
  background:#fff;
  border-radius:20px; overflow:hidden;
  border:1px solid var(--c-border);
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.product-card:hover{transform:translateY(-4px); box-shadow:var(--sh-lg)}
.product-card.featured{
  border-color:var(--c-acc-500);
  border-width:2px;
  position:relative;
}
.product-card .thumb{
  aspect-ratio:16/10;
  position:relative; overflow:hidden;
}
.product-card .thumb img{width:100%;height:100%;object-fit:cover; transition:transform .6s ease}
.product-card:hover .thumb img{transform:scale(1.05)}
.product-card .thumb-tag{
  position:absolute; top:16px; left:16px;
  padding:6px 12px; border-radius:999px;
  background:rgba(15,23,42,.85); color:#fff;
  font-size:12px; font-weight:700; backdrop-filter:blur(6px);
}
.product-card.featured .thumb-tag{background:var(--c-acc-500)}
.product-card .body{padding:24px; flex:1; display:flex; flex-direction:column}
.product-card .body h3{margin-bottom:8px}
.product-card .body ul{
  list-style:none; padding:0; margin:18px 0;
  display:flex; flex-direction:column; gap:10px;
}
.product-card .body li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:15px; color:var(--c-text-soft);
}
.product-card .body li svg{flex-shrink:0; margin-top:2px}
.product-card .meta{
  display:flex; gap:8px; font-size:13px;
  padding-top:18px; margin-top:auto;
  border-top:1px solid var(--c-border);
  color:var(--c-text-mute);
}
.product-card .meta b{color:var(--c-text); font-weight:700}

/* ============== Calculator Promo ============== */
.calc-wrap{
  background:linear-gradient(135deg, var(--c-pri-50) 0%, var(--c-acc-50) 100%);
  border-radius:24px;
  overflow:hidden;
  display:grid; grid-template-columns:1fr;
}
@media (min-width:1024px){ .calc-wrap{grid-template-columns:1.1fr 1fr} }
.calc-text{padding:40px 28px}
@media (min-width:1024px){ .calc-text{padding:64px 56px} }
.calc-text h2{margin-bottom:12px}
.calc-visual{
  position:relative; min-height:280px;
  background:#fff;
  padding:24px;
  display:flex; flex-direction:column; gap:14px;
}
@media (min-width:1024px){ .calc-visual{padding:40px} }
.calc-bar-row{
  display:flex; align-items:center; gap:12px;
  font-size:13px; color:var(--c-text-soft);
}
.calc-bar-row .y{width:48px; font-weight:600; flex-shrink:0; font-variant-numeric:tabular-nums}
.calc-bar-track{flex:1; height:24px; background:var(--c-bg-alt); border-radius:6px; overflow:hidden; position:relative}
.calc-bar-fill{
  height:100%;
  background:linear-gradient(90deg, var(--c-pri-500), var(--c-acc-500));
  border-radius:6px; transition:width .6s cubic-bezier(.4,0,.2,1);
}
.calc-bar-row .v{width:80px; text-align:right; font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; flex-shrink:0}

.calc-total{
  margin-top:auto;
  padding:18px;
  background:linear-gradient(135deg, var(--c-pri-700), var(--c-pri-900));
  color:#fff;
  border-radius:14px;
  display:flex; align-items:center; justify-content:space-between;
}
.calc-total .lbl{font-size:13px; color:rgba(255,255,255,.75)}
.calc-total .num{font-size:30px; font-weight:800; color:#FDE68A; line-height:1; font-variant-numeric:tabular-nums}

/* ============== Cases ============== */
.case-grid{
  display:grid; gap:20px;
  grid-template-columns:1fr;
}
@media (min-width:768px){ .case-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .case-grid{grid-template-columns:repeat(3,1fr)} }
.case-card{
  border-radius:18px; overflow:hidden;
  background:#fff; border:1px solid var(--c-border);
  transition:transform .25s ease, box-shadow .25s ease;
}
.case-card:hover{transform:translateY(-4px); box-shadow:var(--sh-md)}
.case-card .thumb{aspect-ratio:4/3; overflow:hidden; position:relative}
.case-card .thumb img{width:100%;height:100%;object-fit:cover; transition:transform .5s}
.case-card:hover .thumb img{transform:scale(1.06)}
.case-card .thumb .tag{
  position:absolute; bottom:12px; left:12px;
  background:rgba(255,255,255,.95); color:var(--c-pri-700);
  padding:6px 10px; border-radius:6px;
  font-size:12px; font-weight:700;
}
.case-card .body{padding:18px 20px 22px}
.case-card .body h4{font-size:17px; font-weight:700; margin-bottom:6px}
.case-card .body .loc{font-size:13px; color:var(--c-text-mute); margin-bottom:14px}
.case-card .body .yield{
  display:flex; justify-content:space-between; align-items:end;
  padding-top:14px; border-top:1px dashed var(--c-border);
}
.case-card .body .yield .lbl{font-size:12px; color:var(--c-text-mute); display:block}
.case-card .body .yield b{font-size:18px; color:var(--c-pri-700); font-variant-numeric:tabular-nums}

/* ============== Before/After Slider ============== */
.ba-wrap{
  position:relative;
  border-radius:24px; overflow:hidden;
  aspect-ratio: 16/9;
  max-width:1000px; margin:0 auto;
  background:var(--c-bg-alt);
  cursor:ew-resize;
  user-select:none;
  touch-action:none;
}
.ba-wrap img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-handle{
  position:absolute; top:0; bottom:0;
  left:var(--pos,50%);
  width:3px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.3);
  pointer-events:none;
}
.ba-knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%; background:#fff;
  display:grid;place-items:center;color:var(--c-pri-700);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.ba-label{
  position:absolute; top:16px; padding:6px 12px; border-radius:999px;
  background:rgba(15,23,42,.85); color:#fff;
  font-size:12px; font-weight:700; pointer-events:none;
}
.ba-label.bef{left:16px}
.ba-label.aft{right:16px; background:var(--c-acc-500)}

/* ============== FAQ ============== */
.faq-list{display:flex; flex-direction:column; gap:8px; max-width:840px; margin:0 auto}
.faq-item{
  background:#fff; border:1px solid var(--c-border); border-radius:14px;
  overflow:hidden;
}
.faq-q{
  width:100%; text-align:left;
  display:flex; align-items:center; gap:14px;
  padding:18px 22px;
  font-size:16px; font-weight:700;
}
.faq-q .qmark{
  width:28px;height:28px;border-radius:50%;
  background:var(--c-pri-100); color:var(--c-pri-700);
  display:grid; place-items:center; font-weight:800; font-size:13px;
  flex-shrink:0;
}
.faq-q .caret{margin-left:auto; transition:transform .25s ease; flex-shrink:0; color:var(--c-text-mute)}
.faq-item[data-open="true"] .caret{transform:rotate(180deg); color:var(--c-pri-600)}
.faq-a{
  padding:0 22px 20px 64px;
  font-size:15px; line-height:1.7; color:var(--c-text-soft);
  display:none;
}
.faq-item[data-open="true"] .faq-a{display:block; animation:fadeDown .25s ease}
@keyframes fadeDown{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* ============== Final CTA ============== */
.final-cta{
  position:relative; overflow:hidden;
  border-radius:24px;
  padding:48px 24px; text-align:center;
  color:#fff;
  background:#0F172A;
}
@media (min-width:1024px){ .final-cta{padding:80px 40px; border-radius:32px} }
.final-cta::before{
  content:""; position:absolute; inset:0;
  background-image:url('/assets/img/install-team.jpg');
  background-size:cover; background-position:center;
  opacity:.3;
}
.final-cta::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,.6) 0%, rgba(30,64,175,.7) 100%);
}
.final-cta > *{position:relative; z-index:1}
.final-cta h2{font-size:clamp(28px,4vw,44px); margin-bottom:14px; color:#fff}
.final-cta p{color:rgba(255,255,255,.85); font-size:18px; margin-bottom:30px}
.final-cta .actions{display:inline-flex; flex-wrap:wrap; gap:12px; justify-content:center}

/* ============== Footer ============== */
.footer{background:#0B1220; color:rgba(255,255,255,.7); padding:48px 0 120px}
@media (min-width:1024px){ .footer{padding:64px 0 56px} }
.footer-grid{
  display:grid; gap:32px;
  grid-template-columns:1fr;
}
@media (min-width:768px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr} }
.footer-grid h5{color:#fff; font-size:14px; font-weight:700; margin:0 0 14px; letter-spacing:.04em}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.footer-grid a, .footer-grid li{font-size:14px}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  margin-top:40px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; color:rgba(255,255,255,.5);
}

/* ============== Mobile Bottom Fixed CTA ============== */
.bottom-cta{
  position:fixed; left:0; right:0; bottom:0;
  z-index:50;
  background:#fff;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(0,0,0,.1);
  display:flex; gap:8px;
  border-top:1px solid var(--c-border);
}
.bottom-cta .btn{flex:1; padding:14px 12px; font-size:15px; border-radius:12px}
.bottom-cta .btn-primary{flex:1.6}
@media (min-width:1024px){ .bottom-cta{display:none} }

/* ============== Mobile Drawer ============== */
.drawer{
  position:fixed; inset:0; z-index:60;
  background:rgba(15,23,42,.5);
  display:none;
  animation:fadeIn .2s;
}
.drawer[data-open="true"]{display:block}
.drawer-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(86vw,360px);
  background:#fff;
  padding:24px 24px calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:8px;
  animation:slideIn .25s cubic-bezier(.4,0,.2,1);
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes slideIn{from{transform:translateX(100%)} to{transform:none}}
.drawer-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.drawer a{
  display:flex; align-items:center; padding:14px 8px;
  font-size:16px; font-weight:600; color:var(--c-text);
  border-bottom:1px solid var(--c-divider);
}
.drawer .btn{margin-top:16px}

/* ============== Quote Modal Wizard ============== */
.modal-bg{
  position:fixed; inset:0; z-index:70;
  background:rgba(15,23,42,.6); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fadeIn .2s;
}
@media (min-width:768px){ .modal-bg{align-items:center; padding:24px} }
.modal{
  width:100%; max-width:560px;
  max-height:92vh; overflow:hidden;
  background:#fff;
  border-radius:24px 24px 0 0;
  display:flex; flex-direction:column;
  animation:modalUp .3s cubic-bezier(.4,0,.2,1);
}
@media (min-width:768px){ .modal{border-radius:24px; max-height:88vh} }
@keyframes modalUp{from{transform:translateY(40px); opacity:0} to{transform:none; opacity:1}}

.modal-top{
  padding:18px 22px 12px;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.progress-bar{
  height:6px; background:var(--c-bg-alt); border-radius:6px; overflow:hidden;
  flex:1; margin-right:14px;
}
.progress-bar div{height:100%; background:linear-gradient(90deg,var(--c-pri-500),var(--c-acc-500)); border-radius:6px; transition:width .35s ease}
.progress-text{font-size:13px; color:var(--c-text-mute); font-weight:600; font-variant-numeric:tabular-nums}
.close-btn{width:36px;height:36px;border-radius:50%; background:var(--c-bg-alt); display:grid; place-items:center; margin-left:8px}

.modal-body{
  padding:8px 22px 22px;
  overflow-y:auto;
  flex:1;
}
.modal-body h2{font-size:22px; margin-bottom:6px; font-weight:800; letter-spacing:-.02em}
.modal-body .step-lead{color:var(--c-text-soft); font-size:14px; margin-bottom:24px}

.modal-foot{
  display:flex; gap:10px; padding:16px 22px;
  border-top:1px solid var(--c-border);
  flex-shrink:0;
  background:#fff;
}
.modal-foot .btn{flex:1}

/* Step controls */
.roof-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.roof-card{
  border:2px solid var(--c-border); border-radius:14px;
  padding:20px 14px;
  text-align:center;
  background:#fff;
  font-weight:700;
  transition:all .15s;
}
.roof-card:hover{border-color:var(--c-pri-300)}
.roof-card[data-active="true"]{border-color:var(--c-pri-500); background:var(--c-pri-50)}
.roof-card .emoji{font-size:32px; display:block; margin-bottom:6px}
.roof-card small{display:block; font-weight:500; font-size:12px; color:var(--c-text-mute); margin-top:4px}

.field{margin-bottom:18px}
.field-label{display:block; font-size:14px; font-weight:600; color:var(--c-text-soft); margin-bottom:8px}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px;
  border:1.5px solid var(--c-border); border-radius:12px;
  font-size:16px; font-weight:600;
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0; border-color:var(--c-pri-500);
  box-shadow:0 0 0 3px var(--c-pri-100);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.field-hint{font-size:12px; color:var(--c-text-mute); margin-top:6px}

.stepper{display:flex; align-items:center; gap:8px}
.stepper input{flex:1; text-align:center; font-size:20px; font-weight:800}
.stepper button{
  width:48px; height:48px; border-radius:12px;
  background:var(--c-bg-alt); font-size:24px; font-weight:700; color:var(--c-pri-700);
}
.stepper button:hover{background:var(--c-pri-100)}

.upload-zone{
  border:2px dashed var(--c-border); border-radius:14px;
  padding:32px 20px; text-align:center;
  background:var(--c-bg-soft);
  transition:border-color .15s, background .15s;
  cursor:pointer;
}
.upload-zone:hover{border-color:var(--c-pri-500); background:var(--c-pri-50)}
.upload-zone .ico{
  width:56px;height:56px; border-radius:50%;
  background:#fff; display:grid; place-items:center;
  margin:0 auto 14px; color:var(--c-pri-600);
  box-shadow:var(--sh-sm);
}
.upload-zone h4{font-size:16px; margin-bottom:6px}
.upload-zone p{font-size:13px; color:var(--c-text-mute); margin:0 0 16px}
.upload-zone .ai-hint{
  display:inline-flex; gap:6px; padding:6px 12px;
  background:var(--c-eco-50); color:var(--c-eco-700);
  border-radius:999px; font-size:12px; font-weight:700;
  margin-top:10px;
}
.thumbs{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.thumbs .t{
  width:64px; height:64px; border-radius:10px;
  background:var(--c-bg-alt) center/cover no-repeat;
  border:1.5px solid var(--c-border);
  position:relative;
}

.option-radio{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px; border:1.5px solid var(--c-border);
  border-radius:14px; margin-bottom:10px; cursor:pointer;
  transition:all .15s;
}
.option-radio:hover{border-color:var(--c-pri-300)}
.option-radio[data-active="true"]{border-color:var(--c-pri-500); background:var(--c-pri-50)}
.option-radio .dot{
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--c-border);
  flex-shrink:0; margin-top:1px;
  display:grid; place-items:center;
}
.option-radio[data-active="true"] .dot{border-color:var(--c-pri-500)}
.option-radio[data-active="true"] .dot::after{
  content:""; width:10px; height:10px; border-radius:50%; background:var(--c-pri-500);
}
.option-radio .copy{flex:1}
.option-radio .copy b{display:block; font-size:15px; font-weight:700; margin-bottom:3px}
.option-radio .copy small{color:var(--c-text-soft); font-size:13px}
.option-radio .tag-best{
  background:var(--c-acc-500); color:#fff;
  padding:3px 8px; border-radius:6px; font-size:11px; font-weight:700;
  margin-left:6px;
}

.result-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:18px;
}
.result-cell{
  background:var(--c-bg-soft); border-radius:12px; padding:14px;
}
.result-cell .lbl{font-size:12px; color:var(--c-text-mute); margin-bottom:4px}
.result-cell b{font-size:20px; font-weight:800; color:var(--c-pri-700); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.result-cell.hi{
  background:linear-gradient(135deg, var(--c-acc-500), var(--c-acc-600));
  color:#fff; grid-column:span 2;
}
.result-cell.hi .lbl{color:rgba(255,255,255,.85)}
.result-cell.hi b{color:#fff; font-size:28px}

.ai-card{
  background:var(--c-eco-50); border-left:4px solid var(--c-eco-500);
  padding:14px 16px; border-radius:10px;
  margin-bottom:18px;
}
.ai-card .tit{
  font-size:13px; font-weight:800; color:var(--c-eco-700);
  display:flex; align-items:center; gap:6px; margin-bottom:6px;
}
.ai-card p{margin:0; font-size:14px; line-height:1.6; color:var(--c-text)}

.check-row{display:flex; gap:10px; align-items:flex-start; padding:8px 0; font-size:14px}
.check-row input{margin-top:3px}
.check-row a{color:var(--c-pri-700); text-decoration:underline}

.success-card{padding:32px 16px; text-align:center}
.success-card .check{
  width:72px;height:72px;border-radius:50%;
  background:var(--c-eco-500); color:#fff;
  margin:0 auto 18px;
  display:grid;place-items:center;
  animation:pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{from{transform:scale(0)} to{transform:scale(1)}}
.success-card h2{font-size:24px; margin-bottom:8px}
.success-card p{font-size:15px; color:var(--c-text-soft); margin-bottom:24px}

/* ============== Page-specific blocks ============== */

/* Product detail rows (alternating) */
.prod-row{
  display:grid; gap:32px;
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:1024px){
  .prod-row{grid-template-columns:1.05fr 1fr; gap:64px}
  .prod-row.flip .prod-img{order:2}
}
.prod-img{
  position:relative;
  border-radius:24px; overflow:hidden;
  aspect-ratio:5/4;
}
.prod-img img{width:100%; height:100%; object-fit:cover}
.prod-img .badge{
  position:absolute; top:18px; left:18px;
  padding:8px 14px; border-radius:999px;
  background:var(--c-acc-500); color:#fff;
  font-size:12px; font-weight:700;
  letter-spacing:.02em;
}
.prod-spec{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  margin-top:24px;
  padding:20px;
  background:var(--c-bg-soft); border-radius:14px;
}
.prod-spec .cell{font-size:13px}
.prod-spec .cell .lbl{color:var(--c-text-mute); display:block; margin-bottom:3px}
.prod-spec .cell b{font-size:16px; color:var(--c-pri-700); font-weight:700}
.prod-feats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  margin:22px 0;
}
.prod-feats .f{
  display:flex; gap:8px; align-items:flex-start;
  font-size:14px; color:var(--c-text-soft);
}

/* Compare table */
.cmp-wrap{overflow-x:auto; border-radius:18px; border:1px solid var(--c-border)}
.cmp-table{
  width:100%; min-width:720px;
  border-collapse:collapse;
  background:#fff;
}
.cmp-table th, .cmp-table td{
  padding:16px 18px;
  text-align:center;
  border-bottom:1px solid var(--c-divider);
  font-size:14px;
}
.cmp-table th{
  background:var(--c-bg-soft);
  font-weight:700; color:var(--c-text);
  position:sticky; top:0;
}
.cmp-table th:first-child, .cmp-table td:first-child{
  text-align:left; font-weight:700; color:var(--c-text);
  background:var(--c-bg-soft);
  position:sticky; left:0; z-index:1;
}
.cmp-table td .yes{color:var(--c-eco-700); font-weight:800}
.cmp-table td .no{color:var(--c-text-mute)}
.cmp-table .featured-col{background:linear-gradient(180deg, var(--c-acc-50), transparent); color:var(--c-acc-700)}

/* Filter pills */
.pill-row{display:flex; flex-wrap:wrap; gap:8px}
.pill{
  padding:9px 14px; border-radius:999px;
  background:#fff; border:1.5px solid var(--c-border);
  font-size:13px; font-weight:700; color:var(--c-text-soft);
  transition:all .15s;
}
.pill:hover{border-color:var(--c-pri-300); color:var(--c-pri-700)}
.pill[data-active="true"]{
  background:var(--c-pri-700); border-color:var(--c-pri-700); color:#fff;
}

/* Search input */
.search-bar{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1.5px solid var(--c-border);
  border-radius:14px; padding:14px 18px;
  box-shadow:var(--sh-sm);
}
.search-bar:focus-within{border-color:var(--c-pri-500); box-shadow:0 0 0 4px var(--c-pri-100)}
.search-bar input{
  flex:1; border:0; outline:0; font-size:16px;
  background:transparent;
}

/* Category tabs */
.cat-tabs{
  display:flex; gap:4px;
  border-bottom:2px solid var(--c-divider);
  overflow-x:auto; scrollbar-width:none;
  margin-bottom:24px;
}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{
  padding:14px 18px;
  font-size:15px; font-weight:700;
  color:var(--c-text-mute);
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  white-space:nowrap;
  transition:color .15s, border-color .15s;
}
.cat-tab[data-active="true"]{color:var(--c-pri-700); border-bottom-color:var(--c-pri-700)}

/* Timeline (awards) */
.timeline{
  display:flex; flex-direction:column; gap:18px;
  border-left:2px solid var(--c-border);
  padding-left:24px; margin-left:8px;
}
.timeline .item{position:relative}
.timeline .item::before{
  content:""; position:absolute; left:-32px; top:6px;
  width:14px; height:14px; border-radius:50%;
  background:var(--c-acc-500); border:3px solid #fff;
  box-shadow:0 0 0 2px var(--c-acc-500);
}
.timeline .item .yr{
  font-size:13px; font-weight:800; color:var(--c-acc-600);
  letter-spacing:.04em; margin-bottom:4px;
}
.timeline .item h4{font-size:16px; font-weight:700; margin-bottom:4px}
.timeline .item p{font-size:14px; color:var(--c-text-soft); margin:0}

/* Big stat tiles */
.stat-tiles{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .stat-tiles{grid-template-columns:repeat(4,1fr)} }
.stat-tile{
  background:#fff; border-radius:16px; padding:24px;
  border:1px solid var(--c-border);
}
.stat-tile b{
  display:block; font-size:36px; font-weight:800;
  color:var(--c-pri-700); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1;
  margin-bottom:8px;
}
.stat-tile span{font-size:13px; color:var(--c-text-soft); font-weight:600}

/* Map / location card */
.map-card{
  display:grid; gap:24px;
  grid-template-columns:1fr;
  background:#fff; border:1px solid var(--c-border); border-radius:20px; overflow:hidden;
}
@media (min-width:768px){ .map-card{grid-template-columns:1.2fr 1fr} }
.map-fake{
  background:var(--c-bg-alt) center/cover no-repeat;
  background-image:linear-gradient(135deg, var(--c-pri-50), var(--c-pri-100));
  min-height:280px;
  position:relative;
  display:grid; place-items:center;
}
.map-pin{
  width:64px; height:64px; border-radius:50%;
  background:var(--c-acc-500); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(245,158,11,.4);
  animation:pinPulse 2s infinite;
}
@keyframes pinPulse{
  0%, 100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
.map-info{padding:28px}
.map-info dl{display:grid; grid-template-columns:80px 1fr; gap:10px 16px; margin:14px 0; font-size:14px}
.map-info dt{color:var(--c-text-mute); font-weight:600}
.map-info dd{margin:0; color:var(--c-text); font-weight:600}

/* Person card */
.person-card{
  display:flex; gap:18px; align-items:center;
  background:linear-gradient(135deg, var(--c-pri-50), #fff);
  border:1px solid var(--c-border);
  border-radius:16px; padding:20px;
}
.person-card .avatar{
  width:72px; height:72px; border-radius:50%;
  background:var(--c-pri-700); color:#fff;
  display:grid; place-items:center;
  font-size:24px; font-weight:800;
  flex-shrink:0;
}

/* Calc inputs side-by-side block */
.calc-page-grid{
  display:grid; gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:1024px){ .calc-page-grid{grid-template-columns:1fr 1.2fr; align-items:start} }
.calc-input-card, .calc-result-card{
  background:#fff; border:1px solid var(--c-border);
  border-radius:20px; padding:28px;
}
.calc-result-card{background:linear-gradient(135deg, var(--c-pri-700), var(--c-pri-900)); color:#fff; border:0}
.calc-result-card h3{color:#fff; margin-bottom:8px}
.calc-result-stats{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr); margin:20px 0;
}
.calc-result-stats .cell{
  background:rgba(255,255,255,.08); border-radius:12px; padding:16px;
}
.calc-result-stats .cell.hi{
  grid-column:span 2;
  background:linear-gradient(135deg, var(--c-acc-500), var(--c-acc-600));
}
.calc-result-stats .cell .lbl{font-size:12px; color:rgba(255,255,255,.7); margin-bottom:6px}
.calc-result-stats .cell b{font-size:24px; color:#FDE68A; font-variant-numeric:tabular-nums; letter-spacing:-.02em; display:block}
.calc-result-stats .cell.hi b{font-size:30px; color:#fff}

.chart-bars{display:flex; align-items:flex-end; gap:6px; height:200px; padding:14px 0; border-top:1px solid rgba(255,255,255,.15)}
.chart-bars .bar{
  flex:1;
  background:linear-gradient(180deg, #FDE68A, var(--c-acc-500));
  border-radius:4px 4px 0 0;
  position:relative;
  min-height:4px;
  transition:height .4s ease;
}
.chart-bars .bar::after{
  content:attr(data-y);
  position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font-size:10px; color:rgba(255,255,255,.6);
}

/* Contact CTA card */
.contact-cta{
  background:linear-gradient(135deg, var(--c-pri-50), var(--c-acc-50));
  border-radius:20px; padding:32px 24px; text-align:center;
}
@media (min-width:768px){ .contact-cta{padding:48px} }

/* ============== Quote page (full-page wizard) ============== */
.quote-card{
  max-width:600px; margin:0 auto;
  background:#fff; border:1px solid var(--c-border);
  border-radius:24px; box-shadow:var(--sh-md);
  overflow:hidden;
}
.quote-card-top{ display:flex; align-items:center; gap:12px; padding:22px 24px 0; }
.quote-card-body{ padding:18px 24px 24px; }
.quote-card-body h2{ font-size:22px; margin-bottom:6px; font-weight:800; letter-spacing:-.02em; }
.quote-card-body .step-lead{ color:var(--c-text-soft); font-size:14px; margin-bottom:24px; }
.quote-card-foot{ display:flex; gap:10px; padding:16px 24px; border-top:1px solid var(--c-border); }
.quote-card-foot .btn{ flex:1; }

/* ============== Legal / 정책 문서 ============== */
.legal{ max-width:860px; margin:0 auto; }
.legal-updated{ font-size:13px; color:var(--c-text-mute); margin-bottom:8px; }
.legal .toc{ background:var(--c-bg-soft); border:1px solid var(--c-border); border-radius:14px; padding:20px 24px; margin:24px 0 36px; }
.legal .toc-title{ font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--c-text-mute); margin-bottom:10px; }
.legal .toc ol{ margin:0; padding-left:20px; columns:2; column-gap:32px; }
.legal .toc li{ font-size:14px; margin-bottom:6px; }
.legal .toc a{ color:var(--c-text-soft); text-decoration:none; }
.legal .toc a:hover{ color:var(--c-pri-700); }
.legal h2{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin:36px 0 12px; padding-top:24px; border-top:1px solid var(--c-divider); scroll-margin-top:90px; }
.legal h2:first-of-type{ border-top:0; padding-top:0; }
.legal h3{ font-size:16px; font-weight:700; margin:18px 0 8px; }
.legal p{ font-size:15px; line-height:1.75; color:var(--c-text-soft); margin:0 0 12px; }
.legal ul{ margin:0 0 14px; padding-left:18px; }
.legal li{ font-size:15px; line-height:1.7; color:var(--c-text-soft); margin-bottom:6px; }
.legal b{ color:var(--c-text); }
.legal a{ color:var(--c-pri-700); }
.legal table{ width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:14px; }
.legal th, .legal td{ border:1px solid var(--c-border); padding:10px 12px; text-align:left; vertical-align:top; line-height:1.6; }
.legal th{ background:var(--c-bg-soft); font-weight:700; color:var(--c-text); white-space:nowrap; }
.legal td{ color:var(--c-text-soft); }
@media (max-width:640px){ .legal .toc ol{ columns:1; } }

/* ============== Admin 콘솔 ============== */
.admin-shell{ min-height:100vh; background:var(--c-bg-soft); }
.admin-bar{ background:#0B1220; }
.admin-bar-inner{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.admin-main{ padding:28px 0 64px; }
.admin-card{ background:#fff; border:1px solid var(--c-border); border-radius:16px; padding:20px; }
.admin-toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.admin-scroll{ overflow-x:auto; }
.admin-table{ width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
.admin-table th, .admin-table td{ border-bottom:1px solid var(--c-divider); padding:11px 12px; text-align:left; vertical-align:middle; }
.admin-table th{ background:var(--c-bg-soft); font-weight:700; color:var(--c-text); }
.admin-table tbody tr:hover{ background:var(--c-bg-soft); }
.admin-status{ padding:7px 10px; border:1.5px solid var(--c-border); border-radius:8px; font-size:13px; font-weight:600; background:#fff; }
.admin-status:focus{ outline:0; border-color:var(--c-pri-500); }
.badge-status{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:13px; font-weight:700; }
.thumb-sm{ width:42px; height:42px; object-fit:cover; border-radius:6px; border:1px solid var(--c-border); display:block; transition:transform .15s; cursor:zoom-in; }
.thumb-sm:hover{ transform:scale(1.05); }
.thumb-preview{ position:fixed; z-index:200; background:#fff; border:1px solid var(--c-border); border-radius:10px; box-shadow:var(--sh-lg); padding:6px; pointer-events:none; }
.thumb-preview img{ display:block; max-width:300px; max-height:300px; border-radius:6px; }
.lightbox{ position:fixed; inset:0; z-index:300; background:rgba(15,23,42,.88); display:none; align-items:center; justify-content:center; padding:24px; }
.lightbox[data-open="true"]{ display:flex; animation:fadeIn .15s; }
.lightbox img{ max-width:92vw; max-height:92vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{ position:fixed; top:18px; right:22px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; display:grid; place-items:center; font-size:20px; cursor:pointer; }
.lightbox-close:hover{ background:rgba(255,255,255,.28); }
.pager{ display:flex; gap:6px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.pager a, .pager span{ padding:8px 13px; border-radius:8px; border:1px solid var(--c-border); font-size:13px; font-weight:700; color:var(--c-text-soft); }
.pager a:hover{ border-color:var(--c-pri-400, var(--c-pri-300)); color:var(--c-pri-700); }
.pager .on{ background:var(--c-pri-700); color:#fff; border-color:var(--c-pri-700); }
.detail-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:900px){ .detail-grid{ grid-template-columns:1.5fr 1fr; align-items:start; } }
.kv{ display:grid; grid-template-columns:120px 1fr; gap:10px 16px; margin:0; font-size:14px; }
.kv dt{ color:var(--c-text-mute); font-weight:600; }
.kv dd{ margin:0; color:var(--c-text); word-break:break-all; }
.kv-h{ font-size:13px; font-weight:800; color:var(--c-text-mute); letter-spacing:.04em; margin:20px 0 10px; padding-top:16px; border-top:1px solid var(--c-divider); }
.kv-h:first-child{ border-top:0; padding-top:0; margin-top:0; }

/* ============== Admin 대시보드 ============== */
.kpi-grid{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-bottom:20px; }
@media (min-width:768px){ .kpi-grid{ grid-template-columns:repeat(5,1fr); } }
.kpi{ background:#fff; border:1px solid var(--c-border); border-radius:14px; padding:18px 20px; }
.kpi b{ display:block; font-size:30px; font-weight:800; color:var(--c-pri-700); letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi span{ font-size:13px; color:var(--c-text-soft); font-weight:600; margin-top:4px; display:block; }
.dash-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:980px){ .dash-grid{ grid-template-columns:1.7fr 1fr; align-items:start; } }
.dash-bars{ display:flex; align-items:flex-end; gap:5px; height:210px; padding-top:10px; }
.dash-bars .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
.dash-bars .bar{ width:100%; max-width:24px; background:linear-gradient(180deg,var(--c-pri-500),var(--c-acc-500)); border-radius:5px 5px 0 0; min-height:2px; transition:height .3s; }
.dash-bars .cnt{ font-size:11px; font-weight:700; color:var(--c-text-soft); }
.dash-bars .dl{ font-size:10px; color:var(--c-text-mute); white-space:nowrap; }
.hbar-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:13px; }
.hbar-row .lbl{ width:70px; color:var(--c-text-soft); font-weight:600; flex-shrink:0; }
.hbar-track{ flex:1; height:18px; background:var(--c-bg-alt); border-radius:5px; overflow:hidden; }
.hbar-fill{ height:100%; border-radius:5px; min-width:2px; }
.hbar-row .v{ width:40px; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; flex-shrink:0; color:var(--c-text); }

/* ============== Utils ============== */
.fade-in{animation:fadeUp .6s cubic-bezier(.2,.6,.3,1) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}