/* ============================================================================
   pro-max.css — ui-ux-pro-max 향상 레이어. style.css(+encyclopedia.css) 다음에
   로드되어 토큰 오버라이드 / 마이크로 인터랙션 / 다크모드를 더한다.
   방향: Data-Dense + Swiss. 코발트(#2F6BFF)는 인터랙티브 전용. 다크는 탈채도 슬레이트.
   ========================================================================== */

/* ---- 다크 테마(쿨 슬레이트, 탈채도; FOUC 스크립트가 data-theme를 칠한다) ---- */
html[data-theme="dark"]{
  --bg:#0D1117;
  --canvas:#0A0E14;
  --band:#161C24;
  --ink:#E8ECF3;          /* on bg ~15:1 */
  --slate:#B7C0CD;        /* ~9:1 */
  --mute:#9AA4B2;         /* ~6:1 */
  --faint:#6E7886;        /* 장식 전용 */
  --line:#222B36;
  --line-strong:#323D4A;
  --accent:#5B8DEF;       /* 다크용으로 밝힌 코발트 */
  --accent-press:#83A8F6;
  --accent-tint:rgba(91,141,239,.16);
  --shadow-card:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.5);
  color-scheme:dark;
}
html[data-theme="light"]{ color-scheme:light; }

/* 콘텐츠 최대폭 확대(1180→1280): 풀블리드 히어로와 본문의 좌우 간격을 줄여 정렬감↑.
   헤더·히어로 내용·본문이 같은 1280폭으로 맞춰진다(히어로 배경은 그대로 풀블리드). */
:root{ --maxw:1280px; --cat-w:212px }   /* --cat-w: 데스크톱 분야 사이드바 폭(그리드·히어로 정렬 공유) */

/* 테마 전환은 즉시·균일하게(요소별 제각각 전환의 깜박임/불균형 방지). */

/* ---- 모바일: 가로 오버플로 차단(줌아웃·비율깨짐 방지) + 헤더 정리 ---------- */
body{ overflow-x:clip }                 /* 어떤 요소도 가로 스크롤/줌아웃을 유발하지 못하게(세로 스크롤·sticky는 유지) */
@media (max-width:640px){
  .header-cta{ display:none }           /* 좁은 화면 헤더 혼잡 방지 — 분야 탐색은 본문 칩으로 가능 */
}

/* ---- 헤더 액션 + 테마 토글 ------------------------------------------------- */
.header-actions{ display:inline-flex; align-items:center; gap:var(--s3) }
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:var(--r-chip);
  background:var(--bg); color:var(--mute); cursor:pointer;
  transition:color .12s ease, border-color .12s ease, background-color .12s ease;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--line-strong) }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.theme-toggle svg{ width:18px; height:18px; display:block }
.theme-toggle .i-sun{ display:none }
html[data-theme="dark"] .theme-toggle .i-sun{ display:block }
html[data-theme="dark"] .theme-toggle .i-moon{ display:none }

/* ---- 행 마이크로 인터랙션(코발트 좌측 틱 + 부드러운 전환) ----------------- */
.row{ transition:background-color .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease }
.row:hover{ background:var(--accent-tint); box-shadow:inset 3px 0 0 var(--accent) }
.row:hover .row-name{ color:var(--accent) }
.row:active{ background:var(--accent-tint) }

/* 숫자/메타 tabular 고정(레이아웃 흔들림 방지) */
.row-price,.row-checked,.group-count,.result-count,.filter-chip .c,
.tool-meta .price,.tool-meta .row-checked{ font-variant-numeric:tabular-nums }

/* ---- 카드/상세 인터랙션 폴리시 ------------------------------------------- */
.pair{ transition:border-color .14s ease, background-color .14s ease }
.pair:hover{ border-color:var(--accent); background:var(--accent-tint) }
.visit{ transition:background-color .14s ease, transform .12s ease }
.visit:hover{ transform:translateY(-1px) }
.visit svg{ width:15px; height:15px; vertical-align:-2px }

/* ---- 검색 필드(아이콘 + 클리어 + 단축키 힌트) ---------------------------- */
.search-field{ position:relative; display:block }
.search-field .s-icon{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--faint); pointer-events:none;
}
.search-field .search-input{ padding-left:40px; padding-right:40px }
.search-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  display:none; align-items:center; justify-content:center;
  width:28px; height:28px; border:0; border-radius:var(--r-chip);
  background:transparent; color:var(--mute); cursor:pointer;
}
.search-clear:hover{ color:var(--ink); background:var(--band) }
.search-clear:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
.search-clear svg{ width:15px; height:15px; display:block }
.search-field.has-value .search-clear{ display:inline-flex }
.search-hint{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:11px; line-height:1; color:var(--faint);
  border:1px solid var(--line); border-radius:5px; padding:3px 6px; pointer-events:none;
}
.search-field.has-value .search-hint,
.search-field:focus-within .search-hint{ display:none }
@media (max-width:560px){ .search-hint{ display:none } }

/* ---- 칩 활성 강조 + 빈 상태 -------------------------------------------- */
.filter-chip{ transition:border-color .12s ease, color .12s ease, background-color .12s ease }
.filter-chip.is-on{ color:var(--accent); font-weight:600 }
.no-results{ color:var(--slate) }
.no-results strong{ color:var(--ink) }

/* ---- 행/상세 라벨 글씨체(한글은 mono 대신 sans) --------------------------- */
/* style.css의 .row-idx/.row-cat/.tool-idx는 mono(라틴)라 한글이 폴백으로 어색 → sans */
.row-idx{ font-family:var(--sans); letter-spacing:0; font-weight:500 }
.row-cat{ font-family:var(--sans); letter-spacing:0 }
.tool-idx{ font-family:var(--sans); letter-spacing:0 }

/* ---- 분야 탐색: 데스크톱 사이드바 / 모바일 가로 칩 ------------------------ */
.cat-nav-title{
  font-family:var(--sans); font-size:var(--t-meta); font-weight:700;
  color:var(--mute);
  margin:0 0 var(--s2); display:none;
}
.cat-nav-inner{ display:flex; flex-wrap:wrap; gap:var(--s2) }
@media (min-width:1024px){
  .filter-bar{ position:static }                /* 데스크톱은 사이드바가 sticky 내비 */
  .enc-layout{ display:grid; grid-template-columns:var(--cat-w) minmax(0,1fr); gap:var(--s6); align-items:start }
  /* 히어로 글머리를 본문 콘텐츠 칼럼과 좌측 정렬(사이드바 폭+간격만큼 들여쓰기) */
  .enc-hero-band .enc-hero-inner{ padding-inline:calc(var(--gutter) + var(--cat-w) + var(--s6)) var(--gutter) }
  .cat-nav{ position:sticky; top:72px }          /* 헤더(56) 바로 아래 항상 노출 */
  .cat-nav-title{ display:block }
  .cat-nav-inner{ flex-direction:column; flex-wrap:nowrap; gap:2px }
  .cat-nav .filter-chip{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    border:0; border-left:3px solid transparent; border-radius:8px;
    background:transparent; padding:8px 12px; text-align:left;
    color:var(--slate); font-size:var(--t-body-sm); font-weight:500;
  }
  .cat-nav .filter-chip:hover{ background:var(--band); color:var(--ink) }
  .cat-nav .filter-chip.is-on{ background:var(--accent-tint); border-left-color:var(--accent); color:var(--accent) }
  .cat-nav .filter-chip .c{ margin-left:auto; color:var(--mute) }
  .cat-nav .filter-chip.is-on .c{ color:var(--accent) }
}

/* ---- AI 필요 파인더(히어로) -------------------------------------------- */
.ai-finder{ margin:var(--s5) 0 0; max-width:640px }
.ai-finder-row{
  display:flex; align-items:center; gap:var(--s2);
  background:var(--bg); border:1px solid var(--line-strong); border-radius:14px;
  padding:5px 5px 5px 14px; box-shadow:var(--shadow-card);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.ai-finder-row:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint) }
.ai-finder-spark{ width:20px; height:20px; color:var(--accent); flex:0 0 auto }
.ai-finder-input{
  flex:1 1 auto; min-width:0; border:0; background:transparent;
  font-family:var(--sans); font-size:var(--t-body); color:var(--ink); padding:11px 4px; outline:none;
}
.ai-finder-input::placeholder{ color:var(--faint) }
.ai-finder-btn{
  flex:0 0 auto; border:0; cursor:pointer; white-space:nowrap;
  font-family:var(--sans); font-size:var(--t-meta); font-weight:700; color:#fff;
  background:var(--accent); border-radius:10px; padding:11px 18px;
  transition:background-color .14s ease;
}
.ai-finder-btn:hover{ background:var(--accent-press) }
.ai-finder-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.ai-finder-btn[disabled]{ opacity:.55; cursor:default }
.ai-finder-hint{ margin:var(--s2) 0 0; font-size:var(--t-meta); color:var(--faint) }

/* ---- AI 추천 결과 ------------------------------------------------------- */
.ai-results{ margin:var(--s5) 0 0 }
.ai-results-head{
  display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap;
  margin:0 0 var(--s3); font-size:var(--t-meta); color:var(--mute);
}
.ai-results-head strong{ color:var(--ink); font-weight:700; font-size:var(--t-body) }
.ai-cards{ display:grid; gap:var(--s2) }
.ai-card{
  display:block; text-decoration:none;
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px;
  background:var(--bg); padding:12px 14px;
  transition:border-color .14s ease, background-color .14s ease, transform .12s ease;
}
.ai-card:hover{ background:var(--accent-tint); transform:translateY(-1px) }
.ai-card-top{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap }
.ai-card-name{ font-family:var(--sans); font-weight:700; color:var(--ink); font-size:var(--t-body) }
.ai-card-cat{
  font-family:var(--sans); font-size:11px; color:var(--mute);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:1px 8px;
}
.ai-card-reason{ margin:6px 0 0; font-size:var(--t-meta); line-height:1.5; color:var(--slate) }
.ai-results-note{ margin:var(--s2) 0 0; font-size:11px; color:var(--faint) }
.ai-empty{ font-size:var(--t-meta); line-height:1.6; color:var(--slate); padding:var(--s2) 0 }

/* 로딩(스켈레톤) */
.ai-loading{ display:grid; gap:var(--s2) }
.ai-skel{
  height:64px; border-radius:10px; border:1px solid var(--line);
  background:linear-gradient(90deg, var(--band), var(--canvas), var(--band));
  background-size:200% 100%; animation:ai-shimmer 1.1s linear infinite;
}
@keyframes ai-shimmer{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }
@media (min-width:720px){ .ai-cards{ grid-template-columns:1fr 1fr } }

/* ---- 풀-블리드 히어로 밴드(양옆 꽉 차게 + 더 크게) ---------------------- */
.enc-hero-band{
  background:
    radial-gradient(115% 130% at 100% -10%, var(--accent-tint), transparent 52%),
    linear-gradient(180deg, var(--band), var(--bg));
  border-bottom:1px solid var(--line);
  padding-block:clamp(52px, 8vw, 112px) clamp(36px, 5vw, 68px);
}
.enc-hero-inner{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter) }
.enc-hero-band .enc-hero{ padding-block:0 }                   /* 세로 패딩만 리셋(밴드가 담당). 가로(gutter/정렬)는 .enc-hero-inner가 담당 */
.enc-hero-band .enc-hero h1{
  font-size:clamp(2.3rem, 5.6vw, 3.7rem); line-height:1.08;
  letter-spacing:-.03em; max-width:22ch;
}
.enc-hero-band .enc-hero-kicker{ margin-bottom:var(--s4) }
.enc-hero-band .enc-hero-lede{ font-size:clamp(1.04rem, 1.5vw, 1.22rem); max-width:60ch }
.enc-hero-band .ai-finder{ max-width:680px }

/* ---- 패싯 필터(가격·대상) — 정제된 토글 칩 ------------------------------ */
.facets{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s5);
  padding-top:var(--s3); border-top:1px solid var(--line);
}
.facet{ display:inline-flex; align-items:center; gap:var(--s2) }
.facet-label{
  font-family:var(--sans); font-size:var(--t-meta); font-weight:600;
  color:var(--mute);
}
.facet-chip{
  display:inline-flex; align-items:center; gap:0;
  font-family:var(--sans); font-size:var(--t-meta); font-weight:500;
  color:var(--slate); background:var(--bg);
  border:1px solid var(--line-strong); border-radius:999px;
  padding:7px 14px; cursor:pointer; white-space:nowrap;
  transition:color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.facet-chip:hover{ color:var(--ink); background:var(--band); border-color:var(--mute) }
.facet-chip:active{ transform:scale(.96) }
.facet-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.facet-chip.is-on{
  color:#fff; background:var(--accent); border-color:var(--accent); font-weight:600;
  box-shadow:0 2px 8px var(--accent-tint), 0 1px 2px var(--accent-tint);
}
.facet-chip .fck{
  display:inline-flex; align-items:center; width:0; margin-right:0; opacity:0; overflow:hidden;
  transition:width .16s ease, margin-right .16s ease, opacity .16s ease;
}
.facet-chip.is-on .fck{ width:14px; margin-right:6px; opacity:1 }
.facet-chip .fck svg{ width:14px; height:14px; display:block; flex:0 0 auto }
.facet-reset{
  display:inline-flex; align-items:center;
  font-family:var(--sans); font-size:var(--t-meta); font-weight:500; color:var(--mute);
  background:transparent; border:0; cursor:pointer; padding:6px 11px; border-radius:999px;
  transition:color .12s ease, background-color .12s ease;
}
.facet-reset:hover{ color:var(--accent); background:var(--accent-tint) }
@media (prefers-reduced-motion:reduce){ .facet-chip, .facet-chip .fck{ transition:none } }

/* ---- 모션 절제 존중 ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .row, .pair, .visit{ transition:none }
  .visit:hover{ transform:none }
  .ai-card:hover{ transform:none }
  .ai-skel{ animation:none }
}