/* ═══════════════════════════════════════════════════════════════════════════
   브릿지 페이지 v4 — 샘플 6종 + 가격 안내 (인스타·카톡에서 들어오는 첫 화면)
   근거: 바탕화면 **design_handoff_bridge_v4/README.md** (hifi)
   ⚠ v2(블랙 히어로+화이트 카드)·v3(아이보리 에디토리얼)은 폐기됐다. 옛 판의 값(#f4f3f0
     바탕, 표지를 크게 세운 갤러리, 고운바탕 제목…)을 되살리지 말 것 — v4 가 정본이다.

   무드: **더스티 블루 위에 프로스티드 글래스 패널 한 장.** 페이지 전체가 그 패널 안에 든다.
   - 색은 뮤트 블루 한 계열 + 슬레이트 잉크. 고채도는 헤더 버튼(#439EDB) 하나뿐이다.
   - 제목은 **일부러 작다**(24~36px). 레퍼런스의 대형 디스플레이 타이틀은 배제했다.
   - 브레이크포인트는 900px 하나. 나머지는 clamp() 와 auto-fit 그리드로 잇는다.
   - 한글 설명문에는 word-break:keep-all.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#d9e1ea;                      /* 더스티 블루 바탕 */
  --ink:#1f2a3a;                     /* 본문·제목·다크 버튼 */
  --accent:#3e5a7a;                  /* 세리프 태그라인·가격·단계 번호·FAQ 마커·지표 숫자 */
  --action:#439EDB;                  /* 헤더 [내 청첩장 관리] — 이 페이지의 유일한 고채도 */
  --on-dark:#eef3f8;
  --glass:rgba(255,255,255,.42);
  --glass-bd:rgba(255,255,255,.7);
  --card:rgba(255,255,255,.62);
  --card-hi:rgba(255,255,255,.8);
  --card-bd:rgba(255,255,255,.9);
  --thumb-bg:#e1e7ee;
  --rule:rgba(31,42,58,.12);           /* 섹션 구분선 */
  --rule-2:rgba(31,42,58,.1);          /* 항목 구분선 */
  --rule-3:rgba(31,42,58,.08);         /* 헤더 아래 */
  --pad:clamp(20px, 3.4vw, 48px);      /* 섹션 좌우 */
  --pad-grid:clamp(14px, 2.4vw, 32px); /* 카드 그리드 섹션 좌우 */
  --sec-top:clamp(34px, 4.6vw, 72px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:'Pretendard', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* 배경 블롭 — 유리 뒤에서 번지는 색. 고정이라 스크롤해도 같은 자리에 머문다.
   ⚠ pointer-events:none 이 빠지면 페이지 전체가 클릭을 못 받는다. */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 40% at 10% 8%,  #e8eef5 0%, rgba(232,238,245,0) 100%),
    radial-gradient(46% 40% at 92% 14%, #c3d2e2 0%, rgba(195,210,226,0) 100%),
    radial-gradient(52% 44% at 80% 88%, #cbd6e4 0%, rgba(203,214,228,0) 100%),
    radial-gradient(40% 34% at 12% 90%, #dcdde9 0%, rgba(220,221,233,0) 100%); }

.shell{ position:relative; z-index:1; max-width:1240px; margin:0 auto;
  padding:clamp(14px,2.4vw,32px) clamp(12px,2.2vw,28px) clamp(40px,5vw,72px); }

/* 유리 패널 — 페이지 전체가 이 안에 든다 */
.panel{ background:var(--glass);
  -webkit-backdrop-filter:blur(34px) saturate(1.4);
          backdrop-filter:blur(34px) saturate(1.4);
  border:1px solid var(--glass-bd); border-radius:clamp(22px,3vw,36px);
  box-shadow:0 30px 90px rgba(31,42,58,.14); overflow:hidden; }

/* PC 에서만 보이는 것(헤더 네비). 900px 하나로 가른다. */
.pc-only{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ── 헤더 ─────────────────────────────────────────────────────────────────
   ⚠ sticky 가 아니다. 그래서 각 섹션에 scroll-margin-top 을 줄 필요가 없다.
     sticky 로 바꾸려면 [id] 에 ~80px 을 함께 넣어야 앵커가 헤더 밑에 깔리지 않는다. */
.hd{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(16px,2vw,24px) var(--pad); border-bottom:1px solid var(--rule-3); }
.hd__logo img{ height:40px; width:auto; opacity:.9; }
.hd__nav{ display:flex; gap:32px; font-size:13px; letter-spacing:.02em;
  color:rgba(31,42,58,.62); }
.hd__nav a:hover{ color:var(--ink); }
.hd__acts{ display:flex; align-items:center; gap:10px; }
/* 기존 고객용 버튼이다("문의하기"가 아니다). 이 페이지에서 채도가 있는 유일한 면. */
.hd__btn{ display:inline-flex; align-items:center; white-space:nowrap;
  font-size:12.5px; font-weight:700; padding:10px 18px; border-radius:999px;
  background:var(--action); color:var(--on-dark); transition:opacity .2s; }
.hd__btn:hover{ opacity:.85; }

/* 카카오톡 문의 — 옆의 [내 청첩장 관리] 와 **채도를 다투지 않게** 테두리만 준다.
   ⚠ 카카오 노랑을 칠하지 않는다. 이 페이지에서 채도가 있는 면은 하나뿐이라는 규칙이 있고,
     노란 버튼을 넣는 순간 헤더가 그쪽으로 쏠린다(아이콘만으로 카카오인 것은 충분히 읽힌다). */
.hd__kakao{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:999px;
  border:1px solid var(--rule-2); color:rgba(31,42,58,.72);
  transition:border-color .2s, color .2s; }
.hd__kakao:hover{ border-color:rgba(31,42,58,.32); color:var(--ink); }
.hd__kakao .ico-kakao{ width:15px; height:15px; }

/* 좁은 화면에서는 글자를 접고 아이콘만 남긴다. 두 버튼이 나란히 찌부러지느니 하나를 줄인다.
   ⚠ 그래도 **44px 은 지킨다** — 넓은 연령대가 누르는 버튼이라 작게 만들지 않는다. */
@media (max-width:560px){
  .hd__kakao{ width:44px; height:44px; padding:0; justify-content:center; gap:0; }
  .hd__kakao-t{ display:none; }
  .hd__kakao .ico-kakao{ width:19px; height:19px; }
  .hd__acts{ gap:8px; }

  /* 접힌 상태에서 앞 5개만 남긴다. is-collapsed 는 JS 가 붙인다 — 이 미디어쿼리 안에만 두어
     넓은 화면에서는 클래스가 남아 있어도 목록이 잘리지 않는다(회전·리사이즈 안전장치). */
  .feat.is-collapsed li:nth-child(n+6){ display:none; }
  .feat.is-collapsed li:nth-child(5){ border-bottom:none; }
}

/* ── 히어로 ───────────────────────────────────────────────────────────────
   ⚠ 제목이 작은 것은 **의도**다(24~36px). 크게 키우지 말 것 — 레퍼런스의 대형
     디스플레이 타이틀은 검토 끝에 배제했다(v4 결정 히스토리). */
.hero{ padding:clamp(32px,4.4vw,64px) var(--pad) clamp(24px,3vw,40px);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:20px 40px; }
.hero__txt{ flex:1 1 380px; }
.hero__tag{ font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:clamp(16px,1.3vw,19px); color:var(--accent); }
.hero__h1{ margin:12px 0 0; font-size:clamp(24px,2.6vw,36px); font-weight:700;
  line-height:1.3; letter-spacing:-.03em; word-break:keep-all; }
.hero__p{ margin:14px 0 0; max-width:520px; font-size:clamp(13.5px,1.05vw,15px);
  line-height:1.8; color:rgba(31,42,58,.7); word-break:keep-all; }
.hero__chips{ flex:0 1 auto; display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-size:12.5px; padding:7px 13px; border-radius:999px;
  border:1px solid rgba(31,42,58,.16); color:rgba(31,42,58,.72); white-space:nowrap; }

/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
.sec{ padding:var(--sec-top) var(--pad) 0; }
.sec--grid{ padding-left:var(--pad-grid); padding-right:var(--pad-grid); }
.eyebrow{ font-size:11px; letter-spacing:.24em; color:rgba(31,42,58,.5); }
.h2{ margin:12px 0 0; font-size:clamp(20px,1.8vw,26px); font-weight:700;
  letter-spacing:-.03em; line-height:1.35; word-break:keep-all; }
.row{ display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:6px 20px; }

/* ── 샘플 6종 ─────────────────────────────────────────────────────────── */
.tpl-intro{ padding:0 6px 14px; }
.tpl-intro__l{ font-size:14px; color:rgba(31,42,58,.7); word-break:keep-all; }
.tpl{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,300px),1fr));
  gap:clamp(10px,1.2vw,14px); }
.tpl__i{ display:flex; flex-direction:column; padding:clamp(20px,2vw,26px);
  background:var(--card); border:1px solid var(--card-bd); border-radius:22px;
  color:var(--ink); transition:transform .25s ease, background .25s ease; }
.tpl__i:hover{ transform:translateY(-3px); background:var(--card-hi); }
.tpl__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.tpl__nm{ font-size:clamp(19px,1.6vw,22px); font-weight:700; letter-spacing:-.03em; }
.tpl__no{ font-family:'Cormorant Garamond', serif; font-size:15px; letter-spacing:.14em;
  color:rgba(31,42,58,.5); }
.tpl__ds{ font-size:12.5px; color:rgba(31,42,58,.58); margin-top:4px; word-break:keep-all; }
/* 표지를 **원형으로 오려** 넣는다. 흰 링(0 0 0 6px)이 유리 위에 뜬 느낌을 만든다.
   ⚠ object-position 50% 30% 는 조정값이다 — 청첩장 위쪽 이름·날짜가 원 안에 오도록
     맞춘 것이라 함부로 바꾸면 원 안이 여백만 남는다.
   ⚠ 좌우는 50% 고정이다. 원 안에서 중앙에 오는 것은 썸네일(assets/bridge/tpl-0N.jpg)이
     표지를 좌우 대칭으로 담고 있기 때문이지 CSS 가 밀어 주는 게 아니다 — 한쪽만 잘린
     썸네일을 object-position 으로 보정하지 말고 이렇게 다시 뜬다:
       ① 브라우저 폭 496px 로 /preview/template/LILT_00N 을 찍고(2배 해상도로 떠서 화질 확보)
       ② 폰 프레임 바깥 좌우 여백을 **양쪽 같은 폭으로** 잘라낸 뒤 720px 폭으로 줄인다
       ③ 세로는 위 30% 를 전제로 위·아래를 잘라 맞춘다 — 그래서 파일마다 높이가 다르고,
          높이는 통일 대상이 아니다(폭만 720 으로 맞추면 된다). */
.tpl__th{ width:min(100%,250px); aspect-ratio:1; border-radius:999px; overflow:hidden;
  margin:clamp(18px,2vw,26px) auto 0; background:var(--thumb-bg);
  box-shadow:0 0 0 6px rgba(255,255,255,.7), 0 18px 40px rgba(31,42,58,.12); }
.tpl__th img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.tpl__ft{ display:flex; align-items:center; justify-content:space-between;
  margin-top:clamp(18px,2vw,26px); padding-top:16px; border-top:1px solid var(--rule-2); }
.tpl__pr{ font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--accent); }
/* 가격이 아직 정해지지 않은 템플릿. 금액과 같은 자리에 오지만 **금액처럼 보이면 안 된다** —
   강조색을 빼고 한 톤 눌러 "값이 아니라 안내"로 읽히게 한다. */
.tpl__pr--ask{ font-weight:600; font-size:13px; color:rgba(31,42,58,.6); }
.tpl__go{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px;
  color:rgba(31,42,58,.7); }
.tpl__go i{ display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:999px; background:var(--ink); color:var(--on-dark);
  font-family:'Cormorant Garamond', serif; font-size:17px; font-style:normal; }

/* ── 가격 · 포함 기능 ─────────────────────────────────────────────────── */
.price{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,300px),1fr));
  gap:clamp(24px,3vw,56px); }
.price__p{ margin:16px 0 0; max-width:420px; font-size:14px; line-height:1.75;
  color:rgba(31,42,58,.66); word-break:keep-all; }
.stats{ display:flex; gap:36px; margin-top:28px; padding-top:22px;
  border-top:1px solid var(--rule); }
.stat__l{ font-size:11.5px; color:rgba(31,42,58,.5); word-break:keep-all; }
/* ⚠ 지표 숫자는 **프리텐다드**다(사용자 조정). 나머지 숫자(주문 단계·FAQ 마커)만 세리프다. */
.stat__n{ font-size:clamp(32px,3vw,44px); line-height:1.1; margin-top:6px; color:var(--accent); }
.stat__n span{ font-size:13px; margin-left:6px; color:var(--ink); }
/* 기능 목록 — 항목마다 가는 밑줄. 좁으면 1열, 넓으면 2열로 흐른다. */
.feat{ list-style:none; margin:0; padding:0; align-content:start;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,170px),1fr));
  gap:0 24px; border-top:1px solid var(--rule); }
.feat li{ font-size:13.5px; padding:13px 0; border-bottom:1px solid var(--rule-2);
  color:rgba(31,42,58,.82); word-break:keep-all; }

/* 기능 더 보기 — 모바일에서 14줄이 세로로 쌓이면 스크롤이 한참 길어져 앞 5개만 남긴다.
   ⚠ [hidden] 규칙을 반드시 함께 둔다. 아래에서 display:flex 를 주기 때문에, 이 줄이 없으면
     JS 가 hidden 을 걸어도 버튼이 그대로 보인다(브라우저 기본 [hidden] 이 명시도에서 밀린다).
     같은 원인으로 2026-08-31·09-01·09-02 에 세 번 터졌다. */
.feat__more[hidden]{ display:none; }
.feat__more{ display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; min-height:44px; margin-top:14px; padding:0 16px;
  border:1px solid var(--rule-2); border-radius:999px; background:none;
  font-family:inherit; font-size:12.5px; font-weight:600; letter-spacing:.01em;
  color:rgba(31,42,58,.7); cursor:pointer;
  transition:border-color .2s, color .2s; }
.feat__more:hover{ border-color:rgba(31,42,58,.3); color:var(--ink); }
/* 펼침/접힘을 글자 없이도 알 수 있게 화살표를 돌린다(글자에도 그대로 쓰여 있다) */
.feat__more::after{ content:'⌄'; display:block; margin-top:-4px; font-size:14px; line-height:1;
  transition:transform .25s ease; }
.feat__more[aria-expanded="true"]::after{ transform:rotate(180deg); margin-top:2px; }

/* ── 주문 세 단계 ─────────────────────────────────────────────────────── */
.order__hd{ padding-bottom:18px; border-bottom:1px solid var(--rule); }
.steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,240px),1fr));
  gap:0 clamp(20px,3vw,48px); }
.step{ padding:clamp(22px,2.4vw,32px) 0; border-bottom:1px solid var(--rule-2); }
.step__n{ font-family:'Cormorant Garamond', serif; font-size:clamp(28px,2.4vw,34px);
  line-height:1; color:var(--accent); }
.step__t{ font-size:16px; font-weight:700; letter-spacing:-.02em; margin-top:16px; }
.step__d{ font-size:13px; line-height:1.7; color:rgba(31,42,58,.64); margin-top:8px;
  word-break:keep-all; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr));
  gap:clamp(20px,3vw,56px); align-items:start; }
.faq__p{ margin:16px 0 0; font-size:13.5px; line-height:1.75; color:rgba(31,42,58,.64);
  word-break:keep-all; }
.faq__list{ border-top:1px solid var(--rule); }
.faq__i{ border-bottom:1px solid var(--rule-2); }
.faq__q{ display:flex; width:100%; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 0; background:none; border:0; text-align:left;
  font-size:15px; font-weight:700; letter-spacing:-.015em; color:var(--ink); cursor:pointer; }
.faq__m{ font-family:'Cormorant Garamond', serif; font-size:24px; line-height:1;
  color:var(--accent); flex:none; }
.faq__a{ margin:0; padding:0 44px 20px 0; font-size:13.5px; line-height:1.75;
  color:rgba(31,42,58,.66); word-break:keep-all; }
/* ⚠ [hidden] 짝 규칙 — 작성자 규칙이 UA 의 [hidden] 을 이기는 사고가 잦다 */
.faq__a[hidden]{ display:none; }

/* ── 문의 · 푸터 ──────────────────────────────────────────────────────── */
.ct{ padding:var(--sec-top) var(--pad-grid) clamp(18px,2.4vw,32px); }
.ct__band{ border-radius:22px; padding:clamp(34px,4.4vw,64px) clamp(24px,3.4vw,52px);
  background:linear-gradient(135deg, #1f2a3a 0%, #33475f 100%); color:var(--on-dark);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px 40px; }
.ct__copy{ flex:1 1 320px; }
.ct__t{ font-size:clamp(20px,1.9vw,26px); font-weight:700; letter-spacing:-.03em;
  line-height:1.3; word-break:keep-all; }
.ct__s{ font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:clamp(22px,2.2vw,30px); margin-top:6px; color:rgba(238,243,248,.9); }
.ct__p{ margin:12px 0 0; font-size:14px; line-height:1.7; color:rgba(238,243,248,.7);
  word-break:keep-all; }
.ct__btns{ display:flex; flex-wrap:wrap; gap:10px; }
.ct__btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:999px; font-size:14px;
  transition:opacity .2s, border-color .2s; }
.ct__btn--kakao{ background:var(--on-dark); color:var(--ink); font-weight:700; }
.ct__btn--kakao:hover{ opacity:.88; }
.ct__btn--ig{ border:1px solid rgba(238,243,248,.35); color:var(--on-dark); }
.ct__btn--ig:hover{ border-color:var(--on-dark); }
/* 카카오 마크 — 검정 누끼 PNG 를 마스크로 쓰고 색은 글자색을 따라간다(전 템플릿 공통 규칙) */
.ico-kakao{ flex:none; width:16px; height:16px; display:block; background:currentColor;
  -webkit-mask:url(kakao.png) center/contain no-repeat;
          mask:url(kakao.png) center/contain no-repeat; }
.ct__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:clamp(18px,2vw,28px); padding:0 8px; font-size:11px; color:rgba(31,42,58,.5); }
.ct__foot img{ height:20px; width:auto; opacity:.7; }

/* ── PC(≥900px) ───────────────────────────────────────────────────────── */
@media (min-width:900px){
  .pc-only{ display:flex !important; }
  /* FAQ 는 좌 1 : 우 2 — 아코디언이 두 칸을 먹는다 */
  .faq__list{ grid-column:span 2; }
}