/*
Theme Name: Guide News - 요양가이드
Description: 언론·정보매체 스타일 정보 사이트 테마 (헤더 제호 + GNB + 헤드라인 + 사이드바). 색상은 :root 변수만 바꿔 사이트별 재사용.
Author: 요양 가이드
Version: 1.0
*/

/* ===== 색상 (사이트별로 이 블록만 교체) ===== */
:root{
  --accent:#2a7f6f;   /* 메인 틸그린(요양·돌봄) */
  --accent-d:#1a4a40; /* 어두운 틸 */
  --point:#c2703d;    /* 카테고리 포인트 테라코타 */
  --ink:#1c2b27; --sub:#5b6770; --line:#e3e6ea; --soft:#f5f7f6; --bg:#fff;
}

*{box-sizing:border-box;}
html{overflow-x:hidden;}
body{margin:0; background:var(--bg); color:var(--ink); overflow-x:hidden; max-width:100%;
  font-family:'Pretendard',system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  line-height:1.6; word-break:keep-all; font-size:15px;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; height:auto;}
.wrap{max-width:1140px; margin:0 auto; padding:0 18px;}

/* 헤더 */
.util{border-bottom:1px solid var(--line); font-size:12.5px; color:var(--sub);}
.util .wrap{display:flex; justify-content:space-between; height:34px; align-items:center;}
.mast{border-bottom:2px solid var(--ink);}
.mast .wrap{display:flex; align-items:center; gap:12px 14px; padding:16px 18px; flex-wrap:wrap;}
.logo{display:flex; align-items:center; gap:11px; margin-right:auto; font-size:28px; font-weight:900; letter-spacing:-1px; color:var(--ink);}
.logo img, .logo .custom-logo{height:44px; width:auto; display:block;}
.logo .custom-logo-link{display:flex; line-height:0;}
.logo-txt{color:var(--ink);}
/* 헤더 검색창 */
.hdr-search{display:flex; width:300px;}
.hdr-search input{flex:1; min-width:0; padding:9px 13px; border:1px solid var(--line); border-right:none; border-radius:6px 0 0 6px; font-size:14px; outline:none;}
.hdr-search input:focus{border-color:var(--accent);}
.hdr-search button{padding:9px 18px; background:var(--accent); color:#fff; border:none; border-radius:0 6px 6px 0; cursor:pointer; font-weight:600; white-space:nowrap;}
.gnb{background:var(--accent);}
.gnb .wrap{display:flex; flex-wrap:wrap; padding:0 18px;}
.gnb ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;}
.gnb li{margin:0;}
.gnb a{display:block; color:#dfe7f1; font-size:15px; font-weight:600; padding:12px 16px;}
.gnb a:hover,.gnb .current-menu-item > a{background:rgba(255,255,255,.14); color:#fff;}

/* 본문 그리드 */
.main{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:34px; padding:26px 0 40px;}
@media(max-width:880px){.main{grid-template-columns:1fr;}}
/* 그리드/플렉스 blowout 방지 — 칸이 화면보다 커지지 않게 */
.main > div, .main > article, .main > aside, .art, .lead, .sec, .care-wrap, .article-body{min-width:0;}
.care-wrap, .article-body, .page-body{overflow-wrap:anywhere;}

/* 홈 헤드라인 */
.lead{border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:22px;}
.cat{display:inline-block; font-size:12px; font-weight:800; color:var(--point); margin-bottom:8px; letter-spacing:.3px;}
.lead h2{font-size:28px; font-weight:800; line-height:1.32; margin:0 0 12px;}
.lead h2 a:hover{color:var(--accent);}
.lead p{font-size:16px; color:var(--sub); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.lead .thumb{width:100%; aspect-ratio:16/8; background:linear-gradient(135deg,var(--accent),var(--accent-d)); border-radius:6px; margin:14px 0; overflow:hidden;}
.lead .thumb img{width:100%; height:100%; object-fit:cover;}

/* 서브 기사 그리드 */
.subgrid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:30px;}
@media(max-width:560px){.subgrid{grid-template-columns:1fr;}}
.art{background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px;
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;}
.art:hover{box-shadow:0 6px 18px rgba(0,0,0,.08); border-color:#c5cdd5; transform:translateY(-3px);}
.art .cat{font-size:11.5px; display:inline-block; margin-bottom:8px;}
.art h3{font-size:17px; font-weight:700; line-height:1.4; margin:0 0 7px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.art h3 a:hover{color:var(--accent);}
.art p{font-size:13.5px; color:var(--sub); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* 섹션 / 리스트 */
.sec{margin-top:30px;}
.sec-h{display:flex; align-items:center; gap:10px; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:14px;}
.sec-h b{font-size:18px; font-weight:800;}
.sec-h span{font-size:12.5px; color:var(--point); font-weight:700;}
.rowlist a{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px dotted var(--line); font-size:15px;}
.rowlist a:hover{color:var(--accent);}
.rowlist .d{font-size:12.5px; color:#9aa3ab; white-space:nowrap;}
.rowlist .b{font-weight:600;}

/* 페이지네이션 */
.pagi{display:flex; gap:8px; justify-content:center; padding:20px 0;}
.pagi a,.pagi span{padding:8px 14px; border:1px solid var(--line); border-radius:6px; font-size:14px; font-weight:600;}
.pagi .current{background:var(--accent); color:#fff; border-color:var(--accent);}

/* 기사 상세 */
.bc{font-size:12.5px; color:var(--sub); margin:4px 0 14px;}
.bc a:hover{color:var(--accent);}
.atitle{font-size:30px; font-weight:800; line-height:1.34; margin:0 0 14px;}
@media(max-width:560px){.atitle{font-size:24px;}}
.ameta{display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--sub);
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line); padding:11px 0; margin-bottom:24px;}
.ameta .au{font-weight:700; color:var(--ink);}

/* ===== 발행 글 본문 (.care-wrap) — 색상은 위 :root 따름 ===== */
.care-wrap{font-size:16.5px; line-height:1.85; color:var(--ink);}
.care-wrap .toc{background:var(--soft); border:1px solid var(--line); border-left:4px solid var(--accent); padding:16px 20px; border-radius:6px; margin:0 0 26px;}
.care-wrap .toc strong{display:block; font-size:14.5px; margin-bottom:7px; color:var(--accent);}
.care-wrap .toc p{margin:4px 0; font-size:14.5px; color:var(--sub);}
.care-wrap h2{font-size:22px; font-weight:800; border-left:5px solid var(--accent); padding-left:12px; margin:36px 0 14px; line-height:1.4;}
.care-wrap p{margin:0 0 17px;}
.care-wrap ul{margin:0 0 18px; padding-left:20px;} .care-wrap li{margin:7px 0;}
.care-wrap table{width:100%; border-collapse:collapse; margin:18px 0; font-size:15px; display:block; overflow-x:auto;}
.care-wrap th,.care-wrap td{border:1px solid var(--line); padding:11px 13px; text-align:left;}
.care-wrap thead th{background:var(--soft); color:var(--accent); font-weight:700;}
.care-wrap tbody tr:nth-child(even){background:#fafbfc;}
.care-wrap .box{background:var(--soft); border-left:4px solid var(--accent); padding:15px 18px; border-radius:6px; margin:18px 0; font-size:15.5px;}
.care-wrap .insurance,.care-wrap .check{background:#fffbeb; border:1px solid #fde68a; border-radius:6px; padding:15px 18px; margin:20px 0; font-size:15.5px;}
.care-wrap .faq-item{border-bottom:1px solid var(--line); padding:15px 0;}
.care-wrap .faq-item p{margin:0 0 6px;} .care-wrap .faq-item p:first-child{font-weight:700; color:var(--accent);}
.care-wrap .summary{background:var(--accent-d); color:#fff; padding:22px 24px; border-radius:8px; margin:30px 0 16px; font-size:15.5px; line-height:1.95;}
.care-wrap .notice{font-size:13px; color:#9aa3ab; border-top:1px solid var(--line); padding-top:13px; margin-top:8px;}
.care-wrap a{color:var(--accent); text-decoration:underline; font-weight:600;}

/* 일반 페이지 본문(소개/면책 등) */
.page-body{font-size:16.5px; line-height:1.85;}
.page-body h2{font-size:21px; font-weight:800; border-left:5px solid var(--accent); padding-left:12px; margin:30px 0 12px;}
.page-body p{margin:0 0 16px;} .page-body ul{padding-left:20px; margin:0 0 16px;} .page-body li{margin:6px 0;}
.page-body a{color:var(--accent); text-decoration:underline;}

/* 사이드바 */
.side-box{border:1px solid var(--line); border-radius:6px; margin-bottom:22px; overflow:hidden;}
.side-h{background:var(--soft); border-bottom:1px solid var(--line); padding:11px 16px; font-size:15px; font-weight:800;}
.rank{padding:6px 16px 12px;}
.rank a{display:flex; gap:11px; padding:10px 0; border-bottom:1px dotted var(--line); align-items:flex-start;}
.rank a:last-child{border-bottom:none;}
.rank .n{font-size:16px; font-weight:900; color:var(--point); min-width:18px;}
.rank .t{font-size:14.5px; font-weight:600; line-height:1.4;}
.rank a:hover .t{color:var(--accent);}
.side-box ul{list-style:none; margin:0; padding:6px 16px 12px;}
.side-box ul li{padding:9px 0; border-bottom:1px dotted var(--line); font-size:14.5px; font-weight:600;}
.side-box ul li:last-child{border-bottom:none;}
.side-box ul li a:hover{color:var(--accent);}
.ad-box{height:200px; background:repeating-linear-gradient(45deg,#f0f1f3,#f0f1f3 10px,#e9eaed 10px,#e9eaed 20px); display:flex; align-items:center; justify-content:center; color:#9aa3ab; font-size:13px; border-radius:6px; border:1px solid var(--line); margin-bottom:22px;}

/* 푸터 */
.ft{background:var(--accent-d); color:#aeb8c2; margin-top:30px;}
.ft .wrap{padding:30px 18px;}
.ft-nav{display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; font-weight:600; margin-bottom:14px;}
.ft-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:18px; flex-wrap:wrap;}
.ft-nav a{color:#d6dde4;} .ft-nav a:hover{color:#fff;}
.ft small{font-size:12.5px; line-height:1.7; color:#8b96a1;}

/* ===== 모바일 햄버거 + 슬라이드 메뉴 ===== */
.nav-toggle{display:none; background:none; border:none; font-size:26px; color:var(--ink); cursor:pointer; line-height:1; padding:4px 8px;}
.nav-overlay{display:none;}
@media(max-width:768px){
  .nav-toggle{display:block; position:static; transform:none;}
  .hdr-search{order:3; width:100%;}
  /* GNB → 우측 슬라이드 드로어 */
  .gnb{position:fixed; top:0; right:0; bottom:0; width:78%; max-width:300px; z-index:1001;
       transform:translateX(100%); transition:transform .3s ease; overflow-y:auto;
       box-shadow:-4px 0 22px rgba(0,0,0,.25); padding-top:14px;}
  body.nav-open .gnb{transform:translateX(0);}
  .gnb .wrap{display:block; padding:0; max-width:none;}
  .gnb ul{flex-direction:column;}
  .gnb a{padding:15px 22px; border-bottom:1px solid rgba(255,255,255,.12); font-size:16px;}
  /* 어두운 배경 오버레이 */
  .nav-overlay{display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
       opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;}
  body.nav-open .nav-overlay{opacity:1; visibility:visible;}
  body.nav-open{overflow:hidden;}
}