@charset "utf-8";
/* sp-lite — 쇼핑몰 추가 스타일 (default.css 위에 덧입혀짐 · 스킨 재작성 때 페이지별로 채워 나감) */

/* ==========================================================================
   공용 버튼 (쇼핑몰)
   ========================================================================== */
.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--sp-radius);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.sp-btn-primary {
    background: var(--sp-primary);
    color: #fff;
}

.sp-btn-primary:hover,
.sp-btn-primary:focus {
    background: var(--sp-primary-dark);
    color: #fff;
}

.sp-btn-ghost {
    background: #fff;
    border-color: var(--sp-line);
    color: var(--sp-ink);
}

.sp-btn-ghost:hover,
.sp-btn-ghost:focus {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}

/* ==========================================================================
   공용 체크박스 (쇼핑몰)
   ========================================================================== */
.sp-chk {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.sp-chk .selec_chk {
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    opacity: 0;
    cursor: pointer;
}

.sp-chk label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.sp-chk label span {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1.5px solid #c3ccdd;
    border-radius: 6px;
    background: #fff;
    transition: background-color .15s, border-color .15s;
}

.sp-chk label span::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2.5px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity .15s;
}

.sp-chk .selec_chk:checked + label span {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
}

.sp-chk .selec_chk:checked + label span::after { opacity: 1; }

.sp-chk .selec_chk:focus-visible + label span {
    outline: 2px solid var(--sp-primary);
    outline-offset: 2px;
}

.sp-chk .selec_chk:disabled,
.sp-chk .selec_chk:disabled + label {
    cursor: not-allowed;
}

.sp-chk .selec_chk:disabled + label span {
    background: var(--sp-bg-soft);
    border-color: var(--sp-line);
}

/* ==========================================================================
   장바구니 (theme/sp-lite/shop/cart.php)
   ========================================================================== */
#sod_bsk { margin: 0 0 48px; }

.sp-cart-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

/* --- 목록 툴바 --- */
.sp-cart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-bg-soft);
    margin: 0 0 12px;
}

.sp-cart-toolbar #sp_sel_cnt {
    font-style: normal;
    font-weight: 600;
    color: var(--sp-primary);
}

.sp-cart-toolbar-btns {
    display: flex;
    gap: 8px;
}

.sp-cart-toolbar-btns button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.sp-cart-toolbar-btns button:hover {
    border-color: #e11d48;
    color: #e11d48;
}

/* --- 상품 카드 --- */
.sp-cart-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-bg);
    margin: 0 0 12px;
    transition: border-color .15s, box-shadow .15s;
}

/* display:flex 가 hidden 속성(UA display:none)을 덮어써 견적관리 유형 필터(D17)가
   무력화되는 것을 방지 — hidden 이 항상 이기게 한다(반응형 변형 포함). */
.sp-cart-item[hidden] {
    display: none !important;
}

.sp-cart-item:hover {
    border-color: #b9c8e6;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}

.sp-cart-item-chk { margin-top: 38px; }

.sp-cart-thumb {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    overflow: hidden;
    background: var(--sp-bg-soft);
}

.sp-cart-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-cart-info {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-cart-info .prd_name {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sp-ink);
    word-break: keep-all;
}

.sp-cart-info .prd_name:hover { color: var(--sp-primary); }

/* 옵션(견적 사양 포함) 목록 */
.sp-cart-info .sod_opt { margin: 8px 0 0; }

.sp-cart-info .sod_opt ul {
    margin: 0;
    padding: 10px 14px;
    list-style: none;
    border-radius: 6px;
    background: var(--sp-primary-soft);
}

.sp-cart-info .sod_opt li {
    font-size: 13px;
    line-height: 1.6;
    color: var(--sp-ink);
    word-break: break-all;
}

.sp-cart-info .sod_opt li + li {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(11, 95, 215, .2);
}

.sp-cart-info .sod_option_btn { margin: 8px 0 0; }

/* 견적 행 — 선택사항수정 대신 견적관리 안내 링크 (같은 자리·같은 톤) */
.sp-cart-info .sp-cart-quote-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    color: var(--sp-muted);
    text-decoration: none;
}

.sp-cart-info .sp-cart-quote-link:hover { color: var(--sp-primary); }

.sp-cart-info .mod_options {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    color: var(--sp-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.sp-cart-info .mod_options:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}

.sp-cart-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--sp-muted);
}

.sp-cart-meta span + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    margin: 0 10px;
    background: var(--sp-line);
    vertical-align: -1px;
}

/* 카드 우측 — 수량·소계 */
.sp-cart-calc {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-left: auto;
    padding-left: 16px;
    text-align: right;
}

.sp-cart-qty {
    font-size: 13px;
    color: var(--sp-muted);
}

.sp-cart-qty strong {
    color: var(--sp-ink);
    font-weight: 600;
}

.sp-cart-sum {
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-ink);
    letter-spacing: -.01em;
}

/* --- 주문 요약 --- */
.sp-cart-side {
    position: sticky;
    top: calc(var(--sp-header-h) + 24px);
}

.sp-cart-summary {
    padding: 24px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-bg);
}

.sp-cart-summary h2 {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
}

.sp-cart-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 12px;
    font-size: 14px;
}

.sp-cart-summary-row dt { color: var(--sp-muted); }
.sp-cart-summary-row dd { margin: 0; font-weight: 600; }

.sp-cart-summary-total {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--sp-line);
    font-size: 15px;
}

.sp-cart-summary-total dt { color: var(--sp-ink); font-weight: 600; }

.sp-cart-summary-total dd strong {
    font-size: 24px;
    font-weight: 800;
    color: var(--sp-primary);
    letter-spacing: -.02em;
}

.sp-cart-summary-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--sp-muted);
}

.sp-cart-act {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 0;
}

.sp-cart-act .sp-btn { width: 100%; }
.sp-cart-act .btn_submit { font-size: 16px; min-height: 52px; }
.sp-cart-act .cart-naverpay { text-align: center; }

.sp-quotes-mobile-order { display: none; }

#sod_list .sp-bom-order-qty {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

#sod_list .sp-bom-order-qty strong {
    color: var(--sp-primary);
    font-size: 14px;
}

#sod_list .sp-bom-order-qty small {
    color: var(--sp-muted);
    font-size: 10px;
    font-weight: 500;
}

/* --- 빈 장바구니 --- */
.sp-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 72px 20px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-bg);
    text-align: center;
}

.sp-cart-empty .fa {
    font-size: 44px;
    color: #c3ccdd;
    margin-bottom: 8px;
}

.sp-cart-empty p {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--sp-ink);
}

.sp-cart-empty-sub {
    font-size: 14px;
    color: var(--sp-muted);
}

/* 빈 화면 안내문 인라인 링크 — 1차 목적지(견적관리·장바구니)는 강조색 */
.sp-cart-empty-sub a { text-decoration: underline; text-underline-offset: 2px; }
.sp-cart-empty-sub a:not(.sp-link-archive) { color: var(--sp-primary); }

/* 지난 견적 보관함 = 삭제·과거 견적 보관용 보조 목적지 — 톤을 낮춰 1차 링크와 다른 느낌 */
.sp-link-archive { color: var(--sp-muted); text-decoration: underline; text-underline-offset: 2px; }
.sp-link-archive:hover { color: var(--sp-ink); }

.sp-cart-empty .sp-btn {
    margin-top: 16px;
    min-width: 180px;
}

/* --- 선택사항수정 모달 (shop/cartoption.php 출력물) --- */
.mod_option_bg {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .5);
}

#mod_option_frm {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: min(520px, calc(100vw - 32px));
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: var(--sp-shadow);
}

#mod_option_frm h2 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
}

#mod_option_frm .option_wr { margin: 0 0 16px; }

#mod_option_frm .option_wr h3,
#mod_option_frm #sit_sel_option h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-muted);
}

#mod_option_frm select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
}

#mod_option_frm select + select { margin-top: 8px; }

#mod_option_frm #sit_opt_added {
    margin: 0;
    padding: 0;
    list-style: none;
}

#mod_option_frm #sit_opt_added li {
    padding: 12px 14px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: var(--sp-bg-soft);
    margin: 0 0 8px;
}

#mod_option_frm .opt_name {
    font-size: 13px;
    line-height: 1.5;
    color: var(--sp-ink);
    word-break: break-all;
    margin: 0 0 8px;
}

#mod_option_frm .opt_count {
    display: flex;
    align-items: center;
    gap: 4px;
}

#mod_option_frm .opt_count .btn_frmline {
    width: 30px;
    height: 30px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: #fff;
    color: var(--sp-muted);
    cursor: pointer;
    font-size: 11px;
}

#mod_option_frm .opt_count .btn_frmline:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}

#mod_option_frm .opt_count .num_input {
    width: 56px;
    height: 30px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
}

#mod_option_frm .sit_opt_prc {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-primary);
}

#mod_option_frm .sit_opt_del {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--sp-muted);
    cursor: pointer;
}

#mod_option_frm .sit_opt_del:hover { color: #e11d48; }

#mod_option_frm #sit_tot_price {
    margin: 12px 0 0;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
    color: var(--sp-ink);
}

#mod_option_frm .btn_confirm { margin: 16px 0 0; }

#mod_option_frm .btn_confirm .btn_submit {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: var(--sp-radius);
    background: var(--sp-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

#mod_option_frm .btn_confirm .btn_submit:hover { background: var(--sp-primary-dark); }

#mod_option_frm .btn_confirm .btn_close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    background: none;
    color: var(--sp-muted);
    font-size: 18px;
    cursor: pointer;
}

#mod_option_frm .btn_confirm .btn_close:hover { color: var(--sp-ink); }

/* --- 반응형 --- */
@media (max-width: 960px) {
    .sp-cart-body { grid-template-columns: minmax(0, 1fr); }

    .sp-cart-side { position: static; }

    .sp-quotes-mobile-order {
        position: sticky;
        top: calc(var(--sp-header-h) + 8px);
        z-index: 8;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 12px 0;
        padding: 10px 12px;
        border: 1px solid color-mix(in srgb, var(--sp-primary) 24%, var(--sp-line));
        border-radius: var(--sp-radius);
        background: color-mix(in srgb, var(--sp-bg) 96%, transparent);
        box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
        backdrop-filter: blur(10px);
    }

    .sp-quotes-mobile-order p {
        min-width: 0;
        margin: 0;
        color: var(--sp-ink);
        font-size: 13px;
        line-height: 1.35;
    }

    .sp-quotes-mobile-order strong { color: var(--sp-primary); }

    .sp-quotes-mobile-order small {
        display: block;
        margin-top: 2px;
        color: var(--sp-muted);
        font-size: 10px;
    }

    .sp-quotes-mobile-order .sp-btn {
        width: auto;
        min-width: 108px;
        min-height: 44px;
        flex: 0 0 auto;
        padding-inline: 14px;
    }
}

@media (max-width: 640px) {
    .sp-cart-item {
        flex-wrap: wrap;
        padding: 16px;
    }

    .sp-cart-item-chk { margin-top: 30px; }

    .sp-cart-thumb {
        width: 72px;
        height: 72px;
    }

    .sp-cart-info {
        flex: 1 1 calc(100% - 130px);
    }

    .sp-cart-calc {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        margin: 4px 0 0;
        padding: 12px 0 0;
        padding-left: 0;
        border-top: 1px dashed var(--sp-line);
    }

    .sp-cart-toolbar { padding: 12px 16px; }

    .sp-quotes-mobile-order { top: calc(var(--sp-header-h) + 4px); }
}

/* ==========================================================================
   견적관리 (spcb/pages/quotes.php)
   장바구니와 같은 시각 문법 — 카드 목록(.sp-cart-item)·주문요약(.sp-cart-summary)
   클래스를 재사용하고, 견적 전용 변형만 sp-quotes__* 로 추가한다.
   ========================================================================== */
.sp-quotes { margin: 0 0 48px; }

/* 견적 유형 탭 — PCB(거버) · 부품 BOM(스마트 BOM 트랙, SMARTBOM_PARTNER_RFQ.md §6) */
/* Figma 103:4507 — 16px · 비활성 #323232 Regular · 활성 #05f SemiBold + 3px 바 · 1px 라인 */
.sp-quotes-tabs {
    display: flex;
    gap: 24px;
    margin: 0 0 18px;
    border-bottom: 1px solid #d9d9d9;
}
.sp-quotes-tab {
    margin-bottom: -1px;
    padding: 0 2px 6px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #323232;
    cursor: pointer;
}
.sp-quotes-tab.is-active {
    border-bottom-color: #05f;
    color: #05f;
    font-weight: 600;
}
.sp-quotes-tab:hover { color: #05f; }

/* BOM 행 액션(견적 보기·주문하기) — 금액 아래 우측 정렬 */
.sp-bom__acts {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 10px;
}
.sp-bom__acts .sp-btn {
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1;
}

/* 페이지 제목은 테마 head.php 의 #container_title 이 출력 — 여기선 설명만 */
.sp-quotes__desc {
    margin: -12px 0 24px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sp-muted);
}

/* 로딩·오류 상태줄 */
.sp-quotes__status {
    margin: 0 0 16px;
    padding: 48px 20px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-bg);
    text-align: center;
    font-size: 14px;
    color: var(--sp-muted);
}

.sp-quotes__status:empty { display: none; }

/* display:flex(.sp-cart-empty) 가 hidden 속성을 덮지 않도록 */
.sp-quotes__empty[hidden] { display: none; }

/* 견적 카드 — cart 와 동일 해부(체크·썸네일·정보·수량가격), 오프셋 상속 */

/* 상태 배지 */
.sp-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.sp-badge + .sp-badge { margin-left: 4px; }

.sp-badge--rfq    { background: #fef3c7; color: #b45309; } /* 견적 대기 */
.sp-badge--priced { background: var(--sp-primary-soft); color: var(--sp-primary); } /* 자동견적 */
.sp-badge--quoted { background: #dcfce7; color: #15803d; } /* 견적 확정 */
.sp-badge--cart   { background: var(--sp-bg-soft); color: #4b5563; } /* 담김·주문됨 */
/* 통합 목록(D17)의 유형 구분(PCB/부품) + BOM 진행 상태 — 견적 상태 배지와 톤 분리 */
.sp-badge--type      { background: transparent; color: var(--sp-muted); border: 1px solid var(--sp-line); }
.sp-badge--requested { background: #dbeafe; color: #1d4ed8; } /* 견적요청 */
.sp-badge--reviewing { background: #fef3c7; color: #b45309; } /* 검토 중 */
.sp-badge--draft     { background: var(--sp-bg-soft); color: #6b7280; } /* 작성 중 */
.sp-badge--closed    { background: var(--sp-bg-soft); color: #6b7280; } /* 종료 */
.sp-badge--canceled  { background: #fee2e2; color: #b91c1c; } /* 취소 */

.sp-quotes__badges { margin: 8px 0 0; }

/* ── 견적 카드 그리드 — 견적명은 첫 행을 통째로 쓴다 ────────────────────────────
   장바구니(.sp-cart-item)는 가로 flex 한 줄이라 [사양][금액] 이 폭을 나눠 갖는데,
   견적 이름은 상품명과 달리 BOM/거버 **파일명**이라 훨씬 길다. 게다가 우측 열은
   flex: 0 0 auto 라 그 안의 가장 긴 줄(부가세 문구 262px)이 열 폭을 정하고, 사양 열은
   남은 160px 만 받아 파일명이 3줄로 쪼개지고 넘쳐 금액과 겹쳤다(2026-08-20 실측).
   ⚠ 금액 블록을 수직으로만 내리는 것으로는 해결되지 않는다 — flex 열의 가로 폭은
   수직 위치와 무관해서, 내려도 우측 278px 는 비어 있는 채 그대로고 제목은 그 자리로
   흘러들지 못한다(감싸기는 float 에서만 일어난다).
   그래서 견적관리 카드만 그리드로 세우고 제목을 name 영역(1행 전체)에 둔다. 마크업도
   제목을 .sp-cart-info 밖으로 뺐다(quotes.php) — 사양 열 안에 있으면 그 열 폭에 갇힌다.
   장바구니는 flex 그대로다(이 스코프는 .sp-quotes__item 한정). */
.sp-quotes__item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "chk thumb name name"
        "chk thumb info calc";
    align-items: start;
    /* row 는 좁게 — 제목과 사양이 한 덩어리로 읽히게 한다(.sp-cart-item 의 gap:16px 를
       row 만 덮는다). 제목 아래 여백은 .sp-cart-meta 의 margin-top:10px 가 마저 만든다. */
    gap: 8px 16px;
}
.sp-quotes__item > .sp-cart-item-chk { grid-area: chk; }
.sp-quotes__item > .sp-cart-thumb    { grid-area: thumb; }
.sp-quotes__item > .sp-cart-info     { grid-area: info; }
.sp-quotes__item > .sp-cart-calc     { grid-area: calc; margin-left: 0; }

/* 제목 타이포 — 사양 열 밖으로 뺐으니 `.sp-cart-info .prd_name` 이 더는 매치되지 않는다.
   여기서 다시 세운다(그 규칙을 그대로 두면 15px/400/회색으로 떨어진다).
   첫 행을 통째로 쓰게 됐으므로 장바구니(16px)보다 한 단계 키워 카드의 제목답게 둔다.
   ⚠ overflow-wrap 은 anywhere 여야 한다 — 줄바꿈 기회가 없는 파일명(`_` 는 끊기지 않는다)은
   min-content 가 열보다 커져 넘치는데, break-word 는 min-content 를 바꾸지 않아 못 막는다. */
.sp-quotes__item > .prd_name {
    grid-area: name;
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sp-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.sp-quotes__item > .prd_name a,
.sp-quotes__item > .prd_name b { color: inherit; font: inherit; }
.sp-quotes__item > .prd_name a:hover { color: var(--sp-primary); }

@media (max-width: 640px) {
    /* 좁은 화면에선 금액을 카드 아래 한 행으로 내린다 */
    .sp-quotes__item {
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "chk thumb name"
            "chk thumb info"
            "calc calc calc";
    }
}

/* 주문 불가(주문됨) 카드 */
.sp-quotes__item--locked .prd_name { color: var(--sp-muted); }

/* 카드 우측 — 수량(인라인 재견적) */
.sp-quotes__qty-label {
    font-size: 13px;
    color: var(--sp-muted);
}

.sp-quotes__qty {
    width: 76px;
    height: 34px;
    padding: 0 8px;
    margin-left: 6px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
    font-family: inherit;
}

.sp-quotes__qty:focus {
    outline: none;
    border-color: var(--sp-primary);
}

.sp-quotes__qty:disabled {
    border-color: transparent;
    background: none;
    color: var(--sp-ink);
    font-weight: 600;
}

/* 가격 자리 — rfq(가격 없음)는 금액 대신 대기 문구.
   ⚠ 우측 열(.sp-cart-calc)은 flex: 0 0 auto 라 **줄 하나가 길면 그 줄의 max-content
   만큼 열이 통째로 넓어지고**, 남은 폭을 받는 사양 열(.sp-cart-info)이 0 까지 밀려
   글자가 한 자씩 세로로 쪼개진다(2026-08-10 실측: rfq 안내 문구 474px → 열 490px →
   사양 열 0px). 이 열에 들어가는 문장은 tax-detail 과 같은 폭으로 묶어 둔다. */
.sp-quotes__pending {
    max-width: 280px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: #b45309;
}

.sp-quotes__tax-detail {
    max-width: 280px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--sp-muted);
    text-align: right;
}

@media (max-width: 640px) {
    .sp-quotes__item .sp-cart-calc { flex-wrap: wrap; }
    .sp-quotes__tax-detail { flex: 0 0 100%; max-width: none; }
}

/* ── 견적관리 — Figma 103:2659 (2026-08-26) ────────────────────────────────────
   670px 목록(카드 없이 구분선 행) + 30px + 340px '주문 예상 금액' 패널. 색은 계정 셸 토큰(--acc-*).
   보관함(/shop/quotes/archive)은 옛 카드 문법을 그대로 쓰기로 했으므로(사용자 결정 B, 08-26)
   새 규칙은 전부 .sp-quotes--fig 스코프 — 위의 공용 .sp-cart-*/.sp-quotes__* 규칙을 덮기만 한다.
   시안에 없는 기능(비우기·담김/주문됨 배지·검토 중 안내·모바일 주문 바)은 빼지 않고 자리만 정했다(수량 재견적은 뺌 — 08-26).
   보관함(quotes-archive.php)도 같은 문법(.sp-quotes--archive = 패널 없이 전폭). */
.sp-quotes--fig .sp-cart-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; }

/* 툴바 — 검정 상단 룰 + 회색 하단 룰, 배경·상자 없음 */
.sp-quotes--fig .sp-cart-toolbar {
    min-height: 51px; margin: 0; padding: 8px 0;
    border: 0; border-top: 1px solid var(--acc-ink, #0a151e); border-bottom: 1px solid #d9d9d9;
    border-radius: 0; background: none;
}
.sp-quotes--fig .sp-cart-toolbar .sp-chk label { font-size: 15px; color: var(--acc-muted, #666); }
.sp-quotes--fig .sp-cart-toolbar #sp_sel_cnt { font-style: normal; font-weight: 600; color: #000; }
.sp-quotes--fig .sp-cart-toolbar #sp_sel_cnt b { color: var(--acc-primary, #1e64fd); font-weight: 700; }
.sp-quotes--fig .sp-cart-toolbar-btns { gap: 6px; }
.sp-quotes--fig .sp-cart-toolbar-btns button {
    display: inline-flex; align-items: center; gap: 2px;
    min-height: 0; padding: 5px 10px;
    border: 1px solid #d8d8d8; border-radius: 4px; background: #fff;
    font-size: 14px; font-weight: 400; color: var(--acc-text, #141e34);
}
.sp-quotes--fig .sp-cart-toolbar-btns button:hover { border-color: var(--acc-ink, #0a151e); color: var(--acc-ink, #0a151e); }
.sp-quotes--fig .sp-ico { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.sp-quotes--fig .sp-cart-toolbar-btns .sp-ico { width: 14px; height: 14px; vertical-align: -2px; }

/* 체크박스 — 18px · 2px 라운드 · #bebebe, 체크 시 파랑 */
.sp-quotes--fig .sp-chk label span { width: 18px; height: 18px; border: 1px solid #bebebe; border-radius: 2px; background: #fff; }
.sp-quotes--fig .sp-chk .selec_chk:checked + label span { background: var(--acc-primary, #1e64fd); border-color: var(--acc-primary, #1e64fd); }

/* 행 — 카드 없음, 회색 구분선, 체크는 세로 중앙, 썸네일 74 */
.sp-quotes--fig .sp-cart-items { margin: 0; }
.sp-quotes--fig .sp-quotes__item {
    grid-template-columns: 18px 74px minmax(0, 1fr) auto;
    grid-template-areas:
        "chk thumb name calc"
        "chk thumb info calc";
    grid-template-rows: auto 1fr; /* 우측 금액 칸이 높아도 1행(파일명)은 안 늘어난다 — 사양이 제목 바로 아래 붙는다 */
    gap: 6px 10px; align-items: start;
    min-height: 115px; box-sizing: border-box; margin: 0; padding: 20px 0;
    border: 0; border-bottom: 1px solid #d9d9d9; border-radius: 0; background: none;
}
.sp-quotes--fig .sp-quotes__item:hover { border-color: #d9d9d9; box-shadow: none; }
.sp-quotes--fig .sp-quotes__item > .sp-cart-item-chk { margin: 0; align-self: center; }
.sp-quotes--fig .sp-quotes__item > .sp-cart-thumb { display: block; width: 74px; height: 74px; margin-right: 10px; border: 0; border-radius: 0; background: #f4f4f4; }
.sp-quotes--fig .sp-quotes__item > .prd_name { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--acc-text, #141e34); }
.sp-quotes--fig .sp-quotes__item > .prd_name a:hover { color: var(--acc-primary, #1e64fd); text-decoration: underline; text-underline-offset: 2px; }
.sp-quotes--fig .sp-quotes__item--locked .prd_name { color: var(--acc-muted, #666); }
/* 2번째 줄 사양(PCB 만 — BOM 은 사양이 없다) */
.sp-quotes--fig .sp-cart-info .sod_opt { margin: 0; }
.sp-quotes--fig .sp-cart-info .sod_opt ul { padding: 0; border-radius: 0; background: none; }
.sp-quotes--fig .sp-cart-info .sod_opt li { font-size: 14px; line-height: 1.3; color: #484c52; word-break: break-all; }
/* 3번째 줄 메타 — `유형 | 출고예정 | 접수`, 구분은 글자 `|` */
.sp-quotes--fig .sp-cart-meta { margin: 12px 0 0; gap: 4px 10px; align-items: center; font-size: 14px; color: var(--acc-muted, #666); }
.sp-quotes--fig .sp-cart-meta span + span::before { content: "|"; display: inline; width: auto; height: auto; margin: 0 10px 0 0; background: none; vertical-align: 0; color: var(--acc-muted, #666); }
.sp-quotes--fig .sp-cart-meta .sp-ico { margin-right: 6px; }

/* 우측 금액 칸 — 금액 18 Bold · VAT포함 11 · 배지 pill(단계별 색 유지) */
.sp-quotes--fig .sp-quotes__item > .sp-cart-calc { gap: 4px; min-width: 110px; padding-left: 16px; align-items: flex-end; }
.sp-quotes--fig .sp-cart-sum { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--acc-text, #141e34); }
.sp-quotes--fig .sp-quotes__vat { font-size: 11px; color: #8f8f8f; cursor: help; }
.sp-quotes--fig .sp-quotes__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 6px 0 0; }
.sp-quotes--fig .sp-badge { padding: 4px 8px; border-radius: 37px; font-size: 11px; font-weight: 500; }
.sp-quotes--fig .sp-badge + .sp-badge { margin-left: 0; }
.sp-quotes--fig .sp-badge--quoted { background: #e3fae8; color: #1b712b; }
.sp-quotes--fig .sp-quotes__pending,
.sp-quotes--fig .sp-quotes__note { max-width: 220px; font-size: 12px; font-weight: 500; line-height: 1.4; text-align: right; }
.sp-quotes--fig .sp-quotes__pending { color: #b45309; }
.sp-quotes--fig .sp-quotes__note { color: var(--acc-muted, #666); font-weight: 400; }

/* 커스텀 툴팁 — data-tip. hover/포커스/탭(.is-open)에 뜬다. 라이브러리 없음. */
.sp-tip { position: relative; outline: none; }
.sp-tip::after {
    /* 왼쪽에 띄운다 — 위는 금액, 아래는 배지라 가린다 */
    content: attr(data-tip); position: absolute; right: calc(100% + 8px); top: 50%; transform: translate(2px, -50%); z-index: 5;
    padding: 6px 10px; border-radius: 6px; background: var(--acc-ink, #0a151e); color: #fff;
    font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap;
    opacity: 0; visibility: hidden; transform: translateY(2px); pointer-events: none;
    transition: opacity .12s, transform .12s;
}
.sp-tip::before {
    content: ""; position: absolute; right: calc(100% + 3px); top: 50%; transform: translateY(-50%);
    border: 5px solid transparent; border-left-color: var(--acc-ink, #0a151e);
    opacity: 0; visibility: hidden; transition: opacity .12s;
}
.sp-tip:hover::after, .sp-tip:focus-visible::after, .sp-tip.is-open::after,
.sp-tip:hover::before, .sp-tip:focus-visible::before, .sp-tip.is-open::before { opacity: 1; visibility: visible; }
.sp-tip:hover::after, .sp-tip:focus-visible::after, .sp-tip.is-open::after { transform: translate(0, -50%); }

/* 우측 패널 — '주문 예상 금액' 카드, 버튼은 카드 안 */
.sp-quotes--fig .sp-cart-summary {
    display: flex; flex-direction: column; gap: 15px;
    padding: 24px 20px 20px; border: 1px solid #bebebe; border-radius: 10px; background: #fff;
}
.sp-quotes--fig .sp-cart-summary h2 { margin: 0; padding-bottom: 14px; border-bottom: 1px solid #d8d8d8; font-size: 20px; font-weight: 700; color: var(--acc-text, #141e34); }
.sp-quotes--fig .sp-cart-summary-row { margin: 0; padding-bottom: 14px; border-bottom: 1px solid #d8d8d8; font-size: 15px; }
.sp-quotes--fig .sp-cart-summary-row dt { font-weight: 400; color: var(--acc-muted, #666); }
.sp-quotes--fig .sp-cart-summary-row dd { font-size: 18px; font-weight: 700; color: var(--acc-text, #141e34); }
.sp-quotes--fig .sp-cart-summary-total { margin: 0; padding: 0; border: 0; }
.sp-quotes--fig .sp-cart-summary-total dt { font-size: 18px; font-weight: 600; color: var(--acc-text, #141e34); }
.sp-quotes--fig .sp-cart-summary-total dd { font-size: 20px; font-weight: 800; color: var(--acc-primary, #1e64fd); }
.sp-quotes--fig .sp-cart-summary-total dd strong { font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: 0; }
.sp-quotes--fig .sp-cart-summary-note { margin: 0; font-size: 14px; line-height: 1.3; color: var(--acc-muted, #666); opacity: .7; }
.sp-quotes--fig .sp-cart-act { margin: 11px 0 0; }
.sp-quotes--fig .sp-cart-act .btn_submit {
    min-height: 44px; padding: 6px 0; border-radius: 8px;
    font-size: 20px; font-weight: 600; letter-spacing: -0.4px; line-height: 32px;
}

/* 탭 줄 오른쪽 — 지난 견적 보관함 링크(시안엔 없음, 기능 접근로) */
.sp-quotes-tabs__aside { margin-left: auto; align-self: center; padding-bottom: 6px; font-size: 14px; color: var(--acc-muted, #666); text-decoration: none; }
.sp-quotes-tabs__aside:hover { color: var(--acc-primary, #1e64fd); text-decoration: underline; text-underline-offset: 2px; }

/* 보관함 — 패널 없이 전폭, 머리 안내문 + 돌아가기, 영구 삭제 버튼은 hover 에만 빨강 */
.sp-quotes--archive .sp-cart-body { grid-template-columns: minmax(0, 1fr); }
.sp-quotes--archive .sp-quotes__desc { margin: 0 0 18px; padding: 0; border: 0; background: none; font-size: 14px; line-height: 1.5; color: var(--acc-muted, #666); }
.sp-quotes--archive .sp-quotes__back { display: inline-block; margin-right: 10px; font-weight: 500; color: var(--acc-primary, #1e64fd); text-decoration: none; }
.sp-quotes--archive .sp-quotes__back:hover { text-decoration: underline; text-underline-offset: 2px; }
.sp-quotes--fig .sp-badge--archived { background: #f3f4f6; color: #6b7280; }
.sp-quotes--fig .sp-cart-toolbar-btns button.is-danger:hover { border-color: #d64545; color: #d64545; }

/* 반응형 — 시안 없음(이쪽 판단): 960 아래 1열, 640 아래 금액 칸을 행 아래로 */
@media (max-width: 960px) {
    .sp-quotes--fig .sp-cart-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
    .sp-quotes--fig .sp-quotes__item {
        grid-template-columns: 18px 74px minmax(0, 1fr);
        grid-template-areas:
            "chk thumb name"
            "chk thumb info"
            "calc calc calc";
        padding: 16px 0;
    }
    .sp-quotes--fig .sp-quotes__item > .sp-cart-calc {
        flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 10px;
        margin: 0; padding: 8px 0 0; border-top: 0;
    }
    .sp-quotes--fig .sp-quotes__badges { margin: 0; }
    .sp-quotes--fig .sp-cart-toolbar { padding: 8px 0; }
}
/* 18px 상자에 맞춘 체크 표시 위치(공용은 20px 기준) */
.sp-quotes--fig .sp-chk label span::after { left: 5px; top: 1.5px; width: 5px; height: 9px; }



/* ==========================================================================
   지난 견적 보관함 (spcb/pages/quotes-archive.php)
   영구 삭제 확인 레이어(.sp-modal) + 위험 버튼 — alert 대체, 복구 불가 경고 명시
   ========================================================================== */
.sp-btn-danger {
    background: #dc2626;
    color: #fff;
}

.sp-btn-danger:hover,
.sp-btn-danger:focus {
    background: #b91c1c;
    color: #fff;
}

.sp-modal[hidden] { display: none; }

.sp-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sp-modal__dim {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .55);
}

.sp-modal__box {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 28px 24px 24px;
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.sp-modal__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #b91c1c;
}

.sp-modal__title .fa { margin-right: 4px; }

.sp-modal__desc {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--sp-ink);
}

.sp-modal__warn {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sp-muted);
}

.sp-modal__warn strong { color: #b91c1c; }

.sp-modal__btns {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.sp-modal__cancel {
    background: #fff;
    border-color: var(--sp-line);
    color: var(--sp-ink);
}

.sp-modal__cancel:hover,
.sp-modal__cancel:focus {
    border-color: var(--sp-muted);
}

/* ==========================================================================
   주문서 작성 (shop/orderform.sub.php — 코어 영카트 마크업)
   코어 파일이라 마크업을 못 바꿔, 영카트 클래스를 #sod_frm 하위로 타겟해
   장바구니와 같은 시각 문법(흰 카드·토큰·sticky 요약)을 재현한다.
   모든 규칙을 #sod_frm 로 스코프 — 장바구니와 공유하는 클래스
   (#sod_bsk_tot·.btn_submit·.btn01·.btn_frmline·.frm_input·.sod_opt·.total_price)의 누수 차단.
   ========================================================================== */

/* --- 레이아웃: 상품표 전폭 상단 + 좌(입력폼)·우(요약/결제 sticky) --- */
#sod_frm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas:
        "prd  prd"
        "left right";
    gap: 24px;
    align-items: start;
    margin: 0 0 48px;
}

#sod_frm > .od_prd_list { grid-area: prd; margin: 0; }
#sod_frm > .sod_left    { grid-area: left; min-width: 0; }
#sod_frm > .sod_right   { grid-area: right; }

#sod_frm .sod_right {
    position: sticky;
    top: calc(var(--sp-header-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- 섹션 카드 (주문하시는 분·받으시는 분·결제정보) --- */
#sod_frm section {
    padding: 24px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-bg);
}

#sod_frm .sod_left section + section { margin-top: 16px; }

#sod_frm section > h2 {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    color: var(--sp-ink);
}

/* ==== 주문상품 목록 (#sod_list) ==== */
#sod_frm .od_prd_list {
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    overflow-x: auto;
    background: var(--sp-bg);
}

#sod_frm #sod_list {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#sod_frm #sod_list thead th {
    padding: 14px 16px;
    background: var(--sp-bg-soft);
    border-bottom: 1px solid var(--sp-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-muted);
    text-align: center;
    white-space: nowrap;
}

#sod_frm #sod_list thead th:first-child { text-align: left; }

#sod_frm #sod_list tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--sp-line);
    text-align: center;
    vertical-align: middle;
    color: var(--sp-ink);
    white-space: nowrap;
}

#sod_frm #sod_list tbody tr:last-child td { border-bottom: 0; }

#sod_frm #sod_list .td_prd { text-align: left; white-space: normal; }
#sod_frm .td_prd::after { content: ""; display: block; clear: both; }

#sod_frm .sod_img { float: left; width: 64px; margin-right: 12px; }
#sod_frm .sod_img img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: var(--sp-bg-soft);
}

#sod_frm .sod_name {
    overflow: hidden;
    padding-top: 2px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sp-ink);
}

#sod_frm .sod_name a { color: inherit; }

#sod_frm .sod_name .sod_opt {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--sp-muted);
    line-height: 1.5;
}

#sod_frm .sod_name .sod_opt ul { margin: 0; padding: 0; list-style: none; }
#sod_frm .sod_name .sod_opt li { line-height: 1.5; }

#sod_frm .td_numbig .total_price { font-weight: 700; }
#sod_frm .td_dvr { color: var(--sp-muted); }

/* ==== 입력 폼 (tbl_frm01 — 주문자·받는분) ==== */
#sod_frm .tbl_frm01 table { width: 100%; border-collapse: collapse; }

#sod_frm .tbl_frm01 tr { border-bottom: 1px solid var(--sp-line); }
#sod_frm .tbl_frm01 tr:last-child { border-bottom: 0; }

#sod_frm .tbl_frm01 th {
    width: 120px;
    padding: 18px 12px 18px 0;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-ink);
    white-space: nowrap;
}

#sod_frm .tbl_frm01 td {
    padding: 14px 0;
    vertical-align: top;
}

#sod_frm .frm_input {
    width: 100%;
    max-width: 320px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: var(--sp-ink);
    vertical-align: top;
}

#sod_frm .frm_input:focus {
    outline: none;
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 3px var(--sp-primary-soft);
}

#sod_frm .frm_address { max-width: 420px; margin-bottom: 6px; }

#sod_frm #od_zip,
#sod_frm #od_b_zip { width: 140px; display: inline-block; }

#sod_frm .frm_info {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--sp-muted);
}

#sod_frm textarea {
    width: 100%;
    max-width: 480px;
    min-height: 92px;
    padding: 10px 12px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: var(--sp-ink);
    line-height: 1.5;
    resize: vertical;
}

#sod_frm textarea:focus {
    outline: none;
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 3px var(--sp-primary-soft);
}

/* 보조 버튼 (주소 검색·쿠폰적용·배송지목록) */
#sod_frm .btn_address,
#sod_frm .btn_frmline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    margin-left: 6px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-ink);
    line-height: 1;
    cursor: pointer;
    vertical-align: top;
    text-decoration: none;
}

#sod_frm .btn_frmline { min-height: 36px; }

#sod_frm .btn_address:hover,
#sod_frm .btn_frmline:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}

/* 배송지 선택 라디오 → 칩 */
#sod_frm .order_choice_place {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#sod_frm .order_choice_place input { position: absolute; left: -9999px; }

#sod_frm .order_choice_place label {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: var(--sp-muted);
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}

#sod_frm .order_choice_place input:checked + label {
    border-color: var(--sp-primary);
    background: var(--sp-primary-soft);
    color: var(--sp-primary);
    font-weight: 600;
}

#sod_frm .order_choice_place input:focus-visible + label {
    outline: 2px solid var(--sp-primary);
    outline-offset: 2px;
}

/* 배송지명 행의 기본배송지 체크박스 */
#sod_frm #ad_default { margin: 0 6px 0 14px; vertical-align: middle; }

/* ==== 우측: 주문상품 합계 (#sod_bsk_tot) ==== */
#sod_frm #sod_bsk_tot {
    padding: 20px 24px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-bg);
}

#sod_frm #sod_bsk_tot ul { margin: 0; padding: 0; list-style: none; }

#sod_frm #sod_bsk_tot li {
    display: flex;
    align-items: baseline;
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--sp-ink);
}

#sod_frm #sod_bsk_tot li span { flex: 1 1 auto; color: var(--sp-muted); }
#sod_frm #sod_bsk_tot li strong { font-weight: 600; }

#sod_frm #sod_bsk_tot .sod_bsk_cnt {
    margin: 12px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--sp-line);
    font-size: 15px;
}

#sod_frm #sod_bsk_tot .sod_bsk_cnt span { color: var(--sp-ink); font-weight: 600; }

#sod_frm #sod_bsk_tot .sod_bsk_cnt strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--sp-primary);
    letter-spacing: -.02em;
}

/* 견적 주문(PCB·부품 BOM) 부가세 명세 — theme/js/order-vat-breakdown.js가 조건부 삽입 */
#sod_frm .sp-order-vat { padding: 20px 24px; }

#sod_frm .sp-order-vat > h2 {
    margin-bottom: 14px;
    font-size: 16px;
}

#sod_frm .sp-order-vat__list { margin: 0; }

#sod_frm .sp-order-vat__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 14px;
}

#sod_frm .sp-order-vat__row:last-child { margin-bottom: 0; }
#sod_frm .sp-order-vat__row dt { flex: 1 1 auto; color: var(--sp-muted); }
#sod_frm .sp-order-vat__row dd { margin: 0; color: var(--sp-ink); white-space: nowrap; }
#sod_frm .sp-order-vat__row dd strong { font-weight: 700; font-variant-numeric: tabular-nums; }

#sod_frm .sp-order-vat__rate {
    margin-left: 3px;
    font-size: 11px;
    color: var(--sp-muted);
}

#sod_frm .sp-order-vat__row--total {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--sp-line);
}

#sod_frm .sp-order-vat__row--total dt { color: var(--sp-ink); font-weight: 600; }
#sod_frm .sp-order-vat__row--total dd strong { font-size: 20px; font-weight: 800; color: var(--sp-primary); }

#sod_frm .sp-order-vat__badge {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--sp-primary-soft);
    font-size: 10px;
    font-weight: 700;
    color: var(--sp-primary);
    vertical-align: 1px;
}

#sod_frm .sp-order-vat__note {
    margin: 12px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--sp-muted);
}

/* ==== 결제정보 (#sod_frm_pay) ==== */
#sod_frm .pay_tbl table { width: 100%; border-collapse: collapse; }

#sod_frm .pay_tbl th {
    padding: 8px 0;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-muted);
    white-space: nowrap;
}

#sod_frm .pay_tbl td {
    padding: 8px 0;
    text-align: right;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sp-ink);
}

#sod_frm .pay_tbl td strong { font-weight: 700; }
#sod_frm .pay_tbl .btn_frmline { min-height: 32px; margin-left: 8px; }

/* 총 주문금액 하이라이트 */
#sod_frm #od_tot_price {
    display: flex;
    align-items: baseline;
    margin: 16px 0 0;
    padding: 16px 20px;
    border-radius: var(--sp-radius);
    background: var(--sp-primary-soft);
}

#sod_frm #od_tot_price span {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-ink);
}

#sod_frm #od_tot_price .print_price {
    font-size: 24px;
    font-weight: 800;
    color: var(--sp-primary);
    letter-spacing: -.02em;
}

/* 결제수단 선택 */
#sod_frm #od_pay_sl { margin-top: 20px; }

#sod_frm #od_pay_sl h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-ink);
}

#sod_frm #sod_frm_pt_alert {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--sp-bg-soft);
    font-size: 12px;
    line-height: 1.5;
    color: var(--sp-muted);
}

#sod_frm #sod_frm_pt_alert strong { color: var(--sp-ink); }

#sod_frm #sod_frm_paysel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

#sod_frm #sod_frm_paysel legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

#sod_frm #sod_frm_paysel input[type="radio"] { position: absolute; left: -9999px; }

#sod_frm #sod_frm_paysel label.lb_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-ink);
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}

#sod_frm #sod_frm_paysel input[type="radio"]:checked + label.lb_icon {
    border-color: var(--sp-primary);
    background: var(--sp-primary-soft);
    color: var(--sp-primary);
    font-weight: 600;
}

#sod_frm #sod_frm_paysel input[type="radio"]:focus-visible + label.lb_icon {
    outline: 2px solid var(--sp-primary);
    outline-offset: 2px;
}

/* 포인트 사용 */
#sod_frm .sod_frm_point {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: var(--sp-bg-soft);
}

#sod_frm .sod_frm_point > div:first-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--sp-ink);
}

#sod_frm #od_temp_point {
    width: 120px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: #fff;
    text-align: right;
    font-size: 14px;
}

#sod_frm #sod_frm_pt {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--sp-muted);
}

#sod_frm #sod_frm_pt strong { margin-right: 6px; color: var(--sp-ink); font-weight: 600; }

/* 무통장입금 계좌 */
#sod_frm #settle_bank {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: var(--sp-bg-soft);
    font-size: 13px;
    color: var(--sp-ink);
}

#sod_frm #settle_bank select,
#sod_frm #settle_bank input[type="text"] {
    min-height: 40px;
    margin-top: 6px;
    padding: 0 10px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
}

/* ==== 주문(결제) 버튼 ==== */
#sod_frm #display_pay_button {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#sod_frm #display_pay_button .btn_submit {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: var(--sp-radius);
    background: var(--sp-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s;
}

#sod_frm #display_pay_button .btn_submit:hover { background: var(--sp-primary-dark); }

#sod_frm #display_pay_button .btn01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: #fff;
    font-size: 14px;
    color: var(--sp-ink);
    text-decoration: none;
}

#sod_frm #display_pay_button .btn01:hover { border-color: var(--sp-primary); color: var(--sp-primary); }

#sod_frm #display_pay_process { text-align: center; font-size: 13px; color: var(--sp-muted); }
#sod_frm #display_pay_process img { max-width: 100%; }

/* --- 반응형 --- */
@media (max-width: 960px) {
    #sod_frm {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "prd"
            "left"
            "right";
    }

    #sod_frm .sod_right { position: static; }
}

@media (max-width: 640px) {
    #sod_frm { gap: 16px; }
    #sod_frm section { padding: 18px 16px; }

    #sod_frm .tbl_frm01 table,
    #sod_frm .tbl_frm01 tbody,
    #sod_frm .tbl_frm01 tr,
    #sod_frm .tbl_frm01 th,
    #sod_frm .tbl_frm01 td {
        display: block;
        width: auto;
    }

    #sod_frm .tbl_frm01 tr { padding: 10px 0; }
    #sod_frm .tbl_frm01 th { padding: 0 0 6px; }
    #sod_frm .tbl_frm01 td { padding: 0; }

    #sod_frm .frm_input,
    #sod_frm .frm_address,
    #sod_frm textarea { max-width: 100%; }

    #sod_frm #od_zip,
    #sod_frm #od_b_zip { width: 140px; }

    #sod_frm #sod_list { min-width: 620px; }
    #sod_frm .td_prd { min-width: 220px; }
}

/* ==========================================================================
   주문상태 배지 (목록·상세 공용) — status_01~06
   영카트 표준 상태 클래스. 이 테마 외 사용처 없어 전역 정의.
   ========================================================================== */
.status_01, .status_02, .status_03,
.status_03_1, .status_03_2, .status_03_3, .status_03_4, .status_03_5,
.status_04, .status_05, .status_06 {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.status_01 { background: #fff3e0; color: #b45309; }  /* 입금확인중 */
.status_02 { background: #e6f0ff; color: #1d4ed8; }  /* 입금완료   */
.status_03 { background: #eef2ff; color: #4338ca; }  /* 상품준비중 */
.status_04 { background: #e0f2fe; color: #0369a1; }  /* 상품배송   */
.status_05 { background: #dcfce7; color: #15803d; }  /* 배송완료   */
.status_06 { background: #f3f4f6; color: #6b7280; }  /* 주문취소·반품·품절 */
/* 제작 단계(08-25) — 그전엔 8단계가 전부 status_03 한 색이라 고객이 단계를 색으로 못 갈랐다. */
.status_03_1 { background: #f3e8ff; color: #7e22ce; } /* 파일검사·제조 확인(EQ) */
.status_03_2 { background: #ccfbf1; color: #0f766e; } /* 생산시작·생산중 */
.status_03_3 { background: #ecfccb; color: #4d7c0f; } /* 품질시험 */
.status_03_4 { background: #d1fae5; color: #047857; } /* 생산완료·입고 */
.status_03_5 { background: #ffe4e6; color: #be123c; } /* A/S */
/* 보조 배지(일부 취소) — 본 배지 옆에 작게 */
.status_sub { padding: 2px 8px; font-size: 0.8em; }

/* ==========================================================================
   주문내역 목록 (넓은 화면 표 / 좁은 화면 카드)
   .sod_list_* 는 공용 컴포넌트 — 주문내역(#sod_v)·마이페이지(#smb_my_od) 공유.
   #sod_v 종속을 풀어 두 페이지가 같은 표↔카드 CSS를 재사용(SSOT).
   ========================================================================== */
#sod_v { margin: 0 0 48px; }

.sod_v_count { margin: 0 0 16px; font-size: 14px; color: var(--sp-muted); }
.sod_v_count strong { color: var(--sp-ink); font-weight: 700; }

.sod_list_wrap {
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    overflow-x: auto;
    background: var(--sp-bg);
}

.sod_list_tbl { width: 100%; border-collapse: collapse; font-size: 14px; }

.sod_list_tbl thead th {
    padding: 14px 12px;
    background: var(--sp-bg-soft);
    border-bottom: 1px solid var(--sp-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-muted);
    white-space: nowrap;
    text-align: center;
}

.sod_list_tbl tbody td {
    padding: 15px 12px;
    border-bottom: 1px solid var(--sp-line);
    text-align: center;
    vertical-align: middle;
    color: var(--sp-ink);
    white-space: nowrap;
}
.sod_list_tbl tbody tr:last-child td { border-bottom: 0; }
.sod_list_tbl tbody tr:hover td { background: var(--sp-bg-soft); }

/* 본문 정렬 — 상품명·주문번호 좌측, 금액 3열 우측. `.sod_list_tbl tbody td`(가운데 기본)에
   특이도로 지지 않도록 tbody td.<class> 로 올린다. */
.sod_list_tbl tbody td.sod_col_id,
.sod_list_tbl tbody td.sod_col_name { text-align: left; }
.sod_col_id a { font-weight: 600; color: var(--sp-primary); }
.sod_col_id a:hover { text-decoration: underline; }

.sod_list_tbl tbody td.sod_col_price,
.sod_list_tbl tbody td.sod_col_pay,
.sod_list_tbl tbody td.sod_col_misu { text-align: right; font-variant-numeric: tabular-nums; }
.sod_col_misu { color: var(--sp-muted); }

/* 상품명 열(Figma) — 남는 폭을 다 차지하는 유연 컬럼, 셀 폭까지 채우고 말줄임.
   고정 max-width(240px)로 묶으면 넓은 셀에서 빈 공간을 남긴 채 잘린다(2026-08-25 실측). */
.sod_col_time { text-align: center; white-space: nowrap; }
.sod_col_name { width: 100%; max-width: 0; }   /* 남는 폭 전부 흡수 → 링크가 셀 폭에 맞춰 말줄임 */
.sod_col_name a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--acc-text, #141e34);
    font-weight: 500;
}
.sod_col_name a:hover { color: var(--acc-primary, #1e64fd); }

/* 헤더 정렬을 본문과 맞춘다 — 주문번호·상품명 좌측, 금액 3열 우측(본문은 이미 좌/우 정렬). */
.sod_list_tbl thead th:nth-child(2),  /* 주문번호 */
.sod_list_tbl thead th:nth-child(3) { text-align: left; }   /* 상품명 */
.sod_list_tbl thead th:nth-child(5),  /* 주문금액 */
.sod_list_tbl thead th:nth-child(6),  /* 결제액 */
.sod_list_tbl thead th:nth-child(7) { text-align: right; }  /* 미입금액 */

.empty_list_row td { padding: 64px 16px; text-align: center; color: var(--sp-muted); }

/* 주문내역 제목(Figma 103:4517 — 아이콘 + 36px) */
#wrapper_title.sp-title-lg {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 36px;
    font-weight: 600;
    color: var(--acc-ink, #0a151e);
}
#wrapper_title.sp-title-lg .sp-title-ico { width: 36px; height: 36px; object-fit: contain; }

/* 유형 탭(전체/PCB/부품) — .sp-quotes-tabs 공용 문법, 여백만 보정 */
.sp-oi-tabs { margin: 0 0 14px; }

/* 페이지네이션 — Figma 103:4498(‹ 숫자 › · 파랑 활성 밑줄). 동작·마크업은 get_paging 그대로,
   처음/맨끝 링크만 숨긴다. */
#sod_v .pg_wrap { display: flex; justify-content: center; margin-top: 28px; }
#sod_v .pg { display: flex; align-items: center; gap: 18px; }
#sod_v .pg_page,
#sod_v .pg_current {
    padding: 0 2px;
    background: none;
    border: 0;
    font-size: 16px;
    color: #4c4c4c;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
#sod_v .pg_page:hover { color: var(--acc-primary, #1e64fd); }
#sod_v .pg_current { color: #2674ff; font-weight: 700; text-decoration: underline; }
#sod_v .pg_start, #sod_v .pg_end { display: none; }
/* 화살표 = Figma 원본 셰브론(#0A151E · stroke 2px · round cap, Group 4 SVG를 mask 로 그대로) —
   항상 양쪽, 갈 곳 없으면 opacity .3(시안값) 비활성 */
#sod_v .pg_prev, #sod_v .pg_next { font-size: 0; display: inline-flex; align-items: center; }
#sod_v .pg_prev::before, #sod_v .pg_next::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 12px;
    background-color: var(--acc-ink, #0a151e);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M7 11L1 6L7 1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M7 11L1 6L7 1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 12px no-repeat;
}
#sod_v .pg_next::before { transform: scaleX(-1); }
#sod_v .pg_prev:hover::before, #sod_v .pg_next:hover::before { background-color: var(--acc-primary, #1e64fd); }
#sod_v .pg_prev.is-disabled, #sod_v .pg_next.is-disabled { opacity: .3; pointer-events: none; cursor: default; }

@media (max-width: 640px) {
    .sod_list_wrap { border: 0; background: transparent; overflow: visible; }
    .sod_list_tbl thead { position: absolute; left: -9999px; }
    .sod_list_tbl,
    .sod_list_tbl tbody,
    .sod_list_tbl tr,
    .sod_list_tbl td { display: block; width: auto; }

    .sod_list_tbl tr {
        margin-bottom: 12px;
        padding: 4px 16px;
        border: 1px solid var(--sp-line);
        border-radius: var(--sp-radius);
        background: var(--sp-bg);
    }

    .sod_list_tbl td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--sp-line);
        text-align: right;
        white-space: normal;
    }
    .sod_list_tbl tr td:last-child { border-bottom: 0; }
    .sod_list_tbl td::before {
        content: attr(data-th);
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 600;
        color: var(--sp-muted);
        text-align: left;
    }
    .sod_col_id a { font-size: 15px; }

    .empty_list_row td { justify-content: center; padding: 48px 0; }
    .empty_list_row td::before { content: none; }
}

/* ==========================================================================
   주문상세내역 (#sod_fin) — Figma 103:4561 (2026-08-25 재편)
   단일 컬럼 · 카드 없음 · 섹션 = 19px 제목 + 검정 1px 룰 · 행 구분 #d8d8d8 · 색은 계정 셸 토큰(--acc-*).
   시안에 없는 기능 블록(입금 안내·진행 카드·EQ·A/S·운송장·주문 취소·단계 설명)은 **빼지 않고 자리만 정했다**
   (사용자 결정 08-25). 옛 2열(좌 정보 / 우 sticky 요약) 레이아웃은 폐기.
   ========================================================================== */
#sod_fin { display: flex; flex-direction: column; gap: 40px; margin: 0 0 56px; min-width: 0; --od-rule: #d8d8d8; }
#sod_fin > * { min-width: 0; }
.shop-content:has(#sod_fin) > #wrapper_title { margin: 0 0 12px; }

/* 머리줄 — 제목 아래 검정 룰 / 아래 옅은 룰. 주문번호는 링크가 아닌 강조색. */
#sod_fin_no {
    display: flex; flex-wrap: wrap; gap: 6px 30px;
    padding: 16px 10px;
    border-top: 1px solid var(--acc-ink, #0a151e);
    border-bottom: 1px solid var(--od-rule);
    font-size: 14px; color: var(--acc-text, #141e34);
}
#sod_fin_no .sp-od__meta-item { display: inline-flex; gap: 8px; align-items: baseline; }
#sod_fin_no .sp-od__meta-v { font-weight: 500; }
#sod_fin_no .sp-od__meta-no { font-size: 14px; font-weight: 600; color: var(--acc-primary, #1e64fd); letter-spacing: 0; }

/* 섹션 공통 — 카드 크롬 없이 제목 + 검정 룰 */
#sod_fin section { padding: 0; border: 0; border-radius: 0; background: none; }
#sod_fin section > h2 {
    margin: 0; padding: 0 0 16px;
    border-bottom: 1px solid var(--acc-ink, #0a151e);
    font-size: 19px; font-weight: 600; color: var(--acc-ink, #0a151e);
}
#sod_fin section > h2 b { font-weight: 700; }

/* ==== 스텝퍼(Figma 103:4561) — 90px 원 + 꺾쇠. 지난 칸·앞 칸 같은 회색, 현재 칸만 검정(시안대로, 08-25).
   칸 수가 트랙마다 다르다(PCB 8·부품 7·일반 5) — 남는 폭은 균등 분배(space-between). ==== */
#sod_fin .sp-steps-wrap { margin: 0; }
#sod_fin .sp-steps { display: flex; align-items: center; justify-content: space-between; gap: 6px; list-style: none; margin: 0; padding: 0; }
#sod_fin .sp-steps__item { flex: 1 1 0; min-width: 0; max-width: 90px; }
#sod_fin .sp-steps__dot {
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 0 6px;
    border-radius: 50%; background: #f4f4f4; color: var(--acc-text, #141e34);
    font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center; word-break: keep-all;
}
#sod_fin .sp-steps__item.is-done .sp-steps__dot { background: #f4f4f4; color: var(--acc-text, #141e34); } /* 시안: 지난 칸도 같은 회색 */
#sod_fin .sp-steps__item.is-current .sp-steps__dot { background: var(--acc-ink, #0a151e); color: #fff; }
#sod_fin .sp-steps__sep { flex: 0 0 auto; color: #c9c9c9; font-size: 28px; font-weight: 300; line-height: 1; }
#sod_fin .sp-steps__note { margin: 10px 0 0; font-size: 13px; color: var(--acc-muted, #666); }
#sod_fin .sp-steps__cancel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0; }
/* 단계 설명(옛 '상태설명보기' 재배치 — 스텝퍼 아래 조용한 토글) */
#sod_fin #sod_sts_wrap { margin-top: 12px; }
#sod_fin .sp-steps__help {
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 13px; color: var(--acc-muted, #666); text-decoration: underline; text-underline-offset: 3px;
}
#sod_fin .sp-steps__help:hover { color: var(--acc-primary, #1e64fd); }
#sod_fin #sod_sts_explan {
    display: none; margin-top: 10px; padding: 16px 18px;
    border: 1px solid var(--acc-line, #d9d9d9); border-radius: 10px; background: var(--acc-band, #f0f4fa);
}
#sod_fin #sod_fin_legend { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 12px; }
#sod_fin #sod_fin_legend dt { font-size: 13px; font-weight: 700; color: var(--acc-ink, #0a151e); }
#sod_fin #sod_fin_legend dd { margin: 0; font-size: 13px; color: var(--acc-muted, #666); }

/* ==== 주문 상품 표 (.tbl_head03) — 헤더 무배경 15px Regular #666, 행 구분 #d8d8d8, 썸네일 74 ==== */
#sod_fin .tbl_head03 { overflow-x: auto; }
#sod_fin .tbl_head03 table { width: 100%; border-collapse: collapse; font-size: 14px; }
#sod_fin .tbl_head03 thead th {
    padding: 16px 8px; background: none; border: 0; border-bottom: 1px solid var(--od-rule);
    font-size: 15px; font-weight: 400; color: var(--acc-muted, #666); white-space: nowrap; text-align: center;
}
#sod_fin .tbl_head03 tbody td {
    padding: 20px 8px; border-bottom: 1px solid var(--od-rule);
    text-align: center; vertical-align: middle; color: var(--acc-text, #141e34); white-space: nowrap;
}
#sod_fin .tbl_head03 .td_prd { text-align: left; white-space: normal; min-width: 240px; }
#sod_fin .tbl_head03 .td_prd::after { content: ""; display: block; clear: both; }
#sod_fin .tbl_head03 tbody td.td_numbig,
#sod_fin .tbl_head03 tbody td.text_right { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
#sod_fin .sod_img { float: left; width: 74px; margin-right: 20px; }
#sod_fin .sod_img img { display: block; width: 74px; height: 74px; object-fit: cover; border-radius: 4px; background: #f4f4f4; }
#sod_fin .sod_name { overflow: hidden; overflow-wrap: anywhere; padding-top: 12px; font-weight: 500; line-height: 1.3; color: var(--acc-text, #141e34); }
#sod_fin .sod_name a { color: inherit; }
#sod_fin .sod_name .sod_opt { margin-top: 10px; font-size: 14px; font-weight: 400; color: #484c52; }
#sod_fin .td_dvr { color: var(--acc-text, #141e34); }
/* 상품 표 상태 칸 — 시안 알약 모양(11px·4/8·둥근 37), 색은 단계별(사용자 결정 ⑤) */
#sod_fin .sp_line_status { padding: 4px 8px; border-radius: 37px; font-size: 11px; font-weight: 500; line-height: 1.3; }

/* 주문 상품 아래 이어지는 기능 블록(진행 카드·제조 확인·A/S) — 같은 제목 양식(19px + 검정 룰) */
#sod_fin #sod_fin_list #sp_progress_wrap,
#sod_fin #sod_fin_list #sp_eq_wrap,
#sod_fin #sod_fin_list #sp_as_wrap { margin: 40px 0 0; }
#sod_fin #sod_fin_list #sp_progress_wrap.is-quiet { display: none; } /* auto 규칙으로 숨긴 진행 카드(⑩) */
#sod_fin #sod_fin_list #sp_progress_wrap > h2,
#sod_fin #sod_fin_list #sp_eq_wrap > h2,
#sod_fin #sod_fin_list #sp_as_wrap > h2 {
    margin: 0 0 16px; padding: 0 0 16px;
    border-bottom: 1px solid var(--acc-ink, #0a151e);
    font-size: 19px; font-weight: 600; color: var(--acc-ink, #0a151e);
}

/* ==== 정보 격자(배송지정보·결제정보) — 2열, 라벨 90px #666 15px / 값 14px Medium #141e34, 행 52px ==== */
#sod_fin .sp-od-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#sod_fin .sp-od-cell {
    display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 0 8px;
    min-height: 52px; padding: 12px 10px; border-bottom: 1px solid var(--od-rule); font-size: 14px;
}
#sod_fin .sp-od-cell--r { border-left: 1px solid var(--od-rule); }
#sod_fin .sp-od-cell--full { grid-column: 1 / -1; border-left: 0; }
#sod_fin .sp-od-cell--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0 10px; }
#sod_fin .sp-od-half { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 0 8px; align-self: stretch; padding: 12px 0; }
#sod_fin .sp-od-half + .sp-od-half { border-left: 1px solid var(--od-rule); padding-left: 10px; }
#sod_fin .sp-od-k { font-size: 15px; color: var(--acc-muted, #666); white-space: nowrap; }
#sod_fin .sp-od-v { font-weight: 500; color: var(--acc-text, #141e34); overflow-wrap: anywhere; }
#sod_fin .sp-od-v--strong { font-weight: 700; }
#sod_fin .sp-od-v a { color: var(--acc-primary, #1e64fd); }
#sod_fin .sp-od-v .btn_frmline { margin-left: 6px; }
#sod_fin .sp-od-dim { margin-left: 6px; font-style: normal; font-weight: 400; color: var(--acc-muted, #666); }
#sod_fin .sp-od-cell--blank { min-height: 52px; }

/* ==== 주문금액 박스(검정 테두리 522px) ==== */
#sod_fin .sp-od-total { max-width: 522px; margin-top: 16px; padding: 24px 20px; border: 1px solid var(--acc-ink, #0a151e); border-radius: 10px; }
#sod_fin #sod_bsk_tot2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
#sod_fin #sod_bsk_tot2 li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; color: var(--acc-text, #141e34); }
#sod_fin #sod_bsk_tot2 li > span { flex: 1 1 auto; font-size: 18px; font-weight: 600; color: var(--acc-text, #141e34); }
#sod_fin #sod_bsk_tot2 li > strong { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#sod_fin #sod_bsk_tot2 .sod_bsk_sub { display: block; padding-bottom: 16px; border-bottom: 1px solid var(--od-rule); }
#sod_fin #sod_bsk_tot2 .sod_bsk_sub > ul { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--od-rule); display: flex; flex-direction: column; gap: 2px; }
#sod_fin #sod_bsk_tot2 .sod_bsk_sub li > span { font-size: 15px; font-weight: 500; }
#sod_fin #sod_bsk_tot2 .sod_bsk_sub li > strong { font-size: 18px; }
#sod_fin #sod_bsk_tot2 .sod_bsk_sub .sod_bsk_dvr > span { font-weight: 400; color: var(--acc-muted, #666); }
#sod_fin #sod_bsk_tot2 .sod_bsk_sub .sod_bsk_dvr > strong { font-size: 15px; font-weight: 600; color: var(--acc-muted, #666); }
#sod_fin #sod_bsk_tot2 .sod_fin_tot { padding-bottom: 14px; border-bottom: 1px solid var(--od-rule); }
#sod_fin #sod_bsk_tot2 .sod_fin_tot > strong { font-weight: 800; color: var(--acc-primary, #1e64fd); }
#sod_fin #sod_bsk_tot2 .sod_fin_misu > strong { color: #d64545; }
#sod_fin #sod_bsk_tot2 #alrdy { flex-wrap: wrap; padding-bottom: 0; border-bottom: 0; }
#sod_fin #sod_bsk_tot2 #alrdy > div { flex: 1 1 100%; margin-top: 4px; }
#sod_fin #sod_bsk_tot2 #alrdy > div p { display: flex; justify-content: space-between; margin: 2px 0; font-size: 13px; color: var(--acc-muted, #666); }
#sod_fin #sod_bsk_tot2 #alrdy > div p .title { font-weight: 500; }

/* 주문 취소 — 박스 아래 텍스트 버튼(시안에 없는 기능, 자리만 정함) */
#sod_fin #sod_fin_cancel { max-width: 522px; margin-top: 14px; }
#sod_fin #sod_fin_cancel .sod_fin_c_btn {
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 13px; color: var(--acc-muted, #666); text-decoration: underline; text-underline-offset: 3px;
}
#sod_fin #sod_fin_cancel .sod_fin_c_btn:hover { color: #d64545; }
#sod_fin #sod_fin_cancel > p { margin: 0; font-size: 13px; color: var(--acc-muted, #666); }

/* ==== 공용 버튼 (.btn_frmline — 현금영수증 링크 등) ==== */
#sod_fin .btn_frmline {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 30px; padding: 0 12px;
    border: 1px solid var(--acc-line, #d9d9d9); border-radius: 6px;
    background: #fff; color: var(--acc-text, #141e34);
    font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none;
    transition: border-color .15s, color .15s;
}
#sod_fin .btn_frmline:hover { border-color: var(--acc-primary, #1e64fd); color: var(--acc-primary, #1e64fd); }

/* ==== 주문취소 모달(#sod_cancel_pop — body 로 옮겨지므로 #sod_fin 밖) ==== */
#sod_cancel_pop { display: none; position: fixed; inset: 0; z-index: 1000; }
#sod_cancel_pop .sod_fin_bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
#sod_cancel_pop #sod_fin_cancelfrm {
    position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 420px); padding: 28px 24px;
    background: #fff; border-radius: var(--sp-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
#sod_cancel_pop #sod_fin_cancelfrm h2 { margin: 0 0 16px; font-size: 18px; font-weight: 800; color: var(--sp-ink); }
#sod_cancel_pop .frm_input {
    width: 100%; min-height: 44px; padding: 0 14px; margin-bottom: 12px;
    border: 1px solid var(--sp-line); border-radius: var(--sp-radius);
    font-size: 14px; box-sizing: border-box;
}
#sod_cancel_pop .frm_input:focus { border-color: var(--sp-primary); outline: none; }
#sod_cancel_pop .btn_frmline {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-height: 44px; padding: 0 16px;
    border: 1px solid var(--sp-primary); border-radius: var(--sp-radius);
    background: var(--sp-primary); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s;
}
#sod_cancel_pop .btn_frmline:hover { background: var(--sp-primary-dark); border-color: var(--sp-primary-dark); color: #fff; }
#sod_cancel_pop .sod_cls_btn {
    position: absolute; right: 12px; top: 12px;
    width: 32px; height: 32px; border: 0; background: transparent;
    color: var(--sp-muted); font-size: 16px; cursor: pointer;
}

/* --- 무통장 입금 안내(주문 직후 도착 화면 — 머리줄 아래·스텝퍼 위) --- */
.sp-deposit-notice {
    padding: 18px 24px;
    border: 1px solid #fbbf24;
    border-radius: 10px;
    background: #fffbeb;
}
.sp-deposit-notice__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sp-deposit-notice__head b { font-size: 16px; font-weight: 800; color: #92400e; }
.sp-deposit-notice__head span { font-size: 14px; color: #a16207; }
.sp-deposit-notice__list {
    display: flex; flex-wrap: wrap; gap: 10px 32px;
    margin: 14px 0 0;
}
.sp-deposit-notice__list > div { display: flex; align-items: baseline; gap: 10px; }
.sp-deposit-notice__list dt { font-size: 13px; font-weight: 700; color: #a16207; }
.sp-deposit-notice__list dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--sp-ink); }
.sp-deposit-notice__amount { font-size: 20px; font-weight: 800; color: #b45309; }
.sp-deposit-notice__copy {
    margin-left: 6px; padding: 3px 10px;
    border: 1px solid #fbbf24; border-radius: 6px; background: #fff;
    font-size: 12px; color: #92400e; cursor: pointer;
}
.sp-deposit-notice__copy:hover { background: #fef3c7; }
.sp-deposit-notice__note { margin: 12px 0 0; font-size: 13px; color: #a16207; }
/* 입금 안내가 머리줄 바로 아래 오면 40px 간격이 과하다 */
#sod_fin > #sod_fin_no + .sp-deposit-notice { margin-top: -16px; }

/* --- 상세 반응형 — 시안은 1920 한 장이라 아래 규칙은 이쪽 판단(08-25) --- */
@media (max-width: 960px) {
    #sod_fin .sp-od-total, #sod_fin #sod_fin_cancel { max-width: none; }
}
@media (max-width: 640px) {
    #sod_fin { gap: 28px; }
    #sod_fin_no { padding: 12px 4px; gap: 4px 18px; }
    #sod_fin section > h2 { padding-bottom: 12px; font-size: 17px; }
    /* 스텝퍼: 8칸×90 은 375px 에 안 들어간다 — 가로 스크롤(사용자 결정 ④) */
    #sod_fin .sp-steps { overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; }
    #sod_fin .sp-steps__item { flex: 0 0 auto; width: 64px; }
    #sod_fin .sp-steps__dot { font-size: 11px; }
    #sod_fin #sod_fin_legend { grid-template-columns: 1fr; gap: 2px 0; }
    #sod_fin #sod_fin_legend dd { margin-bottom: 6px; }
    /* 격자 → 1열 */
    #sod_fin .sp-od-grid { grid-template-columns: minmax(0, 1fr); }
    #sod_fin .sp-od-cell--r { border-left: 0; }
    #sod_fin .sp-od-cell--blank { display: none; }
    #sod_fin .sp-od-cell--pair { grid-template-columns: minmax(0, 1fr); }
    #sod_fin .sp-od-half + .sp-od-half { border-left: 0; padding-left: 0; border-top: 1px dashed var(--od-rule); }
    #sod_fin .sp-od-cell, #sod_fin .sp-od-cell--pair { padding-left: 4px; padding-right: 4px; }
    /* 상품 표는 가로 스크롤 */
    #sod_fin .tbl_head03 table { min-width: 620px; }
    #sod_fin .tbl_head03 thead th, #sod_fin .tbl_head03 tbody td { padding: 12px 6px; }
    #sod_fin .sod_img { width: 56px; margin-right: 12px; }
    #sod_fin .sod_img img { width: 56px; height: 56px; }
    #sod_fin .sod_name { padding-top: 4px; }
    #sod_fin .sp-od-total { padding: 18px 16px; }
    #sod_fin #sod_bsk_tot2 li > span { font-size: 16px; }
    #sod_fin #sod_bsk_tot2 li > strong { font-size: 18px; }
}


/* ==========================================================================
   계정 사이드바 + 대시보드 (좌: 공용 사이드바 .smb_nav / 우: 페이지 콘텐츠)
   공유 대상: 마이페이지·주문내역·주문상세·장바구니·위시리스트·견적관리.
   · 쇼핑 페이지는 레이아웃(shop.head.php)이 #container 를 .is-account 그리드로 만들고
     #aside 에 사이드바(_account_nav.php)를 넣는다 → 페이지별 편집 불필요.
   · 견적 페이지는 다른 head 라 페이지가 .account-layout 로 직접 감싼다.
   사이드바(.smb_nav)·패널 컴포넌트는 양쪽 공용. 반응형은 폭 기반(G5_THEME_DEVICE=pc).
   ========================================================================== */
#container.is-account,
.account-layout {
    display: grid;
    grid-template-columns: 211px minmax(0, 1fr); /* Figma 2243:2386 — 사이드 211 + gap 29 */
    gap: 29px;
    align-items: start;
    /* 계정 셸 스코프 토큰 — 이 화면만 피그마 색값(사이트 전역 토큰 불변, 사용자 결정 2026-08-25). */
    --acc-primary: #1e64fd;
    --acc-ink: #0a151e;
    --acc-text: #141e34;
    --acc-muted: #666;
    --acc-line: #d9d9d9;
    --acc-band: #f0f4fa;
    --acc-band-line: #c0c6ce;
}
/* 콘텐츠 컬럼(그리드 자식)이 넘치지 않도록 */
#container.is-account > .shop-content,
.account-main { min-width: 0; }
/* 견적 페이지는 다른 head(theme/head.php)라 제목이 .account-layout 앞에 전폭으로 그려진다.
   그 제목을 숨기고 콘텐츠 컬럼(.account-main 상단 #wrapper_title)으로 옮겨 쇼핑 계정 페이지와 위치 통일. */
#container:has(> .account-layout) > #container_title { display: none; }

/* ==== 좌: 계정 사이드바 ==== */
/* Figma 2243:2386 카드형 공용 메뉴. 간격은 전 페이지에서 동일한 규칙으로 정리한다. */
.smb_nav {
    position: sticky;
    top: 20px;
    min-height: 759px;
    padding: 24px 10px;
    border: 1px solid var(--acc-line);
    border-radius: 12px;
    background: #fff;
}

/* 머리: 이름 + [정보수정 | 로그아웃] — Figma 2246:5511 */
.smb_nav .nav_head { padding: 0 10px; margin-bottom: 32px; }
.smb_nav .nav_name {
    display: block;
    font-size: 26px;
    font-weight: 600;
    color: var(--acc-ink);
    line-height: 1.3;
    word-break: keep-all;
    margin-bottom: 12px;
}
.smb_nav .nav_name:hover { text-decoration: underline; }
.smb_nav .nav_acts {
    display: flex;
    align-items: center;
    width: 169px;
    max-width: 100%;
    height: 34px;
    background: #f3f3f3;
    border-radius: 6px;
}
.smb_nav .nav_acts a {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--acc-ink);
    transition: color .13s;
}
.smb_nav .nav_acts a:hover { color: var(--acc-primary); }
.smb_nav .nav_acts a:hover .nav_ai { opacity: .75; }
.smb_nav .nav_ai { flex: none; width: 14px; height: 14px; object-fit: contain; }
.smb_nav .nav_acts_sep { flex: 0 0 1px; height: 18px; background: var(--acc-line); }

/* 그룹 메뉴 */
.smb_nav .nav_body { display: flex; flex-direction: column; gap: 32px; }
.smb_nav .nav_group { padding: 0; }
.smb_nav .nav_glabel {
    margin: 0 0 12px;
    padding: 0 10px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--acc-ink);
}
.smb_nav .nav_group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.smb_nav .nav_group li { margin: 0; }
.smb_nav .nav_group a {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--acc-muted);
    transition: color .13s, background-color .13s;
}
.smb_nav .nav_group a .nav_ico { width: 18px; height: 18px; flex: none; object-fit: contain; }
.smb_nav .nav_group a:hover { color: var(--acc-primary); }
/* 활성 = 다크 배경. 비활성 항목과 같은 폭·높이·여백을 유지한다. */
.smb_nav .nav_group a[aria-current="page"] {
    background: var(--acc-ink);
    color: #fff;
    font-weight: 700;
}
.smb_nav .nav_group a[aria-current="page"] .nav_ico { filter: brightness(0) invert(1); } /* 회색 SVG → 흰색 */
.smb_nav .nav_group a[aria-current="page"] .nav_badge,
.smb_nav .nav_group a[aria-current="page"] .nav_unit { color: #fff; }
.smb_nav .nav_group a .lbl { flex: 1; }
/* 건수 — pill 이 아니라 우측 정렬 굵은 텍스트(.nav_badge=숫자 · .nav_unit=단위). e2e 가
   .nav_badge textContent 를 Number() 로 파싱하므로 숫자만 담고 단위는 형제로 뺀다. */
.smb_nav .nav_badge {
    font-size: 14px;
    font-weight: 700;
    color: var(--acc-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.smb_nav .nav_unit { margin-left: -5px; font-size: 13px; font-weight: 400; color: var(--acc-text); } /* flex gap 6px에서 숫자·단위 사이는 1px */
.smb_nav .nav_badge.on, .smb_nav .nav_unit.on { color: var(--acc-primary); } /* 제조 확인=고객 차례(파랑) */
/* 신규 메뉴(견적관리) NEW 태그 */
.smb_nav .nav_new { margin-left: 4px; padding: 1px 5px; border-radius: 4px; font-size: 9px; font-weight: 800; line-height: 14px; letter-spacing: .04em; color: #fff; background: #d64545; }

/* 회원탈퇴 — 눈에 띄지 않는 하단 링크(피그마 미배치, 코어 회원탈퇴 경로 보존) */
.smb_nav .nav_foot { margin-top: 30px; }
.smb_nav .nav_foot a.leave { font-size: 12px; color: var(--acc-muted); opacity: .7; }
.smb_nav .nav_foot a.leave:hover { color: #d64545; opacity: 1; text-decoration: underline; }

/* ==== 우: 대시보드 패널 ==== */
/* 마이페이지 제목 — Figma 103:2656(36px SemiBold). 마이페이지에만(:has(#smb_my_list)). */
.shop-content:has(#smb_my_list) > #wrapper_title {
    font-size: 36px;
    font-weight: 600;
    color: var(--acc-ink);
    margin: 0 0 22px;
}

/* Figma 103:2361 — 콘텐츠는 카드 상자 없이 제목 + 표/정의목록. 밴드만 배경. */
#smb_my_list { display: flex; flex-direction: column; gap: 28px; min-width: 0; margin: 0 0 48px; }
#smb_my_list section { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }

/* 요약 밴드 — 4칸(주문내역·견적관리·확인요청·포인트), 세로 구분선 */
.smb_dash {
    display: flex;
    gap: 30px;
    padding: 22px 32px 24px;
    border-radius: 10px;
    background: var(--acc-band);
}
.smb_dash_cell {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px;
    padding-right: 30px;
    border-right: 1px solid var(--acc-band-line);
}
.smb_dash_cell.smb_dash_last { padding-right: 0; border-right: 0; }
.smb_dash_k { font-size: 17px; font-weight: 500; color: var(--acc-ink); }
.smb_dash_v {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 17px;
    font-size: 16px;
    font-weight: 600;
    color: var(--acc-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.smb_dash_v b { font-size: 31px; font-weight: 800; line-height: 1.1; }
.smb_dash_pair { align-items: flex-end; }
.smb_dash_sub { display: flex; flex-direction: column; align-items: flex-end; }
.smb_dash_sub em { font-size: 14px; font-weight: 400; font-style: normal; color: var(--acc-primary); }
.smb_dash_cell:hover .smb_dash_v { opacity: .82; }

/* 패널 헤더: 제목(좌, 19px) + 더보기/토글(우) */
.smb_panel_h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.smb_panel_h h2 { margin: 0; font-size: 19px; font-weight: 600; color: var(--acc-ink); }

/* 내정보 토글 버튼 */
.smb_toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--acc-line);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--acc-muted);
    cursor: pointer;
    transition: color .13s, border-color .13s;
}
.smb_toggle:hover { color: var(--acc-primary); border-color: var(--acc-primary); }
.smb_toggle_ico {
    width: 9px; height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .15s;
}
.smb_toggle.is-open .smb_toggle_ico { transform: rotate(-135deg) translate(-1px, -1px); }
.smb_collapse_body[hidden] { display: none; }
#smb_my_ov .smb_collapse_body {
    padding: 18px 20px;
    border: 1px solid var(--acc-line);
    border-radius: 8px;
    background: #fbfcfe;
}
.smb_panel_more {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-muted);
}
.smb_panel_more:hover { color: var(--sp-primary); }
.smb_panel_more::after { content: "\203A"; font-size: 15px; line-height: 1; }

/* 내정보 정의목록 — 2열 페어 그리드(주소만 전폭) */
#smb_my_ov .op_area {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0;
    font-size: 13px;
}
#smb_my_ov .op_area dt { color: var(--sp-muted); font-weight: 600; white-space: nowrap; }
#smb_my_ov .op_area dd { margin: 0; color: var(--sp-ink); word-break: break-all; }
#smb_my_ov .op_area #smb_my_ovaddd { grid-column: 2 / -1; }  /* 주소값 전폭 */

/* 주문 표는 공용 .sod_list_* 재사용 — 패널이 이미 테두리를 가지므로 내부 래퍼 테두리 제거 */
/* 주문 표(Figma 103:2361/4215 — 마이페이지 최근 주문 #smb_my_od · 주문내역 #sod_v 공용):
   카드 상자 없이 상단 진한 선 + 옅은 행 구분선, 헤더 무배경 15px Regular,
   본문 #141e34 · 금액 3열 Bold · 주문번호 파랑 Medium. */
#smb_my_od .sod_list_wrap,
#sod_v .sod_list_wrap { border: 0; border-radius: 0; background: none; }
#smb_my_od .sod_list_tbl thead th,
#sod_v .sod_list_tbl thead th { background: none; border-top: 1px solid var(--acc-ink); border-bottom: 1px solid var(--acc-line); color: var(--acc-muted); font-size: 15px; font-weight: 400; padding: 12px 16px; }
#smb_my_od .sod_list_tbl tbody td,
#sod_v .sod_list_tbl tbody td { border-bottom: 1px solid var(--acc-line); color: var(--acc-text); }
#smb_my_od .sod_list_tbl tbody tr:last-child td,
#sod_v .sod_list_tbl tbody tr:last-child td { border-bottom: 1px solid var(--acc-line); }
#smb_my_od .sod_col_id a,
#sod_v .sod_col_id a { color: var(--acc-primary); font-weight: 500; }
#smb_my_od td.sod_col_price, #smb_my_od td.sod_col_pay, #smb_my_od td.sod_col_misu,
#sod_v td.sod_col_price, #sod_v td.sod_col_pay, #sod_v td.sod_col_misu { font-weight: 700; color: var(--acc-text); }

/* 위시리스트 상품 그리드 */
#smb_my_wish ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
}
#smb_my_wish li {
    position: relative;
    margin: 0;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    overflow: hidden;
    background: var(--sp-bg);
}
#smb_my_wish li.empty_li {
    grid-column: 1 / -1;
    padding: 48px 0;
    border: 0;
    text-align: center;
    color: var(--sp-muted);
}
#smb_my_wish .smb_my_img,
#smb_my_wish .smb_my_img a { display: block; }
#smb_my_wish .smb_my_img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
#smb_my_wish .smb_my_tit {
    padding: 10px 12px 0;
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#smb_my_wish .smb_my_tit a { color: var(--sp-ink); }
#smb_my_wish .smb_my_tit a:hover { color: var(--sp-primary); }
#smb_my_wish .smb_my_price { padding: 6px 12px 0; font-size: 14px; font-weight: 700; color: var(--sp-ink); }
#smb_my_wish .smb_my_date { padding: 4px 12px 12px; font-size: 12px; color: var(--sp-muted); }

/* 위시 카드 오버레이: 체크박스(좌상)·삭제(우상) */
#smb_my_wish .smb_my_chk { position: absolute; top: 8px; left: 8px; z-index: 2; }
#smb_my_wish .wish_del {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--sp-muted);
    font-size: 12px;
}
#smb_my_wish .wish_del:hover { color: #d64545; }

/* 위시 액션 버튼(장바구니/주문하기) */
#smb_ws_act {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}
#smb_ws_act button {
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
#smb_ws_act .btn01 { background: #fff; color: var(--sp-ink); }
#smb_ws_act .btn01:hover { border-color: var(--sp-primary); color: var(--sp-primary); }
#smb_ws_act .btn02 { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
#smb_ws_act .btn02:hover { background: var(--sp-primary-dark); border-color: var(--sp-primary-dark); }

/* --- 마이페이지 반응형 --- */
@media (max-width: 960px) {
    /* 사이드바를 상단으로 내리고 메뉴는 3열로 펼침 */
    #container.is-account,
    .account-layout { grid-template-columns: 1fr; gap: 24px; }
    .smb_nav { position: static; min-height: 0; }
    .smb_nav .nav_body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
    #smb_my_wish ul { grid-template-columns: repeat(3, 1fr); }
    /* 요약 밴드 2열 랩 */
    .smb_dash { flex-wrap: wrap; gap: 20px 30px; }
    .smb_dash_cell { flex: 1 0 40%; }
    .smb_dash_cell:nth-child(2n) { padding-right: 0; border-right: 0; }
}
@media (max-width: 640px) {
    .smb_nav .nav_body { grid-template-columns: 1fr; }
    .smb_nav .nav_name { font-size: 22px; }
    #smb_my_wish ul { grid-template-columns: repeat(2, 1fr); }
    #smb_my_ov .op_area { grid-template-columns: max-content 1fr; gap: 6px 12px; }
    #smb_my_ov .op_area #smb_my_ovaddd { grid-column: auto; }
    #smb_ws_act button { flex: 1; padding: 0 12px; }
    /* 밴드 1열 */
    .smb_dash { flex-direction: column; padding: 18px 18px 20px; }
    .smb_dash_cell { flex: none; width: 100%; min-height: 0; padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--acc-band-line); }
    .smb_dash_cell.smb_dash_last { padding-bottom: 0; border-bottom: 0; }
    .smb_dash_v { justify-content: flex-start; }
}

/* ==========================================================================
   계정 콘텐츠 (포인트·쿠폰·쪽지·스크랩) — 팝업에서 인라인 계정 레이아웃으로 이관.
   .account-main 우측 콘텐츠. 패널/헤더는 마이페이지(.smb_panel_*)와 공용 톤.
   ========================================================================== */
.sp-acc { min-width: 0; margin: 0 0 48px; }
.sp-acc-panel {
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-bg);
    padding: 24px;
}
.sp-acc-empty {
    list-style: none;
    padding: 44px 12px;
    text-align: center;
    color: var(--sp-muted);
    font-size: 14px;
}
.sp-acc-paging { margin-top: 18px; }

/* ---- 포인트 — Figma 2254:9041 ---- */
.is-point #wrapper_title.sp-title-lg { margin: 0 0 20px; line-height: 1.3; letter-spacing: 0; }
.is-point .sp-title-ico { flex: none; }
.sp-point-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    width: 552.5px;
    max-width: 100%;
    margin: 0 0 44px;
    padding: 22px 32px 24px;
    border-radius: 10px;
    background: #f4f4f4;
    color: var(--acc-ink);
    line-height: 1.3;
}
.sp-point-summary__cell { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 100px; gap: 16px; }
.sp-point-summary__cell:first-child { padding-right: 30px; border-right: 1px solid var(--acc-band-line); }
.sp-point-summary dt { font-size: 17px; font-weight: 500; }
.sp-point-summary dd { margin: 0; text-align: right; font-size: 31px; font-weight: 400; overflow-wrap: anywhere; }
.sp-point-summary strong { font-weight: 800; }
.sp-point-summary__unavailable { font-size: 17px; color: var(--acc-muted); }
.sp-point-history .smb_panel_h { margin-bottom: 16px; }
.sp-point-history .smb_panel_h h2 { line-height: 1.3; }
.sp-point-table { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--acc-ink); color: var(--acc-text); line-height: 1.3; }
.sp-point-table__date-col { width: 104px; }
.sp-point-table__amount-col { width: 114px; }
.sp-point-table th { padding: 16px 18px; border-bottom: 1px solid var(--acc-line); font-size: 15px; font-weight: 400; color: var(--acc-muted); text-align: center; }
.sp-point-table td { padding: 14px 18px; border-bottom: 1px solid var(--acc-line); font-size: 14px; }
.sp-point-table__date { text-align: center; white-space: nowrap; }
.sp-point-table__content { font-weight: 500; overflow-wrap: anywhere; }
.sp-point-table__amount { text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.sp-point-table__amount.is-use { color: #f70; }
.sp-point-table td.sp-acc-empty { padding: 44px 12px; }
.sp-point-history .pg_wrap { display: flex; justify-content: center; margin-top: 28px; }
.sp-point-history .pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.sp-point-history .pg_page, .sp-point-history .pg_current { padding: 2px; font-size: 14px; line-height: 1.4; }
.sp-point-history .pg_current { color: var(--acc-primary); font-weight: 700; text-decoration: underline; }
.sp-point-history .pg_page:hover { color: var(--acc-primary); }

@media (max-width: 640px) {
    .is-point #wrapper_title.sp-title-lg { font-size: 28px; }
    .sp-point-summary { gap: 16px; padding: 20px; margin-bottom: 32px; }
    .sp-point-summary__cell { min-height: 90px; }
    .sp-point-summary__cell:first-child { padding-right: 16px; }
    .sp-point-summary dt { font-size: 14px; }
    .sp-point-summary dd { font-size: 28px; }
    .sp-point-table__date-col { width: 86px; }
    .sp-point-table__amount-col { width: 96px; }
    .sp-point-table th, .sp-point-table td { padding: 12px 8px; font-size: 13px; }
}

/* ---- 쿠폰 카드 ---- */
.sp-acc-coupons { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-acc-coupon-card {
    display: flex; align-items: stretch;
    border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden;
}
.sp-acc-coupon-card__amt {
    flex: none; width: 120px;
    display: grid; place-items: center;
    padding: 16px 10px;
    background: var(--sp-primary); color: #fff;
    font-size: 20px; font-weight: 800; text-align: center; word-break: keep-all;
}
.sp-acc-coupon-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.sp-acc-coupon-card__tit { font-size: 15px; font-weight: 700; color: var(--sp-ink); }
.sp-acc-coupon-card__target,
.sp-acc-coupon-card__date { font-size: 12px; color: var(--sp-muted); }
.sp-acc-coupon-card__target i,
.sp-acc-coupon-card__date i { color: var(--sp-primary); margin-right: 3px; }

/* ---- 탭(쪽지) ---- */
.sp-acc-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--sp-line); }
.sp-acc-tabs a {
    padding: 10px 16px; margin-bottom: -1px;
    font-size: 14px; font-weight: 600; color: var(--sp-muted);
    border-bottom: 2px solid transparent;
}
.sp-acc-tabs a:hover { color: var(--sp-ink); }
.sp-acc-tabs a.is-on { color: var(--sp-primary); border-bottom-color: var(--sp-primary); }
.sp-acc-tabs__write { margin-left: auto; color: var(--sp-primary); }

/* ---- 헤더 카운트 / 안내 ---- */
.sp-acc-count { font-size: 13px; color: var(--sp-muted); }
.sp-acc-count strong { color: var(--sp-primary); font-weight: 700; }
.sp-acc-note {
    margin: 16px 0 0; padding: 10px 12px;
    border-radius: var(--sp-radius); background: var(--sp-bg-soft);
    font-size: 12px; color: var(--sp-muted);
}
.sp-acc-note i { color: var(--sp-primary); margin-right: 4px; }

/* ---- 쪽지 목록 ---- */
.sp-acc-memos { list-style: none; margin: 0; padding: 0; }
.sp-acc-memo-li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--sp-line); }
.sp-acc-memo-li:last-child { border-bottom: 0; }
.sp-acc-memo-li__ava { flex: none; }
.sp-acc-memo-li__ava img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sp-acc-memo-li__body { flex: 1; min-width: 0; }
.sp-acc-memo-li__top { display: flex; align-items: center; gap: 8px; }
.sp-acc-memo-li__name { font-size: 14px; font-weight: 600; color: var(--sp-ink); }
.sp-acc-memo-li__name a { color: inherit; }
.sp-acc-memo-li__date { font-size: 12px; color: var(--sp-muted); }
.sp-acc-memo-li__badge { font-size: 10px; font-weight: 700; color: #fff; background: var(--sp-primary); padding: 1px 6px; border-radius: 10px; }
.sp-acc-memo-li__preview { display: block; margin-top: 3px; font-size: 13px; color: var(--sp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-acc-memo-li__preview:hover { color: var(--sp-primary); }
.sp-acc-memo-li.is-unread .sp-acc-memo-li__preview { color: var(--sp-ink); font-weight: 500; }
.sp-acc-memo-li__del { flex: none; color: var(--sp-muted); padding: 4px; }
.sp-acc-memo-li__del:hover { color: #d64545; }

/* ---- 쪽지 보기 ---- */
.sp-acc-memo-view { border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; }
.sp-acc-memo-view__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--sp-bg-soft); border-bottom: 1px solid var(--sp-line); }
.sp-acc-memo-view__ava img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sp-acc-memo-view__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-acc-memo-view__nick { font-size: 14px; font-weight: 600; color: var(--sp-ink); }
.sp-acc-memo-view__date { font-size: 12px; color: var(--sp-muted); }
.sp-acc-memo-view__del { flex: none; color: var(--sp-muted); padding: 4px; }
.sp-acc-memo-view__del:hover { color: #d64545; }
.sp-acc-memo-view__body { padding: 20px 16px; font-size: 14px; line-height: 1.7; color: var(--sp-ink); word-break: break-word; }
.sp-acc-memo-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.sp-acc-memo-nav__side { flex: 1; font-size: 13px; }
.sp-acc-memo-nav__side--right { text-align: right; }
.sp-acc-memo-nav__side a { color: var(--sp-muted); }
.sp-acc-memo-nav__side a:hover { color: var(--sp-primary); }

/* ---- 폼(쪽지 쓰기) ---- */
.sp-acc-form { display: flex; flex-direction: column; gap: 18px; }
.sp-acc-field { display: flex; flex-direction: column; gap: 6px; }
.sp-acc-field label { font-size: 13px; font-weight: 600; color: var(--sp-ink); }
.sp-acc-field label .req { color: #d64545; }
.sp-acc-field input[type=text],
.sp-acc-field textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--sp-line); border-radius: var(--sp-radius);
    font-size: 14px; color: var(--sp-ink); background: #fff;
}
.sp-acc-field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.sp-acc-field input:focus, .sp-acc-field textarea:focus { outline: none; border-color: var(--sp-primary); }
.sp-acc-field__hint { font-size: 12px; color: var(--sp-muted); }
.sp-acc-formbtns { display: flex; justify-content: flex-end; gap: 8px; }

/* 버튼 공용 */
.sp-acc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; padding: 0 22px;
    border: 1px solid var(--sp-line); border-radius: var(--sp-radius);
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.sp-acc-btn--primary { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
.sp-acc-btn--primary:hover { background: var(--sp-primary-dark); border-color: var(--sp-primary-dark); }
.sp-acc-btn--ghost { background: #fff; color: var(--sp-ink); }
.sp-acc-btn--ghost:hover { border-color: var(--sp-primary); color: var(--sp-primary); }

/* ---- 스크랩 ---- */
.sp-acc-scraps { list-style: none; margin: 0; padding: 0; }
.sp-acc-scrap-li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--sp-line); }
.sp-acc-scrap-li:last-child { border-bottom: 0; }
.sp-acc-scrap-li__body { flex: 1; min-width: 0; }
.sp-acc-scrap-li__tit { display: block; font-size: 14px; font-weight: 600; color: var(--sp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-acc-scrap-li__tit:hover { color: var(--sp-primary); }
.sp-acc-scrap-li__meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--sp-muted); }
.sp-acc-scrap-li__cate { color: var(--sp-muted); }
.sp-acc-scrap-li__cate:hover { color: var(--sp-primary); }
.sp-acc-scrap-li__cate i { margin-right: 3px; }
.sp-acc-scrap-li__del { flex: none; color: var(--sp-muted); padding: 4px; }
.sp-acc-scrap-li__del:hover { color: #d64545; }

/* ---- 계정 콘텐츠 반응형 ---- */
@media (max-width: 640px) {
    .sp-acc-panel { padding: 18px 16px; }
    .sp-acc-coupon-card__amt { width: 92px; font-size: 17px; }
    .sp-acc-tabs__write { padding-left: 8px; padding-right: 8px; }
}

/* ── PCB 제조 확인 요청(P4.1) — 주문내역 상세 #sod_fin 스코프 ────────────────── */
/* 협력사 EQ 를 고객에게 물어보는 섹션. 대기 중인 건은 눈에 띄어야 하고(파랑 강조),
   지난 건은 조용해야 한다. 협력사명은 어디에도 나오지 않는다. */
/* PCB 제작 진행 상황(P4.13) — od 상태와 별개의 협력 트랙 파생 표시 */
#sod_fin #sp_progress_wrap { margin: 20px 0; }
#sod_fin #sp_progress_wrap h2 { font-size: 1.083em; font-weight: 700; margin: 0 0 6px; }
#sod_fin .sp_progress_list { list-style: none; margin: 0; padding: 0; }
#sod_fin .sp_progress_item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; background: #fff; }
#sod_fin .sp_progress_proj { font-size: 0.958em; color: #111827; }
/* 좌표파일(메탈마스크) — 통보 없이 놓아 두는 열람이라 조용한 링크로 둔다(줄 오른쪽 끝). */
#sod_fin .sp_progress_file { margin-left: auto; display: inline-block; padding: 4px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875em; color: #374151; text-decoration: none; background: #fff; }
#sod_fin .sp_progress_file:hover { background: #f9fafb; }

#sod_fin #sp_eq_wrap { margin: 20px 0; }
#sod_fin #sp_eq_wrap h2 { font-size: 1.083em; font-weight: 700; margin: 0 0 6px; }
#sod_fin .sp_eq_intro { margin: 0 0 10px; font-size: 0.917em; color: #6b7280; }

#sod_fin .sp_eq_item { border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; background: #fff; }
#sod_fin .sp_eq_item.sp_eq_open { border-color: #7dd3fc; background: #f0f9ff; }

#sod_fin .sp_eq_head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
#sod_fin .sp_eq_proj { font-size: 0.958em; color: #111827; }
#sod_fin .sp_eq_due { font-size: 0.875em; color: #6b7280; }

#sod_fin .sp_eq_badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.833em; font-weight: 700; }
#sod_fin .sp_eq_wait { background: #e0f2fe; color: #0369a1; }
#sod_fin .sp_eq_ok   { background: #d1fae5; color: #047857; }
/* 제작 진행 카드 단계색(08-25) — 확인(보라)→생산(청록)→생산완료(연초록)→운송(하늘)→입고(초록) */
#sod_fin .sp_stage_eq_pending, #sod_fin .sp_stage_eq, #sod_fin .sp_stage_eq_done { background: #f3e8ff; color: #7e22ce; }
#sod_fin .sp_stage_producing { background: #ccfbf1; color: #0f766e; }
#sod_fin .sp_stage_produced  { background: #d1fae5; color: #047857; }
#sod_fin .sp_stage_shipping  { background: #e0f2fe; color: #0369a1; }
#sod_fin .sp_stage_received  { background: #dcfce7; color: #15803d; }
/* BOM 조달·물류 단계(08-25 §6.35) — 조달(청록)→발송·운송(연초록/하늘)→입고(초록) */
#sod_fin .sp_stage_procure_pending { background: #eef2ff; color: #4338ca; }
#sod_fin .sp_stage_procuring, #sod_fin .sp_stage_procure_confirmed { background: #ccfbf1; color: #0f766e; }
#sod_fin .sp_stage_packing  { background: #d1fae5; color: #047857; }
#sod_fin .sp_stage_inbound  { background: #e0f2fe; color: #0369a1; }

#sod_fin .sp_eq_no   { background: #fee2e2; color: #b91c1c; }
#sod_fin .sp_eq_off  { background: #f3f4f6; color: #6b7280; }

#sod_fin .sp_eq_msg { padding: 10px 12px; background: #fff; border-left: 3px solid #0ea5e9; font-size: 0.958em; line-height: 1.7; color: #0f172a; white-space: pre-wrap; }
#sod_fin .sp_eq_item:not(.sp_eq_open) .sp_eq_msg { border-left-color: #d1d5db; background: #f9fafb; color: #4b5563; }

#sod_fin .sp_eq_files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#sod_fin .sp_eq_files a { display: inline-block; padding: 4px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875em; color: #374151; text-decoration: none; background: #fff; }
#sod_fin .sp_eq_files a:hover { background: #f9fafb; }

#sod_fin .sp_eq_form { margin-top: 12px; }
#sod_fin .sp_eq_note_label { display: block; font-size: 0.875em; font-weight: 700; color: #374151; }
#sod_fin .sp_eq_note_label span { font-weight: 400; color: #9ca3af; }
#sod_fin .sp_eq_form textarea,
#sod_fin .sp_as_form textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.958em; font-family: inherit; }
#sod_fin .sp_eq_btns { display: flex; gap: 8px; margin-top: 10px; }
#sod_fin .sp_eq_btns button { padding: 9px 20px; border: 0; border-radius: 6px; font-size: 0.958em; font-weight: 700; cursor: pointer; }
#sod_fin .sp_eq_approve { background: #0284c7; color: #fff; }
#sod_fin .sp_eq_approve:hover { background: #0369a1; }
#sod_fin .sp_eq_reject { background: #fff; color: #b91c1c; border: 1px solid #fca5a5 !important; }
#sod_fin .sp_eq_reject:hover { background: #fef2f2; }

#sod_fin .sp_eq_done { margin: 8px 0 0; font-size: 0.917em; color: #6b7280; }
#sod_fin .sp_eq_done .sp_eq_note { display: block; margin-top: 4px; color: #4b5563; }

/* PCB A/S 접수(P5) — EQ 톤 공유 + 접수 폼 전용 */
#sod_fin #sp_as_wrap { margin: 20px 0; }
#sod_fin #sp_as_wrap h2 { font-size: 1.083em; font-weight: 700; margin: 0 0 6px; }
#sod_fin .sp_as_claim { border-top: 1px dashed #e5e7eb; padding-top: 10px; margin-top: 10px; }
#sod_fin .sp_as_meta { font-size: 0.875em; color: #6b7280; }
#sod_fin .sp_as_reply { margin: 8px 0 0; padding: 10px 12px; background: #f0fdf4; border-left: 3px solid #16a34a; font-size: 0.917em; line-height: 1.7; color: #14532d; }
#sod_fin .sp_as_form_wrap { margin-top: 12px; }
#sod_fin .sp_as_form_wrap > summary { cursor: pointer; display: inline-block; padding: 8px 16px; border: 1px solid #0284c7; border-radius: 6px; color: #0284c7; font-size: 0.917em; font-weight: 700; background: #fff; list-style: none; }
#sod_fin .sp_as_form_wrap > summary::-webkit-details-marker { display: none; }
#sod_fin .sp_as_form_wrap[open] > summary { border-color: #d1d5db; color: #6b7280; }
#sod_fin .sp_as_form { margin-top: 10px; }
#sod_fin .sp_as_grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
#sod_fin .sp_as_grid label { display: block; font-size: 0.875em; font-weight: 700; color: #374151; }
#sod_fin .sp_as_grid select,
#sod_fin .sp_as_grid input[type=number] { display: block; margin-top: 4px; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.958em; min-width: 130px; background: #fff; }
#sod_fin .sp_as_form input[type=file] { display: block; margin-top: 4px; font-size: 0.875em; }
#sod_fin .sp_as_form .sp_eq_note_label { margin-top: 8px; }
#sod_fin .sp_as_ack { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.875em; color: #4b5563; }

@media (max-width: 600px) {
    #sod_fin .sp_eq_btns button { flex: 1; }
}

/* ==========================================================================
   계정 목록 공용 — 제조 확인(/shop/eq)·A/S 접수(/shop/as)
   주문 상세(#sod_fin .sp_eq_*)와 **같은 시각 문법**을 쓰되 셀렉터를 공유하지 않는다:
   그쪽은 주문 하나 안의 섹션이라 #sod_fin 스코프이고, 이쪽은 독립 페이지다.
   목록에는 결정 폼이 없다(행 → 주문 상세 딥링크) — 그래서 배지·본문 계열만 옮겼다.
   ========================================================================== */
.sp-eqm { min-width: 0; margin: 0 0 48px; }
.sp-eqm__intro { margin: 0 0 14px; font-size: 15px; color: var(--sp-muted); }
.sp-eqm__empty {
    margin: 0; padding: 48px 16px; border: 1px dashed var(--sp-line); border-radius: 10px;
    text-align: center; color: var(--sp-muted); background: #fff;
}
.sp-eqm__cnt {
    display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px;
    background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.sp-quotes-tabs a.sp-quotes-tab { text-decoration: none; display: inline-block; }

.sp-eqm__list { list-style: none; margin: 0; padding: 0; }
.sp-eqm__item {
    min-width: 0;                     /* 긴 프로젝트명이 좁은 화면을 가로로 터뜨리지 않게 */
    border: 1px solid var(--sp-line); border-radius: 10px; background: #fff;
    padding: 16px 18px; margin-bottom: 10px;
}
.sp-eqm__item.is-open { border-color: #7dd3fc; background: #f0f9ff; }

.sp-eqm__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.sp-eqm__proj { min-width: 0; font-size: 15px; color: var(--sp-ink); word-break: break-all; }
.sp-eqm .sp_eq_due { font-size: 13px; color: var(--sp-muted); }
.sp-eqm .sp_eq_badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.sp-eqm .sp_eq_wait { background: #e0f2fe; color: #0369a1; }
.sp-eqm .sp_eq_ok   { background: #d1fae5; color: #047857; }
.sp-eqm .sp_eq_no   { background: #fee2e2; color: #b91c1c; }
.sp-eqm .sp_eq_off  { background: #f3f4f6; color: #6b7280; }

.sp-eqm__msg {
    margin: 0; padding: 10px 12px; border-left: 3px solid #0ea5e9; background: #fff;
    font-size: 14px; line-height: 1.7; color: #0f172a;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-eqm__item:not(.is-open) .sp-eqm__msg { border-left-color: #d1d5db; background: #f9fafb; color: #4b5563; }

.sp-eqm__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.sp-eqm__meta { min-width: 0; font-size: 13px; color: var(--sp-muted); }
.sp-eqm__go {
    display: inline-block; padding: 8px 16px; border-radius: 8px;
    background: var(--sp-primary); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
}
.sp-eqm__go:hover { background: var(--sp-primary-dark); color: #fff; }
.sp-eqm__item:not(.is-open) .sp-eqm__go { background: #fff; border: 1px solid var(--sp-line); color: var(--sp-ink); }
.sp-eqm__item:not(.is-open) .sp-eqm__go:hover { background: #f9fafb; color: var(--sp-ink); }

/* A/S 접수(/shop/as) 추가분 — 섹션 머리·범위 알약·조용한 탭 카운트·접수할 주문 행 */
.sp-eqm__sect { margin: 22px 0 10px; font-size: 15px; font-weight: 700; color: var(--sp-ink); }
.sp-eqm__secthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 22px; }
.sp-eqm__secthead .sp-eqm__sect { margin: 0; }
.sp-eqm__scope { display: flex; gap: 6px; }
.sp-eqm__pill {
    display: inline-block; padding: 5px 12px; border: 1px solid var(--sp-line); border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--sp-muted); text-decoration: none; background: #fff;
}
.sp-eqm__pill.is-active { border-color: var(--sp-primary); color: var(--sp-primary); background: #eff6ff; }
.sp-eqm__cnt.is-quiet { background: #e5e7eb; color: #374151; }
.sp-eqm__empty.is-compact { padding: 22px 16px; }
.sp-eqm__note { margin: 8px 0 0; font-size: 13px; color: var(--sp-muted); }
.sp-eqm__note a { color: var(--sp-primary); text-decoration: underline; }
.sp-eqm__item.is-claimable { padding: 12px 18px; }
.sp-eqm__item.is-claimable .sp-eqm__foot { margin-top: 0; }
.sp-eqm__item.is-claimable .sp-eqm__meta { display: flex; flex-direction: column; gap: 2px; }
.sp-eqm__sub { font-size: 13px; color: var(--sp-muted); }