/* =========================================================================
   style.css — playbuilder.xyz
   테마 색상은 :root 와 [data-theme="dark"] 두 블록만 고치면 전부 바뀝니다.
   ========================================================================= */

/* ------------------------------------------------------------- TOKENS -- */
:root{
  --bg:        #ffffff;
  --bg-alt:    #f7f8fb;
  --bg-elev:   #ffffff;
  --line:      #e6e8ef;
  --line-soft: #eef0f5;
  --tx:        #12141c;
  --tx-2:      #4a5060;
  --tx-3:      #858b9c;

  --acc:       #4f46e5;
  --acc-2:     #7c3aed;
  --acc-3:     #06b6d4;
  --acc-soft:  #eef0ff;
  --ok:        #12a150;
  --warn:      #d97706;
  --down:      #0f9d58;

  --term-bg:   #0d1117;
  --term-bg-2: #161b22;
  --term-tx:   #d7dce4;
  --term-dim:  #7d8698;
  --term-grn:  #3fb950;
  --term-cyn:  #39c5cf;
  --term-yel:  #e3b341;
  --term-red:  #ff7b72;
  --term-mag:  #bc8cff;

  --r:    14px;
  --r-sm: 10px;
  --r-lg: 22px;
  --sh:    0 1px 2px rgba(16,20,40,.05), 0 8px 24px -12px rgba(16,20,40,.14);
  --sh-lg: 0 2px 4px rgba(16,20,40,.05), 0 24px 60px -20px rgba(16,20,40,.22);
  --wrap: 1200px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

[data-theme="dark"]{
  --bg:        #0a0c12;
  --bg-alt:    #0f121a;
  --bg-elev:   #141824;
  --line:      #242a38;
  --line-soft: #1b2030;
  --tx:        #eef1f7;
  --tx-2:      #a9b1c3;
  --tx-3:      #6f7789;

  --acc:       #8b8bff;
  --acc-2:     #b78cff;
  --acc-3:     #4dd8e8;
  --acc-soft:  #1b1f3a;
  --ok:        #3fb950;
  --down:      #3fb950;

  --term-bg:   #06080d;
  --term-bg-2: #0f131c;
  --sh:    0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --sh-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.8);
}

/* -------------------------------------------------------------- RESET -- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:120px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; line-height:1.2; letter-spacing:-.02em; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--acc); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

/* ------------------------------------------------------------- HEADER -- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.site-header.stuck{ border-bottom-color:var(--line); box-shadow:0 1px 20px -8px rgba(0,0,0,.18); }
.header-inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-block:16px; }

.brand-name{ display:block; font-size:20px; font-weight:800; letter-spacing:-.03em; }
.brand-role{ margin:1px 0 6px; font-family:var(--mono); font-size:12.5px; color:var(--tx-2); letter-spacing:.02em; }
.brand-links{ display:flex; flex-wrap:wrap; gap:14px; }
.brand-links a{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tx-3); transition:color .15s; }
.brand-links a:hover{ color:var(--acc); }
.ic{
  display:inline-grid; place-items:center; min-width:16px; height:16px;
  font-size:10px; font-weight:700; font-family:var(--mono); line-height:1;
}
.brand-links .ic{ background:var(--bg-alt); border:1px solid var(--line); border-radius:4px; padding:0 3px; }

.nav{ display:flex; align-items:center; gap:26px; padding-top:6px; }
.nav-l{ font-size:14.5px; font-weight:500; color:var(--tx-2); position:relative; padding-block:4px; transition:color .15s; }
.nav-l::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--acc); border-radius:2px; transform:scaleX(0); transition:transform .2s ease;
}
.nav-l:hover{ color:var(--tx); }
.nav-l.active{ color:var(--acc); font-weight:600; }
.nav-l.active::after{ transform:scaleX(1); }

.nav-tools{ display:flex; align-items:center; gap:10px; margin-left:4px; }

.pill-toggle{
  position:relative; display:inline-flex; align-items:center;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:999px;
  padding:3px; cursor:pointer; overflow:hidden;
}
.pill-opt{
  position:relative; z-index:2; display:grid; place-items:center;
  width:34px; height:22px; font-family:var(--mono); font-size:11px; font-weight:700;
  color:var(--tx-3); transition:color .2s ease;
}
.pill-opt.on{ color:#fff; }
.pill-knob{
  position:absolute; z-index:1; top:3px; left:3px; width:34px; height:22px;
  background:linear-gradient(135deg,var(--acc),var(--acc-2)); border-radius:999px;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.pill-knob.right{ transform:translateX(34px); }

.icon-btn{
  display:grid; place-items:center; width:32px; height:32px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:9px;
  cursor:pointer; font-size:14px; transition:.15s;
}
.icon-btn:hover{ border-color:var(--acc); color:var(--acc); }

/* align-items 를 명시하지 않으면 Chrome의 button 기본 스타일(align-items:center) 때문에
   세로 flex 안의 막대 너비가 0이 됩니다. stretch + width:100% 로 고정. */
.burger{ display:none; flex-direction:column; align-items:stretch; justify-content:center;
  gap:5px; width:38px; height:38px; padding:9px 8px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:9px; cursor:pointer; }
.burger span{ display:block; width:100%; height:2px; background:var(--tx); border-radius:2px; transition:.2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------- HERO -- */
.hero{ position:relative; padding-block:76px 84px; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(720px 380px at 78% 12%, color-mix(in srgb,var(--acc) 13%, transparent), transparent 68%),
    radial-gradient(560px 320px at 8% 78%,  color-mix(in srgb,var(--acc-3) 11%, transparent), transparent 70%);
}
[data-theme="dark"] .hero-bg{ opacity:.55; }
.hero-bg::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
}
.hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:56px; align-items:center; }

.hero-hi{ margin:0 0 4px; font-size:clamp(26px,3.4vw,38px); font-weight:700; letter-spacing:-.03em; }
.wave{ display:inline-block; animation:wave 2.6s ease-in-out infinite; transform-origin:70% 70%; }
@keyframes wave{ 0%,60%,100%{transform:rotate(0)} 10%{transform:rotate(14deg)} 20%{transform:rotate(-8deg)} 30%{transform:rotate(14deg)} 40%{transform:rotate(-4deg)} 50%{transform:rotate(10deg)} }

.hero-name{ font-size:clamp(40px,6.4vw,72px); font-weight:800; letter-spacing:-.045em; margin-bottom:18px; }
.grad{
  background:linear-gradient(100deg,var(--acc) 0%,var(--acc-2) 45%,var(--acc-3) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sum{ margin:0 0 30px; font-size:16.5px; line-height:1.75; color:var(--tx-2); max-width:56ch; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:11px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; font-size:14.5px; font-weight:600; border-radius:11px;
  background:var(--bg-elev); border:1px solid var(--line); color:var(--tx);
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh); border-color:var(--acc); }
.btn-primary{
  background:linear-gradient(135deg,var(--acc),var(--acc-2)); border-color:transparent; color:#fff;
  box-shadow:0 8px 22px -10px color-mix(in srgb,var(--acc) 80%, transparent);
}
.btn-primary:hover{ border-color:transparent; box-shadow:0 14px 28px -12px color-mix(in srgb,var(--acc) 90%, transparent); }
.btn-yt{ color:#fff; background:#ff0033; border-color:transparent; }
.btn-yt:hover{ border-color:transparent; background:#e6002e; }
.yt-ic{ display:inline-grid; place-items:center; }

/* ----------------------------------------------------------- TERMINAL -- */
.hero-term{ display:flex; flex-direction:column; gap:12px; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stat{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 14px; text-align:center; box-shadow:var(--sh); }
.stat-k{ margin:0 0 3px; font-family:var(--mono); font-size:clamp(7.2px,.62vw,9.5px); letter-spacing:.09em; color:var(--tx-3); white-space:nowrap; }
.stat-v{ margin:0; font-size:clamp(13px,1.15vw,16px); font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.stat-v.ok{ color:var(--ok); } .stat-v.down{ color:var(--down); } .stat-v.acc{ color:var(--acc); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%, transparent); animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }

.term{
  background:var(--term-bg); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh-lg); border:1px solid color-mix(in srgb,var(--term-tx) 12%, transparent);
  display:flex; flex-direction:column;
}
.term-bar{ display:flex; align-items:center; gap:7px; padding:10px 14px; background:var(--term-bg-2); border-bottom:1px solid rgba(255,255,255,.06); }
.tl{ width:11px; height:11px; border-radius:50%; }
.tl.r{ background:#ff5f57 } .tl.y{ background:#febc2e } .tl.g{ background:#28c840 }
.term-title{ flex:1; text-align:center; font-family:var(--mono); font-size:11.5px; color:var(--term-dim); }
.term-ver{ font-family:var(--mono); font-size:10.5px; color:var(--term-dim); opacity:.7; }
@media(max-width:520px){ .term-ver{ display:none } }

.term-body{
  height:330px; overflow-y:auto; padding:14px 16px;
  font-family:var(--mono); font-size:12.8px; line-height:1.75; color:var(--term-tx);
  scrollbar-width:thin; scrollbar-color:#39414f transparent;
}
.term-body::-webkit-scrollbar{ width:8px }
.term-body::-webkit-scrollbar-thumb{ background:#39414f; border-radius:4px }
.term-body .ln{ white-space:pre-wrap; word-break:break-word; }
.term-body .cmd{ color:#fff; font-weight:700 }
.term-body .ps1{ color:var(--term-grn); font-weight:700; margin-right:6px }
/* 폰트에 상관없이 열을 맞추기 위한 key/value 행 (한글 폭 문제 회피) */
.term-body .kv{ display:flex; gap:10px; align-items:baseline }
.term-body .kv-k{ flex:none; width:196px; color:var(--term-yel) }
.term-body .kv-v{ flex:1 1 auto; min-width:0 }
@media(max-width:640px){ .term-body .kv{ display:block } .term-body .kv-k{ width:auto } }
.t-g{color:var(--term-grn)} .t-c{color:var(--term-cyn)} .t-y{color:var(--term-yel)}
.t-r{color:var(--term-red)} .t-m{color:var(--term-mag)} .t-d{color:var(--term-dim)}
.t-b{font-weight:700}

.term-input{ display:flex; align-items:center; gap:9px; padding:11px 16px; background:var(--term-bg-2); border-top:1px solid rgba(255,255,255,.06); }
.term-input .prompt{ font-family:var(--mono); font-weight:700; color:var(--term-grn) }
.term-input input{
  flex:1; background:transparent; border:0; outline:none;
  font-family:var(--mono); font-size:12.8px; color:var(--term-tx); caret-color:var(--term-grn);
}
.term-input input::placeholder{ color:var(--term-dim); opacity:.7 }

.term-hints{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.hint{
  font-family:var(--mono); font-size:11.5px; padding:5px 11px; border-radius:8px;
  background:var(--bg-elev); border:1px solid var(--line); color:var(--tx-2); cursor:pointer; transition:.15s;
}
.hint:hover{ border-color:var(--acc); color:var(--acc); transform:translateY(-1px) }

/* ----------------------------------------------------------- SECTIONS -- */
.sec{ padding-block:88px; }
.sec-tight{ padding-block:60px; }
.sec.alt{ background:var(--bg-alt); border-block:1px solid var(--line-soft); }
.sec-head{ margin-bottom:40px; }
.sec-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.kicker{ margin:0 0 8px; font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.18em; color:var(--acc); }
.sec-head h2{ font-size:clamp(26px,3.4vw,38px); font-weight:800; }
.sec-desc{ margin:10px 0 0; color:var(--tx-2); font-size:15.5px; max-width:60ch; }

/* metrics */
.metric-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.metric{
  position:relative; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 18px; overflow:hidden; transition:.2s;
}
.metric:hover{ transform:translateY(-3px); box-shadow:var(--sh); border-color:color-mix(in srgb,var(--acc) 45%, var(--line)); }
.metric::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg,var(--acc),var(--acc-3)); }
.metric-v{ margin:0; font-size:30px; font-weight:800; letter-spacing:-.04em;
  background:linear-gradient(120deg,var(--acc),var(--acc-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.metric-l{ margin:4px 0 3px; font-size:14px; font-weight:600; }
.metric-n{ margin:0; font-size:12px; color:var(--tx-3); font-family:var(--mono); }

/* timeline */
.timeline{ position:relative; padding-left:30px; }
.timeline::before{ content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc-3) 60%, transparent),transparent); }
.job{ position:relative; margin-bottom:16px; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 24px; transition:.2s; }
.job:hover{ border-color:color-mix(in srgb,var(--acc) 45%, var(--line)); box-shadow:var(--sh); }
.job.hl{ border-color:color-mix(in srgb,var(--acc) 40%, var(--line)); background:linear-gradient(180deg,var(--acc-soft),var(--bg-elev) 46%); }
.job::before{
  content:""; position:absolute; left:-30px; top:26px; width:16px; height:16px; border-radius:50%;
  background:var(--bg); border:3px solid var(--acc); box-sizing:border-box;
}
.job.now::before{ background:var(--acc); box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%, transparent); }
.job-top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:4px; }
.job-role{ font-size:17.5px; font-weight:700; letter-spacing:-.02em; }
.job-org{ color:var(--acc); }
.job-org::before{ content:" · "; color:var(--tx-3); }
.job-period{ font-family:var(--mono); font-size:12px; color:var(--tx-3); white-space:nowrap; }
.badge-now{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:10.5px;
  font-weight:700; font-family:var(--mono); background:color-mix(in srgb,var(--ok) 15%, transparent); color:var(--ok); }
.job-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 12px; }
.tag{ font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:6px;
  background:var(--bg-alt); border:1px solid var(--line-soft); color:var(--tx-2); }
.job-points li{ position:relative; padding-left:18px; margin-bottom:7px; font-size:14.5px; line-height:1.7; color:var(--tx-2); }
.job-points li::before{ content:"▸"; position:absolute; left:0; top:0; color:var(--acc); font-size:12px; }
.job-points li:last-child{ margin-bottom:0 }

/* ── experience note (역할과 기간의 경계) ── */
.exp-note{
  font-size:13px; line-height:1.7; color:var(--tx-3);
  border:1px dashed var(--line); border-radius:var(--r-sm);
  padding:12px 16px; margin-bottom:22px; background:var(--bg-alt);
}

/* ── case studies (PAAR 토글) ── */
.case{ border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-alt); margin-top:10px; }
.case summary{
  cursor:pointer; padding:12px 16px; display:flex; align-items:baseline; gap:10px;
  font-size:13.5px; font-weight:600; color:var(--tx-2); list-style:none; user-select:none;
}
.case summary::-webkit-details-marker{ display:none }
.case summary::before{ content:"▸"; color:var(--acc); font-size:12px; flex:none; transition:transform .15s; }
.case[open] summary::before{ transform:rotate(90deg) }
.case summary:hover{ color:var(--tx) }
.cs-no{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--acc); flex:none; }
.cs-body{ padding:2px 18px 18px; border-top:1px solid var(--line); }
.cs-meta{ margin:12px 0 0; font-family:var(--mono); font-size:11px; color:var(--tx-3); }
.cs-lead{ margin:10px 0 2px; font-size:13.5px; line-height:1.75; color:var(--tx-2); font-weight:600; }
.cs-sec{ margin-top:16px }
.cs-kh{
  display:flex; align-items:baseline; gap:8px; margin:0 0 4px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--tx-3);
}
.cs-kh b{ color:var(--acc); font-size:13px }
.cs-h{ margin:12px 0 2px; font-size:12.5px; font-weight:700; color:var(--tx); }
.cs-p{ margin:8px 0 0; font-size:13.5px; line-height:1.75; color:var(--tx-2); }
.cs-note{
  margin:10px 0 0; padding:9px 13px; font-size:13.5px; line-height:1.7; color:var(--tx);
  border-left:3px solid var(--acc); border-radius:0 8px 8px 0; background:var(--acc-soft);
}
.cs-list{ margin:8px 0 0; padding-left:20px; font-size:13.5px; line-height:1.7; color:var(--tx-2); }
ul.cs-list{ list-style:disc }
.cs-list li{ margin-bottom:5px } .cs-list li:last-child{ margin-bottom:0 }
.cs-prewrap{ margin:10px 0 0; overflow-x:auto; background:var(--bg-elev); border:1px solid var(--line); border-radius:8px; }
.cs-pre{ margin:0; padding:12px 14px; font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--tx-2); white-space:pre; }
.cs-tablewrap{ margin:10px 0 0; overflow-x:auto; }
.cs-table{ width:100%; border-collapse:collapse; font-size:12.5px; line-height:1.6; }
.cs-table th, .cs-table td{ border:1px solid var(--line); padding:7px 11px; text-align:left; vertical-align:top; color:var(--tx-2); }
.cs-table th{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--tx-3); background:var(--bg-elev); white-space:nowrap; }
.cs-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:10px 0 0; }
.cs-metric{ border:1px solid var(--line); border-radius:8px; padding:11px 13px; background:var(--bg-elev); }
.cs-metric b{ display:block; font-size:15.5px; letter-spacing:-.02em; color:var(--tx); }
.cs-metric span{ display:block; margin-top:3px; font-size:11.5px; line-height:1.55; color:var(--tx-3); }

/* skills */
.skill-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); gap:14px; }
.skill-card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r); padding:20px; transition:.2s; }
.skill-card:hover{ transform:translateY(-3px); box-shadow:var(--sh); border-color:color-mix(in srgb,var(--acc) 45%, var(--line)); }
.skill-h{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.skill-ico{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; font-size:16px;
  background:var(--acc-soft); color:var(--acc); font-family:var(--mono); font-weight:700; }
.skill-h h3{ font-size:14.5px; font-weight:700; }
.skill-items{ display:flex; flex-wrap:wrap; gap:7px; }
.skill-items span{ font-family:var(--mono); font-size:12px; padding:4px 10px; border-radius:7px;
  background:var(--bg-alt); border:1px solid var(--line-soft); color:var(--tx-2); }

/* certs */
.cert-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:14px; }
.cert{ display:flex; align-items:center; gap:14px; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px; transition:.2s; }
.cert:hover{ transform:translateY(-3px); box-shadow:var(--sh) }
.cert-seal{ flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:12px;
  font-family:var(--mono); font-size:10.5px; font-weight:700; color:#fff; text-align:center; line-height:1.1; }
.cert-seal.aws{ background:linear-gradient(135deg,#ff9900,#ec7211) }
.cert-seal.hashi{ background:linear-gradient(135deg,#7b42bc,#5c2d91) }
.cert-seal.cncf{ background:linear-gradient(135deg,#326ce5,#1d4ed8) }
.cert-name{ font-size:14px; font-weight:600; line-height:1.4 }
.cert-issuer{ font-family:var(--mono); font-size:11px; color:var(--tx-3); margin-top:2px }

/* youtube */
.video-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px 18px; }
.vcard{ display:block; transition:.2s; }
.vcard:hover{ transform:translateY(-4px) }
.vthumb{
  position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:var(--bg-alt); border:1px solid var(--line); box-shadow:var(--sh);
}
.vthumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.vcard:hover .vthumb img{ transform:scale(1.06) }
.vthumb::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.18); opacity:0; transition:opacity .2s;
}
.vcard:hover .vthumb::after{ opacity:1 }
.vplay{
  position:absolute; z-index:2; inset:0; margin:auto; width:56px; height:40px; border-radius:11px;
  background:rgba(0,0,0,.62); display:grid; place-items:center; color:#fff;
  opacity:0; transform:scale(.82); transition:.22s ease;
}
.vcard:hover .vplay{ opacity:1; transform:scale(1); background:#ff0033 }
.vplay svg{ width:20px; height:20px }
.vdate{
  position:absolute; z-index:2; right:8px; bottom:8px; padding:2px 7px; border-radius:5px;
  background:rgba(0,0,0,.78); color:#fff; font-family:var(--mono); font-size:10.5px;
}
.vtitle{
  margin:11px 0 4px; font-size:14.5px; font-weight:600; line-height:1.45; color:var(--tx);
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vcard:hover .vtitle{ color:var(--acc) }
.vmeta{ margin:0; font-family:var(--mono); font-size:11.5px; color:var(--tx-3) }

.v-skel .vthumb{ background:linear-gradient(100deg,var(--bg-alt) 30%,var(--line-soft) 50%,var(--bg-alt) 70%);
  background-size:220% 100%; animation:shimmer 1.3s linear infinite; }
.v-skel .vtitle{ height:14px; width:85%; border-radius:5px; background:var(--line-soft) }
@keyframes shimmer{ to{ background-position:-220% 0 } }

.v-empty{ grid-column:1/-1; text-align:center; padding:44px 20px; color:var(--tx-3);
  border:1px dashed var(--line); border-radius:var(--r); }

/* about */
.about-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.panel{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r); padding:22px }
.panel-h{ font-family:var(--mono); font-size:11.5px; letter-spacing:.15em; color:var(--acc); margin-bottom:14px; text-transform:uppercase }
.lined li{ padding:11px 0; border-bottom:1px solid var(--line-soft) }
.lined li:last-child{ border-bottom:0; padding-bottom:0 }
.lined li:first-child{ padding-top:0 }
.li-t{ font-size:14.5px; font-weight:600 }
.li-s{ font-size:13px; color:var(--tx-2); margin-top:1px }
.li-p{ font-family:var(--mono); font-size:11.5px; color:var(--tx-3); margin-top:3px }

/* contact */
.contact{ padding-bottom:96px }
.contact-card{
  position:relative; overflow:hidden; text-align:center;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg); padding:52px 32px;
  box-shadow:var(--sh-lg);
}
.contact-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 260px at 50% -10%, color-mix(in srgb,var(--acc) 16%, transparent), transparent 70%);
}
.contact-card > *{ position:relative }
.contact-card .sec-desc{ margin-inline:auto }
.contact-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:11px; margin-top:28px }
.clink{
  display:flex; flex-direction:column; align-items:center; gap:2px; min-width:158px;
  padding:16px 18px; border-radius:var(--r); background:var(--bg-alt); border:1px solid var(--line); transition:.2s;
}
.clink:hover{ transform:translateY(-3px); border-color:var(--acc); box-shadow:var(--sh) }
.clink .ic{ width:30px; height:30px; border-radius:8px; background:var(--acc-soft); color:var(--acc); font-size:13px; margin-bottom:4px }
.clink b{ font-size:13.5px }
.clink span:last-child{ font-family:var(--mono); font-size:11.5px; color:var(--tx-3) }

/* footer */
.site-footer{ border-top:1px solid var(--line); padding-block:26px; background:var(--bg-alt) }
.footer-inner{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:var(--tx-3) }
.footer-inner p{ margin:0 }

/* reveal */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease }
.rv.in{ opacity:1; transform:none }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width:1040px){
  .hero-grid{ grid-template-columns:1fr; gap:40px }
  .hero{ padding-block:52px 64px }
}
@media (max-width:860px){
  .burger{ display:flex }
  .header-inner{ align-items:center }
  .nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:8px 24px 18px;
    box-shadow:var(--sh-lg); display:none;
  }
  .nav.open{ display:flex }
  .nav-l{ padding:13px 0; border-bottom:1px solid var(--line-soft); font-size:15.5px }
  .nav-l::after{ display:none }
  .nav-tools{ margin:14px 0 0; justify-content:flex-start }
  .brand-links{ display:none }
}
@media (max-width:640px){
  .wrap{ padding-inline:18px }
  .sec{ padding-block:60px }
  .stat-row{ grid-template-columns:1fr; }
  .stat{ display:flex; align-items:center; justify-content:space-between; text-align:left; padding:9px 14px }
  .stat-k{ margin:0 }
  .term-body{ height:250px; font-size:12px }
  .timeline{ padding-left:22px }
  .job{ padding:18px 16px }
  .job::before{ left:-22px; width:13px; height:13px; top:22px }
  .contact-card{ padding:36px 20px }
  .clink{ min-width:calc(50% - 6px) }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center }
  .hero-sum{ font-size:15.5px }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  html{ scroll-behavior:auto }
  .rv{ opacity:1; transform:none }
}

@media print{
  /* 다크모드 상태에서 인쇄해도 흰 배경·검정 글자로 강제 */
  :root, [data-theme="dark"]{
    --bg:#fff; --bg-alt:#fff; --bg-elev:#fff;
    --line:#ddd; --line-soft:#eee;
    --tx:#000; --tx-2:#333; --tx-3:#555; --acc-soft:#f0f0ff;
  }
  .site-header,.hero-term,.term-hints,.hero-bg,.site-footer,.hero-cta{ display:none !important }
  .sec{ padding-block:20px; break-inside:avoid }
  body{ background:#fff; color:#000 }
  /* 스크롤 애니메이션 대기 상태(opacity:0)로 인쇄되는 것 방지 */
  .rv{ opacity:1 !important; transform:none !important }
  /* 그라데이션 클리핑 텍스트는 인쇄 시 투명해지므로 일반 색으로 */
  .grad,.metric-v{ background:none !important; color:#000 !important; -webkit-text-fill-color:#000 }
}