/* guide.css — seoulskydent-guide v1.6 프리뷰 (② 디자인가이드 방향 재구축).
   원칙: 블루는 유일 강조·아껴 / 한글 음수 자간 -0.02em / 이모지·손그림 금지, 여백·헤어라인 언어.
   특징: 크림 히어로 + 고스트 워드마크 · Roboto 영문 장식 · 6px 플랫 카드 · 다크 INFORMATION 푸터. */

:root {
    /* 브랜드 (로고 실측 #0081CC 계열) */
    --brand-500: #007FCC;
    --brand-600: #0069b0;   /* 소형 텍스트/링크 AA용 다크 셰이드 */
    --brand-50:  #E8F5FC;
    --brand-100: #CCE8F7;

    /* 중립 (쿨 그레이 + 웜 크림) */
    --bg: #FFFFFF;
    --bg-soft: #F9F9F9;
    --bg-cream: #F7F4EF;
    --bg-cream-2: #FDFBF7;
    --bg-warm-stone: #F3F2ED;
    --surface-dark: #333333;
    --border: #DADADA;
    --border-soft: #D5D5D5;
    --border-warm: #E7E2DC;
    --border-on-dark: rgba(255, 255, 255, 0.20);
    --bg-decorative: #EEEEEE;

    /* 잉크 */
    --ink-900: #000000;
    --ink-700: #191919;
    --ink-600: #333333;
    --ink-500: #454545;
    --ink-400: #686868;
    --ink-200: #CBCBCB;
    --on-dark: #FFFFFF;
    --on-dark-2: rgba(255, 255, 255, 0.72);
    --on-dark-muted: rgba(255, 255, 255, 0.42);

    /* 시맨틱 */
    --warn: #A40404;

    /* 타입 */
    --font-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --font-en: Roboto, system-ui, sans-serif;
    --font-mono: "DM Mono", ui-monospace, monospace;

    /* 모서리 */
    --radius-xs: 2px;
    --radius-sm: 6px;
    --radius-md: 24px;
    --radius-pill: 100px;

    /* 그림자 (버튼 press + 카드 호버만) */
    --shadow-press: 2px 2px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.08);

    /* 모션 */
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;

    /* 레거시 별칭 (기존 셀렉터 무중단) */
    --brand: var(--brand-500);
    --ink: var(--ink-700);
    --gray-1: var(--ink-500);
    --gray-2: var(--bg-soft);
    --line: var(--border);
    --brand-soft: var(--brand-50);
    --brand-line: var(--brand-100);
    --sec-alt: var(--bg-soft);
    --brand-hover: var(--brand-600);
}

/* ── 전역 ───────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 17px/1.6 var(--font-sans);
    color: var(--ink-700);
    background: var(--bg);
    letter-spacing: -0.02em;
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* 크롬 링크: 색 불변·호버 밑줄 */
a { color: inherit; text-decoration: none; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: var(--radius-xs); }
::selection { background: var(--brand-100); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand-500); color: #fff; padding: 8px 16px; z-index: 200; }
.skip-link:focus { left: 0; }

.eyebrow {
    display: inline-block; font-family: var(--font-en); font-weight: 300;
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px;
    color: var(--brand-500); margin: 0 0 14px;
}

/* ── 헤더 (sticky, 헤어라인) ────────────────────────── */
.site-head {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.site-nav { max-width: 1040px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-brand { display: flex; align-items: center; gap: 11px; color: var(--ink-700); }
.site-brand:hover { text-decoration: none; }
.site-logo { height: 28px; width: auto; display: block; }
.site-div { width: 1px; height: 18px; background: var(--border); flex: 0 0 auto; }
.site-label { font-weight: 600; letter-spacing: -0.02em; font-size: .98rem; color: var(--ink-700); }
.site-brand:hover .site-label { color: var(--brand-500); }
.site-ext { font-size: .875rem; color: var(--ink-400); white-space: nowrap; letter-spacing: -0.02em; }
.site-ext:hover { color: var(--brand-500); text-decoration: none; }
.site-ext-short { display: none; }

/* ── 컨테이너 ───────────────────────────────────────── */
.content { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.content--wide { max-width: 1040px; }
.hub-main { margin: 0; }
.hub-in { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ── 허브 섹션 (배경 리듬 white / soft) ─────────────── */
.hub-sec { padding: 70px 0 56px; background: var(--bg); }
.hub-sec-alt { background: var(--bg-soft); }

/* a) 히어로 — 크림 + 고스트 워드마크 */
.hub-hero {
    background: var(--bg-cream-2);
    padding: 66px 0 54px;
    position: relative; overflow: hidden;
    border-bottom: 1px solid var(--border-warm);
}
.hub-hero .hub-in { position: relative; z-index: 1; }
.hub-hero::after {
    content: "SEOUL SKY"; position: absolute; right: -1%; bottom: -16%;
    font-family: var(--font-en); font-weight: 300; font-size: 168px; line-height: 1;
    letter-spacing: .02em; color: var(--bg-decorative); z-index: 0; pointer-events: none; white-space: nowrap;
}
.hub-title { font-size: 42px; line-height: 1.3; font-weight: 700; letter-spacing: -0.03em; margin: 0; color: var(--ink-900); }
.hub-sub { margin-top: 18px; color: var(--ink-500); font-size: 1.05rem; max-width: 620px; }
.hub-sub p { margin: 0; }

/* 섹션 헤더 */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 28px; }
.sec-title { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin: 0; color: var(--ink-900); }
.sec-sub { font-size: 15px; color: var(--ink-400); margin: 6px 0 0; }
.sec-more { font-size: .9rem; color: var(--ink-400); white-space: nowrap; }
.sec-more:hover { color: var(--brand-500); text-decoration: underline; }

/* b) 대표 가이드 — 대형 가로 카드 (테두리·6px·무섀도우) */
.feat-card {
    display: grid; grid-template-columns: 42% 1fr; gap: 0;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden; color: var(--ink-700);
    transition: border-color var(--dur-base) var(--ease-standard);
}
.feat-card:hover { border-color: var(--border-soft); text-decoration: none; }
.feat-card:hover .feat-title { color: var(--brand-500); }
.feat-card .cover { border-radius: 0; height: 100%; min-height: 230px; border-right: 1px solid var(--border); }
.feat-body { padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; }
.feat-title { font-size: 23px; line-height: 1.4; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; transition: color var(--dur-fast) var(--ease-standard); }
.feat-excerpt {
    font-size: 15px; color: var(--ink-500); margin: 0 0 16px; line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feat-meta { font-size: 13px; color: var(--ink-400); margin: 0; }

/* c) 핵심 가이드 — Roboto Light 대형 넘버 */
.core-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.core-item a {
    display: flex; gap: 18px; align-items: flex-start; color: var(--ink-700);
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 24px 26px;
    height: 100%; transition: border-color var(--dur-base) var(--ease-standard);
}
.core-item a:hover { border-color: var(--border-soft); text-decoration: none; }
.core-item a:hover .core-title { color: var(--brand-500); }
.core-num { font-family: var(--font-en); font-size: 34px; font-weight: 300; color: var(--brand-500); line-height: 1; }
.core-text { display: flex; flex-direction: column; gap: 6px; }
.core-title { font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; transition: color var(--dur-fast) var(--ease-standard); }
.core-meta { font-size: 13px; color: var(--ink-400); font-family: var(--font-en); }

/* ── 커버 시스템 (16:10) ────────────────────────────── */
.cover {
    aspect-ratio: 16 / 10; width: 100%;
    background: var(--bg-warm-stone) url(../covers/default.svg) center / cover no-repeat;
}
.cover-oral-surgery.hash-cover-1 { background-image: url(../covers/oral-surgery-1.svg); }
.cover-oral-surgery.hash-cover-2 { background-image: url(../covers/oral-surgery-2.svg); }
.cover-oral-surgery.hash-cover-3 { background-image: url(../covers/oral-surgery-3.svg); }
.cover-oral-surgery.hash-cover-4 { background-image: url(../covers/oral-surgery-4.svg); }
.cover-implant.hash-cover-1 { background-image: url(../covers/implant-1.svg); }
.cover-implant.hash-cover-2 { background-image: url(../covers/implant-2.svg); }
.cover-implant.hash-cover-3 { background-image: url(../covers/implant-3.svg); }
.cover-implant.hash-cover-4 { background-image: url(../covers/implant-4.svg); }
.cover-sleep.hash-cover-1 { background-image: url(../covers/sleep-1.svg); }
.cover-sleep.hash-cover-2 { background-image: url(../covers/sleep-2.svg); }
.cover-sleep.hash-cover-3 { background-image: url(../covers/sleep-3.svg); }
.cover-sleep.hash-cover-4 { background-image: url(../covers/sleep-4.svg); }
.cover-save-tooth.hash-cover-1 { background-image: url(../covers/save-tooth-1.svg); }
.cover-save-tooth.hash-cover-2 { background-image: url(../covers/save-tooth-2.svg); }
.cover-save-tooth.hash-cover-3 { background-image: url(../covers/save-tooth-3.svg); }
.cover-save-tooth.hash-cover-4 { background-image: url(../covers/save-tooth-4.svg); }
.cover-aesthetic.hash-cover-1 { background-image: url(../covers/aesthetic-1.svg); }
.cover-aesthetic.hash-cover-2 { background-image: url(../covers/aesthetic-2.svg); }
.cover-aesthetic.hash-cover-3 { background-image: url(../covers/aesthetic-3.svg); }
.cover-aesthetic.hash-cover-4 { background-image: url(../covers/aesthetic-4.svg); }
.cover.hash-cover-wisdom-impacted { background-image: url(../covers/wisdom-impacted.svg); }
.cover.hash-cover-wisdom-horizontal { background-image: url(../covers/wisdom-horizontal.svg); }
.cover.hash-cover-wisdom-eruption { background-image: url(../covers/wisdom-eruption.svg); }
.cover.hash-cover-pain-wave { background-image: url(../covers/pain-wave.svg); }
.cover.hash-cover-socket-care { background-image: url(../covers/socket-care.svg); }
.cover.hash-cover-cost-doc { background-image: url(../covers/cost-doc.svg); }
.cover.hash-cover-checklist { background-image: url(../covers/checklist.svg); }
.cover.hash-cover-qna { background-image: url(../covers/qna.svg); }
.cover.hash-cover-implant-fixture { background-image: url(../covers/implant-fixture.svg); }
.cover.hash-cover-implant-crown { background-image: url(../covers/implant-crown.svg); }
.cover.hash-cover-bone-graft { background-image: url(../covers/bone-graft.svg); }
.cover.hash-cover-implant-steps { background-image: url(../covers/implant-steps.svg); }
.cover.hash-cover-sleep-moon { background-image: url(../covers/sleep-moon.svg); }
.cover.hash-cover-sleep-waves { background-image: url(../covers/sleep-waves.svg); }
.cover.hash-cover-tooth-shield { background-image: url(../covers/tooth-shield.svg); }
.cover.hash-cover-tooth-root { background-image: url(../covers/tooth-root.svg); }
.cover.hash-cover-tooth-repair { background-image: url(../covers/tooth-repair.svg); }
.cover.hash-cover-smile-arc { background-image: url(../covers/smile-arc.svg); }
.cover.hash-cover-sparkle { background-image: url(../covers/sparkle.svg); }
.cover.hash-cover-veneer-layers { background-image: url(../covers/veneer-layers.svg); }

/* ── 카드 (테두리·6px·호버 제목 블루) ───────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.card {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-standard);
}
.card:hover { border-color: var(--border-soft); }
.card:hover .card-title { color: var(--brand-500); }
.card .cover { border-bottom: 1px solid var(--border); }
.card-link { display: block; color: var(--ink-700); height: 100%; }
.card-link:hover { text-decoration: none; }
.card-body { padding: 18px 20px 20px; }
.chip {
    display: inline-block; font-size: 12px; font-weight: 600; color: var(--brand-600);
    background: var(--brand-50); border-radius: var(--radius-pill); padding: 3px 11px; margin-bottom: 10px; letter-spacing: -0.01em;
}
.card-title {
    font-size: 18px; line-height: 1.5; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px;
    transition: color var(--dur-fast) var(--ease-standard);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-excerpt {
    color: var(--ink-500); font-size: 15px; line-height: 1.65; margin: 0 0 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { color: var(--ink-400); font-size: 13px; margin: 0; }

.badge-soon {
    display: inline-block; background: var(--bg-soft); color: var(--ink-400); border: 1px solid var(--border);
    border-radius: var(--radius-pill); padding: 6px 15px; font-size: .85rem; margin: 0; letter-spacing: -0.02em;
}

/* ── 빵부스러기 ─────────────────────────────────────── */
.breadcrumb { margin: 28px 0 0; font-size: .875rem; color: var(--ink-400); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.breadcrumb li + li::before { content: "›"; margin: 0 8px; color: var(--ink-200); }
.breadcrumb a { color: var(--ink-400); }
.breadcrumb a:hover { color: var(--brand-500); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-700); }

/* ── 글 제목·메타줄 ─────────────────────────────────── */
.post-title { font-size: 32px; line-height: 1.3; font-weight: 700; letter-spacing: -0.03em; margin: 18px 0 10px; color: var(--ink-900); }
.post-meta { color: var(--ink-400); font-size: .9rem; margin: 14px 0 8px; letter-spacing: -0.02em; }
.post-meta-author { font-weight: 600; color: var(--ink-600); }

.page-full .page-hero { background: var(--bg-cream); border: 1px solid var(--border-warm); border-radius: var(--radius-sm); padding: 40px 34px 32px; margin: 24px 0 0; }
.page-full .page-hero .post-title { margin: 0; }

/* ── 본문 타이포 ────────────────────────────────────── */
.post-content { margin-top: 26px; }
.post-content h2 { font-size: 1.4rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; margin: 2.75em 0 0.75em; }
.post-full .post-content h2::before {
    content: ""; display: inline-block; width: 7px; height: 18px;
    background: var(--brand-500); border-radius: var(--radius-xs); margin-right: 12px; vertical-align: -2px;
}
.post-content h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin: 2em 0 .6em; }
.post-content p { margin: 0 0 1.1em; line-height: 1.75; }
.post-content ul, .post-content ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.post-content li { margin-bottom: .4em; line-height: 1.7; }
.post-content strong { font-weight: 700; }
.post-content hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }
.post-content a { color: var(--brand-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-content a:hover { text-decoration-thickness: 2px; }

/* 직답 박스 (테두리형, 무섀도우) */
.post-full .post-content > p:first-child,
.page-full .post-content > p:first-child {
    background: var(--brand-50); border: 1px solid var(--brand-100); border-left: 4px solid var(--brand-500);
    border-radius: var(--radius-sm); padding: 22px 26px; line-height: 1.75;
}
.post-full .post-content > p:first-child a, .page-full .post-content > p:first-child a { color: var(--brand-600); }

/* 본문 안내 콜아웃 — 크림 */
.post-content blockquote {
    margin: 1.5em 0; padding: 12px 20px;
    border-left: 3px solid var(--border-warm); color: var(--ink-500);
    background: var(--bg-cream); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* 표 — 헤어라인 */
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; display: block; overflow-x: auto; }
.post-content th, .post-content td { border: 1px solid var(--border); padding: 11px 14px; text-align: left; vertical-align: top; }
.post-content thead th, .post-content th { background: var(--bg-soft); font-weight: 700; }
.post-content a[href^="http"]:not([href*="seoulskydent.com"])::after { content: " \2197"; font-size: .8em; }

/* ── 참고 자료 ──────────────────────────────────────── */
[id^="%EC%B0%B8%EA%B3%A0"] + ul { list-style: none; padding: 0; margin: 0 0 1.5em; counter-reset: refnum; }
[id^="%EC%B0%B8%EA%B3%A0"] + ul > li {
    counter-increment: refnum; position: relative; margin: 0; padding: 13px 0 13px 42px;
    border-bottom: 1px solid var(--border); font-size: .95rem;
}
[id^="%EC%B0%B8%EA%B3%A0"] + ul > li::before {
    content: counter(refnum); position: absolute; left: 0; top: 13px;
    width: 26px; height: 26px; border-radius: 50%; background: var(--brand-500); color: #fff;
    font-family: var(--font-en); font-size: .8rem; font-weight: 500; line-height: 26px; text-align: center;
}
[id^="%EC%B0%B8%EA%B3%A0"] + ul > li a { overflow-wrap: anywhere; }

/* ── FAQ ────────────────────────────────────────────── */
[id^="%EC%9E%90%EC%A3%BC-%EB%AC%BB%EB%8A%94"] ~ p > strong:first-child { display: block; margin-bottom: .3em; color: var(--brand-600); }
[id^="%EC%9E%90%EC%A3%BC-%EB%AC%BB%EB%8A%94"] ~ p:has(> strong:first-child) { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; }
.faq-item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0; margin: 0 0 10px; }
.faq-item summary { cursor: pointer; padding: 15px 18px; font-weight: 700; color: var(--ink-700); list-style: none; border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-standard); }
.faq-item summary:hover { color: var(--brand-500); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--ink-400); font-weight: 400; }
.faq-item[open] summary { color: var(--brand-600); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-answer { padding: 0 18px 16px; margin: 0; }

/* ── 저자 박스 — 크림 카드 ──────────────────────────── */
.author-box { margin: 52px 0 0; padding: 22px 24px; background: var(--bg-cream); border: 1px solid var(--border-warm); border-radius: var(--radius-sm); font-size: .95rem; }
.author-box p { margin: 0 0 6px; }
.author-name strong { font-size: 1rem; color: var(--ink-700); }
.author-bio { color: var(--ink-500); }
.author-notice { color: var(--ink-400); font-size: .8rem; margin-top: 8px; }

/* ── 관련 글 / 리스트 ───────────────────────────────── */
.related { margin-top: 52px; }
.related-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 18px; }
.related-title::before { content: ""; display: inline-block; width: 7px; height: 16px; background: var(--brand-500); border-radius: var(--radius-xs); margin-right: 11px; vertical-align: -2px; }
.list-header { margin: 40px 0 32px; }
.list-title { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 8px; }
.list-description { color: var(--ink-500); margin: 0; }
.pagination { max-width: 1040px; margin: 40px auto; padding: 0 20px; display: flex; justify-content: space-between; color: var(--ink-400); font-size: .9rem; }

/* ── 다크 INFORMATION 푸터 ──────────────────────────── */
.site-foot { background: var(--surface-dark); color: var(--on-dark-2); margin-top: 90px; border-top: none; font-size: .875rem; letter-spacing: -0.02em; }
.site-foot-in { max-width: 1040px; margin: 0 auto; padding: 56px 20px 44px; }
.foot-logo { height: 40px; width: auto; display: block; margin: 0 0 22px; }
.foot-head { font-family: var(--font-en); font-weight: 300; text-transform: uppercase; letter-spacing: .12em; font-size: 20px; color: var(--on-dark); margin: 0 0 4px; }
.foot-head small { display: block; font-family: var(--font-sans); text-transform: none; letter-spacing: -0.02em; font-size: 13px; color: var(--on-dark-muted); margin-top: 6px; }
.foot-info { margin: 22px 0 0; padding: 0; }
.foot-info p { margin: 0 0 8px; display: flex; gap: 14px; }
.foot-info .label { flex: 0 0 72px; color: var(--on-dark-muted); }
.foot-info .value { color: var(--on-dark-2); }
.foot-info .value strong, .foot-name { color: var(--on-dark); font-weight: 700; }
.foot-home a { color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 3px; }
.foot-home a:hover { color: var(--on-dark); }
.foot-bizline { margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border-on-dark); display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: .82rem; color: var(--on-dark-2); }
.foot-bizline strong { color: var(--on-dark-muted); font-weight: 500; margin-right: 8px; }
.foot-notice { margin: 18px 0 0; font-size: .8rem; color: var(--on-dark-muted); }
.foot-copy { margin: 12px 0 0; font-family: var(--font-en); font-weight: 300; font-size: .78rem; color: var(--on-dark-muted); letter-spacing: .02em; }

/* ── Koenig 카드 기본 (gscan 필수) ──────────────────── */
.kg-width-wide { position: relative; width: 85vw; min-width: 100%; margin: 1.5em auto; transform: translateX(calc(50% - 50vw * .85)); }
.kg-width-full { position: relative; width: 100vw; margin: 1.5em 0; transform: translateX(calc(50% - 50vw)); }
.kg-width-wide img, .kg-width-full img { width: 100%; }
.kg-gallery-container { display: flex; flex-direction: column; margin: 1.5em auto; max-width: 100%; }
.kg-gallery-row { display: flex; flex-direction: row; justify-content: center; }
.kg-gallery-image { margin: 0 6px 12px; }
.kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kg-bookmark-card { width: 100%; margin: 1.5em 0; }
.kg-bookmark-container { display: flex; color: var(--ink-700); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.kg-bookmark-content { flex-grow: 1; padding: 16px; display: flex; flex-direction: column; }
.kg-bookmark-title { font-weight: 700; font-size: .95rem; }
.kg-bookmark-description { color: var(--ink-500); font-size: .875rem; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kg-bookmark-metadata { display: flex; align-items: center; margin-top: 10px; font-size: .8rem; color: var(--ink-400); }
.kg-bookmark-icon { width: 18px; height: 18px; margin-right: 6px; }
.kg-bookmark-thumbnail { min-width: 140px; max-width: 200px; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width: 600px) {
    body { font-size: 16px; }
    .content, .site-nav, .site-foot-in, .hub-in { padding-left: 16px; padding-right: 16px; }
    .post-title { font-size: 26px; }
    .hub-title { font-size: 30px; }
    .hub-hero { padding: 48px 0 40px; }
    .hub-hero::after { font-size: 92px; bottom: -8%; }
    .hub-sec { padding: 48px 0 40px; }
    .sec-title { font-size: 23px; }
    .card-grid, .core-list { grid-template-columns: 1fr; }
    .feat-card { grid-template-columns: 1fr; }
    .feat-card .cover { min-height: 0; border-right: none; border-bottom: 1px solid var(--border); }
    .feat-body { padding: 22px; }
    .site-logo { height: 26px; }
    .site-ext-long { display: none; }
    .site-ext-short { display: inline; }
    .foot-info p { flex-direction: column; gap: 2px; }
}