/* ============================================================================
   apple.css — 밝은 애플 테마.

   출처: Apple Human Interface Guidelines / Principles of Great Design (WWDC 2026)

   왜 색을 지어내지 않는가
     애플의 시스템 색은 회색 하나까지 역할이 정해져 있다. 배경과 '올라온 면',
     구분선, 3단계 라벨이 서로 맞물려 위계를 만든다. 비슷해 보이는 값을
     새로 고르면 그 맞물림이 깨지고, 그때부터는 '애플 같은 색' 이지 애플이 아니다.

   이 파일이 하는 일
     1) 애플 시스템 팔레트를 --ap-* 로 정의한다 (템플릿들이 참조한다)
     2) 각 화면이 이미 쓰고 있던 토큰 이름(--bg, --text, --card, --primary,
        --bg-primary, --glass-bg ...)을 그 위에 다시 정의해 덮는다.
        그래서 마크업을 건드리지 않아도 화면 전체가 함께 바뀐다.
     3) 어두운 유리(glassmorphism)를 전제로 만들어진 공통 컴포넌트를
        밝은 바탕에서 성립하도록 다시 세운다.

   반드시 각 템플릿의 인라인 <style> '뒤' 에 실려야 한다. 같은 :root 끼리는
   나중에 온 선언이 이긴다.
   ========================================================================== */

:root{
  /* ── 바탕과 면 ───────────────────────────────────────────────────────
     애플은 '배경' 과 '올라온 면' 을 구분한다. 목록이 놓이는 바탕은 살짝
     회색이고, 카드는 순백이다. 반대로 하면 카드가 배경에 잠긴다. */
  --ap-bg:#F2F2F7;              /* systemGroupedBackground */
  --ap-bg-2:#FFFFFF;            /* systemBackground */
  --ap-card:#FFFFFF;            /* secondarySystemGroupedBackground */
  --ap-card-2:#F2F2F7;          /* 카드 안에서 한 단계 더 눌린 면 */

  /* ── 구분선과 채움 ───────────────────────────────────────────────────
     둘 다 불투명색이 아니라 반투명이다. 어떤 바탕 위에 놓여도 같은 무게로
     읽히게 하려는 것이고, 이게 애플 회색의 핵심이다. */
  --ap-sep:rgba(60,60,67,0.20);      /* separator */
  --ap-sep-strong:rgba(60,60,67,0.34);
  --ap-fill-thin:rgba(120,120,128,0.06);
  --ap-fill:rgba(120,120,128,0.12);   /* secondarySystemFill */
  --ap-fill-2:rgba(120,120,128,0.20);

  /* ── 라벨 3단계 ─────────────────────────────────────────────────────
     위계를 크기만으로 만들지 않는다. 색의 단계가 같이 움직여야 훑어진다. */
  --ap-label:#000000;
  --ap-label-2:rgba(60,60,67,0.60);   /* secondaryLabel */
  --ap-label-3:rgba(60,60,67,0.30);   /* tertiaryLabel — 셰브런, 플레이스홀더 */

  /* ── 강조색 ─────────────────────────────────────────────────────────
     systemIndigo. 지금 앱의 인디고와 이어지면서 애플의 실제 시스템 색이다.
     강조는 한 곳에만 쓴다 — 여러 색이 동시에 주장하면 아무것도 안 보인다. */
  --ap-tint:#5856D6;
  /* 알파를 자유롭게 섞어 쓰려면 색상 성분이 따로 필요하다.
     rgba(88,86,214,.06) 처럼 리터럴로 적으면 다크에서 라이트 인디고가 남는다. */
  --ap-tint-rgb:88,86,214;
  --ap-tint-press:#4A48C4;
  --ap-tint-08:rgba(88,86,214,0.08);
  --ap-tint-12:rgba(88,86,214,0.12);
  --ap-tint-20:rgba(88,86,214,0.20);

  /* ── 의미색 ─────────────────────────────────────────────────────────
     강조색과 별개다. 상태를 나타내는 색을 브랜드색으로 쓰면 둘 다 죽는다. */
  --ap-green:#34C759;  --ap-green-12:rgba(52,199,89,0.12);
  --ap-orange:#FF9500; --ap-orange-12:rgba(255,149,0,0.12);
  --ap-red:#FF3B30;    --ap-red-12:rgba(255,59,48,0.12);
  --ap-teal:#30B0C7;   --ap-teal-12:rgba(48,176,199,0.12);
  --ap-pink:#FF2D55;   --ap-pink-12:rgba(255,45,85,0.12);
  /* 알파를 섞어 쓰기 위한 색상 성분. 리터럴로 적으면 다크에 라이트 색이 남는다. */
  --ap-teal-rgb:48,176,199;
  --ap-red-rgb:255,59,48;
  --ap-green-rgb:52,199,89;
  --ap-orange-rgb:255,149,0;

  /* ── 상태 글자색 ─────────────────────────────────────────────────────
     칩·알림의 배경은 의미색 12% 이고 글자는 그보다 진한 색이다. 밝은 바탕
     에서는 어둡게, 어두운 바탕에서는 밝게 가야 하므로 토큰으로 뺀다.
     여기를 하드코딩하면 다크에서 배경과 글자가 같은 계열로 뭉갠다. */
  --ap-green-fg:#248A3D;  --ap-green-fg-s:#1E6B31;
  --ap-orange-fg:#B25E00; --ap-orange-fg-s:#8A4300;
  --ap-red-fg:#C6221A;    --ap-red-fg-s:#A81C15;
  --ap-teal-fg:#1B7F92;

  /* ── 떠 있는 재질 ───────────────────────────────────────────────────
     반투명은 '조작하는 층'(네비게이션·시트·팝오버)에만 쓴다. 내용까지
     반투명하면 겹겹이 비쳐 읽기가 무너진다. */
  --ap-chrome:rgba(242,242,247,0.72);
  --ap-sheet:rgba(255,255,255,0.88);
  --ap-popover:rgba(255,255,255,0.94);
  --ap-scrim:rgba(0,0,0,0.28);

  /* ── 그림자 ─────────────────────────────────────────────────────────
     밝은 바탕에서 어두운 바탕만큼 그림자를 주면 때가 낀 것처럼 보인다.
     큰 면일수록 진하게, 작은 조각은 거의 없이. */
  --ap-shadow-sm:0 1px 2px rgba(0,0,0,0.05);
  --ap-shadow:0 4px 16px rgba(0,0,0,0.08);
  --ap-shadow-lg:0 -8px 40px rgba(0,0,0,0.14);


  /* ── 3D 깊이 ────────────────────────────────────────────────────────
     밝은 바탕에서 깊이는 '그림자로 떠오르는 것'이다. 흰 글레어를 세게 주면
     종이가 젖은 것처럼 탁해지므로, 아주 옅은 sheen 만 얹고 그림자로 든다.
     기울기도 얕게 — 종이는 유리만큼 휘지 않는다. */
  --ap-tilt-deg:6;
  --ap-glare-a:0.55;
  --ap-glare-size:220px;
  --ap-lift:0 8px 20px rgba(15,23,42,0.08), 0 20px 40px rgba(15,23,42,0.06);

  --ap-radius:12px;
  --ap-radius-lg:14px;

  /* ══════════════════════════════════════════════════════════════════
     각 화면이 이미 쓰던 토큰을 덮어쓴다.
     이 줄들이 마크업을 안 건드리고 화면 전체를 바꾸는 지렛대다.
     ══════════════════════════════════════════════════════════════════ */

  /* dashboard.html */
  --bg:var(--ap-bg); --s1:#FFFFFF; --s2:#F2F2F7;
  --card:var(--ap-card); --card-border:var(--ap-sep);
  --primary:var(--ap-tint); --accent1:var(--ap-teal); --accent2:var(--ap-pink);
  --success:var(--ap-green); --warning:var(--ap-orange); --danger:var(--ap-red);
  --text:var(--ap-label); --muted:var(--ap-label-2);
  /* 무지개 그라디언트는 애플의 어휘가 아니다. 단색 강조로 바꾼다. */
  --glow:linear-gradient(180deg,var(--ap-tint),var(--ap-tint-press));

  /* base.html / account.html */
  --primary-light:var(--ap-tint-12);
  --glass-bg:var(--ap-card); --glass-border:var(--ap-sep);
  --glass-shadow:var(--ap-shadow-sm);

  /* admin.html */
  --bg-primary:var(--ap-bg); --bg-secondary:#FFFFFF; --bg-card:#FFFFFF;
  --bg-hover:var(--ap-fill-thin); --border-color:var(--ap-sep);
  --text-primary:var(--ap-label); --text-secondary:var(--ap-label-2);
  --text-muted:var(--ap-label-3);
  --accent-blue:#007AFF; --accent-cyan:var(--ap-teal); --accent-red:var(--ap-red);
  --accent-orange:var(--ap-orange); --accent-green:var(--ap-green);
  --accent-purple:var(--ap-tint);

  /* user_guide.html */
  --accent:var(--ap-teal); --dark:var(--ap-label); --gray:var(--ap-label-2);
  --text-dimmer:var(--ap-label-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   다크(네온) 팔레트.

   토큰 이름은 라이트와 똑같이 두고 값만 바꾼다. 템플릿은 이미 --ap-* 를 보고
   있으므로, 여기만 채우면 마크업을 한 줄도 안 건드리고 두 테마가 선다.
   위 :root 가 --bg/--card/--primary 같은 기존 토큰을 --ap-* 로 재매핑해
   두었기 때문에 그쪽도 자동으로 따라온다.

   왜 라이트를 다크로 '뒤집기'만 하지 않는가
     밝은 테마의 그림자를 그대로 어둡게 쓰면 때가 낀 것처럼 보이고, 어두운
     테마의 반투명을 밝은 값으로 쓰면 뿌옇게 뜬다. 깊이를 만드는 수단이
     서로 다르다 — 라이트는 그림자, 다크는 발광과 반투명이다.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"]{
  /* 바탕과 면 — 운영 다크 네온의 값 그대로 */
  --ap-bg:#06060F;
  --ap-bg-2:#0D0D1F;
  --ap-card:rgba(18,18,42,0.85);
  --ap-card-2:#15152D;

  /* 구분선·채움은 흰색 알파로 뒤집는다. 어두운 바탕에서 검은 알파는 안 보인다. */
  --ap-sep:rgba(255,255,255,0.09);
  --ap-sep-strong:rgba(255,255,255,0.18);
  --ap-fill-thin:rgba(255,255,255,0.04);
  --ap-fill:rgba(255,255,255,0.08);
  --ap-fill-2:rgba(255,255,255,0.14);

  /* 라벨 3단계 — 순백은 눈이 아프다. 살짝 내린 슬레이트를 최상위로 쓴다. */
  --ap-label:#F1F5F9;
  --ap-label-2:rgba(241,245,249,0.66);
  --ap-label-3:rgba(241,245,249,0.38);

  /* 강조색 — systemIndigo 대신 운영 네온 인디고 */
  --ap-tint:#818CF8;
  --ap-tint-rgb:129,140,248;
  --ap-tint-press:#6E79EE;
  --ap-tint-08:rgba(129,140,248,0.10);
  --ap-tint-12:rgba(129,140,248,0.16);
  --ap-tint-20:rgba(129,140,248,0.26);

  /* 의미색 — 어두운 바탕에서 채도가 높으면 번진다. 한 단계 밝고 옅은 쪽으로. */
  --ap-green:#34D399;  --ap-green-12:rgba(52,211,153,0.16);
  --ap-orange:#FBBF24; --ap-orange-12:rgba(251,191,36,0.16);
  --ap-red:#F87171;    --ap-red-12:rgba(248,113,113,0.16);
  --ap-teal:#22D3EE;   --ap-teal-12:rgba(34,211,238,0.16);
  --ap-pink:#F472B6;   --ap-pink-12:rgba(244,114,182,0.16);
  --ap-teal-rgb:34,211,238;
  --ap-red-rgb:248,113,113;
  --ap-green-rgb:52,211,153;
  --ap-orange-rgb:251,191,36;

  /* 상태 글자색 — 배경이 어두우므로 의미색을 그대로 글자로 쓴다 */
  --ap-green-fg:#34D399;  --ap-green-fg-s:#34D399;
  --ap-orange-fg:#FBBF24; --ap-orange-fg-s:#FBBF24;
  --ap-red-fg:#F87171;    --ap-red-fg-s:#F87171;
  --ap-teal-fg:#22D3EE;

  /* 떠 있는 재질 */
  --ap-chrome:rgba(13,13,31,0.72);
  --ap-sheet:rgba(18,18,42,0.90);
  --ap-popover:rgba(21,21,45,0.96);
  --ap-scrim:rgba(0,0,0,0.55);

  /* 그림자 — 어두운 바탕에선 그림자가 거의 안 보인다. 더 깊고 넓게 준다. */
  --ap-shadow-sm:0 1px 2px rgba(0,0,0,0.40);
  --ap-shadow:0 8px 28px rgba(0,0,0,0.50);
  --ap-shadow-lg:0 -8px 40px rgba(0,0,0,0.60);

  /* 위 :root 의 재매핑 중 하드코딩이라 따라오지 못하는 것만 다시 준다 */

  /* 어두운 바탕에서 깊이는 '빛이 스치는 것'이다. 그림자는 거의 안 보이므로
     글레어가 주역이고, 기울기도 더 깊게 줘야 유리처럼 읽힌다. */
  --ap-tilt-deg:9;
  --ap-glare-a:0.16;
  --ap-glare-size:180px;
  --ap-lift:0 16px 40px rgba(0,0,0,0.62);

  --s1:#0D0D1F; --s2:#15152D;
  --bg-secondary:#0D0D1F; --bg-card:rgba(18,18,42,0.85);
  --accent-blue:#60A5FA;
}

/* ── 바탕 ────────────────────────────────────────────────────────────────
   어두운 테마의 앰비언트 그라디언트를 끈다. 밝은 바탕에서는 얼룩으로 보이고,
   애플은 내용 뒤에 움직이는 배경을 두지 않는다. */
html,body{background:var(--ap-bg) !important; color:var(--ap-label)}
body::before,body::after,.ambient-bg{display:none !important}

body{
  /* 시스템 서체가 먼저다 — 광학 사이즈, 자간표, 가독성 보정이 이미 들어 있다.
     한글은 애플 기기의 SD Gothic Neo 로 이어받는다. */
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Apple SD Gothic Neo',
              'Pretendard','Noto Sans KR','Inter',system-ui,sans-serif !important;
  -webkit-font-smoothing:antialiased;
}

/* ── 타이포 ──────────────────────────────────────────────────────────────
   자간은 크기마다 달라야 한다. 큰 글자는 실제보다 벌어져 보이므로 당기고,
   작은 라벨은 좁아 보이므로 살짝 벌린다. 하나의 고정값은 어딘가에서 틀린다. */
h1,.page-title,.brand-text{letter-spacing:-0.022em; line-height:1.14; font-weight:700}
h2,.step-heading{letter-spacing:-0.018em; line-height:1.22; font-weight:700}
h3,h4,.res-detail-title,.header-title{letter-spacing:-0.012em; font-weight:600}
small,.caption,.form-label,.pax-age,.pax-note,.step-sub,.header-desc{letter-spacing:0.004em}

/* ── 유리 카드를 '올라온 면' 으로 ────────────────────────────────────────
   어두운 테마의 카드는 흐림 + 흰 반투명이었다. 밝은 바탕에서 그대로 두면
   카드가 바탕에 잠겨 경계가 사라진다. 불투명한 흰 면 + 얇은 선으로 세운다. */
.card,.glass-card,.res-card,.panel,.train-card,.history-item{
  background:var(--ap-card) !important;
  border:0.5px solid var(--ap-sep) !important;
  box-shadow:var(--ap-shadow-sm) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.card-header,.glass-card-header{
  background:transparent !important;
  border-bottom:0.5px solid var(--ap-sep) !important;
}
.card-footer{background:transparent !important; border-top:0.5px solid var(--ap-sep) !important}

/* 호버로 카드가 떠오르는 연출은 마우스 전용 어휘다. 터치에는 hover 가 없고,
   애플은 목록 항목을 띄우지 않는다 — 누르면 눌린다. */
.card:hover,.glass-card:hover,.res-card:hover,.history-item:hover{
  transform:none !important;
  background:var(--ap-card) !important;
}
.res-card-clickable:active,.history-item:active,.train-card:active{
  background:var(--ap-fill-thin) !important;
}

/* ── 헤더 ────────────────────────────────────────────────────────────────
   불투명한 띠가 아니라 떠 있는 재질이다. 내용이 그 아래로 흘러간다. */
.header,.dark-glass-header,.linebar{
  background:var(--ap-chrome) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
  backdrop-filter:saturate(180%) blur(20px) !important;
  border-bottom:0.5px solid var(--ap-sep) !important;
  box-shadow:none !important;
}
.brand-icon{background:var(--ap-tint) !important; color:#fff !important; box-shadow:none !important}  /* 배경을 틴트로 강제하므로 글리프는 흰색이어야 한다 — 같은 색이면 아이콘이 사라진다 */

/* 실제 앱 아이콘을 브랜드 마크로 쓰는 변형.
   마크 SVG 가 스퀘어클 배경을 자기 안에 들고 있어서, 위의 틴트 사각형
   안에 넣으면 상자 안의 상자가 된다. 배경과 테두리를 걷어내고 마크가
   상자 자체가 되게 한다. 여기 !important 는 위 규칙의 !important 를
   이기기 위한 것이다. */
.brand-icon.is-mark{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible !important;
}
.brand-icon.is-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* 다크에서는 마크의 검은 스퀘어클이 어두운 카드에 묻힌다.
   테두리를 두르면 초타원인 스퀘어클과 CSS 둥근 사각형의 모서리가 어긋난다.
   drop-shadow 는 SVG 의 실제 알파 모양을 따라가므로 형태가 정확히 맞는다.
   라이트에서는 흰 카드와 이미 대비가 충분해서 걸지 않는다. */
:root[data-theme="dark"] .brand-icon.is-mark img{
  filter:drop-shadow(0 0 14px rgba(var(--ap-tint-rgb),0.30));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand-icon.is-mark img{
    filter:drop-shadow(0 0 14px rgba(var(--ap-tint-rgb),0.30));
  }
}

/* ── 버튼 ────────────────────────────────────────────────────────────────
   강조 버튼은 화면당 하나. 나머지는 조용한 회색 채움으로 물러난다. */
.btn-primary,.btn-submit,.btn-search,.btn-book,.btn-next,.cta{
  background:var(--ap-tint) !important;
  border:0 !important; color:#fff !important;
  box-shadow:none !important; border-radius:var(--ap-radius-lg) !important;
  font-weight:600; letter-spacing:-0.01em;
}
.btn-primary:hover,.btn-submit:hover,.btn-search:hover,.btn-book:hover{
  background:var(--ap-tint) !important; transform:none !important;
  box-shadow:none !important;
}
.btn-primary:active,.btn-submit:active,.btn-search:active,.btn-book:active{
  background:var(--ap-tint-press) !important;
}
.btn-secondary,.btn-ghost,.btn-outline-secondary{
  background:var(--ap-fill) !important; border:0 !important;
  color:var(--ap-label) !important;
}
.btn-secondary:hover,.btn-ghost:hover{background:var(--ap-fill-2) !important; color:var(--ap-label) !important}
.btn-danger{background:var(--ap-red-12) !important; border:0 !important; color:var(--ap-red) !important}
.btn-success{background:var(--ap-green-12) !important; border:0 !important; color:var(--ap-green-fg) !important}
.btn-warning{background:var(--ap-orange-12) !important; border:0 !important; color:var(--ap-orange-fg) !important}
.btn-info{background:var(--ap-teal-12) !important; border:0 !important; color:var(--ap-teal-fg) !important}
.btn-add{
  background:var(--ap-fill-thin) !important; border:0.5px dashed var(--ap-sep-strong) !important;
  color:var(--ap-tint) !important;
}

/* ── 입력 ────────────────────────────────────────────────────────────────
   테두리로 상자를 그리는 대신 옅은 채움 위에 올린다. 여러 개가 세로로
   놓였을 때 선이 겹쳐 격자처럼 보이는 걸 막는다. */
input,select,textarea,.form-control,.dd-search input{
  background:var(--ap-fill-thin) !important;
  border:0.5px solid var(--ap-sep) !important;
  color:var(--ap-label) !important;
  border-radius:10px !important;
  /* 16px 미만이면 iOS 사파리가 입력 시 화면을 확대한다 */
  font-size:16px !important;
}
input::placeholder,textarea::placeholder{color:var(--ap-label-3) !important}
input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color:var(--ap-tint) !important;
  box-shadow:0 0 0 3px var(--ap-tint-20) !important;
  outline:none;
}

/* ── 떠 있는 층: 드롭다운·달력·모달·시트 ───────────────────────────────── */
.dd-panel,.dd-list,.cal-panel,.modal-content,.popover,.dropdown-menu{
  background:var(--ap-popover) !important;
  -webkit-backdrop-filter:saturate(180%) blur(24px) !important;
  backdrop-filter:saturate(180%) blur(24px) !important;
  border:0.5px solid var(--ap-sep) !important;
  box-shadow:var(--ap-shadow) !important;
  color:var(--ap-label) !important;
}
.dd-item:hover,.dd-item:focus{background:var(--ap-fill) !important}
.dd-item.selected,.cal-day.selected{
  background:var(--ap-tint) !important; color:#fff !important; font-weight:600;
}
.modal-header,.modal-footer{border-color:var(--ap-sep) !important}
.modal-backdrop,.res-detail-backdrop{background:var(--ap-scrim) !important}

.res-detail-panel{
  background:var(--ap-sheet) !important;
  -webkit-backdrop-filter:saturate(180%) blur(30px) !important;
  backdrop-filter:saturate(180%) blur(30px) !important;
  border:0 !important;
  box-shadow:var(--ap-shadow-lg) !important;
}
.sheet-grabber::after{background:var(--ap-label-3) !important}
.res-detail-header{border-bottom:0.5px solid var(--ap-sep) !important; background:transparent !important}

/* ── 상태 배지 ───────────────────────────────────────────────────────────
   의미색은 채도가 아니라 '옅은 바탕 + 진한 글자' 로 낸다. 밝은 화면에서
   진한 색면을 쓰면 그 조각만 화면 밖으로 튀어나온다. */
.badge,.res-card-badge,.pill,.chip{
  border:0 !important; font-weight:600 !important; letter-spacing:-0.004em;
}
.badge.bg-success,.res-card-badge.reserved,.res-card-badge.paid{
  background:var(--ap-green-12) !important; color:var(--ap-green-fg) !important;
}
.badge.bg-secondary,.res-card-badge.stopped,.res-card-badge.cancelled{
  background:var(--ap-fill) !important; color:var(--ap-label-2) !important;
}
.badge.bg-warning,.res-card-badge.searching,.res-card-badge.pending{
  background:var(--ap-orange-12) !important; color:var(--ap-orange-fg) !important;
}
.badge.bg-danger,.res-card-badge.failed{
  background:var(--ap-red-12) !important; color:var(--ap-red-fg) !important;
}
.badge.bg-primary,.badge.bg-info{background:var(--ap-tint-12) !important; color:var(--ap-tint) !important}

/* ── 진행 표시 ─────────────────────────────────────────────────────────── */
.progress,.track,.progress-track{background:var(--ap-fill) !important}
.progress-bar,.progress-fill,.track i{background:var(--ap-tint) !important; box-shadow:none !important}
.step-dot,.header-step-dot{background:var(--ap-fill-2) !important}
.step-dot.active,.header-step-dot.active{
  background:var(--ap-tint) !important; box-shadow:0 0 0 4px var(--ap-tint-20) !important;
}
.step-dot.done,.header-step-dot.done{background:var(--ap-tint-20) !important}

/* ── 알림 배너 ───────────────────────────────────────────────────────────
   부트스트랩 기본 배너는 테두리가 굵고 채도가 높다. 애플 쪽으로 눌러 놓는다. */
.alert{border:0 !important; border-radius:var(--ap-radius) !important; font-size:14px}
.alert-info{background:var(--ap-tint-08) !important; color:var(--ap-label) !important}
.alert-secondary{background:var(--ap-fill) !important; color:var(--ap-label-2) !important}
.alert-success{background:var(--ap-green-12) !important; color:var(--ap-green-fg-s) !important}
.alert-warning{background:var(--ap-orange-12) !important; color:var(--ap-orange-fg-s) !important}
.alert-danger{background:var(--ap-red-12) !important; color:var(--ap-red-fg-s) !important}

.toast-msg{
  background:var(--ap-popover) !important;
  -webkit-backdrop-filter:blur(24px) !important; backdrop-filter:blur(24px) !important;
  border:0.5px solid var(--ap-sep) !important;
  box-shadow:var(--ap-shadow) !important;
  color:var(--ap-label) !important;
}
.toast-msg.success{color:var(--ap-green-fg) !important}
.toast-msg.error{color:var(--ap-red-fg) !important}
.toast-msg.info{color:var(--ap-tint) !important}

/* ── 표 ──────────────────────────────────────────────────────────────────
   줄무늬 대신 얇은 구분선. 숫자는 자리를 맞춘다. */
table{border-color:var(--ap-sep) !important}
th,td{border-color:var(--ap-sep) !important; color:var(--ap-label)}
th{color:var(--ap-label-2) !important; font-weight:600}
td:has(+ td),.num,.tabular{font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--ap-fill-thin) !important}

/* ── 지도 ────────────────────────────────────────────────────────────────
   어두운 배경용 지도 이미지는 흰 바탕에서 검은 덩어리가 된다. */
.map-bg,[style*="korea-map-dark"]{opacity:0.10 !important; filter:invert(1) !important}
text.city-label{fill:var(--ap-label-2) !important}

/* ── 키보드 접근 ─────────────────────────────────────────────────────────
   포커스 링은 어디서나 보여야 한다. 없애는 건 접근성 회귀다. */
:focus-visible{outline:2px solid var(--ap-tint) !important; outline-offset:2px}

/* ── 접근성 ──────────────────────────────────────────────────────────────
   반투명을 줄이면 재질을 불투명하게, 대비를 높이면 경계를 뚜렷하게. */
@media (prefers-reduced-transparency: reduce){
  .header,.dark-glass-header,.dd-panel,.cal-panel,.modal-content,
  .res-detail-panel,.toast-msg{
    background:var(--ap-bg-2) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
}
@media (prefers-contrast: more){
  :root{--ap-sep:rgba(60,60,67,0.45); --ap-label-2:rgba(60,60,67,0.85)}
  .card,.glass-card,.res-card,input,select,textarea,.form-control{
    border-width:1px !important;
  }
}