/* 버프애드 공통 스타일 — 홈·소개·상품소개·문의 4개 페이지가 함께 쓴다.
   2026-08-14 멀티페이지 전환 때 index.html 인라인 <style> 에서 통째로 뽑았다.
   페이지별 CSS 파일은 두지 않는다(4장뿐이라 한 파일이 캐시에도 유리하다). */

/* GmarketSans — webfontworld 경로는 404 라 조용히 폴백된다. noonnu 호스팅 사용 */
@font-face{font-family:'GmarketSans';font-weight:500;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');}
@font-face{font-family:'GmarketSans';font-weight:700;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#0B0F0D;
  --ink-2:#151C19;
  --ink-80:#39423E;
  --ink-55:#69736E;
  --ink-35:#98A29D;   /* 선·아이콘·플레이스홀더 전용 — 흰 배경 2.63:1 이라 글자에 쓰면 AA 미달 */
  --ink-45:#67716C;   /* 글자로 읽히는 보조 회색. 흰 배경·연회색 배경 둘 다 AA 통과(2026-08-14 실측) */
  --rule:#E4E8E6;
  --rule-2:#C9D0CC;
  --paper:#FFFFFF;
  --paper-2:#F6F8F7;
  --paper-3:#EDF1EF;

  /* 브랜드 그린 = 로고 확정색 딥그린 #00A34A (2026-08-13).
     종전 주색은 #03C75A 였는데 그건 '네이버 브랜드 그린' 그 자체다. 광고 대행사가 그 색을
     사이트 주색으로 쓰면 ①네이버 공식 서비스로 오인될 소지가 있고 ②로고와 색이 어긋난다.
     그래서 네이버 그린은 '네이버를 가리키는 자리'에만 남긴다 — 히어로 목업 SVG 안의 네이버 화면
     재현은 #03C75A 하드코딩 그대로 두었다(그건 우리 색이 아니라 네이버 화면이라 맞다).
     대비 실측: #00A34A 는 흰 글씨 3.31:1 로 본문 크기에 미달한다. 그래서 흰 글씨가 얹히는
     채움 버튼 배경만 한 단계 어두운 #00823B(4.93:1, WCAG AA 통과)를 쓴다. */
  --green:#00A34A;
  --green-deep:#00823B;
  --green-darker:#006B30;
  /* 어두운 배경 위의 초록 글자용. 브랜드 그린 #00A34A 는 먹색 위에서 3.10:1 이라 작은 글자에 못 쓴다.
     밝은 배경에서 green-deep 을 쓰는 것과 정확히 대칭이다 — 바탕이 뒤집히면 초록도 뒤집는다. */
  --green-on-ink:#35C46F;
  --green-wash:#EAF7F0;
  --green-line:rgba(0,163,74,.3);
  --naver:#03C75A;

  --display:'GmarketSans','Pretendard Variable',Pretendard,sans-serif;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --ease:cubic-bezier(.2,.8,.2,1);
  --nav-h:64px;
  --gut:clamp(20px,4vw,60px);
  --maxw:1300px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  word-break:keep-all;overflow-wrap:break-word;   /* 한국어 어절 단위 줄바꿈 */
  text-wrap:pretty;   /* 줄 끝이 들쭉날쭉하고 마지막 줄에 한 어절만 남는 것을 막는다 */
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
::selection{background:var(--green-deep);color:#fff}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
/* 본문 첫 요소가 고정 헤더 밑으로 숨지 않게 — 홈의 .hero 는 자기 padding 으로 처리한다 */
.page{padding-top:var(--nav-h)}
/* 머리 구역(.page-head)이 이미 숨을 틔워 주므로 그 바로 아래 본문은 위 여백을 줄인다.
   기본값 그대로 두면 머리 아래 108px 이 비어 페이지가 시작을 못 하고 뜬다(2026-08-14 실측) */
.page-head+section{padding-top:clamp(46px,5vw,74px)}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.14;text-wrap:balance}
.h-lg{font-size:clamp(27px,3.6vw,46px)}

.label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-45);display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.label::before{content:'';width:20px;height:1px;background:currentColor;flex:none}
.label b{color:var(--green-deep);font-weight:600}
/* 한글이 섞인 라벨 — Latin 용 자간(.15em)을 그대로 두면 '버 프 애 드' 로 벌어진다 */
.label.ko{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none;white-space:normal;min-width:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:15px;letter-spacing:-.01em;
  padding:13px 24px;border-radius:2px;border:1.5px solid transparent;white-space:nowrap;
  transition:background .2s var(--ease),color .2s,border-color .2s,transform .2s;
}
.btn .arw{transition:transform .28s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
/* 흰 글씨가 얹히므로 브랜드 그린이 아니라 한 단계 어두운 딥그린을 쓴다(대비 4.93:1) */
.btn-fill{background:var(--green-deep);color:#fff}
.btn-fill:hover{background:var(--green-darker)}
.btn-line{border-color:var(--rule-2);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-line.on-ink{border-color:rgba(255,255,255,.3);color:#fff}
.btn-line.on-ink:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-sm{padding:10px 17px;font-size:14px}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.nav.stuck{border-bottom-color:var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:18.5px;letter-spacing:-.02em;flex:none;padding:13px 2px;margin:-13px -2px}
.brand .mark{width:22px;height:22px;flex:none}
/* 로고 픽셀판 워드마크 — 글자까지 로고라 .brand 의 텍스트는 두지 않는다.
   높이 27px 은 눈대중이 아니라 실측값이다: 21px 에서는 칸 사이 흰 줄이 안개처럼 뭉개져 로고가 뿌옇게 보이고,
   24px 부터 격자가 살아나 27px 에서 또렷하다(2026-08-19 크기별 렌더 대조). 이 아래로 내리지 말 것. */
.brand .wordmark{height:27px;width:auto;flex:none;display:block}
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.f-brand .brand .wordmark{height:29px}
@media (max-width:480px){.brand .wordmark{height:24px}}
.nav-links{display:none;gap:28px;min-width:0}
.nav-links a{font-size:14.5px;color:var(--ink-55);position:relative;padding:3px 0;white-space:nowrap;transition:color .2s}
/* width 를 흔들면 레이아웃이 다시 계산된다. scaleX 는 합성 단계에서만 돈다 */
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav-links a:hover{color:var(--ink)}
/* 멀티페이지 전환(2026-08-14) 후 현재 위치 표시는 스크롤 스파이가 아니라 aria-current 로 한다 */
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-act{display:flex;align-items:center;gap:10px;flex:none}
.nav-act .btn{display:none}

/* 세 줄을 중앙에 겹쳐 두고 translateY 로 벌린다 (회전 시 행 밀림 방지) */
.burger{width:40px;height:40px;position:relative;border:1px solid var(--rule);border-radius:2px;flex:none}
.burger span{position:absolute;left:50%;top:50%;width:17px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .18s}
.burger span:nth-child(1){transform:translate(-50%,-50%) translateY(-6px)}
.burger span:nth-child(2){transform:translate(-50%,-50%)}
.burger span:nth-child(3){transform:translate(-50%,-50%) translateY(6px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:translate(-50%,-50%) scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:79;background:var(--paper);
  padding:min(8vh,54px) var(--gut) 36px;display:flex;flex-direction:column;
  transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.drawer.open{opacity:1;transform:none;pointer-events:auto}
.drawer a.dl{font-family:var(--display);font-size:29px;font-weight:700;letter-spacing:-.02em;padding:19px 0;border-bottom:1px solid var(--rule);display:flex;align-items:baseline;gap:14px}
.drawer a.dl .n{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--ink-45);flex:none}
.drawer a.dl[aria-current="page"]{color:var(--green-deep)}
.drawer a.dl[aria-current="page"] .n{color:var(--green-deep)}
.drawer .d-act{margin-top:auto;padding-top:28px;display:grid;gap:10px}
.drawer .d-act .btn{width:100%}
@media (min-width:769px){
  .nav-links{display:flex}
  .nav-act .btn{display:inline-flex}
  .burger,.drawer{display:none}
}

/* ============================================================
   PAGE HEAD — 하위 페이지(소개·상품소개·문의)의 제목 구역
   홈의 히어로가 하던 "여기가 어디인지" 역할을 페이지마다 대신한다
   ============================================================ */
.page-head{
  padding:clamp(46px,5.2vw,84px) 0 clamp(30px,3.4vw,48px);
  border-bottom:1px solid var(--rule);background:var(--paper-2);
}
.crumb{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-45);display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px;min-width:0;
}
/* 음수 마진으로 글줄 위치는 그대로 두고 손가락이 닿는 상자만 키운다 */
.crumb a{color:var(--ink-80);padding:8px 10px;margin:-8px -10px;transition:color .2s}
.crumb a:hover{color:var(--green-deep)}
.crumb b{color:var(--green-deep);font-weight:600}
.crumb .sep{color:var(--ink-45)}
.page-head h1{font-size:clamp(29px,4.1vw,52px);max-width:18ch;margin-bottom:16px}
.page-head h1 em{font-style:normal;color:var(--green)}
.page-head .lede{color:var(--ink-55);font-size:clamp(16px,1.25vw,18px);line-height:1.78;max-width:52ch}
/* 넓은 화면에서는 제목 왼쪽 / 설명 오른쪽 — 홈 .sec-head 와 같은 규칙이라 페이지마다 머리가 같게 읽힌다.
   한 열로 두면 1440px 에서 오른쪽 절반이 통째로 비어 허전하다(2026-08-14 실측) */
@media (min-width:901px){
  .page-head .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:0 44px;align-items:end}
  .page-head .crumb{grid-column:1/-1}
  .page-head h1{grid-column:1;margin-bottom:0}
  .page-head .lede{grid-column:2}
}

/* ============================================================
   화면 목업 (공통) — 실제 캡처 없이 상품을 설명하는 도해
   ============================================================ */
.mock{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 44px rgba(11,15,13,.16))}
.side.store .mock{filter:drop-shadow(0 24px 44px rgba(0,0,0,.55))}

/* ============================================================
   FILM STAGE + CRED BAND — 첫 화면 영상, 그 아래 자격 배지·대표·포지셔닝 한 줄·상담 CTA
   영상이 첫 화면을 갖고 "여기가 뭐 하는 곳인지"는 바로 아래 띠가 글자로 말한다
   ============================================================ */
/* 첫 화면 — 영상이 통째로 갖는다(대표 결정 8/19 ㉯안). 글자를 겹치지 않으므로 그늘도 없다.
   16:9 를 그대로 두면 좁은 화면에서 좌우가 잘리지 않는다 — 대신 큰 화면에서 너무 높아지므로
   상한을 둔다. 상한에서 128px 을 더 빼는 것은 아래 띠의 두 줄(배지·제목과 상담 버튼)이 첫 화면에 들어오게 하려는 것이다.
   영상만 꽉 차면 아래에 무엇이 있는지 모르고 스크롤하지 않는다. */
.filmstage{
  position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100svh - var(--nav-h) - 128px);
  overflow:hidden;background:var(--ink);
}
.hero-film{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* 움직임을 원치 않는 사용자에게는 정지 화면만 남긴다 — 영상만 감추면 칸이 비므로 포스터를 면에 깐다 */
@media (prefers-reduced-motion:reduce){
  .filmstage{background:var(--ink) url('/assets/hero-poster.jpg') center/cover no-repeat}
  .hero-film{display:none}
}
/* 아래 띠 — 자격 배지·대표·포지셔닝 한 줄·상담 CTA. 영상이 위에 있으므로 배경은 먹색 면 그대로다 */
.cred{position:relative;background:var(--ink);color:#fff;border-bottom:1px solid var(--rule)}
.cred>.wrap{position:relative;width:100%}
.cred .wrap{padding-top:20px;padding-bottom:20px}
.cred-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cred-row+.cred-row{margin-top:13px}
.cred-badge{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  background:var(--green-on-ink);color:#06110B;border-radius:999px;
  padding:7px 14px;font-size:13.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
}
.cred-badge svg{flex:none}
.cred-sub{font-size:14.5px;color:rgba(255,255,255,.58);min-width:0;line-height:1.5}
/* 포지셔닝 — 카피 위에 오는 업종 표기 */
.cred-pos{
  font-family:var(--display);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(19px,2.2vw,27px);line-height:1.25;min-width:0;
}
.cred-pos em{font-style:normal;color:var(--green)}
.cred-cta{margin-left:auto;flex:none;display:flex;align-items:center;gap:13px}
.cred-rep{display:flex;align-items:center;gap:11px;flex:none;min-width:0;margin-left:auto}
/* 좁은 화면에서는 줄이 접혀 오른쪽 정렬이 허공에 뜬다 — 왼쪽으로 붙인다 */
@media (max-width:700px){.cred-rep,.cred-cta{margin-left:0}}
/* 대표 사진이 들어올 자리 — 사진을 받기 전까지는 흰 영역에 회색 사람 아이콘만 둔다(대표 지시 8/14).
   먹색 히어로 위에서 흰 칸이 뚜렷하게 잘려 보여야 '여기 사진이 들어온다'가 읽힌다.
   사진이 오면 span.ph 안에 <img> 만 넣으면 되고 이 규칙은 그대로 둔다(img 가 덮는다). */
.cred-rep .ph{
  width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--paper);border:1.5px solid rgba(255,255,255,.22);
  display:grid;place-items:center;color:var(--ink-35);
}
.cred-rep .ph img{width:100%;height:100%;object-fit:cover}
.cred-rep .nm{font-size:13.5px;font-weight:700;line-height:1.3;white-space:nowrap}
.cred-rep .rl{font-size:12px;color:rgba(255,255,255,.62);line-height:1.3;white-space:nowrap}
@media (max-width:760px){
  .cred-cta{margin-left:0;width:100%}
  .cred-cta .btn{flex:1}
  .cred-pos{flex:1 1 100%}
}
/* 버튼 라벨은 nowrap 이라 폭이 줄지 않는다. 나란히 두면 여백을 침범하므로 세로로 쌓는다 */
@media (max-width:480px){
  .cred-cta{flex-direction:column;align-items:stretch;gap:9px}
  .cred-cta .btn{width:100%}
}

/* ============================================================
   HERO — 좌 네이버플레이스 / 우 스마트스토어 (홈 전용)
   ============================================================ */
/* 아래 요약 블록이 자기 padding 을 갖고 있어 히어로 바닥 여백은 0 으로 둔다 */
.hero{padding:var(--nav-h) 0 0}
.split{display:flex;min-height:calc(100svh - var(--nav-h) - 124px);border-bottom:1px solid var(--rule)}
.side{
  flex:1 1 50%;min-width:0;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,38px) clamp(22px,3.2vw,52px) clamp(28px,3.4vw,46px);
  transition:flex-grow .55s var(--ease);
}
.side.place{background:var(--paper)}
.side.place::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 70% at 8% 105%,var(--green-wash) 0%,transparent 62%)}
.side.store{background:var(--ink);color:#fff;border-left:1px solid var(--rule)}
.side.store::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 70% at 92% 105%,rgba(3,199,90,.22) 0%,transparent 60%)}
.side::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--grid,rgba(11,15,13,.05)) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid,rgba(11,15,13,.05)) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to top,#000,transparent 78%)}
.side.store{--grid:rgba(255,255,255,.07)}

.side .idx{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;color:var(--ink-45);position:relative;z-index:2}
.side.store .idx{color:rgba(255,255,255,.6)}
.side .idx b{color:var(--green-deep);font-weight:600}
.side.store .idx b{color:var(--green-on-ink)}

/* 목업이 히어로 가운데를 채운다 */
.side .stage{
  position:relative;z-index:2;flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,2.4vw,30px) 0;
}
.side .stage .mock{max-width:min(100%,430px)}

.side-in{position:relative;z-index:2;max-width:38ch;min-width:0}
.side h2{margin:0 0 13px;font-size:clamp(28px,3.7vw,46px)}
.side h2 em{font-style:normal;color:var(--green)}
.side.store h2 em{color:var(--green-on-ink)}
.side p{font-size:clamp(15.5px,1.1vw,17px);line-height:1.7;color:var(--ink-55);margin-bottom:22px}
.side.store p{color:rgba(255,255,255,.62)}
.side .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.chip{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  padding:5px 11px;border:1px solid var(--rule-2);border-radius:999px;color:var(--ink-55);white-space:nowrap}
.side.store .chip{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.66)}

@media (min-width:901px) and (hover:hover){
  .split:hover .side{flex-grow:.86}
  .split .side:hover{flex-grow:1.28}
}
@media (max-width:900px){
  .split{flex-direction:column;min-height:0}
  .side{flex:none}
  .side .stage{padding:26px 0 30px}
  .side .stage .mock{max-width:min(100%,380px)}
  .side.store{border-left:none;border-top:1px solid var(--rule)}
  .side-in{max-width:none}
}

.quickbar{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.quickbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:15px;padding-bottom:15px}
.qb-note{font-size:15.5px;color:var(--ink-55);min-width:0}
.qb-note b{color:var(--ink);font-weight:700}
.qb-links{display:flex;gap:8px;flex-wrap:wrap;min-width:0}

/* ============================================================
   SECTION SHELL
   ============================================================ */
section{padding:clamp(64px,7.5vw,112px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:clamp(34px,4.2vw,60px)}
.sec-head h2{max-width:17ch;margin-top:14px}
.sec-head p{color:var(--ink-55);font-size:clamp(16px,1.25vw,18px);max-width:50ch;line-height:1.78}
@media (min-width:901px){
  .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,.88fr);align-items:end;gap:44px}
  .sec-head .lead{grid-column:1}
  .sec-head p{grid-column:2}
}
/* 한 페이지 안에서 내용을 덩어리로 나눈다. section 을 여러 개 쓰면 위아래 padding 이
   두 번 겹쳐 빈 화면이 생기므로, 페이지당 section 은 하나 두고 안에서 .blk 로 나눈다 */
.blk+.blk{margin-top:clamp(48px,5.6vw,86px)}
/* 페이지 안에서 블록을 나누는 작은 머리표 */
.blk-head{margin-bottom:clamp(20px,2.2vw,30px)}
.blk-head h2{font-size:clamp(21px,2.2vw,29px);margin-top:12px;max-width:24ch}
.blk-head p{color:var(--ink-55);font-size:16px;line-height:1.76;max-width:52ch;margin-top:10px}

/* ============================================================
   홈 · 요약 카드 3 — 소개 / 상품소개 / 문의로 가는 길
   멀티페이지 전환(2026-08-14)으로 홈에서 잘려 나간 내용을 한 줄씩 남긴다
   ============================================================ */
.sum{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:769px){.sum{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sum-card{
  background:var(--paper);padding:clamp(24px,2.7vw,38px);min-width:0;
  display:flex;flex-direction:column;transition:background .25s;
}
.sum-card:hover{background:var(--paper-2)}
.sum-card .sn{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;color:var(--green-deep);display:block;margin-bottom:15px}
.sum-card h3{font-size:clamp(19px,1.95vw,24px);margin-bottom:11px}
.sum-card .sd{color:var(--ink-55);font-size:15.5px;line-height:1.72;margin-bottom:20px}
.sum-list{border-top:1px solid var(--rule);margin-bottom:24px}
.sum-list li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-55);line-height:1.62;min-width:0}
.sum-list li .m{font-family:var(--mono);font-size:12px;color:var(--green-deep);flex:none;padding-top:2px}
.sum-go{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;color:var(--ink)}
.sum-go .arw{transition:transform .28s var(--ease)}
.sum-card:hover .sum-go{color:var(--green-deep)}
.sum-card:hover .sum-go .arw{transform:translateX(4px)}

/* 신뢰 한 줄 — 광고비 구조는 홈에서 한 번 짚고 상품 페이지에서 자세히 */
.trust{
  margin-top:clamp(24px,2.8vw,38px);display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  padding:17px clamp(18px,2vw,24px);background:var(--green-wash);border:1px solid var(--green-line);
}
.trust .tt{font-weight:700;font-size:14.5px;color:var(--green-darker);flex:none}
.trust p{font-size:15px;color:var(--ink-80);line-height:1.68;min-width:0}

/* ============================================================
   CTA BAND — 페이지 끝에서 다음 걸음을 가리킨다 (홈·소개·상품소개 공용)
   ============================================================ */
.cta-band{
  border:1.5px solid var(--green);background:var(--paper);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.6vw,38px);
  padding:clamp(28px,3.4vw,50px);align-items:center;
}
@media (min-width:901px){.cta-band{grid-template-columns:minmax(0,1fr) auto}}
.cta-band h2{font-size:clamp(23px,2.6vw,35px);margin-bottom:11px}
.cta-band h2 em{font-style:normal;color:var(--green-deep)}
.cta-band p{color:var(--ink-55);font-size:16px;line-height:1.76;max-width:48ch}
.cta-band.mt-lg{margin-top:clamp(44px,5vw,72px)}
.cta-act{display:flex;gap:10px;flex-wrap:wrap;min-width:0}
@media (max-width:480px){
  .cta-act{flex-direction:column;align-items:stretch}
  .cta-act .btn{width:100%}
}

/* ============================================================
   01 · 소개
   ============================================================ */
.about{border-bottom:1px solid var(--rule)}

/* 왜 두 채널만 — 대비 표 */
.why{display:grid;grid-template-columns:1fr;border:1px solid var(--ink)}
@media (min-width:769px){.why{grid-template-columns:1fr 1fr}}
/* 왼쪽이 페이지 배경과 같은 흰색이면 '카드'로 안 읽히고 검은 박스만 튀어나온다.
   옅게 깔아 한 쌍으로 묶는다 */
.why-col{padding:clamp(24px,2.6vw,36px);min-width:0;background:var(--paper-2)}
.why-col.b{background:var(--ink);color:#fff}
.why-col .wt{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--ink-45);margin-bottom:18px}
.why-col.b .wt{color:var(--green-on-ink)}
.why-col h3{font-size:clamp(19px,1.9vw,25px);margin-bottom:16px}
.why-row{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--rule);font-size:15.5px;color:var(--ink-55);line-height:1.6}
.why-col.b .why-row{border-top-color:rgba(255,255,255,.13);color:rgba(255,255,255,.72)}
.why-row .m{font-family:var(--mono);flex:none;width:14px;color:var(--ink-45)}
.why-col.b .why-row .m{color:var(--green-on-ink)}

.pillars{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:641px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pillar{background:var(--paper);padding:clamp(22px,2.4vw,32px);min-width:0;transition:background .25s}
.pillar:hover{background:var(--paper-2)}
.pillar-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.pillar .pn{font-family:var(--mono);font-size:11.5px;color:var(--green-deep);letter-spacing:.13em}
.pillar .pic{
  width:38px;height:38px;flex:none;border-radius:2px;display:grid;place-items:center;
  background:var(--green-wash);color:var(--green-deep);
  transition:background .25s,color .25s;
}
.pillar:hover .pic{background:var(--green);color:#fff}
.pillar h3{font-size:18px;margin-bottom:9px}
.pillar p{color:var(--ink-55);font-size:15.5px;line-height:1.72}

/* 프로세스 — 연결선 있는 타임라인 */
.flow-row{display:grid;grid-template-columns:1fr;gap:0;margin-top:22px}
@media (min-width:701px){.flow-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{position:relative;padding:30px 0 0;min-width:0}
@media (min-width:701px){.step{padding:34px 22px 0 0}}
.step::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--ink)}
.step .dot{position:absolute;top:-4.5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.step:first-child .dot{background:var(--green);border-color:var(--green)}
.step-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.step .sic{
  width:34px;height:34px;flex:none;border-radius:2px;display:grid;place-items:center;
  background:var(--ink);color:var(--green-on-ink);
}
.step:first-child .sic{background:var(--green);color:#fff}
.step .sn{font-family:var(--mono);font-size:11.5px;color:var(--ink-45);letter-spacing:.13em}
.step h3,.step h4{font-size:17px;margin-bottom:8px}
.step p{font-size:15px;color:var(--ink-55);line-height:1.7;max-width:38ch}
.step .stag{
  display:inline-block;margin-top:11px;padding:4px 10px;border-radius:999px;
  background:var(--green-wash);color:var(--green-darker);
  font-size:12px;font-weight:700;white-space:nowrap;
}
@media (max-width:700px){
  .step{padding:24px 0 26px 22px}
  .step::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto}
  .step .dot{top:22px;left:-4px}
}

/* ============================================================
   02 · 상품소개
   ============================================================ */
/* 한 장짜리 시절엔 앞뒤 섹션과 구분하려고 paper-2 를 깔았는데, 독립 페이지가 된 뒤로는
   머리 구역(.page-head 도 paper-2)과 배경이 같아져 경계가 사라졌다. 본문은 흰색으로 되돌린다 */
.products{background:var(--paper);border-bottom:1px solid var(--rule)}
.p-cols{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:901px){.p-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.p-col{background:var(--paper);padding:clamp(24px,2.6vw,38px);min-width:0}
.p-col.ink{background:var(--ink);color:#fff}

.p-hero{
  margin:-4px 0 24px;padding:clamp(18px,2vw,26px);border-radius:3px;
  background:var(--paper-2);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
}
.p-col.ink .p-hero{background:var(--ink-2);border-color:rgba(255,255,255,.1)}
.p-hero .mock{max-width:min(100%,330px);filter:none}

.p-col .kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--green-deep);margin-bottom:12px;display:block}
.p-col.ink .kicker{color:var(--green-on-ink)}
/* 상품소개가 독립 페이지가 된 뒤 패키지 제목은 h1 바로 아래 층인 h2 다(옛 한 장짜리에서는 h3 였다) */
.p-col h2,.p-col h3{font-size:clamp(21px,2.1vw,29px);margin-bottom:11px}
.p-col .sub{font-size:15.5px;color:var(--ink-55);line-height:1.72;max-width:38ch;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.p-col.ink .sub{color:rgba(255,255,255,.7);border-bottom-color:rgba(255,255,255,.14)}

.p-item{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:15px 0;border-bottom:1px solid var(--rule)}
.p-col.ink .p-item{border-bottom-color:rgba(255,255,255,.1)}
.p-item .n{color:var(--green-deep);padding-top:3px}
.p-col.ink .p-item .n{color:var(--green-on-ink)}
.p-item .t{font-weight:700;font-size:15.5px;letter-spacing:-.01em;margin-bottom:4px}
.p-item .d{font-size:15px;color:var(--ink-55);line-height:1.68}
.p-col.ink .p-item .d{color:rgba(255,255,255,.66)}

/* 패키지 가격 */
.p-price{margin-top:26px;padding-top:22px;border-top:2px solid var(--ink);display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.p-col.ink .p-price{border-top-color:var(--green)}
.p-price .lb{font-size:13.5px;color:var(--ink-55);margin-bottom:4px}
.p-col.ink .p-price .lb{color:rgba(255,255,255,.66)}
.p-price .amt{font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,38px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.p-price .amt small{font-size:.5em;font-weight:700;margin-left:3px;letter-spacing:-.01em}
.p-price .vat{font-size:12.5px;color:var(--ink-45);white-space:nowrap;padding-bottom:4px}
.p-col.ink .p-price .vat{color:rgba(255,255,255,.6)}

/* CPC 강조 블록 */
.cpc{margin-top:clamp(26px,3vw,42px);border:1.5px solid var(--green);background:var(--paper);display:grid;grid-template-columns:1fr}
@media (min-width:901px){.cpc{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.cpc-l{padding:clamp(26px,3vw,42px);min-width:0}
.cpc-tag{display:inline-flex;align-items:center;gap:7px;background:var(--green-deep);color:#fff;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;margin-bottom:16px;white-space:nowrap}
.cpc-l h2,.cpc-l h3{font-size:clamp(22px,2.3vw,31px);margin-bottom:13px}
.cpc-l h2 em,.cpc-l h3 em{font-style:normal;color:var(--green-deep)}
.cpc-l p{font-size:15px;color:var(--ink-55);line-height:1.76;max-width:44ch}
.cpc-r{padding:clamp(26px,3vw,42px);background:var(--green-wash);border-top:1.5px solid var(--green);min-width:0}
@media (min-width:901px){.cpc-r{border-top:none;border-left:1.5px solid var(--green)}}
.cpc-r .rt{font-size:13px;font-weight:700;color:var(--green-darker);margin-bottom:16px}
.cpc-flow{display:grid;gap:11px}
.cpc-step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:11px;align-items:start;font-size:14px;color:var(--ink-80);line-height:1.6}
.cpc-step .cn{font-family:var(--mono);font-size:11.5px;color:var(--green-darker);background:#fff;border:1px solid var(--green-line);border-radius:50%;width:24px;height:24px;display:grid;place-items:center;flex:none}
.cpc-step b{font-weight:700;color:var(--ink)}
.cpc-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--green-line);font-size:13.5px;color:var(--ink-80);line-height:1.7}

.p-note{margin-top:clamp(24px,2.6vw,36px);padding:20px 22px;border:1px solid var(--rule);background:var(--paper);font-size:14.5px;color:var(--ink-55);line-height:1.74}
.p-note b{color:var(--ink)}

/* ============================================================
   03 · 문의하기
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,60px);align-items:start}
@media (min-width:901px){.contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.ch-list{display:grid;border-top:1px solid var(--ink);margin-top:22px}
.ch{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:15px;align-items:center;padding:19px 0;border-bottom:1px solid var(--rule);transition:transform .28s var(--ease)}
.ch:hover{transform:translateX(8px)}
.ch .ic{width:36px;height:36px;border:1px solid var(--rule-2);border-radius:2px;display:grid;place-items:center;color:var(--green);flex:none}
.ch .cb{min-width:0}
.ch .ct{font-weight:700;font-size:15.5px}
.ch .cd{font-size:13.5px;color:var(--ink-55);margin-top:2px}
.ch .go{font-family:var(--mono);font-size:12px;color:var(--ink-45);white-space:nowrap}
/* 문의 페이지에서 무엇을 받는지 미리 알려 준다 */
/* 카카오 채널 추가 — 안에 들어가는 것이 둘이다. SDK 가 그리는 카카오 공식 이미지 버튼(성공)과
   site.js 가 넣는 대비책 링크(SDK 가 막혔을 때). 어느 쪽이 들어와도 같은 자리에 같은 모양으로 앉게 한다.
   flex-wrap 은 360px 에서 버튼과 설명이 두 줄로 갈라지게 하고, min-width:0 은 한국어 설명이
   글자 단위로 세로로 쌓이는 것을 막는다(flex 자식은 이걸 안 주면 줄바꿈 계산이 어긋난다). */
.kakao-add{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kakao-add #kakao-add-channel{flex:none;line-height:0}
.kakao-add #kakao-add-channel img{display:block}
.kakao-add .btn{padding:11px 18px;font-size:14px}
.kakao-add p{flex:1;min-width:180px;font-size:13px;color:var(--ink-45);line-height:1.6;margin:0}
.ch-note{margin-top:26px;padding:18px 20px;background:var(--paper-2);border:1px solid var(--rule);font-size:14px;color:var(--ink-55);line-height:1.72}
.ch-note b{color:var(--ink);font-weight:700}

.form{border:1px solid var(--ink);padding:clamp(22px,2.6vw,36px);background:var(--paper)}
.form-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.form-head h2,.form-head h3{font-size:21px}
.form-head .req{font-family:var(--mono);font-size:11.5px;color:var(--ink-45);white-space:nowrap}
.f{margin-bottom:15px;min-width:0}
.f label{display:block;font-size:13px;font-weight:600;color:var(--ink-80);margin-bottom:6px}
.f label .st{color:var(--green-deep)}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-2);border-radius:2px;padding:12px 13px;transition:border-color .2s,box-shadow .2s}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-35)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-wash)}
.f textarea{resize:vertical;min-height:96px;line-height:1.7}
.f-row{display:grid;grid-template-columns:1fr;gap:13px}
@media (min-width:521px){.f-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:7px}
.radio{position:relative;min-width:0}
.radio input{position:absolute;opacity:0;width:0;height:0}
.radio span{display:block;text-align:center;padding:11px 8px;font-size:14px;font-weight:600;
  border:1px solid var(--rule-2);border-radius:2px;color:var(--ink-55);transition:all .2s var(--ease)}
.radio input:checked+span{border-color:var(--green);background:var(--green-wash);color:var(--green-darker)}
.radio input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.agree{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink-55);margin:5px 0 3px;line-height:1.6}
.agree input{width:19px;height:19px;margin-top:1px;accent-color:var(--green-deep);flex:none}
/* 문장 안 링크라 손가락 규격(WCAG 2.5.8)의 inline 예외에 해당하지만, 그래도 상자를 조금 키운다 */
.agree a{text-decoration:underline;text-underline-offset:2px;padding:6px 3px;margin:-6px -3px}
.submit{width:100%;margin-top:16px;padding:15px;font-size:16px}
.sent{display:none;text-align:center;padding:40px 12px}
.sent.show{display:block}
.sent .tick{width:52px;height:52px;border-radius:50%;background:var(--green-wash);color:var(--green-deep);display:grid;place-items:center;margin:0 auto 16px}
.sent h3{font-size:20px;margin-bottom:8px}
.sent p{font-size:14.5px;color:var(--ink-55);line-height:1.7}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:#fff;padding:clamp(48px,5.5vw,76px) 0 30px}
.f-top{display:grid;grid-template-columns:1fr;gap:32px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.13)}
@media (min-width:769px){.f-top{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:44px}}
.f-brand .brand{color:#fff;margin-bottom:14px}
.f-brand p{color:rgba(255,255,255,.62);font-size:14px;line-height:1.78;max-width:32ch}
/* h2 인 이유 = 본문 마지막 제목이 h2 라 h4 를 쓰면 층이 건너뛴다(스크린리더 목차가 끊긴다) */
.f-col h2{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:14px;font-weight:500;line-height:1.5}
.f-col a,.f-col p{display:block;font-size:14.5px;color:rgba(255,255,255,.72);margin-bottom:2px;padding:7px 0;transition:color .2s}
.f-col a:hover{color:var(--green-on-ink)}
.f-col a[aria-current="page"]{color:var(--green-on-ink)}
.legal{display:grid;grid-template-columns:1fr;gap:13px 32px;padding:30px 0;border-bottom:1px solid rgba(255,255,255,.13)}
@media (min-width:641px){.legal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.legal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lg{min-width:0}
.lg span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:4px}
.lg strong{font-size:14px;font-weight:600;color:rgba(255,255,255,.78)}
.f-bot{padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.f-bot p{font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.55)}
.f-bot nav{display:flex;gap:17px;flex-wrap:wrap}
.f-bot nav a{font-size:12.5px;color:rgba(255,255,255,.62);white-space:nowrap;padding:7px 0}
.f-bot nav a:hover{color:var(--green-on-ink)}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule);background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  transform:translateY(110%);transition:transform .35s var(--ease)}
.dock.show{transform:none}
.dock a{padding:15px 8px;text-align:center;font-weight:700;font-size:14.5px;white-space:nowrap}
.dock a+a{background:var(--green-deep);color:#fff}
@media (min-width:769px){.dock{display:none}}
@media (max-width:768px){.dock.show~footer{padding-bottom:66px}}

/* reveal — JS 살아 있을 때만 숨긴다 */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}.rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s}.rv[data-d="4"]{transition-delay:.28s}

@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.side>*{animation:rise .75s var(--ease) both}
.side>*:nth-child(1){animation-delay:.05s}
.side>*:nth-child(2){animation-delay:.14s}
.side>*:nth-child(3){animation-delay:.24s}

/* ── 상품 상세(단일 패키지) — 2026-09-01 클라 요청으로 신설 ──────────────────
   "각각 한 개씩만 보이게" + "좀 더 큼지막하게 한 개씩 딱딱 이해할 수 있도록".
   .p-cols(2열 비교)를 안 쓰고 한 패키지만 넓게 편다. p-col 을 그대로 재사용하되
   테두리 없이 폭을 다 쓰고 항목만 키운다 — 새 색·새 폰트를 쓰지 않아 기존 톤이 유지된다. */
.p-solo{background:var(--paper);border:1px solid var(--rule);padding:clamp(26px,3.4vw,52px)}
.p-solo .p-hero .mock{max-width:min(100%,460px)}
.p-solo h2{font-size:clamp(26px,3.4vw,42px)}
.p-solo .sub{font-size:clamp(16px,1.5vw,19px);max-width:52ch}

/* 항목 — 아이콘·제목·설명을 한 단씩 크게. 902px 이상에서 제목과 설명을 두 단으로 나눠
   훑을 때 제목만 먼저 들어오게 한다(클라 요청의 "한 개씩 딱딱"). */
.p-solo .p-item{grid-template-columns:26px minmax(0,1fr);gap:16px;padding:clamp(20px,2vw,28px) 0}
.p-solo .p-item .n{width:19px;height:19px;padding-top:4px}
.p-solo .p-item .t{font-size:clamp(18px,1.9vw,23px);margin-bottom:7px;line-height:1.35}
.p-solo .p-item .d{font-size:clamp(15px,1.4vw,17px);line-height:1.75;max-width:58ch}
@media (min-width:902px){
  .p-solo .p-item>div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:8px 30px;align-items:baseline}
  .p-solo .p-item .t{margin-bottom:0}
}
.p-solo .p-price{margin-top:clamp(24px,2.6vw,36px)}
.p-solo .p-buy{margin-top:16px}

/* 제휴 촬영 강조 — 클라가 "강하게 어필되었음 좋겠습니다" 라고 짚은 곳. */
.ally{margin-top:clamp(22px,2.4vw,32px);padding:clamp(20px,2.2vw,30px);border:1px solid var(--green);
      background:var(--green-pale,#F4FCF7);border-radius:4px}
.ally .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;
           letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);margin-bottom:11px}
.ally h3{font-size:clamp(19px,2vw,25px);margin-bottom:9px;line-height:1.35}
.ally p{font-size:clamp(15px,1.4vw,16.5px);color:var(--ink-55);line-height:1.75;max-width:56ch}
.ally a.al-link{display:inline-flex;align-items:center;gap:6px;margin-top:13px;font-weight:600;
                color:var(--green-deep);border-bottom:1.5px solid currentColor;padding-bottom:1px}

/* 허브 — 두 패키지를 짧게만 소개하고 각 상세로 보낸다. */
.p-pick .p-col{padding-bottom:clamp(22px,2.4vw,30px)}
.p-pick .p-item{padding:11px 0}
.p-pick .p-item .d{display:none}
.p-pick .p-more{margin-top:18px}