@charset "utf-8";
/* ============================================================================
   market 테마 보정 레이어 — 미리보기 전용 (refresh.css)

   ?css=refresh 로 켜고 ?css=off 로 끈다. 켜지 않은 방문자에게는 로드되지 않는다.

   ── 이 파일이 지키는 규칙 ────────────────────────────────────────────
   1) 요소의 '차지하는 크기'를 바꾸지 않는다.
      width / height / padding / margin / border-width / font-size / box-sizing
      은 건드리지 않는다. 지난번 레이아웃이 깨진 원인이 전부 이 항목이었다.
      바꾸는 것은 색, 모서리, 그림자, 전환 등 크기와 무관한 속성뿐이다.
   2) 브랜드 레드(#f54947)의 색상값을 바꾸지 않는다.
      버튼 hover 는 색을 갈아끼우지 않고 filter:brightness 로 같은 색을 어둡게만 한다.
   3) 반응형은 max-width 로 상한만 낮춘다. 원래 폭보다 넓은 화면에서는
      계산 결과가 원본과 동일하다.
   ========================================================================== */

:root { --hs-brand: #f54947; }

/* ---------------------------------------------------------------------------
   1. 표 — 게시판·주문내역·장바구니에서 바로 보인다
   ------------------------------------------------------------------------- */

.tbl_head01 thead th,
.tbl_head02 thead th {
    background-color: #f6f7f9;
    border-top-color: #e3e4e8;
    border-bottom-color: #d8dade;
    color: #33343a;
}

.tbl_head01 tbody tr:nth-child(even) > td,
.tbl_head02 tbody tr:nth-child(even) > td {
    background-color: #fafafb;
}

.tbl_head01 tbody tr:hover > td,
.tbl_head02 tbody tr:hover > td {
    background-color: #f0f3f8;
}

.tbl_head01 td, .tbl_head01 th,
.tbl_head02 td, .tbl_head02 th,
.tbl_frm01 td, .tbl_frm01 th {
    border-color: #ebecef;
}

/* ---------------------------------------------------------------------------
   2. 버튼 — 색상값은 그대로 두고 모서리·그림자·반응만 준다
   ------------------------------------------------------------------------- */

.btn_b01, .btn_b02, .btn_b03, .btn_b04,
.btn_submit, .btn_cancel, .btn_frmline, .btn_close,
a.btn_b01, a.btn_b02, a.btn_b03, a.btn_b04,
input[type="submit"], button[type="submit"] {
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(16, 18, 24, .10);
    transition: filter .15s ease, box-shadow .15s ease, transform .08s ease;
}

.btn_b01:hover, .btn_b02:hover, .btn_b03:hover, .btn_b04:hover,
.btn_submit:hover, .btn_cancel:hover, .btn_frmline:hover,
a.btn_b01:hover, a.btn_b02:hover, a.btn_b03:hover, a.btn_b04:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
    /* 색을 바꾸지 않고 같은 색을 어둡게만 한다 → 빨강 톤이 그대로 유지된다 */
    filter: brightness(.93);
    box-shadow: 0 3px 8px rgba(16, 18, 24, .16);
}

.btn_b01:active, .btn_b02:active, .btn_b03:active, .btn_b04:active,
.btn_submit:active, .btn_cancel:active,
input[type="submit"]:active, button[type="submit"]:active {
    filter: brightness(.88);
    box-shadow: 0 1px 1px rgba(16, 18, 24, .12);
}

/* 비활성 버튼이 활성과 똑같이 보이던 것 */
button[disabled], input[type="submit"][disabled], .btn[disabled] {
    filter: grayscale(.5) opacity(.55);
    box-shadow: none;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   3. 입력창 — 테두리 두께는 그대로, 색과 모서리만
   ------------------------------------------------------------------------- */

input[type="text"], input[type="password"], input[type="number"],
input[type="tel"], input[type="email"], input[type="search"],
input[type="date"], select, textarea,
.frm_input, .frm_file {
    border-radius: 6px;
    border-color: #d9dade;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="tel"]:focus, input[type="email"]:focus, input[type="search"]:focus,
input[type="date"]:focus, select:focus, textarea:focus,
.frm_input:focus {
    border-color: var(--hs-brand);
    box-shadow: 0 0 0 3px rgba(245, 73, 71, .14);
}

/* 키보드 이동 시 현재 위치 표시. outline 은 박스 바깥에 그려져 레이아웃 영향이 없다. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--hs-brand);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   4. 잔손질 — 크기와 무관하면서 인상이 달라지는 것들
   ------------------------------------------------------------------------- */

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* 드래그 선택 색을 브랜드 레드 계열로 */
::selection { background: rgba(245, 73, 71, .18); }

/* 스크롤바 (WebKit 계열) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #f2f3f5; }
::-webkit-scrollbar-thumb { background: #c8c9d0; border-radius: 8px; border: 2px solid #f2f3f5; }
::-webkit-scrollbar-thumb:hover { background: #a8a9b3; }

/* 상품 목록 썸네일에 살짝 반응 — 크기는 그대로, 그림자만 */
.sct_li, .sct_wrap li, .it_pic {
    transition: box-shadow .18s ease;
}
.sct_li:hover, .sct_wrap li:hover {
    box-shadow: 0 4px 14px rgba(16, 18, 24, .10);
}

/* 페이지 번호 */
.pg_page, .pg_current { border-radius: 6px; }
.pg_page:hover { background-color: #f0f3f8; }

/* ---------------------------------------------------------------------------
   5. 반응형 — 창이 좁아질 때만 작동한다
      width 를 강제하지 않고 max-width 로 상한만 낮춘다.
   ------------------------------------------------------------------------- */

@media (max-width: 1260px) {
    /* 이 min-width 때문에 창을 줄여도 페이지가 안 좁아지고 가로 스크롤만 생겼다 */
    #hd, #wrapper, #ft { min-width: 0; }

    #hd_pop, #hd_wr, #ft_wr .ft_ul, .ft_info,
    .main2 .sct_wrap, .sale_prd, #wrapper_title .wt {
        max-width: 100%;
    }

    img { max-width: 100%; height: auto; }
    .tbl_wrap, .tbl_head01, .tbl_frm01 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 1040px) {
    #container, #container_bottom, #idx_container .gall,
    #cnt_title span, #hd_sch .sch_ipt {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    /* 본문 + 사이드바 2단 → 1단 */
    .aricle_left, .aside_right {
        float: none; width: auto; max-width: 100%; border-right: 0;
    }
    .aricle_left { padding-right: 0; }
    #smb_my_list { float: none; width: auto; max-width: 100%; }
    #gnb_all .gnb_al_li { min-width: 33.333%; }
}

@media (max-width: 640px) {
    #gnb_all .gnb_al_li { min-width: 50%; }
}

/* ---------------------------------------------------------------------------
   6. 모바일 — 누르기 편한 최소 크기만 (높이를 강제로 늘리지는 않는다)
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .btn_b01, .btn_b02, .btn_b03, .btn_b04, .btn_submit, .btn_cancel { min-height: 42px; }
    .pg_page, .pg_current { min-width: 34px; }
}