/* HR portfolio - unlisted preview. Light theme, one accent. */

:root{
  --ink:#16202a;
  --ink-2:#4a5a68;
  --ink-3:#7b8a97;
  --line:#e3e8ec;
  --line-2:#eef2f5;
  --bg:#ffffff;
  --bg-2:#f7f9fa;
  --accent:#1b4965;
  --accent-soft:#e8f0f5;
  --todo-line:#c9a227;
  --todo-bg:#fdfaf0;
  --radius:12px;
  --w:720px;
  --navh:52px;
}

*{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size:16px;
  line-height:1.72;
  letter-spacing:-0.01em;
  word-break:keep-all;
  overflow-wrap:anywhere;
}

img,svg{max-width:100%;}

a{color:var(--accent);text-underline-offset:3px;}
a:hover{text-decoration:none;}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--accent);color:#fff;padding:8px 14px;z-index:99;
}
.skip:focus{left:8px;top:8px;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__in{
  max-width:var(--w);margin:0 auto;padding:0 18px;
}
.brand{
  display:flex;align-items:center;gap:8px;
  height:var(--navh);
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  font-size:0.95rem;
}
.brand__mark{flex:0 0 auto;}
.brand__txt{color:var(--ink);letter-spacing:-0.02em;}

.nav{
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line-2);
}
.nav::-webkit-scrollbar{display:none;}
.nav ul{
  display:flex;gap:4px;
  list-style:none;margin:0;padding:0 0 0 0;
  white-space:nowrap;
}
.nav a{
  display:inline-block;
  padding:9px 10px;
  font-size:0.84rem;
  color:var(--ink-2);
  text-decoration:none;
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--accent);}
.nav a.is-active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700;}

.notice{
  max-width:var(--w);margin:0 auto;
  padding:10px 18px;
  font-size:0.78rem;color:var(--ink-3);
  border-bottom:1px dashed var(--line);
}

/* ---------- layout ---------- */
main{max-width:var(--w);margin:0 auto;padding:0 18px;}

.sec{
  padding:46px 0 10px;
  scroll-margin-top:calc(var(--navh) + 46px);
  border-bottom:1px solid var(--line-2);
}
.sec:last-of-type{border-bottom:0;}

.eyebrow{
  margin:0 0 6px;
  font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
}

h1{
  margin:0 0 18px;
  font-size:1.72rem;line-height:1.42;letter-spacing:-0.035em;font-weight:800;
}
h2{
  margin:0 0 14px;
  font-size:1.3rem;letter-spacing:-0.03em;font-weight:800;
}
h3{
  margin:0;
  font-size:1.02rem;letter-spacing:-0.02em;font-weight:700;
}
.h-sub{
  margin:26px 0 10px;
  font-size:0.86rem;letter-spacing:0.02em;color:var(--ink-3);font-weight:700;
}

.lead{color:var(--ink-2);margin:0 0 16px;}
.note{font-size:0.82rem;color:var(--ink-3);border-left:2px solid var(--line);padding-left:10px;}
.answer{
  background:var(--accent-soft);
  border-radius:var(--radius);
  padding:14px 16px;
  font-weight:600;
  margin:0 0 14px;
}

.sec--hero{padding-top:34px;}
.sec--hero h1{font-size:1.9rem;}

.facts{list-style:none;margin:18px 0 0;padding:0;}
.facts li{
  display:flex;gap:10px;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--line-2);
  font-size:0.92rem;
}
.facts li span{
  flex:0 0 92px;color:var(--ink-3);font-size:0.78rem;letter-spacing:0.02em;
}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:0;padding:0;}
.tl li{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 0 11px 14px;
  border-left:2px solid var(--line);
  position:relative;
}
.tl li::before{
  content:"";position:absolute;left:-5px;top:17px;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}
.tl b{font-size:0.78rem;color:var(--accent);letter-spacing:0.01em;}
.tl span{font-size:0.93rem;color:var(--ink);}

.plain{margin:0 0 10px;padding-left:18px;}
.plain li{margin:4px 0;}
.num{margin:0 0 10px;padding-left:20px;}
.num li{margin:6px 0;}
.plainline{margin:0 0 10px;color:var(--ink-2);font-size:0.93rem;}

/* ---------- chips ---------- */
.chip{
  display:inline-block;
  padding:2px 8px;margin:0 4px 4px 0;
  border-radius:999px;
  font-size:0.72rem;font-weight:700;letter-spacing:0.02em;
  border:1px solid var(--line);
  background:var(--bg-2);color:var(--ink-2);
  white-space:nowrap;
}
.chip--hrm{background:#eaf1f7;border-color:#cddff0;color:#1b4965;}
.chip--hrd{background:#eaf4ef;border-color:#cde3d7;color:#1f5a43;}
.chip--ai{background:#f0edf8;border-color:#ddd6ef;color:#473a74;}
.chip--org{background:#f7f0e9;border-color:#ecdcc9;color:#6b4a24;}
.chip--jdg{background:#f3f1ee;border-color:#e0dbd3;color:#4e483f;}
.chip--todo{
  background:var(--todo-bg);
  border:1px dashed var(--todo-line);
  color:#8a6d12;
}

.legend{margin:0 0 14px;font-size:0.78rem;color:var(--ink-3);}
.legend em{display:block;margin-top:6px;font-style:normal;}

.tools{margin:0 0 18px;}
.btn{
  font:inherit;font-size:0.82rem;font-weight:700;
  color:var(--accent);background:#fff;
  border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;cursor:pointer;
}
.btn:hover{background:var(--accent-soft);}

/* ---------- card ---------- */
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 16px;
  margin:0 0 16px;
  background:#fff;
}
.card__hd{margin:0 0 12px;}
.card__hd h3{margin:0 0 8px;line-height:1.5;}
.tags{margin:0;}

.stage{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  padding:11px 0;
  border-top:1px dashed var(--line);
}
.stage > b{
  font-size:0.72rem;letter-spacing:0.08em;
  color:var(--accent);font-weight:800;
}
.stage p{margin:0 0 8px;}
.stage p:last-child{margin-bottom:0;}
.stage em{font-style:normal;color:var(--ink-3);font-size:0.84rem;}

details{
  border-top:1px dashed var(--line);
  padding:4px 0;
}
details > summary{
  cursor:pointer;
  padding:9px 0;
  font-weight:700;font-size:0.94rem;
  list-style:none;
}
details > summary::-webkit-details-marker{display:none;}
details > summary::before{
  content:"+ ";color:var(--accent);font-weight:800;
}
details[open] > summary::before{content:"– ";}
details > summary:hover{color:var(--accent);}

blockquote{
  margin:0 0 12px;
  padding:12px 14px;
  background:var(--bg-2);
  border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink);
  font-size:0.95rem;
}

/* ---------- placeholder ---------- */
.todo{
  margin:8px 0;
  padding:11px 13px;
  border:1px dashed var(--todo-line);
  border-radius:var(--radius);
  background:var(--todo-bg);
  color:#6d5610;
  font-size:0.88rem;
  line-height:1.6;
}
.todo__tag{
  display:inline-block;
  margin-right:7px;
  padding:1px 8px;
  border:1px dashed var(--todo-line);
  border-radius:999px;
  background:#fff;
  font-size:0.7rem;font-weight:800;letter-spacing:0.03em;
  color:#8a6d12;
  white-space:nowrap;
}

/* ---------- market map ---------- */
.sec--market{background:transparent;}
.map{list-style:none;margin:0 0 12px;padding:0;}
.map li{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.map li:last-child{border-bottom:1px solid var(--line);}
.map__q,.map__a{font-size:0.92rem;}
.map__q{color:var(--ink);font-weight:600;}
.map__a{color:var(--ink-2);}
.map__q span,.map__a span{
  display:block;
  font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:2px;
}
.map__a span{color:var(--accent);}
.src{font-size:0.78rem;color:var(--ink-3);margin:0;}

/* ---------- mini grid ---------- */
.grid2{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 6px;}
.mini{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 14px;
  background:#fff;
}
.mini b{display:block;font-size:0.95rem;margin-bottom:3px;}
.mini span{display:block;font-size:0.85rem;color:var(--ink-2);}
.mini a{display:inline-block;margin-top:6px;font-size:0.82rem;}

/* ---------- footer ---------- */
.foot{
  max-width:var(--w);margin:0 auto;
  padding:30px 18px 54px;
  border-top:1px solid var(--line);
  font-size:0.82rem;color:var(--ink-3);
}
.foot p{margin:0 0 4px;}
.foot__note{margin-top:10px;}

/* ---------- desktop ---------- */
@media (min-width:560px){
  .stage{grid-template-columns:84px 1fr;gap:14px;}
  .stage > b{padding-top:5px;grid-column:1;}
  .stage > :not(b){grid-column:2;}
  .map li{grid-template-columns:1fr 1fr;gap:18px;}
  .grid2{grid-template-columns:1fr 1fr;}
  .tl li{flex-direction:row;gap:14px;}
  .tl b{flex:0 0 118px;padding-top:2px;}
}

@media (min-width:860px){
  body{font-size:17px;}
  .sec--hero h1{font-size:2.15rem;}
  .topbar__in{padding:0 18px;}
  .brand{height:58px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

@media print{
  .topbar,.tools,.notice{display:none;}
  details{display:block;}
  details > summary{display:none;}
}