/*
Theme Name: 비움에세이
Description: 비움에세이 전용 테마 — 에디토리얼 매거진 + 딥 네이비 포인트 (v2 혼합 디자인). 화이트 지면, 명조 제목, 남색은 통계 블록과 '오늘의 한 문장' 두 곳에만.
Author: BIUM
Version: 1.3.4
Requires PHP: 7.4
*/

:root{
  --ink:#202C45; --navy:#1C2A47; --navy2:#2A4370; --body:#2A3652;
  --muted:#6E7B94; --dim:#A6B0C3; --accent:#5B8DEF; --deep:#3A5CA8;
  --line:#ECEFF5; --soft:#DCE5F3; --kakao:#FEE500;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;background:#fff;color:var(--body);line-height:1.8;font-size:15px}
.serif{font-family:'Noto Serif KR','Nanum Myeongjo',Batang,serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:680px;margin:0 auto;padding:0 22px}

/* ── 상단 바 ── */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--ink)}
.topbar .in{max-width:680px;margin:0 auto;padding:15px 22px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Noto Serif KR',serif;font-weight:600;font-size:17px;color:var(--ink);letter-spacing:.5px}
.gnb{display:flex;gap:14px;font-size:12.5px;color:var(--muted);overflow-x:auto;white-space:nowrap}
.gnb a:hover{color:var(--deep)}
.gnbrow{border-bottom:1px solid var(--line);background:#fff}
.gnbrow .in{max-width:680px;margin:0 auto;padding:10px 22px}

/* ── 히어로 ── */
.hero{padding:42px 22px 34px;text-align:center;border-bottom:1px solid var(--line)}
.hero .date{font-size:10px;letter-spacing:3px;color:var(--dim);margin-bottom:13px}
.hero h1{font-family:'Noto Serif KR',serif;font-size:33px;color:var(--ink);letter-spacing:-.5px;font-weight:600}
.hero p{margin-top:11px;font-size:13px;color:var(--muted);font-family:'Noto Serif KR',serif}

.hero.compact{padding:26px 22px 22px}
.hero.compact h1{font-size:24px}
.hero.compact p{margin-top:7px;font-size:12px}

/* ── 오늘의 마음 대형 배너 ── */
.featured{display:block;background:linear-gradient(165deg,var(--navy) 0%,var(--navy2) 90%);color:#fff;text-align:center;padding:44px 26px 40px}
.featured .fl{font-size:10px;font-weight:700;color:#A9C9FF;letter-spacing:3.5px}
.featured .frule{display:block;width:34px;height:1.5px;background:rgba(169,201,255,.55);margin:16px auto}
.featured h2{font-family:'Noto Serif KR',serif;font-size:26px;font-weight:600;line-height:1.6;letter-spacing:-.4px;max-width:560px;margin:0 auto}
.featured p{margin:14px auto 0;font-size:13px;color:rgba(255,255,255,.65);line-height:1.75;max-width:460px}
.featured .fbtn{display:inline-block;margin-top:22px;font-size:12px;color:#fff;border:1px solid rgba(169,201,255,.5);border-radius:22px;padding:10px 22px;letter-spacing:.5px}
.featured:hover .fbtn{background:rgba(169,201,255,.15)}
@media (min-width:760px){.featured h2{font-size:31px}}

/* ── 섹션 공통 ── */
section.b{padding:26px 0 8px}
.sl{font-size:10.5px;font-weight:700;color:var(--accent);letter-spacing:2.5px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:baseline}
.sl a{font-size:10.5px;color:var(--dim);letter-spacing:0;font-weight:500}
.item{padding-bottom:17px;margin-bottom:17px;border-bottom:1px solid #F0F2F7}
.item.last{border-bottom:0}
.t1{font-family:'Noto Serif KR',serif;font-size:20px;font-weight:600;color:var(--ink);line-height:1.5;letter-spacing:-.3px}
.t2{font-family:'Noto Serif KR',serif;font-size:16px;font-weight:600;color:var(--ink);line-height:1.55}
.ex{margin-top:7px;font-size:12.5px;color:var(--muted);line-height:1.8}
.kicker{font-size:10px;font-weight:700;color:var(--dim);letter-spacing:1.5px;margin-bottom:7px}
.cover{border-radius:2px;overflow:hidden;margin-bottom:14px}
.cover img{width:100%;object-fit:cover;max-height:340px}

/* ── 남색 통계 블록 ── */
.navyblock{background:linear-gradient(165deg,var(--navy),var(--navy2));color:#fff;padding:34px 24px 30px;text-align:center;margin:6px 0 0}
.navyblock .nl{font-size:10px;font-weight:700;color:#A9C9FF;letter-spacing:3px;margin-bottom:16px}
.navyblock .rule{width:34px;height:1.5px;background:rgba(169,201,255,.55);margin:0 auto 18px}
.navyblock .big{font-family:'Noto Serif KR',serif;font-size:54px;font-weight:300;letter-spacing:-2px;line-height:1}
.navyblock .big i{font-style:normal;font-size:22px;font-weight:400}
.navyblock .desc{margin-top:13px;font-size:14.5px;line-height:1.7;font-family:'Noto Serif KR',serif}
.navyblock .why{margin-top:9px;font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.7}
.navyblock .src{margin-top:14px;font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.5px}
.navyblock .more{display:inline-block;margin-top:16px;font-size:11px;color:#A9C9FF;border:1px solid rgba(169,201,255,.4);border-radius:20px;padding:7px 16px}

/* ── 숫자 카드 가로 스크롤 ── */
.hscroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px}
.ncard{min-width:150px;flex:none;border:1px solid var(--line);padding:16px 14px;border-radius:4px}
.ncard .big{font-family:'Noto Serif KR',serif;font-size:27px;font-weight:400;color:var(--ink);letter-spacing:-1px}
.ncard .big i{font-style:normal;font-size:14px}
.ncard .ex{margin-top:5px;font-size:11.5px}
.ncard .src{margin-top:9px;font-size:9.5px;color:var(--dim)}

/* ── 순위 ── */
.rank .r{display:flex;gap:13px;align-items:baseline;padding:12px 0;border-bottom:1px solid #F0F2F7;font-size:14px;color:var(--body)}
.rank .r:last-child{border-bottom:0}
.rank b{color:var(--ink);font-size:15px;width:16px;font-weight:400;font-family:'Noto Serif KR',serif;flex:none}
.rank .c{margin-left:auto;font-size:10px;color:var(--dim);flex:none}

/* ── 대화 ── */
.situ{font-family:'Noto Serif KR',serif;font-size:17.5px;font-weight:600;color:var(--ink);line-height:1.6}
.talkhint{margin-top:7px;font-size:12px;color:var(--muted);line-height:1.7}

/* ── 가로 아이템 ── */
.hitem{display:flex;gap:14px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #F0F2F7}
.hitem.last{border-bottom:0}
.hitem .thumb{width:76px;height:76px;flex:none;border-radius:2px;overflow:hidden;background:#EDF1F8}
.hitem .thumb img{width:100%;height:100%;object-fit:cover}

/* ── 세대 칩 ── */
.chips{display:flex;border:1px solid var(--ink);margin-bottom:16px}
.chip{flex:1;text-align:center;padding:11px 0;font-size:12.5px;font-weight:600;color:var(--body);border-right:1px solid var(--line)}
.chip:last-child{border-right:0}
.chip:hover{background:var(--ink);color:#fff}

/* ── 오늘의 한 문장 / 비움의 한 문장 ── */
.quote{background:var(--navy);color:#fff;text-align:center;padding:44px 28px;margin-top:18px}
.quote p{font-family:'Noto Serif KR',serif;font-size:19px;line-height:1.9;font-weight:400}
.quote span{display:block;margin-top:16px;font-size:10px;letter-spacing:4px;color:rgba(169,201,255,.7)}

/* ── 레터 / 앱 CTA ── */
.letterbox{border:1.5px solid var(--ink);padding:26px 20px;text-align:center;margin-top:8px}
.letterbox h3{font-family:'Noto Serif KR',serif;font-size:17.5px;color:var(--ink);font-weight:600}
.letterbox p{margin-top:8px;font-size:12px;color:var(--muted);line-height:1.75}
.letterbox .btn{display:inline-block;margin-top:14px;background:var(--ink);color:#fff;font-weight:700;font-size:12px;padding:12px 26px}
.appcta{display:flex;gap:16px;align-items:center;padding:22px;border:1px solid var(--line);margin-top:14px}
.appcta .t2{font-size:15px}
.appbtn{display:inline-block;margin-top:11px;background:var(--accent);color:#fff;border-radius:3px;padding:9px 18px;font-size:12px;font-weight:700}

/* ── 푸터 ── */
.foot{margin-top:26px;padding:26px 20px 32px;border-top:1.5px solid var(--ink);text-align:center;font-size:11px;color:var(--dim);line-height:2.1}
.foot .slogan{color:var(--muted);font-family:'Noto Serif KR',serif}

/* ═══ 글 상세 ═══ */
.ahead{padding:34px 0 8px;text-align:center}
.ahead .cat{font-size:10.5px;font-weight:700;color:var(--accent);letter-spacing:2.5px}
.ahead h1{font-family:'Noto Serif KR',serif;margin-top:14px;font-size:25px;color:var(--ink);line-height:1.55;letter-spacing:-.4px;font-weight:600}
.ahead .sub{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.75}
.ahead .meta{margin-top:14px;font-size:10.5px;color:var(--dim);letter-spacing:.5px}
.emo{margin-top:12px}
.emo a{display:inline-block;font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:14px;padding:4px 11px;margin:0 2px}
.emo a b{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:5px;vertical-align:1px}

/* 핵심 답변 (AEO 요약 박스) */
.answerbox{background:#F4F7FC;border:1px solid #E0E8F5;border-left:2.5px solid var(--deep);padding:16px 18px;margin-top:22px}
.answerbox .t{font-size:10px;font-weight:700;color:var(--deep);letter-spacing:2px;margin-bottom:8px}
.answerbox p{font-size:13.5px;line-height:1.85;color:var(--body);margin:0}

/* FAQ */
.faqsec{border-top:1px solid var(--line);margin-top:8px}
.faq{border-bottom:1px solid #F0F2F7;padding:13px 0}
.faq summary{font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary:after{content:"+";color:var(--dim);font-weight:400}
.faq[open] summary:after{content:"−"}
.faq p{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.8}

.prose{font-size:15px;line-height:1.95;color:var(--body);padding-top:22px}
.prose p{margin-bottom:20px}
.prose h2{font-family:'Noto Serif KR',serif;font-size:18px;color:var(--ink);margin:30px 0 14px;font-weight:600;line-height:1.5}
.prose h3{font-size:15.5px;color:var(--ink);margin:24px 0 10px}
.prose b,.prose strong{color:var(--ink)}
.prose blockquote{border-left:2.5px solid var(--accent);padding:4px 0 4px 16px;margin:22px 0;color:var(--body);font-size:13.5px}
.prose ul,.prose ol{padding-left:22px;margin-bottom:20px}
.prose img{border-radius:2px;margin:8px 0}

/* 상세 안 데이터 블록 (본문 좌우 풀블리드) */
.prose .navyblock{margin:24px -22px}
.datacard{border:1px solid var(--line);border-radius:4px;padding:18px 16px;margin:22px 0}
.datacard .t{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:13px}
.datacard .row{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:11px;color:var(--muted)}
.datacard .row b{width:44px;font-weight:600;color:var(--body);flex:none}
.datacard .bar{height:9px;border-radius:0 2px 2px 0;background:var(--soft)}
.datacard .bar.on{background:var(--deep)}
.datacard .v{width:36px;text-align:right;flex:none;font-size:10.5px;color:var(--body)}
.datacard .v.on{font-weight:700;color:var(--deep)}
.datacard .src{margin-top:10px;font-size:9.5px;color:var(--dim)}
.dots10{text-align:center;border:1px solid var(--line);border-radius:4px;padding:20px 18px;margin:22px 0}
.dots10 .t{font-size:12.5px;color:var(--body);margin-bottom:14px}
.dots10 .t b{color:var(--deep)}
.dots10 .grid{display:flex;justify-content:center;gap:7px}
.dots10 .grid i{width:16px;height:16px;border-radius:50%;background:var(--soft)}
.dots10 .grid i.on{background:var(--deep)}
.dots10 .src{margin-top:12px;font-size:9.5px;color:var(--dim)}
.psybox{border-left:2.5px solid var(--accent);padding:4px 0 4px 16px;margin:22px 0}
.psybox .t{font-size:10px;font-weight:700;color:var(--accent);letter-spacing:2px;margin-bottom:7px}
.psybox p{font-size:13.5px;line-height:1.85;margin:0}
.trybox{border:1px solid var(--ink);padding:20px 18px;margin:24px 0}
.trybox .t{font-size:10px;font-weight:700;color:var(--ink);letter-spacing:2px;margin-bottom:11px}
.trybox li{list-style:none;font-size:13.5px;line-height:1.8;margin-bottom:9px;padding-left:16px;position:relative}
.trybox li:before{content:"·";position:absolute;left:2px;color:var(--accent);font-weight:700}

.oneline{background:var(--navy);color:#fff;text-align:center;padding:36px 26px;margin:30px -22px 0}
.oneline p{font-family:'Noto Serif KR',serif;font-size:17px;line-height:1.9}
.oneline span{display:block;margin-top:13px;font-size:9.5px;letter-spacing:4px;color:rgba(169,201,255,.7)}

.evidence{border-bottom:1px solid var(--line);padding:20px 0}
.evidence summary{font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.evidence summary:after{content:"펼치기 ▾";color:var(--dim);font-size:11px;font-weight:500}
.evidence[open] summary:after{content:"접기 ▴"}
.evidence ul{margin-top:13px}
.evidence li{list-style:none;font-size:11.5px;color:var(--muted);line-height:1.8;margin-bottom:9px;padding-left:14px;position:relative}
.evidence li:before{content:"—";position:absolute;left:0;color:var(--dim)}
.evidence a{color:var(--deep);text-decoration:underline}

.react{display:flex;gap:8px;padding:20px 0 6px}
.react .btn{flex:1;text-align:center;border:1px solid var(--line);padding:11px 0;font-size:12px;color:var(--body);font-weight:600;border-radius:3px;cursor:pointer;background:#fff;font-family:inherit}
.react .kakao{background:var(--kakao);border-color:var(--kakao);color:#191600}
.copyhint{text-align:center;font-size:10px;color:var(--dim);padding-bottom:4px}

/* 아카이브 */
.archead{padding:34px 0 20px;text-align:center;border-bottom:1px solid var(--line);margin-bottom:8px}
.archead h1{font-family:'Noto Serif KR',serif;font-size:24px;color:var(--ink);font-weight:600}
.archead p{margin-top:8px;font-size:12.5px;color:var(--muted)}
.pagenav{display:flex;justify-content:center;gap:8px;padding:20px 0;font-size:13px;color:var(--muted)}
.pagenav a,.pagenav span{padding:6px 12px;border:1px solid var(--line)}
.pagenav .current{background:var(--ink);color:#fff;border-color:var(--ink)}

@media (min-width:760px){
  .hero h1{font-size:38px}
  .ahead h1{font-size:29px}
}

/* ── 전체 폭 정렬: 넓은 화면에서도 본문(680px)과 같은 폭 (2026-08-13 희경 요청) ── */
.hero, .featured, .quote, .foot, .softstat {
  max-width:680px; margin-left:auto; margin-right:auto;
}
.navylink{text-align:center;background:linear-gradient(165deg,var(--navy),var(--navy2));margin-top:-1px;padding:0 0 26px}
.navylink a{font-size:12px;color:#A9C9FF}

/* ── 요즘 사람들의 마음: 밝은 블루그레이 카드 (오늘의 마음 남색 배너와 대비) ── */
.softstat .navyblock{background:#EEF3FA;color:var(--ink);border:1px solid #DFE7F4;border-bottom:0}
.softstat .navyblock .nl{color:var(--deep)}
.softstat .navyblock .rule{background:rgba(58,92,168,.4)}
.softstat .navyblock .big{color:var(--navy)}
.softstat .navyblock .desc{color:var(--ink)}
.softstat .navyblock .why{color:var(--muted)}
.softstat .navyblock .src{color:var(--dim)}
.softstat .navylink{background:#EEF3FA;border:1px solid #DFE7F4;border-top:0}
.softstat .navylink a{color:var(--deep)}