@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500;700;900&display=swap');

/* ===== 서후네 커스텀 티스토리 스킨 — 목업(parenting-blog-mockup.html) 이식 ===== */
:root{
  --bg:#F3F7FB; --panel:#FFFFFF;
  --blue:#5FA8DA; --blue-l:#DBEBF8; --blue-deep:#2F79B4;
  --mint:#7FC49B; --mint-l:#DBF0E4; --butter:#F6C86B; --butter-l:#FCEFD0;
  --coral:#F28C6A; --coral-l:#FCE2D8;
  --text:#33414F; --sub:#5F6E7C; --mute:#93A2AF; --line:#E4EDF4;
  --shadow:0 12px 32px rgba(70,110,150,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Noto Sans KR',sans-serif;font-weight:500;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
h1,h2,h3,h4,.logo,.hero h2,.brand,.dadbox .h,.related .t,.sec-head h3{font-family:'Jua',sans-serif;font-weight:400}
a{color:inherit;text-decoration:none}
.pill{display:inline-block;padding:6px 16px;border-radius:999px;font-size:13.5px;font-weight:700}
.pill.blue{background:var(--blue-l);color:var(--blue-deep)}
.pill.mint{background:var(--mint-l);color:#3f8f63}
.pill.coral{background:var(--coral-l);color:#c56a45}

/* header */
header.site{background:rgba(243,247,251,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.nav{display:flex;align-items:center;gap:26px;height:72px}
.logo{display:flex;align-items:center;gap:11px;font-size:27px;color:var(--text)}
.logo .dot{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 60% 40%,#FBD98B,var(--butter));position:relative;flex:0 0 auto}
.logo .dot:after{content:"";position:absolute;width:23px;height:23px;border-radius:50%;background:var(--bg);top:2px;right:1px}
.nav .menu{display:flex;gap:22px;margin-left:8px;font-size:16px;color:var(--sub);font-weight:700;list-style:none}
.nav .menu a:hover{color:var(--blue)}
.nav .spacer{flex:1}

/* hero (home only) */
.hero{position:relative;overflow:hidden;text-align:center;padding:60px 0 40px}
.hero .blob{position:absolute;border-radius:50%;filter:blur(48px);opacity:.55;z-index:0}
.hero .b1{width:280px;height:280px;background:var(--blue);top:-80px;left:-40px}
.hero .b2{width:300px;height:300px;background:var(--mint);top:-40px;right:-70px}
.hero h2{font-size:46px;position:relative;z-index:1;letter-spacing:-.5px;color:var(--text)}
.hero p{color:var(--sub);margin-top:14px;font-size:18px;font-weight:700;position:relative;z-index:1}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px;position:relative;z-index:1}
.chip{display:inline-block;text-decoration:none;background:#fff;border:1px solid var(--line);color:var(--sub);padding:10px 18px;border-radius:999px;font-size:14.5px;font-weight:700;box-shadow:var(--shadow);transition:transform .12s,color .12s}
a.chip:hover{transform:translateY(-2px);color:var(--blue);border-color:var(--blue)}

/* section + card grid */
.sec{padding:34px 0 10px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.sec-head h3{font-size:28px}
.sec-head a{color:var(--blue);font-size:15px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--panel);border-radius:26px;padding:22px;box-shadow:var(--shadow);border:1px solid #fff;transition:transform .15s;display:block}
.card:hover{transform:translateY(-4px)}
.card .thumb{aspect-ratio:4 / 5;border-radius:18px;background:linear-gradient(135deg,#8FC7EA,#5FA8DA);margin-bottom:14px;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .tag{font-size:12.5px;font-weight:700;color:var(--mute)}
.card h4{font-size:22px;margin:8px 0 9px;line-height:1.34}
.card .ex{color:var(--sub);font-size:14.5px;line-height:1.6;min-height:44px;font-weight:500}
.card .meta{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--mute);font-weight:700}
.paging{display:flex;justify-content:center;gap:10px;margin:30px 0;font-weight:700}
.paging a,.paging span{padding:8px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--sub)}
.paging .selected{background:var(--blue);color:#fff;border-color:var(--blue)}

/* article / page view */
.post{background:var(--panel);border-radius:32px;box-shadow:var(--shadow);padding:48px 52px;margin:24px 0 40px}
.crumb{font-size:13px;color:var(--mute);margin-bottom:16px;font-weight:700}
.post h1{font-size:40px;line-height:1.3;margin:12px 0 14px}
.post .pmeta{display:flex;gap:10px;align-items:center;color:var(--mute);font-size:13.5px;font-weight:700;margin-bottom:24px}
.post .article{font-size:17px;color:#4c5966;font-weight:500}
.post .article p{margin:0 0 16px}
.post .article h2,.post .article h3{font-family:'Jua';color:var(--text);margin:26px 0 12px}
.post .article img{border-radius:16px;margin:10px 0}
/* 답 박스 = 인용구 */
.post .article blockquote{background:var(--blue-l);border:0;border-radius:22px;padding:22px 26px;font-size:19px;font-weight:900;color:var(--blue-deep);margin:0 0 24px}
/* 아빠 경험 콜아웃 */
.post .article .dadbox{background:var(--mint-l);border-radius:22px;padding:22px 26px;margin:26px 0;color:#4a7a60;font-weight:500}
.post .article .dadbox:before{content:"🍼 아빠 경험";display:block;font-family:'Jua';color:#3f8f63;font-size:20px;margin-bottom:8px}
/* 댓글 유도 */
.post .article .commentcta{background:var(--butter-l);border-radius:22px;padding:20px 24px;color:#9a7420;font-weight:700;margin:22px 0}

/* sidebar */
.layout{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.aside{background:var(--panel);border-radius:26px;box-shadow:var(--shadow);border:1px solid #fff;padding:22px}
.aside h3{font-family:'Jua';font-size:19px;margin-bottom:12px;color:var(--text)}
.aside .side-el{margin-bottom:22px;font-size:14.5px;color:var(--sub)}
.aside a:hover{color:var(--blue)}
.btn-sub{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:11px 20px;font-weight:700;font-family:'Jua'}

/* footer */
footer.site{border-top:1px solid var(--line);margin-top:20px;padding:40px 0;color:var(--mute);font-size:14px;font-weight:700}
.fnav{display:flex;gap:22px;margin:14px 0;list-style:none;flex-wrap:wrap}
.fnav li{list-style:none}
.fnav a{color:var(--sub)}
.fnav a:hover{color:var(--blue)}
.fnav{display:flex;gap:22px;margin:12px 0;list-style:none}
.fnav a:hover{color:var(--blue)}

/* ===== 페이지 타입별 표시 (body id로 제어) ===== */
/* 히어로·홈섹션제목은 홈에서만 */
.hero,.only-home{display:none}
#tt-body-index .hero{display:block}
#tt-body-index .only-home{display:block}
/* 카드 그리드: 홈·카테고리·태그·검색·보관함 목록에서 grid */
#tt-body-index .content{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
#tt-body-index .listgrid{display:none}
#tt-body-category .listgrid,
#tt-body-tag .listgrid,
#tt-body-search .listgrid,
#tt-body-archive .listgrid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px
}
/* 글/페이지 상세는 그리드 아님(한 칼럼) */
#tt-body-page .content{display:block}
#tt-body-page .layout{grid-template-columns:1fr 300px}

/* ===== 티스토리 메뉴([##_blog_menu_##]) 스타일 ===== */
.menu ul{display:flex;gap:22px;margin-left:8px;list-style:none;flex-wrap:wrap}
.menu li{list-style:none}
.menu a{font-size:16px;color:var(--sub);font-weight:700}
.menu a:hover{color:var(--blue)}
.menu .cnt,.menu .txt_num{display:none}

/* 관련 글 제목 */
.related{margin-top:30px}
.related .t{font-size:22px;margin-bottom:14px;color:var(--text)}
.related a:hover{color:var(--blue)}

@media(max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
  .layout{grid-template-columns:1fr}
  .hero h2{font-size:36px}
  .post{padding:32px 24px}
  .nav .menu{display:none}
}