/* ── 공통 변수 ── */
:root {
  --primary: #1565C0;
  --primary-dark: #0D47A1;
  --primary-light: #E3F2FD;
  --accent: #E53935;
  --success: #2E7D32;
  --warning: #F57F17;
  --text: #1a1a2e;
  --text-sub: #555;
  --border: #e0e0e0;
  --bg: #f5f6fa;
  --white: #fff;
  --radius: 6px;
  --shadow: 0 2px 8px rgba(0,0,0,.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Pretendard', sans-serif; background: var(--bg); color: var(--text); font-size: 13px; min-height: 100vh; display: flex; flex-direction: column;  }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* ── GNB ── */
.gnb { background: var(--primary-dark); position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.gnb-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; height: 50px; padding: 0 16px; }
.gnb-logo { font-size: 16px; font-weight: 800; color: #fff; margin-right: 32px; white-space: nowrap; flex-shrink: 0; }
.gnb-logo span { color: #FFD54F; }
.gnb-menu { display: flex; height: 100%; }
.gnb-item { display: flex; align-items: center; padding: 0 16px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.75); border-bottom: 3px solid transparent; border-top: none; border-left: none; border-right: none; background: none; font-family: inherit; height: 100%; white-space: nowrap; transition: all .15s; }
.gnb-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.gnb-item.active { color: #FFD54F; border-bottom-color: #FFD54F; font-weight: 700; }
.gnb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.gnb-user { font-size: 12px; color: rgba(255,255,255,.7); }
.gnb-btn { padding: 5px 12px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: rgba(255,255,255,.8); border-radius: var(--radius); font-size: 12px; font-family: inherit; transition: all .15s; }
.gnb-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.gnb-btn.primary { background: #FFD54F; color: #0D47A1; border-color: #FFD54F; font-weight: 700; }
.gnb-btn.primary:hover { background: #FFC107; }

/* ── 푸터 ── */
footer { background: #1a1a2e; color: rgba(255,255,255,.5); padding: 32px 0 20px; margin-top: auto; }
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.footer-logo { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.footer-logo span { color: #FFD54F; }
.footer-desc { font-size: 12px; line-height: 1.7; opacity: .6; max-width: 300px; }
.footer-links { display: flex; gap: 32px; flex-wrap: wrap; }
.footer-link-group h4 { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.8); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.footer-link-group a { display: block; font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 6px; transition: color .15s; }
.footer-link-group a:hover { color: #FFD54F; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-copy { font-size: 11px; opacity: .4; }
.footer-notice { font-size: 11px; opacity: .4; }

/* ── 공통 컴포넌트 ── */
.container { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
.btn { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 16px; border: none; border-radius: var(--radius); font-size: 13px; font-weight: 600; font-family: inherit; transition: all .15s; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-reset { background: #f0f0f0; color: #555; }
.btn-reset:hover { background: #e0e0e0; }
.btn-excel { background: #217346; color: #fff; }
.btn-excel:hover { background: #1a5c37; }
.btn-outline { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:hover { background: var(--primary-light); }

/* 필터 영역 */
.filter-area { background: #fff; border-bottom: 1px solid var(--border); padding: 12px 0; }
.search-tabs { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; }
.search-tab { flex: 1; padding: 8px; text-align: center; font-size: 13px; font-weight: 500; color: var(--text-sub); background: #f9f9f9; border: none; font-family: inherit; transition: all .15s; }
.search-tab.active { background: var(--primary); color: #fff; }
.search-input-wrap { position: relative; margin-bottom: 10px; }
.search-input-wrap input { width: 100%; height: 38px; padding: 0 36px 0 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-family: inherit; }
.search-input-wrap input:focus { outline: none; border-color: var(--primary); }
.search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #999; font-size: 16px; }
.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.filter-row select, .filter-row input[type=text], .filter-row input[type=date] { height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-family: inherit; background: #fff; }
.filter-sep { color: #ccc; }
.phone-btns { display: flex; gap: 4px; }
.phone-btn { height: 34px; padding: 0 14px; border: 1px solid var(--border); background: #fff; border-radius: var(--radius); font-size: 13px; font-family: inherit; font-weight: 500; color: var(--text-sub); transition: all .15s; }
.phone-btn:hover { border-color: var(--primary); color: var(--primary); }
.phone-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 서브탭 */
.sub-header { background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.sub-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; padding: 0 16px; overflow-x: auto; }
.sub-tab { padding: 11px 16px; font-size: 13px; font-weight: 500; color: var(--text-sub); border-bottom: 2px solid transparent; border-top: none; border-left: none; border-right: none; background: none; font-family: inherit; white-space: nowrap; transition: all .15s; }
.sub-tab:hover { color: var(--primary); }
.sub-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* 통계바 */
.stats-bar { background: var(--primary); color: #fff; padding: 8px 0; }
.stats-inner { max-width: 1400px; margin: 0 auto; padding: 0 16px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.stat-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.stat-item strong { font-size: 16px; font-weight: 700; }
.stat-item span { opacity: .75; }

/* 결과헤더 */
.result-header { max-width: 1400px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; }
.result-title { font-size: 15px; font-weight: 700; }
.result-title em { color: var(--primary); font-style: normal; }
.limit-sel { height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; font-family: inherit; }

/* 테이블 */
.table-wrap { max-width: 1400px; margin: 0 auto 16px; padding: 0 16px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
thead { background: #f0f4ff; }
thead th { padding: 9px 12px; text-align: left; font-size: 12px; font-weight: 600; color: var(--primary); border-bottom: 2px solid var(--primary-light); white-space: nowrap; }
tbody tr { border-bottom: 1px solid #f0f0f0; transition: background .1s; }
tbody tr:hover { background: #f8fbff; }
tbody tr.used-row { opacity: .5; background: #fafafa; }
tbody td { padding: 8px 12px; font-size: 13px; vertical-align: middle; }

/* 뱃지 */
.badge { display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge-cat { background: #EEF2FF; color: #4338CA; }
.badge-new { background: #FFF3E0; color: #E65100; border: 1px solid #FFB74D; }
.badge-active { background: #E8F5E9; color: #2E7D32; }
.badge-closed { background: #FFEBEE; color: #C62828; }
.badge-n { display: inline-block; background: #E53935; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 2px; margin-right: 3px; }

/* 링크/전화 */
.phone-link { color: var(--primary); font-weight: 500; }
.place-link { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 3px; margin-right: 2px; display: inline-block; }
.naver-link { background: #03C75A; color: #fff; }
.kakao-link { background: #FEE500; color: #3C1E1E; }
.insta-link { background: #E1306C; color: #fff; }

/* 블라인드 */
.blind { color: #bbb; letter-spacing: 2px; font-size: 12px; }
.blind-wrap { display: inline-flex; align-items: center; gap: 6px; }
.blind-lock { font-size: 11px; color: #bbb; }

/* 처리버튼 */
.btn-use { padding: 3px 10px; border: 1px solid var(--success); background: #fff; color: var(--success); border-radius: var(--radius); font-size: 11px; font-weight: 600; }
.btn-use:hover { background: var(--success); color: #fff; }
.btn-unuse { padding: 3px 10px; border: 1px solid var(--border); background: #fff; color: var(--text-sub); border-radius: var(--radius); font-size: 11px; }

/* 페이지네이션 */
.pagination { max-width: 1400px; margin: 0 auto 32px; padding: 0 16px; display: flex; justify-content: center; gap: 3px; flex-wrap: wrap; }
.pag-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--border); background: #fff; border-radius: var(--radius); font-size: 12px; font-family: inherit; }
.pag-btn:hover { border-color: var(--primary); color: var(--primary); }
.pag-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pag-btn:disabled { opacity: .4; cursor: default; }

/* 로딩 */
.loading-overlay { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.7); z-index: 999; justify-content: center; align-items: center; }
.loading-overlay.show { display: flex; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 빈 결과 */
.empty { text-align: center; padding: 48px 20px; color: var(--text-sub); }
.coming-soon { text-align: center; padding: 80px 20px; }
.coming-soon h2 { font-size: 24px; font-weight: 700; color: var(--text-sub); margin-bottom: 8px; }

/* 인허가 카테고리 */
.lic-group-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.lic-group-tab { padding: 5px 14px; border: 1px solid var(--border); background: #fff; border-radius: 20px; font-size: 12px; font-weight: 500; color: var(--text-sub); font-family: inherit; transition: all .15s; }
.lic-group-tab:hover { border-color: var(--primary); color: var(--primary); }
.lic-group-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.lic-cat-wrap { display: flex; gap: 6px; flex-wrap: wrap; max-height: 80px; overflow-y: auto; margin-bottom: 8px; padding: 4px 0; }
.lic-cat-btn { padding: 4px 12px; border: 1px solid var(--border); background: #fff; border-radius: 20px; font-size: 11px; color: var(--text-sub); font-family: inherit; transition: all .15s; white-space: nowrap; }
.lic-cat-btn:hover { border-color: var(--primary); color: var(--primary); }
.lic-cat-btn.active { background: var(--primary-light); color: var(--primary); border-color: var(--primary); font-weight: 600; }

/* 이용권 페이지 */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 40px auto; padding: 0 16px; }
.pricing-card { background: #fff; border: 2px solid var(--border); border-radius: 12px; padding: 32px 24px; text-align: center; position: relative; transition: all .2s; }
.pricing-card:hover { border-color: var(--primary); box-shadow: 0 8px 24px rgba(21,101,192,.15); transform: translateY(-4px); }
.pricing-card.featured { border-color: var(--primary); }
.pricing-card.featured::before { content: '인기'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 20px; }
.pricing-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.pricing-price { font-size: 32px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.pricing-price span { font-size: 14px; font-weight: 400; color: var(--text-sub); }
.pricing-period { font-size: 12px; color: var(--text-sub); margin-bottom: 20px; }
.pricing-features { list-style: none; margin-bottom: 24px; text-align: left; }
.pricing-features li { padding: 6px 0; font-size: 13px; border-bottom: 1px solid #f5f5f5; display: flex; align-items: center; gap: 8px; }
.pricing-features li::before { content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0; }
.pricing-btn { width: 100%; height: 44px; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 700; font-family: inherit; background: var(--primary); color: #fff; transition: all .15s; }
.pricing-btn:hover { background: var(--primary-dark); }

/* 폼 공통 */
.form-page { max-width: 480px; margin: 60px auto; padding: 0 16px; }
.form-card { background: #fff; border-radius: 12px; padding: 40px; box-shadow: var(--shadow); }
.form-card h2 { font-size: 22px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.form-card p { font-size: 13px; color: var(--text-sub); margin-bottom: 28px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-sub); margin-bottom: 5px; }
.form-group input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; font-family: inherit; }
.form-group input:focus { outline: none; border-color: var(--primary); }
.form-submit { width: 100%; height: 44px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius); font-size: 15px; font-weight: 700; font-family: inherit; margin-top: 8px; transition: all .15s; }
.form-submit:hover { background: var(--primary-dark); }
.form-err { color: #c62828; font-size: 12px; margin-top: 8px; text-align: center; min-height: 16px; }
.form-footer { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-sub); }
.form-footer a { color: var(--primary); font-weight: 600; }

@media(max-width: 768px) {
  .gnb-logo { margin-right: 12px; font-size: 14px; }
  .gnb-item { padding: 0 10px; font-size: 12px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .preview-grid { grid-template-columns: 1fr; }
}


/* BODY-WIDTH-SYNC-START */
.sub-inner,
.filter-area .container,
.stats-inner,
.result-header,
.table-wrap,
.pagination {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.result-header,
.table-wrap,
.pagination {
  padding-left: 0;
  padding-right: 0;
}
/* BODY-WIDTH-SYNC-END */


/* PORTAL-FILTER-AREA-START */
.portal-filter-area {
  padding-top: 24px;
  padding-bottom: 24px;
}

.portal-filter-area .container {
  gap: 10px;
  align-items: center;
}

.portal-filter-area input,
.portal-filter-area select,
.portal-filter-area button {
  min-height: 44px;
  font-size: 14px;
  box-sizing: border-box;
}
/* PORTAL-FILTER-AREA-END */

/* ── 테이블 공통 셀 클래스 ── */
td.td-sub  { font-size: 11px; color: #999; white-space: nowrap; }
td.td-name { font-weight: 600; }
td.td-addr { color: #555; font-size: 12px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.td-small { font-size: 12px; color: #555; white-space: nowrap; }

/* ══════════════════════════════════════════════
   ── 테이블 공통 컬럼 규격 (전 페이지 공용)
   ══════════════════════════════════════════════ */

/* 기본: 모든 td/th overflow 방지 */
table {
}

thead th, tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#m-modal-table td, #m-modal-table th {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  width: auto !important;
  min-width: 0 !important;
}

/* 말줄임 허용 컬럼은 title 속성으로 툴팁 유도 */
tbody td[title] {
  cursor: default;
}

/* ── 컬럼별 너비 규격 ── */

/* No */
/* No 컬럼 제거됨 */

/* 업체명 */
.col-name  { width: 150px; min-width: 120px; font-weight: 600; }

/* 업종 / 분류 / 소셜유형 / 판매방법 */
.col-cat   { width: 100px; min-width: 80px; }

/* 대표자 / 사용자 */
.col-rep   { width: 80px;  min-width: 60px; }

/* 주소 — 말줄임 핵심 컬럼 */
.col-addr  { width: 200px; min-width: 140px; color: #555; font-size: 12px; }

/* 전화번호 / 휴대폰번호 */
.col-tel   { width: 120px; min-width: 110px; white-space: nowrap; }

/* 이메일 */
.col-email { width: 180px; min-width: 140px; }

/* 홈페이지 / 소셜링크 — 말줄임 */
.col-url   { width: 140px; min-width: 100px; }

/* 판매품목 — 말줄임 */
.col-item  { width: 140px; min-width: 100px; }

/* 사업자번호 */
.col-biz   { width: 110px; min-width: 100px; }

/* 인허가일 / 신고일 / 등록일 */
.col-date  { width: 110px;  min-width: 100px;  text-align: center; white-space: nowrap; font-size: 12px; color: #777; }

/* 사용일시 (어드민) */
.col-useddt { width: 130px; min-width: 120px; text-align: center; font-size: 12px; color: #777; }

/* 영업상태 */
.col-status { width: 72px;  min-width: 64px;  text-align: center; }

/* 출처 */
.col-src   { width: 72px;  min-width: 60px;  text-align: center; font-size: 12px; color: #888; }

/* 상권분석 */
.col-area  { width: 72px;  min-width: 64px;  text-align: center; }

/* 처리 (어드민) */
.col-action { width: 64px; min-width: 56px;  text-align: center; }

/* ── 반응형: 좁은 화면에서 일부 컬럼 숨김 ── */
@media (max-width: 1024px) {
  .col-useddt, th.col-useddt { display: none; }
  .col-rep,    th.col-rep    { display: none; }
}

@media (max-width: 768px) {
  .col-src,    th.col-src    { display: none; }
  .col-area,   th.col-area   { display: none; }
  .col-biz,    th.col-biz    { display: none; }
  .col-date,   th.col-date   { display: none; }
  .col-addr  { width: 120px; min-width: 80px; }
  .col-email { width: 130px; min-width: 100px; }
}


/* ===== 공통 상세 팝업 UI START ===== */

.row-clickable {
  cursor: pointer;
}

.row-clickable:hover td {
  background: #f8fbff !important;
}

.detail-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
}

.detail-modal.show {
  display: flex;
}

.detail-modal-card {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 84vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5edf7;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.20);
  padding: 28px;
}

.detail-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 18px;
  cursor: pointer;
  transition: all .15s ease;
}

.detail-modal-close:hover {
  background: #eef4fb;
  color: #334155;
}

.detail-modal-title {
  margin: 0 0 18px;
  padding-right: 42px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: #0f172a;
}

.detail-modal-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-modal-table tr {
  border-bottom: 1px solid #eef2f7;
}

.detail-modal-table tr:last-child {
  border-bottom: none;
}

.detail-modal-table th,
.detail-modal-table td {
  padding: 11px 12px;
  vertical-align: top;
  text-align: left;
}

.detail-modal-table th {
  width: 132px;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  white-space: nowrap;
}

.detail-modal-table td {
  font-size: 13px;
  line-height: 1.65;
  color: #334155;
  word-break: break-word;
}

.detail-modal-body {
  overflow-y: visible;
}
.detail-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .detail-modal {
    padding: 14px;
  }

  .detail-modal-card {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .detail-modal-title {
    font-size: 19px;
  }

  .detail-modal-table th,
  .detail-modal-table td {
    display: block;
    width: 100%;
    padding: 8px 0;
  }

  .detail-modal-table th {
    padding-top: 12px;
  }

  .detail-modal-table td {
    padding-bottom: 12px;
  }
}

/* ===== 공통 상세 팝업 UI END ===== */


/* ── 모달 테이블 override ── */
#m-modal { position: fixed !important; }
#m-modal-table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; border: none !important; box-shadow: none !important; }
#m-modal-table td { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; width: auto !important; min-width: 0 !important; }
#m-modal-table td:first-child { width: 110px !important; min-width: 90px !important; max-width: 110px !important; }
#m-modal-table td:last-child { width: auto !important; }

/* ── 모달 테이블 fix ── */
#m-modal-table { width: 100% !important; min-width: 0 !important; border: none !important; box-shadow: none !important; }
#m-modal-table td { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; min-width: 0 !important; }
#m-modal-table td:first-child { width: 110px !important; min-width: 90px !important; max-width: 120px !important; }

/* ── common-detail-modal 테이블 fix ── */
#common-detail-modal table { width: 100% !important; min-width: 0 !important; border: none !important; box-shadow: none !important; }
#common-detail-modal table td, #common-detail-modal table th { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; min-width: 0 !important; }
#common-detail-modal table td:first-child, #common-detail-modal table th:first-child { width: 110px !important; min-width: 90px !important; max-width: 120px !important; }

/* ===== 모바일 최적화 (2026-03-28) ===== */
@media (max-width: 768px) {

  /* 테이블 가로 스크롤 */
  .table-wrap, .db-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 500px;
  }

}

/* 프리뷰 테이블 모바일 가로 스크롤 */
@media (max-width: 768px) {
  .preview-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: unset;
    width: 100%;
  }
  .preview-table thead,
  .preview-table tbody,
  .preview-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .preview-table colgroup {
    display: table-column-group;
  }
}

/* 모바일 메뉴 폭 고정 */
@media(max-width:768px){
  .gnb-item{
    white-space:normal;
    word-break:keep-all;
    min-width:0;
  }
  .gnb-menu{
    min-width:0;
    width:100%;
  }
}

/* 모바일 헤더 gnb-right 완전 숨김 */
@media(max-width:768px){
  .gnb-right{
  }
  .gnb-logo img{
    height:36px;
  }
}

/* 모바일 전체 overflow 방지 */
@media(max-width:768px){
  body{
    overflow-x:hidden;
  }
  .wrap, .container, main, section{
    max-width:100vw;
    overflow-x:hidden;
  }
}



/* 폴드/초소형 화면 콘텐츠 잘림 방지 */
@media(max-width:480px){
  body{
    overflow-x:hidden;
  }
  .home-v2 .wrap,
  .hero-inner,
  .hero-strip,
  .wrap,
  .container{
    padding-left:14px;
    padding-right:14px;
    max-width:100vw;
    box-sizing:border-box;
  }
  .hero-title{
    font-size:26px;
    word-break:keep-all;
  }
  .hero-sub{
    font-size:14px;
    word-break:keep-all;
  }
}

/* 카운터 애니메이션 레이아웃 밀림 방지 */
@media(max-width:768px){
  .metric-value, .stat-value{
    min-width:0;
    overflow:hidden;
  }
  .count-up{
    display:inline-block;
    min-width:0;
  }
  .hero-metrics, .metrics-row, .metric-item{
    overflow:hidden;
    min-width:0;
  }
}

/* 카운터 숫자 증가시 레이아웃 밀림 방지 */
@media(max-width:768px){
  .hero-side{
    width:100%;
    overflow:hidden;
  }
  .metric-card{
    width:100%;
    overflow:hidden;
    min-width:0;
    box-sizing:border-box;
  }
  .metric-value{
    font-size:24px;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
  }
  .hero-inner{
    overflow:hidden;
    width:100%;
  }
}

/* 카운터 숫자 모바일 조정 */
@media(max-width:768px){
  .metric-value{
    font-size:18px;
    white-space:normal;
    word-break:break-all;
  }
  .metric-card{
    min-height:120px;
    padding:14px 12px;
  }
}

/* 카운터 숫자 반응형 폰트 */
@media(max-width:768px){
  .metric-value{
    font-size:clamp(13px, 4vw, 22px);
    white-space:nowrap;
    overflow:visible;
    width:auto;
  }
  .metric-card{
    min-height:110px;
    padding:12px 10px;
    overflow:visible;
    min-width:0;
  }
  .hero-side{
    gap:8px;
  }
}

/* 카운터 숫자 반응형 최종 */
@media(max-width:768px){
  .metric-value{
    font-size:clamp(12px, 3.5vw, 20px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:100%;
    display:block;
  }
  .metric-card{
    min-height:110px;
    padding:12px 10px;
    overflow:hidden;
    min-width:0;
    box-sizing:border-box;
  }
  .hero-side{
    gap:8px;
    overflow:hidden;
  }
}

/* 카운터 숫자 축소 최종 */
@media(max-width:768px){
  .metric-value{
    font-size:clamp(10px, 2.8vw, 16px);
    white-space:nowrap;
    overflow:hidden;
    width:100%;
    display:block;
  }
  .metric-value sup{
    font-size:9px;
  }
}

/* pricing 비교표 모바일 가로 스크롤 */
@media(max-width:768px){
  .p-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .p-hero h1{
    font-size:24px;
    word-break:keep-all;
  }
  .p-badge-row{
    flex-wrap:wrap;
    gap:6px;
  }
}

/* company 모달 모바일 */
@media(max-width:768px){
  .company-modal-card{padding:20px 16px;max-width:calc(100vw - 32px);}
  #c-modal-table td:first-child{width:70px;min-width:70px;}
  #c-modal-table td:last-child{word-break:break-all;white-space:normal;}
  #c-modal{padding:16px;}
}

/* company 모달 테이블 폭 강제 고정 */
@media(max-width:768px){
  #c-modal-table{width:100%;max-width:100%;table-layout:fixed;}
  #c-modal-table td{overflow-wrap:break-word;word-break:break-all;white-space:normal;}
  #c-modal-table td:first-child{width:72px;min-width:72px;max-width:72px;}
}




/* 모바일 gnb-right 숨김 - 최종 */
@media(max-width:768px){
  .gnb-right{display:none;}
  #gnb-user-btn{display:flex;}
}

/* 사용자 버튼 PC에서 숨김 */
#gnb-user-btn{display:none;}
@media(max-width:768px){
  #gnb-user-btn{display:flex;}
}

@media(max-width:768px){.gnb-right{display:none !important;}}

.gnb-mobile-only{display:none}
@media(max-width:768px){.gnb-mobile-only{display:block}}

.gnb-mobile-only{display:none}
@media(max-width:768px){.gnb-mobile-only{display:block}}

@media(max-width:768px){.gnb-mobile-only{display:flex;}}

/* gnb-user-btn PC 숨김 */
#gnb-user-btn{display:none}
@media(max-width:768px){#gnb-user-btn{display:flex}}