/* 온라인문의 (디자인: 캔버스 "동광보일러 온라인문의 페이지 검토" 제안 C). DESIGN.md: 블루=구조 · 행동, 플랫.
   색 역할: 회색=읽는 위계(흰 바탕 4.5:1 이상), 파랑=행동 · 포커스 · 고른 것, 빨강=필수 표시 · 오류, 주황=“상담중” 한 곳. */
.inq2 {
  --blue:#006dbb; --blue-dark:#00578f; --tint:#eaf3fa; --tint-2:#f5f9fd;
  --orange-text:#a84f00;
  --ink:#1c2025; --text:#333a42; --muted:#4a525c; --faint:#5b6470;
  --line:#e3e6ea; --line-2:#eef0f2; --control:#b8c0c9; --control-hover:#5b6470;
  --soft:#f4f5f6; --error:#c92a2a;
  color:var(--text); font-size:16px; line-height:1.65; letter-spacing:-.02em;
}
.inq2 ::selection { background:#cfe3f3; color:#1b1b1b; }
.inq2 :focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.inq2 * { box-sizing:border-box; }
.inq2 .wrap { max-width:1200px; width:calc(100% - 32px); margin:0 auto; }
/* 옛 공통 스타일(common/css/default.css)의 a:hover · a:focus{color:#000} 을 이기려고 링크 상태를 같이 적는다 */
.inq2 a, .inq2 a:hover, .inq2 a:focus { text-decoration:none; }

/* ── 제목: A/S 안내 등 다른 고객지원 화면의 .tit 와 같은 모양(왼쪽 세로선) ── */
.inq2 .head { padding:100px 0 0; }
.inq2 .inq-tit { position:relative; margin:0; padding-left:35px; font-size:40px; line-height:1.2; font-weight:400; letter-spacing:-.03em; color:var(--ink); font-family:inherit; }
.inq2 .inq-tit::before { content:""; position:absolute; left:0; top:7px; height:95%; width:3px; background:var(--ink); }
.inq2 .inq-tit strong { font-weight:700; }
.inq2 .head .lead { margin:20px 0 0; font-size:17px; line-height:1.7; color:var(--text); }

/* 급한 문의 · A/S 지점 찾기 띠 */
.inq2 .call { margin-top:32px; min-height:80px; padding:16px 16px 16px 28px; border-radius:12px; background:var(--blue); color:#fff; display:flex; align-items:center; gap:16px 24px; flex-wrap:wrap; }
.inq2 .call p { margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
.inq2 .call__label { font-size:15px; font-weight:700; }
.inq2 .call .call__tel, .inq2 .call .call__tel:hover, .inq2 .call .call__tel:focus { color:#fff; font-size:28px; font-weight:700; letter-spacing:-.01em; line-height:1.2; }
.inq2 .call .call__tel:hover { text-decoration:underline; text-underline-offset:5px; }
.inq2 .call__note { font-size:15px; color:rgba(255,255,255,.9); }
.inq2 .call .call__as, .inq2 .call .call__as:hover, .inq2 .call .call__as:focus { margin-left:auto; height:48px; padding:0 20px; border:1px solid rgba(255,255,255,.7); border-radius:24px; display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:15px; font-weight:700; }
.inq2 .call .call__as:hover { background:rgba(255,255,255,.12); }
.inq2 .call__as svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.inq2 .call a:focus-visible { outline-color:#fff; }

/* ── 본문 2단: 왼쪽 폼(넓게) + 오른쪽 최근 문의 현황 ── */
.inq2 .body { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:48px; padding:56px 0 140px; align-items:start; }
.inq2 .panel-head { padding-bottom:18px; border-bottom:2px solid var(--ink); display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.inq2 .panel-head h3 { margin:0; font-size:26px; font-weight:700; color:var(--ink); }
.inq2 .sub { margin:0; font-size:14px; color:var(--muted); }
.inq2 .req { color:var(--error); margin-right:3px; }

/* 단계: 번호 + 제목, 칸 사이 가는 줄 */
.inq2 fieldset.step { border:0; margin:0; padding:32px 0; border-bottom:1px solid var(--line); min-width:0; }
.inq2 fieldset.step > legend { float:left; width:100%; margin:0 0 20px; padding:0; display:flex; align-items:center; gap:12px; font-size:20px; font-weight:700; color:var(--ink); }
.inq2 fieldset.step > legend + * { clear:both; }
.inq2 .step-no { flex:none; width:28px; height:28px; border-radius:14px; background:var(--ink); color:#fff; font-size:14px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }

/* 1. 문의 종류: 네 칸 */
.inq2 .kinds { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.inq2 .kind { position:relative; min-height:104px; padding:16px; border:1px solid #d5dae0; border-radius:10px; background:#fff; display:flex; flex-direction:column; gap:6px; cursor:pointer; }
.inq2 .kind:hover { border-color:var(--control-hover); }
.inq2 .kind input, .inq2 .fam input, .inq2 .chip input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.inq2 .kind__name { font-size:16px; font-weight:700; color:var(--ink); }
.inq2 .kind__desc { font-size:13px; line-height:1.5; color:var(--muted); }
.inq2 .kind:has(input:checked) { border:2px solid var(--blue); padding:15px; background:var(--tint-2); }
.inq2 .kind:has(input:checked) .kind__name { color:var(--blue); }
.inq2 .kind:has(input:checked)::after,
.inq2 .fam:has(input:checked)::after { content:""; position:absolute; right:8px; top:8px; width:22px; height:22px; border-radius:11px; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; }
.inq2 .kind:has(input:focus-visible), .inq2 .fam:has(input:focus-visible), .inq2 .chip:has(input:focus-visible) { outline:2px solid var(--blue); outline-offset:2px; }

/* A/S 안내 · 제품 고르기: 고른 종류일 때만 펼친다 */
.inq2 .kind-as, .inq2 .prod { display:none; margin:20px 0 0; }
.inq3:has(#kind-as:checked) .kind-as { display:block; }
.inq3:has(#kind-product:checked) .prod { display:flex; }
.inq2 .kind-as { padding:14px 18px; border-radius:8px; background:var(--soft); font-size:15px; line-height:1.6; color:var(--text); }
.inq2 .kind-as a { font-weight:700; color:var(--blue); text-decoration:underline !important; text-underline-offset:3px; }

/* 제품 · 견적: 제품군 사진 칸 */
.inq2 .prod { flex-direction:column; gap:16px; padding:24px; border:1px solid var(--line-2); border-radius:12px; background:#fafbfc; }
.inq2 .prod__q, .inq2 .series__q { margin:0; font-size:17px; font-weight:700; color:var(--ink); }
.inq2 .prod__q small, .inq2 .series__q small { font-size:14px; font-weight:400; color:var(--faint); }
.inq2 .fams { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.inq2 .fam { position:relative; min-height:150px; padding:12px 8px 14px; border:1px solid #d5dae0; border-radius:10px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; cursor:pointer; text-align:center; }
.inq2 .fam:hover { border-color:var(--control-hover); }
.inq2 .fam__pic { height:84px; display:flex; align-items:center; justify-content:center; color:var(--faint); }
.inq2 .fam__pic img { max-height:84px; max-width:100%; object-fit:contain; }
.inq2 .fam__pic svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.inq2 .fam__name { font-size:14px; font-weight:500; line-height:1.35; color:var(--ink); }
.inq2 .fam:has(input:checked) { border:2px solid var(--blue); padding:11px 7px 13px; background:var(--tint-2); }
.inq2 .fam:has(input:checked) .fam__name { font-weight:700; color:var(--blue); }
.inq2 .fam:has(input:checked) .fam__pic { color:var(--blue); }

/* 세부 제품: 고른 제품군 것만(InquiryForm.cshtml 이 제품군마다 :has 규칙을 만든다) */
.inq2 .series { display:none; flex-direction:column; gap:10px; padding-top:4px; }
.inq2 .series__q { font-size:15px; font-weight:500; }
.inq2 .chips { display:flex; flex-wrap:wrap; gap:8px; }
.inq2 .chip { position:relative; min-height:44px; padding:0 16px; border:1px solid var(--control); border-radius:22px; background:#fff; display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); cursor:pointer; }
.inq2 .chip:hover { border-color:var(--control-hover); }
.inq2 .chip b { font-weight:700; letter-spacing:0; }
.inq2 .chip span { color:var(--muted); }
.inq2 .chip:has(input:checked) { border:2px solid var(--blue); padding:0 15px; background:var(--tint); color:var(--blue); }
.inq2 .chip:has(input:checked) span { color:var(--blue); }

/* 2 · 3. 입력칸 */
.inq2 .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px 16px; }
.inq2 .field label { display:block; font-size:15px; font-weight:500; color:var(--ink); margin-bottom:8px; }
.inq2 .field label .opt { font-size:14px; font-weight:400; color:var(--faint); }
.inq2 .field .ctl { width:100%; height:52px; border:1px solid var(--control); border-radius:8px; padding:0 16px; font-family:inherit; font-size:16px; color:var(--ink); background:#fff; }
.inq2 .field .ctl:hover { border-color:var(--control-hover); }
.inq2 .field textarea.ctl { height:180px; padding:14px 16px; line-height:1.6; resize:vertical; }
.inq2 .field .ctl:focus, .inq2 .field .ctl:focus-visible { outline:0; border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.inq2 .field .ctl::placeholder { color:#6b7280; opacity:1; }
.inq2 .field.full { grid-column:1 / -1; }
.inq2 .hint { margin:0 0 10px; font-size:15px; line-height:1.6; color:var(--muted); }

/* 동의: 요약은 늘 보이게 */
.inq2 .consent { margin-top:28px; padding:18px 20px; border-radius:8px; background:var(--soft); font-size:14px; line-height:1.7; color:var(--text); }
.inq2 .consent__title { margin:0; font-weight:700; color:var(--ink); }
.inq2 .consent__body, .inq2 .consent__body p { margin:4px 0 0; }
.inq2 .check { display:flex; align-items:center; gap:12px; min-height:44px; margin-top:14px; font-size:16px; font-weight:500; color:var(--ink); cursor:pointer; }
.inq2 .check input { flex:none; width:22px; height:22px; margin:0; accent-color:var(--blue); }

.inq2 .submit { margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.inq2 .submit p { margin:0; text-align:center; font-size:14px; color:var(--muted); }
.inq2 .btn-go { height:64px; border:0; border-radius:8px; background:var(--blue); color:#fff; font-family:inherit; font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:background .15s; }
.inq2 .btn-go:hover { background:var(--blue-dark); }
.inq2 .btn-go svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── 오른쪽: 최근 문의 현황(열어 볼 수 없는 현황판) ── */
.inq2 .board { position:sticky; top:24px; padding:28px; border:1px solid var(--line); border-radius:12px; background:#fff; display:flex; flex-direction:column; gap:18px; }
.inq2 .board-head h3 { margin:0 0 6px; font-size:19px; font-weight:700; color:var(--ink); }
.inq2 .board-head .sub { font-size:13px; line-height:1.5; }
.inq2 .facts { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); margin:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.inq2 .facts > div { padding:14px 0 14px 16px; border-left:1px solid var(--line); }
.inq2 .facts > div:first-child { border-left:0; padding-left:0; }
.inq2 .facts dt { font-size:13px; font-weight:400; color:var(--muted); margin:0; }
.inq2 .facts dd { margin:4px 0 0; font-size:24px; font-weight:700; color:var(--ink); line-height:1.2; font-variant-numeric:tabular-nums; }
.inq2 .facts dd em { font-style:normal; font-size:14px; font-weight:500; margin-left:2px; }
.inq2 .feed { list-style:none; margin:0; padding:0; }
.inq2 .feed li { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px 4px; border-bottom:1px solid var(--line-2); }
.inq2 .feed .d { font-size:12px; color:var(--muted); line-height:1.3; }
.inq2 .feed .d b { display:block; font-size:13px; color:var(--muted); font-weight:700; }
.inq2 .feed .t { min-width:0; display:flex; flex-direction:column; gap:2px; }
.inq2 .feed .t b { font-size:14px; color:var(--ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inq2 .feed .t span { font-size:12px; color:var(--faint); }
.inq2 .st { height:22px; padding:0 7px; border-radius:4px; display:inline-flex; align-items:center; font-size:12px; font-weight:700; white-space:nowrap; }
.inq2 .st.done { background:var(--tint); color:var(--blue); }
.inq2 .st.ing { background:#fff3e8; color:var(--orange-text); }
.inq2 .privacy-line { margin:0; font-size:13px; color:var(--muted); }
.inq2 .privacy-line a, .inq2 .privacy-line a:hover, .inq2 .privacy-line a:focus { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }

/* ── 접수 완료 ── */
.inq2 .done-box { display:none; padding:48px 0 8px; text-align:center; }
.inq2 .done-box.on { display:block; }
.inq2 .done-box__ico { width:72px; height:72px; margin:0 auto; border-radius:36px; background:var(--tint); color:var(--blue); display:flex; align-items:center; justify-content:center; }
.inq2 .done-box__ico svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.inq2 .done-box h4 { margin:16px 0 8px; font-size:30px; font-weight:700; color:var(--ink); }
.inq2 .done-box h4:focus { outline:0; }
.inq2 .done-box > p { margin:0; font-size:17px; color:var(--text); }
.inq2 .done-box .no { display:inline-flex; align-items:center; gap:8px; height:40px; margin-top:16px; padding:0 18px; border-radius:20px; background:var(--soft); color:var(--ink); font-size:15px; }
.inq2 .receipt { margin:40px 0 0; padding:28px 32px; border:1px solid var(--line); border-radius:12px; text-align:left; }
.inq2 .receipt h5 { margin:0 0 16px; font-size:18px; font-weight:700; color:var(--ink); }
.inq2 .receipt dl { margin:0; display:grid; grid-template-columns:120px minmax(0,1fr); row-gap:12px; font-size:16px; }
.inq2 .receipt dt { color:var(--muted); }
.inq2 .receipt dd { margin:0; color:var(--ink); word-break:break-all; }
.inq2 .receipt p { margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:14px; line-height:1.6; color:var(--muted); }
.inq2 .done-box .done-box__call { margin-top:24px; font-size:15px; }
.inq2 .done-box__call a, .inq2 .done-box__call a:hover, .inq2 .done-box__call a:focus { font-weight:700; color:var(--ink); }
.inq2 .done-box .done-box__acts { margin-top:32px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.inq2 .done-box__acts a { height:52px; padding:0 24px; border-radius:26px; display:inline-flex; align-items:center; font-size:16px; font-weight:700; }
.inq2 .done-box__acts .btn-line, .inq2 .done-box__acts .btn-line:focus { border:1px solid var(--control); color:var(--text); }
.inq2 .done-box__acts .btn-line:hover { border-color:var(--ink); color:var(--ink); }
.inq2 .done-box__acts .btn-ink, .inq2 .done-box__acts .btn-ink:hover, .inq2 .done-box__acts .btn-ink:focus { background:var(--ink); color:#fff; }
.inq2 .done-box__acts .btn-ink:hover { background:var(--blue); }

/* ── 좁은 화면 ── */
@media (max-width:1200px) {
  /* 다른 고객지원 화면의 .tit 처럼 가운데 · 아래 짧은 선 */
  .inq2 .inq-tit { padding-left:0; text-align:center; font-size:32px; }
  .inq2 .inq-tit::before { left:50%; top:auto; bottom:-30px; width:80px; height:2px; margin-left:-40px; }
  .inq2 .head .lead { margin-top:56px; }
}
@media (max-width:1000px) {
  .inq2 .body { grid-template-columns:1fr; gap:56px; }
  .inq2 .board { position:static; }
  .inq2 .kinds { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .inq2 .fams { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:600px) {
  .inq2 .head { padding-top:56px; }
  .inq2 .inq-tit { font-size:30px; }
  .inq2 .head .lead { font-size:15px; }
  .inq2 .call { flex-direction:column; align-items:stretch; gap:6px; padding:20px; }
  .inq2 .call p { flex-direction:column; align-items:flex-start; gap:2px; }
  .inq2 .call .call__tel { font-size:30px; }
  .inq2 .call .call__as { margin:10px 0 0; justify-content:center; }
  .inq2 .body { padding-top:48px; }
  .inq2 .panel-head h3 { font-size:22px; }
  .inq2 fieldset.step { padding:24px 0; }
  .inq2 fieldset.step > legend { font-size:17px; gap:10px; }
  .inq2 .step-no { width:24px; height:24px; font-size:13px; }
  .inq2 .kind { min-height:0; }
  .inq2 .prod { padding:16px; margin-left:-4px; margin-right:-4px; }
  .inq2 .fams { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .inq2 .fam { min-height:120px; }
  .inq2 .fam__pic { height:64px; }
  .inq2 .fam__pic img { max-height:64px; }
  .inq2 .grid2 { grid-template-columns:1fr; }
  .inq2 .board { padding:24px 20px; }
  .inq2 .receipt { padding:22px 20px; }
  .inq2 .receipt dl { grid-template-columns:90px minmax(0,1fr); }
}

/* 입력 오류 */
.inq2 .err { display:block; font-size:13px; color:var(--error); margin-top:6px; }
.inq2 .field .ctl.invalid { border-color:var(--error); box-shadow:inset 0 0 0 1px var(--error); }
.inq2 .err-summary { border:1px solid #f1c1c1; border-radius:8px; background:#fdf0f0; color:#a51d1d; padding:12px 16px; margin-top:20px; font-size:14px; }

/* 옛 게시판(보관) 머리 */
.inq2-archive-top { display:flex; justify-content:space-between; align-items:center; gap:16px; background:#f4f5f6; padding:14px 18px; margin-bottom:30px; font-size:14px; }
.inq2-archive-top a { color:#006dbb; white-space:nowrap; }