/* ============================================================
   InfraTree Design System v2 — components (it-*)
   design/handoff/InfraTree Dark v2/components/* 의 인라인 스타일 JSX를
   바닐라 CSS 클래스로 1:1 번역. 값은 전부 tokens.css의 --it-* 변수.
   상호작용 상태: :hover / :focus / .is-open / .is-active / .is-* 클래스.
   ============================================================ */

/* ── Nav ─────────────────────────────────── */
.it-nav {
  height: var(--it-nav-h);
  background: var(--it-panel);
  border-bottom: 1px solid var(--it-border);
  display: flex; align-items: center;
  padding: 0 var(--it-sp-5); gap: var(--it-sp-5);
  box-sizing: border-box;
}
.it-nav-brand { font-family: var(--it-mono); font-weight: 600; font-size: var(--it-fs-lg); color: var(--it-text); }
.it-nav-brand .it-accent { color: var(--it-accent); }
.it-nav-links { display: flex; gap: var(--it-sp-2); }
.it-nav-link {
  font-size: var(--it-fs-base); color: var(--it-text-2);
  padding: 6px 10px; border-radius: var(--it-radius-sm);
  transition: background 130ms ease, color 130ms ease;
}
.it-nav-link:hover { background: var(--it-panel-2); color: var(--it-text); }
.it-nav-link.is-active { color: var(--it-text); font-weight: 600; }
.it-nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--it-sp-3); }
.it-nav-search {
  background: var(--it-bg); border: 1px solid var(--it-border); border-radius: var(--it-radius-sm);
  color: var(--it-text); font-size: var(--it-fs-sm); font-family: var(--it-font); padding: 6px 10px; width: 160px;
}
.it-nav-avatar {
  width: 30px; height: 30px; border-radius: var(--it-radius-pill);
  background: var(--it-accent-dim); border: 1px solid var(--it-accent-line); color: var(--it-accent);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--it-fs-sm); font-weight: 600;
}

/* ── Card ────────────────────────────────── */
.it-card {
  background: var(--it-panel); border: 1px solid var(--it-border);
  border-radius: var(--it-radius); padding: var(--it-sp-5);
  transition: background 130ms ease, border-color 130ms ease;
}
.it-card.is-hoverable { cursor: pointer; }
.it-card.is-hoverable:hover { background: var(--it-panel-2); border-color: var(--it-border-2); }
.it-card.is-accent { border-color: var(--it-accent-line); }
.it-card.p-4 { padding: var(--it-sp-4); }
.it-card.p-0 { padding: 0; }
.it-card-title { font-size: var(--it-fs-lg); font-weight: 600; margin-bottom: 10px; }

/* ── Button ──────────────────────────────── */
.it-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; font-size: var(--it-fs-base); font-weight: 600; font-family: var(--it-font);
  border-radius: var(--it-radius-sm); border: 1px solid transparent; cursor: pointer; line-height: 1.4;
  transition: background 130ms ease, border-color 130ms ease;
}
.it-btn-primary { background: var(--it-accent); color: var(--it-on-accent); }
.it-btn-primary:hover:not(:disabled) { background: var(--it-accent-hover); }
.it-btn-ghost { background: transparent; color: var(--it-text); border-color: var(--it-border); }
.it-btn-ghost:hover:not(:disabled) { background: var(--it-panel-2); border-color: var(--it-border-2); }
.it-btn-sm { padding: 6px 12px; font-size: var(--it-fs-sm); }
.it-btn-full { width: 100%; }
.it-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Tag (category, 5색) ─────────────────── */
.it-tag {
  display: inline-block; font-size: var(--it-fs-xs); font-weight: 500;
  padding: 3px 10px; border-radius: var(--it-radius-pill); line-height: 1.5; white-space: nowrap;
}
.it-tag-k8s      { color: var(--it-cat-k8s);      background: var(--it-cat-k8s-dim); }
.it-tag-linux    { color: var(--it-cat-linux);    background: var(--it-cat-linux-dim); }
.it-tag-network  { color: var(--it-cat-network);  background: var(--it-cat-network-dim); }
.it-tag-security { color: var(--it-cat-security); background: var(--it-cat-security-dim); }
.it-tag-cicd     { color: var(--it-cat-cicd);     background: var(--it-cat-cicd-dim); }

/* ── LevelBadge ──────────────────────────── */
.it-lv {
  display: inline-block; font-family: var(--it-mono); font-size: var(--it-fs-xs); color: var(--it-text-2);
  border: 1px solid var(--it-border-2); border-radius: var(--it-radius-pill); padding: 2px 9px; line-height: 1.5; white-space: nowrap;
}

/* ── Status (점+텍스트) ──────────────────── */
.it-status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--it-fs-sm); color: var(--it-text); white-space: nowrap; }
.it-status-dot { width: 8px; height: 8px; border-radius: var(--it-radius-pill); flex-shrink: 0; background: var(--it-st-doing); }
.it-status-done   .it-status-dot { background: var(--it-st-done); }
.it-status-doing  .it-status-dot { background: var(--it-st-doing); }
.it-status-review .it-status-dot { background: var(--it-st-review); }
.it-status-danger .it-status-dot { background: var(--it-st-danger); }

/* ── Field (label + input/textarea) ──────── */
.it-field { display: block; }
.it-field-label { font-size: var(--it-fs-sm); font-weight: 600; color: var(--it-text); margin-bottom: 6px; }
.it-field-input, .it-field-textarea {
  width: 100%; box-sizing: border-box; background: var(--it-code-bg); color: var(--it-text);
  border: 1px solid var(--it-border); border-radius: var(--it-radius-sm); padding: 9px 12px;
  font-size: var(--it-fs-base); line-height: var(--it-lh); font-family: var(--it-font);
  transition: border-color 130ms ease;
}
.it-field-textarea { resize: vertical; }
.it-field-input:focus, .it-field-textarea:focus { border-color: var(--it-accent-line); outline: 2px solid var(--it-accent); outline-offset: 1px; }
.it-field-mono .it-field-input, .it-field-mono .it-field-textarea { font-family: var(--it-mono); }
.it-field-hint { font-size: var(--it-fs-sm); color: var(--it-muted); margin-top: 5px; }
.it-field.is-error .it-field-input, .it-field.is-error .it-field-textarea { border-color: var(--it-st-danger); }
.it-field.is-error .it-field-hint { color: var(--it-st-danger); }

/* ── Hint (accordion) ────────────────────── */
.it-hint { border: 1px solid var(--it-border); border-radius: var(--it-radius-sm); overflow: hidden; transition: border-color 130ms ease; }
.it-hint.is-open { border-color: var(--it-accent-line); }
.it-hint-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: var(--it-panel); border: none; padding: 10px 14px; cursor: pointer;
  color: var(--it-text); font-family: var(--it-font); font-size: var(--it-fs-base); transition: background 130ms ease;
}
.it-hint-toggle:hover { background: var(--it-panel-2); }
.it-hint-caret { font-family: var(--it-mono); font-size: var(--it-fs-sm); color: var(--it-text-2); }
.it-hint-caret::before { content: "\25B8"; }               /* ▸ */
.it-hint.is-open .it-hint-caret { color: var(--it-accent); }
.it-hint.is-open .it-hint-caret::before { content: "\25BE"; } /* ▾ */
.it-hint-title { font-weight: 600; }
.it-hint-note { margin-left: auto; font-size: var(--it-fs-xs); color: var(--it-muted); }
.it-hint.is-open .it-hint-note { display: none; }
.it-hint-used { font-size: var(--it-fs-xs); color: var(--it-muted); }
.it-hint.is-open .it-hint-used { display: none; }
.it-hint-body {
  padding: 4px 14px 12px; font-size: var(--it-fs-base); color: var(--it-text-body);
  line-height: var(--it-lh); background: var(--it-panel);
}
.it-hint:not(.is-open) .it-hint-body { display: none; }

/* ── CodeBlock ───────────────────────────── */
.it-code { background: var(--it-code-bg); border: 1px solid var(--it-border); border-radius: var(--it-radius-sm); overflow: hidden; }
.it-code-title { padding: 6px 12px; border-bottom: 1px solid var(--it-border); font-family: var(--it-mono); font-size: var(--it-fs-xs); color: var(--it-muted); }
.it-code pre { margin: 0; padding: 12px 14px; font-family: var(--it-mono); font-size: var(--it-fs-sm); line-height: 1.7; color: var(--it-text-body); overflow: auto; white-space: pre-wrap; word-break: break-all; }

/* ── Row (dense list) ────────────────────── */
.it-row {
  display: flex; align-items: center; gap: var(--it-sp-3);
  padding: 11px var(--it-sp-4); border-bottom: 1px solid var(--it-border);
  background: transparent; transition: background 130ms ease;
}
.it-row.is-clickable { cursor: pointer; }
.it-row.is-clickable:hover { background: var(--it-panel-2); }
.it-row-id { font-family: var(--it-mono); font-size: var(--it-fs-xs); color: var(--it-muted); width: 58px; flex-shrink: 0; }
.it-row-main { flex: 1; min-width: 0; }
/* 태그·레벨·시간은 줄지 않는다. flex 기본값(shrink:1)이면 상자만 좁아지고
   nowrap 텍스트가 밖으로 흘러 옆 칸과 겹쳐 보인다. */
.it-row > .it-tag,
.it-row > .it-lv,
.it-row > .it-row-time,
.it-row > .it-status { flex: none; }
.it-row-title { font-size: var(--it-fs-base); color: var(--it-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-row-preview { font-size: var(--it-fs-sm); color: var(--it-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.it-row-time { font-family: var(--it-mono); font-size: var(--it-fs-xs); color: var(--it-muted); white-space: nowrap; }
.it-row-bookmark { background: transparent; border: none; cursor: pointer; color: var(--it-muted); font-size: 14px; padding: 4px; line-height: 1; }
.it-row-bookmark.is-on { color: var(--it-accent); }
/* 좁은 화면에서는 제목이 설 자리가 없어 코드·시간부터 접는다 */
@media (max-width: 640px) {
  .it-row > .it-row-time { display: none; }
}
@media (max-width: 480px) {
  .it-row { gap: var(--it-sp-2); }
  .it-row > .it-row-id, .it-row > .it-lv { display: none; }
}

/* ── Tabs ────────────────────────────────── */
.it-tabs { display: flex; gap: var(--it-sp-1); border-bottom: 1px solid var(--it-border); }
.it-tab {
  background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 9px 12px; cursor: pointer; font-family: var(--it-font); font-size: var(--it-fs-base);
  font-weight: 400; color: var(--it-text-2); transition: color 130ms ease;
  display: flex; align-items: center; gap: 6px;
}
.it-tab:hover { color: var(--it-text); }
.it-tab.is-active { border-bottom-color: var(--it-accent); color: var(--it-text); font-weight: 600; }
.it-tab-count { font-family: var(--it-mono); font-size: var(--it-fs-xs); color: var(--it-muted); }

/* ── Pager ───────────────────────────────── */
.it-pager { display: flex; gap: var(--it-sp-2); align-items: center; justify-content: center; }
.it-page-btn {
  min-width: 32px; height: 32px; padding: 0 8px; background: transparent; color: var(--it-text-2);
  border: 1px solid var(--it-border); border-radius: var(--it-radius-sm);
  font-family: var(--it-mono); font-size: var(--it-fs-sm); cursor: pointer; transition: background 130ms ease;
}
.it-page-btn:hover:not(:disabled):not(.is-active) { background: var(--it-panel-2); }
.it-page-btn.is-active { background: var(--it-accent-dim); color: var(--it-accent); border-color: var(--it-accent-line); }
.it-page-btn:disabled { color: var(--it-muted); cursor: default; }

/* ── Layout helpers ──────────────────────── */
.it-container { max-width: var(--it-container); margin: 0 auto; padding: var(--it-sp-6) var(--it-sp-5); }
.it-content-max { max-width: var(--it-content-max); }
.it-h1 { margin: 0; font-size: var(--it-fs-xl); font-weight: 600; }
.it-meta-mono { font-family: var(--it-mono); font-size: var(--it-fs-xs); color: var(--it-muted); }
.it-body { font-size: var(--it-fs-md); line-height: var(--it-lh-body); color: var(--it-text-body); }

/* ── 언어 전환 ─────────────────────────── */
.it-lang { display: inline-flex; align-items: center; gap: 2px; margin-right: var(--it-sp-3); }
.it-lang-opt {
  font-size: var(--it-fs-xs); color: var(--it-muted); text-decoration: none;
  padding: 3px 8px; border-radius: var(--it-radius-pill); line-height: 1.5;
}
.it-lang-opt:hover { color: var(--it-text); }
.it-lang-opt.is-active { color: var(--it-text); background: var(--it-panel-2); }

/* ── Footer ──────────────────────────────── */
/* 광고를 싣는 화면은 정책 페이지 링크가 보여야 한다 (AdSense 심사 기준). */
.it-foot { max-width: var(--it-container); margin: 0 auto; padding: var(--it-sp-6) var(--it-sp-5) var(--it-sp-7); border-top: 1px solid var(--it-border); }
.it-foot p { margin: 0; color: var(--it-muted); font-size: var(--it-fs-sm); line-height: var(--it-lh); }
.it-foot-links { display: flex; flex-wrap: wrap; gap: var(--it-sp-3) var(--it-sp-4); margin-top: 12px; }
.it-foot-links a { color: var(--it-text-2); font-size: var(--it-fs-sm); text-decoration: none; }
.it-foot-links a:hover { color: var(--it-accent-hover); text-decoration: underline; }

/* ── Toast (ui.js) ───────────────────────── */
.it-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 8px);
  background: var(--it-panel-2); border: 1px solid var(--it-border-2); color: var(--it-text);
  font-size: var(--it-fs-sm); padding: 10px 16px; border-radius: var(--it-radius-sm);
  opacity: 0; transition: opacity 180ms ease, transform 180ms ease; z-index: 9999;
}
.it-toast.is-in { opacity: 1; transform: translate(-50%, 0); }