:root {
  --bg:          #faf9f6;        /* warm cream */
  --bg2:         #ffffff;        /* card white */
  --text:        #0c0c0c;
  --text-body:   #555;           /* body text on white: 7.9:1 */
  --text-meta:   #666;           /* meta text on white: 5.5:1 */
  --muted:       #888;           /* decorative only — don't use on small text */
  --dim:         #d5d0c8;
  --accent:      #a3e635;        /* lime — primary (기본값) */
  --accent2:     #a3e635;
  --ar:          163, 230, 53;
  --cyan:        #0891b2;        /* teal — secondary */
  --cr:          8, 145, 178;
  --border:      #0c0c0c;        /* dark border (neobrutalism) */
  --shadow:      #0c0c0c;        /* dark shadow */
  --terminal-bg: #0d0d0d;        /* terminal world bg */
  --mono:        'JetBrains Mono', monospace;
  --sans:        'Inter', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
}
ul{list-style:none;}
a{color:inherit;text-decoration:none;}

/* ── SKIP NAV ── */
.skip-nav{
  position:fixed;top:-100%;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  padding:10px 20px;z-index:10000;
  border:2px solid var(--text);box-shadow:3px 3px 0 var(--text);
}
.skip-nav:focus{top:8px;}

/* ── FOCUS ── */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
/* remove outline for mouse users — keep for keyboard */
:focus:not(:focus-visible){outline:none;}

/* ── CUSTOM CURSOR (motion ok only) ── */
@media (prefers-reduced-motion: no-preference){
  body.has-custom-cursor{cursor:none;}
  body.has-custom-cursor button{cursor:none;}
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  html{scroll-behavior:auto;}
  /* ensure cards are always visible */
  .brut-card{opacity:1 !important;transform:none !important;}
  .stag{opacity:1 !important;transform:none !important;}
  .char{opacity:1 !important;transform:none !important;}
  #cursor-dot,#cursor-ring{display:none !important;}
}

/* ── SCROLL PROGRESS ── */
#progress{
  position:fixed;top:0;left:0;
  height:3px;width:0%;
  background:var(--accent);
  z-index:9999;
  box-shadow:0 0 8px var(--accent);
  transition:width .08s linear;
}

/* ── CUSTOM CURSOR ── */
#cursor-dot{
  position:fixed;pointer-events:none;z-index:9998;
  width:8px;height:8px;
  background:var(--accent);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:transform .1s, width .2s, height .2s, background .2s;
}
#cursor-ring{
  position:fixed;pointer-events:none;z-index:9997;
  width:36px;height:36px;
  border:1.5px solid rgba(var(--ar),.6);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:transform .12s ease, width .25s, height .25s, border-color .25s;
}
body.cursor-hover #cursor-dot{
  width:12px;height:12px;
  background:var(--bg);
  box-shadow:0 0 0 2px var(--accent);
}
body.cursor-hover #cursor-ring{
  width:52px;height:52px;
  border-color:var(--accent);
}

/* ── COMMAND PALETTE ── */
#cmd-overlay{
  position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:15vh;
  transition:opacity .2s;
}
#cmd-overlay.hidden{display:none;}
#cmd-box{
  width:100%;max-width:560px;
  background:var(--bg2);
  border:2px solid var(--border);
  box-shadow:6px 6px 0 var(--shadow);
  border-radius:0;
  overflow:hidden;
}
#cmd-header{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--dim);
}
#cmd-icon{
  font-size:18px;color:var(--accent);
  font-family:var(--mono);
  flex-shrink:0;
}
#cmd-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-family:var(--sans);font-size:15px;
}
#cmd-input::placeholder{color:var(--muted);}
#cmd-esc{
  font-family:var(--mono);font-size:10px;
  color:var(--muted);border:1px solid var(--dim);
  padding:2px 6px;border-radius:3px;flex-shrink:0;
}
#cmd-list{max-height:320px;overflow-y:auto;}
#cmd-list li{
  display:flex;align-items:center;gap:14px;
  padding:12px 20px;
  font-size:14px;color:var(--text);
  cursor:none;transition:background .1s;
}
#cmd-list li:hover,#cmd-list li.active{background:rgba(var(--ar),.1);}
#cmd-list li .cmd-icon{color:var(--accent);font-family:var(--mono);font-size:12px;width:20px;}
#cmd-list li .cmd-label{flex:1;}
#cmd-list li .cmd-hint{font-size:11px;color:var(--muted);font-family:var(--mono);}
#cmd-footer{
  padding:10px 20px;
  border-top:1px solid var(--dim);
  display:flex;gap:20px;
}
#cmd-footer span{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;}
kbd{
  background:var(--dim);border:1px solid #bbb;
  border-radius:3px;padding:1px 5px;
  font-family:var(--mono);font-size:10px;color:var(--text);
}

/* ── NAV ── */
.nav{
  position:fixed;
  top:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:100%;
  z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 40px;
  border:1.5px solid transparent;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:
    top .45s cubic-bezier(.16,1,.3,1),
    max-width .45s cubic-bezier(.16,1,.3,1),
    padding .45s cubic-bezier(.16,1,.3,1),
    border-radius .45s cubic-bezier(.16,1,.3,1),
    background .3s,
    box-shadow .3s,
    border-color .3s;
}
.nav.floating{
  top:14px;
  max-width:620px;
  padding:10px 14px 10px 24px;
  border-radius:100px;
  background:rgba(250,249,246,.92);
  backdrop-filter:blur(20px);
  border-color:rgba(0,0,0,.1);
  box-shadow:0 4px 32px rgba(0,0,0,.07), 3px 3px 0 var(--shadow);
}
.nav.floating .nav-center{ gap:18px; }
.nav.floating .nav-logo{ font-size:16px; }
.nav-logo{
  font-family:var(--mono);font-weight:800;font-size:18px;letter-spacing:.05em;
  transition:font-size .3s;
}
.nav-logo span{color:var(--accent);}
.nav-center{display:flex;gap:28px;transition:gap .3s;}
.nav-center a{font-size:13px;color:var(--muted);transition:color .2s;letter-spacing:.05em;}
.nav-center a:hover{color:var(--text);}
.cmd-trigger{
  display:flex;align-items:center;gap:8px;
  background:transparent;border:1px solid var(--dim);
  color:var(--muted);font-family:var(--sans);font-size:12px;
  padding:6px 12px;
  transition:border-color .2s, color .2s;
}
.cmd-trigger:hover{border-color:var(--border);color:var(--text);}
.cmd-trigger kbd{
  background:var(--dim);font-size:10px;
  padding:1px 5px;border:1px solid #bbb;
}

/* ── HERO ── */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding:120px 40px 80px;
  max-width:1100px;margin:0 auto;
  overflow:hidden;
}
.hero-inner{position:relative;z-index:1;}

.hero-label{
  font-family:var(--mono);font-size:12px;
  color:var(--cyan);letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:28px;opacity:.9;
}

.hero-name{
  font-size:clamp(60px,9vw,110px);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:.95;
  margin-bottom:32px;
  overflow:hidden;
}
.name-word{display:block;}

/* Kinetic: each char wraps */
.char{
  display:inline-block;
  opacity:0;
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.char.visible{opacity:1;transform:translateY(0);}
.char-space{display:inline-block;width:.25em;}

.hero-desc{
  font-size:16px;color:var(--text-meta);
  line-height:1.8;margin-bottom:12px;max-width:500px;
}
.hero-ai-note{
  font-family:var(--mono);
  font-size:13px;
  color:#888;
  margin-bottom:36px;
}

.hero-stats{
  display:flex;align-items:center;gap:0;margin-bottom:48px;
}
.stat{
  display:flex;flex-direction:column;
  align-items:flex-start;padding:0 32px;
}
.stat:first-child{padding-left:0;}
.stat-n{
  font-family:var(--mono);font-size:36px;font-weight:800;
  color:var(--accent);line-height:1;
  text-shadow: 2px 2px 0 rgba(var(--ar),.25);
}
.stat-l{
  font-size:11px;color:var(--muted);
  letter-spacing:.12em;text-transform:uppercase;margin-top:4px;
}
.stat-sub{
  font-family:var(--mono);font-size:9px;color:var(--cyan);
  letter-spacing:.14em;text-transform:uppercase;margin-top:3px;opacity:.75;
}
.stat-sep{width:1px;height:50px;background:var(--dim);}

.hero-scroll-hint{
  font-family:var(--mono);font-size:11px;
  color:var(--muted);letter-spacing:.1em;
  animation:scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(5px);}
}

/* Hero big BG text */
.hero-bg-text{
  position:absolute;
  right:-60px;top:50%;transform:translateY(-50%);
  font-size:clamp(120px,18vw,220px);
  font-weight:900;
  color:rgba(0,0,0,.025);
  letter-spacing:-.06em;
  pointer-events:none;user-select:none;
  white-space:nowrap;
  z-index:0;
}

/* ── SECTION ── */
.section{padding:100px 0;}
.section-rel{position:relative;overflow:hidden;}
.section-bg-num{
  position:absolute;
  right:-30px;top:50%;
  transform:translateY(-50%);
  font-size:clamp(180px,24vw,300px);
  font-weight:900;
  color:rgba(0,0,0,.04);
  letter-spacing:-.06em;
  pointer-events:none;user-select:none;
  line-height:1;z-index:0;
  font-family:var(--sans);
}
.container{max-width:1100px;margin:0 auto;padding:0 40px;}

.section-label{
  display:flex;align-items:center;gap:16px;
  margin-bottom:56px;
}
.label-num{
  font-family:var(--mono);font-size:12px;
  color:var(--cyan);letter-spacing:.1em;
}
.label-text{
  font-size:clamp(28px,4vw,40px);font-weight:800;
  letter-spacing:-.02em;
}
.section-label::after{
  content:'';flex:1;height:2px;
  background:linear-gradient(90deg,var(--dim),transparent);
  max-width:400px;
}

/* ── NEOBRUTALISM CARDS ── */
.career-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

/* ── FEATURED CARD ── */
.brut-card.featured{
  grid-column: 1 / -1;
  border-color: var(--border);
  box-shadow: 8px 8px 0 var(--accent);
  position: relative;
}
.brut-card.featured::before{
  content: '★ 대표 프로젝트';
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: #0c0c0c;
  background: var(--accent);
  padding: 3px 10px;
  z-index: 2;
}
.brut-card.featured:hover{
  box-shadow: 12px 12px 0 var(--accent);
}

@media (min-width: 769px) {
  .brut-card:has(.arch-wrap) .brut-body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    gap: 0 40px;
    align-items: start;
  }
  .brut-card:has(.arch-wrap) .brut-body > :not(.arch-wrap) { grid-column: 1; }
  .brut-card:has(.arch-wrap) .arch-wrap{
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    align-self: center;
  }
}


.brut-card{
  background:var(--bg2);
  border:2px solid var(--border);
  box-shadow:5px 5px 0 var(--shadow);
  border-radius:0;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  /* default: always visible — JS adds .anim-ready for motion enhancement */
}
.brut-card:hover{
  transform:translate(-3px,-3px);
  box-shadow:8px 8px 0 var(--accent);
}
/* animation enhancement — only applied when JS detects no reduced-motion preference */
.brut-card.anim-ready{opacity:0;}
.brut-card.anim-ready.reveal-left{transform:translateX(-60px);}
.brut-card.anim-ready.reveal-right{transform:translateX(60px);}
.brut-card.anim-ready.visible{
  opacity:1;
  transform:translate(0,0)!important;
  transition:transform .65s cubic-bezier(.16,1,.3,1),
             opacity .5s ease,
             box-shadow .2s ease;
}
.brut-card.anim-ready.visible:hover{transform:translate(-3px,-3px)!important;}

.brut-year{
  font-family:var(--mono);
  font-size:80px;font-weight:900;
  color:rgba(0,0,0,.06);
  line-height:1;padding:16px 24px 0;
  letter-spacing:-.04em;user-select:none;
  transition:color .3s;
}
.brut-card:hover .brut-year{color:rgba(var(--ar),.18);}

.brut-body{padding:8px 24px 28px;}

.brut-head{
  display:flex;justify-content:space-between;
  align-items:flex-start;gap:12px;
  margin-bottom:16px;flex-wrap:wrap;
}
.brut-title{font-size:16px;font-weight:700;margin-bottom:3px;line-height:1.3;}
.brut-sub{font-size:12px;color:var(--text-meta);} /* #666 on white = 5.5:1 ✓ */
.brut-period{
  font-family:var(--mono);font-size:11px;
  color:var(--cyan);text-align:right;
  white-space:nowrap;flex-shrink:0;opacity:.9;
}

.brut-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;}
.btag{
  background:rgba(var(--ar),.1);
  color:var(--text);
  border:1px solid rgba(var(--ar),.4);
  font-family:var(--mono);font-size:12px;
  padding:3px 10px;letter-spacing:.02em;
  border-radius:0;
  transition:background .2s;
}
.btag:hover{background:rgba(var(--ar),.22);}
.btag-ai{
  background:rgba(var(--ar),.18);
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
}

.brut-list{display:flex;flex-direction:column;gap:8px;}
.brut-list li{
  font-size:13px;color:var(--text-body);
  padding-left:16px;position:relative;line-height:1.5;
}
.brut-list li::before{
  content:'▸';position:absolute;left:0;
  color:var(--accent);font-size:11px;top:3px;
}
.li-ctx{
  display:block;
  font-size:11px;color:var(--text-meta); /* #666 on white = 5.5:1 ✓ */
  margin-bottom:1px;
  letter-spacing:.01em;
}
.wacs-proj-link{
  display:inline-block;
  margin-top:12px;
  font-size:11px;font-family:'JetBrains Mono',monospace;
  color:var(--accent);
  border:1.5px solid var(--accent);
  padding:3px 10px;
  text-decoration:none;
  letter-spacing:.03em;
  transition:background .15s,color .15s;
}
.wacs-proj-link:hover{
  background:var(--accent);
  color:#fff;
}

/* ── PROJECTS ── */
#projects{
  border-top:2px solid var(--dim);
}
.proj-card{
  grid-column: 1 / -1;
  width: 100%;
}
.proj-ai-note{
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  letter-spacing:.04em;
  padding:6px 12px;
  margin-bottom:28px;
  opacity:.7;
  background:rgba(var(--ar),.05);
  border:1px solid rgba(var(--ar),.18);
}

/* ── LOG SAMPLE ── */
.log-sample{
  margin-top:16px;border:1.5px solid var(--border);cursor:default;
}
.ls-label{
  display:block;background:var(--border);color:var(--bg2);
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.08em;padding:3px 10px;
  user-select:none;
}
.ls-code{
  margin:0;padding:0 12px;
  font-family:var(--mono);font-size:11px;color:#555;
  background:var(--bg2);white-space:pre;
  line-height:1.8;max-height:0;overflow:hidden;
  transition:max-height .35s ease, padding .35s ease;
}
.lj-k   {color:var(--cyan);}
.lj-s   {color:#222;}
.lj-n   {color:var(--accent);}
.lj-null{color:#aaa;}
.lj-b   {color:#888;}
.lj-p   {color:#aaa;}

/* Desktop: hover to reveal */
@media (hover:hover) and (pointer:fine){
  .log-sample:hover .ls-code{max-height:260px;padding:12px 14px;}
  .log-sample:hover .ls-label{background:var(--accent);color:#0c0c0c;}
}

/* Mobile: always visible */
@media (hover:none) and (pointer:coarse){
  .ls-code{max-height:260px;padding:12px 14px;}
}

.grafana-wrap{margin-top:28px;}

.grafana-label{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;gap:8px;
  margin-bottom:12px;
}
.grafana-label-note{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.04em;
  text-transform:none;
  opacity:.7;
}

.grafana-dot{
  width:7px;height:7px;
  background:#22c55e;
  border-radius:50%;
  display:inline-block;
  animation:live-pulse 2s infinite;
}

@keyframes live-pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.45;transform:scale(.75);}
}

/* ── 카드 내 프리뷰 ── */
.grafana-preview-wrap{
  position:relative;
  cursor:pointer;
  overflow:hidden;
  border:2px solid var(--border);
  box-shadow:5px 5px 0 var(--shadow);
  transition:box-shadow .2s, transform .2s;
}
.grafana-preview-wrap:hover{
  box-shadow:8px 8px 0 var(--accent);
  transform:translate(-2px,-2px);
}
.gpanel-preview{
  width:100%;height:220px;
  display:block;border:none;
  pointer-events:none;
}
.grafana-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,transparent 55%);
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:16px 20px;
  transition:background .25s;
}
.grafana-preview-wrap:hover .grafana-overlay{
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.15) 65%);
}
.grafana-overlay-text{
  font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:#fff;opacity:.65;
  transition:opacity .2s;
}
.grafana-preview-wrap:hover .grafana-overlay-text{opacity:1;}

/* ── REDSTONE DEMO ── */
.rs-demo-wrap{margin-top:28px;}

.rs-preview-wrap{
  display:block;
  position:relative;
  cursor:pointer;
  overflow:hidden;
  border:2px solid var(--border);
  box-shadow:5px 5px 0 var(--shadow);
  transition:box-shadow .2s, transform .2s;
  text-decoration:none;
}
.rs-preview-wrap:hover{
  box-shadow:8px 8px 0 var(--accent);
  transform:translate(-2px,-2px);
}
.rs-preview-img{
  width:100%;display:block;
  height:240px;
  object-fit:cover;
  object-position:top;
}

.rs-demo-link{
  display:block;
  border:2px solid var(--border);
  box-shadow:5px 5px 0 var(--shadow);
  padding:20px 24px;
  text-decoration:none;
  color:var(--text);
  transition:box-shadow .2s, transform .2s;
}
.rs-demo-link:hover{
  box-shadow:8px 8px 0 var(--accent);
  transform:translate(-2px,-2px);
}
.rs-demo-inner{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.rs-demo-url{
  font-family:var(--mono);font-size:13px;
  color:var(--accent);letter-spacing:.04em;
}
.rs-demo-arr{
  font-size:18px;color:var(--accent);
  transition:transform .2s;
}
.rs-demo-link:hover .rs-demo-arr{transform:translate(3px,-3px);}

.rs-creds{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:12px;margin-top:12px;border-top:1px solid var(--border);
}
.rs-creds-item{display:flex;align-items:center;gap:6px;}
.rs-creds-key{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.rs-creds-val{
  font-family:var(--mono);font-size:12px;color:var(--text);
  background:rgba(var(--ar),.06);
  padding:2px 8px;border:1px solid var(--border);
}
.rs-creds-sep{color:var(--muted);font-family:var(--mono);}

/* ── 모달 ── */
.grafana-modal{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.grafana-modal.hidden{display:none;}

.grafana-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(2px);
  cursor:pointer;
}
.grafana-modal-box{
  position:relative;z-index:1;
  width:92vw;max-width:1360px;
  background:#0d0d0d;
  border:2px solid rgba(var(--ar),.65);
  box-shadow:6px 6px 0 rgba(var(--ar),.22), 0 32px 80px rgba(0,0,0,.95);
  overflow:hidden;
}

/* 헤더 */
.gm-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:22px 24px 18px;
  border-bottom:1px solid #222;
  background:#111;
}
.gm-header-left{display:flex;flex-direction:column;gap:8px;}
.gm-title-row{display:flex;align-items:center;gap:14px;}
.gm-live-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;
  padding:3px 9px;border:1px solid #1f3a1f;background:#0d1f0d;
}
.gm-live-text{color:#22c55e;}
.gm-live-note{
  color:#666;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:none;
}
.gm-title{
  font-family:var(--mono);font-size:26px;font-weight:700;
  color:#fff;letter-spacing:-.02em;
}
.gm-desc{
  font-family:var(--mono);font-size:11px;
  color:#555;letter-spacing:.03em;
}
.gm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.gm-tag{
  font-family:var(--mono);font-size:10px;
  padding:3px 9px;
  border:1px solid #2a2a2a;
  color:#666;
  letter-spacing:.05em;
}
.gm-header-right{
  display:flex;align-items:center;gap:12px;flex-shrink:0;
}
.gm-github{
  font-family:var(--mono);font-size:11px;
  color:#555;letter-spacing:.08em;
  border:1px solid #2a2a2a;
  padding:5px 12px;
  transition:color .15s,border-color .15s;
}
.gm-github:hover{color:#fff;border-color:#555;}
.grafana-modal-x{
  background:none;border:1px solid #2a2a2a;
  color:#555;font-size:13px;
  padding:5px 10px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.grafana-modal-x:hover{border-color:#fff;color:#fff;}

/* 메타바 */
.gm-meta{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 24px;
  background:#0a0a0a;
  border-bottom:1px solid #1a1a1a;
}
.gm-arch-flow{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
}
.gm-af-node{color:#444;}
.gm-af-node.hi{color:rgba(var(--ar),.85);}
.gm-af-sep{color:#252525;}
.gm-badges{display:flex;gap:6px;}
.gm-badge{
  font-family:var(--mono);font-size:9px;
  padding:2px 9px;
  border:1px solid #222;
  color:#444;letter-spacing:.07em;
  background:#0d0d0d;
}

/* 패널 그리드 */
.grafana-modal-grid{
  display:flex;flex-direction:column;
  gap:1px;background:#2a2a2a;
}
.grafana-modal-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
}

.gpanel{display:block;border:none;background:#111;}
.gm-hero{height:420px;width:100%;}
.gm-stat{height:150px;}

/* ── SKILLS ── */
.skills-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.skill-group{
  display:flex;flex-direction:column;gap:10px;
  padding:16px;
  border:1.5px solid var(--border);
  box-shadow:3px 3px 0 var(--accent);
  background:var(--bg2);
  transition:transform .15s,box-shadow .15s;
}
.skill-group:hover{
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--accent);
}
.sg-label{
  font-family:var(--mono);font-size:10px;
  color:var(--muted);letter-spacing:.12em;
  text-transform:uppercase;
}
.stag-row{display:flex;flex-wrap:wrap;gap:6px;}
.stag{
  font-family:var(--mono);font-size:12px;
  padding:5px 12px;
  border:1px solid var(--dim);
  color:#666;
  transition:all .2s;
}
.stag:hover{
  border-color:var(--border);color:var(--text);
  box-shadow:3px 3px 0 var(--accent);
  transform:translate(-1px,-1px);
}
.stag.main{
  color:var(--text);border-color:#888;
  font-size:13px;padding:6px 14px;
  font-weight:600;
}
.stag.hi{
  color:var(--cyan);
  border-color:rgba(var(--cr),.4);
}
.stag.dim{opacity:.4;}

/* ── FOOTER ── */
.footer{border-top:2px solid var(--border);padding:32px 0;}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;
}
.footer-name{font-family:var(--mono);font-size:13px;color:var(--muted);}

/* ── ABOUT ── */
.about-quote-big {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.03em;
  color: var(--text);
  padding-left: 0;
  margin-bottom: 56px;
  max-width: 820px;
  position: relative;
  z-index: 1;
}
.about-quote-big::before {
  content: '"';
  position: absolute;
  left: -10px;
  top: -50px;
  font-size: clamp(100px, 16vw, 200px);
  color: rgba(var(--ar),.08);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  font-family: var(--sans);
}

/* 터미널 — light 카드 속 dark screen 패널 (의도적 대비) */
.about-terminal {
  background: var(--terminal-bg);
  border: 2px solid var(--border);
  box-shadow: 5px 5px 0 var(--shadow);
  padding: 24px 28px;
  max-width: 640px;
  position: relative;
  z-index: 1;
}
.about-terminal::before {
  content: '● ● ●';
  display: block;
  font-size: 10px;
  color: #444;
  letter-spacing: 4px;
  margin-bottom: 16px;
}
.terminal-line {
  display: flex;
  gap: 14px;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
}
.t-prompt { color: var(--cyan); flex-shrink: 0; }
.t-text   { color: #aaa; }
.t-cursor {
  color: var(--accent);
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%,100%{opacity:1;} 50%{opacity:0;}
}

/* ── ABOUT META (status + location) ── */
.about-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.about-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 5px 14px;
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow);
  text-transform: uppercase;
}
.about-badge.available {
  background: var(--accent);
  color: #fff; /* white on violet = 8.1:1 ✓ (was #0c0c0c = 3.5:1 ✗) */
}
.about-location {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
}

/* ── CONTACT ── */
.clink-disabled{opacity:.45;pointer-events:none;user-select:none;}

.contact-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.clink {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 32px;
  min-width: 200px;
  border: 2px solid var(--border);
  box-shadow: 5px 5px 0 var(--shadow);
  background: var(--bg2);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
}
.clink:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--accent);
  background: rgba(var(--ar),.06);
}
.clink-label {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .06em;
}
.clink-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.clink-arr {
  position: absolute;
  top: 18px;
  right: 20px;
  color: var(--accent);
  font-size: 18px;
  opacity: .6;
  transition: opacity .2s;
}
.clink:hover .clink-arr { opacity: 1; }

/* ── ARCHITECTURE DIAGRAM ── */
.arch-wrap {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--dim);
}
.arch-hint { display: none; }
.arch-btn { display: none; }
.arch-diagram {
  max-height: none;
  overflow: visible;
}
/* SVG는 다크 패널 — 의도적 대비 */
.arch-diagram svg {
  width: 100%; height: auto; display: block;
  border: 1.5px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow);
  transition: box-shadow .2s;
}
.arch-diagram svg:hover {
  box-shadow: 5px 5px 0 var(--accent);
}

/* ── ARCH LIGHTBOX ── */
#arch-lightbox {
  position: fixed;
  inset: 0;
  z-index: 7000;
  background: rgba(8,8,8,.82);
  backdrop-filter: blur(16px) saturate(1.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
#arch-lightbox.open {
  opacity: 1;
  pointer-events: all;
}
#arch-lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  border-radius: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 8px 8px 0 rgba(var(--ar),.25);
  transform: scale(.96);
  transition: transform .3s ease;
}
#arch-lightbox.open #arch-lightbox-inner {
  transform: scale(1);
}
#arch-lightbox-inner svg {
  width: 100%;
  height: auto;
  display: block;
}
#arch-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  transition: background .2s, color .2s;
  cursor: none;
  z-index: 1;
}
#arch-lightbox-close:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
}
#arch-lightbox-esc {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,.3);
  letter-spacing: .12em;
  white-space: nowrap;
}


/* ── RESPONSIVE ── */
@media(max-width:768px){
  .career-grid{grid-template-columns:1fr;}
  .hero{padding:100px 20px 60px;}
  .container{padding:0 20px;}
  .nav{padding:16px 20px;}
  /* mobile nav: hide center links, keep logo + actions */
  .nav-center{display:none;}
  .hero-stats{gap:0;flex-wrap:wrap;}
  .stat{padding:0 12px;}
  .stat:first-child{padding-left:0;}
  .stat-n{font-size:28px;}
  .contact-links{flex-direction:column;}
  .clink{min-width:auto;}
  .about-quote-big{font-size:clamp(22px,5vw,36px);padding-left:20px;}
  .arch-diagram{overflow-x:auto;}
  .arch-diagram svg{min-width:600px;}
  /* stack brut-head on mobile */
  .brut-head{flex-direction:column;gap:6px;}
  .brut-period{text-align:left;}
}

/* ── TOUCH TARGETS ── */
@media (pointer: coarse){
  /* minimum 44px tap target for all interactive elements */
  .btag,.stag,.bstat{
    min-height:44px;
    display:inline-flex;align-items:center;
  }
  .pdf-trigger,.cmd-trigger{
    min-height:44px;padding:10px 14px;
  }
  .tsw-dot{width:36px;height:36px;}
  .wacs-proj-link{
    min-height:44px;display:inline-flex;align-items:center;
    padding:10px 14px;
  }
  .clink{padding:20px 24px;}
  .nav-center a{padding:10px 4px;}
}

/* ── NAV RIGHT WRAPPER ── */
.nav-right{display:flex;align-items:center;gap:8px;}

/* ── PDF TRIGGER ── */
.pdf-trigger{
  display:flex;align-items:center;gap:6px;
  background:transparent;
  border:1px solid var(--dim);
  color:var(--muted);
  font-family:var(--mono);font-size:11px;
  padding:6px 12px;letter-spacing:.06em;
  transition:border-color .2s,color .2s,background .2s;
}
.pdf-trigger:hover{border-color:var(--border);color:var(--text);background:var(--accent);}

/* ── NAV SCROLL SPY ── */
.nav-center a.active{color:var(--text);position:relative;font-weight:600;}
.nav-center a.active::after{
  content:'';
  position:absolute;bottom:-4px;left:0;right:0;
  height:2px;background:var(--accent);
}

/* ── IMPACT CHIPS ── */
.brut-stats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.bstat{
  font-family:var(--mono);font-size:12px;font-weight:700;
  background:var(--text);color:var(--bg);
  padding:4px 11px;letter-spacing:.03em;
  white-space:nowrap;
}

/* ── PRINT / PDF ── */
@media print{
  /* 라이트 테마 — 인터랙션 요소만 제거, 컬러는 그대로 출력 */
  #cursor-dot,#cursor-ring,#progress,
  .nav,#cmd-overlay,.hero-scroll-hint,
  .hero-bg-text,.section-bg-num,
  .arch-hint,.arch-btn,.pdf-trigger,.footer{display:none!important;}

  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  body{background:#faf9f6!important;cursor:default!important;}

  .hero{min-height:auto;padding:40px 0 32px;}
  .char{opacity:1!important;transform:none!important;}

  .section{padding:32px 0!important;}

  /* 카드: 그림자만 제거, 테두리·컬러 브랜드 유지 */
  .brut-card{
    break-inside:avoid;
    box-shadow:none!important;
    border:1.5px solid #0c0c0c!important;
    opacity:1!important;
    transform:none!important;
    margin-bottom:16px;
  }
  .brut-card.featured{ box-shadow:none!important; }

  /* 아키텍처 다이어그램 자동 펼침 */
  .arch-diagram{max-height:none!important;overflow:visible!important;}
  .arch-diagram svg{box-shadow:none!important;}

  .about-terminal{box-shadow:none!important;}
  .clink{box-shadow:none!important;}
  .stag{opacity:1!important;}

  /* 그리드 → 1열 */
  .career-grid{grid-template-columns:1fr!important;}
  .brut-card.featured .brut-body{display:block!important;}
  #theme-sw{display:none!important;}
  #version-sw{display:none!important;}
}

/* ── THEME SWITCHER (임시) ── */
#theme-sw{
  position:fixed;
  bottom:28px;right:28px;
  z-index:7000;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.tsw-label{
  font-family:var(--mono);font-size:8px;
  letter-spacing:.14em;color:var(--muted);
  text-transform:uppercase;
}
.tsw-panel{
  display:flex;align-items:center;gap:6px;
  background:var(--bg2);
  border:1.5px solid var(--border);
  box-shadow:3px 3px 0 var(--shadow);
  padding:8px 12px;
}
.tsw-dot{
  width:22px;height:22px;
  background:var(--c,#ccc);
  border:2px solid transparent;
  border-radius:50%;
  transition:transform .15s, border-color .15s, box-shadow .15s;
  position:relative;
}
.tsw-dot::after{
  content:attr(data-name);
  position:absolute;
  bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);font-size:8px;
  letter-spacing:.08em;
  color:var(--text);
  background:var(--bg2);
  border:1px solid var(--dim);
  padding:2px 6px;
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .15s;
}
.tsw-dot:hover::after{ opacity:1; }
.tsw-dot:hover{ transform:scale(1.2); }
.tsw-dot.active{
  border-color:var(--border);
  box-shadow:2px 2px 0 var(--border);
  transform:scale(1.1);
}
@media(max-width:768px){
  #theme-sw{bottom:16px;right:16px;}
  #version-sw{bottom:16px;right:16px;left:16px;}
  #version-sw .tsw-panel{
    flex-wrap:wrap;justify-content:flex-end;
    max-width:100%;
  }
  #version-sw .vsw-dot{height:26px;padding:0 7px;}
}

/* ── VERSION SWITCHER ── */
#version-sw{
  position:fixed;
  bottom:28px;right:28px;
  z-index:7000;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.vsw-dot{
  height:22px;padding:0 8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);
  color:var(--text);
  border:2px solid var(--border);
  border-radius:5px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  text-decoration:none;
  transition:transform .15s, box-shadow .15s;
  position:relative;
}
.vsw-dot::after{
  content:attr(data-name);
  position:absolute;
  bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);font-size:8px;
  letter-spacing:.08em;
  color:var(--text);
  background:var(--bg2);
  border:1px solid var(--dim);
  padding:2px 6px;
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .15s;
}
.vsw-dot:hover::after{ opacity:1; }
.vsw-dot:hover{ transform:scale(1.15); }
.vsw-dot.active{
  background:var(--accent);
  border-color:var(--border);
  box-shadow:2px 2px 0 var(--border);
  transform:scale(1.1);
}