/* ==========================================================================
   msg-tokens.css — MSG(Mega Star Group) 공통 디자인 토큰 (2026-10)
   회원(front)·쇼핑(outlet)·오류(error)·관리자(admin)가 모두 이 파일 하나의 값을 쓴다.
   기준: design_standards/typography.css·motion.css (연령 프로필 mid=회원, mz=관리자)

   규칙
   - 글자 크기는 5단계(cap·body·lead·h2·h1) + 큰 숫자(display) 하나. 토큰 밖 font-size 금지
   - 굵기 400·600·700 / 자간 0·-0.02em(큰 제목)·+0.08em(영문 대문자 라벨)
   - 색은 한 벌: 남색(brand) + 금색(star, 면에만) + 연한 남색 면(tint). 형광 금지
     회원·쇼핑 화면은 <html data-mood="morning"> → 아래 「아침 빛」 한 벌(첫 화면·로그인과 같은 색). 관리자·오류 화면은 남색 그대로
   - 라이트 고정: 폰이 다크 모드여도 글자가 사라지지 않게 color-scheme 을 잠근다
   ========================================================================== */

/* 글꼴 파일(@font-face)은 msg-fonts.css — 같은 폴더 */

:root {
  color-scheme: light;

  /* ---------- 글꼴 ---------- */
  /* Pretendard = 한글·영문·숫자 / Inter Cyr = 키릴(러시아어). 글자별로 자동 선택(unicode-range) */
  --ff: "Pretendard Variable", "Inter Cyr", Pretendard, -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Segoe UI", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;

  /* ---------- 글자 크기 (mz 값이 기본, 회원 화면은 data-age=mid) ---------- */
  --fs-scale: 1;
  --fs-cap-raw:     0.8125rem;                                         /* 13 */
  --fs-body-raw:    0.9375rem;                                         /* 15 */
  --fs-lead-raw:    1.0625rem;                                         /* 17 */
  --fs-h2-raw:      clamp(1.25rem, 1.1571rem + 0.3810vw, 1.5rem);      /* 20 → 24 */
  --fs-h1-raw:      clamp(1.75rem, 1.5643rem + 0.7619vw, 2.25rem);     /* 28 → 36 */
  --fs-display-raw: clamp(2rem, 1.6286rem + 1.5238vw, 3rem);           /* 32 → 48 : 지갑 큰 숫자 */

  --fw-body: 400;
  --fw-strong: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.6;
  --lh-long: 1.7;

  --ls-0: 0;
  --ls-title: -0.02em;
  --ls-caps: 0.08em;

  /* ---------- 색 : 한 벌 ---------- */
  --brand: #2B3990;          /* 남색. 단추·강조 글자·링크 (흰 바탕 대비 10:1) */
  --brand-ink: #172054;      /* 가장 짙은 남색: 제목 위 강조·어두운 면 */
  --brand-2: #3F50B5;        /* 눌림·호버 */
  --tint: #EEF0FA;           /* 큰 면은 이 연한 남색으로 */
  --tint-2: #F6F7FD;         /* 더 연한 면 */
  --tint-line: #D5DAF0;      /* 연한 남색 면 위 선 */
  --tint-3: #E1E6F8;         /* 큰 면 그라데이션 끝 (지갑 카드·제목 띠) */
  --star: #E0A526;           /* 금색: 별·점·가는 선. 글자색으로 쓰지 않음 */
  --star-text: #7A4F00;      /* 금색 계열 글자 (연한 금색 면 위 6:1 이상) */
  --star-tint: #FBF1D9;
  --ok: #0F766E;
  --danger: #B42318;
  --on-brand: #FFFFFF;
  --link: var(--brand);

  --bg: #FFFFFF;
  --surface: #F5F6FA;        /* 페이지 바탕 */
  --card: #FFFFFF;
  --text-1: #1D1D1F;
  --text-2: #5C5C61;
  --text-3: #6E6E73;
  --text-disabled: #A1A1A6;
  --line: #E4E6EE;

  /* ---------- 간격·모서리·그림자·크기 ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;  --sp-8: 72px;
  --r-sm: 8px;  --r-md: 14px; --r-lg: 22px;  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(23, 32, 84, .06), 0 1px 3px rgba(23, 32, 84, .06);
  --sh-2: 0 4px 12px rgba(23, 32, 84, .08), 0 12px 32px rgba(23, 32, 84, .08);
  --sh-3: 0 12px 28px rgba(23, 32, 84, .16), 0 32px 64px rgba(23, 32, 84, .16);
  --touch: 44px;
  --page-w: 1120px;
  --gutter: 16px;

  /* ---------- 동작 (motion.css 값) ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-ui: 200ms;
  --dur-panel: 320ms;
  --focus-ring: var(--brand);

  /* ---------- 최종 크기 = 원값 × 배율 ---------- */
  --fs-cap: calc(var(--fs-cap-raw) * var(--fs-scale));
  --fs-body: calc(var(--fs-body-raw) * var(--fs-scale));
  --fs-lead: calc(var(--fs-lead-raw) * var(--fs-scale));
  --fs-h2: calc(var(--fs-h2-raw) * var(--fs-scale));
  --fs-h1: calc(var(--fs-h1-raw) * var(--fs-scale));
  --fs-display: calc(var(--fs-display-raw) * var(--fs-scale));
}

/* 회원(중장년 중심) : 본문 17, 보조색 7:1 근처, 터치 48 */
:root[data-age="mid"] {
  --fs-cap-raw: 0.875rem;                                          /* 14 */
  --fs-body-raw: 1.0625rem;                                        /* 17 */
  --fs-lead-raw: 1.1875rem;                                        /* 19 */
  --fs-h2-raw: clamp(1.375rem, 1.2821rem + 0.3810vw, 1.625rem);    /* 22 → 26 */
  --lh-tight: 1.25; --lh-snug: 1.45; --lh-body: 1.65; --lh-long: 1.75;
  --text-2: #515154;
  --text-3: #5C5C61;
  --touch: 48px;
  --gutter: 16px;
}

/* 큰 화면 */
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}

:root[data-text="lg"] { --fs-scale: 1.2; }
:root[data-text="xl"] { --fs-scale: 1.4; }

/* 아침 빛 : 회원·쇼핑 화면 (2026-10-21). 첫 화면 그림에서 뽑은 한 벌 = 로그인(front/css/style.css 11)과 같은 값.
   벽 #ECE5DB · 종이 #FFFDF8 · 먹 #3F3D37 · 올리브 #344A3E. 금색 별(--star)은 그대로.
   올리브는 누르는 것(단추·링크·아이콘 원)에만, 제목·어둠막은 먹(--brand-ink).
   대비(종이 위) : 먹 10.7 · 먹2 8.6 · 먹3 6.7 · 올리브 글자 9.4 · 제목 먹 12.8 · 단추 글자/올리브 9.4 · 입력 테두리 4.0
   data-age="mid" 보다 뒤에 둔다(같은 무게라 뒤가 이김 : --text-2·--text-3) */
:root[data-mood="morning"] {
  --brand: #344A3E; --brand-ink: #33312B; --brand-2: #3F5A4B; --on-brand: #FFFDF4;
  --tint: #EFE9DF; --tint-2: #F6F2EA; --tint-3: #E6DCCD; --tint-line: #DCD3C5;
  --bg: #FFFDF8; --surface: #ECE5DB; --card: #FFFDF8; --line: #E3DBCE;
  --text-1: #3F3D37; --text-2: #4E4B43; --text-3: #5F5A51; --text-disabled: #A39D92;
  --field-line: #857E72; --field-ring: rgba(52, 74, 62, .2);
  --sh-1: 0 1px 2px rgba(52, 46, 36, .06), 0 1px 3px rgba(52, 46, 36, .06);
  --sh-2: 0 4px 12px rgba(52, 46, 36, .06), 0 18px 44px rgba(52, 46, 36, .12);
  --sh-3: 0 12px 28px rgba(52, 46, 36, .16), 0 32px 64px rgba(52, 46, 36, .16);
}

/* ---------- 바탕 글자 ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--ff);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-0);
  color: var(--text-1);
  word-break: keep-all;              /* 한글·키릴은 낱말 단위로만 줄바꿈 */
  overflow-wrap: break-word;         /* 칸보다 긴 낱말만 예외로 끊음 */
  hyphens: manual;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-autospace: no-autospace;
  font-optical-sizing: auto;
}

/* ---------- 페이지 사이 이동 : 지원하는 브라우저에서만 부드럽게, 아니면 그냥 이동 ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--dur-panel);
  animation-timing-function: var(--ease-out);
}

/* ---------- 스크롤 등장 : 지원하는 브라우저에서만 숨겼다 보여 줌. 미지원이면 처음부터 보임 ---------- */
@keyframes msg-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .msg-reveal {
      animation: msg-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* 기기 설정이 「동작 줄이기」면 화면 전환·메뉴 움직임을 끈다.
   첫 화면(intro.htm 의 <html data-motion="own">)은 뺀다 — 그림 속 바람·빛은 그 화면의 「움직임 줄이기」 단추로만 끈다 */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="own"]) *, :root:not([data-motion="own"]) *::before, :root:not([data-motion="own"]) *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 로고 이미지 공통: width/height 속성 + 비율 유지 */
.msg-logo { display: block; height: auto; max-width: 100%; }

/* 폰 아래 탭바 — PC 메뉴와 같은 여섯 곳(홈·아울렛·지갑·선물·활동정보·내정보)을 엄지 닿는 자리에. 1024px 이상에서는 숨김 */
.msg_tabbar { display: none; }
@media (max-width: 1023.98px) {
  .msg_tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(6, 1fr);
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom)); background: var(--card, #fff); background: color-mix(in srgb, var(--card, #fff) 90%, transparent);
    backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--line, #E3E5EE); box-shadow: 0 -6px 24px rgba(23, 32, 84, .06);
  }
  .msg_tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; padding: 4px 0; border-radius: 12px;
    color: var(--text-2, #5C5C61); font-size: min(11px, 2.75vw); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
    word-break: keep-all; overflow-wrap: anywhere;
  }
  .msg_tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .msg_tabbar span { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .msg_tabbar a[aria-current="page"] { color: var(--brand, #2B3990); }
  .msg_tabbar a[aria-current="page"] svg { stroke-width: 2.2; }
  .msg_tabbar a[aria-current="page"]::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--star, #E0A526); }
  .msg_tabbar a:active { background: var(--tint, #EEF0FA); }
  html.has_tabbar body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}