@import url("page-stage.css?v=20260713-play-align1");

:root {
  color-scheme: light;
  --navy: #071538;
  --navy-2: #10224f;
  --mint: #b9f3dd;
  --mint-strong: #59cda9;
  --pink: #f7b6c9;
  --pink-strong: #ef769e;
  --red: #d93a2e;
  --cream: #fff8ee;
  --paper: #ffffff;
  --ink: #211b2b;
  --muted: #746d7d;
  --line: rgba(7, 21, 56, 0.12);
  --shadow: 0 18px 48px rgba(7, 21, 56, 0.13);
  --soft-shadow: 0 12px 30px rgba(7, 21, 56, 0.09);
  --radius: 8px;
  --bottom-nav-height: 82px;
  --header-action-frame-width: min(100vw, 680px);
  --app-header-height: clamp(42px, calc(var(--header-action-frame-width) * 0.1448), 112px);
  --app-bottom-reserve: calc(var(--header-action-frame-width) * 0.1862);

  /* ─── 타입 스케일 (2026-07-31) ─────────────────────────────────────
     `docs/DETAIL_PAGE_DESIGN_SYSTEM.md` 53행의 "본문 최소 18px"을 메인 페이지에도
     적용하기 위한 공통 스케일이다. 상세 11개 페이지는 이미 18.1px로 맞지만
     메인은 15.1~16.2px이라 자기 기준을 못 지키고 있었다(실측).

     단위가 cqw인 이유: 프레임 폭이 모바일 374 / PC 652.8로 달라서 vw로는 못 맞춘다.
     카드가 커지면 글자도 같이 자라고, **하한이 18px로 잠긴다.**
     ⚠️ 쓰는 쪽 조상에 container-type: inline-size가 있어야 한다.
        없으면 cqw가 뷰포트 기준으로 튄다.

     쓰는 곳: 카드 본문·제목. 아트워크 위에 얹는 글자는 그림 슬롯에 묶여 있어
     이 스케일을 못 쓴다 — 그게 아트카드를 CSS 패널로 바꿔야 하는 이유다. */
  /* ─── 설계 픽셀 `--u` (2026-08-01) ────────────────────────────────
     **PC는 모바일을 그대로 확대한 것이다.** 다른 레이아웃이 아니다.
     `AGENTS.md` 20행이 원래 그렇게 정해 놨는데 코드만 안 따르고 있었다.

     설계 기준 폭 390px. 프레임이 커지면 모든 치수가 같은 비율로 자란다.
     390 → 1배 · 680(PC 상한) → 1.744배. 프레임이 680에서 잘리므로 배율도 거기서 멈춘다.

     왜 이게 중요한가:
     - **줄바꿈이 두 폭에서 같아진다.** 글자와 칸이 같은 배율이면 한 줄에 들어가는
       글자 수가 동일하다. "PC에선 2줄인데 모바일에선 4줄"이 사라진다
       (말풍선이 그것 때문에 카드를 230px까지 부풀린 적이 있다).
     - **모바일만 검수하면 PC는 따라온다.** 검수가 절반이 된다.
     - **이미지를 한 장으로 그릴 수 있다.** 카드 비율이 두 폭에서 같아지므로
       고양이와 배경을 따로 그려 맞출 필요가 없다.

     ⚠️ 테두리·그림자는 `--u`로 키우지 않는다. 같이 키우면 조잡해진다. */
  /* ⚙️ PC 확대 손잡이 — **이 숫자 하나만 바꾸면 프레임·글자·여백이 같이 조절된다.**

     **1.35 확정 (2026-08-01, 사용자가 1.3·1.35·1.4를 화면에서 직접 비교해 고름).**
     프레임 527px · 본문 24.3px · 제목 37.8px · 화면(1280) 대비 41.1%.

     경위: 처음엔 프레임 680을 그대로 두고 1.744로 갔는데
     "글자도 카드도 너무 커서 오히려 가독성이 나쁘다"는 판단을 받았다.
     ⚠️ **글자만 줄이면 안 된다.** 프레임을 680으로 둔 채 글자만 낮추면 한 줄에 들어가는
        글자 수가 달라져 **줄바꿈이 두 폭에서 어긋난다** — 비례 구조의 핵심 이점이 사라진다.
        그래서 프레임과 내용을 같이 줄인다.

     ⚠️ 반드시 `:root`에 있어야 한다. 커스텀 속성의 `var()`는 **선언한 곳에서** 해석되므로,
        아래 `--fs-*`가 여기서 이미 굳는다. body에서 `--u`만 덮으면 프레임은 줄어도
        글자는 안 줄어든다 — 실제로 그렇게 헛짚었다.

     값별: 1.0 → 390px/본문18 · 1.2 → 468px/21.6 · 1.3 → 507px/23.4
           **1.35 → 527px/24.3** · 1.4 → 546px/25.2 · 1.744 → 680px/31.4 */
  --u-max: 1.35;
  --u: calc(min(100vw, calc(390px * var(--u-max))) / 390);

  /* ⚠️ 상한(clamp의 세 번째 값)을 두지 않는다. 상한이 비례를 끊어서
     PC가 "모바일의 확대"가 아니라 다른 레이아웃이 돼 버린다. 그게 원래 문제였다. */
  --fs-caption: calc(var(--u) * 16);   /* 배지·보조 설명 */
  --fs-body:    calc(var(--u) * 18);   /* 본문 — 모바일 기준 18px */
  --fs-title:   calc(var(--u) * 22);   /* 카드 제목 */
  --fs-display: calc(var(--u) * 28);   /* 페이지 대제목 */

  /* 줄높이 — 한글은 라틴보다 글자가 빽빽해 더 넉넉해야 읽힌다. */
  --lh-title: 1.3;
  --lh-body: 1.55;

  /* ─── 간격 스케일 ──────────────────────────────────────────────────
     글자만 키우고 간격을 그대로 두면 "잘 보이는데 보기 불편한" 상태가 된다.
     실제로 그랬다 — 16px 키커와 22px 제목 사이가 2px, 22px 이름과 18px 설명
     사이가 6px, 카드 패딩이 본문 한 줄(18px)보다 작은 14px이었다.
     간격은 글자 크기를 따라 올라가야 한다. */
  --sp-hair:  calc(var(--u) * 6);    /* 한 덩어리 안 (키커↔제목) */
  --sp-tight: calc(var(--u) * 10);   /* 가까운 관계 (제목↔본문) */
  --sp-base:  calc(var(--u) * 16);   /* 요소 사이 */
  --sp-loose: calc(var(--u) * 24);   /* 묶음 사이 */
  --card-pad: calc(var(--u) * 20);   /* 카드 안쪽 — 본문 한 줄보다 커야 한다 */

  /* ─── 카드 '바깥' 간격 위계 (2026-07-31) ───────────────────────────
     사용자 피드백 "글씨는 커졌는데 깝깝하다"의 원인.

     실측(390px): 화면 좌우 8 / 카드↔카드 8 / 4카드끼리 8 인데 카드 안쪽은 20이었다.
     즉 글자↔테두리(20)가 카드↔카드(8)보다 2.5배 넓다 — 뒤집혀 있다.
     사람 눈은 가까운 것끼리 한 덩어리로 보므로(근접성), 카드 안 요소보다
     카드끼리가 더 가까우면 카드 경계가 뭉개져 '빽빽한 한 덩어리'로 읽힌다.

     8px 하나로 통일했던 건(33b3462·e528e84) 글자가 13px이던 시절 카드 폭을
     최대로 뽑으려던 결정이다. 글자가 18~22px이 된 지금은 같은 값이 답답하다.

     위계: 카드↔카드(24) > 카드 안쪽(20) > 묶음 안(12) = 화면 좌우(12).
     비용은 카드 폭 374 → 366px(−2%)뿐이다.

     ⚠️ 기존 --*-side-pad는 '화면 좌우 여백'과 '카드 사이 간격' 두 일을 겸했다.
        그래서 둘을 다르게 줄 수가 없었다. 여기서 분리한다. */
  --nn-stack-gap: 24px;  /* 카드 ↔ 카드 (최상위 섹션 사이) */
  --nn-group-gap: 12px;  /* 한 묶음 안 (4카드끼리 등) */

  /* ─── 글씨체 (2026-08-01) ──────────────────────────────────────────
     역할이 **셋**이다. 둘로 나누면 버튼·라벨까지 명조가 되어 눈이 훑기 어려워진다.

     ⚠️ 그전까지 이 파일 13곳에 Pretendard가 '적혀만' 있고 받아오는 코드가 없었다.
        개발 PC엔 깔려 있어 정상으로 보였지만 방문자는 윈도우 기본 맑은 고딕을 보고 있었다.
        "AI로 만든 티가 난다"의 정체가 이것이다 — 개성 없는 폰트를 고른 게 아니라
        **아무것도 안 고른 상태**였다. 2026-08-01에 각 HTML <head>에서 실제로 받아온다. */

  /* 제목 — 둥근 글씨. 페이지 제목·카드 이름·브랜드에만 쓴다.
     본문까지 쓰면 긴 글이 가벼워 보인다(사주는 돈·건강·관계를 걸고 읽는 글이다). */
  --font-display: "Jua", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* 기능 글 — 버튼·라벨·값·배지·설명 한 줄. 훑어 읽어야 하므로 고딕. */
  --font-ui: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* 읽는 글(명조) — 사주·운세·궁합 풀이 본문 + 히어로 대사.
     **Noto Serif KR로 확정(2026-08-01).** 근거는 docs/FONT_SPEC.md.

     ⚠️ 한글 명조를 고를 때는 **한자가 들어 있는지부터 확인한다.** 사주는 甲子·木·偏財가
        계속 나오는데, 한글만 있는 명조를 쓰면 그 글자만 보는 사람 컴퓨터의 기본 글꼴로
        떨어진다. 실제로 이것 때문에 후보 둘이 탈락했다 — 마루 부리(한자 0자)와
        고운바탕(한자 0자). 한자만 딴 폰트로 이어 붙이는 방법도 만들어 봤지만
        **기준선이 어긋나 글자가 위아래로 튀어서** 접었다(사용자 지적). 한 폰트로 간다.
     ⚠️ KoPub 바탕은 '웹폰트 서버 탑재 별도 승인'이 필요해 탈락했다. */
  --font-reading: "Noto Serif KR", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(255, 248, 238, 0.98), rgba(255, 248, 238, 0.94)),
    radial-gradient(circle at 10% 0%, rgba(185, 243, 221, 0.58), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(247, 182, 201, 0.5), transparent 30%);
  color: var(--ink);
  font-family: "Pretendard", "Noto Sans KR", "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
}

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

button,
input,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

.app-shell {
  min-height: 100vh;
  padding-bottom: var(--bottom-nav-height);
}

.app-icon,
.nav-icon,
.terminal-icon {
  display: block;
  width: 22px;
  height: 22px;
}

.ui-icon {
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

.icon-home {
  --icon-mask: url("assets/ui/generated/nav-home-cat-house.png");
}

.icon-consult {
  --icon-mask: url("assets/ui/generated/consult-speech-paw.png?v=20260611-pangpang1");
}

.icon-play {
  --icon-mask: url("assets/ui/generated/nav-play-paw.png");
}

.icon-market {
  --icon-mask: url("assets/ui/generated/nav-market-cat-bag.png");
}

.icon-my {
  --icon-mask: url("assets/ui/generated/nav-my-cat-profile.png");
}

.icon-bell {
  --icon-mask: url("assets/ui/generated/nav-bell.png");
}

.icon-menu {
  --icon-mask: url("assets/ui/generated/nav-menu.png");
}

.icon-catnip {
  --icon-mask: url("assets/ui/generated/catnip-pot.png");
}

.icon-water {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.8c3.9 4.6 5.8 8 5.8 10.3a5.8 5.8 0 1 1-11.6 0c0-2.3 1.9-5.7 5.8-10.3Z'/%3E%3C/svg%3E");
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 10px clamp(14px, 4vw, 48px);
  background: rgba(7, 21, 56, 0.95);
  color: #fff;
  backdrop-filter: blur(18px);
}

.brand,
.header-actions,
.catnip-pill,
.hero-actions,
.farm-meta,
.section-heading,
.result-topline {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  min-width: 0;
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.brand span {
  min-width: 0;
}

.brand strong,
.brand small {
  display: block;
  white-space: nowrap;
}

.brand strong {
  font-size: 15px;
  line-height: 1.1;
}

.brand small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.header-actions {
  flex-shrink: 0;
  gap: 8px;
}

.catnip-pill {
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(185, 243, 221, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--mint);
  font-size: 13px;
  font-weight: 900;
}

.icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

html.header-action-open,
body.header-action-open {
  overflow: hidden;
}

.header-action-layer {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  pointer-events: none;
}

.header-action-layer[aria-hidden="false"] {
  display: block;
  pointer-events: auto;
}

.header-action-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 245, 215, 0.14), transparent 28%),
    rgba(7, 10, 28, 0.54);
  backdrop-filter: blur(7px);
  cursor: pointer;
}

.header-action-sheet,
.header-menu-drawer {
  position: absolute;
  color: #102046;
  font-family: "Pretendard", "Noto Sans KR", "Segoe UI", sans-serif;
  outline: none;
  box-shadow: 0 22px 70px rgba(5, 9, 30, 0.35);
}

.header-action-sheet {
  left: 50%;
  top: calc(var(--app-header-height, 78px) + max(8px, env(safe-area-inset-top)));
  width: min(520px, calc(100vw - 22px));
  max-height: min(76vh, calc(100svh - var(--app-header-height, 78px) - var(--app-bottom-reserve, 82px) - 28px), 680px);
  overflow: auto;
  padding: 12px 16px 18px;
  border: 2px solid rgba(214, 154, 67, 0.72);
  border-radius: 24px 24px 30px 30px;
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.98), rgba(255, 241, 224, 0.98)),
    radial-gradient(circle at 12% 6%, rgba(185, 243, 221, 0.42), transparent 30%),
    radial-gradient(circle at 92% 16%, rgba(247, 182, 201, 0.36), transparent 34%);
  transform: translate(-50%, -18px);
  opacity: 0;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.header-action-layer[aria-hidden="false"] .header-action-sheet:not([hidden]) {
  transform: translate(-50%, 0);
  opacity: 1;
}

.header-route-highlight {
  animation: headerTargetGlow 1.8s ease both;
}

@keyframes headerTargetGlow {
  0%,
  100% {
    filter: none;
  }
  24%,
  62% {
    filter:
      drop-shadow(0 0 12px rgba(185, 243, 221, 0.52))
      drop-shadow(0 0 18px rgba(255, 205, 222, 0.48));
  }
}

.header-action-handle {
  width: 54px;
  height: 5px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: rgba(179, 123, 54, 0.28);
}

.header-wallet-head,
.header-action-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-action-title-copy {
  min-width: 0;
}

.header-wallet-head p,
.header-action-title-row p,
.header-menu-profile p {
  margin: 0 0 3px;
  color: #b97832;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.header-wallet-head h2,
.header-action-title-row h2,
.header-menu-profile h2 {
  margin: 0;
  color: #071538;
  font-size: clamp(23px, 5.8vw, 31px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.header-wallet-head h2 em,
.header-action-title-row h2 em {
  margin-left: 7px;
  color: #b97832;
  font-size: 0.48em;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.05em;
  vertical-align: 0.16em;
}

.header-action-close {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(188, 126, 48, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.64);
  color: #9f6528;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.header-wallet-balance {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(208, 149, 74, 0.42);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 250, 235, 0.95), rgba(255, 236, 230, 0.9)),
    radial-gradient(circle at 12% 12%, rgba(185, 243, 221, 0.5), transparent 34%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 12px 28px rgba(189, 120, 58, 0.12);
  text-align: center;
}

.header-wallet-balance span,
.header-wallet-balance p {
  margin: 0;
  color: #7e6044;
  font-size: clamp(15px, 3.4vw, 15px);
  font-weight: 800;
}

.header-wallet-balance strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 4px 0 7px;
  color: #071538;
  font-size: clamp(21px, 5.7vw, 27px);
  line-height: 1;
}

.header-wallet-balance em {
  font-style: normal;
  font-size: clamp(40px, 12vw, 58px);
  font-weight: 950;
  letter-spacing: 0;
}

.header-wallet-catnip-icon {
  width: clamp(28px, 8.5vw, 42px);
  height: clamp(28px, 8.5vw, 42px);
  object-fit: contain;
  filter: drop-shadow(0 4px 7px rgba(96, 72, 28, 0.18));
}

.header-wallet-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
  padding: 5px;
  border: 1px solid rgba(194, 135, 58, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
}

.header-wallet-tabs button,
.header-alert-toolbar button,
.header-alert-editbar button {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #80664b;
  font-size: clamp(15px, 3.4vw, 15px);
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}

.header-wallet-tabs button.is-active,
.header-alert-editbar button:last-child {
  background: linear-gradient(135deg, #fff4b9, #ffd1df);
  color: #071538;
  box-shadow: 0 8px 18px rgba(174, 104, 40, 0.14);
}

.header-wallet-log-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 0 2px;
}

.header-wallet-log-head strong,
.header-wallet-log-head p,
.header-wallet-log-head span {
  margin: 0;
}

.header-wallet-log-head strong {
  display: block;
  color: #071538;
  font-size: clamp(15px, 3.8vw, 18px);
  font-weight: 950;
  line-height: 1.2;
}

.header-wallet-log-head p {
  margin-top: 3px;
  color: #76624d;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
}

.header-wallet-log-head span {
  flex: none;
  color: #b97832;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.header-wallet-history {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.header-wallet-history-item {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid rgba(209, 148, 68, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
}

.header-wallet-history-amount {
  display: grid;
  min-height: 38px;
  place-items: center;
  border-radius: 14px;
  background: rgba(185, 243, 221, 0.36);
  color: #0f6f55;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.header-wallet-history-item.is-pending .header-wallet-history-amount {
  background: rgba(255, 244, 185, 0.56);
  color: #976525;
}

.header-wallet-history-item.is-neutral .header-wallet-history-amount {
  background: rgba(255, 231, 241, 0.54);
  color: #86526d;
}

.header-wallet-history strong,
.header-wallet-history p,
.header-wallet-history time {
  margin: 0;
}

.header-wallet-history strong {
  display: block;
  font-size: 15px;
  line-height: 1.2;
}

.header-wallet-history p {
  margin-top: 3px;
  color: #76624d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.header-wallet-history time {
  color: #9b7450;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
}

.header-wallet-route-button {
  display: grid;
  min-height: 44px;
  margin-top: 10px;
  place-items: center;
  border: 1px solid rgba(193, 127, 47, 0.32);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff4b9, #ffd1df);
  color: #071538;
  font-size: clamp(15px, 3.6vw, 17px);
  font-weight: 950;
  text-align: center;
  box-shadow: 0 8px 16px rgba(171, 104, 38, 0.12);
}

.header-alert-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 14px;
  padding: 5px;
  border: 1px solid rgba(194, 135, 58, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
}

.header-alert-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #80664b;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.header-alert-tabs button.is-active {
  background: linear-gradient(135deg, rgba(255, 244, 185, 0.98), rgba(255, 210, 224, 0.96));
  color: #071538;
  box-shadow: 0 8px 18px rgba(174, 104, 40, 0.14);
}

.header-alert-toolbar,
.header-alert-editbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.header-alert-check[hidden],
.header-alert-editbar[hidden],
.header-alert-toolbar button[hidden] {
  display: none;
}

.header-alert-toolbar button,
.header-alert-editbar button {
  min-height: 34px;
  border: 1px solid rgba(193, 127, 47, 0.32);
  background: rgba(255, 255, 255, 0.72);
  color: #102046;
  padding: 0 13px;
  box-shadow: 0 8px 16px rgba(171, 104, 38, 0.1);
  cursor: pointer;
}

.header-alert-list {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.header-alert-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(203, 145, 73, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
  overflow: hidden;
}

.header-alert-item.is-unread {
  background:
    linear-gradient(90deg, rgba(185, 243, 221, 0.34), rgba(255, 255, 255, 0.72) 42%),
    rgba(255, 255, 255, 0.72);
}

.header-alert-item.is-archived {
  background:
    linear-gradient(90deg, rgba(255, 244, 185, 0.2), rgba(255, 255, 255, 0.68) 46%),
    rgba(255, 255, 255, 0.66);
}

.header-alert-check {
  display: grid;
  padding-left: 11px;
  place-items: center;
}

.header-alert-check input {
  width: 18px;
  height: 18px;
  accent-color: #d69744;
}

.header-alert-item a {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px 0 12px 12px;
}

.header-alert-check:not([hidden]) + a {
  padding-left: 0;
}

.header-alert-item span {
  width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 230, 184, 0.68);
  color: #9c6121;
  font-size: 13px;
  font-weight: 900;
}

.header-alert-item strong,
.header-alert-item p,
.header-alert-item time {
  margin: 0;
  min-width: 0;
}

.header-alert-item strong {
  color: #071538;
  font-size: 14px;
  line-height: 1.25;
}

.header-alert-item p,
.header-alert-item time {
  color: #715c48;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.header-alert-actions {
  display: flex;
  align-self: stretch;
  justify-self: end;
  overflow: hidden;
  border-left: 1px solid rgba(203, 145, 73, 0.2);
}

.header-alert-actions button {
  align-self: stretch;
  width: 52px;
  min-width: 52px;
  border: 0;
  background: rgba(255, 244, 229, 0.62);
  color: #9f6528;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.header-alert-actions button + button {
  border-left: 1px solid rgba(203, 145, 73, 0.18);
}

.header-alert-actions button.is-delete {
  background: rgba(255, 232, 232, 0.64);
  color: #9d3e39;
}

.header-alert-empty {
  margin: 12px 0 4px;
  padding: 22px 12px;
  border: 1px dashed rgba(202, 139, 62, 0.34);
  border-radius: 18px;
  color: #80664b;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.header-menu-drawer {
  top: max(10px, env(safe-area-inset-top));
  right: max(8px, calc((100vw - var(--header-action-frame-width)) / 2 + 8px), env(safe-area-inset-right));
  width: min(390px, calc(100vw - 22px));
  height: calc(100vh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
  overflow: auto;
  padding: 18px 16px 20px;
  border: 2px solid rgba(214, 154, 67, 0.72);
  border-radius: 30px 18px 18px 30px;
  background:
    linear-gradient(150deg, rgba(255, 252, 244, 0.98), rgba(255, 241, 224, 0.98)),
    radial-gradient(circle at 18% 10%, rgba(185, 243, 221, 0.38), transparent 32%),
    radial-gradient(circle at 82% 28%, rgba(247, 182, 201, 0.28), transparent 35%);
  transform: translateX(calc(100% + 28px));
  opacity: 0;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.header-action-layer[aria-hidden="false"] .header-menu-drawer:not([hidden]) {
  transform: translateX(0);
  opacity: 1;
}

.header-menu-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.header-menu-profile {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 42px 18px 4px;
  border-bottom: 1px solid rgba(197, 136, 61, 0.24);
}

/* 햄버거 메뉴 프로필 아바타.
   전에는 무대 없이 img 하나뿐이라 스킨을 깔 곳이 없었다.
   .header-menu-avatar 래퍼를 두어 다른 화면과 같은 규칙을 쓴다.
   이 메뉴는 모든 페이지에 공통으로 뜨므로 data-page 스코프를 두지 않는다. */
.header-menu-avatar {
  position: relative;
  display: grid;
  place-items: end center;
  width: 112px;
  /* 고양이 PNG가 3:4 세로라 정사각형 무대에서는 머리가 잘린다.
     설정 페이지의 .detail-profile-frame과 같은 4:5로 맞춘다. */
  aspect-ratio: 4 / 5;
  padding: 6px 6px 0;
  border: 1.5px solid rgba(214, 154, 67, 0.42);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 92%, rgba(214, 154, 67, 0.26), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 226, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 8px 20px rgba(150, 96, 32, 0.18);
  overflow: hidden;
}

.header-menu-avatar.has-skin {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 아바타는 .header-menu-avatar 무대 안을 채운다.
   무대가 크기를 정하므로 여기서는 고정 px를 쓰지 않는다.
   height는 쓰지 않는다 — 자동 높이 행에서 퍼센트 높이는 순환 참조라 무시되고
   고양이가 제 비율대로 커져서 잘린다. 폭만 주고 비율에 맡긴다. */
.header-menu-profile img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(104, 64, 29, 0.2));
}

.header-menu-profile > div {
  min-width: 0;
}

.header-menu-profile h2 {
  overflow: visible;
  font-size: clamp(21px, 5.2vw, 29px);
  letter-spacing: 0;
  text-overflow: clip;
  white-space: nowrap;
}

.header-menu-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.header-menu-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(203, 145, 73, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  animation: header-menu-in 0.34s ease both;
  animation-delay: calc(var(--menu-index, 0) * 0.035s);
}

.header-menu-list a:hover {
  transform: translateY(-2px);
  background: rgba(255, 252, 244, 0.86);
  box-shadow: 0 8px 20px rgba(150, 96, 32, 0.16);
}

.header-menu-list a:active { transform: translateY(0); }

@keyframes header-menu-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.header-menu-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: rgba(185, 243, 221, 0.46);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  font-size: 19px;
  font-style: normal;
  line-height: 1;
}

.header-menu-icon.is-warm { background: rgba(255, 244, 185, 0.62); }
.header-menu-icon.is-pink { background: rgba(255, 231, 241, 0.66); }

.header-menu-list span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.header-menu-list strong {
  color: #071538;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.25;
}

.header-menu-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #80664b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
}

.header-menu-badge {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 230, 184, 0.78);
  color: #9c6121;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
}

.header-menu-badge.is-catnip {
  background: linear-gradient(135deg, rgba(185, 243, 221, 0.9), rgba(255, 244, 185, 0.85));
  color: #0f6f55;
}

.header-menu-badge.is-new {
  background: linear-gradient(135deg, #ffd1df, #ffb9cd);
  color: #a33355;
  letter-spacing: 0.03em;
  animation: header-badge-pulse 2.2s ease-in-out infinite;
}

@keyframes header-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 83, 127, 0.34); }
  55% { box-shadow: 0 0 0 6px rgba(224, 83, 127, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .header-menu-list a,
  .header-menu-badge.is-new {
    animation: none;
  }
}

@media (max-width: 420px) {
  .header-action-sheet {
    width: min(390px, calc(100vw - 16px));
    max-height: 79vh;
    padding: 12px 12px 15px;
    border-radius: 22px 22px 26px 26px;
  }

  .header-wallet-tabs {
    gap: 5px;
  }

  .header-wallet-tabs button {
    min-height: 34px;
    font-size: 13px;
  }

  .header-wallet-history-item {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .header-wallet-history-amount {
    font-size: 13px;
  }

  .header-alert-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
  }

  .header-alert-actions button {
    width: 46px;
    min-width: 46px;
    font-size: 13px;
  }

  .header-menu-drawer {
    width: min(360px, calc(100vw - 16px));
    right: 8px;
    padding: 16px 12px 18px;
  }

  .header-menu-profile {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px;
  }

  .header-menu-avatar {
    width: 104px;
    border-radius: 20px;
  }
}

.home-main,
.page-main {
  width: min(1160px, calc(100% - 28px));
  margin: 0 auto;
}

.home-main {
  padding: 16px 0 26px;
}

.page-main {
  padding: 18px 0 28px;
}

.home-hero,
.daily-panel,
.catnip-farm,
.terminal-section,
.event-strip,
.page-hero,
.diagnosis-card,
.result-card,
.service-card,
.feature-list article,
.feature-list > a,
.my-summary article,
.my-profile-panel,
.reward-box article,
.goods-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

.home-hero {
  display: grid;
  gap: 12px;
}

.hero-copy,
.page-hero {
  overflow: hidden;
  background:
    linear-gradient(138deg, rgba(7, 21, 56, 0.98), rgba(16, 34, 79, 0.96) 58%, rgba(90, 42, 86, 0.92));
  color: #fff;
}

.hero-copy {
  padding: 22px 18px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--pink-strong);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-copy .eyebrow,
.page-hero .eyebrow {
  color: var(--mint);
}

.hero-copy h1,
.page-hero h1 {
  margin-bottom: 10px;
  font-size: clamp(34px, 10vw, 52px);
  line-height: 1.04;
}

.hero-copy p,
.page-hero p {
  max-width: 500px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.58;
}

.hero-actions {
  display: grid;
  gap: 8px;
}

.primary-button,
.secondary-button,
.text-link,
.store-button {
  min-height: 44px;
  border-radius: var(--radius);
  font-weight: 900;
}

.primary-button,
.secondary-button,
.store-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
}

.primary-button {
  border: 0;
  background: var(--pink);
  color: var(--navy);
  box-shadow: 0 10px 24px rgba(247, 182, 201, 0.24);
}

.primary-button:disabled {
  cursor: default;
  opacity: 0.68;
  box-shadow: none;
}

.secondary-button {
  border: 1px solid rgba(7, 21, 56, 0.16);
  background: #fff;
  color: var(--navy);
}

.hero-copy .secondary-button {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.hero-visual,
.compact-visual {
  position: relative;
  min-height: 228px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(140deg, rgba(185, 243, 221, 0.75), rgba(255, 255, 255, 0.96) 48%, rgba(247, 182, 201, 0.72));
  box-shadow: var(--soft-shadow);
}

.hero-visual img {
  position: absolute;
  right: -18px;
  bottom: -14px;
  width: min(104%, 500px);
  mix-blend-mode: multiply;
}

.daily-panel {
  position: relative;
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  background:
    linear-gradient(140deg, rgba(7, 21, 56, 0.98), rgba(18, 36, 82, 0.96) 58%, rgba(81, 46, 86, 0.92)),
    var(--navy);
  color: #fff;
}

.daily-panel::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -70px;
  width: 180px;
  height: 180px;
  border: 34px solid rgba(185, 243, 221, 0.1);
  border-radius: 50%;
}

.daily-copy,
.daily-badges {
  position: relative;
  z-index: 1;
}

.daily-copy h1 {
  margin-bottom: 8px;
  font-size: 30px;
  line-height: 1.12;
}

.daily-copy p:last-child {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}

.daily-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.daily-badge {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 70px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.daily-badge span {
  color: var(--mint);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.daily-badge strong {
  font-size: 13px;
  line-height: 1.25;
}

.daily-badge.alert-badge span {
  color: var(--pink);
}

.catnip-farm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  gap: 12px;
  min-height: 214px;
  margin-top: 12px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 255, 250, 0.96) 58%, rgba(255, 239, 246, 0.86)),
    #fff;
}

.catnip-farm h2,
.terminal-section h2,
.page-hero h1,
.section-heading h2,
.feature-list strong,
.my-summary strong {
  color: var(--navy);
}

.catnip-farm h2,
.terminal-section h2,
.section-heading h2 {
  margin-bottom: 8px;
  font-size: 25px;
  line-height: 1.18;
}

.catnip-farm p {
  margin-bottom: 12px;
  color: var(--muted);
  line-height: 1.54;
}

.farm-meta {
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 11px;
}

.farm-meta span {
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(7, 21, 56, 0.06);
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.farm-meta strong {
  color: var(--red);
}

.farm-visual {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
}

.farm-pot-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(132px, 100%);
  aspect-ratio: 1;
}

.farm-pot-image {
  width: 132px;
  max-width: 100%;
  filter: drop-shadow(0 13px 18px rgba(7, 21, 56, 0.14));
  transform-origin: 50% 78%;
  animation: plantIdle 4.8s ease-in-out infinite;
}

.water-drop,
.farm-sparkle,
.farm-reward-float {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.water-drop {
  top: 2px;
  width: 8px;
  height: 12px;
  border-radius: 999px 999px 999px 0;
  background: #7eb8ef;
  transform: rotate(45deg) translateY(-18px);
}

.drop-a {
  left: 42px;
}

.drop-b {
  left: 64px;
}

.drop-c {
  left: 84px;
}

.farm-sparkle {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 5px rgba(185, 243, 221, 0.25);
}

.sparkle-a {
  left: 24px;
  top: 46px;
}

.sparkle-b {
  right: 28px;
  top: 34px;
}

.farm-reward-float {
  left: 50%;
  top: 20px;
  min-width: 86px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  transform: translate(-50%, 8px);
  box-shadow: 0 10px 22px rgba(7, 21, 56, 0.18);
}

.farm-pot-stage.is-watered .farm-pot-image {
  animation: plantWatered 720ms ease both;
}

.farm-pot-stage.is-watered .water-drop {
  animation: waterDrop 760ms ease-out both;
}

.farm-pot-stage.is-watered .drop-b {
  animation-delay: 90ms;
}

.farm-pot-stage.is-watered .drop-c {
  animation-delay: 160ms;
}

.farm-pot-stage.is-watered .farm-sparkle {
  animation: sparklePop 850ms ease-out both;
}

.farm-pot-stage.is-watered .sparkle-b {
  animation-delay: 120ms;
}

.farm-pot-stage.is-watered .farm-reward-float {
  animation: rewardFloat 1150ms ease-out both;
}

.farm-pot-stage.is-bonus .farm-reward-float {
  min-width: 122px;
  background: linear-gradient(135deg, var(--pink-strong), var(--navy));
}

.plant-pot {
  position: relative;
  width: 92px;
  height: 118px;
}

.stem {
  position: absolute;
  left: 45px;
  bottom: 32px;
  width: 5px;
  height: 70px;
  border-radius: 999px;
  background: var(--mint-strong);
}

.leaf {
  position: absolute;
  border-radius: 100% 0 100% 0;
  background: var(--mint);
  border: 2px solid rgba(7, 21, 56, 0.12);
}

.leaf-a {
  left: 18px;
  top: 30px;
  width: 40px;
  height: 26px;
  transform: rotate(-28deg);
}

.leaf-b {
  right: 16px;
  top: 18px;
  width: 42px;
  height: 28px;
  transform: rotate(42deg) scaleX(-1);
}

.leaf-c {
  left: 28px;
  top: 6px;
  width: 42px;
  height: 28px;
  transform: rotate(-4deg);
}

.pot {
  position: absolute;
  left: 14px;
  bottom: 0;
  width: 64px;
  height: 42px;
  border-radius: 6px 6px 14px 14px;
  background: linear-gradient(180deg, #ee8ba9, var(--pink-strong));
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, 0.3);
}

.farm-progress {
  display: grid;
  grid-template-columns: repeat(7, 14px);
  gap: 5px;
  margin-bottom: 13px;
}

.farm-progress span {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(7, 21, 56, 0.1);
  border-radius: 100% 0 100% 0;
  background: rgba(7, 21, 56, 0.12);
  transform: rotate(-35deg);
}

.farm-progress span.done {
  background: var(--mint-strong);
  border-color: rgba(7, 21, 56, 0.18);
  box-shadow: 0 5px 12px rgba(89, 205, 169, 0.24);
}

.terminal-section {
  margin-top: 12px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.92);
}

.section-heading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-heading.tight {
  margin-bottom: 10px;
}

.terminal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.terminal-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 126px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.terminal-card.primary-terminal {
  background: linear-gradient(135deg, rgba(185, 243, 221, 0.72), rgba(255, 255, 255, 0.96));
}

.terminal-icon {
  width: 34px;
  height: 34px;
  color: var(--navy);
}

.terminal-card span {
  color: var(--navy);
  font-weight: 900;
}

.terminal-card strong {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.38;
}

.event-strip {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.7);
}

.event-strip article,
.event-card-link {
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(7, 21, 56, 0.06);
}

.event-card-link {
  color: inherit;
  text-decoration: none;
}

.event-strip span,
.feature-list span,
.my-summary span {
  display: block;
  margin-bottom: 5px;
  color: var(--pink-strong);
  font-size: 13px;
  font-weight: 900;
}

.event-strip strong {
  color: var(--navy);
  line-height: 1.35;
}

@keyframes plantIdle {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(-1.2deg) translateY(-2px);
  }
}

@keyframes plantWatered {
  0% {
    transform: scale(1) rotate(0deg);
  }
  38% {
    transform: scale(1.06) rotate(-2deg);
  }
  72% {
    transform: scale(0.98) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes waterDrop {
  0% {
    opacity: 0;
    transform: rotate(45deg) translateY(-20px);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translateY(66px);
  }
}

@keyframes sparklePop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  36% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes rewardFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.96);
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -34px) scale(0.98);
  }
}

.page-hero {
  display: grid;
  gap: 12px;
  min-height: 230px;
  padding: 22px 18px 0;
}

.page-hero h1 {
  color: #fff;
}

.page-hero img {
  align-self: end;
  justify-self: center;
  width: min(98%, 420px);
  margin-bottom: -10px;
  mix-blend-mode: multiply;
}

.consult-hero,
.market-hero {
  background:
    linear-gradient(138deg, rgba(7, 21, 56, 0.98), rgba(16, 34, 79, 0.96) 52%, rgba(90, 42, 86, 0.88));
}

.play-hero {
  background:
    linear-gradient(135deg, rgba(7, 21, 56, 0.98), rgba(22, 58, 89, 0.94));
}

.my-hero {
  min-height: 190px;
  padding-bottom: 18px;
}

.service-row {
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0;
}

.service-chip {
  min-height: 38px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.service-chip.active {
  background: var(--navy);
  color: #fff;
}

.diagnosis-layout {
  display: grid;
  gap: 12px;
}

.diagnosis-card,
.result-card {
  padding: 18px;
}

.diagnosis-card {
  background: rgba(255, 255, 255, 0.93);
}

.panel-heading p {
  margin-bottom: 8px;
  color: var(--pink-strong);
  font-size: 13px;
  font-weight: 900;
}

.panel-heading h2,
.result-core h2 {
  margin-bottom: 16px;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.24;
}

.diagnosis-card label {
  display: grid;
  gap: 7px;
  margin-bottom: 13px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
}

input,
select {
  width: 100%;
  height: 46px;
  min-width: 0;
  border: 1px solid rgba(7, 21, 56, 0.17);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--pink-strong);
  box-shadow: 0 0 0 3px rgba(247, 182, 201, 0.26);
}

.diagnosis-card .primary-button,
.catnip-farm .primary-button {
  width: 100%;
}

.result-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(7, 21, 56, 0.96), rgba(16, 34, 79, 0.94)),
    var(--navy);
  color: #fff;
}

.result-topline {
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 900;
}

.result-topline span {
  min-height: 29px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.result-core {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.element-seal {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: var(--radius);
  background: var(--active, var(--mint-strong));
  color: var(--navy);
  font-size: 42px;
  font-weight: 900;
}

.result-core p {
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 900;
}

.result-core h2 {
  margin-bottom: 0;
  color: #fff;
  font-size: 20px;
}

.result-reading {
  margin: 0;
  padding: 14px;
  border-left: 4px solid var(--active, var(--mint));
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.66;
}

.recommendation-list {
  display: grid;
  gap: 8px;
}

.recommendation {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
}

.recommendation strong {
  color: var(--mint);
  font-size: 13px;
}

.recommendation p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.48;
}

.service-grid-page,
.feature-list,
.my-summary,
.goods-section {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.service-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px 11px;
  min-height: 108px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.93);
}

.service-card span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: rgba(185, 243, 221, 0.58);
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  grid-row: span 2;
}

.service-card-icon span {
  padding: 0;
  overflow: hidden;
  background: rgba(255, 224, 178, 0.62);
}

.service-card-icon span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card strong,
.service-card p {
  margin: 0;
}

.service-card p,
.feature-list p,
.goods-body p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}

.feature-list article,
.feature-list > a,
.feature-link-card,
.my-summary article,
.goods-section {
  padding: 16px;
  background: rgba(255, 255, 255, 0.93);
}

/* feature-list 안의 링크형 항목 (설정·고객센터 진입 등) */
.feature-list > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.feature-list > a:focus-visible {
  outline: 3px solid rgba(89, 205, 169, 0.42);
  outline-offset: 3px;
}

.feature-link-card {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(212, 86, 107, 0.24);
}

.feature-link-card:focus-visible,
.event-card-link:focus-visible {
  outline: 3px solid rgba(89, 205, 169, 0.42);
  outline-offset: 3px;
}

.feature-list strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
}

.feature-list p {
  margin-bottom: 0;
}

.my-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.my-section {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.section-heading .eyebrow {
  margin-bottom: 4px;
}

.section-heading h2 {
  color: var(--navy);
  font-size: 22px;
}

.my-profile-panel {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 18px;
  background:
    linear-gradient(146deg, rgba(255, 255, 255, 0.96), rgba(255, 238, 245, 0.92)),
    radial-gradient(circle at 100% 0%, rgba(185, 243, 221, 0.45), transparent 42%);
}

.profile-avatar {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border-radius: 50%;
  background: rgba(185, 243, 221, 0.62);
  box-shadow: inset 0 0 0 1px rgba(7, 21, 56, 0.08);
}

.profile-avatar .ui-icon {
  width: 44px;
  height: 44px;
}

.profile-copy h2 {
  margin-bottom: 4px;
  color: var(--navy);
  font-size: 28px;
}

.profile-copy p {
  color: var(--muted);
  line-height: 1.5;
}

.nickname-form {
  display: grid;
  gap: 7px;
}

.nickname-form label {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.nickname-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.nickname-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(7, 21, 56, 0.13);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-weight: 800;
  padding: 12px 13px;
}

.nickname-row input:focus {
  border-color: rgba(239, 118, 158, 0.7);
  box-shadow: 0 0 0 3px rgba(239, 118, 158, 0.18);
  outline: none;
}

.nickname-row .primary-button {
  min-width: 74px;
  padding-inline: 18px;
}

.form-message {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.form-message.ok {
  color: #168866;
  font-weight: 800;
}

.form-message.error {
  color: var(--pink-strong);
  font-weight: 800;
}

.my-summary strong {
  display: block;
  font-size: 26px;
}

.my-summary em {
  font-style: normal;
}

.my-summary p,
.reward-box p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.my-summary b {
  color: var(--navy);
}

.reward-box {
  display: grid;
  gap: 10px;
}

.reward-box article {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.93);
}

.reward-box span {
  color: var(--pink-strong);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reward-box strong {
  color: var(--navy);
  font-size: 24px;
}

.reward-box em {
  font-style: normal;
}

.reward-box .secondary-button {
  width: fit-content;
  margin-top: 4px;
  font-size: 13px;
}

.goods-section {
  display: block;
}

.goods-grid {
  display: grid;
  grid-auto-columns: minmax(230px, 72%);
  grid-auto-flow: column;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.goods-card {
  display: grid;
  min-height: 278px;
  overflow: hidden;
  background: #fff;
  scroll-snap-align: start;
}

.goods-card figure {
  position: relative;
  height: 118px;
  margin: 0;
  overflow: hidden;
}

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

.element-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: grid;
  min-width: 38px;
  height: 32px;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  font-weight: 900;
}

.goods-body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: 14px;
}

.goods-body h3 {
  margin-bottom: 0;
  color: var(--navy);
  font-size: 18px;
}

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

.mini-meta span {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(7, 21, 56, 0.06);
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.store-button {
  background: var(--navy);
  color: #fff;
  font-size: 14px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  color: var(--navy);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: rgba(239, 118, 158, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.intro-shell,
.signup-shell {
  width: min(1120px, calc(100% - 28px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 0 34px;
}

.intro-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.intro-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-weight: 950;
}

.intro-brand img {
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

.intro-login {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(7, 21, 56, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.intro-hero,
.signup-layout {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.intro-hero {
  display: grid;
  gap: 10px;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(7, 21, 56, 0.98), rgba(16, 34, 79, 0.96) 62%, rgba(85, 39, 82, 0.9)),
    radial-gradient(circle at 85% 14%, rgba(185, 243, 221, 0.32), transparent 36%);
  color: #fff;
}

.intro-copy {
  padding: 26px 20px 10px;
}

.intro-copy h1,
.signup-side h1 {
  margin-bottom: 12px;
  font-size: clamp(36px, 9vw, 58px);
  line-height: 1.02;
}

.intro-copy p,
.signup-side p {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}

.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.intro-actions .text-link {
  color: rgba(255, 255, 255, 0.88);
  text-decoration-color: rgba(185, 243, 221, 0.7);
}

.intro-visual {
  align-self: end;
  margin: 0;
  padding: 0 14px;
}

.intro-visual img {
  width: min(100%, 520px);
  margin: 0 auto;
}

.intro-slide-section {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.intro-slides {
  display: grid;
  grid-auto-columns: minmax(245px, 76%);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.intro-slides article,
.intro-cta,
.signup-card,
.signup-side {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: var(--soft-shadow);
}

.intro-slides article {
  min-height: 180px;
  padding: 18px;
  scroll-snap-align: start;
}

.intro-slides span,
.step-heading span {
  color: var(--pink-strong);
  font-size: 13px;
  font-weight: 950;
}

.intro-slides strong {
  display: block;
  margin: 8px 0;
  color: var(--navy);
  font-size: 19px;
}

.intro-slides p,
.intro-cta {
  color: var(--muted);
  line-height: 1.5;
}

.intro-cta {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 16px;
}

.intro-cta strong {
  color: var(--navy);
  font-size: 18px;
}

.signup-layout {
  display: grid;
  gap: 12px;
  border: none;
  box-shadow: none;
}

.signup-side {
  overflow: hidden;
  padding: 24px 20px 0;
  background:
    linear-gradient(145deg, rgba(7, 21, 56, 0.98), rgba(17, 37, 82, 0.94)),
    radial-gradient(circle at 100% 0%, rgba(185, 243, 221, 0.3), transparent 36%);
  color: #fff;
}

.signup-side img {
  width: min(100%, 360px);
  margin: 10px auto 0;
}

.signup-card {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.signup-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.signup-progress span {
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(7, 21, 56, 0.05);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.signup-progress span.active {
  background: rgba(185, 243, 221, 0.78);
  color: var(--navy);
}

.signup-step {
  display: grid;
  gap: 10px;
}

.step-heading h2 {
  margin-top: 3px;
  color: var(--navy);
  font-size: 22px;
}

.step-heading p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}

.social-buttons,
.signup-fields {
  display: grid;
  gap: 8px;
}

.social-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid rgba(7, 21, 56, 0.13);
  border-radius: var(--radius);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  font-weight: 950;
  padding: 0 14px;
  text-align: left;
}

.social-button span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 950;
}

.social-button.kakao span {
  background: #fee500;
  color: #1f1f1f;
}

.social-button.naver span {
  background: #03c75a;
  color: #fff;
}

.social-button.google span {
  border: 1px solid rgba(7, 21, 56, 0.15);
  background: #fff;
  color: #4285f4;
}

.social-button.selected {
  border-color: var(--mint-strong);
  box-shadow: 0 0 0 3px rgba(89, 205, 169, 0.18);
}

.signup-help {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.signup-fields label {
  display: grid;
  gap: 6px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.signup-fields input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(7, 21, 56, 0.13);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
  padding: 11px 13px;
}

.signup-fields input:focus {
  border-color: rgba(239, 118, 158, 0.7);
  box-shadow: 0 0 0 3px rgba(239, 118, 158, 0.18);
  outline: none;
}

.avatar-choice-grid {
  display: grid;
  gap: 8px;
}

.avatar-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  min-height: 86px;
  border: 1px solid rgba(7, 21, 56, 0.13);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  padding: 12px;
}

.avatar-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.avatar-choice.selected {
  border-color: var(--pink-strong);
  box-shadow: 0 0 0 3px rgba(239, 118, 158, 0.16);
}

.avatar-preview {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 50%;
  color: rgba(7, 21, 56, 0.82);
}

.avatar-preview::before {
  content: "";
  width: 38px;
  height: 38px;
  background: currentColor;
  -webkit-mask: url("assets/ui/generated/nav-my-cat-profile.png") center / contain no-repeat;
  mask: url("assets/ui/generated/nav-my-cat-profile.png") center / contain no-repeat;
}

.avatar-cheese {
  background: linear-gradient(135deg, #ffe2ad, #f4a45e);
}

.avatar-mackerel {
  background: linear-gradient(135deg, #dde4ed, #8795a6);
}

.avatar-calico {
  background:
    radial-gradient(circle at 72% 22%, #2b2530 0 18%, transparent 19%),
    radial-gradient(circle at 24% 78%, #ef9b57 0 18%, transparent 19%),
    linear-gradient(135deg, #fff1df, #f5cfbc);
}

.avatar-choice strong,
.avatar-choice small {
  display: block;
}

.avatar-choice strong {
  color: var(--navy);
  font-size: 16px;
}

.avatar-choice small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.terms-check input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--pink-strong);
}

.signup-submit {
  width: 100%;
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--bottom-nav-height);
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(7, 21, 56, 0.1);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -12px 34px rgba(7, 21, 56, 0.1);
  backdrop-filter: blur(18px);
}

.bottom-nav a {
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 0;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.nav-icon {
  width: 31px;
  height: 31px;
}

.bottom-nav a.active {
  background: rgba(185, 243, 221, 0.58);
  color: var(--navy);
}

body.element-wood {
  --active: #5cd0ad;
}

body.element-fire {
  --active: #ef776f;
}

body.element-earth {
  --active: #e9b477;
}

body.element-metal {
  --active: #d9dde5;
}

body.element-water {
  --active: #8bb9e8;
}

@media (min-width: 680px) {
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .daily-panel {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.56fr);
    align-items: end;
    padding: 24px;
  }

  .daily-copy h1 {
    font-size: 38px;
  }

  .home-hero {
    grid-template-columns: minmax(0, 0.96fr) minmax(300px, 0.72fr);
  }

  .hero-copy,
  .hero-visual {
    min-height: 330px;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
  }

  .catnip-farm {
    grid-template-columns: minmax(0, 1fr) 190px;
  }

  .farm-pot-stage {
    width: 170px;
  }

  .farm-pot-image {
    width: 170px;
  }

  .terminal-grid,
  .service-grid-page,
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-profile-panel {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .nickname-form {
    grid-column: 1 / -1;
  }

  .reward-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.58fr);
    align-items: end;
    min-height: 280px;
    padding: 30px 30px 0;
  }

  .intro-hero {
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.72fr);
    align-items: end;
  }

  .intro-copy {
    padding: 34px 30px;
  }

  .intro-visual {
    padding: 24px 24px 0 0;
  }

  .intro-slides {
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .intro-cta {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .signup-layout {
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1fr);
    align-items: start;
  }

  .signup-side,
  .signup-card {
    min-height: 100%;
  }

  .signup-card {
    padding: 22px;
  }

  .signup-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .avatar-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .avatar-choice {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 168px;
    text-align: center;
  }

  .form-row {
    grid-template-columns: 1fr 0.82fr;
    gap: 10px;
  }

  .form-row.compact {
    grid-template-columns: 1fr 1fr;
  }

  .diagnosis-layout {
    grid-template-columns: minmax(310px, 0.86fr) minmax(420px, 1.14fr);
  }
}

@media (min-width: 920px) {
  .app-shell {
    padding-bottom: 0;
  }

  .bottom-nav {
    display: none;
  }

  .topbar {
    min-height: 70px;
  }

  .home-main,
  .page-main {
    width: min(1160px, calc(100% - 56px));
  }

  .home-main {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(330px, 0.58fr);
    gap: 14px;
    align-items: start;
  }

  .daily-panel {
    grid-column: 1 / -1;
  }

  .home-hero {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.9fr) minmax(390px, 0.72fr);
  }

  .catnip-farm,
  .terminal-section,
  .event-strip {
    margin-top: 0;
  }

  .event-strip {
    grid-template-columns: 1fr;
  }

  .service-grid-page {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .my-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .my-profile-panel {
    grid-template-columns: auto minmax(0, 0.85fr) minmax(360px, 1.1fr);
    padding: 22px;
  }

  .nickname-form {
    grid-column: auto;
  }

  .service-card {
    grid-template-columns: 1fr;
  }

  .goods-grid {
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }

  .intro-slides {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .home-main,
  .page-main {
    width: min(100% - 24px, 1160px);
  }

  .header-actions {
    gap: 5px;
  }

  .hero-copy h1,
  .page-hero h1 {
    font-size: 36px;
  }

  .daily-copy h1 {
    font-size: 29px;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .catnip-farm {
    grid-template-columns: minmax(0, 1fr) 100px;
  }

  .plant-pot {
    transform: scale(0.88);
  }

  .terminal-card {
    min-height: 118px;
  }

  .recommendation {
    grid-template-columns: 1fr;
  }

  .intro-actions .primary-button,
  .intro-actions .secondary-button,
  .intro-actions .text-link,
  .intro-cta .primary-button {
    width: 100%;
  }

  .nickname-row,
  .signup-fields {
    grid-template-columns: 1fr;
  }

  .signup-progress {
    gap: 4px;
  }

  .signup-progress span {
    font-size: 13px;
  }
}

/* Intro redesign - 2026-06-18 */
body[data-page="intro"] {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(165deg, #030815 0%, #071538 42%, #142154 72%, #251d4b 100%),
    linear-gradient(24deg, rgba(185, 243, 221, 0.14), transparent 42%),
    linear-gradient(204deg, rgba(247, 182, 201, 0.18), transparent 48%);
  color: #fff;
}

body[data-page="intro"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 22%, rgba(255, 255, 255, 0.045) 23%, transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%, rgba(0, 0, 0, 0.22));
}

body[data-page="intro"] .intro-shell {
  width: min(1180px, calc(100% - 28px));
  padding: 14px 0 46px;
}

body[data-page="intro"] .intro-topbar {
  position: relative;
  z-index: 20;
  min-height: 50px;
  margin-bottom: 0;
}

body[data-page="intro"] .intro-logo {
  min-width: 0;
}

body[data-page="intro"] .intro-logo img {
  width: clamp(122px, 32vw, 176px);
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

body[data-page="intro"] .intro-login {
  min-width: 72px;
  min-height: 38px;
  justify-content: center;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(16px);
}

body[data-page="intro"] .intro-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  min-height: calc(100svh - 72px);
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="intro"] .intro-hero::before,
body[data-page="intro"] .intro-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

body[data-page="intro"] .intro-hero::before {
  inset: 7% -7% auto auto;
  width: min(62vw, 560px);
  height: min(62vw, 560px);
  border: 1px solid rgba(255, 217, 128, 0.25);
  border-radius: 50%;
  transform: rotate(-12deg);
  opacity: 0.5;
}

body[data-page="intro"] .intro-hero::after {
  inset: auto -16% 7% 6%;
  height: 34%;
  border: 1px solid rgba(255, 217, 128, 0.24);
  border-left: 0;
  border-right: 0;
  transform: rotate(-7deg);
  opacity: 0.7;
}

body[data-page="intro"] .intro-copy {
  position: relative;
  z-index: 4;
  width: 100%;
  min-width: 0;
  max-width: 610px;
  padding: clamp(36px, 8vw, 78px) 0 18px;
}

body[data-page="intro"] .intro-copy .eyebrow,
body[data-page="intro"] .intro-section-heading .eyebrow {
  color: #b9f3dd;
  text-shadow: 0 8px 26px rgba(185, 243, 221, 0.2);
}

body[data-page="intro"] .intro-copy h1 {
  max-width: 560px;
  margin-bottom: 16px;
  color: #fff;
  font-size: clamp(56px, 15vw, 116px);
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
}

body[data-page="intro"] .intro-copy p {
  max-width: 520px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(16px, 2.6vw, 19px);
  line-height: 1.62;
}

body[data-page="intro"] .intro-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 520px);
  min-width: 0;
  margin-top: 26px;
}

body[data-page="intro"] .intro-start-button,
body[data-page="intro"] .intro-slide-copy .primary-button {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffe0a3, #f7b6c9);
  color: #071538;
  box-shadow:
    0 16px 34px rgba(247, 182, 201, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.34) inset;
}

body[data-page="intro"] .intro-start-button:hover,
body[data-page="intro"] .intro-slide-copy .primary-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 20px 42px rgba(247, 182, 201, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.44) inset;
}

body[data-page="intro"] .intro-actions .text-link {
  color: rgba(255, 255, 255, 0.88);
  text-decoration-color: rgba(185, 243, 221, 0.65);
}

body[data-page="intro"] .intro-visual {
  position: relative;
  z-index: 2;
  align-self: end;
  min-height: 420px;
  margin: -20px -30px 0;
  padding: 0;
  overflow: visible;
}

body[data-page="intro"] .intro-visual img {
  width: min(118vw, 720px);
  max-width: none;
  margin: 0 auto;
  animation: introEnter 720ms ease-out 120ms both;
}

body[data-page="intro"] .intro-onboarding {
  display: grid;
  gap: 16px;
  min-height: 100svh;
  padding: clamp(52px, 9vw, 88px) 0 28px;
}

body[data-page="intro"] .intro-section-heading {
  display: grid;
  gap: 8px;
  max-width: 680px;
}

body[data-page="intro"] .intro-section-heading h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 8vw, 62px);
  line-height: 1.04;
}

body[data-page="intro"] .intro-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
}

body[data-page="intro"] .intro-slide-viewport {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 238, 0.94)),
    linear-gradient(35deg, rgba(185, 243, 221, 0.2), transparent);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.24);
}

body[data-page="intro"] .intro-slides {
  display: flex;
  grid-auto-columns: initial;
  grid-auto-flow: initial;
  grid-template-columns: initial;
  gap: 0;
  width: 100%;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
  transition: transform 420ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

body[data-page="intro"] .intro-slide {
  position: relative;
  flex: 0 0 100%;
  display: grid;
  grid-template-rows: auto minmax(320px, 1fr);
  min-height: min(760px, calc(100svh - 168px));
  overflow: hidden;
  color: #211b2b;
}

body[data-page="intro"] .intro-slide-copy {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 12px;
  padding: clamp(24px, 6vw, 44px);
}

body[data-page="intro"] .slide-number {
  color: #ef769e;
  font-size: 13px;
  font-weight: 950;
}

body[data-page="intro"] .intro-slide h3 {
  max-width: 560px;
  margin: 0;
  color: #071538;
  font-size: clamp(28px, 7vw, 48px);
  line-height: 1.08;
}

body[data-page="intro"] .intro-slide p {
  max-width: 540px;
  margin: 0;
  color: #5f586b;
  font-size: 16px;
  line-height: 1.64;
}

body[data-page="intro"] .intro-slide-copy .secondary-button {
  min-height: 44px;
  padding: 0 18px;
  border-color: rgba(7, 21, 56, 0.12);
  background: #fff;
  color: #071538;
}

body[data-page="intro"] .intro-slide-art {
  position: relative;
  min-height: 320px;
}

body[data-page="intro"] .fortune-slide-art img {
  position: absolute;
  inset: auto auto -24px 50%;
  width: min(104%, 520px);
  max-width: none;
  transform: translateX(-50%);
}

body[data-page="intro"] .fortune-result-mock,
body[data-page="intro"] .avatar-mock,
body[data-page="intro"] .goods-card {
  border: 1px solid rgba(7, 21, 56, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 42px rgba(7, 21, 56, 0.12);
}

body[data-page="intro"] .fortune-result-mock {
  position: absolute;
  left: 50%;
  top: 20px;
  z-index: 3;
  width: min(74%, 360px);
  padding: 18px;
  transform: translateX(-50%);
}

body[data-page="intro"] .fortune-result-mock span {
  display: block;
  margin-bottom: 8px;
  color: #ef769e;
  font-size: 13px;
  font-weight: 950;
}

body[data-page="intro"] .fortune-result-mock strong {
  display: block;
  color: #071538;
  font-size: 20px;
}

body[data-page="intro"] .fortune-result-mock p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
}

body[data-page="intro"] .mock-bars {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

body[data-page="intro"] .mock-bars i {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #b9f3dd, rgba(239, 118, 158, 0.52));
}

body[data-page="intro"] .mock-bars i:nth-child(2) {
  width: 76%;
}

body[data-page="intro"] .mock-bars i:nth-child(3) {
  width: 54%;
}

body[data-page="intro"] .shop-slide-art {
  min-height: 390px;
}

body[data-page="intro"] .shop-cat {
  position: absolute;
  z-index: 3;
  width: min(43vw, 250px);
  max-width: none;
  filter: drop-shadow(0 18px 28px rgba(7, 21, 56, 0.16));
}

body[data-page="intro"] .shop-cat-jjuru {
  left: -26px;
  bottom: -20px;
}

body[data-page="intro"] .shop-cat-gray {
  right: -28px;
  bottom: -22px;
}

body[data-page="intro"] .goods-collage {
  position: absolute;
  inset: 32px 16% auto;
  z-index: 2;
  min-height: 220px;
}

body[data-page="intro"] .goods-card {
  position: absolute;
  width: 132px;
  min-height: 160px;
  padding: 14px;
  color: #071538;
}

body[data-page="intro"] .goods-card span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 950;
}

body[data-page="intro"] .goods-card strong {
  display: block;
  margin-top: 52px;
  font-size: 14px;
}

body[data-page="intro"] .goods-card-wood {
  left: 2%;
  top: 18px;
  transform: rotate(-7deg);
}

body[data-page="intro"] .goods-card-fire {
  left: 50%;
  top: 0;
  transform: translateX(-50%) rotate(4deg);
}

body[data-page="intro"] .goods-card-water {
  right: 1%;
  top: 38px;
  transform: rotate(8deg);
}

body[data-page="intro"] .goods-card-wood span {
  background: #59cda9;
}

body[data-page="intro"] .goods-card-fire span {
  background: #ef769e;
}

body[data-page="intro"] .goods-card-water span {
  background: #4f8fd6;
}

body[data-page="intro"] .avatar-slide-art {
  min-height: 390px;
}

body[data-page="intro"] .tobi-guide {
  position: absolute;
  right: -20px;
  bottom: -24px;
  z-index: 3;
  width: min(60vw, 310px);
  max-width: none;
  filter: drop-shadow(0 18px 32px rgba(7, 21, 56, 0.16));
}

body[data-page="intro"] .avatar-mock {
  position: absolute;
  left: clamp(18px, 8vw, 72px);
  top: 18px;
  z-index: 2;
  display: grid;
  gap: 12px;
  width: min(56%, 300px);
  padding: 18px;
}

body[data-page="intro"] .avatar-preview-card {
  display: grid;
  min-height: 150px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(185, 243, 221, 0.65), rgba(255, 248, 238, 0.95));
}

body[data-page="intro"] .avatar-preview-card span {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50% 50% 46% 46%;
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(95, 72, 54, 0.65) 21% 28%, transparent 29% 48%, rgba(95, 72, 54, 0.65) 49% 56%, transparent 57%),
    #e9ae63;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.58);
}

body[data-page="intro"] .avatar-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

body[data-page="intro"] .avatar-items i {
  display: block;
  min-height: 42px;
  border-radius: 8px;
  background: rgba(7, 21, 56, 0.08);
}

body[data-page="intro"] .avatar-mock strong {
  color: #071538;
}

body[data-page="intro"] .intro-nav {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
}

body[data-page="intro"] .intro-nav span {
  display: block;
  font-size: 30px;
  line-height: 0.8;
}

body[data-page="intro"] .intro-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

body[data-page="intro"] .intro-dots button {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.34);
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease;
}

body[data-page="intro"] .intro-dots button.is-active {
  width: 28px;
  background: #f7b6c9;
}

@keyframes introEnter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 760px) {
  body[data-page="intro"] .intro-hero {
    grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.04fr);
    align-items: center;
  }

  body[data-page="intro"] .intro-copy {
    padding-top: 18px;
  }

  body[data-page="intro"] .intro-visual {
    min-height: 620px;
    margin: -34px -78px -38px -42px;
  }

  body[data-page="intro"] .intro-visual img {
    width: min(64vw, 780px);
  }

  body[data-page="intro"] .intro-slide {
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
    grid-template-rows: 1fr;
    align-items: stretch;
  }

  body[data-page="intro"] .intro-slide-copy {
    align-content: center;
  }

  body[data-page="intro"] .fortune-slide-art img {
    inset: auto auto -70px 52%;
    width: min(60vw, 680px);
  }

  body[data-page="intro"] .fortune-result-mock {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  body[data-page="intro"] .shop-cat {
    width: min(27vw, 280px);
  }

  body[data-page="intro"] .shop-cat-jjuru {
    left: 0;
    bottom: -38px;
  }

  body[data-page="intro"] .shop-cat-gray {
    right: -12px;
    bottom: -42px;
  }

  body[data-page="intro"] .goods-collage {
    inset: 18% 16% auto;
  }

  body[data-page="intro"] .tobi-guide {
    width: min(34vw, 380px);
  }

  body[data-page="intro"] .avatar-mock {
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 620px) {
  body[data-page="intro"] .intro-shell {
    width: min(100% - 22px, 1180px);
    padding-top: 10px;
  }

  body[data-page="intro"] .intro-hero {
    min-height: calc(100svh - 64px);
    padding-bottom: min(42svh, 330px);
  }

  body[data-page="intro"] .intro-copy {
    padding-top: 30px;
  }

  body[data-page="intro"] .intro-actions {
    display: grid;
    max-width: 100%;
  }

  body[data-page="intro"] .intro-actions .text-link {
    justify-content: center;
  }

  body[data-page="intro"] .intro-visual {
    position: absolute;
    inset: auto -40px -430px -40px;
    min-height: 360px;
    margin: 0;
  }

  body[data-page="intro"] .intro-visual img {
    width: min(118vw, 500px);
    margin-left: 50%;
    transform: translateX(-50%);
    animation-name: introMobileEnter;
  }

  body[data-page="intro"] .intro-carousel {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="intro"] .intro-nav {
    position: absolute;
    z-index: 8;
    top: calc(50% - 21px);
  }

  body[data-page="intro"] .intro-nav-prev {
    left: -4px;
  }

  body[data-page="intro"] .intro-nav-next {
    right: -4px;
  }

  body[data-page="intro"] .intro-slide-copy {
    padding-right: 54px;
  }

  body[data-page="intro"] .shop-cat {
    width: min(50vw, 226px);
  }

  body[data-page="intro"] .goods-collage {
    inset-inline: 8%;
  }

  body[data-page="intro"] .goods-card {
    width: 116px;
    min-height: 140px;
  }

  body[data-page="intro"] .avatar-mock {
    width: min(58%, 260px);
  }
}

@keyframes introMobileEnter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="intro"] .intro-visual img {
    animation: none;
  }

  body[data-page="intro"] .intro-slides,
  body[data-page="intro"] .intro-dots button,
  body[data-page="intro"] .intro-start-button {
    transition: none;
  }
}

/* Signup auth entry - 2026-06-25 */
body[data-page="signup"] {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(185, 243, 221, 0.16), transparent 34%),
    radial-gradient(circle at 20% 88%, rgba(247, 182, 201, 0.12), transparent 32%),
    linear-gradient(165deg, #030815 0%, #071538 46%, #161f4c 100%);
  color: #fff;
}

body[data-page="signup"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 24%, rgba(255, 255, 255, 0.035) 25%, transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 38%, rgba(0, 0, 0, 0.24));
}

body[data-page="signup"] .signup-shell {
  display: grid;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  place-items: start center;
}

body[data-page="signup"] .signup-layout {
  display: block;
  width: min(100%, 450px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-page="signup"] .auth-card {
  display: block;
  overflow: hidden;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.auth-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: min(100svh, 812px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #040b1d;
}

.auth-visual-image,
.auth-visual-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.auth-visual-image {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}

.auth-visual-shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(2, 6, 18, 0.34) 0%, rgba(2, 6, 18, 0.02) 28%, rgba(2, 6, 18, 0.08) 56%, rgba(2, 6, 18, 0.78) 100%),
    radial-gradient(circle at 50% 14%, rgba(255, 238, 180, 0.16), transparent 30%);
}

.auth-title {
  grid-row: 1;
  align-self: start;
  max-width: 23em;
  margin-top: calc(32px + env(safe-area-inset-top));
  padding: 0 24px;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.52);
}

.auth-title h1 {
  margin: 0;
  color: #fff8df;
  font-size: clamp(31px, 8.8vw, 42px);
  line-height: 1.08;
}

.auth-title p {
  max-width: 20em;
  margin: 9px 0 0;
  color: rgba(255, 248, 238, 0.9);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.auth-accent {
  font-weight: 950;
}

.auth-accent-mint {
  color: #b9f3dd;
}

.auth-accent-gold {
  color: #ffd88a;
}

.auth-accent-pink {
  color: #f7b6c9;
}

.auth-social-panel {
  grid-row: 3;
  align-self: end;
  gap: 12px;
  margin: 0 14px calc(14px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(5, 12, 33, 0.78), rgba(5, 12, 33, 0.66)),
    radial-gradient(circle at 16% 0%, rgba(185, 243, 221, 0.18), transparent 42%);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  padding: 14px;
  backdrop-filter: blur(18px);
}

.auth-social-panel .step-heading h2 {
  color: #fff8df;
  font-size: 19px;
}

.auth-social-panel .step-heading span {
  color: rgba(185, 243, 221, 0.96);
}

.auth-social-panel .signup-help {
  display: none;
  color: rgba(255, 248, 238, 0.76);
}

.auth-social-panel .signup-help:not(:empty) {
  display: block;
}

body[data-page="signup"] .social-button {
  min-height: 50px;
  border-radius: 12px;
  font-size: 15px;
  letter-spacing: 0;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

body[data-page="signup"] .social-button:hover {
  transform: translateY(-1px);
}

body[data-page="signup"] .social-button.kakao {
  border-color: rgba(254, 229, 0, 0.72);
  background: #fee500;
  color: #191919;
}

body[data-page="signup"] .social-button.naver {
  border-color: rgba(3, 199, 90, 0.76);
  background: #03c75a;
  color: #fff;
}

body[data-page="signup"] .social-button.google {
  border-color: rgba(7, 21, 56, 0.14);
  background: #fff;
  color: #1f2937;
}

body[data-page="signup"] .social-button span {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.92);
}

body[data-page="signup"] .social-button.kakao span {
  background: rgba(25, 25, 25, 0.92);
  color: #fee500;
}

body[data-page="signup"] .social-button.naver span {
  background: rgba(255, 255, 255, 0.92);
  color: #03a94d;
}

body[data-page="signup"] .social-button.google span {
  background: #fff;
  color: #4285f4;
}

body[data-page="signup"] .social-button.selected {
  border-color: #fff8df;
  box-shadow:
    0 0 0 3px rgba(255, 248, 223, 0.38),
    0 14px 30px rgba(0, 0, 0, 0.2);
}

.auth-form-panel {
  display: grid;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 248, 238, 0.98), rgba(255, 241, 221, 0.98)),
    radial-gradient(circle at 90% 0%, rgba(185, 243, 221, 0.26), transparent 32%);
  color: var(--navy);
  padding: 18px 16px 28px;
}

.auth-form-panel .signup-progress,
.auth-form-panel .signup-fields,
.auth-form-panel .avatar-choice-grid {
  grid-template-columns: 1fr;
}

.auth-form-panel .avatar-choice {
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: stretch;
  min-height: 84px;
  text-align: left;
}

.auth-form-panel .form-message {
  margin: 0;
}

@media (min-width: 760px) {
  body[data-page="signup"] .signup-shell {
    padding: 26px 0 48px;
  }

  body[data-page="signup"] {
    background-color: #442f52;
    background-image:
      linear-gradient(90deg, rgba(3, 7, 22, 0.1) 0%, rgba(3, 7, 22, 0.18) 36%, rgba(3, 7, 22, 0.38) 50%, rgba(3, 7, 22, 0.18) 64%, rgba(3, 7, 22, 0.1) 100%),
      linear-gradient(180deg, rgba(3, 7, 22, 0.1), rgba(3, 7, 22, 0.3)),
      url("assets/ui/background/current/jellygate-background-desktop.jpg?v=20260714-jellygate-citizens2");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  body[data-page="signup"] .signup-layout {
    width: min(430px, calc(100% - 32px));
  }

  body[data-page="signup"] .auth-card {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
  }

  .auth-visual {
    min-height: 764px;
  }

  .auth-form-panel {
    padding: 22px;
  }
}

@media (max-width: 380px) {
  .auth-title {
    margin-top: calc(26px + env(safe-area-inset-top));
    padding: 0 18px;
  }

  .auth-title h1 {
    font-size: 30px;
  }

  .auth-social-panel {
    margin-right: 10px;
    margin-left: 10px;
    padding: 12px;
  }

body[data-page="signup"] .social-button {
    min-height: 47px;
    font-size: 14px;
  }
}

/* Intro final image flow - 2026-06-26 */
body[data-page="intro"] {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 187, 87, 0.18), transparent 34%),
    linear-gradient(180deg, #061225 0%, #020610 100%);
}

.intro-image-app {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  min-height: 100svh;
  max-width: 100vw;
  margin: 0 auto;
  overflow: hidden;
  background: #061225;
  box-shadow: 0 0 72px rgba(0, 0, 0, 0.52);
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.intro-image-stage {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition:
    transform 360ms cubic-bezier(0.22, 0.74, 0.24, 1),
    opacity 220ms ease,
    visibility 0s linear 360ms;
  will-change: transform, opacity;
}

.intro-image-stage.is-before {
  transform: translateX(-100%);
}

.intro-image-stage.is-after {
  transform: translateX(100%);
}

.intro-image-stage.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

.intro-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.intro-hotspot {
  position: absolute;
  z-index: 3;
  display: block;
  border: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.intro-login-hotspot {
  top: 2.2%;
  right: 2.5%;
  width: 30%;
  height: 8.5%;
}

.intro-start-hotspot {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 28%;
}

.intro-prev-hotspot {
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

.intro-next-hotspot {
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

.intro-finish-hotspot {
  z-index: 4;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

.intro-step-dots {
  position: absolute;
  z-index: 6;
  bottom: max(4px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  gap: 2px;
  transform: translateX(-50%);
  pointer-events: auto;
}

.intro-step-dots button {
  position: relative;
  width: 32px;
  height: 32px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.intro-step-dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 230, 168, 0.85);
  border-radius: 999px;
  background: rgba(5, 10, 24, 0.35);
  box-shadow: 0 0 8px rgba(255, 206, 116, 0.25);
  transform: translate(-50%, -50%);
  transition:
    width 180ms ease,
    background-color 180ms ease;
}

.intro-step-dots button.is-active::before {
  width: 20px;
  background: rgba(255, 214, 135, 0.96);
}

.intro-hotspot:focus-visible,
.intro-step-dots button:focus-visible {
  outline: 2px solid rgba(255, 232, 174, 0.95);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .intro-image-stage {
    transition: opacity 120ms ease;
  }
}

@media (min-width: 760px) {
  body[data-page="intro"] {
    display: grid;
    place-items: center;
    background-image:
      linear-gradient(90deg, rgba(3, 7, 22, 0.08) 0%, rgba(3, 7, 22, 0.16) 36%, rgba(3, 7, 22, 0.34) 50%, rgba(3, 7, 22, 0.16) 64%, rgba(3, 7, 22, 0.08) 100%),
      linear-gradient(180deg, rgba(3, 7, 22, 0.08), rgba(3, 7, 22, 0.28)),
      url("assets/ui/background/current/jellygate-background-desktop.jpg?v=20260714-jellygate-citizens2");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  .intro-image-app {
    min-height: auto;
    border-inline: 1px solid rgba(255, 222, 150, 0.18);
    box-shadow:
      0 0 0 1px rgba(255, 222, 150, 0.12),
      0 28px 90px rgba(0, 0, 0, 0.52);
  }
}

/* HOME shell refresh - 2026-06-29 */
html:has(body[data-page="home"]) {
  scrollbar-gutter: stable;
}

body[data-page="home"] {
  min-height: 100svh;
  overflow-x: hidden;
  background: #020816;
  color: #fff3dc;
  scrollbar-gutter: stable;
}

body[data-page="home"] .home-shell {
  /* PC = 모바일 확대. 손잡이는 :root의 --u-max. */
  --home-frame-width: min(100vw, calc(390px * var(--u-max)));
  --home-header-height: clamp(42px, calc(var(--home-frame-width) * 0.1448), 112px);
  --home-nav-height: calc(var(--home-frame-width) * 0.1862);
  --home-side-pad: clamp(6px, calc(var(--home-frame-width) * 0.02), 28px);
  position: relative;
  width: var(--home-frame-width);
  min-height: 100svh;
  margin: 0 auto;
  overflow-x: hidden;
  padding-bottom: 0;
  background: #061225;
  box-shadow: 0 0 72px rgba(0, 0, 0, 0.62);
}

body[data-page="home"] .home-fixed-bg {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 50%;
  width: var(--home-frame-width);
  height: 100svh;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(2, 7, 18, 0.12), rgba(2, 7, 18, 0.28)),
    url("assets/ui/background/current/home-background.jpg?v=20260713-bg-lite1") center / cover no-repeat,
    #9a859b;
  pointer-events: none;
}

@media (min-width: 900px) {
  body[data-page="home"] {
    background: #160d3e;
  }

  body[data-page="home"] .home-shell {
    background: transparent;
    box-shadow: none;
  }

  body[data-page="home"] .home-fixed-bg {
    width: 100vw;
    filter: saturate(0.9) brightness(0.88);
    background:
      linear-gradient(90deg, rgba(5, 8, 24, 0.04) 0%, rgba(5, 8, 24, 0.08) 30%, rgba(5, 8, 24, 0.24) 50%, rgba(5, 8, 24, 0.08) 70%, rgba(5, 8, 24, 0.04) 100%),
      linear-gradient(180deg, rgba(2, 7, 18, 0.12), rgba(2, 7, 18, 0.24)),
      url("assets/ui/background/current/home-background-desktop.jpg?v=20260713-bg-lite1") center / cover no-repeat,
    #40384e;
  }
}

body[data-page="home"] .home-transition-veil {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 50%;
  width: var(--home-frame-width);
  height: 100svh;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 52% 38%, rgba(255, 238, 247, 0.86), rgba(187, 249, 238, 0.56) 34%, transparent 62%),
    linear-gradient(180deg, rgba(255, 246, 222, 0.12), rgba(8, 14, 33, 0.42));
  mix-blend-mode: screen;
}

body[data-page="home"].is-home-transitioning .home-transition-veil {
  animation: home-transition-veil 640ms ease both;
}

body[data-page="home"] .home-arrival-welcome {
  position: fixed;
  z-index: 22;
  inset: 0 auto auto 50%;
  display: grid;
  place-items: center;
  width: var(--home-frame-width);
  height: 100svh;
  overflow: hidden;
  opacity: 0;
  isolation: isolate;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

body[data-page="home"] .home-arrival-welcome::before,
body[data-page="home"] .home-arrival-welcome::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

body[data-page="home"] .home-arrival-welcome::before {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 251, 226, 0.82) 0 5%, rgba(255, 214, 119, 0.42) 13%, transparent 38%),
    radial-gradient(circle at 50% 50%, transparent 0 39%, rgba(255, 233, 164, 0.86) 42%, rgba(255, 169, 214, 0.5) 45%, transparent 51%),
    conic-gradient(from 12deg at 50% 50%, transparent 0 8%, rgba(255, 226, 140, 0.78) 10%, transparent 15%, transparent 29%, rgba(177, 248, 231, 0.54) 32%, transparent 38%, transparent 52%, rgba(255, 168, 216, 0.58) 55%, transparent 61%, transparent 79%, rgba(255, 245, 192, 0.72) 82%, transparent 89%);
  filter: blur(0.8px);
  mix-blend-mode: screen;
  transform: scale(0.52) rotate(-18deg);
}

body[data-page="home"] .home-arrival-welcome::after {
  z-index: 3;
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 246, 189, 0.95) 0 0.7%, transparent 1.2%),
    radial-gradient(circle at 84% 18%, rgba(255, 236, 155, 0.9) 0 0.65%, transparent 1.1%),
    radial-gradient(circle at 26% 78%, rgba(255, 184, 218, 0.8) 0 0.55%, transparent 1.1%),
    radial-gradient(circle at 72% 74%, rgba(175, 250, 230, 0.76) 0 0.55%, transparent 1.05%),
    radial-gradient(circle at 48% 12%, rgba(255, 255, 255, 0.9) 0 0.45%, transparent 1%),
    radial-gradient(circle at 92% 54%, rgba(255, 229, 143, 0.82) 0 0.6%, transparent 1.1%),
    radial-gradient(circle at 8% 58%, rgba(255, 229, 143, 0.82) 0 0.6%, transparent 1.1%),
    linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.36) 46%, transparent 57%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220% 100%;
  filter: drop-shadow(0 0 8px rgba(255, 231, 158, 0.82));
  mix-blend-mode: screen;
}

body[data-page="home"] .home-arrival-welcome img {
  position: relative;
  z-index: 2;
  width: min(100%, calc(var(--home-frame-width) * 1.02));
  max-height: 96svh;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 52%;
  will-change: opacity, transform, filter;
}

html.home-arrival-pending body[data-page="home"] .home-arrival-welcome,
body[data-page="home"].is-home-arrival.is-home-welcome-visible .home-arrival-welcome {
  opacity: 1;
}

body[data-page="home"].is-home-arrival.is-home-welcome-visible .home-arrival-welcome::before {
  animation: home-welcome-gate-enter 1900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-page="home"].is-home-arrival.is-home-welcome-visible .home-arrival-welcome::after {
  animation: home-welcome-sparkle-sweep 2500ms ease-out both;
}

body[data-page="home"].is-home-arrival.is-home-welcome-entering .home-arrival-welcome img {
  animation: home-welcome-image-enter 1750ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-page="home"].is-home-arrival.is-home-welcome-exiting .home-arrival-welcome {
  opacity: 0;
  transition-duration: 1150ms;
}

body[data-page="home"].is-home-arrival.is-home-welcome-exiting .home-arrival-welcome::before {
  animation: home-welcome-gate-exit 1150ms ease-in both;
}

body[data-page="home"].is-home-arrival.is-home-welcome-exiting .home-arrival-welcome::after {
  animation: home-welcome-sparkle-exit 1150ms ease-in both;
}

body[data-page="home"].is-home-arrival.is-home-welcome-exiting .home-arrival-welcome img {
  animation: home-welcome-image-exit 1150ms cubic-bezier(0.64, 0, 0.78, 0) both;
}

body[data-page="home"] .home-fixed-header,
body[data-page="home"] .home-bottom-nav {
  position: fixed;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
}

body[data-page="home"] .home-fixed-header {
  top: 0;
  width: var(--home-frame-width);
  height: var(--home-header-height);
  overflow: hidden;
}

body[data-page="home"] .home-header-art,
body[data-page="home"] .home-bottom-nav img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="home"] .home-header-art {
  object-fit: fill;
}

body[data-page="home"] .home-bottom-nav img {
  object-fit: contain;
}

body[data-page="home"] .home-logo-hit,
body[data-page="home"] .home-catnip-hit,
body[data-page="home"] .home-bell-hit,
body[data-page="home"] .home-menu-hit,
body[data-page="home"] .home-bottom-nav a {
  position: absolute;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="home"] .home-logo-hit {
  left: 5.5%;
  top: 20%;
  width: 32%;
  height: 62%;
}

body[data-page="home"] .home-logo-hit.is-resetting {
  animation: home-logo-reset-pulse 520ms ease-out both;
}

body[data-page="home"] .home-catnip-hit {
  left: 46%;
  top: 26%;
  width: 29.6%;
  height: 52%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 10%;
  padding-right: 2%;
  color: #432b0d;
  font-size: calc(var(--u) * 15);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

body[data-page="home"] .home-catnip-hit span {
  display: block;
  min-width: 6.2ch;
  max-width: 7.3ch;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translateY(-0.08em);
}

body[data-page="home"] .home-bell-hit {
  left: 78.4%;
  top: 21%;
  width: 6.9%;
  height: 62%;
}

body[data-page="home"] .home-bell-hit.has-alert::after {
  content: "";
  position: absolute;
  top: 8%;
  right: 8%;
  width: 10px;
  height: 10px;
  border: 2px solid #fff1c4;
  border-radius: 50%;
  background: #ee4b42;
  box-shadow: 0 0 12px rgba(238, 75, 66, 0.7);
}

body[data-page="home"] .home-menu-hit {
  left: 89.2%;
  top: 21%;
  width: 7.4%;
  height: 62%;
}

body[data-page="home"] .home-bottom-nav {
  bottom: max(-2px, calc(env(safe-area-inset-bottom) - 8px));
  width: min(calc(var(--home-frame-width) - 10px), 100vw);
  height: var(--home-nav-height);
}

body[data-page="home"] .home-bottom-nav a {
  top: 11%;
  height: 73%;
}

body[data-page="home"] .home-bottom-nav .fortune {
  left: 6.5%;
  width: 15%;
}

body[data-page="home"] .home-bottom-nav .play {
  left: 24.2%;
  width: 15%;
}

body[data-page="home"] .home-bottom-nav .home {
  left: 40.8%;
  top: 0;
  width: 18.5%;
  height: 96%;
}

body[data-page="home"] .home-bottom-nav .market {
  left: 61.2%;
  width: 15%;
}

body[data-page="home"] .home-bottom-nav .my {
  left: 78.8%;
  width: 15%;
}

body[data-page="home"] .home-scroll {
  position: relative;
  z-index: 1;
  display: grid;
  gap: calc(var(--u) * 14);
  width: 100%;
  min-height: 150svh;
  padding:
    calc(var(--home-header-height) + max(var(--home-side-pad), env(safe-area-inset-top)))
    var(--home-side-pad)
    calc(var(--home-nav-height) + max(var(--home-side-pad), env(safe-area-inset-bottom)));
}

html.home-arrival-pending body[data-page="home"] .home-fixed-header,
html.home-arrival-pending body[data-page="home"] .home-bottom-nav,
html.home-arrival-pending body[data-page="home"] .home-scroll,
body[data-page="home"].is-home-arrival .home-fixed-header,
body[data-page="home"].is-home-arrival .home-bottom-nav,
body[data-page="home"].is-home-arrival .home-scroll {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

body[data-page="home"].is-home-arrival.is-home-arrival-revealing .home-fixed-header {
  opacity: 1;
  pointer-events: auto;
}

body[data-page="home"].is-home-arrival.is-home-arrival-revealing .home-bottom-nav {
  opacity: 1;
  pointer-events: auto;
}

body[data-page="home"].is-home-arrival.is-home-arrival-revealing .home-scroll {
  pointer-events: auto;
  opacity: 1;
}

body:is([data-page="home"], [data-page="consult"]) .home-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;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card {
  position: relative;
  justify-self: center;
  --element-accent: #f3d27c;
  --element-soft: rgba(243, 210, 124, 0.13);
  --element-mist: rgba(255, 244, 213, 0.08);
  --element-border: rgba(255, 224, 156, 0.42);
  width: 100%;
  max-width: 680px;
  padding: clamp(11px, 3.3cqw, 18px);
  overflow: hidden;
  border: 1px solid var(--element-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 76% 30%, var(--element-soft), transparent 29%),
    radial-gradient(circle at 16% 74%, var(--element-mist), transparent 31%),
    radial-gradient(ellipse at 50% 112%, rgba(255, 203, 111, 0.16), transparent 38%),
    linear-gradient(132deg, transparent 0 58%, rgba(255, 221, 151, 0.07) 58.4% 59%, transparent 59.4%),
    linear-gradient(180deg, rgba(15, 31, 62, 0.94), rgba(7, 18, 40, 0.96) 58%, rgba(12, 26, 52, 0.94)),
    #07172e;
  color: #fff5df;
  container-type: inline-size;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 248, 221, 0.18);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="wood"] {
  --element-accent: #98e99b;
  --element-soft: rgba(98, 211, 107, 0.18);
  --element-mist: rgba(157, 241, 194, 0.1);
  --element-border: rgba(162, 237, 171, 0.38);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="fire"] {
  --element-accent: #ff9a7d;
  --element-soft: rgba(244, 92, 69, 0.16);
  --element-mist: rgba(255, 176, 126, 0.1);
  --element-border: rgba(255, 167, 132, 0.4);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="earth"] {
  --element-accent: #e5b66a;
  --element-soft: rgba(209, 145, 72, 0.18);
  --element-mist: rgba(255, 220, 143, 0.12);
  --element-border: rgba(234, 191, 115, 0.42);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="metal"] {
  --element-accent: #f3eee1;
  --element-soft: rgba(235, 232, 222, 0.16);
  --element-mist: rgba(255, 255, 255, 0.1);
  --element-border: rgba(241, 229, 201, 0.42);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="water"] {
  --element-accent: #9bd5ff;
  --element-soft: rgba(91, 158, 231, 0.17);
  --element-mist: rgba(123, 197, 255, 0.1);
  --element-border: rgba(137, 202, 248, 0.38);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="none"] {
  --element-accent: #f3d27c;
  --element-soft: rgba(255, 221, 145, 0.1);
  --element-mist: rgba(255, 244, 213, 0.07);
  --element-border: rgba(255, 224, 156, 0.38);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 223, 151, 0.32);
  border-radius: 7px;
  pointer-events: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card::after {
  content: "";
  position: absolute;
  inset: auto 14px 14px 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 143, 0.62), transparent);
  pointer-events: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-head,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-profile,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-core,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-select-wrap,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-desc,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-remedies,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-cta {
  position: relative;
  z-index: 2;
}

body[data-page="home"] .home-card-ribbon {
  position: absolute;
  top: clamp(calc(var(--u) * 16), 4.2cqw, calc(var(--u) * 24));
  right: clamp(calc(var(--u) * 24), 6.7cqw, calc(var(--u) * 38));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(calc(var(--u) * 92), 25cqw, calc(var(--u) * 142));
  min-height: clamp(calc(var(--u) * 25), 6.9cqw, calc(var(--u) * 36));
  padding: 0 clamp(calc(var(--u) * 14), 3.7cqw, calc(var(--u) * 20));
  border: 1px solid rgba(255, 245, 210, 0.62);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 240, 174, 0.98), rgba(213, 151, 55, 0.98)),
    #e3aa45;
  color: #2c1902;
  font-size: clamp(calc(var(--u) * 14), 2.9cqw, calc(var(--u) * 14));
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 247, 218, 0.48);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(255, 207, 101, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

body[data-page="home"] .home-card-ribbon::before,
body[data-page="home"] .home-card-ribbon::after {
  display: none;
}

body[data-page="home"] .home-card-ribbon span {
  position: relative;
}

body[data-page="home"] .home-card-ribbon span::before,
body[data-page="home"] .home-card-ribbon span::after {
  content: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-head {
  display: grid;
  justify-items: start;
  width: 100%;
  min-height: auto;
  padding: clamp(6px, 1.8cqw, 9px) clamp(120px, 31cqw, 182px) 0 0;
  text-align: left;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-kicker {
  margin: 0 0 4px;
  color: #92eadc;
  font-size: clamp(15px, 3.2cqw, 16px);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.46);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-head h1 {
  margin: 0;
  max-width: 16em;
  color: rgba(255, 247, 220, 0.92);
  font-size: clamp(14.5px, 4.05cqw, 21px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.18;
  text-align: left;
  text-shadow:
    0 3px 10px rgba(0, 0, 0, 0.48),
    0 0 16px rgba(255, 210, 129, 0.22);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-head p:not(.home-gaeunbeop-kicker) {
  display: none;
  margin: 0;
  max-width: 23em;
  color: rgba(255, 244, 218, 0.86);
  font-size: clamp(15px, 3.35cqw, 17px);
  font-weight: 800;
  line-height: 1.42;
  word-break: keep-all;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-mascot-slot {
  position: absolute;
  display: none;
  z-index: 3;
  top: clamp(46px, 13.4cqw, 78px);
  right: clamp(0px, 1.3cqw, 10px);
  width: clamp(142px, 39.2cqw, 224px);
  height: clamp(142px, 39.2cqw, 224px);
  border: 1px solid rgba(179, 245, 226, 0.34);
  border-radius: 8px;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(179, 245, 226, 0.22), rgba(255, 218, 234, 0.11)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 24px rgba(0, 0, 0, 0.16);
  opacity: 0.88;
  pointer-events: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-mascot-slot::before,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-mascot-slot::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-mascot-slot::before {
  left: 18%;
  right: 18%;
  bottom: 12%;
  height: 18%;
  border: 1px solid rgba(255, 220, 148, 0.38);
  border-radius: 50%;
  transform: rotate(-3deg);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-mascot-slot::after {
  top: 10%;
  right: 15%;
  width: 22%;
  aspect-ratio: 1;
  border-top: 2px solid rgba(255, 221, 150, 0.8);
  border-right: 2px solid rgba(255, 221, 150, 0.8);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 8px rgba(255, 221, 150, 0.24));
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-mascot-slot.has-image {
  display: block;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-mascot-slot.has-image::before,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-mascot-slot.has-image::after {
  display: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-mascot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  transform: translate(0, 1%) scale(0.98);
  transform-origin: 80% 45%;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.26));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(31px, 8.2cqw, 42px);
  margin-top: clamp(7px, 2cqw, 12px);
  border: 1px solid rgba(255, 226, 163, 0.42);
  border-radius: 8px;
  padding: 0 clamp(10px, 3cqw, 16px);
  overflow: hidden;
  background: rgba(255, 246, 222, 0.08);
  color: #ffe7b6;
  cursor: pointer;
  font-size: clamp(14px, 3.1cqw, 15px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-profile:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 226, 156, 0.7);
  outline: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-core {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  column-gap: clamp(7px, 2.1cqw, 12px);
  row-gap: clamp(8px, 2.4cqw, 14px);
  width: 100%;
  min-height: clamp(86px, 24cqw, 124px);
  margin-top: clamp(7px, 2cqw, 12px);
  border: 1px solid var(--element-border);
  border-radius: 8px;
  padding: clamp(10px, 2.7cqw, 15px) clamp(11px, 3cqw, 17px);
  background:
    radial-gradient(circle at 88% 50%, var(--element-soft), transparent 54%),
    linear-gradient(100deg, rgba(179, 245, 226, 0.1), rgba(255, 219, 235, 0.07) 44%, rgba(255, 210, 127, 0.09)),
    rgba(5, 15, 36, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-core-copy {
  display: contents;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-core-copy span {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  text-align: left;
  color: #9ceedd;
  font-size: clamp(14px, 2.9cqw, 14px);
  font-weight: 950;
  line-height: 1.2;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-core-copy strong {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  min-width: 3.2em;
  color: #fff7dc;
  font-size: clamp(25px, 7.1cqw, 38px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-align: right;
  text-shadow:
    0 4px 12px rgba(0, 0, 0, 0.46),
    0 0 18px rgba(255, 221, 145, 0.26);
  white-space: nowrap;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-element-image {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  justify-self: start;
  width: clamp(148px, 41cqw, 224px);
  max-width: none;
  margin: clamp(-48px, -11.8cqw, -24px) clamp(-44px, -10cqw, -20px);
  opacity: 0.98;
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.26))
    drop-shadow(0 0 14px var(--element-soft));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-element-image[hidden] {
  display: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="wood"] .home-gaeunbeop-core-copy strong {
  color: #bdf6c9;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="fire"] .home-gaeunbeop-core-copy strong {
  color: #ffc5b8;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="earth"] .home-gaeunbeop-core-copy strong {
  color: #ffe39b;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="metal"] .home-gaeunbeop-core-copy strong {
  color: #f5f4ed;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="water"] .home-gaeunbeop-core-copy strong {
  color: #bfe4ff;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="none"] .home-gaeunbeop-core-copy strong {
  color: rgba(255, 246, 216, 0.9);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="none"] .home-gaeunbeop-core {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: clamp(72px, 19cqw, 100px);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="none"] .home-gaeunbeop-core-copy {
  display: grid;
  justify-items: center;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="none"] .home-gaeunbeop-core-copy span,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="none"] .home-gaeunbeop-core-copy strong {
  grid-column: 1;
  grid-row: auto;
  justify-self: center;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="none"] .home-gaeunbeop-core-copy span,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card[data-element="none"] .home-gaeunbeop-core-copy strong {
  text-align: center;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-select-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  margin-top: clamp(7px, 2cqw, 12px);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card:has(.home-gaeunbeop-mascot-slot.has-image) .home-gaeunbeop-head {
  padding-right: clamp(120px, 31cqw, 182px);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card:has(.home-gaeunbeop-mascot-slot.has-image) .home-gaeunbeop-profile,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card:has(.home-gaeunbeop-mascot-slot.has-image) .home-gaeunbeop-core,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card:has(.home-gaeunbeop-mascot-slot.has-image) .home-gaeunbeop-select-wrap {
  width: calc(100% - clamp(112px, 30cqw, 178px));
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-select-wrap.is-open {
  z-index: 32;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-select-wrap::after {
  content: "";
  position: absolute;
  right: clamp(10px, 3cqw, 16px);
  top: 50%;
  width: 0;
  height: 0;
  border-inline: 5px solid transparent;
  border-top: 7px solid #ffd06f;
  transform: translateY(-50%);
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.48));
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 2cqw, 12px);
  width: 100%;
  min-height: clamp(32px, 8.6cqw, 44px);
  border: 1px solid rgba(255, 222, 154, 0.5);
  border-radius: 8px;
  padding: 0 clamp(30px, 8.2cqw, 42px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(7, 19, 43, 0.74);
  color: #ffe7a9;
  font-size: clamp(15px, 3.25cqw, 16px);
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  outline: none;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.82),
    0 0 12px rgba(255, 209, 115, 0.24);
  -webkit-tap-highlight-color: transparent;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-select:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 226, 156, 0.7);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-select-label {
  flex: 0 0 auto;
  color: #9ceedd;
  font-size: clamp(14px, 2.75cqw, 14px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-select strong {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-menu {
  position: absolute;
  z-index: 36;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(255, 214, 119, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(15, 29, 58, 0.97), rgba(7, 18, 39, 0.98)),
    #07152d;
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 239, 190, 0.14);
  list-style: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-menu[hidden] {
  display: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(29px, 7.4cqw, 38px);
  border: 0;
  border-radius: 6px;
  padding: 0 5%;
  background: transparent;
  color: #fff0c0;
  cursor: pointer;
  font-size: clamp(15px, 3.2cqw, 16px);
  font-weight: 650;
  line-height: 1.12;
  text-align: center;
  text-shadow: none;
  white-space: normal;
  word-break: keep-all;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-option:hover,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-option[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(255, 210, 112, 0.98), rgba(201, 136, 44, 0.98));
  color: #271702;
  font-weight: 750;
  text-shadow: 0 1px 0 rgba(255, 247, 220, 0.4);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-desc {
  margin: clamp(7px, 2cqw, 11px) 0 0;
  border: 1px solid rgba(146, 234, 220, 0.28);
  padding: 6px 9px;
  color: rgba(255, 241, 210, 0.9);
  font-size: clamp(14px, 3.05cqw, 15px);
  font-weight: 700;
  line-height: 1.22;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  text-align: center;
  word-break: keep-all;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-remedies {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(4px, 1.2cqw, 7px);
  margin-top: clamp(7px, 2cqw, 11px);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-value {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(4px, 1.1cqw, 7px);
  min-width: 0;
  min-height: clamp(56px, 14.8cqw, 74px);
  border: 1px solid rgba(255, 224, 160, 0.34);
  border-radius: 8px;
  padding: clamp(8px, 2.1cqw, 11px) clamp(6px, 1.8cqw, 10px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(4, 15, 36, 0.54);
  color: #fff0bd;
  font-weight: 950;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-value span {
  margin-bottom: 0;
  max-width: 100%;
  color: #92eadc;
  font-size: clamp(14px, 2.8cqw, 14px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-value strong {
  display: grid;
  place-items: center;
  max-width: 100%;
  min-width: 0;
  min-height: 1.9em;
  overflow: visible;
  color: #fff6d8;
  font-size: clamp(14.5px, 3.9cqw, 19px);
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(38px, 10.1cqw, 52px);
  margin-top: clamp(8px, 2.3cqw, 13px);
  border: 1px solid rgba(255, 237, 188, 0.78);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 226, 147, 0.98), rgba(225, 166, 71, 0.98)),
    #e9b555;
  color: #2a1a04;
  font-size: clamp(14.5px, 3.9cqw, 19px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 249, 220, 0.66);
  -webkit-tap-highlight-color: transparent;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 235, 178, 0.72);
  outline: none;
}

body[data-page="home"] .home-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 139, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(9, 19, 45, 0.86), rgba(13, 31, 69, 0.78)),
    rgba(6, 15, 36, 0.78);
  color: #fff4dc;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 244, 220, 0.12);
  backdrop-filter: blur(8px);
}

body[data-page="home"] .home-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 214, 130, 0.16), transparent 28%),
    radial-gradient(circle at 92% 0%, rgba(117, 206, 171, 0.08), transparent 30%);
  pointer-events: none;
}

body[data-page="home"] .home-card > * {
  position: relative;
  z-index: 1;
}

body[data-page="home"] .home-card-kicker {
  margin: 0 0 calc(var(--u) * 8);
  color: #f3c76f;
  font-size: calc(var(--u) * 13);
  font-weight: 950;
  letter-spacing: 0;
}

body[data-page="home"] .home-card h1,
body[data-page="home"] .home-card h2 {
  margin: 0 0 calc(var(--u) * 10);
  color: #fff5df;
  letter-spacing: 0;
}

body[data-page="home"] .home-card h1 {
  font-size: calc(var(--u) * 30.42);
  line-height: 1.14;
}

body[data-page="home"] .home-card h2 {
  font-size: calc(var(--u) * 22.62);
  line-height: 1.18;
}

body[data-page="home"] .home-card p {
  margin-bottom: 0;
  color: rgba(255, 244, 220, 0.74);
  line-height: 1.55;
}

body[data-page="home"] .home-welcome-card,
body[data-page="home"] .home-diagnosis-card,
body[data-page="home"] .home-catnip-card,
body[data-page="home"] .home-terminal-card,
body[data-page="home"] .home-news-card {
  padding: calc(var(--u) * 18);
}

body[data-page="home"] .home-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 16);
}

body[data-page="home"] .home-quick-stats a,
body[data-page="home"] .home-terminal-grid a,
body[data-page="home"] .home-news-card a {
  border: 1px solid rgba(255, 224, 154, 0.24);
  border-radius: 8px;
  background: rgba(255, 245, 223, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="home"] .home-quick-stats a {
  display: grid;
  align-content: center;
  min-height: 66px;
  padding: calc(var(--u) * 10);
  text-align: center;
}

body[data-page="home"] .home-quick-stats span {
  color: #9fe7ca;
  font-size: calc(var(--u) * 19);
  font-weight: 950;
}

body[data-page="home"] .home-quick-stats strong {
  color: rgba(255, 244, 220, 0.84);
  font-size: calc(var(--u) * 13);
}

body[data-page="home"] .home-diagnosis-card {
  display: grid;
  gap: calc(var(--u) * 14);
}

body[data-page="home"] .home-primary-link,
body[data-page="home"] .home-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid rgba(255, 226, 156, 0.62);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffdc88, #d99b3e);
  color: #2a1908;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

body[data-page="home"] .home-primary-button {
  width: 100%;
  cursor: pointer;
}

body[data-page="home"] .home-primary-button:disabled {
  cursor: default;
  filter: saturate(0.5);
  opacity: 0.78;
}

body[data-page="home"] .home-catnip-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 28%);
  gap: calc(var(--u) * 10);
  align-items: center;
}

body[data-page="home"] .home-farm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 7);
  margin: calc(var(--u) * 12) 0 calc(var(--u) * 11);
}

body[data-page="home"] .home-farm-meta span {
  padding: calc(var(--u) * 7) calc(var(--u) * 9);
  border: 1px solid rgba(255, 220, 139, 0.22);
  border-radius: 999px;
  background: rgba(255, 245, 223, 0.08);
  color: rgba(255, 244, 220, 0.84);
  font-size: calc(var(--u) * 13);
  font-weight: 850;
}

body[data-page="home"] .home-farm-meta strong {
  color: #ffcf73;
}

body[data-page="home"] .home-farm-visual {
  display: grid;
  place-items: center;
}

body[data-page="home"] .farm-pot-stage {
  width: min(118px, 100%);
}

body[data-page="home"] .farm-pot-image {
  width: 118px;
}

body[data-page="home"] .farm-progress span {
  border-color: rgba(255, 220, 139, 0.2);
  background: rgba(255, 245, 223, 0.14);
}

body[data-page="home"] .farm-progress span.done {
  background: #7fe0bc;
  border-color: rgba(255, 245, 223, 0.28);
}

body[data-page="home"] .home-terminal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 12);
}

body[data-page="home"] .home-terminal-grid a {
  display: grid;
  gap: calc(var(--u) * 5);
  min-height: 82px;
  padding: calc(var(--u) * 12);
}

body[data-page="home"] .home-terminal-grid span,
body[data-page="home"] .home-news-card span {
  color: rgba(255, 244, 220, 0.68);
  font-size: calc(var(--u) * 13);
  font-weight: 850;
}

body[data-page="home"] .home-terminal-grid strong,
body[data-page="home"] .home-news-card strong {
  color: #fff5df;
  font-size: calc(var(--u) * 15);
}

body[data-page="home"] .home-terminal-grid .water {
  box-shadow: inset 4px 0 0 rgba(48, 60, 80, 0.9);
}

body[data-page="home"] .home-terminal-grid .fire {
  box-shadow: inset 4px 0 0 rgba(222, 86, 66, 0.9);
}

body[data-page="home"] .home-terminal-grid .wood {
  box-shadow: inset 4px 0 0 rgba(91, 183, 112, 0.9);
}

body[data-page="home"] .home-terminal-grid .metal {
  box-shadow: inset 4px 0 0 rgba(245, 240, 224, 0.88);
}

body[data-page="home"] .home-news-card {
  display: grid;
  gap: calc(var(--u) * 9);
}

body[data-page="home"] .home-news-card h2 {
  margin-bottom: calc(var(--u) * 2);
}

body[data-page="home"] .home-news-card a {
  display: grid;
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 12);
}

/* 폭은 반드시 '프레임' 기준이어야 한다. PC라고 넓어지는 게 아니라
   모바일 프레임을 크게 보는 것뿐이기 때문이다.
   ⚠️ --home-frame-width는 body[data-page="home"] .home-shell에만 정의돼 있다.
   상담소에서 그대로 두면 calc()가 무효가 되어 width 선언이 통째로 버려지고
   (invalid at computed value time) 다이얼로그가 브라우저 폭 전체로 늘어난다.
   실제로 그렇게 삐져나갔다. 그래서 프레임 변수 폴백 체인을 건다. */
body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog {
  width: min(calc(var(--home-frame-width, var(--consult-frame-width, min(100vw, 680px))) - 32px), 440px);
  max-height: min(86vh, 720px);
  border: 1px solid rgba(255, 222, 146, 0.7);
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: #fff4dc;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.56);
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog::backdrop {
  background: rgba(2, 7, 18, 0.68);
  backdrop-filter: blur(5px);
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-panel {
  position: relative;
  display: grid;
  gap: 13px;
  max-height: min(86vh, 720px);
  overflow-y: auto;
  padding: 22px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 213, 126, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(13, 28, 61, 0.98), rgba(7, 17, 38, 0.98));
  scrollbar-width: thin;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-heading p,
body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-heading h2 {
  margin: 0;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-heading p {
  color: #f3c76f;
  font-size: 13px;
  font-weight: 950;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-heading h2 {
  margin-top: 4px;
  color: #fff5df;
  font-size: 23px;
  line-height: 1.15;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-profile-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px 9px;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-profile-picker:not(.has-profiles) {
  grid-template-columns: minmax(0, 1fr) auto;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-profile-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255, 244, 220, 0.84);
  font-size: 13px;
  font-weight: 900;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-profile-toolbar span {
  color: #bdf8ec;
  font-size: 13px;
  font-weight: 850;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-profile-select,
body:is([data-page="home"], [data-page="consult"]) .home-saju-add-profile {
  min-height: 46px;
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-profile-select {
  width: 100%;
  border: 1px solid rgba(255, 224, 154, 0.28);
  padding: 0 34px 0 10px;
  background: rgba(255, 245, 223, 0.08);
  color: #fff7e5;
  cursor: pointer;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-panel select option {
  background: #fff8ec;
  color: #17213a;
  font-weight: 850;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-panel select option:checked {
  background: #2766c9;
  color: #ffffff;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-add-profile {
  align-self: start;
  border: 1px solid rgba(155, 245, 224, 0.52);
  padding: 0 12px;
  background: rgba(118, 236, 213, 0.13);
  color: #bdf8ec;
  white-space: nowrap;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
  gap: 10px;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 224, 154, 0.32);
  border-radius: 50%;
  background: rgba(255, 245, 223, 0.08);
  color: #ffe7a9;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-panel label {
  display: grid;
  gap: 6px;
  color: rgba(255, 244, 220, 0.82);
  font-size: 13px;
  font-weight: 850;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-panel input,
body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-panel select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 224, 154, 0.34);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(255, 245, 223, 0.09);
  color: #fff7e5;
  font: inherit;
  font-size: 15px;
  outline: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-panel input:disabled,
body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-panel select:disabled {
  opacity: 0.54;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-panel input:focus,
body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-panel select:focus {
  border-color: rgba(255, 226, 156, 0.82);
  box-shadow: 0 0 0 2px rgba(255, 226, 156, 0.16);
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-birth-row {
  grid-template-columns: 1fr;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-check {
  display: flex;
  grid-template-columns: none;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: 8px;
  min-height: 36px;
  margin: 0;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-check input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  accent-color: #f1c86f;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-advanced {
  border: 1px solid rgba(255, 224, 154, 0.22);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 245, 223, 0.055);
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-advanced summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #f3c76f;
  font-size: 13px;
  font-weight: 950;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-advanced summary small {
  color: rgba(255, 244, 220, 0.62);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-advanced[open] {
  display: grid;
  gap: 10px;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-dialog-actions {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 10px;
  margin-top: 2px;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-secondary,
body:is([data-page="home"], [data-page="consult"]) .home-saju-primary {
  min-height: 46px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 950;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-secondary {
  border: 1px solid rgba(255, 224, 154, 0.28);
  background: rgba(255, 245, 223, 0.08);
  color: #ffe7a9;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-primary {
  border: 1px solid rgba(255, 226, 156, 0.72);
  background: linear-gradient(180deg, #ffdc88, #d99b3e);
  color: #2a1908;
}

@media (min-width: 760px) {
  body[data-page="home"] {
    display: grid;
    place-items: center;
  }

  body[data-page="home"] .home-shell {
    /* PC = 모바일 확대. 손잡이는 :root의 --u-max. */
  --home-frame-width: min(100vw, calc(390px * var(--u-max)));
    min-height: 100svh;
    border-inline: 1px solid rgba(255, 226, 156, 0.14);
  }
}



/* HOME Nyangto INFO card - 2026-07-16 */
body[data-page="home"] .home-info-card {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 1981 / 794;
  overflow: visible;
  container-type: inline-size;
}
body[data-page="home"] .home-info-card-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
body[data-page="home"] .home-info-more {
  position: absolute;
  z-index: 3;
  top: 7.4%;
  right: 7.8%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .28em;
  height: 9%;
  color: #59617a;
  font-size: clamp(calc(var(--u) * 14), 2.35cqw, calc(var(--u) * 15));
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.88);
}
body[data-page="home"] .home-info-more span {
  color: #c78a42;
  font-size: 1.25em;
}
body[data-page="home"] .home-info-more:focus-visible,
body[data-page="home"] .home-info-tab:focus-visible,
body[data-page="home"] .home-info-row:focus-visible,
body[data-page="home"] .home-info-sns-item:focus-visible {
  outline: 2px solid rgba(217,143,78,.82);
  outline-offset: 2px;
}
body[data-page="home"] .home-info-tabs {
  position: absolute;
  z-index: 3;
  top: 23.25%;
  left: 14.75%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 1.75%;
  width: 70.45%;
  height: 11.35%;
}
body[data-page="home"] .home-info-tab {
  display: grid;
  min-width: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0 4%;
  background: transparent;
  color: #5c6175;
  font-family: inherit;
  font-size: clamp(calc(var(--u) * 14), 2.45cqw, calc(var(--u) * 15));
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,.82);
}
body[data-page="home"] .home-info-tab.is-active {
  background: linear-gradient(180deg, rgba(255,218,144,.94), rgba(236,165,91,.91));
  color: #513413;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 2px 7px rgba(177,116,63,.2);
}
body[data-page="home"] .home-info-content {
  position: absolute;
  z-index: 2;
  top: 39.2%;
  left: 8.2%;
  width: 83.6%;
  height: 47.7%;
  overflow: hidden;
}
body[data-page="home"] .home-info-list {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: repeat(3, minmax(0,1fr));
}
body[data-page="home"] .home-info-list[hidden] { display: none; }
body[data-page="home"] .home-info-row {
  display: grid;
  grid-template-columns: minmax(42px,15%) minmax(0,1fr) auto;
  align-items: center;
  gap: 2.2%;
  min-width: 0;
  border-bottom: 1px solid rgba(208,158,112,.27);
  padding: 0 2.1%;
  color: #3e4964;
  text-decoration: none;
}
body[data-page="home"] .home-info-row:last-child { border-bottom: 0; }
body[data-page="home"] .home-info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 100%;
  max-width: 72px;
  height: clamp(calc(var(--u) * 16), 4.5cqw, calc(var(--u) * 28));
  border: 1px solid rgba(188,143,105,.3);
  border-radius: 999px;
  background: rgba(255,250,238,.74);
  color: #7a5363;
  font-size: clamp(calc(var(--u) * 13), 2.05cqw, calc(var(--u) * 13));
  font-weight: 750;
  line-height: 1;
}
body[data-page="home"] .home-info-badge.event { background: rgba(255,228,235,.76); color: #a64f72; }
body[data-page="home"] .home-info-badge.goods { background: rgba(222,244,235,.8); color: #357f69; }
body[data-page="home"] .home-info-title {
  min-width: 0;
  overflow: hidden;
  color: #35415f;
  font-size: clamp(calc(var(--u) * 14), 2.45cqw, calc(var(--u) * 15));
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="home"] .home-info-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 2.6em;
  color: #b46a75;
  font-size: clamp(calc(var(--u) * 13), 1.85cqw, calc(var(--u) * 13));
  font-weight: 800;
  white-space: nowrap;
}
body[data-page="home"] .home-info-sns {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 2.1%;
  padding: 2.2% 2.4%;
}
body[data-page="home"] .home-info-sns[hidden] { display: none; }
body[data-page="home"] .home-info-sns-item {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(200,150,111,.44);
  border-radius: clamp(calc(var(--u) * 6), 1.8cqw, calc(var(--u) * 11));
  background: rgba(255,250,239,.76);
  box-shadow: 0 2px 7px rgba(112,82,111,.13);
}
body[data-page="home"] .home-info-sns-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-page="home"] .home-info-sns-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
  pointer-events: none;
}


body[data-page="home"].home-info-board-page .home-info-board {
  display: block;
  min-height: 100svh;
}
body[data-page="home"] .home-info-board-card {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  border: 1px solid rgba(226,180,118,.58);
  border-radius: 24px;
  padding: calc(var(--u) * 18.72);
  background: linear-gradient(145deg, rgba(255,253,246,.96), rgba(255,241,246,.93));
  box-shadow: 0 18px 44px rgba(32,22,52,.23), inset 0 1px 0 rgba(255,255,255,.9);
}
body[data-page="home"] .home-info-board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  margin-bottom: calc(var(--u) * 18);
}
body[data-page="home"] .home-info-board-head p {
  margin: 0 0 calc(var(--u) * 3);
  color: #bd8245;
  font-size: calc(var(--u) * 13);
  font-weight: 800;
  letter-spacing: .08em;
}
body[data-page="home"] .home-info-board-head h1 {
  margin: 0;
  color: #17294c;
  font-size: calc(var(--u) * 28);
  line-height: 1;
}
body[data-page="home"] .home-info-board-head a {
  color: #6d6275;
  font-size: calc(var(--u) * 13);
  font-weight: 700;
  text-decoration: none;
}
body[data-page="home"] .home-info-board-tabs {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: calc(var(--u) * 6);
  margin-bottom: calc(var(--u) * 16);
}
body[data-page="home"] .home-info-board-tabs a {
  border: 1px solid rgba(211,159,105,.36);
  border-radius: 999px;
  padding: calc(var(--u) * 9) calc(var(--u) * 2);
  background: rgba(255,255,255,.56);
  color: #646579;
  font-size: calc(var(--u) * 14);
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}
body[data-page="home"] .home-info-board-tabs a.active {
  background: linear-gradient(180deg,#ffd990,#e9aa62);
  color: #503313;
  font-weight: 800;
}
body[data-page="home"] .home-info-board-list article {
  display: grid;
  grid-template-columns: minmax(54px,13%) minmax(0,1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 12);
  border-bottom: 1px solid rgba(197,153,119,.25);
  padding: calc(var(--u) * 16) calc(var(--u) * 4);
}
body[data-page="home"] .home-info-board-list article > span {
  border-radius: 999px;
  padding: calc(var(--u) * 6) calc(var(--u) * 5);
  background: #fff4e9;
  color: #8a5865;
  font-size: calc(var(--u) * 13);
  font-weight: 750;
  text-align: center;
}
body[data-page="home"] .home-info-board-list article > span.event { background: #ffe8ef; color: #a54e71; }
body[data-page="home"] .home-info-board-list article > span.goods { background: #e5f5ee; color: #397c68; }
body[data-page="home"] .home-info-board-list h2 {
  margin: 0 0 calc(var(--u) * 4);
  color: #35415f;
  font-size: calc(var(--u) * 15);
  line-height: 1.3;
}
body[data-page="home"] .home-info-board-list p {
  margin: 0;
  color: #777184;
  font-size: calc(var(--u) * 14);
  line-height: 1.45;
}
body[data-page="home"] .home-info-board-list time {
  color: #9a8d91;
  font-size: calc(var(--u) * 13);
  white-space: nowrap;
}
@media (max-width: 480px) {
  body[data-page="home"] .home-info-board-list article {
    grid-template-columns: 52px minmax(0,1fr);
  }
  body[data-page="home"] .home-info-board-list time {
    display: none;
  }
}


/* HOME gaeunbeop pastel art overlay - 2026-07-04 */
body[data-page="home"] .home-scroll {
  /* 카드 사이 세로 간격은 좌우 여백과 같은 값을 쓴다.
     2026-07-30 이전에는 좌우 3/8px, 세로 12/24px로 제각각이었다. */
  gap: var(--home-side-pad);
  min-height: auto;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card {
  --element-text-gradient: linear-gradient(135deg, #fffaf1 0%, #d6a95c 34%, #fff0b8 63%, #a7793d 100%);
  --element-glow: rgba(246, 196, 111, 0.48);
  --element-shadow: rgba(121, 69, 36, 0.34);
  aspect-ratio: 1120 / 1404;
  width: 100%;
  max-width: 680px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #27334e;
  box-shadow: none;
  container-type: inline-size;
}

body[data-page="home"]:not([data-view="ohaeng-detail"]) .home-scroll > section.is-home-awaiting {
  opacity: 0;
}

body[data-page="home"]:not([data-view="ohaeng-detail"]) .home-scroll > section.is-home-entering {
  animation: home-card-enter 1800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"]:not([data-view="ohaeng-detail"]) .home-scroll > section.is-home-awaiting {
    opacity: 1;
  }
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card[data-element="wood"] {
  --element-text-gradient: linear-gradient(135deg, #f3ffe9 0%, #45a86a 34%, #b9f8c6 66%, #237247 100%);
  --element-glow: rgba(94, 209, 126, 0.48);
  --element-shadow: rgba(39, 104, 65, 0.34);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card[data-element="fire"] {
  --element-text-gradient: linear-gradient(135deg, #fff2dc 0%, #f06e62 34%, #ffc37d 66%, #b84248 100%);
  --element-glow: rgba(249, 117, 101, 0.5);
  --element-shadow: rgba(132, 55, 56, 0.34);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card[data-element="earth"] {
  --element-text-gradient: linear-gradient(135deg, #fff7d8 0%, #d39c45 34%, #ffe692 66%, #9c642c 100%);
  --element-glow: rgba(224, 170, 74, 0.5);
  --element-shadow: rgba(124, 77, 35, 0.34);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card[data-element="metal"] {
  --element-text-gradient: linear-gradient(135deg, #ffffff 0%, #bfc4c9 28%, #fff0b0 62%, #9b8d74 100%);
  --element-glow: rgba(245, 235, 201, 0.58);
  --element-shadow: rgba(93, 91, 101, 0.34);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card[data-element="water"] {
  --element-text-gradient: linear-gradient(135deg, #f3fcff 0%, #4aa9e2 34%, #cfddff 66%, #336ea9 100%);
  --element-glow: rgba(91, 177, 228, 0.5);
  --element-shadow: rgba(40, 86, 128, 0.34);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card[data-element="none"] {
  --element-text-gradient: linear-gradient(135deg, #846a55 0%, #6b5870 100%);
  --element-glow: rgba(230, 184, 132, 0.16);
  --element-shadow: rgba(114, 80, 62, 0.16);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card::before,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card::after {
  content: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-profile,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-select-wrap,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-core,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-desc,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-remedies,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-cta,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-dual-cta {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  margin: 0;
}

body:is([data-page="home"], [data-page="consult"]) .home-fit-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  letter-spacing: 0;
  word-break: keep-all;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-profile {
  left: 31.1%;
  top: 18.25%;
  width: 60.7%;
  height: 4.75%;
  display: grid;
  place-items: center;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  padding: 0 5.5%;
  background: transparent;
  color: #26324f;
  cursor: pointer;
  font-size: clamp(15px, 3.05cqw, 20px);
  font-weight: 720;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 4px rgba(111, 82, 122, 0.16);
  white-space: nowrap;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-profile .home-fit-text {
  line-height: 1;
  transform: translateY(12%);
  white-space: nowrap;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-profile:focus-visible,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-select:focus-visible,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-cta:focus-visible {
  outline: 2px solid rgba(255, 174, 204, 0.86);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(59, 37, 75, 0.18);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-select-wrap {
  left: 31.1%;
  top: 25.7%;
  width: 60.7%;
  height: 4.75%;
  display: block;
  z-index: 12;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-select-wrap::after {
  content: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-select {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  padding: 0 10% 0 6%;
  background: transparent;
  color: #26324f;
  cursor: pointer;
  font-size: clamp(15px, 3.15cqw, 20px);
  font-weight: 760;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 4px rgba(111, 82, 122, 0.16);
  -webkit-tap-highlight-color: transparent;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-select strong {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 680;
  line-height: 1;
  transform: translateY(12%);
  white-space: nowrap;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-menu {
  top: calc(100% + 7px);
  left: -1%;
  right: -1%;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(235, 170, 108, 0.72);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(180, 243, 229, 0.5), transparent 45%),
    linear-gradient(180deg, rgba(255, 252, 239, 0.98), rgba(255, 238, 246, 0.98)),
    #fff7ef;
  box-shadow:
    0 14px 24px rgba(111, 82, 122, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-option {
  min-height: clamp(31px, 7.2cqw, 44px);
  border-radius: 9px;
  padding: 0 5%;
  color: #26324f;
  font-size: clamp(15px, 3.45cqw, 21px);
  line-height: 1.1;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card.home-gaeunbeop-art-card .home-gaeunbeop-core {
  left: 5.1%;
  top: 32.45%;
  width: 89.8%;
  height: 29.25%;
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card.home-gaeunbeop-art-card[data-element="none"] .home-gaeunbeop-core {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  min-height: 0;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-core-aura {
  display: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card.home-gaeunbeop-art-card .home-gaeunbeop-core::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 55%;
  top: 26%;
  width: 22%;
  height: 28%;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.96) 0 6%, transparent 8%),
    radial-gradient(circle at 66% 42%, rgba(255, 218, 247, 0.9) 0 4%, transparent 6%),
    linear-gradient(110deg, transparent 0%, rgba(255, 247, 205, 0.78) 42%, rgba(188, 255, 239, 0.72) 58%, transparent 100%);
  filter: blur(0.2px) drop-shadow(0 0 9px rgba(255, 237, 187, 0.72));
  transform: rotate(-14deg) scale(0.74);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-changing .home-gaeunbeop-core::before {
  animation: home-wand-spark 1500ms ease-out both;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card.home-gaeunbeop-art-card .home-gaeunbeop-core::after {
  content: "";
  position: absolute;
  left: 2.8%;
  top: 26%;
  width: 66%;
  height: 50%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, var(--element-glow) 0%, rgba(255, 255, 255, 0.18) 36%, transparent 74%);
  filter: blur(8px);
  opacity: 0.42;
  mix-blend-mode: screen;
  pointer-events: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card.home-gaeunbeop-art-card[data-element="none"] .home-gaeunbeop-core::after {
  left: 4.2%;
  top: 25.4%;
  width: 62.8%;
  height: 54%;
  background:
    radial-gradient(ellipse at 46% 48%, rgba(255, 246, 205, 0.42) 0%, rgba(255, 225, 239, 0.22) 38%, transparent 72%),
    radial-gradient(ellipse at 58% 54%, rgba(175, 255, 235, 0.2) 0%, transparent 66%);
  filter: blur(9px);
  opacity: 0.46;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-element-text {
  position: absolute;
  z-index: 1;
  left: 5.2%;
  top: 33.5%;
  width: 62%;
  height: 46%;
  color: transparent;
  background: var(--element-text-gradient);
  background-size: 210% 210%;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(45px, 15.9cqw, 108px);
  font-weight: 1000;
  line-height: 0.95;
  -webkit-text-stroke: 0.35px rgba(86, 54, 74, 0.32);
  white-space: nowrap;
  filter:
    drop-shadow(0 2px 0 var(--element-shadow))
    drop-shadow(0 0 8px var(--element-glow))
    drop-shadow(0 0 18px rgba(255, 247, 222, 0.36));
  animation: home-element-shimmer 3.8s ease-in-out infinite;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-changing .home-gaeunbeop-element-text {
  animation:
    home-element-pop 820ms cubic-bezier(0.17, 0.84, 0.32, 1.16) both,
    home-element-shimmer 3.8s ease-in-out 820ms infinite;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card[data-element="none"] .home-gaeunbeop-element-text {
  left: 5.8%;
  top: 26.5%;
  width: 60.6%;
  height: 60%;
  color: #4b3158;
  background: transparent;
  -webkit-text-fill-color: #4b3158;
  font-size: clamp(15px, 3.75cqw, 23px);
  font-weight: 900;
  line-height: 1.34;
  white-space: pre;
  -webkit-text-stroke: 0;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88),
    0 2px 5px rgba(92, 58, 107, 0.18),
    0 0 10px rgba(255, 214, 238, 0.24);
  filter:
    drop-shadow(0 1px 3px rgba(94, 70, 111, 0.1))
    drop-shadow(0 0 7px rgba(255, 238, 191, 0.16));
  animation: none;
  transform: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card[data-element="none"].is-changing .home-gaeunbeop-element-text {
  animation: none;
  transform: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-desc {
  left: 8.6%;
  top: 66.75%;
  width: 82.8%;
  height: 3.85%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0 3.2%;
  background: transparent;
  color: #4b3a61;
  font-size: clamp(14px, 2.85cqw, 17px);
  font-weight: 760;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 4px rgba(110, 75, 127, 0.12);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-desc .home-fit-text {
  line-height: 1;
  transform: translateY(13%);
  white-space: nowrap;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-changing .home-gaeunbeop-desc .home-fit-text {
  animation: home-remedy-pop 620ms ease both;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-remedies {
  inset: auto;
  display: contents;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-value {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #27334e;
  box-shadow: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-value.color {
  left: 4.8%;
  top: 78.1%;
  width: 19.9%;
  height: 11.25%;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-value.number {
  left: 28.2%;
  top: 78.1%;
  width: 20.75%;
  height: 11.25%;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-value.direction {
  left: 52.5%;
  top: 78.1%;
  width: 20.2%;
  height: 11.25%;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-value.organ {
  left: 76.15%;
  top: 78.1%;
  width: 20%;
  height: 11.25%;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-value strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  color: #26324f;
  font-size: clamp(15px, 3.95cqw, 25px);
  font-weight: 780;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.68),
    0 0 6px rgba(113, 80, 127, 0.1);
  white-space: normal;
  overflow-wrap: normal;
  transform: translateY(12%);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-changing .home-gaeunbeop-value strong {
  animation: home-remedy-pop 720ms cubic-bezier(0.22, 0.9, 0.26, 1.12) both;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-changing .home-gaeunbeop-value.color strong {
  animation-delay: 140ms;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-changing .home-gaeunbeop-value.number strong {
  animation-delay: 240ms;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-changing .home-gaeunbeop-value.direction strong {
  animation-delay: 340ms;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-changing .home-gaeunbeop-value.organ strong {
  animation-delay: 440ms;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-value.color strong,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-value.organ strong {
  line-height: 1.08;
  white-space: pre-line;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-value.number strong,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-value.direction strong {
  font-size: clamp(15px, 4.25cqw, 27px);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-cta {
  left: 19.6%;
  top: 90.65%;
  width: 61%;
  height: 7.55%;
  display: block;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-cta-label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-cta::before {
  content: "";
  position: absolute;
  inset: 4% 6%;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.68) 44%, rgba(192, 255, 244, 0.58) 52%, transparent 68%);
  filter: blur(1px);
  transform: translateX(-115%);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-cta-pressed .home-gaeunbeop-cta::before {
  animation: home-cta-shine 560ms ease-out both;
}

body[data-page="home"][data-view="ohaeng-detail"] .home-scroll {
  min-height: auto;
  align-content: start;
  padding-bottom: calc(var(--home-nav-height) + max(var(--home-side-pad), env(safe-area-inset-bottom)));
}

body[data-page="home"][data-view="ohaeng-detail"] .ohaeng-back-hit {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 21%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="home"][data-view="ohaeng-detail"] .ohaeng-detail-card {
  margin: 0 auto;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-dual-cta {
  position: absolute;
  z-index: 3;
  left: 11.3%;
  top: 92.25%;
  display: grid;
  width: 77.4%;
  height: 5.45%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12%;
  box-sizing: border-box;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-dual-cta a {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #26324f;
  font-size: clamp(15px, 3.35cqw, 20px);
  font-weight: 950;
  line-height: 1.05;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74);
  box-shadow: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-dual-cta a:last-child {
  color: #2f5f59;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-dual-cta .home-fit-text {
  transform: translateY(8%);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-dual-cta a:focus-visible {
  outline: 2px solid rgba(255, 174, 204, 0.88);
  outline-offset: 3px;
}

@keyframes home-element-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
    filter:
      drop-shadow(0 2px 0 var(--element-shadow))
      drop-shadow(0 0 8px var(--element-glow))
      drop-shadow(0 0 18px rgba(255, 247, 222, 0.36));
    transform: translateZ(0) scale(1);
  }

  50% {
    background-position: 100% 50%;
    filter:
      drop-shadow(0 2px 0 var(--element-shadow))
      drop-shadow(0 0 14px var(--element-glow))
      drop-shadow(0 0 28px rgba(255, 247, 222, 0.48));
    transform: translateZ(0) scale(1.018);
  }
}

@keyframes home-card-enter {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes home-welcome-image-enter {
  0% {
    opacity: 0;
    filter:
      brightness(1.18)
      saturate(1.08)
      drop-shadow(0 0 0 rgba(255, 226, 151, 0));
    transform: scale(0.82);
  }

  22% {
    opacity: 1;
    filter:
      brightness(1.24)
      saturate(1.16)
      drop-shadow(0 0 28px rgba(255, 227, 149, 0.72));
    transform: scale(1.055);
  }

  46% {
    filter:
      brightness(1.08)
      saturate(1.06)
      drop-shadow(0 0 18px rgba(255, 196, 224, 0.42));
    transform: scale(0.992);
  }

  100% {
    opacity: 1;
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0 12px rgba(255, 231, 158, 0.34));
    transform: scale(1);
  }
}

@keyframes home-welcome-image-exit {
  0% {
    opacity: 1;
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0 12px rgba(255, 231, 158, 0.34));
    transform: scale(1);
  }

  42% {
    opacity: 1;
    filter:
      brightness(1.28)
      saturate(1.18)
      drop-shadow(0 0 34px rgba(255, 238, 178, 0.84));
    transform: scale(1.035);
  }

  100% {
    opacity: 0;
    filter:
      brightness(1.45)
      saturate(1.2)
      blur(0.8px)
      drop-shadow(0 0 46px rgba(255, 246, 203, 0.92));
    transform: scale(1.095);
  }
}

@keyframes home-welcome-gate-enter {
  0% {
    opacity: 0;
    transform: scale(0.28) rotate(-28deg);
  }

  24% {
    opacity: 0.95;
    transform: scale(1.06) rotate(10deg);
  }

  58% {
    opacity: 0.58;
    transform: scale(0.9) rotate(28deg);
  }

  100% {
    opacity: 0.28;
    transform: scale(1.16) rotate(44deg);
  }
}

@keyframes home-welcome-gate-exit {
  0% {
    opacity: 0.32;
    transform: scale(1.08) rotate(42deg);
  }

  44% {
    opacity: 0.92;
    transform: scale(1.3) rotate(72deg);
  }

  100% {
    opacity: 0;
    transform: scale(1.78) rotate(108deg);
  }
}

@keyframes home-welcome-sparkle-sweep {
  0% {
    opacity: 0;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, -120% 0;
    transform: scale(0.94);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0.68;
    background-position: 0 -12px, 0 10px, 0 -16px, 0 14px, 0 -8px, 0 12px, 0 -10px, 120% 0;
    transform: scale(1.02);
  }
}

@keyframes home-welcome-sparkle-exit {
  0% {
    opacity: 0.68;
    transform: scale(1);
  }

  36% {
    opacity: 1;
    transform: scale(1.04);
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes home-element-pop {
  0% {
    opacity: 0;
    transform: translateY(7px) scale(0.9);
    filter:
      drop-shadow(0 2px 0 var(--element-shadow))
      drop-shadow(0 0 4px var(--element-glow));
  }

  62% {
    opacity: 1;
    transform: translateY(-1px) scale(1.045);
    filter:
      drop-shadow(0 2px 0 var(--element-shadow))
      drop-shadow(0 0 18px var(--element-glow))
      drop-shadow(0 0 32px rgba(255, 247, 222, 0.48));
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes home-remedy-pop {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes home-wand-spark {
  0% {
    opacity: 0;
    transform: translate(22%, 2%) rotate(-14deg) scale(0.56);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-72%, 34%) rotate(-14deg) scale(1.08);
  }
}

@keyframes home-cta-shine {
  0% {
    opacity: 0;
    transform: translateX(-115%);
  }

  25% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: translateX(115%);
  }
}

@keyframes home-transition-veil {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.98);
  }

  48% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
    transform: translateX(-50%) scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-element-text,
  body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-home-entering,
  body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-changing .home-gaeunbeop-element-text,
  body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-changing .home-gaeunbeop-value strong,
  body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-changing .home-gaeunbeop-desc .home-fit-text,
  body:is([data-page="home"], [data-page="consult"]) .home-title-reset-hit.is-resetting::after,
  body[data-page="home"].is-home-transitioning .home-transition-veil,
  html.home-arrival-pending body[data-page="home"] .home-fixed-header,
  html.home-arrival-pending body[data-page="home"] .home-bottom-nav,
  html.home-arrival-pending body[data-page="home"] .home-scroll,
  body[data-page="home"] .home-arrival-welcome,
  body[data-page="home"].is-home-arrival .home-fixed-header,
  body[data-page="home"].is-home-arrival .home-bottom-nav,
  body[data-page="home"].is-home-arrival .home-scroll,
  body[data-page="home"].is-home-arrival.is-home-welcome-visible .home-arrival-welcome,
  body[data-page="home"].is-home-arrival.is-home-arrival-revealing .home-fixed-header,
  body[data-page="home"].is-home-arrival.is-home-arrival-revealing .home-bottom-nav,
  body[data-page="home"].is-home-arrival.is-home-arrival-revealing .home-scroll,
  body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card.is-cta-pressed .home-gaeunbeop-cta::before,
  body[data-page="home"] .home-attendance-art-card .farm-progress span.is-new::before {
    animation: none;
    transition: none;
  }

  body[data-page="home"].is-home-arrival.is-home-welcome-visible .home-arrival-welcome {
    opacity: 0;
  }

  html.home-arrival-pending body[data-page="home"] .home-fixed-header,
  html.home-arrival-pending body[data-page="home"] .home-bottom-nav,
  html.home-arrival-pending body[data-page="home"] .home-scroll,
  body[data-page="home"].is-home-arrival .home-fixed-header,
  body[data-page="home"].is-home-arrival .home-bottom-nav,
  body[data-page="home"].is-home-arrival .home-scroll {
    opacity: 1;
    filter: none;
    pointer-events: auto;
  }

  html.home-arrival-pending body[data-page="home"] .home-fixed-header,
  body[data-page="home"].is-home-arrival .home-fixed-header,
  html.home-arrival-pending body[data-page="home"] .home-bottom-nav,
  body[data-page="home"].is-home-arrival .home-bottom-nav {
    transform: translateX(-50%);
  }

  html.home-arrival-pending body[data-page="home"] .home-scroll,
  body[data-page="home"].is-home-arrival .home-scroll {
    transform: none;
  }

  body[data-page="home"] .home-transition-veil {
    display: none;
  }
}

/* HOME attendance art card - 2026-07-04 */
body[data-page="home"] .home-attendance-art-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  aspect-ratio: 1448 / 1086;
  overflow: hidden;
  border: 0;
  border-radius: clamp(calc(var(--u) * 18), 4.6cqw, calc(var(--u) * 30));
  background: transparent;
  color: #11203c;
  container-type: inline-size;
  box-shadow: none;
  isolation: isolate;
}

body[data-page="home"] .home-ranking-art-card,
body[data-page="home"] .home-shop-art-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  aspect-ratio: 1448 / 1086;
  overflow: hidden;
  border: 0;
  border-radius: clamp(calc(var(--u) * 18), 4.6cqw, calc(var(--u) * 30));
  background: transparent;
  color: #11203c;
  container-type: inline-size;
  box-shadow: none;
  isolation: isolate;
}

body[data-page="home"] .home-attendance-card-art {
  position: absolute;
  inset: -0.1%;
  z-index: 0;
  width: 100.2%;
  height: 100.2%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: none;
}

body[data-page="home"] .home-ranking-card-art,
body[data-page="home"] .home-shop-card-art {
  position: absolute;
  inset: -0.1%;
  z-index: 0;
  width: 100.2%;
  height: 100.2%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: none;
}

body:is([data-page="home"], [data-page="consult"]) .home-title-reset-hit {
  position: absolute;
  z-index: 6;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-title-reset {
  left: 21.8%;
  top: 7.6%;
  width: 47.2%;
  height: 11.4%;
}

body[data-page="home"] .home-attendance-title-reset {
  left: 34.2%;
  top: 5.1%;
  width: 31.8%;
  height: 11.8%;
}

body:is([data-page="home"], [data-page="consult"]) .home-title-reset-hit:focus-visible {
  outline: 2px solid rgba(255, 137, 189, 0.72);
  outline-offset: 2px;
}

body:is([data-page="home"], [data-page="consult"]) .home-title-reset-hit::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.72), rgba(160, 244, 228, 0.28) 54%, transparent 72%);
  filter: blur(1px);
}

body:is([data-page="home"], [data-page="consult"]) .home-title-reset-hit.is-resetting::after {
  animation: home-title-reset-pulse 560ms ease-out both;
}

body[data-page="home"] .home-attendance-reward-value,
body[data-page="home"] .home-attendance-button,
body[data-page="home"] .home-attendance-art-card .farm-progress,
body[data-page="home"] .home-attendance-art-card .farm-pot-stage,
body[data-page="home"] .home-ranking-slot,
body[data-page="home"] .home-ranking-summary,
body[data-page="home"] .home-ranking-cta,
body[data-page="home"] .home-shop-product-card,
body[data-page="home"] .home-shop-cta {
  position: absolute;
  z-index: 2;
}

body[data-page="home"] .home-ranking-top-list {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

body[data-page="home"] .home-ranking-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: clamp(calc(var(--u) * 2), 0.52cqw, calc(var(--u) * 4));
  padding: 0 2.2%;
  overflow: hidden;
  color: #243151;
  text-align: center;
  pointer-events: none;
}

body[data-page="home"] .home-ranking-slot.rank-1 {
  left: 44.4%;
  top: 40.25%;
  width: 13.7%;
  height: 21.9%;
}

body[data-page="home"] .home-ranking-slot.rank-2 {
  left: 30.7%;
  top: 41.85%;
  width: 11.9%;
  height: 21.0%;
}

body[data-page="home"] .home-ranking-slot.rank-3 {
  left: 58.9%;
  top: 43.55%;
  width: 11.8%;
  height: 19.6%;
}

body[data-page="home"] .home-ranking-avatar {
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 1;
  width: clamp(calc(var(--u) * 30), 10.5cqw, calc(var(--u) * 58));
  height: clamp(calc(var(--u) * 30), 10.5cqw, calc(var(--u) * 58));
  max-width: none;
  object-fit: contain;
  filter:
    drop-shadow(0 2px 2px rgba(78, 64, 78, 0.12))
    drop-shadow(0 5px 10px rgba(212, 144, 87, 0.13));
}

body[data-page="home"] .home-ranking-slot.rank-2 .home-ranking-avatar {
  width: clamp(calc(var(--u) * 28), 8.8cqw, calc(var(--u) * 52));
  height: clamp(calc(var(--u) * 28), 8.8cqw, calc(var(--u) * 52));
}

body[data-page="home"] .home-ranking-slot.rank-3 .home-ranking-avatar {
  width: clamp(calc(var(--u) * 27), 8.2cqw, calc(var(--u) * 48));
  height: clamp(calc(var(--u) * 27), 8.2cqw, calc(var(--u) * 48));
}

body[data-page="home"] .home-ranking-nickname,
body[data-page="home"] .home-ranking-time {
  flex: 0 0 auto;
  color: #26324f;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(86, 66, 96, 0.1);
}

body[data-page="home"] .home-ranking-nickname {
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: clamp(calc(var(--u) * 13), 2.45cqw, calc(var(--u) * 16));
  font-size: clamp(calc(var(--u) * 13), 2.35cqw, calc(var(--u) * 14));
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="home"] .home-ranking-time {
  display: none;
  height: clamp(calc(var(--u) * 8), 2.1cqw, calc(var(--u) * 13));
  color: #805f46;
  font-size: clamp(calc(var(--u) * 13), 1.95cqw, calc(var(--u) * 13));
  font-weight: 850;
}

body[data-page="home"] .home-ranking-slot.rank-3 .home-ranking-nickname {
  height: clamp(calc(var(--u) * 8), 2.2cqw, calc(var(--u) * 13));
  font-size: clamp(calc(var(--u) * 13), 2.05cqw, calc(var(--u) * 13));
}

body[data-page="home"] .home-ranking-slot.rank-3 .home-ranking-time {
  height: clamp(calc(var(--u) * 7), 1.85cqw, calc(var(--u) * 11));
  font-size: clamp(calc(var(--u) * 13), 1.65cqw, calc(var(--u) * 13));
}

body[data-page="home"] .home-ranking-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 3.6%;
  overflow: hidden;
  color: #26324f;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: clamp(calc(var(--u) * 14), 3.15cqw, calc(var(--u) * 19));
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 2px 6px rgba(84, 63, 106, 0.1);
}

body[data-page="home"] .home-ranking-best {
  left: 5.45%;
  top: 76.25%;
  width: 24.95%;
  height: 7.2%;
}

body[data-page="home"] .home-ranking-weekly {
  left: 36.8%;
  top: 76.25%;
  width: 24.95%;
  height: 7.2%;
}

body[data-page="home"] .home-ranking-reward {
  left: 68.35%;
  top: 76.25%;
  width: 25.75%;
  height: 7.2%;
}

body[data-page="home"] .home-ranking-cta {
  left: 13.25%;
  top: 87.15%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 73.5%;
  height: 9.35%;
  padding: 0 7.2%;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #11203c;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="home"] .home-ranking-cta::before {
  content: "";
  position: absolute;
  inset: 7% 2.5%;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.68) 48%, transparent 64% 100%);
  opacity: 0;
  transform: translateX(-70%);
  pointer-events: none;
}

body[data-page="home"] .home-ranking-cta:hover::before,
body[data-page="home"] .home-ranking-cta:focus-visible::before {
  animation: home-attendance-cta-shine 720ms ease both;
}

body[data-page="home"] .home-ranking-cta:focus-visible {
  outline: 3px solid rgba(255, 134, 183, 0.82);
  outline-offset: 2px;
}

body[data-page="home"] .home-shop-product-card {
  box-sizing: border-box;
  overflow: hidden;
  color: #26324f;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  letter-spacing: 0;
  text-align: center;
  pointer-events: none;
}

body[data-page="home"] .home-shop-feature {
  left: 4.7%;
  top: 24.45%;
  width: 25.9%;
  height: 61.1%;
  padding: 0;
}

body[data-page="home"] .home-shop-mini {
  left: 72.25%;
  width: 23.9%;
  height: 31.9%;
  padding: 0;
}

body[data-page="home"] .home-shop-best {
  top: 22.95%;
}

body[data-page="home"] .home-shop-new {
  top: 57.8%;
}

body[data-page="home"] .home-shop-thumb-frame {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: clamp(calc(var(--u) * 8), 2.2cqw, calc(var(--u) * 16));
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .home-shop-feature .home-shop-thumb-frame {
  left: 8.4%;
  top: 21.2%;
  width: 74.8%;
  height: 41.8%;
}

body[data-page="home"] .home-shop-mini .home-shop-thumb-frame {
  left: 7%;
  width: 86.1%;
}

body[data-page="home"] .home-shop-best .home-shop-thumb-frame {
  top: 13.1%;
  height: 81.4%;
}

body[data-page="home"] .home-shop-new .home-shop-thumb-frame {
  left: 6.4%;
  top: 12.9%;
  width: 87.6%;
  height: 72.8%;
}

body[data-page="home"] .home-shop-product-body {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(calc(var(--u) * 0), 0.12cqw, calc(var(--u) * 1));
  box-sizing: border-box;
  min-width: 0;
}

body[data-page="home"] .home-shop-product-body {
  left: 4.6%;
  top: 65.2%;
  width: 84%;
  height: 24.8%;
  padding: 0 1%;
}

body[data-page="home"] .home-shop-thumb {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter:
    drop-shadow(0 2px 2px rgba(255, 255, 255, 0.82))
    drop-shadow(0 8px 12px rgba(131, 92, 54, 0.13));
}

body[data-page="home"] .home-shop-feature .home-shop-thumb {
  padding: 0;
}

body[data-page="home"] .home-shop-mini .home-shop-thumb {
  padding: 0;
}

body[data-page="home"] .home-shop-tag,
body[data-page="home"] .home-shop-product-name {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  letter-spacing: 0;
  text-overflow: clip;
  white-space: nowrap;
}

body[data-page="home"] .home-shop-tag {
  color: #875735;
  font-size: clamp(calc(var(--u) * 13), 2.05cqw, calc(var(--u) * 13));
  font-weight: 850;
  line-height: 1.02;
}

body[data-page="home"] .home-shop-product-name {
  color: #26324f;
  font-size: clamp(calc(var(--u) * 14), 2.7cqw, calc(var(--u) * 16));
  font-weight: 950;
  line-height: 1.04;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 2px 5px rgba(84, 63, 106, 0.1);
}

body[data-page="home"] .home-shop-product-desc {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  color: #875735;
  font-size: clamp(calc(var(--u) * 13), 1.98cqw, calc(var(--u) * 13));
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: 0;
  text-overflow: clip;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}

body[data-page="home"] .home-shop-pick-speech-main,
body[data-page="home"] .home-shop-pick-speech-sub,
body[data-page="home"] .home-shop-pick-speech-tail {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  min-height: 0;
  overflow: visible;
  padding: 0;
  margin: 0;
  color: #6f4027;
  font-family:
    "KyoboHandwriting2023",
    "Nanum Pen Script",
    "Gaegu",
    "Cafe24 Ssurround air",
    "Pretendard",
    "Noto Sans KR",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    cursive;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  text-overflow: clip;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92),
    0 2px 5px rgba(74, 46, 31, 0.18);
  white-space: normal;
}

body[data-page="home"] .home-shop-pick-speech-main {
  color: #192542;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: clamp(calc(var(--u) * 14), 2.64cqw, calc(var(--u) * 14.4));
  font-weight: 950;
  line-height: 1.02;
  overflow-wrap: normal;
  text-wrap: balance;
}

body[data-page="home"] .home-shop-pick-speech-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(calc(var(--u) * 2), 0.5cqw, calc(var(--u) * 3));
  min-height: 0;
  overflow: visible;
  color: #6f4027;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: clamp(calc(var(--u) * 13), 2.26cqw, calc(var(--u) * 13));
  font-weight: 900;
  line-height: 1;
  margin-top: 0;
  white-space: nowrap;
}

body[data-page="home"] .home-shop-pick-speech-tail {
  color: #6f4027;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: clamp(calc(var(--u) * 13), 2.26cqw, calc(var(--u) * 13));
  font-weight: 900;
  line-height: 1;
  margin-top: 0;
  white-space: nowrap;
}

body[data-page="home"] .home-shop-pick-speech-sub img {
  display: inline-block;
  width: clamp(calc(var(--u) * 13), 3.1cqw, calc(var(--u) * 18));
  height: clamp(calc(var(--u) * 13), 3.1cqw, calc(var(--u) * 18));
  flex: 0 0 auto;
  object-fit: contain;
  transform: translateY(1%);
}

body[data-page="home"] .home-shop-feature .home-shop-tag,
body[data-page="home"] .home-shop-feature .home-shop-product-name {
  text-align: center;
}

body[data-page="home"] .home-shop-mini .home-shop-tag {
  font-size: clamp(calc(var(--u) * 13), 1.8cqw, calc(var(--u) * 13));
}

body[data-page="home"] .home-shop-mini .home-shop-product-name {
  font-size: clamp(calc(var(--u) * 13), 2.05cqw, calc(var(--u) * 13));
}

body[data-page="home"] .home-shop-cta {
  left: 13.15%;
  top: 86.1%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 73.7%;
  height: 8.2%;
  padding: 0 7.2%;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #11203c;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="home"] .home-shop-cta::before {
  content: "";
  position: absolute;
  inset: 7% 2.5%;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.68) 48%, transparent 64% 100%);
  opacity: 0;
  transform: translateX(-70%);
  pointer-events: none;
}

body[data-page="home"] .home-shop-cta:hover::before,
body[data-page="home"] .home-shop-cta:focus-visible::before {
  animation: home-attendance-cta-shine 720ms ease both;
}

body[data-page="home"] .home-shop-cta:focus-visible {
  outline: 3px solid rgba(255, 134, 183, 0.82);
  outline-offset: 2px;
}

body:is([data-page="home"], [data-page="consult"]) .home-shop-cta .home-fit-text {
  line-height: 1;
  transform: translateY(3%);
}

body[data-page="home"] .home-attendance-reward-value {
  left: 11.1%;
  top: 37.55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(calc(var(--u) * 2), 0.75cqw, calc(var(--u) * 5));
  width: 18.45%;
  height: 23.65%;
  padding: 0;
  overflow: visible;
  color: #122044;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: clamp(calc(var(--u) * 18), 5.6cqw, calc(var(--u) * 34));
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94),
    0 6px 15px rgba(255, 141, 167, 0.16);
}

body[data-page="home"] .home-attendance-reward-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(calc(var(--u) * 2), 0.75cqw, calc(var(--u) * 5));
  width: 100%;
  height: 100%;
  color: rgba(42, 51, 76, 0.72);
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: clamp(calc(var(--u) * 13), 2.45cqw, calc(var(--u) * 15));
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
  transform: translateY(1%);
}

body[data-page="home"] .home-attendance-reward-empty::before {
  content: "";
  display: block;
  flex: 0 0 38%;
  width: 41%;
  min-height: 0;
  background: url("assets/ui/home-cards/current/home-catnip-icon-user-20260705.png?v=20260705-user1") center / contain no-repeat;
  opacity: 0.42;
  filter:
    grayscale(0.08)
    saturate(0.86)
    drop-shadow(0 1px 2px rgba(81, 127, 41, 0.12));
}

body[data-page="home"] .home-attendance-reward-icon {
  display: block;
  position: static;
  flex: 0 0 38%;
  width: 41%;
  min-height: 0;
  background: url("assets/ui/home-cards/current/home-catnip-icon-user-20260705.png?v=20260705-user1") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(81, 127, 41, 0.18));
}

body[data-page="home"] .home-attendance-reward-amount {
  display: block;
  position: static;
  color: #e7798f;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: clamp(calc(var(--u) * 13), 2.45cqw, calc(var(--u) * 15));
  font-weight: 900;
  font-variant-numeric: lining-nums;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92),
    0 3px 8px rgba(92, 58, 82, 0.12);
}

body[data-page="home"] .home-attendance-art-card .farm-progress {
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body[data-page="home"] .home-attendance-art-card .farm-progress span {
  position: absolute;
  display: block;
  top: 75.41%;
  width: 6.9%;
  height: auto;
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.stamp-1 {
  left: 11.95%;
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.stamp-2 {
  left: 24.59%;
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.stamp-3 {
  left: 37.26%;
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.stamp-4 {
  left: 49.90%;
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.stamp-5 {
  left: 62.43%;
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.stamp-6 {
  left: 75.04%;
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.stamp-7 {
  left: 87.64%;
}

body[data-page="home"] .home-attendance-art-card .farm-progress span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52.5%;
  z-index: 2;
  width: 108%;
  height: 108%;
  background: url("assets/ui/home-cards/current/home-attendance-paw-jelly-20260705.webp?v=20260706-jelly7") center / contain no-repeat;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.84);
  filter:
    saturate(1.04)
    drop-shadow(0 3px 5px rgba(255, 118, 142, 0.14));
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.done {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.done::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.8);
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.is-new::before {
  animation: home-attendance-stamp 420ms ease-out both;
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.is-new::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 188%;
  height: 188%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.82) 0 11%, rgba(255, 130, 156, 0.62) 12% 22%, transparent 24%),
    radial-gradient(circle at 23% 25%, rgba(255, 224, 124, 0.96) 0 3.7%, transparent 4.8%),
    radial-gradient(circle at 72% 24%, rgba(255, 234, 156, 0.92) 0 3.2%, transparent 4.3%),
    radial-gradient(circle at 81% 70%, rgba(255, 146, 183, 0.9) 0 4%, transparent 5.2%),
    radial-gradient(circle at 26% 77%, rgba(151, 236, 224, 0.86) 0 3.6%, transparent 4.8%),
    radial-gradient(circle at 50% 50%, rgba(255, 125, 154, 0.32) 0 36%, transparent 58%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.42) rotate(-8deg);
  filter:
    blur(0.1px)
    drop-shadow(0 0 8px rgba(255, 129, 160, 0.32))
    drop-shadow(0 0 10px rgba(255, 224, 124, 0.24));
  animation: home-attendance-stamp-burst 760ms cubic-bezier(0.18, 0.92, 0.2, 1) both;
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.is-bonus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 196%;
  height: 196%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 224, 124, 0.95) 0 4%, transparent 5%),
    radial-gradient(circle at 73% 22%, rgba(255, 224, 124, 0.86) 0 3.5%, transparent 4.5%),
    radial-gradient(circle at 82% 74%, rgba(255, 184, 210, 0.9) 0 4%, transparent 5%),
    radial-gradient(circle at 20% 76%, rgba(167, 246, 229, 0.86) 0 4%, transparent 5%),
    radial-gradient(circle at 50% 50%, rgba(255, 222, 105, 0.42) 0 32%, transparent 58%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.48) rotate(0deg);
}

body[data-page="home"] .home-attendance-art-card .farm-progress span.is-new.is-bonus::after {
  animation: home-attendance-bonus-spark 900ms ease-out both;
}

body[data-page="home"] .home-attendance-button {
  left: 15.6%;
  top: 84.9%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 69.7%;
  height: 11.88%;
  padding: 0 6.8%;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #11203c;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-cta-label,
body:is([data-page="home"], [data-page="consult"]) .home-attendance-button .home-fit-text,
body:is([data-page="home"], [data-page="consult"]) .home-ranking-cta .home-fit-text,
body:is([data-page="home"], [data-page="consult"]) .home-shop-cta .home-fit-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  color: #26324f;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: clamp(15px, 3.25cqw, 18px);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.76),
    0 1px 5px rgba(74, 52, 104, 0.12);
  transform: translateY(1%);
  white-space: nowrap;
}

body:is([data-page="home"], [data-page="consult"]) .home-shop-cta .home-fit-text {
  transform: translateY(16%);
}

body[data-page="home"] .home-attendance-button::before {
  content: "";
  position: absolute;
  inset: 7% 2.5%;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.68) 48%, transparent 64% 100%);
  opacity: 0;
  transform: translateX(-70%);
  pointer-events: none;
}

body[data-page="home"] .home-attendance-art-card.is-watered .home-attendance-button::before {
  animation: home-attendance-cta-shine 720ms ease both;
}

body[data-page="home"] .home-attendance-button:disabled {
  cursor: default;
  color: #11203c;
  opacity: 1;
  -webkit-text-fill-color: #11203c;
}

body[data-page="home"] .home-attendance-button:focus-visible {
  outline: 3px solid rgba(255, 134, 183, 0.82);
  outline-offset: 2px;
}

body[data-page="home"] .home-attendance-art-card .farm-pot-stage {
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  pointer-events: none;
}

body[data-page="home"] .home-attendance-water {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body[data-page="home"] .home-attendance-water-path {
  fill: none;
  stroke: rgba(54, 188, 230, 0.96);
  stroke-width: 2.45;
  stroke-linecap: round;
  stroke-dasharray: 20 8;
  stroke-dashoffset: 22;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 7px rgba(88, 218, 240, 0.62))
    drop-shadow(0 3px 6px rgba(79, 193, 219, 0.32));
  opacity: 0;
}

body[data-page="home"] .home-attendance-water-path.path-b {
  stroke: rgba(111, 231, 230, 0.88);
  stroke-width: 1.7;
}

body[data-page="home"] .home-attendance-water-path.path-c {
  stroke: rgba(205, 247, 255, 0.88);
  stroke-width: 1.18;
}

body[data-page="home"] .farm-pot-stage.is-watered .home-attendance-water-path {
  animation: home-attendance-water-stream 1280ms ease-out both;
}

body[data-page="home"] .farm-pot-stage.is-watered .home-attendance-water-path.path-b {
  animation-delay: 70ms;
}

body[data-page="home"] .farm-pot-stage.is-watered .home-attendance-water-path.path-c {
  animation-delay: 130ms;
}

body[data-page="home"] .home-attendance-art-card .water-drop {
  position: absolute;
  width: clamp(calc(var(--u) * 6), 1.85cqw, calc(var(--u) * 12));
  height: clamp(calc(var(--u) * 6), 1.85cqw, calc(var(--u) * 12));
  border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 30% 25%, #ffffff 0 18%, #8de7ef 40%, #58bfd9 100%);
  opacity: 0;
  transform: rotate(-35deg) scale(0.4);
  filter: drop-shadow(0 2px 5px rgba(83, 184, 206, 0.22));
}

body[data-page="home"] .home-attendance-art-card .drop-a {
  left: 60.7%;
  top: 54.4%;
}

body[data-page="home"] .home-attendance-art-card .drop-b {
  left: 61.4%;
  top: 55.3%;
}

body[data-page="home"] .home-attendance-art-card .drop-c {
  left: 60.2%;
  top: 53.5%;
}

body[data-page="home"] .home-attendance-art-card .drop-d {
  left: 59.5%;
  top: 54.2%;
}

body[data-page="home"] .home-attendance-art-card .drop-e {
  left: 60.9%;
  top: 53.8%;
}

body[data-page="home"] .home-attendance-art-card .drop-f {
  left: 59.9%;
  top: 55%;
}

body[data-page="home"] .farm-pot-stage.is-watered .water-drop {
  animation: home-attendance-water-drop 850ms ease-out both;
}

body[data-page="home"] .farm-pot-stage.is-watered .drop-b {
  animation-delay: 90ms;
}

body[data-page="home"] .farm-pot-stage.is-watered .drop-c {
  animation-delay: 170ms;
}

body[data-page="home"] .farm-pot-stage.is-watered .drop-d {
  animation-delay: 240ms;
}

body[data-page="home"] .farm-pot-stage.is-watered .drop-e {
  animation-delay: 310ms;
}

body[data-page="home"] .farm-pot-stage.is-watered .drop-f {
  animation-delay: 380ms;
}

body[data-page="home"] .home-attendance-art-card .farm-sparkle {
  position: absolute;
  width: clamp(calc(var(--u) * 8), 2.15cqw, calc(var(--u) * 13));
  height: clamp(calc(var(--u) * 8), 2.15cqw, calc(var(--u) * 13));
  opacity: 0;
  transform: scale(0.4) rotate(45deg);
  pointer-events: none;
}

body[data-page="home"] .home-attendance-art-card .farm-sparkle::before,
body[data-page="home"] .home-attendance-art-card .farm-sparkle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 228, 129, 0), rgba(255, 205, 83, 0.95), rgba(255, 228, 129, 0));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

body[data-page="home"] .home-attendance-art-card .farm-sparkle::after {
  transform: rotate(45deg) scale(0.68);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 250, 196, 0.92), rgba(255, 255, 255, 0));
}

body[data-page="home"] .home-attendance-art-card .sparkle-a {
  left: 45.2%;
  top: 45.2%;
}

body[data-page="home"] .home-attendance-art-card .sparkle-b {
  left: 50.6%;
  top: 46.4%;
}

body[data-page="home"] .home-attendance-art-card .sparkle-c {
  left: 48.2%;
  top: 50.2%;
}

body[data-page="home"] .farm-pot-stage.is-watered .farm-sparkle {
  animation: home-attendance-sparkle 920ms ease-out both;
}

body[data-page="home"] .farm-pot-stage.is-watered .sparkle-b {
  animation-delay: 120ms;
}

body[data-page="home"] .farm-pot-stage.is-watered .sparkle-c {
  animation-delay: 220ms;
}

body[data-page="home"] .home-attendance-art-card .farm-reward-float {
  position: absolute;
  left: 49.1%;
  top: 42.8%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  min-width: clamp(calc(var(--u) * 62), 14cqw, calc(var(--u) * 92));
  padding: calc(var(--u) * 7) calc(var(--u) * 13) calc(var(--u) * 7) calc(var(--u) * 10);
  border: 1px solid rgba(236, 176, 112, 0.5);
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.94);
  color: #e7798f;
  font-size: clamp(calc(var(--u) * 15), 3.35cqw, calc(var(--u) * 20));
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px) scale(0.86);
  box-shadow:
    0 10px 22px rgba(92, 58, 82, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-page="home"] .home-attendance-art-card .farm-reward-float::before {
  content: "";
  width: clamp(calc(var(--u) * 15), 4cqw, calc(var(--u) * 24));
  height: clamp(calc(var(--u) * 14), 3.6cqw, calc(var(--u) * 22));
  background: url("assets/ui/home-cards/current/home-catnip-icon-user-20260705.png?v=20260705-user1") center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(81, 127, 41, 0.16));
}

body[data-page="home"] .farm-pot-stage.is-watered .farm-reward-float {
  animation: home-attendance-reward-float 1180ms ease-out both;
}

body[data-page="home"] .farm-pot-stage.is-bonus .farm-reward-float {
  color: #b46b20;
  background: linear-gradient(135deg, rgba(255, 253, 239, 0.98), rgba(255, 230, 146, 0.96));
}

body[data-page="home"] .home-attendance-art-card.is-watered {
  animation: home-attendance-card-pulse 760ms ease-out both;
}

@keyframes home-attendance-stamp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    filter:
      brightness(1.42)
      saturate(1.16)
      drop-shadow(0 10px 13px rgba(255, 119, 132, 0.22));
  }

  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
    filter:
      brightness(1.2)
      saturate(1.12)
      drop-shadow(0 6px 10px rgba(255, 119, 132, 0.2));
  }

  46% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }

  72% {
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
    filter:
      saturate(1.04)
      drop-shadow(0 3px 5px rgba(255, 118, 142, 0.14));
  }
}

@keyframes home-attendance-stamp-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42) rotate(-8deg);
  }

  16% {
    opacity: 0.96;
    transform: translate(-50%, -50%) scale(0.86) rotate(2deg);
  }

  48% {
    opacity: 0.74;
    transform: translate(-50%, -50%) scale(1.18) rotate(12deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.58) rotate(24deg);
  }
}

@keyframes home-logo-reset-pulse {
  0% {
    transform: scale(1);
  }

  38% {
    transform: scale(0.97);
    filter: drop-shadow(0 0 12px rgba(128, 231, 212, 0.36));
  }

  100% {
    transform: scale(1);
  }
}

@keyframes home-title-reset-pulse {
  0% {
    opacity: 0;
    transform: scale(0.86);
  }

  38% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes home-attendance-bonus-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.52) rotate(0deg);
  }

  36% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04) rotate(8deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.52) rotate(18deg);
  }
}

@keyframes home-attendance-cta-shine {
  0% {
    opacity: 0;
    transform: translateX(-72%);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(72%);
  }
}

@keyframes home-attendance-water-stream {
  0% {
    opacity: 0;
    stroke-dashoffset: 24;
  }

  16% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: -30;
  }
}

@keyframes home-attendance-water-drop {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-35deg) scale(0.4);
  }

  24% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translate(-12.8cqw, -5.2cqw) rotate(-35deg) scale(0.92);
  }
}

@keyframes home-attendance-sparkle {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(20deg);
  }

  34% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.32) rotate(75deg);
  }
}

@keyframes home-attendance-reward-float {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.86);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -28px) scale(0.94);
  }
}

@keyframes home-attendance-card-pulse {
  0%,
  100% {
    transform: translateY(0);
  }

  42% {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-attendance-art-card.is-watered,
  body[data-page="home"] .home-attendance-art-card .farm-progress span.is-new::before,
  body[data-page="home"] .home-attendance-art-card .farm-progress span.is-new::after,
  body[data-page="home"] .home-attendance-art-card .farm-progress span.is-new.is-bonus::after,
  body[data-page="home"] .home-attendance-art-card.is-watered .home-attendance-button::before,
  body[data-page="home"] .farm-pot-stage.is-watered .home-attendance-water-path,
  body[data-page="home"] .farm-pot-stage.is-watered .water-drop,
  body[data-page="home"] .farm-pot-stage.is-watered .farm-sparkle,
  body[data-page="home"] .farm-pot-stage.is-watered .farm-reward-float {
    animation: none;
  }
}

body[data-page="market"] {
  min-height: 100svh;
  overflow-x: hidden;
  background: #fff7ef;
  color: #07173a;
  scrollbar-gutter: stable;
}

body[data-page="market"] .market-shell {
  /* PC = 모바일 확대. 손잡이는 :root의 --u-max. */
  --market-frame-width: min(100vw, calc(390px * var(--u-max)));
  --market-header-height: clamp(42px, calc(var(--market-frame-width) * 0.1448), 112px);
  --market-nav-height: calc(var(--market-frame-width) * 0.1862);
  --market-side-pad: clamp(6px, calc(var(--market-frame-width) * 0.02), 28px);
  --market-navy: #07173a;
  --market-brown: #5b3a21;
  --market-mint: #8fe7d5;
  --market-pink: #ffb8cf;
  --market-gold: #e3b463;
  position: relative;
  width: var(--market-frame-width);
  min-height: 100svh;
  margin: 0 auto;
  overflow-x: hidden;
  background: #fff7ef;
  box-shadow: 0 0 72px rgba(20, 15, 32, 0.18);
}

body[data-page="market"] .market-fixed-bg {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 50%;
  width: var(--market-frame-width);
  height: 100svh;
  transform: translateX(-50%);
  background: #f8eadf url("assets/ui/background/current/market-ohaeng-shop-background.jpg?v=20260713-bg-lite1") center top / cover no-repeat;
  pointer-events: none;
}

body[data-page="market"] .market-fixed-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 250, 245, 0.08), rgba(255, 247, 241, 0.16));
}

@media (min-width: 900px) {
  body[data-page="market"] {
    background: #160d3e;
  }

  body[data-page="market"] .market-shell {
    background: transparent;
    box-shadow: none;
  }

  body[data-page="market"] .market-fixed-bg {
    width: 100vw;
    filter: saturate(0.9) brightness(0.88);
    background:
      linear-gradient(90deg, rgba(5, 8, 24, 0.04) 0%, rgba(5, 8, 24, 0.08) 30%, rgba(5, 8, 24, 0.24) 50%, rgba(5, 8, 24, 0.08) 70%, rgba(5, 8, 24, 0.04) 100%),
      linear-gradient(180deg, rgba(2, 7, 18, 0.12), rgba(2, 7, 18, 0.24)),
      url("assets/ui/background/current/market-background-desktop.jpg?v=20260713-bg-lite1") center / cover no-repeat,
    #62413f;
  }

  body[data-page="market"] .market-fixed-bg::before {
    display: none;
  }
}

body[data-page="market"] .market-fixed-header,
body[data-page="market"] .market-bottom-nav {
  position: fixed;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
}

body[data-page="market"] .market-fixed-header {
  top: 0;
  width: var(--market-frame-width);
  height: var(--market-header-height);
  overflow: hidden;
}

body[data-page="market"] .market-transition-veil {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 50%;
  width: var(--market-frame-width);
  height: 100svh;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 238, 247, 0.88), rgba(187, 249, 238, 0.56) 34%, transparent 63%),
    linear-gradient(180deg, rgba(255, 246, 222, 0.18), rgba(8, 14, 33, 0.42));
  mix-blend-mode: screen;
}

body[data-page="market"].is-market-transitioning .market-transition-veil {
  animation: market-transition-veil 600ms ease both;
}

body[data-page="market"] .market-header-art,
body[data-page="market"] .market-bottom-nav img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="market"] .market-header-art {
  object-fit: fill;
}

body[data-page="market"] .market-bottom-nav img {
  object-fit: contain;
}

body[data-page="market"] .market-back-hit,
body[data-page="market"] .market-catnip-hit,
body[data-page="market"] .market-bell-hit,
body[data-page="market"] .market-menu-hit,
body[data-page="market"] .market-bottom-nav a {
  position: absolute;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="market"] .market-back-hit {
  left: 0;
  top: 0;
  width: 21%;
  height: 100%;
}

body[data-page="market"] .market-catnip-hit {
  top: 12%;
  height: 80%; /* 중심 52% 유지 — 아이콘과 어긋나면 안 된다 */
  left: 46%;
  box-sizing: border-box;
  display: flex;
  width: 29.6%;
  align-items: center;
  justify-content: center;
  padding-right: 2%;
  padding-left: 10%;
  color: #432b0d;
  font-size: calc(var(--u) * 15);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

body[data-page="market"] .market-catnip-hit span {
  display: block;
  min-width: 6.2ch;
  max-width: 7.3ch;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translateY(-0.08em);
}

body[data-page="market"] .market-bell-hit {
  left: 76.5%;
  top: 0;
  width: 10.7%;
  height: 100%;
}

body[data-page="market"] .market-bell-hit.has-alert::after {
  content: "";
  position: absolute;
  top: 8%;
  right: 8%;
  width: 10px;
  height: 10px;
  border: 2px solid #fff1c4;
  border-radius: 50%;
  background: #ee4b42;
  box-shadow: 0 0 12px rgba(238, 75, 66, 0.7);
}

body[data-page="market"] .market-menu-hit {
  left: 87.6%;
  top: 0;
  width: 10.6%;
  height: 100%;
}

body[data-page="market"] .market-bottom-nav {
  bottom: max(-2px, calc(env(safe-area-inset-bottom) - 8px));
  width: min(calc(var(--market-frame-width) - 10px), 100vw);
  height: var(--market-nav-height);
}

body[data-page="market"] .market-bottom-nav a {
  top: 11%;
  height: 73%;
}

body[data-page="market"] .market-bottom-nav .fortune {
  left: 6.5%;
  width: 15%;
}

body[data-page="market"] .market-bottom-nav .play {
  left: 24.2%;
  width: 15%;
}

body[data-page="market"] .market-bottom-nav .home {
  left: 40.8%;
  top: 0;
  width: 18.5%;
  height: 96%;
}

body[data-page="market"] .market-bottom-nav .market {
  left: 61.2%;
  width: 15%;
}

body[data-page="market"] .market-bottom-nav .my {
  left: 78.8%;
  width: 15%;
}

body[data-page="consult"] {
  --consult-frame-width: min(100vw, 680px);
  --consult-header-height: clamp(42px, calc(var(--consult-frame-width) * 0.1448), 112px);
  /* ⚠️ 2026-08-02: clamp(74px, …, 142px)이었다. 모바일 390에서 72.6px이 계산되는데
     하한 74px에 걸려 올라가면서 **PC/모바일 배율이 1.35가 아니라 1.325**가 됐다.
     네비 항목도 가로 1.359 / 세로 1.325로 따로 늘어나 비율이 어긋났다("묘하게 어긋나는 느낌").
     frame-width가 이미 390 × --u 이므로 경계만 걷으면 정확히 비례한다. */
  --consult-nav-height: calc(var(--consult-frame-width) * 0.1862);
  --consult-side-pad: clamp(6px, calc(var(--consult-frame-width) * 0.02), 28px);
  background: #120c21;
}

body[data-page="consult"] .consult-shell {
  position: relative;
  width: var(--consult-frame-width);
  min-height: 100svh;
  margin: 0 auto;
  overflow-x: hidden;
  padding-bottom: 0;
  background: #130d18;
  box-shadow: 0 0 72px rgba(15, 8, 20, 0.42);
}

body[data-page="consult"] .consult-fixed-bg {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 50%;
  width: var(--consult-frame-width);
  height: 100svh;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(17, 9, 18, 0.14), rgba(17, 9, 18, 0.36)),
    url("assets/ui/background/current/consult-background.jpg?v=20260713-bg-lite1") center top / cover no-repeat,
    #5f3522;
  pointer-events: none;
}

body[data-page="consult"] .consult-fixed-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 11, 22, 0.18), rgba(255, 222, 178, 0.08) 45%, rgba(18, 11, 22, 0.16)),
    linear-gradient(180deg, rgba(8, 5, 14, 0.04), rgba(8, 5, 14, 0.18));
}

@media (min-width: 900px) {
  body[data-page="consult"] {
    background: #140b21;
  }

  body[data-page="consult"] .consult-shell {
    background: transparent;
    box-shadow: none;
  }

  body[data-page="consult"] .consult-fixed-bg {
    width: 100vw;
    filter: saturate(0.92) brightness(0.88);
    background:
      linear-gradient(90deg, rgba(5, 8, 20, 0.04) 0%, rgba(5, 8, 20, 0.08) 30%, rgba(12, 8, 22, 0.26) 50%, rgba(5, 8, 20, 0.08) 70%, rgba(5, 8, 20, 0.04) 100%),
      linear-gradient(180deg, rgba(12, 6, 18, 0.08), rgba(12, 6, 18, 0.24)),
      url("assets/ui/background/current/consult-background-desktop.jpg?v=20260713-bg-lite1") center / cover no-repeat,
    #583325;
  }

  body[data-page="consult"] .consult-fixed-bg::before {
    display: none;
  }
}

body[data-page="consult"] .consult-fixed-header,
body[data-page="consult"] .consult-bottom-nav {
  position: fixed;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
}

body[data-page="consult"] .consult-fixed-header {
  top: 0;
  width: var(--consult-frame-width);
  height: var(--consult-header-height);
  overflow: hidden;
}

body[data-page="consult"] .consult-header-art,
body[data-page="consult"] .consult-bottom-nav img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="consult"] .consult-header-art {
  object-fit: fill;
}

body[data-page="consult"] .consult-bottom-nav img {
  object-fit: contain;
}

body[data-page="consult"] .consult-back-hit,
body[data-page="consult"] .consult-catnip-hit,
body[data-page="consult"] .consult-bell-hit,
body[data-page="consult"] .consult-menu-hit,
body[data-page="consult"] .consult-bottom-nav a {
  position: absolute;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="consult"] .consult-back-hit {
  left: 0;
  top: 0;
  width: 21%;
  height: 100%;
}

body[data-page="consult"] .consult-catnip-hit {
  top: 12%;
  height: 80%; /* 중심 52% 유지 — 아이콘과 어긋나면 안 된다 */
  left: 46%;
  box-sizing: border-box;
  display: flex;
  width: 29.6%;
  align-items: center;
  justify-content: center;
  padding-right: 2%;
  padding-left: 10%;
  color: #432b0d;
  font-size: clamp(calc(var(--u) * 15), 3.15vw, calc(var(--u) * 17));
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

body[data-page="consult"] .consult-catnip-hit span {
  display: block;
  min-width: 6.2ch;
  max-width: 7.3ch;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translateY(-0.08em);
}

body[data-page="consult"] .consult-bell-hit {
  left: 76.5%;
  top: 0;
  width: 10.7%;
  height: 100%;
}

body[data-page="consult"] .consult-bell-hit.has-alert::after {
  content: "";
  position: absolute;
  top: 8%;
  right: 8%;
  width: 10px;
  height: 10px;
  border: 2px solid #fff1c4;
  border-radius: 50%;
  background: #ee4b42;
  box-shadow: 0 0 12px rgba(238, 75, 66, 0.7);
}

body[data-page="consult"] .consult-menu-hit {
  left: 87.6%;
  top: 0;
  width: 10.6%;
  height: 100%;
}

body[data-page="consult"] .consult-main {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding:
    calc(var(--consult-header-height) + max(var(--consult-side-pad), env(safe-area-inset-top)))
    var(--consult-side-pad)
    calc(var(--consult-nav-height) + max(var(--consult-side-pad), env(safe-area-inset-bottom)));
}

/* ─── 묘한상담소 4카드 재구성 (2026-07-31) ────────────────────────────
   구조: ①히어로(또또) → ②4카드 → ③오늘의 개운법 → ④상담 기록.

   ③은 home.html의 개운법 카드를 '그대로' 쓴다. 사주 프로필 입력도 그 안에 있다.
   그래서 여기에 프로필 카드나 개운법 카드를 따로 만들지 않는다.
   대신 그쪽 CSS 스코프를 body:is([data-page="home"], [data-page="consult"])로 넓혔다.

   .consult-main이 이미 grid + gap: var(--consult-side-pad)라
   섹션에 margin을 주지 않는다. 주면 8px 통일이 깨진다. */

body[data-page="consult"] .consult-profile-card,
body[data-page="consult"] .consult-menu-card,
body[data-page="consult"] .consult-readings-cta {
  container-type: inline-size;
}

/* ② 내 사주 프로필 — 4카드 전부의 관문.
   개운법 카드 안에도 같은 프로필 컨트롤이 있다. 둘은 같은 저장소를 읽고
   같은 다이얼로그를 연다(연동은 script.js의 renderConsultProfileCard 참고).
   4카드와 같은 글라스 처리를 써서 한 세트로 보이게 한다. */
body[data-page="consult"] .consult-profile-card {
  padding: var(--card-pad);
  border: 1px solid rgba(255, 232, 191, 0.44);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.9), rgba(255, 244, 232, 0.74)),
    rgba(255, 248, 236, 0.8);
  box-shadow:
    0 14px 32px rgba(33, 17, 14, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
}

body[data-page="consult"] .consult-profile-kicker {
  margin: 0 0 var(--sp-hair);
  color: #99622b;
  font-size: var(--fs-caption);
  font-weight: 900;
}











/* ① 히어로 — 또또 아트 카드.
   이미지를 아직 안 만들었다. 그래서 <img>의 onerror가 .is-art를 벗기고
   자기 자신을 지운다(boutique.html과 같은 방식). 그러면 아래
   :not(.is-art) 규칙이 받아서 글라스 패널로 떨어진다.
   이미지를 넣으면 .is-art가 살아남아 마켓 히어로와 같은 아트 카드가 된다. */


/* 마켓 히어로와 '같은 값'으로 맞춘다. 1280px에서 둘 다 폭 652.8px인데
   비율이 다르면 높이가 어긋나 두 페이지를 오갈 때 히어로가 튄다.
   (1903/826 = 2.304. 실제 그림은 1700x741로 넣으면 되고, 마켓도 그렇게 쓴다.) */



/* ⚠️ 아트 카드가 들어오면 이 좌표는 그림 구도에 맞춰 다시 잡아야 한다.
   지금 값은 마켓 히어로에서 가져온 출발점일 뿐 측정한 값이 아니다. */




/* 또또 말풍선 — 마켓의 쭈루 말풍선과 같은 자리. 그림이 없으면 숨긴다.
   글라스 패널 위에 말풍선만 떠 있으면 어디서 나온 말인지 알 수 없다. */




/* ② 4카드 — 사주 · 운세 · 점괘 · 궁합. 각각 다른 페이지로 간다. */
body[data-page="consult"] .consult-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 4카드는 한 묶음이라 서로는 가깝고(12), 다른 섹션과는 멀어야(24) 한 세트로 읽힌다. */
  gap: var(--nn-group-gap);
}

body[data-page="consult"] .consult-menu-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 132px;
  padding: var(--card-pad);
  border: 1px solid rgba(255, 232, 191, 0.44);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.9), rgba(255, 244, 232, 0.74)),
    rgba(255, 248, 236, 0.8);
  box-shadow:
    0 14px 32px rgba(33, 17, 14, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  color: #382920;
  text-decoration: none;
}

body[data-page="consult"] .consult-menu-card:hover {
  border-color: rgba(154, 98, 43, 0.42);
  box-shadow: 0 16px 36px rgba(33, 17, 14, 0.2);
}

body[data-page="consult"] .consult-menu-card:active {
  transform: translateY(1px);
}

body[data-page="consult"] .consult-menu-card:focus-visible {
  outline: 3px solid rgba(217, 143, 78, 0.82);
  outline-offset: 2px;
}

/* 아직 페이지가 없는 카드(사주·운세·궁합). href가 없는 <a>는 눌리지도 포커스되지도 않는다.
   눌리는 카드와 눈으로 구분되게 낮춰 두되 글자 대비는 유지한다 — 읽히긴 해야 한다.
   페이지가 생겨 href가 붙는 순간 이 규칙들은 저절로 빠진다. */
body[data-page="consult"] .consult-menu-card:not([href]),
body[data-page="consult"] .consult-menu-card:not([href]):hover {
  border-color: rgba(255, 232, 191, 0.26);
  background:
    linear-gradient(135deg, rgba(252, 246, 238, 0.74), rgba(248, 240, 229, 0.58)),
    rgba(250, 244, 234, 0.7);
  box-shadow:
    0 8px 20px rgba(33, 17, 14, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  cursor: default;
}

body[data-page="consult"] .consult-menu-card:not([href]):active {
  transform: none;
}

/* 카드 맨 아래에 붙인다(margin-top: auto). 설명 길이가 카드마다 달라도 칩이 한 줄에 선다.
   점선 테두리로 "확정 아님"을 알린다 — 눌리는 칩과 헷갈리면 안 된다. */
body[data-page="consult"] .consult-menu-soon {
  margin-top: auto;
  padding: 3px 10px;
  border: 1px dashed rgba(122, 79, 34, 0.36);
  border-radius: 999px;
  color: rgba(90, 66, 46, 0.88);
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

/* margin-top: auto는 남는 공간이 없으면 0이 된다. 설명이 길어 카드가 꽉 차는 경우에도
   칩이 설명에 붙지 않도록 최소 간격을 설명 쪽에 준다. 칩이 있는 카드에만 걸린다. */
body[data-page="consult"] .consult-menu-card:not([href]) .consult-menu-desc {
  margin-bottom: var(--sp-tight);
}

body[data-page="consult"] .consult-menu-price {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(154, 98, 43, 0.14);
  color: #7a4f22;
  font-size: var(--fs-caption);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

body[data-page="consult"] .consult-menu-price.is-free {
  background: linear-gradient(135deg, #c7f4eb, #ffd6c7);
  color: #1f4b52;
}

body[data-page="consult"] .consult-menu-name {
  margin-top: var(--sp-tight);
  color: #141e36;
  font-size: var(--fs-title);
  font-weight: 950;
  line-height: var(--lh-title);
}

body[data-page="consult"] .consult-menu-desc {
  margin: var(--sp-tight) 0 0;
  color: rgba(62, 45, 36, 0.82);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-body);
}

/* ④ 내 상담 기록 — 4카드가 쌓은 결과를 다시 보는 출구.
   그동안 진입점이 햄버거 메뉴뿐이었다. */
body[data-page="consult"] .consult-readings-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-hair);
  padding: var(--card-pad);
  border: 1px solid rgba(255, 232, 191, 0.44);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.88), rgba(255, 244, 232, 0.72)),
    rgba(255, 248, 236, 0.78);
  box-shadow:
    0 14px 32px rgba(33, 17, 14, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  text-decoration: none;
}

body[data-page="consult"] .consult-readings-cta:hover {
  border-color: rgba(154, 98, 43, 0.42);
}

body[data-page="consult"] .consult-readings-cta:active {
  transform: translateY(1px);
}

body[data-page="consult"] .consult-readings-cta:focus-visible {
  outline: 3px solid rgba(217, 143, 78, 0.82);
  outline-offset: 2px;
}

body[data-page="consult"] .consult-readings-label {
  color: #141e36;
  font-size: var(--fs-title);
  font-weight: 950;
}

body[data-page="consult"] .consult-readings-desc {
  color: rgba(62, 45, 36, 0.8);
  font-size: var(--fs-body);
  font-weight: 700;
}

body[data-page="consult"] .consult-bottom-nav {
  bottom: max(-2px, calc(env(safe-area-inset-bottom) - 8px));
  width: min(calc(var(--consult-frame-width) - 10px), 100vw);
  height: var(--consult-nav-height);
}

body[data-page="consult"] .consult-bottom-nav a {
  top: 11%;
  height: 73%;
}

body[data-page="consult"] .consult-bottom-nav .fortune {
  left: 6.5%;
  width: 15%;
}

body[data-page="consult"] .consult-bottom-nav .play {
  left: 24.2%;
  width: 15%;
}

body[data-page="consult"] .consult-bottom-nav .home {
  left: 40.8%;
  top: 0;
  width: 18.5%;
  height: 96%;
}

body[data-page="consult"] .consult-bottom-nav .market {
  left: 61.2%;
  width: 15%;
}

body[data-page="consult"] .consult-bottom-nav .my {
  left: 78.8%;
  width: 15%;
}

body[data-page="play"] {
  /* PC = 모바일 확대. 손잡이는 :root의 --u-max. */
  --play-frame-width: min(100vw, calc(390px * var(--u-max)));
  --play-header-height: clamp(42px, calc(var(--play-frame-width) * 0.1448), 112px);
  --play-nav-height: calc(var(--play-frame-width) * 0.1862);
  --play-side-pad: clamp(6px, calc(var(--play-frame-width) * 0.02), 28px);
  background: #211025;
}

body[data-page="play"] .play-shell {
  position: relative;
  width: var(--play-frame-width);
  min-height: 100svh;
  margin: 0 auto;
  overflow-x: hidden;
  padding-bottom: 0;
  background: #f3bfab;
  box-shadow: 0 0 72px rgba(35, 14, 34, 0.36);
}

body[data-page="play"] .play-fixed-bg {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 50%;
  width: var(--play-frame-width);
  height: 100svh;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(24, 10, 32, 0.22), rgba(24, 10, 32, 0.36)),
    url("assets/ui/background/current/play-background.jpg?v=20260713-bg-lite1") center top / cover no-repeat,
    #b77860;
  pointer-events: none;
}

body[data-page="play"] .play-fixed-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(31, 12, 42, 0.24), rgba(46, 20, 44, 0.1) 46%, rgba(31, 12, 42, 0.22)),
    linear-gradient(180deg, rgba(18, 8, 30, 0.08), rgba(30, 12, 36, 0.28));
}

@media (min-width: 900px) {
  body[data-page="play"] {
    background: #211025;
  }

  body[data-page="play"] .play-shell {
    background: transparent;
    box-shadow: none;
  }

  body[data-page="play"] .play-fixed-bg {
    width: 100vw;
    filter: saturate(0.88) brightness(0.78);
    background:
      linear-gradient(90deg, rgba(22, 9, 30, 0.12) 0%, rgba(22, 9, 30, 0.18) 30%, rgba(18, 8, 28, 0.38) 50%, rgba(22, 9, 30, 0.18) 70%, rgba(22, 9, 30, 0.12) 100%),
      linear-gradient(180deg, rgba(18, 8, 28, 0.12), rgba(18, 8, 28, 0.34)),
      url("assets/ui/background/current/play-background-desktop.jpg?v=20260713-bg-lite1") center / cover no-repeat,
    #b47b69;
  }

  body[data-page="play"] .play-fixed-bg::before {
    display: none;
  }
}

body[data-page="play"] .play-fixed-header,
body[data-page="play"] .play-bottom-nav {
  position: fixed;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
}

body[data-page="play"] .play-fixed-header {
  top: 0;
  width: var(--play-frame-width);
  height: var(--play-header-height);
  overflow: hidden;
}

body[data-page="play"] .play-header-art,
body[data-page="play"] .play-bottom-nav img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="play"] .play-header-art {
  object-fit: fill;
}

body[data-page="play"] .play-bottom-nav img {
  object-fit: contain;
}

body[data-page="play"] .play-back-hit,
body[data-page="play"] .play-catnip-hit,
body[data-page="play"] .play-bell-hit,
body[data-page="play"] .play-menu-hit,
body[data-page="play"] .play-bottom-nav a {
  position: absolute;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="play"] .play-back-hit {
  left: 0;
  top: 0;
  width: 21%;
  height: 100%;
}

body[data-page="play"] .play-catnip-hit {
  top: 12%;
  height: 80%; /* 중심 52% 유지 — 아이콘과 어긋나면 안 된다 */
  left: 46%;
  box-sizing: border-box;
  display: flex;
  width: 29.6%;
  align-items: center;
  justify-content: center;
  padding-right: 2%;
  padding-left: 10%;
  color: #432b0d;
  font-size: calc(var(--u) * 15);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

body[data-page="play"] .play-catnip-hit span {
  display: block;
  min-width: 6.2ch;
  max-width: 7.3ch;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translateY(-0.08em);
}

body[data-page="play"] .play-bell-hit {
  left: 76.5%;
  top: 0;
  width: 10.7%;
  height: 100%;
}

body[data-page="play"] .play-bell-hit.has-alert::after {
  content: "";
  position: absolute;
  top: 8%;
  right: 8%;
  width: 10px;
  height: 10px;
  border: 2px solid #fff1c4;
  border-radius: 50%;
  background: #ee4b42;
  box-shadow: 0 0 12px rgba(238, 75, 66, 0.7);
}

body[data-page="play"] .play-menu-hit {
  left: 87.6%;
  top: 0;
  width: 10.6%;
  height: 100%;
}

body[data-page="play"] .play-main {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding:
    calc(var(--play-header-height) + max(var(--play-side-pad), env(safe-area-inset-top)))
    var(--play-side-pad)
    calc(var(--play-nav-height) + max(var(--play-side-pad), env(safe-area-inset-bottom)));
}

body[data-page="play"] .play-panel,
body[data-page="play"] .play-feature-list article,
body[data-page="play"] .play-feature-list .feature-link-card {
  border: 1px solid rgba(255, 220, 176, 0.52);
  background:
    linear-gradient(135deg, rgba(255, 250, 241, 0.88), rgba(255, 235, 225, 0.74)),
    rgba(255, 247, 236, 0.78);
  box-shadow:
    0 18px 42px rgba(52, 20, 28, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}

body[data-page="play"] .play-hero {
  min-height: 168px;
  padding: calc(var(--u) * 24) calc(var(--u) * 22);
  border-radius: 24px;
}

body[data-page="play"] .play-hero h1 {
  color: #151f3f;
}

body[data-page="play"] .play-hero p:not(.eyebrow) {
  max-width: 24em;
  color: rgba(64, 42, 36, 0.86);
  font-weight: 850;
}

body[data-page="play"] .play-hero .eyebrow,
body[data-page="play"] .play-feature-list span {
  color: #9a5f3c;
}

body[data-page="play"] .play-hero img {
  width: min(34%, 138px);
  filter: drop-shadow(0 16px 24px rgba(58, 28, 36, 0.22));
}

body[data-page="play"] .play-feature-list {
  position: relative;
  z-index: 2;
  gap: calc(var(--u) * 14);
  margin-top: calc(var(--u) * 16);
}

body[data-page="play"] .play-feature-list article,
body[data-page="play"] .play-feature-list .feature-link-card {
  border-radius: 22px;
}

body[data-page="play"] .play-feature-list strong {
  color: #172241;
}

body[data-page="play"] .play-feature-list p {
  color: rgba(65, 45, 40, 0.78);
}

body[data-page="play"] .play-bottom-nav {
  bottom: max(-2px, calc(env(safe-area-inset-bottom) - 8px));
  width: min(calc(var(--play-frame-width) - 10px), 100vw);
  height: var(--play-nav-height);
}

body[data-page="play"] .play-bottom-nav a {
  top: 11%;
  height: 73%;
}

body[data-page="play"] .play-bottom-nav .fortune {
  left: 6.5%;
  width: 15%;
}

body[data-page="play"] .play-bottom-nav .play {
  left: 24.2%;
  width: 15%;
}

body[data-page="play"] .play-bottom-nav .home {
  left: 40.8%;
  top: 0;
  width: 18.5%;
  height: 96%;
}

body[data-page="play"] .play-bottom-nav .market {
  left: 61.2%;
  width: 15%;
}

body[data-page="play"] .play-bottom-nav .my {
  left: 78.8%;
  width: 15%;
}

body[data-page="market"] .market-scroll {
  position: relative;
  z-index: 1;
  display: grid;
  /* 세로 간격 = 좌우 여백. 홈과 같은 규칙이다. */
  gap: var(--market-side-pad);
  width: 100%;
  padding:
    calc(var(--market-header-height) + max(var(--market-side-pad), env(safe-area-inset-top)))
    var(--market-side-pad)
    calc(var(--market-nav-height) + max(var(--market-side-pad), env(safe-area-inset-bottom)));
}

/* 2026-07-30: 이 자리에 clamp(220px, 54cqw, 300px) 짜리 빈 블록이 있었다.
   배경 하단을 보여주려던 장치인데 grid 아이템이 되어 마지막 카드 아래에
   310px 빈 공간을 만들고 있었다. 하단 여백은 스크롤 컨테이너의
   padding-bottom(네비 높이 + 8px)이 이미 담당한다. */

body[data-page="market"] .market-hero-panel,
body[data-page="market"] .market-section {
  border: 1px solid rgba(219, 169, 91, 0.58);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 242, 249, 0.74)),
    radial-gradient(circle at 12% 12%, rgba(143, 231, 213, 0.22), transparent 42%);
  box-shadow: 0 14px 28px rgba(83, 54, 31, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

body[data-page="market"] .market-hero-panel {
  position: relative;
  min-height: 0;
  aspect-ratio: 1903 / 826;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: clamp(calc(var(--u) * 20), 5.1cqw, calc(var(--u) * 31));
  background: transparent;
  box-shadow: 0 14px 28px rgba(83, 54, 31, 0.12);
  container-type: inline-size;
}

body[data-page="market"] .market-hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

body[data-page="market"] .market-ohaeng-check-cta {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3060 / 400;
  overflow: hidden;
  border-radius: clamp(calc(var(--u) * 16), 4.3cqw, calc(var(--u) * 27));
  color: #263553;
  text-decoration: none;
  filter: drop-shadow(0 8px 14px rgba(82, 53, 31, 0.1));
  container-type: inline-size;
}

body[data-page="market"] .market-ohaeng-check-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

body[data-page="market"] .market-ohaeng-check-cta span {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 35.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50.5%;
  height: 100%;
  padding: 0 2%;
  color: #263553;
  font-size: clamp(calc(var(--u) * 15), 3.05cqw, calc(var(--u) * 18));
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}

body[data-page="market"] .market-ohaeng-check-cta:focus-visible {
  outline: 3px solid rgba(217, 143, 78, 0.82);
  outline-offset: 3px;
}

body[data-page="market"] .market-ohaeng-check-cta:hover {
  filter: drop-shadow(0 10px 18px rgba(82, 53, 31, 0.16)) brightness(1.015);
}

body[data-page="market"] .market-ohaeng-check-cta:active {
  transform: translateY(1px);
}

body[data-page="market"] .market-hero-panel::after {
  content: "";
  position: absolute;
  width: 42%;
  height: 54%;
  right: -12%;
  bottom: -18%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 184, 207, 0.32), transparent 68%);
  pointer-events: none;
}

body[data-page="market"] .market-hero-panel::after {
  display: none;
}

body[data-page="market"] .market-hero-copy {
  position: absolute;
  z-index: 2;
  top: 14.2%;
  left: 6.7%;
  width: 43.5%;
  max-width: none;
}

body[data-page="market"] .market-eyebrow {
  margin: 0 0 calc(var(--u) * 6);
  color: #b47b2e;
  font-size: calc(var(--u) * 15);
  font-weight: 900;
  letter-spacing: 0;
}

body[data-page="market"] h1,
body[data-page="market"] h2,
body[data-page="market"] h3,
body[data-page="market"] p {
  letter-spacing: 0;
}

body[data-page="market"] .market-hero-copy h1 {
  margin: 0;
  color: var(--market-navy);
  font-size: clamp(calc(var(--u) * 28), 7.7cqw, calc(var(--u) * 47));
  font-weight: 950;
  line-height: 1.02;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

body[data-page="market"] .market-hero-copy p:last-child {
  margin: 4.2% 0 0;
  color: #4f3527;
  font-size: clamp(calc(var(--u) * 14), 2.75cqw, calc(var(--u) * 16));
  font-weight: 750;
  line-height: 1.32;
}

body[data-page="market"] .market-guide-bubble {
  position: absolute;
  z-index: 3;
  left: 7.1%;
  bottom: 12.7%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35.4%;
  height: 22.8%;
  padding: 0 4.2%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--market-brown);
  font-size: clamp(calc(var(--u) * 14), 2.48cqw, calc(var(--u) * 15));
  font-weight: 750;
  line-height: 1.16;
  text-align: center;
  box-shadow: none;
}

body[data-page="market"] .market-guide-text {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-4%);
}

body[data-page="market"] .market-guide-text b {
  color: #d75f87;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68);
}

body[data-page="market"] .market-ohaeng-check-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: calc(var(--u) * 12);
  align-items: center;
  overflow: hidden;
  padding: calc(var(--u) * 14) calc(var(--u) * 15);
  border: 1px solid rgba(219, 169, 91, 0.58);
  border-radius: 18px;
  background:
    radial-gradient(circle at 11% 18%, rgba(255, 244, 190, 0.72), transparent 30%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.9), rgba(235, 255, 249, 0.78) 50%, rgba(255, 235, 245, 0.78)),
    rgba(255, 255, 255, 0.8);
  box-shadow:
    0 10px 22px rgba(83, 54, 31, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

body[data-page="market"] .market-ohaeng-check-icon {
  display: grid;
  width: clamp(calc(var(--u) * 38), 10vw, calc(var(--u) * 54));
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 25%),
    linear-gradient(135deg, #fff2c3, #9beada 46%, #ffbad1);
  color: #51335d;
  font-size: calc(var(--u) * 18.72);
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(197, 140, 83, 0.36), 0 7px 14px rgba(122, 71, 55, 0.12);
}

body[data-page="market"] .market-ohaeng-check-card h2 {
  margin: 0;
  color: var(--market-navy);
  font-size: calc(var(--u) * 17.16);
  font-weight: 950;
  line-height: 1.08;
}

body[data-page="market"] .market-ohaeng-check-card p:last-child {
  margin: calc(var(--u) * 4) 0 0;
  color: #5b3a21;
  font-size: calc(var(--u) * 14);
  font-weight: 720;
  line-height: 1.22;
}

body[data-page="market"] .market-ohaeng-check-cta {
  z-index: 1;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(219, 169, 91, 0.72);
  border-radius: 999px;
  padding: 0 calc(var(--u) * 14);
  background: linear-gradient(90deg, rgba(151, 237, 218, 0.94), rgba(255, 178, 207, 0.94));
  color: var(--market-navy);
  font-size: calc(var(--u) * 15);
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(122, 71, 55, 0.13);
}

body[data-page="market"] .market-guide-cat {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="market"] .market-guide-jjuru {
  position: absolute;
  right: 2px;
  bottom: 68px;
  z-index: 2;
  width: min(36%, 170px);
  filter: drop-shadow(0 14px 18px rgba(52, 38, 28, 0.2));
}

body[data-page="market"] .market-section-heading h2,
body[data-page="market"] .market-pick-body h3,
body[data-page="market"] .market-product-body h3 {
  margin: 0;
  color: var(--market-navy);
}

body[data-page="market"] .market-primary-button,
body[data-page="market"] .market-wide-link,
body[data-page="market"] .market-more-button {
  display: inline-flex;
  min-height: calc(var(--u) * 44);
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(219, 169, 91, 0.72);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(151, 237, 218, 0.92), rgba(255, 178, 207, 0.92));
  color: var(--market-navy);
  font-size: calc(var(--u) * 15);
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(122, 71, 55, 0.13);
}

body[data-page="market"] .market-section {
  padding: calc(var(--u) * 18);
}

body[data-page="market"] .market-category-section {
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
}

body[data-page="market"] .market-tabs {
  display: flex;
  gap: calc(var(--u) * 8);
  overflow-x: auto;
  padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 6);
  scrollbar-width: none;
}

body[data-page="market"] .market-tabs::-webkit-scrollbar {
  display: none;
}

body[data-page="market"] .market-tab {
  flex: 0 0 auto;
  min-width: calc(var(--u) * 64);
  min-height: calc(var(--u) * 42);
  border: 1px solid rgba(184, 144, 82, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #60422c;
  font-size: calc(var(--u) * 15);
  font-weight: 900;
  cursor: pointer;
}

body[data-page="market"] .market-tab.is-active {
  border-color: rgba(227, 180, 99, 0.82);
  background: linear-gradient(120deg, rgba(143, 231, 213, 0.68), rgba(255, 184, 207, 0.68));
  color: var(--market-navy);
  box-shadow: 0 8px 18px rgba(120, 76, 54, 0.13);
}

body[data-page="market"] .market-section-heading {
  display: flex;
  gap: calc(var(--u) * 12);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: calc(var(--u) * 14);
}

body[data-page="market"] .market-section-heading h2 {
  font-size: calc(var(--u) * 20);
  font-weight: 950;
  line-height: 1.12;
}

body[data-page="market"] .market-section-heading p {
  margin: calc(var(--u) * 6) 0 0;
  color: #62452f;
  font-size: calc(var(--u) * 15);
  font-weight: 720;
  line-height: 1.4;
}

body[data-page="market"] .market-count {
  flex: 0 0 auto;
  padding: calc(var(--u) * 7) calc(var(--u) * 10);
  border: 1px solid rgba(227, 180, 99, 0.48);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #9c6c29;
  font-size: calc(var(--u) * 13);
  font-weight: 900;
}

body[data-page="market"] .market-section-badge {
  flex: 0 0 auto;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * 11);
  border: 1px solid rgba(227, 180, 99, 0.5);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.76);
  color: #9c6c29;
  font-size: calc(var(--u) * 13);
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

body[data-page="market"] .market-pick-card {
  display: grid;
  grid-template-columns: minmax(124px, 42%) 1fr;
  gap: calc(var(--u) * 14);
  align-items: stretch;
  overflow: hidden;
  padding: calc(var(--u) * 12);
  border: 1px solid rgba(227, 180, 99, 0.5);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(248, 255, 252, 0.66));
}

body[data-page="market"] .market-pick-image {
  display: grid;
  place-items: center;
  min-height: calc(var(--u) * 154);
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.92), rgba(255, 238, 247, 0.5)),
    linear-gradient(135deg, rgba(143, 231, 213, 0.22), rgba(255, 184, 207, 0.2));
}

body[data-page="market"] .market-pick-thumb {
  width: 88%;
  max-height: calc(var(--u) * 142);
  object-fit: contain;
}

body[data-page="market"] .market-pick-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

body[data-page="market"] .market-badge,
body[data-page="market"] .market-element-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

body[data-page="market"] .market-badge {
  min-height: 28px;
  padding: 0 calc(var(--u) * 10);
  border: 1px solid rgba(227, 180, 99, 0.62);
  background: rgba(255, 247, 231, 0.9);
  color: #9c6c29;
  font-size: calc(var(--u) * 13);
}

body[data-page="market"] .market-element-tag {
  min-height: 30px;
  margin-top: calc(var(--u) * 8);
  padding: 0 calc(var(--u) * 11);
  border: 1px solid rgba(255, 255, 255, 0.66);
  color: #173047;
  font-size: calc(var(--u) * 13);
}

body[data-page="market"] .market-element-wood {
  background: #dff8e9;
}

body[data-page="market"] .market-element-fire {
  background: #ffe1e7;
}

body[data-page="market"] .market-element-earth {
  background: #fff0c9;
}

body[data-page="market"] .market-element-metal {
  background: #edf2fb;
}

body[data-page="market"] .market-element-water {
  background: #dff4ff;
}

body[data-page="market"] .market-pick-body h3 {
  margin-top: calc(var(--u) * 10);
  font-size: calc(var(--u) * 18.33);
  font-weight: 950;
  line-height: 1.18;
}

body[data-page="market"] .market-pick-body p {
  margin: calc(var(--u) * 7) 0 calc(var(--u) * 10);
  color: #62452f;
  font-size: calc(var(--u) * 15);
  font-weight: 720;
  line-height: 1.38;
}

body[data-page="market"] .market-pick-body strong,
body[data-page="market"] .market-product-body strong {
  color: #1b2449;
  font-size: calc(var(--u) * 16);
  font-weight: 950;
  line-height: 1;
}

body[data-page="market"] .market-primary-button {
  width: 100%;
  margin-top: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 12);
}

/* MARKET image-card edge cleanup - 2026-07-18 */
body[data-page="market"] .market-ohaeng-check-cta,
body[data-page="market"] .market-ohaeng-check-cta:hover {
  display: block;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  clip-path: inset(1px round 999px);
}

body[data-page="market"] .market-ohaeng-check-art {
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  max-height: none;
}

/* MARKET Jjuru PICK image-backed showcase - 2026-07-17 */
body[data-page="market"] .market-pick-section {
  overflow: hidden;
  border-radius: clamp(calc(var(--u) * 18), 4.7cqw, calc(var(--u) * 28));
  filter: none;
  clip-path: inset(1px round clamp(calc(var(--u) * 18), 4.7cqw, calc(var(--u) * 28)));
  container-type: inline-size;
}

body[data-page="market"] .market-pick-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1664 / 940;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
}

body[data-page="market"] .market-pick-card-art {
  position: absolute;
  inset: -0.8%;
  z-index: 0;
  display: block;
  width: 101.6%;
  height: 101.6%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

body[data-page="market"] .market-pick-heading {
  position: absolute;
  z-index: 2;
  top: 8.15%;
  left: 10.4%;
  width: 60.4%;
  text-align: left;
}

body[data-page="market"] .market-pick-heading h2 {
  margin: 0;
  color: var(--market-navy);
}

body[data-page="market"] .market-pick-heading h2 {
  display: flex;
  gap: 2.2cqw;
  align-items: baseline;
  overflow: hidden;
  font-size: clamp(calc(var(--u) * 14), 2.8cqw, calc(var(--u) * 17));
  font-weight: 900;
  line-height: 1.12;
  white-space: nowrap;
}

body[data-page="market"] .market-pick-heading h2 span:first-child {
  flex: 0 0 auto;
  color: #b47a27;
  font-weight: 950;
  letter-spacing: 0.03em;
}

body[data-page="market"] .market-pick-heading h2 span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="market"] .market-pick-image {
  position: absolute;
  z-index: 2;
  top: 25.9%;
  left: 6.95%;
  display: grid;
  width: 37.25%;
  aspect-ratio: 1;
  min-height: 0;
  place-items: center;
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-radius: 3.35cqw;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="market"] .market-pick-image::before {
  content: "";
  position: absolute;
  inset: -0.65cqw;
  z-index: -1;
  border-radius: 4.05cqw;
  background: rgba(255, 253, 247, 0.97);
  pointer-events: none;
}

body[data-page="market"] .market-pick-thumb {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: inherit;
}

body[data-page="market"] .market-pick-body {
  position: absolute;
  z-index: 2;
  top: 25.5%;
  left: 47.2%;
  display: flex;
  width: 43%;
  height: 64%;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  flex-direction: column;
}

body[data-page="market"] .market-pick-option-label {
  display: inline-flex;
  min-height: 5.4cqw;
  align-items: center;
  padding: 0 2.1cqw;
  border: 1px solid rgba(218, 164, 70, 0.54);
  border-radius: 999px;
  background: rgba(255, 250, 239, 0.88);
  color: #9c6c29;
  font-size: clamp(calc(var(--u) * 14), 2.15cqw, calc(var(--u) * 14));
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

body[data-page="market"] .market-pick-body h3 {
  margin: 2.1cqw 0 0;
  font-size: clamp(calc(var(--u) * 15), 3.65cqw, calc(var(--u) * 22));
  line-height: 1.14;
}

body[data-page="market"] .market-pick-body p {
  margin: 1.2cqw 0 1.1cqw;
  font-size: clamp(calc(var(--u) * 14), 2.25cqw, calc(var(--u) * 14));
  font-weight: 720;
  line-height: 1.32;
}

body[data-page="market"] .market-pick-elements {
  display: flex;
  gap: 0.7cqw;
  align-items: center;
  margin-bottom: 0;
}

body[data-page="market"] .market-pick-elements img {
  display: block;
  width: clamp(calc(var(--u) * 25), 6.2cqw, calc(var(--u) * 38));
  height: clamp(calc(var(--u) * 25), 6.2cqw, calc(var(--u) * 38));
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(122, 82, 26, 0.18));
}

body[data-page="market"] .market-pick-body .market-primary-button {
  width: min(100%, 31cqw);
  min-height: clamp(calc(var(--u) * 31), 7.8cqw, calc(var(--u) * 46));
  margin-top: 2.4cqw;
  padding: 0 2cqw;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  font-size: clamp(calc(var(--u) * 15), 2.8cqw, calc(var(--u) * 17));
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

body[data-page="market"] .market-pick-body .market-primary-button:focus-visible {
  outline: 2px solid rgba(7, 23, 58, 0.42);
  outline-offset: 2px;
}

/* MARKET Ohaeng main product card - 2026-07-18 */
body[data-page="market"] .market-ohaeng-main {
  position: relative;
  width: 100%;
  aspect-ratio: 1008 / 1560;
  overflow: hidden;
  border-radius: clamp(calc(var(--u) * 18), 4.7cqw, calc(var(--u) * 28));
  container-type: inline-size;
  clip-path: inset(1px round clamp(calc(var(--u) * 18), 4.7cqw, calc(var(--u) * 28)));
}

body[data-page="market"] .market-ohaeng-main-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}

body[data-page="market"] .market-ohaeng-main-heading {
  position: absolute;
  top: 3.7%;
  left: 11.8%;
  z-index: 2;
  display: flex;
  width: 76.4%;
  height: 10.5%;
  align-items: flex-start;
  justify-content: flex-start;
}

body[data-page="market"] .market-ohaeng-main-heading p,
body[data-page="market"] .market-ohaeng-main-heading h2 {
  margin: 0;
}

body[data-page="market"] .market-ohaeng-main-heading p {
  color: #b07a2c;
  font-size: clamp(calc(var(--u) * 14), 2.45cqw, calc(var(--u) * 15));
  font-weight: 950;
  letter-spacing: 0.08em;
}

body[data-page="market"] .market-ohaeng-main-heading h2 {
  margin-top: 0.7cqw;
  color: var(--market-navy);
  font-size: clamp(calc(var(--u) * 20), 4.45cqw, calc(var(--u) * 27));
  font-weight: 950;
  line-height: 1.14;
  white-space: nowrap;
}

body[data-page="market"] .market-ohaeng-personal {
  position: absolute;
  top: 10.4cqw;
  left: 0;
  max-width: none;
  color: #755739;
  font-size: clamp(calc(var(--u) * 15), 2.45cqw, calc(var(--u) * 15));
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
}

body[data-page="market"] .market-search-box {
  position: absolute;
  top: 17.1%;
  left: 11.9%;
  z-index: 2;
  display: flex;
  width: 76.3%;
  height: 4.55%;
  align-items: center;
  gap: 2cqw;
  padding: 0 4cqw;
  color: #a97835;
}

body[data-page="market"] .market-search-box > span {
  font-size: clamp(calc(var(--u) * 20), 5.2cqw, calc(var(--u) * 31));
  line-height: 1;
  transform: translateY(-4%);
}

body[data-page="market"] .market-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--market-navy);
  font: inherit;
  font-size: clamp(calc(var(--u) * 15), 3.05cqw, calc(var(--u) * 18));
  font-weight: 750;
}

body[data-page="market"] .market-search-box input::placeholder {
  color: #947d68;
  opacity: 0.82;
}

body[data-page="market"] .market-element-tabs {
  position: absolute;
  top: 22.65%;
  left: 11.9%;
  z-index: 2;
  display: grid;
  width: 76.3%;
  height: 4.5%;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 1cqw;
  padding: 0;
}

body[data-page="market"] .market-element-tabs button {
  display: inline-flex;
  min-width: 0;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  border: 1px solid rgba(211, 153, 60, 0.45);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.82);
  color: #75604d;
  font-size: clamp(calc(var(--u) * 15), 2.55cqw, calc(var(--u) * 15));
  font-weight: 900;
  cursor: pointer;
}

body[data-page="market"] .market-element-tabs button img {
  width: clamp(calc(var(--u) * 17), 4.8cqw, calc(var(--u) * 29));
  height: clamp(calc(var(--u) * 22), 4.8cqw, calc(var(--u) * 29));
  object-fit: contain;
}

body[data-page="market"] .market-element-tabs button.is-active {
  background: rgba(232, 248, 238, 0.96);
  color: var(--market-navy);
  box-shadow: inset 0 0 0 1px rgba(205, 146, 48, 0.48), 0 2px 6px rgba(101, 70, 31, 0.1);
}

body[data-page="market"] .market-product-toolbar {
  position: absolute;
  top: 27.65%;
  left: 12.2%;
  z-index: 3;
  display: grid;
  width: 75.6%;
  height: 4.3%;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5cqw;
}

body[data-page="market"] .market-quick-filters {
  display: flex;
  gap: 1cqw;
}

body[data-page="market"] .market-quick-filters button,
body[data-page="market"] .market-filter-toggle,
body[data-page="market"] .market-result-meta button {
  border: 0;
  background: transparent;
  color: #806348;
  font-size: clamp(calc(var(--u) * 15), 2.45cqw, calc(var(--u) * 15));
  font-weight: 900;
  cursor: pointer;
}

body[data-page="market"] .market-quick-filters button {
  min-height: 7cqw;
  padding: 0 2.2cqw;
  border: 1px solid rgba(211, 153, 60, 0.42);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.86);
}

body[data-page="market"] .market-quick-filters button.is-active {
  border-color: rgba(219, 148, 173, 0.78);
  background: linear-gradient(135deg, rgba(255, 220, 231, 0.98), rgba(255, 236, 242, 0.96));
  color: var(--market-navy);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58), 0 2px 7px rgba(164, 81, 113, 0.13);
}

body[data-page="market"] .market-result-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 1cqw;
  color: #75604d;
  font-size: clamp(calc(var(--u) * 14), 2.2cqw, calc(var(--u) * 14));
  font-weight: 800;
  white-space: nowrap;
}

body[data-page="market"] .market-result-meta button {
  color: #b07a2c;
  text-decoration: underline;
}

body[data-page="market"] .market-filter-toggle {
  min-height: 7cqw;
  padding: 0 2.4cqw;
  border: 1px solid rgba(201, 143, 47, 0.5);
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.85);
}

body[data-page="market"] .market-filter-panel {
  position: absolute;
  top: 31.6%;
  right: 12.2%;
  z-index: 8;
  padding: 2.5cqw;
  border: 1px solid rgba(204, 145, 50, 0.5);
  border-radius: 3cqw;
  background: rgba(255, 252, 244, 0.97);
  box-shadow: 0 8px 20px rgba(57, 39, 24, 0.18);
}

body[data-page="market"] .market-filter-panel label {
  display: grid;
  gap: 1cqw;
  color: #604b39;
  font-size: clamp(calc(var(--u) * 14), 2.4cqw, calc(var(--u) * 14));
  font-weight: 900;
}

body[data-page="market"] .market-filter-panel select {
  min-height: 7cqw;
  border: 1px solid rgba(204, 145, 50, 0.42);
  border-radius: 1.8cqw;
  padding: 0 2cqw;
  background: #fff;
  color: var(--market-navy);
  font: inherit;
}

body[data-page="market"] .market-ohaeng-main .market-product-grid {
  position: absolute;
  top: 32.35%;
  left: 12.2%;
  z-index: 2;
  display: grid;
  width: 75.6%;
  height: 53.25%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 3.3% 4.4%;
}

body[data-page="market"] .market-main-product,
body[data-page="market"] .market-main-product > a {
  min-width: 0;
  min-height: 0;
  color: inherit;
  text-decoration: none;
}

body[data-page="market"] .market-main-product > a {
  display: grid;
  height: 100%;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgba(211, 153, 60, 0.5);
  border-radius: 3.2cqw;
  background: rgba(255, 253, 248, 0.84);
  box-shadow: 0 5px 12px rgba(102, 72, 38, 0.08);
}

body[data-page="market"] .market-main-product figure {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  margin: 0;
  overflow: hidden;
  width: calc(100% - 5.6cqw);
  aspect-ratio: 1 / 1;
  place-self: start center;
  margin-top: 1.2cqw;
  border-radius: 2.5cqw;
  background: linear-gradient(145deg, rgba(226, 250, 242, 0.78), rgba(255, 235, 244, 0.72));
}

body[data-page="market"] .market-main-product-image {
  width: 96%;
  height: 96%;
  object-fit: contain;
}

body[data-page="market"] .market-main-product .market-badge {
  position: absolute;
  top: 2cqw;
  left: 2cqw;
  z-index: 1;
  font-size: clamp(calc(var(--u) * 13), 1.9cqw, calc(var(--u) * 13));
}

body[data-page="market"] .market-main-product-info {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0.55cqw 2.2cqw;
  color: var(--market-navy);
}

body[data-page="market"] .market-main-product-icons {
  position: absolute;
  top: -4.3cqw;
  left: 2.2cqw;
  z-index: 2;
  display: flex;
  gap: 0.3cqw;
  min-height: 3.6cqw;
  align-items: center;
  padding: 0.25cqw 0.5cqw;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.9);
}

body[data-page="market"] .market-main-product-icons img {
  width: clamp(calc(var(--u) * 18), 3.8cqw, calc(var(--u) * 23));
  height: clamp(calc(var(--u) * 18), 3.8cqw, calc(var(--u) * 23));
  object-fit: contain;
}

body[data-page="market"] .market-main-product-info h3 {
  display: block;
  margin: 0;
  overflow: hidden;
  font-size: clamp(calc(var(--u) * 15), 2.75cqw, calc(var(--u) * 17));
  font-weight: 950;
  line-height: 1.2;
  min-height: 1.2em;
  flex-shrink: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="market"] .market-main-product-info h3 span {
  color: #b07a2c;
}

body[data-page="market"] .market-main-product-info strong {
  margin-top: 0.2cqw;
  font-size: clamp(calc(var(--u) * 15), 2.7cqw, calc(var(--u) * 16));
  font-weight: 950;
  flex-shrink: 0;
}

body[data-page="market"] .market-main-product-info small {
  display: none;
}

body[data-page="market"] .market-product-empty {
  position: absolute;
  top: 56%;
  left: 15%;
  z-index: 2;
  width: 70%;
  margin: 0;
  color: #6f5c49;
  font-size: clamp(calc(var(--u) * 15), 3cqw, calc(var(--u) * 18));
  font-weight: 850;
  line-height: 1.5;
  text-align: center;
}

body[data-page="market"] .market-product-pagination {
  position: absolute;
  top: 86.55%;
  left: 32.5%;
  z-index: 2;
  display: grid;
  width: 35%;
  height: 3.8%;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
}

body[data-page="market"] .market-product-pagination button {
  width: 7cqw;
  height: 7cqw;
  border: 0;
  border-radius: 50%;
  border: 1px solid rgba(211, 153, 60, 0.42);
  background: rgba(255, 252, 244, 0.92);
  color: #a87329;
  font-size: clamp(calc(var(--u) * 19), 5cqw, calc(var(--u) * 30));
  line-height: 1;
  cursor: pointer;
}

body[data-page="market"] .market-product-pagination button:disabled {
  opacity: 0.28;
  cursor: default;
}

body[data-page="market"] #marketPageDots {
  display: flex;
  gap: 1.2cqw;
}

body[data-page="market"] #marketCatPageDots {
  display: flex;
  gap: 1.2cqw;
}

body[data-page="market"] #marketPageDots span,
body[data-page="market"] #marketCatPageDots span {
  width: 1.7cqw;
  height: 1.7cqw;
  border-radius: 50%;
  background: rgba(176, 122, 44, 0.28);
}

body[data-page="market"] #marketPageDots span.is-active,
body[data-page="market"] #marketCatPageDots span.is-active {
  width: 4.4cqw;
  border-radius: 999px;
  background: #b07a2c;
}

body[data-page="market"] .market-all-products-link {
  position: absolute;
  top: 91.05%;
  bottom: auto;
  left: 18.1%;
  z-index: 2;
  display: inline-flex;
  width: 63.8%;
  height: 5.8%;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  border-radius: 999px;
  background: transparent;
  color: var(--market-navy);
  font-size: clamp(calc(var(--u) * 15), 3cqw, calc(var(--u) * 18));
  font-weight: 900;
  text-decoration: none;
  line-height: 1;
  box-shadow: none;
}

/* MARKET Ohaeng tall code canvas - 2026-07-19 */
body[data-page="market"] .market-ohaeng-main {
  aspect-ratio: 914 / 1721;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

body[data-page="market"] .market-ohaeng-main-heading {
  top: 4.15%;
  left: 11.5%;
  width: 77%;
  height: 7.3%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body[data-page="market"] .market-ohaeng-main-heading p {
  color: #a66f28;
  font-size: clamp(calc(var(--u) * 17), 4cqw, calc(var(--u) * 24));
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: 0.04em;
}

body[data-page="market"] .market-ohaeng-main-heading p em {
  display: inline-flex;
  margin-left: 1.5cqw;
  transform: translateY(-0.06em);
  color: #c99136;
  font-size: max(12px, 0.58em);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

body[data-page="market"] .market-ohaeng-main-heading h2 {
  margin-top: 1.15cqw;
  font-size: clamp(calc(var(--u) * 24), 5.25cqw, calc(var(--u) * 32));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

body[data-page="market"] .market-search-box {
  top: 13.25%;
  left: 11.9%;
  width: 76.2%;
  height: 4.2%;
  gap: 0;
  padding: 0 4.4cqw 0 12.2cqw;
  border: 1px solid rgba(190, 130, 42, 0.55);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.28);
}

body[data-page="market"] .market-search-box:focus-within {
  border-color: rgba(190, 130, 42, 0.55);
  box-shadow: none;
}

body[data-page="market"] .market-search-box::before {
  content: "";
  position: absolute;
  left: 4.2cqw;
  top: 50%;
  width: 3.4cqw;
  height: 3.4cqw;
  border: max(1px, 0.45cqw) solid #b98237;
  border-radius: 50%;
  transform: translateY(-58%);
}

body[data-page="market"] .market-search-box::after {
  content: "";
  position: absolute;
  left: 7.25cqw;
  top: 57%;
  width: 2.2cqw;
  height: max(1px, 0.45cqw);
  border-radius: 999px;
  background: #b98237;
  transform: rotate(45deg);
  transform-origin: left center;
}

body[data-page="market"] .market-search-box input {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-size: clamp(calc(var(--u) * 15), 3.05cqw, calc(var(--u) * 18));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="market"] .market-search-box input:focus,
body[data-page="market"] .market-search-box input:focus-visible {
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="market"] .market-search-box input::-webkit-search-decoration,
body[data-page="market"] .market-search-box input::-webkit-search-cancel-button,
body[data-page="market"] .market-search-box input::-webkit-search-results-button,
body[data-page="market"] .market-search-box input::-webkit-search-results-decoration {
  display: none;
}

body[data-page="market"] .market-element-tabs {
  top: 18.2%;
  left: 11.9%;
  width: 76.2%;
  height: 4.35%;
  gap: 0.9cqw;
}

body[data-page="market"] .market-element-tabs button {
  gap: 0.45cqw;
  border-color: rgba(204, 145, 50, 0.42);
  background: rgba(255, 253, 248, 0.76);
  font-size: clamp(calc(var(--u) * 14), 2.5cqw, calc(var(--u) * 15));
  font-weight: 550;
}

body[data-page="market"] .market-element-tabs button img {
  width: clamp(calc(var(--u) * 21), 4.7cqw, calc(var(--u) * 28));
  height: clamp(calc(var(--u) * 21), 4.7cqw, calc(var(--u) * 28));
}

body[data-page="market"] .market-element-tabs button.is-active {
  font-weight: 650;
}

body[data-page="market"] .market-cat-shop-main {
  margin-top: clamp(calc(var(--u) * 18), 4.6cqw, calc(var(--u) * 30));
}

body[data-page="market"] .market-cat-shop-main .market-ohaeng-main-heading h2 {
  font-size: clamp(calc(var(--u) * 22), 4.72cqw, calc(var(--u) * 30));
  letter-spacing: -0.04em;
}

body[data-page="market"] .market-cat-category-tabs {
  grid-template-columns: 14.8% repeat(3, minmax(0, 1fr));
  gap: 0.55cqw;
}

body[data-page="market"] .market-cat-category-tabs button {
  gap: 0.45cqw;
  padding: 0 0.45cqw;
  font-size: clamp(calc(var(--u) * 14), 1.95cqw, calc(var(--u) * 14));
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

body[data-page="market"] .market-cat-category-tabs [data-market-cat-category="all"] {
  font-size: clamp(calc(var(--u) * 14), 2.5cqw, calc(var(--u) * 15));
  letter-spacing: 0;
}

body[data-page="market"] .market-cat-category-tabs button img {
  width: clamp(calc(var(--u) * 22), 5cqw, calc(var(--u) * 30));
  height: clamp(calc(var(--u) * 22), 5cqw, calc(var(--u) * 30));
  flex: 0 0 auto;
}

body[data-page="market"] .market-product-toolbar {
  top: 23.2%;
  left: 11.9%;
  width: 76.2%;
  height: 4.15%;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: stretch;
  gap: clamp(calc(var(--u) * 8), 1.8cqw, calc(var(--u) * 11));
}

body[data-page="market"] .market-quick-filters {
  width: max-content;
  justify-content: flex-start;
  gap: clamp(calc(var(--u) * 7), 1.35cqw, calc(var(--u) * 9));
  min-width: 0;
}

body[data-page="market"] .market-quick-filters button,
body[data-page="market"] .market-filter-toggle,
body[data-page="market"] .market-result-meta button {
  font-size: clamp(calc(var(--u) * 14), 2.3cqw, calc(var(--u) * 14));
  font-weight: 600;
  line-height: 1;
}

body[data-page="market"] .market-quick-filters button,
body[data-page="market"] .market-filter-toggle {
  min-height: 7.2cqw;
  padding: 0 clamp(calc(var(--u) * 8), 1.75cqw, calc(var(--u) * 11));
  white-space: nowrap;
}

body[data-page="market"] .market-quick-filters [data-market-sort="recommended"],
body[data-page="market"] .market-quick-filters [data-market-cat-sort="recommended"] {
  min-width: clamp(calc(var(--u) * 72), 17.4cqw, calc(var(--u) * 94));
}

body[data-page="market"] .market-quick-filters [data-market-sort="best"],
body[data-page="market"] .market-quick-filters [data-market-sort="new"],
body[data-page="market"] .market-quick-filters [data-market-cat-sort="best"],
body[data-page="market"] .market-quick-filters [data-market-cat-sort="new"] {
  min-width: clamp(calc(var(--u) * 52), 10.7cqw, calc(var(--u) * 60));
}

body[data-page="market"] .market-type-filter {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 7.2cqw;
  align-items: center;
  justify-content: flex-start;
}

body[data-page="market"] .market-type-filter select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(201, 143, 47, 0.52);
  border-radius: 999px;
  padding: 0 6.1cqw 0 2.4cqw;
  background: rgba(255, 252, 244, 0.86);
  color: #806348;
  font: inherit;
  font-size: clamp(calc(var(--u) * 14), 2.35cqw, calc(var(--u) * 14));
  font-weight: 600;
  line-height: 1;
}

body[data-page="market"] .market-type-filter::after {
  content: "";
  position: absolute;
  top: 48%;
  right: clamp(calc(var(--u) * 12), 3cqw, calc(var(--u) * 17));
  width: clamp(calc(var(--u) * 6), 1.35cqw, calc(var(--u) * 8));
  height: clamp(calc(var(--u) * 6), 1.35cqw, calc(var(--u) * 8));
  border-right: 1.6px solid #a87329;
  border-bottom: 1.6px solid #a87329;
  pointer-events: none;
  transform: translateY(-60%) rotate(45deg);
}

body[data-page="market"] .market-result-meta {
  gap: 0.6cqw;
  justify-content: center;
  min-height: 6.8cqw;
  font-size: clamp(calc(var(--u) * 14), 1.85cqw, calc(var(--u) * 14));
  font-weight: 500;
  line-height: 1;
}

body[data-page="market"] .market-result-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="market"] .market-result-meta button {
  flex: 0 0 auto;
  padding: 0;
}

body[data-page="market"] .market-filter-toggle {
  padding: 0 1.65cqw;
}

body[data-page="market"] .market-filter-panel {
  top: 27.6%;
}

body[data-page="market"] .market-filter-panel label {
  font-weight: 600;
}

body[data-page="market"] .market-ohaeng-main .market-product-grid {
  top: 28.8%;
  left: 12.05%;
  width: 75.9%;
  height: 52.85%;
  gap: 3.05% 4%;
}

body[data-page="market"] .market-main-product > a {
  display: flex;
  flex-direction: column;
  border-color: rgba(204, 145, 50, 0.5);
  border-radius: 3.2cqw;
  background: rgba(255, 250, 241, 0.92);
}

body[data-page="market"] .market-main-product figure {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  place-self: start stretch;
  margin: 0;
  border-radius: 3cqw 3cqw 0 0;
}

body[data-page="market"] .market-main-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="market"] .market-main-product .market-badge {
  top: 2.2cqw;
  left: 2.2cqw;
  padding: 0.8cqw 1.7cqw;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.92);
  font-size: clamp(calc(var(--u) * 14), 2.15cqw, calc(var(--u) * 14));
  font-weight: 650;
  line-height: 1;
}

body[data-page="market"] .market-main-product-info {
  flex: 1 1 auto;
  justify-content: center;
  gap: 0.6cqw;
  padding: 2.2cqw 2.6cqw 1.8cqw;
}

body[data-page="market"] .market-main-product-icons {
  top: -6.3cqw;
  left: 2.2cqw;
  gap: 0.45cqw;
  min-height: 5.2cqw;
  padding: 0;
  background: transparent;
}

body[data-page="market"] .market-main-product-icons img {
  width: clamp(calc(var(--u) * 20), 4.5cqw, calc(var(--u) * 27));
  height: clamp(calc(var(--u) * 20), 4.5cqw, calc(var(--u) * 27));
  filter: drop-shadow(0 1px 2px rgba(110, 74, 30, 0.18));
}

body[data-page="market"] .market-cat-main-product .market-main-product-icons img {
  width: clamp(calc(var(--u) * 24), 5.1cqw, calc(var(--u) * 31));
  height: clamp(calc(var(--u) * 24), 5.1cqw, calc(var(--u) * 31));
}

body[data-page="market"] .market-main-product-info h3 {
  font-size: clamp(calc(var(--u) * 15), 3cqw, calc(var(--u) * 18));
  color: rgba(16, 35, 70, 0.82);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-align: left;
}

body[data-page="market"] .market-main-product-info h3 span {
  font-weight: 500;
}

body[data-page="market"] .market-main-product-info strong {
  width: 100%;
  margin-top: 0;
  font-size: clamp(calc(var(--u) * 15), 3cqw, calc(var(--u) * 18));
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

body[data-page="market"] .market-result-meta {
  margin-left: 0;
}

body[data-page="market"] .market-product-pagination {
  top: 84.15%;
  left: 31.5%;
  width: 37%;
  height: 4.7%;
}

body[data-page="market"] .market-product-pagination button {
  width: 8.4cqw;
  height: 8.4cqw;
  font-size: clamp(calc(var(--u) * 21), 5.2cqw, calc(var(--u) * 31));
}

body[data-page="market"] #marketPageDots {
  gap: 1.35cqw;
}

body[data-page="market"] #marketCatPageDots {
  gap: 1.35cqw;
}

body[data-page="market"] #marketPageDots span,
body[data-page="market"] #marketCatPageDots span {
  width: 1.9cqw;
  height: 1.9cqw;
}

body[data-page="market"] #marketPageDots span.is-active,
body[data-page="market"] #marketCatPageDots span.is-active {
  width: 4.8cqw;
}

body[data-page="market"] .market-all-products-link {
  top: 91.05%;
  left: 21.45%;
  width: 57.1%;
  height: 5.6%;
  gap: 1.2cqw;
  font-size: clamp(calc(var(--u) * 15), 3.15cqw, calc(var(--u) * 19));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  padding-bottom: 1.1cqw;
}

body[data-page="market"] .market-best-row,
body[data-page="market"] .market-supply-row {
  display: flex;
  gap: calc(var(--u) * 12);
  overflow-x: auto;
  padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 8);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

body[data-page="market"] .market-best-row::-webkit-scrollbar,
body[data-page="market"] .market-supply-row::-webkit-scrollbar {
  display: none;
}

body[data-page="market"] .market-best-card,
body[data-page="market"] .market-product-card,
body[data-page="market"] .market-supply-card {
  min-width: 0;
  border: 1px solid rgba(227, 180, 99, 0.42);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 20px rgba(70, 45, 30, 0.08);
}

body[data-page="market"] .market-best-card {
  flex: 0 0 44%;
  scroll-snap-align: start;
}

body[data-page="market"] .market-product-card {
  display: flex;
  flex-direction: column;
}

body[data-page="market"] .market-card-link {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

body[data-page="market"] .market-product-figure {
  position: relative;
  display: grid;
  aspect-ratio: 1 / 0.82;
  place-items: center;
  margin: 0;
  overflow: hidden;
  border-radius: 17px 17px 12px 12px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.92), rgba(255, 236, 246, 0.42)),
    linear-gradient(135deg, rgba(143, 231, 213, 0.22), rgba(255, 184, 207, 0.2));
}

body[data-page="market"] .market-product-figure .market-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

body[data-page="market"] .market-product-figure img {
  width: 74%;
  height: 74%;
  object-fit: contain;
}

body[data-page="market"] .market-product-body {
  display: grid;
  gap: calc(var(--u) * 7);
  padding: calc(var(--u) * 12);
}

body[data-page="market"] .market-product-body .market-element-tag {
  justify-self: start;
  margin-top: 0;
}

body[data-page="market"] .market-product-body h3 {
  display: -webkit-box;
  min-height: 2.4em;
  overflow: hidden;
  font-size: calc(var(--u) * 15);
  font-weight: 900;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="market"] .market-product-body p {
  margin: 0;
  color: #62452f;
  font-size: calc(var(--u) * 13);
  font-weight: 700;
  line-height: 1.35;
}

body[data-page="market"] .market-store-button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  margin: auto 12px 12px;
  border-radius: 999px;
  background: #07173a;
  color: #fff8e8;
  font-size: calc(var(--u) * 15);
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

body[data-page="market"] .market-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 12);
}

body[data-page="market"] .market-more-button {
  width: min(72%, 260px);
  margin: 16px auto 0;
}

body[data-page="market"] .market-more-button[hidden] {
  display: none;
}

body[data-page="market"] .market-supply-card {
  display: grid;
  flex: 0 0 42%;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 12);
  color: inherit;
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
}

body[data-page="market"] .market-supply-card figure {
  display: grid;
  aspect-ratio: 1 / 0.72;
  place-items: center;
  margin: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(143, 231, 213, 0.26), rgba(255, 184, 207, 0.22));
}

body[data-page="market"] .market-supply-card img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

body[data-page="market"] .market-supply-card strong {
  color: var(--market-navy);
  font-size: calc(var(--u) * 16);
  font-weight: 950;
}

body[data-page="market"] .market-supply-card span {
  color: #62452f;
  font-size: calc(var(--u) * 13);
  font-weight: 700;
  line-height: 1.35;
}

body[data-page="market"] .market-wide-link {
  width: 100%;
  margin-top: calc(var(--u) * 12);
}

body[data-page="market"] .market-cat-supplies {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 255, 252, 0.72)),
    linear-gradient(180deg, rgba(255, 245, 226, 0.68), rgba(255, 235, 245, 0.45));
}

body[data-page="market"] .market-cat-supplies .market-section-heading {
  align-items: center;
  margin-bottom: calc(var(--u) * 12);
}

body[data-page="market"] .market-cat-supplies .market-supply-row {
  display: flex;
  gap: calc(var(--u) * 10);
  overflow-x: auto;
  padding: calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * 7);
  scroll-snap-type: x mandatory;
}

body[data-page="market"] .market-cat-supplies .market-supply-card {
  flex: 0 0 42%;
  min-width: 0;
  gap: calc(var(--u) * 7);
  padding: calc(var(--u) * 10);
  border-color: rgba(227, 180, 99, 0.48);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.82);
  text-align: left;
  scroll-snap-align: start;
  box-shadow: 0 7px 16px rgba(70, 45, 30, 0.07);
}

body[data-page="market"] .market-cat-supplies .market-supply-card figure {
  position: relative;
  aspect-ratio: 1 / 0.86;
  overflow: hidden;
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(226, 250, 242, 0.8), rgba(255, 235, 244, 0.74)),
    rgba(255, 255, 255, 0.66);
}

body[data-page="market"] .market-supply-chip {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  display: inline-flex;
  min-height: 21px;
  align-items: center;
  padding: 0 calc(var(--u) * 8);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.92);
  color: #a76c2b;
  font-size: calc(var(--u) * 13);
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(82, 53, 31, 0.08);
}

body[data-page="market"] .market-cat-supplies .market-supply-card img {
  width: 78%;
  height: 78%;
}

body[data-page="market"] .market-cat-supplies .market-supply-card strong {
  overflow: hidden;
  font-size: calc(var(--u) * 15);
  font-weight: 850;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="market"] .market-cat-supplies .market-supply-card span:not(.market-supply-chip) {
  min-height: 2.6em;
  font-size: calc(var(--u) * 14);
  font-weight: 650;
}

body[data-page="market"] .market-payback-guide {
  position: relative;
  width: 100%;
  aspect-ratio: 1203 / 1307;
  margin-bottom: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #fbf3e7 0%, #fff8f1 46%, #ffece4 100%);
  border-radius: clamp(calc(var(--u) * 18), 4.7cqw, calc(var(--u) * 28));
  color: var(--market-navy);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  filter: drop-shadow(0 12px 24px rgba(83, 54, 31, 0.1));
  clip-path: inset(2px round clamp(calc(var(--u) * 18), 4.7cqw, calc(var(--u) * 28)));
  container-type: inline-size;
}

body[data-page="market"] .market-payback-card-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

body[data-page="market"] .market-payback-guide-copy {
  position: absolute;
  z-index: 2;
  top: 11.55%;
  left: 22.9%;
  display: grid;
  width: 54.2%;
  height: 9.5%;
  place-items: center;
  align-content: center;
  row-gap: 0.7cqw;
  text-align: center;
}

body[data-page="market"] .market-payback-guide-copy p,
body[data-page="market"] .market-payback-guide-copy h2 {
  margin: 0;
}

body[data-page="market"] .market-payback-guide-copy p {
  color: #a56f2d;
  font-size: clamp(calc(var(--u) * 15), 2.9cqw, calc(var(--u) * 17));
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
}

body[data-page="market"] .market-payback-guide-copy h2 {
  display: grid;
  margin-top: 0;
  color: var(--market-navy);
  letter-spacing: -0.025em;
  font-size: clamp(calc(var(--u) * 18), 4.35cqw, calc(var(--u) * 26));
  font-weight: 880;
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 2px 6px rgba(44, 33, 61, 0.08);
  white-space: nowrap;
}

body[data-page="market"] .market-payback-guide-copy h2 span {
  position: relative;
  isolation: isolate;
}

body[data-page="market"] .market-payback-guide-copy h2 span::after {
  position: absolute;
  z-index: -1;
  right: -0.22em;
  bottom: -0.12em;
  left: -0.22em;
  height: 0.42em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(198, 236, 219, 0.46), rgba(255, 195, 211, 0.58));
  content: "";
}

body[data-page="market"] .market-payback-title-accent {
  color: #c58236;
  font-size: 0.82em;
}

body[data-page="market"] .market-payback-form {
  display: contents;
}

body[data-page="market"] .market-payback-promise {
  position: absolute;
  z-index: 2;
  top: 32.65%;
  left: 11.7%;
  display: grid;
  width: 76.6%;
  height: 16.55%;
  margin: 0;
  place-items: center;
  align-content: center;
  color: var(--market-navy);
  text-align: center;
  letter-spacing: 0;
  word-break: keep-all;
}

body[data-page="market"] .market-payback-promise > span,
body[data-page="market"] .market-payback-promise > strong,
body[data-page="market"] .market-payback-promise > small {
  display: block;
  margin: 0;
  max-width: 100%;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92);
}

body[data-page="market"] .market-payback-promise > span {
  color: #8f683e;
  font-size: clamp(calc(var(--u) * 17), 3.55cqw, calc(var(--u) * 21));
  font-weight: 780;
  line-height: 1.08;
}

body[data-page="market"] .market-payback-promise-lead {
  display: block;
  white-space: nowrap;
}

body[data-page="market"] .market-payback-promise-lead span {
  display: block;
  white-space: nowrap;
}

body[data-page="market"] .market-payback-promise > strong {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.18em 0.32em;
  align-items: center;
  justify-content: center;
  margin-top: 1.35cqw;
  color: var(--market-navy);
  font-size: clamp(calc(var(--u) * 23), 4.78cqw, calc(var(--u) * 28.5));
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

body[data-page="market"] .market-payback-catnip-emphasis {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  overflow: hidden;
  padding: 0.08em 0.32em 0.13em;
  border-radius: 999px;
  background: linear-gradient(105deg, rgba(207, 245, 229, 0.8), rgba(255, 207, 220, 0.84));
  box-shadow: inset 0 0 0 1px rgba(219, 151, 61, 0.18), 0 2px 6px rgba(133, 94, 52, 0.08);
  color: #0f2e5e;
}

body[data-page="market"] .market-payback-catnip-emphasis::after {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -32%;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.54), transparent);
  transform: skewX(-18deg);
  animation: marketPaybackLeafSweep 3.2s ease-in-out infinite;
  content: "";
  pointer-events: none;
}

body[data-page="market"] .market-payback-catnip-emphasis img {
  position: relative;
  z-index: 1;
  width: 1.14em;
  height: 1.14em;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(81, 108, 45, 0.18));
}

body[data-page="market"] .market-payback-catnip-emphasis img,
body[data-page="market"] .market-payback-catnip-emphasis {
  animation: marketPaybackCatnipLift 2.6s ease-in-out infinite;
}

body[data-page="market"] .market-payback-strong-tail {
  display: inline-block;
  white-space: nowrap;
}

body[data-page="market"] .market-payback-promise > small {
  margin-top: 1.55cqw;
  color: #8b6840;
  font-size: clamp(calc(var(--u) * 15), 3cqw, calc(var(--u) * 17.5));
  font-weight: 800;
  line-height: 1.1;
}

body[data-page="market"] .market-payback-order-field {
  position: absolute;
  z-index: 3;
  top: 52.15%;
  left: 12.25%;
  display: grid;
  width: 75.5%;
  height: 14.15%;
  margin: 0;
}

body[data-page="market"] .market-payback-order-field span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body[data-page="market"] .market-payback-order-field :is(input, textarea) {
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 1.5px solid rgba(214, 153, 65, 0.52);
  border-radius: 1.85cqw;
  outline: 0;
  padding: 3.55cqw 3cqw 1.35cqw;
  background: rgba(255, 253, 248, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 4px 10px rgba(112, 77, 43, 0.035);
  color: var(--market-navy);
  font: inherit;
  font-size: clamp(calc(var(--u) * 15), 3.05cqw, calc(var(--u) * 18));
  font-weight: 650;
  line-height: 1.28;
  text-align: center;
}

body[data-page="market"] .market-payback-order-field textarea {
  display: block;
  resize: none;
  overflow: hidden;
}

body[data-page="market"] .market-payback-order-field :is(input, textarea)::placeholder {
  color: #9a8065;
  opacity: 0.78;
}

body[data-page="market"] .market-payback-order-field :is(input, textarea):focus {
  border-color: rgba(216, 143, 78, 0.82);
  background: rgba(255, 254, 250, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(240, 194, 131, 0.2);
}

body[data-page="market"] .market-payback-guide.is-order-active .market-payback-order-field :is(input, textarea) {
  border-color: rgba(239, 150, 184, 0.78);
  background: rgba(255, 254, 250, 0.86);
}

body[data-page="market"] .market-payback-guide.is-order-filled .market-payback-cta {
  color: #0d3168;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 2px 8px rgba(33, 109, 91, 0.14);
}

body[data-page="market"] .market-payback-benefits {
  position: absolute;
  z-index: 2;
  top: 70.05%;
  left: 0;
  display: block;
  width: 100%;
  height: 7.55%;
}

body[data-page="market"] .market-payback-benefit {
  position: absolute;
  top: 0;
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  padding: 0;
  border: 0;
  border-radius: 2.1cqw;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}

body[data-page="market"] .market-payback-benefit::after {
  position: absolute;
  inset: 7% 5%;
  border-radius: 2.1cqw;
  background: linear-gradient(105deg, rgba(208, 246, 230, 0.16), rgba(255, 202, 216, 0.2));
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  content: "";
}

body[data-page="market"] .market-payback-benefit:hover::after,
body[data-page="market"] .market-payback-benefit:focus-visible::after {
  opacity: 1;
  transform: scale(1.02);
}

body[data-page="market"] .market-payback-benefit:nth-child(1) {
  left: 11.68%;
  width: 22.85%;
}

body[data-page="market"] .market-payback-benefit:nth-child(2) {
  left: 39.28%;
  width: 22.85%;
}

body[data-page="market"] .market-payback-benefit:nth-child(3) {
  left: 65.63%;
  width: 22.85%;
}

body[data-page="market"] .market-payback-benefits strong {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  transform: translateY(0.08em);
  color: #112856;
  font-size: clamp(calc(var(--u) * 15), 2.58cqw, calc(var(--u) * 16));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 5px rgba(77, 52, 31, 0.08);
  white-space: nowrap;
}

body[data-page="market"] .market-payback-benefit:hover strong,
body[data-page="market"] .market-payback-benefit:focus-visible strong {
  color: #a85c30;
}

body[data-page="market"] .market-payback-cta {
  position: absolute;
  z-index: 2;
  top: 80.05%;
  left: 25.35%;
  display: grid;
  width: 47.6%;
  height: 8.95%;
  align-items: center;
  justify-content: center;
  place-items: center;
  padding: 0 2cqw;
  transform: translateY(0);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--market-navy);
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(calc(var(--u) * 20), 4.25cqw, calc(var(--u) * 26));
  font-weight: 850;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
  white-space: nowrap;
  transition: color 160ms ease, text-shadow 160ms ease, transform 160ms ease;
}

body[data-page="market"] .market-payback-cta:hover {
  color: #0d3168;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 2px 7px rgba(36, 93, 104, 0.12);
  transform: translateY(-1px);
}

body[data-page="market"] .market-payback-cta:focus-visible {
  outline: 3px solid rgba(217, 143, 78, 0.82);
  outline-offset: 3px;
}

body[data-page="market"] .market-payback-note {
  position: absolute;
  z-index: 2;
  top: 91.65%;
  left: 17%;
  display: grid;
  width: 66%;
  min-height: 3.1%;
  margin: 0;
  place-items: center;
  align-content: center;
  color: #87633f;
  font-size: clamp(calc(var(--u) * 14), 2.02cqw, calc(var(--u) * 14));
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
}

body[data-page="market"] .market-payback-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  place-items: center;
  padding: calc(var(--u) * 19.5);
}

body[data-page="market"] .market-payback-modal[aria-hidden="false"] {
  display: grid;
}

body[data-page="market"] .market-payback-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 19, 39, 0.48);
  backdrop-filter: blur(3px);
}

body[data-page="market"] .market-payback-modal-panel {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 40px));
  margin: 0;
  border: 1.5px solid rgba(211, 145, 58, 0.56);
  border-radius: 20px;
  padding: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 20);
  background: linear-gradient(145deg, rgba(255, 253, 247, 0.98), rgba(255, 238, 230, 0.97));
  box-shadow: 0 20px 46px rgba(20, 16, 34, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  color: var(--market-navy);
  text-align: left;
}

body[data-page="market"] .market-payback-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 1px solid rgba(213, 150, 70, 0.42);
  border-radius: 999px;
  padding: calc(var(--u) * 6) calc(var(--u) * 10);
  background: rgba(255, 250, 240, 0.84);
  color: #8a633b;
  cursor: pointer;
  font-family: inherit;
  font-size: calc(var(--u) * 13);
  font-weight: 750;
  line-height: 1;
}

body[data-page="market"] .market-payback-modal-kicker,
body[data-page="market"] .market-payback-modal-panel h3,
body[data-page="market"] .market-payback-modal-panel p {
  margin: 0;
}

body[data-page="market"] .market-payback-modal-kicker {
  color: #b97832;
  font-size: calc(var(--u) * 13);
  font-weight: 850;
  line-height: 1.2;
}

body[data-page="market"] .market-payback-modal-panel h3 {
  margin-top: calc(var(--u) * 6);
  padding-right: calc(var(--u) * 54);
  color: var(--market-navy);
  font-size: calc(var(--u) * 23);
  font-weight: 880;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

body[data-page="market"] .market-payback-modal-panel p {
  margin-top: calc(var(--u) * 12);
  color: #624a35;
  font-size: calc(var(--u) * 15);
  font-weight: 650;
  line-height: 1.55;
  word-break: keep-all;
}

body[data-page="market"] .market-payback-modal-panel ul {
  display: grid;
  gap: calc(var(--u) * 8);
  margin: calc(var(--u) * 16) 0 0;
  padding: 0;
  list-style: none;
}

body[data-page="market"] .market-payback-modal-panel li {
  position: relative;
  padding-left: calc(var(--u) * 18);
  color: #4d3c2e;
  font-size: calc(var(--u) * 14);
  font-weight: 650;
  line-height: 1.42;
}

body[data-page="market"] .market-payback-modal-panel li::before {
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #bfe9d7, #ffc6d7);
  box-shadow: 0 0 0 1px rgba(200, 130, 54, 0.32);
  content: "";
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-station {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1.5px solid rgba(218, 156, 70, 0.54);
  border-radius: clamp(22px, 5.4cqw, 34px);
  background:
    radial-gradient(circle at 10% 0%, rgba(185, 243, 221, 0.34), transparent 32%),
    radial-gradient(circle at 88% 8%, rgba(255, 184, 207, 0.32), transparent 34%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.97), rgba(255, 242, 231, 0.94));
  box-shadow: 0 14px 34px rgba(83, 54, 31, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  color: var(--market-navy);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  container-type: inline-size;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-station::before,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-station::after {
  position: absolute;
  z-index: 0;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  opacity: 0.48;
  content: "";
  pointer-events: none;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-station::before {
  top: -18%;
  left: -16%;
  background: radial-gradient(circle, rgba(185, 243, 221, 0.52), transparent 68%);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-station::after {
  right: -18%;
  bottom: -20%;
  background: radial-gradient(circle, rgba(255, 184, 207, 0.5), transparent 68%);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(12px, 3.4cqw, 20px);
  padding: clamp(22px, 5.6cqw, 34px) clamp(16px, 4.6cqw, 28px) clamp(20px, 5.4cqw, 32px);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-heading {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-heading p,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-heading h2,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-heading span,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-note {
  margin: 0;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-heading p {
  color: #b1702f;
  font-size: clamp(15px, 2.8cqw, 15px);
  font-weight: 900;
  line-height: 1;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-heading h2 {
  position: relative;
  color: var(--market-navy);
  font-size: clamp(27px, 7.2cqw, 40px);
  font-weight: 950;
  line-height: 1.04;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 3px 10px rgba(41, 34, 60, 0.08);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-heading h2::after {
  position: absolute;
  z-index: -1;
  right: -0.28em;
  bottom: -0.08em;
  left: -0.28em;
  height: 0.42em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(188, 240, 218, 0.54), rgba(255, 191, 211, 0.62));
  content: "";
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-heading span {
  color: #73583e;
  font-size: clamp(15px, 3.1cqw, 17px);
  font-weight: 760;
  line-height: 1.28;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-balance-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: clamp(60px, 13.6cqw, 76px);
  border: 1px solid rgba(209, 148, 68, 0.4);
  border-radius: clamp(18px, 4.4cqw, 24px);
  padding: clamp(12px, 3.2cqw, 16px) clamp(14px, 3.8cqw, 20px);
  background:
    linear-gradient(110deg, rgba(213, 247, 232, 0.6), rgba(255, 214, 225, 0.58)),
    rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68), 0 10px 20px rgba(151, 91, 42, 0.08);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-balance-card span {
  color: #75583b;
  font-size: clamp(15px, 3.2cqw, 16px);
  font-weight: 850;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-balance-card strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #0e2d62;
  font-size: clamp(16px, 4cqw, 20px);
  font-weight: 900;
  line-height: 1;
}

/* 잔액 숫자.
   전에는 30~46px에 굵기 950이었다. Noto Sans KR의 950은 가장 굵은 단계라
   숫자가 뭉툭한 덩어리로 보였고, 라벨(13px)의 2.3배라 혼자 튀었다.
   - 크기를 한 단계 낮추고 굵기를 800으로 내려 숫자 획에 숨통을 틔웠다.
   - tabular-nums로 자릿수가 바뀌어도 폭이 흔들리지 않게 했다.
   - 앞에 캣닢 잎 아이콘을 붙였다. 맨 숫자는 화폐로 읽히지 않는다. */
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-balance-card em {
  font-style: normal;
  font-size: clamp(26px, 6.8cqw, 38px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-balance-icon {
  width: clamp(22px, 5.6cqw, 30px);
  height: auto;
  align-self: center;
  margin-right: 1px;
  filter: drop-shadow(0 2px 4px rgba(120, 82, 34, 0.24));
}

/* 단위 '개'는 숫자를 거들 뿐이다. 같은 무게로 서지 않게 한다. */
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-balance-card strong {
  font-weight: 800;
  opacity: 0.96;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-limited-area,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-regular-area {
  display: grid;
  gap: 9px;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-area-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-area-title span {
  color: #b1702f;
  font-size: clamp(15px, 2.9cqw, 15px);
  font-weight: 900;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-area-title strong {
  color: #705033;
  font-size: clamp(15px, 2.9cqw, 15px);
  font-weight: 780;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-limited-grid,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-regular-grid {
  display: grid;
  gap: clamp(9px, 2.4cqw, 13px);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-limited-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-regular-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack {
  position: relative;
  display: grid;
  gap: clamp(7px, 1.9cqw, 10px);
  align-content: start;
  min-width: 0;
  min-height: clamp(170px, 43cqw, 232px);
  border: 1.35px solid rgba(209, 148, 68, 0.42);
  border-radius: clamp(18px, 4.2cqw, 24px);
  padding: clamp(12px, 3.25cqw, 18px);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.86), rgba(255, 247, 238, 0.74)),
    radial-gradient(circle at 16% 10%, rgba(185, 243, 221, 0.34), transparent 45%),
    radial-gradient(circle at 90% 0%, rgba(255, 184, 207, 0.34), transparent 42%);
  box-shadow: 0 10px 20px rgba(134, 80, 34, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack.is-limited {
  min-height: clamp(196px, 48cqw, 268px);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack.is-ample {
  grid-column: 1 / -1;
  min-height: clamp(150px, 32cqw, 184px);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack.is-best {
  border-color: rgba(224, 160, 75, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 247, 218, 0.88), rgba(255, 213, 225, 0.74)),
    radial-gradient(circle at 10% 12%, rgba(194, 245, 226, 0.52), transparent 44%);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack.is-weekly {
  background:
    linear-gradient(145deg, rgba(225, 250, 238, 0.86), rgba(255, 239, 220, 0.82)),
    radial-gradient(circle at 86% 14%, rgba(255, 190, 209, 0.38), transparent 42%);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-top,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-meta div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-badge,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-limit {
  display: inline-grid;
  min-height: 24px;
  place-items: center;
  border-radius: 999px;
  padding: 0 9px;
  font-size: clamp(14px, 2.55cqw, 14px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-badge {
  background: linear-gradient(105deg, rgba(207, 245, 229, 0.86), rgba(255, 205, 219, 0.9));
  color: #0f2e5e;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-limit {
  border: 1px solid rgba(205, 139, 58, 0.34);
  background: rgba(255, 255, 255, 0.66);
  color: #916235;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack h3 {
  margin: 0;
  color: var(--market-navy);
  font-size: clamp(15px, 3.7cqw, 21px);
  font-weight: 900;
  line-height: 1.18;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-count {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #0f2e5e;
  line-height: 1;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-count strong {
  font-size: clamp(32px, 8.8cqw, 54px);
  font-weight: 950;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-count span {
  font-size: clamp(15px, 3.5cqw, 18px);
  font-weight: 900;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-bonus {
  min-height: 1.2em;
  margin: 0;
  color: #795b3d;
  font-size: clamp(14px, 2.85cqw, 14px);
  font-weight: 740;
  line-height: 1.25;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-meta {
  display: grid;
  gap: 4px;
  margin: 0;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-meta dt,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-meta dd {
  margin: 0;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-meta dt {
  color: #907058;
  font-size: clamp(14px, 2.55cqw, 14px);
  font-weight: 800;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-meta dd {
  color: #112856;
  font-size: clamp(14px, 2.85cqw, 14px);
  font-weight: 900;
  line-height: 1.1;
  text-align: right;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack button,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-compare-button,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal-primary {
  display: grid;
  min-height: clamp(38px, 9.6cqw, 48px);
  place-items: center;
  border: 1px solid rgba(201, 130, 52, 0.42);
  border-radius: 999px;
  background: linear-gradient(105deg, rgba(213, 247, 232, 0.86), rgba(255, 199, 216, 0.88));
  color: #07173a;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(15px, 3.25cqw, 16px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: 0 8px 15px rgba(142, 84, 35, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack button:hover,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack button:focus-visible,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-compare-button:hover,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-compare-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 11px 19px rgba(142, 84, 35, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-compare-button {
  width: min(78%, 360px);
  margin: 2px auto 0;
  min-height: clamp(44px, 10.6cqw, 54px);
  font-size: clamp(15px, 3.8cqw, 20px);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-note {
  color: #806143;
  font-size: clamp(14px, 2.75cqw, 14px);
  font-weight: 720;
  line-height: 1.35;
  text-align: center;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: none;
  place-items: center;
  padding: clamp(18px, 5vw, 32px);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal[aria-hidden="false"] {
  display: grid;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 19, 39, 0.5);
  backdrop-filter: blur(3px);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal-panel {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 36px));
  max-height: min(78vh, 640px);
  overflow: auto;
  margin: 0;
  border: 1.5px solid rgba(211, 145, 58, 0.56);
  border-radius: 22px;
  padding: 24px 22px 20px;
  background:
    radial-gradient(circle at 8% 6%, rgba(213, 247, 232, 0.42), transparent 34%),
    radial-gradient(circle at 92% 4%, rgba(255, 205, 219, 0.42), transparent 34%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.98), rgba(255, 239, 230, 0.97));
  box-shadow: 0 20px 46px rgba(20, 16, 34, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.74);
  color: var(--market-navy);
  outline: none;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 1px solid rgba(213, 150, 70, 0.42);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 250, 240, 0.86);
  color: #8a633b;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal-kicker,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal-panel h3,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal-panel p {
  margin: 0;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal-kicker {
  color: #b97832;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal-panel h3 {
  margin-top: 7px;
  padding-right: 58px;
  color: var(--market-navy);
  font-size: clamp(23px, 6vw, 30px);
  font-weight: 920;
  line-height: 1.16;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal-panel p {
  margin-top: 12px;
  color: #604935;
  font-size: 15px;
  font-weight: 680;
  line-height: 1.5;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) #marketChargeModalDetails {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-summary div {
  display: grid;
  gap: 5px;
  min-height: 68px;
  align-content: center;
  border: 1px solid rgba(205, 139, 58, 0.3);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.58);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-summary dt,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-summary dd {
  margin: 0;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-summary dt {
  color: #8a6a4c;
  font-size: 13px;
  font-weight: 820;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-summary dd {
  color: #102856;
  font-size: 17px;
  font-weight: 930;
  line-height: 1.15;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-compare-table {
  display: grid;
  gap: 6px;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-compare-row {
  display: grid;
  grid-template-columns: 1.35fr 0.72fr 0.82fr 0.7fr;
  gap: 6px;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(205, 139, 58, 0.24);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.58);
  color: #102856;
  font: inherit;
  text-align: left;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-compare-row.is-head {
  min-height: 30px;
  border: 0;
  background: transparent;
  color: #8a633b;
  font-size: 13px;
  font-weight: 900;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) button.market-charge-compare-row {
  cursor: pointer;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) button.market-charge-compare-row:hover,
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) button.market-charge-compare-row:focus-visible {
  border-color: rgba(239, 150, 184, 0.52);
  background: rgba(255, 248, 250, 0.84);
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-compare-row span {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-compare-row span:first-child {
  font-weight: 900;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal-primary {
  width: 100%;
  margin-top: 16px;
  min-height: 48px;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-modal.is-charge-selected .market-charge-modal-primary {
  background: linear-gradient(105deg, rgba(255, 244, 185, 0.88), rgba(255, 199, 216, 0.92));
}

@keyframes marketPaybackLeafSweep {
  0%,
  64% {
    left: -32%;
    opacity: 0;
  }

  72% {
    opacity: 1;
  }

  88%,
  100% {
    left: 112%;
    opacity: 0;
  }
}

@keyframes marketPaybackCatnipLift {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.04em);
  }
}

@keyframes marketPageFadeIn {
  0% {
    opacity: 0;
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes market-transition-veil {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.985);
  }

  48% {
    opacity: 1;
  }

  100% {
    opacity: 0.18;
    transform: translateX(-50%) scale(1.02);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-page="market"] .market-fixed-header,
  body[data-page="market"] .market-bottom-nav,
  body[data-page="market"] .market-scroll {
    animation: marketPageFadeIn 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, filter;
  }

  body[data-page="market"] .market-scroll {
    animation-duration: 920ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="market"].is-market-transitioning .market-transition-veil,
  body[data-page="market"] .market-payback-catnip-emphasis,
  body[data-page="market"] .market-payback-catnip-emphasis img,
  body[data-page="market"] .market-payback-catnip-emphasis::after {
    animation: none;
  }

  body[data-page="market"] .market-transition-veil {
    display: none;
  }
}

@media (max-width: 420px) {
  body[data-page="market"] .market-hero-panel {
    min-height: 0;
  }

  body[data-page="market"] .market-hero-copy {
    max-width: none;
  }

  body[data-page="market"] .market-guide-bubble {
    width: 35.4%;
  }

  body[data-page="market"] .market-payback-promise {
    top: 32.85%;
    height: 16.25%;
  }

  body[data-page="market"] .market-payback-promise > span {
    font-size: clamp(calc(var(--u) * 15), 3.62cqw, calc(var(--u) * 15.5));
    line-height: 1.08;
  }

  body[data-page="market"] .market-payback-promise > strong {
    margin-top: 1.05cqw;
    font-size: clamp(calc(var(--u) * 17.5), 4.78cqw, calc(var(--u) * 20.5));
    line-height: 1.06;
  }

  body[data-page="market"] .market-payback-promise > small {
    margin-top: 1.1cqw;
    font-size: clamp(calc(var(--u) * 14), 3.2cqw, calc(var(--u) * 14));
    line-height: 1.1;
  }

  body[data-page="market"] .market-payback-order-field :is(input, textarea) {
    font-size: clamp(calc(var(--u) * 14), 3.05cqw, calc(var(--u) * 14));
  }

  body[data-page="market"] .market-payback-benefits strong {
    font-size: clamp(calc(var(--u) * 14), 3.15cqw, calc(var(--u) * 14));
  }

  body[data-page="market"] .market-payback-cta {
    font-size: clamp(calc(var(--u) * 17), 4.9cqw, calc(var(--u) * 20));
  }

  body[data-page="market"] .market-payback-modal-panel {
    width: min(360px, calc(100vw - 32px));
    padding: calc(var(--u) * 20) calc(var(--u) * 18) calc(var(--u) * 18);
    border-radius: 18px;
  }

  body[data-page="market"] .market-payback-modal-panel h3 {
    font-size: calc(var(--u) * 21);
  }

  body[data-page="market"] .market-payback-modal-panel p,
  body[data-page="market"] .market-payback-modal-panel li {
    font-size: calc(var(--u) * 13);
  }

body[data-page="market"] .market-best-card,
  body[data-page="market"] .market-supply-card {
    flex-basis: 58%;
  }

  body[data-page="market"] .market-cat-supplies .market-supply-card {
    flex-basis: 58%;
  }
}

/* MY: boutique lounge backgrounds and the shared image-based app frame. */
body[data-page="my"] {
  /* PC = 모바일 확대. 손잡이는 :root의 --u-max. */
  --my-frame-width: min(100vw, calc(390px * var(--u-max)));
  --my-header-height: clamp(42px, calc(var(--my-frame-width) * 0.1448), 112px);
  --my-nav-height: calc(var(--my-frame-width) * 0.1862);
  --my-side-pad: clamp(6px, calc(var(--my-frame-width) * 0.02), 28px);
  background: #251523;
}

body[data-page="my"] .my-shell {
  position: relative;
  width: var(--my-frame-width);
  min-height: 100svh;
  margin: 0 auto;
  overflow-x: hidden;
  background: #241520;
  box-shadow: 0 0 72px rgba(18, 8, 22, 0.5);
}

body[data-page="my"] .my-fixed-bg {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 50%;
  width: var(--my-frame-width);
  height: 100svh;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(32, 14, 30, 0.16), rgba(32, 14, 30, 0.36)),
    url("assets/ui/background/current/my-background.jpg?v=20260713-bg-lite1") center top / cover no-repeat,
    #633e3a;
  pointer-events: none;
}

body[data-page="my"] .my-fixed-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(32, 15, 30, 0.16), rgba(255, 229, 192, 0.04) 50%, rgba(32, 15, 30, 0.16));
}

@media (min-width: 900px) {
  body[data-page="my"] {
    background: #1c1020;
  }

  body[data-page="my"] .my-shell {
    background: transparent;
    box-shadow: none;
  }

  body[data-page="my"] .my-fixed-bg {
    width: 100vw;
    filter: saturate(0.9) brightness(0.82);
    background:
      linear-gradient(90deg, rgba(10, 7, 18, 0.04) 0%, rgba(10, 7, 18, 0.09) 30%, rgba(14, 8, 22, 0.26) 50%, rgba(10, 7, 18, 0.09) 70%, rgba(10, 7, 18, 0.04) 100%),
      linear-gradient(180deg, rgba(18, 8, 22, 0.06), rgba(18, 8, 22, 0.24)),
      url("assets/ui/background/current/my-background-desktop.jpg?v=20260716-my-tailoring1") center / cover no-repeat,
    #4b2d27;
  }

  body[data-page="my"] .my-fixed-bg::before {
    display: none;
  }
}

body[data-page="my"] .my-fixed-header,
body[data-page="my"] .my-bottom-nav {
  position: fixed;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
}

body[data-page="my"] .my-fixed-header {
  top: 0;
  width: var(--my-frame-width);
  height: var(--my-header-height);
  overflow: hidden;
}

body[data-page="my"] .my-header-art,
body[data-page="my"] .my-bottom-nav img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="my"] .my-header-art { object-fit: fill; }
body[data-page="my"] .my-bottom-nav img { object-fit: contain; }

body[data-page="my"] .my-back-hit,
body[data-page="my"] .my-catnip-hit,
body[data-page="my"] .my-bell-hit,
body[data-page="my"] .my-menu-hit,
body[data-page="my"] .my-bottom-nav a {
  position: absolute;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="my"] .my-back-hit {
  left: 0;
  top: 0;
  width: 21%;
  height: 100%;
}
body[data-page="my"] .my-catnip-hit {
  top: 12%;
  height: 80%; /* 중심 52% 유지 — 아이콘과 어긋나면 안 된다 */
  left: 46%; top: 26%; box-sizing: border-box; display: flex; width: 29.6%; height: 52%;
  align-items: center; justify-content: center; padding: 0 2% 0 10%; color: #432b0d;
  font-size: calc(var(--u) * 15); font-weight: 950; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
body[data-page="my"] .my-catnip-hit span { min-width: 6.2ch; max-width: 7.3ch; overflow: hidden; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; transform: translateY(-.08em); }
body[data-page="my"] .my-bell-hit {
  left: 76.5%;
  top: 0;
  width: 10.7%;
  height: 100%; left: 78.4%; top: 21%; width: 6.9%; height: 62%;
}
body[data-page="my"] .my-bell-hit.has-alert::after { content: ""; position: absolute; top: 8%; right: 8%; width: 10px; height: 10px; border: 2px solid #fff1c4; border-radius: 50%; background: #ee4b42; box-shadow: 0 0 12px rgba(238,75,66,.7); }
body[data-page="my"] .my-menu-hit {
  left: 87.6%;
  top: 0;
  width: 10.6%;
  height: 100%; left: 89.2%; top: 21%; width: 7.4%; height: 62%;
}

body[data-page="my"] .my-main {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: calc(var(--my-header-height) + max(var(--my-side-pad), env(safe-area-inset-top))) var(--my-side-pad) calc(var(--my-nav-height) + max(var(--my-side-pad), env(safe-area-inset-bottom)));
}

body[data-page="my"] .my-panel {
  border: 1px solid rgba(255, 232, 191, 0.46);
  background: linear-gradient(135deg, rgba(255,250,240,.9), rgba(255,244,232,.74)), rgba(255,248,236,.8);
  box-shadow: 0 18px 42px rgba(33,17,14,.2), inset 0 1px 0 rgba(255,255,255,.68);
  backdrop-filter: blur(10px);
}

body[data-page="my"] .my-hero,
body[data-page="my"] .my-profile-panel,
body[data-page="my"] .my-section,
body[data-page="my"] .compact-list {
  border-radius: 24px;
}

body[data-page="my"] .my-hero { min-height: 148px; }
body[data-page="my"] .my-hero h1,
body[data-page="my"] .my-profile-panel h2,
body[data-page="my"] .my-section h2 { color: #1d263d; }
body[data-page="my"] .my-panel .eyebrow { color: #99622b; }
body[data-page="my"] .my-panel p { color: rgba(70, 47, 36, .86); }
body[data-page="my"] .my-panel article { background: rgba(255, 252, 246, .6); }

body[data-page="my"] .my-bottom-nav {
  bottom: max(-2px, calc(env(safe-area-inset-bottom) - 8px));
  width: min(calc(var(--my-frame-width) - 10px), 100vw);
  height: var(--my-nav-height);
}
body[data-page="my"] .my-bottom-nav a { top: 12%; height: 74%; }
body[data-page="my"] .my-bottom-nav .fortune { left: 4%; width: 18%; }
body[data-page="my"] .my-bottom-nav .play { left: 22%; width: 18%; }
body[data-page="my"] .my-bottom-nav .home { left: 39%; width: 22%; }
body[data-page="my"] .my-bottom-nav .market { left: 60%; width: 18%; }
body[data-page="my"] .my-bottom-nav .my { left: 78%; width: 18%; }


/* =========================================================
   상세 페이지 공통 시스템 - 2026-07-27
   햄버거 메뉴 하위 페이지(설정, 고객센터, 약관 등)가 공유한다.
   시각 언어는 헤더 캣닢 지갑·알림함에서 그대로 가져와, 앱 전체와 이질감이 없게 한다.
   기준 문서: docs/DETAIL_PAGE_DESIGN_SYSTEM.md
   ========================================================= */
body[data-page="detail"] {
  --detail-frame-width: min(100vw, 680px);
  /* 좌우 여백이자 카드 사이 간격. 다른 페이지의 *-side-pad 와 같은 규칙이다. */
  --detail-side-pad: clamp(6px, calc(var(--detail-frame-width) * 0.02), 28px);
  --detail-header-height: clamp(46px, calc(var(--detail-frame-width) * 0.14555), 88px);
  --detail-nav-height: calc(var(--detail-frame-width) * 0.1862);
  --detail-ink: #071538;
  --detail-body: #4a3b2c;
  --detail-sub: #76624d;
  --detail-point: #b97832;
  --detail-line: rgba(203, 145, 73, 0.28);
  margin: 0;
  display: flex;
  justify-content: center;
  background: #140b21;
  color: var(--detail-body);
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body[data-page="detail"] .detail-fixed-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: var(--detail-frame-width);
  transform: translateX(-50%);
  /* ⚠️ 색을 먼저 깐다. 그림이 오기 전에는 여기가 빈 화면이었다.
     진입 연출이 배경을 0.35초 보여주는데 그때 아무것도 없으면 '느리다'로 읽힌다.
     뷰별로 그림을 덮어써도(아바타·캣닢 등) 색은 남아 빈 화면이 안 나온다. */
  background-color: #5f3522;
  background-image: url("assets/ui/background/current/consult-background.jpg?v=20260713-bg-lite1");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* 모바일 세로 배경도 PC와 같은 매칭을 따른다.
   주민센터는 세로 배경을 만들지 않았으므로 행정·안내 4종(설정·고객센터·약관·냥토 소식)은
   위 기본값인 상담소 세로 배경을 그대로 쓴다. 내 상담 기록도 기본값이다. */
/* 내 옷장과 토비의 부티크는 같은 공간이다. MY 배경을 함께 쓴다. */
body[data-page="detail"]:is([data-view="avatar"], [data-view="boutique"]) .detail-fixed-bg {
  background-color: #633e3a;
  background-image: url("assets/ui/background/current/my-background.jpg?v=20260713-bg-lite1");
}

body[data-page="detail"]:is([data-view="catnip"], [data-view="saved"], [data-view="orders"]) .detail-fixed-bg {
  background-image: url("assets/ui/background/current/market-ohaeng-shop-background.jpg?v=20260713-bg-lite1");
}

body[data-page="detail"] .detail-shell {
  position: relative;
  z-index: 1;
  width: var(--detail-frame-width);
  min-height: 100vh;
  padding-top: var(--detail-header-height);
  padding-bottom: calc(var(--detail-nav-height) + max(var(--detail-side-pad), env(safe-area-inset-bottom)));
  background: transparent;
}

/* ---- 상단 헤더 (이미지 + 투명 히트존) ---- */
body[data-page="detail"] .detail-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 30;
  width: var(--detail-frame-width);
  height: var(--detail-header-height);
  overflow: hidden;
  transform: translateX(-50%);
}

body[data-page="detail"] .detail-header-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="detail"] .detail-header button,
body[data-page="detail"] .detail-header a {
  position: absolute;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="detail"] .detail-header-back { left: 0; top: 0; width: 21%; height: 100%; }

body[data-page="detail"] .detail-header-catnip {
  left: 45.2%;
  top: 25%;
  display: flex !important;
  width: 30.3%;
  height: 48%;
  align-items: center;
  justify-content: center;
  padding: 0 2% 0 9%;
  line-height: 1;
}

body[data-page="detail"] .detail-header-catnip span {
  display: block;
  min-width: 6.2ch;
  max-width: 7.3ch;
  overflow: hidden;
  color: #432b0d;
  font-size: clamp(15px, 3.15vw, 17px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  transform: translateY(-0.08em);
}

body[data-page="detail"] .detail-header-bell { left: 77.5%; top: 14%; width: 9.6%; height: 72%; }
body[data-page="detail"] .detail-header-menu { left: 89%; top: 13%; width: 10.5%; height: 74%; }

/* ---- 하단 네비 ---- */
body[data-page="detail"] .detail-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: max(-2px, calc(env(safe-area-inset-bottom) - 8px));
  z-index: 30;
  width: min(calc(var(--detail-frame-width) - 10px), 100vw);
  height: var(--detail-nav-height);
  transform: translateX(-50%);
}

body[data-page="detail"] .detail-bottom-nav img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="detail"] .detail-bottom-nav a {
  position: absolute;
  top: 11%;
  height: 73%;
  display: block;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="detail"] .detail-bottom-nav .fortune { left: 6.5%; width: 15%; }
body[data-page="detail"] .detail-bottom-nav .play { left: 24.2%; width: 15%; }
body[data-page="detail"] .detail-bottom-nav .home { left: 40.8%; top: 0; width: 18.5%; height: 96%; }
body[data-page="detail"] .detail-bottom-nav .market { left: 61.2%; width: 15%; }
body[data-page="detail"] .detail-bottom-nav .my { left: 78.8%; width: 15%; }

/* ---- 본문 ---- */
body[data-page="detail"] .detail-main {
  position: relative;
  z-index: 2;
  padding:
    var(--detail-side-pad)
    var(--detail-side-pad)
    var(--detail-side-pad);
  animation: detail-fade-in 0.45s ease both;
}

@keyframes detail-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="detail"] .detail-main { animation: none; }
}

/* 히어로 - 캐릭터 + 인사 */
body[data-page="detail"] .detail-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  /* 아래 패널과의 간격은 다른 카드 간격과 같은 값을 쓴다. */
  margin-bottom: var(--detail-panel-gap, 14px);
  padding: 16px 18px;
  border: 1.5px solid rgba(214, 154, 67, 0.55);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.97), rgba(255, 241, 224, 0.95)),
    radial-gradient(circle at 14% 10%, rgba(185, 243, 221, 0.42), transparent 32%),
    radial-gradient(circle at 92% 18%, rgba(247, 182, 201, 0.36), transparent 36%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 18px 44px rgba(120, 74, 26, 0.18);
}

body[data-page="detail"] .detail-hero-figure {
  flex: none;
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 244, 185, 0.9), rgba(255, 231, 241, 0.7));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 6px 16px rgba(150, 96, 32, 0.16);
}

body[data-page="detail"] .detail-hero-figure img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(96, 72, 28, 0.22));
}

body[data-page="detail"] .detail-hero-copy { min-width: 0; }

body[data-page="detail"] .detail-hero-kicker {
  margin: 0 0 4px;
  color: var(--detail-point);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

body[data-page="detail"] .detail-hero-copy h1 {
  margin: 0 0 6px;
  color: var(--detail-ink);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.35;
}

body[data-page="detail"] .detail-hero-copy p {
  margin: 0;
  color: var(--detail-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

/* 프로필 요약 (설정) - 지갑 잔액 카드 언어 */
/* 프로필 카드 - 설정의 히어로. 고양이가 잘리지 않게 액자 안에 통째로 세운다. */
body[data-page="detail"] .detail-profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--detail-panel-gap, 14px);
  padding: 20px 20px 20px 18px;
  border: 1.5px solid rgba(208, 149, 74, 0.55);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 251, 240, 0.97), rgba(255, 235, 228, 0.94)),
    radial-gradient(circle at 14% 14%, rgba(185, 243, 221, 0.5), transparent 36%),
    radial-gradient(circle at 92% 84%, rgba(247, 182, 201, 0.34), transparent 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.66), 0 18px 42px rgba(189, 120, 58, 0.2);
  overflow: hidden;
}

/* 카드 우측 상단에 은은한 빛 */
body[data-page="detail"] .detail-profile::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -14%;
  width: 52%;
  height: 150%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 200, 0.5), transparent 66%);
  pointer-events: none;
}

body[data-page="detail"] .detail-profile-frame {
  position: relative;
  flex: none;
  display: grid;
  width: clamp(96px, 27vw, 118px);
  aspect-ratio: 4 / 5;
  place-items: end center;
  padding: 6px 6px 0;
  border: 1.5px solid rgba(214, 154, 67, 0.42);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 92%, rgba(214, 154, 67, 0.26), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 226, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 8px 20px rgba(150, 96, 32, 0.18);
  overflow: hidden;
}

body[data-page="detail"] .detail-profile-frame img {
  width: 100%;
  height: 96%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 6px 10px rgba(120, 74, 26, 0.24));
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="detail"] .detail-profile-copy {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

body[data-page="detail"] .detail-profile-kicker {
  margin: 0 0 3px;
  color: #b97832;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

body[data-page="detail"] .detail-profile-name {
  margin: 0 0 9px;
  color: var(--detail-ink);
  font-size: clamp(21px, 5.6vw, 26px);
  font-weight: 950;
  line-height: 1.25;
  word-break: keep-all;
}

body[data-page="detail"] .detail-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 11px;
}

body[data-page="detail"] .detail-profile-catnip,
body[data-page="detail"] .detail-profile-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

body[data-page="detail"] .detail-profile-catnip {
  background: linear-gradient(135deg, rgba(255, 244, 185, 0.94), rgba(255, 230, 184, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  color: #8a5a17;
}

body[data-page="detail"] .detail-profile-catnip img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

body[data-page="detail"] .detail-profile-cat {
  padding: 5px 12px;
  background: rgba(185, 243, 221, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  color: #0f6f55;
}

body[data-page="detail"] .detail-profile-edit {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid rgba(203, 145, 73, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--detail-ink);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

body[data-page="detail"] .detail-profile-edit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(150, 96, 32, 0.18);
}

body[data-page="detail"] .detail-profile-edit:focus-visible {
  outline: 3px solid rgba(89, 205, 169, 0.55);
  outline-offset: 2px;
}

/* 패널 */
body[data-page="detail"] .detail-panel {
  /* 패널 사이 간격은 본문 좌우 여백과 같은 값을 쓴다(모바일 8px). */
  margin-bottom: var(--detail-panel-gap, 14px);
  padding: 18px 18px 20px;
  border: 1.5px solid rgba(214, 154, 67, 0.5);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.98), rgba(255, 243, 229, 0.96)),
    radial-gradient(circle at 90% 8%, rgba(247, 182, 201, 0.26), transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 18px 44px rgba(120, 74, 26, 0.16);
}

body[data-page="detail"] .detail-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

body[data-page="detail"] .detail-panel-title {
  margin: 0;
  color: var(--detail-ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.35;
}

body[data-page="detail"] .detail-panel-desc {
  margin: 4px 0 0;
  color: var(--detail-sub);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

body[data-page="detail"] .detail-panel-tag {
  flex: none;
  color: var(--detail-point);
  font-size: 15px;
  font-weight: 900;
}

/* 항목 행 */
body[data-page="detail"] .detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
  padding: 14px 14px;
  border: 1px solid var(--detail-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
}

body[data-page="detail"] .detail-row-icon {
  flex: none;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: rgba(185, 243, 221, 0.4);
  font-size: 21px;
  line-height: 1;
}

body[data-page="detail"] .detail-row-icon.is-warm { background: rgba(255, 244, 185, 0.6); }
body[data-page="detail"] .detail-row-icon.is-pink { background: rgba(255, 231, 241, 0.62); }

body[data-page="detail"] .detail-row-body { flex: 1; min-width: 0; }

body[data-page="detail"] .detail-row-body strong {
  display: block;
  color: var(--detail-ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
}

body[data-page="detail"] .detail-row-body p {
  margin: 4px 0 0;
  color: var(--detail-sub);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}

body[data-page="detail"] .detail-row-action {
  flex: none;
  display: grid;
  place-items: center;
}

/* 링크형 행 */
body[data-page="detail"] a.detail-row {
  color: inherit;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

body[data-page="detail"] a.detail-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(150, 96, 32, 0.14);
}

body[data-page="detail"] a.detail-row .detail-row-action::after {
  content: "\203A";
  color: var(--detail-point);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

body[data-page="detail"] a.detail-row:focus-visible,
body[data-page="detail"] .detail-switch:focus-visible,
body[data-page="detail"] .detail-tab:focus-visible,
body[data-page="detail"] .detail-faq summary:focus-visible {
  outline: 3px solid rgba(89, 205, 169, 0.55);
  outline-offset: 2px;
}

/* 값 표시 배지 */
body[data-page="detail"] .detail-value {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 230, 184, 0.68);
  color: #9c6121;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

body[data-page="detail"] .detail-value.is-muted {
  background: rgba(255, 231, 241, 0.58);
  color: #86526d;
}

/* 토글 스위치 */
body[data-page="detail"] .detail-switch {
  position: relative;
  display: inline-flex;
  width: 56px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(150, 110, 60, 0.24);
  cursor: pointer;
  transition: background 0.2s ease;
}

body[data-page="detail"] .detail-switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(90, 60, 20, 0.3);
  transition: transform 0.2s ease;
}

body[data-page="detail"] .detail-switch[aria-checked="true"] {
  background: linear-gradient(135deg, #7fd9b8, #59cda9);
}

body[data-page="detail"] .detail-switch[aria-checked="true"]::after {
  transform: translateX(24px);
}

/* 탭 (지갑 탭과 동일 언어) */
body[data-page="detail"] .detail-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px;
  border: 1px solid rgba(194, 135, 58, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  overflow-x: auto;
  scrollbar-width: none;
}

body[data-page="detail"] .detail-tabs::-webkit-scrollbar { display: none; }

body[data-page="detail"] .detail-tab {
  flex: 1 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #80664b;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

body[data-page="detail"] .detail-tab.is-active {
  background: linear-gradient(135deg, #fff4b9, #ffd1df);
  color: var(--detail-ink);
  box-shadow: 0 8px 18px rgba(174, 104, 40, 0.16);
}

/* FAQ 아코디언 */
body[data-page="detail"] .detail-faq {
  margin-top: 9px;
  border: 1px solid var(--detail-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  overflow: hidden;
}

body[data-page="detail"] .detail-faq[hidden] { display: none; }

body[data-page="detail"] .detail-faq summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  color: var(--detail-ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

body[data-page="detail"] .detail-faq summary::-webkit-details-marker { display: none; }

body[data-page="detail"] .detail-faq summary::before {
  content: "Q";
  flex: none;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 230, 184, 0.8);
  color: #9c6121;
  font-size: 15px;
  font-weight: 950;
}

body[data-page="detail"] .detail-faq summary::after {
  content: "+";
  flex: none;
  margin-left: auto;
  color: var(--detail-point);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

body[data-page="detail"] .detail-faq[open] summary::after { content: "\2212"; }
body[data-page="detail"] .detail-faq[open] { background: rgba(255, 250, 240, 0.86); }

body[data-page="detail"] .detail-faq-answer {
  padding: 0 16px 16px 54px;
  color: var(--detail-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

body[data-page="detail"] .detail-faq-answer p { margin: 0 0 8px; }
body[data-page="detail"] .detail-faq-answer p:last-child { margin-bottom: 0; }

/* 빈 상태 */
body[data-page="detail"] .detail-empty {
  padding: 26px 18px;
  border: 1px dashed rgba(203, 145, 73, 0.4);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--detail-sub);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* 약관·방침 조문 */
body[data-page="detail"] .detail-policy h3 {
  margin: 20px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--detail-line);
  color: var(--detail-ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.5;
}

body[data-page="detail"] .detail-policy > h3:first-of-type {
  padding-top: 0;
  border-top: 0;
}

body[data-page="detail"] .detail-policy p,
body[data-page="detail"] .detail-policy ol,
body[data-page="detail"] .detail-policy ul {
  margin: 0 0 10px;
  color: var(--detail-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.75;
}

body[data-page="detail"] .detail-policy ol,
body[data-page="detail"] .detail-policy ul { padding-left: 22px; }
body[data-page="detail"] .detail-policy li { margin-bottom: 6px; }
body[data-page="detail"] .detail-policy li:last-child { margin-bottom: 0; }
body[data-page="detail"] .detail-policy ul ul,
body[data-page="detail"] .detail-policy ol ul { margin: 6px 0 0; }

body[data-page="detail"] .detail-policy-meta {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 244, 185, 0.44);
  color: #8a6320;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

/* 하단 메모 */
body[data-page="detail"] .detail-note {
  margin: 6px 2px 0;
  color: #fffaf2;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  text-shadow: 0 1px 8px rgba(9, 5, 18, 0.55);
}

/* PC(>=900px): 와이드 배경 + 중앙 컬럼 스테이지 */
@media (min-width: 900px) {
  /* 상세 페이지 배경 매칭 — 화면의 성격에 따라 소속 공간을 따라간다.
     기본값은 묘한상담소(= 내 상담 기록). 나머지는 아래에서 갈아끼운다. */
  body[data-page="detail"] .detail-fixed-bg {
    width: 100vw;
    background-position: center;
    background-image: url("assets/ui/background/current/consult-background-desktop.jpg?v=20260713-bg-lite1");
    filter: saturate(0.92) brightness(0.86);
  }

  /* 행정·안내 4종(설정·고객센터·약관·냥토 소식) = 냥토 주민센터.
     이 배경만 밝은 낮이라 원본 중앙 밝기가 200.3이다. 형제 배경들은 63.7~91.2다.
     그대로 두면 이 4개 화면만 확 밝아 튄다.

     처음엔 0.33(중앙 66.1)으로 형제들 한가운데에 맞췄는데, 사용자가 실물을 보고
     어둡다고 했다. 밝은 낮 장면인데 밤 배경들 사이에 억지로 끼워 넣은 값이었다.
     → 0.44(중앙 88.1)로 올렸다. 형제 중 가장 밝은 MY(78.4)보다 살짝 위다.
     낮 장면이니 이 가족에서 제일 밝은 게 오히려 맞다.
     흰 글자 대비는 7.78:1로 여유 있다(AA 4.5:1). 배경을 갈면 다시 재야 한다.
     더 밝게: 0.48 → 96.2 / 더 어둡게: 0.40 → 80.1 */
  body[data-page="detail"]:is([data-view="settings"], [data-view="support"], [data-view="policy"], [data-view="info"]) .detail-fixed-bg {
    background-image: url("assets/ui/background/current/detail-background-desktop.jpg?v=20260728-office1");
    filter: saturate(0.92) brightness(0.44);
  }

  /* 내 옷장 · 토비의 부티크 = MY. 아바타를 꾸미고 사는 곳이라 창구가 아니다. */
  body[data-page="detail"]:is([data-view="avatar"], [data-view="boutique"]) .detail-fixed-bg {
    background-image: url("assets/ui/background/current/my-background-desktop.jpg?v=20260716-my-tailoring1");
  }

  /* 거래 3종(캣닢 충전소·찜한 상품·구매와 페이백 내역) = 마켓 */
  body[data-page="detail"]:is([data-view="catnip"], [data-view="saved"], [data-view="orders"]) .detail-fixed-bg {
    background-image: url("assets/ui/background/current/market-background-desktop.jpg?v=20260713-bg-lite1");
  }

  body[data-page="detail"] .detail-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(180deg, rgba(255, 252, 246, 0.16), rgba(255, 238, 224, 0.12)),
      rgba(255, 246, 232, 0.08);
    box-shadow:
      0 24px 62px rgba(19, 10, 26, 0.24),
      inset 1px 0 0 rgba(255, 223, 187, 0.42),
      inset -1px 0 0 rgba(255, 223, 187, 0.42);
    backdrop-filter: blur(3px) saturate(0.98);
    -webkit-backdrop-filter: blur(3px) saturate(0.98);
    pointer-events: none;
  }
}

/* 기록 카드 (상담 기록·구매 내역 공용) */
body[data-page="detail"] .detail-reading {
  align-items: flex-start;
}

body[data-page="detail"] .detail-reading-time {
  margin-top: 6px !important;
  color: var(--detail-point) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

body[data-page="detail"] .detail-empty p {
  margin: 0 0 6px;
}

body[data-page="detail"] .detail-empty p:last-child {
  margin-bottom: 0;
}

/* 숫자 요약 3분할 (페이백 기준 등) */
body[data-page="detail"] .detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="detail"] .detail-stat {
  padding: 14px 8px;
  border: 1px solid var(--detail-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  text-align: center;
}

body[data-page="detail"] .detail-stat span {
  display: block;
  color: var(--detail-sub);
  font-size: 15px;
  font-weight: 800;
}

body[data-page="detail"] .detail-stat strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--detail-ink);
  font-size: 21px;
  font-weight: 950;
  line-height: 1.1;
}

body[data-page="detail"] .detail-stat p {
  margin: 0;
  color: var(--detail-point);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

/* 찜한 상품 행 */
body[data-page="detail"] .detail-saved {
  align-items: center;
}

body[data-page="detail"] .detail-saved-thumb {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(255, 244, 226, 0.9);
  box-shadow: inset 0 0 0 1px rgba(203, 145, 73, 0.24);
}

body[data-page="detail"] .detail-saved-actions {
  display: grid;
  gap: 6px;
}

body[data-page="detail"] .detail-mini-button {
  display: block;
  padding: 8px 14px;
  border: 1px solid rgba(203, 145, 73, 0.4);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff4b9, #ffd1df);
  color: #071538;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

body[data-page="detail"] .detail-mini-button.is-ghost {
  background: rgba(255, 255, 255, 0.7);
  color: #86526d;
}

body[data-page="detail"] .detail-mini-button:focus-visible {
  outline: 3px solid rgba(89, 205, 169, 0.55);
  outline-offset: 2px;
}

/* 마켓 카드 찜 버튼 */
body[data-page="market"] .market-product-card,
body[data-page="market"] .market-cat-product-card {
  position: relative;
}

.market-wish-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(203, 145, 73, 0.34);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: rgba(134, 82, 109, 0.42);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.16s ease, color 0.16s ease;
}

.market-wish-button[aria-pressed="true"] {
  background: linear-gradient(135deg, #fff4b9, #ffd1df);
  color: #e0537f;
}

.market-wish-button:hover {
  transform: scale(1.08);
}

.market-wish-button:focus-visible {
  outline: 3px solid rgba(89, 205, 169, 0.55);
  outline-offset: 2px;
}

/* 이미지 히어로 - 확정 배너 위에 텍스트만 얹는다 (왼쪽 45%가 안전영역) */
body[data-page="detail"] .detail-hero.is-art {
  position: relative;
  display: block;
  aspect-ratio: 3 / 1;
  padding: 0;
  overflow: hidden;
}

body[data-page="detail"] .detail-hero.is-art .detail-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="detail"] .detail-hero.is-art .detail-hero-copy {
  position: absolute;
  top: 50%;
  left: 5.5%;
  z-index: 2;
  width: 46%;
  transform: translateY(-50%);
}

body[data-page="detail"] .detail-hero.is-art .detail-hero-kicker {
  margin-bottom: 4px;
  color: #a9701f;
  font-size: clamp(17px, 4.6vw, 21px);
  font-weight: 950;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(255, 250, 238, 0.9);
}

body[data-page="detail"] .detail-hero.is-art .detail-hero-copy h1 {
  margin-bottom: 4px;
  font-size: clamp(21px, 5.9vw, 30px);
  font-weight: 950;
  line-height: 1.22;
  text-shadow: 0 1px 0 rgba(255, 253, 247, 0.9), 0 2px 12px rgba(255, 250, 238, 0.85);
}

body[data-page="detail"] .detail-hero.is-art .detail-hero-copy p:not(.detail-hero-kicker) {
  font-size: clamp(15px, 3.9vw, 18px);
  line-height: 1.45;
  text-shadow: 0 1px 8px rgba(255, 250, 238, 0.9);
}

/* 텍스트 뒤에 아주 옅은 크림 빛무리를 깔아 배경 질감 위에서도 또렷하게 */
body[data-page="detail"] .detail-hero.is-art .detail-hero-copy::before {
  content: "";
  position: absolute;
  inset: -14% -18% -14% -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 50%, rgba(255, 252, 244, 0.82), rgba(255, 250, 238, 0.32) 58%, transparent 76%);
  pointer-events: none;
}

/* 등장 연출 - 위에서부터 차례로 */
body[data-page="detail"] .detail-hero.is-art .detail-hero-kicker,
body[data-page="detail"] .detail-hero.is-art .detail-hero-copy h1,
body[data-page="detail"] .detail-hero.is-art .detail-hero-copy p {
  animation: detail-hero-rise 0.5s ease both;
}

body[data-page="detail"] .detail-hero.is-art .detail-hero-copy h1 { animation-delay: 0.08s; }
body[data-page="detail"] .detail-hero.is-art .detail-hero-copy p { animation-delay: 0.16s; }

@keyframes detail-hero-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 배너 위를 한 번 스쳐 지나가는 빛 */
body[data-page="detail"] .detail-hero.is-art::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -60%;
  z-index: 1;
  width: 42%;
  height: 160%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-14deg);
  animation: detail-hero-shine 5.5s ease-in-out 0.8s infinite;
  pointer-events: none;
}

@keyframes detail-hero-shine {
  0% { left: -60%; }
  22% { left: 130%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="detail"] .detail-hero.is-art .detail-hero-kicker,
  body[data-page="detail"] .detail-hero.is-art .detail-hero-copy h1,
  body[data-page="detail"] .detail-hero.is-art .detail-hero-copy p,
  body[data-page="detail"] .detail-hero.is-art::after {
    animation: none;
  }
  body[data-page="detail"] .detail-hero.is-art::after { display: none; }
}

/* 모바일에서는 배너를 조금 더 높여 글자가 눌리지 않게 한다 */
@media (max-width: 480px) {
  body[data-page="detail"] .detail-hero.is-art {
    aspect-ratio: 2.1 / 1;
  }
  body[data-page="detail"] .detail-hero.is-art .detail-hero-art {
    object-position: right center;
  }
  body[data-page="detail"] .detail-hero.is-art .detail-hero-copy {
    width: 49%;
  }
}

/* ---- 아바타 무대 (avatar.html / my.html 공용) ---- */
body[data-page="detail"] .avatar-stage-card {
  margin-bottom: 14px;
  padding: 16px 16px 14px;
  border: 1.5px solid rgba(214, 154, 67, 0.5);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.97), rgba(255, 240, 226, 0.95)),
    radial-gradient(circle at 18% 12%, rgba(185, 243, 221, 0.42), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(247, 182, 201, 0.36), transparent 36%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 18px 44px rgba(120, 74, 26, 0.18);
  text-align: center;
}

body[data-page="detail"] .avatar-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 46vh;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 88%, rgba(214, 154, 67, 0.24), transparent 56%),
    radial-gradient(circle at 50% 42%, rgba(255, 248, 230, 0.9), rgba(255, 238, 220, 0.55) 62%, transparent 78%);
}

body[data-page="detail"] .avatar-stage canvas {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: grab;
}

body[data-page="detail"] .avatar-stage.is-3d canvas { display: block; }
body[data-page="detail"] .avatar-stage.is-3d canvas:active { cursor: grabbing; }
body[data-page="detail"] .avatar-stage.is-3d .avatar-stage-fallback { display: none; }

body[data-page="detail"] .avatar-stage-fallback {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: auto;
  height: 84%;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(120, 74, 26, 0.28));
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="detail"] .avatar-stage-spin {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.86);
  box-shadow: 0 4px 12px rgba(120, 74, 26, 0.16);
  color: #8a6320;
  font-size: 15px;
  font-weight: 900;
  transform: translateX(-50%);
  pointer-events: none;
}

body[data-page="detail"] .avatar-stage-name {
  margin: 12px 0 0;
  color: var(--detail-ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.3;
}

/* ---- 선택 그리드 (기본 고양이 / 아이템) ---- */
body[data-page="detail"] .avatar-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

body[data-page="detail"] .avatar-pick {
  display: grid;
  gap: 2px;
  padding: 12px 8px 11px;
  border: 1.5px solid var(--detail-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  text-align: center;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

body[data-page="detail"] .avatar-pick img {
  width: 100%;
  height: 68px;
  object-fit: contain;
  margin-bottom: 4px;
}

body[data-page="detail"] .avatar-pick strong {
  color: var(--detail-ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
}

body[data-page="detail"] .avatar-pick span {
  color: var(--detail-sub);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

body[data-page="detail"] .avatar-pick:hover { transform: translateY(-2px); }

body[data-page="detail"] .avatar-pick.is-active {
  border-color: rgba(89, 205, 169, 0.75);
  background: linear-gradient(180deg, rgba(200, 244, 226, 0.66), rgba(255, 255, 255, 0.72));
  box-shadow: 0 8px 20px rgba(89, 205, 169, 0.22);
}

body[data-page="detail"] .avatar-pick.is-locked img { opacity: 0.5; }
body[data-page="detail"] .avatar-pick.is-locked span { color: #9c6121; }

body[data-page="detail"] .avatar-pick:focus-visible {
  outline: 3px solid rgba(89, 205, 169, 0.55);
  outline-offset: 2px;
}

/* ---- 하단 액션 ---- */
body[data-page="detail"] .avatar-action-bar {
  position: sticky;
  bottom: 8px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 9px;
  margin-top: 4px;
}

body[data-page="detail"] .avatar-action {
  padding: 15px 12px;
  border: 1.5px solid rgba(203, 145, 73, 0.42);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff4b9, #ffd1df);
  box-shadow: 0 10px 24px rgba(174, 104, 40, 0.22);
  color: var(--detail-ink);
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
}

body[data-page="detail"] .avatar-action.is-ghost {
  background: rgba(255, 252, 244, 0.92);
  color: var(--detail-sub);
}

body[data-page="detail"] .avatar-action:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

body[data-page="detail"] .avatar-action:focus-visible {
  outline: 3px solid rgba(89, 205, 169, 0.55);
  outline-offset: 2px;
}

/* =========================================================
   MY NNTOPIA - 2026-07-28 재설계
   주인공은 내 아바타와 토비의 옷장이다. 결제와 관리는 다른 페이지가 맡는다.
   기준 문서: docs/MY_PAGE_PLAN_2026-07-28.md
   ========================================================= */
body[data-page="my"] .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;
}

/* ---- 1. 아바타 무대 ---- */
body[data-page="my"] .my-avatar-card {
  position: relative;
  margin-bottom: var(--my-card-gap, calc(var(--u) * 8));
  padding: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 22);
  border: 1.5px solid rgba(214, 154, 67, 0.55);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.97), rgba(255, 238, 226, 0.95)),
    radial-gradient(circle at 16% 10%, rgba(185, 243, 221, 0.5), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(247, 182, 201, 0.36), transparent 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.66), 0 20px 48px rgba(120, 74, 26, 0.22);
  text-align: center;
  overflow: hidden;
}

body[data-page="my"] .my-avatar-kicker {
  margin: 0 0 calc(var(--u) * 10);
  color: #b97832;
  font-size: calc(var(--u) * 14);
  font-weight: 950;
  letter-spacing: 0.14em;
}

body[data-page="my"] .my-avatar-stage {
  position: relative;
  width: min(100%, calc(var(--u) * 300));  /* 300px 고정이면 PC에서 안 자란다 */
  aspect-ratio: 1 / 1;
  margin: 0 auto 12px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 88%, rgba(214, 154, 67, 0.28), transparent 56%),
    radial-gradient(circle at 50% 40%, rgba(255, 250, 236, 0.92), rgba(255, 240, 224, 0.5) 62%, transparent 78%);
  overflow: hidden;
}

body[data-page="my"] .my-avatar-art {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: auto;
  height: 88%;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(120, 74, 26, 0.3));
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="my"] .my-avatar-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
  margin-bottom: calc(var(--u) * 10);
}

body[data-page="my"] .my-avatar-name h1 {
  margin: 0;
  color: #071538;
  font-size: calc(var(--u) * 22.62);
  font-weight: 950;
  line-height: 1.25;
}

body[data-page="my"] .my-nickname-edit {
  display: grid;
  width: calc(var(--u) * 32);
  height: 32px;
  place-items: center;
  border: 1px solid rgba(203, 145, 73, 0.36);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  font-size: calc(var(--u) * 15);
  line-height: 1;
  cursor: pointer;
}

body[data-page="my"] .my-nickname-form {
  margin: 0 auto 12px;
  max-width: calc(var(--u) * 320);
}

body[data-page="my"] .my-nickname-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 7);
}

body[data-page="my"] .my-nickname-row input {
  min-width: 0;
  padding: calc(var(--u) * 11) calc(var(--u) * 14);
  border: 1.5px solid rgba(203, 145, 73, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #4a3b2c;
  font-size: calc(var(--u) * 17);
  font-weight: 800;
}

body[data-page="my"] .my-nickname-save {
  padding: calc(var(--u) * 11) calc(var(--u) * 18);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff4b9, #ffd1df);
  color: #071538;
  font-size: calc(var(--u) * 16);
  font-weight: 950;
  cursor: pointer;
}

body[data-page="my"] .my-nickname-msg {
  margin: calc(var(--u) * 7) 0 0;
  color: #80664b;
  font-size: calc(var(--u) * 15);
  font-weight: 750;
}

body[data-page="my"] .my-avatar-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 7);
  margin-bottom: calc(var(--u) * 14);
}

body[data-page="my"] .my-catnip-chip,
body[data-page="my"] .my-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * 6) calc(var(--u) * 9);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  font-size: calc(var(--u) * 16);
  font-weight: 900;
}

body[data-page="my"] .my-catnip-chip {
  background: linear-gradient(135deg, rgba(255, 244, 185, 0.95), rgba(255, 230, 184, 0.9));
  color: #8a5a17;
}

body[data-page="my"] .my-catnip-chip img { width: calc(var(--u) * 20); height: calc(var(--u) * 20); object-fit: contain; }

body[data-page="my"] .my-cat-chip {
  padding: calc(var(--u) * 6) calc(var(--u) * 14);
  background: rgba(185, 243, 221, 0.55);
  color: #0f6f55;
}

body[data-page="my"] .my-avatar-cta {
  display: inline-block;
  padding: calc(var(--u) * 14) calc(var(--u) * 30);
  border: 1.5px solid rgba(198, 138, 56, 0.42);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff4b9, #ffd1df);
  box-shadow: 0 12px 26px rgba(174, 104, 40, 0.24);
  color: #071538;
  font-size: calc(var(--u) * 18);
  font-weight: 950;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

body[data-page="my"] .my-avatar-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(174, 104, 40, 0.3);
}

/* ---- 2. 토비의 옷장 (주인공) ---- */
body[data-page="my"] .my-wardrobe {
  margin-bottom: var(--my-card-gap, calc(var(--u) * 8));
  padding: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 20);
  border: 1.5px solid rgba(214, 154, 67, 0.5);
  border-radius: 26px;
  background:
    linear-gradient(150deg, rgba(255, 252, 244, 0.98), rgba(255, 241, 228, 0.96)),
    radial-gradient(circle at 90% 12%, rgba(247, 182, 201, 0.3), transparent 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64), 0 18px 44px rgba(120, 74, 26, 0.18);
}

body[data-page="my"] .my-wardrobe-head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 13);
  margin-bottom: calc(var(--u) * 14);
}

body[data-page="my"] .my-wardrobe-tobi {
  flex: none;
  width: calc(var(--u) * 62);
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(120, 74, 26, 0.24));
}

body[data-page="my"] .my-wardrobe-kicker {
  margin: 0 0 calc(var(--u) * 2);
  color: #b97832;
  font-size: calc(var(--u) * 13);
  font-weight: 950;
  letter-spacing: 0.1em;
}

body[data-page="my"] .my-wardrobe-head h2 {
  margin: 0 0 calc(var(--u) * 3);
  color: #071538;
  font-size: calc(var(--u) * 21);
  font-weight: 950;
  line-height: 1.25;
}

body[data-page="my"] .my-wardrobe-desc {
  margin: 0;
  color: #76624d;
  font-size: calc(var(--u) * 16);
  font-weight: 750;
  line-height: 1.5;
}

body[data-page="my"] .my-wardrobe-tabs {
  display: flex;
  gap: calc(var(--u) * 6);
  margin-bottom: calc(var(--u) * 12);
  padding: calc(var(--u) * 5);
  border: 1px solid rgba(194, 135, 58, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}

body[data-page="my"] .my-wardrobe-tab {
  flex: 1;
  min-height: calc(var(--u) * 38);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #80664b;
  font-size: calc(var(--u) * 16);
  font-weight: 900;
  cursor: pointer;
}

body[data-page="my"] .my-wardrobe-tab.is-active {
  background: linear-gradient(135deg, #fff4b9, #ffd1df);
  color: #071538;
  box-shadow: 0 8px 18px rgba(174, 104, 40, 0.16);
}

body[data-page="my"] .my-wardrobe-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 9);
  margin-bottom: calc(var(--u) * 12);
}

body[data-page="my"] .my-wardrobe-item {
  display: grid;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 11) calc(var(--u) * 8) calc(var(--u) * 10);
  border: 1.5px solid rgba(203, 145, 73, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  text-align: center;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

body[data-page="my"] .my-wardrobe-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(150, 96, 32, 0.16);
}

body[data-page="my"] .my-wardrobe-item img {
  width: 100%;
  height: calc(var(--u) * 62);
  object-fit: contain;
  margin-bottom: calc(var(--u) * 3);
}

body[data-page="my"] .my-wardrobe-item strong {
  color: #071538;
  font-size: calc(var(--u) * 16);
  font-weight: 900;
  line-height: 1.3;
}

body[data-page="my"] .my-wardrobe-item span {
  color: #9c6121;
  font-size: calc(var(--u) * 15);
  font-weight: 850;
}

body[data-page="my"] .my-wardrobe-item span.is-cash { color: #a33355; }

body[data-page="my"] .my-wardrobe-empty {
  padding: calc(var(--u) * 24) calc(var(--u) * 16);
  border: 1px dashed rgba(203, 145, 73, 0.4);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  color: #76624d;
  font-size: calc(var(--u) * 17);
  font-weight: 750;
  line-height: 1.6;
  text-align: center;
}

body[data-page="my"] .my-wardrobe-empty p { margin: 0 0 5px; }
body[data-page="my"] .my-wardrobe-empty p:last-child { margin-bottom: 0; }

body[data-page="my"] .my-wardrobe-more {
  display: block;
  margin-top: calc(var(--u) * 12);
  padding: calc(var(--u) * 13);
  border: 1px solid rgba(203, 145, 73, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #071538;
  font-size: calc(var(--u) * 17);
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

/* ---- 3. 나의 발자국 / 4. 보상함 ---- */
body[data-page="my"] .my-paw,
body[data-page="my"] .my-reward {
  margin-bottom: var(--my-card-gap, calc(var(--u) * 8));
  padding: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 20);
  border: 1.5px solid rgba(214, 154, 67, 0.5);
  border-radius: 26px;
  background:
    linear-gradient(150deg, rgba(255, 252, 244, 0.98), rgba(255, 243, 230, 0.96)),
    radial-gradient(circle at 10% 14%, rgba(185, 243, 221, 0.34), transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 18px 44px rgba(120, 74, 26, 0.16);
}

body[data-page="my"] .my-paw-head { margin-bottom: calc(var(--u) * 12); }

body[data-page="my"] .my-paw-head h2 {
  margin: 0 0 calc(var(--u) * 3);
  color: #071538;
  font-size: calc(var(--u) * 20);
  font-weight: 950;
  line-height: 1.3;
}

body[data-page="my"] .my-paw-head p {
  margin: 0;
  color: #76624d;
  font-size: calc(var(--u) * 16);
  font-weight: 750;
}

body[data-page="my"] .my-paw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 9);
}

body[data-page="my"] .my-paw-item {
  display: grid;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 14) calc(var(--u) * 8);
  border: 1px solid rgba(203, 145, 73, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
  text-align: center;
  text-decoration: none;
  transition: transform 0.16s ease;
}

body[data-page="my"] .my-paw-item:hover { transform: translateY(-2px); }

body[data-page="my"] .my-paw-icon {
  display: grid;
  width: calc(var(--u) * 38);
  height: 38px;
  margin: 0 auto 4px;
  place-items: center;
  border-radius: 13px;
  background: rgba(185, 243, 221, 0.46);
  font-size: calc(var(--u) * 19);
  line-height: 1;
}

body[data-page="my"] .my-paw-icon.is-warm { background: rgba(255, 244, 185, 0.62); }
body[data-page="my"] .my-paw-icon.is-pink { background: rgba(255, 231, 241, 0.66); }

body[data-page="my"] .my-paw-item strong {
  color: #071538;
  font-size: calc(var(--u) * 17);
  font-weight: 950;
  line-height: 1.25;
  word-break: keep-all;
}

body[data-page="my"] .my-paw-item small {
  color: #80664b;
  font-size: calc(var(--u) * 15);
  font-weight: 800;
}

body[data-page="my"] .my-reward-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 9);
}

body[data-page="my"] .my-reward-item {
  display: grid;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 15) calc(var(--u) * 14);
  border: 1px solid rgba(203, 145, 73, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
}

body[data-page="my"] .my-reward-item span {
  color: #80664b;
  font-size: calc(var(--u) * 15);
  font-weight: 800;
}

body[data-page="my"] .my-reward-item strong {
  color: #071538;
  font-size: calc(var(--u) * 17);
  font-weight: 900;
}

body[data-page="my"] .my-reward-item strong em {
  font-style: normal;
  font-size: calc(var(--u) * 25);
  font-weight: 950;
}

body[data-page="my"] .my-reward-item p {
  margin: 0;
  color: #76624d;
  font-size: calc(var(--u) * 15);
  font-weight: 750;
  line-height: 1.45;
}

body[data-page="my"] .my-reward-link {
  justify-self: start;
  margin-top: calc(var(--u) * 3);
  padding: calc(var(--u) * 8) calc(var(--u) * 15);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff4b9, #ffd1df);
  color: #071538;
  font-size: calc(var(--u) * 15);
  font-weight: 900;
  text-decoration: none;
}

/* 상세 페이지에서 충전소 아래 여백 (모으는 법 카드와 붙지 않게) */
body[data-page="detail"] .market-charge-station {
  margin-bottom: var(--detail-panel-gap, 22px);
}

/* 목록 행의 우측 메타 (소식 날짜 등) */
body[data-page="detail"] .detail-row-meta {
  display: grid;
  gap: 5px;
  justify-items: end;
  text-align: right;
}

body[data-page="detail"] .detail-row-date {
  color: var(--detail-point);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.3;
  white-space: nowrap;
}

/* 충전소 카드 모서리 정리
   (반복 텍스처 배경은 2026-07-28에 걷어냈다. 팩 카드가 텍스트로 꽉 차 있어
    배경을 깔면 가독성만 나빠지고 예뻐지지도 않았다. 대신 잔액 카드처럼
    여백이 있는 자리에만 이미지를 쓴다.) */
body[data-page="detail"][data-view="catnip"] .market-charge-station {
  border-radius: 26px;
  overflow: hidden;
}

/* 캣닢 충전소 잔액 카드 - 진열대 배너
   이미지는 양끝에 소품, 가운데가 비어 있으므로 글자를 가운데로 모은다. */
body[data-page="detail"][data-view="catnip"] .market-charge-balance-card {
  position: relative;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: clamp(84px, 19cqw, 104px);
  border-color: rgba(209, 148, 68, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.32), rgba(255, 250, 242, 0.28)),
    url("assets/ui/catnip-card/current/catnip-balance.webp?v=20260728-balance1") center / cover no-repeat;
  text-align: center;
  overflow: hidden;
}

body[data-page="detail"][data-view="catnip"] .market-charge-balance-card span,
body[data-page="detail"][data-view="catnip"] .market-charge-balance-card strong {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 6px rgba(255, 252, 245, 0.92);
}

body[data-page="detail"][data-view="catnip"] .market-charge-balance-card strong {
  color: #071538;
}

/* ---- 캣닢 팩 카드 리듬 정리 (2026-07-28)
   스펙 3줄을 1줄로 줄이고, 캣닢 양을 잎 개수로 시각화한다.
   숫자만 나열하면 어느 팩이 큰지 읽는 데 시간이 걸린다. ---- */
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-leaves {
  display: flex;
  justify-content: center;
  gap: 1px;
  margin: 2px 0 -2px;
  line-height: 1;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-leaf {
  font-size: 13px;
  font-style: normal;
  opacity: 0.18;
  filter: grayscale(1);
  transition: opacity 0.2s ease;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-leaf.is-on {
  opacity: 1;
  filter: none;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-plus {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(185, 243, 221, 0.72);
  color: #0f6f55;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.2;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-price {
  margin: 0;
  color: #75583b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-price b {
  color: rgba(150, 110, 60, 0.5);
  font-weight: 800;
}

/* 한정팩 구매 횟수는 눈에 띄게 */
body:is([data-page="market"], [data-page="my"], [data-page="detail"]) .market-charge-pack-limit.is-count {
  background: linear-gradient(135deg, #fff4b9, #ffd1df);
  color: #8a5a17;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.66);
}

/* 옷장 스킨 - 무대 배경 이미지 */
body[data-page="detail"] .avatar-stage.has-skin {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body[data-page="detail"] .avatar-pick.is-skin .avatar-skin-thumb {
  display: block;
  width: 100%;
  height: 68px;
  margin-bottom: 4px;
  border: 1px solid rgba(203, 145, 73, 0.28);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 86%, rgba(214, 154, 67, 0.24), transparent 58%),
    linear-gradient(180deg, rgba(255, 250, 236, 0.95), rgba(255, 240, 224, 0.7));
  background-size: cover;
  background-position: center;
}

/* ---------- 아바타 무대 스킨 (MY · 설정) ----------
   옷장에서 고른 스킨을 아바타가 보이는 다른 화면에도 깐다.
   script.js의 applyAvatarSkin()이 인라인 background-image와 .has-skin을 붙인다.
   기본 그라데이션은 스킨이 없을 때만 보이면 되므로 여기서 덮는다. */
body[data-page="my"] .my-avatar-stage.has-skin {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body[data-page="detail"] .detail-profile-frame.has-skin {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ---------- 토비의 부티크 (boutique.html) ----------
   상품이 스킨(정사각 이미지)이라 카드가 그림 위주다.
   캣닢 팩 카드와 달리 여기서는 그림이 주인공이므로 썸네일을 크게 쓴다. */
.boutique-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.boutique-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px 12px;
  border: 1.5px solid rgba(214, 154, 67, 0.3);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.97), rgba(255, 245, 231, 0.94));
  box-shadow: 0 8px 20px rgba(150, 96, 32, 0.14);
}

.boutique-card-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background-color: rgba(214, 154, 67, 0.12);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.boutique-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(58, 38, 16, 0.78);
  color: #fff7ea;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.boutique-card-body {
  display: grid;
  gap: 2px;
  padding: 0 2px;
}

.boutique-card-body strong {
  font-size: 18px;
  font-weight: 900;
  color: #3f2a11;
  letter-spacing: -0.01em;
}

.boutique-card-body p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #7a5a30;
  line-height: 1.4;
}

.boutique-card-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffd98a, #ffb4c6);
  color: #43290c;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}

.boutique-card-leaf {
  font-size: 15px;
}

.boutique-card-buy.is-ghost {
  background: rgba(214, 154, 67, 0.14);
  color: #6d4c22;
  font-size: 15px;
}

/* 보유한 상품은 그림을 살짝 눌러 "이미 가진 것"으로 읽히게 한다 */
.boutique-card.is-owned .boutique-card-thumb {
  filter: saturate(0.8) brightness(0.94);
}

/* ---------- 구매 확인 모달 ---------- */
body.is-boutique-modal-open {
  overflow: hidden;
}

.boutique-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
}

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

.boutique-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(32, 18, 6, 0.56);
  backdrop-filter: blur(2px);
}

.boutique-modal-card {
  position: relative;
  width: min(360px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 18px 18px 20px;
  border-radius: 26px;
  background: linear-gradient(180deg, #fffdf8, #fff3e2);
  box-shadow: 0 18px 44px rgba(60, 32, 8, 0.34);
  text-align: center;
}

.boutique-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(214, 154, 67, 0.16);
  color: #6d4c22;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.boutique-modal-preview {
  aspect-ratio: 1 / 1;
  margin-bottom: 14px;
  border-radius: 18px;
  background-color: rgba(214, 154, 67, 0.12);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.boutique-modal-kicker {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #b1803a;
}

.boutique-modal-card h3 {
  margin: 2px 0 4px;
  font-size: 23px;
  font-weight: 900;
  color: #3f2a11;
}

.boutique-modal-hint {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #7a5a30;
}

.boutique-modal-price {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: #43290c;
}

.boutique-modal-note {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: #b8442f;
}

.boutique-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 10px;
  margin-top: 16px;
}

.boutique-modal-cancel,
.boutique-modal-buy {
  min-height: 48px;
  border: 0;
  border-radius: 15px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}

.boutique-modal-cancel {
  background: rgba(214, 154, 67, 0.16);
  color: #6d4c22;
}

.boutique-modal-buy {
  background: linear-gradient(135deg, #ffd98a, #ffb4c6);
  color: #43290c;
}

/* 캣닢이 모자랄 때는 "사기"가 아니라 충전소로 보낸다 */
.boutique-modal-buy.is-short {
  background: linear-gradient(135deg, #cfe9d5, #a9d6bb);
  font-size: 16px;
}

@media (max-width: 380px) {
  .boutique-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 내 옷장 → 토비의 부티크 이동 ----------
   옷장은 "가진 것"만 보여주므로, 새 옷을 사러 갈 길이 여기 있어야 한다. */
.avatar-boutique-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1.5px dashed rgba(214, 154, 67, 0.5);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 232, 190, 0.5), rgba(255, 214, 226, 0.42));
  text-decoration: none;
}

.avatar-boutique-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 21px;
}

.avatar-boutique-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.avatar-boutique-body strong {
  font-size: 17px;
  font-weight: 900;
  color: #3f2a11;
  letter-spacing: -0.01em;
}

.avatar-boutique-body span {
  font-size: 14px;
  font-weight: 700;
  color: #7a5a30;
}

.avatar-boutique-arrow {
  width: 10px;
  height: 10px;
  border-top: 2.5px solid rgba(120, 82, 34, 0.7);
  border-right: 2.5px solid rgba(120, 82, 34, 0.7);
  transform: rotate(45deg);
}

/* MY 진열대에서 이미 가진 상품 표시 */
body[data-page="my"] .my-wardrobe-item span.is-owned {
  background: rgba(214, 154, 67, 0.16);
  color: #6d4c22;
}


/* ---------- 모바일 글자 가독성 (2026-07-30) ----------
   좁은 화면에서 오행 카테고리 탭은 아이콘보다 라벨이 우선이다.
   아이콘(17px)+간격을 빼면 긴 라벨(캣닢,마따따비)이 잘리지 않는다. */
@media (max-width: 430px) {
  body[data-page="market"] .market-element-tabs button img {
    display: none;
  }
}

/* ---------- 터치 타깃 확장 (2026-07-30) ----------
   375px 실측에서 탭 가능한 요소 207개 중 113개가 44px 미만이었다.
   아트워크 위에 얹힌 UI라 실제 박스를 키우면 그림과 어긋나므로,
   보이지 않는 가상요소로 히트 영역만 넓힌다. 시각 변화 없음.

   규칙:
   - 이미 positioned인 요소는 가상요소만 얹는다.
   - static인 요소는 position: relative를 함께 준다(레이아웃 영향 없음).
   - detail-switch는 ::after가 토글 손잡이라 ::before를 쓴다.
   - 이웃과 붙어 있는 요소(탭 줄, 목록 행)는 겹치지 않게 확장을 줄인다. */

/* 공통 헤더 히트존: 종/메뉴/로고/캣닢 지갑 (높이 26~33px) */
.home-catnip-hit::after, .home-bell-hit::after, .home-menu-hit::after, .home-logo-hit::after,
.market-catnip-hit::after, .market-bell-hit::after, .market-menu-hit::after, .market-back-hit::after,
.consult-catnip-hit::after, .consult-bell-hit::after, .consult-menu-hit::after, .consult-back-hit::after,
.play-catnip-hit::after, .play-bell-hit::after, .play-menu-hit::after, .play-back-hit::after,
.my-catnip-hit::after, .my-bell-hit::after, .my-menu-hit::after, .my-back-hit::after,
.ohaeng-back-hit::after,
.detail-header-bell::after, .detail-header-menu::after, .detail-header-catnip::after {
  content: "";
  position: absolute;
  inset: -8px -6px;
}

/* 카드 위 CTA·버튼 (높이 21~34px, 위아래로 여유가 있는 것들) */
.home-shop-cta::after, .home-ranking-cta::after, .home-attendance-button::after,
.home-title-reset-hit::after, .home-info-more::after, .home-fit-box::after,
.market-wish-button::after, .market-payback-cta::after, .market-payback-benefit::after,
.market-all-products-link::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}

/* 정적 요소: relative를 만들어 주고 확장한다 */
.home-info-tab, .home-info-row, .home-gaeunbeop-select,
.market-primary-button, .my-nickname-edit, .my-reward-link, .my-wardrobe-tab,
.detail-tab, .detail-profile-edit, .service-chip,
body[data-page="market"] .market-element-tabs button {
  position: relative;
}

.home-info-tab::after {
  content: "";
  position: absolute;
  inset: -10px -2px;
}

.market-primary-button::after, .my-nickname-edit::after,
.my-reward-link::after, .my-wardrobe-tab::after, .detail-tab::after,
.detail-profile-edit::after, .service-chip::after,
body[data-page="market"] .market-element-tabs button::after {
  content: "";
  position: absolute;
  inset: -8px -2px;
}

/* 전체보기 링크는 유난히 낮다(12px). 카드 모서리라 크게 넓혀도 안전하다 */
.home-info-more::after {
  inset: -14px -10px;
}

/* 겹치기 쉬운 세로 목록·인접 행은 확장을 줄인다 */
.home-info-row::after, .home-gaeunbeop-select::after, .home-gaeunbeop-profile::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

/* 설정 토글: ::after는 손잡이가 쓰고 있다 */
.detail-switch::before {
  content: "";
  position: absolute;
  inset: -6px -8px;
}


/* ---------- 모바일 카드 최대화 (2026-07-30) ----------
   390px 실측: 배경 노출이 홈 10.0% / 마켓 12.3%로 카드 사이 틈과 좌우 여백이 전부다.
   모바일에서는 배경을 볼 일이 거의 없으니 카드를 화면 끝까지 밀어 글자를 키운다.
   PC는 배경이 화면의 49.9%라 여백을 그대로 둔다(위 변수값 유지). */
@media (max-width: 520px) {
  /* 변수를 선언한 요소와 같은 선택자로 덮어야 한다.
     home/market은 .home-shell / .market-shell에 선언돼 있어서
     body에만 걸면 자식이 못 읽는다(2026-07-30에 여기서 한 번 헛짚었다).

     ⚠️ 2026-07-31 정정: "좌우 여백이자 카드 사이 간격을 하나의 값으로 쓴다"는
     원래 방침이 '깝깝함'의 원인이었다. 카드 사이는 --nn-stack-gap으로 분리했고,
     여기 값은 이제 **화면 좌우 여백만** 뜻한다.
     리뉴얼이 끝난 페이지부터 8 → 12px로 올린다(카드 폭 −2%). */
  body[data-page="home"] .home-shell { --home-side-pad: calc(var(--u) * 8); }
  body[data-page="market"] .market-shell { --market-side-pad: calc(var(--u) * 8); }
  /* 16px은 모바일 표준 거터다. 12px은 카드가 아직 화면 끝에 붙어 보이고,
     20px 카드 안쪽 여백과 어긋나 화면 가장자리가 카드 안보다 빡빡해진다. */
  body[data-page="consult"] { --consult-side-pad: 16px; }
  body[data-page="play"] { --play-side-pad: calc(var(--u) * 8); }
  body[data-page="my"] { --my-side-pad: 8px; }

  body[data-page="detail"] { --detail-side-pad: 8px; }
}

/* ---------- 아트워크 슬롯 안 글자 미세 넘침 (2026-07-30) ----------
   글자 하한을 15px로 올린 뒤 "미입력"·"상점으로 이동하기"가 슬롯 아래로
   3~4px 넘쳤다. 슬롯 높이는 아트워크 좌표(height: 4.75% 등)에 묶여 못 키운다.

   fitText JS가 줄여주긴 하지만 웹폰트가 늦게 오면 이미 재고 지나간 뒤라
   타이밍을 탄다. CSS로 확정한다 — 줄높이를 1로 눌러 글자 상자를 폰트 크기에
   맞추고, 슬롯이 자를 수 있는 여유를 남긴다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-profile .home-fit-text,
body:is([data-page="home"], [data-page="consult"]) .home-shop-cta .home-fit-text,
body[data-page="ohaeng"] .home-gaeunbeop-profile .home-fit-text {
  line-height: 1;
}

/* 슬롯이 글자보다 낮으면 위아래 1~2px은 넘칠 수밖에 없다.
   가운데 정렬이라 위아래가 균등하게 잘리는데, 그러면 글자가 뭉툭해 보인다.
   슬롯 자체에 아주 작은 세로 여유를 준다. 아트워크 정렬에는 영향이 없다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-profile,
body[data-page="ohaeng"] .home-gaeunbeop-art-card .home-gaeunbeop-profile {
  padding-block: 2px;
}

/* 상점 CTA는 슬롯 높이가 카드의 8.2%로 묶여 있어 15px 글자가 4px 넘쳤다.
   overflow: hidden을 유지한 채 세로만 조금 넉넉히 잡는다.
   버튼은 아트워크의 알약 모양 안에 들어가므로 2px 정도는 티가 안 난다. */
body[data-page="home"] .home-shop-art-card .home-shop-cta {
  height: auto;
  min-height: 8.2%;
  padding-block: 3px;
}


/* ---------- 카드 간격 통일 (2026-07-30) ----------
   측정에서 좌우 3/8px, 세로 12/24px로 제각각이던 것을 하나의 값으로 묶었다.
   상세 페이지는 본문 패딩과 패널 간격을 같은 변수로 쓴다. */
@media (max-width: 520px) {
  body[data-page="detail"] { --detail-panel-gap: 8px; }
}


/* ---------- 세로 간격 마무리 (2026-07-30) ----------
   최상위 카드 사이 간격만 하나의 값으로 묶는다.
   카드 '안'의 여백(제목-탭-그리드 사이 등)은 별개라 건드리지 않는다. */
@media (max-width: 520px) {
  body[data-page="my"] { --my-card-gap: calc(var(--u) * 8); }
  body[data-page="my"] .my-paw { margin-bottom: 8px; }

  /* 마켓 오행 섹션은 다른 규칙에서 margin-top 을 다시 받는다. 여기서 확실히 없앤다. */
  body[data-page="market"] .market-ohaeng-main { margin-top: 0 !important; }

  /* 설정 하단 한 줄 메모는 카드와 좌우를 맞춘다(기존 2px 안쪽이었다). */
  body[data-page="detail"] .detail-note { margin-inline: 0; }
}

/* 캣닢 한정팩은 2열 그리드다. 칸이 139px인데 글자 하한을 올리면서
   제목("이번 주 캣닢 주머니")이 174px가 되어 칸을 넘쳤다.
   그리드 자식은 기본 min-width: auto라 내용보다 작아지지 못한다. 풀어준다. */
@media (max-width: 520px) {
  body[data-page="detail"] .market-charge-limited-grid > * {
    min-width: 0;
  }

  body[data-page="detail"] .market-charge-pack {
    padding-right: 8px;
    padding-left: 8px;
  }

  body[data-page="detail"] .market-charge-pack > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* 상담소·플레이 본문은 display: block 이라 gap이 없고 섹션마다 margin이 달랐다
   (14/16px). 다른 페이지처럼 grid + gap 하나로 통일한다.

   2026-07-31: 간격을 --consult-side-pad(= 화면 좌우 여백)에서 떼어냈다.
   한 변수가 두 일을 겸해서 '카드 사이만 넓히기'가 불가능했다. :root의 위계 주석 참고.
   play는 바로 아래 규칙에서 자기 값을 다시 받으므로 여기 변경의 영향을 안 받는다. */
body[data-page="consult"] .consult-main,
body[data-page="play"] .play-main {
  display: grid;
  gap: var(--nn-stack-gap);
  align-content: start;
}

body[data-page="play"] .play-main {
  gap: var(--play-side-pad, 8px);
}

body[data-page="consult"] .consult-main > *,
body[data-page="play"] .play-main > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* 개운법 카드 그림(1120x1404)만 위·왼쪽에 14px 투명 여백이 들어 있다.
   370px로 표시하면 4.6px이라 위 카드와의 간격이 8px이 아니라 12.6px로 보인다.
   퍼센트 margin은 '컨테이너 폭' 기준이라, 14/1120 = 1.25%가 정확히 그 4.6px이다.
   그림을 다시 자르면 안에 %로 얹힌 글자 좌표가 전부 틀어지므로 여기서 당긴다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-card {
  margin-top: -1.25%;
}

/* 개운법 안내문("위 사주 프로필을 눌러 시작해요") 슬롯은 높이가 18px인데
   글자 하한을 14px로 올리면서 줄 상자가 20px이 됐다. 줄높이를 1로 눌러 맞춘다.
   fitText는 이 슬롯을 자기 상자로만 봐서 줄여주지 못한다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-desc,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-desc .home-fit-text,
body[data-page="ohaeng"] .home-gaeunbeop-desc,
body[data-page="ohaeng"] .home-gaeunbeop-desc .home-fit-text {
  line-height: 1;
}

/* 슬롯 높이가 카드의 3.85%(약 18px)로 고정돼 있어 14px 글자가 들어가지 않는다.
   개운법 프로필·상점 CTA와 같은 방식으로, 고정 height 를 최소값으로 바꿔
   글자만큼은 자라게 한다. 아트워크의 세로 위치(top)는 그대로다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-desc,
body[data-page="ohaeng"] .home-gaeunbeop-art-card .home-gaeunbeop-desc {
  height: auto;
  min-height: 3.85%;
}

/* .home-fit-text 는 height: 100% 라 부모가 내용만큼 자라지 못한다.
   이 슬롯에서만 풀어서 글자 높이가 부모를 밀도록 한다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-art-card .home-gaeunbeop-desc .home-fit-text,
body[data-page="ohaeng"] .home-gaeunbeop-art-card .home-gaeunbeop-desc .home-fit-text {
  height: auto;
}


/* ═══ 오늘의 개운법 — CSS 패널 (2026-07-31 해체) ═══════════════════════════════
   왜 바꿨나: 이 카드만 모바일에서 14.9px에 묶여 있었다(다른 CSS 패널은 18.7px).
   그림이 배지·라벨판·버튼판·프레임까지 들고 있어서, 글자를 키우면 슬롯을 뚫고
   나가니 fitText JS가 도로 줄이는 구조였다. PC(20.5px)에선 격차가 사라졌다 —
   카드 폭에 비례해 슬롯이 자라기 때문이다. 즉 모바일 전용 문제였고,
   사용자가 있는 쪽이 모바일이다.

   해체 방식: .home-gaeunbeop-art-card 클래스를 .home-gaeunbeop-panel로 바꾸면
   아트 전용 규칙 69개가 통째로 빠지고, 원래 있던 CSS 패널 규칙(4638~)이 다시 산다.
   어두운 남색 바탕과 오행별 색 변수는 그대로 둔다 — 오행 글자가 밝은색 그라데이션이라
   어두운 바탕이어야 읽힌다.

   여기 블록은 그 위에 '지금 기준'을 얹는다: 타입 스케일, 간격 스케일, 터치 타겟 44px.
   특이도가 (0,3,1)로 기본 규칙(0,2,1)보다 높아 순서와 무관하게 이긴다.

   ⚠️ script.js의 fitHomeGaeunbeopText()가 이 패널 안은 건너뛰도록 같이 고쳤다.
      안 그러면 인라인 font-size가 아래 --fs-* 를 전부 덮어쓴다. */

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-base);
  padding: var(--card-pad);
  border-radius: 22px;
}

/* 자식마다 갖고 있던 margin-top(clamp 7~12px)을 끈다. 간격은 위 gap 하나로 관리한다.
   섞여 있으면 "글자만 크고 간격은 그대로"가 또 나온다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* 안쪽 장식 테두리를 새 radius에 맞춘다. 밑줄(::after)은 하단 CTA와 겹쳐 지저분해 끈다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel::before {
  inset: 8px;
  border-radius: 16px;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel::after {
  content: none;
}

/* ── 제목줄 ── 원래 제목은 sr-only였고 눈에 보이는 건 그림 속 글자였다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-tight);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel-title {
  margin: 0;
  color: #fff3d2;
  font-size: var(--fs-title);
  font-weight: 950;
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
}

/* 초기화는 보조 동작이다. 제목을 이기면 안 되지만 터치 타겟 44px은 확보한다
   (그림 시절엔 히트존만 있고 라벨이 없어서 무슨 버튼인지 알 수 없었다). */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-title-reset {
  flex: none;
  min-height: 44px;
  padding: 0 var(--sp-base);
  border: 1px solid rgba(255, 226, 163, 0.36);
  border-radius: 999px;
  background: rgba(255, 246, 222, 0.07);
  color: #f2d7a0;
  cursor: pointer;
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* ── 프로필 버튼 · 용신 셀렉트 ──
   그림이 그려 둔 버튼판 높이에 맞추느라 둘 다 22px이었다. 권장 최소치의 절반이다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-profile,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-select {
  min-height: 44px;
  padding: var(--sp-tight) var(--sp-base);
  border-radius: 14px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-profile .home-fit-text,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-select strong {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ── 용신 오행 코어 ── 색·글로우는 이미 CSS 변수라 해체해도 그대로 산다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-core {
  min-height: 0;
  padding: var(--sp-base);
  border-radius: 16px;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-element-text {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-desc,
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-desc .home-fit-text {
  height: auto;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ── 개운법 4값 ──
   4열은 모바일에서 칸이 74~78px밖에 안 나온다. "짙은 파랑" 같은 값이 들어가는데
   그 폭에 맞추려니 글자를 줄일 수밖에 없었다. 2×2로 바꾸면 칸이 2배가 된다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-remedies {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nn-group-gap);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-value {
  gap: var(--sp-hair);
  min-height: 0;
  padding: var(--sp-tight) var(--sp-base);
  border-radius: 14px;
}

/* 라벨(색·숫자·방향·케어)은 원래 그림에 구워져 있던 글자다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-value span {
  font-size: var(--fs-caption);
  line-height: 1.2;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-value strong {
  min-height: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ── 듀얼 CTA ── 26px이던 것을 44px로. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-dual-cta {
  gap: var(--nn-group-gap);
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-dual-cta a {
  min-height: 44px;
  padding: var(--sp-tight) var(--sp-base);
  border-radius: 14px;
}

body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-dual-cta .home-fit-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ── 해체하면서 같이 풀어야 하는 아트워크 잔재 3개 ──
   전부 .home-gaeunbeop-card(기본 스코프)에 붙어 있어서 art-card 클래스를 떼도 안 빠진다. */

/* ① 초기화 버튼이 아트 슬롯 좌표(width 47.2%)를 그대로 갖고 있어 153px로 늘어났다.
      패널에서는 글자 길이만큼만 차지해야 한다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-title-reset {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
}

/* ② 그림(1120x1404) 위·왼쪽에 든 14px 투명 여백을 당기던 보정이다.
      그림이 없어졌으니 그대로 두면 카드 사이만 4.6px 좁아진다(24 → 19.4px 실측). */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel {
  margin-top: 0;
}

/* ③ 듀얼 CTA 글자가 clamp(15px, 3.35cqw, 20px)에 묶여 15px로 떨어졌다.
      부모가 container가 아니라 cqw가 안 자란다. 스케일로 바꾼다. */
body:is([data-page="home"], [data-page="consult"]) .home-gaeunbeop-panel .home-gaeunbeop-dual-cta a {
  font-size: var(--fs-body);
}

/* ── 또또 자리 (2026-07-31) ──────────────────────────────────────────────
   지적받은 것: 패널로 바꿔 놨는데 정작 캐릭터가 들어갈 자리가 없었다.
   그러면 그림이 나왔을 때 카드를 다시 짜야 하고, '코드 먼저'가 의미를 잃는다.

   그래서 오행 코어 옆에 **전용 열**을 판다. 규칙은 그대로다 —
   이 열에는 글자가 0개고, 글자 열(1fr)과 절대 겹치지 않는다.
   또또가 없어도 카드는 완성이고, 있으면 좋아진다.

   ⚠️ 스코프가 body[data-page="consult"]인 이유: 홈 개운법 카드는 당분간
      기존 아트워크를 그대로 쓴다(사용자 결정). 상담소 쪽이 더 낫다고 판단될 때
      교체한다. 그때까지 두 카드는 클래스(.home-gaeunbeop-panel)로도, 이 스코프로도
      이중으로 갈라져 있어야 실수로 홈이 바뀌지 않는다. */
body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-panel-stage {
  --nn-art-col: clamp(calc(var(--u) * 88), 27cqw, calc(var(--u) * 136));
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--nn-art-col);
  gap: var(--sp-base);
  align-items: stretch;
}

/* 슬롯은 그림이 없을 때도 '자리'로 보여야 한다. 기존 장식(::before 타원 + ::after 화살)이
   빈 상태를 채우고, has-image가 붙으면 그 장식이 사라지고 그림만 남는다. */
body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-mascot-slot {
  position: relative;
  display: block;
  align-self: end;
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 4;
  margin: 0;
  border: 1px solid var(--element-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 78%, var(--element-soft), transparent 62%),
    rgba(5, 15, 36, 0.42);
  opacity: 1;
}

body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-mascot-slot.has-image {
  border-color: transparent;
  background: transparent;
}

/* 그림은 슬롯 바닥에 발을 붙이고 선다. 투명 컷아웃이라 여백은 알파가 만든다. */
body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-mascot {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform: none;
}

/* 코어는 이제 한 열만 차지한다. 안쪽 그리드가 4열이라 좁아지면 터지므로 2열로 줄인다. */
body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-core {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  height: 100%;
}

/* 슬롯이 코어 높이에 따라 늘어나면 이미지 규격이 흔들려 그림을 못 만든다.
   3:4로 못 박고 둘 다 바닥 정렬한다 — 또또는 카드 바닥에 발을 붙이고 선다. */
body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-panel-stage {
  align-items: end;
}

body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-mascot-slot {
  height: auto;
  aspect-ratio: 3 / 4;
}

body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-core {
  height: auto;
}


/* ═══ 개운법 패널 재작업 (2026-07-31, 2차) ═══════════════════════════════════
   1차에서 세 가지를 틀렸다. 원인까지 적어 둔다.

   ① 겹쳤다 — 듀얼 CTA가 아트워크 좌표(position:absolute, top 539px)로 남아
      개운법 값 위에 25px 떠 있었다. **겉모습(글자·색)만 새로 덮고 배치를 안 건드린 것**이
      원인이다. 아래 ⓐ에서 뿌리째 흐름으로 되돌린다.
   ② 이 카드만 배경이 어두웠다 — 아트워크 이전의 죽은 CSS를 그대로 살려 썼기 때문이다.
      페이지에 맞춰 설계한 게 아니라 남아 있던 걸 재활용한 것이다. 밝은 글라스로 맞춘다.
      **오행별 색은 배경이 아니라 테두리·아우라·강조 글자로만 쓴다.**
   ③ 또또 자리가 88px로 너무 좁았다 — 캐릭터가 읽히지 않는다. 열을 넓힌다.

   ⚠️ 검증도 같이 고쳐야 한다. 1차 검증은 요소마다 제 크기만 쟀고 **형제끼리 겹치는지를
      안 봤다.** 그래서 "평균 18.3px / 오버플로 0" 합격 숫자가 나오는데 화면은 깨져 있었다. */

/* ⓐ 뿌리 수정 — 아트워크 좌표가 남은 자식을 전부 흐름으로 되돌린다. */
body[data-page="consult"] .home-gaeunbeop-panel :is(
  .home-gaeunbeop-title-reset,
  .home-gaeunbeop-profile,
  .home-gaeunbeop-select-wrap,
  .home-gaeunbeop-desc,
  .home-gaeunbeop-remedies,
  .home-gaeunbeop-value,
  .home-gaeunbeop-dual-cta
) {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  transform: none;
}

/* ⓑ 페이지와 같은 밝은 글라스. 오행 색은 테두리와 아우라에만 남긴다. */
body[data-page="consult"] .home-gaeunbeop-panel {
  --element-ink: #5a4632;
  border: 1px solid var(--element-border);
  background:
    radial-gradient(circle at 78% 16%, var(--element-soft), transparent 44%),
    linear-gradient(135deg, rgba(255, 250, 240, 0.92), rgba(255, 244, 232, 0.78)),
    rgba(255, 248, 236, 0.84);
  backdrop-filter: blur(10px);
  color: #382920;
  box-shadow:
    0 14px 32px rgba(33, 17, 14, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

body[data-page="consult"] .home-gaeunbeop-panel[data-element="wood"]  { --element-ink: #1f6b43; }
body[data-page="consult"] .home-gaeunbeop-panel[data-element="fire"]  { --element-ink: #ab3a2f; }
body[data-page="consult"] .home-gaeunbeop-panel[data-element="earth"] { --element-ink: #8a5a1e; }
body[data-page="consult"] .home-gaeunbeop-panel[data-element="metal"] { --element-ink: #55606e; }
body[data-page="consult"] .home-gaeunbeop-panel[data-element="water"] { --element-ink: #1f5a8a; }

/* 어두운 카드용 안쪽 장식 테두리는 밝은 바탕에서 때가 탄 것처럼 보인다. 끈다. */
body[data-page="consult"] .home-gaeunbeop-panel::before { content: none; }

body[data-page="consult"] .home-gaeunbeop-panel-title { color: #141e36; }

body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-title-reset {
  border-color: rgba(154, 98, 43, 0.32);
  background: rgba(154, 98, 43, 0.08);
  color: #7a4f22;
}

body[data-page="consult"] .home-gaeunbeop-panel :is(.home-gaeunbeop-profile, .home-gaeunbeop-select) {
  border: 1px solid rgba(154, 98, 43, 0.3);
  background: rgba(255, 255, 255, 0.62);
  color: #3c2c20;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 오행 코어 — 배경은 옅게, 색은 테두리와 아우라가 낸다. */
body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-core {
  border: 1px solid var(--element-border);
  background:
    radial-gradient(circle at 50% 120%, var(--element-soft), transparent 62%),
    rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

/* 오행 글자는 밝은색 그라데이션이라 밝은 바탕에서 안 보인다. 단색 잉크로 바꾼다. */
body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-element-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--element-ink);
  text-shadow: none;
  filter: none;
}

body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-desc { color: rgba(62, 45, 36, 0.86); }

body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-value {
  border: 1px solid rgba(154, 98, 43, 0.26);
  background: rgba(255, 255, 255, 0.58);
  color: #2b2018;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-value span { color: #8a5a2a; }
body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-value strong { color: #241a13; }

body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-dual-cta a {
  border: 1px solid rgba(154, 98, 43, 0.34);
  background: linear-gradient(180deg, rgba(255, 236, 199, 0.96), rgba(244, 210, 152, 0.96));
  color: #4a3016;
}

/* ⓒ 또또 자리를 넓힌다. 88px에서는 캐릭터가 안 읽힌다. */
body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-panel-stage {
  --nn-art-col: clamp(calc(var(--u) * 116), 36cqw, calc(var(--u) * 176));
}

body[data-page="consult"] .home-gaeunbeop-panel .home-gaeunbeop-mascot-slot {
  border: 1px dashed var(--element-border);
  background:
    radial-gradient(circle at 50% 82%, var(--element-soft), transparent 66%),
    rgba(255, 255, 255, 0.4);
}


/* ═══ 묘한상담소 4카드 = 메뉴 버튼 (2026-07-31, 재작업) ═══════════════════════
   1차에서는 카드마다 설명 한 줄을 넣었다. 틀렸다 — 그 문장들은 **들어갈 페이지에
   있어야 할 글**이다. 메뉴에 필요한 건 '어디로 가는지'와 '얼마인지' 둘뿐이다.
   설명을 빼니 카드가 버튼이 되고, 남은 공간이 그림 자리가 된다.

   구조: [배경 그림] 위에 [CSS 스크림 + 이름 + 가격].
   글자는 그림 위가 아니라 **CSS 표면 위**에 있다. 그림을 빼도, 바꿔도 글자는 그대로다. */

body[data-page="consult"] .consult-menu-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
}

/* 배경 그림 자리. 아직 파일이 없으면 오행 느낌의 그라데이션으로 떨어진다.
   --menu-art에 url()만 넣으면 그림이 올라온다. 카드 코드는 안 바뀐다. */
body[data-page="consult"] .consult-menu-art {
  position: absolute;
  inset: 0;
  background-image: var(--menu-art, none);
  background-position: center 38%;
  background-size: cover;
  background-repeat: no-repeat;
}

body[data-page="consult"] .consult-menu-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--menu-tint, linear-gradient(160deg, rgba(255, 244, 226, 0.5), rgba(246, 226, 200, 0.28)));
}

/* 카드마다 다른 기운. 그림이 들어오면 이 색은 그림 뒤로 물러난다. */
body[data-page="consult"] .consult-menu-card[data-consult-card="saju"] {
  --menu-tint: linear-gradient(160deg, rgba(198, 231, 255, 0.52), rgba(255, 246, 228, 0.3));
}
body[data-page="consult"] .consult-menu-card[data-consult-card="unse"] {
  --menu-tint: linear-gradient(160deg, rgba(255, 226, 196, 0.54), rgba(255, 248, 232, 0.3));
}
body[data-page="consult"] .consult-menu-card[data-consult-card="iching"] {
  --menu-tint: linear-gradient(160deg, rgba(214, 226, 255, 0.52), rgba(244, 238, 255, 0.3));
}
body[data-page="consult"] .consult-menu-card[data-consult-card="gunghap"] {
  --menu-tint: linear-gradient(160deg, rgba(255, 214, 220, 0.52), rgba(255, 240, 236, 0.3));
}

/* 글자판 — 그림이 아니라 CSS다. 그림이 아무리 바뀌어도 글자는 여기 얹힌다. */
body[data-page="consult"] .consult-menu-face {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-hair);
  align-items: flex-start;
  padding: var(--sp-base) var(--card-pad) var(--card-pad);
  background: linear-gradient(180deg, rgba(255, 250, 242, 0) 0%, rgba(255, 250, 242, 0.82) 34%, rgba(255, 248, 238, 0.96) 100%);
}

body[data-page="consult"] .consult-menu-name {
  color: #141e36;
  font-size: var(--fs-title);
  font-weight: 950;
  line-height: var(--lh-title);
}

body[data-page="consult"] .consult-menu-card .consult-menu-price {
  padding: 3px 10px;
  font-size: var(--fs-caption);
}

/* 아직 페이지가 없는 카드. 눌리는 카드와 눈으로 갈리되 글자는 그대로 읽혀야 한다. */
body[data-page="consult"] .consult-menu-card:not([href]) .consult-menu-art::before {
  background: linear-gradient(160deg, rgba(246, 242, 236, 0.72), rgba(238, 232, 224, 0.5));
}

body[data-page="consult"] .consult-menu-card:not([href]) .consult-menu-name {
  color: #3f4658;
}


/* ═══ 페이지 진입 연출 (2026-07-31) ═══════════════════════════════════════════
   모바일은 카드가 화면을 다 덮어 배경을 볼 일이 없다. 페이지를 넘어오는 순간에만
   배경을 잠깐 보여주고 카드가 들어오게 한다 — "이 공간으로 넘어왔구나"를 눈으로 알린다.

   덤: 앞서 "모바일 배경 1,257KB를 지우자"고 제안했는데, 이 연출이 그 파일에 역할을 준다.
   지울 이유가 없어졌다.

   ⚠️ 1차는 카드를 60ms 간격으로 하나씩, 14px 아래에서 올려 보냈다. **별로였다.**
      계단처럼 순차로 내려오는 게 눈에 띄고, 움직임이 있으니 '연출'이 앞에 나선다.
      → 전부 **한 번에**, **움직임 없이**, **길게 번지듯** 나타나는 쪽으로 바꿨다.
      순차 등장(stagger)과 위치 이동(translateY)을 둘 다 버린다.

   타이밍(근거까지 남긴다 — 나중에 감으로 흔들지 않도록):
     배경만 보이는 시간 350ms — 250ms 아래면 '깜빡'으로 읽힌다. 하한에 가깝게 붙였다.
                             400 → 550 → **350**. 사용자가 "배경 보이는 시간을 줄이고
                             페이드를 더 천천히" 하기를 원했다.
     번지는 시간     1400ms — 부드러움은 '느린 곡선'이 아니라 '긴 시간'에서 나온다.
                             400ms대는 아무리 곡선을 눕혀도 '켜졌다'로 읽힌다.
                             800 → 1100 → 1000 → **1400**.
     곡선          ease-in-out — 시작도 끝도 완만해야 경계가 안 느껴진다

   ⚠️ 하한만 있는 게 아니라 상한도 있다. 정지 구간(hold + 페이드 초반 ~150ms, 지금 약 700ms)이
      길어지면 '연출'이 아니라 '로딩'으로 읽힌다. 여기서 더 늘릴 때는 hold보다
      페이드 쪽을 늘리는 게 안전하다 — 페이드 중에는 화면이 계속 변하므로 기다림으로 안 읽힌다.
   ⚠️ 이 800→1100 같은 값은 script.js의 NN_ARRIVE_FADE와 **반드시 같아야 한다.**
      다르면 페이드가 끝나기 전에 클래스가 빠져 화면이 툭 튄다.

   ⚠️ 카드마다 따로 걸지 않고 **컨테이너 하나**를 페이드한다. 요소별로 걸면 합성 타이밍이
      미세하게 어긋나 가장자리가 어른거린다. 하나로 묶으면 그럴 일이 없고 코드도 준다.

   ⚠️ PC는 제외한다. 배경이 화면의 절반이라 늘 보이므로 연출할 게 없고, 기다림만 생긴다.
   ⚠️ 홈은 제외한다. 이미 자기 등장 연출(하루 1회 환영 + 스크롤 등장)이 있어 겹친다.
   ⚠️ prefers-reduced-motion이면 아예 안 붙는다(<head> 인라인에서 거른다). */

@keyframes nn-arrive-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 첫 그림부터 감춰 둔다. 클래스는 <head> 인라인이 붙이므로 깜빡임이 없다. */
html.nn-arriving :is(.market-scroll, .page-main, .detail-main, .home-scroll) {
  opacity: 0;
}

/* 특이도를 숨기는 규칙보다 높게 잡아야 한다(둘 다 html.nn-arriving에서 출발). */
html.nn-arriving :is(.market-scroll, .page-main, .detail-main, .home-scroll).nn-arrived {
  animation: nn-arrive-fade 1400ms ease-in-out both;
}

/* 헤더·하단바는 감추지 않는다. 틀이 먼저 서 있어야 '앱 안에서 이동했다'로 읽히고,
   그 사이 배경은 화면의 85%에서 그대로 보인다. */

@media (prefers-reduced-motion: reduce) {
  html.nn-arriving :is(.market-scroll, .page-main, .detail-main, .home-scroll) {
    opacity: 1;
    animation: none;
  }
}

/* ── 마켓 자체 페이드와의 충돌 정리 (2026-08-01) ───────────────────────────────
   마켓만 예전부터 자체 진입 페이드를 갖고 있었다(marketPageFadeIn 780/920ms + blur 3px,
   헤더·하단바·본문에 적용). 통합 진입 연출과 하는 일이 같아서 모바일에서 겹친다.

   특히 나쁜 건 '끝난 뒤'다. 통합 연출이 끝나 html.nn-arriving이 빠지는 순간
   내 animation 선언이 사라지고 marketPageFadeIn이 되살아나 **한 번 더 페이드된다.**

   → 마켓 자체 페이드를 끄고 통합 연출에 맡긴다.
   ⚠️ 2026-08-01: 통합 연출을 **PC에도 켜면서** 폭 조건을 없앴다.
      전에는 모바일에서만 껐는데, PC에서도 통합 연출이 돌게 되어 그대로 두면 PC에서 겹친다.
      이제 마켓만 PC 페이드를 따로 갖던 불일치도 사라졌다(P2-4 해소). */
body[data-page="market"] .market-fixed-header,
body[data-page="market"] .market-bottom-nav,
body[data-page="market"] .market-scroll {
  animation: none;
  will-change: auto;
}

/* ─── 묘한상담소: 여백까지 비례로 (2026-08-01) ─────────────────────────
   글자를 `--u`로 바꿔도 **여백이 px로 남아 있으면 카드 폭이 안 맞는다.**
   실측에서 글자는 정확히 1.744배인데 히어로 폭만 1.823배로 4.6% 어긋났고,
   그 어긋남이 프로필 카드 높이(1.416배)까지 끌고 내려갔다 —
   카드가 상대적으로 넓어지니 글자가 덜 접혀 높이가 덜 자란 것이다.

   ⚠️ 이 세 값은 `:root`와 `@media(max-width:520px)`에 px로 박혀 있는데,
      home·play도 같이 쓰므로 **거기서 고치면 안 된다.** 여기서 consult만 덮는다.
      미디어쿼리는 특이도를 안 올리므로, 같은 특이도라도 파일 뒤쪽인 이 규칙이 이긴다.

   리뉴얼이 끝난 페이지부터 하나씩 이 방식으로 옮긴다. */
body[data-page="consult"] {
  /* 프레임도 `--u-max`를 따라간다. 글자만 줄이고 프레임을 680으로 두면
     한 줄에 들어가는 글자 수가 달라져 **줄바꿈이 두 폭에서 어긋난다** —
     비례 구조의 핵심 이점이 사라진다. 손잡이는 `:root`의 `--u-max` 하나뿐이다. */
  --consult-frame-width: min(100vw, calc(390px * var(--u-max)));

  --consult-side-pad: calc(var(--u) * 16);  /* 모바일 표준 거터 16px 기준 */
  --nn-stack-gap: calc(var(--u) * 24);      /* 카드 ↔ 카드 */
  --nn-group-gap: calc(var(--u) * 12);      /* 4카드 묶음 안 */
}


/* ═══ 묘한상담소 히어로 (2026-08-01) ═══════════════════════════════════════════
   기획서: docs/CARD_SPEC_CONSULT_HERO_2026-08-01.md — 9칸을 채우고 나서 쓴 코드다.

   구조: [글자 열 1fr] + [또또 열]. 글자는 왼쪽에만, 또또 열에는 글자가 0개다.
   톤:   어두운 밤하늘. 아래 4카드는 크림색이라 여기만 어둡다(의도된 대비).
         페이지의 '얼굴'이라 달라도 자연스럽다 — 나란히 놓인 카드 중 하나가 튀는 것과는 다르다.

   그림이 하나도 없어도 완성이다:
     배경 그림 없음 → 맨 아래 CSS 그라데이션이 그대로 보인다
     또또 없음      → img가 onerror로 빠지고 슬롯만 은은히 남는다
     모서리 문양 없음 → 아무것도 안 그려진다(::before/::after라 DOM에 흔적도 없다)

   ⚠️ 클래스 이름을 `__`로 새로 팠다. 옛 .consult-hero-panel / .consult-hero-copy 계열
      규칙에는 아트워크 시절 좌표가 남아 있어서, 이름을 재사용하면 그게 새어 들어온다. */

body[data-page="consult"] .consult-hero {
  container-type: inline-size;
  position: relative;
  display: grid;
  /* 2행 구조. 1행 = [글자][또또], 2행 = 말풍선 전체 폭.
     말풍선을 또또 옆 좁은 칸에 두었더니 3~4줄로 갇혀 카드가 230px까지 부풀었다. */
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 133);
  grid-template-rows: auto auto;
  gap: var(--sp-tight) var(--sp-base);
  align-items: end;
  /* 비율을 aspect-ratio로 박으면 말풍선이 길어질 때 글자가 넘친다.
     min-height로 두면 '보통은 이 비율, 필요하면 늘어남'이 된다.
     43cqw = 1903:826(2.304:1) 환산값. 358폭→154 / 652.8폭→281. */
  min-height: calc(var(--u) * 196);
  /* ⚠️ 문양 자리를 여백으로 확보하려다 실패했다 — 여백을 20→29px로 키웠더니
     글자 칸이 좁아져 말풍선이 4줄이 되고 카드가 되레 커졌다(221→230px).
     여백으로는 못 푼다. **문양 그림 자체가 안쪽으로 갈수록 투명해져야 한다.**
     그래야 글자와 겹쳐도 안 가린다. 규격은 기획서 7절에 못 박았다. */
  padding: var(--card-pad);
  overflow: hidden;
  border: 1px solid rgba(255, 224, 156, 0.42);
  border-radius: 22px;
  /* ⚠️ 여기 배경은 **그림이 없을 때만** 보인다. 그림(.consult-hero__scene)은
     엘리먼트라 배경보다 위에 깔린다. 그래서 스크림을 여기 둬도 그림을 못 덮는다.
     반입한 그림은 제목 자리 밝기편차 0.0452(기준 0.05)로 이미 조용해서 스크림이 필요 없다. */
  background:
    /* ① 폴백일 때 글자 쪽을 지키는 스크림 */
    linear-gradient(100deg, rgba(9, 16, 38, 0.78) 0 46%, rgba(9, 16, 38, 0.28) 78%, transparent),
    /* ② 폴백. 그림이 영영 없어도 이 카드는 멀쩡하다 */
    radial-gradient(ellipse at 78% 18%, rgba(255, 226, 158, 0.16), transparent 46%),
    linear-gradient(165deg, #0d1730 0%, #1b2c56 58%, #101c3c 100%);
  color: #fff6e4;
  box-shadow:
    0 16px 36px rgba(6, 12, 30, 0.42),
    inset 0 1px 0 rgba(255, 246, 220, 0.16);
}

/* 모서리 문양 — 좌상·우하 2곳. 고정 크기라 '글자가 들어갈 상자'가 아니다(규칙 위반 아님).
   파일이 없으면 조용히 아무것도 안 그린다. */
body[data-page="consult"] .consult-hero::before,
body[data-page="consult"] .consult-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: calc(var(--u) * 46);
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.9;
  pointer-events: none;
}

body[data-page="consult"] .consult-hero::before {
  top: 0;
  left: 0;
  background-image: url("assets/ui/consult-cards/current/consult-hero-corner-tl.webp?v=20260801-hero1");
  background-position: left top;
}

body[data-page="consult"] .consult-hero::after {
  right: 0;
  bottom: 0;
  background-image: url("assets/ui/consult-cards/current/consult-hero-corner-br.webp?v=20260801-hero1");
  background-position: right bottom;
}

/* ── 글자 열 ── 전부 여기 안에 있다. */
body[data-page="consult"] .consult-hero__copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-tight);
  min-width: 0; /* 없으면 긴 단어가 또또 열을 밀어낸다 */
}

body[data-page="consult"] .consult-hero__eyebrow {
  margin: 0;
  /* ⚠️ 제목·대사에는 그림자가 있는데 여기만 없었다.
     셋 다 '그림 위에 얹힌 글자'라 배경이 밝아지면 제일 작은 이 글자가 먼저 무너진다.
     지금 배경은 이 자리가 거의 검정이라 안 보이지만, 그림을 다시 받으면 달라진다.
     제목보다 촘촘하게 준다(작은 글자는 넓은 그림자가 번져 보인다). */
  text-shadow: 0 1px 6px rgba(6, 12, 30, 0.7);
  color: #f2d9a4;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* 제목만 둥근 글씨(Jua). 본문까지 쓰면 긴 글이 가벼워 보인다. */
body[data-page="consult"] .consult-hero__title {
  margin: 0;
  color: #fff8e8;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400; /* Jua는 한 굵기뿐이다. 굵게 지정하면 브라우저가 가짜로 두껍게 만든다 */
  line-height: var(--lh-title);
  /* 그림자 두 겹이다.
       ① 어두운 그림자 — 가독성. 그림 위 글자라 이게 본체다.
       ② 아주 옅은 호박색 번짐 — 소반 위 등불이 글자에도 닿는 느낌.
     ⚠️ 장식이 아니라 **장면의 연장**이다. alpha 0.20에 반경 26px이라
        가까이서 봐야 보인다. 이보다 진하면 글자가 흐릿해 보이기 시작한다
        (0.35까지 올려 봤다가 되돌렸다). */
  text-shadow:
    0 2px 12px rgba(6, 12, 30, 0.55),
    0 0 26px rgba(255, 205, 130, 0.2);
}

/* 한 줄 대사. 크림 박스를 씌우지 않는다 — 박스가 카드 면적의 19.1%를 덮고
   또또의 소반·앞발을 잘라먹었다. 그 자리 배경 평균 밝기는 0.011이라
   크림 글자만 얹어도 대비 16.0:1 (AA 기준 4.5:1의 3배)이다.
   그래서 이름도 __bubble이 아니라 __lead다. 말풍선이 아니다. */
body[data-page="consult"] .consult-hero__lead {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1; /* 전체 폭 */
  grid-row: 2;
  justify-self: start;
  margin: 0;
  max-width: 100%;
  color: #fff3df;
  /* 또또가 하는 말이다. 버튼·배지와 같은 고딕이면 캐릭터가 말하는 느낌이 죽는다.
     풀이 본문과 같은 명조를 써서, 이 대사가 곧 풀이의 목소리임을 알린다. */
  font-family: var(--font-reading);
  /* 박스가 있을 땐 좌우 padding 때문에 좁은 화면에서 3줄이 되어 caption까지
     낮췄었다. 박스를 걷어 그 폭이 돌아왔으므로 본문 크기로 되돌린다. */
  font-size: var(--fs-body);
  /* 어두운 배경 위 밝은 글자(반전)는 획이 가늘어 보인다. 명조는 가로획이 얇아
     더 그렇다. 그래서 400이 아니라 700이다. */
  font-weight: 700;
  line-height: var(--lh-body);
  word-break: keep-all; /* 한글은 어절 단위로 끊어야 읽힌다 */
  /* 줄바꿈은 HTML의 <br>이 정한다. 여기서 balance를 걸면 그 위치와 싸운다. */
  /* 배경이 그림이라 국소적으로 밝은 점이 있을 수 있다. 그림자로 받쳐준다. */
  text-shadow: 0 2px 10px rgba(6, 12, 30, 0.75);
}

/* ── 또또 열 ── 글자 0개. 3:4 세로, 바닥 정렬. */
/* 또또와 배경을 합친 한 장. 카드 전체를 덮는다.
   ⚠️ 따로 그리던 시절엔 카드 모양이 두 폭에서 달라(1.82 vs 2.29) 한 장이 안 맞았다.
      비례 스케일(--u)로 두 폭이 같은 모양(차이 0.3%)이 되어 가능해졌다.
   `cover`인 이유: 말풍선이 길어져 카드가 세로로 늘면 비율이 어긋나는데,
   그때 늘어나는 대신 위아래가 살짝 잘리는 편이 낫다. */
body[data-page="consult"] .consult-hero.is-art .consult-hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ⚠️ **왼쪽에서만 잘라낸다.** 대사가 두 줄이 되면서 카드가 세로로 자라
     비율이 그림(1.822)보다 낮아졌다(1.719). cover라 가로가 5.7% 잘리는데,
     기본값(center)이면 양쪽에서 2.8%씩 잘려 **오른쪽 찻주전자가 깎인다.**
     왼쪽은 빈 벽이라 잘라도 잃는 게 없다. 실측으로 제목 자리 대비도
     13.6:1로 그대로다(center와 차이 0.1). */
  object-position: right center;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}

/* 또또가 앉을 열. 이제 그림이 없고 **자리만 잡는다** —
   글자가 이 열로 넘어오면 또또 위에 겹친다. */
body[data-page="consult"] .consult-hero__art {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  width: 100%;
  /* 그림 안 또또 자리(가로 57~94% · 세로 11~61%)에 대응하는 비율.
     기획서 7절 참고. 그림이 바뀌면 여기도 같이 본다. */
  aspect-ratio: 4 / 3;
}

/* 그림이 없을 때만 '여기가 또또 자리'라는 표시를 남긴다.
   그림이 있으면 이 글로우가 또또 위에 겹쳐 뿌옇게 만든다. */
body[data-page="consult"] .consult-hero:not(.is-art) .consult-hero__art {
  border-radius: 14px;
  background: radial-gradient(circle at 50% 84%, rgba(255, 226, 158, 0.16), transparent 66%);
}


/* ── 글자를 드래그했을 때 색 (2026-08-01) ──────────────────────────────────
   그전에는 지정이 없어 브라우저 기본 파랑이 떴다. 어두운 히어로 카드 위에서
   특히 튄다. 밝은 크림 카드와 어두운 히어로 **양쪽에서 다 읽히는** 값으로 하나만 둔다
   — 호박색 바탕 + 진한 갈색 글자. 페이지마다 따로 둘 이유가 없다. */
::selection {
  background: rgba(255, 214, 138, 0.85);
  color: #1b1206;
}


/* ═══ 사주 프로필 카드 (2026-08-02 축소) ═══════════════════════════════════════
   제목 + 드롭다운 둘로 줄였다. 전에는 제목·버튼·안내문까지 넷이었는데
   뒤 두 문장은 드롭다운을 열면 바로 아는 내용이라 뺐다(사용자: "지나치게 길다").

   드롭다운 = 저장된 프로필들 + 맨 아래 "＋ 프로필 추가·수정"(모달을 연다). */

body[data-page="consult"] .consult-profile-select {
  width: 100%;
  min-height: calc(var(--u) * 44); /* 터치 타겟 */
  padding: calc(var(--u) * 10) calc(var(--u) * 40) calc(var(--u) * 10) calc(var(--u) * 16);
  border: 1px solid rgba(154, 98, 43, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  color: #3c2c20;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-body);
  cursor: pointer;
  /* 기본 화살표를 지우고 직접 그린다. 브라우저마다 모양이 제각각이라 카드 톤이 깨진다. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #8a5a2a 50%),
    linear-gradient(135deg, #8a5a2a 50%, transparent 50%);
  background-position: right calc(var(--u) * 20) center, right calc(var(--u) * 14) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body[data-page="consult"] .consult-profile-select:focus-visible {
  outline: 3px solid rgba(217, 143, 78, 0.82);
  outline-offset: 2px;
}

/* 아직 프로필이 없을 때는 이 카드가 '해야 할 일'이므로 살짝 강조한다. */
body[data-page="consult"] .consult-profile-card[data-profile="empty"] .consult-profile-select {
  border-color: rgba(154, 98, 43, 0.5);
  color: #7a4f22;
}

/* ── 모달 안 프로필 버튼 두 개 ── */
body:is([data-page="home"], [data-page="consult"]) .home-saju-profile-buttons {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--nn-group-gap);
}

/* 삭제는 되돌릴 수 없는 동작이라 눈에 띄되 먼저 눌리지는 않아야 한다.
   테두리만 있는 형태로 두고 색만 경고색을 쓴다. */
body:is([data-page="home"], [data-page="consult"]) .home-saju-delete-profile {
  min-height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid rgba(176, 58, 47, 0.42);
  border-radius: 12px;
  background: transparent;
  color: #a3392f;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-delete-profile:hover {
  background: rgba(176, 58, 47, 0.08);
}

body:is([data-page="home"], [data-page="consult"]) .home-saju-delete-profile:focus-visible {
  outline: 3px solid rgba(176, 58, 47, 0.7);
  outline-offset: 2px;
}