/*
Theme Name: AI 생존 전략 (AI Survival)
Theme URI: https://ai-survival.net
Description: AI로 먹고살기 — 체류형 에디토리얼 미디어. Astra 자식 테마로 메인·게시글·정책 페이지를 재디자인한 커스텀 테마. (분위기: 따뜻·친근 / terracotta)
Author: Apep
Template: astra
Version: 1.0.0
Text Domain: ai-survival-child
*/

/* ============================================================
   디자인 토큰 — 따뜻·친근 (terracotta) 분위기
   ============================================================ */
:root{
  --bg:#FBF5EE;
  --surface:#FFFFFF;
  --surface-2:#FCF7F1;
  --ink:#241F1A;
  --ink-soft:#6A5F54;
  --ink-faint:#A2968A;
  --line:#EFE5D9;
  --accent:#C2613B;
  --accent-soft:#F7E6DA;
  --accent-ink:#8A3F20;
  --headline-font:'Pretendard', system-ui, sans-serif; /* 메인 헤드라인 */
  --serif:'Noto Serif KR', serif;                       /* 본문 정독 */
  --maxw:1180px;
}

/* ============================================================
   리셋 — Astra 기본값 위에 덮어쓰기 (자식 테마 마크업은 자체 구조)
   ============================================================ */
html{scroll-behavior:smooth;}
body.ais{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Pretendard', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
body.ais a{color:inherit; text-decoration:none;}
body.ais img{max-width:100%; display:block;}
body.ais button{font-family:inherit;}
body.ais ::selection{background:var(--accent-soft);}
.ais *,.ais *::before,.ais *::after{box-sizing:border-box;}

/* Astra 기본 컨테이너/여백 무력화 (커스텀 템플릿 전용 폭 사용) */
.ais #page,.ais #content,.ais .site-content,.ais .ast-container{
  max-width:none; padding:0; margin:0;
}
.ais .ast-container{display:block;}

.ais-wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

@keyframes ais-floatUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

/* ============================================================
   헤더
   ============================================================ */
.ais-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.ais-header-inner{height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.ais-brand{display:flex; align-items:center; gap:13px;}
.ais-brand-name{font-weight:800; font-size:21px; letter-spacing:-0.03em; color:var(--ink);}
.ais-nav{display:flex; align-items:center; gap:30px;}
.ais-navlink{font-size:16px; font-weight:600; color:var(--ink-soft); transition:color .2s;}
.ais-navlink:hover{color:var(--accent);}
.ais-head-actions{display:flex; align-items:center; gap:12px;}
.ais-search-form{display:flex; align-items:center; gap:12px;}
.ais-search-input{
  width:0; padding:0; opacity:0; border:1px solid var(--line); border-radius:10px;
  height:42px; font-size:15px; color:var(--ink); background:var(--surface); outline:none;
  transition:width .25s ease, opacity .2s ease, padding .25s ease;
}
.ais-search-form.open .ais-search-input{width:180px; padding:0 14px; opacity:1;}
.ais-iconbtn{
  width:42px; height:42px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  cursor:pointer; transition:border-color .2s;
}
.ais-iconbtn:hover{border-color:var(--accent);}
.ais-cta{
  height:42px; display:inline-flex; align-items:center; padding:0 20px;
  background:var(--accent); color:#fff; font-weight:700; font-size:15px; border-radius:10px;
  transition:filter .2s, transform .2s;
}
.ais-cta:hover{filter:brightness(0.94); transform:translateY(-1px);}

/* ============================================================
   버튼 / 카드 호버
   ============================================================ */
.ais-btn-primary{
  display:inline-flex; align-items:center; gap:9px; padding:15px 26px;
  background:var(--accent); color:#fff; font-weight:700; font-size:17px; border-radius:11px;
  transition:filter .2s, transform .2s;
}
.ais-btn-primary:hover{filter:brightness(0.94); transform:translateY(-2px);}
.ais-btn-ghost{
  display:inline-flex; align-items:center; padding:15px 26px; background:transparent;
  color:var(--ink); font-weight:700; font-size:17px; border:1px solid var(--line); border-radius:11px;
  transition:border-color .2s;
}
.ais-btn-ghost:hover{border-color:var(--accent);}

.ais-featured{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(20,30,50,.04), 0 24px 48px -24px rgba(36,31,26,.22);
  transition:transform .28s ease, box-shadow .28s ease;
}
.ais-featured:hover{transform:translateY(-5px); box-shadow:0 1px 2px rgba(20,30,50,.04), 0 34px 60px -26px rgba(36,31,26,.3);}

.ais-card{
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(20,30,50,.04);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ais-card:hover{transform:translateY(-4px); box-shadow:0 18px 38px -20px rgba(36,31,26,.28); border-color:var(--accent-soft);}

.ais-thumb{
  position:relative; aspect-ratio:16/9; border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(135deg, var(--accent-soft) 0 14px, transparent 14px 28px), var(--surface-2);
  background-size:cover; background-position:center;
}
.ais-thumb--lg{aspect-ratio:16/9;}

.ais-pop{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line); transition:opacity .2s;}
.ais-pop:hover{opacity:0.7;}
.ais-catbtn{
  display:flex; align-items:center; justify-content:space-between; padding:11px 12px;
  border:none; background:transparent; border-radius:9px; cursor:pointer; font-size:15px;
  color:var(--ink-soft); text-align:left; width:100%; transition:background-color .2s, color .2s;
}
.ais-catbtn:hover{background:var(--surface-2); color:var(--accent);}

/* 주제 필터 칩 */
.ais-pill{
  padding:9px 16px; border-radius:999px; cursor:pointer; font-size:14.5px; font-weight:600;
  white-space:nowrap; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  transition:all .2s ease;
}
.ais-pill:hover{border-color:var(--accent); color:var(--accent);}
.ais-pill.is-active{border-color:var(--accent); background:var(--accent); color:#fff;}

/* ============================================================
   푸터
   ============================================================ */
.ais-footer{background:var(--ink); color:#fff;}
.ais-foot-grid{padding:56px 28px 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
.ais-foot-head{font-size:13px; font-weight:700; color:rgba(255,255,255,0.45); margin-bottom:16px; letter-spacing:0.03em;}
.ais-foot-col{display:flex; flex-direction:column; gap:11px; font-size:14.5px;}
.ais-foot-link{color:rgba(255,255,255,0.78); transition:color .2s;}
.ais-foot-link:hover{color:#fff;}
.ais-foot-bottom{border-top:1px solid rgba(255,255,255,0.12);}
.ais-foot-bottom-inner{padding:20px 28px; font-size:13px; color:rgba(255,255,255,0.45);}

/* ============================================================
   본문(게시글) 정독 스타일
   ============================================================ */
.ais-progress{position:fixed; top:0; left:0; right:0; height:4px; background:transparent; z-index:90;}
.ais-progress-bar{height:100%; width:0; background:var(--accent); transition:width .12s linear;}

.prose p{font-family:var(--serif); font-size:20px; line-height:1.95; color:#2A241D; margin:0 0 26px; letter-spacing:-0.003em; text-wrap:pretty;}
.prose h2{font-family:var(--serif); font-weight:700; font-size:30px; line-height:1.4; letter-spacing:-0.015em; color:var(--ink); margin:54px 0 20px; scroll-margin-top:90px;}
.prose h3{font-family:var(--serif); font-weight:600; font-size:23px; line-height:1.45; color:var(--ink); margin:38px 0 14px; scroll-margin-top:90px;}
.prose strong{font-weight:700; color:var(--ink);}
.prose a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--accent-soft);}
.prose ul,.prose ol{margin:0 0 26px; padding-left:0; list-style:none;}
.prose li{font-family:var(--serif); font-size:19px; line-height:1.85; color:#33291F; margin:0 0 14px; padding-left:30px; position:relative;}
.prose li::before{content:''; position:absolute; left:6px; top:14px; width:7px; height:7px; border-radius:50%; background:var(--accent);}
.prose ol{counter-reset:ais-ol;}
.prose ol li{counter-increment:ais-ol;}
.prose ol li::before{content:counter(ais-ol); top:2px; left:0; width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-family:'Pretendard',sans-serif; font-size:12px; font-weight:700; display:grid; place-items:center;}
.prose img{border-radius:14px; margin:30px 0; border:1px solid var(--line);}
.prose blockquote{
  margin:34px 0; padding:24px 30px; background:var(--surface); border-left:4px solid var(--accent);
  border-radius:0 14px 14px 0; box-shadow:0 1px 2px rgba(20,30,50,.04);
}
.prose blockquote p{margin:0; font-size:22px; line-height:1.7; color:var(--ink); font-weight:600;}
.prose figure{margin:30px 0;}
.prose .wp-block-table{margin:30px 0; overflow-x:auto;}
.prose table{width:100%; border-collapse:collapse; font-family:'Pretendard',sans-serif; font-size:15px;}
.prose th,.prose td{border:1px solid var(--line); padding:12px 14px; text-align:left; line-height:1.6;}
.prose th{background:var(--surface-2); font-weight:700; color:var(--ink);}
.prose td{color:var(--ink-soft);}

/* 목차 (TOC) */
.ais-toc-nav{display:flex; flex-direction:column; gap:3px; border-left:2px solid var(--line); max-height:calc(100vh - 220px); overflow-y:auto;}
.ais-toc-link{font-size:14.5px; line-height:1.5; color:var(--ink-soft); padding:7px 0 7px 16px; margin-left:-2px; border-left:2px solid transparent; transition:color .2s, border-color .2s;}
.ais-toc-link:hover,.ais-toc-link.is-active{color:var(--accent); border-left-color:var(--accent);}
.ais-save-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px; height:46px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:11px;
  cursor:pointer; font-size:15px; font-weight:700; transition:all .2s;
}
.ais-save-btn.is-saved{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-soft);}

.ais-related{
  display:flex; gap:18px; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:20px; box-shadow:0 1px 2px rgba(20,30,50,.04); transition:transform .2s, box-shadow .2s;
}
.ais-related:hover{transform:translateY(-3px); box-shadow:0 16px 32px -18px rgba(36,31,26,.26);}

/* ============================================================
   정책/소개 페이지
   ============================================================ */
.ais-page-prose{max-width:760px; margin:0 auto;}
.ais-page-prose h2{font-family:var(--serif); font-weight:700; font-size:26px; line-height:1.4; color:var(--ink); margin:44px 0 16px;}
.ais-page-prose h3{font-family:var(--serif); font-weight:600; font-size:20px; color:var(--ink); margin:32px 0 12px;}
.ais-page-prose p{font-size:17px; line-height:1.9; color:var(--ink-soft); margin:0 0 20px;}
.ais-page-prose ul,.ais-page-prose ol{margin:0 0 22px; padding-left:24px; color:var(--ink-soft); font-size:17px; line-height:1.9;}
.ais-page-prose li{margin:0 0 8px;}
.ais-page-prose a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;}
.ais-page-prose strong{color:var(--ink); font-weight:700;}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:980px){
  .ais-hero-grid{grid-template-columns:1fr !important; gap:40px !important;}
  .ais-main-grid{grid-template-columns:1fr !important; gap:40px !important;}
  .ais-aside{position:static !important;}
  .ais-post-grid{grid-template-columns:1fr !important; gap:0 !important;}
  .ais-toc-aside{display:none !important;}
  .ais-newsletter-grid{grid-template-columns:1fr !important; gap:24px !important;}
}
@media (max-width:860px){
  .ais-nav{display:none;}
}
@media (max-width:1000px){
  .ais-feed-grid{grid-template-columns:1fr 1fr !important;}
}
@media (max-width:760px){
  .ais-foot-grid{grid-template-columns:1fr 1fr !important; gap:32px !important;}
  .ais-related-grid{grid-template-columns:1fr !important;}
}
@media (max-width:620px){
  .ais-feed-grid{grid-template-columns:1fr !important;}
}

/* 페이지네이션 */
.ais .pagination,.ais .nav-links{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.ais .page-numbers{
  display:inline-grid; place-items:center; min-width:42px; height:42px; padding:0 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  color:var(--ink-soft); font-size:15px; font-weight:600; transition:all .2s;
}
.ais a.page-numbers:hover{border-color:var(--accent); color:var(--accent);}
.ais .page-numbers.current{background:var(--accent); border-color:var(--accent); color:#fff;}
.ais .page-numbers.dots{border:none; background:transparent;}
@media (max-width:600px){
  .ais-wrap{padding:0 18px;}
  .ais-hero h1{font-size:40px !important;}
  .ais-post-h1{font-size:34px !important;}
  .ais-foot-grid{grid-template-columns:1fr !important;}
  .ais-newsletter-card{padding:32px 24px !important;}
}