/* ==========================================================
   settings-redesign.css
   마이페이지 구독 설정 카드+아코디언 구조형 스타일
   Plan: docs/plans/plan_20260608_settings_redesign.md
   담당: ui-component-engineer
   의존: style.css CSS 변수 (--accent, --bg-card, --border, 등)
   빌드 대상: 없음 (순수 CSS, style.css 다음에 로드)
   이모지 금지.
   ========================================================== */

/* ----------------------------------------------------------
   1. 카드 컨테이너 (.settings-cards)
   ---------------------------------------------------------- */
.settings-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* ----------------------------------------------------------
   2. 개별 카드 (.setting-card)
   ---------------------------------------------------------- */
.setting-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 20px 20px 16px;
  transition: box-shadow var(--transition);
}
.setting-card:focus-within {
  box-shadow: var(--shadow);
}
body.dark-theme .setting-card {
  background: var(--bg-card);
  border-color: var(--border);
}

/* ----------------------------------------------------------
   3. 카드 헤더 (.setting-card-head)
      제목(좌) + .setting-counter(우) 레이아웃
   ---------------------------------------------------------- */
.setting-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.setting-card-head h3,
.setting-card-head .setting-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* ----------------------------------------------------------
   4. 선택 카운터 (.setting-counter)
      "N/15" 형태의 보조 텍스트 — 우측 정렬은 부모 flex가 담당
   ---------------------------------------------------------- */
.setting-counter {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
  /* 선택 수가 0 초과일 때 JS가 .has-selection 부여하면 강조 */
}
.setting-counter.has-selection {
  color: var(--accent);
  background: var(--accent-muted);
  border-color: var(--accent);
}

/* ----------------------------------------------------------
   5. 섹터 아코디언 래퍼 (.sector-accordion)
   ---------------------------------------------------------- */
.sector-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ----------------------------------------------------------
   6. 아코디언 그룹 (.accordion-group)
   ---------------------------------------------------------- */
.accordion-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-base);
  transition: border-color var(--transition);
}
.accordion-group:focus-within {
  border-color: var(--accent);
}
body.dark-theme .accordion-group {
  background: #0d1117;
  border-color: var(--border);
}

/* ----------------------------------------------------------
   7. 아코디언 헤더 (.accordion-head)
      클릭 가능, 포커스 링 포함
   ---------------------------------------------------------- */
.accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  gap: 8px;
  transition: background var(--transition), color var(--transition);
  /* 터치 타깃 44px 보장 */
  min-height: 44px;
}
.accordion-head:hover {
  background: var(--accent-muted);
  color: var(--accent);
}
.accordion-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
body.dark-theme .accordion-head:hover {
  background: rgba(88, 166, 255, 0.07);
}
/* 그룹이 열렸을 때 헤더 배경 강조 */
.accordion-group.open .accordion-head {
  background: var(--accent-muted);
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}
body.dark-theme .accordion-group.open .accordion-head {
  background: rgba(88, 166, 255, 0.08);
  border-bottom-color: var(--border);
}

/* 헤더 왼쪽 그룹명 텍스트 — flex grow
   마크업 클래스: .accordion-group-label (app.js L7241, L7557)
   flex:1 이 없으면 라벨 너비만큼 count x위치가 밀려 그룹마다 불일치 발생.
   .accordion-head-label 도 병기하여 이전 마크업과 하위호환 보장. */
.accordion-group-label,
.accordion-head-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   8. 아코디언 선택 수 뱃지 (.accordion-count)
      min-width 고정 + inline-flex 중앙정렬로 자릿수(0~99)에 상관없이
      모든 그룹에서 뱃지 너비·위치가 동일하게 유지됨.
   ---------------------------------------------------------- */
.accordion-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
/* 선택이 하나라도 있을 때 JS가 .has-selection 추가 */
.accordion-count.has-selection {
  color: var(--accent);
  background: var(--accent-muted);
  border-color: var(--accent);
}

/* ----------------------------------------------------------
   9. 아코디언 화살표 (.accordion-arrow)
      접힘 기본 → 펼침 시 .accordion-group.open에 의해 180도 회전
   ---------------------------------------------------------- */
.accordion-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  /* SVG 또는 unicode 화살표 회전 */
  transition: transform 0.2s ease, color 0.15s ease;
  /* 기본: 아래 방향 (접힘 상태) */
  transform: rotate(0deg);
}
.accordion-group.open .accordion-arrow {
  transform: rotate(180deg);
  color: var(--accent);
}

/* ----------------------------------------------------------
   10. 아코디언 바디 (.accordion-body)
       기본: 접힘(display:none). .accordion-group.open 시 표시.
       hidden 속성 병행 안전 처리 포함.
   ---------------------------------------------------------- */
.accordion-body {
  display: none;
  padding: 12px 14px 14px;
  /* 칩들이 wrap되도록 */
  flex-wrap: wrap;
  gap: 8px;
}
/* JS가 .accordion-group에 'open' 클래스를 부여할 때 표시 */
.accordion-group.open .accordion-body {
  display: flex;
}
/* hidden 속성을 직접 제거하는 방식도 지원 (JS 구현에 따라 병행) */
.accordion-body:not([hidden]) {
  /* open 클래스 없이 hidden만 제거된 경우에도 표시 */
  /* 단, .accordion-group.open selector가 우선하므로 중복 없음 */
}

/* ----------------------------------------------------------
   11. 섹터/미디어 칩 (.chip)
       label > input[type=checkbox] + span 구조 기준.
       선택 상태: .chip-selected (JS가 toggle) 또는 :has(input:checked)
   ---------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: border-color var(--transition), background var(--transition),
              color var(--transition), box-shadow var(--transition);
  /* 터치 타깃 44px: 패딩으로 높이 확보 */
  min-height: 36px;
  /* 모바일 wrapping을 위해 flex 자녀가 됨 */
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-muted);
}
.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 체크박스 숨김 (label 전체가 클릭 영역) */
.chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* 비활성 한도 초과 칩 */
.chip:has(input:disabled),
.chip.chip-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
body.dark-theme .chip {
  background: #0d1117;
  border-color: var(--border);
  color: var(--text-secondary);
}
body.dark-theme .chip:hover {
  background: rgba(88, 166, 255, 0.07);
}

/* ----------------------------------------------------------
   12. 칩 선택 상태 (.chip-selected)
       JS가 직접 클래스 추가하거나 :has(input:checked)로 처리.
       WCAG AA: --accent(#2563eb) on white = 4.67:1 통과.
       다크: --accent(#58a6ff) on #0d1117 = 5.1:1 통과.
   ---------------------------------------------------------- */
.chip.chip-selected,
.chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-muted);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--accent) inset;
}
body.dark-theme .chip.chip-selected,
body.dark-theme .chip:has(input:checked) {
  background: rgba(88, 166, 255, 0.12);
  color: var(--accent);
  border-color: var(--accent);
}

/* ----------------------------------------------------------
   13. 기업 칩 (.company-chip)
       제거 가능 칩. 텍스트 + X 버튼 인라인.
   ---------------------------------------------------------- */
.company-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 5px 12px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  background: var(--accent-muted);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
  /* wrap 지원 */
}
body.dark-theme .company-chip {
  background: rgba(88, 166, 255, 0.10);
  border-color: var(--accent);
  color: var(--accent);
}

/* ----------------------------------------------------------
   14. 기업 칩 제거 버튼 (.company-chip-remove)
       터치 타깃 최소 24x24, 실제 44px 확장 영역은 ::before pseudo
   ---------------------------------------------------------- */
.company-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
  /* 터치 타깃 확장 (::before padding trick) */
  position: relative;
}
.company-chip-remove::before {
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: 50%;
}
.company-chip-remove:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--positive);
}
.company-chip-remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 기업 칩 영역 래퍼 (칩들이 wrap되는 flex 영역) */
.company-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  min-height: 10px;
}

/* ----------------------------------------------------------
   15. 미디어 세그먼트 탭 (.media-tab / .media-tab-active)
   ---------------------------------------------------------- */
/* 탭 바 래퍼 */
.media-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.media-tab {
  flex: 1;
  text-align: center;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  border: none;
  background: transparent;
  transition: background var(--transition), color var(--transition),
              box-shadow var(--transition);
  /* 터치 타깃 */
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.media-tab:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
.media-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.media-tab.media-tab-active {
  background: var(--bg-card);
  color: var(--accent);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
body.dark-theme .media-tabs {
  background: #0d1117;
  border-color: var(--border);
}
body.dark-theme .media-tab.media-tab-active {
  background: #161b22;
  color: var(--accent);
}

/* ----------------------------------------------------------
   16. 저장 버튼 (.setting-save-btn)
       기존 sidebar-cta-btn / feed-search-btn 톤 정합.
       full-width, accent 배경.
   ---------------------------------------------------------- */
.setting-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 20px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  color: #ffffff;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition),
              transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
  /* 터치 타깃 */
  min-height: 44px;
}
.setting-save-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}
.setting-save-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
}
.setting-save-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.setting-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
body.dark-theme .setting-save-btn {
  box-shadow: 0 2px 8px rgba(88, 166, 255, 0.20);
}
body.dark-theme .setting-save-btn:hover {
  box-shadow: 0 4px 14px rgba(88, 166, 255, 0.30);
}

/* ----------------------------------------------------------
   17. 설정 결과 메시지 (.setting-msg)
       기존 .mypage-msg 톤 정합.
       JS가 .error / .success 클래스를 toggle.
   ---------------------------------------------------------- */
.setting-msg {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  min-height: 0;
  line-height: 1.5;
  /* 빈 상태에서 레이아웃 점프 방지: JS가 텍스트 없을 때 hidden 또는 빈 string */
}
.setting-msg:empty {
  display: none;
}
.setting-msg.success {
  background: rgba(5, 150, 105, 0.10);
  color: var(--success);
}
.setting-msg.error {
  background: rgba(239, 68, 68, 0.10);
  color: var(--positive); /* style.css: --positive는 경고/에러 빨간색 */
}
body.dark-theme .setting-msg.success {
  background: rgba(5, 150, 105, 0.14);
}
body.dark-theme .setting-msg.error {
  background: rgba(248, 81, 73, 0.12);
  color: #f85149;
}

/* ----------------------------------------------------------
   18. 수신시간 카드 내 select 스타일 보조
   ---------------------------------------------------------- */
.setting-schedule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.setting-schedule-row select {
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.setting-schedule-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
body.dark-theme .setting-schedule-row select {
  background: #0d1117;
  border-color: var(--border);
  color: var(--text-primary);
}
body.dark-theme .setting-schedule-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12);
}

/* ----------------------------------------------------------
   19. 기업 입력 행 보조
   ---------------------------------------------------------- */
.setting-company-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}
.setting-company-row input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.setting-company-row input[type="text"]::placeholder {
  color: var(--text-muted);
}
.setting-company-row input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
body.dark-theme .setting-company-row input[type="text"] {
  background: #0d1117;
  border-color: var(--border);
  color: var(--text-primary);
}
body.dark-theme .setting-company-row input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12);
}

/* 기업 추가 버튼 (btn-mypage-add-company — outline accent 스타일) */
.setting-company-add-btn {
  flex-shrink: 0;
  height: 44px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--accent);
  background: var(--accent-muted);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.setting-company-add-btn:hover {
  background: var(--accent);
  color: #ffffff;
}
.setting-company-add-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   20-A. 기업 그룹 브라우즈 — 검색 인풋 (.company-search)
         plan_20260609 §1 Wave 2 계약 클래스.
         아코디언 래퍼(.sector-accordion) 상단에 배치.
         포커스 링 / 플레이스홀더 / 다크모드 / 반응형 포함.
   ---------------------------------------------------------- */

/* 검색 래퍼: 아이콘 있을 경우를 대비한 relative 컨테이너 */
.company-search-wrap {
  position: relative;
  margin-bottom: 10px;
}

/* 검색 인풋 본체 */
.company-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 44px;             /* 터치 타깃 44px 보장 */
  padding: 0 14px 0 38px;   /* 좌측 16px = 돋보기 아이콘 공간 */
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.company-search::placeholder {
  color: var(--text-muted);
  font-size: 13px;
}
/* 포커스 링: WCAG AA — --accent on --bg-base 4.5:1 이상 보장 */
.company-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

/* 돋보기 아이콘 (SVG 인라인 또는 ::before pseudo) */
.company-search-wrap::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  /* SVG 돋보기: 외부 파일 없이 data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* 아이콘 없이 plain input으로 쓸 경우: 패딩 축소 */
.company-search:not(.company-search-with-icon) {
  padding-left: 14px;
}
/* .company-search-with-icon 명시 시 아이콘 패딩 유지 */
.company-search-wrap .company-search {
  padding-left: 38px; /* 래퍼 내 배치 시 아이콘 공간 항상 유지 */
}

/* 다크모드 */
body.dark-theme .company-search {
  background: #0d1117;
  border-color: var(--border);
  color: var(--text-primary);
}
body.dark-theme .company-search::placeholder {
  color: var(--text-muted);
}
body.dark-theme .company-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12);
}
/* 다크모드 아이콘 색상 — stroke 색을 다크 muted로 교체 */
body.dark-theme .company-search-wrap::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------
   20-B. 기업 칩 truncate 변형 (.company-chip--browse)
         아코디언 바디 내 브라우즈 선택 칩.
         긴 회사명(삼성SDI, SK하이닉스 등)이 칩 너비를 초과하면
         ellipsis 처리. .chip 스타일을 그대로 상속해 토글 선택.
   ---------------------------------------------------------- */

/* 브라우즈 칩: .chip + .company-chip--browse 병행 사용 */
.company-chip--browse {
  /* 기본 .chip이 white-space:nowrap이므로 max-width만 추가 */
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* display는 .chip의 inline-flex 상속 */
}

/* 브라우즈 칩 span 내부 텍스트도 truncate */
.company-chip--browse .chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* 모바일에서 max-width 완화 — 화면 너비 기준 비율로 */
@media (max-width: 640px) {
  .company-chip--browse {
    max-width: 110px;
  }
}

/* ----------------------------------------------------------
   20. 반응형 — 모바일 (max-width: 640px)
   ---------------------------------------------------------- */
@media (max-width: 640px) {
  .setting-card {
    padding: 16px 14px 14px;
    border-radius: 12px;
  }

  .setting-card-head h3,
  .setting-card-head .setting-card-title {
    font-size: 14px;
  }

  /* 칩 크기 소폭 축소 — 터치 44px 유지.
     W9: max-width 제거(기본 none) — 긴 미디어명(BBC Korea 등) 119px 잘림 해소.
     flex-wrap 유지로 레이아웃 깨짐 없음. */
  .chip {
    font-size: 12px;
    padding: 7px 10px;
    min-height: 36px;
    max-width: none;
  }

  /* 아코디언 바디 칩 간격 */
  .accordion-body {
    gap: 6px;
    padding: 10px 10px 12px;
  }

  /* 미디어 탭 폰트 */
  .media-tab {
    font-size: 12px;
    padding: 7px 8px;
  }

  /* 저장 버튼 — 이미 full-width이므로 패딩만 조정 */
  .setting-save-btn {
    padding: 11px 16px;
    font-size: 13px;
  }

  /* 기업 추가 행: 좁은 화면에서 wrap 허용 */
  .setting-company-row {
    flex-wrap: wrap;
  }
  .setting-company-add-btn {
    width: 100%;
  }

  /* 수신시간 select wrap */
  .setting-schedule-row {
    flex-wrap: wrap;
  }

  /* 기업 검색 — 모바일 */
  .company-search {
    font-size: 16px; /* iOS zoom 방지: 16px 미만이면 자동 zoom */
  }
  .company-search-wrap::before {
    left: 11px;
  }
}

/* ----------------------------------------------------------
   21. 다크 테마 추가 정합
   ---------------------------------------------------------- */
body.dark-theme .accordion-group {
  border-color: var(--border);
}
body.dark-theme .accordion-count {
  background: #161b22;
  border-color: var(--border);
}
body.dark-theme .accordion-count.has-selection {
  background: rgba(88, 166, 255, 0.10);
}
body.dark-theme .setting-counter {
  background: #0d1117;
  border-color: var(--border);
}
body.dark-theme .setting-counter.has-selection {
  background: rgba(88, 166, 255, 0.10);
}
body.dark-theme .media-tab:hover {
  background: #1c2128;
  color: var(--text-primary);
}
body.dark-theme .company-chip-remove:hover {
  background: rgba(248, 81, 73, 0.14);
  color: #f85149;
}