/* ============================================================
   성산아트홀 앱 — Liquid Glass Design System (Light)
   Base: White #FFFFFF · Beige #F5EFEB · Accent: Vivid Teal #1D7FAE
   Accent 2: Sky Blue #3D97D8 · Terracotta #E1704A · Green #3FA97A
   Style: Apple Liquid Glass (iOS 26/27) — Light Theme (No Navy)
   ============================================================ */

/* ================================================================
   디자인 토큰
   ================================================================ */
:root{
  /* ── 창원문화재단 브랜드 — 라이트 팔레트 (Teal/Beige/Sky Blue/White) ── */
  --cwcf-orange : #1D7FAE;   /* 메인 강조 — 비비드 틸 */
  --cwcf-orange-2: #14618A;  /* 틸 딥 */
  --cwcf-rose   : #E1704A;   /* 비비드 테라코타 */
  --cwcf-rose-2 : #C9532F;   /* 테라코타 딥 */
  --cwcf-blue   : #3D97D8;   /* 스카이 블루 */
  --cwcf-blue-2 : #2478B5;
  --cwcf-gold   : #DFA04A;   /* 앰버 골드 */
  --cwcf-gold-2 : #C08327;
  --cwcf-sage   : #3FA97A;   /* 그린 */
  --cwcf-sage-2 : #2C8A61;
  --cwcf-charcoal:#2F4750;   /* 딥 틸(무대 바 전용 — 네이비 아님) */

  /* ── 배경 — White → Beige 라이트 그라데이션 ── */
  --bg-body     : linear-gradient(160deg, #FFFFFF 0%, #F8F4EE 55%, #F1E9DB 100%);
  --bg          : #FFFFFF;
  --bg-soft     : #F5EFEB;
  --bg-warm     : #F5EFEB;
  --surface     : rgba(47,65,86,0.045);
  --surface-2   : rgba(47,65,86,0.075);

  /* ── 선 ── */
  --line        : rgba(47,65,86,.11);
  --line-soft   : rgba(47,65,86,.07);

  /* ── 텍스트 ── */
  --text        : #26313A;
  --text-sub    : #647180;
  --text-dim    : #98A2AE;

  /* ── 포인트 ── */
  --accent      : #1D7FAE;
  --accent-deep : #14618A;
  --accent-soft : rgba(29,127,174,.16);
  --accent-soft2: rgba(29,127,174,.09);
  --rose        : #E1704A;
  --rose-soft   : rgba(225,112,74,.16);
  --blue        : #3D97D8;
  --blue-soft   : rgba(61,151,216,.18);
  --ok          : #2C8A61;
  --ok-soft     : rgba(63,169,122,.18);
  --danger      : #DC4B3E;
  --danger-soft : rgba(220,75,62,.14);
  --gold        : #C08327;

  /* ── Liquid Glass 머티리얼 (화이트 유리) ── */
  --glass-bg    : rgba(255,255,255,0.62);
  --glass-bg-hi : rgba(255,255,255,0.82);
  --glass-stroke: rgba(47,65,86,0.10);
  --glass-stroke2: rgba(47,65,86,.06);
  --glass-blur  : blur(20px) saturate(180%);
  --glass-shadow: 0 8px 28px rgba(47,65,86,0.12);
  --glass-hi    : inset 0 1px 0 rgba(255,255,255,0.75);

  /* ── 틸 틴트 유리 (CTA) — 소프트 그라데이션 ── */
  --glass-orange-bg: linear-gradient(135deg, rgba(29,127,174,.94), rgba(20,97,138,.92));

  /* ── 형태 (모서리 둥글기 전반적으로 소폭 축소) ── */
  --radius-xl   : 24px;
  --radius-lg   : 18px;
  --radius-md   : 14px;
  --radius-sm   : 8px;
  --radius-pill : 999px;

  /* ── 스프링 전환 ── */
  --spring      : cubic-bezier(0.34,1.56,0.64,1);
  --ease-out    : cubic-bezier(.2,.8,.3,1);

  /* ── 레이아웃 ── */
  --tabbar-h    : 80px;
  --safe-top    : env(safe-area-inset-top,  0px);
  --safe-bottom : env(safe-area-inset-bottom, 0px);
}

/* ================================================================
   리셋 & 기반
   ================================================================ */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html,body{ height:100%; min-height:100vh; min-height:-webkit-fill-available; overflow:hidden }
body{
  font-family:-apple-system,'SF Pro Text','SF Pro','Inter',system-ui,
    'Pretendard','Apple SD Gothic Neo',BlinkMacSystemFont,sans-serif;
  background: var(--bg-body);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  letter-spacing:-.01em;
}
button{ font-family:inherit; border:none; background:none; color:inherit; cursor:pointer }
input,textarea,select{ font-family:inherit }
img{ display:block; max-width:100% }

/* ================================================================
   앱 프레임
   ================================================================ */
#app-frame{
  position:relative;
  max-width:480px; margin:0 auto;
  height:100vh;
  height:100dvh;
  height:var(--vh100, 100dvh);
  min-height:-webkit-fill-available;
  display:flex; flex-direction:column;
  overflow:hidden;
  background: var(--bg-body);
}

/* ================================================================
   Liquid Glass 공통 머티리얼
   ================================================================ */
.glass-bar,
.tab-glass,
.glass-chip {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), var(--glass-hi);
}

/* ================================================================
   헤더
   ================================================================ */
#app-header{
  flex-shrink:0; z-index:20;
  padding:calc(var(--safe-top) + 10px) 14px 8px;
  background: transparent;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 4px;
  background:transparent; border:none; box-shadow:none;
}
.brand{ display:flex; align-items:center; gap:10px }
.brand-logo-img{
  height:32px; width:auto; max-width:150px; object-fit:contain; display:block;
}
.brand-mark{
  height:36px; padding:0 12px; border-radius:var(--radius-pill);
  display:flex; align-items:center; gap:7px;
  font-weight:800; font-size:.78rem; color:#fff;
  background: var(--glass-orange-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(29,127,174,0.30);
  box-shadow: var(--glass-shadow), var(--glass-hi);
  white-space:nowrap; flex-shrink:0;
}
.brand-mark i{ font-size:.85rem }
.brand-text{ display:flex; flex-direction:column; line-height:1.15 }
.brand-text strong{ font-size:.95rem; font-weight:800; color:var(--text) }
.brand-text small{ font-size:.62rem; color:var(--text-sub); font-weight:500 }
.header-actions{ display:flex; gap:8px }

/* 아이콘 버튼 — 보조 유리 버튼 */
.icon-btn{
  width:38px; height:38px; border-radius:var(--radius-pill);
  display:grid; place-items:center; font-size:.92rem; color:var(--cwcf-orange);
  position:relative;
  background: var(--glass-bg-hi);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), var(--glass-hi);
  transition: transform .22s var(--spring), box-shadow .18s ease;
}
.icon-btn:active{ transform:scale(.91) }
.icon-btn:hover{
  transform:scale(1.04);
  box-shadow: var(--glass-shadow), var(--glass-hi),
    0 0 0 6px rgba(29,127,174,.14);
}

.badge-dot{
  position:absolute; top:5px; right:5px;
  min-width:7px; height:7px; border-radius:var(--radius-pill);
  background:var(--cwcf-rose); box-shadow:0 0 6px rgba(225,112,74,.55);
  border:1.5px solid rgba(255,255,255,.9);
  font-size:.44rem; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:0 2px; line-height:1;
  animation:badgePop .35s var(--spring) both;
}
@keyframes badgePop{
  from{ transform:scale(0); opacity:0 }
  to  { transform:scale(1); opacity:1 }
}
[hidden]{ display:none !important; }

/* ================================================================
   검색바
   ================================================================ */
.search-bar{
  margin-top:6px; display:flex; align-items:center; gap:10px;
  padding:6px 14px; border-radius:var(--radius-pill);
  color:var(--text-sub);
  background: var(--glass-bg-hi);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), var(--glass-hi);
  animation:dropIn .22s var(--ease-out);
}
.search-bar input{
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-size:.93rem; padding:8px 0;
}
@keyframes dropIn{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

/* ================================================================
   알림 센터
   ================================================================ */
.notif-header{
  display:flex; align-items:center; justify-content:space-between; margin:4px 0 12px;
}
.notif-main-title{
  font-size:1.05rem; font-weight:800; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.notif-main-title i{ color:var(--cwcf-orange) }
.notif-read-all{
  font-size:.74rem; font-weight:700; color:var(--cwcf-blue-2);
  padding:5px 14px; border-radius:var(--radius-pill);
  background: var(--glass-bg-hi);
  border:1px solid rgba(61,151,216,.35);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform .2s var(--spring);
}
.notif-read-all:active{ transform:scale(.95) }
.notif-all-done{ font-size:.74rem; font-weight:600; color:var(--ok); display:flex; align-items:center; gap:5px; }
.notif-badge-count{ display:inline-flex; margin-bottom:12px; }
.notif-badge-count span{
  font-size:.72rem; font-weight:700; color:var(--cwcf-rose-2);
  background:var(--rose-soft); border:1px solid rgba(225,112,74,.35);
  padding:4px 12px; border-radius:var(--radius-pill);
}
.notif-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
.notif-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 14px; border-radius:var(--radius-md);
  border:1px solid var(--line);
  cursor:pointer;
  background:var(--surface);
  transition:transform .14s ease, background .14s ease;
}
.notif-item.unread{ background:rgba(29,127,174,.12); border-color:rgba(29,127,174,.30); }
.notif-item.read{ background:var(--surface); opacity:.60; }
.notif-item:active{ transform:scale(.98) }
.notif-icon{ width:40px; height:40px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; font-size:.95rem; }
.notif-body{ flex:1; min-width:0 }
.notif-title-row{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.notif-title{ font-size:.84rem; font-weight:700; color:var(--text); line-height:1.3; flex:1; }
.notif-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--cwcf-rose); box-shadow:0 0 5px rgba(225,112,74,.5); }
.notif-text{ font-size:.76rem; color:var(--text-sub); line-height:1.55; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.notif-meta-row{ display:flex; align-items:center; justify-content:space-between; }
.notif-time{ font-size:.68rem; color:var(--text-dim); display:flex; align-items:center; gap:4px; }
.notif-time i{ font-size:.62rem }
.notif-action-label{ font-size:.7rem; font-weight:700; color:var(--cwcf-orange); }

/* ================================================================
   메인 & 스크린
   ================================================================ */
#app-main{ flex:1; min-height:0; position:relative; overflow:hidden }
.screen{
  position:absolute; inset:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 16px 24px;
  display:none; scrollbar-width:none;
  background: linear-gradient(160deg, #FFFFFF 0%, #F8F4EE 55%, #F1E9DB 100%);
}
.screen::-webkit-scrollbar{ display:none }
.screen.active{
  display:block;
  animation:screenIn .32s var(--ease-out);
}
#screen-community.active{ display:flex; flex-direction:column; }
@keyframes screenIn{
  from{ opacity:0; transform:translateY(12px) scale(.988) }
  to  { opacity:1; transform:none }
}

/* ================================================================
   탭바 — Liquid Glass 부유 네비게이션
   ================================================================ */
#tab-bar{
  flex-shrink:0; z-index:20;
  display:flex; justify-content:center;
  padding:6px 14px calc(8px + var(--safe-bottom));
  background: transparent;
}
.tab-glass{
  position:relative;
  display:flex; align-items:stretch;
  width:100%; max-width:440px; height:var(--tabbar-h);
  border-radius:30px; padding:7px;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(47,65,86,0.10);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.80),
    inset 0 -1px 0 rgba(47,65,86,.06),
    0 8px 32px rgba(47,65,86,0.16),
    0 2px 8px rgba(47,65,86,0.10);
  overflow:hidden;
}
.tab-glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(60% 38% at 50% -8%, rgba(255,255,255,.55), transparent 65%);
}

/* 슬라이딩 인디케이터 — 틸 Liquid Glass */
#tab-indicator{
  position:absolute; top:7px; bottom:7px; left:7px;
  border-radius:23px; pointer-events:none;
  background: var(--glass-orange-bg);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(29,127,174,0.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 16px rgba(29,127,174,.40),
    0 0 0 1px rgba(20,97,138,.18);
  transition:transform .42s cubic-bezier(.32,1.45,.32,1), width .3s ease;
  will-change:transform;
}
.tab-item{
  position:relative; z-index:1;
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--text-sub); font-size:.6rem; font-weight:700; letter-spacing:-.01em;
  border-radius:23px;
  transition:color .22s ease, transform .2s var(--spring);
}
.tab-item i{ font-size:1.15rem; transition:transform .3s var(--spring) }
.tab-item:active{ transform:scale(.90) }
.tab-item.active{ color:#fff }
.tab-item.active i{
  transform:translateY(-1px) scale(1.10);
  filter:drop-shadow(0 2px 5px rgba(47,65,86,.30));
}
.tab-item:not(.active):hover i{
  color:var(--cwcf-orange);
  filter:drop-shadow(0 0 6px rgba(29,127,174,.45));
  transform:scale(1.08);
}

/* ── 탭 아이콘 (사용자 제공 원본 PNG, 파일은 무가공 원본 유지) ──
   원본 파일은 불투명 검정 배경 + 밝은 회색 아이콘 형태.
   CSS mask로 아이콘 '형태'만 추출해 background-color(currentColor)로 채색.
   → .tab-item의 color가 바뀌면(비활성:회색 / 활성:흰색 / 호버:틸) 아이콘도 자동으로 같은 색이 됨. */
.tab-icon-mask{
  width:20px; height:20px; display:inline-block; flex-shrink:0;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  transition:transform .3s var(--spring), filter .2s ease, background-color .22s ease;
}
/* 탭바 외 어디서든 쓸 수 있는 범용 마스크 아이콘 (부모 font-size에 비례) */
.icon-img-mask{
  display:inline-block; width:1em; height:1em; flex-shrink:0;
  vertical-align:-0.125em;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.quick-item .icon-img-mask{ font-size:1.2rem; }

.icon-mask-home  { -webkit-mask-image:url(../images/icon-home.png);            mask-image:url(../images/icon-home.png); }
.icon-mask-events{ -webkit-mask-image:url(../images/icon-events-curtain.png);  mask-image:url(../images/icon-events-curtain.png); }
.icon-mask-ticket{ -webkit-mask-image:url(../images/icon-ticket.png);          mask-image:url(../images/icon-ticket.png); }
.icon-mask-docent{ -webkit-mask-image:url(../images/icon-docent-sparkle.png);  mask-image:url(../images/icon-docent-sparkle.png); }
.icon-mask-my    { -webkit-mask-image:url(../images/icon-my-profile.png);      mask-image:url(../images/icon-my-profile.png); }
.tab-item:active .tab-icon-mask{ transform:scale(.90) }
.tab-item.active .tab-icon-mask{
  transform:translateY(-1px) scale(1.10);
  filter:drop-shadow(0 2px 5px rgba(47,65,86,.30));
}
.tab-item:not(.active):hover .tab-icon-mask{
  filter:drop-shadow(0 0 6px rgba(29,127,174,.45));
  transform:scale(1.08);
}

/* ================================================================
   홈 화면
   ================================================================ */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:22px 2px 12px;
}
.section-head h2{ font-size:1.05rem; font-weight:800; letter-spacing:-.025em; color:var(--text); }
.section-head .more{ font-size:.76rem; color:var(--cwcf-blue-2); font-weight:600 }

/* 히어로 캐러셀 */
.hero-wrap{ position:relative; margin:4px -16px 0; user-select:none; -webkit-user-select:none; }
.hero-carousel{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:2px 16px 8px; scrollbar-width:none; scroll-behavior:smooth; cursor:grab;
}
.hero-carousel:active{ cursor:grabbing }
.hero-carousel::-webkit-scrollbar{ display:none }
.hero-card{
  position:relative; flex:0 0 74%; scroll-snap-align:center;
  border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/4.2;
  box-shadow:0 16px 40px rgba(47,65,86,.22);
  cursor:pointer;
  transition:transform .22s var(--spring);
}
.hero-card:hover{ transform:scale(1.01) }
.hero-card:active{ transform:scale(.98) }
.hero-card img{ width:100%; height:100%; object-fit:cover }
.hero-card .hero-grad{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(20,24,30,.88) 90%);
}
.hero-card .hero-info{
  position:absolute; left:0; right:0; bottom:0; padding:20px 18px;
  display:flex; flex-direction:column; gap:6px;
}
.hero-card .hero-info h3{ font-size:1.1rem; font-weight:800; line-height:1.3; color:#fff; }
.hero-card .hero-info p{ font-size:.76rem; color:rgba(255,255,255,.78) }

/* 히어로 도트 */
.hero-dots{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; align-items:center; pointer-events:auto;
}
.hero-dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.45); cursor:pointer;
  transition:all .3s var(--spring);
}
.hero-dot.active{
  width:20px; border-radius:3px; background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.30);
}

/* 상태 칩 */
.status-chip{
  font-size:.62rem; font-weight:800; padding:4px 10px; border-radius:var(--radius-pill);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:none !important; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.status-chip.accent { background:rgba(29,127,174,.95); color:#fff; }
.status-chip.gold   { background:rgba(201,169,124,.95); color:#2c2210; }
.status-chip.danger { background:rgba(220,75,62,.95);  color:#fff; }
.status-chip.ok     { background:rgba(63,169,122,.95); color:#0e2018; }

.white-chip{
  background:rgba(255,255,255,.22) !important;
  color:#fff !important; border-color:rgba(255,255,255,.35) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* 일반 칩 */
.chip-row{ display:flex; gap:6px; flex-wrap:wrap }
.chip{
  font-size:.63rem; font-weight:700; padding:4px 10px; border-radius:var(--radius-pill);
  background:rgba(47,65,86,.05); color:var(--text); border:1px solid var(--line);
}
.chip.accent{ background:var(--accent-soft); color:var(--accent-deep); border-color:rgba(29,127,174,.32); }
.chip.rose  { background:var(--rose-soft);   color:var(--cwcf-rose-2);   border-color:rgba(225,112,74,.32); }
.chip.blue  { background:var(--blue-soft);   color:var(--cwcf-blue-2);   border-color:rgba(61,151,216,.32); }
.chip.gold  { background:rgba(201,169,124,.18); color:var(--cwcf-gold-2); border-color:rgba(201,169,124,.35); }
.chip.ok    { background:var(--ok-soft);     color:var(--ok);          border-color:rgba(63,169,122,.35); }
.chip.danger{ background:var(--danger-soft); color:var(--danger);      border-color:rgba(220,75,62,.35); }

/* 빠른 메뉴 */
.quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.quick-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:15px 4px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(47,65,86,.08);
  font-size:.68rem; color:var(--text-sub); font-weight:600;
  box-shadow:0 2px 12px rgba(47,65,86,.10);
  transition:transform .22s var(--spring), box-shadow .18s ease;
}
.quick-item:active{ transform:scale(.93); box-shadow:none }
.quick-item:hover{ transform:scale(1.04); box-shadow:0 6px 20px rgba(47,65,86,.16) }
.quick-item i{ font-size:1.2rem; }
.quick-item:nth-child(1) i{ color:var(--cwcf-orange) }
.quick-item:nth-child(2) i{ color:var(--cwcf-rose) }
.quick-item:nth-child(3) i{ color:var(--cwcf-gold) }
.quick-item:nth-child(4) i{ color:var(--cwcf-sage) }
/* 아이콘 hover 소프트 글로우 */
.quick-item:hover i{ filter:drop-shadow(0 0 6px currentColor) }

/* 가로 스크롤 */
.h-scroll{
  display:flex; gap:12px; overflow-x:auto;
  margin:0 -16px; padding:2px 16px 10px; scrollbar-width:none;
}
.h-scroll::-webkit-scrollbar{ display:none }
.event-card-sm{ flex:0 0 144px; cursor:pointer; transition:transform .22s var(--spring) }
.event-card-sm:active{ transform:scale(.95) }
.event-card-sm:hover{ transform:scale(1.03) }
.event-card-sm .thumb{
  border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/4;
  position:relative; box-shadow:0 6px 20px rgba(47,65,86,.20);
}
.event-card-sm .thumb img{ width:100%; height:100%; object-fit:cover }
.event-card-sm .thumb .st{ position:absolute; top:8px; left:8px }
.event-card-sm h4{
  font-size:.8rem; font-weight:700; margin-top:8px; line-height:1.35; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.event-card-sm small{ font-size:.66rem; color:var(--text-dim); display:block; margin-top:3px }

/* ================================================================
   공연·전시 목록
   ================================================================ */
.filter-row{
  display:flex; gap:8px; overflow-x:auto;
  margin:0 -16px 14px; padding:4px 16px 6px;
  scrollbar-width:none;
  position:sticky; top:0; z-index:5;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(47,65,86,0.08);
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease;
  transform: translateY(0);
  opacity: 1;
}
.filter-row::-webkit-scrollbar{ display:none }
.filter-row.hide-bar{ transform:translateY(-110%); opacity:0; pointer-events:none; }

/* 필터 칩 — 보조 유리 버튼 */
.filter-chip{
  flex:0 0 auto; padding:8px 18px; border-radius:var(--radius-pill);
  font-size:.78rem; font-weight:700; color:var(--text-sub);
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(47,65,86,0.10);
  box-shadow: 0 2px 8px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .22s var(--spring), box-shadow .18s ease, background .18s;
}
.filter-chip:hover{ transform:scale(1.04); box-shadow:0 4px 14px rgba(47,65,86,.14), inset 0 1px 0 rgba(255,255,255,.70) }
.filter-chip:active{ transform:scale(.94) }
.filter-chip.active{
  color:#fff;
  background: var(--glass-orange-bg);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(29,127,174,.40);
  box-shadow: 0 4px 16px rgba(29,127,174,.40), inset 0 1px 0 rgba(255,255,255,.22);
}

/* 이벤트 카드 */
.event-list{ display:flex; flex-direction:column; gap:12px }
.event-card{
  display:flex; gap:12px; padding:12px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(47,65,86,.08);
  box-shadow:0 2px 12px rgba(47,65,86,.10);
  cursor:pointer;
  transition:transform .22s var(--spring), box-shadow .18s ease;
}
.event-card:hover{ transform:scale(1.01); box-shadow:0 6px 22px rgba(47,65,86,.16) }
.event-card:active{ transform:scale(.985); box-shadow:none }
.event-card .thumb{ flex:0 0 90px; border-radius:10px; overflow:hidden; aspect-ratio:3/4; }
.event-card .thumb img{ width:100%; height:100%; object-fit:cover }
.event-card .info{ flex:1; display:flex; flex-direction:column; gap:5px; padding:2px 0; min-width:0 }
.event-card .info h4{
  font-size:.9rem; font-weight:700; line-height:1.35; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.event-card .meta{ font-size:.7rem; color:var(--text-sub); display:flex; align-items:center; gap:5px }
.event-card .meta i{ font-size:.62rem; color:var(--text-dim); width:12px }
.event-card .price-line{ margin-top:auto; font-size:.76rem; font-weight:700; color:var(--cwcf-orange) }

/* ================================================================
   예매
   ================================================================ */
.ticket-tabs{ display:flex; gap:8px; margin-bottom:16px }
.ticket-tab{
  flex:1; padding:11px; border-radius:var(--radius-pill);
  font-size:.84rem; font-weight:700; color:var(--text-sub);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:0 2px 8px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .22s var(--spring), all .18s ease;
}
.ticket-tab:hover{ transform:scale(1.03) }
.ticket-tab.active{
  color:#fff;
  background: var(--glass-orange-bg);
  border:1px solid rgba(29,127,174,.40);
  box-shadow:0 4px 16px rgba(29,127,174,.40), inset 0 1px 0 rgba(255,255,255,.22);
}

/* 티켓 카드 */
.ticket-card{
  position:relative; border-radius:var(--radius-xl); overflow:hidden; margin-bottom:14px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(47,65,86,.08);
  box-shadow:0 4px 18px rgba(47,65,86,.14);
}
.tk-top{ display:flex; gap:12px; padding:14px; }
.tk-top img{ width:80px; height:106px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.tk-info{ flex:1 }
.tk-info h4{ font-size:.88rem; font-weight:700; margin-bottom:6px; color:var(--text); }
.tk-info p{ font-size:.72rem; color:var(--text-sub); margin-bottom:3px; display:flex; align-items:center; gap:5px; }
.tk-info p i{ width:14px; text-align:center; color:var(--cwcf-orange); }
.tk-divider{
  height:1px; margin:0 14px; background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);
  position:relative;
}
.tk-divider::before,.tk-divider::after{
  content:''; position:absolute; top:-8px; width:16px; height:16px; border-radius:50%;
  background:var(--bg-soft);
}
.tk-divider::before{ left:-22px; }
.tk-divider::after{ right:-22px; }
.tk-bottom{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; }
.tk-code{ font-size:.68rem; color:var(--text-dim); font-family:'SF Mono','Fira Code',monospace; }
.tk-actions{ display:flex; gap:8px; }

/* 날짜 선택 */
.date-scroll{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none; margin-bottom:14px; }
.date-scroll::-webkit-scrollbar{ display:none }
.date-pill{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  padding:10px 14px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:0 2px 8px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  cursor:pointer; transition: transform .22s var(--spring), all .18s;
}
.date-pill:hover{ transform:scale(1.05) }
.date-pill strong{ font-size:.95rem; font-weight:800; display:block; color:var(--text); }
.date-pill small{ font-size:.6rem; color:var(--text-sub); display:block; margin-top:2px; }
.date-pill.active{
  background: var(--glass-orange-bg);
  border:1px solid rgba(29,127,174,.40);
  box-shadow:0 4px 16px rgba(29,127,174,.40), inset 0 1px 0 rgba(255,255,255,.22);
}
.date-pill.active strong,
.date-pill.active small{ color:rgba(255,255,255,.95) }

/* 등급 선택 */
.grade-list{ display:flex; flex-direction:column; gap:8px }
.grade-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(47,65,86,.08);
  font-size:.84rem; font-weight:700;
  cursor:pointer; transition:transform .22s var(--spring), all .18s;
}
.grade-item:hover{ transform:scale(1.01) }
.grade-item .g-name{ display:flex; align-items:center; gap:10px }
.g-dot{ width:10px; height:10px; border-radius:50% }
.grade-item.active{
  border:1.5px solid rgba(29,127,174,.50);
  background:rgba(29,127,174,.12);
  box-shadow:0 3px 14px rgba(29,127,174,.20);
}
.grade-item .g-price{ color:var(--cwcf-orange); font-weight:800 }
.qty-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 2px }
.qty-ctrl{ display:flex; align-items:center; gap:14px }
.qty-btn{
  width:36px; height:36px; border-radius:var(--radius-pill);
  display:grid; place-items:center; font-size:.88rem;
  background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:0 2px 8px rgba(47,65,86,.12), inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .22s var(--spring);
}
.qty-btn:active{ transform:scale(.88) }
.qty-num{ font-size:1.2rem; font-weight:800; min-width:26px; text-align:center }
.sum-box{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 16px; border-radius:var(--radius-lg); margin-top:6px;
  background:rgba(29,127,174,.12);
  border:1px solid rgba(29,127,174,.28);
  box-shadow:0 3px 12px rgba(29,127,174,.14);
}
.sum-box .label{ font-size:.78rem; color:var(--text-sub) }
.sum-box .value{ font-size:1.2rem; font-weight:800; color:var(--cwcf-orange) }

/* ================================================================
   커뮤니티 (AI 챗봇)
   ================================================================ */
#screen-community{ padding:0 !important; }
.chat-wrap{
  flex:1; display:flex; flex-direction:column;
  height:100%; padding:12px 14px 0;
  background:linear-gradient(160deg,#FFFFFF 0%,#F8F4EE 55%,#F1E9DB 100%);
  overflow:hidden;
}
.chat-mode-desc{
  font-size:.74rem; color:var(--text-sub);
  padding:8px 12px; border-radius:var(--radius-sm); margin-bottom:10px;
  background:var(--accent-soft2); border:1px solid rgba(29,127,174,.20);
  display:flex; align-items:center; gap:7px; flex-shrink:0;
}
.chat-mode-desc.docent{ background:var(--rose-soft); border-color:rgba(225,112,74,.22); flex-wrap:wrap; }
.chat-key-hint{
  margin-left:auto; padding:4px 10px; border-radius:var(--radius-pill);
  font-size:.68rem; font-weight:700; color:#fff;
  background:var(--cwcf-rose); border:none;
  box-shadow:0 2px 8px rgba(225,112,74,.35);
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
}
.chat-key-hint:active{ transform:scale(.95) }

/* 타이핑 인디케이터 (점 3개 바운스) */
.chat-typing{ display:flex; align-items:center; gap:5px; padding:14px 16px; }
.chat-typing span{
  width:7px; height:7px; border-radius:50%;
  background:var(--text-dim);
  animation:typingBounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2){ animation-delay:.15s }
.chat-typing span:nth-child(3){ animation-delay:.3s }
@keyframes typingBounce{
  0%,60%,100%{ transform:none; opacity:.45 }
  30%{ transform:translateY(-5px); opacity:1 }
}
.chat-messages{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:12px;
  padding:4px 0 12px; scrollbar-width:none; min-height:0;
}
.chat-messages::-webkit-scrollbar{ display:none }
.chat-welcome{
  display:flex; flex-direction:column; align-items:center;
  padding:24px 16px; text-align:center; gap:12px; margin-top:12px;
}
.chat-welcome-icon{
  width:68px; height:68px; border-radius:18px;
  display:grid; place-items:center; font-size:1.8rem; color:#fff;
  background: var(--glass-orange-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid rgba(29,127,174,.40);
  box-shadow:0 10px 28px rgba(29,127,174,.35), inset 0 1px 0 rgba(255,255,255,.22);
}
.chat-welcome p{ font-size:.86rem; color:var(--text-sub); line-height:1.65; }
.chat-suggest-row{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:4px; }
.chat-suggest{
  padding:7px 16px; border-radius:var(--radius-pill); font-size:.74rem; font-weight:600;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:0 2px 8px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  color:var(--text-sub);
  transition: transform .2s var(--spring), all .15s;
}
.chat-suggest:active{
  background:rgba(29,127,174,.16); color:var(--cwcf-orange);
  border-color:rgba(29,127,174,.38); transform:scale(.95)
}
.chat-suggest:hover{ transform:scale(1.04) }

/* 메시지 버블 */
.chat-msg{ display:flex; align-items:flex-end; gap:8px; }
.chat-msg.user{ flex-direction:row-reverse }
.chat-avatar-bot{
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  display:grid; place-items:center; font-size:.78rem; color:#fff;
  background: var(--glass-orange-bg);
  border:1px solid rgba(29,127,174,.35);
  box-shadow:0 3px 10px rgba(29,127,174,.30);
}
.chat-avatar-user{ width:28px; height:28px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:.7rem; font-weight:800; color:#fff; }
.chat-bubble{
  max-width:74%; padding:11px 15px; border-radius:16px;
  font-size:.84rem; line-height:1.6;
}
.chat-bubble.bot{
  background:rgba(255,255,255,.80);
  border:1px solid rgba(47,65,86,.09);
  color:var(--text); border-bottom-left-radius:6px;
  box-shadow:0 2px 10px rgba(47,65,86,.10);
}
.chat-bubble.user{
  background: var(--glass-orange-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(29,127,174,.35);
  color:#fff; border-bottom-right-radius:6px;
  box-shadow:0 4px 16px rgba(29,127,174,.35);
}

/* 채팅 입력 영역 */
.chat-input-area{
  flex-shrink:0; padding:8px 0 12px;
  background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid rgba(47,65,86,.08);
}
.chat-tools{ display:flex; gap:8px; margin-bottom:8px; }
.chat-tool-btn{
  width:36px; height:36px; border-radius:var(--radius-pill);
  display:grid; place-items:center; font-size:.88rem;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:0 2px 8px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  color:var(--cwcf-orange); transition: transform .2s var(--spring);
}
.chat-tool-btn:active{ transform:scale(.88) }
.chat-tool-btn:hover{ transform:scale(1.08) }
.chat-tool-btn.recording{ background:var(--rose-soft); border-color:var(--cwcf-rose); color:var(--cwcf-rose-2); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
.chat-input-row{ display:flex; gap:8px; align-items:center; }
.chat-input{
  flex:1; padding:12px 18px; border-radius:var(--radius-pill);
  font-size:.86rem; color:var(--text);
  background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1.5px solid rgba(47,65,86,.10);
  box-shadow:0 2px 8px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.chat-input:focus{
  border-color:rgba(29,127,174,.50);
  box-shadow:0 0 0 4px rgba(29,127,174,.14), inset 0 1px 0 rgba(255,255,255,.65);
}
.chat-input::placeholder{ color:var(--text-dim) }
.chat-send-btn{
  width:44px; height:44px; border-radius:var(--radius-pill); flex-shrink:0; color:#fff;
  background: var(--glass-orange-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(29,127,174,.40);
  box-shadow:0 4px 14px rgba(29,127,174,.40), inset 0 1px 0 rgba(255,255,255,.22);
  display:grid; place-items:center; font-size:.92rem;
  transition:transform .22s var(--spring), box-shadow .18s;
}
.chat-send-btn:active{ transform:scale(.88); box-shadow:none }
.chat-send-btn:hover{ transform:scale(1.08) }

/* ================================================================
   마이페이지
   ================================================================ */
.profile-card{
  display:flex; align-items:center; gap:14px; padding:20px; border-radius:var(--radius-xl);
  background:linear-gradient(135deg,
    rgba(255,255,255,.75) 0%,
    rgba(29,127,174,.12) 50%,
    rgba(225,112,74,.10));
  border:1px solid rgba(47,65,86,.08);
  box-shadow:0 4px 20px rgba(47,65,86,.12);
}
.profile-card .avatar{ width:54px; height:54px; font-size:1.15rem }
.profile-card .p-info strong{ font-size:1rem; display:block; color:var(--text) }
.profile-card .p-info small{ font-size:.72rem; color:var(--text-sub); display:flex; align-items:center; gap:6px; margin-top:4px; }
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px }
.stat-box{
  text-align:center; padding:14px 4px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(47,65,86,.08);
  box-shadow:0 2px 10px rgba(47,65,86,.10);
}
.stat-box strong{ font-size:1.15rem; display:block; color:var(--cwcf-orange) }
.stat-box small{ font-size:.66rem; color:var(--text-dim) }
.menu-list{
  margin-top:16px; border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid rgba(47,65,86,.08);
  background:rgba(255,255,255,.68);
  box-shadow:0 2px 12px rgba(47,65,86,.10);
}
.menu-row{
  width:100%; display:flex; align-items:center; gap:12px; padding:15px 16px;
  font-size:.86rem; font-weight:600;
  border-bottom:1px solid rgba(47,65,86,.07); text-align:left;
  color:var(--text); transition:background .14s;
}
.menu-row:last-child{ border-bottom:none }
.menu-row:active{ background:rgba(29,127,174,.10) }
.menu-row i:first-child{ width:20px; text-align:center; font-size:.92rem; color:var(--cwcf-orange) }
.menu-row .icon-img-mask{ width:20px; font-size:.92rem; color:var(--cwcf-orange) }
.menu-row .chev{ margin-left:auto; color:var(--text-dim); font-size:.68rem }

/* 관리자 패널 */
.admin-panel{
  margin-bottom:14px; padding:16px; border-radius:var(--radius-xl);
  background:rgba(29,127,174,.10);
  border:1px solid rgba(29,127,174,.28);
  box-shadow:0 3px 14px rgba(29,127,174,.14);
}
.admin-panel-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:.86rem; font-weight:800; color:var(--cwcf-orange); }
.admin-panel-head i{ font-size:.88rem }
.admin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.admin-btn{
  padding:12px 8px; border-radius:var(--radius-pill); font-size:.76rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:0 2px 8px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  color:var(--text-sub);
  transition:transform .22s var(--spring), all .15s;
}
.admin-btn:active{ transform:scale(.93) }
.admin-btn:hover{ transform:scale(1.04) }
.admin-btn.accent{ border-color:rgba(29,127,174,.40); color:var(--cwcf-orange) }
.admin-btn.gold  { border-color:rgba(225,112,74,.40); color:var(--cwcf-rose-2) }
.admin-btn.ok    { border-color:rgba(63,169,122,.40); color:var(--ok) }
.admin-btn.danger{ border-color:rgba(220,75,62,.40);  color:var(--danger) }

.role-badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--radius-pill);
  font-size:.63rem; font-weight:800;
}
.role-badge.user { background:var(--accent-soft); color:var(--cwcf-orange); border:1px solid rgba(29,127,174,.35); }
.role-badge.admin{ background:var(--rose-soft);   color:var(--cwcf-rose-2);   border:1px solid rgba(225,112,74,.35); }

/* ================================================================
   바텀시트 & 모달 — Liquid Glass
   ================================================================ */
.sheet-backdrop{
  position:fixed; inset:0; z-index:200;
  background:rgba(38,49,58,.42);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; align-items:flex-end;
  animation:fadeIn .22s ease;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.bottom-sheet{
  width:100%; max-width:480px; margin:0 auto;
  max-height:88dvh; overflow-y:auto;
  border-radius:22px 22px 0 0;
  padding:10px 20px calc(28px + var(--safe-bottom));
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  backdrop-filter: blur(28px) saturate(200%);
  border:1px solid rgba(47,65,86,0.09);
  border-bottom:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    0 -10px 40px rgba(47,65,86,0.20);
  animation:sheetUp .38s cubic-bezier(.25,1.1,.35,1);
  scrollbar-width:none;
}
.bottom-sheet::-webkit-scrollbar{ display:none }
@keyframes sheetUp{
  from{ transform:translateY(55%); opacity:.5 }
  to  { transform:none; opacity:1 }
}
.sheet-handle{
  width:38px; height:4px; border-radius:var(--radius-pill);
  background:rgba(47,65,86,.16); margin:8px auto 16px;
}
.sheet-hero{
  border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10;
  position:relative; margin-bottom:14px;
  box-shadow:0 8px 24px rgba(47,65,86,.18);
}
.sheet-hero img{ width:100%; height:100%; object-fit:cover }
.sheet-title{ font-size:1.2rem; font-weight:800; line-height:1.35; margin-bottom:10px; color:var(--text); }
.detail-meta{ display:flex; flex-direction:column; gap:9px; margin:12px 0 }
.detail-meta .row{ display:flex; gap:11px; font-size:.82rem; color:var(--text-sub) }
.detail-meta .row i{ width:16px; text-align:center; color:var(--cwcf-orange); margin-top:2px; }
.sheet-desc{ font-size:.84rem; line-height:1.72; color:var(--text-sub); margin:12px 0 16px }
.sheet-section{ margin:18px 0 10px; font-size:.92rem; font-weight:800; color:var(--text) }

/* ── CTA 버튼 — 틸 틴트 Liquid Glass ── */
.btn-primary{
  width:100%; padding:16px; border-radius:var(--radius-pill);
  font-size:.98rem; font-weight:800; color:#fff;
  background: var(--glass-orange-bg);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border:1px solid rgba(29,127,174,.40);
  box-shadow:
    0 8px 24px rgba(29,127,174,.35),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .28s var(--spring), box-shadow .18s ease;
  margin-top:8px;
}
.btn-primary:hover{
  transform:scale(1.04);
  box-shadow:0 12px 32px rgba(29,127,174,.45), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:active{ transform:scale(.96); box-shadow:none }
.btn-primary:disabled{ opacity:.45; pointer-events:none }

/* ── 보조 버튼 — 투명 유리 + 틸 ── */
.btn-ghost{
  width:100%; padding:14px; border-radius:var(--radius-pill);
  font-size:.88rem; font-weight:700; color:var(--cwcf-orange);
  background:rgba(255,255,255,.60);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1.5px solid rgba(29,127,174,.40);
  box-shadow:0 2px 8px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  margin-top:8px;
  transition:transform .28s var(--spring), box-shadow .18s;
}
.btn-ghost:hover{ transform:scale(1.03); box-shadow:0 6px 18px rgba(29,127,174,.20), inset 0 1px 0 rgba(255,255,255,.70) }
.btn-ghost:active{ transform:scale(.96) }

/* 좋아요 버튼 */
.like-row{ display:flex; gap:10px; margin-top:6px }
.like-row .btn-primary{ flex:1; margin-top:0 }
.like-btn{
  width:54px; height:54px; border-radius:var(--radius-pill);
  display:grid; place-items:center; font-size:1.15rem;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:0 2px 10px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  color:var(--text-sub);
  transition:transform .22s var(--spring), all .18s;
}
.like-btn:hover{ transform:scale(1.08) }
.like-btn:active{ transform:scale(.85) }
.like-btn.liked{
  color:var(--cwcf-rose-2);
  border-color:rgba(225,112,74,.45);
  background:rgba(225,112,74,.16);
  box-shadow:0 4px 14px rgba(225,112,74,.25), inset 0 1px 0 rgba(255,255,255,.65);
  animation:likePop .38s var(--spring);
}
@keyframes likePop{
  0%{ transform:scale(1) }
  35%{ transform:scale(1.35) }
  60%{ transform:scale(.9) }
  100%{ transform:scale(1) }
}

/* 작은 버튼 */
.btn-sm{
  padding:6px 14px; border-radius:var(--radius-pill);
  font-size:.72rem; font-weight:700;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:0 2px 6px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  color:var(--text-sub);
  transition:transform .2s var(--spring);
}
.btn-sm:active{ transform:scale(.90) }
.btn-sm.danger{ color:var(--danger); border-color:rgba(220,75,62,.35) }

/* ================================================================
   댓글
   ================================================================ */
.comment-item{ display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-soft) }
.comment-item:last-child{ border-bottom:none }
.comment-item .avatar{ width:30px; height:30px; font-size:.64rem }
.comment-item .c-body{ flex:1 }
.comment-item .c-body strong{ font-size:.74rem; display:block; margin-bottom:3px; color:var(--text) }
.comment-item .c-body p{ font-size:.8rem; color:var(--text-sub); line-height:1.5 }
.comment-form{ display:flex; gap:8px; margin-top:13px }
.comment-form input{
  flex:1; padding:12px 18px; border-radius:var(--radius-pill);
  font-size:.84rem; color:var(--text);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:0 2px 8px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  outline:none; transition:border-color .18s, box-shadow .18s;
}
.comment-form input::placeholder{ color:var(--text-dim) }
.comment-form input:focus{
  border-color:rgba(29,127,174,.45);
  box-shadow:0 0 0 3px rgba(29,127,174,.14), inset 0 1px 0 rgba(255,255,255,.65);
}
.comment-form button{
  width:44px; height:44px; border-radius:var(--radius-pill); color:#fff; flex:0 0 auto;
  background: var(--glass-orange-bg);
  border:1px solid rgba(29,127,174,.40);
  box-shadow:0 4px 14px rgba(29,127,174,.40), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .22s var(--spring);
}
.comment-form button:active{ transform:scale(.88) }

/* ================================================================
   예매 완료
   ================================================================ */
.success-view{ text-align:center; padding:24px 8px 8px }
.success-icon{
  width:78px; height:78px; border-radius:50%; margin:0 auto 16px;
  display:grid; place-items:center; font-size:1.8rem; color:#fff;
  background:linear-gradient(135deg, var(--ok), var(--cwcf-sage-2));
  box-shadow:0 10px 28px rgba(63,169,122,.35);
  animation:pop .45s var(--spring);
}
@keyframes pop{ from{transform:scale(.3);opacity:0} to{transform:none;opacity:1} }
.success-view h3{ font-size:1.15rem; margin-bottom:7px; color:var(--text) }
.success-view p{ font-size:.82rem; color:var(--text-sub); line-height:1.6 }

/* ================================================================
   토스트 — Liquid Glass
   ================================================================ */
.toast{
  position:fixed;
  left:50%; bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  transform:translateX(-50%);
  z-index:300;
  padding:12px 22px; border-radius:var(--radius-pill);
  font-size:.82rem; font-weight:700; color:var(--text);
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(47,65,86,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    0 8px 28px rgba(47,65,86,.20);
  white-space:nowrap; max-width:90vw; text-align:center;
  animation:toastIn .3s var(--spring);
}
@keyframes toastIn{
  from{ opacity:0; transform:translateX(-50%) translateY(14px) scale(.92) }
  to  { opacity:1; transform:translateX(-50%) scale(1) }
}

/* ================================================================
   빈 상태 & 스켈레톤
   ================================================================ */
.empty-state{ text-align:center; padding:52px 20px; color:var(--text-dim) }
.empty-state i{ font-size:2.2rem; margin-bottom:12px; opacity:.4; display:block }
.empty-state p{ font-size:.84rem; line-height:1.6 }

.skeleton{
  border-radius:var(--radius-md);
  background:linear-gradient(110deg,
    rgba(47,65,86,.05) 30%,
    rgba(47,65,86,.12) 50%,
    rgba(47,65,86,.05) 70%);
  background-size:200% 100%;
  animation:shine 1.4s infinite;
}
@keyframes shine{ to{ background-position:-200% 0 } }

/* ================================================================
   폼
   ================================================================ */
.form-field{ margin-bottom:12px; }
.form-field label{ display:block; font-size:.72rem; font-weight:700; color:var(--text-sub); margin-bottom:6px; }
.form-field input[type=text],
.form-field input[type=password],
.form-field textarea,
.form-field select{
  width:100%; padding:13px 16px; border-radius:var(--radius-md);
  font-size:.9rem; color:var(--text);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:0 2px 8px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  outline:none; transition:border-color .18s, box-shadow .18s;
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--text-dim) }
.form-field input:focus,
.form-field textarea:focus{
  border-color:rgba(29,127,174,.50);
  box-shadow:0 0 0 4px rgba(29,127,174,.14), inset 0 1px 0 rgba(255,255,255,.65);
}
.form-field textarea{ min-height:108px; resize:vertical; line-height:1.55 }
.form-field select{ appearance:none; -webkit-appearance:none }
.rating-input{ display:flex; gap:8px; font-size:1.35rem; color:var(--line) }
.rating-input i{ cursor:pointer; transition:transform .14s }
.rating-input i.on{ color:var(--cwcf-orange); filter:drop-shadow(0 0 6px rgba(29,127,174,.45)) }
.rating-input i:active{ transform:scale(1.25) }

/* ================================================================
   오시는 길
   ================================================================ */
.map-wrap{
  width:100%; height:220px; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(47,65,86,.10); margin-bottom:12px;
  background:var(--bg-soft);
  box-shadow:0 4px 16px rgba(47,65,86,.14);
}
.map-links{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.map-link-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--radius-pill); font-size:.78rem; font-weight:700;
  text-decoration:none;
  transition:transform .22s var(--spring), box-shadow .18s;
  border:1.5px solid transparent;
}
.map-link-btn:hover{ transform:scale(1.05) }
.map-link-btn:active{ transform:scale(.94) }
.map-link-btn.kakao{ background:#FEE500; color:#3C1E1E; border-color:rgba(60,30,30,.12); box-shadow:0 3px 10px rgba(254,229,0,.30); }
.map-link-btn.naver{ background:#03C75A; color:#fff; box-shadow:0 3px 10px rgba(3,199,90,.30); }
.map-link-btn.google{ background:#4285F4; color:#fff; box-shadow:0 3px 10px rgba(66,133,244,.30); }

/* ================================================================
   좌석 배치도
   ================================================================ */
.seat-stage{
  background:linear-gradient(135deg, var(--cwcf-charcoal), #1F3038);
  color:#fff; text-align:center; padding:10px;
  border-radius:10px 10px 0 0; font-size:.78rem; font-weight:700;
  letter-spacing:.06em; margin-bottom:10px;
  box-shadow:0 4px 16px rgba(47,65,86,.25);
}
.seat-legend{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.seat-legend-item{ display:flex; align-items:center; gap:5px; font-size:.68rem; color:var(--text-sub); font-weight:600; }
.seat-legend-item i{ display:inline-block; width:12px; height:12px; border-radius:3px; }
.seat-map-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:8px; margin:0 -4px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.seat-grade-block{ margin-bottom:14px; }
.seat-grade-label{ font-size:.72rem; font-weight:800; margin-bottom:6px; display:flex; align-items:center; gap:5px; letter-spacing:.03em; }
.seat-row{ display:flex; align-items:center; gap:4px; margin-bottom:3px; }
.seat-row-label{ font-size:.6rem; font-weight:700; color:var(--text-dim); width:14px; text-align:right; flex-shrink:0; }
.seat-row-seats{ display:flex; gap:3px; flex-wrap:nowrap; }
.seat{
  width:14px; height:14px; border-radius:3px 3px 4px 4px;
  --sc: #7C8896;
  border:1.5px solid var(--sc-border, rgba(124,136,150,.45));
  background:var(--sc-bg, rgba(124,136,150,.14));
  cursor:pointer; flex-shrink:0;
  transition:transform .12s ease, background .12s;
}
.seat:hover:not(.blocked):not(.selected){ background:var(--sc-hover, rgba(124,136,150,.28)); transform:scale(1.2); }
.seat.selected{ background:var(--cwcf-rose) !important; border-color:var(--cwcf-rose) !important; transform:scale(1.15); box-shadow:0 0 0 2px rgba(225,112,74,.35); }
.seat.blocked{ background:#D8DEE3 !important; border-color:#C3CBD3 !important; cursor:not-allowed; opacity:.65; }
.seat-selected-box{
  margin:12px 0 8px; padding:14px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:0 2px 8px rgba(47,65,86,.10);
  min-height:60px; display:flex; align-items:center;
}
.seat-sel-info{ display:flex; align-items:center; gap:8px; width:100%; flex-wrap:wrap }
.seat-sel-chip{
  font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:var(--radius-pill);
  border:1.5px solid transparent;
}

/* ================================================================
   아바타
   ================================================================ */
.avatar{
  border-radius:50%; display:grid; place-items:center;
  font-weight:800; color:#fff; flex-shrink:0;
}

/* ================================================================
   로그인 오버레이 — Liquid Glass (현재 미사용, 라이트 테마로 색상 동기화)
   ================================================================ */
#login-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(120% 60% at 80% 0%,   rgba(29,127,174,.16), transparent 50%),
    radial-gradient(80%  55% at 5%  100%,  rgba(225,112,74,.14), transparent 50%),
    radial-gradient(70%  50% at 55% 55%,   rgba(61,151,216,.10), transparent 65%),
    linear-gradient(160deg, #FFFFFF 0%, #F8F4EE 40%, #F1E9DB 100%);
}
#login-canvas{ position:absolute; inset:0; pointer-events:none; }
.login-card{
  position:relative; z-index:2;
  width:min(390px, calc(100vw - 32px));
  padding:36px 32px 28px;
  border-radius:30px;
  background:rgba(255,255,255,0.78);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(47,65,86,0.10);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.75),
    0 24px 60px rgba(47,65,86,.20),
    0 0 0 1px rgba(47,65,86,.05);
  animation:cardIn .5s var(--spring) both;
}
.login-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(70% 40% at 50% -6%, rgba(255,255,255,.55), transparent 60%);
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(28px) scale(.94) }
  to  { opacity:1; transform:none }
}
.login-logo{ display:flex; align-items:center; gap:14px; margin-bottom:24px; min-height:56px; }
.login-logo-img-wrap{ flex-shrink:0; display:flex; align-items:center; justify-content:center; max-width:100%; }
.login-brand-logo{ height:52px; width:auto; max-width:200px; object-fit:contain; display:block; }
.login-logo-img{ height:38px; width:auto; object-fit:contain; display:block; }
.login-logo-mark{
  width:52px; height:52px; border-radius:var(--radius-pill); flex-shrink:0;
  display:grid; place-items:center;
  background: var(--glass-orange-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(29,127,174,.40);
  box-shadow:0 6px 20px rgba(29,127,174,.35), inset 0 1.5px 0 rgba(255,255,255,.22);
  font-size:1.4rem; color:#fff;
  animation:keyPulse 3s ease-in-out infinite;
}
@keyframes keyPulse{
  0%,100%{ box-shadow:0 6px 20px rgba(29,127,174,.35), inset 0 1.5px 0 rgba(255,255,255,.22) }
  50%    { box-shadow:0 8px 28px rgba(29,127,174,.55), inset 0 1.5px 0 rgba(255,255,255,.22), 0 0 0 10px rgba(29,127,174,.12) }
}
.login-logo-mark.admin-mode{
  background:linear-gradient(135deg, var(--cwcf-rose), var(--cwcf-gold-2));
  box-shadow:0 6px 18px rgba(225,112,74,.35), inset 0 1.5px 0 rgba(255,255,255,.22);
  animation:keyPulseAdmin 3s ease-in-out infinite;
}
@keyframes keyPulseAdmin{
  0%,100%{ box-shadow:0 6px 18px rgba(225,112,74,.35), inset 0 1.5px 0 rgba(255,255,255,.22) }
  50%    { box-shadow:0 8px 26px rgba(225,112,74,.55), inset 0 1.5px 0 rgba(255,255,255,.22), 0 0 0 10px rgba(225,112,74,.12) }
}
.login-logo-text{ display:flex; flex-direction:column; line-height:1.2 }
.login-logo-text strong{ font-size:1.1rem; font-weight:800; color:var(--text); }
.login-logo-text span{ font-size:.72rem; color:var(--text-sub); font-weight:500 }

/* 모드 탭 */
.login-type-row{
  display:flex; gap:6px; margin-bottom:20px;
  padding:5px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(47,65,86,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.login-type-btn{
  flex:1; padding:10px 8px; border-radius:11px;
  font-size:.8rem; font-weight:700; color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; gap:7px;
  transition: transform .25s var(--spring), all .22s ease;
}
.login-type-btn:hover{ transform:scale(1.04) }
.login-type-btn i{ font-size:.88rem }
.login-type-btn.active{
  color:#fff;
  background: var(--glass-orange-bg);
  border:1px solid rgba(29,127,174,.40);
  box-shadow:0 4px 14px rgba(29,127,174,.35), inset 0 1px 0 rgba(255,255,255,.22);
}
.login-type-btn.active.admin{
  background:linear-gradient(135deg, var(--cwcf-rose), var(--cwcf-gold-2));
  box-shadow:0 4px 14px rgba(225,112,74,.35), inset 0 1px 0 rgba(255,255,255,.22);
}

/* 입력 필드 */
.login-form{ display:flex; flex-direction:column; gap:11px }
.login-field{
  position:relative; display:flex; align-items:center;
  padding:0 14px; border-radius:var(--radius-pill); gap:10px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1.5px solid rgba(47,65,86,.10);
  box-shadow:0 2px 8px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.65);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.login-field:focus-within{
  border-color:rgba(29,127,174,.50);
  box-shadow:0 0 0 4px rgba(29,127,174,.14), inset 0 1px 0 rgba(255,255,255,.65);
  background:rgba(255,255,255,.85);
}
.login-field.admin-focus:focus-within{
  border-color:rgba(225,112,74,.45);
  box-shadow:0 0 0 4px rgba(225,112,74,.14), inset 0 1px 0 rgba(255,255,255,.65);
}
.login-field > i{ font-size:.88rem; color:var(--text-dim); flex-shrink:0; transition:color .18s }
.login-field:focus-within > i{ color:var(--cwcf-orange) }
.login-field.admin-focus:focus-within > i{ color:var(--cwcf-rose-2) }
.login-field input{
  flex:1; background:none; border:none; outline:none;
  font-size:.94rem; color:var(--text); padding:14px 0; min-width:0;
}
.login-field input::placeholder{ color:var(--text-dim) }
.pw-toggle{ color:var(--text-dim); font-size:.88rem; padding:4px; transition:color .18s }
.pw-toggle:hover{ color:var(--cwcf-orange) }

.login-hint{ font-size:.74rem; color:var(--danger); min-height:17px; padding-left:4px; animation:hintShake .3s ease; }
@keyframes hintShake{ 0%,100%{transform:none} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* 제출 버튼 — 주요 CTA Liquid Glass */
.login-submit{
  width:100%; padding:16px; border-radius:var(--radius-pill); margin-top:4px;
  font-size:.98rem; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background: var(--glass-orange-bg);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(29,127,174,.40);
  box-shadow:
    0 10px 28px rgba(29,127,174,.35),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform .28s var(--spring), box-shadow .18s ease;
  position:relative; overflow:hidden;
}
.login-submit::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transform:translateX(-100%);
}
.login-submit:not(:disabled):hover{
  transform:scale(1.04);
  box-shadow:0 14px 36px rgba(29,127,174,.45), inset 0 1px 0 rgba(255,255,255,.20);
}
.login-submit:not(:disabled):hover::after{ animation:shimmer .65s ease forwards }
@keyframes shimmer{ to{ transform:translateX(100%) } }
.login-submit:active{ transform:scale(.96); box-shadow:none }
.login-submit:disabled{ opacity:.5; pointer-events:none }
.login-submit i{ font-size:.98rem; transition:transform .4s var(--spring) }
.login-submit:active i{ transform:rotate(-28deg) scale(1.2) }
.login-submit.admin-btn{
  background:linear-gradient(135deg, rgba(225,112,74,.88), rgba(201,169,124,.85));
  box-shadow:0 10px 26px rgba(225,112,74,.35), inset 0 1px 0 rgba(255,255,255,.20);
}

/* 데모 안내 */
.login-demo{
  margin-top:18px; text-align:center;
  font-size:.7rem; color:var(--text-dim);
  padding-top:14px; border-top:1px solid rgba(47,65,86,.08);
}
.login-demo code{
  background:rgba(47,65,86,.06); border:1px solid rgba(47,65,86,.10);
  padding:2px 8px; border-radius:6px;
  font-family:'SF Mono','Fira Code',monospace;
  font-size:.7rem; color:var(--cwcf-orange);
}

/* 오버레이 아웃 */
.login-overlay.hiding{ animation:overlayOut .42s cubic-bezier(.7,0,.3,1) both; }
@keyframes overlayOut{
  from{ opacity:1; transform:none }
  to  { opacity:0; transform:scale(1.04) }
}

/* ================================================================
   데스크톱 프레임
   ================================================================ */
@media(min-width:520px){
  body{
    background:
      radial-gradient(80% 60% at 50% 30%, rgba(29,127,174,.10), transparent 70%),
      radial-gradient(60% 50% at 20% 80%, rgba(225,112,74,.08), transparent 60%),
      linear-gradient(160deg, #F8F4EE, #F1E9DB);
  }
  #app-frame{
    height:min(920px, 96dvh);
    margin-top:max(2dvh, 12px);
    border-radius:36px;
    border:1px solid rgba(47,65,86,.10);
    box-shadow:
      0 32px 80px rgba(47,65,86,.22),
      0 0 0 1px rgba(255,255,255,.50),
      inset 0 1px 0 rgba(255,255,255,.60);
  }
  .sheet-backdrop{ max-width:480px; left:50%; transform:translateX(-50%); right:auto; width:100% }
}

/* ================================================================
   접근성 — prefers-reduced-transparency
   ================================================================ */
@media (prefers-reduced-transparency: reduce) {
  .tab-glass,
  #app-header,
  .bottom-sheet,
  .filter-row,
  .chat-input-area,
  .login-card {
    background: rgba(255,255,255,0.97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .icon-btn, .filter-chip, .btn-primary, .btn-ghost,
  .login-submit, .chat-send-btn, .glass-bar, .glass-chip {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  #tab-indicator{
    background: var(--cwcf-orange) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ================================================================
   접근성 — prefers-reduced-motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}