/* ============================================================
   캐럿 모바일 헤더 / 푸터
   mobile.css(그누보드 기본) 뒤에 로드해 덮어쓴다.
   PC 의 carat_header.css 와 같은 톤 — 라이트 배경 + 오렌지 액센트.

   주의: 드로어 JS(mobile/head.php)가 `.hd_opener` 바로 다음 형제 `.hd_div` 를
   찾으므로 DOM 순서는 건드리지 않는다. 배치는 flex order 로만 바꾼다.
   ============================================================ */

:root{
    --mhd-h:56px;
    --mhd-line:#ececf1;
    --mhd-fg:#191924;
    --mhd-muted:#6b7280;
    --mhd-brand:#ff7a1a;
    --mhd-brand-dark:#e5620a;
    --mhd-soft:#f6f6f9;
}

/* ─────────────────────────────────────────────
   헤더
   ───────────────────────────────────────────── */
#hd{
    /* 탭바(carat_app_m.css 1200)보다 위 — 드로어·딤이 #hd 스택 컨텍스트 안에서 그려지므로
       여기가 낮으면 드로어가 하단 탭바에 가린다 */
    position:sticky; top:0; z-index:1250;
    background:none;
    border-bottom:1px solid var(--mhd-line);
    box-shadow:none;
}
/* 반투명+블러 배경은 가상요소로 분리.
   #hd 자체에 backdrop-filter 를 주면 fixed 드로어(#gnb/#user_menu/#hd_dim)의
   포지셔닝 기준이 뷰포트가 아닌 #hd(56px 박스)가 되어 메뉴가 헤더 안에 갇힌다 */
#hd::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    backdrop-filter:saturate(180%) blur(10px);
}
#hd *{ box-sizing:border-box; }
#hd_h1{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

#hd_wrapper{
    display:flex; align-items:center; gap:4px;
    height:var(--mhd-h); padding:0 12px; position:relative;
    background:none; border:0;
}

/* 로고 — 기본 m_logo.png 는 어두운 배경용이라 워드마크로 대체.
   mobile.css 의 height:60px 를 리셋해야 56px 헤더에서 세로 중앙 정렬된다 */
#logo{
    order:1; margin-right:auto; padding:0; float:none; text-align:left;
    height:auto; display:flex; align-items:center;
}
#logo a{
    display:flex; align-items:baseline; gap:2px;
    font-size:18px; font-weight:800; letter-spacing:-.03em;
    color:var(--mhd-fg); text-decoration:none;
}
#logo a i{
    width:5px; height:5px; border-radius:50%;
    background:var(--mhd-brand); display:inline-block;
}

/* 상단 아이콘 버튼 — 메뉴가 오른쪽 끝.
   기본 button UA 스타일/포커스 아웃라인을 지워 '박스'가 안 생기게 한다.
   (탭 후 남는 포커스 링이 아이콘을 네모로 가두는 현상 방지) */
#hd .hd_opener{
    order:2; position:static; float:none;
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; padding:0; margin:0;
    -webkit-appearance:none; appearance:none;
    border:0; border-radius:10px; box-shadow:none; outline:0;
    background:none; color:#55565f; font-size:17px; line-height:1; cursor:pointer;
}
#hd .hd_opener:focus{ outline:0; }
/* 키보드 사용자만 접근성 포커스 링을 보인다 (터치/마우스는 안 보임) */
#hd .hd_opener:focus-visible{ outline:2px solid var(--mhd-brand); outline-offset:2px; }
#hd .hd_opener:active{ background:var(--mhd-soft); }
#hd #gnb_open{ order:3; }

/* ── 드로어 공통 ── */
#hd .hd_div{
    display:none; position:fixed; top:0; right:0; bottom:0; left:auto;
    width:86%; max-width:340px; height:100%;
    margin:0; padding:18px 18px 30px;
    background:#fff; border:0; border-left:1px solid var(--mhd-line);
    box-shadow:-12px 0 34px rgba(17,17,26,.12);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    z-index:1000;
}
#hd .hd_closer{
    position:absolute; top:14px; right:14px;
    width:34px; height:34px; padding:0;
    border:1px solid var(--mhd-line); border-radius:9px;
    background:#fff; color:#9ca3af; font-size:15px;
}

/* ── 메뉴 드로어 ── */
#gnb_1dul{ margin:34px 0 0; padding:0; list-style:none; border:0; }
#gnb .gnb_1dli{ border:0; margin:0 0 2px; position:relative; }
#gnb .gnb_1da{
    display:block; padding:12px 12px; border-radius:10px;
    font-size:15px; font-weight:600; color:#33343d; text-decoration:none;
    background:none; border:0;
}
#gnb .gnb_1da:active{ background:var(--mhd-soft); color:var(--mhd-brand-dark); }

#gnb .btn_gnb_op{
    position:absolute; top:4px; right:4px;
    width:40px; height:40px; padding:0;
    border:0; border-radius:9px; background:none; color:#9ca3af;
}
#gnb .btn_gnb_op:before{
    content:"\f107"; font-family:FontAwesome; font-size:15px; /* chevron-down */
}
#gnb .btn_gnb_op.btn_gnb_cl:before{ content:"\f106"; }       /* chevron-up */

#gnb .gnb_2dul{
    display:none; margin:2px 0 6px; padding:4px 0 4px 12px;
    list-style:none; border-left:2px solid #f0f0f4; background:none;
}
#gnb .gnb_2dli{ border:0; }
#gnb .gnb_2da{
    display:block; padding:10px 10px; border-radius:8px;
    font-size:14px; color:#6b7280; text-decoration:none; background:none;
}
#gnb .gnb_2da span{ display:none; }
#gnb .gnb_2da:active{ background:var(--mhd-soft); color:var(--mhd-brand-dark); }

#gnb_empty{ font-size:14px; color:var(--mhd-muted); padding:10px 4px; line-height:1.7; }

/* 드로어 안 로그인 박스(outlogin) — 기본 스킨의 어두운 배경을 라이트 톤으로 재정의 */
#gnb .ol{ margin:34px 0 6px; padding:0; border:0; }
/* 로그인 전: 로그인/회원가입 버튼 2개 나란히 */
#gnb #ol_before{ background:none; padding:0; display:flex; gap:8px; }
#gnb #ol_before a{
    flex:1 1 0; display:inline-flex; align-items:center; justify-content:center;
    height:42px; padding:0; border-radius:11px;
    font-size:14px; font-weight:700; text-decoration:none;
}
#gnb #ol_before .btn_b01{ background:var(--mhd-brand); color:#fff; }
#gnb #ol_before .btn_b02{ background:var(--mhd-soft); color:#33343d; border:1px solid var(--mhd-line); }
/* 로그인 후: 프로필 헤더도 라이트 톤 */
#gnb #ol_after_hd{ background:var(--mhd-soft); border-radius:12px; padding:10px 12px; }
#gnb #ol_after_hd strong{ color:var(--mhd-fg); }
#gnb #ol_after_info{ background:var(--mhd-soft); }
#gnb #ol_after_info i{ color:#6b7280; }
#gnb #ol_after_private{ border:0; margin-top:8px; }
#gnb #ol_after_private li{ border-color:var(--mhd-line); }

/* 드로어 하단 보조 링크 */
#hd_nb{
    display:grid; grid-template-columns:1fr 1fr; gap:6px;
    margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--mhd-line);
    list-style:none;
}
#hd_nb li{ float:none; width:auto; border:0; }
#hd_nb li a{
    display:flex; align-items:center; gap:7px;
    padding:10px; border-radius:9px; background:var(--mhd-soft);
    font-size:13px; font-weight:600; color:#55565f; text-decoration:none;
}
#hd_nb li a i{ color:#9ca3af; font-size:13px; }
#hd_nb li a span{ color:var(--mhd-brand-dark); font-weight:700; }

/* ── 검색 드로어 ── */
#user_menu #hd_sch{ margin:34px 0 0; padding:0; background:none; border:0; }
#user_menu #hd_sch h2{
    font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:#9ca3af; margin:0 0 12px; padding:0; border:0; position:static;
    width:auto; height:auto; overflow:visible; clip:auto;
}
#user_menu #hd_sch form{ position:relative; }
#user_menu #sch_stx{
    width:100%; height:44px; padding:0 44px 0 14px;
    border:1px solid transparent; border-radius:22px;
    background:var(--mhd-soft); font-size:15px; color:var(--mhd-fg);
}
#user_menu #sch_stx:focus{
    outline:none; background:#fff;
    border-color:var(--mhd-brand); box-shadow:0 0 0 3px rgba(255,122,26,.14);
}
#user_menu #sch_submit{
    position:absolute; right:5px; top:5px;
    width:34px; height:34px; padding:0;
    border:0; border-radius:50%; background:none;
    color:#9ca3af; font-size:15px;
}

/* 드로어 뒤 딤 — 눌러서 닫는다 (mobile/head.php 의 JS 가 토글) */
#hd_dim{
    display:none; position:fixed; inset:0; z-index:999;
    background:rgba(17,17,26,.28);
}

/* ─────────────────────────────────────────────
   푸터
   ───────────────────────────────────────────── */
#ft{
    background:#fbfbfd; border-top:1px solid var(--mhd-line);
    margin:40px 0 0; padding:26px 18px 34px;
    text-align:left; color:#8b8c96;
}
#ft *{ box-sizing:border-box; }

#ft_copy{
    margin:0; padding:0; border:0; background:none;
    font-size:12px; color:#9ca3af; line-height:1.7;
}
#ft_company{
    display:flex; flex-wrap:wrap; gap:8px 14px;
    margin:0 0 14px; padding:0;
}
#ft_company a{
    font-size:13px; font-weight:600; color:#55565f; text-decoration:none;
}

#ft .ft_cnt{ margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--mhd-line); }
#ft .ft_cnt h2{
    font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:#9ca3af; margin:0 0 10px; padding:0; border:0;
    position:static; width:auto; height:auto; overflow:visible; clip:auto;
}
#ft .ft_info{ font-size:12px; line-height:1.9; color:#8b8c96; margin:0; }
#ft .ft_info b{ color:#55565f; font-weight:600; }

#device_change{
    display:inline-block; margin:18px 0 0; padding:9px 14px;
    border:1px solid var(--mhd-line); border-radius:9px;
    background:#fff; font-size:13px; color:#55565f; text-decoration:none;
}

#top_btn{
    position:fixed; right:14px; bottom:14px; z-index:800;
    width:42px; height:42px; padding:0;
    border:1px solid var(--mhd-line); border-radius:50%;
    background:#fff; color:#55565f; font-size:15px;
    box-shadow:0 4px 14px rgba(17,17,26,.12);
    opacity:0; visibility:hidden; transition:opacity .18s, visibility .18s;
}
#top_btn.is-on{ opacity:1; visibility:visible; }