/* ============================================================
   COMICINFO HEADER — style.css
   ============================================================ */

:root {
    --ink: #4285F4;
    --ink2: #1a6fe0;
    --ink3: #eef4ff;
    --ink-my: #385eaf ;
    --my-text: #1A1F36;
    --my-text-mid: #5C6B8A;
    --my-text-pale: #9AAAC4;
    --my-btn: #5B7EC9;
    --my-btn-hover: #385eaf;
    --logo: #333333;
    --red: #E02D14;
    --white: #ffffff;
    --gray: #f5f5f5;
    --gray2: #ebebeb;
    --line: #dddddd;
    --mid: #888888;
    --green: #34A853;
    --green2: #2d8a4e;
    --blue-pale: #EBF2FF;
    --red-pale: #FDECEA;
    --green-pale: #E8F5EC;
    --drawer-w: 280px;
    --topbar-h: 36px;
    --hdr-h: 70px;
}

.ci-header * { box-sizing: border-box; }
.ci-container { max-width: 1320px; margin: 0 auto; padding: 0 24px; width: 100%; }
@media (max-width: 768px) {
    .ci-container {padding: 0; }
}


/* ============================================================
   TOPBAR — fixed, 스크롤 시 위로 숨김
   ============================================================ */
.ci-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--ink);
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    z-index: 201;
    transition: transform 0.3s ease;
}
/* body에 이 클래스가 붙으면 topbar 숨김 */
body.ci-topbar-gone .ci-topbar {
    transform: translateY(-100%);
    pointer-events: none;
}

.ci-topbar .ci-container { display: flex; align-items: center; width: 100%; }
.ci-topbar-left { display: flex; gap: 16px; }
.ci-topbar-right { margin-left: auto; margin-right: 15px; display: flex; gap: 16px; align-items: center; line-height: 1; }
.ci-topbar-left a, .ci-topbar-right a { font-size: 11px; color: rgba(255,255,255,0.9); text-decoration: none; font-family: 'Noto Sans KR', sans-serif; transition: color 0.15s; }
.ci-topbar-left a:hover, .ci-topbar-right a:hover { color: #fff; }
.ci-topbar-divider { width: 1px; height: 11px; background: rgba(255,255,255,0.25); align-self: center; margin-top: 1px; }


/* LANG DROPDOWN */
.ci-lang-wrap { position: relative; }
.ci-lang-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,0.9); border-radius: 4px; transition: background 0.15s; font-family: 'Noto Sans KR', sans-serif; }
.ci-lang-btn:hover { background: rgba(255,255,255,0.12); }
.ci-lang-arrow { font-size: 9px; transition: transform 0.2s; }
.ci-lang-wrap.open .ci-lang-arrow { transform: rotate(180deg); }
.ci-lang-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); min-width: 110px; overflow: hidden; z-index: 400; }
.ci-lang-wrap.open .ci-lang-dropdown { display: block; animation: ci-lang-in 0.15s ease; }
@keyframes ci-lang-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ci-lang-dropdown a { display: flex; align-items: center; padding: 9px 14px; font-size: 12px; color: #333; text-decoration: none; transition: background 0.12s; font-family: 'Noto Sans KR', sans-serif; white-space: nowrap; }
.ci-lang-dropdown a:hover { background: var(--gray); color: var(--ink); }
.ci-lang-dropdown a.active { color: var(--ink); font-weight: 700; }


/* ============================================================
   MAIN HEADER — fixed, topbar 아래에 위치
   스크롤 후 ci-topbar-gone 클래스 붙으면 top:0 으로 이동
   ============================================================ */
.ci-hdr {
    background: var(--white);
    border-bottom: 2px solid var(--ink);
    position: fixed;
    top: var(--topbar-h); /* = 36px */
    left: 0; right: 0;
    z-index: 200;
    transition: top 0.3s ease;
}
body.ci-topbar-gone .ci-hdr {
    top: 0;
}

.ci-hdr .ci-container { display: flex; align-items: center; gap: 32px; height: var(--hdr-h); }
.ci-logo { font-family: 'Bebas Neue', 'Noto Sans KR', sans-serif; font-size: 28px; letter-spacing: 3px; color: var(--logo); line-height: 1; white-space: nowrap; text-decoration: none; display: flex; align-items: center; }
.ci-logo-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); margin-right: 5px; flex-shrink: 0; }


/* SEARCH */
.ci-hdr-search { flex: 1; max-width: 400px; position: relative; }
.ci-hdr-search input { width: 100%; height: 38px; border: 1.5px solid var(--line); border-radius: 20px; padding: 0 38px 0 14px; font-size: 13px; background: var(--gray); color: #111; outline: none; font-family: 'Noto Sans KR', sans-serif; transition: border-color 0.15s, box-shadow 0.15s; }
.ci-hdr-search input:focus { border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 3px rgba(66,133,244,0.12); }
.ci-hdr-search input::placeholder { color: var(--mid); }
.ci-hdr-search-icon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--mid); font-size: 14px; background: none; border: none; 
    cursor: pointer; padding: 0 14px; height: 38px; }


/* GNB */
.ci-hdr-nav { display: flex; gap: 0; }
.ci-hdr-nav a { font-size: 13px; font-weight: 500; color: var(--mid); padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; text-decoration: none; white-space: nowrap; font-family: 'Noto Sans KR', sans-serif; line-height: 54px; }
.ci-hdr-nav a:hover, .ci-hdr-nav a.active { color: var(--ink); border-bottom-color: var(--ink); }


/* RIGHT / MOBILE ACTIONS */
.ci-hdr-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ci-mobile-actions { display: none; margin-left: auto; align-items: center; gap: 4px; }


/* BUTTONS */
.ci-btn { padding: 7px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Noto Sans KR', sans-serif; letter-spacing: 0.2px; transition: all 0.2s ease; border: 1.5px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ci-btn-line { background: transparent; border-color: rgba(66,133,244,0.4); color: var(--ink); }
.ci-btn-line:hover { background: rgba(66,133,244,0.08); border-color: var(--ink); }
.ci-btn-fill { background: rgba(66,133,244,0.1); border-color: transparent; color: var(--ink); }
.ci-btn-fill:hover { background: rgba(66,133,244,0.18); }
.ci-btn-sell { background: linear-gradient(120deg, #6366f1, #4285F4, #06b6d4, #6366f1); background-size: 300%; color: #fff; border-color: transparent; animation: ci-holo 5s ease infinite; font-weight: 700; }
.ci-btn-sell:hover { box-shadow: 0 1px 5px rgba(99,102,241,0.35); transform: translateY(-1px); }
.ci-btn-sell-full { width: 100%; justify-content: center; border-radius: 10px; padding: 10px 16px; font-size: 13px; }
@keyframes ci-holo { 0%,100% { background-position: 0% } 50% { background-position: 100% } }


/* MOBILE SEARCH BAR */
.ci-mob-search-bar { display: none; overflow: hidden; max-height: 0; transition: max-height 0.28s ease, padding 0.28s ease; background: var(--white); border-top: 1px solid var(--line); }
.ci-mob-search-bar.open { max-height: 70px; padding: 10px 16px; }
.ci-mob-search-bar form { display: flex; align-items: center; gap: 8px; max-width: 600px; margin: 0 auto; }
.ci-mob-search-bar input { flex: 1; height: 38px; border: 1.5px solid var(--line); border-radius: 20px; padding: 0 14px; font-size: 14px; background: var(--gray); outline: none; font-family: 'Noto Sans KR', sans-serif; transition: border-color 0.15s; }
.ci-mob-search-bar input:focus { border-color: var(--ink); background: var(--white); }
.ci-mob-search-bar button { width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }


/* HAMBURGER */
.ci-hamburger { width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 4px; border-radius: 8px; transition: background 0.15s; }
.ci-hamburger:hover { background: var(--gray); }
.ci-hamburger span { display: block; width: 22px; height: 2px; background: #333; border-radius: 2px; transition: transform 0.28s ease, opacity 0.28s ease; transform-origin: center; }
.ci-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ci-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ci-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.ci-mob-search-btn { width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; font-size: 16px; color: #555; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background 0.15s; }
.ci-mob-search-btn:hover { background: var(--gray); }
.ci-drawer-footer a + a::before { content: '|'; margin-right: 12px; color: var(--line); }


/* DRAWER OVERLAY */
.ci-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 300; opacity: 0; transition: opacity 0.28s ease; }
.ci-drawer-overlay.open { display: block; opacity: 1; }


/* DRAWER PANEL */
.ci-drawer { position: fixed; top: 0; right: 0; width: var(--drawer-w); max-width: 85vw; height: 100%; background: var(--white); z-index: 310; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ci-drawer.open { transform: translateX(0); }
.ci-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 60px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.ci-drawer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px; color: var(--logo); display: flex; align-items: center; }
.ci-drawer-close { width: 36px; height: 36px; border: none; background: var(--gray); border-radius: 50%; cursor: pointer; font-size: 14px; color: #555; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.ci-drawer-close:hover { background: var(--line); }
.ci-drawer-user { padding: 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ci-drawer-user-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; font-family: 'Noto Sans KR', sans-serif; }
.ci-drawer-user-info i { font-size: 22px; color: var(--ink); }
.ci-drawer-user-btns { display: flex; gap: 8px; }
.ci-drawer-user-btns .ci-btn { flex: 1; justify-content: center; border-radius: 10px; }
.ci-drawer-nav { padding: 8px 0; border-bottom: 1px solid var(--line); }
.ci-drawer-nav-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mid); padding: 10px 16px 4px; font-family: 'Noto Sans KR', sans-serif; }
.ci-drawer-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; font-weight: 500; color: #333; text-decoration: none; font-family: 'Noto Sans KR', sans-serif; transition: background 0.12s, color 0.12s; position: relative; }
.ci-drawer-nav a:hover { background: var(--gray); color: var(--ink); }
.ci-drawer-nav a.active { color: var(--ink); background: rgba(66,133,244,0.06); }
.ci-drawer-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--gray); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--mid); flex-shrink: 0; transition: background 0.12s, color 0.12s; }
.ci-drawer-nav a:hover .ci-drawer-icon, .ci-drawer-nav a.active .ci-drawer-icon { background: rgba(66,133,244,0.12); color: var(--ink); }
.ci-badge-wip { margin-left: auto; font-size: 10px; font-weight: 700; background: #fff3cd; color: #856404; border: 1px solid #ffe69c; border-radius: 10px; padding: 2px 7px; letter-spacing: 0.3px; font-family: 'Noto Sans KR', sans-serif; }
.ci-drawer-footer { margin-top: auto; padding: 16px; display: flex; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.ci-drawer-footer a { font-size: 11px; color: var(--mid); text-decoration: none; font-family: 'Noto Sans KR', sans-serif; transition: color 0.15s; }
.ci-drawer-footer a:hover { color: var(--ink); }
.ci-drawer-lang { padding: 12px 16px; display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.ci-drawer-lang a { font-size: 11px; color: var(--mid); text-decoration: none; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line); transition: background 0.15s, color 0.15s; font-family: 'Noto Sans KR', sans-serif; }
.ci-drawer-lang a:hover { background: var(--gray); color: var(--ink); }


/* ============================================================
   BOTTOM NAV
   ============================================================ */
.ci-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--line); z-index: 190; align-items: stretch; box-shadow: 0 -2px 12px rgba(0,0,0,0.08); padding-bottom: env(safe-area-inset-bottom); height: calc(60px + env(safe-area-inset-bottom)); }
.ci-bnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--mid); font-family: 'Noto Sans KR', sans-serif; transition: color 0.15s; position: relative; padding-bottom: 2px; }
.ci-bnav-item.active, .ci-bnav-item:active { color: var(--ink); }
.ci-bnav-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--ink); border-radius: 0 0 2px 2px; }
.ci-bnav-icon { font-size: 18px; line-height: 1; }
.ci-bnav-label { font-size: 10px; font-weight: 500; }
.ci-bnav-center { color: var(--ink); }
.ci-bnav-center .ci-bnav-icon { width: 44px; height: 44px; background: var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; box-shadow: 0 2px 8px rgba(66,133,244,0.4); margin-bottom: 1px; margin-top: -10px; }


/* WIP MODAL */
.ci-wip-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 500; align-items: center; justify-content: center; }
.ci-wip-modal.open { display: flex; }
.ci-wip-box { background: var(--white); border-radius: 20px; padding: 36px 32px 28px; text-align: center; max-width: 300px; width: 90%; animation: ci-wip-in 0.25s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
@keyframes ci-wip-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
.ci-wip-icon { font-size: 42px; margin-bottom: 12px; }
.ci-wip-title { font-size: 18px; font-weight: 700; color: #222; margin: 0 0 6px; font-family: 'Noto Sans KR', sans-serif; }
.ci-wip-desc { font-size: 13px; color: var(--mid); margin: 0 0 20px; font-family: 'Noto Sans KR', sans-serif; }
.ci-wip-box button { width: 100%; padding: 11px; border: none; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'Noto Sans KR', sans-serif; transition: background 0.15s; }
.ci-wip-box button:hover { background: var(--ink2); }


/* ============================================================
   BODY PADDING — fixed 헤더 높이만큼 본문 밀어내기
   ============================================================ */
body {
    /* topbar(36) + hdr(70) = 106px, 스크롤 후엔 hdr(70)만 */
    padding-top: calc(var(--topbar-h) + var(--hdr-h)); /* 106px */
    transition: padding-top 0.3s ease;
}
body.ci-topbar-gone {
    padding-top: var(--hdr-h); /* 70px */
}


/* ============================================================
   RESPONSIVE ≤ 960px
   topbar는 데스크탑 전용이므로 모바일에서 숨기고
   hdr은 처음부터 top:0
   ============================================================ */
@media (max-width: 960px) {
    .ci-topbar { display: none; }
    .ci-hdr { top: 0 !important; }
    .ci-hdr-search { max-width: 260px; }
    .ci-hdr-nav { display: none; }
    .ci-hdr-right { display: none; }
    .ci-mobile-actions { display: flex; }
    body,
    body.ci-topbar-gone { padding-top: var(--hdr-h); /* 70px */ }
}

/* ============================================================
   RESPONSIVE ≤ 640px
   ============================================================ */

@media (max-width: 960px) {
    .ci-bottom-nav { display: flex; }
}

@media (max-width: 640px) {
    :root { --hdr-h: 60px; }
    .ci-hdr .ci-container { gap: 0; padding: 0 12px; }
    .ci-drawer-header { padding: 0 12px; height: 62px; }
    .ci-logo { font-size: 22px; letter-spacing: 2px; }
    .ci-hdr-search { display: none; }
    .ci-mob-search-bar { display: block; }
    /* .ci-bottom-nav { display: flex; } */
    body,
    body.ci-topbar-gone {
        padding-top: var(--hdr-h); /* 60px */
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}

/* ── 카테고리 바텀시트 모달 ── */
.ci-cat-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 1200;
    align-items: flex-end;
    /* padding-bottom: calc(60px + env(safe-area-inset-bottom)); */
    transition: background 0.25s ease;
}
.ci-cat-overlay.open {
    display: flex;
    background: rgba(0,0,0,0.45);
}
@media (min-width: 961px) {
    .ci-cat-overlay { display: none !important; }
}

.ci-cat-sheet {
    width: 100%;
    max-height: 75vh;
    background: #fff;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ci-cat-overlay.open .ci-cat-sheet {
    transform: translateY(0);
}

.ci-cat-handle {
    width: 40px; height: 4px;
    background: var(--line);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
}
.ci-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--line);
}
.ci-cat-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--logo);
    font-family: 'Noto Sans KR', sans-serif;
}
.ci-cat-close {
    width: 32px; height: 32px;
    background: var(--gray);
    border: none;
    border-radius: 50%;
    font-size: 13px;
    color: var(--mid);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.ci-cat-close:hover { background: var(--line); }

.ci-cat-body {
    overflow-y: auto;
    padding: 4px 20px 16px;
    -webkit-overflow-scrolling: touch;
}
.ci-cat-body .side-ttl {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--mid);
    margin-top: 16px;
    margin-bottom: 2px;
    text-transform: uppercase;
    background: var(--ink3);      
    margin-left: -20px;            
    margin-right: -20px;          
    padding: 6px 20px;              
}
.ci-cat-body .side-ttl:first-child { margin-top: 8px; }
.ci-cat-body .side-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}
.ci-cat-body .side-lbl {
    font-size: 14px;
    color: #444;
    font-family: 'Noto Sans KR', sans-serif;
}
.ci-cat-body .side-lbl.on {
    color: var(--ink);
    font-weight: 700;
}
.ci-cat-body .side-cnt {
    font-size: 11px;
    color: var(--mid);
}