@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:url(../fonts/Pretendard-Regular.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:500;font-display:swap;src:url(../fonts/Pretendard-Medium.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:700;font-display:swap;src:url(../fonts/Pretendard-Bold.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:800;font-display:swap;src:url(../fonts/Pretendard-ExtraBold.woff2) format("woff2")}
:root{--ink:#1d2a2e;--sub:#5b6b70;--teal:#0f7b7b;--bg:#fbfaf7;--line:#e6e2da}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Pretendard,"Pretendard Variable","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:18px;line-height:1.85;word-break:keep-all;overflow-wrap:break-word}
.hero{position:relative;height:62vh;min-height:380px;max-height:620px;background:#0d3b3d url(../img/hero.jpg) center/cover;display:flex;align-items:flex-end}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(8,30,32,.85))}
.hero .in{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:0 24px 48px;color:#fff;width:100%}
.cat{display:inline-block;background:var(--teal);padding:4px 12px;border-radius:99px;font-size:14px;font-weight:700;letter-spacing:.05em}
.hero h1{font-size:40px;line-height:1.35;margin:14px 0 10px;font-weight:800}
.hero .meta{opacity:.85;font-size:15px}
.ai{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:2px 8px;border-radius:4px}
main{max-width:760px;margin:0 auto;padding:40px 24px 80px}
.lead{font-size:21px;line-height:1.75;color:#33464b;font-weight:500;border-left:4px solid var(--teal);padding-left:18px;margin:0 0 28px}
.notice{background:#fff4e5;border:1px solid #f3d6a8;color:#7a5216;font-size:14.5px;padding:12px 16px;border-radius:10px;margin-bottom:28px}
.toc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 26px;margin:28px 0 36px}
.toc b{font-size:15px;color:var(--teal);letter-spacing:.08em}.toc ol{margin:10px 0 0;padding-left:20px}.toc li{font-size:16px;line-height:1.9}.toc a{color:var(--ink);text-decoration:none}.toc a:hover{color:var(--teal)}
h2{font-size:27px;line-height:1.45;margin:56px 0 18px;padding-top:12px;border-top:2px solid var(--ink);scroll-margin-top:16px}
p{margin:0 0 1.25em}
blockquote{margin:40px 0;padding:8px 0 8px 28px;border-left:5px solid #e8836b;font-size:23px;line-height:1.6;font-weight:700;color:#2a3a3e}
.keypoint{background:#e8f4f3;border-radius:14px;padding:20px 24px;margin:32px 0}.keypoint strong{display:block;color:var(--teal);font-size:15px;letter-spacing:.06em;margin-bottom:6px}.keypoint p{margin:0;font-size:17px}
figure{margin:40px 0;position:relative}figure img{width:100%;display:block;border-radius:14px}figcaption{font-size:14px;color:var(--sub);text-align:center;margin-top:8px}
figure .ai{bottom:40px}
.summary{background:var(--ink);color:#f2f5f4;border-radius:18px;padding:28px 30px;margin:56px 0 28px}.summary h3{margin:0 0 12px;font-size:21px;color:#8fe0d8}.summary li{margin:6px 0;font-size:16.5px}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.tags li{background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px 14px;font-size:14.5px;color:var(--sub)}.tags li::before{content:"#"}
.ad{margin:36px auto;max-width:728px;height:90px;border:1px dashed #cfcac0;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#aaa39a;font-size:12px;background:#f5f3ee}
footer{text-align:center;color:var(--sub);font-size:13px;padding:30px;border-top:1px solid var(--line)}
@media(max-width:640px){body{font-size:17px}.hero{height:auto;min-height:440px}.hero h1{font-size:27px}.hero .in{padding-bottom:36px}main{padding:28px 18px 60px}.lead{font-size:18.5px}h2{font-size:22px;margin-top:44px}blockquote{font-size:19.5px;padding-left:18px}.ad{height:60px}.summary{padding:22px}}

@media print{@page{size:480px 800px;margin:28px 0 30px}body{font-size:17px;background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.hero{height:430px;min-height:0;max-height:none;break-after:avoid}.hero h1{font-size:26px}.hero .in{padding-bottom:30px}main{padding:24px 22px 0}
h2{font-size:22px;break-after:avoid;margin-top:36px}p{orphans:3;widows:3}
blockquote,.keypoint,figure,.summary,.toc,.notice{break-inside:avoid}.ad{height:40px;margin:20px auto}.lead{font-size:18px}blockquote{font-size:19px}footer{padding:16px}.tags{break-before:avoid}.summary{margin-bottom:14px}}
