/* ===================================================================
 *  청운명리원 · 프론트엔드 CSS · v11.0 (2026-09)
 *  ─ 참고 목업 16장 정확 반영 (모바일 목업 스타일 · PC 에서도 동일)
 *  ─ 화면별 배경 : 홈=크림 수묵산수, 카탈로그=다크 네이비 안개, 폼/결제/리포트=크림
 *  ─ CTA : 다크 초콜릿 알약 (풀 라운드)
 *  ─ 액센트 : 앰버 골드 · 붉은 낙관
 * =================================================================== */
/* Pretendard (Regular 400 · Bold 700) — 서비스 전체 통일 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
/* 로고 · 상호 전용 · 궁서체(전통 명조) — 나눔명조 웹폰트 폴백 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700;800&display=swap');

:root{
  /* 종이 · 크림 */
  --paper:       #EFE7D1;
  --paper-2:     #E5DAB9;
  --paper-3:     #FBF6E2;
  --paper-4:     #FFFBEB;

  /* 다크 (카탈로그 배경 · CTA · 폼카드) */
  --dark-1:      #262119;
  --dark-2:      #1E1A13;
  --dark-3:      #0F0C08;
  --dark-4:      #3A3025;

  --panel:       rgba(250, 245, 226, 0.90);
  --panel-2:     rgba(240, 232, 210, 0.85);

  /* 잉크 텍스트 */
  --ink:         #1E1710;
  --ink-2:       #3A2E1E;
  --ink-3:       #6B5A3E;
  --ink-4:       #94815F;
  --ink-5:       #B6A47B;

  /* 앰버 골드 (아이콘·액센트) */
  --amber:       #C99A4B;
  --amber-2:     #B8863A;
  --amber-3:     #8C6631;
  --amber-4:     #5D4520;

  /* 낙관 · 붉은 액센트 */
  --seal:        #B34333;
  --seal-2:      #7D1E12;

  /* 오행 색 (사주원국·핵심요약 통계) */
  --el-wood:     #6E9E58;   /* 목 */
  --el-fire:     #C3524A;   /* 화 */
  --el-earth:    #B8863A;   /* 토 */
  --el-metal:    #8C8C8C;   /* 금 */
  --el-water:    #4A78B8;   /* 수 */

  /* 라인 */
  --line:        rgba(60, 42, 22, 0.14);
  --line-2:      rgba(60, 42, 22, 0.24);
  --line-gold:   rgba(201, 154, 75, 0.35);
  --line-gold-2: rgba(201, 154, 75, 0.55);

  /* 폰트 · 모든 폰트를 Pretendard 로 통일 (Regular 400 · Bold 700) */
  --f-hero:      'Pretendard','Pretendard Variable','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --f-serif:     'Pretendard','Pretendard Variable','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --f-body:      'Pretendard','Pretendard Variable','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  /* 로고 상호 전용 · 궁서체 (Gungsuh) → Nanum Myeongjo → 시스템 명조 폴백 */
  --f-logo:      'Gungsuh','GungsuhChe','궁서','궁서체','Nanum Myeongjo','Batang','바탕체',serif;

  --frame-w:     420px;
  --radius:      14px;
  --radius-sm:   10px;
  --radius-pill: 999px;
}

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

body{
  min-height:100vh;
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  font-size:14.5px;
  line-height:1.75;
  letter-spacing:-.01em;
  text-rendering:optimizeLegibility;
  background:#2C2416;
}

a{ color:var(--amber-3); text-decoration:none; font-weight:700; }
a:hover{ color:var(--amber-4); }
button{ cursor:pointer; font-family:inherit; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; color:inherit; }

/* ============ FRAME · 모바일 목업 폭 ============ */
.frame{
  position:relative; z-index:1;
  width:100%; max-width:var(--frame-w); margin:0 auto;
  min-height:100vh;
  padding:0 0 90px;   /* 아래 nav 여백 */
  background:var(--paper);
  overflow:hidden;
}

/* 홈 = 크림 수묵산수 배경 (배경 사진 살림) */
.frame::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(245, 235, 210, 0.45) 0%,
      rgba(220, 205, 165, 0.28) 30%,
      rgba(210, 195, 158, 0.45) 100%),
    url('/assets/img/bg-hanji.jpg') no-repeat center top / cover;
}

/* 폼·결제·리포트·마이페이지 = 크림 오버레이 강화 (텍스트 가독성) */
body.page-form .frame::before,
body.page-payment .frame::before,
body.page-report .frame::before,
body.page-mypage .frame::before{
  background:
    linear-gradient(180deg,
      rgba(248, 240, 218, 0.88) 0%,
      rgba(242, 232, 200, 0.90) 40%,
      rgba(238, 226, 190, 0.92) 100%),
    url('/assets/img/bg-hanji.jpg') no-repeat center top / cover;
}
.frame > *{ position:relative; z-index:2; }

/* 카탈로그 페이지 = 솔리드 다크 (텍스트 가독성 최우선) */
body.page-catalog{ background:#0A0805; }
body.page-catalog .frame{
  background:linear-gradient(180deg, #1A1310 0%, #0F0B08 100%);
}
body.page-catalog .frame::before{
  /* 배경 이미지 아주 살짝만 (텍스처 느낌) */
  background:
    linear-gradient(180deg,
      rgba(10, 8, 5, 0.96) 0%,
      rgba(20, 16, 12, 0.94) 40%,
      rgba(10, 8, 5, 0.98) 100%),
    url('/assets/img/bg-hanji.jpg') no-repeat center top / cover;
}

/* PC 에서는 프레임을 폰 목업 사이즈로 (세로로 늘어나지 않도록) */
@media (min-width: 820px){
  body{ padding:20px 0; background:#1A1610; min-height:100vh; display:flex; align-items:flex-start; justify-content:center; }
  .frame{
    min-height:auto;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    border-radius:22px;
    /* 폰 목업 사이즈 유지 */
    width:420px;
  }
  /* 스크롤바 제거 (깔끔한 목업 느낌) */
  .frame::-webkit-scrollbar{ width:0; }
  .frame{ scrollbar-width:none; }
}

/* ============ TOPBAR ============ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top, 0px) + 16px) 20px 12px;
  position:relative;
}
.topbar .back,.topbar .menu,.topbar .home-ic{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-2); font-size:19px;
  background:rgba(255, 250, 232, 0.55);
  border:1px solid var(--line-gold);
  border-radius:50%;
  transition:all .18s ease;
}
.topbar .back:hover,.topbar .menu:hover{ background:var(--paper-3); border-color:var(--amber-3); }
.topbar .menu{ flex-direction:column; gap:4px; }
.topbar .menu span{ display:block; width:16px; height:1.2px; background:var(--ink-2); }
.topbar .title{
  font-family:var(--f-hero); font-size:16px; font-weight:700;
  color:var(--ink); letter-spacing:.04em; text-align:center;
  flex:1;
  text-shadow: 0 1px 0 rgba(255,247,220,.6);
}
body.page-catalog .topbar .title{
  color:#FCF3D9;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
body.page-catalog .topbar .menu,
body.page-catalog .topbar .back,
body.page-catalog .topbar .home-ic{
  background:rgba(255,255,255,.08);
  border-color:rgba(201, 154, 75, 0.30);
  color:#FCF3D9;
}
body.page-catalog .topbar .menu span{ background:#FCF3D9; }

/* ============ 홈 히어로 (참고 screen 1) ============
 *  프레임 안에서 자연 흐름 · CTA 는 하단 nav 바로 위에
 */
body.page-home .frame{ display:flex; flex-direction:column; padding-bottom:0; }
body.page-home .home-hero{ flex:1; }
.home-hero{
  padding:calc(env(safe-area-inset-top, 0px) + 70px) 26px 28px;
  text-align:center;
  display:flex; flex-direction:column;
  position:relative;
  min-height:auto;
}
/* v11.19 : 어두운 배경 위 밝은 크림 텍스트 + 강한 다크 그림자 */
.home-head{
  font-family:var(--f-body); font-size:17px;
  color:#F5EACC;
  line-height:1.85; font-weight:400;
  padding-top:8px;
  letter-spacing:-.01em;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 2px 10px rgba(0,0,0,0.60),
    0 0 6px rgba(0,0,0,0.50);
}
.home-head b{ color:#FDF3D7; font-weight:700; font-size:21px; letter-spacing:-.015em; }

.home-brand{
  padding:44px 0 36px;
  position:relative;
}
.home-brand .ko{
  display:block;
  font-family:var(--f-logo);
  font-size:60px; font-weight:700;
  color:#FDF3D7; line-height:1.15;
  letter-spacing:.04em;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.55),
    0 4px 22px rgba(0,0,0,0.60),
    0 0 8px rgba(0,0,0,0.55);
}
/* 영어·낙관 완전 숨김 (v11.19 삭제) */
.home-brand .en,
.home-brand .seal{ display:none !important; }

.home-tagline{
  font-family:var(--f-body); font-size:19px;
  color:#F5EACC;
  line-height:1.85; font-weight:700;
  padding:70px 8px 34px;
  word-break:keep-all;
  letter-spacing:-.015em;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 3px 14px rgba(0,0,0,0.65),
    0 0 6px rgba(0,0,0,0.55);
}
.home-tagline b{ font-weight:700; color:#F0C878; font-size:22px; }
.home-cta-wrap{ padding:0; margin-top:auto; }

/* ============ CTA · 다크 초콜릿 알약 (풀 라운드) ============ */
.btn-primary{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:20px 28px;
  background:linear-gradient(180deg, var(--dark-4) 0%, var(--dark-2) 100%);
  color:#F5EACC;
  border:1px solid var(--dark-3);
  border-radius:var(--radius-pill);
  font-family:var(--f-hero); font-size:15.5px; font-weight:700; letter-spacing:.14em;
  cursor:pointer; text-decoration:none; position:relative;
  transition: filter .18s ease, box-shadow .18s ease;
  box-shadow:
    0 14px 30px rgba(30, 22, 12, 0.35),
    inset 0 1px 0 rgba(255, 220, 180, 0.06);
}
/* 홈 CTA 는 살짝 더 크게 */
body.page-home .btn-primary{
  padding:22px 28px;
  font-size:17px;
  letter-spacing:.18em;
  box-shadow:
    0 18px 36px rgba(30, 22, 12, 0.42),
    inset 0 1px 0 rgba(255, 220, 180, 0.08);
}
.btn-primary::before{ display:none; }
.btn-primary:hover{ filter:brightness(1.08); color:#F5EACC; text-decoration:none; }
.btn-primary .arr{ font-size:18px; opacity:.85; }

/* CTA · 크림 세컨더리 */
.btn-primary.btn-secondary{
  background:linear-gradient(180deg, var(--paper-3), var(--paper-2)) !important;
  color:var(--ink) !important;
  border:1px solid var(--amber-3) !important;
  box-shadow: 0 10px 22px rgba(60,42,22,.14), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.btn-primary.btn-secondary .arr{ color:var(--amber-3); }

/* ============ 홈 하단 3-item nav ============ */
.home-nav{
  display:flex; justify-content:space-around; align-items:center;
  padding:16px 24px calc(env(safe-area-inset-bottom, 0px) + 20px);
  border-top:1px solid var(--line-gold);
  background:linear-gradient(180deg, rgba(250,244,224,.85), rgba(240,228,198,.95));
  backdrop-filter: blur(6px);
}
.home-nav a{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:var(--ink-3); font-size:11px; font-weight:700;
  font-family:var(--f-body); text-decoration:none;
}
.home-nav a svg{ width:22px; height:22px; stroke-width:1.5; }
.home-nav a:hover{ color:var(--ink); }

/* ============ 하단 탭바 (nav-bar 4 items · 항상 하단 고정) ============ */
.nav-bar{
  position:sticky; bottom:0; left:0; right:0;
  display:flex; justify-content:space-around; align-items:center;
  padding:12px 6px calc(env(safe-area-inset-bottom, 0px) + 14px);
  background:rgba(250, 245, 226, 0.98);
  border-top:1px solid var(--line-gold);
  backdrop-filter: blur(10px);
  z-index:100;
  margin-top:auto;
}
/* 페이지 전체가 flex 로 뻗어서 nav 가 항상 하단에 붙도록 */
body.page-report .frame,
body.page-mypage .frame,
body.page-form .frame,
body.page-payment .frame,
body.page-catalog .frame{
  display:flex; flex-direction:column;
  padding-bottom:0;
}
body.page-report .frame > *:not(.nav-bar):not(.home-nav):not(.topbar):not(.frame\3A\3Abefore),
body.page-mypage .frame > *:not(.nav-bar):not(.home-nav):not(.topbar),
body.page-form .frame > *:not(.nav-bar):not(.home-nav):not(.topbar),
body.page-payment .frame > *:not(.nav-bar):not(.home-nav):not(.topbar),
body.page-catalog .frame > *:not(.nav-bar):not(.home-nav):not(.topbar){
  flex-shrink:0;
}
.nav-bar a{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--ink-4); font-size:10.5px; font-weight:700;
  font-family:var(--f-body); text-decoration:none;
  min-width:56px;
  padding:2px 4px;
}
.nav-bar a svg{ width:20px; height:20px; stroke-width:1.5; }
.nav-bar a.active{ color:var(--amber-3); }
.nav-bar a:hover{ color:var(--ink); }
body.page-catalog .nav-bar{
  background:rgba(15, 12, 8, 0.94); border-top-color:rgba(255,255,255,.10);
}
body.page-catalog .nav-bar a{ color:#8F836A; }
body.page-catalog .nav-bar a.active{ color:var(--amber); }

/* ============ CATALOG (참고 screen 2) ============ */
.cat-head{
  padding:14px 24px 10px; text-align:center;
}
.cat-head h1{
  font-family:var(--f-logo); font-size:30px; font-weight:700; color:#FCF3D9;
  letter-spacing:.04em; margin-bottom:12px;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.cat-head p{
  font-family:var(--f-body); font-size:15px; color:#F0C878;
  font-weight:700; letter-spacing:-.01em;
}
.tab-pills{
  display:flex; gap:8px; padding:10px 20px 18px;
  overflow-x:auto;
}
.tab-pill{
  padding:10px 22px; border-radius:var(--radius-pill);
  font-family:var(--f-body); font-size:14px; font-weight:700;
  border:1px solid rgba(201, 154, 75, 0.45);
  color:#F0DFA8;
  background:rgba(255,255,255,.04);
  white-space:nowrap; cursor:pointer;
  text-decoration:none;
  letter-spacing:-.01em;
}
.tab-pill.active{
  background:linear-gradient(180deg, #1A130C, #0A0805);
  color:#FCF3D9;
  border-color:#1A130C;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
body:not(.page-catalog) .tab-pill{
  color:var(--ink-3);
  border-color:var(--line-gold);
  background:rgba(255, 250, 232, 0.6);
}
body:not(.page-catalog) .tab-pill.active{
  background:var(--dark-2); color:#F5E9C6;
  border-color:var(--dark-2);
}

.prod-list{
  padding:6px 20px 20px;
  display:flex; flex-direction:column; gap:2px;
  background:transparent;
  border:none; box-shadow:none;
  margin:0;
}
.comp-card{
  display:flex; align-items:center; gap:14px;
  padding:16px 16px 16px 18px;
  margin:0 20px 12px;
  background:linear-gradient(180deg, #FDF6E0 0%, #F0E4BE 100%);
  border:1px solid var(--amber-3);
  border-radius:var(--radius);
  color:var(--ink); text-decoration:none;
  position:relative;
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}
.comp-card:hover{ text-decoration:none; }
.comp-icon{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(180deg, #E5C68A, #C99A4B);
  color:#3A2510;
  display:grid; place-items:center; flex-shrink:0;
  border:1px solid var(--amber-3);
}
.comp-body{ flex:1; min-width:0; }
.comp-name{
  font-family:var(--f-body); font-weight:700; font-size:17px; color:var(--ink);
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
  letter-spacing:-.01em;
}
.badge-best{
  font-family:var(--f-body); font-size:10.5px; font-weight:700; letter-spacing:.10em;
  background:linear-gradient(180deg, #C99A4B, #8C6631);
  color:#FBF0D8; padding:3px 8px; border-radius:4px;
}
.comp-sub{
  font-family:var(--f-body); font-size:13px; color:var(--ink);
  line-height:1.45; font-weight:700; letter-spacing:-.01em;
}
.comp-sub b{ color:var(--amber-4); font-weight:700; }
.comp-sub2{
  font-family:var(--f-body); font-size:11.5px; color:var(--ink-3);
  line-height:1.35; font-weight:400; letter-spacing:-.01em;
  margin-top:2px;
}
.comp-price-wrap{ flex-shrink:0; text-align:right; }
.comp-price{
  font-family:var(--f-body); font-weight:700; font-size:17px;
  color:var(--ink); letter-spacing:-.01em;
}
.comp-arr{
  color:var(--amber-3); font-size:20px; font-weight:700; flex-shrink:0;
  margin-left:2px;
}

.prod-row{
  display:flex; align-items:center; gap:14px;
  padding:16px 20px;
  text-decoration:none; color:#FFF7DE;
  border-bottom:1px solid rgba(201, 154, 75, 0.18);
}
.prod-row:last-child{ border-bottom:none; }
.prod-row:hover{ background:rgba(201, 154, 75, 0.06); text-decoration:none; }
.prod-icon{
  width:44px; height:44px; border-radius:50%;
  background:rgba(201, 154, 75, 0.24);
  color:#F0C878;
  display:grid; place-items:center; flex-shrink:0;
  border:1px solid rgba(201, 154, 75, 0.50);
}
.prod-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.prod-name{
  font-family:var(--f-body); font-weight:700; font-size:16.5px;
  color:#FBEFCC;
  letter-spacing:-.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.prod-sub{
  font-family:var(--f-body); font-size:13px;
  color:#F0DFA8; opacity:1;
  line-height:1.4; font-weight:400;
  letter-spacing:-.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.prod-price{
  font-family:var(--f-body); font-weight:700; font-size:15.5px;
  color:#F0C878;
  letter-spacing:-.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  flex-shrink:0;
}
body:not(.page-catalog) .prod-row{
  color:var(--ink);
  border-bottom-color:rgba(60,42,22,.10);
}
body:not(.page-catalog) .prod-row:hover{ background:rgba(255, 247, 220, 0.5); }
body:not(.page-catalog) .prod-name{ color:var(--ink); }
body:not(.page-catalog) .prod-sub{ color:var(--ink-3); }
body:not(.page-catalog) .prod-price{ color:var(--ink); }

/* ============ STEPS (참고 screen 3~4) ============ */
.steps{
  display:flex; justify-content:center; align-items:center;
  padding:16px 24px 20px; gap:6px;
}
.step{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:55px; }
.step .circle{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-body); font-size:12px; font-weight:700;
  background:rgba(255,255,255,.7);
  color:var(--ink-4);
  border:1.5px solid var(--line-gold-2);
}
.step .label{
  font-size:10.5px; color:var(--ink-4); font-weight:700; font-family:var(--f-body);
  letter-spacing:.02em;
}
.step.active .circle, .step.done .circle{
  background:linear-gradient(180deg, var(--dark-4), var(--dark-2));
  color:#F5EACC; border-color:var(--dark-2);
}
.step.active .label{ color:var(--ink); }
.step-line{
  width:18px; height:0; border-top:1.5px dashed var(--line-gold-2);
  margin-bottom:20px;
}
.step.done + .step-line, .step.active + .step-line{ border-top-color:var(--amber-3); }

/* ============ 폼 (참고 screen 3) ============ */
.page-title{
  font-family:var(--f-hero); font-weight:700; font-size:25px; line-height:1.4;
  color:var(--ink); text-align:center; margin:14px 20px 8px;
  word-break:keep-all;
  text-shadow: 0 1px 0 rgba(255,247,220,.6);
}
.page-title.small{ font-size:20px; }
.page-title .sm{ font-size:18px; color:var(--ink-2); font-weight:700; display:block; }
.subtitle{
  text-align:center; font-family:var(--f-serif); font-size:14px;
  color:var(--ink); line-height:1.9; padding:8px 20px 16px;
  font-weight:700; word-break:keep-all;
  text-shadow: 0 1px 0 rgba(255,247,220,.5);
}
.subtitle b{ color:var(--amber-3); font-weight:700; }

.section-title{
  text-align:center; font-family:var(--f-hero); font-size:12px;
  color:var(--ink); letter-spacing:.30em; padding:24px 20px 14px;
  font-weight:700; padding-left:calc(20px + .30em);
  text-shadow: 0 1px 0 rgba(255,247,220,.6);
}
.section-title::before, .section-title::after{
  content:''; display:inline-block; width:18px; height:1px;
  background:var(--amber-3); vertical-align:middle; margin:0 10px;
}

.form-body{ padding:0 20px; }
.card-light{
  background:transparent;
  border:none;
  padding:0; margin:0;
  box-shadow:none;
}
.card-light::before, .card-light > .frame-corner{ display:none; }

.field{ margin-bottom:16px; }
.field:last-child{ margin-bottom:0; }
.field-label{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-family:var(--f-body); font-size:14px; font-weight:700; color:var(--ink);
  letter-spacing:.02em;
  text-shadow: 0 1px 0 rgba(255,247,220,.6);
}
.field-label .zh{ font-size:11px; color:var(--ink-3); margin-left:auto; font-weight:700; }

.input, select.input, textarea.input{
  width:100%; padding:15px 16px; border-radius:var(--radius-sm);
  background:rgba(255, 250, 232, 0.85);
  border:1px solid rgba(60,42,22,.14);
  color:var(--ink); font-family:var(--f-serif); font-size:14.5px; font-weight:400;
  outline:none; transition:all .15s;
}
.input::placeholder{ color:var(--ink-5); font-weight:400; }
.input:focus, select.input:focus{
  border-color:var(--amber-3); background:#FFFCED;
  box-shadow: 0 0 0 3px rgba(201,154,75,.15);
}
select.input{
  appearance:none; -webkit-appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, var(--amber-3) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--amber-3) 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right:32px;
  background-color:rgba(255, 250, 232, 0.85);
}
select.input option{ background:#FBF6E2; color:var(--ink); }
.select-row{ display:flex; gap:8px; }
.select-row .input{ flex:1; }
.hint{
  font-size:12px; color:var(--ink-3); margin-top:8px;
  font-family:var(--f-serif); line-height:1.7; font-weight:400;
}
.hint b{ color:var(--amber-3); font-weight:700; }

.gender-row{ display:flex; gap:8px; }
.gender-btn{
  flex:1; padding:14px; border-radius:var(--radius-sm); text-align:center;
  font-family:var(--f-hero); font-size:14px; font-weight:700; user-select:none;
  background:rgba(255, 250, 232, 0.85);
  border:1px solid rgba(60,42,22,.14);
  color:var(--ink-2); cursor:pointer; transition:all .15s;
}
.gender-btn:hover{ border-color:var(--amber-3); }
.gender-btn.active{
  background:linear-gradient(180deg, var(--dark-4), var(--dark-2));
  color:#F5EACC; border-color:var(--dark-2);
  box-shadow: 0 6px 14px rgba(30,22,12,.30);
}
.gender-btn .zh{
  display:block; font-family:var(--f-body); font-size:10.5px;
  color:var(--ink-4); margin-top:2px; font-weight:400;
}
.gender-btn.active .zh{ color:rgba(245,234,204,.7); }

.form-note{
  display:flex; align-items:flex-start; gap:8px;
  padding:12px 14px; margin:14px 0 6px;
  background:rgba(255, 250, 232, 0.85);
  border:1px solid rgba(110, 158, 88, 0.35);
  border-radius:var(--radius-sm);
  color:var(--ink); font-size:12.5px; line-height:1.6; font-weight:700;
}
.form-note b{ color:var(--amber-4); font-weight:700; }
.form-note svg{ flex-shrink:0; color:var(--el-wood); width:18px; height:18px; margin-top:1px; }

/* ============ 결제 페이지 (참고 screen 4) ============ */
.pay-card{
  background:#fff;
  border:1px solid var(--line-gold);
  border-radius:var(--radius);
  padding:22px 20px;
  margin:12px 20px;
  box-shadow: 0 10px 26px rgba(60,42,22,.14);
}
.pay-card-head{
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.pay-card-head .ic{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(180deg, #E5C68A, #C99A4B);
  color:#3A2510;
  display:grid; place-items:center; flex-shrink:0;
}
.pay-card-head h2{
  font-family:var(--f-hero); font-size:16px; font-weight:700; color:var(--ink);
  margin-bottom:2px;
}
.pay-card-head .sub{
  font-family:var(--f-serif); font-size:11.5px; color:var(--ink-3); line-height:1.5;
}
.pay-price{
  text-align:right; font-family:var(--f-hero); font-size:24px; font-weight:700;
  color:var(--ink); margin-bottom:14px;
}
.pay-feats{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.pay-feats li{
  display:flex; align-items:flex-start; gap:9px;
  font-family:var(--f-serif); font-size:13px; color:var(--ink-2); line-height:1.5;
}
.pay-feats .ck{
  flex-shrink:0; width:16px; height:16px; margin-top:2px;
  color:var(--el-wood);
}

.pay-method-title{
  font-family:var(--f-hero); font-size:14px; font-weight:700; color:var(--ink);
  padding:10px 20px 10px;
}
.pay-method-grid{ padding:0 20px 8px; }
.pay-method-row{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:#fff;
  border:1.5px solid var(--line-gold);
  border-radius:var(--radius-sm);
  margin-bottom:8px;
  cursor:pointer;
  font-family:var(--f-body); font-size:13.5px; font-weight:700; color:var(--ink);
}
.pay-method-row.active{
  background:var(--dark-2); color:#F5E9C6; border-color:var(--dark-2);
}
.pay-method-row .radio{
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--ink-4);
  flex-shrink:0; display:grid; place-items:center;
}
.pay-method-row.active .radio{ border-color:#F5E9C6; }
.pay-method-row.active .radio::after{
  content:''; width:8px; height:8px; border-radius:50%; background:#F5E9C6;
}
.pay-method-row .simplepay-icons{
  display:flex; gap:6px; margin-left:auto;
}
.pay-method-row .simplepay-icons img,
.pay-method-row .simplepay-icons span{
  height:18px; line-height:18px; padding:2px 6px; border-radius:3px;
  font-size:10.5px; font-weight:700; letter-spacing:.05em;
}

.pay-agree{
  padding:10px 20px 6px;
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--ink-2); font-weight:700;
}
.pay-agree input{ width:16px; height:16px; }

.pay-footer{
  padding:6px 20px 0;
  text-align:center; font-size:11.5px; color:var(--ink-4);
  margin-top:8px;
}

/* ============ 리포트 메인 (참고 screen 5) ============ */
.rp-hero{
  padding:12px 24px 6px; text-align:center;
}
.rp-hero .name{
  font-family:var(--f-hero); font-size:24px; font-weight:700; color:var(--ink);
  margin-bottom:6px;
}
.rp-hero .quote{
  font-family:var(--f-serif); font-size:13px; color:var(--ink-3);
  line-height:1.6; font-weight:400;
}

.rp-thumb{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; margin:14px 20px;
  background:linear-gradient(180deg, rgba(250,244,224,.85), rgba(240,228,198,.75));
  border:1px solid var(--line-gold);
  border-radius:var(--radius);
  box-shadow: 0 10px 22px rgba(60,42,22,.14);
}
.rp-thumb-img{
  width:60px; height:60px; border-radius:var(--radius-sm);
  background:linear-gradient(135deg, #B8863A, #3A2E1E);
  flex-shrink:0;
}
.rp-thumb-body{ flex:1; min-width:0; }
.rp-thumb-body .t{ font-family:var(--f-hero); font-weight:700; font-size:14px; color:var(--ink); margin-bottom:2px; }
.rp-thumb-body .m{ font-family:var(--f-serif); font-size:11.5px; color:var(--ink-3); }
.rp-thumb-body .link{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:6px; padding:5px 10px;
  background:var(--dark-2); color:#F5E9C6;
  border-radius:var(--radius-pill);
  font-family:var(--f-body); font-size:11px; font-weight:700;
}

.rp-icon-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
  padding:8px 20px 16px;
}
.rp-icon-cell{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 4px 10px;
  background:rgba(250,244,224,.7);
  border:1px solid var(--line-gold);
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-family:var(--f-body); font-size:11px; font-weight:700;
  text-align:center; text-decoration:none;
}
.rp-icon-cell:hover{ background:rgba(250,244,224,.95); border-color:var(--amber-3); text-decoration:none; }
.rp-icon-cell .ico{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(180deg, #E5C68A, #C99A4B);
  color:#3A2510;
  display:grid; place-items:center;
}

.rp-recent{
  padding:10px 20px 20px;
}
.rp-recent-head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;
}
.rp-recent-head h3{
  font-family:var(--f-hero); font-size:14px; font-weight:700; color:var(--ink);
}
.rp-recent-head a{ font-size:11.5px; color:var(--ink-4); font-weight:700; }
.rp-recent-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 4px; border-bottom:1px dashed var(--line-gold);
  font-family:var(--f-serif); font-size:12.5px; color:var(--ink-2);
}
.rp-recent-row:last-child{ border-bottom:none; }
.rp-recent-row .ic{
  width:26px; height:26px; border-radius:50%; background:rgba(201,154,75,.15);
  color:var(--amber-3); display:grid; place-items:center; flex-shrink:0;
}
.rp-recent-row .t{ flex:1; font-weight:700; color:var(--ink); font-family:var(--f-body); font-size:12.5px; }
.rp-recent-row .d{ color:var(--ink-4); font-size:11.5px; }

/* ============ 안내 · footer ============ */
.footer-note{
  text-align:center; padding:18px 20px 10px;
  font-family:var(--f-serif); font-size:12px; color:var(--ink-3);
  line-height:1.85; font-weight:400;
}
.footer-note a{ color:var(--amber-3); font-weight:700; }
.footer-note b{ color:var(--ink); font-weight:700; }

/* ============ 태그 pill · tip ============ */
.ornament{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:14px auto 0; max-width:280px;
}
.ornament::before,.ornament::after{
  content:''; flex:1; height:1px; max-width:90px;
  background:linear-gradient(90deg, transparent, var(--amber-3) 50%, transparent);
  opacity:.7;
}
.ornament .diamond{ width:10px; height:10px; position:relative; flex-shrink:0; }
.ornament .diamond::before{
  content:''; position:absolute; inset:0; background:var(--amber-3); transform:rotate(45deg);
}

.tip-box{
  background:rgba(250,244,224,.7);
  border:1px solid var(--line-gold);
  border-radius:var(--radius);
  padding:16px 18px; margin:16px 20px;
}
.tip-box .tip-title{
  font-family:var(--f-hero); font-size:12.5px; font-weight:700; color:var(--amber-4);
  letter-spacing:.14em; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.tip-box .tip-title::before{ content:''; width:14px; height:1.4px; background:var(--amber-3); }
.tip-box .tip-body{
  font-size:12.5px; color:var(--ink-2); line-height:1.75; font-family:var(--f-serif); font-weight:400;
}
.tip-box .tip-body b{ color:var(--amber-4); font-weight:700; }

/* ============ 상단 브랜드 텍스트 (호환) ============ */
.brand-text{ text-align:center; padding:12px 0 6px; }
.brand-text .ko{
  display:block; font-family:var(--f-logo);
  font-size:28px; font-weight:700; color:var(--ink); letter-spacing:.05em;
}
.brand-text .han{
  display:block; font-family:var(--f-body); font-size:10.5px;
  color:var(--ink-3); font-weight:700; letter-spacing:.32em; padding-left:.32em; margin-top:8px;
}

/* ============ 모바일 조정 ============ */
@media (max-width: 380px){
  .home-brand .ko{ font-size:38px; }
  .home-brand .en{ font-size:10px; letter-spacing:.30em; }
  .page-title{ font-size:22px; }
  .page-title .sm{ font-size:16px; }
  .pay-price{ font-size:22px; }
  .rp-icon-grid{ grid-template-columns:repeat(4, 1fr); gap:8px; }
}

/* ============ 스크롤 · 기타 ============ */
.tab-pills::-webkit-scrollbar{ display:none; }
.tab-pills{ scrollbar-width:none; }

/* ==================================================================
 * v11.2 · 전환율 개선 : 가치 제안 · 20가지 그리드 · 리포트 미리보기
 * ================================================================== */

/* 폼 페이지 상단 가치 제안 */
.value-head{
  text-align:center;
  padding:20px 24px 4px;
}
.value-eyebrow{
  display:inline-block;
  font-family:var(--f-body); font-size:11.5px; font-weight:700;
  color:var(--amber-4); letter-spacing:.30em;
  padding:6px 16px; border:1px solid var(--amber-3);
  border-radius:var(--radius-pill);
  background:rgba(255,247,220,.85);
  margin-bottom:14px;
}
.value-title{
  font-family:var(--f-hero); font-size:24px; font-weight:700;
  color:var(--ink); line-height:1.4;
  margin-bottom:12px;
  text-shadow: 0 1px 0 rgba(255,247,220,.7);
}
.value-desc{
  font-family:var(--f-serif); font-size:14.5px; color:var(--ink);
  line-height:1.75; font-weight:700;
  text-shadow: 0 1px 0 rgba(255,247,220,.6);
}
.value-desc b{ color:var(--amber-4); font-weight:700; }

/* 20가지 항목 그리드 (전환 부스터) */
.items20-wrap{
  background:rgba(250,244,224,.85);
  border:1px solid var(--line-gold);
  border-radius:var(--radius);
  padding:16px 16px 14px;
  margin:14px 20px;
  box-shadow: 0 10px 22px rgba(60,42,22,.10);
}
.items20-head{
  display:flex; align-items:center; gap:12px;
  padding-bottom:12px; margin-bottom:10px;
  border-bottom:1px dashed var(--line-gold);
}
.items20-count{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(180deg, var(--dark-4), var(--dark-2));
  color:var(--paper-3);
  display:grid; place-items:center;
  font-family:var(--f-hero); font-size:20px; font-weight:700;
  flex-shrink:0;
}
.items20-title{
  font-family:var(--f-hero); font-size:15px; font-weight:700; color:var(--ink);
  margin-bottom:2px;
}
.items20-sub{
  font-family:var(--f-serif); font-size:11.5px; color:var(--ink-3);
  line-height:1.4; font-weight:400;
}
.items20-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:2px 12px;
}
.items20-grid li{
  display:flex; align-items:baseline; gap:8px;
  padding:8px 2px;
  font-family:var(--f-serif); font-size:12.5px; line-height:1.35;
  border-bottom:1px dotted rgba(166,124,62,.20);
  color:var(--ink);
}
.items20-grid li:nth-last-child(-n+2){ border-bottom:none; }
.items20-grid .n{
  font-family:var(--f-body); font-size:10px; font-weight:700;
  color:var(--amber-3); letter-spacing:0;
  min-width:20px; flex-shrink:0;
}
.items20-grid .t{
  font-weight:700; color:var(--ink); font-size:12.5px; margin-right:auto;
}
.items20-grid .s{
  font-size:10.5px; color:var(--ink-4); font-weight:400; flex-basis:100%; padding-left:28px; margin-top:-2px;
  display:none;   /* 그리드가 촘촘해서 서브텍스트는 숨김 · 툴팁 대체 */
}

/* 신뢰 스트립 */
.trust-strip{
  display:flex; gap:8px; padding:0 20px 6px;
}
.ts-cell{
  flex:1; text-align:center;
  padding:12px 6px;
  background:rgba(255, 250, 232, 0.92);
  border:1px solid var(--line-gold-2);
  border-radius:var(--radius-sm);
  box-shadow: 0 4px 10px rgba(60,42,22,.08);
}
.ts-num{
  font-family:var(--f-hero); font-size:18px; font-weight:700;
  color:var(--amber-4); line-height:1;
}
.ts-lb{
  font-family:var(--f-body); font-size:11px; font-weight:700;
  color:var(--ink-2); margin-top:5px;
}

.cta-sub-note{
  text-align:center; padding:10px 20px 4px;
  font-family:var(--f-serif); font-size:12.5px; color:var(--ink-2);
  line-height:1.7; font-weight:700;
  text-shadow: 0 1px 0 rgba(255,247,220,.55);
}
.cta-sub-note b{ color:var(--amber-4); font-weight:700; font-size:13.5px; }

/* ============ 결제 페이지 개인화 헤더 ============ */
.ready-head{
  text-align:center;
  padding:8px 24px 8px;
}
.ready-eyebrow{
  display:inline-block;
  font-family:var(--f-body); font-size:11px; font-weight:700;
  color:var(--amber-3); letter-spacing:.20em;
  padding:5px 12px; border-radius:var(--radius-pill);
  background:rgba(255,247,220,.55); border:1px solid var(--line-gold-2);
  margin-bottom:12px;
}
.ready-title{
  font-family:var(--f-hero); font-size:25px; font-weight:700;
  color:var(--ink); line-height:1.4; margin-bottom:8px;
  text-shadow: 0 1px 0 rgba(255,247,220,.7);
}
.ready-title b{ color:var(--amber-4); font-weight:700; }
.ready-sub{
  font-family:var(--f-serif); font-size:13px; color:var(--ink-2);
  font-weight:700;
  text-shadow: 0 1px 0 rgba(255,247,220,.5);
}

.ready-count{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; margin:14px 20px 8px;
  background:linear-gradient(180deg, rgba(250,244,224,.95), rgba(240,228,198,.85));
  border:1px solid var(--amber-3);
  border-radius:var(--radius);
  box-shadow: 0 10px 22px rgba(60,42,22,.14);
}
.rc-num{
  font-family:var(--f-hero); font-size:36px; font-weight:700;
  color:var(--amber-4); line-height:1;
}
.rc-num span{ font-size:16px; color:var(--ink-4); font-weight:700; }
.rc-lb{ font-family:var(--f-serif); font-size:12.5px; color:var(--ink-2); line-height:1.55; }
.rc-lb b{ font-family:var(--f-hero); font-weight:700; color:var(--ink); font-size:13.5px; }

.ready-tags{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:0 20px 6px;
}
.rt{
  display:inline-block; padding:5px 10px;
  font-family:var(--f-body); font-size:11px; font-weight:700;
  background:rgba(201,154,75,.10); color:var(--amber-4);
  border:1px solid var(--line-gold);
  border-radius:var(--radius-pill);
}

/* 리포트 미리보기 카드 */
.preview-card{
  background:#fff;
  border:1px solid var(--line-gold);
  border-radius:var(--radius);
  padding:16px;
  margin:14px 20px;
  box-shadow: 0 10px 24px rgba(60,42,22,.14);
}
.preview-title{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-hero); font-size:13px; font-weight:700;
  color:var(--amber-4);
  padding-bottom:10px; margin-bottom:12px;
  border-bottom:1px dashed var(--line-gold);
}
.preview-row{
  display:flex; align-items:center; gap:14px;
  padding:10px 0;
  border-bottom:1px dashed rgba(166,124,62,.20);
}
.preview-row:last-child{ border-bottom:none; }
.pv-thumb{
  width:96px; flex-shrink:0;
  background:rgba(250,244,224,.6);
  border:1px solid var(--line-gold);
  border-radius:var(--radius-sm);
  padding:8px;
  text-align:center;
}
.pv-pillar{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  font-family:var(--f-hero); font-size:11px; font-weight:700; color:var(--ink-4);
}
.pv-pillar .w{ font-size:15px; color:var(--ink); font-weight:700; }
.pv-elements{ display:flex; flex-direction:column; gap:3px; padding:6px; }
.pv-elements .el{
  height:10px; border-radius:2px;
  font-family:var(--f-body); font-size:8px; color:#fff; font-weight:700;
  text-align:right; padding:0 4px; line-height:10px;
}
.el.el-wood{ background:var(--el-wood); }
.el.el-fire{ background:var(--el-fire); }
.el.el-earth{ background:var(--el-earth); }
.el.el-metal{ background:var(--el-metal); }
.el.el-water{ background:var(--el-water); }
.pv-chart{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px; }
.pv-chart svg{ width:100%; height:32px; }
.pv-chart span{ font-family:var(--f-body); font-size:9px; color:var(--ink-4); font-weight:700; }

.pv-txt{
  flex:1; font-family:var(--f-serif); font-size:12px; color:var(--ink-2);
  line-height:1.55; font-weight:400;
}
.pv-txt b{
  display:block; font-family:var(--f-hero); font-weight:700; color:var(--ink);
  font-size:13px; margin-bottom:2px;
}

/* ==================================================================
 * v11.5 · 전환 카피 강화 : 마이크로카피 · 가치 vs 가격 대비
 * ================================================================== */

/* 홈 CTA 하단 마이크로카피 · 어두운 배경에 어울리는 다크 pill */
.home-microcopy{
  display:inline-block;
  margin:18px auto 0;
  padding:11px 22px;
  background:rgba(20, 14, 8, 0.60);
  border:1px solid rgba(240, 200, 120, 0.35);
  border-radius:var(--radius-pill);
  font-family:var(--f-body); font-size:14px;
  color:#F5EACC; font-weight:700;
  line-height:1.4;
  letter-spacing:-.01em;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,.30);
}
.home-microcopy b{ color:#F0C878; font-weight:700; }
.home-cta-wrap{ text-align:center; }

/* 카탈로그 BEST 카드 아래 안내 */
.comp-microcopy{
  text-align:center;
  padding:14px 20px 8px;
  font-family:var(--f-body); font-size:13px;
  color:#F0DFA8; font-weight:400;
  line-height:1.65; letter-spacing:-.01em;
}
.comp-microcopy b{ color:#F0C878; font-weight:700; }

/* 결제 페이지 : 가치 vs 가격 대비 (앵커링) */
.value-vs-price{
  margin-top:16px; padding-top:14px;
  border-top:1px dashed var(--line-gold-2);
}
.vvp-line{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:6px 0;
  font-family:var(--f-serif); font-size:13px; color:var(--ink-2); font-weight:700;
}
.vvp-line.vvp-main{
  font-family:var(--f-hero); font-size:15px; color:var(--ink); font-weight:700;
  padding-top:10px; border-top:1px dashed rgba(166,124,62,.20); margin-top:4px;
}
.vvp-strike{
  color:var(--ink-4); font-weight:700;
  text-decoration:line-through;
  text-decoration-color:var(--seal);
  text-decoration-thickness:1.5px;
}
.vvp-price{
  font-family:var(--f-hero); font-size:20px; font-weight:700; color:var(--amber-4);
}
.vvp-save{
  margin-top:10px;
  text-align:center;
  padding:8px 12px;
  background:linear-gradient(180deg, rgba(179, 67, 51, 0.08), rgba(125, 30, 18, 0.05));
  border:1px dashed rgba(179, 67, 51, 0.35);
  border-radius:var(--radius-sm);
  font-family:var(--f-body); font-size:12.5px; color:var(--seal-2); font-weight:700;
}
.vvp-save b{ color:var(--seal); font-weight:700; font-size:13.5px; }

/* 결제 feats 볼드 강조 */
.pay-feats li b{ color:var(--ink); font-weight:700; }

/* =====================================================================
 * v12.0 · 포스터 스타일 홈 (참고 이미지 반영)
 *   좌상단 로고+낙관 · 우상단 인용문 · 중앙 대형 카피 · 10 카테고리 그리드
 *   붓 자국 배너 · 다크 초콜릿 골드 글로우 CTA
 * ===================================================================== */

body.page-v12 .frame::before{
  /* v12.2 : 부드러운 다크 오버레이 → 텍스트가 그림자 없이도 자연스럽게 뜸 */
  background:
    linear-gradient(180deg,
      rgba(20, 15, 8, 0.55) 0%,
      rgba(30, 22, 14, 0.42) 30%,
      rgba(30, 22, 14, 0.42) 60%,
      rgba(20, 15, 8, 0.55) 100%),
    url('/assets/img/bg-hanji.jpg') no-repeat center center / cover;
}

/* v12.5 : 프레임 플렉스 → 히어로 채움 · 상단 여백 확보 */
body.page-v12 .frame{ display:flex; flex-direction:column; padding-bottom:0; }
body.page-v12 .hero12{ flex:1; }

.hero12{
  padding:calc(env(safe-area-inset-top, 0px) + 60px) 22px 30px;
  display:flex; flex-direction:column;
  min-height:auto;
  position:relative;
}

/* ============ 상단 : 로고 + 인용문 (항상 최상단 고정) ============ */
.hero12-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:10px; margin-bottom:24px;
  flex-shrink:0;
}
.hero12-logo{ display:flex; flex-direction:column; align-items:flex-start; flex-shrink:0; }
.hero12-logo .lg-row{ display:flex; align-items:center; gap:7px; }
.hero12-logo .lg-ko{
  font-family:var(--f-logo); font-size:22px; font-weight:700;
  color:#FDF3D7;
  letter-spacing:.02em;
}
.hero12-logo .lg-seal{
  display:inline-block;
  padding:3px 7px 2px;
  background:var(--seal); color:#FBF0D8;
  font-family:var(--f-logo); font-size:11px; font-weight:700;
  letter-spacing:.05em;
  transform:rotate(-2deg);
  box-shadow: 1px 1px 0 rgba(125,30,18,.35);
}
.hero12-logo .lg-en{
  font-family:var(--f-body); font-size:9.5px; font-weight:700;
  color:#D5C6A0; letter-spacing:.22em; margin-top:6px;
  padding-left:.22em;
  white-space:nowrap;
}
.hero12-quote{
  font-family:var(--f-serif); font-size:12.5px; font-weight:400;
  color:#F0E5C5; text-align:right; line-height:1.7;
  position:relative; padding:0 2px;
  letter-spacing:-.03em;
  min-width:160px;
  flex-shrink:0;
  word-break:keep-all;
}
.hero12-quote .qmk{
  font-family:'Nanum Myeongjo',serif; font-size:20px; font-weight:700;
  color:#F0C878; margin-right:2px;
  vertical-align:top; line-height:1;
}
.hero12-quote .qmk.right{ margin:0 0 0 2px; }

/* ============ 아이 캐치 · 여기만 있는 사주 (헤드라인 위) ============ */
.hero12-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:6px auto 0;
  padding:6px 14px;
  width:fit-content;
  font-family:var(--f-body); font-size:12px; font-weight:700;
  color:#F0C878;
  letter-spacing:.04em;
  border:1px solid rgba(240,200,120,.45);
  border-radius:999px;
  background:rgba(30,22,12,.42);
}
.hero12-eyebrow .eb-dot{
  width:5px; height:5px; border-radius:50%;
  background:#F0C878;
  box-shadow:0 0 6px rgba(240,200,120,.55);
}

/* ============ 헤드라인 (그림자 없는 클린 타이포) ============ */
.hero12-head{
  font-family:var(--f-logo); font-weight:700;
  font-size:52px; line-height:1.28;
  color:#FDF3D7; text-align:center;
  margin:22px 0 16px;
  letter-spacing:-.005em;
  word-break:keep-all;
}
.hero12-head .gold{
  color:#F0C878;
}

.hero12-desc{
  text-align:center;
  font-family:var(--f-body); font-size:16px;
  color:#F0E5C5;
  font-weight:400; line-height:1.75;
  padding:0 8px 18px;
  letter-spacing:-.01em;
}
.hero12-desc b{ color:#FDF3D7; font-weight:700; }

.hero12-divider{
  width:52px; height:2px;
  background:linear-gradient(90deg, transparent, #F0C878 30%, #F0C878 70%, transparent);
  margin:8px auto 22px;
  opacity:1;
  box-shadow: 0 0 8px rgba(240,200,120,.5);
}

/* ============ 10개 카테고리 그리드 ============ */
.hero12-cats{
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:14px 6px;
  padding:4px 4px 8px;
}
.hero12-cats .cat{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  text-align:center;
}
.hero12-cats .cat-ic{
  width:36px; height:36px;
  display:grid; place-items:center;
  color:#F0DFA8;
  background:transparent;
  transition: color .2s ease;
}
.hero12-cats .cat-ic svg{ width:26px; height:26px; }
.hero12-cats .cat-lb{
  font-family:var(--f-body); font-size:12.5px; font-weight:700;
  color:#FDF3D7; letter-spacing:-.01em;
  line-height:1.25; word-break:keep-all;
}

/* ============ 여기서만 · 차별점 3가지 ============ */
.only-here{
  margin:26px auto 10px;
  padding:20px 18px 18px;
  max-width:360px;
  border:1px solid rgba(240,200,120,.28);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(30,22,12,.55), rgba(30,22,12,.35));
  box-shadow:
    inset 0 1px 0 rgba(255,220,180,.06),
    0 4px 18px rgba(0,0,0,.25);
}
.only-here .oh-title{
  text-align:center;
  font-family:var(--f-logo);
  font-size:20px; font-weight:700;
  color:#F0C878;
  letter-spacing:.02em;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(240,200,120,.30);
}
.only-here .oh-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.only-here .oh-list li{
  display:flex; align-items:flex-start; gap:12px;
}
.only-here .oh-ic{
  flex-shrink:0;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(240,200,120,.20), rgba(240,200,120,.08));
  color:#F0C878;
  border:1px solid rgba(240,200,120,.35);
}
.only-here .oh-ic svg{ width:18px; height:18px; }
.only-here .oh-lb{
  font-family:var(--f-body);
  font-size:14.5px; font-weight:700;
  color:#FDF3D7;
  letter-spacing:-.01em;
  line-height:1.35;
}
.only-here .oh-ds{
  font-family:var(--f-body);
  font-size:12.5px; font-weight:400;
  color:#D5C6A0;
  letter-spacing:-.01em;
  line-height:1.5;
  margin-top:3px;
}

/* ============ 붓 자국 배너 ============ */
/* 붓 자국 영역 : 심플한 옐로우 바 + 심플 카피 */
.hero12-brush{
  position:relative;
  margin:26px auto 20px;
  padding:16px 20px;
  max-width:340px;
  text-align:center;
  border-top:1px solid rgba(240,200,120,.35);
  border-bottom:1px solid rgba(240,200,120,.35);
}
.hero12-brush svg{ display:none; }
.brush-txt{
  font-family:var(--f-body); font-size:16px;
  color:#F0E5C5; font-weight:400; line-height:1.55;
  letter-spacing:-.01em;
}
.brush-txt b{
  display:inline-block; margin-top:6px;
  font-weight:700; color:#FDF3D7; font-size:19px;
  font-family:var(--f-logo);
}

/* ============ 긴급성 · 희소성 카피 ============ */
.hero12-urgent{
  text-align:center;
  margin:6px 0 20px;
}
.ug-tag{
  display:inline-block; padding:7px 18px;
  background:linear-gradient(180deg, var(--amber-4), var(--amber-3));
  color:#FBF0D8;
  font-family:var(--f-body); font-size:13px; font-weight:700;
  letter-spacing:.02em;
  border-radius:var(--radius-pill);
  margin-bottom:16px;
  box-shadow: 0 4px 12px rgba(93,69,32,.30);
}

/* ★ 훅 : 3,900원부터 (홈의 심리 앵커 · 결제율 최대화) */
.ug-hook{
  margin:0 auto 14px; max-width:360px;
  padding:18px 22px 20px;
  border:1.5px solid #F0C878;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(240,200,120,.14), rgba(240,200,120,.04));
  box-shadow:
    0 0 0 3px rgba(240,200,120,.10),
    0 10px 28px rgba(240,200,120,.22),
    inset 0 1px 0 rgba(255,220,180,.16);
  position:relative;
}
.ug-hook-lb{
  font-family:var(--f-body); font-size:12.5px; font-weight:700;
  color:#F0C878; letter-spacing:.02em; margin-bottom:6px;
}
.ug-hook-price{
  display:flex; align-items:baseline; justify-content:center; gap:6px;
  margin:2px 0 8px;
}
.ug-hook-from{
  font-family:var(--f-body); font-size:14px; font-weight:700;
  color:#F5EACC;
}
.ug-hook-now{
  font-family:var(--f-logo); font-size:42px; font-weight:700;
  color:#FDF3D7; letter-spacing:-.01em;
  line-height:1;
}
.ug-hook-tail{
  font-family:var(--f-body); font-size:14px; font-weight:700;
  color:#F5EACC;
}
.ug-hook-desc{
  font-family:var(--f-body); font-size:13px;
  color:#F0E5C5; font-weight:400; line-height:1.55;
  letter-spacing:-.01em;
}
.ug-hook-desc b{ color:#FDF3D7; font-weight:700; }

/* 종합사주 앵커링 : 훅 밑에 붙는 서브 라인 */
.ug-anchor{
  margin:0 auto; max-width:360px;
  padding:12px 16px;
  border:1px solid rgba(240,200,120,.28);
  border-radius:12px;
  background:rgba(30,22,12,.35);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.ug-anchor-lb{
  text-align:left;
  font-family:var(--f-body); font-size:12px;
  color:#F0E5C5; font-weight:400; line-height:1.4;
  letter-spacing:-.01em;
}
.ug-anchor-lb b{ color:#FDF3D7; font-weight:700; }

/* 앵커 안의 정가·현재가 */
.ug-price-row{
  display:flex; align-items:baseline; justify-content:flex-end; gap:6px;
  flex-shrink:0;
}
.ug-anchor .strike{
  color:#D5C6A0; opacity:.7;
  text-decoration:line-through;
  text-decoration-color:#E56A55;
  text-decoration-thickness:2px;
  font-family:var(--f-body);
  font-size:12px; font-weight:700;
}
.ug-anchor .now{
  color:#F0C878;
  font-family:var(--f-logo);
  font-size:18px; font-weight:700;
}

/* 기존 ug-line 잔여 (호환) */
.ug-line{
  font-family:var(--f-body); font-size:15px;
  color:#F0E5C5;
  font-weight:400; line-height:1.75;
  letter-spacing:-.01em;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.ug-line b{ color:#FDF3D7; font-weight:700; }

/* ============ CTA 알약 · 골드 글로우 ============ */
.hero12-cta{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; max-width:340px;
  margin:10px auto 14px;
  padding:24px 28px;
  background:linear-gradient(180deg, #3A2E1E 0%, #1E1710 100%);
  color:#F5EACC;
  border:1px solid #F0C878;
  border-radius:var(--radius-pill);
  font-family:var(--f-body); font-size:19px; font-weight:700;
  text-decoration:none; letter-spacing:.02em;
  transition: filter .18s ease, box-shadow .18s ease;
  box-shadow:
    0 0 0 3px rgba(240, 200, 120, 0.15),
    0 8px 24px rgba(240, 200, 120, 0.35),
    0 18px 40px rgba(30, 22, 12, 0.45),
    inset 0 1px 0 rgba(255, 220, 180, 0.15);
  position:relative;
}
.hero12-cta:hover{
  filter:brightness(1.08);
  color:#FDF3D7; text-decoration:none;
  box-shadow:
    0 0 0 3px rgba(240, 200, 120, 0.22),
    0 10px 30px rgba(240, 200, 120, 0.45),
    0 22px 48px rgba(30, 22, 12, 0.52),
    inset 0 1px 0 rgba(255, 220, 180, 0.18);
}
.hero12-cta .arr{
  font-size:24px; color:#F0C878; font-weight:700;
}
.hero12-cta-note{
  text-align:center;
  font-family:var(--f-body); font-size:14px;
  color:#F0E5C5;
  font-weight:400; margin-bottom:8px;
  letter-spacing:-.01em;
}
.hero12-cta-note b{ color:#F0C878; font-weight:700; }

/* 이전 v11 홈 스타일 비활성화 (page-v12 인 경우) */
body.page-v12 .home-hero,
body.page-v12 .home-head,
body.page-v12 .home-brand,
body.page-v12 .home-tagline,
body.page-v12 .home-cta-wrap,
body.page-v12 .home-microcopy{ display:none !important; }

/* 모바일 세부 조정 */
@media (max-width: 400px){
  .hero12-head{ font-size:40px; }
  .hero12-cats{ gap:12px 4px; }
  .hero12-cats .cat-ic{ width:32px; height:32px; }
  .hero12-cats .cat-ic svg{ width:22px; height:22px; }
  .hero12-cats .cat-lb{ font-size:9.5px; }
}