/* ═══════════════════════════════════════════════════════════
   g5pro template/one — 소다 블루 · L1 클래식 카드 기준
   메인은 그라디언트 히어로 + 카드 그리드(L1),
   게시판은 포털 매거진(L2)·소셜 피드(L3) 요소를 섞는다.
   설계: docs/superpowers/specs/2026-07-29-g5pro-ui-design.md
   ═══════════════════════════════════════════════════════════ */

:root {
    /* 바탕 — 흰색이 아니라 옅은 블루. 카드가 떠 보이게 하는 핵심 */
    --bg: #F0F7FF;
    --card: #FFFFFF;
    --fg: #23303F;
    --muted: #64748B;
    --line: #E2ECF8;
    --btn-line: #7C8EA6;   /* 버튼 테두리 — 카드 위에서 3:1 이상 보이게 (--line 은 1.19:1 이라 안 보인다) */
    --row-hover: #F5FAFF;

    /* 소다 블루 */
    --accent: #2E7CF6;
    --accent-fg: #FFFFFF;
    --accent-deep: #1D5FD1;
    --accent-soft: #D8E9FF;

    /* 보조색 — 카테고리 칩 구분용 */
    --teal: #14B8A6;
    --teal-soft: #CCF5EE;
    --teal-deep: #0B8577;
    /* 헤더 영역 전환의 쇼핑몰 칸 — 켜졌을 때 알약 색(on), 꺼졌을 때 선 아이콘 색(off).
       커뮤니티(--accent 파랑)와 갈라 보이는 것이 목적이라 색상환 반대쪽 주황으로 간다.
       청록(--teal 계열)은 파랑과 색상차가 43° 뿐이라 나란히 두면 구분이 안 됐다. 주황은 161°.
       흰 아이콘이 얹히므로 그래픽 최소 대비 3:1 을 넘는 진한 쪽을 골랐다 */
    --shop-on: #C2410C;          /* 흰 아이콘과 5.18:1 */
    --shop-off: #C2410C;         /* 트랙 배경과 4.80:1 */
    --indigo: #4F46E5;
    --indigo-soft: #E0E7FF;
    --danger: #EF4444;

    --grad: linear-gradient(115deg, #38BDF8, #3B82F6 55%, #14B8A6);

    /* 그림자 — 푸른 기운을 띤 부드러운 그림자 */
    --sh-sm: 0 4px 12px rgba(50,100,180,.08);
    --sh-md: 0 8px 22px rgba(50,100,180,.10);
    --sh-lg: 0 12px 32px rgba(20,20,40,.10);
    --sh-btn: 0 6px 16px rgba(46,124,246,.35);

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

    /* 글자 */
    --t-xs: 11px; --t-sm: 12.5px; --t-base: 13.5px; --t-md: 14.5px;
    --t-lg: 16px; --t-xl: 20px; --t-2xl: 25px;

    /* 모서리 — 넉넉하게 */
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-full: 999px;
    --r-btn: 8px;   /* 버튼·페이징·필터 — 알약이 아니라 살짝 둥근 사각 */
    --r-input: 8px; /* 입력칸·텍스트에리어 — 나란히 놓이는 버튼(--r-btn)과 모서리를 맞춘다.
                       카드(--r-xl)처럼 둥글면 입력칸이 아니라 알약처럼 읽힌다 */
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0F1621;
        --card: #16202E;
        --fg: #E6EDF5;
        --muted: #8B9BB0;
        --line: #23303F;
        --btn-line: #57718E;
        --row-hover: #1B2837;

        --accent: #4A90FF;
        --accent-fg: #FFFFFF;
        --accent-deep: #8FBCFF;
        --accent-soft: #1A2C4A;

        --teal: #2DD4BF;
        --teal-soft: #0E3B36;
        --teal-deep: #5EEAD4;
        --shop-on: #EA6A0C;          /* 흰 아이콘과 3.20:1 */
        --shop-off: #F97316;         /* 트랙 배경과 6.48:1 */
        --indigo: #A5A0FF;
        --indigo-soft: #262850;
        --danger: #F87171;

        --sh-sm: 0 4px 12px rgba(0,0,0,.30);
        --sh-md: 0 8px 22px rgba(0,0,0,.36);
        --sh-lg: 0 12px 32px rgba(0,0,0,.44);
        --sh-btn: 0 6px 16px rgba(74,144,255,.30);
    }
}
:root[data-theme="dark"] {
    --bg: #0F1621;
    --card: #16202E;
    --fg: #E6EDF5;
    --muted: #8B9BB0;
    --line: #23303F;
    --btn-line: #57718E;
    --row-hover: #1B2837;

    --accent: #4A90FF;
    --accent-fg: #FFFFFF;
    --accent-deep: #8FBCFF;
    --accent-soft: #1A2C4A;

    --teal: #2DD4BF;
    --teal-soft: #0E3B36;
    --teal-deep: #5EEAD4;
    --shop-on: #EA6A0C;          /* 흰 아이콘과 3.20:1 */
    --shop-off: #F97316;         /* 트랙 배경과 6.48:1 */
    --indigo: #A5A0FF;
    --indigo-soft: #262850;
    --danger: #F87171;

    --sh-sm: 0 4px 12px rgba(0,0,0,.30);
    --sh-md: 0 8px 22px rgba(0,0,0,.36);
    --sh-lg: 0 12px 32px rgba(0,0,0,.44);
    --sh-btn: 0 6px 16px rgba(74,144,255,.30);
}
:root[data-theme="light"] {
    --bg: #F0F7FF;
    --card: #FFFFFF;
    --fg: #23303F;
    --muted: #64748B;
    --line: #E2ECF8;
    --btn-line: #7C8EA6;   /* 버튼 테두리 — 카드 위에서 3:1 이상 보이게 (--line 은 1.19:1 이라 안 보인다) */
    --row-hover: #F5FAFF;

    --accent: #2E7CF6;
    --accent-fg: #FFFFFF;
    --accent-deep: #1D5FD1;
    --accent-soft: #D8E9FF;

    --teal: #14B8A6;
    --teal-soft: #CCF5EE;
    --teal-deep: #0B8577;
    --shop-on: #C2410C;          /* 흰 아이콘과 5.18:1 */
    --shop-off: #C2410C;         /* 트랙 배경과 4.80:1 */
    --indigo: #4F46E5;
    --indigo-soft: #E0E7FF;
    --danger: #EF4444;

    --sh-sm: 0 4px 12px rgba(50,100,180,.08);
    --sh-md: 0 8px 22px rgba(50,100,180,.10);
    --sh-lg: 0 12px 32px rgba(20,20,40,.10);
    --sh-btn: 0 6px 16px rgba(46,124,246,.35);
}

/* ── 기본 ── */
* { box-sizing: border-box; }
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.55;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.35; letter-spacing: -.01em; }
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 {
    display: inline-block; font-size: var(--t-xs); font-weight: 800;
    border-radius: var(--r-full); padding: 2px var(--s2); white-space: nowrap;
    background: var(--accent-soft); color: var(--accent-deep);
}
.chip.c2 { background: var(--teal-soft); color: var(--teal-deep); }
.chip.c3 { background: var(--indigo-soft); color: var(--indigo); }
.chip.c4 { background: var(--line); color: var(--muted); }
.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-sm); font-weight: 700;
    padding: var(--s2) var(--s4); 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-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); }

input[type=text], input[type=password], input[type=email], input[type=file], select, textarea {
    background: var(--bg); color: var(--fg);
    border: 1px solid var(--line); border-radius: var(--r-input);
    padding: var(--s2) var(--s3);
    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: none; }
textarea { line-height: 1.6; border-radius: var(--r-input); }

/* ── 헤더 (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.
   글자 없이 큰 아이콘만 (말풍선 ↔ 카트라 모양으로 구분된다). 메뉴 밖이라 햄버거로 접히지 않는다 */
.area-switch {
    display: inline-flex; flex: none; gap: 2px;
    padding: 3px; border-radius: var(--r-btn); background: var(--bg);
}
.area-link {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border-radius: calc(var(--r-btn) - 2px);
    color: var(--muted);
}
.area-link:hover { color: var(--accent); }
.area-link.on { background: var(--accent); color: var(--accent-fg); box-shadow: var(--sh-sm); }
.area-link.on:hover { color: var(--accent-fg); }
/* 쇼핑몰 쪽은 다른 색으로 — 두 칸이 같은 파랑이면 어느 쪽이 켜졌는지 색으로 못 읽는다.
   꺼졌을 때도 회색이 아니라 제 색을 옅게 지녀, 가기 전에 어느 칸이 쇼핑몰인지 알 수 있다 */
.area-link.area-bag { color: var(--shop-off); }
.area-link.area-bag.on { background: var(--shop-on); color: var(--accent-fg); }
.area-link.area-bag:hover { color: var(--shop-on); }
.area-link.area-bag.on:hover { color: var(--accent-fg); }
.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(--card); 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(--card); 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); }
.site-footer .wrap { padding: var(--s5); text-align: center; }
.site-footer p { margin: 0; }

/* ═══════════ 메인 히어로 (L1) ═══════════ */
.hero {
    margin-bottom: var(--s5); padding: var(--s6) var(--s5);
    border-radius: var(--r-2xl); background: var(--grad); color: #fff;
    position: relative; overflow: hidden;
}
.hero::after {
    content: ""; position: absolute; right: -40px; top: -50px;
    width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.18);
}
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(4,26,48,.42), rgba(4,26,48,.18) 55%, rgba(4,26,48,0));
}
.hero h2 { font-size: var(--t-2xl); letter-spacing: -.02em; margin-bottom: var(--s2); position: relative; z-index: 2; }
.hero p { margin: 0; font-size: var(--t-md); position: relative; z-index: 2; }

/* 카드 그리드 (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(--s4) 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);
}
.card li {
    display: flex; align-items: center; gap: var(--s2);
    padding: 6.5px 0; font-size: var(--t-base);
}
.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 { display: flex; gap: var(--s1); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.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);
}
.bbs-actions { display: flex; 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; }
/* 장바구니 목록 아래 버튼 줄 — 목록 왼쪽 끝(체크박스 열)에 맞춘다 */
.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(--card); 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; }
.list-table-wrap { overflow-x: auto; }
.list-table { width: 100%; border-collapse: collapse; }
.list-table th {
    font-size: var(--t-sm); font-weight: 700; color: var(--muted); letter-spacing: .03em;
    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: var(--s3) var(--s4); text-align: center; white-space: nowrap;
    font-size: var(--t-md); 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;
    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(--grad); color: #fff; font-size: var(--t-sm); font-weight: 800;
}
.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(--grad); }
.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); }

/* 댓글 — 소셜 피드 느낌 */
.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; }
.field-inline { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--t-sm); }

.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); }
/* 폼 맨 위의 설명 한 문단 (회원정보 찾기 등) */
.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); }

.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); }

/* ═══════════ 쪽지·포인트 ═══════════ */
.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 {
    padding: var(--s5); border-radius: var(--r-2xl); background: var(--grad); color: #fff;
    margin-bottom: var(--s5); position: relative; overflow: hidden;
}
.search-summary::after {
    content: ""; position: absolute; right: -30px; bottom: -60px;
    width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.16);
}
/* 밝은 그라디언트 위 흰 글씨는 대비가 2:1 수준이라 읽기 어렵다 → 어두운 막을 깐다 */
.search-summary::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(4,26,48,.42), rgba(4,26,48,.18) 55%, rgba(4,26,48,0));
}
.search-summary h2 { font-size: var(--t-xl); font-weight: 700; margin-bottom: var(--s1); position: relative; z-index: 2; }
.search-summary p { margin: 0; font-size: var(--t-md); position: relative; z-index: 2; }
/* 그라디언트 배너 안에서는 흰 글씨를 강제한다 — 뷰에서 .muted 등이 섞여도 흐려지지 않게 */
.hero, .hero *, .search-summary, .search-summary * { color: #fff; }
.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 .sv {
    display: none; position: absolute; top: 100%; left: 0; z-index: 100;
    min-width: 130px; margin-top: var(--s1);
    background: var(--card); border-radius: var(--r-md); padding: var(--s2); box-shadow: var(--sh-md);
}
.sv_wrap .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_wrap .sv a:hover { background: var(--bg); color: var(--fg); }
.sv_wrap .sv_on { display: block; }
.sv_wrap .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 { 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);
}
.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(--teal-soft); color: var(--teal-deep); }
a.chip.cate:hover { background: var(--teal); color: #fff; }

/* 답변글 */
.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 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 와의 계약이라 건드리지 않는다.
   fieldset 을 flex 로 두면 legend 도 보통 항목처럼 배치된다. */
#captcha {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3);
    margin: 0; padding: var(--s3) 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(--s1);
    font-size: var(--t-sm); font-weight: 700; color: var(--muted);
}
/* 순정 이미지는 160×60. 로드 전에는 dot.gif 라 자리를 미리 잡아 둔다 */
#captcha_img {
    display: block; flex: none; width: 160px; height: 60px; object-fit: cover;
    border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
}
#captcha_key {
    flex: none; width: 132px; height: 60px;
    text-align: center; letter-spacing: .28em; text-indent: .28em;
    font-size: var(--t-xl); font-weight: 700; font-variant-numeric: tabular-nums;
}
#captcha button {
    display: inline-flex; align-items: center; gap: var(--s1); flex: none;
    height: 34px; padding: 0 var(--s3);
    border: 1px solid var(--line); border-radius: var(--r-btn);
    background: var(--bg); color: var(--muted);
    font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s;
}
#captcha button:hover { border-color: var(--accent); color: var(--accent); }
#captcha button span { display: none; }     /* 순정 스프라이트 자리 — 우리는 글자만 쓴다 */
#captcha_info { flex: 1 0 100%; font-size: var(--t-xs); color: var(--muted); }
#captcha_audio { flex: 1 0 100%; height: 32px; }

@media (max-width: 620px) {
    #captcha_key { width: 100%; margin-right: 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); }
.cart-count {
    position: absolute; top: 1px; right: 0;
    min-width: 16px; height: 16px; padding: 0 4px;
    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: 10px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
}