/* 후포수산 디자인 시스템 (WORK 02) — 자체 CSS, 외부 CDN 없음
   정보 계층이 분명한 카드형 모바일 퍼스트 UI. 특정 상용 서비스의 로고·에셋은 쓰지 않는다. */
@import url('../fonts/pretendard/pretendardvariable-dynamic-subset.css');

:root {
  --c-primary: #0F2453;
  --c-primary-press: #0A1A3D;
  --c-primary-soft: #E9EDF6;
  --c-text: #191F28;
  --c-text-sub: #6B7684;
  --c-text-weak: #8B95A1;
  --c-bg: #FFFFFF;
  --c-bg-soft: #F7F8FA;
  --c-line: #E5E8EB;
  --c-crab: #E53935;
  --c-crab-soft: #FDECEB;
  --c-warn: #B25E00;
  --c-warn-soft: #FFF4E5;
  --c-danger: #D22030;
  --c-success: #0F8A4F;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --shadow-card: 0 2px 10px rgba(25, 31, 40, .06);
  --header-h: 56px;
  --cta-h: 76px;
  --container: 1160px;
  --touch: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-md); line-height: 1.6; color: var(--c-text); background: var(--c-bg); word-break: keep-all; overflow-wrap: anywhere; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.35; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; border-radius: 4px; }
.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; }
.skip-link { position: absolute; left: 8px; top: -60px; background: var(--c-text); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); z-index: 100; }
.skip-link:focus { top: 8px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.section { padding: var(--sp-10) 0; }
.section--soft { background: var(--c-bg-soft); }
.section__title { font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--sp-2); }
.section__desc { color: var(--c-text-sub); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.stack > * + * { margin-top: var(--sp-3); }

/* 시안 배너 */
.preview-bar { background: #222A35; color: #fff; font-size: var(--fs-xs); padding: 6px 0; }
.preview-bar .container { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.preview-bar a { color: #FFB4AE; }

/* 헤더 */
.header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--c-line); }
.header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; min-height: var(--touch); }
.logo img { height: 32px; width: auto; }
.header__nav { display: flex; align-items: center; gap: var(--sp-1); }
.header__link { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--sp-3); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-sub); border-radius: var(--r-sm); }
.header__link:hover { background: var(--c-bg-soft); color: var(--c-text); }
.icon-btn { width: var(--touch); height: var(--touch); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer; color: var(--c-text); }
.icon-btn:hover { background: var(--c-bg-soft); }
.menu-panel { border-top: 1px solid var(--c-line); background: #fff; }
.menu-panel[hidden] { display: none; }
.menu-panel ul { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.menu-panel a { display: flex; align-items: center; min-height: var(--touch); padding: 0 var(--sp-5); text-decoration: none; font-weight: 600; }

/* 버튼 */
.btn { --bh: 52px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--bh); padding: 0 var(--sp-5); border-radius: var(--r-md); border: 0; font: inherit; font-weight: 700; font-size: var(--fs-md); text-decoration: none; cursor: pointer; transition: background .15s, transform .05s; user-select: none; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--c-primary-press); }
.btn--secondary { background: var(--c-primary-soft); color: var(--c-primary); }
.btn--ghost { background: var(--c-bg-soft); color: var(--c-text); }
.btn--sm { --bh: 40px; font-size: var(--fs-sm); padding: 0 var(--sp-4); border-radius: var(--r-sm); }
.btn--lg { --bh: 56px; font-size: var(--fs-lg); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { background: #E5E8EB; color: #8B95A1; cursor: not-allowed; }
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading::after { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 배지 */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; line-height: 20px; white-space: nowrap; }
.badge--crab { background: var(--c-crab-soft); color: #C23A29; }
.badge--blue { background: var(--c-primary-soft); color: var(--c-primary); }
.badge--gray { background: var(--c-bg-soft); color: var(--c-text-sub); }
.badge--draft { background: var(--c-warn-soft); color: var(--c-warn); border: 1px dashed #E0A050; }

/* 카드 */
.card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.card--flat { box-shadow: none; border: 1px solid var(--c-line); }
.card__body { padding: var(--sp-5); }
.card__title { font-size: var(--fs-lg); font-weight: 700; }
.card__sub { color: var(--c-text-sub); font-size: var(--fs-sm); }

/* 이미지 프레임: 비율 고정으로 레이아웃 흔들림 방지 */
.frame { position: relative; background: var(--c-bg-soft); overflow: hidden; }
.frame--square { aspect-ratio: 1 / 1; }
.frame--wide { aspect-ratio: 4 / 3; }
.frame--hero { aspect-ratio: 4 / 5; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame__tag { position: absolute; left: 8px; top: 8px; }
.frame--empty { display: flex; align-items: center; justify-content: center; color: var(--c-text-weak); font-size: var(--fs-sm); text-align: center; padding: var(--sp-4); border: 1px dashed var(--c-line); }

/* 히어로 */
.hero { position: relative; }
.hero__media { border-radius: 0; }
.hero__copy { position: absolute; inset: auto 0 0 0; padding: var(--sp-8) var(--sp-5) var(--sp-6); color: #fff; background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0)); }
.hero__eyebrow { font-size: var(--fs-sm); font-weight: 600; opacity: .92; }
.hero__title { font-size: var(--fs-2xl); font-weight: 800; margin: var(--sp-1) 0 var(--sp-4); }
.hero--noimg .hero__copy { position: static; color: var(--c-text); background: var(--c-bg-soft); }

/* 상품 카드 */
.product-card { display: grid; grid-template-columns: 1fr; text-decoration: none; }
.product-card__body { padding: var(--sp-5); display: grid; gap: var(--sp-2); }
.price { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; }
.price--pending { font-size: var(--fs-md); color: var(--c-text-sub); font-weight: 700; }
.muted { color: var(--c-text-sub); font-size: var(--fs-sm); }

/* 신뢰 정보 */
.trust { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.trust__item { padding: var(--sp-5); border-radius: var(--r-md); background: #fff; border: 1px solid var(--c-line); }
.trust__item h3 { font-size: var(--fs-md); margin-bottom: var(--sp-1); }

/* 가로 스크롤 갤러리 */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rail > * { scroll-snap-align: start; border-radius: var(--r-md); }
.rail figcaption { font-size: var(--fs-sm); color: var(--c-text-sub); padding: var(--sp-2) 2px 0; }

/* 상품 상세 갤러리 */
.gallery { position: relative; }
.gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track > * { scroll-snap-align: start; }
.gallery__dots { display: flex; gap: 6px; justify-content: center; padding: var(--sp-3) 0; }
.gallery__dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: #D1D6DB; cursor: pointer; }
.gallery__dot[aria-current="true"] { background: var(--c-text); width: 20px; border-radius: 4px; }
.gallery__count { position: absolute; right: 12px; bottom: 56px; background: rgba(0,0,0,.55); color: #fff; font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); }

/* 정보 목록 */
.info-list { margin: 0; display: grid; grid-template-columns: 96px 1fr; border-top: 1px solid var(--c-line); }
.info-list dt, .info-list dd { margin: 0; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.info-list dt { color: var(--c-text-sub); }
.info-list dd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pending { color: var(--c-text-weak); }

/* 알림 */
.notice { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); }
.notice--warn { background: var(--c-warn-soft); color: #7A4100; }
.notice--info { background: var(--c-primary-soft); color: #0F2453; }
.notice--danger { background: #FDECEE; color: #9E1422; }

/* 폼 */
.field { display: grid; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: 700; }
.field__label .req { color: var(--c-crab); margin-left: 2px; }
.input, .select, .textarea { width: 100%; min-height: var(--touch); padding: 12px 14px; font: inherit; font-size: var(--fs-md); color: var(--c-text); background: var(--c-bg-soft); border: 1.5px solid transparent; border-radius: var(--r-md); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-primary); background: #fff; }
.input[aria-invalid="true"] { border-color: var(--c-danger); background: #fff; }
.field__help { font-size: var(--fs-xs); color: var(--c-text-sub); }
.field__error { font-size: var(--fs-xs); color: var(--c-danger); font-weight: 600; }
.check { display: flex; gap: var(--sp-3); align-items: flex-start; min-height: var(--touch); padding: var(--sp-2) 0; cursor: pointer; font-size: var(--fs-sm); }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--c-primary); flex: none; }

/* 수량 */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.stepper button { width: 44px; height: 44px; border: 0; background: #fff; font-size: 20px; cursor: pointer; color: var(--c-text); }
.stepper button:disabled { color: #C5CCD3; cursor: not-allowed; }
.stepper output { min-width: 40px; text-align: center; font-weight: 700; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-3) 0; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 10px; height: 10px; border-right: 2px solid var(--c-text-sub); border-bottom: 2px solid var(--c-text-sub); transform: rotate(45deg); transition: transform .15s; flex: none; margin-right: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding: 0 0 var(--sp-4); color: var(--c-text-sub); font-size: var(--fs-sm); }

/* 하단 고정 구매 영역 (안전영역 반영) */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid var(--c-line); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); }
.cta-bar__inner { max-width: var(--container); margin: 0 auto; display: flex; gap: var(--sp-3); align-items: center; }
.cta-bar__sum { flex: 1; min-width: 0; }
.cta-bar__sum strong { display: block; font-size: var(--fs-lg); line-height: 1.3; }
.cta-bar__sum .muted { font-size: var(--fs-xs); }
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.cta-bar .btn { flex: 0 0 auto; min-width: 160px; }
.has-cta .footer { padding-bottom: calc(var(--sp-10) + var(--cta-h) + env(safe-area-inset-bottom)); }

/* 스켈레톤·빈 상태 */
.skeleton { background: linear-gradient(90deg, #EEF0F3 25%, #F6F7F9 37%, #EEF0F3 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.empty { text-align: center; padding: var(--sp-12) var(--sp-5); color: var(--c-text-sub); }
.empty svg { margin: 0 auto var(--sp-3); color: #C5CCD3; }

/* 푸터 */
.footer { background: var(--c-bg-soft); color: var(--c-text-sub); font-size: var(--fs-xs); padding: var(--sp-8) 0 var(--sp-10); margin-top: var(--sp-10); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-4); }
.footer__links a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; font-weight: 600; color: var(--c-text); font-size: var(--fs-sm); }
.footer__biz { line-height: 1.8; }

/* 디자인 시스템 카탈로그 */
.ds-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.swatch { border-radius: var(--r-md); border: 1px solid var(--c-line); overflow: hidden; font-size: var(--fs-xs); }
.swatch__chip { height: 64px; }
.swatch__meta { padding: var(--sp-2); }
.ds-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* 태블릿 768px+ */
@media (min-width: 768px) {
  .container { padding: 0 var(--sp-8); }
  .section { padding: var(--sp-12) 0; }
  .frame--hero { aspect-ratio: 16 / 9; }
  .hero__title { font-size: 36px; }
  .product-card { grid-template-columns: 1fr 1fr; }
  .trust { grid-template-columns: repeat(3, 1fr); }
  .rail { grid-auto-columns: 40%; }
  .product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; padding-top: var(--sp-6); }
  .product-layout .gallery { border-radius: var(--r-lg); overflow: hidden; }
}
/* PC 1280px+ */
@media (min-width: 1280px) {
  .frame--hero { aspect-ratio: 21 / 9; }
  .rail { grid-auto-columns: calc((100% - 2 * var(--sp-3)) / 3); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* 유틸리티 (CSP 상 인라인 style 금지 → 클래스로) */
.fig { margin: 0; }
.frame--round { border-radius: var(--r-md); }
.frame--fill { height: 100%; }
.hero__draft { margin: -8px 0 12px; font-size: 13px; }
.pt-3 { padding-top: var(--sp-3); }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.fs-lg { font-size: var(--fs-lg); } .fs-xl { font-size: var(--fs-xl); } .fs-2xl { font-size: var(--fs-2xl); }
.product-title { font-size: var(--fs-xl); font-weight: 800; }
.product-info { padding-top: var(--sp-4); }
.debug { text-align: left; white-space: pre-wrap; font-size: 12px; background: var(--c-bg-soft); padding: var(--sp-3); border-radius: var(--r-sm); overflow: auto; }
.sk-img { height: 160px; } .sk-line { height: 16px; } .sk-line--short { width: 60%; }
.swatch--primary { background: var(--c-primary); } .swatch--text { background: var(--c-text); } .swatch--text-sub { background: var(--c-text-sub); }
.swatch--bg { background: var(--c-bg); } .swatch--bg-soft { background: var(--c-bg-soft); } .swatch--crab { background: var(--c-crab); }
.swatch--warn { background: var(--c-warn); } .swatch--danger { background: var(--c-danger); }

/* CI(2026-11 시안) 아이콘·로고 */
.header__link--icon { display: inline-flex; align-items: center; gap: 6px; }
.header__link--icon img { width: 24px; height: 24px; }
.icon-btn img { width: 26px; height: 26px; }
.trust__icon { width: 44px; height: 44px; margin-bottom: var(--sp-2); }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); padding-top: var(--sp-5); padding-bottom: var(--sp-2); }
.quick__item { display: grid; justify-items: center; gap: 4px; padding: var(--sp-3) var(--sp-1); border-radius: var(--r-md); background: #fff; border: 1px solid var(--c-line); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; min-height: var(--touch); }
.quick__item:hover { border-color: var(--c-primary); }
.footer__logo { height: 28px; width: auto; margin-bottom: var(--sp-4); }

/* ---- 주문·결제·조회 화면 ---- */
.narrow { max-width: 640px; }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-4); }
.page-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.page-head .section__title { margin: 0; }
.form-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; margin-top: var(--sp-3); }
.span-2 { grid-column: 1 / -1; }
.order-line { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0; }
.order-line__body { flex: 1; display: grid; }
.qty-select .select { min-width: 88px; }
.summary { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.summary > div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.summary dt { color: var(--c-text-sub); }
.summary dd { margin: 0; text-align: right; }
.summary__total { border-top: 1px solid var(--c-line); padding-top: var(--sp-3); font-size: var(--fs-lg); font-weight: 800; }
.summary__total dt { color: var(--c-text); }
.summary__total dd { color: var(--c-crab); }
.zip-row { display: flex; gap: var(--sp-2); }
.zip-row .input { max-width: 140px; }
.zip-layer { border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.zip-layer__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--c-bg-soft); }
.zip-layer__body { height: 440px; }
.agree-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.cta-inline { position: sticky; bottom: 0; padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom)); background: linear-gradient(to top, #fff 70%, rgba(255,255,255,0)); }
.result { display: grid; justify-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-6) 0 var(--sp-2); }
.link-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.link-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
.link-list li:last-child { border-bottom: 0; }
.link-list a { display: grid; text-decoration: none; }
.steps { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); text-align: center; font-size: var(--fs-xs); color: var(--c-text-weak); }
.steps li { display: grid; justify-items: center; gap: 4px; opacity: .45; }
.steps li.is-done { opacity: 1; color: var(--c-text); font-weight: 700; }
.popup-help { font-size: var(--fs-sm); }
.popup-help summary { cursor: pointer; color: var(--c-text-sub); }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } }

/* ---- 관리자 ---- */
.admin { background: var(--c-bg-soft); min-height: 100vh; }
.admin-top { position: sticky; top: 0; z-index: 30; background: var(--c-primary); color: #fff; }
.admin-top__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 56px; }
.admin-top__inner img { height: 26px; width: auto; }
.admin-top__who { margin-left: auto; font-size: var(--fs-sm); opacity: .9; display: flex; gap: var(--sp-3); align-items: center; }
.admin-top__who button { background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: var(--r-sm); padding: 6px 10px; font: inherit; cursor: pointer; }
.admin-nav { display: flex; gap: 2px; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--c-line); }
.admin-nav a { flex: none; padding: 12px 14px; text-decoration: none; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-sub); border-bottom: 3px solid transparent; }
.admin-nav a.is-active { color: var(--c-primary); border-bottom-color: var(--c-crab); }
.admin-main { padding: var(--sp-5) 0 var(--sp-12); }
.admin-main h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.admin-main h2 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-3); }
.panel { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.kpi { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-4); }
.kpi b { display: block; font-size: var(--fs-2xl); line-height: 1.2; color: var(--c-primary); }
.kpi span { font-size: var(--fs-sm); color: var(--c-text-sub); }
.kpi--alert b { color: var(--c-crab); }
.tbl-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--c-line); text-align: left; white-space: nowrap; vertical-align: top; }
.tbl th { background: var(--c-bg-soft); font-weight: 700; color: var(--c-text-sub); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; }
.tbl a { color: var(--c-primary); font-weight: 600; }
.tbl td.wrap { white-space: normal; min-width: 220px; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: end; margin-bottom: var(--sp-3); }
.toolbar .input, .toolbar .select { min-height: 40px; padding: 8px 10px; width: auto; }
.st { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: var(--c-bg-soft); color: var(--c-text-sub); }
.st--ok { background: #E7F6EE; color: var(--c-success); }
.st--warn { background: var(--c-warn-soft); color: var(--c-warn); }
.st--bad { background: #FDECEE; color: var(--c-danger); }
.st--info { background: var(--c-primary-soft); color: var(--c-primary); }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px var(--sp-3); font-size: var(--fs-sm); margin: 0; }
.kv dt { color: var(--c-text-sub); }
.kv dd { margin: 0; word-break: break-all; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--c-text); color: #fff; padding: 12px 18px; border-radius: var(--r-md); font-size: var(--fs-sm); z-index: 100; max-width: 90vw; }
.toast--bad { background: var(--c-danger); }
.login-box { max-width: 380px; margin: 12vh auto 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-6); }
.login-box img { height: 36px; width: auto; margin: 0 auto var(--sp-6); }
.json-edit { width: 100%; min-height: 120px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
@media (min-width: 768px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
/* hidden 속성은 display 지정보다 우선 */
[hidden] { display: none !important; }
/* .container 와 .section 을 함께 쓸 때 좌우 여백 유지 */
.container.section { padding-left: var(--sp-5); padding-right: var(--sp-5); }
.check > span { flex: 1; }

/* ---- 기승전결 스토리 ---- */
.btn--crab { background: var(--c-crab); color: #fff; }
.btn--crab:hover:not(:disabled) { background: #C62828; }
.btn--glass { background: rgba(255,255,255,.16); color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.btn-row > .btn { flex: 1 1 auto; }
.btn-row--center { justify-content: center; }
.text-right { text-align: right; }
.hero--story .hero__copy { padding-bottom: var(--sp-8); background: linear-gradient(to top, rgba(15,36,83,.88) 0%, rgba(15,36,83,.55) 45%, rgba(0,0,0,0) 100%); }
.hero--story .hero__title { font-size: 30px; line-height: 1.3; margin-bottom: var(--sp-2); }
.hero__sub { font-size: var(--fs-md); opacity: .92; margin-bottom: var(--sp-4); max-width: 520px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-4); }
.chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); color: #fff; font-size: var(--fs-sm); font-weight: 600; }
.chip--price { background: #fff; color: var(--c-crab); font-weight: 800; }
.hero__ctas { display: flex; gap: var(--sp-2); }
.hero__ctas .btn { flex: 1; }
.hero--noimg .chip { background: var(--c-bg); color: var(--c-text); }
.cutoff { background: var(--c-crab-soft); color: var(--c-crab); font-size: var(--fs-sm); padding: 10px 0; }
.cutoff .container { display: flex; gap: var(--sp-2); align-items: center; }
.story { padding: var(--sp-12) 0; }
.story__eyebrow { color: var(--c-crab); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .02em; margin-bottom: var(--sp-2); }
.story__title { font-size: 26px; font-weight: 800; line-height: 1.35; margin-bottom: var(--sp-6); }
.steps-photo { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-6); }
.step-card { position: relative; }
.step-card .frame { margin-bottom: var(--sp-3); }
.step-card__no { display: inline-block; font-size: var(--fs-sm); font-weight: 800; color: #fff; background: var(--c-primary); border-radius: var(--r-pill); padding: 2px 10px; margin-bottom: var(--sp-2); }
.step-card h3 { font-size: var(--fs-lg); margin-bottom: 4px; }
.bignums { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.bignums > div { background: #fff; border-radius: var(--r-md); padding: var(--sp-5) var(--sp-4); display: grid; gap: 2px; border: 1px solid var(--c-line); }
.bignums b { font-size: 24px; font-weight: 800; color: var(--c-primary); line-height: 1.2; }
.bignums span { font-size: var(--fs-sm); color: var(--c-text-sub); }
.bignums small { justify-self: start; margin-top: 4px; }
.eat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.eat-card figcaption { word-break: keep-all; }
.eat-card { margin: 0; }
.eat-card--big { grid-column: 1 / -1; }
.eat-card--big .frame--square { aspect-ratio: 4 / 3; }
.eat-card figcaption { font-size: var(--fs-sm); color: var(--c-text-sub); margin-top: 6px; }
.howto { background: var(--c-bg-soft); border-radius: var(--r-lg); padding: var(--sp-5); }
.howto h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.howto ol, .timeline, .flow { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.howto li, .timeline li, .flow li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.howto li div, .timeline li div, .flow li div { display: grid; gap: 2px; }
.howto li span, .timeline li span, .flow li span { font-size: var(--fs-sm); color: var(--c-text-sub); }
.timeline li { background: #fff; border-radius: var(--r-md); padding: var(--sp-4); border: 1px solid var(--c-line); }
.assure { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.assure__item { display: grid; gap: 4px; padding: var(--sp-5); background: #fff; border-radius: var(--r-md); border: 1px solid var(--c-line); text-decoration: none; }
.assure__item span { font-size: var(--fs-sm); color: var(--c-text-sub); }
.final-cta { background: var(--c-primary); color: #fff; text-align: center; padding: var(--sp-12) 0; }
.final-cta .container { display: grid; justify-items: center; gap: var(--sp-3); }
.final-cta h2 { font-size: 26px; font-weight: 800; }
.final-cta__price b { font-size: var(--fs-xl); }
.points { list-style: none; padding: 0; margin: var(--sp-2) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.points li { display: flex; gap: var(--sp-2); align-items: center; background: var(--c-bg-soft); border-radius: var(--r-md); padding: var(--sp-3); }
.points li span { display: grid; font-size: 13px; color: var(--c-text-sub); line-height: 1.4; }
.points li b { color: var(--c-text); font-size: var(--fs-sm); }
@media (min-width: 768px) {
  .hero--story .hero__title { font-size: 44px; }
  .story__title { font-size: 34px; }
  .steps-photo { grid-template-columns: repeat(3, 1fr); }
  .bignums { grid-template-columns: repeat(4, 1fr); }
  .eat-grid { grid-template-columns: 2fr 1fr 1fr; }
  .eat-card--big { grid-column: auto; grid-row: span 2; }
  .eat-card--big .frame--square { aspect-ratio: auto; height: 100%; }
  .assure { grid-template-columns: repeat(3, 1fr); }
  .timeline { grid-template-columns: repeat(4, 1fr); }
  .timeline li { flex-direction: column; }
  .hero__ctas .btn { flex: 0 0 auto; min-width: 180px; }
}

/* ---- 판매 파트너 ---- */
.p-hero { background: linear-gradient(160deg, var(--c-primary) 0%, #1B3A7A 100%); color: #fff; padding: var(--sp-12) 0 var(--sp-10); text-align: center; }
.p-hero .container { display: grid; justify-items: center; }
.p-hero__eyebrow { font-weight: 700; opacity: .85; margin-top: var(--sp-3); }
.p-hero__title { font-size: 30px; font-weight: 800; line-height: 1.3; margin: var(--sp-2) 0 var(--sp-3); }
.p-hero__desc { opacity: .9; max-width: 440px; }
.p-hero__fee { margin-top: var(--sp-5); background: #fff; color: var(--c-text); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-6); display: grid; gap: 2px; }
.p-hero__fee span { font-size: var(--fs-sm); color: var(--c-text-sub); }
.p-hero__fee strong { font-size: 28px; color: var(--c-crab); font-weight: 800; }
.p-hero .btn--ghost { background: rgba(255,255,255,.12); color: #fff; }
.p-hero .btn--block { max-width: 420px; }
.flow li { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-4); }
.flow em { font-style: normal; color: var(--c-crab); font-weight: 700; }
.rule-list { padding-left: 1.1em; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-sub); margin: 0; }
.rule-list b { color: var(--c-text); }
.p-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.copy-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.copy-row .input { font-size: var(--fs-sm); }
.terms h2 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-2); }
.terms p, .terms li { font-size: var(--fs-sm); color: var(--c-text-sub); }
.terms ol { padding-left: 1.2em; display: grid; gap: 6px; }
.kpis .kpi b { font-size: var(--fs-xl); }

/* 하단 사업자 정보: 연한 회색·작은 글씨(사장님 요청) */
.footer__biz { color: #B0B8C1; font-size: 11px; line-height: 1.75; }
.footer__biz p { margin: 0; }

/* ---- 상세페이지 8개 구간 ---- */
.frame__tag--r { left: auto; right: 10px; }
.buybox { background: var(--c-bg-soft); border-radius: var(--r-md); padding: var(--sp-4); }
.buybox .summary { margin-top: var(--sp-2); }
.free-hint { margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: var(--c-crab); }
.dnav { display: flex; gap: 6px; overflow-x: auto; padding-top: var(--sp-4); padding-bottom: var(--sp-2); position: sticky; top: var(--header-h); background: #fff; z-index: 20; }
.dnav a { flex: none; padding: 8px 12px; border-radius: var(--r-pill); background: var(--c-bg-soft); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.dsec { padding: var(--sp-10) 0; scroll-margin-top: 110px; }
.dsec__title { font-size: 24px; font-weight: 800; line-height: 1.35; margin-bottom: var(--sp-4); }
.dsec__body { margin-bottom: var(--sp-2); color: var(--c-text); }
.dsec__note { font-size: 12px; color: var(--c-text-weak); margin: var(--sp-2) 0 var(--sp-4); }
.dphoto { margin: 0 0 var(--sp-3); position: relative; }
.dphoto figcaption { font-size: 12px; margin-top: 4px; }
.dphoto-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.dphoto-strip .dphoto { scroll-snap-align: start; }
.bignums--3 { grid-template-columns: repeat(3, 1fr); margin: var(--sp-4) 0; }
.bignums--3 b { font-size: 18px; }
.shipbox { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.shipbox > div { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: var(--sp-3); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.shipbox span { color: var(--c-text-sub); font-size: var(--fs-sm); }
.dsteps { list-style: none; counter-reset: s; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-3); }
.dsteps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 2px var(--sp-3); align-items: start; }
.dsteps li::before { content: counter(s); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.dsteps li span { color: var(--c-text-sub); font-size: var(--fs-sm); }
.req { color: var(--c-crab); }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.thumb { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--c-bg-soft); display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb b { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 0 5px; border-radius: 4px; }
.thumb--off { outline: 2px dashed var(--c-crab); opacity: .6; }
@media (min-width: 768px) { .dphoto-strip { grid-auto-columns: 23%; } .dsec__title { font-size: 30px; } .shipbox { grid-template-columns: repeat(3, 1fr); } }

/* 에디터 본문(상세 구간) */
.rich { color: var(--c-text); margin-bottom: var(--sp-3); }
.rich p { margin: 0 0 var(--sp-2); }
.rich h1, .rich h2, .rich h3, .rich h4 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-lg); }
.rich ul, .rich ol { padding-left: 1.3em; margin: var(--sp-2) 0 var(--sp-3); display: grid; gap: 6px; }
.rich img { width: 100%; height: auto; border-radius: var(--r-md); margin: var(--sp-2) 0; }
.rich blockquote { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); background: var(--c-bg-soft); border-radius: var(--r-md); color: var(--c-text-sub); }
.rich table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--sp-3) 0; }
.rich th, .rich td { border: 1px solid var(--c-line); padding: 8px; text-align: left; }
.rich a { color: var(--c-primary); }
.rich--steps ol li::marker { color: var(--c-primary); font-weight: 800; }
.editor-box { background: #fff; border-radius: var(--r-sm); }
.editor-box.is-uploading { opacity: .6; pointer-events: none; }

/* ==== 관리자 대시보드 레이아웃 ==== */
body.admin { background: #F2F4F7; }
.adm { --side: 248px; --side-mini: 68px; display: block; min-height: 100vh; }
.ico { flex: none; }
.adm-side { position: fixed; inset: 0 auto 0 0; width: var(--side); background: var(--c-primary); color: #DCE3F0; display: flex; flex-direction: column; z-index: 60; transition: width .18s, transform .2s; overflow: hidden; }
.adm-side__brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); min-height: 60px; }
.adm-logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; white-space: nowrap; }
.adm-logo img { width: 34px; height: auto; }
.adm-iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.adm-iconbtn:hover { background: rgba(127,140,160,.18); }
.adm-menu { flex: 1; overflow-y: auto; padding: 10px 8px; display: grid; align-content: start; gap: 2px; }
.adm-menu__top { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; text-align: left; }
.adm-menu__top:hover { background: rgba(255,255,255,.07); color: #fff; }
.adm-menu__top.is-active, .adm-menu__group.is-active > .adm-menu__top { color: #fff; background: rgba(255,255,255,.1); }
.adm-menu__group.is-active > .adm-menu__top .ico:first-child, .adm-menu__top.is-active .ico { color: #FF8A80; }
.adm-menu__chev { margin-left: auto; transition: transform .15s; opacity: .7; }
.adm-menu__group.is-open .adm-menu__chev { transform: rotate(90deg); }
.adm-menu__sub { display: none; padding: 2px 0 6px 44px; }
.adm-menu__group.is-open .adm-menu__sub { display: grid; }
.adm-menu__sub a { padding: 7px 10px; border-radius: 8px; color: #B7C2D6; text-decoration: none; font-size: 13px; white-space: nowrap; }
.adm-menu__sub a:hover { color: #fff; }
.adm-menu__sub a.is-active { color: #fff; font-weight: 700; background: rgba(229,57,53,.22); }
.adm-side__foot { padding: 10px 8px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.adm-side__foot a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #B7C2D6; text-decoration: none; font-size: 13px; border-radius: 10px; white-space: nowrap; }
.adm-side__foot a:hover { background: rgba(255,255,255,.07); color: #fff; }
.adm-body { margin-left: var(--side); transition: margin .18s; min-width: 0; }
.adm.is-collapsed .adm-side { width: var(--side-mini); }
.adm.is-collapsed .adm-body { margin-left: var(--side-mini); }
.adm.is-collapsed .adm-logo span, .adm.is-collapsed .adm-menu__top span, .adm.is-collapsed .adm-menu__chev, .adm.is-collapsed .adm-menu__sub, .adm.is-collapsed .adm-side__foot span { display: none !important; }
.adm.is-collapsed .adm-side__brand { flex-direction: column; padding: 12px 8px; }
.adm.is-collapsed .adm-menu__top, .adm.is-collapsed .adm-side__foot a { justify-content: center; padding: 11px 0; }
.adm-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line); min-height: 60px; }
.adm-top__menu { display: none; }
.adm-top__title { display: grid; line-height: 1.25; min-width: 0; }
.adm-top__title small { color: var(--c-text-sub); font-size: 12px; }
.adm-top__title b { font-size: 17px; }
.adm-top__right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.adm-top__who { font-size: 13px; color: var(--c-text-sub); margin-left: 4px; }
.adm-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 24px 60px; align-items: start; }
.adm-content.has-subnav { grid-template-columns: minmax(0, 1fr) 200px; }
.adm-content .admin-main { padding: 0; width: auto; max-width: none; margin: 0; }
.adm-subnav { position: sticky; top: 80px; background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 10px; display: grid; gap: 2px; }
.adm-subnav__title { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text-sub); font-weight: 700; padding: 4px 8px 8px; margin: 0; border-bottom: 1px solid var(--c-line); margin-bottom: 4px; }
.adm-subnav a { padding: 9px 10px; border-radius: 8px; text-decoration: none; font-size: 14px; color: var(--c-text); }
.adm-subnav a:hover { background: var(--c-bg-soft); }
.adm-subnav a.is-active { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--c-crab); }
.adm-scrim { display: none; }
.admin .panel, .admin .tbl-wrap, .admin .kpi { border-radius: 14px; border-color: #E6E9EE; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.admin-main h1 { font-size: 22px; }
.kpis { gap: 14px; }
.kpi { display: grid; gap: 4px; text-decoration: none; color: inherit; position: relative; padding: 18px; transition: transform .1s, box-shadow .15s; }
.kpi:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,24,40,.08); }
.kpi__ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--c-primary-soft); color: var(--c-primary); margin-bottom: 6px; }
.kpi--alert .kpi__ico { background: var(--c-crab-soft); color: var(--c-crab); }
@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) {
  .adm-content.has-subnav { grid-template-columns: minmax(0, 1fr); }
  .adm-subnav { position: static; order: -1; display: flex; overflow-x: auto; padding: 6px; gap: 4px; }
  .adm-subnav__title { display: none; }
  .adm-subnav a { flex: none; white-space: nowrap; }
  .adm-subnav a.is-active { box-shadow: inset 0 -3px 0 var(--c-crab); }
}
@media (max-width: 860px) {
  .adm-side { transform: translateX(-100%); width: 272px; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .adm.is-collapsed .adm-side { width: 272px; }
  .adm.is-collapsed .adm-logo span, .adm.is-collapsed .adm-menu__top span, .adm.is-collapsed .adm-menu__chev, .adm.is-collapsed .adm-side__foot span { display: inline !important; }
  .adm.is-collapsed .adm-menu__group.is-open .adm-menu__sub { display: grid !important; }
  .adm.is-collapsed .adm-menu__top, .adm.is-collapsed .adm-side__foot a { justify-content: flex-start; padding: 10px 12px; }
  .adm-side__collapse { display: none; }
  body.adm-side-open .adm-side { transform: none; }
  body.adm-side-open .adm-scrim { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 55; }
  .adm-body, .adm.is-collapsed .adm-body { margin-left: 0; }
  .adm-top { padding: 8px 12px; }
  .adm-top__menu { display: inline-grid; }
  .adm-top__who, .adm-top__right .st { display: none; }
  .adm-content { padding: 14px 12px 60px; }
}

/* ==== 고객 화면 개선(2026-11-06) ==== */
/* 헤더: PC 상단 메뉴, 모바일 아이콘 메뉴 */
.header__desk { display: none; }
.header__dlink { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); text-decoration: none; font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-sub); }
.header__dlink img { width: 22px; height: 22px; }
.header__dlink:hover { background: var(--c-bg-soft); color: var(--c-text); }
.header__dlink.is-active { background: var(--c-primary-soft); color: var(--c-primary); }
.menu-panel { box-shadow: 0 12px 24px rgba(15,36,83,.08); }
.menu-list { list-style: none; margin: 0; padding: var(--sp-3) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.menu-list a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-bg-soft); text-decoration: none; font-weight: 700; font-size: var(--fs-sm); min-height: 52px; }
.menu-list a.is-active { background: var(--c-primary-soft); color: var(--c-primary); }
.menu-cs { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-sub); }
.menu-cs a { font-weight: 700; color: var(--c-primary); }
@media (min-width: 900px) {
  .header__desk { display: flex; gap: 2px; margin-left: auto; margin-right: var(--sp-2); }
  .header__nav .header__link--icon, .header__menu-btn, .menu-panel { display: none !important; }
}

/* 페이지 제목·위치 */
.pagehead { margin-bottom: var(--sp-6); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text-weak); margin-bottom: var(--sp-3); }
.crumbs a { color: var(--c-text-sub); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs b { color: var(--c-text-sub); font-weight: 600; }
.pagehead__row { display: flex; gap: var(--sp-3); align-items: center; }
.pagehead__icon { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--c-primary-soft); display: grid; place-items: center; }
.pagehead__title { font-size: 24px; font-weight: 800; }
.pagehead__desc { color: var(--c-text-sub); font-size: var(--fs-sm); margin-top: 2px; }

/* 빈 상태·안내 */
.estate { display: grid; justify-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-10) var(--sp-5); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.estate__icon { width: 80px; height: 80px; border-radius: 50%; background: var(--c-bg-soft); display: grid; place-items: center; margin-bottom: var(--sp-2); }
.estate__title { font-size: var(--fs-xl); font-weight: 800; }
.estate__desc { color: var(--c-text-sub); max-width: 420px; }
.estate__extra { color: var(--c-text-weak); font-size: 12px; }
.estate__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.seller-card .kv--plain { grid-template-columns: 120px 1fr; margin-top: var(--sp-3); }
.kv--plain dd a { color: var(--c-primary); font-weight: 700; }

/* 주문 단계 */
.osteps { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.osteps::before { content: ''; position: absolute; left: 16.6%; right: 16.6%; top: 15px; height: 2px; background: var(--c-line); }
.osteps li { display: grid; justify-items: center; gap: 6px; position: relative; font-size: 12px; color: var(--c-text-weak); }
.osteps li span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--c-line); font-weight: 800; color: var(--c-text-weak); }
.osteps li.is-done span { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.osteps li.is-now span { border-color: var(--c-crab); color: var(--c-crab); box-shadow: 0 0 0 4px var(--c-crab-soft); }
.osteps li.is-now b, .osteps li.is-done b { color: var(--c-text); }

/* 주문서 PC 2단 */
.checkout-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
.checkout-side { order: -1; }
.checkout-main > * + * { margin-top: var(--sp-4); }
.only-desk { display: none !important; }
@media (min-width: 1024px) {
  .page-form main.narrow:has(.checkout-grid) { max-width: 1040px; }
  .checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-6); align-items: start; }
  .checkout-side { order: 2; position: sticky; top: calc(var(--header-h) + 16px); }
  .checkout-main { order: 1; }
  .only-desk { display: flex !important; }
  p.only-desk { display: block !important; }
  .only-mobile { display: none !important; }
}

/* 상품 카드 */
.product-card__more { display: inline-block; margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); }

/* PC: 하단 고정 구매 바 대신 오른쪽 구매 영역 고정 */
@media (min-width: 1024px) {
  .cta-bar { display: none; }
  .has-cta .footer { padding-bottom: var(--sp-10); }
  .product-layout .product-info { position: sticky; top: calc(var(--header-h) + 16px); }
  .hero--story .hero__ctas .btn { min-width: 200px; }
}

/* 공통 마감 */
.card { transition: box-shadow .15s; }
a.card:hover { box-shadow: 0 8px 24px rgba(15,36,83,.10); }
.section__title { letter-spacing: -0.03em; }
.footer { border-top: 1px solid var(--c-line); }

.form-grid { align-items: start; }

/* 정책 문서 */
.policy-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: var(--sp-4); }
.policy-tabs a { flex: none; padding: 8px 14px; border-radius: var(--r-pill); background: var(--c-bg-soft); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.policy-tabs a.is-active { background: var(--c-primary); color: #fff; }
.policy-doc { font-size: 15px; line-height: 1.75; }
.policy-doc h3 { font-size: 17px; margin: var(--sp-6) 0 var(--sp-2); }
.policy-doc h3:first-child { margin-top: 0; }
.policy-doc table { font-size: 13px; }

/* 구매 후기 */
.stars { --r: 0; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 1px; background: linear-gradient(90deg, #FFB400 calc(var(--r) / 5 * 100%), #DDE1E6 calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars::before { content: '★★★★★'; }
.stars--lg { font-size: 22px; }
.rating-line { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: var(--fs-sm); }
.rv-summary { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6); align-items: center; background: var(--c-bg-soft); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-3); }
.rv-summary__avg { display: grid; justify-items: center; gap: 4px; }
.rv-summary__avg b { font-size: 34px; line-height: 1; }
.rv-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.rv-dist li { display: grid; grid-template-columns: 30px 1fr 24px; gap: 8px; align-items: center; }
.rv-dist i { height: 6px; background: #E5E8EB; border-radius: 3px; overflow: hidden; }
.rv-dist em { display: block; height: 100%; background: #FFB400; }
.rv-list { list-style: none; margin: 0; padding: 0; }
.rv { padding: var(--sp-5) 0; border-bottom: 1px solid var(--c-line); }
.rv__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.rv__date { margin-left: auto; font-size: 12px; }
.rv__disclosure { font-size: 12px; color: var(--c-warn); background: var(--c-warn-soft); padding: 4px 8px; border-radius: 6px; display: inline-block; margin: 0 0 var(--sp-2); }
.rv__body img { max-width: 320px; }
.rv-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.rv-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.rv__body--clip { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rv__body--clip img { max-height: 160px; width: auto; }
@media (min-width: 768px) { .rv-cards { grid-template-columns: repeat(3, 1fr); } }

.stars--r0 { --r: 0.0; }
.stars--r5 { --r: 0.5; }
.stars--r10 { --r: 1.0; }
.stars--r15 { --r: 1.5; }
.stars--r20 { --r: 2.0; }
.stars--r25 { --r: 2.5; }
.stars--r30 { --r: 3.0; }
.stars--r35 { --r: 3.5; }
.stars--r40 { --r: 4.0; }
.stars--r45 { --r: 4.5; }
.stars--r50 { --r: 5.0; }
.rv-w0 { width: 0%; }
.rv-w10 { width: 10%; }
.rv-w20 { width: 20%; }
.rv-w30 { width: 30%; }
.rv-w40 { width: 40%; }
.rv-w50 { width: 50%; }
.rv-w60 { width: 60%; }
.rv-w70 { width: 70%; }
.rv-w80 { width: 80%; }
.rv-w90 { width: 90%; }
.rv-w100 { width: 100%; }

/* ==== 구매 화면 시안 v01 (메인) — 시안/01-구매화면-v01/style.css 를 운영 구조에 맞춰 옮김 ==== */
.mk { --mk-ink: #18202A; --mk-muted: #667078; --mk-red: #D84135; --mk-paper: #F7F5F1; --mk-line: #E8E9E8; color: var(--mk-ink); letter-spacing: -0.035em; }
.page-mk .footer { margin-top: 0; }
.mk h1, .mk h2 { letter-spacing: -0.06em; }
.mk-eyebrow { font-size: 12px; font-weight: 800; color: var(--mk-red); letter-spacing: .05em; margin: 0; }
.mk-hero { background: var(--mk-paper) url('/assets/marketing/hero/hero-background-pc-v01.webp') center / cover no-repeat; }
.mk-hero__inner { max-width: 1280px; margin: 0 auto; padding: 54px 40px 58px; display: grid; grid-template-columns: 1fr 1fr; gap: 58px; align-items: center; }
.mk-hero h1 { font-size: 58px; line-height: 1.18; letter-spacing: -.065em; margin: 20px 0 18px; font-weight: 800; }
.mk-lead { font-size: 18px; line-height: 1.7; color: #596068; }
.mk-spec { display: flex; gap: 12px; font-size: 15px; align-items: center; margin-top: 28px; }
.mk-spec > span { color: var(--mk-muted); }
.mk-price { font-size: 43px; font-weight: 800; letter-spacing: -.05em; line-height: 1.5; }
.mk-price span { font-size: 22px; margin-left: 4px; }
.mk-price--pending { font-size: 28px; color: var(--mk-muted); }
.mk-ship { font-size: 12px; line-height: 1.8; color: #62696E; }
.mk-primary { display: flex; align-items: center; justify-content: space-between; background: var(--mk-red); border-radius: 8px; padding: 17px 24px; color: #fff; font-weight: 700; width: 264px; margin-top: 25px; font-size: 15px; text-decoration: none; }
.mk-primary:hover { background: #BD332A; }
.mk-buy { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--mk-ink); text-decoration: underline; text-underline-offset: 3px; }
.mk-status { font-size: 11px; color: #777E82; margin-top: 13px; }
.mk-hero__photo { position: relative; padding-bottom: 26px; margin: 0; }
.mk-hero__photo > img { height: 488px; width: 100%; object-fit: cover; border-radius: 160px 160px 12px 12px; object-position: center 48%; }
.mk-hero__photo figcaption { position: absolute; bottom: 0; font-size: 10px; color: #717474; line-height: 1.5; }
.mk-photo-label { position: absolute; bottom: 50px; left: 23px; display: grid; gap: 4px; padding: 16px 22px; background: rgba(255,255,255,.93); border-radius: 6px; }
.mk-photo-label span { font-size: 11px; color: #6A7276; }
.mk-photo-label b { font-size: 22px; }
.mk-strip { display: flex; max-width: 1200px; margin: 0 auto; padding: 32px 0; justify-content: space-around; border-bottom: 1px solid var(--mk-line); font-size: 12px; color: #70777D; }
.mk-strip span { display: flex; align-items: center; gap: 13px; }
.mk-strip b { color: var(--mk-ink); font-size: 20px; }
.mk-wrap { max-width: 920px; margin: 0 auto; }
.mk-detail { padding: 90px 28px; border-bottom: 1px solid var(--mk-line); scroll-margin-top: 70px; }
.mk-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.mk-index { font-size: 10px; letter-spacing: .15em; color: #999F9F; }
.mk-detail h2, .mk-closing h2 { font-size: 42px; line-height: 1.3; font-weight: 800; margin: 0; }
.mk-desc { font-size: 16px; color: #686F75; line-height: 1.8; margin-top: 19px; }
.mk figure { margin: 0; }
.mk figcaption { font-size: 11px; color: #757D83; line-height: 1.7; margin-top: 12px; }
.mk figcaption b { color: #50585E; }
.mk-wide { margin-top: 32px !important; }
.mk-wide > img { width: 100%; height: auto; max-height: 610px; object-fit: contain; background: #F4F5F5; border-radius: 10px; }
.mk-specrow { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 27px; background: #F7F8F8; border-radius: 8px; padding: 22px 12px; }
.mk-specrow > div { display: grid; gap: 7px; text-align: center; border-right: 1px solid #E1E3E3; }
.mk-specrow > div:last-child { border: 0; }
.mk-specrow span { font-size: 12px; color: var(--mk-muted); }
.mk-specrow b { font-size: 36px; }
.mk-specrow small { font-size: 17px; margin-left: 4px; }
.mk-specrow .mk-word { font-size: 30px; }
.mk-foot { font-size: 11px; color: #7B8288; line-height: 1.8; margin-top: 18px; }
.mk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 33px; }
.mk-pair img { height: 390px; width: 100%; object-fit: cover; border-radius: 10px; }
.mk-pair figure:last-child { padding-top: 55px; }
.mk-note { background: #F6F7F8; border-radius: 8px; padding: 22px 24px; margin-top: 26px; }
.mk-note b { font-size: 14px; }
.mk-note p { font-size: 12px; line-height: 1.9; color: #6D747A; margin-top: 7px; }
.mk-note a { color: var(--mk-ink); }
.mk-process { margin-top: 32px !important; }
.mk-process img { width: 100%; height: 440px; object-fit: cover; border-radius: 10px; }
.mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.mk-steps span { display: block; color: var(--mk-red); font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.mk-steps b { font-size: 17px; }
.mk-steps p { font-size: 12px; color: var(--mk-muted); line-height: 1.7; margin-top: 6px; }
.mk-table { margin-top: 30px; border-top: 1px solid var(--mk-line); }
.mk-table > div { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 20px 14px; border-bottom: 1px solid var(--mk-line); font-size: 14px; }
.mk-table span { color: var(--mk-muted); }
.mk-table b { text-align: right; }
.mk-table__hl { background: #FFF5F1; }
.mk-table__hl b { color: var(--mk-red); }
.mk-packing { margin-top: 30px !important; }
.mk-packing img { width: 100%; height: 380px; object-fit: cover; object-position: center 60%; border-radius: 10px; }
.mk-reviews, .mk-faq { padding: 70px 28px; border-bottom: 1px solid var(--mk-line); }
.mk-reviews h2, .mk-faq h2 { font-size: 30px; font-weight: 800; margin: 0 0 20px; }
.mk-closing { background: var(--mk-paper); padding: 80px 24px; text-align: center; }
.mk-closing h2 { margin-top: 20px; }
.mk-closing .mk-primary { margin: 28px auto 0; }
@media (max-width: 1023px) and (min-width: 701px) { .mk-hero h1 { font-size: 46px; } .mk-hero__inner { gap: 32px; padding: 44px 28px; } }
@media (max-width: 700px) {
  .mk-hero__inner { padding: 34px 24px 28px; display: flex; flex-direction: column; gap: 25px; align-items: stretch; }
  .mk-eyebrow { font-size: 11px; }
  .mk-hero h1 { font-size: 38px; margin: 15px 0 13px; line-height: 1.22; }
  .mk-lead { font-size: 14px; }
  .mk-lead br { display: none; }
  .mk-spec { font-size: 13px; margin-top: 20px; }
  .mk-price { font-size: 35px; }
  .mk-price span { font-size: 18px; }
  .mk-ship { font-size: 11px; }
  .mk-primary { width: 100%; margin-top: 18px; padding: 15px 20px; font-size: 14px; }
  .mk-status { font-size: 10px; margin-top: 10px; }
  .mk-hero__photo { padding-bottom: 24px; }
  .mk-hero__photo > img { height: 280px; border-radius: 100px 100px 10px 10px; }
  .mk-hero__photo figcaption { font-size: 10px; }
  .mk-photo-label { bottom: 43px; left: 16px; padding: 10px 16px; }
  .mk-photo-label b { font-size: 18px; }
  .mk-photo-label span { font-size: 10px; }
  .mk-strip { padding: 25px 15px; gap: 10px; }
  .mk-strip span { display: grid; gap: 6px; font-size: 11px; text-align: center; }
  .mk-strip b { font-size: 17px; }
  .mk-detail { padding: 52px 24px; }
  .mk-top { margin-bottom: 16px; }
  .mk-index { font-size: 9px; }
  .mk-detail h2, .mk-closing h2 { font-size: 30px; }
  .mk-desc { font-size: 14px; margin-top: 15px; }
  .mk-wide { margin-top: 24px !important; }
  .mk-wide > img { max-height: 400px; }
  .mk-specrow { padding: 20px 5px; }
  .mk-specrow b { font-size: 29px; }
  .mk-specrow .mk-word { font-size: 25px; }
  .mk-specrow small { font-size: 13px; }
  .mk-specrow span { font-size: 11px; }
  .mk figcaption, .mk-foot { font-size: 11px; }
  .mk-pair { gap: 10px; margin-top: 25px; }
  .mk-pair img { height: 235px; }
  .mk-pair figure:last-child { padding-top: 38px; }
  .mk-note { padding: 18px; }
  .mk-note b { font-size: 13px; }
  .mk-note p { font-size: 12px; }
  .mk-process img { height: 255px; }
  .mk-steps { gap: 12px; }
  .mk-steps b { font-size: 14px; }
  .mk-steps p { font-size: 11px; }
  .mk-table > div { padding: 18px 10px; font-size: 13px; }
  .mk-packing img { height: 270px; }
  .mk-reviews, .mk-faq { padding: 48px 24px; }
  .mk-closing { padding: 55px 24px; }
  .mk-closing .mk-primary { max-width: 290px; }
}

/* ==== 파트너 실적 기간 선택·일별 표 ==== */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg__item { padding: 7px 14px; border: 1px solid var(--line, #E3E6EA); border-radius: 999px; font-size: 14px; color: inherit; text-decoration: none; background: #fff; }
.seg__item.is-on { background: #0F2453; border-color: #0F2453; color: #fff; font-weight: 700; }
.seg-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.seg-form .input { width: auto; min-width: 0; flex: 1 1 130px; padding: 8px 10px; }
.tbl-scroll { max-height: 320px; overflow: auto; border: 1px solid var(--line, #E3E6EA); border-radius: 10px; }
.mini-tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.mini-tbl th, .mini-tbl td { padding: 7px 12px; text-align: right; border-bottom: 1px solid #F0F2F4; }
.mini-tbl th:first-child, .mini-tbl td:first-child { text-align: left; color: #667078; }
.mini-tbl thead th { position: sticky; top: 0; background: #F7F8FA; font-weight: 600; }
.mini-bar { display: inline-block; height: 8px; border-radius: 4px; background: #2F5DA8; margin-right: 8px; vertical-align: middle; width: 0; }
.mini-bar--w10 { width: 6px; }
.mini-bar--w20 { width: 12px; }
.mini-bar--w30 { width: 18px; }
.mini-bar--w40 { width: 24px; }
.mini-bar--w50 { width: 30px; }
.mini-bar--w60 { width: 36px; }
.mini-bar--w70 { width: 42px; }
.mini-bar--w80 { width: 48px; }
.mini-bar--w90 { width: 54px; }
.mini-bar--w100 { width: 60px; }

/* ==== 관리자 방문 통계 ==== */
.st-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-filter__custom { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.st-filter__custom .input { width: auto; padding: 6px 8px; }
.kpi small { display: block; font-size: 11px; margin-top: 2px; }
.st-card { padding: 18px 20px; margin-top: 16px; }
.st-card h2 { font-size: 16px; margin: 0 0 12px; }
.st-card summary { cursor: pointer; font-weight: 600; }
.st-grid { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .st-grid { grid-template-columns: 1fr 1fr; } }
.st-chart { position: relative; }
.st-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.st-grid-l { stroke: #EEF0F3; stroke-width: 1; }
.st-base { stroke: #C9CED6; stroke-width: 1; }
.st-ax { font-size: 11px; fill: #7A828C; font-variant-numeric: tabular-nums; }
.st-mark { fill: #2F5DA8; }
.st-hit { fill: transparent; cursor: pointer; }
.st-col.is-on .st-hit { fill: rgba(47, 93, 168, .07); }
.st-tip { position: absolute; top: 4px; background: #18202A; color: #fff; font-size: 12px; line-height: 1.6; padding: 8px 10px; border-radius: 6px; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-table { margin-top: 12px; }
.st-bar { display: inline-block; width: 80px; height: 8px; border-radius: 4px; background: #EEF0F3; vertical-align: middle; overflow: hidden; }
.st-bar > span { display: block; height: 100%; background: #2F5DA8; border-radius: 4px; }
.st-def { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.8; color: #4A525C; }

/* ==== 파트너스(로그인 후 홈) — 참고 배치: 상단 메뉴 → 링크 생성 → 배너+카드 → 기간별 리포트 ==== */
.page-pc .footer { margin-top: 0; }
.pc-nav { background: #fff; border-bottom: 1px solid #ECEEF1; box-shadow: 0 2px 6px rgba(15, 36, 83, .04); }
.pc-nav__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; min-height: 58px; }
.pc-nav__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #0F2453; font-size: 12px; line-height: 1.15; }
.pc-nav__brand b { font-size: 15px; color: #E53935; letter-spacing: -.01em; }
.pc-nav__menu { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.pc-nav__menu::-webkit-scrollbar { display: none; }
.pc-nav__menu a { padding: 19px 14px 17px; font-size: 14px; color: #3A424C; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.pc-nav__menu a:hover { color: #0F2453; }
.pc-nav__menu a[aria-current="page"] { color: #0F2453; font-weight: 700; border-bottom-color: #E53935; }
.pc-nav__me { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #3A424C; white-space: nowrap; }
.pc-nav__out { background: none; border: 1px solid #DADDE2; border-radius: 6px; padding: 5px 10px; font-size: 12px; color: #4A525C; cursor: pointer; }
.pc-wrap { max-width: 1160px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.pc-h { text-align: center; font-size: 28px; font-weight: 800; color: #18202A; letter-spacing: -.04em; margin: 0 0 26px; }
.pc-search { max-width: 1160px; margin: 0 auto; padding: 64px 24px 20px; scroll-margin-top: 70px; }
.pc-search__box { background: #F4F5F7; border-radius: 12px; padding: 28px 24px; }
.pc-search__bar { display: flex; max-width: 680px; margin: 0 auto; background: #fff; border: 1px solid #D5D9DF; border-radius: 6px; overflow: hidden; }
.pc-search__sel { flex: 0 0 auto; max-width: 170px; border: 0; border-right: 1px solid #E3E6EA; padding: 0 12px; font-size: 13px; font-weight: 700; background: #fff; color: #18202A; }
.pc-search__input { flex: 1; min-width: 0; border: 0; padding: 12px 14px; font-size: 14px; color: #3A424C; background: #fff; }
.pc-search__btn { flex: 0 0 auto; border: 0; background: #2F5DA8; color: #fff; font-weight: 700; padding: 0 22px; font-size: 14px; cursor: pointer; }
.pc-search__btn:hover { background: #244C8E; }
.pc-search__help { text-align: center; font-size: 12px; color: #6B737C; margin: 12px 0 0; }
.pc-banner { background: linear-gradient(100deg, #EAF2FC 0%, #D6E6FA 45%, #2F5DA8 100%); margin-top: 20px; }
.pc-banner__inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 190px; gap: 24px; align-items: stretch; min-height: 340px; }
.pc-banner__main { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 34px 0; }
.pc-banner__brand { font-size: 18px; font-weight: 800; color: #0F2453; margin: 0 0 14px; }
.pc-banner__bubble { position: relative; background: #0F2453; color: #fff; border-radius: 26px; padding: 26px 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; font-size: 38px; line-height: 1.3; letter-spacing: -.05em; box-shadow: 0 10px 30px rgba(15, 36, 83, .25); }
.pc-banner__bubble::after { content: ""; position: absolute; left: 50px; bottom: -16px; border: 10px solid transparent; border-top: 14px solid #0F2453; border-left-width: 4px; }
.pc-hl { color: #FFD54A; }
.pc-banner__desc { margin: 26px 0 0; font-size: 15px; line-height: 1.7; color: #23324D; }
.pc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(6, 1fr); background: #fff; box-shadow: 0 4px 18px rgba(15, 36, 83, .15); }
.pc-cards li + li { border-top: 1px solid #E8EBF0; }
.pc-cards a, .pc-cards button { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 100%; min-height: 52px; padding: 8px 12px 8px 14px; background: #fff; border: 0; text-align: left; font-size: 12.5px; line-height: 1.35; color: #18202A; text-decoration: none; cursor: pointer; font-family: inherit; }
.pc-cards a:hover, .pc-cards button:hover { background: #F2F6FC; }
.pc-cards img { flex: 0 0 auto; width: 34px; height: 34px; }
.pc-report { padding-top: 70px; scroll-margin-top: 70px; }
.pc-report__grid, .pc-two { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; }
.pc-two { margin-top: 56px; }
.pc-col__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; border-bottom: 2px solid #18202A; padding-bottom: 10px; }
.pc-col__head h3 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -.03em; }
.pc .kpis { grid-template-columns: repeat(2, 1fr); }
.pc-sum { margin: 0; }
.pc-sum > div { display: flex; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid #EEF0F3; font-size: 14px; }
.pc-sum dt { color: #667078; }
.pc-sum dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-sum__hl { background: #FFF5F1; }
.pc-sum__hl dd { color: #D84135; font-size: 16px; }
@media (min-width: 1100px) { .pc .kpis { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
  .pc-nav__inner { flex-wrap: wrap; gap: 0 12px; padding: 8px 16px 0; }
  .pc-nav__menu { order: 3; flex-basis: 100%; }
  .pc-nav__menu a { padding: 12px 10px 10px; }
  .pc-nav__me { margin-left: auto; }
  .pc-h { font-size: 22px; margin-bottom: 16px; }
  .pc-search { padding: 36px 16px 10px; }
  .pc-search__box { padding: 16px 12px; }
  .pc-search__bar { flex-wrap: wrap; }
  .pc-search__sel { max-width: none; flex-basis: 100%; border-right: 0; border-bottom: 1px solid #E3E6EA; padding: 10px 12px; }
  .pc-search__btn { padding: 0 16px; }
  .pc-banner { background: linear-gradient(180deg, #EAF2FC 0%, #D6E6FA 60%, #BFD5F3 100%); }
  .pc-banner__inner { grid-template-columns: 1fr; padding: 0 16px 20px; min-height: 0; gap: 8px; }
  .pc-banner__bubble { font-size: 24px; padding: 18px 22px; border-radius: 18px; }
  .pc-banner__desc { font-size: 13px; }
  .pc-banner__desc br { display: none; }
  .pc-cards { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; border-radius: 10px; overflow: hidden; }
  .pc-cards li + li { border-top: 0; }
  .pc-cards li { border-bottom: 1px solid #E8EBF0; }
  .pc-cards li:nth-child(odd) { border-right: 1px solid #E8EBF0; }
  .pc-report { padding-top: 44px; }
  .pc-report__grid, .pc-two { grid-template-columns: 1fr; gap: 36px; }
  .pc-two { margin-top: 36px; }
  .pc-wrap { padding-left: 16px; padding-right: 16px; }
}
/* 파트너스 시작(휴대전화 인증) */
.pp-head { text-align: center; margin-bottom: 20px; }
.pp-head img { margin: 0 auto 8px; }
.pp-head__eyebrow { color: #E53935; font-weight: 800; font-size: 13px; margin: 0; }
.input--lg { font-size: 18px; padding: 14px 14px; letter-spacing: .02em; }

/* ==== 모바일 가독성·조작 영역 v2 (모바일 UI·UX 점검 지시서 반영) ====
   기준: 본문 16px/행간 1.7, 보조 14px 이상, 주의사항 15px, 버튼 17px·56px, 탭·공유 48px, 점 버튼 클릭 영역 44px.
   관리자(body.admin)는 제외. 하단 바 여백은 실제 높이(--cta-h, common.js 측정)로 계산 */
.mk-primary { background: #C7362E; }           /* 흰 글자 대비 4.5:1 이상 */
.mk-primary:hover { background: #AE2E27; }
.mk-ship { font-size: 14px; }
.mk-status { font-size: 13px; color: #525E6B; }
.mk figcaption, .mk-foot { font-size: 13px; color: #5F6A75; }
.mk-note p { font-size: 14px; color: #525E6B; }
.mk-table > div { font-size: 15px; }
.mk-steps p { font-size: 14px; }
.cta-bar { transition: transform .22s ease; }
.cta-bar.is-off { transform: translateY(110%); }
.product-meta { display: grid; gap: 2px; margin: 2px 0 0; color: #525E6B; font-size: 15px; line-height: 1.6; }
.product-meta span:first-child { color: #191F28; font-weight: 600; }
.buy-state { display: grid; gap: 8px; }
.buy-state__why { margin: 0; padding: 12px 14px; border-radius: 10px; background: #FFF6E5; color: #6B4A00; font-size: 15px; line-height: 1.6; }
.buy-state__why b { display: block; color: #4A3300; }
.cta-bar__why { display: block; font-size: 13px; color: #8A5A00; line-height: 1.4; }
.lookup-help { margin-top: 16px; font-size: 15px; line-height: 1.7; color: #525E6B; }
.lookup-help b { color: #191F28; }
.dsec { scroll-margin-top: calc(var(--hdr-real, 57px) + var(--dnav-h, 0px) + 12px); }

@media (max-width: 767px) {
  body:not(.admin) { --c-text-sub: #525E6B; font-size: 16px; line-height: 1.7; }
  body:not(.admin) .header__link, body:not(.admin) .menu-list a { font-size: 16px; }
  /* 메인(구매 화면 시안) */
  body:not(.admin) .mk-eyebrow { font-size: 13px; }
  body:not(.admin) .mk-lead, body:not(.admin) .mk-desc { font-size: 16px; line-height: 1.75; }
  body:not(.admin) .mk-spec { font-size: 16px; gap: 10px; flex-wrap: wrap; }
  body:not(.admin) .mk-ship { font-size: 15px; line-height: 1.7; color: #525E6B; }
  body:not(.admin) .mk-status { font-size: 14px; line-height: 1.7; }
  body:not(.admin) .mk-primary { font-size: 17px; min-height: 56px; }
  body:not(.admin) .mk-buy { font-size: 16px; }
  body:not(.admin) .mk figcaption, body:not(.admin) .mk-foot { font-size: 14px; line-height: 1.75; color: #525E6B; }
  body:not(.admin) .mk-hero__photo { padding-bottom: 0; }
  body:not(.admin) .mk-hero__photo figcaption { position: static; margin-top: 10px; }
  body:not(.admin) .mk-photo-label { bottom: auto; top: 18px; left: 16px; }
  body:not(.admin) .mk-photo-label span { font-size: 13px; }
  body:not(.admin) .mk-strip span, body:not(.admin) .mk-specrow span { font-size: 14px; }
  body:not(.admin) .mk-specrow small { font-size: 16px; }
  body:not(.admin) .mk-index { display: none; }
  body:not(.admin) .mk-note b { font-size: 16px; }
  body:not(.admin) .mk-note p { font-size: 15px; line-height: 1.75; }
  body:not(.admin) .mk-steps { grid-template-columns: 1fr; gap: 16px; }
  body:not(.admin) .mk-steps > div { display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; align-items: baseline; }
  body:not(.admin) .mk-steps span { font-size: 14px; margin: 0; grid-row: span 2; }
  body:not(.admin) .mk-steps b { font-size: 17px; }
  body:not(.admin) .mk-steps p { font-size: 16px; line-height: 1.7; margin-top: 2px; }
  body:not(.admin) .mk-table > div { font-size: 16px; line-height: 1.6; }
  body:not(.admin) .mk-table > div > * { min-width: 0; }
  body:not(.admin) .mk-table b { max-width: 62%; }
  /* 상품 상세·폼 */
  body:not(.admin) .dsec__note, body:not(.admin) .dphoto figcaption { font-size: 14px; line-height: 1.75; color: #525E6B; }
  body:not(.admin) .info-list dt, body:not(.admin) .info-list dd, body:not(.admin) .summary, body:not(.admin) .shipbox span,
  body:not(.admin) .dsteps li span, body:not(.admin) .field__label, body:not(.admin) .faq details p { font-size: 16px; line-height: 1.7; }
  body:not(.admin) .field__help, body:not(.admin) .field__error, body:not(.admin) .free-hint { font-size: 14px; line-height: 1.7; }
  body:not(.admin) .input, body:not(.admin) .select, body:not(.admin) .textarea { font-size: 16px; min-height: 52px; }
  body:not(.admin) .product-title { font-size: 24px; line-height: 1.35; }
  body:not(.admin) .product-info .muted { font-size: 15px; }
  body:not(.admin) .dnav { padding-top: 8px; padding-bottom: 8px; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  body:not(.admin) .dnav a { min-height: 48px; display: inline-flex; align-items: center; font-size: 16px; padding: 0 16px; }
  body:not(.admin) .dnav a:last-child { margin-right: 28px; }
  body:not(.admin) .btn--sm { min-height: 48px; font-size: 16px; }
  /* 갤러리 점: 모양은 작게, 누르는 영역은 44×44 */
  body:not(.admin) .gallery__dots { gap: 0; padding: 0; }
  body:not(.admin) .gallery__dot, body:not(.admin) .gallery__dot[aria-current="true"] { width: 44px; height: 44px; border-radius: 0; background: transparent; position: relative; flex: 0 0 44px; }
  body:not(.admin) .gallery__dot::after { content: ""; position: absolute; left: 18px; top: 18px; width: 8px; height: 8px; border-radius: 4px; background: #929BA5; }
  body:not(.admin) .gallery__dot[aria-current="true"]::after { width: 20px; left: 12px; background: #191F28; }
  /* 푸터: 사업자 정보는 요청대로 회색·작게 두되 읽을 수 있는 정도로 */
  body:not(.admin) .footer__links a { min-height: 44px; font-size: 15px; }
  body:not(.admin) .footer__biz { font-size: 13px; color: #8B95A1; }
  /* 하단 고정 바 */
  body:not(.admin) .cta-bar__sum .muted { font-size: 14px; line-height: 1.5; }
  body:not(.admin) .cta-bar__sum strong { font-size: 20px; }
  body:not(.admin) .cta-bar .btn { min-width: 132px; font-size: 17px; min-height: 56px; }
  body:not(.admin).has-cta .footer { padding-bottom: calc(var(--cta-h, 88px) + 40px + env(safe-area-inset-bottom)); }
  body:not(.admin) :is(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid #0F2453; outline-offset: 3px; }
}
@media (max-width: 767px) {
  body:not(.admin) { --fs-xs: 14px; }
  body:not(.admin) .mk-eyebrow, body:not(.admin) .pp-head__eyebrow, body:not(.admin) .mk-photo-label span, body:not(.admin) .cta-bar__why { font-size: 14px; }
  body:not(.admin) .crumbs { font-size: 14px; gap: 2px; }
  body:not(.admin) .crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
  body:not(.admin) .crumbs a:first-child { padding-left: 0; }
  body:not(.admin) .badge { line-height: 22px; }
}

/* 메인: 자숙 홍게란? 짧은 설명 */
.mk-what { max-width: 920px; margin: 0 auto; padding: 16px 28px 0; font-size: 13px; line-height: 1.75; color: #5F6A75; text-align: center; }
.mk-what b { color: #18202A; margin-right: 6px; }
@media (max-width: 767px) { body:not(.admin) .mk-what { font-size: 14px; padding: 14px 24px 0; text-align: left; } }

/* 메인: 헤더 로고 왼쪽 끝을 히어로 글자(.mk-eyebrow)와 맞춤 — 히어로와 같은 폭·여백 */
.page-mk .header__inner { max-width: 1280px; padding-left: 40px; padding-right: 40px; }
@media (max-width: 1023px) { .page-mk .header__inner { padding-left: 28px; padding-right: 28px; } }
@media (max-width: 700px) { .page-mk .header__inner { padding-left: 24px; padding-right: 24px; } }

/* 상세: 사진 2장 구간 — PC 나란히(각각 본문 사진 크기), 모바일 위아래 */
.dphoto-pair { display: grid; gap: 12px; }
.dphoto-pair .dphoto { margin: 0; }
@media (min-width: 768px) { .dphoto-pair { grid-template-columns: 1fr 1fr; gap: 16px; width: min(1160px, calc(100vw - 48px)); position: relative; left: 50%; transform: translateX(-50%); } }
.product-more { margin: 4px 0 0; font-size: 14px; }
.product-more a { color: #3E4A57; text-decoration: underline; text-underline-offset: 3px; }

/* ==== 상세 구간 PC 폭 = 페이지 폭(1160), 글은 읽기 좋은 폭, 사진 묶음 정렬 ==== */
.dsec__inner > :not(.dphoto-set):not(.dphoto-pair):not(.bignums):not(.dsteps):not(.eat-grid):not(.shipbox) { max-width: 760px; }
.dsec__inner .info-list { max-width: none !important; }
@media (min-width: 768px) { .dphoto-set .dphoto--main .frame--wide { aspect-ratio: 16 / 9; } .dphoto-pair { width: auto; left: auto; transform: none; } }
/* 썸네일: 개수만큼 같은 폭으로 나눠 큰 사진 오른쪽 끝과 맞춤, 누르면 큰 사진과 교체 */
.dphoto-strip[class*="dphoto-strip--n"] { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; overflow: visible; margin-top: 10px; }
.dphoto-strip .dphoto { margin: 0; cursor: pointer; }
.dphoto-strip .dphoto img { transition: opacity .15s, transform .15s; }
.dphoto-strip .dphoto:hover img { opacity: .85; }
.dphoto-strip .dphoto:focus-visible { outline: 3px solid #0F2453; outline-offset: 2px; border-radius: 12px; }
.dphoto-strip .dphoto.is-picked .frame { box-shadow: 0 0 0 3px #0F2453; }
.dphoto-strip figcaption { display: none; }
@media (max-width: 767px) { .dphoto-strip[class*="dphoto-strip--n"] { gap: 6px; } }

/* 푸터: 홈(.page-mk) 외에는 PC·모바일 모두 사업자 정보 접힘 — 저작권 줄 옆 '자세히 보기'로 펼침 */
.footer__info { display: flex; flex-direction: column; }
.page-mk .footer__copy { order: 2; }
.footer__copy { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; color: #8B95A1; font-size: 13px; line-height: 1.8; }
.footer__more { display: none; }
.js-foot body:not(.page-mk) .footer__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; background: none; border: 0; color: #6B7684; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.js-foot body:not(.page-mk) .footer__biz:not(.is-open) { display: none; }
.js-foot body:not(.page-mk) .footer__biz.is-open { margin-top: 4px; }

/* 카카오톡 공유 버튼(카카오 노랑) */
.btn--kakao { background: #FEE500; color: #191919; border: 0; gap: 6px; font-weight: 700; }
.btn--kakao:hover { background: #F4DC00; }
.btn--kakao svg { color: #191919; }

/* ==== 파트너스 등급·혜택 / 전용 매장 ==== */
.pc-grade { padding-top: 70px; scroll-margin-top: 70px; }
.grade-badge { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 15px; font-weight: 800; color: #fff; background: #6B7684; vertical-align: 2px; }
.grade-badge--royal { background: #2F5DA8; } .grade-badge--diamond { background: #0E7C86; } .grade-badge--platinum { background: #18202A; }
.grade-bar { height: 12px; border-radius: 6px; background: #EEF0F3; overflow: hidden; margin-top: 8px; }
.grade-bar__fill { display: block; height: 100%; background: #2F5DA8; border-radius: 6px; width: 0; }
.grade-bar__fill--w10 { width: 10%; }
.grade-bar__fill--w20 { width: 20%; }
.grade-bar__fill--w30 { width: 30%; }
.grade-bar__fill--w40 { width: 40%; }
.grade-bar__fill--w50 { width: 50%; }
.grade-bar__fill--w60 { width: 60%; }
.grade-bar__fill--w70 { width: 70%; }
.grade-bar__fill--w80 { width: 80%; }
.grade-bar__fill--w90 { width: 90%; }
.grade-bar__fill--w100 { width: 100%; }
.grade-tbl tr.is-me td { background: #EEF4FF; font-weight: 700; }
.grade-tbl__ben td { text-align: left !important; color: #667078 !important; font-size: 12.5px; padding-top: 0 !important; }
.ben-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ben { border: 1px solid #E8EBEF; border-radius: 12px; padding: 14px 16px; background: #fff; }
.ben__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ben__form { margin-top: 12px; }
.input-prefix { display: flex; align-items: center; border: 1px solid var(--c-line, #E3E6EA); border-radius: 10px; overflow: hidden; background: #fff; }
.input-prefix > span { padding: 0 8px 0 12px; color: #667078; font-size: 14px; white-space: nowrap; }
.input-prefix .input { border: 0; border-radius: 0; min-width: 0; flex: 1; }
.shop-head { text-align: center; margin-bottom: 24px; }
.shop-head__eyebrow { color: #E53935; font-weight: 800; font-size: 13px; margin: 0; }
.shop-head__sub { font-size: 16px; color: #3E4A57; margin: 4px 0 0; }
.shop-ad { font-size: 13px; color: #667078; margin-top: 12px; }
.shop-intro { margin-top: 16px; text-align: left; background: #F7F8FA; border-radius: 12px; padding: 16px 18px; line-height: 1.75; }
.shop-intro p { margin: 0; }
.shop-product { overflow: hidden; }
.shop-seller { margin-top: 20px; font-size: 13px; line-height: 1.7; }

/* ==== 관리자: 전체 프로세스 ==== */
.flow { margin-top: 16px; }
.flow-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.flow-step { display: grid; grid-template-columns: 36px 1fr; gap: 12px; position: relative; padding-bottom: 16px; }
.flow-step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 34px; bottom: 0; width: 2px; background: #E3E7EC; }
.flow-step__no { width: 34px; height: 34px; border-radius: 50%; background: #0F2453; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.flow-step--alert .flow-step__no { background: #D84135; }
.flow-step__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.flow-step__body p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: #3E4A57; }
.flow-who { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: #EEF0F3; color: #4A525C; font-weight: 700; }
.flow-who--c { background: #EAF2FF; color: #2F5DA8; } .flow-who--p { background: #E7F6F4; color: #0E7C86; } .flow-who--a { background: #FFF1E6; color: #A4501B; }
.flow-count { font-size: 12.5px; font-weight: 800; color: #0F2453; background: #F2F4F7; padding: 1px 8px; border-radius: 6px; }
.flow-msg { color: #6B4A00 !important; font-size: 12.5px !important; }
.flow-link { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 700; }

/* 관리자 판매 순위 */
.rank { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 12px; font-size: 12px; background: #EEF0F3; color: #3E4A57; }
.rank--1 { background: #F2C94C; color: #3A2B00; } .rank--2 { background: #C9D1DA; color: #222; } .rank--3 { background: #E2B07A; color: #3A2200; }
small.up { color: #D84135; font-weight: 700; } small.down { color: #2F5DA8; font-weight: 700; }

/* 주문서 추천 코드 */
.refcode { margin-top: 10px; }
.refcode__box { margin-top: 8px; }
.refcode__row { display: flex; gap: 6px; }
.refcode__row .input { flex: 1; min-width: 0; text-transform: uppercase; }

/* 파트너 추천 코드(수수료 나눔) */
.pc-codes { padding-top: 60px; scroll-margin-top: 70px; }
.pc-codes__desc { text-align: center; color: #3E4A57; font-size: 15px; line-height: 1.7; margin: -10px auto 16px; max-width: 760px; }
.code-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; background: #F2F4F7; padding: 2px 8px; border-radius: 6px; }
.codes-tbl td { vertical-align: middle; }
.code-share { display: flex; gap: 6px; align-items: center; }
.code-share .select { min-width: 0; padding: 6px 8px; font-size: 13px; }
.code-url { width: 220px; max-width: 100%; padding: 6px 8px; font-size: 12.5px; }
.code-new { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 14px; }
.code-new .field { flex: 1 1 200px; }
@media (max-width: 767px) { .codes-tbl th:nth-child(4), .codes-tbl td:nth-child(4) { display: none; } }

/* 파트너스 첫 화면: 안내 버튼(1단계만) */
.pp-about { display: flex; justify-content: center; margin-top: 20px; }
.pp-about .btn { text-decoration: none; }
/* 파트너스 안내: 남색 배경 위 등급표 → 흰 카드 + 진한 글씨 */
.grade-card { background: #fff; border-radius: 14px; overflow: hidden; text-align: left; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.grade-card .mini-tbl th, .grade-card .mini-tbl td { color: #191F28; font-size: 14px; padding: 10px 12px; }
.grade-card .mini-tbl thead th { background: #F2F4F7; color: #3E4A57; font-weight: 700; }
.grade-card .mini-tbl td:first-child { color: #0F2453; font-weight: 800; }
.grade-card .grade-tbl__ben td { color: #4E5968 !important; font-size: 13px; line-height: 1.6; padding: 0 12px 12px !important; border-bottom: 1px solid #E8EBEF; }

/* ==== 주문서(단계형, 한 화면 한 질문) ==== */
.page-ck .footer { margin-top: 40px; }
.ck { max-width: 520px; margin: 0 auto; padding: 0 20px calc(110px + env(safe-area-inset-bottom)); }
.ck-top { position: sticky; top: var(--header-h, 56px); z-index: 30; display: flex; align-items: center; gap: 10px; background: #fff; padding: 10px 0; }
.ck-back { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: #191F28; cursor: pointer; border-radius: 10px; margin-left: -10px; }
.ck-back[hidden] { display: grid; visibility: hidden; }
.ck-prog { flex: 1; height: 4px; background: #EEF0F3; border-radius: 2px; overflow: hidden; }
.ck-prog__bar { display: block; height: 100%; background: #0F2453; border-radius: 2px; transition: width .2s ease; }
.ck-prog--1 { width: 25%; } .ck-prog--2 { width: 50%; } .ck-prog--3 { width: 75%; } .ck-prog--4 { width: 100%; }
.ck-count { font-size: 13px; color: #8B95A1; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.ck-alert { margin: 8px 0 0; }
.ck-step { padding-top: 18px; }
.js-ck .ck-step { display: none; }
.js-ck .ck-step.is-on { display: block; }
/* 단계 전환: 다음은 오른쪽에서, 이전은 왼쪽에서 살짝 밀려 들어오고 제목→입력칸 순으로 차례로 나타남 */
.ck-in--fwd { animation: ckInFwd .38s cubic-bezier(.22, .8, .24, 1) both; }
.ck-in--back { animation: ckInBack .38s cubic-bezier(.22, .8, .24, 1) both; }
.ck-in > * { animation: ckRise .42s cubic-bezier(.22, .8, .24, 1) both; }
.ck-in > :nth-child(2) { animation-delay: .04s; } .ck-in > :nth-child(3) { animation-delay: .08s; } .ck-in > :nth-child(4) { animation-delay: .12s; }
.ck-in > :nth-child(5) { animation-delay: .16s; } .ck-in > :nth-child(n+6) { animation-delay: .2s; }
@keyframes ckInFwd { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ckInBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes ckRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ck-prog__bar { transition: width .45s cubic-bezier(.22, .8, .24, 1); }
/* 주소 칸 펼침 */
.ck-reveal { animation: ckRise .36s cubic-bezier(.22, .8, .24, 1) both; }
.ck-zip { margin: 0; }
.ck-zip .ck-zip-btn { margin-bottom: 16px; }
.ck-zip .field__error { margin: -8px 0 12px; }
@media (prefers-reduced-motion: reduce) { .ck-in--fwd, .ck-in--back, .ck-in > *, .ck-reveal { animation: none; } .ck-prog__bar { transition: none; } }
.ck-title { font-size: 26px; line-height: 1.35; font-weight: 800; letter-spacing: -.03em; color: #191F28; margin: 6px 0 24px; outline: none; }
.ck .field { margin-bottom: 16px; }
.ck .field__label { font-size: 14px; color: #4E5968; }
.ck .input { height: 54px; border-radius: 12px; font-size: 17px; }
.ck .field__error { color: #D84135; font-size: 14px; margin: 6px 0 0; }
.ck .input[aria-invalid="true"] { border-color: #D84135; }
.ck-item { display: flex; gap: 14px; align-items: center; padding: 6px 0 18px; border-bottom: 1px solid #F2F4F6; }
.ck-item img { border-radius: 12px; background: #F7F8FA; }
.ck-item__body { display: grid; gap: 2px; font-size: 16px; }
.ck-qty { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.ck-qty__label { font-size: 17px; font-weight: 700; }
.ck-stepper { display: flex; align-items: center; gap: 4px; background: #F2F4F6; border-radius: 14px; padding: 4px; }
.ck-stepper button { width: 48px; height: 48px; border: 0; border-radius: 10px; background: #fff; font-size: 24px; color: #191F28; cursor: pointer; }
.ck-stepper output { min-width: 44px; text-align: center; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ck-sum-line { display: flex; justify-content: space-between; font-size: 16px; color: #4E5968; margin: 0; }
.ck-sum-line b { color: #191F28; font-size: 18px; }
.ck-hint { font-size: 14px; color: #6B7684; line-height: 1.6; margin: 10px 0 0; }
.ck-toggle, .ck-choice { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 16px; margin-top: 18px; cursor: pointer; }
.ck-toggle input, .ck-choice input, .ck-agree-all input { width: 22px; height: 22px; accent-color: #0F2453; }
.ck-choice { margin: 0 0 16px; padding: 4px 0; }
.ck-more { margin: 4px 0 12px; }
.ck-more summary { min-height: 44px; display: flex; align-items: center; font-size: 15px; color: #4E5968; cursor: pointer; list-style: none; }
.ck-more summary::before { content: "＋"; margin-right: 6px; color: #8B95A1; }
.ck-more[open] summary::before { content: "－"; }
.ck-more summary::-webkit-details-marker { display: none; }
.ck-zip-btn { margin-bottom: 16px; }
.ck .zip-layer { margin: 0 0 16px; }
.ck-bill { margin: 0; }
.ck-bill > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; font-size: 16px; }
.ck-bill > div[hidden] { display: none; }
.ck-bill dt { color: #4E5968; } .ck-bill dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ck-bill [data-discount-amt] { color: #D84135; }
.ck-bill__total { border-top: 1px solid #E5E8EB; margin-top: 6px; padding-top: 18px !important; }
.ck-bill__total dt { color: #191F28; font-weight: 800; font-size: 18px; }
.ck-bill__total dd { font-size: 24px; font-weight: 800; color: #191F28; }
.ck-link { background: none; border: 0; padding: 0 0 0 6px; color: #3182F6; font-size: 13px; cursor: pointer; min-height: 32px; }
.ck-coupon { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: #F7F8FA; border-radius: 14px; margin-top: 16px; font-size: 14px; color: #4E5968; }
.ck-final { display: grid; gap: 4px; margin: 0 0 24px; }
.ck-final span { color: #6B7684; font-size: 15px; }
.ck-final b { font-size: 34px; font-weight: 800; color: #191F28; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ck-agree-all { display: flex; gap: 12px; align-items: flex-start; padding: 18px 16px; border: 1px solid #E5E8EB; border-radius: 14px; cursor: pointer; }
.ck-agree-all span { display: grid; gap: 4px; } .ck-agree-all b { font-size: 17px; } .ck-agree-all small { color: #6B7684; font-size: 13px; line-height: 1.5; }
.ck-agree-more { margin-top: 10px; padding-left: 4px; font-size: 14px; min-height: 44px; }
.ck-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%); padding: 18px 20px calc(14px + env(safe-area-inset-bottom)); }
.ck-cta__inner { max-width: 520px; margin: 0 auto; }
.ck-cta .btn { min-height: 56px; font-size: 17px; border-radius: 14px; background: #0F2453; }
.ck-cta .btn:disabled { background: #C9CED6; color: #fff; }
html:not(.js-ck) .ck-cta { position: static; background: none; padding: 20px 0; }
html:not(.js-ck) .ck-cta [data-ck-next] { display: none; }
html:not(.js-ck) .ck-cta [data-ck-pay] { display: block !important; }
html:not(.js-ck) .ck-sheet { display: block !important; position: static; background: none; }
html:not(.js-ck) .ck-top { display: none; }
.ck-sheet { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; justify-content: center; }
.ck-sheet[hidden] { display: none; }
.ck-sheet__panel { background: #fff; width: 100%; max-width: 560px; border-radius: 20px 20px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); max-height: 86vh; overflow: auto; animation: sheetUp .22s ease; }
@keyframes sheetUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ck-sheet__panel { animation: none; } }
@media (min-width: 768px) { .ck-sheet { align-items: center; } .ck-sheet__panel { border-radius: 20px; max-width: 480px; } .ck-title { font-size: 28px; } }
.ck-sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 18px; }
.ck-sheet__x { width: 44px; height: 44px; border: 0; background: none; font-size: 18px; cursor: pointer; }
.ck-sheet__foot { display: flex; gap: 8px; margin-top: 16px; } .ck-sheet__foot .btn { flex: 1; min-height: 52px; }
.ck-sheet .agree-list { display: grid; gap: 12px; } .ck-sheet .agree-list .check { font-size: 15px; line-height: 1.6; }
body.ck-lock { overflow: hidden; }
.page-ck .cta-bar { display: none; }

/* 상세: 카카오톡 공유 버튼을 상품 정보 오른쪽 위로 */
.ds-row--share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ds-row--share .ds-share { margin-left: auto; min-height: 36px; padding: 6px 12px; font-size: 13px; border-radius: 999px; }
@media (max-width: 767px) { body:not(.admin) .ds-row--share .ds-share { min-height: 40px; font-size: 14px; } }

/* 상세 하단 바: 상품 금액 크게, 배송비·총액 작게 */
.cta-bar__ship { display: block; font-size: 12.5px; color: #6B7684; line-height: 1.4; margin-top: 1px; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { body:not(.admin) .cta-bar__ship { font-size: 13px; } }

/* 푸터 링크: 모바일 한 줄 */
@media (max-width: 767px) {
  body:not(.admin) .footer__links { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  body:not(.admin) .footer__links a { font-size: 14px; white-space: nowrap; }
}
/* 떠 있는 문의하기(오른쪽 아래) */
.qa { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.has-cta .qa { bottom: calc(var(--cta-h, 88px) + 12px + env(safe-area-inset-bottom)); }
.page-ck .qa { display: none; }
.qa__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; height: 64px; border-radius: 50%; border: 0; background: #0F2453; color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 6px 18px rgba(15, 36, 83, .28); cursor: pointer; }
.qa__btn img { filter: brightness(0) invert(1); }
.qa.is-open .qa__btn { background: #C8372D; }
.qa__panel { width: min(300px, calc(100vw - 32px)); background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); overflow: hidden; }
.qa__panel[hidden] { display: none; }
.qa__head { background: #0F2453; color: #fff; padding: 16px 18px; display: grid; gap: 4px; }
.qa__head strong { font-size: 17px; }
.qa__head span { font-size: 14px; opacity: .85; }
.qa__item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px; color: #18202A; font-size: 16px; font-weight: 600; text-decoration: none; border-top: 1px solid #EEF0F3; }
.qa__item:hover { background: #F5F7FA; }
.qa__item small { display: block; font-size: 13px; font-weight: 400; color: #6B7684; }
@media (min-width: 1024px) { .has-cta .qa { bottom: 24px; } .qa { right: 24px; bottom: 24px; } }

/* 상세 상단: 핵심 정보만, 간결한 위계(토스형) */
.product-info { gap: 0; }
.product-info > * + * { margin-top: 0; }
.product-info .ds-row--share { margin-bottom: 12px; }
.product-info .product-title { margin: 0; font-size: 24px; line-height: 1.35; letter-spacing: -0.02em; }
.product-info .product-meta { margin-top: 6px; }
.product-info .rating-line { margin-top: 10px; }
.pi-price { margin-top: 20px; padding-top: 20px; border-top: 1px solid #EEF0F3; }
.pi-price .price { margin: 0; font-size: 28px; line-height: 1.3; }
.pi-ship { margin: 6px 0 0; font-size: 15px; color: #4E5968; }
.pi-ship b { color: #191F28; font-weight: 600; }
.pi-region { margin: 4px 0 0; font-size: 14px; color: #6B7684; }
.pi-region a { color: #4E5968; text-decoration: underline; text-underline-offset: 3px; }
.product-info .buybox { margin-top: 20px; border-radius: 16px; padding: 16px 20px; }
.product-info .buybox .qty-row { border-top: 0; padding-top: 0; }
.product-info .btn-row, .product-info .buy-state { margin-top: 16px; }
.dlead { margin: 32px auto 0; font-size: 17px; line-height: 1.6; color: #333D4B; font-weight: 600; }
@media (min-width: 1024px) {
  .product-info .product-title { font-size: 28px; }
  .pi-price .price { font-size: 32px; }
  .dlead { margin-top: 48px; font-size: 19px; }
}

/* 상세 구매·선물 버튼(토스형) */
.product-info .buy-btns { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.buy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.buy-btn svg { flex: 0 0 20px; }
.buy-btn--buy { background: #112653; color: #FFFFFF; }
@media (hover: hover) { .buy-btn--buy:hover { background: #0B1B3D; } .buy-btn--gift:hover { background: #FFE1E5; } }
.buy-btn--gift { background: #FFF1F2; color: #BE3450; }
.buy-btn:focus-visible { outline: 3px solid #0F2453; outline-offset: 3px; }
.buy-btn__gift { transform-origin: 50% 85%; pointer-events: none; animation: gift-wiggle 6.6s ease-in-out 2s infinite; }
@keyframes gift-wiggle {
  0% { transform: rotate(0); }
  2% { transform: rotate(-8deg); }
  4.5% { transform: rotate(8deg); }
  7% { transform: rotate(-5deg); }
  9.1%, 100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .buy-btn__gift { animation: none; } }
.buy-gift-hint { margin: 12px 0 0; text-align: center; font-size: 13px; color: #8B95A1; }

/* 메인 PC 폭을 다른 페이지(.container 1160px, 좌우 32px)와 통일 */
@media (min-width: 1024px) {
  .page-mk .header__inner { max-width: var(--container); padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .mk-hero__inner { max-width: var(--container); padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .mk-strip { max-width: calc(var(--container) - 2 * var(--sp-8)); }
  .mk-wrap, .mk-what { max-width: var(--container); }
  .mk-what { padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .mk-detail { padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .mk-reviews .mk-wrap, .mk-faq .mk-wrap { padding-left: var(--sp-8); padding-right: var(--sp-8); }
}

/* PC: 내용이 짧은 페이지도 푸터가 화면 맨 아래에 붙도록(#main이 남은 높이를 채움) */
@media (min-width: 1024px) {
  body:not(.admin) { min-height: 100vh; display: flex; flex-direction: column; }
  body:not(.admin) > #main { flex: 1 0 auto; width: 100%; }
  body:not(.admin) > .footer { flex-shrink: 0; }
}

/* 스크롤바 유무로 페이지마다 헤더·본문이 좌우로 밀리지 않게 자리 고정 */
html { scrollbar-gutter: stable; }

/* PC 주문서: 다음/결제 버튼을 화면 하단 고정 대신 단계 내용 바로 아래에 */
@media (min-width: 1024px) {
  .page-ck .ck-cta { position: static; background: none; padding: 28px 0 0; z-index: auto; }
  .page-ck .ck-cta__inner { max-width: none; }
}

/* 푸터 저작권 줄: '사업자 정보 자세히 보기'를 © 후포수산과 같은 글자로, 밑줄 없이 한 줄에 */
.footer__copy { flex-wrap: nowrap; gap: 10px; }
.js-foot body:not(.page-mk) .footer__more { font: inherit; font-size: 13px; color: #8B95A1; text-decoration: none; min-height: 32px; white-space: nowrap; }
@media (hover: hover) { .js-foot body:not(.page-mk) .footer__more:hover { color: #4E5968; } }

/* 선물 주문: 보내는 분 / 받는 분 구분 제목 */
.ck-sub { margin: 20px 0 4px; font-size: 15px; font-weight: 700; color: #4E5968; }
.ck-title + .ck-sub { margin-top: 4px; }

/* 배송 요청사항: 선택 + 직접 입력 */
.ck-memo { margin-top: 4px; }
.ck-memo__sel { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.ck-memo__txt { margin-top: 8px; }
html:not(.js-ck) .ck-memo__sel { display: none; }

/* ==== 파트너스 랜딩 V2 (토스형, 흰 배경 · 2단 히어로) ==== */
.pl { color: #191F28; }
.pl-hero { background: #F8FAFC; padding: 40px 0 44px; }
.pl-hero__grid { display: grid; gap: 32px; align-items: center; }
.pl-eyebrow { margin: 0; font-size: 14px; font-weight: 700; color: #C8372D; }
.pl-title { margin: 10px 0 14px; font-size: 30px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
.pl-desc { margin: 0; font-size: 16px; line-height: 1.7; color: #6B7684; }
.pl-earn { margin: 24px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.pl-earn span { font-size: 16px; font-weight: 600; color: #333D4B; }
.pl-earn strong { font-size: 34px; font-weight: 800; color: #C8372D; letter-spacing: -0.02em; }
.pl-earn-sub { margin: 4px 0 0; font-size: 14px; color: #6B7684; }
.pl-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px; border: 0; border-radius: 14px; background: #112653; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .2s ease; }
.pl-cta[disabled] { background: #C9CED6; cursor: default; }
@media (hover: hover) { a.pl-cta:hover { background: #0B1B3D; } }
.pl-cta:focus-visible { outline: 3px solid #112653; outline-offset: 3px; }
.pl-cta--hero { margin-top: 24px; width: 100%; }
.pl-cta-note { margin: 10px 0 0; font-size: 13px; color: #8B95A1; }
/* 휴대폰 미리보기(HTML/CSS) */
.pl-phone { justify-self: center; width: 100%; max-width: 320px; padding: 12px; border-radius: 36px; background: #191F28; box-shadow: 0 20px 48px rgba(17, 38, 83, .16); }
.pl-phone__screen { background: #F2F4F6; border-radius: 26px; padding: 22px 14px 16px; display: grid; gap: 10px; }
.pl-phone__hi { margin: 0 4px 2px; font-size: 15px; font-weight: 700; }
.pl-card { background: #fff; border-radius: 18px; padding: 16px 18px; }
.pl-card--main { display: grid; gap: 2px; }
.pl-card--main span { font-size: 13px; color: #6B7684; }
.pl-card--main b { font-size: 20px; }
.pl-card--main .pl-card__label { margin-top: 10px; }
.pl-card--main strong { font-size: 28px; font-weight: 800; color: #C8372D; letter-spacing: -0.02em; }
.pl-card--row { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; }
.pl-card--row em { font-style: normal; font-size: 13px; font-weight: 700; color: #112653; background: #EEF1F7; border-radius: 999px; padding: 6px 12px; }
.pl-phone__note { margin: 4px 4px 0; font-size: 11px; color: #8B95A1; text-align: center; }
/* 공통 구간 */
.pl-sec { padding: 52px 0; }
.pl-sec--soft { background: #F8FAFC; }
.pl-h2 { margin: 0 0 10px; font-size: 24px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; }
.pl-lead { margin: 0 0 24px; font-size: 16px; line-height: 1.7; color: #6B7684; }
.pl-foot { margin: 20px 0 0; font-size: 14px; color: #6B7684; }
.pl-narrow { max-width: 760px; }
.pl-steps { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.pl-steps li { background: #fff; border: 1px solid #EEF0F3; border-radius: 18px; padding: 20px; display: grid; gap: 6px; }
.pl-steps b { font-size: 17px; display: grid; gap: 2px; }
.pl-steps b small { font-size: 12px; font-weight: 700; color: #C8372D; letter-spacing: .04em; }
.pl-steps li > span:last-child { font-size: 15px; line-height: 1.6; color: #6B7684; }
.pl-ico { width: 48px; height: 48px; border-radius: 14px; background: #EEF1F7; color: #112653; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.pl-grades { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pl-grade { background: #fff; border-radius: 18px; padding: 18px; display: grid; gap: 4px; align-content: start; }
.pl-grade--base { box-shadow: inset 0 0 0 2px #112653; }
.pl-grade__name { font-size: 16px; font-weight: 800; color: #112653; }
.pl-grade__cond { font-size: 13px; color: #6B7684; }
.pl-grade__fee { margin-top: 6px; font-size: 22px; font-weight: 800; }
.pl-grade__fee small { font-size: 13px; font-weight: 600; color: #6B7684; }
.pl-grade__ben { margin-top: 6px; font-size: 13px; }
.pl-grade__ben summary { cursor: pointer; color: #4E5968; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.pl-grade__ben p { margin: 4px 0 0; line-height: 1.6; color: #4E5968; }
.pl-cta-wrap { margin-top: 24px; text-align: center; }
.pl-basis { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #4E5968; }
.pl-shares { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pl-shares li { background: #F8FAFC; border-radius: 18px; padding: 18px 20px; display: grid; gap: 6px; }
.pl-shares__ratio { font-size: 20px; font-weight: 800; }
.pl-shares__row { display: flex; justify-content: space-between; font-size: 15px; color: #4E5968; }
.pl-shares__row b { color: #191F28; }
.pl-red { color: #C8372D !important; }
.pl-points { margin: 20px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 15px; line-height: 1.6; color: #333D4B; }
.pl-final { padding: 56px 0 64px; text-align: center; background: #F8FAFC; }
.pl-final .pl-cta { min-width: 280px; }
@media (min-width: 768px) {
  .pl-title { font-size: 40px; }
  .pl-steps { grid-template-columns: repeat(3, 1fr); }
  .pl-grades { grid-template-columns: repeat(4, 1fr); }
  .pl-shares { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .pl-h2 { font-size: 28px; }
  .pl-sec { padding: 72px 0; }
}
@media (min-width: 1024px) {
  .pl-hero { padding: 72px 0 80px; }
  .pl-hero__grid { grid-template-columns: 1.1fr .9fr; gap: 56px; }
  .pl-title { font-size: 46px; }
  .pl-earn strong { font-size: 40px; }
  .pl-cta--hero { width: auto; min-width: 300px; }
  .pl-phone { justify-self: end; }
}

/* 주문서: 제주·도서산간 안내는 주소 검색 버튼 바로 아래 */
.ck-zip + [data-region-msg] { margin: -6px 0 14px; font-size: 14px; }
.ck-zip + [data-region-msg]:empty { display: none; }
.ck-addr .ck-memo { margin-top: 8px; }

/* 주문서: 할인 코드 적용 알림 */
.ck-toast { position: fixed; left: 50%; top: calc(var(--hdr-real, 56px) + 16px); z-index: 120; transform: translate(-50%, -12px); opacity: 0; pointer-events: none; max-width: calc(100vw - 40px); padding: 14px 20px; border-radius: 14px; background: #191F28; color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); transition: opacity .25s ease, transform .25s ease; }
.ck-toast::before { content: '✓'; display: inline-block; margin-right: 8px; color: #6FCF97; font-weight: 800; }
.ck-toast--bad::before { content: '!'; color: #FF8A80; }
.ck-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ck-flash { animation: ckFlash 1.4s ease; border-radius: 8px; }
@keyframes ckFlash { 0%, 100% { background: transparent; } 20% { background: #FFF1F2; } }
@media (prefers-reduced-motion: reduce) { .ck-toast { transition: none; } .ck-flash { animation: none; } }
.ck-toast { width: max-content; }
/* 알림 위치: 모바일 하단 가운데(고정 버튼 위), PC 오른쪽 하단 */
.ck-toast { top: auto; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); }
.ck-toast.is-on { transform: translate(-50%, 0); }
@media (min-width: 1024px) {
  .ck-toast { left: auto; right: 32px; bottom: 48px; transform: translateY(12px); }
  .ck-toast.is-on { transform: none; }
}

/* 파트너스 휴대전화 로그인: 입력 카드 폭을 좁게(PC에서 입력칸이 지나치게 길지 않게) */
.page-pphone #main > form.card, .page-pphone #main > .notice { max-width: 440px; margin-left: auto; margin-right: auto; }

/* ==== 파트너 센터(토스형): 연회색 바탕 + 흰 카드, 큰 숫자, 넉넉한 여백 ==== */
.page-pt { background: #F2F4F6; }
.page-pt .pc-nav { box-shadow: none; border-bottom-color: #E9ECEF; }
.page-pt .pc-nav__inner { max-width: var(--container); }
.pt { color: #191F28; padding: 28px 0 40px; }
.pt-wrap { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.pt-hello { margin: 0 0 16px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pt-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #EEF1F7; color: #112653; }
.pt-chip--royal { background: #FFF4E5; color: #B25E00; }
.pt-chip--diamond { background: #E8F3FF; color: #1B64DA; }
.pt-chip--platinum { background: #F1ECFF; color: #5B3CC4; }
.pt-card { background: #fff; border-radius: 20px; padding: 22px 22px; }
.pt-card__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pt-card__head h3 { margin: 0; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pt-sum { display: grid; gap: 12px; }
.pt-label { display: block; font-size: 14px; color: #6B7684; font-weight: 600; }
.pt-big { display: block; margin-top: 6px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: #C8372D; }
.pt-mid { display: block; margin-top: 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.pt-mini { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pt-mini li { background: #F8FAFC; border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.pt-mini span { font-size: 12px; color: #8B95A1; }
.pt-mini b { font-size: 16px; }
.pt-next { margin: 14px 0 0; font-size: 14px; color: #4E5968; }
.pt-bar { height: 8px; border-radius: 4px; }
.pt-dl { margin: 10px 0 0; display: grid; gap: 10px; }
.pt-dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.pt-dl dt { color: #6B7684; }
.pt-dl dd { margin: 0; font-weight: 700; }
.pt-link { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 700; color: #112653; text-decoration: none; }
.pt-sec { margin-top: 32px; scroll-margin-top: 80px; }
.pt-h { margin: 0 0 12px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.pt-desc { margin: -4px 0 14px; font-size: 14px; line-height: 1.7; color: #4E5968; }
.pt-help { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: #8B95A1; }
.pt-muted { font-size: 13px; color: #8B95A1; }
.pt-red { color: #C8372D !important; }
/* 링크 바·버튼 */
.pt-linkbar { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.pt-select, .pt-input { min-height: 48px; border: 0; border-radius: 12px; background-color: #F2F4F6; padding: 0 14px; font-size: 15px; color: #191F28; font-family: inherit; }
.pt-select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.pt-input { flex: 1 1 220px; min-width: 0; }
.pt-linkbar .pt-select { flex: 0 1 200px; }
.pt-btn { min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: #112653; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
.pt-btn--sub { background: #EEF1F7; color: #112653; }
@media (hover: hover) { .pt-btn:hover { background: #0B1B3D; } .pt-btn--sub:hover { background: #E1E6F0; } }
.pt-btn:focus-visible, .pt-select:focus-visible, .pt-input:focus-visible { outline: 3px solid #112653; outline-offset: 2px; }
.pt-quick { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pt-quick a, .pt-quick button { width: 100%; display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border: 0; border-radius: 14px; background: #F8FAFC; color: #333D4B; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; }
@media (hover: hover) { .pt-quick a:hover, .pt-quick button:hover { background: #EEF1F7; } }
.pt-notice { margin: 12px 0 0; padding: 14px 18px; border-radius: 14px; background: #FFF4F2; font-size: 13px; line-height: 1.6; color: #6B3A35; }
.pt-notice b { color: #C8372D; margin-right: 4px; }
/* 추천 코드 카드 */
.pt-codes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pt-code { display: grid; gap: 14px; align-content: start; }
.pt-code__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-code__chip { font-size: 20px; font-weight: 800; letter-spacing: .06em; color: #112653; }
.pt-code__memo { font-size: 13px; color: #8B95A1; }
.pt-code__title { font-size: 17px; }
.pt-code__split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pt-code__split div { background: #F8FAFC; border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; }
.pt-code__split span { font-size: 12px; color: #8B95A1; }
.pt-code__split b { font-size: 18px; }
.pt-code__form { display: flex; gap: 8px; }
.pt-code__form .pt-select { flex: 1; }
.pt-code--new { border: 2px dashed #DDE2E8; }
/* 등급 */
.pt-two { display: grid; gap: 12px; }
.pt-tiers { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; }
.pt-tiers li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #F8FAFC; font-size: 14px; }
.pt-tiers li.is-me { background: #EEF1F7; box-shadow: inset 0 0 0 2px #112653; }
.pt-tiers__name { font-weight: 700; }
.pt-tiers__cond { color: #6B7684; font-size: 13px; }
.pt-tiers details { grid-column: 1 / -1; font-size: 13px; color: #4E5968; }
.pt-tiers summary { cursor: pointer; color: #6B7684; }
.pt-tiers details p { margin: 4px 0 0; line-height: 1.6; }
.pt-bens .ben { border: 0; background: #F8FAFC; border-radius: 14px; }
/* 리포트 */
.pt-seg .seg__item { border: 0; background: #F2F4F6; }
.pt-seg .seg__item.is-on { background: #112653; color: #fff; }
.pt-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-range .input { max-width: 170px; min-height: 44px; border: 0; background: #F2F4F6; border-radius: 12px; }
.pt-kpis { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pt-kpis div { background: #F8FAFC; border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; }
.pt-kpis span { font-size: 13px; color: #8B95A1; }
.pt-kpis b { font-size: 22px; font-weight: 800; }
.pt-tbl th, .pt-tbl td { border-color: #F2F4F6 !important; }
/* 홍보 문구·주문 */
.pt-promo { border: 0; background: #F8FAFC; border-radius: 14px; padding: 14px; font-size: 14px; line-height: 1.7; }
.pt-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pt-empty { margin: 24px 0; text-align: center; color: #8B95A1; line-height: 1.7; }
.pt-orders { list-style: none; padding: 0; margin: 0; display: grid; }
.pt-orders li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F2F4F6; font-size: 14px; }
.pt-orders li > span { display: grid; gap: 2px; }
.pt-orders small { color: #8B95A1; font-size: 12px; }
.pt-foot { margin-top: 24px; }
@media (min-width: 768px) {
  .pt-wrap { padding: 0 32px; }
  .pt-hello { font-size: 26px; }
  .pt-sum { grid-template-columns: 1.4fr 1fr 1fr; }
  .pt-codes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .pt-two { grid-template-columns: 1fr 1fr; align-items: start; }
  .pt-kpis { grid-template-columns: repeat(4, 1fr); }
  .pt-sec { margin-top: 40px; }
  .pt-big { font-size: 40px; }
}
@media (max-width: 420px) { .pt-quick { grid-template-columns: repeat(2, 1fr); } .pt-linkbar .pt-select { flex: 1 1 100%; } }
@media (min-width: 768px) { .page-pt .pc-nav__inner { padding: 0 32px; } }

/* 결제 화면: 미결제 자동 취소 안내 · 주문서 완료 버튼 금액 */
.pay-deadline { margin: 12px 0 0; font-size: 14px; color: #4E5968; line-height: 1.6; }
.pay-deadline b { color: #C8372D; }
.ck-pay__sum { font-size: 14px; font-weight: 600; opacity: .85; }