/* ═══════════════════════════════════════════════════════
   운하명리 — 수묵 공통 껍데기 (2026-09-29)
   ─────────────────────────────────────────────────────
   첫 화면(landing-ink.css)의 디자인을 모든 메뉴의 기준으로 삼는다.
   메뉴마다 달라지는 것은 "동작(motion)"뿐이고, 머리말·색·글꼴·버튼은 어디서나 같다.

   사용: 각 페이지 <head> 의 마지막 스타일로 넣는다(페이지 자체 <style> 뒤).
     <link rel="stylesheet" href="/una-ink-shell.css">
     <script defer src="/una-ink-shell.js"></script>
   그리고 <body> 에 class="una-ink" 와 data-menu="app|tarot|pungsu|gwansang|me|academy|board|redeem".

   1) 색·글꼴 토큰: 페이지들이 함께 쓰는 변수(--paper, --ink, --gold …)를 수묵 값으로 덮는다.
   2) 공통 머리말: .ul-header (첫 화면과 같은 마크업)
   3) 메뉴별 동작 자리: .ux-motion (영상은 /assets/menu-motion/manifest.json 에 있을 때만 불러온다)
   ═══════════════════════════════════════════════════════ */

/* ── 1) 토큰 ── html:root 로 페이지의 :root 선언보다 우선한다 */
html:root {
  --ul-paper: #e9e6de;
  --ul-raised: #f3f1eb;
  --ul-ink: #17191c;
  --ul-muted: #5f636a;
  --ul-line: rgba(23, 25, 28, .17);
  --ul-blue: #1f3a5f;
  --ul-sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --ul-serif: 'Noto Serif KR', serif;

  --paper: #e9e6de;
  --paper-soft: #f3f1eb;
  --paper-warm: #f3f1eb;
  --paper-deep: #dedad0;
  --surface: #f3f1eb;
  --ink: #17191c;
  --ink-soft: #3a3e45;
  --ink-mute: #5f636a;
  --mute: #5f636a;
  --line: rgba(23, 25, 28, .17);
  --line-soft: rgba(23, 25, 28, .10);
  /* 예전 금색 강조는 남색으로. 어두운 바탕 위에서도 읽히도록 soft 는 밝은 청회색 */
  --gold: #1f3a5f;
  --gold-deep: #152a47;
  --gold-soft: #8fa3bd;
  --sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Noto Serif KR', serif;
  --serif-kr: 'Noto Serif KR', serif;
  --batang: 'Noto Serif KR', serif;
  /* 영문 장식 글꼴(Cormorant)에는 한글이 없다 — 한글은 시스템 명조가 아니라 Noto Serif KR 로 (2026-10-04 UI 점검) */
  --serif-en: 'Cormorant Garamond', 'Noto Serif KR', serif;
}

body.una-ink {
  background: var(--ul-paper);
  isolation: isolate;
  color: var(--ul-ink);
  font-family: var(--ul-sans);
  -webkit-font-smoothing: antialiased;
}
/* 한글에 가짜 기울임을 만들지 않는다(기울임 꼴이 없는 한글 글꼴은 바로 선 채로) */
body.una-ink { font-synthesis-style: none; }
body.una-ink h1, body.una-ink h2 { font-family: var(--ul-serif); font-weight: 400; letter-spacing: -.045em; word-break: keep-all; }
body.una-ink :focus-visible { outline: 2px solid var(--ul-blue); outline-offset: 4px; }

/* ── 2) 공통 머리말 (첫 화면과 같은 값) ── */
.ul-skip { position: fixed; left: 20px; top: -90px; z-index: 1000; padding: 10px 20px; background: var(--ul-raised); color: var(--ul-ink); }
.ul-skip:focus { top: 12px; }
.ul-header { min-height: 78px; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--ul-line); position: relative; z-index: 60; background: var(--ul-paper); color: var(--ul-ink); font-family: var(--ul-sans); font-size: 16px; line-height: 1.8; box-sizing: border-box; }
/* 모바일 보조 스타일(una-mobile-enhance.css)의 최소 크기가 머리말 높이를 키우지 않게 */
.ul-header a, .ul-header summary { min-height: 0; min-width: 0; }
.ul-header a { color: inherit; text-decoration: none; }
.ul-brand { display: inline-flex; align-items: baseline; gap: 14px; font-family: var(--ul-serif); font-size: 24px; font-weight: 500; letter-spacing: -.05em; white-space: nowrap; }
.ul-brand span { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; font-weight: 500; letter-spacing: .16em; color: var(--ul-muted); }
.ul-desktop-nav { display: flex; gap: 28px; align-items: center; font-size: 14px; position: static; min-height: 0; padding: 0; background: none; border: 0; backdrop-filter: none; }
.ul-desktop-nav a { padding-block: 8px; }
.ul-desktop-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.ul-desktop-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.ul-nav-account { border-left: 1px solid var(--ul-line); padding-left: 26px; }
.ul-nav-account span { margin-left: 8px; }
/* 로그인·토큰처럼 페이지마다 필요한 도구 자리 */
.ul-header-tools { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.ul-mobile-menu { display: none; }
.ul-mobile-menu summary::-webkit-details-marker { display: none; }
.ul-mobile-menu summary { white-space: nowrap; }
.ul-mobile-menu nav { position: static; min-height: 0; background: none; border: 0; backdrop-filter: none; }

@media (max-width: 900px) {
  .ul-header { min-height: 70px; padding: 13px 25px; gap: 12px; }
  .ul-desktop-nav { display: none; }
  .ul-mobile-menu { display: block; }
  .ul-mobile-menu summary { list-style: none; cursor: pointer; padding: 10px 0 10px 12px; font-size: 13px; }
  .ul-mobile-menu summary > span { margin-left: 12px; display: inline-block; }
  .ul-mobile-menu[open] summary > span { transform: rotate(45deg); }
  .ul-mobile-menu nav { position: absolute; top: 100%; left: 0; right: 0; padding: 14px 25px 24px; display: grid; gap: 1px; background: var(--ul-raised); border-bottom: 1px solid var(--ul-line); box-shadow: 0 18px 30px #17191c0a; }
  .ul-mobile-menu nav a { padding: 11px 0; border-bottom: 1px solid var(--ul-line); font-size: 14px; }
  .ul-mobile-menu nav a span { float: right; }
  .ul-mobile-menu nav a[aria-current="page"] { color: var(--ul-blue); }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .ul-header { padding-inline: 30px; }
  .ul-desktop-nav { gap: 20px; font-size: 13px; }
}
/* 첫 화면(landing-ink.css)과 같은 값 */
@media (max-width: 700px) {
  .ul-header { min-height: 66px; padding: 10px 22px; }
  .ul-brand { font-size: 21px; gap: 11px; }
  .ul-brand span { font-size: 12px; }
}
@media (max-width: 380px) {
  .ul-header { padding-inline: 18px; }
}

/* ── 공통 버튼·머리글 조각 (첫 화면과 같은 모양) ── */
.ux-eyebrow { display: flex; gap: 13px; align-items: center; font-family: var(--ul-sans); font-size: 11px; letter-spacing: .15em; color: var(--ul-muted); margin: 0 0 22px; }
.ux-eyebrow > span { width: 26px; border-top: 1px solid currentColor; }
.ux-button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; min-height: 53px; padding: 13px 25px; background: var(--ul-ink); color: var(--ul-raised); border: 1px solid var(--ul-ink); border-radius: 0; font-family: var(--ul-sans); font-size: 15px; line-height: 1.4; cursor: pointer; text-decoration: none; }
.ux-button:hover { background: var(--ul-blue); border-color: var(--ul-blue); }
.ux-button--blue { background: var(--ul-blue); border-color: var(--ul-blue); }

/* ── 3) 메뉴별 화면 고정 배경 ──
   유효한 영상·그림이 있을 때 JS가 body 바로 아래로 옮긴다. 내용과 따로 스크롤되지 않는다. */
.ux-hero { position: relative; isolation: isolate; border-bottom: 1px solid var(--ul-line); }
.ux-motion { position: fixed; inset: 0; overflow: hidden; z-index: -1; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.ux-motion.is-ready { opacity: .22; }
.ux-motion video, .ux-motion img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; display: block; }
.ux-motion-control { position: fixed; left: calc(18px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ul-line); background: rgba(243, 241, 235, .94); color: var(--ul-muted); font-family: var(--ul-sans); font-size: 11px; line-height: 1.4; cursor: pointer; }
.ux-motion-control[hidden] { display: none; }
/* 머리글 안에 있을 때는 머리글 오른쪽 아래에 붙는다(아래 내용과 겹치지 않게) */
.ux-hero > .ux-motion-control { position: absolute; left: auto; right: 16px; bottom: 12px; z-index: 2; min-height: 36px; padding: 6px 12px; }
@media (max-width: 480px) {
  /* 기존 하단 탭바가 있는 페이지에서는 버튼을 탭바 위에 둔다. */
  .ux-motion-control { bottom: calc(16px + var(--una-tabbar-h, 0px) + env(safe-area-inset-bottom, 0px)); }
}
/* 앱의 밝은 전체 구역만 투명하게 한다. 카드·입력칸과 어두운 소개/가격 구역은 유지한다. */
body.una-ink.has-ux-motion[data-menu="app"] .hero-bold::before,
body.una-ink.has-ux-motion[data-menu="app"] .hero-bold::after,
body.una-ink.has-ux-motion[data-menu="app"] .philosophy,
body.una-ink.has-ux-motion[data-menu="app"] .wsh-section,
body.una-ink.has-ux-motion[data-menu="app"] .dual-map-show,
body.una-ink.has-ux-motion[data-menu="app"] #tarot { background: transparent; }
body.una-ink.has-ux-motion[data-menu="app"] #book { background: transparent !important; }
/* 영상이 오기 전: 정지 그림을 아주 천천히 움직인다(먹이 번지듯). 영상에는 적용하지 않는다. */
.ux-motion img { transform-origin: 60% 40%; animation: ux-drift 48s ease-in-out infinite alternate; will-change: transform; }
@keyframes ux-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-2.2%, -1.4%, 0); }
}
/* 어두운 그림(타로의 밤하늘)은 글자를 가리지 않게 더 옅게 */
body[data-menu="tarot"] .ux-motion.is-ready { opacity: .2; }
@media (prefers-reduced-motion: reduce) {
  .ux-motion { transition: none; }
  .ux-motion img { animation: none; }
}
@media print {
  .ul-header, .ux-motion, .ux-motion-control { display: none !important; }
}

/* ═══════════════════════════════════════════════════════
   4) 화면 다듬기 — 전 페이지 글꼴·UI 점검(2026-10-04)에서 찾은 것
   페이지 파일을 고치지 않고 여기서 덮어쓴다(열린 작업 PR 들과 겹치지 않게).
   ═══════════════════════════════════════════════════════ */

/* ── 공통 입력 요소: 각진 모서리, 같은 강조색 ── */
body.una-ink select { border-radius: 0; }
body.una-ink input[type="checkbox"], body.una-ink input[type="radio"] { accent-color: var(--ul-ink); }

/* ── 본관(/app): 첫 화면과 같은 말투 ── */
body.una-ink[data-menu="app"] .hero-bold-h1 { text-align: left; }
body.una-ink[data-menu="app"] .hero-astro-badge { border-color: var(--ul-line); color: var(--ul-muted); letter-spacing: .12em; }
/* 안내·자리표시 글자: 기울인 영문 명조 → 바로 선 본문 글꼴 */
body.una-ink[data-menu="app"] .field-hint,
body.una-ink[data-menu="app"] .submit-note,
body.una-ink[data-menu="app"] .toggle-option .label-en { font-family: var(--ul-sans); font-style: normal; letter-spacing: 0; }
body.una-ink[data-menu="app"] .text-input::placeholder { font-family: var(--ul-sans); font-style: normal; font-size: 18px; }
body.una-ink[data-menu="app"] .submit-note { word-break: keep-all; }
body.una-ink[data-menu="app"] .submit-note a { color: var(--ul-blue); text-decoration: underline; text-decoration-color: var(--ul-line); text-underline-offset: 4px; }
/* 주 버튼: 입력이 덜 됐어도 흐리게 만들지 않는다(안내 문구로 알린다), 첫 화면 버튼 크기 */
body.una-ink[data-menu="app"] .btn-submit { font-size: 15px; letter-spacing: 0; text-transform: none; padding: 16px 28px; min-height: 53px; }
body.una-ink[data-menu="app"] .btn-submit.is-incomplete { opacity: 1; }
body.una-ink[data-menu="app"] .btn-submit.is-incomplete:hover { background: var(--ul-blue); border-color: var(--ul-blue); }
/* 생년월일 ▲▼: 본문 글꼴의 각진 선 버튼 */
body.una-ink[data-menu="app"] .date-step-btn { border-radius: 0; color: var(--ul-ink); font-family: var(--ul-sans); font-size: 9px; background: var(--ul-raised); border-color: var(--ul-line); }
body.una-ink[data-menu="app"] .date-step-btn:hover { background: var(--ul-paper); }
body.una-ink[data-menu="app"] .toggle-option, body.una-ink[data-menu="app"] .gender-option { font-family: var(--ul-sans); color: var(--ul-ink); }
/* 머리글(eyebrow): 첫 화면처럼 .15em 간격, 회색 */
body.una-ink[data-menu="app"] .section-eyebrow { letter-spacing: .15em; color: var(--ul-muted); }
/* 어두운 구역(명리사 소개·요금제)에서는 밝은 회청색으로 읽히게 */
body.una-ink[data-menu="app"] :is(.author-intro, .pricing, footer) .section-eyebrow { color: #a9b6c7; }
/* 영문 기울임 강조 → 바로 선 남색 */
body.una-ink[data-menu="app"] .section-title .em,
body.una-ink[data-menu="app"] .section-title .su-em,
body.una-ink[data-menu="app"] .final-cta h2 .su-em,
body.una-ink[data-menu="app"] .feature-title .accent,
body.una-ink[data-menu="app"] .feature-title .su-accent { font-family: var(--ul-serif); font-style: normal; color: var(--ul-blue); }
/* 기능 제목: 휴대폰에서 큰 제목보다 작게, 조사만 따로 떨어지지 않게 */
body.una-ink[data-menu="app"] .feature-title { font-size: clamp(26px, 6.4vw, 42px); word-break: keep-all; }
/* 요금제 냥 숫자: 키가 고른 숫자, '냥' 글자는 바로 선 본문 글꼴 */
body.una-ink[data-menu="app"] .tier-tokens { font-family: var(--ul-sans); font-style: normal; font-variant-numeric: lining-nums tabular-nums; }
body.una-ink[data-menu="app"] .tier-price, body.una-ink[data-menu="app"] .pricing-bonus { font-variant-numeric: lining-nums tabular-nums; }
/* 휴대폰 머리말 '로그인' 글자(10px → 12px) */
@media (max-width: 900px) { body.una-ink[data-menu="app"] #navLoginBtn { font-size: 12px; } }
/* 만세력: 알약 모양 → 각진 선 */
body.una-ink[data-menu="app"] .fc-select, body.una-ink[data-menu="app"] .fc-nav, body.una-ink[data-menu="app"] .fc-han { border-radius: 0; }
body.una-ink[data-menu="app"] .fc-select, body.una-ink[data-menu="app"] .fc-nav { background: var(--ul-raised); font-family: var(--ul-sans); }
/* 그날·궁합 시작 버튼의 그림자·떠오름 제거 */
body.una-ink[data-menu="app"] .gunghap-cta { box-shadow: none; }
body.una-ink[data-menu="app"] .gunghap-cta:hover { transform: none; box-shadow: none; }

/* ── 본관 창(로그인·운세·소망·꿈·그날·궁합) ── */
body.una-ink .wsh-overlay { background: rgba(23, 25, 28, .55); }
body.una-ink .wsh-modal { box-shadow: 0 24px 60px rgba(23, 25, 28, .18); }
body.una-ink .wsh-close { border-radius: 0; font-family: var(--ul-sans); font-size: 16px; line-height: 1; color: var(--ul-ink); border-color: var(--ul-line); }
body.una-ink .wsh-close:hover { background: var(--ul-ink); color: var(--ul-raised); border-color: var(--ul-ink); }
body.una-ink .wsh-overline { font-family: var(--ul-sans); font-style: normal; font-size: 11px; letter-spacing: .15em; color: var(--ul-muted); }
body.una-ink .wsh-action-btn { font-family: var(--ul-sans); font-size: 14px; letter-spacing: 0; text-transform: none; justify-content: center; }
/* 로그인/회원가입 탭: 고른 쪽이 먹색으로 채워진다(고르지 않은 쪽은 .wsh-action-secondary) */
body.una-ink .wsh-action-btn:not(.wsh-action-secondary) { background: var(--ul-ink); color: var(--ul-raised); border-color: var(--ul-ink); }
body.una-ink .wsh-submit-btn { font-size: 15px; letter-spacing: 0; text-transform: none; }
body.una-ink .oauth-btn, body.una-ink .oauth-btn.oauth-google { font-family: var(--ul-sans); font-weight: 500; letter-spacing: 0; border-radius: 0; }
body.una-ink .oauth-btn:hover { transform: none; box-shadow: none; }
/* 운세 고르기: 각진 카드, 냥 표시는 설명을 가리지 않게 */
body.una-ink .fortune-picker-card { border-radius: 0; background: var(--ul-raised); border-color: var(--ul-line); font-family: var(--ul-sans); }
body.una-ink .fortune-picker-card:hover { transform: none; box-shadow: none; border-color: var(--ul-ink); background: var(--ul-raised); }
body.una-ink .fortune-picker-title { font-family: var(--ul-serif); font-weight: 500; letter-spacing: 0; }
body.una-ink .fortune-picker-desc { font-family: var(--ul-sans); }
body.una-ink .fortune-picker-tag { border-radius: 0; font-family: var(--ul-sans); font-size: 11px; letter-spacing: 0; }
@media (max-width: 640px) {
  body.una-ink .fortune-picker-card { padding-right: 18px; }
  body.una-ink .fortune-picker-tag { position: static; align-self: flex-start; margin-top: 6px; }
  body.una-ink .fortune-picker-card { flex-wrap: wrap; }
  body.una-ink .fortune-picker-desc { flex: 1 1 100%; }
}
/* 별자리·타로 더하기: 둥근 크림 상자 → 각진 선 한 줄, 고르면 남색 */
body.una-ink :is(.una-astro-card, #fortuneAstroCard, .una-tarot-card) {
  border: 1px solid var(--ul-line) !important; border-radius: 0 !important; background: var(--ul-raised) !important;
}
body.una-ink :is(.una-astro-card, #fortuneAstroCard, .una-tarot-card):has(input:checked) {
  border-color: var(--ul-blue) !important; background: rgba(31, 58, 95, .06) !important;
}
body.una-ink :is(.una-astro-card, #fortuneAstroCard, .una-tarot-card) span { font-family: var(--ul-sans) !important; }
body.una-ink #fortuneAstroCard input { accent-color: var(--ul-blue) !important; }
body.una-ink .una-astro-chk, body.una-ink .una-tarot-chk { accent-color: var(--ul-blue) !important; }
/* 궁합 고르기 창: 다른 창과 같은 바탕·선·모서리 */
body.una-ink .gh-overlay { background: rgba(23, 25, 28, .55); }
body.una-ink .gh-modal { background: var(--ul-paper); background-image: none; border: 1px solid var(--ul-line); border-radius: 0; box-shadow: 0 24px 60px rgba(23, 25, 28, .18); }
body.una-ink .gh-mode-card { border-radius: 0; border-top-color: var(--ul-ink) !important; }
body.una-ink .gh-close { border: 1px solid var(--ul-line); border-radius: 0; font-family: var(--ul-sans); font-size: 16px; color: var(--ul-ink); background: var(--ul-paper); }
body.una-ink .gh-close:hover { background: var(--ul-ink); color: var(--ul-raised); border-color: var(--ul-ink); }
body.una-ink .gh-modal-overline { font-family: var(--ul-sans); font-style: normal; letter-spacing: .12em; color: var(--ul-muted); padding-inline: 40px; }
body.una-ink .gh-mode-card:hover, body.una-ink .gh-mode-card.active { border-top-color: var(--ul-blue) !important; }

/* ── 관상·풍수 사진 분석·유료 리포트: 초록·금색·둥근 모양 → 수묵 ── */
body.una-ink .uv-panel { --uv-accent: var(--ul-blue); background: var(--ul-raised); border-color: var(--ul-line); color: var(--ul-ink); }
body.una-ink :is(.uv-badge, .uv-birth-review, .uv-camera, .uv-camera video, .uv-compare-pair figure, .uv-edited-notice, .uv-empty,
  .uv-file-label, .uv-flow > span, .uv-overlay-item, .uv-panel, .uv-panel button, .uv-panel input[type='number'], .uv-panel select,
  .uv-photo, .uv-plan-card, .uv-plan-time, .uv-plan-tradition, .uv-premium-card, .uv-progress, .uv-progress span, .uv-quote,
  .uv-reading-details, .uv-report-tools, .uv-result-card, .uv-sample-notice, .uv-status, .uv-video-frame, .uv-video-frame img,
  .uv-video-selection, .uv-year) { border-radius: 0; }
body.una-ink :is(.uv-premium-card, .uv-plan-card, .uv-result-card, .uv-reading-details) { border-color: var(--ul-line); background: var(--ul-raised); }
body.una-ink :is(.uv-premium-heading, .uv-premium-action, .uv-premium-traditional_reading, .uv-frame, .uv-birth-review) { background: var(--ul-paper); border-color: var(--ul-line); color: var(--ul-ink); }
body.una-ink :is(.uv-premium-action p, .uv-plan-action p, .uv-library-link, .uv-birth-review > a, .uv-result-card .uv-result-action, .uv-price) { color: var(--ul-blue); }
body.una-ink .uv-premium-traditional_reading strong { color: var(--ul-muted); }
body.una-ink :is(.uv-sample-notice, .uv-edited-notice) { background: var(--ul-paper); border-color: var(--ul-line); color: var(--ul-ink); }
body.una-ink .uv-plan-card[data-done='true'] { border-color: var(--ul-blue); background: rgba(31, 58, 95, .05); }
body.una-ink .uv-frame { border-left-color: var(--ul-blue); }
body.una-ink :is(.uv-plan-heading h5, .uv-plan-action p, .uv-plan-progress, .uv-compass[data-reference='true']) { color: var(--ul-blue); }
body.una-ink .uv-plan-line strong { color: var(--ul-muted); }
body.una-ink :is(.uv-plan-check input, .uv-video-frame input) { accent-color: var(--ul-blue); }
body.una-ink .uv-video-frame:has(input:checked) { border-color: var(--ul-blue); background: rgba(31, 58, 95, .06); }
body.una-ink .uv-flow li::before { background: var(--ul-paper); color: var(--ul-blue); border: 1px solid var(--ul-line); }
body.una-ink :is(.uv-plan-number, .uv-plan-time) { color: var(--ul-blue); border-color: var(--ul-line); background: var(--ul-paper); }
/* 풍수 3D 배치(una-room-viewer): 금색·둥근 → 수묵 */
body.una-ink .ur-stage { border-radius: 0; border-color: var(--ul-line); background: var(--ul-raised); }
body.una-ink .ur-north { border-radius: 0; }
body.una-ink :is(.ur-notice, .ur-status) { color: var(--ul-ink); }
body.una-ink .ur-note { color: var(--ul-muted); }

/* ── 충전 링크 화면(/redeem): 고정폭 글꼴의 한글, 빨간 원 ── */
body.una-ink[data-menu="redeem"] code, body.una-ink[data-menu="redeem"] #errCodeChip { font-family: var(--ul-sans); }
body.una-ink[data-menu="redeem"] .rdm-mark { border-radius: 0; width: 56px; height: 56px; font-size: 26px; background: transparent; }
body.una-ink[data-menu="redeem"] .rdm-mark.ok { color: var(--ul-blue); border-color: var(--ul-blue); }
body.una-ink[data-menu="redeem"] .rdm-mark.err { color: var(--ul-ink); border-color: var(--ul-ink); }
body.una-ink[data-menu="redeem"] .rdm-mark.wait { color: var(--ul-muted); border-color: var(--ul-line); }

/* ── 이야기(/board): 작은 머리글이 본문 크기로 커지던 것 ── */
body.una-ink[data-menu="board"] .hero p.ux-eyebrow { font-size: 11px; letter-spacing: .15em; }

/* ── 본관 중간 그림: 금빛·갈색 그림을 수묵 톤으로 낮춘다(새 그림이 오기 전까지) ── */
body.una-ink[data-menu="app"] .astro-band::before { filter: grayscale(.8) contrast(.95); }
body.una-ink[data-menu="app"] .astro-band-eyebrow, body.una-ink[data-menu="app"] .astro-band h2 .em { font-family: var(--ul-sans); font-style: normal; letter-spacing: .12em; }
body.una-ink[data-menu="app"] .astro-band h2 .em { font-family: var(--ul-serif); letter-spacing: 0; }
body.una-ink[data-menu="app"] .dual-map-card img, body.una-ink[data-menu="app"] .dual-map-emblem { filter: grayscale(.75) contrast(.95); border-color: var(--ul-line); box-shadow: none; }

/* ── 약관·소개·문의·환불 쪽: 금빛 링크·크림 상자 → 남색 링크·종이 상자 ── */
body.una-ink[data-menu="policy"] h1 { font-family: var(--ul-serif); font-weight: 400; letter-spacing: -.03em; }
body.una-ink[data-menu="policy"] a { color: var(--ul-blue); text-decoration-color: var(--ul-line); text-underline-offset: 4px; }
body.una-ink[data-menu="policy"] .ul-header a { color: inherit; }
body.una-ink[data-menu="policy"] :is(.toc, .box, .vendor) { background: var(--ul-raised); border-color: var(--ul-line); border-radius: 0; }
body.una-ink[data-menu="policy"] :is(p, li, dd) { color: #3a3e45; }
body.una-ink[data-menu="policy"] :is(.meta, .vendor dt) { color: var(--ul-muted); }

/* ── 읽을거리(저널) 글: 크림 둥근 상자·기울인 영문 꼬리표 → 종이 각진 상자 ── */
body.una-ink[data-menu="blog"] :is(.cta, .astro-cta, .imgnote) { border-radius: 0; background: var(--ul-raised); border-color: var(--ul-line); }
body.una-ink[data-menu="blog"] .astro-cta .astro-k { font-family: var(--ul-sans); font-style: normal; letter-spacing: .12em; font-size: 11px; color: var(--ul-muted); }
body.una-ink[data-menu="blog"] .astro-cta b { color: var(--ul-blue); }
body.una-ink[data-menu="blog"] .tags span { color: var(--ul-muted); }
body.una-ink[data-menu="blog"] .article-visual img { border-radius: 0; box-shadow: none; border-color: var(--ul-line); background: var(--ul-raised); }
body.una-ink[data-menu="blog"] .article-visual figcaption { font-family: var(--ul-sans); font-size: 12px; color: var(--ul-muted); }

/* ── 타로: 머리말 오른쪽을 다른 메뉴와 같은 계정 칸(una-session)으로 — 공통 칸이 붙으면 자체 도구는 숨긴다 ── */
body.una-ink[data-menu="tarot"] .ul-header:has(.ul-account) .ul-header-tools { display: none !important; }
/* 자체 도구 줄을 위해 두던 머리말 아래 여백(좁은 화면 47px)을 없앤다 */
body.una-ink[data-menu="tarot"] .ul-header.has-shared-account { margin-bottom: 0; }

/* ── 궁합 관계 카드: 관계마다 다른 색(빨강·초록·갈색·금·남) → 먹색 하나, 고른 것만 남색 ── */
body.una-ink .gh-mode-card { background: var(--ul-raised); }
body.una-ink .gh-mode-card:hover { transform: none; box-shadow: none; background: var(--ul-raised); border-color: var(--ul-blue); }
body.una-ink .gh-mode-card .gh-mode-axis { color: var(--ul-muted); }
body.una-ink .gh-mode-chip { background: var(--ul-raised); font-family: var(--ul-sans); }
body.una-ink .gh-mode-card .gh-mode-han { color: var(--ul-ink); font-weight: 400; }
body.una-ink .gh-mode-card .gh-mode-en { color: var(--ul-muted); font-family: var(--ul-sans); font-style: normal; letter-spacing: .12em; }
body.una-ink .gh-mode-card:hover .gh-mode-han, body.una-ink .gh-mode-card.active .gh-mode-han { color: var(--ul-blue); }
body.una-ink .gh-mode-chip { border-left-color: var(--ul-blue); }
body.una-ink .gh-mode-chip .gh-mode-chip-han { color: var(--ul-blue); }


/* ── 5) 페이지 사이 이동 (2026-10-10) ──
   메뉴를 옮길 때 흰 바탕이 번쩍이지 않게 바탕을 종이색으로 칠하고, 지원하는 브라우저(크롬·엣지·사파리 18.2+)에서는
   앞 화면과 새 화면을 짧게 겹쳐 바꾼다. 첫 화면(landing-ink.css)·주문(una-order.css)에도 같은 줄이 있다. */
html:root { background-color: #e9e6de; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
/* 앱(html.una-in-app — 머리의 앱 판별 한 줄이 붙인다) 안에서만: 웹사이트 결제 경로처럼 웹에만 맞는 문장은 숨긴다(App Store 3.1.1).
   웹에서는 걸리는 규칙이 없다. 앱의 문서 창(una-app-reader.js)은 같은 [data-web-only] 를 아예 빼고 보인다. */
html.una-in-app [data-web-only] { display: none !important; }