/* 온리베이비 리뉴얼 UI 목업 — 디자인 시스템
   토큰명은 요청서 3-2-2와 동일 (Figma 스타일명 = CSS 변수명) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  --mint-50: #f0f9f8;
  --mint-100: #daf1ef;
  --mint-200: #ace2dc;
  --mint-400: #38b8ab;
  --mint-600: #24756d;
  --mint-700: #1d5e57;
  --yellow-50: #fff8e5;
  --yellow-100: #ffedc2;
  --yellow-400: #ffb400;
  --yellow-600: #cc9000;
  --yellow-800: #855e00;
  --gray-900: #252525;
  --gray-700: #444444;
  --gray-500: #6d6e70;
  --gray-400: #999999;
  --gray-300: #d6d6d6;
  --gray-200: #e9e9e9;
  --gray-100: #f4f4f4;
  --white: #ffffff;
  --error: #d93636;
  --success: #1f7a4d;
  --info: #2962a8;

  --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  /* 타입 스케일: Display / H1~H4 / Body L·M·S / Caption */
  --fs-display: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
  --fs-h1: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + .6vw, 1.625rem);
  --fs-h4: 1.125rem;
  --fs-body-l: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  --fs-body-m: 1rem;
  --fs-body-s: .9375rem;
  --fs-caption: .8125rem;

  --radius: 20px;      /* 사진·패널 */
  --radius-s: 12px;    /* 입력·작은 박스 */
  --margin: clamp(16px, 4vw, 56px);
  --content: 1200px;
  --header-h: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 140px; }
body {
  margin: 0; background: var(--white); color: var(--gray-700);
  font-family: var(--font); font-size: var(--fs-body-m); line-height: 1.6;
  letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere;
  font-feature-settings: "tnum" 0;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mint-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--gray-900); margin: 0; line-height: 1.2; letter-spacing: -.035em; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 3px solid var(--mint-400); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--mint-200); color: var(--gray-900); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - var(--margin) * 2, var(--content)); margin-inline: auto; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 버튼 ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 26px; border: 0; border-radius: 999px;
  font-size: var(--fs-body-m); font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none !important;
  transition: background-color .2s, color .2s, transform .15s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-l { --h: 60px; padding: 0 34px; font-size: 1.0625rem; }
.btn-s { --h: 40px; padding: 0 18px; font-size: var(--fs-body-s); }
.btn-order { background: var(--yellow-400); color: var(--gray-900); }
.btn-order:hover { background: var(--yellow-600); }
.btn-primary { background: var(--mint-600); color: var(--white); }
.btn-primary:hover { background: var(--mint-700); }
.btn-secondary { background: var(--gray-900); color: var(--white); }
.btn-secondary:hover { background: #000; }
.btn-outline { background: var(--white); color: var(--gray-900); border: 1.5px solid var(--gray-300); }
.btn-outline:hover { border-color: var(--gray-900); }
.btn-text { background: none; color: var(--mint-600); padding: 0 4px; }
.btn-text:hover { text-decoration: underline !important; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--gray-100); color: var(--gray-500); cursor: not-allowed; transform: none; border-color: transparent; }
.btn .icon { width: 20px; height: 20px; }

/* ---------- 헤더 ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); transition: box-shadow .25s; } /* taste-skill-ignore: 실제 오버레이·상태 표시·표 행 */
.util { background: var(--gray-100); font-size: var(--fs-caption); transition: margin-top .25s var(--ease); }
.util .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 22px; height: 36px; }
.util a { color: var(--gray-700); }
.util .sns { display: flex; gap: 12px; margin-left: 6px; }
.util .sns a { display: inline-flex; color: var(--gray-500); }
.util .sns .icon { width: 18px; height: 18px; }
.gnb-bar .wrap { display: flex; align-items: center; height: var(--header-h); gap: 40px; transition: height .25s var(--ease); }
.logo img { height: 46px; width: auto; transition: height .25s var(--ease); }
.gnb-bar nav { margin-left: auto; }
.gnb { display: flex; gap: 6px; }
.gnb > li { position: relative; }
.gnb > li > a { display: block; padding: 12px 18px; color: var(--gray-900); font-weight: 600; font-size: 1.0625rem; border-radius: 999px; }
.gnb > li > a:hover, .gnb > li:focus-within > a { background: var(--mint-50); text-decoration: none; }
.gnb > li > a[aria-current="page"] { color: var(--mint-600); }
.gnb .sub {
  position: absolute; left: 50%; top: calc(100% + 6px); min-width: 168px; padding: 10px;
  background: var(--white); border-radius: 16px; box-shadow: 0 16px 40px rgba(37,37,37,.12); /* taste-skill-ignore: 실제 오버레이·상태 표시·표 행 */
  display: none; transform: translateX(-50%);
}
.gnb .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* 메뉴와 하위메뉴 사이 틈에서 hover가 끊기지 않게 */
.gnb > li:hover .sub, .gnb > li:focus-within .sub { display: block; animation: drop .2s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -6px); } }
.gnb .sub a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--gray-700); white-space: nowrap; }
.gnb .sub a:hover { background: var(--mint-50); color: var(--mint-700); text-decoration: none; }
.header-cta { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--gray-100); align-items: center; justify-content: center; cursor: pointer; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(37,37,37,.08); } /* taste-skill-ignore: 실제 오버레이·상태 표시·표 행 */
.site-header.is-scrolled .util { margin-top: -36px; }
.site-header.is-scrolled .gnb-bar .wrap { height: 64px; }
.site-header.is-scrolled .logo img { height: 36px; }

/* 모바일 사이드 메뉴 */
.drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer-dim { position: absolute; inset: 0; background: rgba(37,37,37,.5); opacity: 0; transition: opacity .3s; }
.drawer.is-open .drawer-dim { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); background: var(--white);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s var(--ease); overflow-y: auto;
}
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.drawer-head img { height: 36px; width: auto; }
.drawer-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--gray-100); display: grid; place-items: center; cursor: pointer; }
.drawer-util { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 20px 20px; }
.drawer-util a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; border-radius: 14px; background: var(--mint-50); color: var(--gray-900); font-size: var(--fs-caption); font-weight: 600; }
.drawer-util .icon { color: var(--mint-600); }
.acc { padding: 0 20px; }
.acc details { border-radius: 14px; }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 8px; font-size: 1.125rem; font-weight: 700; color: var(--gray-900); cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .icon { transition: transform .25s; color: var(--gray-500); }
.acc details[open] summary .icon { transform: rotate(180deg); color: var(--mint-600); }
.acc details[open] { background: var(--mint-50); }
.acc details ul { padding: 0 8px 12px; }
.acc details a { display: block; padding: 10px 12px; color: var(--gray-700); }
.drawer-foot { margin-top: auto; padding: 20px; display: grid; gap: 10px; }
.drawer-foot .btn { width: 100%; }
.drawer-sns { display: flex; gap: 16px; justify-content: center; color: var(--gray-500); padding-top: 6px; }

/* 모바일 하단 고정 바 + Top */
.bottom-bar { display: none; }
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--gray-900); color: var(--white); display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: .25s var(--ease);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--mint-700); }

/* ---------- 푸터 ---------- */
.site-footer { background: var(--gray-900); color: #c9c9c9; font-size: var(--fs-body-s); margin-top: clamp(96px, 12vw, 180px); }
.site-footer a { color: var(--white); }
.foot-top { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 48px; padding: 72px 0 48px; }
.foot-top img { height: 64px; width: auto; margin-bottom: 20px; }
.foot-top h2 { color: var(--white); font-size: var(--fs-body-m); margin-bottom: 14px; letter-spacing: -.01em; }
.foot-tel { font-size: 2rem; font-weight: 800; color: var(--white); letter-spacing: -.02em; line-height: 1.1; }
.foot-tel a { color: inherit; }
.foot-top dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.foot-top dt { color: #a8a8a8; }
.foot-top dd { margin: 0; color: #e5e5e5; }
.foot-sns { display: flex; gap: 10px; margin-top: 18px; }
.foot-sns a { width: 44px; height: 44px; border-radius: 50%; background: #3a3a3a; display: grid; place-items: center; }
.foot-sns a:hover { background: var(--mint-600); }
.foot-bottom { background: #1b1b1b; padding: 24px 0 28px; font-size: var(--fs-caption); color: #a8a8a8; }
.foot-bottom .wrap { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; }
.foot-badges { display: flex; gap: 8px; }
.foot-badges span { padding: 4px 10px; border-radius: 999px; background: #333; color: #e5e5e5; }

/* ---------- 서브 공통 ---------- */
.sub-visual { background: var(--mint-50); }
.sub-visual .wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; min-height: 340px; }
.sub-visual h1 { font-size: var(--fs-display); letter-spacing: -.045em; }
.sub-visual p { margin-top: 18px; font-size: var(--fs-body-l); color: var(--gray-700); max-width: 32ch; }
.sub-visual figure { margin: 0; align-self: stretch; padding: 28px 0; }
.sub-visual figure img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius); }
.tabs-bar { position: sticky; top: 64px; z-index: 30; background: var(--white); }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  flex: none; display: inline-flex; align-items: center; min-height: 60px; padding: 0 20px; border: 0; background: none; cursor: pointer;
  font-size: 1.0625rem; font-weight: 600; color: var(--gray-500); box-shadow: inset 0 -3px 0 transparent; transition: color .2s, box-shadow .2s; /* taste-skill-ignore: 실제 오버레이·상태 표시·표 행 */
}
.tabs a:hover, .tabs button:hover { color: var(--gray-900); text-decoration: none; }
.tabs [aria-current="true"], .tabs [aria-selected="true"] { color: var(--mint-600); box-shadow: inset 0 -3px 0 var(--mint-600); } /* taste-skill-ignore: 실제 오버레이·상태 표시·표 행 */
.section { padding: clamp(80px, 10vw, 160px) 0; }
.section-head { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head h2 { font-size: var(--fs-h1); }
.section-head p { font-size: var(--fs-body-l); max-width: 46ch; }
.lead { font-size: var(--fs-body-l); color: var(--gray-700); }

/* 페이지 제목형 (주문·회원·게시판) */
.page-title { padding: clamp(48px, 6vw, 88px) 0 clamp(28px, 3vw, 40px); }
.page-title h1 { font-size: var(--fs-h1); }
.page-title p { margin-top: 12px; color: var(--gray-700); font-size: var(--fs-body-l); }

/* ---------- 단계 표시 ---------- */
.stepper { display: flex; gap: 8px; counter-reset: s; margin: 8px 0 40px; }
.stepper li { flex: 1; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: var(--gray-100); color: var(--gray-500); font-weight: 600; font-size: var(--fs-body-s); }
.stepper li::before { counter-increment: s; content: counter(s); width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--gray-500); font-weight: 800; font-variant-numeric: tabular-nums; }
.stepper li span { display: block; font-size: var(--fs-caption); font-weight: 500; }
.stepper li.is-done { background: var(--mint-50); color: var(--mint-700); }
.stepper li.is-done::before { content: ""; background: var(--mint-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 5.5 3.5 3.5 7.5-7.5'/%3E%3C/svg%3E") no-repeat center; }
.stepper li.is-current { background: var(--mint-600); color: var(--white); }
.stepper li.is-current::before { color: var(--mint-700); }
.stepper li.is-current span { color: var(--mint-100); }

/* ---------- 알림 메시지 ---------- */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-s); font-size: var(--fs-body-s); line-height: 1.5; }
.notice .icon { width: 22px; height: 22px; margin-top: 1px; }
.notice strong { color: inherit; }
.notice-info { background: #eaf0f7; color: var(--info); }
.notice-success { background: #e9f2ed; color: var(--success); }
.notice-error { background: #fbebeb; color: #a82424; }
.notice-yellow { background: var(--yellow-50); color: var(--yellow-800); }
.toast { position: fixed; left: 50%; bottom: 32px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .3s var(--ease); background: var(--gray-900); color: var(--white); padding: 14px 22px; border-radius: 999px; font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,.2); } /* taste-skill-ignore: 실제 오버레이·상태 표시·표 행 */
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 배지 ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-caption); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.badge-mint { background: var(--mint-100); color: var(--mint-700); }
.badge-yellow { background: var(--yellow-100); color: var(--yellow-800); }
.badge-gray { background: var(--gray-100); color: var(--gray-700); }
.badge-info { background: #eaf0f7; color: var(--info); }
.badge-success { background: #e9f2ed; color: var(--success); }
.badge-error { background: #fbebeb; color: var(--error); }

/* ---------- 폼 ---------- */
.form-card { background: var(--gray-100); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); }
.form-card .terms-box { background: var(--white); }
.form-card + .form-card { margin-top: 20px; }
.form-card > h2 { font-size: var(--fs-h3); margin-bottom: 6px; }
.form-card > .desc { color: var(--gray-500); font-size: var(--fs-body-s); margin-bottom: 24px; }
.field { display: grid; gap: 8px; margin-top: 22px; align-content: start; }
.field:first-of-type { margin-top: 0; }
.field > label, .field > .label { font-weight: 700; color: var(--gray-900); font-size: var(--fs-body-s); }
.req { color: #b42828; margin-left: 2px; }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-s);
  background: var(--white); font-size: var(--fs-body-m); color: var(--gray-900); transition: border-color .2s, box-shadow .2s; /* taste-skill-ignore: 실제 오버레이·상태 표시·표 행 */
}
.textarea { padding: 14px 16px; min-height: 120px; resize: vertical; line-height: 1.6; }
.select { appearance: none; padding-right: 40px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23444' stroke-width='1.8'%3E%3Cpath d='m1 1 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; }
.input::placeholder, .textarea::placeholder { color: var(--gray-500); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--gray-500); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--mint-600); box-shadow: 0 0 0 4px var(--mint-100); } /* taste-skill-ignore: 실제 오버레이·상태 표시·표 행 */
.input:disabled { background: var(--gray-100); color: var(--gray-500); border-color: var(--gray-200); }
.is-error .input, .is-error .select, .input.is-error { border-color: var(--error); }
.is-error .input:focus { box-shadow: 0 0 0 4px #fbebeb; } /* taste-skill-ignore: 실제 오버레이·상태 표시·표 행 */
.help { font-size: var(--fs-caption); color: var(--gray-500); }
.err-msg { display: none; font-size: var(--fs-caption); color: var(--error); font-weight: 600; }
.is-error .err-msg { display: block; }
.ok-msg { font-size: var(--fs-caption); color: var(--success); font-weight: 600; }
.row { display: flex; gap: 8px; align-items: center; }
.row > .input, .row > .select { flex: 1; min-width: 0; }
.row .sep { color: var(--gray-500); flex: none; }
.row .btn { flex: none; min-height: 52px; border-radius: var(--radius-s); }
.tel3 .input, .tel3 .select { text-align: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.grid-2 .field { margin-top: 22px; }

.check, .radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; color: var(--gray-900); }
.check input, .radio input { appearance: none; width: 24px; height: 24px; margin: 0; flex: none; border: 1.5px solid var(--gray-300); background: var(--white); cursor: pointer; transition: .15s; display: grid; place-items: center; }
.check input { border-radius: 7px; }
.radio input { border-radius: 50%; }
.check input:checked { background: var(--mint-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 5.5 3.5 3.5 7.5-7.5'/%3E%3C/svg%3E") no-repeat center; border-color: var(--mint-600); }
.radio input:checked { border: 7px solid var(--mint-600); }
.check input:disabled, .radio input:disabled { background: var(--gray-100); border-color: var(--gray-200); cursor: not-allowed; }
.check input:disabled + span { color: var(--gray-500); }
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; color: var(--gray-900); min-height: 44px; }
.switch input { appearance: none; width: 48px; height: 28px; border-radius: 999px; background: var(--gray-300); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); transition: transform .2s var(--ease); }
.switch input:checked { background: var(--mint-600); }
.switch input:checked::after { transform: translateX(20px); }
.terms-box { height: 160px; overflow-y: auto; padding: 16px 18px; border-radius: var(--radius-s); background: var(--gray-100); font-size: var(--fs-body-s); color: var(--gray-700); line-height: 1.7; }
.all-agree { display: flex; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--mint-50); font-weight: 700; font-size: 1.0625rem; }
.form-actions { display: flex; gap: 12px; justify-content: center; margin-top: 40px; }
.form-actions .btn { min-width: 180px; }

/* 수량 스테퍼 */
.qty { display: inline-flex; align-items: center; border-radius: 999px; background: var(--gray-100); padding: 4px; }
.qty button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--white); color: var(--gray-900); font-size: 1.25rem; font-weight: 600; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .1s; }
.qty button:hover { background: var(--mint-100); }
.qty button:active { transform: scale(.92); }
.qty button:disabled { background: transparent; color: var(--gray-400); cursor: not-allowed; }
.qty output { min-width: 40px; text-align: center; font-weight: 800; color: var(--gray-900); font-variant-numeric: tabular-nums; }

/* ---------- 표 / 리스트 ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-s); }
.table th { background: var(--gray-100); color: var(--gray-900); font-weight: 700; padding: 14px 12px; text-align: center; }
.table th:first-child { border-radius: 12px 0 0 12px; }
.table th:last-child { border-radius: 0 12px 12px 0; }
.table td { padding: 18px 12px; border-bottom: 1px solid var(--gray-200); text-align: center; color: var(--gray-700); }
.table td.l { text-align: left; }
.table tr:hover td { background: var(--mint-50); }
.table a { color: var(--gray-900); font-weight: 600; }

/* 페이지네이션·검색 */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 48px; }
.pagination a, .pagination span { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--gray-700); font-weight: 600; font-variant-numeric: tabular-nums; }
.pagination a:hover { background: var(--mint-50); text-decoration: none; }
.pagination [aria-current="page"] { background: var(--mint-600); color: var(--white); }
.search-bar { display: flex; gap: 8px; justify-content: center; margin-top: 32px; }
.search-bar .select { width: 140px; }
.search-bar .input { width: min(320px, 100%); }

/* ---------- 레이어 팝업 ---------- */
dialog.layer { width: min(92vw, 880px); max-height: 88vh; padding: 0; border: 0; border-radius: 24px; color: var(--gray-700); box-shadow: 0 30px 80px rgba(0,0,0,.25); } /* taste-skill-ignore: 실제 오버레이·상태 표시·표 행 */
dialog.layer::backdrop { background: rgba(37,37,37,.6); }
dialog.layer[open] { animation: pop .3s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.layer-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 28px; background: var(--white); }
.layer-head h2 { font-size: var(--fs-h3); }
.layer-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--gray-100); display: grid; place-items: center; cursor: pointer; flex: none; }
.layer-close:hover { background: var(--gray-200); }
.layer-body { padding: 0 28px 28px; }
.layer-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; background: var(--gray-100); font-size: var(--fs-body-s); }
.layer-foot label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }

/* ---------- 모션 (진입) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1080px) {
  .section-head { grid-template-columns: 1fr; gap: 14px; }
  .gnb, .util { display: none; }
  .header-cta { margin-left: auto; --h: 44px; padding: 0 20px; }
  .menu-btn { display: inline-flex; margin-left: 8px; }
  .gnb-bar .wrap, .site-header.is-scrolled .gnb-bar .wrap { height: 64px; }
  .logo img, .site-header.is-scrolled .logo img { height: 36px; }
  .tabs-bar { top: 64px; }
}
@media (max-width: 760px) {
  :root { --radius: 16px; }
  body { font-size: var(--fs-body-m); padding-bottom: 72px; }
  .header-cta { display: none; }
  .menu-btn { margin-left: auto; }
  .bottom-bar {
    display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--white); box-shadow: 0 -6px 20px rgba(37,37,37,.08); /* taste-skill-ignore: 실제 오버레이·상태 표시·표 행 */
  }
  .bottom-bar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; border-radius: 14px; font-weight: 700; font-size: var(--fs-body-s); color: var(--gray-900); background: var(--gray-100); text-decoration: none; }
  .bottom-bar a.order { background: var(--yellow-400); }
  .bottom-bar .icon { width: 20px; height: 20px; }
  .to-top { bottom: 88px; right: 16px; width: 44px; height: 44px; }
  .foot-top { grid-template-columns: 1fr; gap: 32px; padding: 56px 0 36px; }
  .sub-visual .wrap { grid-template-columns: 1fr; gap: 0; min-height: 0; padding-top: 36px; }
  .sub-visual figure { padding: 20px 0 24px; }
  .sub-visual figure img { max-height: 200px; }
  .section-head { grid-template-columns: 1fr; gap: 14px; }
  .stepper { gap: 6px; }
  .stepper li { flex-direction: column; gap: 6px; padding: 12px 6px; text-align: center; font-size: var(--fs-caption); }
  .stepper li span { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
  dialog.layer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .layer-head, .layer-body { padding-left: 20px; padding-right: 20px; }
  .search-bar { flex-wrap: wrap; }
  .search-bar .select { width: 110px; }
  .search-bar .input { flex: 1; width: auto; }
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; }
  .table-cards tr { padding: 18px 4px; border-bottom: 1px solid var(--gray-200); }
  .table-cards td { border: 0; padding: 2px 0; text-align: left; }
  .table-cards td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 72px; color: var(--gray-500); font-size: var(--fs-caption); }
  .table-cards tr:hover td { background: none; }
}