:root {
  --bg:#0b1020;
  --panel:#121935;
  --muted:#8aa0c6;
  --text:#e9eefb;
  --accent:#6aa6ff;
  --error:#ff6a8a;
}

* { box-sizing: border-box; }



body {
  margin:0;
  background:linear-gradient(180deg,#0b1020,#0b1020 200px,#0d1430 100%);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}





/* 기본 다크 모드 */
/*body {
   background-color: #1e1e1e;
   color: #f1f1f1;
}*/

/* 라이트 모드 */
body.dark-mode {
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.3s ease, color 0.3s ease;
 
}

/* 버튼 스타일 */
#toggleTheme {
  padding: 10px 20px;
  margin: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background-color: #0078ff;
  color: white;
  transition: background-color 0.3s ease;
}

#toggleTheme:hover {
  background-color: #005fcc;
}







a { color:var(--accent); text-decoration:none; }

header {
  padding:24px;
  border-bottom:1px solid #202a52;
  position:sticky;
  top:0;
  background:#0b1020a6;
  backdrop-filter: blur(6px);
  z-index:10;
}

.wrap { max-width:1200px; margin:0 auto; padding:24px; }
.grid { display:grid; grid-template-columns: 1.1fr 1.4fr; gap:24px; }
@media (max-width: 1024px){ .grid{ grid-template-columns: 1fr; } }

.card {
  background:var(--panel);
  border:1px solid #1e2954;
  border-radius:16px;
  padding:20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.card h3 { margin:0 0 12px; font-size:18px; }
.hint { color:var(--muted); font-size:13px; }
label { display:block; margin:14px 0 6px; font-weight:600; }

select, input[type="text"], textarea {
  width:100%;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #273569;
  background:#0f1838;
  color:var(--text);
  outline:none;
  font-size:14px;
}

/* 이력입력 영역만 스크롤 */
.experiences-wrapper {
  max-height: 150px;
  overflow-y: auto;
  border:1px solid #273569;
  border-radius: 12px;
  background:#0f1838;
  padding:4px;
}
textarea {
  min-height:80px;
  max-height:140px;
  font-size:13px;
  line-height:1.4;
  resize:none;
}

/* 선택 박스 flex-wrap */
.checkbox-grid {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.checkbox-grid label {
  display:flex;
  align-items:center;
  gap:6px;
  background:#0f1838;
  border:1px solid #273569;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
}

.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #27407c;
  background:#15265a;
  color:var(--text);
  cursor:pointer;
  font-weight:600;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn.primary { background: linear-gradient(180deg,#2f6bff,#2456cc); border-color:#27407c; }
.btn.ghost { background:transparent; border-color:#2a3a72; }

.toolbar { display:flex; gap:10px; flex-wrap: wrap; }
.loading { color:#9fb6ff; }

.skeleton {
  border-radius:10px;
  background: linear-gradient(90deg,#17234c, #1f2f63, #17234c);
  background-size:200% 100%;
  animation: shine 1.2s linear infinite;
  height:14px;
}
@keyframes shine { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.result-sec { margin-top:14px; }
.q { border:1px solid #273569; border-radius:12px; padding:12px 14px; background:#0f1838; margin-bottom:8px; }
details.q summary { cursor:pointer; list-style:none; font-weight:600; }

.badge { display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid #2a3a72; background:#0f1838; font-size:12px; color:#a9b9e8; }
.error { border:1px solid #5f1a2a; background:#22121c; color:#ffc3cf; padding:12px; border-radius:12px; }
.muted { color:var(--muted); }

.kvs { display:grid; gap:8px; }
.kvs .item { display:flex; gap:8px; }
.kvs .k { width:110px; color:#a9b9e8; }
.divider { height:1px; background:#223066; margin:16px 0; }

.right-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pill { font-size:12px; color:#b7c6ee; }
.counter { font-size:12px; color:#9fb6ff; text-align:right; }
.footnote { margin-top:8px; font-size:12px; color:#8aa0c6; }

/* 보유기술 영역만 스크롤 + 극한 압축 */
.skills-wrapper {
  max-height: 140px;       /* 영역 높이 */
  overflow-y: auto;
  border: 1px solid #273569;
  border-radius: 8px;
  background: #0f1838;
  padding: 2px;            /* 내부 여백 최소화 */
}

/* 체크박스 그리드 - 초압축 */
.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px; /* 세로 간격 0px, 가로 간격 4px */
  align-items: flex-start;     /* 줄 높이를 라벨에 맞춤 */
  margin: 0;
  padding: 0;
}

.skills-grid label {
  display: inline-flex;   /* 줄 높이 최소화 */
  align-items: center;
  gap: 2px;                    /* 체크박스와 텍스트 간격 */
  background: #0f1838;
  border: 1px solid #273569;
  padding: 1px 4px;         /* 패딩 거의 제거 */
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;          /* 글씨 작게 */
  line-height: 1;              /* 줄 높이 최소화 */
  height: auto;                /* 자동 높이 */
  margin: 0;
}

.preserve-whitespace {
  white-space: pre-wrap;   /* 줄바꿈과 공백 유지 */
  word-break: break-word;  /* 너무 긴 단어도 줄 바꿈 */
}