/* ---- MAIN ---- */
    .contact-main {
      font-family: var(--font-sans);
      background: var(--bg-page);
      color: var(--text-primary);
      font-size: 16px;
      line-height: 1.7;
      padding-bottom: 120px;
      word-break: keep-all;
    }
    .contact-main * { box-sizing: border-box; }

    /* ---- HERO ---- */
    .contact-hero {
      background: var(--navy);
      color: #fff;
      padding: 80px 0 100px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .contact-hero .inner { position: relative; z-index: 1; }
    .contact-hero-kicker {
      font-size: 12px; font-weight: 600;
      color: var(--gold-light);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 20px;
      display: block;
    }
    .contact-hero-title {
      font-family: var(--font-serif);
      font-size: 38px; font-weight: 700;
      margin: 0 0 16px; line-height: 1.3;
      letter-spacing: -0.01em;
    }
    .pasan-hero-line {
      width: 40px; height: 2px;
      background: var(--gold);
      margin: 0 auto 24px;
    }
    .contact-hero-desc {
      font-size: 16px; color: rgba(255,255,255,0.72);
      max-width: 640px; margin: 0 auto;
      font-weight: 400; line-height: 1.8;
    }

    /* ---- CONTACT WRAPPER ---- */
    .contact-wrap {
      margin-top: 36px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      min-width: 0;
    }
    .form-card, .board-card, .info-card, .contact-form, .form-group { min-width: 0; }

    /* ---- BOARD SECTION ---- */
    .board-card {
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      padding: 32px;
    }
    .board-head {
      display: flex; justify-content: space-between; align-items: flex-end;
      margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
    }
    .board-title {
      font-family: var(--font-serif);
      font-size: 20px; font-weight: 700; color: var(--navy);
    }
    .board-note { font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 540px; }

    .board-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
    .board-table thead { border-bottom: 2px solid var(--border-light); }
    .board-table th { padding: 12px 10px; text-align: left; font-weight: 700; color: var(--navy); font-size: 13px; }
    .board-table td { padding: 14px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; font-size: 14px; line-height: 1.6; }
    .board-table th:nth-child(2), .board-table td:nth-child(2) { width: 44%; word-break: break-word; }
    .board-row { cursor: pointer; transition: background 0.2s; }
    .board-row:hover { background-color: var(--bg-warm); }

    .board-badge {
      display: inline-block; padding: 3px 10px;
      font-size: 11px; font-weight: 700;
      color: var(--gold); background: var(--gold-muted);
      letter-spacing: 0.04em;
    }
    .board-status { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
    .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #ccc; }
    .board-status.done { color: var(--success); } .board-status.done .status-dot { background: var(--success); }
    .board-status.checking { color: var(--warning); } .board-status.checking .status-dot { background: var(--warning); }
    .board-status.new, .board-status.wait { color: var(--navy); } .board-status.new .status-dot, .board-status.wait .status-dot { background: var(--navy); }
    .board-title-cell,
    .m-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: 100%;
    }
    .board-title-text,
    .m-title span:last-child {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .board-mobile { display: none; flex-direction: column; gap: 10px; }
    .mobile-card {
      background: var(--bg-card); border: 1px solid var(--border-light);
      padding: 16px; cursor: pointer; transition: 0.2s;
    }
    .mobile-card:hover { border-color: var(--gold); }
    .m-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; color: var(--text-muted); }
    .m-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .m-foot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }

    .detail-row { display: none; }
    .detail-box { padding: 20px; border-top: 1px solid var(--border-subtle); background: var(--bg-warm); }

    .qna-content { margin-top: 8px; }
    .qna-meta { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
    .q-box { background: var(--bg-card); padding: 16px; border: 1px solid var(--border-light); margin-bottom: 10px; font-size: 14px; }
    .a-box { background: #f0fdf4; padding: 16px; border: 1px solid #dcfce7; color: #166534; font-size: 14px; }
    .a-title { font-weight: 800; margin-bottom: 6px; display: block; }
    .a-empty { padding: 15px; color: var(--text-muted); background: var(--bg-warm); border: 1px solid var(--border-subtle); border-radius: 12px; font-size: 14px; }

    /* ---- BOARD: search / author / pagination ---- */
    .board-search { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
    .board-search-input { flex: 1; min-width: 200px; padding: 11px 14px; border: 1px solid var(--border-light); border-radius: 8px; font-size: 15px; font-family: var(--font-sans); }
    .board-search-input:focus { outline: none; border-color: var(--gold); }
    .board-search-btn, .board-search-reset { padding: 11px 18px; border-radius: 8px; cursor: pointer; font-weight: 700; font-family: var(--font-sans); font-size: 14px; }
    .board-search-btn { background: var(--navy); color: #fff; border: none; }
    .board-search-reset { background: var(--bg-warm); color: var(--text-muted); border: 1px solid var(--border-light); }

    .board-author { display: block; font-size: 13px; color: var(--text-primary); }
    .board-author-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .board-empty { padding: 22px 14px; text-align: center; color: var(--text-muted); }

    .board-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 22px; }
    .board-pagination .page-btn {
      min-width: 38px; padding: 8px 12px; border: 1px solid var(--border-light);
      background: var(--bg-card); color: var(--text-primary); border-radius: 6px;
      cursor: pointer; font-size: 14px; font-family: var(--font-sans);
    }
    .board-pagination .page-btn:hover:not(:disabled):not(.is-active) { border-color: var(--gold); }
    .board-pagination .page-btn.is-active { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; cursor: default; }
    .board-pagination .page-btn:disabled { opacity: 0.4; cursor: default; }
    .board-pagination .page-ellipsis { padding: 0 4px; color: var(--text-muted); }

    /* ---- FORM CARD ---- */
    .form-card {
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      padding: 40px;
      border-radius: var(--radius-lg);
    }
    #reserve { scroll-margin-top: calc(var(--header-h) + 18px); }
    .form-header { text-align: center; margin-bottom: 32px; }
    .form-title {
      font-family: var(--font-serif);
      font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 10px;
    }
    .form-desc { font-size: 16px; color: var(--text-muted); }
    .form-altcta { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
    .form-altcta a { color: var(--gold); font-weight: 700; text-decoration: underline; }
    .form-trust-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 24px;
      row-gap: 6px;
      line-height: 1.6;
      margin-top: 18px;
      padding: 12px 16px;
      background: rgba(21,128,61,0.07);
      border: 1px solid rgba(21,128,61,0.18);
      font-size: 13px;
      color: #15803d;
      font-weight: 700;
      border-radius: var(--radius-md);
    }
    .form-trust-bar i { margin-right: 4px; }
    .submit-sla {
      text-align: center;
      font-size: 13px;
      color: var(--text-muted);
      margin: 4px 0 0;
    }

    .contact-form { display: grid; gap: 20px; max-width: 680px; margin: 0 auto; }
    .contact-form[aria-busy="true"] { cursor: wait; }
    .contact-form-notice,
    .contact-receipt-note {
      padding: 14px 16px;
      border: 1px solid rgba(21,128,61,0.24);
      border-radius: var(--radius-md);
      background: rgba(21,128,61,0.08);
      color: #166534;
      font-size: 14px;
      line-height: 1.65;
    }
    .contact-form-notice--error {
      border-color: rgba(185,28,28,0.22);
      background: rgba(185,28,28,0.07);
      color: #991b1b;
    }
    .form-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .form-group { display: flex; flex-direction: column; gap: 8px; }
    .form-label { font-size: 14px; font-weight: 700; color: var(--navy); }
    .form-input, .form-select, .form-textarea {
      padding: 13px 14px;
      border: 1px solid var(--border-light);
      font-size: 16px; font-family: var(--font-sans);
      transition: var(--transition); width: 100%; line-height: 1.55;
      background: var(--bg-card);
      border-radius: var(--radius-md);
      max-width: 100%;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--gold); outline: none;
      box-shadow: 0 0 0 3px var(--gold-muted);
    }
    .form-textarea { min-height: 150px; resize: vertical; }

    .privacy-wrap {
      background: var(--bg-warm); border: 1px solid var(--border-light);
      padding: 16px; font-size: 13px; color: var(--text-muted); line-height: 1.8;
      border-radius: var(--radius-md);
    }
    .privacy-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }

    .submit-btn {
      width: 100%; padding: 16px;
      background: var(--navy); color: #fff;
      border: none; font-size: 16px; font-weight: 700;
      cursor: pointer; transition: var(--transition);
      margin-top: 8px; font-family: var(--font-sans);
      border-radius: var(--radius-md);
    }
    .submit-btn:hover { background: var(--navy-mid); }
    .submit-btn:disabled { opacity: 0.68; cursor: wait; }

    /* ---- INFO CARD ---- */
    .info-card {
      background: var(--bg-card); padding: 32px;
      border: 1px solid var(--border-light);
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
      border-radius: var(--radius-lg);
    }
    .info-item h4 {
      font-family: var(--font-serif);
      font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px;
    }
    .info-item p { font-size: 14px; color: var(--text-secondary); margin: 0; }

    .contact-next-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 26px 30px;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      background: var(--navy);
      color: #fff;
    }
    .contact-next-kicker {
      display: block;
      margin-bottom: 4px;
      color: var(--gold-light);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }
    .contact-next-card strong { display: block; font-size: 18px; }
    .contact-next-card p { margin: 5px 0 0; color: rgba(255,255,255,0.7); font-size: 13px; }
    .contact-next-call {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 0 20px;
      border-radius: var(--radius-md);
      background: var(--gold);
      color: var(--navy);
      font-weight: 700;
      white-space: nowrap;
    }

    @media (max-width: 768px) {
      .contact-main {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
      }
      .contact-main .inner { padding-left: 16px; padding-right: 16px; }
      .contact-main, .contact-wrap, .form-card, .contact-form { width: 100%; max-width: 100%; overflow-x: clip; }
      .contact-hero { padding: 52px 0 60px; }
      .contact-hero-title { font-size: 28px; }
      .contact-hero-desc br { display: none; }
      .contact-wrap { margin-top: 24px; gap: 20px; }
      .board-table { display: none; }
      .board-mobile { display: flex; }
      .form-card,
      .board-card,
      .info-card { padding: 22px 18px; }
      .form-header { margin-bottom: 24px; }
      .contact-form { gap: 16px; }
      .form-grid-two { grid-template-columns: 1fr; gap: 14px; }
      .board-head { align-items: flex-start; }
      .form-trust-bar { display: grid; justify-content: stretch; text-align: left; gap: 6px; padding: 12px 14px; }
      .form-textarea { min-height: 132px; }
      .privacy-check { align-items: flex-start; }
      .privacy-check input { flex: 0 0 auto; margin-top: 5px; }
      .submit-btn { min-height: 52px; padding: 14px 16px; }
      .info-card { grid-template-columns: 1fr; }
      .info-item { border-bottom: 1px solid var(--border-subtle); padding-bottom: 16px; }
      .info-item:last-child { border-bottom: none; padding-bottom: 0; }
      .contact-next-card { align-items: stretch; flex-direction: column; padding: 22px 18px; }
      .contact-next-card strong { font-size: 16px; }
      .contact-next-call { width: 100%; }

      .m-title { font-size: 16px; }
      .m-foot { font-size: 14px; }
      .lock-msg, .board-note, .submit-sla, .privacy-wrap { font-size: 14px; }
      .form-desc { font-size: 16px; }
      .form-trust-bar { font-size: 14px; }
      .lock-input,
      .form-input, .form-select, .form-textarea { font-size: 16px; line-height: 1.6; }
    }

    @media (max-width: 390px) {
      .contact-main .inner { padding-left: 12px; padding-right: 12px; }
      .contact-hero { padding: 44px 0 52px; }
      .contact-hero-title { font-size: 26px; }
      .form-card,
      .board-card,
      .info-card { padding: 20px 14px; }
    }

    /* === 2026 redesign: de-card + CTA ===
       Loaded after core.css, so these rules win the cascade.
       Goal: hairline de-card direction, gold primary CTA, calmer board,
       stronger hero trust line, clearer privacy consent. */

    /* Hero: trim bottom padding, add first-screen trust chips */
    .contact-hero { padding: 80px 0 80px; }
    .contact-hero-trust {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 18px;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
    }
    .contact-hero-trust li {
      position: relative;
      font-size: 13px;
      font-weight: 700;
      color: var(--gold-light);
      letter-spacing: 0.01em;
    }
    .contact-hero-trust li:not(:first-child)::before {
      content: "·";
      position: absolute;
      left: -11px;
      color: rgba(255,255,255,0.35);
      font-weight: 400;
    }

    /* Wrapper rhythm: more air, hairline-separated sections */
    .contact-wrap { margin-top: 48px; gap: 40px; }

    /* Form card → page-laid content (de-card) */
    .form-card {
      background: var(--bg-card);
      border: none;
      border-top: 1px solid rgba(10,15,30,.08);
      border-radius: 0;
      box-shadow: none;
      padding: 48px 0 8px;
    }
    .form-title { font-size: 26px; margin-bottom: 12px; }
    .form-desc { color: var(--text-secondary); line-height: 1.7; }
    .form-header { margin-bottom: 28px; }
    .form-altcta { margin-top: 12px; }

    /* Trust bar → light centered meta line (drop green box) */
    .form-trust-bar {
      background: none;
      border: none;
      border-radius: 0;
      padding: 6px 0 0;
      gap: 8px 18px;
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 600;
      line-height: 1.6;
    }
    .form-trust-bar i { color: var(--gold); margin-right: 5px; }

    /* Privacy consent: open hairline block, consent line emphasized */
    .privacy-wrap {
      background: transparent;
      border: none;
      border-top: 1px solid var(--border-light);
      border-bottom: 1px solid var(--border-light);
      border-radius: 0;
      padding: 18px 0;
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.8;
    }
    .privacy-check {
      margin-top: 14px;
      padding-left: 12px;
      border-left: 2px solid var(--gold);
      font-weight: 700;
      color: var(--text-primary);
    }

    /* Submit → page's only gold button (primary CTA) */
    .submit-btn {
      background: var(--gold);
      color: var(--navy);
      min-height: 54px;
      font-size: 17px;
      font-weight: 800;
    }
    .submit-btn:hover { background: var(--gold-light); }

    /* Board → de-card, lower visual weight than the form */
    .board-card {
      background: transparent;
      border: none;
      border-top: 1px solid var(--border-light);
      border-radius: 0;
      padding: 48px 0 8px;
    }
    .board-title { font-size: 18px; }

    /* Mobile board cards stay as info cards: soften corners */
    .mobile-card { border-radius: var(--radius-md); padding: 18px; }

    /* Phone CTA card: keep navy, mark with gold hairline as alt path */
    .contact-next-card {
      border: 1px solid var(--border-light);
      border-top: 2px solid var(--gold);
      padding: 28px 32px;
    }

    @media (max-width: 768px) {
      .form-card,
      .board-card { padding: 32px 0 0; }
      .contact-wrap { gap: 28px; margin-top: 32px; }
      .form-trust-bar { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; font-size: 13px; }
      .privacy-wrap { font-size: 14px; }
      .contact-next-card { padding: 24px 18px; }
      .contact-next-call { min-height: 54px; width: 100%; }
    }

    /* === 2026 mobile audit: contact (append; wins cascade) ===
       Mobile-first refinements. All scoped to <=640px / <=480px so desktop
       (>=993px) is untouched. The earlier redesign block (no media query)
       reset hero padding back to 80px and kept mobile-card as a box, so these
       final rules re-assert compact, de-carded mobile values. */

    /* Board kicker (new, light hierarchy — works at all widths) */
    .board-kicker {
      display: block;
      font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--gold);
      margin-bottom: 6px;
    }

    @media (max-width: 640px) {
      /* Hero: re-assert compact padding + lift desc contrast on first screen */
      .contact-hero { padding: 48px 0 52px; }
      .contact-hero-desc { color: rgba(255,255,255,0.82); }

      /* Tighten first-screen rhythm; de-emphasize duplicate trust copy */
      .form-header { margin-bottom: 20px; }
      .form-altcta { font-size: 14px; color: var(--text-secondary); }

      /* Board search: input full row 1, buttons share row 2, tap-friendly */
      .board-search { gap: 8px; }
      .board-search-input { flex: 1 1 100%; min-width: 0; min-height: 44px; }
      .board-search-btn, .board-search-reset { flex: 1 1 0; min-height: 44px; }

      /* DE-CARD mobile board list: hairline-separated rows, no boxes */
      .board-mobile { gap: 0; }
      .mobile-card {
        background: transparent; border: 0;
        border-bottom: 1px solid var(--border-light);
        border-radius: 0; padding: 14px 2px;
      }
      .mobile-card:hover { border-color: var(--border-light); }
      .board-mobile .mobile-card:last-child { border-bottom: 0; }
      .m-head { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
      .m-head span:last-child { color: var(--text-muted); }
      .m-title { font-size: 16px; line-height: 1.45; }
      .m-foot { font-size: 13px; margin-top: 8px; }
      .board-status { font-size: 13px; }
      .board-note, .qna-meta, .submit-sla, .privacy-wrap { font-size: 14px; }

      /* DE-CARD / flatten expanded detail: one tinted answer block only */
      .detail-row .detail-box { padding: 14px 2px; background: transparent; }
      .qna-meta { margin-bottom: 10px; line-height: 1.7; }
      .q-box {
        background: transparent; border: 0;
        border-left: 2px solid var(--gold);
        border-radius: 0; padding: 4px 0 4px 12px;
        margin-bottom: 12px; font-size: 15px;
      }
      .a-box { font-size: 15px; border-radius: var(--radius-md); }

      /* Keep phone CTA's gold accent on the plain navy block */
      .contact-next-card { border-top: 2px solid var(--gold); }
    }

    @media (max-width: 480px) {
      .contact-hero { padding: 44px 0 48px; }
      .contact-hero-title { font-size: 25px; }
      /* One message per screen: hero already states the 3 promises; drop the
         duplicate inline trust bar on the smallest phones (markup preserved) */
      .form-trust-bar { display: none; }
      .privacy-wrap { padding: 16px 0; }
      .privacy-check { align-items: flex-start; line-height: 1.6; }
    }

/* 검증 후속 보정 — 보조 캡션 대비(AA) + 페이지네이션 탭 타깃 */
@media (max-width: 640px) {
  .board-note,
  .qna-meta,
  .privacy-wrap,
  .m-head span:last-child { color: var(--text-secondary); }
  .board-pagination .page-btn { min-height: 44px; }
}

/* =====================================================================
   tnwjd page-match — D:/tnwjd/contact.html 참조 비율 정렬
   목적: 히어로/폼카드/게시판카드/안내카드의 레이아웃·여백·타이포·반응형을
   참조본 인라인 스타일 비율에 맞춤. (스킨이 소유한 카드 배경/라운드/그림자,
   버튼 색/라운드, 히어로 배경은 건드리지 않음 — 전역 !important 가 처리.)
   참조본 순서는 board→form 이지만 현재 마크업은 form→board 라 그대로 둠.
   ===================================================================== */

/* ---- HERO: 참조 정렬(중앙), 패딩/타이포 비율 ---- */
.contact-hero { padding: 80px 0 100px; }
.contact-hero .inner { max-width: 760px; }
.contact-hero-kicker {
  font-size: 12px;
  letter-spacing: 0.15em;
  margin-bottom: 20px;
}
.contact-hero-title {
  font-size: 38px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.pasan-hero-line { margin: 0 auto 24px; }
.contact-hero-desc {
  font-size: 16px;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.8;
}
/* 히어로 신뢰 칩: 참조 톤에 맞춘 중앙 정렬 라인 */
.contact-hero-trust { margin-top: 22px; gap: 8px 18px; }

/* ---- WRAPPER: 참조 리듬(margin-top 48 / gap 40) ---- */
.contact-wrap { margin-top: 48px; gap: 40px; }

/* ---- FORM CARD: 참조 내부 패딩/헤더/타이포 ----
   (스킨이 카드 배경·라운드·그림자를 다시 입히므로, 콘텐츠가 카드 안쪽에
    들어오도록 참조본 패딩 40px 으로 복원. de-card 의 0 좌우 패딩을 대체.) */
.form-card { padding: 40px; }
.form-header { text-align: center; margin-bottom: 32px; }
.form-title { font-size: 24px; line-height: 1.3; margin-bottom: 10px; }
.form-desc { font-size: 15px; line-height: 1.7; }
.form-altcta { margin-top: 12px; font-size: 13px; }
.contact-form { max-width: 680px; margin: 0 auto; gap: 20px; }
.form-grid-two { gap: 20px; }
.form-group { gap: 8px; }
.form-label { font-size: 14px; }
.privacy-wrap { padding: 16px; font-size: 13px; line-height: 1.8; }
.privacy-check { margin-top: 10px; font-size: 14px; }
.submit-btn { padding: 16px; font-size: 16px; }
.submit-sla { margin-top: 6px; font-size: 13px; }

/* ---- BOARD CARD: 참조 내부 패딩/헤더/타이포 ---- */
.board-card { padding: 32px; }
.board-head { margin-bottom: 20px; }
.board-title { font-size: 20px; line-height: 1.3; }
.board-note { font-size: 13px; line-height: 1.7; }
.board-table { font-size: 14px; }
.board-table th { padding: 12px 10px; font-size: 13px; }
.board-table td { padding: 14px 10px; font-size: 14px; line-height: 1.6; }

/* ---- INFO / 전화 안내 카드: 참조 내부 패딩 ---- */
.info-card { padding: 32px; gap: 24px; }
.contact-next-card { padding: 28px 32px; gap: 24px; }

/* ---- 반응형: 참조 @768 비율(패딩 축소·1열·중앙) ---- */
@media (max-width: 768px) {
  .contact-hero { padding: 60px 0 80px; }
  .contact-hero-title { font-size: 28px; }
  .contact-wrap { margin-top: 32px; gap: 28px; }
  .form-card { padding: 24px; }
  .board-card { padding: 24px; }
  .info-card { padding: 24px; grid-template-columns: 1fr; gap: 18px; }
  .form-grid-two { grid-template-columns: 1fr; gap: 14px; }
  .form-header { margin-bottom: 24px; }
  .contact-form { gap: 16px; }
  .contact-next-card { padding: 24px 18px; }
}

@media (max-width: 480px) {
  .contact-hero { padding: 48px 0 60px; }
  .contact-hero-title { font-size: 26px; }
  .form-card,
  .board-card,
  .info-card { padding: 20px 16px; }
}

/* ===== TNWJD reference-fidelity: control radius ===== */
.contact-next-call { border-radius: 12px; }

/* ===== 비밀글 잠금 게시판 (목록은 보이되 본문은 비번 입력 후 열람) ===== */
.board-lock { color: var(--gold-text, #806731); font-size: 11px; margin-right: 6px; opacity: .9; }
.detail-locked { padding: 18px 20px; }
.locked-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--navy, #0a0f1e); margin-bottom: 14px; }
.locked-head i { color: var(--gold-text, #806731); }
.locked-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.locked-pw, .locked-receipt, .locked-phone4 {
  height: 44px; padding: 0 14px; border: 1px solid var(--border-light, #e8e5e0); border-radius: var(--ksl-control-radius, 10px);
  font-size: 14px; background: #fff; color: var(--navy, #0a0f1e);
}
.locked-pw { flex: 1 1 200px; min-width: 160px; }
.locked-open {
  height: 44px; padding: 0 24px; border: 0; border-radius: var(--ksl-control-radius, 10px);
  background: var(--gold-light, #d4ab4e); color: var(--navy, #0a0f1e); font-size: 14px; font-weight: 800; cursor: pointer;
  transition: background .2s ease;
}
.locked-open:hover { background: var(--gold-hover, #e2c86e); }
.locked-open:disabled { opacity: .6; cursor: default; }
.locked-alt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.locked-alt-label { font-size: 12px; color: var(--text-muted, #777); white-space: nowrap; }
.locked-receipt { flex: 1 1 180px; min-width: 150px; }
.locked-phone4 { width: 110px; }
.locked-msg { margin: 10px 0 0; font-size: 13px; color: #9a3324; min-height: 1em; }
@media (max-width: 560px) {
  .locked-row, .locked-alt { flex-direction: column; align-items: stretch; }
  .locked-open { width: 100%; }
  .locked-phone4 { width: 100%; }
}