﻿@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@600;700;900&family=Noto+Sans+KR:wght@400;500;700&display=swap');
:root{--bg:#faf6ef;--card:#fff;--ink:#1c1b2e;--sub:#5c5768;--line:#e6ded0;--primary:#1e3a5f;--primary-light:#2d4a73;--accent:#d68851;--accent-light:#d6885144}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Noto Sans KR',system-ui,sans-serif;line-height:1.75;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.topbar{background:var(--primary);color:#fff}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px}
.brand{font-family:'Noto Serif KR',serif;font-weight:900;font-size:21px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
.brand small{display:block;font-family:'Noto Sans KR',sans-serif;font-weight:500;font-size:11px;color:var(--accent-light);letter-spacing:.14em;margin-top:2px}
.top-cta{background:var(--accent);color:#fff;font-weight:700;padding:9px 18px;border-radius:999px;font-size:14px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.gnb{background:rgba(255,255,255,.09)}
.gnb-in{display:flex;gap:24px;overflow-x:auto;padding:11px 24px;font-size:13.5px;color:#e8e3d8;white-space:nowrap;scrollbar-width:none}
.gnb-in::-webkit-scrollbar{display:none}
.gnb a:hover{color:var(--accent-light)}
.hero{padding:72px 0 64px;background:radial-gradient(900px 380px at 85% -10%,var(--accent-light) 0%,transparent 60%),var(--bg)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.kicker{font-size:12px;letter-spacing:.28em;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:16px}
.hero h1{font-family:'Noto Serif KR',serif;font-weight:900;font-size:clamp(1.7rem,4.2vw,2.6rem);line-height:1.28;letter-spacing:-.02em;margin-bottom:20px}
.hero .lead{color:var(--sub);font-size:1.02rem;margin-bottom:30px}
.btn-o{display:inline-block;border:2px solid var(--primary);color:var(--primary);font-weight:800;padding:14px 32px;border-radius:4px;font-size:15.5px;transition:.22s;letter-spacing:.02em}
.btn-o:hover{background:var(--primary);color:#fff}
.hero-figure{position:relative}
.hero-figure img{border-radius:6px;box-shadow:0 24px 60px rgba(28,27,46,.18)}
.hero-figure::after{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1.5px solid var(--accent);border-radius:6px;z-index:-1}
.sec{padding:64px 0}
.sec-head{text-align:center;margin-bottom:40px}
.sec-head .kicker{margin-bottom:10px}
.sec-head h2{font-family:'Noto Serif KR',serif;font-size:1.7rem;font-weight:900;letter-spacing:-.02em}
.sec-head p{color:var(--sub);margin-top:8px;font-size:.95rem}
.look{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.look-item{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.24s;display:block}
.look-item:hover{transform:translateY(-7px);box-shadow:0 20px 44px rgba(28,27,46,.14)}
.look-item img{width:100%;aspect-ratio:4/5;object-fit:cover}
.look-cap{padding:16px 18px}
.look-cap .no{font-family:'Noto Serif KR',serif;color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.18em}
.look-cap h3{font-family:'Noto Serif KR',serif;font-size:1.02rem;font-weight:700;margin:6px 0 4px}
.look-cap p{font-size:.8rem;color:var(--sub)}
.toc{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 0}
.toc-row{display:flex;align-items:baseline;gap:18px;padding:15px 26px;border-bottom:1px solid var(--line);transition:.18s}
.toc-row:last-child{border-bottom:none}
.toc-row:hover{background:var(--bg)}
.toc-row .num{font-family:'Noto Serif KR',serif;color:var(--accent);font-weight:900;font-size:.95rem;min-width:30px}
.toc-row h3{font-size:1rem;font-weight:700}
.toc-row p{font-size:.82rem;color:var(--sub);margin-left:auto;text-align:right;max-width:44%;display:none}
@media(min-width:860px){.toc-row p{display:block}}
.cta-sec{background:var(--primary);color:#fff;padding:54px 0;text-align:center}
.cta-sec h3{font-family:'Noto Serif KR',serif;font-size:1.45rem;font-weight:900;margin-bottom:20px}
.cta-sec .btn-o{border-color:var(--accent);color:#fff}
.cta-sec .btn-o:hover{background:var(--accent);border-color:var(--accent)}
.phead{padding:56px 0 40px;border-bottom:1px solid var(--line);background:var(--bg)}
.phead h1{font-family:'Noto Serif KR',serif;font-size:clamp(1.4rem,3.6vw,2rem);font-weight:900;letter-spacing:-.02em}
.phead p{color:var(--sub);margin-top:10px}
.crumb{font-size:.8rem;color:var(--sub);margin-bottom:18px}
.crumb a{color:var(--primary);font-weight:700}
.article{padding:46px 0;max-width:800px;margin:0 auto}
.article h2{font-family:'Noto Serif KR',serif;font-size:1.28rem;font-weight:700;margin:40px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.article p{color:#3b3749;margin-bottom:13px}
.article .aimg{border-radius:8px;overflow:hidden;box-shadow:0 16px 40px rgba(28,27,46,.14);margin:30px 0}
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0}
.rel a{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card);transition:.2s;display:block}
.rel a:hover{transform:translateY(-4px)}
.rel img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rel span{display:block;padding:11px 12px;font-size:.78rem;font-weight:700}
footer{background:#12333d;color:#b9d2d8;padding:40px 0 88px;text-align:center;font-size:.85rem}
footer a{color:#fff;font-weight:700}
.info-bar{position:fixed;bottom:0;left:0;right:0;background:var(--primary);color:#fff;padding:12px 0;font-size:.85rem;transform:translateY(100%);transition:.35s;z-index:90;text-align:center}
.info-bar.show{transform:translateY(0)}
.info-bar a{color:var(--accent-light);font-weight:700}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:34px}.look{grid-template-columns:repeat(2,1fr)}.rel{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.look{grid-template-columns:1fr}}
