/* ══════════════════════════════════════════════════════════════════════
   무명신점 — A 시안(2000년대 포털 유료 운세관) Production 적용 스타일시트
   ------------------------------------------------------------------------
   이 파일은 assets/editorial.css 의 클래스/DOM 구조를 그대로 사용하며,
   editorial.css 뒤에 로드되어 색상·타이포그래피·여백만 재정의합니다.
   HTML 구조, id, class 이름, JavaScript는 변경하지 않습니다.
   (기존 로직/결제/계산 코드와의 결합을 끊지 않기 위한 순수 프레젠테이션 레이어)
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* 토큰 재정의 — 기존 변수 이름을 그대로 사용해 하위 규칙이 자동으로 따라오게 함 */
  --background:#e8e3d0;        /* 베이지/아이보리 포털 배경 */
  --surface:#ffffff;           /* 콘텐츠 박스(흰 종이) */
  --surface-alt:#f1ede0;       /* 표 짝수행/보조 배경 */
  --text:#1c2333;              /* 본문 진한 남색 텍스트 */
  --muted:#5a5a52;             /* 보조 설명 회색 */
  --inverse:#1c2333;           /* 어두운 배경이 사라졌으므로 밝은 텍스트 대신 진한 텍스트로 */
  --inverse-muted:#5a5a52;
  --border:#b9b2a0;
  --divider:#c8c0ac;
  --vermilion:#c0392b;         /* 가격/CTA용 강한 빨강 */
  --vermilion-hover:#96281d;
  --emphasis:#a32920;
  --error:#a32920;
  --portal-blue:#1a4fa0;       /* 상품명 링크·section 제목용 파랑 */
  --portal-blue-dark:#0e3a80;
  --gold-1:#f3d9ab;
  --gold-2:#e0b25a;
  --gold-3:#c8933a;
  --green-info:#2f7d32;
}

body{ background:var(--background); font-size:13px; }

/* ══════════════════════════════════════════════════════════════════════
   3차 정밀 시각 교정(A3) — 사용자가 첨부한 원본 A 4장(390×844, @3x) 기준
   실측: masthead~opening~카탈로그 헤더~상품 행 높이, 원국표 행 높이,
   결과 섹션 제목/본문 크기, 입력폼 셀 구조를 픽셀 단위로 비교해 축소.
   구조(HTML/JS)는 그대로, 오직 font-size/line-height/padding/margin만 조정.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 헤더: 파란 그라데이션 포털 바 ─────────────────────────────────── */
.masthead{
  background:linear-gradient(180deg,#7ea0d6,#3a5f95 55%,#25436e);
  border-bottom:2px solid #142744;
  padding:7px 0;
  margin:0 -28px 0;
  padding-left:28px;padding-right:28px;
}
.masthead .brand{ color:#fff9ea; gap:7px; font-size:14px; }
.masthead .brand small{ color:#dbe6f7; letter-spacing:.04em; font-size:11px; }
/* A4: 상단 파란 헤더의 빨간 사각 인장(無名神占 한자 로고)을 제거 — 브랜드명
   "무명신점" 텍스트와 파란 헤더 디자인 자체는 그대로 유지. 새 로고로 대체하지 않음.
   (index.html·services/*.html 모두 같은 .brand-seal 클래스를 공유하므로 한 번에 적용) */
.masthead .brand-seal{ display:none; }
.masthead nav a,.masthead .back-link{ color:#eaf1ff; text-decoration:underline; text-underline-offset:3px; font-weight:600; font-size:12px; }
.masthead nav a:hover,.masthead .back-link:hover{ color:#fff; }

/* ── 히어로: 원본 A 홈에는 이런 소개 카피 자체가 없음(A3에서 실측 확인 후 축소,
   A4에서 재확인 결과 완전히 없는 것으로 판단해 전면 숨김). 실제 안내/개정일
   텍스트는 삭제하지 않고 DOM에는 남겨두되 화면에서만 뺀다. ────────────── */
.opening{ display:none; }

/* ── ◆ 사주풀이 메뉴 : gold gradient section bar ──────────────────── */
.catalog-paper{
  background:var(--surface);
  border-top:0;
  border:1px solid #999;
  margin:0 0 14px;
  /* A4 밀도 재교정: 마지막 상품(04 궁합) 아래에만 다른 상품 사이 간격(약 10px)보다
     훨씬 큰 여백(원본 대비 약 2배)이 남아있어 목록 전체가 실제보다 헐렁해 보이는
     원인이었다. 다른 행들의 여백과 맞춰 상자 하단 padding을 최소화한다. */
  padding:0 0 2px;
}
.catalog-heading{
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));
  border:0; border-bottom:1px solid #a4712a;
  padding:6px 12px; margin:0 0 2px;
}
.catalog-heading h2{ font-family:var(--font-body); font-size:12px; font-weight:800; color:#5c3a0d; text-shadow:0 1px 0 rgba(255,255,255,.4); }
.catalog-heading h2::before{ content:"◆ "; }
.catalog-heading p{ font-size:10px; color:#5c3a0d; }

/* 4개 상품: 카드가 아니라 번호 붙은 목록으로 강제 재배치 —
   원본 A 재실측(구분선 간 간격 기준): 상품 1건당 행 높이 약 49.7px(390 CSS px 기준),
   이름+설명 2줄 압축. A4에서 8px 0으로 미세 조정해 재실측치에 정확히 맞춤. */
.v5-catalog{ display:block !important; padding:0 12px; }
.menu-entry{
  border-top:0 !important; border-bottom:1px dotted var(--border);
  padding:8px 0 !important; background:transparent;
}
.menu-entry:first-child{ border-top:1px solid var(--border) !important; }
.menu-entry:last-child{ border-bottom:0; }
.menu-select{
  display:grid !important; grid-template-columns:16px minmax(0,1fr) auto !important;
  column-gap:6px !important; row-gap:1px !important; flex-wrap:unset !important;
  min-height:0;
}
.entry-number{ display:inline !important; color:#888; font-size:10px; }
.entry-copy{ width:auto !important; }
.entry-name{
  font-family:var(--font-body) !important; font-weight:800 !important;
  font-size:13.5px !important; line-height:1.3 !important;
  color:var(--portal-blue) !important; text-decoration:underline; text-underline-offset:2px;
}
.menu-select:hover .entry-name{ color:var(--vermilion) !important; }
.entry-desc{ font-size:10px !important; line-height:1.4 !important; color:#666 !important; margin:0 !important; max-width:none !important; }
.entry-price{
  font-size:12px !important; font-weight:800 !important; color:var(--vermilion) !important;
  align-self:start;
}
/* A4: 원본 A 홈의 상품 행은 번호+이름+설명+가격 한 덩어리로 끝나고 별도
   "상세 안내 ↗" 행이 없다(실측 재확인). 이 행 때문에 상품 1건의 높이가
   늘어나지 않도록 화면에서 숨긴다 — 실제 링크(services/*.html)는 DOM에 남아
   스크린리더/키보드 탐색으로는 계속 접근 가능하다. */
.entry-detail{ display:none; }
/* A4 밀도 재교정: 원본 A 홈은 상품 4건이 전부 완전히 동일한 표 행(점선 구분선 포함)이며
   "첫 상품만 강조 카드"라는 개념 자체가 없다(실측 재확인). 그런데 원래 디자인의
   .menu-featured{border:0;padding:0} 리셋이 1번 상품(평생사주)에만 그대로 남아있어,
   1번 상품 아래에만 점선 구분선이 사라지고 그 자리가 빈 공백으로 보이는 결함이 있었다.
   이 리셋을 제거해 1~4번 상품 모두 동일한 .menu-entry 테두리/여백 규칙을 받도록 통일한다
   (아래 폰트 크기 재지정은 기존 .entry-name/.entry-desc/.entry-price 기본값과 이미 같은
   값이라 시각적으로 달라지는 부분은 없다). */
.menu-featured{ z-index:1; }
.menu-featured .entry-name{ font-size:13.5px !important; }
.menu-featured .entry-desc{ font-size:10px !important; margin:0 !important; }
.menu-featured .entry-price{ font-size:12px !important; }
.menu-featured .entry-detail{ margin-top:1px !important; }

/* 원본 A 홈에는 이 "01 메뉴 선택 → 04 결과 열람" 단계 안내 줄이 없음(실측 확인) —
   실제 콘텐츠는 삭제하지 않고 화면에서만 숨김(표시 전용 처리). */
.purchase-path{ display:none; }

/* ── 안내 영역: ◆ 무명신점 안내 (녹색/파랑 정보 문구) ─────────────── */
.saved-results{ border:1px solid #999; background:var(--surface); padding:0 !important; margin:0 0 10px; }
.saved-results .eyebrow{ color:var(--portal-blue); font-weight:800; font-size:10px; }
.saved-results h2{ font-family:var(--font-body); font-size:13px; font-weight:800; color:var(--text); }
.saved-results p:not(.eyebrow){ font-size:10.5px; color:#555; line-height:1.5; }
.saved-item{ color:var(--portal-blue); text-decoration:underline; border-color:var(--divider) !important; font-size:11px; padding:8px 0 !important; }
.saved-item:hover{ color:var(--vermilion); }
#savedList:not(:has(button)){ border-color:var(--divider) !important; color:#777 !important; font-size:10.5px; }
.plain-button{ color:#777; font-size:9.5px; text-decoration:underline; }
/* A4: 원본 A 홈에는 "다시 펼쳐 읽기" 같은 별도 큰 박스가 없다(실측 재확인).
   실제 재열람 기능은 삭제할 수 없는 진짜 기능이므로, details/summary로 감싸
   기본 화면에서는 한 줄 링크로만 보이게 접어둔다 — 탭 한 번이면 그대로 전부
   보이며 savedList/clearSavedResults 등 기존 JS는 전혀 손대지 않았다. */
.saved-results-collapsible{ padding:0 !important; }
.saved-results-collapsible>summary{
  list-style:none; cursor:pointer; padding:9px 12px; font-size:11px;
  display:flex; gap:6px; align-items:baseline; min-height:0;
}
.saved-results-collapsible>summary::-webkit-details-marker{ display:none; }
.saved-results-collapsible>summary::before{ content:"▸ "; color:#888; }
.saved-results-collapsible[open]>summary::before{ content:"▾ "; }
.saved-results-collapsible>summary .eyebrow{ font-size:10px; }
.saved-results-collapsible>summary #savedTitle{ font-size:11px; font-weight:700; color:var(--text); }
.saved-results-collapsible .saved-body{ padding:0 12px 10px; border-top:1px dotted var(--divider); margin-top:0; padding-top:8px; }
/* 두 번째 saved-results(무명신점 소개)는 녹색 강조 정보 박스로 구분 */
.saved-results:has(#aboutTitle){ border-left:4px solid var(--green-info); }
.saved-results:has(#aboutTitle) .eyebrow{ color:var(--green-info); }

/* ── footer ─────────────────────────────────────────────────────── */
.site-footer{ color:#555; font-size:10px; border-top:1px dotted var(--border); padding-top:12px; }
.footer-brand{ color:var(--text); font-family:var(--font-body); font-weight:800; font-size:13px; }
.achievement,.insta-link{ color:var(--portal-blue); text-decoration:underline; font-size:10px; }
.site-footer a{ color:var(--portal-blue); }
.site-footer a:hover{ color:var(--vermilion); }
.biz{ border-top:1px dotted var(--border); color:#777; }

/* ── 상품 상세 (services/*.html) ───────────────────────────────────── */
body.service-page{ background:var(--background); }
.service-shell{ max-width:640px; }
/* 원본 A 상품 상세 실측: 제목·요금·설명·CTA가 테두리 하나짜리 박스 안에
   전부 모여 있는 단일 카드 구조 — service-cover 자체에 박스를 주고
   내부의 service-order(요금/CTA)는 별도 박스가 아니라 점선으로만 구분. */
.service-cover{
  display:block; border:1px solid #999; background:var(--surface);
  padding:12px 14px; margin:10px 0 0;
}
.service-cover .eyebrow{ font-size:10px; color:var(--portal-blue); font-weight:700; }
.service-cover .eyebrow span{ color:#777; }
.service-cover h1{ font-family:var(--font-body); font-size:17px; font-weight:800; letter-spacing:0; margin-top:3px; }
.service-deck{ font-family:var(--font-body); font-size:11px; color:#555; margin-top:3px; }
.service-intro-line{ font-size:10.5px; color:#777; margin-top:3px; }
.service-order{
  border:0; border-top:1px dashed var(--divider);
  background:transparent; padding:10px 0 0; margin-top:10px; color:var(--text);
}
.service-order::before{ content:"이용요금"; display:block; font-size:10px; color:#777; margin-bottom:2px; }
.service-order .price{ color:var(--vermilion); font-size:19px; font-weight:800; }
.service-order .price span{ font-size:12px; }
.service-order p{ font-size:11px; color:#666; }
.service-order .cta{ margin-top:8px !important; }
.service-order small{ font-size:10px; }
/* 원본 A에는 "이 풀이에서 읽는 것/어떤 서비스인가요/입력할 정보/..." 같은
   현대적 정보 섹션이 없다(실측 확인). 실제 안내 문구(오류 문의 이메일 등 실제
   고객지원 정보 포함)는 삭제하지 않되, <details>로 감싸 기본 화면에서는
   접혀 있게 하여 원본 A처럼 카드 하나로 화면이 끝나는 느낌을 유지한다.
   탭 한 번이면 그대로 볼 수 있어 정보 접근성은 그대로 보존된다. */
.service-body{ background:transparent; border:0; padding:8px 2px 0; margin-top:0; }
.service-more{ margin-top:2px; }
.service-more>summary{
  list-style:none; cursor:pointer; font-size:11px; color:var(--portal-blue);
  text-decoration:underline; padding:6px 0; min-height:0;
}
.service-more>summary::-webkit-details-marker{ display:none; }
.service-more>summary::before{ content:"▸ "; }
.service-more[open]>summary::before{ content:"▾ "; }
.service-section{ display:block !important; border-top:1px dotted var(--divider) !important; padding:8px 0 !important; }
.service-section:first-of-type{ border-top:0 !important; }
.service-section h2{ font-family:var(--font-body); font-size:11px; font-weight:700; color:#777; margin-bottom:2px; }
.service-section h2::before{ content:""; }
.service-section p{ font-size:10.5px; line-height:1.5; color:#777; margin-bottom:4px !important; }
.service-outline{ display:block; font-size:10.5px; }
.service-outline li{ border-bottom:0 !important; border-left:0 !important; padding:3px 0 3px 12px !important; position:relative; color:#777; }
.service-outline li::before{ content:"•"; position:absolute; left:0; color:#999; font-size:11px; top:1px; }
/* 하단 중복 CTA(service-bottom-cta)는 원본 A에 없음 — 실제 링크는 유지하되 화면 표시만 생략 */
.service-bottom-cta{ display:none; }
.service-footer{ color:#666; font-size:9.5px; border-top:1px dotted var(--border); padding-top:10px; }
.service-footer a{ color:var(--portal-blue); }

/* ── CTA / 결제 버튼: 빨간 입체 버튼 ────────────────────────────────── */
.btn-submit,.rp-home-btn,.cta,.pay-confirm-btn{
  background:linear-gradient(180deg,#e2543f,#b5301f 55%,#8c2114) !important;
  border:1px solid #6e190e !important;
  border-radius:3px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -6px 10px rgba(0,0,0,.25) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.5);
  font-weight:800 !important;
  color:#fff5e6 !important;
  padding:11px 16px !important; font-size:14px !important; min-height:40px !important; line-height:1.4 !important;
}
.btn-submit:hover,.rp-home-btn:hover,.cta:hover,.pay-confirm-btn:hover{
  background:linear-gradient(180deg,#ea6650,#c2382a 55%,#96281d) !important;
}
.btn-submit:active,.cta:active,.pay-confirm-btn:active{ filter:brightness(.92); }
.pay-cancel-btn{ color:#777; text-decoration:underline; }

/* ── 입력 폼: 표 형태(왼쪽 회색 label / 오른쪽 값) ─────────────────── */
.modal-panel{ background:var(--surface); border-top:0; border:1px solid #999; padding:14px 14px calc(20px + env(safe-area-inset-bottom)) !important; }
.flow-step{ color:var(--vermilion); font-size:10.5px; }
.modal-top{ border-bottom:2px solid var(--gold-3); padding-bottom:8px; margin-bottom:10px !important; }
.modal-title{ font-family:var(--font-body); font-size:16px; font-weight:800; }
.modal-price{ color:var(--vermilion); font-weight:800; }
.form-intro{ font-size:11px; color:#666; margin-bottom:10px !important; }

/* 원본 A 입력폼 실측: 왼쪽 회색 label 셀 + 오른쪽 흰색 값 셀이 실선 테두리로
   분리된 진짜 표(table) 형태 — 점선 구분선 목록이 아니라 각 행이 독립된 사각 셀. */
.field:not(.birth-controls){
  border:1px solid #999; border-top:0;
  padding:0; margin-bottom:0 !important; min-height:38px;
}
.field:not(.birth-controls):first-child{ border-top:1px solid #999; }
.field:not(.birth-controls):has(> .field-label){
  display:grid; grid-template-columns:84px minmax(0,1fr);
  column-gap:0; align-items:stretch;
}
.field:not(.birth-controls) .field-label{
  margin:0; padding:9px 8px; font-size:12px; font-weight:700; color:#333;
  background:var(--surface-alt); border-right:1px solid #999;
  display:flex; align-items:center;
}
.field:not(.birth-controls) .field-value,
.field:not(.birth-controls):has(> .field-label) > *:not(.field-label):not(.field-error){
  padding:7px 8px;
}
.field:not(.birth-controls):has(> .field-label) .field-error{ grid-column:1 / -1; margin:0; padding:4px 8px 6px; }
/* 궁합의 성별/양·음력처럼 field-label이 없는 필드는 grid를 강제하지 않지만
   (label 없이 radio-group만 있음), 표 셀 느낌을 유지하도록 값 자체에 패딩만 준다. */
.field:not(.birth-controls):not(:has(> .field-label)) > .radio-group{ padding:9px 8px; }
/* A4: 하단 출생정보 하위 행(윤달/출생지역/태어난 시간/시간모름)도 상단 필드와
   동일한 "왼쪽 회색 label 셀 | 오른쪽 흰 값 셀" 실선 표 구조로 통일.
   name/id/data-*/onchange 등 기능 속성은 전혀 변경하지 않음 — 시각 구조만 변경.
   (index.html 단일 입력폼 + 궁합 g1/g2 입력폼 모두 동일한 .bc-row 클래스 공유) */
.field.birth-controls{ border:1px solid #999; border-top:0; padding:0; }
.bc-row{
  display:grid; grid-template-columns:84px minmax(0,1fr);
  column-gap:0; align-items:stretch; border-top:1px dotted var(--divider);
}
.field.birth-controls > .bc-row:first-child{ border-top:0; }
.bc-row > .field-label{
  margin:0; padding:9px 8px; font-size:12px; font-weight:700; color:#333;
  background:var(--surface-alt); border-right:1px solid #999;
  display:flex; align-items:center;
}
.bc-row.bc-leap > .radio-label{ padding:9px 8px; align-self:center; }
.bc-value{ padding:7px 8px; }
.bc-value .birth-help{ margin-top:6px !important; margin-bottom:6px !important; }
.bc-value .radio-label{ margin-top:6px; display:inline-flex; }
.bc-value .field-error{ margin:4px 0 0; }
.radio-group{ gap:12px; }
.radio-group .radio-label{ border-bottom:0; min-width:0; padding:1px 0; font-size:13px; min-height:0; }
.radio-group .radio-label:has(:checked){ border-color:transparent; color:var(--vermilion); font-weight:800; }
input[type=radio],input[type=checkbox]{ accent-color:var(--vermilion); }
select,input[type=number]{ border:1px solid #999; background:#fff; border-radius:2px; font-size:13px; padding:4px 6px; }
.birth-help{ font-size:10px; color:#777; margin-top:6px !important; margin-bottom:12px !important; }
.person-section{ border-top:0; margin-top:10px; }
.person-label{
  font-family:var(--font-body); font-size:11.5px; font-weight:800; color:#5c3a0d;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-3));
  border:1px solid #a4712a; padding:4px 9px; display:inline-block; margin-bottom:8px;
}

/* ── 결제 시트 ──────────────────────────────────────────────────────── */
.pay-sheet{ background:var(--surface); border-top:0; border:1px solid #999; padding:12px !important; }
.pay-header{ border-bottom:2px solid var(--gold-3); padding-bottom:8px !important; margin-bottom:10px !important; }
.pay-logo{ color:var(--text); font-size:13px; }
.small-seal{ color:var(--vermilion); }
.pay-order-name{ font-family:var(--font-body); font-weight:800; font-size:15px; }
.pay-order-amount{ color:var(--vermilion); font-weight:800; font-size:15px; }
.pay-info-row{ border-bottom:1px dotted var(--divider); font-size:12px; padding:6px 0 !important; }
.pay-info-row strong{ color:var(--text); }
.pay-divider{ background:var(--divider); }
.pay-method-btn{ border:1px solid #999; border-radius:2px; font-size:11px; padding:8px !important; }
.pay-method-btn.selected{ border:2px solid var(--vermilion); background:#fbe9e5; color:var(--vermilion); }
.pay-agree-wrap{ border-bottom:1px dotted var(--divider); font-size:11px; }
.pay-safe-note{ color:#888; font-size:10px; }
#payProcessing{ background:var(--surface); }
.pp-seal{ color:var(--vermilion); }
.pp-desc{ color:#666; font-size:12px; }

/* ── 결과 문서: A4 — 기존 "無名神占 / 개인 운세 문서 / 태어난 자리에서..." 책자형
   표지(+도장)를 제거하고, 원본 A처럼 "{실제 상품명} 결과보기" 슬림 bar 한 줄
   다음 바로 사주 원국표/V5 본문이 이어지도록 함. 표지 문구는 하드코딩이 아니라
   showResult()가 실제 현재 상품 state(TITLES[type].title)로 채움. */
#resultPage{ background:var(--surface); }
.result-cover{
  background:linear-gradient(180deg,#7ea0d6,#3a5f95 50%,#25436e);
  border:0; color:#fff; padding:10px 12px; margin:0 0 10px;
}
.result-cover-slim{ display:flex; align-items:center; min-height:0; }
.rp-label{ color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.5); font-size:14px; font-weight:800; margin:0; }

/* ── 결과 본문: 원본 A 실측(원국표 행 높이 약 30~46px, 본문 12px대,
   섹션 제목 15px대) 기준으로 전면 축소. 문장/데이터/순서는 그대로. ── */
.reading-toc{ border-top:2px solid var(--gold-3); padding-top:8px !important; }
.reading-toc summary{ font-size:13px !important; min-height:0 !important; }
.reading-toc a{ color:#666; border-bottom:1px dotted var(--divider); font-size:11px !important; padding:6px 3px !important; min-height:0 !important; }
.reading-toc a span:first-child{ color:var(--vermilion); }
.reading-toc a:hover{ color:var(--portal-blue); }
.reading-body{ max-width:none !important; }
.reading-section{ border-top:1px dotted var(--divider); padding:14px 0 16px !important; }
.reading-section:first-child{ padding-top:0 !important; }
.reading-section-heading{ margin-bottom:10px !important; gap:8px !important; }
.chapter-number{ color:var(--vermilion); font-size:11px !important; }
.reading-section h2{
  color:var(--portal-blue); font-family:var(--font-body); font-weight:800; font-size:14.5px;
  border-bottom:1px solid var(--portal-blue); padding-bottom:3px; display:inline-block;
}
.reading-section p{ font-size:12.5px !important; line-height:1.6 !important; margin:0 0 14px !important; }
.reading-section p.evidence-line{ font-size:11px !important; line-height:1.55 !important; }
.reading-section .short-close{ color:var(--vermilion); border-left:2px solid var(--vermilion); font-size:12.5px !important; padding-left:10px !important; }
.reading-section .cycle-lead{ color:var(--emphasis); font-size:14px !important; }
.reading-section .calculation-lines{ font-size:11px !important; }
.reading-section .table-caption{ font-size:10.5px !important; }

/* 사주 원국 표 — 원본 A 실측: 행 높이 약 30~46px(390 CSS px), 글자 큼직하되
   셀 자체는 촘촘. 헤더/천간/지지 폰트와 padding을 크게 낮춤. */
.chart-table{ border:1px solid #999; border-top:2px solid #999; border-bottom:1px solid #999; margin:8px 0 14px !important; }
.chart-table caption{ font-size:11px !important; padding-bottom:6px !important; }
.chart-table th,.chart-table td{ border:1px solid #ccc; padding:6px 3px !important; font-size:12px !important; line-height:1.3 !important; }
.chart-table th[scope=row]{ font-size:11px !important; width:40px !important; }
.chart-table thead th{ background:#eee; color:#555; font-size:11.5px !important; }
/* 일주(day pillar) 강조 배경은 A 시안 방침에 따라 제공하지 않는다 —
   4개 기둥(시주/일주/월주/연주)은 모두 동일한 기본 스타일로 표시한다.
   (렌더러도 더 이상 day-column 클래스를 부여하지 않음 — assets/reading-document.js) */
.chart-table .pillar-glyph{ color:var(--text); font-size:18px !important; }
.element-counts{ border-top:1px solid #999; border-bottom:1px solid #999; margin:10px 0 14px !important; }
.element-counts div{ border-right:1px dotted var(--divider); padding:7px 3px !important; }
.element-counts dt{ font-size:11px !important; }
.element-counts dd{ font-size:15px !important; margin-top:2px !important; }
.data-list dt,.data-list dd{ border-bottom:1px dotted var(--divider); }
.cycle-entry{ border-top:1px dotted var(--divider); padding:10px 0 !important; }
.cycle-entry h3{ font-size:14px !important; }
.cycle-entry p{ font-size:11px !important; }
.rp-copy-btn{ border:1px solid var(--portal-blue); color:var(--portal-blue); border-radius:2px; font-size:11px !important; padding:8px !important; }
.rp-copy-btn:hover{ background:#eaf1ff; }
.rp-footer{ color:#777; font-size:10px !important; }
.result-actions{ border-top:2px solid #999; padding-top:10px !important; }
#rpExpiry{ font-size:10.5px !important; }

/* ── 데스크톱: 좁은 고정폭 포털 컬럼 ───────────────────────────────── */
@media(min-width:760px){
  #app,.service-shell{ max-width:820px; }
}