/* 무심일상 홈페이지 — 공개 페이지 스타일 */

:root {
  --brand: #00A7FF;
  --brand-dark: #0089D6;
  --ink: #0B1220;
  --ink-soft: #3C4756;
  --muted: #6B7683;
  --line: #E7ECF2;
  --bg: #FFFFFF;
  --bg-tint: #F6F9FC;
  --navy: #061428;
  --radius: 20px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img, video { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 첫 섹션이 히어로가 아니면 내비가 콘텐츠를 가리므로 그만큼 띄운다 */
body.nav-space main { padding-top: var(--nav-h); }

/* ── 공통 타이포 ───────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 18px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.section-title {
  margin: 0 0 18px;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

.section-sub {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.8;
  color: var(--muted);
  white-space: pre-wrap;
}

.body-text {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.85;
  color: var(--ink-soft);
  white-space: pre-wrap; /* 편집 모드에서 넣은 줄바꿈을 그대로 살린다 */
}

/* ── 서식 크기 단계 ────────────────────────────────────────
   px 가 아니라 em 이라 부모의 반응형 크기(clamp)를 그대로 따라간다 → 모바일에서도 안 깨진다 */
.fs-sm { font-size: 0.72em; }
.fs-md { font-size: 1em; }
.fs-lg { font-size: 1.35em; }
.fs-xl { font-size: 1.8em; }

.sec__head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
}
.sec__head--left { margin-left: 0; text-align: left; }

/* ── 1. 내비게이션 ─────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  background: rgba(6, 16, 30, 0.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

/* 히어로가 첫 섹션일 때만: 처음엔 투명, 스크롤하면 어두워짐 */
.nav--auto {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav--auto.is-solid {
  background: rgba(6, 16, 30, 0.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1120px;
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 24px;
}

/* 공개 모드에서는 a 태그라 밑줄/링크색이 붙으므로 지운다 (편집 모드에선 div) */
.nav__logo { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: inherit; }

.nav__logoimg {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
}
/* 편집 모드에서 교체 버튼이 잘리지 않게 넘침을 허용하므로, 둥글리기는 이미지 자체에 준다 */
.nav__logoimgel { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.nav__logoimg.is-empty { display: none; }

.nav__logotext {
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav__menu { display: flex; align-items: center; gap: 8px; }
.nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; display: flex; align-items: center; }

.nav__link {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 2. 히어로 ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  /* 텍스트 묶음을 3x3 중 아무 데나 놓을 수 있게 그리드로 (media/scrim 은 absolute 라 흐름 밖) */
  display: grid;
  overflow: hidden;
  /* 영상이 없을 때 대체되는 짙은 남색 그라데이션 */
  background: radial-gradient(120% 95% at 50% 0%, #17436F 0%, #0C2547 45%, #061428 100%);
  color: #fff;
}

/* z-index를 주면 쌓임 맥락이 생겨 편집 모드의 교체 버튼이 scrim 아래에 갇힌다 — 지정하지 않는다 */
.hero__media { position: absolute; inset: 0; }

.hero__video { width: 100%; height: 100%; object-fit: cover; }

/* 숨긴 히어로 텍스트 줄 — 공개 화면에서는 자리까지 완전히 사라진다.
   (편집 모드에서는 edit.css 가 이 규칙을 덮어써 흐리게 보여준다) */
.hline--off { display: none; }

/* 숨긴 라벨(칩)/섹션 설명 — 공개 화면에선 자리까지 사라진다.
   1) JS(site.js)가 스코프별로 붙이는 클래스. 2) JS 실행 전 깜빡임을 막는
   통합 숨김용 정적 규칙(서버가 secwrap 에 data 를 심어 둔다). 편집 모드는 edit.css 가 덮어쓴다. */
body:not(.is-edit) .sec-el-off { display: none; }
body:not(.is-edit) .secwrap[data-lblhide="hide"] .section-chip,
body:not(.is-edit) .secwrap[data-subhide="hide"] .section-sub { display: none; }

/* '내용보다 작게 허용' — 지정 높이로 잘라낸다 (공개 화면 전용) */
.sec-crop { overflow: hidden; }

/* ── 배경 미디어 표시 방식 ────────────────────────────────────────
   '자동'과 '채우기'는 위의 cover 그대로라 규칙이 없다. 나머지 둘만 덮는다.
   클래스 두 겹(0,2,0)이라 위치 조절이 심는 [data-op] 규칙(0,1,0)보다 세다. */
.sec-fit-contain .hero__video,
.sec-fit-contain .media__poster,
.sec-fit-contain .service__img {
  object-fit: contain;
  /* contain 은 잘리지 않으므로 위치 조절값이 의미가 없다 → 가운데 고정 */
  object-position: 50% 50%;
}
/* 여백은 섹션 배경색으로 (없으면 섹션 자체 배경이 비쳐 보인다) */
.sec-fit-contain .hero__media,
.sec-fit-contain .service__media { background: var(--fitbg, transparent); }

/* 원본 비율 고정: 섹션이 이미지 비율을 따라가므로 cover 여도 잘리지 않는다 */
.sec-fit-ratio .hero__video,
.sec-fit-ratio .media__poster,
.sec-fit-ratio .service__img { object-fit: cover; object-position: 50% 50%; }

/* 접속 즉시 보이는 포스터(영상 첫 프레임). 영상이 재생되면 그 위로 영상이 페이드인 된다.
   포스터와 영상은 같은 object-position 을 쓰므로 전환 때 화면이 안 튄다. */
.media__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__media .hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;                 /* 재생 준비 전에는 숨겨 포스터가 보이게 */
  transition: opacity 0.6s ease;
}
.hero__media .hero__video.is-ready { opacity: 1; }
/* 포스터가 없을 땐(구형 데이터 등) 영상이라도 바로 보이게 — 검은 프레임 방지 */
.hero__media:not(.has-poster) .hero__video { opacity: 1; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* 장식용 — 아래의 편집 컨트롤 클릭을 가로채면 안 된다 */
  background: linear-gradient(
    180deg,
    rgba(4, 10, 20, 0.58) 0%,
    rgba(4, 10, 20, 0.38) 42%,
    rgba(4, 10, 20, 0.68) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  align-self: center;
  width: 100%;
  max-width: 1120px; /* 다른 섹션의 container 와 같은 폭 — 좌/우 정렬이 내비 로고와 맞는다 */
  margin: 0 auto;
  padding: 120px 24px;
  text-align: center;
}

/* ── 히어로 텍스트 위치 (3x3) ──────────────────────────────
   세로는 배치로, 가로는 정렬로 처리한다.
   묶음은 항상 container 폭을 차지하므로 좌/우 정렬이 페이지 여백과 자연스럽게 맞는다. */
.hero[data-pos^="t"] .hero__inner { align-self: start; }
.hero[data-pos^="m"] .hero__inner { align-self: center; }
.hero[data-pos^="b"] .hero__inner { align-self: end; }

.hero[data-pos$="l"] .hero__inner { text-align: left; }
.hero[data-pos$="c"] .hero__inner { text-align: center; }
.hero[data-pos$="r"] .hero__inner { text-align: right; }

.hero[data-pos$="l"] .hero__sub { margin-left: 0; margin-right: auto; }
.hero[data-pos$="r"] .hero__sub { margin-right: 0; margin-left: auto; }

/* 자유 배치: 격자 대신 x%/y% 좌표로 (--fx/--fy 는 JS가 뷰포트별로 설정) */
.hero--free .hero__inner {
  position: absolute;
  grid-area: auto;
  align-self: auto;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  transform: translate(-50%, -50%);
  width: auto;
  max-width: min(90%, 1120px);
  padding: 0 24px;
}

/* ── 스크롤 유도 표시 ─────────────────────────────────────── */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;                 /* scrim(1)·텍스트(2) 위 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* 스크롤을 시작하면 서서히 사라진다 (site.js 가 is-hidden 을 토글) */
  opacity: 1;
  transition: opacity 0.4s ease;
}
.hero__scroll.is-hidden { opacity: 0; pointer-events: none; }

.hero__scrolltext {
  margin: 0;
  max-width: 60vw;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  white-space: pre-wrap;
  text-align: center;
}

.hero__scrollbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  /* 은은하게 위아래로 떠다닌다 — ease-in-out, 작은 진폭이라 통통 튀지 않는다 */
  animation: hero-float 2s ease-in-out infinite;
  transition: color 0.2s;
}
.hero__scrollbtn:hover { color: #fff; }
.hero__chev { display: block; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45)); }

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.hero__eyebrow {
  margin: 0 0 22px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.hero__title {
  margin: 0 0 26px;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.14;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.25);
}

.hero__sub {
  margin: 0 auto;
  max-width: 620px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
  white-space: pre-wrap;
}

/* 히어로 지역 표기 — 서브카피 아래 작은 글씨 한 줄 (?region 으로 문구가 바뀐다) */
.hero__region {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
}

/* ── 3. 무한 슬라이드 (마퀴) ───────────────────────────────── */
.slider { padding: clamp(80px, 10vw, 140px) 0; background: var(--bg); }
.slider--tint { background: var(--bg-tint); }

.marquee {
  --gap: 20px;
  --card-w: 260px;
  overflow: hidden;
  /* 양 끝을 페이드시켜 잘린 카드가 덜 거슬리게 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-x var(--dur, 30s) linear infinite;
  will-change: transform;
}

/* 두 묶음이 동일하므로 -50% 는 정확히 한 묶음 너비 = 이음매 없음.
   묶음 사이 간격은 track의 gap이 아니라 카드의 margin-right 로 준다 (gap을 쓰면 -50%가 어긋남) */
@keyframes marquee-x {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group { display: flex; }

.scard {
  position: relative;
  flex: none;
  width: var(--card-w);
  margin-right: var(--gap);
  text-align: center;
}

.scard__thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--card-round, 16px);
  overflow: hidden;
  background: var(--bg-tint);
}
.scard__img { width: 100%; height: 100%; object-fit: cover; }

/* [4] 카드 비율(섹션 단위) — 세로형(기본 3:4) / 정사각 / 가로형 */
.slider.cardar-portrait .scard__thumb { aspect-ratio: 3 / 4; }
.slider.cardar-square .scard__thumb { aspect-ratio: 1 / 1; }
.slider.cardar-landscape .scard__thumb { aspect-ratio: 16 / 9; }
/* 가로형은 카드가 넓어야 비율이 산다 */
.slider.cardar-landscape .marquee { --card-w: 440px; }

/* [3] 슬라이드 섹션 설정 — 속도/방향/간격/크기/배지위치/일시정지 */
.slider.speed-slow .marquee__track { animation-duration: calc(var(--dur, 30s) * 2); }
.slider.speed-fast .marquee__track { animation-duration: calc(var(--dur, 30s) * 0.5); }
.slider.sdir-normal .marquee__track { animation-direction: normal; }
.slider.sdir-reverse .marquee__track { animation-direction: reverse; }
.slider.gap-narrow .marquee { --gap: 10px; }
.slider.gap-wide .marquee { --gap: 38px; }
.slider.csize-small .marquee { --card-w: 190px; }
.slider.csize-large .marquee { --card-w: 340px; }
.slider.hoverpause-off .marquee:hover .marquee__track { animation-play-state: running; }

/* 고정 그리드 표시 — 복제·애니메이션 없이 카드를 한 줄(넘치면 줄바꿈) 중앙 정렬.
   기기별 스코프에 따라 JS(site.js)가 .sdisp-grid 를 붙였다 뗐다 한다. */
.slider.sdisp-grid .marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.slider.sdisp-grid .marquee__track { display: block; width: auto; animation: none; transform: none; }
.slider.sdisp-grid .marquee__group { flex-wrap: wrap; justify-content: center; gap: var(--gap); padding: 0 24px; }
.slider.sdisp-grid .marquee__group[aria-hidden] { display: none; }   /* 혼합 스코프일 때 남는 복제 숨김 */
.slider.sdisp-grid .scard { margin-right: 0; }
@media (max-width: 860px) {
  .slider.sdisp-grid .marquee__group { padding: 0 16px; }
  .slider.sdisp-grid .scard { width: calc(50% - var(--gap)); }   /* 2열 (4카드 = 2×2) */
}
/* 배지 위치: 겹침(overlay) — 이미지 하단에 얹기 / 분리(below, 기본) */
.slider.badgepos-overlay .scard__badge { position: relative; margin-top: -22px; z-index: 2; }

/* [4] 카드 그림자 + '한 덩어리' 프리셋(이미지+배지) */
.slider.cardshadow-soft .scard__thumb { box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.2); }
.slider.cardshadow-strong .scard__thumb { box-shadow: 0 14px 36px -8px rgba(0, 0, 0, 0.34); }
.slider.cardstyle-cohesive .scard {
  border-radius: var(--card-round, 16px);
  overflow: hidden;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.22);
}
.slider.cardstyle-cohesive .scard__thumb { border-radius: 0; box-shadow: none; }
.slider.cardstyle-cohesive .scard__badge {
  display: block; width: 100%; margin: 0; border-radius: 0; position: static;
  background: var(--badge-bg, var(--brand)); color: var(--badge-fg, #fff);
  padding: 11px 14px;
}

.scard__badge {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  /* 섹션 기본 배지색(--badge-bg/fg)을 JS가 세팅. 카드별 색은 인라인 style 로 덮어쓴다. */
  background: var(--badge-bg, var(--brand));
  color: var(--badge-fg, #fff);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* 배지 숨김: 공개 페이지에선 빠지고, 편집 모드에선 흐리게 보여 토글할 수 있다.
   '한 덩어리'(cardstyle-cohesive) 프리셋이 .slider.cardstyle-cohesive .scard__badge 로
   display:block 을 걸기 때문에(0,3,0), 숨김 규칙도 같은 무게 이상으로 올려야 이긴다.
   안 그러면 그 프리셋에서만 배지 끄기가 먹지 않는다. */
.scard__badge.badge-off,
.slider.cardstyle-cohesive .scard__badge.badge-off { display: none; }
body.is-edit .scard__badge.badge-off { display: inline-block; opacity: 0.4; }
body.is-edit .slider.cardstyle-cohesive .scard__badge.badge-off { display: block; opacity: 0.4; }

/* [5] 전역 페이지 배경이 있으면, 사용자가 배경을 안 준 섹션은 투명하게 해서 배경이 비친다.
   (사용자가 섹션 배경색을 지정하면 인라인 style 로 덮어써서 그게 이긴다) */
body[data-pagebg] .slider,
body[data-pagebg] .slider--tint,
body[data-pagebg] .results,
body[data-pagebg] .service,
body[data-pagebg] .sectext,
body[data-pagebg] .seclabel { background: transparent; }

/* [1] 히어로 내부 자유 배치 요소 */
.hero__children { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hchild {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: 94%;
  pointer-events: auto;
}
.hchild img, .hchild video { width: 100%; height: auto; display: block; border-radius: 12px; }
.hchild__text {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  line-height: 1.4;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.hchild__slider { display: flex; gap: 10px; }
.hchild__scard { flex: 1 1 0; min-width: 0; }

/* [2] 등장 애니메이션 — JS가 .anim-ready 를 붙여야 숨겨지고, 화면 진입 시 .anim-in 으로 1회 재생.
   (JS 미실행/축소모션이면 anim-ready 가 안 붙어 그냥 보인다) */
.anim-ready [data-anim] { opacity: 0; }
[data-anim].anim-in {
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
  animation-delay: var(--anim-delay, 0s);
}
[data-anim="fadein"].anim-in { animation-name: anim-fadein; }
[data-anim="rise"].anim-in { animation-name: anim-rise; }
[data-anim="slide"].anim-in { animation-name: anim-slide; }
[data-anim="zoom"].anim-in { animation-name: anim-zoom; }
@keyframes anim-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes anim-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes anim-slide { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: none; } }
@keyframes anim-zoom { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-anim] { opacity: 1 !important; animation: none !important; }
}
/* 편집 모드에선 요소가 항상 보여야 편집할 수 있다(미리보기는 edit.js가 잠깐 재생) */
.is-edit [data-anim] { opacity: 1; }

/* ── 라벨/칩 섹션 ──────────────────────────────────────────── */
.seclabel { padding: clamp(24px, 4vw, 48px) 0; }
.seclabel__inner { }
.chip {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}
/* 정렬(bstyle text-align)을 블록 칩의 위치로 변환 */
.chip[style*="text-align:center"], .chip[style*="text-align: center"] { margin-inline: auto; }
.chip[style*="text-align:right"], .chip[style*="text-align: right"] { margin-left: auto; }

/* 섹션 제목 위 라벨 칩 — 조금 작게, 아래 여백 */
.section-chip {
  margin-bottom: 12px;
  padding: 6px 15px;
  font-size: 0.8125rem;
}
.sec__head .section-chip { margin-left: auto; margin-right: auto; }
.sec__head--left .section-chip { margin-left: 0; }

/* ── 4. 성과 카드 ──────────────────────────────────────────── */
.results { padding: clamp(80px, 10vw, 140px) 0; background: var(--bg-tint); }
/* 섹션 위·아래 여백 조절 — 빈 값(보통)은 타입 기본 유지, sm=작게 / lg=크게 (JS 가 기기별 클래스 부여) */
/* '없음' = 붙이기. 섹션 사이 간격은 앞 섹션 padding-bottom + 뒤 섹션 padding-top 이므로,
   두 섹션을 딱 붙이려면 앞의 아래여백과 뒤의 위여백을 둘 다 '없음'으로 둔다.
   클래스 두 겹(0,2,0)이라 섹션 타입별 기본 padding(0,1,0)을 덮는다. */
.sec.padt-none { padding-top: 0; }
.sec.padb-none { padding-bottom: 0; }
.sec.padt-sm { padding-top: clamp(20px, 3vw, 40px); }
.sec.padt-lg { padding-top: clamp(120px, 18vw, 240px); }
.sec.padb-sm { padding-bottom: clamp(20px, 3vw, 40px); }
.sec.padb-lg { padding-bottom: clamp(120px, 18vw, 240px); }

.rlist { display: flex; flex-direction: column; gap: 20px; }

.rcard {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 220px;
  gap: 32px;
  align-items: center;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg, #fff);
  box-shadow: 0 18px 42px -30px rgba(11, 18, 32, 0.45);
}

.rcard__left { min-width: 0; }
.rcard__name {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rcard__desc { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--muted); white-space: pre-wrap; }

.rcard__center { text-align: center; }
.rcard__num { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.rcard__numval {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--brand);
}
.rcard__unit { font-size: 1.125rem; font-weight: 700; color: var(--brand); }
.rcard__lbl { margin: 8px 0 0; font-size: 0.875rem; font-weight: 500; color: var(--muted); }

.rcard__ba { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.rcard__bapart { font-size: 1.0625rem; font-weight: 700; color: var(--ink-soft); }
.rcard__bapart--after { color: var(--brand); }
.rcard__arrow { font-size: 1.125rem; font-weight: 700; color: var(--brand); }

/* 형태 전환: 두 형태 모두 렌더링해두고 data-mode 로 하나만 보여준다 */
.rcard[data-mode="number"] .rcard__ba { display: none; }
.rcard[data-mode="ba"] .rcard__num,
.rcard[data-mode="ba"] .rcard__lbl { display: none; }

.rcard__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-tint);
}
.rcard__img { width: 100%; height: 100%; object-fit: cover; }

/* ── 5. 서비스 소개 ────────────────────────────────────────── */
.service { padding: clamp(88px, 12vw, 160px) 0; background: var(--bg); }

.service__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  position: relative;
}

.service__text { min-width: 0; }
/* 마지막으로 남은 줄의 아래 여백은 지운다 — 본문을 숨기면 제목의 18px 이 그대로 남았다 */
.service__text > *:last-child,
.sectext__inner > *:last-child { margin-bottom: 0; }
/* 글이 하나도 없으면 텍스트 칸을 안 그리므로 격자도 한 칸으로 되돌린다(빈 칸·간격 0).
   이미지는 가운데로 두고 폭을 묶어, 빈 자리만 사라지고 사진이 갑자기 커지진 않게 한다. */
.service--notext .service__grid { grid-template-columns: 1fr; gap: 0; }
.service--notext .service__media { max-width: 620px; width: 100%; margin: 0 auto; }

/* 텍스트+이미지형 좌우 반전: 데스크톱에서 이미지를 왼쪽으로 */
@media (min-width: 861px) {
  .service--rev .service__media { order: -1; }
}

/* 빈 텍스트형 */
.sectext { padding: clamp(64px, 9vw, 120px) 0; background: var(--bg); }
.sectext__inner { max-width: 820px; }
.sectext .section-title { margin-bottom: 20px; }

.service__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-tint);
  box-shadow: 0 24px 60px -24px rgba(11, 18, 32, 0.28);
}
.service__img { width: 100%; height: 100%; object-fit: cover; }

/* 이미지가 아직 없을 때의 회색 자리표시 박스 */
.media__empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #D3DCE6;
  border-radius: inherit;
  background: var(--bg-tint);
  color: #9AA6B4;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ── 6. 하단 CTA ───────────────────────────────────────────── */
.cta {
  position: relative;
  padding: clamp(88px, 12vw, 150px) 0;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(0, 167, 255, 0.09) 0%, rgba(0, 167, 255, 0) 62%),
    var(--bg-tint);
  border-top: 1px solid var(--line);
}

.cta__inner { text-align: center; }

.cta__title {
  margin: 0 0 40px;
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--ink);
}

.cta__btnwrap { display: inline-flex; align-items: center; gap: 12px; position: relative; }

.btn {
  display: inline-block;
  padding: 18px 44px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(0, 167, 255, 0.65);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s;
}

.btn:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -10px rgba(0, 167, 255, 0.7);
}
.btn:active { transform: translateY(0); }

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .rcard { grid-template-columns: 1fr 0.8fr 180px; gap: 24px; padding: 24px; }
}

@media (max-width: 860px) {
  :root { --nav-h: 64px; }
  .nav__burger { display: flex; }
  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px;
    background: rgba(6, 16, 30, 0.97);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav--open .nav__menu { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 13px 14px; }

  /* 세로 공간이 좁으니 히어로 텍스트는 상/중/하(세로)만 따라가고, 좌우는 무시하고 가운데 정렬 */
  .hero[data-pos] .hero__inner { text-align: center; }
  .hero[data-pos] .hero__sub { margin-left: auto; margin-right: auto; }

  .service__grid { grid-template-columns: 1fr; }
  .service__media { order: -1; aspect-ratio: 16 / 10; }

  /* 성과 카드: 세로로 쌓기 */
  .rcard { grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .rcard__center { text-align: left; }
  .rcard__num, .rcard__ba { justify-content: flex-start; }
  .rcard__thumb { aspect-ratio: 16 / 9; }

  .marquee { --card-w: 180px; --gap: 14px; }
}

@media (max-width: 860px) {
  /* [4] 가로형 카드는 모바일에서 한 장씩 보이도록 폭을 화면에 맞춘다 */
  .slider.cardar-landscape .marquee { --card-w: min(86vw, 440px); }
}

@media (max-width: 860px) {
  /* 모바일에서는 스크롤 표시를 소폭 축소 */
  .hero__scroll { bottom: 16px; gap: 6px; }
  .hero__scrollbtn { width: 36px; height: 36px; }
  .hero__chev { width: 20px; height: 20px; }
  .hero__scrolltext { font-size: 0.75rem; max-width: 78vw; }
}

@media (max-width: 520px) {
  .container { padding: 0 20px; }
  .hero__inner { padding: 104px 20px; }
  .btn { padding: 16px 36px; width: 100%; }
  .cta__btnwrap { display: flex; flex-direction: column; width: 100%; }
  .marquee { --card-w: 156px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  /* 마퀴는 애니메이션을 끄고 직접 스크롤할 수 있게 (0.01s로 줄이면 미친듯이 깜빡인다) */
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none !important; transform: none !important; }
  /* 스크롤 표시도 떠다니는 애니메이션을 끈다 (화살표는 그대로 보임) */
  .hero__scrollbtn { animation: none !important; }
}

/* ── 신청 폼 섹션 ────────────────────────────────────────────── */
.secform__inner { max-width: 560px; }
.secform__sub { margin-bottom: 26px; }

.secform__form { display: flex; flex-direction: column; gap: 16px; text-align: left; }

/* ── 3단계 폼 (STEP1 주소 / STEP2 공동현관 / STEP3 받는 분) ──────
   한 form 안에서 보이는 묶음만 갈아 끼운다. 편집 모드는 edit.css 가 세 단계를 모두 펼친다. */
.secform__step { display: flex; flex-direction: column; gap: 16px; }
.secform__step[hidden] { display: none; }
.secform__steptitle { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.35; }
.secform__stepsub { margin: -8px 0 0; font-size: 0.875rem; color: #6b7280; line-height: 1.5; }
.secform__help { margin: -10px 0 0; font-size: 0.8125rem; color: #6b7280; line-height: 1.45; }
.secform__subnote { margin: -4px 0 0; text-align: center; font-size: 0.78rem; color: #8890a0; }
.secform__prog { display: flex; align-items: center; gap: 10px; }
.secform__progbar { flex: 1 1 auto; height: 4px; border-radius: 999px; background: rgba(128, 128, 128, 0.25); overflow: hidden; }
.secform__progfill { display: block; height: 100%; border-radius: 999px; background: #0060F8; transition: width 0.25s ease; }
.secform__progtxt { flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; color: #6b7280; }
.secform__stepnav { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.secform__stepnav .btn { flex: 1 1 auto; width: auto; }
.secform__next { width: 100%; }
.secform__prev {
  flex: 0 0 auto; border: 1.5px solid rgba(128, 128, 128, 0.35); background: transparent;
  border-radius: 10px; padding: 12px 18px; color: inherit; font-family: inherit;
  font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.secform__prev:hover { border-color: #0060F8; color: #0060F8; }

.secform__row { display: flex; flex-direction: column; gap: 6px; position: relative; }
.secform__label { font-size: 0.875rem; font-weight: 700; opacity: 0.85; }

.secform__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(128, 128, 128, 0.45);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
}
.secform__input:focus {
  outline: none;
  border-color: var(--brand, #00a7ff);
  box-shadow: 0 0 0 3px rgba(0, 167, 255, 0.18);
}

/* 공동현관 3택1 — 알약(칩) 모양.
   PC 는 한 줄, 모바일은 폭에 맞춰 가로로 흐르다 줄바꿈된다 (칩이라 늘리지 않는다). */
.secform__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.secform__opt {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid rgba(128, 128, 128, 0.45);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.secform__opt:hover { border-color: #00A7FF; color: #00A7FF; }
.secform__opt.is-on {
  border-color: #00A7FF;
  background: #00A7FF;
  color: #fff;
}
.secform__opt.is-on:hover { color: #fff; }
/* '비밀번호 있음' 을 골랐을 때만 나타나는 칸 */
.secform__row--entpw { margin-top: 12px; }
.secform__row--entpw[hidden] { display: none; }

.secform__err { color: #ff6b6b; font-size: 0.875rem; font-weight: 700; margin: 0; }
.secform__err[hidden] { display: none; }
/* 배송 되는 지역일 때만 뜨는 안내 — 다음 버튼 바로 위. 안 되는 지역엔 아무 말도 안 붙인다. */
.secform__okbadge {
  margin: 0; display: flex; align-items: center; gap: 6px;
  border-radius: 10px; padding: 9px 12px;
  background: rgba(22, 163, 74, 0.12); color: #16a34a;
  font-size: 0.85rem; font-weight: 700; letter-spacing: -0.01em;
}
.secform__okbadge[hidden] { display: none; }
/* 공동현관 비밀번호 칸 아래 한 줄 — 왜 묻는지 알려 준다 */
.secform__pwnote { display: block; margin-top: 6px; font-size: 0.75rem; color: #9aa3b6; }

.secform__submit { margin-top: 6px; width: 100%; }
.secform__submit:disabled { opacity: 0.6; cursor: default; }

/* ── /apply 단독 신청 페이지 전용 여백 (is-applypage 스코프) ──────────────
   /apply 는 폼 섹션 하나만 단독 렌더하므로 편집 레이아웃의 여백이 안 먹는다.
   여기서 상단·하단 여백과 필드 간격을 페이지 전용으로 확보한다.
   :not(.secform--popup) 로 팝업(#apply)·다른 페이지엔 영향 0. */
.is-applypage .secform:not(.secform--popup) {
  padding-top: clamp(24px, 5vw, 48px);
  padding-bottom: clamp(40px, 8vw, 80px);   /* 신청 버튼과 푸터 사이 숨 쉴 공간 */
}
.is-applypage .secform:not(.secform--popup) .secform__form {
  gap: 22px;                                 /* 필드 블록 간격 확대 (16→22, 약 1.4x) */
}

/* 완료 팝업 */
.applydone {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
}
.applydone[hidden] { display: none; }
.applydone__panel {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 40px);      /* 내용(다단계·사용안내)이 길면 패널 안에서 스크롤 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 30px 26px 26px;
  border-radius: 16px;
  background: #fff;
  color: #16181d;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.applydone__title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; }
.applydone__body { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.5; font-weight: 700; color: #16181d; }
.applydone__btn { display: inline-block; min-width: 120px; }
/* 시안 정합: 완료 화면 (체크 아이콘 · 배송안내 · 정보카드 · 안내 · 풀폭/보조 버튼) */
.applydone__check { margin: 0 auto 12px; width: 54px; height: 54px; line-height: 0; }
.applydone__ship { margin: 0 0 16px; font-size: 0.95rem; line-height: 1.6; font-weight: 700; color: #16181d; }
/* 정보카드 — 배송지·첫 배송 예정일을 한 상자로 묶는다 */
.applydone__info { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: #f4f6f8;
  text-align: left; display: flex; flex-direction: column; gap: 6px; }
.applydone__info[hidden] { display: none; }
.applydone__guide { margin: 0 0 12px; font-size: 0.875rem; line-height: 1.65; color: #374151; }
.applydone__howto { margin: 0 0 16px; font-size: 0.875rem; line-height: 1.6; color: #6b7280; }
.applydone__subnote { margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.5; color: #6b7280; }
/* 완료 버튼: 풀폭 + 보조(테두리) */
.applydone__panel .applydone__btn { display: block; width: 100%; min-width: 0; margin-top: 10px; }
.applydone__btn--sec { background: #fff; color: #4b5563; border: 1.5px solid #e2e6ec; box-shadow: none; }
.applydone__btn--sec:hover { background: #f6f8fa; border-color: #cfd6df; }
.applydone__x {
  position: absolute; top: 8px; right: 10px;
  border: 0; background: transparent; color: #888;
  font-size: 1rem; cursor: pointer;
}

/* 완료 팝업 다단계(step) — 공개 화면은 현재 단계 하나만 보인다 */
.applystep[hidden] { display: none; }
.applystep__badge {
  display: inline-block; margin: 0 0 10px;
  padding: 2px 10px; border-radius: 999px;
  background: #eef1f6; color: #55617a; font-size: 0.75rem; font-weight: 700;
}
/* 편집 화면에서는 활성 단계를 세로로 쌓아 구분선과 함께 보여 준다 */
body.is-edit .applystep + .applystep { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #d5d9e0; }
.applystep__tools {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #e6e9ef;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
}
.applystep__ctl {
  border: 1px solid #c9ced7; background: #f6f7f9; color: #333;
  border-radius: 8px; padding: 5px 10px; font-size: 0.8125rem; cursor: pointer;
}
.applystep__ctl:hover { background: #eceef2; }
.applystep__hint { width: 100%; font-size: 0.75rem; color: #8890a0; margin: 4px 0 0; }

@media (max-width: 860px) {
  /* 칩은 모바일에서도 가로로 흐르며 줄바꿈된다 (세로로 세우지 않는다) */
  .secform__opt { padding: 8px 14px; }
}

/* 주소 검색 (다음 우편번호) */
.secform__addr { display: flex; gap: 8px; align-items: stretch; }
.secform__addr .secform__input { flex: 1 1 auto; cursor: pointer; }
.secform__addr .secform__input[readonly] { background: rgba(255, 255, 255, 0.04); }
.secform__addrbtn {
  flex: none;
  padding: 0 16px;
  border: 1px solid var(--brand, #00a7ff);
  border-radius: 10px;
  background: transparent;
  color: var(--brand, #00a7ff);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.secform__addrbtn:hover { background: var(--brand, #00a7ff); color: #fff; }
.secform__zip { margin-left: 6px; font-weight: 700; opacity: 0.75; }
.secform__zip[hidden] { display: none; }

/* 주소 검색 레이어 — PC 는 가운데 창, 모바일은 전체 화면 */
.pclayer {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
}
.pclayer__box {
  position: relative;
  width: min(500px, 100%);
  height: min(560px, 100%);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.pclayer__embed { width: 100%; height: 100%; }
.pclayer__x {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.875rem;
  cursor: pointer;
}
body.pc-open { overflow: hidden; }

@media (max-width: 860px) {
  .pclayer { padding: 0; }
  .pclayer__box { width: 100%; height: 100%; border-radius: 0; }
  .secform__addr { flex-direction: column; }
  .secform__addrbtn { padding: 11px 16px; }
}

/* ── 성과 카드: 상단 아이콘 줄 + 요소별 숨김 ─────────────────────── */
.rcard__icons {
  grid-column: 1 / -1;      /* 3열 그리드를 가로질러 카드 맨 위에 한 줄 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.rcard__icon {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(128, 128, 128, 0.1);
}
.rcard__iconimg { width: 100%; height: 100%; object-fit: contain; }
/* 아이콘이 비어 있으면 공개 화면에서는 자리도 차지하지 않는다 */
.rcard__icon.is-empty { display: none; }

/* 숨긴 카드 요소 — 공개 화면에서는 완전히 사라진다
   (편집 모드에서는 edit.css 가 흐리게 되살린다) */
.rc-off { display: none; }

/* ── 텍스트+이미지형 이미지 배치 (텍스트 왼쪽/오른쪽/위/아래) ────────── */
@media (min-width: 861px) {
  .ti-pos-left .service__media { order: -1; }
  .ti-pos-right .service__media { order: 1; }
  /* 위·아래는 한 칸짜리로 세워 텍스트와 위아래로 놓는다 */
  .ti-pos-top .service__grid,
  .ti-pos-bottom .service__grid { grid-template-columns: 1fr; }
  .ti-pos-top .service__media { order: -1; }
  .ti-pos-bottom .service__media { order: 1; }
}
@media (max-width: 860px) {
  /* 모바일은 늘 세로로 쌓인다. '텍스트 아래'만 순서를 뒤집는다. */
  .ti-pos-bottom .service__media { order: 1; }
}

/* 여백 섹션 — 내용 없는 빈 칸. 기본 8vh (섹션 높이를 지정하면 인라인 style 이 이긴다) */
.secspacer { min-height: 8vh; padding: 0; }

/* 성과 카드 아이콘 — 표시 방식(프레임형/원본형) + 크기 3단계 */
.rcard__icon.isize-sm { width: 28px; height: 28px; }
.rcard__icon.isize-md { width: 40px; height: 40px; }
.rcard__icon.isize-lg { width: 56px; height: 56px; }
/* 원본형: 둥근 배경·여백 없이 이미지 원본 비율 그대로 */
.rcard__icon.ishape-bare {
  width: auto;
  border-radius: 0;
  background: none;
}
.rcard__icon.ishape-bare .rcard__iconimg { width: auto; height: 100%; object-fit: contain; }

/* 신청 완료 팝업의 보조 문구 (앱이 주소 좌표를 못 찾았을 때만) */
.applydone__note {
  margin: -8px 0 18px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #b3261e;
}
.applydone__note[hidden] { display: none; }

/* 완료 팝업의 첫 배송 예정일 (앱이 날짜를 준 경우에만) — 정보카드 안 한 줄 */
.applydone__delivery {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand, #00A7FF);
}
.applydone__delivery[hidden] { display: none; }

/* 텍스트+이미지형 콘텐츠 세로 정렬 (상단/중앙/하단).
   빈 값이면 클래스가 안 붙어 기존 .service__grid{align-items:center} 그대로 = 렌더 불변. */
.service.va-top .service__grid { align-items: start; }
.service.va-center .service__grid { align-items: center; }
.service.va-bottom .service__grid { align-items: end; }

/* ── 사이트 공통 푸터 ─────────────────────────────────────────
   배경/글자색은 서버 인라인 style 로 깔리고, 기기별 스코프는 site.js 가 덮어쓴다. */
.footer { padding: 40px 20px 46px; background: #16181d; color: #c9ccd3; }
.footer__inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: flex-start; gap: 34px; flex-wrap: wrap; }
.footer__brand { flex: 0 0 auto; }
.footer__logo { position: relative; display: block; width: 140px; max-width: 42vw; }
.footer__logoimg { display: block; width: 100%; height: auto; }
.footer__info { flex: 1 1 320px; min-width: 0; }
.footer__line { margin: 0 0 6px; font-size: 0.8125rem; line-height: 1.65; opacity: 0.92; }
.footer__line:last-child { margin-bottom: 0; }
.footer__links { max-width: 1100px; margin: 22px auto 0; padding: 16px 0 0; list-style: none;
                 display: flex; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid rgba(128, 128, 128, 0.28); }
.footer__linkitem { display: inline-flex; align-items: center; }
.footer__link { color: inherit; text-decoration: none; font-size: 0.8125rem; opacity: 0.85; }
.footer__link:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 860px) {
  .footer { padding: 32px 18px 40px; }
  .footer__inner { flex-direction: column; gap: 18px; }   /* 로고 → 정보 → 링크 세로 스택 */
}

/* ── 페이지 맨 위 뒤로가기 버튼 (page.<slug>.back) ─────────────
   메뉴바를 숨긴 랜딩에서 돌아갈 길을 만드는 옵션. 기본은 꺼짐이라 켠 페이지에만 나온다.
   본문을 밀어내지 않게 작은 칩으로 두고, 스크롤을 따라 흘러간다(고정 아님). */
.pageback { padding: 18px 0 0; }
/* 내비가 투명하게 떠 있는 페이지는 main 에 위 여백이 없다 → 내비 높이만큼 내려 깔리지 않게 */
.pageback--navpad { padding-top: calc(var(--nav-h) + 16px); }
body:not(.is-edit) .pageback__inner { display: flex; }
.pageback__btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(17, 20, 26, 0.05);
  border: 1px solid rgba(17, 20, 26, 0.08);
  color: #4b5563; font-size: 0.88rem; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pageback__btn:hover { background: rgba(17, 20, 26, 0.09); color: #11141a; }
@media (max-width: 860px) {
  .pageback { padding-top: 14px; }
  .pageback__btn { padding: 7px 14px; font-size: 0.82rem; }
}

/* ── 페이지 하단 고정 버튼 (page.<slug>.fixbtn) ───────────────
   페이지에 내장된 요소라 켤 옵션을 찾을 필요가 없다. 랜딩(메뉴바 숨김) 페이지는 기본으로 보인다.
   첫 화면부터 늘 같은 자리 — 스크롤로 나타나거나 사라지지 않는다.
   z-index 는 신청 팝업(940)·주소 레이어(960)보다 낮게 둬서 팝업이 열리면 그 아래로 깔린다.
   편집 모드는 고정하지 않는다(캔버스를 가리면 편집이 불가능하다) → edit.css 가 블록으로 그린다. */
body:not(.is-edit) .ctafix {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid rgba(17, 20, 26, 0.08);
  box-shadow: 0 -8px 24px -14px rgba(17, 20, 26, 0.45);
}
.ctafix__inner { max-width: 560px; margin: 0 auto; }
/* 배송 마감 카운트다운 — 버튼 바로 위 작은 줄. 고정 바 안에 있어 --ctafix-h 에 자동 포함된다. */
.ctafix__cd {
  margin: 0 0 7px; text-align: center; font-size: 0.78rem; line-height: 1.35;
  color: #4b5563; letter-spacing: -0.01em;
}
.ctafix__cd [data-cd-time] {
  font-variant-numeric: tabular-nums;      /* 초가 바뀔 때 글자가 들썩이지 않게 */
  font-weight: 800; color: #d3452f;
}
.ctafix__cd [hidden] { display: none; }
@media (max-width: 860px) {
  .ctafix__cd { font-size: 0.74rem; margin-bottom: 6px; }
}
/* 버튼 아래 보조 문구 — 카운트다운(버튼 위)과 짝을 이루는 작은 한 줄.
   고정 바 안이라 --ctafix-h 에 자동으로 포함되고, 비우면 줄째로 사라져 바가 낮아진다. */
.ctafix__note {
  margin: 7px 0 0; text-align: center; font-size: 0.78rem; line-height: 1.35;
  color: #6b7280; letter-spacing: -0.01em;
}
@media (max-width: 860px) {
  .ctafix__note { font-size: 0.74rem; margin-top: 6px; }
}
body:not(.is-edit) .ctafix .btn { display: block; width: 100%; padding: 16px 24px; text-align: center;
               box-shadow: 0 10px 24px -12px rgba(0, 167, 255, 0.7); }
body:not(.is-edit) .ctafix .btn:hover { transform: none; }   /* 고정 바에서 버튼이 들썩이면 어색하다 */
/* 고정 버튼에 가려 푸터 마지막 줄이 안 보이지 않게, 버튼 높이만큼 푸터 아래를 더 띄운다.
   --ctafix-h 는 site.js 가 실제 높이로 갱신한다(문구가 길어 두 줄이 돼도 맞는다). */
body.has-ctafix .footer { padding-bottom: calc(46px + var(--ctafix-h, 76px)); }
@media (max-width: 860px) {
  body.has-ctafix .footer { padding-bottom: calc(40px + var(--ctafix-h, 76px)); }
}
/* ── 미니 후기형 (dyn_minireview) ──────────────────────────
   밝은 배경 위에 흰 카드가 세로로 쌓인다. 배경색은 섹션 도구 '배경',
   카드색은 '카드색'(--card-bg)으로 바꿀 수 있어 여기선 기본값만 정한다. */
.secmrv { padding: clamp(64px, 9vw, 120px) 0; }
.secmrv__head { max-width: 720px; margin: 0 auto clamp(24px, 4vw, 40px); text-align: center; }
.secmrv__title {
  margin: 0; font-size: clamp(1.35rem, 3.2vw, 2rem); font-weight: 800;
  color: #11141a; letter-spacing: -0.02em; line-height: 1.35;
}
.secmrv__sub {
  margin: 10px 0 0; font-size: clamp(0.9rem, 1.8vw, 1.02rem); line-height: 1.7;
  color: #4b5563; letter-spacing: -0.01em; white-space: pre-line;   /* 줄바꿈 그대로 */
}
.secmrv__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.mrv {
  position: relative; margin: 0; padding: 18px 20px;
  background: var(--card-bg, #fff); border: 1px solid #e7ecf2; border-radius: 16px;
  box-shadow: 0 10px 24px -18px rgba(17, 20, 26, 0.45);
}
/* 상단 줄 — 닉네임 캡처 + 별점 + 이용횟수 배지. 캡처 크기 규칙은 당근 후기와
   같은 줄에서 함께 정의한다(아래 .rvs__shotzone) — 따로 두면 값이 갈라진다. */
.mrv__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mrv__rating { display: inline-flex; align-items: center; gap: 6px; }
.mrv__stars { position: relative; color: #dde1e8; font-size: 0.86rem; letter-spacing: 1px; white-space: nowrap; }
.mrv__stars i {
  position: absolute; left: 0; top: 0; overflow: hidden;
  width: var(--fill, 0%); color: #00A7FF; font-style: normal;
}
.mrv__ratenum { font-size: 0.8rem; font-weight: 700; color: #00A7FF; }
/* 이용횟수 배지 — 카드 오른쪽 위. 비우면 아예 안 그린다(위 매크로에서 판정). */
.mrv__badge {
  flex: 0 0 auto; margin-left: auto;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 167, 255, 0.1); color: #00A7FF;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
/* 본문은 4줄까지만 — 넘치면 말줄임 */
.mrv__body {
  margin: 12px 0 0; font-size: 0.9rem; line-height: 1.65; color: #333;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.secmrv__more { margin-top: clamp(20px, 3vw, 32px); text-align: center; }
.secmrv__btn { cursor: pointer; }
@media (max-width: 860px) {
  .mrv { padding: 16px 15px; }
  .mrv__photo { width: 38px; height: 38px; }
  .mrv__body { font-size: 0.86rem; }
}

/* 메뉴바 오른쪽 원페이지 모드 버튼 — 햄버거 자리에 알약형 테두리 버튼.
   시그니처색 테두리·글자, 투명 배경이라 히어로 위 투명 내비에서도 자연스럽다. */
.nav__onepage { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.nav__dlbtn {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid #00A7FF; background: transparent; color: #00A7FF;
  font-size: 0.86rem; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.nav__dlbtn:hover { background: #00A7FF; color: #fff; }
.nav .nav__burger.is-off { display: none; }
@media (max-width: 860px) {
  .nav__dlbtn { padding: 7px 13px; font-size: 0.8rem; }
}

/* 푸터 하단 여백 3단(footer.padb) — 카피라이트 아래 빈 공간은 이 padding 이다.
   값이 없으면 위 기본값 그대로라 지금 화면이 안 바뀐다.
   고정 버튼이 있을 때는 그 높이를 더해야 푸터가 안 가린다(위 규칙과 같은 계산). */
.footer.footpadb-sm { padding-bottom: 14px; }
.footer.footpadb-lg { padding-bottom: 96px; }
body.has-ctafix .footer.footpadb-sm { padding-bottom: calc(14px + var(--ctafix-h, 76px)); }
body.has-ctafix .footer.footpadb-lg { padding-bottom: calc(96px + var(--ctafix-h, 76px)); }
@media (max-width: 860px) {
  .footer.footpadb-sm { padding-bottom: 12px; }
  .footer.footpadb-lg { padding-bottom: 76px; }
  body.has-ctafix .footer.footpadb-sm { padding-bottom: calc(12px + var(--ctafix-h, 76px)); }
  body.has-ctafix .footer.footpadb-lg { padding-bottom: calc(76px + var(--ctafix-h, 76px)); }
}

/* ── 히어로 하단 뱃지 줄 (아이콘+제목+부제목) ──────────────────────
   기본 숨김. .hero.badgeshow-on 일 때만 노출(JS 가 기기별 스코프로 켠다). 색은 히어로 글자색 상속. */
.herobadges { display: none; margin-top: clamp(18px, 3vw, 30px); }
.hero.badgeshow-on .herobadges { display: block; }
.herobadges__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
                    gap: 14px 22px; margin: 0; padding: 0; list-style: none; }
.herobadge { display: flex; flex-direction: column; align-items: center; text-align: center;
             gap: 4px; flex: 0 1 160px; min-width: 0; max-width: 220px; }
/* 아이콘 영역: 이모지 또는 업로드 이미지. 슬롯 높이 고정으로 항목 정렬(제목 줄) 일치.
   iconvis 래퍼가 크기(isize)·상하 오프셋(transform) 을 받는다. */
.herobadge__icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 46px; }
.herobadge__iconvis { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.herobadge__emoji { font-size: 1.9rem; line-height: 1; }
/* 이미지 아이콘: 원형/크롭 없이 원본 비율 유지(투명 PNG 대응). 높이는 크기 단계로. */
.herobadge__iconimg { display: inline-flex; align-items: center; justify-content: center; height: 44px; line-height: 0; }
.herobadge__iconimgel { height: 100%; width: auto; max-width: 88px; object-fit: contain; display: block; }
/* 크기 3단계 — 이미지·이모지 공통 */
.herobadge__iconvis.isize-sm .herobadge__iconimg { height: 32px; }
.herobadge__iconvis.isize-md .herobadge__iconimg { height: 44px; }
.herobadge__iconvis.isize-lg .herobadge__iconimg { height: 60px; }
.herobadge__iconvis.isize-sm .herobadge__emoji { font-size: 1.45rem; }
.herobadge__iconvis.isize-md .herobadge__emoji { font-size: 1.9rem; }
.herobadge__iconvis.isize-lg .herobadge__emoji { font-size: 2.5rem; }
/* 이미지가 지정되면(로드 시 · 업로드 즉시 모두) 같은 항목의 이모지는 감춘다 — 이중 표시 방지 */
.herobadge__iconvis .herobadge__iconimg:not(.is-empty) ~ .herobadge__emoji { display: none; }
.herobadge__title { font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.herobadge__sub { font-size: 0.8125rem; opacity: 0.82; line-height: 1.45; }
@media (max-width: 860px) {
  .herobadges__list { gap: 14px 12px; }
  .herobadge { flex: 0 1 calc(50% - 12px); }   /* 모바일 2열 — 가로 스크롤 없음 */
}

/* ── 히어로 내부 CTA (버튼 + 안내 1줄) ──────────────────────────
   히어로 배경 안, 뱃지 줄 아래. 기본 숨김. .hero.ctashow-on 일 때만 노출(JS 가 기기별 스코프로 켠다). */
.herocta { display: none; margin-top: clamp(20px, 3.5vw, 34px); }
.hero.ctashow-on .herocta { display: block; }
.herocta__btnwrap { display: flex; justify-content: center; }
.herocta__note { margin: 12px 0 0; font-size: 0.85rem; opacity: 0.85; line-height: 1.5; text-align: center; }

/* ── 이미지형 섹션 (텍스트 없이 이미지 1장) ──────────────────────
   폭: 기본=콘텐츠 폭(container), imgwidth-full=전체 폭.
   표시: 기본=원본 비율(자연 높이), imgfit-crop=섹션 높이에 맞춰 cover(크롭).
   표시방식/폭 클래스는 JS(site.js)가 기기별 스코프로 붙인다. */
.secimg__box { display: block; }
.secimg .secimg__box { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.secimg.imgwidth-full .secimg__box { max-width: none; padding: 0; }
.secimg__media { display: block; width: 100%; line-height: 0; }
.secimg__img { display: block; width: 100%; height: auto; }
.secimg.imgfit-crop { display: flex; min-height: 46vh; overflow: hidden; }
.secimg.imgfit-crop .secimg__box { flex: 1; min-height: 0; }
.secimg.imgfit-crop .secimg__media { height: 100%; }
.secimg.imgfit-crop .secimg__img { height: 100%; object-fit: cover; }
.secimg__box--link { cursor: pointer; }
@media (max-width: 860px) { .secimg .secimg__box { padding: 0 16px; } .secimg.imgwidth-full .secimg__box { padding: 0; } }

/* ── 이미지+캡션 (dyn_imgcap) ──────────────────────────────
   사진 1장 + 그 아래 설명. 폭은 3단(100/80/60%)이고 늘 가운데 정렬.
   비율을 고르면 aspect-ratio 로 자리를 미리 잡고 cover 로 잘라 채운다 —
   높이를 먼저 확보하므로 사진이 늦게 와도 글이 밀리지 않는다. */
/* 다른 섹션과 같은 세로 여백. 이게 없으면 캡션이 섹션 맨 아래에 붙어,
   편집 화면에서 그 자리에 떠 있는 '＋ 섹션 추가' 버튼에 가려 눌리지 않는다. */
.seccap { padding: clamp(64px, 9vw, 120px) 0; }
.seccap__fig { margin: 0 auto; max-width: 100%; }
.seccap.w80 .seccap__fig { max-width: 80%; }
.seccap.w60 .seccap__fig { max-width: 60%; }
.seccap__media { width: 100%; border-radius: 14px; overflow: hidden; }
.seccap__img { display: block; width: 100%; height: auto; }
/* 비율 프리셋 — 고르면 그 비율로 잘라 채운다(원본 비율일 때는 아무것도 안 건다) */
.seccap.capar-wide .seccap__media { aspect-ratio: 16 / 9; }
.seccap.capar-tall .seccap__media { aspect-ratio: 4 / 5; }
.seccap.capar-square .seccap__media { aspect-ratio: 1 / 1; }
.seccap[class*="capar-"] .seccap__img { height: 100%; object-fit: cover; }
/* ── 앱소개 슬라이드 (dyn_appslide) ────────────────────────
   한 화면에 한 장. 넘김은 스와이프·화살표만(자동 없음) — 트랙을 translateX 로 민다.
   폰 프레임은 CSS 로만 그린다(이미지 에셋 없음): 둥근 검은 테두리 + 위쪽 노치. */
.secapp { padding: clamp(64px, 9vw, 120px) 0; }
.secapp__stage { position: relative; overflow: hidden; max-width: 720px; margin: 0 auto; }
.secapp__track {
  display: flex; align-items: flex-start;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.appslide { flex: 0 0 100%; min-width: 100%; margin: 0; padding: 0 4px; text-align: center; }
.appslide__phone { margin: 0 auto; max-width: 300px; }
.appslide__media { width: 100%; border-radius: 14px; overflow: hidden; background: #0b1220; }
.appslide__img { display: block; width: 100%; height: auto; }
/* 폰 목업 — 기본 켬. 섹션에 appframe-off 가 붙으면 테두리·노치를 걷어낸다. */
.secapp:not(.appframe-off) .appslide__phone {
  position: relative; padding: 12px 10px 14px;
  border: 2px solid #11141a; border-radius: 34px;
  background: #11141a;
  box-shadow: 0 18px 40px -22px rgba(17, 20, 26, 0.75);
}
.secapp:not(.appframe-off) .appslide__phone::before {
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 15px; border-radius: 0 0 12px 12px; background: #11141a; z-index: 2;
}
.secapp:not(.appframe-off) .appslide__media { border-radius: 24px; }
.appslide__title {
  margin: 20px 0 0; font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 800;
  color: #11141a; letter-spacing: -0.02em; line-height: 1.35;
}
.appslide__desc {
  margin: 8px 0 0; font-size: 0.94rem; line-height: 1.65; color: #4b5563; letter-spacing: -0.01em;
}
/* 사진 비율·크기 — 이미지+캡션과 같은 값(capar·capwidth)을 그대로 쓴다 */
.secapp.capar-wide .appslide__media { aspect-ratio: 16 / 9; }
.secapp.capar-tall .appslide__media { aspect-ratio: 4 / 5; }
.secapp.capar-square .appslide__media { aspect-ratio: 1 / 1; }
.secapp[class*="capar-"] .appslide__img { height: 100%; object-fit: cover; }
.secapp.w80 .appslide__phone { max-width: 240px; }
.secapp.w60 .appslide__phone { max-width: 180px; }
/* 좌우 화살표 — 무대 양 끝에 붙는다 */
.secapp__arrow {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(17, 20, 26, 0.1); background: rgba(255, 255, 255, 0.92);
  color: #11141a; font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(17, 20, 26, 0.5);
}
.secapp__arrow:hover { background: #fff; border-color: var(--brand); color: var(--brand); }
.secapp__arrow--prev { left: 2px; }
.secapp__arrow--next { right: 2px; }
.secapp__arrow[disabled] { opacity: 0.3; cursor: default; }
/* 진행점 — 현재 장만 브랜드색 */
.secapp__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.secapp__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: #d5dbe4; cursor: pointer; transition: background 0.18s, transform 0.18s;
}
.secapp__dot.is-on { background: #00A7FF; transform: scale(1.25); }
@media (max-width: 860px) {
  .secapp__arrow { width: 34px; height: 34px; font-size: 1.2rem; }
  .appslide__desc { font-size: 0.88rem; }
  .secapp.w60 .appslide__phone { max-width: 200px; }
}

/* 동적 히어로 요소별 아래 여백 3단 — 섹션 하단 여백(padb)과 같은 개념을 요소마다.
   기본(클래스 없음)은 각 요소가 원래 갖고 있던 여백 그대로다. */
.hero.dynhero.gapreg-sm .heroregion, .hero.dynhero.gapreg-sm .hero__region { margin-bottom: 6px; }
.hero.dynhero.gapreg-lg .heroregion, .hero.dynhero.gapreg-lg .hero__region { margin-bottom: 36px; }
.hero.dynhero.gapbdg-sm .herobadges { margin-bottom: 6px; }
.hero.dynhero.gapbdg-lg .herobadges { margin-bottom: 36px; }
.hero.dynhero.gapcta-sm .herocta { margin-bottom: 6px; }
.hero.dynhero.gapcta-lg .herocta { margin-bottom: 36px; }

.seccap__cap {
  margin: 12px 0 0; text-align: center;
  font-size: 0.92rem; line-height: 1.6; color: #4b5563; letter-spacing: -0.01em;
}
@media (max-width: 860px) {
  /* 좁은 화면에서 60% 는 너무 작아진다 — 한 단계씩 넉넉하게 */
  .seccap.w80 .seccap__fig { max-width: 92%; }
  .seccap.w60 .seccap__fig { max-width: 78%; }
  .seccap__cap { font-size: 0.86rem; margin-top: 10px; }
}

/* ── 신청 폼 팝업 (CTA 클릭 시 열림) ────────────────────────────
   공개: 기본 숨김 오버레이. 모바일=바텀시트, PC=중앙 모달. 편집 모드는 인라인 편집(불변). */
body:not(.is-edit) .secform--popup {
  position: fixed; inset: 0; z-index: 940; display: none;
  align-items: stretch; justify-content: center; margin: 0; padding: 0;   /* 모바일: 전체화면 시트 */
  background: rgba(0, 0, 0, 0.5);
}
body:not(.is-edit) .secform--popup.is-open { display: flex; }
body:not(.is-edit) .secform--popup .secform__inner {
  width: 100%; max-width: none; height: 100%; max-height: none; overflow-y: auto;
  -webkit-overflow-scrolling: touch;              /* 인앱웹뷰 시트 스크롤 */
  position: relative; background: #fff; color: var(--ink);
  border-radius: 0; padding: max(24px, env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));
}
@media (min-width: 641px) {                       /* PC: 중앙 모달 (톤 동일) */
  body:not(.is-edit) .secform--popup { align-items: center; padding: 20px; }
  body:not(.is-edit) .secform--popup .secform__inner {
    max-width: 460px; height: auto; max-height: 92vh; border-radius: 18px; padding: 28px 24px 30px;
  }
}
body.formpopup-open { overflow: hidden; }         /* 배경 스크롤 잠금 */
.secform__poptip { max-width: 1120px; margin: 0 auto 10px; padding: 10px 14px; border-radius: 10px;
  background: #eef6ff; border: 1px solid #cfe4fb; color: #1f4e79; font-size: 0.8125rem; }
.secform__poptip code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; }
.secform__x { position: absolute; top: 10px; right: 12px; z-index: 2; border: 0; background: transparent;
  font-size: 1.1rem; line-height: 1; color: #888; cursor: pointer; }
/* 완료 화면: 배송지 자동 표시(제출값을 화면에만) — 정보카드 안 한 줄 */
.applydone__address { margin: 0; font-size: 0.9rem; color: #1f2937; font-weight: 600; }
.applydone__address[hidden] { display: none; }
.applydone__note { background: #fdeceb; border-radius: 10px; padding: 11px 14px; margin: -6px 0 16px; }
.secform__note { margin: 14px 0 0; text-align: center; font-size: 0.75rem; color: #8890a0; }

/* ═══════════════════════════════════════════════════════════════════════
   신규 섹션 타입 (가로 흐름형·지표형·후기형·배너형) 기본 스타일 + 무료체험 v2
   (/p/muryocheheom-v2) 모바일 시안 정합. 히어로/서비스 등 기존 타입의 v2 전용
   변형은 body[data-slug="muryocheheom-v2"] 로 스코프해 다른 페이지엔 영향 없음.
   시안 파랑 = #0060F8, 다크 = #10141c, 연라벤더 = #e8eefb.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 공통 헤드 (신규 타입) ── */
.secflow .sec__head, .secstats .sec__head, .secrev .sec__head { text-align: center; margin-bottom: 20px; }
.secflow .section-title, .secstats .section-title, .secrev .section-title,
.secflow .section-sub, .secstats .section-sub, .secrev .section-sub { text-align: center; }
.secflow .section-sub, .secstats .section-sub, .secrev .section-sub { color: #6b7280; }

/* ── 가로 흐름형 ─────────────────────────────────────────── */
.secflow .flowlist { display: flex; gap: 10px; align-items: flex-start; }
.secflow .flowcard { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; position: relative;
  background: var(--card-bg, transparent); border-radius: var(--card-bg-round, 0);
  padding: var(--card-bg-pad, 0); }
.flowcard__thumbwrap { position: relative; width: 100%; }
.flowcard__thumb { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.flowcard__img { width: 100%; height: 100%; object-fit: cover; }
.flowcard__title { font-weight: 700; font-size: 0.82rem; line-height: 1.3; margin: 8px 0 4px; }
.flowcard__desc { color: #6b7280; font-size: 0.72rem; line-height: 1.42; margin: 0; }
.secflow__note { text-align: center; color: #0060F8; font-weight: 700; font-size: 0.9rem;
                 background: #eef4ff; border-radius: 12px; padding: 13px 14px; margin: 18px 0 0; }
/* step: 번호 뱃지(제목 위) + 카드 사이 화살표 */
.secflow--step .flowlist { counter-reset: fstep; }
.secflow--step .flowcard { counter-increment: fstep; }
.secflow--step .flowcard__title { order: -1; display: flex; align-items: center; gap: 5px; margin: 0 0 8px; }
.secflow--step .flowcard__title::before { content: counter(fstep); flex: 0 0 auto; width: 19px; height: 19px;
  background: #0060F8; color: #fff; border-radius: 50%; font-size: 0.68rem; font-weight: 800;
  display: grid; place-items: center; }
.secflow--step .flowcard__desc { margin-top: 6px; }
.secflow--step .flowcard:not(:first-child) .flowcard__thumbwrap::before {
  content: "›"; position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
  color: #0060F8; font-weight: 900; font-size: 1rem; line-height: 1; }
/* icon: 정사각 이미지 + 제목 + 2줄 설명 (가운데) */
.secflow--icon .flowcard { text-align: center; align-items: center; }
.secflow--icon .flowcard__thumb { aspect-ratio: 1 / 1; border-radius: 12px; }
.secflow--icon .flowcard__title { margin-top: 9px; }

/* ── 지표형 (다크 카드) ──────────────────────────────────── */
.secstats .statlist { display: flex; gap: 8px; align-items: stretch; }
.secstats .statcard { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  background: var(--card-bg, #10141c); border-radius: 12px; padding: 8px; color: #fff; text-align: center; }
.statcard__thumbwrap { width: 100%; }
.statcard__thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #1b2130; }
.statcard__img { width: 100%; height: 100%; object-fit: cover; }
.statcard__value { font-weight: 800; font-size: 0.98rem; line-height: 1.15; margin: 9px 0 3px; color: #fff; }
.statcard__label { color: #9aa3b6; font-size: 0.68rem; line-height: 1.3; margin: 0; }

/* ── 당근 후기형 ─────────────────────────────────────────
   닉네임 캡처는 종욱이가 찍어 올리는 이미지라 원본 크기가 제각각이다.
   높이를 --rvs-shot-h 로 고정하고 가로는 비율대로 — 카드보다 넓으면 contain 이 비율을 지킨 채 줄인다.
   그래서 어떤 캡처를 올려도 닉네임 글자 크기가 서로 비슷하게 보인다. */
.secrvs .rvslist { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.rvs {
  position: relative; background: var(--card-bg, #fff);
  border: 1px solid #e7ecf2; border-radius: 14px; padding: 16px;
}
.rvs__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 닉네임 캡처 — 당근 후기(.rvs)와 미니 후기(.mrv)가 같은 규칙을 쓴다(표시 높이 48px 통일) */
.rvs__shotzone,
.mrv__shotzone { --rvs-shot-h: 48px; height: var(--rvs-shot-h); max-width: 100%; min-width: 0; flex: 0 1 auto; }
.rvs__shot,
.mrv__shot {
  display: block; height: 100%; width: auto; max-width: 100%;
  object-fit: contain; object-position: left center;
}
.rvs__rating { display: inline-flex; align-items: center; gap: 6px; }
.rvs__stars { position: relative; color: #dde1e8; font-size: 0.95rem; letter-spacing: 1px; white-space: nowrap; }
.rvs__stars i {
  position: absolute; left: 0; top: 0; overflow: hidden;
  width: var(--fill, 0%); color: #ffc107; font-style: normal;
}
.rvs__ratenum { font-size: 0.85rem; font-weight: 700; color: #4b5563; }
/* 사진: 1장이면 큼직하게 한 장, 여러 장이면 나란히 (당근 후기 그리드) */
.rvs__photos { display: grid; gap: 6px; margin: 12px 0 0; }
.rvs__photos--n1 { grid-template-columns: 1fr; }
.rvs__photos--n2, .rvs__photos--n4 { grid-template-columns: repeat(2, 1fr); }
.rvs__photos--n3, .rvs__photos--n5 { grid-template-columns: repeat(3, 1fr); }
.rvs__photo {
  position: relative; padding: 0; border: 0; margin: 0; background: #f1f3f6;
  border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; cursor: zoom-in;
}
.rvs__photos--n1 .rvs__photo { aspect-ratio: 4 / 3; }
.rvs__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rvs__body { margin: 12px 0 0; font-size: 0.9rem; line-height: 1.65; color: #333; }
/* 긴 본문 접기 — 섹션이 정한 줄 수(--rvsclamp, 기본 5)에서 자르고 '… 더보기' 로 펼친다.
   버튼을 글 위에 겹치지 않고 바로 아래 오른쪽에 두는 건, 카드 배경색을 바꿀 수 있어서
   (sec.<id>.cardbg) 글을 덮는 그라데이션이 배경과 어긋날 수 있기 때문이다. */
.rvs__body.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--rvsclamp, 5);
  line-clamp: var(--rvsclamp, 5);
  overflow: hidden;
}
.rvs__more {
  display: block; margin: 2px 0 0 auto; padding: 2px 0;
  border: 0; background: none; color: #6b7280;
  font-family: inherit; font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer;
}
.rvs__more:hover { color: #11141a; text-decoration: underline; }
.rvs__more[hidden] { display: none; }
/* 평점 요약 — 큰 총평점 + 별점별 분포 막대. 숫자는 손으로 넣은 값이고 막대만 비율로 그린다. */
.rvsum {
  max-width: 720px; margin: 0 auto 16px; padding: 16px 18px;
  background: var(--card-bg, #fff); border: 1px solid #e7ecf2; border-radius: 14px;
}
.rvsum__note { margin: 0 0 10px; text-align: center; font-size: 0.82rem; font-weight: 700; color: #0060F8; }
.rvsum__inner { display: flex; align-items: center; gap: 20px; }
.rvsum__score { flex: 0 0 auto; text-align: center; min-width: 96px; }
.rvsum__num { display: block; font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: #1f2937; }
.rvsum__lab { display: block; margin-top: 2px; font-size: 0.72rem; color: #6b7280; }
.rvsum__bars { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
.rvsum__row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rvsum__row:last-child { margin-bottom: 0; }
.rvsum__rowlab { flex: 0 0 26px; font-size: 0.7rem; color: #9aa3b6; }
.rvsum__bar { flex: 1 1 auto; height: 7px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.rvsum__bar i { display: block; height: 100%; border-radius: 999px; background: #ffc107; }
.rvsum__cnt { flex: 0 0 auto; min-width: 30px; text-align: right; font-size: 0.7rem; color: #6b7280; }
@media (max-width: 860px) {
  .rvsum { padding: 14px; }
  .rvsum__inner { gap: 14px; }
  .rvsum__num { font-size: 1.8rem; }
  .rvsum__score { min-width: 78px; }
}

/* '+더보기' — 접힌 후기를 펼치는 버튼. 등록 후기가 표시 개수 이하면 서버가 아예 안 그린다. */
.rvsmore { max-width: 720px; margin: 16px auto 0; text-align: center; }
.rvsmore[hidden] { display: none; }
.rvsmore__btn { cursor: pointer; }
@media (max-width: 860px) {
  .rvs { padding: 14px; }
  .rvs__body { font-size: 0.86rem; }
}

/* ── 전체화면 이미지 뷰어 (후기 사진) ─────────────────────
   신청 팝업(940)·주소 레이어(960) 보다도 위. 확대/이동은 transform 만 쓴다. */
.imgvw {
  position: fixed; inset: 0; z-index: 980; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.94); touch-action: none; overscroll-behavior: contain;
}
.imgvw[hidden] { display: none; }
body.imgvw-open { overflow: hidden; }
.imgvw__stage { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.imgvw__img {
  max-width: 92vw; max-height: 88vh; user-select: none; -webkit-user-drag: none;
  transform-origin: center center; will-change: transform; cursor: zoom-in;
}
.imgvw__img.is-zoomed { cursor: grab; }
.imgvw__img.is-dragging { cursor: grabbing; }
.imgvw__btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.12);
  color: #fff; border-radius: 999px; cursor: pointer; font-family: inherit;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.imgvw__btn:hover { background: rgba(255, 255, 255, 0.26); }
.imgvw__x { top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 42px; height: 42px; font-size: 1.05rem; }
.imgvw__nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 1.6rem; line-height: 1; }
.imgvw__nav--prev { left: 12px; }
.imgvw__nav--next { right: 12px; }
.imgvw__zoom { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; gap: 8px; }
.imgvw__zoom .imgvw__btn { position: static; width: 44px; height: 40px; font-size: 1.1rem; }
.imgvw__count {
  position: absolute; top: calc(20px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85); font-size: 0.8125rem; letter-spacing: 0.02em;
}
.imgvw.is-single .imgvw__nav, .imgvw.is-single .imgvw__count { display: none; }
@media (max-width: 860px) {
  .imgvw__nav { width: 40px; height: 40px; font-size: 1.35rem; }
  .imgvw__img { max-width: 100vw; max-height: 78vh; }
}

/* ── 후기형 ─────────────────────────────────────────────── */
.secrev .revlist { display: flex; gap: 8px; align-items: stretch; }
.secrev .revcard { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  background: var(--card-bg, #fff); border: 1px solid #eceef2; border-radius: 12px; padding: 11px; }
.revcard__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
.revcard__tag { display: inline-block; background: #eef2f7; color: #4b5563; border-radius: 999px;
  padding: 2px 9px; font-size: 0.66rem; font-weight: 700; white-space: nowrap; }
.revcard__stars { color: #ffc107; font-size: 0.66rem; letter-spacing: -1px; white-space: nowrap; }
.revcard__body { font-size: 0.74rem; line-height: 1.45; color: #333; margin: 0; flex: 1; }
.revcard__meta { color: #9aa3b6; font-size: 0.68rem; margin: 9px 0 0; }
.secrev__more { text-align: center; margin-top: 18px; }
/* 소형 알약 버튼(재사용): 파란 테두리 + 텍스트 + › 화살표. CTA/배너/후기 공용. */
.btn--pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #0060F8;
  border: 1.5px solid #bcd3ff; border-radius: 999px; padding: 9px 20px; font-weight: 700; }
.btn--pill::after { content: "›"; font-weight: 900; line-height: 1; font-size: 1.1em; }
.btn--pill:hover { border-color: #0060F8; background: #f5f9ff; }
.secrev__morebtn { padding: 9px 20px; }
/* 배너 pill 옵션: 상자 배경 없이 알약 버튼만 */
.secbanner--pill .secbanner__inner { background: transparent; border: none; padding: 6px 0; }

/* ── 배너형 (알약 + 안내) ────────────────────────────────── */
.secbanner__inner { text-align: center; background: #eef2ff; border: 1px solid #dbe4ff;
  border-radius: 14px; padding: 16px; }
.secbanner__pill { display: inline-block; color: #0060F8; font-weight: 800; font-size: 0.95rem; text-decoration: none; }
.secbanner__sub { color: #7b8494; font-size: 0.8rem; margin: 6px 0 0; }
/* 링크 지정 시 배너 전체가 클릭 가능(포인터). 밑줄·링크색 상속으로 기존 렌더 유지. */
.secbanner__inner--link { display: block; cursor: pointer; text-decoration: none; color: inherit; }

/* ═══════════ 무료체험 v2 전용 (모바일 우선) ═══════════ */
body[data-slug="muryocheheom-v2"] { --v2b: #0060F8; }

/* 히어로: 좌정렬 + eyebrow 우상단 알약 + 풀폭 파란 CTA. 시안처럼 콘텐츠 높이에 맞춰 컴팩트 */
body[data-slug="muryocheheom-v2"] .hero { min-height: auto; }
body[data-slug="muryocheheom-v2"] .hero__inner { text-align: left; align-self: start;
  padding-top: calc(var(--nav-h) + 20px); padding-bottom: 40px; }
body[data-slug="muryocheheom-v2"] .hero__eyebrow { width: fit-content; margin: 0 0 18px auto;
  background: var(--v2b); color: #fff; padding: 6px 14px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
body[data-slug="muryocheheom-v2"] .hero__sub { margin-left: 0; }
body[data-slug="muryocheheom-v2"] .herobadges { margin-top: 26px; }
body[data-slug="muryocheheom-v2"] .herobadges__list { justify-content: space-between; gap: 10px; flex-wrap: nowrap; }
body[data-slug="muryocheheom-v2"] .herobadge { flex: 1 1 0; max-width: none; }
body[data-slug="muryocheheom-v2"] .herobadge__title { font-size: 0.82rem; }
body[data-slug="muryocheheom-v2"] .herobadge__sub { font-size: 0.7rem; }
body[data-slug="muryocheheom-v2"] .herocta { margin-top: 24px; }
body[data-slug="muryocheheom-v2"] .herocta__btnwrap { display: block; }
body[data-slug="muryocheheom-v2"] .herocta__btn { display: block; width: 100%; background: var(--v2b);
  border: none; color: #fff; font-weight: 800; padding: 15px; border-radius: 12px; font-size: 1rem; }
body[data-slug="muryocheheom-v2"] .herocta__note { color: rgba(255,255,255,0.8); }

/* 마감(텍스트+이미지) — 연라벤더 카드, 좌 텍스트 / 우 제품 이미지 */
body[data-slug="muryocheheom-v2"] .service { background: #e8eefb; }
body[data-slug="muryocheheom-v2"] .service__grid { display: flex; align-items: center; gap: 14px; }
body[data-slug="muryocheheom-v2"] .service__text { flex: 1 1 58%; text-align: left; order: 0; }
body[data-slug="muryocheheom-v2"] .service__media { flex: 1 1 42%; order: 1; }   /* 시안: 텍스트 좌 / 이미지 우 */

/* PC(861+): 시안 배치를 이질감 없이 확장 (카드는 더 큰 간격·글자) */
@media (min-width: 861px) {
  .secflow .flowlist, .secstats .statlist, .secrev .revlist { gap: 18px; max-width: 1000px; margin: 0 auto; }
  .flowcard__title { font-size: 1.05rem; }
  .flowcard__desc, .revcard__body { font-size: 0.9rem; }
  .statcard__value { font-size: 1.5rem; }
  .statcard__label, .revcard__meta { font-size: 0.82rem; }
  .revcard__tag, .revcard__stars { font-size: 0.8rem; }
  .secbanner__pill { font-size: 1.15rem; }
  body[data-slug="muryocheheom-v2"] .herocta__btn { width: auto; min-width: 320px; margin: 0 auto; }
}

/* ── Q&A 아코디언형 ─────────────────────────────────────────── */
.secfaq .sec__head { text-align: center; margin-bottom: 22px; }
.secfaq .section-title, .secfaq .section-sub { text-align: center; }
.secfaq .section-sub { color: #6b7280; }
.faqlist { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faqitem { position: relative; border: 1px solid #e7ecf2; border-radius: 12px; overflow: hidden;
  background: var(--card-bg, #fff); }
.faqitem__q { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; cursor: pointer; font-weight: 700; color: #1f2937; }
.faqitem__qtext { flex: 1; min-width: 0; }
.faqitem__chev { flex: 0 0 auto; color: #0060F8; font-size: 1.2rem; line-height: 1;
  transition: transform 0.25s var(--ease, ease); }
.faqitem.is-open .faqitem__chev { transform: rotate(180deg); }
.faqitem__a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faqitem.is-open .faqitem__a { max-height: 600px; }
.faqitem__atext { margin: 0; padding: 0 18px 16px; color: #4b5563; line-height: 1.65; white-space: pre-wrap; }
/* 편집 모드: 답변 항상 보이게(편집 가능), 질문은 텍스트 커서 */
body.is-edit .faqitem__a { max-height: none; }
body.is-edit .faqitem__q { cursor: text; }

/* ── 글자 그라데이션 (.tg) ────────────────────────────────────────────
   서버가 내보내는 건 색 두 개와 방향(--tg1/--tg2/--tgd)뿐이고, 칠하는 방법은 여기서만 정한다.
   기본 규칙은 '시작색 단색' — background-clip:text 를 못 받는 구형 브라우저는 이 상태로
   멀쩡히 읽힌다(글자가 투명해져 사라지는 사고 방지). 받쳐 주는 브라우저에서만 그라데이션으로
   덮어쓴다. 인라인 style 의 color 보다 세게 눌러야 해서 여기서만 !important 를 쓴다. */
.tg { color: var(--tg1, currentColor); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tg {
    background-image: linear-gradient(var(--tgd, 180deg), var(--tg1), var(--tg2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    /* 잘림 방지 — 그라데이션은 글자 상자에 딱 맞게 칠해진다 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* ── 모바일 핀치·더블탭 줌 방지 (공개 화면만) ──────────────────────────
   viewport 메타(user-scalable=no)를 iOS 사파리가 무시하는 건 site.js 가 제스처를 막아 메우고,
   더블탭 확대는 여기서 막는다. manipulation 은 스크롤·단일 탭은 그대로 두고 더블탭 확대만 끈다.
   편집 캔버스(.is-edit)는 확대해서 손볼 일이 있으므로 제외한다. */
body:not(.is-edit) { touch-action: manipulation; }

/* iOS 는 글자 16px 미만인 입력칸에 포커스가 가면 화면을 자동으로 확대한다(줌 금지와 무관하게
   동작한다). 공개 화면의 입력칸은 최소 16px 로 못박아 그 확대를 원천 차단한다.
   16px 이상으로 키운 곳은 그대로 두려고 max() 를 쓴다. */
body:not(.is-edit) input,
body:not(.is-edit) select,
body:not(.is-edit) textarea { font-size: max(16px, 1em); }

/* ── 흐르는 갤러리 (secgal) ─────────────────────────────────
   사진 줄이 좌우로 끊김 없이 흐른다. 묶음 두 벌을 이어 붙이고 -50% 만큼 옮기므로
   이음매가 안 보인다(슬라이드형 마퀴와 같은 방식, 클래스만 따로 둔다).
   줄마다 방향·속도가 달라서 --dur 과 방향 클래스는 줄 단위로 준다. */
.secgal { padding: clamp(64px, 9vw, 120px) 0; overflow: hidden; }
.secgal__head { max-width: 720px; margin: 0 auto clamp(24px, 4vw, 40px); text-align: center; }
.secgal__title {
  margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800;
  letter-spacing: -0.03em; color: var(--ink); line-height: 1.3;
}
.secgal__sub {
  margin: 10px 0 0; font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.75;
  color: var(--muted); white-space: pre-wrap;
}
.galrow {
  --gal-gap: 14px;
  --gal-w: 220px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.galrow + .galrow { margin-top: var(--gal-gap); }
.galrow__track {
  display: flex; width: max-content;
  animation: galrow-x var(--dur, 40s) linear infinite;
  will-change: transform;
}
/* 두 묶음이 같으므로 -50% 는 정확히 한 묶음 너비 = 이음매 없음.
   묶음 사이 간격은 track 의 gap 이 아니라 카드의 margin-right 로 준다(gap 을 쓰면 -50% 가 어긋난다). */
@keyframes galrow-x {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.galrow--ltr .galrow__track { animation-direction: reverse; }
.galrow__group { display: flex; }
/* 무엇을 하든 멈추지 않는다 — 마우스를 올려도, 손가락을 대도 계속 흐른다.
   (슬라이드형 마퀴는 지금까지대로 호버에서 멈춘다 — 규칙이 서로 다르다) */

.galcard { position: relative; flex: none; width: var(--gal-w); margin: 0 var(--gal-gap) 0 0; }
.galcard__media {
  position: relative; aspect-ratio: 3 / 4; border-radius: 14px;
  overflow: hidden; background: var(--bg-tint);
}
.galcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 캡션 — 작은 아이콘 + 글 2줄. 넣은 카드에서만 나온다(매크로에서 판정). */
.galcard__cap { display: flex; align-items: center; gap: 8px; margin: 8px 2px 0; min-width: 0; }
.galcard__icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: #eef2f7; }
.galcard__iconimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.galcard__captext { min-width: 0; display: flex; flex-direction: column; }
.galcard__cap1 {
  font-size: 0.82rem; font-weight: 700; color: #11141a; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.galcard__cap2 {
  font-size: 0.72rem; color: #9aa3b6; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 사진 비율·크기 — 이미지+캡션과 같은 값(capar·capwidth)을 그대로 쓴다 */
.secgal.capar-wide .galcard__media { aspect-ratio: 16 / 9; }
.secgal.capar-tall .galcard__media { aspect-ratio: 4 / 5; }
.secgal.capar-square .galcard__media { aspect-ratio: 1 / 1; }
.secgal.capar-wide { --gal-w: 320px; }
.secgal.w80 .galrow { --gal-w: 176px; }
.secgal.w60 .galrow { --gal-w: 132px; }
/* 움직임을 줄여 달라고 한 기기에서는 아예 세운다 */
@media (prefers-reduced-motion: reduce) {
  .galrow__track { animation: none; }
}
@media (max-width: 860px) {
  .galrow { --gal-w: 150px; --gal-gap: 10px; }
  .secgal.capar-wide { --gal-w: 230px; }
}

/* ── 상품 상세 세트 ─────────────────────────────────────────
   스토어 문법을 따르되 톤은 우리 것으로 — 흰 배경에 포인트는 #00A7FF 하나다.
   별점만 벤치마크대로 빨강(#ff3b30)을 쓴다. 모바일을 먼저 맞추고 큰 화면은 폭만 넓힌다. */

/* [B] 상품 이미지형 — 정사각 전폭, 손으로 밀어 넘긴다(자동 넘김 없음) */
.secpg { padding: 0; background: #fff; }
.secpg__stage { position: relative; }
.secpg__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.secpg__track::-webkit-scrollbar { display: none; }
.pgslide { flex: 0 0 100%; scroll-snap-align: center; }
.pgslide__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-tint); }
.pgslide__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 몇 번째 사진인지 — 우하단 반투명 검정 배지 */
.secpg__count {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  border-radius: 999px; padding: 4px 11px;
  background: rgba(17, 20, 26, 0.55); color: #fff;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}

/* [C~F] 상품 정보형 */
.secpi { padding: 18px 0 22px; background: #fff; }
.secpi__name {
  /* 벤치 실측 17px (1.0625rem). 예전 1.15rem = 18.4px 이었다. */
  margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.45;
  color: var(--ink); letter-spacing: -0.02em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.secpi__rateline { display: flex; align-items: center; gap: 5px; margin: 9px 0 0; flex-wrap: wrap; }
.secpi__star { color: #ff3b30; font-size: 0.95rem; line-height: 1; }
.secpi__rate { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.secpi__note { font-size: 0.82rem; color: #9aa3b6; }
.secpi__bar { width: 1px; height: 11px; background: #dfe4ec; margin: 0 3px; }
.secpi__link { font-size: 0.82rem; color: #6b7280; text-decoration: underline; text-underline-offset: 2px; }
.secpi__price { margin: 12px 0 0; }
.secpi__old { font-size: 0.85rem; color: #9aa3b6; text-decoration: line-through; }
.secpi__pnow { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.secpi__off { font-size: 1.35rem; font-weight: 800; color: #ff3b30; letter-spacing: -0.02em; }
/* 벤치 실측 22px (1.375rem). 예전 1.5rem = 24px 이었다. */
.secpi__now { font-size: 1.375rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.secpi__won { font-size: 1.05rem; font-weight: 700; color: #ff3b30; }
.secpi__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.pichip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #e7ecf2; border-radius: 8px; padding: 5px 9px;
  background: #f8fafc; font-size: 0.76rem; color: #4b5563;
}
.pichip__icon { color: #00A7FF; font-size: 0.8rem; }
.pichip__img { width: 15px; height: 15px; flex: 0 0 auto; }
.pichip__imgel { width: 100%; height: 100%; object-fit: contain; display: block; }
.pichip__text { font-weight: 600; }

/* [G·H·L] 혜택·배송 표형 */
.secsp { padding: 20px 0; background: #fff; }
.secsp__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.secsp__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.secsp__btns { display: flex; gap: 6px; flex: 0 0 auto; }
.secsp__btn {
  border: 1px solid #e0e5ee; border-radius: 6px; padding: 4px 9px;
  background: #fff; color: #6b7280; font-size: 0.72rem; font-weight: 600;
}
.secsp__table { border-top: 1px solid #eef1f6; }
.specrow {
  position: relative; display: flex; align-items: flex-start; gap: 8px;
  padding: 11px 2px; border-bottom: 1px solid #e8ecef;
}
/* 라벨열은 '적립·혜택·배송' 넉 자가 들어갈 만큼만 — 벤치 기준 라벨+간격 = 67px */
.specrow__label { flex: 0 0 59px; font-size: 0.8rem; color: #9aa3b6; line-height: 1.55; }
.specrow__value { flex: 1 1 auto; min-width: 0; font-size: 0.84rem; color: var(--ink); line-height: 1.55; }
/* '오늘출발' 처럼 내용 첫 낱말만 포인트색으로 — 줄마다 켠다.
   CSS 에는 '첫 낱말' 선택자가 없어서 템플릿이 그 낱말을 <b class="specrow__hi"> 로 감싼다. */
.specrow__hi { color: #00A7FF; font-weight: 700; }
.specrow__arrow { flex: 0 0 auto; color: #c4cad6; font-size: 0.95rem; line-height: 1.5; }
.secsp__more { display: inline-block; margin-top: 12px; }
.secsp__morebtn { font-size: 0.82rem; color: #6b7280; text-decoration: none; font-weight: 600; }

/* [I] 리뷰 하이라이트형 */
.secrh { padding: 22px 0; background: #fff; }
.secrh__title { margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
/* 카드 목록과 '맨 끝 버튼' 을 한 줄에 세워 같이 밀리게 한다 */
.secrh__scroll {
  display: flex; align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.secrh__list { flex: 0 0 auto; }
.secrh__scroll::-webkit-scrollbar { display: none; }
.secrh__list { display: flex; gap: 10px; padding: 0 clamp(16px, 4vw, 40px); }
/* 가로형 카드 — 벤치마크 실측: 폭 280 · 높이 84 · 바탕 #F8F9FD · 카드 사이 10px.
   왼쪽 정사각 썸네일(66) + 오른쪽 한 줄 메타 + 본문 2줄. */
.rhcard {
  position: relative; flex: 0 0 280px; margin: 0;
  display: flex; align-items: center; gap: 10px;
  min-height: 84px; border-radius: 10px; padding: 9px;
  background: #f8f9fd;
}
.rhcard__media { flex: 0 0 66px; width: 66px; height: 66px; border-radius: 8px; overflow: hidden; background: var(--bg-tint); }
.rhcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rhcard__text { min-width: 0; flex: 1 1 auto; }
.rhcard__meta { display: flex; align-items: center; gap: 4px; margin: 0; min-width: 0; }
.rhcard__star { color: #ff3d25; font-size: 0.8rem; line-height: 1; }
.rhcard__rate { font-size: 0.8rem; font-weight: 800; color: var(--ink); }
.rhcard__tag {
  font-size: 0.76rem; color: #9aa3b6; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rhcard__body {
  margin: 4px 0 0; font-size: 0.78rem; line-height: 1.45; color: #3f3f3f;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}

/* 슬라이드 맨 끝 — 동그란 버튼 + 그 아래 글자.
   원 지름은 벤치마크의 동그란 버튼(세로 50px)에 맞춰 48px 로 잡았다. */
.secrh__end { flex: 0 0 auto; padding: 0 clamp(16px, 4vw, 40px) 0 4px; }
.secrh__endlink { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; }
.secrh__endbtn {
  display: flex; align-items: center; justify-content: center;
  /* 벤치 실측 34px. 예전 48px 은 화면 밖 버튼을 못 재서 공유 버튼 크기로 잡았던 값이다. */
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #e0e5ee; background: #fff;
  color: #3f3f3f; font-size: 1.15rem; line-height: 1;
}
/* 벤치 실측 13px (0.8125rem) */
.secrh__endtext { font-size: 0.8125rem; color: #6b7280; white-space: nowrap; }

/* [J] 탭 바형 — 스크롤하면 화면 위에 붙는다 */
.secat { padding: 0; background: #fff; }
/* 탭을 화면 위에 붙일 때는 섹션이 아니라 그 섹션을 감싼 껍데기를 붙인다.
   섹션에만 sticky 를 걸면 '자기 껍데기가 화면에 있는 동안' 만 붙어 있어서,
   조금만 내려가면 탭이 같이 사라진다(붙는 기준이 부모 박스라서).
   붙는 자리는 0 이 아니라 '내비 바 바로 아래'(--navh) 다 — 0 에 붙이면 고정 내비(z-index 800)
   밑에 깔려 아예 안 보인다. 내비를 감춘 페이지는 --navh 가 0 이라 맨 위에 붙는다. */
:root { --navh: 0px; }
.secwrap.is-attop { position: sticky; top: var(--navh); z-index: 40; }
.secat--sticky { background: #fff; }
.secat__bar {
  /* 벤치 5번 샷은 탭이 폭을 나눠 갖지 않고 왼쪽부터 차곡차곡 붙는다 —
     탭 상자 사이 18px, 상자 안쪽 3px 이라 글자끼리는 23px 씩 떨어진다.
     탭이 많으면 옆으로 밀어 본다(overflow-x). */
  display: flex; align-items: stretch; gap: 16px; padding: 0 16px;
  border-bottom: 1px solid #eef1f6; background: #fff;
  overflow-x: auto; scrollbar-width: none;
}
.secat__bar::-webkit-scrollbar { display: none; }
.atab {
  /* 벤치는 탭 글자 사이가 22px(좌우 11px씩)이고 글자는 하단 바 버튼과 같은 크기다.
     위아래 13px 을 두면 바 높이가 벤치와 같은 49px(13+21+13+밑줄 2)이 된다. */
  flex: 0 0 auto; text-align: center; white-space: nowrap;
  padding: 13px 3px 12px; border-bottom: 2px solid transparent;
  font-size: 1.1rem; font-weight: 600; color: #9aa3b6; text-decoration: none;
  line-height: 1.2;
}
.atab.is-on { color: var(--ink); border-bottom-color: #00A7FF; font-weight: 700; }

/* 앵커로 갈 때 내비·탭에 가리지 않게 그 높이만큼 미리 띄워 둔다.
   --attop 은 site.js 가 '내비 + 탭' 높이로 채운다(둘 다 없으면 0). */
:root { --attop: 0px; }
[id] { scroll-margin-top: calc(var(--attop) + 8px); }

/* [K] 알림 박스형 */
.secnb { padding: 14px 0; background: #fff; }
/* 결제 사기 주의 안내 — 벤치는 연분홍 바탕에 빨간 ⓘ 원이다.
   회색이 아니라 '조심하라'는 색이어야 눈에 걸린다. */
.secnb__box {
  /* 벤치 5번 샷 실측: 높이 64px · 옅은 분홍 바탕에 한 톤 진한 테두리 1px */
  display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid #ffe6e3; border-radius: 10px; padding: 13px 14px; background: #fff9f8;
}
.secnb__icon { flex: 0 0 auto; color: #ff3b30; font-size: 1.13rem; line-height: 1.25; }
.secnb__img { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.secnb__imgel { width: 100%; height: 100%; object-fit: contain; display: block; }
.secnb__text { margin: 0; font-size: 0.8rem; line-height: 1.4; color: #4b5563; white-space: pre-wrap; }

@media (min-width: 861px) {
  .secpg__track { max-width: 560px; margin: 0 auto; }
  .secpi__name { font-size: 1.35rem; }
  .rhcard { flex-basis: 170px; }
}

/* [M] 하단 고정 버튼 '스토어형' — 버튼 하나가 화면 폭을 꽉 채운다 */
.ctafix--store .ctafix__btn {
  border-radius: 10px; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em;
}
.ctafix--store .ctafix__inner { padding-left: 12px; padding-right: 12px; }

/* [11] 인증 정보형 — 회색 박스: 왼쪽 글 3줄 / 오른쪽 마크 */
.seccb { padding: 14px 0; background: #fff; }
.seccb__box {
  /* 벤치 5번 샷 실측: 높이 109px · 배경 #f8f9fd · KC 마크 자리 36×54 */
  display: flex; align-items: center; gap: 12px;
  border-radius: 10px; padding: 12px 14px; background: #f8f9fd;
}
.seccb__text { flex: 1 1 auto; min-width: 0; }
.seccb__name { margin: 0; font-size: 0.84rem; font-weight: 700; color: var(--ink); }
.seccb__numline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0 0; }
.seccb__num { font-size: 0.78rem; color: #4b5563; }
.seccb__link { font-size: 0.76rem; color: #6b7280; text-decoration: underline; text-underline-offset: 2px; }
.seccb__note { margin: 5px 0 0; font-size: 0.72rem; line-height: 1.55; color: #9aa3b6; }
/* 벤치 KC 마크는 정사각이 아니라 세로로 긴 36×54 자리다 */
.seccb__mark { flex: 0 0 auto; width: 36px; height: 54px; }
.seccb__markimg { width: 100%; height: 100%; object-fit: contain; display: block; }

/* [12] 펼쳐보기 버튼형 — 바로 위 섹션 묶음을 접었다 편다 */
.seccol { padding: 4px 0 18px; background: #fff; }
.seccol__btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  /* 벤치 5번 샷 실측: 높이 32px 짜리 납작한 알약 버튼이다 */
  width: 100%; border: 1px solid #d3dadf; border-radius: 8px; padding: 6px 12px;
  background: #fff; color: var(--ink); font-family: inherit;
  font-size: 0.88rem; font-weight: 700; line-height: 1.28; cursor: pointer;
}
.seccol__btn:hover { border-color: #00A7FF; color: #00A7FF; }
.seccol__arrow { font-size: 0.8rem; transition: transform 0.2s ease; }
.seccol__btn.is-open .seccol__arrow { transform: rotate(180deg); }
/* 접힌 묶음 — 아래쪽이 하얗게 사라지며 '더 있다' 를 알린다 */
.tplfold { position: relative; overflow: hidden; }
.tplfold.is-shut { max-height: var(--foldh, 320px); }
.tplfold.is-shut::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}


/* --- 스토어 상세 추가 섹션 ------------------------------------
   벤치마크(451px 폰)에서 잰 값 그대로: 좌우 여백 17px · 라벨열 69px ·
   상품명 17px / 판매가 22px / 본문 13~15px · 구분선 #E5E5E5 · 띠 #F0F0F0.
   빨강은 별점·가격에만(#FF3D25 / #D40022), 그 밖의 포인트는 전부 #00A7FF. */

/* [R] 리뷰 목록형 */
.secrs { padding: 20px 0; background: #fff; }
.secrs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.secrs__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.secrs__count { margin-left: 4px; font-weight: 800; }
.secrs__std { font-size: 0.78rem; color: #9aa3b6; }
.secrs__rate { display: flex; align-items: center; gap: 5px; margin: 12px 0 0; }
.secrs__star { color: #ff3d25; font-size: 1rem; line-height: 1; }
.secrs__num { font-size: 1rem; font-weight: 800; color: var(--ink); }
.secrs__note { font-size: 0.8rem; color: #9aa3b6; }
.secrs__size { margin: 6px 0 0; font-size: 0.82rem; color: #3f3f3f; }
.secrs__ai { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; flex-wrap: wrap; }
.secrs__ailabel { font-size: 0.82rem; font-weight: 700; color: #00A7FF; }
.secrs__ainote { font-size: 0.78rem; color: #6b7280; }
.secrs__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.rschip {
  position: relative; display: inline-flex; align-items: center;
  border: 1px solid #e7ecf2; border-radius: 999px; padding: 6px 12px;
  background: #fff; font-size: 0.78rem; color: #3f3f3f;
}
.secrs__photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 0; }
.rsphoto { position: relative; }
.rsphoto__media { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--bg-tint); }
.rsphoto__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 맨 끝 칸 더보기 — 사진 위에 반투명 검정으로 덮는다 */
.rsphoto__link {
  position: absolute; inset: 0; z-index: 2;      /* '더보기' 글자 위까지 통째로 눌린다 */
  border-radius: inherit; -webkit-tap-highlight-color: transparent;
}
.rsphoto__more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(17, 20, 26, 0.55); color: #fff;
  font-size: 0.74rem; font-weight: 700; text-align: center; line-height: 1.4; white-space: pre-line;
}
.secrs__more { display: block; margin-top: 14px; text-align: center; }
.secrs__morebtn {
  display: block; border: 1px solid #dfe4ec; border-radius: 8px; padding: 12px;
  color: #3f3f3f; font-size: 0.85rem; font-weight: 600; text-decoration: none;
}

/* [Q] Q&A 카드형 */
.secqa { padding: 20px 0; background: #fff; }
.secqa__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.secqa__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.secqa__count { margin-left: 4px; font-weight: 800; }
.secqa__ask {
  border: 1px solid #e0e5ee; border-radius: 6px; padding: 4px 9px;
  background: #fff; color: #6b7280; font-size: 0.74rem; font-weight: 600; text-decoration: none;
}
.secqa__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 12px; }
.secqa__scroll::-webkit-scrollbar { display: none; }
.secqa__list { display: flex; gap: 8px; padding: 0 clamp(16px, 4vw, 40px); }
.qnacard {
  position: relative; flex: 0 0 272px; margin: 0;
  border: 1px solid #eef1f6; border-radius: 10px; padding: 12px;
}
.qnacard__meta { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.72rem; color: #9aa3b6; }
.qnacard__st { color: #00A7FF; font-weight: 700; }
.qnacard__body {
  margin: 8px 0 0; font-size: 0.8rem; line-height: 1.55; color: #3f3f3f;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.secqa__more { display: block; margin-top: 12px; text-align: center; }
.secqa__morebtn {
  display: block; border: 1px solid #dfe4ec; border-radius: 8px; padding: 12px;
  color: #3f3f3f; font-size: 0.85rem; font-weight: 600; text-decoration: none;
}

/* [S] 판매자 카드형 */
.secsl { padding: 18px 0; background: #fff; }
.secsl__box { display: flex; align-items: center; gap: 12px; }
.secsl__logo { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--bg-tint); }
.secsl__logoimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.secsl__text { min-width: 0; }
.secsl__name { margin: 0; font-size: 1rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.secsl__note { margin: 3px 0 0; font-size: 0.8rem; color: #00A7FF; }
.secsl__badges { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; flex-wrap: wrap; }
.secsl__badge { font-size: 0.76rem; font-weight: 700; color: #3f3f3f; }
.secsl__badge--plain { font-weight: 400; color: #9aa3b6; }
.secsl__bar { width: 1px; height: 11px; background: #dfe4ec; }

/* [L] 아코디언 목록형 — 벤치마크 행 높이 48px 그대로 */
.secacc { padding: 6px 0 14px; background: #fff; }
.secacc__list { border-top: 1px solid #eef1f6; }
.accrow {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* 벤치 실측 48px. 위아래 여백이 12px 이면 글자 줄높이까지 더해 51px 이 된다 → 10px 로 */
  min-height: 48px; padding: 10px 2px; border-bottom: 1px solid #eef1f6;
  color: var(--ink); text-decoration: none;
}
.accrow__text { font-size: 0.88rem; font-weight: 600; }
.accrow__arrow { flex: 0 0 auto; color: #121212; font-size: 1rem; }

/* [태그] 관련 태그형 */
.sectag { padding: 18px 0; background: #fff; }
.sectag__title { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.sectag__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tagchip {
  position: relative; display: inline-flex; align-items: center;
  border-radius: 6px; padding: 6px 10px; background: #f4f6f9;
  font-size: 0.78rem; color: #6b7280;
}

/* [다크 표] 다크 2열 표형 */
.secdt { padding: 0; background: #1b1e24; }
.secdt__inner { padding: 26px clamp(16px, 4vw, 40px) 30px; }
.secdt__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  padding: 11px 18px; margin-bottom: 18px;
}
.secdt__title { color: #fff; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.secdt__note { color: rgba(255, 255, 255, 0.6); font-size: 0.74rem; }
.drow {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.drow__label { flex: 0 0 92px; font-size: 0.8rem; font-weight: 700; color: #fff; }
.drow__value { flex: 1 1 auto; min-width: 0; font-size: 0.8rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); white-space: pre-line; }

/* [유튜브] 임베드형 */
.secyt { padding: 18px 0; background: #fff; }
.secyt__title { margin: 0 0 12px; font-size: 0.92rem; font-weight: 700; color: var(--ink); text-align: center; }
.secyt__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.secyt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.secyt__poster { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg-tint); }
.secyt__posterimg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── [주문/결제형 신청 폼] ───────────────────────────────────────
   scratchpad/bench/apply_1~4.png(폭 450px) 실측을 그대로 옮긴 값이다.
   바탕 #F3F5F7 · 카드 흰색 · 좌우 여백 17px · 카드 폭 417px(=450-17*2)
   · 카드 사이 12px(구획이 바뀌는 자리만 22px) · 카드 안쪽 여백 18px.
   벤치의 초록(#00DE5A)은 우리 브랜드색(#00A7FF)으로 바꿨다. */
/* 주문/결제형은 화면 전체가 곧 폼이다 — 섹션 여백을 두면 벤치보다 위가 벌어진다.
   /apply 전용 여백(.is-applypage …)보다 뒤에 와야 덮인다. */
.secform--order, .is-applypage .secform--order:not(.secform--popup) { padding: 0; }
.secform--order .secform__inner { max-width: 451px; padding: 0; }
.ordf {
  --ordpad: 17px;          /* 화면 좌우 여백 */
  --ordin: 18px;           /* 카드 안쪽 여백 */
  background: #F3F5F7;
}
.ordf__head {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 56px; background: #fff;
}
.ordf__title { margin: 0; font-size: 1.06rem; font-weight: 700; color: var(--ink); }
.ordf__x {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0;
  border: 0; background: none; color: var(--ink); font-size: 1.25rem; line-height: 1;
  cursor: pointer;
}
.ordf__blocks { display: block; }

/* 카드 한 장 */
.ordcard {
  position: relative;
  margin: 12px var(--ordpad) 0;
  padding: var(--ordin);
  border-radius: 12px;
  background: #fff;
}
/* 구획이 바뀌는 자리는 조금 더 띄운다(벤치 22px) */
.ordcard--item, .ordcard--point { margin-top: 22px; }
.ordcard__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0 0 14px;
}

/* ── 배송지 — 실제 입력 칸 ── */
.ordrow { position: relative; display: block; margin: 0 0 8px; }
/* hidden 은 CSS 의 display 보다 세지 않다 — 접어 둔 칸이 열려 보이면 안 된다 */
.ordf .ordrow[hidden], .ordf [hidden] { display: none; }
.ordf .ordrow input {
  width: 100%; box-sizing: border-box;
  border: 0; border-radius: 0; padding: 0; background: none;
  color: var(--ink); font-family: inherit; line-height: 1.55;
  /* 입력칸 글자는 16px 아래로 못 내린다 — iOS 가 칸을 누르는 순간 화면을 확대해 버린다.
     벤치는 더 작지만 그건 앱 화면이고, 우리는 웹이라 이 규칙이 먼저다. */
  font-size: 1rem;
}
.ordf .ordrow input::placeholder { color: #9AA3B6; }
.ordf__name { font-size: 1.06rem; font-weight: 700; }
.ordf .ordrow input.ordf__phone { color: var(--muted); }
.ordrow--addr { display: flex; align-items: baseline; gap: 8px; }
.ordf__addr { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.ordf__addrbtn {
  flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px;
  background: #fff; color: var(--ink);
  font-family: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer;
}
.ordf__zip { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
/* 배송메모 — 벤치의 드롭다운 칸(높이 44 · 테두리 #DCDEE0) */
.ordrow--memo { margin-top: 14px; }
.ordf__memo {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 14px;
  border: 1px solid #DCDEE0; border-radius: 6px;
  color: #9AA3B6; font-size: 0.88rem; cursor: pointer;
}
.ordf__memo.is-picked { color: var(--ink); }
.ordf__memoarrow { color: #8B94A6; font-size: 0.9rem; line-height: 1; }
.ordf__memoopts { display: none; gap: 6px; margin-top: 8px; }
.ordf__memoopts.is-open { display: flex; }
.ordf__memoopt {
  flex: 1 1 auto;
  border: 1px solid var(--line); border-radius: 6px; padding: 9px 4px;
  background: #fff; color: var(--ink-soft);
  font-family: inherit; font-size: 0.78rem; cursor: pointer;
}
.ordf__memoopt.is-on { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.ordrow--entpw { margin-top: 8px; }
.ordf .ordrow--entpw input {
  border: 1px solid #DCDEE0; border-radius: 6px;
  height: 44px; padding: 0 14px;
}
.ordf__check { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; }
.ordf__checkmark {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 18px;
  border: 1px solid #C9D0DC; border-radius: 50%;
  color: #8B94A6; font-size: 0.62rem;
}
.ordf__checktxt { font-size: 0.84rem; color: var(--ink-soft); }
.ordf__okbadge { margin: 10px 0 0; font-size: 0.8rem; font-weight: 700; color: var(--brand); }

/* ── 상품 ── */
.ordf__store { font-size: 0.94rem; font-weight: 700; color: var(--ink); }
.ordf__ship { font-size: 0.82rem; color: var(--muted); }
.ordf__item { display: flex; align-items: flex-start; gap: 12px; }
.ordf__thumb {
  flex: 0 0 60px; width: 60px; height: 60px;
  border-radius: 6px; overflow: hidden; background: #E9ECF1;
}
.ordf__thumbimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ordf__pname {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 0.88rem; line-height: 1.5; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.ordf__optbox {
  margin-top: 14px; padding: 12px 14px;
  border-radius: 6px; background: #F3F5F7;
}
.ordf__optline { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 0.78rem; }
.ordf__optkey {
  border: 1px solid #DCDEE0; border-radius: 3px; padding: 1px 5px;
  color: var(--muted); font-size: 0.7rem;
}
.ordf__opt, .ordf__qty { color: var(--ink-soft); }
.ordf__optbar { color: #C4CAD6; }
.ordf__priceline {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  margin: 12px 0 0;
}
.ordf__was { color: #9AA3B6; font-size: 0.82rem; }
.ordf__price { font-size: 1rem; font-weight: 700; color: var(--ink); }

/* ── 할인/쿠폰 + 총 주문금액 ── */
.ordcard--total { padding: 0; overflow: hidden; }
.ordf__dc {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 18px var(--ordin);
  font-size: 0.86rem;
}
.ordf__dclabel { color: var(--ink-soft); }
.ordf__dcbtn {
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px;
  color: var(--ink); font-size: 0.74rem; font-weight: 700;
}
.ordf__dcbadge {
  margin-left: auto;
  border-radius: 4px; padding: 2px 6px;
  background: #E6F5FF; color: var(--brand); font-size: 0.68rem; font-weight: 700;
}
.ordf__dcvalue { color: var(--brand); font-size: 0.92rem; font-weight: 700; }
.ordf__sum {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0; padding: 18px var(--ordin);
  background: #F2FAFF;      /* 벤치의 연녹 배경 자리 — 브랜드색 계열로 */
}
.ordf__sumlabel { font-size: 0.94rem; font-weight: 700; color: var(--ink); }
.ordf__sumvalue { font-size: 1.05rem; font-weight: 700; color: var(--brand); }

/* ── 접히는 카드들(포인트·후불결제·결제수단·포인트 혜택) ── */
.ordf__head2 { font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.ordf__value { font-size: 0.94rem; font-weight: 700; color: var(--brand); }
.ordf__body {
  margin: 0; padding: 14px;
  border-radius: 6px; background: #F3F5F7;
  font-size: 0.86rem; color: var(--ink-soft);
}
.ordf__row2 {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 14px 0 0; font-size: 0.9rem;
}
.ordf__r2l { color: var(--ink); font-weight: 700; }
.ordf__r2v { color: var(--ink); font-weight: 700; }
.ordf__note { margin: 10px 0 0; font-size: 0.74rem; color: var(--muted); }

/* ── 개인정보 제공 동의 ── */
.ordf__agree { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 0; font-size: 0.86rem; }
.ordf__agreelabel { color: var(--ink-soft); }
.ordf__agreewho { color: var(--brand); font-weight: 700; }
.ordf__agreemore { color: var(--muted); text-decoration: underline; }
.ordf__agreesub { margin: 10px 0 0; font-size: 0.82rem; color: var(--muted); }

/* ── 동의문 + 큰 버튼 ── */
.ordf__err {
  margin: 12px var(--ordpad) 0;
  font-size: 0.82rem; font-weight: 700; color: #C0392B;
}
.ordf__consent {
  margin: 22px var(--ordpad) 14px;
  font-size: 0.8rem; color: var(--ink-soft); text-align: center;
}
.ordf__submit {
  display: block; width: calc(100% - var(--ordpad) * 2);
  margin: 0 var(--ordpad); height: 52px;
  border: 0; border-radius: 8px;
  background: var(--brand); color: #fff;
  font-family: inherit; font-size: 1.02rem; font-weight: 700; cursor: pointer;
}
.ordf__submit:disabled { opacity: 0.55; cursor: default; }

/* 하단 고정 버튼 줄 — 스크롤 중에도 늘 화면 아래에 붙어 있다.
   sticky 로는 안 된다: 이 줄이 폼의 마지막 요소라 밀려날 자리가 없어 그냥 흘러가 버린다.
   그래서 화면에 고정하고, 가려지는 만큼 아래 여백을 준다. */
.ordf { padding-bottom: 96px; }
.ordf__bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  z-index: 60; width: min(451px, 100%); box-sizing: border-box;
  padding: 10px 0 12px;
  background: #fff; box-shadow: 0 -6px 18px -12px rgba(11, 18, 32, 0.5);
}
.ordf__submit--bar { margin: 0 var(--ordpad); }

/* ── [스토어 템플릿 페이지 전용 여백] ────────────────────────────
   벤치 실측: 화면 좌우 여백 17px. 기본값(모바일 20px / PC 24px)보다 좁다.
   is-storepage 는 '스토어 상품 페이지' 템플릿으로 만든 페이지에만 붙으므로
   템플릿을 안 쓴 다른 페이지의 여백은 하나도 안 바뀐다. */
body.is-storepage .container { padding: 0 17px; }

/* ── [떠 있는 버튼 · 공유 팝업] ─────────────────────────────────
   벤치 스크린샷(scratchpad/bench 의 상세페이지 2번 샷, 폭 455) 실측:
     원 지름 38px · 오른쪽 여백 12px · 하단 고정 버튼 바로 위(8px)
     흰 바탕 · 연한 테두리 · 부드러운 그림자
   ↑ 원은 공유 원 아래에 붙어 나타난다(줄 전체가 아래에 고정돼 있어 공유 원이 위로 밀린다). */
.secfb { margin: 0; padding: 0; }
.secfb__dock {
  position: fixed; right: 12px; z-index: 55;
  /* 하단 고정 버튼이 있으면 그 위에, 없으면 화면 아래 여백만큼.
     --ctafix-h 는 site.js 가 고정 바의 실제 높이로 채운다(없는 페이지에선 0). */
  bottom: calc(var(--ctafix-h, 0px) + 8px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
.secfb__slot { pointer-events: auto; }
.secfb__btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid #E7ECF2; border-radius: 50%;
  background: #fff; color: var(--ink);
  box-shadow: 0 4px 14px -4px rgba(11, 18, 32, 0.28);
  cursor: pointer;
}
.secfb__btn:hover { border-color: #D5DCE6; }
/* ↑ 원은 위로 스크롤할 때만. 나타날 때도 사라질 때도 부드럽게. */
.secfb__slot--top {
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.22s var(--ease, ease), transform 0.22s var(--ease, ease);
  pointer-events: none;
}
.secfb__slot--top.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .secfb__slot--top { transition: none; }
}

/* ── 공유 팝업 ── */
.shpop {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(11, 18, 32, 0.45);
}
.shpop[hidden] { display: none; }
.shpop__panel {
  position: relative; width: 100%; max-width: 320px;
  border-radius: 14px; padding: 18px 18px 16px;
  background: #fff;
  box-shadow: 0 24px 60px -18px rgba(11, 18, 32, 0.5);
}
.shpop__head {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.shpop__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.shpop__x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; padding: 0;
  border: 0; background: none; color: var(--muted);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
/* 공유처가 카카오톡 하나뿐이라 가운데로 놓는다 */
.shpop__list { display: flex; justify-content: center; margin-bottom: 18px; }
.shitem {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 0; padding: 0; background: none;
  font-family: inherit; cursor: pointer;
}
.shitem__icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: #fff;
}
.shitem__icon--kakao { background: #FEE500; color: #191600; }
.shitem__name { font-size: 0.72rem; color: var(--ink-soft); text-align: center; }

.shpop__urlrow {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #DCDEE0; border-radius: 8px; padding: 6px 6px 6px 12px;
}
.shpop__url {
  flex: 1 1 auto; min-width: 0;
  border: 0; padding: 0; background: none;
  color: var(--ink-soft); font-family: inherit;
  /* 16px 아래로 내리면 iOS 가 칸을 누를 때 화면을 확대한다 */
  font-size: 1rem;
  text-overflow: ellipsis;
}
.shpop__copy {
  flex: 0 0 auto;
  border: 0; border-radius: 6px; padding: 8px 14px;
  background: var(--brand); color: #fff;
  font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.shpop__toast {
  margin: 12px 0 0;
  font-size: 0.8rem; font-weight: 700; color: var(--brand); text-align: center;
}
.shpop__toast[hidden] { display: none; }

/* ── [스토어형 하단 고정 바 — 3분할] ────────────────────────────
   벤치 실측(폭 451 기준): 좌우 여백 17px · 버튼 높이 48px · 버튼 사이 5px
   · 왼쪽 정사각 아이콘 48×48 · 가운데와 오른쪽은 남는 폭을 반씩 나눠 갖는다.
   벤치의 하트 버튼은 뺐다(우리 화면에 찜 기능이 없다). */
/* 좌우 17px 는 바깥(.ctafix)에서 한 번만 준다 — 여기서 또 주면 겹쳐서 45px 이 된다 */
.ctafix--store .ctafix__inner { padding-left: 0; padding-right: 0; }
body:not(.is-edit) .ctafix--store {
  padding-left: 16px; padding-right: 16px;
  /* 벤치는 바 위에 그림자 없이 1px 선 하나다 — 그림자를 얹으면 바가 떠 보인다 */
  border-top: 1px solid #e5e5e5; box-shadow: none;
}
.ctafix__row3 { display: flex; align-items: center; gap: 4px; }
.ctafix__ico {
  flex: 0 0 48px; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #d3dadf; border-radius: 8px;
  background: #fff; color: var(--ink-soft);
  text-decoration: none; cursor: pointer;
}
.ctafix__ico:hover { border-color: #b9c3cc; }
.ctafix__mid, .ctafix__main {
  /* 가운데는 <button> 이라 브라우저 기본 좌우 패딩(6px)이 붙는다. 그대로 두면
     flex-basis 0 위에 얹혀 가운데만 12px 넓어진다 — 벤치는 둘이 같은 폭이다. */
  flex: 1 1 0; min-width: 0; height: 48px; padding: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  /* 벤치 글자 잉크 높이 15px 에 맞춘 크기(0.95rem 은 13px 이라 작았다) */
  font-family: inherit; font-size: 1.1rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 가운데 — 흰 바탕에 테두리만 */
.ctafix__mid {
  border: 1px solid var(--brand); background: #fff; color: var(--brand);
}
/* 오른쪽 — 브랜드색 채움 */
.ctafix__main {
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
}
.ctafix--store .ctafix__inner { max-width: 451px; }