/* BASIC css start */
/* ============================================================
   ±âº» ÅؽºÆ® ½ºÅ¸ÀÏ (¹èÄ¡/·¹À̾ƿôÀº ¾Æ·¡ "·¹À̾ƿô + ´Ü°èº° °Ë»ö" ¼½¼Ç¿¡¼­ Á¤ÀÇ)
   ============================================================ */
.minSizeWrap { position: relative; min-width: 1200px; margin: 0 auto; padding: 0 50px; }

#hdWrap .topRight li { position: relative; padding: 0 8px; display: inline-block; }
#hdWrap .topRight li a { font-size: 13px; color: #666; }
#hdWrap .topRight li a:hover { color: #9c9c9c; }
#hdWrap .topRight li.cartArea .bsCount {
    position: absolute;
    top: -7px;
    right: -4px;
    width: 18px;
    height: 18px;a
    line-height: 18px;
    border-radius: 50%;
    background-color: #f7e1bc;
    text-align: center;
    font-size: 11px;
    color: #2e2e2e;
}

/* ============================================================
   ·¹À̾ƿô + ´Ü°èº° °Ë»ö(ÇÊÅÍ)
   ============================================================ */
:root {
    --tm-primary: #1a5cff;
    --tm-accent:  #ff4757;
    --tm-bg:      #f5f6fa;
    --tm-text:    #1a1a2e;
    --tm-sub:     #6b7280;
    --tm-border:  #e5e7eb;
}

html, body { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* === Çì´õ #hdWrap   sticky ÀÚ¿¬ È帧. ¸ÞÀÌÅ©¼¥ default fixed/absolute ¹«·ÂÈ­ === */
#hdWrap {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.06);
}

/* ù ÁÙ: ·Î°í + ¸Þ´º   flex space-between + flex-wrap (Á¼¾ÆÁö¸é 2ÁÙ) */
#hdWrap .hdArea {
    width: 100%;
    height: auto !important;
    background: #fff !important;
    position: static !important;
    border: 0 !important;
}
#hdWrap .minSizeWrap {
    min-width: 0 !important;
    max-width: 1400px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 20px 20px !important;
    position: static !important;
}
#hdWrap .hdCate {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px 16px;
    width: 100% !important;
    position: static !important;
    margin: 0 !important;
}
#hdWrap .hdLeft {
    position: static !important;
    left: auto !important;
    top: auto !important;
    float: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
}
#hdWrap .topRight {
    position: static !important;
    right: auto !important;
    top: auto !important;
    float: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
}

/* ·Î°í - % ³Êºñ, min-width¸¸ px (absolute ¾È ¾¸, normal flow) */
#hdWrap .hd_logo {
    display: inline-block;
    width: 16%;
    min-width: 220px;
    max-width: 280px;
    line-height: 0;
    position: static !important;
    left: auto !important;
    top: auto !important;
    float: none !important;
}
#hdWrap .hd_logo img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain;
}

/* === Á¤·Ä ¿É¼Ç .item-order.sort   Ç×»ó ¼û±è (PC/¸ð¹ÙÀÏ ¸ðµÎ) === */
.item-order.sort,
dl.item-order.sort,
.item-info .item-order.sort {
    display: none !important;
}

/* === µ¥½ºÅ©Å¾¿¡¼± ¸ÞÀÌÅ©¼¥ default ±×´ë·Î. Á¼¾ÆÁú ¶§¸¸ ¹ÝÀÀÇü === */

/* ·Î±×ÀÎ ÆäÀÌÁö °£Æí·Î±×ÀÎ(.mlog)   common.css ÀÇ °íÁ¤ width Á¦°Å */
#loginWrap .mlog-sign .mlog {
    width: auto !important;
    max-width: 100% !important;
}

/* ÀÛÀº È­¸é   common.css ÀÇ 1100~1200px °íÁ¤ width ¹«·ÂÈ­ */
@media (max-width: 1280px) {
    #mainWrap,
    #contentWrapper,
    #contentWrap,
    #content,
    #aside,
    #productClass,
    #searchWrap,
    #loginWrap,
    #findWrap,
    #joinWrap,
    #mypageWrap,
    #orderWrap,
    #basketWrap,
    #boardWrap,
    .minSizeWrap {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    #mainWrap { max-width: 1400px !important; margin: 0 auto !important; padding: 0 16px !important; }

    /* °Ô½ÃÆÇ ±Û¾²±â textarea (common.css width:978px) */
    .com-wrt-box .wrt textarea,
    textarea.MS_textarea,
    .boardWriteWrap textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* ¸ðµç table (°Ô½ÃÆÇ/¸¶ÀÌÆäÀÌÁö/ÁÖ¹®/¾à°ü µî) °¡·Î ³Ñħ ¹æÁö */
    table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        word-break: break-all !important;
        box-sizing: border-box !important;
    }
    /* colgroup col ÀÇ width attribute ¹«·ÂÈ­ (HTML attrÀ̶ó CSS·Î´Â col width:auto·Î µ¤À½) */
    table colgroup col,
    table col {
        width: auto !important;
    }
    /* td/th ¾È ÄÜÅÙÃ÷ ÁÙ¹Ù²Þ Çã¿ë */
    table td,
    table th {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
    }
    /* td ¾È Æû ¿ä¼Òµé   width:100% °­Á¦ (parent td ¾È¿¡¼­) */
    table input[type="text"],
    table input[type="email"],
    table input[type="password"],
    table input[type="number"],
    table input[type="tel"],
    table input[type="search"],
    table input[type="url"],
    table input[type="date"],
    table textarea,
    table select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    /* ´Ü radio/checkbox ´Â width 100% ¾È µÊ */
    table input[type="radio"],
    table input[type="checkbox"] {
        width: auto !important;
    }

    /* »óÇ° ¹Ì¸®º¸±â ·¹À̾î (common.css width:936px) */
    #detailpage {
        width: 100% !important;
        max-width: 936px !important;
        box-sizing: border-box;
    }

    /* ÄÜÅÙÃ÷ ¾ÈÀÇ Ç¥/À̹ÌÁö/iframe µî ³Êºñ ³Ñħ ¹æÁö */
    img { max-width: 100%; height: auto; }
    table { max-width: 100%; }
    iframe, embed, object, video { max-width: 100%; }
}

/* === ǪÅÍ #ftWrap ¹ÝÀÀÇü   ¸ÞÀÌÅ©¼¥ default min-width:1200px ¹«·ÂÈ­, À߸² ¹æÁö === */
html, body { overflow-x: hidden; }
#ftWrap,
#ftWrap .ftArea,
#ftWrap .minSizeWrap,
#ftWrap .ftInfoArea,
#ftWrap .ftMenu,
#ftWrap .ftInfo,
#ftWrap .csInfo {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}
#ftWrap {
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#ftWrap .minSizeWrap {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}
#ftWrap img { max-width: 100% !important; height: auto !important; }
#ftWrap table { max-width: 100% !important; }

@media (max-width: 960px) {
    #ftWrap .minSizeWrap { padding: 0 14px !important; }
    #ftWrap .ftMenu > ul,
    #ftWrap .footerInfoWrap > * {
        flex-wrap: wrap !important;
        gap: 8px;
    }
}
@media (max-width: 680px) {
    #ftWrap .minSizeWrap { padding: 0 12px !important; }
    #ftWrap, #ftWrap * { font-size: 12px !important; }
    #ftWrap h2, #ftWrap h3, #ftWrap .ft_logo { font-size: 14px !important; }

    /* 02-2237-2190 (.tel) À§¿¡ ¿©¹é */
    #ftWrap .tel {
        margin-top: 20px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    #ftWrap .copy {
        padding-bottom: 20px !important;
        line-height: 1.6 !important;
    }
    #ftWrap .copy a {
        display: block !important;
        margin-top: 6px !important;
    }

    /* °Ô½ÃÆÇ ¸®½ºÆ® .bbs-table-list   ¸ð¹ÙÀÏ¿¡¼± ù Ä÷³(No.)°ú ¸¶Áö¸· Ä÷³(HITS) ¼û±è */
    .bbs-table-list table th:first-child,
    .bbs-table-list table td:first-child,
    .bbs-table-list table th:last-child,
    .bbs-table-list table td:last-child {
        display: none !important;
    }
    /* colgroup col µµ ÀÖÀ¸¸é °°ÀÌ ¼û±è (ÀϺΠºê¶ó¿ìÀú Á¤·Ä ¾ÈÁ¤¼º) */
    .bbs-table-list table colgroup col:first-child,
    .bbs-table-list table colgroup col:last-child {
        display: none !important;
    }
}

/* === °Ë»ö ¿µ¿ª #headerSearchBar   normal flow (Çì´õ ù ÁÙ ¹Ù·Î ¾Æ·¡) === */
#hdWrap #headerSearchBar {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 0 12px !important;
    background: var(--tm-primary) !important;
    border: 0 !important;
    box-sizing: border-box;
    z-index: auto;
    float: none !important;
}
#hdWrap #headerSearchBar .search {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    max-width: 900px;
    height: 50px;
    margin: 0 auto !important;
    background: #fff;
    border: 0;
    border-radius: 26px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 4px 0 16px;
    position: relative !important;
    float: none !important;
}
#hdWrap #headerSearchBar .depthSearchInner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
#hdWrap #headerSearchBar input[type="text"],
#hdWrap #headerSearchBar input[type="search"] {
    display: block !important;
    flex: 1 1 auto;
    width: auto !important;
    height: 100% !important;
    min-width: 0;
    padding: 0 18px !important;
    color: var(--tm-text) !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    background: transparent !important;
    box-sizing: border-box;
}
#hdWrap #headerSearchBar input::placeholder { color: #aaa; }

#hdWrap #headerSearchBar .depthSearchBtn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: #fff !important;
    background: var(--tm-primary);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    margin: 0 0 0 4px;
    position: static !important;
}
#hdWrap #headerSearchBar .depthSearchBtn:hover { background: #0a3fc0; }
#hdWrap #headerSearchBar .depthSearchBtn svg { display: block; width: 20px; height: 20px; color: #fff; }
#hdWrap #headerSearchBar .searchClose { display: none !important; }

/* Ä«Å×°í¸® Å°¿öµå */
#hdWrap #headerSearchBar .depthCatRowWrap {
    max-width: 1400px;
    margin: 12px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
}
#hdWrap #headerSearchBar .depthCatRow {
    display: flex;
    gap: 7px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#hdWrap #headerSearchBar .depthCatBtn {
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    color: rgba(255,255,255,.92);
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: all .15s;
}
#hdWrap #headerSearchBar .depthCatBtn:hover { background: rgba(255,255,255,.3); color: #fff; }
#hdWrap #headerSearchBar .depthCatBtn.on { background: #fff; color: var(--tm-primary); border-color: #fff; font-weight: 700; }

/* "Àüü" ¹öÆ° - Ä«Å×°í¸® ¸Ê ¸µÅ©. ³ë¶õ»ö + °ÝÀÚ ¾ÆÀÌÄÜ + ±¸ºÐ¼±À¸·Î Å°¿öµå ¹öÆ°°ú ±¸º° */
#hdWrap #headerSearchBar .depthCatBtn.depthCatAll {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
    padding: 5px 15px 5px 11px;
    font-size: 13px;
    font-weight: 800;
    color: #1a1a2e;
    background: #ffd54a;
    border-color: #ffd54a;
    box-shadow: 0 2px 8px rgba(255, 213, 74, .5);
}
#hdWrap #headerSearchBar .depthCatBtn.depthCatAll::after {
    content: "";
    position: absolute;
    top: 20%;
    right: -11px;
    width: 1px;
    height: 60%;
    background: rgba(255, 255, 255, .4);
}
#hdWrap #headerSearchBar .depthCatBtn.depthCatAll:hover { background: #ffe27a; border-color: #ffe27a; color: #1a1a2e; transform: translateY(-1px); }
#hdWrap #headerSearchBar .depthCatBtn.depthCatAll svg { display: block; flex: 0 0 auto; }

/* === ÇÊÅ͹٠#stickyFilter   normal flow (#headerSearchBar ¹Ù·Î ¾Æ·¡) === */
#stickyFilter {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: auto;
    background: #fff !important;
    border-bottom: 1px solid var(--tm-border);
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    box-sizing: border-box;
    float: none !important;
}
#stickyFilter.is-empty { display: none !important; }
#stickyFilter .sf-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
#stickyFilter .depthFilterBar {
    display: none !important;
    padding: 10px 0 6px !important;
    border: 0 !important;
    background: transparent !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}
#stickyFilter .depthFilterBar.on { display: block !important; }
#stickyFilter .fl-top {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    font-size: 12px !important;
    color: var(--tm-sub) !important;
    margin-bottom: 7px !important;
}
#stickyFilter .fl-top .fl-label {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    color: var(--tm-sub) !important;
}
#stickyFilter .depthClearBtn {
    background: none !important;
    border: 0 !important;
    color: var(--tm-accent) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
    padding: 0 !important;
}
#stickyFilter .depthClearBtn .depthClearKey {
    visibility: visible !important; /* common.css ÀÇ "button span { visibility:hidden }" ¹«·ÂÈ­ */
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #bbb !important;
}
#stickyFilter .depthChips { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; }

#stickyFilter .depthChip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 11px !important;
    margin: 0 !important;
    color: #795548 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #fff8e1 !important;
    border: 1.5px solid #ffc107 !important;
    border-radius: 16px !important;
    line-height: 1.3 !important;
}
#stickyFilter .depthChipN {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    background: #ffc107 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
#stickyFilter .depthChip button {
    color: #bbb !important;
    font-size: 14px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
    padding: 0 2px !important;
    margin-left: 2px !important;
}
#stickyFilter .depthChip button:hover { color: var(--tm-accent) !important; }
#stickyFilter .depthResultBar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 0 !important;
    border-top: 1px solid var(--tm-border);
    font-size: 13px !important;
    color: var(--tm-sub) !important;
}
#stickyFilter .depthResultBar strong { color: var(--tm-primary) !important; font-weight: 700 !important; }

/* ´Ü°èº° °á°ú È÷½ºÅ丮 "1Â÷ N°³ ¡æ 2Â÷ M°³ ¡æ ¡¦" */
#stickyFilter .depthHist {
    font-size: 11px !important;
    color: #bbb !important;
    line-height: 1.4 !important;
    text-align: right;
}
#stickyFilter .depthHist strong { color: var(--tm-primary) !important; font-weight: 700 !important; }
#stickyFilter .depthHist .depthHistArrow { color: #d1d5db !important; margin: 0 3px; }

/* Ãß°¡ ÀÔ·Â ¾È³» ÈùÆ® */
#stickyFilter .depthHint { display: none; padding: 0 0 10px !important; }
#stickyFilter .depthHint.on { display: block !important; }
#stickyFilter .depthHintInner {
    background: #e8f4ff !important;
    border: 1px solid #bee3f8 !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    color: #2b6cb0 !important;
    box-sizing: border-box;
}

.depthMoreHint {
    display: none;
    width: 100%;
    margin: 20px 0;
    padding: 14px 16px;
    color: #555;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    box-sizing: border-box;
}
.depthMoreHint strong { color: var(--tm-primary); }
.depthMoreHint a { color: var(--tm-accent); text-decoration: underline; }

/* === #contentWrapper   sticky Çì´õ¶ó margin ºÒÇÊ¿ä === */
#contentWrapper { margin-top: 0 !important; }

/* === »óÇ° ±×¸®µå ¹ÝÀÀÇü (5 ¡æ 4 ¡æ 3 ¡æ 2) ===
   ¸ÞÀÎ(#mdPick .mdPickList grid) + ¸®½ºÆ®/°Ë»ö(.item-cont dl.item-list) µÑ ´Ù Àû¿ë */

/* ¸®½ºÆ®/°Ë»ö ÆäÀÌÁöÀÇ .item-cont ¸¦ grid ÄÁÅ×À̳ʷΠ(¸ÞÀÌÅ©¼¥ default float:left+width:20% ¹«·ÂÈ­) */
#productClass .item-wrap .item-cont,
#searchWrap .item-wrap .item-cont {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 32px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box;
}
#productClass .item-wrap .item-cont dl.item-list,
#searchWrap .item-wrap .item-cont dl.item-list {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* === ¹ÝÀÀÇü ¹Ìµð¾î Äõ¸® === */
@media (max-width: 1280px) {
    #hdWrap .hd_logo { width: 14%; min-width: 160px; max-width: 220px; }
    #hdWrap .topRight .link { font-size: 12px !important; padding: 4px 8px !important; }
    /* ±×¸®µå 4¿­ */
    #mdPick .mdPickList,
    #productClass .item-wrap .item-cont,
    #searchWrap .item-wrap .item-cont {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
@media (max-width: 960px) {
    #hdWrap .minSizeWrap { padding: 8px 14px !important; }
    #hdWrap .hd_logo { width: 22%; min-width: 140px; max-width: 200px; }
    #hdWrap #headerSearchBar .search { max-width: calc(100% - 40px); height: 46px; }
    #hdWrap #headerSearchBar .depthSearchBtn { width: 40px; height: 40px; flex-basis: 40px; }
    #hdWrap #headerSearchBar .depthCatBtn { font-size: 11px; padding: 4px 10px; }
    /* ±×¸®µå 3¿­ */
    #mdPick .mdPickList,
    #productClass .item-wrap .item-cont,
    #searchWrap .item-wrap .item-cont {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 28px 14px !important;
    }
}
@media (max-width: 680px) {
    /* Çì´õ µÎ ÁÙ   flex-wrapÀ̶ó ÀÚµ¿ wrap. ·Î°í °¡¿îµ¥ Á¤·Ä */
    #hdWrap .hdCate { justify-content: center !important; gap: 6px 12px; }
    #hdWrap .hd_logo { width: auto; min-width: 0; max-width: 200px; }
    #hdWrap .hd_logo img { width: auto !important; height: 36px !important; max-height: 36px !important; }
    #hdWrap .topRight { display: flex; width: 100%; justify-content: center !important; flex-wrap: wrap; gap: 4px; }
    #hdWrap .topRight .link { font-size: 11px !important; padding: 3px 7px !important; }
    #hdWrap #headerSearchBar { padding: 12px 0 10px !important; }
    #hdWrap #headerSearchBar input[type="text"] { font-size: 14px !important; padding: 0 12px !important; }
    #hdWrap #headerSearchBar .depthCatRowWrap { padding: 0 10px; margin-top: 10px; }
    #hdWrap #headerSearchBar .depthCatBtn { font-size: 11px; padding: 3px 9px; }
    #hdWrap #headerSearchBar .depthCatBtn.depthCatAll { font-size: 12px; padding: 4px 12px 4px 9px; margin-right: 8px; }
    /* ±×¸®µå 2¿­ */
    #mdPick .mdPickList,
    #productClass .item-wrap .item-cont,
    #searchWrap .item-wrap .item-cont {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 22px 10px !important;
    }
}

/* BASIC css end */