/* 근거 만세력 테마 (saju) — 모바일 우선
 * 기준 폭: 360 · 768 · 1024 · 1440px
 *   ~767   : 상단 "메뉴" 버튼 + 하단 탭바
 *   768~1023: 상단 "메뉴" 버튼, 하단 탭바 없음
 *   1024~  : 상단 한 줄 메뉴, 메인은 2단(왼쪽 입력, 오른쪽 오늘의 일진·미리보기)
 * 원칙: 페이지 가로 스크롤 없음(넓은 요소는 그 안에서만), 누르는 요소 44×44px 이상,
 *       본문·입력 16px 이상(iOS 자동 확대 방지), 이미지·표·영상은 부모 폭을 넘지 않음
 * 그누보드 basic/default.css 위에 덮어쓴다(회원 스킨 공통 클래스 때문).
 * 회원 화면(로그인·가입·찾기) 보정은 skin/member/basic/style.css 끝에 있다.
 */
:root {
  --sj-ink: #1b2233;
  --sj-ink-2: #4a5468;
  --sj-muted: #6b7489;
  --sj-line: #dfe3ea;
  --sj-bg: #f5f6f8;
  --sj-card: #ffffff;
  --sj-brand: #1f2a44;
  --sj-accent: #b5452f;
  --sj-focus: #2f6fdb;
  --sj-error: #b42318;
  --sj-radius: 12px;
  --sj-gap: 16px;
  --sj-tap: 44px;
  --sj-tabbar-h: 60px;
  --sj-max: 1120px;
  --sj-font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --sj-hanja: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
}

/* ---- 기본: default.css 의 작은 글자(0.75em)·고정 폭을 되돌린다 ---- */
html { overflow-y: auto; -webkit-text-size-adjust: 100%; }
body {
  font-size: 16px; line-height: 1.6; color: var(--sj-ink); background: var(--sj-bg);
  font-family: var(--sj-font); word-break: keep-all; overflow-wrap: anywhere;
}
*, *::before, *::after { box-sizing: border-box; }
/* default.css 의 p { word-break: break-all } 등이 단어 중간에서 끊으므로 글 요소마다 다시 덮는다 */
p, li, dd, dt, td, th, label, legend, caption, h1, h2, h3, h4, h5, h6,
.tbl_head01 td, .tbl_head02 td { word-break: keep-all; overflow-wrap: anywhere; }
img, video, iframe, table { max-width: 100%; }
img, video { height: auto; }
input, button, select, textarea { font-family: inherit; font-size: 16px; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sj-focus); outline-offset: 2px; }
#hd, #wrapper, #ft { min-width: 0; }   /* 그누보드 기본 1200px 고정 해제 */
#hd_pop { width: auto; max-width: 100%; }   /* 그누보드 팝업 알림 상자(1200px)가 모바일에서 넘치지 않게 */
.hd_pops { max-width: calc(100vw - 32px) !important; left: 16px !important; }
#hd_login_msg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.sj-skip { position: absolute; left: -9999px; top: 0; }
.sj-skip:focus { left: 16px; top: 8px; z-index: 100; padding: 10px 14px; background: #fff; border-radius: 8px; }

/* ---- 상단 (1023px까지 "메뉴" 버튼으로 접음) ---- */
.sj-header { position: sticky; top: 0; z-index: 50; background: var(--sj-brand); color: #fff; }
.sj-header__inner {
  max-width: var(--sj-max); margin: 0 auto; padding: 0 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 56px;
}
.sj-brand { display: inline-flex; align-items: center; min-height: var(--sj-tap); font-size: 18px; font-weight: 700; text-decoration: none; color: #fff; white-space: nowrap; }
.sj-brand__tag { margin-left: 6px; font-family: var(--sj-hanja); font-size: 13px; font-weight: 500; opacity: .8; letter-spacing: .05em; white-space: nowrap; } /* 한자 병기 信明四柱 (D31) */
.sj-menu-btn {
  display: inline-flex; align-items: center; gap: 8px; min-width: var(--sj-tap); min-height: var(--sj-tap);
  padding: 0 12px; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; cursor: pointer; white-space: nowrap;
}
.sj-menu-btn__bar, .sj-menu-btn__bar::before, .sj-menu-btn__bar::after { display: block; width: 18px; height: 2px; background: #fff; position: relative; content: ""; }
.sj-menu-btn__bar::before { position: absolute; top: -6px; }
.sj-menu-btn__bar::after { position: absolute; top: 6px; }
.sj-nav { display: none; width: 100%; padding: 8px 0 16px; }
.sj-nav.is-open { display: block; }
.sj-nav__list { list-style: none; margin: 0; padding: 0; }
.sj-nav__link {
  display: flex; align-items: center; justify-content: space-between; min-height: var(--sj-tap);
  padding: 0 4px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.12); white-space: nowrap;
}
.sj-nav__link[aria-current="page"] { font-weight: 700; }
.sj-nav__link.is-soon { color: rgba(255,255,255,.55); cursor: default; }
.sj-nav__link small { font-size: 12px; margin-left: 8px; padding: 0 6px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; }
.sj-nav__member { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; }
.sj-nav__nick { flex: 1 0 100%; color: rgba(255,255,255,.85); font-size: 15px; white-space: nowrap; }
.sj-nav__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--sj-tap); padding: 0 16px;
  color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.45); border-radius: 10px; white-space: nowrap;
}
.sj-nav__btn--primary { background: #fff; color: var(--sj-brand); border-color: #fff; font-weight: 700; }

/* ---- 하단 탭바 (767px까지만, 사이트 화면에만) ---- */
.sj-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 1px solid var(--sj-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 10px rgba(20, 30, 50, .06);
}
.sj-tabbar__list { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.sj-tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--sj-tabbar-h); padding: 6px 2px; font-size: 13px; color: var(--sj-ink-2); text-decoration: none; white-space: nowrap;
}
.sj-tabbar__icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sj-tabbar__item[aria-current="page"] { color: var(--sj-brand); font-weight: 700; }
.sj-tabbar__item.is-soon { color: #b3b9c6; cursor: default; }
/* 탭바가 고지문·본문 끝을 가리지 않게 하단 여백 확보 */
.sj-footer__inner { padding-bottom: calc(32px + var(--sj-tabbar-h) + env(safe-area-inset-bottom, 0px)); }

/* ---- 본문 ---- */
.sj-main { display: block; max-width: var(--sj-max); margin: 0 auto; padding: 16px 16px 40px; min-height: 60vh; }
.sj-hero { padding: 8px 0 16px; }
.sj-hero__title { margin: 0 0 8px; font-size: 24px; line-height: 1.3; }
.sj-hero__desc { margin: 0; color: var(--sj-ink-2); }
.sj-hero__brand { margin: 0 0 4px; color: var(--sj-ink-2); font-size: 16px; }
.sj-hero__brand b { color: var(--sj-brand); font-size: 18px; }
.sj-hero__brand span { margin-left: 4px; font-family: var(--sj-hanja); letter-spacing: .05em; }
.sj-hero__sub { margin: 0 0 8px; font-weight: 600; color: var(--sj-accent); }
.sj-card {
  background: var(--sj-card); border: 1px solid var(--sj-line); border-radius: var(--sj-radius);
  padding: 20px 16px; margin: 0 0 var(--sj-gap);
}
.sj-card__title { margin: 0 0 16px; font-size: 19px; }

/* ---- 오늘의 일진 ---- */
.sj-today { display: flex; align-items: center; gap: 16px; }
.sj-today__gz {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 84px; min-height: 96px; padding: 8px 0; background: #faf7f2; border: 1px solid #ece4d6; border-radius: 12px;
  font-family: var(--sj-hanja); font-size: 30px; line-height: 1.2;
}
.sj-today__body { min-width: 0; }
.sj-today__label { margin: 0; font-size: 14px; color: var(--sj-muted); }
.sj-today__date { margin: 2px 0 4px; font-size: 18px; font-weight: 700; }
.sj-today__name { margin: 0; font-size: 16px; }
.sj-today__soon { margin: 8px 0 0; font-size: 14px; color: var(--sj-muted); }

/* ---- 입력 폼 ---- */
.sj-form { display: grid; gap: 18px; }
.sj-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.sj-label { display: block; margin: 0 0 8px; padding: 0; font-weight: 700; font-size: 16px; }
.sj-label__note { font-weight: 400; color: var(--sj-muted); font-size: 14px; margin-left: 4px; }
/* 그누보드 default.css 가 legend 를 화면에서 숨기므로(접근성 전용) 입력 화면의 묶음 제목은 다시 보이게 */
.sj-form legend.sj-label, .sj-save legend.sj-label { position: static; width: auto; height: auto; overflow: visible; font-size: 16px; line-height: 1.5; text-indent: 0; clip: auto; margin: 0 0 8px; }
.sj-lunar__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.sj-lunar__row .sj-input { padding-right: 28px; background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; }
.sj-input {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px; font-size: 16px; color: var(--sj-ink);
  background: #fff; border: 1px solid #c9ced8; border-radius: 10px; appearance: none; -webkit-appearance: none;
}
select.sj-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--sj-ink-2) 50%), linear-gradient(135deg, var(--sj-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px;
}
.sj-input:disabled { background: #eef0f3; color: var(--sj-muted); }
.sj-help { margin: 6px 0 0; font-size: 14px; color: var(--sj-muted); }
.sj-check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--sj-tap); margin-top: 6px; cursor: pointer; }
.sj-check input { width: 22px; height: 22px; margin: 0; }
.sj-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sj-seg--stack { grid-template-columns: 1fr; }
.sj-seg__item { position: relative; display: block; margin: 0; cursor: pointer; }
.sj-seg__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sj-seg__item span {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px 12px;
  text-align: center; border: 1px solid #c9ced8; border-radius: 10px; background: #fff;
}
.sj-seg__item small { font-size: 12px; color: var(--sj-muted); }
.sj-seg__item input:checked + span { border-color: var(--sj-brand); box-shadow: inset 0 0 0 1px var(--sj-brand); background: #eef1f8; font-weight: 700; }
.sj-seg__item input:focus-visible + span { outline: 3px solid var(--sj-focus); outline-offset: 2px; }
.sj-seg__item.is-disabled { cursor: not-allowed; }
.sj-seg__item.is-disabled span { color: var(--sj-muted); background: #f1f2f4; border-style: dashed; }
.sj-adv { border-top: 1px solid var(--sj-line); padding-top: 8px; }
.sj-adv summary { display: flex; align-items: center; min-height: var(--sj-tap); cursor: pointer; font-weight: 700; color: var(--sj-ink-2); }
.sj-adv[open] summary { margin-bottom: 8px; }
.sj-error { margin: 0; padding: 12px; color: var(--sj-error); background: #fdeceb; border-radius: 10px; }

.sj-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px;
  font-size: 17px; font-weight: 700; border-radius: 12px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.sj-btn--primary { background: var(--sj-brand); color: #fff; }
.sj-btn--primary:hover { background: #283658; }
.sj-btn--block { width: 100%; }

/* ---- 명식 표: 넓으면 이 안에서만 가로로 넘긴다 ---- */
.sj-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.sj-pillars { width: 100%; min-width: 288px; border-collapse: separate; border-spacing: 6px; table-layout: fixed; text-align: center; }
.sj-pillars th { font-size: 14px; font-weight: 500; color: var(--sj-muted); padding: 2px 0; }
.sj-pillars td { padding: 10px 2px; background: #faf7f2; border: 1px solid #ece4d6; border-radius: 10px; vertical-align: top; }
.sj-pillar__hj { display: block; font-family: var(--sj-hanja); font-size: 30px; line-height: 1.25; }
.sj-pillar__ko { display: block; margin-top: 4px; font-size: 14px; color: var(--sj-ink-2); }
.sj-pillar__none { display: block; padding: 22px 0; color: var(--sj-muted); }

/* ---- 서비스 목록 ---- */
.sj-services { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sj-service {
  display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 112px; padding: 14px;
  border: 1px solid var(--sj-line); border-radius: 12px; background: #fff; color: var(--sj-ink); text-decoration: none;
}
a.sj-service:hover { border-color: var(--sj-brand); }
.sj-service__icon { width: 28px; height: 28px; fill: none; stroke: var(--sj-brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sj-service__name { font-weight: 700; font-size: 16px; }
.sj-service__desc { font-size: 14px; color: var(--sj-muted); line-height: 1.45; }
.sj-service__badge { align-self: flex-start; margin-top: auto; padding: 0 8px; font-size: 12px; color: var(--sj-muted); border: 1px solid var(--sj-line); border-radius: 999px; }
.sj-service.is-soon { background: #fafbfc; }
.sj-service.is-soon .sj-service__icon { stroke: #b3b9c6; }

/* ---- 하단 ---- */
.sj-footer { border-top: 1px solid var(--sj-line); background: #fff; }
.sj-footer__inner { max-width: var(--sj-max); margin: 0 auto; padding-top: 20px; padding-left: 16px; padding-right: 16px; font-size: 14px; color: var(--sj-muted); }
.sj-footer__inner p { margin: 0 0 6px; }
.sj-footer__brand { color: var(--sj-ink-2); font-weight: 700; }

/* ---- 768px 이상: 하단 탭바 없음, 폼 두 칸 ---- */
@media (min-width: 768px) {
  .sj-tabbar { display: none; }
  .sj-footer__inner { padding-bottom: 32px; }
  .sj-main { padding: 24px 24px 56px; }
  .sj-hero__title { font-size: 30px; }
  .sj-card { padding: 28px; }
  .sj-form { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  /* 768~1023: 1줄 달력 / 2줄 생년월일|시각 / 3줄 성별|태어난 곳 / 4줄 고급 설정·명식 보기 */
  .sj-form > .sj-field--full, .sj-form > .sj-adv, .sj-form > .sj-error, .sj-form > .sj-btn { grid-column: 1 / -1; }
  .sj-btn--block { width: auto; min-width: 240px; justify-self: start; }
  .sj-pillar__hj { font-size: 36px; }
}

/* ---- 1024px 이상: 상단 한 줄 메뉴, 메인 2단 ---- */
@media (min-width: 1024px) {
  .sj-menu-btn { display: none; }
  .sj-nav { display: flex !important; align-items: center; justify-content: space-between; width: auto; padding: 0; flex: 1; margin-left: 24px; }
  .sj-nav__list { display: flex; gap: 4px; }
  .sj-nav__link { border: 0; padding: 0 12px; border-radius: 8px; }
  .sj-nav__link:hover { background: rgba(255,255,255,.08); }
  .sj-nav__member { padding: 0; flex-wrap: nowrap; }
  .sj-nav__nick { flex: none; margin-right: 4px; }

  .sj-main--home {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start;
    grid-template-areas: "hero hero" "form today" "form ." "services services";
    /* 입력 카드가 두 줄에 걸쳐 있어 남는 높이를 1fr 줄(빈 줄)에만 준다 → 일진 줄은 내용 높이만 */
    grid-template-rows: auto auto 1fr auto;
  }
  .sj-main--home > .sj-hero { grid-area: hero; }
  .sj-main--home > #sj-today { grid-area: today; }
  .sj-main--home > #sj-form-card { grid-area: form; }
  .sj-main--home > #sj-today { align-self: start; }
  .sj-main--home > #sj-services-card { grid-area: services; }
  .sj-main--home .sj-form { grid-template-columns: 1fr; }
  .sj-services { grid-template-columns: repeat(4, 1fr); }
}

/* ---- 1440px 이상: 본문 폭만 넓힘 ---- */
@media (min-width: 1440px) {
  :root { --sj-max: 1280px; }
  .sj-hero__title { font-size: 34px; }
}

/* =====================================================================
 * 결과 화면 (M3-1) — ~1023 한 열 + 아래에서 올라오는 근거 패널, 1024~ 왼쪽 명식표(sticky) + 오른쪽 근거 패널·문장
 * ===================================================================== */
.sj-main.is-result > :not(.sj-result) { display: none !important; }
.sj-main--home.is-result { display: block; }
.sj-result[hidden] { display: none; }

/* 오행 색 (색만으로 구분하지 않게 글자에 오행 이름도 함께 표시) */
.sj-e0 { color: #2f7d4e; } .sj-e1 { color: #c2412d; } .sj-e2 { color: #93651a; } .sj-e3 { color: #5b6472; } .sj-e4 { color: #2459a8; }

.sj-rhead { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; margin: 0 0 16px; }
.sj-rhead__title { grid-column: 1; grid-row: 1; margin: 0; font-size: 22px; }
.sj-rhead__back { grid-column: 2; grid-row: 1; }
.sj-rhead__sum { grid-column: 1 / -1; margin: 0; color: var(--sj-ink-2); font-size: 15px; }
.sj-rhead__title:focus { outline: none; }
.sj-btn--ghost { min-height: var(--sj-tap); padding: 0 14px; font-size: 15px; background: #fff; color: var(--sj-brand); border-color: #c9ced8; }
.sj-btn--ghost:hover { border-color: var(--sj-brand); }

/* 명식표 */
.sj-chart { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }  /* 360px에서도 가로 스크롤 없이 */
.sj-chart th, .sj-chart td { padding: 6px 1px; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.sj-chart thead th { padding: 4px 1px 8px; border-bottom: 1px solid var(--sj-line); }
.sj-chart tbody th { width: 46px; font-size: 14px; font-weight: 500; color: var(--sj-muted); text-align: left; }
.sj-chart thead th:first-child { width: 46px; }
.sj-chart td { font-size: 15px; transition: background .15s; }
.sj-chart td.is-empty { color: #b3b9c6; }
.sj-chart td.is-ref { background: #fff4d6; box-shadow: inset 0 0 0 2px #e0a526; }
.sj-chart__me .sj-chip--col { font-weight: 700; }
.sj-glyph { display: block; font-family: var(--sj-hanja); font-size: 30px; line-height: 1.2; }
.sj-glyph__ko { display: block; font-size: 15px; color: var(--sj-ink-2); }
.sj-tg { font-size: 15px; }
.sj-hid { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; font-size: 15px; }
.sj-hid__i sub { font-size: 12px; color: var(--sj-muted); }
.sj-hid__i.is-main { font-weight: 700; }
.sj-hid__i.is-ruler { text-decoration: underline; text-underline-offset: 3px; }
.sj-chart-card__note { margin-top: -8px; margin-bottom: 8px; }
.sj-chart-card__legend { margin-top: 10px; }

/* 근거 칩 */
.sj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sj-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--sj-tap); padding: 0 14px;
  font-size: 15px; color: var(--sj-brand); background: #eef1f8; border: 1px solid #cfd6e6; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.sj-chip__k { font-size: 12px; font-weight: 700; color: var(--sj-accent); }
.sj-chip[aria-pressed="true"] { background: var(--sj-brand); color: #fff; border-color: var(--sj-brand); }
.sj-chip[aria-pressed="true"] .sj-chip__k { color: #ffd9a8; }
.sj-chip--col { min-width: var(--sj-tap); justify-content: center; padding: 0 6px; font-size: 15px; }
.sj-chip--col .sj-chip__k { display: none; }

/* 문장 */
.sj-lead { margin: -8px 0 12px; }
.sj-items { list-style: none; margin: 0; padding: 0; }
.sj-item { padding: 14px 0; border-top: 1px solid #eef0f3; }
.sj-item:first-child { border-top: 0; padding-top: 0; }
.sj-item__title { margin: 0 0 4px; font-size: 16px; }
.sj-item__text { margin: 0; }
.sj-item--note { padding: 12px; background: #f6f7f9; border-radius: 10px; border: 0; margin-bottom: 8px; }
.sj-item--big .sj-item__title { font-size: 19px; }
.sj-item--big .sj-item__text { font-size: 17px; }
.sj-item.is-this-year { background: #f6f7f9; border-radius: 10px; padding-left: 12px; padding-right: 12px; }
.sj-more { margin-top: 12px; }
.sj-years { margin-top: 12px; }
.sj-notice { margin: 8px 0 16px; padding: 14px 16px; font-size: 15px; color: var(--sj-ink-2); background: #fff; border: 1px solid var(--sj-line); border-radius: var(--sj-radius); }

/* 대운 목록: 표 안에서만 가로로 넘김 */
.sj-cycles-wrap { margin: 0 0 12px; padding-bottom: 4px; }
.sj-cycles { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; width: max-content; }
.sj-cycle {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; padding: 8px 4px;
  border: 1px solid var(--sj-line); border-radius: 10px; background: #fff; font-size: 15px; text-align: center;
}
.sj-cycle.is-current { border-color: var(--sj-brand); box-shadow: inset 0 0 0 1px var(--sj-brand); background: #eef1f8; }
.sj-cycle__gz { font-family: var(--sj-hanja); font-size: 24px; line-height: 1.2; }
.sj-cycle__age { font-weight: 700; }
.sj-cycle__tg, .sj-cycle__yr, .sj-cycle__ko { color: var(--sj-ink-2); }

/* 근거 패널: ~1023 아래에서 올라오는 패널 (768 미만은 하단 탭바 위) */
.sj-evidence {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; max-height: 70vh; overflow-y: auto;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: #fff;
  border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(20, 30, 50, .18);
  transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility .2s;
}
.sj-evidence.is-open { transform: none; visibility: visible; }
.sj-evidence__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.sj-evidence__title { margin: 0; font-size: 18px; }
.sj-evidence__title:focus { outline: none; }
.sj-evidence__close { min-width: var(--sj-tap); min-height: var(--sj-tap); padding: 0 12px; font-size: 15px; background: #fff; border: 1px solid #c9ced8; border-radius: 10px; cursor: pointer; }
.sj-ev__title { margin: 4px 0; font-weight: 700; }
.sj-ev__text { margin: 0 0 10px; }
.sj-ev__meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 14px; }
.sj-ev__meta dt { color: var(--sj-muted); }
.sj-ev__meta dd { margin: 0; }
.sj-ev__meta code { font-size: 13px; overflow-wrap: anywhere; }
.sj-ev__more { margin-top: 8px; border-top: 1px solid #eef0f3; }
.sj-ev__more summary { display: flex; align-items: center; min-height: var(--sj-tap); color: var(--sj-muted); font-size: 15px; cursor: pointer; }
.sj-ev__more p { margin: 0 0 8px; font-size: 14px; color: var(--sj-ink-2); }
.sj-ev__more code { font-size: 14px; overflow-wrap: anywhere; }
/* 400px 미만: 명식표 카드 좌우 여백을 줄여 표가 가로 스크롤 없이 들어가게 */
@media (max-width: 399px) { .sj-chart-card { padding-left: 12px; padding-right: 12px; } }
.sj-sheet-backdrop { position: fixed; inset: 0; z-index: 75; background: rgba(15, 20, 35, .35); }
.sj-sheet-backdrop[hidden] { display: none; }
html.sj-sheet-open { overflow: hidden; }
@media (max-width: 767px) {
  .sj-evidence { bottom: calc(var(--sj-tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: 16px; max-height: calc(70vh - var(--sj-tabbar-h)); }
}
@media (min-width: 768px) {
  .sj-rhead__title { font-size: 26px; }
  .sj-glyph { font-size: 36px; }
  .sj-years:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .sj-years .sj-item:nth-child(2) { border-top: 0; padding-top: 0; }
  .sj-evidence { left: 50%; right: auto; width: min(640px, 100%); transform: translate(-50%, 110%); }
  .sj-evidence.is-open { transform: translate(-50%, 0); }
}
/* 1024~: 왼쪽 명식표 고정, 오른쪽 위에 근거 패널(항상 보임) */
@media (min-width: 1024px) {
  .sj-rgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
  .sj-evidence {
    position: sticky; top: 72px; left: auto; right: auto; bottom: auto; z-index: 5; width: auto; max-height: calc(100vh - 96px); overflow-y: auto;
    transform: none; visibility: visible; transition: none; margin: 0 0 var(--sj-gap); padding: 16px 20px;
    border: 2px solid #e0a526; border-radius: var(--sj-radius); box-shadow: none;
  }
  .sj-evidence.is-open { transform: none; }
  .sj-sheet-backdrop { display: none !important; }
}
/* 왼쪽 명식표는 화면 높이가 충분할 때만 따라 내려온다. 그래도 넘치면 그 안에서만 스크롤 (아래가 잘리지 않게) */
@media (min-width: 1024px) and (min-height: 760px) {
  .sj-rside { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; }
}

/* =====================================================================
 * 명식 저장 (M3-2): 결과 화면 저장 카드, 마이페이지 저장한 명식 목록
 * 목록: ~767 한 줄 카드, 768~ 2열, 1024~ 3열. 버튼 44px 이상
 * ===================================================================== */
.sj-save__form { margin-top: 12px; }
.sj-save__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sj-save__msg { margin: 10px 0 0; }
.sj-save__msg:empty { display: none; }
.sj-save__msg a { color: var(--sj-focus); font-weight: 700; }
.sj-ractions { display: flex; flex-wrap: wrap; gap: 8px; }
.sj-ractions .sj-btn { flex: 1 1 140px; }
.sj-rhead__warn { grid-column: 1 / -1; margin-top: 8px; }
.sj-btn--danger { color: var(--sj-error); }
.sj-btn--danger:hover { border-color: var(--sj-error); }

.sj-my__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sj-my__count { font-size: 15px; color: var(--sj-ink-2); white-space: nowrap; }
.sj-my__empty { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 0; }
.sj-my__empty[hidden] { display: none; }
.sj-plist { display: grid; grid-template-columns: 1fr; gap: 12px; list-style: none; margin: 12px 0 0; padding: 0; }
.sj-pcard { display: flex; flex-direction: column; border: 1px solid var(--sj-line); border-radius: var(--sj-radius); background: #fff; min-width: 0; }
.sj-pcard__open { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; color: var(--sj-ink); text-decoration: none; border-radius: var(--sj-radius) var(--sj-radius) 0 0; }
.sj-pcard__open:hover { background: #f8f9fb; }
.sj-pcard__label { font-size: 18px; font-weight: 700; }
.sj-pcard__gz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sj-pcard__p { display: flex; flex-direction: column; align-items: center; padding: 6px 0; background: #faf7f2; border: 1px solid #ece4d6; border-radius: 8px; }
.sj-pcard__p small { font-size: 13px; color: var(--sj-muted); }
.sj-pcard__p b { font-family: var(--sj-hanja); font-size: 22px; font-weight: 500; line-height: 1.3; }
.sj-pcard__meta { font-size: 15px; color: var(--sj-ink-2); }
.sj-pcard__actions { display: flex; gap: 8px; padding: 0 16px 14px; }
.sj-pcard__actions .sj-btn { flex: 1; }
.sj-pcard__form { padding: 0 16px 16px; }
@media (min-width: 768px) { .sj-plist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sj-plist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================================
 * 공유 링크 (M3-3)
 * ===================================================================== */
.sj-badge-note { grid-column: 1 / -1; justify-self: start; margin: 8px 0 0; padding: 6px 12px; font-size: 15px; color: #7a4a00; background: #fff4d6; border: 1px solid #f0d189; border-radius: 999px; }
.sj-sharebox .sj-check { margin: 4px 0 8px; }
.sj-share__out { margin-top: 12px; }
.sj-share__row { display: flex; gap: 8px; }
.sj-share__row .sj-input { flex: 1; min-width: 0; font-size: 15px; }
.sj-share__row .sj-btn { flex: none; }
.sj-shares { margin-top: var(--sj-gap); }
.sj-slist { display: grid; grid-template-columns: 1fr; gap: 12px; list-style: none; margin: 12px 0 0; padding: 0; }
.sj-scard { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--sj-line); border-radius: var(--sj-radius); background: #fff; min-width: 0; }
.sj-scard__gz { font-family: var(--sj-hanja); font-size: 22px; }
.sj-scard__meta { font-size: 15px; color: var(--sj-ink-2); }
.sj-scard__url { font-size: 15px; }
.sj-scard__actions { padding: 0; }
.sj-gone p { margin: 0 0 12px; }
@media (min-width: 1024px) { .sj-slist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
 * AI 상담 (M4)
 * ===================================================================== */
.sj-sub { margin: 20px 0 8px; font-size: 17px; }
.sj-startlist { display: grid; grid-template-columns: 1fr; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sj-startlist .sj-btn { width: 100%; justify-content: space-between; gap: 12px; text-align: left; flex-wrap: wrap; height: auto; min-height: 52px; padding: 8px 14px; }
.sj-startlist .sj-btn span { font-family: var(--sj-hanja); color: var(--sj-ink-2); font-weight: 400; }
.sj-chat__who { margin: 0 0 12px; }
.sj-chat__gz { font-family: var(--sj-hanja); font-size: 20px; font-weight: 500; }
.sj-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sj-msg { max-width: 100%; }
.sj-msg--q { align-self: flex-end; max-width: 85%; padding: 10px 14px; background: var(--sj-brand); color: #fff; border-radius: 14px 14px 4px 14px; }
.sj-msg--q p { margin: 0; white-space: pre-wrap; }
.sj-msg--a { padding: 14px; background: #f6f7f9; border-radius: 14px 14px 14px 4px; }
.sj-sent + .sj-sent { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e6e8ec; }
.sj-sent__text { margin: 0; }
.sj-sent .sj-chips { margin-top: 8px; }
.sj-sent__ev { margin-top: 8px; padding: 10px 12px; background: #fff; border: 2px solid #e0a526; border-radius: 10px; font-size: 15px; }
.sj-sent__ev p { margin: 0 0 4px; }
.sj-help-box { margin: 0; padding: 12px 14px; background: #fdeceb; color: #7a1f16; border-radius: 10px; font-weight: 500; }
.sj-notice-sm { margin: 12px 0 0; font-size: 15px; color: var(--sj-ink-2); }
.sj-followups { margin: 12px 0 0; }
.sj-followups:empty { display: none; }
.sj-ask { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sj-line); }
.sj-ask__q { min-height: 96px; resize: vertical; line-height: 1.5; }
.sj-ask__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.sj-thread__empty { margin: 0 0 8px; }
@media (min-width: 768px) { .sj-startlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sj-chat { max-width: 860px; margin-left: auto; margin-right: auto; } .sj-chat-intro { max-width: 860px; margin-left: auto; margin-right: auto; } }

/* =====================================================================
 * 궁합 (M5)
 * ===================================================================== */
.sj-cp-form { display: grid; gap: 14px; }
.sj-cp-charts { display: grid; grid-template-columns: 1fr; gap: 0; }
.sj-cp-chart .sj-card__title { font-size: 17px; }
@media (min-width: 768px) {
  .sj-cp-form { grid-template-columns: 1fr 1fr auto; align-items: end; column-gap: 16px; }
  .sj-cp-form .sj-btn { min-width: 160px; }
}
@media (min-width: 1024px) { .sj-cp-charts { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.sj-gone__links { display: flex; flex-wrap: wrap; gap: 8px; }

/* =====================================================================
   회원 등급별 보기 (결정 D26): 잠긴 자리(실제 문장 없음), 가입 안내, 유료 예정
   ===================================================================== */
.sj-locked { position: relative; margin-top: 8px; }
.sj-ghosts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; filter: blur(1.5px); opacity: .7; }
.sj-ghost { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--sj-line); border-radius: var(--sj-radius); background: #fafbfc; }
.sj-ghost span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #e3e7ee, #eef1f5); }
.sj-ghost__t { width: 40%; height: 14px !important; }
.sj-ghost__l--s { width: 70%; }
.sj-locked__cta { margin-top: -40px; position: relative; padding: 16px; border: 1px solid var(--sj-line); border-radius: var(--sj-radius); background: rgba(255, 255, 255, .96); box-shadow: 0 -12px 24px rgba(255, 255, 255, .9); }
.sj-locked__text { margin: 0 0 12px; }
.sj-join-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sj-join-row .sj-btn { flex: 1 1 180px; }
.sj-soon { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #5b4a00; background: #fff4d6; border: 1px solid #f0d189; white-space: nowrap; }
.sj-paid__list { list-style: none; margin: 0 0 8px; padding: 0; }
.sj-paid__list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--sj-line); }
.sj-save__msg .sj-join-row { margin-top: 8px; }
/* 궁합 직접 입력 (D26) */
.sj-cp-direct { margin-top: 16px; border-top: 1px solid var(--sj-line); padding-top: 8px; }
.sj-cp-direct > summary { display: flex; align-items: center; min-height: 48px; font-weight: 600; cursor: pointer; }
.sj-cp-people { display: grid; gap: 16px; }
.sj-cp-person { border: 1px solid var(--sj-line); border-radius: var(--sj-radius); padding: 12px; margin: 0; min-width: 0; }
.sj-cp-person > legend { padding: 0 6px; font-weight: 700; }
@media (min-width: 768px) { .sj-cp-people { grid-template-columns: 1fr 1fr; } }
/* 홈 화면에 추가 안내·매일 알림 (D30) */
.sj-install { margin-top: 16px; padding: 12px; border: 1px dashed var(--sj-line); border-radius: var(--sj-radius); background: #fafbfc; }
.sj-install__title { margin: 0 0 4px; font-weight: 700; }
.sj-install .sj-btn { margin-top: 8px; }
.sj-install__close { margin-left: 8px; }
.sj-push__state { margin: 8px 0; font-weight: 600; }

.sj-nowrap { white-space: nowrap; } /* 슬로건 덩어리 (D31) */