/*
Theme Name: 오늘의 생활이야기
Theme URI: https://example.com
Author: 오늘의 생활이야기
Author URI: https://example.com
Description: 유튜브 쇼츠 <오늘의 생활재판> 사연 확장 글과 생활법률 해설, 살림·반려동물·텃밭 생활정보, 쿠팡파트너스 추천제품을 담는 55세 이상 모바일 독자 우선 매거진형 워드프레스 테마입니다.
Version: 1.3.7
Requires at least: 6.4
Requires PHP: 8.2
Tested up to: 6.6
Text Domain: onul-life-story
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================
   0. CSS 변수 (사이트 색상 - 인수인계 문서 5번 기준)
   ========================================================= */
:root{
  color-scheme:light only;
  --oln-navy:#071b3e;
  --oln-navy-2:#0d2b5c;
  --oln-gold:#f2b923;
  --oln-body:#172033;
  --oln-bg:#fdfbf6;
  --oln-card-bg:#ffffff;
  --oln-border:#e5e1d6;
  --oln-muted:#5b6478;
  --oln-focus:#1a73e8;
  --oln-radius:14px;
  --oln-max-width:920px;
  --oln-gap:20px;
}

/* =========================================================
   1. 기본 리셋 및 접근성 기준
   ========================================================= */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--oln-bg);
  color:var(--oln-body);
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--oln-navy-2);text-decoration:underline;text-decoration-thickness:1px;}
a:hover{color:var(--oln-gold);}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--oln-focus);
  outline-offset:2px;
}
h1,h2,h3,h4{
  color:var(--oln-navy);
  line-height:1.35;
  margin:0 0 .6em;
}
h1{font-size:clamp(28px,6vw,38px);}
h2{font-size:clamp(23px,4.5vw,30px);}
h3{font-size:clamp(20px,3.6vw,24px);}
p{margin:0 0 1.1em;}
button, input, select, textarea{font-family:inherit;font-size:17px;}

/* 스킵 링크 (키보드 접근성) */
.oln-skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--oln-gold);
  color:var(--oln-navy);
  padding:12px 18px;
  font-weight:700;
  z-index:1000;
  border-radius:0 0 10px 0;
}
.oln-skip-link:focus{left:0;}

/* =========================================================
   2. 레이아웃 컨테이너
   ========================================================= */
.oln-container{
  width:100%;
  max-width:var(--oln-max-width);
  margin:0 auto;
  padding:0 18px;
}
.oln-container--wide{
  max-width:1220px;
}
.oln-section{padding:36px 0;}
.oln-section--alt{background:#fff;}

/* =========================================================
   3. 헤더
   ========================================================= */
.oln-site-header{
  background:var(--oln-navy);
  color:#fff;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.oln-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  gap:12px;
  max-width:var(--oln-max-width);
  margin:0 auto;
}
.oln-logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:20px;
}
.oln-logo img{max-height:44px;width:auto;border-radius:8px;}
.oln-logo:hover{color:var(--oln-gold);}
.oln-menu-toggle{
  display:none;
  background:var(--oln-gold);
  color:var(--oln-navy);
  border:0;
  border-radius:10px;
  padding:12px 16px;
  font-weight:700;
  font-size:17px;
  cursor:pointer;
}
.oln-primary-nav{width:100%;}
.oln-primary-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  margin:10px 0 0;
  padding:0;
}
.oln-primary-nav a{
  display:block;
  color:#fff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
  font-size:17px;
}
.oln-primary-nav a:hover,
.oln-primary-nav a:focus-visible{background:var(--oln-navy-2);color:var(--oln-gold);}
.oln-primary-nav .current-menu-item > a{background:var(--oln-gold);color:var(--oln-navy);}

@media (max-width:680px){
  .oln-menu-toggle{display:inline-block;}
  .oln-primary-nav{display:none;}
  .oln-primary-nav.is-open{display:block;}
  .oln-primary-nav ul{flex-direction:column;}
  .oln-primary-nav a{padding:14px 16px;font-size:18px;}
}

/* =========================================================
   4. 히어로 / 첫 화면
   ========================================================= */
.oln-hero{
  background:linear-gradient(160deg,var(--oln-navy) 0%,var(--oln-navy-2) 100%);
  color:#fff;
  padding:44px 0 48px;
}
.oln-hero h1{color:#fff;}
.oln-hero p{color:#dbe3f3;font-size:19px;}
.oln-hero .oln-badge{
  display:inline-block;
  background:var(--oln-gold);
  color:var(--oln-navy);
  font-weight:800;
  font-size:14px;
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:14px;
}

/* =========================================================
   5. 버튼
   ========================================================= */
.oln-btn{
  display:inline-block;
  background:var(--oln-gold);
  color:var(--oln-navy);
  font-weight:800;
  font-size:18px;
  padding:14px 22px;
  border-radius:12px;
  text-decoration:none;
  border:2px solid transparent;
  min-height:48px;
  line-height:1.3;
}
.oln-btn:hover{background:#ffcf4f;color:var(--oln-navy);}
.oln-btn--ghost{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.6);
}
.oln-btn--ghost:hover{border-color:var(--oln-gold);color:var(--oln-gold);}
.oln-btn--outline-navy{
  background:transparent;
  color:var(--oln-navy);
  border:2px solid var(--oln-navy);
}
.oln-btn--block{display:block;width:100%;text-align:center;}

/* =========================================================
   6. 카테고리 바로가기 카드
   ========================================================= */
.oln-section-desc{
  color:var(--oln-muted);
  font-size:16px;
  margin:-6px 0 18px;
}
.oln-cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (max-width:780px){.oln-cat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.oln-cat-grid{grid-template-columns:1fr;}}
.oln-cat-card{
  display:block;
  background:var(--oln-card-bg);
  border:1px solid var(--oln-border);
  border-radius:var(--oln-radius);
  padding:20px;
  text-decoration:none;
  color:var(--oln-navy);
  box-shadow:0 1px 4px rgba(7,27,62,.06);
}
.oln-cat-card:hover{border-color:var(--oln-gold);}
.oln-cat-card .oln-cat-emoji{font-size:30px;display:block;margin-bottom:8px;}
.oln-cat-card strong{display:block;font-size:19px;margin-bottom:4px;}
.oln-cat-card span{color:var(--oln-muted);font-size:15px;}

/* =========================================================
   7. 글 카드 / 목록
   ========================================================= */
.oln-post-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
@media (max-width:600px){.oln-post-grid{grid-template-columns:1fr;}}

.oln-card{
  background:var(--oln-card-bg);
  border:1px solid var(--oln-border);
  border-radius:var(--oln-radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 4px rgba(7,27,62,.06);
}
.oln-card__thumb{aspect-ratio:16/10;overflow:hidden;background:#eef1f7;}
.oln-card__thumb img{width:100%;height:100%;object-fit:cover;}
.oln-card__body{padding:16px 18px 20px;}
.oln-card__cat{
  display:inline-block;
  background:#eef3ff;
  color:var(--oln-navy-2);
  font-size:13px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:8px;
}
.oln-card__title{font-size:20px;margin:0 0 8px;}
.oln-card__title a{color:var(--oln-navy);text-decoration:none;}
.oln-card__title a:hover{color:var(--oln-gold);}
.oln-card__excerpt{color:var(--oln-muted);font-size:16px;margin:0;}
.oln-card__meta{color:var(--oln-muted);font-size:14px;margin-top:10px;}

.oln-feature-card{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  background:var(--oln-card-bg);
  border:1px solid var(--oln-border);
  border-radius:var(--oln-radius);
  overflow:hidden;
  box-shadow:0 2px 8px rgba(7,27,62,.08);
}
@media (min-width:640px){.oln-feature-card{grid-template-columns:1.1fr 1fr;}}
.oln-feature-card__thumb{aspect-ratio:16/10;background:#eef1f7;overflow:hidden;}
.oln-feature-card__thumb img{width:100%;height:100%;object-fit:cover;}
.oln-feature-card__body{padding:20px 22px 24px;}

/* =========================================================
   8. 설명 배너 ("사연은 재미있게, 법률 해설은 정확하게")
   ========================================================= */
.oln-banner{
  background:var(--oln-navy-2);
  color:#fff;
  border-radius:var(--oln-radius);
  padding:26px 24px;
  text-align:center;
}
.oln-banner h2{color:var(--oln-gold);}
.oln-banner p{color:#e3e9f7;font-size:17px;margin:0;}

/* =========================================================
   9. 유튜브 채널 연결 + 지연로딩 임베드
   ========================================================= */
.oln-youtube-embed{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  border-radius:var(--oln-radius);
  overflow:hidden;
  cursor:pointer;
}
.oln-youtube-embed img{width:100%;height:100%;object-fit:cover;opacity:.85;}
.oln-youtube-embed__play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.oln-youtube-embed__play span{
  width:64px;height:64px;border-radius:50%;
  background:rgba(242,185,35,.95);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--oln-navy);
}
.oln-youtube-embed iframe{width:100%;height:100%;border:0;position:absolute;inset:0;}

/* =========================================================
   10. 본문 (단일 글)
   ========================================================= */
.oln-entry{
  max-width:720px;
  margin:0 auto;
  font-size:18px;
}
.oln-entry__header{margin-bottom:18px;}
.oln-entry__meta{color:var(--oln-muted);font-size:15px;}
.oln-entry__content h2{margin-top:1.4em;}
.oln-entry__content ul,.oln-entry__content ol{padding-left:1.4em;}
.oln-entry__content blockquote{
  margin:1.4em 0;
  padding:14px 18px;
  background:#f4f0e2;
  border-left:5px solid var(--oln-gold);
  border-radius:0 10px 10px 0;
}
.oln-legal-disclaimer{
  margin-top:28px;
  padding:16px 18px;
  background:#fff8e6;
  border:1px solid #f0dca0;
  border-radius:12px;
  font-size:15.5px;
  color:#5b4a12;
}
.oln-legal-disclaimer strong{color:#3d2f00;}

/* =========================================================
   11. 검색 폼
   ========================================================= */
.oln-searchform{display:flex;gap:8px;flex-wrap:wrap;}
.oln-searchform input[type="search"]{
  flex:1;
  min-width:0;
  padding:12px 14px;
  border:2px solid var(--oln-border);
  border-radius:10px;
}
.oln-searchform button{
  background:var(--oln-navy);
  color:#fff;
  border:0;
  padding:12px 18px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}

/* =========================================================
   12. 푸터
   ========================================================= */
.oln-site-footer{
  background:var(--oln-navy);
  color:#dbe3f3;
  margin-top:40px;
  padding:32px 0 24px;
  font-size:15px;
}
.oln-footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media (min-width:640px){.oln-footer-grid{grid-template-columns:2fr 1fr 1fr;}}
.oln-footer-grid h3{color:var(--oln-gold);font-size:17px;}
.oln-footer-nav{list-style:none;margin:0;padding:0;}
.oln-footer-nav li{margin-bottom:8px;}
.oln-footer-nav a{color:#dbe3f3;text-decoration:none;}
.oln-footer-nav a:hover{color:var(--oln-gold);}
.oln-footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:22px;
  padding-top:16px;
  font-size:13.5px;
  color:#a9b4cc;
}
.oln-footer-disclaimer{margin-top:10px;line-height:1.6;}

/* =========================================================
   13. 유틸리티
   ========================================================= */
.oln-visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.oln-mt-0{margin-top:0;}
.oln-text-center{text-align:center;}
.oln-empty-state{
  text-align:center;
  padding:40px 20px;
  color:var(--oln-muted);
}

/* WordPress 코어 정렬 클래스 최소 지원 */
.alignleft{float:left;margin:0 18px 12px 0;}
.alignright{float:right;margin:0 0 12px 18px;}
.aligncenter{display:block;margin:0 auto 12px;}

/* =========================================================
   9. 본문 + 사이드바 레이아웃 (글/목록 페이지)
   ========================================================= */
.oln-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:56px;
  align-items:start;
}
.oln-layout__main{min-width:0;}
.oln-layout__aside{
  position:sticky;
  top:20px;
}
@media (max-width:900px){
  .oln-layout{grid-template-columns:1fr;}
  .oln-layout__aside{position:static;}
}

/* =========================================================
   9-1. 카테고리 아카이브: 다른 하위 카테고리 바로가기
   글이 적어 목록 아래가 비어 보일 때, 같은 그룹의 다른 하위
   카테고리를 카드로 보여줍니다. (홈페이지 oln-cat-grid 재사용)

   기본(좁은 화면·태블릿 이하)은 본문 아래에 카드 그리드로 표시되고,
   충분히 넓은 화면(1000px 이상)에서는 좌측의 얇은 세로 탭 목록으로
   바뀌어 스크롤해도 함께 따라오는 사이드바가 됩니다.
   ========================================================= */
.oln-archive-subcats{
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--oln-border);
}
.oln-archive-subcats__heading{
  font-size:20px;
  margin:0 0 16px;
  color:var(--oln-navy);
}
.oln-archive-subcats .oln-cat-grid{
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:520px){
  .oln-archive-subcats .oln-cat-grid{grid-template-columns:1fr;}
}
.oln-cat-card.is-current{
  border-color:var(--oln-gold);
  background:#fffaf0;
}

/* 상위 카테고리(생활재판/생활정보) 탭보다 하위 카테고리 목록이
   시각적으로 아래에 있던 문제를 해결: 넓은 화면에서는 좌측 사이드바로
   이동시키고, 스크롤에 따라 함께 움직이도록 고정(sticky)합니다. */
.oln-layout.oln-layout--with-subcats{
  grid-template-columns:200px minmax(0,1fr) 300px;
  grid-template-areas:"subcats main aside";
}
.oln-layout--with-subcats .oln-layout__main{grid-area:main;}
.oln-layout--with-subcats .oln-layout__aside{grid-area:aside;}
.oln-layout--with-subcats .oln-archive-subcats{grid-area:subcats;}

@media (min-width:1000px){
  .oln-layout--with-subcats .oln-archive-subcats{
    margin-top:0;
    padding-top:0;
    border-top:none;
    position:sticky;
    top:20px;
    align-self:start;
  }
  .oln-layout--with-subcats .oln-archive-subcats__heading{
    font-size:14px;
    margin:0 0 10px;
  }
  .oln-layout--with-subcats .oln-archive-subcats .oln-cat-grid{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .oln-layout--with-subcats .oln-archive-subcats .oln-cat-card{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
  }
  .oln-layout--with-subcats .oln-archive-subcats .oln-cat-card .oln-cat-emoji{
    font-size:18px;
    margin:0;
  }
  .oln-layout--with-subcats .oln-archive-subcats .oln-cat-card strong{
    font-size:14px;
    margin:0;
  }
  .oln-layout--with-subcats .oln-archive-subcats .oln-cat-card > span:not(.oln-cat-emoji){
    display:none;
  }
}

@media (max-width:999px){
  .oln-layout.oln-layout--with-subcats{
    grid-template-columns:minmax(0,1fr) 300px;
    grid-template-areas:"main aside" "subcats subcats";
  }
}
@media (max-width:900px){
  .oln-layout.oln-layout--with-subcats{
    grid-template-columns:1fr;
    grid-template-areas:"main" "subcats" "aside";
  }
}

/* 사이드바(다른 하위 카테고리 바로가기)가 활성화되면 본문 영역이 좁아지므로,
   화면이 충분히 넓지 않으면(1400px 미만) 글 목록을 1열로 표시해 카드가
   비좁게 찌그러지는 것을 방지합니다. */
.oln-layout--with-subcats .oln-post-grid{
  grid-template-columns:1fr;
}
@media (min-width:1400px){
  .oln-layout--with-subcats .oln-post-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* =========================================================
   10. 광고 자리 (세로형 placeholder + 실제 위젯 공통)
   ========================================================= */
.oln-ad-slot{
  border:2px dashed var(--oln-border);
  border-radius:var(--oln-radius);
  background:#faf8f2;
  color:var(--oln-muted);
  text-align:center;
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.oln-ad-slot--sidebar{
  min-height:480px;
  width:100%;
}
.oln-ad-slot__icon{font-size:28px;margin-bottom:10px;}
.oln-ad-slot__label{
  font-weight:700;
  color:var(--oln-navy);
  margin-bottom:8px;
}
.oln-ad-slot p{margin:4px 0;font-size:13px;}
.oln-ad-slot__hint{font-size:12px;opacity:.8;}
.oln-ad-widget{margin-bottom:20px;}
.oln-ad-widget__title{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--oln-muted);
  margin:0 0 8px;
}
.oln-ad-widget img{max-width:100%;height:auto;}

/* =========================================================
   10-1. 본문 중간/하단 기본 광고 (가로형, 매칭 상품 없을 때 대체)
   ========================================================= */
.oln-content-ad{
  margin:28px 0;
  text-align:center;
  clear:both;
}
.oln-content-ad__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--oln-muted);
  margin:0 0 8px;
}
.oln-content-ad__banner img{
  max-width:100%;
  height:auto;
  display:inline-block;
}

/* =========================================================
   10-2. 본문 중간 장면 사진 + 설명 (좌우 교차 배치)
   모바일 기본은 사진이 위, 글이 아래로 쌓이고,
   640px 이상에서만 좌/우로 나란히 배치됩니다.
   ========================================================= */
.oln-media-row{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:32px 0;
  align-items:center;
  clear:both;
}
.oln-media-row__figure{
  margin:0;
  width:100%;
}
.oln-media-row__figure img{
  width:100%;
  height:auto;
  border-radius:var(--oln-radius);
  display:block;
}
.oln-media-row__figure figcaption{
  margin-top:8px;
  font-size:13px;
  color:var(--oln-muted);
  text-align:center;
}
.oln-media-row__text{
  width:100%;
}
.oln-media-row__text > *:first-child{margin-top:0;}
.oln-media-row__text > *:last-child{margin-bottom:0;}
@media (min-width:640px){
  .oln-media-row{
    flex-direction:row;
    align-items:flex-start;
    gap:28px;
  }
  .oln-media-row__figure{width:42%;flex:0 0 42%;}
  .oln-media-row__text{width:58%;flex:1;}
  .oln-media-row--reverse{flex-direction:row-reverse;}
}

/* =========================================================
   11. 생활재판 글 안의 추천상품(카테고리 자동 매칭) 광고 블록
   ========================================================= */
.oln-related-products{
  border:1px solid var(--oln-border);
  border-radius:var(--oln-radius);
  background:#fff;
  padding:20px;
  margin:28px 0;
  clear:both;
}
.oln-related-products__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--oln-muted);
  margin:0 0 6px;
}
.oln-related-products__heading{
  margin:0 0 14px;
  font-size:19px;
  color:var(--oln-navy);
}
.oln-related-products__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
}
.oln-related-product{
  display:block;
  border:1px solid var(--oln-border);
  border-radius:10px;
  padding:12px;
  text-align:center;
  text-decoration:none;
  color:inherit;
}
.oln-related-product:hover{border-color:var(--oln-gold);}
.oln-related-product img{
  width:100%;
  height:110px;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:8px;
}
.oln-related-product__name{
  display:block;
  font-weight:700;
  font-size:14px;
  color:var(--oln-navy);
}
.oln-related-product__tagline{
  display:block;
  font-size:12px;
  color:var(--oln-muted);
  margin-top:4px;
}
.oln-related-product__btn{
  display:inline-block;
  margin-top:10px;
  background:var(--oln-gold);
  color:var(--oln-navy);
  font-weight:700;
  font-size:13px;
  padding:6px 12px;
  border-radius:8px;
}