/* =========================================================
   가산연합의원 — 데스크탑 (style.css)
   FIGMA-TO-CODE.md 규칙 기반 / 값은 공식 Figma MCP에서 추출
   반응형(태블릿·모바일)은 다음 단계
   ========================================================= */

/* ---------- 1. 토큰 ---------- */
:root {
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-serif: "Nanum Myeongjo", serif;

  /* 테마 색상 — 피부과(기본) */
  --color-primary: #ff5151;
  --color-primary-strong: #e63a3a;
  --color-primary-soft: #faedec;
  --color-primary-line: #f4cdc7;
  --color-gradient-top: #ffe5e7;
}

/* 내과 테마 — data-dept="internal" 일 때 색만 교체 */
:root[data-dept="internal"] {
  --color-primary: #1db8b8;
  --color-primary-strong: #159c9c;
  --color-primary-soft: #e6f7f7;
  --color-primary-line: #a5e3e3;
  --color-gradient-top: #72e2e2;
}

:root {
  --color-kakao: #ffe000;
  --color-kakao-text: #401c1d;
  --color-ink: #171717;
  --color-text: #575757;
  --color-muted: #757575;
  --color-white: #ffffff;
  --color-toggle-bg: #a8a2a0;
  --color-line: #d5d5d5;
  --color-cream: #f6f1ec;
  --color-equip-bg: #fbf3f1;
  --color-footer-bg: #fafafa;
  --color-gray09-title: #2e2e2e;
  /* 수량 스테퍼 버튼 — 진료과 테마와 무관한 중립 회색 (Figma #b4b4b4) */
  --color-stepper: #b4b4b4;
  --color-stepper-strong: #9a9a9a;
  /* 뱃지 3종 — 모두 피부과 전용이라 진료과 테마를 따르지 않는 고정색 */
  --color-badge-hit: #ff5151;
  --color-badge-hit-bg: rgba(255, 81, 81, 0.2);
  --color-badge-first: #2047e4;
  --color-badge-first-bg: #dee3fb;
  --color-badge-event: #08BE72;
  --color-badge-event-bg: #DCF6EB;
  /* 삭제 계열(전체삭제·줄 삭제) — 피부과·내과 모두 같은 빨강. 테마를 따르지 않는다 */
  --color-danger: #ff3535;
  --color-danger-strong: #e02020;
  /* 진료과 선택 페이지 배경 (Figma 117:1215) */
  --color-select-bg: #f0f0f0;
  /* Figma 변수 Grays/gray09-title — 모달 텍스트 */

  --radius-card: 16px;
  --radius-pill: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-25: 100px;

  --content-w: 1440px;
  --gutter: 24px;

  /* 고정 GNB 높이 — 앵커 이동 시 헤더에 가리지 않게 쓰는 값.
     script.js가 로드·리사이즈 때 실측값으로 덮어씀. 아래는 JS 없을 때의 대비값. */
  --gnb-h: 94px;
}

/* ---------- 2. reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: 1.6;
  background: var(--color-white);
}

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

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

ul,
ol {
  list-style: none;
}

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

h1,
h2,
h3 {
  font-weight: 400;
  line-height: 1.6;
}

del {
  color: var(--color-muted);
  text-decoration: line-through;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- 3. 레이아웃 · 공통 ---------- */
.l-container {
  width: min(var(--content-w), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.c-eyebrow {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.6;
  color: var(--color-primary);
}

.c-section-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.6;
  color: var(--color-ink);
  text-align: center;
  word-break: keep-all;
  /* 한글 단어 단위 줄바꿈 */
}

.c-section-title em {
  color: var(--color-primary);
  font-style: normal;
}

.c-section-title--left {
  text-align: left;
}

/* ---------- 4. 버튼 ---------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  border-radius: var(--radius-card);
  padding: 16px 8px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

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

.c-btn__ico {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-btn--primary:hover {
    background: var(--color-primary-strong);
  }
}

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

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-btn--kakao:hover {
    background: #f2d500;
  }
}

.c-btn:active {
  transform: scale(.98);
}

.c-btn--map {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-line);
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-btn--map:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}

.c-btn--add {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  background: #fff;
  padding: 12px;
  border-radius: var(--radius-card);
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-btn--add:hover {
    background: var(--color-primary);
    color: #fff;
  }
}

/* ---------- 5. GNB (헤더) ---------- */
.c-gnb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-bottom: 1px solid var(--color-line);
}

.c-gnb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

/* GNB가 fixed라, 앵커로 이동하면 섹션 상단이 헤더에 가림.
   도착 지점을 헤더 높이만큼 내려서 제목이 잘리지 않게 함. */
section[id] {
  scroll-margin-top: var(--gnb-h);
}

.c-gnb__logo {
  display: inline-flex;
  align-items: center;
}

.c-gnb__logo img {
  height: 34px;
  width: auto;
}

.c-gnb__menu {
  display: flex;
  gap: var(--space-2);
}

.c-gnb__menu a {
  display: inline-block;
  padding: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ink);
  border-radius: var(--radius-pill);
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-gnb__menu a:hover {
    color: var(--color-primary);
  }
}

/* ---------- 6. 히어로 ---------- */
.c-hero {
  position: relative;
  min-height: 818px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* 과별 영상 두 개가 같은 자리에 겹쳐 있고, 활성인 것만 보인다 */
.c-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* PC: 기본 중앙 */
  opacity: 0;
  transition: opacity .35s ease;
}

.c-hero__bg.is-active {
  opacity: 1;
}

.c-hero__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(40, 34, 32, .55) 0%, rgba(40, 34, 32, .15) 55%, rgba(40, 34, 32, 0) 100%);
}

.c-hero__inner {
  position: relative;
  z-index: 1;
}

.c-toggle {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  background: var(--color-toggle-bg);
  border: 1px solid #fff;
  padding: 4px;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(22, 25, 29, .04);
}

.c-toggle__btn {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: background-color .15s ease;
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-toggle__btn:not(.is-active):hover {
    background: rgba(255, 255, 255, .18);
  }
}

.c-toggle__btn.is-active {
  background: var(--color-primary);
}

.c-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.6;
  color: #fff;
  word-break: keep-all;
  /* 한글 단어 단위 줄바꿈 */
  margin: var(--space-8) 0 var(--space-12);
}

.c-hero__cta {
  width: 200px;
}

/* 모바일에서만 줄바꿈되는 <br> */
.u-br-m {
  display: none;
}

@media (max-width: 768px) {
  .u-br-m {
    display: inline;
  }
}

/* ---------- 7. 인트로 ---------- */
.c-intro {
  padding: var(--space-25) 0;
}

.c-intro__inner {
  display: grid;
  grid-template-columns: 587px minmax(0, 1fr);
  gap: var(--space-25);
  align-items: center;
}

.c-intro__media {
  aspect-ratio: 587 / 644;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-cream);
}

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

.c-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.c-intro__body .c-eyebrow {
  margin-bottom: var(--space-6);
}

.c-intro__title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.6;
  color: var(--color-ink);
  word-break: keep-all;
}

.c-intro__desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-text);
  word-break: keep-all;
}

/* ---------- 8. 장비 (Beauty Technology) ---------- */
.c-equip {
  padding: var(--space-25) 0;
  background: linear-gradient(0deg, var(--color-gradient-top) -149.83%, #f8f8f8 58.59%);
}

.c-equip__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-16);
}

.c-equip__body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}

.c-equip__cats ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.c-cat {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  font-size: 18px;
  color: var(--color-text);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-cat:hover:not(.is-active) {
    border-color: var(--color-primary-line);
    color: var(--color-ink);
  }
}

.c-cat:active {
  transform: scale(.98);
}

.c-cat.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}

.c-equip__cards {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.c-devcard {
  flex: 0 0 300px;
}

.c-devcard__img {
  height: 292px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .12);
}

.c-devcard__img img {
  max-height: 242px;
  width: auto;
  object-fit: contain;
}

.c-devcard__name {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-ink);
  text-align: center;
}

.c-devcard__desc {
  font-size: 14px;
  color: var(--color-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* ---------- 9. 시술 선택 (Consultation) ---------- */
.c-treatment {
  padding: var(--space-25) 0;
}

.c-treatment__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}

.c-treatment__tabs ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

.c-tab {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: 16px 8px;
  font-size: 18px;
  color: var(--color-text);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-tab:hover:not(.is-active) {
    border-color: var(--color-primary-line);
    color: var(--color-ink);
  }
}

.c-tab:active {
  transform: scale(.98);
}

.c-tab.is-active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 600;
}

.c-treatment__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 587px;
  gap: var(--space-6);
  margin-top: var(--space-8);
  align-items: start;
}

.c-treatment__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-content: start;
}

/* 세로 채움 — 데이터 앞 절반이 왼쪽 열, 뒤 절반이 오른쪽 열로 내려간다.
   기본값(가로 채움)은 좌·우가 번갈아 채워지므로 열 단위로 묶을 수 없다.
   --rows(행 수)는 항목 수에 따라 script.js가 넣는다. */
.c-treatment__list.is-colflow {
  grid-template-rows: repeat(var(--rows, 1), auto);
}

/* 열·행을 script.js가 --col / --row로 넣어준다.
   grid-auto-flow: column에 맡기지 않는 이유 — 왼쪽 열이 짧으면 다음 항목이
   그 빈 칸을 되메워서 오른쪽 그룹이 왼쪽으로 넘어온다. */
.c-treatment__list.is-colflow .c-trow {
  grid-column: var(--col);
  grid-row: var(--row);
}

.c-trow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 13px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #ffffff;
}

.c-trow__info {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

/* 뱃지 — 시술명 위에 한 줄로 올라간다. 모양은 3종 공통, 색만 modifier로 갈린다.
   시술 카드(.c-trow)와 장바구니 줄(.c-cart__item) 두 곳에서 같이 쓰므로 독립 블록으로 둔다.
   Figma 스펙은 display: inline-flex지만 여기서는 flex + width: fit-content로 둔다 —
   시술명(.c-trow__name)이 display: inline이라 inline-flex면 뱃지가 시술명과 같은 줄에 붙어버린다.
   flex는 블록 레벨이라 제 줄을 차지하고, fit-content가 없으면 부모 폭 전체로 늘어난다. */
.c-badge {
  display: flex;
  width: fit-content;
  padding: 0 var(--space-2);
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
  /* 뱃지 ↔ 시술명 간격 4px */
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

/* HIT — 인기 시술. 각자 원래 탭의 제자리에 붙는다 */
.c-badge--hit {
  background: var(--color-badge-hit-bg);
  color: var(--color-badge-hit);
}

/* 첫 체험가 이벤트 */
.c-badge--first {
  background: var(--color-badge-first-bg);
  color: var(--color-badge-first);
}

/* 이벤트 */
.c-badge--event {
  background: var(--color-badge-event-bg);
  color: var(--color-badge-event);
}

/* 시술명 + 옵션은 한 줄에 이어 흐르게 두고, 자리가 모자랄 때만 옵션이 다음 줄로 내려감.
   → "주름 (보톨렉스-국산)"처럼 짧은 건 1줄, 긴 시술명은 자동으로 2줄 */
.c-trow__name {
  display: inline;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
  word-break: keep-all;
  /* 단어 단위 줄바꿈 — 한글 가독성 */
}

/* 옵션(제품·횟수) — 시술명 뒤에 이어붙되, 옵션 자체는 중간에서 안 쪼개짐 */
.c-trow__opt {
  display: inline;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-muted);
  white-space: nowrap;
}

/* 같은 시술의 다른 줄이 이미 내려갔으면 이 줄도 맞춰 내린다 (판정은 script.js의 syncOptWrap) */
.c-trow.is-optblock .c-trow__opt {
  display: block;
}

.c-trow__part {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 2px;
}

.c-trow__price {
  text-align: right;
  line-height: 1.3;
}

.c-trow__price del {
  display: block;
  font-size: 14px;
}

.c-trow__price strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
}

/* 견적 패널 */
.c-cart {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 482px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: 12px 16px;
}

.c-cart__empty {
  color: #757575;
  font-size: 15px;
  padding: var(--space-4) 0;
}

.c-cart__top {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.c-cart__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
}

.c-cart__title span {
  color: var(--color-primary);
}

/* 제목 줄 — 좌: 제목 / 우: 전체삭제 (Figma 117:986) */
.c-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* 삭제 계열이라 진료과 테마를 따르지 않고 항상 빨강 (Figma #ff3535) */
.c-cart__clear {
  flex-shrink: 0;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-danger);
  background: #fff;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-card);
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-cart__clear:hover:not(:disabled) {
    background: var(--color-danger);
    color: #fff;
  }
}

/* 담은 시술이 없으면 누를 게 없다 */
.c-cart__clear:disabled {
  opacity: .3;
  cursor: default;
}

/* 담은 시술이 많아져도 패널이 끝없이 길어지지 않게 — 목록만 안에서 스크롤한다.
   상한은 10줄 분량(줄 71px + 줄간격 24px = 71*10 + 24*9 = 926px).
   다만 화면보다 커지면 총금액·예약 버튼이 아래로 밀려 안 보이므로,
   min()으로 "10줄"과 "화면에 들어가는 높이" 중 작은 쪽을 쓴다.
   260px = 제목줄 + 총금액 + 버튼 영역의 실측 높이. */
.c-cart__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: min(926px, calc(100vh - 260px));
  overflow-y: auto;
  /* 목록 끝에서 페이지가 딸려 스크롤되지 않게 */
  overscroll-behavior: contain;
  /* 스크롤바가 가격·삭제 버튼에 붙지 않도록 */
  padding-right: var(--space-1);
  scrollbar-width: thin;
  scrollbar-color: var(--color-stepper) transparent;
}

.c-cart__list::-webkit-scrollbar {
  width: 6px;
}

.c-cart__list::-webkit-scrollbar-thumb {
  background: var(--color-stepper);
  border-radius: var(--radius-pill);
}

.c-cart__list::-webkit-scrollbar-track {
  background: transparent;
}

/* 한 줄 = 시술정보 | 스테퍼 | 가격 + 삭제 (Figma 117:989) */
.c-cart__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* 시술명은 제 폭만 차지하고 필요할 때만 줄어든다.
   남는 공간을 먹지 않아야 스테퍼가 시술명 바로 옆에 붙는다. */
.c-cart__info {
  flex: 0 1 auto;
  min-width: 0;
}

/* 남는 공간은 여기서 흡수 → 가격·삭제는 항상 오른쪽 끝에 정렬된다.
   가격·삭제 자체는 줄어들지 않는다 (긴 시술명이 가격을 덮던 문제 방지) */
.c-cart__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  flex-shrink: 0;
  margin-left: auto;
}

/* 수량 스테퍼 — 회색 버튼은 테마와 무관한 중립 색 */
.c-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.c-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--space-2);
  background: var(--color-stepper);
  color: #fff;
  transition: background-color .15s ease;
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-stepper__btn:hover {
    background: var(--color-stepper-strong);
  }
}

.c-stepper__btn svg {
  width: 14px;
  height: 14px;
}

.c-stepper__count {
  min-width: 42px;
  padding: 4px 6px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* 자릿수 바뀔 때 폭이 안 흔들리게 */
}

.c-cart__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  word-break: keep-all;
  /* 폭이 모자라면 단어 단위로 줄바꿈 */
}

.c-cart__opt {
  font-size: 14px;
  color: var(--color-text);
}

/* 부위·설명 — 시술 카드의 .c-trow__part와 같은 톤으로 맞춘다 */
.c-cart__part {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 2px;
  word-break: keep-all;
}

.c-cart__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
  text-align: right;
  /* 금액 자릿수가 달라도 스테퍼가 줄마다 같은 자리에 서도록 최소 폭을 준다 */
  min-width: 90px;
}

.c-location {
  background: linear-gradient(0deg, var(--color-gradient-top) -149.83%, #f8f8f8 58.59%);
}

/* 삭제 — icon/minus.svg를 그대로 쓴다.
   삭제 계열은 진료과와 무관하게 빨강(#ff3535)으로 통일한다. */
.c-cart__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  transition: opacity .15s ease;
}

.c-cart__remove img {
  width: 24px;
  height: 24px;
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-cart__remove:hover {
    opacity: .65;
  }
}

.c-location__map {
  cursor: pointer;
}

.c-location__map img {
  transition: transform .3s ease;
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-location__map:hover img {
    transform: scale(1.03);
  }
}

.c-cart__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.c-cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-2);
}

.c-cart__total>span {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
}

.c-cart__total small {
  font-size: 20px;
  font-weight: 700;
}

.c-cart__total strong {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
}

.c-cart__actions {
  display: flex;
  gap: var(--space-6);
}

.c-cart__actions .c-btn {
  flex: 1;
}

/* ---------- 10. 오시는 길 (Location) ---------- */
.c-location {
  padding: var(--space-25) 0;
}

.c-location__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.c-location__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 587px;
  gap: var(--space-16);
  align-items: start;
}

.c-location__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-location__subtitle {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.c-hours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-10);
  margin-bottom: var(--space-8);
}

.c-hours div {
  display: flex;
  gap: var(--space-3);
  font-size: 18px;
}

.c-hours dt {
  color: var(--color-text);
}

.c-hours dd {
  font-weight: 600;
  color: var(--color-ink);
}

.c-location__addr {
  font-size: 18px;
  color: var(--color-ink);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.c-location__ways {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  font-size: 18px;
  color: var(--color-text);
}

.c-location__ways li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.c-ico {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.c-location__actions {
  display: flex;
  gap: var(--space-6);
}

.c-location__actions .c-btn {
  flex: 1;
}

.c-location__map {
  aspect-ratio: 587 / 482;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-cream);
}

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

/* ---------- 11. 푸터 ---------- */
.c-footer {
  background: var(--color-footer-bg);
  color: var(--color-muted);
  padding: var(--space-6) 0;
}

.c-footer__links {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

/* 이용약관은 모달을 여는 동작이라 <button>. 옆의 <a>와 겉모습은 같게 맞춘다. */
.c-footer__links a,
.c-footer__link {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-muted);
}

.c-footer__link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-footer__link:hover {
    color: var(--color-ink);
  }
}

.c-footer__logo {
  margin-bottom: var(--space-8);
}

.c-footer__logo img {
  height: 34px;
  width: auto;
}

.c-footer__contents {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.32px;
  margin-bottom: var(--space-8);
}

/* 대표 · 사업자등록번호 · 문의전화 — 좁은 화면에서는 줄바꿈으로 흘린다.
   항목 자체는 중간에서 안 쪼개지도록 nowrap (예: 전화번호가 두 줄로 갈라지지 않게) */
.c-footer__master {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.c-footer__master span {
  white-space: nowrap;
}

.c-footer__time {
  display: flex;
  gap: var(--space-2);
}

.c-footer__time-title {
  white-space: nowrap;
}

.c-footer__time-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.c-footer__copy {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.32px;
  color: var(--color-muted);
}

/* ---------- 15. 중복 선택 알림 모달 (Figma 178:1944) ---------- */
.c-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.c-modal[hidden] {
  display: none;
}

/* 모달이 떠 있는 동안 뒤 페이지가 같이 스크롤되지 않게 잠근다 */
.is-modal-open,
.is-modal-open body {
  overflow: hidden;
}

.c-modal__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}

.c-modal__box {
  position: relative;
  width: min(408px, 100%);
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .15);
  animation: modal-in .18s ease-out;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.c-modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 44px 40px 48px;
}

.c-modal__icon {
  width: 48px;
  height: 48px;
  color: #ff8c00;
}

.c-modal__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.04em;
  color: var(--color-gray09-title);
  text-align: center;
}

.c-modal__confirm {
  width: 100%;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.54px;
  color: #fff;
  background: var(--color-primary);
  transition: background-color .15s ease;
}

/* 마우스가 있는 기기에서만 hover — 터치는 탭 후에도 상태가 남아
   버튼이 계속 눌린 것처럼 보인다 */
@media (hover: hover) {
  .c-modal__confirm:hover {
    background: var(--color-primary-strong);
  }
}

/* ---------- 15-1. 문서형 모달 — 이용약관 (Figma 191:609 modal-type1) ----------
   본문이 길어 박스 높이를 제한하고 본문만 세로 스크롤시킨다.
   모바일 높이 519px·폭 328px은 Figma 값. PC 폭 560px은 Figma에 PC 프레임이
   없어 가독성 기준으로 정한 값이다. */
.c-modal--doc .c-modal__box {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - var(--space-6) * 2));
  max-height: min(720px, calc(100dvh - var(--space-6) * 2));
  /* 모바일 주소창 대응 */
}

.c-modal__doc {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* Figma gap 24 */
  padding: var(--space-6);
  /* Figma padding 24 */
  min-height: 0;
  /* 이게 없으면 자식이 안 줄어들어 스크롤이 안 생김 */
}

.c-modal__doc-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.04em;
  color: var(--color-gray09-title);
  text-align: center;
}

.c-modal__doc-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 끝까지 스크롤해도 뒤 페이지가 안 밀림 */
  -webkit-overflow-scrolling: touch;
  white-space: pre-line;
  /* Figma 원문의 줄바꿈·빈 줄 그대로 */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.04em;
  color: var(--color-gray09-title);
  word-break: keep-all;
}

@media (prefers-reduced-motion: reduce) {
  .c-modal__box {
    animation: none;
  }

  .c-hero__bg {
    transition: none;
  }
}

@media (max-width: 768px) {
  .c-modal__body {
    padding: 32px 24px 36px;
  }

  .c-modal__title {
    font-size: 18px;
    letter-spacing: -0.72px;
  }

  .c-modal__icon {
    width: 40px;
    height: 40px;
  }

  /* 모바일 카드 높이 — Figma 191:609 프레임 값 519px */
  .c-modal--doc .c-modal__box {
    max-height: min(519px, calc(100vh - var(--space-6) * 2));
    max-height: min(519px, calc(100dvh - var(--space-6) * 2));
  }

  .c-modal__confirm {
    font-size: 16px;
    padding: 14px 16px;
  }
}

/* ---------- 12. 모바일 전용 요소 (데스크탑 기본 숨김) ---------- */
.c-gnb__burger {
  display: none;
}

.c-cart__close {
  display: none;
}

.c-cartbar {
  display: none;
}

/* ---------- 13. 태블릿 (769 ~ 1024px) ---------- */
@media (max-width: 1024px) {
  .c-hero__title {
    font-size: 48px;
  }

  .c-intro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .c-intro__media {
    max-width: 560px;
  }

  .c-equip__body {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: var(--space-8);
  }

  .c-cat {
    width: 100%;
  }

  .c-treatment__body {
    grid-template-columns: 1fr;
  }

  .c-location__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .c-location__map {
    order: -1;
  }
}

/* ---------- 14. 모바일 (~768px) — Figma 01-main-mobile(360) 기준 ---------- */
@media (max-width: 768px) {
  :root {
    --gutter: 16px;
    --gnb-h: 61px;
  }

  /* --gnb-h는 script.js가 실측값으로 덮어씀 */

  /* GNB — 로고 축소 + 햄버거 메뉴 */
  .c-gnb__inner {
    padding: 16px 0;
  }

  .c-gnb__logo img {
    height: 24px;
  }

  .c-gnb__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-line);
    display: none;
  }

  .c-gnb.is-open .c-gnb__nav {
    display: block;
  }

  .c-gnb__menu {
    flex-direction: column;
    gap: 0;
    padding: 8px 16px 12px;
  }

  .c-gnb__menu a {
    display: block;
    padding: 12px 8px;
    font-size: 16px;
  }

  .c-gnb__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 2px;
  }

  .c-gnb__burger span {
    width: 22px;
    height: 2px;
    background: var(--color-ink);
    border-radius: 1px;
  }

  /* 히어로 */
  .c-hero {
    min-height: 480px;
  }

  /* 세로 화면: 인물(영상 오른쪽)이 화면에 들어오도록 위치 조정 */
  .c-hero__bg {
    object-position: 80% 25%;
  }

  .c-hero__title {
    font-size: 32px;
    margin: var(--space-6) 0 var(--space-6);
  }

  .c-toggle__btn {
    font-size: 14px;
    padding: 4px 12px;
  }

  /* 공통 타이포 */
  .c-eyebrow {
    font-size: 16px;
  }

  .c-section-title {
    font-size: 24px;
  }

  /* 인트로 */
  .c-intro {
    padding: 46px 0;
  }

  .c-intro__inner {
    gap: var(--space-8);
  }

  .c-intro__media {
    aspect-ratio: 328 / 359;
    border-radius: var(--radius-card);
    max-width: none;
  }

  .c-intro__body {
    gap: var(--space-6);
  }

  .c-intro__body .c-eyebrow {
    margin-bottom: var(--space-2);
  }

  .c-intro__title {
    font-size: 24px;
  }

  .c-intro__desc {
    font-size: 14px;
  }

  /* 장비 */
  .c-equip {
    padding: 46px 0;
  }

  .c-equip__head {
    margin-bottom: var(--space-6);
  }

  .c-equip__body {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .c-equip__cats ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .c-cat {
    width: auto;
    height: 46px;
    padding: 0 12px;
    font-size: 14px;
    border: 1px solid var(--color-line);
    background: #fff;
  }

  .c-equip__cards {
    gap: var(--space-8);
  }

  .c-devcard {
    flex: 0 0 198px;
  }

  .c-devcard__img {
    height: 210px;
  }

  .c-devcard__img img {
    max-height: 162px;
  }

  .c-devcard__name {
    font-size: 16px;
    text-align: left;
  }

  .c-devcard__desc {
    font-size: 14px;
    text-align: left;
  }

  /* 시술 */
  .c-treatment {
    padding: 46px 0 46px;
  }

  .c-treatment__tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .c-tab {
    width: auto;
    height: 46px;
    padding: 0 12px;
    font-size: 14px;
    border: 1px solid var(--color-line);
    background: #fff;
  }

  .c-tab.is-active {
    border-color: var(--color-primary);
  }

  .c-treatment__list {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* 모바일은 1열이므로 세로 채움을 되돌린다. 안 되돌리면 한 줄에 한 칸씩
     행이 --rows개만 생기고 나머지가 옆으로 넘쳐 가로 스크롤이 생긴다. */
  .c-treatment__list.is-colflow {
    grid-template-rows: none;
  }

  /* 1열에서는 열·행 지정을 풀어야 한다. 안 풀면 2번째 열을 만들려다 가로로 넘친다. */
  .c-treatment__list.is-colflow .c-trow {
    grid-column: auto;
    grid-row: auto;
  }

  .c-trow__name {
    font-size: 14px;
  }

  .c-trow__opt {
    font-size: 12px;
  }

  .c-trow__part {
    font-size: 12px;
  }

  .c-trow__price strong {
    font-size: 14px;
  }

  .c-btn--add {
    font-size: 12px;
    padding: 10px 12px;
  }

  /* 장바구니 — 하단 시트로 전환 */
  .c-cart {
    display: none;
  }

  /* 시트 자체는 스크롤하지 않는다 (overflow: hidden) —
     시트가 통째로 스크롤되면 총금액·예약 버튼이 화면 밖으로 밀려난다.
     대신 안쪽 목록만 스크롤시켜 아래 버튼은 항상 보이게 한다. */
  body.cart-open .c-cart {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    max-height: 75vh;
    overflow: hidden;
    min-height: 0;
    border: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
    padding: 20px 16px 24px;
  }

  body.cart-open .c-cartbar {
    display: none;
  }

  /* 시트(최대 75vh) 안에서 목록이 남는 높이를 차지하고 그 안에서 스크롤한다.
     min-height: 0 이 없으면 flex 자식이 내용 높이만큼 버텨서 축소되지 않는다. */
  body.cart-open .c-cart__top {
    flex: 1 1 auto;
    min-height: 0;
  }

  body.cart-open .c-cart__list {
    flex: 1 1 auto;
    min-height: 0;
    /* 높이는 시트가 정한다 — PC용 10줄 상한은 여기선 쓰지 않는다 */
    max-height: none;
  }

  body.cart-open .c-cart__bottom {
    flex-shrink: 0;
  }

  .c-cart__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 14px;
    right: 16px;
    width: 24px;
    height: 24px;
    padding: 0;
  }

  .c-cart__close img {
    width: 24px;
    height: 24px;
  }

  /* 닫기(×)가 우상단에 겹쳐 있으므로 전체삭제를 그만큼 왼쪽으로 물린다 */
  .c-cart__head {
    padding-right: 32px;
  }

  .c-cart__clear {
    padding: 8px 10px;
  }

  /* 모바일은 폭이 좁아 스테퍼 주변 여백을 줄인다 */
  .c-cart__item {
    gap: var(--space-2);
  }

  .c-cart__right {
    gap: var(--space-2);
  }

  .c-stepper__count {
    min-width: 32px;
    font-size: 15px;
  }

  .c-cart__price {
    min-width: 0;
    /* 모바일은 폭이 빠듯해 최소 폭을 풀어준다 */
  }

  /* 오시는길 */
  .c-location {
    padding: 46px 0;
  }

  .c-location__map {
    aspect-ratio: 328 / 359;
  }

  .c-location__subtitle {
    font-size: 18px;
  }

  .c-hours {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
  }

  .c-hours div {
    font-size: 14px;
  }

  .c-location__addr {
    font-size: 14px;
  }

  .c-location__ways {
    font-size: 14px;
    margin-bottom: var(--space-6);
  }

  .c-location__actions {
    flex-direction: column;
    gap: var(--space-4);
  }

  /* 푸터 */
  .c-footer__links {
    margin-bottom: var(--space-8);
  }

  .c-footer__links a,
  .c-footer__link {
    font-size: 14px;
  }

  .c-footer__logo img {
    height: 24px;
  }

  .c-footer__contents {
    font-size: 14px;
  }

  .c-footer__copy {
    font-size: 12px;
  }

  /* 하단 고정바 (담은 시술 있을 때만 — JS로 hidden 토글) */
  .c-cartbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 20px 16px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.6;
    white-space: nowrap;
    /* 금액이 길어도 줄바꿈 방지 */
  }

  .c-cartbar[hidden] {
    display: none;
  }

  .c-cartbar__group {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    min-width: 0;
    flex: 1;
    /* 남는 공간 차지 + 축소 허용 */
    overflow: hidden;
  }

  .c-cartbar__info {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .c-cartbar__sum {
    flex: 0 0 auto;
  }

  /* 금액은 절대 안 줄어듦 */
  .c-cartbar__open {
    flex: 0 0 auto;
  }

  /* 예약하기도 고정 */
  .c-cartbar__open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .c-cartbar__arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid #fff;
    border-radius: 1px;
  }

  body.has-items {
    padding-bottom: 74px;
  }
}

/* =========================================================
   16. 진료과 선택 페이지 (index.html) — Figma 117:1215
   메인(main.html)에 들어가기 전 첫 화면. 이 페이지는 JS를 쓰지 않는다.
   ========================================================= */
.l-select-page {
  min-height: 100dvh;
  background: var(--color-select-bg);
  display: flex;
}

.c-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 54px;
  /* Figma gap */
  width: min(952px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
  padding-block: var(--space-12);
}

/* ⚠️ HTML의 width·height 속성보다 이 CSS가 우선한다.
   로고 크기를 바꾸려면 HTML이 아니라 여기를 고쳐야 한다. */
.c-select__logo img {
  width: 278px;
  height: 46px;
  /* reset에서 img가 display: block이라, 부모(h1)가 가로로 늘어나면 왼쪽에 붙는다.
     text-align: center는 블록 요소에 안 먹으므로 좌우 마진으로 가운데 정렬한다. */
  margin-inline: auto;
}

.c-select__list {
  display: flex;
  gap: var(--space-6);
  /* Figma 24 */
  width: 100%;
  height: 517px;
  /* Figma 516.67 */
}

/* 카드 — 배경 사진 위에 어둡게 깔고 흰 글씨 */
.c-selcard {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12), 0 2px 3px rgba(0, 0, 0, .04);
  transition: transform .25s ease, box-shadow .25s ease;
}

.c-selcard__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 사진 위 글씨 가독성용 어둡게 깔기 */
.c-selcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .25);
  transition: background-color .25s ease;
}

.c-selcard__body {
  position: relative;
  /* ::after 위로 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: #fff;
  text-align: center;
  word-break: keep-all;
  padding: var(--space-4);
}

.c-selcard__title {
  font-size: 32px;
  font-weight: 100;
  line-height: 1.4;
}

.c-selcard__sub {
  font-size: 18px;
  font-weight: 100;
  line-height: 1.4;
}

.c-selcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18), 0 2px 3px rgba(0, 0, 0, .06);
}

.c-selcard:hover::after {
  background: rgba(0, 0, 0, .38);
}

/* 태블릿 — 카드 높이만 줄인다 (가로 2단은 유지) */
@media (max-width: 1024px) {
  .c-select {
    gap: var(--space-10);
  }

  .c-select__list {
    height: 420px;
  }

  .c-selcard__title {
    font-size: 24px;
  }

  .c-selcard__sub {
    font-size: 16px;
  }

  /* 모바일 팝업 */
  .popup_bg {
    padding: 15px;
  }

  .popup_box {
    width: 90vw;
    max-width: 90vw;
    height: auto;
  }

  .popup_cont {
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .popup_box .swiper {
    width: 100%;
    height: auto !important;
  }

  .popup_box .swiper-wrapper {
    width: 100%;
    height: auto !important;
  }

  .popup_box .swiper-slide {
    width: 100%;
    height: auto !important;
    display: block;
  }

  .popup_box .swiper-slide img {
    display: block;
    width: 100%;
    height: auto !important;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
  }

  /* 페이지네이션 */
  .swiper-pagination {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }

  .swiper-pagination-bullet {
    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    font-size: 12px;
  }

  /* 하단 버튼 */
  .popup_box .popup_btn {
    margin-top: 6px;
    font-size: 12px;
  }

  #today-close {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 4px;
  }

  #today-close:checked::after {
    font-size: 13px;
  }

  .popup_box .popup_btn img {
    width: 28px;
    height: 28px;
  }
}

/* 모바일 — 가로로 두 장을 놓기엔 좁아 세로로 쌓는다 (Figma에 모바일 시안 없음) */
@media (max-width: 768px) {
  .c-select {
    gap: var(--space-8);
    padding-block: var(--space-10);
  }

  /* 좁은 화면에서만 비율을 지키며 줄어든다 (278px가 들어가면 그대로 둔다) */
  .c-select__logo img {
    width: min(278px, 100%);
    height: auto;
  }

  .c-select__list {
    flex-direction: column;
    height: auto;
    gap: var(--space-4);
  }

  .c-selcard {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-card);
  }

  .c-selcard__title {
    font-size: 22px;
  }

  .c-selcard__sub {
    font-size: 15px;
  }

  /* 모바일 팝업 */
  .popup_bg {
    padding: 15px;
  }

  .popup_box {
    width: 90vw;
    max-width: 90vw;
    height: auto;
  }

  .popup_cont {
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  /* Swiper 높이 초기화 */
  .popup_box .swiper {
    width: 100%;
    height: auto !important;
  }

  .popup_box .swiper-wrapper {
    width: 100%;
    height: auto !important;
  }

  .popup_box .swiper-slide {
    width: 100%;
    height: auto !important;
    display: block;
  }

  /* 이미지 */
  .popup_box .swiper-slide img {
    display: block;
    width: 100%;
    height: auto !important;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
  }

  /* 페이지네이션 */
  .swiper-pagination {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }

  .swiper-pagination-bullet {
    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    font-size: 12px;
    line-height:18px;
  }

  /* 하단 버튼 */
  .popup_box .popup_btn {
    margin-top: 6px;
    font-size: 12px;
  }

  #today-close {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 4px;
  }

  #today-close:checked::after {
    font-size: 12px;
  }

  .popup_box .popup_btn img {
    width: 24px;
    height: 24px;
  }
}

/* 손가락 입력에는 hover가 없다 — 눌린 것처럼 남는 상태 방지 */
@media (hover: none) {
  .c-selcard:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12), 0 2px 3px rgba(0, 0, 0, .04);
  }

  .c-selcard:hover::after {
    background: rgba(0, 0, 0, .25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-selcard {
    transition: none;
  }

  .c-selcard:hover {
    transform: none;
  }
}

/* 팝업 */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #444;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup_bg {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.4);

  padding: 20px;
}

.popup_cont {
  position: relative;
  max-width: 1200px;
  width: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 2px;
}

.popup_box .swiper-wrapper {
  width: 100%;
  height: 675px;
}

.popup_box .popup_btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  color: #fff;
  font-size: 16px;
}

.popup_box .popup_btn label {
  align-items: center;
  display: flex;
}

#today-close {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border: 1px solid #fff;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

/* 체크됐을 때 */
#today-close:checked {
  background: #fff;
  border-color: #fff;
}

/* 체크 표시 */
#today-close:checked::after {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #000;
  font-size: 18px;
  font-weight: bold;
}

.popup_box .popup_btn img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.swiper-pagination {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
}

.swiper-pagination-bullet {
  width: 100% !important;
  height: 45px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 !important;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: #fff;
  color: #555;
  font-size: 14px;
  opacity: 1;
  cursor: pointer;
}

/* 첫 번째 줄: 3개 */
.swiper-pagination-bullet:nth-of-type(1),
.swiper-pagination-bullet:nth-of-type(2),
.swiper-pagination-bullet:nth-of-type(3) {
  grid-column: span 2;
}

/* 두 번째 줄: 2개 */
.swiper-pagination-bullet:nth-of-type(4) {
  grid-column: 1 / span 3;
}

.swiper-pagination-bullet:nth-of-type(5) {
  grid-column: 4 / span 3;
}

.swiper-pagination-bullet:nth-of-type(3),
.swiper-pagination-bullet:nth-of-type(5) {
  border-right: none;
}

.swiper-pagination-bullet:nth-of-type(4),
.swiper-pagination-bullet:nth-of-type(5) {
  border-bottom: none;
}

.swiper-pagination-bullet-active {
  background: var(--color-primary) !important;
  color: #fff !important;
}