@charset "utf-8";

/* 메인 배너 아래 관리자 안내 (theme/solune/shop/index.php).

   최고관리자에게만 보인다. 배너에 얹히는 글이 관리자 배너 폼의 "이미지 설명"
   에서 오는데 그 자리를 모르면 첫 화면 글을 어떻게 고치는지 찾아 헤매게
   되어, 배너 바로 아래에 가는 길을 한 줄 둔다. 손님에게는 없는 줄이라
   조용하게 — 작은 글씨, 옅은 색, 링크만 강조색. */
.solune-shop-page .solune-shop-banner-admin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: .75rem 0 0;
    color: var(--solune-muted);
    font-size: .8125rem;
    line-height: 1.5;
}
.solune-shop-page .solune-shop-banner-admin i { color: var(--solune-primary); font-size: .75rem; }
.solune-shop-page .solune-shop-banner-admin a {
    color: var(--solune-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.solune-shop-page .solune-shop-banner-admin em {
    margin-left: auto;
    color: var(--solune-muted-soft);
    font-style: normal;
}

/* --- 상품문의 목록 (skin/shop/basic/itemqalist.skin.php) ---------------
   시안 `상품문의 목록.html` 을 따른다. 치수·간격은 시안대로, 색은 사이트
   팔레트다 — 시안의 검정 단추·갈색 A 표식·초록 완료 칩을 각각 primary ·
   primary · primary-soft 로 옮겼다.

   검색 한 줄(선택 · 입력 · 검색) → "전체 N건 · 전체보기" → 카드 목록 →
   페이지 넘김. 카드 머리는 통째로 <button> 이고 펼친 안에 Q 와 A 가 선다.

   접는 기준은 화면 폭이 아니라 이 상자가 받은 폭이다(@container iq). */
.solune-shop-page .solune-iq { container: iq / inline-size; }

/* 검색 줄. 시안: 높이 44 · 모서리 8 · 입력은 남는 폭을 다 쓴다.
   skins.css 의 body.solune-page :is(input[type=text], …, select) 가 (0,2,2) 로
   모서리를 10px 로 깔므로, 칸 규칙은 .solune-iq-search 를 끼워 (0,3,0) 으로
   올린다. */
.solune-shop-page .solune-iq-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}
.solune-shop-page .solune-iq-selectwrap { position: relative; display: inline-flex; }
.solune-shop-page .solune-iq-search :is(.solune-iq-select, .solune-iq-input) {
    box-sizing: border-box;
    height: 44px;
    border: 1px solid var(--solune-border-strong);
    border-radius: 8px;
    background: var(--solune-surface);
    color: var(--solune-text);
    padding: 0 14px;
    font-size: 14px;
    line-height: 42px;
}
/* 시안의 화살표는 SVG 배경인데 그 색은 다크에서 못 따라온다. 테두리로 그려
   currentColor 를 타게 한다. */
.solune-shop-page .solune-iq-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.solune-shop-page .solune-iq-selectwrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--solune-muted);
    border-bottom: 1.5px solid var(--solune-muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.solune-shop-page .solune-iq-input { flex: 1 1 200px; min-width: 0; }
.solune-shop-page .solune-iq-input::placeholder { color: var(--solune-muted); }
/* default.css 는 required 인 빈 칸마다 오른쪽 위에 빨간 별을 얹는다(폼용).
   검색 칸에는 시안대로 별을 두지 않는다 — 안내는 placeholder 가 한다.
   그 규칙이 (0,3,2) !important 라 같은 무게로 되돌린다. */
body.solune-page .solune-iq-search .solune-iq-input:invalid { background-image: none !important; }
.solune-shop-page .solune-iq-submit {
    display: inline-flex;
    height: 44px;
    align-items: center;
    border: 0;
    border-radius: 8px;
    background: var(--solune-primary);
    color: var(--solune-primary-ink);
    cursor: pointer;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 500;
}
.solune-shop-page .solune-iq-submit:hover { background: var(--solune-primary-hover); }

/* 건수 · 전체보기 */
.solune-shop-page .solune-iq-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--solune-muted);
    font-size: 13px;
}
.solune-shop-page .solune-iq-total strong { color: var(--solune-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.solune-shop-page .solune-iq-all { color: var(--solune-muted); text-decoration: underline; text-underline-offset: 3px; }
.solune-shop-page .solune-iq-all:hover { color: var(--solune-primary); }

/* 카드 목록 */
.solune-shop-page .solune-iq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.solune-shop-page .solune-iq-item {
    overflow: hidden;
    border: 1px solid var(--solune-border);
    border-radius: 12px;
    background: var(--solune-surface);
}

/* 카드 머리 = 단추. 사진 48 · 글 · 화살표 세 칸. */
.solune-shop-page .solune-iq-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--solune-text);
    cursor: pointer;
    padding: 16px 18px;
    text-align: left;
    font: inherit;
}
.solune-shop-page .solune-iq-head:hover { background: var(--solune-surface-soft); }
/* 카드가 overflow:hidden 이라 링을 안쪽으로 그린다. */
.solune-shop-page .solune-iq-head:focus-visible { outline: 2px solid var(--solune-primary); outline-offset: -2px; }
.solune-shop-page .solune-iq-thumb {
    display: block;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--solune-surface-soft);
}
.solune-shop-page .solune-iq-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.solune-shop-page .solune-iq-text { display: block; min-width: 0; }
.solune-shop-page .solune-iq-product {
    display: block;
    overflow: hidden;
    margin: 0 0 4px;
    color: var(--solune-muted);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.solune-shop-page .solune-iq-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.solune-shop-page .solune-iq-title { font-size: 15px; font-weight: 500; line-height: 1.4; text-wrap: pretty; }
.solune-shop-page .solune-iq-title .fa-lock { margin-left: 2px; color: var(--solune-muted); font-size: 12px; }
/* 상태 칩. 완료는 강조색, 대기는 옅은 회색. */
.solune-shop-page .solune-iq-status {
    display: inline-block;
    border-radius: 999px;
    background: var(--solune-surface-soft);
    color: var(--solune-muted);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}
.solune-shop-page .solune-iq-status.is-done { background: var(--solune-primary-soft); color: var(--solune-primary); }
.solune-shop-page .solune-iq-meta { display: block; margin-top: 6px; color: var(--solune-muted); font-size: 12px; }
.solune-shop-page .solune-iq-dot { margin: 0 2px; }
.solune-shop-page .solune-iq-caret {
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--solune-border);
    border-radius: 50%;
    color: var(--solune-muted);
    font-size: 14px;
    transition: transform .2s;
}
.solune-shop-page .solune-iq-item.is-open .solune-iq-caret { transform: rotate(180deg); }

/* 펼친 안. 사진 칸(48 + 14)만큼 들여 Q · A 를 세운다. 스크립트가 여닫으므로
   처음엔 접혀 있다. */
.solune-shop-page .solune-iq-con {
    display: none;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid var(--solune-border);
    padding: 18px 18px 20px 80px;
}
.solune-shop-page .solune-iq-qa {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.solune-shop-page .solune-iq-mark {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--solune-text);
    color: var(--solune-surface);
    font-size: 12px;
    font-weight: 700;
}
.solune-shop-page .solune-iq-a .solune-iq-mark { background: var(--solune-primary); color: var(--solune-primary-ink); }
.solune-shop-page .solune-iq-qa-text {
    min-width: 0;
    padding-top: 2px;
    color: var(--solune-text);
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
/* 본문은 에디터 글이라 p 와 img 가 섞여 온다. */
.solune-shop-page .solune-iq-qa-text p { margin: 0; }
.solune-shop-page .solune-iq-qa-text img { max-width: 100%; height: auto; }
.solune-shop-page .solune-iq-qa-text.is-empty { color: var(--solune-muted); }
/* 펼친 안의 손잡이 줄. 바깥 상자가 세로 flex 라 링크가 각자 줄을 차지한다.
   둘을 가로로 묶어 왼쪽부터 세운다. */
.solune-shop-page .solune-iq-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.solune-shop-page .solune-iq-link {
    align-self: flex-start;
    color: var(--solune-muted);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.solune-shop-page .solune-iq-link:hover { color: var(--solune-primary); }
/* 바로가기가 이 줄의 주된 손잡이다 — 상품이 아니라 이 문의로 간다.
   상품 보기보다 한 단 올려 둔다. */
.solune-shop-page .solune-iq-go {
    color: var(--solune-text-soft);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.solune-shop-page .solune-iq-go:hover { color: var(--solune-primary); }
.solune-shop-page :is(.solune-iq-go, .solune-iq-link):focus-visible { outline: 2px solid var(--solune-primary); outline-offset: 3px; }

.solune-shop-page .solune-iq-empty { padding: 4rem 0; color: var(--solune-muted); text-align: center; font-size: 13px; }

/* 좁은 상자. 선택 상자가 한 줄을 다 쓰고 입력·검색이 다음 줄에 선다.
   펼친 안의 들여쓰기는 풀어 글에 폭을 준다. */
@container iq (max-width: 560px) {
    .solune-shop-page .solune-iq-selectwrap { flex: 1 1 100%; }
    .solune-shop-page .solune-iq-select { width: 100%; }
    .solune-shop-page .solune-iq-head { gap: 12px; padding: 14px; }
    .solune-shop-page .solune-iq-con { padding: 16px 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .solune-shop-page .solune-iq-caret { transition: none; }
}

/* --- 상품 목록 · 상세의 현재 위치 드롭다운 -----------------------------------
   navigation.skin.php 가 select.shop_hover_selectbox 를 코어 shop.js 의
   shop_select_to_html() 로 .shop_select_to_html > .menulist 로 바꿔 그린다.
   그 목록을 접어 두고 올렸을 때만 펴는 규칙이 이 절이다 — 없으면 목록이
   항상 펼쳐진 채 남아 상품 목록이 162px, 상세가 261px 늘어난다(2026-09-08
   시트 초기화 때 겪음). 원래 영카트 규칙을 색만 팔레트로 바꿔 되살렸다.
   hover 만 있던 것에 :focus-within 을 더해 키보드로도 펀다. 단 그
   규칙만으로는 한 번도 동하지 않았다 — 코어가 만드는 칩은 <span> 이라
   포커스를 못 받고, 목록은 display:none 이라 안의 링크도 탭으로 닿지
   않는다. navigation.skin.php 가 그 칩에 tabindex 를 붙여 이제 실제로 펀진다. */
.solune-shop-page .view_location .shop_select_to_html.shop_hover_selectbox { float: left; }
.solune-shop-page .shop_select_to_html { position: relative; display: inline-block; }
/* 낱말 사이 간격은 줄이 갖는 gap(8) 하나로만 둔다.

   되살린 영카트 규칙은 이 자리에 padding: 10px 20px 15px 을 주는데, 그
   스킨의 다른 배치를 겨냥한 값이라 우리 줄에서는 한 낱말이 41px 높이를
   차지하고 좌우 20px 이 gap 에 더해져 간격이 한쪽만 28px 로 벌어졌다
   (실측: 두 글자 '데스크' 가 90px). 위아래만 남겨 누를 자리는 지키고
   (30px — WCAG 2.2 AA 의 24px 를 넘는다) 좌우는 0 으로 둔다. */
.solune-shop-page .shop_select_to_html span { padding: .375rem 0; }
.solune-shop-page .shop_select_to_html .menulist {
    /* 여는 목록은 이름 바로 아래에 붙인다. 위 여백을 고치면서 20px 은
       이름 글자와 겹치는 자리가 됐다. 100% 로 두면 높이가 바뀌어도 따라온다. */
    position: absolute;
    top: 100%;
    z-index: 9;
    display: none;
    box-sizing: border-box;
    width: auto;
    margin-top: 6px;
    border: 1px solid var(--solune-border);
    border-radius: .75rem;
    background-color: var(--solune-surface);
    box-shadow: 0 14px 34px -18px rgba(29, 28, 26, .45);
    padding: .375rem;
    opacity: 0;
    white-space: nowrap;
    transition: opacity .15s ease-out;
}
/* 칩과 목록 사이 6px 를 투명한 다리로 잇는다.

   이 목록은 올렸을 때만 펴지는데(:hover · :focus-within), 그 틈에는 칩도
   목록도 없어 마우스가 지나는 순간 hover 가 끊긴다. 목록이 사라지면 그
   위로 마우스를 올릴 수도 없으니, 곧바로 아래로 내려가면 항목에 아예 닿지
   못했다(실측: 칩 block -> 틈 +2px none -> 목록 자리 +20px none).
   시안도 같은 수를 쓰는데, 거기서는 투명 테두리(border-top: 6px solid
   transparent + background-clip: padding-box)로 메운다. 우리는 목록에
   진짜 테두리와 그림자가 있어 그 방법을 쓰면 하이라이트가 6px 떠 버리므로
   가짜 요소로 덮는다. 보이지 않지만 hover 는 받는다. */
.solune-shop-page .shop_select_to_html .menulist::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -7px;
    height: 7px;
}
.solune-shop-page .view_location .shop_select_to_html .menulist { left: 0; }
.solune-shop-page .is_right .shop_select_to_html .menulist { right: 0; }
.solune-shop-page .shop_select_to_html:is(:hover, :focus-within) .category_title,
.solune-shop-page .shop_select_to_html:is(:hover, :focus-within) .category_title i { color: var(--solune-primary); }
/* 두 칸을 flex 로 세운다. inline-block 이던 때는 칸마다 높이를 min-height
   360 으로 못 박아 서로 키를 맞췄는데, 오른쪽 칸에 세 줄밖에 없어 240px 가
   빈 채로 남았다. flex 는 알아서 키를 맞추므로 그 값을 걷는다. */
.solune-shop-page .shop_select_to_html:is(:hover, :focus-within) .menulist { display: flex; opacity: 1; }
.solune-shop-page .shop_select_to_html .menulist ul.wide {
    display: block !important;
    min-width: 9.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 칸 사이 구분선. 코어 JS 가 아홉 번째부터 새 ul 에 담으므로(list_next_num
   = 8, js/shop.category.navigation.js) 이 선이 9개와 나머지를 가른다.
   점선은 이 화면에서 유일하게 점선이라 겉돌았다 — 실선으로 맞춘다. */
.solune-shop-page .shop_select_to_html .menulist ul.left-border {
    margin-left: .375rem;
    padding-left: .375rem;
    border-left: 1px solid var(--solune-border);
}
.solune-shop-page .shop_select_to_html .option { outline: none; list-style: none; text-align: left; font-weight: 400; }
/* 선택자에 #sct_location 을 끼운 것은 css/shop-responsive.css:63 의
   `.solune-shop-page #sct_location a` 가 (1,1,1) 이라 클래스만으로는
   (0,3,1) 이어서 색을 못 이기기 때문이다. 그 규칙은 줄에 적힌 현재 위치
   링크를 옅게 두려는 것인데, 펼친 목록 안의 <a> 까지 잡아 항목 글자가
   --solune-muted-soft 로 내려앉았다(흰 바탕 대비 2.47:1).
   같은 까닭으로 그 시트의 a:hover(강조색)도 여기서 되돌린다.

   한 줄. 여백이 왼쪽 28 · 오른쪽 49 로 어긋나 있었고(영카트 기본값),
   그래서 긴 이름은 146 칸을 넘어 구분선을 밟았다("침구 & 홈텍스타일").
   시안대로 좌우를 같게 두고 칸 너비는 내용에 맡긴다. 지금 항목이 손잡이
   자체이므로 바탕도 <a> 가 받는다 — <li> 가 받으면 모서리가 안 둥글다. */
.solune-shop-page #sct_location .shop_select_to_html .option a {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .375rem .625rem;
    border-radius: .5rem;
    /* 줄 색은 #sct_location 의 --solune-muted 를 물려받아 흰 바탕에서
       3.1:1 밖에 안 됐다(본문 최소 4.5:1). 목록 안은 읽는 글이므로
       본문색으로 올린다 — 옅게 두는 것은 줄에 적힌 현재 위치까지다. */
    color: var(--solune-text);
    font-size: 13px;
    line-height: 1.4;
    transition: background-color .15s, color .15s;
}
.solune-shop-page #sct_location .shop_select_to_html .option a:hover,
.solune-shop-page #sct_location .shop_select_to_html .option.focus a,
.solune-shop-page #sct_location .shop_select_to_html .option.selected.focus a { background-color: var(--solune-surface-soft); color: var(--solune-text); }
.solune-shop-page #sct_location .shop_select_to_html .option.selected,
.solune-shop-page #sct_location .shop_select_to_html .option.selected a,
.solune-shop-page #sct_location .shop_select_to_html .option.selected a:hover { color: var(--solune-primary); font-weight: 700; }
/* 지금 보고 있는 분류에는 줄 끝에 점을 찍는다. 굵기와 색만으로는 목록을
   훑을 때 어느 것이 지금인지 눈에 잘 안 들어온다(시안도 같은 점을 쓴다). */
.solune-shop-page .shop_select_to_html .option.selected a::after {
    content: "";
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}
.solune-shop-page #sct_location .shop_select_to_html .option.disabled a { background-color: transparent; color: var(--solune-muted); cursor: default; }
/* 분류 이름. 1.1em 은 줄의 12px 에 곱해져 13.2px 가 되어 옆의 구분 기호 ·
   집 아이콘(12px)보다 커 줄이 들쭉날쭉했다. 줄 전체를 12px 한 값으로 둔다. */
.solune-shop-page .shop_select_to_html .category_title { color: var(--solune-text-soft); font-size: 12px; line-height: 1.5; }
/* 펼침 표시. 코어는 fa-chevron-circle-down(속이 찬 동그라미)을 찍는데 글자
   줄 옆에서 무겁고 낡아 보인다. 글리프만 얇은 꺾쇠로 바꾼다 —
   FontAwesome 4 의 fa-angle-down 이 \f107 이다. */
.solune-shop-page .shop_select_to_html .category_title i { margin-left: 4px; color: var(--solune-muted); font-size: 12px; }
.solune-shop-page .shop_select_to_html .category_title .fa-chevron-circle-down::before { content: "\f107"; }
@media (prefers-reduced-motion: reduce) {
    .solune-shop-page .shop_select_to_html .menulist, .solune-shop-page .shop_select_to_html .option { transition: none; }
}

/* 현재 위치 줄. 줄 자체의 간격 · 아래 여백 · 세로 맞춤은 여기가 아니라
   css/shop-responsive.css 가 갖고 있다 — 그 시트가 나중에 실려(순서 323 대 0)
   여기에 같은 선언을 두면 늘 진다. 여기서는 그 시트가 잡지 않는 것만 맡는다. */
.solune-shop-page #sct_location i.dividing-line { color: var(--solune-muted); font-size: 11px; }
/* 집 링크도 시안처럼 안쪽 여백을 갖는다. 그만큼 음수 마진으로 당겨 아이콘이
   본문 왼쪽 기준선 밖으로 나가지 않게 한다. */
.solune-shop-page #sct_location .go_home {
    padding: 6px 4px;
    margin-left: -4px;
    color: var(--solune-muted);
    font-size: 12px;
}
.solune-shop-page #sct_location .go_home:hover { color: var(--solune-primary); }
/* 마지막 낱말(지금 보고 있는 분류)만 진하게. 시안도 끝만 본문색이다. */
.solune-shop-page #sct_location .category_title.current { font-weight: 600; }

/* 분류 이름은 누르면 목록이 열리는 손잡이다. 시안은 그것을 칩으로 드러낸다 —
   높이 28 · 안쪽 0 8 · 모서리 6 이고, 올리면 옅은 바탕이 깔린다. 맨 글자로
   두면 어디를 눌러야 열리는지 드러나지 않고, 누를 자리도 글자 폭만큼으로
   좁다(실측 두 글자 42x26 → 58x28).

   선택자에 span 을 적어 한 칸 올린 것은 위쪽에 되살려 둔 영카트 규칙
   (.shop_select_to_html span)이 여백을 갖고 있기 때문이다. */
.solune-shop-page .shop_select_to_html span.category_title {
    display: inline-flex;
    height: 28px;
    align-items: center;
    padding: 0 8px;
    border-radius: 6px;
    transition: background-color .15s, color .15s;
}
.solune-shop-page .shop_select_to_html:is(:hover, :focus-within) span.category_title { background: var(--solune-surface-soft); }
/* 꺾쇠는 10px 로 줄이고, 열려 있는 동안 뒤집어 지금 펴진 것임을 알린다. */
.solune-shop-page .shop_select_to_html .category_title i {
    font-size: 10px;
    color: var(--solune-muted-soft);
    transition: transform .15s;
}
.solune-shop-page .shop_select_to_html:is(:hover, :focus-within) .category_title i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .solune-shop-page .shop_select_to_html span.category_title,
    .solune-shop-page .shop_select_to_html .category_title i { transition: none; }
}

/* 관리 톱니. 이 줄에서 모서리가 각진 유일한 단추였다(실측 radius 0).
   다른 아이콘 단추와 같은 모서리를 준다. 코어 스킨이 line-height:35px 과
   좌우 여백 10px 로 크기를 만들던 것을 격자 가운데 맞춤으로 바꿔, 톱니가
   상자 안에서 아래로 처지지 않게 한다. 36x36 이라는 크기 자체는 daisyUI
   .btn 이 정하므로 여기서 다시 적지 않는다(적어도 그쪽이 이긴다). */
.solune-shop-page .sit_admin a {
    display: inline-grid;
    padding: 0;
    place-items: center;
    border-radius: .5rem;
    line-height: 1;
}
.solune-shop-page .sit_admin a:hover { border-color: var(--solune-text); color: var(--solune-text); }

/* --- 사용후기 목록 (skin/shop/basic/itemuselist.skin.php) ---------------
   시안 `사용후기 목록 (3).html` 을 따른다. 치수·간격은 시안대로, 색은 사이트
   팔레트다 — 시안의 검정 단추·갈색 강조를 primary 로, 금색 별은 테마가 이미
   쓰는 --ondam-star 로 옮겼다(상품 상세의 별과 같은 색이어야 한다).

   검색 한 줄 → "전체 N건 · 평균 N.N★" → 카드 격자 → 페이지 넘김. 카드 안에는
   겹창으로 옮겨 갈 본문이 감춰져 있다.

   접는 기준은 화면 폭이 아니라 이 상자가 받은 폭이다(@container uc). */
.solune-shop-page .solune-uc { container: uc / inline-size; }

/* 검색 줄. 상품문의 목록(.solune-iq-search)과 같은 한 벌이다 — 두 화면이
   나란한 자리라 눈금이 어긋나면 오갈 때 눈에 걸린다. */
.solune-shop-page .solune-uc-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}
.solune-shop-page .solune-uc-selectwrap { position: relative; display: inline-flex; }
/* skins.css 의 body.solune-page :is(input[type=text], …, select) 가 (0,2,2) 로
   모서리를 10px 로 깔므로, 칸 규칙은 .solune-uc-search 를 끼워 (0,3,0) 으로
   올린다. */
.solune-shop-page .solune-uc-search :is(.solune-uc-select, .solune-uc-input) {
    box-sizing: border-box;
    height: 44px;
    border: 1px solid var(--solune-border-strong);
    border-radius: 8px;
    background: var(--solune-surface);
    color: var(--solune-text);
    padding: 0 14px;
    font-size: 14px;
    line-height: 42px;
}
/* 시안의 화살표는 SVG 배경인데 그 색은 다크에서 못 따라온다. 테두리로 그려
   currentColor 를 타게 한다. */
.solune-shop-page .solune-uc-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.solune-shop-page .solune-uc-selectwrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--solune-muted);
    border-bottom: 1.5px solid var(--solune-muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.solune-shop-page .solune-uc-input { flex: 1 1 200px; min-width: 0; }
.solune-shop-page .solune-uc-input::placeholder { color: var(--solune-muted); }
/* default.css 는 required 인 빈 칸마다 오른쪽 위에 빨간 별을 얹는다(폼용).
   검색 칸에는 시안대로 별을 두지 않는다 — 안내는 placeholder 가 한다.
   그 규칙이 (0,3,2) !important 라 같은 무게로 되돌린다. */
body.solune-page .solune-uc-search .solune-uc-input:invalid { background-image: none !important; }
.solune-shop-page .solune-uc-submit {
    display: inline-flex;
    height: 44px;
    align-items: center;
    border: 0;
    border-radius: 8px;
    background: var(--solune-primary);
    color: var(--solune-primary-ink);
    cursor: pointer;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 500;
}
.solune-shop-page .solune-uc-submit:hover { background: var(--solune-primary-hover); }

/* 건수 · 평균 · 전체보기 */
.solune-shop-page .solune-uc-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 0 0 16px;
    color: var(--solune-muted);
    font-size: 14px;
}
.solune-shop-page .solune-uc-total strong { color: var(--solune-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.solune-shop-page .solune-uc-star { margin-left: 3px; color: var(--ondam-star, #c9a227); }
.solune-shop-page .solune-uc-sep { margin: 0 .4em; }
.solune-shop-page .solune-uc-all { color: var(--solune-muted); text-decoration: underline; text-underline-offset: 3px; }
.solune-shop-page .solune-uc-all:hover { color: var(--solune-primary); }

/* 카드 격자. 한때 auto-fill minmax(280px) 로 두어 본문 기둥이 1216px 인
   화면에서 넷이 되었는데, 칸이 295px 뿐이라 제목과 발췌가 잘게 접혔다.
   칸 수를 못 박아 셋으로 두고 글자를 한 단 키운다 — 1216px 에서 칸이
   397px 다.

   세는 자는 화면 폭이 아니라 이 목록이 받은 폭이다(@container uc). 이
   테마에서 둘은 자주 어긋난다 — 사이드가 붙는 화면에서는 본문 기둥이
   화면보다 한참 좁다(CLAUDE.local.md). */
.solune-shop-page .solune-uc-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@container uc (max-width: 900px) {
    .solune-shop-page .solune-uc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container uc (max-width: 620px) {
    .solune-shop-page .solune-uc-list { grid-template-columns: minmax(0, 1fr); }
}
.solune-shop-page .solune-uc-item {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--solune-border);
    border-radius: 12px;
    background: var(--solune-surface);
    padding: 20px;
}

/* 상품 줄 */
.solune-shop-page .solune-uc-product { display: flex; min-width: 0; align-items: center; gap: 10px; }
.solune-shop-page .solune-uc-product-img {
    display: block;
    width: 44px;
    height: 44px;
    flex: none;
    overflow: hidden;
    border-radius: 8px;
    background: var(--solune-surface-soft);
}
.solune-shop-page .solune-uc-product-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.solune-shop-page .solune-uc-product-name {
    overflow: hidden;
    color: var(--solune-muted);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.solune-shop-page .solune-uc-product:hover .solune-uc-product-name { color: var(--solune-primary); }

/* 별점. 상품 상세의 별과 같은 글자 별·같은 색이다. */
.solune-shop-page .solune-uc-rate { display: flex; align-items: center; gap: 8px; margin: 0; }
.solune-shop-page .solune-uc-stars { color: var(--ondam-star, #c9a227); font-size: 15px; letter-spacing: 1px; line-height: 1; }
.solune-shop-page .solune-uc-score { color: var(--solune-muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* 제목과 두 줄 발췌 */
.solune-shop-page .solune-uc-title { margin: 0; color: var(--solune-text); font-size: 17px; font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.solune-shop-page .solune-uc-excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--solune-text-soft);
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

/* 후기 사진. 세 장까지 늘어놓고 나머지는 마지막 칸에 개수로 접는다.
   원본 주소를 그대로 쓰므로 칸 크기는 여기서 잡는다. */
.solune-shop-page .solune-uc-photos { display: flex; align-items: center; gap: 6px; }
.solune-shop-page .solune-uc-photo {
    display: grid;
    width: 64px;
    height: 64px;
    flex: none;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--solune-border);
    border-radius: 6px;
    background: var(--solune-surface-soft);
}
.solune-shop-page .solune-uc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.solune-shop-page .solune-uc-photo-more { border-style: dashed; color: var(--solune-muted); font-size: 13px; }

/* 바닥. 카드마다 글 길이가 달라도 이 줄은 아래에 붙는다(margin-top:auto). */
.solune-shop-page .solune-uc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--solune-muted);
    font-size: 13px;
}
.solune-shop-page .solune-uc-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 손잡이 둘("후기 바로가기" · "내용보기")을 한 덩이로 묶어 오른쪽 끝에 세운다.
   묶지 않으면 space-between 이 셋을 고루 벌려 이름·날짜가 가운데로 밀린다. */
.solune-shop-page .solune-uc-acts { display: flex; flex: none; align-items: center; gap: 10px; }
/* 바로가기는 화면을 옮기는 것이고 내용보기는 이 자리에서 여는 것이다.
   같은 무게로 두면 무엇이 무엇인지 헷갈려, 이쪽을 한 단 낮춘다. */
.solune-shop-page .solune-uc-go {
    flex: none;
    color: var(--solune-text-soft);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.solune-shop-page .solune-uc-go:hover { color: var(--solune-text); }
.solune-shop-page .solune-uc-go:focus-visible { outline: 2px solid var(--solune-primary); outline-offset: 3px; }
.solune-shop-page .solune-uc-more {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--solune-primary);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.solune-shop-page .solune-uc-more:hover { color: var(--solune-primary-hover); }

.solune-shop-page .solune-uc-empty { padding: 4rem 0; color: var(--solune-muted); text-align: center; font-size: 13px; }

/* ── 후기 상세 겹창 ────────────────────────────────────────────────
   스크립트가 카드 안에 감춰 둔 본문을 여기로 옮겨 담는다. 닫는 길이 셋이다 —
   닫기 단추 · 어두운 바탕 누르기 · Esc. */
body.solune-page .solune-uc-modal {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: none;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    padding: 24px;
}
body.solune-page .solune-uc-modal.is-open { display: flex; }
/* 겹창이 열려 있는 동안 뒤 목록이 따라 구르지 않게 한다. */
body.solune-page.solune-uc-modal-open { overflow: hidden; }
.solune-shop-page .solune-uc-modal-panel {
    display: flex;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--solune-border);
    border-radius: 16px;
    background: var(--solune-surface);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
}
.solune-shop-page .solune-uc-modal-head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--solune-border);
    padding: 18px 20px;
}
.solune-shop-page .solune-uc-modal-title { color: var(--solune-muted); font-size: 13px; font-weight: 500; }
.solune-shop-page .solune-uc-modal-close {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--solune-surface-soft);
    color: var(--solune-text);
    cursor: pointer;
    font-size: 14px;
}
.solune-shop-page .solune-uc-modal-close:hover { background: var(--solune-border); }
.solune-shop-page .solune-uc-modal-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding: 22px 24px 28px;
}

/* 겹창 안의 상품 줄 */
.solune-shop-page .solune-uc-detail-product-row { display: flex; align-items: stretch; gap: 8px; }
.solune-shop-page .solune-uc-detail-product {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--solune-border);
    border-radius: 10px;
    background: var(--solune-surface-soft);
    padding: 12px;
}
.solune-shop-page .solune-uc-detail-product-img {
    display: block;
    width: 48px;
    height: 48px;
    flex: none;
    overflow: hidden;
    border-radius: 8px;
    background: var(--solune-surface);
}
.solune-shop-page .solune-uc-detail-product-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.solune-shop-page .solune-uc-detail-product-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.solune-shop-page .solune-uc-detail-product-name { overflow: hidden; color: var(--solune-text); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.solune-shop-page .solune-uc-detail-product-go { color: var(--solune-primary); font-size: 12px; }
.solune-shop-page .solune-uc-detail-zoom {
    display: grid;
    width: 44px;
    flex: none;
    place-items: center;
    border: 1px solid var(--solune-border);
    border-radius: 10px;
    background: var(--solune-surface);
    color: var(--solune-muted);
    cursor: pointer;
    font-size: 14px;
}
.solune-shop-page .solune-uc-detail-zoom:hover { border-color: var(--solune-primary); color: var(--solune-primary); }

/* 겹창 안의 머리와 본문 */
.solune-shop-page .solune-uc-detail-head { display: flex; flex-direction: column; gap: 8px; }
.solune-shop-page .solune-uc-modal-body .solune-uc-stars { font-size: 15px; }
.solune-shop-page .solune-uc-modal-body .solune-uc-score { font-size: 13px; }
.solune-shop-page .solune-uc-detail-title { margin: 0; color: var(--solune-text); font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; text-wrap: pretty; }
.solune-shop-page .solune-uc-detail-who { margin: 0; color: var(--solune-muted); font-size: 13px; }
.solune-shop-page .solune-uc-detail-body { color: var(--solune-text); font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; text-wrap: pretty; }
.solune-shop-page .solune-uc-detail-body p { margin: 0 0 8px; }
.solune-shop-page .solune-uc-detail-body p:last-child { margin-bottom: 0; }
.solune-shop-page .solune-uc-detail-body :is(ul, ol) { margin: 0 0 8px; padding-left: 18px; }
.solune-shop-page .solune-uc-detail-body img { max-width: 100%; height: auto; border-radius: 8px; }

/* 관리자 답변 */
.solune-shop-page .solune-uc-detail-reply { border-top: 1px solid var(--solune-border); padding-top: 16px; }
.solune-shop-page .solune-uc-detail-reply-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--solune-text); font-size: 14px; font-weight: 600; }
.solune-shop-page .solune-uc-detail-reply-mark {
    border-radius: 999px;
    background: var(--solune-primary-soft);
    color: var(--solune-primary);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}
.solune-shop-page .solune-uc-detail-reply-who { margin: 0 0 8px; color: var(--solune-muted); font-size: 12px; }
.solune-shop-page .solune-uc-detail-reply .solune-uc-detail-body { font-size: 14px; }

/* 좁은 상자. 선택 상자가 한 줄을 다 쓰고 입력·검색이 다음 줄에 선다. */
@container uc (max-width: 560px) {
    .solune-shop-page .solune-uc-selectwrap { flex: 1 1 100%; }
    .solune-shop-page .solune-uc-select { width: 100%; }
}
@media (max-width: 39.9375rem) {
    body.solune-page .solune-uc-modal { padding: 12px; }
    .solune-shop-page .solune-uc-modal-panel { max-height: calc(100vh - 24px); }
    .solune-shop-page .solune-uc-modal-body { padding: 18px 16px 22px; }
    .solune-shop-page .solune-uc-detail-title { font-size: 17px; }
}

/* --- 상품 검색 (skin/shop/basic/search.skin.php) ------------------------
   시안 `상품검색 결과.html` 을 따른다. 치수·간격은 시안대로, 색은 사이트
   팔레트다 — 시안의 검정 단추·갈색 강조를 primary 로 옮겼다.

   검색 카드(검색어 · 검색범위 · 가격) → 분류 칩 → 결과 수와 정렬 칩 →
   상품 격자. 격자는 관리자가 고른 목록 스킨이 그리므로 여기서 손대지 않는다. */

/* 검색 카드. 이 화면의 주된 도구라 상자로 세운다 — 후기·문의 목록의 한 줄
   짜리 검색과 달리 걸러 볼 것이 여럿이다. */
.solune-shop-page .solune-ssch-form {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--solune-border);
    border-radius: 14px;
    background: var(--solune-surface);
    padding: 20px;
}
.solune-shop-page .solune-ssch-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.solune-shop-page .solune-ssch-field { position: relative; display: block; min-width: 240px; flex: 1 1 240px; }
/* skins.css 의 body.solune-page :is(input[type=text], …) 가 (0,2,2) 로 모서리와
   높이를 깔므로, 칸 규칙은 .solune-ssch-form 을 끼워 (0,3,0) 으로 올린다. */
.solune-shop-page .solune-ssch-form .solune-ssch-input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    border: 1px solid var(--solune-border-strong);
    border-radius: 10px;
    background: var(--solune-surface);
    color: var(--solune-text);
    padding: 0 44px 0 16px;
    font-size: 15px;
}
.solune-shop-page .solune-ssch-form .solune-ssch-input::placeholder { color: var(--solune-muted); }
/* 지우개. 칸 안 오른쪽에 앉되 글자와 겹치지 않게 위에서 44px 를 비워 두었다. */
.solune-shop-page .solune-ssch-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--solune-surface-soft);
    color: var(--solune-muted);
    cursor: pointer;
    font-size: 12px;
    transform: translateY(-50%);
}
.solune-shop-page .solune-ssch-clear:hover { background: var(--solune-border); color: var(--solune-text); }
.solune-shop-page .solune-ssch-submit {
    display: inline-flex;
    height: 48px;
    flex: none;
    align-items: center;
    border: 0;
    border-radius: 10px;
    background: var(--solune-primary);
    color: var(--solune-primary-ink);
    cursor: pointer;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 500;
}
.solune-shop-page .solune-ssch-submit:hover { background: var(--solune-primary-hover); }

/* 설명 풍선 */
.solune-shop-page .solune-ssch-tip { position: relative; display: flex; flex: none; align-items: center; margin-left: 2px; }
.solune-shop-page .solune-ssch-tip-btn {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid var(--solune-border-strong);
    border-radius: 50%;
    background: var(--solune-surface);
    color: var(--solune-muted);
    cursor: help;
    padding: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.solune-shop-page .solune-ssch-tip-btn:hover { border-color: var(--solune-text); color: var(--solune-text); }
.solune-shop-page .solune-ssch-tip-box {
    position: absolute;
    z-index: 10;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    max-width: 80vw;
    border-radius: 10px;
    background: var(--solune-text);
    color: var(--solune-surface);
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.65;
    text-wrap: pretty;
    box-shadow: var(--solune-shadow-md);
    /* 닫혀 있을 때는 자리를 차지하지 않아야 옆 칸이 밀리지 않는다. */
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s ease;
}
.solune-shop-page .solune-ssch-tip.is-open .solune-ssch-tip-box { visibility: visible; opacity: 1; }
.solune-shop-page .solune-ssch-tip-box::after {
    content: "";
    position: absolute;
    top: -5px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: var(--solune-text);
    transform: rotate(45deg);
}

/* 검색범위와 가격. 윗줄과 가는 선으로 나눈다. */
.solune-shop-page .solune-ssch-opts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    border-top: 1px solid var(--solune-border);
    padding-top: 14px;
}
.solune-shop-page .solune-ssch-scope {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    border: 0;
    margin: 0;
    padding: 0;
}
.solune-shop-page .solune-ssch-optlabel { color: var(--solune-muted); font-size: 13px; }
.solune-shop-page .solune-ssch-check {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--solune-text);
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}
.solune-shop-page .solune-ssch-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--solune-primary);
    cursor: pointer;
}
.solune-shop-page .solune-ssch-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.solune-shop-page .solune-ssch-form .solune-ssch-money {
    box-sizing: border-box;
    width: 96px;
    height: 38px;
    border: 1px solid var(--solune-border-strong);
    border-radius: 8px;
    background: var(--solune-surface);
    color: var(--solune-text);
    padding: 0 12px;
    font-size: 14px;
    text-align: right;
}
.solune-shop-page .solune-ssch-unit { color: var(--solune-muted); font-size: 13px; }

/* 분류 칩. 지금 걸린 것은 채워 그린다.

   한 줄로 두고 넘치면 가로로 굴린다. 검색어 없이 들어오면 온 상품이 걸려
   분류가 백 개를 넘는데(실측 114개), 접어 두면 칩만 여덟 줄이 되어 상품이
   화면 밖으로 밀린다. 전체검색의 게시판 칩(.sch-boards)과 같은 방식이다. */
.solune-shop-page .solune-ssch-cates {
    display: flex;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding: 16px 0 4px;
    scrollbar-width: none;
}
.solune-shop-page .solune-ssch-cates::-webkit-scrollbar { display: none; }
.solune-shop-page .solune-ssch-cate { flex: none; white-space: nowrap; }
.solune-shop-page .solune-ssch-cate {
    display: flex;
    height: 34px;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--solune-border-strong);
    border-radius: 999px;
    background: var(--solune-surface);
    color: var(--solune-text-soft);
    cursor: pointer;
    padding: 0 14px;
    font-family: inherit;
    font-size: 13px;
}
.solune-shop-page .solune-ssch-cate span { color: var(--solune-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.solune-shop-page .solune-ssch-cate:hover { border-color: var(--solune-primary); color: var(--solune-primary); }
.solune-shop-page .solune-ssch-cate.is-on {
    border-color: var(--solune-primary);
    background: var(--solune-primary);
    color: var(--solune-primary-ink);
    font-weight: 600;
}
.solune-shop-page .solune-ssch-cate.is-on span { color: inherit; opacity: .75; }

/* 결과 수와 정렬 */
.solune-shop-page .solune-ssch-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    border-bottom: 1px solid var(--solune-border);
    margin-bottom: 24px;
    padding: 12px 0 16px;
}
.solune-shop-page .solune-ssch-count { margin: 0; color: var(--solune-text-soft); font-size: 15px; text-wrap: pretty; }
.solune-shop-page .solune-ssch-count strong { color: var(--solune-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.solune-shop-page .solune-ssch-word { color: var(--solune-primary); font-weight: 700; }
.solune-shop-page .solune-ssch-sorts { display: flex; flex-wrap: wrap; gap: 2px; }
.solune-shop-page .solune-ssch-sort {
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--solune-muted);
    cursor: pointer;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
}
.solune-shop-page .solune-ssch-sort:hover { color: var(--solune-text); }
.solune-shop-page .solune-ssch-sort.is-on { background: var(--solune-surface-soft); color: var(--solune-text); font-weight: 700; }

/* 찾은 것이 없을 때 */
.solune-shop-page .solune-ssch-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 80px 24px;
    text-align: center;
}
.solune-shop-page .solune-ssch-empty-title { margin: 0; color: var(--solune-text); font-size: 16px; font-weight: 500; }
.solune-shop-page .solune-ssch-empty-desc { margin: 0; color: var(--solune-muted); font-size: 13px; text-wrap: pretty; }

@media (max-width: 39.9375rem) {
    .solune-shop-page .solune-ssch-form { border-radius: 12px; padding: 16px; }
    .solune-shop-page .solune-ssch-opts { gap: 12px 16px; }
    .solune-shop-page .solune-ssch-tip-box { right: auto; left: 0; }
    .solune-shop-page .solune-ssch-tip-box::after { right: auto; left: 6px; }
}

/* --- Swiper 가 아직 서지 않았을 때 ---------------------------------------
   Swiper 는 세워질 때 슬라이드마다 폭을 직접 적어 준다. 그 전에는 제 CSS 의
   `.swiper-slide { width: 100% }` 가 남아 한 장이 줄을 통째로 차지하고 줄
   높이도 그만큼 부푼다 — 실측으로 후기 줄이 350 에서 1,395px 로, 홈 전체가
   5,500 에서 6,400px 로 늘었다.

   지금은 각 스크립트가 제 마크업 바로 뒤에서 곧바로 세우므로 이 상태가 눈에
   띌 틈이 거의 없다. 다만 Swiper 는 바깥 CDN 에서 오는 것이라 늦거나 막힐 수
   있으니, 그때도 한 줄로 보이게 받쳐 둔다.

   폭은 내용에 맡기고 위만 막는다 — 줄마다 다른 slidesPerView 를 여기 다시
   적으면 스크립트와 두 곳에서 관리하게 된다. 배너는 뺀다. 거기서는 한 장이
   줄을 다 차지하는 것이 세워진 뒤의 모습과 같다. */
.solune-shop-page :is(.solune-catrow-swiper, .solune-review-swiper, .solune-shop-swiper):not(.swiper-initialized) .swiper-slide {
    width: auto;
    max-width: 33.333%;
}

/* 홈 후기 카드의 제목은 그 후기로 가는 손잡이다. 카드 안에서 제목처럼
   보이되 누를 수 있다는 것은 hover 와 초점으로 알린다. */
.solune-shop-page .ondam-review-title a { color: inherit; text-decoration: none; }
.solune-shop-page .ondam-review-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.solune-shop-page .ondam-review-title a:focus-visible { outline: 2px solid var(--solune-primary); outline-offset: 3px; }

/* 목록에서 건너온 한 줄 — 후기(.sit_use_li)도 문의(.sit_qa_li)도 같다.
   서버가 그것이 실린 쪽을 펴 두고, 스크립트가 탭을 열어 여기로 데려온다.

   한때는 강조색 바탕(--solune-primary-soft)에 왼쪽 띠, 거기에 2px 초록
   테두리까지 겹쳐 있었다. 후기는 펴면 화면 반을 넘게 차지해서 그만한
   넓이가 통째로 초록으로 물들고, 테두리까지 둘러 "고른 입력칸" 처럼
   보였다. 지금은 셋 중 색을 쓰는 것은 왼쪽 띠 하나뿐이다 — 바탕은
   중립색 카드로 깔고, 띠가 어느 줄인지를 가리킨다.

   좌우로 20 씩 넓혀 카드가 글보다 조금 밖으로 나오게 한다. 안쪽으로
   좁히면 그 줄만 들여쓰기 된 것처럼 보여 오히려 어긋나 보인다.
   아래 구분선은 둥근 모서리를 가로질러 끊기므로 그 줄에서만 감춘다. */
.solune-shop-page :is(.sit_use_li, .sit_qa_li).solune-review-focus {
    position: relative;
    margin-inline: -1.25rem;
    border-bottom-color: transparent;
    border-radius: .75rem;
    padding-inline: 1.25rem;
    background: var(--solune-surface-soft);
}
/* 왼쪽 띠. inset box-shadow 로 그리면 둥근 모서리를 따라 휘어 초승달이
   되므로 따로 세운다. grid 인 줄 안에서도 absolute 라 칸을 차지하지 않는다. */
.solune-shop-page :is(.sit_use_li, .sit_qa_li).solune-review-focus::before {
    content: "";
    position: absolute;
    left: .5rem;
    top: 1.25rem;
    bottom: 1.25rem;
    width: 3px;
    border-radius: 999px;
    background: var(--solune-primary);
}
/* 초점 테두리는 :focus 가 아니라 :focus-visible 로 건다. 이 줄은
   tabindex="-1" 이라 탭으로는 닿지 않고 스크립트가 옮겨 줄 때만 초점을
   받는데, :focus 로 두면 마우스로 건너온 사람에게도 늘 테두리가 그려져
   위에 적은 "고른 입력칸" 모양이 된다. 키보드로 온 사람에게는 그대로
   그려지므로 표시를 없애는 것이 아니다. */
.solune-shop-page :is(.sit_use_li, .sit_qa_li).solune-review-focus:focus-visible {
    outline: 2px solid var(--solune-primary);
    outline-offset: 2px;
}

/* --- 상품 카드의 사진 겹쳐 보기 (daisyUI hover-gallery) ------------------
   상품마다 사진이 여러 장이면 카드 사진을 figure.hover-gallery 로 낸다
   (theme_functions.php 의 theme_shop_item_list). 동작 규칙은 daisyUI 가
   가지고 있고, 여기서는 그것을 카드의 네모 안에 앉히기만 한다.

   daisyUI 는 figure 에 width:100% 만 준다. 카드 사진 칸(.sct_img)은
   aspect-ratio 1/1 짜리 상자라 높이를 따로 채워 줘야 한다. margin 을 0 으로
   적어 두는 것은 figure 의 기본 여백(40px)에 대한 대비다 — 지금은 daisyUI
   preflight 가 지워 주지만, 그것이 없는 자리에서도 무너지지 않게 한다. */
.solune-shop-page .sct_img .hover-gallery {
    display: grid;
    width: 100%;
    height: 100%;
    margin: 0;
}
/* 다른 장을 얹는 동안 첫 장을 뺀다. daisyUI 가 같은 일을 하는 규칙을 이미
   가지고 있지만(.hover-gallery:has(:hover)>:first-child) 클래스 하나짜리라,
   shop.css 의 `.solune-shop-page .sct_img img { display: block }` 에 진다.
   드러난 장이 위에 그려지므로 눈에는 같아 보이지만, 배경이 비치는 그림이면
   아래 첫 장이 겹쳐 보인다. 같은 규칙을 한 칸 올려 다시 적는다. */
.solune-shop-page .sct_img .hover-gallery:has(:hover) > :first-child { display: none; }

/* 여기에 opacity 전환을 걸지 않는다. 한때 .18s 페이드를 두었는데 깜빡였다 —
   첫 장은 :has(:hover) 로 그 프레임에 곧바로 사라지는데 드러날 장은 0 에서
   서서히 올라와, 그 사이 카드 바탕이 비친다(실측: 40ms 시점에 새 장이 0.64).
   띠를 옮길 때는 더 심하다. 나가는 장 0.16 · 들어오는 장 0.47 로 둘 다
   반투명이라 어느 쪽도 바탕을 가리지 못한다.

   daisyUI 도 전환을 두지 않는다. 두 규칙이 같은 :hover 상태에서 한 번에
   계산되므로, 전환이 없으면 사라짐과 드러남이 같은 프레임에 일어나 틈이
   생기지 않는다. 부드럽게 하고 싶으면 opacity 가 아니라 첫 장을 깔아 둔 채
   위에 겹치는 방식이어야 한다. */

/* --- 후기 슬라이드의 쪽 표시 (홈 "고객님이 남긴 후기") ------------------
   Swiper 는 .swiper-pagination 을 창 아래 가운데에 절대배치하지만, 이 표시는
   창 밖 형제라 그 값들이 오히려 방해가 된다. 자리는 여기서 직접 잡는다.

   배너의 막대 표시(shop-carousel.css)와 다른 모양을 쓴다. 그쪽 막대는 자동
   넘김이 얼마나 남았는지 채워 보이는 것인데 여기에는 자동 넘김이 없어, 같은
   막대를 쓰면 차지 않는 빈 막대가 된다. 대신 점을 쓰고 지금 쪽만 알약으로
   늘린다.

   Swiper 의 기본 규칙은 클래스 하나(0,1,0)라 아래 (0,2,0) · (0,3,0) 이
   순서와 무관하게 이긴다. 이 스킨 시트는 순서 0 으로 Swiper 시트(10)보다
   먼저 실리므로 특정도로 이겨 두어야 한다. */
.solune-shop-page .solune-review-pagination {
    position: static;
    display: flex;
    width: auto;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    bottom: auto !important;
    transform: none;
}
.solune-shop-page .solune-review-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--solune-text) 24%, transparent);
    opacity: 1;
    transition: width .2s ease, background-color .2s ease;
}
.solune-shop-page .solune-review-pagination .swiper-pagination-bullet:hover {
    background: color-mix(in srgb, var(--solune-text) 45%, transparent);
}
.solune-shop-page .solune-review-pagination .swiper-pagination-bullet-active {
    width: 24px;
    background: var(--solune-text);
}
/* 점은 눌러서 쪽을 옮기는 단추다. 초점 표시를 지우지 않는다. */
.solune-shop-page .solune-review-pagination .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--solune-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .solune-shop-page .solune-review-pagination .swiper-pagination-bullet { transition: none; }
}

/* --- 쿠폰존 (skin/shop/basic/couponzone.10.skin.php) --------------------
   시안 `쿠폰존 v2.html` 을 따른다. 쿠폰 하나가 가로로 긴 줄 하나이고, 왼쪽에
   그림 · 가운데에 종류와 금액과 조건 · 오른쪽에 받기 단추가 선다. 치수·간격은
   시안대로, 색은 사이트 팔레트다.

   단추 선택자에 클래스를 셋 겹치는 까닭 — 마크업에 코어가 요구하는 btn02 가
   함께 붙어 있고, 그 이름을 잡는 규칙이 나중에 실리는 시트에 있다. 같은
   특정도면 나중 것이 이기므로 한 칸 올려 둔다. */
.solune-shop-page .solune-cz-lead { margin: 0 0 28px; color: var(--solune-muted); font-size: 14px; text-wrap: pretty; }
.solune-shop-page .solune-cz-lead a { color: var(--solune-primary); text-decoration: underline; text-underline-offset: 3px; }

.solune-shop-page .solune-cz-group { margin-bottom: 2.5rem; }
.solune-shop-page .solune-cz-sub { margin: 0 0 8px; color: var(--solune-muted); font-size: 13px; text-wrap: pretty; }

.solune-shop-page .solune-cz-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.solune-shop-page .solune-cz-item {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid var(--solune-border);
    padding: 22px 0;
}
/* 그림은 관리자가 올린 쿠폰 이미지다. 비율이 제각각이라 잘라서 채운다.
   스킨이 264x176(이 자리의 두 배) 썸네일을 만들어 넘기므로 여기서는 칸만 잡는다. */
.solune-shop-page .solune-cz-thumb {
    width: 132px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border: 1px solid var(--solune-border);
    border-radius: 10px;
    background-color: var(--solune-surface-soft);
}
.solune-shop-page .solune-cz-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.solune-shop-page .solune-cz-body { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.solune-shop-page .solune-cz-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.solune-shop-page .solune-cz-method { color: var(--solune-primary); font-size: 11px; font-weight: 500; letter-spacing: .04em; }
/* 마감이 가까운 쿠폰. 값이 깎이는 색(--ondam-sale)을 옅게 깔아 다른 표시와
   섞이지 않게 한다. */
.solune-shop-page .solune-cz-urgent {
    border-radius: 999px;
    background: color-mix(in srgb, var(--ondam-sale, #b6543a) 14%, transparent);
    color: var(--ondam-sale, #b6543a);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
}
.solune-shop-page .solune-cz-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0; }
.solune-shop-page .solune-cz-amount { color: var(--solune-text); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.solune-shop-page .solune-cz-unit { margin-left: 2px; font-size: 15px; font-weight: 600; }
.solune-shop-page .solune-cz-name { color: var(--solune-text); font-size: 15px; font-weight: 500; line-height: 1.4; text-wrap: pretty; }
/* 조건 줄. 항목 사이는 간격으로만 가른다 — 가운뎃점을 넣으면 줄이 접힐 때
   점이 줄 앞에 남는다. */
.solune-shop-page .solune-cz-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--solune-muted); font-size: 12px; line-height: 1.5; }
.solune-shop-page .solune-cz-meta a { color: var(--solune-text-soft); text-decoration: underline; text-underline-offset: 3px; }
.solune-shop-page .solune-cz-meta a:hover { color: var(--solune-primary); }

.solune-shop-page .solune-cz-act { display: flex; min-width: 96px; justify-content: flex-end; }
.solune-shop-page .solune-cz-act .solune-cz-get {
    display: inline-flex;
    height: 40px;
    align-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--solune-primary);
    color: var(--solune-primary-ink);
    cursor: pointer;
    padding: 0 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.solune-shop-page .solune-cz-act .solune-cz-get:hover { background: var(--solune-primary-hover); }
/* 코어 스크립트가 받은 뒤 .disabled 를 붙이고 그대로 둔다(속성은 도로 뗀다).
   눌러도 "이미 받았다"는 알림만 나오므로 눈에도 그렇게 보이게 한다. */
.solune-shop-page .solune-cz-act .solune-cz-get.disabled {
    background: var(--solune-surface-soft);
    color: var(--solune-muted);
    cursor: default;
}
.solune-shop-page .solune-cz-act .solune-cz-get.disabled:hover { background: var(--solune-surface-soft); }
.solune-shop-page .solune-cz-taken {
    display: inline-flex;
    height: 40px;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--solune-border-strong);
    border-radius: 999px;
    color: var(--solune-primary);
    padding: 0 16px;
    font-size: 13px;
    white-space: nowrap;
}

.solune-shop-page .solune-cz-empty { border: 0; padding: 72px 24px; color: var(--solune-muted); text-align: center; font-size: 14px; }

/* 쿠폰마다 되풀이하지 않아도 되는 규칙. 맨 아래 한 번만 적는다. */
.solune-shop-page .solune-cz-notes { display: flex; flex-direction: column; gap: 6px; margin-top: 36px; color: var(--solune-muted-soft); font-size: 12px; line-height: 1.6; }

@media (max-width: 39.9375rem) {
    /* 좁은 폭에서는 받기 단추를 아래 줄로 내리고 줄 전체 너비로 편다 —
       오른쪽에 두면 가운데 글이 100px 남짓으로 눌린다. */
    .solune-shop-page .solune-cz-item { grid-template-columns: 96px minmax(0, 1fr); gap: 12px 14px; }
    .solune-shop-page .solune-cz-thumb { width: 96px; }
    .solune-shop-page .solune-cz-act { grid-column: 1 / -1; min-width: 0; }
    .solune-shop-page .solune-cz-act .solune-cz-get,
    .solune-shop-page .solune-cz-taken { width: 100%; justify-content: center; }
    .solune-shop-page .solune-cz-amount { font-size: 22px; }
}

/* --- 개인결제 리스트 (skin/shop/basic/personalpay.skin.php) --------------
   시안 `개인결제 리스트 (1).html` 을 따른다. 카드 하나가 그림(1:1) · 이름 ·
   금액이고 네 칸이 기둥을 꽉 채운다. 치수는 시안대로, 색은 사이트 팔레트다.

   칸 수를 세는 자는 화면 폭이 아니라 목록이 받은 폭이다(@container pp).
   컨테이너는 바깥 상자에 둔다 — 격자를 가진 ul 자신에 두면 제 폭으로 제
   규칙을 바꾸는 꼴이라 걸리지 않는다. */
.solune-shop-page .solune-pp { container: pp / inline-size; }
.solune-shop-page .solune-pp-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@container pp (max-width: 900px) {
    .solune-shop-page .solune-pp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container pp (max-width: 660px) {
    .solune-shop-page .solune-pp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* 한 칸까지 내려가는 자리는 아주 좁을 때뿐이다. 390 짜리 화면(목록 폭 358)
   에서 한 칸으로 두면 카드가 442px 씩 스물다섯 장이라 화면이 11,000px 가
   된다. 상품 목록도 그 폭에서 두 칸이다. */
@container pp (max-width: 300px) {
    .solune-shop-page .solune-pp-list { grid-template-columns: minmax(0, 1fr); }
}
.solune-shop-page .solune-pp-item { min-width: 0; }
/* 카드 전체가 링크다. 줄마다 글 길이가 달라도 금액은 아래에 붙는다. */
.solune-shop-page .solune-pp-card {
    display: flex;
    box-sizing: border-box;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--solune-border);
    border-radius: 16px;
    background: var(--solune-surface);
    color: var(--solune-text);
}
.solune-shop-page .solune-pp-card:hover { border-color: var(--solune-text); color: var(--solune-text); }
.solune-shop-page .solune-pp-thumb { display: block; }
.solune-shop-page .solune-pp-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--solune-surface-soft);
    object-fit: cover;
}
.solune-shop-page .solune-pp-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
.solune-shop-page .solune-pp-title { font-size: 14px; font-weight: 500; line-height: 1.45; text-wrap: pretty; }
.solune-shop-page .solune-pp-price {
    margin-top: auto;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.solune-shop-page .solune-pp-won { margin-left: 2px; font-size: 13px; font-weight: 600; }

/* 글자색만 따로, 한 칸 더 세게. 이 목록은 코어가 만든 #sct 안에 들어가는데,
   skins.css 에 `body.solune-shop-page :is(…, #sct, …) :is(h1, …, span, …)` 로
   span 을 싸잡아 옅은 글자색으로 돌리는 규칙이 있다. id 가 든 (1,3,2) 라
   클래스만으로는 못 이긴다 — 카드 이름과 금액이 본문색이 아니라 옅은 색으로
   나왔다. #sct 와 클래스 하나를 더 끼워 (1,4,1) 로 올린다.
   (같은 함정을 배너 글에서도 겪었다. CLAUDE.local.md 참고) */
body.solune-shop-page #sct .solune-pp .solune-pp-card :is(.solune-pp-title, .solune-pp-price) {
    color: var(--solune-text);
}
/* 단위는 숫자보다 한 단 옅게. 위 규칙에 걸리지 않아 저절로 그렇게 되기는
   하지만(그 자리가 곧 skins.css 가 옅게 칠하는 자리다) 뜻을 적어 둔다 —
   그 규칙이 바뀌면 색이 따라 바뀌어 버린다. */
body.solune-shop-page #sct .solune-pp .solune-pp-card .solune-pp-won {
    color: var(--solune-text-soft);
}


/* ── 상품 상세: 새 나온 코어 조각 다듬기 ─────────────────────────
   상품 상세(item.php)에서 스타일이 하나도 안 붙어 브라우저 기본값(16px/400)
   으로 그려지던 것들을 맡는다. 관련 규칙 대부분은 css/shop-detail.css 에 있고,
   여기는 그 시트가 잡지 않던 자리만 더한다(쇼핑몰 CSS 는 이 파일에 쓴다는
   지시에 따름). 이 시트는 순서 0 이라 shop-detail.css(320)보다 먼저 실리므로,
   그 시트와 겹치는 선언은 쓰지 않는다 — 아래는 모두 무주공산이던 선택자다. */

/* 탭 이름과 겹치는 구역 제목은 눈에서만 감춘다. 내용은 남겨 낭독기와 문서
   구조에는 그대로 있게 한다. 바로 위 탭에 같은 말이 이미 적혀 있어, 보이면
   같은 제목이 두 번 읽힌다.

   "상품 상세설명" 만 골라내려고 :has(+ #sit_inf_explan) 를 쓴다. #sit_inf 의
   직계 h3 에는 그것과 "상품 정보 고시" 둘이 있는데, 한때 `#sit_inf > h3` 로
   싸잡았더니 시안에도 있는 정보 고시 제목까지 사라졌다 — 표(#sit_inf_open)만
   제목 없이 남아 무슨 표인지 알 수 없었다(soluneshop05 에서 실측). */
.solune-shop-page #sit_inf > h2.contents_tit,
.solune-shop-page #sit_inf > h3:has(+ #sit_inf_explan),
.solune-shop-page #sit_use > h2,
.solune-shop-page #sit_qa > h2,
.solune-shop-page #sit_dex > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* 남는 제목은 진짜 구역 이름이라 시안의 치수를 준다 — 상품 정보 고시,
   배송/교환 탭의 '배송'·'교환'. 시안(상세 탭 v2)은 이 자리를 15px · 700 으로
   두고 아래에 진한 줄을 하나 긋는다. 표가 제 윗줄을 이미 갖고 있으므로
   줄은 겹치지 않게 제목에만 둔다. */
.solune-shop-page #sit_inf > h3,
.solune-shop-page #sit_dex h3 {
    margin: 2.5rem 0 .875rem;
    color: var(--solune-text);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.4;
}
/* 위 여백은 제목이 아니라 감싸는 상자가 맡는다. 한때 h3:first-of-type 으로
   첫 제목만 붙이려 했는데, :first-of-type 은 부모마다 따로 세므로 #sit_dvr 의
   '배송'과 #sit_ex 의 '교환'이 둘 다 첫째로 잡혀 교환 위가 붙어 버렸다
   (실측: 배송 본문 끝과 교환 제목 사이 23px). */
.solune-shop-page #sit_dex h3 { margin-top: 0; }
.solune-shop-page #sit_dex #sit_ex { margin-top: 2.5rem; }

/* 배송·교환 안내 본문. 상세 설명(#sit_inf_explan)과 같은 결로 둔다 —
   지금은 브라우저 기본 16px 로 나와 제목보다 커 보였다. */
.solune-shop-page #sit_dex #sit_dvr,
.solune-shop-page #sit_dex #sit_ex {
    color: var(--solune-text-soft);
    font-size: .9rem;
    line-height: 1.85;
}

/* ── 이전 / 다음 상품 줄 ────────────────────────────────────
   #sit_siblings 는 코어가 만든 링크 두 개를 담기만 하는 상자다. 스타일이
   하나도 없어 '이전상품' 이 상세 아래 왼쪽에 맨 글씨로 홀로 떠 있었다
   (실측 1216x26 · 여백 0 · 위선 0 · 16px). 시안에는 이 줄이 아예 없어
   맞출 본이 없으므로, 게시판 목록의 페이지 넘김과 같은 결로 조용히 둔다 —
   구역을 여는 가로선 하나에 양 끝으로 갈라 세운다.

   한쪽만 있을 때(이 분류의 첫 상품이면 '다음'만 있다) 남은 하나가 제자리에
   서도록 '다음'을 margin-left:auto 로 오른쪽에 붙인다. */
.solune-shop-page #sit_siblings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--solune-border);
}
.solune-shop-page #sit_siblings a {
    color: var(--solune-text-soft);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}
.solune-shop-page #sit_siblings a:hover,
.solune-shop-page #sit_siblings a:focus-visible { color: var(--solune-primary); }
.solune-shop-page #sit_siblings #siblings_next { margin-left: auto; }
/* 다른 상품이 없으면 낭독기용 문구 하나만 남는다. 그때는 줄을 내지 않는다. */
.solune-shop-page #sit_siblings:not(:has(a)) {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* 관련상품은 진짜 구역 제목이라 감추지 않고 시안의 제목 치수를 준다
   (온담 시안의 구역 제목: 20px · 700 · 자간 -.02em). */
.solune-shop-page #sit_rel > h2 {
    margin: 0 0 1.125rem;
    color: var(--solune-text);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
}

/* 공유 패널은 닫아 둔다.

   .sns_area 는 공유 단추를 눌렀을 때만 열리는 쪽지다 —
   item.form.skin.php 의 스크립트가 .show() / .hide() 로 여닫는다. 그런데
   닫아 두는 규칙이 어디에도 없어 늘 열려 있었고, 그 안의 '추천하기' 봉투
   아이콘이 별점 줄 아래에 홀로 떠 보였다(실측 x=1288 · 12x15px).
   jQuery 의 .show() 는 인라인 display 를 박으므로 이 규칙을 이긴다. */
.solune-shop-page #sit_btn_opt .sns_area {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 20;
    /* 여는 것은 스크립트다(.show() 가 인라인 display:block 을 박아 이 값을
       이긴다). 그래서 여기서는 flex 로 바꾸려 들지 않는다 — 한때
       [style*="block"] 에 display:flex !important 를 걸었더니, .hide() 가
       display:none 을 박은 뒤에도 그 선택자가 맞아떨어져 패널이 닫히지
       않았다. 링크는 inline 이라 block 안에서도 한 줄로 선다. */
    display: none;
    padding: .625rem .75rem;
    border: 1px solid var(--solune-border);
    border-radius: .625rem;
    background: var(--solune-surface);
    box-shadow: 0 10px 24px rgba(16, 24, 40, .12);
    white-space: nowrap;
}
.solune-shop-page #sit_btn_opt { position: relative; }
.solune-shop-page #sit_btn_opt .sns_area a {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    vertical-align: middle;
    border-radius: 50%;
    color: var(--solune-text-soft);
}
.solune-shop-page #sit_btn_opt .sns_area a + a { margin-left: .25rem; }
.solune-shop-page #sit_btn_opt .sns_area a:hover { background: var(--solune-surface-soft); color: var(--solune-primary); }


/* ── 상품문의: 처음에는 접어 둔다 ────────────────────────────
   답까지 다 펴 두면 문의 다섯 줄이 화면을 한참 넘겨, 어떤 문의가 있는지
   훑을 수가 없었다. 제목 줄을 누르면 열린다 — 여닫는 것은 스킨의
   스크립트(itemqa.skin.php)가 slideUp/slideDown 으로 하고, 그 인라인
   display 가 이 규칙을 이긴다. 화살표 방향은 aria-expanded 를 보고 돈다
   (shop-pages.css).

   자바스크립트가 꺼져 있으면 누를 수가 없다. 그래서 주소로 한 줄을 가리킨
   경우(#iq_123 — 문의 목록의 '문의 바로가기'가 그렇게 보낸다)에는 :target
   으로 그 줄만 펴 둔다. 적어도 찾아온 문의는 읽을 수 있다. */
.solune-shop-page .sit_qa_con { display: none; }
.solune-shop-page .sit_qa_li:target .sit_qa_con { display: block; }


/* ── 상품 상세: 시안(2026-09-21 '상품 상세.html') 치수 맞추기 ───────
   시안은 Claude Design 캔버스로 왔다(안쪽 <x-dc> 조각에 실제 값이 있다).
   치수 · 간격 · 굵기 · 비율만 옮기고 색은 사이트 팔레트를 그대로 쓴다 —
   시안의 베이지 · 금색 계열을 그대로 들이면 이 화면만 사이트에서 겉돈다.
   시안이 제목과 값에 쓰는 Noto Serif KR 도 들이지 않았다. 본문 글꼴을
   바꾸는 것은 치수가 아니라 정체성이고, 지금 테마 어디에도 명조가 없다.

   이 시트는 순서 0 이라 shop.css · shop-detail.css(320) · shop-carousel.css
   보다 먼저 실린다. 그 시트들이 이미 잡아 둔 자리를 덮어야 하므로 선택자
   앞에 body 를 붙여 특정도를 한 칸 올린다 — 저쪽이 `.solune-shop-page #id`
   로 (1,1,0)~(1,2,1) 이다. `> *` 로 뭉뚱그리지 않고 자식을 하나씩 적은
   것도 같은 까닭이다(저쪽 `.solune-shop-page #sit_ov .sit_info` 가 (1,2,0)
   이라 (1,1,1) 짜리 뭉뚱그린 규칙에 진다). */

/* 1) 위쪽 두 칸. 시안은 [남는 폭 : 440] 에 사이 64 다. 지금은 617:559 로
      거의 반반이라 사진이 정보 칸만큼밖에 크지 않았다. */
body.solune-shop-page #sit_ov_wrap {
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 4rem;
    align-items: start;
}
body.solune-shop-page #sit_ov { padding: 0; }

/* 2) 사진 칸. 큰 그림과 썸네일 줄 사이는 14 하나로만 벌린다 — 썸네일
      상자가 들고 있던 margin-top 을 거두고 #sit_pvi 의 gap 에 맡긴다. */
body.solune-shop-page #sit_pvi {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}
body.solune-shop-page #sit_pvi_big { border-radius: 1rem; }
body.solune-shop-page .solune-sit-thumbs { margin-top: 0; }

/* 썸네일은 시안처럼 네 칸으로 줄을 채운다. 칸 수와 사이 간격은 Swiper 가
   정하므로 item.form.skin.php 의 초기값(slidesPerView 4 · spaceBetween 10)과
   짝이다. 여기서는 한 칸의 모양만 맡는다 — 폭은 Swiper 가 인라인으로 준다. */
body.solune-shop-page #sit_pvi_thumb .img_thumb { width: 100%; }
body.solune-shop-page #sit_pvi_thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-width: 1.5px;
    border-radius: .625rem;
    opacity: .62;
    transition: opacity .16s, border-color .16s;
}
body.solune-shop-page #sit_pvi_thumb .img_thumb:hover img,
body.solune-shop-page #sit_pvi_thumb .img_thumb:focus-visible img,
body.solune-shop-page #sit_pvi_thumb .swiper-slide-thumb-active img { opacity: 1; }

/* 3) 오른쪽 칸의 리듬. 시안은 덩이 사이가 28 이고, 머리 묶음(브랜드 ·
      이름 · 한 줄 설명 · 별점)만 12 로 촘촘하다. */
body.solune-shop-page #sit_ov > .solune-sit-brand { margin: 0 0 .75rem; }
body.solune-shop-page #sit_ov > #sit_title {
    margin: 0 0 .75rem;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}
body.solune-shop-page #sit_ov > #sit_desc { margin: 0 0 .75rem; font-size: .875rem; line-height: 1.6; }
body.solune-shop-page #sit_ov > #sit_opt_info { margin: 0 0 .75rem; }
/* 별점 줄. 시안(상품 상세 v2)은 별 · 점수 · 후기 수 · 세로 구분선 ·
   위시리스트 · 공유를 한 줄에 왼쪽부터 10 간격으로 죽 세운다.
   한때 위시리스트와 공유는 margin-left:auto 로 줄 오른쪽 끝에 밀어
   두었는데, 글 묶음과 멀찍이 떨어져 어디에 딸린 것인지 알기 어려웠다.
   시안대로 후기 수 바로 뒤에 붙인다. 좁은 화면에서는 줄바꿈한다. */
body.solune-shop-page #sit_ov > #sit_star_sns {
    margin: 0;
    flex-wrap: wrap;
    gap: .625rem;
    font-size: .8125rem;
}
body.solune-shop-page #sit_ov #sit_btn_opt {
    margin-left: 0;
    gap: .625rem;
}
/* 시안의 1x12 세로 구분선. 마크업에 없는 것이라 테두리로 그린다. */
body.solune-shop-page #sit_ov #sit_btn_opt::before {
    content: "";
    align-self: center;
    width: 1px;
    height: 12px;
    background: var(--solune-border);
}
/* 위시리스트는 누르는 것이 아니라 표시다(스킨 주석 참고). 손 모양 커서를
   주면 누를 수 있는 것처럼 보이므로 이 하나만 되돌린다. */
body.solune-shop-page #sit_ov #btn_wish {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    color: var(--solune-muted);
    cursor: auto;
}
/* 공유는 눌러서 쪽지를 여는 단추다. 시안처럼 26 높이의 알약으로 두되
   좌우 여백만큼 음수 마진으로 당겨, 쉬고 있을 때는 옆 글자와 같은
   자리에서 시작하고 올렸을 때만 바탕이 그 둘레로 번지게 한다. */
body.solune-shop-page #sit_ov .btn_sns_share {
    display: inline-flex;
    height: 26px;
    align-items: center;
    gap: .3125rem;
    margin: 0 -.5rem;
    padding: 0 .5rem;
    border: 0;
    border-radius: .375rem;
    background: none;
    color: var(--solune-muted);
    font-size: .8125rem;
}
body.solune-shop-page #sit_ov .btn_sns_share:hover,
body.solune-shop-page #sit_ov .btn_sns_share:focus-visible {
    background: var(--solune-surface-soft);
    color: var(--solune-text);
}
body.solune-shop-page #sit_ov :is(#btn_wish, .btn_sns_share) .fa { font-size: 14px; }
body.solune-shop-page #sit_ov #btn_wish .btn_wish_num { font-variant-numeric: tabular-nums; }
/* 줄이 바뀌면 구분선이 둘째 줄 맨 앞에 홀로 남아 떠돈다. 실측하면 이 줄은
   폭 430 아래에서만 바뀌는데(430 부터는 한 줄 26px), 이 시트가 이미 쓰는
   눈금 중 가장 가까운 것이 640 이라 새 눈금을 만들지 않고 그것을 쓴다 —
   구분선은 장식이라 430~640 구간에서 없어도 읽는 데 지장이 없다. */
@media (max-width: 39.9375rem) {
    body.solune-shop-page #sit_ov #sit_btn_opt::before { display: none; }
}

/* 4) 값 줄. 시안은 위에 진한 선, 아래에 옅은 선을 긋고 그 사이를 22 로
      띄운다. 판매가는 32 다(지금은 28 이었다). */
body.solune-shop-page #sit_ov > .solune-sit-price {
    margin: 1.75rem 0 0;
    padding: 1.375rem 0;
    border-top: 1px solid var(--solune-text);
    border-bottom: 1px solid var(--solune-border);
    gap: .75rem;
}
body.solune-shop-page #sit_ov .solune-sit-price-now { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
body.solune-shop-page #sit_ov .solune-sit-price-was { font-size: .875rem; }

/* 5) 안내 목록. 시안은 라벨 80 · 줄 사이 9 · 13px 이고 상자를 두르지
      않는다 — 바로 위 값 줄의 아랫선이 이 묶음의 윗선 노릇을 한다. */
body.solune-shop-page #sit_ov > .sit_info {
    margin: 1.75rem 0 0;
    padding: 0;
    border: 0;
}
body.solune-shop-page #sit_ov .solune-sit-meta {
    grid-template-columns: 80px minmax(0, 1fr);
    row-gap: .5625rem;
    column-gap: 1rem;
}
body.solune-shop-page #sit_ov .solune-sit-meta dt,
body.solune-shop-page #sit_ov .solune-sit-meta dd { font-size: .8125rem; }

/* 6) 옵션. 시안은 묶음 이름을 아주 작게(11 · 자간 .14em) 두고, 고르는
      칸은 56 높이에 모서리 10 이다. 칸 사이는 12 로 벌린다.

      이름은 시안대로 칸 안 왼쪽 위에 띄운다. 한때는 칸 위에 두었는데,
      코어가 만든 셀렉트의 첫 항목 글자가 이미 그 이름이라("색상") 안에
      띄우면 같은 말이 위아래로 두 번 보인다는 까닭이었다. 지시를 받아
      시안 쪽으로 옮긴다. 첫 항목 글자는 shop/item.php 가 코어에
      $is_first_option_title = 1 을 넘겨 정해지는데 그 파일은 원본이라
      못 고친다. 글자를 "선택하세요" 로 바꾸려면 스킨이 $option_item
      문자열을 받을 때 갈아끼워야 하고, 그건 CSS 가 아니라 PHP 몫이다. */
body.solune-shop-page #sit_ov > .sit_option { margin-top: 1.75rem; }
body.solune-shop-page #sit_ov .sit_option > h3 {
    margin: 0 0 .75rem;
    color: var(--solune-muted);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
}
/* 추가옵션 줄은 코어가 .get_item_options 가 아니라 .get_item_supply 로
   감싼다(lib/shop.lib.php:1189). 한때 앞엣것만 적어 두어 "전용 액세서리"
   같은 추가옵션 이름만 브라우저 기본 크기로 굵게 나왔다. */
body.solune-shop-page .sit_option :is(.get_item_options, .get_item_supply) + :is(.get_item_options, .get_item_supply) { margin-top: .75rem; }
body.solune-shop-page .sit_option :is(.get_item_options, .get_item_supply) { position: relative; }
/* 이름표. 칸 안 왼쪽 위(14 · 9)에 10px 로 띄운다. pointer-events 를 꺼
   두는 까닭은 글자 위를 눌러도 칸이 열리게 하기 위해서다 — 라벨을 누르면
   for 가 걸린 셀렉트로 포커스만 가고 목록은 열리지 않는다. 껐으므로 클릭이
   아래 셀렉트로 그대로 지나간다. */
body.solune-shop-page .sit_option :is(.get_item_options, .get_item_supply) > label.label-title {
    position: absolute;
    left: .875rem;
    top: .5625rem;
    z-index: 1;
    margin: 0;
    color: var(--solune-muted-soft);
    font-size: .625rem;
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1;
    pointer-events: none;
}
/* 고르는 칸. 시안(상품 상세.html)의 규격은
     height 56 · radius 10 · border 1 · padding 20/40/0/14 · font 14 ·
     cursor pointer · appearance:none, 그리고 오른쪽 16 자리에 ▼ 를 직접 그린다.
   위쪽 여백 20 은 이름표가 앉을 자리다. 크롬은 appearance 를 끈 셀렉트의
   글자를 content 상자 한가운데에 놓으므로, 위만 20 을 주면 글자가 그만큼
   아래로 내려가 이름표와 겹치지 않는다.

   ▼ 는 이미지가 아니라 그러데이션 두 겹으로 그린다. 색에 var 를 쓸 수 있어
   다크모드용을 따로 두지 않아도 되고, 확대해도 깨지지 않는다.

   !important 가 붙은 까닭은 skins.css:67 이
     body.solune-page :is(… select …) { border: … !important; background: … !important }
   로 못 박기 때문이다. 코어 스킨 모양을 되돌리려는 규칙인데 background 가
   shorthand 라 background-image · position · size · repeat 까지 초기값으로
   밀어 버린다. !important 끼리는 특정도를 올려도 못 이기므로 같은 longhand 에
   !important 를 맞붙인다. 한때 이걸 모르고 특정도만 올렸다가 화살표가 아예
   없는 네모 상자가 나왔다. */
body.solune-shop-page #sit_ov :is(.sit_option, .sit_supply) select {
    width: 100%;
    height: 56px;
    padding: 1.25rem 2.5rem 0 .875rem;
    border: 1px solid var(--solune-border) !important;
    border-radius: .625rem;
    color: var(--solune-text);
    font-size: .875rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
body.solune-shop-page #sit_ov :is(.sit_option, .sit_supply) select,
body.solune-shop-page #sit_buy select {
    background-color: var(--solune-surface) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--solune-muted) 50%),
        linear-gradient(135deg, var(--solune-muted) 50%, transparent 50%) !important;
    background-position: calc(100% - 1.3125rem) center, calc(100% - 1rem) center !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
}
/* 상태. 시안은 포커스에서 테두리를 본문색으로 바꾼다(style-focus). 마우스를
   올렸을 때도 한 단계 진하게 해 눌리는 자리임을 알린다. 키보드 링은
   skins.css 의 :focus-visible 이 그대로 그리게 두어 두 겹이 되지 않는다. */
body.solune-shop-page #sit_ov :is(.sit_option, .sit_supply) select:hover:not(:disabled),
body.solune-shop-page #sit_buy select:hover:not(:disabled) {
    border-color: var(--solune-border-strong) !important;
}
body.solune-shop-page #sit_ov :is(.sit_option, .sit_supply) select:focus,
body.solune-shop-page #sit_buy select:focus {
    border-color: var(--solune-text) !important;
}
/* 못 고르는 칸(앞 옵션을 고르기 전의 둘째 · 셋째 묶음). appearance 를 끄면
   브라우저가 칠하던 회색이 같이 사라져 고를 수 있는 칸과 구별이 안 된다.
   바탕을 옅게 내리고 글자를 죽여 되살린다. */
body.solune-shop-page #sit_ov :is(.sit_option, .sit_supply) select:disabled,
body.solune-shop-page #sit_buy select:disabled {
    background-color: var(--solune-surface-soft) !important;
    color: var(--solune-muted);
    cursor: not-allowed;
    opacity: 1;
}

/* 7) 고른 옵션과 합계. 시안은 이 셋을 옅은 바탕 한 상자(모서리 12 ·
      안쪽 18)에 담는다. 마크업에서는 제목 · 목록 · 합계가 형제 셋이라
      상자를 새로 두를 수 없어(구성은 바꾸지 않는다) 세 조각이 위 · 가운데
      · 아래를 나눠 맡아 한 상자처럼 보이게 한다. 제목이 상자 밖에 있는
      까닭은 #sit_sel_option 의 안쪽을 shop.js 가 통째로 갈아끼우기 때문이다
      (item.form.skin.php 의 주석 참고). */
body.solune-shop-page #sit_ov > .solune-sit-selected-title {
    margin: 1.75rem 0 0;
    padding: 1.125rem 1.125rem .625rem;
    border-radius: .75rem .75rem 0 0;
    background: var(--solune-surface-soft);
    color: var(--solune-muted);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
}
body.solune-shop-page #sit_ov > #sit_sel_option {
    margin-top: 0;
    padding: 0 1.125rem;
    border: 0;
    background: var(--solune-surface-soft);
}
body.solune-shop-page #sit_ov > .solune-sit-total {
    position: relative;
    margin-top: 0;
    padding: .875rem 1.125rem 1.125rem;
    border: 0;
    border-radius: 0 0 .75rem .75rem;
    background: var(--solune-surface-soft);
}
/* 합계를 가르는 선. 상자 안쪽으로 들여야 해서 테두리 대신 가로줄을 그린다. */
body.solune-shop-page #sit_ov > .solune-sit-total::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.125rem;
    right: 1.125rem;
    border-top: 1px solid var(--solune-border);
}
body.solune-shop-page #sit_ov .solune-sit-total-label { font-size: .8125rem; font-weight: 400; }
body.solune-shop-page #sit_ov #sit_tot_price { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }

/* 고른 줄과 합계 선 사이. 목록의 마지막 줄은 아래 여백이 0 이고(default_shop.css
   의 li:last-child), 합계 선(.solune-sit-total::before)은 합계 조각의 맨 위에
   그어지므로, 그대로 두면 선이 수량 상자 밑에 바로 붙는다(2026-09-28 지적).
   고른 줄이 있을 때만 띄운다 — 비어 있을 때까지 띄우면 제목과 합계 사이에
   빈 회색 띠가 생긴다. */
body.solune-shop-page #sit_ov > #sit_sel_option:has(li) { padding-bottom: 1rem; }

/* 옵션이 없는 상품의 줄. 스킨(item.form.skin.php)이 [div.opt_name][div.opt_count]
   두 상자로 내고, 금액은 수량 상자 안에 있다. 옵션을 고른 상품의 줄은
   shop.js 가 [이름 span][금액 span][수량 div] 로 내므로 모양이 다르다.
   default_shop.css 의 줄 규칙(`… > div { grid-column: 1; grid-row: 2 }`)과
   이 패널의 같은 규칙(`#sit_buy .sit_opt_added > li > div`)은 뒤쪽 모양에 맞춘
   것이라, 앞쪽 모양에서는 두 div 가 같은 칸에 포개져 상품명이 수량 상자 뒤로
   비치고 금액과 붙어 "재0원" 처럼 읽혔다(2026-09-28 지적).
   두 상자를 [이름] / [수량상자 ··· 금액] 두 줄로 편다. 금액을 오른쪽 끝으로
   미는 margin-left: auto 는 default_shop.css 의 .opt_count .sit_opt_prc 가 이미
   갖고 있어, 상자가 줄 폭을 다 쓰게만 하면 된다. 선택자는 두 곳의 줄 규칙보다
   세게 적는다(이 시트가 먼저 실린다). */
body.solune-shop-page :is(#sit_ov .sit_opt_list, #sit_buy .sit_opt_added > li) > .opt_name {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
}
body.solune-shop-page :is(#sit_ov .sit_opt_list, #sit_buy .sit_opt_added > li) > .opt_count {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
}

/* 8) 사는 단추. 시안은 [1fr 1fr 48] 에 높이 52 · 모서리 10 이다. */
body.solune-shop-page #sit_ov > #sit_ov_btn {
    grid-template-columns: 1fr 1fr 48px;
    gap: .5rem;
    margin-top: 1.75rem;
}
body.solune-shop-page #sit_ov_btn > button,
body.solune-shop-page #sit_ov_btn > a {
    display: inline-flex;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: .625rem;
    font-size: .875rem;
    font-weight: 500;
}

/* 9) 탭 줄. 시안은 왼쪽으로 모아 32 씩 띄우고, 줄은 위가 아니라 아래에
      긋는다. 고른 탭은 그 선 위에 2px 로 겹쳐 선다. */
body.solune-shop-page #sit_tab .tab_tit {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    border-top: 0;
    border-bottom: 1px solid var(--solune-border);
}
body.solune-shop-page #sit_tab .tab_tit li { flex: none; }
body.solune-shop-page #sit_tab .tab_tit button {
    width: auto;
    min-height: 0;
    margin-bottom: -1px;
    padding: 0 0 .875rem;
    border-bottom: 2px solid transparent;
    font-size: .9375rem;
    font-weight: 500;
}
body.solune-shop-page #sit_tab .tab_tit button.selected { border-bottom-color: var(--solune-text); font-weight: 700; }

/* 탭 이름 뒤의 개수(사용후기 24 · 상품문의 3).

   회색 덩이처럼 보이던 까닭 — shop-carousel.css:40 이 바탕(--solune-surface-soft)과
   글자색(--solune-text-soft)을 주는데 안쪽 여백도 모서리도 0 이라, 숫자에 딱
   붙은 각진 회색 상자가 됐다. 게다가 shop.css:267 이 글자색을
   --solune-muted-soft(#a5a5a1) 로 다시 덮어 그 회색 위 대비가 2:1 이었다.

   시안도 이 자리는 바탕 없는 작은 숫자다. 바탕을 걷고 색은 탭 이름을 그대로
   따르게 한다(color: inherit) — 세 번째 색을 두지 않으니 고른 탭에서도
   안 고른 탭에서도 겉돌지 않고, 고른 탭에서는 대비가 오히려 올라간다.
   크기와 굵기만 한 단 낮춰 숫자가 이름에 딸린 것으로 읽히게 한다.

   선택자에 :is() 를 쓴 것은 특정도 때문이다. shop-carousel.css 쪽이
   (1,2,0) 이라 `… .tab_tit button span` (1,1,3) 으로는 이기지 못한다.
   :is() 는 가장 센 인자(클래스)의 값을 가져가 (1,2,2) 가 된다. */
body.solune-shop-page #sit_tab .tab_tit button :is(span, .item_use_count, .item_qa_count) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: .75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
/* 낭독기용으로 숨겨 둔 글은 위 규칙이 되살리지 않게 그대로 둔다. */
body.solune-shop-page #sit_tab .tab_tit button .sound_only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* 10) 상품정보 탭 본문. 시안은 720 으로 좁혀 가운데 두고 위를 64 띄운다.
       설명만 좁히고 아래 '상품 정보 고시' 를 전체 폭에 두면 두 덩이가 서로
       다른 기둥에 서므로 같이 좁힌다. */
body.solune-shop-page #sit_inf #sit_inf_explan {
    max-width: 45rem;
    padding-top: 4rem;
}
body.solune-shop-page #sit_inf > h3,
body.solune-shop-page #sit_inf #sit_inf_open {
    max-width: 45rem;
    margin-inline: auto;
}
/* 고시 표. 시안은 라벨 200 · 줄마다 위아래 10 · 13px 에 가는 밑줄 하나다. */
body.solune-shop-page #sit_inf #sit_inf_open { width: 100%; border-collapse: collapse; }
body.solune-shop-page #sit_inf #sit_inf_open th,
body.solune-shop-page #sit_inf #sit_inf_open td {
    padding: .625rem 0;
    border: 0;
    border-bottom: 1px solid var(--solune-border);
    font-size: .8125rem;
    line-height: 1.6;
    text-align: left;
    vertical-align: top;
}
body.solune-shop-page #sit_inf #sit_inf_open th {
    width: 200px;
    /* 코어 시트가 라벨 칸에 회색을 깐다. 시안은 바탕 없이 글자색만 옅게
       두고 줄을 가는 밑줄 하나로 가른다. */
    background: none;
    color: var(--solune-text-soft);
    font-weight: 400;
}

/* 11) 관련상품 카드. 시안은 카드를 두르지 않고 사진만 모서리 12 로 둥글린다.
       이름 13 · 값 14 · 700. 목록 화면의 .sct_li 와 마크업이 같으므로
       #sit_rel 안으로만 좁혀 적는다. */
body.solune-shop-page #sit_rel .sct_li {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
}
body.solune-shop-page #sit_rel .sct_img {
    border-radius: .75rem;
    overflow: hidden;
}
body.solune-shop-page #sit_rel .sct_img img {
    border-radius: .75rem;
    aspect-ratio: 1;
    object-fit: cover;
}
/* 목록 화면의 카드는 글줄을 16 들여 쓰는데, 카드를 두르지 않는 이 자리에서는
   그만큼 사진과 글이 어긋나 보인다. 사진의 왼쪽 끝에 맞춘다. */
body.solune-shop-page #sit_rel .sct_txt { margin-top: .625rem; padding: 0; }
body.solune-shop-page #sit_rel .sct_txt a { font-size: .8125rem; line-height: 1.4; }
body.solune-shop-page #sit_rel .sct_cost { margin-top: .375rem; padding: 0; font-size: .875rem; font-weight: 700; }

/* 12) 배송 / 교환 탭. 시안은 둘을 나란히 두고 각각 테두리 상자(안쪽 28 ·
       모서리 16)에 담는다. 지금은 맨 글씨로 위아래 쌌여 빈 오른쪽이 넓게
       남았다. #sit_dex 의 자식은 낭독기용 h2(절대배치라 격자에서 빠진다)와
       두 상자뿐이라 그대로 두 칸이 된다 — 안의 제목(h3)은 각 상자 안에 있다. */
body.solune-shop-page #sit_dex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
body.solune-shop-page #sit_dex > #sit_dvr,
body.solune-shop-page #sit_dex > #sit_ex {
    margin: 0;
    padding: 1.75rem;
    border: 1px solid var(--solune-border);
    border-radius: 1rem;
}

/* 13) 좁은 화면. 440 짜리 정보 칸은 1024 아래에서 제 폭을 지킬 수 없다.
       한 칸으로 접고 사이를 줄인다(shop-responsive.css 가 더 좁은 폭을
       이미 맡고 있어 여기서는 두 칸이 깨지는 경계만 본다). */
@media (max-width: 1023px) {
    body.solune-shop-page #sit_ov_wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
    body.solune-shop-page #sit_tab .tab_tit { gap: 1.25rem; overflow-x: auto; }
    body.solune-shop-page #sit_inf #sit_inf_explan { padding-top: 2.5rem; }
    body.solune-shop-page #sit_dex { grid-template-columns: minmax(0, 1fr); }
}


/* ── 상품 상세: 탭 옆 구입 패널 (시안 v2, 2026-09-21) ──────────────
   시안 v2 는 탭 본문을 왼쪽에 두고 오른쪽 320 칸에 구입 패널을 세워
   따라오게 한다(#grid: minmax(0,1fr) 320px / gap 40, #panel: sticky).

   우리 쪽에는 그 패널이 이미 있다 — 영카트 기본 구성인 #sit_buy 로,
   item.info.skin.php 가 #sit_tab 바로 뒤에 낸다. 위쪽 구입폼과 양방향으로
   묶는 스크립트(같은 파일 아래쪽)도 이미 있다: 한쪽 셀렉트를 고르면 다른
   쪽이 따라 서고, 고른 옵션 줄·수량·합계가 함께 움직이며, 여기 장바구니 ·
   바로구매는 #sit_ov_btn 의 같은 단추를 대신 누른다. 그래서 마크업을
   옮기지 않고 shop.css:280 의 `display: none` 만 걷고 모양을 낸다.

   색은 한 줄도 박지 않고 전부 --solune-* 토큰으로 쓴다. 다크는
   html[data-theme="dark"] 가 그 토큰을 다시 깔아 저절로 따라온다.

   이 시트는 순서 0 이라 shop*.css(320) 보다 먼저 실린다. 덮어야 하므로
   선택자 앞에 body 를 붙여 한 칸 올린다(저쪽이 (1,1,0)). */
body.solune-shop-page #sit_info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    align-items: start;
}
body.solune-shop-page #sit_info > #sit_tab { grid-column: 1; min-width: 0; }

/* 따라오는 높이. 머리가 고정인데 굴리면 위로 조금 올라가 아랫변이 57px 에
   선다(실측). 그 아래 23px 를 띄운다. */
body.solune-shop-page #sit_info > #sit_buy {
    display: block;
    grid-column: 2;
    position: sticky;
    top: 5rem;
    padding: 1.5rem;
    border: 1px solid var(--solune-border);
    border-radius: 1.125rem;
    background: var(--solune-surface);
}
body.solune-shop-page #sit_buy .sit_buy_inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* 묶음 이름(선택옵션 · 추가옵션 · 선택된 옵션). 위쪽 구입폼과 같은 결로
   아주 작게 둔다. */
body.solune-shop-page #sit_buy :is(.sit_side_option, .sit_sel_option) > h3 {
    margin: 0 0 .75rem;
    color: var(--solune-muted);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.4;
}
body.solune-shop-page #sit_buy .sit_side_option {
    margin: 0;
    padding: 0;
    border: 0;
}
body.solune-shop-page #sit_buy :is(.get_side_item_options, .get_item_supply) + :is(.get_side_item_options, .get_item_supply) { margin-top: .75rem; }
body.solune-shop-page #sit_buy :is(.get_side_item_options, .get_item_supply) { position: relative; }
/* 이름표. 위쪽 구입폼과 같다(그쪽 주석 참고). */
body.solune-shop-page #sit_buy :is(.get_side_item_options, .get_item_supply) > label.label-title {
    position: absolute;
    left: .875rem;
    top: .5625rem;
    z-index: 1;
    margin: 0;
    color: var(--solune-muted-soft);
    font-size: .625rem;
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1;
    pointer-events: none;
}
/* 고르는 칸. 시안 v2 는 54 · 모서리 10 이다(위쪽 구입폼은 56 — 패널이
   좁아 한 칸 낮춘 것이라 그 값을 따른다). */
body.solune-shop-page #sit_buy select {
    width: 100%;
    height: 54px;
    padding: 1.25rem 2.25rem 0 .875rem;
    border: 1px solid var(--solune-border) !important;
    border-radius: .625rem;
    color: var(--solune-text);
    font-size: .875rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* 고른 옵션. 시안은 옅은 바탕 상자(안쪽 16 · 모서리 12)다. 줄은
   스크립트가 위쪽 구입폼에서 베껴 붙이는데, 그때 .sit_opt_list 클래스를
   떼므로 shop-detail.css 의 그 줄 규칙이 걸리지 않는다. 여기서 따로 낸다. */
body.solune-shop-page #sit_buy .sit_sel_option {
    margin: 0;
    padding: 1rem;
    border: 0;
    border-radius: .75rem;
    background: var(--solune-surface-soft);
}
body.solune-shop-page #sit_buy .sit_opt_added {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 아직 아무것도 안 골랐으면 제목만 남는다. 빈 목록이 자리를 먹지 않게 한다. */
body.solune-shop-page #sit_buy .sit_opt_added:empty { display: none; }
body.solune-shop-page #sit_buy .sit_opt_added > li + li {
    margin-top: .625rem;
    padding-top: .625rem;
    border-top: 1px solid var(--solune-border);
}
body.solune-shop-page #sit_buy .sit_opt_added .opt_name {
    color: var(--solune-text);
    font-size: .8125rem;
    line-height: 1.4;
}
/* 고른 옵션 한 줄. 스크립트가 위쪽 구입폼에서 베껴 붙이는데, 그때
   .sit_opt_list 클래스를 떼므로 shop-detail.css 의 그 줄 규칙이 걸리지 않는다.
   여기서 같은 모양을 다시 낸다. 줄의 짜임은 [이름] / [수량상자  금액] 이고,
   순서는 마크업이 [이름, 금액, 수량상자] 라 칸과 줄을 모두 못 박는다 —
   안 박으면 금액이 먼저 놀려 수량이 다음 줄로 밀린다.

   수량 단추의 글자("증가 · 감소 · 삭제")를 지우고 기호를 그리는 일은
   shop-detail.css 가 이미 한다(font-size: 0 과 ::before). 그래서 여기서
   font-size 를 도로 주면 안 된다 — 한때 .6875rem 을 줘다가 "＋증가"
   처럼 기호와 글자가 같이 나왔다. */
body.solune-shop-page #sit_buy .sit_opt_added > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
}
body.solune-shop-page #sit_buy .sit_opt_added .sit_opt_subj {
    grid-column: 1 / -1;
    grid-row: 1;
    color: var(--solune-text);
    font-size: .8125rem;
    line-height: 1.4;
}
/* 수량 상자. 스크립트가 만든 줄에서 이 div 에는 클래스가 없다.

   테두리는 이 상자가 아니라 안의 셋(감소 · 입력 · 증가)이 나눠 갖는다 —
   위쪽 구입폼과 같은 결이다. 상자에 두면 같은 div 안에 있는 삭제(×)까지
   상자 안에 들어와 수량 조작의 일부처럼 보인다. */
body.solune-shop-page #sit_buy .sit_opt_added > li > div {
    display: inline-flex;
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    justify-self: start;
    gap: 0;
    border: 0;
}
/* 수량 칸은 .num_input 이 아니라 .frm_input 으로 온다(스크립트가 만든 줄).
   둘 다 적어 둔다 — 스킨 안에 박힌 줄은 .num_input 이다. 한때
   .num_input 만 적어 111px 짜리 기본 칸이 그대로 남아 수량 상자(215px)가
   금액 칸을 15px 침범했다. */
body.solune-shop-page #sit_buy .sit_opt_added :is(.num_input, .frm_input) {
    width: 2.5rem;
    height: 2.125rem;
    padding: 0;
    order: -1;
    border: 0;
    border-inline: 1px solid var(--solune-border);
    border-radius: 0;
    background: none;
    color: var(--solune-text);
    font-size: .8125rem;
    text-align: center;
}
/* 수량 단추 둘이 상자의 좌우 끝을 맡는다 — 위쪽 구입폼과 같은 결이다.
   코어 스킨의 .btn_frmline 이 함께 달려 오므로 그 모서리와 최소 높이도
   여기서 되돌린다. */
body.solune-shop-page #sit_buy .sit_opt_added :is(.sit_qty_minus, .sit_qty_plus) {
    width: 2.125rem;
    min-height: 0;
    height: 2.125rem;
    padding: 0;
    border: 1px solid var(--solune-border-strong);
    background: var(--solune-surface);
    color: var(--solune-text);
    /* 글자("증가" · "감소")를 지우고 기호만 남긴다. shop-detail.css 가 같은
       일을 하지만 그쪽은 .sit_opt_list / .sit_spl_list 안으로 좁혀져 있고,
       이 패널의 첫 줄은 스크립트가 베끼며 .sit_opt_list 를 떼므로 걸리지
       않는다 — 그래서 여기서 다시 적는다. 기호를 그리는 ::before 규칙은
       그쪽이 전역이라 그대로 걸린다. */
    font-size: 0;
}
body.solune-shop-page #sit_buy .sit_opt_added .sit_qty_minus { border-right: 0; border-radius: .5rem 0 0 .5rem; }
body.solune-shop-page #sit_buy .sit_opt_added .sit_qty_plus { border-left: 0; border-radius: 0 .5rem .5rem 0; }
/* 삭제는 상자 밖 오른쪽에 테두리 없이 둔다. 한때 상자 안에 두고 왼쪽에
   가르는 선을 그었는데, 그러면 수량 조작의 일부처럼 보여 실수로 눌리기 쉽다. */
body.solune-shop-page #sit_buy .sit_opt_added .sit_opt_del {
    width: 1.75rem;
    min-height: 0;
    height: 1.75rem;
    margin-left: .75rem;
    padding: 0;
    border: 0;
    border-radius: .375rem;
    background: none;
    color: var(--solune-text-soft);
    /* 위와 같은 까닭으로 "삭제" 글자를 여기서 지운다. */
    font-size: 0;
}
body.solune-shop-page #sit_buy .sit_opt_added .sit_opt_del:hover,
body.solune-shop-page #sit_buy .sit_opt_added .sit_opt_del:focus-visible { background: var(--solune-border); color: var(--solune-text); }
body.solune-shop-page #sit_buy .sit_opt_added .sit_opt_prc {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    color: var(--solune-text);
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 합계와 단추. 합계 줄은 스크립트가 "<span>총 금액 </span><strong>N</strong> 원"
   으로 채운다 — 맨 '원' 이 태그 없는 글자라 flex 로 나누면 그것만 따로 떨어진다.
   라벨만 왼쪽으로 띄우고 나머지는 오른쪽에 붙인다. */
body.solune-shop-page #sit_buy .sum_section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
body.solune-shop-page #sit_buy .sit_tot_price {
    display: flow-root;
    padding-top: .75rem;
    border-top: 1px solid var(--solune-border);
    color: var(--solune-text);
    font-size: .8125rem;
    text-align: right;
}
/* 옵션을 고르기 전에는 스크립트가 아직 채우지 않아 비어 있다. 그때 줄만
   그어 두면 까닭 없는 가로선이 남는다. */
body.solune-shop-page #sit_buy .sit_tot_price:empty { display: none; }
body.solune-shop-page #sit_buy .sit_tot_price > span {
    float: left;
    color: var(--solune-text-soft);
}
body.solune-shop-page #sit_buy .sit_tot_price > strong {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
body.solune-shop-page #sit_buy .sit_order_btn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
body.solune-shop-page #sit_buy .sit_order_btn > button {
    display: inline-flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: .625rem;
    font-size: .875rem;
    font-weight: 500;
}

/* 좁은 화면. 시안 v2 는 960 아래에서 패널을 접고 아래에 고정 바를 띄운다.
   고정 바는 없던 요소라 만들지 않았다 — 접기만 하면 위쪽 구입폼이 그대로
   남아 예전과 같이 쓸 수 있다. 경계는 위 두 칸(#sit_ov_wrap)과 같은
   1024 로 맞춘다. 시안의 960 을 따로 쓰면 그 사이 64px 구간에서 위는
   한 칸인데 아래는 두 칸이라 기둥이 어긋난다. */
@media (max-width: 1023px) {
    body.solune-shop-page #sit_info { display: block; }
    body.solune-shop-page #sit_info > #sit_buy { display: none; }
}


/* ── 사용후기 탭 (시안 '사용후기 상세 (2).html', 2026-09-21) ────────
   시안은 후기 한 줄을 [글 | 표지 사진 120] 두 칸으로 두고, 본문은 접어
   두었다가 단추로 편다. 지금은 다섯 줄이 사진까지 다 펴져 있어 목록이
   3180px 였다 — 어떤 후기가 있는지 훑을 수가 없다.

   치수 · 간격 · 굵기만 옮기고 색은 사이트 팔레트를 그대로 쓴다. 다크는
   html[data-theme="dark"] 가 --solune-* 를 다시 깔아 저절로 따라온다.

   시안의 별점 필터 칩(전체 · 포토 · 별점순)은 없던 기능이라 만들지 않았다.
   '사용후기 쓰기' 단추도 시안은 테두리만 두른 모양이지만 우리 팔레트에서는
   채운 것이 이 자리의 기본 단추라 색은 두고 치수만 맞춘다.

   이 시트는 순서 0 이라 shop-pages.css · shop-detail.css(300~320) 보다
   먼저 실린다. 그 둘을 덮어야 하므로 선택자 앞에 body 를 붙여 한 칸 올린다. */

/* 1) 평점 요약. 시안은 [점수 | 막대 | 쓰기] 세 칸에 사이 32, 안쪽 24/28 이다. */
body.solune-shop-page .solune-review-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    padding: 1.5rem 1.75rem;
    border-radius: 1rem;
    margin-bottom: 1.75rem;
}
body.solune-shop-page .solune-review-score {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .375rem;
    text-align: left;
}
body.solune-shop-page .solune-review-avg { margin: 0; font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
body.solune-shop-page .solune-review-stars { margin: 0; font-size: .9375rem; letter-spacing: 2px; }
body.solune-shop-page .solune-review-count { margin: 0; font-size: .75rem; }
body.solune-shop-page .solune-review-bars { max-width: 20rem; gap: .375rem; }
body.solune-shop-page .solune-review-bars li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 24px;
    align-items: center;
    gap: .625rem;
    font-size: .75rem;
}
body.solune-shop-page .solune-review-bar { height: 6px; border-radius: 3px; }
body.solune-shop-page .solune-review-bar > span { border-radius: 3px; }
/* 쓰기 단추. 시안 치수(높이 42 · 안쪽 18 · 모서리 10 · 13px)만 가져온다. */
body.solune-shop-page .solune-review-write {
    height: 42px;
    padding-inline: 1.125rem;
    border-radius: .625rem;
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}

/* 2) 후기 한 줄. 시안은 위에 진한 선을 한 줄 긋고 줄마다 아래 가는 선을
      둔다. 칸은 [글 | 표지 사진] 이고 사이 28, 위아래 24 다. 지금은 사진이
      왼쪽에 있었는데 마크업 순서(사진 → 글)는 그대로 두고 칸만 못 박는다. */
body.solune-shop-page #sit_use_ol { border-top: 1px solid var(--solune-text); }
body.solune-shop-page .sit_use_li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1.75rem;
    border-top: 0;
    border-bottom: 1px solid var(--solune-border);
    padding: 1.5rem 0;
}
/* 첫 줄의 위 여백을 0 으로 두던 규칙을 되돌린다 — 이제 윗선은 목록이 갖는다. */
body.solune-shop-page .sit_use_li:first-child { padding-top: 1.5rem; }
body.solune-shop-page .sit_use_body {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    flex-direction: column;
    gap: .625rem;
}
body.solune-shop-page .sit_use_li .sit_thum {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 120px;
    height: 120px;
    border-radius: .75rem;
}
body.solune-shop-page .sit_use_li .sit_thum img { border-radius: .75rem; }
/* 사진이 여러 장이면 표지 오른쪽 아래에 나머지 장수를 얹는다. 이 칩은
   사진 위에 앉으므로 팔레트 색이 아니라 반투명 검정으로 둔다 — 밝은
   사진에도 어두운 사진에도 글자가 읽히고, 다크에서도 그대로 쓴다. */
body.solune-shop-page .sit_use_li .solune-review-more {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}
/* 포토 후기 격자의 마지막 칸 — 남은 장수를 사진 위에 얹는다(시안 v2).
   예전에는 글자만 든 아홉 번째 칸을 더해 격자(여덟 칸)의 둘째 줄로 혼자
   내려갔다. 이제 칸은 여덟 개로 끝나고 마지막 사진이 그 수를 인다.

   덮개 색은 사진 위에 앉는 것이라 팔레트 색이 아니라 반투명 검정으로 둔다 —
   밝은 사진에도 어두운 사진에도 흰 글자가 읽히고 다크에서도 그대로 쓴다.
   (후기 줄 표지의 +N 칩과 같은 결이다.) */
body.solune-shop-page .solune-review-photo { position: relative; }
body.solune-shop-page .solune-review-photo-mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
body.solune-shop-page .solune-review-photo:hover .solune-review-photo-mask { background: rgba(0, 0, 0, .45); }

body.solune-shop-page .sit_use_meta { margin: 0; gap: .625rem; }
/* 머리줄 끝에 "PHOTO" 표시(.solune-review-flag)가 있었다. 바로 오른쪽에
   그 후기의 사진이 표지로 서 있어 같은 말을 두 번 하는 셈이라 마크업과
   함께 걷었다(itemuse.skin.php 의 그 자리 주석 참고). */
body.solune-shop-page .sit_use_tit {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

/* 3) 접기. 스크립트가 #sit_use_ol 에 .is-foldable 을 달았을 때만 접는다 —
      자바스크립트가 꺼져 있으면 본문이 다 펴진 채로 남고 단추는 안 보인다.
      여는 것은 스크립트의 slideDown 이 인라인 display 로 하므로 이 규칙을
      이긴다(상품문의와 같은 결). */
body.solune-shop-page .solune-review-toggle { display: none; }
body.solune-shop-page #sit_use_ol.is-foldable .sit_use_con { display: none; }
body.solune-shop-page #sit_use_ol.is-foldable .solune-review-toggle {
    display: inline-flex;
    align-self: flex-start;
    height: 32px;
    align-items: center;
    gap: .375rem;
    margin-top: .125rem;
    padding: 0 .75rem;
    border: 1px solid var(--solune-border);
    border-radius: .5rem;
    background: var(--solune-surface);
    color: var(--solune-text);
    cursor: pointer;
    font-size: .75rem;
}
body.solune-shop-page .solune-review-toggle:hover,
body.solune-shop-page .solune-review-toggle:focus-visible { border-color: var(--solune-text); }
/* 화살표는 테두리로 그린다. SVG 배경으로 두면 다크에서 색이 못 따라온다. */
body.solune-shop-page .solune-review-toggle::after {
    content: "";
    width: .375rem;
    height: .375rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s;
}
body.solune-shop-page .solune-review-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

/* 4) 펼친 본문. 시안은 남은 사진을 96 짜리 한 줄로 늘어놓는다(지금은 110). */
body.solune-shop-page .sit_use_p img {
    /* 어딘가에서 img 를 block 으로 두고 있어 <br> 를 지워도 줄이 나뉘었다. */
    display: inline-block;
    max-width: 96px;
    max-height: 96px;
    margin-top: .375rem;
    margin-right: .5rem;
    border-radius: .5rem;
    vertical-align: top;
}
/* 에디터 글은 사진을 <br> 로 줄바꿈해 둔다(실측: <p><br><img><br><img></p>).
   그대로는 96 짜리 사진이 세로로 쌓여 펴진 후기가 다시 길어진다.
   사진이 든 문단에서만 그 줄바꿈을 지워 시안처럼 한 줄로 늘어놓는다 —
   글만 있는 문단은 그대로 둔다. */
body.solune-shop-page .sit_use_p p:has(> img) > br { display: none; }

/* 5) 좁은 화면. 표지 사진을 줄이고, 아주 좁으면 요약을 한 칸으로 접는다. */
@media (max-width: 767px) {
    body.solune-shop-page .solune-review-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
    body.solune-shop-page .solune-review-bars { max-width: none; }
    body.solune-shop-page .sit_use_li { gap: 1rem; }
    body.solune-shop-page .sit_use_li .sit_thum { width: 84px; height: 84px; }
}


/* ── 사용후기 크게 보기 겹창 (시안 '사용후기 상세 (2).html') ────────
   시안의 겹창은 두 칸이다 — 왼쪽에 사진, 오른쪽에 그 사진이 달린 후기.
   지금 것은 한 칸(머리 · 사진 · 한 줄 설명)이라 사진만 크게 보였다.

   기존 규칙은 css/shop-pages.css:293~330 에 있다. 이 시트는 순서 0 이라
   그보다 먼저 실리므로 선택자 앞에 body 를 붙여 덮는다. 그 시트가
   :is(.solune-review-lightbox-prev, …) 를 position:absolute · left/right 로
   두는데, 새로 생긴 바닥 단추('이전 사진' · '다음 사진')까지 그 규칙에
   잡히므로 바닥 것만 흐름 안으로 되돌린다. */
body.solune-shop-page .solune-review-lightbox-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    width: min(1040px, 100%);
    max-height: min(720px, calc(100vh - 4rem));
    border: 0;
    border-radius: 1.125rem;
    overflow: hidden;
}

/* 사진 칸. 시안은 바탕을 거의 검정으로 둔다 — 사진이 어떤 색이든 테두리가
   살고 여백이 눈에 안 띈다. 라이트에서도 다크에서도 같은 값을 쓴다(팔레트
   표면색을 쓰면 밝은 바탕에 흰 사진이 얹혀 경계가 사라진다). 값은 우리
   다크 팔레트의 페이지 바닥과 같은 남색 계열이다. */
body.solune-shop-page .solune-review-lightbox-stage {
    display: flex;
    grid-column: 1;
    min-height: 22.5rem;
    align-items: center;
    justify-content: center;
    background: #0b1220;
}
body.solune-shop-page .solune-review-lightbox-stage img {
    max-width: 100%;
    max-height: min(720px, calc(100vh - 4rem));
}
/* 사진 위 화살표. 시안은 36 짜리 흰 동그라미다. */
body.solune-shop-page .solune-review-lightbox-stage :is(.solune-review-lightbox-prev, .solune-review-lightbox-next) {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #101828;
}
body.solune-shop-page .solune-review-lightbox-stage :is(.solune-review-lightbox-prev, .solune-review-lightbox-next):hover {
    border-color: transparent;
    background: #fff;
    color: #101828;
}
/* 사진 넘김은 Swiper 가 맡는다(홈 진열·상품 갤러리와 같은 부품). 슬라이드
   상자가 사진 칸을 꽉 채우게 하고, 사진은 잘리지 않게 contain 으로 둔다. */
body.solune-shop-page .solune-review-lightbox-swiper {
    position: relative;
    width: 100%;
    align-self: stretch;
}
body.solune-shop-page .solune-review-lightbox-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.solune-shop-page .solune-review-lightbox-swiper .swiper-slide img {
    display: block;
    max-width: 100%;
    max-height: min(720px, calc(100vh - 4rem));
    object-fit: contain;
}
/* 점은 Swiper 의 pagination 이다 — 첨부 이미지 페이징과 같은 부품. 지금 보는
   장만 길게 늘인다. 사진 위에 앉으므로 팔레트 색이 아니라 흰색으로 둔다. */
body.solune-shop-page .solune-review-lightbox-dots {
    bottom: 14px;
    z-index: 2;
}
body.solune-shop-page .solune-review-lightbox-dots .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #fff;
    opacity: .5;
    /* 흰 점만 두면 밝은 사진 위에서 사라진다. 얇은 어두운 테를 둘러 어느
       사진에서도 보이게 한다(사진 위에 앉는 것이라 팔레트 색이 아니다). */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .28);
    transition: width .15s, opacity .15s;
}
body.solune-shop-page .solune-review-lightbox-dots .swiper-pagination-bullet-active {
    width: 18px;
    opacity: 1;
}

/* 후기 칸. 머리 · 본문 · 바닥 세 층이고 본문만 굴러간다. */
body.solune-shop-page .solune-review-lightbox-side {
    display: flex;
    grid-column: 2;
    min-height: 0;
    flex-direction: column;
    background: var(--solune-surface);
}
body.solune-shop-page .solune-review-lightbox-head { padding: 1rem 1rem 1rem 1.25rem; }
/* 상품 줄이 없는 상품(이름을 못 읽은 경우)에도 닫기는 오른쪽 끝에 선다 —
   space-between 만 믿으면 홀로 남았을 때 왼쪽으로 붙는다. */
body.solune-shop-page .solune-review-lightbox-close { margin-left: auto; flex: none; }
body.solune-shop-page .solune-review-lightbox-body {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: .875rem;
    padding: 1.375rem 1.5rem;
    overflow-y: auto;
}
body.solune-shop-page .solune-review-lightbox-meta {
    display: flex;
    margin: 0;
    align-items: center;
    gap: .625rem;
    color: var(--solune-muted);
    font-size: .75rem;
}
body.solune-shop-page .solune-review-lightbox-star { color: var(--ondam-star, #c9a227); font-size: .875rem; letter-spacing: .06em; }
body.solune-shop-page .solune-review-lightbox-who { color: var(--solune-text); font-weight: 600; }
body.solune-shop-page .solune-review-lightbox-tit {
    margin: 0;
    color: var(--solune-text);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.4;
}
body.solune-shop-page .solune-review-lightbox-text {
    margin: 0;
    color: var(--solune-text-soft);
    font-size: .875rem;
    line-height: 1.85;
}
/* 바닥. 시안은 옅은 바탕에 좌우로 단추 둘이다. */
body.solune-shop-page .solune-review-lightbox-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--solune-border);
    background: var(--solune-surface-soft);
}
/* 바닥의 후기 이동 단추. 사진을 넘기는 화살표(-prev · -next, Swiper 가 쓴다)와
   클래스를 나눠 두었다 — 같은 이름을 쓰면 위 시트의 절대배치가 이 단추에도
   걸려 사진 위로 올라탄다. */
body.solune-shop-page :is(.solune-review-lightbox-rprev, .solune-review-lightbox-rnext) {
    display: inline-flex;
    height: 38px;
    align-items: center;
    gap: .25rem;
    padding: 0 .875rem;
    border: 1px solid var(--solune-border);
    border-radius: .625rem;
    background: var(--solune-surface);
    color: var(--solune-text);
    cursor: pointer;
    font-size: .8125rem;
}
body.solune-shop-page :is(.solune-review-lightbox-rprev, .solune-review-lightbox-rnext):hover { border-color: var(--solune-text); }
/* 첫 후기 · 마지막 후기에서 끈 단추. 자리는 그대로 두고 옅게만 둔다 —
   없애 버리면 좌우 단추가 가운데 수와 함께 움직여 줄이 출렁인다. */
body.solune-shop-page :is(.solune-review-lightbox-rprev, .solune-review-lightbox-rnext):disabled {
    opacity: .38;
    cursor: default;
}
body.solune-shop-page :is(.solune-review-lightbox-rprev, .solune-review-lightbox-rnext):disabled:hover { border-color: var(--solune-border); }
/* 가운데 수. 좌우 단추 사이를 다 쓰고 가운데에 선다. */
body.solune-shop-page .solune-review-lightbox-pos {
    margin: 0;
    flex: 1;
    color: var(--solune-muted);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* 사진 장수 칩. 시안은 옅은 알약으로 둔다. */
body.solune-shop-page .solune-review-lightbox-chips {
    display: inline-flex;
    margin: .125rem 0 0;
    align-self: flex-start;
    padding: .25rem .625rem;
    border-radius: 999px;
    background: var(--solune-surface-soft);
    color: var(--solune-text-soft);
    font-size: .75rem;
}

/* 어느 상품의 후기인지 — 겹창 오른쪽 머리의 상품 줄. */
body.solune-shop-page .solune-review-lightbox-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .75rem;
}
body.solune-shop-page .solune-review-lightbox-item-thumb {
    display: block;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: .5rem;
    background: var(--solune-surface-soft);
    overflow: hidden;
}
body.solune-shop-page .solune-review-lightbox-item-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.solune-shop-page .solune-review-lightbox-item-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .125rem;
}
body.solune-shop-page .solune-review-lightbox-item-name {
    color: var(--solune-text);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.solune-shop-page .solune-review-lightbox-item-price { color: var(--solune-muted); font-size: .75rem; }

/* 사진이 없는 후기. 사진 칸은 그대로 두고 그 자리에 '사진 없음' 을 세운다.
   슬라이드가 없으면 Swiper 의 화살표·점도 함께 지운다 — Swiper 는 슬라이드가
   0 이어도 껍데기를 남겨 두므로 여기서 감춰야 한다. */
body.solune-shop-page .solune-review-lightbox-noimg {
    display: none;
    margin: 0;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    /* 사진 칸은 거의 검정이다. 그 위에서 읽히는 옅은 흰색으로 둔다 —
       라이트에서도 다크에서도 바탕이 같으므로 값도 하나로 둔다. */
    color: rgba(255, 255, 255, .55);
    /* 대문자 한 낱말이라 자간을 벌려야 글자가 뭉치지 않는다. */
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .18em;
}
body.solune-shop-page .solune-review-lightbox-noimg .fa { font-size: 2rem; letter-spacing: normal; }
body.solune-shop-page .solune-review-lightbox-panel.is-noimg .solune-review-lightbox-noimg { display: flex; }
body.solune-shop-page .solune-review-lightbox-panel.is-noimg .solune-review-lightbox-swiper { display: none; }

/* 표지 사진이 단추가 됐다. 테두리·바탕은 지우고 누를 수 있다는 것만 남긴다. */
body.solune-shop-page .sit_use_li button.sit_thum {
    display: block;
    padding: 0;
    border: 0;
    background: var(--solune-surface-soft);
    cursor: pointer;
    overflow: hidden;
}
body.solune-shop-page .sit_use_li button.sit_thum:focus-visible { outline: 2px solid var(--solune-primary); outline-offset: 2px; }
/* 펼친 본문의 사진도 누르면 열린다. */
body.solune-shop-page .sit_use_p img { cursor: pointer; }

/* 좁은 화면. 두 칸을 위아래로 쌓고 사진 칸 높이를 줄인다. */
@media (max-width: 859px) {
    body.solune-shop-page .solune-review-lightbox-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        width: min(560px, 100%);
    }
    body.solune-shop-page .solune-review-lightbox-stage {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        max-height: 45vh;
    }
    body.solune-shop-page .solune-review-lightbox-stage img { max-height: 45vh; }
    body.solune-shop-page .solune-review-lightbox-side { grid-column: 1; grid-row: 2; }
}


/* ── 상품 상세: 탭 줄을 굴려도 위에 붙여 둔다 (시안 v2) ────────────
   시안 v2 의 tablist 는 position:sticky · top 0 · z-index 10 에 바탕을
   한 겹 깐다. 탭 본문이 길어(사용후기 탭은 846px, 상품정보 탭은 1300px 넘음)
   아래로 내려가면 다른 탭으로 옮길 손잡이가 화면에서 사라졌다.

   붙는 자리는 0 이 아니라 3.5rem 이다. 이 사이트의 머리는 고정인데 굴리면
   위로 조금 올라가 아랫변이 57px 에 선다(실측). 0 으로 두면 탭 줄이 머리
   뒤로 들어간다.

   바탕은 var(--solune-page) 다. 쇼핑몰 화면에서는 shop-ondam.css:24 · 70 이
   이 토큰을 흰색(다크 #14140f)으로 덮어 두어, 실제로 탭 줄 뒤에 깔린 색과
   같아진다 — 투명하게 두면 붙은 동안 본문이 글자 사이로 비친다.

   z-index 는 10 이라 머리(60) 보다 낮다. 머리가 탭 줄을 덮는 것이 맞다.

   #wrapper 에 overflow-x: clip 이 걸려 있어 sticky 가 죽을까 했지만,
   세로축이 visible 이라 스크롤 상자가 되지 않아 그대로 붙는다(실측). */
body.solune-shop-page #sit_tab .tab_tit {
    position: sticky;
    top: 3.5rem;
    z-index: 10;
    background: var(--solune-page);
}
/* 붙었을 때 글자가 머리에 닿지 않게 위를 띄운다. 시안도 탭 단추에
   위 16 · 아래 14 를 준다(우리는 아래 14 만 있었다). */
body.solune-shop-page #sit_tab .tab_tit button { padding-top: .75rem; }

/* ━━━━ 쇼핑몰 홈 · 분류 칸 줄(.ondam-catrow, shop/index.php) ━━━━ */

/* 칸 아래 가운데의 짧은 막대(::after)를 걷는다. default_shop.css 가 선택된
   칸(.is-featured)에는 늘, 다른 칸에는 hover · 초점 때 그리던 것인데,
   빼 달라는 요청이 있었다(2026-09-28). 강조는 테두리 · 글자 색이 그대로
   맡고, 키보드 초점은 테마 전역 :focus-visible 링이 보인다.
   이 시트가 먼저 실리므로 default_shop.css 의 (0,2,2) 보다 세게 적는다. */
body.solune-shop-page .ondam-catrow a::after { content: none; }

/* ━━━━ 쇼핑몰 홈 · 상품 카드(solune_shop_item_list, theme_functions.php) ━━━━ */

/* 카드는 모서리 0 인데 사진만 .45rem 로 둥글려(default_shop.css 의 .sct_img)
   네모 틀 안에 둥근 사진을 끼운 것처럼 보였다. 카드의 사각에 맞춰 사진도
   각지게 둔다(2026-09-28, 사용자가 고른 안).
   상세 페이지 관련상품(relation.10.skin.php)도 .sct_img 를 쓰지만 그쪽은
   div 이고, 카드 테두리 없이 사진만 12 로 둥글리는 모양이라 건드리지 않는다
   — 그래서 a.sct_img 로 좁힌다. */
body.solune-shop-page .sct_li > a.sct_img { border-radius: 0; }

/* hover 때 카드 윗변이 안 보이던 것. 카드는 hover 에 2px 떠오르는데
   (default_shop.css 의 .sct_li:hover translateY(-2px)) 슬라이드 상자가
   overflow: hidden 이라 떠오른 만큼 잘려 1px 윗변이 사라지고, 아래로
   번지는 그림자(0 10px 24px)도 잘렸다. 상자 안쪽에 위 16 · 아래 32 여유를
   두고 같은 만큼 바깥을 당겨 배치는 그대로 둔다. 넓어진 상자가 위 제목줄
   (24 떨어짐, 누를 것까지 45)이나 아래의 누를 것을 덮지 않는 것을 쟀다. */
body.solune-shop-page .solune-shop-swiper {
    padding-block: 16px 32px;
    margin-block: -16px -32px;
}

/* hover 에 카드가 2px 떠오르던 것(default_shop.css 의 .sct_li:hover
   translateY(-2px))을 끈다 — 들썩이는 느낌이 거슬린다는 요청(2026-09-29).
   테두리 색과 그림자는 그대로 두어 hover 인 것은 계속 보인다. 위 슬라이드
   상자의 여유(위 16 · 아래 32)는 이제 그림자만 담지만 그대로 둔다 — 그림자가
   아래로 번지는 데 여전히 필요하다.
   원래 규칙은 둘이다 — .sct_li:hover (0,3,0) 와 홈 카드에 걸리는
   `.solune-shop-page .sct li:hover` (0,3,1). 같은 특정도면 나중에 실리는
   default_shop.css 가 이기므로 li.sct_li 로 한 칸 올려 (0,4,2) 로 적는다. */
body.solune-shop-page li.sct_li:hover,
body.solune-shop-page .sct li.sct_li:hover { transform: none; }

/* 옵션 있는 상품의 "담기" 층. 카드의 담기를 누르면 theme.shop.list.js 가
   카드 안 .cart-layer 에 sct_cartop 를 붙이고 shop/ajax.action.php 의 옵션 폼
   (.sct_cartop_wr — 숨은 라벨 · select.it_option · 담기 · 닫기)을 채운다.
   테마에 이 모양이 없어 폼이 카드 아래에 맨 모양으로 끼어 카드가 늘어나고
   단추가 글자로 보였다(2026-09-28). basic 처럼 카드 위에 덮되, 카드를 흐리게
   가리고 아래쪽에 판 하나를 올린다 — 사진과 이름은 흐릿하게 비쳐 어느
   상품인지 남는다. 선택자는 default_shop.css 의 .sct_li 규칙보다 세게 적는다
   (이 시트가 먼저 실린다). */
body.solune-shop-page .sct_li > .cart-layer.sct_cartop {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: color-mix(in srgb, var(--solune-surface) 55%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* 좁은 카드에서 단추를 쌓으려고 이 층의 폭을 잰다(아래 @container). 폰의
       2열 카드는 170px 남짓이라 화면 폭이 아니라 층이 받은 폭으로 가른다.
       층은 카드를 절대 위치로 덮어 폭이 내용과 무관하므로 잴 자로 안전하다. */
    container: sct-cartop / inline-size;
}
body.solune-shop-page .sct_li > .cart-layer.sct_cartop:empty { display: none; }
body.solune-shop-page .sct_cartop .sct_cartop_wr {
    border-top: 1px solid var(--solune-border);
    padding: 1rem;
    background: var(--solune-surface);
    box-shadow: 0 -12px 24px -16px rgb(0 0 0 / .35);
}
/* 판의 머리. 코어 폼에는 제목이 없어 무엇을 하는 판인지 적어 둔다. 낭독기는
   각 select 의 숨은 라벨을 읽으므로 이 글은 뺀다(/ ""). */
body.solune-shop-page .sct_cartop .sct_cartop_wr::before {
    display: block;
    margin-bottom: .625rem;
    color: var(--solune-text);
    content: "옵션을 선택해 주세요" / "";
    font-size: .8125rem;
    font-weight: 700;
}
body.solune-shop-page .sct_cartop form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
}
body.solune-shop-page .sct_cartop .it_option {
    grid-column: 1 / -1;
    width: 100%;
    height: 2.5rem;
    border: 1px solid var(--solune-border-strong);
    border-radius: 0;
    background-color: var(--solune-surface);
    padding-inline: .75rem;
    color: var(--solune-text);
    font-size: .8125rem;
}
/* 앞 옵션을 고르기 전에는 막혀 있다. 브라우저 기본 회색이 테마 바탕과
   섞여 구별이 안 되므로 옅은 바탕 · 흐린 글자로 되살린다. */
body.solune-shop-page .sct_cartop .it_option:disabled {
    background-color: var(--solune-surface-soft);
    color: var(--solune-muted);
    cursor: not-allowed;
}
body.solune-shop-page .sct_cartop :is(.cartopt_cart_btn, .cartopt_close_btn) {
    min-height: 2.5rem;
    margin-top: .25rem;
    padding: 0 .875rem;
    border: 1px solid var(--solune-primary);
    border-radius: 0;
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
/* 좁은 카드(폰 2열 등). 두 단추를 한 줄에 두면 "장바구니 담기" 가 한 글자씩
   세로로 꺾였다. 한 줄에 하나씩 쌓고 판 안쪽도 줄인다. */
@container sct-cartop (max-width: 15rem) {
    body.solune-shop-page .sct_cartop form { grid-template-columns: minmax(0, 1fr); }
    body.solune-shop-page .sct_cartop .sct_cartop_wr { padding: .75rem; }
    body.solune-shop-page .sct_cartop .cartopt_close_btn { margin-top: 0; }
}
body.solune-shop-page .sct_cartop .cartopt_cart_btn { background: var(--solune-primary); color: var(--solune-primary-ink); }
body.solune-shop-page .sct_cartop .cartopt_cart_btn:hover { background: var(--solune-primary-hover); }
body.solune-shop-page .sct_cartop .cartopt_close_btn { border-color: var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text-soft); }
body.solune-shop-page .sct_cartop .cartopt_close_btn:hover { border-color: var(--solune-text); color: var(--solune-text); }