/* ===================================================================
 *  명헌사주 (明軒四柱) · 프론트엔드 CSS  · v4.0 (2026-08)
 *  ---------------------------------------------------------------------
 *  ★ 컨셉 : 야심묵 (夜深墨 · Deep Ink Night)
 *      - 청운명리원의 세피아·한지·540px 프레임 배제
 *      - 풀블리드 이머시브 다크 배경 + 수묵산수 뒷배경
 *      - 유리(글래스) 카드 · 편집형 컬럼 · 대형 세리프 히어로
 *      - 낙관 주홍·달빛 골드 액센트
 *  ★ 참조 : bg-hanji.jpg (수묵산수 배경) · logo.png (원형 명헌사주 낙관)
 * =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;700;900&family=Noto+Sans+KR:wght@300;400;500;700&family=Ma+Shan+Zheng&display=swap');

:root{
  /* 박모(薄暮) · 트와일라잇 팔레트 (v4.2 · 전체 밝기 대폭 상향) */
  --void:        #2E3040;   /* 최심층 (기존 near-black → 슬레이트) */
  --ink-deep:    #3A3D50;   /* 배경 기본 */
  --ink-1:       #494D62;   /* 카드 저면 */
  --ink-2:       #565B72;   /* 카드 상면 */
  --ink-line:    #6B7089;   /* 라인 */
  --ink-line-2:  #808599;

  /* 달빛 · 아이보리 (텍스트) — 밝기 전면 상향 */
  --moon:        #FFFFFF;   /* 최상급 본문 (완전 백색) */
  --moon-2:      #F5F0E0;   /* 부제 (아이보리 화이트) */
  --moon-3:      #E0D9C4;   /* 메타 (밝은 크림) */
  --moon-4:      #C4BCA5;   /* 힌트 (여전히 잘 보이는 톤) */
  --moon-5:      #9A927A;   /* 매우 옅음 */

  /* 달빛 골드 (제목·강조) — 조금 더 밝게 */
  --gold:        #F5D89A;
  --gold-2:      #E8C88A;
  --gold-3:      #D4A960;
  --gold-glow:   rgba(245,216,154,.45);
  --gold-soft:   rgba(245,216,154,.12);

  /* 낙관 주홍 (강조 액센트) */
  --seal:        #C13B2E;
  --seal-2:      #A02E23;
  --seal-glow:   rgba(193,59,46,.40);

  /* 하위 호환 (기존 마크업 유지용) */
  --paper:       var(--ink-deep);
  --paper-2:     var(--ink-1);
  --paper-3:     var(--moon);
  --paper-card:  var(--ink-2);
  --ivory:       rgba(245,238,220,.06);
  --white:       #FFFFFF;
  --ink:         var(--moon);
  --ink-3:       var(--moon-3);
  --ink-4:       var(--moon-4);
  --ink-5:       var(--moon-5);
  --gold-4:      var(--gold-3);
  --line:        var(--ink-line);
  --line-2:      var(--ink-line-2);
  --line-gold:   rgba(232,200,138,.24);
  --line-gold-2: rgba(232,200,138,.45);
  --shadow-sm:   0 4px 14px rgba(0,0,0,.35);
  --shadow-md:   0 12px 32px rgba(0,0,0,.55);
  --shadow-lg:   0 24px 60px -20px rgba(0,0,0,.75);

  /* 폰트 */
  --f-hero:      'Noto Serif KR', 'Nanum Myeongjo', serif;
  --f-serif:     'Noto Serif KR', serif;
  --f-batang:    'Noto Serif KR', serif;
  --f-brush:     'Ma Shan Zheng', 'Noto Serif KR', serif;
  --f-body:      'Noto Sans KR', sans-serif;

  --frame-w:     680px;   /* 프레임 폭 확장 */
  --radius-lg:   4px;     /* 각진 모던 라디우스 */
  --radius-md:   2px;
  --radius-sm:   0px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased; }
html,body{ width:100%; min-height:100%; }

/* ==================================================================
 *  BODY : 박모(薄暮) 트와일라잇 배경 (풀블리드 · 밝기 상향)
 * ================================================================== */
body{
  min-height:100vh;
  color:var(--moon);
  font-family:var(--f-serif);
  font-weight:400;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(1200px 800px at 50% -10%, #55597A 0%, transparent 55%),
    radial-gradient(900px 700px at 100% 100%, rgba(193,59,46,.10) 0%, transparent 60%),
    linear-gradient(180deg, #3A3D50 0%, #45495F 40%, #3A3D50 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

a{ color:var(--gold); text-decoration:none; font-weight:500; transition:color .2s; }
a:hover{ color:var(--gold-2); text-decoration:none; }
button{ cursor:pointer; font-family:inherit; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; color:var(--moon); }

/* ==================================================================
 *  프레임 : 풀블리드 (기존 540px 카드 프레임 제거)
 *  뒷배경에 수묵산수 이미지가 매우 옅게 깔림
 * ================================================================== */
.frame{
  position:relative; z-index:1;
  width:100%; max-width:var(--frame-w); margin:0 auto;
  min-height:100vh; padding:0 28px 120px;
  background:transparent;
  overflow:visible;
}

/* 수묵산수 배경 : 상단 이머시브 워터마크 (몸통 배경에 얹힘) — 밝기 상향 */
body::before{
  content:''; position:fixed; z-index:0; left:0; right:0; top:0; height:75vh;
  background:
    linear-gradient(180deg,
      rgba(58,61,80,.25) 0%,
      rgba(58,61,80,.70) 55%,
      var(--void) 100%),
    url('/assets/img/bg-hanji.jpg') no-repeat center top / cover;
  pointer-events:none;
  filter:grayscale(.2) brightness(.92) contrast(1.05);
  mix-blend-mode:normal;
  opacity:.85;
}

/* 노이즈·먼지 텍스처 (전역 오버레이) */
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.86  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.6; mix-blend-mode:overlay;
}

.frame > *{ position:relative; z-index:2; }

/* 노이즈 오버레이 (기존 마크업 안에 들어있음) */
.paper-noise{ display:none; }

@media (min-width: 820px){
  body{ padding:0; }
}

/* ==================================================================
 *  Topbar
 * ================================================================== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 4px 0; margin-bottom:6px;
}
.topbar .back,.topbar .menu{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  color:#FFFFFF; font-size:22px; background:rgba(255,255,255,.10);
  border:1px solid rgba(245,240,224,.25);
  border-radius:50%;
  transition:border-color .2s, color .2s, background .2s;
}
.topbar .back:hover,.topbar .menu:hover{
  border-color:var(--gold); color:var(--gold); background:rgba(245,216,154,.15);
}
.topbar .menu{ flex-direction:column; gap:5px; }
.topbar .menu span{ display:block; width:18px; height:1px; background:currentColor; }
.topbar .title{
  font-family:var(--f-hero); font-size:13px; font-weight:500;
  color:#F5F0E0; letter-spacing:.42em; text-transform:uppercase;
}

/* ==================================================================
 *  HERO — 대형 세로 여백, 한자 워터마크, 낙관형 로고
 * ================================================================== */
.hero-wrap{
  text-align:center;
  padding:60px 0 40px;
  position:relative;
}

/* 배경 워터마크 한자 (은은한) */
.hero-wrap::before{
  content:'明軒'; position:absolute;
  left:50%; top:38%; transform:translate(-50%,-50%);
  font-family:var(--f-brush);
  font-size:280px; font-weight:400;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,200,138,.06);
  letter-spacing:.15em;
  white-space:nowrap; pointer-events:none;
  z-index:0;
}

/* 원형 로고 (테두리 링 + 그림자) */
.splash-logo{
  width:150px; margin:0 auto 34px;
  position:relative; z-index:1;
}
.splash-logo::before{
  content:''; position:absolute; inset:-14px;
  border:1px solid var(--line-gold);
  border-radius:50%;
  opacity:.7;
}
.splash-logo::after{
  content:''; position:absolute; inset:-26px;
  border:1px solid rgba(232,200,138,.10);
  border-radius:50%;
}
.splash-logo img{
  width:100%; height:auto; display:block;
  border-radius:50%;
  filter: drop-shadow(0 8px 28px rgba(232,200,138,.20)) brightness(1.02);
}
.splash-logo svg{ width:100%; height:auto; display:block; }

/* 상단 세로형 브랜드 라벨 (사용시) */
.splash-brand{ margin:0 0 32px; position:relative; z-index:1; }
.splash-brand .ko{
  display:block; font-family:var(--f-hero); font-size:32px; font-weight:500;
  letter-spacing:.62em; color:var(--moon); padding-left:.62em;
}
.splash-brand .han{
  display:block; font-family:var(--f-brush); font-size:14px;
  letter-spacing:.75em; color:var(--gold); padding-left:.75em; margin-top:12px;
}

/* 히어로 타이틀 : 얇은 세리프 대형 — 순백 */
.page-title{
  font-family:var(--f-hero); font-weight:400; font-size:44px; line-height:1.35;
  letter-spacing:-.005em; color:#FFFFFF; text-align:center; margin:8px 0 4px;
  word-break:keep-all; position:relative; z-index:1;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.page-title.small{ font-size:28px; margin-top:12px; }
.page-title .sm{
  font-size:36px; color:var(--gold);
  font-weight:500; letter-spacing:.02em;
  display:inline-block; margin-top:6px;
  text-shadow:0 2px 16px rgba(245,216,154,.20);
}
.page-title .accent{ color:var(--seal); }
.page-title b{ font-weight:700; }

/* 장식선 : 세로 이단 브러시 스트로크 */
.ornament{
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:10px; margin:38px auto 0; height:auto;
  position:relative; z-index:1;
}
.ornament::before{
  content:''; display:block; width:1px; height:52px;
  background:linear-gradient(180deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
.ornament::after{ display:none; }
.ornament .diamond{
  width:8px; height:8px; position:relative; flex-shrink:0;
  background:var(--seal);
  border-radius:50%;
  box-shadow: 0 0 12px var(--seal-glow), 0 0 0 3px rgba(193,59,46,.10);
}
.ornament .diamond::before,.ornament .diamond::after{ display:none; }

/* 서브타이틀 : 담담한 톤 — 밝기 상향 */
.subtitle{
  text-align:center; font-family:var(--f-serif); font-size:16px;
  color:#F5F0E0; line-height:2.1; padding:34px 20px 12px;
  font-weight:400; word-break:keep-all;
  letter-spacing:.02em;
  position:relative; z-index:1;
}
.subtitle b{ color:var(--gold); font-weight:600; letter-spacing:.08em; padding:0 2px; }

/* 섹션 헤더 : 좌우 라인 + 낙관형 중앙 원 — 밝기 상향 */
.section-title, .sub-lead{
  text-align:center; font-family:var(--f-hero); font-size:13px;
  color:#E0D9C4; letter-spacing:.42em;
  padding:56px 20px 30px;
  font-weight:500; text-transform:uppercase;
  position:relative;
}
.section-title::before, .section-title::after{
  content:'◇'; color:var(--gold); font-size:8px;
  margin:0 14px; vertical-align:middle;
}

/* ==================================================================
 *  CARDS — 유리 패널 · 편집형 컬럼 · 넘버 라벨
 * ================================================================== */
.cards-row{
  display:flex; flex-direction:column; gap:22px; padding:0;
  counter-reset: cardnum;
}

/* 유리 패널 카드 — 밝은 톤 (트와일라잇) */
.card-dark,.card-link{
  position:relative;
  display:grid;
  grid-template-columns:88px 1fr auto;
  gap:24px; align-items:center;
  padding:32px 30px; margin:0;
  background:
    linear-gradient(135deg, rgba(105,110,138,.55) 0%, rgba(73,77,98,.75) 100%);
  backdrop-filter:blur(6px);
  border-radius:var(--radius-lg);
  border:1px solid rgba(245,240,224,.15);
  color:var(--moon); text-decoration:none;
  box-shadow:
    0 20px 40px -18px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              border-color .35s, box-shadow .35s;
  counter-increment: cardnum;
  overflow:hidden;
}
/* 상단 얇은 골드 라인 */
.card-dark::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  opacity:.5;
}
/* 우측 큰 한자 넘버 워터마크 — 밝은 배경에 맞게 대비 상향 */
.card-dark::after{
  content:counter(cardnum, cjk-heavenly-stem);
  position:absolute; right:22px; top:8px;
  font-family:var(--f-brush);
  font-size:96px; line-height:1;
  color:rgba(245,216,154,.14);
  pointer-events:none; z-index:0;
}
.card-link:hover{
  text-decoration:none; transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:
    0 28px 50px -18px rgba(0,0,0,.55),
    0 0 0 1px rgba(245,216,154,.40),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.card-link:hover .arrow{
  background:var(--gold); color:var(--void); border-color:var(--gold);
}

/* 아이콘 원 : 링만 남기고 심플 */
.card-dark .icon-circle{
  width:88px; height:88px; border-radius:50%;
  border:1px solid var(--line-gold);
  display:grid; place-items:center; flex-shrink:0;
  color:var(--gold); font-size:32px;
  background:radial-gradient(circle at 40% 30%, rgba(232,200,138,.10), transparent 65%);
  position:relative; z-index:1;
}
.card-dark .icon-circle::after{
  content:''; position:absolute; inset:6px;
  border:1px dashed rgba(232,200,138,.18);
  border-radius:50%;
}
.card-dark .icon-circle svg{
  width:52px; height:52px; stroke:var(--gold); fill:none;
  stroke-width:1; stroke-linecap:round; stroke-linejoin:round;
  position:relative; z-index:1;
}

.card-dark .content{ min-width:0; position:relative; z-index:1; }
.card-dark .content h3{
  font-family:var(--f-hero); font-weight:600; font-size:22px;
  color:#FFFFFF; letter-spacing:.01em; margin-bottom:12px;
  line-height:1.4;
}

/* 뱃지 : 각진 미니멀 — 골드 밝기 상향 */
.card-dark .badge{
  display:inline-block; padding:5px 12px; border-radius:2px;
  border:1px solid var(--line-gold-2);
  color:var(--gold);
  font-family:var(--f-body); font-size:11.5px; font-weight:500;
  letter-spacing:.15em; margin-bottom:12px; background:transparent;
  text-transform:uppercase;
}
.card-dark .desc{
  font-size:14px; line-height:1.9; color:#F5F0E0;
  font-family:var(--f-serif); font-weight:400;
  letter-spacing:.01em;
}

/* 화살표 : 얇은 라인 화살표 */
.card-dark .arrow{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-gold); color:var(--gold);
  display:grid; place-items:center; font-size:18px; flex-shrink:0;
  background:transparent; box-shadow:none; font-weight:300;
  transition:background .25s, color .25s, border-color .25s;
  position:relative; z-index:1;
}

/* 라이트 카드 — 밝은 트와일라잇 유리 */
.card-light{
  background: linear-gradient(160deg, rgba(105,110,138,.45), rgba(73,77,98,.60));
  border:1px solid rgba(245,240,224,.15);
  border-radius:var(--radius-lg);
  padding:26px 24px; margin:16px 0;
  box-shadow: 0 10px 28px rgba(0,0,0,.30);
  color:var(--moon);
}

/* ==================================================================
 *  Steps (진행 단계)
 * ================================================================== */
.steps{
  display:flex; justify-content:center; align-items:flex-start; gap:0;
  padding:34px 0 40px; flex-wrap:wrap;
}
.step{ display:flex; flex-direction:column; align-items:center; gap:10px; min-width:64px; }
.step .circle{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-hero); font-size:14px; font-weight:500;
  background:rgba(255,255,255,.10); color:#F5F0E0; border:1px solid rgba(245,240,224,.25);
  transition:all .3s;
}
.step.active .circle, .step.done .circle{
  background:var(--gold);
  color:var(--void); border-color:var(--gold);
  box-shadow: 0 0 20px var(--gold-glow);
}
.step .label{
  font-size:12px; color:#E0D9C4; font-weight:500; font-family:var(--f-body);
  letter-spacing:.08em;
}
.step.active .label{ color:var(--gold); }
.step-line{ width:36px; height:1px; background:var(--ink-line); margin:18px 4px 0; }
.step.done + .step-line, .step.active + .step-line{ background:var(--line-gold-2); }

/* ==================================================================
 *  Form — 밝기 상향
 * ================================================================== */
.field{ margin-bottom:26px; } .field:last-child{ margin-bottom:0; }
.field-label{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  font-family:var(--f-hero); font-size:14px; font-weight:500; color:#F5F0E0;
  letter-spacing:.12em; text-transform:uppercase;
}
.field-label::before{
  content:''; width:16px; height:1px; background:var(--gold); flex-shrink:0;
}
.input, select.input, textarea.input{
  width:100%; padding:16px 18px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(245,240,224,.28);
  color:#FFFFFF; font-family:var(--f-serif); font-size:15.5px; font-weight:500;
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
  /* ★ Windows Chrome 은 select 를 시스템 테마로 렌더 → 다크 스킴 강제 */
  color-scheme: dark;
}
.input::placeholder{ color:rgba(245,240,224,.55); }
.input:focus, select.input:focus, textarea.input:focus{
  border-color:var(--gold);
  background:rgba(255,255,255,.20);
  box-shadow: 0 0 0 3px rgba(245,216,154,.25);
}
/* ==============================================================
 *  SELECT 드롭다운 옵션 — Windows Chrome native 팝업 대응
 *  브라우저 native 팝업 스타일 강제 오버라이드 (!important 필수)
 * ============================================================== */
select{ color-scheme: dark; }

select option,
select.input option,
select[name] option{
  background-color: #2E3040 !important;
  background:        #2E3040 !important;
  color:             #FFFFFF !important;
  padding: 10px 12px !important;
  font-family: var(--f-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
select option:hover,
select option:focus,
select option:checked,
select option[selected],
select.input option:hover,
select.input option:checked{
  background-color: #565B72 !important;
  background:        #565B72 !important;
  color:             #F5D89A !important;
  box-shadow: inset 0 0 0 20px #565B72 !important;   /* WebKit 하이라이트 재도색 */
}
select option:disabled{ color: #8A806A !important; }
/* Firefox : 팝업 자체 배경 */
select{ scrollbar-color: #565B72 #2E3040; }

.select-row{ display:flex; gap:12px; }
.select-row .input{ flex:1; }
.hint{
  font-size:13.5px; color:#C4BCA5; margin-top:10px;
  font-family:var(--f-serif); line-height:1.75; font-weight:400;
}

.gender-row{ display:flex; gap:12px; }
.gender-btn{
  flex:1; padding:16px; border-radius:var(--radius-md); text-align:center;
  font-family:var(--f-hero); font-size:15px; font-weight:500; user-select:none;
  background:rgba(255,255,255,.14); border:1px solid rgba(245,240,224,.25);
  color:#FFFFFF; cursor:pointer; transition:all .2s;
  letter-spacing:.05em;
}
.gender-btn:hover{ border-color:var(--gold); color:var(--gold); background:rgba(255,255,255,.20); }
.gender-btn.active{
  background:var(--gold); color:var(--void); border-color:var(--gold);
  box-shadow: 0 0 24px var(--gold-glow);
  font-weight:700;
}

.notice-yellow{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 22px; margin:0 auto 22px; border-radius:2px;
  background:rgba(232,200,138,.08); border:1px solid var(--line-gold);
  color:var(--gold); font-family:var(--f-serif); font-size:12.5px; font-weight:400;
  width:fit-content; letter-spacing:.12em;
}

.tip-box{
  background:rgba(245,216,154,.08);
  border:1px solid var(--line-gold-2);
  border-radius:var(--radius-md); padding:18px 20px; margin-top:22px;
  border-left:2px solid var(--gold);
}
.tip-box .tip-title{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-hero); font-size:13.5px; font-weight:600;
  color:var(--gold); margin-bottom:10px;
  letter-spacing:.12em; text-transform:uppercase;
}
.tip-box .tip-body{
  font-size:14px; color:#F5F0E0; line-height:1.85;
  font-family:var(--f-serif); font-weight:400;
}

/* ==================================================================
 *  Button
 * ================================================================== */
.btn-primary{
  display:flex; align-items:center; justify-content:center; gap:14px;
  width:100%; padding:20px; margin:32px 0 12px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color:var(--void);
  border-radius:var(--radius-md);
  font-family:var(--f-hero); font-size:15px; font-weight:700; letter-spacing:.42em;
  cursor:pointer; text-decoration:none; position:relative;
  box-shadow:
    0 24px 40px -20px rgba(232,200,138,.55),
    0 0 0 1px rgba(232,200,138,.30);
  border:none;
  padding-left:.42em;
  text-transform:uppercase;
  transition:transform .25s, box-shadow .25s, filter .25s;
}
.btn-primary:hover{
  text-decoration:none;
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:
    0 32px 50px -18px rgba(232,200,138,.65),
    0 0 0 1px rgba(232,200,138,.45);
}
.btn-primary .arr{
  position:absolute; right:26px; font-size:20px;
  color:var(--void); letter-spacing:0;
}

/* 보조 버튼 : 아웃라인 다크 */
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:var(--radius-md);
  background:transparent; color:var(--moon-2);
  border:1px solid var(--ink-line);
  font-family:var(--f-hero); font-size:13.5px; font-weight:400; letter-spacing:.15em;
  cursor:pointer; text-decoration:none;
  transition:all .2s;
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* ==================================================================
 *  Footer note
 * ================================================================== */
.footer-note{
  text-align:center; padding:44px 0 20px;
  font-family:var(--f-serif); font-size:13px; color:#C4BCA5;
  line-height:2.0; font-weight:400; letter-spacing:.05em;
  border-top:1px solid var(--ink-line);
  margin-top:40px;
}
.footer-note b{ color:#FFFFFF; font-weight:600; }
.footer-note a{ color:var(--gold); font-weight:500; letter-spacing:.08em; }
.footer-note a:hover{ color:var(--gold-2); }

/* ==================================================================
 *  Report / summary / grade
 * ================================================================== */
.summary-card{
  background: linear-gradient(160deg, rgba(105,110,138,.40), rgba(73,77,98,.55));
  border:1px solid rgba(245,240,224,.18);
  border-radius:var(--radius-lg); padding:28px; margin:22px 0;
}
.grade-row{ display:flex; justify-content:space-around; padding:18px 0; }
.grade-box{ text-align:center; }
.grade-box .lb{
  font-size:11.5px; color:#C4BCA5; margin-bottom:8px;
  font-family:var(--f-hero); font-weight:500; letter-spacing:.24em; text-transform:uppercase;
}
.grade-box .val{
  font-family:var(--f-hero); font-size:40px; font-weight:500; color:var(--gold);
  line-height:1;
  text-shadow:0 2px 16px rgba(245,216,154,.30);
}
.grade-box .stars{ color:var(--gold-2); font-size:13px; margin-top:6px; letter-spacing:.05em; }

.list-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; margin-bottom:10px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.12); border:1px solid rgba(245,240,224,.22);
  color:#FFFFFF; text-decoration:none;
  transition:border-color .2s, background .2s;
}
.list-row:hover{ border-color:var(--gold); background:rgba(245,216,154,.15); }
.list-row .lbl{ display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:400; font-family:var(--f-serif); }
.list-row .lbl .ic{ color:var(--gold); }
.list-row .chevron{ color:var(--gold); font-size:18px; }
.list-row.highlight{ background:rgba(232,200,138,.08); border-color:var(--gold); }

.report-detail{ padding:24px 0; }
.grade-badge{
  background: linear-gradient(160deg, rgba(232,200,138,.10) 0%, rgba(232,200,138,.02) 100%);
  color:var(--moon); border:1px solid var(--line-gold);
  padding:28px; text-align:center; border-radius:var(--radius-lg); margin:20px 0;
  position:relative; overflow:hidden;
}
.grade-badge::before{
  content:'命'; position:absolute; right:-20px; top:-30px;
  font-family:var(--f-brush); font-size:180px; color:rgba(232,200,138,.06);
}
.grade-badge .lb{
  font-size:12.5px; color:var(--gold); margin-bottom:12px;
  letter-spacing:.28em; font-weight:600; text-transform:uppercase;
}
.grade-badge .big{
  font-family:var(--f-hero); font-size:64px; font-weight:500; color:var(--gold);
  line-height:1; letter-spacing:.03em;
  text-shadow:0 2px 24px rgba(245,216,154,.35);
}
.grade-badge .sm{
  font-size:14px; color:#F5F0E0; margin-top:14px; line-height:1.85;
  font-family:var(--f-serif); font-weight:400;
}

.bar-row{ margin-bottom:14px; }
.bar-row .lb{
  display:flex; justify-content:space-between; font-size:13px;
  color:#F5F0E0; margin-bottom:6px; font-weight:500;
  font-family:var(--f-serif); letter-spacing:.02em;
}
.bar-bg{
  width:100%; height:6px; background:rgba(255,255,255,.05);
  border-radius:3px; overflow:hidden;
}
.bar-fg{
  height:100%;
  background:linear-gradient(90deg, var(--gold-2), var(--gold));
  border-radius:3px;
  box-shadow: 0 0 12px rgba(232,200,138,.35);
}

/* Advice / 명헌사주 조언 카드 */
.advice-card{
  background: linear-gradient(160deg, rgba(193,59,46,.08) 0%, rgba(193,59,46,.02) 100%);
  border:1px solid rgba(193,59,46,.25);
  border-radius:var(--radius-lg);
  padding:26px 28px; margin:24px 0;
  position:relative; overflow:hidden;
}
.advice-card::before{
  content:'言'; position:absolute; right:-12px; top:-20px;
  font-family:var(--f-brush); font-size:140px;
  color:rgba(193,59,46,.06);
}
.advice-card h3{
  font-family:var(--f-hero); font-size:17px; font-weight:600;
  color:var(--gold); letter-spacing:.15em; margin-bottom:16px;
  text-transform:uppercase;
}
.advice-card ul{
  list-style:none; padding:0; margin:0;
}
.advice-card li{
  padding:10px 0 10px 22px; position:relative;
  font-family:var(--f-serif); font-size:14.5px; line-height:1.9;
  color:#FFFFFF; font-weight:400;
  border-bottom:1px dashed rgba(245,216,154,.15);
}
.advice-card li:last-child{ border-bottom:none; }
.advice-card li::before{
  content:'◆'; position:absolute; left:0; top:12px;
  color:var(--seal); font-size:9px;
}

/* ==================================================================
 *  모바일 (≤ 500px)
 * ================================================================== */
@media (max-width: 500px){
  .frame{ padding:0 20px 60px; }
  .topbar{ padding:18px 4px 0; }
  .topbar .title{ font-size:11px; letter-spacing:.32em; }
  .topbar .back,.topbar .menu{ width:36px; height:36px; font-size:18px; }

  .hero-wrap{ padding:32px 0 24px; }
  .hero-wrap::before{ font-size:180px; }
  .splash-logo{ width:120px; margin-bottom:26px; }
  .splash-logo::before{ inset:-10px; }
  .splash-logo::after{ inset:-20px; }
  .splash-brand{ margin:0 0 20px; }
  .splash-brand .ko{ font-size:24px; letter-spacing:.44em; padding-left:.44em; }
  .splash-brand .han{ font-size:11px; letter-spacing:.55em; padding-left:.55em; margin-top:8px; }
  .page-title{ font-size:30px; line-height:1.35; margin:8px 0 4px; }
  .page-title .sm{ font-size:26px; }
  .ornament{ margin:26px auto 0; }
  .ornament::before{ height:38px; }
  .subtitle{ font-size:13.5px; line-height:1.95; padding:22px 12px 8px; }
  .section-title,.sub-lead{ font-size:11.5px; padding:36px 20px 22px; letter-spacing:.32em; }

  .cards-row{ gap:16px; }
  .card-dark{
    padding:22px 18px; grid-template-columns:60px 1fr 32px; gap:16px;
    border-radius:var(--radius-lg);
  }
  .card-dark::after{ font-size:64px; right:14px; top:6px; }
  .card-dark .icon-circle{ width:60px; height:60px; }
  .card-dark .icon-circle::after{ inset:4px; }
  .card-dark .icon-circle svg{ width:36px; height:36px; }
  .card-dark .content h3{ font-size:18px; margin-bottom:8px; }
  .card-dark .badge{ font-size:10px; padding:3px 10px; margin-bottom:8px; white-space:nowrap; letter-spacing:.10em; }
  .card-dark .desc{ font-size:12.5px; line-height:1.75; }
  .card-dark .arrow{ width:32px; height:32px; font-size:15px; }

  .btn-primary{ padding:18px; font-size:13.5px; letter-spacing:.32em; }

  .footer-note{ padding:28px 0 12px; font-size:11.5px; line-height:1.9; margin-top:28px; }

  .grade-badge{ padding:22px; }
  .grade-badge::before{ font-size:130px; right:-12px; top:-18px; }
  .grade-badge .big{ font-size:48px; }
  .advice-card{ padding:20px 22px; }
  .advice-card::before{ font-size:100px; }
}

@media (max-width: 360px){
  .frame{ padding:0 16px 60px; }
  .splash-logo{ width:104px; }
  .page-title{ font-size:26px; }
  .page-title .sm{ font-size:22px; }
  .card-dark{ padding:18px 14px; grid-template-columns:52px 1fr 26px; gap:12px; }
  .card-dark .icon-circle{ width:52px; height:52px; }
  .card-dark .icon-circle svg{ width:32px; height:32px; }
  .card-dark .content h3{ font-size:16.5px; }
}

/* ==================================================================
 *  본문 텍스트 전역 상향 (밝기 강화)
 * ================================================================== */
.frame p,
.frame li,
.frame td,
.frame th,
.frame label,
.frame span:not(.arr):not(.arrow):not(.ic):not(.chevron){
  color:inherit;
}
.frame .chapter .detail,
.frame .chapter .summary,
.frame .detail,
.frame .summary{
  color:#F5F0E0 !important;
}
.frame .chapter h2,
.frame .section-h,
.frame h2,
.frame h3{
  color:#FFFFFF;
}
/* 부제·설명 톤 잠금 (최소 밝기 보장) */
b, strong{ color:#FFFFFF; font-weight:600; }

/* ==================================================================
 *  선택 강조 색상 (심묵 배경 대응)
 * ================================================================== */
::selection{ background:var(--gold); color:var(--void); }

/* 스크롤바 */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:var(--ink-line); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-line-2); }