:root{
  --ink:#1b1d22;
  --sub:#6b7280;
  --blue:#2456d6;
  --blue-soft:#eef3fc;
  --band:#f3f6fb;
  --green:#1a7f4e;
  --green-soft:#e8f5ee;
  --line:#e6e8ec;
  --line-2:#d6d9df;
  --bg:#ffffff;
  --body:'Pretendard Variable',-apple-system,'Apple SD Gothic Neo',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.75;font-weight:400;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:920px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}

.draft{background:#20242c;color:#c3c9d4;font-size:12px;text-align:center;padding:6px 12px}

/* top tabs, benelog-style */
.tabs{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tabs .in{display:flex;align-items:center;gap:4px;height:52px;overflow-x:auto;scrollbar-width:none}
.tabs .site{font-weight:700;font-size:15px;color:var(--ink);margin-right:14px;flex:none}
.tabs a.tab{font-size:14px;color:var(--sub);padding:6px 11px;border-radius:8px;flex:none}
.tabs a.tab:hover{color:var(--ink);background:#f2f4f7;text-decoration:none}
.tabs a.tab.on{color:var(--blue);font-weight:600}
.tabs .sp{margin-left:auto}
.tabs a.pdf{font-size:13px;color:var(--ink);border:1px solid var(--line-2);
  border-radius:8px;padding:6px 12px;flex:none}
.tabs a.pdf:hover{text-decoration:none;border-color:var(--ink)}

/* (rail removed: multi-page) */
.rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;text-align:right;z-index:10}
.rail a{font-size:11.5px;letter-spacing:.08em;color:#a6acb8;padding:3px 10px 3px 0;
  border-right:2px solid transparent}
.rail a:hover{color:var(--ink);text-decoration:none}
.rail a.on{color:var(--blue);font-weight:700;border-right-color:var(--blue)}
@media (max-width:1240px){.rail{display:none}}

/* ── header ─────────────────────────────────────────────────────── */
.head{padding:56px 0 0;display:grid;grid-template-columns:96px 1fr;gap:28px;align-items:center}
.avatar{width:96px;height:96px;border-radius:50%;background:var(--blue-soft);
  border:2px solid #cddcf6;display:grid;place-items:center;
  font-size:34px;font-weight:700;color:var(--blue)}
.head h1{font-size:30px;font-weight:700;letter-spacing:-.02em}
.head h1 small{font-size:17px;font-weight:400;color:var(--sub);margin-left:6px}
.head .pos{margin-top:4px;font-size:16.5px;color:var(--ink)}
.head .pos b{color:var(--blue);font-weight:600}
.contacts{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px}
.contacts span{color:var(--sub)}

/* stat band */
.band{margin-top:32px;background:var(--band);border-radius:14px;
  display:grid;grid-template-columns:repeat(3,1fr);padding:26px 12px}
.band .c{text-align:center}
.band .v{font-size:30px;font-weight:700;color:var(--blue);letter-spacing:-.01em}
.band .k{margin-top:2px;font-size:11.5px;letter-spacing:.14em;color:var(--sub)}

/* ── section scaffold: small blue label + hairline ──────────────── */
section{padding-top:64px}
.lab{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--blue);padding-bottom:6px;border-bottom:2px solid var(--ink);margin-bottom:22px}
.sec-note{font-size:13.5px;color:var(--sub);margin:-14px 0 20px}
.fresh{color:var(--green)}

/* introduce */
.intro p{max-width:46em;margin-bottom:14px}
.intro b{font-weight:600}

/* ── dates-rail grid (experience, projects, story) ──────────────── */
.row{display:grid;grid-template-columns:150px 1fr;gap:10px 34px;padding:20px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0;padding-top:0}
.when{font-size:13.5px;color:var(--sub);text-align:right;padding-top:3px}
.what h3{font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.what .role{font-size:14.5px;color:var(--sub);font-style:normal;margin-top:2px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--line-2);
  border-radius:999px;padding:2px 10px;color:var(--sub);font-weight:400}
.chip.now{color:var(--green);border-color:#bfe0cd;background:var(--green-soft)}
.chip.now::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.what ul{margin:10px 0 0 18px;display:flex;flex-direction:column;gap:5px;font-size:15px}
.what ul b{font-weight:600}
.what ul .q{color:var(--sub)}
.kw{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.kw i{font-style:normal;font-size:12.5px;color:var(--blue);border:1px solid #c6d6f3;
  border-radius:999px;padding:2px 11px;background:#fff}
.plinks{margin-top:10px;font-size:14px;display:flex;gap:16px;flex-wrap:wrap}

/* ── demo box: document register, one blue ──────────────────────── */
.demo{border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.demo .hd{padding:18px 24px;border-bottom:1px solid var(--line)}
.demo .hd h3{font-size:17px;font-weight:700}
.demo .hd p{font-size:13.5px;color:var(--sub);margin-top:2px}
.demo .bd{display:grid;grid-template-columns:1.5fr 1fr}
.stage{padding:18px 24px 24px;display:flex;flex-direction:column}
.nudge{font-size:13.5px;font-weight:600;color:var(--blue);margin-bottom:6px}
canvas#q{flex:1;min-height:220px;display:block;width:100%}
.ctl{display:grid;grid-template-columns:max-content 1fr max-content;gap:14px;align-items:center;
  margin-top:12px;font-size:13.5px;color:var(--sub)}
input[type=range]{width:100%;accent-color:var(--blue)}
.read{text-align:right;color:var(--ink);font-weight:700;font-size:13.5px}
.demo aside{border-left:1px solid var(--line);padding:18px 24px;display:flex;flex-direction:column;gap:14px}
.stats3{display:flex;gap:26px}
.stat .k{font-size:11.5px;letter-spacing:.1em;color:var(--sub)}
.stat .v{font-size:21px;font-weight:700;margin-top:2px}
.stat .v.bad{color:#c02626}
.demo aside p{font-size:13.5px;color:var(--sub);line-height:1.8}
.demo aside p b{color:var(--ink);font-weight:600}
#liveline{color:var(--ink)}

/* ── article index ──────────────────────────────────────────────── */
.wtool{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.wtool button{font-family:var(--body);font-size:13.5px;color:var(--sub);cursor:pointer;
  background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:5px 13px}
.wtool button:hover{color:var(--ink)}
.wtool button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.wtool .n{font-size:11.5px;margin-left:4px;opacity:.7}
.posts{border-top:1px solid var(--line-2)}
.post{display:grid;grid-template-columns:88px 1fr max-content;gap:16px;align-items:baseline;
  padding:12px 2px;border-bottom:1px solid var(--line);color:var(--ink)}
.post:hover{background:#f7f9fc;text-decoration:none}
.post .d,.post .g{font-size:12.5px;color:var(--sub)}
.post .t{font-size:15px;font-weight:500}
.wfoot{margin-top:14px;font-size:14px}

/* footer */
footer{padding:72px 0 56px}
.contact-box{border:1px solid var(--line-2);border-radius:14px;padding:26px 30px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.contact-box h2{font-size:19px;font-weight:700}
.contact-box p{font-size:14px;color:var(--sub);margin-top:3px}
.btn{display:inline-block;background:var(--blue);color:#fff;font-size:14.5px;font-weight:600;
  border-radius:10px;padding:11px 20px}
.btn:hover{text-decoration:none;opacity:.92}
.btn.line{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.colo{margin-top:34px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--sub)}
.colo a{color:var(--sub);margin-right:14px}

@media (max-width:760px){
  .head{grid-template-columns:64px 1fr;gap:18px}
  .avatar{width:64px;height:64px;font-size:24px}
  .head h1{font-size:24px}
  .band{grid-template-columns:1fr;gap:18px;padding:22px}
  .band .c{display:flex;align-items:baseline;gap:12px;text-align:left;justify-content:center}
  .row{grid-template-columns:1fr;gap:4px}
  .when{text-align:left;font-size:12.5px}
  .demo .bd{grid-template-columns:1fr}
  .demo aside{border-left:0;border-top:1px solid var(--line)}
  .stats3{order:-1}
  .post{grid-template-columns:1fr;gap:2px}
  .post .t{order:-1}
}


/* ── home: doors into the estate ── */
.doors{border-top:1px solid var(--line-2)}
.door{display:grid;grid-template-columns:110px 1fr max-content;gap:16px;align-items:baseline;
  padding:16px 2px;border-bottom:1px solid var(--line);color:var(--ink)}
.door:hover{background:#f7f9fc;text-decoration:none}
.door .k{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.08em}
.door .t{font-size:15px}
.door .t small{color:var(--sub);font-size:13.5px;margin-left:8px}
.door .go{color:var(--sub);font-size:13.5px}
.now-list{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px}
.now-list li{display:flex;gap:10px;align-items:baseline}
.now-list .d{font-size:12.5px;color:var(--sub);flex:none;font-variant-numeric:tabular-nums}
.now-list .dot2{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;position:relative;top:-2px}
@media(max-width:760px){.door{grid-template-columns:1fr;gap:2px}}


/* ── print: the career page becomes the PDF ── */
@media print{
  .draft,.tabs,.rail,.contact-box,.colo{display:none!important}
  body{font-size:12px}
  section{padding-top:28px}
  .row{break-inside:avoid}
  a{color:var(--ink);text-decoration:none}
}

/* ── dark mode ── */
html.dark body{background:#111318;color:#e2e4e9}
html.dark .tabs{background:rgba(17,19,24,.9);border-color:#242832}
html.dark .tabs .site,html.dark .tabs a.pdf{color:#e2e4e9}
html.dark .tabs a.pdf{border-color:#343a46}
html.dark .band{background:#181c25}
html.dark .avatar{background:#1b2333;border-color:#2c3a55}
html.dark .contact-box,html.dark .demo,html.dark .mini{border-color:#2b303b}
html.dark .row,html.dark .posts,html.dark .post,html.dark .doors,html.dark .door{border-color:#242832}
html.dark .post:hover,html.dark .door:hover{background:#171b22}
html.dark .chip{border-color:#343a46;color:#aab1bd;background:transparent}
html.dark .kw i{background:transparent;border-color:#2c4a86}
html.dark .lab{border-color:#e2e4e9}
html.dark .btn.line{color:#e2e4e9;border-color:#3a4150}
.mode{position:fixed;right:22px;bottom:22px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--bg);cursor:pointer;font-size:17px;z-index:30;
  box-shadow:0 4px 16px rgba(0,0,0,.12)}
html.dark .mode{background:#181c25;border-color:#343a46}
@media print{.mode{display:none!important}}

/* auto-refresh stamp: the index is regenerated from the blog sitemap */
.stamp{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--bg);
  font-size:11.5px;line-height:1.7;color:var(--sub);
  font-variant-numeric:tabular-nums;vertical-align:1px;
}
html.dark .stamp{background:transparent;border-color:#343a46;color:#98a0ad}
@media print{.stamp{display:none}}

/* print-only résumé header. The print stylesheet hides the nav and the contact
   box, so without this the printed career page would carry no way to reach the
   person it is about. */
.print-head{display:none}
@media print{
  .print-head{display:block;margin:0 0 18px;padding:0 0 14px;border-bottom:2px solid var(--ink)}
  .print-head h1{font-size:24px;line-height:1.3;margin:0}
  .print-head h1 small{font-size:13px;font-weight:500;color:var(--sub);margin-left:8px}
  .print-head p{font-size:12px;color:var(--sub);margin:6px 0 0}
  .print-head .pc{font-variant-numeric:tabular-nums}
  .print-head .pc span{margin-right:14px}
}