/* =====================================================================
 * header-switch.css — 아이노트 ↔ 파이오스 전환 스위치
 *
 * 2026-08-03. 상단 모드 탭(일반·리딩·일정)을 걷어내고 그 자리에 스위치 하나를 둔다.
 *
 *   [☰ 햄버거]  [아이노트]  [⟩⟩ 📅]  ············  [검색] [액션]
 *      현재 화면의 메뉴   지금 있는 곳   갈 곳
 *
 * 「일반」 탭은 리딩노트와 짝을 이루려고 만든 이름이라, 리딩이 빠지면서 함께 없앴다.
 * 지금 있는 곳은 브랜드 이름이 이미 말해주므로 탭으로 다시 표시할 필요가 없다.
 *
 * ⚠️ 이 파일은 구 ie-tabs.css 의 "헤더 레이아웃" 역할도 이어받는다.
 *    header-layout-final.css 가 헤더를 1400px 중앙정렬하고 로고 뒤에 auto 여백을 주는데,
 *    그대로 두면 로고가 가운데로 밀리고 스위치가 검색창까지 날아간다.
 *    아래 레이아웃 절이 그 두 가지를 되잡는다. 이 파일을 지우면 헤더 정렬이 함께 돌아간다.
 *
 * 롤백: 이 파일 링크 + 헤더의 .ie-switch 한 블록만 제거.
 * =================================================================== */

/* ── 레이아웃: 로고를 진짜 왼쪽 끝으로 (구 ie-tabs.css 승계) ────────── */
.app-header .app-header-inner {
  max-width: none !important;    /* 1400px 중앙정렬 해제 → 폭 전체 사용 */
  margin: 0 !important;
}
/* 로고 뒤 auto 여백 해제 — 그대로면 스위치가 오른쪽 끝까지 밀려난다 */
.app-header .app-header-inner .app-header-logo {
  margin-right: 8px !important;
}
/* 스위치 뒤에 자동 여백 → 검색·액션만 우측으로 */
.app-header .app-header-inner .ie-switch {
  margin-right: auto !important;
}

/* ── 전환 스위치 ──────────────────────────────────────────────────── */
.ie-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 6px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #f1f0ee;
  color: #6b6a67;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ie-switch:hover {
  color: #0d9488;               /* 파이오스 청록 — 갈 곳의 색을 미리 보여준다 */
  border-color: #0d9488;
  background: #ffffff;
}
.ie-switch:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
}
/* ⟩⟩ 갈매기 — 자간을 좁혀 한 덩어리로 읽히게 */
.ie-switch .ie-chev {
  display: inline-flex;
  letter-spacing: -2px;
  font-size: 15px;
  line-height: 1;
}
/* 목적지 아이콘 — "어디로 가는지"를 말해준다 */
.ie-switch .ie-dest {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ── 다크 테마 ────────────────────────────────────────────────────── */
html[data-card-theme="dark"] .ie-switch {
  background: #2a2a2a;
  border-color: #3a3a3a;
  color: #a8a6a1;
}
html[data-card-theme="dark"] .ie-switch:hover {
  background: #1e1e1e;
  color: #5eead4;
  border-color: #5eead4;
}

/* ── 반응형 ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .app-header .app-header-inner .app-header-logo { margin-right: 6px !important; }
  .ie-switch { padding: 6px 9px; font-size: 13px; }
}
@media (max-width: 640px) {
  .app-header .app-header-inner .app-header-logo { margin-right: 4px !important; }
  .ie-switch { padding: 6px 8px; gap: 4px; }
  .ie-switch .ie-chev { font-size: 14px; }
  .ie-switch .ie-dest { width: 17px; height: 17px; }
}

/* =====================================================================
 * [2026-08-03 순서 확정] 스위치를 로고 바로 뒤에 세운다
 *
 *  layout-fix.css 가 전역으로 order 를 지정한다:
 *    햄버거(1) · 로고(2) · 검색(3) · 액션(4)
 *  스위치에 order 를 주지 않으면 기본값 0 이라 로고(2)보다 앞으로 나가
 *  "아이노트"가 검색창 옆까지 밀려난다.
 *
 *  해법: 스위치에도 로고와 "같은" order:2 를 준다.
 *        같은 order 안에서는 HTML 에 적힌 순서를 따르므로,
 *        DOM 상 로고 다음에 있는 스위치가 자연히 로고 바로 뒤에 선다.
 *        다른 요소(검색·액션)의 순번은 건드리지 않는다.
 *
 *  최종:  ☰ 햄버거 → 아이노트 → ⟩⟩📅 → ······ → 검색 → 액션
 * =================================================================== */
.app-header .app-header-inner .ie-switch {
  order: 2 !important;            /* 로고와 같은 순번 → DOM 순서로 로고 뒤 */
  margin-right: auto !important;  /* 스위치 뒤 자동여백 → 검색·액션은 우측 */
}
/* 로고 뒤 auto 여백 해제 — 그대로면 스위치가 오른쪽 끝까지 밀린다 */
.app-header .app-header-inner .app-header-logo {
  order: 2 !important;
  margin-right: 8px !important;
}