/* 사용자 앱 디자인 토큰 (홈 1차)
 * - 근거: docs/고비_개발계획서.md 2-2 (이름 `분류.쓰임.단계` → CSS 변수 `--분류-쓰임-단계`, 점은 하이픈, `0_5` 같은 단계 이름은 그대로).
 * - 값은 시안(고비_화면시안_261015v3) 실측값. 시안에 없거나 바꾼 값은 "(제안)".
 * - :root 와 켜기 범위 .app--v15 의 사용자 정의 속성만 둡니다. 선택자 규칙·외부 글꼴(@font-face, CDN)은 두지 않습니다 (CSP font-src 'self').
 *   글꼴 선언(@font-face)은 public/user-fonts.css, 공통 부품 규칙은 public/user-app.css.
 * - 시안 v15(2026-10-26 사용자 결정 "새 시안대로 반영", docs/시안v15_반영_개발계획서_2026-10-26.md 3-0 · 3-1):
 *   새 토큰은 :root 에 더하기만 하고, 바뀌는 값(회색 바탕 · 잉크 링크 · 빨강 고비톡 · 잉크 칩 …)은 맨 아래 .app--v15 범위에서만 다시 정의합니다.
 *   레이아웃(user-app-head.ejs)이 locals v15: true 인 화면의 body 에만 app--v15 를 붙이므로, 아직 바꾸지 않은 화면은 그대로입니다.
 *   모든 화면이 켜지면(계획 5단계) 이 값들을 :root 기본값으로 옮기고 .app--v15 범위를 지웁니다.
 * - 기존 public/user.css 토큰(--color-ink, --radius-md 8px 등)과 이름·값이 다릅니다. user.css 정리는 나중 과제이며,
 *   이 파일은 앱 레이아웃(user-app-head.ejs)을 쓰는 화면에서만 읽습니다. */

:root {
  /* ---------- 색 — 기본 ---------- */
  --color-brand-primary: #d1222a;
  --color-brand-primary-subtle: #fde8e9;
  --color-brand-primary-on-dark: #ff3b45;      /* 어두운 바탕 위 강조 글자 (합침: #FF6B70, #F09595) */
  --color-brand-primary-pressed: #b11b22;      /* (제안) 기본 버튼 눌림 — 2-3 */

  --color-text-primary: #1b1b1e;               /* 17.18 : 1 */
  --color-text-secondary: #5a5f66;             /* 6.43 : 1 */
  --color-text-tertiary: #666b73;              /* 5.36 : 1 — 글자에 쓸 수 있는 가장 흐린 회색 */
  --color-text-disabled: #a9adb4;              /* (제안) 비활성 전용. 본문·정보 글자에 쓰지 않음 (2.4 : 1) */
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: #c9ccd1;         /* 어두운 바탕 위 보조 글자 (10.67 : 1) */
  --color-text-nav-inactive: #8e9299;          /* 하단 탭 꺼진 글자·아이콘 (어두운 바탕 5.5 : 1) */
  --color-text-link: #2f5bb7;                  /* 6.36 : 1 */
  /* 값 없음 "준비 중" 글자 (2026-10-22 사용자 지시: 도형 없이 파란 글자). 시안 v15 에서 링크 색이 잉크로 바뀌어도
     파랑으로 남도록 링크 색을 참조하지 않고 값을 따로 둠(D-20, 2026-10-26 사용자 결정 1) — 흰 바탕 6.36 : 1, #f2f2f2 위 약 5.7 : 1 */
  --color-text-pending: #2f5bb7;
  /* (v15) 잉크 · 어두운 바탕 위 "준비 중" — 파랑 #2f5bb7 은 잉크(#1b1b1e) 위 약 2.7 : 1 로 모자라 밝은 파랑(잉크 위 약 7.9 : 1, B 요청) */
  --color-text-pending-on-dark: #8fb0f0;
  /* 회색 칸(낙찰 가능성 게이지 바탕 #cfcfcf) 위 "준비 중" — #2f5bb7 은 #cfcfcf 위 약 4.08 : 1 로 모자라 진한 파랑(약 5.46 : 1, 화면 점검 2026-10-26) */
  --color-text-pending-on-muted: #24489a;

  /* ---------- 색 — 배경 · 선 ---------- */
  --color-bg-page: #ffffff;
  --color-bg-subtle: #f6f5f4;
  --color-bg-muted: #f2f3f5;                   /* (제안) 합침 값 */
  --color-bg-image-placeholder: #e9eaed;
  --color-bg-inverse: #1b1b1e;
  --color-bg-inverse-pressed: #34343a;         /* (제안) 어두운 부품 눌림 — 2-3 */
  --color-bg-inverse-gradient: linear-gradient(180deg, #050506 0%, #111114 45%, #1b1b1f 78%, rgba(27, 27, 31, 0.85) 88%, #ffffff 100%);
  --color-bg-overlay: rgba(27, 27, 30, 0.85);   /* 사진 배지 (시안 .sc2 .sbd) */
  --color-bg-infobox: #f4f5f7;                 /* 카드 정보 상자 (시안 .sbx) */
  --color-bg-video: #2b2d31;                   /* 동영상 썸네일 자리 (시안 .vth) */
  --color-bg-video-label: rgba(0, 0, 0, 0.6);  /* 재생 시간 글자 바탕 (시안 .vth em) */
  --color-bg-fav: rgba(255, 255, 255, 0.92);   /* 추천 카드 관심 하트 바탕 (시안 .cfh) */
  --color-bg-scrim: rgba(0, 0, 0, 0.4);        /* (제안) */
  --color-bg-stage: #e9e9ec;                   /* 430px보다 넓은 화면의 양옆 (시안 .stage, 2-4) */
  --color-bg-surface: #ffffff;                 /* (v15) 카드 · 상자 흰 바탕. 부품은 --color-bg-page 대신 이 토큰을 씀(v15 에서 page 가 회색) */
  --color-bg-sheet-scrim: rgba(0, 0, 0, 0.45); /* (v15) 시트 뒤 어둡게 (시안 .ov, 옛 홈 H-03 · user-map.css .map-ov__scrim 과 같은 값) */
  --color-sheet-grab: #d5d8dd;                 /* (v15) 시트 손잡이 막대 (시안 .grab) */
  --color-kakao-bg: #fee500;                   /* (v15) 카카오 로그인 버튼 (카카오 로그인 디자인 가이드) — 로그인 시트 F-02 */
  --color-kakao-text: rgba(0, 0, 0, 0.85);     /* (v15) 카카오 버튼 글자 (같은 가이드, 노랑 위 약 13 : 1) */
  --color-bg-notice: #fff5db;                  /* (v15) 결과 발표 · 후기 요청 배너 바탕 (시안 .rvbn, H-13) */
  --color-text-notice: #8a6200;                /* (v15) 배너 보조 글자 · 아이콘 선 (시안 .rvbn small · .ic svg, 노랑 위 약 5.2 : 1) */
  --color-text-notice-muted: #8a6200;          /* 배너 닫기 ✕ — 시안 #b59a5a 는 노랑 위 대비 부족(약 2.6 : 1)이라 보조 글자 색을 씀 (제안) */

  --color-border-default: #e6e7ea;
  --color-border-strong: #c9ccd1;
  --color-border-divider: #dcdee2;             /* 정보 상자 나눔 선 (시안 .sbx.sp > i) */
  --color-border-inverse: #1b1b1e;
  --color-action-disabled: #c9ccd1;

  /* ---------- 색 — 판정 · 금액 · 강조 ---------- */
  --color-verdict-safe: #198754;
  --color-verdict-safe-bg: #e6f4ec;
  --color-verdict-safe-text: #0f7a45;
  --color-verdict-caution: #e0a020;
  --color-verdict-caution-bg: #fff5db;
  --color-verdict-caution-text: #8a6200;
  --color-verdict-risk: #d1222a;
  --color-verdict-risk-bg: #fde8e9;
  --color-verdict-risk-text: #b11b22;
  --color-verdict-unknown: #9aa0a6;            /* 점·테두리 전용. 글자에는 쓰지 않음(2.64 : 1) → 글자는 --color-text-tertiary */
  --color-verdict-unknown-bg: #eef0f3;
  --color-money-gain: #b11b22;
  --color-money-discount: #2f5bb7;
  --color-info-bg: #eef4fb;
  --color-accent-talk: #f26b4e;                /* 하단 탭 고비톡 (어두운 바탕 5.7 : 1) */
  --color-accent-talk-on-dark: #f26b4e;        /* 잉크 하단 탭 위 고비톡 글자 · 아이콘 (v15 범위에서 밝은 빨강으로 바꿈) */
  --color-text-promo-eyebrow: #f09595;         /* 매매사업자 띠 작은 글 (시안 .dlb small, 어두운 바탕 7.72 : 1) */
  --color-text-price: #3a3f47;                 /* 카드 가격 줄 (시안 .spr, 10.6 : 1) */
  --color-money-gradient: linear-gradient(90deg, #ff7a7f, #ff4b52, #ff9a8f); /* (v15) 홈 추천 카드 · 상세 큰 금액 글자 그라데이션 */
  /* (v15) 낙찰 가능성 게이지 — 시안 값(.gpw 바탕 #CFCFCF · 아래부터 차오르는 .gov 층 #F2F2F2 · 글자는 두 층 모두 잉크) */
  --color-gauge-track: #cfcfcf;
  --color-gauge-level: #f2f2f2;
  --color-gauge-text: #1b1b1e;                 /* #cfcfcf 위 약 11 : 1 */

  /* ---------- 색 — 카드 칩 (시안 .cbg · .cbg.ty: 유형 칩은 유형과 관계없이 파랑) ---------- */
  --color-chip-bg: #f1f2f4;
  --color-chip-text: #3f434a;                  /* 8.87 : 1 */
  --color-chip-type-bg: #eaf1ff;
  --color-chip-type-text: #2f63d9;             /* 칩 바탕 4.74 : 1, 정보 상자 바탕 4.93 : 1 — 신규형 상자 글자(시안 .nwl)도 같은 색 */
  /* (v15) 알약 탭 · 칩 · 태그 (시안 v15 .tabs button · .gpill · .cbg): 잉크 테두리, 고른 것 · D-day 임박은 잉크 채움 + 흰 글자 */
  --color-chip-border: #1b1b1e;
  --color-chip-on-bg: #1b1b1e;
  --color-chip-on-text: #ffffff;

  /* ---------- 색 — 유형 칩 (배경 / 글자) ---------- */
  --color-category-apt-bg: #e8effc;
  --color-category-apt-text: #2f5bb7;
  --color-category-villa-bg: #efeafb;
  --color-category-villa-text: #6a4fc6;
  --color-category-officetel-bg: #e4f4f1;
  --color-category-officetel-text: #17695e;
  --color-category-shop-bg: #fcede3;
  --color-category-shop-text: #9e4a1b;
  --color-category-building-bg: #eceff3;
  --color-category-building-text: #3f4a5a;
  --color-category-land-bg: #f3ece3;
  --color-category-land-text: #8a6440;         /* 4.50 : 1 경계값 (2-6 P11: 한 단계 진하게 검토) */
  --color-category-car-bg: #eef0f3;
  --color-category-car-text: #545b66;
  --color-category-gold-bg: #fbf1d6;
  --color-category-gold-text: #8a6200;
  --color-category-house-bg: #efeafb;         /* 단독·다가구 = 시안 CATS t-vil (빌라와 같은 색) */
  --color-category-house-text: #6a4fc6;
  --color-category-etc-bg: #eceff3;           /* 기타(공장 포함) = 시안 CATS t-bld (꼬마빌딩과 같은 색) */
  --color-category-etc-text: #3f4a5a;
  --color-category-all-bg: #f6f5f4;
  --color-category-all-text: #1b1b1e;

  /* ---------- 글자 ---------- */
  /* Pretendard는 기기에 설치된 경우에만 쓰임(글꼴 파일 자체 제공은 나중 과제). 없으면 시스템 한글 글꼴 */
  --font-family-base: "Pretendard", "Pretendard Variable", "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo",
    "Malgun Gothic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* (v15) 명조 제목 — Noto Serif KR 600 은 앱이 직접 서빙(public/user-fonts.css). 못 받으면 기기 명조 */
  --font-family-title: "Noto Serif KR", "Nanum Myeongjo", serif;
  --font-numeric: tabular-nums;

  /* 크기는 rem(시스템 글꼴 배율을 따름, 2-6). 16px = 1rem */
  --font-size-badge: 0.625rem;                 /* (G0) 10px — 머리 하트 관심 수 배지 (시안 .hbg) */
  --font-size-2xs: 0.6875rem;                  /* 11px */
  --font-size-2xs_5: 0.71875rem;               /* 11.5px — 사진 배지 · 유형 이름 (시안 .sbd · .cats2 .cat) */
  --font-size-xs: 0.75rem;                     /* 12px */
  --font-size-xs_5: 0.78125rem;                /* 12.5px — 카드 가격 줄 · 안내 표 (시안 .spr · .dlt) */
  --font-size-sm: 0.8125rem;                   /* 13px */
  --font-size-sm_5: 0.84375rem;                /* 13.5px — 안내 문단 (시안 .dlg p) */
  --font-size-md: 0.875rem;                    /* 14px */
  --font-size-lg: 1rem;                        /* 16px */
  --font-size-lg_5: 1.0625rem;                 /* 17px — 추천 제목 · 요일 건수 (시안 .hhd h3 · .day b) */
  --font-size-xl: 1.125rem;                    /* 18px */
  --font-size-2xl: 1.25rem;                    /* 20px */
  --font-size-3xl: 1.5rem;                     /* 24px */
  --font-size-4xl: 1.75rem;                    /* 28px */
  --font-size-display-sm: 2.0625rem;           /* (v15) 33px — 추천 카드 준비 금액 (시안 .gtl b) */
  --font-size-display: 3rem;                   /* (v15) 48px — 추천 카드 · 상세 큰 금액 (시안 .gam) */
  --font-leading-2xs: 1.45;
  --font-leading-xs: 1.5;
  --font-leading-sm: 1.5;
  --font-leading-md: 1.5;
  --font-leading-lg: 1.4;
  --font-leading-xl: 1.35;
  --font-leading-2xl: 1.3;
  --font-leading-3xl: 1.3;
  --font-leading-4xl: 1.2;
  /* 시안은 대부분 줄 높이를 정하지 않음(normal). 시안 캡처에서 normal 은 글자 크기의 약 1.16~1.19배라(대체 글꼴 기준),
     이 스택의 Noto Sans CJK(normal 약 1.45배)로 그려도 시안과 같은 높이가 되게 1.2 로 고정. 홈 · 안내 화면 기본 줄 높이 */
  --font-leading-compact: 1.2;
  --font-leading-relaxed: 1.65;                /* 안내 문단 (시안 .dlg p) */
  --font-leading-loose: 1.7;                   /* 안내 점 목록 (시안 .dll) */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;

  --font-tracking-tight: -0.4px;
  --font-tracking-display: -1px;
  --font-tracking-snug: -0.5px;                /* 로고 · 추천 제목 (시안 .logo · .hhd h3) */
  --font-tracking-chip: -0.3px;                /* 유형 이름 · 신규형 상자 (시안 .cats2 .cat · .nwl · .nwr) */
  --font-tracking-normal: 0;
  --font-tracking-wordmark: 0.32em;            /* (v15) GOBI 글자 로고 (시안 .top .gwm) */

  /* 부품 전용 예외 (단계에 넣지 않음, 2-2) */
  --font-size-wordmark: 0.82875rem;            /* (v15) GOBI 글자 로고 13.26px (시안 .top .gwm) */
  --font-size-subbar-title: 0.8925rem;         /* (v15) 하위 화면 상단 바 명조 제목 14.28px (시안 .top > b) */

  /* ---------- 간격 (4px 단위, 2px만 예외) ---------- */
  --space-0_5: 2px;
  --space-1: 4px;
  --space-1_5: 6px;
  --space-2: 8px;
  --space-2_5: 10px;
  --space-3: 12px;
  --space-3_5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* ---------- 레이아웃 ---------- */
  --layout-gutter: 16px;
  --layout-max-width: 430px;
  --layout-topbar-height: 46px;                /* 상단 바 (상태 표시줄 여백 제외) */
  --layout-subbar-height: 44px;                /* 하위 화면 상단 바 (시안 .dtop) */
  --layout-topbar-side: 72px;                  /* (v15) 로고 줄 3칸 그리드의 양옆 칸 (시안 72 · 1fr · 72) */
  --layout-wordmark-rule-width: 22px;          /* (v15) GOBI 아래 빨간 밑줄 22 × 2, 글자 아래 9px */
  --layout-wordmark-rule-height: 2px;
  --layout-wordmark-rule-gap: 9px;
  --border-width-rule: 1px;                    /* (v15) 상단 바 아래 잉크 선 */
  --border-width-section: 1.5px;               /* (v15) 섹션 머리 아래 잉크 선 (시안 .sh) */
  --layout-badge-size: 16px;                   /* (G0) 머리 배지 높이 · 최소 폭 (시안 .hbg 16px) */
  --layout-dot-size: 6px;                      /* (G0) 종 안 읽음 빨간 점 (시안 .ic.bel .dot) */
  --layout-hit-min: 48px;                      /* 누르는 영역 최소 48 × 48 (2-6 개발 기준, Material 48dp) */
  --layout-hit-gap: 8px;                       /* 인접 누르는 영역 간격 */
  --layout-tabbar-inset: 16px;                 /* 하단 탭 좌우 띄움 */
  --layout-tabbar-bottom: 18px;                /* 하단 탭 바닥 띄움 (안전 영역은 따로 더함) */
  --layout-tabbar-height: 50px;                /* 시안 .nav 높이(안쪽 8 / 7px + 탭 35px). 탭 누르는 영역 48px 은 안쪽 여백 1px 로 맞춤. 글자 확대 시 늘어날 수 있어 최소값 */
  --layout-tabbar-item-width: 60px;
  /* 본문 아래 여백 = 시안 .scr padding-bottom 200px (+ 아래 안전 영역은 user-home.css에서 더함). 하단 탭이 없는 하위 화면도 시안과 같음 */
  --layout-bottom-safe: 200px;

  /* ---------- 아이콘 (시안 선 아이콘) ---------- */
  --icon-size-md: 22px;                        /* 머리 아이콘 */
  --icon-size-sm: 20px;                        /* 하단 탭 아이콘 */
  --icon-stroke-width: 1.8;

  /* ---------- 모서리 ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-badge: 11px;                        /* 사진 배지 (시안 .sc2 .sbd) */
  --radius-table: 10px;                        /* 안내 표 (시안 .dlt) */
  --radius-tile: 14px;                         /* 유형 아이콘 칸 · 매매사업자 띠 (시안 .cat span · .dlb) */
  --radius-ask: 26px;                          /* 고비톡 띠 (시안 .ask.dk) */
  --radius-full: 999px;
  --radius-card: 16px;                         /* (v15) 테두리 없는 흰 카드 */
  --radius-box: 14px;                          /* (v15) 테두리 없는 흰 상자 · 목록 행 */

  /* ---------- 그림자 · 높이 ---------- */
  --elevation-0: none;
  --elevation-1: 0 1px 3px rgba(22, 24, 29, 0.05);
  --elevation-2: 0 2px 8px rgba(0, 0, 0, 0.15);
  --elevation-3: 0 4px 16px rgba(0, 0, 0, 0.08);           /* (제안) 떠 있는 하단 탭 · 시트 */
  --elevation-carousel-side: 0 8px 18px rgba(0, 0, 0, 0.16);
  --elevation-fav: 0 2px 8px rgba(0, 0, 0, 0.18);                 /* 추천 카드 관심 하트 (시안 .cfh) */
  --elevation-reco: 0 16px 30px -12px rgba(0, 0, 0, 0.35);         /* (v15) 홈 추천 카드 묶음 그림자 */
  --glow-promo: 0 0 10px rgba(226, 75, 74, 0.22);           /* 매매사업자 띠 빛 (시안 .glow #E24B4A 그대로) */
  --glow-promo-border: rgba(226, 75, 74, 0.7);

  /* 쌓임 순서 (제안) */
  --z-nav: 20;
  --z-toast: 80;
  --z-sheet: 90;
  --z-skip: 100;

  /* ---------- 상태 ---------- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: #1b1b1e;                 /* = text.primary, 흰 바탕 17 : 1 */
  --focus-ring-color-on-dark: #ffffff;
  --opacity-pressed: 0.7;                      /* (제안) */
  --opacity-disabled: 0.4;                     /* (제안) */
  --scale-pressed: 0.98;                       /* (제안) 카드 · 버튼 */
  --scale-pressed-icon: 0.9;                   /* (제안) 하단 탭 아이콘 · 하트 */

  /* ---------- 움직임 ---------- */
  --motion-duration-fast: 150ms;               /* 눌림 · 색 바뀜 */
  --motion-duration-base: 200ms;               /* 알림 문구 나타남, 켜짐/꺼짐 */
  --motion-duration-sheet: 220ms;
  --motion-duration-sheet-close: 180ms;        /* (제안) */
  --motion-duration-carousel: 800ms;
  --motion-duration-shine: 420ms;
  --motion-delay-shine: 50ms;
  --motion-duration-skeleton: 1.2s;
  --motion-duration-spinner: 800ms;
  --motion-ease-out: ease-out;
  --motion-ease-in: ease-in;
  --motion-ease-carousel: cubic-bezier(0.25, 0.8, 0.25, 1);
  --motion-ease-shine: cubic-bezier(0.4, 0, 0.6, 1);
  --motion-autoplay-interval: 6s;              /* 손으로 넘긴 뒤 자동 재시작 안 함 (2-6) */
  --motion-toast-duration: 4s;                 /* 4초 이상 (2-6 U3 · R5, 2-7의 2.5초 대체) */
}

/* ---------- 시안 v15 켜기 범위 (body.app--v15 — 화면마다 켬, 계획 3-0) ----------
 * :root 값을 이 범위 안에서만 바꿉니다. 시안 v15 값(:root{--line:#E4E4E4;--line2:#C9C7BF;--t2:#444444;--t3:#5F5F5F;--b-bg:#F2F2F2;--link:#1B1B1E;--disc:#5F5F5F},
 * html,body{background:#DDDDDD}, .nav button.gb{color:#D1222A}). "준비 중"(--color-text-pending)은 바꾸지 않음(파랑 유지). */
.app--v15 {
  --color-bg-page: #f2f2f2;
  --color-bg-stage: #dddddd;
  --color-bg-subtle: #f2f2f2;
  --color-bg-infobox: #f2f2f2;
  --color-border-default: #e4e4e4;
  --color-border-strong: #c9c7bf;
  --color-text-secondary: #444444;             /* #f2f2f2 위 약 8.7 : 1 */
  --color-text-tertiary: #5f5f5f;              /* #f2f2f2 위 약 5.7 : 1 */
  --color-text-link: #1b1b1e;                  /* 링크는 밑줄로 구분 */
  --color-money-discount: #5f5f5f;             /* 할인율 회색 (S C-6) */
  --color-accent-talk: #d1222a;                /* 하단 탭 고비톡 · 반응 (시안 .nav button.gb) */
  --color-accent-talk-on-dark: #ff5c63;        /* 잉크 탭(#1b1b1e) 위 고비톡 — #d1222a 는 약 3.25 : 1 로 모자라 밝은 빨강(약 5.7 : 1, 화면 점검 2026-10-26) */
  --color-chip-type-bg: transparent;
  --color-chip-type-text: #1b1b1e;
  --layout-topbar-height: 45px;                /* 시안 .top:has(.gwm) */
}

/* 화면 바깥(html, 430px 넘는 화면 양옆)도 v15 회색 — html 은 body 의 범위 값을 못 읽으므로 따로(:has 를 모르는 브라우저는 옛 색 그대로) */
:root:has(> body.app--v15) {
  --color-bg-stage: #dddddd;
}

/* ---------- 홈 디자인 시안 v19 (고비_홈디자인시안_261027v19, 화면설계서 H 홈 v0.18 — 2026-10-28) ----------
 * - 새 값만 :root 에 더합니다(이미 있는 토큰은 그대로 재사용). 값은 시안 v19 를 폭 360 · 390 에서 계산된 스타일로 실측한 것.
 * - 켜기 범위: 새 홈 템플릿(user/home-v19)이 <main> 에 home19 를 붙이므로 .app:has(.app-main.home19) 안에서만 바뀌는 값은 맨 아래 범위에 둠.
 *   옛 홈(user/home)과 다른 화면은 이 범위에 들지 않아 그대로입니다. */
:root {
  /* 색 — 잉크(어두운) 바탕 위 글자 · 선 (시안 .hbox span · .day · .hft*) */
  --color-text-inverse-subtle: #c9c7bf;        /* 잉크 위 10.15 : 1 — 안내 상자 작은 글 · 요일 이름 · 아래 정보 본문 */
  --color-text-inverse-soft: #d3d1c7;          /* 잉크 위 11.22 : 1 — 아래 정보 제보 버튼 글자 */
  --color-text-inverse-faint: #b4b2a9;         /* 잉크 위 8.09 : 1 — 아래 정보 링크 · 설명 */
  --color-text-inverse-dim: #888780;           /* 잉크 위 4.77 : 1 — 아래 정보 회사 정보 줄(11px, 4.5 : 1 이상) */
  --color-brand-primary-on-ink: #ff6b70;       /* 잉크 위 6.21 : 1 — 안내 상자 화살표 › (시안 .hbox b i) */
  --color-border-inverse-subtle: #444441;      /* 아래 정보 회사 정보 위 선 (시안 .hft-ci) */
  --color-border-inverse-strong: #5f5e5a;      /* 아래 정보 제보 버튼 테두리 (시안 .hft-btn) */
  --color-chart-bar: #d3d1c7;                  /* 어제 낙찰 막대(지난 날) (시안 .ydb i) — 어제 막대는 잉크 */
  --color-chart-track: #e4e4e4;                /* 평균 낙찰가율 도넛 바닥 (시안 .ydc circle) */
  --color-bg-veil: rgba(255, 255, 255, 0.2);   /* 추천 옆 · 바깥 카드 흰 막 20% (시안 .hlite .cfc::after) */
  /* 떠 있는 하단 탭 · 유리 (시안 .lgx · .gbar · .gind · .ggt) */
  --color-bg-glass: rgba(255, 255, 255, 0.42);
  --color-bg-glass-indicator: rgba(255, 255, 255, 0.8);
  --color-border-glass: rgba(255, 255, 255, 0.72);
  --color-text-glass-inactive: #4a494f;        /* #f2f2f2 위 7.96 : 1 */
  --color-bg-talk-float: rgba(196, 16, 26, 0.9); /* 고비톡 둥근 단추 — 흰 글자 6.11 : 1 */
  --color-border-talk-float: rgba(255, 170, 170, 0.8);

  /* 글자 */
  --font-size-md_5: 0.9375rem;                 /* 15px — 안내 상자 행동 글 · 고비 추천받기 (시안 .hbox b · .ask .aq) */
  --font-size-2xl_5: 1.375rem;                 /* 22px — 첫 화면 문구 1 · 3줄 · 추천 카드 준비 금액 · 아래 정보 로고 (시안 .hcopy .l1 · .gnd b · .hft-lg) */
  --font-size-display-xs: 2rem;                /* 32px — 추천 카드 큰 금액 (시안 .hlite .cfc .gam) */
  --font-size-wordmark-lg: 1.625rem;           /* 26px — 홈 GOBI 로고 (시안 .hlite .top .gwm) */
  --font-tracking-wordmark-wide: 5px;          /* 홈 GOBI 로고 자간 */
  --font-tracking-hero: -0.6px;                /* 첫 화면 문구 (시안 .hcopy) */
  --font-tracking-heading: -0.3px;             /* 묶음 제목 (시안 .sh b) */
  --font-tracking-name: -0.2px;                /* 안내 상자 물건 이름 (시안 .hbox.nm3 .hn) */
  --font-size-xl_5: 1.1875rem;                 /* 19px — 평균 낙찰가율 도넛 가운데 숫자 (시안 SVG 7/36 × 96px) */
  --font-leading-hero: 38px;                   /* 첫 화면 문구 줄 높이(줄마다 고정, 시안 .hcopy span) */
  --font-leading-list: 2;                      /* 아래 정보 링크 줄 (시안 .hft-lk) */
  --font-leading-note: 1.75;                   /* 아래 정보 설명 (시안 .hft-tx) */
  --font-leading-legal: 1.8;                   /* 아래 정보 회사 정보 (시안 .hft-ci) */

  /* 간격 · 크기 */
  --space-0_75: 3px;                           /* 안내 상자 줄 사이 (시안 .hbox gap) */
  --space-7: 28px;                             /* 묶음 머리 위 · 아래 정보 위 (시안 .sh · .hft margin-top) */
  --space-4_5: 18px;                           /* 첫 화면 안내 아래 · 아래 정보 좌우 · 로고 아래 (시안 .hero · .hft · .hft-lg) */
  --space-5_5: 22px;                           /* 아래 정보 회사 정보 위 (시안 .hft-ci) */
  --layout-reco-head-pull: -7px;               /* 추천 제목을 안내에 붙임 (시안 .hlite .rec-sh) */
  --layout-reco-track-pull: -20px;             /* 추천 넘김 틀 아래 여백 줄임 (시안 .hlite .cfs) */
  --layout-reco-photo-min: 40px;               /* 추천 카드 사진 칸 최소 높이 (시안 .hlite .cfc .gph) */
  --layout-reco-foot-height: 30px;             /* 추천 카드 바닥 '물건 상세 보기' 줄 (시안 .hlite .cfc .gft) */
  --layout-footer-tail: 150px;                 /* 아래 정보 맨 아래 여백 — 떠 있는 하단 탭 뒤까지 잉크 (시안 .hft padding-bottom) */
  --space-card-inset-reco: 13px;               /* 추천 카드 안쪽 좌우 (시안 .hlite .cfc .gtop · .gbot) — 4px 단위 예외 */
  --layout-hero-min-height: 246px;             /* 첫 화면 안내 높이 (시안 .hero) */
  --layout-hero-text-width: 64%;               /* 문구 · 안내 상자 폭 (시안 .hero-tx) */
  --layout-hero-figure-size: 240px;            /* 고비 그림 높이 (시안 .hero-fig) */
  --layout-hero-figure-offset: -40px;          /* 고비 그림 오른쪽 밖으로 (시안 .hero-fig right) */
  --layout-reco-card-width: 230px;             /* 추천 카드 230 × 372 (황금비, 시안 .hlite .cfc) */
  --layout-reco-card-height: 372px;
  --layout-reco-track-height: 396px;           /* 추천 넘김 틀 높이 (시안 .hlite .cfs) */
  --layout-reco-scale-near: 0.76;              /* 옆 카드 · 바깥 카드 크기 · 기울기 (시안 10/27) */
  --layout-reco-scale-far: 0.61;
  --layout-reco-tilt-near: 14deg;
  --layout-reco-tilt-far: 17deg;
  --layout-badge-size-md: 17px;                /* 홈 머리 배지(하트 · 종) 지름 (시안 .top .hbg) */
  --layout-chart-height: 58px;                 /* 어제 낙찰 막대 가장 높은 값 (시안 .ydb .on i) */
  --layout-donut-size: 96px;                   /* 평균 낙찰가율 도넛 (시안 .ydc svg) */
  --layout-ask-avatar: 32px;                   /* 고비 추천받기 얼굴 (시안 .ask .av) */
  --layout-ask-go: 42px;                       /* 고비 추천받기 보내기 원 (시안 .askgo) */
  --layout-glass-height: 62px;                 /* 떠 있는 하단 탭 유리 막대 (시안 .gbar) */
  --layout-talk-float: 64px;                   /* 고비톡 둥근 단추 (시안 .ggt) */
  --layout-glass-gap: 10px;                    /* 유리 막대와 고비톡 단추 사이 (시안 .gfb gap) */
  --layout-glass-inset: 14px;                  /* 떠 있는 하단 탭 좌우 띄움 (시안 .gfb left · right) */

  /* 모서리 */
  --radius-bar: 5px;                           /* 막대 위 모서리 (시안 .ydb i) */
  --radius-glass: 34px;                        /* 유리 막대 (시안 .gbar) */
  --radius-glass-indicator: 26px;              /* 고른 탭 알약 (시안 .gind) */
  --radius-footer-btn: 6px;                    /* 아래 정보 제보 버튼 (시안 .hft-btn) */

  /* 그림자 · 효과 */
  --elevation-hero-box: 0 8px 18px rgba(27, 27, 30, 0.18);                                 /* 안내 상자 (시안 .hbox) */
  --elevation-reco-center: 0 14px 30px rgba(27, 27, 30, 0.2), 0 3px 8px rgba(27, 27, 30, 0.1); /* 가운데 추천 카드만 (시안 .hlite .cfc.cf-0) */
  --elevation-glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.25), 0 10px 28px rgba(27, 27, 30, 0.22);
  --elevation-glass-indicator: inset 0 1px 0 #ffffff, 0 2px 8px rgba(27, 27, 30, 0.1);
  --elevation-talk-float: inset 0 2px 1px rgba(255, 255, 255, 0.5), inset 0 -8px 14px rgba(90, 0, 0, 0.35), 0 10px 24px rgba(196, 16, 26, 0.45);
  --effect-blur-near: 3px;                     /* 옆 카드 흐림 (시안 .hlite .cfc.cf-1) */
  --effect-blur-far: 5px;                      /* 바깥 카드 흐림 (시안 .hlite .cfc.cf-2) */
  --effect-glass: blur(22px) saturate(190%);   /* 유리 뒤 흐림 (시안 .lgx backdrop-filter) */
  --effect-hero-figure-blur: 6px;              /* 그림 아래쪽 흐림 층 (시안 .hf-blur) */
  --motion-marquee-speed: 0.35;                /* 종류 골라 보기 흐름(한 화면 그리기마다 px, 시안 roll acc += .35) */
  --motion-marquee-hold: 1000ms;               /* 손을 뗀 뒤 다시 흐르기까지 (시안 hold 1초) */
}

/* 새 홈 범위: 글꼴은 모두 산세리프(시안 v19 "글꼴: 전부 산세리프 (10/26 추가 1)") — 제목 토큰을 본문 글꼴로 바꿈 */
.app:has(.app-main.home19) {
  --font-family-title: var(--font-family-base);
}

/* ---------- 로그인 · 회원가입 위쪽 (시안 J-S9 .lgp — 화면설계서 F v0.8 F-05, 2026-10-30 "로그인 창이 위의 이미지랑 합쳐져야 해") ----------
 * 새 값만 :root 에 더합니다(색은 기존 토큰 — 유리 닫기 버튼 --color-bg-glass · --color-border-glass · --elevation-glass · --effect-glass, 빨간 점 --color-brand-primary). */
:root {
  --font-size-brand-logo: 2.5rem;              /* 40px — 글자 로고 '고비.' (시안 .lgp-lg) */
  --font-tracking-brand-logo: -0.04em;         /* 글자 로고 자간 (시안 .lgp-lg) */
  --layout-auth-close: 36px;                   /* 닫기 X 유리 상자 (시안 .lgx .ic 36 × 36) — 누르는 영역은 --layout-hit-min 48 */
  --layout-auth-close-icon: 20px;              /* 닫기 X 아이콘 (시안 .ic svg) */
  --layout-auth-eye-icon: 22px;                /* (제안) 비밀번호 칸 안 보기 눈 아이콘 — 누르는 영역은 --layout-hit-min 48 (2026-10-30) */
  /* SNS 시작 버튼 브랜드 색 (시안 J-S9 · pm.css --kakao · --naver, 애플 · 구글은 시안 캡처 값 · 각 사 로그인 버튼 안내 — 2026-10-30 "보이게 설정").
   * 브랜드 버튼에만 씀. 카카오는 위 --color-kakao-bg · --color-kakao-text. 네이버 흰 글자는 초록 위 약 2.3 : 1 (브랜드 지정 색 — 화면설계서 F v0.8 결정 F-15 참고) */
  --color-naver-bg: #03c75a;
  --color-naver-text: #ffffff;
  --color-apple-bg: #000000;
  --color-apple-text: #ffffff;
  --color-google-bg: #ffffff;
  --color-google-text: #1f1f1f;
  --color-google-border: #747775;
}