/*
Theme Name: Tax Guide - 세금환급가이드
Description: 핀테크 클린(토스st) 정보 사이트 테마 — 정적 홈 랜딩(front-page) + 카드형 글목록 + 사이드바. 색상은 :root만 바꿔 재사용.
Author: 세금환급 가이드
Version: 1.0
*/

/* ===== 색상 (여기 한 블록만 바꾸면 사이트 전체 색 변경) ===== */
:root{
  --a:#3182f6;        /* 메인 (토스블루) */
  --ad:#1b64da;       /* 진한 메인 */
  --a2:#5b9bff;       /* 밝은 메인(그라데이션) */
  --soft:#eef3ff;     /* 연한 배경 */
  --ink:#19212e; --sub:#5b6675; --line:#e9edf2; --bg:#f5f7fa; --card:#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:1120px; margin:0 auto; padding:0 18px; width:100%;}

/* ===== 헤더 ===== */
.hd{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.hd .wrap{display:flex; align-items:center; gap:18px; height:66px;}
.logo{display:flex; align-items:center; gap:9px; font-size:21px; font-weight:800; letter-spacing:-.5px; margin-right:auto; color:var(--ink);}
.logo img,.logo .custom-logo{height:38px; width:auto; display:block;}
.logo .custom-logo-link{display:flex; line-height:0;}
.logo .mk{width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--a),var(--a2));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:900;}
.hd-search{display:flex; width:230px; margin-left:auto;}
.hd-search input{flex:1; min-width:0; padding:8px 14px; border:1px solid var(--line); border-right:none; border-radius:999px 0 0 999px; font-size:14px; outline:none; background:var(--bg);}
.hd-search button{padding:8px 16px; background:var(--a); color:#fff; border:none; border-radius:0 999px 999px 0; cursor:pointer; font-weight:600;}
.nav-toggle{display:block; background:none; border:none; font-size:24px; cursor:pointer; color:var(--ink); padding:4px 10px; margin-left:4px;}

/* GNB = 우측 슬라이드 드로어 (PC·모바일 공통) */
.gnb{position:fixed; top:0; right:0; bottom:0; width:300px; max-width:82%; background:var(--card); z-index:1001;
  transform:translateX(100%); transition:transform .3s ease; overflow-y:auto; padding:64px 0 30px; box-shadow:-6px 0 28px rgba(0,0,0,.16);}
body.nav-open .gnb{transform:translateX(0);}
.gnb ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.gnb a{display:block; padding:15px 26px; font-size:16px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line);}
.gnb a:hover,.gnb .current-menu-item>a,.gnb a.on{background:var(--soft); color:var(--ad);}
.nav-close{position:absolute; top:16px; right:18px; background:none; border:none; font-size:30px; line-height:1; color:var(--sub); cursor:pointer; padding:0 6px;}
.nav-overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); 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;}

/* ===== 히어로 (홈) ===== */
.hero{padding:54px 0 44px;}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
.hero .tag{display:inline-block; font-size:13px; font-weight:700; color:var(--ad); background:var(--soft); padding:6px 14px; border-radius:999px; margin-bottom:16px;}
.hero h1{font-size:40px; font-weight:900; line-height:1.25; letter-spacing:-1.2px; margin:0 0 16px;}
.hero h1 em{font-style:normal; color:var(--a);}
.hero .lead{font-size:17px; color:var(--sub); margin:0 0 26px; line-height:1.65;}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap;}
.btn{font-size:15px; font-weight:700; padding:14px 24px; border-radius:14px; display:inline-flex; align-items:center; gap:7px; cursor:pointer;}
.btn.p{background:var(--a); color:#fff;} .btn.p:hover{background:var(--ad);}
.btn.g{background:var(--card); color:var(--ink); border:1px solid var(--line);}
.hcard{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:28px; box-shadow:0 12px 40px rgba(20,40,80,.08);}
.hcard .big{text-align:center; padding:8px 0 18px;}
.hcard .big .lb{font-size:13.5px; color:var(--sub); font-weight:600;}
.hcard .big .n{font-size:42px; font-weight:900; color:var(--a); letter-spacing:-1.5px; margin-top:3px;}
.hcard .big .n small{font-size:20px;}
.hcard .row{display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px dashed var(--line);}
.hcard .row:last-child{border-bottom:none;}
.hcard .row .k{font-size:14.5px; color:var(--sub);}
.hcard .row .v{font-size:16px; font-weight:800;}
.hcard .ok{color:var(--a); font-weight:800;}

/* ===== 섹션 공통 (홈) ===== */
.sec{padding:42px 0;}
.sec.alt{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sec-h{text-align:center; margin-bottom:30px;}
.sec-h h2{font-size:27px; font-weight:800; letter-spacing:-.6px; margin:0 0 8px;}
.sec-h p{color:var(--sub); font-size:15px; margin:0;}

/* 카테고리 카드 */
.cats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.cat{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; display:flex; gap:14px; align-items:center;
  transition:transform .15s, box-shadow .15s, border-color .15s;}
.cat:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(20,40,80,.08); border-color:var(--a2);}
.cat .ic{width:46px; height:46px; border-radius:13px; background:var(--soft); display:flex; align-items:center; justify-content:center; font-size:23px; flex:none;}
.cat b{display:block; font-size:16px; font-weight:700;}
.cat span{font-size:13px; color:var(--sub);}

/* 체크 대상 */
.check{background:var(--soft); border-radius:20px; padding:30px 32px; display:grid; grid-template-columns:1fr 1fr; gap:12px 30px;}
.check .it{display:flex; gap:11px; align-items:flex-start; font-size:15.5px; font-weight:600;}
.check .it .c{width:24px; height:24px; border-radius:999px; background:var(--a); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; flex:none; margin-top:1px;}

/* 절차 step */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.step{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px; text-align:center;}
.step .no{width:40px; height:40px; border-radius:999px; background:var(--a); color:#fff; font-weight:900; font-size:18px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px;}
.step b{display:block; font-size:16px; margin-bottom:6px;}
.step span{font-size:13.5px; color:var(--sub);}

/* CTA 배너 */
.cta-b{background:linear-gradient(135deg,var(--a),var(--a2)); border-radius:24px; padding:42px; text-align:center; color:#fff;}
.cta-b h2{font-size:26px; font-weight:800; margin:0 0 10px; letter-spacing:-.5px;}
.cta-b p{font-size:15px; opacity:.92; margin:0 0 22px;}
.cta-b a{background:#fff; color:var(--ad); font-weight:800; font-size:15px; padding:14px 28px; border-radius:14px; display:inline-block;}

/* 홈 하단 안내 텍스트 (SEO·네이버용) */
.home-intro{max-width:880px; margin:0 auto; color:var(--sub); font-size:15px; line-height:1.85;}
.home-intro h2{font-size:20px; color:var(--ink); font-weight:800; margin:26px 0 10px; padding-left:11px; border-left:4px solid var(--a);}
.home-intro h2:first-child{margin-top:0;}
.home-intro h3{font-size:16.5px; color:var(--ink); font-weight:700; margin:18px 0 8px;}
.home-intro p{margin:0 0 14px;}
.home-intro ul{padding-left:20px; margin:0 0 14px;} .home-intro li{margin:5px 0;}
.home-intro a{color:var(--ad); text-decoration:underline; font-weight:600;}

/* ===== 글 목록(블로그/카테고리/검색) ===== */
.main{display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:30px; padding:28px 0 50px;}
/* 그리드/플렉스 blowout 방지 — 칸이 화면보다 커지지 않게 */
.main > div, .main > article, .main > aside{min-width:0;}
.card, .feat, .gd, .cat, .step, .article, .tax-wrap{min-width:0;}
.tax-wrap, .article-body, .page-body{overflow-wrap:anywhere;}
.page-title{font-size:24px; font-weight:800; margin:0 0 18px; letter-spacing:-.5px;}
.sec-t{font-size:18px; font-weight:800; margin:0 0 14px; display:flex; align-items:center; gap:8px;}
.sec-t::before{content:""; width:5px; height:18px; border-radius:3px; background:var(--a);}
.feat{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:26px; margin-bottom:18px; box-shadow:0 4px 20px rgba(20,40,80,.04); display:block;}
.feat .thumb{width:100%; aspect-ratio:16/7; border-radius:14px; overflow:hidden; margin-bottom:16px; background:linear-gradient(135deg,var(--a),var(--a2));}
.feat .thumb img{width:100%; height:100%; object-fit:cover;}
.chip{display:inline-block; font-size:12px; font-weight:700; color:var(--ad); background:var(--soft); padding:5px 12px; border-radius:999px;}
.feat h2{font-size:24px; font-weight:800; line-height:1.32; margin:13px 0 10px; letter-spacing:-.5px;}
.feat p{color:var(--sub); font-size:15px; margin:0;}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px 22px; display:block; transition:transform .15s, box-shadow .15s;}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(20,40,80,.08);}
.card .chip{font-size:11.5px; padding:4px 10px;}
.card h3{font-size:16.5px; font-weight:700; line-height:1.4; margin:10px 0 7px;}
.card p{font-size:13.5px; color:var(--sub); margin:0;}
.pagi{display:flex; gap:8px; justify-content:center; padding:26px 0 0;}
.pagi a,.pagi span{padding:9px 15px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-size:14px; font-weight:600;}
.pagi .current{background:var(--a); color:#fff; border-color:var(--a);}

/* ===== 글 상세 ===== */
.article{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:34px 38px; box-shadow:0 4px 20px rgba(20,40,80,.04);}
.bc{font-size:12.5px; color:var(--sub); margin-bottom:10px;}
.bc b{color:var(--ad);}
.atitle{font-size:28px; font-weight:800; line-height:1.32; margin:0 0 12px; letter-spacing:-.6px;}
.ameta{display:flex; gap:12px; font-size:13px; color:var(--sub); border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:22px; flex-wrap:wrap;}
.ameta .au{font-weight:700; color:var(--ink);}

/* 본문 (.tax-wrap) */
.tax-wrap{font-size:16.5px; line-height:1.85;}
.tax-wrap > p{margin:0 0 17px;}
.tax-wrap .bignum{background:linear-gradient(135deg,var(--soft),#f5f8ff); border:1px solid #d8e3fb; border-radius:16px; padding:22px 24px; margin:8px 0 24px; text-align:center;}
.tax-wrap .bignum .lb{font-size:14px; color:var(--sub); font-weight:600;}
.tax-wrap .bignum .v{font-size:38px; font-weight:900; color:var(--ad); letter-spacing:-1px; margin-top:4px;}
.tax-wrap .bignum .v small{font-size:18px; font-weight:700;}
.tax-wrap .toc{background:var(--bg); border-radius:14px; padding:18px 22px; margin:0 0 26px;}
.tax-wrap .toc strong{display:block; font-size:14px; color:var(--ad); margin-bottom:8px;}
.tax-wrap .toc p{margin:5px 0; font-size:14.5px; color:var(--sub);}
.tax-wrap h2{font-size:21px; font-weight:800; margin:34px 0 14px; padding-left:13px; border-left:4px solid var(--a); line-height:1.4;}
.tax-wrap ul{margin:0 0 18px; padding-left:20px;} .tax-wrap li{margin:7px 0;}
.tax-wrap table{width:100%; border-collapse:separate; border-spacing:0; margin:18px 0; font-size:14.5px; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:block; overflow-x:auto;}
.tax-wrap th,.tax-wrap td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line);}
.tax-wrap thead th{background:var(--bg); color:var(--ad); font-weight:700;}
.tax-wrap tbody tr:last-child td{border-bottom:none;}
.tax-wrap .box{background:var(--soft); border-radius:14px; padding:16px 20px; margin:18px 0; font-size:15.5px;}
.tax-wrap .faq-item{border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin:12px 0;}
.tax-wrap .faq-item p{margin:0;} .tax-wrap .faq-item p:first-child{font-weight:700; color:var(--ad); margin-bottom:7px;}
.tax-wrap .summary{background:linear-gradient(135deg,var(--a),var(--a2)); color:#fff; border-radius:16px; padding:24px 26px; margin:30px 0 16px; font-size:15.5px; line-height:1.95;}
.tax-wrap .summary strong{font-size:16px;}
.tax-wrap .notice{font-size:12.5px; color:#9aa3ae; border-top:1px solid var(--line); padding-top:14px; margin-top:18px;}
.tax-wrap a{color:var(--ad); text-decoration:underline; font-weight:600;}

/* 일반 페이지(소개/면책 등) */
.page-body{font-size:16.5px; line-height:1.85;}
.page-body h2{font-size:20px; font-weight:800; margin:28px 0 12px; padding-left:12px; border-left:4px solid var(--a);}
.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(--ad); text-decoration:underline;}

/* ===== 사이드바 ===== */
.side-box{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 20px; margin-bottom:18px;}
.side-box h4{font-size:15px; font-weight:800; margin:0 0 12px;}
.rank a{display:flex; gap:11px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line);}
.rank a:last-child{border-bottom:none;}
.rank .n{width:22px; height:22px; border-radius:7px; background:var(--soft); color:var(--ad); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none;}
.rank .t{font-size:14px; font-weight:600; line-height:1.45;}
.cats-side{display:flex; flex-wrap:wrap; gap:8px;}
.cats-side a{font-size:13px; font-weight:600; color:var(--sub); background:var(--bg); padding:7px 13px; border-radius:999px;}
.cats-side a:hover{background:var(--soft); color:var(--ad);}
.ad-box{height:250px; border-radius:14px; background:repeating-linear-gradient(45deg,#eef1f5,#eef1f5 10px,#e7ebf0 10px,#e7ebf0 20px); display:flex; align-items:center; justify-content:center; color:#aab2bd; font-size:13px; border:1px solid var(--line);}

/* ===== 푸터 ===== */
.ft{background:#10202e; color:#9fb0bf; margin-top:10px;}
.ft .wrap{padding:30px 18px;}
.ft .fnav{display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px; font-weight:600; margin-bottom:12px;}
.ft .fnav ul{list-style:none; margin:0; padding:0; display:flex; gap:16px; flex-wrap:wrap;}
.ft .fnav a{color:#d2dde6;} .ft .fnav a:hover{color:#fff;}
.ft small{font-size:12.5px; line-height:1.7; color:#7f909e;}

/* ===== 반응형 ===== */
@media(max-width:900px){ .main{grid-template-columns:1fr;} }
@media(max-width:860px){ .hero .wrap{grid-template-columns:1fr; gap:28px;} .hero h1{font-size:32px;} }
@media(max-width:760px){ .cats,.guides{grid-template-columns:1fr 1fr;} .steps{grid-template-columns:1fr;} }
@media(max-width:640px){ .check{grid-template-columns:1fr; padding:24px;} .grid{grid-template-columns:1fr;} .cats{grid-template-columns:1fr;} .article{padding:26px 22px;} }
/* GNB 드로어는 PC·모바일 공통(위에서 정의). 모바일에선 헤더 검색만 숨김 */
@media(max-width:768px){
  .hd-search{display:none;}
}