/*
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.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: toss-tech-child
*/

/* ==========================================================================
   브리지 스타일 (Bridge)
   --------------------------------------------------------------------------
   sample 디자인 토큰 CSS(01~05)는 수정 없이 그대로 인큐된다.
   이 파일은 GeneratePress / 코어 블록이 출력하는 래퍼를 sample 마크업 구조에
   맞게 잇는 역할만 한다. 모든 값은 토큰 변수(var(--*))를 참조한다.
   ========================================================================== */

/* ------------------------------------------------------------------
   1. GP 래퍼 중립화 — 레이아웃 박스는 Elements의 .page-wrap 이 담당
   ------------------------------------------------------------------ */
body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--text-strong);
  background-color: var(--bg-default);
  word-break: keep-all;
}

/* 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 dynamic CSS(.sidebar .widget{background-color:var(--base-3)})가 sample
   위젯 배경을 덮어쓰므로 토큰값으로 되돌린다 */
body .sidebar .widget { background-color: var(--bg-muted); }

/* ------------------------------------------------------------------
   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-end;
  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);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  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);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  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; }
.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);
  font-size: var(--fs-meta);
  font-family: inherit;
  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; }
.comments .comment-form .submit { border: 0; cursor: pointer; }
.comments .comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}
.comments .comment-form .logged-in-as {
  color: var(--text-secondary);
  font-size: var(--fs-meta-sm);
}
.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);
  font-size: var(--fs-meta-sm);
}
.comments .comment-navigation a { color: var(--text-secondary); }
.comments .comment-navigation a:hover { color: var(--color-primary); }

/* ------------------------------------------------------------------
   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);
  font-size: var(--fs-meta);
  font-family: inherit;
}
.search-form .search-field:focus { outline: none; border-color: var(--color-primary); }
.search-form .search-submit { border: 0; cursor: pointer; }

.search-modal {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container-main), 100%);
  z-index: 499;
  display: none;
  padding: var(--space-4) 40px;
  background-color: var(--bg-default);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 12px 20px rgba(2, 32, 71, 0.06);
}
.search-modal.is-open { display: block; }

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

/* ------------------------------------------------------------------
   6. 반응형 (sample 브레이크포인트와 동일: 1024 / 768)
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .post-card { gap: var(--space-5); }
  .search-modal { padding: var(--space-4) 40px; }
}

@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; }

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