/* ══════════════════════════════════════════════════════════════
   메가배관 — 디자인 시스템 v3 "기록"
   speedpipe(라이트 헤더·파랑·주황)와 정반대 축:
   다크 차콜 헤더 2단 · 물빛 아쿠아 프라이머리 · 통화 그린 CTA · 풀블리드 히어로
   ══════════════════════════════════════════════════════════════ */
:root{
  --ink:#101820; --ink2:#1b2733; --body:#2b3a49; --mute:#5f7183; --faint:#8ea0b1;
  --line:#e3eaf0; --line2:#cfdae4;
  --bg:#ffffff; --tint:#f2f7f9; --tint2:#e6f0f3;
  --aqua:#0d9aa6; --aqua-d:#0a7a84; --aqua-t:#e3f5f7; --aqua-line:#b8e2e7;
  --call:#17a34a; --call-d:#128040; --call-t:#e6f7ec;
  --warn:#eab308;
  --r:16px; --r-s:11px;
  --shadow:0 1px 2px rgba(16,24,32,.05),0 10px 32px rgba(16,24,32,.10);
  --shadow-s:0 1px 2px rgba(16,24,32,.06);
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Malgun Gothic",sans-serif;
  font-size:17px;line-height:1.72;color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;word-break:keep-all}
img{max-width:100%;height:auto;display:block}
a{color:var(--aqua-d);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--aqua);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:46rem}

/* ── 상단 유틸바 ─────────────────────── */
.topbar{background:var(--aqua-d);color:#d7f3f5;font-size:.84rem}
.topbar-in{display:flex;align-items:center;gap:1.6rem;height:34px}
.tb-scope{display:flex;align-items:center;gap:.45rem;font-weight:700;color:#fff}
.tb-scope i{width:7px;height:7px;border-radius:50%;background:#7ef0c9;display:inline-block;box-shadow:0 0 0 3px rgba(126,240,201,.25)}
.tb-note{opacity:.92}
.tb-time{margin-left:auto;font-weight:600}

/* ── 헤더(다크 2단) ──────────────────── */
.site-head{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;
  box-shadow:0 2px 18px rgba(6,10,14,.35)}
.head-in{display:flex;align-items:center;gap:1.2rem;height:64px}
.logo{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo-mark{width:30px;height:30px;flex:0 0 auto;border-radius:8px;position:relative;
  background:linear-gradient(135deg,var(--aqua) 0 62%,#7ef0c9 62% 100%)}
.logo-mark::after{content:"";position:absolute;left:8px;top:8px;width:14px;height:14px;
  border:3px solid var(--ink);border-radius:50%;border-top-color:transparent;transform:rotate(45deg)}
.head-tel{display:flex;align-items:center;gap:.6rem;margin-left:auto;color:#fff;background:var(--call);
  padding:.5rem 1.15rem .5rem .95rem;border-radius:12px;box-shadow:0 2px 0 var(--call-d),0 8px 22px rgba(23,163,74,.35)}
.head-tel:hover{text-decoration:none;background:#1cb254;color:#fff}
.head-tel .ic{width:20px;height:20px;flex:0 0 auto}
.head-tel .txt{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.head-tel b{font-size:1.05rem;letter-spacing:.01em;white-space:nowrap}
.head-tel .txt span span,.head-tel .txt > span:last-child{font-size:.7rem;opacity:.9;font-weight:600}
.gnb-toggle{display:none;background:none;border:0;color:#fff;padding:.5rem;cursor:pointer}
/* 메뉴 스트립(헤더 2단째) */
.navstrip{background:var(--ink2);border-top:1px solid rgba(255,255,255,.06)}
.gnb{display:flex;gap:.1rem;overflow-x:auto;scrollbar-width:none}
.gnb::-webkit-scrollbar{display:none}
.gnb a{color:#c3d2df;font-weight:650;font-size:.95rem;padding:.72rem .95rem;white-space:nowrap;
  border-bottom:3px solid transparent}
.gnb a:hover{color:#fff;text-decoration:none;border-bottom-color:var(--aqua)}

/* ── 히어로(풀블리드 실사) ────────────── */
.hero-full{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(rgba(9,14,19,.78),rgba(9,14,19,.62) 55%,rgba(9,14,19,.85)),var(--hero-img) center 40%/cover no-repeat #0a1118}
.hero-full .hero-in{position:relative;z-index:1;max-width:var(--wrap);padding-top:5rem;padding-bottom:1.5rem}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(13,154,166,.18);
  border:1px solid rgba(126,240,201,.35);padding:.42rem 1rem;border-radius:999px;font-size:.92rem;color:#c9f2ec;margin-bottom:1.4rem}
.hero-badge b{color:#fff}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:#7ef0c9;display:inline-block;box-shadow:0 0 0 4px rgba(126,240,201,.2)}
.hero-full h1{font-size:clamp(2rem,4.8vw,3.25rem);line-height:1.18;letter-spacing:-.03em;font-weight:800;margin-bottom:1.1rem;max-width:38rem}
.hero-full h1 em{font-style:normal;color:#7ef0c9}
.hero-full .lead{font-size:clamp(1.02rem,1.6vw,1.16rem);color:#cfdce8;max-width:36rem;margin-bottom:2rem}
.hero-full .lead b{color:#fff}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.hero-shot-note{font-size:.82rem;color:#8fa3b5;margin-top:1.6rem}
.hero-facts{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:var(--r) var(--r) 0 0;
  overflow:hidden;margin-top:2.2rem;backdrop-filter:blur(6px)}
.hero-facts div{background:rgba(13,20,27,.72);padding:1.05rem 1.2rem;display:flex;flex-direction:column;gap:.15rem}
.hero-facts strong,.hero-facts b{font-size:1.08rem;color:#fff;font-weight:800;letter-spacing:-.01em}
.hero-facts span{font-size:.83rem;color:#94a9bb}

/* ── 버튼 ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;white-space:nowrap;
  background:var(--call);color:#fff;font-weight:800;font-size:1.06rem;letter-spacing:.01em;
  padding:.8rem 1.6rem;border-radius:13px;border:0;cursor:pointer;
  box-shadow:0 2px 0 var(--call-d),0 12px 26px rgba(23,163,74,.35);transition:transform .12s,box-shadow .12s}
.btn:hover{text-decoration:none;transform:translateY(-1px);color:#fff;background:#1cb254}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--call-d)}
.btn .ic{width:21px;height:21px;flex:0 0 auto}
.btn.big{font-size:1.22rem;padding:.95rem 1.9rem}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.sec .btn.ghost,.sec.tint .btn.ghost{color:var(--aqua-d);border-color:var(--aqua-d)}
.sec .btn.ghost:hover{background:var(--aqua-t)}

/* ── 섹션 ─────────────────────────────── */
.sec{padding:4.4rem 0}
.sec.tint{background:var(--tint)}
.sec.dark{background:var(--ink);color:#c6d4e0}
.sec.dark .sec-h{color:#fff}
.sec.dark .sec-sub{color:#93a8ba}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.83rem;font-weight:800;letter-spacing:.12em;
  color:var(--aqua-d);text-transform:uppercase;margin-bottom:.6rem}
.eyebrow::before{content:"";width:22px;height:2.5px;background:var(--aqua);border-radius:2px;display:inline-block}
.sec.dark .eyebrow{color:#7ef0c9}
.sec.dark .eyebrow::before{background:#7ef0c9}
.sec-h{font-size:clamp(1.5rem,2.9vw,2.05rem);line-height:1.28;letter-spacing:-.02em;color:var(--ink);font-weight:800;margin-bottom:.7rem}
.sec-sub{font-size:1.05rem;color:var(--mute);max-width:46rem;margin-bottom:2.3rem}

/* ── 카드(보더리스 + 좌측 액센트) ──────── */
.grid{display:grid;gap:1.15rem}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:0;border-left:4px solid var(--aqua-line);border-radius:10px;padding:1.45rem 1.35rem;
  box-shadow:var(--shadow-s);transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column;gap:.5rem}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-left-color:var(--aqua);text-decoration:none}
.sec.tint .card{box-shadow:0 1px 3px rgba(16,24,32,.07)}
.card h3,.card .t{font-size:1.1rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.35}
.card p{font-size:.94rem;color:var(--mute);line-height:1.6}
.card .meta{margin-top:auto;font-size:.9rem;color:var(--aqua-d);font-weight:750}
/* 스텝: 세로 타임라인 */
.grid.step{grid-template-columns:1fr;max-width:46rem;counter-reset:step;gap:0}
.grid.step .card{border-left:0;border-radius:0;box-shadow:none;background:transparent;
  padding:0 0 1.9rem 3.4rem;position:relative}
.grid.step .card::before{content:counter(step);counter-increment:step;
  position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:50%;
  background:var(--aqua);color:#fff;font-weight:800;font-size:1.05rem;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 5px rgba(13,154,166,.28)}
.grid.step .card::after{content:"";position:absolute;left:19px;top:44px;bottom:6px;width:2px;
  background:linear-gradient(rgba(126,240,201,.6),rgba(126,240,201,.12))}
.grid.step .card:last-child::after{display:none}
.sec.dark .grid.step .card h3{color:#fff}
.sec.dark .grid.step .card p{color:#9fb4c5}

/* ── 매거진 카드 ──────────────────────── */
.card.mag-card{padding:0;overflow:hidden;border-left:0;border-radius:var(--r)}
.mag-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--tint2)}
.mag-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
a.mag-card:hover .mag-thumb img{transform:scale(1.045)}
.mag-card .t,.mag-card h3,.mag-card p,.mag-card .meta,.mag-card .mag-cat{margin-left:1.3rem;margin-right:1.3rem}
.mag-card .mag-cat{margin-top:1.05rem}
.mag-card p{margin-bottom:1.2rem}
.mag-cat{display:inline-block;align-self:flex-start;font-size:.78rem;font-weight:800;color:var(--aqua-d);background:var(--aqua-t);
  padding:.18rem .6rem;border-radius:6px}

/* ── 지역: 타일 ───────────────────────── */
.region-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.6rem}
.region-list a{display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;
  border:1px solid var(--line2);color:var(--body);font-weight:650;font-size:.95rem;padding:.72rem .6rem;border-radius:10px;transition:all .13s}
.region-list a:hover{border-color:var(--aqua);color:var(--aqua-d);background:var(--aqua-t);text-decoration:none;transform:translateY(-1px)}
.sec.dark .region-list a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#cfe0ec}
.sec.dark .region-list a:hover{background:rgba(126,240,201,.14);border-color:#7ef0c9;color:#fff}
.cat-h{font-size:1.05rem;font-weight:800;color:var(--ink);margin:1.9rem 0 .8rem}
.sec.dark .cat-h{color:#fff}

/* ── 본문 ─────────────────────────────── */
.article,.copy{max-width:46rem}
.article p,.copy p{margin-bottom:1.15rem}
.article h2,.copy h2{font-size:1.42rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  margin:2.7rem 0 1rem;padding-left:.9rem;border-left:5px solid var(--aqua)}
.article h3,.copy h3{font-size:1.14rem;font-weight:800;color:var(--ink);margin:1.7rem 0 .6rem}
.article strong,.copy strong{color:var(--ink);font-weight:750;background:linear-gradient(transparent 66%,#c9f2ec 66%)}
.article ul,.copy ul,.article ol,.copy ol{padding-left:1.35rem;margin-bottom:1.15rem}
.article li,.copy li{margin-bottom:.5rem}
.article figure,.copy figure{margin:1.6rem 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);border:1px solid var(--line)}
.article figcaption,.copy figcaption{font-size:.87rem;color:var(--mute);padding:.7rem 1rem;background:var(--tint);border-top:1px solid var(--line)}
.page-head{padding:3.2rem 0 0}
.page-head h1{font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:-.025em;line-height:1.25;color:var(--ink);font-weight:800;margin-bottom:.8rem}
.page-head .lead{font-size:1.08rem;color:var(--mute);max-width:46rem}
.crumb{font-size:.86rem;color:var(--faint);margin-bottom:1.1rem}
.crumb a{color:var(--faint)}
.crumb a:hover{color:var(--aqua-d)}

/* ── 콜아웃 ───────────────────────────── */
.callout{background:var(--ink);color:#cfe0ec;border-radius:var(--r);border-left:6px solid var(--call);
  padding:1.8rem 1.7rem;margin:2.4rem 0;box-shadow:var(--shadow)}
.callout .t{display:block;font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:.5rem}
.callout p{font-size:.97rem;line-height:1.66}
.callout a{color:#7ef0c9;font-weight:700}

/* ── FAQ ─────────────────────────────── */
.faq{max-width:46rem}
.faq details{border:1px solid var(--line);border-radius:var(--r-s);margin-bottom:.7rem;background:#fff;overflow:hidden}
.faq summary{padding:1.02rem 1.2rem;font-weight:750;color:var(--ink);cursor:pointer;list-style:none;position:relative;padding-right:2.6rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);
  font-size:1.3rem;font-weight:400;color:var(--aqua);transition:transform .18s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid var(--line);background:var(--tint)}
.faq details p{padding:1rem 1.2rem;font-size:.97rem}

/* ── 표 ──────────────────────────────── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s)}
.tbl{width:100%;border-collapse:collapse;font-size:.97rem;min-width:520px}
.tbl th{background:var(--aqua-d);color:#fff;text-align:left;padding:.85rem 1.1rem;font-weight:700;white-space:nowrap}
.tbl td{padding:.82rem 1.1rem;border-top:1px solid var(--line)}
.tbl tr:nth-child(even) td{background:var(--tint)}
.tbl td b{color:var(--ink)}

/* ── 갤러리 ───────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.gal figure{border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-s)}
.gal img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .3s}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{font-size:.82rem;color:var(--mute);padding:.55rem .7rem;line-height:1.4}

/* ── 키워드/롱테일 ─────────────────────── */
.kwchip{display:inline-block;font-size:.88rem;color:var(--mute);background:#fff;border:1px solid var(--line2);
  border-radius:999px;padding:.34rem .85rem;margin:0 .3rem .5rem 0}
a.kwchip:hover{color:var(--aqua-d);border-color:var(--aqua);text-decoration:none}
.lt{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.lt-col .lt-h{font-weight:800;color:var(--ink);font-size:.98rem;margin-bottom:.6rem;padding-bottom:.45rem;border-bottom:2px solid var(--aqua-line)}
.lt-col ul{list-style:none}
.lt-col li{margin-bottom:.3rem}
.lt-col a{font-size:.93rem;color:var(--mute)}
.lt-col a:hover{color:var(--aqua-d)}

/* ── 매거진 상세 ──────────────────────── */
.mag-hero{padding-top:3rem}
.mag-head h1{font-size:clamp(1.55rem,3.2vw,2.2rem);line-height:1.3;letter-spacing:-.025em;color:var(--ink);font-weight:800;margin:.6rem 0 .9rem}
.mag-dek{font-size:1.1rem;color:var(--mute);max-width:46rem;line-height:1.65}
.mag-by{font-size:.88rem;color:var(--faint);margin-top:.9rem}
.mag-body{max-width:46rem}
.mag-body p{margin-bottom:1.15rem}
.mag-body h2{font-size:1.42rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:2.7rem 0 1rem;padding-left:.9rem;border-left:5px solid var(--aqua)}
.mag-body strong{color:var(--ink);background:linear-gradient(transparent 66%,#c9f2ec 66%)}
.mag-body figure{margin:1.5rem 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-s)}
.mag-body figcaption{font-size:.87rem;color:var(--mute);padding:.7rem 1rem;background:var(--tint);border-top:1px solid var(--line)}
.mag-toc{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.5rem;margin:1.8rem 0;max-width:46rem}
.mag-toc-h{font-weight:800;color:var(--ink);font-size:.95rem;margin-bottom:.5rem}
.mag-toc a{display:block;padding:.22rem 0;font-size:.95rem}
.mag-faq-h{font-size:1.3rem;font-weight:800;color:var(--ink);margin:2.8rem 0 1rem}
.mag-tags{margin-top:2rem}
.mag-prog{position:fixed;top:0;left:0;height:3px;background:var(--aqua);z-index:60;width:0}

/* ── 스펙(회사) ───────────────────────── */
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.spec .lt{display:block}
.spec .lt,.lt-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}
.lt-h{font-size:.85rem;color:var(--faint);font-weight:700;margin-bottom:.3rem}

/* ── 푸터(그린-차콜 슬림) ─────────────── */
.site-foot{background:#0c1216;color:#8ba0b2;margin-top:4rem;padding:3rem 0 6.5rem;border-top:3px solid var(--aqua)}
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem}
.foot-brand{font-size:1.25rem;font-weight:800;color:#fff;margin-bottom:.7rem}
.foot-desc{font-size:.92rem;line-height:1.7}
.foot-h{font-size:.92rem;font-weight:800;color:#c9f2ec;margin-bottom:.75rem}
.foot-links a{display:block;color:#8ba0b2;font-size:.93rem;padding:.24rem 0}
.foot-links a:hover{color:#fff}
.biz{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.09);font-size:.85rem;line-height:1.8;color:#65798c}

/* ── 모바일 콜바 + FAB ─────────────────── */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--call);display:none;
  box-shadow:0 -6px 24px rgba(6,12,9,.3)}
/* ★모바일 고정 통화바 — 바 전체가 버튼이다.
   초록 바 위에 초록 .btn 을 얹으면 버튼이 배경에 묻히고(같은 --call),
   옆의 긴 문장이 폭을 먹어 한 줄에 한 단어씩 끊긴다. 문장을 빼고 한 줄로 만든다. */
.callbar-in{display:flex;align-items:center;justify-content:center;gap:.7rem;padding:0;
  color:#fff;font-weight:800;font-size:1.18rem}
.callbar-in p{display:none}
.callbar-in .btn,.callbar-in .btn.big{width:100%;background:transparent;border-radius:0;
  box-shadow:none;padding:1.05rem 16px;font-size:1.2rem;color:#fff}
.callbar-in .btn:hover,.callbar-in .btn:active{background:transparent;color:#fff;
  transform:none;box-shadow:none}
.callbar-in .ic{width:22px;height:22px}
.callbar:active{background:var(--call-d)}
.callfab{position:fixed;right:26px;bottom:26px;z-index:70;display:flex;align-items:center;gap:.6rem;
  background:var(--call);color:#fff;font-weight:800;font-size:1.05rem;padding:.9rem 1.4rem;border-radius:999px;
  box-shadow:0 10px 32px rgba(23,163,74,.45)}
.callfab:hover{text-decoration:none;background:#1cb254;color:#fff}
.callfab .ic{width:20px;height:20px}

/* ── 반응형 ───────────────────────────── */
@media (max-width:1020px){
  .grid.g4{grid-template-columns:repeat(2,1fr)}
  .grid.g3{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .spec{grid-template-columns:repeat(2,1fr)}
  .lt{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr 1fr}
  .hero-facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .topbar .tb-note{display:none}
  .navstrip .gnb{display:flex}   /* 스트립은 모바일에서 가로 스와이프 유지 */
  .gnb a{font-size:.9rem;padding:.66rem .8rem}
  .gnb-toggle{display:none}
  .head-tel .txt > span:last-child{display:none}
  .head-tel b{font-size:.98rem}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .spec{grid-template-columns:1fr}
  .lt{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr;gap:1.8rem}
  .sec{padding:3rem 0}
  .callbar{display:block}
  body{padding-bottom:60px}
  .callfab{display:none}
  .hero-full .hero-in{padding-top:3.4rem}
  .hero-facts{grid-template-columns:1fr 1fr;margin-top:1.8rem}
  .hero-cta .btn.big{width:100%;font-size:1.15rem}
  .hero-cta .btn.ghost{width:100%}
}
@media (min-width:761px){ .callbar{display:none} }

/* ── 관련 매거진 카드 · 후기 · 후기 폼 (2026-08-10) ───────────────── */
.relmag .mag-cat{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.02em;
  color:var(--aqua-d);background:var(--aqua-t);padding:.2rem .55rem;border-radius:6px;margin-bottom:.5rem}
.relmag .mag-thumb{margin:-1.15rem -1.15rem .9rem;border-radius:var(--r) var(--r) 0 0;overflow:hidden;aspect-ratio:4/3}
.relmag .mag-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.stars{display:inline-flex;gap:3px;vertical-align:middle}
.stars i{width:15px;height:15px;display:block;background:var(--line);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.on{background:#f0b429}

.rvcard .rv-body{margin:.7rem 0 .9rem;line-height:1.75;color:var(--body)}
.rvcard .meta{color:var(--mute);font-size:.9rem}

.rvform{display:grid;gap:1rem;margin-top:1.2rem}
.rvform label{display:grid;gap:.4rem;font-weight:700;color:var(--ink);font-size:.96rem}
.rvform input[type=text],.rvform input[type=password],.rvform select,.rvform textarea{
  font:inherit;font-weight:400;color:var(--ink);background:#fff;border:1.5px solid var(--line);
  border-radius:11px;padding:.75rem .9rem;width:100%}
.rvform input:focus,.rvform select:focus,.rvform textarea:focus{
  outline:0;border-color:var(--aqua);box-shadow:0 0 0 3px var(--aqua-t)}
.rvform textarea{resize:vertical;line-height:1.7}
.rvform .req{font-size:.78rem;font-weight:800;color:var(--call);margin-left:.3rem}
.rvform .rvnote{font-size:.88rem;color:var(--mute);line-height:1.6;margin:0}
.rvform button{justify-self:start}
.rvform-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rvform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* 별점 라디오 — 5→1 역순으로 놓고 hover/checked 를 형제 선택자로 칠한다 */
.rvstars{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.rvstars legend{font-weight:700;color:var(--ink);font-size:.96rem;margin-bottom:.45rem}
.rvstars input{position:absolute;opacity:0;width:1px;height:1px}
.rvstars label{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1.5px solid var(--line);border-radius:999px;padding:.45rem .95rem;font-size:.94rem;
  font-weight:700;color:var(--mute);background:#fff;transition:background .12s,color .12s,border-color .12s}
.rvstars label:hover{border-color:var(--aqua);color:var(--aqua-d)}
.rvstars input:checked + label{background:#f0b429;border-color:#f0b429;color:#3a2a00}
.rvstars input:focus-visible + label{outline:2px solid var(--aqua);outline-offset:2px}

@media (max-width:760px){
  .rvform-2{grid-template-columns:1fr}
}