:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --line:#e8eaf2;
  --text:#1f2a37;
  --muted:#6b7280;
  --accent:#ff6a00;
  --ok:#22c55e;
  --bad:#ef4444;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, Arial, "Apple SD Gothic Neo", "Malgun Gothic";
  background:var(--bg);
  color:var(--text);
}

.app{
  height:100%;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:12px 14px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}

.brand-row{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-logo{
  width:42px;
  height:42px;
  object-fit:contain;
  flex:0 0 auto;
}

.brand-title{
  font-size:20px;
  font-weight:900;
  color:var(--text);
  letter-spacing:-0.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* Logo-like feel without external fonts */
  font-family: "Segoe UI Black", "Arial Black", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, Arial;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.nav-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.tabs{ display:flex; gap:10px; }

.tab{
  border:1px solid var(--line);
  background:#fff;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  color:var(--muted);
  font-weight:600;
}
.tab.active{
  border-color:rgba(255,106,0,.4);
  color:var(--accent);
}

.searchbar{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px 10px;
  max-width:520px;
}
.searchbar input{
  flex:1;
  border:none;
  outline:none;
  font-size:14px;
}

.controls{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
}

.select-wrap select{
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

.icon-btn{
  border:1px solid var(--line);
  background:#fff;
  padding:7px 10px;
  border-radius:10px;
  cursor:pointer;
}
.icon-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.content{
  display:flex;
  gap:10px;
  padding:10px 10px 0 10px;
  flex:1;
  min-height:0;
}

/* ===== Footer (사업자정보) ===== */
.site-footer{
  /* Not fixed: appears only when scrolling to bottom */
  margin-top:10px;
  background:var(--panel);
  border-top:1px solid var(--line);
  padding:8px 10px 10px;
}
.footer-inner{
  max-width:1240px;
  margin:0 auto;
}
.footer-title{
  font-weight:900;
  font-size:12px;
  margin-bottom:6px;
}
.footer-grid{
  /* Compact layout: 8 fields fit into 2 rows on desktop */
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:4px 10px;
}
.footer-item{
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.footer-label{
  color:var(--muted);
  font-size:12px;
  min-width:72px;
  flex:0 0 auto;
}
.footer-value{
  font-size:12px;
  font-weight:700;
  color:var(--text);
  word-break:break-word;
}
.footer-links a{
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
}
.footer-links a:hover{
  text-decoration:underline;
}
.footer-bottom{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:11px;
}
.footer-note{ color:var(--muted); }

@media (max-width: 1100px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-label{ min-width:92px; }
}

.left{
  flex:1;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.right{
  width:320px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.side-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.side-tabs{ display:flex; gap:10px; }
.side-tab{
  border:none;
  background:none;
  cursor:pointer;
  font-weight:800;
  color:var(--muted);
}
.side-tab.active{ color:var(--accent); }

.side-body{
  padding:12px;
  overflow:auto;
}

.kv{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:8px 0;
}
.kv .k{ color:var(--muted); font-size:13px;}
.kv .v{ font-weight:700; font-size:14px; text-align:right;}
.panel-title{
  font-weight:900;
  margin-top:8px;
}
.muted{ color:var(--muted); font-size:13px; line-height:1.4; }

hr{
  border:none;
  border-top:1px solid var(--line);
  margin:10px 0;
}

/*
  Main views need to fill the available height inside .left (which has overflow:hidden).
  When result rows grow, without a flex container the table can expand and be clipped.
  Make each view a column flex container so .table-wrap (flex:1) can show its own scrollbar.
*/
.view{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.view.hidden{ display:none; }

/* Bulk view can be taller; allow it to scroll if needed. */
#view-bulk{ overflow:auto; }

.hint{
  color:var(--muted);
  background:#fafafa;
  border:1px dashed var(--line);
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  margin-bottom:10px;
}

.options{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.opt{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.opt label{
  font-size:12px;
  color:var(--muted);
}
.opt input{
  width:110px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:10px;
}

.statusline{
  margin:8px 0;
  font-size:13px;
  color:var(--muted);
  min-height:18px;
}

/* statusline action button (Excel download) */
.btn-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:10px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.btn-inline:hover{ background:#f7f8fb; }
.btn-inline:disabled{ opacity:.5; cursor:not-allowed; }

.table-wrap{
  flex:1;
  min-height:0;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:10px;
}

.table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.table th{
  position:sticky;
  top:0;
  background:#fff;
  z-index:1;
  text-align:left;
  color:var(--muted);
  font-weight:800;
}
.table td a{
  color:#2563eb;
  text-decoration:none;
}
.table td a:hover{ text-decoration:underline; }

.col-title{ width:50%; }
.col-date{ width:12%; }
.col-status{ width:10%; }
.col-rank{ width:6%; }
.col-link{ width:22%; }

/* 완료(요약) 표시 */
.statusline.completed{
  font-weight:900;
  color:var(--text);
}
.statusline .label{
  color:var(--accent);
  font-weight:900;
}
.statusline .count{ font-weight:900; }
.statusline .ok{ color:var(--ok); font-weight:900; }
.statusline .miss{ color:var(--bad); font-weight:900; }
.statusline .src{ color:var(--muted); font-weight:700; }
.statusline .mode{ color:var(--muted); font-weight:700; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
}
.badge.ok{ background:rgba(34,197,94,.12); color:var(--ok); border:1px solid rgba(34,197,94,.25); }
.badge.bad{ background:rgba(239,68,68,.12); color:var(--bad); border:1px solid rgba(239,68,68,.25); }

tr.empty td{
  text-align:center;
  color:var(--muted);
  padding:18px;
}

.bulk-grid{
  display:flex;
  gap:12px;
}

.bulk-auth{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  margin-bottom:10px;
  background:#fff;
}
.bulk-auth-title{
  font-weight:900;
  margin-bottom:8px;
}
.bulk-auth-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.bulk-auth-row input{
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:14px;
  min-width:180px;
}
.bulk-left{
  flex:1;
  min-width:0;
}
.bulk-right{
  width:260px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:#fafafa;
}
.bulk-label{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}
textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  font-size:13px;
  resize:vertical;
}

.bulk-options{
  display:flex;
  gap:10px;
  margin-top:10px;
  margin-bottom:10px;
}

.primary{
  background:var(--accent);
  color:white;
  border:none;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:900;
}
.primary:disabled{ opacity:.6; cursor:not-allowed; }

.secondary{
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:900;
}
.secondary:hover{ background:#f8fafc; }

.bullets{
  margin:10px 0 0 16px;
  padding:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}


/* Category tabs (Rank vs Disclosure) */
.category-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 50;
}
.category-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  text-decoration: none;
  color: #333;
  background: #f8f8f8;
  font-weight: 600;
}
.category-tab.active {
  background: #ffe8d5;
  border-color: #ff9a42;
  color: #ff7a00;
}

/* ===== Ad slots (AdSense placeholders) ===== */
.ad-slot{
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fafafa;
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  overflow: hidden;
}

.ad-label{
  position:absolute;
  top:8px;
  left:10px;
  font-size:12px;
  color: var(--muted);
}

.ad-placeholder{
  color: #7a8599;
  font-size: 13px;
  padding: 18px 14px;
  text-align:center;
}

/* Top banner in header */
.ad-top{
  height: 90px;                 /* 728x90 기준 */
  flex: 1 1 420px;
  max-width: 970px;
  margin-left: auto;
}

/* Mid banner in content */
.ad-mid{
  height: 90px;
  margin: 10px 0 12px 0;
}

/* Sidebar rectangle */
.ad-side{
  height: 600px;                /* 300x600 기준 */
  margin-top: 12px;
}

/* Responsive: stack + smaller sidebar ad */
@media (max-width: 1024px){
  .ad-top{
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
    margin-left: 0;
  }
  .ad-side{
    height: 250px;              /* 300x250 */
  }
}
/* ===== Mobile: page scroll + stacked layout ===== */
@media (max-width: 820px){
  html, body { height: auto; }
  .app { height: auto; min-height: 100vh; }

  /* 좌/우 2열 -> 1열로 쌓기 (개별/대량 공통) */
  .content{
    flex-direction: column;
    flex: 0 0 auto;
    min-height: auto;
    padding-bottom: 10px;
  }

  /* 결과 영역(파란 박스) : 내부에서 잘리던 걸 풀어서 페이지로 스크롤 */
  .left{ overflow: visible; }
  .view{ overflow: visible; }
  #view-bulk{ overflow: visible; }

  /* 테이블은 가로만 스크롤 가능하게(세로는 페이지 스크롤) */
  .table-wrap{
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  /* 우측 패널(사이드 광고 포함)도 아래로 자연스럽게 내려가게 */
  .right{ width: 100%; }
  .side-body{ overflow: visible; }

  /* 광고 영역 모바일 높이 살짝 축소(원하면 수치 조정 가능) */
  .ad-top{ height: 72px; }
  .ad-mid{ height: 72px; }
  .ad-side{ height: 250px; }
}

/* =========================================================
   Mobile layout fix: page scroll (single/bulk shared)
   - no trapped inner scroll
   - ads + business info reachable by scrolling
   ========================================================= */
@media (max-width: 820px){

  html, body{
    height: auto !important;
    overflow-y: auto !important;
  }

  /* 어떤 상위 컨테이너가 height:100vh + overflow를 잡고 있어도 모바일에선 풀기 */
  .app, .container, .content, .left, .right{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 결과/패널 영역이 내부 스크롤로 갇히는 걸 강제로 해제 */
  .view, #view-single, #view-bulk, .panel, .card, .result, .result-wrap{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 표(검색결과)는 가로만 스크롤 */
  table{ width: 100%; }
  .table-wrap, .table-container, .table-responsive{
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 사이드(우측) 고정/스티키가 있으면 모바일에서는 해제 */
  .sticky, .is-sticky, .right-sticky, .sidebar{
    position: static !important;
    top: auto !important;
  }

  /* 광고 박스: 모바일 폭에 맞춰 꽉 차게 */
  .ad-slot{
    width: 100% !important;
    max-width: 100% !important;
  }
  .ad-placeholder{
    width: 100% !important;
    max-width: 100% !important;
    height: 100px !important;     /* 모바일 상단/중단 배너 기본 높이 */
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #ad-side .ad-placeholder{
    height: 250px !important;     /* 모바일 사이드광고(하단으로 내려오게 됨) */
  }

  /* 푸터(사업자정보) 아래 잘림 방지 */
  footer{
    padding-bottom: 28px;
  }
}

/* =========================================================
   Mobile ONLY (Bulk tab): make search UI prominent
   - stack login + reference vertically
   - reference smaller (scroll inside)
   - inputs/buttons larger
   (PC untouched)
   ========================================================= */
@media (max-width: 820px){

  /* Bulk view only */
  #view-bulk { overflow: visible !important; }

  /* 어떤 2열 컨테이너든 모바일에선 1열로 강제 */
  #view-bulk .row,
  #view-bulk .cols,
  #view-bulk .columns,
  #view-bulk .two-col,
  #view-bulk .two-cols,
  #view-bulk .split,
  #view-bulk .grid,
  #view-bulk .grid-2,
  #view-bulk .grid-two {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* 로그인/입력 UI를 크게 */
  #view-bulk input[type="email"],
  #view-bulk input[type="password"],
  #view-bulk input[type="text"],
  #view-bulk textarea {
    width: 100% !important;
    font-size: 16px !important;
    padding: 14px 12px !important;
    box-sizing: border-box !important;
  }

  #view-bulk button,
  #view-bulk .btn,
  #view-bulk .button {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* "참고" 박스가 너무 커서 화면을 먹는 문제 해결:
     - 높이 제한 + 내부 스크롤(읽고 싶으면 안에서 스크롤)
     - 폰트/패딩 축소 */
  #view-bulk .hint,
  #view-bulk .guide,
  #view-bulk .help,
  #view-bulk .reference,
  #view-bulk .notice,
  #view-bulk .info {
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    max-height: 140px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 혹시 오른쪽(side) 고정/스티키면 모바일에선 해제 */
  #view-bulk .right,
  #view-bulk .sidebar,
  #view-bulk .aside {
    width: 100% !important;
    position: static !important;
    top: auto !important;
  }
}

/* ===== Mobile (Bulk) precise fix for "참고" panel ===== */
@media (max-width: 820px){

  /* 대량검색 화면에서만 */
  #view-bulk .panel-title-ref{
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  /* "참고" 제목 바로 아래의 본문(리스트)을 작게 + 높이 제한 + 내부 스크롤 */
  #view-bulk .panel-title-ref + *{
    max-height: 120px !important;   /* 참고 박스 높이 (원하면 100~160 조절) */
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* 대량검색 로그인/참고 영역(패널들)을 모바일에서 1열 스택으로 만들기
     (grid/flex 둘 다 대응) */
  #view-bulk .panel{
    width: 100% !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;   /* grid면 이 한 줄로 2열 -> 1열로 쌓임 */
  }
}

/* =========================================================
   Mobile ONLY: Bulk (대량검색) 레이아웃 정리
   - bulk-left(로그인/입력) 위로, bulk-right(참고) 아래로
   - 참고는 작게(높이 제한 + 내부 스크롤)
   - 입력/버튼 크게
   ========================================================= */
@media (max-width: 820px){

  /* 2컬럼(좌/우) 강제 해제: float/flex/grid 전부 대응 */
  #view-bulk .bulk-left,
  #view-bulk .bulk-right{
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
  }

  /* 모바일에서 순서: 로그인/입력(왼쪽) -> 참고(오른쪽) */
  #view-bulk .bulk-left{ order: 1 !important; margin-bottom: 12px !important; }
  #view-bulk .bulk-right{ order: 2 !important; }

  /* 로그인/입력 UI 크게 */
  #view-bulk .bulk-left input[type="email"],
  #view-bulk .bulk-left input[type="password"],
  #view-bulk .bulk-left input[type="text"],
  #view-bulk .bulk-left textarea{
    width: 100% !important;
    font-size: 16px !important;
    padding: 14px 12px !important;
    box-sizing: border-box !important;
  }

  #view-bulk .bulk-left button,
  #view-bulk .bulk-left .btn,
  #view-bulk .bulk-left .button{
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* 참고: 제목은 유지, 본문(ul.bullets)만 작게 + 내부 스크롤 */
  #view-bulk .panel-title-ref{
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  #view-bulk .bulk-right ul.bullets{
    max-height: 96px !important;     /* 참고 박스 높이: 80~140 사이로 취향 조절 */
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
    line-height: 1.35 !important;
    padding-right: 6px !important;
  }
}