:root{
  --bg:#101113; --panel:#17181B; --line:#222327; --text:#EAE8E3; --body:#C6C4BE; --dim:#8E8C87;
  --red:#B8352A;
  --el-wood:#7E9C86; --el-fire:#B57A6C; --el-earth:#B29267; --el-metal:#9E998F; --el-water:#7A8BA6;
  --serif:"MaruBuri",serif; --sans:"Pretendard",system-ui,sans-serif;
  --panel-hi:#1C1D21;   /* 폼 호버·선택 한 칸 밝게 (묵서 패널 위 한 단계) */
}
*{box-sizing:border-box}
.el-wood{color:var(--el-wood)}.el-fire{color:var(--el-fire)}.el-earth{color:var(--el-earth)}
.el-metal{color:var(--el-metal)}.el-water{color:var(--el-water)}
.day-mark{border-bottom:2px solid var(--red);padding-bottom:1px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased}
.wrap{max-width:430px;margin:0 auto;padding:0 22px 72px}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* 워드마크 — 이름은 작고 조용하게, 격은 낙관이 진다 */
header{display:flex;align-items:center;justify-content:space-between;padding:26px 0 20px}
.lockup{margin:0;display:flex;align-items:center;gap:9px}
.lockup .seal{width:22px;height:22px;display:block;flex:none}   /* /images/logo.png — 투명 원형 태극 */
.lockup .name{font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:.02em}
header small{font-size:11.5px;color:var(--dim)}

/* 파트너 링크 레일 — 가로 스크롤, 스크롤바는 숨긴다 */
.rail{display:flex;gap:8px;overflow-x:auto;margin:0 -22px 40px;padding:2px 22px 10px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;
  font-size:14px;padding:9px 14px;border-radius:99px;background:var(--panel);
  border:1px solid var(--line);color:var(--body)}
.chip:hover{background:var(--panel-hi);border-color:var(--red);color:var(--text)}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero{animation:rise .6s ease both}
h1{font-family:var(--serif);font-size:31px;font-weight:700;line-height:1.45;margin:0 0 14px}
.lede{font-size:14.5px;color:var(--dim);line-height:1.75;margin:0 0 10px}
.prov{font-size:12.5px;color:var(--dim);margin:0 0 44px;padding-top:10px;
  border-top:1px solid var(--line)}
.prov b{color:var(--body);font-weight:600}

.f{margin-bottom:24px}
.f>span{display:block;font-size:13px;color:var(--dim);margin-bottom:9px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{font-family:var(--sans);font-size:15px;padding:14px;cursor:pointer;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);color:var(--dim)}
.seg button[aria-pressed=true]{border-color:var(--text);color:var(--text);font-weight:600;
  background:var(--panel-hi)}
.trio{display:grid;grid-template-columns:1.2fr 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;padding:14px;
  border-radius:6px;background:var(--panel);color:var(--text);border:1px solid var(--line);
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;
  background-size:5px 5px;background-repeat:no-repeat}
/* 포커스·호버·액티브 피드백 — 화살표(background-image)를 지우지 않게 background-color만 건드린다 */
.seg button,select{transition:border-color .16s ease,background-color .16s ease}
.seg button:hover,select:hover{border-color:var(--dim)}
.seg button:active,select:active{background-color:var(--panel-hi)}
select:focus{border-color:var(--text)}
/* 체크박스는 위 duo/seg의 왼쪽 모서리에 맞춘다 — UA 기본 margin이 8px gap 위에 얹혀 밀리던 자리 */
.check{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--dim);margin-top:12px}
.check input{width:17px;height:17px;margin:2px 0 0;flex:none;accent-color:var(--red)}
.cta{width:100%;margin-top:10px;padding:17px;border:0;border-radius:6px;cursor:pointer;
  background:var(--red);color:#fff;font-family:var(--serif);font-size:16px;font-weight:700}
.cta:active{filter:brightness(.9)}


.seal-row{display:flex;align-items:center;gap:20px;margin-bottom:44px}
.seal-big{width:88px;height:88px;flex:none;border-radius:6px;background:var(--red);
  display:grid;place-items:center;font-family:var(--serif);font-size:48px;font-weight:700;color:#fff}
.seal-row strong{display:block;font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.45}
.seal-row span{font-size:13px;color:var(--dim)}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:44px}
.pil{padding:18px 4px;text-align:center;border-right:1px solid var(--line)}
.pil:last-child{border-right:0}
.pil em{display:block;font-style:normal;font-size:11px;color:var(--dim);margin-bottom:10px}
.pil .g{font-family:var(--serif);font-size:27px;font-weight:700;line-height:1.5}
.pil .t{display:block;font-size:11px;color:var(--dim);margin-top:8px}
.pil.day .t{color:var(--text)}

h2{font-family:var(--serif);font-size:16px;font-weight:700;margin:0 0 4px}
.sub{font-size:13px;color:var(--dim);margin:0 0 18px}
.bars{display:grid;gap:10px;margin-bottom:44px}
.bar{display:grid;grid-template-columns:44px 1fr 40px;align-items:center;gap:10px;font-size:14px}
.bar .t{height:9px;background:var(--panel);border-radius:99px;overflow:hidden}
.bar .t i{display:block;height:100%;background:var(--c,var(--text));border-radius:99px}
.bar>span:first-child{color:var(--c,var(--text))}
.bar.zero>span:first-child{color:var(--dim)}
.bar .n{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
.bar.zero{color:var(--dim)}
.bar.zero .n{color:var(--red)}

/* 가로 스크롤 어포던스 — 오른쪽 끝을 흐려 잘린 걸 보이게 하고, 마디 단위로 물린다 */
.dw{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:44px;scrollbar-width:none;
  scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.dw::-webkit-scrollbar{display:none}
.dw div{flex:none;text-align:center;padding:13px 15px;border-radius:6px;scroll-snap-align:start;
  background:var(--panel);border:1px solid var(--line)}
.dw div.now{border-color:var(--red)}
.dw b{display:block;font-family:var(--serif);font-size:17px;font-weight:700}
.dw span{font-size:11px;color:var(--dim)}
.dw .now span{color:var(--red)}

/* 풀이 = 해석. 차트(계산)와 활자·괘선으로 갈라 둔다 */
.read:empty{display:none}   /* 풀이 오기 전엔 키커·괘선을 그리지 않는다 */
.read::before{content:"풀이";display:block;font-size:11.5px;letter-spacing:.16em;color:var(--dim);
  border-top:1px solid var(--line);padding-top:26px}
.read h3{font-family:var(--serif);font-size:17px;font-weight:700;margin:30px 0 12px}
.read .reading-section+.reading-section h3{border-top:1px solid var(--line);padding-top:28px}
.read p{font-size:15px;line-height:1.95;color:var(--body);margin:0 0 15px}
footer{font-size:12px;color:var(--dim);line-height:1.9;padding-top:56px}

/* ── 실장 추가분 (시안에 없는 상태만) ─────────────────────────────── */
/* 시안 그대로면 .check{display:flex} 가 UA 의 [hidden]{display:none} 를 이겨 #leap-wrap 이 항상 보인다 */
[hidden]{display:none!important}
.cta[disabled]{background:var(--panel);color:var(--dim);cursor:progress}
/* 결과 구획 — 폼과 결과 사이에 여백 + 조용한 괘선 (aria-busy 전체를 흐리던 규칙은 아래 로딩 placeholder가 대신한다) */
#result{margin-top:56px;padding-top:40px;border-top:1px solid var(--line);scroll-margin-top:16px}
/* 로딩 — 낙관이 앉을 자리에 인주색 아웃라인이 숨을 쉰다. reduced-motion이면 위 가드가 정지시킨다 */
.loading{display:flex;align-items:center;gap:20px;margin:0;font-size:13px;line-height:1.7;color:var(--dim)}
.loading .msg{flex:1}                /* 낙관 자리와 문구, flex 자식은 이 둘뿐이어야 한다 */
.loading .nowrap{white-space:nowrap} /* "~"에서 잘려 "~1분"이 홀로 넘어가지 않게 */
.seal-ghost{width:88px;height:88px;flex:none;border-radius:6px;border:1px solid var(--red);
  opacity:.85;animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.28}}
/* 시그니처 모먼트 — 응답이 닿는 순간 낙관이 한 번 '찍힌다'. 나머지는 가벼운 fade-up으로 끝낸다 */
@keyframes stamp{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.seal-big{animation:stamp .24s cubic-bezier(.2,.75,.3,1) both}
#chart>*:not(.seal-row),.read .reading-section{animation:rise .22s ease both}
#error-msg{margin:0 0 32px;padding:13px 15px;border:1px solid var(--red);border-radius:6px;
  font-size:14px;line-height:1.7;color:var(--text)}
/* 시주 모름 칸 — 시안에 없는 상태라 .pil em 활자를 그대로 쓴다 */
.pil .g em{font-family:var(--sans);font-style:normal;font-size:15px;font-weight:400;color:var(--dim)}
.pil{display:flex;flex-direction:column}
.pil .t{margin-top:auto;padding-top:8px}   /* auto가 원래 margin-top:8px를 덮으므로 간격은 padding으로 보존 */

/* 안내 섹션(정적 SEO 본문) — 풀이(마루부리)와 겹치지 않게 산세리프 + 왼쪽 세로선 */
.guide:empty{display:none} /* 문안 들어오기 전(Task 8)까지 빈 테두리를 안 그린다 */
.guide{border-top:1px solid var(--line);margin-top:64px;padding-top:8px}
.guide article{border-left:2px solid var(--line);padding-left:14px;margin:26px 0 0}
.guide h2{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text);margin:0 0 6px}
.guide h3{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--body);margin:18px 0 6px}
.guide p{font-size:13.5px;line-height:1.85;color:var(--dim);margin:0 0 12px}
.guide *:last-child{margin-bottom:0}
.guide ul{font-size:13.5px;line-height:1.85;color:var(--dim);margin:0 0 12px;padding-left:17px}
.guide li{margin:0 0 5px}
/* 프롬프트 예시 — 좁은 폭이라 가로 스크롤 대신 줄바꿈, 활자만 고정폭 */
.guide pre{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:12px 13px;margin:0 0 12px;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(--body)}

/* 첫인상(엔진 결정론 문장) — 대운 아래·풀이 위. 키커는 .read::before와 같은 격, 본문은 한 급 작다 */
.brief:empty{display:none}
.brief{margin-bottom:44px}   /* 차트 블록들과 같은 마디 — 풀이 괘선이 문단에 붙지 않게 */
.brief::before{content:"여덟 글자 첫인상";display:block;font-size:11.5px;letter-spacing:.16em;color:var(--dim);
  border-top:1px solid var(--line);padding-top:26px}
.brief p{font-family:var(--serif);font-size:15.5px;line-height:1.9;color:var(--body);margin:18px 0 0}
/* ① 응답 뒤 — 88px 낙관 자리는 원국이 채웠으니, 풀이 자리에서 작은 낙관이 계속 숨 쉰다(reduced-motion 가드 그대로) */
.loading.mini{gap:12px;padding-top:26px;border-top:1px solid var(--line)}
.loading.mini .seal-ghost{width:22px;height:22px}

/* ── admin — 프롬프트/통계 탭 (barotong 이식, 색만 묵서 토큰) ──────────────── */
body.admin h1 { font-size: 1.35rem; margin: 0.5rem 0 0.25rem; color: var(--text); }
body.admin .admin-note { color: var(--dim); font-size: 0.9rem; }
body.admin .admin-err { color: var(--red); }
body.admin .admin-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--line); margin: 0 0 1.1rem; }
body.admin .admin-tabs a { color: var(--dim); text-decoration: none; padding: 0 0 0.4rem; }
body.admin .admin-tabs a[aria-current="page"] { color: var(--text); border-bottom: 2px solid var(--red); }
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(--line); border-radius: 6px; 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(--dim); }
body.admin .admin-bar { height: 6px; background: var(--panel); border-radius: 99px; margin: 0 0 1rem; overflow: hidden; }
body.admin .admin-bar > i { display: block; height: 100%; background: var(--red); }
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(--dim); font-weight: 400; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line); }
body.admin table.admin-table td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line); }
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(--line); }
body.admin .admin-sec { color: var(--dim); 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(--body); }
body.admin .card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; 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(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
body.admin textarea { resize: vertical; }
body.admin button[type="submit"] { width: 100%; padding: 0.8rem; border: 0; border-radius: 6px;
  background: var(--red); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

/* ── /unse 오늘띠별운세 ─────────────────────────────────────────────────── */
/* 탭 내비 — 로고 오른쪽. "회원가입 없음"은 로고 아래로 내려 한 줄을 비운다 */
header .brand{display:flex;flex-direction:column;gap:3px}
.tabs{display:flex;gap:16px;flex:none}
.tabs a{font-family:var(--sans);font-size:14px;color:var(--dim);text-decoration:none}
.tabs a[aria-current=page]{color:var(--text);text-decoration:underline;text-underline-offset:5px}
/* 띠 카드는 낙관 블록(.seal-row)을 그대로 쓰고, 입춘 주석만 그 아래 한 줄 —
   .seal-row 의 44px 마디를 16px 로 당겨 카드 한 덩어리로 읽히게 한다 */
.card-note{margin:-28px 0 44px;font-size:12.5px;line-height:1.8;color:var(--dim)}