/* ============================================================
   공통 어드민바 컴포넌트 (전 게시판 리스트·보기 공통 · ap_story 기준)
   - 마크업: skin/board/_adminbar/{list,view}.inc.php
   - 로드:   각 보드 스킨에서 add_stylesheet 로 이 파일 링크
   - 이탈:   common.js initApmediaAdminbarFloat 가 body 로 이동(ScrollSmoother 회피)
   - 스킨 분리 준수: 전역 CSS 아닌 board 스킨 영역에 둔다
   ============================================================ */
:root {
    --ab-bg: rgba(14, 14, 16, 0.55);
    --ab-blur: 18px;
    --ab-ink: rgba(255, 255, 255, 0.72);
    --ab-ink-on: #ffffff;
    --ab-hover: rgba(255, 255, 255, 0.08);
    --ab-line: rgba(255, 255, 255, 0.16);
    --ab-red: #ad151a;
    --ab-shadowbox: 0 10px 30px rgba(0, 0, 0, 0.35);
    --ab-t: 0.18s;
    --ab-pill: 999px;
    --ab-knob-r: 50%;
    --ab-hair: 1px;
    --ab-icon: 1.15rem;
    --ab-radius: 0.85rem;
    --ab-bottom: clamp(1rem, 2vw, 1.6rem);
    --ab-h: 4.25rem;                                     /* 어드민바 실측 높이(패딩·버튼 포함) — 하단 고정 요소 회피 계산용 */
    --ab-gap: clamp(0.3rem, 0.6vw, 0.4rem);
    --ab-pad: 0.5rem 0.7rem;
    --ab-btn-gap: clamp(0.15rem, 0.4vw, 0.25rem);
    --ab-btn-pad: 0.45rem 0.7rem;
    --ab-label-fz: 0.875rem;
    --ab-sep-h: 1.6rem;
    --ab-tog-gap: clamp(0.35rem, 0.7vw, 0.5rem);
    --ab-tog-pad: 0.35rem 0.55rem;
    --ab-sw-w: 2rem;
    --ab-sw-h: 1.1rem;
    --ab-knob: 0.8rem;
    --ab-knob-gap: clamp(0.12rem, 0.3vw, 0.18rem);
    --ab-knob-on: 0.95rem;
    --ab-mgn: 0.3rem;
}

.apmedia-adminbar {
    position: fixed;
    left: 50%;
    bottom: var(--ab-bottom);
    transform: translateX(-50%);
    z-index: 240;
    display: flex;
    align-items: center;
    gap: var(--ab-gap);
    padding: var(--ab-pad);
    background: var(--ab-bg);
    -webkit-backdrop-filter: blur(var(--ab-blur));
    backdrop-filter: blur(var(--ab-blur));
    border-radius: var(--ab-pill);
    box-shadow: var(--ab-shadowbox);
    font-family: inherit;
}

.apmedia-ab-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ab-btn-gap);
    padding: var(--ab-btn-pad);
    border: 0;
    border-radius: var(--ab-radius);
    background: transparent;
    color: var(--ab-ink);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--ab-t) ease, color var(--ab-t) ease;
}
.apmedia-ab-btn:hover,
.apmedia-ab-btn:focus-visible { background: var(--ab-hover); color: var(--ab-ink-on); }
.apmedia-ab-btn svg { width: var(--ab-icon); height: var(--ab-icon); display: block; }
.apmedia-ab-btn span { font-size: var(--ab-label-fz); font-weight: 600; }

/* ── 컴포넌트 자기방어 — 보드 래퍼 누수 차단 ─────────────────────────────
   common.js initApmediaAdminbarFloat(js/common.js:54-57)가 #bo_list 의 스코프 클래스
   (.apmedia-portfolio 등)를 어드민바 엘리먼트로 복사한다(ap_story --aps 토큰 유지 목적).
   부작용으로 .apmedia-portfolio{color/line-height/font-family}·a{color:inherit} 가
   어드민바에 상속·오버라이드된다. 컴포넌트가 자기 클래스만으로 되돌린다(래퍼명 비의존).
   자기중첩(.apmedia-adminbar.apmedia-adminbar = 0,2,0)으로 단일클래스 래퍼(0,1,0)를 특이도만으로 우위(강제선언 없이). */
.apmedia-adminbar.apmedia-adminbar {
    color: var(--ab-ink);
    font-family: "Pretendard Variable", "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}
/* 버튼·토글 텍스트 색/라인 확정 — .apmedia-portfolio a{color:inherit}(0,1,1) 대비 (0,2,x) 우위 */
.apmedia-adminbar .apmedia-ab-btn,
.apmedia-adminbar .apmedia-ab-toggle { color: var(--ab-ink); line-height: 1.15; }
.apmedia-adminbar .apmedia-ab-btn span,
.apmedia-adminbar .apmedia-ab-toggle span { font-size: var(--ab-label-fz); font-weight: 600; line-height: 1.15; letter-spacing: normal; }
/* 강조(새글)·위험(삭제) 자기 배경/색 확정 */
.apmedia-adminbar .apmedia-ab-new,
.apmedia-adminbar .apmedia-ab-new:hover,
.apmedia-adminbar .apmedia-ab-new:focus-visible,
.apmedia-adminbar .apmedia-ab-danger:hover,
.apmedia-adminbar .apmedia-ab-danger:focus-visible { background: var(--ab-red); color: var(--ab-ink-on); }
.apmedia-adminbar .apmedia-ab-new svg { color: var(--ab-ink-on); }

.apmedia-ab-sep {
    flex: 0 0 auto;
    width: var(--ab-hair);
    height: var(--ab-sep-h);
    background: var(--ab-line);
    margin-inline: var(--ab-mgn);
}

.apmedia-ab-toggle {
    display: inline-flex;
    gap: var(--ab-tog-gap);
    padding: var(--ab-tog-pad);
    color: var(--ab-ink);
    cursor: pointer;
}
.apmedia-ab-toggle span { font-size: var(--ab-label-fz); font-weight: 600; align-self: center; }
.apmedia-ab-toggle input {
    position: absolute;
    width: var(--ab-hair);
    height: var(--ab-hair);
    opacity: 0;
}
.apmedia-ab-switch {
    position: relative;
    display: block;
    align-self: center;
    width: var(--ab-sw-w);
    height: var(--ab-sw-h);
    background: var(--ab-hover);
    border-radius: var(--ab-pill);
    transition: background var(--ab-t) ease;
}
.apmedia-ab-switch::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--ab-knob-gap);
    width: var(--ab-knob);
    height: var(--ab-knob);
    border-radius: var(--ab-knob-r);
    background: var(--ab-ink-on);
    transform: translateY(-50%);
    transition: left var(--ab-t) ease;
}
.apmedia-ab-toggle input:checked + .apmedia-ab-switch { background: var(--ab-red); }
.apmedia-ab-toggle input:checked + .apmedia-ab-switch::after { left: calc(100% - var(--ab-knob-on)); }

/* ── 어드민바가 떠 있을 때 하단 고정 요소 회피 ──────────────────
   관리자 로그인 시 어드민바(높이 --ab-h)가 화면 하단을 차지한다.
   퀵버튼·쿠키배너·챗봇 CTA 가 그 위로 올라가 겹치지 않게 offset 을 준다. */
body:has(.apmedia-adminbar) {
    --ab-stack: calc(var(--ab-h, 4rem) + var(--ab-bottom, 1rem));
}
body:has(.apmedia-adminbar) .apmedia-quick { bottom: calc(var(--quick-menu-bottom) + var(--ab-stack)); }
/* 쿠키 배너는 어드민바 + 퀵버튼 둘 다 피해야 한다(퀵이 배너 우하단과 겹치는 위치) */
body:has(.apmedia-adminbar) .apmedia-main-hero-cta { bottom: calc(var(--hero-cta-bottom, 1.5rem) + var(--ab-stack)); }
/* 말풍선에는 bottom 을 주지 않는다. JS(syncBubblePosition)가 로봇 위치를 따라 top 을 계산해 주입하는데,
   top 과 bottom 이 동시에 걸리면 fixed 요소 높이가 「뷰포트 − top − bottom」으로 늘어난다
   (실측 782px — 내용 높이는 48px). 로봇이 이미 어드민바를 피하므로 말풍선은 따라 올라간다. */