@charset "UTF-8";
/* ==========================================================================
   RAON TOUR — 퍼블리싱 스타일시트
   브레이크포인트: 1440 / 1200 / 1023 / 767 / 479  (최소 지원 폭 320px)
   컨테이너: max-width 1280 + gutter 40 → 28(1023) → 20(767) → 16(479)
   ========================================================================== */
/* 1. 토큰 */
:root {
  --brand-900:#062A4E;
  --brand-700:#0B4E8C;
  --brand-500:#1273D4;
  --brand-300:#8FC1F0;
  --brand-100:#E3F0FC;
  --accent-600:#E5551A;
  --accent-500:#FF6B2C;
  --accent-100:#FFEDE3;
  --sale:#F5323F;
  --warn-bg:#FFF7ED;
  --warn-fg:#92400E;
  --warn-tt:#B45309;
  --star:#FFB020;
  --kakao:#FEE500;
  --n900:#14181F;
  --n700:#3D4655;
  --n500:#6E7887;
  --n400:#8B95A3;
  --n300:#C9CFD8;
  --n250:#D5DBE3;
  --n200:#E4E8ED;
  --n100:#F2F5F8;
  --n050:#F6F8FB;
  --white:#fff;
  --dark:#14181F;
  --dark-line:#2A313C;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-xl:20px;
  --r-full:999px;
  --container:1280px;
  --gutter:40px;
  --sec-pad:76px;
  --shadow-card:0 8px 24px -4px rgba(6,42,78,.08);
  --shadow-float:0 14px 40px -6px rgba(6,42,78,.16);
  --ff:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --ff-num:"Outfit","Noto Sans KR",sans-serif;
}

@media (max-width: 1023px) {
  :root {
    --gutter:28px;
    --sec-pad:56px;
  }
}
@media (max-width: 767px) {
  :root {
    --gutter:20px;
    --sec-pad:44px;
  }
}
@media (max-width: 479px) {
  :root {
    --gutter:16px;
    --sec-pad:36px;
  }
}
/* 2. 리셋 */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ff);
  color: var(--n700);
  font-size: 15px;
  line-height: 1.6;
  background: var(--white);
  word-break: keep-all;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
  min-width: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* 3. 레이아웃 유틸 */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--sec-pad);
}

.bg-soft {
  background: var(--n050);
}

.bg-navy {
  background: var(--brand-900);
}

/* 의도적 가로 스크롤 컨테이너 */
.hscroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.hscroll::-webkit-scrollbar {
  display: none;
}

.hscroll > * {
  flex: 0 0 auto;
}

.hscroll--inpage {
  margin-inline: 0;
  padding-inline: 0;
}

/* 4. 타이포 */
.eyebrow {
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--brand-500);
}

.h-sec {
  font-weight: 900;
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -0.035em;
  line-height: 1.3;
  color: var(--n900);
}

.h-page {
  font-weight: 900;
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -0.035em;
  line-height: 1.3;
  color: var(--n900);
}

.h-card {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: var(--n900);
}

.h-block {
  font-weight: 700;
  font-size: clamp(19px, 2vw, 22px);
  letter-spacing: -0.025em;
  color: var(--n900);
}

.txt-sub {
  font-size: 14.5px;
  color: var(--n500);
}

.num {
  font-family: var(--ff-num);
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (max-width: 479px) {
  .h-sec, .h-page {
    font-size: 22px;
  }
  .h-block {
    font-size: 18px;
  }
  .h-card {
    font-size: 15.5px;
  }
  .txt-sub {
    font-size: 13px;
  }
}
/* 5. 버튼 · 칩 · 뱃지 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 13px 28px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 15px;
  transition: filter 0.15s, background 0.15s, color 0.15s;
}

.btn:hover {
  filter: brightness(0.95);
}

.btn--primary {
  background: var(--brand-500);
  color: #fff;
}

.btn--dark {
  background: var(--brand-900);
  color: #fff;
}

.btn--accent {
  background: var(--accent-500);
  color: #fff;
  border-radius: var(--r-full);
}

.btn--line {
  border: 1px solid var(--n250);
  color: var(--n700);
}

.btn--line-blue {
  border: 1.4px solid var(--brand-500);
  color: var(--brand-500);
}

.btn--ghost-w {
  border: 1.4px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  border-radius: var(--r-full);
}

.btn--kakao {
  background: var(--kakao);
  color: var(--n900);
}

.btn--white {
  background: #fff;
  color: var(--brand-900);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--sm {
  min-height: 38px;
  padding: 9px 18px;
  font-size: 13.5px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 18px;
  border-radius: var(--r-full);
  background: #fff;
  border: 1px solid var(--n200);
  font-size: 14px;
  font-weight: 500;
  color: var(--n700);
  white-space: nowrap;
}

.chip.is-on {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  font-weight: 700;
}

.chip--dark.is-on {
  background: var(--brand-900);
  border-color: var(--brand-900);
}

.chip--soft.is-on {
  background: var(--brand-100);
  border-color: var(--brand-500);
  color: var(--brand-700);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
}

.badge--info {
  background: var(--brand-100);
  color: var(--brand-700);
}

.badge--gray {
  background: var(--n100);
  color: var(--n700);
}

.badge--warn {
  background: var(--accent-100);
  color: var(--accent-600);
}

.badge--sale {
  background: var(--sale);
  color: #fff;
  font-weight: 700;
}

.badge--dark {
  background: var(--brand-900);
  color: #fff;
  font-weight: 700;
}

.badge--new {
  background: var(--accent-500);
  color: #fff;
  font-weight: 700;
  font-family: var(--ff-num);
  letter-spacing: 0.06em;
}

.tag {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--n100);
  font-size: 11.5px;
  color: var(--n500);
}

/* 6. 아이콘 */
.ico {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico--sm {
  width: 20px;
  height: 20px;
}

.ico--xs {
  width: 17px;
  height: 17px;
}

/* 7. 헤더 */
.promo {
  background: var(--brand-900);
  color: #fff;
  position: relative;
}

.promo__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 0;
  flex-wrap: wrap;
}

.promo__tag {
  background: var(--accent-500);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.promo__txt {
  font-size: 14px;
  font-weight: 500;
}

.promo__link {
  font-size: 13px;
  color: var(--brand-300);
}

.promo__close {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--n500);
}

.util {
  border-bottom: 1px solid var(--n200);
  background: #fff;
}

.util__inner {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding: 9px 0;
}

.util a {
  font-size: 12.5px;
  color: var(--n500);
}

.head {
  background: #fff;
}

.head__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 22px 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.logo__mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-900));
  position: relative;
  flex: 0 0 auto;
}

.logo__mark svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.logo__wm {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo__kr {
  font-weight: 900;
  font-size: 23px;
  letter-spacing: -0.045em;
  color: var(--brand-900);
}

.logo__en {
  font-family: var(--ff-num);
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: 0.26em;
  color: var(--n500);
}

.search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 2px solid var(--brand-500);
  border-radius: var(--r-full);
  padding: 6px 6px 6px 24px;
  background: #fff;
}

.search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 14.5px;
  padding: 0;
}

.search input::placeholder {
  color: #8B95A3;
}

.search__btn {
  width: 42px;
  height: 42px;
  border-radius: var(--r-full);
  background: var(--brand-500);
  color: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.acts {
  display: flex;
  gap: 26px;
  flex: 0 0 auto;
}

.acts a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--n700);
}

.acts .ico {
  color: var(--n700);
}

.acts .is-accent .ico {
  color: var(--accent-500);
}

.gnb {
  border-top: 1px solid var(--n200);
  border-bottom: 1px solid var(--n200);
  background: #fff;
}

.gnb__inner {
  display: flex;
  align-items: center;
}

.gnb__all {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 17px 32px 17px 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--brand-900);
}

.gnb__menu {
  display: flex;
  gap: 30px;
  flex: 1 1 auto;
  min-width: 0;
}

.gnb__menu a {
  position: relative;
  display: block;
  padding: 17px 0 15px;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--n900);
}

.gnb__menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
}

.gnb__menu .is-on {
  font-weight: 700;
  color: var(--brand-500);
}

.gnb__menu .is-on::after {
  background: var(--brand-500);
}

.gnb__side {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}

.gnb__side a {
  font-weight: 500;
  font-size: 14.5px;
  color: var(--n700);
}

.gnb__hot {
  background: var(--accent-100);
  color: var(--accent-600);
  border-radius: var(--r-full);
  padding: 5px 12px;
  font-weight: 700;
  font-size: 13px;
}

@media (max-width: 1200px) {
  .acts {
    gap: 18px;
  }
  .head__inner {
    gap: 24px;
  }
  .gnb__menu {
    gap: 22px;
  }
}
@media (max-width: 1023px) {
  .util {
    display: none;
  }
  .head__inner {
    padding: 14px 0;
    gap: 14px;
    flex-wrap: wrap;
  }
  .logo__kr {
    font-size: 20px;
  }
  .search {
    order: 3;
    flex: 1 0 100%;
  }
  .acts {
    margin-left: auto;
    gap: 16px;
  }
  .acts span {
    display: none;
  }
  .gnb__menu, .gnb__side {
    display: none;
  } /* GNB는 숨기고 햄버거만 노출 */
  .gnb__all {
    padding: 14px 0;
  }
  .promo__txt {
    font-size: 13px;
  }
  .promo__link {
    display: none;
  }
}
@media (max-width: 479px) {
  .promo__inner {
    gap: 8px;
    padding: 10px 0;
    padding-right: 40px;
  }
  .promo__txt {
    font-size: 12px;
  }
  .promo__close {
    right: calc(var(--gutter) - 8px);
  }
  .logo__en {
    display: none;
  }
  .search {
    padding-left: 16px;
  }
  .search input {
    font-size: 13.5px;
  }
  .acts {
    gap: 12px;
  }
}
/* 8. 전체메뉴 오버레이 */
.ov {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}

.ov.is-open {
  display: block;
}

.ov__dim {
  position: absolute;
  inset: 0;
  background: rgba(6, 42, 78, 0.55);
}

.ov__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(420px, 88vw);
  background: #fff;
  overflow-y: auto;
  padding: 24px var(--gutter) 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ov__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ov__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-right: -10px;
}

.ov__group h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--n400);
  margin-bottom: 8px;
}

.ov__group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 0;
  font-size: 15px;
  color: var(--n900);
  border-bottom: 1px solid var(--n100);
}

body.is-locked {
  overflow: hidden;
}

/* 9. 히어로 */
.hero {
  position: relative;
  background: var(--brand-900);
}

.hero__media {
  position: absolute;
  inset: 0 0 auto;
  height: 500px;
  overflow: hidden;
}

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

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.4) 100%);
}

.hero__inner {
  position: relative;
  padding-top: 72px;
}

.hero__copy {
  max-width: 720px;
  color: #fff;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 500;
}

.hero__title {
  margin-top: 20px;
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1.32;
}

.hero__sub {
  margin-top: 20px;
  font-size: clamp(13.5px, 1.4vw, 17px);
  color: #DCE9F5;
  line-height: 1.6;
}

.hero__cta {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__ind {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  color: #fff;
}

.hero__bar {
  width: 96px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  position: relative;
}

.hero__bar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  border-radius: 2px;
  background: var(--accent-500);
}

.hero__ind button {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #fff;
}

/* 통합 검색 위젯 */
.finder {
  margin-top: 26px;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float);
  padding: 20px 28px 24px;
  position: relative;
}

.finder__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.finder__row {
  display: flex;
  align-items: center;
  background: #F6F8FB;
  border-radius: 14px;
  padding: 8px;
}

.finder__f {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.finder__f + .finder__f {
  border-left: 1px solid var(--n200);
}

.finder__f span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--n400);
}

.finder__f strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--n900);
}

.finder__go {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 18px 44px;
  background: var(--brand-500);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 17px;
  min-height: 44px;
}

.finder__kw {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.finder__kw b {
  font-size: 12.5px;
  color: var(--n500);
  flex: 0 0 auto;
}

.finder__kw a {
  border: 1px solid var(--n200);
  border-radius: var(--r-full);
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--n700);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .hero__media {
    height: 420px;
  }
  .hero__inner {
    padding-top: 52px;
  }
  .finder__row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 14px;
  }
  .finder__f {
    padding: 12px 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .finder__f + .finder__f {
    border-left: 0;
    border-top: 1px solid var(--n200);
  }
  .finder__f span {
    flex: 0 0 96px;
  }
  .finder__f strong {
    font-size: 15px;
  }
  .finder__go {
    margin: 12px 0 8px;
    width: 100%;
    padding: 15px 0;
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .hero__media {
    height: 100%;
  }
  .hero__ind {
    margin-top: 24px;
  }
  .hero__cta .btn {
    flex: 1 1 100%;
    width: 100%;
  }
  .finder {
    padding: 16px;
    border-radius: var(--r-lg);
  }
  .finder__kw {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .finder__kw::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 479px) {
  .hero__title {
    font-size: 26px;
  }
  .hero__sub {
    font-size: 13px;
  }
  .hero__ind button {
    width: 34px;
    height: 34px;
  }
  .finder__f span {
    flex: 0 0 78px;
    font-size: 11.5px;
  }
  .finder__f strong {
    font-size: 14px;
  }
}
/* 10. 퀵 카테고리 */
.quick {
  background: var(--n050);
  border-radius: var(--r-xl);
  padding: 28px 16px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
}

.quick a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--n900);
  text-align: center;
}

.quick__ic {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
}

.quick__ic .ico {
  width: 28px;
  height: 28px;
}

@media (max-width: 1023px) {
  .quick {
    grid-template-columns: repeat(5, 1fr);
    row-gap: 20px;
  }
}
@media (max-width: 767px) {
  .quick {
    padding: 22px 10px;
  }
  .quick__ic {
    width: 52px;
    height: 52px;
  }
  .quick__ic .ico {
    width: 24px;
    height: 24px;
  }
  .quick a {
    font-size: 12px;
    gap: 9px;
  }
}
@media (max-width: 479px) {
  .quick__ic {
    width: 46px;
    height: 46px;
  }
  .quick__ic .ico {
    width: 22px;
    height: 22px;
  }
  .quick a {
    font-size: 11px;
  }
}
/* 11. 섹션 헤더 */
.sec-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.sec-head__t {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sec-head--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
}

@media (max-width: 767px) {
  .sec-head {
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
  }
  .sec-head .btn {
    width: 100%;
  }
}
/* 12. 타임특가 */
.deal {
  background: var(--brand-900);
  color: #fff;
}

.deal .h-sec {
  color: #fff;
}

.deal__label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deal__label b {
  background: var(--accent-500);
  border-radius: var(--r-full);
  padding: 4px 11px;
  font-family: var(--ff-num);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.deal__label span {
  font-size: 13px;
  color: var(--brand-300);
}

.deal__card {
  display: flex;
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
}

.deal__media {
  flex: 0 0 520px;
  position: relative;
  min-width: 0;
}

.deal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 326px;
}

.deal__timer {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: var(--r-full);
  padding: 7px 14px;
  font-size: 12.5px;
  color: #FFD9A8;
}

.deal__timer b {
  font-family: var(--ff-num);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #fff;
}

.deal__info {
  flex: 1 1 auto;
  min-width: 0;
  padding: 36px 40px;
  color: var(--n700);
}

.deal__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.deal__title {
  margin-top: 14px;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 25px);
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: var(--n900);
}

.deal__opts {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--n500);
}

.deal__bottom {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.deal__price {
  flex: 1 1 auto;
  min-width: 0;
}

.price-old {
  font-size: 15px;
  color: #A0A9B5;
  text-decoration: line-through;
}

.price-off {
  font-weight: 700;
  font-size: 13px;
  color: var(--sale);
  margin-left: 8px;
}

.price-now {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.price-now .rate {
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 30px;
  color: var(--sale);
}

.price-now .val {
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--n900);
}

.price-now .unit {
  font-weight: 500;
  font-size: 16px;
  color: var(--n900);
}

@media (max-width: 1023px) {
  .deal__card {
    flex-direction: column;
  }
  .deal__media {
    flex: 0 0 auto;
  }
  .deal__media img {
    min-height: 0;
    height: 260px;
  }
  .deal__info {
    padding: 24px 20px;
  }
  .deal__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .deal__bottom .btn {
    width: 100%;
  }
}
@media (max-width: 479px) {
  .deal__media img {
    height: 190px;
  }
  .price-now .rate {
    font-size: 22px;
  }
  .price-now .val {
    font-size: 25px;
  }
  .price-now .unit {
    font-size: 13px;
  }
  .deal__opts {
    font-size: 12.5px;
  }
}
/* 13. 상품 카드 그리드 */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}

.pcard__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 302/196;
}

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

.pcard__badge {
  position: absolute;
  left: 12px;
  top: 12px;
}

.pcard__like {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  color: var(--n500);
}

.pcard__body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pcard__cat {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--brand-500);
}

.pcard__tags {
  font-size: 12.5px;
  color: var(--n400);
}

.pcard__rate {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--n400);
}

.pcard__rate b {
  font-family: var(--ff-num);
  font-size: 13px;
  color: var(--n900);
}

.pcard__rate .s {
  color: var(--star);
}

.pcard__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pcard__price .val {
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.02em;
  color: var(--n900);
}

.pcard__price .unit {
  font-weight: 500;
  font-size: 13.5px;
  color: var(--n900);
}

@media (max-width: 1023px) {
  .pgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 20px;
  }
}
@media (max-width: 767px) {
  .pgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
  }
}
@media (max-width: 479px) {
  .pcard__body {
    gap: 6px;
    margin-top: 10px;
  }
  .pcard__like {
    width: 34px;
    height: 34px;
  }
  .pcard__price .val {
    font-size: 18px;
  }
  .pcard__price .unit {
    font-size: 11.5px;
  }
  .pcard__tags, .pcard__rate {
    font-size: 11px;
  }
}
/* 14. 테마 기획전 */
.theme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.theme a {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 410/300;
  color: #fff;
}

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

.theme a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.05) 62%);
}

.theme__copy {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.theme__note {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.22);
  border-radius: var(--r-full);
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 500;
}

.theme__t {
  font-weight: 900;
  font-size: clamp(19px, 2vw, 26px);
  letter-spacing: -0.03em;
  line-height: 1.3;
}

.theme__s {
  font-size: 14px;
  color: #E3EBF3;
}

.banners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.banner {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--r-lg);
  padding: 28px 32px;
  color: #fff;
}

.banner--navy {
  background: var(--brand-900);
}

.banner--blue {
  background: var(--brand-500);
}

.banner__c {
  flex: 1 1 auto;
  min-width: 0;
}

.banner__c b {
  display: block;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.banner__c span {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
}

.banner__go {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

@media (max-width: 1023px) {
  .theme {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .theme a {
    aspect-ratio: 343/164;
  }
  .theme__copy {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }
  .banners {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
  }
}
@media (max-width: 479px) {
  .banner {
    padding: 20px;
  }
  .banner__c b {
    font-size: 16px;
  }
  .banner__c span {
    font-size: 12px;
  }
}
/* 15. 후기 */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review {
  background: var(--n050);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review__star {
  color: var(--star);
  font-size: 14px;
}

.review__txt {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--n700);
  flex: 1 1 auto;
}

.review__line {
  height: 1px;
  background: var(--n200);
}

.review__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review__av {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: var(--brand-100);
  flex: 0 0 auto;
}

.review__meta b {
  font-weight: 700;
  font-size: 14px;
  color: var(--n900);
}

.review__meta time {
  font-size: 12px;
  color: var(--n400);
  margin-left: 8px;
}

.review__meta span {
  display: block;
  font-size: 12.5px;
  color: var(--brand-500);
}

.rate-sum {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rate-sum .s {
  color: var(--star);
  font-size: 15px;
}

.rate-sum .v {
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 24px;
  color: var(--n900);
}

.rate-sum .c {
  font-size: 13.5px;
  color: var(--n500);
}

@media (max-width: 1023px) {
  .reviews {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .review {
    padding: 20px;
  }
  .review__txt {
    font-size: 13px;
  }
}
/* 16. 공지 · 고객센터 */
.info3 {
  display: grid;
  grid-template-columns: 1fr 1fr 360px;
  gap: 24px;
  align-items: stretch;
}

.panel {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel__head b {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--n900);
}

.panel__head a {
  font-size: 12.5px;
  color: var(--n400);
}

.panel li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
}

.panel li a {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--n700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel li em {
  font-family: var(--ff-num);
  font-weight: 600;
  font-size: 12px;
  color: #A0A9B5;
  font-style: normal;
  flex: 0 0 auto;
}

.cs {
  background: var(--brand-900);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs b {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.cs .tel {
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.cs p {
  font-size: 13px;
  color: var(--brand-300);
  line-height: 1.7;
}

.cs__btns {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.cs__btns .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 8px;
  font-size: 14px;
}

@media (max-width: 1023px) {
  .info3 {
    grid-template-columns: 1fr 1fr;
  }
  .cs {
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .info3 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .panel {
    padding: 20px;
  }
  .cs {
    padding: 20px;
  }
  .cs .tel {
    font-size: 28px;
  }
}
/* 17. 푸터 */
.foot {
  background: var(--dark);
  color: var(--n400);
  padding-block: 56px 48px;
  font-size: 13.5px;
}

.foot__top {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 300px;
  gap: 24px;
}

.foot__col b {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 13px;
}

.foot__col li {
  margin-bottom: 10px;
}

.foot__col a {
  color: var(--n400);
}

.foot__app p {
  margin: 6px 0 14px;
  line-height: 1.6;
}

.foot__stores {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.foot__stores a {
  border: 1px solid var(--n700);
  border-radius: 8px;
  padding: 9px 14px;
  font-family: var(--ff-num);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--n300);
}

.foot__sns {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.foot__sns a {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  border: 1px solid var(--n700);
  display: grid;
  place-items: center;
  color: var(--n300);
}

.foot__line {
  height: 1px;
  background: var(--dark-line);
  margin: 32px 0;
}

.foot__bot {
  display: flex;
  gap: 40px;
}

.foot__biz {
  flex: 1 1 auto;
  min-width: 0;
}

.foot__logo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.foot__logo .logo__kr {
  font-size: 17px;
  color: #fff;
}

.foot__logo .logo__mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand-500);
}

.foot__biz address {
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--n500);
}

.foot__copy {
  display: block;
  margin-top: 12px;
  font-family: var(--ff-num);
  font-size: 12px;
  color: #4A5261;
}

.foot__cert {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

.foot__cert span {
  border: 1px solid var(--dark-line);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--n400);
}

@media (max-width: 1023px) {
  .foot__top {
    grid-template-columns: repeat(2, 1fr);
  }
  .foot__app {
    grid-column: 1/-1;
  }
  .foot__bot {
    flex-direction: column;
    gap: 20px;
  }
  .foot__cert {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media (max-width: 479px) {
  .foot {
    padding-block: 36px 32px;
  }
  .foot__top {
    gap: 20px 16px;
  }
  .foot__col b {
    font-size: 13px;
  }
  .foot__col li {
    margin-bottom: 8px;
    font-size: 12.5px;
  }
  .foot__biz address {
    font-size: 11.5px;
  }
  .foot__cert span {
    font-size: 11px;
  }
}
/* 18. 하단 고정 탭바 (모바일) */
.tabbar {
  display: none;
}

@media (max-width: 767px) {
  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid var(--n200);
    box-shadow: 0 -4px 16px rgba(6, 42, 78, 0.08);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  }
  .tabbar a {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    font-size: 10.5px;
    color: var(--n400);
  }
  .tabbar .is-on {
    color: var(--brand-500);
    font-weight: 700;
  }
  .tabbar .ico {
    width: 22px;
    height: 22px;
  }
  body {
    padding-bottom: 76px;
  }
  body.has-actionbar {
    padding-bottom: 150px;
  }
}
/* ==========================================================================
   서브 페이지
   ========================================================================== */
/* 19. 페이지 타이틀 */
.ptitle {
  background: var(--n050);
  padding-block: 36px;
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--n400);
  margin-bottom: 12px;
}

.crumb i {
  font-style: normal;
  color: var(--n300);
}

.crumb strong {
  font-weight: 500;
  color: var(--n900);
}

.ptitle p {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--n500);
}

@media (max-width: 767px) {
  .ptitle {
    padding-block: 22px;
  }
}
/* 20. 2단 레이아웃 */
.two {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.two__main {
  flex: 1 1 auto;
  min-width: 0;
}

.two__side {
  flex: 0 0 360px;
  position: sticky;
  top: 20px;
}

.two--lnb .two__side {
  flex: 0 0 272px;
  order: -1;
}

@media (max-width: 1023px) {
  .two {
    flex-direction: column;
    gap: 24px;
  }
  .two__side {
    position: static;
    flex: 1 1 auto;
    width: 100%;
  }
  .two--lnb .two__side {
    order: 0;
  }
}
/* 21. LNB 필터 */
.lnb {
  border: 1px solid var(--n200);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.lnb__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--n200);
}

.lnb__head b {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 16px;
  color: var(--n900);
}

.lnb__head button {
  font-size: 12.5px;
  color: var(--n400);
  min-height: 38px;
}

.lnb__g {
  padding: 18px 20px;
  border-bottom: 1px solid var(--n200);
}

.lnb__g > b {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--n900);
  margin-bottom: 13px;
}

.lnb__g label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  font-size: 13px;
  color: var(--n700);
  cursor: pointer;
}

.lnb__g label em {
  margin-left: auto;
  font-family: var(--ff-num);
  font-weight: 500;
  font-size: 11.5px;
  color: #A0A9B5;
  font-style: normal;
}

.lnb__g input[type=checkbox] {
  width: 17px;
  height: 17px;
  accent-color: var(--brand-500);
  flex: 0 0 auto;
}

.lnb__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lnb__chips .chip {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 12px;
}

.lnb__range {
  margin: 14px 0;
}

.lnb__range input {
  width: 100%;
  accent-color: var(--brand-500);
}

.lnb__apply {
  padding: 4px 20px 20px;
}

.lnb__mobile {
  display: none;
}

@media (max-width: 1023px) {
  .lnb {
    position: fixed;
    inset: 0;
    z-index: 90;
    border: 0;
    border-radius: 0;
    display: none;
    flex-direction: column;
    overflow-y: auto;
  }
  .lnb.is-open {
    display: flex;
  }
  .lnb__head {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
  }
  .lnb__apply {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--n200);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  }
  .lnb__mobile {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}
/* 22. 정렬 바 · 목록 */
.sortbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--n200);
  margin-bottom: 20px;
}

.sortbar__tabs {
  display: flex;
  gap: 22px;
  flex: 1 1 auto;
  min-width: 0;
}

.sortbar__tabs a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  color: var(--n500);
  white-space: nowrap;
}

.sortbar__tabs a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--n300);
}

.sortbar__tabs .is-on {
  font-weight: 700;
  color: var(--n900);
}

.sortbar__tabs .is-on::before {
  background: var(--brand-500);
}

.sortbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.sortbar__right span {
  font-size: 13px;
  color: var(--n400);
}

.sel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  border: 1px solid var(--n200);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--n700);
  background: #fff;
}

.rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.row {
  display: flex;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--n200);
  border-radius: var(--r-lg);
  padding: 16px 24px 16px 16px;
  background: #fff;
}

.row__media {
  flex: 0 0 240px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 240/168;
}

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

.row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.row__t {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: var(--n900);
}

.row__s {
  font-size: 13.5px;
  color: var(--n500);
  line-height: 1.6;
}

.row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.row__rate {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--n400);
}

.row__rate b {
  font-family: var(--ff-num);
  font-size: 13px;
  color: var(--n900);
}

.row__rate .s {
  color: var(--star);
}

.row__rate .ok {
  font-weight: 500;
  color: var(--brand-700);
}

.row__buy {
  flex: 0 0 196px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.row__buy .price-now .val {
  font-size: 26px;
}

.row__buy .price-now .rate {
  font-size: 20px;
}

.row__buy .btn {
  width: 100%;
}

@media (max-width: 1023px) {
  .row__media {
    flex: 0 0 200px;
  }
  .row__buy {
    flex: 0 0 170px;
  }
  .row__t {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  .row__media {
    flex: 0 0 auto;
    border-radius: 0;
    aspect-ratio: 343/180;
  }
  .row__body {
    padding: 14px 16px 0;
  }
  .row__buy {
    flex: 0 0 auto;
    align-items: stretch;
    padding: 12px 16px 16px;
  }
  .row__s {
    font-size: 12.5px;
  }
}
@media (max-width: 479px) {
  .row__t {
    font-size: 15.5px;
  }
  .row__buy .price-now .val {
    font-size: 21px;
  }
  .row__buy .price-now .rate {
    font-size: 17px;
  }
}
/* 23. 페이지네이션 */
.paging {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
}

.paging a {
  width: 40px;
  height: 40px;
  min-height: 38px;
  border: 1px solid var(--n200);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--ff-num);
  font-weight: 500;
  font-size: 13px;
  color: var(--n700);
}

.paging .is-on {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  font-weight: 700;
}

/* 24. 상품 상세 */
.dhead {
  padding-block: 32px 24px;
}

.dhead__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dhead__row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dhead__row h1 {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 900;
  font-size: clamp(20px, 3vw, 32px);
  letter-spacing: -0.035em;
  line-height: 1.35;
  color: var(--n900);
}

.dhead__acts {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.dhead__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--n500);
  flex-wrap: wrap;
}

.dhead__meta .s {
  color: var(--star);
}

.dhead__meta b {
  font-family: var(--ff-num);
  color: var(--n900);
}

.dhead__meta code {
  font-family: var(--ff-num);
  font-size: 12.5px;
  color: var(--n400);
}

.gallery {
  display: flex;
  gap: 8px;
}

.gallery__main {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 952/420;
}

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

.gallery__more {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: var(--r-full);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
}

.gallery__thumbs {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gallery__thumbs div {
  flex: 1 1 0;
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}

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

@media (max-width: 1023px) {
  .gallery__thumbs {
    flex: 0 0 200px;
  }
}
@media (max-width: 767px) {
  .dhead {
    padding-block: 20px 16px;
  }
  .dhead__row {
    flex-wrap: wrap;
  }
  .dhead__acts {
    width: 100%;
  }
  .dhead__acts .btn {
    flex: 1 1 0;
  }
  .gallery {
    margin-inline: calc(var(--gutter) * -1);
  }
  .gallery__thumbs {
    display: none;
  }
  .gallery__main {
    border-radius: 0;
    aspect-ratio: 375/250;
  }
  .gallery__more {
    left: auto;
    right: 16px;
    bottom: 16px;
    padding: 5px 11px;
    font-size: 11.5px;
  }
}
.anchors {
  display: flex;
  border-top: 1px solid var(--n200);
  border-bottom: 1px solid var(--n200);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  overflow-x: auto;
  scrollbar-width: none;
}

.anchors::-webkit-scrollbar {
  display: none;
}

.anchors a {
  flex: 1 1 0;
  min-width: max-content;
  text-align: center;
  padding: 14px 16px 12px;
  font-weight: 500;
  font-size: 15px;
  color: var(--n500);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.anchors .is-on {
  font-weight: 700;
  color: var(--brand-500);
  border-bottom-color: var(--brand-500);
}

@media (max-width: 767px) {
  .anchors a {
    font-size: 12.5px;
    padding: 13px 14px 11px;
  }
}
.dblock {
  margin-top: 28px;
}

.dblock > h2 {
  margin-bottom: 16px;
}

.dtable {
  background: var(--n050);
  border-radius: 14px;
  padding: 6px 24px;
}

.dtable dl {
  display: flex;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--n200);
}

.dtable dl:last-child {
  border-bottom: 0;
}

.dtable dt {
  flex: 0 0 140px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--n900);
}

.dtable dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.day {
  border: 1px solid var(--n200);
  border-radius: 14px;
  padding: 20px 24px;
  background: #fff;
  margin-bottom: 16px;
}

.day__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.day__no {
  background: var(--brand-900);
  color: #fff;
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

.day__date {
  font-family: var(--ff-num);
  font-weight: 600;
  font-size: 13px;
  color: var(--n400);
}

.day__t {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--n900);
}

.day li {
  display: flex;
  gap: 16px;
  margin-bottom: 11px;
}

.day li:last-child {
  margin-bottom: 0;
}

.day li b {
  flex: 0 0 64px;
  text-align: center;
  background: var(--n100);
  border-radius: 5px;
  padding: 4px 0;
  font-family: var(--ff-num);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--n500);
  height: fit-content;
}

.day li span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.incl {
  border: 1px solid var(--n200);
  border-radius: 14px;
  padding: 20px 24px 22px;
  background: #fff;
}

.incl > b {
  display: inline-flex;
  border-radius: 6px;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 14px;
}

.incl--in > b {
  background: var(--brand-100);
  color: var(--brand-700);
}

.incl--out > b {
  background: var(--n100);
  color: var(--n500);
}

.incl li {
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 9px;
}

.tbl-wrap {
  border: 1px solid var(--n200);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.tbl th, .tbl td {
  padding: 13px 24px;
  font-size: 13.5px;
  text-align: left;
  border-bottom: 1px solid var(--n200);
}

.tbl thead th {
  background: var(--n050);
  font-weight: 700;
  color: var(--n900);
}

.tbl tbody tr:last-child td {
  border-bottom: 0;
}

.tbl td:nth-child(2) {
  font-weight: 500;
  color: var(--sale);
}

.notice-warn {
  background: var(--warn-bg);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 16px;
}

.notice-warn b {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--warn-tt);
  margin-bottom: 8px;
}

.notice-warn li {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--warn-fg);
}

@media (max-width: 767px) {
  .dtable {
    padding: 4px 16px;
  }
  .dtable dl {
    gap: 12px;
    padding: 12px 0;
  }
  .dtable dt {
    flex: 0 0 78px;
    font-size: 12.5px;
  }
  .dtable dd {
    font-size: 12.5px;
  }
  .two-col {
    grid-template-columns: 1fr;
  }
  .day {
    padding: 16px 18px;
  }
  .day li b {
    flex: 0 0 54px;
    font-size: 10.5px;
  }
  .day li span {
    font-size: 13px;
  }
  .incl li {
    font-size: 13px;
  }
  /* 표 → 카드형 블록 */
  .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .tbl, .tbl tbody, .tbl tr, .tbl td {
    display: block;
    width: 100%;
  }
  .tbl tr {
    border-bottom: 1px solid var(--n200);
    padding: 14px 16px;
  }
  .tbl tr:last-child {
    border-bottom: 0;
  }
  .tbl td {
    border: 0;
    padding: 3px 0;
    font-size: 13px;
    display: flex;
    gap: 10px;
  }
  .tbl td::before {
    content: attr(data-th);
    flex: 0 0 84px;
    color: var(--n400);
    font-size: 12.5px;
  }
  .tbl td:first-child {
    font-weight: 700;
    color: var(--n900);
  }
}
/* 예약 사이드바 */
.buybox {
  border: 1px solid var(--n200);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.buybox__note {
  font-size: 12px;
  color: var(--n400);
}

.dates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dates > b, .qty > b, .paym > b {
  font-weight: 700;
  font-size: 14px;
  color: var(--n900);
}

.date {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--n200);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: #fff;
  text-align: left;
  width: 100%;
}

.date.is-on {
  border: 1.5px solid var(--brand-500);
  background: var(--brand-100);
}

.date b {
  flex: 0 0 74px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--n900);
}

.date span {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--ff-num);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--n900);
}

.date em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--n400);
}

.date em.few {
  color: var(--sale);
}

.qty {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qty__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.qty__row div {
  flex: 1 1 auto;
  min-width: 0;
}

.qty__row div b {
  display: block;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--n900);
}

.qty__row div span {
  display: block;
  font-size: 11.5px;
  color: var(--n400);
}

.stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--n200);
  border-radius: 8px;
  flex: 0 0 auto;
}

.stepper button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--n500);
}

.stepper span {
  width: 38px;
  text-align: center;
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 14px;
  color: var(--n900);
}

.total {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--n050);
  border-radius: var(--r-md);
  padding: 14px 16px;
}

.total span {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  font-size: 13.5px;
}

.total b {
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--n900);
}

/* 모바일 하단 액션 바 */
.actionbar {
  display: none;
}

@media (max-width: 1023px) {
  .actionbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-top: 1px solid var(--n200);
    box-shadow: 0 -4px 16px rgba(6, 42, 78, 0.1);
    padding: 12px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  }
  .actionbar__price {
    flex: 1 1 auto;
    min-width: 0;
  }
  .actionbar .price-now .val {
    font-size: 20px;
  }
  .actionbar .price-now .rate {
    font-size: 15px;
  }
  .actionbar .price-now .unit {
    font-size: 11.5px;
  }
  .actionbar .price-old {
    font-size: 11.5px;
  }
  .actionbar__like {
    width: 48px;
    height: 48px;
    border: 1px solid var(--n250);
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    color: var(--n500);
    flex: 0 0 auto;
  }
  .actionbar .btn {
    flex: 0 0 auto;
    padding-inline: 34px;
  }
  .buybox {
    display: none;
  }
}
@media (max-width: 479px) {
  .actionbar {
    gap: 10px;
  }
  .actionbar .btn {
    padding-inline: 22px;
    font-size: 14px;
  }
}
/* 25. 예약 · 결제 */
.steps {
  display: flex;
  align-items: center;
  gap: 0;
}

.steps__i {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.steps__i b {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 12.5px;
  background: var(--n200);
  color: var(--n400);
}

.steps__i span {
  font-weight: 500;
  font-size: 14px;
  color: #A0A9B5;
  white-space: nowrap;
}

.steps__i.is-done b {
  background: var(--brand-300);
  color: #fff;
}

.steps__i.is-done span {
  color: var(--n700);
}

.steps__i.is-on b {
  background: var(--brand-500);
  color: #fff;
}

.steps__i.is-on span {
  font-weight: 700;
  color: var(--n900);
}

.steps__l {
  flex: 1 1 auto;
  height: 1px;
  background: var(--n250);
  margin: 0 12px;
  min-width: 12px;
}

@media (max-width: 767px) {
  .steps__i span {
    font-size: 11.5px;
  }
  .steps__i b {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .steps__l {
    margin: 0 6px;
  }
}
@media (max-width: 479px) {
  .steps__i span {
    display: none;
  }
  .steps__i b {
    width: 28px;
    height: 28px;
  }
}
.fcard {
  background: #fff;
  border: 1px solid var(--n200);
  border-radius: var(--r-lg);
  padding: 24px 28px 28px;
  margin-bottom: 20px;
}

.fcard > h2 {
  margin-bottom: 18px;
}

.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 12px;
  margin-bottom: 14px;
}

.fld {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.fld label {
  font-weight: 500;
  font-size: 13px;
  color: var(--n700);
}

.fld label i {
  font-style: normal;
  font-weight: 700;
  color: var(--sale);
}

.fld input, .fld select, .fld textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--n250);
  border-radius: var(--r-md);
  padding: 13px 14px;
  font-size: 14px;
  background: #fff;
  min-height: 44px;
}

.fld textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.7;
}

.fld input::placeholder, .fld textarea::placeholder {
  color: #A0A9B5;
}

.fgroup {
  background: var(--n050);
  border-radius: 12px;
  padding: 18px 20px 20px;
  margin-bottom: 14px;
}

.fgroup > b {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--n900);
  margin-bottom: 14px;
}

.agree-all {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--n050);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--n900);
  min-height: 44px;
}

.agree {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  min-height: 44px;
  font-size: 13.5px;
}

.agree span {
  flex: 1 1 auto;
  min-width: 0;
}

.agree a {
  font-size: 12px;
  color: var(--n400);
  flex: 0 0 auto;
}

input[type=checkbox] {
  width: 17px;
  height: 17px;
  accent-color: var(--brand-500);
  flex: 0 0 auto;
}

.paybox {
  border: 1px solid var(--n200);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.paylist li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 11px;
  font-size: 13.5px;
  color: var(--n500);
}

.paylist li span {
  flex: 1 1 auto;
  min-width: 0;
}

.paylist li b {
  font-family: var(--ff-num);
  font-weight: 600;
  color: var(--n900);
}

.paylist li b.minus {
  color: var(--sale);
}

.paytotal {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--n200);
}

.paytotal span {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--n900);
}

.paytotal b {
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--sale);
}

.paym__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.paym__grid .chip {
  min-height: 40px;
  padding: 10px 14px;
  font-size: 12.5px;
}

@media (max-width: 767px) {
  .fcard {
    padding: 18px 18px 20px;
  }
  .fgrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .paytotal b {
    font-size: 24px;
  }
}
/* 26. 기획전 */
.hbanner {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 1280/300;
}

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

.hbanner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.15) 70%);
}

.hbanner__c {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.hbanner__d {
  background: #fff;
  border-radius: var(--r-full);
  padding: 5px 13px;
  font-weight: 700;
  font-size: 12.5px;
  color: #C2435E;
}

.hbanner__t {
  font-weight: 900;
  font-size: clamp(22px, 3.6vw, 40px);
  letter-spacing: -0.035em;
  line-height: 1.3;
}

.hbanner__s {
  font-size: clamp(12.5px, 1.4vw, 16px);
  color: #F3DCD5;
  line-height: 1.6;
}

.egrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}

.ecard__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 410/230;
}

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

.ecard__badge {
  position: absolute;
  left: 14px;
  top: 14px;
}

.ecard__body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ecard__t {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: var(--n900);
}

.ecard__s {
  font-size: 13.5px;
  color: var(--n500);
  line-height: 1.6;
}

.ecard__p {
  font-family: var(--ff-num);
  font-weight: 500;
  font-size: 12.5px;
  color: #A0A9B5;
}

@media (max-width: 1023px) {
  .egrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hbanner {
    aspect-ratio: 16/7;
  }
  .hbanner__c {
    left: 28px;
    right: 28px;
  }
}
@media (max-width: 767px) {
  .egrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hbanner {
    aspect-ratio: 343/240;
  }
  .hbanner::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.05) 75%);
  }
  .hbanner__c {
    top: auto;
    bottom: 20px;
    transform: none;
    left: 20px;
    right: 20px;
    gap: 9px;
  }
  .ecard__t {
    font-size: 17px;
  }
}
/* 27. 고객센터 */
.faq-search {
  background: var(--n050);
  border-radius: var(--r-lg);
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.faq-search__f {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, 100%);
  background: #fff;
  border: 1.6px solid var(--brand-500);
  border-radius: var(--r-full);
  padding: 6px 6px 6px 22px;
}

.faq-search__f input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 14px;
  padding: 0;
}

.faq-search__f .btn {
  flex: 0 0 auto;
  border-radius: var(--r-full);
  padding: 10px 22px;
  font-size: 14px;
}

.faq-search__kw {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.faq-search__kw a {
  background: #fff;
  border: 1px solid var(--n200);
  border-radius: var(--r-full);
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--n700);
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--n200);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs a {
  flex: 1 1 0;
  min-width: max-content;
  text-align: center;
  padding: 15px 18px 13px;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--n500);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.tabs .is-on {
  font-weight: 700;
  color: var(--brand-500);
  border-bottom-color: var(--brand-500);
}

.acc {
  border: 1px solid var(--n200);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.acc__i + .acc__i {
  border-top: 1px solid var(--n200);
}

.acc__q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 19px 24px;
  min-height: 44px;
}

.acc__cat {
  flex: 0 0 96px;
  text-align: center;
  background: var(--n100);
  border-radius: 5px;
  padding: 4px 0;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--n500);
}

.acc__q span {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--n900);
}

.acc__q .ico {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
  color: var(--n400);
}

.acc__i.is-open {
  background: #F9FBFD;
}

.acc__i.is-open .acc__q span {
  font-weight: 700;
}

.acc__i.is-open .acc__q .ico {
  transform: rotate(90deg);
}

.acc__a {
  display: none;
  padding: 0 24px 24px 134px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--n700);
}

.acc__i.is-open .acc__a {
  display: block;
}

@media (max-width: 767px) {
  .faq-search {
    padding: 22px 18px;
  }
  .acc__q {
    flex-wrap: wrap;
    padding: 16px 18px;
    gap: 7px;
  }
  .acc__cat {
    flex: 0 0 auto;
    background: none;
    padding: 0;
    text-align: left;
    width: 100%;
    color: var(--n400);
  }
  .acc__q span {
    font-size: 14px;
    flex: 1 1 0;
  }
  .acc__a {
    padding: 0 18px 20px;
  }
}
/* 28. 마이페이지 */
.mytop {
  background: #fff;
  padding-block: 36px;
}

.mytop__inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

.mytop__prof {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.mytop__av {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand-300), var(--brand-900));
}

.mytop__name {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.mytop__name b {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.035em;
  color: var(--n900);
}

.grade {
  background: var(--brand-900);
  color: #FFD9A8;
  border-radius: var(--r-full);
  padding: 5px 12px;
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

.mytop__stats {
  display: flex;
  flex: 0 0 auto;
}

.mytop__stats div {
  width: 132px;
  text-align: center;
  padding: 0 8px;
}

.mytop__stats div + div {
  border-left: 1px solid var(--n200);
}

.mytop__stats span {
  display: block;
  font-size: 12.5px;
  color: var(--n400);
}

.mytop__stats b {
  display: block;
  margin-top: 5px;
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--n900);
}

.mylnb {
  border: 1px solid var(--n200);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 16px 12px;
}

.mylnb__g {
  margin-bottom: 16px;
}

.mylnb__g > b {
  display: block;
  padding: 0 14px;
  font-weight: 700;
  font-size: 12px;
  color: #A0A9B5;
  margin-bottom: 6px;
}

.mylnb a {
  display: block;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--n700);
}

.mylnb .is-on {
  background: var(--brand-100);
  color: var(--brand-700);
  font-weight: 700;
}

.book {
  border: 1px solid var(--n200);
  border-radius: var(--r-lg);
  background: #fff;
  margin-bottom: 20px;
  overflow: hidden;
}

.book__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--n200);
  flex-wrap: wrap;
}

.book__no {
  font-family: var(--ff-num);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--n500);
}

.book__date {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  color: #A0A9B5;
}

.book__body {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
}

.book__media {
  flex: 0 0 148px;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 148/102;
}

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

.book__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.book__t {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: var(--n900);
}

.book__s {
  font-size: 13.5px;
  color: var(--n500);
}

.book__pay {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  color: var(--n400);
}

.book__pay b {
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--n900);
}

.book__btns {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.book__btns .btn {
  width: 100%;
}

@media (max-width: 1023px) {
  .mytop__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .mytop__stats {
    background: var(--n050);
    border-radius: 12px;
    padding: 14px 0;
  }
  .mytop__stats div {
    flex: 1 1 0;
    width: auto;
  }
}
@media (max-width: 767px) {
  .mytop {
    padding-block: 22px;
  }
  .mytop__name b {
    font-size: 20px;
  }
  .mytop__av {
    width: 52px;
    height: 52px;
  }
  .mytop__stats b {
    font-size: 19px;
  }
  .mytop__stats span {
    font-size: 11.5px;
  }
  .book__body {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }
  .book__media {
    flex: 0 0 auto;
    aspect-ratio: 16/9;
  }
  .book__btns {
    flex: 0 0 auto;
    flex-direction: row;
  }
  .book__t {
    font-size: 15px;
  }
  .mylnb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }
  .mylnb__g {
    margin: 0;
    flex: 1 1 100%;
  }
  .mylnb__g > b {
    padding: 0 4px;
  }
  .mylnb__g > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .mylnb a {
    border: 1px solid var(--n200);
    border-radius: var(--r-full);
    padding: 9px 14px;
    font-size: 13px;
  }
}
/* 29. 로그인 */
.login {
  display: flex;
  justify-content: center;
  padding-block: 80px 100px;
  background: var(--n050);
}

.login__card {
  width: min(440px, 100%);
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float);
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.login__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.login__logo .logo__mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.login__logo b {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.035em;
  color: var(--n900);
}

.login__logo p {
  font-size: 13.5px;
  color: var(--n500);
}

.login__f {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login__f input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--n250);
  border-radius: var(--r-md);
  padding: 15px 16px;
  font-size: 14.5px;
  min-height: 44px;
}

.login__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.login__opt label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--n700);
  min-height: 38px;
}

.login__opt a {
  color: var(--n400);
  flex: 0 0 auto;
}

.login__sep {
  height: 1px;
  background: var(--n200);
}

.login__links {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--n500);
}

.login__links i {
  color: var(--n300);
  font-style: normal;
}

@media (max-width: 767px) {
  .login {
    padding-block: 40px 60px;
    background: #fff;
  }
  .login__card {
    box-shadow: none;
    padding: 24px 0 40px;
    border-radius: 0;
  }
}
/* 30. 넘침 수정 (1차 스크립트 검증 후 반영) */
/* [원인 1] .two{align-items:flex-start} — column 전환 시 교차축이 세로폭이 되어
   자식 폭이 fit-content(=max-content)로 잡히면서 뷰포트를 밀어냄.
   → 1023 이하에서 stretch로 되돌리고 자식에 min-width:0 부여 */
.two > * {
  min-width: 0;
}

@media (max-width: 1023px) {
  .two {
    align-items: stretch;
  }
  .two__main, .two__side {
    width: 100%;
  }
}
/* [원인 2] grid item 기본값 min-width:auto — 말줄임(nowrap) 텍스트의
   min-content가 트랙보다 커져 그리드가 벌어짐 */
.info3 > * {
  min-width: 0;
}

.pgrid > *, .egrid > *, .theme > *, .reviews > *, .two-col > *, .fgrid > *, .foot__top > * {
  min-width: 0;
}

/* [원인 3] .sec-head--stack 내부 래퍼에 폭 제약이 없어 자식 max-content가 그대로 노출 */
.sec-head--stack > div {
  min-width: 0;
  width: 100%;
}

.sec-head__t {
  min-width: 0;
}

.h-sec, .h-page, .h-block, .h-card {
  min-width: 0;
}

/* [원인 4] 고객센터 FAQ — 카테고리 라벨 96px 고정 + 질문 nowrap 조합의 min-content 폭.
   1023 이하부터 2줄 배치로 전환 (기존 767 → 1023으로 확대) */
@media (max-width: 1023px) {
  .acc__q {
    flex-wrap: wrap;
    gap: 7px;
  }
  .acc__cat {
    flex: 0 0 auto;
    width: 100%;
    background: none;
    padding: 0;
    text-align: left;
    color: var(--n400);
  }
  .acc__q > span {
    flex: 1 1 0;
    min-width: 0;
  }
  .acc__a {
    padding-left: 24px;
  }
}
/* [원인 5] 예약 카드 헤더 — 예약번호·날짜·링크가 한 줄에 강제되어 min-content 초과 */
.book__head {
  flex-wrap: wrap;
}

.book__no, .book__date {
  min-width: 0;
}

@media (max-width: 767px) {
  .book__date {
    flex: 1 1 100%;
    order: 3;
  }
}
/* [원인 6] 정렬 바 우측 영역이 좁은 폭에서 줄바꿈되지 않음 */
@media (max-width: 1023px) {
  .sortbar {
    flex-wrap: wrap;
    gap: 10px;
  }
  .sortbar__tabs {
    flex: 1 1 100%;
    order: 2;
  }
  .sortbar__right {
    flex: 1 1 100%;
    order: 1;
    justify-content: space-between;
  }
}
/* [원인 7] 목록 카드 이미지 — flex 컨테이너가 column일 때 240px 고정폭이 남아 있음 */
@media (max-width: 767px) {
  .row__media {
    width: 100%;
    flex: 0 0 auto;
  }
}
/* [보강] 479 이하 고정값 한 단계 축소 — clamp 최솟값이 그대로 노출되는 구간 */
@media (max-width: 479px) {
  .cs .tel {
    font-size: 26px;
  }
  .mytop__stats b {
    font-size: 18px;
  }
  .paytotal b {
    font-size: 22px;
  }
  .hero__badge {
    font-size: 12px;
    padding: 6px 12px;
  }
  .quick {
    gap: 6px;
  }
  .foot__stores a {
    padding: 8px 11px;
    font-size: 11.5px;
  }
  .acc__q > span {
    font-size: 13.5px;
  }
}
/* [원인 8] 320에서 퀵 카테고리 5열 — 셀 가용폭 48.8px < 아이콘 46px + 좌우 padding 8px */
@media (max-width: 479px) {
  .quick {
    padding: 20px 8px;
    gap: 6px;
  }
  .quick a {
    padding: 0;
    font-size: 10.5px;
    gap: 7px;
  }
  .quick__ic {
    width: 44px;
    height: 44px;
  }
  .quick__ic .ico {
    width: 20px;
    height: 20px;
  }
}
/* 31. 육안 검증 후 수정 (360 · 320) */
/* [육안 1] 320·360 히어로 — 도톤보리 사진의 밝은 간판 영역과 흰 텍스트가 겹쳐
   서브카피와 아웃라인 버튼이 읽히지 않음. 스크림 농도를 올리고 하단 그라디언트 추가 */
@media (max-width: 1023px) {
  .hero__media::after {
    background: linear-gradient(180deg, rgba(6, 42, 78, 0.55) 0%, rgba(6, 42, 78, 0.42) 40%, rgba(6, 42, 78, 0.72) 100%);
  }
  .btn--ghost-w {
    background: rgba(6, 42, 78, 0.35);
    backdrop-filter: blur(2px);
  }
  .hero__sub {
    color: #EAF2FA;
  }
}
/* [육안 2] 320 마이페이지 — 예약 카드 헤더가 3줄로 늘어지고 "상세보기"가 날짜 위로 올라감.
   날짜와 상세보기를 같은 줄로 묶고 링크를 우측 정렬 */
@media (max-width: 767px) {
  .book__head {
    gap: 6px 10px;
  }
  .book__date {
    flex: 1 1 auto;
    order: 3;
  }
  .book__head > a {
    order: 4;
    margin-left: auto;
  }
}
/* [육안 3] 320 고객센터 — 30번 블록의 `.acc__q > span`이 .acc__cat에도 적용돼
   flex:1 1 0으로 축소되면서 카테고리가 다시 옆줄로 붙음. 선택자를 분리 */
@media (max-width: 1023px) {
  .acc__q > span:not(.acc__cat) {
    flex: 1 1 0;
    min-width: 0;
  }
  .acc__cat {
    flex: 0 0 100% !important;
    width: 100%;
  }
}
/* [보강] 320 프로모션 띠 — 2줄일 때 닫기 버튼과의 간격 확보 */
@media (max-width: 479px) {
  .promo__inner {
    padding-right: 44px;
    text-align: left;
  }
}
/* 32. 터치 타깃 보정 — 최소 높이 38~44px 확보 */
.acts a {
  min-height: 44px;
  justify-content: center;
}

.hero__ind button {
  width: 38px;
  height: 38px;
}

@media (max-width: 479px) {
  .hero__ind button {
    width: 38px;
    height: 38px;
  }
}
.faq-search__kw a,
.book__head > a,
.login__opt a,
.panel__head a,
.crumb a,
.promo__link,
.ecard__body a,
.foot__stores a,
.foot__col a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
}

.foot__col a, .crumb a {
  min-height: 34px;
} /* 푸터·브레드크럼은 밀집 링크라 34px */
.lnb__g label, .agree, .agree-all, .login__opt label {
  min-height: 44px;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
} /* 라벨 전체가 히트 영역(44px)이며, 체크박스 자체도 20px로 확대 */
.tabbar a, .sortbar__tabs a, .tabs a, .anchors a, .paging a, .chip, .btn {
  min-height: 38px;
}

.agree a, .login__links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
}

.finder__kw a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}

.panel li a {
  padding-block: 9px;
} /* 말줄임 유지를 위해 display:block + 세로 패딩으로 38px 확보 */
/* [육안 4] 1440 히어로 — 도톤보리 간판의 고휘도 영역 위에서 흰 카피가 묻힘.
   지침(다크 오버레이 60~75%)에 맞춰 좌측 가로 그라디언트 + 상하 스크림 2겹으로 교체 */
.hero__media::after {
  background: linear-gradient(90deg, rgba(6, 42, 78, 0.86) 0%, rgba(6, 42, 78, 0.68) 38%, rgba(6, 42, 78, 0.28) 72%, rgba(6, 42, 78, 0.18) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(6, 42, 78, 0.5) 100%);
}

@media (max-width: 1023px) {
  .hero__media::after {
    background: linear-gradient(180deg, rgba(6, 42, 78, 0.6) 0%, rgba(6, 42, 78, 0.5) 45%, rgba(6, 42, 78, 0.78) 100%);
  }
}
/* 33. 육안 검증 2차 (768 · 480 · 414) */
/* [육안 5] 480·414 프로모션 띠 — 32번 터치타깃 보정에서 .promo__link에
   display:inline-flex를 주면서 1023 이하 display:none을 덮어써 다시 노출됨.
   결과적으로 닫기 버튼과 겹치고 2줄로 늘어남 */
@media (max-width: 1023px) {
  .promo__link {
    display: none;
  }
}
/* [육안 6] 1023 이하 예약·결제 — .paybox 내부 결제 버튼이 하단 고정 액션바와 중복되고
   액션바에 가려짐. 고정 바가 대체하므로 내부 버튼은 숨김 */
@media (max-width: 1023px) {
  .paybox > button[type=submit],
  .paybox > p:last-child {
    display: none;
  }
}
/* [육안 7] 480 쿠폰 · 포인트 행 — 라벨 74px 고정 때문에 "보유 쿠폰 3장"이 2줄로 접힘 */
.paybox .date b {
  flex: 0 1 auto;
  white-space: nowrap;
}

.paybox .date span {
  text-align: right;
}

/* ==========================================================================
   34. 신규 서브 페이지 (SUB 09~29)
   ========================================================================== */

/* ---------- 34-1. 완료 화면 ---------- */
.done{background:#fff;border-radius:var(--r-xl);padding:52px 32px 44px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.done__ic{width:76px;height:76px;border-radius:var(--r-full);background:var(--brand-100);
  display:grid;place-items:center;color:var(--brand-500)}
.done__ic .ico{width:34px;height:34px;stroke-width:2.6}
.done h1{font-weight:900;font-size:clamp(22px,3vw,30px);letter-spacing:-.035em;line-height:1.3;color:var(--n900)}
.done p{font-size:15px;line-height:1.75;color:var(--n500)}
.done__no{display:inline-flex;align-items:center;gap:14px;background:var(--n050);
  border-radius:12px;padding:16px 28px;flex-wrap:wrap;justify-content:center}
.done__no span{font-weight:500;font-size:14px;color:var(--n500)}
.done__no b{font-family:var(--ff-num);font-weight:700;font-size:24px;letter-spacing:.02em;color:var(--brand-900)}
.done__cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding-top:6px}
@media (max-width:767px){
  .done{padding:36px 20px 30px;border-radius:var(--r-lg)}
  .done p{font-size:13px}
  .done__no{width:100%;flex-direction:column;gap:4px;padding:14px}
  .done__no b{font-size:20px}
  .done__cta{width:100%;flex-direction:column}
  .done__cta .btn{width:100%}
}

/* ---------- 34-2. 상세 정보 카드 · 상태 행 ---------- */
.statusrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.statusrow b{flex:1 1 auto;min-width:0;font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--n900)}
.statusrow span{font-size:12.5px;color:var(--n400)}
.prodrow{display:flex;align-items:center;gap:20px;background:var(--n050);border-radius:12px;padding:16px 24px 16px 16px}
.prodrow__media{flex:0 0 180px;border-radius:var(--r-md);overflow:hidden;aspect-ratio:180/120}
.prodrow__media img{width:100%;height:100%;object-fit:cover}
.prodrow__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}
.prodrow__info b{font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1.45;color:var(--n900)}
.prodrow__info span{font-size:13.5px;color:var(--n500)}
.prodrow__info code{font-family:var(--ff-num);font-size:12px;color:var(--n400)}
@media (max-width:767px){
  .prodrow{flex-direction:column;align-items:stretch;gap:10px;padding:14px}
  .prodrow__media{flex:0 0 auto;aspect-ratio:16/9}
  .prodrow__info b{font-size:15px}
  .prodrow__info span{font-size:12.5px}
}
.sidebtns{display:flex;flex-direction:column;gap:8px}
.sidebtns .btn{width:100%}
.callout{border-radius:var(--r-lg);padding:20px 24px 22px}
.callout--warn{background:var(--warn-bg)}
.callout--warn b{display:block;font-weight:700;font-size:14px;color:var(--warn-tt);margin-bottom:8px}
.callout--warn p,.callout--warn li{font-size:13px;line-height:1.8;color:var(--warn-fg)}
.callout--navy{background:var(--brand-900);color:#fff}
.callout--navy b{display:block;font-weight:700;font-size:16px;letter-spacing:-.02em}
.callout--navy strong{display:block;font-weight:700;font-size:20px;margin-top:6px}
.callout--navy p{margin-top:6px;font-size:12.5px;line-height:1.7;color:var(--brand-300)}
.callout--navy .btn{width:100%;margin-top:14px}

/* ---------- 34-3. 스텝 카드 목록 (취소내역 등) ---------- */
.reclist{display:flex;flex-direction:column;gap:20px}
.rec{border:1px solid var(--n200);border-radius:var(--r-lg);background:#fff;padding:24px 28px 28px;
  display:flex;flex-direction:column;gap:18px}
.rec__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rec__no{font-family:var(--ff-num);font-weight:500;font-size:12.5px;color:var(--n500)}
.rec__date{flex:1 1 auto;min-width:0;font-size:12.5px;color:#A0A9B5}
.rec__prod{display:flex;align-items:center;gap:16px}
.rec__prod .thumb{flex:0 0 120px;border-radius:9px;overflow:hidden;aspect-ratio:3/2}
.rec__prod .thumb img{width:100%;height:100%;object-fit:cover}
.rec__prod b{flex:1 1 auto;min-width:0;font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1.45;color:var(--n900)}
@media (max-width:767px){
  .rec{padding:18px}
  .rec__date{flex:1 1 100%;order:3}
  .rec__prod .thumb{flex:0 0 96px}
  .rec__prod b{font-size:14.5px}
}

/* ---------- 34-4. 중앙 폼 카드 (조회 · 찾기) ---------- */
.formcard{width:min(520px,100%);background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-float);
  padding:44px 48px 40px;display:flex;flex-direction:column;gap:24px;margin:0 auto}
.formcard--wide{width:min(720px,100%);box-shadow:none;border:1px solid var(--n200)}
.formcard__head{text-align:center;display:flex;flex-direction:column;gap:10px}
.formcard__head h1{font-weight:900;font-size:clamp(20px,2.6vw,26px);letter-spacing:-.035em;line-height:1.3;color:var(--n900)}
.formcard__head p{font-size:14px;color:var(--n500)}
.formcard__body{display:flex;flex-direction:column;gap:14px}
.formcard .sel{width:100%;justify-content:space-between}
@media (max-width:767px){
  .formcard,.formcard--wide{padding:24px 0 32px;box-shadow:none;border:0;border-radius:0}
  .formsec{background:#fff}
}
.fld__row{display:flex;gap:8px;align-items:flex-start}
.fld__row .fld{flex:1 1 auto;min-width:0}
.fld__row .btn{flex:0 0 auto;padding:13px 20px;min-height:48px}
.fld__help{font-size:12px;line-height:1.6;color:var(--n400)}
.fld__help--ok{color:var(--brand-500)}
.fld__help--err{color:var(--sale)}
.fld input[readonly]{background:var(--n050);color:var(--n500)}

/* ---------- 34-5. 토글 스위치 ---------- */
.switchrow{display:flex;align-items:center;gap:12px;padding:13px 0;min-height:44px}
.switchrow span{flex:1 1 auto;min-width:0;font-size:14px;color:var(--n700)}
.switch{position:relative;width:46px;height:26px;border-radius:var(--r-full);background:var(--n250);
  flex:0 0 auto;transition:background .15s;cursor:pointer;border:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .15s}
.switch[aria-checked="true"]{background:var(--brand-500)}
.switch[aria-checked="true"]::after{transform:translateX(20px)}

/* ---------- 34-6. 여행자 카드 ---------- */
.tvl__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tvl__head b{flex:1 1 auto;min-width:0;font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--n900)}
.tvl__head a{font-size:13px;color:var(--n500)}
.tvl__grid{display:flex;background:var(--n050);border-radius:12px;padding:16px 24px}
.tvl__grid div{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px}
.tvl__grid div + div{border-left:1px solid var(--n200);padding-left:20px}
.tvl__grid span{font-size:12px;color:var(--n400)}
.tvl__grid b{font-weight:700;font-size:14.5px;color:var(--n900)}
.tvl__grid b.warn{color:var(--accent-600)}
@media (max-width:767px){
  .tvl__grid{flex-direction:column;gap:12px;padding:14px 16px}
  .tvl__grid div + div{border-left:0;border-top:1px solid var(--n200);padding-left:0;padding-top:12px}
  .tvl__grid div{flex-direction:row;align-items:center;gap:12px}
  .tvl__grid span{flex:0 0 84px}
}

/* ---------- 34-7. 쿠폰 ---------- */
.coupons{display:flex;flex-direction:column;gap:16px}
.coupon{display:flex;border:1px solid var(--n200);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.coupon__amt{flex:0 0 180px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;color:#fff;padding:32px 12px;text-align:center}
.coupon__amt b{font-family:var(--ff-num);font-weight:700;font-size:32px;letter-spacing:-.02em;line-height:1.1}
.coupon__amt span{font-weight:500;font-size:13px}
.coupon__body{flex:1 1 auto;min-width:0;padding:26px 28px;display:flex;flex-direction:column;gap:9px}
.coupon__t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.coupon__t b{flex:1 1 auto;min-width:0;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--n900)}
.coupon__cond{font-size:14px;color:var(--n500)}
.coupon__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.coupon__exp{flex:1 1 auto;min-width:0;font-family:var(--ff-num);font-weight:500;font-size:13px;color:var(--n400)}
.coupon__exp.soon{color:var(--sale)}
.couponreg{display:flex;align-items:center;gap:12px;border:1px solid var(--n200);border-radius:14px;
  background:#fff;padding:16px 16px 16px 24px}
.couponreg b{flex:0 0 auto;font-weight:700;font-size:15px;color:var(--n900)}
.couponreg input{flex:1 1 auto;min-width:0;border:1px solid var(--n250);border-radius:var(--r-md);padding:12px 14px;font-size:14px;min-height:44px}
@media (max-width:767px){
  .coupon{flex-direction:column}
  .coupon__amt{flex:0 0 auto;flex-direction:row;justify-content:space-between;padding:18px 20px;text-align:left}
  .coupon__amt b{font-size:24px}
  .coupon__body{padding:16px 20px 20px}
  .coupon__t b{font-size:16px}
  .coupon__cond{font-size:13px}
  .coupon__foot .btn{width:100%}
  .couponreg{padding:0;border:0;gap:8px}
  .couponreg b{display:none}
}

/* ---------- 34-8. 포인트 요약 ---------- */
.psum{display:flex;align-items:center;gap:24px;background:var(--brand-900);color:#fff;
  border-radius:var(--r-lg);padding:32px 36px}
.psum__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.psum__main span{font-size:14px;color:var(--brand-300)}
.psum__val{display:flex;align-items:baseline;gap:6px}
.psum__val b{font-family:var(--ff-num);font-weight:700;font-size:clamp(30px,4vw,44px);letter-spacing:-.02em}
.psum__val i{font-style:normal;font-weight:700;font-size:20px}
.psum__note{font-size:13px;color:#B9CBDD}
.psum__stats{display:flex;flex:0 0 auto}
.psum__stats div{width:150px;text-align:center;display:flex;flex-direction:column;gap:6px;padding:0 8px}
.psum__stats div + div{border-left:1px solid rgba(255,255,255,.18)}
.psum__stats span{font-size:12.5px;color:var(--brand-300)}
.psum__stats b{font-family:var(--ff-num);font-weight:700;font-size:20px}
@media (max-width:1023px){
  .psum{flex-direction:column;align-items:stretch;gap:18px;padding:22px 20px}
  .psum__stats div{flex:1 1 0;width:auto}
  .psum__stats b{font-size:15px}
  .psum__stats span{font-size:11px}
}
/* 포인트 내역 — 767 이하 카드형 */
@media (max-width:767px){
  .tbl--point tr{display:flex;flex-direction:column;gap:6px;padding:15px 16px}
  .tbl--point td{padding:0;display:block}
  .tbl--point td::before{display:none}
  .tbl--point .pt-meta{display:flex;align-items:center;gap:8px}
  .tbl--point .pt-bal{text-align:right;color:#A0A9B5;font-size:11.5px}
}

/* ---------- 34-9. 멤버십 등급 ---------- */
.grade-cur{background:var(--brand-900);color:#fff;border-radius:var(--r-lg);padding:32px 36px;
  display:flex;flex-direction:column;gap:18px}
.grade-cur__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.grade-cur__head b{flex:1 1 auto;min-width:0;font-weight:700;font-size:20px;letter-spacing:-.02em}
.grade-cur__head span{font-size:12.5px;color:var(--brand-300)}
.gbadge{background:#FFD9A8;color:#7A4A12;border-radius:var(--r-full);padding:6px 14px;
  font-family:var(--ff-num);font-weight:700;font-size:13px;letter-spacing:.06em}
.grade-bar{display:flex;flex-direction:column;gap:10px}
.grade-bar__l{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.grade-bar__l span{font-size:13px;color:var(--brand-300)}
.grade-bar__l b{font-family:var(--ff-num);font-weight:700;font-size:20px}
.grade-bar__l em{flex:1 1 auto;min-width:0;text-align:right;font-style:normal;font-size:13px;color:#B9CBDD}
.grade-bar__t{height:10px;border-radius:var(--r-full);background:rgba(255,255,255,.2);overflow:hidden}
.grade-bar__t i{display:block;height:100%;width:80%;border-radius:var(--r-full);background:#FFD9A8}
.tbl--grade tbody tr.is-cur{background:var(--brand-100)}
.tbl--grade tbody tr.is-cur td:first-child{color:var(--brand-700)}
@media (max-width:1023px){ .grade-cur{padding:22px 20px} .grade-cur__head b{font-size:17px} }
@media (max-width:767px){
  .tbl--grade tr{padding:16px}
  .tbl--grade td:first-child{font-family:var(--ff-num);font-size:16px;letter-spacing:.02em}
}

/* ---------- 34-10. 별점 입력 ---------- */
.stars{display:flex;flex-direction:column}
.stars__row{display:flex;align-items:center;gap:20px;padding:14px 0;border-bottom:1px solid var(--n100)}
.stars__row:last-child{border-bottom:0}
.stars__row > b{flex:0 0 150px;font-weight:500;font-size:14px;color:var(--n900)}
.stars__row.is-total > b{font-weight:700;font-size:15px}
.stars__set{flex:1 1 auto;min-width:0;display:flex;gap:4px;color:var(--n200);font-size:20px;letter-spacing:.05em}
.stars__row.is-total .stars__set{font-size:26px}
.stars__set i{font-style:normal}
.stars__set i.on{color:var(--star)}
.stars__row > span{font-family:var(--ff-num);font-weight:700;font-size:14px;color:var(--n900)}
@media (max-width:767px){
  .stars__row{flex-wrap:wrap;gap:8px 12px}
  .stars__row > b{flex:1 1 auto}
  .stars__set{flex:1 1 100%;order:3;font-size:22px;gap:6px}
  .stars__row.is-total .stars__set{font-size:28px}
}
.uploader{display:flex;gap:10px;flex-wrap:wrap}
.uploader__add{width:120px;height:120px;border:1px dashed var(--n250);border-radius:12px;background:var(--n050);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-size:12.5px;color:var(--n400)}
.uploader__add i{font-style:normal;font-size:24px}
.uploader__item{width:120px;height:120px;border-radius:12px;overflow:hidden}
.uploader__item img{width:100%;height:100%;object-fit:cover}
@media (max-width:479px){ .uploader__add,.uploader__item{width:96px;height:96px} }
.charcount{text-align:right;font-family:var(--ff-num);font-weight:500;font-size:12.5px;color:var(--n400)}

/* ---------- 34-11. 문의 아코디언 ---------- */
.acc__status{flex:0 0 84px;text-align:center;border-radius:5px;padding:5px 0;font-weight:700;font-size:12px}
.acc__answer{padding:0 24px 26px calc(24px + 84px + 14px)}
.answerbox{border:1px solid var(--n200);border-radius:12px;background:#fff;padding:20px 24px 22px;
  display:flex;flex-direction:column;gap:10px}
.answerbox__head{display:flex;align-items:center;gap:10px}
.answerbox__head b{flex:0 0 auto;font-weight:700;font-size:13.5px;color:var(--brand-500)}
.answerbox__head time{flex:1 1 auto;min-width:0;font-size:12px;color:#A0A9B5}
.answerbox p{font-size:14px;line-height:1.85;color:var(--n700);white-space:pre-line}
@media (max-width:1023px){
  .acc__status{flex:0 0 auto;padding:5px 9px}
  .acc__answer{padding:0 18px 20px}
}

/* ---------- 34-12. 게시판 (공지) ---------- */
.tbl--board td:nth-child(2){text-align:left}
.board-title{display:flex;align-items:center;gap:10px;min-width:0}
.board-title a{flex:1 1 auto;min-width:0;font-size:14.5px;color:var(--n900)}
.board-title.is-important a{font-weight:700}
@media (max-width:767px){
  .tbl--board tr{display:flex;flex-direction:column;gap:8px;padding:16px}
  .tbl--board td{padding:0;display:block}
  .tbl--board td::before{display:none}
  .tbl--board .bd-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#A0A9B5}
  .tbl--board .bd-no{display:none}
}
.article{border:1px solid var(--n200);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.article__head{background:var(--n050);padding:32px 40px 28px;display:flex;flex-direction:column;gap:14px}
.article__head h1{font-weight:900;font-size:clamp(20px,2.6vw,28px);letter-spacing:-.035em;line-height:1.4;color:var(--n900)}
.article__meta{display:flex;align-items:center;gap:16px;font-family:var(--ff-num);font-weight:500;font-size:13px;color:var(--n500)}
.article__meta .share{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--n400);font-family:var(--ff)}
.article__body{padding:36px 40px 44px;display:flex;flex-direction:column;gap:24px}
.article__body p{font-size:15.5px;line-height:2;color:var(--n700);white-space:pre-line}
.article__body h2{font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--n900)}
.article__nav{border-top:1px solid var(--n200)}
.article__nav div{display:flex;align-items:center;gap:24px;padding:18px 40px}
.article__nav div + div{border-top:1px solid var(--n200)}
.article__nav b{flex:0 0 70px;font-weight:700;font-size:13.5px;color:var(--n400)}
.article__nav a{flex:1 1 auto;min-width:0;font-size:14.5px;color:var(--n700)}
@media (max-width:767px){
  .article__head{padding:22px 18px 20px}
  .article__body{padding:22px 18px 28px}
  .article__body p{font-size:14.5px}
  .article__nav div{padding:14px 18px;gap:14px}
  .article__nav b{flex:0 0 52px;font-size:12px}
  .article__nav a{font-size:13.5px}
}

/* ---------- 34-13. 후기 목록 ---------- */
.ratesum{display:flex;align-items:center;gap:40px;background:var(--n050);border-radius:var(--r-lg);padding:32px 40px}
.ratesum__score{flex:0 0 180px;text-align:center;display:flex;flex-direction:column;gap:6px}
.ratesum__score b{font-family:var(--ff-num);font-weight:700;font-size:52px;letter-spacing:-.02em;color:var(--n900)}
.ratesum__score .s{font-size:17px;color:var(--star)}
.ratesum__score span{font-size:13px;color:var(--n500)}
.ratesum__dist{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:9px}
.ratesum__dist div{display:flex;align-items:center;gap:14px}
.ratesum__dist b{flex:0 0 40px;font-weight:500;font-size:13px;color:var(--n500)}
.ratesum__bar{flex:1 1 auto;min-width:0;height:8px;border-radius:var(--r-full);background:var(--n200);overflow:hidden}
.ratesum__bar i{display:block;height:100%;background:var(--star)}
.ratesum__dist span{flex:0 0 46px;text-align:right;font-family:var(--ff-num);font-weight:600;font-size:13px;color:var(--n900)}
@media (max-width:767px){
  .ratesum{flex-direction:column;gap:18px;padding:22px 20px}
  .ratesum__score{flex:0 0 auto}
  .ratesum__score b{font-size:42px}
  .ratesum__dist{width:100%}
}
.revlist{display:flex;flex-direction:column;gap:16px}
.rev{border:1px solid var(--n200);border-radius:var(--r-lg);background:#fff;padding:24px 28px 26px;
  display:flex;flex-direction:column;gap:14px}
.rev__who{display:flex;align-items:center;gap:12px}
.rev__av{width:42px;height:42px;border-radius:var(--r-full);background:var(--brand-100);flex:0 0 auto}
.rev__meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.rev__name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rev__name b{font-weight:700;font-size:15px;color:var(--n900)}
.rev__name .s{font-size:13px;color:var(--star)}
.rev__name time{font-size:12px;color:#A0A9B5}
.rev__meta > span{font-size:13px;color:var(--brand-500)}
.rev__report{font-size:12.5px;color:var(--n300)}
.rev__txt{font-size:15px;line-height:1.9;color:var(--n700)}
.rev__photos{display:flex;gap:8px;flex-wrap:wrap}
.rev__photos div{width:130px;height:130px;border-radius:10px;overflow:hidden}
.rev__photos img{width:100%;height:100%;object-fit:cover}
.rev__foot{display:flex;align-items:center;gap:10px}
.helpful{display:inline-flex;align-items:center;gap:6px;min-height:38px;border:1px solid var(--n200);
  border-radius:var(--r-full);padding:8px 14px;font-weight:500;font-size:12.5px;color:var(--n700)}
.helpful b{font-family:var(--ff-num);font-weight:700;color:var(--brand-500)}
@media (max-width:767px){
  .rev{padding:18px}
  .rev__txt{font-size:14px}
  .rev__photos div{width:110px;height:110px}
}

/* ---------- 34-14. 준비 가이드 타임라인 ---------- */
.tl{display:flex;flex-direction:column;gap:16px}
.tl__row{display:flex;gap:24px}
.tl__axis{flex:0 0 120px;display:flex;flex-direction:column;align-items:center}
.tl__d{background:var(--brand-900);color:#fff;border-radius:var(--r-full);padding:10px 18px;
  font-family:var(--ff-num);font-weight:700;font-size:15px;letter-spacing:.02em}
.tl__row:first-child .tl__d{background:var(--brand-500)}
.tl__line{flex:1 1 auto;width:2px;background:var(--n200);margin-top:4px}
.tl__card{flex:1 1 auto;min-width:0;border:1px solid var(--n200);border-radius:var(--r-lg);
  background:#fff;padding:24px 28px 26px;display:flex;flex-direction:column;gap:12px}
.tl__card h3{font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--n900)}
.tl__card > p{font-size:14.5px;line-height:1.75;color:var(--n500)}
.checklist{background:var(--n050);border-radius:12px;padding:16px 20px 18px;display:flex;flex-direction:column;gap:10px}
.checklist label{display:flex;align-items:center;gap:10px;min-height:38px;font-size:14px;color:var(--n700)}
@media (max-width:767px){
  .tl__row{flex-direction:column;gap:0}
  .tl__axis{flex:0 0 auto;flex-direction:row;align-items:center;justify-content:flex-start;margin-bottom:-1px;
    position:relative;z-index:1;padding-left:18px}
  .tl__d{padding:6px 13px;font-size:12.5px;border-radius:var(--r-full) var(--r-full) 0 0}
  .tl__line{display:none}
  .tl__card{padding:18px}
  .tl__card h3{font-size:16px}
  .tl__card > p{font-size:13px}
}

/* ---------- 34-15. 약관 · 문서 ---------- */
.doc{display:flex;gap:32px;align-items:flex-start}
.doc__idx{flex:0 0 240px;position:sticky;top:20px;border:1px solid var(--n200);border-radius:var(--r-lg);
  background:#fff;padding:18px 12px}
.doc__idx > b{display:block;padding:0 14px 8px;font-weight:700;font-size:13px;color:#A0A9B5}
.doc__idx a{display:block;min-height:38px;padding:10px 14px;border-radius:9px;font-size:13.5px;color:var(--n700)}
.doc__idx .is-on{background:var(--brand-100);color:var(--brand-700);font-weight:700}
.doc__body{flex:1 1 auto;min-width:0;border:1px solid var(--n200);border-radius:var(--r-lg);
  background:#fff;padding:40px 48px 48px;display:flex;flex-direction:column;gap:32px}
.doc__body section{display:flex;flex-direction:column;gap:12px}
.doc__body h2{font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--n900)}
.doc__body p{font-size:15px;line-height:2;color:var(--n700);white-space:pre-line}
.doc__guide{background:var(--brand-100);border-radius:12px;padding:20px 24px 22px}
.doc__guide b{display:block;font-weight:700;font-size:14px;color:var(--brand-700);margin-bottom:8px}
.doc__guide p{font-size:13.5px;line-height:1.8;color:var(--n700)}
.doc__foot{background:var(--n050);border-radius:12px;padding:20px 24px 22px;display:flex;flex-direction:column;gap:8px}
.doc__foot b{font-weight:700;font-size:15px;color:var(--n900)}
.doc__foot p{font-size:14px;line-height:1.8;color:var(--n500)}
.doc__vers{display:flex;gap:8px;flex-wrap:wrap}
.doc__vers a{background:#fff;border:1px solid var(--n200);border-radius:var(--r-full);
  padding:8px 14px;font-size:12.5px;color:var(--n700);min-height:38px;display:inline-flex;align-items:center}
@media (max-width:1023px){
  .doc{flex-direction:column;gap:16px}
  .doc__idx{position:static;flex:1 1 auto;width:100%;padding:16px 18px;display:flex;flex-wrap:wrap;gap:6px}
  .doc__idx > b{flex:1 1 100%;padding:0 0 4px}
  .doc__idx a{border-radius:var(--r-full);background:var(--n050);padding:8px 12px;font-size:12px}
  .doc__body{padding:22px 18px 28px;gap:24px}
  .doc__body p{font-size:14px}
  .doc__body h2{font-size:16px}
}

/* ---------- 34-16. 검색 결과 헤드 ---------- */
.searchhead{background:var(--n050);padding-block:36px}
.searchhead__q{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.searchhead__q b{font-weight:900;font-size:clamp(22px,3.2vw,34px);letter-spacing:-.035em;line-height:1.3}
.searchhead__q b.kw{color:var(--brand-500)}
.searchhead__q span{font-size:15px;color:var(--n500)}
.searchhead__rel{display:flex;align-items:center;gap:8px;margin-top:18px}
.searchhead__rel b{flex:0 0 auto;font-weight:700;font-size:12.5px;color:var(--n500)}
.searchhead__rel a{background:#fff;border:1px solid var(--n200);border-radius:var(--r-full);
  padding:6px 12px;font-size:12.5px;color:var(--n700);white-space:nowrap;min-height:34px;display:inline-flex;align-items:center}
.tabs__n{font-family:var(--ff-num);font-weight:700;font-size:12.5px;color:var(--n400);margin-left:5px}
.tabs .is-on .tabs__n{color:var(--brand-500)}
@media (max-width:767px){ .searchhead{padding-block:20px} .searchhead__q span{font-size:12.5px} }

/* ---------- 34-17. 마이 메뉴 (모바일 가로 스크롤) ---------- */
.mymenu{display:none}
@media (max-width:767px){
  .mylnb{display:none}
  .mymenu{display:flex;gap:6px}
  .mymenu a{border:1px solid var(--n200);border-radius:var(--r-full);background:#fff;
    padding:9px 13px;font-weight:500;font-size:12.5px;color:var(--n700);white-space:nowrap;
    min-height:38px;display:inline-flex;align-items:center}
  .mymenu .is-on{background:var(--brand-100);border-color:var(--brand-500);color:var(--brand-700);font-weight:700}
}

/* [넘침 9] search.html 연관 검색어 — flex 한 줄인데 가로 스크롤 처리가 없어
   320~480에서 최대 +358px 넘침. 의도적 가로 스크롤로 전환 */
.searchhead__rel{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.searchhead__rel::-webkit-scrollbar{display:none}
.searchhead__rel > *{flex:0 0 auto}
@media (max-width:767px){
  .searchhead__rel{margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
}

/* [육안 8] event-detail 쿠폰 3열 — 인라인 style로 grid-template-columns를 지정해
   767 이하 1열 override가 무시되면서 글자가 세로로 쪼개짐. 클래스로 분리 */
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1023px){ .three-col{grid-template-columns:1fr 1fr} }
@media (max-width:767px){ .three-col{grid-template-columns:1fr} }
.cpn-card{display:flex;align-items:center;gap:16px;border:1px solid var(--n200);
  border-radius:var(--r-lg);background:#fff;padding:24px 24px 24px 28px}
.cpn-card__c{flex:1 1 auto;min-width:0}
.cpn-card__c b{display:block;font-family:var(--ff-num);font-weight:700;font-size:24px;letter-spacing:-.02em}
.cpn-card__c span{display:block;margin-top:6px;font-size:13.5px;color:var(--n700)}
.cpn-card__c em{display:block;margin-top:4px;font-style:normal;font-size:12.5px;color:#A0A9B5}
@media (max-width:479px){ .cpn-card{padding:18px} .cpn-card__c b{font-size:20px} }

/* ==========================================================================
   35. 터치 타깃 보정 (신규 페이지)
   ========================================================================== */
/* 체크박스 자체는 20px이지만 감싸는 label이 히트 영역을 확보한다 */
.checklist label,.agree,.agree-all,.login__opt label,.lnb__g label{min-height:44px}
/* 링크형 액션들 — 세로 패딩으로 38px 확보 */
.tvl__head a,
.rev__report,
.searchhead__rel a,
.board-title a,
.rec__head > a,
.helpful,
.doc__idx a,
.doc__vers a{display:inline-flex;align-items:center;min-height:38px}
/* 토글 스위치 — 시각 크기는 26px 유지하고 히트 영역만 44px로 확장 */
.switch{position:relative}
.switch::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}

/* ==========================================================================
   36. 지침서 재점검 반영
   ========================================================================== */

/* [E-3] 4열 지표를 1열로 떨구면 세로로 길어진다 → 479 이하 2×2 */
@media (max-width:479px){
  .mytop__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 0}
  .mytop__stats div{width:auto;padding:6px 8px}
  .mytop__stats div + div{border-left:0}
  .mytop__stats div:nth-child(even){border-left:1px solid var(--n200)}
  .mytop__stats div:nth-child(n+3){border-top:1px solid var(--n200);padding-top:14px}
  .psum__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 0}
  .psum__stats div{width:auto}
  .psum__stats div + div{border-left:0}
  .psum__stats div:nth-child(even){border-left:1px solid rgba(255,255,255,.18)}
  .psum__stats div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18);padding-top:14px}
}

/* [G-2] 히어로 다크 오버레이 60~75% 기준 — 데스크톱 좌측 86%는 카피 영역 한정이며
   화면 평균 농도는 약 62%. 모바일은 상단 60% → 하단 78% 세로 그라디언트. */


/* ==========================================================================
   37. 지침서 [E-0] 브레이크포인트 5단계 완성
   1440 / 1200 / 1023 / 767 / 479 — 임의로 늘리거나 줄이지 않는다.
   기존 CSS에 1440 단계가 없고 1200 단계가 헤더 2줄뿐이어서 보강한다.
   ※ 이 블록은 파일 맨 뒤에 있으므로 max-width 단독으로 쓰면
      앞서 정의된 1023 / 767 규칙까지 덮어쓴다. 반드시 대역(min~max)으로 한정한다.
   ========================================================================== */

/* [1440 대역] 1201 ~ 1440 — 컨테이너가 max-width 1280 + gutter 40에서
   유동 폭으로 바뀌는 구간. 밀도를 한 단계 낮춘다. */
@media (min-width: 1201px) and (max-width: 1440px) {
  .hero__media { height: 480px; }
  .deal__media { flex: 0 0 460px; }
  .gallery__thumbs { flex: 0 0 280px; }
  .pgrid { gap: 30px 22px; }
  .two { gap: 36px; }
}

/* [1200 대역] 1024 ~ 1200 — 4열 그리드는 유지하고 내부 여백만 줄여
   3열 전환(1023)을 늦춘다. */
@media (min-width: 1024px) and (max-width: 1200px) {
  :root { --sec-pad: 64px; }
  .hero__media { height: 440px; }
  .hero__inner { padding-top: 60px; }
  .deal__media { flex: 0 0 400px; }
  .deal__info { padding: 30px 32px; }
  .gallery__thumbs { flex: 0 0 240px; }
  .pgrid { gap: 28px 20px; }
  .theme { gap: 20px; }
  .egrid { gap: 24px 20px; }
  .two { gap: 32px; }
  .two__side { flex: 0 0 320px; }
  .two--lnb .two__side { flex: 0 0 248px; }
  .info3 { grid-template-columns: 1fr 1fr 320px; }
  .psum__stats div, .mytop__stats div { width: 128px; }
  .coupon__amt { flex: 0 0 152px; }
  .row__media { flex: 0 0 220px; }
  .row__buy { flex: 0 0 180px; }
  .foot__top { grid-template-columns: repeat(4, 1fr) 260px; }
}


/* ==========================================================================
   39. 히어로 배경 잘림 수정
   .hero__media 를 height 480/440px 고정으로 두어, 통합검색 위젯이 겹치는
   하단 249px(1440 기준)에 배경 이미지가 없고 단색만 남았다.
   → 히어로 전 영역을 덮게 하고, 위젯은 그 위에 흰 카드로 얹는다.
   ========================================================================== */
.hero__media { inset: 0; height: auto; }
.hero__media img { height: 100%; }
/* 하단 그라디언트는 위젯 뒤쪽까지 이어지도록 정지점 재조정 */
.hero__media::after {
  background:
    linear-gradient(90deg, rgba(6,42,78,.86) 0%, rgba(6,42,78,.66) 40%, rgba(6,42,78,.30) 74%, rgba(6,42,78,.22) 100%),
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.06) 38%, rgba(6,42,78,.42) 78%, rgba(6,42,78,.58) 100%);
}
@media (max-width: 1023px) {
  .hero__media::after {
    background: linear-gradient(180deg, rgba(6,42,78,.6) 0%, rgba(6,42,78,.48) 42%, rgba(6,42,78,.74) 100%);
  }
}
@media (min-width: 1201px) and (max-width: 1440px) { .hero__media { height: auto; } }
@media (min-width: 1024px) and (max-width: 1200px) { .hero__media { height: auto; } }

/* ============================================================
   [수정] 헤더 고정 + 스크롤 축소
   원인: 헤더 래퍼 .hd 에 position 이 없어(static) 스크롤하면 메뉴가 사라졌다.
   보조 영역(프로모션 배너·유틸 링크)만 접고 로고·검색·GNB 는 유지한다.
   ============================================================ */
.hd{position:sticky;top:0;z-index:60;background:#fff;transition:box-shadow .25s ease}
.hd.is-shrink{box-shadow:0 2px 14px rgba(15,23,42,.10)}
.hd .promo,.hd .util{transition:max-height .25s ease,opacity .2s ease}
.hd.is-shrink .promo,.hd.is-shrink .util{max-height:0;opacity:0;overflow:hidden;border-bottom:0}
.head__inner{transition:padding .25s ease}
.hd.is-shrink .head__inner{padding-top:10px;padding-bottom:10px}
@media (prefers-reduced-motion:reduce){
  .hd,.hd .promo,.hd .util,.head__inner{transition:none}
}
:target{scroll-margin-top:180px}
@media (max-width:1023px){:target{scroll-margin-top:130px}}
/* 프로모션 바: .promo__inner 가 .container 의 좌우 gutter 를 padding:14px 0 으로 덮어써
   좁은 폭에서 문구가 화면 가장자리에 붙던 문제. gutter 를 되살리고 닫기 버튼 자리만 추가 확보 */
.promo__inner{padding-left:var(--gutter);padding-right:calc(var(--gutter) + 28px);padding-top:12px;padding-bottom:12px}
@media (max-width:767px){.promo__inner{padding-right:calc(var(--gutter) + 24px)}}
/* 마이페이지 통계 박스: 좌우 padding 0 이라 글자가 박스 모서리에 8px 까지 붙던 문제 */
.mytop__stats{padding-left:16px;padding-right:16px}
/* 연관 검색어 스트립: margin-inline -16 으로 화면 끝까지 흘리되, 내용은 gutter 안쪽에서 시작하게 */
.searchhead__rel{padding-left:var(--gutter);padding-right:var(--gutter)}