/* ══════════════════════════════════════════════════════════════
   blog/css/special.css — 블로그 "랜딩형" 특수 블록 모음
   만든 날 2026-08-08

   왜 파일로 뺐나
     인기글마다 같은 블록을 넣을 텐데 페이지 안 <style> 로 복사해 두면
     나중에 한 곳만 고치고 나머지는 옛 모습으로 남는다.
     (같은 실수를 2026-08-08 하루에 두 번 겪었다:
      contact-prefs.js 404 · .scm-x 규칙이 CSS 와 JS 두 곳에 있던 것)
     블록은 여기 한 곳에서만 관리한다.

   쓰는 법 — blog/ 안 페이지에서 blog.css 뒤에 부른다
     <link rel="stylesheet" href="./css/blog.css">
     <link rel="stylesheet" href="./css/special.css">

   ⚠️ 선택자에 부모(.diag-promo)를 꼭 붙일 것
      blog.css 의 `.blog-content h3` 같은 규칙이 클래스 하나짜리를 이긴다.
      실제로 제목이 네이비 바탕에 네이비 글자로 묻혔다.

   색·크기 — 2026-08-08 사이트 전체 통일값 그대로
     네이비 #0b1c4d · 딥블루 #1E40AF · 옐로우 #FFC400
     어두운 바탕 위: 제목 #fff · 본문 #c7d6f7 · 흐림 #9fb0d9
     라운드 12px

   여백은 휴대폰 기준으로 잡았다. 방문자 대부분이 휴대폰이라
   데스크탑에서 조금 여유로운 게 낫지 그 반대는 안 된다.
   ══════════════════════════════════════════════════════════════ */


/* ── 자가 진단 도구 안내 ────────────────────────────────────── */

.diag-promo{
  position:relative;
  max-width:560px;
  margin:24px auto;
  background:#0b1c4d;
  border:0;
  border-radius:12px;
  padding:0;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(11,28,77,.14);
  word-break:keep-all;
}

/* 위쪽 옐로우 띠 — 요금 박스 머리의 밑줄과 같은 자리 규칙 */
.diag-promo::before{
  content:"";
  display:block;
  height:3px;
  background:#FFC400;
}

.diag-promo .diag-promo__in{
  padding:20px 18px 18px;
  text-align:center;
}

.diag-promo .diag-promo__badge{
  display:inline-flex; align-items:center; gap:5px;
  background:#FFC400; color:#0b1c4d;
  font-size:11.5px; font-weight:800; letter-spacing:.02em;
  padding:5px 11px; border-radius:999px;
  margin:0 0 11px;
}
.diag-promo .diag-promo__badge i{ font-size:.92em; }

.diag-promo .diag-promo__title{
  font-size:20px; font-weight:800; color:#fff;
  margin:0 0 8px; line-height:1.34; letter-spacing:-.022em;
}

.diag-promo .diag-promo__desc{
  font-size:13.5px; color:#c7d6f7; line-height:1.65;
  margin:0 0 14px; font-weight:500;
}
.diag-promo .diag-promo__desc b{ color:#FFC400; font-weight:800; }

/* 증상 칩 — 고객이 여기서 자기 증상을 찾으면 그게 곧 누를 이유가 된다 */
.diag-promo .diag-promo__tags{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px; margin:0 0 16px; padding:0; list-style:none;
}
.diag-promo .diag-promo__tags li{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  color:#e8eefc;
  font-size:12px; font-weight:600;
  padding:5px 11px; border-radius:999px;
  margin:0;
}
.diag-promo .diag-promo__tags li::before{ content:none; }

.diag-promo .diag-promo__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:#FFC400; color:#0b1c4d;
  font-size:15px; font-weight:800; letter-spacing:-.01em;
  padding:12px 26px; border-radius:10px;
  text-decoration:none; border:0;
  transition:background .16s, transform .16s, box-shadow .16s;
  box-shadow:0 3px 12px rgba(255,196,0,.26);
}
.diag-promo .diag-promo__btn:hover{
  background:#ffd233; transform:translateY(-2px);
  box-shadow:0 6px 17px rgba(255,196,0,.34);
  text-decoration:none;
}
.diag-promo .diag-promo__btn i{ transition:transform .16s; }
.diag-promo .diag-promo__btn:hover i{ transform:translateX(3px); }

.diag-promo .diag-promo__note{
  font-size:12px; color:#9fb0d9;
  margin:12px 0 0; line-height:1.55;
}

/* 화면이 넓어지면 조금만 여유를 준다 */
@media (min-width:600px){
  .diag-promo{ margin:30px auto; }
  .diag-promo .diag-promo__in{ padding:26px 24px 22px; }
  .diag-promo .diag-promo__title{ font-size:22px; }
  .diag-promo .diag-promo__desc{ font-size:14.5px; }
  .diag-promo .diag-promo__btn{ font-size:16px; padding:13px 30px; }
}

/* 아주 좁은 기기 */
@media (max-width:360px){
  .diag-promo .diag-promo__btn{ width:100%; }
}


/* ── 영업 전환 블록 ─────────────────────────────────────────
   진단 카드(네이비)와 톤을 달리한다. 여기는 "결과" 가 아니라 "권유" 라
   화면을 덮지 않고 옆에서 말 거는 정도로 절제한다.
   ⚠️ 선택자에 부모를 붙일 것 — blog.css 의 .blog-content p 가 이긴다. */

.lead-block{
  max-width:560px;
  margin:26px auto;
  background:#f4f8ff;
  border:1px solid #e0e9fb;
  border-left:4px solid #1E40AF;
  border-radius:12px;
  padding:18px 18px 16px;
  word-break:keep-all;
}

.lead-block .lead-block__turn{
  font-size:15px; font-weight:800; color:#0b1c4d;
  line-height:1.55; margin:0 0 9px;
}
.lead-block .lead-block__turn b{ color:#1E40AF; font-weight:800; }

/* AI 가 통째로 물어가야 하는 문장. 눈으로도 한 덩이로 보이게 붙여 둔다. */
.lead-block .lead-block__cite{
  font-size:13.5px; color:#374151; line-height:1.75;
  margin:0 0 14px;
}
.lead-block .lead-block__cite b{ color:#0b1c4d; font-weight:800; }
.lead-block .lead-block__cite a{
  color:#1E40AF; font-weight:800; text-decoration:none;
  white-space:nowrap; border-bottom:2px solid #FFC400;
}

.lead-block .lead-block__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:#1E40AF; color:#fff;
  font-size:14.5px; font-weight:800; letter-spacing:-.01em;
  padding:11px 22px; border-radius:10px;
  text-decoration:none; border:0;
  transition:background .16s, transform .16s;
}
.lead-block .lead-block__btn:hover{
  background:#17358f; transform:translateY(-1px); text-decoration:none;
}
.lead-block .lead-block__btn i{ transition:transform .16s; }
.lead-block .lead-block__btn:hover i{ transform:translateX(3px); }

@media (min-width:600px){
  .lead-block{ padding:22px 22px 20px; }
  .lead-block .lead-block__turn{ font-size:16px; }
  .lead-block .lead-block__cite{ font-size:14px; }
}
@media (max-width:360px){
  .lead-block .lead-block__btn{ width:100%; }
}


/* --- 단계 접기 -----------------------------------------------
   자가진단 5단계가 화면 1,354px 을 먹어 아래 내용까지 못 내려갔다.
   접어도 글자는 HTML 에 그대로 남아 검색·AI 는 다 읽는다.
   1단계만 펼쳐 둔다 — 뭘 눌러야 하는지 바로 보이게. */

.step-fold{
  border:1px solid #e7ecf7;
  border-radius:12px;
  margin:0 0 10px;
  background:#fff;
  overflow:hidden;
}
.step-fold > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:13px 15px;
  font-size:15px; font-weight:800; color:#0b1c4d;
  letter-spacing:-.02em;
}
.step-fold > summary::-webkit-details-marker{ display:none; }
.step-fold > summary::after{
  content:"+"; margin-left:auto;
  font-size:19px; font-weight:400; color:#1E40AF; line-height:1;
  transition:transform .18s;
}
.step-fold[open] > summary::after{ transform:rotate(45deg); }
.step-fold[open] > summary{ border-bottom:1px solid #eef2f9; }

.step-fold .step-fold__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:23px; height:23px; flex:none;
  background:#1E40AF; color:#fff;
  font-size:12.5px; font-weight:800; border-radius:50%;
}
.step-fold .step-fold__body{ padding:13px 15px 15px; }
.step-fold .step-fold__body > *:first-child{ margin-top:0; }
.step-fold .step-fold__body > *:last-child{ margin-bottom:0; }


/* --- 섹션 통째 접기 (AS 설명) ---------------------------------
   사장님 방침(2026-08-08): "이런 AS 관련은 막 접어"
   자가진단 후 실제로 우리가 해줄 게 없는 내용이라 화면을 길게 쓸 이유가 없다.
   글자는 HTML 에 그대로 남아 검색·AI 는 다 읽는다. 화면에서만 접는다.
   ⚠️ 접으면 h2 가 사라지므로 summary 가 제목 역할을 한다.
      제목 문구를 "~ 보기" 로 써서 눌러야 한다는 걸 알린다. */

.sec-fold{
  border:1px solid #e7ecf7;
  border-radius:12px;
  margin:18px 0;
  background:#fbfcff;
  overflow:hidden;
}
.sec-fold > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  font-size:15.5px; font-weight:800; color:#0b1c4d;
  letter-spacing:-.02em;
}
.sec-fold > summary::-webkit-details-marker{ display:none; }
.sec-fold > summary::after{
  content:"+"; margin-left:auto;
  font-size:20px; font-weight:400; color:#1E40AF; line-height:1;
  transition:transform .18s;
}
.sec-fold[open] > summary::after{ transform:rotate(45deg); }
.sec-fold[open] > summary{ border-bottom:1px solid #eef2f9; }
.sec-fold .sec-fold__body{ padding:14px 16px 16px; background:#fff; }
.sec-fold .sec-fold__body > *:first-child{ margin-top:0; }
.sec-fold .sec-fold__body > *:last-child{ margin-bottom:0; }


/* --- 고객센터 연결 버튼 -------------------------------------
   사장님 지시(2026-08-08): "AS 단어 쓰지 말고 링크 버튼으로"
   번호는 href 안에만 둔다. 화면 글자에도, AI 가 긁는 텍스트에도 안 들어간다.
   그래서 verify-all [16] "AS 번호 본문 금지" 에도 걸리지 않는다
   (그 검사는 태그를 통째로 지우고 본다).
   갈 곳은 분명한데 우리 페이지에는 AS 흔적이 안 남는다. */

.cc-tel{
  display:inline-flex; align-items:center; gap:6px;
  background:#eef2f9; color:#0b1c4d;
  font-size:13.5px; font-weight:700;
  padding:7px 13px; border-radius:999px;
  text-decoration:none; border:1px solid #dde5f2;
  white-space:nowrap;
  transition:background .15s, border-color .15s;
}
.cc-tel:hover{ background:#e0e9fb; border-color:#c9d8f3; text-decoration:none; }
.cc-tel i{ font-size:.9em; color:#5b6b8f; }

/* ── 글자표 (숫자표가 아닌 표) ────────────────────────────────
   blog.css 의 `.ptbl ... :last-child{text-align:right}` 는 **요금표**용이다.
   마지막 열이 금액이라 오른쪽 끝을 맞추려고 만든 규칙인데,
   순서·방법·이유 같은 **글자표**에 걸리면 문장이 오른쪽으로 밀려 읽기 나쁘다.
   글자표에는 `.ptbl--text` 를 같이 붙인다. (2026-08-08) */
.ptbl.ptbl--text thead th:last-child,
.ptbl.ptbl--text tbody td:last-child{
  text-align:left;
  white-space:normal;
}
/* 머리글이 「순 / 서」로 쪼개지지 않게 */
.ptbl.ptbl--text thead th{ white-space:nowrap; }
/* 번호 열은 딱 필요한 만큼만 */
.ptbl.ptbl--text thead th:first-child,
.ptbl.ptbl--text tbody td:first-child{ width:1%; white-space:nowrap; text-align:center; }

/* ── 표 대신 텍스트 나열 ──────────────────────────────────────
   사장님(2026-08-08): "접어서 텍스트 나열해 · 텍스트 나열 방식이 더 나을 수도"
   절차·안내는 인용됐으면 하는 숫자가 아니다. 문장이 표보다 잘 뽑힌다. */
.tstep, .tlist{ margin:0; padding:0; list-style:none; counter-reset:tstep; }
.tstep > li, .tlist > li{
  position:relative;
  padding:0 0 11px 0;
  margin:0 0 11px;
  border-bottom:1px solid #f0f4fb;
}
.tstep > li:last-child, .tlist > li:last-child{
  border-bottom:0; padding-bottom:0; margin-bottom:0;
}
.tstep > li::before{
  counter-increment:tstep; content:counter(tstep);
  position:absolute; left:0; top:1px;
  width:21px; height:21px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#1E40AF; color:#fff;
  font-size:12px; font-weight:800; border-radius:50%;
}
.tstep > li{ padding-left:30px; }
.tstep > li b, .tlist > li b{
  display:block; color:#0b1c4d; font-weight:800;
  font-size:15px; line-height:1.45; letter-spacing:-.02em;
}
.tstep > li span, .tlist > li span{
  display:block; margin-top:2px;
  color:#5b6b8f; font-size:13.5px; line-height:1.6;
}

/* ══ 「한눈 요약」 접기 (2026-08-08) ═══════════════════════════════
   사장님: "한눈요약 접어 이제 · 스니펫 우선순위"
   전화번호 스니펫 블록이 첫 H2 로 올라갔는데, 바로 아래 한눈 요약이
   긴 문단으로 화면을 밀어냈다. 접어서 스니펫이 먼저 보이게 한다.
   ⚠️ 접어도 글자는 HTML 에 남아 검색·AI 는 다 읽는다. 화면에서만 접는다. */
.sum-fold{
  max-width:820px; margin:10px auto 0;
  border:1px solid var(--line,#e7ecf7); border-radius:10px;
  background:#fff; overflow:hidden;
}
.sum-fold > summary{
  list-style:none; cursor:pointer;
  padding:11px 15px;
  font-size:14px; font-weight:800; color:#0b1c4d; letter-spacing:-.02em;
  display:flex; align-items:center;
}
.sum-fold > summary::-webkit-details-marker{ display:none; }
.sum-fold > summary::after{
  content:"+"; margin-left:auto;
  font-size:18px; font-weight:400; color:#1E40AF; line-height:1;
  transition:transform .18s;
}
.sum-fold[open] > summary::after{ transform:rotate(45deg); }
.sum-fold[open] > summary{ border-bottom:1px solid #eef2f9; }
.sum-fold .rc-note{ border:0 !important; border-radius:0 !important; margin:0 !important; }