@charset "utf-8";

/* ── 쇼핑몰 시트 ──────────────────────────────────────────────────
   쇼핑몰 화면(_SHOP_)에서만 default.css 뒤(순서 320)에 싣는다. 2026-09-24 에
   shop · shop-pages · shop-ondam · shop-responsive · shop-carousel ·
   shop-detail 여섯 장을 원래 싣던 순서 그대로 이어 붙였다.

   절마다 머리표(━━━━ 옛 파일 이름 ━━━━)를 달아 두었다. 주석에서
   "shop-pages.css 의 …" 처럼 파일 이름으로 가리키는 곳은 그 절을 뜻한다.

   스킨 폴더의 skin/shop/basic/style.css 는 따로 남아 있다(스킨이 순서 0 으로
   싣는다 — 이 파일보다 먼저 온다). */

/* ━━━━ shop.css ━━━━
   (옛 파일 · 원래 순서 320 · 원래 조건: 쇼핑몰 화면 · head.sub.php) */

/* Solune shopping layer: the Gnuboard shop markup remains compatible, while the visual shell is theme-owned. */
body.solune-page:has(.solune-shop-page) { background: var(--solune-page); }
/* 바탕색과 글자색은 shop-ondam.css 의 토큰 블록이 팔레트와 함께 준다. */
.solune-shop-page { min-height: 100vh; }
.solune-shop-shell { width: min(100% - 2rem, 80rem); margin-inline: auto; }
/* 아래 테두리에는 검색 독과 같은 그림자를 딸려 보낸다. 검색을 열면 헤더
   테두리가 독으로 넘어가는데(shop-ondam.css 의 .solune-search-active 규칙),
   독에는 그림자가 있고 헤더에는 없어 여닫을 때마다 헤더 밑이 평평했다
   두꺼워졌다 했다. 값은 community-drawer.css 의 독 그림자와 같은 것이다 —
   두 상태가 같은 깊이로 떠 있어야 한다. */
.solune-shop-header { position: relative; z-index: 60; border-bottom: 1px solid var(--solune-border); background: var(--solune-surface); box-shadow: 0 8px 12px -4px color-mix(in srgb, var(--solune-text) 7%, transparent); }
/* 서비스 전환 바는 커뮤니티와 같은 컴포넌트다. 모양은 community.css 의
   .solune-community-service-switch 가 갖고 있고, 여기서는 셸만 쇼핑몰
   레일에 맞춰 준다. */

.solune-shop-mainbar { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 4.5rem; align-items: center; gap: 2rem; }
.solune-shop-nav { display: flex; min-width: 0; align-items: center; gap: .75rem; }
.solune-shop-brand { display: inline-flex; min-width: 0; align-items: center; gap: .65rem; color: var(--solune-text); }
.solune-shop-brand img, .solune-shop-footer-brand img { display: block; width: auto; height: 30px; }
.solune-shop-search-dock-inner { padding-block: 1.25rem 1.5rem; }
.solune-shop-search { display: flex; min-width: 0; height: 2.875rem; align-items: center; border: 1px solid var(--solune-border-strong); border-radius: .625rem; background: var(--solune-surface-soft); transition: border-color .16s, box-shadow .16s; }
.solune-shop-search:focus-within { border-color: var(--solune-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--solune-primary) 14%, transparent); }
.solune-shop-search input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: transparent; color: var(--solune-text); padding: 0 1rem; font: inherit; font-size: .875rem; }
.solune-shop-search input::placeholder { color: var(--solune-muted); }
.solune-shop-search button { display: inline-grid; width: 2.75rem; height: 2.75rem; flex: none; place-items: center; border: 0; border-radius: .5rem; background: transparent; color: var(--solune-primary); cursor: pointer; }
.solune-shop-search button:hover, .solune-shop-search button:focus-visible { background: var(--solune-primary-soft); }
.solune-shop-actions { display: flex; align-items: center; gap: .75rem; }
.solune-shop-search-toggle, .solune-shop-account, .solune-shop-cart { position: relative; display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: .5rem; background: transparent; color: var(--solune-text-soft); cursor: pointer; font: inherit; font-size: .8125rem; font-weight: 700; }
.solune-shop-search-toggle { width: 2.75rem; font-size: 1rem; }
.solune-shop-account { padding-inline: .65rem; }
.solune-shop-search-toggle:hover, .solune-shop-account:hover, .solune-shop-cart:hover { background: var(--solune-primary-soft); color: var(--solune-primary); }
.solune-shop-cart { width: 2.75rem; font-size: 1rem; }
.solune-shop-cart-count { position: absolute; top: .1rem; right: .05rem; display: inline-grid; min-width: 1.1rem; height: 1.1rem; padding-inline: .25rem; place-items: center; border-radius: 999px; background: var(--solune-primary); color: var(--color-primary-content, #fff); font-size: .62rem; font-weight: 900; }

.solune-shop-category-toggle { display: inline-flex; min-height: 2.5rem; white-space: nowrap; align-items: center; gap: .5rem; border: 1px solid var(--solune-primary); border-radius: .5rem; background: var(--solune-primary); color: var(--color-primary-content, #fff); cursor: pointer; padding: 0 1rem; font: inherit; font-size: .8125rem; font-weight: 800; }
.solune-shop-category-toggle:hover, .solune-shop-category-toggle:focus-visible { background: var(--solune-primary-hover); }
.solune-shop-type-nav { display: flex; min-width: 0; align-items: center; gap: .15rem; }
.solune-shop-type-nav a { display: inline-flex; min-height: 2.5rem; align-items: center; border-radius: .5rem; color: var(--solune-text-soft); padding-inline: .75rem; font-size: .8125rem; font-weight: 750; white-space: nowrap; }
.solune-shop-type-nav a:hover, .solune-shop-type-nav a:focus-visible { background: var(--solune-primary-soft); color: var(--solune-primary); }

/* 펼침 패널은 메인바를 기준으로 놓인다. left 는 셸의 안쪽 여백만큼 밀어
   로고·본문과 같은 레일에서 시작하게 한다. */
.solune-shop-category { position: absolute; z-index: 100; top: calc(100% + .5rem); left: 1.5rem; visibility: hidden; width: min(50rem, calc(100vw - 2rem)); opacity: 0; pointer-events: none; transform: translateY(-.35rem); transition: opacity .16s, transform .16s, visibility .16s; }
.solune-shop-category.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
.solune-shop-category-backdrop { display: none; }
.solune-shop-category-panel { position: relative; border: 1px solid var(--solune-border); border-radius: .75rem; background: var(--solune-surface); box-shadow: 0 18px 42px color-mix(in srgb, var(--solune-text) 14%, transparent); overflow: hidden; }
.solune-shop-category-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--solune-border); padding: 1rem 1.25rem; }
.solune-shop-category-head h2 { margin-top: .2rem; font-size: 1.05rem; font-weight: 900; }

.solune-shop-category-empty { grid-column: 1 / -1; padding: 2rem; color: var(--solune-muted); text-align: center; }

.solune-shop-wrapper { min-height: 40rem; background: var(--solune-page); }
.solune-shop-container { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; width: min(100% - 2rem, 80rem); margin: 0 auto; padding: 2rem 0 4rem; }
.solune-shop-container > .shop-content { min-width: 0; grid-column: 2; }
.solune-shop-container > #aside + .shop-content { grid-column: 2; }
.solune-shop-container > .shop-content:only-child { grid-column: 1 / -1; }
.solune-shop-sidebar { display: grid; align-content: start; gap: 1rem; grid-column: 1; grid-row: 1; }
.solune-shop-sidebar-card { border: 1px solid var(--solune-border); border-radius: .75rem; background: var(--solune-surface); padding: 1.25rem; box-shadow: 0 1px 2px color-mix(in srgb, var(--solune-text) 5%, transparent); }
.solune-shop-sidebar-card h2 { margin-top: .35rem; font-size: 1.05rem; font-weight: 900; }

.solune-shop-help-card { background: var(--solune-primary-soft); }
.solune-shop-help-card p { margin: .65rem 0 1rem; color: var(--solune-muted); font-size: .75rem; line-height: 1.6; }
.solune-shop-page-title { margin-bottom: 1.25rem; border-bottom: 1px solid var(--solune-border); padding-bottom: 1rem; }
.solune-shop-page-title h1 { margin-top: .35rem; font-size: 1.75rem; font-weight: 950; letter-spacing: -.04em; }
.solune-shop-eyebrow { display: block; color: var(--solune-primary); font-size: .66rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }

.solune-shop-banner { margin-top: 1rem; overflow: hidden; border-radius: .75rem; }
.solune-shop-banner img { display: block; width: 100%; height: auto; }
/* 배너가 한 장도 없을 때 최고관리자에게만 뜨는 안내. 배너가 설 자리를
   그대로 쓰므로 위 여백도 배너와 같게 둔다. 카드 모양은 default.css 의
   .solune-empty-card 가 낸다. */
.solune-shop-banner-empty { margin-top: 1rem; }
/* 글자색을 직접 적어야 한다. daisyUI 의 `.btn { color: var(--btn-fg) }` 는
   @layer components 안에 있고, default.css 의 `a { color: inherit }` 는
   레이어 밖이다. 레이어 밖 선언은 특정도와 상관없이 레이어 안을 이긴다 —
   그래서 <a class="btn"> 만 글자색을 잃는다(<button> 은 멀쩡하다).
   지워진 .solune-shop-hero .btn 이 색을 직접 적어 둔 것도 같은 이유다.
   짝이 맞는 --color-primary-content 를 쓴다. 흰색을 박아 두면 다크에서
   배경이 연한 녹색(#7fae9d)이라 글자가 묻힌다. */
.solune-shop-banner-empty .btn { color: var(--color-primary-content); }
/* .solune-empty-card 의 기본 본문색은 --solune-muted 인데, 온담 팔레트의
   그 값(#8a8a85)은 흰 바닥에서 3.47:1 이라 WCAG AA(4.5:1)에 못 미친다.
   커뮤니티 팔레트(#667085)는 5.3:1 로 통과해서 이 화면에서만 걸린다.
   한 단계 진한 --solune-text-soft 로 올린다. */
.solune-shop-banner-empty p { color: var(--solune-text-soft); }
.solune-shop-product-feed { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.solune-shop-product-section { min-width: 0; border: 1px solid var(--solune-border); border-radius: .75rem; background: var(--solune-surface); padding: 1.25rem; box-shadow: 0 1px 2px color-mix(in srgb, var(--solune-text) 5%, transparent); }
.solune-shop-section-head { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--solune-border); margin-bottom: 1rem; padding-bottom: .875rem; }
.solune-shop-section-head h2 { margin-top: .25rem; font-size: 1.2rem; font-weight: 950; letter-spacing: -.035em; }

/* Basic shop skin bridge: keeps item_list(), option forms and cart actions intact. */
.solune-shop-page .sct { display: grid; grid-template-columns: repeat(var(--sct-cols, 4), minmax(0, 1fr)); gap: 22px; width: 100%; margin: 0; padding: 0; list-style: none; }
/* 카드. 온담 시안대로 모서리 없는 세로 flex 상자다 — 한때 shop-ondam.css 가
   이 값들을 뒤에서 다시 덮었는데, 그러면 한 속성이 두 곳에 있어 어느 쪽이
   보이는지 파일을 둘 다 열어야 알 수 있었다. 최종값을 여기 한 곳에 둔다.
   `.sct li` 는 코어 스킨이 클래스 없이 내보내는 칸이다. */
.solune-shop-page .sct li,
.solune-shop-page .sct_li { position: relative; display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--solune-border); border-radius: 0; background: var(--solune-surface); padding: 0; transition: border-color .16s; }
.solune-shop-page .sct li:hover,
.solune-shop-page .sct_li:hover { border-color: var(--solune-primary); box-shadow: 0 10px 24px color-mix(in srgb, var(--solune-text) 8%, transparent); transform: translateY(-2px); }
.solune-shop-page .sct_img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: .45rem; background: var(--solune-surface-soft); }
.solune-shop-page .sct_img > a { display: block; aspect-ratio: 1; }
.solune-shop-page .sct_img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.solune-shop-page .sct_ct_wrap { padding: .8rem .25rem .25rem; }
.solune-shop-page .sct_star { min-height: 1rem; color: var(--solune-primary); font-size: .7rem; }
.solune-shop-page .sct_txt { margin-top: .35rem; min-height: 2.8rem; }
.solune-shop-page .sct_txt a { color: var(--solune-text); font-size: .875rem; font-weight: 800; line-height: 1.45; }
.solune-shop-page .sct_txt a:hover { color: var(--solune-primary); }
.solune-shop-page .sct_basic { display: -webkit-box; min-height: 1.4rem; margin: 0 0 12px; padding: 0 16px; overflow: hidden; color: var(--solune-muted-soft); font-size: 12.5px; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.solune-shop-page .sct_bottom { display: flex; min-height: 2.25rem; align-items: end; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.solune-shop-page .sct_cost { padding: 0 16px; color: var(--solune-muted-soft); font-size: 12px; font-weight: 900; text-decoration: line-through; }
.solune-shop-page .sct_dict { display: block; color: var(--solune-muted); font-size: .68rem; font-weight: 500; text-decoration: line-through; }
.solune-shop-page .sct_op_btn { display: flex; align-items: center; gap: .25rem; }
.solune-shop-page .sct_op_btn button { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--solune-border); border-radius: .4rem; background: var(--solune-surface); color: var(--solune-muted); cursor: pointer; }
.solune-shop-page .sct_op_btn button:hover, .solune-shop-page .sct_op_btn button:focus-visible { border-color: var(--solune-primary); color: var(--solune-primary); }
.solune-shop-page .sct_btn { position: absolute; right: .75rem; bottom: 4.5rem; left: .75rem; opacity: 0; transform: translateY(.35rem); transition: opacity .16s, transform .16s; }
.solune-shop-page .sct_li:hover .sct_btn, .solune-shop-page .sct_li:focus-within .sct_btn { opacity: 1; transform: translateY(0); }
.solune-shop-page .sct_cart { width: 100%; min-height: 2.25rem; border: 1px solid var(--solune-primary); border-radius: .45rem; background: var(--solune-primary); color: var(--color-primary-content, #fff); cursor: pointer; font-size: .75rem; font-weight: 800; }
.solune-shop-page .sct_noitem { margin: 0; border: 1px dashed var(--solune-border-strong); border-radius: .5rem; color: var(--solune-muted); padding: 2.5rem 1rem; text-align: center; }
.solune-shop-page .shop_icon_soldout { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--solune-text) 45%, transparent); color: #fff; font-size: .75rem; font-weight: 900; letter-spacing: .08em; }

.solune-shop-page #sct_location { display: flex; min-height: 2.5rem; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--solune-muted); font-size: .8rem; }
.solune-shop-page #sct_location .go_home { color: var(--solune-primary); }
.solune-shop-page #sct_location select { height: 2.25rem; border: 1px solid var(--solune-border); border-radius: .4rem; background: var(--solune-surface); color: var(--solune-text-soft); padding-inline: .6rem; font: inherit; font-size: .75rem; }
.solune-shop-page #sct_ct_1 { margin-bottom: 1rem; border: 1px solid var(--solune-border); border-radius: .625rem; background: var(--solune-surface); padding: 1rem; }
.solune-shop-page #sct_ct_1 h2, .solune-shop-page #sct_sort h2, .solune-shop-page #sct_lst h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.solune-shop-page #sct_ct_1 ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.solune-shop-page #sct_ct_1 a, .solune-shop-page #ssch_sort a { display: inline-flex; min-height: 2rem; align-items: center; border-radius: 999px; background: var(--solune-surface-soft); color: var(--solune-text-soft); padding-inline: .75rem; font-size: .75rem; }
.solune-shop-page #sct_ct_1 a:hover, .solune-shop-page #ssch_sort a:hover { background: var(--solune-primary-soft); color: var(--solune-primary); }
.solune-shop-page #sct_sortlst { display: flex; min-height: 2.5rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.solune-shop-page #sct_sort ul, .solune-shop-page #sct_lst { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.solune-shop-page #ssch_sort a { background: transparent; color: var(--solune-muted); }
.solune-shop-page #sct_lst button { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--solune-border); border-radius: .35rem; background: var(--solune-surface); color: var(--solune-muted); cursor: pointer; }
.solune-shop-page #sct_lst button.sct_lst_on { border-color: var(--solune-primary); background: var(--solune-primary-soft); color: var(--solune-primary); }

/* 리스트형(sct_40). 코어 js/shop.list.js 가 목록 버튼을 누르면 ul.sct 에 sct_40 을 붙이고 쿠키
   (ck_itemlist<ca_id>_type)로 기억한다. 기본 스킨은 그 클래스로 float 배치를 그리지만 이 테마는
   격자라, 한 줄 한 칸으로 바꾸고 카드를 가로로 눕힌다. 칸의 인라인 여백은 li 의
   data-css="nocss" 가 막는다. 어느 화면 폭에서든 한 칸이어야 하므로 반응형 규칙보다 구체적으로 쓴다. */
.solune-shop-page .sct.sct_40 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.solune-shop-page .sct.sct_40 .sct_li { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: .75rem; }
.solune-shop-page .sct.sct_40 .sct_img { flex: none; width: 9rem; aspect-ratio: 1 / 1; }
.solune-shop-page .sct.sct_40 .ondam-card-brand,
.solune-shop-page .sct.sct_40 .sct_txt,
.solune-shop-page .sct.sct_40 .ondam-card-prices { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.solune-shop-page .sct.sct_40 .sct_txt { flex: 1 1 12rem; min-height: 0; min-width: 0; }
.solune-shop-page .sct.sct_40 .sct_btn { position: static; width: auto; margin-left: auto; opacity: 1; transform: none; }
.solune-shop-page .sct.sct_40 .sct_cart { width: auto; padding-inline: 1rem; white-space: nowrap; }
@media (max-width: 640px) {
    .solune-shop-page .sct.sct_40 .sct_li { gap: .75rem; padding: .5rem; }
    .solune-shop-page .sct.sct_40 .sct_img { width: 5.5rem; }
    .solune-shop-page .sct.sct_40 .sct_btn { flex-basis: 100%; margin-left: 0; }
}

.solune-shop-page #sit_ov_from { margin-top: 1rem; }
/* 스킨 style.css 가 이 상자를 1200px 로 못박아 좁은 화면에서 화면을 넘겼다. */
.solune-shop-page #sit_ov_wrap { display: grid; width: 100%; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr); gap: 2rem; border: 1px solid var(--solune-border); border-radius: .75rem; background: var(--solune-surface); padding: 1.25rem; }
.solune-shop-page #sit_pvi_big { position: relative; overflow: hidden; border-radius: .625rem; background: var(--solune-surface-soft); }
.solune-shop-page #sit_pvi_big > a:first-child, .solune-shop-page #sit_pvi_big > img { display: block; aspect-ratio: 1; width: 100%; }
.solune-shop-page #sit_pvi_big img { width: 100%; height: 100%; object-fit: contain; }
.solune-shop-page #sit_pvi_thumb { display: flex; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.solune-shop-page #sit_pvi_thumb img { width: 3.75rem; height: 3.75rem; border: 1px solid var(--solune-border); border-radius: .35rem; object-fit: cover; }
.solune-shop-page #sit_ov { width: 100%; min-width: 0; padding: .5rem; }
.solune-shop-page #sit_title { font-size: 1.6rem; font-weight: 950; letter-spacing: -.045em; }
.solune-shop-page #sit_desc { margin-top: .5rem; color: var(--solune-muted); font-size: .875rem; line-height: 1.6; }
.solune-shop-page .solune-sit-brand { color: var(--solune-muted); font-size: .78rem; font-weight: 600; }
.solune-shop-page #sit_star_sns { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; color: var(--solune-muted); font-size: .78rem; }
.solune-shop-page .sit_star { width: 5.5rem; }
.solune-shop-page .solune-sit-score { color: var(--solune-text); font-weight: 800; }
.solune-shop-page #sit_btn_opt { position: relative; display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.solune-shop-page #sit_btn_opt > * { cursor: pointer; }
.solune-shop-page #sit_opt_info { margin-top: .35rem; color: var(--solune-muted-soft); font-size: .72rem; }

/* 가격 한 줄: 할인율 · 판매가 · 취소선 정가 */
.solune-shop-page .solune-sit-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-top: 1rem; }
.solune-shop-page .solune-sit-discount { color: var(--ondam-sale, var(--solune-primary)); font-size: 1.25rem; font-weight: 800; }
.solune-shop-page .solune-sit-price-now { color: var(--solune-text); font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; }
.solune-shop-page .solune-sit-price-was { color: var(--solune-muted-soft); font-size: .875rem; text-decoration: line-through; }
.solune-shop-page .solune-sit-price-none { font-size: 1.25rem; }

/* 안내 줄. 값이 있는 항목만 dt/dd 로 들어온다. */
.solune-shop-page .sit_info { margin-top: 1.25rem; border-top: 1px solid var(--solune-border); padding-top: 1rem; }
.solune-shop-page .solune-sit-meta { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); row-gap: .55rem; margin: 0; }
.solune-shop-page .solune-sit-meta dt { color: var(--solune-muted); font-size: .78rem; }
.solune-shop-page .solune-sit-meta dd { margin: 0; color: var(--solune-text-soft); font-size: .8125rem; }

.solune-shop-page .sit_option, .solune-shop-page #sit_sel_option { margin-top: 1rem; border: 1px solid var(--solune-border); border-radius: .5rem; padding: .75rem; }
.solune-shop-page .sit_option h3, .solune-shop-page #sit_sel_option h3 { margin-bottom: .5rem; font-size: .75rem; font-weight: 850; }
.solune-shop-page .sit_option select { width: 100%; min-height: 2.75rem; border: 1px solid var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text); padding-inline: .75rem; font-size: .8125rem; }
.solune-shop-page .solune-sit-selected-title { margin: 1.25rem 0 -.25rem; color: var(--solune-muted); font-size: .75rem; font-weight: 700; }

/* 선택된 옵션 카드. 옵션이 없는 상품은 스킨이 그린 모양(.opt_name/.opt_count),
   옵션을 고른 상품은 shop.js 가 그린 모양(span + div)이 온다. 둘 다 받는다. */
.solune-shop-page #sit_opt_added { margin: 0; padding: 0; list-style: none; }
.solune-shop-page .sit_opt_list, .solune-shop-page .sit_spl_list { display: grid; gap: .5rem; border-bottom: 1px solid var(--solune-border); padding: .65rem 0; }
.solune-shop-page #sit_opt_added > li:last-child { border-bottom: 0; padding-bottom: 0; }
.solune-shop-page .sit_opt_subj { color: var(--solune-text); font-size: .8125rem; font-weight: 700; }
.solune-shop-page .sit_opt_prc { color: var(--solune-text-soft); font-size: .8125rem; }
.solune-shop-page .opt_count, .solune-shop-page .sit_opt_list > div, .solune-shop-page .sit_spl_list > div { display: flex; align-items: center; gap: .35rem; }
.solune-shop-page .opt_count .sit_opt_prc { margin-left: auto; font-weight: 700; }
.solune-shop-page :is(.sit_qty_minus, .sit_qty_plus, .sit_opt_del) { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text-soft); cursor: pointer; font-size: .7rem; }
.solune-shop-page :is(.sit_qty_minus, .sit_qty_plus, .sit_opt_del):hover { border-color: var(--solune-primary); color: var(--solune-primary); }
.solune-shop-page .sit_opt_list :is(.num_input, .frm_input) { width: 3rem; height: 2rem; border: 1px solid var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text); text-align: center; font-size: .8125rem; }

/* 총 결제금액. 안쪽 문구는 shop.js 가 쓰므로("총 금액 :") 그 라벨은 감추고
   스킨이 둔 라벨을 쓴다. */
.solune-shop-page .solune-sit-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--solune-border); margin-top: 1rem; padding-top: 1rem; }
.solune-shop-page .solune-sit-total-label { color: var(--solune-text-soft); font-size: .8125rem; font-weight: 700; }
.solune-shop-page .solune-sit-total #sit_tot_price > span { display: none; }

/* 탭. 코어 shop/item.php 가 내보내는 ul.sanchor 라 마크업은 못 바꾸고 모양만 준다. */
.solune-shop-page .sanchor { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 2.5rem 0 0; border-bottom: 1px solid var(--solune-border); background: var(--solune-surface-soft); padding: 0; list-style: none; }
.solune-shop-page .sanchor a { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: .35rem; border-top: 2px solid transparent; color: var(--solune-muted); font-size: .875rem; font-weight: 600; }
.solune-shop-page .sanchor a:hover, .solune-shop-page .sanchor a:focus-visible { color: var(--solune-text); }
.solune-shop-page .sanchor a.sanchor_on { border-top-color: var(--solune-text); background: var(--solune-surface); color: var(--solune-text); font-weight: 700; }
.solune-shop-page .sanchor a span { color: var(--solune-muted-soft); font-size: .75rem; }

/* 갤러리. 영카트 스킨 style.css 가 큰 이미지를 300px 로 못박아 왼쪽 칸이 비어
   보였다. 칸을 다 쓰게 하고, 보이는 것은 .visible 한 장뿐이다(스킨 jQuery 가
   썸네일 hover 로 옮긴다). 확대 아이콘(#popup_item_image)은 숨기지 않는다. */
.solune-shop-page #sit_pvi, .solune-shop-page #sit_pvi_big { width: 100%; }
.solune-shop-page #sit_pvi_big { aspect-ratio: 1; }
.solune-shop-page #sit_pvi_big > a:not(#popup_item_image):not(.visible) { display: none; }
.solune-shop-page #sit_pvi_big > a.visible { display: block; width: 100%; height: 100%; }
.solune-shop-page #sit_pvi_big > a.visible img, .solune-shop-page #sit_pvi_big > img { width: 100%; height: 100%; object-fit: cover; }
.solune-shop-page #sit_pvi_thumb a { display: block; }
.solune-shop-page #sit_pvi_thumb img { width: 5.5rem; height: 5.5rem; }
.solune-shop-page #sit_pvi_thumb .is-current img { border-color: var(--solune-text); }

/* 상세 영역. 스킨이 내보내는 #sit_tab(버튼 + rel 로 여닫는 jQuery)은 그대로 두고
   시안의 탭 바 모양만 준다. 활성 탭만 흰 바탕에 위 테두리가 선다.
   스킨 style.css 가 #sit_info 를 inline-flex, #sit_tab 을 flex 로 두어 탭과
   내용이 좌우로 갈라져 있었다. 세로로 되돌린다. */
.solune-shop-page #sit_info { display: block; margin-top: 2.5rem; }
.solune-shop-page #sit_tab { display: block; width: 100%; }
.solune-shop-page #sit_tab .tab_tit, .solune-shop-page #sit_tab .tab_con { width: 100%; }
.solune-shop-page #sit_info { min-height: 0; }
/* 스킨은 활성 탭 아래에 파란 막대를 그린다. 우리 활성 표시는 위 테두리라
   그 막대는 끈다. 색만 바꾸면 표시가 두 겹이 된다. */
.solune-shop-page #sit_tab .tab_tit li .selected:after { display: none; }
.solune-shop-page #sit_tab .tab_tit { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; border-block: 1px solid var(--solune-border); background: var(--solune-surface-soft); padding: 0; list-style: none; }
.solune-shop-page #sit_tab .tab_tit button { display: flex; width: 100%; min-height: 3.25rem; align-items: center; justify-content: center; gap: .35rem; border: 0; border-top: 2px solid transparent; background: transparent; color: var(--solune-muted); cursor: pointer; font: inherit; font-size: .875rem; font-weight: 600; }
.solune-shop-page #sit_tab .tab_tit button:hover, .solune-shop-page #sit_tab .tab_tit button:focus-visible { color: var(--solune-text); }
.solune-shop-page #sit_tab .tab_tit button.selected { border-top-color: var(--solune-text); background: var(--solune-surface); color: var(--solune-text); font-weight: 700; }
.solune-shop-page #sit_tab .tab_tit span { color: var(--solune-muted-soft); font-size: .75rem; }
.solune-shop-page #sit_tab .tab_con { margin: 0; padding: 2.5rem 0 0; list-style: none; }
.solune-shop-page #sit_tab .tab_con > li { min-width: 0; }
/* 스킨은 #sit_inf 의 h2·h3 를 화면에서 뺀다(낭독기용 이름). 시안도 이 자리에
   제목을 두지 않고 판매자가 쓴 상세설명만 보이므로 그대로 둔다. */
.solune-shop-page #sit_inf_explan { color: var(--solune-text-soft); font-size: .9rem; line-height: 1.85; }
.solune-shop-page #sit_inf_explan img { max-width: 100%; height: auto; }
.solune-shop-page #sit_inf_open { width: 100%; border-collapse: collapse; border-top: 1px solid var(--solune-text); }
.solune-shop-page #sit_inf_open th, .solune-shop-page #sit_inf_open td { border-bottom: 1px solid var(--solune-border); padding: .8rem 1rem; text-align: left; font-size: .8125rem; }
.solune-shop-page #sit_inf_open th { width: 11rem; background: var(--solune-surface-soft); color: var(--solune-text-soft); font-weight: 600; }

/* 시안의 상세에는 따라다니는 구매 상자가 없다. 위 구매 패널과 같은 폼을 한 번 더
   그리는 것이라 감춘다(요소는 남겨 둔다 — shop.js 가 옵션을 이 상자와 맞춘다). */
.solune-shop-page #sit_buy { display: none; }

/* 상품 상세에서는 페이지 제목 띠를 화면에서 뺀다. 바로 아래 구매 패널에 같은
   상품명이 다시 나와 두 번 읽힌다. 제목 자체는 지우지 않고 낭독기에만 남긴다.

   장바구니는 한때 여기 같이 있었다. 주문 단계 1번이 '장바구니' 라 겹친다고 봤는데,
   시안(`Solune 장바구니 옵션수정`)은 제목과 단계 띠를 위아래로 함께 둔다 —
   띠 안의 말은 지금 어디쯤인지를 가리키는 것이라 제목과 하는 일이 다르다. */
.solune-shop-page:has(#sit_ov_from) .solune-shop-page-title { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; padding: 0; white-space: nowrap; }
.solune-shop-page #sit_ov_btn { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; margin-top: 1rem; }
/* 스킨은 버튼을 186px 로 못박고 float 로 흘린다. 그리드 칸을 그대로 쓰게 푼다. */
.solune-shop-page #sit_ov_btn button, .solune-shop-page #sit_ov_btn a { display: inline-flex; width: 100%; min-width: 0; min-height: 2.75rem; align-items: center; justify-content: center; float: none; margin: 0; border-radius: .45rem; padding-inline: .75rem; font-size: .8125rem; font-weight: 850; }
.solune-shop-page .sit_btn_cart { border: 1px solid var(--solune-primary); background: transparent; color: var(--solune-primary); cursor: pointer; }
.solune-shop-page .sit_btn_buy { border: 1px solid var(--solune-primary); background: var(--solune-primary); color: var(--color-primary-content, #fff); cursor: pointer; }
.solune-shop-page .sit_btn_wish { width: 2.75rem; border: 1px solid var(--solune-border); color: var(--solune-muted); }
.solune-shop-page #sit_tot_price { margin-top: 1rem; color: var(--solune-primary); font-size: 1.2rem; font-weight: 900; text-align: right; }

/* ── 여기로 옮겨 온 까닭 (2026-09-22) ─────────────────────────────
   아래 '헤더 카테고리 펼침 메뉴' 절은 skin/shop/basic/style.css 에 있었다.
   그 시트는 쇼핑몰 스킨이 add_stylesheet(G5_SHOP_SKIN_URL.'/style.css', 0)
   으로 싣는 것이라, 스킨을 쓰지 않는 화면에는 아예 실리지 않는다 —
   실측으로 장바구니 · 주문서 · 주문조회 · 마이페이지 · 보관함이 그랬다.

   그런데 이 메뉴는 머리에 딸린 조각이라 쇼핑몰 화면 어디에나 있다. 그래서
   그런 화면에서 분류를 올리면 아무 모양도 안 붙은 채 펼쳐진 덩어리가
   그대로 드러났다(주문조회에서 처음 보고했다).

   옮길 것을 추측으로 고르지 않았다. 스킨 시트의 선택자 429개를 그 다섯
   화면의 DOM 에 대고 세 보니, 걸리는 것은 이 절의 .solune-shop-category*
   17개뿐이었다. 그래서 이 절만 옮긴다.

   실리는 자리는 head.sub.php:145 의 shop → shop-pages → shop-ondam →
   shop-responsive → shop-carousel → shop-detail 중 첫째다. 예전에도 스킨
   시트(순서 0)가 그 다섯보다 앞섰으므로, 이 절과 그들 사이의 이기고 지는
   짜임은 그대로다 — 이 파일 위쪽의 옛 .solune-shop-category 규칙들보다는
   뒤에 오고 특정도도 한 칸 높아(.solune-shop-page 가 붙어 있다) 그대로
   이기며, shop-ondam.css:324 가 이 절의 패널 모서리를 덮는 것도 그대로다. */

/* --- 헤더 카테고리 펼침 메뉴 ---------------------------------------------
   시안 `카테고리 메뉴 v3` 을 따른다. 헤더 아래로 흰 띠가 좌우 끝까지 흐르고,
   그 안에서 분류가 여러 칸으로 늘어선다. 마우스를 얹으면 열린다(여닫는
   일은 shop/category.php 의 스크립트가 한다).

   640px 미만은 건드리지 않는다 — 거기서는 shop-pages.css 가 화면을 덮는
   서랍으로 바꿔 두었고, 손가락에는 hover 가 없어 그 편이 맞다.

   이 시트는 순서 0 이라 shop.css(320)보다 먼저 실린다. 그래서 같은 것을
   덮으려면 .solune-shop-page 를 앞에 붙여 한 칸 올려야 한다. */
@media (min-width: 40rem) {
    /* 띠. 헤더가 relative 이고 화면 폭을 다 쓰므로 좌우로 펼친다.
       transform 을 반드시 지운다 — shop.css 가 여기에 translateY 를 걸어
       두었는데, transform 이 있으면 그 안의 position:fixed 가 화면이 아니라
       이 상자를 기준으로 잡혀 뒷막이 띠 안에 갇힌다. */
    .solune-shop-page .solune-shop-category {
        top: 100%;
        right: 0;
        left: 0;
        width: auto;
        transform: none;
    }
    .solune-shop-page .solune-shop-category.is-open { transform: none; }
    /* 흰 바탕은 가짜 요소로 깐다. 상자 자체에 깔면 아래 뒷막(z-index:-1)이
       그 바탕에 가려 보이지 않는다.

       한때 이 흰 바탕이 화면 좌우 끝까지 흘렀다(시안 v3 의 "흰 띠"). 새 시안
       (shop_html2)은 흰 판이 패널 폭(80rem)뿐이고 양옆으로는 뒷막 너머 화면이
       비친다 — 좌우 끝의 흰 여백이 거슬린다는 요청(2026-09-29). 그래서 바탕만
       가운데 패널 폭으로 줄인다. 상자는 화면 폭 그대로 둔다 — 폭을 줄이면
       양옆을 가릴 뒷막을 상자 밖으로 끌어내야 해 100vw 계산이 스크롤막대만큼
       가로로 넘친다. 패널 양옆은 이제 뒷막이라, 포인터가 거기 닿으면
       shop/category.php 의 뒷막 mouseenter 가 메뉴를 닫는다(패널 밖 = 메뉴 밖). */
    .solune-shop-page .solune-shop-category::before {
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        left: 50%;
        width: min(100%, 80rem);
        transform: translateX(-50%);
        border-top: 1px solid var(--solune-border);
        background: var(--solune-surface);
        box-shadow: 0 24px 48px color-mix(in srgb, var(--solune-text) 12%, transparent);
        content: "";
    }
    /* 뒷막. 띠 아래부터 덮는다.
       화면 전체(fixed · inset:0)로 깔면 안 된다 — 헤더 바까지 눌러 로고와
       메뉴가 함께 어두워지고, 뒷막이 헤더의 자손이라 화면 어디에 있어도
       포인터가 헤더 밖으로 나가지 못해 mouseleave 가 영영 안 온다.
       (실측: elementFromPoint(300, 77) 이 뒷막이었다.)
       높이는 100vh 면 넉넉하다 — 띠 아래끝이 늘 화면 위쪽에 있다.

       흰 바탕을 패널 폭으로 줄이면서(위 ::before 주석) 뒷막을 띠 아래가 아니라
       띠 맨 위부터 깐다 — 패널 양옆도 시안처럼 어둡게 가린다. 헤더 바는 띠
       위에 있으므로 여전히 누르지 않는다. 문서 순서상 뒷막이 흰 바탕보다 뒤라
       z-index 를 -1 로 내려 흰 판 뒤에 깔리게 한다(상자가 z-index 100 으로
       쌓임 맥락을 가지므로 상자 밖으로 가라앉지 않는다). */
    .solune-shop-page .solune-shop-category-backdrop {
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        display: block;
        height: 100vh;
        background: color-mix(in srgb, var(--solune-text) 32%, transparent);
        opacity: 0;
        transition: opacity .26s ease;
    }
    .solune-shop-page .solune-shop-category.is-open .solune-shop-category-backdrop { opacity: 1; }

    /* 안쪽. 좌우 여백은 함께 걸친 .solune-shop-shell 이 맡으므로 위아래만 준다. */
    .solune-shop-page .solune-shop-category-panel {
        position: relative;
        z-index: 1;
        overflow-y: auto;
        max-height: calc(100vh - 7rem);
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        padding-block: 28px 40px;
    }

    .solune-shop-page .solune-shop-category-head {
        align-items: baseline;
        border-bottom: 0;
        padding: 0;
        margin-bottom: 20px;
    }
    .solune-shop-page .solune-shop-category-head h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -.02em;
    }

    /* 두 칸. 왼쪽에 큰 분류를 세우고 오른쪽에 그 아래 분류를 편다. */
    .solune-shop-page .solune-shop-category-split {
        display: grid;
        grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
        gap: 0 40px;
        align-items: start;
    }

    /* 왼쪽 이름표 줄. 오른쪽 실선은 목록이 긋고, 지금 고른 것은 그 위에
       2px 짜리 제 선을 얹어 덮는다(margin-right:-1px 이 그 자리를 만든다). */
    .solune-shop-page .solune-shop-category-rail {
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--solune-border);
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .solune-shop-page .solune-shop-category-rail button {
        display: flex;
        width: 100%;
        height: 44px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border: 0;
        border-right: 2px solid transparent;
        margin-right: -1px;
        background: none;
        color: var(--solune-muted);
        cursor: pointer;
        padding: 0 16px;
        font: inherit;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        transition: background-color .16s ease, color .16s ease;
    }
    .solune-shop-page .solune-shop-category-rail button:hover {
        background: var(--solune-surface-soft);
        color: var(--solune-text);
    }
    .solune-shop-page .solune-shop-category-rail button[aria-selected="true"] {
        border-right-color: var(--solune-text);
        background: var(--solune-surface-soft);
        color: var(--solune-text);
        font-weight: 700;
    }
    .solune-shop-page .solune-shop-category-caret { flex: none; font-size: 12px; opacity: 0; }
    .solune-shop-page .solune-shop-category-rail button[aria-selected="true"] .solune-shop-category-caret { opacity: 1; }

    /* 고르지 않은 칸은 여기서만 감춘다. 좁은 화면에는 이름표 줄이 없으므로
       이 규칙도 걸리지 않고, 모든 분류가 그대로 펼쳐진다. */
    .solune-shop-page .solune-shop-category-pane.is-off { display: none; }

/* 열릴 때 한 번 떠오른다. 열려 있을 때만 걸어 두어야 처음 그려질 때
       (숨어 있을 때) 미리 다 돌아 버리지 않는다. */
    .solune-shop-page .solune-shop-category.is-open .solune-shop-category-panel {
        animation: soluneCatPanelIn 260ms cubic-bezier(.2, .7, .2, 1) both;
    }
}

@keyframes soluneCatPanelIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* 오른쪽 내용 — 고른 분류의 이름과 "전체 보기", 그 아래 하위 분류.
   폭과 상관없는 모양이라 미디어 쿼리 밖에 둔다. 좁은 화면(서랍)에서는
   이름표 줄 없이 이 덩이만 차례로 쌓이므로 거기서도 그대로 필요하다. */
.solune-shop-page .solune-shop-category-pane-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--solune-text);
    padding-bottom: 14px;
    margin-bottom: 6px;
}
.solune-shop-page .solune-shop-category-pane-name { font-size: 16px; font-weight: 700; }
.solune-shop-page .solune-shop-category-all { color: var(--solune-primary); font-size: 13px; white-space: nowrap; }
.solune-shop-page .solune-shop-category-all:hover { text-decoration: underline; text-underline-offset: 3px; }

.solune-shop-page .solune-shop-category-subs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 2px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.solune-shop-page .solune-shop-category-subs a {
    display: flex;
    height: 42px;
    align-items: center;
    border-bottom: 1px solid var(--solune-surface-soft);
    color: var(--solune-text-soft);
    padding: 0 4px;
    font-size: 14px;
    transition: color .16s ease, padding-left .16s ease;
}
.solune-shop-page .solune-shop-category-subs a:hover,
.solune-shop-page .solune-shop-category-subs a:focus-visible {
    color: var(--solune-text);
    padding-left: 8px;
}
.solune-shop-page .solune-shop-category-none { margin: 0; color: var(--solune-muted); font-size: 13px; }

/* 좁은 화면(640px 미만)에는 이 패널이 열리지 않는다. 분류는 왼쪽 서랍
   (shop-responsive.css 맨 아래 · js/theme.shop.drawer.js)이 큰 분류마다
   접었다 펴는 목록으로 보여 준다. 서랍의 JS 가 이 패널의 마크업에서 분류를
   옮겨 적으므로 패널 자체는 그대로 둔다. */

@media (prefers-reduced-motion: reduce) {
    .solune-shop-page .solune-shop-category.is-open .solune-shop-category-panel { animation: none; }
    .solune-shop-page .solune-shop-category-backdrop { transition: none; }
    .solune-shop-page .solune-shop-category-rail button,
    .solune-shop-page .solune-shop-category-subs a { transition: none; }
}

/* 아래 필수 입력 표시는 default.css 에 있는 것과 같은 규칙을 복사해 둔 것이다
   (2026-09-24 지시). default.css 쪽도 그대로 있어 모든 화면에 걸리고, 쇼핑몰 화면에서는
   두 벌이 같은 값을 준다. 한쪽을 고치면 다른 쪽도 같이 고친다. */
/* 필수 입력 표시.
   그누보드5 기본 테마는 .required 에 img/require.png 를 오른쪽 위(100% 0)로
   깔아 빨간 별을 낸다. 우리 테마에도 같은 파일이 이미 들어 있는데 아무 규칙도
   참조하지 않아 표시가 없었다.

   기본 테마와 다른 점 둘. 여기 입력칸은 모서리가 둥글어 100% 0 으로 딱
   붙이면 별이 곡선에 걸치므로 살짝 띄운다. 그리고 class 뿐 아니라 required
   속성만 가진 칸(로그인 폼 등)도 함께 잡는다.

   :invalid 로 거는 이유 — required 인 칸은 비어 있으면 :invalid, 채우면
   :valid 다. 다 적은 칸에까지 별이 남아 있으면 잔소리가 된다.
   (:not(:placeholder-shown) 은 쓰면 안 된다. placeholder 가 없는 칸은 비어
   있어도 그 조건이 참이라 표시가 통째로 사라진다.)

   !important 는 폼마다 background 를 단축 속성으로 깔아 background-image 를
   함께 지우기 때문에 필요하다. 순서가 아니라 특이도 문제라 뒤에 놓아도
   이기지 못한다. 색은 각 폼이 정하고 표시만 그 위에 얹는다. */
body.solune-page :is(input, textarea, select):is(.required, [required]):invalid {
    background-image: url("../img/require.png") !important;
    background-repeat: no-repeat !important;
    background-position: right .3125rem top .3125rem !important;
    background-size: 9px 9px !important;
}

/* daisyUI 의 .input 래퍼(로그인·아웃로그인 폼) 안에서는 위 규칙이 진다.
   daisyUI 는 @layer 안에서 자식 input 의 배경을 덮는데, 레이어 안의
   !important 는 레이어 밖 !important 보다 세기 때문이다. 그 자리에서는
   입력칸 대신 래퍼에 별을 얹는다. */
body.solune-page .input:has(> :is(input, textarea, select):is(.required, [required]):invalid) { position: relative; }
body.solune-page .input:has(> :is(input, textarea, select):is(.required, [required]):invalid)::after {
    content: "";
    position: absolute;
    top: .375rem;
    right: .375rem;
    width: 9px;
    height: 9px;
    background: url("../img/require.png") no-repeat center / 9px 9px;
    pointer-events: none;
}

/* ━━━━ shop-pages.css ━━━━
   (옛 파일 · 원래 순서 321 · 원래 조건: 쇼핑몰 화면 · head.sub.php) */

/* 나머지 화면 — 후기 · 문의 · 마이페이지 · 주문완료 · 주문서 · 장바구니

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

/* --- 나머지 쇼핑몰 화면 ---------------------------------------------------
   위시리스트 · 쿠폰존 · 개인결제. 영카트 기본 색(자홍 강조어,
   남색 버튼, 파란 체크)이 그대로 남아 있던 자리를 쇼핑몰 팔레트로 돌린다. */

.solune-shop-page :is(#sod_ws, #sct, .couponzone_list) .empty_list,
.solune-shop-page :is(#sod_ws, #sct, .couponzone_list) .empty_table { border: 1px dashed var(--solune-border); padding: 3.5rem 0; color: var(--solune-muted); text-align: center; font-size: .8125rem; }
.solune-shop-page :is(#sod_ws_act, #sod_ws .btn_confirm) { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.solune-shop-page :is(#sod_ws_act, #sod_ws .btn_confirm) :is(a, button, input[type=submit]) { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--solune-border-strong); border-radius: 0; background: var(--solune-surface); color: var(--solune-text-soft); cursor: pointer; padding-inline: 1.25rem; font-size: .8125rem; font-weight: 700; }
.solune-shop-page :is(#sod_ws_act, #sod_ws .btn_confirm) .btn_submit { border-color: var(--solune-primary); background: var(--solune-primary); color: var(--color-primary-content, #fff); }

.solune-shop-page .solune-wishlist-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.solune-shop-page .solune-wishlist-kicker {
    margin: 0;
    color: var(--solune-primary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.solune-shop-page .solune-wishlist-count {
    margin: 0;
    color: var(--solune-muted);
    font-size: .78rem;
}
.solune-shop-page .solune-wishlist-count strong { color: var(--solune-text); }
.solune-shop-page #sod_ws .list_02 > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.solune-shop-page #sod_ws .list_02 > ul > li:not(.empty_table) {
    display: grid;
    min-width: 0;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 112px;
    border: 1px solid var(--solune-border);
    background: var(--solune-surface);
    padding: .9rem;
}
.solune-shop-page #sod_ws .sod_ws_img,
.solune-shop-page #sod_ws .sod_ws_img a,
.solune-shop-page #sod_ws .sod_ws_img img {
    display: block;
    width: 80px;
    height: 80px;
}
.solune-shop-page #sod_ws .sod_ws_img img { object-fit: cover; }
.solune-shop-page #sod_ws .wish_info {
    position: relative;
    min-width: 0;
    padding: 0 1.75rem;
}
.solune-shop-page #sod_ws .wish_chk { position: absolute; top: .05rem; left: 0; }
.solune-shop-page #sod_ws .info_link {
    display: block;
    overflow: hidden;
    color: var(--solune-text);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.solune-shop-page #sod_ws .info_link:hover { color: var(--solune-primary); }
.solune-shop-page #sod_ws .info_date { margin-top: .35rem; color: var(--solune-muted); font-size: .72rem; }
.solune-shop-page #sod_ws .wish_del {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    color: var(--solune-muted);
    font-size: .8rem;
}
.solune-shop-page #sod_ws .wish_del:hover { color: var(--solune-primary); }
.solune-shop-page #sod_ws .solune-wishlist-soldout { color: var(--solune-muted); font-size: .7rem; }
.solune-shop-page .solune-wishlist-pagination .solune-pg-wrap { margin-top: 1.5rem; }

/* 쿠폰존의 페이지 넘김. 한때 위로 -1rem 끌어올리고 float 를 정리했는데, 그
   시절 쿠폰은 카드 격자라 목록 아래에 빈 자리가 남았기 때문이다. 지금은 줄
   하나마다 아래 선이 있고 그 선이 목록의 끝이라, 끌어올리면 마지막 줄 위에
   페이저가 얹혔다(실측 16px 겹침).

   지금은 두 구역(다운로드·포인트) 아래에 한 벌만 둔다. 위 여백은 마지막
   구역의 아래 여백(.solune-cz-group, 2.5rem)이 이미 만들어 주므로 여기서
   더 주지 않는다. */
.solune-shop-page .solune-couponzone-pagination {
    margin: 0;
}
.solune-shop-page .solune-couponzone-pagination .solune-pg-wrap { margin-top: 0; }

@media (max-width: 720px) {
    .solune-shop-page .solune-wishlist-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }

    .solune-shop-page #sod_ws .list_02 > ul {
        grid-template-columns: 1fr;
    }

    .solune-shop-page #sod_ws .list_02 > ul > li:not(.empty_table) {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: .75rem;
        min-height: 96px;
        padding: .75rem;
    }

    .solune-shop-page #sod_ws .sod_ws_img,
    .solune-shop-page #sod_ws .sod_ws_img a,
    .solune-shop-page #sod_ws .sod_ws_img img {
        width: 72px;
        height: 72px;
    }
}

.solune-shop-page .couponzone_list { margin-bottom: 2.5rem; }
.solune-shop-page .couponzone_list h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; border-top: 1px solid var(--solune-text); margin: 0; padding: 1rem 0; font-size: 1rem; font-weight: 700; }
.solune-shop-page .couponzone_list h2 span, .solune-shop-page .couponzone_list h2 small { color: var(--solune-muted); font-size: .8125rem; font-weight: 400; }
.solune-shop-page .sct_admin { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.solune-shop-page .sct_admin a { display: inline-grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid var(--solune-border); background: var(--solune-surface); color: var(--solune-muted); }
.solune-shop-page .sct_admin a:hover { border-color: var(--solune-primary); color: var(--solune-primary); }

/* --- 상세 탭: 사용후기 · 상품문의 -----------------------------------------
   영카트 스킨 마크업(.sit_use_li / .sqa_section)을 그대로 쓰고 줄 모양만 준다.
   후기 본문은 스킨이 "내용보기" 창으로 띄우는 구조라 그 동작은 건드리지 않았다. */
.solune-shop-page #sit_use_list h3 { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; white-space: nowrap; }
.solune-shop-page .sit_use_top { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; border-bottom: 1px solid var(--solune-border); padding-bottom: 1.25rem; }
.solune-shop-page .sit_use_top h4 { color: var(--solune-text); font-size: .9375rem; font-weight: 700; }
.solune-shop-page .sit_use_top h4 strong { color: var(--solune-primary); }
.solune-shop-page .sit_use_top .sit_star { width: 6rem; }
.solune-shop-page #sit_use_wbtn { margin-left: auto; }
.solune-shop-page #sit_use_wbtn :is(a, button) { display: inline-flex; min-height: 2.5rem; align-items: center; border: 1px solid var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text-soft); cursor: pointer; padding-inline: .9rem; font-size: .8125rem; font-weight: 600; }
.solune-shop-page #sit_use_wbtn :is(a, button):hover { border-color: var(--solune-primary); color: var(--solune-primary); }

/* 사용후기 한 줄. 시안은 썸네일과 글을 좌우로 둔 단순한 flex 행이다.

   전에는 썸네일과 "내용보기" 단추를 절대배치로 좌우 끝에 박아 두고 가운데에
   제목·작성자만 남겼다. 본문이 단추 뒤에 접혀 있어서 1216px 폭의 줄에서
   실제로 쓰이는 것은 왼쪽 200px 뿐이고 가운데 900px 가 빈칸이었다. 본문을
   펴서 그 자리를 글에 준다.

   전체 후기 페이지(itemuselist.skin.php)는 마크업이 달라 아래 .sps_* 가
   따로 맡는다. .sit_thum 은 이 스킨에만 있다. */
.solune-shop-page #sit_use_ol { margin: 0; padding: 0; list-style: none; }

.solune-shop-page .sit_use_li {
    display: flex;
    gap: 22px;
    border-top: 1px solid var(--solune-border);
    padding: 26px 0;
}

/* 첫 줄의 윗선은 요약 상자 아래 여백과 겹쳐 두 줄로 보인다. */
.solune-shop-page .sit_use_li:first-child { border-top: 0; padding-top: 0; }

/* 썸네일은 후기 본문에 실제 사진이 있을 때만 스킨이 찍는다. 없으면 이 자리가
   통째로 없고 글이 줄을 다 쓴다. */
.solune-shop-page .sit_use_li .sit_thum {
    /* 스킨 style.css 가 이 자리를 position:absolute 로 잡아 둔다(접혀 있던
       시절 글 위에 얹으려던 것). flex 행에서는 글자 위로 올라타므로
       흐름 안으로 되돌린다. */
    position: static;
    width: 110px;
    height: 110px;
    flex: none;
    overflow: hidden;
    background: var(--solune-surface-soft);
}

.solune-shop-page .sit_use_li .sit_thum img { display: block; width: 100%; height: 100%; object-fit: cover; }

.solune-shop-page .sit_use_body { min-width: 0; flex: 1; }

.solune-shop-page .sit_use_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 9px;
}

/* 별은 바로 위 요약 상자·홈 후기 카드와 같은 글자 별을 쓴다. 코어의
   s_star*.png 를 그대로 쓰면 한 화면에 두 가지 별이 서게 된다. */
.solune-shop-page .sit_use_star { color: var(--ondam-star, #c9a227); font-size: 12px; letter-spacing: .06em; }
.solune-shop-page .sit_use_name { color: var(--solune-text); font-size: 13px; font-weight: 600; }
.solune-shop-page .sit_use_date { color: var(--solune-muted-soft); font-size: 11.5px; }

.solune-shop-page .sit_use_tit { margin: 0 0 4px; color: var(--solune-text); font-size: 14.5px; font-weight: 700; }
/* 썸네일은 제목 뒤에 오는 span 이라 순서대로 흘리면 글 위로 올라탄다.
   왼쪽에 자리를 비워 두고 그 자리에 얹는다. */
.solune-shop-page .sps_section { position: relative; display: block; float: none; width: auto; min-width: 0; min-height: 6.5rem; padding-left: 7.5rem; }
.solune-shop-page .sps_section > span { display: block; }
/* 줄 왼쪽의 상품 이미지는 .sps_img 가 절대배치로 이미 놓고 있다. 그 폭만큼
   본문을 밀어 주지 않으면 글자가 이미지 위로 올라탄다. */
.solune-shop-page .sps_img { width: 6rem; height: 6rem; }
.solune-shop-page :is(.sps_img_inner, .sps_img a) { display: block; width: 100%; height: 100%; }
.solune-shop-page .sps_img img { width: 100%; height: 100%; object-fit: cover; }
.solune-shop-page .prd_detail { right: 0; bottom: 0; display: inline-grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 0; background: var(--solune-primary); color: #fff; cursor: pointer; font-size: .7rem; }
/* .sps_rv_thum 은 후기에 딸린 사진이다(상품 이미지가 아니다). 대개 비어 있어
   자리를 잡아 두지 않고 흐름에 둔다. */
.solune-shop-page .sps_rv_thum:not(:empty) { display: block; margin-top: .5rem; }
.solune-shop-page .sps_rv_thum img { display: inline-block; width: 3rem; height: 3rem; object-fit: cover; }

/* 후기·문의 목록 페이지의 검색 줄 */
.solune-shop-page .sch_wr { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.solune-shop-page :is(.sch_wr select, .sch_input) { min-height: 2.75rem; border: 1px solid var(--solune-border-strong); border-radius: 0; background: var(--solune-surface); color: var(--solune-text); padding-inline: .75rem; font-size: .8125rem; }
.solune-shop-page .sch_input { min-width: 14rem; }
.solune-shop-page :is(.sch_btn, .sch_wr .btn01, .sch_wr .btn02) { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--solune-border-strong); border-radius: 0; background: var(--solune-surface); color: var(--solune-text-soft); cursor: pointer; padding-inline: .9rem; font-size: .8125rem; font-weight: 600; }
.solune-shop-page :is(.sch_btn, .sch_wr .btn01, .sch_wr .btn02):hover { border-color: var(--solune-primary); color: var(--solune-primary); }
.solune-shop-page .sps_section > span:nth-of-type(2) img { width: 5rem; }
.solune-shop-page .sps_pd_name { color: var(--solune-muted-soft); font-size: .72rem; }
.solune-shop-page .sps_rv_tit { margin-top: .15rem; color: var(--solune-text); font-size: .9375rem; font-weight: 700; }
.solune-shop-page .sps_con_btn { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .35rem; }
.solune-shop-page .sps_dl { display: flex; align-items: center; gap: .75rem; margin: 0; color: var(--solune-muted); font-size: .78rem; }
.solune-shop-page .sps_dl dd { margin: 0; }
.solune-shop-page .review_detail { margin-left: auto; }

/* --- 사용후기 탭의 포토 줄 · 정렬 · 바닥 --------------------------------
   시안 `Solune 상품 상세 탭 v2` 를 따른다. 사진은 여덟 칸 격자로 늘어놓고,
   남는 것은 마지막 칸에 개수로 접는다. */
.solune-shop-page .solune-review-photos { margin: 40px 0 0; }
.solune-shop-page .solune-review-photos-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--solune-text);
}
.solune-shop-page .solune-review-photos-head h4 { margin: 0; color: var(--solune-text); font-size: 15px; font-weight: 700; }
.solune-shop-page .solune-review-photos-head span { color: var(--solune-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.solune-shop-page .solune-review-photo-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.solune-shop-page .solune-review-photo {
    display: grid;
    width: 100%;
    aspect-ratio: 1 / 1;
    place-items: center;
    overflow: hidden;
    border: 0;
    background: var(--solune-surface-soft);
    color: var(--solune-text);
    cursor: zoom-in;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}
.solune-shop-page .solune-review-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.solune-shop-page .solune-review-photo:hover img { opacity: .85; }

/* 무엇을 어떤 차례로 보고 있는지. 코어는 최신순 고정이라 고를 것이 없어
   컨트롤이 아니라 한 줄 설명으로 둔다. */
.solune-shop-page .solune-review-sort { margin: 32px 0 0; padding: 0 0 14px; border-bottom: 1px solid var(--solune-text); color: var(--solune-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* 페이지 번호는 가운데, 전체 보기는 오른쪽 끝. 가운데를 진짜 가운데에 두려고
   양쪽에 같은 폭을 준다. */
/* 격자가 아니라 flex 다. 한때 1fr auto 1fr 로 두고 페이저를 가운데 칸에
   앉혔는데, 그 칸이 내용만큼(auto) 넓어지는 칸이라 페이저의 width:100% 와
   서로를 기다리다 폭이 0 이 됐다. 페이저는 제 폭을 재서 접을지 정하므로
   (default.css 의 페이지 넘김 절) 0 이 되면 다 접혀 "다음" 하나만 남는다.
   flex:1 로 두면 남는 폭이 먼저 정해져 그런 일이 없다. */
.solune-shop-page .solune-review-foot { display: flex; align-items: center; gap: 16px; margin: 40px 0 0; }
.solune-shop-page .solune-review-foot .solune-pg-wrap { flex: 1; min-width: 0; margin: 0; }
.solune-shop-page .solune-review-all { flex: none; color: var(--solune-text-soft); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.solune-shop-page .solune-review-all:hover { color: var(--solune-primary); }

/* 사진 크게 보기. 장바구니의 선택사항수정 창과 같은 뼈대다 — 뒷막 · 패널 ·
   머리 · 본문. 사진이 주인공이라 패널을 화면에 맞춰 크게 잡는다. */
.solune-shop-page .solune-review-lightbox { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2rem); }
.solune-shop-page .solune-review-lightbox[hidden] { display: none; }
.solune-shop-page .solune-review-lightbox-backdrop { position: absolute; inset: 0; border: 0; background: color-mix(in srgb, var(--solune-text) 72%, transparent); }
html.solune-review-lightbox-open { overflow: hidden; scrollbar-gutter: stable; }
.solune-shop-page .solune-review-lightbox-panel {
    display: flex;
    position: relative;
    width: min(880px, 100%);
    max-height: calc(100vh - 4rem);
    flex-direction: column;
    border: 1px solid var(--solune-text);
    background: var(--solune-surface);
}
.solune-shop-page .solune-review-lightbox-panel:focus { outline: 0; }
.solune-shop-page .solune-review-lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--solune-border); }
.solune-shop-page .solune-review-lightbox-pos { margin: 0; color: var(--solune-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.solune-shop-page .solune-review-lightbox-close { display: grid; width: 36px; height: 36px; place-items: center; border: 0; background: none; color: var(--solune-text-soft); cursor: pointer; font-size: 18px; }
.solune-shop-page .solune-review-lightbox-close:hover { color: var(--solune-primary); }
.solune-shop-page .solune-review-lightbox-stage { display: grid; position: relative; min-height: 0; flex: 1; place-items: center; overflow: hidden; background: var(--solune-surface-soft); }
.solune-shop-page .solune-review-lightbox-stage img { display: block; max-width: 100%; max-height: calc(100vh - 16rem); object-fit: contain; }
.solune-shop-page :is(.solune-review-lightbox-prev, .solune-review-lightbox-next) {
    display: grid;
    position: absolute;
    z-index: 1;
    top: 50%;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--solune-border);
    background: var(--solune-surface);
    color: var(--solune-text);
    cursor: pointer;
    transform: translateY(-50%);
}
.solune-shop-page .solune-review-lightbox-prev { left: 12px; }
.solune-shop-page .solune-review-lightbox-next { right: 12px; }
.solune-shop-page :is(.solune-review-lightbox-prev, .solune-review-lightbox-next):hover { border-color: var(--solune-primary); color: var(--solune-primary); }

@media (max-width: 780px) {
    .solune-shop-page .solune-review-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .solune-shop-page .solune-review-foot { flex-direction: column; align-items: center; gap: 16px; }
    .solune-shop-page .solune-review-foot .solune-pg-wrap { flex: none; width: 100%; }
}

/* 탭 안의 문의 목록(itemqa.skin.php). 시안 `Solune 상품 상세 탭 v2` 를 따른다 —
   머리에 건수와 답변 현황, 그 아래 안내 한 줄, 목록은 한 줄에 상태·제목·작성자·
   날짜가 들어가고 누르면 아래로 답이 열린다. 여는 동작은 스킨 JS 가 한다. */
.solune-shop-page .solune-qa-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1rem;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--solune-text);
}
/* 코어 스킨이 이 자리의 h3 를 화면 밖으로 밀어 둔다 —
   skin/shop/basic/style.css:737 의 `#sit_qa h3 { position:absolute; font-size:0;
   line-height:0 }` 다(원래 글은 '등록된 상품문의'). 시안은 건수를 붙여 보이게
   두므로 되돌린다. 그 규칙이 id 를 물어 (1,0,1) 이라 클래스 둘로는 못 이긴다 —
   탭 상자의 id 를 함께 적어 (1,2,0) 으로 올린다. */
.solune-shop-page #sit_qa .solune-qa-title {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    color: var(--solune-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
}
.solune-shop-page .solune-qa-title span { color: var(--solune-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.solune-shop-page .solune-qa-stat { margin: 0; color: var(--solune-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.solune-shop-page .solune-qa-acts { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.solune-shop-page .solune-qa-write {
    display: inline-flex;
    height: 36px;
    align-items: center;
    border: 1px solid var(--solune-text);
    background: var(--solune-text);
    color: var(--solune-surface);
    padding-inline: 16px;
    font-size: 13px;
    font-weight: 700;
}
.solune-shop-page .solune-qa-write:hover { border-color: var(--solune-primary); background: var(--solune-primary); color: var(--color-primary-content, #fff); }
.solune-shop-page .solune-qa-more { color: var(--solune-text-soft); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.solune-shop-page .solune-qa-more:hover { color: var(--solune-primary); }
.solune-shop-page .solune-qa-notice { margin: 14px 0 0; color: var(--solune-muted); font-size: 12.5px; line-height: 1.6; }
.solune-shop-page .solune-qa-notice a { color: var(--solune-text); text-decoration: underline; text-underline-offset: 3px; }

.solune-shop-page #sit_qa_ol { margin: 12px 0 0; padding: 0; list-style: none; }
.solune-shop-page .sit_qa_li { border-bottom: 1px solid var(--solune-border); }
/* 한 줄 = [상태 76px | 제목 | 작성자 | 날짜 | 펼침]. 제목만 남는 자리를 먹고
   나머지는 내용 폭이라, 제목이 길면 제목에서 줄임표가 난다. */
.solune-shop-page .sit_qa_li_title {
    display: grid;
    width: 100%;
    grid-template-columns: 76px minmax(0, 1fr) auto auto 20px;
    align-items: center;
    gap: 20px;
    border: 0;
    background: transparent;
    color: var(--solune-text);
    cursor: pointer;
    padding: 20px 0;
    text-align: left;
    font: inherit;
}
.solune-shop-page .sit_qa_li_title:hover .solune-qa-subject { color: var(--solune-primary); }
.solune-shop-page .solune-qa-subject {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: var(--solune-text);
    font-size: 14.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.solune-shop-page .solune-qa-lock { flex: none; color: var(--solune-muted); font-size: 12px; }
.solune-shop-page .solune-qa-name { color: var(--solune-muted); font-size: 12.5px; }
.solune-shop-page .solune-qa-date { color: var(--solune-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.solune-shop-page .solune-qa-caret { color: var(--solune-muted); text-align: right; transition: transform .18s ease; }
.solune-shop-page .sit_qa_li_title[aria-expanded="true"] .solune-qa-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .solune-shop-page .solune-qa-caret { transition: none; }
}

/* 펼친 내용. 시안은 상태 칸만큼 들여 Q 와 A 를 세운다.

   Q/A 표식은 코어 스킨이 이미 절대배치로 띄운다(.sit_qa_p .qa_alp). 그 구조를
   그대로 쓴다 — 격자로 바꾸면 본문이 <p> 와 맨 텍스트로 섞여 나오는 탓에
   조각마다 칸이 하나씩 배정되어 28px 폭에 한 글자씩 세로로 쌓인다.

   회색 바탕도 코어는 Q 와 A 를 함께 감싼 .sit_qa_p 에 준다. 시안은 답변에만
   깔려 물음과 답이 갈리므로 옮긴다. */
.solune-shop-page .sit_qa_con { border-top: 0; padding: 0 0 28px 96px; color: var(--solune-text-soft); font-size: 14px; line-height: 1.85; }
.solune-shop-page .sit_qa_p { margin: 0; background: none; line-height: inherit; }
.solune-shop-page .sit_qa_qaq {
    position: relative;
    min-height: 0;
    padding: 0 0 0 44px;
    background: none;
}
.solune-shop-page .sit_qa_qaa {
    position: relative;
    min-height: 0;
    margin: 20px 0 0;
    padding: 20px 22px 20px 64px;
    border-top: 0;
    background: var(--solune-surface-soft);
}
.solune-shop-page .sit_qa_qaq p, .solune-shop-page .sit_qa_qaa p { margin: 0; }

/* 상품문의 탭의 상태 칩(.sit_qaa_*)과 Q/A 표식(.qa_alp).
   전체 상품문의 목록(itemqalist.skin.php)은 2026-09-08 부터 제 마크업
   (.solune-iq-*, skin/shop/basic/style.css)을 쓰므로 여기 규칙은 상세 탭
   (itemqa.skin.php)만 본다. 코어 스킨은 이 칩을 오른쪽 끝에 절대배치로 띄웠다.
   흐름으로 되돌려 제목 옆에 세운다. */
.solune-shop-page :is(.sit_qaa_done, .sit_qaa_ing, .sit_qaa_yet) { position: static !important; display: inline-flex; min-height: 1.6rem; align-items: center; border: 1px solid var(--solune-border-strong); border-radius: 0; background: var(--solune-surface-soft); color: var(--solune-text-soft); padding-inline: .5rem; font-size: .7rem; font-weight: 700; }
.solune-shop-page .sit_qaa_done { border-color: var(--solune-primary); background: var(--solune-primary-soft); color: var(--solune-primary); }
/* Q/A 표식의 기본은 칩이고, 탭 본문(.sit_qa_p) 안에서는 시안대로 테두리
   없는 큰 글자다 — 격자의 첫 칸을 채운다. */
.solune-shop-page .qa_alp { display: inline-flex; min-height: 1.5rem; align-items: center; border: 1px solid var(--solune-border-strong); border-radius: 0; background: var(--solune-surface-soft); color: var(--solune-text-soft); padding-inline: .5rem; font-size: .7rem; font-weight: 700; }
.solune-shop-page .sit_qa_p .qa_alp { display: block; top: 0; left: 0; min-height: 0; border: 0; background: none; color: var(--solune-text); padding: 0; font-size: 18px; font-weight: 800; line-height: 1.85; }
.solune-shop-page .sit_qa_p .sit_qa_qaa .qa_alp { top: 20px; left: 22px; }
.solune-shop-page .sit_qa_con .sit_qa_qaq { color: var(--solune-text); font-size: 14px; font-weight: 400; }
.solune-shop-page .sit_qa_con .sit_qa_qaa { color: var(--solune-text-soft); font-size: 14px; line-height: 1.85; }

.solune-shop-page .solune-pg-wrap { margin-top: 40px; }
.solune-shop-page .pg { display: flex; gap: .25rem; }
/* 페이지 번호의 모양은 default.css 의 페이지 넘김 절 가 맡는다. 한때 코어가 상품문의
   페이저만 다른 클래스(.qa_page)로 내보내 이 파일에서 그 이름을 따로
   챙겨야 했는데, 이제 테마 함수 하나가 내므로 그럴 일이 없다.
   맨 글자로 나왔다. */

/* --- 마이페이지 -----------------------------------------------------------
   시안은 어두운 프로필 띠(이름 + 적립금·쿠폰 같은 숫자) 아래로 주문 내역이
   이어진다. 영카트 마크업(#smb_my_ov · #smb_private · #smb_my_od)을 그대로
   두고 모양만 준다. */
.solune-shop-page #smb_my { display: grid; gap: 2.5rem; }
/* 주문 내역 표는 좁은 폭에서 .tbl_wrap 안에서 가로로 굴러야 한다(표에 최소
   폭이 있다). 그런데 #smb_my 와 #smb_my_list 가 격자라 그 항목의 기본
   min-width:auto 가 표의 최소 폭을 위로 끌어올려, 390px 에서 프로필 띠까지
   674px 로 늘어나고 화면이 206px 넘쳤다(2026-09-09 스모크로 잡음). 격자
   항목이 줄어들 수 있게 풀어 준다. */
.solune-shop-page :is(#smb_my, #smb_my_list) > * { min-width: 0; }
.solune-shop-page #smb_my_ov > h2 { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; white-space: nowrap; }
.solune-my-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--ondam-ink, var(--solune-text)); padding: 1.75rem 2rem; }
.solune-shop-page .smb_me { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; color: #fff; }
.solune-shop-page .my_ov_name { display: flex; align-items: center; gap: 1rem; color: #fff; font-size: 1.25rem; font-weight: 700; }
.solune-shop-page .my_ov_name img { width: 3.5rem; height: 3.5rem; border-radius: 999px; object-fit: cover; }
.solune-shop-page .my_ov_name br { display: none; }
.solune-shop-page .smb_me a { color: rgba(255, 255, 255, .72); font-size: .8125rem; }
.solune-shop-page .smb_me a:hover { color: #fff; }
.solune-shop-page #smb_private { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.solune-shop-page #smb_private a { display: grid; gap: .35rem; color: rgba(255, 255, 255, .72); font-size: .75rem; text-align: center; }
.solune-shop-page #smb_private a:hover { color: #fff; }
.solune-shop-page #smb_private i { display: none; }
.solune-shop-page #smb_private strong { color: #fff; font-size: 1.375rem; font-weight: 800; letter-spacing: -.025em; }

.solune-shop-page #smb_my_ov h3, .solune-shop-page #smb_my_list h2 { margin-bottom: 1rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.solune-shop-page #smb_my_ov h3 { margin-top: 2.5rem; }
.solune-shop-page .op_area { display: grid; grid-template-columns: 8rem minmax(0, 1fr); margin: 0; border-top: 1px solid var(--solune-border); }
.solune-shop-page .op_area dt { border-bottom: 1px solid var(--solune-border); background: var(--solune-surface-soft); padding: .8rem 1rem; color: var(--solune-text-soft); font-size: .8125rem; font-weight: 600; }
.solune-shop-page .op_area dd { border-bottom: 1px solid var(--solune-border); margin: 0; padding: .8rem 1rem; color: var(--solune-text-soft); font-size: .8125rem; }
.solune-shop-page .withdrawal { display: inline-flex; min-height: 2.5rem; align-items: center; margin-top: 1rem; color: var(--solune-muted); font-size: .78rem; text-decoration: underline; }

.solune-shop-page #smb_my_list { display: grid; gap: 2.5rem; }
.solune-shop-page #smb_my_od .tbl_head01, .solune-shop-page #smb_my_wish .tbl_head01 { border: 0; border-top: 1px solid var(--solune-text); border-radius: 0; background: none; }
.solune-shop-page #smb_my_od th { background: none; color: var(--solune-muted); font-size: .78rem; font-weight: 600; }
.solune-shop-page #smb_my_od :is(th, td) { padding: .9rem .5rem; }
.solune-shop-page .smb_my_more { margin-top: 1rem; text-align: right; }
.solune-shop-page .smb_my_more a { color: var(--solune-muted); font-size: .8125rem; }
.solune-shop-page .smb_my_more a:hover { color: var(--solune-primary); }
.solune-shop-page #smb_my_wish ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.solune-shop-page #smb_my_wish li { position: relative; min-width: 0; }
.solune-shop-page #smb_my_wish .empty_li { grid-column: 1 / -1; border: 1px dashed var(--solune-border); padding: 3rem 0; color: var(--solune-muted); text-align: center; font-size: .8125rem; }
.solune-shop-page .smb_my_img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.solune-shop-page .smb_my_tit { margin-top: .65rem; font-size: .8125rem; }
.solune-shop-page .smb_my_price { margin-top: .25rem; color: var(--solune-text); font-size: .875rem; font-weight: 700; }
.solune-shop-page .smb_my_date { margin-top: .2rem; color: var(--solune-muted-soft); font-size: .72rem; }
.solune-shop-page #smb_ws_act { display: flex; gap: .5rem; margin-top: 1.25rem; }
.solune-shop-page #smb_ws_act button { min-height: 2.75rem; border: 1px solid var(--solune-border-strong); border-radius: 0; background: var(--solune-surface); color: var(--solune-text-soft); cursor: pointer; padding-inline: 1.25rem; font-size: .8125rem; font-weight: 700; }
.solune-shop-page #smb_ws_act .btn02 { border-color: var(--solune-primary); background: var(--solune-primary); color: var(--color-primary-content, #fff); }

@media (max-width: 1023px) {
    .solune-shop-page #smb_my_wish ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solune-my-banner { padding: 1.25rem; }
}

/* --- 주문완료 안내 ---------------------------------------------------------
   그누보드는 주문완료 페이지가 따로 없고 주문상세로 바로 보낸다. 시안의 완료
   화면은 그 위에 얹는 카드 하나로 옮겼다(방금 주문한 경우에만 나온다). */
.solune-order-done { border: 1px solid var(--solune-border); background: var(--solune-surface); margin-bottom: 2.5rem; padding: 3rem 1.5rem; text-align: center; }
.solune-order-done-mark { display: inline-grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 999px; background: var(--solune-surface-soft); color: var(--solune-primary); font-size: 1.25rem; }
.solune-order-done h2 { margin-top: 1.25rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; }
.solune-order-done-lead { margin-top: .65rem; color: var(--solune-muted); font-size: .875rem; }
.solune-order-done-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; border-block: 1px solid var(--solune-border); margin: 2rem auto 0; max-width: 46rem; padding: 1.5rem 0; }
.solune-order-done-facts dt { color: var(--solune-muted); font-size: .75rem; }
.solune-order-done-facts dd { margin: .35rem 0 0; color: var(--solune-text); font-size: .9375rem; font-weight: 700; }
.solune-order-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2rem; }
.solune-shop-page .solune-order-done-actions a { display: inline-flex; min-width: 10rem; min-height: 3rem; align-items: center; justify-content: center; border: 1px solid var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text-soft); font-size: .875rem; font-weight: 700; }
.solune-shop-page .solune-order-done-actions a:hover { border-color: var(--solune-primary); color: var(--solune-primary); }
.solune-shop-page .solune-order-done-primary { border-color: var(--solune-primary) !important; background: var(--solune-primary) !important; color: var(--color-primary-content, #fff) !important; }

/* --- 주문상세 시안 (주문상세내역.html) -------------------------------------
   왼쪽에 주문 상품 · 결제/배송 정보 · 결제정보 · 주문취소를 쌓고, 오른쪽에
   결제 요약 카드를 붙여 둔다. 마크업은 테마 shop/orderinquiryview.php 가 낸다
   (폰도 mobile/shop/orderinquiryview.php 가 같은 파일을 부른다).

   색은 사이트 팔레트를 쓴다 — 시안의 --accent #2f5b4b 는 --solune-primary,
   --line 은 --solune-border, --panel · --soft 는 --solune-surface-soft,
   --warn 은 --solune-danger 로 옮긴다.

   전부 body.solune-shop-page #sod_fin.solune-oiv 로 묶는다. skins.css 의 코어
   글자색 다리가 #sod_fin 안의 h2 · a · p · span · li 를 (1,2,2) 무게로 흐린
   글씨로 덮는데, 이 묶음에 클래스 하나만 더하면 (1,3,x) 로 이긴다. 다리의
   :not() 목록에 컴포넌트를 하나씩 보태는 것보다 이 화면 안에서 끝내는 편이
   덜 번진다. */
body.solune-shop-page #sod_fin.solune-oiv {
    /* 쇼핑몰 팔레트의 --solune-muted 는 흰 바탕에서 3.47:1, 옅은 띠 위에서 3.09:1 로
       작은 글자의 4.5:1 에 못 미친다. 머리줄 안내 링크(shop-ondam.css)와 같은 비율로
       본문 보조색 쪽으로 당긴 값을 이 화면의 흐린 글자에 쓴다. */
    --oiv-muted: color-mix(in oklab, var(--solune-muted) 55%, var(--solune-text-soft));
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--solune-text);
}

/* 주문번호 한 줄. 완료 안내가 없을 때(주문조회로 다시 열 때)만 나온다. */
.solune-shop-page #sod_fin_no { border-bottom: 1px solid var(--solune-border); margin-bottom: 2rem; padding-bottom: 1rem; color: var(--oiv-muted); font-size: .8125rem; }
.solune-shop-page #sod_fin_no strong { color: var(--solune-text); font-weight: 700; }
body.solune-shop-page #sod_fin.solune-oiv .solune-order-done { margin-bottom: 3rem; border-radius: 4px; }

/* 1) 뼈대: 본문 · 요약 카드 340. 좁아지면 한 줄로 내리고 요약은 맨 아래로 간다. */
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 3rem;
    align-items: start;
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-main { display: flex; min-width: 0; flex-direction: column; gap: 3.5rem; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-sec { display: flex; flex-direction: column; gap: 1rem; margin: 0; }

/* 절 머리: 제목 아래에 진한 줄 하나. */
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .625rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--solune-text);
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-head-title { display: flex; align-items: baseline; gap: .625rem; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-head h2 { margin: 0; padding: 0; border: 0; color: var(--solune-text); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-head-title span { color: var(--oiv-muted); font-size: .8125rem; }

/* 밑줄 글자 단추(상태 설명). 누를 자리는 28px 로 24 를 넘긴다. */
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-textbtn {
    min-height: 28px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--solune-border);
    border-radius: 0;
    background: none;
    color: var(--oiv-muted);
    cursor: pointer;
    font-size: .8125rem;
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-textbtn:hover { border-color: var(--solune-primary); color: var(--solune-primary); }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-textbtn:focus-visible { outline: 2px solid var(--solune-primary); outline-offset: 2px; }

/* 상태 설명과 주문취소는 버튼으로 여는 것이다. 스킨 CSS 없이 오니 처음부터
   펼쳐져 있었다. jQuery 가 slideDown/show 로 여니 기본값만 접어 둔다. */
.solune-shop-page #sod_sts_explan, .solune-shop-page #sod_cancel_pop { display: none; }
/* 감싸개는 flex 항목에서 뺀다. 설명이 접혀 있을 때도 빈 상자로 남아 머리와 목록
   사이에 틈(gap)을 한 번 더 넣었다. */
body.solune-shop-page #sod_fin.solune-oiv #sod_sts_wrap { display: contents; }
body.solune-shop-page #sod_fin.solune-oiv #sod_sts_explan { margin: 0; padding: 1rem 1.25rem; border: 0; border-radius: .625rem; background: var(--solune-surface-soft); }
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_legend { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); row-gap: .4rem; margin: 0 0 .75rem; }
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_legend dt { color: var(--solune-text); font-size: .8125rem; font-weight: 700; }
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_legend dd { margin: 0; color: var(--oiv-muted); font-size: .8125rem; }

/* 2) 주문 상품: 사진 88 · 내용 · 수량/소계. */
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-items { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1.375rem 0;
    border-bottom: 1px solid var(--solune-border);
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: .625rem;
    background: var(--solune-surface-soft);
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-item-body { display: flex; min-width: 0; flex-direction: column; gap: .625rem; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-item-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-item-title a { color: var(--solune-text); font-size: .9375rem; font-weight: 600; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-item-title a:hover { color: var(--solune-primary); }

/* 배송비(선불 · 착불 · 무료)는 옅은 바탕, 상태는 테두리만. 무료만 강조색. */
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--solune-surface-soft);
    color: var(--oiv-muted);
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-chip.is-free { background: var(--solune-primary-soft); color: var(--solune-primary); }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-chip.is-line { border: 1px solid var(--solune-border); background: none; }

body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-opts { display: flex; flex-direction: column; gap: .375rem; margin: 0; padding: 0; list-style: none; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-opts li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--solune-text-soft);
    font-size: .8125rem;
    line-height: 1.5;
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-opt-name { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; color: var(--solune-text-soft); text-wrap: pretty; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-opt-name > span:first-child { color: var(--solune-text-soft); }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-opt-qty { color: var(--oiv-muted); white-space: nowrap; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-opt-price { color: var(--solune-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-point { color: var(--oiv-muted); font-size: .75rem; }

body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-item-sum { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; text-align: right; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-item-qty { color: var(--oiv-muted); font-size: .75rem; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-item-sum strong { color: var(--solune-text); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-item-sum small { margin-left: 1px; font-size: .75rem; font-weight: 400; }

/* 3) 결제/배송 정보: 주문하신 분 · 받으시는 분 카드 둘, 아래 배송 띠. */
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: .25rem; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .875rem;
    padding: 1.375rem;
    border: 1px solid var(--solune-border);
    border-radius: .875rem;
    background: var(--solune-surface);
}
body.solune-shop-page #sod_fin.solune-oiv :is(.solune-oiv-card, .solune-oiv-dvr) h3 { margin: 0; padding: 0; border: 0; color: var(--solune-text); font-size: .875rem; font-weight: 700; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-kv {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: .625rem .75rem;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-kv dt { color: var(--oiv-muted); font-weight: 400; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-kv dd { min-width: 0; margin: 0; color: var(--solune-text); overflow-wrap: anywhere; text-wrap: pretty; }
/* conv_content() 가 전하실 말씀을 문단으로 감싸 돌려줄 때를 대비해 문단 여백만 걷는다. */
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-kv dd p { margin: 0; color: inherit; }

body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-dvr {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin: 0;
    padding: 1.125rem 1.375rem;
    border-radius: .875rem;
    background: var(--solune-surface-soft);
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-dvr-mark {
    display: flex;
    width: 36px;
    height: 36px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--solune-surface);
    color: var(--oiv-muted);
    font-size: .875rem;
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-dvr-body { display: flex; min-width: 0; flex-direction: column; gap: .25rem; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-dvr-body h3 { font-weight: 600; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-dvr-body p { margin: 0; color: var(--oiv-muted); font-size: .8125rem; text-wrap: pretty; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-dvr-body .solune-oiv-kv { margin-top: .375rem; }

/* 4) 결제정보: 코어가 li 안에 strong(이름) · span(값) 으로 흘려보내는 목록을
   이름 110 · 값 두 칸 줄로 세운다. 영수증 · 현금영수증 링크와 계좌 복사는
   작은 테두리 단추로 맞춘다. */
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_pay ul { margin: 0; padding: 0; list-style: none; }
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_pay li {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    margin: 0;
    padding: .75rem 0;
    border-bottom: 1px solid var(--solune-border);
    color: var(--solune-text);
    font-size: .8125rem;
}
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_pay li > strong { color: var(--oiv-muted); font-weight: 400; letter-spacing: 0; }
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_pay li > span { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; color: var(--solune-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_pay li > span :is(a, .solune-oiv-copy) {
    display: inline-flex;
    height: 28px;
    align-items: center;
    padding: 0 .625rem;
    border: 1px solid var(--solune-border);
    border-radius: 6px;
    background: none;
    color: var(--solune-text-soft);
    cursor: pointer;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
}
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_pay li > span :is(a, .solune-oiv-copy):hover { border-color: var(--solune-primary); color: var(--solune-primary); }
/* "현금영수증을 발급하시려면 클릭하십시오." 는 길어 한 줄에 안 들 수 있다. */
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_pay li > span a.is-long-text { height: auto; min-height: 28px; padding-block: .3rem; line-height: 1.4; }

/* 5) 주문취소: 안내 글 한 줄과 오른쪽 단추. 누르면 가운데 창이 뜬다. */
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_cancel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -1.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--solune-border);
}
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_cancel > p { margin: 0; color: var(--oiv-muted); font-size: .8125rem; text-wrap: pretty; }
body.solune-shop-page #sod_fin.solune-oiv .sod_fin_c_btn {
    height: 40px;
    padding: 0 1rem;
    border: 1px solid var(--solune-border);
    border-radius: .625rem;
    background: var(--solune-surface);
    color: var(--solune-danger);
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 600;
}
body.solune-shop-page #sod_fin.solune-oiv .sod_fin_c_btn:hover { border-color: var(--solune-danger); }

body.solune-shop-page #sod_fin.solune-oiv #sod_cancel_pop { position: fixed; inset: 0; z-index: 1000; }
body.solune-shop-page #sod_fin.solune-oiv .sod_fin_bg { position: absolute; inset: 0; background: rgb(15 23 42 / .5); }
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_cancelfrm {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: min(420px, calc(100% - 2rem));
    box-sizing: border-box;
    padding: 1.5rem;
    border: 1px solid var(--solune-border);
    border-radius: .875rem;
    background: var(--solune-surface);
    box-shadow: 0 20px 48px rgb(15 23 42 / .22);
    transform: translate(-50%, -50%);
}
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_cancelfrm h2 { margin: 0 0 .375rem; padding: 0; border: 0; color: var(--solune-text); font-size: 1.0625rem; font-weight: 700; }
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_cancelfrm .solune-oiv-cancel-lead { margin: 0 0 1rem; color: var(--oiv-muted); font-size: .8125rem; }
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_cancelfrm form { display: flex; gap: .5rem; }
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_cancelfrm .frm_input { min-width: 0; height: 44px; flex: 1; box-sizing: border-box; padding: 0 .875rem; border-radius: .5rem; font-size: .875rem; }
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_cancelfrm .btn_frmline {
    height: 44px;
    padding: 0 1.125rem;
    border: 0;
    border-radius: .5rem;
    background: var(--solune-danger);
    color: #fff;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 700;
}
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_cancelfrm .sod_cls_btn {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--oiv-muted);
    cursor: pointer;
}
body.solune-shop-page #sod_fin.solune-oiv #sod_fin_cancelfrm .sod_cls_btn:hover { background: var(--solune-surface-soft); color: var(--solune-text); }

/* 6) 결제 요약 카드. 머리줄이 붙어 다니므로 그 아래(5rem)에 멈춘다 — 장바구니 ·
   주문서의 요약 카드와 같은 값이다. */
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-summary {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--solune-border);
    border-radius: 1.125rem;
    background: var(--solune-surface);
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-summary-head { display: flex; align-items: center; justify-content: space-between; gap: .625rem; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-summary-head h2 { margin: 0; padding: 0; border: 0; color: var(--solune-text); font-size: .9375rem; font-weight: 700; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-state {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--solune-primary-soft);
    color: var(--solune-primary);
    font-size: .6875rem;
    font-weight: 700;
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-state.is-wait { background: color-mix(in oklab, var(--solune-danger) 12%, var(--solune-surface)); color: color-mix(in oklab, var(--solune-danger) 80%, var(--solune-text)); }

body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-rows { display: flex; flex-direction: column; gap: .625rem; margin: 0; font-size: .8125rem; font-variant-numeric: tabular-nums; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-rows dt { color: var(--oiv-muted); font-weight: 400; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-rows dd { margin: 0; color: var(--solune-text); text-align: right; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-rows--paid { padding-top: 1rem; border-top: 1px solid var(--solune-border); }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-rows .is-sub { padding-left: .625rem; font-size: .75rem; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-rows .is-due dd { color: var(--solune-danger); font-weight: 700; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-paid { margin-left: .25rem; color: var(--solune-primary); font-size: .6875rem; font-weight: 700; }

body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--solune-text);
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-total > span { color: var(--solune-text); font-size: .8125rem; font-weight: 600; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-total strong { color: var(--solune-text); font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-total small { margin-left: 2px; font-size: .8125rem; font-weight: 500; }

body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-earn {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: .625rem .75rem;
    border-radius: .5rem;
    background: var(--solune-primary-soft);
    color: var(--solune-primary);
    font-size: .75rem;
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-earn span { color: var(--solune-primary); }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-earn strong { font-weight: 700; }

body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-bank {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .875rem;
    border-radius: .625rem;
    background: var(--solune-surface-soft);
    font-size: .75rem;
    line-height: 1.6;
}
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-bank span { color: var(--solune-text-soft); }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-bank .solune-oiv-bank-label { color: var(--oiv-muted); font-size: .6875rem; }
body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-bank strong { color: var(--solune-text); font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 1023px) {
    body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-summary { position: static; }
}
@media (max-width: 639px) {
    body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-main { gap: 2.75rem; }
    /* 사진을 64 로 줄이고, 수량 · 소계는 내용 아래 한 줄(왼쪽 수량 · 오른쪽 소계)로 내린다. */
    body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-item { grid-template-columns: 64px minmax(0, 1fr); gap: .875rem; }
    body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-item-sum { grid-column: 2; flex-direction: row; align-items: baseline; justify-content: space-between; }
    body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-info { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-card { padding: 1.125rem; }
    body.solune-shop-page #sod_fin.solune-oiv #sod_fin_pay li { grid-template-columns: 5.5rem minmax(0, 1fr); }
    body.solune-shop-page #sod_fin.solune-oiv .solune-oiv-summary { padding: 1.25rem; }
}

/* --- 주문내역조회 시안 (주문내역조회.html) ---------------------------------
   주문 하나를 테두리 카드 하나로 세운다 — 왼쪽에 상태 · 주문일시 · 주문서번호와
   대표 상품 사진, 오른쪽에 주문금액 · 입금액 · 미입금액과 "주문 상세" 단추.
   마크업은 테마 shop/orderinquiry.sub.php 가 낸다(폰도 mobile 위임을 거쳐 같은
   파일). 같은 파일을 부르는 마이페이지 최근 주문내역은 코어 표 그대로라 이 절이
   걸리지 않는다.

   색은 사이트 팔레트를 쓴다 — 시안 --warn 은 --solune-danger, --accent 는
   --solune-primary, --line 은 --solune-border, --soft 는 --solune-surface-soft. */
.solune-shop-page .solune-oi {
    /* 쇼핑몰 팔레트의 --solune-muted 는 흰 바탕에서 3.47:1 이라 작은 글자에 모자란다.
       주문상세와 같은 비율로 본문 보조색 쪽으로 당긴 값을 쓴다. */
    --oi-muted: color-mix(in oklab, var(--solune-muted) 55%, var(--solune-text-soft));
}

/* "총 N건". 글자는 <span> 으로 한 번 감싼다 — 넓은 화면에서 이 상자가 flex 가 되면
   "총 " 뒤 공백이 접혀 "총4건" 이 된다. 시안은 제목 줄 오른쪽 끝에 둔다. 제목(.solune-shop-page-title)은 이
   목록 밖의 형제라 한 줄로 묶을 부모가 없어, 주문서의 단계 표시처럼 넓은 화면에서는
   .shop-content 를 기준으로 제목 줄에 띄운다. 좁은 화면은 시안처럼 제목 아래
   왼쪽에 한 줄로 둔다. */
.solune-shop-page .solune-oi-count { margin: 0 0 .75rem; color: var(--oi-muted); font-size: .8125rem; }
.solune-shop-page .solune-oi-count strong { color: var(--solune-text-soft); font-weight: 600; }
@media (min-width: 640px) {
    body.solune-shop-page:has(.solune-oi) .shop-content { position: relative; }
    .solune-shop-page .solune-oi-count {
        position: absolute;
        /* 제목 상자의 위 여백 32 와 제목 줄 높이에 맞춘다(shop-ondam.css 의 제목 값). */
        top: 32px;
        right: 0;
        display: flex;
        height: var(--oi-title-h, 36px);
        align-items: flex-end;
        margin: 0;
    }
}

/* 목록: 위에 진한 줄 하나, 카드 사이 14. */
.solune-shop-page .solune-oi-list {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    margin: 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--solune-text);
    list-style: none;
}
.solune-shop-page .solune-oi-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem 2rem;
    margin: 0;
    padding: 1.375rem 1.5rem;
    border: 1px solid var(--solune-border);
    border-radius: .875rem;
    background: var(--solune-surface);
    transition: border-color .15s ease;
}
.solune-shop-page .solune-oi-card:hover { border-color: var(--solune-border-strong); }
.solune-shop-page .solune-oi-main { display: flex; min-width: 0; flex-direction: column; gap: 1rem; }

/* 머리줄: 상태 배지 · 주문일시 | 주문서번호 */
.solune-shop-page .solune-oi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; margin: 0; font-size: .8125rem; }
.solune-shop-page .solune-oi-state {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--solune-primary-soft);
    color: var(--solune-primary);
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
}
.solune-shop-page .solune-oi-state.is-wait { background: color-mix(in oklab, var(--solune-danger) 12%, var(--solune-surface)); color: color-mix(in oklab, var(--solune-danger) 80%, var(--solune-text)); }
.solune-shop-page .solune-oi-state.is-done { background: var(--solune-surface-soft); color: var(--solune-text-soft); }
.solune-shop-page .solune-oi-state.is-cancel { border: 1px solid var(--solune-border); background: none; color: var(--oi-muted); }
.solune-shop-page .solune-oi-date { color: var(--oi-muted); font-variant-numeric: tabular-nums; }
.solune-shop-page .solune-oi-sep { width: 1px; height: 12px; background: var(--solune-border); }
.solune-shop-page .solune-oi-no { border-bottom: 1px solid var(--solune-border); color: var(--solune-text-soft); font-variant-numeric: tabular-nums; }
.solune-shop-page .solune-oi-no:hover { border-color: var(--solune-primary); color: var(--solune-primary); }

/* 대표 상품 사진 56 과 상품 수 */
.solune-shop-page .solune-oi-goods { display: flex; min-width: 0; align-items: center; gap: .875rem; }
.solune-shop-page .solune-oi-thumb { display: block; overflow: hidden; width: 56px; height: 56px; flex: none; border-radius: .5rem; background: var(--solune-surface-soft); }
.solune-shop-page .solune-oi-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.solune-shop-page .solune-oi-kinds { color: var(--solune-text-soft); font-size: .875rem; }

/* 오른쪽: 금액 셋과 단추 */
.solune-shop-page .solune-oi-side { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.solune-shop-page .solune-oi-amt {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 1.25rem 1.75rem;
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.solune-shop-page .solune-oi-amt > div { display: flex; flex-direction: column; gap: .3rem; }
.solune-shop-page .solune-oi-amt dt { color: var(--oi-muted); font-size: .6875rem; font-weight: 400; }
.solune-shop-page .solune-oi-amt dd { margin: 0; color: var(--solune-text-soft); font-size: .875rem; white-space: nowrap; }
.solune-shop-page .solune-oi-amt .is-total dd { color: var(--solune-text); font-size: .9375rem; font-weight: 700; }
.solune-shop-page .solune-oi-amt .is-due dd { color: var(--solune-danger); font-weight: 700; }
.solune-shop-page .solune-oi-amt .is-clear dd { color: var(--oi-muted); }
.solune-shop-page .solune-oi-view {
    display: inline-flex;
    height: 34px;
    align-items: center;
    align-self: flex-end;
    padding: 0 .875rem;
    border: 1px solid var(--solune-border);
    border-radius: .5rem;
    background: var(--solune-surface);
    color: var(--solune-text);
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}
.solune-shop-page .solune-oi-view:hover { border-color: var(--solune-primary); color: var(--solune-primary); }
.solune-shop-page :is(.solune-oi-no, .solune-oi-view):focus-visible { outline: 2px solid var(--solune-primary); outline-offset: 2px; }

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

/* 폰의 코어 주문내역조회(mobile/shop/orderinquiry.php)는 목록 위에 "주문서번호
   링크를 누르시면 …" 안내를 한 줄 낸다. 지우지 않고 흐린 작은 글씨로만 맞춘다. */
.solune-shop-page #sod_v_info { margin: 0 0 1rem; color: var(--solune-text-soft); font-size: .8125rem; }

@media (max-width: 639px) {
    /* 한 칸으로 내리고, 금액 셋은 옅은 줄 아래 세 칸(왼쪽 정렬)으로 둔다. */
    .solune-shop-page .solune-oi-card { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.125rem 1.125rem 1.25rem; }
    .solune-shop-page .solune-oi-amt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--solune-border); text-align: left; }
    .solune-shop-page .solune-oi-view { justify-content: center; align-self: stretch; height: 40px; }
    /* 폭이 모자라 주문서번호가 다음 줄로 내려가면 구분선이 윗줄 끝에 홀로 남는다. */
    .solune-shop-page .solune-oi-sep { display: none; }
}

/* --- 주문서 ---------------------------------------------------------------
   shop/orderform.sub.php 는 코어라 손댈 수 없다. 다행히 코어가 이미 .sod_left /
   .sod_right 로 나눠 두어, 시안처럼 왼쪽 입력 · 오른쪽 결제 카드로 세울 수 있다.
   상품 표는 두 칸 앞에 오는 형제라 그리드에서 왼쪽 칸으로 보낸다. */
.solune-shop-page #sod_frm { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: 2.5rem; }
.solune-shop-page #sod_frm > .tbl_head03, .solune-shop-page #sod_frm > .sod_left { grid-column: 1; min-width: 0; }
.solune-shop-page #sod_frm > .sod_right { position: sticky; top: 5rem; grid-column: 2; grid-row: 1 / span 3; border: 1px solid var(--solune-border); background: var(--solune-surface); padding: 1.5rem; }

.solune-shop-page #sod_frm > .tbl_head03 { overflow-x: auto; border: 0; border-top: 1px solid var(--solune-text); border-radius: 0; background: none; }
.solune-shop-page #sod_frm > .tbl_head03 th { background: none; color: var(--solune-muted); font-size: .78rem; font-weight: 600; }
.solune-shop-page #sod_frm > .tbl_head03 :is(th, td) { padding: 1rem .5rem; }
.solune-shop-page #sod_frm .sod_img img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; }

.solune-shop-page :is(#sod_frm_orderer, #sod_frm_taker, #sod_frm_pay) { margin-top: 2.5rem; }
.solune-shop-page .sod_left h2, .solune-shop-page .sod_right h2 { margin-bottom: 1rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.solune-shop-page .tbl_frm01 table { width: 100%; border-collapse: collapse; }
.solune-shop-page .tbl_frm01 :is(th, td) { border-bottom: 1px solid var(--solune-border); padding: .85rem 1rem; text-align: left; vertical-align: middle; font-size: .8125rem; }
.solune-shop-page .tbl_frm01 th { width: 9rem; background: var(--solune-surface-soft); color: var(--solune-text-soft); font-weight: 600; }
.solune-shop-page .tbl_frm01 tr:first-child :is(th, td) { border-top: 1px solid var(--solune-border); }
.solune-shop-page :is(.tbl_frm01, .sod_right) :is(input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], select, textarea) { min-height: 2.75rem; border: 1px solid var(--solune-border-strong); border-radius: 0; background: var(--solune-surface); color: var(--solune-text); padding: .35rem .75rem; font-size: .8125rem; }
.solune-shop-page .tbl_frm01 textarea { width: 100%; min-height: 5rem; }
.solune-shop-page .tbl_frm01 .btn_frmline, .solune-shop-page .sod_left .btn_frmline { display: inline-flex; min-height: 2.75rem; align-items: center; border: 1px solid var(--solune-border-strong); border-radius: 0; background: var(--solune-surface); color: var(--solune-text-soft); cursor: pointer; padding-inline: .9rem; font-size: .8125rem; }
.solune-shop-page .tbl_frm01 .btn_frmline:hover { border-color: var(--solune-primary); color: var(--solune-primary); }

/* 결제수단. 시안은 네모 칸 네 개가 나란히 선다. 코어는 라디오 + label 목록이라
   그 줄만 칸으로 세운다. */
.solune-shop-page #sod_frm_paysel { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; margin-top: .75rem; padding: 0; }
.solune-shop-page #sod_frm_paysel legend { margin-bottom: .5rem; color: var(--solune-muted); font-size: .78rem; }
.solune-shop-page #sod_frm_paysel label { display: inline-flex; min-height: 2.75rem; align-items: center; gap: .4rem; border: 1px solid var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text-soft); cursor: pointer; padding-inline: .9rem; font-size: .8125rem; }
.solune-shop-page #sod_frm_paysel input[type=radio] { accent-color: var(--solune-primary); }
.solune-shop-page #sod_frm_paysel label:hover { border-color: var(--solune-primary); color: var(--solune-primary); }

/* 오른쪽 결제 카드 안쪽. 코어는 금액을 ul > li(span 라벨 + strong 값 + "원"
   텍스트)로 뿌린다. 텍스트 노드는 감쌀 수 없으니 라벨만 왼쪽으로 밀어
   값과 단위가 오른쪽에 붙게 한다. */
.solune-shop-page .sod_right #sod_bsk_tot { margin: 0; }
.solune-shop-page .sod_right #sod_bsk_tot ul { margin: 0; padding: 0; list-style: none; }
.solune-shop-page .sod_right #sod_bsk_tot li { display: flex; align-items: baseline; justify-content: flex-end; gap: .25rem; padding-block: .35rem; color: var(--solune-muted); font-size: .8125rem; }
.solune-shop-page .sod_right #sod_bsk_tot li > span:first-child { margin-right: auto; }
.solune-shop-page .sod_right #sod_bsk_tot li strong { color: var(--solune-text-soft); font-weight: 700; }
.solune-shop-page .sod_right .sod_bsk_cnt { border-top: 1px solid var(--solune-border); margin-top: .75rem; padding-top: 1rem; color: var(--solune-text-soft); font-weight: 700; }
.solune-shop-page .sod_right .sod_bsk_cnt strong { color: var(--solune-text); font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; }

.solune-shop-page #sod_frm_pay { border-top: 1px solid var(--solune-border); margin-top: 1.5rem; padding-top: 1.5rem; }
.solune-shop-page #sod_frm_pay .pay_tbl table { width: 100%; border-collapse: collapse; }
.solune-shop-page #sod_frm_pay .pay_tbl :is(th, td) { padding: .35rem 0; text-align: left; vertical-align: top; color: var(--solune-muted); font-size: .75rem; font-weight: 400; }
.solune-shop-page #sod_frm_pay .pay_tbl th { width: 5rem; }
.solune-shop-page #od_tot_price { display: flex; align-items: baseline; justify-content: flex-end; gap: .25rem; border-top: 1px solid var(--solune-border); margin-top: 1rem; padding-top: 1rem; color: var(--solune-text-soft); font-size: .8125rem; font-weight: 700; }
.solune-shop-page #od_tot_price > span:first-child { margin-right: auto; }
.solune-shop-page #od_tot_price strong { color: var(--solune-text); font-size: 1.125rem; font-weight: 800; }
.solune-shop-page #od_pay_sl { margin-top: 1.25rem; }
.solune-shop-page #od_pay_sl h3 { margin-bottom: .5rem; font-size: .875rem; font-weight: 700; }
.solune-shop-page #sod_frm_pt_alert { color: var(--solune-muted); font-size: .72rem; line-height: 1.6; }

/* 주문/취소 버튼. 코어가 #display_pay_button.btn_confirm 안에 둔다. */
.solune-shop-page #display_pay_button { display: grid; gap: .5rem; margin-top: 1.25rem; }
.solune-shop-page #display_pay_button :is(a, button, input[type=submit]) { display: inline-flex; width: 100%; min-height: 3rem; align-items: center; justify-content: center; border: 1px solid var(--solune-primary); border-radius: 0; background: var(--solune-primary); color: var(--color-primary-content, #fff); cursor: pointer; font-size: .875rem; font-weight: 700; }
.solune-shop-page #display_pay_button .btn_submit:hover { background: var(--solune-primary-hover); border-color: var(--solune-primary-hover); }
.solune-shop-page #display_pay_button .btn01 { border-color: var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text-soft); }
.solune-shop-page #display_pay_button .btn01:hover { border-color: var(--solune-primary); color: var(--solune-primary); }

@media (max-width: 1023px) {
    .solune-shop-page #sod_frm { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .solune-shop-page #sod_frm > .sod_right { position: static; grid-column: 1; grid-row: auto; }
    .solune-shop-page .tbl_frm01 th { width: 7rem; }
}

/* --- 주문서 시안 v2 (주문서 작성.html) -------------------------------------
   위 절의 뼈대(왼쪽 입력 · 오른쪽 결제 카드)는 그대로 두고 값만 덮는 층이다.
   코어 마크업(shop/orderform.sub.php)은 손댈 수 없어 모두 CSS 로 한다.

   폰은 UA 로 mobile/shop/orderform.sub.php 가 돌고, 그쪽도 #sod_frm 을 쓴다
   (class 만 .sod_frm_mobile). 그래서 이 층은 전부 #sod_frm.sod_frm_pc 로
   묶는다 — 그러지 않으면 폰 주문서의 목록까지 격자로 바뀐다.

   색은 사이트 팔레트를 쓴다 — 시안의 --accent #2f5b4b 는 --solune-primary,
   --line 은 --solune-border, --soft 는 --solune-surface-soft 로 옮긴다. */

/* 1) 주문 단계: 제목 줄 오른쪽의 작은 원 셋.
   장바구니도 같은 부품(solune_shop_order_steps)을 쓰지만 그쪽 시안은 폭을
   다 채우는 띠라서, 주문서에서만 모양을 바꾼다. 제목과 단계는 형제라 한 줄로
   묶을 부모가 없으므로, 넓은 화면에서는 .shop-content 를 기준으로 제목 줄
   오른쪽 끝에 띄운다(제목 줄 높이 42 에 맞춰 세로 가운데). */
body.solune-shop-page:has(#sod_frm.sod_frm_pc) .solune-shop-page-title { margin-bottom: 2.5rem; }
body.solune-shop-page:has(#sod_frm.sod_frm_pc) .solune-order-steps {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: -1rem 0 2rem;
    padding: 0;
    overflow: visible;
    border: 0;
}
body.solune-shop-page:has(#sod_frm.sod_frm_pc) .solune-order-steps li {
    gap: .5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--solune-muted);
    font-size: .8125rem;
    font-weight: 500;
}
/* 단계 사이의 가는 줄. 마크업에 없는 것이라 앞 단계 뒤가 아니라 뒷 단계 앞에 그린다. */
body.solune-shop-page:has(#sod_frm.sod_frm_pc) .solune-order-steps li + li::before {
    content: "";
    width: 28px;
    height: 1px;
    margin-right: .125rem;
    background: var(--solune-border);
}
body.solune-shop-page:has(#sod_frm.sod_frm_pc) .solune-order-steps .solune-order-step-no {
    width: 24px;
    height: 24px;
    border-color: var(--solune-border);
    background: none;
    color: inherit;
    font-weight: 500;
}
body.solune-shop-page:has(#sod_frm.sod_frm_pc) .solune-order-steps .is-current { background: none; color: var(--solune-text); font-weight: 700; }
body.solune-shop-page:has(#sod_frm.sod_frm_pc) .solune-order-steps .is-current .solune-order-step-no {
    border-color: var(--solune-primary);
    background: var(--solune-primary);
    color: var(--color-primary-content, #fff);
    font-weight: 700;
}
@media (min-width: 768px) {
    body.solune-shop-page:has(#sod_frm.sod_frm_pc) .shop-content { position: relative; }
    body.solune-shop-page:has(#sod_frm.sod_frm_pc) .solune-order-steps {
        position: absolute;
        /* 제목 상자에 위 여백 32 가 있어(실측) 0 에 두면 제목보다 한 뾘 위에 뜬다. */
        top: 2rem;
        right: 0;
        height: 42px;
        margin: 0;
    }
}

/* 2) 두 칸: 시안은 오른쪽 340 · 사이 48, 구역 사이 56. */
.solune-shop-page #sod_frm.sod_frm_pc { grid-template-columns: minmax(0, 1fr) 340px; gap: 3.5rem 3rem; }

/* 3) 구역 제목: 17px 굵게, 아래로 진한 줄. 주문상품은 코어가 제목 없이 표만
   내서 같은 모양의 글자를 ::before 로 얹는다(표의 열 머리가 뜻을 대신한다). */
.solune-shop-page #sod_frm.sod_frm_pc :is(#sod_frm_orderer, #sod_frm_taker) > h2,
.solune-shop-page #sod_frm.sod_frm_pc > .tbl_head03::before {
    display: block;
    margin: 0 0 1.25rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--solune-text);
    color: var(--solune-text);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
.solune-shop-page #sod_frm.sod_frm_pc > .tbl_head03::before { content: "주문상품"; margin-bottom: 0; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_orderer { margin-top: 0; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_taker { margin-top: 3.5rem; }

/* 4) 주문상품: 여섯 칸 표를 한 줄 목록으로.
   [사진 | 이름 + 옵션          | 수량]
   [사진 | 판매가 · 적립 · 배송 | 소계]
   칸 이름이 사라지므로 값 앞뒤에 뜻을 글자로 붙인다(판매가 · 적립 · 원 · 개).
   열 머리는 화면에서만 감추고 낭독기에는 남긴다.
   세 숫자 칸은 클래스가 같아 순서로 가린다 — 코어가 칸을 늘 여섯 개 내므로
   (조건 없이) 순서가 흔들리지 않는다. 소계만은 span.total_price 로 집는다. */
.solune-shop-page #sod_frm.sod_frm_pc > .tbl_head03 { overflow: visible; border-top: 0; }
/* 표에는 다른 규칙이 준 최소 너비가 남아 있어(실측 600 폭에서 칸 568 안에 표 672),
   목록 줄로 바꾼 뒤에도 오른쪽 칸(수량 · 소계)이 밖으로 밀려 잘렸다. 폭을 칸에 맞춘다. */
.solune-shop-page #sod_frm.sod_frm_pc #sod_list { display: block; width: 100%; min-width: 0; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_list tbody { display: block; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list tbody tr {
    display: grid;
    grid-template-columns: 88px max-content max-content max-content minmax(0, 1fr) max-content;
    row-gap: .5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--solune-border);
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_list tbody td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td.td_prd { display: contents; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list .sod_img { grid-column: 1; grid-row: 1 / span 2; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list .sod_img img {
    width: 72px;
    height: 72px;
    border-radius: .625rem;
    background: var(--solune-surface-soft);
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_list .sod_name { grid-column: 2 / 6; grid-row: 1; min-width: 0; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list .sod_name > b { display: block; margin-bottom: .5rem; color: var(--solune-text); font-size: .9375rem; font-weight: 500; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list .sod_opt ul { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list .sod_opt li { color: var(--solune-text-soft); font-size: .8125rem; line-height: 1.5; }

/* 아랫줄의 작은 글자들: 판매가 · 적립 · 배송 */
.solune-shop-page #sod_frm.sod_frm_pc #sod_list :is(td:nth-child(3), td:nth-child(5), td.td_dvr) {
    grid-row: 2;
    align-self: end;
    color: var(--solune-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td:nth-child(3) { grid-column: 2; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td:nth-child(3)::before { content: "판매가 "; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td:nth-child(3)::after { content: "원"; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td:nth-child(5) { grid-column: 3; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td:nth-child(5)::before { content: "\00a0·\00a0적립 "; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td:nth-child(5)::after { content: "P"; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td.td_dvr { grid-column: 4; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td.td_dvr::before { content: "\00a0·\00a0배송 "; }

/* 오른쪽: 수량(작게) 위, 소계(굵게) 아래 */
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td.td_num {
    grid-column: 6;
    grid-row: 1;
    justify-self: end;
    color: var(--solune-muted);
    font-size: .75rem;
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td.td_num::after { content: "개"; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td:has(.total_price) {
    grid-column: 6;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    padding-left: 1rem;
    color: var(--solune-text);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_list td:has(.total_price)::after { content: "원"; margin-left: 1px; font-size: .75rem; font-weight: 400; }

/* 5) 입력 폼: 회색 이름 칸 표를 "이름표 위 · 칸 아래" 두 칸 격자로.
   줄 순서는 코어 그대로 둔다(보이는 순서와 탭 순서가 어긋나지 않게).
   주소 · 배송지선택 · 배송지명 · 전하실말씀은 한 줄을 다 쓴다. */
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 { border: 0; background: none; }
/* 표 자체에 2px 진한 윗선이 남아 있어 구역 제목의 아랫선과 두 줄로 겹쳤다. */
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 table { border: 0; }
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 :is(table, tbody, tr, th, td) { display: block; width: auto; }
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
}
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 tr:is(:has(#od_zip), :has(#od_b_zip), :has(.order_choice_place), :has(#ad_subject), :has(#od_memo)) { grid-column: 1 / -1; }
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 :is(th, td) {
    padding: 0;
    border: 0;
    background: none;
}
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 th {
    margin-bottom: .375rem;
    color: var(--solune-muted);
    font-size: .75rem;
    font-weight: 500;
}
/* 필수 표시는 이름표에 따로 붙이지 않는다. 시안은 이름표 뒤 별표지만, 이 사이트는
   이미 필수 칸의 오른쪽 위에 빨간 별표를 찍는다(default.css 의 :invalid 규칙).
   둘 다 두면 한 칸에 별표가 두 개가 된다. 사이트 전체가 쓰는 쪽을 따른다. */
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 :is(input.frm_input, textarea) {
    width: 100%;
    height: 48px;
    min-height: 48px;
    border-radius: .625rem;
    padding: 0 .875rem;
    font-size: .875rem;
}
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 textarea { height: auto; min-height: 6rem; padding: .875rem; line-height: 1.6; }

/* 주소: [우편번호 160 | 주소 검색] 한 줄, 그 아래로 기본 · 상세 · 참고가 한 줄씩.
   <br> 은 격자 안에서 빈 칸이 되므로 걷는다. */
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 td:is(:has(#od_zip), :has(#od_b_zip)) {
    display: grid;
    grid-template-columns: 160px max-content minmax(0, 1fr);
    gap: .5rem;
}
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 td:is(:has(#od_zip), :has(#od_b_zip)) br { display: none; }
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 td:is(:has(#od_zip), :has(#od_b_zip)) .frm_address { grid-column: 1 / -1; }
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .btn_address {
    height: 48px;
    padding: 0 1rem;
    border: 1px solid var(--solune-text);
    border-radius: .625rem;
    background: none;
    color: var(--solune-text);
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .btn_address:hover { background: var(--solune-surface-soft); }

/* 배송지명: 칸과 "기본배송지로 설정" 을 한 줄에 */
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 td:has(#ad_subject) { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 #ad_subject { flex: 1 1 15rem; width: auto; }
.solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 td:has(#ad_subject) label { display: inline-flex; align-items: center; gap: .5rem; color: var(--solune-text-soft); cursor: pointer; font-size: .8125rem; }
.solune-shop-page #sod_frm.sod_frm_pc .sod_left #ad_default { width: 16px; height: 16px; margin: 0; accent-color: var(--solune-primary); }

/* 6) 배송지선택: 라디오 줄을 시안의 나눔 단추로. 라디오는 화면에서만 감추고
   (포커스와 선택은 그대로 받는다) 이름표가 단추 모양을 맡는다. */
.solune-shop-page #sod_frm.sod_frm_pc .order_choice_place {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    padding: 4px;
    border-radius: .75rem;
    background: var(--solune-surface-soft);
}
.solune-shop-page #sod_frm.sod_frm_pc .order_choice_place input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.solune-shop-page #sod_frm.sod_frm_pc .order_choice_place label {
    display: flex;
    min-width: 7.5rem;
    height: 40px;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 0 .75rem;
    border-radius: 9px;
    color: var(--solune-muted);
    cursor: pointer;
    font-size: .8125rem;
    white-space: nowrap;
}
.solune-shop-page #sod_frm.sod_frm_pc .order_choice_place label:hover { color: var(--solune-text); }
.solune-shop-page #sod_frm.sod_frm_pc .order_choice_place input:checked + label {
    background: var(--solune-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    color: var(--solune-text);
    font-weight: 700;
}
.solune-shop-page #sod_frm.sod_frm_pc .order_choice_place input:focus-visible + label { outline: 2px solid var(--solune-primary); outline-offset: 2px; }
/* 배송지목록은 목록을 여는 링크라 단추 줄 끝에 조용한 글자로 둔다. */
.solune-shop-page #sod_frm.sod_frm_pc .order_choice_place #order_address {
    min-height: 40px;
    flex: none;
    border: 0;
    background: none;
    color: var(--solune-text-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 7) 오른쪽 결제 카드: 모서리 18 · 안쪽 24. */
.solune-shop-page #sod_frm.sod_frm_pc > .sod_right {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--solune-border);
    border-radius: 1.125rem;
    background: var(--solune-surface);
}
/* 금액 목록. 코어 순서는 주문 · 쿠폰 · 배송비 · 포인트 · 총계다. 시안처럼 포인트를
   총계 아래 옅은 띠로 내린다(뜻이 바뀌지 않는 정보라 순서만 옮긴다). */
.solune-shop-page #sod_frm.sod_frm_pc #sod_bsk_tot::before { content: "결제 금액"; display: block; margin-bottom: 1rem; color: var(--solune-text); font-size: .9375rem; font-weight: 700; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_bsk_tot ul { display: flex; flex-direction: column; gap: .625rem; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_bsk_tot li { padding: 0; color: var(--solune-text); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_bsk_tot li > span:first-child { color: var(--solune-muted); }
.solune-shop-page #sod_frm.sod_frm_pc #sod_bsk_tot li strong { color: var(--solune-text); font-weight: 400; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_bsk_tot .sod_bsk_cnt { margin: 0; padding: 0; border: 0; font-weight: 400; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_bsk_tot .sod_bsk_cnt strong { font-size: .8125rem; font-weight: 400; letter-spacing: 0; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_bsk_tot .sod_bsk_point {
    order: 1;
    margin-top: .375rem;
    padding: .625rem .75rem;
    border-radius: .5rem;
    background: var(--solune-primary-soft);
    color: var(--solune-primary);
    font-size: .75rem;
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_bsk_tot .sod_bsk_point > span:first-child,
.solune-shop-page #sod_frm.sod_frm_pc #sod_bsk_tot .sod_bsk_point strong { color: inherit; font-weight: 700; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_bsk_tot .sod_bsk_point > span:first-child { font-weight: 400; }

/* 결제정보: 제목과 추가배송비 안내, 그 아래 큰 총 결제금액. */
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_pay { margin: 0; padding: 0; border: 0; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_pay > h2 { margin: 0 0 .75rem; font-size: .9375rem; font-weight: 700; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_pay .pay_tbl :is(th, td) { color: var(--solune-muted); font-size: .75rem; line-height: 1.5; }
.solune-shop-page #sod_frm.sod_frm_pc #od_tot_price {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--solune-text);
    color: var(--solune-text);
    font-size: .8125rem;
    font-weight: 500;
}
.solune-shop-page #sod_frm.sod_frm_pc #od_tot_price strong { font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* 결제수단: 두 칸 타일(기본 테마 basic 의 #od_pay_sl 과 같은 배치).
   한 줄짜리 라디오 목록은 결제수단이 열넷이면 650px 가 넘게 늘어져 주문하기
   단추가 한참 아래로 밀렸다. 칸마다 코어 img/ 의 아이콘(무통장 · 가상계좌 ·
   계좌이체 · 휴대폰 · 신용카드)이나 간편결제 로고를 얹는다. 로고 칸은 글자를
   화면에서만 감추고(text-indent) 낭독기에는 이름이 그대로 읽힌다.
   라디오는 화면에서만 감추고, 고른 칸은 테두리가 진해지며 바탕이 옅게 찬다. */
.solune-shop-page #sod_frm.sod_frm_pc #od_pay_sl { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--solune-border); }
.solune-shop-page #sod_frm.sod_frm_pc #od_pay_sl h3 { font-size: .9375rem; font-weight: 700; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_pt_alert { margin: 0 0 .75rem; color: var(--solune-muted); font-size: .6875rem; line-height: 1.5; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .375rem;
    margin: 0;
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
/* 무통장 입금 칸(입금할 계좌 · 입금자명)은 타일 격자 밖으로 — 두 칸을 다 쓴다. */
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel > :not(input, label.lb_icon, legend) { grid-column: 1 / -1; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.lb_icon {
    display: flex;
    min-width: 0;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem .5rem .5rem 3.25rem;
    border: 1px solid var(--solune-border);
    border-radius: 9px;
    background-color: var(--solune-surface);
    background-repeat: no-repeat;
    background-position: .75rem 50%;
    color: var(--solune-text);
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    word-break: keep-all;
    transition: border-color .16s ease, background-color .16s ease;
}
/* 기본 결제수단 — 왼쪽 아이콘 + 이름 */
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.bank_icon { background-image: url('../../../img/pay_icon1.png'); }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label:is(.vbank_icon, .iche_icon) { background-image: url('../../../img/pay_icon2.png'); }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.hp_icon { background-image: url('../../../img/pay_icon3.png'); background-position: 1.25rem 50%; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.card_icon { background-image: url('../../../img/pay_icon4.png'); background-position: .9rem 50%; }
/* 간편결제 — 가운데 로고만. 이름은 낭독기에만 */
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label:is(.samsungpay_icon, .naverpay_icon, .kakaopay_icon, .paycopay_icon, .PAYCO, .skpay_icon, .ssgpay_icon, .lpay_icon, .inicis_lpay, .inicis_kakaopay, .KPAY, .PAYNOW) {
    overflow: hidden;
    padding-left: .5rem;
    background-position: 50% 50%;
    text-indent: -999px;
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.samsungpay_icon { background-image: url('../../../img/samsungpay.png'); }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.naverpay_icon { background-image: url('../../../img/ico-default-naverpay.png'); }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label:is(.kakaopay_icon, .inicis_kakaopay) { background-image: url('../../../img/kakao.png'); }
/* 이니시스 카카오페이는 코어가 라벨 안에 로고용 빈 <em> 을 둔다(basic 은 거기에 노란 알약을 그린다). 여기서는 타일 가운데 로고로 통일해 em 은 쓰지 않는다. */
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.inicis_kakaopay em { display: none; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label:is(.paycopay_icon, .PAYCO) { background-image: url('../../../img/payco.png'); }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.skpay_icon { background-image: url('../../../img/skpay11_icon.png'); background-size: 70px auto; }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.ssgpay_icon { background-image: url('../../../img/ssgpay_icon.png'); }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label:is(.lpay_icon, .inicis_lpay) { background-image: url('../../../img/lpay_logo.png'); }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.KPAY { background-image: url('../../../img/kpay.png'); }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.PAYNOW { background-image: url('../../../img/paynow.png'); }
/* NHN KCP 네이버페이는 같은 로고가 둘(카드결제 · 머니/포인트)이라 로고 아래에 이름을 적는다. */
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.naverpay_icon.nhnkcp_icon {
    align-items: flex-end;
    padding: 1.75rem .25rem .45rem;
    background-position: 50% 12px;
    font-size: .6875rem;
    text-indent: 0;
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.lb_icon:hover { border-color: var(--solune-text); }
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel input:checked + label.lb_icon {
    border-color: var(--solune-text);
    background-color: var(--solune-surface-soft);
    box-shadow: inset 0 0 0 1px var(--solune-text);
    font-weight: 700;
}
.solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel input:focus-visible + label { outline: 2px solid var(--solune-primary); outline-offset: 2px; }
/* 무통장입금을 고르면 나오는 입금 계좌 · 입금자명. 코어가 맨 마크업(글자 + <br> + label + input)으로
   내놓아 위 결제수단 이름표 규칙(테두리 칸)을 그대로 받고 있었다. 타일 아래 옅은 상자로 묶는다. */
.solune-shop-page #sod_frm.sod_frm_pc #settle_bank {
    margin-top: .375rem;
    padding: .875rem;
    border-radius: 9px;
    background: var(--solune-surface-soft);
    color: var(--solune-text);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.5;
    word-break: keep-all;
}
.solune-shop-page #sod_frm.sod_frm_pc #settle_bank select { width: 100%; }
.solune-shop-page #sod_frm.sod_frm_pc #settle_bank br { display: none; }
.solune-shop-page #sod_frm.sod_frm_pc #settle_bank label[for="od_deposit_name"] {
    display: block;
    min-height: 0;
    margin: .75rem 0 .375rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--solune-muted);
    font-size: .75rem;
    font-weight: 500;
}
.solune-shop-page #sod_frm.sod_frm_pc #settle_bank #od_deposit_name { width: 100%; }
/* 아이콘 · 로고 그림은 흰 바탕을 전제로 그려져 있다(무통장 · 계좌 아이콘은 바탕까지 흰색).
   다크에서도 타일만은 밝은 칩으로 둔다. */
html[data-theme="dark"] .solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.lb_icon { background-color: #fff; color: #1b1a17; }
html[data-theme="dark"] .solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel input:checked + label.lb_icon { background-color: #f1f0ec; }
@media (prefers-reduced-motion: reduce) {
    .solune-shop-page #sod_frm.sod_frm_pc #sod_frm_paysel label.lb_icon { transition: none; }
}

/* --- 주문서 — 폰 -----------------------------------------------------------
   그누보드는 UA 로 폰을 가려 mobile/shop/orderform.sub.php 를 돌린다. 마크업이
   PC 와 전혀 달라(상품은 표가 아니라 ul.sod_list > li.sod_li, 합계는
   dl#m_sod_bsk_tot, 입력칸은 .odf_list > ul > li 의 [이름표 + 입력]) 위의
   .sod_frm_pc 층이 하나도 걸리지 않았다 — 개발자도구에서 폰으로 바꾸거나 폰
   브라우저로 열면 상품 · 합계 · 입력칸이 맨 모양으로 늘어섰다(2026-09-29).
   PC 주문서를 좁은 폭에서 본 모양(구역 제목 + 굵은 밑줄, 썸네일 줄, 위에
   이름표 · 아래 꽉 찬 입력칸, 옅은 결제 카드, 짙은 주문 단추)을 목표로 한다.

   이 층은 전부 #sod_frm.sod_frm_mobile 로 묶는다. 묶이지 않은 위쪽 규칙
   (#sod_frm 두 칸 격자 · 구역 위 여백 · #display_pay_button 네모 단추)이 폰에도
   새어 들어오므로 여기서 명시적으로 덮는다. 입력칸 글자는 16px 이상으로 둔다 —
   iOS 사파리는 그보다 작은 입력칸에 초점이 가면 화면을 확대한다. */
.solune-shop-page #sod_frm.sod_frm_mobile { display: block; width: min(100%, 44rem); margin-inline: auto; }
.solune-shop-page #sod_frm.sod_frm_mobile > form { display: flex; flex-direction: column; gap: 2.25rem; }
.solune-shop-page #sod_frm.sod_frm_mobile :is(#sod_frm_orderer, #sod_frm_taker, #sod_frm_pay) { margin: 0; }
/* 구역 제목. 상품 목록은 코어가 제목을 두지 않아 ::before 로 적는다(낭독기에서는 뺀다). */
.solune-shop-page #sod_frm.sod_frm_mobile :is(#sod_frm_orderer, #sod_frm_taker, #sod_frm_pay) > h2,
.solune-shop-page #sod_frm.sod_frm_mobile .sod_list::before {
    display: block;
    margin: 0 0 1rem;
    padding: 0 0 .75rem;
    border-bottom: 2px solid var(--solune-text);
    color: var(--solune-text);
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.solune-shop-page #sod_frm.sod_frm_mobile .sod_list::before { content: "주문상품" / ""; margin-bottom: 0; }

/* 상품 줄: [썸네일 | 이름 · 옵션 · 판매가/수량/배송비 · 주문금액]. 가운데 묶음
   (.li_op_wr)은 풀어서 사진과 옵션이 격자에 바로 서게 한다. */
.solune-shop-page #sod_frm.sod_frm_mobile .sod_list { margin: 0; padding: 0; list-style: none; }
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: .875rem;
    row-gap: .25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--solune-border);
}
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .li_op_wr { display: contents; }
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .total_img { grid-column: 1; grid-row: 1 / span 4; }
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .total_img img { display: block; width: 3.5rem; height: 3.5rem; border-radius: .5rem; object-fit: cover; background: var(--solune-surface-soft); }
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .li_name { grid-column: 2; grid-row: 1; color: var(--solune-text); font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .sod_opt { grid-column: 2; grid-row: 2; color: var(--solune-text-soft); font-size: .8125rem; line-height: 1.5; }
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .sod_opt ul { margin: 0; padding: 0; list-style: none; }
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .li_mod:empty { display: none; }
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .li_prqty {
    display: flex;
    grid-column: 2;
    grid-row: 3;
    flex-wrap: wrap;
    gap: .125rem .75rem;
    color: var(--solune-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .li_prqty strong { font-weight: 600; }
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .total_price {
    display: flex;
    grid-column: 2;
    grid-row: 4;
    align-items: baseline;
    justify-content: space-between;
    margin-top: .25rem;
    color: var(--solune-muted);
    font-size: .75rem;
}
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .total_price strong { color: var(--solune-text); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.solune-shop-page #sod_frm.sod_frm_mobile .sod_li .total_price strong::after { margin-left: .125rem; content: "원"; font-size: .8125rem; font-weight: 600; }

/* 합계. 옅은 카드에 [이름 · 값] 두 칸, 마지막 총계만 위에 선을 긋고 크게. */
.solune-shop-page #sod_frm.sod_frm_mobile .sod_ta_wr { margin-top: -1.25rem; padding: 1.25rem; border-radius: .75rem; background: var(--solune-surface-soft); }
/* 칸 사이 간격은 0 으로 두고 이름 칸의 안쪽 여백으로 띄운다 — 간격을 주면 총계 위 선이
   그 폭만큼 끊겨 보인다. */
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_bsk_tot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 0; margin: 0; }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_bsk_tot dt { margin: 0; padding-right: 1rem; color: var(--solune-text-soft); font-size: .875rem; font-weight: 500; }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_bsk_tot dd { margin: 0; color: var(--solune-text); font-size: .875rem; font-variant-numeric: tabular-nums; text-align: right; }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_bsk_tot dd strong { font-weight: 600; }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_bsk_tot :is(dt, dd).sod_bsk_cnt { margin-top: .5rem; padding-top: .875rem; border-top: 1px solid var(--solune-border); }
/* 총계 줄은 두 칸 모두 같은 높이로 늘려 위 선이 한 줄로 이어지게 하고, 글자는
   가운데에 앉힌다. (align-self: baseline 을 주면 이름 칸이 아래로 밀려 선이 어긋났다.) */
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_bsk_tot :is(dt, dd).sod_bsk_cnt { display: flex; align-items: center; }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_bsk_tot dd.sod_bsk_cnt { justify-content: flex-end; gap: .125rem; }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_bsk_tot dt.sod_bsk_cnt { color: var(--solune-text); font-weight: 700; }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_bsk_tot dd.sod_bsk_cnt strong { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }

/* 주문하시는 분 · 받으시는 분. 한 줄에 [이름표 입력] 이 붙어 오는 것을 위에
   이름표, 아래 꽉 찬 입력칸으로 편다. */
.solune-shop-page #sod_frm.sod_frm_mobile .odf_list ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.solune-shop-page #sod_frm.sod_frm_mobile .odf_list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.solune-shop-page #sod_frm.sod_frm_mobile .odf_list li br { display: none; }
.solune-shop-page #sod_frm.sod_frm_mobile .odf_list li > :is(label:not(.sound_only):not(.ad_default), strong):first-of-type {
    flex-basis: 100%;
    color: var(--solune-text-soft);
    font-size: .8125rem;
    font-weight: 600;
}
.solune-shop-page #sod_frm.sod_frm_mobile .odf_list :is(.frm_input, textarea) {
    width: 100%;
    height: 3rem;
    margin: 0;
    padding: 0 .875rem;
    border: 1px solid var(--solune-border-strong);
    border-radius: .625rem;
    background: var(--solune-surface);
    color: var(--solune-text);
    font-size: 1rem;
}
.solune-shop-page #sod_frm.sod_frm_mobile .odf_list textarea { height: 6rem; padding-block: .75rem; line-height: 1.5; resize: vertical; }
.solune-shop-page #sod_frm.sod_frm_mobile .odf_list .frm_input[readonly] { background: var(--solune-surface-soft); color: var(--solune-text-soft); }
/* 주소: [우편번호 | 주소검색] 한 줄, 그 아래 주소 셋. */
.solune-shop-page #sod_frm.sod_frm_mobile .odf_list .add_num { display: flex; width: 100%; gap: .5rem; }
.solune-shop-page #sod_frm.sod_frm_mobile .odf_list .add_num .frm_input { flex: 1; min-width: 0; }
.solune-shop-page #sod_frm.sod_frm_mobile .odf_list .btn_addsch {
    flex: none;
    height: 3rem;
    padding: 0 1rem;
    border: 1px solid var(--solune-text);
    border-radius: .625rem;
    background: var(--solune-surface);
    color: var(--solune-text);
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
}
/* 배송지명 옆 "기본배송지로 설정" 은 입력칸 아래 한 줄로. */
.solune-shop-page #sod_frm.sod_frm_mobile #ad_default { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--solune-primary); }
.solune-shop-page #sod_frm.sod_frm_mobile .ad_default { color: var(--solune-text-soft); font-size: .8125rem; cursor: pointer; }
/* 배송지 선택: 라디오를 알약 단추로. 라디오는 화면에서만 감춘다. */
.solune-shop-page #sod_frm.sod_frm_mobile .dlv_slt > div { display: flex; width: 100%; flex-wrap: wrap; align-items: center; gap: .5rem; }
.solune-shop-page #sod_frm.sod_frm_mobile .dlv_slt input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.solune-shop-page #sod_frm.sod_frm_mobile .dlv_slt input[type="radio"] + label {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    padding: 0 .875rem;
    border: 1px solid var(--solune-border-strong);
    border-radius: 999px;
    background: var(--solune-surface);
    color: var(--solune-text-soft);
    font-size: .8125rem;
    cursor: pointer;
}
.solune-shop-page #sod_frm.sod_frm_mobile .dlv_slt input[type="radio"]:checked + label { border-color: var(--solune-text); color: var(--solune-text); font-weight: 700; box-shadow: inset 0 0 0 1px var(--solune-text); }
.solune-shop-page #sod_frm.sod_frm_mobile .dlv_slt input[type="radio"]:focus-visible + label { outline: 2px solid var(--solune-primary); outline-offset: 2px; }
.solune-shop-page #sod_frm.sod_frm_mobile #order_address { margin-left: auto; color: var(--solune-text-soft); font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }

/* 결제정보. 옅은 카드 안에 금액 표 · 결제수단 타일(아래 절) · 입금칸이 온다. */
.solune-shop-page #sod_frm.sod_frm_mobile #sod_frm_pay { padding: 1.25rem; border-radius: .75rem; background: var(--solune-surface-soft); }
.solune-shop-page #sod_frm.sod_frm_mobile .odf_tbl table { width: 100%; border-collapse: collapse; }
.solune-shop-page #sod_frm.sod_frm_mobile .odf_tbl :is(th, td) { padding: .5rem 0; border: 0; background: none; font-size: .875rem; vertical-align: baseline; }
.solune-shop-page #sod_frm.sod_frm_mobile .odf_tbl th { width: 6.5rem; color: var(--solune-text-soft); font-weight: 600; text-align: left; }
.solune-shop-page #sod_frm.sod_frm_mobile .odf_tbl td { color: var(--solune-text); text-align: right; word-break: keep-all; }
/* #od_tot_price 는 PC 합계 카드용 규칙에서 display:flex 와 위 선을 받아 와, 폰에서는
   "원" 을 다음 줄로 밀고 카드 위에 짧은 선을 그었다. 글자 사이의 조각으로 되돌린다. */
.solune-shop-page #sod_frm.sod_frm_mobile .odf_tbl #od_tot_price {
    display: inline;
    margin: 0 .125rem 0 0;
    padding: 0;
    border: 0;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* 결제등록 · 주문하기 · 취소. 코어가 결제 단계에 따라 둘 중 하나를 인라인
   display 로 여닫으므로 span 의 display 는 건드리지 않는다. */
.solune-shop-page #sod_frm.sod_frm_mobile #display_pay_button { display: grid; gap: .5rem; margin: 0; }
.solune-shop-page #sod_frm.sod_frm_mobile #display_pay_button .btn_submit {
    width: 100%;
    min-height: 3.5rem;
    border: 1px solid var(--solune-primary);
    border-radius: .75rem;
    background: var(--solune-primary);
    color: var(--solune-primary-ink);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}
.solune-shop-page #sod_frm.sod_frm_mobile #display_pay_button .btn_submit:hover { border-color: var(--solune-primary-hover); background: var(--solune-primary-hover); }
.solune-shop-page #sod_frm.sod_frm_mobile #display_pay_button .btn_cancel {
    min-height: 2.75rem;
    border: 0;
    background: none;
    color: var(--solune-text-soft);
    font-size: .875rem;
    font-weight: 500;
}
.solune-shop-page #sod_frm.sod_frm_mobile #display_pay_button .btn_cancel:hover { color: var(--solune-text); }

/* 결제수단 — 폰. 그누보드는 UA 로 폰을 가려 mobile/shop/orderform.sub.php 를
   돌리는데, 그쪽 마크업은 PC 와 다르다: fieldset#sod_frm_paysel 이 아니라
   div#m_sod_frm_paysel > ul > li(input + label) 이고, 무통장 입금칸
   (#settle_bank)도 목록 뒤 같은 상자 안에 온다. 삼성페이 클래스도 samsung_pay
   로 다르고 애플페이(폰 전용)가 더 있다. 위 PC 규칙은 전부 .sod_frm_pc 로
   묶여 있어 폰에는 하나도 걸리지 않았다 — 라디오와 글자("삼성페이" …)만 한 줄씩
   세로로 늘어섰다(2026-09-28). basic 의 폰 화면도 두 칸에 로고를 둔다.

   PC 와 같은 두 칸 타일 · 아이콘 · 고른 상태를 여기 따로 적는다. PC 선택자에
   :is() 로 폰을 끼우면 특정도가 바뀌어 PC 쪽 이김 관계가 흔들린다.
   코어 폰 주문서는 이니시스 L.pay · 이니시스 카카오페이 라벨에만 lb_icon 을
   빠뜨렸다(class="inicis_lpay" · "inicis_kakaopay" 뿐). 그래서 타일 규칙의
   label.lb_icon 을 label:is(.lb_icon, .inicis_lpay, .inicis_kakaopay) 로 적는다 —
   :is() 의 가장 센 인자가 클래스 하나라 특정도는 같다(2026-09-29 검수 지적). */
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel { margin-top: .75rem; }
.solune-shop-page #sod_frm.sod_frm_mobile #sod_frm_pt_alert { margin: 0 0 .75rem; color: var(--solune-muted); font-size: .75rem; line-height: 1.5; }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel li {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    float: none;
}
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label:is(.lb_icon, .inicis_lpay, .inicis_kakaopay) {
    display: flex;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: .5rem .5rem .5rem 3.25rem;
    border: 1px solid var(--solune-border);
    border-radius: 9px;
    background-color: var(--solune-surface);
    background-repeat: no-repeat;
    background-position: .75rem 50%;
    color: var(--solune-text);
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    word-break: keep-all;
    transition: border-color .16s ease, background-color .16s ease;
}
/* 기본 결제수단 — 왼쪽 아이콘 + 이름 */
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label.bank_icon { background-image: url('../../../img/pay_icon1.png'); }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label:is(.vbank_icon, .iche_icon) { background-image: url('../../../img/pay_icon2.png'); }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label.hp_icon { background-image: url('../../../img/pay_icon3.png'); background-position: 1.25rem 50%; }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label.card_icon { background-image: url('../../../img/pay_icon4.png'); background-position: .9rem 50%; }
/* 간편결제 — 가운데 로고만. 이름은 낭독기에만 */
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label:is(.samsung_pay, .samsungpay_icon, .naverpay_icon, .kakaopay_icon, .paycopay_icon, .PAYCO, .skpay_icon, .ssgpay_icon, .lpay_icon, .inicis_lpay, .inicis_kakaopay, .KPAY, .PAYNOW, .applepay_icon) {
    overflow: hidden;
    padding-left: .5rem;
    background-position: 50% 50%;
    text-indent: -999px;
}
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label:is(.samsung_pay, .samsungpay_icon) { background-image: url('../../../img/samsungpay.png'); }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label.naverpay_icon { background-image: url('../../../img/ico-default-naverpay.png'); }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label:is(.kakaopay_icon, .inicis_kakaopay) { background-image: url('../../../img/kakao.png'); }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label:is(.paycopay_icon, .PAYCO) { background-image: url('../../../img/payco.png'); }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label.skpay_icon { background-image: url('../../../img/skpay11_icon.png'); background-size: 70px auto; }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label.ssgpay_icon { background-image: url('../../../img/ssgpay_icon.png'); }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label:is(.lpay_icon, .inicis_lpay) { background-image: url('../../../img/lpay_logo.png'); }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label.KPAY { background-image: url('../../../img/kpay.png'); }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label.PAYNOW { background-image: url('../../../img/paynow.png'); }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label.applepay_icon { background-image: url('../../../img/ico-mobile-applepay.png'); background-size: 43px auto; }
/* NHN KCP 네이버페이는 같은 로고가 둘(폰에서는 이름이 "카드" · "머니")이라 로고 아래에 이름을 적는다. */
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label.naverpay_icon.nhnkcp_icon {
    align-items: flex-end;
    padding: 1.75rem .25rem .45rem;
    background-position: 50% 12px;
    font-size: .6875rem;
    text-indent: 0;
}
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label:is(.lb_icon, .inicis_lpay, .inicis_kakaopay):hover { border-color: var(--solune-text); }
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel input:checked + label:is(.lb_icon, .inicis_lpay, .inicis_kakaopay) {
    border-color: var(--solune-text);
    background-color: var(--solune-surface-soft);
    box-shadow: inset 0 0 0 1px var(--solune-text);
    font-weight: 700;
}
.solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel input:focus-visible + label { outline: 2px solid var(--solune-primary); outline-offset: 2px; }
/* 무통장입금을 고르면 나오는 입금 계좌 · 입금자명. PC 의 #settle_bank 와 같은 옅은 상자. */
.solune-shop-page #sod_frm.sod_frm_mobile #settle_bank {
    margin-top: .375rem;
    padding: .875rem;
    border-radius: 9px;
    background: var(--solune-surface-soft);
    color: var(--solune-text);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.5;
    word-break: keep-all;
}
.solune-shop-page #sod_frm.sod_frm_mobile #settle_bank select { width: 100%; }
.solune-shop-page #sod_frm.sod_frm_mobile #settle_bank br { display: none; }
.solune-shop-page #sod_frm.sod_frm_mobile #settle_bank label[for="od_deposit_name"] {
    display: block;
    margin: .75rem 0 .375rem;
    color: var(--solune-muted);
    font-size: .75rem;
    font-weight: 500;
}
.solune-shop-page #sod_frm.sod_frm_mobile #settle_bank #od_deposit_name { width: 100%; }
/* 로고 그림은 흰 바탕을 전제로 그려져 있어 다크에서도 타일만은 밝은 칩으로 둔다(PC 와 같다). */
html[data-theme="dark"] .solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label:is(.lb_icon, .inicis_lpay, .inicis_kakaopay) { background-color: #fff; color: #1b1a17; }
html[data-theme="dark"] .solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel input:checked + label:is(.lb_icon, .inicis_lpay, .inicis_kakaopay) { background-color: #f1f0ec; }
@media (prefers-reduced-motion: reduce) {
    .solune-shop-page #sod_frm.sod_frm_mobile #m_sod_frm_paysel label:is(.lb_icon, .inicis_lpay, .inicis_kakaopay) { transition: none; }
}

/* 8) 주문하기 · 취소.
   위 절은 주 단추를 input[type=submit] 으로 찾는데 코어의 주문하기는
   type="button" 이다. 그래서 주문하기는 skins.css 의 흰 보조 단추 모양을,
   취소 링크(a)는 오히려 초록 바탕을 받아 — 게다가 글자색이 진해 — 글자가
   보이지 않았다. 주문하기를 시안의 54px 채운 단추로, 취소를 조용한 글자로
   되돌린다. skins.css:88 의 (0,3,1) 을 넘도록 id 를 둘 쓴다. */
.solune-shop-page #sod_frm.sod_frm_pc #display_pay_button { display: grid; gap: .25rem; margin-top: 0; }
.solune-shop-page #sod_frm.sod_frm_pc #display_pay_button .btn_submit {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: .75rem;
    background: var(--solune-primary);
    color: var(--color-primary-content, #fff);
    cursor: pointer;
    font-size: .9375rem;
    font-weight: 700;
}
.solune-shop-page #sod_frm.sod_frm_pc #display_pay_button .btn_submit:hover { background: var(--solune-primary-hover); }
.solune-shop-page #sod_frm.sod_frm_pc #display_pay_button .btn01 {
    min-height: 40px;
    border: 0;
    background: none;
    color: var(--solune-text-soft);
    font-size: .8125rem;
    font-weight: 500;
}
.solune-shop-page #sod_frm.sod_frm_pc #display_pay_button .btn01:hover { background: none; color: var(--solune-text); }

@media (max-width: 1023px) {
    .solune-shop-page #sod_frm.sod_frm_pc { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}
@media (max-width: 640px) {
    .solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 tbody { grid-template-columns: minmax(0, 1fr); }
    /* 좁은 폭: 아랫줄 셋을 한 줄에 두면 넘치므로 이름 아래로 한 줄씩 쌓는다. */
    .solune-shop-page #sod_frm.sod_frm_pc #sod_list tbody tr { grid-template-columns: 76px minmax(0, 1fr) max-content; row-gap: .25rem; }
    .solune-shop-page #sod_frm.sod_frm_pc #sod_list .sod_img { grid-row: 1 / span 4; }
    .solune-shop-page #sod_frm.sod_frm_pc #sod_list .sod_img img { width: 64px; height: 64px; }
    .solune-shop-page #sod_frm.sod_frm_pc #sod_list .sod_name { grid-column: 2 / 4; }
    .solune-shop-page #sod_frm.sod_frm_pc #sod_list td:nth-child(3) { grid-column: 2; grid-row: 2; }
    .solune-shop-page #sod_frm.sod_frm_pc #sod_list td:nth-child(5) { grid-column: 2; grid-row: 3; }
    .solune-shop-page #sod_frm.sod_frm_pc #sod_list td.td_dvr { grid-column: 2; grid-row: 4; }
    .solune-shop-page #sod_frm.sod_frm_pc #sod_list td:nth-child(5)::before { content: "적립 "; }
    .solune-shop-page #sod_frm.sod_frm_pc #sod_list td.td_dvr::before { content: "배송 "; }
    .solune-shop-page #sod_frm.sod_frm_pc #sod_list td.td_num { grid-column: 3; grid-row: 2; }
    .solune-shop-page #sod_frm.sod_frm_pc #sod_list td:has(.total_price) { grid-column: 3; grid-row: 3 / span 2; }
    .solune-shop-page #sod_frm.sod_frm_pc .sod_left .tbl_frm01 td:is(:has(#od_zip), :has(#od_b_zip)) { grid-template-columns: minmax(0, 1fr) max-content; }
}

/* --- 개인결제 결제화면 -----------------------------------------------------
   시안 `개인결제 결제화면` 을 따른다. shop/personalpayform.sub.php 는 코어이고
   주문서와 달리 스킨을 부르는 자리도 없어, 손댈 수 있는 것은 CSS 뿐이다.

   코어가 주는 것은 표 하나다. 줄이 [머리줄 · 값줄] 짝으로 번갈아 오고
   상세내용 짝은 pp_content 가 있을 때만 나온다. 그래서 몇 번째 줄인지로
   고르면 상세내용이 없는 개인결제에서 한 칸씩 밀린다. 줄 안에 무엇이
   들었는지로 가른다.

       요약(상세내용 · 결제금액)  tr:not(:has(label)):not(:has(input))
       주문자 정보 이름줄          tr:has(th label)
       주문자 정보 입력줄          tr:has(td input)

   결제금액 두 줄은 "라벨이 있는 첫 줄" 을 기준으로 짚는다 — 값줄은 그 바로
   앞, 머리줄은 두 칸 앞이다. 상세내용이 있든 없든 늘 그 자리다.

   주문서도 form 의 id 가 forderform 이라 그것으로는 이 화면만 고를 수 없다.
   #personal_pay 는 이 화면에만 있으므로 그것을 문패로 쓴다.

   시안에 있으나 낼 수 없는 것: 제목 위 눈썹 글씨, 금액을 라벨과 한 줄에
   두는 것(코어가 머리줄과 값줄을 나눠 놓았다), "주문자 정보" 소제목
   (마크업에 없다 — 대신 요약 상자와 입력칸 사이를 벌려 나눈다). */

/* 결제 한 장짜리 화면이라 본문 폭을 시안(720px)만큼 좁혀 가운데 세운다.
   제목도 같이 좁히지 않으면 글자만 왼쪽으로 튀어나온다. */
body.solune-shop-page:has(#personal_pay) .solune-shop-page-title,
body.solune-shop-page:has(#personal_pay) #forderform { width: min(100%, 44rem); margin-inline: auto; }

/* 두 소제목(개인결제정보 · 결제수단)을 같은 결로. */
body.solune-shop-page:has(#personal_pay) :is(.pesonal, #personal_pay) > h2 {
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--solune-text);
    padding-bottom: .75rem;
    color: var(--solune-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* 표 껍데기를 걷고 줄을 블록으로 세운다. 두 칸짜리 줄(이름 · 휴대폰)만
   나란히 서야 하므로 줄마다 두 칸 격자를 두고, colspan 칸은 통으로 편다. */
body.solune-shop-page:has(#personal_pay) .tbl_frm01 { overflow: visible; border: 0; background: none; }
body.solune-shop-page:has(#personal_pay) .tbl_frm01 table { display: block; width: 100%; min-width: 0; border: 0; margin: 0; }
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tbody { display: block; }
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
}
body.solune-shop-page:has(#personal_pay) .tbl_frm01 :is(th, td) {
    display: block;
    width: auto;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
}
body.solune-shop-page:has(#personal_pay) .tbl_frm01 :is(th, td)[colspan="2"] { grid-column: 1 / -1; }

/* 요약 상자 — 상세내용과 결제금액. 줄마다 좌우 테두리를 이어 붙여 한 상자로
   보이게 한다(줄을 감싸는 요소가 마크업에 없다). */
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:not(:has(label)):not(:has(input)) {
    border-inline: 1px solid var(--solune-border);
    padding-inline: 1.5rem;
}
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:first-child {
    border-top: 1px solid var(--solune-border);
    border-radius: 1rem 1rem 0 0;
    padding-top: 1.25rem;
}
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:not(:has(label)):not(:has(input)) th {
    padding-bottom: .375rem;
    color: var(--solune-muted);
    font-size: .75rem;
    font-weight: 500;
}
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:not(:has(label)):not(:has(input)) td {
    padding-bottom: 1.25rem;
    color: var(--solune-text);
    font-size: .9375rem;
    line-height: 1.55;
    word-break: break-all;
}

/* 결제금액 머리줄 = 라벨이 있는 첫 줄에서 두 칸 앞. */
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:not(:has(label)):not(:has(input)):has(+ tr + tr > th > label) {
    border-top: 1px solid var(--solune-border);
    background: var(--solune-surface-soft);
    padding-top: 1.25rem;
}
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:not(:has(label)):not(:has(input)):has(+ tr + tr > th > label) th {
    color: var(--solune-text);
    font-size: .8125rem;
    font-weight: 600;
}
/* 결제금액 값줄 = 라벨이 있는 첫 줄 바로 앞. 이 화면의 주인공이라 크게. */
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:not(:has(label)):not(:has(input)):has(+ tr > th > label) {
    border-bottom: 1px solid var(--solune-border);
    border-radius: 0 0 1rem 1rem;
    background: var(--solune-surface-soft);
}
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:not(:has(label)):not(:has(input)):has(+ tr > th > label) td {
    color: var(--solune-text);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

/* 주문자 정보. 요약 상자와 붙지 않게 그 뒤에서 한 번 벌린다. */
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:not(:has(label)):not(:has(input)):has(+ tr > th > label) + tr { margin-top: 2.5rem; }
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:has(th label) th {
    padding-bottom: .5rem;
    color: var(--solune-text);
    font-size: .8125rem;
    font-weight: 600;
}
/* 코어는 필수 표시를 낭독기 전용(<strong class="sound_only"> 필수</strong>)
   으로만 둔다. 그 글자를 드러내는 길은 막혀 있다 — default.css 가 .sound_only
   를 !important 로 감추고, 그것을 뒤집으면 사이트 전체 규약을 이 화면에서만
   깨는 셈이다. 대신 시안처럼 라벨 옆에 별을 세운다. 낭독기는 원래의 " 필수"
   를 그대로 읽는다. */
body.solune-shop-page:has(#personal_pay) .tbl_frm01 th label:has(> .sound_only)::after {
    content: "*";
    margin-left: .25rem;
    color: var(--solune-danger, #b5483a);
    font-weight: 700;
}
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:has(td input) td { padding-bottom: 1rem; }
body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:has(td input):last-child td { padding-bottom: 0; }
body.solune-shop-page:has(#personal_pay) .tbl_frm01 .frm_input {
    width: 100%;
    height: 3rem;
    min-height: 3rem;
    border: 1px solid var(--solune-border-strong);
    border-radius: .625rem;
    background-color: var(--solune-surface);
    color: var(--solune-text);
    padding: 0 .875rem;
    font-size: .875rem;
}

/* 결제수단. 코어는 라디오 + 라벨 목록이지만 시안은 네모 칸 넷이 나란히
   선다. 라디오는 지우지 않고 화면 밖으로만 보낸다 — 키보드와 낭독기가
   그대로 쓰고, 고른 표시는 :checked + label 이 맡는다. */
body.solune-shop-page:has(#personal_pay) #personal_pay { margin-top: 2.5rem; }
/* display 를 되돌리는 것이 핵심이다. 주문서와 함께 쓰는 위 규칙이 이 묶음을
   flex 로 두는데, 그러면 안의 목록이 flex 항목이 되어 제 글자만큼만 넓어진다
   — 칸 넷이 82px 짜리 한 줄로 쌓여 있었다. legend("결제방법 선택")는
   default.css 가 이미 낭독기 전용으로 감춘다. */
body.solune-shop-page:has(#personal_pay) #sod_frm_paysel { display: block; border: 0; margin: 0; padding: 0; }
body.solune-shop-page:has(#personal_pay) .pay_way {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr));
    gap: .625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 쓰지 않는 결제수단도 li 는 남는다(코어가 li 를 먼저 찍고 안을 조건부로
   채운다). 빈 칸이 격자에 자리를 차지하지 않게 접는다. */
body.solune-shop-page:has(#personal_pay) .pay_way li { display: block; height: auto; margin: 0; }
body.solune-shop-page:has(#personal_pay) .pay_way li:not(:has(input)) { display: none; }
body.solune-shop-page:has(#personal_pay) .pay_way input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
body.solune-shop-page:has(#personal_pay) .pay_way label {
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid var(--solune-border-strong);
    border-radius: .625rem;
    background: var(--solune-surface);
    color: var(--solune-text);
    cursor: pointer;
    padding: .75rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}
/* 체크상자 흉내를 내던 빈 span. 칸 자체가 고른 표시를 하므로 필요 없다. */
body.solune-shop-page:has(#personal_pay) .pay_way label > span { display: none; }
body.solune-shop-page:has(#personal_pay) .pay_way label:hover { border-color: var(--solune-text); }
body.solune-shop-page:has(#personal_pay) .pay_way input:checked + label {
    border-color: var(--solune-primary);
    background: var(--solune-primary);
    color: var(--color-primary-content, #fff);
}
body.solune-shop-page:has(#personal_pay) .pay_way input:focus-visible + label {
    outline: 2px solid var(--solune-primary);
    outline-offset: 2px;
}
body.solune-shop-page:has(#personal_pay) #personal_pay > p {
    margin: 1rem 0 0;
    color: var(--solune-muted);
    font-size: .8125rem;
    line-height: 1.6;
}

/* 결제하기 · 취소. 시안은 취소를 단추가 아니라 조용한 글자 링크로 둔다.
   id 를 둘 겹쳐야 주문서와 함께 쓰는 #display_pay_button 규칙을 이긴다. */
body.solune-shop-page:has(#personal_pay) #personal_pay #display_pay_button { display: grid; gap: .625rem; margin-top: 2rem; }
body.solune-shop-page:has(#personal_pay) #personal_pay #display_pay_button :is(a, button, input) { width: 100%; }
body.solune-shop-page:has(#personal_pay) #personal_pay #display_pay_button .btn_submit {
    min-height: 3.5rem;
    border: 0;
    border-radius: .625rem;
    background: var(--solune-primary);
    color: var(--color-primary-content, #fff);
    font-size: .9375rem;
    font-weight: 600;
}
body.solune-shop-page:has(#personal_pay) #personal_pay #display_pay_button .btn_submit:hover { background: var(--solune-primary-hover); }
body.solune-shop-page:has(#personal_pay) #personal_pay #display_pay_button .btn01 {
    min-height: 3rem;
    border: 0;
    background: none;
    color: var(--solune-text-soft);
    font-size: .875rem;
    font-weight: 500;
}
body.solune-shop-page:has(#personal_pay) #personal_pay #display_pay_button .btn01:hover { background: none; color: var(--solune-text); }
/* 결제창을 띄우는 동안 나오는 안내. display 는 코어 스크립트가 인라인으로
   다루므로 건드리지 않는다. */
body.solune-shop-page:has(#personal_pay) #display_pay_process {
    margin-top: 2rem;
    color: var(--solune-text-soft);
    font-size: .875rem;
    text-align: center;
}
body.solune-shop-page:has(#personal_pay) #display_pay_process img { margin-right: .375rem; vertical-align: middle; }

@media (max-width: 480px) {
    body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:not(:has(label)):not(:has(input)) { padding-inline: 1.125rem; }
    body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr { gap: 0 .75rem; }
    body.solune-shop-page:has(#personal_pay) .tbl_frm01 tr:not(:has(label)):not(:has(input)):has(+ tr > th > label) td { font-size: 1.5rem; }
}

/* --- 개인결제 결제화면(폰) --------------------------------------------------
   그누보드는 화면 폭이 아니라 UA 로 모바일을 정하므로, 폰에서는 위 화면이
   아니라 mobile/shop/personalpayform.sub.php 가 돈다. 마크업이 아예 달라
   위 규칙은 하나도 걸리지 않는다 — 이름표와 값이 한 줄에 붙고, 결제수단이
   세로로 쌓이고, 취소가 초록 띠로 나오던 그대로였다.

   여기 표는 PC 와 달리 한 줄에 [이름표 · 값] 이 함께 들어 있어 훨씬 다루기
   쉽다. 가르는 기준은 같다 — 라벨이 있으면 입력 줄, 없으면 요약 줄이다.

   m_pv_sod_frm 과 sod_approval_frm 은 모바일 주문서도 쓴다. 이 화면에만
   있는 것은 m_sod_frm_orderer 이므로 그것을 문패로 쓴다. */
body.solune-shop-page:has(#m_sod_frm_orderer) #m_pv_sod_frm { width: min(100%, 44rem); margin-inline: auto; }
body.solune-shop-page:has(#m_sod_frm_orderer) #m_sod_frm_orderer > h2 {
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--solune-text);
    padding-bottom: .75rem;
    color: var(--solune-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl { overflow: visible; border: 0; background: none; }
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl table { display: block; width: 100%; min-width: 0; border: 0; margin: 0; }
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tbody { display: block; }
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tr { display: block; }
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl :is(th, td) {
    display: block;
    width: auto;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
}

/* 요약 상자 — 상세내용과 결제금액. PC 와 같은 모양으로 맞춘다. */
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tr:not(:has(label)) {
    border-inline: 1px solid var(--solune-border);
    padding-inline: 1.125rem;
}
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tr:first-child {
    border-top: 1px solid var(--solune-border);
    border-radius: 1rem 1rem 0 0;
    padding-top: 1.25rem;
}
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tr:not(:has(label)) th {
    padding-bottom: .375rem;
    color: var(--solune-muted);
    font-size: .75rem;
    font-weight: 500;
}
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tr:not(:has(label)) td {
    padding-bottom: 1.25rem;
    color: var(--solune-text);
    font-size: .9375rem;
    line-height: 1.55;
    word-break: break-all;
}
/* 결제금액 줄 = 라벨이 있는 첫 줄 바로 앞. 상세내용이 없어도 늘 그 자리다. */
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tr:not(:has(label)):has(+ tr > th > label) {
    border-top: 1px solid var(--solune-border);
    border-bottom: 1px solid var(--solune-border);
    border-radius: 0 0 1rem 1rem;
    background: var(--solune-surface-soft);
    padding-top: 1.25rem;
}
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tr:not(:has(label)):has(+ tr > th > label) th {
    color: var(--solune-text);
    font-size: .8125rem;
    font-weight: 600;
}
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tr:not(:has(label)):has(+ tr > th > label) td {
    color: var(--solune-text);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

/* 주문자 정보. 폰 표는 한 줄에 이름표와 칸이 같이 있어 줄마다 띄우면 된다. */
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tr:not(:has(label)):has(+ tr > th > label) + tr { margin-top: 2.5rem; }
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tr:has(label) + tr:has(label) { margin-top: 1rem; }
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl tr:has(label) th {
    padding-bottom: .5rem;
    color: var(--solune-text);
    font-size: .8125rem;
    font-weight: 600;
}
body.solune-shop-page:has(#m_sod_frm_orderer) .odf_tbl .frm_input {
    width: 100%;
    height: 3rem;
    min-height: 3rem;
    border: 1px solid var(--solune-border-strong);
    border-radius: .625rem;
    background-color: var(--solune-surface);
    color: var(--solune-text);
    padding: 0 .875rem;
    font-size: .875rem;
}

/* 결제수단. PC 와 같다 — 묶음의 display 를 되돌려야 목록이 폭을 다 받는다. */
body.solune-shop-page:has(#m_sod_frm_orderer) #sod_frm_paysel { display: block; border: 0; margin: 2.5rem 0 0; padding: 0; }
body.solune-shop-page:has(#m_sod_frm_orderer) .pay_way {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr));
    gap: .625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.solune-shop-page:has(#m_sod_frm_orderer) .pay_way li { display: block; height: auto; margin: 0; }
body.solune-shop-page:has(#m_sod_frm_orderer) .pay_way li:not(:has(input)) { display: none; }
body.solune-shop-page:has(#m_sod_frm_orderer) .pay_way input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
body.solune-shop-page:has(#m_sod_frm_orderer) .pay_way label {
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid var(--solune-border-strong);
    border-radius: .625rem;
    background: var(--solune-surface);
    color: var(--solune-text);
    cursor: pointer;
    padding: .75rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}
body.solune-shop-page:has(#m_sod_frm_orderer) .pay_way label > span { display: none; }
body.solune-shop-page:has(#m_sod_frm_orderer) .pay_way input:checked + label {
    border-color: var(--solune-primary);
    background: var(--solune-primary);
    color: var(--color-primary-content, #fff);
}
body.solune-shop-page:has(#m_sod_frm_orderer) .pay_way input:focus-visible + label {
    outline: 2px solid var(--solune-primary);
    outline-offset: 2px;
}
body.solune-shop-page:has(#m_sod_frm_orderer) #m_sod_frm_orderer > p {
    margin: 1rem 0 0;
    color: var(--solune-muted);
    font-size: .8125rem;
    line-height: 1.6;
}

/* 결제등록 · 주문하기 · 취소. 앞의 두 단추는 span 에 싸여 하나만 보인다 —
   숨긴 쪽은 코어가 인라인 style 로 감추므로 여기서 display 를 건드리면
   둘 다 나온다. span 자체만 블록으로 편다. */
body.solune-shop-page:has(#m_sod_frm_orderer) #display_pay_button { display: grid; gap: .625rem; margin-top: 2rem; }
body.solune-shop-page:has(#m_sod_frm_orderer) #display_pay_button > span { display: block; }
body.solune-shop-page:has(#m_sod_frm_orderer) #display_pay_button .btn_submit {
    width: 100%;
    min-height: 3.5rem;
    border: 0;
    border-radius: .625rem;
    background: var(--solune-primary);
    color: var(--color-primary-content, #fff);
    font-size: .9375rem;
    font-weight: 600;
}
body.solune-shop-page:has(#m_sod_frm_orderer) #display_pay_button .btn_submit:hover { background: var(--solune-primary-hover); }
body.solune-shop-page:has(#m_sod_frm_orderer) #display_pay_button .btn_cancel {
    width: 100%;
    min-height: 3rem;
    border: 0;
    background: none;
    color: var(--solune-text-soft);
    font-size: .875rem;
    font-weight: 500;
}
body.solune-shop-page:has(#m_sod_frm_orderer) #display_pay_button .btn_cancel:hover { border-color: transparent; background: none; color: var(--solune-text); }
body.solune-shop-page:has(#m_sod_frm_orderer) #show_progress {
    margin-top: 2rem;
    color: var(--solune-text-soft);
    font-size: .875rem;
    text-align: center;
}
body.solune-shop-page:has(#m_sod_frm_orderer) #show_progress img { margin-right: .375rem; vertical-align: middle; }

/* --- 장바구니 -------------------------------------------------------------
   시안은 위에 주문 단계, 아래로 왼쪽 목록 · 오른쪽 결제 예정 금액 카드다.
   표 자체는 영카트 마크업(.tbl_head03 + td_prd/td_num/td_dvr)을 그대로 쓴다. */
/* 주문 단계 띠. 시안은 셋으로 나눈 상자 하나에 지금 단계만 검게 채운다.
   장바구니와 주문서(solune_shop_order_steps)가 같이 쓴다. */
.solune-order-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 44px; padding: 0; overflow: hidden; border: 1px solid var(--solune-border); list-style: none; }
.solune-order-steps li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 0; color: var(--solune-muted); font-size: 13px; font-weight: 600; }
.solune-order-steps li + li { border-left: 1px solid var(--solune-border); }
.solune-order-step-no { display: inline-grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--solune-border); border-radius: 999px; font-size: 11px; font-weight: 800; }
.solune-order-steps .is-current { background: var(--solune-text); color: var(--solune-surface); font-weight: 700; }
.solune-order-steps .is-current .solune-order-step-no { border-color: var(--solune-surface); background: var(--solune-surface); color: var(--solune-text); }

.solune-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: 2.5rem; }
.solune-cart-main { min-width: 0; }
.solune-shop-page .solune-cart .tbl_head03 { overflow-x: auto; border: 0; border-top: 1px solid var(--solune-text); border-radius: 0; background: none; }
.solune-shop-page .solune-cart .tbl_head03 th { background: none; color: var(--solune-muted); font-size: .78rem; font-weight: 600; }
.solune-shop-page .solune-cart .tbl_head03 :is(th, td) { padding: 1rem .5rem; }
.solune-shop-page .solune-cart .selec_chk { accent-color: var(--solune-primary); }
.solune-shop-page .solune-cart .td_prd { display: flex; align-items: flex-start; gap: 1rem; }
.solune-shop-page .solune-cart .sod_img img { display: block; width: 5rem; height: 5rem; object-fit: cover; }
.solune-shop-page .solune-cart .sod_name { min-width: 0; }
.solune-shop-page .solune-cart .prd_name { color: var(--solune-text); font-size: .875rem; font-weight: 700; }
/* 담은 옵션. 코어 print_item_options() 가 <ul><li>이름 N개 (+0원)</li> 로 낸다.
   시안은 한 줄씩 테두리를 둘러 상품명과 구분한다. */
.solune-shop-page .solune-cart .sod_opt { margin-top: .75rem; }
.solune-shop-page .solune-cart .sod_opt ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.solune-shop-page .solune-cart .sod_opt li { padding: 8px 12px; border: 1px solid var(--solune-border); color: var(--solune-text-soft); font-size: 12.5px; }
.solune-shop-page .solune-cart .sod_option_btn { margin-top: .5rem; }
.solune-shop-page .solune-cart .mod_options { border: 1px solid var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text-soft); cursor: pointer; padding: .3rem .6rem; font-size: .72rem; }
.solune-shop-page .solune-cart .mod_options:hover { border-color: var(--solune-primary); color: var(--solune-primary); }
.solune-shop-page .solune-cart :is(.td_num, .td_dvr) { color: var(--solune-text-soft); font-size: .8125rem; text-align: center; }
.solune-shop-page .solune-cart .td_numbig { color: var(--solune-text); font-size: .9375rem; font-weight: 700; text-align: right; }
/* .tbl_head03 을 한 칸 끼운다. 바로 위 :is(th, td) 규칙이 (0,3,1) 이라 (0,3,0) 이던
   이 줄의 위아래 4rem 이 1rem 으로 덮여, 빈 문구가 머리줄에 붙어 있었다. */
.solune-shop-page .solune-cart .tbl_head03 .empty_table { padding: 4rem 0; color: var(--solune-muted); text-align: center; }
/* 빈 장바구니. 아래 공통 표 규칙이 가로로 굴리라고 표에 최소폭 42rem(672px)을
   주는데, 한 칸짜리 안내 문구도 그 폭 안에서 가운데 정렬돼 390px 폰에서는
   "장바구니에 담긴 상품" 까지만 보이고 뒤가 잘렸다. 담긴 것이 없으면 굴릴
   열도 없으니 최소폭을 풀고, 좁은 화면에서는 빈 열 머리(전체 선택 · 상품 정보 …)도
   접는다. 넓은 화면은 표가 이미 칸에 들어가 모양이 그대로다. */
.solune-shop-page .solune-cart .tbl_head03 table:has(.empty_table) { min-width: 0; }
/* 빈 장바구니의 "상품 전체" 체크박스. 마크업이 상품 수와 상관없이 checked 로 나와,
   고를 것이 없는데 전부 고른 것처럼 보였다(2026-09-26 검수). 넓은 폭은 열 머리를
   그대로 두므로 이 칸만 감춘다 — visibility 라 자리는 남아 열 폭이 흔들리지 않고,
   화면 낭독기에서도 빠진다. */
.solune-shop-page .solune-cart .tbl_head03 table:has(.empty_table) thead .chk_box > * { visibility: hidden; }
@media (max-width: 767px) {
    .solune-shop-page .solune-cart .tbl_head03 table:has(.empty_table) thead { display: none; }
}
.solune-shop-page .solune-cart .btn_cart_del { display: flex; gap: .5rem; margin-top: 1.25rem; }
.solune-shop-page .solune-cart .btn_cart_del button { min-height: 2.5rem; border: 1px solid var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text-soft); cursor: pointer; padding-inline: 1rem; font-size: .8125rem; }
.solune-shop-page .solune-cart .btn_cart_del button:hover { border-color: var(--solune-primary); color: var(--solune-primary); }

/* 결제 예정 금액 카드. 목록이 길어져도 따라오도록 위에 붙여 둔다.
   고정 헤더(57px)에 가리지 않게 그만큼 내려 잡는다. */
.solune-shop-page .solune-cart-summary { position: sticky; top: 5rem; border: 1px solid var(--solune-text); background: var(--solune-surface); padding: 1.5rem; }
/* 시안은 이 자리를 작은 눈썹 글씨로 둔다 — 금액이 주인공이라 제목이 앞설 이유가 없다. */
.solune-cart-summary-title { margin-bottom: 1.25rem; color: var(--solune-muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.solune-cart-summary-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .65rem; margin: 0; }
.solune-cart-summary-list dt { color: var(--solune-muted); font-size: .8125rem; }
.solune-cart-summary-list dd { margin: 0; color: var(--solune-text-soft); font-size: .8125rem; text-align: right; }
.solune-cart-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--solune-border); margin-top: 1.25rem; padding-top: 1.25rem; }
.solune-cart-total span { color: var(--solune-text-soft); font-size: .875rem; font-weight: 700; }
.solune-cart-total strong { color: var(--solune-text); font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; }
/* 스킨이 #sod_bsk_act 로 버튼 색을 잡고 있어(id 가 들어가 더 세다) 여기서도
   같은 id 를 써야 이긴다. */
.solune-shop-page #sod_bsk_act.solune-cart-actions { display: grid; gap: .5rem; margin-top: 1.25rem; }
.solune-shop-page #sod_bsk_act.solune-cart-actions :is(a, button) { display: inline-flex; float: none; width: 100%; min-height: 52px; align-items: center; justify-content: center; border: 1px solid var(--solune-primary); border-radius: 0; background: var(--solune-primary); color: var(--color-primary-content, #fff); cursor: pointer; font-size: .875rem; font-weight: 700; }
.solune-shop-page #sod_bsk_act.solune-cart-actions .btn01 { min-height: 44px; border-color: var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text-soft); font-size: 13px; }
.solune-shop-page #sod_bsk_act.solune-cart-actions .btn_submit:hover { background: var(--solune-primary-hover); border-color: var(--solune-primary-hover); }
.solune-shop-page #sod_bsk_act.solune-cart-actions .btn01:hover { border-color: var(--solune-primary); color: var(--solune-primary); }
.solune-cart-note { margin-top: 1rem; color: var(--solune-muted); font-size: .75rem; }

@media (max-width: 1023px) {
    .solune-cart-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .solune-shop-page .solune-cart-summary { position: static; }
}

/* --- 선택사항수정 창 -------------------------------------------------------
   시안 `Solune 장바구니 옵션수정` 을 따른다. 머리(제목 + 닫기) · 스크롤되는
   본문 · 바닥에 붙는 단추 줄 셋으로 나뉜다.

   속은 코어 cartoption.php 가 준 것을 손대지 않고 받는다. 그래서 여기 규칙은
   대부분 그 마크업(#sit_sel_option · #sit_opt_added · .sit_opt_list ·
   #sit_tot_price · .btn_confirm)을 창에 맞게 다시 앉히는 것이다. 상품 상세도
   같은 마크업을 쓰므로 .solune-cart-modal 을 한 칸 끼워 (0,3,0) 으로 올린다 —
   그래야 shop.css · shop-detail.css 의 상세용 값(0,2,0)을 순서와 상관없이
   이긴다. */
.solune-cart-modal { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2rem); }
.solune-cart-modal[hidden] { display: none; }
.solune-cart-modal-backdrop { position: absolute; inset: 0; border: 0; background: color-mix(in srgb, var(--solune-text) 60%, transparent); }
/* 창이 떠 있는 동안 뒤 화면은 멈춘다. 자리를 잡아 두지 않으면 스크롤막대가
   사라지며 본문이 옆으로 튄다. */
html.solune-cart-modal-open { overflow: hidden; scrollbar-gutter: stable; }

.solune-cart-modal-panel {
    position: relative;
    display: flex;
    width: min(560px, 100%);
    max-height: calc(100vh - 4rem);
    flex-direction: column;
    border: 1px solid var(--solune-text);
    background: var(--solune-surface);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--solune-text) 28%, transparent);
}
.solune-cart-modal-panel:focus { outline: 0; }
.solune-cart-modal-panel:focus-visible { outline: 2px solid var(--solune-primary); outline-offset: 2px; }

.solune-cart-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 20px 20px 18px 28px; border-bottom: 1px solid var(--solune-text); }
.solune-cart-modal-head h2 { margin: 0; color: var(--solune-text); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.solune-cart-modal-close { display: grid; width: 36px; height: 36px; place-items: center; border: 0; background: none; color: var(--solune-text-soft); cursor: pointer; font-size: 18px; }
.solune-cart-modal-close:hover { color: var(--solune-primary); }

.solune-cart-modal-body { min-height: 0; flex: 1; overflow: auto; padding: 24px 28px 0; }

/* 어느 상품을 고치는 중인지. 값은 장바구니 줄에서 가져와 cart.php 가 채운다. */
.solune-cart-modal-item:not(:empty) { display: flex; align-items: center; gap: 14px; padding: 0 0 20px; border-bottom: 1px solid var(--solune-border); }
.solune-cart-modal-thumb { display: block; width: 56px; height: 56px; flex: none; overflow: hidden; background: var(--solune-surface-soft); }
.solune-cart-modal-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.solune-cart-modal-item-text { min-width: 0; }
.solune-cart-modal-item-name { margin: 0; overflow: hidden; color: var(--solune-text); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.solune-cart-modal-item-price { margin: 3px 0 0; color: var(--solune-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* 코어가 폼 맨 위에 두는 제목. 창 머리에 같은 말이 이미 있어 낭독기에만 남긴다. */
.solune-cart-modal #mod_option_frm > h2 { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; padding: 0; white-space: nowrap; }

/* 여기서부터는 코어 cartoption.php 가 준 마크업을 창에 맞게 다시 앉힌다.

   같은 마크업을 상품 상세도 쓰고, 그쪽 값이 shop.css(320) · shop-responsive
   (323) · shop-detail(325) 에 흩어져 있다. shop-pages 는 321 이라 뒤의 둘을
   순서로는 못 이긴다. 그래서 이 구역만 `body.solune-shop-page
   .solune-cart-modal` 로 시작한다 — 상세 쪽은 대부분 `.solune-shop-page X`
   (0,2,0) 이고 id 를 쓰는 것도 (1,1,0) 이라, (0,3,1)/(1,3,1) 로 넘어선다.
   skins.css 의 :is() 단추 규칙(0,3,1)도 여기서 이긴다. */

/* 옵션 고르는 줄. 시안은 칩 단추지만 영카트는 <select> 로 낸다 — 코어
   shop.js 가 .it_option 의 change 에 붙어 있어 모양만 맞추고 요소는 그대로 둔다. */
body.solune-shop-page .solune-cart-modal .option_wr { margin: 22px 0 0; border: 0; padding: 0; background: none; }
body.solune-shop-page .solune-cart-modal .option_wr h3 { margin: 0 0 8px; color: var(--solune-text-soft); font-size: 12px; font-weight: 700; }
/* 추가옵션 줄은 코어가 .get_item_options 가 아니라 .get_item_supply 로
   감싼다(lib/shop.lib.php:1188). 앞에것만 적어 두어 추가옵션은 규칙이 하나도
   걸리지 않았다 — 16px 라벨이 줄 안에 서고 그 옆에 252px 셀렉트가 붙어 있었다.
   상품 상세에서도 같은 일을 겁었다(스킨 style.css 의 같은 주석). 둘을 함께 잡는다. */
body.solune-shop-page .solune-cart-modal :is(.get_item_options, .get_item_supply) { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
body.solune-shop-page .solune-cart-modal :is(.get_item_options, .get_item_supply) label { color: var(--solune-text-soft); font-size: 12px; font-weight: 700; }
body.solune-shop-page .solune-cart-modal :is(.get_item_options, .get_item_supply) select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--solune-border-strong);
    border-radius: 0;
    background: var(--solune-surface);
    color: var(--solune-text);
    cursor: pointer;
    font-size: 13px;
}
/* 못 고르는 칸(앞 옵션을 고르기 전의 둘째 · 셋째 묶음). 브라우저가 칠하던
   회색을 skins.css:67 의 `body.solune-page :is(… select …)` 가 배경·글자색 모두
   !important 로 덮어, 고를 수 있는 칸과 한 점도 다르지 않았다(실측 바탕 · 글자 ·
   테두리 모두 같음). !important 끼리는 특정도로 가르므로 여기서도 !important 를
   맞붙인다. 상품 상세의 셀렉트와 같은 모양이다. */
body.solune-shop-page .solune-cart-modal :is(.get_item_options, .get_item_supply) select:disabled {
    background-color: var(--solune-surface-soft) !important;
    color: var(--solune-muted) !important;
    cursor: not-allowed;
    opacity: 1;
}

/* 고른 옵션 목록. 상세는 이 묶음을 상자로 감싸지만 창 안에서는 상자 속 상자가
   되어 답답하다. 제목 아래 선 하나로 가른다. */
body.solune-shop-page .solune-cart-modal #sit_sel_option { margin: 26px 0 0; border: 0; border-radius: 0; padding: 0; background: none; }
body.solune-shop-page .solune-cart-modal #sit_sel_option > h3 { margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--solune-text); color: var(--solune-text-soft); font-size: 12px; font-weight: 700; }
body.solune-shop-page .solune-cart-modal .solune-cart-modal-count { color: var(--solune-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
body.solune-shop-page .solune-cart-modal #sit_opt_added { margin: 0; padding: 0; list-style: none; }

/* 한 줄 = 왼쪽에 옵션 이름, 오른쪽에 수량 · 금액 · 지우기. 상세는 이 줄을
   격자로 두 단 쌓지만 창은 폭이 있어 한 줄에 편다. */
body.solune-shop-page .solune-cart-modal :is(.sit_opt_list, .sit_spl_list) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--solune-border);
}
body.solune-shop-page .solune-cart-modal #sit_opt_added > li:last-child { border-bottom: 0; }
body.solune-shop-page .solune-cart-modal :is(.sit_opt_list, .sit_spl_list) .opt_name { min-width: 0; border: 0; }
body.solune-shop-page .solune-cart-modal :is(.sit_opt_list, .sit_spl_list) .sit_opt_subj { display: block; overflow: hidden; color: var(--solune-text); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; }

/* 오른쪽 묶음. 코어가 [− 입력 + 금액 지우기] 를 한 <div> 에 담아 보내는데
   테두리는 앞의 셋에만 둘러야 한다. 상세는 그 <div> 전체에 테두리를 주므로
   그것을 끄고 가상 요소로 수량 자리만 그린다. */
body.solune-shop-page .solune-cart-modal :is(.sit_opt_list, .sit_spl_list) .opt_count {
    display: flex;
    position: relative;
    flex: none;
    align-items: center;
    /* 간격을 0 으로 두는 것은 −/입력/+ 를 딱 붙여 92px 로 만들기 위해서다.
       그 셋만 아래 ::before 테두리 안에 들어온다. 금액과 지우기는 각자
       왼쪽 여백으로 띄운다. */
    gap: 0;
    border: 0;
}
body.solune-shop-page .solune-cart-modal :is(.sit_opt_list, .sit_spl_list) .opt_count::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    width: 92px;
    height: 30px;
    border: 1px solid var(--solune-border);
    transform: translateY(-50%);
    pointer-events: none;
}
body.solune-shop-page .solune-cart-modal :is(.sit_opt_list, .sit_spl_list) .opt_count > * { position: relative; z-index: 1; }
body.solune-shop-page .solune-cart-modal .opt_count :is(.sit_qty_minus, .sit_qty_plus) { width: 30px; height: 30px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--solune-text-soft); }
body.solune-shop-page .solune-cart-modal .opt_count .sit_qty_minus { order: -2; }
body.solune-shop-page .solune-cart-modal .opt_count :is(.num_input, .frm_input) { width: 32px; height: 30px; order: -1; border: 0; background: none; color: var(--solune-text); text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.solune-shop-page .solune-cart-modal .opt_count .sit_qty_plus { order: 0; }
body.solune-shop-page .solune-cart-modal .opt_count .sit_opt_prc { order: 1; min-width: 76px; margin: 0 0 0 14px; color: var(--solune-text); text-align: right; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.solune-shop-page .solune-cart-modal .opt_count .sit_opt_del { order: 2; width: 28px; height: 28px; margin: 0 0 0 6px; border: 0; background: none; color: var(--solune-muted); font-size: 14px; }
body.solune-shop-page .solune-cart-modal .opt_count .sit_opt_del:hover { color: var(--solune-danger); }
/* 상세는 글자 크기를 0 으로 죽이고 ::before 로 × 를 그린다. 창에서는 코어가
   준 아이콘을 그대로 쓰므로 그 가짜 × 를 끈다 — 아니면 × 가 둘로 보인다. */
body.solune-shop-page .solune-cart-modal .opt_count .sit_opt_del::before { content: none; }

/* 합계. 코어는 "총 금액 :" 과 숫자를 한 줄에 이어 내보낸다. 좌우로 벌린다. */
body.solune-shop-page .solune-cart-modal #sit_tot_price { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 18px 0 0; padding: 0; color: var(--solune-text); text-align: left; }
body.solune-shop-page .solune-cart-modal #sit_tot_price > span { display: inline; color: var(--solune-text-soft); font-size: 13px; font-weight: 700; }
body.solune-shop-page .solune-cart-modal #sit_tot_price > strong { margin-left: auto; font-size: 24px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* 바닥 단추 줄. 폼 안에 있어야 보내기가 되므로 밖으로 옮기지 않고 붙여 둔다.
   닫기 단추의 글자는 cart.php 가 "취소" 로 채운다 — 코어는 아이콘과 낭독기용
   글자만 주는데, 바닥의 넓은 단추에는 눈에 보이는 말이 있어야 한다. */
/* 받아 온 조각 끝에는 주석과 줄바꿈이 남아 있어, 블록으로 두면 그 공백이
   빈 줄 하나(24px)를 만들어 바닥 단추 아래에 흰 띠로 남는다. flex 상자는
   공백만 있는 텍스트를 항목으로 만들지 않아 그 줄이 생기지 않는다. */
body.solune-shop-page .solune-cart-modal #mod_option_frm,
body.solune-shop-page .solune-cart-modal form[name="foption"] { display: flex; flex-direction: column; }

body.solune-shop-page .solune-cart-modal .btn_confirm {
    display: grid;
    position: sticky;
    z-index: 2;
    bottom: 0;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
    margin: 22px -28px 0;
    padding: 16px 28px 22px;
    border-top: 1px solid var(--solune-border);
    background: var(--solune-surface);
}
body.solune-shop-page .solune-cart-modal .btn_confirm :is(.btn_submit, .btn_close) { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; margin: 0; border-radius: 0; font-size: 14px; }
body.solune-shop-page .solune-cart-modal .btn_confirm .btn_close { order: -1; border: 1px solid var(--solune-border-strong); background: var(--solune-surface); color: var(--solune-text-soft); cursor: pointer; font-weight: 600; }
body.solune-shop-page .solune-cart-modal .btn_confirm .btn_close:hover { border-color: var(--solune-primary); color: var(--solune-primary); }
body.solune-shop-page .solune-cart-modal .btn_confirm .btn_submit { border: 1px solid var(--solune-text); background: var(--solune-text); color: var(--solune-surface); font-weight: 700; }
body.solune-shop-page .solune-cart-modal .btn_confirm .btn_submit:hover { border-color: var(--solune-primary); background: var(--solune-primary); color: var(--color-primary-content, #fff); }

@media (max-width: 480px) {
    .solune-cart-modal-head { padding: 16px 12px 14px 18px; }
    .solune-cart-modal-body { padding: 18px 18px 0; }
    .solune-cart-modal .btn_confirm { margin: 20px -18px 0; padding: 14px 18px 18px; }
}

.solune-shop-page .tbl_head01, .solune-shop-page .tbl_head03 { overflow-x: auto; border: 1px solid var(--solune-border); border-radius: .625rem; background: var(--solune-surface); }
.solune-shop-page .tbl_head01 table, .solune-shop-page .tbl_head03 table { min-width: 42rem; width: 100%; border-collapse: collapse; }
.solune-shop-page .tbl_head01 th, .solune-shop-page .tbl_head01 td, .solune-shop-page .tbl_head03 th, .solune-shop-page .tbl_head03 td { border-bottom: 1px solid var(--solune-border); padding: .8rem .75rem; color: var(--solune-text-soft); font-size: .78rem; text-align: left; }
.solune-shop-page .tbl_head01 th, .solune-shop-page .tbl_head03 th { background: var(--solune-surface-soft); color: var(--solune-text); font-weight: 850; }
.solune-shop-page .tbl_head01 tr:last-child td, .solune-shop-page .tbl_head03 tr:last-child td { border-bottom: 0; }

.solune-shop-footer { border-top: 1px solid var(--solune-border); background: var(--solune-surface); }
.solune-shop-footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 1.25rem 2rem; padding: 2rem 0; }
.solune-shop-footer-brand p { margin-top: .65rem; color: var(--solune-muted); font-size: .75rem; }
.solune-shop-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; justify-content: flex-end; }
.solune-shop-footer-links a { color: var(--solune-muted); font-size: .75rem; }
.solune-shop-footer-links a:hover { color: var(--solune-primary); }
.solune-shop-footer-info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1rem; border-top: 1px solid var(--solune-border); padding-top: 1rem; color: var(--solune-muted); font-size: .7rem; }
.solune-shop-footer-copy { grid-column: 1 / -1; color: var(--solune-muted); font-size: .7rem; }

@media (min-width: 64rem) { .solune-shop-category { left: 2rem; } }

@media (max-width: 1023px) {
    .solune-shop-mainbar { gap: 1rem; }
    .solune-shop-account span { display: none; }
    
    .solune-shop-type-nav a { padding-inline: .5rem; }
    .solune-shop-container { grid-template-columns: 1fr; }
    .solune-shop-sidebar, .solune-shop-container > .shop-content, .solune-shop-container > #aside + .shop-content { grid-column: 1; }
    .solune-shop-sidebar { display: none; }
}

@media (max-width: 639px) {
    .solune-shop-shell { width: calc(100% - 1.5rem); }
    .solune-shop-mainbar { gap: .5rem; }
    .solune-shop-brand img { height: 28px; }
    .solune-shop-search { height: 2.75rem; }
    .solune-shop-actions { gap: .25rem; }
    .solune-shop-search-toggle, .solune-shop-account { width: 2.5rem; padding: 0; }
    /* 카테고리 패널은 여기서 손대지 않는다. 640 아래에서는 단추가 숨고
       (shop-responsive.css) 왼쪽 서랍(같은 파일 맨 아래)이 분류를 맡는다. */
    .solune-shop-type-nav { display: none; }
    .solune-shop-wrapper { min-height: 30rem; }
    .solune-shop-container { display: block; width: 100%; padding: 1rem .75rem 2.5rem; }
    .solune-shop-page-title { margin-bottom: 1rem; }
    .solune-shop-page-title h1 { font-size: 1.4rem; }

.solune-shop-product-section { border-radius: .625rem; padding: .875rem; }
    .solune-shop-section-head { align-items: end; }
    .solune-shop-section-head h2 { font-size: 1rem; }
    .solune-shop-section-head .btn { padding-inline: .5rem; font-size: .68rem; }
    /* 카드 칸 수 · 간격 · 안쪽 여백은 여기서 정하지 않는다. shop.css 가 최종값을
       갖고 좁은 폭의 칸 수는 shop-responsive.css 가 정한다. 한때 여기 있던
       값(2칸 · .6rem · .45rem)은 뒤 파일에 늘 덮여 한 번도 보인 적이 없었다. */
    .solune-shop-page .sct_ct_wrap { padding: .55rem .15rem .15rem; }
    .solune-shop-page .sct_txt { min-height: 2.5rem; }
    .solune-shop-page .sct_txt a { font-size: .76rem; }
    .solune-shop-page .sct_btn { right: .55rem; bottom: 3.8rem; left: .55rem; }
    /* 1fr 이 아니라 minmax(0, 1fr) 이어야 한다. 1fr 의 최소값은 auto — 칸의
       최소 내용 너비다. 그 안의 이미지 갤러리는 #sit_pvi_big 의 aspect-ratio 로
       높이를 받고 사진은 그 높이의 100% 를 채우는데, 칸 너비가 내용에서 오고
       내용 높이가 칸 너비에서 오면 순환이다. Chrome 은 이것을 무한대로 풀어
       상자가 33,554,392px(레이아웃 단위의 최대)가 되고, 그 화면을 찍거나
       스크롤하면 탭이 멈춘다. 넓은 폭 규칙(shop.css)이 minmax(0, …) 인 이유와
       같다. */
    .solune-shop-page #sit_ov_wrap { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: .75rem; }
    .solune-shop-page #sit_title { font-size: 1.3rem; }
    .solune-shop-page #sit_ov_btn { grid-template-columns: 1fr 1fr auto; }
    .solune-shop-footer-inner { display: block; padding: 1.5rem .75rem; }
    .solune-shop-footer-links { justify-content: flex-start; margin-top: 1.25rem; }
    .solune-shop-footer-info { margin-top: 1.25rem; }
    .solune-shop-footer-copy { margin-top: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .solune-shop-header-sticky, .solune-shop-page .solune-shop-mainbar, .solune-shop-page .solune-shop-brand img,
    .solune-shop-category, .solune-shop-search, .solune-shop-page .sct_li, .solune-shop-page .sct_btn { transition: none; }
}

/* Mobile shop shell. The mobile shop entrypoints keep Gnuboard URLs and forms, while the controls use a touch-sized Solune layer. */

/* ━━━━ shop-ondam.css ━━━━
   (옛 파일 · 원래 순서 322 · 원래 조건: 쇼핑몰 화면 · head.sub.php) */

/* Ondam 레이어 — 토큰 · 헤더 · 본문 뼈대 · 상품 카드 · 히어로 · 푸터

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

/* ==========================================================================
   온담(Ondam) 레이어
   ondam-shop.html 레퍼런스를 쇼핑몰에만 입힌다. 사이트 나머지는 Solune
   팔레트를 그대로 쓰므로, 여기서 바꾸는 토큰은 전부 .solune-shop-page
   안쪽에 가둔다. 클래스 이름은 건드리지 않는다 — 스킨과 코어 마크업이
   그대로 붙어 있어서, 값만 갈아끼우면 장바구니·주문서까지 함께 바뀐다.
   ========================================================================== */

.solune-shop-page {
    /* 헤더 눈금. 고정 헤더와 스페이서가 같은 값을 봐야 본문이 움직이지 않는다. */
    --shop-service-h: 41px;
    --shop-mainbar-h: 72px;
    --shop-mainbar-h-shrunk: 56px;

    /* 온담 팔레트. 따뜻한 무채색 + 깊은 숲색 + 테라코타.
       바닥만 시안의 #f7f7f5 대신 흰색이다. 카드가 흰 바탕에 흰색으로 묻히지
       않도록 구역 구분은 --solune-surface-soft(히어로·띠)와 테두리가 맡는다. */
    --solune-page: #ffffff;
    --solune-surface: #ffffff;
    --solune-surface-soft: #f2f2f0;
    --solune-border: #e6e6e2;
    --solune-border-strong: #d7d7d3;
    --solune-text: #1b1a17;
    --solune-text-soft: #4a4a46;
    --solune-muted: #8a8a85;
    --solune-muted-soft: #a5a5a1;
    --solune-primary: #2f5347;
    --solune-primary-hover: #234036;
    --solune-primary-soft: #eef2f0;

    --ondam-ink: #1c1c1a;
    --ondam-sale: #b6543a;
    --ondam-sale-hover: #8f3d29;
    --ondam-star: #c9a227;
    --ondam-hairline: #f2f2f0;

    /* daisyUI 시맨틱 변수. 이 한 뭉치가 btn·badge·tab·table·steps 를 한꺼번에
       온담 색으로 돌린다. 반지름을 0 으로 두는 것이 특히 크다 — 레퍼런스는
       칩과 원형 아이콘 말고는 모서리를 굴리지 않는다. */
    --color-base-100: #ffffff;
    --color-base-200: #ffffff;
    --color-base-300: #e6e6e2;
    --color-base-content: #1b1a17;
    --color-primary: #2f5347;
    --color-primary-content: #ffffff;
    --color-secondary: #b6543a;
    --color-secondary-content: #ffffff;
    --color-accent: #c9a227;
    --color-accent-content: #1b1a17;
    --color-neutral: #1c1c1a;
    --color-neutral-content: #ffffff;
    --radius-box: 0;
    --radius-field: 0;
    --radius-selector: 0;
    --border: 1px;

    background: var(--solune-page);
    color: var(--solune-text);
}

/* 레퍼런스에 어두운 화면은 없다. 헤더에 다크 토글이 있으니 같은 성격
   (따뜻한 무채색 + 같은 강조색)으로 어두운 짝을 만들어 둔다. */
html[data-theme="dark"] .solune-shop-page {
    --solune-page: #14140f;
    --solune-surface: #1c1c18;
    --solune-surface-soft: #24241f;
    --solune-border: #33332d;
    --solune-border-strong: #45453d;
    --solune-text: #f2f2ec;
    --solune-text-soft: #cfcfc7;
    --solune-muted: #9a9a92;
    --solune-muted-soft: #85857d;
    --solune-primary: #7fae9d;
    --solune-primary-hover: #9cc4b5;
    --solune-primary-soft: #24322c;

    --ondam-ink: #0f0f0c;
    --ondam-sale: #e0866a;
    --ondam-sale-hover: #f0a289;
    --ondam-hairline: #2a2a24;

    --color-base-100: #1c1c18;
    --color-base-200: #14140f;
    --color-base-300: #33332d;
    --color-base-content: #f2f2ec;
    --color-primary: #7fae9d;
    --color-primary-content: #14140f;
    --color-secondary: #e0866a;
    --color-secondary-content: #14140f;
    --color-neutral: #0f0f0c;
}

body.solune-page:has(.solune-shop-page) { background: var(--solune-page); }

/* 머리줄 오른쪽 안내 링크(FAQ · 1:1문의 …). 색은 --solune-muted 를 받는데, 쇼핑몰 팔레트의
   그 값(라이트 #8a8a85)은 흰 바탕에서 3.47:1 이라 13px 글자의 최소(4.5:1)에 못 미쳤다.
   커뮤니티 팔레트의 같은 토큰은 4.97:1 이라 쇼핑몰에서만 생긴 일이다. 토큰을 바꾸면
   쇼핑몰의 흐린 글자가 모두 함께 진해지므로, 이 줄만 흐린색과 본문 보조색 사이로
   올린다. 두 토큰에서 계산되므로 다크에서도 제 값을 따라간다. */
.solune-shop-page .solune-community-member-menu { color: color-mix(in oklab, var(--solune-muted) 55%, var(--solune-text-soft)); }

/* 쇼핑몰 안내 링크는 여섯 개라 좁은 화면에서 한 줄에 다 들어가지 않는다.
   숨기면 개인결제·상품문의는 갈 곳이 없어지므로(모바일 카테고리 패널에도
   없다) 가로로 넘겨 보게 두고, 다크 토글만 오른쪽에 남긴다. */
@media (max-width: 639px) {
    .solune-shop-page .solune-community-member-utilities {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: .25rem;
        overflow-x: auto;
        scrollbar-width: none;
        /* 스크롤 막대를 숨겼더니 옆에 링크가 더 있다는 신호가 없어, 390 폭에서
           "쿠폰존" 은 있는 줄도 모르고 지나친다(실측 칸 207 안에 내용 249).
           오른쪽 끝을 흐리게 해 넘겨 볼 것이 있다고 알리고, 끝까지 넘겼을 때
           마지막 링크가 흐림에 가리지 않도록 같은 폭의 끝 여백을 둔다. */
        padding-inline-end: 1.5rem;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    }
    .solune-shop-page .solune-community-member-utilities::-webkit-scrollbar { display: none; }
    .solune-shop-page .solune-community-member-menu .solune-theme-swap { flex: 0 0 auto; }
}

/* 셸 눈금은 커뮤니티(.solune-shell)와 같게 둔다. 레퍼런스는 1240px + 좌우
   20px 이지만, 두 서비스를 오갈 때 좌우 선이 12px 씩 움직이는 것이 먼저
   눈에 걸린다. 값은 community.css 의 .solune-shell 과 한 벌이다 —
   한쪽만 고치지 말 것. */
.solune-shop-page .solune-shop-shell,
.solune-shop-page .solune-shop-container {
    width: min(100%, 80rem);
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 40rem) {
    .solune-shop-page .solune-shop-shell,
    .solune-shop-page .solune-shop-container { padding-inline: 1.5rem; }
}
@media (min-width: 64rem) {
    .solune-shop-page .solune-shop-shell,
    .solune-shop-page .solune-shop-container { padding-inline: 2rem; }
}

/* --- 헤더 ----------------------------------------------------------------
   레퍼런스는 상단 안내바 → 로고·검색·아이콘 → 카테고리 내비 순서다. 우리
   마크업 순서와 같아 값만 맞춘다. 다만 상단 안내바는 레퍼런스의 어두운 띠
   대신 커뮤니티와 같은 서비스 전환 바를 쓴다 — 두 서비스의 머리가 같은
   모양이어야 오가는 것이 한 사이트로 읽힌다.
   헤더 자체의 테두리와 그림자는 shop.css 의 .solune-shop-header 에 있다. */
/* 검색 독이 열려 있는 동안에는 헤더 아래 테두리를 지운다. 독은 헤더 바로
   아래에 붙고 자기 아래 테두리를 이미 갖고 있어서, 그냥 두면 검색바 위아래로
   선이 두 줄 그어진다. 커뮤니티는 community-drawer.css 에서 같은 것을 하고
   있고(.solune-search-active), 표시를 붙이는 곳도 같은
   theme.js 다. */
[data-solune-header].solune-search-active .solune-shop-header {
    border-bottom: 0;
    box-shadow: none;
}

/* 로고는 관리자가 올린 이미지 하나다. 온담 시안의 세리프 낱말 + STORE 대신
   영카트 로고(data/common/logo_img)를 그대로 쓴다 — 관리자에서 갈면 헤더도
   같이 바뀌어야 하기 때문이다. */
.solune-shop-header-sticky {
    position: fixed;
    z-index: 60;
    top: 0;
    right: 0;
    left: 0;
    background: var(--solune-surface);
    /* 미는 것은 transform 이 아니라 top 이다. transform 이 걸린 상자 안에서는
       position:fixed 자손이 뷰포트가 아니라 그 상자를 기준으로 서는데,
       좁은 화면의 카테고리 전면 패널이 바로 그 fixed 다. */
    transition: top .2s ease;
}
.solune-shop-header-spacer { height: calc(var(--shop-service-h) + var(--shop-mainbar-h) + 1px); }
/* 앵커로 뛰었을 때 목적지가 고정 헤더 밑에 깔리지 않게 한다. 헤더는 줄면
   57px 이라 그 값에 여유를 조금 얹는다. */
html:has(.solune-shop-page) { scroll-padding-top: 72px; }
.solune-shop-page .solune-shop-mainbar { min-height: var(--shop-mainbar-h); gap: 40px; transition: min-height .2s ease; }
.solune-shop-page .solune-shop-nav { gap: 32px; }

/* 스크롤하면 헤더가 한 단 낮아진다. 시안은 76 -> 56, 로고는 27 -> 22 다.
   우리 로고는 이미지라 글자 크기 대신 높이를 같은 비율로 줄인다.
   클래스는 theme.js 가 70px 문턱에서 붙인다. */
.solune-shop-page .solune-shop-brand img { transition: height .18s ease; }
.solune-shop-header-sticky.is-shrunk { top: calc(-1 * var(--shop-service-h)); }
.solune-shop-header-sticky.is-shrunk .solune-shop-mainbar { min-height: var(--shop-mainbar-h-shrunk); }
.solune-shop-header-sticky.is-shrunk .solune-shop-brand img { height: 24px; }

/* 검색은 알약 하나. 테두리 대신 옅은 바탕으로 눌러 둔다. 헤더에 박혀 있던
   것을 검색 독으로 옮겼으니 폭은 독이 정한다. */
.solune-shop-page .solune-shop-search {
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--solune-surface-soft);
    padding-inline: 14px;
    gap: 8px;
}
.solune-shop-page .solune-shop-search:focus-within { box-shadow: 0 0 0 1px var(--solune-primary); }
.solune-shop-page .solune-shop-search input { font-size: 13px; }
.solune-shop-page .solune-shop-search button { width: auto; color: var(--solune-muted); background: none; }

/* 아이콘은 지름 38px 원. 호버에서 테두리와 글자가 함께 숲색이 된다.
   시안 `Solune 쇼핑몰 화이트톤 v3` 의 값이다 — 38px 원 · 1px 테두리 ·
   13px 아이콘 · 9px 간격.

   min-height 를 반드시 같이 적는다. shop.css 가 이 셋에 min-height 2.75rem
   (44px)을 깔아 두는데 여기서 height 만 38 로 두면 min 이 이겨 38x44 가 된다.
   모서리가 999px 이라 원이 아니라 세로 타원으로 그려졌다(실측 38x44). */
.solune-shop-page .solune-shop-actions { gap: 9px; }
.solune-shop-page .solune-shop-search-toggle,
.solune-shop-page .solune-shop-account,
.solune-shop-page .solune-shop-cart {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid var(--solune-border);
    border-radius: 999px;
    color: var(--solune-text-soft);
    font-size: 13px;
}
.solune-shop-page .solune-shop-search-toggle:hover,
.solune-shop-page .solune-community-search-control-open .solune-shop-search-toggle,
.solune-shop-page .solune-shop-account:hover,
.solune-shop-page .solune-shop-cart:hover { border-color: var(--solune-primary); color: var(--solune-primary); }
.solune-shop-page .solune-shop-account span { display: none; }

/* 회원 단추의 펼침 메뉴 — daisyUI navbar 예제(icon · indicator · dropdown)를
   따른다. 로그인하면 원 안이 아이콘 대신 프로필 사진(없으면 이니셜)이고,
   누르면 아래로 메뉴가 펼쳐진다. 여닫기는 daisyUI .dropdown 의 :focus-within
   이 하므로 여기서는 모양만 준다. 폰 머리(.solune-shop-mobile-icon)도 같은
   마크업을 쓰므로 단추 클래스가 아니라 -trigger · -list 로 잡는다.
   여기 두는 까닭은 위 단추 블록과 같다 — 이 시트는 장바구니·주문서까지 쇼핑몰
   모든 화면에 실리는데 스킨 style.css 는 그렇지 않다. */
.solune-shop-page .solune-shop-account-menu { position: relative; display: inline-block; }
.solune-shop-page .solune-shop-account-trigger { cursor: pointer; overflow: hidden; border-radius: 50%; font-size: 12px; font-weight: 800; letter-spacing: .02em; } /* 폰 머리의 단추는 둥근 네모지만 아바타는 원이다 */
.solune-shop-page .solune-shop-account-trigger.is-photo { padding: 0; }
/* 사진이 없으면 이니셜 — 커뮤니티 쪽 .solune-avatar 와 같은 옅은 바탕 */
.solune-shop-page .solune-shop-account-trigger:not(.is-photo) { border-color: transparent; background: var(--solune-primary-soft); color: var(--solune-primary); }
.solune-shop-page .solune-shop-account-trigger img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.solune-shop-page .solune-shop-account-trigger:hover,
.solune-shop-page .solune-shop-account-menu.is-open .solune-shop-account-trigger { border-color: var(--solune-primary); color: var(--solune-primary); }
.solune-shop-page .solune-shop-account-trigger:focus-visible { outline: 2px solid var(--solune-primary); outline-offset: 2px; }
/* 검색 독이 열려 있으면 그 독이 회원 메뉴를 덮었다. 둘 다 z-index 70 이지만
   서로 다른 쌓임 맥락에 있어 그 값끼리 겨루지 않는다 — 메뉴는 헤더
   (.solune-shop-header, z 60) 안에 갇혀 있고, 독은 그 헤더의 형제로 서서
   .solune-shop-header-sticky 안에서 70 대 60 으로 이긴다. 그래서 메뉴의 z 를
   아무리 올려도 소용이 없다. 올려야 하는 것은 갇혀 있는 쪽의 맥락, 곧 헤더다.

   메뉴가 열려 있는 동안에만 올린다. 독은 top:100% 라 헤더 아래에 붙어 서로
   겹치지 않으므로 이때 독이 가려지지도 않는다. 열고 닫는 순간의 모양
   (독이 헤더 끝을 8px 덮으며 내려오는 것)은 그대로 둔다. */
.solune-shop-page .solune-shop-header:has(.solune-shop-account-menu:focus-within) { z-index: 80; }

/* 여닫는 display 는 daisyUI 의 .dropdown 규칙이 한다(:focus-within 이 아니면
   none). 닫힐 때 .2s 동안 display 전환(allow-discrete)이 걸려 있어 포커스가
   빠진 직후에도 잠깐 보인다 — 잴 때 이걸 고장으로 착각하지 않도록 적어 둔다.
   이 ul 에 display 를 주는 층 밖 규칙을 새로 쓰면 daisyUI 의 @layer 규칙이
   져서 안 닫히게 되니 주지 않는다. */
.solune-shop-page .solune-shop-account-list {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 70;                      /* 헤더(60) 위 */
    min-width: 11.5rem;
    margin-top: .5rem;
    padding: .375rem;
    list-style: none;
    border: 1px solid var(--solune-border);
    border-radius: .75rem;
    background: var(--solune-surface);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    color: var(--solune-text);
    text-align: left;
}
.solune-shop-page .solune-shop-account-list li { display: list-item; }
.solune-shop-page .solune-shop-account-list a {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 .75rem;
    border-radius: .5rem;
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.solune-shop-page .solune-shop-account-list a:hover,
.solune-shop-page .solune-shop-account-list a:focus-visible { background: var(--solune-primary-soft); color: var(--solune-primary); outline: 0; }
.solune-shop-page .solune-shop-account-who { padding: .375rem .75rem .5rem; margin-bottom: .25rem; border-bottom: 1px solid var(--solune-border); font-size: 12px; color: var(--solune-text-soft); }
.solune-shop-page .solune-shop-account-who strong { color: var(--solune-text); font-weight: 700; }
.solune-shop-page .solune-shop-account-logout { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--solune-border); }
.solune-shop-page .solune-shop-account-logout a { color: var(--solune-text-soft); }
/* 담긴 수. 시안대로 18px 알약을 원의 오른쪽 위 모서리에 3px 걸친다.
   숫자 폭을 고정(tabular-nums)해 1 과 8 이 같은 자리를 차지한다. */
.solune-shop-page .solune-shop-cart-count {
    top: -3px; right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ondam-sale);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 내비는 32px 간격의 맨 링크. 할인은 테라코타로 따로 세운다. */
.solune-shop-page .solune-shop-type-nav { gap: 32px; }
.solune-shop-page .solune-shop-type-nav a {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--solune-text);
    font-size: 15px;
    font-weight: 600;
}
.solune-shop-page .solune-shop-type-nav a:hover { background: none; color: var(--solune-primary); }
.solune-shop-page .solune-shop-type-nav a:last-child { color: var(--ondam-sale); }
.solune-shop-page .solune-shop-type-nav a:last-child:hover { color: var(--ondam-sale-hover); }
.solune-shop-page .solune-shop-category-toggle {
    border-radius: 0;
    background: transparent;
    border-color: var(--solune-text);
    color: var(--solune-text);
    font-size: 13px;
}
.solune-shop-page .solune-shop-category-toggle:hover { background: var(--solune-text); color: var(--solune-surface); }
.solune-shop-page .solune-shop-category-panel { border-radius: 0; box-shadow: 0 18px 42px rgba(27, 26, 23, .1); }

/* 오른쪽 아래의 빈 칸은 선택한 큰 분류에서 실제로 추천하는 상품 네 개를
   보여 주는 자리로 쓴다. 하위 분류 링크와 같은 패널 안에 두되, 상품 카드는
   단순한 미리보기로만 삼아 메뉴를 다시 홈 화면처럼 무겁게 만들지 않는다. */
.solune-shop-page .solune-shop-category-picks {
    margin-top: 28px;
    border-top: 1px solid var(--solune-border);
    padding-top: 18px;
}
.solune-shop-page .solune-shop-category-picks-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.solune-shop-page .solune-shop-category-picks-eyebrow {
    display: block;
    color: var(--solune-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1;
}
.solune-shop-page .solune-shop-category-picks-head h3 {
    margin: 7px 0 0;
    color: var(--solune-text);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.solune-shop-page .solune-shop-category-picks-all {
    flex: none;
    color: var(--solune-muted);
    font-size: 12px;
    white-space: nowrap;
}
.solune-shop-page .solune-shop-category-picks-all:hover,
.solune-shop-page .solune-shop-category-picks-all:focus-visible {
    color: var(--solune-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.solune-shop-page .solune-shop-category-picks-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.solune-shop-page .solune-shop-category-pick {
    display: grid;
    min-width: 0;
    gap: 8px;
    color: var(--solune-text);
    text-decoration: none;
}
.solune-shop-page .solune-shop-category-pick-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--solune-surface-soft);
}
.solune-shop-page .solune-shop-category-pick-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .18s ease;
}
.solune-shop-page .solune-shop-category-pick:hover .solune-shop-category-pick-image img,
.solune-shop-page .solune-shop-category-pick:focus-visible .solune-shop-category-pick-image img {
    transform: scale(1.035);
}
.solune-shop-page .solune-shop-category-pick-name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--solune-text-soft);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.solune-shop-page .solune-shop-category-pick-price {
    color: var(--solune-text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}
.solune-shop-page .solune-shop-category-pick:focus-visible {
    outline: 2px solid var(--solune-primary);
    outline-offset: 4px;
}
.solune-shop-page .solune-shop-category-picks-empty {
    display: flex;
    min-height: 126px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--solune-surface-soft);
    color: var(--solune-muted);
    padding: 18px 20px;
    font-size: 13px;
}
.solune-shop-page .solune-shop-category-picks-empty a {
    flex: none;
    color: var(--solune-primary);
    font-size: 12px;
    font-weight: 750;
}
.solune-shop-page .solune-shop-category-picks-empty a:hover,
.solune-shop-page .solune-shop-category-picks-empty a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 40rem) and (max-width: 63.9375rem) {
    .solune-shop-page .solune-shop-category-split {
        grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
        gap: 0 24px;
    }
    .solune-shop-page .solune-shop-category-picks-list { gap: 8px; }
    .solune-shop-page .solune-shop-category-pick-name { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .solune-shop-page .solune-shop-category-pick-image img { transition: none; }
}

/* --- 본문 뼈대 -----------------------------------------------------------
   레퍼런스의 메인은 사이드바 없이 폭을 다 쓰고, 목록 페이지에만 200px
   사이드바가 붙는다. 우리는 반대(메인에만 aside)라, 메인에서는 aside 를
   흐름에서 빼 아래쪽 공지·고객센터 자리로 내린다. 요소를 지우지는 않는다. */
.solune-shop-page .solune-shop-container { display: flex; flex-direction: column; padding-block: 0 80px; }
.solune-shop-page .shop-content { order: 1; }
.solune-shop-page .solune-shop-sidebar { order: 2; }
.solune-shop-page .solune-shop-wrapper { background: var(--solune-page); }
.solune-shop-page .shop-content { min-width: 0; }

/* 섹션 제목은 가운데 정렬. 눈썹 글씨는 세리프 + 넓은 자간이다. */
.solune-shop-page .solune-shop-product-section {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 60px 0 0;
}
.solune-shop-page .solune-shop-section-head {
    display: block;
    min-height: 0;
    border-bottom: 0;
    margin-bottom: 30px;
    padding-bottom: 0;
    text-align: center;
}
.solune-shop-page .solune-shop-eyebrow {
    margin-bottom: 10px;
    color: var(--solune-muted);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.solune-shop-page .solune-shop-section-head h2 {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.025em;
}
.solune-shop-page .solune-shop-section-sub { margin: 0; color: var(--solune-muted); font-size: 14px; }
.solune-shop-page .solune-shop-section-head .btn {
    margin-top: 4px;
    border: 0;
    background: none;
    color: var(--solune-muted);
    font-size: 13px;
    font-weight: 500;
}
.solune-shop-page .solune-shop-section-head .btn:hover { background: none; color: var(--solune-primary); }

/* --- 상품 카드 -----------------------------------------------------------
   레퍼런스 치수를 그대로 옮긴다. 정사각 이미지 · 흰 바탕 · 1px 테두리 ·
   본문 16/16/18 · 가격줄 · 가는 선 아래 별점과 담기. */
/* 한 줄 개수는 관리자 설정(--sct-cols)을 따르되, 좁은 화면에서는 아래
   미디어쿼리가 덮는다. 인라인으로 못 박지 않는 이유는 theme_functions.php
   의 주석 참고. */
.solune-shop-page .sct_wrap { display: contents; }
/* 카드 상자 · 그림 · 한 줄 설명 · 원래 값은 shop.css 의 .sct_* 에 최종값으로 합쳐져 있다. */
.solune-shop-page .sct_txt { padding: 16px 16px 18px; }
.solune-shop-page .sct_txt { display: block; margin: 0 0 6px; padding: 16px 16px 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--solune-text); }
.solune-shop-page .sct_txt:hover { color: var(--solune-primary); }

.solune-shop-page .sct_icon { position: absolute; right: 10px; top: 10px; display: flex; gap: 4px; }
.solune-shop-page .sct_icon img { width: auto; height: auto; }

/* 우리 스킨이 내보내는 온담식 조각들 */
.solune-shop-page .ondam-card-brand { margin: 0 0 6px; padding: 16px 16px 0; color: var(--solune-muted); font-size: 11px; }

.solune-shop-page .ondam-card-badge {
    position: absolute; right: 10px; top: 10px;
    padding: 5px 8px;
    background: var(--ondam-ink);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}
/* 값 줄과 아래 메타 줄은 반드시 접히게 둔다. 좁은 화면에서 카드 한 칸이
   180px 아래로 내려가면(2열 유지) 할인율 · 판매가 · 정가 세 덩어리가 한 줄에
   안 들어가는데, 접히지 않으면 카드 밖으로 밀려 문서 전체가 가로로 넘친다.
   420px 에서 정가 표시가 53px 삐져나오던 원인이다. */
.solune-shop-page .ondam-card-prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; margin-bottom: 9px; padding: 0 16px; }
.solune-shop-page :is(.ondam-card-off, .ondam-card-now, .ondam-card-was) { min-width: 0; }
.solune-shop-page .ondam-card-off { color: var(--ondam-sale); font-size: 15px; font-weight: 700; }
.solune-shop-page .ondam-card-now { font-size: 15.5px; font-weight: 700; }
.solune-shop-page .ondam-card-was { color: var(--solune-muted-soft); font-size: 12px; text-decoration: line-through; }
.solune-shop-page .ondam-card-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    margin: auto 16px 0;
    border-top: 1px solid var(--ondam-hairline);
    padding: 11px 0 16px;
    color: var(--solune-muted-soft);
    font-size: 11px;
}
.solune-shop-page .ondam-card-star { color: var(--ondam-star); }
.solune-shop-page .ondam-card-add {
    margin-left: auto;
    padding: 5px 9px;
    background: var(--solune-surface-soft);
    color: var(--solune-text-soft);
    font-size: 11px;
    line-height: 1.4;
}
.solune-shop-page .ondam-card-add:hover { background: var(--solune-primary); color: #fff; }

/* --- 히어로 · 타임세일 ---------------------------------------------------
   레퍼런스의 메인 슬라이드는 1920x520 의 조용한 띠다. 파랑 그러데이션을
   걷어내고 종이 같은 무채색으로 바꾼다. */

/* 히어로가 파란 그러데이션이던 시절의 흰 글자 규칙이 위쪽에 남아 있다.
   바탕이 밝아졌으니 눈썹·강조·본문·버튼 색을 여기서 되돌린다. */

/* 첫 화면 배너. 시안 v3 의 첫 줄이 "히어로는 화면 끝까지, 나머지는 1280px
   안으로" 다. 배너만 좌우 끝까지 흘리고 그 아래는 본문 폭을 그대로 둔다.

   높이도 함께 잡는다. 배너 그림이 800x800 정사각인데 폭에 맞춰 늘리고
   있어서 1920 화면에서 첫 화면 하나가 1216px 짜리 정사각이 됐다 — 화면
   하나를 넘는다. 시안은 이 자리를 940px 짜리 띠로 두고 사진을 잘라 담는다
   (background: center/cover). 같은 방식으로 띠 높이를 정하고 object-fit 으로
   자른다. 48vw 는 시안 비율(940/1920)에 맞춘 값이다. */
/* 가로로만 자른다. hidden 과 달리 clip 은 스크롤 상자를 만들지 않아
   세로로 넘치는 것(사이드뷰 · 드롭다운)은 그대로 흘러나온다. 아래 배너가
   화면보다 조금 넓게 깔리는데, 그 남는 만큼을 여기서 자른다. */
.solune-shop-page .solune-shop-wrapper { overflow-x: clip; }

.solune-shop-page .solune-shop-banner {
    /* 좌우로 넘치게 깐 만큼. 배너 안의 글과 표시줄(shop-carousel.css)이 이
       값만큼 안으로 들어와 화면 기준으로 가운데를 맞춘다. */
    --solune-banner-bleed: 20px;
    /* 안쪽에서 바깥으로 빠져나온다. 부모(.shop-content)가 가운데 정렬된
       기둥이라 좌우로 같은 만큼 밀면 화면 끝에 닿는다.

       100vw 는 세로 스크롤바가 자리를 차지하는 브라우저에서 화면 안쪽 폭
       보다 스크롤바만큼 넓다. 그대로 쓰면 배너가 한쪽으로 7px 밀려 반대쪽에
       흰 띠가 생긴다(scrollbar-gutter 를 켜고 실측). 스크롤바보다 넉넉한
       40px 을 더 깔고 위에서 잘라, 어느 쪽에서도 틈이 생기지 않게 한다. */
    width: calc(100vw + var(--solune-banner-bleed) * 2);
    margin-inline: calc(50% - 50vw - var(--solune-banner-bleed));
    margin-top: 0;
    border-radius: 0;
}
.solune-shop-page .solune-shop-banner,
.solune-shop-page .solune-shop-banner .solune-banner-swiper,
.solune-shop-page .solune-shop-banner .swiper-wrapper,
.solune-shop-page .solune-shop-banner .swiper-slide,
.solune-shop-page .solune-shop-banner .swiper-slide > a {
    height: min(940px, 48vw);
    min-height: 260px;
}
.solune-shop-page .solune-shop-banner .swiper-slide > a { display: block; }
/* 늘리지 않고 자른다. 가운데를 남겨야 배너에 글자가 얹혀 있어도 살아남는다. */
.solune-shop-page .solune-shop-banner .solune-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- 카테고리 칩 ---------------------------------------------------------
   원형 견본 + 이름. 호버에서 테두리만 숲색으로 바뀐다. */
/* 레퍼런스는 6칸이지만 분류 수는 사이트마다 다르다. 칸 수를 고정하면 4개일 때
   오른쪽이 휑하게 빈다. 최대 6칸까지 자동으로 나눠 채운다. */
/* 분류 칩 줄. 폭은 Swiper 가 잡으므로 여기서는 격자를 쓰지 않는다.
   좌우 단추를 칸 위에 얹으려고 relative 를 준다. */
.ondam-catrow {
    margin-top: 40px;
}
.ondam-catrow .solune-catrow-swiper { position: relative; overflow: hidden; }
.ondam-catrow .swiper-wrapper { align-items: stretch; }
.ondam-catrow .swiper-slide { box-sizing: border-box; height: auto; }
.ondam-catrow a {
    position: relative;
    display: flex;
    min-height: 146px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border: 1px solid var(--solune-border);
    border-radius: 8px;
    background: var(--solune-surface);
    padding: 18px 8px 16px;
    color: var(--solune-text-soft);
    font-size: 13px;
    font-weight: 650;
    text-align: center;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ondam-catrow a::after {
    position: absolute;
    right: 50%;
    bottom: -1px;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: transparent;
    content: "";
    transform: translateX(50%) scaleX(.5);
    transition: background .18s ease, transform .18s ease;
}
/* 링(0 0 0 1px)은 쓰지 않는다. 칩에 이미 1px 테두리가 있어 링을 얹으면
   그 바로 바깥에 선이 한 줄 더 생겨 2px 이중선으로 보인다. 강조는
   테두리 색만으로 한다 — 시안도 색만 바꾼다.
   키보드 초점 표시는 테마의 전역 :focus-visible 링이 맡는다. */
.ondam-catrow a:hover,
.ondam-catrow a:focus-visible {
    border-color: var(--solune-primary);
    background: var(--solune-surface);
    color: var(--solune-primary);
}
.ondam-catrow a:hover::after,
.ondam-catrow a:focus-visible::after {
    background: var(--solune-primary);
    transform: translateX(50%) scaleX(1);
}
.ondam-catrow a.is-featured {
    border-color: var(--solune-primary);
    color: var(--solune-primary);
}
.ondam-catrow a.is-featured::after { background: var(--solune-primary); transform: translateX(50%) scaleX(1); }
.ondam-catrow .ondam-catrow-icon {
    display: grid;
    width: 58px;
    height: 58px;
    flex: none;
    place-items: center;
    border: 1px solid var(--solune-border);
    border-radius: 50%;
    background: var(--solune-surface-soft);
    color: var(--solune-text-soft);
    font-size: 24px;
    line-height: 1;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.ondam-catrow a:hover .ondam-catrow-icon,
.ondam-catrow a:focus-visible .ondam-catrow-icon,
.ondam-catrow a.is-featured .ondam-catrow-icon {
    border-color: color-mix(in srgb, var(--solune-primary) 38%, var(--solune-border));
    background: var(--solune-primary-soft);
    color: var(--solune-primary);
    transform: translateY(-2px);
}
.ondam-catrow .ondam-catrow-label { max-width: 100%; line-height: 1.35; }

/* --- 후기 · 공지 · 고객센터 ---------------------------------------------- */
/* 포토리뷰. 폭은 Swiper 가 잡으므로 격자를 쓰지 않는다.
   .ondam-review-grid 는 그대로 두고 swiper-wrapper 를 겸한다 — 아래 카드
   규칙들이 이 이름에 걸려 있어 이름을 바꾸면 다 따라 고쳐야 한다. */
.ondam-review-grid { display: flex; }
.solune-review-swiper { position: relative; overflow: hidden; }
.ondam-review-card.swiper-slide { height: auto; }
.ondam-review-card { display: flex; flex-direction: column; border: 1px solid var(--solune-border); background: var(--solune-surface); }
/* 후기 사진. 전에는 빈 div 에 줄무늬만 깔려 있었다. */
.ondam-review-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; background: var(--solune-surface-soft); }
.ondam-review-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--solune-ease, ease); }
.ondam-review-card:hover .ondam-review-thumb img { transform: scale(1.04); }
.ondam-review-body { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.ondam-review-title { margin: 0 0 6px; overflow: hidden; color: var(--solune-text); font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.ondam-review-score { margin: 0 0 8px; color: var(--ondam-star); font-size: 12px; }
.ondam-review-score span { color: var(--solune-muted-soft); }
.ondam-review-text { margin: 0 0 12px; color: var(--solune-text-soft); font-size: 13.5px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ondam-review-meta { display: flex; margin-top: auto; gap: 10px; border-top: 1px solid var(--ondam-hairline); padding-top: 11px; color: var(--solune-muted-soft); font-size: 11px; }
.ondam-review-item { margin: 10px 0 0; overflow: hidden; color: var(--solune-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

.ondam-bottom { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 60px; }
.ondam-notice { border: 1px solid var(--solune-border); background: var(--solune-surface); padding: 26px 28px; }
.ondam-notice .solune-latest > header { margin-bottom: 16px; align-items: baseline; }
.ondam-notice .solune-latest h2 { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.ondam-notice .solune-latest-list > li { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; border-top: 1px solid var(--ondam-hairline); }
.ondam-notice .solune-latest-subject { border: 0; padding: 11px 0; color: var(--solune-text-soft); font-size: 13.5px; }
.ondam-notice .solune-latest-meta { padding: 11px 0; color: var(--solune-muted-soft); font-size: 11px; }
.ondam-notice .solune-latest-meta > span:first-child { display: none; }

.ondam-help { display: flex; flex-wrap: wrap; gap: 30px; background: var(--solune-surface-soft); padding: 26px 28px; }
.ondam-help section { flex: 1; min-width: 170px; }
.ondam-help h3 { margin: 0 0 12px; font-size: 13px; font-weight: 700; }
.ondam-help-tel { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.ondam-help p { margin: 0; color: #6a6a65; font-size: 12px; line-height: 1.7; }
.ondam-help-bank { font-size: 12.5px; line-height: 1.8; white-space: pre-line; }

/* 메인에서 aside 를 아래로 내린다(요소는 남기고 자리만 옮긴다). */
.solune-shop-page .solune-shop-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.solune-shop-page .solune-shop-sidebar-card { border-radius: 0; box-shadow: none; padding: 26px 28px; }
.solune-shop-page .solune-shop-help-card { background: var(--solune-surface-soft); border-color: transparent; }

/* --- 목록 · 상세 · 페이지 제목 -------------------------------------------
   레퍼런스의 목록은 홈 › 주방 › 그릇·접시 빵부스러기 아래 제목 26px 과
   설명 한 줄, 그 아래 정렬·개수 줄이 온다. */
.solune-shop-page .solune-shop-page-title { margin: 32px 0 26px; border-bottom: 0; padding-bottom: 0; }
.solune-shop-page .solune-shop-page-title h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.025em; }

.solune-shop-page #sct_sort,
.solune-shop-page .sct_sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.solune-shop-page #sct_sort a,
.solune-shop-page .sct_sort a {
    border: 1px solid var(--solune-border-strong);
    background: var(--solune-surface);
    padding: 7px 12px;
    color: var(--solune-text-soft);
    font-size: 12.5px;
}
.solune-shop-page #sct_sort a:hover,
.solune-shop-page .sct_sort a:hover { border-color: var(--solune-primary); color: var(--solune-primary); }

/* 페이지 넘김은 shop-pages.css 의 .pg_* 에 최종값이 있다. */

/* --- 푸터 ----------------------------------------------------------------
   레퍼런스 푸터는 조용한 무채색 띠다. */
.solune-shop-page .solune-shop-footer { border-top: 1px solid var(--solune-border); background: var(--solune-surface-soft); }
.solune-shop-page .solune-shop-footer-inner { padding-block: 48px; }
.solune-shop-page .solune-shop-footer-brand img { display: none; }
.solune-shop-page .solune-shop-footer-name { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--solune-text); }
.solune-shop-page .solune-shop-footer-links a { color: var(--solune-text-soft); font-size: 13px; }
.solune-shop-page .solune-shop-footer-links a:hover { color: var(--solune-primary); }
/* 사이트 정보(사업자 정보). 위 .solune-shop-footer-info 는 span 셋을 가로로
   흘리는 flex 였는데, 이제 제목과 목록(dl)이 위아래로 선다. 선 · 위 여백은
   그 규칙 것을 그대로 쓰고 흐름만 푼다. 목록 모양은 커뮤니티 푸터와 같은
   default.css 의 .solune-footer-company-* 가 맡는다(2026-09-28). */
.solune-shop-page section.solune-shop-footer-info { display: block; padding-top: 1.25rem; }

/* --- daisyUI 보정 --------------------------------------------------------
   버튼과 배지는 daisyUI 를 그대로 쓰되, 레퍼런스처럼 각지고 낮게 만든다.
   반지름은 위 토큰에서 이미 0 이라 여기서는 굵기와 높이만 손본다. */
.solune-shop-page .btn { font-weight: 600; letter-spacing: -.01em; }
.solune-shop-page .btn-primary:hover { background: var(--solune-primary-hover); border-color: var(--solune-primary-hover); }
.solune-shop-page .badge { font-weight: 600; }
.solune-shop-page .countdown { font-variant-numeric: tabular-nums; }

/* ━━━━ shop-responsive.css ━━━━
   (옛 파일 · 원래 순서 323 · 원래 조건: 쇼핑몰 화면 · head.sub.php) */

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

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

/* --- 좁은 화면 ----------------------------------------------------------- */
/* 한 줄 헤더는 로고·카테고리·유형 링크·아이콘 셋이 같은 줄을 나눠 쓴다.
   1024 아래에서는 32px 간격이 남지 않아 유형 링크가 아이콘 위로 올라탄다.
   간격부터 줄이고, 그래도 모자라는 860 아래에서는 유형 링크를 접는다.
   접어도 갈 곳은 남는다 — 카테고리 패널과 홈의 유형 구역이 같은 자리다. */
@media (max-width: 1023px) {
    .solune-shop-page .solune-shop-mainbar { gap: 20px; }
    .solune-shop-page .solune-shop-nav { gap: 16px; }
    .solune-shop-page .solune-shop-type-nav { gap: 14px; }
    .solune-shop-page .solune-shop-type-nav a { font-size: 13px; }
}
@media (max-width: 860px) {
    .solune-shop-page .solune-shop-type-nav { display: none; }
}
/* 더 좁아지면 카테고리 단추와 유형 링크(.solune-shop-nav)를 통째로 접는다.
   그 자리는 로고 왼쪽의 햄버거가 맡아 왼쪽 서랍(이 파일 맨 아래)을 연다 —
   손가락에는 hover 가 없어 얹어서 여는 큰 패널이 맞지 않는다.
   메인바 눈금은 햄버거 · 로고 · 오른쪽 아이콘의 세 칸이 된다.
   헤더 눈금도 여기서 줄인다 — 토큰은 위 .solune-shop-page 블록과 같은
   특정도라 뒤에 와야 이긴다. */
@media (max-width: 639px) {
    .solune-shop-page { --shop-mainbar-h: 60px; --shop-mainbar-h-shrunk: 52px; }
    .solune-shop-page .solune-shop-nav { display: none; }
    .solune-shop-page .solune-shop-mainbar { grid-template-columns: auto auto minmax(0, 1fr); }
    .solune-shop-page .solune-shop-actions { justify-self: end; }
}

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

/* --- 목록 페이지 마무리 --------------------------------------------------
   영카트가 이미 내보내는 요소를 온담 모양으로 바꾼다. 빵부스러기는
   #sct_location 이 이미 있어서 새 마크업을 넣지 않는다. */
/* 낱말 사이와 아래 여백은 시안(상품 상세.html)의 눈금이다 — 6 과 36.
   낱말마다 높이가 달라(집 24 · 이름 28 · 기호 11) 줄이 위로 쏠리므로
   가운데로 모은다. 이 값들의 주인은 여기 하나로 둔다 — 스킨 style.css 에도
   같은 선언을 두었더니 이 시트가 나중에 실려(순서 323 대 0) 그쪽이 늘 지는
   죽은 규칙이 됐다. */
.solune-shop-page #sct_location {
    align-items: center;
    gap: 6px;
    /* 위 20 은 머리와 이 줄 사이를 띄우는 값이다(2026-09-22 지시). */
    margin: 20px 0 36px;
    color: var(--solune-muted-soft);
    font-size: 12px;
}
.solune-shop-page #sct_location a,
.solune-shop-page #sct_location .go_home { color: var(--solune-muted-soft); }
.solune-shop-page #sct_location a:hover { color: var(--solune-primary); }
.solune-shop-page #sct_location select { border-radius: 0; }

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

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

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

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

/* --- 좁은 화면(640px 미만)의 왼쪽 서랍 ---------------------------------------
   시안 C:/design/shop_html2/index.html 을 따른다.

   640 아래에서는 헤더의 카테고리 단추(마우스를 얹어 여는 큰 패널)를 접고,
   로고 왼쪽에 햄버거 하나만 둔다. 누르면 daisyUI drawer 가 왼쪽에서 나온다.
   여닫는 것은 체크박스(#solune-shop-drawer)라 JS 없이도 된다 — JS 는
   분류 목록을 옮겨 적고(js/theme.shop.drawer.js) 키보드와 Esc 만 거든다.

   서랍에는 상품 유형과 분류 전체가 들어간다. 분류는 큰 분류마다 접었다
   펴는 <details> 라 열두 분류가 한 화면에 들어온다.

   이 파일에 두는 까닭 — 시안은 shop-drawer.css 를 따로 두었지만 새 CSS
   파일은 만들지 않기로 했고, 쇼핑몰 스킨의 style.css 는 장바구니 · 주문서 ·
   개인결제처럼 스킨을 안 부르는 화면에 실리지 않는다. 서랍은 모든 쇼핑몰
   화면에 있어야 하므로 그 전부가 싣는 이 파일 맨 뒤에 붙인다. 위의 640
   눈금(메인바 auto auto 1fr)과도 한 파일이라 순서가 어긋날 일이 없다. */

/* --- 헤더의 햄버거 ------------------------------------------------------- */
/* 넓은 화면에는 없다. display:none 이면 그리드 칸도 차지하지 않아 로고가
   그대로 첫 칸이다. */
.solune-shop-drawer-toggle { display: none; }

@media (max-width: 639px) {
    .solune-shop-drawer-toggle {
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 0;
        background: none;
        color: var(--solune-text);
        cursor: pointer;
        font-size: 18px;
    }
    .solune-shop-drawer-toggle:hover,
    .solune-shop-drawer-toggle:focus-visible { color: var(--solune-primary); }
}

/* --- 서랍 ----------------------------------------------------------------- */
/* daisyUI 의 .drawer-side 는 z-index 10 이라 고정 헤더(60)와 카테고리 패널
   (100) 아래로 깔린다. 맨 위로 올린다. */
.solune-shop-drawer-side { z-index: 210; }
.solune-shop-drawer-side .drawer-overlay { border: 0; padding: 0; }

/* 머리는 제자리, 목록만 스크롤한다. 배경은 bg-base-100 대신 테마 표면색 —
   다크의 base-100 은 초록기가 돌아 헤더와 어긋난다. */
.solune-shop-drawer-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(20rem, 86vw);
    height: 100dvh;
    border-right: 1px solid var(--solune-border);
    background: var(--solune-surface);
    box-shadow: 16px 0 36px color-mix(in srgb, var(--solune-text) 20%, transparent);
    overscroll-behavior: contain;
}

/* 머리의 높이는 좁은 화면의 메인바(--shop-mainbar-h: 60px)와 같다. 서랍이
   열릴 때 로고가 헤더의 로고 자리에서 그대로 이어져 보인다. */
.solune-shop-drawer-head {
    display: flex;
    min-height: var(--shop-mainbar-h, 60px);
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--solune-border);
    padding: 0 6px 0 16px;
}
.solune-shop-drawer-brand { display: inline-flex; min-width: 0; align-items: center; color: var(--solune-text); }
.solune-shop-drawer-brand img { display: block; width: auto; height: 26px; }
.solune-shop-drawer-close {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--solune-muted);
    cursor: pointer;
    font-size: 18px;
    transition: color .16s ease;
}
.solune-shop-drawer-close:hover,
.solune-shop-drawer-close:focus-visible { color: var(--solune-text); }

.solune-shop-drawer-nav {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 8px 24px;
    scrollbar-color: var(--solune-border-strong) transparent;
    scrollbar-width: thin;
}

/* --- 목록 ----------------------------------------------------------------- */
/* daisyUI .menu 를 쓴다. 폭이 fit-content 라 서랍에 맞춰 편다. 두 벌(유형 ·
   분류)을 실선 하나로 나눈다. 온담 시안대로 모서리는 굴리지 않는다.
   (CLAUDE.local.md 는 서랍에 .menu 를 쓰지 말라고 하는데, 그 까닭이던
   행 폭 21px 초과와 들여쓰기 레일 무너짐은 아래에서 padding 과 margin 을
   직접 다시 적어 막았다. 시안이 이 구조를 쓰고 있어 그대로 따른다.) */
.solune-shop-drawer-menu { width: 100%; padding: 8px 0; font-size: 15px; }
.solune-shop-drawer-menu + .solune-shop-drawer-menu { border-top: 1px solid var(--solune-border); }
.solune-shop-drawer-menu .menu-title {
    padding: 10px 12px 4px;
    color: var(--solune-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

/* 첫 줄 — 상품 유형 링크와 큰 분류 이름. 손가락 크기(44px)로 세운다.
   daisyUI 는 행을 grid + align-content:flex-start 로 그려서 min-height 로
   키우면 글자가 위에 붙는다. 세로 가운데로 내린다. */
.solune-shop-drawer-menu li > a,
.solune-shop-drawer-menu li > details > summary {
    min-height: 44px;
    align-content: center;
    border-radius: 0;
    padding: 6px 12px;
    color: var(--solune-text);
    font-weight: 600;
}
.solune-shop-drawer-menu li > a:hover,
.solune-shop-drawer-menu li > a:focus-visible,
.solune-shop-drawer-menu li > details > summary:hover,
.solune-shop-drawer-menu li > details > summary:focus-visible {
    background: var(--solune-surface-soft);
    color: var(--solune-primary);
}
.solune-shop-drawer-menu li > details[open] > summary { color: var(--solune-primary); }

/* 펼친 하위 분류. daisyUI 가 왼쪽에 얇은 레일을 긋는다. 첫 줄은 "전체 보기"
   — 큰 패널의 .solune-shop-category-all 과 같은 색이다. */
.solune-shop-drawer-menu li > details > ul { margin: 2px 0 8px 14px; padding-left: 8px; }
.solune-shop-drawer-menu li > details > ul a {
    min-height: 40px;
    align-content: center;
    border-radius: 0;
    padding: 4px 10px;
    color: var(--solune-text-soft);
    font-size: 14px;
    font-weight: 400;
}
.solune-shop-drawer-menu li > details > ul a:hover,
.solune-shop-drawer-menu li > details > ul a:focus-visible {
    background: var(--solune-surface-soft);
    color: var(--solune-text);
}
.solune-shop-drawer-menu li > details > ul a.solune-shop-drawer-all { color: var(--solune-primary); font-weight: 600; }
.solune-shop-drawer-menu li > details > ul a.solune-shop-drawer-all:hover,
.solune-shop-drawer-menu li > details > ul a.solune-shop-drawer-all:focus-visible { color: var(--solune-primary); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .solune-shop-drawer-side,
    .solune-shop-drawer-side > *,
    .solune-shop-drawer-close { transition: none; }
}

/* ━━━━ shop-carousel.css ━━━━
   (옛 파일 · 원래 순서 324 · 원래 조건: 쇼핑몰 화면 · head.sub.php) */

/* 쇼핑몰 — 캐러셀과 분류 칩 줄 (Swiper)

   gnu_theme4 의 쇼핑몰 작업에서 옮겨 왔다. 저쪽은 shop.css 한 파일에
   이어 붙였는데 여기는 800줄에서 잘라 조각으로 나눠 두었으므로 새
   파일로 받는다. 저쪽에서 이 내용은 파일 맨 끝에 있었다 — 앞의 규칙을
   덮어 쓰는 자리다. 그래서 head.sub.php 의 목록에서도 shop-responsive
   다음에 싣는다. 순서를 바꾸면 덮어 쓰던 것이 덮이지 않는다.

   Swiper 는 theme_functions.php 의 solune_swiper_assets() 가 싣고,
   저작권 고지는 THIRD-PARTY-NOTICES.md 에 있다. */

/* --- 다크에 남은 밝은 바탕 ---

   영카트 스킨(skin/shop/basic/style.css)은 상자마다 background:#fff 를
   박아 둔다. 라이트에서는 테마 표면색과 같아 티가 안 나지만, 다크에서는
   흰 바탕이 그대로 남고 그 위에 밝은 글자가 얹혀 대비가 1.1:1 까지
   떨어진다 — 글자가 사라진다. 글자색만 토큰으로 바꾸고 배경은 스킨에
   맡겨 둔 자리들이라, 배경도 토큰으로 돌린다.

   새 화면에서 글자가 안 보이면 여기부터 본다. 색을 토큰으로 바꿀 때는
   글자와 배경을 늘 같이 옮긴다. */
.solune-shop-page :is(#sps > ol > li,
                       #sps_sch .sch_wr,
                       #sit_ov_from, #sit_siblings, #sit_rel, #sit_tab .tab_con,
                       .btn_wish_num, .review_detail) {
    background: var(--solune-surface);
}

/* 아래 둘은 코어가 id 로 잡아 둔 자리라 무게를 맞춰 준다
   (#sit_pvi_big #popup_item_image · #sit_tab .item_use_count). */
.solune-shop-page #sit_pvi_big #popup_item_image {
    border-color: var(--solune-border);
    background: var(--solune-surface);
    color: var(--solune-muted);
}

.solune-shop-page #sit_tab :is(.item_use_count, .item_qa_count) {
    background: var(--solune-surface-soft);
    color: var(--solune-text-soft);
}

/* 쿠폰존의 구역 제목은 위 테두리 한 줄만 쓰는 자리라 바탕이 없어야 한다. */
.solune-shop-page .couponzone_list h2 { background: transparent; }

/* --- 캐러셀 (Swiper) ---

   메인 배너 · 상품 상세 이미지 · 관련상품 세 곳에 쓴다. Swiper 기본 CSS 는
   CDN 에서 오고 여기서는 온담 결에 맞추는 것만 얹는다.

   Swiper 는 --swiper-* 라는 제 변수로 색과 크기를 받는다. 클래스를 덮어쓰기
   보다 그 변수를 우리 토큰으로 채우는 쪽이 업그레이드에 강하다. */
.solune-shop-page .swiper {
    --swiper-theme-color: var(--solune-primary);
    --swiper-pagination-color: var(--solune-primary);
    --swiper-pagination-bullet-inactive-color: var(--solune-text);
    --swiper-pagination-bullet-inactive-opacity: .25;
    --swiper-pagination-bullet-size: .5rem;
    --swiper-pagination-bullet-horizontal-gap: .25rem;
}

/* 메인 배너 */
.solune-shop-page #main_bn { position: relative; margin: 0; border: 0; }
.solune-shop-page .solune-banner-swiper { overflow: hidden; background: var(--solune-surface-soft); --solune-banner-progress: 0; }
.solune-shop-page .solune-banner-slide { position: relative; overflow: hidden; }
.solune-shop-page .solune-banner-img { display: block; width: 100%; height: auto; }

/* 사진이 머무는 동안 아주 천천히 다가온다(켄 번즈). 활성 슬라이드에만 걸고,
   물러나는 슬라이드는 녹아 사라지는 중이라 곧바로 제자리로 되돌린다 —
   되돌아가는 움직임까지 보이면 되레 어수선하다. */
.solune-shop-page .is-multi .solune-banner-img { transform: scale(1); transition: none; will-change: transform; }
.solune-shop-page .is-multi .swiper-slide-active .solune-banner-img { transform: scale(1.08); transition: transform 8s linear; }

/* 사진 위의 글. 시안처럼 왼쪽에서 오는 밝은 막으로 글자 자리를 만든다.
   막 색은 표면색이라 다크에서는 어두운 막이 되고 글자는 밝아진다.
   클릭은 통과시킨다 — 진짜 링크는 사진을 감싼 <a> 다. */
.solune-shop-page .solune-banner-caption {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    /* 배너는 화면보다 넘치게 깔린다(shop-ondam.css 의 --solune-banner-bleed).
       그만큼 안으로 들어와야 글이 화면 기준으로 가운데에 선다 — 안 그러면
       좁은 화면에서 왼쪽 글자가 잘린다(390 에서 x=-4 실측). */
    padding-inline: var(--solune-banner-bleed, 0px);
    pointer-events: none;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--solune-surface) 96%, transparent) 0%,
        color-mix(in srgb, var(--solune-surface) 90%, transparent) 34%,
        color-mix(in srgb, var(--solune-surface) 50%, transparent) 56%,
        transparent 78%);
}
.solune-shop-page .solune-banner-swiper { --solune-banner-gutter: 1rem; }
@media (min-width: 40rem) { .solune-shop-page .solune-banner-swiper { --solune-banner-gutter: 1.5rem; } }
@media (min-width: 64rem) { .solune-shop-page .solune-banner-swiper { --solune-banner-gutter: 2rem; } }
/* 글과 표시줄의 좌우 여백은 본문 셸(.solune-shop-container, shop-ondam.css)과
   같은 눈금이다 — 1rem / 640px 1.5rem / 1024px 2rem. 다른 값을 쓰면 글의
   왼쪽 선이 아래 분류 칩과 몇 px 어긋난다(768 에서 8px 실측). */
.solune-shop-page .solune-banner-caption-inner {
    display: flex;
    width: min(100% - var(--solune-banner-gutter) * 2, 1216px);
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(.5rem, 1.2vw, 1.5rem);
    margin-inline: auto;
    /* 아래 표시줄이 서는 자리만큼 글을 위로 올린다. */
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
/* 아래 글자색 규칙들은 body · #main_bn · 클래스 셋을 물어 (1,4,1) 로 올린다.
   skins.css:168 의 `body.solune-shop-page :is(#gnb, #main_bn, #main_bn
   .owl_pager, …) :is(h1, …, span, …):not(.a, .b, .c)` 가 :is() 안에서 가장
   센 인자(#main_bn .owl_pager)의 값을 가져가고 :not() 도 클래스 하나를
   보태 (1,3,2) 가 되기 때문이다. 그보다 가벼운 규칙은 전부 지고, 단추
   글자가 검은 바탕 위에 회색(text-soft)으로 앉아 거의 보이지 않았다
   (실측 rgb(74,74,70)). (1,3,1) 로 올려 봤을 때도 원소 수 하나 차이로
   졌다 — 무게를 셀 때 :not() 과 :is() 안의 원소까지 센다. */
body.solune-shop-page #main_bn .solune-banner-slide .solune-banner-caption-inner .solune-banner-eyebrow {
    color: var(--solune-muted);
    font-size: clamp(.75rem, .9vw, .875rem);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
}
body.solune-shop-page #main_bn .solune-banner-slide .solune-banner-caption-inner .solune-banner-title {
    display: block;
    max-width: 18ch;
    color: var(--solune-text);
    font-size: clamp(1.75rem, 4.6vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.06;
    text-wrap: balance;
}
body.solune-shop-page #main_bn .solune-banner-slide .solune-banner-caption-inner .solune-banner-cta {
    display: inline-flex;
    height: clamp(2.5rem, 2.9vw, 3.5rem);
    align-items: center;
    gap: .625rem;
    margin-top: .25rem;
    padding: 0 clamp(1.1rem, 1.7vw, 2rem);
    background: var(--solune-text);
    color: var(--solune-surface);
    font-size: clamp(.875rem, 1vw, 1rem);
    font-weight: 600;
}

/* 글이 한 줄씩 떠오른다. 슬라이드가 활성이 되면 눈썹글 → 제목 → 단추 순서로
   조금씩 늦춰 나타나고, 물러날 때는 늦춤 없이 함께 사라진다. */
.solune-shop-page .is-multi .solune-banner-caption-inner > * {
    opacity: 0;
    transform: translateY(18px);
    /* 물러날 때의 값이다 — 사진이 녹는 900ms 보다 먼저 사라진다. */
    transition: opacity .35s ease, transform .35s ease;
}
.solune-shop-page .is-multi .swiper-slide-active .solune-banner-caption-inner > * {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
/* 첫 화면에서 글이 1초 가까이 비어 있었다. 늦춤을 절반으로 줄이되 순서는 남긴다. */
.solune-shop-page .is-multi .swiper-slide-active .solune-banner-caption-inner > :nth-child(1) { transition-delay: .15s; }
.solune-shop-page .is-multi .swiper-slide-active .solune-banner-caption-inner > :nth-child(2) { transition-delay: .3s; }
.solune-shop-page .is-multi .swiper-slide-active .solune-banner-caption-inner > :nth-child(3) { transition-delay: .45s; }

/* 아래 표시줄 — 막대와 "01 / 06". 시안대로 본문 기둥 폭 안에 세운다. */
.solune-shop-page .solune-banner-foot {
    position: absolute;
    z-index: 5;
    right: var(--solune-banner-bleed, 0px);
    bottom: clamp(1rem, 2vw, 2.25rem);
    left: var(--solune-banner-bleed, 0px);
    display: flex;
    /* 절대배치라 100% 는 left/right 를 뺀 자리가 아니라 배너 폭(넘친 것까지)
       기준이다. 넘친 만큼을 여기서도 빼야 좁은 화면에서 표시줄이 본문 기둥과
       같은 자리에 선다(390 에서 398px 로 삐져나오던 것). */
    width: min(100% - var(--solune-banner-gutter) * 2 - var(--solune-banner-bleed, 0px) * 2, 1216px);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-inline: auto;
    pointer-events: none;
}
.solune-shop-page .solune-banner-foot > * { pointer-events: auto; }
body.solune-shop-page #main_bn .solune-banner-foot .solune-banner-foot-right .solune-banner-count {
    /* 오른쪽 아래는 밝은 막이 닿지 않는 자리라 사진 위에 바로 선다. 얇은 표면
       알약을 깔아 어떤 사진 위에서도 읽히게 한다. */
    padding: .2rem .6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--solune-surface) 78%, transparent);
    color: var(--solune-text);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    backdrop-filter: blur(6px);
}
.solune-shop-page .solune-banner-count-sep { margin: 0 .3em; }
.solune-shop-page .solune-banner-foot-right { display: flex; align-items: center; gap: .5rem; }
/* 자동 넘김 멈춤/재생. 마우스를 올려 두면 멎지만 손가락과 키보드에는 그 길이
   없다 — 저절로 바뀌는 것은 멈출 수 있어야 한다(WCAG 2.2.2). */
.solune-shop-page #main_bn .solune-banner-play {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--solune-text) 14%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--solune-surface) 78%, transparent);
    color: var(--solune-text);
    font-size: .7rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
}
.solune-shop-page #main_bn .solune-banner-play:hover { background: var(--solune-surface); }
.solune-shop-page #main_bn .solune-banner-play[hidden] { display: none; }
/* 멈춘 동안에는 채움 막대가 멎어 있으니 그것으로도 알 수 있지만, 단추 모양도 바꾼다. */
.solune-shop-page .solune-banner-play .fa-play { display: none; margin-left: 2px; }
.solune-shop-page .is-paused .solune-banner-play .fa-play { display: inline; }
.solune-shop-page .is-paused .solune-banner-play .fa-pause { display: none; }
/* 멈춘 동안 사진도 그 자리에 선다. */
.solune-shop-page .is-multi.is-paused .swiper-slide-active .solune-banner-img { transition: none; }

@media (prefers-reduced-motion: reduce) {
    .solune-shop-page .is-multi .solune-banner-img,
    .solune-shop-page .is-multi .solune-banner-caption-inner > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* 좌우 단추. Swiper 기본 화살표 대신 우리 아이콘 단추를 쓴다.
   과녁은 44px 를 지킨다 — 화면 위에 떠 있어 잘못 누르기 쉬운 자리다. */
.solune-shop-page .solune-banner-nav {
    position: absolute;
    z-index: 5;
    top: 50%;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--solune-text) 12%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--solune-surface) 88%, transparent);
    color: var(--solune-text);
    cursor: pointer;
    font-size: 1.1rem;
    transform: translateY(-50%);
    transition: background .16s, color .16s;
}

/* 좌우 자리는 아래 표시줄(.solune-banner-foot)과 같은 셈을 쓴다 — 배너는
   화면 끝까지 넘치지만 화살표는 본문 기둥의 왼쪽·오른쪽 선에 맞춰 서야
   막대·쪽수와 한 세로선에 놓인다. 넘친 폭까지 빼는 것도 같은 까닭이다.
   기둥이 화면만큼 넓어지는 좁은 화면에서는 max() 가 1rem 을 지킨다. */
.solune-shop-page .solune-banner-prev {
    left: max(1rem, calc(50% - min(100% - var(--solune-banner-gutter) * 2 - var(--solune-banner-bleed, 0px) * 2, 1216px) / 2));
}
.solune-shop-page .solune-banner-next {
    right: max(1rem, calc(50% - min(100% - var(--solune-banner-gutter) * 2 - var(--solune-banner-bleed, 0px) * 2, 1216px) / 2));
}
/* 좁은 화면에서는 띠가 260px 뿐이라 화살표가 글과 단추 위에 얹힌다(390 에서
   왼쪽 화살표가 "자세히 보기"를 가렸다). 거기서는 화살표를 접는다 — 손으로
   밀고, 막대를 누르고, 키보드로 넘기는 길은 그대로다. */
@media (max-width: 39.9375rem) {
    .solune-shop-page .solune-banner-nav { display: none; }
}

.solune-shop-page .solune-banner-nav:hover {
    background: var(--solune-surface);
    color: var(--solune-primary);
}

/* 막대 표시. Swiper 는 .swiper-pagination 을 창 아래 가운데에 절대배치하는데
   자리는 .solune-banner-foot 이 잡으므로 그것을 끈다. 활성 막대는
   --solune-banner-progress(0~1, 스킨 스크립트가 자동 넘김 남은 시간으로
   넘겨 준다)만큼 왼쪽부터 찬다. */
.solune-shop-page .solune-banner-pagination {
    position: static;
    display: flex;
    width: auto;
    gap: 7px;
    bottom: auto !important;
    transform: none;
}
.solune-shop-page .solune-banner-pagination .swiper-pagination-bullet {
    position: relative;
    width: 34px;
    height: 3px;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    background: color-mix(in srgb, var(--solune-text) 28%, transparent);
    opacity: 1;
}
.solune-shop-page .solune-banner-pagination .swiper-pagination-bullet::after {
    position: absolute;
    inset: 0;
    background: var(--solune-text);
    transform: scaleX(0);
    transform-origin: left;
    content: "";
}
.solune-shop-page .solune-banner-pagination .swiper-pagination-bullet-active::after {
    transform: scaleX(var(--solune-banner-progress, 1));
}
/* 좁은 화면. 막대 여섯(34px) + 쪽수 + 멈춤 단추가 한 줄에 안 들어가(320 에서
   343 > 288) 쪽수가 꺾였다. 막대를 22px 로 줄인다 — 6 x 22 + 5 x 7 = 167px.
   이 규칙은 위 막대 규칙과 무게가 같아 반드시 그 뒤에 있어야 이긴다. */
@media (max-width: 39.9375rem) {
    .solune-shop-page .solune-banner-pagination .swiper-pagination-bullet { width: 22px; }
}

/* 슬라이드가 하나뿐이면 Swiper 가 스스로 단추를 잠근다. 잠긴 것은 감춘다. */
.solune-shop-page .swiper-button-lock,
.solune-shop-page .swiper-pagination-lock { display: none; }

/* 상품 상세 이미지 갤러리.
   #sit_pvi_big 은 aspect-ratio:1 인 정사각 상자다. 그 안을 Swiper 가 꽉
   채우게 하고, 사진은 잘리지 않게 contain 으로 둔다. */
.solune-shop-page #sit_pvi_big .solune-sit-gallery { width: 100%; height: 100%; }
.solune-shop-page #sit_pvi_big .swiper-slide { display: block; }
.solune-shop-page #sit_pvi_big .swiper-slide > a { display: block; width: 100%; height: 100%; }
.solune-shop-page #sit_pvi_big .swiper-slide img { width: 100%; height: 100%; object-fit: contain; }

/* 좌우 단추는 배너와 같은 모양이되 상자가 작으니 조금 줄인다. */
.solune-shop-page :is(.solune-sit-prev, .solune-sit-next) { width: 2.25rem; height: 2.25rem; font-size: .95rem; }
.solune-shop-page .solune-sit-prev { left: .5rem; }
.solune-shop-page .solune-sit-next { right: .5rem; }

/* 썸네일 줄. ul 이 그대로 swiper-wrapper 라 flex 는 Swiper 가 만든다. */
.solune-shop-page .solune-sit-thumbs { width: 100%; margin-top: .75rem; }
.solune-shop-page #sit_pvi_thumb { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.solune-shop-page #sit_pvi_thumb > li { width: auto; margin: 0; }
.solune-shop-page #sit_pvi_thumb .img_thumb {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.solune-shop-page #sit_pvi_thumb img {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid var(--solune-border);
    border-radius: 0;
    object-fit: cover;
    transition: border-color .16s;
}
/* 지금 보고 있는 썸네일. Swiper 가 thumbs 짝에 이 클래스를 붙여 준다. */
.solune-shop-page #sit_pvi_thumb .swiper-slide-thumb-active img { border-color: var(--solune-text); }
.solune-shop-page #sit_pvi_thumb .img_thumb:focus-visible img { border-color: var(--solune-primary); }

/* 관련상품. 한 칸 마크업은 목록과 같으므로 폭만 Swiper 에 맡긴다. */
.solune-shop-page .solune-relation-swiper { position: relative; overflow: hidden; }
.solune-shop-page .solune-relation-swiper .sct_li { width: auto; height: auto; margin: 0; }
.solune-shop-page :is(.solune-relation-prev, .solune-relation-next) { width: 2.25rem; height: 2.25rem; font-size: .95rem; }
.solune-shop-page .solune-relation-prev { left: .25rem; }
.solune-shop-page .solune-relation-next { right: .25rem; }

/* 배너 위의 표시는 한때 흰 점이었다. 지금은 위 "막대 표시" 절이 맡고, 막대는
   사진 위 밝은 막 위에 서므로 글자색을 따른다. */

/* --- 분류 칩 줄의 넘김 표시 ---
   화살표 두 개와 막대를 칩 아래 한 덩어리로 모은다. */
.solune-shop-page .solune-catrow-pager {
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 1rem;
    margin-top: 18px;
}

.solune-shop-page .solune-catrow-nav {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    place-items: center;
    border: 1px solid var(--solune-border);
    border-radius: 999px;
    background: var(--solune-surface);
    color: var(--solune-text-soft);
    cursor: pointer;
    font-size: .95rem;
    transition: border-color .16s, background .16s, color .16s;
}

.solune-shop-page .solune-catrow-nav:hover {
    border-color: var(--solune-primary);
    background: var(--solune-primary-soft);
    color: var(--solune-primary);
}

/* 끝에 닿으면 Swiper 가 disabled 클래스를 붙인다. 눌러도 아무 일이
   없다는 것을 눈으로 알 수 있게 흐리게 둔다. */
.solune-shop-page .solune-catrow-nav.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

.solune-shop-page .solune-catrow-nav.swiper-button-disabled:hover {
    border-color: var(--solune-border);
    background: var(--solune-surface);
    color: var(--solune-text-soft);
}

/* 어디쯤 보고 있는지 알려 주는 막대. Swiper 의 scrollbar 를 쓰되 기본
   회색 대신 우리 토큰으로 칠한다. */
.solune-shop-page .solune-catrow-scrollbar {
    position: relative;
    width: 100%;
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: var(--solune-border);
    cursor: grab;
}

.solune-shop-page .solune-catrow-scrollbar:active { cursor: grabbing; }

.solune-shop-page .solune-catrow-scrollbar .swiper-scrollbar-drag {
    border-radius: 999px;
    background: var(--solune-primary);
}

/* 분류가 한 줄에 다 들어가면 Swiper 가 단추와 막대를 잠근다. 통째로 감춘다. */
.solune-shop-page .solune-catrow-pager:has(.swiper-scrollbar-lock) { display: none; }

@media (max-width: 639px) {
    .ondam-catrow {
        margin-top: 24px;
    }

    .ondam-catrow a {
        min-height: 128px;
        padding: 14px 6px;
    }

    .ondam-catrow .ondam-catrow-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ondam-catrow a,
    .ondam-catrow a::after,
    .ondam-catrow .ondam-catrow-icon {
        transition: none;
    }
}

/* 포토리뷰의 좌우 단추. */
.solune-shop-page :is(.solune-review-prev, .solune-review-next) { width: 2.25rem; height: 2.25rem; font-size: .95rem; }
.solune-shop-page .solune-review-prev { left: .25rem; }
.solune-shop-page .solune-review-next { right: .25rem; }

/* 아주 좁은 화면(320px 대). 상품 카드를 두 열로 두면 한 칸이 100px 남짓이라
   별점 · 리뷰수 · 담기가 접혀도 자리가 모자라 카드 밖으로 밀린다. 한 열로
   내린다. 실제 휴대폰은 UA 로 모바일 스킨을 받지만, PC 스킨을 좁게 보는
   경우(창 줄이기 · 분할 화면)에도 가로로 밀리지 않아야 한다. */
@media (max-width: 380px) {
    .solune-shop-page .sct { grid-template-columns: minmax(0, 1fr); }

    /* 헤더 아이콘 셋도 이 폭에서는 간격을 줄여야 들어간다. */
    .solune-shop-actions { gap: .25rem; }
}

/* ── 진열 줄 Swiper (히트 · 최신 · 추천 · 할인 · 인기) ─────────────────

   시안 `Solune 쇼핑몰 화이트톤 v3` 의 '많이 보고 계신 상품' 줄을 따른다.
   머리 오른쪽에 42px 네모 화살표 둘, 그 아래 카드가 한 줄로 이어진다.
   시안은 카드 216px 에 간격 20px 인데, 우리는 폭에 따라 칸 수를 바꾸므로
   너비는 Swiper 가 정하고 여기서는 모양만 맞춘다.

   격자용 규칙(--sct-cols 로 칸을 나누는 것)이 그대로 걸리면 Swiper 가
   계산한 너비를 덮는다. .swiper-wrapper 가 붙은 줄에서만 격자를 끈다. */
body.solune-shop-page .solune-shop-swiper { overflow: hidden; }
body.solune-shop-page .solune-shop-swiper .sct.swiper-wrapper {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.solune-shop-page .solune-shop-swiper .sct.swiper-wrapper > .sct_li {
    width: auto;
    height: auto;
    margin: 0;
}

/* 머리 오른쪽 화살표. 시안은 지난 방향이 옅고 갈 수 있는 방향이 진하다 —
   Swiper 가 붙이는 disabled 클래스로 그 상태를 그대로 낸다. */
body.solune-shop-page .solune-shop-swiper-nav { display: flex; gap: 8px; }
body.solune-shop-page :is(.solune-shop-swiper-prev, .solune-shop-swiper-next) {
    display: grid;
    width: 42px;
    height: 42px;
    flex: none;
    place-items: center;
    border: 1px solid var(--solune-text);
    background: var(--solune-surface);
    color: var(--solune-text);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
body.solune-shop-page :is(.solune-shop-swiper-prev, .solune-shop-swiper-next):hover {
    background: var(--solune-text);
    color: var(--solune-surface);
}
body.solune-shop-page :is(.solune-shop-swiper-prev, .solune-shop-swiper-next):focus-visible {
    outline: 2px solid var(--solune-primary);
    outline-offset: 2px;
}
body.solune-shop-page :is(.solune-shop-swiper-prev, .solune-shop-swiper-next).swiper-button-disabled {
    border-color: var(--solune-border);
    background: var(--solune-surface);
    color: var(--solune-muted);
    cursor: default;
}
/* 한 줄에 다 들어가면 넘길 것이 없다. 화살표를 통째로 감춘다. */
body.solune-shop-page .solune-shop-product-section:has(.swiper-button-lock) .solune-shop-swiper-nav { display: none; }

/* 머리는 시안 '많이 보고 계신 상품' 그대로다 — 왼쪽에 눈썹과 제목, 오른쪽
   끝에 화살표, 그 아래로 얇은 선 하나. 한때는 가운데 정렬 위에 화살표를
   얹으면 축이 둘이 된다고 보고 제목 아래 가운데에 두었는데, 시안대로
   좌우로 갈라 달라는 요청을 받아 바꾼다.

   화살표가 있는 줄에만 건다. 넘길 것이 없는 줄은 오른쪽에 놓을 것도 없어
   가운데 정렬 그대로가 맞다.

   묶는 <div> 를 새로 넣지 않고 flex 줄바꿈으로 세운다. 부제가 없는 줄도
   있어서(많이 보고 계신 상품), 격자로 행을 고정하면 그 줄에 빈 행의 간격이
   남는다. 눈썹과 부제에만 100% 를 줘 각자 한 줄을 차지하게 하면 부제가
   없을 때는 그 줄이 아예 생기지 않는다. 치수는 시안 값이다 —
   아래 여백 20 · 선 아래 24 · 좌우 간격 20 · 눈썹과 제목 사이 9. */
body.solune-shop-page .solune-shop-product-section:has(.solune-shop-swiper-nav) .solune-shop-section-head {
    display: flex;
    position: relative;   /* 진행 막대가 이 상자의 아래 선 위에 겹쳐 선다 */
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--solune-border);
    text-align: left;
}
body.solune-shop-page .solune-shop-product-section:has(.solune-shop-swiper-nav) .solune-shop-eyebrow {
    order: 1;
    flex: 1 0 100%;
    margin: 0 0 9px;
}
body.solune-shop-page .solune-shop-product-section:has(.solune-shop-swiper-nav) .solune-shop-section-head h2 {
    order: 2;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
}
body.solune-shop-page .solune-shop-product-section:has(.solune-shop-swiper-nav) .solune-shop-section-head .btn {
    order: 3;
    flex: none;
    margin: 0;
}
/* 오른쪽으로 미는 것은 화살표에 건다. 제목이 길어 화살표가 다음 줄로
   넘어가는 좁은 폭에서도 오른쪽 끝에 서게 하려는 것이다. 같은 줄에 설
   때는 제목이 이미 flex-grow 로 남는 자리를 먹어 이 여백이 하는 일이
   없다 — 넘어간 줄에서만 쓰인다. */
body.solune-shop-page .solune-shop-product-section:has(.solune-shop-swiper-nav) .solune-shop-swiper-nav {
    order: 4;
    flex: none;
    margin: 0 0 0 auto;
    justify-content: flex-end;
}
body.solune-shop-page .solune-shop-product-section:has(.solune-shop-swiper-nav) .solune-shop-section-sub {
    order: 5;
    flex: 1 0 100%;
    margin: 9px 0 0;
}

/* 진행 막대. 점이나 숫자를 새로 얹는 대신 머리 아래에 이미 있는 1px 선을
   트랙으로 쓴다 — 표시가 하나 느는 것이 아니라 있던 선이 일을 하나 더 하는
   셈이라, 시안의 담백한 머리가 그대로 남는다. 장수가 많아도 눈금이 늘지
   않는 것도 12장짜리 줄에 맞다.

   Swiper 는 이 상자에 swiper-pagination-progressbar 와 방향 클래스를 붙이고
   안쪽에 채움 <span> 을 만들어 scaleX 로 늘인다. 번들 CSS 가 그 상자를
   `top: 0; height: 4px; background: rgba(0,0,0,.25)` 로 두므로, 아래쪽에
   겹치려면 top 을 되돌려야 한다 — bottom 만 줘서는 top 이 이긴다.

   막대는 선 위에 1px 씩 걸치게 2px 로 두고 양끝을 둥글린다. 색은 눈썹
   글씨와 같은 --solune-primary 다. 새 색을 만들지 않는다. */
body.solune-shop-page .solune-shop-swiper-progress {
    position: absolute;
    z-index: 1;
    top: auto;
    right: 0;
    bottom: -1px;
    left: 0;
    width: auto;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: none;
}
body.solune-shop-page .solune-shop-swiper-progress .swiper-pagination-progressbar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--solune-primary);
    transform: scale(0);
    transform-origin: left top;
}
/* 넘길 것이 없는 줄에는 Swiper 가 lock 을 붙인다. 화살표와 같이 감춘다. */
body.solune-shop-page .solune-shop-swiper-progress.swiper-pagination-lock { display: none; }

/* 마지막 한 장은 반쯤 걸쳐 옅게 둔다. 뒤에 더 있다는 것을 화살표 말고
   그림으로도 알려 주려는 것이다. 몇 번째가 걸쳐 있는지는 Swiper 가
   안다 — watchSlidesProgress 를 켜면 화면에 조금이라도 걸친 칸에
   swiper-slide-visible, 통째로 들어온 칸에 swiper-slide-fully-visible 을
   붙인다. 그 둘의 차가 곧 반쯤 나온 칸이다.

   반쯤 걸치라고 정한 줄에만 건다. 칸이 딱 맞아떨어지는 줄에서는 마지막
   칸이 0.5px 차이로 fully-visible 을 놓쳐, 멀쩡히 다 보이는 카드가 옅어진다.

   "걸침" 하나로는 모자란다 — 오른쪽 끝이라는 조건이 더 있어야 한다. 카드 폭이
   204.727px(5.5칸 나눗셈)이라 한 칸 옮길 때마다 소수점이 쌓여, 두 칸 뒤에는
   맨 왼쪽 카드가 -0.02px 에 선다. Swiper 는 그것도 "온전히 안 보임"으로 봐
   fully-visible 을 떼고, 그러면 왼쪽 카드까지 옅어졌다. 뒤에 보이는 형제가
   더 없는 칸만 잡으면 왼쪽 끝은 절대 걸리지 않는다. loop 가 실제 <li> 를
   옮겨 잇는 방식이라 DOM 순서가 곧 화면 순서다.

   흐려지는 것에도 전환을 주되 모션 축소에서는 끈다. shop-pages.css 의
   축소 블록은 .sct_li 를 잡지만 여기가 더 세서 그쪽으로는 못 끈다. */
body.solune-shop-page .solune-shop-swiper[data-solune-swiper-peek] .swiper-slide-visible:not(.swiper-slide-fully-visible):not(:has(~ .swiper-slide-visible)) { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
    body.solune-shop-page .solune-shop-swiper .swiper-slide { transition: opacity .28s ease; }
}

@media (max-width: 47.5rem) {
    body.solune-shop-page :is(.solune-shop-swiper-prev, .solune-shop-swiper-next) { width: 36px; height: 36px; }
}

/* ━━━━ shop-detail.css ━━━━
   (옛 파일 · 원래 순서 325 · 원래 조건: 쇼핑몰 화면 · head.sub.php) */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 수정·삭제는 글쓴이와 관리자에게만 보인다. 본문 아래 작은 단추 둘로 둔다.
   한때는 테두리도 바탕도 없는 11.5px 글자였는데, 본문과 구별이 안 돼
   누를 수 있는 것인지 알기 어려웠다. 후기 접기 단추(.solune-review-toggle)
   와 같은 결로 맞추되 높이는 한 칸 낮춘 28 이다(웹 WCAG 2.2 AA 의 타깃
   최소는 24 CSS px 이므로 넉넉하다).

   상품문의의 같은 자리(.sit_qa_cmd)에는 테마 규칙이 아예 없어 코어 .btn01
   모양이 그대로 나오고 있었다. 마크업이 같으니 함께 잡는다.

   삭제는 되돌릴 수 없으므로 올렸을 때만 경고색으로 바꾼다. 평소에도
   빨갛게 두면 화면에 경고가 늘 떠 있는 꼴이 되어 뜻이 닳는다. */
.solune-shop-page :is(.sit_use_cmd, .sit_qa_cmd) { display: flex; gap: .5rem; margin-top: .75rem; }
.solune-shop-page :is(.sit_use_cmd, .sit_qa_cmd) a {
    display: inline-flex;
    height: 28px;
    align-items: center;
    border: 1px solid var(--solune-border);
    border-radius: .5rem;
    background: var(--solune-surface);
    color: var(--solune-text-soft);
    padding: 0 .625rem;
    font-size: .6875rem;
    line-height: 1;
}
.solune-shop-page :is(.sit_use_cmd, .sit_qa_cmd) a:hover,
.solune-shop-page :is(.sit_use_cmd, .sit_qa_cmd) a:focus-visible {
    border-color: var(--solune-text);
    color: var(--solune-text);
}
.solune-shop-page :is(.sit_use_cmd, .sit_qa_cmd) :is(.itemuse_delete, .itemqa_delete):hover,
.solune-shop-page :is(.sit_use_cmd, .sit_qa_cmd) :is(.itemuse_delete, .itemqa_delete):focus-visible {
    border-color: var(--solune-danger);
    color: var(--solune-danger);
}

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

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

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

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

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

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

.solune-shop-page .sit_admin {
    position: absolute;
    z-index: 1;
    /* 빵부스러기 줄과 가운데를 맞춘 값이다. 그 줄은 shop-responsive.css 에서
       위 여백 20 을 받고 높이가 40 이라 가운데가 상자 기준 40 이고, 톱니는
       36 이라 40 - 18 = 22 다. 그 줄의 여백을 고치면 이 값도 같이 고친다 —
       절대배치라 줄을 따라 내려오지 않는다(한때 줄만 20 내려가 톱니가 18px
       위에 남았다). */
    top: 22px;
    right: 0;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    text-align: right;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.solune-shop-page :is(.sit_opt_list, .sit_spl_list) .sit_opt_subj { grid-column: 1 / -1; }
/* 원본 순서는 [이름, 금액, 수량상자] 라 그대로 두면 금액이 왼쪽에 온다.
   칸을 못 박아 수량은 왼쪽, 금액은 오른쪽으로 보낸다. */
/* 값은 자리를 세로로 맞춘다(tabular-nums) — 줄마다 자릿수가 달라 숫자가
   들쭉날쭉하던 것이 선다. 굵기는 700 에서 600 으로 한 단 내린다: 이 줄에서
   가장 굵어야 하는 것은 아래 합계이지 줄마다의 값이 아니다.
   괄호는 js/shop.js:402 가 글자째 넣는 것이라 CSS 로는 걷지 못한다. */
.solune-shop-page :is(.sit_opt_list, .sit_spl_list) .sit_opt_prc {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    color: var(--solune-text);
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 수량 조절은 한 상자로 붙인다 — 테두리 하나 안에 − 숫자 ＋.

   테두리를 감싸는 div 가 아니라 그 안의 셋(감소 · 입력 · 증가)이 나눠 갖는다.
   div 에 두면 같은 div 안에 있는 삭제(×)까지 상자 안에 들어와 수량 조작의
   일부처럼 보이고 실수로 눌리기 쉬웠다. 셋만 두르면 삭제는 저절로 상자 밖
   오른쪽에 남는다 — 아래 .sit_opt_del 주석이 원래 노리던 모양이다. */
.solune-shop-page :is(.sit_opt_list, .sit_spl_list) > div {
    grid-column: 1;
    grid-row: 2;
    gap: 0;
    align-items: center;
    justify-self: start;
    border: 0;
}

/* 삭제와 같은 까닭으로 선택자를 (0,3,1) 로 맞춘다 — skins.css 의 공통 단추
   규칙이 모서리와 최소 높이를 갖고 있다. */
body.solune-shop-page :is(.sit_opt_list, .sit_spl_list) :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);
    font-size: 0;
}
/* 양끝만 둥글리고 가운데로 맞닿는 선은 지운다 — 셋이 한 상자로 읽힌다. */
body.solune-shop-page :is(.sit_opt_list, .sit_spl_list) .sit_qty_minus { border-right: 0; border-radius: .5rem 0 0 .5rem; }
body.solune-shop-page :is(.sit_opt_list, .sit_spl_list) .sit_qty_plus { border-left: 0; border-radius: 0 .5rem .5rem 0; }

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

/* 추가옵션 줄(.sit_spl_list)이 빠져 있었다. 그래서 본옵션은 40px, 추가옵션은
   스킨 기본값 111px 로 나와 수량 상자가 줄마다 152 대 223 으로 어긋났다.
   둘을 함께 적어 폭을 하나로 맞춘다. */
.solune-shop-page :is(.sit_opt_list, .sit_spl_list) :is(.num_input, .frm_input) {
    width: 2.5rem;
    height: 2.125rem;
    order: -1;
    /* 상자의 테두리를 이 셋이 나눠 갖는다(아래 주석 참고). 가운데인 입력은
       위아래만 긋고 좌우는 옆 단추와 맞닿는 선으로 둔다. */
    border: 1px solid var(--solune-border-strong);
    border-inline-color: var(--solune-border);
    border-radius: 0;
    background: var(--solune-surface);
    color: var(--solune-text);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

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

/* 삭제는 수량 상자 밖, 줄 오른쪽 끝에 둔다. 테두리를 지워 상자와 섞이지
   않게 하고, 사이를 12 로 띄운다. 크기는 누를 자리로 28을 지킨다
   (WCAG 2.2 AA 는 24 CSS px). */
/* 선택자를 한 칸 올린 것은 skins.css 의 공통 단추 규칙
   `body.solune-page :is(…, .btn_frmline, …)` 때문이다. :is() 는 가장 센
   인자의 값을 가져가 (0,3,1) 이 되어, (0,2,0) 짜리로는 테두리도 모서리도
   못 이긴다. 같은 (0,3,1) 로 맞추면 나중에 실리는 이 시트가 이긴다. */
body.solune-shop-page :is(.sit_opt_list, .sit_spl_list) .sit_opt_del {
    order: 1;
    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 :is(.sit_opt_list, .sit_spl_list) .sit_opt_del:hover,
body.solune-shop-page :is(.sit_opt_list, .sit_spl_list) .sit_opt_del:focus-visible { background: var(--solune-border); color: var(--solune-text); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 상품 목록의 정렬 링크. 글자 크기는 두고 줄 높이만 채운다.
   (상품 검색의 정렬은 2026-09-09 부터 제 마크업 .solune-ssch-sort 를 쓴다.) */
.solune-shop-page :is(#ssch_sort, .ssch_sort) li a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
}

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

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

   대표 구역(--lead)의 제목을 키우는 규칙이 여기 있었는데, 그 구역
   ("이번 주 가장 많이 담긴 것")을 홈에서 빼면서 함께 걷었다. */

/* MD PICK 은 옅은 띠 위에 올려 화면을 한 번 끊는다. */
.solune-shop-page .solune-shop-product-section--band {
    position: relative;
    padding: 56px 0;
}

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

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

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

/* ━━━━ skin/visit/shop_basic/style.css ━━━━
   (옛 파일 · 원래 순서 0 · 원래 조건: theme/shop_basic 방문자 스킨 — 테마 안에서 부르는 곳이 없다) */

/* 방문자 집계 */
#visit {position:relative}
#visit .btn_admin {position:absolute;top:0;right:20px;height:25px;line-height:25px;padding:0 5px;border-radius:3px}
#visit h2 {font-size:1.2em;margin-bottom:20px;text-align:left;color:#fff;position:relative}
#visit dl {padding:10px 0}
#visit dl:after {display:block;visibility:hidden;clear:both;content:""}
#visit dt {float:left;width:50%;text-align:left;line-height:23px;height:23px;color:#e3e3e3}
#visit dt span {display:inline-block;width:5px;height:5px;border-radius:50%;vertical-align:middle;margin-right:10px;background:#3a8afd}
#visit dd {float:left;width:50%;padding:0 5px;text-align:right;text-align:right;font-weight:bold;line-height:23px;height:23px;font-size:0.92em}
#visit dd strong {display:inline-block;padding:0 5px;border-radius:20px;line-height:15px;color:#fff}