/* 상품 목록 페이지 전용 스타일 - 대문 디자인 톤 맞춤
   주의: 이 파일은 list.php(basic 스킨) 전용이며, default_shop.css와 skin/style.css는 건드리지 않음 */

/* 정렬/뷰전환 바 카드 */
#sct_sortlst {
    background:#fff;
    border:1px solid #EEF0F3;
    border-radius:8px;
    box-shadow:0px 1px 4px rgba(0,0,0,0.06);
    box-sizing:border-box;
    overflow:hidden;
}
/* 정렬바 아래 여백(상품그리드 상단 margin) 축소 */
.sct_10 {
    margin-top:8px;
}
#sct_sort li a:hover {
    color:#0080EA;
}
#sct_lst button:hover {
    color:#0080EA;
}

/* 상품 카드 (썸네일+정보) */
.sct_10 .sct_li {
    background:#fff;
    border:1px solid #EEF0F3;
    border-radius:8px;
    box-shadow:0px 1px 4px rgba(0,0,0,0.06);
    box-sizing:border-box;
    padding:14px 14px 18px;
}
/* 전 카테고리가 한 줄 5개(col-row-5)로 통일됨. col-row-5 카드는 서로 맞닿아 있어
   (그리드 열 사이 별도 마진 없음) 카드 자체 padding이 곧 카드 사이 시각적 간격이기도
   함 - 좌우 padding을 늘려 카드 사이를 벌리고, 그만큼 카드 내부(이미지)는 좁아짐
   (이미지는 max-width:100%라 자동 대응) */
.sct_10 .sct_li.col-row-5 {
    padding:20px;
}
/* 카드 사이 좌우 간격 3px (list.php 그리드에만 적용, 5열 유지 위해 폭 보정) */
.sct_10.lists-row .col-row-5 {
    width:calc(20% - 6px);
    margin-left:3px;
    margin-right:3px;
}
/* 600px 이하(폰) 한 줄 4개, 601px 이상은 5개 — 위 5개 고정 규칙이 style.css 폭별 열 수를 덮어써서 보정 (2026-09-28) */
@media (max-width:600px) {
    .sct_10.lists-row .col-row-5 {width:calc(25% - 6px);}
}
.sct_10 .sct_img {
    border-radius:6px;
    overflow:hidden;
}
.sct_10 .sct_img img {
    transition:transform .3s ease;
    width:100%;height:auto; /* 2026-09-21 분류별 이미지 크기 설정이 달라도 카드 폭에 맞춰 같은 크기로 */
}
.sct_10 .sct_img:hover img {
    transform:scale(1.03);
}
.sct_10 .sct_txt {
    border-bottom:0;
    padding-bottom:0;
}
.sct_10 .sct_star {
    display:none;
}
.sct_10 .sct_basic {
    display:none;
}
.sct_10 .sct_txt a {
    display:block;
    overflow:hidden;
    /* 2026-09-28 글자 단위로 자름: 글자마다 줄바꿈 + 높이 한 줄 → 반쪽 글자 없이 첫 줄만 보임, 말줄임표 없음 (전 폭) */
    white-space:normal;
    word-break:break-all;
    line-height:1.2;
    height:1.2em;
    text-align:center; /* 2026-09-28 상품명 가운데 정렬 (전 폭) */
}
#sct .sct_10 .sct_txt {
    margin-bottom:0;
}
.sct_10 .sct_txt a:hover {
    color:#0080EA;
}
.sct_10 .sct_cost {
    color:#0080EA;
}

/* 장바구니 버튼 */
.sct_10 .btn_cart {
    border-radius:8px;
}

/* 위시리스트/공유 버튼 hover */
.sct_10 .sct_op_btn>button:hover {
    color:#0080EA;
}

/* 정렬 결과 페이지네이션 - 포인트 컬러 통일 */
#sct .pg_current {
    background:#0080EA;
    border-color:#0080EA;
}
#sct .pg_page:hover {
    color:#0080EA;
}

/* 관련 분류 활성 표시 - 포인트 컬러 통일 */
#sct .sct_ct_here {
    color:#0080EA !important;
}

/* 리스트뷰(테이블형, sct_40) 전환 시에도 톤 통일 */
.sct_40 .sct_img {
    border-radius:6px;
    overflow:hidden;
}
.sct_40 .sct_txt a:hover {
    color:#0080EA;
}
.sct_40 .sct_cost {
    color:#0080EA;
}

@media (max-width:768px) {
    .sct_10 .sct_li,
    .sct_10 .sct_li.col-row-5 {
        padding:10px 10px 14px;
    }
}
/* 600px 이하(폰, 한 줄 4개): 카드 폭이 좁아 가격과 하트·공유가 겹침 → 아이콘 숨김, 안쪽 여백 6px (2026-09-28) */
@media (max-width:600px) {
    .sct_10 .sct_op_btn {display:none;}
    .sct_10 .sct_li,
    .sct_10 .sct_li.col-row-5 {
        padding:6px 6px 10px;
    }
    /* 폰: 상품명·가격 글자 줄이고 사이 간격 5→2px */
    .sct_10 .sct_txt a {font-size:13px;}
    .sct_10 .sct_cost {font-size:14px;margin-top:2px;}
}
/* 601~768(태블릿): 가격이 하트에 닿음 → 가격 글자만 15px, 아이콘 유지 (2026-09-28) */
@media (min-width:601px) and (max-width:768px) {
    .sct_10 .sct_cost {font-size:15px;}
}
/* 가격 오른쪽 정렬, 하트·공유는 왼쪽으로 (전 폭, 2026-09-28) */
.sct_10 .sct_cost {text-align:right;}
.sct_10 .sct_op_btn {right:auto;left:0;}
/* 가격과 하트·공유 겹침 해소 (2026-09-28): 768 이하 아이콘 숨김(폰과 같게), 769~1199 카드 좌우 여백 20→10·가격 15px */
@media (max-width:768px) {
    .sct_10 .sct_op_btn {display:none;}
}
@media (min-width:769px) and (max-width:1199px) {
    .sct_10 .sct_li,
    .sct_10 .sct_li.col-row-5 {padding-left:10px;padding-right:10px;}
    .sct_10 .sct_cost {font-size:15px;}
}
/* 가격 아래 여백 줄임: 폰 10→6, 태블릿 14→8, 노트북 20→11 (2026-09-28) */
@media (min-width:769px) {
    .sct_10 .sct_li,
    .sct_10 .sct_li.col-row-5 {padding-bottom:11px;}
}
@media (min-width:601px) and (max-width:768px) {
    .sct_10 .sct_li,
    .sct_10 .sct_li.col-row-5 {padding-bottom:8px;}
}
@media (max-width:600px) {
    .sct_10 .sct_li,
    .sct_10 .sct_li.col-row-5,
    #ssch .sct_10 .sct_li {padding-bottom:6px;}
    /* 폰: 카드 위아래 간격 20→6px, 좌우 간격과 같게 (2026-09-28) */
    #sct .sct_10 li.sct_li,
    #ssch .sct_10 li.sct_li {margin-bottom:6px;padding-bottom:6px;}
    /* 폰: 상품명~가격 8→2px, 가격 줄 최소높이 해제 → 카드 높이 줄임 (2026-09-28) */
    #sct .sct_10 li .sct_txt,
    #ssch .sct_10 li .sct_txt {margin-bottom:0;padding-bottom:0;}
    #sct .sct_10 li .sct_bottom,
    #ssch .sct_10 li .sct_bottom {min-height:0;}
}

/* ===== 2026-09-27 검색결과 화면(search.skin.php) — 분류 목록 톤 맞춤, style.css #ssch* 값 덮어씀 ===== */
#ssch {margin:0 0 20px}
#ssch h2 {font-size:20px;line-height:30px;margin:16px 0 0}
#ssch h2 strong {color:#0080EA}
#ssch h2 .ssch_result_total {font-size:13px;color:#999;font-weight:normal}

/* 한 카드: 검색칸 → 상세검색 → 분류 칩 → 정렬 */
#ssch_frm {background:transparent;border:0;border-radius:0;box-shadow:none;padding:16px 0 0;margin-bottom:0}
/* 2026-09-28 글자 키움: 입력·버튼 16px(아이폰 16px 미만 입력칸 확대 방지), 검색줄 상자 폭 전체 */
#ssch_frm .ssch_scharea {display:flex;align-items:center;gap:8px;max-width:none;padding:0;border:0}
#ssch_frm .ssch_scharea .ssch_input {flex:1;min-width:0;width:auto;height:36px;margin:0;padding:0 14px;border:1px solid #D7E1EA;border-radius:6px;box-shadow:none;font-size:16px}
#ssch_frm .ssch_scharea .ssch_input:focus {border-color:#0080EA;outline:0}
#ssch_frm .ssch_scharea .btn_submit {flex:none;width:auto;height:36px;margin:0;padding:0 22px;border:0;border-radius:6px;background:#EAF4FD;color:#0070D0;font-size:16px;font-weight:700}
#ssch_frm .ssch_scharea .btn_submit i {font-size:16px;margin-right:2px}
#ssch_frm .ssch_scharea .tooltip_icon {font-size:22px}
#ssch_frm .ssch_more_btn {display:none}
#ssch_frm .ssch_option {display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin:14px 0 0;padding:0;border:0;font-size:14px;color:#555}
#ssch_frm .ssch_option .ssch_br {display:none}
#ssch_frm .ssch_option .ssch_input {width:120px;height:36px;margin:0;padding:0 12px;border:1px solid #D7E1EA;border-radius:6px;box-shadow:none;font-size:16px}
#ssch_frm .ssch_option input[type="checkbox"] + label {margin-right:8px}

/* 분류 칩: 고른 분류 = 파란 칩 */
#ssch_cate {margin:8px 0 0;padding:0;background:none;border:0;border-top:1px solid #EEF0F3;border-radius:0;box-shadow:none}
#ssch_cate ul {display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
#ssch_cate li {width:auto;margin:0;border:0}
#ssch_cate a {display:inline-block;height:36px;line-height:34px;padding:0 14px;border:1px solid #D5DBE3;border-radius:4px;background:#fff;color:#222;font-size:14px;font-weight:500}
#ssch_cate a span {color:#7A8594;font-weight:normal}
#ssch_cate a:hover {color:#0080EA;border-color:#0080EA}
#ssch_cate a.on {background:#0080EA;border-color:#0080EA;color:#fff;font-weight:600}
#ssch_cate a.on span {color:rgba(255,255,255,.8)}
#ssch_cate li:first-child a:not(.on) {background:#FDEEF1;border-color:#F4C9D3}

/* 정렬 줄: 분류 목록 정렬과 같은 글자+세로선, 적용된 정렬 = 파란 굵은 글자 */
/* 2026-09-28: 14px, 누르는 칸 높이 32px, 세로선은 글자 높이(12px)만 */
#ssch_sort_all {display:flex;flex-wrap:wrap;gap:0;margin:16px 0 0;padding:8px 0 0;border-top:1px solid #EEF0F3;list-style:none}
#ssch_sort_all li {width:auto;height:auto;margin:0;padding:0;line-height:32px}
#ssch_sort_all li:hover:after {display:none}
#ssch_sort_all a, #ssch_sort_all li a {position:relative;display:block;height:32px;line-height:32px;padding:0 12px;border:0;border-radius:0;background:none;color:#555;font-size:14px}
#ssch_sort_all li + li a:before {content:"";position:absolute;left:0;top:50%;height:12px;margin-top:-6px;border-left:1px solid #ddd}
#ssch_sort_all li:first-child a {padding-left:0}
#ssch_sort_all a:hover, #ssch_sort_all li.active a {color:#0080EA;border-color:#ddd;background:none}
#ssch_sort_all li.on a {color:#0080EA;font-weight:700}

/* 600 이하(폰): 상세검색 접기, 정렬 3개씩 2줄 */
@media (max-width:600px) {
    #ssch h2 {font-size:18px}
    #ssch_frm {padding:14px 0 0}
    #ssch_frm .ssch_scharea {max-width:none}
    #ssch_frm .ssch_more_btn {display:inline-flex;align-items:center;gap:4px;margin:10px 0 0;padding:0;border:0;background:none;color:#555;font-size:14px}
    #ssch_frm .ssch_more_btn i {font-size:16px;transition:transform .2s}
    #ssch_frm.is_more .ssch_more_btn {color:#0080EA}
    #ssch_frm.is_more .ssch_more_btn i {transform:rotate(180deg)}
    #ssch_frm .ssch_option {display:none}
    #ssch_frm.is_more .ssch_option {display:flex}
    #ssch_frm .ssch_option .ssch_br {display:block;flex-basis:100%;height:0;margin:0}
    #ssch_cate ul {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
    #ssch_cate li {width:auto}
    #ssch_cate a {display:block;height:32px;line-height:30px;padding:0 4px;font-size:13px;letter-spacing:-0.3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #ssch_sort_all {display:grid;grid-template-columns:repeat(3,1fr);row-gap:0}
    #ssch_sort_all li a, #ssch_sort_all li:first-child a {padding:0 4px;text-align:center}
    #ssch_sort_all li:nth-child(3n+1) a:before {display:none}
    #ssch .sct_10 .sct_txt {margin-top:6px;margin-bottom:4px;padding-bottom:4px}
    #ssch .sct_10 .sct_li {padding-bottom:10px;margin-bottom:12px}
    #ssch .sct_10 .sct_cost {margin-bottom:0}
}

/* ===== 2026-09-26 A10 분류 화면 헤더 ===== */
/* 상품 카드 끝선을 제목·정렬 줄 끝선에 맞춤 (격자 -10px 바깥 여백 제거) */
#sct .sct_10.lists-row {margin-left:0;margin-right:0}
/* 검색 화면: 카드 좌우 3px 간격만큼 당겨 카드 끝선을 검색줄 끝선에 맞춤 (2026-09-28) */
#ssch .sct_10.lists-row {margin-left:-3px;margin-right:-3px}
/* 현재 위치 줄 마우스 올림·선택 색: 초록 → 포인트컬러 */
#sct_location .shop_select_to_html:hover .category_title,
#sct_location .shop_select_to_html:hover .category_title i,
#sct_location .shop_select_to_html .option.selected,
#sct_location .shop_select_to_html .option.selected a {color:#0080EA}
/* [분류] 버튼: PC에선 숨김 */
.sct_cate_btn {display:none}

/* 601 이상: 정렬 줄 폭 제한(80%의 80%) 해제 — 태블릿 폭에서 "최근등록순" 줄바꿈 방지 */
@media (min-width:601px) {
    #sct_sort, #sct_sort #ssch_sort {width:auto}
}
@media (min-width:601px) and (max-width:768px) {
    #sct_sort li a {padding:0 7px}
}

/* 600 이하(폰): 현재 위치 줄 → [분류] 버튼, 정렬 줄 숨김 */
@media (max-width:600px) {
    #wrapper_title {padding-right:80px}
    #sct_location.is_list {top:0;right:10px;padding:0;height:53px;display:flex;align-items:center}
    #sct_location.is_list > *:not(.sct_cate_btn) {display:none !important}
    #sct_location .sct_cate_btn {display:block;position:relative}
    .sct_cate_btn summary {list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#fff;border:1px solid #EEF0F3;border-radius:8px;box-shadow:0px 1px 4px rgba(0,0,0,0.06);color:#333;font-size:14px;font-weight:500}
    .sct_cate_btn summary i {color:#8B8B8B;font-size:16px;transition:transform .2s}
    .sct_cate_btn summary::-webkit-details-marker {display:none}
    .sct_cate_btn[open] summary {border-color:#0080EA;color:#0080EA}
    .sct_cate_btn[open] summary i {color:#0080EA;transform:rotate(180deg)}
    .sct_cate_btn ul {position:absolute;right:0;top:40px;z-index:20;margin:0;padding:6px 0;list-style:none;background:#fff;border:1px solid #EEF0F3;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);min-width:150px}
    .sct_cate_btn li a {display:block;padding:0 16px;line-height:40px;color:#333;font-size:14px;white-space:nowrap}
    .sct_cate_btn li a.on {color:#0080EA;font-weight:700}
    #sct_sortlst {display:none}
}

/* ===== 2026-09-26 분류 상단 HTML 화면 필터(테마 v1) — list.10.skin.php 끝 스크립트가 .cate_* 로 다시 그림 ===== */
#sct_hhtml.t-clean {display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
#sct_hhtml.t-clean > div {padding:12px 16px;border-radius:8px;font-family:'Pretendard Variable','Malgun Gothic',dotum,sans-serif;font-size:15px;line-height:1.7;letter-spacing:-0.01em;text-align:left}
#sct_hhtml.t-clean > div * {font-size:inherit;color:inherit;font-family:inherit;line-height:inherit;margin:0}
#sct_hhtml.t-clean .cate_warn {background:#FDEDED;color:#B71C1C;font-weight:700}
#sct_hhtml.t-clean .cate_info {background:#F0F6FD;color:#2C5AA0;font-weight:600}
#sct_hhtml.t-clean .cate_plain {background:#fff;color:#333;font-weight:500}
#sct_hhtml.t-clean .cate_warn b, #sct_hhtml.t-clean .cate_warn strong {font-weight:700}
#sct_hhtml.t-clean .cate_info b, #sct_hhtml.t-clean .cate_info strong {font-weight:600}

/* 2026-09-26 관리자 톱니: 제목 상자 안, 제목 글자 오른쪽 (list.10.skin.php 스크립트가 옮김) */
/* 2026-09-30 배치는 공통 css/default_shop.css 208행(높이 0 — 제목 줄 높이 안 늘림)으로 옮김 */
#wrapper_title .sct_admin .btn_admin {font-size:16px}