/*
 * 사이트 공용 디자인 값(2026-10-16).
 * 서비스 공용 상단(service-shell.css)과 홈(portal.css)이 같은 상단 바를 쓰도록 값을 한곳에 둔다.
 * 값을 바꿀 때는 여기만 고친다.
 */
:root {
  /* 상단 바: 흐림을 지원하지 않는 브라우저용 불투명 배경 */
  --umsh-appbar-bg: rgba(8, 8, 7, 0.96);
  /* 상단 바: 반투명 유리(글라스모피즘) */
  --umsh-appbar-glass-bg: rgba(8, 8, 7, 0.42);
  --umsh-appbar-glass-filter: blur(18px) saturate(140%);

  /* 홈 상단 아이콘(검색·내 정보). 원래 값 그대로. */
  --umsh-appbar-icon-size: 22px;
  --umsh-appbar-icon-stroke: 1.7;
  --umsh-appbar-icon-color: #f7f2e9;
  /* 서비스 화면: 뒤로 버튼과 로고 사이 */
  --umsh-appbar-lead-gap: 2px;
  /* 서비스 화면 뒤로 화살표: 그림 왼쪽의 빈 칸(24칸 중 9칸 → 20px 아이콘에서 약 7px)만큼 당겨 화살표 선이 왼쪽 여백 선에 닿게 */
  --umsh-appbar-back-nudge: -7px;
  /* 로고 줄 좌우 여백과 같은 값. 분류 줄 첫 버튼이 로고와 같은 선에 선다. */
  --umsh-appbar-gutter: 20px;
  /* 로고 줄 위·아래 여백과 칸 사이(홈·서비스 화면 공용) */
  --umsh-appbar-pad-top: 12px;
  --umsh-appbar-pad-bottom: 12px;
  --umsh-appbar-pad: var(--umsh-appbar-pad-top) var(--umsh-appbar-gutter) var(--umsh-appbar-pad-bottom);
  --umsh-appbar-gap: 14px;
  /* 로고 줄 버튼(아이콘) 상자와 로고 크기. 홈·서비스 화면이 같은 값이라 로고 줄 높이가 같다. */
  --umsh-appbar-button: 38px;
  --umsh-appbar-logo-w: 106px;
  --umsh-appbar-logo-h: 40px;
  /* 로고 그림 안 글자가 위로 치우쳐 있다(위 빈 칸 20%, 아래 24%). 그 차이의 절반(높이의 2%)만큼 내려 글자가 정가운데에 서게 한다. */
  --umsh-appbar-logo-optical-y: calc(var(--umsh-appbar-logo-h) * 0.02);

  /* 분류 줄과 분류 버튼 */
  --umsh-rail-pad: 8px 0 10px var(--umsh-appbar-gutter);
  --umsh-chip-gap: 4px;
  --umsh-chip-pad: 9px 14px;
  --umsh-chip-radius: 24px;
  --umsh-chip-font-size: var(--umsh-text-body, 15px);
  --umsh-chip-line-height: 14px;
  --umsh-chip-tracking: -0.025em;
  --umsh-chip-weight: 400;
  --umsh-chip-active-weight: 600;
  --umsh-chip-text: #fff;
  /* 선택된 버튼만 반투명 유리 알약 */
  --umsh-chip-active-bg: radial-gradient(100% 125% at 50% 120%, rgb(255 255 255 / 0.42) 0%, rgb(255 255 255 / 0) 92%);
  --umsh-chip-active-border: rgb(172 172 178 / 0.71);
  --umsh-chip-active-filter: blur(3px);

  /* 모서리 단계(2026-10-23). 숫자 대신 이 이름을 쓴다. 사각 버튼·입력칸은 sm(8), 카드는 md(12), 시트·큰 그림은 lg(16), 둥근 칩·막대는 full. */
  --umsh-radius-xs: 4px;
  --umsh-radius-sm: 8px;
  --umsh-radius-md: 12px;
  --umsh-radius-lg: 16px;
  --umsh-radius-full: 999px;
  --umsh-radius-button: var(--umsh-radius-sm);
  --umsh-radius-field: var(--umsh-radius-sm);
  /* 입력 폼 안 선택 버튼(성별·양음력·시간 모름): 옆 입력칸과 같은 모서리(2026-10-27 사용자 결정). 질문 칩·홈 분류 칩은 --umsh-chip-radius(알약). */
  --umsh-choice-radius: var(--umsh-radius-field);
  --umsh-radius-card: var(--umsh-radius-md);
  /* 어두운 화면 입력칸(2026-10-24): /profile·쿠폰·/payment 와 같은 값. 결제 시트도 이걸 쓴다. */
  --umsh-field-bg: #080807;
  --umsh-field-border: rgba(255, 247, 223, .14);
  --umsh-field-ink: #f6ead6;

  /*
   * 바텀시트(2026-10-24 사용자 결정 "추천하는 방식으로"): 검정 유리. 하단 메뉴 유리와 같은 계열이되 진하게 막아 글자가 읽힌다.
   * 결제·로그인 시트가 같은 값을 쓴다(공용 틀 js/umsh-sheet.js). 테두리 대신 위쪽 빛 한 줄로 가장자리.
   */
  --umsh-sheet-bg: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 120px), rgb(12 12 11 / 0.86);
  --umsh-sheet-fallback: rgb(12 12 11 / 0.98);
  --umsh-sheet-filter: blur(24px) saturate(160%);
  --umsh-sheet-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 -16px 40px rgb(0 0 0 / 0.5);
  --umsh-sheet-backdrop: rgb(0 0 0 / 0.5);
  --umsh-sheet-ink: #f6ead6;
  --umsh-sheet-muted: rgb(246 234 214 / 0.62);
  --umsh-sheet-line: rgb(255 255 255 / 0.08);
  --umsh-sheet-faint: rgb(246 234 214 / 0.4); /* 칸 안내 글자·지운 가격·빈 칸 */
  --umsh-sheet-press: rgb(255 255 255 / 0.08); /* 줄을 누르거나 올렸을 때 */
  --umsh-sheet-handle: rgb(255 255 255 / 0.22); /* 시트 손잡이 막대 */
  /* 강조색은 금색 하나(주 버튼). 할인 금액만 붉은색. */
  --umsh-cta-bg: #d6b26e;
  --umsh-cta-ink: #15100d;
  --umsh-sale: #ff8a7a;

  /*
   * 글자 기준표(2026-10-20 디자인 시스템 1단계). 화면 CSS 는 숫자 대신 이 이름을 쓴다.
   * 굵기 4단계: 본문 400 · 강조 500 · 소제목 600 · 제목 700 (예전 21가지 → 4가지).
   * 크기 10단계(2026-10-20 사용자 결정, 애플·구글·토스처럼 가장 작은 글씨 11·본문 15 포함):
   * 11 · 12 · 13 · 14 · 15 · 16 · 18 · 20 · 24 · 28. 29px 이상 큰 제목·장식은 아직 따로 둔다(다음 단계).
   */
  --umsh-weight-regular: 400;
  --umsh-weight-medium: 500;
  --umsh-weight-semibold: 600;
  --umsh-weight-bold: 700;
  /* 2026-10-23 홈 대표 카드 제목처럼 크게 보이는 한 줄 전용(본문·버튼에는 쓰지 않는다) */
  --umsh-weight-display: 900;
  --umsh-text-2xs: 11px;
  --umsh-text-xs: 12px;
  --umsh-text-sm: 13px;
  --umsh-text-md: 14px;
  --umsh-text-body: 15px;
  --umsh-text-base: 16px;
  --umsh-text-lg: 18px;
  --umsh-text-xl: 20px;
  --umsh-text-2xl: 24px;
  --umsh-text-3xl: 28px;
  --umsh-leading-tight: 1.3;
  --umsh-leading-body: 1.6;

  /* 레이아웃 간격(2026-10-20 요청: 보통 서비스 간격, 8px 격자). 화면 좌우 20 · 섹션 사이 40 · 제목→내용 12 · 카드 사이 12 */
  --umsh-space-gutter: 20px;
  --umsh-space-section: 40px;
  --umsh-space-title: 12px;
  --umsh-space-card-gap: 12px;

  /* 홈 섹션 제목(오늘의 운명점 등): 보통 서비스처럼 굵게(700)·자간 살짝 좁게. 900은 너무 굵었다(2026-10-20 요청). */
  --umsh-section-title-weight: var(--umsh-weight-bold);
  --umsh-section-title-tracking: -0.02em;

  /* 하단 메뉴(인스타 스타일, 2026-10-20): 아이콘 크게(Phosphor 한 벌)·선택은 꽉 찬 아이콘, 작은 글자는 남김. 금색 윗줄 없음. */
  --umsh-tab-icon-size: 26px;
  --umsh-tab-gap: 3px;
  --umsh-tab-label-size: 10px;
  --umsh-tab-label-weight: 500;
  --umsh-tab-label-active-weight: 700;
  --umsh-tab-color: rgb(247 242 233 / 0.62);
  --umsh-tab-active: #f7f2e9;
  --umsh-tab-hover-bg: transparent; /* 호버는 배경 없이 아이콘만 꽉 찬 모양으로(2026-10-20 요청) */
  /* 떠 있는 둥근 유리 막대(인스타 스타일): 화면 아래에서 띄우고 양옆을 비운다. 내용이 막대 뒤로 흐리게 지나간다. */
  --umsh-tab-bar-h: 62px;
  --umsh-tab-float-side: 20px; /* 2026-10-20 요청: 홈 카드 좌우 여백(20px)과 같은 폭 */
  --umsh-tab-float-bottom: 10px;
  --umsh-tab-bar-radius: 999px;
  --umsh-tab-bar-pad: 5px;
  /* 2026-10-23 요청 '글라스 효과': 밝은 반투명 결 + 어두운 바탕 한 겹(글자 대비 유지) */
  --umsh-tab-glass-bg: linear-gradient(160deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.05) 55%, rgb(255 255 255 / 0.1)), rgb(30 29 27 / 0.3);
  --umsh-tab-glass-fallback: rgb(16 15 14 / 0.94);
  --umsh-tab-glass-filter: blur(24px) saturate(180%) brightness(1.05);
  /* 막대 전체 테두리(2026-10-20 요청). 흰색이면 위쪽만 줄처럼 떠 보여서 회색빛으로 옅게, 네 변 같게. */
  --umsh-tab-glass-border: transparent; /* 2026-10-23 요청: 테두리 없이, 빛 반사(그림자 안쪽 줄)로만 가장자리 */
  --umsh-tab-glass-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 -1px 0 rgb(255 255 255 / 0.08), 0 12px 32px rgb(0 0 0 / 0.45);
  /* 선택된 칸은 반투명 알약 한 색, 테두리 없음(2026-10-20 요청) */
  --umsh-tab-active-bg: rgb(255 255 255 / 0.14); /* 그라데이션 없이 한 색(2026-10-20 요청) */
  --umsh-tab-active-border: transparent;
  /* 아래로 스크롤하면 작아지는 막대(글자 숨김·폭 좁힘), 위로 스크롤하면 원래대로 */
  --umsh-tab-bar-h-compact: 48px;
  --umsh-tab-icon-size-compact: 23px;
  --umsh-tab-float-side-compact: 44px;
  --umsh-tab-compact-time: 0.28s;
  /* 막대 높이 + 띄운 거리: 내용 아래 여백 계산용 */
  --umsh-tab-space: calc(var(--umsh-tab-bar-h) + var(--umsh-tab-float-bottom) + env(safe-area-inset-bottom, 0px));
}

/* 좁은 화면은 로고 줄 좌우 여백이 14px(portal.css·service-shell.css 의 520px 규칙)이라 같이 줄인다. */
@media (max-width: 520px) {
  :root {
    --umsh-appbar-gutter: 14px;
    --umsh-appbar-pad-top: 7px;
    --umsh-appbar-pad-bottom: 6px;
    --umsh-appbar-gap: 10px;
    --umsh-appbar-button: 32px;
    --umsh-appbar-logo-w: 90px;
    --umsh-appbar-logo-h: 32px;
  }
}

@media (max-width: 360px) {
  :root {
    --umsh-appbar-button: 29px;
    --umsh-appbar-logo-w: 80px;
    --umsh-appbar-logo-h: 29px;
  }
}

/*
 * 호버·선택(포커스) 때 버튼과 링크에 생기던 금색 외곽선을 사이트 전체에서 없앤다(2026-10-16 요청).
 * 페이지마다 따로 둔 외곽선 규칙(50여 곳, 호버에 거는 것도 있음)을 하나씩 고치지 않고 여기 한 곳에서 끈다.
 * 이 파일은 서비스 공용 상단(service-shell.css)과 홈(portal.css)이 불러와 모든 화면에 적용된다.
 */
:where(*):hover,
:where(*):focus,
:where(*):focus-visible {
  outline: none !important;
}

/* 2026-10-23 요청 "스크롤 전부 안 튀게 공용으로": 모든 스크롤 칸의 막대를 가늘고 옅게(위아래 화살표 없음). 값은 아래 이름 하나로 바꾼다. */
:root {
  --umsh-scrollbar-thumb: rgb(247 242 233 / 0.18);
  --umsh-scrollbar-width: 4px;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--umsh-scrollbar-thumb) transparent;
}
::-webkit-scrollbar { width: var(--umsh-scrollbar-width); height: var(--umsh-scrollbar-width); }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: var(--umsh-scrollbar-width); background: var(--umsh-scrollbar-thumb); }