/* 사주 · 온커밋 — 공통 스타일. 빌드가 public/site.css 로 복사한다.
   점술 느낌(한자 가득, 어두운 보라) 대신 한지 같은 바탕에 숲·흙·물 색을 쓴다. 웹폰트 없음, 모바일 우선 */
:root{
  color-scheme:light dark;
  --bg:#F8F5EE; --card:#FFFFFF; --ink:#22312A; --sub:#66736B; --line:#E6E0D4;
  --accent:#2E6B4E; --accent-ink:#FFFFFF; --soft:#E6F0E8; --warn:#B4552D;
  --목:#3E8E5B; --화:#D9603B; --토:#B98A2E; --금:#7E8B96; --수:#3B6EA8;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#161A17; --card:#1F2520; --ink:#ECEEE8; --sub:#A6AFA8; --line:#2E362F;
    --accent:#7FBF9A; --accent-ink:#10231A; --soft:#22352A; --warn:#F0A07C;
    --목:#6CC08A; --화:#F08A6A; --토:#D9AE5A; --금:#A9B5BF; --수:#7AA6DC; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:680px;margin:0 auto;padding:0 16px}
h1,h2,h3{line-height:1.3;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(28px,6vw,38px);font-weight:800}
h2{font-size:clamp(20px,4.5vw,24px);font-weight:700;margin:36px 0 12px}
h3{font-size:17px;font-weight:700}
p{margin:10px 0}
small{color:var(--sub);font-size:13px}
b{font-weight:700}

/* 머리 */
header.top{border-bottom:1px solid var(--line);background:var(--bg)}
header.top .wrap{display:flex;align-items:center;gap:6px 14px;min-height:56px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{font-weight:800;font-size:20px;color:var(--ink);text-decoration:none;display:flex;align-items:baseline;gap:6px}
.brand small{color:var(--sub);font-weight:600;font-size:12px}
header.top nav{margin-left:auto;display:flex;gap:4px;overflow-x:auto}
header.top nav a{color:var(--sub);text-decoration:none;font-size:14px;font-weight:600;padding:6px 6px;border-radius:8px;white-space:nowrap}
header.top nav a[aria-current]{color:var(--accent);background:var(--soft)}
/* 메뉴가 넷이라 휴대폰에서는 로고 아래 한 줄로 내린다. 옆으로 밀어야 보이면 신년운세를 못 찾는다 */
@media (max-width:520px){header.top nav{margin-left:0;width:100%;justify-content:space-between;overflow:visible}}

/* 첫 화면 */
.hero{padding:32px 0 8px}
.eyebrow{color:var(--accent);font-weight:700;font-size:14px;margin:0 0 6px}
.eyebrow a{text-decoration:none}
.lead{font-size:17px;color:var(--sub);margin-top:10px}
.tip{color:var(--sub);font-size:14px}
.cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.elements-strip{list-style:none;padding:0;margin:18px 0 0;display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--sub)}
.elements-strip li{display:flex;align-items:center;gap:6px}
.elements-strip i{width:14px;height:14px;border-radius:50%;background:var(--c);display:inline-block}
.el-목{--c:var(--목)} .el-화{--c:var(--화)} .el-토{--c:var(--토)} .el-금{--c:var(--금)} .el-수{--c:var(--수)}

/* 카드·버튼 */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:12px;
  background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;border:0;font:inherit;font-weight:700;cursor:pointer}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.chip{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-size:14px;margin:2px 0}
.chip:hover{border-color:var(--accent)}
.links{display:flex;flex-wrap:wrap;gap:6px}

/* 입력 폼 */
.form{margin-top:18px;display:grid;gap:16px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.field small{display:block;margin-top:6px}
.field .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input[type=date],input[type=time],select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:46px;min-width:0;width:100%}
.field .row input[type=time]{width:auto;flex:1}
.check{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;white-space:nowrap;margin:0!important}
.check input{width:18px;height:18px;accent-color:var(--accent)}
input:disabled{opacity:.45}
button[type=submit]{min-height:50px;font-size:17px;border-radius:12px;background:var(--accent);color:var(--accent-ink);border:0;font-weight:800;cursor:pointer;font-family:inherit}
.err{color:var(--warn);font-weight:600;margin:0}

/* 결과 */
.result:empty{display:none}
.result{margin-top:22px;display:grid;gap:14px}
.result h2{margin:4px 0 10px;font-size:18px}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.pillars .col{background:var(--bg);border-radius:12px;padding:10px 4px}
.pillars .col h3{font-size:12px;color:var(--sub);font-weight:600;margin-bottom:6px}
.pillars .ch{display:block;font-size:clamp(26px,7vw,34px);font-weight:800;line-height:1.15;color:var(--c)}
.pillars .ch small{display:block;font-size:12px;color:var(--sub);font-weight:500}
.pillars .ch + .ch{margin-top:6px}
.pillars .empty{color:var(--sub);font-size:14px;padding:20px 0}
.me{margin-top:12px;font-size:15px}
.bars{display:grid;gap:8px;margin-top:6px}
.bars .bar{display:grid;grid-template-columns:44px 1fr 24px;gap:10px;align-items:center;font-size:14px}
.bars .bar i{height:12px;border-radius:6px;background:var(--c);display:block;min-width:4px}
.bars .bar b{text-align:right}
.luck{overflow-x:auto;margin:4px -18px 0;padding:0 18px}
.luck table{border-collapse:collapse;min-width:100%}
.luck th,.luck td{padding:8px 10px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--line);font-size:15px}
.luck th{color:var(--sub);font-weight:600;font-size:13px}
.luck td b{font-size:17px}
.basis{font-size:13px;color:var(--sub);line-height:1.6}
.basis ul{padding-left:18px;margin:6px 0 0}
.notice{background:var(--soft);border:0}
.soon{color:var(--sub)}

/* 본문 */
.prose{margin-top:28px}
.prose ul{padding-left:20px}
.prose li{margin:6px 0}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-top:8px}
.faq summary{font-weight:700;cursor:pointer}
.faq p{color:var(--sub);margin:8px 0 0}

/* 오늘의운세 */
.zodiac-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}
@media (min-width:560px){.zodiac-grid{grid-template-columns:repeat(3,1fr)}}
.zodiac{text-decoration:none;color:var(--ink);display:grid;gap:4px;padding:14px;border-left:5px solid var(--c)}
.zodiac .name{font-weight:800;font-size:16px}
.zodiac .headline{color:var(--c);font-size:14px;line-height:1.35}
.zodiac .years{color:var(--sub);font-size:11px}
.fortune{margin-top:18px;border-top:5px solid var(--c, var(--accent))}
.fortune h2{margin:0 0 10px;font-size:22px}
.fortune p{font-size:16px}
.tipline{background:var(--soft);border-radius:10px;padding:10px 12px;font-weight:600}
.hero[data-zodiac]{border-left:5px solid var(--c);padding-left:14px}

/* 손없는날 */
.year h2{margin-top:32px}
.months{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.months{grid-template-columns:repeat(3,1fr)}}
.month{padding:12px 12px}
.month ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.month li{display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline;font-size:15px;padding:4px 6px;border-radius:8px}
.month li .wd{color:var(--sub);font-size:13px}
.month li .lunar{color:var(--sub);font-size:11px;flex-basis:100%}
.month li.weekend b{color:var(--수)}
.month li.past{opacity:.5}
.month li.today{background:var(--soft)}
.month li.today b::after{content:" 오늘";color:var(--accent);font-size:12px}
.month.current h3{color:var(--accent)}
table.dir{border-collapse:collapse;width:100%;margin:10px 0;background:var(--card);border-radius:12px;overflow:hidden}
table.dir th,table.dir td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:15px}
table.dir th{color:var(--sub);font-weight:600;font-size:13px}

/* 신년운세 */
.toc{columns:2;padding-left:20px;margin:8px 0}
.toc li{margin:4px 0}
.reading .headline{font-size:clamp(22px,5vw,28px);margin:4px 0 8px}
.reading .card p{font-size:16.5px;line-height:1.8}
.reading [class*=section-spring],.reading [class*=section-summer],.reading [class*=section-autumn],.reading [class*=section-winter]{border-left:5px solid var(--c)}
.section-spring{--c:var(--목)} .section-summer{--c:var(--화)} .section-autumn{--c:var(--금)} .section-winter{--c:var(--수)}
.waiting{background:var(--soft);border:0}
input[type=text]{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:46px;width:100%;letter-spacing:.04em}

/* 꼬리 */
footer{margin-top:56px;padding:28px 0 44px;border-top:1px solid var(--line);color:var(--sub);font-size:13px}
footer p{margin:6px 0}
footer a{color:var(--sub)}