@charset "utf-8";
/* ============================================================================
 * wi-shop-001 — 영카트5 쇼핑몰 테마
 * 이 파일 하나가 테마의 전부다. bootstrap 과 영카트 default.css·default_shop.css
 * 는 걷어냈다(2026-08-20). 남은 것은 스킨별 style.css 뿐이고, 화면을 다시
 * 만들면서 그것도 하나씩 없앤다.
 *
 *   1. 토큰          색·타이포·간격·레이아웃
 *   2. 리셋
 *   3. 베이스 타이포
 *   4. 레이아웃 유틸
 *   5. 공통 컴포넌트  버튼 · 폼 · 배지 · 섹션헤더 · 상품카드 · 리뷰카드 · 칩
 *   6. 헤더
 *   7. 푸터
 *   8. 메인
 *   9. 아직 코어 스킨을 쓰는 화면 보정 (화면을 다시 만들면서 삭제)
 * ========================================================================= */

/* ── 0. 폰트 ─────────────────────────────────────────────────────────────
 * 시안의 두 폰트를 테마 안에 넣었다 — 외부 CDN 을 타지 않는다.
 *   Pretendard         본문 (OFL, 400·600·700·800 = 3.0MB)
 *   Cormorant Garamond 로고·큰 제목 (OFL, 라틴 서브셋만 = 43KB)
 * 사용자 기기에 이미 깔려 있으면 local() 로 즉시 잡아 내려받지 않는다.
 * ⚠️ 파일을 갈아끼울 때는 뒤의 ?v= 를 올린다. CSS 는 ?ver= 로 갱신돼도
 *    그 안의 폰트 URL 이 그대로면 브라우저가 옛 파일을 계속 쓴다.        */
@font-face{font-family:Pretendard;font-weight:400;font-display:swap;
    src:local('Pretendard Regular'),url('fonts/pretendard-400.woff2') format('woff2')}
@font-face{font-family:Pretendard;font-weight:600;font-display:swap;
    src:local('Pretendard SemiBold'),url('fonts/pretendard-600.woff2') format('woff2')}
@font-face{font-family:Pretendard;font-weight:700;font-display:swap;
    src:local('Pretendard Bold'),url('fonts/pretendard-700.woff2') format('woff2')}
@font-face{font-family:Pretendard;font-weight:800;font-display:swap;
    src:local('Pretendard ExtraBold'),url('fonts/pretendard-800.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:normal;font-display:swap;
    src:url('fonts/cormorant-400-latin-ext.woff2?v=2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:normal;font-display:swap;
    src:url('fonts/cormorant-400-latin.woff2?v=2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── 1. 토큰 ─────────────────────────────────────────────────────────────
 * 색은 시안에서 실제로 쓰인 14종을 그대로 옮겼다. 이름은 역할로 붙인다.
 * 구매자가 바꿀 자리는 --wi-accent 하나다(아래 프리셋 참고).            */
:root{
    /* 글자 */
    --wi-ink:        #221c1b;   /* 본문·제목 */
    --wi-ink-soft:   #5d534f;   /* 설명문 */
    --wi-mute:       #7c706c;   /* 보조 링크 */
    --wi-mute-2:     #8b7f7b;   /* 보조 설명 */
    --wi-faint:      #a2938e;   /* 라벨·kicker */
    --wi-faint-2:    #bdafaa;   /* 취소선 가격·크레딧 */

    /* 바탕 */
    --wi-bg:         #faf7f5;   /* 페이지 */
    --wi-surface:    #fffdfc;   /* 카드·헤더·푸터 */
    --wi-tint:       #f6efec;   /* 검색창·아이콘 hover */
    --wi-tint-2:     #f2ebe7;   /* 상품 이미지 바탕 */
    --wi-tint-3:     #f0e3dd;   /* 히어로 바탕 */
    --wi-warm:       #eae2dc;   /* 서브 배너 바탕 */

    /* 선 */
    --wi-line:       #eee3de;   /* 기본 테두리 */
    --wi-line-2:     #e6dcd7;   /* 섹션 구분선 */
    --wi-line-3:     #f2e9e5;   /* 푸터 하단 구분선 */
    --wi-line-4:     #e0d3cd;   /* 아웃라인 버튼 */

    /* 강조 — 이 한 줄만 바꾸면 테마 색이 바뀐다.
       프리셋: #b0685e 로즈브라운(기본) · #a8543c 벽돌 · #1b1a18 먹
               #2f5d50 딥그린 · #3a4a7a 네이비 */
    --wi-accent:     #b0685e;

    /* 타이포 — 시안 그대로. 본문 Pretendard, 로고·큰 제목 Cormorant Garamond */
    --wi-font: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "맑은 고딕", sans-serif;
    --wi-display: "Cormorant Garamond", "Times New Roman", serif;
    --wi-fs:         15px;      /* 기준 글자크기 */
    /* 시안은 line-height 를 따로 주지 않는다(normal ≈ 1.2). 여기에 1.6 을 깔면
       kicker·버튼처럼 행간을 지정하지 않은 요소가 통째로 부푼다 — 실측으로
       kicker 13→18px, 버튼 44→50px 이 됐다. 긴 글에만 아래에서 따로 준다. */
    --wi-lh:         normal;

    /* 레이아웃 */
    --wi-max:        1560px;
    --wi-gutter:     clamp(20px, 4vw, 64px);
    /* 좁은 화면 하단 구매바(#sit_buy) 높이 — 버튼 50 + 위아래 여백 20 + 선 1 */
    --wi-buybar:     71px;
    /* 장바구니·주문서 하단 고정 바 높이 — 버튼 50 + 위아래 여백 22 + 선 2 */
    --wi-cartbar:    74px;
    /* 헤더 높이 — inc/header.php 가 실제 높이를 재서 덮어쓴다(폭에 따라 다르다).
       아래 값은 자바스크립트가 못 돌 때의 폴백이다. */
    --wi-hd:         77px;
    --wi-sec-gap:    clamp(84px, 9vw, 150px);  /* 섹션 사이 */

    /* 모서리 */
    --wi-r-btn:      2px;
    --wi-r-img:      3px;
    --wi-r-box:      4px;
    --wi-r-pill:     999px;
}

/* ── 2. 리셋 ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,fieldset,legend{margin:0;padding:0}
/* 줄바꿈 — **body 에 한 번 깔고 상속시킨다.**
   코어 스킨 CSS 가 p 에 word-break:break-all 을 걸어 한글이 단어 중간에서
   끊겼다. `normal` 로 되돌리는 것만으로는 절반만 고쳐진다 — CJK 는
   `normal` 에서도 **글자와 글자 사이 어디서나** 줄이 바뀌기 때문이다.
   실제로 "…등록됩니 / 다." 처럼 한 어절이 쪼개졌다(2026-08-23 실측).
   한글은 `keep-all` 로 **띄어쓰기에서만** 끊는다. 대신 띄어쓰기가 없는
   긴 문자열(URL·상품코드·주문번호)이 칸을 넘지 않도록 overflow-wrap 을
   함께 둔다.
   ⚠️ 예전에는 `p,li,dd,dt,td,th` 에만 걸어 뒀는데 **절반만 닿았다** —
      제목·버튼·칩·링크(<a>·<span>)는 그대로 낱글자에서 끊겼다. 좁은 칸에
      긴 한글이 들어가는 대표 자리가 오히려 그쪽이다. */
body{word-break:keep-all;overflow-wrap:break-word}
/* 코어·스킨 CSS 가 h1~h6 에 font-family 를 직접 건다. 상속(body)보다 요소
   선택자가 세서 제목이 전부 맑은 고딕으로 나왔었다 — 상속으로 되돌린다. */
h1,h2,h3,h4,h5,h6{font-family:inherit}
ul,ol{list-style:none}
img,svg,video{max-width:100%;height:auto;vertical-align:middle}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
fieldset{border:0}
a{color:inherit;text-decoration:none}
hr{display:none}

/* ── 3. 베이스 타이포 ──────────────────────────────────────────────────── */
body{
    font-family:var(--wi-font);
    font-size:var(--wi-fs);
    line-height:var(--wi-lh);
    color:var(--wi-ink);
    background:var(--wi-bg);
    -webkit-font-smoothing:antialiased;
}
a:hover{color:var(--wi-accent)}
b,strong{font-weight:600}

/* 숫자는 폭을 고정해 가격·전화번호가 흔들리지 않게 */
.wi-num{font-variant-numeric:tabular-nums}

/* 화면에서만 감춘다(스크린리더는 읽는다) */
.sound_only,
/* 화면에서만 감춘다(읽어 주기는 한다). 코어 마크업이 화면에 두 번 내보내는
   제목·라벨도 여기로 묶는다 — 같은 다섯 줄을 여기저기 베끼지 않게.
     #sit_use_list>h3·#sit_qa_list>h3  탭 이름과 겹치는 안쪽 제목
     .sit_use_dl dt·.sit_qa_dl dt      "작성자/작성일" 같은 항목 이름
     .wi-sheet__body select            버튼으로 고르지만 코어가 값을 읽는다
     .wi-optedit select                장바구니 "옵션 변경" 모달도 같다
     .wi-wishopt select                보관함 "옵션 선택" 모달도 같다 */
.wi-sr,legend,#hd_pop > h2,
#sit_use_list > h3,#sit_qa_list > h3,
.sit_use_dl dt,.sit_qa_dl dt,
.wi-sheet__body select,.wi-optedit select,.wi-wishopt select{
    position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* 키보드 포커스는 항상 보이게 */
:focus-visible{outline:2px solid var(--wi-accent);outline-offset:2px}

/* ── 4. 레이아웃 유틸 ───────────────────────────────────────────────────
 * **화면 가운데에 콘텐츠 폭으로 서는 것들** — 폭과 가운데 정렬은 여기 한
 * 곳에서만 정한다(위아래 여백은 저마다 다르니 각자 갖는다).
 * 콘텐츠 폭 자체는 .wi-main 이 기준이다 → 8-x 참고.                        */
.wi-wrap,.wi-sec,
.wi-hd-main,.wi-mega__in,#hd_pop,
.wi-ft-top,.wi-ft-poll__in,.wi-ft-bottom__in,
.wi-slide__copy,
.wi-main:not(.wi-is-index){max-width:var(--wi-max);margin-left:auto;margin-right:auto}

.wi-wrap{padding-left:var(--wi-gutter);padding-right:var(--wi-gutter)}
.wi-sec{padding:var(--wi-sec-gap) var(--wi-gutter) 0}
.wi-skip{position:absolute;left:-9999px;top:0;z-index:100}
.wi-skip:focus{left:0;background:var(--wi-ink);color:#fff;padding:10px 16px}

/* ── 5. 공통 컴포넌트 ─────────────────────────────────────────────────── */

/* 5-1 버튼 */
.wi-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    font-size:13.5px;font-weight:600;
    padding:14px 30px;border-radius:var(--wi-r-btn);
    background:var(--wi-ink);color:#fff;
    transition:background .15s,color .15s,border-color .15s;
}
.wi-btn:hover{background:#000;color:#fff}
.wi-btn--light{background:var(--wi-surface);color:var(--wi-ink)}
.wi-btn--light:hover{background:var(--wi-tint-3);color:var(--wi-ink)}
.wi-btn--line{background:none;color:var(--wi-ink);border:1px solid var(--wi-ink);padding:12px 24px;font-size:13px}
.wi-btn--line:hover{background:var(--wi-ink);color:#fff}
.wi-btn--sm{font-size:12.5px;padding:9px 16px;border:1px solid var(--wi-line-4);background:none;color:var(--wi-ink)}
.wi-btn--sm:hover{border-color:var(--wi-ink);background:none;color:var(--wi-ink)}
.wi-btn--lg{width:100%;padding:20px 24px;font-size:15px}
.wi-btn--block{width:100%}
/* 어두운 바탕 위 보조 버튼 — 하단 고정 바에서 쓴다 */
.wi-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)}
.wi-btn--ghost:hover{background:transparent;color:#fff;border-color:#fff}
.wi-btn[disabled]{opacity:.45;pointer-events:none}

/* 5-7 작은 공용 조각 — 주문 흐름(장바구니·주문서)에서 되풀이되는 것들 */
.wi-kicker{font-family:var(--wi-display);font-size:12px;letter-spacing:0.26em;color:var(--wi-faint);text-transform:uppercase}
.wi-link{
    font-size:12.5px;color:var(--wi-mute);
    text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--wi-line-4);
}
.wi-link:hover{color:var(--wi-ink);text-decoration-color:currentColor}

/* 체크박스 — 코어 스킨은 label 안에 빈 span 을 두고 스프라이트를 깔았다.
   우리는 accent-color 로 기본 체크박스를 그대로 쓴다(스프라이트 없음). */
/* ⚠️ **gap 을 쓰지 않는다.** .wi-check 는 <label> 에도 붙는데(장바구니·보관함·
   약관 동의), flex 의 gap 은 **글자 토막 하나하나에도 걸린다** — 라벨 안에
   <b>회원가입약관</b>의 내용에… 처럼 태그가 섞이면 "약관" 과 "의" 사이가
   9px 벌어져 오타처럼 보인다(2026-08-25 실측). 간격은 입력칸 margin 으로 준다.
   그래야 라벨 글을 <span> 으로 싸매지 않아도 안전하다 → [[fix-the-tool-not-the-rule]] */
.wi-check{display:inline-flex;align-items:center;font-size:13px;cursor:pointer}
.wi-check input{width:17px;height:17px;margin:0 9px 0 0;accent-color:var(--wi-ink);cursor:pointer;flex:0 0 auto}
/* ⚠️ 예전에 `label.wi-check > input:last-child{margin-right:0}` 를 뒀었다 —
   "라벨 안에 입력칸만 있으면 뒤 여백을 지운다"는 뜻이었는데, **텍스트 노드는
   요소가 아니라서** <label class=wi-check><input>상품명</label> 의 input 도
   :last-child 에 걸린다. 그래서 체크박스와 글자가 붙어 버렸다(폼메일 라디오·
   검색 상세검색에서 실측 2026-08-25). 선택자로는 뒤에 글이 있는지 알 수 없으니
   규칙을 지우고, 정말 입력칸만 있는 라벨에는 아래 modifier 를 단다.
   → [[fix-the-tool-not-the-rule]] */
label.wi-check--bare > input{margin-right:0}

/* 수량 스테퍼 */
.wi-qty{display:inline-flex;align-items:center;height:38px;border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);background:var(--wi-surface)}
.wi-qty__b{width:34px;height:100%;color:var(--wi-mute);font-size:15px;line-height:1}
.wi-qty__b:hover{color:var(--wi-ink)}
.wi-qty__n{width:38px;height:100%;border:0;background:none;text-align:center;font-size:13.5px;padding:0}
.wi-qty__n:focus{outline:0}

/* 주문 흐름 화면의 머리 — 단계 띠 + kicker + 제목 (wi_checkout_head) */
.wi-cohead{margin-bottom:clamp(24px,3vw,40px)}
.wi-cohead h1{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
    margin-top:12px;font-size:clamp(26px,2.8vw,38px);font-weight:700;letter-spacing:-0.035em;
}
.wi-cohead h1 span{font-size:13px;font-weight:400;letter-spacing:0;color:var(--wi-mute-2)}
.wi-cohead__sub{margin-top:14px;max-width:52ch;font-size:13px;line-height:1.9;color:var(--wi-ink-soft);text-wrap:pretty}

/* 주문 진행 단계 — 장바구니 › 주문서 › 결제 › 완료 */
.wi-steps{
    display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,2vw,20px);
    padding-bottom:clamp(22px,3vw,34px);
    font-size:11.5px;letter-spacing:0.14em;color:var(--wi-faint-2);
}
.wi-steps li{display:flex;align-items:center;gap:7px}
.wi-steps li+li::before{content:'';width:clamp(10px,2vw,22px);height:1px;background:var(--wi-line-2);margin-right:clamp(10px,2vw,20px)}
.wi-steps i{font-style:normal;font-family:var(--wi-display);font-size:13px;letter-spacing:0.06em}
.wi-steps .is-on{color:var(--wi-ink);font-weight:700}
.wi-steps .is-done{color:var(--wi-mute)}

/* 5-2 폼 */
.wi-input{
    width:100%;height:38px;padding:0 14px;
    border:1px solid var(--wi-line);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);font-size:13px;color:var(--wi-ink);
}
.wi-input::placeholder{color:var(--wi-faint)}
.wi-input:focus{outline:0;border-color:var(--wi-ink)}

/* 고르개(select) — **화면마다 따로 그리고 있었다.** 목록 정렬 40px 알약 ·
   상세 옵션 46px · 검색항목 34px · 주문서 은행 44px · 쓰기 폼 46px 로 다섯
   벌이었고, 그중 셋은 **브라우저 기본 화살표 그대로**라 테마 밖 물건처럼
   보였다(사용자 지적 2026-08-23). 여기 한 벌을 깔고 화면에서는 **크기만**
   바꾼다.
   ⚠️ 화살표는 ::after 가 아니라 **배경 이미지**다 — 그래야 감싸는 태그를
      더하지 않아도 코어가 뱉는 <select> 에 그대로 걸린다. */
select{
    appearance:none;-webkit-appearance:none;
    height:38px;padding:0 30px 0 13px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%237c706c' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    color:var(--wi-ink);font-size:13.5px;cursor:pointer;
}
select:hover{border-color:var(--wi-ink)}
select:focus{outline:0;border-color:var(--wi-ink)}

/* 5-3 배지 */
.wi-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:16px;height:16px;padding:0 4px;border-radius:var(--wi-r-pill);
    background:var(--wi-accent);color:#fff;font-size:10px;font-weight:700;line-height:1;
}
.wi-tag{
    display:inline-block;padding:4px 8px;border-radius:var(--wi-r-btn);
    background:var(--wi-ink);color:#fff;
    font-size:10.5px;font-weight:700;letter-spacing:0.06em;
}

/* 5-4 섹션 헤더 — kicker / 제목 / 설명 / 전체보기 */
.wi-shead{
    display:flex;flex-wrap:wrap;gap:12px;
    align-items:flex-end;justify-content:space-between;
    margin-bottom:40px;
}
.wi-shead__kicker{font-family:var(--wi-display);font-size:14px;letter-spacing:0.2em;color:var(--wi-faint);margin-bottom:12px;text-transform:uppercase}
.wi-shead__title{font-size:clamp(30px,3.2vw,44px);font-weight:700;letter-spacing:-0.035em}
.wi-shead__sub{margin-top:12px;font-size:15px;color:var(--wi-mute)}
.wi-shead__more{font-size:14px;font-weight:600;color:var(--wi-mute);white-space:nowrap}
.wi-shead__more:hover{color:var(--wi-ink)}

/* 5-5 상품 카드 — 메인·목록·검색·베스트가 모두 이 하나를 쓴다 */
.wi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:56px clamp(18px,2vw,32px)}
/* 관리자 "메인 진열 > 모듈수" 가 곧 한 줄에 놓을 개수다. 넓은 화면에서만
   그 값을 따르고, 좁아지면 auto-fill 로 되돌아간다. */
@media (min-width:900px){ .wi-grid[style*="--wi-cols"]{grid-template-columns:repeat(var(--wi-cols),minmax(0,1fr))} }
.wi-card__thumb{
    position:relative;aspect-ratio:4/5;overflow:hidden;
    border-radius:2px;background:var(--wi-tint-2);
}
.wi-card__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.wi-card:hover .wi-card__thumb img{transform:scale(1.04)}
.wi-card__thumb .wi-tag{position:absolute;top:13px;left:13px;pointer-events:none;background:rgba(34,28,27,.86)}
.wi-card__body{padding-top:18px}
.wi-card__maker{font-size:12px;letter-spacing:0.1em;color:var(--wi-faint);margin-bottom:8px;text-transform:uppercase}
.wi-card__name{font-size:16px;font-weight:600;letter-spacing:-0.02em}
.wi-card__price{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.wi-card__price b{font-size:17px;font-weight:800;letter-spacing:-0.02em}
.wi-card__price del{font-size:13px;color:var(--wi-faint-2);text-decoration:line-through}
.wi-card--empty{display:flex;align-items:center;justify-content:center;color:var(--wi-faint);font-size:13px}

/* 5-6 리뷰 카드 */
.wi-review{
    background:var(--wi-surface);border-radius:var(--wi-r-box);
    padding:28px;display:flex;flex-direction:column;gap:16px;
}
.wi-review__head{display:flex;align-items:center;gap:12px}
.wi-review__thumb{
    flex:0 0 auto;width:42px;height:42px;border-radius:var(--wi-r-img);overflow:hidden;
    background:radial-gradient(120% 120% at 30% 24%,#fbf5f1 0%,var(--wi-tint-2) 48%,#ddcdc5 100%);
}
.wi-review__thumb img{width:100%;height:100%;object-fit:cover}
.wi-review__item{font-size:13.5px;font-weight:600;letter-spacing:-0.02em}
.wi-review__meta{font-size:12px;color:var(--wi-faint);margin-top:4px}
.wi-review__text{font-size:13.5px;line-height:1.75;color:var(--wi-ink-soft);text-wrap:pretty}
.wi-review__stars,.wi-stars{font-size:12.5px;color:var(--wi-accent);letter-spacing:0.1em}

/* 5-7 에디터 본문 — 첨부사진 줄 + 글 ──────────────────────────────────
 * 후기·문의·게시글은 전부 스마트에디터로 쓰므로 본문에 <img> 가 섞여 온다.
 * 코어는 그 사진을 글 사이에 그대로 두는데, 그러면 글줄이 끊기고 세로로 긴
 * 사진 한 장이 카드를 밀어낸다. 그래서 theme.lib 의 wi_editor_media() 가
 * 사진을 뽑아 **썸네일 줄**로 모으고 글만 남긴다 — 여기가 그 줄의 모양이다.
 * 누르면 js/wi-modal.js 의 라이트박스가 열린다(a[data-wi-img]).
 * 한 변 크기는 화면마다 --wi-shot 으로 준다.                              */
.wi-photos{display:flex;flex-wrap:wrap;gap:8px}
.wi-photos__it{flex:0 0 auto}
.wi-photos__it > a{
    position:relative;display:block;width:var(--wi-shot,84px);aspect-ratio:1/1;
    border-radius:var(--wi-r-img);overflow:hidden;background:var(--wi-tint-2);
}
.wi-photos__it img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wi-photos__it > a:hover img{transform:scale(1.05)}
/* 가려진 장수 — 마지막 칸에 얹는다. 나머지 사진도 라이트박스에는 들어간다 */
.wi-photos__more{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(34,28,27,.48);color:#fff;font-size:15px;font-weight:700;letter-spacing:-0.02em;
}
.wi-photos__it--hidden{display:none}

/* 에디터로 쓴 글 — 관리자·회원이 붙여넣는 평범한 HTML 을 받는다 */
/* ⚠️ word-break 를 다시 주지 않는다 — `break-word` 는 낡은 값이라 사실상
   `normal` + overflow-wrap 이라서, body 의 keep-all 을 도로 풀어 버린다. */
.wi-prose{font-size:14px;line-height:1.85;color:var(--wi-ink-soft);text-wrap:pretty}
.wi-prose img{max-width:100%;height:auto;border-radius:var(--wi-r-img)}
.wi-prose a{text-decoration:underline}

/* ── 6. 헤더 ─────────────────────────────────────────────────────────────
 * 로고 왼쪽 · 반투명 sticky · 공지 띠 없음.
 * 전체보기 패널은 20줄짜리 순수 JS 로 여닫는다 — Bootstrap 을 쓰지 않는다.  */
.wi-hd{
    position:sticky;top:0;z-index:60;
    background:rgba(250,247,245,.88);
    -webkit-backdrop-filter:saturate(140%) blur(12px);
            backdrop-filter:saturate(140%) blur(12px);
    border-bottom:1px solid var(--wi-line);
}

/* 6-2 본 행 — 로고 · 메뉴 · (오른쪽) 검색과 아이콘 */
.wi-hd-main{
    padding:0 var(--wi-gutter);
    min-height:76px;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,2.6vw,40px);
}
.wi-gnb{
    display:flex;align-items:center;gap:clamp(16px,1.8vw,28px);
    font-size:15px;font-weight:600;letter-spacing:-0.01em;
}
.wi-gnb a:hover{color:var(--wi-accent)}
.wi-gnb__sale{color:var(--wi-accent)}

/* 전체보기 토글 — 햄버거 3줄 */
.wi-gnb__all{display:flex;align-items:center;gap:8px;color:var(--wi-ink);font:inherit;font-weight:600}
/* 줄 세 개 — 예전에는 16×11.5px(1.5px 줄·3.5px 사이)이라 옆의 15px 굵은
   글자·19px 아이콘 옆에서 짜글해 보였다(사용자 지적 2026-08-23).
   18×14px 로 키운다. 줄 두께와 사이를 **정수 px** 로 두어야 저해상도에서도
   흐려지지 않는다(1.5·3.5 는 반픽셀이라 번졌다).
   ⚠️ 아래 X 로 접히는 이동값은 **줄두께 + 사이(2+4=6)** 와 같아야 한다. */
.wi-bars{display:flex;flex-direction:column;gap:4px}
.wi-bars i{display:block;width:18px;height:2px;background:var(--wi-ink);transition:transform .2s,opacity .2s}
.wi-gnb__all.is-open .wi-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.wi-gnb__all.is-open .wi-bars i:nth-child(2){opacity:0}
.wi-gnb__all.is-open .wi-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* 로고 */
.wi-logo{display:flex;align-items:baseline;gap:9px;flex:0 0 auto}
.wi-logo__txt{font-family:var(--wi-display);font-size:28px;font-weight:400;letter-spacing:0.04em;line-height:1}
.wi-logo__sub{font-size:9.5px;letter-spacing:0.34em;color:var(--wi-faint)}
.wi-logo img{max-height:44px;width:auto}

/* 오른쪽 — 검색 + 아이콘 */
.wi-hd-act{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.wi-hd-sch{
    display:flex;align-items:center;gap:8px;
    background:var(--wi-tint);border:1px solid var(--wi-line);border-radius:var(--wi-r-pill);
    padding:0 18px;height:38px;width:min(240px,26vw);
}
.wi-hd-sch input{flex:1 1 auto;min-width:0;border:0;outline:0;background:none;font-size:13px;color:var(--wi-ink)}
.wi-hd-sch input::placeholder{color:var(--wi-faint)}
.wi-hd-sch input::-webkit-search-cancel-button{-webkit-appearance:none}
.wi-hd-sch svg{flex:0 0 auto}
.wi-hd-util{font-size:13px;color:var(--wi-mute);white-space:nowrap}
.wi-hd-util:hover{color:var(--wi-ink)}
.wi-hd-ico{
    position:relative;display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:var(--wi-r-pill);flex:0 0 auto;
}
.wi-hd-ico:hover{background:var(--wi-tint)}
.wi-hd-ico .wi-badge{position:absolute;top:2px;right:1px}

/* 6-3 전체보기 패널 */
.wi-mega{border-top:1px solid var(--wi-line);background:var(--wi-surface)}
.wi-mega__in{
    padding:30px var(--wi-gutter) 38px;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:26px;
}
.wi-mega__tit{
    font-size:13px;font-weight:700;letter-spacing:-0.01em;
    padding-bottom:11px;border-bottom:1px solid var(--wi-ink);margin-bottom:13px;
}
.wi-mega__list{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--wi-mute)}
.wi-mega__list a:hover{color:var(--wi-ink)}

/* 6-4 맨 위로 */
.wi-top{
    position:fixed;right:20px;bottom:20px;z-index:50;display:none;
    width:44px;height:44px;border-radius:var(--wi-r-pill);
    background:var(--wi-ink);color:#fff;align-items:center;justify-content:center;
}
.wi-top.is-on{display:flex}
/* 좁은 화면에서는 상품상세 하단 구매바가 화면 아래에 깔린다 — 그 위로 올린다
   (겹쳐서 바로구매를 가렸다, 2026-08-22). 구매바가 있는 화면에서만. */
@media (max-width:900px){
    body:has(#sit_buy) .wi-top{bottom:calc(var(--wi-buybar) + 14px)}
}

/* 6-5 내 정보 드롭다운 (헤더 오른쪽 프로필)
 * 시안 template/header-profile/프로필 메뉴.dc.html.
 * 예전에는 [전체보기] 패널 왼쪽 칸에 붙어 있었다 — 분류를 보러 연 패널에
 * 회원정보가 끼어 있어 자리가 어색했다(사용자 지시 2026-08-23).
 * 안쪽 내용은 코어 outlogin() 이 만든다(skin/outlogin/shop_basic). */
.wi-hd-my{position:relative;flex:0 0 auto}
/* 무는 자리 — 헤더에서는 다른 아이콘들과 같은 모양을 쓴다(사용자 지시
   2026-08-23). 아바타 동그라미는 드롭다운 **안**에만 둔다. */
.wi-hd-my__btn.is-open{background:var(--wi-tint)}

.wi-hd-my__panel{
    position:absolute;top:calc(100% + 14px);right:0;z-index:30;
    width:min(308px,calc(100vw - 28px));overflow:hidden;text-align:left;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-box);
    background:var(--wi-surface);box-shadow:0 26px 60px rgba(34,28,27,.16);
    animation:wi-my-in .18s cubic-bezier(.2,.8,.2,1);
}
.wi-hd-my__panel[hidden]{display:none}
@keyframes wi-my-in{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
/* 바깥을 덮는 막 — 헤더(z 60)보다 아래라 헤더는 그대로 눌린다 */
.wi-my__veil{position:fixed;inset:0;z-index:40}
.wi-my__veil[hidden]{display:none}

/* 머리 — 아바타 · 이름 · 포인트 · 닫기 */
.wi-my__head{
    display:flex;align-items:center;gap:13px;
    padding:20px 22px 18px;background:var(--wi-tint);border-bottom:1px solid var(--wi-line-3);
}
.wi-my__ava{
    flex:0 0 44px;height:44px;border-radius:var(--wi-r-pill);
    display:flex;align-items:center;justify-content:center;
    background:var(--wi-ink);color:var(--wi-bg);font-size:16px;font-weight:600;line-height:1;
}
.wi-my__who{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.wi-my__name{font-size:16.5px;font-weight:600;line-height:1.3;letter-spacing:-0.01em}
.wi-my__name span{margin-left:3px;font-size:12.5px;font-weight:400;color:var(--wi-ink-soft)}
.wi-my__pt{font-size:12px;color:var(--wi-ink-soft)}
.wi-my__pt strong{color:var(--wi-ink);font-weight:600}
.wi-my__pt a:hover{color:var(--wi-accent)}

/* 쿠폰 · 쪽지 — 숫자가 위, 이름이 아래 */
/* 쿠폰 · 쪽지 · 스크랩 — 셋 다 모달로 뜬다(자동 모달) */
/* ⚠️ 칸 수를 못 박지 않는다 — repeat(3,1fr) 로 두면 칸이 둘일 때 오른쪽
   1/3 이 그대로 빈다(쪽지를 끄고 실측). 있는 만큼 고르게 나눈다. */
.wi-my__stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-bottom:1px solid var(--wi-line-3)}
.wi-my__stats a{
    display:flex;flex-direction:column;align-items:center;gap:7px;
    padding:17px 4px;min-width:0;
}
.wi-my__stats a + a{border-left:1px solid var(--wi-line-3)}
.wi-my__stats a:hover{background:var(--wi-tint)}
.wi-my__stats strong{font-size:15.5px;font-weight:600;line-height:1;letter-spacing:-0.02em;white-space:nowrap}
.wi-my__stats span{font-size:11px;color:var(--wi-faint)}

/* 마이페이지 · 주문내역 · 쪽지함 · 스크랩 — 0 이면 배지를 안 그린다 */
.wi-my__links{padding:8px 0}
.wi-my__links a{display:flex;align-items:center;gap:10px;padding:11px 22px;font-size:13.5px}
.wi-my__links a:hover{background:var(--wi-tint)}
.wi-my__links span{flex:1;min-width:0}
.wi-my__links em{
    font-style:normal;font-size:11.5px;color:var(--wi-ink-soft);
    background:var(--wi-tint-2);border-radius:10px;padding:2px 9px;
}
.wi-my__links i{font-style:normal;font-size:12px;color:var(--wi-faint-2)}

/* 발 — 정보수정 · 1:1 문의 · (관리자) · 로그아웃 */
.wi-my__foot{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    padding:12px 22px 16px;border-top:1px solid var(--wi-line-3);font-size:12px;color:var(--wi-faint);
}
.wi-my__foot a:hover{color:var(--wi-ink)}
.wi-my__foot span{color:var(--wi-line-4)}
.wi-my__out{
    margin-left:auto;display:inline-flex;align-items:center;height:34px;padding:0 15px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);color:var(--wi-ink-soft);white-space:nowrap;
}
.wi-my__out:hover{border-color:var(--wi-ink);color:var(--wi-ink)}

/* 아웃로그인 로그인 폼(비회원) — 구매자가 다른 자리에 놓을 때를 위해 남겨 둔다 */
.wi-ol{border:1px solid var(--wi-line);border-radius:var(--wi-r-box);padding:16px;background:var(--wi-tint)}
.wi-ol input[type=text],.wi-ol input[type=password]{
    width:100%;height:34px;padding:0 10px;margin-bottom:6px;font-size:13px;
    border:1px solid var(--wi-line);border-radius:var(--wi-r-btn);background:var(--wi-surface);color:var(--wi-ink)}
.wi-ol input[type=text]:focus,.wi-ol input[type=password]:focus{outline:0;border-color:var(--wi-ink)}
.wi-ol__auto{display:flex;align-items:center;gap:6px;margin:2px 0 10px;font-size:12px;color:var(--wi-mute)}
.wi-ol input[type=submit]{
    width:100%;height:36px;border:0;border-radius:var(--wi-r-btn);
    background:var(--wi-ink);color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.wi-ol input[type=submit]:hover{background:#000}
.wi-ol__links{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font-size:12.5px;color:var(--wi-mute)}
.wi-ol__links a:hover{color:var(--wi-ink)}

/* 6-6 팝업레이어 (관리자 > 팝업레이어 관리)
 * 관리자가 정한 위치(top/left)와 크기(width/height)는 인라인 style 로 온다.
 * 넓은 화면에서는 그대로 살리고, 좁아지면 위치를 무시하고 화면에 맞춘다. */
/* ⚠️ 코어는 이걸 z-index 1000 으로 둔다 — 헤더(60)보다 위라 **헤더에서 열리는
   것들을 덮는다.** 좁은 화면에서 프로필 드롭다운이 팝업레이어에 가렸다
   (2026-08-23 실측). 팝업은 본문 위·헤더 아래가 맞다 — 맨 위로 버튼(50)보다는
   위, 헤더(60)보다는 아래. */
#hd_pop{position:relative;z-index:55;height:0}
.hd_pops{position:absolute;border:1px solid var(--wi-line);border-radius:var(--wi-r-box);overflow:hidden;background:var(--wi-surface);box-shadow:0 10px 30px rgba(34,28,27,.10)}
.hd_pops_con{max-width:100%;overflow:auto}
.hd_pops_con img{max-width:100%;height:auto}
.hd_pops_footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--wi-ink)}
.hd_pops_footer button{
    padding:11px 14px;font-size:12px;color:rgba(255,255,255,.72);
    background:none;border:0;cursor:pointer;
}
.hd_pops_footer button:hover{color:#fff}
.hd_pops_footer .hd_pops_reject strong{color:#fff;font-weight:700;margin-right:2px}
.hd_pops_footer .hd_pops_close{font-weight:600}
.hd_pops_footer .fa{margin-left:4px}
@media (max-width:900px){
    /* 관리자가 넣은 절대좌표는 휴대폰에서 화면을 벗어난다 — 세로로 쌓는다 */
    #hd_pop{height:auto;padding:0 var(--wi-gutter)}
    .hd_pops{position:static!important;top:auto!important;left:auto!important;margin:12px 0}
    .hd_pops_con{width:auto!important;height:auto!important;max-height:70vh}
}

/* 코어가 **스킨 밖에서 직접 뱉는** 관리자 버튼 — shop/item.php · list.php ·
   couponzone.php · event.php 가 $is_admin 이면 echo 한다. 코어는 고치지 않으니
   여기서 덮는다. 열쇠는 .wi-main 의 wi-adminui 클래스(설정 'admin_ui'). */
.wi-main:not(.wi-adminui) .sit_admin,
.wi-main:not(.wi-adminui) .sct_admin,
.wi-main:not(.wi-adminui) .sev_admin{display:none}

/* ── 7. 푸터 ─────────────────────────────────────────────────────────── */
.wi-ft{margin-top:clamp(60px,7vw,104px);background:var(--wi-surface);border-top:1px solid var(--wi-line)}
.wi-ft-top{
    padding:clamp(36px,4vw,56px) var(--wi-gutter) 40px;
    /* 고객센터 한 덩이 + 링크 한 줄뿐이라 그리드로 칸을 나누지 않는다.
       내용만큼만 차지하게 두고 남는 폭을 사이로 흘린다. */
    display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:36px 48px;
}
.wi-ft-cs{min-width:220px}
.wi-ft__label{font-size:11.5px;letter-spacing:0.16em;color:var(--wi-faint);margin-bottom:10px}
.wi-ft__tel{font-size:27px;font-weight:800;letter-spacing:-0.035em}
.wi-ft__time{font-size:13px;color:var(--wi-mute-2);margin-top:10px;line-height:1.7}
.wi-ft__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
/* 링크는 분류 없이 한 줄이다 — 고객센터 오른쪽 끝에 붙인다 */
.wi-ft-links ul{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13px;color:var(--wi-mute)}
.wi-ft-links a:hover{color:var(--wi-ink)}
/* 좁아지면 벌리지 않는다 — 고객센터를 한 줄로 쓰고 링크는 그 아래 왼쪽부터 */
@media (max-width:760px){
    .wi-ft-top{justify-content:flex-start;gap:24px 40px}
    .wi-ft-cs{flex:1 1 100%}
}
/* 7-2 설문조사 (코어 위젯) — 진행 중인 설문이 있을 때만 나온다 */
.wi-ft-poll{border-top:1px solid var(--wi-line-3);background:var(--wi-tint)}
.wi-ft-poll__in{padding:22px var(--wi-gutter)}
.wi-poll{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;font-size:13px}
.wi-poll h2{font-size:13px;font-weight:700}
.wi-poll ul{display:flex;flex-wrap:wrap;gap:8px 18px}
.wi-poll li{display:flex;align-items:center;gap:6px}
.wi-poll label{cursor:pointer;color:var(--wi-ink-soft)}
.wi-poll__btns{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:12.5px;color:var(--wi-mute)}
.wi-poll__btns button{
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);background:none;
    padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--wi-ink);cursor:pointer}
.wi-poll__btns button:hover{border-color:var(--wi-ink)}
.wi-poll__btns a:hover{color:var(--wi-ink)}

.wi-ft-bottom{border-top:1px solid var(--wi-line-3)}
.wi-ft-bottom__in{
    padding:24px var(--wi-gutter) 36px;
    font-size:12px;color:var(--wi-mute-2);line-height:2;
}
.wi-ft-bottom dl{display:flex;flex-wrap:wrap;gap:4px 20px}
.wi-ft-bottom dl div{display:flex;gap:6px}
.wi-ft-bottom dt{color:var(--wi-mute-2)}
.wi-ft-bottom dd{color:var(--wi-ink);font-weight:600}
.wi-ft-copy{margin-top:12px;color:#b3a5a0}

/* ── 8. 메인 ─────────────────────────────────────────────────────────── */

/* 8-1 배너 캐러셀 — 관리자 '메인' 위치 배너가 전부 슬라이드가 된다.
 * transform 으로 밀고 CSS transition 으로 움직인다(스크롤 스냅은 환경에 따라
 * 스무스 스크롤이 통째로 무시되는 경우가 있어 쓰지 않는다 — 실측).       */
.wi-bnr{position:relative;overflow:hidden;background:var(--wi-warm)}
.wi-bnr__track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
@media (prefers-reduced-motion:reduce){ .wi-bnr__track{transition:none} }
.wi-slide{
    position:relative;flex:0 0 100%;overflow:hidden;
    min-height:clamp(420px,62vh,700px);      /* 최대 700px */
    display:flex;align-items:flex-end;
}
.wi-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wi-slide__scrim{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(0deg,rgba(34,28,27,.66) 0%,rgba(34,28,27,.20) 46%,rgba(34,28,27,0) 76%);
}
.wi-slide__copy{
    position:relative;width:100%;
    padding:0 var(--wi-gutter) clamp(56px,5vw,84px);color:#fff;
}
.wi-slide__kicker{font-size:11.5px;letter-spacing:0.26em;color:rgba(255,255,255,.82);margin-bottom:16px}
.wi-slide__title{font-family:var(--wi-display);font-size:clamp(42px,5vw,72px);font-weight:400;line-height:1.02;letter-spacing:-0.015em;margin-bottom:16px}
.wi-slide__sub{font-size:16px;color:rgba(255,255,255,.9);margin-bottom:26px;max-width:34ch}
.wi-bnr__nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:46px;height:46px;border-radius:var(--wi-r-pill);
    background:rgba(255,253,252,.82);color:var(--wi-ink);
    font-size:22px;line-height:1;opacity:0;transition:opacity .2s;
}
.wi-bnr:hover .wi-bnr__nav,.wi-bnr__nav:focus-visible{opacity:1}
.wi-bnr__nav--prev{left:clamp(12px,2vw,28px)}
.wi-bnr__nav--next{right:clamp(12px,2vw,28px)}
.wi-bnr__dots{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:8px}
.wi-bnr__dots button{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.42)}
.wi-bnr__dots button[aria-selected="true"]{background:#fff}

/* 8-2 이벤트 — 관리자 이벤트관리에 등록된 것이 있을 때만 나온다 */
.wi-events{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:20px}
.wi-event{display:flex;flex-direction:column;gap:16px}
.wi-event__img{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:3px;background:var(--wi-tint-2)}
.wi-event__img img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.wi-event:hover .wi-event__img img{transform:scale(1.03)}
.wi-event__tit{font-size:18px;font-weight:600;letter-spacing:-0.025em}
.wi-event__tit.is-strong{color:var(--wi-accent)}
/* 목록 이미지가 없는 이벤트 — 빈 상자 대신 색면. 칩·리뷰 썸네일과 같은 기법 */
.wi-event__img--none{
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(120% 120% at 30% 24%,#fbf3ee 0%,var(--wi-tint-3) 45%,#e2cec4 100%);
    font-family:var(--wi-display);font-size:15px;letter-spacing:0.28em;
    color:rgba(34,28,27,.30);text-indent:0.28em;
}

/* 8-3 리뷰 그리드 */
.wi-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px}

/* 8-4 좁은 화면 */
@media (max-width:900px){
    .wi-slide{min-height:clamp(340px,52vh,520px)}
    /* 헤더는 두 줄로 — 위: 로고와 아이콘, 아래: 메뉴 */
    .wi-hd-main{min-height:0;padding-top:12px;padding-bottom:12px;gap:10px}
    .wi-logo{order:-2;flex:0 0 auto;align-items:flex-start}
    .wi-hd-act{order:-1;flex:0 0 auto;gap:2px}
    .wi-gnb{order:0;flex:1 1 100%;gap:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .wi-gnb::-webkit-scrollbar{display:none}
    .wi-gnb a,.wi-gnb__all{white-space:nowrap}
    .wi-logo__txt{font-size:24px}
    .wi-mega__in{padding-top:20px;padding-bottom:24px;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr))}
}
@media (max-width:560px){
    .wi-hd-sch{display:none}         /* 좁으면 검색은 전체보기 패널에서 */
    .wi-grid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr))}
    .wi-ft__tel{font-size:23px}
}

/* ── 8-5 상품 목록 (shop/list.php · listtype.php · search.php) ───────────
 * 페이지 뼈대는 코어가 만들고(#sct 안), 내용은 스킨이 그린다.
 * 스킨은 우리 마크업으로 다시 썼다 — list.10 · list.sort · listcategory.  */
/* 코어 js(shop.list.js)가 id 로 잡는 껍데기다 — 폭은 .wi-main 이 잡는다 */
#sct{position:relative}
#wrapper_title{font-size:clamp(26px,2.8vw,38px);font-weight:700;letter-spacing:-0.035em}
#sct_hhtml,#sct_thtml{margin:24px 0;font-size:14.5px;color:var(--wi-ink-soft)}

/* 현재 위치 → 그 아래 분류명 제목.
   코어의 #wrapper_title 은 "…상품리스트" 가 붙고 빵부스러기보다 위에 있어
   목록 화면에서는 감춘다. 제목은 navigation 스킨이 직접 그린다. */
.wi-main:has(#sct) #wrapper_title{display:none}
.wi-page-title{
    font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-0.035em;
    margin:6px 0 26px;
}
.wi-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--wi-faint);margin-bottom:0}
.wi-crumb a:hover{color:var(--wi-ink)}
.wi-crumb strong{color:var(--wi-ink);font-weight:600}

/* 코어가 최고관리자에게 뿌리는 관리 톱니(분류·상품·이벤트·쿠폰존) — 안 쓴다.
   구매자가 보는 화면이고 관리는 관리자 화면에서 한다(사용자 지시 2026-08-22).
   코어 shop/*.php 가 직접 echo 하는 마크업이라 CSS 로만 걷어낸다. */
.sct_admin,.sit_admin,.sev_admin,.btn_admin.btn{display:none}

/* 하위 분류 — 대표 이미지를 얹은 카드. 좁으면 가로로 넘긴다 */
.wi-cats{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,168px);
    justify-content:start;gap:clamp(12px,1.6vw,26px);margin-bottom:clamp(32px,4vw,52px);
    overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
}
.wi-cats::-webkit-scrollbar{display:none}
.wi-cat{display:flex;flex-direction:column;gap:12px;min-width:0}
.wi-cat__img{
    display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
    border-radius:var(--wi-r-pill);
    background:radial-gradient(120% 120% at 32% 26%,#fbf3ee 0%,var(--wi-tint-3) 45%,#e2cec4 100%);
}
.wi-cat__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.wi-cat:hover .wi-cat__img img{transform:scale(1.06)}
.wi-cat__name{
    text-align:center;font-size:14.5px;font-weight:600;letter-spacing:-0.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wi-cat__cnt{display:block;text-align:center;margin-top:-8px;font-size:12.5px;color:var(--wi-faint)}
@media (max-width:620px){
    .wi-cats{grid-auto-columns:minmax(96px,120px)}
    .wi-cat__name{font-size:13.5px}
}

/* 결과 수 + 정렬 드롭다운 */
/* 아래 여백은 정렬바 자신이 갖는다 — 분류 목록은 코어가 #sct_sortlst 로 한 번
   감싸지만 진열 목록은 그 껍데기가 없어, 껍데기에 주면 화면마다 간격이 달라진다. */
.wi-listbar{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
    padding-bottom:14px;border-bottom:1px solid var(--wi-line);
    margin-bottom:clamp(20px,2.4vw,32px);
}
.wi-listbar__count{font-size:14px;color:var(--wi-mute)}
.wi-listbar__count strong{color:var(--wi-ink);font-weight:600}
.wi-listbar__sort{margin-left:auto;display:inline-flex;align-items:center}
/* 화살표·테두리·바탕은 공용 select 가 준다 — 여기서는 크기와 결만 */
.wi-listbar__sort select{
    height:40px;padding:0 36px 0 16px;border-radius:var(--wi-r-pill);border-color:var(--wi-line);
    background-position:right 15px center;
    font-size:14px;font-weight:600;letter-spacing:-0.02em;
}

/* 상품이 없을 때 */
.sct_noitem,.sct_nofile{
    padding:80px 0;text-align:center;color:var(--wi-faint);font-size:15px;
}

/* 페이지 번호 — 코어 get_paging() 이 만든다 */
.pg_wrap{display:flex;justify-content:center;gap:6px;margin:clamp(48px,6vw,88px) 0 0}
.pg{display:flex;gap:6px;align-items:center}
.pg_page,.pg_current{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:38px;height:38px;padding:0 12px;border-radius:var(--wi-r-btn);
    font-size:14px;font-variant-numeric:tabular-nums;
}
.pg_page{color:var(--wi-mute)}
.pg_page:hover{background:var(--wi-tint);color:var(--wi-ink)}
.pg_current{background:var(--wi-ink);color:#fff;font-weight:600}

/* ── 8-6 상품 상세 (shop/item.php) ───────────────────────────────────────
 * 상단(item.form 스킨)은 시안 template/product-details/ 를 따라 다시 썼다.
 *   풀블리드 히어로 → 2열(좌 서브컷+요약 / 우 sticky 구매카드)
 * 색·폰트는 시안(Noto + 베이지)이 아니라 **우리 토큰**을 쓴다(사용자 결정
 * 2026-08-22) — 메인·목록이 이미 이 팔레트로 서 있어서 상세만 갈라지면 안 된다.
 * 시안의 한글 세리프 제목은 Pretendard 700 으로 옮긴다. Cormorant 는 라틴
 * 서브셋만 넣어 두어서 한글 상품명에 쓰면 Times 로 폴백된다.
 *
 * 마크업의 id·name·핸들러는 코어 js 가 잡는 그대로다 — 옷만 갈아입혔다.  */
#sit{position:relative}       /* 코어 js 가 id 로 잡는 껍데기 */

/* 8-6-1 반쪽 히어로 — 왼쪽 절반은 사진, 오른쪽 절반에서 읽고 산다
 * (C안, 사용자 결정 2026-08-22. 목업 template/product-details/상단-3안.html)
 *
 * 사진 위에 글자를 얹지 않는다 — 그게 "옛날 쇼핑몰" 인상의 원인이었다.
 * 상품명·가격·구매는 전부 오른쪽 칸에 있고, 사진은 화면 높이를 다 쓰며
 * 스크롤 중에도 제자리에 남는다(sticky).
 *
 * ⚠️ 폭은 .wi-main 이 잡는데(→ 4장) 이건 화면 끝까지 나가야 해서 100vw 로
 *    빠져나온다. 가로 스크롤은 **#wrapper 에서** 자른다 — .wi-main 에 걸면
 *    거기서 잘려 어중간해진다(PR#43→#47에서 물렸다).                       */
#wrapper{overflow-x:clip}

.wi-it-split{
    width:100vw;max-width:100vw;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    display:grid;grid-template-columns:1fr 1fr;align-items:start;
    background:var(--wi-surface);
}

/* 왼쪽 — 사진. 여러 장을 겹쳐 두고 .visible 한 장만 보인다 */
/* 헤더를 뺀 높이라 처음 들어왔을 때 딱 한 화면에 들어간다
   (사용자 지시 2026-08-22). 스크롤하면 헤더 바로 아래에 붙어 남는다. */
.wi-it-split__pic{
    position:sticky;top:var(--wi-hd);height:calc(100dvh - var(--wi-hd));min-height:480px;
    overflow:hidden;background:var(--wi-tint-3);
}
/* ⚠️ 사진을 담는 상자를 여기서 명시한다. 바깥(.wi-it-split__pic)이
   position:sticky 라 절대위치의 기준으로 삼으면 브라우저에 따라 엉뚱한
   조상(#sit)에 붙어 폭이 틀어진다(실측 960 자리에 1259). */
#sit_pvi_big{position:relative;width:100%;height:100%;display:block}
#sit_pvi_big a{
    position:absolute;left:0;top:0;width:100%;height:100%;
    display:block;opacity:0;transition:opacity .35s ease;
}
#sit_pvi_big a.visible{opacity:1;z-index:1}
#sit_pvi_big img{width:100%;height:100%;object-fit:cover;display:block}
/* 위쪽만 살짝 어둡게 — 현재 위치 글자가 읽히게 */
.wi-it-split__pic::before{
    content:'';position:absolute;left:0;right:0;top:0;height:180px;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(34,28,27,.42) 0%,rgba(34,28,27,0) 100%);
}
.wi-it-split__crumb{
    position:absolute;z-index:3;left:0;right:0;top:clamp(18px,2vw,28px);
    padding:0 clamp(20px,2.6vw,40px);
}
.wi-crumb--hero{color:rgba(255,255,255,.8);text-shadow:0 1px 10px rgba(34,28,27,.55)}
.wi-crumb--hero a{color:inherit}
.wi-crumb--hero a:hover{color:#fff}
.wi-crumb--hero strong{color:#fff;font-weight:600}

/* 오른쪽 — 상품 정보 + 구매. 세로 가운데에 놓는다 */
.wi-it-split__info{
    display:flex;flex-direction:column;justify-content:center;
    min-height:calc(100dvh - var(--wi-hd));
    padding:clamp(32px,4vw,72px) clamp(24px,4vw,72px);
}
/* 글이 너무 넓게 퍼지지 않게 안쪽 폭을 잡는다.
   ⚠️ 옵션 시트는 빼야 한다 — position:fixed 라도 max-width 는 그대로 먹어서
      화면 전체를 덮지 못하고 이 칸 폭(540px)에 갇힌다. 그래서 시트가 화면
      가운데가 아니라 왼쪽 사진 위에 떴다(실측 540x1243, 2026-08-22). */
.wi-it-split__info > *:not(.wi-sheet){max-width:540px;width:100%}
.wi-it-split__info > .wi-sheet{max-width:none;width:auto}
.wi-it-kicker{
    font-size:11.5px;letter-spacing:0.26em;color:var(--wi-mute-2);text-transform:uppercase;
}

/* 썸네일 — 오른쪽 칸에서 왼쪽 사진을 갈아 끼운다 */
#sit_pvi_thumb{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
#sit_pvi_thumb li{width:auto}
#sit_pvi_thumb a{
    display:block;width:64px;aspect-ratio:1/1;overflow:hidden;
    border-radius:var(--wi-r-img);background:var(--wi-tint-2);
    box-shadow:inset 0 0 0 1px var(--wi-line);
}
#sit_pvi_thumb a.is-on{box-shadow:inset 0 0 0 2px var(--wi-ink)}
#sit_pvi_thumb img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1000px){
    /* 좁으면 위아래로 — 사진이 먼저, 그 아래에서 읽고 산다 */
    .wi-it-split{grid-template-columns:minmax(0,1fr)}
    .wi-it-split__pic{position:static;height:auto;aspect-ratio:1/1;min-height:0}
    .wi-it-split__info{min-height:0;padding:clamp(26px,5vw,40px) var(--wi-gutter)}
    .wi-it-split__info > *{max-width:none}
}

/* 8-6-3 구매 영역 — 반쪽 히어로의 오른쪽 칸이라 카드 옷(테두리·그림자)이 없다 */
#sit_ov #sit_title{
    font-size:clamp(24px,2.4vw,34px);font-weight:700;letter-spacing:-0.04em;
    line-height:1.28;margin:12px 0 10px;
}
#sit_ov #sit_desc{font-size:14.5px;line-height:1.75;color:var(--wi-mute);margin-bottom:0}
#sit_star_sns{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 0;font-size:12.5px}
.sit_star{width:88px;height:auto}
.wi-it-usecnt{color:var(--wi-mute);text-decoration:underline;text-underline-offset:3px}
.wi-it-usecnt:hover{color:var(--wi-ink)}

/* 가격 */
.wi-it-price{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
    padding-bottom:18px;border-bottom:1px solid var(--wi-line);
}
.wi-it-price strong{font-size:clamp(26px,2.8vw,32px);font-weight:800;letter-spacing:-0.035em}
.wi-it-price strong span{font-size:16px;font-weight:600;margin-left:2px}
.wi-it-price del{font-size:13.5px;color:var(--wi-faint-2)}
.wi-it-price__off{font-size:13px;font-weight:700;color:var(--wi-accent)}

/* 적립 · 배송 */
.wi-it-meta{padding:16px 0;border-bottom:1px solid var(--wi-line);font-size:12.5px;line-height:1.75;color:var(--wi-mute)}
.wi-it-meta li + li{margin-top:7px}

#sit_ov_soldout{margin-top:16px;color:var(--wi-accent);font-weight:600;font-size:14px}

/* 8-6-4 옵션
 * ⚠️ 선택된 옵션 줄은 **코어 js/shop.js 의 add_sel_option() 이 만든다.**
 *    마크업을 우리가 못 고치므로 CSS 로만 정리한다.
 *      <li class="sit_opt_list">
 *        hidden×5 · <span class="sit_opt_subj"> · <span class="sit_opt_prc">
 *        <div><input ct_qty> <button 증가> <button 감소> <button 삭제></div>
 *    버튼 글자가 "증가/감소/삭제" 로 그대로 나와서 어지러웠다(2026-08-22).
 *    글자는 숨기고 아이콘을 ::before 로 넣고, order 로 −/입력/+ 순서를 만든다. */
.sit_option{margin-top:20px}
.sit_option h3,#sit_sel_option h3{
    font-size:12px;font-weight:600;color:var(--wi-faint);letter-spacing:0.08em;
    text-transform:uppercase;margin:0 0 10px;
}
.get_item_options,.get_item_supply{margin-bottom:12px}
.get_item_options label,.get_item_supply label{
    display:block;font-size:12.5px;color:var(--wi-mute);margin:0 0 6px;
}
#sit_sel_option select,.sit_option select{
    width:100%;height:46px;padding:0 36px 0 14px;font-size:14px;
    background-position:right 15px center;
}
#sit_opt_info{margin:0 0 14px;font-size:12px;color:var(--wi-faint)}

/* 선택된 옵션 목록 */
#sit_sel_option{margin-top:20px}
#sit_opt_added{display:flex;flex-direction:column;gap:8px;margin:0;font-size:14px}
.sit_opt_list,.sit_spl_list{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;
    padding:13px 14px;border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
    background:var(--wi-surface);
}
.sit_opt_subj,.opt_name{
    grid-column:1;min-width:0;font-size:13px;font-weight:600;line-height:1.5;letter-spacing:-0.02em;
}
.sit_opt_prc{grid-column:2;justify-self:end;font-size:12.5px;font-weight:400;color:var(--wi-mute)}
/* 수량 묶음 — 코어가 만드는 익명 div, 또는 우리 스킨의 .opt_count */
.sit_opt_list > div,.sit_spl_list > div,.opt_count{
    grid-column:1 / -1;display:flex;align-items:center;gap:0;
}
.sit_opt_list input[type=text],.sit_spl_list input[type=text],.opt_count input[type=text]{
    order:2;width:46px;height:34px;text-align:center;font-size:13.5px;
    border:1px solid var(--wi-line-4);border-left:0;border-right:0;border-radius:0;
    background:var(--wi-surface);color:var(--wi-ink);
}
.sit_opt_list button,.sit_spl_list button,.opt_count button{
    width:34px;height:34px;flex:0 0 34px;font-size:0;    /* 글자(증가·감소·삭제)를 감춘다 */
    border:1px solid var(--wi-line-4);background:var(--wi-surface);color:var(--wi-ink);
    display:inline-flex;align-items:center;justify-content:center;
}
.sit_opt_list button::before,.sit_spl_list button::before,.opt_count button::before{
    font-size:15px;line-height:1;font-weight:400;
}
.sit_qty_minus{order:1;border-radius:var(--wi-r-btn) 0 0 var(--wi-r-btn)}
.sit_qty_minus::before{content:'−'}
.sit_qty_plus{order:3;border-radius:0 var(--wi-r-btn) var(--wi-r-btn) 0}
.sit_qty_plus::before{content:'+'}
.sit_opt_del{
    order:5;margin-left:8px;border:0;background:none;color:var(--wi-faint);
}
/* ⚠️ 코어 cartoption.php 는 금액(.sit_opt_prc)을 수량 묶음 **안**에 넣는다.
   그러면 위 grid-column 이 먹지 않고 맨 앞에 서므로 여기서 순서를 잡는다.
   (shop.js 가 만드는 줄은 금액이 묶음 밖에 있어 이 규칙에 걸리지 않는다) */
.opt_count .sit_opt_prc{order:4;margin-left:auto}
.sit_opt_del::before{content:'×';font-size:17px}
.sit_opt_del:hover{color:var(--wi-ink)}
.sit_opt_list .sit_opt_prc:empty,.sit_spl_list .sit_opt_prc:empty{display:none}
/* 아이콘 폰트를 쓰는 코어 마크업(우리 스킨의 옵션 없는 상품)은 i 를 감춘다 */
.sit_opt_list button i,.sit_spl_list button i,.opt_count button i{display:none}

/* 8-6-5 합계 · 버튼 */
/* ⚠️ 코어 price_calculate() 가 넣는 마크업은
     <span>총 금액 :</span><strong>24,000</strong> 원
   마지막 "원" 은 태그가 없는 익명 플렉스 아이템이라 CSS 로 집을 수 없다.
   space-between 을 쓰면 금액이 한가운데로 밀리고 "원" 만 끝에 붙는다.
   strong 에 margin-left:auto 를 줘 금액+원 을 한 덩어리로 오른쪽에 붙인다. */
#sit_tot_price{
    display:flex;align-items:baseline;gap:4px;
    margin-top:20px;padding-top:18px;border-top:1px solid var(--wi-ink);
    font-size:13px;color:var(--wi-mute);
}
#sit_tot_price strong{
    margin-left:auto;
    font-size:26px;font-weight:800;color:var(--wi-ink);letter-spacing:-0.03em;
}

/* 하트 + 장바구니 한 줄, 바로구매는 그 아래 (사용자 지시 2026-08-22) */
#sit_ov_btn{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#sit_ov_btn button,#sit_ov_btn a,#sit_ov_btn input[type=submit]{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:54px;border:0;border-radius:var(--wi-r-btn);
    font-size:15px;font-weight:600;letter-spacing:-0.02em;cursor:pointer;
    background:var(--wi-ink);color:#fff;
}
/* 하트 · 장바구니(아이콘) · 바로구매를 한 줄로 (사용자 지시 2026-08-22).
   앞의 둘은 정사각 아이콘, 바로구매가 남는 자리를 다 쓴다. */
#sit_ov_btn .sit_btn_wish{
    order:1;flex:0 0 54px;background:var(--wi-tint);color:var(--wi-ink);font-size:17px;
}
#sit_ov_btn .sit_btn_wish:hover{background:var(--wi-warm)}
/* 담아 둔 상품 — 채운 하트로 한눈에 구별되게 */
#sit_ov_btn .sit_btn_wish.is-on{background:var(--wi-warm);color:var(--wi-accent)}
#sit_ov_btn .sit_btn_cart{
    order:2;flex:0 0 54px;font-size:17px;
    background:var(--wi-surface);color:var(--wi-ink);box-shadow:inset 0 0 0 1px var(--wi-ink);
}
#sit_ov_btn .sit_btn_cart:hover{background:var(--wi-tint)}
#sit_ov_btn .sit_btn_buy{order:3;flex:1 1 auto}
#sit_ov_btn .sit_btn_buy:hover{background:#3a322f}
#sit_ov_btn #sit_btn_alm{order:4;flex:1 1 100%;background:var(--wi-surface);color:var(--wi-ink);box-shadow:inset 0 0 0 1px var(--wi-ink)}
#sit_ov_btn .itemform-naverpay{order:5;flex:1 1 100%}

/* 탭 — 상품정보 · 사용후기 · 상품문의 · 배송/교환 (스킨이 JS 로 전환한다) */
#sit_info{margin-top:clamp(48px,6vw,88px)}
#sit_rel{margin-top:clamp(48px,6vw,88px)}
#sit_rel h2,#sit_info h2.contents_tit{
    font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-0.03em;margin-bottom:24px;
}
.tab_tit{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--wi-line)}
.tab_tit li{flex:1 1 auto}
.tab_tit button{
    width:100%;padding:18px 8px;text-align:center;background:none;border:0;
    font-size:15px;font-weight:600;color:var(--wi-mute);letter-spacing:-0.02em;cursor:pointer;
}
.tab_tit button.selected{color:var(--wi-ink);box-shadow:inset 0 -2px 0 var(--wi-ink)}
.item_use_count,.item_qa_count{
    display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
    margin-left:5px;padding:0 6px;border-radius:var(--wi-r-pill);
    background:var(--wi-tint);color:var(--wi-mute);font-size:11.5px;font-weight:700;
}
.tab_con > li{padding-top:clamp(32px,4vw,56px)}
.tab_con h3{font-size:17px;font-weight:700;letter-spacing:-0.025em;margin:28px 0 14px}

/* SNS 공유 · 별점 */
#sit_star_sns{position:relative}
.sit_star{width:96px;height:auto}
#sit_btn_opt{position:relative;display:flex;align-items:center;gap:14px}
/* 별점 줄의 하트는 **개수 표시**다 — 코어에 클릭 핸들러가 없다(#btn_wish 는 id,
   목록 카드의 위시 버튼은 .btn_wish 클래스). 손 모양 커서를 주면 눌리는 줄 안다.
   실제 위시 담기는 아래 구매 버튼 줄의 .sit_btn_wish 다. */
#btn_wish{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--wi-mute)}
.btn_sns_share{color:var(--wi-mute);font-size:14px}
/* 공유 버튼을 눌러야 열린다 — 스킨 JS 가 .show() 로 연다(인라인 display 가 이긴다).
   스킨 style.css 가 감춰 주던 것이라, 그걸 걷어낸 뒤로 늘 펼쳐져 별점 줄과
   겹쳐 있었다(2026-08-21). 자식을 inline-block 으로 둬야 .show() 뒤에도 한 줄로 선다. */
.sns_area{
    display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:20;
    white-space:nowrap;padding:9px 12px;border-radius:var(--wi-r-box);
    background:var(--wi-surface);box-shadow:0 8px 28px rgba(34,28,27,.13);
}
/* ⚠️ 코어가 주는 facebook.png·twitter.png 는 **흰색 글리프**다(불투명 픽셀
   평균색이 흰색 — 실측 2026-08-22). 밝은 판 위에 그대로 얹으면 자리만 있고
   아무것도 안 보였다. 어두운 동그라미를 깔아 준다. 마크업은 코어가 만드는
   것($sns_share_links)이라 못 고치므로 CSS 로만 해결한다. */
.sns_area a{
    display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;margin-right:8px;
    border-radius:50%;background:var(--wi-ink);color:#fff;font-size:13px;
}
.sns_area a:last-child{margin-right:0}
.sns_area a:hover{background:var(--wi-accent)}
.sns_area img{width:17px;height:17px}

/* 하단 구매바 — 스킨은 이걸 상품정보 탭 안쪽(#sit_info)에 넣는다.
 * 그대로 sticky 로 두면 탭 내용을 덮는다(실측). 넓은 화면에서는 위쪽 구매
 * 영역이 늘 닿는 거리라 감추고, 좁은 화면에서만 화면 아래 고정 바로 쓴다. */
#sit_buy{display:none}
@media (max-width:900px){
    #sit_buy{
        display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;
        background:rgba(250,247,245,.96);
        -webkit-backdrop-filter:saturate(140%) blur(10px);
                backdrop-filter:saturate(140%) blur(10px);
        border-top:1px solid var(--wi-line);
    }
    .sit_buy_inner{padding:10px var(--wi-gutter)}
    /* 바에는 합계와 버튼만 남긴다 — 옵션은 위쪽 구매카드의 시트에서 고른다.
       ⚠️ 코어 item.info 스킨은 여기에 **선택옵션 select 를 한 벌 더** 그린다
       (it_side_option · it_side_supply). 감추지 않으면 바가 화면 아래를
       300px 넘게 덮는다 — 좁은 화면에서 실측 327px(2026-08-22).
       바의 장바구니·바로구매는 위쪽 버튼을 대신 눌러 주는 것이라(스킨 JS)
       select 를 감춰도 주문에는 영향이 없다. */
    #sit_buy .sit_side_option,#sit_buy .sit_sel_option,
    #sit_buy .sit_opt_list,#sit_buy .sit_opt_subj,#sit_buy h2,#sit_buy .sum_price{display:none}
    #sit_buy .sum_section{display:flex;align-items:center;gap:12px}
    /* 합계는 구매카드의 #sit_tot_price 를 그대로 비춘다 → js/wi-optsheet.js */
    #sit_buy .sit_tot_price{flex:0 0 auto;font-size:12px;color:var(--wi-mute);white-space:nowrap}
    #sit_buy .sit_tot_price:empty{display:none}
    #sit_buy .sit_tot_price span{display:none}      /* "총 금액 :" 은 좁은 바에서 자리만 먹는다 */
    #sit_buy .sit_tot_price strong{font-size:19px;font-weight:800;color:var(--wi-ink);letter-spacing:-0.03em}
    #sit_buy .sit_order_btn{flex:1 1 auto;display:flex;gap:8px}
    #sit_buy .sit_order_btn button,#sit_buy .sit_order_btn a{
        flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;
        height:50px;border:0;border-radius:var(--wi-r-btn);
        font-size:15px;font-weight:600;cursor:pointer;background:var(--wi-ink);color:#fff;
    }
    #sit_buy .sit_btn_cart{background:var(--wi-surface);color:var(--wi-ink);box-shadow:inset 0 0 0 1px var(--wi-ink)}
    #sit{padding-bottom:calc(var(--wi-buybar) + 16px)}   /* 고정 바에 가리지 않게 */
}

/* 관련상품이 비었을 때 자리를 크게 잡지 않게 */
#sit_rel{margin-top:clamp(48px,6vw,88px)}
#sit_rel .empty_list,#sit_rel .sct_noitem,#sit_rel div:empty{min-height:0}
#sit_rel .sct_noitem{padding:28px 0;font-size:14px}

/* 상품정보·후기·문의 본문 */
#sit_inf,#sit_use,#sit_qa,#sit_dvr,#sit_ex{padding:clamp(36px,4vw,64px) 0 0;font-size:15px;line-height:1.8}
#sit_inf img{max-width:100%;height:auto}
#sit_inf h2,#sit_use h2,#sit_qa h2,#sit_dvr h2,#sit_ex h2{
    font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-0.03em;margin-bottom:20px;
}

/* 이 분류의 이전/다음 상품 — 구매카드 맨 아래 두 줄 (사용자 지시 2026-08-22).
   예전에는 본문과 탭 사이에 카드 두 장으로 놓였는데 흐름에 걸렸다. */
#sit_siblings{
    display:flex;flex-direction:column;
    margin-top:18px;padding-top:16px;border-top:1px solid var(--wi-line);
}
#sit_siblings > span{display:none}          /* 한쪽이 없을 때의 빈 칸 */
.wi-sib{
    display:flex;align-items:baseline;gap:10px;min-width:0;
    padding:9px 2px;font-size:13px;color:var(--wi-mute);
}
.wi-sib + .wi-sib{border-top:1px solid var(--wi-line-3)}
.wi-sib:hover{color:var(--wi-ink)}
/* 왼쪽에 방향(‹ 이전 상품), 오른쪽에 상품명 — 두 줄이 나란히 선다 */
.wi-sib__dir{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
    font-size:11.5px;letter-spacing:0.1em;color:var(--wi-faint);white-space:nowrap;
}
.wi-sib__dir::before{
    content:'';width:6px;height:6px;flex:0 0 auto;
    border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
    transform:translateX(1px) rotate(135deg);
}
.wi-sib--next .wi-sib__dir{order:2}
.wi-sib--next .wi-sib__dir::before{transform:translateX(-1px) rotate(-45deg)}
.wi-sib__name{
    flex:1 1 auto;min-width:0;
    font-size:13.5px;font-weight:600;letter-spacing:-0.02em;color:var(--wi-ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wi-sib--next .wi-sib__name{text-align:right}

/* ── 8-6-2 상품 상세 본문 — 상세설명 · 정보고시 · 후기 · 문의 ───────────
 * 여기부터는 데이터가 있어야 화면에 나오는 영역이다. 데모에 후기·문의·
 * 관련상품·정보고시를 채우고 나서야 무스타일인 게 드러났다(2026-08-21).  */

/* 상품정보 탭의 "상품 상세설명" 라벨은 감춘다 — 탭 이름과 겹치고,
   상품명·요약은 이미 상단 히어로에 나온다(사용자 지시 2026-08-22). */
/* ── 상품정보 탭 — 본문 + AT A GLANCE 사이드 (시안 상세본문.dc.html) ──
   예전에는 본문이 880px 만 쓰고 오른쪽이 통째로 비어 있었다. 그 자리가
   사이드 카드 자리다(2026-08-22). 좁아지면 사이드가 본문 아래로 내려간다. */
.wi-inf{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,64px);align-items:start}
.wi-inf__main{min-width:0}
/* 상세설명도 고시도 없는 상품 — 제목만 남지 않게 한 줄 둔다 */
.wi-inf__none{padding:clamp(28px,4vw,52px) 0;text-align:center;font-size:13.5px;color:var(--wi-mute-2)}
.wi-inf__side{
    position:sticky;top:88px;min-width:0;
    padding:24px 22px;background:var(--wi-surface);
    border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
}
.wi-inf__side h3{
    font-size:11px;font-weight:600;letter-spacing:0.2em;color:var(--wi-faint);
    text-transform:uppercase;margin:0 0 16px;
}
.wi-inf__side dl{display:flex;flex-direction:column;gap:14px;font-size:13px}
.wi-inf__side dt{color:var(--wi-faint);margin-bottom:4px}
.wi-inf__side dd{margin:0;color:var(--wi-ink);line-height:1.6}
.wi-inf__ask{
    margin:22px 0 0;padding-top:18px;border-top:1px solid var(--wi-line);
    font-size:12px;line-height:1.8;color:var(--wi-mute-2);
}
.wi-inf__ask a{color:var(--wi-ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
    .wi-inf{grid-template-columns:minmax(0,1fr)}
    .wi-inf__side{position:static;order:-1}   /* 좁으면 요약을 먼저 보여 준다 */
}

/* 상세설명 — 구매자가 관리자에 붙여넣는 평범한 HTML 을 그대로 받아 준다.
   클래스를 요구하지 않는다. 리셋에서 지운 목록·표 모양을 여기서만 되살린다. */
#sit_inf_explan{font-size:15.5px;line-height:1.9;color:var(--wi-ink-soft);counter-reset:wi-sec}
#sit_inf_explan > :first-child{margin-top:0}
#sit_inf_explan > :last-child{margin-bottom:0}
#sit_inf_explan p{margin:0 0 18px}
#sit_inf_explan h3,#sit_inf_explan h4{
    color:var(--wi-ink);font-weight:700;letter-spacing:-0.025em;line-height:1.4;margin:40px 0 14px;
}
#sit_inf_explan h3{font-size:clamp(19px,2vw,23px)}
/* 시안의 "01 · CONCEPT" 자리. 상세설명은 관리자가 쓰는 자유 HTML 이라
   번호를 PHP 로 붙일 수 없어 CSS 카운터로 센다 — 몇 단락을 쓰든 따라간다. */
#sit_inf_explan h3::before{
    counter-increment:wi-sec;content:counter(wi-sec,decimal-leading-zero);
    display:block;margin-bottom:10px;
    font-size:11px;font-weight:600;letter-spacing:0.24em;color:var(--wi-accent);
}
#sit_inf_explan h4{font-size:16px;margin-top:28px}
#sit_inf_explan ul,#sit_inf_explan ol{margin:0 0 18px;padding-left:22px}
#sit_inf_explan ul{list-style:disc}
#sit_inf_explan ol{list-style:decimal}
#sit_inf_explan li{margin-bottom:8px;padding-left:2px}
#sit_inf_explan li::marker{color:var(--wi-faint)}
#sit_inf_explan strong,#sit_inf_explan b{font-weight:700;color:var(--wi-ink)}
#sit_inf_explan a{color:var(--wi-accent);text-decoration:underline;text-underline-offset:3px}
#sit_inf_explan img{border-radius:var(--wi-r-img)}
#sit_inf_explan hr{display:block;height:1px;margin:32px 0;border:0;background:var(--wi-line)}
#sit_inf_explan blockquote{
    margin:26px 0 0;padding:16px 18px;background:var(--wi-tint);border-radius:var(--wi-r-box);
    font-size:13.5px;line-height:1.75;color:var(--wi-mute);
}
#sit_inf_explan blockquote p{margin:0}

/* 상세설명 안의 표 · 정보고시 표 — 같은 옷을 입힌다 */
#sit_inf_explan table,#sit_inf_open{
    width:100%;margin:0 0 18px;font-size:14.5px;border-top:1px solid var(--wi-ink);
}
#sit_inf_open{margin-bottom:0}

/* 상품 정보 고시 — 12항목이라 접어 둔다(시안). <details> 라 JS 가 필요 없다 */
.wi-notice{margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--wi-line-2)}
.wi-notice > summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:22px 0;cursor:pointer;list-style:none;
    font-size:14.5px;font-weight:600;letter-spacing:-0.02em;color:var(--wi-ink);
}
.wi-notice > summary::-webkit-details-marker{display:none}
.wi-notice > summary em{font-style:normal;font-size:12.5px;font-weight:400;color:var(--wi-mute);white-space:nowrap}
.wi-notice > summary em::after{content:'펼쳐 보기 +'}
.wi-notice[open] > summary em::after{content:'접기 −'}
.wi-notice > summary:hover{color:var(--wi-accent)}
.wi-notice #sit_inf_open{margin-bottom:28px}
#sit_inf_explan th,#sit_inf_explan td,#sit_inf_open th,#sit_inf_open td{
    padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--wi-line);
}
#sit_inf_explan th,#sit_inf_open th{color:var(--wi-mute);font-weight:400;white-space:nowrap}
#sit_inf_explan th{width:150px}
#sit_inf_open th{width:230px;white-space:normal}
@media (max-width:600px){
    #sit_inf_explan th{width:96px;padding-left:0}
    #sit_inf_open th{width:118px;padding-left:0}
}

/* 배송/교환 안내도 관리자에서 붙여넣는 HTML 이다 */
#sit_dvr,#sit_ex{max-width:880px;color:var(--wi-ink-soft)}
#sit_ex{padding-top:clamp(28px,3vw,44px)}
#sit_dvr h3,#sit_ex h3{font-size:17px;font-weight:700;color:var(--wi-ink);margin:0 0 14px}
#sit_dvr p,#sit_ex p{margin:0 0 14px}
#sit_dvr ul,#sit_ex ul{margin:0 0 14px;padding-left:22px;list-style:disc}
#sit_dvr li,#sit_ex li{margin-bottom:8px}
#sit_dvr li::marker,#sit_ex li::marker{color:var(--wi-faint)}

/* 후기·문의의 "쓰기 / 더보기" 버튼 (코어 스킨의 btn01·btn02) */
#sit_use_wbtn,#sit_qa_wbtn{display:flex;flex-wrap:wrap;gap:8px}
#sit_use_wbtn a,#sit_qa_wbtn a{
    display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;
    border-radius:var(--wi-r-btn);font-size:13.5px;font-weight:600;letter-spacing:-0.02em;
    background:var(--wi-ink);color:#fff;
}
#sit_use_wbtn .btn01,#sit_qa_wbtn .btn01{
    background:var(--wi-surface);color:var(--wi-ink);box-shadow:inset 0 0 0 1px var(--wi-line);
}
#sit_use_wbtn a:hover,#sit_qa_wbtn a:hover{color:#fff;background:var(--wi-accent)}
#sit_use_wbtn .btn01:hover,#sit_qa_wbtn .btn01:hover{color:var(--wi-ink);background:var(--wi-tint);box-shadow:inset 0 0 0 1px var(--wi-ink)}

/* 후기·문의 탭의 머리 — **두 탭이 같은 것을 쓴다.** 예전에는 문의 쪽만
   버튼 줄이라 탭을 옮길 때 높이가 달라 화면이 튀었다(2026-08-22). */
.wi-tabbar{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;min-height:84px;
    padding:22px clamp(18px,2vw,26px);background:var(--wi-tint);border-radius:var(--wi-r-box);
}
.wi-tabbar h4{font-size:15.5px;font-weight:600;letter-spacing:-0.02em}
.wi-tabbar h4 span{font-weight:400;color:var(--wi-mute)}
.wi-tabbar .sit_star{width:auto;font-size:15px}   /* 코어 png 를 테마 별 문자로 바꿨다 */
.wi-tabbar #sit_use_wbtn,.wi-tabbar #sit_qa_wbtn{margin-left:auto}

/* 사용후기 — 목록. 후기는 늘 펼쳐 둔다(스킨의 "내용보기" 토글은 감춘다) */
#sit_use_ol{margin-top:10px}
/* 한 칸이다 — 첨부사진은 본문 위에 줄로 모은다. 왼쪽 사진 칸을 두지 않는 이유:
   코어는 사진이 없으면 상품 이미지를 넣어(get_itemuselist_thumbnail) 줄마다 같은
   사진이 반복되고, 사진 있는 줄만 칸을 열면 글의 왼쪽 끝이 들쭉날쭉해진다. */
.sit_use_li{padding:26px 0;border-bottom:1px solid var(--wi-line)}
.sit_use_con .wi-photos{--wi-shot:88px;margin-bottom:12px}
.sit_use_star .wi-stars{font-size:14px}
.sit_use_tit{margin:9px 0 5px;font-size:15.5px;font-weight:600;letter-spacing:-0.02em;color:var(--wi-ink)}
.sit_use_dl dd:last-child{font-size:13px;color:var(--wi-mute)}
.st_bg{display:inline-block;width:1px;height:11px;margin:0 9px;background:var(--wi-line);vertical-align:-1px}
.sit_use_li_title{display:none}
.sit_use_con{margin-top:9px}
.sit_use_p{font-size:14.5px;line-height:1.8;color:var(--wi-ink-soft)}
.sit_use_p img{border-radius:var(--wi-r-img);margin-top:10px}
.sit_use_cmd{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sit_use_cmd a{
    padding:5px 11px;border-radius:var(--wi-r-btn);box-shadow:inset 0 0 0 1px var(--wi-line);
    font-size:12.5px;color:var(--wi-mute);
}
/* 판매자 답변 — 마크업은 코어 스킨에 있었지만 **데모에 답변 데이터가 없어**
   여태 한 번도 화면에 안 나왔다(2026-08-22 시딩으로 채웠다). 전체 후기 목록의
   .wi-use__reply 와 같은 모양이다. */
.sit_use_reply{
    margin-top:14px;padding:14px 16px;border-radius:var(--wi-r-img);background:var(--wi-tint);
    display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 9px;
}
.use_reply_icon{
    flex:0 0 auto;display:inline-flex;align-items:center;height:20px;padding:0 8px;
    border-radius:var(--wi-r-pill);background:var(--wi-ink);color:#fff;font-size:11px;font-weight:700;
}
.use_reply_tit{font-size:13px;font-weight:600;color:var(--wi-ink)}
.use_reply_name{font-size:11.5px;color:var(--wi-faint)}
.use_reply_p{flex:1 1 100%;font-size:12.5px}
.use_reply_p .wi-prose{font-size:12.5px;line-height:1.9}

/* 후기·문의가 없을 때 — 코어 스킨은 <p class="sit_empty"> 를 낸다 */
.sit_empty{padding:44px 0;text-align:center;font-size:14px;color:var(--wi-mute)}

/* 상품문의 — 목록. 이쪽은 접어 둔다(질문 제목만 훑게) */
#sit_qa_ol{margin-top:14px;border-top:1px solid var(--wi-line)}
.sit_qa_li{border-bottom:1px solid var(--wi-line)}
.sit_qa_li_title{
    display:flex;align-items:center;gap:11px;width:100%;padding:20px 0 6px;
    text-align:left;font-size:15px;font-weight:600;letter-spacing:-0.02em;color:var(--wi-ink);
}
.sit_qa_li_title::after{
    content:'';flex:0 0 auto;margin-left:auto;width:7px;height:7px;
    border-right:1.5px solid var(--wi-mute);border-bottom:1.5px solid var(--wi-mute);
    transform:translateY(-3px) rotate(45deg);
}
.sit_qaa_done,.sit_qaa_yet{
    flex:0 0 auto;display:inline-flex;align-items:center;height:23px;padding:0 10px;
    border-radius:var(--wi-r-pill);font-size:11.5px;font-weight:700;letter-spacing:0;
}
/* 비밀글 표시 — 제목 **앞**에 작게. 코어 gif 를 걷어내고 아이콘 폰트로.
   ⚠️ 태그까지 함께 짚어야 한다 — FontAwesome 의 .fa{font-size:inherit} 이
      뒤에 와서, .wi-secret 만으로는 크기 지정이 밀린다. */
i.wi-secret{margin-right:7px;font-size:12px;color:var(--wi-mute)}
.sit_qaa_done{background:var(--wi-ink);color:#fff}
.sit_qaa_yet{background:var(--wi-surface);color:var(--wi-mute);box-shadow:inset 0 0 0 1px var(--wi-line)}
.sit_qa_dl{padding:0 0 20px;font-size:13px;color:var(--wi-mute)}
.sit_qa_con{display:none;padding:0 0 24px}
.sit_qa_qaq,.sit_qa_qaa{display:flex;gap:12px;font-size:14.5px;line-height:1.8}
.sit_qa_qaa{
    margin-top:14px;padding:16px 18px;background:var(--wi-tint);
    border-radius:var(--wi-r-box);color:var(--wi-ink-soft);
}
.qa_alp{
    flex:0 0 24px;display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;margin-top:3px;border-radius:var(--wi-r-pill);
    font-size:12px;font-weight:800;background:var(--wi-ink);color:#fff;
}
.sit_qa_qaa .qa_alp{background:var(--wi-accent)}
.sit_qa_cmd{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sit_qa_cmd a{
    padding:5px 11px;border-radius:var(--wi-r-btn);box-shadow:inset 0 0 0 1px var(--wi-line);
    font-size:12.5px;color:var(--wi-mute);
}

/* 후기·문의 안의 페이지 표시는 탭 안에 있으니 여백을 줄인다 */
#sit_use_list .pg_wrap,#sit_qa_list .pg_wrap{margin-top:clamp(28px,3vw,44px)}

/* 담은 것이 없을 때 → js/wi-optsheet.js 가 넣는다 */
.wi-opt-none{margin:10px 0 0;font-size:13px;color:var(--wi-mute-2)}

/* 옵션 제목 — 선택옵션 / 추가상품 / 선택된 옵션 */
.sit_option h3,#sit_sel_option h3,#sit_supply h3{
    font-size:13px;font-weight:600;color:var(--wi-mute);letter-spacing:-0.01em;margin:18px 0 8px;
}
.get_item_options label{display:block;font-size:13px;color:var(--wi-mute);margin:12px 0 6px}
.get_item_options span{display:block}
#sit_opt_info{margin-top:14px;font-size:13px;color:var(--wi-mute)}

@media (max-width:600px){
    .sit_use_con .wi-photos{--wi-shot:64px}
    .wi-tabbar{gap:10px 14px}
    .wi-tabbar #sit_use_wbtn,.wi-tabbar #sit_qa_wbtn{margin-left:0;width:100%}
    #sit_use_wbtn a,#sit_qa_wbtn a{flex:1 1 auto}
}

/* ── 8-7 장바구니 (shop/cart.php) ────────────────────────────────────
 * 시안 template/cart/장바구니.dc.html
 * 코어는 <table> 한 벌로 그리고 수량은 팝업 안에서만 고칠 수 있었다.
 * 여기서는 카드 한 장이 상품 하나고, 그 안에서 옵션 줄마다 수량을 고친다.
 * ⚠️ 폭은 .wi-main 이 잡는다 — 여기서 max-width 를 다시 걸지 않는다.     */
.wi-cart{padding-bottom:calc(var(--wi-cartbar) + clamp(40px,5vw,72px))}


.wi-cart__grid{
    display:grid;gap:clamp(24px,3vw,44px);
    grid-template-columns:minmax(0,1fr);
    align-items:start;
}
@media (min-width:1000px){ .wi-cart__grid{grid-template-columns:minmax(0,1fr) 356px} }

/* 목록 위 한 줄 — 전체선택 · 선택삭제 · 비우기 */
.wi-cart__bar{display:flex;align-items:center;gap:8px;padding:0 4px 13px}
.wi-cart__bar .wi-link{margin-left:0}
.wi-cart__bar .wi-check{margin-right:auto}
.wi-cart__bar>span{color:var(--wi-line-4)}
.wi-cart__count{font-weight:400;color:var(--wi-mute-2)}

/* ── 상품 카드 한 장 ───────────────────────────────────────────────── */
.wi-cartrow{
    display:grid;gap:clamp(13px,1.8vw,20px);
    grid-template-columns:auto clamp(88px,10vw,104px) minmax(0,1fr) auto;
    align-items:start;
    background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
    padding:clamp(16px,2vw,22px);
}
.wi-cartrow+.wi-cartrow{margin-top:12px}
.wi-cartrow.is-off{opacity:.5}
.wi-cartrow__chk{padding-top:4px}
.wi-cartrow__img{
    display:block;aspect-ratio:3/4;border-radius:var(--wi-r-img);
    overflow:hidden;background:var(--wi-tint-2);
}
.wi-cartrow__img img{width:100%;height:100%;object-fit:cover}
.wi-cartrow__body{display:flex;flex-direction:column;gap:11px;min-width:0}
.wi-cartrow__name{font-size:16px;font-weight:700;letter-spacing:-0.02em;line-height:1.45;text-wrap:pretty}
.wi-cartrow__name:hover{color:var(--wi-accent)}

/* 옵션 줄 — 선택옵션 하나짜리 상품이면 시안처럼 스테퍼 한 개만 보인다.
   바탕을 깔면 입력칸처럼 보여서 선만 그었다. 줄이 여럿일 때만 줄값을 쓴다
   (하나면 오른쪽 소계와 같은 값이라 두 번 읽힌다).                        */
.wi-cartopts{display:flex;flex-direction:column;gap:9px}
.wi-cartopt{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wi-cartopt+.wi-cartopt{padding-top:9px;border-top:1px dashed var(--wi-line)}
.wi-cartopt.is-busy{opacity:.5;pointer-events:none}
.wi-cartopt__name{flex:1 1 120px;min-width:0;font-size:12.5px;color:var(--wi-mute)}
.wi-cartopt__name i{
    font-style:normal;font-size:10px;font-weight:700;letter-spacing:0.06em;
    color:#fff;background:var(--wi-faint);border-radius:2px;
    padding:2px 5px;margin-right:6px;vertical-align:1px;
}
.wi-cartopt__sum{font-size:13px;font-weight:600;min-width:70px;text-align:right}
.wi-cartopt__x{width:26px;height:26px;color:var(--wi-faint);font-size:14px;line-height:1}
.wi-cartopt__x:hover{color:var(--wi-ink)}

.wi-cartrow__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wi-cartrow__ship{font-size:11.5px;color:var(--wi-mute-2)}

.wi-cartrow__side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.wi-cartrow__del{width:28px;height:28px;color:var(--wi-faint);font-size:16px;line-height:1}
.wi-cartrow__del:hover{color:var(--wi-ink)}
.wi-cartrow__sum{margin-top:6px;font-size:19px;font-weight:800;letter-spacing:-0.02em;white-space:nowrap}
.wi-cartrow__sum em{font-style:normal;font-size:12.5px;font-weight:400;margin-left:2px}
.wi-cartrow__pt{font-size:11px;color:var(--wi-faint);white-space:nowrap}

/* 목록 아래 — 쇼핑 계속하기 + 무료배송까지 남은 금액 */
.wi-cart__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:22px}
.wi-cart__ship{margin-left:auto;font-size:12px;color:var(--wi-mute-2);line-height:1.7}
.wi-cart__ship b{font-weight:700;color:var(--wi-ink)}

/* 빈 장바구니 */
.wi-cart__empty{
    background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
    padding:clamp(56px,8vw,84px) 20px;text-align:center;
}
.wi-cart__empty-t{font-size:18px;font-weight:700;letter-spacing:-0.02em}
.wi-cart__empty-s{margin:10px 0 26px;font-size:13.5px;color:var(--wi-mute-2)}

/* 좁은 화면 — 소계·포인트를 사진 옆이 아니라 아래 한 줄로 내린다.
   네 칸(체크·사진·본문·소계)을 그대로 두면 본문이 두 글자 폭으로 눌린다. */
@media (max-width:620px){
    .wi-cartrow{position:relative;grid-template-columns:auto clamp(74px,20vw,96px) minmax(0,1fr)}
    .wi-cartrow__side{
        grid-column:2 / -1;flex-direction:row;align-items:baseline;
        justify-content:flex-start;gap:10px;text-align:left;
        padding-top:11px;border-top:1px solid var(--wi-line);
    }
    .wi-cartrow__sum{margin-top:0}
    .wi-cartrow__del{position:absolute;top:10px;right:10px}
    .wi-cartopt{gap:8px}
    .wi-cartopt__name{flex:1 1 100%}
    /* ⚠️ 여기서 margin-left:auto 를 주면 남는 자리를 여백이 다 먹어 × 가
       다음 줄로 밀린다 — 늘어나는 쪽을 금액으로 잡는다. */
    .wi-cartopt__sum{flex:1 1 auto;min-width:0;text-align:right}
}

/* ── 결제 예정 금액 ───────────────────────────────────────────────── */
.wi-cart-sum{
    position:sticky;top:calc(var(--wi-hd) + 16px);
    background:var(--wi-surface);border:1px solid var(--wi-line-2);border-radius:var(--wi-r-box);
    box-shadow:0 22px 54px rgba(34,28,27,.07);
    padding:clamp(22px,2.4vw,28px);
    display:flex;flex-direction:column;gap:9px;
}
.wi-cart-sum h2{font-size:17px;font-weight:700;letter-spacing:-0.02em;margin-bottom:11px}
.wi-cart-sum__rows{display:flex;flex-direction:column;gap:12px;font-size:13px;padding-bottom:18px;border-bottom:1px solid var(--wi-line)}
.wi-cart-sum__rows>div{display:flex;justify-content:space-between;gap:12px}
.wi-cart-sum__rows dt{color:var(--wi-mute)}
.wi-cart-sum__tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 0 4px}
.wi-cart-sum__tot span{font-size:13px;color:var(--wi-mute)}
.wi-cart-sum__tot strong{font-size:29px;font-weight:800;letter-spacing:-0.03em}
.wi-cart-sum__tot em{font-style:normal;font-size:14px;font-weight:400;margin-left:3px}
.wi-cart-sum__pt{font-size:11.5px;color:var(--wi-faint);text-align:right;padding-bottom:14px}
.wi-cart-sum__note{margin-top:12px;font-size:11.5px;color:var(--wi-faint);line-height:1.8}
.wi-cart-sum .wi-btn--line{justify-content:center;border-color:var(--wi-line-2);color:var(--wi-mute)}
.wi-cart-sum .wi-btn--line:hover{border-color:var(--wi-ink);background:none;color:var(--wi-ink)}

/* ── 하단 고정 바 ─────────────────────────────────────────────────────
 * 시안대로 폭에 상관없이 늘 떠 있다. .wi-cart 아래 여백(--wi-cartbar)이
 * 이만큼 비어 있어야 마지막 줄을 덮지 않는다.                            */
.wi-cartbar{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:flex;align-items:center;gap:14px;
    padding:11px var(--wi-gutter);
    background:rgba(34,28,27,.97);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.wi-cartbar p{font-size:11.5px;color:rgba(255,255,255,.62);line-height:1.5;min-width:0}
.wi-cartbar b{display:block;color:#fff;font-size:16px;font-weight:700}
.wi-cartbar .wi-btn{margin-left:auto;padding:15px clamp(18px,3vw,34px);white-space:nowrap}

/* ── 되물음 레이어(WiModal.ask) ────────────────────────────────────────
 * ⚠️ 공용 모달 껍데기(.wi-modal)를 쓰지 않는다. 껍데기는 한 벌을 돌려 쓰기
 *    때문에, 모달이 열려 있을 때 되물으면 그 내용을 덮어써 버린다
 *    (장바구니 "옵션 변경" 안에서 옵션 줄을 뺄 때 물렸다).
 *    되물음은 늘 "무엇 위에" 뜨는 것이라 z-index 를 모달보다 위에 둔다.   */
.wi-ask{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.wi-ask__veil{
    position:absolute;inset:0;background:rgba(34,28,27,.52);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;transition:opacity .18s ease;
}
.wi-ask.is-open .wi-ask__veil{opacity:1}
.wi-ask__box{
    position:relative;width:min(420px,100%);
    background:var(--wi-surface);border-radius:var(--wi-r-box);
    box-shadow:0 40px 90px rgba(34,28,27,.30);
    padding:clamp(22px,3vw,28px);
    opacity:0;transform:translateY(10px) scale(.99);
    transition:opacity .18s ease,transform .18s ease;
}
.wi-ask.is-open .wi-ask__box{opacity:1;transform:none}
.wi-ask__tit{font-size:16px;font-weight:700;letter-spacing:-0.02em;margin-bottom:10px}
.wi-ask__msg{font-size:13.5px;line-height:1.8;color:var(--wi-ink-soft)}
.wi-ask__btns{display:flex;gap:8px;margin-top:24px}
.wi-ask__btns .wi-btn{flex:1;justify-content:center;padding:15px 16px}

/* ── 옵션 변경 모달 ───────────────────────────────────────────────────
 * 코어 shop/cartoption.php 를 그대로 심는다 — 그래서 선택자가 코어 이름이다.
 * 옵션 버튼(.wi-opt)·선택된 줄(.sit_opt_list)의 모양은 상세 옵션 시트가
 * 이미 갖고 있다(8-6-6). 여기서는 모달에 맞는 자리만 잡는다.             */
.wi-modal__box--optedit{max-width:560px;width:min(560px,100%)}
.wi-optedit__wait{padding:40px 0;text-align:center;font-size:13px;color:var(--wi-faint)}
.wi-optedit .option_wr+.option_wr{margin-top:22px}
/* 세 덩어리(선택옵션·추가옵션·선택된 옵션)의 제목을 상세 시트와 같은 모양으로 */
.wi-optedit .option_wr h3,
.wi-optedit #sit_sel_option h3{
    font-size:11px;font-weight:600;color:var(--wi-faint);
    letter-spacing:0.2em;text-transform:uppercase;margin:0 0 12px;
}
.wi-optedit__done{width:100%;margin-top:18px;justify-content:center}
.wi-optedit #sit_sel_option{margin-top:22px;padding-top:20px;border-top:1px solid var(--wi-line)}
.wi-optedit #sit_tot_price{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    margin-top:16px;padding-top:16px;border-top:1px solid var(--wi-line);
    font-size:13px;color:var(--wi-mute);
}
.wi-optedit #sit_tot_price strong{font-size:22px;font-weight:800;color:var(--wi-ink);letter-spacing:-0.03em}
.wi-optedit .btn_confirm{display:flex;gap:8px;margin-top:22px}
.wi-optedit .btn_confirm .btn_submit{
    flex:1;height:52px;border-radius:var(--wi-r-btn);
    background:var(--wi-ink);color:#fff;font-size:14px;font-weight:600;
}
.wi-optedit .btn_confirm .btn_submit:hover{background:#000}
/* 코어의 닫기 버튼은 쓰지 않는다 — 모달이 이미 × 를 갖고 있다 */
.wi-optedit .btn_confirm .btn_close{display:none}

/* ── 8-8 주문서 (shop/orderform.php) ──────────────────────────────────
 * 시안 template/orders/주문서.dc.html
 *
 * ⚠️ 이 화면만 **코어 마크업 그대로**다. orderform.sub.php 에는 테마 훅도
 *    스킨 경로도 없어서 다시 쓸 수가 없다 — 상품상세(PR#23)와 같은 판단으로
 *    CSS 를 입힌다. 그래서 아래 선택자는 전부 코어 이름이다.
 *    CSS 로 못 하는 것(오른쪽 카드로 묶기·약관·하단 바)만 js/wi-order.js 가 맡는다.
 *
 * 뼈대 — 코어는 이미 .sod_left / .sod_right 두 덩어리로 되어 있다.
 * 그 둘을 display:contents 로 풀어 **안쪽 섹션들이 직접 그리드 칸**이 되게 한다.
 * 그래야 "결제수단은 왼쪽, 금액은 오른쪽" 처럼 시안대로 섞어 놓을 수 있다.  */
.wi-is-order #sod_frm{
    display:grid;gap:clamp(26px,3vw,44px) clamp(24px,3vw,44px);
    grid-template-columns:minmax(0,1fr);align-items:start;
}
@media (min-width:1000px){ .wi-is-order #sod_frm{grid-template-columns:minmax(0,1fr) 372px} }
.wi-is-order .sod_left,
.wi-is-order .sod_right,
.wi-is-order #sod_frm_pay{display:contents}
/* 왼쪽에 서는 것들 — 순서는 시안 그대로 */
.wi-is-order .od_prd_list  {grid-column:1;order:1}
.wi-is-order #sod_frm_orderer{grid-column:1;order:2}
.wi-is-order #sod_frm_taker  {grid-column:1;order:3}
.wi-is-order #od_pay_sl      {grid-column:1;order:4}
.wi-is-order .wi-order-terms {grid-column:1;order:5}
/* 오른쪽 — js 가 만든 카드 한 장 */
.wi-is-order .wi-order-sum{grid-column:1;order:6}
@media (min-width:1000px){
    .wi-is-order .wi-order-sum{grid-column:2;grid-row:1 / span 99;order:0;position:sticky;top:calc(var(--wi-hd) + 16px)}
    /* 이 폭부터는 결제 카드가 오른쪽에 **붙어서 따라온다** — [주문하기] 가 늘
       보이므로 하단 고정 바는 같은 버튼을 한 번 더 놓는 것뿐이다(사용자 결정
       2026-08-23). 좁은 화면에서는 카드가 맨 아래로 내려가니 그때만 띄운다.
       ⚠️ 장바구니 바(.wi-cartbar)는 그대로다 — 그 화면에는 오른쪽 카드가 없다. */
    .wi-orderbar{display:none}
}

/* 섹션 제목 — 시안의 얇은 밑줄 */
.wi-is-order #sod_frm h2,
.wi-is-order #od_pay_sl h3,
.wi-is-order .wi-order-terms > h3{
    font-size:18px;font-weight:700;letter-spacing:-0.03em;
    padding-bottom:13px;margin-bottom:18px;border-bottom:1px solid var(--wi-ink);
}
.wi-is-order #sod_frm_pt_alert{
    margin:-6px 0 16px;font-size:12px;color:var(--wi-mute-2);line-height:1.7;
}

/* ── 주문 상품 — 표를 카드 줄로 ────────────────────────────────────── */
.wi-is-order #sod_list thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.wi-is-order #sod_list,
.wi-is-order #sod_list tbody,
.wi-is-order #sod_list tr,
.wi-is-order #sod_list td{display:block;width:auto}
/* 왼쪽은 상품(사진+이름), 오른쪽 한 칸에 숫자들을 위에서부터 쌓는다.
   ⚠️ 숫자 칸이 td 다섯 개로 흩어져 있어서 그냥 두면 다섯 줄로 벌어진다 —
      상품 칸이 그 다섯 줄을 통째로 세로로 덮게(span) 잡아야 붙는다. */
.wi-is-order #sod_list tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-auto-rows:min-content;gap:2px clamp(14px,2vw,20px);align-items:start;
    padding:22px 0;border-bottom:1px solid var(--wi-line);
}
.wi-is-order #sod_list tr:first-child{padding-top:0}
.wi-is-order #sod_list .td_prd{
    grid-column:1;grid-row:1 / span 5;
    display:grid;grid-template-columns:clamp(84px,10vw,104px) minmax(0,1fr);
    gap:clamp(14px,2vw,20px);
}
/* 숫자 칸 차례 — 소계를 맨 위에 크게, 나머지는 그 아래 작게 (시안 순서) */
.wi-is-order #sod_list td:nth-of-type(4){grid-row:1}   /* 소계 */
.wi-is-order #sod_list td:nth-of-type(2){grid-row:2}   /* 총수량 */
.wi-is-order #sod_list td:nth-of-type(3){grid-row:3}   /* 판매가 */
.wi-is-order #sod_list td:nth-of-type(5){grid-row:4}   /* 포인트 */
.wi-is-order #sod_list td:nth-of-type(6){grid-row:5}   /* 배송비 */
.wi-is-order #sod_list .sod_img{grid-column:1}
.wi-is-order #sod_list .sod_img img{
    width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
    border-radius:var(--wi-r-img);background:var(--wi-tint-2);
}
.wi-is-order #sod_list .sod_name{grid-column:2;min-width:0;display:flex;flex-direction:column;gap:7px}
.wi-is-order .sod_name .prd_name{font-size:16px;font-weight:700;letter-spacing:-0.02em;line-height:1.45}
.wi-is-order .sod_name .prd_name:hover{color:var(--wi-accent)}
.wi-is-order .sod_opt{font-size:12.5px;color:var(--wi-mute);line-height:1.8}
.wi-is-order .sod_opt ul{display:flex;flex-direction:column;gap:2px}
/* 오른쪽 — 소계는 크게, 나머지 숫자는 그 아래 한 줄로 */
.wi-is-order #sod_list .td_num,
.wi-is-order #sod_list .td_numbig,
.wi-is-order #sod_list .td_dvr{
    grid-column:3;text-align:right;font-size:11.5px;color:var(--wi-faint);white-space:nowrap;
}
.wi-is-order #sod_list td:nth-of-type(4){
    font-size:19px;font-weight:800;color:var(--wi-ink);letter-spacing:-0.02em;
    margin-bottom:4px;
}
.wi-is-order #sod_list td:nth-of-type(4)::after{content:'원';font-size:12.5px;font-weight:400;margin-left:2px}
.wi-is-order #sod_list .td_num::before        {content:'수량 '}
.wi-is-order #sod_list td:nth-of-type(3)::before{content:'판매가 '}
.wi-is-order #sod_list td:nth-of-type(3)::after {content:'원'}
.wi-is-order #sod_list td:nth-of-type(5)::before{content:'적립 '}
.wi-is-order #sod_list td:nth-of-type(5)::after {content:'P'}
.wi-is-order #sod_list .td_dvr{color:var(--wi-mute-2)}
.wi-is-order #sod_list .cp_btn,
.wi-is-order #sod_list .cp_cancel{
    align-self:flex-start;height:32px;padding:0 13px;font-size:12px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);color:var(--wi-ink);
}
.wi-is-order #sod_list .cp_btn:hover,
.wi-is-order #sod_list .cp_cancel:hover{border-color:var(--wi-ink)}

/* ── 입력 표 — th/td 를 라벨 위·입력 아래로 세운다 ───────────────────── */
.wi-is-order .tbl_frm01 table,
.wi-is-order .tbl_frm01 tbody{display:block}
.wi-is-order .tbl_frm01 tbody{
    display:grid;gap:16px 20px;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.wi-is-order .tbl_frm01 tr{display:flex;flex-direction:column;gap:8px;min-width:0}
.wi-is-order .tbl_frm01 th,
.wi-is-order .tbl_frm01 td{display:block;padding:0;text-align:left;border:0}
.wi-is-order .tbl_frm01 th{
    font-size:11.5px;font-weight:500;letter-spacing:0.1em;color:var(--wi-ink-soft);white-space:nowrap;
}
/* 한 줄을 통째로 쓰는 것들 — 주소·전하실말씀·배송지선택 */
.wi-is-order .tbl_frm01 tr:has(#od_addr1),
.wi-is-order .tbl_frm01 tr:has(#sod_frm_addr),
.wi-is-order .tbl_frm01 tr:has(#od_memo),
.wi-is-order .tbl_frm01 tr:has(.order_choice_place),
.wi-is-order .tbl_frm01 tr:has(#od_hope_date){grid-column:1 / -1}

.wi-is-order .frm_input,
.wi-is-order #od_memo,
.wi-is-order #od_temp_point,
.wi-is-order #od_deposit_name,
.wi-is-order #od_bank_account{
    width:100%;height:48px;padding:0 14px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);font-size:14px;color:var(--wi-ink);
}
.wi-is-order #od_memo{height:auto;min-height:92px;padding:13px 14px;line-height:1.7;resize:vertical}
.wi-is-order .frm_input:focus,
.wi-is-order #od_memo:focus,
.wi-is-order #od_temp_point:focus{outline:0;border-color:var(--wi-ink)}
.wi-is-order .frm_input::placeholder,
.wi-is-order #od_memo::placeholder{color:var(--wi-faint)}
.wi-is-order .frm_info{display:block;font-size:11.5px;color:var(--wi-faint);margin-bottom:6px}
/* 주소 칸 — 우편번호 + 검색 단추가 한 줄, 나머지는 아래로 */
.wi-is-order #sod_frm_addr,
.wi-is-order .tbl_frm01 tr:has(#od_addr1) td{display:flex;flex-wrap:wrap;gap:10px}
.wi-is-order #sod_frm_addr br,
.wi-is-order .tbl_frm01 tr:has(#od_addr1) td br{display:none}
.wi-is-order #od_zip,.wi-is-order #od_b_zip{flex:0 0 140px;width:140px}
.wi-is-order #od_addr1,.wi-is-order #od_addr2,.wi-is-order #od_addr3,
.wi-is-order #od_b_addr1,.wi-is-order #od_b_addr2,.wi-is-order #od_b_addr3{flex:1 1 100%}
.wi-is-order .btn_address{
    flex:0 0 auto;height:48px;padding:0 20px;font-size:13px;
    border:1px solid var(--wi-ink);border-radius:var(--wi-r-btn);
    background:transparent;color:var(--wi-ink);
}
.wi-is-order .btn_address:hover{background:var(--wi-tint)}

/* 배송지선택 · 기본배송지 — 라디오/체크를 칩으로 */
.wi-is-order .order_choice_place{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wi-is-order .order_choice_place input[type=radio],
.wi-is-order .order_choice_place input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.wi-is-order .order_choice_place label,
.wi-is-order #order_address{
    display:inline-flex;align-items:center;height:42px;padding:0 16px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);color:var(--wi-mute);
    font-size:12.5px;white-space:nowrap;cursor:pointer;
    transition:border-color .15s,background .15s,color .15s;
}
.wi-is-order .order_choice_place label:hover,
.wi-is-order #order_address:hover{border-color:var(--wi-ink);color:var(--wi-ink)}
.wi-is-order .order_choice_place input:checked + label{
    border-color:var(--wi-ink);background:var(--wi-ink);color:#fff;
}
.wi-is-order .order_choice_place input:focus-visible + label{outline:2px solid var(--wi-accent);outline-offset:2px}
/* 배송지명 줄의 "기본배송지로 설정" 은 칩이 아니라 체크박스 그대로 둔다 */
.wi-is-order .tbl_frm01 tr:has(#ad_subject) td{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wi-is-order #ad_subject{flex:1 1 180px;width:auto}
.wi-is-order #ad_default{width:16px;height:16px;accent-color:var(--wi-ink);margin:0}
.wi-is-order label[for=ad_default]{font-size:12.5px;color:var(--wi-mute);cursor:pointer}

/* 배송 요청사항 빠른 선택 (js 가 만든다) */
.wi-order-memos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
/* 칩 — 주문서의 배송 요청사항, 보관함·후기 목록의 정렬·거르기가 같이 쓴다.
   <button> 과 <a> 가 섞여 있어 display 를 여기서 맞춰 둔다(안 그러면 <a> 는
   높이만 있고 글자가 위로 붙는다). */
.wi-chip{
    display:inline-flex;align-items:center;justify-content:center;
    height:38px;padding:0 15px;border-radius:var(--wi-r-btn);
    border:1px solid var(--wi-line-4);background:var(--wi-surface);
    color:var(--wi-mute);font-size:12.5px;white-space:nowrap;
}
.wi-chip:hover{border-color:var(--wi-ink);color:var(--wi-ink)}
.wi-chip.is-on{border-color:var(--wi-ink);background:var(--wi-ink);color:#fff}

/* 목록 도구줄의 "검색항목" 고르개 — 코어 스킨이 그대로 뱉는 <select> 다.
   손대지 않으면 브라우저 기본 모양(높이 20px · 회색 테두리 · 기본 화살표 ·
   15px 글자)이라 같은 줄의 칩·검색칸(34px 알약)과 따로 논다(사용자 지적
   2026-08-23). 전체 사용후기·전체 상품문의 두 화면이 같은 물건을 쓴다.
   모양은 **바로 옆 검색칸과 같은 알약**이다 — 고르개와 입력칸이 하나의
   검색 묶음으로 읽혀야 한다. 상품목록의 정렬 select(.wi-listbar__sort)도
   같은 이유로 알약이다. 칩·버튼은 사각(--wi-r-btn)으로 남는다. */
.wi-qasearch select,.wi-usesearch select{
    height:34px;padding:0 28px 0 13px;background-position:right 11px center;
    border-radius:var(--wi-r-pill);border-color:var(--wi-line);background-color:var(--wi-tint);
    color:var(--wi-mute);font-size:12px;white-space:nowrap;
}
.wi-qasearch select:hover,.wi-usesearch select:hover{color:var(--wi-ink)}

/* ── 결제수단 — 라디오를 타일로 ──────────────────────────────────────── */
.wi-is-order #sod_frm_paysel{
    display:grid;gap:8px;
    grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
}
.wi-is-order #sod_frm_paysel legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.wi-is-order #sod_frm_paysel input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.wi-is-order #sod_frm_paysel .lb_icon{
    display:flex;align-items:center;min-height:62px;padding:12px 14px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);color:var(--wi-ink);
    font-size:13.5px;line-height:1.4;cursor:pointer;
    transition:border-color .15s,background .15s,box-shadow .15s;
}
.wi-is-order #sod_frm_paysel .lb_icon:hover{border-color:var(--wi-ink)}
.wi-is-order #sod_frm_paysel input:checked + .lb_icon{
    border-color:var(--wi-ink);background:var(--wi-tint);
    box-shadow:inset 0 0 0 1px var(--wi-ink);font-weight:600;
}
.wi-is-order #sod_frm_paysel input:focus-visible + .lb_icon{outline:2px solid var(--wi-accent);outline-offset:2px}
/* 코어가 라벨 안에 <br> 로 "에스크로" 를 넣는다 — 줄바꿈만 지운다 */
.wi-is-order #sod_frm_paysel .lb_icon br{display:none}
/* ⚠️ 코어는 일반결제(무통장·신용카드·계좌이체·가상계좌·휴대폰·간편결제)가
   **하나라도 켜져 있을 때만** <fieldset id="sod_frm_paysel"> 로 감싼다
   (shop/orderform.sub.php). 그것을 전부 끄고 PG 가 따로 뿌리는 간편결제
   (NHN KCP 네이버페이 등)만 남으면 라디오가 그 밖에 맨몸으로 나와서
   위 타일 규칙이 하나도 안 걸린다 — 브라우저 기본 라디오가 그대로 보인다.
   그 조합까지 덮는다. 평소에는 라벨이 fieldset 안이라 여기에 안 걸린다. */
.wi-is-order .od_pay_buttons_el > input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.wi-is-order .od_pay_buttons_el > input[type=radio] + .lb_icon{
    display:flex;align-items:center;min-height:62px;margin-bottom:8px;padding:12px 14px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);color:var(--wi-ink);
    font-size:13.5px;line-height:1.4;cursor:pointer;
    transition:border-color .15s,background .15s,box-shadow .15s;
}
.wi-is-order .od_pay_buttons_el > input[type=radio] + .lb_icon:hover{border-color:var(--wi-ink)}
.wi-is-order .od_pay_buttons_el > input[type=radio]:checked + .lb_icon{
    border-color:var(--wi-ink);background:var(--wi-tint);
    box-shadow:inset 0 0 0 1px var(--wi-ink);font-weight:600;
}
.wi-is-order .od_pay_buttons_el > input[type=radio]:focus-visible + .lb_icon{outline:2px solid var(--wi-accent);outline-offset:2px}
.wi-is-order .od_pay_buttons_el > input[type=radio] + .lb_icon br{display:none}
/* 무통장 계좌 입력 — 타일 아래 한 칸 전체로 */
.wi-is-order #settle_bank{
    grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    margin-top:6px;padding:16px 17px;border-radius:var(--wi-r-btn);background:var(--wi-tint);
}
.wi-is-order #settle_bank br{display:none}
.wi-is-order #settle_bank label{font-size:12.5px;color:var(--wi-ink-soft)}
.wi-is-order #settle_bank select,
.wi-is-order #od_deposit_name{flex:1 1 180px;width:auto;height:44px}
.wi-is-order #settle_bank select{padding:0 32px 0 12px;font-size:13.5px}

/* 포인트 */
.wi-is-order .sod_frm_point{
    margin-top:22px;padding-top:20px;border-top:1px solid var(--wi-line);
    display:flex;flex-direction:column;gap:10px;
}
.wi-is-order .sod_frm_point > div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wi-is-order .sod_frm_point label[for=od_temp_point]{
    flex:1 1 100%;font-size:11.5px;letter-spacing:0.1em;color:var(--wi-ink-soft);
}
.wi-is-order #od_temp_point{flex:0 1 220px;width:auto;text-align:right;font-variant-numeric:tabular-nums}
.wi-is-order .sod_frm_point > div:first-child{font-size:12.5px;color:var(--wi-mute)}
.wi-is-order .sod_frm_point .wi-btn--sm{height:48px;padding:0 18px}
.wi-is-order #sod_frm_pt{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--wi-mute-2)}
.wi-is-order #sod_frm_pt strong{font-weight:500;color:var(--wi-faint);margin-right:6px}

/* 약관·안내 본문 모달 — 그누보드 내용 페이지(#ctt_con)를 그대로 담는다 */
.wi-modal__box--doc{max-width:640px;width:min(640px,100%)}
.wi-doc{font-size:13.5px;line-height:1.9;color:var(--wi-ink-soft);max-height:min(64vh,560px);overflow-y:auto}
.wi-doc p{margin:0 0 12px}
.wi-doc h2,.wi-doc h3,.wi-doc h4{margin:22px 0 10px;font-size:14px;font-weight:700;color:var(--wi-ink)}
.wi-doc ul,.wi-doc ol{margin:0 0 12px;padding-left:18px;list-style:revert}
.wi-doc table{width:100%;margin:0 0 12px;font-size:12.5px}
.wi-doc th,.wi-doc td{padding:8px 10px;border:1px solid var(--wi-line);text-align:left}
.wi-doc__wait{padding:36px 0;text-align:center;color:var(--wi-faint)}

/* ── 약관 동의 (js 가 만든다) ─────────────────────────────────────────── */
.wi-order-terms{border-top:1px solid var(--wi-line);padding-top:22px;display:flex;flex-direction:column;gap:11px}
.wi-order-terms__all{font-size:13.5px;font-weight:600}
.wi-order-terms__list{display:flex;flex-direction:column;gap:9px;padding-left:26px}
.wi-order-terms__row{font-size:12.5px;color:var(--wi-mute);gap:9px}
.wi-order-terms__row input{width:15px;height:15px}
.wi-order-terms__row i{font-style:normal;font-size:11px;color:var(--wi-accent)}
.wi-order-terms__row i.is-opt{color:var(--wi-faint)}
.wi-order-terms__row .wi-link{margin-left:auto;font-size:11.5px}
.wi-order-terms__row.is-miss{color:var(--wi-accent)}
.wi-order-terms__row.is-miss input{outline:2px solid var(--wi-accent);outline-offset:2px}

/* ── 오른쪽 결제 카드 (js 가 코어 조각을 모아 만든다) ─────────────────── */
.wi-order-sum{
    background:var(--wi-surface);border:1px solid var(--wi-line-2);border-radius:var(--wi-r-box);
    box-shadow:0 22px 54px rgba(34,28,27,.07);
    padding:clamp(22px,2.4vw,28px);
    display:flex;flex-direction:column;gap:9px;
}
.wi-order-sum > h2{font-size:17px;font-weight:700;letter-spacing:-0.02em;margin-bottom:11px;padding:0;border:0}
/* 코어의 금액 목록 — ul>li 를 한 줄씩 */
.wi-order-sum #sod_bsk_tot ul,
.wi-order-sum .pay_tbl tbody{display:flex;flex-direction:column;gap:12px;font-size:13px}
.wi-order-sum #sod_bsk_tot li,
.wi-order-sum .pay_tbl tr{display:flex;align-items:baseline;gap:4px}
/* ⚠️ 코어 마크업은 <span>이름</span><strong>값</strong>원 이다 — "원" 이 형제
   텍스트라서 space-between 을 주면 그것만 오른쪽 끝으로 달아난다.
   이름 뒤에 자동 여백을 줘서 값+단위가 붙어 오른쪽에 서게 한다. */
.wi-order-sum #sod_bsk_tot li > span:first-child,
.wi-order-sum .pay_tbl th{margin-right:auto}
.wi-order-sum #sod_bsk_tot li > span,
.wi-order-sum .pay_tbl th{
    color:var(--wi-mute);font-weight:400;font-size:13px;text-align:left;white-space:nowrap;
}
.wi-order-sum #sod_bsk_tot li strong,
.wi-order-sum .pay_tbl td{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
/* ⚠️ tbody 를 여기 같이 넣어 두면 위(1837줄)의 display:flex 를 덮어써서
   **행 사이 12px 이 통째로 죽는다** — 쿠폰 두 줄만 딱 붙어 보였다
   (사용자 지적 2026-08-23, 실측 행 간격 30px vs 위쪽 32.8px). tbody 는 뺀다. */
.wi-order-sum .pay_tbl table,
.wi-order-sum .pay_tbl tr,
.wi-order-sum .pay_tbl th,
.wi-order-sum .pay_tbl td{display:block;padding:0;border:0}
.wi-order-sum .pay_tbl tbody{padding:0;border:0}
.wi-order-sum .pay_tbl tr{display:flex;align-items:center}
.wi-order-sum .pay_tbl{margin-top:12px}
/* 추가배송비 옆 괄호 설명은 **텍스트 노드**라 CSS 로 못 지운다 —
   js/wi-order.js 가 떼어 title 로 옮긴다. */
.wi-order-sum .pay_tbl td{font-size:13px}
.wi-order-sum #od_coupon_btn,
.wi-order-sum #sc_coupon_btn,
.wi-order-sum .cp_cancel{
    margin-left:8px;height:30px;padding:0 11px;font-size:11.5px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);color:var(--wi-ink);
}
.wi-order-sum #od_coupon_btn:hover,.wi-order-sum #sc_coupon_btn:hover{border-color:var(--wi-ink)}
/* 코어 총 주문금액(포인트 빼기 전) — 작게, 아래 우리 줄이 진짜 결제금액이다 */
.wi-order-sum #od_tot_price{
    display:flex;align-items:baseline;gap:4px;
    margin-top:16px;padding-top:16px;border-top:1px solid var(--wi-line);
    font-size:13px;color:var(--wi-mute);
}
.wi-order-sum #od_tot_price > span:first-child{margin-right:auto}
.wi-order-sum #od_tot_price strong{font-weight:600;color:var(--wi-ink);font-variant-numeric:tabular-nums}
.wi-order-sum__tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0 4px}
.wi-order-sum__tot span{font-size:13px;color:var(--wi-mute)}
.wi-order-sum__tot strong{font-size:29px;font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.wi-order-sum__tot em{font-style:normal;font-size:14px;font-weight:400;margin-left:3px}
.wi-order-sum__pt{font-size:11.5px;color:var(--wi-faint);text-align:right;padding-bottom:14px}
.wi-order-sum__pt[hidden]{display:none}
.wi-order-sum__note{margin-top:12px;font-size:11.5px;color:var(--wi-faint);line-height:1.8}
/* 주문 버튼 — 코어 #display_pay_button 안의 것을 그대로 쓴다 */
.wi-order-sum #display_pay_button{display:flex;flex-direction:column;gap:8px}
.wi-order-sum #display_pay_button .btn_submit,
.wi-order-sum #display_pay_button input[type=button]{
    width:100%;height:58px;border:0;border-radius:var(--wi-r-btn);
    background:var(--wi-ink);color:#fff;font-size:15px;font-weight:600;cursor:pointer;
}
.wi-order-sum #display_pay_button .btn_submit:hover{background:#000}
.wi-order-sum #display_pay_button .btn01{
    display:flex;align-items:center;justify-content:center;height:46px;
    border:1px solid var(--wi-line-2);border-radius:var(--wi-r-btn);
    color:var(--wi-mute);font-size:13px;
}
.wi-order-sum #display_pay_button .btn01:hover{border-color:var(--wi-ink);color:var(--wi-ink)}
.wi-order-sum #display_pay_process{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--wi-mute)}

/* 쿠폰 고르기 — 코어가 버튼 뒤에 목록을 통째로 붙인다(표 한 벌).
   주문·배송비 쿠폰은 **모달로 옮겼고**(js/wi-order.js), 상품별 쿠폰(#cp_frm)만
   아직 그 자리에 펼쳐진다. 규칙은 셋이 같이 쓰므로 `.wi-is-order` 로 묶지
   않는다 — 모달은 body 밑에 붙어서 그 안에 들어가지 않는다.
   표로는 좁은 칸에서 못 읽으니 한 줄씩 쌓는 목록으로 바꾼다. */
#od_coupon_frm,#sc_coupon_frm,#cp_frm{
    margin-top:12px;padding:14px;border:1px solid var(--wi-line);
    border-radius:var(--wi-r-btn);background:var(--wi-bg);font-size:12.5px;
    /* 코어가 이 목록을 금액 칸(오른쪽 정렬) 안에 붙인다 — 되돌린다 */
    text-align:left;
}
.od_coupon_wrap{text-align:left}
#od_coupon_frm > h3,#sc_coupon_frm > h3,#cp_frm > h3{
    font-size:11px;letter-spacing:0.16em;color:var(--wi-faint);text-transform:uppercase;margin-bottom:10px;
}
#od_coupon_frm caption,#sc_coupon_frm caption,#cp_frm caption,
#od_coupon_frm thead,#sc_coupon_frm thead,#cp_frm thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);
}
#od_coupon_frm table,#sc_coupon_frm table,#cp_frm table,
#od_coupon_frm tbody,#sc_coupon_frm tbody,#cp_frm tbody,
#od_coupon_frm tr,#sc_coupon_frm tr,#cp_frm tr,
#od_coupon_frm td,#sc_coupon_frm td,#cp_frm td{display:block;width:auto;padding:0;border:0}
#od_coupon_frm tr,#sc_coupon_frm tr,#cp_frm tr{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    padding:10px 0;border-top:1px solid var(--wi-line);
}
#od_coupon_frm tr:first-child,#sc_coupon_frm tr:first-child,#cp_frm tr:first-child{border-top:0;padding-top:0}
#od_coupon_frm td:first-child,#sc_coupon_frm td:first-child,#cp_frm td:first-child{flex:1 1 120px;min-width:0;line-height:1.5}
#od_coupon_frm .td_numbig,#sc_coupon_frm .td_numbig,#cp_frm .td_numbig{
    font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
}
#od_coupon_frm .td_numbig::after,#sc_coupon_frm .td_numbig::after,#cp_frm .td_numbig::after{content:'원'}
.od_cp_apply,.sc_cp_apply,.cp_apply{
    height:32px;padding:0 14px;font-size:11.5px;white-space:nowrap;
    border-radius:var(--wi-r-btn);background:var(--wi-ink);color:#fff;
}
.od_cp_apply:hover,.sc_cp_apply:hover,.cp_apply:hover{background:#000}
#od_coupon_close,#sc_coupon_close,#cp_close{
    margin-top:10px;width:100%;height:34px;font-size:12px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);color:var(--wi-mute);
}
#od_coupon_close:hover,#sc_coupon_close:hover,#cp_close:hover{border-color:var(--wi-ink);color:var(--wi-ink)}

/* 모달 안에서는 껍데기를 모달이 갖는다 — 제목도 닫기도 모달 것을 쓴다 */
.wi-modal__box--coupon{max-width:420px;width:min(420px,100%)}
.wi-modal .od_coupon_wrap,
.wi-modal #od_coupon_frm,.wi-modal #sc_coupon_frm{margin:0;padding:0;border:0;background:none;font-size:13px}
/* 제목·닫기는 모달 것을 쓴다. 코어 닫기 버튼은 .btn_confirm 껍데기째 감춘다
   — 버튼만 감추면 껍데기 여백이 모달 아래에 빈 자리로 남는다. */
.wi-modal--coupon .od_coupon_wrap > h3,
.wi-modal #od_coupon_frm > h3,.wi-modal #sc_coupon_frm > h3,
.wi-modal #od_coupon_frm .btn_confirm,.wi-modal #sc_coupon_frm .btn_confirm,
.wi-modal .od_coupon_wrap > .btn_confirm{display:none}
.wi-coupon__wait{padding:26px 0;text-align:center;font-size:13px;color:var(--wi-faint)}

/* ── 배송지 목록 모달 (코어 shop/orderaddress.php 를 그대로 심는다) ──── */
#sod_addr .tbl_head03{overflow-x:auto}
#sod_addr table{width:100%;font-size:12.5px}
#sod_addr thead th{
    font-size:11px;font-weight:500;color:var(--wi-faint);text-align:left;
    padding:0 8px 10px;white-space:nowrap;
}
#sod_addr td{padding:12px 8px;border-top:1px solid var(--wi-line);vertical-align:top;line-height:1.7}
#sod_addr .td_sbj{display:flex;align-items:center;gap:9px}
#sod_addr .chk_box input{width:16px;height:16px;accent-color:var(--wi-ink);margin:0}
#sod_addr .chk_box label span{display:none}
#sod_addr .frm_input{
    width:110px;height:36px;padding:0 10px;font-size:12.5px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);background:var(--wi-surface);
}
#sod_addr .ad_tel{color:var(--wi-mute-2)}
#sod_addr .td_mng{display:flex;flex-wrap:wrap;align-items:center;gap:6px;white-space:nowrap}
#sod_addr .mng_btn{
    height:30px;padding:0 11px;display:inline-flex;align-items:center;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);color:var(--wi-ink);font-size:11.5px;
}
#sod_addr .mng_btn:hover{border-color:var(--wi-ink)}
#sod_addr .sel_address{background:var(--wi-ink);color:#fff;border-color:var(--wi-ink)}
#sod_addr .sel_address:hover{background:#000}
#sod_addr input[type=radio]{position:absolute;opacity:0;width:0;height:0}
#sod_addr input[type=radio]:checked + .default_lb{border-color:var(--wi-ink);background:var(--wi-tint)}
/* 좁은 화면에서는 표를 카드 줄로 쌓는다 — 폰에서 그냥 두면 칸 넷이 안 들어가
   **가로 스크롤**이 생기고 [선택]·[삭제]·[기본배송지] 가 오른쪽으로 잘린다
   (모달 폭이 화면 폭이라 더 넓힐 수도 없다). 표 머리는 감추고, 칸마다 무엇인지
   앞에 붙여 준다. */
@media (max-width:640px){
    #sod_addr .tbl_head03{overflow-x:visible}
    #sod_addr thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
    #sod_addr table,#sod_addr tbody,#sod_addr tr,#sod_addr td{display:block;width:auto}
    #sod_addr tr{padding:14px 0;border-top:1px solid var(--wi-line)}
    #sod_addr tr:first-child{border-top:0;padding-top:0}
    #sod_addr td{padding:0;border:0}
    #sod_addr td + td{margin-top:7px}
    #sod_addr .frm_input{width:100%;max-width:220px}
    #sod_addr .td_name::before{content:"받는 분 ";color:var(--wi-faint)}
    #sod_addr .td_mng{margin-top:11px}
    #sod_addr .td_mng .mng_btn{flex:1 1 auto;justify-content:center}
}
#sod_addr .win_btn{display:flex;gap:8px;margin-top:20px}
#sod_addr .win_btn .btn_submit{
    flex:1;height:46px;border:0;border-radius:var(--wi-r-btn);
    background:var(--wi-ink);color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;
}
#sod_addr .win_btn .btn_close{
    flex:0 0 auto;padding:0 20px;height:46px;border:1px solid var(--wi-line-4);
    border-radius:var(--wi-r-btn);color:var(--wi-mute);font-size:13px;
}
#sod_addr .win_btn .btn_close:hover{border-color:var(--wi-ink);color:var(--wi-ink)}

/* 좁은 화면 */
@media (max-width:620px){
    .wi-is-order #sod_list .td_prd{grid-template-columns:clamp(74px,20vw,92px) minmax(0,1fr)}
    .wi-is-order #sod_list td:nth-of-type(4){font-size:17px}
}

/* ── 8-9 위시리스트 (shop/wishlist.php · 마이페이지 [위시리스트] 판) ──
 * 시안 template/wish/위시리스트.dc.html
 * 테마 훅이 있는 화면이라 마크업을 통째로 새로 썼다 → [[youngcart-screen-routes]]
 * 본문은 inc/theme.lib.php 의 wi_wish_panel() 한 벌 — 마이페이지가 같이 쓴다.
 * ⚠️ 폼 필드 이름은 코어 것 그대로다(chk_it_id·it_id·io_*·ct_qty·sw_direct).  */
.wi-wish{padding-bottom:calc(var(--wi-cartbar) + clamp(40px,5vw,72px))}

.wi-wish__bar{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    padding-bottom:14px;border-bottom:1px solid var(--wi-ink);
}
.wi-wish__count{font-weight:400;color:var(--wi-mute-2)}
.wi-wish__sort{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}
.wi-wish__sort .wi-chip{height:32px;padding:0 13px;font-size:11.5px}

.wi-wish__grid{
    display:grid;gap:clamp(16px,2vw,26px);
    grid-template-columns:repeat(auto-fill,minmax(min(232px,100%),1fr));
    padding-top:clamp(20px,2.4vw,28px);
}

/* ── 카드 ─────────────────────────────────────────────────────────── */
.wi-wishcard{
    display:flex;flex-direction:column;
    background:var(--wi-surface);border:1px solid var(--wi-line);
    border-radius:var(--wi-r-box);overflow:hidden;
    transition:box-shadow .15s,opacity .15s;
}
.wi-wishcard.is-on{box-shadow:inset 0 0 0 1px var(--wi-ink)}
.wi-wishcard.is-busy{opacity:.45;pointer-events:none}
.wi-wishcard__thumb{position:relative;aspect-ratio:3/4;background:var(--wi-tint-2);overflow:hidden}
.wi-wishcard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.wi-wishcard:hover .wi-wishcard__thumb img{transform:scale(1.04)}
/* 사진 위 조작 — 사진이 밝든 어둡든 읽히게 흰 판을 깐다 */
.wi-wishcard__chk{
    position:absolute;top:11px;left:11px;z-index:2;
    box-shadow:0 1px 6px rgba(34,28,27,.14);
    width:26px;height:26px;border-radius:var(--wi-r-btn);
    background:rgba(255,255,255,.92);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.wi-wishcard__chk input{width:15px;height:15px;margin:0;accent-color:var(--wi-ink);cursor:pointer}
.wi-wishcard__x{
    position:absolute;top:11px;right:11px;z-index:2;   /* 품절 덮개보다 위 */
    width:28px;height:28px;border-radius:var(--wi-r-pill);
    background:rgba(255,255,255,.92);color:var(--wi-mute);
    box-shadow:0 1px 6px rgba(34,28,27,.14);
    font-size:15px;line-height:1;
}
.wi-wishcard__x:hover{background:var(--wi-ink);color:#fff}
.wi-wishcard__out{
    position:absolute;inset:0;pointer-events:none;
    display:flex;align-items:center;justify-content:center;
    background:rgba(250,247,245,.72);
    font-size:12px;letter-spacing:0.18em;color:var(--wi-ink);
}
.wi-wishcard.is-out .wi-wishcard__thumb img{filter:grayscale(.35)}

.wi-wishcard__body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.wi-wishcard__maker{font-size:10px;letter-spacing:0.22em;color:var(--wi-faint);text-transform:uppercase}
.wi-wishcard__name{font-size:15px;font-weight:700;line-height:1.5;letter-spacing:-0.02em;text-wrap:pretty}
.wi-wishcard__name:hover{color:var(--wi-accent)}
.wi-wishcard__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:2px}
.wi-wishcard__price b{font-size:17px;font-weight:800;letter-spacing:-0.02em}
.wi-wishcard__price em{font-style:normal;font-size:11.5px;font-weight:400;margin-left:2px}
.wi-wishcard__price del{font-size:11.5px;color:var(--wi-faint-2);text-decoration:line-through}
.wi-wishcard__when{font-size:11px;color:var(--wi-faint)}
.wi-wishcard__acts{display:flex;gap:6px;margin-top:auto;padding-top:11px}
.wi-wishcard__acts .wi-btn{flex:1;height:42px;padding:0 12px;justify-content:center;white-space:nowrap}
/* [장바구니]가 넓고 [보기]는 딱 글자만 — 앞의 .wi-btn 규칙을 이겨야 한다 */
.wi-wishcard__acts .wi-wishcard__go{flex:0 0 auto;color:var(--wi-mute);border-color:var(--wi-line-2)}
/* 담은 직후 잠깐만 — 지속 상태가 아니다(2.4초 뒤 원래 글자로) */
.wi-wishcard__acts .wi-btn.is-done{background:var(--wi-ink);color:#fff;border-color:var(--wi-ink)}

/* ── 쪽 넘기기 ─────────────────────────────────────────────────────── */
.wi-wish__pg{display:flex;justify-content:center;padding-top:clamp(34px,4vw,52px)}
.wi-wish__pg .pg_page.is-off{color:var(--wi-faint-2);pointer-events:none}
.wi-wish__info{margin-top:14px;text-align:center;font-size:11.5px;letter-spacing:0.06em;color:var(--wi-mute-2)}

/* ── 하단 고정 바 — 장바구니 것과 같은 껍데기에 버튼만 둘 ──────────── */
.wi-wishbar .wi-btn{margin-left:0;padding:15px clamp(14px,2vw,24px)}
.wi-wishbar .wi-btn--ghost{margin-left:auto}

/* ── 옵션 고르기 모달 ─────────────────────────────────────────────────
 * 테마 ajax(get_item_option)가 코어 select 를 그려 준다 — 상세·장바구니와
 * 같은 버튼 UI(.wi-opt)로 바뀌므로 여기서는 자리만 잡는다.               */
.wi-modal__box--wishopt{max-width:460px;width:min(460px,100%)}
.wi-wishopt__wait{padding:40px 0;text-align:center;font-size:13px;color:var(--wi-faint)}
.wi-wishopt .sct_cartop_wr label:not(.sound_only){display:block;font-size:12.5px;font-weight:600;margin:0 0 8px}
.wi-wishopt .cartopt_cart_btn,
.wi-wishopt .cartopt_close_btn{display:none}   /* 우리 버튼을 따로 붙인다 */
.wi-wishopt__go{width:100%;margin-top:20px;justify-content:center}

/* ── 8-10 전체 사용후기 (shop/itemuselist.php) ────────────────────────
 * 시안 template/all_item_used/사용후기.dc.html.
 * 이 화면은 테마 훅이 없어 **스킨을 다시 썼다**(skin/shop/basic/itemuselist.skin.php).
 * 시안의 "도움돼요·BEST·MOST MENTIONED" 는 영카트에 저장할 자리가 없어 뺐다.
 * 첨부사진 줄은 위 5-7 공용 부품(.wi-photos)을 그대로 쓴다.               */
.wi-uselist{padding-bottom:clamp(30px,4vw,60px)}

/* 총평 — 평균 · 별점 분포. 코어에 없는 집계라 wi_use_stats() 가 센다 */
.wi-usestat{
    display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,44px);
    background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
    padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,30px);
}
.wi-usestat__avg{display:flex;align-items:center;gap:14px}
.wi-usestat__avg > strong{font-size:44px;font-weight:800;line-height:1;letter-spacing:-0.03em}
.wi-usestat__avg .wi-stars{font-size:14px}
.wi-usestat__cnt{margin-top:6px;font-size:12px;color:var(--wi-mute-2)}
.wi-usestat__dist{flex:1 1 260px;min-width:min(200px,100%);display:flex;flex-direction:column;gap:6px}
.wi-usestat__dist li{display:flex;align-items:center;gap:10px}
.wi-usestat__lab{flex:0 0 auto;width:26px;font-size:11.5px;color:var(--wi-mute-2)}
.wi-usestat__bar{flex:1;height:5px;border-radius:3px;background:var(--wi-tint-2);overflow:hidden}
.wi-usestat__bar i{display:block;height:100%;background:var(--wi-ink)}
.wi-usestat__num{flex:0 0 auto;width:34px;text-align:right;font-size:11.5px;color:var(--wi-faint)}
/* 오른쪽 타일 — 누르면 사진 후기만 걸린다. 시안의 MOST MENTIONED 자리인데
   키워드는 저장할 데가 없어(사용자 결정) 이 화면이 실제로 셀 수 있는 것을 넣었다 */
.wi-usestat__photo{
    flex:0 0 auto;display:flex;flex-direction:column;gap:3px;
    padding:12px 16px;border-radius:var(--wi-r-img);background:var(--wi-tint);
    font-size:12px;color:var(--wi-mute);
}
.wi-usestat__photo strong{font-size:22px;font-weight:800;letter-spacing:-0.03em;color:var(--wi-ink)}
.wi-usestat__photo:hover{background:var(--wi-tint-2);color:var(--wi-ink)}
.wi-usestat__photo.is-on{background:var(--wi-ink)}
.wi-usestat__photo.is-on,.wi-usestat__photo.is-on strong{color:#fff}

/* 거르기·정렬·검색 한 줄 */
.wi-usebar{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    margin-top:clamp(22px,2.6vw,30px);padding-bottom:14px;
    border-bottom:1px solid var(--wi-ink);
}
.wi-usebar__chips,.wi-usebar__sort{display:flex;flex-wrap:wrap;gap:6px}
/* 별점 거르기와 "사진 후기만" 은 성격이 다르다 — 붙여 두면 한 묶음으로 읽힌다 */
.wi-usebar__chips--sep{padding-left:11px;border-left:1px solid var(--wi-line-4)}
.wi-usebar__tools{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wi-usebar .wi-chip{height:34px;padding:0 13px;font-size:12px}
.wi-usebar__sort{padding-left:8px;border-left:1px solid var(--wi-line-2)}

.wi-usesearch{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* 검색항목 고르개는 5. 공통 컴포넌트에 한 벌로 있다(문의 목록과 같은 물건) */
/* 헤더 검색창과 같은 모양 — 돋보기 + 입력 한 덩어리 */
.wi-usesearch__box{
    display:flex;align-items:center;gap:7px;height:34px;padding:0 13px;
    background:var(--wi-tint);border:1px solid var(--wi-line);border-radius:var(--wi-r-pill);
}
.wi-usesearch__box input{
    width:clamp(120px,16vw,180px);border:0;outline:0;background:none;
    font-size:12.5px;color:var(--wi-ink);
}
.wi-usesearch__box input::placeholder{color:var(--wi-faint)}

/* 후기 한 줄 */
.wi-uses{display:flex;flex-direction:column;gap:12px;padding-top:clamp(18px,2.4vw,26px)}
.wi-use{
    display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(16px,2.2vw,26px);
    background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
    padding:clamp(18px,2.2vw,26px);
}
.wi-use__shot{flex:0 0 auto;--wi-shot:clamp(104px,12vw,132px)}
.wi-use__body{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:9px}
.wi-use__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wi-use__meta time{font-size:11.5px;color:var(--wi-faint)}
.wi-use__tit{font-size:16px;font-weight:700;letter-spacing:-0.02em;color:var(--wi-ink);text-wrap:pretty}
.wi-use__txt{font-size:13.5px}

.wi-use__foot{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    margin-top:4px;padding-top:12px;border-top:1px solid var(--wi-line-3);
}
.wi-use__item{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--wi-mute)}
.wi-use__item:hover{color:var(--wi-ink)}
.wi-use__itimg{
    flex:0 0 auto;width:26px;height:26px;border-radius:var(--wi-r-img);
    overflow:hidden;background:var(--wi-tint-2);
}
.wi-use__itimg img{width:100%;height:100%;object-fit:cover}
.wi-use__by{font-size:11.5px;color:var(--wi-faint)}

/* 판매자 답변 — 코어가 관리자 화면에서 다는 것(is_reply_*) */
.wi-use__reply{
    margin-top:4px;padding:14px 16px;border-radius:var(--wi-r-img);background:var(--wi-tint);
    display:flex;flex-direction:column;gap:5px;
}
.wi-use__replyhead{font-size:11px;letter-spacing:0.14em;color:var(--wi-faint)}
.wi-use__replytit{font-size:13px;font-weight:600;color:var(--wi-ink)}
.wi-use__reply .wi-prose{font-size:12.5px;line-height:1.9}

/* 몇 번째를 보고 있나 — 보관함의 .wi-wish__info 와 같은 줄 */
.wi-uselist__info{margin-top:14px;text-align:center;font-size:11.5px;letter-spacing:0.06em;color:var(--wi-mute-2)}

/* 조건에 맞는 것이 없을 때 */
.wi-empty{
    padding:clamp(56px,7vw,90px) 20px;text-align:center;
    background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
    margin-top:clamp(18px,2.4vw,26px);
}
.wi-empty__tit{font-size:17px;font-weight:700;letter-spacing:-0.02em}
.wi-empty__sub{margin:9px 0 22px;font-size:13px;color:var(--wi-mute-2)}

/* 한 줄에 다 못 들어가 접히면 오른쪽으로 밀지 않는다 */
@media (max-width:960px){
    .wi-usebar__tools{margin-left:0}
}
@media (max-width:640px){
    .wi-usebar__tools{width:100%}
    .wi-usesearch{width:100%}
    .wi-usesearch__box{flex:1 1 auto}
    .wi-usesearch__box input{width:100%}
    .wi-usebar__sort{padding-left:0;border-left:0}
    .wi-usebar__chips--sep{padding-left:0;border-left:0}
    .wi-usestat__photo{width:100%;flex-direction:row;align-items:baseline;gap:8px}
}

/* ── 8-11 전체 상품문의 (shop/itemqalist.php) ─────────────────────────
 * 시안 template/all_item_question/상품문의.dc.html.
 * 이 화면도 테마 훅이 없어 **스킨을 다시 썼다**(skin/shop/basic/itemqalist.skin.php).
 * 답변 상태 필터는 코어 WHERE 에 없어 스킨이 조건을 덧붙여 다시 센다.
 * 첨부사진 줄은 5-7 공용 부품(.wi-photos), Q/A 동그라미는 .qa_alp 를 그대로 쓴다.
 * TODO 도구줄(.wi-qabar / .wi-qasearch)은 8-10 의 .wi-usebar / .wi-usesearch 와
 *      같은 물건이다. 두 화면이 다 자리 잡으면 한 벌로 합친다.               */
.wi-qalist{padding-bottom:clamp(30px,4vw,60px)}

.wi-qabar{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    margin-top:clamp(22px,2.6vw,30px);padding-bottom:14px;
    border-bottom:1px solid var(--wi-ink);
}
.wi-qabar__chips{display:flex;flex-wrap:wrap;gap:6px}
.wi-qabar__tools{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wi-qabar .wi-chip{height:34px;padding:0 13px;font-size:12px}
.wi-qasearch{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wi-qasearch__box{
    display:flex;align-items:center;gap:7px;height:34px;padding:0 13px;
    background:var(--wi-tint);border:1px solid var(--wi-line);border-radius:var(--wi-r-pill);
}
.wi-qasearch__box input{
    width:clamp(120px,16vw,180px);border:0;outline:0;background:none;
    font-size:12.5px;color:var(--wi-ink);
}
.wi-qasearch__box input::placeholder{color:var(--wi-faint)}

/* 목록 — 한 줄이 곧 여닫는 손잡이다 */
.wi-qa{margin-top:4px;border-top:1px solid var(--wi-line-2)}
.wi-qa__it{border-bottom:1px solid var(--wi-line-2)}
.wi-qa__head{
    width:100%;display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);
    padding:20px 4px;background:none;border:0;cursor:pointer;text-align:left;
}
.wi-qa__head:hover .wi-qa__tit{color:var(--wi-accent)}
.wi-qa__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.wi-qa__prod{font-size:11.5px;letter-spacing:0.02em;color:var(--wi-faint)}
.wi-qa__tit{
    font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--wi-ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wi-qa__meta{flex:0 0 auto;display:flex;gap:14px;font-size:12px;color:var(--wi-mute-2)}
.wi-qa__caret{
    flex:0 0 auto;width:7px;height:7px;margin-right:6px;
    border-right:1.5px solid var(--wi-mute);border-bottom:1.5px solid var(--wi-mute);
    transform:translateY(-2px) rotate(45deg);transition:transform .18s ease;
}
.wi-qa__it.is-open .wi-qa__caret{transform:translateY(2px) rotate(225deg)}

/* 펼친 속 — 상품 카드 · Q · A */
.wi-qa__body{padding:0 4px 26px}
.wi-qa__prodcard{
    display:inline-flex;align-items:center;gap:14px;margin-bottom:18px;padding:10px 16px 10px 10px;
    background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
}
.wi-qa__prodcard img{width:56px;height:56px;object-fit:cover;border-radius:calc(var(--wi-r-img) / 2)}
.wi-qa__prodcard strong{display:block;margin-top:3px;font-size:13.5px;font-weight:600;color:var(--wi-ink)}
.wi-qa__prodcard:hover strong{color:var(--wi-accent)}
.wi-qa__qa{--wi-shot:112px}
.wi-qa__line{display:flex;gap:12px;font-size:14.5px;line-height:1.8}
.wi-qa__line--a{
    margin-top:14px;padding:16px 18px;background:var(--wi-tint);border-radius:var(--wi-r-box);
}
.wi-qa__line--a .wi-qa__qa{--wi-shot:96px}
.wi-qa__cont{flex:1;min-width:0}
.wi-qa__lock{color:var(--wi-mute-2)}
.wi-qa__wait{margin-top:14px;font-size:13px;color:var(--wi-mute-2)}
.wi-qa__go{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}

@media (max-width:640px){
    .wi-qabar__tools{margin-left:0;width:100%}
    .wi-qasearch{width:100%}
    .wi-qasearch__box{flex:1 1 auto}
    .wi-qasearch__box input{width:100%}
    /* 좁은 화면에서는 배지+제목 한 줄, 작성자·날짜가 그 아래로 내려간다.
       화살표까지 흐름에 두면 **세 번째 줄로 떨어져** 제목과 멀어진다 —
       오른쪽에 고정한다(390px 실측 2026-08-23). */
    .wi-qa__head{position:relative;flex-wrap:wrap;padding:18px 26px 18px 4px}
    .wi-qa__meta{width:100%;order:3;gap:10px;font-size:11.5px}
    .wi-qa__caret{position:absolute;right:6px;top:26px;margin:0}
    .wi-qa__prodcard{width:100%}
    .wi-qa__line{gap:9px}
}


/* ── 8-12 마이페이지 (shop/mypage.php) ────────────────────────────────
 * **탭 콘솔** — 한 장이 아니라 다섯 판이다(사용자 결정 2026-08-23, 목업 C).
 * 회원 줄 + 탭이 위에 붙어 있고 그 아래 판 하나만 보인다. 판은 CSS 로만
 * 갈아 끼우고(=서버 왕복 없음), 어느 판인지는 주소 해시에 남는다.
 * ⚠️ 주문 목록의 필터·쪽수만 서버가 센다 — 그 링크에는 #order 가 붙는다.
 *
 * .wi-main 이 콘텐츠 폭이다. 회원 줄·탭은 화면 끝까지 가는 띠라서
 * 여기서만 음수 마진으로 폭을 되돌린다 → [[wi-main-is-the-width]]        */
.wi-mp{padding-bottom:clamp(40px,5vw,80px)}

/* ── 위 띠: 회원 줄 + 탭 ── */
/* 위 띠는 화면 끝까지 나간다 — 상세 히어로와 같은 수법(margin:calc(50% - 50vw)).
   #wrapper 에 overflow-x:clip 이 걸려 있어 가로 스크롤은 생기지 않는다.
   위로 당기는 값은 .wi-main 의 padding-top 과 같은 값이다 — 헤더에 붙인다. */
.wi-mp-top{
    margin:calc(clamp(24px, 3vw, 44px) * -1) calc(50% - 50vw) 0;
    padding:0 calc(max(0px, (100vw - var(--wi-max)) / 2) + var(--wi-gutter));
    background:var(--wi-surface);
    border-bottom:1px solid var(--wi-line);
}

.wi-mp-me{display:flex;align-items:center;gap:18px;padding:28px 0 22px;flex-wrap:wrap}
.wi-mp-me__ava{
    width:56px;height:56px;flex:none;border-radius:50%;background:var(--wi-tint-3);
    display:grid;place-items:center;font-size:21px;font-weight:700;color:var(--wi-accent);
}
.wi-mp-me__who b{font-size:19px;font-weight:700;letter-spacing:-0.03em}
.wi-mp-me__who b span{
    margin-left:9px;vertical-align:2px;font-size:10.5px;font-weight:700;letter-spacing:0.12em;
    color:var(--wi-accent);border:1px solid currentColor;padding:3px 7px;border-radius:var(--wi-r-pill);
}
.wi-mp-me__who p{margin-top:6px;font-size:12.5px;color:var(--wi-mute)}
.wi-mp-me__sp{flex:1 1 auto}
.wi-mp-me__act{display:flex;gap:8px}

.wi-mp-tabs{display:flex;gap:clamp(16px,3vw,38px);overflow-x:auto;scrollbar-width:none}
.wi-mp-tabs::-webkit-scrollbar{display:none}
.wi-mp-tabs a{
    position:relative;padding:0 2px 16px;font-size:15px;font-weight:600;
    color:var(--wi-mute);white-space:nowrap;letter-spacing:-0.02em;
}
.wi-mp-tabs a em{
    font-style:normal;margin-left:6px;font-size:11.5px;font-weight:700;
    color:var(--wi-faint-2);vertical-align:1px;
}
.wi-mp-tabs a:hover{color:var(--wi-ink)}
.wi-mp-tabs a.on{color:var(--wi-ink)}
.wi-mp-tabs a.on em{color:var(--wi-accent)}
.wi-mp-tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--wi-ink)}

/* ── 판 ── */
.wi-mp-wrap{padding-top:clamp(26px,3.5vw,42px)}
/* 판을 감추는 것은 **자바스크립트가 붙은 뒤부터**다(.wi-mp--js 는 JS 가 단다).
   그래야 JS 가 못 돌아도 다섯 판이 그냥 세로로 다 보인다 — 빈 화면보다 낫다. */
.wi-mp--js .wi-mp-panel{display:none}
.wi-mp--js .wi-mp-panel.on{display:block;animation:wi-mp-fade .22s ease-out}
@keyframes wi-mp-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.wi-mp-sec + .wi-mp-sec{margin-top:clamp(34px,4vw,48px)}
.wi-mp-h3{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px}
.wi-mp-h3 h3{font-size:15.5px;font-weight:700;letter-spacing:-0.03em}
.wi-mp-h3 h3 span{margin-left:7px;font-size:12.5px;font-weight:400;color:var(--wi-faint)}
.wi-mp-h3__note{font-size:12.5px;color:var(--wi-faint)}

/* ── 대시보드 타일 여섯 ── */
.wi-mp-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;
    margin-bottom:clamp(34px,4vw,48px)}
.wi-mp-tiles a{
    display:block;padding:20px 18px 18px;background:var(--wi-surface);
    border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
    transition:border-color .15s,transform .15s;
}
.wi-mp-tiles a:hover{border-color:var(--wi-line-4);transform:translateY(-2px)}
.wi-mp-tiles span{font-size:12px;color:var(--wi-mute)}
.wi-mp-tiles b{display:block;margin-top:10px;font-size:25px;font-weight:700;letter-spacing:-0.045em}
.wi-mp-tiles b i{font-style:normal;font-size:13px;font-weight:500;color:var(--wi-mute-2);margin-left:2px}
.wi-mp-tiles a.is-hi{background:var(--wi-tint-3);border-color:transparent}
.wi-mp-tiles a.is-hi b{color:var(--wi-accent)}

/* ── 최근 활동 ── */
.wi-mp-log li{
    display:flex;gap:14px;align-items:baseline;
    padding:14px 0;border-top:1px solid var(--wi-line-3);font-size:13.5px;
}
.wi-mp-log li:first-child{border-top:0}
.wi-mp-log time{flex:none;width:92px;font-size:12px;color:var(--wi-faint)}
.wi-mp-log em{
    flex:none;font-style:normal;font-size:11px;font-weight:700;letter-spacing:0.04em;
    padding:3px 8px;border-radius:var(--wi-r-pill);background:var(--wi-tint);color:var(--wi-mute);
}
.wi-mp-log em.k-p{background:rgba(176,104,94,0.12);color:var(--wi-accent)}
.wi-mp-log p{min-width:0;color:var(--wi-ink-soft);line-height:1.5}
.wi-mp-log p b{font-weight:600;color:var(--wi-ink)}
.wi-mp-log a:hover{color:var(--wi-accent)}

/* ── 배송 카드 ── */
.wi-mp-live{
    background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
    padding:clamp(22px,3vw,32px);
    display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,52px);
}
.wi-mp-live.is-lead{margin-bottom:clamp(30px,4vw,42px)}
.wi-mp-live__hd{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.wi-mp-live__st{
    display:inline-flex;align-items:center;height:26px;padding:0 11px;
    background:var(--wi-accent);color:#fff;font-size:11.5px;font-weight:700;
    letter-spacing:0.06em;border-radius:var(--wi-r-pill);
}
.wi-mp-live__no{font-size:12.5px;color:var(--wi-faint)}
.wi-mp-live__goods{display:flex;gap:14px;align-items:center}
.wi-mp-live__pics{display:flex;flex:none}
.wi-mp-live__pics img,.wi-mp-live__pics .more{
    width:78px;height:78px;flex:none;object-fit:cover;border-radius:var(--wi-r-img);
    background:var(--wi-tint-2);border:2px solid var(--wi-surface);
}
.wi-mp-live__pics img + img,.wi-mp-live__pics .more{margin-left:-24px}
.wi-mp-live__pics .more{display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--wi-mute)}
.wi-mp-live__t{min-width:0}
.wi-mp-live__t b{display:block;font-size:16px;font-weight:700;letter-spacing:-0.03em}
.wi-mp-live__t i{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--wi-mute)}
.wi-mp-live__t u{display:block;margin-top:10px;text-decoration:none;font-size:15px;font-weight:700}

/* 네 단계 — 채우는 길이는 --wi-step(0~3) 이 정한다 */
.wi-mp-step{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.wi-mp-step::before,.wi-mp-step::after{content:"";position:absolute;top:7px;height:2px}
.wi-mp-step::before{left:12.5%;right:12.5%;background:var(--wi-line-2)}
.wi-mp-step::after{left:12.5%;width:calc(25% * var(--wi-step,0));background:var(--wi-accent)}
.wi-mp-step li{position:relative;text-align:center}
.wi-mp-step li::before{
    content:"";display:block;width:16px;height:16px;margin:0 auto;border-radius:50%;
    background:var(--wi-bg);border:2px solid var(--wi-line-2);position:relative;z-index:1;
}
.wi-mp-step li.on::before{background:var(--wi-accent);border-color:var(--wi-accent)}
.wi-mp-step li.now::before{
    background:var(--wi-surface);border-color:var(--wi-accent);
    box-shadow:0 0 0 4px rgba(176,104,94,0.16);
}
.wi-mp-step em{display:block;margin-top:10px;font-style:normal;font-size:12.5px;color:var(--wi-faint)}
.wi-mp-step li.on em,.wi-mp-step li.now em{color:var(--wi-ink);font-weight:600}
.wi-mp-step small{display:block;margin-top:3px;font-size:11.5px;color:var(--wi-faint-2)}

.wi-mp-ship{border-left:1px solid var(--wi-line);padding-left:clamp(20px,3vw,38px)}
.wi-mp-ship dl{margin-top:16px;font-size:13px;line-height:1.7}
.wi-mp-ship dt{color:var(--wi-faint);font-size:11.5px;letter-spacing:0.04em}
.wi-mp-ship dd{margin-bottom:13px;color:var(--wi-ink-soft)}
.wi-mp-ship dd b{font-weight:600;color:var(--wi-ink)}
.wi-mp-ship__btns{margin-top:22px;display:grid;gap:8px}

/* ── 필터 칩 ── */
.wi-mp-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.wi-mp-chips a{
    display:inline-flex;align-items:center;gap:5px;height:33px;padding:0 14px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-pill);
    font-size:12.5px;color:var(--wi-ink-soft);
}
.wi-mp-chips a:hover{border-color:var(--wi-ink)}
.wi-mp-chips a.on{background:var(--wi-ink);border-color:var(--wi-ink);color:#fff;font-weight:600}
.wi-mp-chips .sp{flex:1 1 auto}
.wi-mp-chips select{
    height:33px;border:1px solid var(--wi-line-4);background:var(--wi-surface);
    border-radius:var(--wi-r-btn);padding:0 10px;font-size:12.5px;color:var(--wi-ink-soft);
}

/* ── 표 (주문 · 포인트) ── */
.wi-mp-tw{
    background:var(--wi-surface);border:1px solid var(--wi-line);
    border-radius:var(--wi-r-box);overflow:auto;
}
.wi-mp-tb{width:100%;border-collapse:collapse;min-width:820px;font-size:13.5px}
.wi-mp-tb th{
    text-align:left;font-size:11.5px;font-weight:700;letter-spacing:0.08em;color:var(--wi-faint);
    padding:14px 16px;border-bottom:1px solid var(--wi-line);background:var(--wi-tint);white-space:nowrap;
}
.wi-mp-tb td{padding:14px 16px;border-bottom:1px solid var(--wi-line-3);vertical-align:middle}
.wi-mp-tb tr:last-child td{border-bottom:0}
.wi-mp-tb tbody tr:hover{background:var(--wi-tint)}
.wi-mp-tb .r{text-align:right}
.wi-mp-tb .no{font-size:12.5px;color:var(--wi-mute);white-space:nowrap}
/* 취소된 주문의 금액 — 실제로 빠져나간 돈이 아니다. 흐리게 둔다 */
.wi-mp-tb td.off{color:var(--wi-faint-2)}
.wi-mp-tb .plus{color:var(--wi-accent);font-weight:700}
.wi-mp-tb .minus{font-weight:700}
.wi-mp-tb .goods{display:flex;gap:12px;align-items:center;min-width:240px}
.wi-mp-tb .goods img,.wi-mp-tb .goods .noimg{
    width:60px;height:60px;flex:none;object-fit:cover;
    border-radius:var(--wi-r-img);background:var(--wi-tint-2);
}
.wi-mp-tb .goods b{display:block;font-weight:600;font-size:13.5px;letter-spacing:-0.02em}
.wi-mp-tb .goods i{display:block;margin-top:4px;font-style:normal;font-size:12px;color:var(--wi-faint)}
.wi-mp-tb .goods:hover b{color:var(--wi-accent)}
/* ⚠️ 여기에 display:flex 를 걸면 안 된다 — td 는 table-cell 이라야 줄에 남는다.
   flex 로 바꾸는 순간 그 칸만 줄 밖으로 빠져나가 오른쪽에 따로 떠 버린다. */
.wi-mp-tb .act{text-align:right;white-space:nowrap}
.wi-mp-tb .act .wi-btn + .wi-btn{margin-left:6px}
.wi-mp-st{font-size:12px;font-weight:700;white-space:nowrap}
.wi-mp-st.ing{color:var(--wi-accent)}
.wi-mp-st.done{color:var(--wi-ink-soft)}
.wi-mp-st.off{color:var(--wi-faint-2)}

/* 쪽 넘기기 */
.wi-mp-pg{margin-top:18px;display:flex;justify-content:center;gap:6px}
.wi-mp-pg a{
    width:32px;height:32px;display:grid;place-items:center;font-size:13px;
    color:var(--wi-mute);border-radius:var(--wi-r-btn);
}
.wi-mp-pg a:hover{background:var(--wi-tint);color:var(--wi-ink)}
.wi-mp-pg a.on{background:var(--wi-ink);color:#fff;font-weight:700}

/* ── 쿠폰 티켓 ── */
.wi-mp-cps{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px}
.wi-mp-cp{
    position:relative;background:var(--wi-surface);border:1px solid var(--wi-line);
    border-radius:var(--wi-r-box);padding:22px 96px 22px 24px;
}
/* 오른쪽에 뜯는 자리 — 위아래 반원 파임 + 점선 */
.wi-mp-cp::before,.wi-mp-cp::after{
    content:"";position:absolute;right:70px;width:16px;height:16px;border-radius:50%;
    background:var(--wi-bg);border:1px solid var(--wi-line);
}
.wi-mp-cp::before{top:-9px}
.wi-mp-cp::after{bottom:-9px}
.wi-mp-cp .cut{position:absolute;right:78px;top:10px;bottom:10px;border-left:1px dashed var(--wi-line-2)}
.wi-mp-cp b{display:block;font-size:24px;font-weight:700;letter-spacing:-0.035em}
.wi-mp-cp p{margin-top:8px;font-size:13.5px;font-weight:600;letter-spacing:-0.02em}
.wi-mp-cp small{display:block;margin-top:7px;font-size:12px;color:var(--wi-faint);line-height:1.5}
.wi-mp-cp small.when{margin-top:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.wi-mp-cp .left{
    position:absolute;right:0;top:0;bottom:0;width:78px;display:grid;place-items:center;
    font-style:normal;font-size:11.5px;font-weight:700;color:var(--wi-mute);text-align:center;
    padding:0 8px;line-height:1.4;
}

/* ── 내 정보 ── */
.wi-mp-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px clamp(20px,4vw,52px)}
.wi-mp-form .f.full{grid-column:1/-1}
.wi-mp-form .lab{
    display:block;font-size:11.5px;font-weight:700;letter-spacing:0.08em;
    color:var(--wi-faint);margin-bottom:7px;
}
.wi-mp-form .v{
    background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:var(--wi-r-btn);
    padding:13px 15px;font-size:14px;color:var(--wi-ink-soft);min-height:46px;
}
.wi-mp-form .v.mut{color:var(--wi-faint-2)}

.wi-mp-addr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wi-mp-addr li{
    background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
    padding:20px 22px;font-size:13.5px;line-height:1.6;
}
.wi-mp-addr li.def{border-color:var(--wi-line-4)}
.wi-mp-addr b{font-size:14.5px;font-weight:700}
.wi-mp-addr .tag{
    margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:0.08em;color:#fff;
    background:var(--wi-ink);padding:3px 7px;border-radius:var(--wi-r-pill);vertical-align:2px;
}
.wi-mp-addr p{margin-top:8px;color:var(--wi-ink-soft)}

.wi-mp-out{
    margin-top:24px;padding-top:20px;border-top:1px solid var(--wi-line-2);
    display:flex;gap:18px;font-size:12.5px;color:var(--wi-faint);
}
.wi-mp-out a:hover{color:var(--wi-accent)}

/* 비어 있을 때 */
.wi-mp-none{padding:clamp(40px,5vw,64px) 0;text-align:center}
.wi-mp-none p{font-size:13.5px;color:var(--wi-mute)}
.wi-mp-none .wi-btn{margin-top:18px}

@media (max-width:1180px){
    .wi-mp-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
    .wi-mp-live{grid-template-columns:minmax(0,1fr)}
    .wi-mp-ship{border-left:0;border-top:1px solid var(--wi-line);padding-left:0;padding-top:22px}
}
@media (max-width:820px){
    .wi-mp-form,.wi-mp-addr{grid-template-columns:minmax(0,1fr)}
    .wi-mp-me{padding:20px 0 16px;gap:14px}
    .wi-mp-me__ava{width:46px;height:46px;font-size:18px}
    .wi-mp-me__act{width:100%}
    .wi-mp-me__act .wi-btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:560px){
    .wi-mp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* 사진 옆에 글을 붙이면 남는 폭이 90px 밖에 안 돼 운송장 번호가
       가운데서 끊긴다(390px 실측). 사진을 위로 올리고 글에 한 줄을 준다. */
    .wi-mp-live__goods{flex-wrap:wrap}
    .wi-mp-live__t{flex:1 1 100%}
    .wi-mp-log li{flex-wrap:wrap;gap:8px}
    .wi-mp-log time{width:auto}
    .wi-mp-log p{flex:1 1 100%}
    .wi-mp-cps{grid-template-columns:minmax(0,1fr)}
}

/* ── 사이드뷰(작성자 이름을 누르면 나오는 메뉴) ────────────────────────
 * get_sideview() 는 닉네임 뒤에 <span class="sv"> 로 메뉴(쪽지보내기·
 * 메일보내기·자기소개·전체게시물)를 붙여 준다.
 *
 * ⚠️ **감추던 규칙이 코어 css/default.css 에 있었고 우리는 그 파일을
 *    걷어냈다** — 그래서 닉네임 뒤에 메뉴가 글자로 쏟아졌다(쪽지함에서
 *    실측 2026-08-25). 그때는 통째로 감췄는데, 그러면 쪽지보내기·자기소개로
 *    갈 길이 사라진다 → [[youngcart-features-preserved]]
 *    지금은 **테마 드롭다운으로 되살린다.** 여는 것은 코어 common.js 가
 *    한다(.sv_member 클릭 → .sv 에 .sv_on). 안의 링크는 전부 새 창을 열려고
 *    하는데, js/wi-formmodal.js 의 자동 모달이 capture 단계에서 가로챈다
 *    → [[no-popup-windows]]
 * ⚠️ 우리 화면(쪽지함·프로필)은 아예 날것 mb_nick 을 쓴다 — 여기 규칙은
 *    게시판처럼 **코어가 만드는 자리**를 위한 것이다. */
.sv_wrap{position:relative;display:inline-block;font-weight:inherit}
.sv_wrap > a.sv_member,.sv_wrap > a.sv_guest{cursor:pointer;color:inherit}
.sv_wrap > a.sv_member:hover,.sv_wrap > a.sv_guest:hover{color:var(--wi-accent)}
.sv_wrap .sv{display:none}
.sv_nojs{display:none}                      /* JS 없을 때용 사본 — 두 벌이 되면 안 된다 */
.sv_wrap .sv.sv_on{
    display:block;position:absolute;z-index:60;top:calc(100% + 7px);left:0;
    min-width:132px;padding:6px 0;
    background:var(--wi-surface);border:1px solid var(--wi-line-4);
    border-radius:var(--wi-r-box);box-shadow:0 10px 28px rgba(34,28,27,.13);
}
.sv_wrap .sv.sv_on::before{
    content:"";position:absolute;top:-5px;left:16px;width:8px;height:8px;
    background:var(--wi-surface);border-left:1px solid var(--wi-line-4);
    border-top:1px solid var(--wi-line-4);transform:rotate(45deg);
}
.sv_wrap .sv a{
    display:block;padding:7px 14px;font-size:12.5px;font-weight:400;
    letter-spacing:-0.01em;color:var(--wi-ink-soft);white-space:nowrap;
}
.sv_wrap .sv a:hover{background:var(--wi-tint);color:var(--wi-ink)}

/* ── 8-13 코어 팝업 목록 — 포인트 · 쿠폰 · 쪽지 · 스크랩 ───────────────
 * 코어는 이 넷을 target="_blank" 새 창으로 띄웠다. 마이페이지·프로필
 * 드롭다운에서 data-wi-form 으로 **모달에 심는다**(→ js/wi-formmodal.js).
 * 그러면 팝업 페이지의 <head> 는 버려지므로 스킨 style.css 도 안 따라온다
 * — 목록 모양을 여기서 준다. 제목·닫기는 모달 것을 쓴다.
 * ⚠️ 모달 안에서만 건다. 주소를 직접 열면 그때는 코어 스킨 CSS 가 산다.  */
.wi-modal #point,.wi-modal #coupon,.wi-modal #memo_list,.wi-modal #scrap{font-size:13px}
#point,#coupon,#memo_list,#scrap,#scrap_do,#memo_write,#memo_view{font-size:13px}
.wi-modal .new_win > h1#win_title,
.wi-modal .new_win > .btn_close{display:none}
/* 주소를 직접 열었을 때 — 모달이 없으니 제목은 우리가 그린다 */
.new_win > h1#win_title{font-size:19px;font-weight:700;letter-spacing:-0.03em;margin-bottom:14px}
.wi-modal .new_win_con2{max-height:min(58vh,540px);overflow-y:auto}

/* 맨 위 요약 줄 (보유포인트 등) */
.wi-modal .point_all,.new_win .point_all{
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    margin-bottom:14px;padding:14px 16px;border-radius:var(--wi-r-img);
    background:var(--wi-tint);font-size:12.5px;color:var(--wi-mute);
}
.wi-modal .point_all span,.new_win .point_all span{font-size:19px;font-weight:700;letter-spacing:-0.03em;color:var(--wi-ink);font-variant-numeric:tabular-nums}

/* 목록 한 줄 — 쿠폰(코어 마크업 그대로 쓰는 마지막 하나) */
.wi-modal #coupon ul:not(.win_ul) > li{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
    padding:12px 0;border-top:1px solid var(--wi-line-3);
}
.wi-modal #coupon ul:not(.win_ul) > li:first-child{border-top:0;padding-top:0}
.wi-modal .cou_date{font-size:11.5px;color:var(--wi-faint)}

/* ⚠️ `#scrap ul > li` 는 **탭(ul.win_ul)까지** 잡는다. 그냥 두면 탭이
   목록 줄처럼 세로로 쌓인다(쪽지함에서 2026-08-23 실측).
   :not(.win_ul) 로 빼고, 탭은 바로 아래에서 따로 그린다.
   (쪽지는 우리 마크업으로 갈아서 여기서 빠졌다 — 8-19 절) */



/* 탭 — 받은쪽지 · 보낸쪽지 · 쪽지쓰기. 마이페이지 판 탭과 같은 모양이다 */
.wi-modal .win_ul,.new_win .win_ul{
    display:flex;gap:22px;margin:0 0 16px;
    border-bottom:1px solid var(--wi-line);
}
.wi-modal .win_ul > li,.new_win .win_ul > li{padding:0;border:0}
.wi-modal .win_ul a,.new_win .win_ul a{
    position:relative;display:block;padding:0 2px 11px;
    font-size:14px;font-weight:600;color:var(--wi-mute);white-space:nowrap;
}
.wi-modal .win_ul a:hover,.new_win .win_ul a:hover{color:var(--wi-ink)}
.wi-modal .win_ul .selected a,.new_win .win_ul .selected a{color:var(--wi-ink)}
.wi-modal .win_ul .selected a::after,.new_win .win_ul .selected a::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--wi-ink);
}
/* 제목 옆 "전체 쪽지 N통" — h1 은 감췄지만 이 줄은 살려서 위로 올린다 */
.wi-modal .win_total,.new_win .win_total{
    display:block;margin:-2px 0 14px;font-size:12.5px;font-weight:400;color:var(--wi-mute);
}
.wi-modal .new_win > h1#win_title{display:block;font-size:0;margin:0}

/* 쪽 넘기기 — 본문 쪽수 줄은 위 여백이 크다. 모달 안에서는 줄인다 */
.wi-modal .pg_wrap{margin:16px 0 0}
.wi-modal .win_desc,.new_win .win_desc{margin-top:14px;font-size:12px;color:var(--wi-faint)}
.new_win .win_desc b{font-weight:700;color:var(--wi-ink-soft)}




/* 쿠폰 — 이름·금액이 한 줄, 조건·기간이 아랫줄 */
.wi-modal .cou_top{flex:1 1 100%;display:flex;align-items:baseline;gap:10px}
.wi-modal .cou_tit{flex:1 1 auto;min-width:0;font-weight:600;letter-spacing:-0.02em}
.wi-modal .cou_pri{font-weight:700;font-variant-numeric:tabular-nums;color:var(--wi-ink)}
.wi-modal .cou_target{font-size:11.5px;color:var(--wi-mute)}

.wi-modal .memo_del:hover,.wi-modal .scrap_del:hover{color:var(--wi-accent)}
.wi-modal .scrap_cate{font-size:11.5px;color:var(--wi-faint)}

.wi-modal .empty_li,.wi-modal .empty_table{
    display:block;padding:44px 0;text-align:center;color:var(--wi-mute);border:0;
}

/* ── 8-14 주문상세내역 (shop/orderinquiryview.php) ─────────────────────
 * 마이페이지 [주문·배송] 판과 같은 말투다 — 상태 배지 · 단계 타임라인 ·
 * 오른쪽 결제 카드. 같은 주문을 두 화면이 다르게 말하면 안 된다.
 *
 * ⚠️ **취소된 주문은 뼈대는 같고 색과 말이 다르다**(사용자 지시 2026-08-23).
 *    `.wi-od.is-dead` 한 줄로 강조색을 무채색으로 갈아 끼운다 — 규칙을
 *    두 벌 쓰지 않는다. 아래 --wi-od-key 가 그 손잡이다.                */
.wi-od{
    --wi-od-key:  var(--wi-accent);   /* 배지·타임라인·강조 */
    --wi-od-soft: var(--wi-tint-3);   /* 히어로 바탕 */
    padding-bottom:clamp(40px,5vw,80px);
}
/* 취소는 **한눈에 달라 보여야 한다.** --wi-tint 는 기본 히어로(--wi-tint-3)와
   너무 비슷해 구별이 안 됐다(2026-08-23 실측) — 회색기가 도는 --wi-warm 으로. */
.wi-od.is-dead{
    --wi-od-key:  var(--wi-mute-2);
    --wi-od-soft: var(--wi-warm);
}

/* ⚠️ .wi-crumb 는 이미 전역에 있다(4절) — 여기서 다시 정의하면 상품상세
   히어로 빵부스러기까지 바뀐다. 이 화면에서 필요한 여백만 준다. */
.wi-od > .wi-crumb{padding-bottom:14px}

.wi-od-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
    padding-bottom:22px;
}
.wi-od-head h1{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-0.035em}
.wi-od-head p{margin-top:9px;font-size:13px;color:var(--wi-mute)}
.wi-od-head p strong{font-weight:600;color:var(--wi-ink);font-variant-numeric:tabular-nums}

/* ── 상태 히어로 ── */
.wi-od-state{
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    background:var(--wi-od-soft);border-radius:var(--wi-r-box);
    padding:clamp(22px,3vw,30px) clamp(22px,3vw,32px);
}
.wi-od-badge{
    display:inline-flex;align-items:center;height:26px;padding:0 12px;
    background:var(--wi-od-key);color:#fff;font-size:11.5px;font-weight:700;
    letter-spacing:0.06em;border-radius:var(--wi-r-pill);
}
.wi-od-state__say p{
    margin-top:12px;font-size:clamp(17px,2vw,21px);font-weight:700;letter-spacing:-0.035em;
}
.wi-od-state__say i{
    display:block;margin-top:7px;font-style:normal;font-size:13px;color:var(--wi-ink-soft);
}

/* ── 단계 — 칸 수는 --wi-steps(2 또는 4)가 정한다 ── */
.wi-od-step{
    margin:clamp(24px,3vw,34px) 0 clamp(30px,4vw,44px);
    display:grid;grid-template-columns:repeat(var(--wi-steps,4),1fr);position:relative;
}
.wi-od-step::before,.wi-od-step::after{content:"";position:absolute;top:7px;height:2px}
.wi-od-step::before{
    left:calc(50% / var(--wi-steps,4));right:calc(50% / var(--wi-steps,4));
    background:var(--wi-line-2);
}
.wi-od-step::after{
    left:calc(50% / var(--wi-steps,4));
    width:calc(100% / var(--wi-steps,4) * var(--wi-step,0));
    background:var(--wi-od-key);
}
.wi-od-step li{position:relative;text-align:center}
.wi-od-step li::before{
    content:"";display:block;width:16px;height:16px;margin:0 auto;border-radius:50%;
    background:var(--wi-bg);border:2px solid var(--wi-line-2);position:relative;z-index:1;
}
.wi-od-step li.on::before{background:var(--wi-od-key);border-color:var(--wi-od-key)}
.wi-od-step li.now::before{
    background:var(--wi-surface);border-color:var(--wi-od-key);
    box-shadow:0 0 0 4px rgba(176,104,94,0.16);
}
/* 취소는 마지막 점을 채워 끝났음을 보인다 — 기다릴 것이 없다 */
.wi-od-step.is-dead li.now::before{
    background:var(--wi-od-key);border-color:var(--wi-od-key);
    box-shadow:0 0 0 4px rgba(124,112,108,0.16);
}
.wi-od-step em{display:block;margin-top:10px;font-style:normal;font-size:12.5px;color:var(--wi-faint)}
.wi-od-step li.on em,.wi-od-step li.now em{color:var(--wi-ink);font-weight:600}
.wi-od-step small{display:block;margin-top:3px;font-size:11.5px;color:var(--wi-faint-2)}

/* ── 두 칸 ── */
.wi-od-cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(24px,3vw,44px);align-items:start}

.wi-od-box{
    background:var(--wi-surface);border:1px solid var(--wi-line);
    border-radius:var(--wi-r-box);padding:clamp(20px,2.4vw,28px);
}
.wi-od-box + .wi-od-box{margin-top:16px}
.wi-od-box__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.wi-od-box__head h2{font-size:15.5px;font-weight:700;letter-spacing:-0.03em}
.wi-od-box__head h2 span{margin-left:7px;font-size:12.5px;font-weight:400;color:var(--wi-faint)}
.wi-od-box__head .wi-link{background:none;border:0;cursor:pointer;padding:0 0 1px}

/* 상품 줄 */
.wi-od-items > li{
    display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:center;
    padding:16px 0;border-top:1px solid var(--wi-line-3);
}
.wi-od-items > li:first-child{border-top:0;padding-top:0}
.wi-od-items > li.is-dead{opacity:.55}
.wi-od-items__img img{width:84px;height:84px;object-fit:cover;border-radius:var(--wi-r-img);background:var(--wi-tint-2)}
.wi-od-items__name{font-size:14.5px;font-weight:600;letter-spacing:-0.02em}
.wi-od-items__name:hover{color:var(--wi-accent)}
.wi-od-items__opt{margin-top:5px;font-size:12.5px;color:var(--wi-mute)}
.wi-od-items__meta{
    margin-top:7px;display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--wi-faint);
}
.wi-od-items__meta b{font-weight:600;color:var(--wi-mute)}
.wi-od-items__right{text-align:right;white-space:nowrap}
.wi-od-items__st{display:block;font-size:12px;font-weight:700}
.wi-od-items__st.ing{color:var(--wi-accent)}
.wi-od-items__st.done{color:var(--wi-ink-soft)}
.wi-od-items__st.off{color:var(--wi-faint-2)}
.wi-od-items__right b{display:block;margin-top:7px;font-size:15px;font-weight:700}

/* 상태 설명 */
.wi-od-legend{margin-top:16px;padding-top:16px;border-top:1px solid var(--wi-line-3)}
.wi-od-legend dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 24px}
.wi-od-legend div{display:flex;gap:10px;font-size:12.5px}
.wi-od-legend dt{flex:none;width:66px;font-weight:700;color:var(--wi-ink-soft)}
.wi-od-legend dd{color:var(--wi-faint)}

/* 정보 dl */
.wi-od-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,40px)}
.wi-od-dl > div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;
    padding:11px 0;border-top:1px solid var(--wi-line-3);font-size:13.5px}
.wi-od-dl > div:first-child,.wi-od-dl > div:nth-child(2){border-top:0}
.wi-od-dl > div.full{grid-column:1/-1;grid-template-columns:88px minmax(0,1fr)}
.wi-od-dl dt{font-size:12px;color:var(--wi-faint);padding-top:1px}
.wi-od-dl dd{color:var(--wi-ink-soft)}
.wi-od-dl dd .wi-link{margin-left:8px}

/* ── 오른쪽 결제 카드 ── */
.wi-od-side{position:sticky;top:calc(var(--wi-hd) + 16px)}
.wi-od-sum{
    background:var(--wi-surface);border:1px solid var(--wi-line);
    border-radius:var(--wi-r-box);padding:clamp(20px,2.4vw,26px);
}
.wi-od-sum h2{font-size:15.5px;font-weight:700;letter-spacing:-0.03em;margin-bottom:14px}
.wi-od-sum dl > div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13.5px}
.wi-od-sum dt{color:var(--wi-mute)}
.wi-od-sum dd{font-weight:600}
.wi-od-sum .minus{color:var(--wi-mute-2)}
.wi-od-sum .cancel dt,.wi-od-sum .cancel dd{color:var(--wi-od-key);font-weight:700}
.wi-od-sum .misu dt,.wi-od-sum .misu dd{color:var(--wi-accent);font-weight:700}
.wi-od-sum__tot{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    margin-top:12px;padding-top:14px;border-top:1px solid var(--wi-ink);
}
.wi-od-sum__tot span{font-size:14px;font-weight:600}
.wi-od-sum__tot b{font-size:23px;font-weight:700;letter-spacing:-0.04em;color:var(--wi-od-key)}
.wi-od-sum__sub{margin-top:10px;padding-top:10px;border-top:1px solid var(--wi-line-3)}
.wi-od-sum__pay{margin-top:10px;padding-top:12px;border-top:1px solid var(--wi-line-3)}
.wi-od-sum__pay > div.full{display:block}
.wi-od-sum__pay > div.full dd{margin-top:5px;font-weight:400;color:var(--wi-ink-soft);line-height:1.6}
.wi-od-sum .wi-btn{margin-top:16px}
.wi-od-note{
    margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--wi-faint);
    padding:14px 16px;background:var(--wi-tint);border-radius:var(--wi-r-img);
}

/* 취소 사유 입력 — 되물음 모달 안에 들어간다 */
.wi-od-reason{display:block;margin-top:14px;text-align:left}
.wi-od-reason span{display:block;font-size:11.5px;font-weight:700;letter-spacing:0.08em;color:var(--wi-faint);margin-bottom:6px}
.wi-od-reason input{
    width:100%;height:44px;padding:0 13px;border:1px solid var(--wi-line-4);
    border-radius:var(--wi-r-btn);background:var(--wi-surface);font-size:14px;
}
.wi-od-reason input:focus{outline:0;border-color:var(--wi-ink)}

@media (max-width:1080px){
    .wi-od-cols{grid-template-columns:minmax(0,1fr)}
    .wi-od-side{position:static}
}
@media (max-width:640px){
    .wi-od-dl{grid-template-columns:minmax(0,1fr)}
    .wi-od-dl > div:nth-child(2){border-top:1px solid var(--wi-line-3)}
    .wi-od-items > li{grid-template-columns:64px minmax(0,1fr);gap:12px}
    .wi-od-items__img img{width:64px;height:64px}
    .wi-od-items__right{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:10px}
    .wi-od-items__right b{margin-top:0}
    .wi-od-head .wi-btn{width:100%;justify-content:center}
}

/* ── 8-15 쿠폰존 (skin/shop/basic/couponzone.10.skin.php) ──────────────
 * ⚠️ 이 화면만 **스킨 재작성**이다 — 코어 shop/couponzone.php 에 테마 훅이
 *    없다 → [[youngcart-screen-routes]]
 * 티켓 모양은 마이페이지 [포인트·쿠폰] 판의 .wi-mp-cp 와 한 식구다.
 * 거기는 "가진 쿠폰", 여기는 "받을 쿠폰" 이라 오른쪽 칸이 버튼이다.       */
.wi-czone{padding-bottom:clamp(40px,5vw,80px)}
.wi-czone > .wi-crumb{padding-bottom:14px}

.wi-czone__head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
    padding-bottom:clamp(26px,3vw,38px);border-bottom:1px solid var(--wi-ink);
}
.wi-czone__head h1{margin-top:10px;font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-0.04em}
.wi-czone__mine{font-size:13.5px;color:var(--wi-mute)}
.wi-czone__mine b{font-size:16px;font-weight:700;color:var(--wi-ink)}
.wi-czone__mine .wi-link{margin-left:12px}

.wi-czone__sec{padding-top:clamp(30px,4vw,46px)}
.wi-czone__sechead{margin-bottom:18px}
.wi-czone__sechead h2{font-size:17px;font-weight:700;letter-spacing:-0.03em}
.wi-czone__sechead h2 span{margin-left:7px;font-size:12.5px;font-weight:400;color:var(--wi-faint)}
.wi-czone__sechead p{margin-top:7px;font-size:13px;color:var(--wi-mute)}
.wi-czone__none{
    padding:clamp(36px,4vw,56px) 0;text-align:center;font-size:13.5px;color:var(--wi-mute);
    background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
}

.wi-czone__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px}

/* ── 티켓 한 장 ── */
/* ⚠️ overflow:hidden 을 걸면 안 된다 — 뜯는 자리의 반원 파임(::before/::after)이
   위아래로 삐져나와 있어서 통째로 잘린다. 모서리는 조각마다 따로 둥글린다. */
.wi-cz{
    position:relative;display:flex;align-items:stretch;gap:0;
    background:var(--wi-surface);border:1px solid var(--wi-line);
    border-radius:var(--wi-r-box);
}
.wi-cz__pic{flex:0 0 96px;background:var(--wi-tint-2);
    border-radius:var(--wi-r-box) 0 0 var(--wi-r-box);overflow:hidden}
.wi-cz__pic img{width:100%;height:100%;object-fit:cover;display:block}
.wi-cz__body{flex:1 1 auto;min-width:0;padding:20px 22px}
.wi-cz__price{font-size:26px;font-weight:700;letter-spacing:-0.04em;color:var(--wi-accent);line-height:1}
.wi-cz__name{margin-top:9px;font-size:14.5px;font-weight:600;letter-spacing:-0.02em}
.wi-cz__terms{margin-top:10px;display:grid;gap:3px;font-size:12px;color:var(--wi-faint);line-height:1.5}
.wi-cz__terms b{font-weight:600;color:var(--wi-mute)}
.wi-cz__terms a{border-bottom:1px solid var(--wi-line-4)}
.wi-cz__terms a:hover{color:var(--wi-accent);border-color:var(--wi-accent)}

/* 오른쪽 뜯는 칸 — 마이페이지 쿠폰과 같은 파임을 쓴다 */
.wi-cz__get{
    position:relative;flex:0 0 132px;display:grid;place-items:center;padding:0 14px;
    background:var(--wi-tint);border-radius:0 var(--wi-r-box) var(--wi-r-box) 0;
}
.wi-cz__get .cut{position:absolute;left:0;top:10px;bottom:10px;border-left:1px dashed var(--wi-line-2)}
.wi-cz__get::before,.wi-cz__get::after{
    content:"";position:absolute;left:-8px;width:16px;height:16px;border-radius:50%;
    background:var(--wi-bg);border:1px solid var(--wi-line);
}
.wi-cz__get::before{top:-9px}
.wi-cz__get::after{bottom:-9px}
.wi-cz__get .wi-btn{width:100%;padding:0 8px;font-size:12px;line-height:1.3;height:auto;min-height:40px;white-space:normal}

/* 받을 수 없는 것 — 왜 못 받는지는 버튼 글자가 말한다 */
.wi-cz__get .wi-btn.is-off,
.wi-cz__get .wi-btn:disabled{
    background:transparent;color:var(--wi-faint);border:1px solid var(--wi-line-4);
    cursor:default;font-weight:500;
}
.wi-cz.is-done{border-color:var(--wi-line-3)}
.wi-cz.is-done .wi-cz__price{color:var(--wi-faint-2)}
.wi-cz.is-done .wi-cz__body{opacity:.62}
.wi-cz.is-poor .wi-cz__price{color:var(--wi-mute-2)}

@media (max-width:560px){
    .wi-czone__list{grid-template-columns:minmax(0,1fr)}
    .wi-cz__get{flex:0 0 104px}
    .wi-cz__body{padding:16px 16px}
}

/* ── 8-15 로그인 (skin/member/basic/login.skin.php) ────────────────────
 * 시안 template/login/c.html "탭 허브"(사용자 결정 2026-08-24).
 * 로그인은 한 화면이 아니다 — 회원 로그인 · 비회원 주문조회 · 비회원 구매를
 * **탭으로 나란히** 세우고 온 길에 맞는 탭을 처음부터 연다.
 *
 * ⚠️ 이 화면은 헤더·푸터가 없다(코어가 _head.sub.php 를 쓴다). 폭·여백을
 *    여기서 직접 잡는다 — .wi-main 이 감싸지 않는다.                    */
.wi-login{
    max-width:500px;margin:0 auto;
    padding:clamp(40px,7vw,86px) clamp(20px,5vw,24px) clamp(60px,9vw,110px);
}

.wi-login__logo{display:block;text-align:center}
.wi-login__logo img{max-height:34px;width:auto}
.wi-login__logo-txt{
    display:block;font-family:var(--wi-display);font-size:26px;
    letter-spacing:0.16em;color:var(--wi-ink);
}
.wi-login__logo-sub{
    display:block;margin-top:5px;font-size:10px;font-weight:700;
    letter-spacing:0.34em;color:var(--wi-faint);
}
.wi-login__t{margin-top:18px;text-align:center;font-size:21px;font-weight:700;letter-spacing:-0.04em}
.wi-login__s{margin-top:9px;text-align:center;font-size:13px;color:var(--wi-mute)}

/* ── 탭 — 가운데 정렬(사용자 지시) ── */
.wi-login__tabs{
    margin-top:30px;display:flex;justify-content:center;gap:clamp(18px,3.4vw,34px);
    border-bottom:1px solid var(--wi-line);
}
.wi-login__tabs button{
    position:relative;border:0;background:transparent;cursor:pointer;
    padding:0 2px 13px;font-size:14.5px;font-weight:600;color:var(--wi-mute);
    letter-spacing:-0.02em;white-space:nowrap;
}
.wi-login__tabs button:hover{color:var(--wi-ink)}
.wi-login__tabs button.on{color:var(--wi-ink)}
.wi-login__tabs button.on::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--wi-ink);
}

/* 판 — 감추는 것은 **자바스크립트가 붙은 뒤부터**다(.is-js 는 JS 가 단다).
   그래야 JS 가 못 돌아도 판이 세로로 다 보인다(코어와 같은 모습) */
.wi-login__panel{padding-top:26px}
.wi-login.is-js .wi-login__panel{display:none}
.wi-login.is-js .wi-login__panel.on{display:block;animation:wi-login-fade .2s ease-out}
@keyframes wi-login-fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── 폼 ── */
.wi-login__f{display:grid;gap:10px}
.wi-login__f label{
    display:block;font-size:11.5px;font-weight:700;letter-spacing:0.08em;
    color:var(--wi-faint);margin-bottom:6px;
}
.wi-login__f input[type=text],
.wi-login__f input[type=password]{
    width:100%;height:52px;padding:0 15px;border:1px solid var(--wi-line-4);
    border-radius:var(--wi-r-btn);background:var(--wi-surface);font-size:15px;
}
.wi-login__f input:focus{outline:0;border-color:var(--wi-ink)}
.wi-login__f .wi-btn{margin-top:8px;height:52px;font-size:15px}

.wi-login__row{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin-top:4px;font-size:12.5px;
}
.wi-login__auto{
    display:flex;align-items:center;gap:7px;margin:0;cursor:pointer;
    font-size:12.5px;font-weight:400;letter-spacing:0;color:var(--wi-ink-soft);
}
.wi-login__row a{color:var(--wi-mute);border-bottom:1px solid var(--wi-line-4);padding-bottom:1px}
.wi-login__row a:hover{color:var(--wi-accent);border-color:var(--wi-accent)}

.wi-login__hint{margin-bottom:16px;font-size:12.5px;color:var(--wi-mute);line-height:1.6}
.wi-login__hint b{font-weight:600;color:var(--wi-ink)}

.wi-login__join{
    margin-top:24px;padding-top:20px;border-top:1px solid var(--wi-line-3);
    text-align:center;font-size:13px;color:var(--wi-mute);
}
.wi-login__join a{
    margin-left:8px;font-weight:600;color:var(--wi-ink);
    border-bottom:1px solid var(--wi-ink);padding-bottom:1px;
}

/* 비회원 구매 — 개인정보 안내는 관리자가 넣은 글이라 길이를 모른다 */
.wi-login__terms{
    max-height:150px;overflow:auto;padding:14px 15px;
    background:var(--wi-tint);border-radius:var(--wi-r-img);
    font-size:12px;line-height:1.7;color:var(--wi-mute);
}
.wi-login__terms *{font-size:inherit !important;line-height:inherit !important;color:inherit !important}
/* 에디터를 안 쓴 날것 글일 때만 줄바꿈을 살린다(스킨이 is-plain 을 단다) */
.wi-login__terms.is-plain{white-space:pre-line}
.wi-login__agree{
    display:flex;align-items:center;gap:7px;margin-top:14px;
    font-size:12.5px;color:var(--wi-ink-soft);cursor:pointer;
}
.wi-login__guest{margin-top:14px;height:52px;font-size:15px}

/* ── 진행 중인 이벤트 하나 ── */
.wi-login__ev{
    margin-top:26px;display:flex;align-items:center;gap:14px;
    padding:14px 16px;background:var(--wi-tint-3);border-radius:var(--wi-r-box);
    transition:background .15s;
}
.wi-login__ev:hover{background:var(--wi-warm)}
.wi-login__ev-pic{flex:none;width:54px;height:54px;border-radius:var(--wi-r-img);overflow:hidden;background:var(--wi-tint-2)}
.wi-login__ev-pic img{width:100%;height:100%;object-fit:cover}
.wi-login__ev-txt{flex:1 1 auto;min-width:0}
.wi-login__ev-txt em{
    display:block;font-style:normal;font-size:11px;font-weight:700;
    letter-spacing:0.14em;color:var(--wi-accent);
}
.wi-login__ev-txt b{
    display:block;margin-top:5px;font-size:14px;font-weight:600;letter-spacing:-0.02em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wi-login__ev-go{flex:none;font-size:19px;color:var(--wi-faint-2)}
.wi-login__ev:hover .wi-login__ev-go{color:var(--wi-accent)}

/* ── 약관 전문 보기 모달 (consent_modal.inc.php) ──────────────────────
 * 회원가입·소셜 가입의 수신설정 줄에서 [내용 보기]로 연다. 브라우저
 * <dialog> 라 코어 JS 가 showModal() 로 직접 연다 — 마크업·클래스는
 * 코어 것을 그대로 두고 옷만 여기서 입힌다. */
#consentDialog{padding:0;border:0;border-radius:var(--wi-r-box);background:transparent}
#consentDialog::backdrop{background:rgba(34,28,27,.42)}
.cd-card{
    width:min(560px,calc(100vw - 32px));background:var(--wi-surface);
    border-radius:var(--wi-r-box);box-shadow:0 24px 60px rgba(34,28,27,.22);overflow:hidden;
}
.cd-head{padding:20px 24px 14px}
.cd-title{margin:0;font-size:15px;font-weight:700;letter-spacing:-0.02em}
.cd-body{
    max-height:min(56vh,460px);overflow-y:auto;padding:18px 24px;
    border-top:1px solid var(--wi-line-3);border-bottom:1px solid var(--wi-line-3);
    font-size:13.5px;line-height:1.9;color:var(--wi-ink-soft);word-break:keep-all;
}
.cd-body p{margin:0 0 10px}
.cd-body ul,.cd-body ol{margin:0 0 10px;padding-left:18px;list-style:revert}
.cd-body table{width:100%;margin:0 0 10px;border-collapse:collapse;font-size:12.5px}
.cd-body th,.cd-body td{padding:8px 10px;border:1px solid var(--wi-line);text-align:left}
.cd-body th{background:var(--wi-tint);font-weight:700;color:var(--wi-ink)}
.cd-actions{display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 20px}
.cd-actions .cd-agree,
.cd-actions .cd-close{
    height:40px;padding:0 18px;border-radius:var(--wi-r-btn);
    font-size:13px;font-weight:600;cursor:pointer;
}
.cd-actions .cd-agree{border:1px solid var(--wi-ink);background:var(--wi-ink);color:#fff}
.cd-actions .cd-agree:hover{background:#000}
.cd-actions .cd-close{border:1px solid var(--wi-line-4);background:var(--wi-surface);color:var(--wi-ink-soft)}
.cd-actions .cd-close:hover{border-color:var(--wi-ink)}

/* ── 소셜 가입 폼 (skin/social/social_register_member.skin.php) ───────
 * 약관(.wi-rt__*)과 정보 입력(.wi-rf__*) 옷을 그대로 빌려 입고, 여기서는
 * 그 화면에만 있는 몇 줄만 더한다. */
.wi-rf__lead{margin-top:10px;font-size:13.5px;color:var(--wi-mute);word-break:keep-all}
.wi-rf__cert{margin-top:4px}
.wi-rf__certbtns{display:flex;flex-wrap:wrap;gap:8px}
.wi-rf__cert .help{margin-top:8px}
.wi-rf__bad{color:var(--wi-accent)}
/* 기존 계정 연결 — 공용 모달 안에 들어가는 폼 */
.wi-snslink__d{
    font-size:13px;line-height:1.8;color:var(--wi-mute);
    padding:12px 14px;margin-bottom:16px;border-radius:var(--wi-r-box);
    background:var(--wi-tint);word-break:keep-all;
}
.wi-snslink__d b{color:var(--wi-ink)}
.wi-snslink .wi-btn{margin-top:18px}

/* ── 소셜 로그인 (skin/social — 우리 스킨) ────────────────────────────
 * 시안 template/login/a.html·c.html 의 소셜 자리 그대로다 — 구분선 한 줄과
 * **48px 라인 버튼**. 브랜드 색은 작은 아이콘에만 남기고 버튼은 테마 톤으로
 * 간다(원색 바를 여섯 줄 세우면 화면이 브랜드 색 잔치가 된다).
 * 두 칸 그리드라 켠 것이 둘이면 시안처럼 나란히, 넷·여섯이면 두 줄·세 줄.
 * ⚠️ 예전에는 `#social_login` 에 옷을 입혀 뒀는데 **코어 마크업의 id 는
 *    `#sns_login`** 이라 한 줄도 닿지 않았다(2026-08-26 실측). */
.wi-sns{margin-top:22px}
.wi-sns__lab{
    display:flex;align-items:center;gap:12px;
    font-size:11.5px;color:var(--wi-faint-2);margin-bottom:12px;
}
.wi-sns__lab::before,
.wi-sns__lab::after{content:"";flex:1 1 auto;height:1px;background:var(--wi-line)}
.wi-sns__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wi-sns__btn{
    display:flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 10px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    font-size:13px;color:var(--wi-ink-soft);min-width:0;
}
.wi-sns__btn:hover{border-color:var(--wi-ink);color:var(--wi-ink)}
.wi-sns__ico{flex:none;display:block;opacity:.75}
.wi-sns__btn:hover .wi-sns__ico{opacity:1}
.wi-sns__btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 켠 것이 하나뿐이면 한 칸을 다 쓴다 */
.wi-sns__list > :only-child{grid-column:1 / -1}

/* 정보수정의 연결 관리 — 아직 연결 안 된 계정은 흐리게 (코어가 붙이는
   sns-icon-not 클래스를 그대로 쓴다. JS 가 이걸 붙였다 뗐다 한다) */
.wi-sns__btn.sns-icon-not{color:var(--wi-faint)}
.wi-sns__btn.sns-icon-not .wi-sns__ico{opacity:.35}
.wi-sns__btn.sns-icon-not:hover .wi-sns__ico{opacity:.75}
.wi-sns__list--manage .wi-sns__btn{justify-content:flex-start}
.wi-sns__btn .wi-sns__on{margin-left:auto;flex:none;font-style:normal;font-size:11px;color:var(--wi-faint-2)}
.wi-sns__btn:not(.sns-icon-not) .wi-sns__on{color:var(--wi-accent)}

@media (max-width:560px){
    /* ⚠️ 넘쳐서 가로로 굴러야 할 때는 가운데 정렬을 푼다 — overflow 컨테이너에
       justify-content:center 를 두면 왼쪽 끝이 잘려 손이 닿지 않는다 */
    .wi-login__tabs{gap:16px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
    .wi-login__tabs::-webkit-scrollbar{display:none}
    .wi-login__tabs button{font-size:13.5px}
}

/* ── 8-15b 비밀번호 확인 (skin/member/basic/member_confirm.skin.php) ───
 * 정보수정·회원탈퇴로 들어가기 전의 관문. **로그인과 껍데기가 같아서**
 * (둘 다 헤더 없는 _head.sub.php) 카드는 .wi-login 을 그대로 쓰고
 * 여기서는 다른 것만 덧댄다 — 계정 줄, 취소, 탈퇴일 때의 톤.        */
.wi-confirm{max-width:420px}

/* 지금 누구로 로그인해 있는지 — 물어보기 전에 먼저 보여 준다 */
.wi-confirm__who{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:28px;padding:14px 16px;
    background:var(--wi-warm);border-radius:var(--wi-r-img);
}
.wi-confirm__who span{font-size:11.5px;font-weight:700;letter-spacing:0.08em;color:var(--wi-faint)}
.wi-confirm__who b{font-size:14.5px;font-weight:600;letter-spacing:-0.02em}

.wi-confirm .wi-login__f{margin-top:18px}
.wi-confirm__cancel{margin-top:8px;height:52px;font-size:15px}

/* ── 회원탈퇴로 가는 길 — 되돌릴 수 없다는 것을 색으로도 말한다 ──
 * ⚠️ **빨강을 새로 들이지 않는다.** 이 팔레트에는 경고색이 없고, 구매자가
 *    바꿀 자리는 --wi-accent 하나라고 못 박아 뒀다(위 토큰 주석). 새 빨강을
 *    들이면 강조색을 먹으로 바꾼 쇼핑몰에서 이 버튼만 혼자 튄다.
 *    대신 **강조색으로 채워** 평소의 검은 버튼과 다르다는 것만 말한다.
 * ⚠️ 바꾸는 건 확인 버튼 하나뿐이다. 화면을 통째로 물들이면 [취소] 마저
 *    위험해 보여서, 정작 눌러야 할 쪽을 못 누른다. */
.wi-confirm.is-leave .wi-login__s{color:var(--wi-accent)}
.wi-confirm.is-leave #btn_submit{
    background:var(--wi-accent);border-color:var(--wi-accent);color:#fff;
}
.wi-confirm.is-leave #btn_submit:hover{filter:brightness(.93)}

/* ── 8-16 회원가입 · 회원정보 수정 (skin/member/basic/register_form.skin.php) ──
 * 시안 template/register/a.html "한 장 폼"(사용자 결정 2026-08-24).
 * 로그인과 같은 말투 — 가운데 한 줄, 섹션은 얇은 선으로만 끊는다.
 *
 * ⚠️ **가입과 수정이 같은 화면이다**($w). 필드는 관리자 설정에 따라 늘고 준다.
 * ⚠️ 헤더·푸터가 없다(코어 _head.sub.php). 폭·여백을 여기서 직접 잡는다.
 * ⚠️ 수신설정 묶음(.consent-line · .sub-consents · .js-open-consent)은 코어
 *    consent_modal.inc.php 와 짝지어 도는 마크업이다 — **구조는 건드리지 않고
 *    옷만 입힌다.**                                                        */
.wi-rf{
    max-width:560px;margin:0 auto;
    padding:clamp(36px,6vw,72px) clamp(20px,5vw,24px) clamp(60px,9vw,110px);
}

.wi-rf__head{text-align:center}
.wi-rf__logo{display:block}
.wi-rf__logo img{max-height:30px;width:auto}
.wi-rf__logo-txt{font-family:var(--wi-display);font-size:24px;letter-spacing:0.16em;color:var(--wi-ink)}
.wi-rf__head h1{margin-top:16px;font-size:21px;font-weight:700;letter-spacing:-0.04em}
.wi-rf__head p{margin-top:9px;font-size:13px;color:var(--wi-mute)}

/* 가입일 때만 나오는 단계 */
.wi-rf__steps{
    display:flex;justify-content:center;gap:8px;margin-top:20px;
    font-size:11.5px;color:var(--wi-faint);
}
.wi-rf__steps li{display:flex;align-items:center;gap:8px}
.wi-rf__steps li::after{content:"›";color:var(--wi-faint-2)}
.wi-rf__steps li:last-child::after{display:none}
.wi-rf__steps li.on{font-weight:700;color:var(--wi-accent)}

/* ── 섹션 ── */
.wi-rf__sec{margin-top:34px;padding-top:26px;border-top:1px solid var(--wi-line-2)}
.wi-rf__sec:first-of-type{border-top:0;padding-top:0}
.wi-rf__sec h2{font-size:14.5px;font-weight:700;letter-spacing:-0.03em}
.wi-rf__sec h2 span{margin-left:8px;font-size:12px;font-weight:400;color:var(--wi-faint)}
.wi-rf__d{margin-top:7px;font-size:12.5px;color:var(--wi-mute);line-height:1.6}

/* ── 입력 ── */
.wi-rf__f{margin-top:18px;display:grid;gap:14px}
.wi-rf__f .lab{
    display:block;font-size:11.5px;font-weight:700;letter-spacing:0.08em;
    color:var(--wi-faint);margin-bottom:6px;
}
.wi-rf__f .lab em{font-style:normal;color:var(--wi-accent);margin-left:3px}
.wi-rf .frm_input,
.wi-rf textarea{
    width:100%;height:50px;padding:0 15px;border:1px solid var(--wi-line-4);
    border-radius:var(--wi-r-btn);background:var(--wi-surface);font-size:14.5px;
}
.wi-rf textarea{height:auto;min-height:96px;padding:13px 15px;line-height:1.6;resize:vertical}
.wi-rf .frm_input:focus,.wi-rf textarea:focus{outline:0;border-color:var(--wi-ink)}
.wi-rf .frm_input[readonly]{background:var(--wi-tint);color:var(--wi-mute);border-color:var(--wi-line)}
.wi-rf .help{margin-top:6px;font-size:12px;color:var(--wi-faint);line-height:1.55}
/* 값이 잠긴 줄(닉네임·정보공개) — 입력칸이 아니라 읽는 줄이다 */
.wi-rf__ro{
    padding:14px 15px;background:var(--wi-tint);border-radius:var(--wi-r-btn);
    font-size:14.5px;color:var(--wi-ink-soft);
}

.wi-rf__zip{display:flex;gap:8px}
.wi-rf__zip .frm_input{flex:0 0 150px}
.wi-rf__zip .wi-btn{flex:none;height:50px;white-space:nowrap}
.wi-rf__addr{margin-top:8px;display:grid;gap:8px}

/* 파일 올리기 */
.wi-rf__file{display:grid;gap:8px}
.wi-rf__file input[type=file]{font-size:13px;color:var(--wi-ink-soft)}
.wi-rf__file input[type=file]::file-selector-button{
    height:38px;padding:0 14px;margin-right:10px;cursor:pointer;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);font-size:12.5px;color:var(--wi-ink-soft);
}
.wi-rf__file input[type=file]::file-selector-button:hover{border-color:var(--wi-ink)}
.wi-rf__thumb{display:inline-block}
.wi-rf__thumb img{max-height:64px;width:auto;border-radius:var(--wi-r-img);background:var(--wi-tint-2)}
.wi-rf__del{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--wi-mute);cursor:pointer}

/* 체크 한 줄 */
.wi-rf__chk{
    display:flex;align-items:flex-start;gap:9px;
    font-size:13px;color:var(--wi-ink-soft);cursor:pointer;line-height:1.5;
}
.wi-rf__chk input{margin-top:2px;flex:none}
.wi-rf__chk .sub{display:block;margin-top:4px;font-size:12px;color:var(--wi-faint)}

/* ── 수신설정 — 코어 마크업에 옷만 입힌다 ── */
.wi-rf__consent .consent-line{
    display:flex;align-items:center;gap:9px;flex-wrap:wrap;
    padding:12px 0;border-top:1px solid var(--wi-line-3);
}
.wi-rf__consent .consent-line:first-of-type{border-top:0}
.wi-rf__consent .consent-line input[type=checkbox]{flex:none}
.wi-rf__consent .consent-line label{
    flex:1 1 auto;min-width:0;font-size:13px;color:var(--wi-ink-soft);cursor:pointer;
}
.wi-rf__consent .js-open-consent{
    flex:none;border:0;background:none;cursor:pointer;padding:0 0 1px;
    font-size:12px;color:var(--wi-mute);border-bottom:1px solid var(--wi-line-4);
}
.wi-rf__consent .js-open-consent:hover{color:var(--wi-accent);border-color:var(--wi-accent)}
.wi-rf__consent .consent-date{font-size:11.5px;color:var(--wi-faint-2)}
.wi-rf__consent > .consent-date{margin:-6px 0 0 27px}
/* 하위 채널(이메일·문자)은 상위 아래로 한 칸 들여 쓴다 */
.wi-rf__consent .sub-consents{
    margin:0 0 0 26px;padding-left:14px;border-left:2px solid var(--wi-line);
}
.wi-rf__consent .sub-consents .consent-line{border-top:0;padding:8px 0}
.wi-rf__consent template{display:none}

/* 자동등록방지 — 코어 captcha_html() 이 뱉는 것을 감싼다.
   회원가입과 비밀번호 찾기가 **같이 쓴다** → [[prefer-one-place]]
 *
 * ⚠️ **코어는 한 겹 더 씌워서 준다** — captcha_html() 은
 *      <fieldset id="captcha"><legend>…</legend><img><input><button><button><span>
 *    를 통째로 뱉는다. 그래서 감싸개(.wi-cap)에 flex 를 걸어도 **자식이
 *    fieldset 하나뿐이라 img·input·button 에는 닿지 않는다.** 그러면 줄이
 *    코어 HTML 의 개행(공백 한 칸)으로만 벌어져서 — img 와 input 사이는
 *    개행이 없어 **딱 붙고**, 버튼 앞은 한 칸 뜨고, 높이는 61/48/38 로
 *    제각각에 baseline 정렬까지 어긋난다(실측 2026-08-24).
 *    fieldset 을 display:contents 로 풀어야 flex 가 실제 칸에 닿는다.
 *    ⚠️ legend 와 script 는 flex 자리를 차지하지 않는다 —
 *       legend 는 position:absolute, script 는 display:none 이라 그렇다.
 */
.wi-cap{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wi-cap > fieldset{display:contents}
.wi-cap img{
    flex:none;height:52px;width:auto;
    border:1px solid var(--wi-line);border-radius:var(--wi-r-img);background:#fff;
}
.wi-cap input[type=text]{
    height:52px;padding:0 15px;border:1px solid var(--wi-line-4);
    border-radius:var(--wi-r-btn);background:var(--wi-surface);
    font-size:15px;letter-spacing:0.08em;flex:1 1 130px;max-width:180px;min-width:0;
}
.wi-cap input:focus{outline:0;border-color:var(--wi-ink)}
.wi-cap #captcha_reload,
.wi-cap #captcha_mp3{
    flex:none;height:52px;padding:0 14px;border:1px solid var(--wi-line-4);
    border-radius:var(--wi-r-btn);background:var(--wi-surface);
    font-size:12.5px;color:var(--wi-ink-soft);cursor:pointer;white-space:nowrap;
}
.wi-cap #captcha_reload:hover,.wi-cap #captcha_mp3:hover{border-color:var(--wi-ink);color:var(--wi-ink)}
.wi-cap .captcha_hidden,.wi-cap legend{position:absolute;left:-9999px}
.wi-cap #captcha_info{flex:1 1 100%;margin-top:-2px;font-size:12px;color:var(--wi-faint)}

/* 좁으면 한 줄에 못 들어간다(칸 넷 + 여백 = 513px 은 있어야 한다).
   그냥 두면 입력칸이 늘어나면서 버튼이 하나씩 떨어져 **세 줄로 어긋난다**
   (실측). 순서를 못 바꾸니(코어 HTML) 격자로 자리를 정해 준다 —
   1줄 그림|입력, 2줄 듣기|새로고침. 숫자음성듣기는 감추지 않는다(눈이
   불편한 사람에게는 그것뿐이다). */
@media (max-width:560px){
    .wi-cap{display:grid;grid-template-columns:auto 1fr;align-items:center}
    .wi-cap img{grid-column:1}
    .wi-cap input[type=text]{grid-column:2;max-width:none;width:100%}
    .wi-cap #captcha_mp3{grid-column:1}
    .wi-cap #captcha_reload{grid-column:2}
    /* 버튼은 늘리지 않는다 — 폭을 꽉 채우면 "새로고침" 이 주요 버튼처럼
       보인다. 위 칸의 열에만 맞춰 세운다 */
    .wi-cap #captcha_mp3,.wi-cap #captcha_reload{justify-self:start}
    .wi-cap #captcha_info{grid-column:1 / -1}
}

/* ── 버튼 ── */
.wi-rf__act{margin-top:34px;display:grid;gap:10px}
.wi-rf__act .wi-btn{height:52px;font-size:15px}
.wi-rf__out{
    margin-top:22px;padding-top:18px;border-top:1px solid var(--wi-line-3);
    text-align:center;font-size:12.5px;color:var(--wi-faint);
}
.wi-rf__out a:hover{color:var(--wi-accent)}

/* 코어 마크업 잔재 — 우리 화면에서는 안 쓴다 */
.wi-rf .sound_only{position:absolute;left:-9999px}

/* ── 동의 안내 모달 (skin/member/basic/consent_modal.inc.php) ──────────
 * 코어가 <dialog> 로 띄운다. 우리 모달(WiModal)이 아니라 브라우저 기본이라
 * 그대로 두면 기본 버튼·기본 테두리가 나온다 — 옷만 입힌다.
 * ⚠️ 마크업(#consentDialog · .cd-*)은 코어 스크립트가 잡으므로 손대지 않는다. */
#consentDialog{
    border:0;padding:0;max-width:min(460px,calc(100vw - 32px));width:100%;
    border-radius:var(--wi-r-box);background:var(--wi-surface);color:var(--wi-ink);
    box-shadow:0 24px 60px rgba(34,28,27,0.18);
}
#consentDialog::backdrop{background:rgba(34,28,27,0.42)}
#consentDialog .cd-card{padding:clamp(22px,3vw,28px)}
#consentDialog .cd-title{font-size:16px;font-weight:700;letter-spacing:-0.03em}
#consentDialog .cd-body{
    margin-top:14px;font-size:13px;line-height:1.75;color:var(--wi-ink-soft);
    max-height:min(46vh,340px);overflow-y:auto;
}
#consentDialog .cd-actions{
    margin-top:20px;display:flex;gap:8px;justify-content:flex-end;
}
#consentDialog .cd-actions button{
    height:44px;padding:0 20px;border-radius:var(--wi-r-btn);cursor:pointer;
    font-size:14px;font-weight:600;border:1px solid transparent;
}
#consentDialog .cd-agree{background:var(--wi-ink);color:#fff}
#consentDialog .cd-agree:hover{background:var(--wi-accent)}
#consentDialog .cd-close{background:transparent;color:var(--wi-ink);border-color:var(--wi-line-4)}
#consentDialog .cd-close:hover{border-color:var(--wi-ink)}

/* ── 9. 아직 코어 스킨을 쓰는 화면 ────────────────────────────────────
 * default.css / default_shop.css 는 걷어냈다(2026-08-20). 이제 남은 코어
 * CSS 는 스킨별 style.css 뿐이고, 그것도 화면을 다시 만들면서 하나씩 없앤다.
 * ⚠️ 스킨 CSS 는 theme.css 보다 뒤에 로드된다 — 같은 #id 면 스킨이 이긴다.
 *    그래서 여기 규칙은 한 단계 올려 쓴다(#wrapper #sit_ov_wrap 처럼).     */

/* 코어 마크업에 남아 있는 것들 */
#container_title{display:none}
#hd_login_msg{display:none}
#text_size{display:none}   /* 코어 basic 테마의 죽은 마크업 — font_default() 가 그누보드에 없다 */

/* ── 콘텐츠 영역 — **폭은 여기 한 곳에서만 잡는다** ────────────────────
 * .wi-main 이 이 테마의 콘텐츠 폭이다(사용자 결정 2026-08-22).
 * 안쪽 껍데기(#sct · #sit · #sit_info …)는 코어 js 가 id 로 잡기 때문에
 * 있는 것일 뿐, 폭·좌우 여백을 따로 갖지 않는다. 예전에는 여섯 군데가
 * 제각기 max-width 와 gutter 를 들고 있어서 화면마다 시작점이 어긋났다.
 *
 * 예외 둘 — 둘 다 일부러다.
 *   .wi-is-index  메인은 섹션(.wi-sec)이 저마다 폭을 잡는 통짜 화면이다.
 *   화면 끝까지 나가는 것(상세 히어로)은 100vw + margin-left:calc(50% - 50vw)
 *   로 빠져나간다 — 그래서 .wi-is-item 에 overflow-x:clip 이 붙어 있다.   */
.wi-main{width:auto;float:none;margin:0 auto;padding:0;position:relative}
.wi-main:not(.wi-is-index){
    padding:clamp(24px,3vw,44px) var(--wi-gutter) 0;
    line-height:1.6;
}
/* 상품 상세만 위 여백을 뺀다 — 반쪽 히어로가 헤더 바로 아래에서 시작해야
   처음 들어왔을 때 한 화면에 들어간다(사용자 지시 2026-08-22).
   빵부스러기는 사진 위로 올라가서 이 자리에 남는 것도 없다.
   ⚠️ 위 규칙과 같은 순위라 **반드시 뒤에** 와야 이긴다. */
.wi-main.wi-is-item{padding-top:0}
/* 주문서는 아래를 비워 하단 고정 바가 마지막 내용을 덮지 않게 한다.
   ⚠️ 8-8 절(주문서)에 적어 두면 **한 번도 먹지 않는다** — 위 규칙이 padding
      단축 속성이고 같은 순위라 뒤에 오는 쪽이 이긴다. 그래서 여태 0 이었고
      좁은 화면에서 바가 내용을 가렸다(2026-08-23 실측). 예외는 여기 모은다.
   1000px 부터는 결제 카드가 오른쪽에 붙어 따라오므로 바를 감춘다 —
   그때는 여백도 되돌린다(→ 8-8 절의 .wi-orderbar). */
.wi-main.wi-is-order{padding-bottom:calc(var(--wi-cartbar) + clamp(40px,5vw,72px))}
@media (min-width:1000px){
    .wi-main.wi-is-order{padding-bottom:clamp(40px,5vw,72px)}
}

/* ── 10. 모달 · 라이트박스 ────────────────────────────────────────────
 * 이 테마는 새 창 팝업을 쓰지 않는다(→ js/wi-modal.js). 껍데기는 한 벌만
 * 만들어 재사용한다 — 라이트박스도 그 위에 얹혀 있다.
 * 외부 라이브러리 없음. Bootstrap 은 되돌리지 않는다.                    */
.wi-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.wi-modal[hidden]{display:none}
.wi-modal__veil{
    position:absolute;inset:0;background:rgba(34,28,27,.52);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;transition:opacity .18s ease;
}
.wi-modal.is-open .wi-modal__veil{opacity:1}
.wi-modal:has(.wi-modal__box--lb) .wi-modal__veil{background:rgba(20,16,15,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
.wi-modal__box{
    position:relative;z-index:1;
    width:min(560px,calc(100vw - 2 * var(--wi-gutter)));
    max-height:calc(100dvh - 2 * var(--wi-gutter));overflow:auto;
    padding:clamp(24px,3vw,34px);
    background:var(--wi-surface);border-radius:var(--wi-r-box);
    box-shadow:0 30px 80px rgba(34,28,27,.24);
    opacity:0;transform:translateY(10px) scale(.99);transition:opacity .18s ease,transform .18s ease;
}
.wi-modal.is-open .wi-modal__box{opacity:1;transform:none}
.wi-modal__tit{font-size:18px;font-weight:700;letter-spacing:-0.03em;margin:0 40px 18px 0}
.wi-modal__tit[hidden]{display:none}
.wi-modal__x{
    position:absolute;top:10px;right:10px;z-index:2;
    width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
    font-size:24px;line-height:1;color:var(--wi-mute);border-radius:var(--wi-r-pill);
}
.wi-modal__x:hover{background:var(--wi-tint);color:var(--wi-ink)}

/* 코어 팝업 폼을 모달 안에 직접 심는다 → js/wi-formmodal.js.
   iframe 이 아니라 이 문서의 DOM 이라, 아래 .new_win 규칙이 그대로 먹는다. */
.wi-modal__box--form{width:min(720px,calc(100vw - 2 * var(--wi-gutter)))}
.wi-formmodal__wait{padding:52px 0;text-align:center;font-size:14px;color:var(--wi-mute)}
.wi-formmodal__msg{
    margin:0 0 16px;padding:12px 14px;border-radius:var(--wi-r-box);
    background:var(--wi-tint-3);color:var(--wi-accent);
    font-size:13.5px;font-weight:600;line-height:1.6;
}
/* 모달이 제목을 이미 달고 있다 — 폼 안쪽 제목은 접는다 */
.wi-formmodal #win_title{display:none}
.wi-formmodal .new_win{max-width:none;margin:0;padding:0}

/* 코어가 넣는 "○○ : 필수 입력입니다." 한 줄 (js/wrest.js)
   ⚠️ 이름이 sound_only 라 **원래는 스크린리더 전용**이었다 — 그 규칙이 코어
      css/default.css 에 있었는데 우리가 그 파일을 걷어냈다(PR#13). 그 뒤로
      옷 없는 굵은 검은 글씨가 입력칸 **위에** 툭 튀어나왔다(2026-08-25 실측).
      감추는 대신 **보이는 안내로 쓴다** — 눈으로도 알려 주는 편이 낫다.
      코어가 필드 앞에 넣으므로(insertBefore) 라벨 아래 자리에 놓인다. */
/* 자리는 js/wi-form.js 가 칸 **아래**로 옮긴다(코어는 칸 앞에 꽂는다) */
strong.msg_sound_only{
    display:block;margin:6px 0 0;
    font-size:11.5px;font-weight:500;letter-spacing:-0.01em;line-height:1.5;
    color:var(--wi-accent);
}

/* 저장 뒤 안내 — 화면 아래에서 잠깐 */
.wi-toast{
    position:fixed;left:50%;bottom:28px;z-index:400;
    transform:translate(-50%,14px);opacity:0;transition:opacity .2s ease,transform .2s ease;
    margin:0;padding:13px 20px;max-width:calc(100vw - 40px);
    border-radius:var(--wi-r-pill);background:var(--wi-ink);color:#fff;
    font-size:13.5px;font-weight:600;letter-spacing:-0.02em;
    box-shadow:0 14px 34px rgba(34,28,27,.28);
    /* 코어 alert 은 줄바꿈(\n)이 든 말을 자주 던진다 — 한 줄로 뭉개지 않는다 */
    white-space:pre-line;text-align:center;
}
.wi-toast.is-on{opacity:1;transform:translate(-50%,0)}
/* 누를 것이 있는 토스트 — 마우스를 올리면 사라지지 않는다(→ js/wi-modal.js) */
.wi-toast__go{
    margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,253,252,.28);
    color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
.wi-toast__go:hover{color:var(--wi-warm)}

/* ── 코어 팝업 폼(.new_win) ─────────────────────────────────────────
 * 후기·문의 쓰기(스킨) · 추천메일 · 재입고 알림(코어 shop/*.php)은 전부
 * .new_win 한 벌로 되어 있다. 코어 default.css 를 걷어낸 뒤로 아무 옷도
 * 입지 않아 날것으로 보였다(2026-08-22). 여기서 한 번에 입힌다.
 * 모달 안에 심었을 때도(.wi-formmodal) 그대로, 주소로 직접 열었을 때도 그대로. */
.new_win{max-width:720px;margin:0 auto;padding:clamp(20px,2.6vw,28px)}
#win_title{font-size:19px;font-weight:700;letter-spacing:-0.03em;margin:0 0 20px}
.new_win .tbl_wrap table{width:100%;border-top:1px solid var(--wi-line)}
.new_win th,.new_win td{padding:12px 10px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--wi-line)}
.new_win th{width:130px;font-size:13px;font-weight:400;color:var(--wi-mute)}
.new_win .form_01 ul{display:flex;flex-direction:column;gap:20px}
/* 한 칸 = 라벨 + 입력 + (있으면) 작은 안내. 안내문이 본문만큼 커서 폼이
   설명서처럼 읽혔다(사용자 지적 2026-08-22) — 작고 흐리게 내린다. */
.wi-field > label,.wi-field label:first-child{
    display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--wi-ink);
}
.wi-field label em{
    font-style:normal;margin-left:5px;font-size:11.5px;font-weight:400;color:var(--wi-mute-2);
}
.wi-help{display:block;margin-top:7px;font-size:12px;line-height:1.6;color:var(--wi-mute-2)}
.wi-field--half{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* 고르는 칸 + 제목을 한 줄에 (별점·공개여부) — 고르는 쪽은 좁게 */
.wi-field--row{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:16px}
.wi-field--half > div,.wi-field--row > div{min-width:0}
@media (max-width:560px){
    .wi-field--half,.wi-field--row{grid-template-columns:1fr}
}
/* 별점 고르기는 이제 select 다 — 예전 라디오 다섯 줄 규칙은 지웠다 */
/* 코어가 그대로 남긴 안내문(.frm_info)도 같은 옷을 입힌다 */
.new_win .frm_info{display:block;margin-top:7px;font-size:12px;line-height:1.6;color:var(--wi-mute-2)}
/* 스마트에디터가 뱉는 "단축키 일람" — 라벨만큼 커서 제목처럼 읽혔다.
   작게 흐리게, 오른쪽으로 물린다(코어가 만드는 마크업이라 CSS 로만). */
.new_win .cke_sc{margin:-24px 0 4px;text-align:right}
.new_win .btn_cke_sc{
    background:none;border:0;padding:0;cursor:pointer;
    font-size:11.5px;color:var(--wi-mute-2);text-decoration:underline;text-underline-offset:3px;
}
.new_win .btn_cke_sc:hover{color:var(--wi-ink)}
.new_win .cke_sc_def{font-size:12px;line-height:1.7;color:var(--wi-mute)}
.new_win .form_01 li.prd_name{font-size:14.5px;font-weight:600;letter-spacing:-0.02em}
.new_win label{display:block;font-size:13px;color:var(--wi-mute);margin-bottom:6px}
.new_win .frm_input,.new_win textarea{
    width:100%;padding:12px 14px;font-size:14px;color:var(--wi-ink);
    background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:var(--wi-r-btn);
}
/* ⚠️ select 를 위 묶음에 같이 두면 background **단축 속성**이 공용 select 의
   화살표 이미지를 지운다 — 별점 고르개에서 화살표가 사라졌다(2026-08-23).
   크기·색만 여기서 주고 바탕·화살표는 공용 select 가 그리게 둔다. */
.new_win select{
    width:100%;height:46px;padding:0 34px 0 14px;
    border-color:var(--wi-line);background-position:right 15px center;
    font-size:14px;color:var(--wi-ink);
}
.new_win .frm_input:focus,.new_win select:focus,.new_win textarea:focus{outline:0;border-color:var(--wi-ink)}
.new_win textarea{min-height:150px;line-height:1.7;resize:vertical}
.new_win .chk_box{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--wi-mute)}
.new_win .chk_box label{margin:0}
/* 버튼 줄 — 간격은 위 입력칸 격자(.wi-field--half)와 같은 16px 로,
   폭은 **글자 수와 무관하게 똑같이** 나눈다. flex-basis 가 auto 면 "작성완료"
   와 "닫기" 가 글자 수만큼 다른 폭이 되어 위 칸들과 경계가 어긋났다
   (실측 331px vs 306px, 사용자 지적 2026-08-23). */
.new_win .win_btn{display:flex;gap:16px;margin-top:22px}
/* ⚠️ 코어는 확인 버튼을 화면마다 <button> 이거나 <input type=submit> 으로 적는다
   — 게시물 복사·이동(move.php)이 input 쪽이라 혼자 옷을 못 입고 있었다. */
.new_win .win_btn button,.new_win .win_btn a,.new_win .win_btn input[type=submit]{
    flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;
    height:50px;border:0;border-radius:var(--wi-r-btn);
    font-size:14.5px;font-weight:600;cursor:pointer;background:var(--wi-ink);color:#fff;
}
.new_win .win_btn .btn_close{background:var(--wi-surface);color:var(--wi-ink);box-shadow:inset 0 0 0 1px var(--wi-line)}
.new_win .win_btn .btn_close:hover{background:var(--wi-tint)}
.new_win .win_btn .btn_submit:hover{background:#3a322f}
.new_win p{font-size:13px;line-height:1.8;color:var(--wi-mute);margin:12px 0 0}

/* 공유 모달 */
.wi-share__url{display:flex;gap:8px;margin:0 0 20px}
.wi-share__url input{
    flex:1 1 auto;min-width:0;height:46px;padding:0 14px;
    border:1px solid var(--wi-line);border-radius:var(--wi-r-btn);
    background:var(--wi-bg);font-size:13.5px;color:var(--wi-mute);
}
.wi-share__copy{
    flex:0 0 auto;height:46px;padding:0 18px;border-radius:var(--wi-r-btn);
    background:var(--wi-ink);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;
}
.wi-share__copy:hover{background:#3a322f}
/* 공유 링크는 목록 안에서는 늘 보이게 — .sns_area 는 감춘 채 내용만 빌려 온다 */
.wi-share__links{display:flex;flex-wrap:wrap;gap:10px}
.wi-share__links a{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;background:var(--wi-ink);color:#fff;font-size:17px;
}
.wi-share__links a:hover{background:var(--wi-accent)}
.wi-share__links img{width:24px;height:24px}

/* 배경 스크롤 잠금 — JS 가 top 을 -scrollY 로 잡아 자리를 유지한다 */
body.wi-modal-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* 라이트박스 — 화면 전체를 쓴다.
 * 사진 크기에 버튼을 붙이면 세로컷·가로컷마다 자리가 달라진다(사용자 지적
 * 2026-08-22). 그래서 껍데기를 뷰포트에 고정하고 사진만 안에서 맞춘다. */
.wi-modal__box--lb{
    position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;
    padding:0;background:none;box-shadow:none;overflow:hidden;border-radius:0;
}
.wi-modal__box--lb .wi-modal__x{
    top:14px;right:14px;width:44px;height:44px;font-size:26px;
    background:rgba(255,253,252,.16);color:#fff;
}
.wi-modal__box--lb .wi-modal__x:hover{background:rgba(255,253,252,.3);color:#fff}
.wi-modal__box--lb .wi-modal__body{height:100%}

.wi-lb{position:relative;margin:0;width:100%;height:100%}
/* 사진 자리 — 버튼과 카운터가 차지하는 만큼 안쪽으로 물린다 */
.wi-lb__stage{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    padding:72px clamp(64px,9vw,120px) 76px;
}
.wi-lb img{
    display:block;max-width:100%;max-height:100%;width:auto;height:auto;
    object-fit:contain;border-radius:var(--wi-r-img);
}
/* 버튼은 사진이 아니라 화면 기준이라 자리가 안 흔들린다 */
.wi-lb__nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    width:48px;height:48px;border-radius:var(--wi-r-pill);
    background:rgba(255,253,252,.14);
}
.wi-lb__nav::before{
    content:'';display:block;width:10px;height:10px;margin:0 auto;
    border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;
}
.wi-lb__prev{left:clamp(10px,2vw,26px)}
.wi-lb__prev::before{transform:translateX(2px) rotate(135deg)}
.wi-lb__next{right:clamp(10px,2vw,26px)}
.wi-lb__next::before{transform:translateX(-2px) rotate(-45deg)}
.wi-lb__nav:hover{background:rgba(255,253,252,.3)}
.wi-lb__count{
    position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center;
    font-size:12.5px;letter-spacing:.08em;color:rgba(255,255,255,.8);
    font-variant-numeric:tabular-nums;pointer-events:none;
}
@media (max-width:600px){
    /* 좁은 화면에서는 좌우로 넘기면 되니 버튼을 아래로 내려 사진을 넓게 쓴다 */
    .wi-lb__stage{padding:64px 14px 84px}
    .wi-lb__nav{top:auto;bottom:16px;transform:none;width:42px;height:42px}
    .wi-lb__prev{left:calc(50% - 62px)}
    .wi-lb__next{right:calc(50% - 62px)}
    .wi-lb__count{bottom:29px}
}

/* 전환을 원치 않는 사용자에게는 걸지 않는다 */
@media (prefers-reduced-motion:reduce){
    .wi-modal__veil,.wi-modal__box{transition:none}
}

/* ── 8-6-6 옵션 시트 ──────────────────────────────────────────────────
 * 시안 template/product-details/옵션시트.dc.html
 * select 는 DOM 에 그대로 두고 화면에서만 감춘다 — 코어 js/shop.js 가 그
 * select 의 change 로 다음 옵션을 채우고 합계를 계산한다(→ js/wi-optsheet.js).
 * ⚠️ 시트는 <form> 안에 있다. 옵션 input 이 폼 밖으로 나가면 주문이 빠진다.  */
.wi-optbtn{
    display:flex;align-items:center;gap:12px;width:100%;margin-top:18px;
    padding:14px 16px;text-align:left;
    border:1px solid var(--wi-ink);border-radius:var(--wi-r-btn);background:var(--wi-surface);
}
.wi-optbtn:hover{background:var(--wi-tint)}
.wi-optbtn__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.wi-optbtn__txt b{font-size:13.5px;font-weight:600;letter-spacing:-0.02em}
.wi-optbtn__txt em{font-style:normal;font-size:11.5px;color:var(--wi-mute-2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-optbtn__more{margin-left:auto;font-size:12.5px;color:var(--wi-mute);white-space:nowrap}

.wi-sheet{position:fixed;inset:0;z-index:210}
.wi-sheet[hidden]{display:none}
.wi-sheet__veil{
    position:absolute;inset:0;background:rgba(34,28,27,.5);
    opacity:0;transition:opacity .2s ease;
}
.wi-sheet.is-open .wi-sheet__veil{opacity:1}
.wi-sheet__box{
    position:absolute;left:0;right:0;bottom:0;max-height:92dvh;
    display:flex;flex-direction:column;
    background:var(--wi-bg);border-radius:14px 14px 0 0;
    box-shadow:0 -14px 44px rgba(34,28,27,.2);
    transform:translateY(100%);transition:transform .24s cubic-bezier(.2,.7,.3,1);
}
.wi-sheet.is-open .wi-sheet__box{transform:none}
@media (min-width:760px){
    /* 넓은 화면에서는 가운데 카드로 — 바닥에 붙은 시트는 어색하다 */
    .wi-sheet{display:flex;align-items:center;justify-content:center}
    .wi-sheet__box{
        position:relative;width:min(460px,calc(100vw - 2 * var(--wi-gutter)));
        max-height:calc(100dvh - 2 * var(--wi-gutter));
        border-radius:var(--wi-r-box);transform:translateY(12px) scale(.99);opacity:0;
        transition:opacity .2s ease,transform .2s ease;
    }
    .wi-sheet.is-open .wi-sheet__box{transform:none;opacity:1}
}
.wi-sheet__head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:20px clamp(18px,2.4vw,26px) 12px;
}
.wi-sheet__head h3{font-size:16px;font-weight:700;letter-spacing:-0.03em;margin:0}
.wi-sheet__x{
    width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
    font-size:22px;line-height:1;color:var(--wi-mute);border-radius:var(--wi-r-pill);
}
.wi-sheet__x:hover{background:var(--wi-tint);color:var(--wi-ink)}
.wi-sheet__body{
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:0 clamp(18px,2.4vw,26px) 6px;
}
.wi-sheet__body .sit_option{margin:0 0 22px}
.wi-sheet__body .sit_option h3{
    font-size:11px;letter-spacing:0.2em;color:var(--wi-faint);text-transform:uppercase;
    font-weight:600;margin:0 0 12px;
}
.wi-sheet__body .get_item_options label,
.wi-sheet__body .get_item_supply label{
    display:block;font-size:12.5px;font-weight:600;color:var(--wi-ink);margin:0 0 8px;
}
.wi-optbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:8px;margin-bottom:16px}
.wi-optbox[data-disabled]{opacity:.45;pointer-events:none}
.wi-opt{
    display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;
    padding:12px 14px;border:1px solid var(--wi-line-4);border-radius:3px;
    background:transparent;color:var(--wi-ink-soft);font-size:13px;line-height:1.4;
}
.wi-opt span{font-weight:600;letter-spacing:-0.02em}
.wi-opt em{font-style:normal;font-size:11.5px;color:var(--wi-mute-2)}
.wi-opt:hover:not(:disabled){border-color:var(--wi-ink);background:var(--wi-surface)}
.wi-opt.is-on{border-color:var(--wi-ink);background:var(--wi-surface);color:var(--wi-ink);box-shadow:inset 0 0 0 1px var(--wi-ink)}
.wi-opt.is-out,.wi-opt:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.wi-opt__out{text-decoration:none;color:var(--wi-accent)}

/* 덜 고르고 [선택 완료] 를 눌렀을 때만 나온다 */
.wi-sheet__warn{
    margin:0;padding:11px clamp(18px,2.4vw,26px) 0;
    font-size:12.5px;font-weight:600;color:var(--wi-accent);
}
.wi-sheet__warn[hidden]{display:none}
.wi-sheet__foot{
    display:flex;align-items:center;gap:12px;
    padding:14px clamp(18px,2.4vw,26px);
    border-top:1px solid var(--wi-line);background:var(--wi-surface);
}
/* 위 #sit_tot_price 와 같은 마크업을 그대로 베껴 넣는다 — 정렬도 같은 방식 */
.wi-sheet__total{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:4px;font-size:12.5px;color:var(--wi-mute)}
.wi-sheet__total strong{margin-left:auto;font-size:20px;font-weight:800;color:var(--wi-ink);letter-spacing:-0.03em}
.wi-sheet__done{
    flex:0 0 auto;height:48px;padding:0 26px;border-radius:var(--wi-r-btn);
    background:var(--wi-ink);color:#fff;font-size:14.5px;font-weight:600;
}
.wi-sheet__done:hover{background:#3a322f}

/* ── 8-16 비밀번호 찾기 (skin/member/basic/password_lost · password_reset) ──
 * 시안 template/password/lost.html · reset.html
 *
 * ⚠️ **로그인과 달리 헤더·푸터가 딸려 온다** — 코어가 _head.sub.php 가 아니라
 *    _head.php 를 쓴다. 그래서 .wi-login 처럼 화면 전체를 차지하지 않고
 *    .wi-main 안에 얹힌다. 폭만 여기서 좁힌다 → [[wi-main-is-the-width]]
 * 제목·입력칸·탭은 로그인 것을 그대로 빌려 쓴다(.wi-login__f / __tabs / __hint).
 */
.wi-pw{
    max-width:520px;margin:0 auto;
    padding:clamp(28px,5vw,56px) 0 clamp(50px,8vw,90px);
}
.wi-pw__head{text-align:center}
.wi-pw__head h1{font-size:21px;font-weight:700;letter-spacing:-0.04em}
.wi-pw__head p{margin-top:10px;font-size:13px;color:var(--wi-mute);line-height:1.65}
.wi-pw__head p b{font-weight:600;color:var(--wi-ink-soft)}

.wi-pw__tabs{margin-top:26px}
.wi-pw__panel{padding-top:26px}
.wi-pw.is-js .wi-pw__panel{display:none}
.wi-pw.is-js .wi-pw__panel.on{display:block;animation:wi-login-fade .2s ease-out}
.wi-pw__help{margin-top:7px;font-size:12.5px;color:var(--wi-faint);line-height:1.6}
.wi-pw__cert{display:grid;gap:10px}
.wi-pw__cert .wi-btn{height:52px;font-size:14.5px}

/* 앞으로 무슨 일이 일어나는지 — 코어에는 없는 줄 */
.wi-pw__steps{
    margin-top:22px;padding:16px 18px;background:var(--wi-tint);
    border-radius:var(--wi-r-box);font-size:12.5px;color:var(--wi-ink-soft);line-height:1.7;
}
.wi-pw__steps ol{counter-reset:wi-pw-s;display:grid;gap:7px;margin:0;padding:0;list-style:none}
.wi-pw__steps li{counter-increment:wi-pw-s;position:relative;padding-left:22px}
.wi-pw__steps li::before{
    content:counter(wi-pw-s);position:absolute;left:0;top:2px;width:15px;height:15px;
    border-radius:50%;background:var(--wi-ink);color:#fff;font-size:9.5px;font-weight:700;
    display:grid;place-items:center;
}
.wi-pw__steps b{font-weight:700}

.wi-pw__out{
    margin-top:26px;padding-top:20px;border-top:1px solid var(--wi-line-3);
    display:flex;justify-content:center;gap:16px;font-size:12.5px;color:var(--wi-faint);
}
.wi-pw__out a:hover{color:var(--wi-accent)}

/* ── 보낸 뒤 ──
   코어는 alert_close() 로 글자만 띄우고 화면을 그대로 둔다. 메일이 늦으면
   같은 버튼을 계속 누르게 된다 → theme.config.php 의 wi_alert_close() 가
   여기로 돌려보내고, 스킨이 이 판을 그린다. */
.wi-pw__done{text-align:center}
.wi-pw__mark{
    width:58px;height:58px;margin:0 auto;border-radius:50%;background:var(--wi-tint-3);
    display:grid;place-items:center;font-size:24px;color:var(--wi-accent);
}
.wi-pw__done h1{margin-top:20px;font-size:19px;font-weight:700;letter-spacing:-0.03em}
.wi-pw__mail{
    margin-top:12px;display:inline-block;padding:9px 16px;background:var(--wi-surface);
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);font-size:14px;font-weight:600;
    word-break:break-all;
}
.wi-pw__d{margin-top:16px;font-size:13px;color:var(--wi-mute);line-height:1.8}
.wi-pw__done .wi-pw__steps{text-align:left;margin-top:26px}
.wi-pw__act{margin-top:26px;display:grid;gap:10px}
.wi-pw__act .wi-btn{height:52px;font-size:15px}

/* ── 새 비밀번호 정하기 ── */
.wi-pw__who{
    margin-top:26px;padding:16px 18px;background:var(--wi-surface);
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-box);
    display:flex;align-items:center;gap:14px;
}
.wi-pw__ava{
    width:42px;height:42px;flex:none;border-radius:50%;background:var(--wi-tint-3);
    display:grid;place-items:center;font-size:16px;font-weight:700;color:var(--wi-accent);
}
.wi-pw__who-t em{
    display:block;font-style:normal;font-size:11px;font-weight:700;
    letter-spacing:0.16em;color:var(--wi-faint);
}
.wi-pw__who-t b{display:block;margin-top:3px;font-size:15px;font-weight:700;letter-spacing:-0.01em}
.wi-pw__ok{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--wi-mute)}
.wi-pw__ok::before{content:"";width:6px;height:6px;border-radius:50%;background:#4c8a5e}

.wi-pw__f{margin-top:22px;gap:16px}
.wi-pw__in{position:relative;display:block}
.wi-pw__in input{padding-right:46px !important}
.wi-pw__in.is-bad input{border-color:var(--wi-accent)}
.wi-pw__in.is-ok input{border-color:#4c8a5e}
.wi-pw__eye{
    position:absolute;right:5px;top:50%;transform:translateY(-50%);
    width:40px;height:40px;border:0;background:transparent;cursor:pointer;
    color:var(--wi-faint-2);font-size:15px;border-radius:var(--wi-r-btn);
}
.wi-pw__eye:hover,.wi-pw__eye.on{color:var(--wi-ink)}

/* 규칙 — 치는 동안 하나씩 켜진다. 뒤늦게 "안 된다"고 막지 않는다 */
.wi-pw__rule{margin-top:9px;display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--wi-faint)}
.wi-pw__rule span{display:flex;align-items:center;gap:5px}
.wi-pw__rule span::before{content:"\25CB";font-size:9px}
.wi-pw__rule span.on{color:#4c8a5e}
.wi-pw__rule span.on::before{content:"\25CF"}

.wi-pw__bar{margin-top:10px;display:flex;align-items:center;gap:10px}
.wi-pw__bar-t{flex:1;height:3px;background:var(--wi-line-2);border-radius:2px;overflow:hidden}
.wi-pw__bar-t i{display:block;height:100%;width:0;background:var(--wi-accent);transition:width .2s,background .2s}
.wi-pw__bar-l{font-size:11.5px;color:var(--wi-faint);min-width:34px;text-align:right}

.wi-pw__msg{margin-top:8px;font-size:12.5px;line-height:1.5;min-height:17px}
.wi-pw__msg.is-bad{color:var(--wi-accent)}
.wi-pw__msg.is-ok{color:#4c8a5e}

/* ⚠️ 잠긴 버튼 — 두 칸이 같아지기 전에는 못 누른다. 코어가 두 칸을 비교하지
   못해서(password_reset_update.php 가 둘 다 mb_password_re 를 읽는다) 이게
   유일한 방어선이다 → [[youngcart-password-find-screens]] */
.wi-pw__f .wi-btn[disabled]{background:var(--wi-line-2);color:var(--wi-faint);cursor:not-allowed}
.wi-pw__f .wi-btn[disabled]:hover{background:var(--wi-line-2)}

.wi-pw__note{margin-top:12px;text-align:center;font-size:12px;color:var(--wi-faint);line-height:1.6}
.wi-pw__note b{font-weight:600;color:var(--wi-ink-soft)}

/* ── 8-17 회원가입 약관 동의 (skin/member/basic/register.skin.php) ─────
 * 가입 3단계의 1단계. **register_form 과 한 흐름**이라 `.wi-rf` 를 그대로
 * 쓰고(폭·머리·단계·버튼) 여기서는 약관 판만 더한다 → [[prefer-one-place]]
 *
 * 코어 화면에서 고친 것
 *  · 약관이 <textarea> 였다 — 읽으라고 준 글이 고칠 글로 보이고 스크롤이
 *    두 겹이 됐다. 읽는 판으로 바꿨다.
 *  · 동의 체크가 제목 줄 오른쪽 끝에 홀로 떠 있었고, 무엇에 동의하는지는
 *    sound_only 로 숨어 있었다. 각 판 아래에 글자와 함께 둔다.
 */
.wi-rt__doc{
    margin-top:14px;max-height:240px;overflow-y:auto;overscroll-behavior:contain;
    padding:18px 20px;border:1px solid var(--wi-line-2);border-radius:var(--wi-r-box);
    background:var(--wi-surface);
    font-size:12.5px;line-height:1.85;color:var(--wi-ink-soft);
    white-space:pre-line;      /* 관리자가 친 줄바꿈을 그대로 살린다 */
    word-break:keep-all;overflow-wrap:break-word;
}
.wi-rt__doc:focus{outline:0;border-color:var(--wi-ink)}
.wi-rt__doc.is-empty{color:var(--wi-faint);font-style:normal;text-align:center;padding:30px 20px}
/* 아래가 더 있다는 표시 — 판 끝을 흐리게 */
.wi-rt__doc{
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
}

.wi-rt__agree{margin-top:14px;font-size:13px;color:var(--wi-ink-soft)}
.wi-rt__agree b{font-weight:700;color:var(--wi-ink)}

/* ── 개인정보 표 ── */
.wi-rt__tw{margin-top:14px;overflow-x:auto}
.wi-rt__t{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.6}
.wi-rt__t th,.wi-rt__t td{padding:11px 14px;border-bottom:1px solid var(--wi-line-3);text-align:left}
.wi-rt__t thead th{
    background:var(--wi-tint);color:var(--wi-ink);font-weight:700;font-size:12px;
    letter-spacing:0.02em;border-bottom-color:var(--wi-line-2);white-space:nowrap;
}
.wi-rt__t tbody tr:last-child th,.wi-rt__t tbody tr:last-child td{border-bottom:0}
.wi-rt__t td{color:var(--wi-ink-soft);vertical-align:top}

/* ── 모두 동의 ── */
.wi-rt__all{
    margin-top:26px;padding:16px 18px;border-radius:var(--wi-r-box);
    background:var(--wi-tint);
}
.wi-rt__all .wi-check{width:100%;font-size:14px}
.wi-rt__all b{font-weight:700}

/* 좁으면 세 칸이 짓눌린다 — 줄마다 카드로 접는다(data-th 가 이름표) */
@media (max-width:560px){
    .wi-rt__tw{overflow-x:visible}
    .wi-rt__t thead{position:absolute;left:-9999px}
    .wi-rt__t tbody tr{
        display:block;padding:12px 14px;border:1px solid var(--wi-line-2);
        border-radius:var(--wi-r-box);background:var(--wi-surface);
    }
    .wi-rt__t tbody tr + tr{margin-top:8px}
    .wi-rt__t td{display:flex;gap:12px;padding:5px 0;border:0}
    .wi-rt__t td::before{
        content:attr(data-th);flex:0 0 62px;
        font-size:11.5px;font-weight:700;color:var(--wi-faint);
    }
    .wi-rt__doc{max-height:200px;padding:15px 16px}
}

/* ── 8-18 회원가입 완료 (skin/member/basic/register_result.skin.php) ────
 * 가입 3단계의 마지막. 앞 두 장과 한 흐름이라 `.wi-rf` 위에 얹는다.
 * ⚠️ 이 화면은 **두 얼굴**이다 — 메일 인증을 쓰면 아직 로그인이 안 된
 *    상태라 "할 일이 남았다" 가 되고, 안 쓰면 바로 쇼핑으로 보낸다.      */
.wi-rr__mark{
    width:64px;height:64px;margin:30px auto 0;border-radius:50%;
    display:grid;place-items:center;font-size:27px;
    background:var(--wi-ink);color:#fff;
}
.wi-rr__mark.is-wait{background:var(--wi-tint-3);color:var(--wi-accent)}

.wi-rr__hi{margin-top:20px;text-align:center;font-size:19px;font-weight:400;letter-spacing:-0.03em}
.wi-rr__hi b{font-weight:700}

.wi-rr__id{
    margin:16px auto 0;width:max-content;max-width:100%;
    display:flex;align-items:baseline;gap:12px;
    padding:10px 18px;border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);
}
.wi-rr__id span{font-size:11px;font-weight:700;letter-spacing:0.14em;color:var(--wi-faint)}
.wi-rr__id b{font-size:15px;font-weight:700;letter-spacing:-0.01em}

/* 메일 인증이 남았을 때만 */
.wi-rr__todo{
    margin-top:26px;padding:18px 20px;border-radius:var(--wi-r-box);
    background:var(--wi-tint);
}
.wi-rr__todo h3{font-size:14px;font-weight:700;letter-spacing:-0.02em}
.wi-rr__todo p{margin-top:9px;font-size:13px;line-height:1.75;color:var(--wi-ink-soft)}
.wi-rr__todo p b{font-weight:700;word-break:break-all}
.wi-rr__todo-sub{font-size:12.5px !important;color:var(--wi-mute) !important}

/* 받은 것 — 코어는 포인트가 들어간 사실을 아무 데서도 말해 주지 않는다 */
.wi-rr__gift{
    margin-top:26px;padding:18px 20px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-box);background:var(--wi-surface);
}
.wi-rr__gift ul{margin-top:12px;display:grid;gap:11px}
.wi-rr__gift li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.wi-rr__gift li b{
    flex:none;min-width:78px;font-size:17px;font-weight:700;letter-spacing:-0.03em;
    color:var(--wi-accent);
}
.wi-rr__gift li span{flex:1 1 180px;font-size:12.5px;color:var(--wi-mute);line-height:1.6}

.wi-rr__act{margin-top:30px}

/* 코어의 긴 안내 세 문단 — 접어 둔다 */
.wi-rr__more{margin-top:26px;padding-top:18px;border-top:1px solid var(--wi-line-3)}
.wi-rr__more summary{
    font-size:12.5px;color:var(--wi-mute);cursor:pointer;list-style:none;
    display:flex;align-items:center;justify-content:center;gap:6px;
}
.wi-rr__more summary::-webkit-details-marker{display:none}
.wi-rr__more summary::after{content:"⌄";font-size:14px;line-height:1;transition:transform .15s}
.wi-rr__more[open] summary::after{transform:rotate(180deg)}
.wi-rr__more summary:hover{color:var(--wi-ink)}
.wi-rr__more ul{margin-top:14px;display:grid;gap:8px;font-size:12.5px;line-height:1.75;color:var(--wi-mute)}
.wi-rr__more li{padding-left:12px;position:relative}
.wi-rr__more li::before{content:"·";position:absolute;left:2px;color:var(--wi-faint-2)}
.wi-rr__more a{color:var(--wi-ink-soft);border-bottom:1px solid var(--wi-line-4)}
.wi-rr__more a:hover{color:var(--wi-accent);border-color:var(--wi-accent)}

/* ── 8-19 쪽지함 (skin/member/basic/memo · memo_form · memo_view) ───────
 * 셋 다 모달 안에서 열린다(data-wi-form). 주소를 직접 열어도 되도록
 * `.wi-modal` 로 가두지 않는다 — theme.css 는 두 경우 다 실린다.
 * 탭(.win_ul)·쪽수(.pg_wrap)·제목(h1#win_title)은 8-13 절 것을 그대로 쓴다. */

/* 아바타 — wi_avatar(). 쪽지·프로필이 같이 쓴다 → [[prefer-one-place]] */
.wi-ava{
    flex:none;width:38px;height:38px;border-radius:50%;
    display:grid;place-items:center;overflow:hidden;
    background:var(--wi-tint-3);color:var(--wi-accent);
    font-size:14px;font-weight:700;line-height:1;
}
.wi-ava.is-photo{background:var(--wi-tint-2)}
.wi-ava img{width:100%;height:100%;object-fit:cover}
.wi-ava .profile_img{display:block;width:100%;height:100%}

/* ── 목록 ── */
.wi-memo__list{display:block}
.wi-memo__row{
    display:flex;align-items:flex-start;gap:12px;
    padding:13px 0;border-top:1px solid var(--wi-line-3);
}
.wi-memo__row:first-child{border-top:0;padding-top:2px}
.wi-memo__body{flex:1 1 auto;min-width:0}
.wi-memo__top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.wi-memo__top b{font-size:13.5px;font-weight:700;letter-spacing:-0.01em}
.wi-memo__top time{font-size:11.5px;color:var(--wi-faint);font-variant-numeric:tabular-nums}
.wi-memo__top em{
    font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:0.02em;
    padding:2px 7px;border-radius:var(--wi-r-pill);
    background:var(--wi-accent);color:#fff;
}
.wi-memo__top em.is-quiet{background:var(--wi-tint-2);color:var(--wi-mute);font-weight:600}
.wi-memo__link{
    display:block;margin-top:5px;font-size:12.5px;line-height:1.6;color:var(--wi-mute);
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.wi-memo__link:hover{color:var(--wi-ink)}
/* 안 읽은 줄은 보낸이와 미리보기가 진하다 — 배지에만 기대지 않는다 */
.wi-memo__row.is-unread .wi-memo__link{color:var(--wi-ink-soft);font-weight:500}
.wi-memo__del{
    flex:none;width:26px;height:26px;margin-top:5px;border-radius:50%;
    display:grid;place-items:center;font-size:15px;line-height:1;color:var(--wi-faint-2);
}
.wi-memo__del:hover{background:var(--wi-tint);color:var(--wi-accent)}

.wi-memo__empty{padding:38px 10px;text-align:center}
.wi-memo__empty p{font-size:13px;color:var(--wi-mute)}
.wi-memo__empty .wi-btn{margin-top:14px}

/* ── 쪽지 쓰기 ── */
.wi-memof__f{margin-top:4px;display:grid;gap:15px}
.wi-memof__f .lab{display:block;font-size:11.5px;font-weight:700;letter-spacing:0.08em;color:var(--wi-faint);margin-bottom:6px}
.wi-memof__f .lab em{font-style:normal;color:var(--wi-accent);margin-left:3px}
.wi-memof__f input[type=text],
.wi-memof__f textarea{
    width:100%;padding:12px 14px;border:1px solid var(--wi-line-4);
    border-radius:var(--wi-r-btn);background:var(--wi-surface);
    font-size:14px;line-height:1.7;font-family:inherit;
}
.wi-memof__f input[type=text]{height:48px;padding:0 14px}
.wi-memof__f input:focus,.wi-memof__f textarea:focus{outline:0;border-color:var(--wi-ink)}
.wi-memof__f textarea{resize:vertical;min-height:130px}
.wi-memof__f .help{margin-top:6px;font-size:12px;color:var(--wi-faint)}
.wi-memof__f .wi-cap{margin-top:0}

/* 포인트 차감 — 코어는 작은 회색 글씨로 흘렸다 */
.wi-memof__cost{
    margin-top:16px;padding:12px 14px;border-radius:var(--wi-r-img);
    background:var(--wi-tint);font-size:12.5px;line-height:1.6;color:var(--wi-ink-soft);
}
.wi-memof__cost b{font-weight:700;color:var(--wi-accent)}
.wi-memof__act{margin-top:18px;display:grid;gap:8px}
.wi-memof__act .wi-btn{height:48px;font-size:14.5px}

/* ── 쪽지 보기 ── */
.wi-memov__art{margin-top:2px}
.wi-memov__who{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding-bottom:14px;border-bottom:1px solid var(--wi-line-2);
}
.wi-memov__whot{flex:1 1 auto;min-width:0}
.wi-memov__whot span,.wi-memov__when span{
    display:block;font-size:10.5px;font-weight:700;letter-spacing:0.14em;color:var(--wi-faint);
}
.wi-memov__whot b{display:block;margin-top:2px;font-size:14.5px;font-weight:700;letter-spacing:-0.01em}
.wi-memov__when{flex:none;text-align:right}
.wi-memov__when time{display:block;margin-top:3px;font-size:12px;color:var(--wi-mute);font-variant-numeric:tabular-nums}
.wi-memov__del{
    flex:none;width:28px;height:28px;border-radius:50%;
    display:grid;place-items:center;font-size:16px;line-height:1;color:var(--wi-faint-2);
}
.wi-memov__del:hover{background:var(--wi-tint);color:var(--wi-accent)}

.wi-memov__body{
    padding:18px 2px 6px;font-size:13.5px;line-height:1.9;color:var(--wi-ink-soft);
    word-break:keep-all;overflow-wrap:break-word;
}
.wi-memov__body img{max-width:100%;height:auto}

.wi-memov__nav{
    margin-top:16px;padding-top:14px;border-top:1px solid var(--wi-line-3);
    display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--wi-mute);
}
.wi-memov__nav a:hover{color:var(--wi-accent)}
.wi-memov__act{margin-top:18px;display:grid;gap:8px}
.wi-memov__act .wi-btn{height:48px;font-size:14.5px}

@media (max-width:460px){
    .wi-memov__when{flex:1 1 100%;text-align:left;margin-top:4px}
}

/* ── 8-20 포인트 내역 · 스크랩 (skin/member/basic/point · scrap · scrap_popin) ──
 * 모달 안에서도, 주소를 직접 열어도 같은 모습이 나오도록 `.wi-modal` 로
 * 가두지 않는다. 껍데기(.new_win)·탭·쪽수는 8-13 절 것을 같이 쓴다. */

/* ── 포인트 ── */
.wi-pt__lab{font-size:12.5px;color:var(--wi-mute)}
.wi-pt__list{display:block;margin-top:2px}
.wi-pt__row{padding:12px 0;border-top:1px solid var(--wi-line-3)}
.wi-pt__row:first-child{border-top:0;padding-top:2px}
.wi-pt__t{display:flex;align-items:baseline;gap:12px}
.wi-pt__tit{flex:1 1 auto;min-width:0;font-size:13px;color:var(--wi-ink-soft);word-break:keep-all}
.wi-pt__t b{
    flex:none;font-size:14px;font-weight:700;white-space:nowrap;
    font-variant-numeric:tabular-nums;color:#4c8a5e;
}
.wi-pt__row.is-use .wi-pt__t b{color:var(--wi-accent)}
.wi-pt__d{margin-top:4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--wi-faint)}
.wi-pt__d time{font-variant-numeric:tabular-nums}
.wi-pt__d em{
    font-style:normal;padding:1px 7px;border-radius:var(--wi-r-pill);
    background:var(--wi-tint-2);color:var(--wi-mute);font-weight:600;
}
/* 소멸된 줄은 흐리게 — 지금 쓸 수 있는 것과 헷갈리지 않게 */
.wi-pt__row.is-expired .wi-pt__tit,
.wi-pt__row.is-expired .wi-pt__t b{color:var(--wi-faint-2);text-decoration:line-through}

/* ⚠️ "이 쪽 합계" — 코어는 "소계" 라고만 썼다. 전체 합이 아니라 지금 보고
   있는 쪽의 합이라 보유포인트와 안 맞아 보인다. 무엇의 합인지 적는다. */
.wi-pt__sum{
    margin-top:6px;padding-top:12px;border-top:1px solid var(--wi-line);
    display:flex;align-items:baseline;gap:12px;font-size:12.5px;color:var(--wi-mute);
}
.wi-pt__sum span{flex:1 1 auto}
.wi-pt__sum b{font-weight:700;font-variant-numeric:tabular-nums}
.wi-pt__sum .is-in{color:#4c8a5e}
.wi-pt__sum .is-out{color:var(--wi-accent)}
.wi-pt__empty{padding:38px 10px;text-align:center;font-size:13px;color:var(--wi-mute)}

/* ── 스크랩 ── */
.wi-scrap__list{display:block}
.wi-scrap__row{
    display:flex;align-items:flex-start;gap:12px;
    padding:13px 0;border-top:1px solid var(--wi-line-3);
}
.wi-scrap__row:first-child{border-top:0;padding-top:2px}
.wi-scrap__body{flex:1 1 auto;min-width:0}
.wi-scrap__tit{
    display:block;font-size:13.5px;font-weight:600;line-height:1.55;letter-spacing:-0.01em;
    word-break:keep-all;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.wi-scrap__tit:hover{color:var(--wi-accent)}
.wi-scrap__meta{margin-top:5px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--wi-faint)}
.wi-scrap__bo{
    padding:1px 8px;border-radius:var(--wi-r-pill);
    background:var(--wi-tint-2);color:var(--wi-mute);font-weight:600;
}
.wi-scrap__bo:hover{background:var(--wi-tint-3);color:var(--wi-accent)}
.wi-scrap__meta time{font-variant-numeric:tabular-nums}
.wi-scrap__del{
    flex:none;width:26px;height:26px;margin-top:2px;border-radius:50%;
    display:grid;place-items:center;font-size:15px;line-height:1;color:var(--wi-faint-2);
}
.wi-scrap__del:hover{background:var(--wi-tint);color:var(--wi-accent)}
.wi-scrap__empty{padding:38px 10px;text-align:center}
.wi-scrap__empty p{font-size:13px;color:var(--wi-mute)}
.wi-scrap__empty span{display:block;margin-top:6px;font-size:12px;color:var(--wi-faint)}

/* ── 스크랩하기(게시판에서 담을 때) ── */
.wi-scrapin{max-width:520px;margin:0 auto;padding:clamp(20px,4vw,32px)}
.wi-scrapin__tit{
    padding:14px 16px;border-radius:var(--wi-r-img);background:var(--wi-tint);
    font-size:13.5px;font-weight:600;line-height:1.6;letter-spacing:-0.01em;word-break:keep-all;
}
.wi-scrapin__f{margin-top:16px}
.wi-scrapin__f .lab{display:block;font-size:11.5px;font-weight:700;letter-spacing:0.08em;color:var(--wi-faint);margin-bottom:6px}
.wi-scrapin__f .lab span{margin-left:6px;font-weight:400;letter-spacing:0;color:var(--wi-faint-2)}
.wi-scrapin__f textarea{
    width:100%;padding:12px 14px;border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);font:inherit;font-size:14px;line-height:1.7;resize:vertical;min-height:96px;
}
.wi-scrapin__f textarea:focus{outline:0;border-color:var(--wi-ink)}
.wi-scrapin__f .help{margin-top:6px;font-size:12px;color:var(--wi-faint);line-height:1.6}
.wi-scrapin__act{margin-top:18px;display:grid;gap:8px}
.wi-scrapin__act .wi-btn{height:48px;font-size:14.5px}

/* ── 8-21 프로필 · 폼메일 · 게시판 비밀번호 확인 ────────────────────────
 * 회원 폴더에 남아 있던 마지막 셋. 셋 다 코어가 새 창으로 띄우던 것이라
 * 껍데기가 `.new_win` 이다 — 게시판(7단계)에서 data-wi-form 으로 모달에
 * 그대로 심을 수 있게 마크업을 남겨 뒀다.
 * ⚠️ 게시판 비밀번호 확인은 `.wi-login`·`.wi-confirm` 을 그대로 쓴다
 *    (member_confirm 과 껍데기가 같다) → [[prefer-one-place]] */

/* 새 창으로 떴을 때의 바깥 여백 — 모달 안이면 모달이 준다 */
#profile.new_win,#formmail.new_win,#scrap_do.new_win{max-width:560px;margin:0 auto;padding:clamp(20px,4vw,34px)}
.wi-modal #profile.new_win,.wi-modal #formmail.new_win,.wi-modal #scrap_do.new_win{max-width:none;padding:0}

/* ── 프로필 ── */
.wi-prof__head{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--wi-line-2)}
.wi-prof__ava{width:52px;height:52px;font-size:19px}
.wi-prof__head b{display:block;font-size:16px;font-weight:700;letter-spacing:-0.02em}
.wi-prof__hp{display:block;margin-top:3px;font-size:12px;color:var(--wi-mute);word-break:break-all}
.wi-prof__hp:hover{color:var(--wi-accent)}

.wi-prof__dl{margin-top:4px}
.wi-prof__dl > div{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--wi-line-3)}
.wi-prof__dl dt{flex:0 0 78px;font-size:11.5px;font-weight:700;letter-spacing:0.06em;color:var(--wi-faint)}
.wi-prof__dl dd{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--wi-ink-soft);font-variant-numeric:tabular-nums}
.wi-prof__dl dd span{font-size:11.5px;color:var(--wi-faint)}
/* ⚠️ 코어는 "알 수 없음" 이라고만 했다 — 없는 게 아니라 가려진 것이다 */
.wi-prof__dl .is-hidden{font-size:12.5px;color:var(--wi-faint-2)}

.wi-prof__intro{margin-top:20px}
.wi-prof__intro h2{font-size:11.5px;font-weight:700;letter-spacing:0.14em;color:var(--wi-faint)}
.wi-prof__intro p{
    margin-top:9px;padding:14px 16px;border-radius:var(--wi-r-img);background:var(--wi-tint);
    font-size:13px;line-height:1.85;color:var(--wi-ink-soft);white-space:pre-line;word-break:keep-all;
}

/* ── 폼메일 ── */
.wi-fm__f{display:grid;gap:15px}
.wi-fm__f .lab{display:block;font-size:11.5px;font-weight:700;letter-spacing:0.08em;color:var(--wi-faint);margin-bottom:6px}
.wi-fm__f .lab em{font-style:normal;color:var(--wi-accent);margin-left:3px}
.wi-fm__f input[type=text],
.wi-fm__f textarea{
    width:100%;padding:12px 14px;border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);font:inherit;font-size:14px;line-height:1.7;
}
.wi-fm__f input[type=text]{height:48px;padding:0 14px}
.wi-fm__f input:focus,.wi-fm__f textarea:focus{outline:0;border-color:var(--wi-ink)}
.wi-fm__f textarea{resize:vertical;min-height:150px}
.wi-fm__f .help{margin-top:6px;font-size:12px;color:var(--wi-faint);line-height:1.6}
.wi-fm__type{display:flex;gap:18px;flex-wrap:wrap}
.wi-fm__files{display:grid;gap:8px}
.wi-fm__files input[type=file]{font-size:12.5px;color:var(--wi-mute)}
.wi-fm__f .wi-cap{margin-top:0}
/* 코어가 confirm 으로 묻던 말 — 첨부를 고르면 여기 뜬다 */
.wi-fm__warn{
    margin-top:9px;padding:11px 13px;border-radius:var(--wi-r-img);
    background:var(--wi-tint-3);font-size:12.5px;line-height:1.6;color:var(--wi-ink-soft);
}
.wi-fm__warn b{font-weight:700}
.wi-fm__act{margin-top:20px;display:grid;gap:8px}
.wi-fm__act .wi-btn{height:50px;font-size:14.5px}
.wi-fm__act .wi-btn[disabled]{background:var(--wi-line-2);color:var(--wi-faint);cursor:not-allowed}

/* ── 게시판 비밀번호 확인 ── */
.wi-confirm__why{margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--wi-faint)}

/* ── 8-22 상품 검색 결과 (skin/shop/basic/search.skin.php) ──────────────
 * 훅이 없어 스킨을 다시 썼다. 상품 그리드는 list.10(=wi_item_grid)이 그리고,
 * 여기서는 **머리 · 검색 폼 · 분류 칩 · 정렬바 · 결과 없음**만 맡는다.
 * 정렬바(.wi-listbar)·칩(.wi-chip)·페이지(.pg_wrap)는 상품목록 것을 그대로
 * 쓴다 — 검색결과도 결국 상품목록이라 두 화면이 달라 보이면 안 된다.      */
.wi-srch{padding-bottom:clamp(40px,5vw,72px)}

/* 머리 */
.wi-srch__head{margin-bottom:clamp(22px,2.6vw,34px)}
.wi-srch__head h1{
    margin-top:12px;font-size:clamp(26px,2.8vw,38px);font-weight:700;letter-spacing:-0.035em;
}
/* 검색어만 강조색으로 — 따옴표는 CSS 가 붙인다(마크업에 문장부호를 안 남긴다) */
.wi-srch__head h1 strong{font-weight:700;color:var(--wi-accent)}
.wi-srch__head h1 strong::before{content:'\201C'}
.wi-srch__head h1 strong::after{content:'\201D'}
.wi-srch__sub{margin-top:12px;font-size:13.5px;color:var(--wi-ink-soft)}
.wi-srch__sub b{font-weight:600;color:var(--wi-ink)}

/* 검색 폼 — 한 장의 판으로 묶는다 */
.wi-srch__form{
    padding:clamp(18px,2vw,24px);border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
    background:var(--wi-surface);
}
.wi-srch__bar{
    display:flex;align-items:center;gap:10px;height:52px;padding:0 8px 0 18px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-pill);background:var(--wi-tint);
}
.wi-srch__bar:focus-within{border-color:var(--wi-ink);background:var(--wi-surface)}
.wi-srch__bar svg{flex:0 0 auto;color:var(--wi-faint)}
.wi-srch__bar input{
    flex:1 1 auto;min-width:0;height:100%;border:0;background:none;padding:0;
    font:inherit;font-size:15px;color:var(--wi-ink);
}
.wi-srch__bar input:focus{outline:0}
.wi-srch__bar input::placeholder{color:var(--wi-faint)}
.wi-srch__bar .wi-btn{flex:0 0 auto;height:38px;padding:0 22px;border-radius:var(--wi-r-pill)}

/* 상세검색 — 접었다 편다 */
.wi-srch__more{margin-top:14px}
.wi-srch__more > summary{
    display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
    font-size:12.5px;color:var(--wi-mute);
}
.wi-srch__more > summary::-webkit-details-marker{display:none}
.wi-srch__more > summary::after{
    content:'';width:6px;height:6px;margin-bottom:2px;
    border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:rotate(45deg);transition:transform .18s;
}
.wi-srch__more[open] > summary::after{transform:rotate(-135deg);margin-bottom:-2px}
.wi-srch__more > summary:hover{color:var(--wi-ink)}

.wi-srch__opts{
    display:grid;gap:clamp(14px,2vw,26px);margin-top:16px;padding-top:16px;
    border-top:1px solid var(--wi-line);
    grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
}
.wi-srch__opt-t{
    display:block;margin-bottom:10px;
    font-size:11.5px;font-weight:700;letter-spacing:0.1em;color:var(--wi-faint);
}
.wi-srch__scope{display:flex;flex-wrap:wrap;gap:8px 20px}
/* 최소~최대는 **한 줄로 붙어 있어야** 한 쌍으로 읽힌다 — 좁은 화면에서
   줄이 갈리면 "~" 와 "원" 이 따로 떨어져 무슨 칸인지 알 수 없다. 줄바꿈을
   막고 칸이 줄어들게 둔다(2026-08-25 390px 실측). */
.wi-srch__price{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
.wi-srch__price .wi-input{flex:1 1 0;min-width:0;max-width:130px;width:auto;height:38px;text-align:right;font-variant-numeric:tabular-nums}
.wi-srch__price span{font-size:13px;color:var(--wi-faint);flex:0 0 auto}
.wi-srch__won{color:var(--wi-mute)}

.wi-srch__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:16px}
.wi-srch__act .wi-btn{height:38px;padding:0 20px}
.wi-srch__help{
    flex:1 1 260px;font-size:11.5px;line-height:1.7;color:var(--wi-faint);text-wrap:pretty;
}

/* 정렬만 있는 도구줄 — 개수는 머리글이 말한다(검색결과) */
.wi-listbar--sortonly{justify-content:flex-end}

/* 검색된 분류 — 칩으로 거른다. 개수는 칩 안에 흐리게 */
.wi-srch__cats{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(20px,2.4vw,30px) 0}
.wi-srch__cats .wi-chip{height:34px;padding:0 14px;font-size:12.5px}
.wi-srch__cats .wi-chip span{margin-left:6px;color:var(--wi-faint);font-variant-numeric:tabular-nums}
.wi-srch__cats .wi-chip.is-on span{color:rgba(255,255,255,.66)}

/* 결과가 없을 때 */
.wi-srch__none{
    margin-top:clamp(28px,3vw,42px);padding:clamp(48px,7vw,88px) clamp(20px,4vw,40px);
    border:1px solid var(--wi-line);border-radius:var(--wi-r-box);background:var(--wi-surface);
    text-align:center;
}
.wi-srch__none-t{font-size:clamp(17px,1.8vw,21px);font-weight:600;letter-spacing:-0.02em}
.wi-srch__none-t strong{font-weight:700;color:var(--wi-accent)}
.wi-srch__none-t strong::before{content:'\201C'}
.wi-srch__none-t strong::after{content:'\201D'}
.wi-srch__tips{
    margin:18px auto 0;max-width:44ch;display:grid;gap:5px;
    font-size:13px;line-height:1.8;color:var(--wi-mute);text-align:left;
}
.wi-srch__tips li{padding-left:13px;position:relative}
.wi-srch__tips li::before{content:'';position:absolute;left:2px;top:11px;width:3px;height:3px;border-radius:50%;background:var(--wi-faint-2)}
.wi-srch__pop{margin-top:clamp(28px,3.4vw,40px)}
.wi-srch__pop > strong{
    display:block;margin-bottom:12px;
    font-size:11.5px;font-weight:700;letter-spacing:0.1em;color:var(--wi-faint);
}
.wi-srch__pop .wi-srch__cats{justify-content:center;margin:0}
.wi-srch__none-btn{margin-top:clamp(28px,3.4vw,40px);height:46px;padding:0 30px}

@media (max-width:620px){
    .wi-srch__bar{height:48px;padding-left:14px}
    .wi-srch__bar input{font-size:14px}
    .wi-srch__bar .wi-btn{padding:0 16px}
    .wi-srch__tips{text-align:left}
}

/* ── 8-23 게시판 (skin/board/wi_bd — 목록 · 보기 · 쓰기 · 댓글) ──────────
 * 커뮤니티 게시판을 상점과 한 몸으로 입힌다. 스킨 style.css 는 없다.
 * ⚠️ 테마 스킨은 `bo_skin` 이 **`theme/` 로 시작할 때만** 잡힌다
 *    (lib/common.lib.php 의 get_skin_path). 게시판 설정값은 `theme/wi_bd` 다.
 * 버튼(.wi-btn·--line·--sm) · 체크(.wi-check) · 입력칸(.wi-input) · 숫자(.wi-num)
 * · 페이지(.pg_wrap) 는 전부 공용 것을 그대로 쓴다 → [[prefer-one-place]]     */
.wi-bd{padding-bottom:clamp(40px,5vw,72px)}
.wi-bd-i{flex:0 0 auto}
/* 게시판 안에서는 버튼을 한 치수 작게 — 도구줄에 여럿이 늘어선다 */
.wi-bd .wi-btn{height:38px;padding:0 18px;font-size:12.5px}
.wi-bd .wi-btn--line{height:38px;padding:0 17px}
.wi-bd .wi-btn--sm{height:38px;padding:0 15px}

/* 아이콘 단추 — 검색·RSS·관리·더보기 */
.wi-bd-ico{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);color:var(--wi-mute);
}
.wi-bd-ico:hover{border-color:var(--wi-ink);color:var(--wi-ink)}

/* 머리 */
.wi-bd__head{margin-bottom:clamp(22px,2.6vw,32px)}
.wi-bd__head h1{margin-top:12px;font-size:clamp(26px,2.8vw,38px);font-weight:700;letter-spacing:-0.035em}
.wi-bd__sub{margin-top:12px;font-size:13px;color:var(--wi-mute)}
.wi-bd__sub b{font-weight:600;color:var(--wi-ink)}

/* 분류 칩 — 코어가 <li><a id="bo_cate_on"> 로 현재 분류를 알려 준다 */
.wi-bd__cate ul{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(18px,2vw,26px)}
.wi-bd__cate a{
    display:inline-flex;align-items:center;height:34px;padding:0 14px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);color:var(--wi-mute);font-size:12.5px;white-space:nowrap;
}
.wi-bd__cate a:hover{border-color:var(--wi-ink);color:var(--wi-ink)}
.wi-bd__cate a#bo_cate_on{border-color:var(--wi-ink);background:var(--wi-ink);color:#fff}

/* 도구줄 */
.wi-bd__bar{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    padding-bottom:14px;border-bottom:1px solid var(--wi-line);
}
.wi-bd__found{font-size:13px;color:var(--wi-mute)}
.wi-bd__found b{font-weight:600;color:var(--wi-ink)}
.wi-bd__found .wi-link{margin-left:10px}
.wi-bd__acts{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:7px}

/* 관리자 더보기 메뉴 — 목록·보기·댓글이 같이 쓴다 */
.wi-bd__opt{position:relative}
.wi-bd__optmenu{
    display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:20;
    min-width:150px;padding:6px;border:1px solid var(--wi-line-2);border-radius:var(--wi-r-box);
    background:var(--wi-surface);box-shadow:0 12px 30px rgba(34,28,27,.12);
}
.wi-bd__optmenu li{display:block}
.wi-bd__optmenu a,.wi-bd__optmenu button{
    display:flex;align-items:center;gap:8px;width:100%;
    padding:9px 11px;border:0;background:none;border-radius:var(--wi-r-btn);
    font:inherit;font-size:12.5px;color:var(--wi-ink-soft);text-align:left;cursor:pointer;
}
.wi-bd__optmenu a:hover,.wi-bd__optmenu button:hover{background:var(--wi-tint);color:var(--wi-ink)}

/* ── 목록 표 ─────────────────────────────────────────────────────────── */
.wi-bd__tblwrap{overflow-x:auto}
.wi-bd__tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.wi-bd__tbl thead th{
    padding:13px 10px;border-bottom:1px solid var(--wi-line-2);
    font-size:11.5px;font-weight:700;letter-spacing:0.06em;color:var(--wi-faint);white-space:nowrap;
}
.wi-bd__tbl thead th{text-align:center}
/* 글이 들어가는 두 칸만 왼쪽 — 나머지(번호·날짜·숫자)는 가운데가 읽기 좋다 */
.wi-bd__tbl thead .wi-bd-c-sj,.wi-bd__tbl thead .wi-bd-c-nm{text-align:left}
.wi-bd__tbl thead th a{color:inherit}
.wi-bd__tbl thead th a:hover{color:var(--wi-ink)}
.wi-bd__tbl tbody td{padding:15px 10px;border-bottom:1px solid var(--wi-line-3);vertical-align:middle}
.wi-bd__tbl tbody tr:hover td{background:var(--wi-tint)}
.wi-bd-c-chk{width:40px;text-align:center}
.wi-bd-c-chk input{width:16px;height:16px;accent-color:var(--wi-ink);margin:0;cursor:pointer}
.wi-bd-c-no{width:76px;text-align:center;color:var(--wi-faint);font-size:12.5px}
.wi-bd-c-nm{width:120px;color:var(--wi-mute);font-size:12.5px}
.wi-bd-c-dt{width:88px;text-align:center;color:var(--wi-faint);font-size:12.5px}
.wi-bd-c-hit,.wi-bd-c-gd{width:64px;text-align:center;color:var(--wi-faint);font-size:12.5px}
/* 좁은 화면 전용 줄 — 넓을 때는 오른쪽 칸들이 대신한다 */
.wi-bd__meta{display:none}

.wi-bd__line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.wi-bd__re{color:var(--wi-faint-2);display:inline-flex}
.wi-bd__ca{
    flex:0 0 auto;font-size:11.5px;color:var(--wi-mute);
    padding:2px 8px;border:1px solid var(--wi-line-2);border-radius:var(--wi-r-pill);
}
.wi-bd__ca:hover{border-color:var(--wi-ink);color:var(--wi-ink)}
.wi-bd__tit{display:inline-flex;align-items:center;gap:6px;min-width:0;font-weight:500;color:var(--wi-ink)}
.wi-bd__tit:hover{text-decoration:underline;text-underline-offset:3px}
.wi-bd__lock{display:inline-flex;color:var(--wi-faint)}
.wi-bd__cmt{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--wi-accent)}
.wi-bd__mk{display:inline-flex;color:var(--wi-faint-2)}
.wi-bd__new{
    font-size:9.5px;font-weight:800;letter-spacing:0.08em;color:var(--wi-accent);
    border:1px solid currentColor;border-radius:var(--wi-r-btn);padding:1px 4px;
}
.wi-bd__empty{padding:76px 0!important;text-align:center;color:var(--wi-faint);font-size:14px}
.wi-is-notice td{background:var(--wi-tint)}
.wi-is-notice .wi-bd__tit{font-weight:600}
.wi-is-current .wi-bd__tit{color:var(--wi-accent)}
/* 열람중 표 — 공용 .wi-tag 를 옅게 */
.wi-tag--soft{background:var(--wi-line-2);color:var(--wi-ink-soft)}

.wi-bd__foot{margin-top:clamp(24px,3vw,36px);display:flex;justify-content:flex-end}

/* ── 게시판 검색 (도구줄 돋보기로 연다) ─────────────────────────────── */
.wi-bd__schwrap{display:none;position:fixed;inset:0;z-index:220}
/* ⚠️ 코어 마크업은 백드롭(.bo_sch_bg)을 **패널 뒤에** 적는다. 둘 다 absolute 라
   z-index 를 안 주면 나중에 적힌 백드롭이 위로 올라와 패널을 덮는다 —
   검색칸을 눌러도 백드롭이 클릭을 먹고 창이 닫혔다. 감싸개가 이미 쌓임
   맥락이니 안에서 층만 매긴다 → [[theme-stacking-context-hero]] */
.wi-bd__schbg{position:absolute;inset:0;z-index:0;background:rgba(34,28,27,.42)}
.wi-bd__sch{
    position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(460px,calc(100% - 32px));padding:26px;
    border-radius:var(--wi-r-box);background:var(--wi-surface);
    box-shadow:0 24px 60px rgba(34,28,27,.22);
}
.wi-bd__schtit{font-size:15px;font-weight:700;letter-spacing:-0.02em;margin-bottom:16px}
.wi-bd__sch form{display:grid;gap:10px}
.wi-bd__sch select{height:42px;padding:0 32px 0 13px;font-size:13.5px}
.wi-bd__schbar{
    display:flex;align-items:center;height:42px;padding:0 4px 0 14px;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);background:var(--wi-surface);
}
.wi-bd__schbar:focus-within{border-color:var(--wi-ink)}
.wi-bd__schbar input{flex:1 1 auto;min-width:0;height:100%;border:0;background:none;font:inherit;font-size:13.5px}
.wi-bd__schbar input:focus{outline:0}
.wi-bd__schgo{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:var(--wi-r-btn);color:var(--wi-mute);
}
.wi-bd__schgo:hover{background:var(--wi-tint);color:var(--wi-ink)}
.wi-bd__schcls{position:absolute;right:14px;top:14px;width:32px;height:32px;color:var(--wi-faint)}
.wi-bd__schcls:hover{color:var(--wi-ink)}

/* ── 게시물 보기 ─────────────────────────────────────────────────────── */
.wi-bd__vhead{padding-bottom:clamp(18px,2vw,24px);border-bottom:1px solid var(--wi-line-2)}
.wi-bd__vback a{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--wi-mute)}
.wi-bd__vback a:hover{color:var(--wi-ink)}
.wi-bd__vca{
    display:inline-block;margin-top:16px;font-size:11.5px;color:var(--wi-accent);
    letter-spacing:0.06em;font-weight:600;
}
.wi-bd__vtit{margin-top:10px;font-size:clamp(21px,2.2vw,30px);font-weight:700;letter-spacing:-0.03em;line-height:1.35}
.wi-bd__vmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--wi-faint)}
.wi-bd__vwriter{color:var(--wi-ink-soft);font-weight:600}
.wi-bd__vip{color:var(--wi-faint-2);font-weight:400}
.wi-bd__vacts{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:18px}
.wi-bd__vacts .wi-bd__opt{margin-left:auto}

.wi-bd__vbody{padding:clamp(26px,3.4vw,44px) 0}
.wi-bd__vimg{margin-bottom:22px;display:grid;gap:12px;justify-items:start}
.wi-bd__vimg img{max-width:100%;height:auto;border-radius:var(--wi-r-img)}
.wi-bd__vcon{font-size:15px;line-height:1.9;color:var(--wi-ink-soft);word-break:keep-all}
.wi-bd__vcon img{max-width:100%;height:auto;border-radius:var(--wi-r-img)}
.wi-bd__vcon p{margin:0 0 16px}
.wi-bd__vcon a{color:var(--wi-accent);text-decoration:underline;text-underline-offset:3px}
.wi-bd__vcon ul,.wi-bd__vcon ol{margin:0 0 16px;padding-left:20px;list-style:revert}
.wi-bd__vcon h2,.wi-bd__vcon h3,.wi-bd__vcon h4{margin:26px 0 12px;font-weight:700;color:var(--wi-ink)}
.wi-bd__vcon a.view_image{cursor:zoom-in}
.wi-bd__vsign{margin-top:26px;padding-top:18px;border-top:1px dashed var(--wi-line-2);font-size:12.5px;color:var(--wi-faint)}

.wi-bd__vgood{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(28px,3.4vw,44px);justify-content:center}
.wi-bd__vgwrap{position:relative;display:inline-flex;align-items:center}
.wi-bd__vgmsg{
    display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
    padding:6px 11px;border-radius:var(--wi-r-btn);background:var(--wi-ink);color:#fff;
    font-size:11.5px;font-weight:400;white-space:nowrap;
}
.wi-bd__vgstatic{font-size:12.5px;color:var(--wi-mute)}
.wi-bd__vshare{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;justify-content:center}

.wi-bd__vsec{padding:20px 0;border-top:1px solid var(--wi-line)}
.wi-bd__vsectit{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:0.08em;color:var(--wi-faint);margin-bottom:12px}
.wi-bd__vfiles{display:grid;gap:10px}
.wi-bd__vfile{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:13.5px;color:var(--wi-ink)}
.wi-bd__vfile:hover strong{text-decoration:underline;text-underline-offset:3px}
.wi-bd__vfile span{font-size:12px;color:var(--wi-faint)}
.wi-bd__vfmeta{display:block;margin-top:3px;font-size:11.5px;color:var(--wi-faint-2)}

.wi-bd__vnb{border-top:1px solid var(--wi-line);border-bottom:1px solid var(--wi-line)}
.wi-bd__vnb li{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 2px;font-size:13px}
.wi-bd__vnb li+li{border-top:1px solid var(--wi-line-3)}
.wi-bd__vnbtit{flex:0 0 52px;font-size:11.5px;font-weight:700;letter-spacing:0.06em;color:var(--wi-faint)}
.wi-bd__vnb a{flex:1 1 200px;min-width:0;color:var(--wi-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-bd__vnb a:hover{color:var(--wi-ink)}
.wi-bd__vnbdate{font-size:12px;color:var(--wi-faint-2)}
.wi-bd__vfoot{margin-top:clamp(24px,3vw,36px);display:flex;justify-content:center}

/* ── 댓글 ────────────────────────────────────────────────────────────── */
.wi-bd__cm{margin-top:clamp(40px,5vw,64px)}
.wi-bd__cmtit{font-size:15px;font-weight:700;letter-spacing:-0.02em;padding-bottom:14px;border-bottom:1px solid var(--wi-line-2)}
.wi-bd__cmtit b{color:var(--wi-accent);margin-left:4px}
.wi-bd__c{display:flex;gap:12px;padding:18px 0;border-bottom:1px solid var(--wi-line-3)}
.wi-bd__c.wi-is-re{background:var(--wi-tint);border-radius:var(--wi-r-box);padding:18px 16px;margin-top:8px;border-bottom:0}
.wi-bd__cpf{flex:0 0 auto}
.wi-bd__cpf img{width:34px;height:34px;border-radius:var(--wi-r-pill);object-fit:cover}
.wi-bd__cpf:empty{display:none}
.wi-bd__cbody{flex:1 1 auto;min-width:0}
.wi-bd__chead{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12px;color:var(--wi-faint);position:relative}
.wi-bd__cnm{font-size:12.5px;font-weight:600;color:var(--wi-ink-soft)}
.wi-bd__copt{margin-left:auto}
.wi-bd__copt .wi-bd-ico{width:28px;height:28px;border:0;background:none}
.wi-bd__ccon{margin-top:8px;font-size:13.5px;line-height:1.85;color:var(--wi-ink-soft);word-break:keep-all}
.wi-bd__ccon .wi-bd__lock{margin-right:4px;vertical-align:-2px}
.wi-bd__cempty{padding:44px 0;text-align:center;color:var(--wi-faint);font-size:13.5px}

.wi-bd__cw{
    margin-top:20px;padding:18px;border:1px solid var(--wi-line);
    border-radius:var(--wi-r-box);background:var(--wi-surface);
}
/* comment_box() 가 이 폼을 답변·수정 자리로 옮겨 심는다 — 그 자리에서는 여백을 줄인다 */
.bo_vc_w .wi-bd__cw{margin-top:12px}
.wi-bd__cw textarea{
    width:100%;min-height:96px;padding:13px 14px;resize:vertical;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);font:inherit;font-size:13.5px;line-height:1.8;
}
.wi-bd__cw textarea:focus{outline:0;border-color:var(--wi-ink)}
.wi-bd__ccnt{display:block;margin-top:6px;font-size:11.5px;font-weight:400;color:var(--wi-faint);text-align:right}
.wi-bd__cwfoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.wi-bd__cwinfo{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 200px}
.wi-bd__cwinfo .wi-input{flex:1 1 130px;width:auto}
.wi-bd__cwact{display:flex;align-items:center;gap:14px;margin-left:auto}

/* ── 글쓰기 ──────────────────────────────────────────────────────────── */
.wi-bd__form{display:grid;gap:clamp(18px,2vw,24px)}
.wi-bd__lab{display:block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:0.08em;color:var(--wi-faint)}
.wi-bd__lab em{font-style:normal;color:var(--wi-accent);margin-left:2px}
.wi-bd__f{position:relative}
.wi-bd__f select{width:100%;max-width:280px;height:44px;padding:0 34px 0 14px;font-size:13.5px}
.wi-bd__f .wi-input{height:44px;font-size:13.5px}
.wi-bd__grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.wi-bd__opts{display:flex;flex-wrap:wrap;gap:8px 20px}
.wi-bd__links{display:grid;gap:8px}
.wi-bd__link{display:flex;align-items:center;gap:10px}
.wi-bd__link label{display:inline-flex;color:var(--wi-faint)}
.wi-bd__files{display:grid;gap:10px}
.wi-bd__file{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wi-bd__file input[type=file]{font-size:12.5px;color:var(--wi-mute);flex:1 1 200px}
.wi-bd__file .wi-input{flex:1 1 200px}
.wi-bd__help{margin-top:7px;font-size:11.5px;line-height:1.7;color:var(--wi-faint)}
.wi-bd__wfoot{margin-top:clamp(26px,3vw,38px);display:flex;justify-content:center;gap:8px}
.wi-bd__wfoot .wi-btn{min-width:130px}
/* 에디터 — 코어가 iframe/textarea 를 심는다. 폭만 맞춰 준다 */
.wi-bd--write .wr_content textarea{
    width:100%;min-height:280px;padding:14px;resize:vertical;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:var(--wi-surface);font:inherit;font-size:14px;line-height:1.85;
}
.wi-bd--write .wr_content textarea:focus{outline:0;border-color:var(--wi-ink)}
.wi-bd__autosave{
    display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:20;
    width:min(340px,100%);padding:14px;border:1px solid var(--wi-line-2);
    border-radius:var(--wi-r-box);background:var(--wi-surface);box-shadow:0 12px 30px rgba(34,28,27,.12);
}
.wi-bd__autosave strong{display:block;margin-bottom:8px;font-size:12px;color:var(--wi-faint)}
.wi-bd__autosave ul{display:grid;gap:6px;font-size:12.5px;max-height:220px;overflow-y:auto}
.wi-bd__autosave ul a{color:var(--wi-ink-soft)}
.wi-bd__autosave ul a:hover{color:var(--wi-ink)}
.wi-bd__autosave > div{margin-top:10px;text-align:right}
#autosave_wrapper #btn_autosave{margin-top:8px}

/* ── 좁은 화면 — 표를 카드처럼 ──────────────────────────────────────── */
@media (max-width:760px){
    .wi-bd__tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
    .wi-bd__tbl tbody td{padding:0;border:0}
    .wi-bd-c-nm,.wi-bd-c-dt,.wi-bd-c-hit,.wi-bd-c-gd{display:none}
    .wi-bd__tbl tbody tr{display:flex;align-items:flex-start;gap:10px;padding:14px 2px;border-bottom:1px solid var(--wi-line-3)}
    .wi-bd__tbl tbody tr:hover td{background:none}
    .wi-bd-c-no{width:auto;flex:0 0 auto;padding-top:2px!important}
    .wi-bd-c-sj{flex:1 1 auto;min-width:0}
    .wi-bd__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;color:var(--wi-faint)}
    .wi-bd__empty{padding:60px 0!important}
    .wi-bd__vacts .wi-bd__opt{margin-left:0}
    .wi-bd__cwact{margin-left:0;width:100%;justify-content:space-between}
}

/* ── 8-24 갤러리 게시판 (skin/board/wi_bd_gal) ──────────────────────────
 * 목록만 다르다 — 보기·쓰기·댓글은 위 wi_bd 것을 그대로 부른다.
 * 카드 결은 상품 카드(.wi-card)와 같지만 클래스를 따로 쓴다: 상품 카드에는
 * 가격·배지 규칙이 붙어 있어 그대로 쓰면 서로 걸린다 → [[theme-global-variable-collision]] */
.wi-bd__gal{
    display:grid;gap:clamp(16px,2vw,28px) clamp(14px,1.6vw,22px);
    grid-template-columns:repeat(var(--wi-cols,4),minmax(0,1fr));
    margin-top:clamp(20px,2.4vw,30px);
}
.wi-bd__gcard{position:relative;min-width:0}
.wi-bd__gchk{position:absolute;left:10px;top:10px;z-index:2}
.wi-bd__gchk input{
    width:18px;height:18px;margin:0;accent-color:var(--wi-ink);cursor:pointer;
    background:var(--wi-surface);border-radius:2px;
}
.wi-bd__gthumb{
    display:flex;align-items:center;justify-content:center;position:relative;
    aspect-ratio:4/3;overflow:hidden;border-radius:var(--wi-r-img);background:var(--wi-tint-2);
}
.wi-bd__gthumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.wi-bd__gcard:hover .wi-bd__gthumb img{transform:scale(1.05)}
.wi-bd__gnone{font-size:12px;letter-spacing:0.08em;color:var(--wi-faint-2)}
.wi-bd__gtag{position:absolute;left:12px;top:12px;background:rgba(34,28,27,.86)}
.wi-bd__gbody{padding-top:14px;display:grid;gap:8px;justify-items:start}
.wi-bd__gtit{
    display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;
    font-size:14.5px;font-weight:600;letter-spacing:-0.02em;line-height:1.45;color:var(--wi-ink);
}
.wi-bd__gtit:hover{text-decoration:underline;text-underline-offset:3px}
.wi-bd__gmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;color:var(--wi-faint)}
.wi-bd__gal .wi-bd__empty{grid-column:1 / -1;padding:76px 0;text-align:center;color:var(--wi-faint);font-size:14px}
.wi-bd__gcard.wi-is-current .wi-bd__gtit{color:var(--wi-accent)}
.wi-bd__allchk{font-size:12.5px;color:var(--wi-mute);margin-right:auto}

@media (max-width:900px){ .wi-bd__gal{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){ .wi-bd__gal{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── 8-25 설문조사 결과 (skin/poll/shop_basic/poll_result.skin.php) ─────
 * 모달 안에 심긴다(.new_win). 스킨 style.css 는 지웠다.
 * ⚠️ 코어 복사본에는 "현재 가장 높은 득표율 500표 90%" 라는 **가짜 줄**이
 *    박혀 있었다 — 지우고 실제 1위에 .is-top 을 붙인다.               */
.wi-pollr__sec + .wi-pollr__sec{margin-top:clamp(24px,3vw,34px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--wi-line)}
.wi-pollr__q{font-size:16px;font-weight:700;letter-spacing:-0.02em;line-height:1.5}
.wi-pollr__all{margin-top:6px;font-size:12.5px;color:var(--wi-faint)}
.wi-pollr__all b{color:var(--wi-ink);font-weight:600}
.wi-pollr__sectit{font-size:11.5px;font-weight:700;letter-spacing:0.08em;color:var(--wi-faint);margin-bottom:12px}
.wi-pollr__list{display:grid;gap:14px;margin-top:18px}
.wi-pollr__label{display:block;font-size:13.5px;color:var(--wi-ink-soft)}
.wi-pollr__bar{height:8px;margin-top:7px;border-radius:var(--wi-r-pill);background:var(--wi-tint-2);overflow:hidden}
.wi-pollr__bar > span{display:block;height:100%;border-radius:inherit;background:var(--wi-line-4);transition:width .5s ease}
.wi-pollr__num{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:12px;color:var(--wi-faint)}
.wi-pollr__num strong{font-weight:600;color:var(--wi-ink-soft)}
/* 1위 — 색으로만 알린다(글자를 덧붙이지 않는다) */
.wi-pollr__list .is-top .wi-pollr__label{font-weight:600;color:var(--wi-ink)}
.wi-pollr__list .is-top .wi-pollr__bar > span{background:var(--wi-accent)}
.wi-pollr__list .is-top .wi-pollr__num strong{color:var(--wi-accent)}

.wi-pollr__ideas{display:grid;gap:12px}
.wi-pollr__ideas li{padding:12px 14px;border-radius:var(--wi-r-box);background:var(--wi-tint)}
.wi-pollr__ihead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;color:var(--wi-faint)}
.wi-pollr__ihead b{font-size:12.5px;font-weight:600;color:var(--wi-ink-soft)}
.wi-pollr__idel{margin-left:auto}
.wi-pollr__ideas p{margin-top:6px;font-size:13.5px;line-height:1.7;color:var(--wi-ink-soft)}
.wi-pollr__none{padding:26px 0;text-align:center;font-size:13px;color:var(--wi-faint)}
.wi-pollr__form{display:grid;gap:9px;margin-top:16px}
.wi-pollr__form h3{font-size:12.5px;font-weight:600;color:var(--wi-ink-soft)}
.wi-pollr__form .wi-input{height:44px;font-size:13.5px}
.wi-pollr__form .wi-btn{height:44px;justify-self:start;padding:0 22px}
.wi-pollr__oth{display:grid;gap:8px;font-size:13px}
.wi-pollr__oth li{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.wi-pollr__oth a{flex:1 1 200px;min-width:0;color:var(--wi-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-pollr__oth a:hover{color:var(--wi-ink)}
.wi-pollr__oth span{font-size:11.5px;color:var(--wi-faint-2)}

/* ── 8-26 1:1문의 (skin/qa/wi_qa) ───────────────────────────────────────
 * 목록·보기·쓰기 뼈대는 게시판(.wi-bd)과 같은 것을 쓴다 — 두 화면이 달라
 * 보이면 안 된다. 여기서는 **문의에만 있는 것**만 더한다: 답변 상태 · 답변 블록.
 * ⚠️ qa_skin 도 `theme/` 로 시작해야 이 스킨이 잡힌다(get_skin_path).        */
.wi-qa-c-st{width:92px;text-align:center}
.wi-qa-st{
    display:inline-flex;align-items:center;height:24px;padding:0 10px;
    border-radius:var(--wi-r-pill);background:var(--wi-tint-3);
    font-size:11.5px;font-weight:600;color:var(--wi-mute);white-space:nowrap;
}
.wi-qa-st.is-done{background:var(--wi-ink);color:#fff}

/* 답변 — 질문 아래 한 덩이 */
.wi-qa__ans{
    margin-top:clamp(24px,3vw,36px);padding:clamp(20px,2.4vw,28px);
    border-radius:var(--wi-r-box);background:var(--wi-tint);
}
.wi-qa__anshead{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wi-qa__anstag{
    display:inline-flex;align-items:center;height:24px;padding:0 11px;
    border-radius:var(--wi-r-pill);background:var(--wi-accent);color:#fff;
    font-size:11px;font-weight:700;letter-spacing:0.06em;
}
.wi-qa__anshead h2{font-size:15px;font-weight:700;letter-spacing:-0.02em}
.wi-qa__anshead time{font-size:11.5px;color:var(--wi-faint)}
.wi-qa__ansopt{margin-left:auto}
.wi-qa__ans #ans_con{margin-top:14px;font-size:14px}
.wi-qa__addq{margin-top:16px;display:flex;justify-content:center}

/* 답변등록 폼 · 준비 중 안내 */
.wi-qa__ansform{margin-top:clamp(24px,3vw,36px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--wi-line)}
.wi-qa__wait{
    padding:34px 20px;text-align:center;border-radius:var(--wi-r-box);
    background:var(--wi-tint);font-size:13.5px;color:var(--wi-mute);
}

/* 연관 질문 */
.wi-qa__rel{display:grid;gap:9px;font-size:13px}
.wi-qa__rel li{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.wi-qa__rel a{flex:1 1 200px;min-width:0;color:var(--wi-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-qa__rel a:hover{color:var(--wi-ink)}
.wi-qa__rel .wi-num{font-size:11.5px;color:var(--wi-faint-2)}

.wi-qa__nb{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(24px,3vw,34px)}
.wi-bd__wtit{margin-top:14px;font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-0.035em}
.wi-bd__wtit + .wi-bd__help{margin-bottom:clamp(20px,2.4vw,30px);font-size:12.5px}

/* ── 8-27 내용 페이지 · FAQ · 게시판 통합검색 ───────────────────────────
 * 셋 다 스킨 이름이 `theme/basic` 이라 **테마 폴더의 basic** 을 쓴다
 * (co_skin · cf_faq_skin · cf_search_skin). 코어 복사본이 아니다.
 * ⚠️ 내용 페이지의 `#ctt_con` 을 지우면 주문서 약관 모달이 깨진다 —
 *    js/wi-order.js 가 그 덩어리만 떼어 모달에 담는다.                    */

/* ── 내용 페이지 (회사소개 · 이용약관 · 개인정보처리방침) ── */
.wi-ctt{max-width:76ch;margin-inline:auto;padding-bottom:clamp(40px,5vw,72px)}
.wi-ctt__head{margin-bottom:clamp(24px,3vw,36px)}
.wi-ctt__head h1{margin-top:12px;font-size:clamp(26px,2.8vw,38px);font-weight:700;letter-spacing:-0.035em}
.wi-ctt__con{font-size:14.5px;line-height:1.95;color:var(--wi-ink-soft);word-break:keep-all}
.wi-ctt__con p{margin:0 0 16px}
.wi-ctt__con h2{margin:34px 0 12px;font-size:16px;font-weight:700;color:var(--wi-ink);letter-spacing:-0.02em}
.wi-ctt__con h3{margin:24px 0 10px;font-size:14.5px;font-weight:700;color:var(--wi-ink)}
.wi-ctt__con ul,.wi-ctt__con ol{margin:0 0 16px;padding-left:20px;list-style:revert}
.wi-ctt__con li{margin-bottom:5px}
.wi-ctt__con a{color:var(--wi-accent);text-decoration:underline;text-underline-offset:3px}
.wi-ctt__con img{max-width:100%;height:auto;border-radius:var(--wi-r-img)}
.wi-ctt__con table{width:100%;margin:0 0 18px;border-collapse:collapse;font-size:13px}
.wi-ctt__con th,.wi-ctt__con td{padding:10px 12px;border:1px solid var(--wi-line);text-align:left;vertical-align:top}
.wi-ctt__con th{background:var(--wi-tint);font-weight:700;color:var(--wi-ink)}
/* 모달 안에 담길 때는 바깥 여백을 쓰지 않는다(.wi-doc 이 크기를 잡는다) */
.wi-doc .wi-ctt__con{font-size:13.5px}

/* ── 자주 묻는 질문 ── */
.wi-faq{padding-bottom:clamp(40px,5vw,72px)}
.wi-faq__sch{display:flex;align-items:center}
.wi-faq__sch .wi-bd__schbar{width:min(280px,100%);height:38px}
.wi-faq__img{margin-bottom:20px}
.wi-faq__img img{max-width:100%;height:auto;border-radius:var(--wi-r-img)}
.wi-faq__html{margin:18px 0;font-size:13.5px;line-height:1.85;color:var(--wi-ink-soft)}

.wi-faq__list{margin-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--wi-line-2)}
.wi-faq__list details{border-bottom:1px solid var(--wi-line-3)}
.wi-faq__list summary{
    display:flex;align-items:flex-start;gap:12px;padding:19px 40px 19px 2px;
    position:relative;cursor:pointer;list-style:none;
}
.wi-faq__list summary::-webkit-details-marker{display:none}
/* 펼침 표시 — 오른쪽 끝의 + 를 열면 − 로 */
.wi-faq__list summary::after{
    content:'';position:absolute;right:8px;top:50%;width:11px;height:11px;
    background:
        linear-gradient(var(--wi-faint),var(--wi-faint)) center/11px 1px no-repeat,
        linear-gradient(var(--wi-faint),var(--wi-faint)) center/1px 11px no-repeat;
    transform:translateY(-50%);transition:transform .2s,background-size .2s;
}
.wi-faq__list details[open] summary::after{background-size:11px 1px,1px 0;transform:translateY(-50%) rotate(180deg)}
.wi-faq__list summary:hover .wi-faq__tit{color:var(--wi-ink)}
.wi-faq__q{
    flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:var(--wi-r-pill);
    background:var(--wi-tint-3);color:var(--wi-accent);
    font-family:var(--wi-display);font-size:13px;font-weight:700;
}
.wi-faq__tit{font-size:14.5px;font-weight:600;letter-spacing:-0.02em;color:var(--wi-ink-soft);line-height:1.55}
.wi-faq__a{display:flex;gap:12px;padding:0 8px 22px 2px}
.wi-faq__amark{
    flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:var(--wi-r-pill);
    background:var(--wi-ink);color:#fff;
    font-family:var(--wi-display);font-size:13px;font-weight:700;
}
.wi-faq__a > div{font-size:13.5px;line-height:1.9;color:var(--wi-mute);word-break:keep-all}
.wi-faq__a p{margin:0 0 10px}
.wi-faq__a ul,.wi-faq__a ol{margin:0 0 10px;padding-left:18px;list-style:revert}
.wi-faq__a img{max-width:100%;height:auto;border-radius:var(--wi-r-img)}

.wi-faq__none{
    margin-top:clamp(20px,2.4vw,30px);padding:clamp(44px,6vw,76px) 20px;text-align:center;
    border:1px solid var(--wi-line);border-radius:var(--wi-r-box);background:var(--wi-surface);
}
.wi-faq__none p{font-size:15px;color:var(--wi-ink-soft)}
.wi-faq__none b{color:var(--wi-accent)}
.wi-faq__none-sub{margin-top:8px;font-size:13px;color:var(--wi-faint)}
.wi-faq__none .wi-btn{margin-top:24px}
.wi-faq__foot{
    margin-top:clamp(34px,4vw,54px);padding:clamp(22px,2.6vw,30px);text-align:center;
    border-radius:var(--wi-r-box);background:var(--wi-tint);
}
.wi-faq__foot p{font-size:13.5px;color:var(--wi-ink-soft);margin-bottom:14px}

/* ── 게시판 통합검색 ── */
.wi-gsch{padding-bottom:clamp(40px,5vw,72px)}
.wi-gsch__form{
    padding:clamp(18px,2vw,24px);border:1px solid var(--wi-line);
    border-radius:var(--wi-r-box);background:var(--wi-surface);
}
.wi-gsch__bar .wi-bd__schbar{height:48px;border-radius:var(--wi-r-pill);background:var(--wi-tint);padding-left:18px}
.wi-gsch__bar .wi-bd__schbar:focus-within{background:var(--wi-surface)}
.wi-gsch__bar input{font-size:15px}
.wi-gsch__opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px}
.wi-gsch__opt{display:inline-flex;align-items:center;gap:8px}
.wi-gsch__opt select{height:38px;padding:0 30px 0 13px;font-size:12.5px}
.wi-gsch__sop .wi-bd__lab{margin-bottom:0;font-size:11px}
/* 게시판 고르개 — 코어가 만든 <a><strong>이름</strong><span class=cnt_cmt>수</span></a>.
   현재 고른 것은 코어가 `class=sch_on` 으로 알려 준다(칩의 #bo_cate_on 과 같은 자리). */
.wi-gsch__boards{margin:clamp(20px,2.4vw,30px) 0 0}
.wi-gsch__boards ul{margin-bottom:0}
.wi-gsch__boards .cnt_cmt{margin-left:7px;color:var(--wi-faint);font-variant-numeric:tabular-nums}
.wi-gsch__boards a.sch_on{border-color:var(--wi-ink);background:var(--wi-ink);color:#fff}
.wi-gsch__boards a.sch_on .cnt_cmt{color:rgba(255,255,255,.66)}
.wi-gsch__res{margin-top:clamp(18px,2.2vw,26px);display:grid;gap:clamp(24px,3vw,38px)}
.wi-gsch__group h2{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;
    padding-bottom:11px;border-bottom:1px solid var(--wi-line-2);
    font-size:13px;font-weight:700;letter-spacing:-0.02em;
}
.wi-gsch__group h2 .wi-link{margin-left:auto}
.wi-gsch__group ul{display:grid;gap:2px;margin-top:6px}
.wi-gsch__group li{padding:15px 2px;border-bottom:1px solid var(--wi-line-3)}
.wi-gsch__tit{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;letter-spacing:-0.02em;color:var(--wi-ink)}
.wi-gsch__tit:hover{text-decoration:underline;text-underline-offset:3px}
.wi-gsch__cmt{display:inline-flex;color:var(--wi-accent)}
.wi-gsch__body{
    margin-top:6px;font-size:13px;line-height:1.75;color:var(--wi-mute);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wi-gsch__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;color:var(--wi-faint)}

/* ── 9-2 Font Awesome 대체 ──────────────────────────────────────────────
 * 이 테마는 아이콘을 전부 인라인 SVG 로 그린다. 그런데 **코어가 직접 뱉는**
 * `<i class="fa fa-xxx">` 가 몇 군데 남아 있다 — 상품상세 옵션 줄 삭제
 * (js/shop.override.js) · 팝업레이어 닫기(bbs/newwin.inc.php) 같은 자리다.
 * 그것 때문에 Font Awesome 을 통째로(css 36KB + woff2 80KB) 부르고 있었다.
 *
 * 자리마다 코어를 고칠 수는 없으니 **글꼴 대신 마스크로 그린다** —
 * 실제로 쓰이는 글리프만 SVG data URI 로 두고 currentColor 로 칠한다.
 * 12KB 로 116KB 를 대신한다 → [[fix-the-tool-not-the-rule]]
 *
 * ⚠️ 여기 없는 fa 클래스는 **아무것도 안 보인다**(네모가 남지 않게 배경을
 *    글리프가 정의된 것에만 준다). 새 화면에서 fa 아이콘이 안 보이면
 *    그 글리프를 여기에 한 줄 추가하면 된다.                            */
i.fa,span.fa{display:inline-block;width:1em;height:1em;vertical-align:-0.125em}
.fa-fw{width:1.28em}
.fa-lg{font-size:1.33em}
/* fa-spin 은 관리 톱니(.btn_admin)에만 쓰이고 그건 감춰 둔다 — 애니메이션 없음 */
.fa-angle-down,.fa-chevron-circle-down,.fa-angle-left,.fa-angle-right,.fa-angle-up,.fa-bookmark,.fa-camera,.fa-caret-down,.fa-caret-up,.fa-check-circle,.fa-chevron-left,.fa-chevron-right,.fa-clock-o,.fa-cog,.fa-commenting-o,.fa-download,.fa-ellipsis-v,.fa-envelope,.fa-envelope-o,.fa-eye,.fa-heart,.fa-heart-o,.fa-link,.fa-list,.fa-list-ul,.fa-lock,.fa-minus,.fa-pencil,.fa-plus,.fa-question-circle-o,.fa-rss,.fa-search,.fa-share-alt,.fa-shopping-bag,.fa-times,.fa-times-circle,.fa-trash-o,.fa-user{
    background-color:currentColor;
    -webkit-mask:var(--wi-fa) center/contain no-repeat;mask:var(--wi-fa) center/contain no-repeat;
}
.fa-angle-down{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 6.2 3.6 3.6 3.6-3.6'/%3E%3C/svg%3E")}
.fa-angle-left{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.8 3.6 6.2 8l3.6 4.4'/%3E%3C/svg%3E")}
.fa-angle-right{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.6 9.8 8l-3.6 4.4'/%3E%3C/svg%3E")}
.fa-angle-up{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 9.8 3.6-3.6 3.6 3.6'/%3E%3C/svg%3E")}
.fa-bookmark{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 2.8h7.6v10.4L8 10.6l-3.8 2.6z'/%3E%3C/svg%3E")}
.fa-camera{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.2' y='4.6' width='11.6' height='8.2' rx='1.6'/%3E%3Ccircle cx='8' cy='8.7' r='2.4'/%3E%3Cpath d='M6 4.6l.9-1.4h2.2l.9 1.4'/%3E%3C/svg%3E")}
.fa-caret-down{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 6.2h7.2L8 10.4z' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.fa-caret-up{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 9.8h7.2L8 5.6z' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.fa-check-circle{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='m5.4 8.1 1.8 1.8 3.4-3.6'/%3E%3C/svg%3E")}
.fa-chevron-left{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.8 3.6 6.2 8l3.6 4.4'/%3E%3C/svg%3E")}
.fa-chevron-right{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.6 9.8 8l-3.6 4.4'/%3E%3C/svg%3E")}
.fa-clock-o{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.6'/%3E%3Cpath d='M8 4.8V8l2.2 1.4'/%3E%3C/svg%3E")}
.fa-cog{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='2.2'/%3E%3Cpath d='M8 1.8v1.6M8 12.6v1.6M14.2 8h-1.6M3.4 8H1.8m10.2-4.2-1.1 1.1M5.5 10.5l-1.1 1.1m0-7.8 1.1 1.1m5 5 1.1 1.1'/%3E%3C/svg%3E")}
.fa-commenting-o{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 9.2a1.6 1.6 0 0 1-1.6 1.6H6l-3.2 2.4V4.4A1.6 1.6 0 0 1 4.4 2.8h7.2a1.6 1.6 0 0 1 1.6 1.6z'/%3E%3C/svg%3E")}
.fa-download{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.8v7.4M5 7.6 8 10.6l3-3M3.2 13.2h9.6'/%3E%3C/svg%3E")}
.fa-ellipsis-v{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='3.4' r='1.1' fill='%23000' stroke='none'/%3E%3Ccircle cx='8' cy='8' r='1.1' fill='%23000' stroke='none'/%3E%3Ccircle cx='8' cy='12.6' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.fa-envelope{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='4' width='11.2' height='8' rx='1.4'/%3E%3Cpath d='m2.8 4.8 5.2 3.8 5.2-3.8'/%3E%3C/svg%3E")}
.fa-envelope-o{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='4' width='11.2' height='8' rx='1.4'/%3E%3Cpath d='m2.8 4.8 5.2 3.8 5.2-3.8'/%3E%3C/svg%3E")}
.fa-eye{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 8S4.4 4 8 4s6.2 4 6.2 4-2.6 4-6.2 4S1.8 8 1.8 8Z'/%3E%3Ccircle cx='8' cy='8' r='1.8'/%3E%3C/svg%3E")}
.fa-heart{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13.4S2.6 10.1 2.6 6.5a2.9 2.9 0 0 1 5.4-1.6 2.9 2.9 0 0 1 5.4 1.6c0 3.6-5.4 6.9-5.4 6.9Z' fill='%23000'/%3E%3C/svg%3E")}
.fa-heart-o{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13.4S2.6 10.1 2.6 6.5a2.9 2.9 0 0 1 5.4-1.6 2.9 2.9 0 0 1 5.4 1.6c0 3.6-5.4 6.9-5.4 6.9Z'/%3E%3C/svg%3E")}
.fa-link{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 9.2a2.5 2.5 0 0 0 3.5 0l1.8-1.8a2.5 2.5 0 0 0-3.5-3.5l-.9.9'/%3E%3Cpath d='M9.2 6.8a2.5 2.5 0 0 0-3.5 0L3.9 8.6a2.5 2.5 0 0 0 3.5 3.5l.9-.9'/%3E%3C/svg%3E")}
.fa-list{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 4.4h8M5.4 8h8M5.4 11.6h8'/%3E%3Ccircle cx='3' cy='4.4' r='.8' fill='%23000' stroke='none'/%3E%3Ccircle cx='3' cy='8' r='.8' fill='%23000' stroke='none'/%3E%3Ccircle cx='3' cy='11.6' r='.8' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.fa-list-ul{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 4.4h8M5.4 8h8M5.4 11.6h8'/%3E%3Ccircle cx='3' cy='4.4' r='.8' fill='%23000' stroke='none'/%3E%3Ccircle cx='3' cy='8' r='.8' fill='%23000' stroke='none'/%3E%3Ccircle cx='3' cy='11.6' r='.8' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.fa-lock{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='6.9' width='9.2' height='6.6' rx='1.5'/%3E%3Cpath d='M5.9 6.9V5.1a2.1 2.1 0 0 1 4.2 0v1.8'/%3E%3C/svg%3E")}
.fa-minus{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 8h9.2'/%3E%3C/svg%3E")}
.fa-pencil{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.6 2.4a1.4 1.4 0 0 1 2 2L6.2 11.8l-2.7.7.7-2.7z'/%3E%3C/svg%3E")}
.fa-plus{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.4v9.2M3.4 8h9.2'/%3E%3C/svg%3E")}
.fa-question-circle-o{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='M6.4 6.3A1.7 1.7 0 0 1 9.7 6.9c0 1.1-1.7 1.3-1.7 2.3'/%3E%3Ccircle cx='8' cy='11.4' r='.7' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.fa-rss{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 3.4a9.2 9.2 0 0 1 9.2 9.2M3.4 7.4a5.2 5.2 0 0 1 5.2 5.2'/%3E%3Ccircle cx='3.9' cy='12.1' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.fa-search{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14'/%3E%3C/svg%3E")}
.fa-share-alt{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12.2' cy='3.8' r='1.8'/%3E%3Ccircle cx='3.8' cy='8' r='1.8'/%3E%3Ccircle cx='12.2' cy='12.2' r='1.8'/%3E%3Cpath d='M5.4 7.2 10.6 4.6M5.4 8.8l5.2 2.6'/%3E%3C/svg%3E")}
.fa-shopping-bag{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.4h8l-.6 8a1.4 1.4 0 0 1-1.4 1.2H6a1.4 1.4 0 0 1-1.4-1.2z'/%3E%3Cpath d='M6.2 5.4V4.2a1.8 1.8 0 0 1 3.6 0v1.2'/%3E%3C/svg%3E")}
.fa-times{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 4 8 8M12 4l-8 8'/%3E%3C/svg%3E")}
.fa-times-circle{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='m5.9 5.9 4.2 4.2M10.1 5.9l-4.2 4.2'/%3E%3C/svg%3E")}
.fa-trash-o{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 4.6h9.2M6.4 4.6V3.4h3.2v1.2M4.8 4.6l.6 8h5.2l.6-8'/%3E%3C/svg%3E")}
.fa-user{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5.6' r='2.6'/%3E%3Cpath d='M3.4 13.4a4.6 4.6 0 0 1 9.2 0'/%3E%3C/svg%3E")}
.fa-chevron-circle-down{--wi-fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='m5.6 6.8 2.4 2.4 2.4-2.4'/%3E%3C/svg%3E")}

/* ── 8-28 전체 새글 · 현재 접속자 ────────────────────────────────────────
 * 이 테마는 두 화면을 어디서도 걸지 않는다(커뮤니티 index 를 쓰지 않는다).
 * 주소로만 닿지만, 켜졌을 때 날것으로 보이지 않게 게시판(.wi-bd) 옷을 나눠 쓴다.
 * 스킨 이름은 cf_new_skin · cf_connect_skin 의 `theme/basic` 이다.            */
.wi-new-c-gr,.wi-new-c-bo{width:130px}
.wi-bd--new .wi-bd__acts{margin-left:0;width:100%}
.wi-bd--new .wi-bd__schbar{flex:1 1 220px;height:38px}
.wi-bd--new .wi-gsch__opt select{height:38px}

.wi-crt__list{display:grid;gap:2px;margin-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--wi-line-2)}
.wi-crt__list li{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--wi-line-3)}
.wi-crt__no{flex:0 0 32px;font-size:12px;color:var(--wi-faint-2);text-align:center}
.wi-crt__pf{flex:0 0 auto}
.wi-crt__pf img{width:30px;height:30px;border-radius:var(--wi-r-pill);object-fit:cover}
.wi-crt__pf:empty{display:none}
.wi-crt__info{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0}
.wi-crt__name{font-size:13.5px;font-weight:600;color:var(--wi-ink-soft)}
.wi-crt__lct{font-size:12px;color:var(--wi-faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-crt__lct a{color:inherit}
.wi-crt__lct a:hover{color:var(--wi-ink)}

/* ── 8-8b 개인결제 (shop/personalpayform.php) ────────────────────────────
 * 관리자가 링크를 발행해 특정 고객에게 보내는 **단건 결제** 화면이다.
 * 코어 personalpayform.sub.php 가 마크업을 직접 뱉고 테마 훅도 스킨도 없다.
 *
 * ⚠️ 처음엔 주문서 옷(.wi-is-order)을 그대로 씌웠는데, 이 화면의 주인공인
 *    **금액이 본문 글자 크기로 묻히고** 읽는 정보와 입력칸이 같은 리듬이라
 *    급조한 것처럼 보였다(사용자 지적 2026-08-25). 결제 링크 화면답게
 *    **가운데 좁은 한 장**으로 다시 짰다:
 *      머리(무엇을·얼마를) → 받는 분 → 결제수단 → 결제 버튼.
 *
 * 청구 카드(상세내용·금액)는 shop/shop.head.php 가 그린다 — 코어 표에도 같은
 * 내용이 있어서 **그쪽 줄은 아래에서 감춘다**(라벨·입력칸이 있는 줄만 남긴다).
 * 코어 표는 줄 개수가 상황에 따라 달라지므로(상세내용이 없으면 두 줄이 통째로
 * 빠진다) nth-child 로 짚지 않고 `:has()` 로 "무엇이 든 줄인지"를 본다.        */
/* ⚠️ `.wi-main` 자체에 max-width 를 다시 걸지 않는다 → [[wi-main-is-the-width]].
   좁히는 것은 이 화면이 그리는 세 덩어리뿐이다. */
.wi-pp__head,.wi-pp__bill,
.wi-is-pp #forderform{max-width:600px;margin-left:auto;margin-right:auto}

/* ── 머리 + 청구 카드 (shop.head.php 가 그린다) ── */
.wi-pp__head{text-align:center;margin-bottom:clamp(22px,2.6vw,30px)}
.wi-pp__head h1{margin-top:12px;font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-0.035em}
.wi-pp__sub{margin-top:12px;font-size:13px;line-height:1.8;color:var(--wi-mute);text-wrap:pretty}
.wi-pp__sub b{font-weight:600;color:var(--wi-ink)}
.wi-pp__bill{
    padding:clamp(24px,3vw,32px);text-align:center;
    border-radius:var(--wi-r-box);background:var(--wi-tint);
}
.wi-pp__what{font-size:13.5px;line-height:1.7;color:var(--wi-ink-soft)}
.wi-pp__what p{margin:0}
.wi-pp__amt{margin-top:10px;font-size:14px;color:var(--wi-mute)}
.wi-pp__amt b{
    font-size:clamp(30px,3.6vw,40px);font-weight:800;letter-spacing:-0.04em;
    color:var(--wi-ink);margin-right:3px;
}

/* ── 카드 두 장 ── */
.wi-is-pp .sod_left,.wi-is-pp .sod_right{display:block}
.wi-is-pp .sod_left,
.wi-is-pp #personal_pay{
    margin-top:clamp(14px,1.8vw,20px);padding:clamp(20px,2.4vw,26px);
    border:1px solid var(--wi-line);border-radius:var(--wi-r-box);background:var(--wi-surface);
}
/* 코어 제목 두 개 — "개인결제정보" 는 위 청구 카드가 이미 말했다. 이 카드에
   실제로 들어 있는 것은 **받는 분 연락처**뿐이라 이름을 바꿔 준다.
   (텍스트 노드는 CSS 로 못 지우니 통째로 감추고 카드에 제 이름을 붙인다) */
.wi-is-pp .sod_left > h2{display:none}
.wi-is-pp .sod_left::before{content:'받는 분'}
.wi-is-pp #personal_pay > h2{margin-bottom:0}
.wi-is-pp .sod_left::before,
.wi-is-pp #personal_pay > h2{
    display:block;margin-bottom:16px;
    font-size:11.5px;font-weight:700;letter-spacing:0.1em;color:var(--wi-faint);
}

/* ── 표 — 라벨 줄과 값 줄이 번갈아 온다(열 머리글 방식) ── */
.wi-is-pp .tbl_frm01 tbody{display:block}
/* 라벨도 입력칸도 없는 줄 = 상세내용·결제금액. 위 청구 카드가 대신한다 */
.wi-is-pp .tbl_frm01 tr:not(:has(label)):not(:has(input)){display:none}
/* ⚠️ 라벨 줄과 값 줄이 **따로 있는** 표라, auto-fit 으로 접으면 좁은 화면에서
   둘이 서로 다른 칸 수가 되어 "이름·휴대폰" 라벨 둘이 붙고 그 아래 입력칸
   둘이 따로 쌓인다(390px 실측). **칸 수를 고정 2열로 못 박고**, 통째로
   쓰는 칸은 코어가 이미 달아 둔 colspan=2 로 짚는다. */
.wi-is-pp .tbl_frm01 tr{
    display:grid;gap:6px 14px;flex-direction:unset;
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.wi-is-pp .tbl_frm01 th[colspan="2"],
.wi-is-pp .tbl_frm01 td[colspan="2"]{grid-column:1 / -1}
.wi-is-pp .tbl_frm01 tr:has(input){margin-bottom:14px}
.wi-is-pp .tbl_frm01 tr:has(input):last-child{margin-bottom:0}
/* 셋 다 코어가 required 로 받는다 — 표시를 해 준다 */
.wi-is-pp .tbl_frm01 th:has(label)::after{content:'*';color:var(--wi-accent);margin-left:3px}

/* ── 결제수단 — 코어는 라디오를 ul.pay_way 안에 넣는다 ── */
.wi-is-pp #sod_frm_paysel{display:block}
.wi-is-pp .pay_way{display:grid;gap:8px}
@media (min-width:520px){ .wi-is-pp .pay_way{grid-template-columns:1fr 1fr} }
.wi-is-pp .pay_way li{display:block;min-width:0}
.wi-is-pp .pay_way .lb_icon{
    display:flex;align-items:center;gap:10px;width:100%;min-height:54px;
    padding:0 16px;font-size:13.5px;
}
/* 고를 수 있다는 것이 보여야 한다 — 코어가 넣어 둔 빈 <span> 을 동그라미로 쓴다 */
.wi-is-pp .pay_way .lb_icon > span{
    flex:0 0 auto;width:17px;height:17px;border-radius:50%;
    border:1px solid var(--wi-line-4);background:var(--wi-surface);transition:border .15s;
}
.wi-is-pp .pay_way input:checked + .lb_icon > span{border:5px solid var(--wi-ink)}

/* ── 결제 버튼 ── */
.wi-is-pp #display_pay_button{
    display:grid;gap:10px;margin-top:clamp(20px,2.4vw,26px);
    padding-top:clamp(18px,2.2vw,24px);border-top:1px solid var(--wi-line);
}
.wi-is-pp #display_pay_button .btn_submit{
    height:54px;border:0;border-radius:var(--wi-r-btn);
    background:var(--wi-ink);color:#fff;font-size:15px;font-weight:600;cursor:pointer;
}
.wi-is-pp #display_pay_button .btn_submit:hover{background:#000}
.wi-is-pp #display_pay_button .btn01{
    justify-self:center;font-size:12.5px;color:var(--wi-mute);
    text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--wi-line-4);
}
.wi-is-pp #display_pay_button .btn01:hover{color:var(--wi-ink);text-decoration-color:currentColor}
.wi-is-pp #display_pay_process{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-size:13px;color:var(--wi-mute)}

/* ── 8-8c 개인결제 목록 (shop/personalpay.php) ───────────────────────────
 * 관리자가 만들어 둔 결제 건 목록. 상품이 아니라 청구서라 상품 카드를 쓰지
 * 않는다 — 이름 · 금액 · [결제하기] 한 줄이면 된다.                        */
.wi-pplist{max-width:720px;margin:0 auto;padding-bottom:clamp(40px,5vw,72px)}
.wi-pplist .wi-bd__head{text-align:center}
.wi-pplist__list{display:grid;gap:10px;margin-top:clamp(20px,2.4vw,30px)}
.wi-pplist__list li{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
    padding:clamp(16px,2vw,20px);border:1px solid var(--wi-line);
    border-radius:var(--wi-r-box);background:var(--wi-surface);
}
.wi-pplist__who{flex:1 1 200px;min-width:0;display:grid;gap:4px}
.wi-pplist__who b{font-size:14.5px;font-weight:600;letter-spacing:-0.02em}
.wi-pplist__what{font-size:12.5px;color:var(--wi-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-pplist__amt{flex:0 0 auto;font-size:13px;color:var(--wi-mute)}
.wi-pplist__amt b{font-size:18px;font-weight:800;letter-spacing:-0.03em;color:var(--wi-ink);margin-right:2px}
.wi-pplist__list .wi-btn{flex:0 0 auto;height:42px;padding:0 20px;font-size:13px}
@media (max-width:520px){
    .wi-pplist__amt{margin-left:auto}
    .wi-pplist__list .wi-btn{width:100%}
}

/* ── 8-9 모바일 주문서 (mobile/shop/orderform.sub.php) ───────────────────
 * 코어 `shop/orderform.php` 는 `is_mobile()` 로 UA 를 직접 보고, 폰이면 이
 * 테마와 무관하게 **코어 모바일 폼**을 뱉는다. 그 폼은 PC 폼과 결제 배선이
 * 아예 다르다(2단계 승인: 결제등록요청 → 주문하기). 그래서 마크업을 갈아
 * 끼우지 않고 **코어 클래스에 옷만 입힌다** — 결제 코드는 손대지 않는다.
 *
 * ⚠️ shop.head.php 가 폰에서는 `wi-is-order`·`wi-order.js` 를 붙이지 않는다
 *    (PC 마크업을 찾는 스크립트가 총액을 0원으로 만들기 때문). 그러니 여기서는
 *    `.wi-is-order` 가 아니라 **코어 모바일 폼 자신의 뿌리**로 가둔다.
 * ⚠️ 중첩이 한 겹씩 더 있다 — `.odf_list > ul > li`, `.odf_tbl > table`,
 *    `#m_sod_frm_paysel > ul > li`. 바깥에 걸면 아무것도 안 잡힌다.       */
#sod_frm.sod_frm_mobile{font-size:13.5px;line-height:1.7;color:var(--wi-ink)}
#sod_frm.sod_frm_mobile ul,
#sod_frm.sod_frm_mobile ol{list-style:none;margin:0;padding:0}
#sod_frm.sod_frm_mobile h2{
    font-size:17px;font-weight:700;letter-spacing:-0.03em;
    padding-bottom:12px;margin:34px 0 16px;border-bottom:1px solid var(--wi-ink);
}

/* 주문상품 */
#sod_frm.sod_frm_mobile .sod_list{border-top:1px solid var(--wi-line)}
/* 한 줄 = 제목(전체 폭) + 사진(왼쪽 한 칸) + 옵션·금액(오른쪽 한 칸).
   ⚠️ 코어가 사진과 옵션을 `.li_op_wr` 로 한 겹 더 싸 둔다 — 바깥 li 에 grid 를
      걸어도 그 안까지 안 닿아서, 금액 줄이 사진 **아래**로 떨어지고 사진 옆이
      통째로 빈다. `display:contents` 로 그 겹을 풀어야 한 판에 놓인다.
      (코어가 뱉는 덩어리를 감쌀 때마다 걸리는 자리다.) */
#sod_frm.sod_frm_mobile .sod_li{
    display:grid;grid-template-columns:64px minmax(0,1fr);gap:3px 13px;align-items:start;
    padding:16px 0;border-bottom:1px solid var(--wi-line);
}
#sod_frm.sod_frm_mobile .li_name{font-size:14px;font-weight:600;letter-spacing:-0.02em;margin-bottom:7px;grid-column:1 / -1}
#sod_frm.sod_frm_mobile .li_op_wr{display:contents}
#sod_frm.sod_frm_mobile .total_img{grid-column:1;grid-row:2 / span 3}
#sod_frm.sod_frm_mobile .sod_opt,
#sod_frm.sod_frm_mobile .li_mod,
#sod_frm.sod_frm_mobile .li_prqty,
#sod_frm.sod_frm_mobile .total_price{grid-column:2}
#sod_frm.sod_frm_mobile .li_mod:empty{display:none}
#sod_frm.sod_frm_mobile .total_img img{
    width:64px;height:64px;object-fit:cover;display:block;
    border:1px solid var(--wi-line);border-radius:var(--wi-r-box);
}
#sod_frm.sod_frm_mobile .sod_opt{min-width:0;font-size:12.5px;color:var(--wi-mute)}
#sod_frm.sod_frm_mobile .li_prqty{
    margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 14px;
    font-size:12px;color:var(--wi-mute);
}
#sod_frm.sod_frm_mobile .total_price{margin-top:5px;font-size:15px;font-weight:700;letter-spacing:-0.02em}

/* 합계 */
#sod_frm.sod_frm_mobile .sod_ta_wr{
    margin-top:16px;padding:clamp(16px,2vw,20px);
    border:1px solid var(--wi-line);border-radius:var(--wi-r-box);background:var(--wi-surface);
}
/* ⚠️ 칸 사이를 `column-gap` 으로 벌리면 총계 줄의 윗선이 **두 토막**으로 끊긴다
   (선을 dt·dd 각각에 그리는데 그 사이가 gap 만큼 비어 있다). 가로 간격은
   gap 이 아니라 오른쪽 칸의 padding 으로 준다 — 그래야 선이 이어진다. */
#sod_frm.sod_frm_mobile #m_sod_bsk_tot{display:grid;grid-template-columns:1fr auto;gap:9px 0;margin:0}
#sod_frm.sod_frm_mobile #m_sod_bsk_tot dt{color:var(--wi-mute);font-weight:400}
#sod_frm.sod_frm_mobile #m_sod_bsk_tot dd{margin:0;padding-left:14px;text-align:right;font-weight:600}
#sod_frm.sod_frm_mobile #m_sod_bsk_tot .sod_bsk_cnt{
    padding-top:11px;margin-top:2px;border-top:1px solid var(--wi-line);
}
#sod_frm.sod_frm_mobile #ct_tot_price{font-size:19px;font-weight:800;letter-spacing:-0.03em}

/* 입력 칸 — .odf_list 안에 <ul><li> 가 한 겹 더 있다 */
#sod_frm.sod_frm_mobile .odf_list li{margin-bottom:14px}
/* ⚠️ 라디오·체크박스 라벨은 빼야 한다 — 다 블록으로 만들면 배송지선택이
      한 줄에 하나씩 늘어선다(`.dlv_slt` · `.ad_default`). */
#sod_frm.sod_frm_mobile .odf_list > ul > li:not(.dlv_slt) > label:not(.ad_default):not(.wi-dlv-default),
#sod_frm.sod_frm_mobile .odf_list > ul > li:not(.dlv_slt) > strong{
    display:block;margin-bottom:6px;font-size:12px;font-weight:500;color:var(--wi-mute);
}
/* 기본배송지로 설정 — 체크박스 라벨은 칸 아래 한 줄로 */
/* ⚠️ 코어가 준 클래스 이름이 `ad_default` 라 **광고 차단기가 통째로 숨긴다**
   (EasyList 에 `##.ad_default` 가 있다). 확장 프로그램 규칙은 사용자 스타일시트라
   author !important 로도 못 이긴다 — js/wi-order-mobile.js 가 클래스를
   `wi-dlv-default` 로 갈아 끼운다. 여기서는 **둘 다** 받는다(스크립트가 못 돌아도
   차단기가 없는 손님에게는 보이도록). */
#sod_frm.sod_frm_mobile .odf_list label.ad_default,
#sod_frm.sod_frm_mobile .odf_list label.wi-dlv-default{
    display:inline-flex;align-items:center;margin:9px 0 0;
    font-size:12.5px;font-weight:400;color:var(--wi-mute);cursor:pointer;
}
#sod_frm.sod_frm_mobile .odf_list label.ad_default::before,
#sod_frm.sod_frm_mobile .odf_list label.wi-dlv-default::before{content:"";display:inline-block;width:6px}
#sod_frm.sod_frm_mobile .frm_input,
#sod_frm.sod_frm_mobile textarea{
    width:100%;box-sizing:border-box;height:auto;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:#fff;padding:13px 14px;font-size:14px;color:var(--wi-ink);
}
#sod_frm.sod_frm_mobile textarea{min-height:88px;line-height:1.7;resize:vertical}
#sod_frm.sod_frm_mobile .frm_input:focus,
#sod_frm.sod_frm_mobile textarea:focus{outline:0;border-color:var(--wi-ink)}
#sod_frm.sod_frm_mobile .frm_address{margin-top:7px}
#sod_frm.sod_frm_mobile .add_num{display:flex;gap:7px}
#sod_frm.sod_frm_mobile .add_num .frm_input{flex:1 1 auto;min-width:0}
#sod_frm.sod_frm_mobile .btn_frmline,
#sod_frm.sod_frm_mobile .btn_addsch{
    flex:0 0 auto;border:1px solid var(--wi-ink);background:#fff;
    border-radius:var(--wi-r-btn);padding:0 16px;font-size:12.5px;color:var(--wi-ink);cursor:pointer;
}

/* 배송지 선택 — 코어 구조는 `li.dlv_slt > strong + div(<input><label> 짝들 + #order_address)`.
   라디오를 감추고 라벨을 고르는 칩으로 쓴다(결제수단과 같은 손짓). */
#sod_frm.sod_frm_mobile .dlv_slt{margin-bottom:20px}
#sod_frm.sod_frm_mobile .dlv_slt > strong{
    display:block;margin-bottom:9px;font-size:12px;font-weight:500;color:var(--wi-mute);
}
#sod_frm.sod_frm_mobile .dlv_slt > div{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#sod_frm.sod_frm_mobile .dlv_slt input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
#sod_frm.sod_frm_mobile .dlv_slt label{
    display:inline-flex;align-items:center;margin:0;padding:10px 15px;white-space:nowrap;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);background:#fff;
    font-size:12.5px;color:var(--wi-mute);cursor:pointer;transition:border .15s,color .15s;
}
#sod_frm.sod_frm_mobile .dlv_slt input[type="radio"]:checked + label{
    border-color:var(--wi-ink);color:var(--wi-ink);font-weight:600;
}
#sod_frm.sod_frm_mobile #order_address{
    margin-left:auto;font-size:12.5px;color:var(--wi-ink);
    text-decoration:underline;text-underline-offset:3px;
}

/* 결제정보 — .odf_tbl 안은 <table><tr><th|td> 다 */
#sod_frm.sod_frm_mobile .odf_tbl table{width:100%;border-collapse:collapse}
#sod_frm.sod_frm_mobile .odf_tbl th{
    width:38%;text-align:left;vertical-align:top;padding:11px 0;
    font-weight:400;font-size:13px;color:var(--wi-mute);
}
#sod_frm.sod_frm_mobile .odf_tbl td{padding:11px 0;font-size:13px}
#sod_frm.sod_frm_mobile .odf_tbl tr + tr th,
#sod_frm.sod_frm_mobile .odf_tbl tr + tr td{border-top:1px solid var(--wi-line)}
#sod_frm.sod_frm_mobile .odf_tbl td span{font-weight:700;color:var(--wi-ink)}
/* ⚠️ 쿠폰 목록은 이 표 **안에 다시 표로** 들어온다(#od_coupon_frm · #sc_coupon_frm).
   위의 `.odf_tbl tr + tr td` 는 선택자가 더 세서(id 두 개 + 클래스) 쿠폰 칸의
   `border:0`·`padding:0` 을 이긴다 → 쿠폰 줄마다 **반쪽짜리 선**이 그어지고
   칸이 위아래로 벌어진다. 줄을 긋는 것은 쿠폰 쪽의 `tr` 규칙이니 칸은 되돌린다. */
#sod_frm.sod_frm_mobile .odf_tbl #od_coupon_frm td,
#sod_frm.sod_frm_mobile .odf_tbl #sc_coupon_frm td,
#sod_frm.sod_frm_mobile .odf_tbl #od_coupon_frm th,
#sod_frm.sod_frm_mobile .odf_tbl #sc_coupon_frm th{border-top:0;padding:0;font-size:inherit}
#sod_frm.sod_frm_mobile .cp_btn1{
    border:1px solid var(--wi-ink);background:#fff;border-radius:var(--wi-r-btn);
    padding:7px 14px;font-size:12px;color:var(--wi-ink);cursor:pointer;
}
#sod_frm.sod_frm_mobile #sod_frm_pt_alert{
    margin:14px 0 12px;font-size:12px;color:var(--wi-mute-2);line-height:1.7;
}

/* 결제수단 — grid 는 안쪽 <ul> 에 건다(#m_sod_frm_paysel 의 자식은 ul 하나뿐) */
#sod_frm.sod_frm_mobile #m_sod_frm_paysel > ul{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
#sod_frm.sod_frm_mobile #m_sod_frm_paysel > ul > li{margin:0;display:flex;min-width:0}
#sod_frm.sod_frm_mobile #m_sod_frm_paysel input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
#sod_frm.sod_frm_mobile .lb_icon{
    flex:1 1 auto;margin:0;display:flex;align-items:center;justify-content:center;
    min-height:50px;padding:0 10px;text-align:center;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);background:#fff;
    font-size:13px;color:var(--wi-mute);cursor:pointer;transition:border .15s,color .15s;
}
#sod_frm.sod_frm_mobile input[type="radio"]:checked + .lb_icon{
    border-color:var(--wi-ink);color:var(--wi-ink);font-weight:600;
}
/* ⚠️ NHN KCP 네이버페이 두 칸만 라벨이 **"카드"·"머니"** 뿐이다 — 코어는
   `naverpay_icon` 배경 이미지로 "네이버페이" 를 보여줄 셈이었는데, 이 테마는
   코어 CSS 를 안 싣는다(→ [[youngcart-one-stylesheet]]). 그러면 무슨 결제수단
   인지 알 수 없는 두 칸이 남는다. 코어가 title 에 적어 둔 말을 앞에 붙인다.
   (PC 폼은 라벨에 "네이버페이 카드결제" 라고 다 적혀 있어 손댈 게 없다.) */
/* ⚠️ 끝의 공백은 그냥 두면 사라진다(타일이 flex 가운데정렬이라 흰공백이 접힌다) — 줄바꿈 없는 공백으로 넣는다 */
#sod_frm.sod_frm_mobile .nhnkcp_icon::before{content:"네이버페이\00a0"}
/* 무통장입금 — 코어가 계좌를 **날 텍스트**로 뱉는다(감쌀 요소가 없다):
     <div id="settle_bank" style="display:none">
       <label class="sound_only">입금할 계좌</label>{계좌}<br>
       <label for="od_deposit_name">입금자명</label><input id="od_deposit_name">
     </div>
   그래서 상자는 컨테이너에 입히고, 줄바꿈은 <br> 대신 블록 라벨이 맡는다.
   ⚠️ `display` 는 건드리지 않는다 — 인라인 style="display:none" 을 코어 js 가
      켜고 끈다. 여기서 display 를 정하면 그 손짓과 부딪친다. */
#sod_frm.sod_frm_mobile #settle_bank{
    margin-top:14px;padding:15px 16px;
    border:1px solid var(--wi-line);border-radius:var(--wi-r-box);background:var(--wi-tint);
    font-size:14px;line-height:1.75;letter-spacing:-0.01em;color:var(--wi-ink);
}
#sod_frm.sod_frm_mobile #settle_bank br{display:none}
#sod_frm.sod_frm_mobile #settle_bank label[for="od_deposit_name"]{
    display:block;margin:14px 0 6px;font-size:12px;font-weight:500;color:var(--wi-mute);
}
#sod_frm.sod_frm_mobile #od_deposit_name{
    width:100%;box-sizing:border-box;
    border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:#fff;padding:12px 14px;font-size:14px;color:var(--wi-ink);
}
#sod_frm.sod_frm_mobile #od_deposit_name:focus{outline:0;border-color:var(--wi-ink)}

/* 주문 버튼 — 모바일은 2단계(결제등록요청 → 주문하기)라 칸이 셋이다 */
#sod_frm.sod_frm_mobile #display_pay_button{
    display:flex;gap:9px;align-items:stretch;
    margin-top:clamp(24px,3vw,32px);padding-top:clamp(18px,2.2vw,24px);
    border-top:1px solid var(--wi-line);
}
#sod_frm.sod_frm_mobile #display_pay_button > span{flex:1 1 auto;min-width:0}
#sod_frm.sod_frm_mobile #display_pay_button .btn_submit{
    width:100%;height:54px;border:0;border-radius:var(--wi-r-btn);
    background:var(--wi-ink);color:#fff;font-size:15px;font-weight:600;cursor:pointer;
}
#sod_frm.sod_frm_mobile #display_pay_button .btn_submit:hover{background:#000}
#sod_frm.sod_frm_mobile #display_pay_button .btn_cancel{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    min-width:92px;border:1px solid var(--wi-line-4);border-radius:var(--wi-r-btn);
    background:#fff;color:var(--wi-mute);font-size:14px;
}
#sod_frm.sod_frm_mobile #show_progress{margin-top:14px;font-size:12.5px;color:var(--wi-mute)}