/* =========================================================
   참편한뱅크 — 에디토리얼 문서형 디자인
   확정 시안(design/v0-mockup.html)을 GeneratePress 실제 마크업에 이식.
   대상 클래스는 실제 페이지(curl)로 확인함:
   .site-header / .main-navigation / .site-content / .content-area /
   .site-main / .page-header / .entry-title / .entry-content /
   .entry-summary / .entry-meta / .post-navigation / .site-footer .site-info
   ========================================================= */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  /* 두 개의 원천 색 (시안 확정값) */
  --c-primary: #1f3a6e;
  --c-accent:  #c2410c;

  --c-primary-strong: color-mix(in srgb, var(--c-primary) 85%, black);
  --c-primary-soft:   color-mix(in srgb, var(--c-primary) 12%, white);
  --c-primary-line:   color-mix(in srgb, var(--c-primary) 22%, white);
  --c-primary-tint:   color-mix(in srgb, var(--c-primary) 6%, white);
  --c-accent-soft:    color-mix(in srgb, var(--c-accent) 12%, white);

  --c-ink:        #16181d;
  --c-ink-soft:   #45484f;
  --c-muted:      #6b7280;
  --c-muted-soft: #9aa1ab;
  --c-bg:         #ffffff;
  --c-bg-alt:     #f7f8fa;
  --c-border:     #e3e6ea;
  --c-border-soft:#eef0f3;

  --font-base: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --wrap: 1080px;      /* 헤더·목록·푸터 */
  --w-read: 760px;     /* 글 상세 읽기 폭 */
  --radius: 10px;
  --radius-sm: 6px;
}

/* ---------- 베이스 ---------- */
body{
  font-family: var(--font-base);
  font-size: 17px;
  line-height: 1.8;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%}
a{color:var(--c-primary)}
h1,h2,h3,h4,h5,h6{color:var(--c-ink);word-break:keep-all;text-wrap:balance}
p,li,td,th,figcaption,.entry-summary,.taxonomy-description{word-break:keep-all;text-wrap:pretty}

/* 컨테이너 폭 통일 (헤더·본문·푸터) */
.grid-container.container,
.site-header .inside-header.grid-container,
.main-navigation .inside-navigation.grid-container,
.site-footer .inside-site-info.grid-container{max-width:var(--wrap)}

/* ---------- 사이트 헤더 ---------- */
.site-header{border-bottom:1px solid var(--c-border);background:var(--c-bg)}
.site-branding .main-title{font-size:22px;font-weight:800;letter-spacing:-.01em}
.site-branding .main-title a{color:var(--c-ink)}
.main-navigation{background:transparent!important}
.main-navigation .main-nav ul{background:transparent}
.main-navigation .main-nav ul li a{
  color:var(--c-ink-soft);font-size:15px;font-weight:600;border-radius:var(--radius-sm);
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover>a{
  background:var(--c-primary-tint);color:var(--c-primary)!important;
}
.main-navigation .main-nav ul li[class*="current-menu-"]>a{
  background:var(--c-primary-soft)!important;color:var(--c-primary)!important;
}
/* 모바일 햄버거 토글: GeneratePress 의 범용 button{color:#fff} 규칙이 아이콘 색을
   흰색으로 덮어써 흰 배경에서 안 보이는 문제가 있어 명시적으로 다시 지정 */
.main-navigation .menu-toggle{color:var(--c-ink)!important;background:transparent!important}
.main-navigation .menu-toggle svg{fill:currentColor}

/* ---------- 목록 페이지 제목(카테고리/아카이브) ---------- */
.page-header{padding:24px 0 36px;border-bottom:1px solid var(--c-border);margin-bottom:8px}
.page-header .page-title{font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
.page-header .taxonomy-description{font-size:17px;line-height:1.8;color:var(--c-ink-soft);max-width:46em}

/* 카테고리 라벨 (영문 대문자, 시안 .cat-label 과 동일한 공용 클래스) */
.cat-label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-primary)}
.cat-label--accent{color:var(--c-accent)}
/* 단일 글 하단의 분류 링크(footer .cat-links, GeneratePress 기본 마크업)에도 동일 톤 적용.
   실제 카테고리명이 한글이라 영문 라벨(PHONE 등)로 치환은 되지 않음 — CSS 토큰만 이식. */
.cat-links a,.cat-links{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent);
}

/* ---------- 글 목록 (홈 최신 글 / 카테고리 아카이브 공통 — 가로 행 레이아웃) ----------
   시안 화면2의 .list-row 를 실제 GeneratePress 루프 마크업(article > .inside-article >
   .entry-header, .post-image, .entry-summary, footer.entry-meta)에 이식.
   .post-image 는 has_post_thumbnail() 일 때만 렌더링되므로 :has() 로 있을 때만 2열, 없으면 1열. */
.site-main{padding:8px 0 36px}
.site-main article.type-post{border-bottom:1px solid var(--c-border-soft);padding:24px 0}
.site-main article.type-post:first-of-type{border-top:1px solid var(--c-border-soft)}
.site-main .inside-article{display:block}
.site-main .inside-article:has(.post-image){
  display:grid;grid-template-columns:200px 1fr;column-gap:20px;align-items:start;
}
.site-main .post-image{grid-column:1;grid-row:1/4;aspect-ratio:1200/630;border-radius:var(--radius-sm);
  overflow:hidden;background:var(--c-bg-alt);place-self:stretch}
/* 컨테이너의 align-items:start 는 entry-header/entry-summary/footer 를 각 행 상단에 붙이려는
   의도인데, 같은 규칙이 3행을 모두 차지하는 .post-image 에도 적용되면서 이미지가
   aspect-ratio(=105px)만큼만 작게 그려지고 나머지 두 행 높이만큼 빈 공간이 남는 문제가
   실제로 있었다. align-self:stretch 만 주면 aspect-ratio 를 가진 그리드 아이템은 justify-self
   기본값(normal)이 stretch 대신 aspect-ratio 로 폭을 역산해버려(브라우저 스펙 동작) 이미지가
   열 밖으로 삐져나오는 2차 버그가 남는다 — place-self:stretch 로 폭·높이 둘 다 그리드 영역에
   맞추고 object-fit:cover 로 잘라낸다. */
/* 타이틀카드(titlecard.py)는 라벨·제목·메타를 전부 좌측 80px 여백에서 시작해 왼쪽에
   몰아 그린다. object-position 기본값(중앙)으로 자르면 좁은 목록 썸네일에서 제목 앞
   글자가 잘려나간다 — 왼쪽 기준으로 잘라 내용이 항상 보이게 한다. */
.site-main .post-image img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
.site-main .inside-article:has(.post-image) .entry-header{grid-column:2;grid-row:1}
.site-main .inside-article:has(.post-image) .entry-summary{grid-column:2;grid-row:2}
.site-main .inside-article:has(.post-image) footer.entry-meta{grid-column:2;grid-row:3}
.site-main .entry-header .cat-label{display:block;margin-bottom:6px}
.site-main .entry-title{font-size:19px;font-weight:700;line-height:1.4;margin:0 0 .3em}
.site-main .entry-title a{color:var(--c-ink)}
.site-main article.type-post:hover .entry-title a{color:var(--c-primary)}
.site-main .entry-header .entry-meta{font-size:12px;color:var(--c-muted-soft)}
.site-main .entry-summary p{font-size:15px;line-height:1.7;color:var(--c-muted);margin:.4em 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.site-main .entry-summary .read-more{font-weight:700;color:var(--c-accent)}
.site-main footer.entry-meta{margin-top:.6em;font-size:13px}

@media (max-width:560px){
  .site-main .inside-article:has(.post-image){grid-template-columns:110px 1fr;column-gap:14px}
}

/* ---------- 홈 히어로 + 주제별 총정리 허브 (mu-plugin 이 홈에서만 삽입) ---------- */
.site-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.home-hero{padding:48px 0 36px;border-bottom:1px solid var(--c-border)}
.home-hero__eyebrow{margin-bottom:16px}
.home-hero__title{font-size:clamp(28px,6vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 18px}
.home-hero__lead{font-size:17px;line-height:1.8;color:var(--c-ink-soft);max-width:42em;margin:0}
.hub-section{padding:36px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.section-head__title{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:0}
.section-head__note{font-size:14px;color:var(--c-muted);font-weight:400}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hub-link{display:block;border:1px solid var(--c-border);border-radius:var(--radius);padding:22px 20px;
  background:var(--c-bg);transition:border-color .15s,background .15s}
.hub-link:hover{border-color:var(--c-primary-line);background:var(--c-primary-tint);text-decoration:none}
.hub-link__label{display:block;margin-bottom:12px}
.hub-link__title{font-size:18px;font-weight:700;color:var(--c-ink);margin:0 0 8px}
.hub-link__desc{font-size:15px;line-height:1.7;color:var(--c-ink-soft);margin:0 0 14px}
.hub-link__more{font-size:14px;font-weight:700;color:var(--c-accent)}
@media (max-width:900px){.hub-grid{grid-template-columns:1fr}}

/* ---------- 글 상세: 읽기 폭 ---------- */
.single .inside-article,.single .comments-area{max-width:var(--w-read);margin-inline:auto}
.single .entry-title{font-size:clamp(30px,6vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-bottom:14px}
.single .entry-meta{font-size:14px;color:var(--c-muted)}
.single .entry-content{margin-top:1.4em}

/* 기준일 배지 (mu-plugin이 삽입) */
.cphbk-asof{display:flex;flex-wrap:wrap;gap:.4em;align-items:baseline;
  font-size:14px;color:var(--c-ink-soft);border-left:4px solid var(--c-accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:.7em 1em;background:var(--c-accent-soft);margin:0 0 1.8em}
.cphbk-asof-label{font-weight:700;color:var(--c-ink)}
.cphbk-asof-note{font-size:13px;color:var(--c-muted)}

/* 목차 (mu-plugin이 삽입) */
.cphbk-toc{background:var(--c-primary-tint);border:1px solid var(--c-primary-line);border-radius:var(--radius);
  padding:1.3em 1.4em;margin:0 0 2.2em}
.cphbk-toc-title{font-weight:800;letter-spacing:.02em;color:var(--c-primary-strong);margin:0 0 .6em;font-size:15px}
.cphbk-toc ol{margin:0;padding-left:1.2em;line-height:2}
.cphbk-toc li{font-size:15px;margin:0}
.cphbk-toc a{color:var(--c-ink-soft);font-weight:600;text-decoration:none}
.cphbk-toc a:hover{color:var(--c-primary);text-decoration:underline}

/* 본문 타이포 */
.entry-content h2{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:44px 0 16px;padding-top:10px}
.entry-content h3{font-size:19px;font-weight:700;margin:28px 0 8px}
.entry-content p{margin:0 0 18px}
.entry-content ol,.entry-content ul{margin:0 0 18px;padding-left:22px;line-height:1.9}
.entry-content li{margin-bottom:8px}
.entry-content blockquote{margin:30px 0;padding:20px 24px;border-left:4px solid var(--c-primary);
  background:var(--c-primary-tint);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:18px;line-height:1.7;color:var(--c-primary-strong);font-weight:600}

/* 본문 표 */
.entry-content table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15.5px}
.entry-content thead th{background:var(--c-primary);color:#fff;font-weight:700;text-align:left;padding:.7em .8em}
.entry-content td,.entry-content tbody th{border-bottom:1px solid var(--c-border);padding:.7em .8em;vertical-align:top}
.entry-content tbody tr:nth-child(even){background:var(--c-bg-alt)}

/* FAQ 형태 (h2 "자주 묻는 질문" 뒤에 h3/p 로 이어지는 실제 마크업 그대로 스타일) */
.entry-content h3{position:relative;padding-left:22px}
.entry-content h3::before{content:"Q";position:absolute;left:0;top:0;color:var(--c-accent);font-weight:800}
.entry-content h3+p{padding-left:22px;font-size:15px;line-height:1.75;color:var(--c-ink-soft)}

/* 이전/다음 글 */
.post-navigation{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;padding-top:30px;
  border-top:1px solid var(--c-border)}
.post-navigation .nav-previous,.post-navigation .nav-next{
  border:1px solid var(--c-border);border-radius:var(--radius);padding:16px 18px;
}
.post-navigation .nav-next{text-align:right}
.post-navigation a{color:var(--c-ink);font-weight:700;font-size:16px;line-height:1.45}
.post-navigation .nav-previous:hover,.post-navigation .nav-next:hover{
  border-color:var(--c-primary-line);background:var(--c-primary-tint)}

/* ---------- 푸터 ---------- */
/* generate_copyright 를 mu-plugin 에서 항상 비워 이 막대는 내용 없이 남는다 —
   아래 .cphbk-footer 와 겹쳐 보이지 않도록 숨긴다(참고: PHP 9번 필터). */
.site-footer .site-info{display:none}

/* 사업자 정보 푸터 (mu-plugin wp_footer 훅이 출력, .site-wrap 재사용으로 좌우 여백 확보) */
.cphbk-footer{margin-top:20px;border-top:1px solid var(--c-border);background:var(--c-bg-alt);padding:40px 0 48px}
.cphbk-footer-links{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.cphbk-footer-links a{font-size:14px;font-weight:600;color:var(--c-ink-soft)}
.cphbk-footer-biz{font-size:14px;line-height:1.9;color:var(--c-muted)}
.cphbk-footer-biz strong{color:var(--c-ink-soft);font-weight:700}
.cphbk-footer-note{margin-top:18px;padding-top:18px;border-top:1px solid var(--c-border);font-size:13px;color:var(--c-muted)}

/* ---------- 반응형 (360px 까지 가로 스크롤 없음) ---------- */
@media (max-width:600px){
  body{font-size:16px}
  .entry-content table{display:block;overflow-x:auto}
  .post-navigation{grid-template-columns:1fr}
  .post-navigation .nav-next{text-align:left}
  .entry-content h2{font-size:22px}
}

/* 관련 글 */
.cphbk-related{margin:3em 0 0;padding:1.4em 0 0;border-top:2px solid var(--c-primary)}
.cphbk-related-title{margin:0 0 .8em;font-weight:700;font-size:15px;color:var(--c-primary);
  letter-spacing:.02em}
.cphbk-related ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.cphbk-related li{margin:0}
.cphbk-related a{display:block;padding:.75em .9em;border-radius:6px;text-decoration:none;
  transition:background .12s}
.cphbk-related a:hover{background:var(--c-bg-alt,#f7f8fa)}
.cphbk-rel-title{display:block;font-weight:600;font-size:15.5px;color:var(--c-ink,#16181d);
  line-height:1.5;margin-bottom:.15em}
.cphbk-related a:hover .cphbk-rel-title{color:var(--c-primary)}
.cphbk-rel-desc{display:block;font-size:13.5px;color:var(--c-muted,#6b7280);line-height:1.6}
@media (max-width:600px){.cphbk-related ul{grid-template-columns:1fr}}