/* =========================================================
   팔자야 style.css  (Figma 156:456 실물 기준 — 2026-07-01)
   ToC: 1)Font 2)Tokens 3)Reset 4)Type 5)Layout 6)Components 7)Main(m_)
   토큰 값 = Figma 변수 실측(get_variable_defs). 색 하드코딩 금지.
   ※ 폰트: 디자인은 NanumSquareRound, 현재 웹폰트는 NanumSquare(플래그).
   ========================================================= */

/* 1) Font START */
@font-face{font-family:'NanumSquare';font-weight:300;font-display:swap;src:url('../font/NanumSquareL.woff2') format('woff2'),url('../font/NanumSquareL.woff') format('woff'),url('../font/NanumSquareL.ttf') format('truetype');}
@font-face{font-family:'NanumSquare';font-weight:400;font-display:swap;src:url('../font/NanumSquareR.woff2') format('woff2'),url('../font/NanumSquareR.woff') format('woff'),url('../font/NanumSquareR.ttf') format('truetype');}
@font-face{font-family:'NanumSquare';font-weight:700;font-display:swap;src:url('../font/NanumSquareB.woff2') format('woff2'),url('../font/NanumSquareB.woff') format('woff'),url('../font/NanumSquareB.ttf') format('truetype');}
@font-face{font-family:'NanumSquare';font-weight:800;font-display:swap;src:url('../font/NanumSquareEB.woff2') format('woff2'),url('../font/NanumSquareEB.woff') format('woff'),url('../font/NanumSquareEB.ttf') format('truetype');}
/* Font END */

/* 2) Tokens START (Figma 실측) */
:root{
  --color_ink:#2a1e5c;          /* text/ink */
  --color_white:#ffffff;        /* text/white */
  --color_lavender:#d9d2f2;     /* text/lavender */
  --color_disable:#8f8f8f;      /* text/disable */
  --color_violet_700:#5b4bd0;   /* bg/violet-700 */
  --color_gold:#ffb015;         /* point/gold */
  --color_gold_deep:#c8902b;    /* point/gold-deep */
  --color_green:#17b6a0;        /* CTA(초록) — 스크린샷 근사, Figma 대조 예정 */
  --color_green_deep:#0f9277;
  --bg_basic:#f5f3ff;           /* bg/basic — 카드 섹션·밝은 면 */
  --natural_100: #F8F8F8;
  --natural_200: #F0F0F0;
  --natural_300: #D1D1D2;
  --natural_500: #A2A2A2;
  --natural_700: #737373;

  /* 그라데이션(스크린샷 근사 — get_design_context로 정밀화 예정) */
  --gra_hero:linear-gradient(115deg,#6d6be2 0%,#8a5fd6 55%,#9b63d4 100%);
  --gra_ad:linear-gradient(115deg,#6a5be2 0%,#8e5bd8 100%);
  --gra_cta:linear-gradient(105deg,#00C0B0 0%,#1FAC6F 100%); /* 내 사주 보기 (Figma gradient/cta 실측) */
  --gra_yel:linear-gradient(135deg,#ffb015 0%,#ff9215 100%);
  --gra_pay:linear-gradient(135deg,#6f5be6 0%,#9a63d6 100%); /* 결제 버튼 보라(근사·정밀화 예정) */
  /* 간격 */
  --space_4: 4px;
  --space_8: 8px; 
  --space_12: 12px; 
  --space_16: 16px; 
  --space_24: 24px; 
  --space_32: 32px; 
  --space_48: 48px; 
  --space_64: 64px;
  /* 라운드 */
  --radius_xsm:4px; 
  --radius_sm:8px; 
  --radius_md:16px; 
  --radius_pill:999px;
  --container:1048px;
}
/* Tokens END */

/* 3) Reset START */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'NanumSquare',Arial,sans-serif;color:var(--color_ink);background:var(--bg_basic);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;word-break:keep-all;line-height:1.5;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
/* Reset END */

/* 4) Type START (Figma: NanumSquareRound weights) */
.t_h3{font-size:30px;font-weight:800;line-height:1.35;}
.t_h4{font-size:26px;font-weight:800;line-height:1.35;}
.t_lg{font-size:18px;font-weight:700;line-height:1.5;}
.t_body{font-size:15px;font-weight:400;line-height:1.55;}
.t_cta{font-size:18px;font-weight:800;}
.c_white{color:var(--color_white);} .c_lav{color:var(--color_lavender);} .c_gold{color:var(--color_gold);} .c_ink{color:var(--color_ink);} .c_gray{color:var(--color_disable);}
/* Type END */

/* 5) Layout START */
.m_container{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--space_24);padding-right:var(--space_24);}
.m_section{width:100%;}
/* Layout END */

/* 6) Components START */
.bs_bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space_8);
  padding: var(--space_16) var(--space_32);
  border-radius: var(--radius_sm);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  transition: background-color .2s,transform .1s;
  position: relative;
  overflow: hidden;
}
.bs_bt.gold_ver{
  background: var(--color_gold);
  color: var(--color_white);
}
.bs_bt.gold_ver:hover{background:var(--color_gold_deep);color:#fff;}
.bs_bt.green_ver{background:var(--gra_cta);color:var(--color_white);}
.bs_bt.green_ver:hover{filter:brightness(1.06);}
.bs_bt:active{transform:translateY(1px);}
.bt_ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.4);animation:bt_ripple .3s linear;pointer-events:none;}
@keyframes bt_ripple{to{transform:scale(2.2);opacity:0;}}
/* Components END */

/* 7) Main START */
.m_wrap { 
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding-top:75px; /* 헤더 높이만큼 패딩 */
}
@supports (height: 100dvh) {
  .m_wrap {
    /* 3. 지원하는 최신 브라우저에서는 dvh 적용 */
    min-height:100dvh;
  }
}

/* ── 헤더 (흰 배경, 78px) ── */
.m_header {
  background:var(--color_white);
  border-bottom:1px solid #eee;
  position:fixed;
  top:0;
  z-index:50;
  width: 100%;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m_header_inner {
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--space_12);
  width:100%;
  max-width:var(--container);
  height:100%;
}
.m_header_logo img {
  width:60px;
  height:auto;
}
.m_header_nav {
  flex: 1 0 0;
  display:flex;
  justify-content: flex-end;
  align-items:center;
  gap:var(--space_32);
}
.m_header_nav a {
  font-size:16px;
  font-weight:400;
  color:var(--color_ink);
  opacity:.6;
  display:flex;
  justify-content: center;
  align-items:center;
  gap:var(--space_8);
  transition:opacity .2s,color .2s;
}
.m_header_nav a:last-child {
  gap: 0;
}
.m_header_nav a img {
  width:26px;
  height:auto;
  filter: grayscale(100%);
  opacity: .8;
}
.m_header_nav a:hover{
  opacity:1;
}
.m_header_nav a.is_active{ 
  opacity:1;
  color:var(--color_violet_700);
  font-weight:800;
}
.m_header_nav a.is_active img {
  filter: none;
  opacity: 1;
}

/* ── m_banner 히어로 (보라 그라데이션 570) ── */
.m_banner{background:var(--gra_hero);position:relative;overflow:hidden;}
.m_banner_watermark{ 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  opacity: 0.6;
  pointer-events: none;
}
.m_banner_con{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space_48);
  min-height: 500px;
}
.m_banner_character {width:370px;height:auto;filter:drop-shadow(0 20px 44px rgba(0,0,0,.30));animation:m_float 4.5s ease-in-out infinite;}
@keyframes m_float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.m_banner_info {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space_12);
}
.m_banner_info .m_bi_eyebrow {
  color: var(--color_lavender);
  font-size: 31px;
  font-weight: 400;
}
.m_banner_info .m_bi_title {
  color: var(--color_white);
  font-size: 42px;
  font-weight: 800;
}
.m_banner_info .m_bi_logo { 
  width: 250px;  
  height: auto;
  margin: 2px 0;
}
.m_banner_info .m_bi_desc {
    color: var(--color_lavender);
    font-size: 19px;
}
.m_banner_info .bs_bt {
  width: 250px;
  margin-top: var(--space_8);
  min-height: 65px;
}

/* ── m_product 카드 섹션 (밝은 면) ── */
.m_product{background:var(--bg_basic);}
.m_product_inner{display:flex;flex-direction:column;gap:var(--space_24);padding-top:var(--space_64);padding-bottom:var(--space_64);}
/* 활성 2장 (가로형) */
.m_product_line{display:flex;gap:var(--space_24);}
.m_prod{flex:1;display:flex;gap:var(--space_24);background:var(--color_white);border-radius:var(--radius_md);padding:var(--space_24);box-shadow:0 10px 30px rgba(42,30,92,.06);}
.m_prod_thumb{width:200px;height:200px;flex:0 0 auto;border-radius:16px;object-fit:cover;background:#ede9fb;}
.m_prod_info{ 
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space_8);
  align-items: center;
  }
.m_prod_title{font-size:26px;font-weight:800;color:var(--color_ink);}
.m_prod_desc{font-size:15px;color:var(--color_disable);}
.m_prod_price{font-size:28px;font-weight:800;color:var(--color_gold);margin:var(--space_4,4px) 0 var(--space_8);}
.m_prod .bs_bt{ 
  align-self:flex-start;
  width: 100%;
}
/* 준비중 4장 */
.m_product_line_ready{display:flex;gap:var(--space_24);}
.m_ready{
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space_8);
  background: var(--color_white);
  border-radius: var(--radius_md);
  padding: var(--space_32) var(--space_16);
  box-shadow: 0 8px 24px rgba(42, 30, 92, .05);
  opacity: .6;
}
.m_ready_icon{width:150px;height:150px;object-fit:contain;filter:grayscale(1) opacity(.8);}
.m_ready_title{
  font-size: 20px;
  font-weight: 800;
  color: var(--color_ink);
}
.m_ready_desc{font-size:14px;color:var(--color_disable);line-height:1.5;}

/* ── m_ad 자사 브랜드 띠 (보라) ── */
.m_ad{background:var(--gra_ad);}
.m_ad_con {
  padding-top: var(--space_24);
  padding-bottom: var(--space_24);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space_64);
  min-height: 478px;
}
.m_ad_text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space_8);}
.m_ad_logo { 
    height: 90px;
    width: auto;
    margin-bottom: var(--space_8);
}
.m_ad_h{color:var(--color_white);font-size:30px;font-weight:800;}
.m_ad_sub {
  color: var(--color_lavender);
  font-size: 24px;
  font-weight: 700;
}
.m_ad_tags{color:var(--color_lavender);opacity:.85;font-size:14px;margin-top:var(--space_8);}
.m_ad_character{width:350px;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.28));}

/* ── 푸터 (흰 배경, 가운데) ── */
.m_footer{background:var(--color_white);border-top:1px solid #eee;margin-top:auto;}
.m_footer_inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space_8);padding-top:var(--space_48);padding-bottom:var(--space_48);color:var(--color_disable);font-size:14px;}
.m_footer_links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space_16);margin:var(--space_8) 0;}
.m_footer_links a{color:var(--color_ink);font-weight:700;}
.m_footer_links a:hover{color:var(--color_gold);}
.m_footer_copy{color:var(--color_disable);font-size:13px;}
/* Main END */

/* 8) Saju (s_) START */
.s_main{display:flex;flex-direction:column;}
/* 탭바 */
.s_tab {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg_basic);
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.s_tab_con {
  width: 100%;
  max-width: var(--container);
  display: flex;
  align-items: center;
  gap: var(--space_16);
  padding-top: var(--space_16);
  padding-bottom: var(--space_16);
}
.s_tab_used {
  width: auto;
  display: flex;
  gap: var(--space_24);
}
.s_tab_unused{display:flex;gap:var(--space_24);margin-left:var(--space_16);padding-left:var(--space_24);border-left:1px solid var(--natural_300,#D1D1D2);}
.s_tab_item {
  opacity: .75;
  width: auto;
  min-width: 135px;
  display: inline-flex;
  align-items: center;
  gap: var(--space_8);
  height: 48px;
  padding: 0 20px;
  border-radius: var(--radius_pill);
  font-size: 15px;
  font-weight: 700;
  color: var(--color_ink);
  background: var(--color_white);
  border: 1px solid var(--natural_200, #F0F0F0);
  transition: .15s;
}
.s_tab_item img{width:26px;height:26px;object-fit:contain;}
.s_tab_item.is_active {
  opacity: 1;
  background: var(--color_violet_700);
  color: var(--color_white);
  border-color: var(--color_violet_700);
}
.s_tab_item.is_disabled{background:transparent;border-color:transparent;color:var(--color_disable);cursor:not-allowed;opacity:.55;}
.s_tab_item.is_disabled img{filter:grayscale(1);}

/* 폼 섹션 */
.s_field{background:var(--gra_ad);}
.s_field_con{padding-top:var(--space_48);padding-bottom:var(--space_48);}
.s_field_card{display:flex;background:var(--color_white);border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(42,30,92,.22);}
.s_field_banner{flex:1 1 50%;min-height:600px;background:url('../img/jaya_s_banner_01.jpg') center/cover no-repeat;}
.s_field_form{flex:1 1 50%;display:flex;flex-direction:column;gap:var(--space_24);padding:var(--space_32);}

/* 폼 헤더 */
.s_form_head{display:flex;align-items:center;gap:var(--space_12);}
.s_form_head_icon{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--color_gold),#ff8f1f);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;}
.s_form_head_title{font-size:26px;font-weight:800;color:var(--color_ink);}
.s_form_head_price{font-size:20px;font-weight:800;color:var(--color_violet_700);}

/* 라벨 */
.s_field_row{display:flex;flex-direction:column;gap:var(--space_12);}
.s_label{font-size:16px;font-weight:800;color:var(--color_ink);}
.s_label_deco{font-size:12px;font-weight:400;color:var(--color_disable);margin-left:2px;}
.s_must{font-size:12px;font-weight:700;color:#e5392b;margin-left:2px;}

/* 라디오 */
.s_radio_group{display:flex;flex-wrap:wrap;gap:var(--space_16) var(--space_24);}
.s_radio{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--color_ink);cursor:pointer;}
.s_radio input{accent-color:var(--color_violet_700);width:18px;height:18px;}
.s_radio_custom{display:flex;align-items:center;gap:var(--space_12);}
.s_radio_custom .s_input{flex:1;}

/* 인풋 */
.s_input{width:100%;height:48px;border:1.5px solid var(--natural_300,#D1D1D2);border-radius:12px;padding:0 14px;font-family:inherit;font-size:15px;color:var(--color_ink);background:var(--color_white);}
.s_input:focus{outline:none;border-color:var(--color_violet_700);}
.s_input::placeholder{color:var(--natural_500,#A2A2A2);}
select.s_input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238f8f8f' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 14px center;}

/* 2열 (달력·성별) */
.s_field_2col{display:flex;gap:var(--space_24);}
.s_field_2col > .s_field_row{flex:1;}

/* 토글 (양력/음력 등) */
.s_toggle_group{display:flex;gap:var(--space_12);}
.s_toggle{flex:1;height:50px;border:1.5px solid var(--natural_300,#D1D1D2);border-radius:12px;background:var(--color_white);font-family:inherit;font-size:15px;font-weight:700;color:var(--color_disable);transition:.15s;}
.s_toggle.is_active{border-color:var(--color_violet_700);color:var(--color_violet_700);background:#f1edff;}

/* 시간 3분할 */
.s_time_group{display:flex;gap:var(--space_12);}
.s_time_field{flex:1;display:flex;flex-direction:column;gap:6px;}
.s_time_label{font-size:13px;font-weight:700;color:var(--color_ink);}

/* 이메일 헬퍼 */
.s_help{font-size:13px;color:var(--color_disable);}

/* 안내 + 동의 */
.s_notice{background:#f7f5ff;border-radius:14px;padding:var(--space_16);display:flex;flex-direction:column;gap:var(--space_12);}
.s_notice_text{font-size:14px;line-height:1.7;color:var(--color_ink);font-weight:700;}
.s_check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--color_ink);cursor:pointer;}
.s_check input{accent-color:var(--color_violet_700);width:20px;height:20px;}

/* 가벼운 확인 echo (초록 아웃라인) */
.s_echo{border:1.5px solid #17b6a0;border-radius:12px;padding:12px 16px;color:#0f9277;font-weight:700;font-size:14px;text-align:center;}

/* 결제 버튼 */
.s_pay_bt{width:100%;height:60px;border-radius:14px;background:var(--gra_pay);color:var(--color_white);font-family:inherit;font-size:18px;font-weight:800;transition:filter .15s;}
.s_pay_bt:hover{filter:brightness(1.05);}
/* Saju (s_) END */

/* 9) Interaction / UX (전역 — 모든 페이지 공통) START */
/* ① 모바일 파란 탭 하이라이트 제거 */
*{-webkit-tap-highlight-color:transparent;}
a,button,label,select,input,textarea,
.s_toggle,.s_tab_item,.s_radio,.s_check{-webkit-tap-highlight-color:transparent;}

/* ② 클릭 가능한 것 = 손가락 커서 */
a[href],button:not(:disabled),label,select,summary,
.s_toggle,.s_tab_item:not(.is_disabled),
.s_radio,.s_check,
input[type="radio"],input[type="checkbox"]{cursor:pointer;}
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;}
.s_radio input,.s_check input{cursor:pointer;}

/* ③ 버튼·탭·라벨 텍스트 선택 방지(더블탭 하이라이트 억제) */
button,.s_toggle,.s_tab_item,.m_header_nav a,.m_footer_links a{-webkit-user-select:none;user-select:none;}

/* ④ 키보드 포커스 접근성 */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
.s_toggle:focus-visible,.s_tab_item:focus-visible{outline:2px solid var(--color_violet_700);outline-offset:2px;}

/* ⑤ 마우스 호버 피드백 (터치기기 sticky 방지 위해 hover:hover 게이팅) */
@media (hover:hover){
  .s_toggle:not(.is_active):hover{border-color:var(--color_violet_700);color:var(--color_ink);}
  .s_tab_item:not(.is_active):not(.is_disabled):hover{border-color:var(--color_violet_700);opacity:1;}
  .s_input:hover:not(:focus){border-color:var(--natural_500,#A2A2A2);}
  .s_radio:hover,.s_check:hover{color:var(--color_violet_700);}
  .m_prod:hover,.m_card:hover{cursor:default;}
}

/* ⑥ 눌림(press) 피드백 */
.s_toggle:active,.s_tab_item:active,.s_pay_bt:active,.s_check:active{transform:translateY(1px);}
/* 9) Interaction / UX END */

/* 10) Form states & smooth transitions START */
/* 호버가 딱딱하지 않게 — 인풋·라디오·체크에 transition 추가 */
.s_input{transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;}
.s_input:focus{box-shadow:0 0 0 3px rgba(91,75,208,.12);}
.s_radio,.s_check{transition:color .2s ease;}
.s_radio span,.s_toggle,.s_tab_item{transition:border-color .2s ease, color .2s ease, background-color .2s ease, opacity .2s ease, transform .1s ease;}

/* 에러 상태 */
.s_input.is_error{border-color:#e5392b;box-shadow:0 0 0 3px rgba(229,57,43,.12);}
.s_toggle.is_error{border-color:#e5392b;}
.s_check.is_error{color:#e5392b;}
.s_check.is_error input{outline:2px solid #e5392b;outline-offset:1px;}
.s_err_msg{color:#e5392b;font-size:12px;font-weight:700;margin-top:2px;}

/* 유틸 */
.is_hidden{display:none !important;}

/* 11) Result (r_) START */
.r_main{display:flex;flex-direction:column;}
/* URL 안내 띠 */
.r_link {
  background: var(--gra_ad);
}
.r_link_con {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space_16);
  padding-top: 14px;
  padding-bottom: 14px;
}
.r_link_text {
  color: var(--color_white);
  font-size: 14px;
  font-weight: 400;
  word-break: keep-all;
  flex: 1 0 0;
}
.r_link_bt {
  padding: 10px 18px;
  border-radius: var(--radius_sm);
  background: var(--gra_yel);
  color: var(--color_white);
  font-weight: 800;
  font-size: 14px;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space_4);
}
.r_link_bt svg {
  width: 20px;
  height: auto;
}
/* 메타 */
.r_summary{background:var(--bg_basic);}
.r_summary .m_container{padding-top:var(--space_32);padding-bottom:var(--space_8);}
.r_summary_title{font-size:30px;font-weight:800;color:var(--color_ink);}
.r_summary_title span{color:var(--color_violet_700);}
.r_summary_info {
  margin-top: var(--space_12);
}
.r_summary_info span {
  width: 100%;
  display: inline-block;
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--radius_sm);
  padding: 8px 16px;
  font-size: 14px;
  color: var(--color_ink);
  font-weight: 700;
  word-break: keep-all;
}
/* 원국 8자 플립 카드 */
.r_8ja{background:var(--bg_basic);}
.r_8ja .m_container{padding-top:var(--space_24);padding-bottom:var(--space_48);}
.r_8ja_grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--space_24);
}
.r_card{perspective:1000px;}
.r_card_pos{font-size:14px;font-weight:800;color:var(--color_ink);margin-bottom:8px;}
.r_card_pos b{color:var(--color_violet_700);}
.r_card_flip{position:relative;width:100%;aspect-ratio:232/345;transform-style:preserve-3d;}
.r_card_face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 8px 22px rgba(42,30,92,.14);}
.r_card_back{background:url('../img/card_back.jpg') center/cover no-repeat;}
.r_card_front{transform:rotateY(180deg);overflow:hidden;background:#f4f1ea;}
.r_card_front img{width:100%;height:100%;object-fit:cover;display:block;}
.r_card.is_me .r_card_flip{outline:3px solid var(--color_gold);outline-offset:3px;border-radius:18px;}
.r_card.is_me .r_card_pos{color:var(--color_gold);}
.r_8ja_hint{text-align:center;color:var(--color_disable);font-size:13px;margin-top:20px;}
/* 일간·오행 bar */
.r_ilgan{background:#fff;}
.r_ilgan .m_container{padding-top:var(--space_48);padding-bottom:var(--space_48);}
.r_ilgan_title{font-size:22px;font-weight:800;color:var(--color_ink);margin-bottom:var(--space_24);line-height:1.4;}
.r_ilgan_graph {
  display: flex;
  align-items: flex-end;
  gap: var(--space_16);
}
.r_bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;}
.r_bar_track{width:100%;max-width:120px;height:144px;display:flex;align-items:flex-end;background:#f2f0fa;border-radius:10px;overflow:hidden;}
.r_bar_fill{width:100%;height:0;border-radius:10px 10px 0 0;}
.r_el_wood  .r_bar_fill{background:var(--color_wood,#3fae5a);}
.r_el_fire  .r_bar_fill{background:var(--color_fire,#e5392b);}
.r_el_earth .r_bar_fill{background:var(--color_earth,#f5ce1a);}
.r_el_metal .r_bar_fill{background:var(--color_metal,#EDE6D6);box-shadow:inset 0 0 0 1px #d8cfb8;}
.r_el_water .r_bar_fill{background:var(--color_water,#2e78d6);}
.r_bar_label{font-size:13px;font-weight:800;color:var(--color_ink);text-align:center;line-height:1.3;}
.r_ilgan_sum {
  border: 1px solid var(--natural_300);
  border-radius: var(--radius_xsm);
  text-align: center;
  margin-top: var(--space_24);
  font-weight: 800;
  color: var(--color_violet_700);
  padding: var(--space_8);
  word-break: keep-all;
}
/* 섹션 헤더 */
.r_sec_head{margin-bottom:var(--space_24);}
.r_sec_head h2{font-size:26px;font-weight:800;color:var(--color_ink);}
.r_sec_sub {
  margin-top: var(--space_8);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space_8);
}
.r_sec_sub svg {
  /* transform: translateY(10px); */
}
.r_sec_sub_text {
  color: var(--color_disable);
  font-size: 14px;
  flex: 1 0 0;
}
/* 사주해설 아코디언 */
.r_comm{background:var(--bg_basic);}
.r_comm .m_container{padding-top:var(--space_48);padding-bottom:var(--space_48);}
.r_acc{display:flex;flex-direction:column;gap:12px;}
.r_acc_item{background:#fff;border:1px solid #eee;border-radius:16px;overflow:hidden;}
.r_acc_head{width:100%;display:flex;align-items:center;gap:12px;padding:18px 20px;text-align:left;}
.r_acc_tag {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--color_violet_700);
  background: #f1edff;
  padding: 5px 12px;
  border-radius: var(--radius_pill);
  white-space: nowrap;
  min-width: 100px;
  text-align: center;
}
.r_acc_title{flex:1;font-size:16px;font-weight:800;color:var(--color_ink);}
.r_acc_chev {
  width: 34px;
  height: 34px;
  border-radius: var(--radius_pill);
  background: var(--color_violet_700);
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: var(--color_disable);
  transition: transform .3s ease;
  background: var(--color_ink);
}
.r_acc_chev svg path {
  stroke: var(--color_white);
  transition: stroke .3s ease;
}
.r_acc_item.is_open .r_acc_chev {
  transform:rotate(180deg);
  background: var(--natural_200);
}
.r_acc_item.is_open .r_acc_chev svg path {
  stroke: var(--color_ink);
}
.r_acc_item.is_open .r_acc_head{background:#faf8ff;}
.r_acc_body{overflow:hidden;height:0;}
.r_acc_body p{padding:0 20px 20px;font-size:15px;line-height:1.85;color:#3a3550;}
/* 대운 */
.r_flow{background:#fff;}
.r_flow .m_container{padding-top:var(--space_48);padding-bottom:var(--space_48);}
.r_flow_group{display:flex;flex-direction:column;gap:10px;}
.r_flow_li{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:14px;background:var(--bg_basic);}
.r_flow_li.is_now{background:#f1edff;box-shadow:inset 0 0 0 2px var(--color_violet_700);}
.r_flow_ganji{flex:0 0 92px;font-weight:800;color:var(--color_ink);}
.r_flow_age{flex:0 0 130px;font-size:13px;font-weight:800;color:var(--color_violet_700);background:#fff;border-radius:var(--radius_pill);padding:6px 12px;text-align:center;}
.r_flow_li.is_now .r_flow_age{background:var(--color_violet_700);color:#fff;}
.r_flow_desc{flex:1;font-size:14px;color:#4a4560;line-height:1.5;}
.r_flow_sum {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--natural_300);
  border-radius: var(--radius_sm);
  font-weight: 700;
  color: var(--color_ink);
  line-height: 1.7;
}
/* 마무리 밴드 */
.r_result{background:var(--gra_ad);}
.r_result .m_container{padding-top:var(--space_48);padding-bottom:var(--space_48);}
.r_result_msg{color:#fff;font-size:22px;font-weight:800;line-height:1.5;text-align:center;margin-bottom:28px;}
.r_result_luck {
  display: flex;
  gap: var(--space_16);
  flex-wrap: wrap;
  justify-content: center;
}
.r_luck_li {
  flex: 1 0 0;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 18px;
}
.r_luck_chip{font-size:13px;font-weight:800;color:var(--color_ink);background:var(--color_gold);border-radius:var(--radius_pill);padding:6px 14px;}
.r_luck_val{color:#fff;font-size:18px;font-weight:800;}
/* 하단 */
.r_end{background:var(--bg_basic);}
.r_end_con{padding-top:var(--space_48);padding-bottom:var(--space_48);}
.r_end_button {
  display: flex;
  gap: var(--space_16);
}
.r_end_button .bs_bt{flex:1;}
.r_end_info{margin-top:var(--space_24);display:flex;flex-direction:column;gap:8px;}
.r_end_info p{color:var(--color_disable);font-size:14px;text-align:center;}
/* Result (r_) END */

/* 크로스플랫폼: iOS 텍스트 크기 자동확대 방지, 탭 지연 제거 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{touch-action:manipulation;}
/* m_ad 캐릭터 자연스러운 float (데스크탑만 — 모바일 scaleX flip 보존) */
@keyframes m_float2{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-12px) rotate(-2deg);}}
@media (min-width:651px){ .m_ad_character{animation:m_float2 5.5s ease-in-out infinite;} }
/* 클릭 눌림 표시(내비 지연 동안 보임) */
.is_pressing{transform:scale(.96) !important;opacity:.9 !important;transition:transform .12s ease, opacity .12s ease;}
/* 접근성: 모션 최소화 선호 시 애니메이션·transition 끔 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .m_banner_character,.m_ad_character{animation:none !important;}
}
/* 10) Form states END */

@media screen and (max-width: 1048px) {

  .m_wrap {
    padding-top: 0;
    padding-bottom: 68px; /* 모바일 헤더 높이만큼 패딩 */
  }

  .m_header {
    position: fixed;
    top: auto;
    bottom: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    height: 68px;
  }

  .m_header_inner {
    gap: var(--space_48);
  }

  .m_header_nav a {
    flex: 1 0 0;
    background: var(--natural_200);
    height: 40px;
    border-radius: var(--radius_pill);
  }

  .m_header_nav a.is_active {
    background: var(--color_violet_700);
    color: var(--color_white);
  }

  .m_banner_character {
    width: 270px;
    height: auto;
  }

  .m_product_line {
    flex-wrap: wrap;
  }

  .m_prod {
    flex: 0 0 100%;
  }

  .m_prod_thumb {
    width: 300px;
    height: 300px;
  }

  .m_product_line_ready {
    flex-wrap: wrap;
  }

  .m_ready {
    flex: 0 0 calc(50% - var(--space_12));
  }

  .m_ad_con {
    gap: var(--space_12);
  }

  .m_ad_character {
    width: 200px;
    height: auto;
  }

  .m_ad_con {
    min-height: 400px;
  }

  .m_ad_logo {
    height: 64px;
    width: auto;
    margin-bottom: var(--space_8);
  }

  .m_ad_h {
    font-size: 22px;
    text-align: center;
  }

  .m_ad_sub {
    font-size: 18px;
    text-align: center;
  }

  .m_ad_tags {
    text-align: center;
  }

  .m_ad_text {
    flex: 0 0 210px;
  }

  .s_field_card {
    flex-wrap: wrap;
  }

  .s_field_banner {
    flex: 0 0 100%;
    height: 380px;
    min-height: auto;
  }

}

@media screen and (max-width: 650px) {

  .m_header_logo {
    /* display: none; */
    flex: 0 0 60px;
  }

  .m_header_nav {
    gap: var(--space_12);
  }

  .m_header_nav a {
    font-size: 14px;
  }

  .m_header_nav a img {
    width: 20px;
    height: auto;
  }

  .m_banner_watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: auto;
    opacity: 0.6;
    pointer-events: none;
  }

  .m_banner_con {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space_12);
    min-height: 500px;
    height: auto;
    padding: var(--space_48);
  }

  .m_banner_character {
    width: 270px;
    height: auto;
  }

  .m_banner_info {
    flex: 0 0 100%;
  }

  .m_prod {
    flex-wrap: wrap;
  }

  .m_prod_thumb {
    width: 100%;
    height: auto;
  }

  .m_ready {
      flex: 0 0 100%;
  }

  .m_ad_con {
    flex-wrap: wrap;
  }

  .m_ad_text {
    order: 2;
  }

  .m_ad_character {
    width: 200px;
    height: auto;
    order: 1;
    transform: scaleX(-1);
  }

  .s_field_banner {
    height: 300px;
  }

  .s_field_2col {
    flex-wrap: wrap;
  }

  .s_field_2col > .s_field_row {
    flex: 0 0 100%;
  }

  .r_8ja_grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--space_24);
  }

  .r_luck_li {
    flex: 0 0 calc((100% - var(--space_16)) / 2);
    max-width: none;
  }

}

@media screen and (max-width: 500px) {

  .m_header {
    width: 100%;
    overflow: auto;
    flex: 0 0 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .m_header_inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* 하단 공통 메뉴 = 2.5개 노출(옆으로 더 있음을 암시) — 2026-07-07
     스크롤 = nav 내부에서만 → 로고 폭과 무관하게 항상 2.5개, 로고는 고정 노출 */
  .m_header_nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 스크롤 영역을 화면 오른쪽 끝까지 확장(컨테이너 패딩 상쇄) — 끝까지 스크롤하면 24px 여백 복원 */
    margin-right: calc(var(--space_24) * -1);
    padding-right: var(--space_24);
  }
  .m_header_nav::-webkit-scrollbar { display: none; }
  .m_header_nav a {
    min-width: 0;
    flex: 0 0 calc((100% - 24px) / 2.5); /* 24px = 노출되는 갭 2개(12×2) */
  }

  .m_banner_character {
    width: 100%;
    max-width: 270px;
    height: auto;
  }

  .m_banner_info .m_bi_eyebrow {
    font-size: 22px;
  }

  .m_banner_info .m_bi_title {
    font-size: 30px;
  }

  .m_banner_info .m_bi_logo {
    width: 180px;
  }

  .m_banner_info .m_bi_desc {
    font-size: 14px;
  }

  .m_banner_info .bs_bt {
    width: 200px;
    margin-top: var(--space_8);
    min-height: 58px;
  }

  .s_time_group {
    flex-wrap: wrap;
  }
  .s_time_field {
    flex: 0 0 100%;
  }

  .r_link_con {
    gap: var(--space_8);
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .r_link_text {
    flex: 0 0 100%;
  }

  .r_ilgan_graph {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .r_bar {
    flex: 0 0 calc((100% - var(--space_16)) / 2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .r_acc_head {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
  }

  .r_acc_tag {
    position: relative;
    top: 0.3em;
    flex: 0 0 100px;
  }

  .r_acc_title {
    position: relative;
    top: 0.1em;
    flex: 0 0 calc(100% - 112px);
  }

  .r_acc_chev {
    background: transparent;
    border: 1px solid var(--natural_300);
  }

  .r_acc_item.is_open .r_acc_chev {
    border: 0px solid var(--natural_300);
  }

  .r_acc_chev svg path {
    stroke: var(--color_ink);
  }

  .r_flow_li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space_12);
  }

  .r_flow_ganji {
    flex: 0 0 100%;
  }

  .r_flow_age {
    flex: 0 0 auto;
  }

  .r_flow_desc {
    flex: 0 0 100%;
  }

  .r_result_msg {
    text-align: left;
  }

  .r_end_button {
    display: flex;
    flex-wrap: wrap;
  }

  .r_end_button .bs_bt {
    flex: 0 0 100%;
    min-height: 57px;
  }

  .r_end_info p {
    text-align: left;
  }

  .s_tab_con.i_tab_con {
    justify-content: flex-start;
  }
  .s_tab_used {
    gap: var(--space_12);
  }

} 

@media screen and (max-width: 450px) {
  .m_header_nav a {
    flex: 0 0 calc((100% - 24px) / 1.5);
  }
}

@media screen and (max-width: 380px) {

  .r_8ja_grid {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: var(--space_24);
  }

  .r_luck_li {
    flex: 0 0 100%;
    max-width: none;
  }

  .i_tab_item {
    flex: 0 0 calc((100vw - 48px) / 1.5) !important;
  }

}

/* =========================================================
   ▼ style_ip.css 병합분 (2026-07-07 마감 — 임시 분리 파일 해소, 단일 CSS 회복)
   ========================================================= */

/* 12) Tokens v2 START — Figma 실측 보강 (2026-07-07, get_design_context)
   ※ 실측값으로 상단 :root의 근사 토큰을 override (토큰 규율 §10). */
:root{
  --gra_section:linear-gradient(173deg,#6a5be2 0%,#8e5bd8 100%);  /* gradient/section (i_banner 실측 172.6°) */
  --gra_sub:linear-gradient(107deg,#fac000 0%,#ff7700 100%);      /* gradient/sub 실측 (m_ad 107°/배너 116°) */
  --gra_hero:linear-gradient(168deg,#5e6ce0 0%,#9b5fd6 100%);     /* gradient/hero 실측 (구 근사 대체) */
  --gra_pay:linear-gradient(177deg,#4d61ef 0%,#8e4def 100%);      /* 결제·문의 버튼 실측 (구 근사 대체) */
  --color_disable_bt:#b9b9b9;                                     /* text/disable_bt 실측 */
  --color_green:#18b894;                                          /* point/green 실측 (구 근사 #17b6a0 대체) */
}
/* 12) Tokens v2 END */

/* 13) Info·Policy (i_/po_) START — Figma info 249:620 / info_02 254:762 / info_03 254:877 / policy 255:995 */
.i_main,.po_main{display:flex;flex-direction:column;}

/* 탭바 (s_tab 재사용 + 가운데 정렬) */
.i_tab_con{justify-content:center;}
.i_tab_item{min-width:150px;justify-content:center;}

/* 탭 패널 전환 */
.i_panel{display:none;}
.i_panel.is_active{display:block;}

/* 배너 (탭별 테마: 기본 보라 section / green_ver / sub_ver) */
.i_banner{background:var(--gra_section);}
.i_banner.green_ver{background:var(--gra_cta);}
.i_banner.sub_ver{background:var(--gra_sub);}
.i_banner_con{display:flex;align-items:center;justify-content:center;gap:var(--space_24);padding-top:var(--space_24);padding-bottom:var(--space_24);min-height:248px;}
.i_banner_character{width:200px;height:200px;object-fit:contain;flex:0 0 auto;}
.i_banner_title{font-size:36px;font-weight:800;line-height:1.5;color:var(--color_white);}
.i_banner_info{display:flex;flex-direction:column;gap:var(--space_12);}
.i_banner_text{font-size:18px;font-weight:400;line-height:27px;color:var(--color_white);}
.po_banner .i_banner_con{min-height:102px;}

/* 본문 (흰 배경) */
.i_info{background:var(--color_white);}
.i_info_con{padding-top:var(--space_48);padding-bottom:var(--space_48);}
.i_info_group{display:flex;flex-direction:column;gap:var(--space_24);}
.i_info_group_li{display:flex;flex-direction:column;gap:var(--space_8);padding-bottom:var(--space_24);border-bottom:1px solid var(--natural_200,#F0F0F0);}
.i_info_group_li:last-child{border-bottom:0;padding-bottom:0;}
.i_info_group_li_title{font-size:20px;font-weight:800;line-height:30px;color:var(--color_violet_700);}
.i_info_group_li_title.green_ver{color:var(--color_green_deep);} /* point/green-deep 실측 #0f9277 */
.i_info_group_li_text{font-size:15px;font-weight:400;line-height:22px;color:var(--color_ink);}
.i_info_group_line{border:0;border-top:1px solid var(--natural_200,#F0F0F0);width:100%;margin:0;}

/* 소개: 자야 캐릭터 블록 (가운데) */
.i_about_jaya{align-items:center;text-align:center;border-bottom:0;padding-bottom:0;}
.i_about_jaya .i_info_group_li_title{width:100%;}
.i_about_character{width:350px;height:350px;object-fit:contain;}

/* 회색 카드 (무엇이 다른가요 / 문의 폼) — neutral/100 · radius input 6 실측 */
.i_info_group_card{display:flex;flex-direction:column;gap:var(--space_24);background:var(--natural_100,#F8F8F8);border-radius:6px;padding:var(--space_16);}
.i_info_group_card_title{font-size:20px;font-weight:800;line-height:30px;color:var(--color_gold_deep);}
.i_info_group_card_title.green_ver{color:var(--color_green_deep);}
.i_info_group_card_text{font-size:15px;font-weight:400;line-height:22px;color:var(--color_ink);}

/* 문의 탭 */
.i_contact_intro{text-align:center;border-bottom:0;}
.i_contact_form .s_radio_group{gap:var(--space_16);}
.i_textarea{height:130px;padding:12px;resize:vertical;}
.i_contact_note{font-size:15px;color:var(--color_ink);}
.i_send_bt{height:56px;border-radius:10px;box-shadow:0 4px 10px rgba(139,126,255,.4);}

/* CTA 밴드 (m_ad 재사용 + 탭별 테마) — 기본 보라(--gra_ad) / green_ver / sub_ver */
.i_ad.green_ver{background:var(--gra_cta);}
.i_ad.sub_ver{background:var(--gra_sub);}
.i_ad_con{min-height:398px;gap:var(--space_24);}
.i_ad_text{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space_24);width:314px;}
.i_ad_h{color:var(--color_white);font-size:30px;font-weight:800;line-height:45px;text-align:right;width:100%;}
.i_ad_sub{color:var(--color_white);font-size:15px;font-weight:400;line-height:22px;text-align:right;width:100%;}
.i_ad_bt{width:100%;padding:var(--space_24);}
.i_ad_bt.sub_ver{background:var(--gra_sub);color:var(--color_white);}
.i_ad_bt.sub_ver:hover{filter:brightness(1.05);}
.i_ad_bt.hero_ver{background:var(--gra_hero);color:var(--color_white);}
.i_ad_bt.hero_ver:hover{filter:brightness(1.05);}

/* policy: 로고 중앙 단독 헤더 + 조항 리스트 */
.m_header.center_ver .m_header_inner{justify-content:center;}
.po_text{display:flex;flex-direction:column;gap:var(--space_8);}
.po_text p{font-size:15px;font-weight:400;line-height:22px;color:var(--color_ink);}
.po_group .i_info_group_li{border-bottom:0;}

/* 반응형 최소 안전장치 (정밀 반응형은 P2 대표님) */
@media screen and (max-width: 1048px){
  .i_banner_con{flex-wrap:wrap;text-align:center;}
  .i_banner_title{font-size:28px;}
  .i_ad_con{flex-wrap:wrap;}
  .i_ad_text{align-items:center;}
  .i_ad_h,.i_ad_sub{text-align:center;}
}
/* 모바일: info 탭바 = 2.5개 노출(좌우 스크롤 암시) — 2026-07-07 대표님 지시 */
@media screen and (max-width: 500px){
  .i_tab_con{justify-content:flex-start;}
  .i_tab_con .s_tab_used{gap:var(--space_12);}
  .i_tab_item{min-width:0;flex:0 0 calc((100vw - 48px) / 2.5);padding:0 var(--space_8);white-space:nowrap;} /* 48px = 왼쪽 패딩 24 + 노출 갭 12×2 — 2.5개째가 화면 끝에 걸침 */
}
/* 13) Info·Policy END */

/* 14) Result Day (r_d_) START — Figma result_day 238:288 (2026-07-07 실측) */
/* 오늘의 일진 */
.r_d_summary{background:var(--bg_basic);}
.r_d_summary_con{display:flex;flex-direction:column;gap:var(--space_12);padding-top:var(--space_24);padding-bottom:var(--space_24);}
.r_d_summary_date{display:flex;align-items:center;gap:var(--space_8);}
.r_d_summary_date_chip{background:var(--color_white);border:1px solid var(--color_green);border-radius:var(--radius_pill);padding:var(--space_8) var(--space_16);font-size:15px;font-weight:700;color:var(--color_green_deep);}
.r_d_summary_date_text{font-size:15px;font-weight:400;color:var(--color_ink);}
.r_d_summary_title{font-size:36px;font-weight:800;line-height:1.5;color:var(--color_green_deep);}
.r_d_summary_desc{font-size:18px;font-weight:400;line-height:27px;color:var(--color_ink);}
.r_d_summary_desc b{color:var(--color_green_deep);font-weight:700;}

/* 오늘의 총운 (도넛) */
.r_d_chart{background:var(--color_white);}
.r_d_chart_con{display:flex;align-items:center;gap:var(--space_24);padding-top:var(--space_24);padding-bottom:var(--space_24);}
.r_d_chart_donut{position:relative;width:200px;height:200px;flex:0 0 auto;}
.r_d_chart_donut svg{width:100%;height:100%;display:block;}
.r_d_donut_track{stroke:var(--natural_200,#F0F0F0);}
.r_d_donut_number{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space_4);text-align:center;}
.r_d_donut_score{font-size:36px;font-weight:800;line-height:1.2;color:var(--color_gold_deep);}
.r_d_donut_entire{font-size:15px;font-weight:400;color:var(--color_disable);}
.r_d_chart_info{display:flex;flex-direction:column;gap:var(--space_4);max-width:420px;}
.r_d_chart_info_title{font-size:18px;font-weight:700;line-height:27px;color:var(--color_green_deep);}
.r_d_chart_info_text{font-size:15px;font-weight:400;line-height:22px;color:var(--color_ink);}

/* 항목별 운세 = result.html의 r_acc 계열 그대로 재사용 (공용 블록 재사용 원칙 — 2026-07-07).
   day 전용 최소 확장 = 점수 pill 하나만: */
.r_acc_score{flex:0 0 auto;font-size:13px;font-weight:800;color:var(--color_green_deep);background:var(--color_white);border:1px solid var(--color_green);border-radius:var(--radius_pill);padding:5px 12px;white-space:nowrap;}

/* 마무리 행운(r_result_luck·r_luck_li)·하단(r_end·bs_bt) = result.html 클래스 그대로 재사용, 추가 스타일 없음 */

/* 반응형 최소 안전장치 (정밀 반응형은 P2 대표님) */
@media screen and (max-width: 1048px){
  .r_d_chart_con{flex-wrap:wrap;justify-content:center;}
}
/* 14) Result Day (r_d_) END */