/* 1. 기본 타이포 & 컬러 ------------------------------------------------ */
:root{
  --font-body:'IBM Plex Sans KR',system-ui,sans-serif;
  --font-head:'IBM Plex Sans KR',system-ui,sans-serif;
  --text:#111;
  --link:#0645ad;           /* 기본 파란 링크 */
  --link-hover:#000;
  --muted:#555;
  --maxw:720px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:17px;line-height:1.65;}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:#fff;
  padding:0 1rem;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

/* 2. 레이아웃 ---------------------------------------------------------- */
main{max-width:var(--maxw);margin:0 auto;padding:3.5rem 0;}
header{text-align:left;margin-bottom:1rem;}

h1{
  font-family:var(--font-head);
  font-size:2.4rem;
  margin-bottom:.4rem;
}
h1 .en{font-family:var(--font-body);font-weight:400;}

h2{
  font-family:var(--font-head);
  font-size:1.5rem;
  margin:2.5rem 0 .8rem;
}
p{
  font-size:15px;
  line-height:1.7;
}
section{margin-bottom:2rem;}

/* 3. 링크 & 소셜 ------------------------------------------------------- */
a{color:var(--link);text-decoration:none;}
a:hover{color:var(--link-hover);}
.social{display:flex;gap:1.1rem;font-size:0.95rem;margin-top:.5rem;}
.social a:hover{text-decoration:underline;}

/* — h3 섹션 제목 -------------------------------------------------------- */
h3{
  font-family:var(--font-head);
  font-size:1.25rem;
  margin-bottom:.8rem;
  padding-bottom:.35rem;
  border-bottom:1.5px solid #e0e0e0;
}

/* — 경력 회사 블록 (callout) --------------------------------------------- */
.career-block{
  background:#fafafa;
  border:1px solid #e8e8e8;
  border-radius:8px;
  padding:1rem 1.2rem;
  margin-bottom:.8rem;
}
#cert .career-block{
  padding:.55rem 1rem;
}
#cert .career-header{
  margin-bottom:0;
}
.career-header{
  font-weight:600;
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
}
.career-header time{
  font-weight:400;
  font-size:.8rem;
  color:var(--muted);
  margin-left:auto;
  white-space:nowrap;
}
.career-header a{
  font-size:16px;
}
.career-projects{
  margin-top:.6rem;
}

/* — details / summary (경력 프로젝트) ----------------------------------- */
details{
  margin-bottom:.5rem;
  border-left:2.5px solid #d0d0d0;
  padding-left:.9rem;
  transition:border-color .2s;
}
details[open]{
  border-left-color:var(--link);
}
details summary{
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  padding:.45rem 0;
  list-style:none;
  display:flex;
  align-items:baseline;
  gap:.5rem;
}
details summary::-webkit-details-marker{display:none;}
details summary::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:rotate(-45deg);
  transition:transform .2s;
  flex-shrink:0;
  margin-top:2px;
}
details[open] summary::before{
  transform:rotate(45deg);
}
details summary time{
  font-weight:400;
  font-size:.8rem;
  color:var(--muted);
  margin-left:auto;
  white-space:nowrap;
}
details summary .role{
  font-weight:400;
  font-size:.7rem;
  color:var(--link);
  background:#eef4fb;
  border:1px solid #d0dfef;
  border-radius:999px;
  padding:.1rem .5rem;
  white-space:nowrap;
}
details p{
  color:#333;
  font-size:14px;
  padding:.25rem 0 .6rem;
}

/* — 프로젝트/활동 항목 -------------------------------------------------- */
.activity-item{
  margin-top:1rem;
  padding-top:.6rem;
}

/* 4. 카테고리 탭 (최소 디자인) ---------------------------------------- */
.category-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0;}
.category-btn{
  background:none;
  border:1px solid #d0d0d0;
  border-radius:4px;
  padding:.30rem .4rem;
  font-size:.8rem;
  cursor:pointer;
  transition:background .18s;
}
.category-btn.active,
.category-btn:hover{background:#f0f0f0;}

/* 5. 스택 리스트 ------------------------------------------------------- */
.stack-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;
  margin-top:.5rem;
}
.stack-list li{
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.8rem;
  color:var(--muted);
}
.stack-list img{width:20px;height:20px;}
.hidden{display:none;}

/* 6. 터미널 스타일 (스킬 상세) ------------------------------------------ */
.terminal{
  margin-top:1.5rem;
  border:1px solid #333;
  border-radius:6px;
  overflow:hidden;
  font-family:'JetBrains Mono','Fira Code','Consolas','Monaco','Courier New',monospace;
  font-size:.72rem;
  line-height:1.55;
}
.terminal-header{
  background:#2d2d2d;
  padding:.4rem .75rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  border-bottom:1px solid #333;
}
.terminal-dot{
  width:10px;
  height:10px;
  border-radius:50%;
}
.terminal-dot.red{background:#ff5f56;}
.terminal-dot.yellow{background:#ffbd2e;}
.terminal-dot.green{background:#27ca40;}
.terminal-title{
  color:#888;
  font-size:.7rem;
  margin-left:auto;
  margin-right:auto;
  letter-spacing:.5px;
}
.terminal-body{
  background:#1a1a1a;
  padding:1rem 1.2rem;
  color:#c8c8c8;
  min-height:80px;
}
.terminal-line{
  margin-bottom:.6rem;
  display:flex;
  align-items:center;
}
.prompt{
  color:#5af78e;
  margin-right:.4rem;
  user-select:none;
}
.command{
  color:#5af78e;
}
.terminal-output{
  list-style:none;
}
.terminal-output li{
  color:#c8c8c8;
  padding:.2rem 0;
  padding-left:.9rem;
  margin-bottom:.05rem;
  border-left:none;
  position:relative;
}
.terminal-output li::before{
  content:"›";
  color:#5af78e;
  position:absolute;
  left:0;
  font-weight:700;
}
.stack-item{
  cursor:pointer;
  transition:transform .15s, opacity .15s;
}
.stack-item:hover{
  transform:translateY(-2px);
  opacity:.8;
}
.stack-item.active{
  background:#f0f0f0;
  border-radius:4px;
  padding:2px 6px;
  margin:-2px -6px;
}

/* 7. 2단계 스킬 상세 토글 스타일 ---------------------------------------- */
.terminal-output li.skill-category::before{
  content:none;
}
.skill-category{
  cursor:pointer;
  padding:.3rem 0;
  padding-left:.9rem;
  margin-bottom:.15rem;
  list-style:none;
  border-radius:3px;
  position:relative;
}
.skill-category:hover{
  background:rgba(255,255,255,0.04);
}
.category-toggle{
  color:#5af78e;
  display:inline-block;
  width:.4rem;
  font-size:.75rem;
  transition:transform .15s;
}
.category-name{
  color:#69d2a0;
  font-weight:600;
  letter-spacing:.3px;
}
.skill-items{
  list-style:none;
  padding-left:1.8rem;
  margin-top:.2rem;
}
.skill-items.hidden{
  display:none;
}
.skill-item{
  color:#aaa;
  padding:.12rem 0;
  padding-left:.9rem;
  margin-bottom:.05rem;
  position:relative;
}
.skill-item::before{
  content:"─";
  color:#555;
  position:absolute;
  left:0;
  font-size:.7rem;
}