/* ═══════════════════════════════════════════════════════════
   g5pro template/standard — Slate 중성 + 소다 블루 강조 (shadcn 계열)
   옛 기본(old-standard)을 복사해 토큰을 갈아 끼운 뒤 글자·여백 눈금까지 올린 템플릿.
   지향: 그림자로 띄우지 않고 실선으로 나눈다 · 색은 상태에만 · 포커스는 항상 보인다.

   그림자 토큰을 "1px 링"으로 바꾼 것이 이 템플릿의 핵심 장치다 —
   컴포넌트 규칙 32곳의 box-shadow: var(--sh-md) 를 한 줄도 안 고치고
   전부 실선 테두리로 바꾼다. 진짜 그림자는 떠 있어야 하는 것(--sh-lg)만 남긴다.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* 브라우저가 그리는 것들(셀렉트 펼침 목록·스크롤바·날짜 선택기)은 CSS 로 색을 못 준다.
       어두운 모드라고 알려 주는 손잡이가 color-scheme 하나뿐이라, 이걸 빠뜨리면 어두운 화면에서
       셀렉트를 펼치는 순간 흰 목록에 흐린 글자가 뜬다(option 은 --fg 를 물려받는데 목록 바탕은
       브라우저 기본 흰색이다). 토큰과 같이 세 곳에 적는다. */
    color-scheme: light;
    /* 바탕 — 슬레이트 50. 순백으로 두면 흰 카드가 배경과 붙어 버린다(테두리 하나에만 기대게 된다) */
    --bg: #F8FAFC;
    --card: #FFFFFF;
    --fg: #020617;
    --muted: #64748B;          /* 흰 바탕 4.76:1 */
    --line: #E2E8F0;           /* 장식용 실선 — 면을 나누기만 한다 */
    /* 조작 요소 경계 — 3:1 을 지켜야 하는 값(WCAG 1.4.11). 옛 기본은 푸른 기가 도는
       #7C8EA6(색기 42)이라 중성 팔레트에서 입력칸 테두리가 파랗게 읽혔다.
       같은 밝기에서 색기만 13으로 낮춘 값 — 흰 바탕 3.09:1 */
    --btn-line: #8E939B;
    --row-hover: #F1F5F9;
    --chip-off: #E2E8F0;
    --chip-off-fg: #475569;    /* 채움 위 6.42:1 */

    /* 강조는 하나뿐 — 사는 곳·고른 것·내 것 */
    --accent: #2E7CF6;
    --accent-fg: #FFFFFF;
    --accent-deep: #1D5FD1;
    --accent-soft: #EFF6FF;

    /* 칩 — 이름표는 중성, 봐야 할 것만 앰버.
       분류는 관리자가 얼마든지 늘리므로 색으로 가를 수 없다(8개가 되면 반드시 깨진다) */
    --chip-bg: #F1F5F9;
    --chip-fg: #475569;        /* 6.92:1 */
    --notice-bg: #FEF3C7;
    --notice-fg: #B45309;      /* 4.51:1 */
    /* 잘 받은 것 — 이 팔레트에 없던 갈래다. 앰버가 "봐야 한다", 빨강이 "잘못됐다" 를
       맡는데 "잘 끝났다" 를 말할 색이 없어 배송완료·구매확정이 진행 중과 같은 파랑에 묻혔다.
       면 위 6.49:1 */
    --ok-bg: #DCFCE7;
    --ok-fg: #166534;
    /* 채운 강조 — 12px 뱃지 글자가 얹히는 자리다. --accent 에 흰 글자는 3.94:1 로 모자라
       한 단계 진한 값을 쓴다(5.82:1). 어두운 모드는 강조가 밝아지므로 글자가 검정 쪽이다. */
    --accent-fill: #1D5FD1;
    --accent-fill-fg: #FFFFFF;

    /* 보조색은 남겨 둔다 — standard 의 규칙들이 이름으로 참조하므로 지우면 화면이 깨진다.
       다만 값은 전부 중성으로 접어 실제로는 색이 나타나지 않는다 */
    --teal: #64748B;
    --teal-soft: #F1F5F9;
    --teal-deep: #475569;
    --shop-on: #2E7CF6;
    --shop-off: #64748B;
    --indigo: #475569;
    --indigo-soft: #F1F5F9;
    --danger: #DC2626;
    --danger-soft: #FEE2E2;
    --danger-deep: #B91C1C;

    /* 그라디언트를 쓰던 자리는 단색 강조로 — 흰 굵은 글자가 얹히는 자리들이다 */
    --grad: var(--accent);

    /* 그림자 — sm·md 는 1px 링(실선), lg 만 진짜로 떠 있는 것(메뉴·모달·확대) */
    --sh-sm: 0 0 0 1px var(--line);
    --sh-md: 0 0 0 1px var(--line);
    --sh-lg: 0 10px 30px rgba(2, 6, 23, .10), 0 0 0 1px var(--line);
    --sh-btn: none;

    /* 여백 */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px;

    /* 글자 */
    --t-xs: 12px; --t-sm: 13px; --t-base: 14px; --t-md: 15px;
    --t-lg: 17px; --t-xl: 22px; --t-2xl: 30px;

    /* 모서리 — standard 보다 한 단계씩 조인다(카드 20→12) */
    --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-2xl: 14px; --r-full: 999px;
    --r-btn: 8px;
    --r-input: 8px;

    --pop: var(--card);
    --pop-line: #CBD5E1;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: #020617;
        --card: #0F172A;
        --fg: #F8FAFC;
        --muted: #94A3B8;          /* 카드 위 6.96:1 */
        --line: #1E293B;
        --btn-line: #6E737B;       /* 카드 위 3.74:1, 색기 13 */
        --row-hover: #1E293B;
        --chip-off: #1E293B;
        --chip-off-fg: #CBD5E1;

        --accent: #4A90FF;
        --accent-fg: #04121F;      /* 파랑 위 6.05:1 — 어두운 모드 강조는 밝아서 검은 글자가 맞다 */
        --accent-deep: #8FBCFF;
        --accent-soft: #14243D;

        --chip-bg: #1E293B;
        --chip-fg: #CBD5E1;        /* 9.85:1 */
        --notice-bg: #382B0B;
        --notice-fg: #FBBF24;      /* 8.28:1 */
        --ok-bg: #0C2A18;
        --ok-fg: #4ADE80;          /* 면 위 8.86:1 */
        --accent-fill: #4A90FF;
        --accent-fill-fg: #04121F;   /* 6.05:1 */

        --teal: #94A3B8;
        --teal-soft: #1E293B;
        --teal-deep: #CBD5E1;
        --shop-on: #4A90FF;
        --shop-off: #94A3B8;
        --indigo: #CBD5E1;
        --indigo-soft: #1E293B;
        --danger: #F87171;
        --danger-soft: #3B1414;
        --danger-deep: #FCA5A5;

        --grad: var(--accent);

        --sh-sm: 0 0 0 1px var(--line);
        --sh-md: 0 0 0 1px var(--line);
        --sh-lg: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 1px var(--line);
        --sh-btn: none;

        --pop: #1E293B;
        --pop-line: #334155;
    }
}


/* 테마 토글 — 사용자가 고른 값은 OS 설정(위 미디어쿼리)을 양방향으로 이긴다.
   값은 위 두 블록과 같아야 하므로 손으로 적지 않고 그대로 옮겨 적었다 */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #020617;
    --card: #0F172A;
    --fg: #F8FAFC;
    --muted: #94A3B8;
    --line: #1E293B;
    --btn-line: #6E737B;
    --row-hover: #1E293B;
    --chip-off: #1E293B;
    --chip-off-fg: #CBD5E1;
    --accent: #4A90FF;
    --accent-fg: #04121F;
    --accent-deep: #8FBCFF;
    --accent-soft: #14243D;
    --chip-bg: #1E293B;
    --chip-fg: #CBD5E1;
    --notice-bg: #382B0B;
    --notice-fg: #FBBF24;
    --ok-bg: #0C2A18;
    --ok-fg: #4ADE80;      /* 면 위 8.86:1 */
    --accent-fill: #4A90FF;
    --accent-fill-fg: #04121F;   /* 6.05:1 */
    --teal: #94A3B8;
    --teal-soft: #1E293B;
    --teal-deep: #CBD5E1;
    --shop-on: #4A90FF;
    --shop-off: #94A3B8;
    --indigo: #CBD5E1;
    --indigo-soft: #1E293B;
    --danger: #F87171;
    --danger-soft: #3B1414;
    --danger-deep: #FCA5A5;
    --grad: var(--accent);
    --sh-sm: 0 0 0 1px var(--line);
    --sh-md: 0 0 0 1px var(--line);
    --sh-lg: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 1px var(--line);
    --sh-btn: none;
    --pop: #1E293B;
    --pop-line: #334155;
}
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #F8FAFC;
    --card: #FFFFFF;
    --fg: #020617;
    --muted: #64748B;
    --line: #E2E8F0;
    --btn-line: #8E939B;
    --row-hover: #F1F5F9;
    --chip-off: #E2E8F0;
    --chip-off-fg: #475569;
    --accent: #2E7CF6;
    --accent-fg: #FFFFFF;
    --accent-deep: #1D5FD1;
    --accent-soft: #EFF6FF;
    --chip-bg: #F1F5F9;
    --chip-fg: #475569;
    --notice-bg: #FEF3C7;
    --notice-fg: #B45309;
    /* 잘 받은 것 — 이 팔레트에 없던 갈래다. 앰버가 "봐야 한다", 빨강이 "잘못됐다" 를
       맡는데 "잘 끝났다" 를 말할 색이 없어 배송완료·구매확정이 진행 중과 같은 파랑에 묻혔다.
       면 위 6.49:1 */
    --ok-bg: #DCFCE7;
    --ok-fg: #166534;
    /* 채운 강조 — 12px 뱃지 글자가 얹히는 자리다. --accent 에 흰 글자는 3.94:1 로 모자라
       한 단계 진한 값을 쓴다(5.82:1). 어두운 모드는 강조가 밝아지므로 글자가 검정 쪽이다. */
    --accent-fill: #1D5FD1;
    --accent-fill-fg: #FFFFFF;
    --teal: #64748B;
    --teal-soft: #F1F5F9;
    --teal-deep: #475569;
    --shop-on: #2E7CF6;
    --shop-off: #64748B;
    --indigo: #475569;
    --indigo-soft: #F1F5F9;
    --danger: #DC2626;
    --danger-soft: #FEE2E2;
    --danger-deep: #B91C1C;
    --grad: var(--accent);
    --sh-sm: 0 0 0 1px var(--line);
    --sh-md: 0 0 0 1px var(--line);
    --sh-lg: 0 10px 30px rgba(2, 6, 23, .10), 0 0 0 1px var(--line);
    --sh-btn: none;
    --pop: var(--card);
    --pop-line: #CBD5E1;
}

/* ── 기본 ── */
* { box-sizing: border-box; }
/* hidden 속성이 화면 규칙에 지지 않게 — 브라우저 기본은 display:none 이지만 그건 특이도가
   가장 낮아, 컴포넌트에 display:flex 를 주면 hidden 을 걸어도 그대로 보인다.
   (합계 상자가 비어 있는 채로 테두리만 남아 있던 원인) */
[hidden] { display: none !important; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: Pretendard, "Apple SD Gothic Neo", "Nanum Gothic", "Malgun Gothic", -apple-system, sans-serif;
    font-size: var(--t-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* 링크 기본은 물려받은 색이다 — 목록 줄·메뉴·카드처럼 "덩어리 전체가 링크" 인 자리가 대부분이라,
   거기에 색을 주면 화면이 온통 파래진다.
   그 대신 **글 속에 섞여 있는 링크**는 반드시 갈라 보여야 한다 — 아래 자리들이 그렇다.
   여기 없는 자리에 문장 속 링크를 새로 만들면 이 목록에 함께 적는다 */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.post-content a,
.post-files a,
.post-links a,
.cart-co-sec a,
.cart-complete-line a,
.wish-msg a {
    color: var(--accent-deep); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.post-content a:hover,
.post-files a:hover,
.post-links a:hover,
.cart-co-sec a:hover,
.cart-complete-line a:hover,
.wish-msg a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.3; letter-spacing: -.021em; font-weight: 700; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--s5); }
.sound_only { position: absolute; left: -9999px; }
.muted { color: var(--muted); }

/* ── 칩 (카테고리·상태) ── */
/* 칩은 이름표다 — 글자가 이미 이름을 말하므로 색이 할 일이 없다.
   분류는 관리자가 게시판마다 얼마든지 늘리는데, 여덟 개가 되는 순간 서로 구별되면서
   대비도 맞는 색 여덟 개를 골라야 한다. 그건 불가능하다. 그래서 전부 중성으로 접는다.
   색은 "무엇인가" 가 아니라 "봐야 하는가" 에만 쓴다 — .chip.notice 하나뿐이다. */
.chip {
    display: inline-block; font-size: var(--t-xs); font-weight: 700;
    border-radius: var(--r-full); padding: 2px var(--s2); white-space: nowrap;
    background: var(--chip-bg); color: var(--chip-fg);
}
.chip.c2, .chip.c3, .chip.c4 { background: var(--chip-bg); color: var(--chip-fg); }
/* 공지 — 목록에서 위에 고정되는 글. 색이 곧 "먼저 보라" 는 뜻이라 여기만 유색이다 */
.chip.notice { background: var(--notice-bg); color: var(--notice-fg); }
/* 지금 내가 있는 자리 — 열람 중인 글. 이름표와 갈라 보이도록 강조색 옅은 면 */
.chip.here { background: var(--accent-soft); color: var(--accent-deep); }
.n { font-size: var(--t-xs); color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.badge-new { color: var(--danger); font-size: var(--t-xs); font-weight: 800; }

/* ── 버튼·입력 ── */
.btn {
    display: inline-block; text-align: center;   /* <a class="btn"> 이 늘어날 때 글자가 왼쪽에 붙지 않게 */
    font-size: var(--t-base); font-weight: 600;
    padding: 9px var(--s4); line-height: 1.25; border-radius: var(--r-btn);
    background: var(--card); color: var(--fg); border: 1px solid var(--line);
    cursor: pointer; white-space: nowrap; font-family: inherit;
    transition: border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
/* 아이콘을 단 버튼. .btn 은 inline-block 이라 아이콘과 글자의 밑선이 어긋난다.
   전역 .btn 을 flex 로 바꾸면 이 클래스를 쓰는 다른 화면이 함께 밀리므로 수식 클래스로만 바꾼다.
   선 두께·굵기는 케밥 메뉴, 추천 바의 아이콘과 같은 값이다 */
.btn-ico { display: inline-flex; align-items: center; gap: 6px; }
.btn-ico svg {
    width: 16px; height: 16px; flex: none; fill: none;
    stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.btn-primary {
    background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
    box-shadow: var(--sh-btn);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-fg); }
.btn-block { display: block; width: 100%; text-align: center; padding: var(--s3); font-size: var(--t-md); }
.linklike {
    background: none; border: 0; padding: 0; font-family: inherit;
    color: var(--muted); font-size: var(--t-sm); cursor: pointer;
}
.linklike:hover { color: var(--accent); }

/* type 을 하나씩 적는 목록이라 새 타입을 쓰면 여기 함께 적어야 한다 —
   빠지면 브라우저 기본값(흰 바탕·검은 글자)으로 떨어져 어두운 모드에서 흰 상자가 된다.
   장바구니·상품 상세의 수량칸(number)이 그렇게 남아 있었다 */
input[type=text], input[type=password], input[type=email], input[type=file],
input[type=number], input[type=tel], input[type=search], input[type=url],
select, textarea {
    background: var(--bg); color: var(--fg);
    border: 1px solid var(--btn-line); border-radius: var(--r-input);
    padding: 9px var(--s3); line-height: 1.25;
    font: inherit; font-size: var(--t-base); max-width: 100%;
    transition: border-color .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
    background: var(--card); border-color: var(--accent);
    outline: 2px solid var(--accent-soft); outline-offset: 0;
}
textarea { line-height: 1.6; border-radius: var(--r-input); }
/* 펼침 목록의 항목 — 목록 자체는 브라우저가 그리므로 위의 color-scheme 이 본 대책이다.
   다만 리눅스 크롬처럼 option 색을 CSS 에서 받는 곳이 있어, 거기서 흰 바탕에 흐린 글자가
   되지 않게 면 색을 함께 준다(글자만 물려받으면 바탕은 브라우저 기본 흰색으로 남는다). */
option { background-color: var(--card); color: var(--fg); }
option:disabled { color: var(--muted); }

/* ── 헤더 (L1 pill nav + L2 검색) ── */
.site-header { background: var(--card); box-shadow: var(--sh-sm); position: relative; z-index: 60; }
.site-header .wrap { position: relative; }
.site-header .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 62px; flex-wrap: wrap; }
.logo { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--accent); }
.logo a:hover { color: var(--accent-deep); }

/* overflow 를 주면 안 된다 — 절대배치된 .gnb-sub 드롭다운이 잘린다.
   넘치는 경우는 JS 가 .nav-collapsed 로 접어서 처리한다. */
.gnb { display: flex; gap: var(--s1); flex: 1; min-width: 0; }

/* 커뮤니티 ↔ 쇼핑몰 전환 — 쇼핑몰 설치 시에만. 두 영역을 모두 표시, 현재 위치가 on.
   글자 없이 큰 아이콘만 (말풍선 ↔ 카트라 모양으로 구분된다). 메뉴 밖이라 햄버거로 접히지 않는다 */
/* 영역 전환(커뮤니티 · 쇼핑몰) — 눌린 칸이 색 블록이 되던 것을, 회색 트랙 위에 뜨는
   흰 알약으로 바꿨다. standard 는 두 칸을 파랑·주황으로 갈라 어느 쪽이 켜졌는지 알렸는데,
   강조색이 하나뿐인 이 템플릿에서는 색이 아니라 "떠 있음" 이 켜진 칸을 가리킨다.
   덕분에 쇼핑몰 칸에 주황을 따로 둘 필요가 없어졌다 */
.area-switch {
    display: inline-flex; flex: none; gap: 2px;
    padding: 3px; border-radius: var(--r-btn); background: var(--row-hover);
    box-shadow: 0 0 0 1px var(--line);
}
.area-link {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; border-radius: calc(var(--r-btn) - 2px);
    color: var(--muted);
}
.area-link:hover { color: var(--fg); }
.area-link.on { background: var(--card); color: var(--accent); box-shadow: var(--sh-sm); }
.area-link.on:hover { color: var(--accent); }
.area-link.area-bag { color: var(--shop-off); }
.area-link.area-bag.on { background: var(--card); color: var(--shop-on); }
.area-link.area-bag:hover { color: var(--fg); }
.area-link.area-bag.on:hover { color: var(--shop-on); }
.area-link svg {
    width: 21px; height: 21px; fill: none;
    stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* 햄버거 — 메뉴가 실제로 잘릴 때 JS 가 .nav-collapsed 를 붙이면 나타난다 */
.nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: none; order: 10;   /* 검색창(50)보다 앞 = 항상 첫 줄 우측 */
    background: var(--bg); border: 0; border-radius: var(--r-md); cursor: pointer; color: var(--fg);
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
    display: block; width: 17px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-deep); }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }
.gnb-item { position: relative; flex: none; }
.gnb-item > a {
    display: block; padding: var(--s2) 9px; border-radius: var(--r-btn);
    color: var(--muted); font-weight: 600; white-space: nowrap;
}
.gnb-item > a:hover { background: var(--bg); color: var(--fg); }
.gnb-item.on > a { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.gnb-item.section > a { color: var(--accent); }   /* 하위가 현재 화면 — 문맥만 표시 */
.gnb-sub {
    position: absolute; top: 100%; left: 0; min-width: 160px; z-index: 70;
    background: var(--pop); border: 1px solid var(--pop-line); border-radius: var(--r-lg); padding: var(--s2);
    box-shadow: var(--sh-md); margin-top: var(--s1);
    /* display 대신 visibility 로 숨긴다 — 사라질 때 유예(0.16s)를 줘서
       메뉴와 드롭다운 사이를 오갈 때 깜빡 닫히지 않는다 */
    visibility: hidden; opacity: 0; transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility 0s .16s;
}
/* 메뉴와 드롭다운 사이 간격을 덮는 투명 다리 — 마우스가 지나가도 hover 가 끊기지 않는다 */
.gnb-sub::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: calc(var(--s1) * -1); height: var(--s1);
}
.gnb-item:hover .gnb-sub, .gnb-item:focus-within .gnb-sub {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
.gnb-sub a { display: block; padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-size: var(--t-sm); color: var(--muted); }
.gnb-sub a:hover { background: var(--bg); color: var(--fg); }
.gnb-sub a.on { color: var(--accent); font-weight: 700; }

.header-util { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--muted); }
.login-link { font-weight: 600; padding: var(--s2); white-space: nowrap; }

/* 헤더 아이콘 버튼 (검색·테마·닫기) */
.icon-btn {
    display: flex; align-items: center; justify-content: center; flex: none;
    background: none; border: 0; border-radius: var(--r-md);
    width: 36px; height: 36px; cursor: pointer; color: var(--muted);
    transition: color .15s, background .15s;
}
.icon-btn:hover { color: var(--accent); background: var(--accent-soft); }
.icon-btn svg {
    width: 19px; height: 19px; fill: none;
    stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-sun { display: block; }

/* ── 프로필 버튼 + 드롭다운 ── */
.profile { position: relative; flex: none; }
.profile-btn {
    display: block; width: 38px; height: 38px; padding: 0;
    border: 0; border-radius: 50%; background: var(--bg); cursor: pointer;
    overflow: hidden; transition: box-shadow .15s;
}
.profile-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-btn:hover, .profile-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent); }

.profile-menu {
    position: absolute; top: calc(100% + var(--s2)); right: 0; z-index: 70;
    min-width: 210px; padding: var(--s2);
    background: var(--pop); border: 1px solid var(--pop-line); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility 0s .14s;
}
.profile-menu.open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
.profile-nick {
    padding: var(--s3) var(--s4) var(--s2);
    font-size: var(--t-md); color: var(--muted);
    border-bottom: 1px solid var(--line); margin-bottom: var(--s2);
}
.profile-menu a {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s3) var(--s4); border-radius: var(--r-md);
    font-size: var(--t-md); font-weight: 500; color: var(--fg);
}
.profile-menu a:hover { background: var(--bg); color: var(--accent); }
.profile-menu a b { font-weight: 700; font-variant-numeric: tabular-nums; }
.profile-menu a .dot {
    background: var(--danger); color: #fff; font-size: var(--t-xs);
    border-radius: var(--r-full); padding: 1px var(--s2);
}
.profile-menu a.sep { border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s3); border-radius: 0 0 var(--r-md) var(--r-md); }

/* ── 검색 모달 ── */
.search-modal { position: fixed; inset: 0; z-index: 200; }
.search-modal[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: rgba(14,25,40,.45); backdrop-filter: blur(2px); }
.search-panel {
    position: relative; max-width: 620px; margin: 12vh auto 0;
    padding: var(--s5);
    background: var(--card); border-radius: var(--r-2xl); box-shadow: var(--sh-lg);
    animation: search-in .16s ease;
}
@keyframes search-in { from { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .search-panel { animation: none; } }
.search-panel form { display: flex; align-items: center; gap: var(--s2); }
.search-panel-icon {
    width: 20px; height: 20px; flex: none; fill: none; color: var(--muted);
    stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.search-panel input[type=text] {
    flex: 1; min-width: 0; border: 0; background: none; padding: var(--s2) 0;
    font-size: var(--t-lg); color: var(--fg);
}
.search-panel input[type=text]:focus { background: none; outline: none; }
.search-hint { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--muted); }

/* ── 접힘 모드: 메뉴를 햄버거 패널로 ── */
.nav-collapsed .nav-toggle { display: flex; }
.nav-collapsed .header-util { margin-left: auto; }   /* 접히면 gnb 가 흐름에서 빠지므로 직접 민다 */
/* 접힘 모드에선 한 줄 강제 — 폭이 모자라면 줄바꿈 대신 로고가 줄며 말줄임된다 */
.nav-collapsed .wrap { flex-wrap: nowrap; }
.nav-collapsed .logo { flex: 0 1 auto; min-width: 0; }
.nav-collapsed .logo a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 좁은 화면에서는 헤더를 비우고 검색·회원가입을 햄버거 패널로 내린다 */
.nav-collapsed .join-link,
.nav-collapsed #search-open { display: none; }
.gnb-extra { display: none; }
.nav-collapsed .gnb-extra {
    display: flex; flex-direction: column; gap: var(--s2);
    margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line);
}
.gnb-extra .search-open {
    display: flex; align-items: center; justify-content: center; gap: var(--s2);
}
.gnb-extra .search-open svg {
    width: 17px; height: 17px; fill: none;
    stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.nav-collapsed .gnb {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 65;
    flex-direction: column; gap: 2px; overflow: visible;
    background: var(--card); box-shadow: var(--sh-md);
    border-radius: 0 0 var(--r-lg) var(--r-lg); padding: var(--s3);
}
.nav-collapsed .gnb.open { display: flex; }
.nav-collapsed .gnb-item > a { padding: var(--s3) var(--s4); border-radius: var(--r-md); font-size: var(--t-md); }
.nav-collapsed .gnb-sub {
    position: static; margin: 0 0 var(--s1) var(--s4);
    padding: 0; box-shadow: none; background: none; min-width: 0;
    visibility: visible; opacity: 1; transform: none; transition: none;
}
.nav-collapsed .gnb-sub::before { content: none; }
.nav-collapsed .gnb-sub a { padding: var(--s2) var(--s4); }

/* 좁은 화면 — 헤더를 컴팩트하게 (로고·영역 전환·유틸·햄버거가 375px 한 줄에 들어가게) */
@media (max-width: 560px) {
    .site-header .wrap { gap: var(--s2); padding: 0 var(--s3); min-height: 56px; }
    .logo { font-size: 16px; }
    .area-switch { padding: 2px; }
    .area-link { width: 32px; height: 32px; }
    .area-link svg { width: 18px; height: 18px; }
    .header-util { gap: var(--s1); }
    .icon-btn, .nav-toggle { width: 34px; height: 34px; }
    .profile-btn { width: 34px; height: 34px; }
}

/* ── 본문·푸터 ── */
.site-main { padding: var(--s5) var(--s5) var(--s7); min-height: 60vh; }
/* 본문과 갈라 주는 선 하나 — 그림자를 안 쓰는 템플릿이라 경계는 선이 맡는다 */
.site-footer { color: var(--muted); font-size: var(--t-sm); border-top: 1px solid var(--line); margin-top: var(--s7); }
.site-footer .wrap { padding: var(--s5); text-align: left; }
.site-footer p { margin: 0; }

/* 푸터 전용 클래스로만 쓴다. footer a 같은 일반 선택자에 기대면 다른 규칙이 조용히 이긴다 */
.ft-links {
    display: flex; flex-wrap: wrap; justify-content: flex-start;
    gap: var(--s2) var(--s4); margin-bottom: var(--s4);
}
.ft-links a { color: var(--fg); font-weight: 600; text-decoration: none; }
.ft-links a:hover, .ft-links a:focus-visible { text-decoration: underline; }

/* 통신판매업자 정보 — 한 문단처럼 흐르게 두고 항목 사이를 가는 세로선으로 끊는다.
   라벨을 전부 볼드로 두면 아홉 번 반복되는 강조가 되어 아무것도 강조되지 않는다.
   대신 무게를 뒤집는다 — 라벨은 흐리게 물러나고 값이 읽힌다.
   행을 inline 으로 두어도 라벨과 값은 한 덩이로 묶여 줄바꿈에 흩어지지 않는다 */
/* 항목 사이에 구분선을 그리려면 :not(:last-child) 같은 자리 기준이 필요한데, CSS 는 어떤
   항목이 줄 끝인지 모른다. 그래서 줄이 접히면 구분선이 다음 줄 맨 앞에 남는다.
   폭에 따라 계속 생기는 현상이라, 선 대신 간격으로 나눈다 */
.ft-company {
    display: flex; flex-wrap: wrap; justify-content: flex-start;
    gap: var(--s1) 28px; margin: 0 0 var(--s4);
}
/* 행을 flex 항목으로 두면 줄 끝에서 라벨과 값이 다른 줄로 찢어지지 않는다 */
.ft-company-row { display: flex; align-items: baseline; gap: 6px; }
.ft-company dt { font-weight: 400; color: var(--muted); }
.ft-company dd { margin: 0; color: var(--fg); }

/* 링크와 회사정보는 왼쪽에 붙이고 저작권만 가운데로 — 아래를 닫는 줄로 쓴다 */
.ft-copy { padding-top: var(--s3); border-top: 1px solid var(--line); text-align: center; }

/* 사업자정보 접기 — 넓은 화면에서는 여는 단추를 숨겨 늘 펼쳐진 것처럼 보인다.
   좁은 화면에서만 단추가 나타나고, 접는 일은 theme.js 가 한다 */
.ft-fold > summary { display: none; }
.ft-fold > summary::-webkit-details-marker { display: none; }

/* 모바일에서는 아홉 항목이 일곱 줄을 차지해 푸터가 화면 하나를 채운다. 그래서 접되
   없애지는 않는다 — 통신판매업자 정보는 화면에 남아 있어야 한다.
   기준점은 표가 카드로 바뀌는 자리와 같게 맞춘다 */
@media (max-width: 620px) {
    .ft-fold > summary {
        display: inline-flex; align-items: center; gap: 6px;
        margin-bottom: var(--s3); padding: 2px 0;
        color: var(--fg); font-weight: 600; cursor: pointer;
        list-style: none;   /* 파이어폭스의 기본 삼각형을 지운다 */
    }
    .ft-fold > summary::after {
        content: ""; width: 7px; height: 7px;
        border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
        transform: translateY(-2px) rotate(45deg); transition: transform .15s;
    }
    .ft-fold[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
}

/* ═══════════ 메인 히어로 (L1) ═══════════ */
/* 머리말 — 그라디언트 띠를 걷어냈다. 화면에서 가장 강한 요소였는데 담고 있던 것은
   인사말 한 줄뿐이었다. 같은 자리를 숫자로 채우면 "이 커뮤니티가 살아 있다" 는 근거가 된다.
   띠가 사라지므로 아래 카드 그리드가 첫 화면의 주인공이 된다 */
.hero { margin-bottom: var(--s6); padding: var(--s4) 0 0; }
.hero h2 { font-size: var(--t-2xl); letter-spacing: -.025em; margin-bottom: var(--s2); }
.hero p { margin: 0; font-size: var(--t-md); color: var(--muted); }
.hero-stats {
    display: flex; gap: var(--s7); margin-top: var(--s5);
    font-variant-numeric: tabular-nums;
}
.hero-stats > div { display: flex; flex-direction: column; }
.hero-stats b { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.hero-stats span { font-size: var(--t-xs); color: var(--muted); }

/* 카드 그리드 (L1) */
/* 카드는 제 내용만큼만 차지한다 — 격자 기본값(stretch)에 두면 글이 하나뿐인 공지 카드가
   옆 카드 키에 맞춰 늘어나 큰 빈칸이 생긴다. 아랫단이 들쭉날쭉해도 그게 정직하다 */
.card-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s4); align-items: start;
}
.hero-pills { display: flex; gap: var(--s2); flex-wrap: wrap; }
.hero-pills span {
    background: rgba(255,255,255,.18); border-radius: var(--r-full);
    padding: var(--s2) var(--s4); font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
}
/* 현황 스트립 — 오늘의 숫자를 한 줄로 */
.home-strip {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); flex-wrap: wrap;
    background: var(--card); box-shadow: var(--sh-md); border-radius: var(--r-xl);
    padding: var(--s4) var(--s5); margin-top: var(--s4);
}
.home-strip h3 { font-size: var(--t-md); }
.home-strip .nums { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: var(--t-sm); color: var(--muted); }
.home-strip .nums b { color: var(--accent); font-size: var(--t-lg); margin-right: 4px; font-variant-numeric: tabular-nums; }
/* 갤러리·위젯 줄 — 카드 그리드와 같은 간격으로 아래에 쌓는다 */
.home-row { margin-top: var(--s4); }
.home-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); align-items: start; }
.home-row-2col > div { display: grid; gap: var(--s4); align-content: start; }
@media (max-width: 720px) { .home-row-2col { grid-template-columns: 1fr; } }
.home-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: var(--s4); align-items: start; }
.home-main, .home-side { display: grid; gap: var(--s4); min-width: 0; }
.feed-list li {
    display: flex; align-items: center; gap: var(--s2);
    padding: 8px 0; font-size: var(--t-base);
    border-top: 1px solid var(--line);
}
.feed-list li:first-child { border-top: 0; }
.feed-list .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.feed-list .muted { font-size: var(--t-xs); white-space: nowrap; }
.home-gallery > h3 .more { margin-left: auto; font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.home-gallery > h3 .more:hover { color: var(--accent); }
.home-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.hg-item { display: block; min-width: 0; }
.hg-thumb {
    display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md);
    overflow: hidden; background: var(--accent-soft); margin-bottom: var(--s2);
}
.hg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.hg-item:hover .hg-thumb img { transform: scale(1.04); }
.hg-noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 28px; opacity: .6; }
.hg-subject {
    display: block; font-weight: 600; font-size: var(--t-sm);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hg-meta { display: block; font-size: var(--t-xs); margin-top: 2px; }
.hot-list { counter-reset: none; }
.hot-list li {
    display: flex; gap: var(--s2); align-items: baseline;
    padding: 7px 0; font-size: var(--t-base);
    border-top: 1px solid var(--line);
}
.hot-list li:first-child { border-top: 0; }
.hot-list .no { color: var(--accent); font-weight: 800; min-width: 16px; font-variant-numeric: tabular-nums; }
.hot-list li:first-child .no { color: var(--danger); }
.hot-list a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@media (max-width: 860px) {
    .home-grid { grid-template-columns: 1fr; }
    .home-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 카드 그리드 (L1) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.card {
    background: var(--card); border-radius: var(--r-xl);
    padding: var(--s5); box-shadow: var(--sh-md);
}
.card > h3 {
    display: flex; align-items: center; gap: var(--s2);
    font-size: var(--t-md); margin-bottom: var(--s3); letter-spacing: -.015em;
}
/* 줄마다 옅은 선 — 없으면 다섯 줄이 한 덩어리로 뭉쳐 어디까지가 한 글인지 안 읽힌다 */
.card li {
    display: flex; align-items: center; gap: var(--s2);
    padding: 8px 0; font-size: var(--t-base); border-top: 1px solid var(--line);
}
.card li:first-child { border-top: 0; padding-top: 2px; }
/* 선은 "글 목록" 에만 — 설문 보기·접속자 칩은 목록이 아니라 폼과 요약이라 선을 그으면
   고를 수 있는 항목이 표의 행처럼 읽힌다 */
.poll-card li, .connect-card li { border-top: 0; padding: 5px 0; }
.card li > a { /*flex: 1;*/ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card li .n { margin-left: auto; }
.card li .muted { font-size: var(--t-xs); white-space: nowrap; }

/* ═══════════ 게시판 공통 ═══════════ */
.bbs-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4);
}
.bbs-head h2 { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xl); }
.bbs-head-right { display: flex; align-items: center; gap: var(--s2); }
.bbs-meta { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
/* 게시판 설정 바로가기 — 최고·그룹 관리자에게만 보인다 */
.bbs-admin-link { width: 32px; height: 32px; }
.bbs-admin-link svg { width: 17px; height: 17px; }

.bbs-cate { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.bbs-cate a {
    padding: var(--s2) var(--s3); font-size: var(--t-sm); font-weight: 600;
    border-radius: var(--r-btn); background: var(--card); color: var(--muted); box-shadow: var(--sh-sm);
}
.bbs-cate a:hover { color: var(--accent); }
.bbs-cate a.active { background: var(--accent); color: var(--accent-fg); box-shadow: var(--sh-btn); }

.bbs-empty { padding: var(--s7) 0; text-align: center; color: var(--muted); }

/* 페이징 — pill */
.paging-wrap { display: flex; justify-content: center; margin-top: var(--s5); }
/* 가운데 정렬도, 목록과 띄우는 여백도 감싸는 태그가 있든 없든 같아야 한다 — 게시판은
   .paging-wrap 이 감싸지만 쇼핑몰 화면들은 <nav class="paging"> 만 쓰고 있어 페이징이
   목록 판에 딱 붙어 있었다.
   여백을 .paging 으로 옮기기만 하면 감싼 쪽이 망가진다: 바깥 마진은 앞 형제의 아래 마진과
   상쇄되는데(검색 결과 묶음 32px, FAQ 꼬리말 16px) 안쪽으로 들어가면 상쇄가 안 돼 더해진다.
   그래서 여백은 감싸는 쪽에 그대로 두고, 감싸이지 않은 .paging 만 스스로 띄운다. */
.paging { display: flex; justify-content: center; gap: var(--s1); margin-top: var(--s5);
    font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.paging-wrap > .paging { margin-top: 0; }
.paging a, .paging-cur {
    min-width: 34px; text-align: center; padding: var(--s2) var(--s3);
    border-radius: var(--r-btn); background: var(--card); color: var(--muted); box-shadow: var(--sh-sm);
}
.paging a:hover { color: var(--accent); }
.paging-cur { background: var(--accent); color: var(--accent-fg); font-weight: 700; box-shadow: var(--sh-btn); }

/* 하단 툴바 */
.bbs-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4);
}
/* 버튼은 white-space:nowrap 이라 칸을 넘으면 그대로 삐져나온다. 줄을 바꾸게 둔다 —
   아이콘이 붙어 버튼당 22px 씩 넓어지면서 390px 에서 4px 넘치는 것이 드러났다 */
.bbs-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bbs-search {
    display: flex; align-items: center; gap: var(--s2); flex: 1; min-width: 0; max-width: 420px;
    background: var(--card); border-radius: var(--r-btn); padding: var(--s1) var(--s1) var(--s1) var(--s3);
    box-shadow: var(--sh-sm);
}
.bbs-search select { border: 0; background: none; font-size: var(--t-sm); padding: var(--s1); }
.bbs-search input[type=text] { flex: 1; min-width: 0; border: 0; background: none; padding: var(--s1); }
.bbs-search input:focus, .bbs-search select:focus { background: none; }
/* 검색 버튼 — 흰 상자 안에 흰 버튼을 두면 어디를 눌러야 하는지 안 보인다.
   검색줄에서는 이 버튼이 유일한 조작점이므로 채워서 둔다 */
/* .btn 이 아니라 button 을 잡는다 — 스토어홈 검색은 클래스 없는 맨 button 이라
   .btn 기준으로 두면 브라우저 기본 회색 버튼이 그대로 남는다 */
.bbs-search button {
    background: var(--accent); border: 1px solid var(--accent); color: var(--accent-fg);
    font: inherit; font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
    padding: 8px var(--s4); border-radius: var(--r-btn); cursor: pointer;
}
.bbs-search button:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
/* 장바구니 목록 아래 버튼 줄 — 목록 왼쪽 끝(체크박스 열)에 맞춘다 */
.cart-acts { display: flex; justify-content: flex-start; gap: var(--s2); margin-top: var(--s3); }

/* 관리자 선택 도구 — 목록 위 한 줄. 메뉴가 잘리지 않도록 .list-panel 바깥에 둔다.
   넓은 화면에선 게시물을 선택했을 때만 나타난다(.active 는 theme.js) — 빈 줄이 여백만 차지하는 것 방지 */
.list-tools {
    display: none; align-items: center; gap: var(--s2);
    margin-bottom: var(--s2); padding: 0 var(--s1);
}
.list-tools.active { display: flex; }
.chk-all-label {
    display: none; align-items: center; gap: var(--s2);
    font-size: var(--t-sm); font-weight: 600; color: var(--muted); cursor: pointer;
}
.chk-count { font-size: var(--t-sm); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.list-tools .kebab { margin-left: auto; }

.kebab { position: relative; flex: none; }
.kebab-btn svg { fill: currentColor; stroke: none; }
.kebab-btn[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); }
.kebab-menu {
    position: absolute; top: calc(100% + var(--s2)); right: 0; z-index: 70;
    min-width: 178px; padding: var(--s2);
    background: var(--pop); border: 1px solid var(--pop-line); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility 0s .14s;
}
.kebab.open .kebab-menu {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
.kebab-menu button,
.kebab-menu a {
    display: flex; align-items: center; gap: var(--s3); width: 100%;
    padding: var(--s3) var(--s4); border: 0; border-radius: var(--r-md);
    background: none; color: var(--fg); font-size: var(--t-md); font-weight: 500;
    text-align: left; cursor: pointer;
}
.kebab-menu button:hover, .kebab-menu a:hover { background: var(--bg); color: var(--accent); }
.kebab-menu button svg, .kebab-menu a svg {
    width: 17px; height: 17px; flex: none; fill: none;
    stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.kebab-menu .danger { border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s3); border-radius: 0 0 var(--r-md) var(--r-md); }
.kebab-menu .danger:hover { background: rgba(239,68,68,.10); color: var(--danger); }

/* ═══════════ 목록 변형 1 · 표 (기본) — 흰 카드 안의 행 ═══════════ */
.list-panel { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; }
/* 가로로만 스크롤한다. overflow-x 만 지정하면 CSS 규칙상 overflow-y 의 visible 이
   auto 로 계산되어, 안에서 뭔가 세로로 넘칠 때 세로 스크롤바가 잠깐 생겼다 사라진다
   (사이드뷰가 열리는 순간이 그랬다 — 15px 이 나타났다 사라지며 화면이 깜빡였다). */
.list-table-wrap { overflow-x: auto; overflow-y: hidden; }
.list-table { width: 100%; border-collapse: collapse; }
.list-table th {
    font-size: var(--t-sm); font-weight: 600; color: var(--muted); letter-spacing: .02em;
    padding: var(--s3) var(--s4); text-align: center; white-space: nowrap;
    border-bottom: 1px solid var(--line);
}
.list-table th.col-subject { text-align: left; }
.list-table td {
    padding: 14px var(--s4); text-align: center; white-space: nowrap;
    font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--line);
}
.list-table tbody tr:first-child td { border-top: 0; }
.list-table tr:hover td { background: var(--row-hover); }
.list-table td.col-subject {
    text-align: left; color: var(--fg); font-size: var(--t-md); font-weight: 500; letter-spacing: -.01em;
    width: 100%; max-width: 1px; overflow: hidden; text-overflow: ellipsis;
}
.list-table .col-no { width: 60px; }
.list-table .col-chk { width: 44px; }   /* 손가락 터치 권장치(44px)에 맞춘 선택 칸 */

/* 모바일 카드 (표 변형 전용) */
.list-cards { display: none; }
.list-cards li { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.list-cards li:first-child { border-top: 0; }
.list-cards .s { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); }
.list-cards .s .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; min-width: 0; flex: 0 1 auto; }
.list-cards .m { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.list-cards .m span + span::before { content: "·"; margin: 0 var(--s1); opacity: .5; }

@media (max-width: 620px) {
    .list-table-wrap { display: none; }
    .list-cards { display: block; }
    /* 표 헤더의 전체선택이 사라지므로 도구 줄을 항상 보여주고 라벨을 대신 쓴다 */
    .list-tools { display: flex; }
    .chk-all-label { display: inline-flex; }
}

/* ═══════════ 목록 변형 2 · 미니멀 — 여백 넓은 행 ═══════════ */
.list-simple { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; }
.list-simple li { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.list-simple li:first-child { border-top: 0; }
.list-simple li:hover { background: var(--row-hover); }
.list-simple .s { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-lg); font-weight: 600; margin-bottom: var(--s1); }
.list-simple .s .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.list-simple .m { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.list-simple .m span + span::before { content: "·"; margin: 0 var(--s2); opacity: .5; }

/* ═══════════ 목록 변형 3 · 소셜 피드 카드 (L3) ═══════════ */
.list-card { display: flex; flex-direction: column; gap: var(--s3); }
.list-card > li {
    display: flex; gap: var(--s3); align-items: flex-start;
    background: var(--card); border-radius: var(--r-2xl);
    padding: var(--s4) var(--s5); box-shadow: var(--sh-md);
    transition: transform .15s, box-shadow .15s;
}
.list-card > li:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.list-card .ava {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--chip-bg); color: var(--chip-fg); font-size: var(--t-sm); font-weight: 700;
}
.list-card .thumb { flex: none; width: 72px; height: 72px; border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
.list-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list-card .info { min-width: 0; flex: 1; }
.list-card .s { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--s1); }
.list-card .s .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.list-card .m { display: flex; gap: var(--s3); font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ═══════════ 목록 변형 4 · 갤러리 그리드 ═══════════ */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); }
.gallery-card {
    background: var(--card); border-radius: var(--r-xl); overflow: hidden;
    box-shadow: var(--sh-md); transition: transform .15s, box-shadow .15s;
}
.gallery-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.gallery-thumb { display: block; aspect-ratio: 4 / 3; background: var(--row-hover); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: #fff; font-size: var(--t-sm); font-weight: 700; opacity: .85; }
.gallery-info { padding: var(--s3) var(--s4) var(--s4); }
.gallery-subject { display: flex; align-items: center; gap: var(--s2); font-weight: 600; margin-bottom: var(--s1); }
.gallery-subject a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.gallery-info .m { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.gallery-info .m span + span::before { content: "·"; margin: 0 var(--s1); opacity: .5; }

/* ═══════════ 글 읽기 ═══════════ */
.post { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; }
.post-head { padding: var(--s5) var(--s5) 0; }
.post-head h3 { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-xl); font-weight: 700; margin-bottom: var(--s2); }
/* baseline — 글자 크기가 다른 항목(post-ip)과 아이콘이 붙은 이름이 한 줄에 맞게 */
.post-meta { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.post-content { padding: var(--s5); font-size: var(--t-lg); line-height: 1.8; overflow-wrap: break-word; }
.post-files, .post-links { padding: var(--s3) var(--s5); border-top: 1px solid var(--line); font-size: var(--t-sm); }
/* ═══════════ 설문조사 ═══════════ */
/* 첫 화면 카드 — 순정 tail.php 의 poll() 자리 */
.poll-card .poll-subject { font-weight: 600; margin: var(--s2) 0 var(--s3); }
.poll-card .poll-admin { margin-left: auto; font-size: var(--t-sm); color: var(--muted); }
.poll-items { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.poll-items li { display: flex; align-items: center; gap: var(--s2); }
.poll-items label { cursor: pointer; }
.poll-acts { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* 결과 — 막대 길이(width)는 순정이 계산해 인라인으로 준다 */
.poll-result + .card, .poll-etc + .card { margin-top: var(--s4); }
.poll-bars { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s3); }
/* .card li 는 목록 한 줄을 가로로 늘어놓는다. 아래 둘은 한 줄 안에서 위아래로 쌓이는 구조라
   그 규칙을 되돌린다. 안 되돌리면 내용이 없는 .poll-bar 가 flex 항목으로 쪼그라들어 폭이 0이
   되고(막대가 통째로 사라진다), 기타의견은 이름 줄과 본문이 옆으로 붙는다 */
.poll-bars > li { display: block; padding: 0; }
.poll-etc-list > li { display: block; }
.poll-bar-head { display: flex; align-items: baseline; gap: var(--s3); justify-content: space-between; font-size: var(--t-sm); }
.poll-bar-label { font-weight: 600; overflow-wrap: anywhere; }
.poll-bar { height: 10px; border-radius: var(--r-md); background: var(--line); overflow: hidden; }
.poll-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.poll-etc-form { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s3) 0; }
.poll-etc-form .frm_input { flex: 1 1 12rem; }
/* 여기는 테두리를 가진 독립 입력창과 버튼이 나란히 선다. 입력은 본문 줄높이를 받아 39px,
   버튼은 35px 라 4px 이 뜬다. 버튼 높이를 숫자로 박지 않고 줄에 맞춰 늘린다 —
   입력 높이가 나중에 바뀌어도 따라온다.
   (검색 알약 .bbs-search 는 사정이 다르다. 그 안의 입력은 테두리 없는 부속이라
    버튼과 높이를 맞출 대상이 아니다) */
.poll-etc-form .btn { align-self: stretch; }
.poll-etc-captcha { margin-bottom: var(--s3); }
.poll-etc-name { white-space: nowrap; }

/* 인기검색어 — 검색 모달 안, 검색어를 아직 안 쳤을 때만 보이는 자리.
   ol 은 위 176행의 목록 초기화가 ul 만 다루므로 여기서 따로 지운다 */
.search-popular { margin-top: var(--s4); }
.search-popular h3 { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s2); }
.search-popular ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--s2); counter-reset: pop;
}
.search-popular li { counter-increment: pop; display: flex; }
.search-popular a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--s1) var(--s3); border-radius: var(--r-lg);
    background: var(--line); font-size: var(--t-sm); line-height: 1.7;
}
.search-popular a::before {
    content: counter(pop);
    font-size: 11px; font-weight: 700; color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.search-popular a:hover { background: var(--teal-soft); color: var(--teal-deep); }
.search-popular a:hover::before { color: var(--teal-deep); }

/* 이미지 크게보기 — 새 탭 대신 같은 자리에서 연다.
   그림은 화면 안에 온전히 담기게 줄이고, 배경 어디를 눌러도 닫힌다 */
.lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 18, 30, .82); }
.lightbox-body { position: relative; margin: 0; padding: var(--s4); max-width: 100%; max-height: 100%; }
.lightbox-body img {
    /* 아래쪽은 도구 막대, 위쪽은 닫기 버튼 자리를 비운다 — 화면맞춤 상태에서
       그림이 가려지지 않게 한다 (확대하면 넘치는 것이 당연하므로 그대로 둔다) */
    display: block; max-width: min(92vw, 1400px); max-height: calc(100vh - 132px);
    width: auto; height: auto; object-fit: contain;
    border-radius: var(--r-md); box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.lightbox-close {
    position: absolute; top: var(--s3); right: var(--s3); z-index: 1;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .16); color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .3); }
.lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 확대·축소 도구 — 게시판 '이미지 폭'보다 작은 그림은 순정이 줄이지 않아
   이미 원본 크기로 보인다. 띄우기만 해서는 하나도 커지지 않으므로 배율을 준다 */
.lightbox-body img {
    transform-origin: center center; transition: transform .12s ease-out;
    /* 끌어서 옮기려면 브라우저 기본 동작을 비켜 줘야 한다 —
       user-drag 는 그림을 다른 곳으로 끌어다 놓기, touch-action 은 손가락 스크롤 */
    -webkit-user-drag: none; user-select: none; -webkit-user-select: none; touch-action: none;
}
.lightbox-body img.is-zoomed { transition: none; }
/* 확대하면 그림이 화면 밖으로 나가므로, 끌 수 있는 자리는 상자 전체다 */
.lightbox.is-zoomed { cursor: grab; touch-action: none; }
.lightbox.is-zoomed:active { cursor: grabbing; }
.lightbox.is-zoomed .lightbox-tools, .lightbox.is-zoomed .lightbox-close { cursor: default; }
.lightbox.is-zoomed .lightbox-tools button, .lightbox.is-zoomed .lightbox-close { cursor: pointer; }
.lightbox-tools {
    position: absolute; left: 50%; bottom: var(--s4); transform: translateX(-50%); z-index: 1;
    display: flex; align-items: center; gap: var(--s1);
    padding: var(--s1); border-radius: var(--r-xl);
    background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px);
}
.lightbox-tools button {
    display: grid; place-items: center; width: 38px; height: 38px;
    border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer;
}
.lightbox-tools button:hover { background: rgba(255, 255, 255, .22); }
.lightbox-tools button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.lightbox-tools svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lightbox-pct {
    min-width: 4.2em; text-align: center; color: #fff;
    font-size: var(--t-sm); font-variant-numeric: tabular-nums; cursor: help;
}
/* 원본보다 크게 늘린 상태 — 흐린 것이 설정 탓이 아니라 원본 한계임을 알린다 */
.lightbox-pct.over { color: #FFD166; }

/* 원본을 받아오는 동안 — 화면에 있던 그림을 먼저 띄워 두므로 빈 화면은 없다.
   더 선명한 것이 오는 중임만 알린다 */
.lightbox.is-loading .lightbox-body::after {
    content: '원본 불러오는 중…';
    position: absolute; left: 50%; top: var(--s4); transform: translateX(-50%);
    padding: var(--s1) var(--s3); border-radius: var(--r-lg);
    background: rgba(10, 18, 30, .72); color: #fff; font-size: var(--t-sm);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}

/* 눌러서 크게 볼 수 있다는 표시 — 없으면 클릭 가능한 줄 알 길이 없다 */
a.view_image { position: relative; display: inline-block; cursor: zoom-in; }
a.view_image::after {
    content: ''; position: absolute; right: var(--s2); bottom: var(--s2);
    width: 34px; height: 34px; border-radius: 50%;
    /* 어두운 그림 위에서 원이 묻히지 않게 옅은 테두리를 두른다 */
    background-color: rgba(10, 18, 30, .72);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 2px 8px rgba(0, 0, 0, .35);
    background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2M8.5 11h5M11 8.5v5'/%3E%3C/svg%3E");
    opacity: 0; transition: opacity .15s; pointer-events: none;
}
a.view_image:hover::after, a.view_image:focus-visible::after { opacity: 1; }
/* 손가락으로 쓰는 화면에는 hover 가 없으니 항상 옅게 띄워 둔다 */
@media (hover: none) {
    a.view_image::after { opacity: .85; }
}

/* 접속자 카드 — 첫 화면에만 둔다 (헤더에서 따라다니지 않는다) */
.connect-card .connect-now { display: flex; align-items: baseline; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.connect-card .connect-num { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.connect-card .connect-split { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* 이미지 첨부 — 순정처럼 본문 위에 온다. 제목단(.post-head)이 아래 여백을 0 으로
   두고 본문이 제 위쪽 여백을 가지므로, 여기서는 위쪽만 띄운다 */
.post-images { padding: var(--s4) var(--s5) 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.post-images img { max-width: 100%; height: auto; border-radius: var(--r-md); }

/* 댓글 — 소셜 피드 느낌 */
.comments { margin-top: var(--s5); }
.comments h4 { font-size: var(--t-md); font-weight: 700; margin-bottom: var(--s3); }
.comment {
    background: var(--card); border-radius: var(--r-lg); padding: var(--s3) var(--s4);
    box-shadow: var(--sh-sm); margin-bottom: var(--s2);
}
.comment-meta { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-sm); margin-bottom: var(--s1); }
.comment-meta .name { font-weight: 700; }
.comment-acts { display: inline-flex; gap: var(--s2); margin-left: auto; }
.comment-body { font-size: var(--t-base); line-height: 1.7; overflow-wrap: break-word; }
.comment-form {
    display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4);
    background: var(--card); border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--sh-sm);
}
.comment-form textarea { width: 100%; min-height: 84px; }
.comment-form .btn { align-self: flex-end; }
/* 답글·수정 때 댓글 바로 아래로 옮겨 붙은 상태 */
.comment-form.inline { margin: 0 0 var(--s3); border: 1px solid var(--accent); }
.comment-form-state { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); font-weight: 700; color: var(--accent); }
.comment-form-state .c-cancel { margin-left: auto; }

/* ═══════════ 폼 ═══════════ */
.write-form, .member-box form {
    display: flex; flex-direction: column; gap: var(--s4);
    background: var(--card); border-radius: var(--r-xl); padding: var(--s5); box-shadow: var(--sh-md);
}
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label { font-size: var(--t-sm); font-weight: 700; }
.field label .muted { font-weight: 400; }
.field input[type=text], .field input[type=password], .field input[type=email], .field select { width: 100%; }
.field textarea { width: 100%; min-height: 220px; }
/* 이미 붙어 있는 파일 — 이름과 '삭제' 를 한 줄에 둔다 */
.file-now { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-sm); }
.file-now .file-size { font-variant-numeric: tabular-nums; }
.file-del { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 400; cursor: pointer; }
/* 삭제를 켜면 그 줄이 지워질 것임을 색으로 알린다 */
.file-now:has(.file-del input:checked) .muted { text-decoration: line-through; }
.file-now:has(.file-del input:checked) .file-del { color: var(--danger); font-weight: 700; }
.field-inline { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--t-sm); }

/* ── 가입·정보수정 폼 ── 칸만 늘어놓으면 어디까지 왔는지, 무엇이 필수인지 알 수 없다.
   제목단 + 뜻으로 묶은 구역 + 칸 아래 설명, 세 가지로 읽는 순서를 만든다. */
.auth-head { display: flex; flex-direction: column; gap: var(--s2); text-align: center; }
.auth-head h2 { font-size: var(--t-xl); font-weight: 700; }
.auth-sub { font-size: var(--t-sm); color: var(--muted); }
/* 단계 — 약관 동의를 지나왔음을 보여 준다. 지금 단계만 진하게 */
/* 지금 단계는 em, 나머지는 span. 화살표는 둘째 칸 앞에 붙여 두 화면(1·2단계)이 같은 규칙을 쓴다
   — 화살표를 span 에 매달면 단계가 바뀔 때 위치가 따라 움직인다 */
.auth-step { display: flex; align-items: center; justify-content: center; gap: var(--s2);
    font-size: var(--t-xs); color: var(--muted); }
.auth-step > *:not(:first-child)::before { content: '›'; margin-right: var(--s2); }
.auth-step em { font-style: normal; font-weight: 700; color: var(--fg); }
.auth-foot { text-align: center; font-size: var(--t-sm); color: var(--muted); }
.auth-foot a { font-weight: 700; }

/* 구역 — 카드 안에서 선 하나로만 나눈다(카드 속 카드는 무겁다) */
.form-sec { display: flex; flex-direction: column; gap: var(--s3); }
.form-sec + .form-sec { padding-top: var(--s3); border-top: 1px solid var(--line); }
.form-sec > h3 { font-size: var(--t-sm); font-weight: 700; color: var(--muted);
    letter-spacing: .04em; }

/* 짧은 칸 둘을 한 줄에. 좁아지면 알아서 쌓인다 */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }
/* 주소 칸들은 한 묶음이라 줄 사이를 더 붙인다 */
.field .field-row { gap: var(--s2); }
/* 우편번호 + 검색 버튼 — 번호칸은 딱 필요한 만큼만.
   `.field input[type=text] { width:100% }` 가 더 구체적이라 그냥 `.addr-zip input` 으로는
   밀린다(입력칸이 줄을 다 먹고 버튼이 세로로 접혔다). 같은 구체성으로 되받는다. */
/* align-items 를 주지 않는다 — flex 기본값 stretch 라 버튼 높이가 입력칸에 저절로 맞는다
   (center 로 두면 버튼만 작게 남는다). 글자 크기·모서리도 입력칸 쪽에 맞춘다. */
.addr-zip { display: flex; gap: var(--s2); }
.field .addr-zip input[type=text] { width: 132px; flex: none; }
/* 주문서의 우편번호 줄도 같은 문제를 안고 있었다 — 두 곳을 한 규칙으로 맞춘다 */
.addr-zip .btn-ghost, .cart-co-zip .btn-ghost {
    flex: none; white-space: nowrap;
    padding: 0 var(--s3); font-size: var(--t-sm); border-radius: var(--r-input);
}

/* 필수 표시 — 라벨 글자 뒤에 붙는다 */
.field .req::after, .req-mark { color: var(--danger); font-weight: 700; }
.field .req::after { content: ' *'; }

/* 검사 결과 — 있을 때만 나온다 */
.field-msg { font-size: var(--t-xs); font-weight: 600; }
/* 통과 문구에 초록을 쓰지 않는 이유: 이 템플릿은 보조색을 전부 중성으로 접고 강조색 하나로
   간다(:root 주석). 초록을 새로 들이면 그 규칙이 깨지므로 긍정은 강조색, 문제는 danger 로 가른다 */
.field-msg.is-ok { color: var(--accent-deep); }
.field-msg.is-err { color: var(--danger-deep); }
/* 문제가 있는 칸은 테두리로도 알린다 — 글자 하나만으로는 어느 칸인지 눈이 못 찾는다 */
.field input.is-invalid { border-color: var(--danger); }

/* 비밀번호 눈 — 칸 오른쪽 안에 앉는다. 감싸개를 블록으로 두어 원래의 100% 폭을 지키고,
   글자가 아이콘 밑으로 들어가지 않게 그만큼 오른쪽 여백을 준다.
   동작은 theme.js 가 .pw-wrap 단위로 맡는다 — 다른 화면도 이 두 조각만 그대로 옮기면 된다. */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 42px; }
.pw-eye {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; cursor: pointer;
    background: none; border: 0; border-radius: var(--r-full); color: var(--muted);
    transition: color .15s ease, background .15s ease;
}
.pw-eye:hover { color: var(--fg); background: var(--bg); }
.pw-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-eye-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; }
/* 가려진 상태에서는 '보기(눈)' 를, 드러난 상태에서는 '숨기기(눈 가림)' 를 보여 준다 */
.pw-eye .pw-eye-hide { display: none; }
.pw-eye.is-on .pw-eye-show { display: none; }
.pw-eye.is-on .pw-eye-hide { display: block; }
.pw-eye.is-on { color: var(--accent); }

.member-box { max-width: 420px; margin: var(--s5) auto; display: flex; flex-direction: column; gap: var(--s4); }
.member-box.wide { max-width: 680px; }
.member-box.center {
    text-align: center; align-items: center; background: var(--card);
    border-radius: var(--r-xl); padding: var(--s7) var(--s5); box-shadow: var(--sh-md);
}
.member-box > h2 { font-size: var(--t-xl); font-weight: 700; text-align: center; }
.auto-login { font-size: var(--t-sm); color: var(--muted); }
/* 버튼 둘을 한 줄에 — 세로 flex 인 카드(.member-box) 안에서 가로로 세우는 감싸개 */
.btn-row { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
/* 폼 맨 위의 설명 한 문단 (회원정보 찾기 등) */
.form-lead { font-size: var(--t-sm); color: var(--muted); line-height: 1.7; margin: 0; }

/* 알림·확인 화면 (alert·alert_close·confirm) — 스크립트가 도는 동안 잠깐 보이고,
   JS 를 끈 브라우저에서는 이것이 화면 전부가 된다 */
.msg-head { font-size: var(--t-sm); font-weight: 700; color: var(--muted); margin: 0 0 var(--s2); }
.msg-body { font-size: var(--t-lg); font-weight: 600; line-height: 1.7; margin: 0; overflow-wrap: break-word; }
.msg-note { font-size: var(--t-sm); color: var(--muted); margin: var(--s3) 0 0; }
.msg-btns { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s5); }
.msg-btns.row { flex-direction: row; }
.msg-btns.row .btn { flex: 1; justify-content: center; }
.msg-card { margin-top: 8vh; text-align: center; }
.msg-card .popup-title { font-size: var(--t-lg); color: var(--muted); font-weight: 700; }

/* 이미지 뷰어 — 순정 스크립트가 창을 이미지 크기에 맞추므로 여백·제목을 두지 않는다 */
.popup--bare { max-width: none; padding: 0; background: none; box-shadow: none; }
.popup--bare .popup-title { display: none; }

/* 회원 프로필 팝업 (bbs/profile.php) */
.pf-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.pf-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg); }
.pf-nick { font-size: var(--t-lg); font-weight: 800; }
.pf-sub { font-size: var(--t-sm); color: var(--muted); }
.pf-list { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); font-size: var(--t-sm); }
.pf-list dt { color: var(--muted); font-weight: 600; white-space: nowrap; }
.pf-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pf-intro { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pf-intro h2 { font-size: var(--t-sm); font-weight: 700; color: var(--muted); margin-bottom: var(--s2); }
.pf-intro-body { font-size: var(--t-md); line-height: 1.7; overflow-wrap: break-word; }

/* 폼 안의 라벨 없는 항목 제목 (메일 형식 고르기 등) */
.field-label { font-size: var(--t-sm); font-weight: 700; }

/* 배송지 목록 팝업 (shop/orderaddress.php) */
.addr-list { display: flex; flex-direction: column; gap: var(--s2); }
.addr-list li { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: var(--s3) var(--s4); }
.addr-top { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.addr-subject { flex: 1; min-width: 0; }
.addr-body { font-size: var(--t-sm); line-height: 1.6; }
.addr-body b { margin-right: var(--s2); }
.addr-acts { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.addr-acts .btn { flex: none; }
.addr-default { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t-sm); color: var(--muted); }
.addr-acts .linklike { margin-left: auto; }

/* 쿠폰 팝업 (shop/coupon.php) */
.cou-list { display: flex; flex-direction: column; gap: var(--s2); }
.cou-list li { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: var(--s3) var(--s4); }
.cou-top { display: flex; align-items: baseline; gap: var(--s2); }
.cou-tit { font-weight: 700; }
.cou-pri { margin-left: auto; font-size: var(--t-lg); font-weight: 800; color: var(--accent); }
.cou-meta { display: flex; gap: var(--s3); margin-top: var(--s1); font-size: var(--t-xs); color: var(--muted); }
.login-links { display: flex; justify-content: center; gap: var(--s4); font-size: var(--t-sm); color: var(--muted); }
/* 본인인증으로 찾기 — 메일 찾기 아래의 두 번째 길. '또는' 을 선으로 갈라 두 수단을 구분한다 */
.auth-alt { display: flex; flex-direction: column; gap: var(--s3); }
.auth-alt-or { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-xs); color: var(--muted); }
.auth-alt-or::before, .auth-alt-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-alt-lead { font-size: var(--t-sm); color: var(--muted); text-align: center; }
.auth-alt-btns { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; }
.auth-alt-btns .btn-ghost { flex: 1 1 auto; padding: var(--s2) var(--s3); font-size: var(--t-sm); }
/* 자동로그인과 찾기 링크를 양 끝으로 — 로그인 폼의 흔한 배치 */
.login-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    font-size: var(--t-sm); }
.login-row .auto-login { display: flex; align-items: center; gap: var(--s2); cursor: pointer; }
/* 확인 화면에서 "누구로 확인하는지" — 옅은 면에 아이디만 */
.confirm-who { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--t-sm);
    padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--row-hover); }

.stip { display: flex; flex-direction: column; gap: var(--s2); }
.stip h3 { font-size: var(--t-md); font-weight: 700; }
.stip textarea { width: 100%; min-height: 150px; font-size: var(--t-sm); color: var(--muted); }
/* 전체 동의 — 개별 동의보다 한 칸 무겁게. 누를 수 있는 줄이라 경계는 --btn-line 을 쓴다 */
.stip-all {
    display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
    padding: var(--s3) var(--s4); cursor: pointer;
    border: 1px solid var(--btn-line); border-radius: var(--r-md); background: var(--row-hover);
}
.stip-all .muted { font-size: var(--t-sm); }

/* ═══════════ 쪽지·포인트 ═══════════ */
.memo-box { max-width: 820px; margin: 0 auto; }
.point-plus { color: var(--accent); font-weight: 700; }
.point-minus { color: var(--danger); font-weight: 700; }
.list-table tr.read td.col-subject { color: var(--muted); font-weight: 400; }

/* ═══════════ 검색 결과 ═══════════ */
/* 검색 결과 머리말 — 메인 히어로와 같은 처리다. 파란 배너 + 장식 원 + 어두운 막을 걷어냈다.
   찾은 것을 보러 온 화면인데 머리말이 가장 진한 덩어리면 정작 결과가 뒤로 밀린다.
   찾은 말과 건수만 크게 적고 나머지는 아래 목록에 넘긴다 */
.search-summary { margin-bottom: var(--s6); padding: var(--s4) 0 0; }
.search-summary h2 { font-size: var(--t-2xl); letter-spacing: -.025em; margin-bottom: var(--s2); }
.search-summary p { margin: 0; font-size: var(--t-md); color: var(--muted); }
.search-group { margin-bottom: var(--s6); }
.search-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.search-group-head h3 { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-md); font-weight: 700; }
.search-group .list-simple .muted { font-size: var(--t-sm); margin-bottom: var(--s1); }

/* ═══════════ 사이드뷰 (순정 get_sideview) ═══════════ */
.sv_wrap { position: relative; display: inline-block; font-weight: inherit; }
/* 아래 규칙은 .sv_wrap 안이라는 전제를 두지 않는다 — theme.js 가 열릴 때 .sv 를 body 로
   꺼내기 때문이다 (카드의 overflow·transform 에 갇히지 않게). 조상에 기대면 스타일이 빠진다. */
.sv {
    display: none; position: absolute; top: 100%; left: 0; z-index: 100;
    min-width: 130px; margin-top: var(--s1);
    background: var(--pop); border: 1px solid var(--pop-line);
    border-radius: var(--r-md); padding: var(--s2); box-shadow: var(--sh-md);
}
.sv a { display: block; padding: var(--s1) var(--s2); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 400; color: var(--muted); white-space: nowrap; }
.sv a:hover { background: var(--bg); color: var(--fg); }
.sv_on { display: block; }
.sv img { display: none; }
.sv_member, .sv_guest { color: inherit; }
/* 회원 아이콘(순정 cf_use_member_icon) — 크기가 설정값 그대로면 글자 줄을 밀어낸다.
   작은 원형으로 고정하고 글자 가운데에 맞춰 띄운다. */
.profile_img img {
    width: 18px; height: 18px; margin-right: 2px;
    border-radius: 50%; object-fit: cover; vertical-align: -4px;
}

/* ═══════════ 레이어팝업 ═══════════ */
.layer-popup {
    position: absolute; z-index: 100; background: var(--card);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg);
}
.layer-popup-body { padding: var(--s4); }
.layer-popup-foot {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s4); border-top: 1px solid var(--line); font-size: var(--t-sm);
}

/* ═══════════ 모바일 ═══════════ */
@media (max-width: 620px) {
    .wrap { padding: 0 var(--s4); }
    .site-header .wrap { gap: var(--s2); padding-top: var(--s3); padding-bottom: var(--s3); }

    .header-util { margin-left: auto; gap: var(--s1); }
    .login-link { padding: var(--s1) var(--s2); }
    .search-panel { margin-top: 6vh; padding: var(--s4); border-radius: var(--r-xl); }
    .profile-menu { min-width: 190px; }
    .site-main { padding: var(--s4) var(--s4) var(--s6); }
    .hero { padding: var(--s5) var(--s4); border-radius: var(--r-xl); }
    .hero h2 { font-size: var(--t-xl); }
    .bbs-toolbar { flex-direction: column; align-items: stretch; }
    /* stretch 만으로는 폭이 확정되지 않아 자식(입력창)이 안 줄어든다 → 명시적으로 채운다 */
    .bbs-search { max-width: none; width: 100%; }
    .bbs-search select { flex: none; max-width: 40%; }
    .bbs-actions { justify-content: flex-end; width: 100%; }
    .post-content { font-size: var(--t-md); padding: var(--s5) var(--s4); }
    .post-head, .post-files, .post-links, .post-images { padding-left: var(--s4); padding-right: var(--s4); }
    .list-simple li { padding: var(--s3) var(--s4); }
    .list-card > li { padding: var(--s3) var(--s4); border-radius: var(--r-xl); }
    .write-form, .member-box form { padding: var(--s4); }
    .layer-popup { position: static; width: auto !important; margin: var(--s3) 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ═══════════ 쇼핑몰 ═══════════ */
.shop-block { margin-bottom: var(--s6); }
.shop-sort { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); font-size: var(--t-sm); }
.shop-sort a { color: var(--muted); font-weight: 600; padding: var(--s1) var(--s2); }
.shop-sort a.active { color: var(--accent); }

.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s4); }
.item-card {
    background: var(--card); border-radius: var(--r-xl); overflow: hidden;
    box-shadow: var(--sh-md); transition: transform .15s, box-shadow .15s;
}
.item-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.item-thumb { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--bg); }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-noimg {
    display: flex; align-items: center; justify-content: center; height: 100%;
    color: var(--muted); font-size: var(--t-sm);
}
.item-soldout {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(15,22,33,.55); color: #fff; font-weight: 800; font-size: var(--t-lg);
}
.item-sale {
    position: absolute; top: var(--s2); left: var(--s2);
    background: var(--danger); color: #fff; font-size: var(--t-xs); font-weight: 800;
    border-radius: var(--r-full); padding: 2px var(--s2);
}
.item-info { padding: var(--s3) var(--s4) var(--s4); }
.item-name {
    display: block; font-size: var(--t-md); font-weight: 600; margin-bottom: var(--s2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-price { display: flex; align-items: baseline; gap: var(--s2); font-variant-numeric: tabular-nums; }
.item-price del { color: var(--muted); font-size: var(--t-sm); }
.item-price strong { font-size: var(--t-lg); font-weight: 800; }
.item-price .won { font-size: var(--t-sm); font-weight: 600; margin-left: 1px; }

/* 상품 상세 */
.item-detail { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: var(--s6); align-items: start; }
.item-detail-photo {
    background: var(--card); border-radius: var(--r-2xl); overflow: hidden;
    box-shadow: var(--sh-md); aspect-ratio: 1 / 1;
}
.item-detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-detail-body { min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.item-detail-name { font-size: var(--t-2xl); font-weight: 800; }
.item-detail-price { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.item-detail-price del { color: var(--muted); }
.item-detail-price strong { font-size: var(--t-2xl); font-weight: 800; }
.item-sale-txt { color: var(--danger); font-weight: 800; font-size: var(--t-md); }

.item-spec {
    display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4);
    margin: 0; padding: var(--s4); background: var(--card);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm); font-size: var(--t-sm);
}
.item-spec dt { color: var(--muted); font-weight: 600; }
.item-spec dd { margin: 0; font-variant-numeric: tabular-nums; }
.item-basic { font-size: var(--t-md); color: var(--muted); }

/* 순정 구입폼을 감싸는 카드 — 내부 마크업은 순정 그대로 */
.item-form {
    background: var(--card); border-radius: var(--r-xl); padding: var(--s4);
    box-shadow: var(--sh-md); overflow-x: auto;
}
.item-form table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.item-form th, .item-form td { padding: var(--s2); text-align: left; }
.item-form input[type=text], .item-form select { max-width: 100%; }
.item-form .btn_cart, .item-form .btn_buy, .item-form input[type=submit], .item-form button {
    font: inherit; font-size: var(--t-md); font-weight: 700; cursor: pointer;
    border-radius: var(--r-btn); padding: var(--s3) var(--s5); border: 1px solid var(--accent);
    background: var(--accent); color: var(--accent-fg);
}
.item-form .btn_cart { background: var(--card); color: var(--accent); }

.item-explan { margin-top: var(--s6); }
.item-explan h3 { font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--s3); }
.item-explan .post-content { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); }

@media (max-width: 720px) {
    .item-detail { grid-template-columns: 1fr; gap: var(--s4); }
    .item-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
}

/* ═══════════ 장바구니·주문서 ═══════════ */
.cart-empty { text-align: center; padding: var(--s6) 0; }
.cart-empty .btn { margin-top: var(--s3); }

.cart-table td.col-subject { white-space: normal; }
.cart-prd { display: flex; align-items: center; gap: var(--s3); }
.cart-thumb { flex: none; width: 56px; height: 56px; border-radius: var(--r-md); overflow: hidden; background: var(--bg); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-prd-info { min-width: 0; }
.cart-name { font-weight: 600; }
.cart-opt { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s1); }
.cart-opt table { font-size: var(--t-xs); }
.cart-sum strong { font-size: var(--t-lg); color: var(--fg); }

.cart-total {
    margin-top: var(--s4); padding: var(--s4) var(--s5);
    background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md);
}
.cart-total dl {
    display: grid; grid-template-columns: 1fr auto; gap: var(--s3) var(--s4);
    margin: 0; font-size: var(--t-md); font-variant-numeric: tabular-nums;
}
.cart-total dt { color: var(--muted); }
.cart-total dd { margin: 0; text-align: right; font-weight: 600; }
.cart-total .cart-total-key {
    color: var(--fg); font-size: var(--t-lg); font-weight: 700;
    padding-top: var(--s3); border-top: 1px solid var(--line);
}
.cart-total .cart-total-val {
    padding-top: var(--s3); border-top: 1px solid var(--line);
    font-size: var(--t-2xl); font-weight: 800; color: var(--accent);
}
.cart-total .won { font-size: var(--t-lg); margin-left: 2px; }

/* 순정 주문폼을 감싸는 카드 — 내부 마크업은 순정 그대로 둔다 */
.order-form {
    background: var(--card); border-radius: var(--r-xl); padding: var(--s5);
    box-shadow: var(--sh-md); overflow-x: auto;
}
.order-form table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.order-form th, .order-form td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--line); }
.order-form th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.order-form h2, .order-form h3 { font-size: var(--t-lg); font-weight: 700; margin: var(--s5) 0 var(--s3); }
.order-form h2:first-child, .order-form h3:first-child { margin-top: 0; }
.order-form input[type=text], .order-form input[type=password], .order-form select, .order-form textarea { max-width: 100%; }
.order-form button, .order-form input[type=submit], .order-form input[type=button], .order-form .btn_submit {
    font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer;
    border-radius: var(--r-btn); padding: var(--s2) var(--s4);
    border: 1px solid var(--line); background: var(--card); color: var(--fg);
}
.order-form .btn_submit, .order-form input[type=submit] {
    border-color: var(--accent); background: var(--accent); color: var(--accent-fg);
    padding: var(--s3) var(--s6); font-size: var(--t-md);
}

/* ═══════════ 내용 페이지 (bbs/content.php — 회사소개·약관 등) ═══════════ */
/* 폭은 헤더·게시판과 같은 컨테이너(.wrap 1080)를 그대로 쓴다 */
.ctt-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.ctt-hero h2 { margin-bottom: 0; }
.ctt-admin {
    position: relative; z-index: 2; flex-shrink: 0;
    font-size: var(--t-sm); font-weight: 700; padding: var(--s2) var(--s3);
    border-radius: var(--r-btn); background: rgba(255,255,255,.22); color: #fff;
}
.ctt-admin:hover { background: rgba(255,255,255,.36); color: #fff; }
.ctt-img { margin-bottom: var(--s4); }
.ctt-img img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-md); }

/* 본문 타이포그래피 — DB 내용(HTML)이 그대로 담기는 영역 */
.ctt-body { padding: var(--s6); font-size: var(--t-md); line-height: 1.8; }
.ctt-body h2 { font-size: var(--t-xl); margin: var(--s6) 0 var(--s3); }
.ctt-body h3 { font-size: var(--t-lg); margin: var(--s5) 0 var(--s2); }
.ctt-body h2:first-child, .ctt-body h3:first-child, .ctt-body p:first-child { margin-top: 0; }
.ctt-body p { margin: 0 0 var(--s3); }
.ctt-body ul, .ctt-body ol { margin: 0 0 var(--s3); padding-left: 1.3em; }
.ctt-body ul li { list-style: disc; margin-bottom: var(--s1); }
.ctt-body ol li { list-style: decimal; margin-bottom: var(--s1); }
.ctt-body a { color: var(--accent); font-weight: 600; }
.ctt-body img { border-radius: var(--r-md); }
.ctt-body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s4); font-size: var(--t-base); }
.ctt-body th, .ctt-body td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--line); }
.ctt-body th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.ctt-body blockquote {
    margin: 0 0 var(--s3); padding: var(--s3) var(--s4);
    border-left: 3px solid var(--accent); background: var(--row-hover);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* 내용에서 클래스로 쓰는 구성요소 (관리자 내용관리에서 사용) */
.ctt-lead { font-size: var(--t-lg); line-height: 1.7; color: var(--fg); }
.ctt-lead strong { color: var(--accent); }
.ctt-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s4); margin: var(--s4) 0 var(--s5);
}
.ctt-feature { background: var(--row-hover); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s4); }
.ctt-feature .ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--r-md); margin-bottom: var(--s3);
    background: var(--accent-soft); color: var(--accent-deep); font-size: var(--t-lg);
}
.ctt-feature.t2 .ico { background: var(--teal-soft); color: var(--teal-deep); }
.ctt-feature.t3 .ico { background: var(--indigo-soft); color: var(--indigo); }
.ctt-feature strong { display: block; font-size: var(--t-md); margin-bottom: var(--s1); }
.ctt-feature p { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.ctt-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s3); margin: var(--s4) 0 var(--s5); text-align: center;
}
.ctt-stat { background: var(--row-hover); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s3); }
.ctt-stat strong { display: block; font-size: var(--t-2xl); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.ctt-stat span { font-size: var(--t-sm); color: var(--muted); }
.ctt-timeline { margin: 0 0 var(--s5); padding: 0; }
.ctt-body ul.ctt-timeline li {
    list-style: none; position: relative; padding: 0 0 var(--s4) var(--s5); margin: 0;
    border-left: 2px solid var(--line);
}
.ctt-body ul.ctt-timeline li:last-child { padding-bottom: 0; }
.ctt-timeline li::before {
    content: ""; position: absolute; left: -6px; top: 5px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.ctt-timeline strong { color: var(--accent); margin-right: var(--s2); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .ctt-body { padding: var(--s5) var(--s4); }
}


/* ═══════════ 팝업 창 (새 창으로 여는 작은 화면) ═══════════ */
.popup-body { background: var(--bg); }
.popup { padding: var(--s5); max-width: 560px; margin: 0 auto; }
.popup-title { font-size: var(--t-xl); margin-bottom: var(--s2); }
.popup-lead { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s4); }
.popup-lead b { color: var(--accent); font-weight: 700; }
.popup-btns { display: flex; gap: var(--s2); margin-top: var(--s4); }
.popup-btns .btn { flex: 1; justify-content: center; }

.move-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); padding: 0 var(--s1); }
.move-head .chk-all-label { display: inline-flex; }
.move-head .chk-count { margin-left: auto; }
.move-list { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; }
.move-list li { border-top: 1px solid var(--line); }
.move-list li:first-child { border-top: 0; }
.move-list li:hover { background: var(--row-hover); }
.move-list li.current { background: var(--accent-soft); }
.move-list label {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s3) var(--s4); cursor: pointer; font-size: var(--t-md);
}
.move-list .g { color: var(--muted); font-size: var(--t-sm); }
.move-list .g::after { content: "›"; margin-left: var(--s1); opacity: .6; }
.move-list .b { font-weight: 600; }
.move-list .t { color: var(--muted); font-size: var(--t-xs); font-family: ui-monospace, monospace; }

/* ── 카드형 소형 팝업 변형 (bbs/scrap_popin.php 등 본문이 폼 하나인 창) ── */
.popup--card {
    max-width: 520px;
    background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md);
}
/* 폼이 든 새 창(쪽지·메일 보내기)은 한 치수 넓다. 알림·확인 카드는 한 문장이라 520px 이
   읽기 좋은 폭이지만, 폼에는 자동등록방지처럼 가로로 긴 줄이 있어 그 폭에서는 줄이 접힌다.
   창 자체가 600~620px 이므로 560px 이 창을 넘지 않는 최대치다. */
.popup--form { max-width: 560px; }
.popup--card .popup-title { margin-bottom: var(--s4); }
.popup--card .popup-btns { justify-content: flex-end; }
.popup--card .popup-btns .btn { flex: 0 0 auto; }
.popup-subject {
    margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
    background: var(--row-hover); border: 1px solid var(--line);
    border-radius: var(--r-md); font-weight: 600;
}
.popup-label { display: block; font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s2); }
.popup textarea { width: 100%; min-height: 110px; }

/* ── 스크랩 목록 (bbs/scrap.php — win_scrap 창, 링크는 부모 창에서 열림) ── */
.scrap-list { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; }
.scrap-list li { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.scrap-list li:first-child { border-top: 0; }
.scrap-list li:hover { background: var(--row-hover); }
.scrap-list .s { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.scrap-list .s .chip { flex: 0 0 auto; }
.scrap-list .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrap-list .m { display: flex; gap: var(--s2); margin-top: var(--s1); color: var(--muted); font-size: var(--t-xs); }
.scrap-list li.bbs-empty { padding: var(--s7) 0; }

/* ═══════════ 게시판 설정에서 켜는 표시들 ═══════════ */
/* 관리자가 게시판 설정에 넣은 상단·하단 HTML — 우리 스타일을 강요하지 않는다 */
.board-extra { margin: var(--s4) 0; font-size: var(--t-md); }
.board-extra img { border-radius: var(--r-md); }

/* 카테고리 칩 — 목록·읽기 공용, 누르면 그 분류만 본다 */
.chip.cate { background: var(--chip-bg); color: var(--chip-fg); }
a.chip.cate:hover { background: var(--accent-soft); color: var(--accent-deep); }

/* 답변글 */
.reply-arrow { color: var(--muted); font-weight: 700; margin-right: 2px; }

/* 상태 아이콘 (비밀·인기·첨부·링크) */
.flag { display: inline-flex; vertical-align: -2px; color: var(--muted); }
.flag svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.flag.hot { color: var(--danger); }
.flag.hot svg { fill: currentColor; stroke: none; }

/* 목록 본문 미리보기·첨부 (bo_use_list_content / bo_use_list_file) */
.row-excerpt {
    margin: var(--s1) 0 0; font-size: var(--t-sm); color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row-files { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 0; }
.row-files a {
    font-size: var(--t-xs); font-weight: 600; color: var(--accent-deep);
    background: var(--accent-soft); border-radius: var(--r-btn); padding: 2px var(--s2);
}
.row-files a:hover { background: var(--accent); color: var(--accent-fg); }

/* 정렬 가능한 열 머리 */
.list-table th.col-sort a { display: inline-block; color: inherit; }
.list-table th.col-sort a:hover { color: var(--accent); }

/* 지금 읽고 있는 글 */
.list-table tr.current, .list-simple li.current, .list-card li.current { background: var(--accent-soft); }

/* 갤러리 열 수 — 게시판 설정 bo_gallery_cols */
.gallery-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ── 읽기 화면 ── */
.post-ip { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
/* 서명·추천 줄은 카드 안의 다른 구획(.post-files 등)과 같은 좌우 여백을 쓴다 */
.post-sign {
    padding: var(--s4) var(--s5); border-top: 1px dashed var(--line);
    font-size: var(--t-sm); color: var(--muted);
}

.post-react {
    display: flex; align-items: center; justify-content: center; gap: var(--s2); flex-wrap: wrap;
    padding: var(--s5);
}
.react {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s4); border-radius: var(--r-btn);
    background: var(--card); border: 1px solid var(--line); color: var(--fg);
    font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.react:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.react:disabled { opacity: .55; cursor: default; }

/* 추천은 파랑, 비추천은 빨강 — 같은 회색 버튼 둘이 나란히 있으면 어느 쪽을
   누르는지 색으로 갈리지 않았다. 위의 일반 규칙과 같은 특정도라 순서로 이긴다 */
.react-good:hover:not(:disabled)   { border-color: var(--accent); color: var(--accent); }
.react-nogood:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
/* 내가 누른 것은 채워 둔다 — 눌린 상태가 보여야 다시 눌러 취소할 생각을 한다 */
.react.is-on { transition: background-color .15s, border-color .15s, color .15s; }
.react-good.is-on   { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.react-nogood.is-on { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-deep); }
.react.is-on svg { fill: currentColor; fill-opacity: .2; }
.react svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.react b { font-variant-numeric: tabular-nums; }
.react-msg { font-size: var(--t-sm); font-weight: 700; color: var(--accent); }
/* 비어 있을 때도 flex gap 을 차지해 버튼이 4px 왼쪽으로 밀린다 */
.react-msg:empty { display: none; }
/* 공유 버튼도 같은 줄 가운데에 — 구분선 하나로 추천과 나눈다 */
.post-share { display: flex; gap: var(--s2); padding-left: var(--s3); border-left: 1px solid var(--line); }

/* 이전글은 왼쪽, 다음글은 오른쪽 — 한쪽만 있어도 제자리를 지킨다 */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s4); }
.post-nav-item {
    display: flex; align-items: center; gap: var(--s3); min-width: 0;
    padding: var(--s3) var(--s4); border-radius: var(--r-lg);
    background: var(--card); box-shadow: var(--sh-sm); font-size: var(--t-md);
}
.post-nav-item:hover { box-shadow: var(--sh-md); }
.post-nav-item.prev { grid-column: 1; }
.post-nav-item.next { grid-column: 2; flex-direction: row-reverse; }
.post-nav-item .k { flex: none; font-size: var(--t-sm); font-weight: 700; color: var(--muted); }
.post-nav-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-nav-item.next .t { text-align: right; }
.post-nav-item .d { flex: none; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    /* 좁은 화면에선 제목·날짜 없이 이전글/다음글 라벨만 */
    .post-nav-item .t, .post-nav-item .d { display: none; }
    .post-nav-item { justify-content: center; }
    .post-nav-item.next { flex-direction: row; }
}

/* 전체목록보이기 — 읽은 글 아래에 붙는 목록 */
.list-below { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.list-below-title { font-size: var(--t-lg); margin-bottom: var(--s3); }

/* ═══════════ 자동등록방지 (kcaptcha) ═══════════
   마크업은 순정 captcha_html() 그대로 — id 가 kcaptcha.js 와의 계약이라 건드리지 않는다.
   placeholder·inputmode 같은 속성만 extend/captcha_ui.extend.php 에서 얹는다.
   fieldset 을 flex 로 두면 legend 도 보통 항목처럼 배치된다.
   gap 을 0 으로 두는 이유 — 이미지와 입력칸을 맞붙여 한 덩어리로 읽히게 한다.
   떨어뜨려 놓으면 "그림 하나와 빈 칸 하나" 로 보여 무엇을 옮겨 적는지가 흐려진다. */
#captcha {
    display: flex; align-items: center; flex-wrap: wrap;
    /* 가로 간격은 0 — 이미지와 입력칸을 맞붙여 한 덩어리로 읽히게 한다.
       세로 간격만 준다: 카드가 좁으면(회원 화면은 420px) 버튼 둘이 다음 줄로 내려가는데,
       그때 줄끼리 붙어 있으면 눌러야 할 것이 입력칸에 얹힌 것처럼 보인다. */
    column-gap: 0; row-gap: var(--s2);
    margin: 0; padding: var(--s4);
    border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card);
}
#captcha legend, #captcha > legend {
    float: left; width: 100%; padding: 0; margin-bottom: var(--s3);
    font-size: var(--t-sm); font-weight: 700; color: var(--muted);
}

/* 그림은 제 줄을 통째로 쓴다(flex-basis 100%). 아래 줄에 입력칸과 버튼 둘이 나란히 서는데,
   넷을 한 줄에 밀어 넣으면 좁은 카드(회원 화면 420px)에서 자리가 모자라 흩어진다.
   순정 이미지는 160×60. 로드 전에는 dot.gif 라 자리를 미리 잡아 둔다.
   contain 을 쓰는 이유 — cover 는 상자 비율이 어긋나는 순간 숫자 위아래를 잘라낸다.
   배경은 이미지가 제 색을 갖고 오므로(kcaptcha_config.php 에서 연푸른 계열로 뽑는다)
   따로 칠하지 않는다. */
#captcha_img {
    display: block; flex: 0 0 100%; width: 100%; height: 60px;
    object-fit: contain; object-position: left center;   /* 왼쪽에 붙인다 — 아래 줄 입력칸과 시작선을 맞춘다 */
    border: 1px solid var(--line); border-radius: var(--r-input);
}
/* 기준 폭 140px 에서 남는 만큼 늘고, 모자라면 줄어든다.
   예전에는 240px 로 못 박아 두었는데, 회원 화면 카드(420px)에서는 이미지 160 + 240 이
   한 줄에 못 들어가 입력칸이 통째로 다음 줄로 밀렸다 — 이미지만 덩그러니 남고 버튼까지
   흩어져 세 줄이 됐다. 늘고 줄게 두면 넓은 화면에서는 지금처럼 한 줄에 다 서고,
   좁은 카드에서는 이미지와 붙은 채로 좁아지며 버튼만 아래로 내려간다. */
/* 아래 줄 왼쪽에 선다. 늘어나지는 않는다(0 1 240px) — 늘려 두면 카드 폭만큼 벌어져
   여섯 자리 숫자를 넣는 칸치고 지나치게 커 보이고, 버튼 둘이 저 멀리 오른쪽으로 밀린다.
   좁아지면 줄어들기는 한다. 높이는 옆에 서는 버튼(44px)과 맞춘다 —
   따로 놀면 한 줄에 선 셋이 층이 진다. */
#captcha_key {
    flex: 0 1 240px; min-width: 0; width: auto; height: 44px; margin: 0;
    border-radius: var(--r-input);
    text-align: center; letter-spacing: .28em; text-indent: .28em;
    font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* 안내 문구는 숫자용 자간·크기를 물려받으면 칸을 넘는다 */
#captcha_key::placeholder {
    letter-spacing: 0; text-indent: 0;
    font-size: var(--t-sm); font-weight: 400; color: var(--muted);
}
#captcha_key:focus { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--accent-soft); }

/* 버튼 둘은 아이콘만 남긴다. 글자는 스크린리더가 읽어야 하므로 지우지 않고 크기만 0 으로 둔다.
   아이콘은 순정 스프라이트 자리인 span 에 mask 로 얹는다 — 색이 글자색을 따라오고
   바깥 요청도 생기지 않는다. */
#captcha button {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; padding: 0; margin-left: var(--s2);
    border: 1px solid var(--btn-line); border-radius: var(--r-btn);
    background: var(--card); color: var(--muted);
    font-size: 0; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
#captcha button:first-of-type { margin-left: var(--s2); }
#captcha button:hover { border-color: var(--accent); color: var(--accent); background: var(--row-hover); }
#captcha button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#captcha button span {
    display: block; width: 20px; height: 20px; background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: 20px 20px;   mask-size: 20px 20px;
}
#captcha_mp3 span {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 5 6 9H2v6h4l5 4V5z'/><path d='M15.5 8.5a5 5 0 0 1 0 7'/><path d='M19 5.5a9 9 0 0 1 0 13'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 5 6 9H2v6h4l5 4V5z'/><path d='M15.5 8.5a5 5 0 0 1 0 7'/><path d='M19 5.5a9 9 0 0 1 0 13'/></svg>");
}
#captcha_reload span {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-2.64-6.36'/><path d='M21 3v6h-6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-2.64-6.36'/><path d='M21 3v6h-6'/></svg>");
}
/* 순정이 칸 아래 두는 "자동등록방지 숫자를 순서대로 입력하세요." 는 감춘다.
   같은 말을 입력칸 안(placeholder)에서 하므로 두 번 적을 이유가 없고,
   정작 입력할 곳에서 눈을 떼야 읽히는 자리라 도움이 되지도 않았다.
   kcaptcha.js 는 이 요소를 쓰지 않으므로 감춰도 동작에 영향이 없다. */
#captcha_info { display: none; }
#captcha_audio { flex: 1 0 100%; margin-top: var(--s3); height: 36px; }

/* 새 창(쪽지·메일 보내기) — 고정 240px 짜리 줄은 508px 이라 팝업 카드에서 버튼 둘만 다음 줄로
   떨어졌다. 창은 넉넉한데 세로로 쌓기는 아까우니, 입력칸이 남는 만큼만 차지하게 두어 한 줄로 붙인다.
   150px 로 잡아도 실제로는 200px 안팎까지 늘어나 안내 문구가 다 보이고, 숫자 여섯 자는 그보다 짧다.
   240px 을 넘기지 않는 이유는 위와 같다 — 이미지에서 멀어지면 한 덩어리로 안 읽힌다.
   561px 부터인 이유: 그 아래는 아래 좁은 화면 규칙이 세로로 쌓는 쪽이 맞는데, 이 규칙이
   (id 하나 + 클래스 하나라) 그것을 이겨 버리면 휴대전화에서 칸이 눌린다. */
@media (min-width: 561px) {
    .popup #captcha_key { flex: 1 1 150px; max-width: 240px; }
}

/* 좁은 화면 — 옆으로 나란히 두면 입력칸이 눌려 숫자 여섯 자가 안 들어간다.
   위아래로 쌓는다. 이미지 칸을 전폭으로 늘리면 contain 이 letterbox 를 만들어
   흰 여백 안에 색 띠가 뜬 것처럼 보이므로, 이미지는 제 크기(160px)로 두고 가운데 놓는다.
   맞붙은 모양은 포기하고 각자 온전한 모서리를 갖는다. */
@media (max-width: 560px) {
    #captcha_img {
        margin: 0 auto var(--s3);
        border-right: 1px solid var(--line); border-radius: var(--r-input);
    }
    #captcha_key { flex: 1 0 100%; border-radius: var(--r-input); }
    #captcha button { margin-top: var(--s3); }
    #captcha button:first-of-type { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════
   상품 상세 (shop/item.php)
   #sit_* 마크업은 순정 item.form.skin.php 것 그대로다 — js/shop.js 가
   이 id·class 를 잡으므로 구조는 손대지 않고 겉모습만 맞춘다.
   ═══════════════════════════════════════════════════════════ */
.sit-wrap { margin-bottom: var(--s6); }
#sit_ov_wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }

/* ── 이미지 갤러리 ── */
#sit_pvi { position: relative; }
#sit_pvi_big { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); background: var(--card); }
#sit_pvi_big a { display: block; }
#sit_pvi_big a + a { display: none; }          /* 큰 이미지는 첫 장만 — 나머지는 썸네일로 연다 */
#sit_pvi_big img { width: 100%; display: block; }
#popup_item_image {
    display: flex !important; align-items: center; justify-content: center;
    position: absolute; right: var(--s3); bottom: var(--s3); width: 38px; height: 38px;
    border-radius: var(--r-full); background: rgba(20,30,45,.55); color: #fff;
}
#popup_item_image:hover { background: rgba(20,30,45,.8); color: #fff; }
#sit_pvi_thumb { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
#sit_pvi_thumb a { display: block; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); }
#sit_pvi_thumb img { display: block; width: 62px; height: 62px; object-fit: cover; }
#sit_pvi_thumb a:hover { box-shadow: 0 0 0 2px var(--accent); }

/* ── 요약·구입 ── */
#sit_ov { min-width: 0; }
#sit_title { font-size: var(--t-2xl); font-weight: 800; line-height: 1.3; margin-bottom: var(--s2); }
#sit_desc { font-size: var(--t-md); color: var(--muted); margin: 0 0 var(--s4); }
#sit_opt_info { font-size: var(--t-xs); color: var(--muted); margin: 0 0 var(--s3); }

#sit_star_sns { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); margin-bottom: var(--s3); }
#sit_btn_opt { position: relative; display: flex; align-items: center; gap: var(--s2); }
#btn_wish, #sit_btn_opt button, #sit_btn_rec {
    display: inline-flex; align-items: center; gap: var(--s1);
    height: 34px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-btn);
    background: var(--card); color: var(--muted); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
}
#btn_wish:hover, #sit_btn_opt button:hover, #sit_btn_rec:hover { border-color: var(--accent); color: var(--accent); }
/* SNS 공유 패널 — 순정 스크립트가 $(".sns_area").show() 로 인라인 display:block 을 넣는다.
   인라인 스타일이 이기므로 flex 배치가 서지 않고, 좁은 기준상자(#sit_btn_opt) 때문에 줄바꿈까지 났다.
   블록인 채로 한 줄에 세운다 — 폭은 내용만큼, 줄바꿈 금지. */
.sns_area {
    position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 30;
    display: none; width: max-content; white-space: nowrap; font-size: 0;
    padding: var(--s2); background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
}
.sns_area > a { vertical-align: middle; }
.sns_area > a + a { margin-left: var(--s2); }
/* 순정 페이스북·트위터 아이콘은 흰 글리프에 배경이 투명이라 밝은 테마의 흰 패널에서 사라진다.
   브랜드색 바탕을 깔아 두 테마 모두에서 보이게 한다. (카카오 아이콘은 제 색이 있어 그대로) */
.sns_area .share-facebook, .sns_area .share-twitter, .sns_area .share-kakaotalk {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--r-md);
}
.sns_area .share-facebook  { background: #1877f2; }
.sns_area .share-twitter   { background: #1da1f2; }
.sns_area .share-kakaotalk { background: #fee500; }
.sns_area .share-facebook:hover, .sns_area .share-twitter:hover, .sns_area .share-kakaotalk:hover { filter: brightness(1.08); }
.sns_area img { width: 22px; height: 22px; }

/* 요약 표 (판매가·적립·배송비·구매수량 …) */
#sit_ov table { width: 100%; border-collapse: collapse; margin-bottom: var(--s4); }
#sit_ov th, #sit_ov td { padding: var(--s2) 0; text-align: left; vertical-align: top; font-size: var(--t-md); }
#sit_ov th { width: 34%; color: var(--muted); font-weight: 600; }
#sit_ov td { font-weight: 600; }
#sit_ov .sit_ov_cust { color: var(--muted); text-decoration: line-through; font-weight: 500; }
#sit_ov #sit_ov_price, #sit_ov strong { font-size: var(--t-xl); font-weight: 800; color: var(--accent); }

/* 옵션 */
.sit_option { margin-bottom: var(--s4); }
.sit_option h3 { font-size: var(--t-sm); font-weight: 700; color: var(--muted); margin-bottom: var(--s2); }
.sit_option select, .sit_option .get_item_options { width: 100%; }
.sit_option select { height: 42px; }

/* 선택된 옵션 — 수량 ± 는 shop.js 가 버튼 글자(증가/감소/삭제)로 갈라 처리한다 */
#sit_sel_option h3 { font-size: var(--t-sm); font-weight: 700; color: var(--muted); margin-bottom: var(--s2); }
#sit_opt_added { display: flex; flex-direction: column; gap: var(--s2); }
#sit_opt_added li {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
    padding: var(--s3); border-radius: var(--r-lg); background: var(--bg);
}
#sit_opt_added .opt_name { flex: 1 1 100%; font-size: var(--t-sm); font-weight: 600; }
#sit_opt_added .opt_count { display: flex; align-items: center; gap: var(--s1); }
#sit_sel_option li button {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--line); border-radius: var(--r-btn);
    background: var(--card); color: var(--fg); font: inherit; font-size: var(--t-sm); cursor: pointer;
}
#sit_sel_option li button:hover { border-color: var(--accent); color: var(--accent); }
#sit_sel_option li button.sit_opt_del { width: auto; padding: 0 var(--s3); color: var(--muted); }
#sit_opt_added .num_input {
    width: 56px; height: 32px; text-align: center; padding: 0;
    font-weight: 700; font-variant-numeric: tabular-nums;
}
.sit_opt_prc { margin-left: auto; font-size: var(--t-sm); font-weight: 700; color: var(--muted); }

#sit_tot_price {
    display: flex; align-items: baseline; justify-content: flex-end; gap: var(--s2);
    margin: var(--s4) 0; padding-top: var(--s3); border-top: 1px solid var(--line);
    font-size: var(--t-md); color: var(--muted);
}
#sit_tot_price strong { font-size: var(--t-2xl); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
#sit_ov_soldout { color: var(--danger); font-weight: 700; }

#sit_ov_btn { display: flex; gap: var(--s2); }
#sit_ov_btn button, #sit_ov_btn > a {
    display: inline-flex; align-items: center; justify-content: center;
    height: 48px; padding: 0 var(--s5); border-radius: var(--r-btn);
    border: 1px solid var(--line); background: var(--card); color: var(--fg);
    font: inherit; font-size: var(--t-md); font-weight: 700; cursor: pointer;
}
#sit_ov_btn .sit_btn_cart { flex: 1; }
#sit_ov_btn .sit_btn_cart:hover { border-color: var(--accent); color: var(--accent); }
#sit_ov_btn .sit_btn_buy {
    flex: 1; background: var(--accent); border-color: var(--accent); color: var(--accent-fg); box-shadow: var(--sh-btn);
}
#sit_ov_btn .sit_btn_buy:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
#sit_ov_btn .sit_btn_wish { flex: none; width: 48px; padding: 0; color: var(--muted); }
#sit_ov_btn .sit_btn_wish:hover { border-color: var(--danger); color: var(--danger); }

@media (max-width: 860px) {
    #sit_ov_wrap { grid-template-columns: 1fr; gap: var(--s5); }
}

/* ── 탭 ── */
.sit-tabs { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; }
.sit-tabs .tab-tit { display: flex; border-bottom: 1px solid var(--line); }
.sit-tabs .tab-tit button {
    flex: 1 0 auto; padding: var(--s4) var(--s5); border: 0; border-bottom: 2px solid transparent;
    background: none; color: var(--muted); font: inherit; font-size: var(--t-md); font-weight: 700;
    white-space: nowrap; cursor: pointer;
}
.sit-tabs .tab-tit button:hover { color: var(--accent); }
.sit-tabs .tab-tit button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.sit-tabs .tab-tit b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tab-con { padding: var(--s5); }

/* 좁은 화면 — 탭 4개를 가로로 늘어놓으면 넘쳐서 선택한 탭이 화면 밖으로 나간다.
   2×2 로 접어 네 개가 한눈에 보이게 한다. */
@media (max-width: 620px) {
    .sit-tabs .tab-tit { flex-wrap: wrap; }
    .sit-tabs .tab-tit button {
        flex: 1 0 50%; max-width: 50%; padding: var(--s3) var(--s2);
        font-size: var(--t-sm); border-bottom-width: 2px;
    }
    .sit-tabs .tab-tit button:nth-child(-n+2) { border-top: 0; }
    .tab-con { padding: var(--s4); }
    .sit-sub { font-size: var(--t-md); }
}
.tab-con[hidden] { display: none; }
.sit-sub { font-size: var(--t-lg); font-weight: 700; margin: var(--s5) 0 var(--s3); }
.sit-sub:first-child { margin-top: 0; }
.sit-explan { font-size: var(--t-md); line-height: 1.8; overflow-wrap: break-word; }
.sit-explan img { border-radius: var(--r-md); }

.sit-notice-wrap { overflow-x: auto; }
.sit-notice { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.sit-notice th, .sit-notice td { padding: var(--s3); border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.sit-notice tr:first-child th, .sit-notice tr:first-child td { border-top: 0; }
.sit-notice th { width: 32%; color: var(--muted); font-weight: 600; background: var(--bg); }

/* 순정 사용후기·상품문의 화면을 그대로 담는 자리 — 최소한만 맞춘다 */
.sit-embed { font-size: var(--t-md); }
.sit-embed h2, .sit-embed h3 { font-size: var(--t-lg); margin-bottom: var(--s3); }
.sit-embed table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.sit-embed th, .sit-embed td { padding: var(--s3); border-top: 1px solid var(--line); text-align: left; }
.sit-embed thead th { background: var(--bg); color: var(--muted); font-weight: 700; border-top: 0; }
.sit-embed .empty_table, .sit-embed .empty_list { padding: var(--s7) 0; text-align: center; color: var(--muted); }
.sit-embed a.btn, .sit-embed input[type=submit], .sit-embed button:not(.sit-embed .pg_page) {
    padding: var(--s2) var(--s4); border-radius: var(--r-btn);
    border: 1px solid var(--line); background: var(--card); color: var(--fg);
    font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer;
}
.sit-embed .pg_wrap { display: flex; justify-content: center; gap: var(--s1); margin-top: var(--s4); }
.sit-embed .pg_page, .sit-embed .pg_current {
    display: inline-block; min-width: 32px; padding: var(--s2); text-align: center;
    border-radius: var(--r-btn); background: var(--bg); font-size: var(--t-sm);
}
.sit-embed .pg_current { background: var(--accent); color: var(--accent-fg); font-weight: 700; }

/* 순정 스킨은 Font Awesome 글리프(<i class="fa …">)를 쓰는데 우리는 그 폰트를 싣지 않는다.
   마크업을 고치면 shop.js 가 버튼 글자로 동작을 가르는 계약이 깨지므로, 아이콘만 CSS 로 채운다. */
#sit_ov_from .fa { font-style: normal; line-height: 1; }
.sit_qty_minus .fa::before { content: "−"; font-size: 16px; font-weight: 700; }
.sit_qty_plus  .fa::before { content: "+"; font-size: 16px; font-weight: 700; }
#btn_wish .fa::before, .sit_btn_wish .fa::before { content: "♡"; font-size: 15px; }
.btn_sns_share .fa::before { content: "↗"; font-size: 14px; font-weight: 700; }
#sit_btn_rec .fa::before { content: "✉"; font-size: 14px; }
#popup_item_image .fa::before { content: "⤢"; font-size: 16px; }
.btn_wish_num { font-variant-numeric: tabular-nums; }

/* 사용후기 개수 + 위시/공유 — 제목 아래 한 줄 */
#sit_star_sns > span:first-child { margin-right: auto; font-size: var(--t-sm); color: var(--muted); }
#sit_star_sns { justify-content: space-between; }

/* 이전/다음 상품 */
#sit_siblings { display: flex; gap: var(--s2); margin-top: var(--s4); }
#sit_siblings a, #sit_siblings .sit-sibling-off {
    display: inline-flex; align-items: center; gap: var(--s1);
    padding: var(--s2) var(--s4); border-radius: var(--r-btn);
    background: var(--card); box-shadow: var(--sh-sm);
    font-size: var(--t-sm); font-weight: 600; color: var(--muted);
}
#sit_siblings a:hover { color: var(--accent); }
/* 해당 상품이 없는 쪽 — 자리는 지키되 누를 수 없음을 보이게 */
#sit_siblings .sit-sibling-off { opacity: .45; cursor: default; box-shadow: none; background: none; border: 1px dashed var(--line); }
#siblings_prev::before { content: "←"; }
#siblings_next::after { content: "→"; }

/* 순정 사용후기·상품문의 안의 버튼(.btn01/.btn02)과 목록 */
/* 사용후기·상품문의 머리줄 — 순정 마크업이 서로 다르다.
   사용후기: h3 + .sit_use_top(버튼 묶음)   상품문의: h3 + #sit_qa_wbtn
   둘 다 "제목 왼쪽 · 버튼 오른쪽" 한 줄로 맞춘다. 나머지 자식은 다음 줄 전체를 쓴다. */
.sit-embed #sit_use_list, .sit-embed #sit_qa_list {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
.sit-embed #sit_use_list > h3, .sit-embed #sit_qa_list > h3 {
    font-size: var(--t-lg); font-weight: 700; margin: 0;
}
/* 버튼 묶음은 auto 로 민다 — 같은 줄이면 오른쪽 끝, 좁아서 줄바꿈돼도 오른쪽에 남는다 */
.sit-embed .sit_use_top, .sit-embed #sit_qa_wbtn { margin-left: auto; }
.sit-embed #sit_use_list > *:not(h3):not(.sit_use_top),
.sit-embed #sit_qa_list  > *:not(h3):not(#sit_qa_wbtn) { flex: 1 0 100%; }
.sit-embed .sit_use_top { display: flex; align-items: center; }
.sit-embed #sit_use_wbtn, .sit-embed #sit_qa_wbtn { display: flex; gap: var(--s2); }
.sit-embed .btn01, .sit-embed .btn02 {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--s2) var(--s4); border-radius: var(--r-btn);
    border: 1px solid var(--line); background: var(--card); color: var(--fg);
    font-size: var(--t-sm); font-weight: 700;
}
.sit-embed .btn02 { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); box-shadow: var(--sh-btn); }
.sit-embed .btn01:hover { border-color: var(--accent); color: var(--accent); }
.sit-embed .btn02:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-fg); }
.sit-embed .sit_empty { padding: var(--s7) 0; text-align: center; color: var(--muted); }
.sit-embed ul > li { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.sit-embed ul > li:first-child { border-top: 0; }
.sit-embed .sit_use_li_title, .sit-embed .sit_qa_li_title { cursor: pointer; font-weight: 600; }
.sit-embed .sit_use_con, .sit-embed .sit_qa_con { margin-top: var(--s2); font-size: var(--t-sm); color: var(--muted); line-height: 1.7; }

/* 상단 하트는 "이 상품을 담은 사람 수"를 보여주는 표시일 뿐 버튼이 아니다 (순정도 <span>).
   버튼처럼 보이지 않게 되돌린다 — 담기는 아래 하트 버튼으로 한다. */
#btn_wish {
    border: 0; background: none; padding: 0 var(--s1); height: auto;
    color: var(--muted); font-weight: 600; cursor: default;
}
#btn_wish:hover { border: 0; color: var(--muted); }

/* SNS 공유 — 화살표(↗)는 '새 창으로 이동'으로 읽힌다. 공유 아이콘으로 바꾼다. */
.btn_sns_share .fa::before { content: ""; }
.btn_sns_share .fa {
    display: inline-block; width: 15px; height: 15px; background-color: currentColor;
    -webkit-mask: var(--ico-share) center/contain no-repeat;
            mask: var(--ico-share) center/contain no-repeat;
}
:root {
    --ico-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='2.6'/%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='18' cy='19' r='2.6'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E");
}
.btn_sns_share::after { content: "공유"; }

/* 장바구니 좁은 화면 — 수량·선후불·금액은 눈으로 확인하는 값이라 크게, 오른쪽에 모은다 */
.list-cards .cart-m {
    display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap;
    margin-top: var(--s1); font-size: var(--t-md); color: var(--muted);
}
.list-cards .cart-m strong { font-size: var(--t-lg); font-weight: 800; color: var(--fg); }

/* 장바구니 좁은 화면 — 표 머리줄이 숨겨지므로 전체선택을 카드 목록 위에 둔다 */
.cart-cards-head { display: none; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.cart-cards-head label { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); font-weight: 600; color: var(--muted); cursor: pointer; }
.cart-cards-head .chk-count { margin-left: auto; }
@media (max-width: 620px) { .cart-cards-head { display: flex; } }

/* ── 체크박스·라디오 ──
   기본 13px 은 손가락으로 맞추기 어렵다. 크기를 키우고, 목록에서는 셀 전체가
   눌리도록 여백까지 클릭 영역으로 쓴다. */
input[type=checkbox], input[type=radio] {
    width: 16px; height: 16px; margin: 0;
    accent-color: var(--accent); cursor: pointer; flex: none;
}
/* 목록·장바구니의 선택 칸 — 셀 어디를 눌러도 체크되게 넓힌다 */
.list-table .col-chk { padding: 0; }
/* 라벨이 셀을 가득 채워서 칸 어디를 눌러도 체크된다 */
.chk-cell { display: flex; align-items: center; justify-content: center; padding: 14px; cursor: pointer; }
.list-table .col-chk input { width: 16px; height: 16px; }
.list-cards .s input[type=checkbox],
.cart-cards-head input[type=checkbox],
.move-list input[type=checkbox] { width: 18px; height: 18px; }
.list-cards .s input[type=checkbox] { margin-right: var(--s1); }
/* 라벨을 함께 눌러도 되게 */
.chk-all-label, .cart-cards-head label, .move-list label { padding: var(--s1) 0; }

@media (max-width: 620px) {
    input[type=checkbox], input[type=radio] { width: 18px; height: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   주문서 (shop/orderform.php)
   마크업은 순정 orderform.sub.php 그대로 — 결제수단·PG 연동 JS 가
   이 id/class 를 잡으므로 구조는 건드리지 않고 겉모습만 맞춘다.
   순정이 의도한 2단(왼쪽 입력 / 오른쪽 합계·결제)을 살린다.
   ═══════════════════════════════════════════════════════════ */
#sod_frm { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); align-items: start; }
.od_prd_list, #display_pay_button { grid-column: 1 / -1; }
.sod_left { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.sod_right { display: flex; flex-direction: column; gap: var(--s5); position: sticky; top: var(--s4); }

#sod_frm section, #sod_bsk_tot, .od_prd_list {
    background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden;
}
#sod_frm section > h2 {
    padding: var(--s4) var(--s5); font-size: var(--t-lg); font-weight: 700;
    border-bottom: 1px solid var(--line);
}
#sod_frm section > h3, #sod_frm .od_pay_buttons_el h3 {
    font-size: var(--t-md); font-weight: 700; margin: var(--s4) var(--s5) var(--s2);
}

/* 주문상품 */
#sod_list { width: 100%; border-collapse: collapse; }
#sod_list th {
    padding: var(--s3) var(--s4); font-size: var(--t-sm); font-weight: 700; color: var(--muted);
    text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line);
}
#sod_list td { padding: var(--s4); font-size: var(--t-md); text-align: center; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
#sod_list tbody tr:first-child td { border-top: 0; }
#sod_list td:first-child { text-align: left; }
#sod_list .sod_img { float: left; margin-right: var(--s3); }
#sod_list .sod_img img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-md); display: block; }
#sod_list .sod_name { overflow: hidden; }
#sod_list .sod_name b { font-size: var(--t-md); font-weight: 700; }
#sod_list .sod_opt { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s1); }
#sod_list .text_right { text-align: right; }

/* 입력 표 (주문자·배송지·결제정보) */
.tbl_frm01 table { width: 100%; border-collapse: collapse; }
.tbl_frm01 th, .tbl_frm01 td { padding: var(--s3) var(--s5); text-align: left; vertical-align: middle; border-top: 1px solid var(--line); }
.tbl_frm01 tr:first-child th, .tbl_frm01 tr:first-child td { border-top: 0; }
.tbl_frm01 th { width: 30%; font-size: var(--t-md); font-weight: 600; color: var(--muted); white-space: nowrap; }
.tbl_frm01 td { font-size: var(--t-md); }
.tbl_frm01 .frm_input { width: 100%; max-width: 320px; height: 40px; }
.tbl_frm01 input[size="5"], .tbl_frm01 input[maxlength="6"], #od_zip, #od_b_zip { max-width: 120px; }
.tbl_frm01 textarea { width: 100%; max-width: 460px; }
.tbl_frm01 td > input + input,
.tbl_frm01 td > input + a,
.tbl_frm01 td > a + input { margin-top: var(--s2); }
/* 한 칸 안에서 <br> 로 줄이 갈리는 입력들 (주소 = 우편번호·기본주소·상세주소).
   순정 마크업이 input 사이에 label·br 을 끼워 두어 위의 input + input 이 걸리지 않는다.
   줄 간격은 line-height 여백 4px 뿐이라 상자끼리 맞닿아 보였다 */
.tbl_frm01 td .frm_address { margin-top: var(--s3); }
.btn_frmline {
    display: inline-flex; align-items: center; height: 40px; padding: 0 var(--s4);
    border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card);
    font-size: var(--t-sm); font-weight: 700; color: var(--fg); cursor: pointer; white-space: nowrap;
}
.btn_frmline:hover { border-color: var(--accent); color: var(--accent); }

/* 배송지 선택 라디오 — 순정은 input 과 label 이 형제라 flex 항목이 따로 논다.
   폭이 모자라면 동그라미만 앞줄 끝에 남고 글자가 다음 줄로 넘어갔다.
   네이티브 컨트롤은 감추고(포커스·스크린리더는 유지) label 하나를 통째로
   알약 버튼 = 한 항목으로 만들어 짝이 갈라지지 않게 한다. */
.order_choice_place { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s5) var(--s4); }
.order_choice_place input[type=radio],
.order_choice_place input[type=checkbox],
.tbl_frm01 #ad_default { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }

.order_choice_place label,
.tbl_frm01 #ad_default + label {
    display: inline-flex; align-items: center; gap: var(--s2); margin: 0;
    padding: var(--s2) var(--s3); border: 1px solid var(--btn-line); border-radius: var(--r-btn);
    background: var(--card); color: var(--fg);
    font-size: var(--t-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
/* 선택 표시 — 라디오는 원, 체크박스는 사각 */
.order_choice_place label::before,
.tbl_frm01 #ad_default + label::before {
    content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--btn-line); transition: inherit;
}
.order_choice_place input[type=checkbox] + label::before,
.tbl_frm01 #ad_default + label::before { border-radius: 4px; }

.order_choice_place label:hover,
.tbl_frm01 #ad_default + label:hover { border-color: var(--accent); color: var(--accent); }
.order_choice_place :checked + label,
.tbl_frm01 #ad_default:checked + label {
    border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep);
}
.order_choice_place :checked + label::before,
.tbl_frm01 #ad_default:checked + label::before {
    border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--card);
}
.order_choice_place :focus-visible + label,
.tbl_frm01 #ad_default:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.order_choice_place #order_address { height: auto; padding: var(--s2) var(--s3); font-size: var(--t-sm); }
/* 배송지명 칸 — 알약(기본배송지로 설정)이 입력칸 바로 아래 줄에 온다. 위 규칙의 margin: 0 을 되돌린다 */
.tbl_frm01 #ad_default + label { margin-top: var(--s3); }

/* 합계 */
#sod_bsk_tot { padding: var(--s4) var(--s5); }
#sod_bsk_tot ul { display: flex; flex-direction: column; gap: var(--s3); font-size: var(--t-md); font-variant-numeric: tabular-nums; }
#sod_bsk_tot li { display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; }
#sod_bsk_tot li > span:first-child { margin-right: auto; }
#sod_bsk_tot li span { color: var(--muted); }
#sod_bsk_tot li strong { font-weight: 700; }
#sod_bsk_tot .sod_bsk_cnt { padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-lg); }
#sod_bsk_tot .sod_bsk_cnt span { color: var(--fg); font-weight: 700; }
#sod_bsk_tot .sod_bsk_cnt strong { font-size: var(--t-2xl); font-weight: 800; color: var(--accent); }

/* 결제정보 */
.pay_tbl { padding-bottom: var(--s2); }
.pay_tbl .tbl_frm01 td { font-size: var(--t-sm); line-height: 1.6; }
.pay_tbl .tbl_frm01 td strong, .pay_tbl .tbl_frm01 td b { font-size: var(--t-md); }
#od_tot_price { padding: var(--s3) var(--s5); font-size: var(--t-md); font-variant-numeric: tabular-nums; }
#od_tot_price strong { font-size: var(--t-xl); font-weight: 800; color: var(--accent); }
#sod_frm_pt_alert { margin: 0 var(--s5) var(--s3); font-size: var(--t-sm); color: var(--muted); }

/* 결제수단 — 라디오는 숨기고 라벨을 고르는 칩으로 */
#sod_frm_paysel { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s5) var(--s4); border: 0; margin: 0; }
#sod_frm_paysel legend { position: absolute; left: -9999px; }
#sod_frm_paysel input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
#sod_frm_paysel input[type=radio] + label {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 104px; padding: var(--s3) var(--s4);
    border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card);
    font-size: var(--t-md); font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
#sod_frm_paysel input[type=radio] + label:hover { border-color: var(--accent); color: var(--accent); }
#sod_frm_paysel input[type=radio]:checked + label {
    border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 700;
}
#sod_frm_paysel input[type=radio]:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 무통장 계좌 안내는 결제수단 칩과 같은 flex 줄에 들어가므로 한 줄을 통째로 쓰게 한다 */
#settle_bank { flex: 1 0 100%; margin-top: var(--s2); font-size: var(--t-md); line-height: 1.7; }
/* 입금자명 — 결제수단 칩(라디오+label)이 아니라 평범한 입력 라벨이다 */
#settle_bank label { display: block; margin: var(--s3) 0 var(--s2); font-size: var(--t-sm); font-weight: 700; color: var(--muted); }
/* 순정이 size="10" 을 주므로 폭을 직접 잡아 준다 (예금주 이름이 잘리지 않게) */
#settle_bank input[type=text] { width: 100%; max-width: 360px; margin: 0; }

/* 결제 버튼 */
#display_pay_button { display: flex; gap: var(--s2); margin-top: var(--s2); }
#display_pay_button .btn_submit, #display_pay_button .btn01 {
    display: inline-flex; align-items: center; justify-content: center; flex: 1;
    height: 52px; padding: 0 var(--s5); border-radius: var(--r-btn);
    font: inherit; font-size: var(--t-lg); font-weight: 700; cursor: pointer;
}
#display_pay_button .btn_submit { flex: 2; background: var(--accent); border: 1px solid var(--accent); color: var(--accent-fg); box-shadow: var(--sh-btn); }
#display_pay_button .btn_submit:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
#display_pay_button .btn01 { background: var(--card); border: 1px solid var(--line); color: var(--fg); }
#display_pay_button .btn01:hover { border-color: var(--accent); color: var(--accent); }
#display_pay_process { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s5); }

@media (max-width: 900px) {
    #sod_frm { grid-template-columns: 1fr; }
    .sod_right { position: static; }
}
@media (max-width: 620px) {
    #sod_frm section > h2 { padding: var(--s3) var(--s4); }
    .tbl_frm01 th, .tbl_frm01 td { display: block; width: auto; padding: 0 var(--s4); border-top: 0; }
    .tbl_frm01 th { padding-top: var(--s3); }
    .tbl_frm01 td { padding-bottom: var(--s3); }
    .tbl_frm01 tr + tr th { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3); }
    .tbl_frm01 .frm_input, .tbl_frm01 textarea { max-width: none; }
    /* 좁은 화면 주문상품 — 상품명과 소계만. 수량은 옵션 줄에 이미 들어 있다 */
    #sod_list th:nth-child(2), #sod_list td:nth-child(2),
    #sod_list th:nth-child(3), #sod_list td:nth-child(3),
    #sod_list th:nth-child(n+5), #sod_list td:nth-child(n+5) { display: none; }
    #sod_list th, #sod_list td { padding: var(--s3); white-space: normal; }
    #sod_list .sod_img img { width: 52px; height: 52px; }
    #sod_list td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
    #display_pay_button { flex-direction: column-reverse; }
    #display_pay_button .btn_submit, #display_pay_button .btn01 { width: 100%; }
}

/* 분류 줄 + 오른쪽 관리 바로가기 (상품 수정) */
.bbs-cate-row { display: flex; align-items: center; gap: var(--s3); }
.bbs-cate-row .bbs-cate { flex: 1; min-width: 0; }
.bbs-cate-row .bbs-admin-link { flex: none; }

/* ═══════════════════════════════════════════════════════════
   주문 상세 조회 (shop/orderinquiryview.php)
   마크업은 순정 그대로 — 주문취소·환불 폼과 영수증 팝업 JS 가 이 id 를 잡는다.
   순정이 나눠 둔 .sod_left(결제·배송 정보) / .sod_right(합계·취소)를 2단으로 살린다.
   ═══════════════════════════════════════════════════════════ */
.odv #sod_fin { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); align-items: start; }
/* 그리드 자식은 기본 min-width:auto 라 안의 넓은 표가 칸을 밀어낸다 — 0 으로 풀고
   표는 제 상자 안에서 가로 스크롤되게 한다 (페이지가 옆으로 밀리지 않도록) */
.odv #sod_fin > * { min-width: 0; }
.odv .tbl_wrap { overflow-x: auto; }
.odv #sod_fin_no, .odv #sod_fin_list { grid-column: 1 / -1; }
.odv .sod_left { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.odv .sod_right { display: flex; flex-direction: column; gap: var(--s5); }

.odv #sod_fin_no { font-size: var(--t-md); color: var(--muted); }
.odv #sod_fin_no strong { color: var(--fg); font-weight: 700; }

.odv section, .odv #sod_bsk_tot {
    background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden;
}
.odv .sod_left > h2 { font-size: var(--t-lg); font-weight: 700; margin-bottom: calc(-1 * var(--s2)); }
.odv section > h2, .odv section > h3 {
    padding: var(--s4) var(--s5); font-size: var(--t-md); font-weight: 700;
    border-bottom: 1px solid var(--line);
}
.odv section > h2 { font-size: var(--t-lg); }

/* 주문 상품 표 */
.odv .tbl_head03 table, .odv .tbl_head01 table { width: 100%; border-collapse: collapse; }
.odv .tbl_head03 th {
    padding: var(--s3) var(--s4); font-size: var(--t-sm); font-weight: 700; color: var(--muted);
    text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line);
}
.odv .tbl_head03 td {
    padding: var(--s4); font-size: var(--t-md); text-align: center;
    border-top: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.odv .tbl_head03 tbody tr:first-child td { border-top: 0; }
.odv .tbl_head03 td:first-child { text-align: left; }
.odv .sod_img { float: left; margin-right: var(--s3); }
.odv .sod_img img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--r-md); display: block; }
.odv .sod_name { overflow: hidden; }
.odv .sod_opt { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s1); }

/* 정보 표 (결제·주문자·받는분·배송) */
.odv .tbl_head01 th, .odv .tbl_head01 td {
    padding: var(--s3) var(--s5); text-align: left; vertical-align: top;
    font-size: var(--t-md); border-top: 1px solid var(--line);
}
.odv .tbl_head01 tr:first-child th, .odv .tbl_head01 tr:first-child td { border-top: 0; }
.odv .tbl_head01 th { width: 34%; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* 상태 설명 */
.odv #sod_sts_wrap { padding: var(--s3) var(--s5) var(--s4); }
/* 순정 CSS 의 기본값과 같이 접어 둔다 — '상태설명보기' 를 눌러야 열린다 (jQuery slideDown) */
.odv #sod_sts_explan { display: none; margin-top: var(--s3); padding: var(--s4); border-radius: var(--r-lg); background: var(--bg); }
.odv #sod_fin_legend { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0 0 var(--s3); font-size: var(--t-sm); }
.odv #sod_fin_legend dt { font-weight: 700; }
.odv #sod_fin_legend dd { margin: 0; color: var(--muted); }

/* 합계 */
.odv #sod_bsk_tot { padding: var(--s4) var(--s5); }
.odv #sod_bsk_tot li {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 2px;
    padding: var(--s2) 0; font-size: var(--t-md); font-variant-numeric: tabular-nums;
}
.odv #sod_bsk_tot li > span:first-child, .odv #sod_bsk_tot li > .sod_bsk_left { margin-right: auto; color: var(--muted); }
.odv #sod_bsk_tot li strong { font-weight: 700; }
.odv #sod_bsk_tot li:last-child { border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s3); font-size: var(--t-lg); }
.odv #sod_bsk_tot li:last-child strong { font-size: var(--t-2xl); font-weight: 800; color: var(--accent); }

/* 결제합계 — 합계 카드와 같은 모양으로 */
.odv #sod_fin_tot ul { padding: var(--s4) var(--s5); }
.odv #sod_fin_tot li {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
    padding: var(--s2) 0; font-size: var(--t-md); color: var(--muted); font-variant-numeric: tabular-nums;
}
.odv #sod_fin_tot li strong { color: var(--fg); font-weight: 700; }

/* 주문 취소 — 오른쪽 아래 텍스트 링크 + 모달 (순정 카드는 JS 가 걷어낸다) */
/* 결제합계 카드 바깥 오른쪽 아래 (.sod_right 는 세로 flex 라 align-self 로 민다) */
.odv .odv-cancel-open {
    align-self: flex-end; width: fit-content;
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 var(--s3); margin-top: calc(-1 * var(--s3));
    border: 1px solid var(--btn-line); border-radius: var(--r-btn);
    background: var(--card); color: var(--muted);
    font-size: var(--t-sm); font-weight: 600; text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.odv .odv-cancel-open:hover { border-color: var(--danger); background: var(--danger); color: #fff; }

.odv-modal { position: fixed; inset: 0; z-index: 200; }
.odv-modal[hidden] { display: none; }
.odv-backdrop { position: absolute; inset: 0; background: rgba(14,25,40,.45); backdrop-filter: blur(2px); }
.odv-panel {
    position: relative; max-width: 420px; margin: 14vh auto 0; padding: var(--s5);
    background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-lg);
}
.odv-panel h2 { font-size: var(--t-xl); margin-bottom: var(--s2); }
.odv-panel-lead { margin: 0 0 var(--s4); font-size: var(--t-sm); color: var(--muted); }
.odv-cancel-preset { width: 100%; height: 44px; margin-bottom: var(--s3); }
.odv-panel form { display: flex; flex-direction: column; gap: var(--s3); }
.odv-panel input[type=text] { width: 100%; height: 44px; }
.odv-panel input[type=submit] {
    height: 46px; border-radius: var(--r-btn);
    background: var(--danger); border: 1px solid var(--danger); color: #fff;
    font: inherit; font-size: var(--t-md); font-weight: 700; cursor: pointer;
}
.odv-cancel-close { display: block; width: 100%; margin-top: var(--s2); }
@media (max-width: 620px) {
    .odv-panel { margin: 8vh var(--s4) 0; padding: var(--s4); }
}

.odv .btn_frmline {
    display: inline-flex; align-items: center; height: 34px; padding: 0 var(--s3);
    border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card);
    font-size: var(--t-sm); font-weight: 600; color: var(--muted); cursor: pointer;
}
.odv .btn_frmline:hover { border-color: var(--accent); color: var(--accent); }
.odv .btn01, .odv .btn02, .odv .btn_cancel {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--s2) var(--s4); border-radius: var(--r-btn);
    border: 1px solid var(--line); background: var(--card); color: var(--fg);
    font-size: var(--t-sm); font-weight: 700; cursor: pointer;
}

@media (max-width: 900px) {
    .odv #sod_fin { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .odv section > h2, .odv section > h3 { padding: var(--s3) var(--s4); }
    /* 좁은 화면 — 정보 표는 라벨/값을 세로로 쌓는다 */
    .odv .tbl_head01 th, .odv .tbl_head01 td {
        display: block; width: auto; padding: 0 var(--s4); border-top: 0;
    }
    .odv .tbl_head01 th { padding-top: var(--s3); font-size: var(--t-sm); }
    .odv .tbl_head01 td { padding-bottom: var(--s3); }
    .odv .tbl_head01 tr + tr th { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3); }
    /* 주문 상품 — 순정 표가 rowspan/colspan 2줄 머리라 headers 로 열을 고른다.
       좁은 화면에서는 수량·소계·상태만 남긴다 (옵션명은 상품명과 겹치고 나머지는 부차적) */
    .odv .tbl_head03 #th_itopt,  .odv .tbl_head03 [headers="th_itopt"],
    .odv .tbl_head03 #th_itprice,.odv .tbl_head03 [headers="th_itprice"],
    .odv .tbl_head03 #th_itpt,   .odv .tbl_head03 [headers="th_itpt"],
    .odv .tbl_head03 #th_itsd,   .odv .tbl_head03 [headers="th_itsd"] { display: none; }
    .odv .tbl_head03 th, .odv .tbl_head03 td { padding: var(--s2); white-space: normal; font-size: var(--t-sm); }
    .odv .tbl_head03 [headers="th_itsum"] { text-align: right; font-weight: 700; white-space: nowrap; }
    .odv .td_imgsmall img { width: 46px; height: 46px; }
    .odv .sod_img img { width: 52px; height: 52px; }
    .odv #sod_bsk_tot, .odv #sod_sts_wrap, .odv #sod_fin_cancelfrm { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ── 주문 상품 (우리 표/카드) — 순정 rowspan 표는 감춘다 ── */
.odv #sod_fin_list > h2, .odv #sod_fin_list .tbl_head03, .odv #sod_fin_no { display: none; }
.odv-no {
    padding: var(--s3) var(--s4); margin-bottom: var(--s3);
    border-radius: var(--r-lg); background: var(--accent-soft); color: var(--accent-deep);
    font-size: var(--t-md);
}
.odv-no strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.odv-items { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; margin-bottom: var(--s5); }
.odv-items > h2 { padding: var(--s4) var(--s5); font-size: var(--t-lg); font-weight: 700; border-bottom: 1px solid var(--line); }
.odv-items-table { overflow-x: auto; }
.odv-items-table table { width: 100%; border-collapse: collapse; }
.odv-items-table th {
    padding: var(--s3) var(--s4); font-size: var(--t-sm); font-weight: 700; color: var(--muted);
    text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); background: var(--bg);
}
.odv-items-table td {
    padding: var(--s4); font-size: var(--t-md); text-align: center; white-space: nowrap;
    border-top: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.odv-items-table tbody tr:first-child td { border-top: 0; }
.odv-items-table .col-subject { text-align: left; width: 100%; white-space: normal; }
.odv-items-table .odv-sum { font-weight: 700; color: var(--fg); }

.odv-prd { display: flex; align-items: flex-start; gap: var(--s3); }
.odv-thumb { flex: none; }
.odv-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--r-md); display: block; }
.odv-prd-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.odv-name { font-size: var(--t-md); font-weight: 700; }
.odv-opt { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.odv-opt .chip { margin-right: var(--s1); }

.odv-items-cards { display: none; }
.odv-items-cards li { padding: var(--s4); border-top: 1px solid var(--line); }
.odv-items-cards li:first-child { border-top: 0; }
.odv-items-cards .odv-opt { margin: var(--s3) 0 0; }
.odv-facts {
    display: grid; grid-template-columns: auto 1fr auto 1fr; gap: var(--s2) var(--s3);
    margin: var(--s3) 0 0; font-size: var(--t-md); font-variant-numeric: tabular-nums;
}
.odv-facts dt { color: var(--muted); }
.odv-facts dd { margin: 0; text-align: right; font-weight: 600; }
.odv-line {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: var(--s3) 0 0; padding: var(--s3) var(--s4);
    border-radius: var(--r-md); background: var(--bg); font-size: var(--t-md);
}
.odv-line span { color: var(--muted); }
.odv-line strong { font-size: var(--t-lg); font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
    .odv-items-table { display: none; }
    .odv-items-cards { display: block; }
}

/* ── 테두리만 있는 버튼들 ──
   --line 은 표·구분선용이라 카드 위 버튼 테두리로 쓰면 1.2:1 로 거의 안 보인다.
   버튼은 눌 수 있음이 보여야 하므로 --btn-line (3:1 이상) 을 쓴다. */
.btn,
.btn_frmline, .odv .btn_frmline, .tbl_frm01 .btn_frmline,
.sit-embed .btn01,
.react,
#captcha button,
#sit_btn_opt button, #btn_wish, #sit_btn_rec,
#sit_ov_btn button, #sit_ov_btn > a,
#sit_sel_option li button,
#sod_frm_paysel input[type=radio] + label,
#display_pay_button .btn01,
.odv .btn01, .odv .btn02, .odv .btn_cancel,
.kebab-menu button.danger { border-color: var(--btn-line); }

/* 강조 버튼은 제 색 테두리를 그대로 쓴다 */
.btn-primary, #sit_ov_btn .sit_btn_buy, #display_pay_button .btn_submit,
#sod_frm_paysel input[type=radio]:checked + label { border-color: var(--accent); }
.odv #sod_fin_cancel > button { border-color: var(--danger); }

/* 주문서 "회원정보에 저장" — 주문하시는 분 섹션 머리, 이름 칸 위 */
.order-form .od_save_mb {
    display: flex; align-items: center; gap: var(--s2);
    margin: 0 0 var(--s3); padding: var(--s2) var(--s3);
    background: var(--row-hover); border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: var(--t-sm); font-weight: 600; color: var(--fg); cursor: pointer;
    width: fit-content; max-width: 100%;
}
.order-form .od_save_mb:hover { border-color: var(--accent); color: var(--accent); }
.order-form .od_save_mb input { flex: none; margin: 0; accent-color: var(--accent); }

/* 취소·반품 내역 (순정은 "내역이 있습니다" 한 줄뿐이라 우리가 목록으로 만든다) */
.odv-cancelled { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; }
.odv-cancelled > h2 { padding: var(--s4) var(--s5); font-size: var(--t-lg); font-weight: 700; border-bottom: 1px solid var(--line); }
.odv-cancelled li { padding: var(--s3) var(--s5); border-top: 1px solid var(--line); }
.odv-cancelled li:first-child { border-top: 0; }
.odv-cancelled .s { display: flex; align-items: center; gap: var(--s2); }
.odv-cancelled .t { flex: 1; min-width: 0; font-size: var(--t-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odv-cancelled .odv-opt { margin: var(--s1) 0 0; font-size: var(--t-sm); color: var(--muted); }
.odv-cancelled .odv-line { margin: var(--s2) 0 0; padding: 0; background: none; font-size: var(--t-sm); }
.odv-cancelled .odv-line strong { font-size: var(--t-md); }
.odv-cancelled-tot {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0; padding: var(--s3) var(--s5) var(--s4);
    border-top: 1px solid var(--line); font-size: var(--t-md);
}
.odv-cancelled-tot span { color: var(--muted); }
.odv-cancelled-tot strong { font-size: var(--t-lg); font-weight: 800; color: var(--danger); font-variant-numeric: tabular-nums; }

/* 취소 사유 */
.odv-cancelled .odv-why { border-bottom: 1px solid var(--line); background: var(--bg); }
.odv-cancelled .odv-why li { padding: var(--s3) var(--s5); border-top: 1px solid var(--line); }
.odv-cancelled .odv-why li:first-child { border-top: 0; }
.odv-cancelled .odv-why .r { margin: 0; font-size: var(--t-md); font-weight: 600; overflow-wrap: break-word; }
.odv-cancelled .odv-why .m {
    display: flex; align-items: center; gap: var(--s2);
    margin: var(--s2) 0 0; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ── 주문내역 (shop/orderinquiry.php) ── */
.list-table .td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-status {
    display: inline-block; padding: 2px var(--s2); border-radius: var(--r-full);
    font-size: var(--t-xs); font-weight: 800; white-space: nowrap;
    background: var(--line); color: var(--muted);
}
.od-status.wait   { background: var(--accent-soft); color: var(--accent-deep); }
.od-status.paid   { background: var(--teal-soft);   color: var(--teal-deep); }
.od-status.ready,
.od-status.ship   { background: var(--indigo-soft); color: var(--indigo); }
.od-status.done   { background: var(--teal-soft);   color: var(--teal-deep); }
.od-status.cancel { background: var(--line);        color: var(--muted); }
.list-cards .od-misu { color: var(--danger); font-weight: 700; }

/* ── 헤더 장바구니 — 아이콘 + 담긴 개수 배지 ── */
.cart-btn { position: relative; color: var(--fg); }
.cart-btn:hover { color: var(--accent); }
/* 담긴 개수 — 10px 로는 읽으려면 눈을 가까이 대야 했다. 화면에서 가장 작은 글자인데
   숫자라 모양으로 짐작할 수도 없다. 12px 로 올리고 배지도 그만큼 키운다.
   아이콘을 덜 가리도록 오른쪽 위로 조금 밀어 올린다(테두리는 아이콘과 겹쳐도 배지를 떼어 놓는다) */
.cart-count {
    position: absolute; top: -3px; right: -4px;
    min-width: 19px; height: 19px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-full); border: 2px solid var(--card);
    background: var(--danger); color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    font-variant-numeric: tabular-nums;
}

/* ═══════════ 사이드뷰 메뉴 아이콘 ═══════════ */
/* 순정 get_sideview() 가 만드는 마크업이라 항목에 클래스가 없다. 링크 주소로 무엇인지 가른다.
   아이콘은 mask 로 얹어 currentColor 를 따르게 한다 — hover 색까지 자연히 같이 움직인다. */
:root {
    --ico-sv-memo: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2011.5a8.4%208.4%200%200%201-9%208.4%209.9%209.9%200%200%201-4.2-.9L3%2020.5l1.4-3.8A8.2%208.2%200%200%201%203%2011.5%208.4%208.4%200%200%201%2012%203.1a8.4%208.4%200%200%201%209%208.4z'/%3E%3C/svg%3E");
    --ico-sv-email: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='m3.5%207%208.5%206%208.5-6'/%3E%3C/svg%3E");
    --ico-sv-home: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2010.5%2012%204l8%206.5V20a1%201%200%200%201-1%201h-4v-6H9v6H5a1%201%200%200%201-1-1z'/%3E%3C/svg%3E");
    --ico-sv-profile: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='4'/%3E%3Cpath%20d='M4.5%2020.5a7.5%207.5%200%200%201%2015%200'/%3E%3C/svg%3E");
    --ico-sv-search: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='m20.5%2020.5-4.2-4.2'/%3E%3C/svg%3E");
    --ico-sv-posts: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%206h12M8%2012h12M8%2018h12M3.5%206h.01M3.5%2012h.01M3.5%2018h.01'/%3E%3C/svg%3E");
    --ico-sv-edit: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11%204H6a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-5'/%3E%3Cpath%20d='M18.4%202.6a2.1%202.1%200%200%201%203%203L12%2015l-4%201%201-4z'/%3E%3C/svg%3E");
    --ico-sv-point: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8.5'%20r='5.5'/%3E%3Cpath%20d='m8.6%2013.6-1.1%207%204.5-2.7%204.5%202.7-1.1-7'/%3E%3C/svg%3E");
}
.sv a { display: flex; align-items: center; gap: var(--s2); }
.sv a::before {
    content: ""; flex: none; width: 15px; height: 15px;
    background-color: currentColor; opacity: .75;
    /* 주소로 갈리지 않는 항목은 '홈페이지' 뿐이다 — 회원이 적은 임의의 외부 주소라 패턴이 없다 */
    -webkit-mask: var(--ico-sv-home) center/contain no-repeat;
            mask: var(--ico-sv-home) center/contain no-repeat;
}
.sv a:hover::before { opacity: 1; }
.sv a[href*="memo_form.php"]::before { -webkit-mask-image: var(--ico-sv-memo); mask-image: var(--ico-sv-memo); }
.sv a[href*="formmail.php"]::before { -webkit-mask-image: var(--ico-sv-email); mask-image: var(--ico-sv-email); }
.sv a[href*="profile.php"]::before { -webkit-mask-image: var(--ico-sv-profile); mask-image: var(--ico-sv-profile); }
.sv a[href*="sfl="]::before { -webkit-mask-image: var(--ico-sv-search); mask-image: var(--ico-sv-search); }
.sv a[href*="new.php"]::before { -webkit-mask-image: var(--ico-sv-posts); mask-image: var(--ico-sv-posts); }
.sv a[href*="member_form.php"]::before { -webkit-mask-image: var(--ico-sv-edit); mask-image: var(--ico-sv-edit); }
.sv a[href*="point_list.php"]::before, .sv a[href*="/point.php"]::before { -webkit-mask-image: var(--ico-sv-point); mask-image: var(--ico-sv-point); }

/* 새글 모아보기 필터 — .bbs-cate 를 그대로 쓰되 그룹 선택만 오른쪽으로 민다 */
.new-filters select { margin-left: auto; height: 34px; }
/* 목록이 카드로 바뀌는 분기점과 같게 — 좁아지면 오른쪽으로 밀지 않고 다음 줄로 내린다.
   margin-left:auto 를 둔 채로는 줄바꿈이 되지 않아 선택칸이 화면 밖으로 잘렸다. */
@media (max-width: 620px) {
    .new-filters select { margin-left: 0; width: 100%; }
}
.new-table .col-board { white-space: nowrap; }
.new-table .col-board .board-name { margin-left: var(--s2); color: var(--muted); font-size: var(--t-sm); }
.new-table .col-board .board-name:hover { color: var(--accent); }
.new-tools { display: flex; justify-content: flex-end; margin-top: var(--s3); }

/* ═══════════ 자주하시는 질문 (bbs/faq.php) ═══════════ */
/* 펼침은 <details> — 자바스크립트 없이 동작하고, 검색 결과는 열린 채로 나온다 */
.faq-search { margin-bottom: var(--s4); }
.faq-img { margin: 0 0 var(--s4); }
.faq-img img { max-width: 100%; border-radius: var(--r-lg); display: block; }
.faq-html { margin: 0 0 var(--s4); font-size: var(--t-md); line-height: 1.8; color: var(--muted); }

.faq-list { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:first-child { border-top: 0; }
.faq-item > summary {
    display: flex; align-items: center; gap: var(--s3); cursor: pointer;
    padding: var(--s4) var(--s5); font-size: var(--t-md); font-weight: 600; color: var(--fg);
    list-style: none;   /* 기본 삼각형을 지우고 아래 화살표로 바꾼다 */
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before {
    content: "Q"; flex: none;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-deep);
    font-size: var(--t-sm); font-weight: 800;
}
.faq-item > summary::after {
    content: ""; margin-left: auto; flex: none;
    width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.faq-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-item > summary:hover { background: var(--row-hover); }
.faq-answer {
    padding: 0 var(--s5) var(--s4) calc(var(--s5) + 24px + var(--s3));
    font-size: var(--t-md); line-height: 1.8; color: var(--muted);
}
.faq-answer img { max-width: 100%; height: auto; }

/* ═══════════ 1:1 문의 (bbs/qalist·qaview·qawrite) ═══════════ */
/* 목록·읽기는 게시판 부품(.list-panel·.post)을 그대로 쓰고, 여기서는 차이만 정의한다 */
.qa-table .col-subject .chip { margin-right: var(--s2); }
.qa-post .post-meta .chip { margin-left: var(--s2); }
.qa-answer { margin-top: var(--s4); border-left: 3px solid var(--accent); }
.qa-answer .post-head h2 { font-size: var(--t-md); }
.qa-images { padding: var(--s4) var(--s5) 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.qa-images img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.qa-nav, .qa-acts { display: flex; gap: var(--s2); }
.qa-acts { margin-left: auto; }
/* 알림 수신 같은 곁다리 선택 — 입력칸 아래 한 줄로 붙인다 */
.inline-chk {
    display: inline-flex; align-items: center; gap: var(--s2);
    margin-top: var(--s2); font-size: var(--t-sm); color: var(--muted); cursor: pointer;
}
.inline-chk input { flex: none; margin: 0; accent-color: var(--accent); }

/* ═══════════ 본인인증 (bbs/member_cert_refresh.php) ═══════════ */
/* .member-box 는 로그인처럼 좁은 폼용이다. 이 화면은 안내 표가 들어가므로 조금 넓힌다 */
.cert-box { max-width: 640px; }
.cert-box h3 { font-size: var(--t-md); font-weight: 700; margin: var(--s5) 0 var(--s2); text-align: left; }
.cert-box .list-table th, .cert-box .list-table td { font-size: var(--t-sm); white-space: normal; }
.cert-agree { margin-top: var(--s3); font-size: var(--t-md); color: var(--fg); }
.cert-btns { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ═══════════ 카트 프론트 목록 (cart/list.php) ═══════════ */
/* 상품카드 그리드 — 기존 .item-grid/.item-card(순정 shop 모듈, name/price/is_soldout 스키마)와
   시각은 맞추되, cart 모듈은 데이터 계약이 달라(it_name/it_price/it_stock) 클래스도 분리한다 */
/* 카드는 오늘의집처럼 플랫하게 — 박스 없이 라운드 썸네일 + 텍스트 스택. 호버는 사진만 살짝 확대 */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s5) var(--s4); }
.shop-card { background: none; }
.shop-card > a { display: block; }
.shop-thumb {
    position: relative; display: block; aspect-ratio: 1 / 1; background: var(--bg);
    border-radius: 12px; overflow: hidden; margin-bottom: var(--s3);
}
.shop-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s ease;
}
.shop-card:hover .shop-thumb img { transform: scale(1.05); }
.shop-cat-line { display: block; font-size: var(--t-xs); color: var(--muted); margin-bottom: 2px; }
.shop-name {
    display: block; font-size: var(--t-sm); font-weight: 500; line-height: 1.4;
    margin-bottom: var(--s2);
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.shop-price {
    display: block; font-size: var(--t-md); font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.shop-price em { font-style: normal; font-weight: 600; font-size: var(--t-sm); }
.shop-soldout {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(15,22,33,.55); color: #fff; font-weight: 800; font-size: var(--t-lg);
}

/* 검색·분류 필터 후 빈 결과 — .bbs-empty 와 같은 자리, 다른 화면(비게시판)에서도 쓰게 이름만 일반화 */
.empty { padding: var(--s7) 0; text-align: center; color: var(--muted); }

/* 목록 페이징(cart/list.php) — 화면이 모든 페이지 링크를 <a class="current"> 로 내보내므로
   기존 .paging-cur(별도 태그) 규칙이 안 먹는다. 같은 톤으로 a.current 를 추가한다 */
.paging a.current { background: var(--accent); color: var(--accent-fg); font-weight: 700; box-shadow: var(--sh-btn); }

/* ═══════════ 카트 프론트 상세 (cart/item.php) ═══════════ */
/* .shop-price·.shop-soldout 은 목록 카드(.shop-card)의 규칙을 물려받는다. .shop-soldout 은
   카드에서 썸네일 위 오버레이(position:absolute)라, 상세 화면에서는 평범한 안내 문단으로
   쓰이므로 .shop-item-info 안에서만 오버레이를 해제한다 */
/* ── 옵션 고르기 — 값을 칩으로 늘어놓고 눌러서 고른다(드롭다운을 열지 않는다) ── */
.opt-picker { display: grid; gap: var(--s4); margin: var(--s4) 0; }
/* 앞 축을 아직 안 골라 잠긴 축 — 예전엔 축 전체를 opacity 로 흐리게 했는데, 칩의 흐린 글자와
   겹쳐 값이 읽히지 않았다. 흐리게 하지 않고 칩을 "눌리지 않는 버튼" 으로 칠하고,
   왜 못 누르는지는 축 이름 옆에 글로 적는다 */
.opt-axis-pick.is-hint { color: var(--muted); font-weight: 600; }
.opt-axis-head { display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 8px; }
.opt-axis-name { font-size: var(--t-sm); font-weight: 800; letter-spacing: .02em; }
.opt-axis-pick { font-size: var(--t-sm); color: var(--accent); font-weight: 700; }
.opt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border: 1.5px solid var(--line); border-radius: var(--r-full);
    background: var(--card); color: var(--fg); font: inherit; font-weight: 600; line-height: 1;
    cursor: pointer; transition: border-color .15s, background-color .15s, color .15s, transform .1s;
}
.opt-chip:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.opt-chip:focus-visible { outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(46, 124, 246, .2); }
.opt-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.opt-chip.is-on .opt-chip-left { color: rgba(255, 255, 255, .85); }
.opt-chip.is-off, .opt-chip:disabled {
    background: var(--chip-off); border-color: var(--chip-off); color: var(--chip-off-fg);
    border-style: solid; cursor: not-allowed; text-decoration: none;
}
.opt-chip.is-off .opt-chip-left { color: var(--chip-off-fg); }
/* 칩에 붙는 남은 수량 — 값 뒤에 작게. 몇 개 안 남았으면 색으로 알린다 */
.opt-chip-left { font-size: var(--t-xs); font-weight: 700; color: var(--muted);
    font-variant-numeric: tabular-nums; }
/* 얼마 안 남았다는 빨강 — 어두운 모드에서 #C2452D 는 카드 위 3.27:1 이라 흐리다.
   테마가 이미 가진 --danger-deep 이면 밝은 모드 6.47:1 / 어두운 모드 8.64:1 로 양쪽에서 읽힌다 */
.opt-chip-left.is-low { color: var(--danger-deep); }
.opt-chip.is-on .opt-chip-left.is-low { color: #FFE0D8; }
@media (prefers-reduced-motion: reduce) {
    .opt-chip { transition: none; }
    .opt-chip:hover:not(:disabled) { transform: none; }
}

.cart-opts { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
.cart-opts .cart-buy-label { display: grid; gap: 6px; font-weight: 700; }
/* 브라우저 기본 화살표를 끄고 직접 그린다 — 운영체제마다 제각각인 모양을 통일하려고.
   화살표는 인라인 SVG 라 이미지 파일이 늘지 않는다(# 은 %23 으로 써야 잘리지 않는다). */
.cart-opts select, .cart-buy select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 100%; padding: 12px 42px 12px 14px;
    border: 1px solid var(--btn-line); border-radius: var(--r2);
    background-color: var(--card); color: var(--fg); font: inherit; line-height: 1.3;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%237C8EA6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 7 7.5 13 1.5'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center;
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.cart-opts select:hover, .cart-buy select:hover { border-color: var(--accent); }
.cart-opts select:focus-visible, .cart-buy select:focus-visible {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 124, 246, .18); }
.cart-opts select:disabled { color: var(--muted); background-color: var(--bg); cursor: not-allowed;
    border-color: var(--line); }
/* 같은 옵션을 또 고른 경우처럼 '막을 일은 아니지만 알려야 하는' 안내 */
.cart-pick-msg { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r2);
    background: var(--notice-bg); color: var(--notice-fg); border: 1px solid transparent; font-weight: 700; }
/* 고른 옵션 줄 — 여러 조합을 담고 줄마다 수량을 조절한다 */
.cart-picks { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: 8px; }
.cart-pick { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
    padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r2);
    background: var(--card); transition: background-color .2s; }
.cart-pick.is-bump { background: var(--bg); }
.cart-pick-name { flex: 1 1 8em; font-weight: 700; display: grid; gap: 2px; }
/* 담긴 줄에도 재고를 적어 둔다 — 수량을 올릴 때 어디까지 되는지 알 수 있게 */
.cart-pick-stock { font-size: var(--t-xs); font-weight: 600; color: var(--muted);
    font-variant-numeric: tabular-nums; }
/* 상세의 고른 옵션 줄도 장바구니와 같은 .cart-qty 를 쓴다 — 규칙은 아래 '수량 조절' 한 곳에만
   둔다. 예전에는 여기 따로 있어 두 화면의 수량칸이 크기도 테두리도 달랐다 */
.cart-pick-price { min-width: 5em; text-align: right; font-weight: 700; }
/* ✕ 아이콘 버튼 — 글자가 아니라 기호라서 밑줄을 긋지 않는다 */
.cart-pick-del { display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
    text-decoration: none; transition: background-color .15s, color .15s; }
.cart-pick-del:hover { background: var(--row-hover); color: var(--fg); text-decoration: none; }
.cart-pick-del:focus-visible { outline: none; color: var(--fg);
    box-shadow: 0 0 0 3px rgba(46, 124, 246, .2); }
@media (prefers-reduced-motion: reduce) { .cart-pick-del { transition: none; } }
.cart-picks-empty { margin: 0 0 var(--s3); color: var(--muted); font-size: .95em; }
/* 고른 것 합계 — 개수와 금액은 한 값이므로 붙여 두되 사이는 벌린다.
   붙여만 두면 "총 1개111원" 으로 읽히고, 양 끝으로 벌리면 눈이 상자를 가로질러야 해
   한 덩어리로 안 읽힌다. 둘 다 오른쪽에 모으고 사이만 12px — 금액이 상자 끝선에 맞아
   (돈은 오른쪽 정렬이 관례) 개수는 그 앞에 붙는 꼬리말이 된다.
   금액은 결정을 좌우하는 값이라 한 급 크게 둔다 */
.cart-picks-total { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r2);
    background: var(--bg); border: 1px solid var(--line);
    display: flex; align-items: baseline; justify-content: flex-end; gap: var(--s3);
    font-size: var(--t-md); font-weight: 700; }
.cart-picks-total > span { color: var(--muted); font-variant-numeric: tabular-nums; }
.cart-total-sum { font-size: var(--t-xl); font-weight: 800; color: var(--fg);
    font-variant-numeric: tabular-nums; }

/* ── 상세 아래 탭(상세정보·리뷰·문의·판매자정보·추천) ── */
/* 가로로만 스크롤한다 — overflow-x 만 주면 overflow-y 의 visible 이 auto 로 계산돼
   탭 줄 오른쪽에 짧은 세로 스크롤바가 생긴다(위 .list-table-wrap 과 같은 함정) */
.shop-tabs { display: flex; gap: var(--s5); align-items: center; margin: var(--s7) 0 var(--s5);
    border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
.shop-tab { flex: 0 0 auto; padding: var(--s3) 2px var(--s3); color: var(--muted);
    text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent;
    margin-bottom: -1px; }
.shop-tab:hover { color: var(--fg); }
.shop-tab.is-on { color: var(--fg); font-weight: 800; border-bottom-color: var(--fg); }
.shop-tab-n { color: var(--muted); font-weight: 600; }
.shop-tab.is-on .shop-tab-n { color: var(--muted); }
.shop-panel { display: none; }
.shop-panel.is-on { display: block; }
.shop-empty { padding: var(--s7) 0; color: var(--muted); text-align: center; }
.shop-seller { width: 100%; border-collapse: collapse; }
.shop-seller th, .shop-seller td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line);
    text-align: left; vertical-align: top; font-size: .95em; }
.shop-seller th { width: 9em; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* 관리자만 보는 비노출 안내 — 손님 화면에는 아예 출력되지 않는다(뷰에서 건너뜀) */
.shop-item-offnotice { margin: 0 0 var(--s5); padding: var(--s3) var(--s4); border-radius: var(--r2);
    background: var(--notice-bg); color: var(--notice-fg); border: 1px solid transparent; font-weight: 600; }
.shop-item-top { display: flex; gap: var(--s6); flex-wrap: wrap; margin-bottom: var(--s6); }
.shop-item-gallery { flex: 1 1 360px; min-width: 280px; max-width: 480px; }
.shop-item-gallery img#cart_main_img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-xl);
    background: var(--bg); display: block;
}
.shop-thumb-empty {
    aspect-ratio: 1 / 1; border-radius: var(--r-xl); background: var(--bg);
    display: flex; align-items: center; justify-content: center; color: var(--muted);
}
/* 썸네일 줄 — 한 줄로 두고 넘치면 좌우 화살표로 민다. 줄바꿈으로 쌓으면 사진이 열 장만
   돼도 화면 한 판을 잡아먹는다. overflow-x 만 주면 세로 스크롤바가 따라붙으므로
   (이 파일 위쪽 .shop-tabs 와 같은 함정) overflow-y 를 눌러 둔다 */
.shop-thumbnav { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.shop-thumbnav-btn {
    flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%;
    border: 1px solid var(--btn-line); background: var(--card); color: var(--fg);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: var(--sh-sm); transition: border-color .15s, color .15s, opacity .15s;
}
.shop-thumbnav-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shop-thumbnav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.shop-thumbnav-btn:disabled { opacity: .3; cursor: default; box-shadow: none; }
/* 사진이 몇 장 없어 밀 것이 없으면 화살표를 아예 두지 않는다 */
.shop-thumbnav.is-static .shop-thumbnav-btn { display: none; }
.shop-item-thumbs {
    flex: 1; min-width: 0;
    display: flex; gap: var(--s2); flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden; padding: 2px;
    /* scroll-snap 은 넣지 않는다 — 화살표가 미는 동안 브라우저가 가까운 칸으로 도로
       끌어당겨 제자리에 머문다(실제로 한 칸도 안 움직였다).
       화살표는 값만 바꾸고, 부드럽게 미끄러지는 일은 여기서 브라우저가 맡는다 */
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    /* 화살표가 있으니 스크롤바는 감춘다(손가락·휠로 미는 것은 그대로 된다) */
    scrollbar-width: none; -ms-overflow-style: none;
}
.shop-item-thumbs::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .shop-item-thumbs { scroll-behavior: auto; } }
.shop-item-thumbs img {
    flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-md);
    cursor: pointer; box-shadow: var(--sh-sm);
    border: 2px solid transparent; background: var(--bg);
}
/* 지금 큰 자리에 걸린 사진 — 어느 장을 보고 있는지 표시한다 */
.shop-item-thumbs img.is-on { border-color: var(--accent); }
/* 큰 사진 — 눌러서 확대해 볼 수 있음을 커서·살짝 뜨는 움직임으로 알린다 */
#cart_main_img.is-zoomable { cursor: zoom-in; transition: transform .18s ease, box-shadow .18s ease; }
#cart_main_img.is-zoomable:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
#cart_main_img.is-zoomable:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ── 확대해 보기(라이트박스) ── 화면을 덮고 원본을 보여 준다.
   바탕은 늘 어둡게 둔다 — 사진을 볼 때만큼은 밝은 테마에서도 사진에 눈이 가야 한다. */
.cart-lb {
    position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
    background: rgba(9, 13, 20, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .2s ease;
}
.cart-lb.is-open { opacity: 1; }
.cart-lb[hidden] { display: none; }
/* 위 줄 — 몇 번째 장인지와 닫기 */
.cart-lb-bar {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: var(--s3) var(--s4); color: #fff;
}
.cart-lb-count { font-size: var(--t-sm); font-weight: 600; opacity: .85; letter-spacing: .02em; }
.cart-lb-x {
    width: 40px; height: 40px; font-size: 26px; line-height: 1; color: #fff; cursor: pointer;
    background: rgba(255, 255, 255, .1); border: 0; border-radius: var(--r-full);
    transition: background .15s ease;
}
.cart-lb-x:hover { background: rgba(255, 255, 255, .22); }
/* 사진 자리 — 남는 공간을 다 쓰고, 사진은 그 안에 통째로 들어간다(잘리지 않게 contain) */
.cart-lb-stage {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 var(--s4); overflow: hidden;
}
.cart-lb-stage img {
    max-width: 100%; max-height: 100%; object-fit: contain; display: block;
    border-radius: var(--r-md); cursor: zoom-in;
    /* 확대·이동은 JS 가 transform 으로 준다. 손가락 조작을 우리가 직접 다루므로
       브라우저 기본 제스처(스크롤·핀치)는 꺼 둔다 — 안 그러면 둘이 서로 밀친다 */
    touch-action: none; -webkit-user-select: none; user-select: none;
    will-change: transform;
}
/* 버튼·두 번 누르기처럼 단번에 바뀔 때만 부드럽게. 끌거나 휠을 굴리는 동안에는
   전환을 걸지 않는다 — 손을 따라오지 않고 뒤늦게 미끄러진다 */
.cart-lb-stage img.is-anim { transition: transform .2s ease; }
.cart-lb-stage img.is-zoom { cursor: grab; }
.cart-lb-stage img.is-grabbing { cursor: grabbing; }
/* 확대 중에는 바깥을 눌러 닫기 쉽도록 사진 밖 여백을 넉넉히 둔다 */
.cart-lb.is-zoomed .cart-lb-stage { padding: 0; }

/* 배율 조절 — 모바일에서는 손가락 벌리기 말고도 눌러서 키울 수단이 필요하다 */
.cart-lb-tools { display: flex; align-items: center; gap: var(--s1); }
.cart-lb-tool, .cart-lb-pct {
    height: 34px; color: #fff; cursor: pointer; border: 0;
    background: rgba(255, 255, 255, .1); border-radius: var(--r-full);
    transition: background .15s ease;
}
.cart-lb-tool { width: 34px; font-size: 20px; line-height: 1; }
.cart-lb-pct { min-width: 62px; padding: 0 var(--s2); font-size: var(--t-xs); font-weight: 700; }
.cart-lb-tool:hover, .cart-lb-pct:hover { background: rgba(255, 255, 255, .22); }
/* 조작 안내 — 잠깐 보여 주고 스스로 사라진다 */
.cart-lb-hint {
    flex: none; margin: 0; padding: 0 var(--s4) var(--s2); text-align: center;
    font-size: var(--t-xs); color: rgba(255, 255, 255, .7);
    transition: opacity .4s ease;
}
.cart-lb-hint.is-gone { opacity: 0; }
/* 좌우 넘기기 — 사진 위가 아니라 화면 가장자리에 둔다(사진을 가리지 않게) */
.cart-lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
    width: 48px; height: 48px; font-size: 30px; line-height: 44px; color: #fff; cursor: pointer;
    background: rgba(255, 255, 255, .1); border: 0; border-radius: var(--r-full);
    transition: background .15s ease;
}
.cart-lb-nav:hover { background: rgba(255, 255, 255, .22); }
.cart-lb-prev { left: var(--s3); }
.cart-lb-next { right: var(--s3); }
/* 아래 썸네일 줄 — 지금 보는 장을 표시하고, 바로 건너뛸 수 있게 */
.cart-lb-thumbs {
    flex: none; display: flex; gap: var(--s2); justify-content: center; flex-wrap: nowrap;
    padding: var(--s3) var(--s4) var(--s4); overflow-x: auto; overflow-y: hidden;
}
.cart-lb-thumbs img {
    flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-md);
    cursor: pointer; opacity: .5; border: 2px solid transparent; background: #000;
    transition: opacity .15s ease, border-color .15s ease;
}
.cart-lb-thumbs img:hover { opacity: .85; }
.cart-lb-thumbs img.is-on { opacity: 1; border-color: #fff; }
/* 덮개가 떠 있는 동안 뒤 문서가 함께 스크롤되지 않게 */
body.cart-lb-lock { overflow: hidden; }

/* 좁은 화면 — 사진에 자리를 최대한 내준다. 넘기기 화살표는 손가락으로 밀면 되므로 감추고,
   썸네일 줄도 줄여 사진이 세로로 더 크게 들어가게 한다 */
@media (max-width: 640px) {
    .cart-lb-bar { padding: var(--s2) var(--s3); }
    .cart-lb-x { width: 36px; height: 36px; font-size: 23px; }
    .cart-lb-tool { width: 32px; height: 32px; }
    .cart-lb-pct { height: 32px; min-width: 56px; }
    .cart-lb-nav { display: none; }
    .cart-lb-stage { padding: 0 var(--s2); }
    .cart-lb-thumbs { padding: var(--s2) var(--s3) var(--s3); }
    .cart-lb-thumbs img { width: 40px; height: 40px; }
    /* 확대해서 보는 중에는 썸네일 줄까지 접어 사진에 화면을 다 준다 */
    .cart-lb.is-zoomed .cart-lb-thumbs, .cart-lb.is-zoomed .cart-lb-hint { display: none; }
}
/* 움직임을 줄여 달라는 설정이면 전환만 끈다(확대·이동 자체는 그대로 동작해야 한다) */
@media (prefers-reduced-motion: reduce) {
    .cart-lb, .cart-lb-stage img.is-anim, #cart_main_img.is-zoomable { transition: none; }
    #cart_main_img.is-zoomable:hover { transform: none; }
}

.shop-item-info { flex: 1 1 320px; min-width: 280px; }
.shop-item-info .shop-price { margin: 0 0 var(--s4); font-size: var(--t-2xl); }
.shop-sku-table { width: 100%; border-collapse: collapse; margin-bottom: var(--s4); }
.shop-sku-table th {
    font-size: var(--t-sm); font-weight: 700; color: var(--muted); letter-spacing: .03em;
    padding: var(--s2) var(--s3); text-align: center; border-bottom: 1px solid var(--line);
}
.shop-sku-table td { padding: var(--s2) var(--s3); text-align: center; border-bottom: 1px solid var(--line); }
.shop-item-info .shop-soldout {
    position: static; inset: auto; background: none; display: block;
    color: var(--accent); font-weight: 700; font-size: var(--t-md); margin: 0 0 var(--s3);
}
.shop-item-note { font-size: var(--t-sm); color: var(--muted); }
.shop-item-content { margin-top: var(--s6); line-height: 1.7; }

/* ---------- 카트 메인(/cart/) — 오늘의집풍 스토어홈 ---------- */
/* standard 는 쇼핑몰에 시그니처 민트를 따로 썼는데, 강조색이 하나뿐인 이 템플릿에서는
   그 색이 사이트 어디에도 없어 되레 붕 뜬다. 스코프 변수는 남기되 값은 강조색을 받는다 */
.cart-home { --oh: var(--accent); }

.cart-home-search { max-width: 560px; margin: var(--s4) auto var(--s5); }

/* 큰 라운드 사진 배너 + 좌하단 카피 + 민트 CTA */
.cart-banner {
    position: relative; display: block; border-radius: var(--r-xl); overflow: hidden;
    aspect-ratio: 16 / 6; margin-bottom: var(--s6); background: var(--bg);
}
.cart-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-banner::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(75deg, rgba(10,16,24,.62) 0%, rgba(10,16,24,.25) 45%, rgba(10,16,24,0) 70%);
}
.cart-banner.no-photo { background: var(--accent); }
.cart-banner.no-photo::after { content: none; }
.cart-banner-text {
    position: absolute; left: 6%; bottom: 14%; z-index: 1; color: #fff; max-width: 70%;
}
.cart-banner-text strong { display: block; font-size: var(--t-2xl); font-weight: 800; margin-bottom: var(--s2); }
.cart-banner-text em { display: block; font-style: normal; font-size: var(--t-sm); opacity: .9; margin-bottom: var(--s3); }
.cart-banner-cta {
    display: inline-block; background: var(--oh); color: var(--accent-fg); font-weight: 650; font-size: var(--t-sm);
    padding: var(--s2) var(--s4); border-radius: var(--r-btn);
}
.cart-banner:hover .cart-banner-cta { background: var(--accent-deep); }

/* 카테고리 — 사진 라운드 타일 + 라벨(오늘의집 카테고리 아이콘 자리) */
.cart-cats {
    display: flex; gap: var(--s6); justify-content: center;
    overflow-x: auto; padding: var(--s2) var(--s2) var(--s5);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cart-cats::-webkit-scrollbar { display: none; }
.cart-cats a { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--s2); width: 76px; }
.cart-cat-thumb {
    width: 72px; height: 72px; border-radius: 24px; overflow: hidden;
    background: var(--bg); border: 1px solid var(--line);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cart-cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-cat-initial {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: var(--t-lg); font-weight: 700; color: var(--muted);
}
.cart-cats a:hover .cart-cat-thumb { transform: translateY(-2px); box-shadow: var(--sh-md); }
.cart-cat-name { font-size: var(--t-sm); color: var(--fg); font-weight: 600; }

/* 섹션 — 굵은 좌측 제목 + 민트 더보기 */
.cart-sec { margin-bottom: var(--s7); }
.cart-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s4); }
.cart-sec-head h3 { font-size: var(--t-xl); font-weight: 800; }
.cart-sec-head a { font-size: var(--t-sm); color: var(--oh); font-weight: 700; }
.cart-sec-head a:hover { filter: brightness(.85); }

/* 분류별 가로 스크롤 상품 행 — 카드는 .shop-card 를 그대로 쓰고 폭만 고정 */
.shop-row {
    display: flex; gap: var(--s4); overflow-x: auto; padding-bottom: var(--s2);
    -webkit-overflow-scrolling: touch;
}
.shop-row .shop-card { flex: 0 0 168px; }

@media (max-width: 640px) {
    .cart-banner { aspect-ratio: 4 / 3; border-radius: 14px; }
    .cart-banner-text strong { font-size: var(--t-xl); }
    .cart-cats { justify-content: flex-start; }
}

/* ---------- 카트 구매 폼·장바구니 ---------- */
.cart-cta {
    display: inline-block; background: var(--accent); color: var(--accent-fg); font-weight: 650;
    font-size: var(--t-md); padding: var(--s3) var(--s5); border-radius: var(--r-btn);
    border: 1px solid var(--accent); cursor: pointer; text-align: center;
}
.cart-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-fg); }
/* 곁들이 버튼(장바구니)은 강조색 테두리가 아니라 중성 테두리 — 주 버튼과 나란히 놓였을 때
   무엇을 눌러야 하는지가 색 하나로 갈린다 */
.cart-cta.is-line { background: var(--card); border-color: var(--btn-line); color: var(--fg); }
.cart-cta.is-line:hover { background: var(--row-hover); border-color: var(--btn-line); color: var(--fg); }
.cart-cta.is-disabled { background: var(--line); color: var(--muted); cursor: default; }

.cart-buy { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.cart-buy-label { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-sm); font-weight: 600; }
.cart-buy-label select { flex: 1; min-width: 0; padding: var(--s2); }
/* 자식 선택자여야 한다 — 옵션 없는 상품의 수량은 이제 .cart-qty 안의 .cart-qty-input 이고,
   그 안까지 훑으면 이 폭·정렬이 스테퍼의 가운데 칸을 이겨 모양이 어긋난다 */
.cart-buy-label > input[type=number] { width: 90px; padding: var(--s2); text-align: right; }
/* 수량 이름과 칸이 한 줄에 나란히 — .cart-buy-label 의 flex 를 그대로 쓴다 */
.cart-buy-qty > label { margin: 0; }
.cart-buy-btns { display: flex; gap: var(--s3); }
.cart-buy-btns .cart-cta { flex: 1; }
/* 구매 폼이 없는(품절) 상품에서 하트만 있는 줄 — 폼의 margin-top 을 대신 받는다 */
.cart-buy-btns-alone { margin-top: var(--s4); }

/* ── 찜 하트 — 바로구매 오른쪽. 사는 버튼과 색을 나눠 쓴다(파랑=산다, 빨강=담아 둔다).
   flex:none 이라 장바구니·바로구매가 나눠 갖는 폭을 빼앗지 않는다. 채운 하트가 "찜함" 이다 ── */
.wish-btn {
    flex: none; display: flex; align-items: center; gap: var(--s2);
    padding: var(--s3) var(--s4); border: 1px solid var(--btn-line); border-radius: 10px;
    background: var(--card); color: var(--muted);
    font-size: var(--t-sm); font-weight: 700; line-height: 1; cursor: pointer;
    transition: color .15s, border-color .15s;
}
.wish-btn svg {
    width: 19px; height: 19px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linejoin: round;
}
.wish-btn:hover { color: var(--danger); border-color: var(--danger); }
.wish-btn.is-on { color: var(--danger); border-color: var(--danger); }
.wish-btn.is-on svg { fill: currentColor; }
.wish-btn-n { font-variant-numeric: tabular-nums; opacity: .75; }
/* 좁은 화면에서는 글자를 접고 하트만 남긴다 — 세 버튼이 한 줄에 들어가야 구매 흐름이 안 끊긴다 */
@media (max-width: 420px) {
    .wish-btn-label { display: none; }
}

/* ── 반품 ── */
/* 주문 상품 줄에 붙는 상태 딱지 — 3개 중 1개만 반품된 주문이 그렇게 읽히도록 줄마다 단다 */
.cart-oi-flag {
    display: inline-block; margin-left: var(--s2); padding: 1px var(--s2);
    /* 옅은 강조 면 위 글자는 --accent 가 아니라 --accent-deep 이다 —
       --accent 는 이 면 위에서 3.62:1 로 얕고, --accent-deep 이면 5.35:1 / 어두운 모드 8.01:1 */
    border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep);
    font-size: var(--t-xs); font-weight: 700; vertical-align: middle;
}
.cart-return-row { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.cart-return-row:first-of-type { border-top: 0; }
.cart-return-head {
    display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
    margin: 0 0 var(--s2); font-size: var(--t-base); color: var(--muted);
}
.cart-return-head b { color: var(--fg); font-size: var(--t-md); }
/* 반품할 품목 고르기 — 글자만이 아니라 줄 전체가 눌리게 label 로 감싼다 */
.cart-return-pick { margin: var(--s3) 0; }
.cart-return-pick li { border-top: 1px solid var(--line); }
.cart-return-pick label {
    display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0;
    cursor: pointer; font-size: var(--t-base);
}
.cart-return-pick label span { flex: 1; min-width: 0; }
.cart-return-pick label em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-return-field {
    display: flex; align-items: center; gap: var(--s3);
    margin-bottom: var(--s3); font-size: var(--t-base); font-weight: 600;
}
.cart-return-field input { flex: 1; min-width: 0; padding: var(--s2); }

/* 주문 상세에서 손님이 직접 고치는 줄 — 입금자명·받는분, 그리고 주문 취소 사유.
   "폼" 이 아니라 "고쳐 쓰는 줄" 로 보이게 입력칸과 버튼을 한 줄에 붙인다.
   버튼은 안 줄어들고 입력칸만 줄어들다가, 더 좁아지면 버튼이 아래로 내려간다. */
.cart-edit { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
/* 이름 한 칸이라 줄을 다 채울 이유가 없다 — 안 늘어나고, 좁아질 때만 줄어든다 */
.cart-edit input { flex: 0 1 220px; min-width: 0; padding: var(--s2); }
.cart-edit .cart-cta { flex: none; padding: var(--s2) var(--s4); font-size: var(--t-base); }
/* 칸이 셋 이상이면 한 줄에 밀어 넣지 않는다(취소 사유: 고르기 + 직접 입력 + 버튼) */
.cart-edit.is-stack { flex-direction: column; align-items: stretch; gap: var(--s3); }
/* 세로로 쌓을 때 flex-basis 는 높이가 된다 — 위의 140px 을 지우지 않으면 입력칸이 140px 짜리
   상자가 된다(가로 줄에서만 뜻이 있는 값이다) */
.cart-edit.is-stack select, .cart-edit.is-stack input { flex: none; width: 100%; padding: var(--s2); }
.cart-edit.is-stack .cart-cta { align-self: flex-start; }

/* 취소 사유는 손님이 반드시 읽는 한 줄이다 — 가장 작고 흐린 글씨(.cart-co-note)로 두면
   "취소됐다" 만 보이고 왜인지는 안 읽혀서 결국 문의 전화가 온다 */
/* 취소 사유는 반드시 읽히되 소리치지는 않아야 한다 — 본문보다 한 치수 작게 두는 대신
   색으로 눈에 걸리게 한다(취소 맥락이라 danger 계열). 밝은 모드 #B91C1C 는 카드 위 7.0:1 */
.cart-cancel-why { margin-top: var(--s3); font-size: var(--t-base); color: var(--danger-deep); }

/* 찜한 일시 — 가격 아래 한 줄. 카드에서 가장 약한 정보라 제일 작고 흐리게 둔다 */
.wish-date {
    display: block; margin-top: var(--s1);
    font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums;
}

/* 찜 목록 카드의 빼기 — 카드 링크 위에 얹는다(형제 요소라 링크와 눌림이 겹치지 않는다) */
.wish-card { position: relative; }
/* 찜 빼기 — 채운 빨간 하트로 뒀더니 목록에 빨간 점이 줄줄이 박혔다.
   찜 목록 안에서 "찜했다" 는 이미 자명하므로 그 색이 나르는 정보가 없다.
   평소엔 윤곽선 하트로 조용히 두고, 손이 닿았을 때 비로소 빨강 — 그때가 지우려는 순간이다 */
.wish-del {
    position: absolute; top: var(--s2); right: var(--s2); z-index: 1;
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--card); color: var(--muted);
    box-shadow: var(--sh-sm); transition: color .12s, background .12s;
}
.wish-del svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.wish-del:hover, .wish-del:focus-visible { background: var(--card); color: var(--danger); }
.wish-del:hover svg, .wish-del:focus-visible svg { fill: currentColor; }
.wish-del:disabled { opacity: .5; cursor: default; }

/* 주문 단계로 못 넘어가는 이유 — 버튼 바로 위에 한 줄로. 상자를 치지 않는다(줄 안내와 같은 톤).
   클래스 이름을 .cart-cart-warn 과 다르게 둔다 — 그 이름은 장바구니 줄 안내가 이미 쓰고 있어
   같이 쓰면 줄 안내에까지 상자가 번진다 */
.cart-order-block { margin: 0 0 var(--s3); color: var(--danger-deep); font-weight: 700; }

/* 고르기 도구 줄 — 목록 위에 전체 선택과 선택 삭제 */
.cart-tools {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    margin-bottom: var(--s3); flex-wrap: wrap;
}
.cart-chk-all { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-base); font-weight: 600; cursor: pointer; }
.cart-chk-all b { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
/* 체크박스는 브라우저 기본을 쓰되 크기와 색만 맞춘다 — 직접 그리면 접근성 동작을 다시 만들어야 한다 */
/* 이름을 .cart-sel 로 둔다 — .cart-pick 은 상품 상세에서 "고른 옵션 줄"(li)이 이미 쓰고 있어서,
   여기에 width:18px 을 주면 그 줄이 18px 로 찌그러진다. 실제로 그렇게 깨졌다.
   한 템플릿이 커뮤니티·쇼핑몰·상세를 함께 그리므로 클래스 이름은 화면 밖에서도 유일해야 한다 */
.cart-sel, .cart-chk-all input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex: none; }
.cart-sel-box { display: flex; align-items: center; align-self: flex-start; padding-top: 2px; }
/* 고른 줄 — 계산에 든 것이 눈으로 보이게 테두리만 강조한다(면을 칠하면 사진이 죽는다) */
.cart-cart-row.is-picked { border-color: var(--accent); }
.cart-cart-row.is-blocked .cart-sel-box { opacity: .4; }

.cart-cart { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s5); }
.cart-cart-row {
    display: flex; gap: var(--s4); align-items: center;
    padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-xl);
}
/* 주문서 안에서는 줄이 테두리를 두르지 않는다 — 바깥 카드(.cart-co-sec)가 이미 상자라
   두 겹이 겹쳐 답답해진다. 줄 사이는 선 하나로 충분하다 */
.cart-co-sec .cart-cart { gap: 0; margin-bottom: 0; }
.cart-co-sec .cart-cart-row {
    border: 0; border-radius: 0; border-top: 1px solid var(--line);
    padding: var(--s4) 0;
}
.cart-co-sec .cart-cart-row:first-child { border-top: 0; padding-top: 0; }
.cart-co-sec .cart-cart-row:last-child { padding-bottom: 0; }
.cart-cart-row.is-blocked { opacity: .55; }
.cart-cart-thumb { flex: none; width: 84px; height: 84px; border-radius: var(--r-md); overflow: hidden; background: var(--row-hover); }
.cart-cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-cart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-cart-name { font-size: var(--t-md); font-weight: 600; }
/* 옵션·안내는 --t-xs(11px) 로 뒀더니 무엇을 담았는지, 왜 못 사는지가 읽히지 않았다.
   담은 옵션은 상품명 다음으로 확인하는 값이고 안내는 손을 대야 할 곳이라 더 키운다 */
.cart-cart-opt { font-size: var(--t-base); color: var(--muted); }
.cart-cart-warn { font-size: var(--t-base); color: var(--danger-deep); font-weight: 700; }
.cart-cart-price { font-size: var(--t-base); font-weight: 700; }
.cart-cart-price em, .cart-cart-line em { font-style: normal; font-weight: 600; font-size: var(--t-sm); }
.cart-cart-ctrl { flex: none; display: flex; align-items: center; gap: var(--s3); }
/* 수량 조절 — 한 덩어리로 붙여 놓는다. 가운데 칸은 테두리 없이 앉혀 상자가 겹쳐 보이지 않게 */
.cart-qty {
    display: inline-flex; align-items: center; flex: none;
    border: 1px solid var(--btn-line); border-radius: var(--r-btn); background: var(--card);
    overflow: hidden; transition: opacity .15s;
}
/* 저장이 늦어질 때만 켜진다(500ms 넘게 걸릴 때) — 요청마다 켜면 누를 때마다 번쩍인다 */
.cart-qty.is-saving { opacity: .55; }
.cart-qty-btn {
    width: 32px; height: 34px; border: 0; background: none; color: var(--fg);
    font-size: var(--t-lg); line-height: 1; cursor: pointer; font-family: inherit;
}
.cart-qty-btn:hover:not(.is-limit) { background: var(--row-hover); color: var(--accent); }
/* 한계에 닿은 버튼 — 흐리게 칠해 눈에 먼저 알리되, 누를 수는 있게 둔다.
   disabled 로 막으면 브라우저가 클릭을 안 넘겨줘서 '왜 안 되는지' 를 말할 기회가 사라진다 */
.cart-qty-btn.is-limit { color: var(--muted); opacity: .45; }
.cart-qty-btn.is-limit:hover { background: var(--row-hover); opacity: .7; }
.cart-qty-input {
    width: 46px; height: 34px; padding: 0; border: 0; border-radius: 0; background: none;
    text-align: center; font-size: var(--t-base); font-variant-numeric: tabular-nums;
}
.cart-qty-input:focus { outline: 2px solid var(--accent-soft); outline-offset: -2px; background: none; }
/* 숫자 스피너는 감춘다 — 옆에 −·+ 를 두었는데 화살표까지 있으면 누를 곳이 넷이 된다 */
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-qty-input { -moz-appearance: textfield; appearance: textfield; }

.cart-cart-qty { display: flex; gap: var(--s1); }
.cart-cart-qty input { width: 64px; padding: var(--s1); text-align: right; }
.btn-ghost {
    /* 테두리는 --btn-line — --line 은 카드·배경 위에서 1.19:1 이라 버튼으로 안 보인다 (.btn 주석 참고) */
    border: 1px solid var(--btn-line); background: none; color: var(--fg);
    border-radius: 8px; padding: var(--s1) var(--s2); cursor: pointer; font-size: var(--t-xs);
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.cart-cart-line { font-weight: 800; min-width: 90px; text-align: right; }

.cart-cart-sum {
    border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s5);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
}
/* 합계 오른쪽 — 주문 버튼과 그 위 안내를 한 덩어리로 세운다 */
.cart-sum-act { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }
.cart-sum-act .cart-order-block { margin: 0; font-size: var(--t-sm); text-align: right; }
.cart-cart-sum dl { display: flex; align-items: baseline; gap: var(--s5); margin: 0; flex-wrap: wrap; }
.cart-cart-sum dt { font-size: var(--t-sm); color: var(--muted); }
.cart-cart-sum dd { font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
/* 줄의 결론이 되는 값 하나만 키운다 — 장바구니는 상품 합계, 주문서는 결제 예정.
   "마지막 dd" 로 잡았더니 장바구니에서는 마지막이 배송비 안내 문구라 그 글이 커졌다.
   위치가 아니라 뜻으로 집어야 한다(화면이 is-total 을 달아 준다) */
.cart-cart-sum dd.is-total { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; }

@media (max-width: 640px) {
    .cart-cart-row { flex-wrap: wrap; }
    .cart-cart-ctrl { width: 100%; justify-content: flex-end; }
}

/* ---------- 카트 주문서·주문완료 ---------- */
/* 다른 폼(.write-form)과 같은 카드 위에 올린다 — 입력칸이 --bg 색이라 페이지 배경 위에서는 묻힌다 */
.cart-co-sec { background: var(--card); border-radius: var(--r-xl); padding: var(--s5); margin-bottom: var(--s4); box-shadow: var(--sh-md); }
.cart-co-sec .req::after { content: ' *'; color: var(--danger); }
.cart-co-sec input.is-invalid { border-color: var(--danger); }
.cart-co-sec h3 { font-size: var(--t-lg); font-weight: 800; margin-bottom: var(--s4); }
.cart-co-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); }
.cart-co-grid label, .cart-co-sec > label { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-base); font-weight: 600; }
.cart-co-grid input, .cart-co-addr input { flex: 1; min-width: 0; padding: var(--s2); }
.cart-co-sub { font-size: var(--t-base); font-weight: 700; margin: var(--s4) 0 var(--s3); }
.cart-co-addr { display: flex; flex-direction: column; gap: var(--s3); }
.cart-co-addr input { width: 100%; }
/* 배송 요청사항 셀렉트 — 같은 칸 줄에 있으니 입력칸과 같은 크기·여백으로 */
.cart-co-addr select { width: 100%; padding: var(--s2); }
/* 회원정보에도 저장 — 배송지 바로 아래. 켜면 눈에 띄게(주문마다 다시 판단하는 값이라) */
.cart-co-save {
    display: flex; align-items: center; gap: var(--s2); cursor: pointer;
    margin-top: var(--s3); padding: var(--s2) var(--s3); font-size: var(--t-sm);
    border: 1px solid var(--line); border-radius: var(--r-md);
}
.cart-co-save:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cart-co-zip { display: flex; gap: var(--s2); }
.cart-co-zip input { width: 140px; flex: none; }
.cart-co-pay { margin-bottom: var(--s3); }
.cart-co-note { font-size: var(--t-base); color: var(--muted); margin-top: var(--s3); }
.cart-checkout .cart-cart-sum { position: sticky; bottom: var(--s3); background: var(--card); box-shadow: var(--sh-lg); }

.cart-complete { max-width: 640px; margin: 0 auto; }
.cart-complete-head { text-align: center; margin: var(--s6) 0; }
.cart-complete-head h2 { font-size: var(--t-2xl); margin-bottom: var(--s2); }
.cart-complete-bank { border-color: var(--accent); }
.cart-complete-amount strong { font-size: var(--t-xl); color: var(--accent-deep); }
.cart-complete-line { display: flex; justify-content: space-between; padding: var(--s2) 0; font-size: var(--t-base); }
/* 배송비·쿠폰·환불 줄 — 크기는 상품 줄과 같은데 흐린 색이라 혼자 작아 보였다.
   구분은 점선 하나로 충분하다(같은 표의 같은 성격인 돈 줄이다) */
.cart-complete-line.is-sub { border-top: 1px dashed var(--line); margin-top: var(--s2); padding-top: var(--s3); }
.cart-complete-line.is-total { font-weight: 800; font-size: var(--t-md); }

/* 주문 상품 줄 — 장바구니와 같은 말투(썸네일 · 이름 · 옵션 · 금액). 한 줄 텍스트로 뒀더니
   "무엇을 샀나" 가 사진 없이 이름만으로 훑기 어려웠고, 다시 사려면 이름을 복사해 검색해야 했다.
   금액 줄(.cart-complete-line)보다 한 치수 크게 둔다 — 이 칸의 주인공은 상품이다. */
.cart-oi { display: flex; flex-direction: column; gap: var(--s3); }
.cart-oi-row { display: flex; align-items: center; gap: var(--s3); }
.cart-oi-thumb {
    flex: none; display: block; width: 64px; height: 64px;
    border-radius: var(--r-md); overflow: hidden; background: var(--row-hover);
}
.cart-oi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-oi-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-oi-name { font-size: var(--t-md); font-weight: 600; }
.cart-oi-opt { font-size: var(--t-base); color: var(--muted); }
.cart-oi-price { flex: none; font-size: var(--t-md); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 카트 주문 내역·비회원 조회 ---------- */
/* 주문 내역은 게시판과 같은 표(.list-table)로 그린다 — 카드 줄(.cart-order-row)은 걷어냈다.
   좁은 화면의 카드는 표 변형이 쓰는 .list-cards 를 그대로 쓴다. 금액만 여기서 굵게 세운다. */
.cart-order-total { flex: none; font-weight: 800; }
/* 주문 상태 — 뱃지. 색이 말하는 것은 "무엇인가" 가 아니라 "봐야 하는가" 다(.chip 규칙과 같은 원칙).
   여덟 상태에 색 여덟을 주면 색이 아무 말도 못 하므로 네 갈래로 접는다:
   입금대기만 앰버로 튀고(손님이 할 일), 진행 중은 파랑, 받은 것은 초록, 반품은 빨강, 취소는 중성.
   갈래를 정하는 곳은 cart_order_status_tone() 한 곳뿐이다 — 화면마다 다른 색이 되지 않게. */
.cart-status {
    display: inline-block; padding: 2px var(--s2); border-radius: var(--r-full);
    font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
    background: var(--chip-bg); color: var(--chip-fg);
}
.cart-status.is-wait { background: var(--notice-bg); color: var(--notice-fg); }
.cart-status.is-go   { background: var(--accent-soft); color: var(--accent-deep); }
/* 배송중만 채워서 띄운다 — 옅은 파랑끼리는 결제완료·배송준비와 구별이 안 되는데,
   지금 오는 중인지는 손님이 목록에서 가장 자주 찾는 것이다(면끼리 5.35:1 로 갈린다) */
.cart-status.is-ship { background: var(--accent-fill); color: var(--accent-fill-fg); }
.cart-status.is-done { background: var(--ok-bg); color: var(--ok-fg); }
.cart-status.is-bad  { background: var(--danger-soft); color: var(--danger-deep); }
.cart-status.is-end  { background: var(--chip-bg); color: var(--chip-fg); }
.cart-guest-form { display: flex; flex-direction: column; gap: var(--s3); max-width: 420px; margin: 0 auto; }
.cart-guest-form label { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-base); font-weight: 600; }
.cart-guest-form input { flex: 1; min-width: 0; padding: var(--s2); }
.cart-home-links { display: flex; gap: var(--s4); justify-content: center; margin-bottom: var(--s4); font-size: var(--t-sm); font-weight: 700; }
.cart-home-links a { color: var(--muted); }
.cart-home-links a:hover { color: var(--accent-deep); }
.cart-home-links b { color: var(--accent-deep); }

/* ═══════════ 대화상자 (확인·경고) ═══════════
   브라우저 confirm() 은 운영체제가 그리는 창이라 CSS 가 한 줄도 안 먹는다 —
   공들여 만든 화면 위에 회색 시스템 창이 뜨면 거기서 디자인이 끊긴다.
   shadcn 의 AlertDialog 자리를 대신하는 최소 구현: 덮개 + 카드 + 버튼 두 개.
   동작은 theme.js 의 g5Confirm() 이 맡는다 */
.g5-dlg {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center; padding: var(--s4);
    background: rgba(2, 6, 23, .55);
}
.g5-dlg-panel {
    width: 100%; max-width: 420px; background: var(--card); color: var(--fg);
    border: 1px solid var(--line); border-radius: var(--r-xl);
    box-shadow: var(--sh-lg); padding: var(--s5);
    display: flex; flex-direction: column; gap: var(--s3);
}
.g5-dlg-title { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; margin: 0; }
/* 줄바꿈이 든 문장을 그대로 살린다 — confirm() 에 쓰던 \n 이 그대로 넘어온다 */
.g5-dlg-body { margin: 0; color: var(--muted); font-size: var(--t-base); line-height: 1.65; white-space: pre-line; }
.g5-dlg-foot { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); }
.g5-dlg-foot .btn { min-width: 84px; }
/* 되돌릴 수 없는 처리 — 확인 버튼을 빨강으로. 누르기 전에 무게가 다르다는 것이 보여야 한다 */
.g5-dlg-foot .btn-danger {
    background: var(--danger); border-color: var(--danger); color: #fff;
}
.g5-dlg-foot .btn-danger:hover { background: var(--danger-deep); border-color: var(--danger-deep); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
    .g5-dlg { animation: g5-dlg-in .12s ease-out; }
    .g5-dlg-panel { animation: g5-dlg-pop .14s cubic-bezier(.2, .8, .3, 1); }
    @keyframes g5-dlg-in { from { opacity: 0; } }
    @keyframes g5-dlg-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } }
}

/* ═══════════ 토스트 (스스로 사라지는 알림) ═══════════
   alert() 은 확인을 눌러야 없어진다 — "재고가 3개뿐입니다" 처럼 알기만 하면 되는 말에
   손을 쓰게 하면 흐름이 끊긴다. 스스로 사라지고, 급하면 눌러서 먼저 없앨 수 있다.
   화면 아래 가운데 — 손이 닿는 자리(모바일 하단 버튼)를 가리지 않게 살짝 띄운다 */
.g5-toasts {
    position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%);
    z-index: 1300; display: flex; flex-direction: column-reverse; align-items: center;
    gap: var(--s2); pointer-events: none; width: max-content; max-width: calc(100vw - var(--s5) * 2);
}
.g5-toast {
    pointer-events: auto; cursor: pointer;
    background: var(--fg); color: var(--bg);
    padding: 10px var(--s4); border-radius: var(--r-btn);
    font-size: var(--t-base); font-weight: 550; line-height: 1.4;
    box-shadow: 0 8px 24px rgba(2, 6, 23, .28);
    display: flex; align-items: center; gap: var(--s2); text-align: left;
    /* 한국어는 어절 안에서 끊으면 안 읽힌다 — "없습니 / 다" 처럼 갈라지던 것을 막는다 */
    word-break: keep-all;
}
.g5-toast svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
    .g5-toast { animation: g5-toast-in .16s cubic-bezier(.2, .8, .3, 1); }
    .g5-toast.is-out { animation: g5-toast-out .16s ease-in forwards; }
    @keyframes g5-toast-in { from { opacity: 0; transform: translateY(8px); } }
    @keyframes g5-toast-out { to { opacity: 0; transform: translateY(6px); } }
}

/* 누른 것 바로 위에 뜨는 쪽지 — 화면 아래 가운데는 눈이 안 가는 자리일 때가 있다.
   무엇 때문에 나온 말인지 분명할 때는 그 곁에 붙여야 읽힌다 */
.g5-toast.is-anchored {
    position: fixed; z-index: 1300; max-width: min(340px, calc(100vw - 24px));
    animation: g5-toast-pin .14s cubic-bezier(.2, .8, .3, 1);
}
/* 꼬리 — 쪽지가 화면 안으로 밀렸어도 누른 것을 가리키게 JS 가 --tail 로 자리를 준다 */
.g5-toast.is-anchored::after {
    content: ""; position: absolute; left: var(--tail, 50%); bottom: -5px;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px; background: inherit;
}
/* 위가 좁아 아래로 뒤집힌 쪽지는 꼬리도 위를 향한다 */
.g5-toast.is-anchored.is-below::after { bottom: auto; top: -5px; }
@media (prefers-reduced-motion: reduce) { .g5-toast.is-anchored { animation: none; } }
@keyframes g5-toast-pin { from { opacity: 0; transform: translateY(4px); } }

/* ---------- 쿠폰함 (cart/coupon.php) · 주문서 쿠폰 고르기 ----------
   .cou-* 는 순정 영카트 쿠폰 팝업이 쓰는 이름이라 겹치지 않게 .cpn-* 로 짓는다
   (한 파일이 커뮤니티·쇼핑몰을 다 그리므로 화면 안에서만 유일한 이름은 없다) */
.cpn-redeem { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
    margin-bottom: var(--s5); padding: var(--s4); border-radius: var(--r-lg);
    background: var(--card); box-shadow: var(--sh-md); }
.cpn-redeem label { font-weight: 700; font-size: var(--t-sm); }
.cpn-redeem input { flex: 1 1 12em; min-width: 0; text-transform: uppercase; }

.cpn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
/* 쿠폰 한 장 — 금액이 먼저 읽혀야 한다. 왼쪽 칸을 고정폭으로 두어 여러 장이 세로로 정렬된다 */
.cpn-card { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
    padding: var(--s4); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-md); }
.cpn-card.is-dead { opacity: .55; }
.cpn-amount { flex: none; min-width: 8.5em; font-size: var(--t-lg); font-weight: 800;
    color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.cpn-card.is-dead .cpn-amount { color: var(--muted); }
.cpn-body { flex: 1 1 12em; display: grid; gap: 2px; min-width: 0; }
.cpn-name { font-weight: 700; }
.cpn-cond { font-size: var(--t-xs); color: var(--muted); }
.cpn-side { flex: none; display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.cpn-date { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* 주문서의 쿠폰 줄 — 고르는 칸과 "얼마 깎였는지" 가 붙어 있어야 고른 결과가 바로 읽힌다 */
.cpn-pick { display: grid; gap: var(--s2); }
.cpn-pick select { width: 100%; }
.cpn-pick-none { font-size: var(--t-sm); color: var(--muted); }
.cpn-pick-none a { color: var(--accent-deep); }

/* ---------- 주문 내역 표 (cart/order.php) ----------
   게시판 목록과 같은 .list-table 을 쓰되 열 폭만 이 화면 값으로 잡는다.
   결제금액은 맨 오른쪽에 오른쪽 정렬 — 자릿수가 세로로 맞아야 여러 줄을 훑어 비교할 수 있다. */
.list-table .col-date { width: 92px; }
.list-table .col-ordno { width: 150px; }
.list-table .col-state { width: 96px; }
.list-table .col-amt { width: 120px; font-weight: 800; color: var(--fg); font-size: var(--t-md); }
.list-table td.col-ordno a { color: var(--muted); }
.list-table td.col-ordno a:hover, .list-table td.col-subject a:hover { color: var(--accent); }
.list-table td.col-subject a { color: inherit; }
/* 표를 접고 카드로 바꾸는 폭에서는 금액이 제목 줄 오른쪽 끝에 선다 */
.list-cards .s .cart-order-total { margin-left: auto; flex: none; font-weight: 800; }

/* 주문 내역 검색줄 — 셀렉트 둘이 들어가 게시판 검색(.bbs-search)보다 넓어야 한다.
   좁은 화면에서는 줄을 바꿔 셀렉트가 찌그러지지 않게 둔다 */
.ord-search { max-width: 640px; margin-bottom: var(--s3); flex-wrap: wrap; }
.ord-search select { flex: none; }
.ord-search input[type=text] { flex: 1 1 10em; }
.ord-search-on { display: flex; align-items: center; gap: var(--s2);
    margin: 0 0 var(--s4); font-size: var(--t-sm); color: var(--muted); }
.ord-search-on a { color: var(--accent-deep); }
/* 좁은 화면 — 셀렉트 둘이 첫 줄, 검색어와 버튼이 둘째 줄. 그냥 두면 버튼만 혼자 줄을 차지해
   왼쪽에 덩그러니 남는다.
   max-width 를 함께 풀어야 한다 — 같은 폭에서 .bbs-search select 가 max-width:40% 를 걸어 두어
   flex-basis 44% 가 40% 로 잘렸다(폭을 지정해 놓고 왜 안 늘어나는지 모르게 되는 자리다). */
@media (max-width: 620px) {
    .ord-search select { flex: 1 1 44%; max-width: none; }
    .ord-search input[type=text] { flex: 1 1 55%; }
    .ord-search button { flex: none; margin-left: auto; }
}