/* ==========================================================================
   스카이렌탈 — 토스 스타일 디자인 시스템
   ========================================================================== */

/* ---------- Design Tokens (Duolingo-inspired playful) ----------
   디스플레이 폰트 Jua는 HTML의 Google Fonts 링크(실서비스) 또는
   아티팩트 빌드의 데이터 URI @font-face로 로드됩니다. */
:root {
  /* Sky Blue (Duolingo macaw 계열 — '스카이'의 하늘색) */
  --blue-50: #DDF4FF;
  --blue-100: #B8E8FF;
  --blue-500: #1CB0F6;
  --blue-600: #1899D6;
  --blue-700: #147EB3;

  /* Playful flat palette */
  --pal-green: #58CC02;
  --pal-green-dark: #4CAD01;
  --pal-yellow: #FFC800;
  --pal-yellow-dark: #E6AC00;
  --pal-orange: #FF9600;
  --pal-red: #FF4B4B;
  --pal-purple: #CE82FF;
  --pal-pink: #FF86D0;

  /* 두꺼운 테두리 */
  --line: #E5E5E5;
  --line-strong: #D8DCE0;

  --font-display: "Jua", "Cafe24Ssurround", -apple-system, "Apple SD Gothic Neo", sans-serif;

  /* Grey scale (Toss) */
  --grey-50: #F9FAFB;
  --grey-100: #F2F4F6;
  --grey-200: #E5E8EB;
  --grey-300: #D1D6DB;
  --grey-400: #B0B8C1;
  --grey-500: #8B95A1;
  --grey-600: #6B7684;
  --grey-700: #4E5968;
  --grey-800: #333D4B;
  --grey-900: #191F28;

  --red-500: #F04452;
  --red-600: #D91F32;
  --red-50: #FDEDEE;
  --green-500: #02B26E;
  --green-600: #037A4C;
  --green-50: #E6F6EF;
  --orange-500: #FE9800;
  --orange-600: #B26B00;
  --orange-50: #FFF3E0;
  --yellow-500: #FFC342;

  --bg: #FFFFFF;
  --surface: var(--grey-100);
  --text: var(--grey-900);
  --text-sub: var(--grey-700);
  --text-weak: var(--grey-600);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  --shadow-card: 0 1px 2px rgba(2, 32, 71, 0.05), 0 4px 16px rgba(2, 32, 71, 0.05);
  --shadow-float: 0 6px 24px rgba(2, 32, 71, 0.12);
  --shadow-sheet: 0 -8px 40px rgba(2, 32, 71, 0.16);

  --header-h: 60px;
  --maxw: 1080px;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* ---------- Reset / Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  font-size: 16px;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  letter-spacing: inherit;
}
input, select {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}
::selection { background: var(--blue-100); }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* pressable — 토스 특유의 눌림 인터랙션 */
.pressable {
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.pressable:active { transform: scale(0.97); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.header.scrolled { border-bottom-color: var(--grey-100); }
.header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--blue-500);
  letter-spacing: 0;
}
.header__logo-mark {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--blue-500);
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
  transform: rotate(-4deg);
}
.header__nav {
  display: flex;
  gap: 4px;
  flex: 1;
}
.header__nav a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-700);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.header__nav a:hover { background: var(--grey-100); color: var(--grey-900); }
.header__nav a.active { color: var(--blue-500); }
.header__cta {
  padding: 9px 16px 8px;
  border-radius: 12px;
  background: var(--blue-500);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  box-shadow: 0 3px 0 var(--blue-600);
  transition: filter 0.1s ease, transform 0.08s ease, box-shadow 0.08s ease;
}
.header__cta:hover { filter: brightness(1.05); }
.header__cta:active { transform: translateY(3px); box-shadow: 0 0 0 var(--blue-600); }

/* ---------- Buttons (듀오링고식 입체 버튼 — 아래 두께 + 눌림) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: filter 0.1s ease, transform 0.08s ease, box-shadow 0.08s ease, background-color 0.1s ease;
  text-align: center;
  position: relative;
}
.btn--primary {
  background: var(--blue-500);
  color: #fff;
  box-shadow: 0 4px 0 var(--blue-600);
}
.btn--primary:hover { filter: brightness(1.05); }
.btn--primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--blue-600); }
.btn--secondary {
  background: #fff;
  color: var(--blue-500);
  border: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--line);
}
.btn--secondary:hover { background: var(--grey-50); }
.btn--secondary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line); }
.btn--ghost {
  background: #fff;
  color: var(--grey-700);
  border: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--line);
}
.btn--ghost:hover { background: var(--grey-50); }
.btn--ghost:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line); }
.btn--lg { padding: 15px 26px 14px; font-size: 18px; }
.btn--md { padding: 11px 18px 10px; font-size: 16px; }
.btn--full { width: 100%; }
.btn:disabled { background: var(--grey-200); color: var(--grey-400); cursor: default; box-shadow: none; }
.btn:disabled:active { transform: none; }

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 64px;
  overflow: hidden;
}
.hero__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
.hero__copy { flex: 1.2; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFF5CC;
  color: #B8860B;
  border: 2px solid var(--pal-yellow);
  font-family: var(--font-display);
  font-size: 14px;
  padding: 7px 14px 6px;
  border-radius: 999px;
  margin-bottom: 20px;
  transform: rotate(-1.5deg);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0;
}
.hero h1 .accent {
  background: linear-gradient(transparent 60%, var(--blue-100) 60%);
  padding: 0 2px;
}
.hero h1 .accent { color: var(--blue-500); }
.hero__sub {
  margin-top: 18px;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-sub);
  font-weight: 500;
  line-height: 1.6;
}
.hero__actions {
  margin-top: 32px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero__visual {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.hero__card-stack {
  position: relative;
  width: 320px;
  height: 340px;
}
.float-card {
  position: absolute;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 18px 20px;
  animation: floaty 5s ease-in-out infinite;
}
.float-card .fc-label { font-size: 13px; color: var(--text-weak); font-weight: 600; }
.float-card .fc-value { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin-top: 2px; }
.float-card .fc-value.blue { color: var(--blue-500); }
.float-card--1 { top: 12px; left: 0; animation-delay: 0s; }
.float-card--2 { top: 120px; right: 0; animation-delay: 1.2s; }
.float-card--3 { bottom: 12px; left: 24px; animation-delay: 2.4s; }
.float-card .fc-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  font-size: 20px;
}
.float-card .fc-thumb {
  width: 88px; height: 88px;
  border-radius: 14px;
  background: var(--grey-100);
  margin-bottom: 10px;
  overflow: hidden;
}
.float-card .fc-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
  mix-blend-mode: multiply;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .float-card { animation: none; }
}

/* ---------- Section ---------- */
.section { padding: 56px 0; }
.section--grey { background: var(--grey-50); }
.section__head { margin-bottom: 28px; }
.section__head h2 {
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
}
.section__head p {
  margin-top: 8px;
  color: var(--text-sub);
  font-size: 16px;
  font-weight: 500;
}
.section__head .more {
  color: var(--blue-500);
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

/* ---------- Category Grid ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cat-tile {
  background: #fff;
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: var(--radius-lg);
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.cat-tile:hover { border-color: var(--blue-100); background: #FBFDFF; }
.cat-tile:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.cat-tile__count { font-size: 12.5px; color: var(--grey-500); font-weight: 600; margin-top: -8px; }
.cat-tile__icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
}
.cat-tile__label { font-size: 16px; font-weight: 700; }
.cat-tile__desc { font-size: 13px; color: var(--text-weak); font-weight: 500; margin-top: -8px; }

/* ---------- Product Card (타일형) ---------- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 20px;
}
.prod-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.prod-card:hover { border-color: var(--blue-100); background: #FBFDFF; }
.prod-card:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.prod-card__thumb {
  aspect-ratio: 1 / 0.92;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: #fff;
  transition: background-color 0.2s ease;
}
.prod-card__thumb svg { width: 40%; height: auto; opacity: 0.95; }
.prod-card__thumb .deco {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
}
.prod-card__body { padding: 4px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.prod-card__brand { font-size: 12.5px; color: var(--grey-500); font-weight: 600; }
.prod-card__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--grey-800);
  margin-top: 3px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-card__tags { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.prod-card__price { margin-top: 8px; }
.prod-card__origin {
  font-size: 13px;
  color: var(--grey-600);
  font-weight: 500;
  margin-top: 2px;
}
.prod-card__monthly { font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: 0; }
.prod-card__monthly .num { color: var(--grey-900); }
.prod-card__monthly .unit { font-size: 12.5px; color: var(--grey-500); font-weight: 600; margin-left: 2px; }

/* chips / tags */
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--grey-100);
  color: var(--grey-600);
}
.chip--blue { background: var(--blue-50); color: var(--blue-600); }
.chip--red { background: var(--red-50); color: var(--red-600); }
.chip--green { background: var(--green-50); color: var(--green-600); }
.chip--orange { background: var(--orange-50); color: var(--orange-600); }

/* horizontal scroll row (인기 상품) */
.hscroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 20px 20px;
  margin: 0 -20px;
  scroll-padding-left: 20px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }

/* ---------- Benefit rows (토스 리스트 스타일) ---------- */
.benefit-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.benefit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--grey-50);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
}
.benefit-row__icon {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.benefit-row__icon svg { width: 24px; height: 24px; }
.benefit-row__title { font-size: 16px; font-weight: 700; }
.benefit-row__desc { font-size: 14px; color: var(--text-sub); font-weight: 500; margin-top: 2px; }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  counter-reset: step;
}
.step-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  position: relative;
}
.step-card__num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue-500);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.step-card__title { font-size: 17px; font-weight: 700; }
.step-card__desc { font-size: 14px; color: var(--text-sub); margin-top: 6px; font-weight: 500; }

/* ---------- Reviews ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.review-card {
  background: var(--grey-50);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.review-card__stars { color: var(--yellow-500); font-size: 15px; letter-spacing: 2px; }
.review-card__text {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--grey-800);
  line-height: 1.65;
}
.review-card__meta {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-weak);
  font-weight: 600;
}

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }
.faq-item {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .arrow { transition: transform 0.2s ease; color: var(--grey-400); flex: none; }
.faq-item[open] summary .arrow { transform: rotate(180deg); }
.faq-item .faq-body {
  padding: 0 20px 18px;
  font-size: 15px;
  color: var(--text-sub);
  font-weight: 500;
  line-height: 1.65;
}

/* ---------- Big CTA band ---------- */
.cta-band {
  background: var(--blue-600);
  border-radius: var(--radius-xl);
  padding: 56px 32px;
  text-align: center;
  color: #fff;
}
.cta-band h2 { font-family: var(--font-display); font-size: clamp(25px, 3vw, 36px); font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.cta-band p { margin-top: 10px; font-size: 16px; opacity: 0.85; font-weight: 500; }
.cta-band .btn {
  margin-top: 28px;
  background: #fff;
  color: var(--blue-600);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}
.cta-band .btn:hover { background: var(--blue-50); }
.cta-band .btn:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,0.18); }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--grey-100);
  padding: 40px 0 60px;
  color: var(--text-weak);
  font-size: 13px;
  line-height: 1.8;
  font-weight: 500;
}
.footer strong { color: var(--grey-600); font-weight: 700; font-size: 14px; }
.footer .footer__links { display: flex; gap: 16px; margin: 10px 0; }
.footer .footer__links a { color: var(--grey-600); font-weight: 600; }
.footer small { display: block; margin-top: 14px; color: var(--grey-500); }

/* ---------- List page ---------- */
.list-head { padding: 44px 0 8px; }
.list-head h1 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 38px); font-weight: 400; letter-spacing: 0; }
.list-head p { color: var(--text-sub); margin-top: 8px; font-weight: 500; }
.filter-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 14px 0;
}
.filter-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 2px;
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: none;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--grey-100);
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-700);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.filter-chip:hover { background: var(--grey-200); }
.filter-chip:active { transform: scale(0.97); }
.filter-chip.active { background: var(--grey-900); color: #fff; }
.sort-select {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--line);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7684' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border-radius: 999px;
  padding: 9px 32px 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-700);
  cursor: pointer;
}
.list-count { font-size: 14px; color: var(--text-weak); font-weight: 600; margin: 18px 0 14px; }
.list-count b { color: var(--blue-500); }

/* 소분류 칩 (2차 필터) */
.sub-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 0 2px;
}
.sub-chip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--grey-200);
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--grey-600);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.sub-chip:hover { border-color: var(--grey-400); }
.sub-chip.active {
  border-color: var(--blue-500);
  color: var(--blue-600);
  background: var(--blue-50);
}
.sub-chip .cnt { color: var(--grey-400); font-weight: 500; margin-left: 3px; }
.sub-chip.active .cnt { color: var(--blue-500); }

/* 검색 입력 */
.search-box {
  position: relative;
  flex: none;
}
.search-box input {
  width: 200px;
  border: 2px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 9px 14px 9px 36px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-800);
  outline: none;
  transition: background-color 0.15s ease, width 0.2s ease;
}
.search-box input:focus { border-color: var(--blue-500); background: #fff; }
.search-box input::placeholder { color: var(--grey-500); font-weight: 500; }
.search-box svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey-500);
  pointer-events: none;
}
.empty-state {
  text-align: center;
  padding: 80px 0;
  color: var(--text-weak);
  font-weight: 600;
}

/* ---------- Detail page ---------- */
.detail { padding: 40px 0 72px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-weak);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  padding: 6px 10px 6px 6px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
.back-link:hover { background: var(--grey-100); }
.detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.detail__visual {
  border-radius: var(--radius-xl);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  overflow: hidden;
}
.detail__visual svg { width: 46%; height: auto; }
.detail__visual .deco { position: absolute; border-radius: 50%; opacity: 0.5; }
.detail__brand { font-size: 14px; font-weight: 700; color: var(--text-weak); }
.detail__name { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; margin-top: 6px; }
.detail__model { font-size: 13px; color: var(--grey-500); font-weight: 600; margin-top: 6px; }
.detail__desc { margin-top: 14px; font-size: 16.5px; color: var(--text-sub); font-weight: 500; line-height: 1.6; }
.detail__tags { display: flex; gap: 6px; margin-top: 14px; }

.price-box {
  margin-top: 24px;
  background: var(--grey-50);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.price-box__label { font-size: 14px; font-weight: 700; color: var(--grey-700); margin-bottom: 10px; }
.term-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.term-btn {
  padding: 14px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1.5px solid var(--grey-200);
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.term-btn:active { transform: scale(0.97); }
.term-btn .t-label { font-size: 13px; color: var(--text-weak); font-weight: 600; }
.term-btn .t-price { font-size: 16px; font-weight: 800; margin-top: 2px; }
.term-btn.active { border-color: var(--blue-500); background: var(--blue-50); }
.term-btn.active .t-label { color: var(--blue-600); }
.term-btn.active .t-price { color: var(--blue-600); }

.card-toggle {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1.5px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.card-toggle.active { border-color: var(--blue-500); background: var(--blue-50); }
.card-toggle__text { font-size: 15px; font-weight: 700; }
.card-toggle__sub { font-size: 13px; color: var(--text-weak); font-weight: 500; margin-top: 1px; }
.card-toggle.active .card-toggle__text { color: var(--blue-600); }

/* switch */
.switch {
  width: 44px; height: 26px;
  border-radius: 999px;
  background: var(--grey-300);
  position: relative;
  flex: none;
  transition: background-color 0.2s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}
.card-toggle.active .switch { background: var(--blue-500); }
.card-toggle.active .switch::after { transform: translateX(18px); }

.price-summary {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--grey-200);
}
.price-summary .row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-sub);
  font-weight: 500;
  padding: 3px 0;
}
.price-summary .row.total {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  align-items: baseline;
}
.price-summary .row.total .amount { font-family: var(--font-display); font-size: 27px; font-weight: 400; color: var(--blue-500); letter-spacing: 0; }
.price-summary .row .minus { color: var(--red-500); font-weight: 600; }

.detail__cta { margin-top: 20px; display: flex; gap: 10px; }

.spec-list { margin-top: 32px; }
.spec-list h3 { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.spec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--grey-100);
  font-size: 15px;
  font-weight: 500;
}
.spec-row:last-child { border-bottom: 0; }
.spec-row .check {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-500);
  display: grid;
  place-items: center;
}
.info-note {
  margin-top: 28px;
  background: var(--grey-50);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  font-size: 13px;
  color: var(--text-weak);
  font-weight: 500;
  line-height: 1.7;
}
.info-note b { color: var(--grey-600); }

/* 실제 상품 사진 썸네일 */
.prod-card__thumb--photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  mix-blend-mode: multiply;
}
.detail__visual--photo { background: var(--grey-100); }
.detail__visual--photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 40px;
  mix-blend-mode: multiply;
}
.sheet__product .thumb--photo { background: var(--grey-100); overflow: hidden; }
.sheet__product .thumb--photo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; mix-blend-mode: multiply; }

/* 상세 정보 이미지 (원본 상세페이지) */
.detail-imgs { margin-top: 32px; }
.detail-imgs h3 { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.detail-imgs img {
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}

/* related */
.related { padding: 24px 0 80px; }

/* ---------- Bottom Sheet ---------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25, 31, 40, 0.5);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-sheet);
  z-index: 201;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet.open { transform: translate(-50%, 0); }
.sheet__handle {
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--grey-200);
  margin: 12px auto 0;
}
.sheet__inner { padding: 20px 24px 32px; }
.sheet__title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.sheet__sub { font-size: 15px; color: var(--text-sub); font-weight: 500; margin-top: 6px; }
.sheet .field { margin-top: 18px; }
.sheet .field label { display: block; font-size: 13px; font-weight: 700; color: var(--grey-700); margin-bottom: 8px; }
.sheet .field input {
  width: 100%;
  border: 1.5px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s ease;
  background: #fff;
  color: var(--text);
}
.sheet .field input:focus { border-color: var(--blue-500); }
.sheet .field input::placeholder { color: var(--grey-500); font-weight: 500; }
.sheet__product {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--grey-50);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.sheet__product .thumb {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
}
.sheet__product .thumb svg { width: 30px; height: 30px; }
.sheet__product .p-name { font-size: 15px; font-weight: 700; line-height: 1.35; }
.sheet__product .p-price { font-size: 13px; color: var(--blue-500); font-weight: 700; margin-top: 2px; }
.sheet__actions { margin-top: 24px; }
.sheet__privacy {
  margin-top: 14px;
  font-size: 13px;
  color: var(--grey-500);
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
}

/* done state */
.sheet__done { text-align: center; padding: 28px 0 8px; }
.done-check {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--blue-500);
  display: grid;
  place-items: center;
  animation: pop 0.4s cubic-bezier(0.18, 1.4, 0.4, 1);
}
.done-check svg { width: 34px; height: 34px; }
.done-check svg path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw 0.45s 0.15s ease forwards;
}
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.sheet__done h3 { font-size: 21px; font-weight: 800; }
.sheet__done p { margin-top: 8px; color: var(--text-sub); font-size: 15px; font-weight: 500; line-height: 1.6; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: rgba(25, 31, 40, 0.92);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: var(--radius-md);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: calc(100vw - 40px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .detail__grid { grid-template-columns: 1fr; gap: 28px; }
  .detail__visual { position: static; aspect-ratio: 16 / 10; }
  .detail__visual svg { width: 26%; }
}
/* 헤더 내비: 로고+내비+언어+CTA 합이 ~960px라 그 아래에선 줄바꿈으로 깨짐 → 숨김 */
@media (max-width: 980px) {
  .header__nav { display: none; }
  .header__inner { justify-content: space-between; }
}
@media (max-width: 720px) {
  .hero { padding: 48px 0 40px; }
  .hero__inner { flex-direction: column; align-items: flex-start; }
  .hero__visual { width: 100%; margin-top: 12px; }
  .hero__card-stack { width: 100%; max-width: 340px; margin: 0 auto; height: 300px; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .search-box input { width: 110px; }
  .search-box input:focus { width: 150px; }
  .benefit-list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .section { padding: 44px 0; }
  /* 신청 CTA를 화면 하단에 고정해 상세 어디서든 보이게 */
  .detail__cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--grey-100);
    z-index: 90;
  }
  .detail { padding-bottom: 96px; }
}


/* ---------- Playful extras ---------- */
.cat-tile:hover .cat-tile__icon svg,
.cat-tile:hover .cat-tile__icon .char-svg { animation: wiggle 0.5s ease; }
@keyframes wiggle {
  25% { transform: rotate(-7deg); }
  75% { transform: rotate(7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-tile:hover .cat-tile__icon svg { animation: none; }
}

/* 말풍선 (캐릭터 대사) */
.speech {
  position: relative;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-800);
  line-height: 1.5;
}
.speech::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}
.char-svg { display: block; }

/* ---------- 빌리지 캐릭터 시스템 ---------- */
.hero-mascot {
  position: relative;
  width: 340px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-mascot__svg {
  width: 210px;
  height: 210px;
  animation: floaty 5s ease-in-out infinite;
}
.speech--hero {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  white-space: nowrap;
  font-size: 16px;
  z-index: 2;
}
.speech--hero::after {
  left: 50%;
  top: auto;
  bottom: -9px;
  transform: translateX(-50%) rotate(-45deg);
  border-left: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}
.float-card--a { bottom: 30px; left: -26px; animation-delay: 1s; padding: 12px 14px; }
.float-card--b { bottom: 70px; right: -18px; animation-delay: 2.2s; padding: 12px 16px; }
.float-card--a .fc-thumb { width: 64px; height: 64px; }
.float-card--a .fc-label, .float-card--b .fc-label { font-size: 12px; }
.float-card--a .fc-value, .float-card--b .fc-value { font-size: 18px; }

/* 카테고리 타일 속 캐릭터 */
.cat-tile__icon--char {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  padding: 6px;
}
.cat-tile__icon--char .char-svg { width: 100%; height: 100%; }

/* 빌리지 소개 */
.villige-intro {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 760px;
  margin: 0 auto 36px;
  background: #fff;
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 24px;
  padding: 28px 32px;
}
.villige-intro__mascot { width: 120px; flex: none; }
.villige-intro__mascot .char-svg { width: 120px; height: 120px; }
.villige-intro__story { font-size: 15.5px; color: var(--grey-700); font-weight: 500; line-height: 1.75; }
.villige-intro__story b { color: var(--blue-600); }

/* ==========================================================================
   빌리지 세계관 (몰입형) — 밤하늘 배경 + 흐르는 구름 + 요정 도감
   ========================================================================== */
.village {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  background: linear-gradient(180deg, #101740 0%, #1B2A6B 42%, #2E4CA6 78%, #4E74D9 100%);
  color: #fff;
}
.village__inner { position: relative; z-index: 2; }
.village__sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* 별: 반복 그라데이션 도트 + 반짝임 */
.vsky-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent),
    radial-gradient(1.6px 1.6px at 28% 42%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 46% 12%, #cfe0ff 50%, transparent),
    radial-gradient(1.8px 1.8px at 63% 30%, #fff 50%, transparent),
    radial-gradient(1.3px 1.3px at 78% 16%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 88% 44%, #cfe0ff 50%, transparent),
    radial-gradient(1.2px 1.2px at 8% 60%, #fff 50%, transparent),
    radial-gradient(1.7px 1.7px at 36% 66%, #fff 50%, transparent),
    radial-gradient(1.3px 1.3px at 70% 58%, #cfe0ff 50%, transparent);
  animation: vtwinkle 4s ease-in-out infinite;
}
@keyframes vtwinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* 흐르는 구름 (뭉게뭉게 원 3개를 뭉친 실루엣) */
.vcloud {
  position: absolute; border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 34px 6px 0 -4px rgba(255,255,255,0.10), -30px 8px 0 -6px rgba(255,255,255,0.08);
  filter: blur(0.4px);
}
.vcloud--1 { width: 90px; height: 34px; top: 14%; left: -14%; animation: vdrift 34s linear infinite; }
.vcloud--2 { width: 130px; height: 44px; top: 30%; left: -20%; opacity: 0.8; animation: vdrift 48s linear infinite 6s; }
.vcloud--3 { width: 70px; height: 26px; top: 56%; left: -12%; opacity: 0.7; animation: vdrift 40s linear infinite 12s; }
.vcloud--4 { width: 110px; height: 38px; top: 72%; left: -18%; opacity: 0.6; animation: vdrift 56s linear infinite 3s; }
@keyframes vdrift { to { transform: translateX(135vw); } }

.village .section__head h2 { color: #fff; }
.village .section__head p { color: rgba(255,255,255,0.72); }
.village__badge {
  display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  color: #fff; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 999px; padding: 7px 15px; margin-bottom: 14px;
}

/* 스토리 카드 (유리질감) */
.village__story {
  display: flex; align-items: center; gap: 26px;
  max-width: 760px; margin: 8px auto 40px;
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 24px; padding: 26px 30px; backdrop-filter: blur(4px);
}
.village__story-mascot { width: 118px; flex: none; }
.village__story-mascot .char-svg { width: 118px; height: 118px; animation: floaty 5s ease-in-out infinite; }
.village__story-text { font-size: 15.5px; color: rgba(255,255,255,0.9); font-weight: 500; line-height: 1.8; }
.village__story-text b { color: #FFE3A3; font-weight: 700; }

/* 랜드마크 지도 */
.village__map { max-width: 860px; margin: 0 auto 44px; }
.vmap-title, .vchar-title { text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 22px; margin-bottom: 4px; }
.vchar-hint { text-align: center; font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600; margin-bottom: 20px; }
.vmap-title { margin-bottom: 18px; }
.vmap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vmap-item {
  background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: 18px; padding: 18px 14px; text-align: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
.vmap-item:hover { transform: translateY(-4px); background: rgba(255,255,255,0.13); }
.vmap-emoji { font-size: 30px; display: block; }
.vmap-name { font-size: 14px; font-weight: 800; margin-top: 8px; }
.vmap-desc { font-size: 11.5px; color: rgba(255,255,255,0.62); font-weight: 500; margin-top: 3px; line-height: 1.45; }

/* 요정 도감 그리드 (플립 카드) */
.char-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 900px; margin: 0 auto;
}
.char-card {
  background: transparent; border: 0; padding: 0;
  perspective: 1000px; cursor: pointer; height: 224px;
}
.char-card__flip {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d;
}
.char-card.flipped .char-card__flip { transform: rotateY(180deg); }
.char-card__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 20px; padding: 18px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.char-card__front { background: #fff; border: 2px solid rgba(255,255,255,0.5); border-bottom: 4px solid rgba(0,0,0,0.06); }
.char-card__back {
  transform: rotateY(180deg); color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  border: 1.5px solid rgba(255,255,255,0.3); justify-content: flex-start; padding-top: 20px;
}
.char-card:hover .char-svg { animation: wiggle 0.5s ease; }
.char-card__svg { width: 84px; height: 84px; }
.char-card__svg .char-svg { width: 100%; height: 100%; }
.char-card__name { font-family: var(--font-display); font-size: 19px; margin-top: 8px; color: var(--grey-900); }
.char-card__motif { font-size: 12px; color: var(--grey-500); font-weight: 700; margin-top: 1px; }
.char-card__fliphint { font-size: 11px; color: var(--blue-500); font-weight: 700; margin-top: 8px; }
.char-card__back .cb-role { font-size: 12px; font-weight: 800; color: #FFE3A3; letter-spacing: 0.03em; }
.char-card__back .cb-home { font-size: 11.5px; color: rgba(255,255,255,0.7); font-weight: 600; margin-top: 3px; }
.char-card__back .cb-trait { font-size: 12.5px; font-weight: 700; margin-top: 10px; }
.char-card__back .cb-story { font-size: 11.5px; color: rgba(255,255,255,0.82); font-weight: 500; line-height: 1.55; margin-top: 8px; }
.char-card__back .cb-quote { font-size: 12px; color: #fff; font-weight: 600; margin-top: auto; padding-top: 10px; line-height: 1.45; }
.char-card__back .cb-more { display: inline-block; margin-top: auto; font-size: 12px; font-weight: 800; color: #FFE3A3; text-decoration: none; padding-top: 10px; }
.char-card__back .cb-more:hover { text-decoration: underline; }

/* ==========================================================================
   요정 상세 소개 페이지
   ========================================================================== */
.character { max-width: 860px; margin: 0 auto; padding-top: 84px; padding-bottom: 60px; }
.charp-hero {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 28px; padding: 44px 24px 38px; margin-top: 8px;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 62%),
    var(--accbg);
}
.charp-hero__sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; }
.charp-hero > * { position: relative; z-index: 1; }
.charp-hero__svg { width: 150px; height: 150px; margin: 0 auto; animation: floaty 5s ease-in-out infinite; }
.charp-hero__svg .char-svg { width: 100%; height: 100%; }
.charp-hero__badge {
  display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 800; color: var(--grey-700);
  background: rgba(255,255,255,0.7); border-radius: 999px; padding: 6px 14px;
}
.charp-hero__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 7vw, 46px); margin-top: 10px; color: var(--grey-900); }
.charp-hero__motif { font-size: 14px; font-weight: 700; color: var(--grey-600); margin-top: 2px; }
.charp-hero__catch { display: inline-block; margin-top: 18px; font-size: 15px; }

.charp-lore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.charp-lore__item {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 18px; padding: 18px 16px;
}
.charp-lore__item .cl-ico { font-size: 24px; }
.charp-lore__item b { display: block; font-size: 12.5px; color: var(--grey-500); font-weight: 800; }
.charp-lore__item p { font-size: 14.5px; font-weight: 700; color: var(--grey-900); margin-top: 3px; line-height: 1.45; }
.charp-lore__story {
  grid-column: 1 / -1; display: flex; gap: 16px; align-items: center;
  background: var(--grey-50); border-radius: 18px; padding: 20px 22px;
}
.charp-lore__story .db-char { width: 68px; height: 68px; flex: none; }
.charp-lore__story .db-char .char-svg { width: 100%; height: 100%; }
.charp-lore__story p { font-size: 15px; font-weight: 500; color: var(--grey-700); line-height: 1.7; }

.charp-products { margin: 32px 0; }
.charp-products .prod-grid { margin-top: 20px; }
.charp-others { margin: 20px 0 8px; }
.charp-others__title { font-family: var(--font-display); font-weight: 400; font-size: 20px; text-align: center; margin-bottom: 16px; }
.charp-others__row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.charp-others__item {
  flex: none; width: 92px; border-radius: 18px; padding: 14px 8px 12px; text-align: center; text-decoration: none;
  border: 2px solid rgba(0,0,0,0.05); transition: transform 0.12s ease;
}
.charp-others__item:hover { transform: translateY(-3px); }
.charp-others__item .cho-svg { width: 56px; height: 56px; margin: 0 auto; }
.charp-others__item .cho-svg .char-svg { width: 100%; height: 100%; }
.charp-others__item .cho-name { font-family: var(--font-display); font-size: 14px; color: var(--grey-900); margin-top: 4px; }

@media (max-width: 640px) {
  .charp-lore { grid-template-columns: 1fr; }
  .charp-lore__story { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .charp-hero__svg { animation: none; } }

@media (max-width: 640px) {
  .vmap-grid { grid-template-columns: repeat(2, 1fr); }
  .char-grid { grid-template-columns: repeat(2, 1fr); }
  .village__story { flex-direction: column; text-align: center; padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .vsky-stars, .vcloud { animation: none; }
  .village__story-mascot .char-svg { animation: none; }
  .char-card__flip { transition: none; }
}

/* 목록 페이지 담당 요정 */
.list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.list-char { display: flex; align-items: center; gap: 12px; flex: none; }
.list-char__svg { width: 76px; height: 76px; flex: none; }
.list-char__svg .char-svg { width: 100%; height: 100%; }
.list-char .speech { max-width: 240px; font-size: 13.5px; }

/* 상세 페이지 담당 요정 */
.char-note { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.char-note__svg { width: 72px; height: 72px; flex: none; }
.char-note__svg .char-svg { width: 100%; height: 100%; }
.char-note .speech { font-size: 14px; }

/* 신청 완료 캐릭터 */
.done-char { width: 110px; height: 110px; margin: 0 auto 14px; animation: pop 0.45s cubic-bezier(0.18, 1.4, 0.4, 1); }
.done-char .char-svg { width: 100%; height: 100%; }

@media (max-width: 960px) {
  .char-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hero-mascot { width: 100%; max-width: 320px; height: 320px; margin: 0 auto; }
  .villige-intro { flex-direction: column; text-align: center; padding: 24px 20px; }
  .list-char { display: none; }
}


/* 약정별 요금표 */
.terms-table {
  margin-top: 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
}
.terms-table__head {
  font-family: var(--font-display);
  font-size: 14px;
  padding: 10px 14px;
  background: var(--blue-50);
  color: var(--blue-700);
}
.terms-table__head span { font-family: var(--font); font-size: 11.5px; color: var(--grey-500); font-weight: 600; margin-left: 6px; }
.terms-table__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--grey-100);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--grey-700);
}
.terms-table__row .tt-term { flex: none; min-width: 64px; color: var(--grey-900); font-weight: 700; }
.terms-table__row .tt-care { flex: 1; color: var(--grey-500); font-weight: 500; font-size: 12.5px; }
.terms-table__row .tt-price { flex: none; font-weight: 800; color: var(--blue-600); }


/* 요정 브리핑 — 섹션 헤더를 캐릭터 말풍선으로 */
.brief-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.brief-head .bh-char { width: 46px; height: 46px; flex: none; }
.brief-head .bh-char .char-svg { width: 100%; height: 100%; }
.brief-head .speech { font-size: 14px; padding: 8px 13px; }
.brief-head .speech b { color: var(--blue-600); }
.spec-list .brief-head, .detail-imgs .brief-head { margin-top: 4px; }

/* ==========================================================================
   빌리지 상세페이지 (dpage) — 자동 생성 롱폼 상세 본문
   ========================================================================== */
.dpage {
  max-width: 760px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dpage__panel {
  border-radius: 28px;
  padding: 44px 36px;
  background: #fff;
  border: 2px solid var(--line);
  overflow: hidden;
  position: relative;
}

/* ① 인트로 */
.dpage__intro { text-align: center; border: 0; padding: 52px 28px 44px; }
.dpage__intro-char { width: 132px; height: 132px; margin: 0 auto; }
.dpage__intro-char .char-svg { width: 100%; height: 100%; }
.dpage__intro-speech {
  display: inline-block;
  margin-top: 14px;
  font-size: 15.5px;
  text-align: center;
}
.dpage__intro-speech::after { display: none; }
.dpage__intro-photo {
  max-width: 460px;
  margin: 24px auto 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(2, 32, 71, 0.10);
}
.dpage__intro-name { margin-top: 22px; }
.dpage__intro-name .din-brand { font-size: 14px; font-weight: 700; color: var(--grey-600); }
.dpage__intro-name h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 400;
  line-height: 1.35;
  margin-top: 4px;
}
.dpage__intro-name .din-model { font-size: 13px; color: var(--grey-500); font-weight: 600; margin-top: 6px; }

/* ② 감성 카피 */
.dpage__copy { text-align: center; padding: 56px 28px; border: 0; background: var(--grey-50); }
.dpage__copy h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--grey-900);
}
.dpage__copy p { margin-top: 12px; font-size: 16.5px; color: var(--grey-600); font-weight: 500; }

/* 말풍선 공통 */
.dpage__bubble { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.dpage__bubble .db-char { width: 56px; height: 56px; flex: none; }
.dpage__bubble .db-char .char-svg { width: 100%; height: 100%; }
.dpage__bubble .speech { font-size: 15px; }
.dpage__bubble .speech b { color: var(--blue-600); }

/* ③ 포인트 */
.dpage__point-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dpage__point {
  background: var(--grey-50);
  border-radius: 18px;
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dpage__point .dp-icon { font-size: 26px; flex: none; }
.dpage__point .dp-text { font-size: 15.5px; font-weight: 700; color: var(--grey-800); line-height: 1.45; }

/* ④ 요금 */
.dpage__price-big {
  text-align: center;
  padding: 26px 20px 30px;
  background: var(--blue-50);
  border-radius: 20px;
}
.dpage__price-big .dpb-label { display: block; font-size: 14px; font-weight: 700; color: var(--blue-700); }
.dpage__price-big .dpb-amount {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 54px);
  color: var(--blue-600);
  line-height: 1.2;
  margin-top: 4px;
}
.dpage__price-big .dpb-amount em { font-style: normal; font-size: 0.5em; }
.dpage__price-big .dpb-card {
  display: inline-block;
  margin-top: 10px;
  background: #fff;
  border: 2px solid var(--pal-yellow);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--grey-800);
}
.dpage__price-big .dpb-card b { color: var(--pal-red); }
.dpage__terms { margin-top: 14px; }
.dpage__terms .dpt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--grey-100);
  font-size: 14px;
  font-weight: 600;
}
.dpage__terms .dpt-term { min-width: 70px; font-weight: 800; color: var(--grey-900); }
.dpage__terms .dpt-care { flex: 1; color: var(--grey-500); font-weight: 500; font-size: 13px; }
.dpage__terms .dpt-price { font-weight: 800; color: var(--blue-600); }
.dpage__terms-note { padding-top: 10px; font-size: 12.5px; color: var(--grey-500); font-weight: 600; text-align: center; }
.dpage__inquiry { text-align: center; font-size: 16px; font-weight: 600; color: var(--grey-700); padding: 16px 0 8px; line-height: 1.6; }

/* ⑤ 이용 과정 */
.dpage__flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dpage__flow-steps .dfs { background: var(--grey-50); border-radius: 18px; padding: 20px 16px; }
.dpage__flow-steps .dfs-num {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--blue-500);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  margin-bottom: 10px;
}
.dpage__flow-steps b { display: block; font-size: 15.5px; }
.dpage__flow-steps p { margin-top: 5px; font-size: 13.5px; color: var(--grey-600); font-weight: 500; line-height: 1.5; }

/* ⑥ 아웃트로 */
.dpage__outro { text-align: center; border: 0; padding: 48px 28px; }
.dpage__outro-char { width: 110px; height: 110px; margin: 0 auto 6px; }
.dpage__outro-char .char-svg { width: 100%; height: 100%; }
.dpage__outro-text h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 400;
  color: var(--grey-900);
  line-height: 1.4;
}
.dpage__outro-text p { margin-top: 8px; font-size: 15px; color: var(--grey-700); font-weight: 500; }
.dpage__outro .btn { margin-top: 20px; }

@media (max-width: 720px) {
  .dpage__panel { padding: 32px 20px; border-radius: 22px; }
  .dpage__point-grid { grid-template-columns: 1fr; }
  .dpage__flow-steps { grid-template-columns: 1fr; }
}


/* 제품 설명 & 기능 카드 */
.dpage__story-text { font-size: 16px; color: var(--grey-800); font-weight: 500; line-height: 1.75; }
.dpage__spec-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.dpage__spec-tag {
  font-size: 13px; font-weight: 700; color: var(--blue-700);
  background: var(--blue-50); border-radius: 999px; padding: 5px 12px;
}
.dpage__point--rich { align-items: flex-start; }
.dpage__point--rich .dp-icon { font-size: 24px; margin-top: 2px; }
.dpage__point--rich .dp-title { font-size: 15.5px; font-weight: 800; color: var(--grey-900); }
.dpage__point--rich .dp-desc { font-size: 13.5px; font-weight: 500; color: var(--grey-600); line-height: 1.55; margin-top: 3px; }

/* ==========================================================================
   빌리지 상세페이지 v2 — 제조사 스타일 롱폼 (요정 내레이션)
   ========================================================================== */
.dpage--v2 { --dark: #10142B; --dark2: #171C38; }

/* ① 히어로 (다크) */
.dpv2-hero {
  border: 0;
  text-align: center;
  padding: 56px 28px 48px;
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--acc) 38%, transparent), transparent 60%),
    linear-gradient(175deg, var(--dark) 0%, var(--dark2) 100%);
  color: #fff;
}
.dpv2-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em;
  color: rgba(255,255,255,.78);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 7px 14px;
}
.dpv2-hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.dpv2-hero-catch {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 6vw, 44px); line-height: 1.22;
  margin-top: 22px; letter-spacing: -0.01em;
}
.dpv2-hero-sub { margin-top: 12px; font-size: 16px; font-weight: 500; color: rgba(255,255,255,.66); }
.dpv2-hero-visual { position: relative; max-width: 420px; margin: 34px auto 0; }
.dpv2-hero-visual > img {
  width: 100%; border-radius: 26px; display: block;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.dpv2-hero-char { position: absolute; left: -26px; bottom: -18px; width: 108px; height: 108px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.dpv2-hero-char .char-svg { width: 100%; height: 100%; }
.dpv2-hero-hello {
  position: absolute; right: -8px; bottom: -14px; max-width: 240px;
  font-size: 13.5px; text-align: left; transform: rotate(1.5deg);
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.4);
}
.dpv2-hero-hello::after { left: auto; right: 26px; top: auto; bottom: -8px; transform: rotate(-45deg); border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.dpv2-hero-name { margin-top: 44px; }
.dpv2-hero-name .dhn-brand { font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.6); }
.dpv2-hero-name h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 3.6vw, 27px); line-height: 1.35; margin-top: 6px;
}
.dpv2-hero-name .dhn-model { margin-top: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.45); letter-spacing: 0.04em; }

/* ② 스탯 밴드 */
.dpv2-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 8px; text-align: center; padding: 34px 22px;
}
.dpv2-stat .dst-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 5.4vw, 42px); color: var(--grey-900); line-height: 1;
}
.dpv2-stat .dst-num em { font-style: normal; font-size: 0.46em; margin-left: 2px; color: var(--acc); }
.dpv2-stat .dst-label { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--grey-500); }
.dpv2-stat + .dpv2-stat { border-left: 2px dashed var(--grey-200); }

/* 공통: 요정 리드 */
.dpv2-lead { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.dpv2-lead-char { width: 84px; height: 84px; flex: none; }
.dpv2-lead-char .char-svg { width: 100%; height: 100%; }
.dlt-kicker { font-size: 13px; font-weight: 800; color: var(--acc); letter-spacing: 0.04em; }
.dlt-kicker--light { color: rgba(255,255,255,.72); }
.dlt-title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.3; color: var(--grey-900); margin-top: 4px; }

/* ③ 제품 이야기 */
.dpv2-story-text { font-size: 16.5px; color: var(--grey-800); font-weight: 500; line-height: 1.8; }

/* ④ 기능 풀 섹션 */
.dpv2-feat { text-align: center; padding: 52px 30px 44px; border: 0; }
.dpv2-feat--light { background: #fff; border: 2px solid var(--line); border-bottom-width: 4px; }
.dpv2-feat--tint { background: var(--accbg); }
.dpv2-feat--dark { background: linear-gradient(180deg, var(--dark) 0%, var(--dark2) 100%); color: #fff; }
.dpv2-feat-num { font-size: 13px; font-weight: 800; letter-spacing: 0.22em; color: var(--acc); }
.dpv2-feat--dark .dpv2-feat-num { color: color-mix(in srgb, var(--acc) 60%, #fff); }
.dpv2-feat-icon {
  width: 108px; height: 108px; margin: 20px auto 0;
  border-radius: 36px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--acc) 14%, #fff);
  border: 2px solid color-mix(in srgb, var(--acc) 30%, #fff);
}
.dpv2-feat--tint .dpv2-feat-icon { background: #fff; border-color: rgba(0,0,0,.06); }
.dpv2-feat--dark .dpv2-feat-icon { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.dpv2-feat-icon span { font-size: 52px; line-height: 1; }
.dpv2-feat-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 4.6vw, 34px); line-height: 1.25; margin-top: 22px;
  color: var(--grey-900);
}
.dpv2-feat--dark .dpv2-feat-title { color: #fff; }
.dpv2-feat-desc {
  max-width: 480px; margin: 14px auto 0;
  font-size: 16px; font-weight: 500; line-height: 1.7; color: var(--grey-600);
}
.dpv2-feat--dark .dpv2-feat-desc { color: rgba(255,255,255,.68); }
.dpv2-feat-bubble {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  max-width: 430px; margin: 26px auto 0;
}
.dpv2-feat-bubble .dfb-char { width: 54px; height: 54px; flex: none; }
.dpv2-feat-bubble .dfb-char .char-svg { width: 100%; height: 100%; }
.dpv2-feat-bubble .speech { font-size: 13.5px; text-align: left; }

/* ⑤ 케어 (다크) */
.dpv2-care { border: 0; background: linear-gradient(180deg, var(--dark) 0%, var(--dark2) 100%); color: #fff; padding: 44px 30px; }
.dpv2-care-head { display: flex; align-items: center; gap: 16px; }
.dpv2-care-char { width: 84px; height: 84px; flex: none; }
.dpv2-care-char .char-svg { width: 100%; height: 100%; }
.dpv2-care-head h3 { font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1.3; margin-top: 4px; }
.dpv2-care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.dpv2-care-item { background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12); border-radius: 18px; padding: 20px 16px; }
.dpv2-care-item .dci-icon { font-size: 26px; display: block; }
.dpv2-care-item b { display: block; margin-top: 10px; font-size: 15px; }
.dpv2-care-item p { margin-top: 6px; font-size: 13px; font-weight: 500; line-height: 1.55; color: rgba(255,255,255,.6); }

/* ⑥ 유의사항 소형 주석 */
.dpv2-fineprint {
  margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--grey-200);
  font-size: 12px; font-weight: 500; line-height: 1.7; color: var(--grey-500);
}

/* ==========================================================================
   요정 매칭소 (finder) — 토스식 단계별 질문
   ========================================================================== */
.finder { max-width: 620px; margin: 0 auto; padding-top: 88px; padding-bottom: 80px; min-height: 78vh; }

.finder__intro { text-align: center; padding: 48px 12px 20px; }
.finder__mascot { width: 150px; height: 150px; margin: 0 auto 8px; animation: floaty 5s ease-in-out infinite; }
.finder__mascot .char-svg { width: 100%; height: 100%; }
.finder__mascot--sm { width: 104px; height: 104px; }
.finder__badge {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em;
  color: var(--blue-600); background: var(--blue-50); border-radius: 999px; padding: 7px 14px; margin-bottom: 14px;
}
.finder__intro h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 6vw, 40px); line-height: 1.25; }
.finder__intro p { margin-top: 12px; font-size: 16px; color: var(--grey-600); font-weight: 500; line-height: 1.6; }
.finder__intro .btn { margin-top: 26px; }

.finder__top { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.finder__back {
  width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--line);
  background: #fff; color: var(--grey-600); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.finder__progress { flex: 1; height: 10px; border-radius: 999px; background: var(--grey-100); overflow: hidden; }
.finder__progress-bar { height: 100%; border-radius: 999px; background: var(--blue-500); transition: width 0.3s ease; }
.finder__count { font-size: 13px; font-weight: 800; color: var(--grey-500); }

.finder__q { text-align: center; margin-bottom: 26px; }
.finder__q-icon { font-size: 44px; }
.finder__q h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 5vw, 32px); margin-top: 8px; }

.finder__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.finder__opts--cat { grid-template-columns: 1fr 1fr 1fr; }
.finder__opt {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: #fff; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 18px;
  padding: 20px 12px 16px; cursor: pointer; font: inherit;
}
.finder__opt:hover { border-color: var(--blue-100); background: var(--blue-50); }
.finder__opt.active { border-color: var(--blue-500); background: var(--blue-50); }
.finder__opt .fo-emoji { font-size: 38px; line-height: 1; }
.finder__opt .fo-char { width: 72px; height: 72px; }
.finder__opt .fo-char .char-svg { width: 100%; height: 100%; }
.finder__opt .fo-text b { display: block; font-size: 15.5px; color: var(--grey-900); }
.finder__opt .fo-text small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--grey-500); line-height: 1.4; }

.finder__result-head { text-align: center; padding: 16px 0 6px; }
.finder__result-head h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 5vw, 32px); margin-top: 4px; }
.finder__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.finder__speech { display: inline-block; margin-top: 16px; font-size: 13.5px; }
.finder__grid { margin-top: 26px; }
.finder__result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

@media (max-width: 640px) {
  .finder__opts, .finder__opts--cat { grid-template-columns: 1fr 1fr; }
}

/* ---------- 홈 매칭소 배너 ---------- */
.finder-band {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(120deg, var(--blue-50), #F3EEFF);
  border: 2px solid var(--blue-100); border-bottom-width: 5px; border-radius: 26px;
  padding: 24px 28px; text-decoration: none; color: inherit;
}
.finder-band__char { width: 92px; height: 92px; flex: none; }
.finder-band__char .char-svg { width: 100%; height: 100%; }
.finder-band__text { flex: 1; }
.finder-band .fb-kicker { font-size: 12.5px; font-weight: 800; color: var(--blue-600); letter-spacing: 0.04em; }
.finder-band h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 3.6vw, 26px); margin-top: 4px; }
.finder-band p { margin-top: 5px; font-size: 14.5px; font-weight: 500; color: var(--grey-600); }
.finder-band .btn { flex: none; }
@media (max-width: 640px) {
  .finder-band { flex-direction: column; text-align: center; padding: 26px 20px; }
}

/* ---------- 제조사 자료 AI 번역 패널 ---------- */
.dtr-panel {
  background: #fff; border: 2px solid var(--blue-100); border-bottom-width: 4px;
  border-radius: 18px; padding: 20px 22px; margin-bottom: 14px;
}
.dtr-head { font-size: 14px; font-weight: 800; color: var(--blue-600); }
.dtr-text { margin-top: 10px; font-size: 14.5px; font-weight: 500; color: var(--grey-800); line-height: 1.75; white-space: pre-line; }
.dtr-note { margin-top: 12px; padding-top: 10px; border-top: 1.5px dashed var(--grey-200); font-size: 12px; font-weight: 500; color: var(--grey-500); }

/* ==========================================================================
   법적 문서 · 중개자 고지 · 동의 체크박스
   ========================================================================== */
.legal { max-width: 760px; margin: 0 auto; padding-top: 84px; padding-bottom: 70px; }
.legal-doc h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 5vw, 34px); }
.legal-updated { font-size: 13px; font-weight: 700; color: var(--grey-500); margin-top: 6px; }
.legal-lead { margin-top: 18px; font-size: 15px; color: var(--grey-700); font-weight: 500; line-height: 1.7; }
.legal-doc h3 { font-size: 16px; font-weight: 800; color: var(--grey-900); margin-top: 26px; }
.legal-doc p { margin-top: 8px; font-size: 14.5px; color: var(--grey-700); font-weight: 500; line-height: 1.8; }
.legal-doc p b { color: var(--grey-900); }
.legal-biz {
  margin-top: 32px; padding: 18px 20px; background: var(--grey-50); border-radius: 16px;
  font-size: 13px; color: var(--grey-600); font-weight: 500; line-height: 1.8;
}
.legal-biz b { color: var(--grey-800); }

/* 통신판매중개자 고지 박스 */
.broker-notice {
  background: var(--blue-50); border: 1.5px solid var(--blue-100); border-radius: 16px;
  padding: 16px 18px; margin-bottom: 8px;
}
.broker-notice > b:first-child { display: block; font-size: 13.5px; color: var(--blue-700); margin-bottom: 5px; }
.broker-notice { font-size: 13.5px; color: var(--grey-700); font-weight: 500; line-height: 1.65; }
.broker-notice b { font-weight: 800; }

/* 동의 체크박스 */
.consent {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; cursor: pointer;
  padding: 12px 14px; background: var(--grey-50); border-radius: 12px;
}
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent__box {
  flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--grey-300);
  background: #fff; margin-top: 1px; position: relative; transition: all 0.12s ease;
}
.consent input:checked + .consent__box { background: var(--blue-500); border-color: var(--blue-500); }
.consent input:checked + .consent__box::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(42deg);
}
.consent input:focus-visible + .consent__box { box-shadow: 0 0 0 3px var(--blue-100); }
.consent__text { font-size: 13px; color: var(--grey-700); font-weight: 600; line-height: 1.5; }
.consent__text b { color: var(--red-500); }
.consent__text a { color: var(--blue-600); font-weight: 700; margin-left: 4px; }
.consent--shake { animation: cShake 0.4s; border: 1.5px solid var(--red-500); }
@keyframes cShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* 푸터 중개자 고지 + 강조 링크 */
.footer__broker {
  max-width: 640px; margin: 4px auto 0; font-size: 12px; color: var(--grey-500);
  font-weight: 500; line-height: 1.6; padding: 10px 14px; background: var(--grey-50); border-radius: 10px;
}
.footer__broker b { color: var(--grey-700); font-weight: 800; }
.footer__strong { font-weight: 800 !important; color: var(--grey-800) !important; }

/* ---------- 언어 선택 ---------- */
.lang-picker {
  appearance: none;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%238B95A1" stroke-width="3" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat right 10px center;
  padding: 7px 30px 7px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-700);
  cursor: pointer;
  margin-left: auto;
  margin-right: 10px;
  max-width: 130px;
}
.header__nav + .lang-picker { margin-left: 12px; }
@media (max-width: 720px) {
  .lang-picker { max-width: 96px; font-size: 12px; padding: 6px 24px 6px 8px; }
}

/* ---------- 상세 상단 요정 브리핑 ---------- */
.detail__char-brief { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.detail__char-brief .dcb-svg { width: 58px; height: 58px; flex: none; }
.detail__char-brief .dcb-svg .char-svg { width: 100%; height: 100%; }
.detail__char-brief .speech { font-size: 13.5px; }

@media (max-width: 640px) {
  .dpv2-hero { padding: 44px 20px 40px; }
  .dpv2-hero-visual { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .dpv2-hero-visual > img { width: 100%; }
  .dpv2-hero-char { position: static; width: 72px; height: 72px; flex: none; margin-top: 16px; filter: none; }
  .dpv2-hero-hello { position: static; flex: 1; max-width: none; margin: 16px 0 0; transform: none; }
  .dpv2-hero-hello::after { display: none; }
  .dpv2-stats { grid-template-columns: repeat(2, 1fr); }
  .dpv2-stat:nth-child(odd) { border-left: 0; }
  .dpv2-feat { padding: 40px 20px 36px; }
  .dpv2-care-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   ★ 맥시멀 레이어 — 살아 움직이는 하늘 + 화려한 모션 (Villige Maximal)
   전 페이지 적용. renderChrome가 .sky-atmo 를 body 최상단에 주입한다.
   ========================================================================== */

/* --- 기본 하늘 그라디언트: 모든 페이지 배경이 은은히 흐른다 --- */
body {
  background:
    radial-gradient(1200px 600px at 12% -8%, #DDF4FF 0%, rgba(221,244,255,0) 60%),
    radial-gradient(1000px 640px at 92% 4%, #F1E7FF 0%, rgba(241,231,255,0) 55%),
    radial-gradient(900px 700px at 50% 118%, #E7FBF0 0%, rgba(231,251,240,0) 60%),
    linear-gradient(180deg, #F7FCFF 0%, #FBFAFF 42%, #F9FDFB 100%);
  background-attachment: fixed;
}

/* --- 콘텐츠는 하늘 위에 --- */
.header { z-index: 200; }
main, .footer, .legal-doc, .finder, .detail__grid, .charp-hero { position: relative; z-index: 1; }

/* --- 고정 대기 레이어 --- */
.sky-atmo {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  contain: strict;
}
/* 오로라: 거대한 컬러 글로우가 천천히 유영 */
.atmo-aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(38% 30% at 20% 30%, rgba(28,176,246,0.20), transparent 70%),
    radial-gradient(34% 28% at 80% 22%, rgba(206,130,255,0.18), transparent 70%),
    radial-gradient(40% 32% at 62% 82%, rgba(88,204,2,0.14), transparent 72%),
    radial-gradient(30% 26% at 30% 78%, rgba(255,134,208,0.16), transparent 72%);
  filter: blur(30px);
  animation: atmoAurora 26s ease-in-out infinite alternate;
  will-change: transform;
}
/* 구름: 여러 겹이 서로 다른 속도로 흐른다 (패럴랙스) */
.atmo-cloud {
  position: absolute;
  background: radial-gradient(closest-side, rgba(255,255,255,0.95), rgba(255,255,255,0.55) 62%, rgba(255,255,255,0) 78%);
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0.7;
  will-change: transform;
}
.atmo-cloud--1 { width: 320px; height: 120px; top: 9%;  left: -22%; animation: skyDriftA 46s linear infinite; }
.atmo-cloud--2 { width: 220px; height: 90px;  top: 26%; left: -20%; opacity: 0.5; animation: skyDriftB 62s linear infinite; }
.atmo-cloud--3 { width: 400px; height: 150px; top: 58%; left: -30%; opacity: 0.45; animation: skyDriftA 78s linear infinite; }
.atmo-cloud--4 { width: 180px; height: 74px;  top: 74%; left: -16%; opacity: 0.55; animation: skyDriftB 54s linear infinite; }
/* 별: 총총 반짝임 */
.atmo-star {
  position: absolute; width: var(--sz, 4px); height: var(--sz, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.6) 40%, transparent 70%);
  box-shadow: 0 0 6px rgba(255,255,255,0.9);
  opacity: 0; transform: scale(0.6);
  animation: atmoTwinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
/* 반짝이 (✦): 위로 떠오르며 사라진다 */
.atmo-sparkle {
  position: absolute; font-style: normal;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 0 8px rgba(120,200,255,0.9), 0 0 16px rgba(206,130,255,0.6);
  font-size: var(--sz, 14px);
  opacity: 0;
  animation: sparkleRise var(--dur, 9s) linear infinite;
  animation-delay: var(--dl, 0s);
}

@keyframes atmoAurora {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.05); }
  50%  { transform: translate3d(4%, 3%, 0) rotate(6deg) scale(1.15); }
  100% { transform: translate3d(-2%, 4%, 0) rotate(-4deg) scale(1.08); }
}
@keyframes skyDriftA { from { transform: translateX(0); } to { transform: translateX(160vw); } }
@keyframes skyDriftB { from { transform: translateX(0); } to { transform: translateX(150vw); } }
@keyframes atmoTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 0.95; transform: scale(1.1); }
}
@keyframes sparkleRise {
  0%   { opacity: 0; transform: translateY(20px) scale(0.5) rotate(0deg); }
  15%  { opacity: 1; }
  70%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-120px) scale(1.1) rotate(180deg); }
}

/* --- 프로스티드 섹션: 하늘이 유리 너머로 비친다 --- */
.section { position: relative; z-index: 1; background: transparent; }
.section--grey {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border-top: 1px solid rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.7);
}

/* ============================ HERO 맥시멀 ============================ */
.hero { padding-top: 84px; }
/* 대형 그라디언트 헤드라인 (흐르는 컬러) */
.hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.hero h1 .accent {
  background: linear-gradient(100deg, #1CB0F6, #6AA8FF, #CE82FF, #FF86D0, #1CB0F6);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding: 0;
  animation: gradFlow 7s ease infinite;
  text-shadow: none;
}
@keyframes gradFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* 배지: 살랑살랑 */
.hero__badge {
  animation: badgeBob 3.4s ease-in-out infinite;
  box-shadow: 0 6px 18px rgba(255,200,0,0.28);
}
@keyframes badgeBob {
  0%,100% { transform: rotate(-1.5deg) translateY(0); }
  50%     { transform: rotate(1.5deg) translateY(-4px); }
}
/* 마스코트 뒤 후광 */
.hero-mascot { position: relative; }
.hero-mascot::before {
  content: ""; position: absolute; inset: -12% -8% -8% -8%;
  background: radial-gradient(circle at 50% 45%, rgba(28,176,246,0.28), rgba(206,130,255,0.16) 45%, transparent 70%);
  filter: blur(14px); z-index: -1;
  animation: heroPulse 5s ease-in-out infinite;
}
@keyframes heroPulse {
  0%,100% { transform: scale(1); opacity: 0.85; }
  50%     { transform: scale(1.08); opacity: 1; }
}
.float-card { box-shadow: 0 10px 34px rgba(2,32,71,0.16), 0 2px 0 rgba(255,255,255,0.7) inset; }
.float-card::after {
  content: "✦"; position: absolute; top: -10px; right: -6px;
  color: var(--pal-yellow); font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(255,200,0,0.8));
  animation: atmoTwinkle 2.8s ease-in-out infinite;
}

/* ============================ 제목 장식 ============================ */
.section__head { position: relative; }
.section__head h2 {
  background: linear-gradient(96deg, var(--grey-900) 0%, var(--blue-600) 55%, var(--pal-purple) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section__head h2::after {
  content: "✦";
  -webkit-text-fill-color: initial; color: var(--pal-yellow);
  font-size: 0.6em; vertical-align: super; margin-left: 8px;
  display: inline-block;
  animation: badgeBob 3s ease-in-out infinite;
}

/* ============================ 버튼: 광택 + 글로우 ============================ */
.btn { overflow: hidden; }
.btn--primary {
  background: linear-gradient(180deg, #38BDFF, #1CB0F6 60%, #159BDD);
  box-shadow: 0 4px 0 var(--blue-600), 0 10px 22px rgba(28,176,246,0.34);
}
.btn--primary:hover { filter: brightness(1.06) saturate(1.1); }
.btn--lg::before, .btn--md::before {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
}
.btn--lg:hover::before, .btn--md:hover::before { left: 130%; }

/* ============================ 카드 hover 모션 ============================ */
.cat-card, .prod-card, .char-card, .finder-band, .float-card, .pop-card, .review-card {
  transition: transform 0.22s cubic-bezier(.2,.8,.3,1.4), box-shadow 0.22s ease, border-color 0.2s ease;
}
.cat-card { position: relative; overflow: hidden; }
.cat-card:hover {
  transform: translateY(-6px) rotate(-1deg) scale(1.02);
  box-shadow: 0 16px 34px rgba(2,32,71,0.16);
}
.cat-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform 0.6s ease;
  pointer-events: none;
}
.cat-card:hover::after { transform: translateX(120%); }
.prod-card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 14px 30px rgba(2,32,71,0.14);
  border-color: var(--blue-100);
}
.finder-band { position: relative; overflow: hidden; }
.finder-band:hover { transform: translateY(-4px) scale(1.008); box-shadow: 0 18px 40px rgba(28,176,246,0.28); }

/* ============================ 진입 애니메이션 강화 ============================ */
.reveal { animation-duration: 0.7s; }
@keyframes popUp {
  0% { opacity: 0; transform: translateY(28px) scale(0.96); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.section__head.reveal, .cat-grid.reveal { animation: popUp 0.75s cubic-bezier(.2,.7,.3,1.3) both; }

/* ============================ 스크롤바 (디테일) ============================ */
@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(var(--blue-400,#5BC4F8), var(--pal-purple)); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* ============================ 모션 최소화 존중 ============================ */
@media (prefers-reduced-motion: reduce) {
  .atmo-aurora, .atmo-cloud, .atmo-star, .atmo-sparkle,
  .hero h1 .accent, .hero__badge, .hero-mascot::before, .float-card::after,
  .section__head h2::after, .reveal, .section__head.reveal, .cat-grid.reveal {
    animation: none !important;
  }
  .atmo-star { opacity: 0.5; }
  .btn--lg:hover::before, .btn--md:hover::before, .cat-card:hover::after { transition: none; }
}

/* ============================================================================
   ★★ 맥시멀 AMP — 더 진하고, 더 화려하고, 애니메이션 팍팍 (override 레이어)
   ========================================================================== */

/* 더 선명한 하늘 배경 */
body {
  background:
    radial-gradient(1200px 640px at 10% -10%, #C4ECFF 0%, rgba(196,236,255,0) 58%),
    radial-gradient(1100px 700px at 94% -2%, #E9D9FF 0%, rgba(233,217,255,0) 54%),
    radial-gradient(1000px 760px at 50% 116%, #D7F7E6 0%, rgba(215,247,230,0) 58%),
    radial-gradient(900px 620px at 78% 60%, #FFE6F4 0%, rgba(255,230,244,0) 55%),
    linear-gradient(180deg, #EAF7FF 0%, #F3EEFF 46%, #EEFBF4 100%);
  background-attachment: fixed;
}

/* 구름: 더 크고 또렷하게 */
.atmo-cloud { opacity: 0.9; filter: blur(2px); }
.atmo-cloud--1 { width: 380px; height: 140px; }
.atmo-cloud--3 { width: 460px; height: 176px; opacity: 0.6; }

/* 별: 알록달록 반짝임 */
.atmo-star:nth-child(4n+1) { background: radial-gradient(circle, #fff, rgba(120,200,255,0.7) 45%, transparent 72%); box-shadow: 0 0 8px rgba(120,200,255,0.9); }
.atmo-star:nth-child(4n+2) { background: radial-gradient(circle, #fff, rgba(206,130,255,0.7) 45%, transparent 72%); box-shadow: 0 0 8px rgba(206,130,255,0.9); }
.atmo-star:nth-child(4n+3) { background: radial-gradient(circle, #fff, rgba(255,200,0,0.75) 45%, transparent 72%); box-shadow: 0 0 8px rgba(255,200,0,0.9); }
.atmo-star:nth-child(4n)   { background: radial-gradient(circle, #fff, rgba(255,134,208,0.7) 45%, transparent 72%); box-shadow: 0 0 8px rgba(255,134,208,0.9); }

/* 떠다니는 컬러 오브 */
.atmo-orb {
  position: absolute; border-radius: 50%; filter: blur(38px);
  mix-blend-mode: multiply; opacity: 0.5; will-change: transform;
}
.atmo-orb--1 { width: 300px; height: 300px; top: 4%;  left: 66%; background: radial-gradient(circle, #7CC9FF, transparent 70%); animation: orbFloatA 30s ease-in-out infinite; }
.atmo-orb--2 { width: 260px; height: 260px; top: 48%; left: 4%;  background: radial-gradient(circle, #D6A8FF, transparent 70%); animation: orbFloatB 38s ease-in-out infinite; }
.atmo-orb--3 { width: 220px; height: 220px; top: 78%; left: 74%; background: radial-gradient(circle, #8CE6B4, transparent 70%); animation: orbFloatA 34s ease-in-out infinite reverse; }
@keyframes orbFloatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,30px) scale(1.15); } }
@keyframes orbFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-26px) scale(1.12); } }

/* ============================ HERO 쇼피스 백드롭 ============================ */
.hero { position: relative; }
.hero__inner { position: relative; z-index: 2; }
.hero__backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__backdrop::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 78% 30%, rgba(28,176,246,0.28), transparent 60%),
    radial-gradient(50% 60% at 30% 20%, rgba(255,255,255,0.5), transparent 60%),
    linear-gradient(165deg, rgba(180,232,255,0.55), rgba(233,217,255,0.4) 55%, rgba(215,247,230,0.3));
}
.hero-rays {
  position: absolute; top: 8%; left: 66%; width: 620px; height: 620px;
  transform: translate(-50%,-30%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.35) 0deg 6deg, transparent 6deg 18deg);
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  opacity: 0.55;
  animation: raySpin 60s linear infinite;
}
@keyframes raySpin { to { transform: translate(-50%,-30%) rotate(360deg); } }
.hero-arc {
  position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 900px; border-radius: 50%;
  background: conic-gradient(from 200deg at 50% 50%, transparent 0deg, #FF86D0 20deg, #FFC800 40deg, #58CC02 60deg, #1CB0F6 80deg, #CE82FF 100deg, transparent 120deg);
  -webkit-mask: radial-gradient(circle, transparent 0 47%, #000 47% 50%, transparent 50%);
  mask: radial-gradient(circle, transparent 0 47%, #000 47% 50%, transparent 50%);
  opacity: 0.28;
  animation: archShimmer 12s ease-in-out infinite;
}
@keyframes archShimmer { 0%,100% { opacity: 0.2; } 50% { opacity: 0.38; } }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.hero-orb--1 { width: 22px; height: 22px; top: 22%; left: 20%; background: radial-gradient(circle at 35% 30%, #fff, #7CC9FF); box-shadow: 0 0 18px rgba(124,201,255,0.8); animation: floaty 6s ease-in-out infinite; }
.hero-orb--2 { width: 14px; height: 14px; top: 62%; left: 40%; background: radial-gradient(circle at 35% 30%, #fff, #FF86D0); box-shadow: 0 0 16px rgba(255,134,208,0.8); animation: floaty 5s ease-in-out infinite 1s; }
.hero-orb--3 { width: 18px; height: 18px; top: 14%; left: 52%; background: radial-gradient(circle at 35% 30%, #fff, #FFC800); box-shadow: 0 0 18px rgba(255,200,0,0.8); animation: floaty 7s ease-in-out infinite 0.5s; }
.hero-bubbles {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(6px 6px at 20% 90%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(9px 9px at 45% 95%, rgba(180,232,255,0.8), transparent 60%),
    radial-gradient(5px 5px at 70% 92%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(7px 7px at 85% 96%, rgba(206,130,255,0.7), transparent 60%),
    radial-gradient(4px 4px at 33% 88%, rgba(255,255,255,0.8), transparent 60%);
  animation: bubbleRise 9s linear infinite;
}
@keyframes bubbleRise { from { transform: translateY(0); opacity: 0.9; } to { transform: translateY(-160px); opacity: 0; } }

.hero-mascot__svg { position: relative; }
.hero-mascot__svg::before, .hero-mascot__svg::after {
  content: "✦"; position: absolute; color: var(--pal-yellow);
  filter: drop-shadow(0 0 6px rgba(255,200,0,0.9)); font-size: 18px;
  top: 50%; left: 50%; width: 0; height: 0;
}
.hero-mascot__svg::before { animation: orbit 9s linear infinite; }
.hero-mascot__svg::after { color: var(--pal-pink); font-size: 14px; animation: orbit 7s linear infinite reverse; }
@keyframes orbit {
  from { transform: rotate(0deg) translateX(130px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(130px) rotate(-360deg); }
}

.section--grey { position: relative; }
.section--grey::before {
  content: ""; position: absolute; top: -22px; left: 0; right: 0; height: 24px;
  background: radial-gradient(closest-side, rgba(255,255,255,0.9) 96%, transparent) 0 0/56px 44px repeat-x;
  opacity: 0.8;
}

.chip, .tag-chip, .hero__badge { transition: transform 0.2s ease; }
.pop-card:hover, .review-card:hover { transform: translateY(-6px) rotate(0.6deg) scale(1.02); box-shadow: 0 18px 38px rgba(2,32,71,0.16); }

@media (prefers-reduced-motion: reduce) {
  .atmo-orb, .hero-rays, .hero-arc, .hero-bubbles, .hero-orb,
  .hero-mascot__svg::before, .hero-mascot__svg::after { animation: none !important; }
}

/* ============================================================================
   ★ 캐릭터 애니메이션 — 눈 깜박임 + 둥실 부유 + 상호작용
   ========================================================================== */

/* 눈 깜박임: 대부분 떠 있다가 순간적으로 감았다 뜬다 (이중 깜박) */
.char-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: charBlink 5.2s infinite;
}
@keyframes charBlink {
  0%, 41%, 48%, 100% { transform: scaleY(1); }
  44%, 46%           { transform: scaleY(0.08); }
  /* 이따금 이중 깜박 */
  90%, 96%           { transform: scaleY(1); }
  93%                { transform: scaleY(0.08); }
}
/* 캐릭터마다 깜박임 타이밍 분산 (동시에 깜박이지 않게) */
.char-card:nth-child(2n) .char-eyes { animation-delay: 1.1s; animation-duration: 4.6s; }
.char-card:nth-child(3n) .char-eyes { animation-delay: 2.3s; animation-duration: 5.8s; }
.char-card:nth-child(4n) .char-eyes { animation-delay: 3.4s; }
.list-char__svg .char-eyes { animation-delay: 0.7s; }
.dcb-svg .char-eyes, .bh-char .char-eyes { animation-delay: 1.9s; }

/* 몸통 둥실 부유 (요정은 떠다닌다) */
.char-svg {
  transform-origin: 50% 70%;
  animation: charBob 4.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes charBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-2deg); }
}
/* 위치별 부유 리듬 분산 */
.char-card:nth-child(2n) .char-svg { animation-duration: 5.2s; animation-delay: .3s; }
.char-card:nth-child(3n) .char-svg { animation-duration: 3.8s; animation-delay: .6s; }
.hero-mascot__svg .char-svg { animation-duration: 5s; }

/* 히어로 마스코트는 더 크게 둥실 + 살짝 기울임 반응 */
.hero-mascot__svg .char-svg { animation: charFloatBig 5.5s ease-in-out infinite; }
@keyframes charFloatBig {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}

/* 카드 호버: 요정이 반갑게 폴짝 + 갸웃 */
.char-card:hover .char-svg,
.cat-card:hover .char-svg { animation: charHop 0.6s ease; }
@keyframes charHop {
  0%   { transform: translateY(0) rotate(0); }
  30%  { transform: translateY(-14px) rotate(-8deg) scale(1.06); }
  60%  { transform: translateY(0) rotate(6deg) scale(1.02); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}
/* 호버 시 눈 크게 (반짝) */
.char-card:hover .char-eyes { animation: charBlinkExcited 0.8s ease; }
@keyframes charBlinkExcited {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .char-eyes, .char-svg, .hero-mascot__svg .char-svg,
  .char-card:hover .char-svg, .cat-card:hover .char-svg, .char-card:hover .char-eyes {
    animation: none !important;
  }
}

/* ============================================================================
   ★ 모바일 최적화 — 헤더 맞춤 + 가로스크롤 차단 + 성능(무거운 GPU 효과 완화)
   ========================================================================== */

/* 가로 스크롤 원천 차단 (스티키 헤더 안 깨지게 clip 사용) */
/* 가로 스크롤 차단은 루트(html)에만 — body에 걸면 중첩 스크롤 컨테이너가 되어
   window 스크롤/스크롤인투뷰가 어긋난다. */
html { overflow-x: clip; }
body { max-width: 100%; }

@media (max-width: 720px) {
  /* --- 헤더가 한 줄에 딱 맞게 --- */
  .header__inner { gap: 8px; padding: 0 12px; }
  .header__logo { font-size: 18px; gap: 6px; }
  .header__logo-mark { width: 26px; height: 26px; }
  .lang-picker { margin-right: 6px; max-width: 90px; }
  .header__cta { padding: 8px 12px 7px; font-size: 14px; }

  /* --- 성능: 무거운 합성 효과 완화 --- */
  body { background-attachment: scroll; }           /* iOS fixed 배경 버벅임 방지 */
  .atmo-orb { display: none; }                        /* mix-blend + blur(38px) 제거 */
  .atmo-aurora { filter: blur(16px); opacity: 0.7; }  /* blur 완화 */
  .atmo-cloud--2, .atmo-cloud--4 { display: none; }   /* 구름 4→2 */
  .atmo-sparkles .atmo-sparkle:nth-child(n+5) { display: none; } /* 반짝이 8→4 */
  .section--grey {                                    /* backdrop-filter 제거 */
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(255, 255, 255, 0.86);
  }

  /* --- 히어로 장식 모바일 정돈 --- */
  .hero-arc { width: 560px; top: -150px; opacity: 0.2; }
  .hero-rays { width: 340px; opacity: 0.4; }
  .hero-mascot__svg::before, .hero-mascot__svg::after { display: none; } /* 궤도 반짝이 off */
  .hero-bubbles { opacity: 0.6; }
  /* 히어로 플로팅 카드가 화면 밖으로 안 나가게 */
  .float-card { position: relative; display: inline-block; margin: 6px; animation-duration: 6s; }
  .hero-mascot { display: flex; flex-direction: column; align-items: center; }

  /* 터치 타깃 여유 */
  .header__cta, .lang-picker { min-height: 40px; }
}

@media (max-width: 380px) {
  .header__logo { font-size: 16px; }
  .header__logo-mark { width: 24px; height: 24px; }
  .lang-picker { max-width: 78px; font-size: 11px; padding: 6px 20px 6px 7px; background-position: right 7px center; }
  .header__cta { padding: 7px 10px 6px; font-size: 13px; }
  .hero h1 { font-size: clamp(30px, 9vw, 40px); }
}

/* 저사양/모션 최소화: 대기 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
  .atmo-cloud, .atmo-star, .atmo-sparkle, .atmo-aurora { animation: none !important; }
}

/* ============================================================================
   ★ 매칭소 v2 결과 — 매칭%, 카드별 추천 근거
   ========================================================================== */
.finder__pick { position: relative; display: flex; flex-direction: column; }
.finder__match {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: linear-gradient(180deg, #38BDFF, #1899D6);
  color: #fff; font-family: var(--font-display); font-size: 13px;
  padding: 4px 10px 3px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(28,176,246,0.4);
}
.finder__why { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding: 0 2px; }
.fw-chip {
  font-size: 12px; font-weight: 700; color: var(--blue-700);
  background: var(--blue-50); border: 1px solid var(--blue-100);
  padding: 3px 9px; border-radius: 999px; line-height: 1.4;
}
.finder__grid.prod-grid { align-items: start; }
.finder__badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(90deg, rgba(28,176,246,0.12), rgba(206,130,255,0.12));
  color: var(--blue-700); font-family: var(--font-display); font-size: 13px;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 8px;
  border: 1px solid var(--blue-100);
}
@media (prefers-reduced-motion: no-preference) {
  .fw-chip { animation: popUp 0.4s ease both; }
}

/* ============================================================================
   ★ 제품 썸네일 개선 — 흰 제품이 흰 배경에 묻히는 문제 해결 (스튜디오 샷 느낌)
   이미지가 흰 배경(불투명)이라 multiply로 배경을 타일에 녹이되,
   타일을 은은한 그라디언트+안쪽 그림자로 만들어 제품에 입체감·대비를 준다.
   ========================================================================== */
.prod-card__thumb {
  background: radial-gradient(125% 100% at 50% 22%, #FFFFFF 0%, #F2F5F9 66%, #E8EDF3 100%);
  box-shadow: inset 0 -14px 28px -14px rgba(30,50,90,0.14), inset 0 1px 0 rgba(255,255,255,0.7);
}
.prod-card__thumb--photo img {
  padding: 10px;
  mix-blend-mode: multiply;
  transition: transform 0.28s cubic-bezier(.2,.7,.3,1.2);
}
.prod-card:hover .prod-card__thumb--photo img { transform: scale(1.06); }
.prod-card:hover .prod-card__thumb {
  background: radial-gradient(125% 100% at 50% 22%, #FFFFFF 0%, #EAF4FE 70%, #D8ECFC 100%);
}
/* 썸네일과 본문 사이 얇은 구분선으로 카드 정돈 */
.prod-card__body { border-top: 1px solid rgba(20,40,80,0.05); }

/* 상세페이지 대표 이미지도 동일한 스튜디오 배경 */
.detail__visual--photo, .detail__visual {
  background: radial-gradient(130% 100% at 50% 18%, #FFFFFF 0%, #F1F5FA 62%, #E6ECF3 100%) !important;
  box-shadow: inset 0 -18px 40px -20px rgba(30,50,90,0.16);
}
.detail__visual--photo img, .detail__visual img {
  mix-blend-mode: multiply;
  padding: 22px;
}

/* 매칭소/결과 카드 등 어디서든 동일 적용 */
.finder__pick .prod-card__thumb { background: radial-gradient(125% 100% at 50% 22%, #FFFFFF 0%, #F2F5F9 66%, #E8EDF3 100%); }

@media (prefers-reduced-motion: reduce) {
  .prod-card__thumb--photo img, .prod-card:hover .prod-card__thumb--photo img { transition: none; transform: none; }
}

/* ============================================================================
   ★ 버그 수정 & UI/UX 다듬기 (모바일 리포트 반영)
   ========================================================================== */

/* 1) 상세 대표 이미지 잘림 수정
   - 모바일에서 16/10 가로 컨테이너가 세로 제품을 잘랐음 → 정사각으로
   - 이미지는 항상 컨테이너 안에 완전히 담기도록 명시 */
.detail__visual--photo img, .detail__visual img {
  width: 100%; height: 100%; object-fit: contain;
}
@media (max-width: 960px) {
  .detail__visual { aspect-ratio: 1 / 1; }
}
@media (max-width: 640px) {
  .detail__visual--photo img, .detail__visual img { padding: 16px; }
}

/* 2) 모바일 플립카드에서 캐릭터가 뒷면에 겹쳐 보이던 버그
   원인: iOS Safari는 -webkit-backface-visibility 필요 +
   char-svg의 will-change/애니메이션이 3D 컬링을 벗어나 별도 레이어로 떠오름
   해결: 웹킷 프리픽스 + 플립카드 안에서는 상시 애니메이션 끔 */
.char-card__flip { -webkit-transform-style: preserve-3d; }
.char-card__face { -webkit-backface-visibility: hidden; }
.char-card__front, .char-card__back { transform: translateZ(0); }
.char-card__back { -webkit-transform: rotateY(180deg) translateZ(0); transform: rotateY(180deg) translateZ(0); }
.char-card .char-svg { animation: none !important; will-change: auto; }
.char-card .char-eyes { animation: none !important; }

/* 3) 여백·크기 다듬기 — 뒷면 정보가 넉넉히 들어가게 */
.char-card { height: 240px; }
.char-card__back { padding: 20px 15px 16px; }
.char-card__back .cb-story {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.char-card__svg { width: 76px; height: 76px; }
.char-grid { gap: 16px; }

/* 모바일 상세: 이미지가 화면을 다 먹지 않게 살짝 여백 + 본문과 간격 */
@media (max-width: 640px) {
  .detail__grid { gap: 22px; }
  .detail__visual { max-width: 380px; margin: 0 auto; width: 100%; }
  .detail__name { font-size: clamp(22px, 6vw, 28px); line-height: 1.32; }
  .section { padding: 40px 0; }
}

/* ============================================================================
   ★ 썸네일 요정 워터마크 — 이미지에 굽지 않고 CSS 오버레이로 (일관·조절 가능)
   각 상품 카테고리 담당 요정을 코너에 얹음. 성능 위해 정적(애니메이션 off).
   ========================================================================== */
.prod-card__thumb { position: relative; }
.thumb-fairy {
  position: absolute; bottom: 7px; right: 7px;
  width: 33px; height: 33px; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(20,40,80,0.28));
}
.thumb-fairy::before {
  content: ""; position: absolute; inset: -3px;
  background: radial-gradient(circle, rgba(255,255,255,0.82) 45%, rgba(255,255,255,0) 72%);
  border-radius: 50%; z-index: -1;
}
.thumb-fairy .char-svg { width: 100%; height: 100%; }
.thumb-fairy .char-svg, .thumb-fairy .char-eyes { animation: none !important; will-change: auto; }
/* 상세 대표이미지엔 조금 크게 */
.thumb-fairy--lg { width: 52px; height: 52px; bottom: 14px; right: 14px; }
/* 모바일 카드에선 살짝 작게 */
@media (max-width: 640px) {
  .thumb-fairy { width: 28px; height: 28px; bottom: 5px; right: 5px; }
  .thumb-fairy--lg { width: 44px; height: 44px; }
}

/* ============================================================================
   ★ 모바일 버그 수정 2차 (스크린샷 제보)
   ========================================================================== */

/* 1) 상품목록 필터바: 모바일에서 카테고리탭이 검색/정렬에 밀려 잘리던 문제
   → 카테고리탭을 전체폭 한 줄(가로 스크롤)로, 검색+정렬은 아래 줄 */
@media (max-width: 720px) {
  .filter-bar__inner { flex-wrap: wrap; row-gap: 10px; column-gap: 10px; }
  .filter-chips { flex: 1 1 100%; order: -1; }
  .search-box { flex: 1 1 0; min-width: 0; }
  .search-box input, .search-box input:focus { width: 100%; box-sizing: border-box; }
  .sort-select { flex: 0 0 auto; }
}

/* 2) 상세페이지 하단 고정 CTA가 푸터 내용을 가리던 문제 → 푸터 하단 여백 확보 */
@media (max-width: 720px) {
  body.has-bottom-cta .footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ============================================================================
   ★ 밸런스 다듬기 1차 (태블릿·중간폭 + 히어로 대비)
   ========================================================================== */

/* 상세 대표이미지: 641~960px에서 화면 전체를 차지하던 과대 크기 제한 */
@media (max-width: 960px) {
  .detail__visual { max-width: 440px; margin: 0 auto; width: 100%; }
}

/* 히어로 그라디언트 헤드라인: 밝은 배경에서 씻겨 보이던 대비 보강 */
.hero h1 .accent {
  background: linear-gradient(100deg, #0E96E0, #3D7BFF, #9B4DE3, #E0489E, #0E96E0);
  background-size: 280% 100%;
}

/* ============================================================================
   ★ 렌탈 접수양식 페이지 (apply.html)
   ========================================================================== */
.apply { max-width: 720px; margin: 0 auto; padding-top: 84px; padding-bottom: 80px; position: relative; z-index: 1; }
.apply-head { display: flex; gap: 16px; align-items: center; margin: 18px 0 22px; }
.apply-head__char { width: 76px; height: 76px; flex: none; }
.apply-head h1 { font-family: var(--font-display); font-size: clamp(24px, 4vw, 32px); font-weight: 400; }
.apply-head p { color: var(--text-sub); font-size: 14.5px; margin-top: 6px; line-height: 1.6; }

.apply-form {
  background: rgba(255,255,255,0.88);
  border: 2px solid var(--line); border-bottom-width: 4px;
  border-radius: var(--radius-xl); padding: 22px 20px 24px;
}
.af-sect { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--grey-800); margin: 18px 0 12px; }
.af-sect:first-child { margin-top: 0; }
.af-sect-note { font-family: var(--font); font-size: 12.5px; color: var(--grey-500); font-weight: 600; margin-left: 6px; }
.af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.af-field { display: flex; flex-direction: column; gap: 6px; grid-column: span 2; }
.af-field--half { grid-column: span 1; }
.af-field label { font-size: 13px; font-weight: 700; color: var(--grey-700); }
.af-req { color: var(--red-500); font-style: normal; }
.af-field input, .af-field select {
  border: 2px solid var(--line); border-radius: 12px;
  padding: 11px 12px; font-size: 15px; background: #fff; color: var(--text);
}
.af-field input:focus, .af-field select:focus { border-color: var(--blue-500); outline: none; }
.af-note { font-size: 12px; color: var(--red-500); font-weight: 600; }
.af-idnote {
  margin: 16px 0 4px; padding: 12px 14px; border-radius: 14px;
  background: #FFF8E6; border: 1.5px solid #FFE2A0;
  font-size: 13.5px; color: #8A6116; line-height: 1.6;
}
.apply-form .consent { margin: 14px 0 16px; }

.apply-result { margin-top: 26px; background: rgba(255,255,255,0.92); border: 2px solid var(--blue-100); border-radius: var(--radius-xl); padding: 20px; }
.apply-result h3 { font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.ar-steps { margin: 12px 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--grey-700); }
.ar-text {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 2px dashed var(--grey-300); border-radius: 14px;
  padding: 14px; font-size: 13.5px; line-height: 1.65; color: var(--grey-800);
  background: var(--grey-50); font-family: inherit;
}
.ar-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ar-actions .btn { flex: 1 1 160px; }
.ar-privacy { margin-top: 12px; font-size: 12px; color: var(--grey-500); }

/* 상세페이지 → 접수 진입 버튼 */
.detail__applyform { margin-top: 10px; }

@media (max-width: 640px) {
  .apply { padding-top: 72px; }
  .af-grid { grid-template-columns: 1fr; }
  .af-field--half { grid-column: span 1; }
  .apply-form { padding: 18px 14px 20px; }
}

/* ============================================================================
   ★ 밸런스 다듬기 2차 — 검수단 발견 이슈 일괄 수정
   ========================================================================== */

/* [회귀버그] 히어로 헤드라인이 그라디언트 막대로 보이던 문제:
   background 축약형이 background-clip:text를 리셋 → 클립 재선언 */
.hero h1 .accent {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* [모바일 히어로] 말풍선이 마스코트 얼굴을 덮고, 플로팅 카드끼리 겹치던 문제
   → 세로 흐름으로 정리: 말풍선 → 마스코트 → 카드 2장 나란히 */
@media (max-width: 720px) {
  .hero-mascot { gap: 6px; }
  .hero-mascot .speech--hero { position: static; order: -1; margin: 0 auto 4px; max-width: 300px; left: auto; right: auto; transform: none; }
  .hero-mascot__svg { width: 150px; }
  .float-card { position: static !important; animation: none; }
  .hero-mascot .float-card--a, .hero-mascot .float-card--b { margin: 4px; }
}

/* [상품목록] 제목이 화면 왼쪽 끝에 붙던 문제 (side padding 리셋 회귀) */
.list-head { padding: 44px 20px 8px; }

/* [필터바] 데스크톱에서 카테고리 칩이 잘리고 숨겨지던 문제 → 랩 허용 */
@media (min-width: 721px) {
  .filter-chips { flex-wrap: wrap; overflow: visible; }
}

/* [스티키 헤더] 뒤 콘텐츠가 비쳐 지저분하던 문제 → 불투명도 상향 */
.header { background: rgba(255, 255, 255, 0.95); }
.filter-bar { background: rgba(255, 255, 255, 0.97); }

/* [푸터] 오로라 위에 잔글씨가 얹혀 대비가 약하던 문제 + 정렬 어긋남 */
.footer { background: rgba(255, 255, 255, 0.92); border-top: 1px solid var(--grey-100); }
.footer__broker { margin: 14px 0; }
.footer__links { flex-wrap: wrap; row-gap: 6px; }
.footer__links a { white-space: nowrap; }
.footer .nw { white-space: nowrap; }

/* ['전체 보기' 링크] 두 줄로 꺾이던 문제 */
.section__head .more { white-space: nowrap; flex: none; }

/* [섹션 제목] 모바일에서 그라디언트가 줄바꿈 단어를 흐리게 하던 문제
   → 모바일은 단색, 제목 줄바꿈 균형 */
.section__head h2 { text-wrap: balance; }
@media (max-width: 720px) {
  .section__head h2 {
    background: none; -webkit-background-clip: initial; background-clip: initial;
    -webkit-text-fill-color: var(--grey-900); color: var(--grey-900);
  }
}

/* [요정 카드 뒷면] 별·구름이 카드를 관통해 비치던 문제 + 스토리 잘림 */
.char-card__back {
  background: linear-gradient(160deg, rgba(82, 100, 190, 0.94), rgba(60, 76, 160, 0.92));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.char-card__back .cb-story { -webkit-line-clamp: 4; }

/* [히어로 장식] 무지개 아크가 카피를 관통하던 문제 → 옅게, 오른쪽으로 */
.hero-arc { opacity: 0.15; left: 60%; }
@keyframes archShimmer { 0%,100% { opacity: 0.10; } 50% { opacity: 0.20; } }

/* [상품카드] 배지 없는 카드의 예약 빈칸 제거 */
.prod-card__tags:empty { display: none; }

/* [매칭소] 데스크톱 결과 그리드가 620px에 3열로 짓눌리던 문제 */
.finder__grid.prod-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 480px) {
  .finder__grid.prod-grid { grid-template-columns: 1fr; }
}
/* [매칭소] 모바일 인트로 아래 휑한 공백 */
@media (max-width: 640px) {
  .finder { min-height: 0; }
}

/* ============================================================================
   ★ 회사소개 (About LIVORA) — 요정들이 들려주는 브랜드 스토리
   ========================================================================== */
.about { max-width: 760px; margin: 0 auto; padding-top: 76px; padding-bottom: 80px; position: relative; z-index: 1; }

/* 히어로 */
.ab-hero { text-align: center; padding: 44px 0 30px; }
.ab-hero__badge {
  display: inline-block; font-family: var(--font-display); font-size: 13px;
  background: rgba(255,255,255,0.8); border: 1.5px solid var(--blue-100);
  color: var(--blue-700); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.ab-hero__logo {
  font-family: var(--font-display); font-size: clamp(44px, 9vw, 72px);
  letter-spacing: 0.06em; line-height: 1;
  background: linear-gradient(100deg, #0E96E0, #3D7BFF, #9B4DE3);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ab-hero__slogan { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 4vw, 28px); color: var(--grey-800); margin-top: 14px; }
.ab-hero__sub { color: var(--text-sub); font-size: 15px; margin-top: 10px; font-weight: 600; }

/* 요정 내레이션 말풍선 */
.ab-fairy { display: flex; align-items: flex-end; gap: 10px; max-width: 460px; margin: 22px auto 0; }
.ab-fairy--flip { flex-direction: row-reverse; }
.ab-fairy__svg { width: 64px; height: 64px; flex: none; }
.ab-fairy__speech { font-size: 14px; text-align: left; }

/* 본문 섹션 */
.ab-sect { margin-top: 46px; }
.ab-kicker {
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue-600); text-align: center; margin-bottom: 14px;
}
.ab-kicker--light { color: #A9C4FF; }
.ab-card {
  background: rgba(255,255,255,0.88); border: 2px solid var(--line); border-bottom-width: 4px;
  border-radius: var(--radius-xl); padding: 26px 24px; text-align: center;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 15.5px; line-height: 1.75; color: var(--grey-800);
}
.ab-card b { color: var(--blue-700); }
.ab-list { font-family: var(--font-display); color: var(--grey-700); font-size: 16.5px; }

/* Mission / Vision */
.ab-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ab-mv__card {
  background: rgba(255,255,255,0.88); border: 2px solid var(--line); border-bottom-width: 4px;
  border-radius: var(--radius-xl); padding: 22px 20px; text-align: center;
}
.ab-mv__card .ab-kicker { margin-bottom: 8px; }
.ab-mv__card h3 { font-size: 16.5px; line-height: 1.5; color: var(--grey-900); font-weight: 800; }
.ab-mv__card p { margin-top: 10px; font-size: 13.5px; color: var(--text-sub); font-weight: 600; line-height: 1.65; }
.ab-mv__card .ab-fairy { margin-top: 16px; }
.ab-mv__card .ab-fairy__svg { width: 48px; height: 48px; }
.ab-mv__card .ab-fairy__speech { font-size: 12.5px; }

/* Philosophy — 밤하늘 */
.ab-sect--night {
  background: linear-gradient(175deg, #2B3A8F 0%, #1E2B6F 60%, #17204F 100%);
  border-radius: var(--radius-xl); padding: 34px 24px 28px; text-align: center;
  position: relative; overflow: hidden;
}
.ab-poem { display: flex; flex-direction: column; gap: 18px; color: rgba(255,255,255,0.88); font-size: 15.5px; line-height: 1.8; }
.ab-poem b { color: #FFE3A3; }
.ab-poem__final { font-family: var(--font-display); font-size: 19px; color: #fff; }
.ab-sect--night .ab-fairy__speech { background: rgba(255,255,255,0.95); }

/* Promise */
.ab-promise { text-align: center; }
.ab-promise__line { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 5.4vw, 40px); line-height: 1.3; color: var(--grey-900); }
.ab-promise__sub { margin-top: 12px; color: var(--text-sub); font-weight: 600; }

/* Core Values */
.ab-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ab-value {
  background: rgba(255,255,255,0.88); border: 2px solid var(--line); border-bottom-width: 4px;
  border-radius: var(--radius-lg); padding: 20px 16px; text-align: center;
}
.ab-value__char { width: 62px; height: 62px; margin: 0 auto 8px; }
.ab-value h4 { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--blue-600); letter-spacing: 0.04em; }
.ab-value p { margin-top: 6px; font-size: 13.5px; color: var(--grey-700); font-weight: 600; line-height: 1.6; }
.ab-value__quip { margin-top: 10px; font-size: 12.5px; color: var(--grey-500); font-weight: 600; }

/* 피날레 */
.ab-finale { text-align: center; padding-top: 8px; }
.ab-finale__en { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 4.4vw, 30px); color: var(--grey-900); }
.ab-finale__ko { margin-top: 10px; color: var(--text-sub); font-weight: 600; }
.ab-finale__body { margin-top: 16px; font-size: 15px; line-height: 1.75; color: var(--grey-800); }
.ab-firsts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.ab-firsts span {
  font-family: var(--font-display); font-size: 14px; color: var(--blue-700);
  background: #fff; border: 2px solid var(--blue-100); border-radius: 999px; padding: 8px 14px;
}
.ab-finale__logo {
  margin-top: 30px; font-family: var(--font-display); font-size: clamp(34px, 7vw, 52px);
  letter-spacing: 0.06em;
  background: linear-gradient(100deg, #0E96E0, #3D7BFF, #9B4DE3);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ab-finale__tag { font-family: var(--font-display); color: var(--grey-700); margin-top: 6px; font-size: 16px; }
.ab-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

@media (max-width: 640px) {
  .ab-mv { grid-template-columns: 1fr; }
  .ab-values { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ab-card { padding: 20px 16px; }
}

/* 헤더 내비 6개가 1024px대에서 줄바꿈 → 중간 폭에선 보조 메뉴(이용방법·FAQ) 숨김 */
@media (max-width: 1140px) {
  .header__nav a:nth-child(5), .header__nav a:nth-child(6) { display: none; }
}