@charset "utf-8";

/*
 * 사주 공통 스타일
 * 경로: /www/saju/assets/saju.css
 *
 * /saju/ /unse/ /gunghap/ /ilju/ 가 함께 쓴다.
 * 클래스와 CSS 변수는 전부 saju- 접두사로 격리한다. 테마와 충돌하지 않게 하려는 것이다.
 * 요소 선택자를 쓰지 않는다. 테마 스타일이 표와 목록을 깨뜨린다.
 *
 * ── 2026-07-30 전면 개편 ──────────────────────────────
 *
 * 1. 글자 크기를 사용자가 고를 수 있게 만든다
 *    본문 크기를 --saju-fs 하나로 두고 나머지를 전부 그 배수로 쓴다.
 *    예전에는 13·14·15·17·23·29·38px 이 60군데 넘게 박혀 있어서
 *    바깥에서 font-size 를 키워도 화면이 한 글자도 안 커졌다.
 *    .saju-wrap 에 data-fs 를 넣으면 화면 전체가 함께 움직인다.
 *
 *      <div class="saju-wrap" data-fs="lg">
 *
 *    sm 15px · md 16px(기본) · lg 19px · xl 22px
 *
 *    한자 글리프처럼 큰 글자는 min() 으로 상한을 둔다.
 *    상한이 없으면 「더크게」에서 명식 격자가 줄바꿈으로 무너진다.
 *    툴바 자신은 --saju-fs 를 따르지 않는다. 크기 조절 버튼이 같이 커지면
 *    누를수록 버튼이 화면을 먹는다.
 *
 * 2. 색이 정보를 나르게 한다
 *    오방색을 채도만 낮춰 쓴다. 원색을 쓰면 점집이 되고,
 *    회색만 쓰면 관공서 서류가 된다. 그 사이가 이 화면의 자리다.
 *    감청(--saju-blue)이 조작 색이고, 주색(--saju-ju)은 일간·역풍·경고에만 쓴다.
 *    주색을 버튼에까지 쓰면 화면이 붉어져 촌스러워진다.
 *
 * 3. 입력 컨트롤은 --saju-ctl 하나로 높이를 묶는다
 *    height:auto 로 두면 select 가 자기 나름의 줄 높이를 써서 input 과
 *    몇 픽셀씩 어긋나고, 한 줄에 칸이 여러 개인 화면에서 위쪽이 들쭉날쭉해 보인다.
 *    칸 너비도 --saju-fs 배수라 글자를 키우면 칸도 같이 넓어진다.
 */

/* =========================================================
   토큰
   ========================================================= */

.saju-wrap{
  /* 먹 */
  --saju-ink:#191C23;
  --saju-ink2:#414A57;
  --saju-ink3:#77808D;

  /* 바탕 */
  --saju-paper:#F4F6F8;
  --saju-panel:#FFFFFF;
  --saju-rule:#E2E6EB;
  --saju-soft:#EDF0F3;

  /* 조작 색 · 강조 색 */
  --saju-blue:#2F4A7A;
  --saju-ju:#A3474A;

  /* 오행 */
  --saju-mokc:#3A7A63;
  --saju-hwac:#B0524F;
  --saju-toc:#9C8040;
  --saju-geumc:#6B7686;
  --saju-suc:#33507F;

  /* 모서리 */
  --saju-r:14px;
  --saju-r2:10px;

  /* 글자 */
  --saju-fs:16px;
  --saju-t1:calc(var(--saju-fs) * .875);
  --saju-t2:var(--saju-fs);
  --saju-t3:calc(var(--saju-fs) * 1.125);
  --saju-t4:calc(var(--saju-fs) * 1.375);
  --saju-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --saju-ctl:44px;

  color:var(--saju-ink);
  font-size:var(--saju-t2);
  line-height:1.72;
  padding:18px 0 44px;
}

/* 글자 크기 4단계 */
.saju-wrap[data-fs="sm"]{--saju-fs:15px;}
.saju-wrap[data-fs="md"]{--saju-fs:16px;}
.saju-wrap[data-fs="lg"]{--saju-fs:19px;}
.saju-wrap[data-fs="xl"]{--saju-fs:22px;}

.saju-wrap *{box-sizing:border-box;}
.saju-serif{font-family:"Noto Serif KR",serif;}

.saju-mok{color:var(--saju-mokc);}
.saju-hwa{color:var(--saju-hwac);}
.saju-to{color:var(--saju-toc);}
.saju-geum{color:var(--saju-geumc);}
.saju-su{color:var(--saju-suc);}

.saju-sub{font-size:var(--saju-t1);color:var(--saju-ink3);}
.saju-mark{color:var(--saju-ju);}
.saju-sec{margin:0 0 40px;}


/* =========================================================
   머리
   ========================================================= */

.saju-masthead{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding-bottom:15px;border-bottom:1px solid var(--saju-rule);margin-bottom:24px;
}
.saju-masthead h2{
  font-family:"Noto Serif KR",serif;font-weight:700;
  font-size:min(calc(var(--saju-fs) * 1.55), 28px);
  letter-spacing:.16em;margin:0;color:var(--saju-ink);line-height:1.3;
}
/* 부제가 남은 자리를 먹어 툴바와 관리자 링크를 오른쪽으로 민다 */
.saju-masthead span{font-size:var(--saju-t1);color:var(--saju-ink3);margin-right:auto;}

/* 관리자 진입. 최고관리자에게만 보인다 */
.saju-wrap a.saju-adminlink{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:999px;
  border:1px solid var(--saju-rule);background:var(--saju-panel);
  color:var(--saju-ink3);text-decoration:none;
}
.saju-wrap a.saju-adminlink:hover{border-color:var(--saju-blue);color:var(--saju-blue);}
.saju-wrap a.saju-adminlink:focus-visible{outline:2px solid var(--saju-blue);outline-offset:2px;}
.saju-wrap a.saju-adminlink svg{width:18px;height:18px;display:block;}


/* =========================================================
   툴바 — 글자 크기 · 읽어주기
   본문 배율을 따르지 않는다. 자기 크기는 고정이다
   ========================================================= */

.saju-toolbar{
  display:flex;align-items:center;gap:7px;flex:none;flex-wrap:wrap;justify-content:flex-end;
  font-size:14px;line-height:1;
}
.saju-tbset{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--saju-paper);border:1px solid var(--saju-rule);
  border-radius:999px;padding:4px;
}
.saju-tblabel{
  font-size:13px;color:var(--saju-ink3);
  padding:0 5px 0 9px;white-space:nowrap;letter-spacing:.02em;
}
.saju-wrap button.saju-tbbtn{
  font-family:inherit;font-size:13px;line-height:1;
  min-height:30px;padding:0 11px;
  border:0;background:transparent;color:var(--saju-ink2);
  border-radius:999px;cursor:pointer;white-space:nowrap;
}
.saju-wrap button.saju-tbbtn:hover{background:#fff;color:var(--saju-ink);}
.saju-wrap button.saju-tbbtn.saju-on{background:var(--saju-ink);color:#fff;}
.saju-wrap button.saju-tbbtn:focus-visible{outline:2px solid var(--saju-blue);outline-offset:2px;}

/* 읽어주기 */
.saju-tbread{gap:5px;}
.saju-wrap button.saju-tbplay{
  font-family:inherit;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;gap:6px;
  min-height:30px;padding:0 13px;
  border:0;background:transparent;color:var(--saju-ink2);
  border-radius:999px;cursor:pointer;white-space:nowrap;
}
.saju-wrap button.saju-tbplay:hover{background:#fff;color:var(--saju-ink);}
.saju-wrap button.saju-tbplay.saju-on{background:var(--saju-blue);color:#fff;}
.saju-wrap button.saju-tbplay:focus-visible{outline:2px solid var(--saju-blue);outline-offset:2px;}
.saju-tbplay svg{width:15px;height:15px;display:block;flex:none;}

/* 배속. 항상 보이고, 누르면 아래로 패널이 열린다 */
.saju-tbspeed{position:relative;display:inline-flex;align-items:center;}
.saju-wrap button.saju-tbrate{font-family:var(--saju-mono);letter-spacing:.02em;}
.saju-tbpanel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:30;display:none;
  width:246px;padding:9px;
  background:#fff;border:1px solid var(--saju-rule);border-radius:12px;
  box-shadow:0 6px 20px rgba(25,28,35,.10);
}
.saju-tbpanel.saju-on{display:block;}
.saju-tbpanel .saju-tblabel{display:block;padding:1px 6px 7px;}
.saju-tbrow{display:flex;flex-wrap:wrap;gap:4px;}
.saju-tbrow .saju-tbbtn{background:var(--saju-paper);}
.saju-tbrow .saju-tbbtn:hover{background:#E7ECF1;}
.saju-tbrow .saju-tbbtn.saju-on{background:var(--saju-ink);color:#fff;}

/* 배속을 이것저것 눌러본 뒤 되돌아올 자리.
   이미 기본이면 흐리게 죽인다. 눌리는 버튼으로 두면 눌러보게 된다 */
.saju-tbreset{margin-top:7px;padding-top:7px;border-top:1px solid var(--saju-rule);}
.saju-wrap button.saju-tbdefault{width:100%;background:transparent;color:var(--saju-blue);}
.saju-wrap button.saju-tbdefault:hover{background:var(--saju-paper);color:var(--saju-blue);}
.saju-wrap button.saju-tbdefault.saju-off{color:var(--saju-ink3);opacity:.5;cursor:default;background:transparent;}

/* 풀이 덩어리마다 붙는 재생 버튼. 스크립트가 첫 자식으로 꽂는다.
   절대배치로 두면 제목 길이와 여백에 따라 본문 위에 얹힌다.
   float 로 두면 글이 버튼을 피해 흐르므로 어떤 문구에서도 안 겹친다 */
.saju-unit{position:relative;}
.saju-wrap button.saju-readplay{
  float:right;margin:2px 0 8px 14px;
  width:34px;height:34px;padding:0;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--saju-rule);background:var(--saju-panel);
  color:var(--saju-ink3);cursor:pointer;
}
.saju-wrap button.saju-readplay:hover{border-color:var(--saju-blue);color:var(--saju-blue);}
.saju-wrap button.saju-readplay:focus-visible{outline:2px solid var(--saju-blue);outline-offset:2px;}
.saju-wrap button.saju-readplay.saju-on{background:var(--saju-blue);border-color:var(--saju-blue);color:#fff;}
.saju-readplay svg{width:16px;height:16px;display:block;}

/* 지금 읽고 있는 문단 */
.saju-read p.saju-tts-on,
.saju-read h3.saju-tts-on{
  background:rgba(47,74,122,.08);
  border-radius:6px;
  box-shadow:0 0 0 5px rgba(47,74,122,.08);
}


/* =========================================================
   입력
   ========================================================= */

.saju-query{
  background:var(--saju-panel);border:1px solid var(--saju-rule);
  border-radius:var(--saju-r);padding:20px;margin-bottom:32px;
}
/* 테마가 legend 를 화면에서 숨긴다. 이름표는 div 로 만들 것 */
.saju-query legend{font-size:var(--saju-t1);letter-spacing:.16em;color:var(--saju-ink3);padding:0 0 11px;}
.saju-query fieldset{border:0;margin:0;padding:0;}
.saju-qrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.saju-qfield{display:flex;flex-direction:column;gap:6px;}
.saju-qfield label{font-size:var(--saju-t1);color:var(--saju-ink3);letter-spacing:.04em;margin:0;}

.saju-wrap input[type=number],
.saju-wrap select{
  font-size:var(--saju-t2);
  height:var(--saju-ctl);
  padding:0 11px;
  border:1px solid #D7DDE4;background:#fff;color:var(--saju-ink);
  border-radius:var(--saju-r2);
  line-height:normal;
  vertical-align:middle;
  margin:0;
}
.saju-wrap input[type=number]{font-family:var(--saju-mono);text-align:center;}

/* 스피너를 없앤다. 좁은 칸에서 폭을 먹어 글자가 눌린다 */
.saju-wrap input[type=number]{-moz-appearance:textfield;appearance:textfield;}
.saju-wrap input[type=number]::-webkit-outer-spin-button,
.saju-wrap input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* select 는 기본 모양을 끄고 화살표를 직접 그린다.
   운영체제 기본 모양을 두면 브라우저마다 높이와 여백이 달라진다 */
.saju-wrap select{
  font-family:inherit;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:28px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2377808D' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}
.saju-wrap select::-ms-expand{display:none;}

.saju-wrap input[type=number]:hover,
.saju-wrap select:hover{border-color:#BCC5CF;}
.saju-wrap input[type=number]:focus,
.saju-wrap select:focus,
.saju-wrap button:focus-visible{outline:2px solid var(--saju-blue);outline-offset:2px;}

/* 칸 너비도 글자 크기를 따라간다 */
.saju-wy{width:calc(var(--saju-fs) * 5.75);}
.saju-ws{width:calc(var(--saju-fs) * 4.13);}
.saju-wsel{width:calc(var(--saju-fs) * 5.25);}

.saju-qcheck{
  display:flex;align-items:center;gap:8px;height:var(--saju-ctl);
  font-size:var(--saju-t1);color:var(--saju-ink2);margin:0;
}
.saju-qcheck input{width:17px;height:17px;accent-color:var(--saju-blue);margin:0;}


/* =========================================================
   버튼
   ========================================================= */

.saju-btn{
  font-family:inherit;
  font-size:var(--saju-t2);font-weight:600;letter-spacing:.04em;
  height:var(--saju-ctl);padding:0 26px;
  border:1px solid var(--saju-blue);background:var(--saju-blue);color:#fff;
  cursor:pointer;border-radius:var(--saju-r2);line-height:1;
}
.saju-btn:hover{background:#253C64;border-color:#253C64;color:#fff;}
.saju-btn-ghost{background:transparent;color:var(--saju-ink2);border-color:#D7DDE4;}
.saju-btn-ghost:hover{background:var(--saju-paper);color:var(--saju-ink);border-color:#BCC5CF;}
.saju-btn-sm{font-size:var(--saju-t1);font-weight:500;height:36px;padding:0 15px;letter-spacing:0;}


/* =========================================================
   섹션 라벨
   ========================================================= */

.saju-eyebrow{
  position:relative;
  font-family:"Noto Serif KR",serif;font-weight:600;
  font-size:min(calc(var(--saju-fs) * 1.25), 23px);
  letter-spacing:.1em;color:var(--saju-ink);line-height:1.5;
  padding-bottom:11px;border-bottom:1px solid var(--saju-rule);margin:0 0 18px;
}
.saju-eyebrow::after{
  content:"";position:absolute;left:0;bottom:-1px;
  width:30px;height:2px;background:var(--saju-blue);
}


/* =========================================================
   명식
   ========================================================= */

.saju-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--saju-rule);border-radius:var(--saju-r);
  background:var(--saju-panel);overflow:hidden;
}
.saju-col{border-right:1px solid var(--saju-soft);padding:16px 5px 18px;text-align:center;}
.saju-col:last-child{border-right:0;}
.saju-col.saju-day{background:var(--saju-paper);}
.saju-pos{font-family:"Noto Serif KR",serif;font-size:var(--saju-t1);color:var(--saju-ink3);letter-spacing:.1em;}
.saju-poskr{font-size:var(--saju-t1);color:var(--saju-ink3);margin-bottom:12px;}
.saju-sip{font-size:var(--saju-t1);color:var(--saju-ink2);min-height:1.5em;}
.saju-glyph{
  font-family:"Noto Serif KR",serif;font-weight:700;
  font-size:min(calc(var(--saju-fs) * 2.35), 40px);
  line-height:1.25;display:block;
}
.saju-glyphkr{font-size:var(--saju-t1);color:var(--saju-ink3);margin-top:1px;}

/* 큰 자리를 한글에 내준 한자 (2026-07-31)
   같은 줄의 오행 글자보다 한 단 크고 굵고 진하다.
   한자를 아는 사람에게는 이쪽이 여전히 본체라 부속물처럼 깔리면 안 된다.
   더 키우려면 --saju-t3 을 --saju-t4 로. 그 위는 한글과 경쟁하기 시작한다. */
.saju-han{
  font-family:"Noto Serif KR",serif;font-weight:700;
  font-size:var(--saju-t3);color:var(--saju-ink2);
}

/* 일간 테두리 — 줄이 밀리지 않게 (2026-07-31)
   테두리 위아래 3px 과 안쪽 여백 6px 이 일주 칸에만 붙어서,
   그 아래의 한글 독음·지지·지장간이 다른 세 칸보다 9px 씩 내려앉아
   격자의 가로줄이 어긋나 있었다. 다른 칸에는 없는 여백이라 생긴 일이다.
   세로 여백만 음수 마진으로 되돌린다. 모양은 그대로고 줄만 맞는다.
     위  3.5 = 테두리 1.5 + 패딩 2
     아래 5.5 = 테두리 1.5 + 패딩 4
   ★ padding 을 고치면 이 margin 도 같은 값으로 함께 고칠 것.
     안 그러면 다시 어긋난다. 오류는 안 나고 눈으로만 잡힌다. */
.saju-ilgan{
  display:inline-block;border:1.5px solid var(--saju-ju);border-radius:9px;
  padding:2px 10px 4px;margin:-3.5px 0 -5.5px;
}
.saju-jj{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--saju-soft);
  font-size:var(--saju-t1);color:var(--saju-ink3);line-height:1.75;
}
.saju-note{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:var(--saju-t1);color:var(--saju-ink3);margin-top:10px;
}


/* =========================================================
   오행
   ========================================================= */

.saju-ohaeng{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--saju-soft);border:1px solid var(--saju-rule);
  border-radius:var(--saju-r);overflow:hidden;
}
.saju-ohcell{background:var(--saju-panel);padding:17px 6px;text-align:center;}
.saju-ohhan{font-family:"Noto Serif KR",serif;font-size:min(calc(var(--saju-fs) * 1.56), 27px);font-weight:500;}
.saju-ohcnt{font-family:var(--saju-mono);font-size:var(--saju-t3);margin-top:4px;}

/* color 를 여기서 정하지 않는다 (2026-07-31)
   개수와 백분율은 마크업에서 오행 색 클래스(.saju-mok 등)를 받는다.
   여기에 color 를 남겨두면 명시도가 같아 나중에 선언된 이 규칙이 이겨
   오행 색이 통째로 먹힌다. 되살리지 말 것. */
.saju-ohkr{font-size:var(--saju-t1);}
.saju-ohcell.saju-empty .saju-ohhan,
.saju-ohcell.saju-empty .saju-ohcnt{opacity:.26;}
.saju-ohcell.saju-empty .saju-ohkr{color:var(--saju-ju);}
.saju-ohbar{height:10px;background:var(--saju-soft);border-radius:999px;margin-top:10px;overflow:hidden;}
.saju-ohbar span{display:block;height:10px;border-radius:999px;}

/* 판정 배지 — 없음과 태과일 때만 (2026-07-31)
   다섯 칸에 전부 배지가 달리면 무엇이 쏠린 것인지 도로 안 보인다.
   단계를 넷(부족·적정·발달·과다)으로 늘리지 말 것 — 판정 경계는
   0 과 SAJU_SC_OVER 둘뿐이고, 화면에만 층을 만들면 풀이 문구와 어긋난다.
   자리는 배지가 없는 칸에도 남겨 다섯 칸 높이를 맞춘다. */
.saju-ohtag{min-height:1.9em;margin-top:9px;}
.saju-ohtag-lack,
.saju-ohtag-over{
  display:inline-block;font-size:var(--saju-t1);line-height:1.65;
  padding:0 10px;border-radius:999px;
}
.saju-ohtag-lack{color:var(--saju-ju);border:1px solid var(--saju-ju);}
.saju-ohtag-over{color:var(--saju-panel);background:var(--saju-ink);}

/* 상생상극 관계도 (2026-07-31)
   도형은 chart.lib.php 가 만든다. CSS 를 그 파일 안에 두지 않는 이유는
   18.22 — PHP 안에 들어간 CSS 는 다음에 화면을 손볼 때 잊는다.
   상자 폭이 --saju-fs 배수라 글자를 키우면 도형도 함께 커진다. */
.saju-ohwheelbox{
  background:var(--saju-panel);border:1px solid var(--saju-rule);
  border-radius:var(--saju-r);padding:16px 12px 12px;margin-top:14px;
}
.saju-ohwheel{display:block;max-width:min(calc(var(--saju-fs) * 21), 360px);margin:0 auto;}
.saju-ohwheelcap{font-size:var(--saju-t1);color:var(--saju-ink3);text-align:center;padding-top:8px;}
/* 오행이란 설명 카드 (2026-07-31)
   상자는 .saju-details 를 그대로 쓴다. 여닫기가 이미 붙어 있다.
   ★ .saju-details 는 이 파일 뒤쪽(근거 구획)에 있고 margin-bottom 을 갖는다.
     여기서 클래스 하나로 덮으려 하면 명시도가 같아 뒤에 선언된 쪽이 이긴다.
     그래서 클래스 둘을 겹쳐 쓴다. 18.19 에서 밟은 것과 같은 자리다. */
.saju-details.saju-guidebox{margin:14px 0 0;}
.saju-guide{padding:15px 18px 18px;color:var(--saju-ink2);line-height:1.85;}
.saju-guidep{margin-bottom:9px;}
.saju-guideh{font-size:var(--saju-t2);font-weight:600;color:var(--saju-ink);margin:17px 0 7px;}
.saju-guiderow{margin:3px 0;}
.saju-guidename{font-weight:600;}

.saju-ohbar span.saju-mok{background:var(--saju-mokc);}
.saju-ohbar span.saju-hwa{background:var(--saju-hwac);}
.saju-ohbar span.saju-to{background:var(--saju-toc);}
.saju-ohbar span.saju-geum{background:var(--saju-geumc);}
.saju-ohbar span.saju-su{background:var(--saju-suc);}


/* =========================================================
   오늘
   ========================================================= */

.saju-today{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1px;
  background:var(--saju-soft);border:1px solid var(--saju-rule);
  border-radius:var(--saju-r);overflow:hidden;
}
.saju-tcell{background:var(--saju-panel);padding:15px 8px 17px;text-align:center;}
.saju-tcell.saju-lead{background:#21262F;}
.saju-tcell.saju-lead .saju-tlabel,
.saju-tcell.saju-lead .saju-twhen,
.saju-tcell.saju-lead .saju-tkr,
.saju-tcell.saju-lead .saju-tsip{color:#C3CAD4;}
.saju-tcell.saju-lead .saju-tgj{color:#fff;}
.saju-tlabel{font-size:var(--saju-t1);letter-spacing:.14em;color:var(--saju-ink3);}
.saju-twhen{font-family:var(--saju-mono);font-size:var(--saju-t1);color:var(--saju-ink3);margin-bottom:6px;}
.saju-tgj{font-family:"Noto Serif KR",serif;font-size:min(calc(var(--saju-fs) * 1.82), 32px);font-weight:700;line-height:1.2;}
.saju-tcell:not(.saju-lead) .saju-tgj{font-size:min(calc(var(--saju-fs) * 1.45), 26px);}
.saju-tkr{font-size:var(--saju-t1);color:var(--saju-ink3);}
.saju-tsip{font-size:var(--saju-t1);color:var(--saju-ink2);margin-top:5px;font-weight:600;}


/* =========================================================
   대운
   ========================================================= */

.saju-duhead{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--saju-t1);color:var(--saju-ink2);margin-bottom:13px;}
.saju-rail{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;}
.saju-railin{
  display:flex;border:1px solid var(--saju-rule);background:var(--saju-panel);
  border-radius:var(--saju-r);overflow:hidden;min-width:620px;
}
.saju-du{flex:1;text-align:center;padding:13px 4px 15px;border-right:1px solid var(--saju-soft);}
.saju-du:last-child{border-right:0;}
.saju-du.saju-now{background:#21262F;}
.saju-du.saju-now .saju-duage,
.saju-du.saju-now .saju-dusip,
.saju-du.saju-now .saju-duyr{color:#C3CAD4;}
.saju-du.saju-now .saju-dugj{color:#fff;}
.saju-duage{font-family:var(--saju-mono);font-size:var(--saju-t1);color:var(--saju-ink3);}
.saju-dugj{font-family:"Noto Serif KR",serif;font-size:min(calc(var(--saju-fs) * 1.45), 26px);font-weight:700;margin:5px 0 2px;}
.saju-dusip{font-size:var(--saju-t1);color:var(--saju-ink2);}
.saju-duyr{font-family:var(--saju-mono);font-size:var(--saju-t1);color:var(--saju-ink3);margin-top:2px;}


/* =========================================================
   세운
   ========================================================= */

.saju-wrap table.saju-seun{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:var(--saju-t1);background:var(--saju-panel);
  border:1px solid var(--saju-rule);border-radius:var(--saju-r);
  overflow:hidden;margin:0;
}
.saju-seun th{
  font-size:var(--saju-t1);font-weight:500;letter-spacing:.08em;color:var(--saju-ink3);
  text-align:left;padding:12px;border-bottom:1px solid var(--saju-rule);background:transparent;
}
.saju-seun td{padding:11px 12px;border-bottom:1px solid var(--saju-soft);}
.saju-seun tr:last-child td{border-bottom:0;}
.saju-seun tr.saju-now td{background:var(--saju-paper);font-weight:600;}
.saju-cyr,.saju-cage{font-family:var(--saju-mono);}
.saju-cgj{font-family:"Noto Serif KR",serif;font-size:var(--saju-t3);}


/* =========================================================
   풀이
   ========================================================= */

.saju-read{
  background:var(--saju-panel);border:1px solid var(--saju-rule);
  border-radius:var(--saju-r);padding:6px 22px 20px;
}
.saju-read h3{
  font-family:"Noto Serif KR",serif;
  font-size:calc(var(--saju-fs) * 1.06);font-weight:700;
  margin:20px 0 8px;color:var(--saju-ink);line-height:1.5;
}
.saju-read p{margin:0 0 6px;font-size:var(--saju-t2);line-height:1.85;color:var(--saju-ink2);}
.saju-read + .saju-read{margin-top:16px;}


/* =========================================================
   근거
   ========================================================= */

.saju-details{
  background:var(--saju-panel);border:1px solid var(--saju-rule);
  border-radius:var(--saju-r);margin-bottom:26px;overflow:hidden;
}
.saju-details summary{
  padding:14px 18px;cursor:pointer;font-size:var(--saju-t1);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.saju-details summary::-webkit-details-marker{display:none;}
.saju-details summary::after{content:"열기";font-size:var(--saju-t1);color:var(--saju-ink3);}
.saju-details[open] summary::after{content:"닫기";}
.saju-details[open] summary{border-bottom:1px solid var(--saju-soft);}
.saju-details summary:hover{background:var(--saju-paper);}

/* 판정 근거 상자 안쪽 */
.saju-wrap .saju-scwhy{font-size:var(--saju-t1);color:var(--saju-ink2);padding:2px 18px 16px;}
.saju-wrap .saju-scrow{padding:13px 0;border-top:1px solid var(--saju-soft);}
.saju-wrap .saju-scrow:first-child{border-top:0;}
.saju-wrap .saju-schead{font-size:var(--saju-t2);font-weight:600;margin-bottom:5px;}
.saju-wrap .saju-scval{font-family:var(--saju-mono);font-size:var(--saju-t1);font-weight:400;color:var(--saju-ink3);margin-left:5px;}
.saju-wrap .saju-scline{font-size:var(--saju-t1);color:var(--saju-ink3);line-height:1.85;}
.saju-wrap .saju-scnote{margin-top:13px;padding-top:12px;border-top:1px solid var(--saju-soft);font-size:var(--saju-t1);color:var(--saju-ink3);line-height:1.8;}

.saju-wrap table.saju-basis{width:100%;border-collapse:collapse;font-size:var(--saju-t1);margin:0;}
.saju-basis th{
  width:170px;text-align:left;font-weight:400;color:var(--saju-ink3);
  padding:10px 18px;vertical-align:top;background:transparent;
}
.saju-basis td{padding:10px 18px 10px 0;font-family:var(--saju-mono);font-size:var(--saju-t1);}
.saju-basis tr+tr th,.saju-basis tr+tr td{border-top:1px solid var(--saju-soft);}
.saju-plain{font-family:inherit;font-size:var(--saju-t1);}


/* =========================================================
   상태 박스
   ========================================================= */

.saju-locked{
  background:var(--saju-paper);border:1px solid var(--saju-rule);border-radius:var(--saju-r);
  padding:16px 18px;font-size:var(--saju-t1);color:var(--saju-ink3);margin-bottom:16px;
}
.saju-err{
  background:var(--saju-panel);border:1px solid var(--saju-ju);border-radius:var(--saju-r);
  padding:18px;font-size:var(--saju-t1);color:var(--saju-ink2);
}
.saju-intro{
  background:var(--saju-paper);border:1px solid var(--saju-rule);border-radius:var(--saju-r);
  padding:46px 20px;text-align:center;color:var(--saju-ink3);font-size:var(--saju-t1);
}
.saju-intro .saju-big{
  font-family:"Noto Serif KR",serif;
  font-size:min(calc(var(--saju-fs) * 1.5), 26px);
  color:var(--saju-ink);display:block;margin-bottom:10px;letter-spacing:.14em;
}
.saju-tools{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:26px;}
.saju-notice{
  border-top:1px solid var(--saju-rule);padding-top:18px;
  font-size:var(--saju-t1);color:var(--saju-ink3);line-height:1.9;
}
.saju-notice b{color:var(--saju-ink2);font-weight:600;}

.saju-more{
  background:var(--saju-paper);border:1px solid var(--saju-rule);border-radius:var(--saju-r);
  padding:16px 18px;font-size:var(--saju-t1);color:var(--saju-ink2);margin-bottom:26px;
}
.saju-more b{color:var(--saju-ink);font-weight:600;}


/* =========================================================
   내 정보 저장
   ========================================================= */

.saju-savebar{
  background:var(--saju-panel);border:1px solid var(--saju-rule);border-radius:var(--saju-r);
  padding:14px 17px;margin-bottom:24px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-size:var(--saju-t1);color:var(--saju-ink3);
}
.saju-savebar strong{color:var(--saju-ink2);font-weight:600;}
.saju-saveitem{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--saju-rule);border-radius:999px;padding:4px;}
.saju-saveitem.saju-ismain{border-color:var(--saju-blue);}
.saju-mainbadge{font-size:var(--saju-t1);color:var(--saju-blue);padding:0 8px;letter-spacing:.06em;}
.saju-savemsg{font-size:var(--saju-t1);color:var(--saju-ju);}


/* =========================================================
   궁합
   ========================================================= */

/* 입력.
   fieldset·legend 를 쓰지 않는다. 테마가 legend 를 화면에서 숨겨 이름이 사라진다.
   .saju-query 가 이미 흰 상자이므로 사람 칸에 테두리를 또 두르지 않는다.
   두 사람을 가르는 것은 이름 밑줄과 가운데 한 글자다 */
.saju-ghset{padding:0;}
.saju-ghwho2{
  font-size:var(--saju-t1);letter-spacing:.16em;color:var(--saju-ink3);
  padding-bottom:11px;margin-bottom:15px;border-bottom:1px solid var(--saju-soft);
}
.saju-ghwhen{font-size:var(--saju-t1);color:var(--saju-ink2);margin-top:13px;}
.saju-ghjoin{text-align:center;padding:24px 0;position:relative;}
.saju-ghjoin span{
  display:inline-block;background:var(--saju-panel);position:relative;z-index:1;
  padding:0 16px;font-size:var(--saju-t3);color:var(--saju-ink3);letter-spacing:.1em;
}
.saju-ghjoin::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--saju-soft);}
.saju-ghgo{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--saju-soft);
  display:flex;flex-wrap:wrap;gap:13px;align-items:center;
}

/* 마주 보기 */
.saju-ghpair{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:var(--saju-panel);border:1px solid var(--saju-rule);
  border-radius:var(--saju-r);overflow:hidden;
}
.saju-ghside{padding:22px 8px 24px;text-align:center;}
.saju-ghwho{font-size:var(--saju-t1);letter-spacing:.14em;color:var(--saju-ink3);margin-bottom:8px;}
.saju-ghgj{font-size:min(calc(var(--saju-fs) * 2.5), 44px);font-weight:700;line-height:1.2;letter-spacing:.05em;}
.saju-ghkr{font-size:var(--saju-t1);color:var(--saju-ink3);margin-top:4px;}
.saju-ghmid{padding:0 6px;text-align:center;min-width:76px;}
.saju-ghrel{font-size:min(calc(var(--saju-fs) * 1.65), 29px);color:var(--saju-ink);line-height:1.1;}
.saju-ghrellabel{font-size:var(--saju-t1);color:var(--saju-ink3);margin-top:6px;}

/* 운세 탭 — 오늘 · 이번 주 */
.saju-untabs{
  display:flex;gap:6px;margin-bottom:24px;
  background:var(--saju-paper);border:1px solid var(--saju-rule);
  border-radius:999px;padding:5px;
}
.saju-wrap button.saju-untab{
  flex:1;font-family:inherit;font-size:var(--saju-t2);font-weight:500;
  min-height:40px;padding:0 18px;line-height:1.4;
  border:0;background:transparent;color:var(--saju-ink3);
  border-radius:999px;cursor:pointer;white-space:nowrap;
}
.saju-wrap button.saju-untab:hover{background:#fff;color:var(--saju-ink);}
.saju-wrap button.saju-untab.saju-on{background:var(--saju-ink);color:#fff;font-weight:600;}
.saju-wrap button.saju-untab:focus-visible{outline:2px solid var(--saju-blue);outline-offset:2px;}
.saju-unpane{display:none;}
.saju-unpane.saju-on{display:block;}
.saju-unwhen{
  font-size:var(--saju-t2);color:var(--saju-ink3);
  margin:-8px 0 18px;padding:0 2px;
}
.saju-unwhen b{
  font-family:"Noto Serif KR",serif;font-weight:700;
  font-size:calc(var(--saju-fs) * 1.12);color:var(--saju-ink);
}

/* 궁합 2차 탭 — 관계 유형. 파일 탭이 아니라 알약이다 */
.saju-ghtabs{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px;
  background:var(--saju-paper);border:1px solid var(--saju-rule);
  border-radius:999px;padding:5px;
}
.saju-wrap a.saju-ghtab{
  display:block;padding:9px 22px;font-size:var(--saju-t1);
  color:var(--saju-ink3);text-decoration:none;background:transparent;
  border:0;border-radius:999px;line-height:1.45;
}
.saju-wrap a.saju-ghtab:hover{color:var(--saju-ink);background:#fff;}
.saju-wrap a.saju-ghtab.saju-on{background:var(--saju-ink);color:#fff;font-weight:600;}

/* 두 사람을 나란히 — 명식 격자와 오행 분포가 함께 쓴다 */
.saju-ghtwo{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.saju-ghtwo > div{min-width:0;}
.saju-ghlabel{font-size:var(--saju-t1);letter-spacing:.16em;color:var(--saju-ink3);margin-bottom:9px;}

/* 총점 */
.saju-ghscore{
  background:var(--saju-panel);border:1px solid var(--saju-rule);border-radius:var(--saju-r);
  padding:26px 14px 28px;text-align:center;margin-top:24px;
}
.saju-ghnum{font-family:var(--saju-mono);font-size:min(calc(var(--saju-fs) * 3.4), 58px);line-height:1.05;color:var(--saju-ink);}
.saju-ghhigh .saju-ghnum{color:var(--saju-mokc);}
.saju-ghlow .saju-ghnum{color:var(--saju-ju);}
.saju-ghgrade{font-size:var(--saju-t2);color:var(--saju-ink2);margin-top:7px;letter-spacing:.06em;}
.saju-ghword{font-size:var(--saju-t1);color:var(--saju-ink3);margin-top:4px;}
.saju-ghmidnote{font-size:var(--saju-t1);color:var(--saju-ink3);margin:10px 0 24px;}

/* 축 넷 */
.saju-ghaxis{
  background:var(--saju-panel);border:1px solid var(--saju-rule);border-radius:var(--saju-r);
  padding:6px 18px 16px;margin-top:24px;
}
.saju-ghrow{padding:15px 0;border-top:1px solid var(--saju-soft);}
.saju-ghrow:first-child{border-top:0;}
.saju-ghhead{display:flex;align-items:baseline;gap:10px;margin-bottom:9px;}
.saju-ghname{font-size:var(--saju-t2);font-weight:600;color:var(--saju-ink);}
.saju-ghname i{
  font-style:normal;font-family:var(--saju-mono);font-size:var(--saju-t1);
  color:var(--saju-ink3);font-weight:400;margin-left:5px;
}
.saju-ghwhat{font-size:var(--saju-t1);color:var(--saju-ink3);}
.saju-ghval{margin-left:auto;font-family:var(--saju-mono);font-size:var(--saju-t2);color:var(--saju-ink3);}
.saju-ghval.saju-ghplus{color:var(--saju-mokc);}
.saju-ghval.saju-ghminus{color:var(--saju-ju);}
.saju-ghtrack{position:relative;height:10px;background:var(--saju-soft);border-radius:999px;}
.saju-ghzero{position:absolute;left:50%;top:-2px;width:1px;height:14px;background:#CBD3DB;}
.saju-ghfill{position:absolute;top:0;height:10px;background:var(--saju-ink3);border-radius:999px;}
.saju-ghfill.saju-ghplus{background:var(--saju-mokc);}
.saju-ghfill.saju-ghminus{background:var(--saju-ju);}
.saju-ghtags{font-size:var(--saju-t1);color:var(--saju-ink3);margin-top:8px;}


/* =========================================================
   모바일
   ========================================================= */

@media (max-width:640px){
  .saju-wrap{padding-left:14px;padding-right:14px;--saju-ctl:42px;}

  /* 툴바는 제목 아래로 내려가 한 줄을 다 쓴다.
     예전에는 overflow-x:auto 로 밀어 보게 했는데, 그러면 배속 패널이
     그 상자에 잘려서 화면에 안 나온다. 줄바꿈으로 처리한다 */
  .saju-masthead{gap:8px 11px;}
  .saju-masthead span{margin-right:0;}
  .saju-toolbar{
    order:3;width:100%;
    flex-wrap:wrap;justify-content:flex-start;
  }
  .saju-tbset{flex:none;}
  .saju-tbpanel{right:auto;left:0;}
  .saju-wrap a.saju-adminlink{margin-left:auto;}

  .saju-col{padding:13px 3px 14px;}
  .saju-today{grid-template-columns:1fr;}
  .saju-basis th{width:auto;display:block;padding:10px 15px 0;}
  .saju-basis td{display:block;padding:0 15px 11px;}
  .saju-basis tr+tr th{border-top:1px solid var(--saju-soft);padding-top:11px;}
  .saju-basis tr+tr td{border-top:0;}

  .saju-query{padding:16px;}
  .saju-read{padding:4px 16px 16px;}

  /* 좌우 여백 26px 은 좁은 화면에서 버튼 글자를 줄바꿈시킨다.
     「사주(명식) 보기」처럼 긴 글자가 들어가는 자리가 있다 */
  .saju-btn{padding:0 16px;letter-spacing:0;}
  .saju-btn-sm{padding:0 12px;}

  /* 조회 버튼은 폼 줄의 마지막이라 앞 칸들이 폭을 먹으면 남는 자리가 없다.
     글자를 줄여도 다음에 또 걸린다. 줄을 통째로 내주는 편이 확실하고
     손가락으로 누르기도 쉽다 */
  .saju-query .saju-qrow > .saju-btn{flex:1 0 100%;}

  .saju-ghjoin{padding:18px 0;}
  .saju-ghtabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--saju-r2);}
  .saju-ghtabs::-webkit-scrollbar{display:none;}
  .saju-wrap a.saju-ghtab{flex:1 0 auto;text-align:center;padding:9px 16px;white-space:nowrap;}
  .saju-ghtwo{grid-template-columns:1fr;gap:22px;}
  .saju-ghgo .saju-btn{width:100%;}
  .saju-ghgo .saju-sub{width:100%;margin:0;}
  .saju-ghset .saju-qrow{gap:8px 9px;}
  .saju-ghset .saju-qcheck{width:100%;height:auto;margin-top:2px;}
  .saju-ghside{padding:18px 4px 20px;}
  .saju-ghmid{min-width:58px;padding:0 2px;}
  .saju-ghaxis{padding:4px 14px 13px;}
  .saju-ghhead{flex-wrap:wrap;gap:6px;}
  .saju-ghwhat{width:100%;order:3;}
  .saju-ghval{order:2;}
}


/* =========================================================
   모션 — 명식이 오른쪽(년주)부터 차례로 올라온다
   ========================================================= */

@media (prefers-reduced-motion:no-preference){
  .saju-col{animation:sajuRise .5s cubic-bezier(.2,.7,.3,1) both;}
  .saju-col:nth-child(1){animation-delay:.24s;}
  .saju-col:nth-child(2){animation-delay:.16s;}
  .saju-col:nth-child(3){animation-delay:.08s;}
  .saju-col:nth-child(4){animation-delay:0s;}
  @keyframes sajuRise{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
}