/* 서버에서 만드는 운세·블로그 페이지용 스타일. seo.css 다음에 불러온다. */
.fortune-page+.related,.fortune-page+.others{margin-top:40px}
.zlist+.fortune-page{margin-top:0}
.fortune-page section p+p{margin-top:12px}
.fortune-page h3{font:700 18px/1.5 "Noto Serif KR",serif;margin:22px 0 6px}
.fortune-page a{color:var(--purple);text-underline-offset:3px}
.fortune-page ul,.fortune-page ol{margin:10px 0 0;padding-left:20px;color:#665d69}
.fortune-page li{margin:6px 0}
.subnote{font-size:13px;color:var(--muted)}
.fortune-page .hl,.zcard .hl{font:700 18px/1.6 "Noto Serif KR",serif;color:var(--ink);margin:6px 0 8px}
.fortune-page .rel{margin-top:14px;padding:14px 16px;border-left:3px solid var(--gold);border-radius:0 10px 10px 0;background:#faf6ee;font-size:15px}
.more{font-weight:700}
.fortune-page .more,.zcard .more{margin-top:14px}
.more a{color:var(--purple)}

.daybar{display:flex;flex-wrap:wrap;gap:8px}
.daybar span{padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:700;color:#5c5262}
.daybar .gz{background:#f2ebf8;border-color:#dccbe9;color:var(--purple)}
section>.daybar{margin:4px 0 14px}

.scorebox{display:flex;align-items:center;gap:18px;margin:8px 0 16px;padding:20px 22px;border-radius:16px;background:#f6f1fa}
.scorebox div{flex:none;display:flex;align-items:baseline;gap:2px;color:var(--purple);font-weight:700}
.scorebox b{font:800 44px/1 "Noto Serif KR",serif}
.fortune-page .scorebox p{font:700 18px/1.55 "Noto Serif KR",serif;color:var(--ink)}
.scorebox.good{background:#eef6ee}
.scorebox.good div{color:#2f7a45}
.scorebox.careful{background:#fbf1e6}
.scorebox.careful div{color:#a85b14}

.score,.tone{display:inline-block;border-radius:999px;font:700 13px/1.5 Pretendard,"Noto Sans KR",sans-serif;background:#f2ebf8;color:var(--purple);white-space:nowrap;vertical-align:middle}
.score{margin-left:6px;padding:2px 11px}
.score b{font-size:16px}
.tone{padding:2px 10px;font-size:12px;background:#f1eef3;color:#6a5f70}
.score.good,.tone.good{background:#e9f4ea;color:#2f7a45}
.score.careful,.tone.careful{background:#fbeedd;color:#a85b14}

.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.cat{padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.fortune-page .cat h3{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 8px;font-size:17px}
.cat h3 b{font:700 13px Pretendard,"Noto Sans KR",sans-serif;color:var(--purple);white-space:nowrap}
.fortune-page .cat p{font-size:15px}

.year-list{margin:14px 0 0}
.year-list dt{margin-top:16px;font-weight:800}
.year-list dt small{margin-left:6px;font-weight:500;color:var(--muted)}
.year-list dd{margin:4px 0 0;color:#665d69}

.lucky-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.lucky-grid div{padding:16px 10px;border-radius:13px;background:#f3ecdf;text-align:center}
.lucky-grid small{display:block;margin-bottom:4px;color:#8c7a63;font-size:12px}
.lucky-grid b{font-family:"Noto Serif KR",serif}

.tbl-wrap{margin-top:14px;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{background:#faf6ee;color:var(--muted);font-size:13px;white-space:nowrap}
.tbl td{color:#5a505f}
.tbl td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.tbl tr.today td{background:#f6f1fa}
.tbl-wrap+p{margin-top:14px}

.fortune-page .compat{list-style:none;padding:0}
.compat li{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.compat li b{display:block;margin-bottom:3px;color:var(--ink)}

.zlist{display:grid;gap:14px;margin:22px 0}
.zcard{padding:26px 28px;border:1px solid var(--line);border-radius:20px;background:#fff;scroll-margin-top:16px}
.zcard h2,.zcard h3{font:700 21px/1.5 "Noto Serif KR",serif;margin:0 0 8px}
.zcard p{margin:0;color:#665d69}
.zcard .years{display:grid;gap:8px;margin:14px 0 0;padding:14px 0 0;border-top:1px dashed var(--line);list-style:none;color:#665d69;font-size:15px}
.zcard .years b{margin-right:6px;color:var(--ink)}

.zgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.fortune-page .zmini{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);text-decoration:none}
.zmini:hover{border-color:var(--purple)}
.zmini>span{grid-row:1/3;align-self:center;font-size:28px}
.zmini strong{font-size:15px}
.zmini small{grid-column:2;color:var(--muted);font-size:12.5px;line-height:1.5}

.others h2{margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a,.chips span{padding:8px 13px;border-radius:999px;font-size:14px;font-weight:700;text-decoration:none}
.chips a{background:#f2ebf8;color:var(--purple)}
.chips span{background:var(--purple);color:#fff}

.balls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.balls>b{width:20px;color:var(--muted)}
.ball{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;font-size:15px;font-weight:800}
.b1{background:#f2c230;color:#3b2c00}
.b2{background:#2a6fb5}
.b3{background:#c8413c}
.b4{background:#6b7078}
.b5{background:#2f8f43}
.pick-form{margin-top:14px}
.pick-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.5fr;gap:8px}
.pick-grid select{height:50px;padding:0 10px;border:1px solid #ddd1e3;border-radius:10px;background:#fff;color:var(--ink);font:inherit}
.pick-grid button{height:50px;border:0;border-radius:11px;background:var(--purple);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.fortune-page .form-error{min-height:19px;margin:8px 0 0;color:#b63b4a;font-size:13px}
.lotto-result{margin:6px 0 12px;padding:20px 22px;border-radius:16px;background:#f6f1fa}
.fortune-page .lotto-result h3{margin:0}
.fortune-page .lotto-result p{margin-top:14px}

.post-meta{margin:-8px 0 16px;color:var(--muted);font-size:13px}
.post h2{margin-top:38px}
.post p{margin:12px 0;color:#544a59}
.post .notice p{margin:6px 0 0}
.post-list{display:grid;gap:12px}
.fortune-page .post-card{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);text-decoration:none}
.post-card:hover{border-color:var(--purple)}
.post-card small{color:var(--gold);font-size:12px;font-weight:800}
.post-card strong{font:700 19px/1.45 "Noto Serif KR",serif}
.post-card span{color:var(--muted);font-size:14px;line-height:1.65}
.post-links{margin:0;padding-left:20px}
.post-links li{margin:7px 0}
.post-links a{color:var(--purple)}

@media(max-width:720px){
  .cat-grid{grid-template-columns:1fr}
  .lucky-grid{grid-template-columns:1fr 1fr}
  .zgrid{grid-template-columns:1fr 1fr}
  .zcard{padding:22px 18px}
  .scorebox{gap:14px;padding:16px}
  .scorebox b{font-size:36px}
  .fortune-page .scorebox p{font-size:16px}
  .pick-grid{grid-template-columns:1.3fr 1fr 1fr}
  .pick-grid button{grid-column:1/-1}
  .tbl{font-size:14px}
  .tbl th,.tbl td{padding:9px 8px}
}
@media(max-width:420px){
  .zgrid{grid-template-columns:1fr}
}

/* 띠 이름, 점수(또는 흐름), 한 줄 풀이를 나란히 놓는 목록. 좁은 화면에서는 풀이가 아랫줄로 내려간다. */
.fortune-page .glance{display:grid;gap:0;margin:14px 0 0;padding:0;list-style:none}
.glance li{display:grid;grid-template-columns:104px 64px 1fr;align-items:center;gap:8px;margin:0;padding:11px 0;border-bottom:1px solid var(--line)}
.glance li a{font-weight:700;text-decoration:none}
.glance .score,.glance .tone{margin:0;justify-self:start}
.glance li span:last-child{color:#5a505f;font-size:15px}
@media(max-width:560px){
  .glance li{grid-template-columns:auto 1fr}
  .glance li span:last-child{grid-column:1/-1}
}
.week li{grid-template-columns:104px 104px 64px 1fr}
.week li em{color:#5a505f;font-style:normal}
.week li.today{margin:0 -10px;padding:11px 10px;border-radius:10px;background:#f6f1fa}
@media(max-width:560px){
  .week li{grid-template-columns:auto auto 1fr}
}

/* 현재 위치 줄: 글자 단위로 꺾이지 않게 하고 긴 제목은 줄인다. */
.crumb a,.crumb span{white-space:nowrap}
.crumb span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* 사주 페이지 */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.seg input{position:absolute;opacity:0}
.seg span{display:grid;place-items:center;height:44px;border:1px solid #ddd1e3;border-radius:10px;color:#6b6071;font-size:14px;cursor:pointer}
.seg input:checked+span{border-color:var(--purple);background:#f2ebf8;color:var(--purple);font-weight:800}
.seg input:focus-visible+span{outline:2px solid var(--purple)}
.pick-grid.three{grid-template-columns:1.3fr 1fr 1fr}
.pick-grid.two{grid-template-columns:1.3fr 1fr;margin-top:8px}
.saju-form .check{display:flex;align-items:center;gap:8px;margin:12px 0;color:#5a505f;font-size:14px}
.saju-form>button{width:100%;height:52px;border:0;border-radius:11px;background:var(--purple);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.saju-result{margin:10px 0 12px;padding:22px;border-radius:16px;background:#f6f1fa}
.fortune-page .saju-result h3:first-child{margin-top:0}
.saju-result .tbl-wrap{border-radius:12px;background:#fff}
.saju-tbl{table-layout:fixed}
.saju-tbl th,.saju-tbl td{text-align:center;white-space:nowrap}
.saju-tbl th:first-child{width:54px}
.saju-tbl td:first-child{font-weight:400}
.saju-tbl .big td b{display:block;font:700 30px/1.3 "Noto Serif KR",serif}
.saju-tbl .big td small{color:var(--muted);font-size:12px}
.el-0{color:#2f8f43}.el-1{color:#c8413c}.el-2{color:#a8792f}.el-3{color:#6b7078}.el-4{color:#2a6fb5}
.el-bars{display:grid;gap:8px;margin:10px 0 4px}
.el-bars div{display:grid;grid-template-columns:64px 1fr 24px;align-items:center;gap:10px;font-size:14px}
.el-bars i{display:block;height:12px;min-width:2px;border-radius:6px;background:currentColor}
.el-bars b{text-align:right}
.fortune-page .notes{margin-top:14px;font-size:14px}
.stem,.elnote{padding:14px 0;border-bottom:1px solid var(--line)}
.fortune-page .stem h3,.fortune-page .elnote h3{margin-top:0}
@media(max-width:720px){
  .saju-result{padding:16px}
  .saju-tbl .big td b{font-size:24px}
  .saju-tbl th,.saju-tbl td{padding:9px 2px}
  .saju-tbl .big td small{font-size:11px}
}