/* ============================================================
   보안 솔루션 개발자 포트폴리오 - 공용 스타일
   Palette: deep slate + navy blue (경력기술서 느낌의 차분한 블루)
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --sidebar-w:248px;
  --maxw:960px;

  /* ---- LIGHT (default) ---- */
  --ink:#ffffff;
  --ink-2:#f4f7f6;
  --panel:#ffffff;
  --panel-2:#eef3f1;
  --line:#dfe5e2;
  --line-soft:#e9eeeb;
  --paper:#f5f7f6;
  --paper-line:#dfe4e2;
  --key:#1d4ed8;
  --key-dim:#3f68d8;
  --key-glow:rgba(29,78,216,.09);
  --amber:#a9781a;
  --text:#1a2230;
  --text-dim:#5a6572;
  --text-faint:#8a94a0;
  --ink-text:#1a2028;
  --ink-text-dim:#5a6572;
  --shadow:0 1px 2px rgba(16,24,32,.04),0 4px 16px rgba(16,24,32,.05);
  --sidebar-grad:linear-gradient(180deg,#f5f8fc,#ffffff);
}

/* ---- DARK ---- */
:root[data-theme="dark"]{
  --ink:#0d1117;
  --ink-2:#11161d;
  --panel:#161b22;
  --panel-2:#1c232c;
  --line:#2a3038;
  --line-soft:#222831;
  --paper:#f5f7f6;
  --paper-line:#dfe4e2;
  --key:#5b9dff;
  --key-dim:#3b7ce0;
  --key-glow:rgba(91,157,255,.14);
  --amber:#e3b341;
  --text:#e6edf3;
  --text-dim:#8b949e;
  --text-faint:#586069;
  --ink-text:#1a2028;
  --ink-text-dim:#5a6572;
  --shadow:none;
  --sidebar-grad:linear-gradient(180deg,#11161d,#0d1117);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .25s ease,color .25s ease;
}
.sidebar,.panel,.stat,.proj,.ach,.chip,.badge,.note,.page-nav a,
.tbl-wrap,.lifecycle,.lc-node,.proj-head,.ach-cell,.pb-quote,.topbar,.m-nav,.theme-toggle,
thead th,tbody td{
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
@media (prefers-reduced-motion:reduce){
  body,.sidebar,.panel,.stat,.proj,.ach,.chip,.badge,.note,.page-nav a,
  .tbl-wrap,.lifecycle,.lc-node,.proj-head,.ach-cell,.pb-quote,.topbar,.m-nav,.theme-toggle,
  thead th,tbody td{transition:none}
}

a{color:inherit;text-decoration:none}
.wrap a[target="_blank"]{color:var(--key);text-decoration:underline;text-underline-offset:2px}
.wrap blockquote{
  border-left:2px solid var(--key-dim);margin:10px 0;padding:8px 14px;
  color:var(--text-dim);font-size:13.5px;line-height:1.6;background:var(--key-glow);
}
::selection{background:var(--key-glow);color:var(--key)}

/* ---------- Layout shell ---------- */
.shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  position:sticky;top:0;align-self:flex-start;
  height:100vh;
  border-right:1px solid var(--line);
  background:var(--sidebar-grad);
  padding:30px 22px;
  display:flex;flex-direction:column;
  overflow-y:auto;
}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  display:flex;align-items:center;gap:8px;
  width:100%;margin-bottom:22px;
  background:var(--ink-2);border:1px solid var(--line);
  color:var(--text-dim);border-radius:8px;
  padding:8px 11px;font-family:var(--mono);font-size:12px;
  cursor:pointer;
}
.theme-toggle:hover{border-color:var(--key-dim);color:var(--text)}
.theme-toggle .ic{width:15px;height:15px;flex:0 0 15px}
.theme-toggle .lbl{flex:1;text-align:left}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
.tb-theme{
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:7px 10px;cursor:pointer;display:flex;align-items:center;
}
.tb-theme .ic{width:16px;height:16px}
.tb-theme .ic-sun{display:none}
.tb-theme .ic-moon{display:block}
:root[data-theme="dark"] .tb-theme .ic-sun{display:block}
:root[data-theme="dark"] .tb-theme .ic-moon{display:none}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.brand{margin-bottom:30px}
.brand .role{
  font-family:var(--mono);font-size:11px;letter-spacing:.5px;
  color:var(--key);
}
.brand .name{font-size:22px;font-weight:700;margin-top:4px;letter-spacing:-.3px}
.brand .sub{font-size:12.5px;color:var(--text-dim);margin-top:6px;line-height:1.5}

.nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.nav a{
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:var(--text-dim);
  padding:8px 11px;border-radius:7px;
  transition:background .15s,color .15s;
}
.nav a .idx{
  font-family:var(--mono);font-size:10.5px;color:var(--text-faint);
  min-width:20px;
}
.nav a:hover{background:var(--panel);color:var(--text)}
.nav a.active{background:var(--panel-2);color:var(--key)}
.nav a.active .idx{color:var(--key-dim)}
.nav .divider{height:1px;background:var(--line);margin:12px 4px}

.side-foot{margin-top:auto;padding-top:22px;font-size:11px;color:var(--text-faint);font-family:var(--mono);line-height:1.7}
.side-foot a{color:var(--text-dim)}
.side-foot a:hover{color:var(--key)}

.content{flex:1;min-width:0;padding:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:56px 44px 96px}

/* ---------- Mobile top bar ---------- */
.topbar{display:none}
.m-nav{display:none}

/* ---------- Section basics ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.4px;
  color:var(--key-dim);margin-bottom:10px;
  display:flex;align-items:center;gap:9px;
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:var(--key-dim);display:inline-block;
}
h1.page-title{font-size:38px;font-weight:800;letter-spacing:-.8px;line-height:1.12;margin-bottom:14px}
h2.sec{font-size:25px;font-weight:700;letter-spacing:-.4px;margin:0 0 6px}
.lede{font-size:16px;color:var(--text-dim);max-width:66ch;line-height:1.7}
.lede.lede-list{max-width:none}
.lede ul{margin:0;padding-left:20px;list-style:none}
.lede ul li{position:relative;margin-bottom:8px;padding-left:14px}
.lede ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--key-dim)}

.wrap ul{margin:0;padding-left:20px;list-style:none}
.wrap li{position:relative;margin-bottom:7px;padding-left:14px;font-size:13.5px;line-height:1.6}
.wrap li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--key-dim)}
.wrap li.evidence{
  list-style:none;font-size:12.5px;color:var(--text-dim);margin-top:10px;
  border-left:2px solid var(--key-dim);padding-left:12px;background:var(--key-glow);
}
.wrap li.evidence::before{display:none}

.sec-block{margin-top:56px;padding-top:8px;scroll-margin-top:24px}
.sec-block:first-of-type{margin-top:34px}

/* ---------- Generic markdown body (headings/tables/lists/code inside .wrap) ---------- */
.md-h3{font-size:18px;font-weight:700;letter-spacing:-.2px;margin:26px 0 10px;color:var(--text)}
.md-h4,.md-h5,.md-h6{font-size:14.5px;font-weight:700;margin:18px 0 8px;color:var(--text)}
.md-minihead{font-size:13.5px;font-weight:700;color:var(--text);margin:16px 0 6px}
.md-hr{border:none;border-top:1px solid var(--line);margin:28px 0}

.wrap ol{margin:0 0 12px;padding-left:22px;list-style:decimal;color:var(--text-dim)}
.wrap ol li{padding-left:4px;font-size:13.5px;line-height:1.6;margin-bottom:7px}
.wrap ol li::before{display:none}
.wrap p{font-size:13.5px;line-height:1.7;color:var(--text-dim);margin:0 0 12px}
.wrap p strong{color:var(--text)}

.table-wrap{overflow-x:auto;margin:10px 0 18px;border:1px solid var(--line);border-radius:10px}
.md-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--panel)}
.md-table th,.md-table td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.md-table th{font-family:var(--mono);font-size:11px;letter-spacing:.3px;color:var(--text-faint);background:var(--panel-2);white-space:nowrap}
.md-table tr:last-child td{border-bottom:none}
.md-table td strong{color:var(--text)}

.code-block{
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;overflow-x:auto;margin:10px 0 18px;
}
.code-block code{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--text-dim);white-space:pre}
.diagram-block{margin:10px 0 18px}
.diagram-label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--text-faint);
  margin-bottom:6px;
}
.diagram-block .code-block{margin:0}
.diagram-block .mermaid{
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;overflow-x:auto;display:flex;justify-content:center;
}
.diagram-block .mermaid svg{max-width:100%;height:auto}

/* ---------- Cards & panels ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:22px 24px;box-shadow:var(--shadow);
}

.grid{display:grid;gap:14px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}

/* stat tile */
.stat{
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:18px 18px 16px;position:relative;overflow:hidden;box-shadow:var(--shadow);
}
.stat .num{font-family:var(--mono);font-size:30px;font-weight:700;color:var(--key);letter-spacing:-1px;line-height:1}
.stat .num small{font-size:15px;color:var(--text-dim);font-weight:500;margin-left:2px}
.stat .lbl{font-size:12.5px;color:var(--text-dim);margin-top:9px;line-height:1.45}

/* ---------- Chips / tags ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-family:var(--mono);font-size:11.5px;
  color:var(--text-dim);background:var(--ink-2);
  border:1px solid var(--line);border-radius:6px;
  padding:4px 9px;white-space:nowrap;
}
.chip.key{color:var(--key);border-color:var(--key-dim)}
.chip.amber{color:var(--amber);border-color:rgba(169,120,26,.4)}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:11px}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
thead th{
  text-align:left;font-weight:600;font-size:12px;
  color:var(--text-dim);background:var(--ink-2);
  padding:12px 15px;border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{padding:12px 15px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--text)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--ink-2)}
td .mono,.mono{font-family:var(--mono)}
td.key,.tkey{color:var(--key);font-weight:600}
.rank{font-family:var(--mono);font-weight:700;color:var(--key);font-size:13px}

/* ---------- Badges ---------- */
.badge{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  padding:2px 7px;border-radius:5px;letter-spacing:.2px;
}
.badge.fact{background:var(--key-glow);color:var(--key);border:1px solid var(--key-dim)}
.badge.quant{background:rgba(169,120,26,.1);color:var(--amber);border:1px solid rgba(169,120,26,.4)}
.badge.done{background:var(--key-glow);color:var(--key);border:1px solid var(--key-dim)}
:root[data-theme="dark"] .badge.quant{background:rgba(227,179,65,.1);border-color:#6b551f}

/* ---------- Timeline (hero + about) ---------- */
.lifecycle{
  display:flex;align-items:stretch;gap:0;margin:30px 0 8px;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--panel);
}
.lc-node{
  flex:1;padding:16px 14px;border-right:1px solid var(--line-soft);
  position:relative;transition:background .2s;
}
.lc-node:last-child{border-right:none}
.lc-node:hover{background:var(--panel-2)}
.lc-node .yr{font-family:var(--mono);font-size:12px;color:var(--key);font-weight:700}
.lc-node .ttl{font-size:13px;font-weight:600;margin-top:6px;line-height:1.35}
.lc-node .dsc{font-size:11.5px;color:var(--text-dim);margin-top:5px;line-height:1.45}
.lc-node .dot{
  position:absolute;top:-1px;left:14px;width:7px;height:7px;border-radius:50%;
  background:var(--key);box-shadow:0 0 0 3px var(--key-glow);
}

/* vertical timeline */
.vtl{position:relative;margin-top:26px;padding-left:26px}
.vtl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.vtl-item{position:relative;padding-bottom:26px}
.vtl-item:last-child{padding-bottom:0}
.vtl-item::before{
  content:"";position:absolute;left:-26px;top:5px;width:10px;height:10px;border-radius:50%;
  background:var(--ink);border:2px solid var(--key);
}
.vtl-item .per{font-family:var(--mono);font-size:12px;color:var(--key-dim);font-weight:500}
.vtl-item .hd{font-size:15px;font-weight:700;margin-top:3px}
.vtl-item .bd{font-size:13.5px;color:var(--text-dim);margin-top:5px;line-height:1.6}

/* ---------- Project cards ---------- */
.proj{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  overflow:hidden;transition:border-color .18s,box-shadow .25s;box-shadow:var(--shadow);
}
.proj:hover{border-color:var(--key-dim)}
.proj-head{
  display:flex;align-items:flex-start;gap:16px;
  padding:20px 22px;border-bottom:1px solid var(--line-soft);
  cursor:pointer;user-select:none;
}
.proj-rank{
  font-family:var(--mono);font-size:20px;font-weight:700;color:var(--key);
  min-width:38px;line-height:1.1;
}
.proj-rank small{display:block;font-size:9px;color:var(--text-faint);font-weight:400;letter-spacing:.5px}
.proj-htext{flex:1;min-width:0}
.proj-htext h3{font-size:17px;font-weight:700;letter-spacing:-.2px;line-height:1.3}
.proj-htext .meta{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);margin-top:5px}
.proj-htext .oneline{font-size:13.5px;color:var(--text-dim);margin-top:8px;line-height:1.55}
.proj-toggle{
  font-family:var(--mono);font-size:11px;color:var(--text-faint);
  border:1px solid var(--line);border-radius:6px;padding:4px 8px;
  white-space:nowrap;transition:color .15s,border-color .15s;
}
.proj-head:hover .proj-toggle{color:var(--key);border-color:var(--key-dim)}
.proj-body{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
}
.proj-body.open{max-height:1600px}
.proj-body-inner{padding:20px 22px 22px}
.pb-row{margin-bottom:16px}
.pb-row:last-child{margin-bottom:0}
.pb-label{
  font-family:var(--mono);font-size:11px;color:var(--key-dim);
  letter-spacing:.3px;margin-bottom:7px;
}
.stat-value{font-size:14px;color:var(--text);line-height:1.55}
.pb-row ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.pb-row li{
  position:relative;padding-left:17px;font-size:13.5px;line-height:1.6;color:var(--text);
}
.pb-row li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  background:var(--key-dim);border-radius:1px;
}
.pb-quote{
  border-left:2px solid var(--key-dim);padding:10px 14px;
  background:var(--ink-2);border-radius:0 8px 8px 0;
  font-size:13.5px;color:var(--text);line-height:1.6;
}
.pb-quote .qh{font-family:var(--mono);font-size:10.5px;color:var(--key-dim);margin-bottom:5px}

/* ---------- Achievement (STAR-ish) ---------- */
.ach{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:22px 24px;position:relative;box-shadow:var(--shadow);
}
.ach-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.ach-rank{
  font-family:var(--mono);font-size:15px;font-weight:700;
  color:var(--ink);background:var(--key);border-radius:8px;
  min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
}
.ach-top h3{font-size:16px;font-weight:700;line-height:1.35;flex:1}
.ach-flow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.ach-cell{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:9px;padding:13px 15px}
.ach-cell .k{font-family:var(--mono);font-size:10.5px;color:var(--key-dim);margin-bottom:6px}
.ach-cell .v{font-size:13px;color:var(--text);line-height:1.55}
.ach-cell.full{grid-column:1/-1}

/* ---------- Callout / note ---------- */
.note{
  border:1px solid var(--line);border-left:3px solid var(--amber);
  background:rgba(169,120,26,.06);border-radius:0 10px 10px 0;
  padding:15px 18px;font-size:13.5px;color:var(--text-dim);line-height:1.65;
}
:root[data-theme="dark"] .note{background:rgba(227,179,65,.05)}
.note.key{border-left-color:var(--key);background:var(--key-glow)}
.note strong{color:var(--text)}

/* ---------- Growth axis grid ---------- */
.axis{overflow-x:auto;border:1px solid var(--line);border-radius:11px}
.axis table{min-width:640px}
.axis td.yr,.axis th.yr{font-family:var(--mono);color:var(--key);font-weight:600}

/* ---------- Section links / footer ---------- */
.page-nav{
  display:flex;justify-content:space-between;gap:14px;margin-top:64px;
  padding-top:26px;border-top:1px solid var(--line);
}
.page-nav a{
  flex:1;padding:16px 18px;border:1px solid var(--line);border-radius:11px;
  background:var(--panel);transition:border-color .16s,background .16s;
}
.page-nav a:hover{border-color:var(--key-dim);background:var(--panel-2)}
.page-nav .dir{font-family:var(--mono);font-size:11px;color:var(--text-faint)}
.page-nav .ttl{font-size:14.5px;font-weight:600;margin-top:4px;color:var(--text)}
.page-nav a.next{text-align:right}

.disclaimer{
  margin-top:40px;font-size:11.5px;color:var(--text-faint);
  font-family:var(--mono);line-height:1.7;
  border-top:1px dashed var(--line);padding-top:18px;
}

/* ---------- Anonymize marker ---------- */
.anon{color:var(--text-faint);font-style:italic}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid.g4{grid-template-columns:repeat(2,1fr)}
  .grid.g3{grid-template-columns:repeat(2,1fr)}
  .lifecycle{flex-wrap:wrap}
  .lc-node{flex:1 1 33%;border-bottom:1px solid var(--line-soft)}
  .ach-flow{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sidebar{display:none}
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:50;
    background:var(--ink-2);border-bottom:1px solid var(--line);
    padding:13px 18px;
  }
  .topbar .tb-name{font-weight:700;font-size:15px}
  .topbar .tb-role{font-family:var(--mono);font-size:10px;color:var(--key)}
  .topbar button{
    background:var(--panel);border:1px solid var(--line);color:var(--text);
    border-radius:8px;padding:7px 12px;font-size:13px;font-family:var(--mono);cursor:pointer;
  }
  .m-nav{
    display:none;position:sticky;top:49px;z-index:40;
    background:var(--ink-2);border-bottom:1px solid var(--line);
    padding:8px 14px 14px;
  }
  .m-nav.open{display:flex;flex-direction:column;gap:2px}
  .m-nav a{padding:9px 11px;font-size:14px;color:var(--text-dim);border-radius:7px}
  .m-nav a.active{color:var(--key);background:var(--panel)}
  .wrap{padding:30px 20px 70px}
  h1.page-title{font-size:29px}
  h2.sec{font-size:21px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .page-nav{flex-direction:column}
  .lc-node{flex:1 1 50%}
}
@media (max-width:420px){
  .lc-node{flex:1 1 100%}
}