@charset "utf-8";

/* 쇼핑몰 — 상품 상세와 마감

   gnu_theme4 의 쇼핑몰 작업에서 옮겨 왔다. shop-carousel.css 와 같은
   이유로 새 파일이고, 그 다음에 실린다(맨 마지막). 저쪽 shop.css 의
   끝부분이라 앞의 규칙을 덮어 쓰는 자리다.

   담긴 것 — 상품 상세(온담 PDP) 치수, 고른 옵션 줄, 겹치거나 남던
   테두리 정리, 사용후기 탭, 그림자 제거, 과녁 크기(WCAG 2.2 AA 24px),
   홈의 리듬, 후기 카드. */

/* --- 상품 상세: 시안(온담 PDP) 치수에 맞추기 ---

   시안 파일의 #sit 블록에서 실제 값을 옮겼다. 색만 사이트 팔레트를 쓴다.
   구분선은 한 자리에 하나만 둔다 — 값 줄의 아래선과 안내 상자의 위선이
   겹쳐 20px 사이를 두고 두 줄이 그어지고 있었다. */

/* 값 줄. 시안은 할인율 20px · 판매가 30px · 정가 15px. */
.clarity-shop-page .clarity-sit-price { gap: .625rem; }
.clarity-shop-page #sit_ov .clarity-sit-discount {
    color: var(--ondam-sale, var(--clarity-primary));
    font-size: 20px;
    font-weight: 700;
}
.clarity-shop-page .clarity-sit-price-now { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.clarity-shop-page .clarity-sit-price-was { font-size: 15px; }

/* 안내 상자. 위선 하나만 남기고 시안의 줄 간격(11px)과 라벨 폭(78px)을 준다. */
.clarity-shop-page #sit_ov .sit_info {
    border-bottom: 0;
    margin-top: 22px;
    padding: 18px 0;
}
.clarity-shop-page .clarity-sit-meta {
    grid-template-columns: 78px minmax(0, 1fr);
    row-gap: 11px;
    column-gap: 16px;
}
.clarity-shop-page .clarity-sit-meta dt { font-size: 13.5px; }
.clarity-shop-page .clarity-sit-meta dd { color: var(--clarity-text-soft); font-size: 13.5px; }

/* 고른 옵션 상자와 합계. 서로 맞닿는 선이 두 겹이 되지 않게 위선만 쓴다. */
.clarity-shop-page #sit_ov #sit_sel_option { border-bottom: 0; }
.clarity-shop-page #sit_ov .clarity-sit-total {
    border-bottom: 0;
    padding: 22px 0 20px;
}
.clarity-shop-page .clarity-sit-total-label { color: var(--clarity-text-soft); font-size: 14px; font-weight: 400; }

/* 탭. 시안은 위에 굵은 실선 한 줄을 긋고, 고른 탭만 아래 2px 로 표시한다.
   회색 바탕을 깔지 않아 탭 줄이 본문과 이어져 보인다. */
.clarity-shop-page #sit_tab .tab_tit {
    border-block: 0;
    border-top: 1px solid var(--clarity-text);
    background: none;
}
.clarity-shop-page #sit_tab .tab_tit button {
    min-height: 54px;
    border-top: 0;
    border-bottom: 2px solid transparent;
    background: none;
}
.clarity-shop-page #sit_tab .tab_tit button.selected {
    border-top: 0;
    border-bottom-color: var(--clarity-text);
    background: none;
}

/* 상세 설명 본문. 시안은 840px 로 좁혀 가운데 두고 줄 간격을 넉넉히 준다.
   전체 폭으로 흘리면 한 줄이 1200px 를 넘어 눈이 줄을 놓친다. */
.clarity-shop-page #sit_inf #sit_inf_explan {
    max-width: 840px;
    margin-inline: auto;
    padding-top: 44px;
    color: var(--clarity-text-soft);
    font-size: 15.5px;
    line-height: 1.85;
}

/* 후기 평점 요약. 시안은 평균 점수와 점수대별 분포를 한 상자에 좌우로 둔다. */
.clarity-shop-page .clarity-review-summary {
    /* .sit_use_top 이 flex 라 이 상자가 내용 폭까지만 늘어난다. 시안은 탭
       본문 폭을 꽉 채우므로 한 줄을 통째로 차지하게 한다. 쓰기·더보기
       단추는 그 위에 절대배치라 자리를 다투지 않는다. */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 34px;
    border: 1px solid var(--clarity-border);
    background: var(--clarity-surface);
    padding: 28px 32px;
    margin-bottom: 28px;
}

.clarity-shop-page .clarity-review-score { min-width: 130px; flex: none; text-align: center; }
.clarity-shop-page .clarity-review-avg { margin: 0 0 6px; font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.clarity-shop-page .clarity-review-stars { margin: 0 0 4px; color: var(--ondam-star, #c9a227); font-size: 14px; }
.clarity-shop-page .clarity-review-count { margin: 0; color: var(--clarity-muted-soft); font-size: 12px; }

.clarity-shop-page .clarity-review-bars {
    display: flex;
    min-width: 220px;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clarity-shop-page .clarity-review-bars li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--clarity-muted);
    font-size: 12px;
}

.clarity-shop-page .clarity-review-bar-star { width: 28px; flex: none; }
.clarity-shop-page .clarity-review-bar-n { width: 32px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }

.clarity-shop-page .clarity-review-bar {
    position: relative;
    height: 6px;
    flex: 1;
    overflow: hidden;
    background: var(--clarity-surface-soft);
}

.clarity-shop-page .clarity-review-bar > span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--ondam-star, #c9a227);
}

/* 쓰기·더보기 단추는 스킨이 오른쪽 위에 절대배치로 얹는다. 요약 상자가
   생기면서 5점 줄의 건수를 가려, 흐름 안으로 내려 상자 아래 오른쪽에 둔다. */
.clarity-shop-page .sit_use_top { flex-direction: column; align-items: stretch; }

/* 후기 본문. 접지 않고 바로 보여 준다.

   접었다 펴던 시절의 여백이 스킨 style.css 에 남아 있다 — .sit_use_con 의
   아래 여백 10px 과 .sit_use_p 의 위아래 안쪽 여백 10px. 늘 펴 두면 글 한
   덩이에 30px 이 붙어 줄 사이가 벌어지므로 여기서 지운다. */
.clarity-shop-page .sit_use_con { display: block; margin: 0; }
.clarity-shop-page .sit_use_p {
    margin: 0;
    padding: 0;
    color: var(--clarity-text-soft);
    font-size: 14.5px;
    line-height: 1.75;
    text-wrap: pretty;
}
/* 본문에 남은 사진(두 번째 장부터)은 작은 줄로 늘어놓는다. 원본 크기로
   두면 줄 하나가 화면을 다 먹는다. */
.clarity-shop-page .sit_use_p img {
    width: auto;
    max-width: 110px;
    height: auto;
    max-height: 110px;
    margin-top: 10px;
    margin-right: 6px;
    object-fit: cover;
    vertical-align: top;
}

/* 수정·삭제는 글쓴이와 관리자에게만 보인다. 본문 아래 작은 글로 둔다. */
.clarity-shop-page .sit_use_cmd { display: flex; gap: 14px; margin-top: 10px; }
.clarity-shop-page .sit_use_cmd a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--clarity-muted-soft);
    padding: 0;
    font-size: 11.5px;
}
.clarity-shop-page .sit_use_cmd a:hover { color: var(--clarity-primary); }

/* 쓰기 단추는 시안처럼 요약 상자 오른쪽 끝에 둔다. */
.clarity-shop-page .clarity-review-write {
    display: inline-flex;
    height: 46px;
    flex: none;
    align-items: center;
    border: 0;
    background: var(--clarity-primary);
    color: var(--color-primary-content, #fff);
    padding-inline: 24px;
    font-size: 13.5px;
    font-weight: 600;
}
.clarity-shop-page .clarity-review-write:hover {
    border-color: transparent;
    background: var(--clarity-primary-hover);
    color: var(--color-primary-content, #fff);
}

/* 후기가 하나도 없어 요약 상자가 없을 때는 단추만 오른쪽에 선다. */
.clarity-shop-page .sit_use_top #sit_use_wbtn {
    position: static;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

/* 전체 후기 목록으로 가는 줄. 목록 위에 두면 무엇을 더 보는지 읽히지 않아
   아래 가운데로 내렸다. */
.clarity-shop-page #sit_use_more {
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--clarity-border);
    padding-top: 22px;
}
.clarity-shop-page #sit_use_more a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    border: 1px solid var(--clarity-border-strong);
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    padding-inline: 22px;
    font-size: 13px;
    font-weight: 600;
}
.clarity-shop-page #sit_use_more a:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }

/* 상품 관리 톱니(관리자에게만 보인다).

   코어가 shop/item.php 에서 찍고(.sit_admin), 영카트 스킨이 거기에
   position:absolute; right:0; top:2px 을 준다. 그런데 이 요소의 조상 중
   position 이 잡힌 것이 없어 화면 맨 위 오른쪽에 붙었고, 그 자리는 고정
   헤더가 덮는다 — 그래서 관리자로 봐도 톱니가 보이지 않았다.

   흐름 안으로 되돌려 빵부스러기 아래 오른쪽에 둔다. 쿠폰존의 설정 톱니
   (.sct_admin)와 같은 모양이라 관리자 도구가 늘 같은 자리·같은 모양이 된다. */
/* 톱니는 빵부스러기 줄 오른쪽 끝, 비어 있는 자리에 얹는다. 흐름에 두면
   한 줄을 통째로 차지해 상품이 그만큼 아래로 밀린다. 기준 상자는 이
   톱니가 있을 때만 잡아, 관리자가 아닌 사람의 화면에는 영향이 없다. */
.clarity-shop-page .shop-content:has(> .sit_admin) { position: relative; }

.clarity-shop-page .sit_admin {
    position: absolute;
    z-index: 1;
    top: 4px;
    right: 0;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    text-align: right;
}

.clarity-shop-page .sit_admin a {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid var(--clarity-border);
    background: var(--clarity-surface);
    color: var(--clarity-muted);
    line-height: 1;
    padding: 0;
}

.clarity-shop-page .sit_admin a:hover,
.clarity-shop-page .sit_admin a:focus-visible {
    border-color: var(--clarity-primary);
    color: var(--clarity-primary);
}

/* 상세 설명 안의 글. 관리자가 넣는 글이라 저장된 HTML 은 의미만 담고
   (h3 · p · table · ul) 꾸밈은 여기서 준다 — 다크 모드가 따라오고,
   관리자가 나중에 글을 고쳐도 모양이 유지된다. 시안의 상세 탭 값이다. */
/* 스킨은 상세 탭의 h2·h3 를 낭독기 전용으로 화면에서 빼 둔다. 판매자가
   상세설명 안에 쓴 제목은 읽히라고 쓴 것이므로 여기서만 되돌린다. */
.clarity-shop-page #sit_inf_explan :is(h3, h4) {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

.clarity-shop-page #sit_inf_explan h3 {
    margin: 0 0 18px;
    color: var(--clarity-text);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.4;
}

.clarity-shop-page #sit_inf_explan h4 {
    margin: 34px 0 14px;
    color: var(--clarity-text);
    font-size: 16px;
    font-weight: 700;
}

.clarity-shop-page #sit_inf_explan p { margin: 0 0 26px; }

.clarity-shop-page #sit_inf_explan table {
    width: 100%;
    border-top: 1px solid var(--clarity-text);
    border-collapse: collapse;
    margin-bottom: 34px;
}

.clarity-shop-page #sit_inf_explan tr { border-bottom: 1px solid var(--clarity-border); }

.clarity-shop-page #sit_inf_explan th {
    width: 140px;
    background: var(--clarity-surface-soft);
    color: var(--clarity-text-soft);
    padding: 13px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
}

.clarity-shop-page #sit_inf_explan td {
    color: var(--clarity-text-soft);
    padding: 13px 16px;
    font-size: 13.5px;
}

/* 사용·관리 같은 목록은 상자에 담는다. 시안도 이 덩어리만 바탕을 깐다. */
.clarity-shop-page #sit_inf_explan ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1px solid var(--clarity-border);
    background: var(--clarity-surface-soft);
    margin: 0 0 34px;
    padding: 24px 28px;
    list-style: none;
}

.clarity-shop-page #sit_inf_explan li {
    position: relative;
    color: var(--clarity-text-soft);
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.6;
}

.clarity-shop-page #sit_inf_explan li::before {
    position: absolute;
    left: 0;
    color: var(--clarity-primary);
    content: "·";
    font-weight: 700;
}

/* 관리자에게 남긴 안내 한 줄. 본문과 구별되게 옅게 둔다. */
.clarity-shop-page #sit_inf_explan .sit-note {
    border-top: 1px solid var(--clarity-border);
    padding-top: 20px;
    color: var(--clarity-muted-soft);
    font-size: 12.5px;
}

/* --- 고른 옵션 줄 (옵션이 있는 상품) ---

   스킨이 찍는 단추 글자가 "증가 · 감소 · 삭제" 라 32px 상자 안에서 세로로
   접혀 읽히지 않았다. 글자는 낭독기용으로 남기고(font-size:0 은 접근성
   트리에서 지워지지 않는다) 화면에는 기호를 그린다. 시안의 [− 1 ＋] 모양.

   옵션 고르는 줄은 시안대로 48px 로 키운다. */
.clarity-shop-page .sit_option select,
.clarity-shop-page .sit_supply select {
    width: 100%;
    height: 48px;
    border: 1px solid var(--clarity-border-strong);
    border-radius: 0;
    background: var(--clarity-surface);
    color: var(--clarity-text);
    padding: 0 14px;
    font-size: 14px;
}

.clarity-shop-page .sit_opt_list,
.clarity-shop-page .sit_spl_list {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem 1rem;
}

.clarity-shop-page :is(.sit_opt_list, .sit_spl_list) .sit_opt_subj { grid-column: 1 / -1; }
/* 원본 순서는 [이름, 금액, 수량상자] 라 그대로 두면 금액이 왼쪽에 온다.
   칸을 못 박아 수량은 왼쪽, 금액은 오른쪽으로 보낸다. */
.clarity-shop-page :is(.sit_opt_list, .sit_spl_list) .sit_opt_prc { grid-column: 2; justify-self: end; color: var(--clarity-text); font-size: .875rem; font-weight: 700; }

/* 수량 조절은 한 상자로 붙인다 — 시안처럼 테두리 하나 안에 − 숫자 ＋. */
.clarity-shop-page :is(.sit_opt_list, .sit_spl_list) > div {
    grid-column: 1;
    grid-row: 2;
    gap: 0;
    justify-self: start;
    border: 1px solid var(--clarity-border-strong);
}

.clarity-shop-page :is(.sit_qty_minus, .sit_qty_plus) {
    width: 2.125rem;
    height: 2.125rem;
    border: 0;
    font-size: 0;
}

.clarity-shop-page .sit_qty_minus::before { content: "−"; font-size: 1rem; }
.clarity-shop-page .sit_qty_plus::before { content: "＋"; font-size: .9rem; }

.clarity-shop-page .sit_opt_list :is(.num_input, .frm_input) {
    width: 2.5rem;
    height: 2.125rem;
    order: -1;
    border: 0;
    border-inline: 1px solid var(--clarity-border);
}

/* 감소를 숫자 왼쪽으로 보낸다. 스킨의 순서는 [입력 증가 감소 삭제] 다. */
.clarity-shop-page .sit_qty_minus { order: -2; }
.clarity-shop-page .sit_qty_plus { order: 0; }

/* 삭제는 수량 상자 밖, 줄 오른쪽 끝에 둔다. */
.clarity-shop-page .sit_opt_del {
    order: 1;
    width: 2.125rem;
    height: 2.125rem;
    margin-left: .5rem;
    border: 1px solid var(--clarity-border-strong);
    font-size: 0;
}

.clarity-shop-page .sit_opt_del::before { content: "×"; font-size: 1rem; }

/* 빵부스러기의 현재 분류 이름. 스킨이 #4f4f4f 를 박아 둬 다크에서 2.3:1 이다. */
.clarity-shop-page .category_title { color: var(--clarity-text-soft); }
.clarity-shop-page .category_title.current { color: var(--clarity-text); }

/* --- 상세의 겹치거나 남는 테두리 정리 ---

   시안은 상세 오른쪽 칸을 상자로 감싸지 않는다. 구역을 가르는 가로선
   한 줄씩만 긋고, 상자는 "고른 옵션" 하나뿐이다. 지금은 스킨이 물려 준
   테두리가 그 위에 겹쳐 있었다. */

/* 상품 묶음 아래 가로선이 두 줄이었다 — 스킨이 #sit_ov_from 에 아래선을,
   #sit_siblings 에 위선을 각각 준다. 67px 사이를 두고 나란히 그어진다.
   이전/다음 상품 줄을 여는 위선만 남긴다. */
.clarity-shop-page #sit_ov_from { border-bottom: 0; }

/* 옵션 고르는 묶음. 시안은 상자 없이 셀렉트만 둔다 — 상자를 두면 그 안에
   또 셀렉트 테두리가 들어와 사각형이 겹친다. */
.clarity-shop-page .sit_option,
.clarity-shop-page .sit_supply {
    border: 0;
    padding: 0;
    margin-top: 1.25rem;
}

/* 고른 옵션. 위·좌·우 세 면만 그어져 아래가 뚫린 상자였다. 위 안내 목록·
   합계 줄과 같이 가로선 한 줄로 통일한다. */
.clarity-shop-page #sit_ov #sit_sel_option {
    border: 0;
    border-top: 1px solid var(--clarity-border);
    padding: 1rem 0 0;
}

/* 아직 아무것도 고르지 않았으면 이 칸은 비어 있다. 그때도 선을 그으면
   바로 아래 합계 줄의 선과 33px 사이로 나란히 그어져 또 두 줄이 된다. */
.clarity-shop-page #sit_ov #sit_sel_option:not(:has(*)) {
    border-top: 0;
    padding: 0;
}

/* 관련상품. 바깥 상자 안에 상품 카드가 또 테두리를 갖고 있어 사각형이
   이중으로 보인다. 시안처럼 바깥은 두르지 않는다. */
.clarity-shop-page #sit_rel {
    border: 0;
    padding: 2.5rem 0 0;
}

/* --- 사용후기 탭의 겹친 테두리 ---

   .sit_use_top 은 스킨이 2px 테두리 상자로 두는 자리다. 그 안에 평점 요약
   카드를 넣으면서 상자가 이중이 됐고, 아래로는 이 상자의 밑줄과
   #sit_use_ol 의 윗줄이 15px 사이로 나란히, 위로는 탭 밑줄과 이 상자의
   윗줄이 40px 사이로 나란히 그어졌다 — 한 탭에 가로선이 세 겹이었다.

   이 요소는 요약 카드와 쓰기 단추를 담기만 하는 껍데기다. 선을 지우고,
   보이는 테두리는 요약 카드와 후기 목록이 각자 갖게 둔다. */
.clarity-shop-page .sit_use_top {
    border: 0;
    padding: 0;
}

/* 상세설명 끝의 안내 한 줄. 바로 위 "사용 및 관리" 상자가 이미 테두리로
   닫혀 있어 윗줄이 34px 아래에서 한 번 더 그어졌다. 간격만 남긴다. */
.clarity-shop-page #sit_inf_explan .sit-note {
    border-top: 0;
    padding-top: 4px;
}

/* --- 상세의 그림자 ---

   시안의 상세에는 box-shadow 가 하나도 없다(문서 전체에 셋뿐이고 그것도
   drawer 와 고정 헤더다). 평평한 1px 실선만 쓴다.

   skins.css 의 공통 다리가 #sit_ov_wrap · #sit_ov 에 그림자를 주는데,
   위쪽 온담 레이어는 테두리·바탕·여백만 걷어내고 그림자를 남겨 두었다.
   그래서 상품 묶음 둘레에 카드 그림자가 두 겹으로(바깥 wrap + 안쪽 ov)
   깔려 있었다 — 테두리 없이 그림자만 뜬 상태라 더 어색했다. */
/* skins.css 쪽이 body 까지 붙여 (1,1,1) 이라 여기서도 body 를 붙여야 이긴다. */
body.clarity-shop-page :is(#sit_ov_wrap, #sit_ov) { box-shadow: none; }

/* 관리 톱니는 코어가 daisyUI .btn 을 함께 붙여 안쪽 그림자가 생긴다.
   같은 자리의 다른 아이콘 단추(쿠폰존 톱니)와 결을 맞춘다. */
.clarity-shop-page .sit_admin a.btn { box-shadow: none; }

/* --- 과녁 크기 (WCAG 2.2 AA · 24 CSS px) ---

   웹 기준은 24px 다. 네이티브 앱의 44pt·48dp 를 가져오지 않는다.
   문장 속에 섞인 인라인 링크는 기준에서 빠지므로 건드리지 않는다.

   모양은 그대로 두고 눌리는 높이만 채우는 방식이다 — 이 테마가 회원 카드와
   인기검색어에서 쓴 것과 같다. */

/* 체크상자. 라벨이 함께 있으면 라벨까지가 과녁이므로 라벨 줄을 24px 로. */
.clarity-shop-page .chk_box label,
.clarity-shop-page .ssch_option label {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: .35rem;
}

.clarity-shop-page input.selec_chk { width: 20px; height: 20px; }

/* 장바구니의 선택 상자는 라벨이 낭독기 전용(폭 0)이라 상자 자체가 과녁이다. */
.clarity-shop-page #sod_bsk input.selec_chk,
.clarity-shop-page .td_chk input.selec_chk,
.clarity-shop-page .th_chk input.selec_chk { width: 24px; height: 24px; }

/* 작은 링크들. 글자 크기는 두고 줄 높이만 채운다. */
.clarity-shop-page :is(.go_home, .smb_info, .win_coupon, .win_point, .win_memo, .win_scrap, .withdrawal) {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
}

/* 캐러셀 점. 보이는 점은 8px 그대로 두고 누를 수 있는 자리만 24px 로 넓힌다. */
.clarity-shop-page .swiper-pagination-bullet { position: relative; }
.clarity-shop-page .swiper-pagination-bullet::after {
    position: absolute;
    inset: -8px;
    content: "";
}

/* 위에서 못 잡은 자리들. 클래스가 없거나(검색 옵션 체크상자) 아이콘과
   글자가 세로로 쌓여 폭이 모자란 것(마이페이지 쿠폰)이다. */
.clarity-shop-page .chk_box input[type="checkbox"],
.clarity-shop-page .chk_box input[type="radio"] { width: 20px; height: 20px; }

.clarity-shop-page .smb_me a { display: inline-flex; min-height: 24px; align-items: center; }

.clarity-shop-page #smb_private a {
    display: flex;
    min-width: 24px;
    min-height: 24px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.clarity-shop-page .tooltip_icon { min-width: 24px; min-height: 24px; }

/* 상품 검색의 정렬 링크. 글자 크기는 두고 줄 높이만 채운다. */
.clarity-shop-page :is(#ssch_sort_all, #ssch_sort, .ssch_sort) li a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
}

/* --- 홈의 리듬 ---

   상품 구역 넷이 눈썹 + 제목 + 부제 + 전체보기 + 카드 한 줄로 똑같이
   반복돼, 6,000px 를 내리는 동안 어느 구역이 중요한지 알 수 없었다.
   구성은 그대로 두고 무게만 달리 준다. */

/* 대표 구역(이번 주 가장 많이 담긴 것)의 제목을 키운다. */
.clarity-shop-page .clarity-shop-product-section--lead .clarity-shop-section-head h2 {
    font-size: 30px;
    letter-spacing: -.035em;
}

/* MD PICK 은 옅은 띠 위에 올려 화면을 한 번 끊는다. 타임세일의 어두운
   띠와 짝이 되도록 반대쪽으로 약하게. */
.clarity-shop-page .clarity-shop-product-section--band {
    position: relative;
    padding: 56px 0;
}

.clarity-shop-page .clarity-shop-product-section--band::before {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    /* 셸 밖까지 넓혀 화면 폭을 꽉 채운다. */
    left: 50%;
    width: 100vw;
    background: var(--clarity-surface-soft);
    content: "";
    transform: translateX(-50%);
}

/* --- 후기 카드는 상품 카드와 달라야 한다 ---
   같은 사각형·같은 사진·같은 테두리라 스크롤하다 보면 후기인지 상품인지
   구분되지 않았다. 테두리를 걷고 옅은 바탕으로 바꿔 성격을 나눈다. */
.clarity-shop-page .ondam-review-card {
    border: 0;
    background: var(--clarity-surface-soft);
}

.clarity-shop-page .ondam-review-thumb { background: var(--clarity-border); }
.clarity-shop-page .ondam-review-meta { border-top-color: var(--clarity-border); }