/*
Theme Name:   Spine Journal
Description:  신경외과 척추 전문 블로그를 위한 워드프레스 블록 테마. 신뢰감 있고 임상적인 톤으로 디자인되었습니다. 모든 템플릿을 사이트 편집기에서 직접 수정할 수 있습니다.
Author:       Spine Note
Version:      2.0.9
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Text Domain:  spine-journal
Tags:         blog, one-column, block-patterns, full-site-editing, editor-style, custom-colors
*/

/* -----------------------------------------
   디자인 토큰
   색상·글꼴·간격의 기준값은 theme.json 에 있습니다.
   아래 변수는 블록으로 표현하기 어려운 컴포넌트에서만 씁니다.
----------------------------------------- */
:root{
  --ink-navy: var(--wp--preset--color--ink-navy, #17293D);
  --accent-teal: var(--wp--preset--color--accent-teal, #2F6F6B);
  --accent-teal-dark: var(--wp--preset--color--accent-teal-dark, #1E4D4A);
  --bg-warm: var(--wp--preset--color--bg-warm, #F7F5F1);
  --bg-card-ivory: var(--wp--preset--color--bg-card-ivory, #FBFAF7);
  --card-white: var(--wp--preset--color--card-white, #FFFFFF);
  --border-soft: var(--wp--preset--color--border-soft, #E4E0D8);
  --border-tag: var(--wp--preset--color--border-tag, #C9C2B2);
  --text-body: var(--wp--preset--color--text-body, #33404A);
  --text-muted: var(--wp--preset--color--text-muted, #5B6570);
  --text-faint: var(--wp--preset--color--text-faint, #8C8571);
  --footer-text: var(--wp--preset--color--footer-text, #C7CFD6);
  --footer-text-muted: #8A97A3;
  --radius-card: 6px;
  --radius-btn: 4px;
}

html,body{max-width:100%;overflow-x:hidden;}
img{max-width:100%;height:auto;}

/* -----------------------------------------
   공통 컴포넌트
----------------------------------------- */
.card{
  background:var(--card-white);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-card);
  overflow:hidden;
}

.tag,
.spine-tag a{
  display:inline-block;padding:5px 12px;border:1px solid var(--border-tag);
  border-radius:100px;font-size:12px;color:var(--text-muted);line-height:1.4;
  text-decoration:none;
}
.spine-tag a:hover{border-color:var(--accent-teal);color:var(--accent-teal);}
.spine-tag{display:flex;flex-wrap:wrap;gap:6px;}

.btn-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;border:1px solid var(--ink-navy);color:var(--ink-navy);
}
.btn-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--ink-navy);color:var(--bg-card-ivory);
}

.post-meta{
  display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px;color:var(--text-faint);
}
.post-meta a{color:var(--text-faint);}
.post-meta p,.byline p,.breadcrumb p{margin:0;}
.reading-time{color:var(--text-faint);white-space:nowrap;}
.post-meta .reading-time::before,
.byline .reading-time::before{content:"·";margin-right:8px;}

/* 카테고리/태그 블록의 구분자 숨김 (알약 모양으로 표시) */
.spine-tag .wp-block-post-terms__separator{display:none;}

/* CSS 로 flex 를 쓰는 묶음에서는 블록 사이 여백을 쓰지 않습니다 */
.featured-post>*,
.footer-inner>*,
.footer-cols>*,
.profile-hero-inner>*,
.single-wrap>*,
.section-head>*,
.byline>*,
.hero-byline>*,
.post-meta>*{margin-block-start:0;margin-block-end:0;}

.single-wrap{max-width:1200px;margin-left:auto;margin-right:auto;}

/* -----------------------------------------
   헤더
----------------------------------------- */
.site-header{
  border-bottom:1px solid var(--border-soft);
  background:var(--bg-card-ivory);
  position:sticky;top:0;z-index:50;
}
.site-header-inner{min-height:88px;align-items:center;}
.site-branding{gap:12px;align-items:center;}
.site-branding .wp-block-site-logo img{border-radius:8px;}
.spine-default-logo a{
  width:36px;height:36px;border-radius:8px;background:#EDEAE0;
  display:flex;align-items:center;justify-content:center;
}
.spine-default-logo svg,.spine-default-logo img{display:block;width:22px;height:22px;max-width:none;}
.main-navigation .wp-block-navigation__container{gap:40px;}
.main-navigation a{font-size:15px;font-weight:500;color:#2A3A44;}
.main-navigation a:hover{color:var(--accent-teal);}

/* -----------------------------------------
   히어로 (홈 상단)
----------------------------------------- */
.hero{background:var(--bg-card-ivory);}
.hero-inner{padding-top:76px;padding-bottom:76px;}
.hero-copy{max-width:760px;}
.hero-byline{align-items:center;gap:12px;}
.hero-byline img{
  width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:top center;
  border:1px solid var(--border-soft);background:#E9E4D6;
}
.hero-byline .wp-block-image{margin:0;}
.hero-byline-name{font-size:15px;font-weight:600;color:var(--ink-navy);margin:0;line-height:1.35;}
.hero-byline-title{font-size:13px;color:var(--text-faint);margin:0;line-height:1.35;}
.hero-sub{font-size:18px;line-height:1.7;color:var(--text-muted);max-width:560px;}

/* -----------------------------------------
   섹션 공통
----------------------------------------- */
.section{padding-top:56px;padding-bottom:56px;}
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;margin-bottom:28px;flex-wrap:wrap;
}
.section-head h2{font-size:22px;margin:0;}
.section-head p{margin:0;font-size:14px;}

/* 대표(추천) 글 */
.featured-post{display:flex;align-items:stretch;}
.featured-post .featured-thumb{width:440px;flex-shrink:0;margin:0;}
.featured-post .featured-thumb img{width:100%;height:100%;min-height:300px;object-fit:cover;display:block;}
.featured-post .featured-body{flex:1;padding:44px;display:flex;flex-direction:column;gap:14px;justify-content:center;}
.featured-post .featured-body h2{font-size:28px;margin:0;}
.featured-post .featured-excerpt{color:var(--text-muted);font-size:16px;margin:0;}

/* 질환별 카테고리 그리드 */
.category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;}
.category-card{
  padding:26px 22px;display:flex;flex-direction:column;gap:10px;text-decoration:none;
  background:var(--card-white);border:1px solid var(--border-soft);border-radius:var(--radius-card);
}
.category-card:hover{border-color:var(--accent-teal);}
.category-card .icon{
  width:40px;height:40px;border-radius:8px;background:#EDEAE0;
  display:flex;align-items:center;justify-content:center;
}
.category-card .icon svg,.category-card .icon img{display:block;width:22px;height:22px;flex-shrink:0;max-width:none;}
.category-card .cat-name{font-size:16px;font-weight:600;color:var(--ink-navy);}
.category-card .cat-count{font-size:13px;color:var(--text-faint);}

/* 글 목록 그리드 */
.post-grid{margin:0;}
.post-grid.wp-block-post-template{gap:24px;}
.post-card{
  background:var(--card-white);border:1px solid var(--border-soft);
  border-radius:var(--radius-card);overflow:hidden;height:100%;
  display:flex;flex-direction:column;
}
.post-card .wp-block-post-featured-image{margin:0;}
.post-card .wp-block-post-featured-image img{width:100%;height:170px;object-fit:cover;display:block;}
.post-card .post-card-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.post-card .post-card-body h3{font-size:18px;margin:0;}
.post-card .post-card-body h3 a{color:var(--ink-navy);}
.post-card .post-card-body h3 a:hover{color:var(--accent-teal);}

/* -----------------------------------------
   글 상세
----------------------------------------- */
.single-wrap{display:flex;justify-content:center;gap:56px;padding-top:56px;padding-bottom:96px;align-items:flex-start;}
.single-article{width:100%;max-width:720px;min-width:0;}
.breadcrumb{font-size:13px;color:var(--text-faint);margin:0;}
.breadcrumb a{color:var(--text-faint);}
.single-title{font-size:36px;margin:0;}
.byline{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--text-faint);}
.byline .wp-block-image{margin:0;}
.byline img{width:36px;height:36px;border-radius:50%;background:#E9E4D6;object-fit:cover;object-position:top center;}
.byline p{margin:0;}
.byline .author-name{font-size:14px;font-weight:600;color:var(--ink-navy);}
.single-thumb img{width:100%;max-height:360px;object-fit:cover;border-radius:8px;}

.entry-content h2{font-size:24px;margin-top:1.2em;}
.entry-content h3,
.wp-block-post-content h3{font-size:19px;margin-top:1.2em;}
.wp-block-post-content p{margin-bottom:1.3em;}
.wp-block-post-content h2{font-size:24px;margin-top:1.2em;}
.wp-block-post-content h4{font-size:18px;margin-top:1.4em;}

/* 본문 체크리스트 박스: 목록 블록 → 고급 → 추가 CSS 클래스에 checklist-box */
.checklist-box{
  padding:26px 30px;background:#EFEDE5;border:1px solid #DDD6C4;border-radius:var(--radius-card);
  list-style:none;display:flex;flex-direction:column;gap:8px;margin:1.6em 0;
}
.checklist-box li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--text-muted);}
.checklist-box li::before{
  content:"";width:16px;height:16px;margin-top:3px;border:1.5px solid #8C8571;border-radius:4px;flex-shrink:0;
}

/* 사이드바 */
.single-sidebar{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:24px;}
.author-box{padding:26px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;}
.author-box .wp-block-image{margin:0;}
.author-box img{width:72px;height:72px;border-radius:50%;background:#E9E4D6;object-fit:cover;object-position:top center;}
.author-box p{margin:0;}
.author-name-lg{font-size:16px;font-weight:600;color:var(--ink-navy);}
.author-title{font-size:13px;color:var(--text-faint);}
.author-bio{font-size:14px;line-height:1.7;color:var(--text-muted);}
.author-box .wp-block-button{width:100%;}
.author-box .wp-block-button__link{width:100%;text-align:center;}

.related-box{padding:22px;display:flex;flex-direction:column;gap:16px;}
.related-box .related-head{font-size:14px;font-weight:700;color:var(--ink-navy);margin:0;}
.related-item{display:flex;gap:12px;align-items:flex-start;text-decoration:none;}
.related-item .related-thumb{
  width:60px;height:60px;border-radius:6px;flex-shrink:0;object-fit:cover;
  background:#DCE4E3;display:block;
}
.related-item .related-title{font-size:14px;font-weight:600;color:var(--ink-navy);line-height:1.4;}
.related-item:hover .related-title{color:var(--accent-teal);}
.related-item .related-date{font-size:12px;color:var(--text-faint);}

/* -----------------------------------------
   푸터
----------------------------------------- */
.site-footer{padding-top:52px;padding-bottom:52px;background:var(--ink-navy);color:var(--footer-text);}
.site-footer .wp-block-site-title a{color:var(--bg-card-ivory);}
.site-footer p,.site-footer li,.site-footer a{color:var(--footer-text);}
.site-footer .wp-block-site-tagline{font-size:13px;color:var(--footer-text);}
.footer-inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;}
.footer-brand{display:flex;flex-direction:column;gap:8px;}
.footer-copyright{font-size:13px;color:var(--footer-text-muted);margin:0;}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;gap:10px;font-size:14px;}
.footer-col .col-label{font-size:13px;color:var(--footer-text-muted);margin:0;}
.footer-col .wp-block-navigation__container{flex-direction:column;gap:10px;align-items:flex-start;}
.disclaimer{font-size:13px;line-height:1.6;margin:0;}

/* -----------------------------------------
   전문의 소개 페이지
----------------------------------------- */
.profile-hero{background:var(--bg-card-ivory);border-bottom:1px solid var(--border-soft);}
.profile-hero-inner{display:flex;gap:56px;align-items:center;padding-top:72px;padding-bottom:72px;}
.profile-photo{
  width:300px;aspect-ratio:3/4;object-fit:cover;object-position:top center;
  border-radius:12px;border:1px solid var(--border-soft);background:#E9E4D6;display:block;
}
.profile-photo-wrap{flex-shrink:0;margin:0;}
.profile-intro{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.profile-name{font-size:40px;line-height:1.25;margin:0;}
.profile-bio{font-size:17px;line-height:1.8;color:var(--text-muted);margin:0;max-width:520px;}

.profile-body{padding-top:56px;padding-bottom:88px;font-size:17px;line-height:1.9;}
.profile-body h2{
  font-size:24px;margin:44px 0 16px;padding-bottom:10px;
  border-bottom:1px solid var(--border-soft);
}
.profile-body h2:first-child{margin-top:0;}
.profile-body h3{font-size:19px;margin:32px 0 12px;}
.profile-body ul{margin:0 0 20px;padding-left:0;list-style:none;}
.profile-body ul li{position:relative;padding-left:18px;margin-bottom:9px;}
.profile-body ul li::before{
  content:"";position:absolute;left:0;top:13px;
  width:6px;height:6px;border-radius:50%;background:var(--accent-teal);
}

/* -----------------------------------------
   반응형
----------------------------------------- */
@media (max-width:1024px){
  .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .single-wrap{gap:32px;}
  .single-sidebar{width:260px;}
  .featured-post .featured-thumb{width:340px;}
  .featured-post .featured-body{padding:32px;}
}

@media (max-width:782px){
  .site-header{position:static;}
  .site-header-inner{min-height:0;padding-top:14px;padding-bottom:14px;}
  .main-navigation .wp-block-navigation__container{gap:20px;}
  .main-navigation a{font-size:14px;}

  .hero-inner{padding-top:40px;padding-bottom:40px;}
  .hero-sub{font-size:16px;}

  .section{padding-top:36px;padding-bottom:36px;}
  .section-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:20px;}
  .section-head h2{font-size:20px;}

  .featured-post{flex-direction:column;}
  .featured-post .featured-thumb{width:100%;}
  .featured-post .featured-thumb img{min-height:0;height:200px;}
  .featured-post .featured-body{padding:24px;}
  .featured-post .featured-body h2{font-size:22px;}

  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .category-card{padding:18px 16px;gap:8px;}
  .category-card .cat-name{font-size:14px;}

  .post-card .wp-block-post-featured-image img{height:180px;}

  .single-wrap{flex-direction:column;gap:32px;padding-top:28px;padding-bottom:56px;}
  .single-article{max-width:100%;}
  .single-title{font-size:26px;}
  .single-thumb img{max-height:220px;}
  .checklist-box{padding:20px;}
  .single-sidebar{width:100%;}

  .footer-inner{flex-direction:column;gap:28px;}
  .footer-cols{flex-direction:column;gap:24px;}

  .profile-hero-inner{flex-direction:column;align-items:center;text-align:center;gap:24px;padding-top:40px;padding-bottom:40px;}
  .profile-photo{width:200px;margin:0 auto;}
  .profile-intro{align-items:center;}
  .profile-name{font-size:28px;}
  .profile-bio{font-size:16px;}
  .profile-body{padding-top:36px;padding-bottom:64px;font-size:16px;line-height:1.8;}
  .profile-body h2{font-size:20px;margin:32px 0 14px;}
}

@media (max-width:400px){
  .category-grid{grid-template-columns:1fr;}
}