/* ============================================================
   Lunar Soopoolleaf — 사주 생년월일 입력 (몽글몽글)

   home.css 를 먼저 불러온 뒤 이 파일을 얹습니다.
   헤더 / 푸터 / 배경 / 테마 토글은 home.css 것을 그대로 씁니다.
   여기서는 사주 입력 카드만 담당하며,
   변수는 전부 --sj- 접두사를 써서 home.css 와 겹치지 않게 했습니다.
   ============================================================ */

:root {
  --sj-bg:#fff6fa;
  --sj-surface:#ffffff;
  --sj-ink:#4a3a44;
  --sj-muted:#b294a4;
  --sj-line:#f6dde8;
  --sj-pink:#ffb3c7;
  --sj-pink-soft:#ffe0e9;
  --sj-pink-ink:#b3557a;
  --sj-pink-deep:#f291ac;
  --sj-warn:#d1607f;

  --sj-shadow:0 4px 0 rgba(150,100,125,.10);
  --sj-shadow-lg:0 16px 36px rgba(214,150,180,.22);
  --sj-pop:cubic-bezier(.34,1.56,.64,1);

  --sj-radius-lg:26px;
  --sj-radius-md:20px;

  --sj-female-bg:#ffdbe8;  --sj-female-ink:#b3557a;
  --sj-male-bg:#d7e6ff;    --sj-male-ink:#3f6096;
  --sj-solar-bg:#ffeecb;   --sj-solar-ink:#9a7226;
  --sj-lunar-bg:#e2e5ff;   --sj-lunar-ink:#5b64a8;
  --sj-normal-bg:#dff2e2;  --sj-normal-ink:#4c7a45;
  --sj-leap-bg:#ffe4d3;    --sj-leap-ink:#a8613a;
}

html[data-theme="dark"] {
  --sj-bg:#241d24;
  --sj-surface:#2e2530;
  --sj-ink:#f5e9ef;
  --sj-muted:#ab95a3;
  --sj-line:#3d3140;
  --sj-pink:#ff9dba;
  --sj-pink-soft:#4a3040;
  --sj-pink-ink:#ffbfd2;
  --sj-pink-deep:#c9718d;
  --sj-warn:#ff9db3;

  --sj-shadow:0 4px 0 rgba(0,0,0,.26);
  --sj-shadow-lg:0 18px 40px rgba(0,0,0,.42);

  --sj-female-bg:#54303f;  --sj-female-ink:#ffc4d6;
  --sj-male-bg:#2f4260;    --sj-male-ink:#bcd6ff;
  --sj-solar-bg:#54432a;   --sj-solar-ink:#ffdb9c;
  --sj-lunar-bg:#373b5e;   --sj-lunar-ink:#c3c8ff;
  --sj-normal-bg:#2f4a34;  --sj-normal-ink:#b6e6bd;
  --sj-leap-bg:#553a2a;    --sj-leap-ink:#ffcaa8;
}


/* ---------- 페이지 ---------- */

.saju-main {
  flex:1;
  padding:6px 0 40px;
}

.saju-intro {
  text-align:center;
  margin:8px 0 22px;
}

.saju-intro .saju-hello {
  display:inline-block;
  padding:7px 14px;
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  font-size:12.5px;
  font-weight:700;
  color:var(--muted);
}

.saju-intro h1 {
  margin:14px 0 8px;
  font-size:clamp(22px,5.6vw,29px);
  line-height:1.42;
  letter-spacing:-.02em;
}

.saju-intro p {
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}


/* ---------- 카드 ---------- */

.saju-card {
  --sj-font:"Jua","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif;

  width:min(100%,460px);
  margin:0 auto;
  padding:22px 20px;
  background:var(--sj-bg);
  color:var(--sj-ink);
  border:2px solid var(--sj-surface);
  border-radius:var(--sj-radius-lg);
  box-shadow:var(--sj-shadow-lg);
  font-family:var(--sj-font);
}

.saju-card * { font-family:inherit; }

.saju-row { margin-bottom:18px; }
.saju-row:last-child { margin-bottom:0; }

.saju-lab {
  display:block;
  margin:0 0 8px 4px;
  font-size:13.5px;
  color:var(--sj-muted);
}

.saju-hint,
.saju-warn {
  margin:8px 4px 0;
  font-size:12.5px;
  line-height:1.6;
  min-height:1.6em;
}

.saju-hint { color:var(--sj-muted); }
.saju-warn { color:var(--sj-warn); }

.saju-fold { display:none; }
.saju-fold.is-open { display:block; animation:sajuPop .24s var(--sj-pop); }

@keyframes sajuPop {
  from { opacity:0; transform:translateY(-6px) scale(.98); }
  to   { opacity:1; transform:none; }
}


/* ---------- 글자 입력 ---------- */

.saju-text {
  width:100%;
  padding:14px 16px;
  border:2px solid var(--sj-line);
  border-radius:var(--sj-radius-md);
  background:var(--sj-surface);
  color:var(--sj-ink);
  font-size:15.5px;
  box-shadow:var(--sj-shadow);
  outline:none;
  transition:border-color .16s ease, transform .16s var(--sj-pop);
}

.saju-text::placeholder { color:var(--sj-muted); opacity:.65; }

.saju-text:focus {
  border-color:var(--sj-pink);
  transform:translateY(-1px);
}


/* ---------- 알약 토글 ---------- */

.saju-segs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.saju-segs > * { flex:1 1 140px; min-width:0; }

.saju-seg {
  display:flex;
  gap:6px;
  padding:6px;
  border:2px solid var(--sj-line);
  border-radius:999px;
  background:var(--sj-surface);
  box-shadow:var(--sj-shadow);
}

.saju-seg button {
  flex:1;
  min-width:0;
  padding:11px 6px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--sj-muted);
  font-size:14.5px;
  line-height:1.2;
  cursor:pointer;
  transition:transform .18s var(--sj-pop), background-color .16s ease, color .16s ease;
}

.saju-seg button:hover { color:var(--sj-ink); }

.saju-seg button[aria-pressed="true"] { transform:translateY(-2px); }

.saju-seg button[aria-pressed="true"][data-value="female"] { background:var(--sj-female-bg); color:var(--sj-female-ink); }
.saju-seg button[aria-pressed="true"][data-value="male"]   { background:var(--sj-male-bg);   color:var(--sj-male-ink); }
.saju-seg button[aria-pressed="true"][data-value="solar"]  { background:var(--sj-solar-bg);  color:var(--sj-solar-ink); }
.saju-seg button[aria-pressed="true"][data-value="lunar"]  { background:var(--sj-lunar-bg);  color:var(--sj-lunar-ink); }
.saju-seg button[aria-pressed="true"][data-value="0"]      { background:var(--sj-normal-bg); color:var(--sj-normal-ink); }
.saju-seg button[aria-pressed="true"][data-value="1"]      { background:var(--sj-leap-bg);   color:var(--sj-leap-ink); }

.saju-seg button[aria-pressed="true"][data-value="hm"],
.saju-seg button[aria-pressed="true"][data-value="ganji"],
.saju-seg button[aria-pressed="true"][data-value="unknown"] {
  background:var(--sj-pink-soft);
  color:var(--sj-pink-ink);
}


/* ---------- 숫자 칸 ---------- */

.saju-tap {
  position:relative;
  padding:4px 0;
  cursor:text;
}

.saju-ghost {
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:1px;
  padding:0;
  border:0;
  opacity:0;
  font-size:16px; /* iOS 확대 방지 */
}

.saju-digits {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}

.saju-box {
  flex:1 1 0;
  min-width:0;
  max-width:40px;
  aspect-ratio:3 / 4;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--sj-line);
  border-radius:14px;
  background:var(--sj-surface);
  box-shadow:var(--sj-shadow);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:clamp(16px,4.4vw,20px);
  font-weight:800;
  color:var(--sj-ink);
  transition:border-color .16s ease, transform .16s var(--sj-pop);
}

.saju-box.is-empty { color:var(--sj-muted); opacity:.45; }

.saju-box.is-here {
  border-color:var(--sj-pink);
  transform:translateY(-3px);
}

.saju-sep {
  padding:0 1px;
  color:var(--sj-muted);
  font-size:15px;
}


/* ---------- 12지지 ---------- */

.saju-branches {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.saju-branches button {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:9px 2px 8px;
  border:2px solid var(--sj-line);
  border-radius:16px;
  background:var(--sj-surface);
  color:var(--sj-ink);
  cursor:pointer;
  box-shadow:var(--sj-shadow);
  transition:transform .18s var(--sj-pop), border-color .16s ease, background-color .16s ease;
}

.saju-branches button:hover { transform:translateY(-2px) rotate(-2deg); }

.saju-branches button[aria-pressed="true"] {
  border-color:var(--sj-pink);
  background:var(--sj-pink-soft);
}

.saju-branches .saju-han {
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",serif;
  font-size:18px;
  font-weight:800;
  line-height:1;
}

.saju-branches .saju-branch-name { font-size:12px; color:var(--sj-muted); }

.saju-branches button[aria-pressed="true"] .saju-branch-name { color:var(--sj-pink-ink); }

.saju-branches .saju-branch-range {
  font-family:"Pretendard Variable",Pretendard,sans-serif;
  font-size:10px;
  color:var(--sj-muted);
  opacity:.75;
}


/* ---------- 모름 스위치 ---------- */

.saju-switch {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:2px solid var(--sj-line);
  border-radius:var(--sj-radius-md);
  background:var(--sj-surface);
  box-shadow:var(--sj-shadow);
  font-size:14.5px;
}

.saju-switch button {
  position:relative;
  flex:0 0 auto;
  width:56px;
  height:32px;
  border:0;
  border-radius:999px;
  background:var(--sj-line);
  cursor:pointer;
  transition:background-color .18s ease;
}

.saju-switch button::after {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:26px;
  height:26px;
  border-radius:999px;
  background:var(--sj-surface);
  box-shadow:0 2px 4px rgba(0,0,0,.18);
  transition:transform .2s var(--sj-pop);
}

.saju-switch button[aria-pressed="true"] { background:var(--sj-pink); }
.saju-switch button[aria-pressed="true"]::after { transform:translateX(24px); }


/* ---------- 미리보기 · 버튼 ---------- */

.saju-echo {
  padding:13px 15px;
  border:2px dashed var(--sj-line);
  border-radius:var(--sj-radius-md);
  background:var(--sj-surface);
  font-size:14px;
  line-height:1.7;
  color:var(--sj-muted);
}

.saju-echo b {
  font-weight:400;
  color:var(--sj-pink-ink);
}

.saju-cta {
  width:100%;
  padding:16px;
  border:0;
  border-radius:999px;
  background:var(--sj-pink);
  color:#4a2a36;
  font-size:17px;
  cursor:pointer;
  box-shadow:0 5px 0 var(--sj-pink-deep);
  transition:transform .16s var(--sj-pop), box-shadow .16s ease;
}

.saju-cta:hover { transform:translateY(-2px); box-shadow:0 7px 0 var(--sj-pink-deep); }
.saju-cta:active { transform:translateY(2px); box-shadow:0 2px 0 var(--sj-pink-deep); }

.saju-cta[disabled] {
  background:var(--sj-line);
  color:var(--sj-muted);
  box-shadow:0 5px 0 var(--sj-line);
  cursor:not-allowed;
  transform:none;
}


/* ---------- 서버 검증 결과 ---------- */

.saju-alert {
  width:min(100%,460px);
  margin:0 auto 16px;
  padding:14px 16px;
  border-radius:var(--sj-radius-md);
  border:2px solid var(--sj-line);
  background:var(--sj-surface);
  font-size:13.5px;
  line-height:1.75;
  color:var(--sj-ink);
  box-shadow:var(--sj-shadow);
}

.saju-alert ul { margin:6px 0 0; padding-left:18px; }
.saju-alert.is-error { border-color:var(--sj-pink); color:var(--sj-warn); }

.saju-again {
  width:min(100%,460px);
  margin:26px auto 12px;
  text-align:center;
  font-family:"Jua","Pretendard Variable",Pretendard,sans-serif;
  font-size:14px;
  color:var(--muted);
}


/* ---------- 원국표 ---------- */

.saju-chart {
  --sj-font:"Jua","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif;
  --sj-han:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;

  position:relative;
  width:min(100%,460px);
  margin:0 auto 6px;
  padding:20px 18px;
  background:var(--sj-bg);
  color:var(--sj-ink);
  border:2px solid var(--sj-surface);
  border-radius:var(--sj-radius-lg);
  box-shadow:var(--sj-shadow-lg);
  font-family:var(--sj-font);
}

.saju-chart * { font-family:inherit; }


/* 누구의 사주인지 */

.saju-chart-hd {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:16px;
  padding-right:38px;
}

.saju-sex {
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--sj-han);
  font-size:20px;
  font-weight:700;
  line-height:1;
  box-shadow:var(--sj-shadow);
}

.saju-sex[data-sex="female"] { background:var(--sj-female-bg); color:var(--sj-female-ink); }
.saju-sex[data-sex="male"]   { background:var(--sj-male-bg);   color:var(--sj-male-ink); }

.saju-who {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.saju-name {
  font-size:16px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.saju-sub {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-family:var(--sj-han);
  font-size:11.5px;
  font-weight:500;
  color:var(--sj-muted);
}

.saju-cal {
  padding:3px 9px;
  border-radius:999px;
  font-family:var(--sj-han);
  font-size:11px;
  font-weight:700;
}

.saju-cal[data-cal="solar"] { background:var(--sj-solar-bg); color:var(--sj-solar-ink); }
.saju-cal[data-cal="lunar"] { background:var(--sj-lunar-bg); color:var(--sj-lunar-ink); }

.saju-age { font-family:var(--sj-han); font-weight:700; color:var(--sj-ink); }
.saju-age small { font-weight:500; color:var(--sj-muted); }


/* 상세정보 */

.saju-info {
  position:absolute;
  top:16px;
  right:16px;
  width:30px;
  height:30px;
  border:2px solid var(--sj-line);
  border-radius:999px;
  background:var(--sj-surface);
  color:var(--sj-muted);
  cursor:pointer;
  font-family:var(--sj-han);
  font-size:15px;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--sj-shadow);
  transition:transform .18s var(--sj-pop), color .16s ease, border-color .16s ease;
}

.saju-info:hover {
  transform:translateY(-2px);
  color:var(--sj-pink-ink);
  border-color:var(--sj-pink);
}

.saju-sheet[hidden] { display:none; }

.saju-sheet {
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(74,58,68,.28);
  border-radius:var(--sj-radius-lg);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

html[data-theme="dark"] .saju-sheet { background:rgba(0,0,0,.45); }

.saju-sheet-box {
  width:100%;
  max-width:330px;
  padding:18px 18px 14px;
  background:var(--sj-surface);
  border:2px solid var(--sj-line);
  border-radius:24px;
  box-shadow:0 18px 40px rgba(120,80,100,.3);
  animation:sajuSheetPop .22s var(--sj-pop);
}

@keyframes sajuSheetPop {
  from { opacity:0; transform:translateY(8px) scale(.96); }
  to   { opacity:1; transform:none; }
}

.saju-sheet-box h4 { margin:0 0 12px; font-size:14.5px; }

.saju-sheet-row {
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:6px 0;
  border-top:1px dotted var(--sj-line);
  font-family:var(--sj-han);
  font-size:12.5px;
}

.saju-sheet-row:first-of-type { border-top:0; }
.saju-sheet-row dt { flex:0 0 58px; margin:0; font-weight:700; color:var(--sj-pink-ink); }
.saju-sheet-row dd { margin:0; color:var(--sj-ink); letter-spacing:-.01em; }

.saju-sheet-close {
  width:100%;
  margin-top:12px;
  padding:11px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:var(--sj-pink);
  color:#4a2a36;
  font-size:14px;
  box-shadow:0 4px 0 var(--sj-pink-deep);
}

.saju-sheet-close:active { transform:translateY(2px); box-shadow:0 2px 0 var(--sj-pink-deep); }


/* 기둥 */

.saju-pillars {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
}

.saju-pillar {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  min-width:0;
}

.saju-pillar-label {
  width:100%;
  padding-bottom:5px;
  border-bottom:2px dotted var(--sj-line);
  font-size:12px;
  color:var(--sj-muted);
}

.saju-god {
  font-size:12px;
  line-height:1.2;
  color:var(--sj-pink-ink);
}

.saju-cell {
  width:100%;
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.9);
  border-radius:20px;
  box-shadow:0 4px 0 rgba(150,100,125,.10);
  font-family:var(--sj-han);
  font-size:clamp(20px,6.2vw,28px);
  font-weight:800;
  line-height:1;
  transition:transform .18s var(--sj-pop);
}

.saju-pillar:hover .saju-cell { transform:translateY(-3px) rotate(-2deg); }

.saju-pillar--day .saju-cell--stem {
  box-shadow:0 4px 0 rgba(150,100,125,.10), 0 0 0 3px var(--sj-pink);
}

.saju-cell--empty {
  background:var(--sj-surface);
  color:var(--sj-muted);
  opacity:.55;
  font-size:22px;
}

html[data-theme="dark"] .saju-cell { border-color:rgba(255,255,255,.10); box-shadow:0 4px 0 rgba(0,0,0,.26); }
html[data-theme="dark"] .saju-pillar--day .saju-cell--stem { box-shadow:0 4px 0 rgba(0,0,0,.26), 0 0 0 3px var(--sj-pink); }


/* 지장간 — 글자마다 오행 색, 모서리는 살짝만 */

.saju-hidden {
  display:flex;
  justify-content:center;
  gap:3px;
  width:100%;
}

.saju-hidden span {
  flex:0 1 auto;
  min-width:19px;
  padding:3px 0;
  border-radius:6px;
  font-family:var(--sj-han);
  font-size:11.5px;
  font-weight:700;
  line-height:1.25;
}


/* 오행 색 */

[data-el="목"] { background:#d9f2df; color:#3f7d5c; }
[data-el="화"] { background:#ffe0e3; color:#c2555f; }
[data-el="토"] { background:#fff0cf; color:#9a7226; }
[data-el="금"] { background:#f3f4f8; color:#6b7180; }
[data-el="수"] { background:#dfeaff; color:#4a6ea8; }

html[data-theme="dark"] [data-el="목"] { background:#2b4736; color:#a8e6c0; }
html[data-theme="dark"] [data-el="화"] { background:#4d2b31; color:#ffb3bd; }
html[data-theme="dark"] [data-el="토"] { background:#4a3d24; color:#ffdca0; }
html[data-theme="dark"] [data-el="금"] { background:#333a44; color:#dfe5ef; }
html[data-theme="dark"] [data-el="수"] { background:#2a3850; color:#b3ccf5; }


/* ---------- 대운 · 세운 · 월운 ---------- */

.saju-step {
  margin-top:14px;
  padding:12px 12px 10px;
  border-radius:18px;
  background:var(--sj-surface);
  border:2px solid var(--sj-line);
  box-shadow:var(--sj-shadow);
}

.saju-step + .saju-step { margin-top:9px; }

.saju-step-hd {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.saju-step-title { font-size:13px; }

.saju-step-pick {
  font-family:var(--sj-han);
  font-size:11.5px;
  font-weight:700;
  color:var(--sj-pink-ink);
}

.saju-scroll {
  overflow-x:auto;
  margin:0 -12px;
  padding:2px 12px 4px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.saju-track {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(50px,1fr);
  gap:7px;
  min-width:100%;
}

.saju-unit {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  text-align:center;
  cursor:pointer;
}

.saju-unit-key { font-family:var(--sj-han); font-size:12px; font-weight:800; }
.saju-unit .saju-god { font-size:10.5px; }

.saju-unit .saju-cell {
  aspect-ratio:auto;
  padding:8px 0;
  border-radius:13px;
  font-size:18px;
}

.saju-unit:hover .saju-cell { transform:translateY(-2px); }
.saju-unit[aria-pressed="true"] .saju-unit-key { color:var(--sj-pink-ink); }

.saju-unit[aria-pressed="true"] .saju-cell--stem {
  box-shadow:0 4px 0 rgba(150,100,125,.10), 0 0 0 3px var(--sj-pink);
}

html[data-theme="dark"] .saju-unit[aria-pressed="true"] .saju-cell--stem {
  box-shadow:0 4px 0 rgba(0,0,0,.26), 0 0 0 3px var(--sj-pink);
}

.saju-chart-note {
  margin:12px 0 0;
  font-size:12px;
  line-height:1.7;
  color:var(--sj-muted);
}


/* ---------- 이미지로 저장 ---------- */

.saju-save { margin-top:16px; }

.saju-save-btn {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:var(--sj-pink);
  color:#4a2a36;
  font-family:"Jua","Pretendard Variable",Pretendard,sans-serif;
  font-size:16px;
  box-shadow:0 5px 0 var(--sj-pink-deep);
  transition:transform .16s var(--sj-pop), box-shadow .16s ease, background-color .2s ease;
}

.saju-save-btn:hover { transform:translateY(-2px); box-shadow:0 7px 0 var(--sj-pink-deep); }
.saju-save-btn:active { transform:translateY(2px); box-shadow:0 2px 0 var(--sj-pink-deep); }

.saju-save-btn[data-state="busy"] {
  background:var(--sj-pink-soft);
  color:var(--sj-pink-ink);
  box-shadow:0 5px 0 var(--sj-line);
  cursor:progress;
}

.saju-save-btn[data-state="busy"]:hover,
.saju-save-btn[data-state="busy"]:active { transform:none; box-shadow:0 5px 0 var(--sj-line); }

.saju-save-btn[data-state="done"] { background:#cfeedd; color:#2f6b45; box-shadow:0 5px 0 #a9dcc1; }
.saju-save-btn[data-state="fail"] { background:var(--sj-line); color:var(--sj-muted); box-shadow:0 5px 0 var(--sj-line); }

html[data-theme="dark"] .saju-save-btn[data-state="done"] { background:#2f4a34; color:#b6e6bd; box-shadow:0 5px 0 #243a29; }

.saju-save-ico {
  font-family:"Pretendard Variable",Pretendard,sans-serif;
  font-size:17px;
  line-height:1;
}

.saju-save-dots { display:inline-flex; gap:4px; }

.saju-save-dots i {
  width:6px;
  height:6px;
  border-radius:999px;
  background:currentColor;
  animation:sajuSaveBounce .9s infinite;
}

.saju-save-dots i:nth-child(2) { animation-delay:.15s; }
.saju-save-dots i:nth-child(3) { animation-delay:.3s; }

@keyframes sajuSaveBounce {
  0%, 60%, 100% { transform:translateY(0);    opacity:.45; }
  30%           { transform:translateY(-5px); opacity:1; }
}


/* 이미지에만 나오는 꼬리말 */

.saju-stamp { display:none; }

.saju-chart.is-capturing .saju-stamp {
  display:block;
  margin-top:14px;
  padding-top:12px;
  border-top:2px dotted var(--sj-line);
  text-align:center;
  font-family:"Pretendard Variable",Pretendard,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--sj-muted);
}


/*
 * 찍기용 자리.
 *
 * 화면 밖에 카드와 똑같은 폭으로 세워 두고 그것을 찍습니다.
 * 화면의 카드는 가운데 정렬이라 왼쪽 여백이 붙어 있는데,
 * 그 값이 그림에 그대로 따라붙으면 카드가 밀려 잘립니다.
 */

.saju-capture {
  position:fixed;
  top:0;
  left:-100000px;
  z-index:-1;
  pointer-events:none;
}

.saju-capture .saju-chart {
  width:100%;
  max-width:none;
  margin:0;
  box-shadow:none;
}

/* 글꼴을 못 심었을 때는 기기 글꼴로 맞춰 재고 찍습니다. */
.saju-capture--system .saju-chart {
  --sj-font:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
}


/*
 * 찍는 동안만 쓰는 모양.
 *
 * 대운 · 세운 · 월운은 평소 가로로 밀어 보지만,
 * 그대로 찍으면 화면 밖은 잘립니다.
 * 그래서 찍는 순간에만 네 칸씩 여러 줄로 펼칩니다.
 */

.saju-chart.is-capturing .saju-scroll {
  overflow:visible;
  margin:0;
  padding:0;
}

.saju-chart.is-capturing .saju-track {
  grid-auto-flow:row;
  grid-template-columns:repeat(4,1fr);
  grid-auto-columns:auto;
  row-gap:10px;
}

.saju-chart.is-capturing .saju-unit { cursor:default; }

/*
 * 강조 테두리는 그림에서 테두리 색으로 바꿉니다.
 *
 * 화면에서는 box-shadow 의 spread 로 분홍 고리를 그리는데,
 * 아이폰 사파리가 그림으로 옮길 때 이 고리를 엉뚱한 자리에
 * 반쯤 잘린 모양으로 그려 놓습니다.
 * 테두리는 칸의 일부라 어느 브라우저에서나 제자리에 나옵니다.
 * (box-sizing 이 border-box 라 3px 로 키워도 칸 크기는 그대로입니다)
 */

.saju-chart.is-capturing .saju-pillar--day .saju-cell--stem,
.saju-chart.is-capturing .saju-unit[aria-pressed="true"] .saju-cell--stem {
  border:3px solid var(--sj-pink);
  box-shadow:0 4px 0 rgba(150,100,125,.10);
}

html[data-theme="dark"] .saju-chart.is-capturing .saju-pillar--day .saju-cell--stem,
html[data-theme="dark"] .saju-chart.is-capturing .saju-unit[aria-pressed="true"] .saju-cell--stem {
  border:3px solid var(--sj-pink);
  box-shadow:0 4px 0 rgba(0,0,0,.26);
}

/*
 * 한자와 숫자는 기기 글꼴로 통일합니다.
 * Pretendard 는 조각이 수백 개라 그림에 심기 어려워서,
 * 재는 것과 그리는 것을 같은 글꼴로 맞추는 편이 안전합니다.
 */
.saju-chart.is-capturing {
  --sj-han:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
}

/* 글꼴이 조금 달라져도 글자가 세로로 쪼개지지 않게 합니다. */
.saju-chart.is-capturing .saju-god,
.saju-chart.is-capturing .saju-unit-key,
.saju-chart.is-capturing .saju-age,
.saju-chart.is-capturing .saju-cal,
.saju-chart.is-capturing .saju-name,
.saju-chart.is-capturing .saju-sub,
.saju-chart.is-capturing .saju-pillar-label,
.saju-chart.is-capturing .saju-step-title,
.saju-chart.is-capturing .saju-step-pick,
.saju-chart.is-capturing .saju-hidden span {
  white-space:nowrap;
}

.saju-chart.is-capturing .saju-sub { flex-wrap:nowrap; }


/* ---------- 접근성 ---------- */

.saju-card :focus-visible,
.saju-chart :focus-visible {
  outline:2.5px solid var(--sj-pink-ink);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce) {
  .saju-card *,
  .saju-fold.is-open {
    transition:none !important;
    animation:none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saju-chart * { transition:none !important; }
  .saju-pillar:hover .saju-cell,
  .saju-unit:hover .saju-cell { transform:none; }
}

@media (max-width:359px) {
  .saju-card,
  .saju-chart { padding:18px 14px; }
  .saju-digits { gap:4px; }
  .saju-branches { grid-template-columns:repeat(3,1fr); }
  .saju-pillars { gap:7px; }
  .saju-step { padding:10px 10px 8px; }
  .saju-scroll { margin:0 -10px; padding:2px 10px 4px; }
}