/* 좁은 화면과 목록 · 상세 마무리

   shop.css 가 800줄을 넘겨 갈라 놓은 것이다. 규칙을 옮기지 않고 자르기만
   했으므로, head.sub.php 가 원래 순서대로 이어서 실으면 어느 선언이
   이기는지가 달라지지 않는다. */

/* --- 좁은 화면 ----------------------------------------------------------- */
/* 한 줄 헤더는 로고·카테고리·유형 링크·아이콘 셋이 같은 줄을 나눠 쓴다.
   1024 아래에서는 32px 간격이 남지 않아 유형 링크가 아이콘 위로 올라탄다.
   간격부터 줄이고, 그래도 모자라는 860 아래에서는 유형 링크를 접는다.
   접어도 갈 곳은 남는다 — 카테고리 패널과 홈의 유형 구역이 같은 자리다. */
@media (max-width: 1023px) {
    .clarity-shop-page .clarity-shop-mainbar { gap: 20px; }
    .clarity-shop-page .clarity-shop-nav { gap: 16px; }
    .clarity-shop-page .clarity-shop-type-nav { gap: 14px; }
    .clarity-shop-page .clarity-shop-type-nav a { font-size: 13px; }
}
@media (max-width: 860px) {
    .clarity-shop-page .clarity-shop-type-nav { display: none; }
}
/* 더 좁아지면 카테고리 버튼도 글자를 접고 아이콘만 남긴다. 안 그러면
   오른쪽 아이콘 위로 올라탄다. 헤더 눈금도 여기서 줄인다 — 토큰은 위
   .clarity-shop-page 블록과 같은 특정도라 뒤에 와야 이긴다. */
@media (max-width: 639px) {
    .clarity-shop-page { --shop-mainbar-h: 60px; --shop-mainbar-h-shrunk: 52px; }
    .clarity-shop-page .clarity-shop-category-toggle { width: 40px; padding: 0; justify-content: center; }
    .clarity-shop-page .clarity-shop-category-toggle span { display: none; }
}

@media (max-width: 1080px) {
    .clarity-shop-page .sct,
    .ondam-timesale-items .sct { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
    .clarity-shop-page .sct,
    .ondam-timesale-items .sct { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ondam-bottom,
    .clarity-shop-page .clarity-shop-sidebar { grid-template-columns: minmax(0, 1fr); }
    .ondam-timesale { flex-direction: column; align-items: stretch; padding: 26px 20px; }
    .clarity-shop-page .clarity-shop-section-head h2 { font-size: 23px; }
    /* 1920x520 비율을 좁은 화면에 그대로 두면 높이가 100px 남짓이라 문구가 잘린다.
       비율을 풀고 위아래 여백으로 높이를 잡는다. */
    .clarity-shop-page .clarity-shop-hero { aspect-ratio: auto; padding: 48px 0; }
}

/* --- 목록 페이지 마무리 --------------------------------------------------
   영카트가 이미 내보내는 요소를 온담 모양으로 바꾼다. 빵부스러기는
   #sct_location 이 이미 있어서 새 마크업을 넣지 않는다. */
.clarity-shop-page #sct_location {
    gap: 8px;
    margin: 0 0 26px;
    color: var(--clarity-muted-soft);
    font-size: 12px;
}
.clarity-shop-page #sct_location a,
.clarity-shop-page #sct_location .go_home { color: var(--clarity-muted-soft); }
.clarity-shop-page #sct_location a:hover { color: var(--clarity-primary); }
.clarity-shop-page #sct_location select { border-radius: 0; }

/* 상품 목록을 감싸던 흰 패널과 정렬 바의 상자를 걷어낸다. 레퍼런스는
   상품 카드 말고는 바탕을 두지 않는다. */
.clarity-shop-page #sct,
.clarity-shop-page #sct_sortlst,
.clarity-shop-page #sct_ct_1 {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
}
.clarity-shop-page #sct_sortlst { margin-bottom: 22px; }

/* 정렬 칩은 알약이 아니라 각진 사각이다. */
.clarity-shop-page #ssch_sort a,
.clarity-shop-page #sct_ct_1 a,
.clarity-shop-page #sct_sort a {
    min-height: 0;
    border: 1px solid var(--clarity-border-strong);
    border-radius: 0;
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    padding: 7px 12px;
    font-size: 12.5px;
}
.clarity-shop-page #ssch_sort a:hover,
.clarity-shop-page #sct_ct_1 a:hover,
.clarity-shop-page #sct_sort a:hover { border-color: var(--clarity-primary); background: var(--clarity-surface); color: var(--clarity-primary); }
.clarity-shop-page #sct_sort ul { gap: 6px; }
.clarity-shop-page #sct_lst button { border-radius: 0; }

/* --- 상세 페이지 ---------------------------------------------------------
   레퍼런스는 상세에서도 카드 바탕을 두지 않는다. 이미지와 정보가 40px 사이를
   두고 나란히 서고, 값은 할인율(테라코타) · 판매가 · 취소선 정가 순으로 읽힌다. */
.clarity-shop-page #sit_ov_wrap {
    gap: 40px;
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
}
.clarity-shop-page #sit_pvi_big { border-radius: 0; }
.clarity-shop-page #sit_pvi_thumb img { border-radius: 0; }
.clarity-shop-page #sit_ov { padding: 0; }
.clarity-shop-page #sit_title { font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
.clarity-shop-page #sit_desc { color: var(--clarity-muted); font-size: 13.5px; }
.clarity-shop-page .clarity-sit-brand { font-size: 12.5px; }
.clarity-shop-page .clarity-sit-meta dt { font-size: 12.5px; }
.clarity-shop-page .clarity-sit-meta dd { font-size: 13.5px; }
.clarity-shop-page .clarity-sit-price-now { font-size: 28px; }
.clarity-shop-page .clarity-sit-discount { font-size: 20px; }
.clarity-shop-page .clarity-sit-price-was { font-size: 14px; }
.clarity-shop-page .sit_option,
.clarity-shop-page #sit_sel_option { border-radius: 0; }
.clarity-shop-page .sit_option select { border-radius: 0; }
.clarity-shop-page :is(.sit_qty_minus, .sit_qty_plus, .sit_opt_del, .sit_opt_list .num_input, .sit_opt_list .frm_input) { border-radius: 0; }
.clarity-shop-page #sit_tot_price { color: var(--clarity-text); font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.clarity-shop-page #sit_ov_btn button,
.clarity-shop-page #sit_ov_btn a { border-radius: 0; font-weight: 600; }
.clarity-shop-page .sit_btn_buy:hover { background: var(--clarity-primary-hover); border-color: var(--clarity-primary-hover); }
.clarity-shop-page #sit_tab .tab_tit button { font-size: 14px; }
.clarity-shop-page #sit_info { border: 0; background: none; }

/* 상세·장바구니·주문서에 남아 있는 둥근 패널을 각지게 만든다. 레퍼런스는
   모서리를 굴리지 않는다(칩과 원형 아이콘만 예외이고, 그 둘은 뒤에서 다시 지정한다). */
.clarity-shop-page #sit_inf,
.clarity-shop-page #sit_inf_open,
.clarity-shop-page #sit_use_list,
.clarity-shop-page #sit_qa_list,
.clarity-shop-page #sit_rel,
.clarity-shop-page .tbl_head01,
.clarity-shop-page .tbl_frm01,
.clarity-shop-page #sod_bsk,
.clarity-shop-page #sod_frm,
.clarity-shop-page #sod_fin,
.clarity-shop-page .shop_cart_box,
.clarity-shop-page .clarity-shop-panel { border-radius: 0; }