@charset "utf-8";
/* sp-lite 전역 스타일 — 반응형(모바일 퍼스트, 브레이크포인트 1024px)
   범위: 토큰·reset·헤더·GNB·푸터·플로팅(미배치 링크/상단으로)·레이아웃 뼈대
   콘텐츠(게시판·쇼핑 스킨)는 스킨 재작성 단계에서 별도 작업 */

/* ==========================================================================
   디자인 토큰
   ========================================================================== */
:root {
    --sp-primary: #0b5fd7;
    --sp-primary-dark: #0a4cad;
    --sp-primary-soft: #eaf2fe;
    --sp-ink: #14213b;
    --sp-muted: #5d6b85;
    --sp-line: #dde3ee;
    --sp-bg: #ffffff;
    --sp-bg-soft: #f3f4f6;
    --sp-footer-bg: #111827;
    --sp-footer-ink: #9ca3af;
    --sp-footer-ink-strong: #d1d5db;
    --sp-container: 1320px;
    --sp-radius: 8px;
    --sp-header-h: 94px;
    --sp-header-ink: #0a151e;   /* 헤더 잉크(메뉴·로그인 알약) — Figma top(2089:1413) */
    --sp-header-muted: #576065; /* 회원가입·로그아웃 밑줄 링크 */
    --sp-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    --sp-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

/* ==========================================================================
   Reset (완만하게 — 콘텐츠 영역 파괴 최소화)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sp-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--sp-ink);
    background: var(--sp-bg);
    word-break: keep-all;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--sp-primary); }

button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    padding: 0;
}

input, textarea, select { font-family: inherit; font-size: inherit; }

/* 공통 컨테이너 */
.sp-inner {
    max-width: var(--sp-container);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ==========================================================================
   접근성·코어 출력 요소
   ========================================================================== */
.sound_only {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#skip_to_container a {
    position: absolute;
    top: -9999px;
    left: 0;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--sp-primary);
    color: #fff;
    font-weight: 600;
}
#skip_to_container a:focus { top: 0; }

#hd_h1,          /* 페이지 타이틀(브라우저 표시용) */
#hd_login_msg,   /* head.sub.php 로그인중 메시지 — 헤더 로그인 영역으로 대체 */
#text_size {     /* 쇼핑몰 글자크기 버튼 */
    display: none;
}

/* 팝업레이어 (bbs/newwin.inc.php 코어 출력) */
#hd_pop { position: relative; z-index: 1100; }
#hd_pop h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
.hd_pops {
    position: absolute;
    z-index: 1100;
    background: var(--sp-bg);
    border: 1px solid var(--sp-line);
    box-shadow: var(--sp-shadow);
}
.hd_pops_con { overflow: hidden; }
.hd_pops_footer {
    display: flex;
    justify-content: space-between;
    background: var(--sp-ink);
}
.hd_pops_footer button {
    padding: 8px 12px;
    font-size: 12px;
    color: #fff;
}

/* ==========================================================================
   헤더 — Figma 「일반고객_로그인」(2077:15) top(2089:1413)
   94px 흰 바(blur 4·그림자 0 8 10 rgba(168,185,205,.1)) · 안쪽 1280(= --sp-container 1320 − 패딩 40)
   로고 175×28 → 116px 띄우고 GNB(18 Medium, gap 30) → 우측 [로그인 알약 44h + 회원가입 밑줄](gap 20)
   + 아이콘 3개(30px, gap 18). 로그인 상태(피그마 없음, 2026-08-27 결정)는 알약 자리에 로그아웃(+파트너·관리자)
   밑줄 텍스트. 건수 배지는 견적관리 화면(103:2659) 헤더의 파란 pill(#1e64fd, 아이콘 오른쪽에 나란히).
   ========================================================================== */
.sp-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 10px rgba(168, 185, 205, .1);
}

.sp-header__bar {
    display: flex;
    align-items: center;
    height: var(--sp-header-h);
}

/* 로고 — 심볼 28 + SAMPLEPCB 워드마크(img/logo-header.png, 2x 350×56) */
.sp-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.sp-logo img { display: block; width: 175px; height: 28px; }

/* 우측 유틸: [인증] + [아이콘 3개] */
.sp-util {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-shrink: 0;
    margin-left: auto;
}
.sp-util__auth { display: flex; align-items: center; gap: 20px; }

.sp-util__login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 10px 20px;
    border-radius: 48px;
    background: var(--sp-header-ink);
    color: #fcfdfd;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
.sp-util__login:hover { background: #22303b; color: #fcfdfd; }

.sp-util__link {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sp-header-muted);
    text-decoration: underline;
    text-underline-position: from-font;
    white-space: nowrap;
}
.sp-util__link:hover { color: var(--sp-header-ink); }

.sp-util__icons {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sp-util__icons a { display: inline-flex; align-items: center; gap: 2px; }
.sp-util__icons img { display: block; width: 30px; height: 30px; transition: opacity .15s; }
.sp-util__icons a:hover img { opacity: .55; }

/* 건수 배지 — 아이콘 오른쪽 파란 pill */
.sp-util__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 16px;
    padding: 1px 4px;
    border-radius: 10px;
    background: #1e64fd;
    color: #fcfdfd;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

/* GNB 토글(모바일) */
.sp-gnb-toggle {
    display: none;
    width: 40px;
    height: 40px;
    font-size: 19px;
    color: var(--sp-header-ink);
}

/* ==========================================================================
   GNB — 데스크톱: 헤더 바 안 인라인 + hover 드롭다운
   ========================================================================== */
.sp-gnb { margin-left: 116px; min-width: 0; }

.sp-gnb__list {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-gnb__item { position: relative; }

.sp-gnb__link {
    display: block;
    padding: 10px 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sp-header-ink);
    white-space: nowrap;
}
.sp-gnb__item:hover > .sp-gnb__link { color: var(--sp-primary); }

.sp-gnb__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: -12px;
    z-index: 1001;
    min-width: 168px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--sp-bg);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
}
.sp-gnb__item:hover .sp-gnb__sub { display: block; }

.sp-gnb__sub a {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--sp-muted);
}
.sp-gnb__sub a:hover { color: var(--sp-primary); background: var(--sp-primary-soft); }

.sp-gnb__empty {
    padding: 13px 0;
    font-size: 14px;
    color: var(--sp-muted);
}
.sp-gnb__empty a { color: var(--sp-primary); text-decoration: underline; }

/* 좁은 데스크톱(1024~1279): 로고·메뉴·우측이 한 줄에 들도록 간격만 줄인다 */
@media (max-width: 1279.98px) {
    .sp-gnb { margin-left: 40px; }
    .sp-gnb__list { gap: 20px; }
    .sp-gnb__link { font-size: 16px; }
    .sp-util { gap: 20px; }
    .sp-util__auth { gap: 14px; }
    .sp-util__icons { gap: 14px; }
}

/* ==========================================================================
   레이아웃 뼈대 (콘텐츠 스타일은 스킨 재작성 단계에서)
   ========================================================================== */
#wrapper {
    max-width: var(--sp-container);
    margin: 0 auto;
    padding: 28px 20px 56px;
    min-height: 55vh;
}
#wrapper::after { content: ""; display: block; clear: both; } /* 콘텐츠 float 해제(구 스킨 호환) */

#container_title {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}

#wrapper_title {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ==========================================================================
   푸터 — Figma 「웹 메인」(2122:5280) 푸터(2122:6043) 2026-09-06. 다크 #202a37, 높이 346(1920 기준)
   ========================================================================== */
.sp-footer {
    clear: both;
    margin-top: 48px;
    padding: 55px 0 35px;
    background: #202a37;
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
}
body:has(.sp-home) .sp-footer { margin-top: 0; } /* 홈은 게시판 섹션에 바로 붙는다 */
.sp-footer p { margin: 0; }
.sp-footer a { color: #fff; }
.sp-footer a:hover { color: #fff; text-decoration: underline; }
.sp-footer__vr { display: inline-block; width: 1px; height: 20px; background: #484c52; flex: 0 0 auto; }

.sp-footer__co { display: flex; flex-direction: column; gap: 14px; text-shadow: 0 4px 6px rgba(0, 0, 0, .3); }
.sp-footer__co-name { display: flex; align-items: center; gap: 20px; font-size: 16px; font-weight: 500; color: #fff; }
.sp-footer__co-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; font-size: 15px; color: rgba(255, 255, 255, .7); }
.sp-footer__co-line + .sp-footer__co-line { margin-top: -4px; }
.sp-footer__co-line--tight { gap: 10px 20px; }

.sp-footer__mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 54px;
    padding: 17px 0 16px;
    border-top: 1px solid #484c52;
    border-bottom: 1px solid #484c52;
}
.sp-footer__links { display: flex; flex-wrap: wrap; gap: 8px 33px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; }
.sp-footer__links a { text-shadow: 0 4px 6px rgba(0, 0, 0, .3); }
.sp-footer__contact { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.sp-footer__contact li { display: flex; align-items: center; gap: 8px; text-shadow: 0 4px 6px rgba(0, 0, 0, .3); white-space: nowrap; }
.sp-footer__contact img { display: block; width: 16px; height: 16px; }

.sp-footer__bottom { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.sp-footer__logo { display: block; flex: 0 0 auto; }
.sp-footer__logo img { display: block; width: 175px; height: 28px; }
.sp-footer__copy { margin-left: 27px; font-size: 14px; color: rgba(255, 255, 255, .6); text-shadow: 0 4px 6px rgba(0, 0, 0, .3); }
.sp-footer__sns { display: flex; align-items: center; gap: 30px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.sp-footer__sns-ico { display: block; opacity: .95; }
.sp-footer__sns img { display: block; }

@media (max-width: 767.98px) {
    .sp-footer { padding: 36px 0 28px; }
    .sp-footer__co-name { flex-wrap: wrap; }
    .sp-footer__co-line { flex-direction: column; align-items: flex-start; gap: 6px; }
    .sp-footer__co-line .sp-footer__vr { display: none; }
    .sp-footer__mid { flex-direction: column; align-items: flex-start; margin-top: 28px; }
    .sp-footer__bottom { flex-wrap: wrap; }
    .sp-footer__copy { flex-basis: 100%; margin-left: 0; order: 3; }
}

/* ==========================================================================
   우측 하단 플로팅 — 미배치 링크(작업용) + 상단으로
   ========================================================================== */
.sp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-float__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sp-bg);
    border: 1px solid var(--sp-line);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
    color: var(--sp-muted);
    font-size: 15px;
}
.sp-float__btn:hover { color: var(--sp-primary); border-color: var(--sp-primary); }
.sp-float.is-open .sp-quick-toggle {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
}

.sp-quick-panel {
    display: none;
    position: absolute;
    right: 56px;
    bottom: 0;
    width: 264px;
    max-width: calc(100vw - 100px);
    max-height: 70vh;
    overflow-y: auto;
    padding: 16px;
    background: var(--sp-bg);
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    box-shadow: var(--sp-shadow);
}
.sp-float.is-open .sp-quick-panel { display: block; }

.sp-quick-panel__title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}
.sp-quick-panel__title small { font-weight: 400; color: var(--sp-muted); }

.sp-quick-panel__group + .sp-quick-panel__group { margin-top: 12px; }

.sp-quick-panel__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-muted);
    margin-bottom: 6px;
}

.sp-quick-panel__group ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sp-quick-panel__group a {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--sp-ink);
    background: var(--sp-bg-soft);
    border-radius: 6px;
}
.sp-quick-panel__group a:hover { color: #fff; background: var(--sp-primary); }

/* ==========================================================================
   반응형 — 모바일/태블릿 (<1024px): GNB가 헤더 아래 패널로 전환
   ========================================================================== */
@media (max-width: 1023.98px) {
    :root { --sp-header-h: 64px; }

    .sp-gnb-toggle { display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; }

    .sp-logo img { width: 150px; height: 24px; }

    .sp-util { gap: 14px; }
    .sp-util__auth { gap: 12px; }
    .sp-util__login { height: 36px; padding: 8px 14px; font-size: 14px; }
    .sp-util__link { font-size: 14px; }
    .sp-util__link--extra { display: none; } /* 파트너 포탈·관리자 링크는 데스크톱 전용(직접 URL 가능) */
    .sp-util__icons { gap: 10px; }
    .sp-util__icons img { width: 26px; height: 26px; }

    .sp-gnb {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: 8px 16px 12px;
        background: var(--sp-bg);
        border-top: 1px solid var(--sp-line);
        border-bottom: 1px solid var(--sp-line);
        box-shadow: var(--sp-shadow);
        max-height: calc(100vh - var(--sp-header-h));
        overflow-y: auto;
    }
    #hd.gnb-open .sp-gnb { display: block; }

    .sp-gnb__list { flex-direction: column; gap: 0; }

    .sp-gnb__link { padding: 12px 8px; font-size: 16px; border-bottom: 1px solid var(--sp-bg-soft); }

    /* 하위메뉴: 드롭다운 → 인라인 목록(탭으로 펼침) */
    .sp-gnb__sub {
        position: static;
        min-width: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--sp-bg-soft);
        padding: 4px 0;
    }
    .sp-gnb__item:hover .sp-gnb__sub { display: none; }
    .sp-gnb__item.is-open .sp-gnb__sub { display: block; }
    .sp-gnb__sub a { padding: 9px 20px; }

    #wrapper { padding: 20px 16px 48px; }


    .sp-float { right: 12px; bottom: 12px; }
}

/* 초소형(<600px): 회원가입·로그아웃 텍스트는 숨기고 로고·아이콘 축소 — 375px 에서 한 줄 유지 */
@media (max-width: 599.98px) {
    .sp-logo img { width: 120px; height: 19px; }
    .sp-gnb-toggle { width: 36px; margin-right: 2px; }
    .sp-util { gap: 10px; }
    .sp-util__auth .sp-util__link { display: none; } /* 회원가입·로그아웃은 로그인/마이페이지 화면에서 */
    .sp-util__login { height: 32px; padding: 6px 12px; font-size: 13px; }
    .sp-util__icons { gap: 8px; }
    .sp-util__icons img { width: 24px; height: 24px; }
}

/* ── sp-dialog — 공용 커스텀 팝업(네이티브 alert/confirm 대체) ───────────────── */
/* theme/sp-lite/js/sp-dialog.js 와 한 벌. 전역이라 default.css 에 둔다(쇼핑몰 밖에서도 쓴다). */
.sp-dlg-lock { overflow: hidden; }

.sp-dlg-back {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(17, 24, 39, 0.45);
    animation: sp-dlg-fade .12s ease-out;
}
@keyframes sp-dlg-fade { from { opacity: 0; } to { opacity: 1; } }

.sp-dlg {
    width: 100%; max-width: 380px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
    padding: 24px 24px 18px;
    animation: sp-dlg-pop .14s ease-out;
}
@keyframes sp-dlg-pop { from { transform: translateY(6px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.sp-dlg-title { margin: 0 0 8px; font-size: 1.083em; font-weight: 700; color: #111827; line-height: 1.5; }
.sp-dlg-msg { font-size: 0.958em; line-height: 1.7; color: #374151; word-break: keep-all; }
.sp-dlg-danger .sp-dlg-title { color: #b91c1c; }
.sp-dlg-success .sp-dlg-title { color: #047857; }

.sp-dlg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.sp-dlg-btns button {
    min-width: 80px; padding: 10px 18px; border: 0; border-radius: 8px;
    font-size: 0.958em; font-weight: 700; font-family: inherit; cursor: pointer;
}
.sp-dlg-btns button:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
.sp-dlg-ok { background: #0284c7; color: #fff; }
.sp-dlg-ok:hover { background: #0369a1; }
.sp-dlg-danger .sp-dlg-ok { background: #dc2626; }
.sp-dlg-danger .sp-dlg-ok:hover { background: #b91c1c; }
.sp-dlg-success .sp-dlg-ok { background: #059669; }
.sp-dlg-success .sp-dlg-ok:hover { background: #047857; }
.sp-dlg-cancel { background: #f3f4f6; color: #4b5563; }
.sp-dlg-cancel:hover { background: #e5e7eb; }

@media (max-width: 480px) {
    .sp-dlg { padding: 20px 18px 16px; }
    .sp-dlg-btns button { flex: 1; }
}