/* 무료사주풀이도우미 — 백지 스킨. 정본: design/v1-baekji.html
   붉은 실(--thread)이 유일한 포인트 색이고, 오행 5색은 도해·범례에서만 쓴다. */
:root{
  /* 로고 PNG에서 뽑은 값 — 붉은 제본 실이 유일한 포인트 색이다 */
  --paper:#FFFFFF;
  --ink:#1C1A18;
  --ink-soft:#3E3A36;
  --muted:#726B64;
  --rule:#E2DDD7;
  --rule-soft:#EFEBE6;
  --dim:#ABA49D;           /* 비활성 글자·화살표 */
  --thread:#A8492E;        /* 실 중간톤 (표본 중앙값) */
  --thread-deep:#803725;   /* 실 그늘 */
  --panel:#FAFAF8;         /* 시안에 없는 면 — 프롬프트 예시·admin 표의 바탕 */

  /* 오행 5색 — 도해·범례 전용. 네 기둥·대운의 간지는 먹색 하나로 둔다 */
  --el-wood:#4C5C22; --el-fire:#8F2A0F; --el-earth:#6B4A22;
  --el-metal:#8A6A1C; --el-water:#243040;

  --disp:"Hahmlet","Noto Serif KR","Nanum Myeongjo",serif;
  --serif:"Noto Serif KR","Nanum Myeongjo",serif;   /* 간지 = 페이지의 유일한 명조 */
  --sans:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
/* 시안 그대로면 .check{display:flex} 가 UA 의 [hidden]{display:none} 를 이겨 #leap-wrap 이 항상 보인다 */
[hidden]{display:none!important}
.wrap{max-width:440px;margin:0 auto;padding:0 22px 64px}
:focus-visible{outline:2px solid var(--thread);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* app.js 의 scrollIntoView 는 behavior 를 안 준다 — 부드러움 여부를 여기서 정한다 */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ── 헤더 : 로고 + 워드마크 + 탭 2개 ───────────────────────────── */
header{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 0 16px;border-bottom:1px solid var(--rule)}
.lockup{display:flex;align-items:center;margin:0}

/* ── 카테고리 칩 — 헤더 아래 한 줄. 모바일은 가로 스크롤(스크롤바 숨김) ── */
.chips{display:flex;gap:8px;margin:14px 0 30px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;padding:7px 14px;border:1px solid var(--rule);border-radius:999px;
  font-size:13px;color:var(--ink-soft);text-decoration:none;background:var(--paper);
  transition:border-color .15s ease,color .15s ease}
.chips a:hover{border-color:var(--ink);color:var(--ink)}
.lockup .name{font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.tabs{display:flex;gap:14px;font-size:12.5px}
.tabs a{color:var(--muted);text-decoration:none;padding-bottom:3px;white-space:nowrap;
  border-bottom:2px solid transparent}
.tabs a[aria-current=page]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}

/* ── 히어로 ───────────────────────────────────────────────────── */
.hero{padding:34px 0 30px}
.hero .book{width:104px;height:104px;margin-bottom:22px;mix-blend-mode:multiply;filter:brightness(1.04)}
h1{font-family:var(--disp);font-size:32px;font-weight:700;line-height:1.42;
  letter-spacing:-.022em;margin:0 0 14px}
.lede{font-size:14.5px;color:var(--muted);line-height:1.78;margin:0}
/* 입춘 주석(/unse) — 시안에 없는 줄이라 히어로 안에서 괘선 한 줄로만 끊는다 */
.prov{font-size:12.5px;color:var(--muted);margin:16px 0 0;padding-top:10px;
  border-top:1px solid var(--rule)}
.prov b{color:var(--ink-soft);font-weight:600}

/* ── 입력 폼 ──────────────────────────────────────────────────── */
.f{margin-bottom:22px}
.f>span{display:block;font-size:12.5px;font-weight:500;color:var(--muted);
  letter-spacing:.04em;margin-bottom:8px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{font-family:var(--sans);font-size:15px;padding:13px 8px;cursor:pointer;
  border-radius:3px;background:var(--paper);border:1px solid var(--rule);color:var(--muted)}
.seg button[aria-pressed=true]{color:var(--ink);font-weight:600;border-color:var(--ink)}
.trio{display:grid;grid-template-columns:1.24fr 1fr 1fr;gap:8px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
select{width:100%;appearance:none;font-family:var(--sans);font-size:15px;color:var(--ink);
  padding:13px 30px 13px 12px;border-radius:3px;background-color:var(--paper);
  border:1px solid var(--rule);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;
  background-size:5px 5px;background-repeat:no-repeat}
select:disabled{color:var(--dim);border-color:var(--rule-soft);cursor:default;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%)}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);
  margin-top:10px;cursor:pointer}
/* margin:0 — UA 기본 여백(3px 3px 3px 4px)이 위 seg/duo 의 왼쪽 모서리를 밀어낸다 */
.check input{width:16px;height:16px;margin:0;accent-color:var(--thread);flex:none}
.cta{width:100%;margin-top:20px;padding:16px;border:0;border-radius:3px;cursor:pointer;
  background:var(--thread);color:#fff;font-family:var(--disp);font-size:16.5px;font-weight:700;
  letter-spacing:.01em}
.cta:hover{background:var(--thread-deep)}
.cta:active{background:var(--thread-deep);transform:translateY(1px)}
.cta[disabled]{background:var(--rule-soft);color:var(--dim);cursor:progress}

/* 만세력(원국) 영역은 제본선 없이 판면 그대로 — 실은 풀이가 갖는다 (2026-08-31 결정) */
#result{margin-top:56px;scroll-margin-top:16px}
.blk+.blk{margin-top:44px}

/* ── 결과 영역의 상태(시안에 없는 화면) ───────────────────────── */
#error-msg{border-left:2px solid var(--thread);padding:2px 0 2px 12px;font-size:14px;
  color:var(--ink-soft);margin:0 0 28px}   /* margin — 풀이 실패 시 이미 그린 원국 위에 얹힌다 */
.loading{display:flex;align-items:center;gap:18px;margin:0;font-size:13px;color:var(--muted)}
.loading .msg{flex:1;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.loading .msg b{font-size:14.5px;font-weight:600;color:var(--ink-soft)}
.loading .msg em{font-style:normal;font-size:12px;color:var(--dim)}
/* 진행 중임이 보이는 두 가지 — 도는 실패(붉은 실 감기)와 흐르는 실 한 가닥 */
.loading .bar{position:relative;width:min(220px,100%);height:2px;border-radius:99px;
  background:var(--rule-soft);overflow:hidden}
.loading .bar::before{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;
  border-radius:99px;background:var(--thread);animation:thread-run 1.6s ease-in-out infinite}
@keyframes thread-run{from{transform:translateX(-110%)}to{transform:translateX(300%)}}
@keyframes spin{to{transform:rotate(360deg)}}
/* 원국이 앉을 자리에 빈 인장이 먼저 놓이고, 기다리는 동안 조용히 숨 쉰다 */
.seal-ghost{width:84px;height:84px;flex:none;border:1px dashed var(--thread);border-radius:50%;
  animation:spin 14s linear infinite,breathe 2.4s ease-in-out infinite}  /* 실이 천천히 감기며 숨 쉰다 */
@keyframes breathe{50%{opacity:.3}}
/* 원국이 온 뒤 — 큰 자리는 도해가 채웠으니 풀이 자리에서 작은 인장이 이어 숨 쉰다 */
.loading.mini{gap:12px;padding-top:26px;border-top:1px solid var(--rule)}
.loading.mini .seal-ghost{width:22px;height:22px}

/* ── 일간 : 오행 원형 도해 (일간 자리와 오행 차트를 겸한다) ───── */
.chart{margin:0 0 14px}
.chart svg{display:block;width:100%;max-width:300px;height:auto;margin:0 auto}
.glyph{font-family:var(--serif);font-weight:700}
.f-wood{fill:var(--el-wood)}.f-fire{fill:var(--el-fire)}.f-earth{fill:var(--el-earth)}
.f-metal{fill:var(--el-metal)}.f-water{fill:var(--el-water)}
.s-wood{stroke:var(--el-wood)}.s-fire{stroke:var(--el-fire)}.s-earth{stroke:var(--el-earth)}
.s-metal{stroke:var(--el-metal)}.s-water{stroke:var(--el-water)}
.el-ring{fill:none;stroke:var(--dim);stroke-width:1.2}
.el-sheng{fill:none;stroke:var(--rule);stroke-width:1}
.el-ke{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:3 4}
.el-plate{fill:var(--paper)}
.el-empty{stroke-dasharray:4 4}
.el-none{font-family:var(--sans);font-size:10.5px;fill:var(--thread);font-weight:500}
.day-plate{fill:var(--paper);stroke:var(--thread);stroke-width:1.6}
.day-glyph{font-family:var(--serif);font-size:34px;font-weight:700} /* 색은 .f-* 가 준다 (일간 오행) */
.day-tag{font-family:var(--sans);font-size:9px;letter-spacing:.16em;fill:var(--muted)}
.el-node{transform-box:fill-box;transform-origin:center}
.el-day{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .anim .el-ring{stroke-dasharray:668;stroke-dashoffset:668;animation:draw 1.1s ease .1s forwards}
  .anim .el-sheng,.anim .el-ke{opacity:0;animation:fade .5s ease .8s forwards}
  .anim .el-node{opacity:0;animation:pop .42s cubic-bezier(.2,.75,.3,1) forwards}
  .anim .el-node.n1{animation-delay:.30s} .anim .el-node.n2{animation-delay:.42s}
  .anim .el-node.n3{animation-delay:.54s} .anim .el-node.n4{animation-delay:.66s}
  .anim .el-node.n5{animation-delay:.78s}
  .anim .el-day{opacity:0;animation:stamp .34s cubic-bezier(.2,.75,.3,1) 1.05s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes stamp{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.daymark{text-align:center;margin:0}
.daymark strong{display:block;font-family:var(--disp);font-size:18.5px;font-weight:600;
  line-height:1.5;letter-spacing:-.015em;margin-bottom:4px}
.daymark span{font-size:12.5px;color:var(--muted);letter-spacing:.01em}

/* ── 네 기둥 ──────────────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
/* flex 열 — 시 모름 칸이 짧아도 십성 줄은 네 칸 모두 바닥에 맞춘다 */
.pil{display:flex;flex-direction:column;padding:15px 2px 14px;text-align:center;
  border-right:1px solid var(--rule-soft)}
.pil:last-child{border-right:0}
.pil em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.06em;
  color:var(--muted);margin-bottom:9px}
.pil .g{font-family:var(--disp);font-size:25px;font-weight:600;line-height:1.42;color:var(--ink)}
/* 시주 모름 칸 — 시안에 없는 상태라 .pil em 활자를 그대로 쓴다 */
.pil .g em{font-family:var(--sans);font-style:normal;font-size:15px;font-weight:400;color:var(--muted)}
/* margin-top:auto 가 시안의 margin-top:8px 를 덮으므로 간격은 padding 으로 보존한다 */
.pil .t{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.04em;
  margin-top:auto;padding-top:8px}
.pil.day .t{color:var(--ink);font-weight:600}
.day-mark{box-shadow:inset 0 -2px 0 var(--thread)}

/* ── 오행 : 분포는 도해가 말하고, 여기서는 수만 조용히 센다 ──── */
/* #chart h2 — 지금 렌더가 내는 맨 h2(오행·대운) 자리. 시안 마크업은 h2.kicker 다 */
.kicker,#chart h2{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  color:var(--muted);margin:0 0 4px}
.sub{font-size:12.5px;color:var(--muted);margin:0 0 16px}
.legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;margin:0;padding:0;list-style:none}
.legend li{display:flex;align-items:baseline;gap:5px;font-size:13px;color:var(--muted)}
.legend b{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--c,var(--ink))}
.legend .n{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-weight:600}
.legend .zero .n{color:var(--thread);font-weight:500}

/* ── 대운 ─────────────────────────────────────────────────────── */
.dw{display:flex}
.dw div{flex:1 1 0;min-width:0;text-align:center;padding:11px 3px 12px;
  border-top:2px solid var(--rule)}
.dw div.now{border-top-color:var(--thread)}
.dw b{display:block;font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap}
/* 자식 결합자 — 운영 렌더는 간지 한 자씩을 <b> 안에서 span 으로 감싼다(오행 훅).
   자손 선택자면 그 span 까지 display:block 이 되어 천간·지지가 두 줄로 갈린다. */
.dw div>span{display:block;font-size:10.5px;color:var(--muted);margin-top:5px;white-space:nowrap}
.dw .now>span{color:var(--thread);font-weight:600}
.dw em{display:block;font-style:normal;font-size:10px;letter-spacing:.02em;
  color:var(--thread);margin-top:1px}

/* ── 오늘 카드 (/unse) — 백지의 잉크 링에 나의 일간. 시안엔 없는 블록이다 ── */
.seal-row{display:flex;align-items:center;gap:20px}
.seal-big{width:84px;height:84px;flex:none;display:grid;place-items:center;
  background:none;border:1px solid var(--ink);border-radius:50%;color:var(--ink);
  font-family:var(--serif);font-size:42px;font-weight:700;
  animation:stamp .34s cubic-bezier(.2,.75,.3,1) both}   /* 응답이 닿는 순간 한 번 찍힌다 */
.seal-row strong{display:block;font-family:var(--disp);font-size:18.5px;font-weight:600;
  line-height:1.5;letter-spacing:-.015em}
.seal-row span{font-size:12.5px;color:var(--muted)}

/* ── 풀이 : 오침안정법 제본선은 여기만 — 실 한 가닥이 목차(h3)마다 매듭으로 꿰인다.
   키커 "풀이"가 ::before 라 실은 ::after 가 쓴다 ── */
#reading:empty{display:none}   /* 풀이 오기 전엔 키커도 실도 그리지 않는다 */
#reading{--tx:10px;--tw:2px;position:relative;margin-top:44px;padding-left:32px}
#reading::before{content:"풀이";display:block;font-family:var(--sans);font-size:11.5px;
  font-weight:600;letter-spacing:.16em;color:var(--muted);margin:0 0 4px}
#reading::after{content:"";position:absolute;left:var(--tx);top:30px;bottom:8px;width:var(--tw);
  background:linear-gradient(180deg,var(--thread) 0,var(--thread) 93%,transparent 100%)}
.read h3{font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:-.015em;
  margin:22px 0 10px;position:relative}
.read h3::before{content:"";position:absolute;left:-26.5px;top:5px;width:7px;height:7px;
  border:2px solid var(--thread);border-radius:50%;background:var(--paper)}
.read section+section h3::before{top:29px}   /* 구분 괘선(padding-top:24px)만큼 내린 자리 */
.read section+section h3{border-top:1px solid var(--rule);padding-top:24px}
.read p{font-size:14.5px;line-height:1.95;color:var(--ink-soft);margin:0}
.read p+p{margin-top:15px}   /* 시안은 절 하나에 한 문단, 운영 풀이는 여러 문단이 온다 */

/* ── 안내 기사 : 풀이 활자와 확실히 다른 보조 활자 ───────────── */
.guide{margin-top:56px;border-left:2px solid var(--rule);padding-left:16px}
.guide article+article{margin-top:26px}
.guide h2{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin:0 0 10px}
.guide h3{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);
  margin:18px 0 8px}
.guide p{font-size:13px;line-height:1.82;color:var(--muted);margin:0 0 10px}
.guide ul{font-size:13px;line-height:1.82;color:var(--muted);margin:0 0 10px;padding-left:17px}
.guide li{margin:0 0 5px}
/* 프롬프트 예시 — 좁은 폭이라 가로 스크롤 대신 줄바꿈, 활자만 고정폭 */
.guide pre{background:var(--panel);border:1px solid var(--rule);border-radius:3px;
  padding:12px 13px;margin:0 0 10px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.guide code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  line-height:1.75;color:var(--ink-soft)}
.guide article>*:last-child{margin-bottom:0}

/* ── 추천운세 — 푸터 위 바로가기 묶음. 새 창으로 열린다(↗) ────── */
.reco{margin-top:56px;padding-top:16px;border-top:1px solid var(--rule)}
.reco-title{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  color:var(--muted);margin:0 0 12px}
.reco-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.reco-links a{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);
  font-size:13.5px;color:var(--ink-soft);text-decoration:none;
  transition:border-color .15s ease,color .15s ease}
.reco-links a::after{content:"\2197";font-size:11px;color:var(--dim)}
.reco-links a:hover{border-color:var(--ink);color:var(--ink)}

footer{margin-top:44px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:11.5px;line-height:1.9;color:var(--muted)}

/* ── admin — 프롬프트/통계 탭. 공개 화면과 토큰만 공유한다 ────── */
body.admin h1 { font-size: 1.35rem; margin: 0.5rem 0 0.25rem; color: var(--ink); }
body.admin .admin-note { color: var(--muted); font-size: 0.9rem; }
body.admin .admin-err { color: var(--thread); }
body.admin .admin-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--rule); margin: 0 0 1.1rem; }
body.admin .admin-tabs a { color: var(--muted); text-decoration: none; padding: 0 0 0.4rem; }
body.admin .admin-tabs a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--thread); }
body.admin .admin-kpis { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0 0 0.9rem; }
body.admin .admin-kpi { flex: 1; min-width: 7rem; border: 1px solid var(--rule); border-radius: 3px; padding: 0.55rem 0.7rem; }
body.admin .admin-kpi .n { font-size: 1.15rem; }
body.admin .admin-kpi .l { font-size: 0.75rem; color: var(--muted); }
body.admin .admin-bar { height: 6px; background: var(--rule-soft); border-radius: 99px; margin: 0 0 1rem; overflow: hidden; }
body.admin .admin-bar > i { display: block; height: 100%; background: var(--thread); }
body.admin table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0 0 1.25rem; }
body.admin table.admin-table th { text-align: left; color: var(--muted); font-weight: 400; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--rule); }
body.admin table.admin-table td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--rule); }
body.admin table.admin-table tr.sel td { background: var(--panel); }
body.admin table.admin-table tr.tot td { font-weight: 600; border-top: 1px solid var(--rule); }
body.admin .admin-sec { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.04em; margin: 1rem 0 0.35rem; }
/* 폼 기본값 — barotong의 .card/.field/버튼은 공개 화면 CSS에 없다. admin 밖으로 새지 않게 body.admin 아래에만 둔다. */
body.admin a { color: var(--ink-soft); }
body.admin .card { background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; padding: 1.25rem; margin: 1rem 0; }
body.admin .field { margin-bottom: 1rem; border: 0; padding: 0; min-width: 0; }
body.admin .field > label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
body.admin textarea, body.admin input[type="password"] { width: 100%; padding: 0.6rem 0.7rem; font: inherit;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--ink); }
body.admin textarea { resize: vertical; }
body.admin button[type="submit"] { width: 100%; padding: 0.8rem; border: 0; border-radius: 3px;
  background: var(--thread); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }