/* ── 좌측 메뉴: 원본에 메뉴 이미지가 없는 항목(예: 은행나무)은 텍스트로 표시 ── */
.lm-text {
    display: block;
    width: 110px;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    font-size: 12px;
    color: #333;
    text-align: center;
    letter-spacing: -0.5px;
}
.lm-text.on { color: #fff; background: #213974; font-weight: bold; }

/* ── 상품상세 후기·문의 ── */
.pro-bbs td { font-size: 12px; color: #555; }
.pro-bbs tr[onclick]:hover { background: #F5F9FF; }
.pro-write td { font-size: 12px; color: #555; }
.pro-textarea {
    width: 98%;
    background-color: #fff;
    font-family: verdana, 돋움, sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: #686868;
    border: 1px solid #E5E5E5;
}

.cap-reload { font-size: 11px; color: #666; text-decoration: underline; margin-left: 6px; }
.qa-wait { color: #c00; }
.qa-answer {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #E0E6F0;
}

/* ──────────────────────────────────────────────────────────────
   상단 GNB 흔들림 수정
   page.css 의 `header *:hover { padding:0 }` (우선순위 0-1-1) 가
   `header > nav { padding-right:350px }` (0-0-2) 를 이겨서,
   메뉴에 마우스를 올리는 순간 nav 가 350px 줄어들며 메뉴가 옆으로 튀고
   → 커서가 벗어나 hover 해제 → 원위치 → 다시 hover … 가 반복돼 심하게 떨렸다.
   같은 값을 :hover 상태에도 명시해 우선순위를 되돌린다.
   ────────────────────────────────────────────────────────────── */
header > nav,
header > nav:hover { padding-right: 350px; }

/* 메뉴 박스·서브메뉴도 같은 리셋에 걸리지 않도록 hover 값을 못박아 둔다 */
header .menu_list,
header .menu_list:hover { padding: 6px; }
header .depth2,
header .depth2:hover { padding-top: 10px; }
header .depth2 > li > a,
header .depth2 > li > a:hover { padding: 0 7px; }
header .logo,
header .logo:hover { margin-left: 70px; }

/* ────────────────────────────────────────────────────────────────
   상단 메뉴 흔들림 수정
   page.css 의 리셋 규칙 `header *:hover { padding:0 }` (명시도 0-1-1) 이
   `header > nav { padding-right:350px }` (명시도 0-0-2) 를 이겨서,
   메뉴에 마우스를 올리면 nav 여백이 사라져 메뉴가 350px 튀고
   → 커서가 벗어나 hover 해제 → 되돌아옴 을 반복하며 떨렸다.
   hover 상태에도 같은 여백을 유지하도록 명시도를 올려 고정한다.
   ──────────────────────────────────────────────────────────────── */
header > nav,
header > nav:hover { padding-right: 350px; }
header > a.logo,
header > a.logo:hover { margin-left: 70px; }

/* ── 좌측 메뉴 서브 레이어 (원본 layer_view() 스크립트를 CSS 로 대체) ──
   레이어가 문서 흐름에 남으면 메뉴 간격이 벌어지고 가운데 정렬이 깨진다.  */
.lm-layer-anchor { position: relative; z-index: 10; }
.lm-layer {
    display: none;
    position: absolute;
    left: 110px;
    top: -35px;
    z-index: 999;
    text-align: left;
}
.lm-row:hover .lm-layer { display: block; }
.lm-layer .ctg_layer { font-size: 12px; color: #333; text-decoration: none; }
.lm-layer tr:hover { background: #F0F7FD; }
.lm-layer tr:hover .ctg_layer { color: #27448a; }

/* 인라인 이미지 사이의 공백 문자가 4px 씩 늘어나 메뉴 간격이 어긋나던 것을 잡는다
   (원본은 doctype 이 없어 quirks 모드라 이 공백이 생기지 않았다) */
.lm-box > tbody > tr > td { font-size: 0; line-height: 0; }
.lm-box img { display: block; }
.lm-box .lm-row > td > a { display: block; }
.lm-layer img { display: inline-block; }

/* ── 약관·안내 본문 ── */
.page-box { min-height: 340px; font-size: 12px; line-height: 1.8; color: #555; padding-right: 10px; overflow: auto; }
.page-box p { margin: 0 0 10px; }
.page-empty { padding: 120px 0; text-align: center; color: #888; line-height: 2; }
.sitemap-extra { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E0E0E0; font-size: 12px; }

/* ── 게시판 ── */
.bbs-head td { font-size: 12px; font-weight: bold; color: #444; letter-spacing: -0.5px; }
.bbs-head-sub { font-weight: normal; color: #888; }
.bbs-view th, .bbs-view td { font-size: 12px; color: #555; }
.bbs-view .bbs-label { background: #F7F7F7; font-weight: bold; text-align: center; color: #444; }
.bbs-content { min-height: 200px; padding: 15px 10px; font-size: 12px; line-height: 1.9; color: #555; word-break: break-all; }
.bbs-content img { max-width: 100%; height: auto; }
.bbs-files a { font-size: 12px; color: #27448a; }
.bbs-answer { margin-top: 14px; padding: 14px; background: #F7F9FD; border: 1px solid #DCE4F2; }
.bbs-btns { padding: 12px 0; text-align: center; }
.bbs-btns .right { float: right; }
.pass-box { font-size: 12px; color: #555; }
.pass-err { padding-top: 10px; color: #c00; }
.bbs-nav { padding-left: 10px; border-bottom: 1px solid #EEE; font-size: 12px; }
.bbs-nav a { color: #555; text-decoration: none; }
.bbs-nav a:hover { color: #27448a; text-decoration: underline; }

/* ── 상단 서브메뉴 개폐 ──
   원본은 hover 가 풀리는 즉시 display:none 이라, 서브메뉴가 가로로 길다 보니
   마우스를 옆으로 옮기다 옆 버튼 영역에 스치면 메뉴가 툭툭 끊겼다.
   버튼과 서브메뉴 사이 틈을 없애고(top:100%), 짧은 유예시간을 둬서
   커서가 잠깐 벗어나도 바로 닫히지 않게 한다. 모양은 원본 그대로.               */
header .menu_list > li > .depth2 {
    display: block;
    top: 100%;
    padding-top: 8px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s linear, visibility 0s linear .35s;
}
header .menu_list > li:hover > .depth2,
header .menu_list > li > .depth2:hover {
    visibility: visible;
    opacity: 1;
    transition: opacity .1s linear, visibility 0s linear 0s;
}

/* ── slick 기본 스킨의 화살표·로딩 이미지는 이 사이트에서 쓰지 않는다.
      (원본에도 폰트/gif 파일이 없어 404 만 발생시켰다. 화살표는 자체 이미지 사용) ── */
.slick-loading .slick-list { background-image: none; }
.slick-prev::before, .slick-next::before { content: ''; display: none; }

/* ── 회원 ── */
.login-box { font-size: 12px; }
.login-err { margin-bottom: 14px; color: #c00; font-size: 12px; }
.login-help { font-size: 12px; color: #666; }
.mem-form th, .mem-form td { font-size: 12px; color: #555; }
.mem-form .lbl { background: #F7F7F7; font-weight: bold; text-align: center; color: #444; width: 22%; }
.mem-form td { padding: 7px 10px; }
.mem-req { color: #c00; }
.mem-hint { color: #888; font-size: 11px; }
.mem-agree { height: 150px; overflow: auto; padding: 10px; border: 1px solid #DDD; background: #FAFAFA; font-size: 12px; line-height: 1.8; color: #666; }
.mem-btns { padding: 18px 0; text-align: center; }
.mem-empty { padding: 90px 0; text-align: center; color: #888; font-size: 12px; }
.join-end { font-size: 13px; line-height: 1.9; color: #555; }
.find-result { padding: 26px; background: #F7F9FD; border: 1px solid #DCE4F2; font-size: 13px; color: #333; text-align: center; }
.temp-pwd { font-family: Consolas, monospace; font-size: 16px; letter-spacing: 1px; color: #c00; }

/* ── 마이페이지 ── */
.my-tbl td { font-size: 12px; color: #555; }
.my-tbl tr[bgcolor="#F7F7F7"] td { font-weight: bold; color: #444; }
.my-flash { margin-bottom: 10px; padding: 10px 14px; background: #F0F7FD; border: 1px solid #CBDDF0; font-size: 12px; color: #27448a; }
.mile-sum { margin-bottom: 12px; padding: 14px; background: #F7F9FD; border: 1px solid #DCE4F2; font-size: 13px; color: #333; }
.mile-sum strong { color: #c00; font-size: 15px; }
.mile-plus { color: #1a7f37; }
.mile-minus { color: #c00; }
.tal-notice { padding: 16px 20px; background: #FFF9F9; border: 1px solid #F0D8D8; font-size: 12px; color: #666; line-height: 1.9; }
.tal-notice strong { display: block; margin-bottom: 8px; color: #c00; }
.tal-notice ul { margin: 0; padding-left: 18px; }

/* ── 장바구니·주문 ── */
.cart-sum td { font-size: 12px; color: #555; }
.cart-total { font-size: 16px; color: #c00; }
.order-sec { margin: 20px 0 8px; font-size: 13px; font-weight: bold; color: #333; }
.bank-list { padding: 10px 14px; background: #FAFAFA; border: 1px solid #E5E5E5; font-size: 12px; line-height: 1.9; color: #555; }
.order-done { padding: 26px; background: #F7F9FD; border: 1px solid #DCE4F2; font-size: 14px; line-height: 1.9; color: #333; text-align: center; }
.order-done strong { color: #c00; }

/* ==========================================================================
 * 프론트 버튼 — 공통 (이 파일 한 곳에서만 정의한다)
 *
 *  화면마다 pro-submit / m-btn / m-link 를 섞어 써서 같은 줄의 버튼끼리도
 *  높이·글자 크기·색이 달랐다. 아래 한 벌로 통일하고, 기존 클래스명은
 *  마크업을 고치지 않아도 되도록 여기서 함께 매핑한다.
 *
 *  크기 : sm 28px/12px · md 34px/13px(기본) · lg 42px/14px·최소너비 120px
 *  색   : primary(남색) · danger(빨강) · neutral(회색) · outline(흰바탕) · ghost(테두리만)
 * ========================================================================== */
.fbtn,
.pro-submit,
.mem-btns .m-btn, .mem-btns .m-btn-primary, .mem-btns .m-btn-cancel, .mem-btns .m-btn-danger,
a.m-btn, a.m-btn-primary, a.m-btn-cancel, a.m-btn-danger,
button.m-btn, button.m-btn-primary, button.m-btn-cancel, button.m-btn-danger,
input.m-btn, .m-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 34px;
    min-width: 88px;
    padding: 0 18px;
    margin: 0 3px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.3px;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #1c3478;
    border-radius: 3px;
    background: #213974;
    color: #fff !important;                 /* 진한 바탕이 기본 — 글자는 흰색 */
    transition: background-color .12s ease, border-color .12s ease;
}
.fbtn:hover,
.pro-submit:hover,
a.m-btn:hover, a.m-btn-primary:hover, button.m-btn:hover, button.m-btn-primary:hover,
input.m-btn:hover, .m-btn-sm:hover { background: #2c4a90; border-color: #24408a; }

/* 크기 변형 */
.fbtn.sm, .m-btn-sm, .m-btn.sm, .m-btn.xs { height: 28px; min-width: 62px; padding: 0 12px; font-size: 12px; }
.fbtn.lg { height: 42px; min-width: 120px; padding: 0 26px; font-size: 14px; }

/* 색 변형 — 흰바탕(outline/ghost/cancel) 은 글자를 진하게 되돌린다 */
.fbtn.outline, .fbtn.ghost, .m-btn.ghost,
a.m-btn-cancel, button.m-btn-cancel, .mem-btns .m-btn-cancel {
    background: #fff;
    border-color: #c3ccd8;
    color: #374151 !important;
}
.fbtn.outline:hover, .fbtn.ghost:hover, .m-btn.ghost:hover,
a.m-btn-cancel:hover, button.m-btn-cancel:hover { background: #f4f6fa; border-color: #9aa7b8; }

.fbtn.danger, a.m-btn-danger, button.m-btn-danger, .mem-btns .m-btn-danger {
    background: #c0392b; border-color: #a83226; color: #fff !important;
}
.fbtn.danger:hover, a.m-btn-danger:hover, button.m-btn-danger:hover { background: #a83226; }

.fbtn.neutral { background: #6b7280; border-color: #5b616b; color: #fff !important; }
.fbtn.neutral:hover { background: #5b616b; }

/* 버튼이 이미지(gif)인 자리는 크기 규칙을 적용하지 않는다 */
a > img { vertical-align: middle; }

/* 버튼 줄 정렬 */
.mem-btns, .bbs-btns { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.mem-btns > form, .bbs-btns > form { display: inline-flex; margin: 0; }
.mem-btns label { margin-right: 8px; font-size: 12px; color: #555; }

/* 원본 text.css 의 `a:link { font-size:9pt }` 가 버튼 글자까지 잡아
   <a> 버튼만 12px 로 작아졌다. 링크 상태 선택자로 같은 무게를 맞춰 준다. */
a.fbtn, a.fbtn:link, a.fbtn:visited, a.fbtn:hover, a.fbtn:active,
a.m-btn, a.m-btn:link, a.m-btn:visited,
a.m-btn-primary, a.m-btn-primary:link, a.m-btn-primary:visited,
a.m-btn-cancel, a.m-btn-cancel:link, a.m-btn-cancel:visited,
a.m-btn-danger, a.m-btn-danger:link, a.m-btn-danger:visited,
a.m-btn-sm, a.m-btn-sm:link, a.m-btn-sm:visited { font-size: 13px; }
a.fbtn.sm, a.fbtn.sm:link, a.fbtn.sm:visited,
a.m-btn-sm, a.m-btn-sm:link { font-size: 12px; }
a.fbtn.lg, a.fbtn.lg:link, a.fbtn.lg:visited { font-size: 14px; }

/* 상품 목록 썸네일 — 신규 업로드 원본이 img_list 리사이즈본 없이 들어와도 칸을 넘지 않게 */
.g-list-img {
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
#bigImg {
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ── 메인 팝업 (관리자 등록분) ── */
.site-popup { position: absolute; z-index: 200; background: #fff; border: 1px solid #999; box-shadow: 0 3px 12px rgba(0,0,0,.2); }
.site-popup-body { overflow: auto; }
.site-popup-body img { display: block; max-width: 100%; }
.site-popup-foot { display: flex; align-items: center; justify-content: space-between;
                   padding: 6px 10px; background: #333; color: #fff; font-size: 12px; }
.site-popup-foot label { display: inline-flex; align-items: center; gap: 5px; color: #fff; cursor: pointer; }
.site-popup-foot a { color: #fff; text-decoration: none; font-weight: bold; }