/* ============================================================
   고객센터·FAQ·필독사항 (snspang cs)
   ------------------------------------------------------------
   snspang 의 <style> 블록을 «순서 그대로» 이어 붙인 것이다.
   ⚠ 규칙 단위로 쪼개서 옮기면 안 된다. @media 안에 있던 규칙이
     밖으로 튀어나와 모바일 규칙이 데스크톱에도 걸린다 — 실제로 그렇게 깨졌다.
   ⚠ 화면마다 «한 파일»만 싣는다(x-layout 의 css 속성). 그래서 이 파일도
     머리줄·꼬리말 같은 공통 규칙을 스스로 갖고 있다. 합치지 말 것 —
     .trust 처럼 같은 이름이 화면마다 다른 뜻인 것이 있다.
   ============================================================ */


/* 웹폰트는 shell.css 한 벌로 옮겼다 (2026-09-16) — 일곱 벌 복사돼 있던 것이다 */

/* 링크입력가이드 세로 나열 (GUIDE_VERTICAL) */
.gjump{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.gjc{appearance:none;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid #e5e7eb;
  border-radius:999px;font-size:13px;font-weight:700;color:#374151;text-decoration:none;background:#fff}
.gjc:hover{border-color:var(--pc);color:var(--pc)}
.gjc .gdot{width:8px;height:8px;border-radius:50%;background:var(--pc)}
.gsec{border:1px solid #e9ecef;border-radius:14px;padding:18px 18px 16px;margin:0 0 16px;background:#fff;scroll-margin-top:80px}
.gsec-hd{display:flex;align-items:center;gap:9px;margin:0 0 12px}
.gsec-hd .gdot{width:11px;height:11px;border-radius:50%;background:var(--pc)}
.gsec-hd h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em}
.gtw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gtbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.gtbl th{background:#f8fafc;color:#64748b;font-weight:700;font-size:12.5px;text-align:left;
  padding:9px 12px;border-bottom:1px solid #e9ecef;white-space:nowrap}
.gtbl td{padding:10px 12px;border-bottom:1px solid #f1f3f5;vertical-align:top}
.gtbl tr:last-child td{border-bottom:0}
.gtbl tr.imp td{background:#fffdf5}
.gtbl code{background:#f1f5f9;border-radius:6px;padding:2px 7px;font-size:12.5px;color:#334155;word-break:break-all}
.gsteps{margin:13px 0 0;padding:0 0 0 4px;list-style:none;counter-reset:gs}
.gsteps li{position:relative;padding:0 0 0 30px;margin:0 0 8px;font-size:13.5px;line-height:1.6;counter-increment:gs}
.gsteps li::before{content:counter(gs);position:absolute;left:0;top:1px;width:20px;height:20px;
  border-radius:50%;background:#eef2ff;color:#4f46e5;font-size:11.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
@media(max-width:640px){.gsec{padding:14px 12px}.gtbl{min-width:440px}}

/* 링크입력가이드 겉모양 — 맵플레이스 guide.php 기준 */
.gfirst{background:#fffbea;border:1px solid #f5e6b8;border-radius:14px;padding:16px 18px;margin:0 0 18px}
.gfirst-hd{font-size:14.5px;font-weight:800;color:#8a6d1f;margin:0 0 9px}
.gfirst ul{margin:0;padding:0 0 0 18px}
.gfirst li{font-size:13.5px;line-height:1.75;color:#6b5a2a;margin:0 0 3px}
.gfirst li b{color:#5b4a18}
.gsec-hd .gbadge{width:26px;height:26px;border-radius:8px;background:var(--pc);color:#fff;
  font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;flex:none}
.gtbl th{background:#fffbea;color:#8a6d1f;border-bottom:1px solid #f0e3bd}
.gtbl td b{color:#1f2937}

.gok{display:flex;gap:8px;align-items:flex-start;background:#f0fdf4;border:1px solid #bbf7d0;
  border-radius:10px;padding:10px 13px;margin:12px 0 0;font-size:13px;line-height:1.65;color:#142e67}
.gok .gc{flex:none;width:18px;height:18px;border-radius:50%;background:#16a34a;color:#fff;
  font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:1px}
.gsec-hd .gbadge{color:var(--ik,#fff)}


  /* 기본값·리셋(:root·*·body·a·img·.wrap·머리띠)은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  /* 머리줄(로고줄·메뉴줄·검색) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  /* 메가 드롭다운(패널·카드·프로모) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */

  /* ===== 고객센터 ===== */
  .cshero{background:linear-gradient(120deg,#fff,#eef4ff);border-bottom:1px solid var(--line);padding:30px 0;cursor:default;}
  .cshero h1{font-size:26px;font-weight:900;letter-spacing:-.04em;color:#191c20;}
  .cshero p{font-size:14px;color:#667085;margin-top:5px;font-weight:600;}
  /* 이동 경로(.crumb) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  .cslayout{display:grid;grid-template-columns:232px 1fr;gap:36px;padding:28px 0 64px;}
  .csnav{border:1px solid var(--line);border-radius:14px;overflow:hidden;align-self:start;}
  .csnav .hd{background:var(--accent-d);color:#fff;font-weight:800;font-size:16px;padding:16px 20px;}
  .csnav a{display:block;padding:13px 20px;font-size:14px;font-weight:600;color:#555;border-top:1px solid var(--line);transition:.12s;}
  .csnav a.on{color:var(--accent-d);font-weight:800;background:var(--soft);box-shadow:inset 3px 0 0 var(--accent-d);}
  .csnav a:hover{background:#f5f8ff;color:var(--accent-d);}
  .cscontact{margin-top:20px;padding:0 4px;font-size:13px;color:#8a9099;line-height:1.85;}
  .cscontact b{display:block;color:#333;font-weight:800;font-size:14px;margin-bottom:6px;}
  .cscontact .tel{font-size:20px;font-weight:900;color:#191c20;letter-spacing:-.02em;margin:2px 0 10px;}
  .csmain h2{font-size:20px;font-weight:800;letter-spacing:-.03em;color:#191c20;margin-bottom:4px;}
  .csmain .sub{font-size:13.5px;color:#8a9099;font-weight:600;margin-bottom:18px;}
  .board .brow{display:flex;align-items:center;gap:18px;padding:17px 6px;border-top:1px solid var(--line);cursor:pointer;}
  .board .brow:first-child{border-top:2px solid #333;}
  .board .no{width:30px;text-align:center;color:#c2c2c2;font-weight:700;font-size:13px;flex:none;}
  .board .ti{flex:1;font-size:15px;font-weight:600;color:#333;letter-spacing:-.01em;}
  .board .ti .tag{color:var(--accent-d);font-weight:800;margin-right:7px;}
  .board .brow:hover .ti{color:var(--accent-d);}
  .board .dt{color:#aaa;font-size:13px;font-weight:600;flex:none;}
  /* 공지 게시판 (목록 → 상세) */
  .nview{animation:nopen .2s ease;}
  .nback{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#8a9099;margin-bottom:16px;cursor:pointer;} .nback:hover{color:var(--accent-d);}
  .nhead{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px;}
  .nhead .tag{color:var(--accent-d);font-weight:800;font-size:12.5px;}
  .nhead h3{font-size:19px;font-weight:800;color:#191c20;letter-spacing:-.02em;margin:7px 0 8px;line-height:1.45;}
  .nhead .ndate{font-size:12.5px;color:#aab2bd;font-weight:600;}
  .ncontent{font-size:14.5px;color:#3f454c;line-height:1.95;}
  .ncontent a{color:var(--accent-d);font-weight:700;text-decoration:underline;}
  .nnav{display:flex;justify-content:space-between;gap:10px;margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;}
  .nnav a{color:#556;font-weight:600;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%;} .nnav a:hover{color:var(--accent-d);}
  @keyframes nopen{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
  /* FAQ 아코디언 */
  .faqsearch{margin-bottom:16px;}
/* 제일 많이 묻는 셋 — «펼친 채로» 두는 자리.
   ⚠ 접힌 영역(<details>)은 스니펫·AI 인용 자격을 얻기 어렵다. 그래서 앞 셋만 밖에 둔다. */
.faqtop{margin:0 0 22px;display:grid;gap:10px;}
.faqtop-i{background:#fff;border:1px solid #e8ecef;border-radius:14px;padding:16px 18px;}
.faqtop-i h3{font-size:15.5px;font-weight:800;color:#1f2937;margin:0 0 7px;letter-spacing:-.02em;line-height:1.5;}
.faqtop-i p{font-size:14.5px;line-height:1.85;color:#4b5563;margin:0;word-break:keep-all;}
 .faqsearch input{width:100%;border:1px solid #e5e7eb;border-radius:11px;padding:12px 15px;font-size:14px;outline:0;transition:.14s;} .faqsearch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
  .faqitem{border-bottom:1px solid var(--line);}
  .faqq{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 4px;cursor:pointer;font-size:15px;font-weight:600;color:#333;letter-spacing:-.01em;}
  .faqq:hover{color:var(--accent-d);} .faqq .qi{color:#c2c2c2;flex:none;transition:transform .2s,color .2s;}
  .faqitem.open .faqq{color:var(--accent-d);} .faqitem.open .faqq .qi{transform:rotate(90deg);color:var(--accent-d);}
  .faqa{display:none;padding:2px 4px 20px;font-size:14px;color:#53658a;line-height:1.8;white-space:pre-line;} .faqitem.open .faqa{display:block;}
  .faqnone{padding:30px 4px;color:#aaa;font-size:14px;}
  /* 링크입력가이드 */
  .guideplat{margin-bottom:28px;}
  .guideplat h3{font-size:15px;font-weight:800;color:#191c20;margin-bottom:13px;padding-bottom:9px;border-bottom:2px solid #eaeef5;}
  .guidegrid{display:grid;grid-template-columns:1fr;gap:18px;}
  .gcard{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04);}
  .gcard.important{border-color:#fecdd3;}
  .gcard{display:block;transition:.14s;} .gcard:hover{border-color:#cfd6e4;box-shadow:0 6px 18px rgba(16,24,40,.08);}
  .gcard .gimg{background:#f7f8fa;text-align:center;padding:16px;} .gcard .gimg img{width:100%;max-width:560px;height:auto;margin:0 auto;border-radius:8px;box-shadow:0 2px 10px rgba(16,24,40,.07);display:block;}
  .gcard .gbd{padding:15px 18px;border-bottom:1px solid var(--line);} .gcard .gbd b{font-size:15.5px;font-weight:800;color:#191c20;display:block;line-height:1.4;letter-spacing:-.01em;}
  .gcard .gbd .note{font-size:12.5px;color:#e11d48;margin-top:7px;line-height:1.6;}
  .inqbox{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--soft);font-size:14px;color:#556;line-height:2;}
  /* 1:1 문의 폼 */
  .inqinfo{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:12.5px;color:#667;font-weight:600;line-height:1.7;margin-bottom:20px;}
  .inqinfo b{color:#445;}
  .inqform .inqrow2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .inqform .fld{margin-bottom:14px;}
  .inqform label{display:block;font-size:12.5px;font-weight:700;color:#556;margin-bottom:6px;}
  .inqform label em{color:#e5502f;font-style:normal;} .inqform label .opt{color:#aab2bd;font-weight:600;}
  .inqform input,.inqform select,.inqform textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 13px;font-size:14px;font-family:inherit;outline:0;background:#fff;transition:.14s;color:var(--ink);}
  .inqform textarea{min-height:130px;resize:vertical;line-height:1.6;}
  .inqform input:focus,.inqform select:focus,.inqform textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
  .inqform .bad{border-color:#e5786e;background:#fff;}
  .iqagree{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#556;font-weight:600;margin:6px 0 4px;line-height:1.55;}
  .iqagree input{width:17px;height:17px;accent-color:var(--accent);flex:none;margin-top:1px;}
  .iqagree a{color:var(--accent-d);text-decoration:underline;}
  .iqerr{color:#d0453b;font-size:12.5px;font-weight:700;min-height:16px;margin-top:9px;}
  .iqbtns{margin-top:10px;}
  .iqsubmit{background:var(--accent);color:#fff;border:0;border-radius:12px;padding:14px 32px;font-size:15px;font-weight:800;font-family:inherit;}
  .iqsubmit:hover{background:#1d4ed8;}
  .iqdone{border:1px solid #cfe0ff;background:linear-gradient(120deg,#f4f8ff,#e8f0ff);border-radius:16px;padding:32px 28px;text-align:center;}
  .iqdone .em{font-size:38px;} .iqdone h3{font-size:18px;font-weight:800;color:#1b241a;margin:8px 0 8px;} .iqdone p{font-size:13.5px;color:#53658a;line-height:1.8;}
  .iqdone .again{margin-top:18px;display:inline-block;font-size:13px;font-weight:700;color:var(--accent-d);cursor:pointer;text-decoration:underline;}
  @media(max-width:640px){.inqform .inqrow2{grid-template-columns:1fr;}}
  /* 이용 유의사항 */
  .caugrp{margin-bottom:24px;}
  .caugrp h3{font-size:15px;font-weight:800;color:#191c20;margin-bottom:12px;}
  .cauitem{display:flex;gap:13px;border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin-bottom:10px;background:#fff;}
  .cauitem .e{font-size:19px;flex:none;line-height:1.4;}
  .cauitem b{display:block;color:#1b241a;font-size:14.5px;letter-spacing:-.01em;}
  .cauitem span{font-size:13.5px;color:var(--gray);line-height:1.6;}
  .cauitem.red{background:#fff6f6;border-color:#ffdcdc;} .cauitem.amber{background:#fff9ec;border-color:#ffe6b0;} .cauitem.info{background:#f2f8fd;border-color:#d5e8f7;}
  @media(max-width:640px){.guidegrid{grid-template-columns:1fr;}}

  .pager{display:flex;justify-content:center;gap:6px;padding:26px 0 0;}
  .pager a{min-width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:700;color:#555;cursor:pointer;}
  .pager a.on{background:#111;color:#fff;border-color:#111;} .pager a:hover{border-color:#999;}

  /* 푸터 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) — 일곱 벌 복사돼 있던 것이다 */

  @media(max-width:900px){.gnb{display:none;}.cslayout{grid-template-columns:1fr;}.board .dt{display:none;}}


/* ===== 고객센터 프리미엄 리디자인 (대기업 톤 / AI티 제거) ===== */
.cshero{background:linear-gradient(120deg,#fafcff,#e8f0ff);padding:46px 0;}
.cshero h1{font-size:30px;letter-spacing:-.045em;color:#12180f;}
.cshero p{font-size:14.5px;margin-top:8px;color:#5f6b57;}
.cslayout{gap:40px;padding:32px 0 72px;}
.cssec h2{position:relative;font-size:22px;font-weight:900;color:#12180f;letter-spacing:-.04em;padding-left:16px;margin-bottom:7px;}
.cssec h2::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:4px;border-radius:3px;background:var(--accent);}
.sub{font-size:14px;color:#7d867a;font-weight:500;margin-bottom:24px;line-height:1.65;}
.csside{position:sticky;top:78px;align-self:start;}
.csnav{border-color:#e4e9f2;box-shadow:0 2px 12px rgba(16,24,40,.05);}
.csnav .hd{font-size:15px;letter-spacing:-.02em;padding:16px 20px;}
.csnav a{padding:14px 20px;color:#4a5245;border-top-color:#eaeef5;}
.cscontact{background:#fff;border:1px solid #e4e9f2;border-radius:14px;padding:18px 18px;margin-top:16px;box-shadow:0 2px 12px rgba(16,24,40,.04);}
.board .brow{padding:18px 8px;border-top-color:#eaeef5;}
.board .brow:first-child{border-top:2px solid #1b241a;}
.faqitem{border-bottom-color:#eaeef5;}
.faqq{padding:18px 4px;font-size:15px;}
.faqa{color:#4a5245;line-height:1.85;}
.caugrp{margin-bottom:32px;}
.caugrp h3{font-size:16px;font-weight:900;color:#12180f;margin-bottom:14px;letter-spacing:-.03em;}
.cauitem{gap:14px;padding:17px 18px;border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.03);align-items:flex-start;}
.cauitem .e{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-size:19px;background:#fff;border:1px solid rgba(0,0,0,.05);flex:none;}
.cauitem.red .e{background:#fff0f0;} .cauitem.amber .e{background:#fff6e6;} .cauitem.info .e{background:#eef6fd;}
.cauitem b{font-size:14.5px;margin-bottom:3px;} .cauitem span{font-size:13.5px;color:#6b7266;}
.inqinfo{background:#f4f8ff;border:1px solid #d7e3ff;border-left:3px solid var(--accent);border-radius:12px;padding:15px 18px;font-size:13px;color:#4a5245;line-height:1.75;}
.inqform label{font-size:13px;color:#3f463a;margin-bottom:7px;}
.inqform input,.inqform select,.inqform textarea{border:1px solid #e4e7e0;border-radius:10px;padding:13px 14px;font-size:14.5px;}
.inqform input:focus,.inqform select:focus,.inqform textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.13);}
.iqsubmit{border-radius:12px;padding:15px 40px;font-size:15px;box-shadow:0 6px 16px rgba(37,99,235,.22);}
.iqbtns{margin-top:8px;}
@media(max-width:820px){.cslayout{grid-template-columns:1fr;gap:22px;}.csside{position:static;}}


/* ===== 1:1 문의 폼 — 대기업 카드형 ===== */
.inqinfo{margin-bottom:18px;}
.inqform{background:#fff;border:1px solid #e6ebf5;border-radius:16px;padding:28px 28px 22px;box-shadow:0 2px 14px rgba(16,24,40,.05);}
.inqform .inqrow2{gap:16px;margin-bottom:0;}
.inqform .fld{margin-bottom:18px;}
.inqform label{font-size:13px;font-weight:700;color:#2b3128;margin-bottom:8px;}
.inqform label em{color:#e5502f;margin-left:2px;font-style:normal;}
.inqform label .opt{color:#aab2bd;font-weight:600;font-size:12px;}
.inqform input,.inqform select,.inqform textarea{background:#fafcff;border:1px solid #e4e7e0;border-radius:10px;padding:14px 15px;font-size:14.5px;}
.inqform input:focus,.inqform select:focus,.inqform textarea:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.14);}
.inqform textarea{min-height:150px;}
.iqagree{background:#f5f8ff;border:1px solid #e6ebf5;border-radius:10px;padding:13px 15px;margin-top:6px;font-size:12.5px;}
.iqbtns{margin-top:18px;padding-top:20px;border-top:1px solid #f1f3ee;display:flex;justify-content:flex-end;}
.iqsubmit{padding:15px 46px;font-size:15px;border-radius:12px;box-shadow:0 8px 18px rgba(37,99,235,.24);}
.iqsubmit:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(37,99,235,.3);}
@media(max-width:560px){.inqform{padding:20px 18px;}.iqbtns{justify-content:stretch;}.iqsubmit{width:100%;}}


/* 개인정보 동의 체크박스 정렬 교정 */
.iqagree{display:flex;align-items:flex-start;gap:11px;line-height:1.6;color:#5a6152;padding:14px 16px;}
.iqagree input{width:18px;height:18px;min-width:18px;accent-color:var(--accent);flex:0 0 18px;margin:2px 0 0;cursor:pointer;}
.iqagree > span{flex:1;min-width:0;}
.iqagree a{white-space:nowrap;}


/* 동의 체크박스 정렬 — .inqform label(0,1,1) 이기려면 명시도 상향 */
.inqform label.iqagree{display:flex;align-items:flex-start;gap:11px;line-height:1.6;color:#5a6152;padding:14px 16px;margin-bottom:0;}
.inqform label.iqagree input{width:18px;height:18px;min-width:18px;accent-color:var(--accent);flex:0 0 18px;margin:2px 0 0;cursor:pointer;}
.inqform label.iqagree > span{flex:1;min-width:0;}


/* ===== 링크입력가이드 (대기업 문서형) ===== */
.gtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.gtab{display:inline-flex;align-items:center;gap:7px;border:1px solid #e4e9f2;background:#fff;border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;color:#556;cursor:pointer;font-family:inherit;transition:.12s;}
.gtab .gdot{width:8px;height:8px;border-radius:50%;background:var(--pc,#999);}
.gtab:hover{border-color:#cfd6e4;}
.gtab.on{border-color:#2563eb;background:#eef4ff;color:#1d4ed8;}
.gpanel{display:none;} .gpanel.on{display:block;animation:gfade .2s ease;}
@keyframes gfade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.glead{display:flex;gap:11px;align-items:flex-start;background:#f6f8fc;border:1px solid #e6ebf5;border-radius:12px;padding:14px 16px;font-size:13.5px;color:#3f4a63;font-weight:600;line-height:1.65;margin-bottom:22px;}
.glead .gi{flex:none;width:20px;height:20px;border-radius:50%;background:#2563eb;color:#fff;font-size:12px;font-weight:800;font-style:italic;display:grid;place-items:center;margin-top:1px;}
.glead b{color:#1d4ed8;font-weight:800;}
.gcard{border:1px solid #e6e9f0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 2px 12px rgba(16,24,40,.05);margin-bottom:20px;}
.gcard.important{border-color:#f3c9cf;}
.ghd{display:flex;align-items:center;gap:13px;padding:16px 20px;border-bottom:1px solid #eef1f6;}
.gnum{width:32px;height:32px;flex:none;border-radius:9px;background:#eef4ff;color:#1d4ed8;font-size:13px;font-weight:800;display:grid;place-items:center;letter-spacing:-.02em;}
.ght{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ght b{font-size:15.5px;font-weight:800;color:#191c20;letter-spacing:-.01em;}
.greq{font-size:11px;font-weight:800;color:#c9532f;background:#fdf1ec;border:1px solid #f5ddd2;border-radius:6px;padding:3px 8px;}
.gnote{display:flex;gap:10px;align-items:flex-start;margin:16px 20px;background:#fff8f0;border:1px solid #ffe4c4;border-left:3px solid #f0a020;border-radius:10px;padding:12px 14px;font-size:13px;color:#7a5a2a;line-height:1.65;}
.gnote .gw{flex:none;width:19px;height:19px;border-radius:50%;background:#f0a020;color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center;margin-top:1px;}
.gimg{display:block;position:relative;background:#f7f8fb;text-align:center;padding:22px;}
.gimg img{width:100%;max-width:520px;height:auto;margin:0 auto;border-radius:10px;box-shadow:0 4px 16px rgba(16,24,40,.10);display:block;}
.gimg{cursor:zoom-in;}
@media(max-width:640px){.gimg{padding:14px;}.ghd{padding:14px 16px;}}


/* 링크가이드 - 단계/서비스표/예시 */
.gsteps{list-style:none;counter-reset:st;padding:16px 20px;margin:0;}
.gsteps li{position:relative;padding:0 0 0 30px;margin-bottom:12px;font-size:14px;color:#3f463a;line-height:1.6;counter-increment:st;}
.gsteps li:last-child{margin-bottom:0;}
.gsteps li::before{content:counter(st);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:#eef4ff;color:#1d4ed8;font-size:11px;font-weight:800;display:grid;place-items:center;}
.gsvc{padding:4px 20px 14px;}
.gsvc-row{display:flex;gap:14px;padding:11px 0;border-top:1px solid #f1f3ee;font-size:13.5px;line-height:1.5;}
.gsvc-row:first-child{border-top:0;}
.gsvc-row .s-nm{flex:none;width:130px;font-weight:800;color:#191c20;}
.gsvc-row .s-in{flex:1;min-width:0;color:#566;}
.gex{padding:16px 20px;display:flex;flex-direction:column;gap:8px;}
.gex code{display:block;background:#0f1b3d;color:#cfe0ff;font-family:Consolas,'D2Coding',monospace;font-size:12.5px;padding:10px 13px;border-radius:9px;word-break:break-all;line-height:1.5;}
.gnum.gnum-i{background:#f4f6fa;color:#556;font-size:15px;}
@media(max-width:640px){.gsvc-row{flex-direction:column;gap:3px;}.gsvc-row .s-nm{width:auto;}}


/* 링크가이드 - 큰 이미지 도형 카드 */
.gfig{border:1px solid #e6e9f0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 3px 14px rgba(16,24,40,.06);margin-bottom:22px;}
.gfig.important{border-color:#f3c9cf;}
.gfig-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid #eef1f6;}
.gfig-hd b{font-size:15.5px;font-weight:800;color:#191c20;letter-spacing:-.01em;}
.gfig-img{display:block;background:#f7f8fb;padding:24px;text-align:center;cursor:zoom-in;}
.gfig-img img{width:100%;max-width:820px;height:auto;margin:0 auto;border-radius:12px;box-shadow:0 8px 30px rgba(16,24,40,.13);display:block;}
@media(max-width:640px){.gfig-img{padding:13px;}}




/* ── 이용 방법 4단계 (todaysns.com/how 짜임) ────────────────────────────
   ⚠ 이 화면은 «막혀서 온 사람»이 읽는다. 감추는 장치(아코디언)를 쓰지 않는다 —
     자기 상황에 맞는 항목을 눈으로 훑어 찾아야 한다.
   ★ 세로 선으로 네 단계를 잇는다. 카드를 흩어 놓으면 «순서»가 안 읽힌다. */

/* 차례표 */
.hwnav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 30px;}
.hwnav a{display:block;padding:16px 15px 14px;border:1px solid #e4e9f2;border-radius:14px;background:#fff;
  text-decoration:none;transition:.15s;box-shadow:0 1px 2px rgba(16,24,40,.03);}
.hwnav a:hover{border-color:var(--accent);box-shadow:0 10px 22px rgba(16,24,40,.08);transform:translateY(-2px);}
.hwnav .ic{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--soft,#eef4ff);font-size:17px;margin-bottom:9px;}
.hwnav b{display:block;font-size:11px;font-weight:900;color:var(--accent-d);letter-spacing:.08em;}
.hwnav .n{display:block;margin-top:4px;font-size:15.5px;font-weight:900;color:#12180f;letter-spacing:-.03em;}
.hwnav .d{display:block;margin-top:4px;font-size:12.5px;color:#8a9099;font-weight:600;line-height:1.5;}

/* 타임라인 — 왼쪽 선이 네 단계를 잇는다 */
.hwline{position:relative;padding-left:34px;}
.hwline::before{content:"";position:absolute;left:12px;top:8px;bottom:34px;width:2px;
  background:linear-gradient(#dbe4f5,#eef1f6);border-radius:2px;}
.hwstep{position:relative;margin:0 0 30px;scroll-margin-top:100px;}
.hwstep:last-child{margin-bottom:20px;}

.hwhd{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.hwhd .no{position:absolute;left:-34px;top:2px;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;background:var(--accent-d);color:#fff;
  font-size:11.5px;font-weight:900;box-shadow:0 0 0 4px #fff;}
.hwhd .ht{flex:1;min-width:0;}
.hwhd b{display:block;font-size:19px;font-weight:900;color:#12180f;letter-spacing:-.04em;line-height:1.25;}
.hwhd .lead{display:block;margin-top:3px;font-size:13.5px;color:#8a9099;font-weight:600;}
.hwhd .tm{flex:none;font-size:12px;font-weight:800;color:#5b6472;background:#f2f5f9;
  border-radius:999px;padding:5px 11px;white-space:nowrap;}

.hwitems{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.hwitem{position:relative;padding:16px 18px 15px;border:1px solid #e9ecf2;border-radius:14px;background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.03);transition:.14s;}
.hwitem:hover{border-color:#d6dced;box-shadow:0 8px 18px rgba(16,24,40,.06);}
.hwitem .k{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.06em;color:#a8b0bd;
  margin-bottom:6px;}
.hwitem b{display:block;font-size:14.5px;font-weight:800;color:#1b241a;letter-spacing:-.015em;margin-bottom:6px;}
.hwitem .v{display:block;font-size:13.5px;line-height:1.75;color:#5b6472;word-break:keep-all;}

.hwcta{display:inline-block;margin-top:13px;font-size:13.5px;font-weight:800;color:var(--accent-d);
  text-decoration:none;border:1px solid #dbe4f5;border-radius:999px;padding:8px 16px;transition:.14s;background:#fff;}
.hwcta:hover{background:var(--soft,#eef4ff);border-color:var(--accent);}

/* 막히면 — 카톡 문의 띠 */
.hwhelp{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:6px 0 20px;padding:18px 20px;border-radius:16px;
  background:linear-gradient(150deg,#111827,#1f2a44);color:#fff;}
.hwhelp b{display:block;font-size:15.5px;font-weight:900;letter-spacing:-.02em;}
.hwhelp span{display:block;margin-top:5px;font-size:13px;color:rgba(255,255,255,.76);line-height:1.6;}
.hwhelp a{flex:none;background:#fee500;color:#3c1e1e;font-size:14px;font-weight:800;
  padding:12px 20px;border-radius:11px;text-decoration:none;transition:.14s;white-space:nowrap;}
.hwhelp a:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(254,229,0,.3);}

.hwgo{margin:0 0 8px;}
.hwgo a{display:block;text-align:center;background:var(--accent);color:#fff;font-size:15px;font-weight:800;
  padding:15px;border-radius:14px;text-decoration:none;transition:.15s;}
.hwgo a:hover{background:var(--accent-d);transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,99,235,.28);}

@media(max-width:820px){
  .hwnav{grid-template-columns:repeat(2,1fr);}
  .hwitems{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .hwnav{grid-template-columns:1fr;gap:8px;}
  .hwnav a{display:flex;align-items:center;gap:12px;padding:13px 14px;flex-wrap:wrap;}
  .hwnav .ic{margin:0;width:30px;height:30px;font-size:15px;}
  .hwnav b{flex:none;}
  .hwnav .n{margin:0;flex:1;}
  .hwnav .d{flex-basis:100%;margin-top:2px;}
  .hwline{padding-left:26px;}
  .hwline::before{left:9px;}
  .hwhd{flex-wrap:wrap;}
  .hwhd .no{left:-26px;width:20px;height:20px;font-size:10px;}
  .hwhd b{font-size:17px;}
  .hwhelp a{width:100%;text-align:center;}
}


/* ── 공지사항 (todaysns.com/notice 짜임) ────────────────────────────────
   ⚠ 예전 .board/.brow 규칙은 «아코디언 목록»용이라 그대로 두고, 여기는 따로 잡는다.
     한 글이 한 주소를 갖는 목록이라 줄 전체가 링크다. */

/* 갈래 탭 */
.ntabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 4px;}
.ntabs a{display:inline-flex;align-items:center;gap:6px;border:1px solid #e4e9f2;border-radius:999px;
  padding:9px 16px;font-size:13.5px;font-weight:700;color:#5b6472;background:#fff;
  text-decoration:none;transition:.13s;}
.ntabs a:hover{border-color:var(--accent);color:var(--accent-d);}
.ntabs a.on{background:#12180f;border-color:#12180f;color:#fff;}
.ntabs a i{font-style:normal;font-size:11.5px;font-weight:800;color:#a8b0bd;}
.ntabs a.on i{color:rgba(255,255,255,.65);}

/* 목록 */
.nlist{margin-top:18px;border-top:2px solid #1b241a;}
.nrow{display:flex;align-items:center;gap:16px;padding:17px 6px;border-bottom:1px solid #eaeef5;
  text-decoration:none;transition:.12s;}
.nrow:hover{background:#fafbfd;}
.nrow:hover .ti{color:var(--accent-d);}
.nrow .ti{flex:1;min-width:0;font-size:15px;font-weight:600;color:#333;letter-spacing:-.015em;line-height:1.5;}
.nrow .dt{flex:none;font-size:13px;font-weight:600;color:#aab1bc;}

/* 갈래 배지 — 목록·글 양쪽에서 같은 모양 */
.cat{flex:none;display:inline-block;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;}
.cat.c-no{background:#eef4ff;color:#1d4ed8;}
.cat.c-ev{background:#fff2e8;color:#c2410c;}
.cat.c-up{background:#eefaf1;color:#15803d;}

/* 글 한 건 */
.nart{padding:6px 0 4px;}
.nmeta{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.nmeta time{font-size:13px;font-weight:600;color:#aab1bc;}
.nart h1{font-size:25px;font-weight:900;letter-spacing:-.04em;color:#12180f;line-height:1.35;
  margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid #eaeef5;}
.nlead{font-size:15px;line-height:1.85;color:#39414f;font-weight:600;margin:0 0 18px;word-break:keep-all;}
.nitems{list-style:none;margin:0 0 18px;padding:18px 20px;display:grid;gap:10px;
  border:1px solid #e6ebe2;border-radius:14px;background:#fbfdfa;}
.nitems li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.75;color:#4b5563;word-break:keep-all;}
.nitems li::before{content:"";position:absolute;left:5px;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--accent,#2563eb);}
.ntail{font-size:14.5px;line-height:1.85;color:#5b6472;margin:0;word-break:keep-all;}

.nlinks{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 0;padding-top:20px;border-top:1px solid #eaeef5;}
.nlinks a{border:1px solid #e4e9f2;border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;
  color:#5b6472;text-decoration:none;background:#fff;transition:.13s;}
.nlinks a:hover{border-color:var(--accent);color:var(--accent-d);background:var(--soft,#eef4ff);}

/* 다음/이전 글 */
.nnav{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:26px 0 0;}
.nnav a{display:block;padding:15px 17px;border:1px solid #e9ecf2;border-radius:14px;background:#fff;
  text-decoration:none;transition:.14s;box-shadow:0 1px 2px rgba(16,24,40,.03);}
.nnav a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 18px rgba(16,24,40,.07);}
.nnav b{display:block;font-size:11.5px;font-weight:900;color:var(--accent-d);letter-spacing:.05em;}
.nnav span{display:block;margin-top:6px;font-size:14px;font-weight:700;color:#2b3240;line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.nnav .np{text-align:right;}
.nnav .np:only-child{grid-column:2;}

.nback{margin:22px 0 8px;}
.nback a{font-size:13.5px;font-weight:800;color:#8a9099;text-decoration:none;}
.nback a:hover{color:var(--accent-d);}

@media(max-width:640px){
  .nrow{flex-wrap:wrap;gap:8px 12px;}
  .nrow .ti{flex-basis:100%;order:2;}
  .nrow .dt{order:1;}
  .nart h1{font-size:21px;}
  .nnav{grid-template-columns:1fr;}
  .nnav .np{text-align:left;}
  .nnav .np:only-child{grid-column:1;}
}

/* ── 블로그(/article) ──────────────────────────────────────────
   ★ 읽는 글이다. 본문 폭을 좁히고 줄 간격을 넓힌다 —
     가로로 넓으면 다음 줄 첫 글자를 눈이 못 찾는다. */

/* 목록 카드 — 표지를 왼쪽에 눕힌다. 세로로 쌓으면 한 화면에 두 편밖에 안 들어온다 */
.acard{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid #e8ecef;
  border-radius:14px;padding:18px 20px;margin-bottom:14px;transition:.15s}
.acard:hover{border-color:#c9d6ea;box-shadow:0 6px 20px rgba(20,40,80,.08);transform:translateY(-1px)}
.acard .acov{flex:0 0 226px;border-radius:11px;overflow:hidden;background:#0d1420;line-height:0}
.acard .acov img{width:100%;height:auto;display:block}
.acard .acb{flex:1;min-width:0}
.acard b{display:block;font-size:17.5px;font-weight:800;letter-spacing:-.02em;color:#1b2432;
  margin:9px 0 7px;line-height:1.45;word-break:keep-all}
.acard p{font-size:14px;color:#5d6674;line-height:1.72;margin:0;word-break:keep-all}
.ameta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;color:#8b93a1}
.ameta .rd::before,.ameta .by::before{content:'·';margin-right:8px;color:#c9ced6}
@media(max-width:720px){ .acard{flex-direction:column;gap:14px} .acard .acov{flex:none;width:100%} }

/* 글 머리 */
.nart .nmeta .by b{color:#4b5563;font-weight:800}
.acover{margin:22px 0 30px;border-radius:14px;overflow:hidden;background:#0d1420;line-height:0}
.acover img{width:100%;height:auto;display:block}

/* 목차 */
.ab-toc{background:#f7f9fc;border:1px solid #e5ebf3;border-radius:13px;padding:18px 22px;margin:0 0 30px}
.ab-toc>b{display:block;font-size:12.5px;font-weight:800;color:#7b8494;letter-spacing:.02em;margin-bottom:11px}
.ab-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.ab-toc li{counter-increment:toc;margin-bottom:7px;line-height:1.6}
.ab-toc li:last-child{margin-bottom:0}
/* ⚠ 번호를 inline-block 으로 두면 «접힌 둘째 줄»이 번호 «아래»로 들어간다 (2026-09-11).
     좁은 화면에서 목차 제목이 두 줄이 되면 글자가 번호 왼쪽까지 흘러 줄이 어긋나 보였다.
     번호와 글을 두 칸으로 세우면 접혀도 글은 글 칸 안에서만 접힌다. */
.ab-toc a{display:flex;align-items:flex-start;gap:9px;
  font-size:14.5px;font-weight:600;color:#39445a;word-break:keep-all}
.ab-toc a::before{content:counter(toc);flex:0 0 20px;height:20px;line-height:20px;
  text-align:center;font-size:11px;font-weight:800;color:#5b7cb8;
  background:#e6edf8;border-radius:6px;margin-top:1px}
.ab-toc a:hover{color:#2563eb;text-decoration:underline;text-underline-offset:3px}

/* 본문 */
.nart .ab-h2{display:flex;align-items:baseline;gap:11px;font-size:21px;font-weight:800;letter-spacing:-.028em;
  color:#141d2b;margin:44px 0 16px;padding-top:26px;border-top:1px solid #eef1f5;line-height:1.4;
  scroll-margin-top:70px;word-break:keep-all}
/* ⚠ 70px 은 «고정된 머리줄(57px) + 여유»다 (2026-09-11). 20px 이었을 때는
     목차를 눌러 뛰면 소제목이 그 바 아래로 37px 들어가 반쯤 잘려 보였다. */
.nart .ab-h2 .no{flex:0 0 auto;width:25px;height:25px;line-height:25px;text-align:center;border-radius:8px;
  background:#2563eb;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:0}
.nart .ab-h3{font-size:16.5px;font-weight:800;color:#26303f;margin:30px 0 11px;line-height:1.45;
  padding-left:11px;border-left:3px solid #c7d7ef;word-break:keep-all}
.nart .ab-p{font-size:16px;line-height:2;color:#374151;margin:0 0 18px;word-break:keep-all}
.nart .ab-list{margin:0 0 20px;padding:16px 20px;list-style:none;background:#fafbfd;
  border:1px solid #eef1f6;border-radius:12px}
.nart .ab-list li{position:relative;padding-left:19px;font-size:15.5px;line-height:1.9;color:#39424f;
  margin-bottom:9px;word-break:keep-all}
.nart .ab-list li:last-child{margin-bottom:0}
.nart .ab-list li::before{content:'';position:absolute;left:3px;top:12px;width:6px;height:6px;
  border-radius:50%;background:#8fa8cf}
.nart .ab-note{position:relative;background:#f4f8ff;border:1px solid #dbe7fa;border-left:4px solid #2563eb;
  border-radius:0 12px 12px 0;padding:16px 20px 16px 22px;margin:0 0 22px;
  font-size:15.5px;line-height:1.9;color:#26364c;word-break:keep-all}
.nart .ab-src{font-size:13px;color:#7c8592;margin:0 0 24px;padding:11px 15px;background:#fbfcfd;
  border:1px solid #eef1f5;border-radius:10px}
.nart .ab-src a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;word-break:break-all}

/* 짧은 답 — 제목 밑 결론 상자. 검색 스니펫·AI 답변이 집어가는 덩어리다 */
.nart .ab-answer{position:relative;background:#fff9e9;border:1px solid #f3e3b4;border-left:4px solid #eab308;
  border-radius:0 13px 13px 0;padding:17px 21px 17px 23px;margin:0 0 30px;
  font-size:16px;line-height:1.95;color:#2c2716;word-break:keep-all}
.nart .ab-answer>b{display:block;font-size:12.5px;font-weight:800;color:#a1801a;
  letter-spacing:.02em;margin-bottom:7px}

/* 자주 묻는 질문 — FAQPage 구조화 데이터와 같은 내용이다 */
.ab-faq{margin:44px 0 0;padding-top:26px;border-top:1px solid #eef1f5}
.ab-faq>h2{font-size:21px;font-weight:800;letter-spacing:-.028em;color:#141d2b;margin:0 0 18px;line-height:1.4}
.ab-faq dl{margin:0}
.ab-faq dt{font-size:15.5px;font-weight:800;color:#26303f;line-height:1.6;margin:0 0 8px;
  padding-left:24px;position:relative;word-break:keep-all}
.ab-faq dt::before{content:'Q';position:absolute;left:0;top:1px;width:18px;height:18px;line-height:18px;
  text-align:center;border-radius:6px;background:#2563eb;color:#fff;font-size:11px;font-weight:800}
.ab-faq dd{margin:0 0 20px;padding-left:24px;font-size:15.5px;line-height:1.95;color:#414a58;
  word-break:keep-all;position:relative}
.ab-faq dd::before{content:'A';position:absolute;left:0;top:2px;width:18px;height:18px;line-height:18px;
  text-align:center;border-radius:6px;background:#eef2f8;color:#5b6472;font-size:11px;font-weight:800}
.ab-faq dd:last-child{margin-bottom:0}

/* 표 — 사는 사람은 비교표를 찾는다. 좁은 화면에서는 감싼 칸이 가로로 스크롤한다 */
.nart .ab-tw{margin:0 0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid #e7ecf3;border-radius:12px;background:#fff}
.nart .ab-table{width:100%;border-collapse:collapse;font-size:15px;min-width:440px}
.nart .ab-table th{background:#f4f7fb;color:#2b3646;font-weight:800;font-size:13.5px;
  text-align:left;padding:12px 15px;border-bottom:1px solid #e2e9f2;white-space:nowrap}
.nart .ab-table td{padding:13px 15px;color:#3d4653;line-height:1.75;
  border-bottom:1px solid #f1f4f8;word-break:keep-all}
.nart .ab-table tbody tr:last-child td{border-bottom:0}
.nart .ab-table tbody tr:nth-child(even) td{background:#fbfcfe}

/* 규격·주소·태그 이름 — 원고의 `백틱` 이 여기로 온다 (2026-09-11) */
.nart .ab-code{font-family:ui-monospace,SFMono-Regular,Menlo,"Noto Sans KR",monospace;
  font-size:.92em;background:#f2f5f9;border:1px solid #e5ebf3;border-radius:5px;
  padding:1px 5px;color:#2b3646;word-break:break-all}

/* 「```」 흐름·도식 — 줄바꿈과 띄움이 그림이라 그대로 둔다 (2026-09-11) */
.nart .ab-pre{margin:0 0 22px;padding:16px 18px;background:#f7f9fc;border:1px solid #e5ebf3;
  border-radius:12px;font-family:ui-monospace,SFMono-Regular,Menlo,"Noto Sans KR",monospace;
  font-size:13.5px;line-height:1.9;color:#2b3646;white-space:pre-wrap;word-break:break-word;
  overflow-x:auto}

/* 「1. 2. 3.」 차례 목록 — 점 목록(.ab-list)과 같은 간격으로 둔다 */
.nart .ab-ol{margin:0 0 22px;padding:0 0 0 4px;list-style:none;counter-reset:abol}
.nart .ab-ol li{counter-increment:abol;display:flex;gap:10px;align-items:flex-start;
  margin-bottom:9px;line-height:1.85;color:#3d4653}
.nart .ab-ol li::before{content:counter(abol);flex:0 0 21px;height:21px;line-height:21px;
  text-align:center;font-size:11.5px;font-weight:800;color:#2563eb;
  background:#e8effb;border-radius:6px;margin-top:5px}

/* 🔴 좁은 화면에서 표가 «잘려» 보였다 (2026-09-11).
     min-width:440px 인데 휴대폰 본문 폭은 350px 이라 오른쪽 90px 이 상자 밖으로 나갔다.
     상자에 overflow-x:auto 가 있어 밀면 보이기는 하는데 — 손가락 화면에는 스크롤 막대가
     그려지지 않는다. 손님 눈에는 그냥 «깨진 표»다(마이페이지에서 한 번 겪은 것과 같다).
   ★ 최소 폭을 풀고 글자·여백을 한 단 줄여 폭 안에 «들어가게» 한다.
     머리칸의 nowrap 도 푼다 — 「최소 주문 수량」 같은 긴 제목이 폭을 혼자 밀어낸다. */
@media(max-width:640px){
  .nart .ab-table{min-width:0;font-size:14px}
  .nart .ab-table th{padding:10px 11px;font-size:12.5px;white-space:normal}
  .nart .ab-table td{padding:10px 11px;line-height:1.65}
}

/* 본문 그림 — 화면 캡처. 「보라」고만 하는 것보다 한 장이 낫다 */
.nart .ab-fig{margin:0 0 26px}
.nart .ab-fig img{display:block;width:100%;height:auto;border:1px solid #e7ecf3;border-radius:12px;background:#fbfcfd}
.nart .ab-fig figcaption{margin-top:9px;font-size:13px;color:#7c8592;line-height:1.7;word-break:keep-all}

/* 근거 모음 */
.ab-refs{margin:40px 0 0;padding:22px 24px;background:#f7f9fc;border:1px solid #e5ebf3;border-radius:14px}
.ab-refs>b{display:block;font-size:13px;font-weight:800;color:#5b6472;margin-bottom:12px}
.ab-refs ol{margin:0 0 12px;padding-left:20px}
.ab-refs li{font-size:14px;line-height:1.85;color:#4b5563;margin-bottom:5px;word-break:break-all}
.ab-refs a{color:#2563eb;text-decoration:underline;text-underline-offset:2px}
.ab-refs>p{margin:0;font-size:12.5px;color:#8b93a1;line-height:1.7;word-break:keep-all}

.amore{background:#fff;border:1px solid #e8ecef;border-radius:14px;padding:18px 20px;margin:26px 0}
.amore>b{display:block;font-size:13px;font-weight:800;color:#6b7280;margin-bottom:11px}
.amore a{display:block;font-size:14.5px;font-weight:700;color:#2b3646;padding:9px 0;
  border-top:1px solid #f2f5f8;line-height:1.5;word-break:keep-all}
.amore a:hover{color:#2563eb}
/* 글 끝의 «서비스» 칸 — 같은 틀을 쓰되 값만 오른쪽에 붙인다.
   ⚠ 값을 줄바꿈 없이 오른쪽에 두려면 a 를 flex 로 바꿔야 한다. .amore a 는 block 이다. */
.ashop a{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ashop a em{flex:none;font-style:normal;font-size:13px;font-weight:800;color:#6b7280}
.ashop a:hover em{color:#2563eb}

@media(max-width:640px){
  .nart .ab-h2{font-size:18.5px;margin:34px 0 13px}
  .nart .ab-p{font-size:15.5px;line-height:1.92}
  .ab-toc,.ab-refs{padding:16px 18px}
}

/* ⚠ .tel 은 «전화번호»를 크게 찍는 자리였다. 우리는 전화를 안 받으므로
     그 자리에 안내문이 들어갔는데, 큰 글씨로 나와 전화번호처럼 읽혔다. */
.cscontact .notel{font-size:13px;font-weight:700;color:#8b93a1;line-height:1.6;margin-bottom:8px}

/* ── 고객센터 안내(옆줄) ────────────────────────────────────────
   ⚠ 예전에는 <br> 로만 줄을 나눠 라벨 폭이 제각각이라 콜론과 값이 어긋났다.
     라벨 폭을 고정한 격자로 바꿔 «세로로 줄이 맞게» 한다.
   ⚠ 한글 줄바꿈은 keep-all — 없으면 「카/카오톡」 으로 갈라진다. */
.cscontact{font-size:13px;color:#6f7681;line-height:1.7;word-break:keep-all}
.cscontact .cs-h{display:block;font-size:14px;font-weight:800;color:#1f2937;margin:0 0 10px;letter-spacing:-.02em}
.cscontact .cs-note{margin:0 0 13px;padding:0 0 13px;border-bottom:1px solid #eef1f5;
  font-size:12.5px;color:#8b93a1;line-height:1.65;font-weight:600}
.cscontact .cs-info{display:grid;grid-template-columns:58px 1fr;column-gap:10px;row-gap:7px;margin:0}
.cscontact .cs-info dt{font-size:12.5px;font-weight:700;color:#9aa2ae;white-space:nowrap}
.cscontact .cs-info dd{margin:0;font-size:12.5px;color:#4b5563;font-weight:600}
/* 시각은 «자리 폭이 같은 숫자»로 — 09:00 과 12:30 의 폭이 다르면 줄이 흔들린다 */
.cscontact .cs-info dd .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cscontact .cs-info dd a{color:#2563eb;font-weight:800;text-decoration:underline;text-underline-offset:2px}
.cscontact .cs-kbtn{display:block;margin-top:15px;padding:11px 0;border-radius:10px;
  background:#FEE500;color:#191919;font-size:13px;font-weight:800;text-align:center;letter-spacing:-.02em}
.cscontact .cs-kbtn:hover{background:#f5dc00}

/* ── 모바일에서 옆줄을 «본문 아래»로 ─────────────────────────────
   ⚠ 한 칸으로 접히면 마크업 순서대로 «옆줄이 먼저» 온다.
     블로그 글을 열었는데 고객센터 메뉴 9칸을 지나야 본문이 나왔다.
   ★ 격자 순서만 바꾼다(order) — 마크업은 그대로 둔다.
     읽기 순서와 화면 순서를 맞추려면 마크업이 「본문 → 보조」여야 맞지만,
     여기서는 옆줄이 «보조 메뉴»라 화면 순서만 뒤로 보내는 것이 안전하다. */
@media(max-width:820px){
  .cslayout .csmain{order:1}
  .cslayout .csside{order:2}
  /* 본문을 다 읽고 만나는 메뉴다 — 위쪽에 선을 둬서 본문과 갈라 준다 */
  .cslayout .csside{border-top:1px solid #eaeef5;padding-top:22px;margin-top:6px}
  .cscontact{margin-top:14px}
}

/* 읽기 진행률 — 긴 글에서 «얼마나 남았나»가 보여야 끝까지 읽는다 */
.rprog{position:fixed;left:0;top:0;right:0;height:3px;background:transparent;z-index:60;pointer-events:none}
.rprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#60a5fa);transition:width .08s linear}

/* 자주묻는질문 갈래 머리글 (2026-09-09)
   ⚠ 걸린 문항이 없는 갈래는 JS 가 머리글째 숨긴다(app.js faqSearch). */
.faqgrp{margin-top:26px}
.faqgrp:first-child{margin-top:0}
.faqgh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#8a94a6;
  letter-spacing:.02em;margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid #edf0f5}
.faqgh span{font-size:11.5px;font-weight:800;color:#9aa2b1;background:#f2f5f9;border-radius:999px;padding:2px 8px}

/* ── 모바일 머리줄(검색·링크) 규칙은 «site.css» 한 곳에 있다 (2026-09-16) ──
   전에는 이 블록이 화면 CSS 일곱 벌에 그대로 복사돼 있었다. 한 벌만 고치면 그 화면만
   바뀌고 나머지 여섯은 옛 모양으로 남는다 — 실제로 그렇게 어긋났다. site.css 는 모든
   화면에 «화면 CSS 뒤에» 실리므로 거기 한 벌이면 족하다. */

/* ── 링크 가이드 뱃지 — 글자 대신 아이콘 (2026-09-12) ──────────
   🔴 이름 첫 글자 한 자를 색 네모에 넣고 있었다. 「카카오톡」이 「카」로 나가
     «글자가 잘린 것처럼» 보였다. 첫 화면 타일과 같은 아이콘으로 바꿨다.
   ⚠ plat-icon 이 .ico 를 «자기 색·자기 배경»으로 그린다. 여기서는 뱃지가
     이미 플랫폼 색으로 차 있으므로, 안쪽 .ico 는 배경을 지우고 흰 선으로 그린다. */
.gbadge{display:flex;align-items:center;justify-content:center}
.gbadge .ico{background:none !important;color:var(--ik,#fff) !important;
  width:auto;height:auto;border-radius:0;box-shadow:none}
.gbadge .ico svg{width:16px;height:16px;display:block}


/* ── 모바일 머리줄이 «붙어 있다» (2026-09-12) — home.css 와 같은 규칙 ──
   🔴 로그인하면 한 줄에 다섯이 들어가 서로 닿아 보였다(로고·잔액·마이페이지·로그아웃·⚙관리자).
   ⚠ 잔액 칸과 ⚙관리자는 숨기지 않는다. 「마이페이지」 글자만 뺀다 — 잔액 칸이 같은 곳으로 간다. */
/* ── 아코디언이 «툭» 튄다 (2026-09-12) ──────────────────────────
   🔴 <details> 는 브라우저가 즉시 열고 닫는다. 답이 길면 화면이 한 번 덜컹하고,
     닫을 때도 갑자기 사라져 어디가 접혔는지 눈이 못 따라간다.
   ★ 여는 «모양»만 부드럽게 한다 — 여닫는 «동작»은 브라우저에 그대로 둔다.
     JS 로 높이를 재서 여는 방식은 JS 가 막히면 답이 아예 안 열린다(snspang 이 그랬다).
   ⚠ display:none → block 은 전환이 안 먹는다. grid-template-rows 0fr→1fr 로 연다 —
     높이를 «몰라도» 전환되는 유일한 방법이다.
   ⚠ 움직임 줄이기를 켠 사람에게는 전환을 끈다(prefers-reduced-motion). */
details.faqitem > .faqa,
details.hfq > .a{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  padding-top:0;padding-bottom:0;opacity:0;
  transition:grid-template-rows .22s ease, opacity .18s ease,
             padding-top .22s ease, padding-bottom .22s ease;
}
details.faqitem > .faqa > *,
details.hfq > .a > *{min-height:0}
details.faqitem[open] > .faqa{grid-template-rows:1fr;opacity:1;padding-bottom:18px}
details.hfq[open] > .a{grid-template-rows:1fr;opacity:1;padding-bottom:17px}
/* 화살표도 같은 속도로 돈다 — 따로 놀면 더 어색하다 */
.faqq .qi,.hfq .i{transition:transform .22s ease,color .18s ease}
@media(prefers-reduced-motion:reduce){
  details.faqitem > .faqa,details.hfq > .a,.faqq .qi,.hfq .i{transition:none}
}


/* ⚠ 안쪽 감싼 것(.faqa-i)이 «반드시» 있어야 한다.
     grid-template-rows:0fr 는 «자식 요소»를 눌러 접는 방식이라,
     글자가 div 에 그대로 들어 있으면 접히지 않는다. */
.faqa-i{min-height:0;overflow:hidden}