/* ============================================================================
   kobyko.studio — 사이트 레이아웃 CSS v0.1 (2026-08-17, 72차)
   ----------------------------------------------------------------------------
   색·서체·간격 값은 여기 없다 — 전부 kobyko_brand_tokens.css(단일 원본의 배포
   사본)의 var() 참조다. HEX·px 색값을 이 파일에 적지 않는다.
   컴포넌트(.k-btn .k-card .k-badge .k-tag …)는 tokens/components CSS 가 정의하고,
   이 파일은 페이지 **배치**만 담당한다.
   근거: kobyko_blog_handoff_2026-08-11.md §5 · kobyko_brand_system.md ·
         디자인 시스템 v0.1 readme (63차-b) · 64차 tabular-nums 규칙
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--k-page); color: var(--k-text);
  font-family: var(--k-font-body); font-size: var(--k-step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--k-maxw); margin: 0 auto; padding: 0 var(--k-space-5); }
h1, h2, h3 { font-weight: 800; line-height: 1.15; margin: 0 0 var(--k-space-3);
             letter-spacing: -0.01em; }
p { margin: 0 0 var(--k-space-4); }
.muted { color: var(--k-text-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* 64차 규칙: 도안 표·콧수는 숫자 등폭. Baloo 2 기본 숫자가 비례폭이라
   표가 흔들린다 — kobyko_type_specimen.html 의 결론을 유틸리티로 고정한다. */
.k-tabular, .pattern-table td, .pattern-table th, .count {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 9; background: var(--k-page);
               border-bottom: 1px solid var(--k-line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between;
                     gap: var(--k-space-5); height: 72px; }
.site-nav { display: flex; gap: var(--k-space-5); font-weight: 600; }
.site-nav a { text-decoration: none; color: var(--k-text); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--k-accent); }
.brandlink { display: flex; align-items: center; gap: 0.42em; color: var(--k-brick);
             text-decoration: none; }
.brandlink .k-mark { width: 26px; }   /* 최소 20px 가드 위 — brand_system §2-2 */
.brandlink .k-word { width: 116px; }
.brandlink .k-mark svg, .brandlink .k-word svg,
.k-mark svg, .k-word svg { display: block; width: 100%; height: auto; }

/* ---------- hero (홈) ---------- */
.hero { padding: var(--k-space-8) 0 var(--k-space-7); text-align: center; }
.hero .lockup { display: flex; flex-direction: column; align-items: center;
                gap: var(--k-space-4); color: var(--k-brick); }
.hero .k-mark { width: 104px; }
.hero .k-word { width: 330px; max-width: 78vw; }
.tagline { font-size: var(--k-step-2); font-weight: 600; letter-spacing: 0.02em;
           color: var(--k-text-muted); margin: 0; }
.hero h1 { font-size: clamp(2rem, 5vw, var(--k-step-5)); max-width: 20ch;
           margin: var(--k-space-6) auto var(--k-space-4); }
.hero .lede { max-width: 52ch; margin: 0 auto var(--k-space-5);
              font-size: var(--k-step-1); color: var(--k-text-muted); }
.cta-row { display: flex; gap: var(--k-space-3); justify-content: center; flex-wrap: wrap; }

/* 라임 = 면·도형 전용, 화면당 세어서 제한. 홈의 킥 = 이 룰 하나 + 밴드의 점들 */
.kick-rule { width: 100%; max-width: 520px; margin: var(--k-space-6) auto 0;
             height: 10px; border-radius: var(--k-radius-pill); background: var(--k-kick); }

/* ---------- 차별점 3 ---------- */
.claims { padding: var(--k-space-7) 0; }
.grid3 { display: grid; gap: var(--k-space-4);
         grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.claim h3 { font-size: var(--k-step-2); }
.claim .num { display: inline-flex; align-items: center; justify-content: center;
              width: 44px; height: 44px; border-radius: var(--k-radius-pill);
              background: var(--k-surface); color: var(--k-accent);
              box-shadow: inset 0 0 0 2px var(--k-accent);
              font-weight: 800; margin-bottom: var(--k-space-3); }

/* ---------- 최신 도안 카드 ---------- */
.latest { padding: 0 0 var(--k-space-8); }
.latest .section-head { display: flex; align-items: baseline; gap: var(--k-space-4);
                        justify-content: space-between; flex-wrap: wrap; }
.post-grid { display: grid; gap: var(--k-space-4);
             grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.post-card { display: flex; flex-direction: column; background: var(--k-surface);
             border: 1px solid var(--k-line); border-radius: var(--k-radius-lg);
             overflow: hidden; text-decoration: none; color: var(--k-text);
             transition: box-shadow var(--k-dur-fast) var(--k-ease); }
.post-card:hover { box-shadow: var(--k-shadow-md); }
.post-card .thumb { aspect-ratio: 4 / 5; background: var(--k-page);
                    display: grid; place-items: center; border-bottom: 1px solid var(--k-line); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .thumb .ph-mark { width: 56px; color: var(--k-line); }
.post-card .body { padding: var(--k-space-4); display: flex; flex-direction: column;
                   gap: var(--k-space-2); }
.post-card h3 { margin: 0; font-size: var(--k-step-1); }
.post-card .meta { font-size: var(--k-step--1); color: var(--k-text-muted); margin: 0; }

/* ---------- 브릭 밴드 ---------- */
.band { background: var(--k-brick); color: var(--k-cream); padding: var(--k-space-8) 0; }
.band h2 { font-size: clamp(1.6rem, 4vw, var(--k-step-4)); max-width: 22ch; }
.band p { color: var(--k-cream); opacity: .88; max-width: 54ch; }
.band .cols { display: grid; gap: var(--k-space-6);
              grid-template-columns: minmax(280px, 1.1fr) minmax(240px, 0.9fr);
              align-items: center; }
.proof { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--k-space-3); }
.proof li { display: flex; gap: var(--k-space-3); align-items: baseline; }
.proof .tick { flex: none; width: 10px; height: 10px; border-radius: 50%;
               background: var(--k-lime); }
@media (max-width: 760px) { .band .cols { grid-template-columns: 1fr; } }

/* ---------- 메일 수집 ---------- */
.signup { padding: var(--k-space-8) 0; }
.signup .k-card { display: grid; gap: var(--k-space-5);
                  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
                  align-items: center; padding: var(--k-space-6); }
@media (max-width: 760px) { .signup .k-card { grid-template-columns: 1fr; } }
.signup form { display: flex; gap: var(--k-space-2); flex-wrap: wrap; }
.signup input[type=email] { flex: 1 1 200px; }

/* ---------- 채널 ---------- */
.channels { padding: 0 0 var(--k-space-8); }
.chip-row { display: flex; gap: var(--k-space-3); flex-wrap: wrap; }

/* ---------- 푸터 ---------- */
.site-footer { background: var(--k-ink); color: var(--k-cream); padding: var(--k-space-6) 0; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: var(--k-space-5);
                     flex-wrap: wrap; align-items: center; }
.site-footer .k-word { width: 96px; color: var(--k-lime); display: block; } /* 잉크 위 라임 12.75 */
.site-footer small { color: var(--k-cream); opacity: .7; }
.site-footer a { color: var(--k-cream); }

/* ============================================================================
   도안 포스트 (pattern post)
   ============================================================================ */
.post { padding: var(--k-space-6) 0 var(--k-space-8); }
.post-header { max-width: 720px; margin: 0 auto var(--k-space-6); text-align: center; }
.post-header .crumbs { font-size: var(--k-step--1); color: var(--k-text-muted); }
.post-header .crumbs a { color: var(--k-text-muted); }
.post-header h1 { font-size: clamp(1.8rem, 4.5vw, var(--k-step-4)); }
.post-hero { max-width: 860px; margin: 0 auto var(--k-space-6); }
.post-hero .thumb { aspect-ratio: 4 / 3; border-radius: var(--k-radius-lg);
                    background: var(--k-surface); border: 1px solid var(--k-line);
                    display: grid; place-items: center; overflow: hidden; }
.post-hero .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-hero figcaption { font-size: var(--k-step--1); color: var(--k-text-muted);
                        text-align: center; margin-top: var(--k-space-2); }
.post-body { max-width: 720px; margin: 0 auto; }
.post-body h2 { font-size: var(--k-step-3); margin-top: var(--k-space-7);
                padding-bottom: var(--k-space-2); border-bottom: 2px solid var(--k-line); }
.post-body h3 { font-size: var(--k-step-1); margin-top: var(--k-space-5); }
.post-body ul, .post-body ol { padding-left: 1.3em; margin: 0 0 var(--k-space-4); }
.post-body li { margin-bottom: var(--k-space-2); }

/* 요약 박스 */
.at-a-glance { display: grid; gap: var(--k-space-3);
               grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
               background: var(--k-surface); border: 1px solid var(--k-line);
               border-radius: var(--k-radius-lg); padding: var(--k-space-5);
               margin: 0 0 var(--k-space-5); }
.at-a-glance .cell b { display: block; font-size: var(--k-step--1);
                       color: var(--k-text-muted); font-weight: 600; }
.at-a-glance .cell span { font-weight: 700; }

/* 도안 표 — 반드시 tabular-nums (64차) */
.pattern-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--k-space-4);
                 font-size: var(--k-step--1); }
.pattern-table th, .pattern-table td { text-align: left; padding: 0.5em 0.8em;
                                       border-bottom: 1px solid var(--k-line); }
.pattern-table th { font-weight: 700; color: var(--k-text-muted);
                    font-size: var(--k-step--1); }
.pattern-table tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
                border: 1px solid var(--k-line); border-radius: var(--k-radius-md);
                margin: 0 0 var(--k-space-4); }
.table-scroll .pattern-table { margin: 0; min-width: 480px; }

/* 단별 도안 본문 — 각 단이 한 항목, 끝에 콧수 */
.rows { list-style: none; padding: 0; margin: 0 0 var(--k-space-4); }
.rows li { display: flex; gap: var(--k-space-3); padding: 0.55em 0;
           border-bottom: 1px dashed var(--k-line); align-items: baseline; }
.rows li:last-child { border-bottom: 0; }
.rows .rn { flex: none; min-width: 3.2em; font-weight: 800; color: var(--k-accent);
            font-variant-numeric: tabular-nums; }
.rows .count { flex: none; margin-left: auto; padding-left: var(--k-space-3);
               font-weight: 700; white-space: nowrap; }

/* 검증 배지 블록 — 이 페이지의 킥(라임)은 여기 하나다 */
.verified { display: flex; gap: var(--k-space-4); align-items: flex-start;
            background: var(--k-surface); border: 1px solid var(--k-line);
            border-radius: var(--k-radius-lg); padding: var(--k-space-5);
            margin: var(--k-space-6) 0; }
.verified .k-badge--kick { flex: none; }
.verified p { margin: 0; font-size: var(--k-step--1); }

/* PDF 구매 박스 — 64차: 블로그의 수익 본체는 광고가 아니라 도안 판매다 */
.pdf-box { background: var(--k-brick); color: var(--k-cream);
           border-radius: var(--k-radius-lg); padding: var(--k-space-6);
           margin: var(--k-space-6) 0; display: grid; gap: var(--k-space-3);
           grid-template-columns: 1fr auto; align-items: center; }
.pdf-box h3 { margin: 0; color: var(--k-cream); }
.pdf-box p { margin: 0; opacity: .88; font-size: var(--k-step--1); }
.pdf-box .k-btn--primary { background: var(--k-cream); color: var(--k-brick); } /* 5.27 반전 */
.pdf-box .k-btn--primary:hover { background: var(--k-cream-deep); }
@media (max-width: 640px) { .pdf-box { grid-template-columns: 1fr; } }

/* 관련 도안 */
.related { margin-top: var(--k-space-7); }

/* ---------- about ---------- */
.prose { max-width: 680px; margin: 0 auto; padding: var(--k-space-7) 0 var(--k-space-8); }
.prose h1 { font-size: clamp(1.8rem, 4.5vw, var(--k-step-4)); }
.prose h2 { font-size: var(--k-step-2); margin-top: var(--k-space-6); }