:root{--bg:#fdfbf8;--cream:#f8f3ed;--sand:#ece3d8;--surface:#fff;--ink:#3a312b;--muted:#857a71;--line:#eee6dc;
  --taupe:#9c8473;--taupe-deep:#7d6656;--on-taupe:#fffaf5;--accent:#9c8473;--accent-soft:#f5ede4;color-scheme:light;
  --display:"Gowun Batang","Nanum Myeongjo",serif;--script:"Cormorant Garamond","Times New Roman",serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --gut:max(16px,env(safe-area-inset-left,0px));--gut-r:max(16px,env(safe-area-inset-right,0px))}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.8;word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--taupe-deep)}
.in{max-width:1160px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.eyebrow{font-family:var(--script);font-style:italic;font-size:clamp(1.2rem,3vw,1.5rem);color:var(--accent);line-height:1.2}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.4;text-wrap:balance}
header.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
header.top .in{display:flex;align-items:center;gap:16px;height:64px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.08rem}
.logo img{height:38px;width:auto;border-radius:8px;background:#fff;padding:2px;box-shadow:0 0 0 1px var(--line)}
.logo small{font-family:var(--body);font-weight:400;font-size:.78rem;opacity:.8;margin-left:4px}
nav.gnb{margin-left:auto;display:flex;gap:26px;font-size:.95rem}
nav.gnb a{color:var(--ink);text-decoration:none;opacity:.9}
nav.gnb a:hover,nav.gnb a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:6px}
.hdr-cta{display:none}
@media (max-width:760px){nav.gnb{display:none}}
@media (min-width:900px){.hdr-cta{display:inline-flex;align-items:center;min-height:42px;padding:0 22px;border-radius:999px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}}
.crumb{font-size:.85rem;color:var(--muted);padding-top:28px}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{text-decoration:underline}
.crumb span{margin:0 6px;opacity:.6}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;font-weight:600;text-decoration:none;border:1px solid var(--taupe);font-size:.97rem}
.btn.pri{background:var(--taupe);color:var(--on-taupe)}
.btn.sec{color:var(--taupe-deep);background:var(--surface)}
.btns{display:flex;gap:10px;flex-wrap:wrap}
/* 목록 */
.col-head{padding-block:36px 28px}
.col-head h1{font-size:clamp(1.8rem,5vw,2.6rem);margin:6px 0 10px}
.col-head p{color:var(--muted);margin:0;max-width:40em}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 8px}
.chips button{font:inherit;font-size:.9rem;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chips button[aria-pressed=true]{background:var(--taupe);border-color:var(--taupe);color:var(--on-taupe)}
.posts{list-style:none;margin:0;padding:0 0 80px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:700px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1050px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{display:flex;flex-direction:column;gap:10px;height:100%;padding:26px 24px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -20px rgba(60,40,25,.5)}
.pcard .cat{font-size:.8rem;font-weight:600;color:var(--taupe-deep);background:var(--accent-soft);padding:3px 10px;border-radius:999px;align-self:flex-start}
.pcard h2,.pcard h3{font-size:1.18rem;margin:0}
.pcard p{margin:0;color:var(--muted);font-size:.93rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard time{margin-top:auto;font-size:.82rem;color:var(--muted)}
.empty{padding:60px 0 100px;color:var(--muted)}
/* 글 */
article.post{max-width:720px;margin:0 auto;padding:12px 0 40px}
.post-head{padding:18px 0 26px;border-bottom:1px solid var(--line);margin-bottom:30px}
.post-head h1{font-size:clamp(1.6rem,4.6vw,2.3rem);margin:8px 0 14px}
.post-head .lead{font-size:1.05rem;color:var(--muted);margin:0 0 16px}
.byline{display:flex;align-items:center;gap:12px;font-size:.88rem;color:var(--muted)}
.byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:top}
.byline b{color:var(--ink);font-weight:600}
.toc{background:var(--cream);border-radius:14px;padding:18px 22px;margin:0 0 34px;font-size:.93rem}
.toc b{display:block;font-family:var(--display);margin-bottom:6px}
.toc ol{margin:0;padding-left:1.3em}.toc a{color:var(--ink);text-decoration:none}.toc a:hover{text-decoration:underline}
.body h2{font-size:1.45rem;margin:48px 0 14px;padding-top:4px}
.body h3{font-size:1.15rem;margin:30px 0 10px}
.body p{margin:0 0 18px}
.body ul,.body ol{margin:0 0 20px;padding-left:1.3em}.body li{margin-bottom:6px}
.body strong{color:var(--taupe-deep)}
.body sup{font-size:.68em;color:var(--muted);margin-left:1px}
.body .tip{background:var(--accent-soft);border-left:3px solid var(--taupe);border-radius:0 12px 12px 0;padding:16px 20px;margin:0 0 22px}
.body .tip>:last-child{margin-bottom:0}
.body .tip b:first-child{display:block;margin-bottom:4px;font-family:var(--display)}
.body table{width:100%;border-collapse:collapse;font-size:.93rem;margin:0 0 22px}
.body th,.body td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.body th{background:var(--cream);font-weight:600}
.body .tbl{overflow-x:auto}
.body figure{margin:0 0 24px}.body figure img{border-radius:14px}
.body figcaption{font-size:.84rem;color:var(--muted);margin-top:8px}
.sources{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.sources b{display:block;color:var(--ink);margin-bottom:6px}
.sources ol{padding-left:1.3em;margin:0}.sources a{color:var(--muted)}
.author{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center;margin:40px 0 0;padding:22px;border-radius:18px;background:var(--cream)}
.author img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:top}
.author b{font-family:var(--display);font-size:1.05rem}
.author p{margin:4px 0 0;font-size:.88rem;color:var(--muted);line-height:1.65}
.cta{margin:28px 0 0;padding:28px 24px;border-radius:18px;border:1px solid var(--line);background:var(--surface);text-align:center}
.cta h2{font-size:1.25rem;margin:0 0 6px}
.cta p{margin:0 0 18px;color:var(--muted);font-size:.93rem}
.cta .btns{justify-content:center}
.related{max-width:720px;margin:0 auto;padding:10px 0 80px}
.related>h2{font-size:1.2rem;margin:0 0 16px}
.related .posts{padding:0;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.related .posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.back{display:inline-block;margin-top:22px;font-size:.92rem}
.notice{font-size:.85rem;color:var(--muted);padding-block:24px;border-top:1px solid var(--line)}
footer{background:var(--cream);color:var(--muted);border-top:1px solid var(--line);font-size:.82rem;padding-block:40px 120px}
footer .in{display:flex;flex-direction:column;gap:6px}
footer a{color:var(--ink)}footer .logo{margin-bottom:10px}
.quick{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:25;display:flex;flex-direction:column;gap:10px}
.quick a{width:52px;height:52px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;font-size:.66rem;font-weight:600;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 16px -10px rgba(60,40,25,.45)}
.quick svg{width:18px;height:18px}
.quick a.main{background:var(--taupe);color:var(--on-taupe);border-color:var(--taupe)}
@media (max-width:760px){
  .quick{left:0;right:0;bottom:0;flex-direction:row;gap:8px;padding:8px var(--gut-r) calc(8px + env(safe-area-inset-bottom,0px)) var(--gut);background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .quick a{flex:1;width:auto;height:46px;border-radius:10px;flex-direction:row;gap:6px;font-size:.85rem;box-shadow:none}
  footer{padding-bottom:110px}}