/* SoloTel 사용자화면 스타일 — 레거시 _secret/user/_head.php 인라인 CSS 에서 분리 */
@font-face {
  font-family: "Paperlogy";
  src: url("/assets/fonts/Paperlogy-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
    :root{
      --pageW: 1024px;
      --pad: 14px;
      --line: #e5e7eb;
      --ink: #111827;
      --muted: #6b7280;
      --bg: #ffffff;
      --quickH: 74px;
    }
    html{ -webkit-text-size-adjust:100%; }
    body{
      font-family: "Paperlogy", "Noto Sans KR", system-ui, sans-serif;
      margin:0;
      color: var(--ink);
      background: var(--bg);
      font-size: 14px;
      line-height: 1.45;
    }
    a{ color: inherit; text-decoration: none; }
    a:hover{ text-decoration: underline; }

    .page{ max-width: var(--pageW); margin: 0 auto; padding: 0 var(--pad); }

    @media (max-width: 520px){
      :root{ --pad: 10px; }
      input, select, textarea{ font-size:16px; }
      input::placeholder, textarea::placeholder{ font-size:16px; }
    }

    /* ✅ 반응형용: PC/MO 동시 출력 제어 */
    .only-pc{ display:block; }
    .only-mo{ display:none; }
    @media (max-width:520px){
      .only-pc{ display:none; }
      .only-mo{ display:block; }
    }

    /* ===== topmini ===== */
    .topBanner{
      width:100%;
      border-bottom:1px solid var(--line);
      color:#fff;
      position:relative;
      z-index:80;
    }
    .topBanner .inner{
      max-width:var(--pageW);
      margin:0 auto;
      padding:8px var(--pad);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .topBanner .title{ font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .topBanner a{ color:#fff; text-decoration:none; font-weight:900; }
    .topBanner a:hover{ text-decoration:underline; }
    .tb-close{
      border:1px solid rgba(255,255,255,.35);
      background:transparent;
      color:#fff;
      border-radius:10px;
      padding:6px 10px;
      font-weight:900;
      cursor:pointer;
    }

    /* ===== header (✅ topmini 포함 sticky) ===== */
    .headerWrap{
      position:sticky;
      top:0;
      z-index:70;
      background:#fff;
      border-bottom:1px solid var(--line);
    }

    .menuRow1{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      white-space:nowrap;
      min-width: 0;
    }
    .brand a{ text-decoration:none; }
    .brandMark{
      width:34px;height:34px;
      display:inline-flex;align-items:center;justify-content:center;
      border:1px solid var(--line);
      border-radius:10px;
      background:#fff;
      font-weight:900;
      flex:0 0 auto;
    }
    .brandName{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .authArea{
      display:flex; align-items:center; gap:8px;
      white-space:nowrap; justify-content:flex-end;
    }
    .authBtn{
      display:inline-flex;align-items:center;
      padding:6px 10px;
      border:1px solid var(--line);
      border-radius:10px;
      background:#fff;
      font-weight:900;
      text-decoration:none;
    }
    .authBtn:hover{ background:#f8fafc; text-decoration:none; }

    .hamburger{
      display:none;
      border:1px solid var(--line);
      background:#fff;
      border-radius:10px;
      padding:8px 10px;
      font-weight:900;
      cursor:pointer;
    }
    @media (max-width:520px){
      .authArea{ display:none; }
      .hamburger{ display:inline-flex; }
      /* 상단 메뉴줄은 감춘다 — 햄버거 서랍에 같은 메뉴가 그대로 있다. */
      .menuRow2{ display:none; }
    }

    .menuRow2{ padding:6px 0 10px; }
    .mainMenu{
      display:flex; gap:14px; align-items:center;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      scroll-behavior:smooth;
    }
    .mainMenu::-webkit-scrollbar{ display:none; }
    .mm-item{
      position:relative;
      display:inline-flex; align-items:center;
      padding:8px 2px;
      white-space:nowrap;
      font-weight:900;
      color:var(--muted);
      text-decoration:none;
      flex:0 0 auto;
    }
    .mm-item:hover{ color:var(--ink); text-decoration:none; }
    .mm-item.active{ color:var(--ink); }
    .mm-item.active::after{
      content:"";
      position:absolute; left:0; right:0; bottom:-2px;
      height:2px; background:var(--ink); border-radius:999px;
    }

    /* ===== drawer ===== */
    .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:9998; }
    .overlay.show{ display:block; }
    .drawer{
      position:fixed; top:0; left:0; bottom:0;
      width:min(320px,86vw);
      background:#fff;
      transform:translateX(-105%);
      transition:transform .18s ease;
      z-index:9999;
      display:flex; flex-direction:column;
    }
    .drawer.show{ transform:translateX(0); }
    .drawerHead{
      padding:14px 14px 12px;
      border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .drawerTitle{
      display:flex; align-items:center; gap:10px;
      font-weight:900; min-width:0;
    }
    .drawerTitle .brandMark{ border-radius:10px; }
    .drawerTitle .brandName{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .drawerClose{
      border:1px solid var(--line);
      background:#fff;
      border-radius:10px;
      padding:6px 10px;
      font-weight:900;
      cursor:pointer;
    }
    .drawerBody{ padding:8px 0; overflow:auto; }
    .dItem{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 14px;
      font-weight:900;
      color:var(--ink);
      text-decoration:none;
      border-bottom:1px solid #f1f5f9;
    }
    .dItem:hover{ background:#f8fafc; text-decoration:none; }
    .dItem.active{ background:#11182708; }
    .dItem .chev{ color:var(--muted); }
    .dSep{
      height:10px;
      background:#f8fafc;
      border-top:1px solid #f1f5f9;
      border-bottom:1px solid #f1f5f9;
    }

    /* ===== main padding ===== */
    .main{ padding:12px 0 18px; }
    @media (max-width:520px){
      .main{ padding-bottom: calc(var(--quickH) + 18px); }
    }

    /* ==========================================================
      MAIN SLIDER (✅ transform 제거 / --bw로만 스케일)
    ========================================================== */
    .mainBannerWrap{ width:100%; border-bottom:1px solid var(--line); }

    #mainBanner{ --mainH: 420px; }
    #mainBannerMo{ --mainH: 390px; }

    .mainBannerViewport{ position:relative; overflow:hidden; width:100%; }
    .mainBannerTrack{
      display:flex;
      width:100%;
      transform: translateX(0%);
      transition: transform .28s ease;
      will-change: transform;
    }
    .mb-slide{
      flex: 0 0 100%;
      width:100%;
      min-height: var(--mainH);
      position:relative;
      background-color: #000;
      background-repeat:no-repeat;
      background-position:center center;
      background-size: cover;
      cursor: default;
    }

    .mb-inner{
      height:100%;
      min-height: var(--mainH);
      display:flex;
      align-items:stretch;
    }

    .mb-content{
      position:relative;
      width:100%;
      height:100%;
      padding:0;
      display:flex;
      align-items:stretch;
      justify-content:center;
    }
    .mb-box{
      width:100%;
      height:100%;
      position:relative;
      display:flex;
      align-items:stretch;
      justify-content:stretch;
    }

    /* ✅ 여기서 핵심:
       - 캔버스는 slide 전체를 “스테이지”로 삼는다.
       - banner.php가 만들어 둔 bnOutBox(absolute, %좌표)가 이 부모 기준으로 그대로 배치됨
       - 폰트는 var(--bw)로만 스케일(PC는 1024까지, MO는 현재폭) */
    .mb-canvas{
      position:relative;
      width:100%;
      height:100%;
      transform:none !important;
      transform-origin: initial !important;
      pointer-events:auto;
      --bw: 1024px; /* JS에서 실제값으로 교체 */
    }

    /* 출력 요소 힌트(없어도 되지만 안전) */
    .mb-canvas .bnOutBox{ position:absolute; }

    /* dots */
    .mb-ctrl{
      position:absolute;
      left:0; right:0;
      bottom: 10px;
      z-index: 5;
      pointer-events:none;
    }
    .mb-ctrl .page{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .mb-dots{
      display:flex;
      gap:6px;
      align-items:center;
      justify-content:center;
      width:100%;
      pointer-events:auto;
    }
    .mb-dot{
      width:8px;height:8px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.55);
      background: rgba(255,255,255,.25);
      cursor:pointer;
      transition: width .18s ease, background .18s ease, border-color .18s ease;
    }
    .mb-dot.active{
      width:28px; /* 길게 */
      background: rgba(255,255,255,.95);
      border-color: rgba(255,255,255,.95);
    }

    /* ===== popup ===== */
    .popOv{
      position:fixed; inset:0;
      background: rgba(0,0,0,.35);
      display:none;
      z-index: 9994;
    }
    .popOv.show{ display:block; }
    .popStack{
      position:fixed; inset:0;
      pointer-events:none;
      z-index: 9996;
    }
    .popCard{
      pointer-events:auto;
      position:absolute;
      width: min(520px, 92vw);
      background:#fff;
      border:1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 12px 30px rgba(0,0,0,.18);
      overflow:hidden;
    }
    .popHead{
      padding:10px 12px;
      border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      background:#fff;
    }
    .popTitle{
      margin:0;
      font-weight:900;
      font-size:12px;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .popClose{
      border:1px solid var(--line);
      background:#fff;
      border-radius:10px;
      padding:6px 10px;
      font-weight:900;
      cursor:pointer;
    }
    .popBody{ padding:12px; }
    .popBody img{ max-width:100%; height:auto; display:block; }
    .popContent{ word-break:break-word; line-height:1.7; white-space: pre-wrap; }

    /* ===== bottomlayer overlay ===== */
    .blOv{
      position:fixed; inset:0;
      background: rgba(0,0,0,.35);
      display:none;
      z-index: 9995;
    }
    .blOv.show{ display:block; }

    /* Mobile bottomlayer */
    .bottomLayerMobile{
      position:fixed;
      left:0; right:0;
      bottom:0;
      z-index: 10001;
      display:none;
      transform: translateY(100%);
      transition: transform .22s ease;
    }
    .bottomLayerMobile.show{ display:block; transform: translateY(0); }

    .blBar{
      background:#111827;
      color:#fff;
      border-top-left-radius: 18px;
      border-top-right-radius: 18px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      overflow:hidden;
      border-top:1px solid rgba(255,255,255,.12);
    }
    .blHead{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .blTitle{
      font-weight:900;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .blTitle a{ color:#fff; text-decoration:none; }
    .blClose{
      border:1px solid rgba(255,255,255,.35);
      background:transparent;
      color:#fff;
      border-radius:10px;
      padding:6px 10px;
      font-weight:900;
      cursor:pointer;
    }
    .blBody{ padding:10px 12px 12px; }
    .blBody img{ max-width:100%; height:auto; display:block; }
    .blContent{ word-break:break-word; line-height:1.6; opacity:.95; white-space: pre-wrap; }

    /* PC bottomlayer */
    .blPcPop{
      position:fixed;
      z-index: 10001;
      width: min(380px, 92vw);
      max-height: min(72vh, 720px);
      overflow:auto;

      right: 18px;
      bottom: 18px;

      background:#fff;
      border:1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 12px 30px rgba(0,0,0,.2);

      display:none;
      transform: translateY(140%);
      transition: transform .22s ease;
      will-change: transform;
    }
    .blPcPop.show{ display:block; transform: translateY(0); }
    @media (min-width: 1025px){
      .blPcPop{ right: calc((100vw - var(--pageW))/2 + var(--pad)); }
    }

    .blPcHead{
      padding:10px 12px;
      border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      background:#fff;
    }
    .blPcTitle{
      font-weight:900;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .blPcClose{
      border:1px solid var(--line);
      background:#fff;
      border-radius:10px;
      padding:6px 10px;
      font-weight:900;
      cursor:pointer;
    }
    .blPcBody{ padding:12px; }
    .blPcBody img{ max-width:100%; height:auto; display:block; }
    .blPcContent{ word-break:break-word; line-height:1.6; white-space: pre-wrap; }

    /* ===== PC 상담 플로팅 ===== */
    .pcConsult{
      position: fixed;
      z-index: 120;
      bottom: 18px;
      right: 18px;
      display:none;
    }
    @media (min-width: 521px){ .pcConsult{ display:block; } }
    @media (min-width: 1025px){
      .pcConsult{ right: calc((100vw - var(--pageW))/2 + var(--pad)); }
    }
    .pcC-btn{
      width: 54px; height: 54px;
      border-radius: 18px;
      border: 0;
      background: #FEE500;
      box-shadow: 0 10px 24px rgba(0,0,0,.14);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .pcC-btn svg{ width: 26px; height: 26px; fill: #3B1E1E; }
    .pcC-panel{
      position:absolute;
      right:0;
      bottom: 62px;
      width: 200px;
      border:1px solid var(--line);
      border-radius: 12px;
      background:#fff;
      box-shadow: 0 12px 30px rgba(0,0,0,.18);
      padding: 10px;
      display:none;
    }
    .pcC-panel.show{ display:block; }
    .pcC-title{ font-weight: 900; margin: 0 0 8px; }
    .pcC-item{
      display:flex; align-items:center; justify-content:space-between; gap:8px;
      padding:8px 10px;
      border:1px solid var(--line);
      border-radius: 12px;
      margin-top:8px;
      text-decoration:none;
      font-weight:900;
      color: var(--ink);
      background:#fff;
    }
    .pcC-item:hover{ background:#f8fafc; text-decoration:none; }
    .pcC-ad{
      margin-top:10px;
      border:1px dashed var(--line);
      border-radius: 12px;
      padding:10px;
      color: var(--muted);
      font-weight:900;
    }
    .brandLogo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 auto;
  text-decoration:none;
}
.brandLogo svg{ display:block; }
:root{
  --jpxpmu1y: #111827;
}

/* ── 푸터 · 모바일 퀵바 (레거시 _foot.php 인라인 CSS 에서 분리) ── */
/* ✅ 모바일 하단(퀵바/상담카드) 때문에 본문이 가려지지 않게 여백 추가 */
:root{ --quickH: 72px; } /* quickNav 대략 높이 */
@media (max-width:520px){
  body{
    padding-bottom: calc(var(--quickH) + 18px + env(safe-area-inset-bottom));
  }
}

/* ===== QUICK NAV (mobile only) ===== */
.quickNav{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index: 200;
  background:#fff;
  border-top:1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  display:none;
}
@media (max-width:520px){
  .quickNav{ display:block; }
}

.quickInner{
  padding: 8px var(--pad);
  display:flex;
  gap: 8px;
  align-items: stretch;
  justify-content: space-between;
}
.qItem{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;

  border:1px solid var(--line);
  border-radius: 14px;
  background:#fff;
  padding: 10px 6px;

  text-decoration:none;
  color: var(--muted);
  font-weight:900;
  min-width: 0;
}
.qItem:hover{ background:#f8fafc; text-decoration:none; color: var(--ink); }
.qItem.active{
  color: var(--ink);
  border-color: #111827;
  box-shadow: 0 1px 0 rgba(17,24,39,.04);
}
.qIcon{
  width: 22px;
  height: 22px;
  display:block;
  fill: currentColor;
}
.qTxt{
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}

.qItem.consult{
  background: #FEE500;
  border-color: #FEE500;
  color: #3B1E1E;
}
.qItem.consult:hover{
  background: #ffe433;
  border-color: #ffe433;
  color: #3B1E1E;
}
.qItem.consult .qIcon{ fill:#3B1E1E; }
.qItem.consult:active{ transform: translateY(1px); }

/* ===== site footer ===== */
.siteFoot{
  background:#f3f4f6;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 20px 0 22px;
  box-sizing: border-box;
}

.siteFoot .fTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 0 0 10px;
}

.siteFoot .fLogo{ display:block; height: 28px; width:auto; }

.siteFoot .fTextLogo{
  font-weight:900;
  text-decoration:none;
  color: var(--ink);
}

.siteFoot .fApps{
  display:flex;
  gap:10px;
  align-items:center;
}
.siteFoot .fAppImg{
  display:block;
  height: 40px;
  width:auto;
}

.siteFoot .fLinks{
  margin-top: 4px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.siteFoot .fLinks a,
.siteFoot .fLinks button{
  border:0;
  padding:0;
  background:transparent;
  color: #6b7280;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
}
.siteFoot .fLinks a:hover,
.siteFoot .fLinks button:hover{
  color: var(--ink);
}

/* ===== footer info ===== */
.siteFoot .fInfo{
  margin-top: 12px;
  line-height:1.8;
  font-size: 12px;
}

/* ✅ 한 줄 + 라벨/값 스타일 명확히 */
.siteFoot .fLine{
  display:block;
  margin-bottom: 8px;
}

/* ✅ 라벨: bold 제거 */
.siteFoot .fLabel{
  font-weight:400;
  color:#94a3b8;
  margin-right: 8px;   /* ✅ 라벨-값 간격 */
}

/* ✅ 값: bold */
.siteFoot .fVal,
.siteFoot .fValLink{
  font-weight:900;
  color:#6b7280;
  word-break:break-word;
  overflow-wrap:anywhere;
  text-decoration:none;
}

.siteFoot .fValLink:hover{ color: var(--ink); }

/* ✅ 모바일: 앱버튼만 아래로 / 정보는 한 줄 유지 */
@media (max-width:520px){
  .siteFoot .fTop{
    flex-direction: column;
    align-items:flex-start;
    gap:10px;
  }
  .siteFoot .fApps{ width:100%; }
  .siteFoot .fAppImg{ height: 40px; }

  .siteFoot .fLine{
    display:block;     /* 한 줄 */
    margin-bottom: 10px;
  }
}

/* ===== 이메일무단수집거부 레이어 ===== */
#emailOv{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.35) !important;
  z-index: 9997 !important;
  display: none;
}
#emailOv.show{ display:block !important; }

#emailPop{
  position: fixed !important;
  left:50% !important;
  top:50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(420px, 92vw) !important;
  background:#fff !important;
  border:1px solid var(--line, #e5e7eb) !important;
  border-radius:16px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
  overflow:hidden !important;
  z-index: 9998 !important;
  display:none;
}
#emailPop.show{ display:block !important; }

.emailHead{
  padding:12px 14px;
  border-bottom:1px solid var(--line, #e5e7eb);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.emailTitle{
  margin:0;
  font-weight:900;
  font-size:14px;
}
.emailClose{
  border:1px solid var(--line, #e5e7eb);
  background:#fff;
  border-radius:10px;
  padding:7px 10px;
  font-weight:900;
  cursor:pointer;
}
.emailBody{
  padding:14px;
  color:#111827;
  font-weight:500;
  font-size:14px;
  line-height:1.75;
  white-space: pre-wrap;
}


/* ══════════════════════════════════════════════════════════════════
   게시판 (bd-*) · 상품 (pd-*) — 새로 만든 사용자 화면
   ══════════════════════════════════════════════════════════════════ */

.bd, .pd{ padding:18px 0 40px; }
.bd-head, .pd-head{ display:flex; align-items:center; gap:10px; margin:0 0 14px; flex-wrap:wrap; }
.bd-title, .pd-title{ font-size:20px; font-weight:800; margin:0; flex:1 1 auto; }
.pd-back{ color:var(--muted,#6b7280); text-decoration:none; }
.bd-empty{ text-align:center; color:var(--muted,#6b7280); padding:48px 16px; }

.bd-flash{ padding:10px 13px; border-radius:9px; margin:0 0 14px; border-left:3px solid; }
.bd-flash--ok { background:#ecfdf5; border-color:#047857; color:#065f46; }
.bd-flash--err{ background:#fef2f2; border-color:#b91c1c; color:#991b1b; }

.bd-btn{ display:inline-flex; align-items:center; gap:5px; padding:8px 15px; border:1px solid var(--line,#e5e7eb);
         border-radius:9px; background:#fff; color:var(--ink,#111827); font:inherit; font-weight:700;
         text-decoration:none; cursor:pointer; }
.bd-btn:hover{ background:#f8fafc; text-decoration:none; }
.bd-btn--primary{ background:#111827; border-color:#111827; color:#fff; }
.bd-btn--primary:hover{ background:#000; color:#fff; }

/* ── 게시판 설정 (관리자에게만 보인다) ──
   게시판이 놓인 자리에서 바로 고친다. 평소에는 버튼 하나로만 보인다. */
.bd-set{ position:relative; flex:0 0 auto; }
.bd-set > summary{ list-style:none; font-size:13px; padding:7px 12px; color:var(--muted,#6b7280); }
.bd-set > summary::-webkit-details-marker{ display:none; }
.bd-set[open] > summary{ background:#111827; border-color:#111827; color:#fff; }

.bd-set-panel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40; width:340px; max-width:calc(100vw - 32px);
  padding:16px; border:1px solid var(--line,#e5e7eb); border-radius:12px;
  background:#fff; box-shadow:0 12px 32px rgba(17,24,39,.14); text-align:left;
}
.bd-set-head{ margin:0 0 12px; font-size:13px; font-weight:800; color:#111827; }
.bd-set-head code{ font-weight:700; color:#6b7280; }
.bd-set-head span{ display:block; margin-top:2px; font-size:11.5px; font-weight:600; color:#9ca3af; }

.bd-set-row{ display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:12.5px; font-weight:700; }
.bd-set-row > span{ flex:0 0 58px; color:#374151; }
.bd-set-row .bd-input{ flex:1 1 auto; min-width:0; padding:7px 10px; font-size:13px; }
.bd-set-row--check{ gap:7px; font-weight:600; color:#374151; }
.bd-set-row--check > input{ flex:0 0 auto; }

.bd-set-note{ margin:0 0 12px; font-size:11.5px; line-height:1.6; color:#9ca3af; font-weight:400; }
.bd-set-note b{ color:#6b7280; }
.bd-set-foot{ display:flex; gap:7px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line,#e5e7eb); }
.bd-set-foot .bd-btn{ padding:7px 12px; font-size:12.5px; }

@media (max-width:640px){
  .bd-set-panel{ position:fixed; left:16px; right:16px; top:auto; width:auto; }
}

/* 게시판 분류 */
.bd-cats{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.bd-cat-link{ padding:6px 13px; border:1px solid var(--line,#e5e7eb); border-radius:999px;
              color:var(--muted,#6b7280); text-decoration:none; font-weight:700; }
.bd-cat-link.on{ background:#111827; border-color:#111827; color:#fff; }
.bd-cat{ display:inline-block; padding:1px 7px; border-radius:999px; background:#eef2f7;
         color:#374151; font-size:12px; font-weight:700; }
.bd-badge{ display:inline-block; padding:1px 7px; border-radius:999px; background:#111827;
           color:#fff; font-size:12px; font-weight:700; }
.bd-count{ display:inline-block; min-width:18px; padding:0 5px; border-radius:999px;
           background:#fee2e2; color:#b91c1c; font-size:12px; font-weight:800; text-align:center; }
.bd-stars{ color:#f59e0b; }

/* 목록 */
.bd-list{ list-style:none; margin:0; padding:0; border-top:2px solid #111827; }
.bd-list li{ display:flex; align-items:center; gap:10px; padding:13px 4px;
             border-bottom:1px solid var(--line,#e5e7eb); }
.bd-list li.is-notice{ background:#fafbfc; }
.bd-list li a{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px;
               color:var(--ink,#111827); text-decoration:none; }
.bd-list li a:hover .bd-subject{ text-decoration:underline; }
.bd-subject{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-when{ color:var(--muted,#6b7280); font-size:12px; flex:0 0 auto; }

/* FAQ 아코디언 */
.bd-faq{ border-top:2px solid #111827; }
.bd-faq-item{ border-bottom:1px solid var(--line,#e5e7eb); }
.bd-faq-item > summary{ padding:14px 4px; cursor:pointer; font-weight:700; display:flex; gap:7px; align-items:center; }
.bd-faq-item[open] > summary{ color:#1d4ed8; }
.bd-faq-item .bd-post-body{ padding:0 4px 16px; }

/* 후기 카드 */
.bd-cards{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.bd-card{ display:flex; flex-direction:column; border:1px solid var(--line,#e5e7eb); border-radius:12px;
          overflow:hidden; background:#fff; color:inherit; text-decoration:none; }
.bd-card:hover{ text-decoration:none; box-shadow:0 6px 18px rgba(17,24,39,.08); }
.bd-card-img{ display:block; height:150px; background:#f3f4f6 center/cover no-repeat; }
.bd-card-body{ display:flex; flex-direction:column; gap:4px; padding:12px; }
.bd-card-body strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 본문 */
.bd-post{ border-top:2px solid #111827; padding:18px 4px; }
.bd-post-title{ font-size:18px; font-weight:800; margin:0 0 6px; display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.bd-post-meta{ color:var(--muted,#6b7280); padding-bottom:14px; border-bottom:1px solid var(--line,#e5e7eb); }
.bd-post-body{ padding:18px 0; line-height:1.8; word-break:break-word; }
.bd-post-body img{ max-width:100%; height:auto; }
.bd-post-body table{ width:100%; border-collapse:collapse; }
.bd-post-body table th, .bd-post-body table td{ border:1px solid var(--line,#e5e7eb); padding:7px 9px; }
.bd-files{ display:flex; gap:10px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--line,#e5e7eb); }
.bd-files img{ max-width:100%; border-radius:10px; }

/* 댓글 */
.bd-comments{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line,#e5e7eb); }
.bd-comments h3{ font-size:14px; font-weight:800; margin:0 0 12px; }
.bd-cmt{ padding:10px 0; border-bottom:1px solid #f1f2f4; }
.bd-cmt p{ margin:4px 0 0; }
.bd-cmt-form{ display:flex; gap:8px; align-items:flex-start; margin-top:14px; }
.bd-cmt-form textarea{ flex:1 1 auto; }

/* 입력 */
.bd-form{ border-top:2px solid #111827; padding-top:16px; }
.bd-row{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid #f1f2f4; }
.bd-label{ flex:0 0 100px; font-weight:700; padding-top:7px; }
.bd-row > *:not(.bd-label){ flex:1 1 auto; min-width:0; }
.bd-input{ width:100%; padding:9px 11px; border:1px solid var(--line,#e5e7eb); border-radius:9px;
           font:inherit; background:#fff; }
.bd-input:focus{ outline:2px solid rgba(29,78,216,.22); outline-offset:-1px; border-color:#1d4ed8; }
.bd-foot{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:18px; }
.bd-pw{ display:flex; gap:8px; justify-content:center; max-width:340px; margin:14px auto 0; }

/* 페이지 번호 */
.bd-pager{ display:flex; gap:5px; justify-content:center; align-items:center; margin:26px 0 0; flex-wrap:wrap; }
.bd-pager a, .bd-pager span{ min-width:34px; padding:7px 10px; text-align:center;
  border:1px solid var(--line,#e5e7eb); border-radius:9px; color:var(--ink,#111827); text-decoration:none; }
.bd-pager a:hover{ background:#f8fafc; text-decoration:none; }
.bd-pager .on{ background:#111827; border-color:#111827; color:#fff; font-weight:800; }

@media (max-width:520px){
  .bd-row{ flex-direction:column; gap:5px; }
  .bd-label{ flex-basis:auto; padding-top:0; }
  .bd-list li{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ── 상품 ── */
.pd-carrier{ padding:2px 9px; border-radius:999px; background:#eef2f7; color:#374151; font-weight:800; font-size:12px; }
.pd-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.pd-card{ display:flex; flex-direction:column; border:1px solid var(--line,#e5e7eb); border-radius:14px;
          overflow:hidden; background:#fff; color:inherit; text-decoration:none; }
.pd-card:hover{ text-decoration:none; box-shadow:0 8px 22px rgba(17,24,39,.09); }
.pd-card-img{ display:block; height:170px; background:#f8fafc center/contain no-repeat; }
.pd-card-body{ display:flex; flex-direction:column; gap:6px; padding:14px; }
.pd-card-body strong{ font-size:15px; }
.pd-tags{ display:flex; gap:4px; flex-wrap:wrap; }
.pd-tag{ padding:1px 7px; border-radius:999px; background:#f3f4f6; color:#4b5563; font-size:12px; font-weight:700; }
.pd-sub{ color:var(--muted,#6b7280); font-size:12px; font-weight:700; }

.pd-caution{ border:1px solid #fde68a; background:#fffbeb; border-radius:12px; padding:14px 16px; margin:0 0 18px; }
.pd-caution img{ max-width:100%; height:auto; }

/* 왼쪽에 고르는 단계 묶음, 오른쪽에 계산 패널.
   단계 카드를 grid 자식으로 직접 두면 자동 배치가 지그재그로 채우고
   같은 행의 카드끼리 높이가 끌려간다. 그래서 한 덩어리로 감쌌다. */
.pd-pick{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr) 300px; align-items:start; }
.pd-steps{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.pd-step{ border:1px solid var(--line,#e5e7eb); border-radius:14px; padding:16px; background:#fff; }

@media (max-width:860px){ .pd-pick{ grid-template-columns:1fr; } }
.pd-step h2{ font-size:14px; font-weight:800; margin:0 0 12px; }
.pd-opts{ display:flex; gap:8px; flex-wrap:wrap; }
.pd-opt{ display:flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--line,#e5e7eb);
         border-radius:999px; cursor:pointer; font-weight:700; }
.pd-opt input{ accent-color:#111827; }
.pd-select{ width:100%; padding:10px 12px; border:1px solid var(--line,#e5e7eb); border-radius:10px;
            font:inherit; background:#fff; }

.pd-devices{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.pd-device{ cursor:pointer; }
.pd-device input{ position:absolute; opacity:0; width:0; height:0; }
.pd-device-in{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 8px;
               border:1px solid var(--line,#e5e7eb); border-radius:12px; text-align:center; }
.pd-device input:checked + .pd-device-in{ border-color:#111827; box-shadow:inset 0 0 0 1px #111827; }
.pd-device-in img{ width:70px; height:70px; object-fit:contain; }
.pd-device-in strong{ font-size:13px; }
.pd-device-in em{ font-style:normal; color:var(--muted,#6b7280); font-size:12px; }

.pd-colors{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pd-color{ display:flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--line,#e5e7eb);
           border-radius:999px; background:#fff; font:inherit; font-weight:700; cursor:pointer; }
.pd-color.on{ border-color:#111827; box-shadow:inset 0 0 0 1px #111827; }
.pd-color i{ width:14px; height:14px; border-radius:50%; border:1px solid #d1d5db; }

.pd-calc{ position:sticky; top:16px; border:1px solid var(--line,#e5e7eb); border-radius:14px;
          padding:16px; background:#fff; }
.pd-calc-row{ display:flex; justify-content:space-between; gap:10px; padding:7px 0;
              border-bottom:1px solid #f1f2f4; }
.pd-calc-total{ border-bottom:0; border-top:2px solid #111827; margin-top:6px; padding-top:12px; font-size:16px; }
.pd-calc-total b{ color:#1d4ed8; }
.pd-calc-note{ color:var(--muted,#6b7280); font-size:12px; margin:8px 0 12px; }
.pd-submit{ width:100%; padding:13px; border:0; border-radius:11px; background:#111827; color:#fff;
            font:inherit; font-size:15px; font-weight:800; cursor:pointer; }
.pd-submit:hover{ background:#000; }

.pd-summary{ display:flex; justify-content:space-between; gap:10px; padding:13px 16px; margin:0 0 16px;
             border:1px solid var(--line,#e5e7eb); border-radius:12px; background:#f8fafc; }
.pd-foot{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:18px; }
.pd-done{ text-align:center; padding:60px 16px; }
.pd-done h1{ font-size:22px; font-weight:800; margin:0 0 10px; }
.pd-no{ font-size:16px; }
.pd-done .pd-foot{ justify-content:center; }


/* 신청서의 섹션 머리글 — BCRM 신청서와 같은 묶음이다. */
.formsec{
  font-size:15px; font-weight:800; color:var(--ink, #1b1f24);
  margin:26px 0 12px; padding-bottom:8px; border-bottom:1px solid rgba(0,0,0,.09);
}
.formsec:first-child{ margin-top:0; }

/* 글쓰기 화면의 작은 안내문 — 비밀글 설명 등 */
.bd-note{
  margin:6px 0 0; font-size:12.5px; line-height:1.6; color:#6b7280;
}
.bd-note b{ color:#374151; }

/* 사이트설정에서 올린 회사 로고 */
.brandImg{ display:block; width:auto; max-height:34px; object-fit:contain; }