/*
Theme Name: Toss Tech Child
Theme URI: https://blog-toss2.seos.kr
Description: toss.tech 스타일 블로그를 위한 GeneratePress 자식 테마. GP Premium Elements + GenerateBlocks 구성에 필요한 토큰 CSS(01~05) 인큐와 GP 구조 브리지 스타일을 제공한다.
Author: blog-toss2
Template: generatepress
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: toss-tech-child
*/

/* ==========================================================================
   브리지 스타일 (Bridge) — [전역 스타일 관리 위치]
   --------------------------------------------------------------------------
   · 이 사이트의 전역 스타일은 세 곳에서 관리된다.
     1) GeneratePress 테마 기능 (단일 소스)
        - 색상   : 외모 > 사용자 정의 > 색상 > 글로벌 컬러 (7 표준 색 + 보조색)
                   헤더/푸터 배경, 본문/링크 색도 색상 패널에서
        - 폰트   : 외모 > 폰트 라이브러리 + 사용자 정의 > 타이포그래피
                   ('HTML' 요소 폰트 크기 = 전체 타입 스케일 비례 조절)
        - 로고   : 외모 > 사용자 정의 > 사이트 아이덴티티 (site-logo 블록)
     2) assets/css/01-tokens.css ~ 05-pages.css : 컴포넌트 스케일/간격/레이아웃
        토큰 (색상·폰트 패밀리는 GP 참조, 크기는 rem)
     3) 이 파일(style.css) : GeneratePress·코어 블록과 2)을 잇는 브리지 +
        kdr- 접두사의 자체 컴포넌트 (수정은 여기서만)
   · 전역 스타일 추가/수정은 이 파일에서만 한다. 색상은 반드시
     GP 글로벌 컬러 변수(var(--*))를 참조한다 (hex 직접 기입 금지).
   · PHP/JS 등 추가 코드는 자식 테마에 넣지 않고 Fluent Snippets에서 관리한다.
     (현재 에디터 캔버스 CSS 주입 스니펫 1개뿐 — 프론트 스타일 무관)
   · 자체 추가 클래스는 kdr- 접두사를 사용해 sample 디자인 클래스
     (post-card, hero 등)와 명확히 구분한다.
   · 캐시 갱신: functions.php의 KDR_CHILD_VERSION을 함께 올린다.
   ========================================================================== */

/* ------------------------------------------------------------------
   0. 컬러 토큰 → GP 글로벌 컬러 표준 변수 별칭
   ------------------------------------------------------------------
   핵심 색은 GP 표준 7슬러그(accent/contrast/base 계열)가 단일 소스다.
   컴포넌트 CSS의 토스 토큰명(--color-primary 등)은 아래 별칭으로 해석되므로,
   커스터마이저에서 Accent 하나를 바꾸면 링크·버튼·포인트가 함께 바뀐다.
   (보조색 hover/active/danger/border 등은 글로벌 컬러 팔레트에 직접 정의)
   ------------------------------------------------------------------ */
:root {
  --color-primary: var(--accent);        /* 토스 블루 #3182f6 */
  --text-heading:  var(--contrast);      /* grey900 #191f28 */
  --text-strong:   var(--contrast-2);    /* grey800 #333d4b */
  --text-tertiary: var(--contrast-3);    /* grey500 #8b95a1 */
  --bg-muted:      var(--base);          /* grey100 #f2f4f6 */
  --bg-subtle:     var(--base-2);        /* grey50 #f9fafb */
  --bg-default:    var(--base-3);        /* #ffffff */}

/* ------------------------------------------------------------------
   1. GP 래퍼 중립화 — 레이아웃 박스는 Elements의 .page-wrap 이 담당
   (body 폰트/색상은 GP 타이포그래피·글로벌 컬러가 출력한다)
   ------------------------------------------------------------------ */

/* GP의 #page > #content(site-content) > #primary(content-area) > main(site-main)
   을 시각적으로 투명하게 만들어 sample 컨테이너가 곧장 레이아웃을 갖도록 함 */
body #content.site-content,
body #primary.content-area,
body main.site-main {
  display: contents;}

/* GP 사이드바/푸터 위젯 셸은 사용하지 않음 */
#right-sidebar, #left-sidebar, .site-footer .footer-widgets { display: none;}

/* 사이드바 위젯 배경은 GP 색상 > 사이드바 위젯 패널이 담당한다
   (sidebar_widget_background_color = var(--base) 설정됨 — grey100 디자인값) */

/* ------------------------------------------------------------------
   2. 코어 블록 정규화 — sample BEM 클래스와의 갭 메우기
   ------------------------------------------------------------------ */
/* 코어 group 블록이 클래식 테마에서 삽입하는 내부 래퍼를 투명화해
   .post-card / .post-card__body 의 flex 가 곧장 적용되도록 한다 */
.post-card > .wp-block-group__inner-container,
.post-card__body > .wp-block-group__inner-container { display: contents;}

.post-card {
  /* sample: .post-card__link 의 flex 를 카드 자체에 적용
     (코어 쿼리 루프는 전체 카드를 감싸는 a 를 만들지 않음) */
  display: flex;
  align-items: flex-start;  /* 텍스트/이미지 시작선 일치 */
  gap: var(--space-9);
  width: 100%;}

.post-card__body { width: auto;}

.post-card__title { transition: color var(--transition-fast);}
.post-card__title a { color: inherit; text-decoration: none;}

/* sample: .post-card__link:hover 규칙의 등가 매핑 */
.post-card:hover .post-card__title { color: var(--color-primary);}
.post-card:hover .post-card__thumb img { transform: scale(1.2);}

/* 코어 post-excerpt: 내부 p 에 sample 카드 요약 스타일 적용 */
.wp-block-post-excerpt.post-card__excerpt { width: 100%;}
.wp-block-post-excerpt.post-card__excerpt .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
    margin: 0;}

/* 코어 featured image: figure 를 sample 썸네일 박스로 */
.wp-block-post-featured-image.post-card__thumb {
  margin: 0;
  padding: 0;
  max-width: none;}
.wp-block-post-featured-image.post-card__thumb a { display: block; width: 100%; height: 100%;}

/* 코어 post-title 기본 마진 제거 (sample 클래스가 마진 소유) */
.wp-block-post-title { margin: 0;}
.wp-block-post-title a { text-decoration: none;}

/* 코어 쿼리/목록 정규화 */
.wp-block-query { width: 100%;}
ul.wp-block-post-template { margin: 0; padding: 0; list-style: none;}

/* 코어 페이지네이션 → sample .pagination 매핑 */
nav.wp-block-query-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-8);}
nav.wp-block-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
    text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);}
nav.wp-block-query-pagination .page-numbers:hover { background-color: var(--bg-muted); color: var(--text-strong);}
nav.wp-block-query-pagination .page-numbers.current { background: var(--color-primary-bg); color: var(--color-primary);}

/* 콘텐츠 템플릿 래퍼(GP) 중립화 — .article-container 가 폭을 소유 */
article.dynamic-content-template { display: block;}

/* ------------------------------------------------------------------
   3. 댓글 (코어 폼 → sample 룩앤필)
   ------------------------------------------------------------------ */
.comments .comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;}

.comments .comment-form p { margin: 0;}

/* 댓글 폼 레이아웃: 이름/이메일/사이트를 한 줄 3열로, 나머지는 전체 폭 */
.comments .comment-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);}
.comments .comment-form .comment-form-comment,
.comments .comment-form .comment-form-cookies-consent,
.comments .comment-form .logged-in-as,
.comments .comment-form .form-submit { grid-column: 1 / -1;}
.comments .comment-form .form-submit { justify-self: end;}

.comments .comment-form textarea,
.comments .comment-form input[type="text"],
.comments .comment-form input[type="email"],
.comments .comment-form input[type="url"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-default);
    color: var(--text-strong);
  resize: vertical;}
.comments .comment-form textarea:focus,
.comments .comment-form input[type="text"]:focus,
.comments .comment-form input[type="email"]:focus,
.comments .comment-form input[type="url"]:focus {
  outline: none;
  border-color: var(--color-primary);}
.comments .comment-form .form-submit { display: flex; justify-content: flex-end;}
/* GP 버튼 스타일(input[type=submit])이 .btn--primary를 덮으므로 토큰색으로 되돌린다 */
.comments .comment-form input[type="submit"] {
  border: 0;
  cursor: pointer;
  background-color: var(--color-primary);
  color: var(--bg-default);}
.comments .comment-form input[type="submit"]:hover { background-color: var(--color-primary-hover);}
.comments .comment-form input[type="submit"]:active { background-color: var(--color-primary-active);}
.comments .comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);}
.comments .comment-form .logged-in-as {
  color: var(--text-secondary);}
.comments .comment-form .logged-in-as a { color: var(--color-primary);}
.comments .comment-navigation .nav-links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);}
.comments .comment-navigation a { color: var(--text-secondary);}
.comments .comment-navigation a:hover { color: var(--color-primary);}

/* 댓글이 닫힌 글 안내 (kdr 자체 컴포넌트) */
.kdr-comments-closed {
  margin-top: var(--space-5);
  color: var(--text-secondary);}

/* ------------------------------------------------------------------
   4. 검색 폼 / 검색 드롭다운 (헤더 검색 아이콘)
   ------------------------------------------------------------------ */
.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);}
.search-form .search-field {
  flex: 1 1;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);}
.search-form .search-field:focus { outline: none; border-color: var(--color-primary);}
.search-form .search-submit { border: 0; cursor: pointer;}

/* 헤더 콘텐츠(.header-inner)를 검색 드롭다운의 기준점으로 만든다.
   패널은 header-inner 박스에 정확히 고정(left:0; right:0)되므로
   어떤 뷰포트에서도 헤더 콘텐츠 폭과 일치하며 항상 중앙에 위치한다 */
.header-inner { position: relative;}

.kdr-search-modal {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 499;
  display: none;
  padding: var(--space-4) 40px;
  background-color: var(--bg-default);
  border-bottom: 1px solid var(--border-light);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 12px 20px rgba(2, 32, 71, 0.06);}
.kdr-search-modal.is-open { display: block;}

/* ------------------------------------------------------------------
   5. 공유 버튼 피드백
   ------------------------------------------------------------------ */
.share-btn.is-copied { background: var(--color-primary-bg);}

/* GP dynamic CSS가 p/h1~h6에 부여하는 마진(paragraph spacing 등)이
   sample의 * { margin: 0 } 리셋보다 명시도가 높아 히어로/위젯 간격을 깨뜨린다.
   main 내부에서 되돌리고, 자체 마진을 갖는 .article-body는 그대로 둔다 */
main p, main h1, main h2, main h3, main h4, main h5, main h6 { margin: 0;}

/* 히어로: 슬라이드별 높이 차이로 네비게이션이 잘리지 않도록
   클램프 박스와 무마진을 재확인 (sample 설계값 유지) */
body .hero__title,
body .hero__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin: 0;}

/* ------------------------------------------------------------------
   5-1. kdr 자체 컴포넌트 (sample에 없는 추가 UI — kdr- 접두사)
   ------------------------------------------------------------------ */
/* 404 페이지 홈으로 가기 버튼 여백 */
.kdr-notfound-home { margin-top: var(--space-5);}

/* ------------------------------------------------------------------
   5-2. GenerateBlocks 블록 ↔ sample 토큰 브리지 (숏코드 제거 후 신설)
   ------------------------------------------------------------------ */
/* --- 카드 칩: 카테고리마다 개별 pill (최대 3개, 6px 간격 — 04-bridge 참조) --- */
.post-card__meta .gb-text { display: inline-flex;}
.post-card__meta .gb-text.badge--blue a {
    text-decoration: none;}

/* --- 카드 전체 클릭 영역: 제목 링크를 카드에 스트레치(원본 동작) --- */
article.post-card { position: relative;}
article.post-card .post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;}

/* --- 인기글 랭킹 번호: GB 루프는 번호를 내보낼 수 없으므로 CSS 카운터 --- */
.rank-list { counter-reset: kdr-rank;}
.rank-list > li { counter-increment: kdr-rank;}
.rank-item__num::before {
  content: counter(kdr-rank);}
/* 토큰 CSS의 .rank-item:nth-child(1) 규칙은 sample DOM(모든 a가 li의 첫째 자식)에서
   전부 매치되므로, 원본처럼 1위만 파랑이 되도록 2위 이하를 되돌린다 */
.rank-list > li:nth-child(n+2) .rank-item__num {
  background: var(--bg-muted);
  color: var(--text-body);}

/* --- 최신 댓글 (코어 latest-comments 블록 → sample comment-card 룩) --- */
.kdr-comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;}
.kdr-comment-list > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg-default);
  transition: background-color var(--transition-fast);}
.kdr-comment-list > li:hover { background-color: var(--bg-subtle);}
.kdr-comment-list .wp-block-latest-comments__comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);}
.kdr-comment-list article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;}
.kdr-comment-list .wp-block-latest-comments__comment-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
    color: var(--text-secondary);}
.kdr-comment-list .wp-block-latest-comments__comment-author {
  flex-shrink: 0;
  color: var(--text-secondary);
  text-decoration: none;}
.kdr-comment-list .wp-block-latest-comments__comment-link {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-secondary);
   text-decoration: none;}
.kdr-comment-list .wp-block-latest-comments__comment-link:hover { color: var(--color-primary);}
.kdr-comment-list .wp-block-latest-comments__comment-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-strong);}

/* --- 검색 블록 (코어 wp:search → sample .search-form 룩) --- */
.kdr-search-block {
  display: flex;
  align-items: center;
  gap: var(--space-2);}
.kdr-search-block .wp-block-search__input {
  flex: 1 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-default);
    color: var(--text-strong);}
.kdr-search-block .wp-block-search__input:focus { outline: none; border-color: var(--color-primary);}
.kdr-search-block .wp-block-search__button {
  border: 0;
  cursor: pointer;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--bg-default);}
.kdr-search-block .wp-block-search__button:hover { background-color: var(--color-primary-hover);}

/* --- 페이지네이션 화살표 (원본: 숫자 좌우 원형 화살표 버튼) --- */
nav.wp-block-query-pagination .pagination__arrow {
  overflow: hidden;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
  background-color: var(--bg-muted);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px auto;
   color: transparent;
  text-decoration: none;
  transition: background-color var(--transition-fast);}
nav.wp-block-query-pagination .pagination__arrow:hover { background-color: var(--border-light);}
nav.wp-block-query-pagination .kdr-page-prev {
  background-image: url("/wp-content/themes/toss-tech-child/assets/images/icons/icon-tech-arrow-left.svg");}
nav.wp-block-query-pagination .kdr-page-next {
  background-image: url("/wp-content/themes/toss-tech-child/assets/images/icons/icon-tech-arrow-right.svg");}

/* --- 히어로 캐러셀: 슬라이드가 .hero 의 flex 레이아웃을 잇는다 --- */
.hero { display: block;}
.hero-slide { display: none;}
.hero-slide.is-current {  /* 초기 슬라이드는 main.js render(0)이 is-current 부여 */
  display: flex;
  align-items: center;
  gap: var(--space-9);
  width: 100%;
  max-width: var(--container-main);
  cursor: pointer;}
.hero-slide:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-lg);}
.hero__media .wp-block-post-featured-image { margin: 0; max-width: none;}

/* --- 싱글: 코어 post-terms 태그에 # 접두어(원본 마크업 등가) --- */
.article-tags:empty { display: none;}
.article-tags a { text-decoration: none;}
.article-tags a::before { content: "#";}

/* --- 코어 image 블록 figure 마진 정규화 (구독 아이콘/시리즈 썸네일) --- */
.subscribe-box__icon .wp-block-image,
.series-card__thumb .wp-block-image { margin: 0; max-width: none;}

/* ------------------------------------------------------------------
   6. 반응형 (sample 브레이크포인트와 동일: 1024 / 768)
   ------------------------------------------------------------------ */
/* 데스크톱: page-wrap 좌우 패딩 제거 — 내부 .container(1024px)가
   헤더 콘텐츠(.header-inner) 폭과 정확히 정렬되도록 한다.
   섹션들이 자체 max-width를 갖므로 좌우 여백은 그대로 유지된다 */
@media (min-width: 1025px) {
  .page-wrap { padding-left: 0; padding-right: 0;}
}

@media (max-width: 1024px) {
  .post-card { gap: var(--space-5);}
  .kdr-search-modal { padding: var(--space-4) 40px;}

  /* 히어로 슬라이드 (토큰 CSS의 .hero 간격 규칙과 동일 적용) */
  .hero-slide:first-child,
  .hero-slide.is-current { gap: var(--space-6);}
}

@media (max-width: 768px) {
  /* sample: 카드 세로형 — 썸네일이 위로 */
  .post-card { flex-direction: column; align-items: flex-start; gap: var(--space-5);}
  .post-card .post-card__thumb { order: -1;}

  /* 히어로 슬라이드 (토큰 CSS의 .hero 세로형 규칙과 동일 적용) */
  .hero-slide:first-child,
  .hero-slide.is-current { flex-direction: column; align-items: flex-start; gap: var(--space-4);}

  .comments .comment-form { grid-template-columns: 1fr;}

  .search-modal { padding: var(--space-3) 14px;}
}

/* ------------------------------------------------------------------
   7. 에디터 프리뷰 (FluentSnippets kdr-editor-styles 가 add_editor_style
      로 이 파일을 블록 에디터 캔버스에 로드할 때만 매칭되는 스코프.
      프론트엔드에는 .editor-styles-wrapper 가 없어 영향 없음)
   ------------------------------------------------------------------ */
.editor-styles-wrapper {
  background-color: var(--bg-default);
  color: var(--text-strong);
     word-break: keep-all;}

/* 프론트엔드의 main p/h1~h6 리셋 등가 — :where 로 우선순위 0을 유지해
   .article-body 등 sample 클래스의 마진이 에디터에서도 그대로 적용된다 */
.editor-styles-wrapper :where(p, h1, h2, h3, h4, h5, h6) { margin: 0;}
.editor-styles-wrapper :where(a) { color: inherit;}

/* 에디터 캔버스에서는 GP 래퍼·사이드바가 없으므로 display:contents 등
   래퍼 중립화 규칙은 매칭되지 않는다 — 요소 콘텐츠가 곧 캔버스 레이아웃 */

/* ------------------------------------------------------------------
   9. GP 네이티브 헤더 브리지 (클래식 메뉴 기반)
   ------------------------------------------------------------------
   헤더는 GeneratePress 기본 헤더(사이트 로고 + 클래식 메뉴 + GP 내비
   검색 모달 + 모바일 슬라이드아웃)로 운영한다. 메뉴 항목·순서·버튼은
   외모 > 메뉴에서 관리 (버튼은 메뉴 항목 CSS 클래스 menu-btn 사용).
   색상: 색상 > 기본 타이포그래프 패널 / 폰트: 타이포그래피 > 기본 메뉴.
   ------------------------------------------------------------------ */

/* 헤더 래프: 컨테이너 폭/높이 유지 */
.site-header {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: auto;
  min-height: var(--header-height);
}
.inside-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: calc(var(--container-main) + 80px);
  padding: 10px 40px;
}
/* 로고만 표시 (사이트 타이틀 텍스트 숨김) */
.site-header .main-title { display: none; }
.site-logo img.header-image,
.site-header .custom-logo { height: 38px; width: auto; }  /* 정방형 로고(krbloger) 기준 */
.site-branding-container { margin-right: auto; flex-shrink: 0; }

/* 기본 내비게이션 (클래식 메뉴) */
.main-navigation .main-nav ul { display: flex; align-items: center; gap: 6px; }
.main-navigation .main-nav ul li { margin: 0; }
.main-navigation .main-nav ul li a {
  /* 세로 중앙은 GP 메뉴 항목 높이(line-height)가 담당 — 수평 패딩만 */
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--color-header-text);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.main-navigation .main-nav ul li a:hover {
  background-color: var(--color-header-hover-bg);
  color: var(--text-strong);
}
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--color-primary); }

/* 버튼형 메뉴 항목 (외모 > 메뉴에서 CSS 클래스로 지정) */
.main-navigation .main-nav li.menu-btn > a {
  padding: 0 18px;
  border-radius: var(--radius-full);
}
.main-navigation .main-nav li.menu-btn--primary > a {
  background-color: var(--color-primary);
  color: var(--bg-default);
}
.main-navigation .main-nav li.menu-btn--primary > a:hover {
  background-color: var(--color-primary-hover);
  color: var(--bg-default);
}
.main-navigation .main-nav li.menu-btn--muted > a {
  background-color: var(--color-header-muted-bg);
  color: var(--text-strong);
}
.main-navigation .main-nav li.menu-btn--muted > a:hover {
  background-color: var(--bg-muted);
  color: var(--text-strong);
}

/* 헤더 버튼 (GP Hook 엘리먼트 '헤더 버튼' — 외모 > Elements에서 관리) */
.menu-bar-item.kdr-nav-btn { display: inline-flex; align-items: center; }
.kdr-btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.kdr-btn--primary { background-color: var(--color-primary); color: var(--bg-default); }
.kdr-btn--primary:hover { background-color: var(--color-primary-hover); color: var(--bg-default); }
.kdr-btn--muted { background-color: var(--color-header-muted-bg); color: var(--text-strong); }
.kdr-btn--muted:hover { background-color: var(--bg-muted); color: var(--text-strong); }
@media (max-width: 768px) {
  .kdr-btn { height: 36px; padding: 0 14px; }
  .main-navigation .menu-bar-item .kdr-btn--muted { display: none; }  /* 모바일 헤더에는 파란 버튼만 */
}

/* 카테고리 배지: 카테고리마다 개별 pill, 6px 간격 (최대 3개는 functions 필터) */
.post-card__meta .badge--blue {
  display: inline-flex;
  gap: 6px;
  background: none;
  padding: 0;
}
.post-card__meta .badge--blue a {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.post-card__meta .badge--blue a:hover { color: var(--color-primary-hover); }

/* 링크 복사 토스트 (main.js showToast) */
.kdr-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 12px);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  background-color: var(--text-heading);
  color: var(--bg-default);
  font-size: 0.875rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10000;
}
.kdr-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 768px) {
  .kdr-toast { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
/* 모바일·태블릿은 브라우저 자체 '클립보드에 복사했어요' 알림이 뜨므로
   우리 토스트는 중복 — 데스크톱에서만 표시한다 */
@media (max-width: 1024px) {
  .kdr-toast { display: none; }
}

/* 검색: GP 검색 모달 트리거만 사용 (클래식 검색 아이템은 숨김) */
.menu-bar-item.search-item { display: none; }

/* 검색(모달 트리거) 아이콘 버튼 — 메뉴 토글은 모바일에서만 노출(GP 기본) */
.menu-bar-item:not(.kdr-nav-btn) > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;   /* GP의 좌우 20px 패딩 리셋 — 없으면 콘텐츠가 0px로 죄어듦 */
  border-radius: var(--radius-sm);
  color: var(--color-header-text);
  transition: background-color var(--transition-fast);
}
.menu-bar-item:not(.kdr-nav-btn) > a:hover {
  background-color: var(--bg-subtle);
  color: var(--text-strong);
}
.menu-bar-item:not(.kdr-nav-btn) .gp-icon svg { width: 22px; height: 22px; }

/* 검색 모달 */
.gp-search-modal .gp-modal__container {
  background-color: var(--bg-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 560px;
  width: calc(100% - 48px);
}
.gp-search-modal .search-modal-form input[type="search"] {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.gp-search-modal .search-modal-form input[type="search"]:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
@media (max-width: 768px) {
  .gp-search-modal .gp-modal__container { padding: 16px; }
  .gp-search-modal .search-modal-form .search-field { height: 48px; }
}

/* 모바일: 메뉴 토글 버튼 + GP 슬라이드아웃 드로어 */
@media (max-width: 768px) {
  .inside-header { padding: 10px 24px; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;   /* GP 좌우 패딩 리셋 */
    margin-right: -4px;  /* 아이콘 우측 끝선 정렬 */
    border-radius: var(--radius-sm);
    color: var(--color-header-text);
  }
  .menu-toggle:hover { background-color: var(--bg-subtle); color: var(--text-strong); }
  .menu-toggle .gp-icon svg { width: 22px; height: 22px; }
  /* 모바일 메뉴(슬라이드아웃) 항목 간격 — GP menu_item_height(42px) 대신 1.3 */
  .main-navigation .main-nav ul li a,
  .menu-toggle,
  .main-navigation .menu-bar-item > a {
    line-height: 1.3;
  }
  /* GP 타이포그래피(.main-navigation .menu-toggle, 특이성 0,1,1)보다 높게 */
  .main-navigation .menu-toggle {
    line-height: 0.9;
    background-color: transparent;  /* GP의 rgba(0,0,0,0.02) 배경 제거 */
  }
  .mobile-menu-control-wrapper .menu-toggle:hover,
  .mobile-menu-control-wrapper .menu-toggle:focus {
    background-color: transparent;
  }
}
.slideout-navigation,
.slideout-navigation .main-nav {
  background-color: var(--bg-default);
}
.slideout-navigation .main-nav ul li a {
  color: var(--text-strong);
  padding: 12px 24px;
}
.slideout-navigation .main-nav li.menu-btn > a { margin: 8px 16px; width: fit-content; }
.slideout-navigation .slideout-exit {
  color: var(--text-strong);
}