@charset "utf-8";
/* 숨앤잠 이비인후과 블로그 화면
   홈(site/pub/style.css)과 색·글꼴·헤더·푸터 모양을 맞췄지만 파일은 따로다 — 수정 모드로 site/ 를 통째로
   바꿔도 블로그가 깨지지 않게. 홈의 디자인을 크게 바꾸면 이 파일의 토큰과 헤더·푸터도 함께 맞춰 준다. */

:root {
    --navy-950: #060f29;
    --navy-900: #0a1a3d;
    --navy-800: #10265a;
    --navy-700: #193c8a;
    --blue-600: #1253b2;
    --sky-500: #1bbae3;
    --sky-300: #86dbf3;
    --ink: #121a2c;
    --text: #3b4457;
    --muted: #7b8499;
    --line: #e2e7f0;
    --line-soft: #edf0f6;
    --bg-soft: #f6f8fc;
    --bg-tint: #eef3fb;
    --grad: linear-gradient(120deg, #1253b2 0%, #1b8fd6 55%, #1bbae3 100%);
    --shadow-sm: 0 1px 2px rgb(10 26 61 / .05), 0 6px 18px rgb(10 26 61 / .06);
    --shadow-md: 0 2px 6px rgb(10 26 61 / .06), 0 18px 48px rgb(10 26 61 / .10);
    --r-lg: 28px;
    --r-md: 18px;
    --r-sm: 12px;
    --header-h: 64px;
    --wrap: 1160px;
    --gutter: max(1.5rem, calc((100vw - var(--wrap)) / 2));
    --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-serif: 'Noto Serif KR', 'Nanum Myeongjo', 'AppleMyungjo', serif;
    --font-display: 'Cormorant Garamond', 'Noto Serif KR', serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, p, a, em, img, strong, small, dl, dt, dd, ol, ul, li,
figure, figcaption, footer, header, nav, section, main, article, aside, button, time { margin: 0; padding: 0; border: 0; font: inherit; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { background: none; color: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
svg { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--sky-500); outline-offset: 3px; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
html.menu-open { overflow: hidden; }
body { display: flex; flex-direction: column; min-height: 100vh; background: #fff; color: var(--text);
    font: 400 1rem/1.7 var(--font-sans); letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
main { flex: 1; padding-top: var(--header-h); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; height: 3.25rem; padding: 0 1.6rem; border-radius: 999px;
    font: 600 1rem/1 var(--font-sans); white-space: nowrap; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s; }
.btn svg { width: 1.125rem; height: 1.125rem; }
.btn-light { background: #fff; color: var(--navy-900); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgb(0 0 0 / .25); }
.btn-ghost { border: 1px solid rgb(255 255 255 / .4); color: #fff; }
.btn-ghost:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .7); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 28px rgb(18 83 178 / .30); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgb(18 83 178 / .40); }
.eyebrow { display: inline-flex; align-items: center; gap: .8rem; color: var(--sky-500); font: italic 500 1.375rem/1 var(--font-display); }
.eyebrow::before { content: ''; width: 2.5rem; height: 1px; background: currentColor; opacity: .7; }

/* ─── 헤더 · 모바일 메뉴 (홈의 스크롤한 뒤 모양과 같다) ─── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: 1.5rem;
    height: var(--header-h); padding: 0 var(--gutter); color: var(--ink); background: rgb(255 255 255 / .94);
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 1px 0 rgb(10 26 61 / .07), 0 10px 30px rgb(10 26 61 / .06); transition: background .4s, color .4s, box-shadow .4s; }
.brand { flex: none; }
.brand img { width: auto; height: 1.625rem; transition: filter .4s; }
.gnb { margin-left: auto; }
.gnb ul { display: flex; align-items: center; gap: .125rem; }
.gnb a { display: block; padding: .6rem .95rem; border-radius: 999px; font-weight: 500; white-space: nowrap; transition: background .25s, color .25s; }
.gnb a:hover, .gnb a.active { background: var(--bg-tint); color: var(--blue-600); }
.header-tel { display: inline-flex; align-items: center; gap: .5rem; height: 2.625rem; padding: 0 1.125rem; border-radius: 999px;
    background: var(--grad); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 8px 22px rgb(18 83 178 / .28); }
.header-tel svg { width: 1.0625rem; height: 1.0625rem; }
.menu-btn { display: none; position: relative; width: 2.75rem; height: 2.75rem; margin: 0 -.5rem 0 auto; border-radius: 50%; }
.menu-btn span { position: absolute; left: .6875rem; right: .6875rem; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease), opacity .25s; }
.menu-btn span:nth-child(1) { top: 1rem; }
.menu-btn span:nth-child(2) { top: 1.34rem; }
.menu-btn span:nth-child(3) { top: 1.68rem; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(.34rem) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-.34rem) rotate(-45deg); }
.drawer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; display: flex; flex-direction: column; padding: 6rem 1.75rem 2rem; overflow: auto;
    background: radial-gradient(120% 80% at 100% 0%, #17306b 0%, var(--navy-900) 50%, var(--navy-950) 100%); color: #fff;
    opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.menu-open .drawer { opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s; }
.menu-open .site-header { color: #fff; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-open .brand img { filter: brightness(0) invert(1); }
.drawer li { border-bottom: 1px solid rgb(255 255 255 / .12); }
.drawer li a { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 0; font: 500 1.5rem/1.3 var(--font-serif); letter-spacing: -.03em; }
.drawer li a svg { width: 1.125rem; height: 1.125rem; opacity: .5; }
.drawer-foot { margin-top: auto; padding-top: 2.5rem; color: rgb(255 255 255 / .7); font-size: .9375rem; }
.drawer-foot a { display: block; margin-bottom: .4rem; color: #fff; font: 600 1.75rem/1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) {
    .gnb, .header-tel { display: none; }
    .menu-btn { display: block; }
    .brand img { height: 1.5rem; }
}

/* ─── 푸터 ─── */
.site-footer { padding: 3.5rem var(--gutter) 2.5rem; background: var(--navy-950); color: rgb(255 255 255 / .66); font-size: .9063rem; line-height: 1.6; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgb(255 255 255 / .12); }
.footer-logo { width: auto; height: 1.875rem; filter: brightness(0) invert(1); }
.footer-links { display: flex; gap: .5rem; }
.footer-links a { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 1rem; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; color: #fff; transition: background .3s, border-color .3s; }
.footer-links a:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .5); }
.footer-links svg { width: 1rem; height: 1rem; }
.footer-info { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin-top: 1.75rem; }
.footer-info a { color: #fff; }
.copyright { margin-top: .9rem; color: rgb(255 255 255 / .4); font-size: .75rem; letter-spacing: .06em; }
@media (max-width: 599px) {
    .footer-top { flex-direction: column; align-items: flex-start; }
    .footer-info { display: block; }
}

/* ─── 머리띠(목록·글 공통) ─── */
.page-head { position: relative; overflow: hidden; padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter); color: #fff;
    background: radial-gradient(110% 120% at 85% 0%, #17306b 0%, var(--navy-900) 48%, var(--navy-950) 100%); }
.page-head::before { content: ''; position: absolute; left: -16rem; bottom: -24rem; width: 42rem; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgb(27 186 227 / .24), rgb(27 186 227 / 0)); }
.page-head > * { position: relative; }
.page-head .eyebrow { color: var(--sky-300); }
.page-head h1 { margin-top: .85rem; font: 500 clamp(2rem, 4vw, 3rem)/1.3 var(--font-serif); letter-spacing: -.04em; text-wrap: balance; }
.page-head .lead { max-width: 40rem; margin-top: 1rem; color: rgb(255 255 255 / .75); font-size: 1.0625rem; }

/* ─── 목록 ─── */
.blog-list { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(5rem, 9vw, 8rem); }
.cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.cats a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.05rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: .9375rem; font-weight: 500; transition: background .25s, color .25s, border-color .25s; }
.cats a small { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.cats a:hover { border-color: var(--blue-600); color: var(--blue-600); }
.cats a.on { border-color: transparent; background: var(--navy-800); color: #fff; }
.cats a.on small { color: rgb(255 255 255 / .6); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.75rem; }
.card { display: flex; flex-direction: column; }
.card .thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-md); background: linear-gradient(135deg, #e6eefb, #f3f7fd); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.card:hover .thumb img { transform: scale(1.05); }
.card .thumb .blank { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: grid; place-items: center; color: #b9c9e6; font: italic 500 1.5rem/1 var(--font-display); }
.card .cat { margin-top: 1.25rem; color: var(--blue-600); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.card h2 { margin-top: .45rem; color: var(--ink); font-size: 1.25rem; font-weight: 600; line-height: 1.45; letter-spacing: -.03em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .25s; }
.card:hover h2 { color: var(--blue-600); }
.card .sum { margin-top: .55rem; font-size: .9375rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { margin-top: .9rem; color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.empty { display: grid; justify-items: center; gap: .9rem; padding: 5rem 1.5rem; border: 1px dashed var(--line); border-radius: var(--r-lg); text-align: center; }
.empty svg { width: 2.5rem; height: 2.5rem; color: var(--sky-500); stroke-width: 1.25; }
.empty strong { color: var(--ink); font: 500 1.375rem/1.4 var(--font-serif); letter-spacing: -.04em; }
.empty .btn { margin-top: .75rem; }
.pager { display: flex; justify-content: center; align-items: center; gap: .375rem; margin-top: 4rem; font-variant-numeric: tabular-nums; }
.pager a, .pager span { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .5rem; border-radius: 999px; color: var(--text); font-weight: 500; transition: background .25s, color .25s; }
.pager a:hover { background: var(--bg-tint); color: var(--blue-600); }
.pager .on { background: var(--navy-800); color: #fff; }
.pager svg { width: 1.125rem; height: 1.125rem; }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .cards { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ─── 글 ─── */
.crumb { display: flex; flex-wrap: wrap; gap: .4rem; color: rgb(255 255 255 / .6); font-size: .875rem; }
.crumb li + li::before { content: '/'; margin-right: .4rem; opacity: .5; }
.crumb a:hover { color: #fff; }
.post-head h1 { max-width: 50rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: 1.25rem; color: rgb(255 255 255 / .7); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.post-meta span + span::before { content: '·'; margin-right: 1rem; opacity: .6; }
.post { display: grid; grid-template-columns: minmax(0, 46rem) 15rem; justify-content: center; gap: 4.5rem; padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(4rem, 8vw, 7rem); }
.post.no-toc { grid-template-columns: minmax(0, 46rem); }
.post-hero { overflow: hidden; margin-bottom: 2.5rem; border-radius: var(--r-md); }
.post-hero img { width: 100%; }
.key { margin-bottom: 2.5rem; padding: 1.6rem 1.75rem; border-radius: var(--r-md); background: var(--bg-tint); }
.key strong { display: block; margin-bottom: .5rem; color: var(--blue-600); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; }
.key p { color: var(--ink); font-weight: 500; line-height: 1.75; }
.key ul { display: grid; gap: .45rem; color: var(--ink); font-weight: 500; }
.key li { position: relative; padding-left: 1rem; }
.key li::before { content: ''; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--sky-500); }

.post-body { color: var(--text); font-size: 1.0938rem; line-height: 1.95; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.4em; }
.post-body h2 { margin: 2.6em 0 .9em; padding-top: 1.1rem; color: var(--ink); font-size: 1.625rem; font-weight: 700; line-height: 1.45; letter-spacing: -.035em; scroll-margin-top: calc(var(--header-h) + 1.5rem);
    background: linear-gradient(var(--blue-600), var(--sky-500)) left top / 1.75rem 3px no-repeat; }
.post-body h3 { margin: 2.1em 0 .7em; color: var(--ink); font-size: 1.25rem; font-weight: 700; line-height: 1.5; letter-spacing: -.03em; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.post-body h4, .post-body h5, .post-body h6 { margin: 1.8em 0 .6em; color: var(--ink); font-size: 1.0938rem; font-weight: 700; }
.post-body strong, .post-body b { color: var(--ink); font-weight: 700; }
.post-body em, .post-body i { font-style: italic; }
.post-body mark { padding: 0 .15em; background: linear-gradient(transparent 55%, #cdeefa 55%); color: inherit; }
.post-body a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body ul, .post-body ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin: .3em 0; }
.post-body li::marker { color: var(--sky-500); }
.post-body img { max-width: 100%; margin: 2em auto; border-radius: var(--r-sm); }
.post-body figure { margin: 2.2em 0; }
.post-body figure img { margin: 0 auto; }
.post-body figcaption { margin-top: .7rem; color: var(--muted); font-size: .875rem; line-height: 1.6; text-align: center; }
.post-body blockquote { margin: 2em 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--sky-500); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--bg-soft); color: var(--ink); }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body hr { margin: 3em 0; border: 0; border-top: 1px solid var(--line); }
.post-body table { display: block; width: 100%; margin: 2em 0; overflow-x: auto; border-collapse: collapse; font-size: .9688rem; line-height: 1.6; }
.post-body th, .post-body td { padding: .75rem 1rem; border: 1px solid var(--line); text-align: left; }
.post-body th { background: var(--bg-soft); color: var(--ink); font-weight: 600; white-space: nowrap; }
.post-body code { padding: .15em .4em; border-radius: 6px; background: var(--bg-tint); font-size: .9em; }
.post-body pre { margin: 2em 0; padding: 1.25rem; overflow-x: auto; border-radius: var(--r-sm); background: var(--navy-900); color: #e6edf9; line-height: 1.6; }
.post-body pre code { padding: 0; background: none; }
.post-body iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 2em 0; border: 0; border-radius: var(--r-sm); }
.post-body details { margin: 1em 0; padding: .9rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.post-body summary { color: var(--ink); font-weight: 600; cursor: pointer; }

.faq { margin-top: 4rem; }
.faq > h2, .related > h2 { color: var(--ink); font: 500 1.625rem/1.3 var(--font-serif); letter-spacing: -.04em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { margin-top: 1.25rem; border-top: 1px solid var(--ink); }
.faq summary { position: relative; padding: 1.25rem 2.5rem 1.25rem 2rem; color: var(--ink); font-weight: 600; line-height: 1.55; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: 'Q'; position: absolute; left: 0; color: var(--sky-500); font: italic 500 1.375rem/1.2 var(--font-display); }
.faq summary::after { content: ''; position: absolute; right: .5rem; top: 1.7rem; width: .55rem; height: .55rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(.3rem) rotate(-135deg); }
.faq details p { padding: 0 1rem 1.4rem 2rem; line-height: 1.8; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; }
.tags li { padding: .35rem .85rem; border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-size: .875rem; }
.tags li::before { content: '#'; margin-right: .1rem; color: var(--sky-500); }

.cta { position: relative; overflow: hidden; margin-top: 4rem; padding: 2.5rem 2.5rem 2.4rem; border-radius: var(--r-lg); color: #fff;
    background: radial-gradient(120% 140% at 100% 0%, #1b4fa8 0%, var(--navy-800) 50%, var(--navy-950) 100%); }
.cta h2 { font: 500 1.5rem/1.4 var(--font-serif); letter-spacing: -.04em; }
.cta p { margin-top: .5rem; color: rgb(255 255 255 / .72); font-size: .9688rem; }
.cta .btns { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.6rem; }

.toc { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; max-height: calc(100vh - var(--header-h) - 4rem); overflow: auto; padding-left: 1.25rem; border-left: 1px solid var(--line); }
.toc strong { display: block; margin-bottom: .9rem; color: var(--sky-500); font: italic 500 1.125rem/1 var(--font-display); }
.toc ol { display: grid; gap: .6rem; font-size: .875rem; line-height: 1.5; }
.toc li.sub { padding-left: .85rem; }
.toc a { color: var(--muted); transition: color .2s; }
.toc a:hover, .toc a.on { color: var(--ink); }
.toc a.on { font-weight: 600; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; }
.post-nav a { display: block; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .25s, box-shadow .35s var(--ease), transform .35s var(--ease); }
.post-nav a:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-nav small { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .8125rem; }
.post-nav small svg { width: .9rem; height: .9rem; }
.post-nav .next { text-align: right; }
.post-nav .next small { justify-content: flex-end; }
.post-nav span { display: block; margin-top: .3rem; color: var(--ink); font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-nav .only-next { grid-column: 2; }
.to-list { display: flex; justify-content: center; margin-top: 2.5rem; }
.to-list a { display: inline-flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 1.5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--navy-700); font-weight: 600; transition: border-color .25s, color .25s; }
.to-list a:hover { border-color: var(--blue-600); color: var(--blue-600); }

.related { padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter); background: var(--bg-soft); }
.related .cards { margin-top: 2rem; }
@media (max-width: 1099px) {
    .post { grid-template-columns: minmax(0, 46rem); }
    .toc { display: none; }
}
@media (max-width: 639px) {
    .post-body { font-size: 1.0313rem; line-height: 1.9; }
    .post-body h2 { font-size: 1.4375rem; }
    .post-body h3 { font-size: 1.1875rem; }
    .cta { padding: 2rem 1.5rem; }
    .cta .btn { flex: 1 1 100%; }
    .post-nav { grid-template-columns: 1fr; }
    .post-nav .only-next { grid-column: 1; }
    .post-nav .next { text-align: left; }
    .post-nav .next small { justify-content: flex-start; }
}

/* ─── 찾을 수 없는 페이지 ─── */
.notfound { display: grid; justify-items: center; align-content: center; gap: 1rem; min-height: 60vh; padding: 5rem 1.5rem; text-align: center; }
.notfound b { font: italic 500 clamp(5rem, 16vw, 9rem)/1 var(--font-display); font-variant-numeric: lining-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound h1 { color: var(--ink); font: 500 1.75rem/1.4 var(--font-serif); letter-spacing: -.04em; }
.notfound .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-top: 1rem; }
.notfound .btn-line { border: 1px solid var(--line); color: var(--navy-700); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}