@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Noto+Serif+KR:wght@400;500&display=swap');

:root{
  --sans:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:"Noto Serif KR",serif;
  --display:"Fraunces",serif;
}
html.light{
  --bg:#FBFAF8;--band:#F1ECE4;--ink:#1A1714;--ink2:#79736C;--ink3:#9A958A;
  --acc:#E2643A;--acc2:#F0A07E;--line:#EAE6E0;--line2:#F0ECE5;
  --chipbg:#FCEDE5;--chipbd:#F3CDBB;--chiptx:#C9542C;--btnbg:#F1ECE4;--bodytx:#2A2723;
}
html.dark{
  --bg:#16130F;--band:#1A1610;--ink:#ECE6DC;--ink2:#9A9389;--ink3:#6F6A60;
  --acc:#EC8A57;--acc2:#F4B488;--line:#2F2A22;--line2:#272219;
  --chipbg:#241F18;--chipbd:#3A332A;--chiptx:#F0A175;--btnbg:#241F18;--bodytx:#D8D2C7;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.7;
  -webkit-font-smoothing:antialiased;transition:background .4s,color .4s}
a{color:inherit}
.wrap{max-width:660px;margin:0 auto;padding:0 24px 60px}

/* sun glyph */
.ray{stroke:var(--acc2)}
.dome{fill:var(--acc)}

/* ===== home masthead ===== */
.sky{background:var(--band);border-bottom:1px solid var(--acc);padding:18px 24px 30px;text-align:center;transition:background .4s}
.topbar{max-width:660px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.nav{font-size:12.5px;color:var(--ink2)}
.nav a{color:var(--ink2);text-decoration:none;margin:0 4px}
.nav a:hover{color:var(--acc)}
.sep{color:var(--ink3);opacity:.7}
.brand{display:inline-block;text-decoration:none;margin-top:18px}
.brand svg{display:block;margin:0 auto}
.mark{font-family:var(--display);font-size:40px;font-weight:500;letter-spacing:-.01em;color:var(--ink);display:block;margin-top:2px}
.tagline{font-family:var(--serif);font-size:16px;line-height:1.7;color:var(--ink);margin:16px 0 0}
.by{font-size:12px;color:var(--ink2);margin:9px 0 0}

/* ===== compact header (inner pages) ===== */
.topbar-bar{border-bottom:0.5px solid var(--line);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:708px;margin:0 auto}
.brand-mini{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.mark-mini{font-family:var(--display);font-size:20px;font-weight:500;color:var(--ink)}
.topbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nav-mini{font-size:12px}

/* ===== toggle switch ===== */
.switch{background:none;border:none;padding:0;cursor:pointer;line-height:0}
.track{position:relative;display:inline-block;width:58px;height:30px;border-radius:999px;background:var(--btnbg);border:0.5px solid var(--line);transition:background .4s,border-color .4s}
.knob{position:absolute;top:2.5px;left:2.5px;width:24px;height:24px;border-radius:50%;background:var(--bg);border:0.5px solid var(--line);display:flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.34,1.3,.5,1),background .4s,border-color .4s}
html.dark .knob{transform:translateX(28px);background:var(--acc);border-color:var(--acc)}
.knob svg{position:absolute;transition:opacity .3s}
.k-sun{opacity:1;color:var(--acc)}
.k-moon{opacity:0;color:#16130F}
html.dark .k-sun{opacity:0}
html.dark .k-moon{opacity:1}

/* ===== graph ===== */
.gctx{font-size:12.5px;color:var(--ink3);text-align:center;padding:22px 0 4px;line-height:1.6}
.gwrap{position:relative;height:320px;width:100%}
.gwrap svg{display:block;width:100%;height:100%;cursor:grab}
.recenter{position:absolute;top:6px;right:0;width:30px;height:30px;border:0.5px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.recenter:hover{color:var(--ink)}

/* ===== list ===== */
.list{border-top:0.5px solid var(--line);padding-top:14px;margin-top:4px}
.lhead{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px;margin-bottom:4px}
.lt{font-family:var(--serif);font-size:15px;color:var(--ink)}
.lt b{color:var(--acc);font-weight:500}
.clear{font-size:12px;color:var(--ink2);background:var(--btnbg);border:0.5px solid var(--line);border-radius:20px;padding:5px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;flex:none;font-family:var(--sans)}
.clear:hover{color:var(--ink)}
.item{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-top:0.5px solid var(--line2);text-decoration:none;color:inherit}
.item:first-child{border-top:none}
.item:hover .itt{color:var(--acc)}
.num{font-family:var(--display);font-size:12.5px;color:var(--acc);flex:none;min-width:46px;letter-spacing:.02em}
.itt{font-family:var(--serif);font-size:15.5px;color:var(--ink);line-height:1.45;transition:color .15s}
.itm{font-size:11.5px;color:var(--ink3);margin-top:3px}
.itm b{color:var(--acc);font-weight:500}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:12.5px;color:var(--chiptx);background:var(--chipbg);border:0.5px solid var(--chipbd);border-radius:20px;padding:4px 12px;text-decoration:none;cursor:pointer}
.chip:hover{filter:brightness(.97)}

/* ===== article (post) ===== */
.article{max-width:600px;margin:0 auto;padding:40px 0 20px}
.a-meta{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12.5px;color:var(--ink3);flex-wrap:wrap}
.a-cat{color:var(--acc);font-weight:500;text-decoration:none}
.a-title{font-family:var(--serif);font-size:27px;font-weight:500;line-height:1.4;text-align:center;color:var(--ink);margin:14px 0 0}
.a-body{margin-top:26px}
.a-body p{font-size:16px;line-height:1.9;color:var(--bodytx);margin:0 0 18px}
.a-body h2{font-family:var(--serif);font-size:20px;font-weight:500;margin:30px 0 12px;color:var(--ink)}
.a-body blockquote{font-family:var(--serif);font-size:18px;color:var(--ink);border-left:2px solid var(--acc);margin:24px 0;padding-left:18px;line-height:1.6}
.a-body a{color:var(--acc)}
.a-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:30px;padding-top:20px;border-top:0.5px solid var(--line2)}
.a-sign{font-family:var(--serif);color:var(--ink2);text-align:center;margin-top:30px;font-size:14px}
.a-back{text-align:center;margin-top:26px}
.a-back a{color:var(--ink2);text-decoration:none;font-size:13px}
.a-back a:hover{color:var(--acc)}

/* ===== list page (tags/categories) ===== */
.list-page{padding:36px 0 10px}
.lp-title{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--ink);margin:0 0 14px;display:flex;align-items:baseline;gap:10px}
.lp-hash{color:var(--acc)}
.lp-count{font-family:var(--sans);font-size:13px;color:var(--ink3);font-weight:400}

/* ===== footer ===== */
.foot{border-top:0.5px solid var(--line);margin-top:10px}
.foot-in{max-width:660px;margin:0 auto;padding:22px 24px;text-align:center;font-size:12px;color:var(--ink3)}

@media (max-width:520px){
  .mark{font-size:34px}
  .a-title{font-size:23px}
}

.profile-photo{
  display:block;
  width:140px;
  height:140px;
  object-fit:cover;
  border-radius:50%;
  margin:0 auto 28px;
  border:1px solid var(--line);
}

.about-photo{
  display:block;
  width:100%;
  max-width:460px;
  height:auto;
  margin:8px auto 28px;
  border-radius:14px;
}

.a-body img{display:block;max-width:100%;height:auto;margin:24px auto;border-radius:12px}