/* style.css (FULL REPLACE)
   archi-law-cl-03 dark UI
   요청 반영(요청한 것만):
   1) 모든 select 드롭다운(시도/시군구/용도/토픽) 회색 UI → 다크(검정) 톤 강제
   2) 결과창 스크롤바(오른쪽)도 다크 톤으로
   3) 저장소 검색 + 지우기 버튼 한 줄 정렬
   4) 결과 상단 배지들은 좌측에 몰고, "검색어 복사"만 우측 끝으로
   5) 결과 생성 버튼 폭 = 토픽 select 폭(=100%) 유지
   6) 전체화면에서 결과창만 스크롤 유지
*/

:root{
    --bg:#05070c;           /* 전체 배경 */
    --card:#0b1020;
    --card2:#0a0f1d;
    --text:#e9eefc;
    --muted:#a7b0c7;
    --line:rgba(255,255,255,.10);
  
    --btn:#2b6cff;
    --btnHover:#3b7cff;
    --danger:#ef4444;
  
    --pill:#0f1a33;
    --pill2:#101a2f;
  
    --radius:18px;
    --shadow: 0 18px 50px rgba(0,0,0,.55);
  
    /* ✅ 스크롤바 다크톤 */
    --sb-track: rgba(255,255,255,.06);
    --sb-thumb: rgba(255,255,255,.18);
    --sb-thumb-hover: rgba(255,255,255,.26);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  
  /* ✅ 브라우저 기본 폼/스크롤 컬러스킴을 다크로 우선 */
  html{
    color-scheme: dark;
  }
  
  body{
    margin:0;
    background: radial-gradient(1200px 600px at 30% 0%, rgba(43,108,255,.10), transparent 50%),
                radial-gradient(1000px 600px at 80% 10%, rgba(0,255,170,.06), transparent 55%),
                var(--bg);
    color:var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", Segoe UI, Roboto, Arial, sans-serif;
  
    /* ✅ 페이지 전체 스크롤 금지 -> 결과창만 스크롤 */
    overflow:hidden;
  }
  
  /* ============= Topbar ============= */
  
  .topbar{
    height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 14px 18px;
    border-bottom:1px solid var(--line);
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
  }
  
  .brand{display:flex; align-items:center; gap:12px;}
  .logo{
    width:42px;height:42px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background: linear-gradient(135deg, rgba(43,108,255,.85), rgba(0,255,170,.55));
    color:#fff;
    font-weight:800;
  }
  .brandText .name{font-weight:800; letter-spacing:.2px;}
  
  /* ============= Layout ============= */
  
  .layout{
    height: calc(100vh - 68px);
    display:grid;
    grid-template-columns: 420px 1fr;
    gap: 16px;
    padding: 16px 18px;
  }
  
  /* 왼쪽은 스크롤 없이 고정 */
  .leftColumn{
    height:100%;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  
  /* 오른쪽(결과)만 스크롤 */
  .rightColumn{
    height:100%;
    overflow:hidden;
  }
  
  /* ============= Card / Panel ============= */
  
  .card{
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:16px;
  }
  
  .card.compact{padding:16px}
  
  .card h2{
    margin:0 0 14px;
    font-size:18px;
  }
  
  .bigResult{
    /* ✅ 결과 카드 자체를 스크롤 컨테이너로 */
    height:100%;
    overflow:auto;
    padding-bottom: 22px;
  
    /* ✅ 스크롤바(파이어폭스) */
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
  }
  
  /* ✅ 결과창 스크롤바(크롬/엣지) */
  .bigResult::-webkit-scrollbar{
    width: 10px;
  }
  .bigResult::-webkit-scrollbar-track{
    background: var(--sb-track);
    border-radius: 999px;
  }
  .bigResult::-webkit-scrollbar-thumb{
    background: var(--sb-thumb);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,.35);
  }
  .bigResult::-webkit-scrollbar-thumb:hover{
    background: var(--sb-thumb-hover);
  }
  
  /* (옵션) 좌측 저장소 리스트가 내부에서 스크롤 생기면 톤 맞춤 */
  .leftColumn *{
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) transparent;
  }
  .leftColumn *::-webkit-scrollbar{
    width: 10px;
  }
  .leftColumn *::-webkit-scrollbar-track{
    background: transparent;
  }
  .leftColumn *::-webkit-scrollbar-thumb{
    background: var(--sb-thumb);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,.35);
  }
  
  /* 패널 */
  .panel{
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    border:1px solid var(--line);
    background: rgba(0,0,0,.22);
  }
  
  .panel h3{
    margin:0 0 12px;
    font-size:15px;
    color: rgba(233,238,252,.95);
  }
  
  /* ============= Form ============= */
  
  .row{margin-top: 12px;}
  .row3{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }
  
  .fieldLabel{
    font-size:12px;
    color: rgba(233,238,252,.85);
    margin-bottom: 8px;
  }
  
  /* ✅ select / input 다크 강제 */
  .select, .input{
    width:100%;
    padding: 12px 12px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.28);
    color: var(--text);
    outline:none;
  
    /* ✅ 기본 위젯(드롭다운 포함) 다크 우선 */
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
  }
  
  .select:focus, .input:focus{
    border-color: rgba(43,108,255,.55);
    box-shadow: 0 0 0 4px rgba(43,108,255,.20);
  }
  
  /* ✅ 드롭다운 옵션 리스트(가능한 범위 내) 다크 */
  select option{
    background-color: #070b14;
    color: var(--text);
  }
  
  /* 버튼 줄 */
  .row.split{
    display:flex;
    gap:10px;
    margin-top: 14px;
    align-items: stretch;
  }
  
  /* ✅ 결과 생성 버튼 폭 100% 유지 */
  #btnBuild{
    width:100%;
  }
  
  /* 토글 */
  .row.toggles{
    margin-top: 12px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    color: rgba(233,238,252,.85);
    font-size:13px;
  }
  .row.toggles input{transform: translateY(1px);}
  
  /* ✅ 저장소 검색 + 지우기 버튼 "한 줄" 고정 */
  .card .row.split .input{
    flex: 1 1 auto;
    min-width: 0;
  }
  .card .row.split .btn{
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: 72px;
  }
  
  /* ============= Buttons ============= */
  
  .btn{
    padding: 10px 14px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: var(--text);
    cursor:pointer;
    font-weight:700;
  }
  .btn:hover{background: rgba(255,255,255,.09);}
  
  .btn.primary{
    background: rgba(43,108,255,.22);
    border-color: rgba(43,108,255,.35);
  }
  .btn.primary:hover{
    background: rgba(43,108,255,.30);
    border-color: rgba(43,108,255,.45);
  }
  
  .btn.ghost{
    background: transparent;
  }
  
  .btn.danger{
    background: rgba(239,68,68,.16);
    border-color: rgba(239,68,68,.30);
  }
  .btn.danger:hover{
    background: rgba(239,68,68,.22);
    border-color: rgba(239,68,68,.40);
  }
  
  /* ============= Context Bar / Badges ============= */
  
  /* ✅ 배지들은 좌측에 몰고, 복사 버튼만 우측으로 */
  .ctxBar{
    display:flex;
    align-items:center;
    justify-content:flex-start; /* ✅ 좌측 정렬 */
    gap:10px;
    padding: 10px 10px;
    border-radius: 16px;
    border:1px solid var(--line);
    background: rgba(0,0,0,.22);
  }
  
  /* ✅ "검색어 복사" 버튼을 우측 끝으로 밀기 */
  #btnCopyQuery{
    margin-left:auto;
    white-space: nowrap;
  }
  
  .badge{
    display:inline-flex;
    align-items:center;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    font-size:12px;
    color: rgba(233,238,252,.92);
    margin-right:0; /* 기존 6px 제거(정렬 깨짐 방지) */
  }
  .badge.soft{background: rgba(43,108,255,.12); border-color: rgba(43,108,255,.18);}
  
  /* ============= Items ============= */
  
  .list{display:flex; flex-direction:column; gap:12px;}
  
  .item{
    padding: 14px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
  }
  .itemTitle{
    font-weight:800;
    letter-spacing:.1px;
  }
  .hint{
    color: rgba(167,176,199,.90);
    font-size:12px;
  }
  
  .itemMeta{
    margin-top:10px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  
  .metaPill{
    display:inline-flex;
    align-items:center;
    padding: 6px 10px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    font-size:12px;
    color: rgba(233,238,252,.92);
  }
  .metaPill.good{background: rgba(0,255,170,.10); border-color: rgba(0,255,170,.18);}
  .metaPill.warn{background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.20);}
  
  .itemActions{
    margin-top: 12px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  
  /* ============= Library ============= */
  
  .stats{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
  }
  .stat{
    padding: 12px;
    border-radius: 16px;
    border:1px solid var(--line);
    background: rgba(0,0,0,.22);
  }
  .stat .k{color: rgba(167,176,199,.90); font-size:12px;}
  .stat .v{font-size:22px; font-weight:900; margin-top: 6px;}
  
  .libList{margin-top: 12px; display:flex; flex-direction:column; gap:12px;}
  .libItem{
    padding: 14px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
  }
  .libItem .title{font-weight:900;}
  .libItem .sub{margin-top:6px; color: rgba(167,176,199,.92); font-size:12px;}
  .libItem .tags{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px;}
  .libItem .top{display:flex; gap:10px; justify-content:space-between; align-items:flex-start;}
  
  /* ============= Responsive ============= */
  
  @media (max-width: 1100px){
    body{overflow:auto;} /* 작은 화면에서는 전체 스크롤 허용 */
    .layout{
      height:auto;
      grid-template-columns: 1fr;
    }
    .leftColumn, .rightColumn{overflow: visible;}
    .bigResult{height:auto; overflow:visible;}
  }