/* ============ tokens ============ */
:root{
  --bg:#eef1f5; --sheet:#ffffff;
  --ink:#39424f; --ink2:#58677c; --ink3:#7d8b9e; --meta:#a3aebd;
  --line:#e4e9ef; --rule:#c3ccd8; --chip:#f3f5f8; --chipbd:#dbe1e9;
  --head:#434e5e; --headink:rgba(255,255,255,.92); --headink2:rgba(255,255,255,.6);
  --accent:#3f7cb8; --accent-soft:#eaf1f8;
  --shadow:0 1px 2px rgba(30,40,55,.06), 0 12px 40px rgba(30,40,55,.10);
  --radius:6px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101216; --sheet:#1a1e25;
    --ink:#dfe5ec; --ink2:#b0bccb; --ink3:#8b98a9; --meta:#6d7a8b;
    --line:#272d36; --rule:#39424f; --chip:#222831; --chipbd:#333b47;
    --head:#232931; --headink:rgba(255,255,255,.92); --headink2:rgba(255,255,255,.55);
    --accent:#74a9dd; --accent-soft:#1e2a36;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#101216; --sheet:#1a1e25;
  --ink:#dfe5ec; --ink2:#b0bccb; --ink3:#8b98a9; --meta:#6d7a8b;
  --line:#272d36; --rule:#39424f; --chip:#222831; --chipbd:#333b47;
  --head:#232931; --headink:rgba(255,255,255,.92); --headink2:rgba(255,255,255,.55);
  --accent:#74a9dd; --accent-soft:#1e2a36;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.45);
}
*, *::before, *::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:64px}
body{
  margin:0; background:var(--bg); color:var(--ink2);
  font-family:"Roboto","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}
a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
ul{margin:0; padding:0; list-style:none}
svg.ic{width:1em; height:1em; vertical-align:-.125em; flex:none}

/* ============ topbar ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--sheet) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar-in{max-width:1100px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:6px; height:52px}
.brand{font-weight:900; letter-spacing:.08em; font-size:.8rem; color:var(--ink); text-transform:uppercase; margin-right:auto}
.tnav{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
.tnav::-webkit-scrollbar{display:none}
.tnav a{
  padding:6px 10px; border-radius:99px; font-size:.78rem; font-weight:500;
  color:var(--ink3); white-space:nowrap;
}
.tnav a:hover{background:var(--chip); text-decoration:none; color:var(--ink)}
.tnav a.on{background:var(--accent-soft); color:var(--accent)}
.tools{display:flex; gap:4px; margin-left:6px; padding-left:8px; border-left:1px solid var(--line)}
.iconbtn{
  width:30px; height:30px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:6px; color:var(--ink3);
}
.iconbtn > svg{width:.95em; height:.95em}
.iconbtn:hover{color:var(--accent); border-color:var(--accent)}

/* ============ sheet ============ */
.wrap{max-width:1100px; margin:0 auto; padding:26px 20px 70px}
.sheet{background:var(--sheet); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}

.sheet-head{background:var(--head); color:var(--headink); padding:38px 40px 38px}
.head-row{display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start}
.who{flex:1 1 320px; min-width:0}
.who h1{margin:0 0 4px; font-size:2.15rem; line-height:1.15; font-weight:900; letter-spacing:.16rem; color:#fff; text-transform:uppercase}
.who .role{font-size:1.22rem; color:var(--headink); font-weight:400}
.links{flex:0 1 auto; display:flex; flex-direction:column; gap:9px; font-size:.82rem; padding-top:4px}
.links a{display:flex; align-items:center; gap:9px; color:var(--headink2)}
.links a:hover{color:#fff; text-decoration:none}
.links .sq{width:22px; height:22px; border-radius:3px; background:#fff; color:var(--head); display:grid; place-items:center; flex:none}
.links .sq > svg{width:.82em; height:.82em}

.sheet-body{padding:40px}

/* ============ sections ============ */
.sec{margin-bottom:46px}
.sec:last-child{margin-bottom:0}
.sec > h2{
  margin:0 0 18px; padding-bottom:11px; position:relative;
  font-size:1.16rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
}
.sec > h2::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:var(--rule)}
.sec > h2 small{text-transform:none; letter-spacing:0; font-weight:400; color:var(--meta); font-size:.78rem; margin-left:8px}
.summary p{margin:0 0 12px}
.summary p:last-child{margin:0}

.cols{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:44px; align-items:start}
/* 992~1139px: 2단은 유지하되 사이드바를 좁혀 본문 폭 확보 (줄바꿈 사각지대) */
@media (max-width:1139px) and (min-width:992px){
  .cols{grid-template-columns:minmax(0,1fr) 240px; gap:28px}
}
@media (max-width:991px){ .cols{grid-template-columns:1fr; gap:0} }
@media (max-width:767px){
  .head-row{justify-content:center; gap:18px}
  .who{flex:1 1 100%; text-align:center}
  .links{width:fit-content; margin:0 auto}
  .sheet-head{padding:30px 24px 30px}
}

/* ---- timeline ---- */
.tl{position:relative; padding-left:30px}
.tl::before{content:""; position:absolute; left:6px; top:12px; width:2px; height:calc(100% - 12px); background:var(--line)}
.tl-item{position:relative; padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:""; position:absolute; left:-30px; top:5px; width:14px; height:14px; border-radius:50%;
  background:var(--sheet); border:3px solid var(--rule);
}
.tl-item.now::before{border-color:var(--accent)}
.org{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:2px}
.org h3{margin:0; font-size:1.08rem; font-weight:700; color:var(--ink)}
.org h3 small{font-weight:400; color:var(--meta); font-size:.82rem; margin-left:5px}
.org .team{margin-left:auto; font-size:.82rem; font-weight:500; color:var(--ink3)}
.when{font-size:.8rem; color:var(--meta); margin-bottom:9px}
.when .badge{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px; font-size:.68rem; font-weight:700;
  letter-spacing:.05em; background:var(--accent-soft); color:var(--accent); vertical-align:1px;
}
.intro{font-size:.9rem; color:var(--ink3); margin-bottom:12px; padding-bottom:12px; border-bottom:1px dashed var(--line)}

/* ---- 3-level bullets ---- */
.bl{margin:0}
.bl > li{position:relative; margin-bottom:9px; color:var(--ink)}
.bl > li{padding-left:24px}
.bl > li > .bi{position:absolute; left:0; top:.36em; width:1.25em; height:.95em; color:var(--ink3); font-size:.92em}
/* 1단계 항목: 제목 + 우측 기간 (벤치마크 .resume-position-time-inline-end 대응) */
.bl > li > .li-head{display:flex; align-items:baseline; gap:12px}
.li-txt{flex:1 1 auto; min-width:0}
.li-time{flex:none; font-size:.8rem; color:var(--meta); white-space:nowrap}
@media (max-width:575px){ .bl > li > .li-head{flex-direction:column; gap:0} }
.bl2{margin-top:5px}
.bl2 > li{position:relative; margin-bottom:3px; font-size:.875rem; color:var(--ink2)}
.bl2 > li{padding-left:22px}
.bl2 > li > .bi{position:absolute; left:0; top:.38em; width:1.25em; height:.95em; color:var(--meta); font-size:.86em}
.bl3{margin-top:2px; padding-left:14px; font-size:.83rem; color:var(--ink3)}
.bl3 > li{position:relative; padding-left:14px}
.bl3 > li::before{content:"┗"; position:absolute; left:0; top:0; color:var(--meta); font-size:.78rem}

/* ---- project cards ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; background:var(--sheet); transition:border-color .15s}
.card:hover{border-color:var(--accent)}
.card h4{margin:0 0 3px; font-size:.96rem; font-weight:700; color:var(--ink); display:flex; gap:6px; align-items:baseline}
.card .cmeta{font-size:.74rem; color:var(--meta); letter-spacing:.03em; margin-bottom:8px}
.card p{margin:0 0 10px; font-size:.85rem; color:var(--ink2)}
.tags{display:flex; flex-wrap:wrap; gap:5px}
.tag{font-size:.7rem; padding:2px 8px; border-radius:99px; background:var(--chip); border:1px solid var(--chipbd); color:var(--ink3)}

/* ---- flat entry list (certs / activities) ---- */
.entry{padding:9px 0; border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:0}
.ehead{display:flex; align-items:baseline; gap:10px}
.ehead .txt{flex:1 1 auto; min-width:0; color:var(--ink); display:flex; gap:8px; align-items:baseline}
.ehead .txt > svg{color:var(--meta); margin-top:.1em; width:1.1em; height:.95em}
.ehead .txt small{color:var(--meta); font-weight:400}
.ehead time{flex:none; font-size:.8rem; color:var(--meta); white-space:nowrap}
.edesc{margin-top:4px; padding-left:22px; font-size:.86rem; color:var(--ink2)}
details.more{margin-top:12px}
details.more > summary{
  cursor:pointer; list-style:none; font-size:.82rem; color:var(--accent); font-weight:500;
  padding:8px 12px; border:1px dashed var(--chipbd); border-radius:var(--radius); text-align:center;
}
details.more > summary::-webkit-details-marker{display:none}
details.more[open] > summary{margin-bottom:8px; color:var(--ink3)}

/* ---- sidebar ---- */
aside .sec{margin-bottom:36px}
.pills{display:flex; flex-wrap:wrap; gap:7px}
.pill{
  padding:5px 11px; border-radius:99px; background:var(--chip); border:1px solid var(--chipbd);
  font-size:.78rem; font-weight:500; color:var(--ink);
}
.award{position:relative; padding-left:24px; margin-bottom:13px}
.award > svg{position:absolute; left:0; top:.28em; color:var(--meta)}
.award .an{font-size:.87rem; color:var(--ink); font-weight:500}
.award .ad{font-size:.8rem; color:var(--ink3)}
.award .at{font-size:.78rem; color:var(--meta)}
.deg{margin-bottom:14px}
.deg b{display:block; font-size:.9rem; color:var(--ink)}
.deg span{display:block; font-size:.84rem; color:var(--ink2)}
.deg time{display:block; font-size:.8rem; color:var(--meta)}

.foot{text-align:center; font-size:.76rem; color:var(--meta); padding:26px 0 0}

/* ============ print ============ */
@page{ margin: 14mm 12mm; }

@media print{
  /* 다크모드 상태로 인쇄해도 밝은 팔레트로 강제 */
  :root, :root[data-theme="dark"], :root[data-theme="light"]{
    --bg:#fff; --sheet:#fff;
    --ink:#1f2530; --ink2:#333c4a; --ink3:#4a5666; --meta:#6b7686;
    --line:#d9dee6; --rule:#9aa5b4; --chip:#f4f6f8; --chipbd:#cfd6df;
    --head:#fff; --headink:#1f2530; --headink2:#4a5666;
    --accent:#2b5f92; --accent-soft:#eef3f9; --shadow:none;
  }
  .topbar, .foot{ display:none !important }
  body{ background:#fff; font-size:9.6pt; line-height:1.5 }
  .wrap{ padding:0; max-width:100% }
  .sheet{ box-shadow:none; border-radius:0 }
  .sheet-body{ padding:0 }

  /* 헤더: 배경 인쇄가 꺼져 있어도 읽히도록 흰 바탕 + 진한 글자 */
  .sheet-head{ background:#fff; color:var(--ink); padding:0 0 10px; margin-bottom:16px;
               border-bottom:2px solid var(--rule) }
  .head-row{ gap:16px }
  .who h1{ color:var(--ink); font-size:1.75rem; letter-spacing:.1rem }
  .who .role{ color:var(--ink2); font-size:1.05rem }
  .links{ gap:4px; font-size:.78rem }
  .links a{ color:var(--ink2) }
  .links .sq{ background:transparent; color:var(--ink3); width:auto; height:auto }

  /* 2단 그리드 해제 — 그리드는 페이지 분할 시 빈 칸이 생긴다 */
  .cols{ display:block }
  aside{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line) }
  aside .sec{ margin-bottom:16px }

  /* 분할 제어 */
  .sec{ margin-bottom:20px }
  .sec > h2{ break-after:avoid; page-break-after:avoid }
  /* 회사 블록(.tl-item)은 크기가 커서 통째로 묶으면 앞 페이지가 절반 비므로 분할 허용 */
  .tl-item{ break-inside:auto; page-break-inside:auto }
  .org, .intro{ break-after:avoid; page-break-after:avoid }
  .card, .entry, .deg, .award, .stackgrp,
  .bl > li, .org, .intro{ break-inside:avoid; page-break-inside:avoid }
  aside .sec{ break-inside:avoid; page-break-inside:avoid }
  .summary p{ orphans:3; widows:3 }

  /* 카드/칩 */
  .cards{ grid-template-columns:1fr 1fr; gap:10px }
  .card{ border-color:var(--line) }
  .pill, .tag{ background:transparent; border-color:var(--chipbd) }

  a{ text-decoration:none; color:inherit }
}