@charset "utf-8";
/* mobile-board — 767px 이하 전용 (FAQ faq_custom 목록 · 확정 목업 faq v002 기본안 A·B·C·D)
   이 파일의 모든 규칙은 아래 미디어 블록 한 개 안에 있다. 768px 이상 화면에는 어떤 규칙도 닿지 않는다.
   /faq 목록(list.skin.php)에서만 로드된다 — 단건 보기(view)·글쓰기(write)는 로드하지 않는다.
   마크업 · 자바스크립트는 바꾸지 않는다: 카드는 display:block 을 유지하고(검색 · 분류 필터가 인라인 display 로 숨김),
   카드 머리만 안쪽 그리드로 배치한다. 펼침 화살표는 글꼴 아이콘이 아니라 CSS 로 그린다. */
@media (max-width:767px){

:root{
  --mb-teal:#0b4f54;--mb-teal2:#0e6a70;--mb-mint:#e4f1f0;--mb-bg:#f4f8f7;--mb-line:#e3e9ea;
  --mb-ink:#13232b;--mb-sub:#5d6c73;--mb-yel:#ffd24a;
}

/* ---------- 페이지 바탕 ---------- */
#container{background:var(--mb-bg)}
#container #bo_list .ige-faq-container{max-width:none;margin:0;padding:0 0 28px;color:var(--mb-ink);word-break:keep-all;overflow-wrap:break-word}

/* ---------- 화면 A: 머리(흰 바탕 · 왼쪽 정렬) ---------- */
#container #bo_list .ige-faq-container .faq-header{box-sizing:border-box;margin:0;padding:20px 18px 6px;border-radius:0;background:#fff;color:var(--mb-ink);text-align:left}
#container #bo_list .ige-faq-container .faq-header h1{margin:0;font-size:23px;line-height:1.3;font-weight:800;letter-spacing:-.03em;color:var(--mb-ink)}
#container #bo_list .ige-faq-container .faq-header .lead{margin:6px 0 0;font-size:13px;line-height:1.6;opacity:1;color:var(--mb-sub)}
#container #bo_list .ige-faq-container .faq-stats{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px 14px;margin:9px 0 0;font-size:12.5px;color:var(--mb-sub)}
#container #bo_list .ige-faq-container .faq-stats span{color:var(--mb-sub)}
#container #bo_list .ige-faq-container .faq-stats strong{font-weight:800;color:var(--mb-teal2)}

/* ---------- 검색 · 인기 검색어 ---------- */
#container #bo_list .ige-faq-container .faq-search-area{margin:0;padding:6px 18px 4px;background:#fff}
#container #bo_list .ige-faq-container .search-container{display:flex;gap:6px;max-width:none;margin:0;padding:0;border-radius:0;box-shadow:none;overflow:visible;position:static}
#container #bo_list .ige-faq-container .search-container input{box-sizing:border-box;flex:1 1 0;min-width:0;height:46px;margin:0;padding:0 12px;border:1px solid var(--mb-line);border-radius:12px;background:#fff;color:var(--mb-ink);font-size:16px}
#container #bo_list .ige-faq-container .search-container button{box-sizing:border-box;position:static;flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:4px;height:46px;min-width:70px;margin:0;padding:0 13px;border:0;border-radius:12px;background:var(--mb-teal);color:#fff;font-size:13.5px;font-weight:800}
#container #bo_list .ige-faq-container .search-container button:hover{background:var(--mb-teal)}
#container #bo_list .ige-faq-container .popular-keywords{display:flex;align-items:center;justify-content:flex-start;gap:6px;margin:10px 0 0;padding:0 0 4px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;text-align:left;font-size:12px;color:var(--mb-sub)}
#container #bo_list .ige-faq-container .popular-keywords::-webkit-scrollbar{display:none}
#container #bo_list .ige-faq-container .popular-keywords span{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--mb-sub)}
#container #bo_list .ige-faq-container .popular-keywords a{box-sizing:border-box;flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:40px;margin:0;padding:0 13px;border-radius:999px;background:#eef5f4;color:var(--mb-teal);font-size:13px;font-weight:700;text-decoration:none}
/* 기존 스킨의 hover 색(!important)이 터치 뒤에 남지 않게 */
#container #bo_list .ige-faq-container .popular-keywords a:hover{background:#eef5f4 !important;color:var(--mb-teal) !important}

/* ---------- 분류 칩 ---------- */
#container #bo_list .ige-faq-container .faq-categories{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:6px;width:100%;margin:0;padding:6px 18px 14px;border-bottom:1px solid var(--mb-line);background:#fff;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#container #bo_list .ige-faq-container .faq-categories::-webkit-scrollbar{display:none}
#container #bo_list .ige-faq-container .cat-filter{box-sizing:border-box;flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:40px;margin:0;padding:0 15px;border:1px solid var(--mb-line);border-radius:999px;background:#fff;color:var(--mb-sub);font-size:13px;font-weight:700;white-space:nowrap}
#container #bo_list .ige-faq-container .cat-filter:not(.active):hover{background:#fff;color:var(--mb-sub);border-color:var(--mb-line)}
#container #bo_list .ige-faq-container .cat-filter.active,#container #bo_list .ige-faq-container .cat-filter.active:hover{background:var(--mb-teal);color:#fff;border-color:var(--mb-teal)}

/* ---------- 질문 카드(접힘) ---------- */
#container #bo_list .ige-faq-container .faq-accordion-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:12px 14px 0;padding:0}
#container #bo_list .ige-faq-container .faq-item{box-sizing:border-box;min-width:0;margin:0;border:1px solid var(--mb-line);border-radius:16px;background:#fff;overflow:visible;transition:none}
#container #bo_list .ige-faq-container .faq-item:hover{transform:none;box-shadow:none}
#container #bo_list .ige-faq-container .faq-item.active{border-color:#9cc3c1;box-shadow:0 4px 14px rgba(11,79,84,.09)}
#container #bo_list .ige-faq-container .faq-question{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 34px;column-gap:10px;align-items:start;min-height:44px;margin:0;padding:14px 14px 13px;border-radius:15px;background:#fff}
#container #bo_list .ige-faq-container .faq-question:hover{background:#fff}
#container #bo_list .ige-faq-container .faq-item.active .faq-question{border-radius:15px 15px 0 0}
#container #bo_list .ige-faq-container .question-content,#container #bo_list .ige-faq-container .question-meta{display:contents}
#container #bo_list .ige-faq-container .category-badge{grid-column:1;grid-row:1;justify-self:start;display:inline-block;margin:0 0 6px;padding:2px 10px;border-radius:999px;background:var(--mb-mint);color:var(--mb-teal2);font-size:12px;font-weight:800;line-height:1.5}
#container #bo_list .ige-faq-container .question-title{grid-column:1;grid-row:2;margin:0;padding:0;font-size:15px;line-height:1.45;font-weight:800;letter-spacing:-.02em;color:var(--mb-ink);word-break:keep-all;overflow-wrap:anywhere}
#container #bo_list .ige-faq-container .view-count{grid-column:1;grid-row:3;margin:5px 0 0;font-size:12px;line-height:1.4;color:#667780}
#container #bo_list .ige-faq-container .toggle-icon{grid-column:2;grid-row:1/4;position:relative;display:block;width:34px;height:34px;border-radius:50%;background:#eef5f4;color:var(--mb-teal)}
#container #bo_list .ige-faq-container .toggle-icon i{display:none}
#container #bo_list .ige-faq-container .toggle-icon::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-6px 0 0 -4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
#container #bo_list .ige-faq-container .faq-item.active .toggle-icon{background:var(--mb-teal);color:#fff}
#container #bo_list .ige-faq-container .faq-item.active .toggle-icon::before{margin-top:-2px;transform:rotate(-135deg)}

/* ---------- 화면 B · C: 펼친 답변 ---------- */
#container #bo_list .ige-faq-container .faq-answer{box-sizing:border-box;padding:14px 14px 12px;border-top:1px solid var(--mb-line);border-radius:0 0 15px 15px;background:#fcfefd}
/* 답변 상자가 넓은 내용(표 등)을 자기 안에서 민다 — 문서 가로 스크롤 0. 가려진 열이 있으면 가장자리에 옅은 그림자가 보인다 */
#container #bo_list .ige-faq-container .answer-content{box-sizing:border-box;margin:0;font-size:14.5px;line-height:1.85;color:#1d2f37;word-break:keep-all;overflow-wrap:break-word;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  background:linear-gradient(to right,#fcfefd 30%,rgba(252,254,253,0)) left center,linear-gradient(to left,#fcfefd 30%,rgba(252,254,253,0)) right center,radial-gradient(farthest-side at 0 50%,rgba(11,79,84,.30),rgba(11,79,84,0)) left center,radial-gradient(farthest-side at 100% 50%,rgba(11,79,84,.30),rgba(11,79,84,0)) right center;
  background-repeat:no-repeat;background-color:#fcfefd;background-size:40px 100%,40px 100%,16px 100%,16px 100%;background-attachment:local,local,scroll,scroll}
/* 사이트 전역 p{word-break:break-all} 를 눌러 낱말 단위로 줄바꿈 */
#container #bo_list .ige-faq-container .answer-content :where(p,li,div,span,a,b,strong,em,i,u,font,h1,h2,h3,h4,h5,h6,blockquote,td,th,dd,dt,label){word-break:keep-all;overflow-wrap:break-word}
#container #bo_list .ige-faq-container .answer-content img{max-width:100%;height:auto}
#container #bo_list .ige-faq-container .answer-content iframe,#container #bo_list .ige-faq-container .answer-content video{max-width:100%}
/* 고정 폭을 박은 상자는 답변 폭 안으로 (표는 제외 — 표는 원래 배치를 지키고 상자째 민다) */
#container #bo_list .ige-faq-container .answer-content :is(div,section,p,figure,blockquote)[style*="width" i]{max-width:100% !important;box-sizing:border-box}
#container #bo_list .ige-faq-container .answer-content ul,#container #bo_list .ige-faq-container .answer-content ol{margin:8px 0 0;padding-left:20px}
#container #bo_list .ige-faq-container .answer-content li{margin-top:5px}
/* 번호 목록: 사이트 스킨이 ol li:before 로 번호를 그리므로 두 자리 번호가 글자와 겹치지 않게 모바일에서만 넓힌다 */
#container #bo_list .ige-faq-container .answer-content ol li{padding-left:26px !important}
#container #bo_list .ige-faq-container .answer-content a:not([style*="color" i]){color:var(--mb-teal2);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* 인라인으로 작게 박힌 글자(9pt · 10pt · 12~14px)는 본문 14.5px(표 칸은 12.5px)까지 올린다 — 인라인 스타일을 눌러야 해서 !important */
#container #bo_list .ige-faq-container .answer-content :is(
  [style*="font-size:7pt" i],[style*="font-size: 7pt" i],[style*="font-size:8pt" i],[style*="font-size: 8pt" i],[style*="font-size:9pt" i],[style*="font-size: 9pt" i],
  [style*="font-size:9.5pt" i],[style*="font-size: 9.5pt" i],[style*="font-size:10pt" i],[style*="font-size: 10pt" i],[style*="font-size:10.5pt" i],[style*="font-size: 10.5pt" i],
  [style*="font-size:9px" i],[style*="font-size: 9px" i],[style*="font-size:10px" i],[style*="font-size: 10px" i],[style*="font-size:11px" i],[style*="font-size: 11px" i],
  [style*="font-size:12px" i],[style*="font-size: 12px" i],[style*="font-size:13px" i],[style*="font-size: 13px" i],[style*="font-size:13.3333px" i],[style*="font-size: 13.3333px" i],
  [style*="font-size:14px" i],[style*="font-size: 14px" i],[style*="font-size:small" i],[style*="font-size: small" i],[style*="font-size:x-small" i],[style*="font-size: x-small" i],
  [style*="font-size:smaller" i],[style*="font-size: smaller" i]
):not(table,table *){font-size:14.5px !important}
#container #bo_list .ige-faq-container .answer-content :is(table,table *):is(
  [style*="font-size:7pt" i],[style*="font-size: 7pt" i],[style*="font-size:8pt" i],[style*="font-size: 8pt" i],[style*="font-size:9pt" i],[style*="font-size: 9pt" i],
  [style*="font-size:9.5pt" i],[style*="font-size: 9.5pt" i],[style*="font-size:9px" i],[style*="font-size: 9px" i],[style*="font-size:10px" i],[style*="font-size: 10px" i],
  [style*="font-size:11px" i],[style*="font-size: 11px" i],[style*="font-size:12px" i],[style*="font-size: 12px" i],[style*="font-size:small" i],[style*="font-size: small" i],
  [style*="font-size:x-small" i],[style*="font-size: x-small" i],[style*="font-size:smaller" i],[style*="font-size: smaller" i]
){font-size:12.5px !important}

/* 인라인으로 좁게 박힌 줄간격(Word 붙여넣기 107% 등)은 본문 줄간격 1.75 로 — 인라인 스타일을 눌러야 해서 !important. 표 칸은 건드리지 않는다 */
#container #bo_list .ige-faq-container .answer-content :is([style*="line-height:100%" i],[style*="line-height: 100%" i],[style*="line-height:107%" i],[style*="line-height: 107%" i],[style*="line-height:115%" i],[style*="line-height: 115%" i],[style*="line-height:120%" i],[style*="line-height: 120%" i],[style*="line-height:130%" i],[style*="line-height: 130%" i],[style*="line-height:140%" i],[style*="line-height: 140%" i],[style*="line-height:150%" i],[style*="line-height: 150%" i],[style*="line-height:160%" i],[style*="line-height: 160%" i],[style*="line-height:1.1" i],[style*="line-height: 1.1" i],[style*="line-height:1.2" i],[style*="line-height: 1.2" i],[style*="line-height:1.3" i],[style*="line-height: 1.3" i],[style*="line-height:1.4" i],[style*="line-height: 1.4" i],[style*="line-height:1.5" i],[style*="line-height: 1.5" i],[style*="line-height:1.6" i],[style*="line-height: 1.6" i],[style*="line-height:normal" i],[style*="line-height: normal" i]):not(table,table *){line-height:1.75 !important}

/* 표: 원래 배치(폭 100% · 칸 폭)를 지키고, 열이 많은 표는 최소 폭을 줘서 칸이 짓눌리지 않게 한다. 좁으면 답변 상자째 옆으로 밀린다 */
#container #bo_list .ige-faq-container .answer-content table{font-size:13px;line-height:1.45}
#container #bo_list .ige-faq-container .answer-content :is(td,th){word-break:keep-all;overflow-wrap:break-word}
#container #bo_list .ige-faq-container .answer-content table:has(tr>:nth-child(3)){min-width:430px}
#container #bo_list .ige-faq-container .answer-content table:has(tr>:nth-child(4)){min-width:500px}
#container #bo_list .ige-faq-container .answer-content table:has(tr>:nth-child(5)){min-width:520px}
#container #bo_list .ige-faq-container .answer-content table:has(tr>:nth-child(6)){min-width:600px}
/* F-RC-001(2026-10-21): 위 최소 폭 때문에 열이 많은 표가 폭 414·390·360·320 에서 답변 상자째 옆으로 밀렸다(운영 /faq#70 실측). 같은 열 수 규칙에서 최소 폭을 풀고(min 이 max 를 누르므로 풀어야 max-width:100% 가 듣는다) 표가 자기 칸 안에서 옆으로 움직이게 한다 — 양쪽 가장자리에 스크롤 단서(CSS 그림자만, 새 요소 없음). 이 파일의 모든 규칙처럼 767 이하에만 닿는다 */
#container #bo_list .ige-faq-container .answer-content table:has(tr>:nth-child(3)),
#container #bo_list .ige-faq-container .answer-content table:has(tr>:nth-child(4)),
#container #bo_list .ige-faq-container .answer-content table:has(tr>:nth-child(5)),
#container #bo_list .ige-faq-container .answer-content table:has(tr>:nth-child(6)){display:block;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center,linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),rgba(0,0,0,0)) left center,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;background-size:24px 100%,24px 100%,10px 100%,10px 100%;background-attachment:local,local,scroll,scroll}
/* F-RC-001 보강(2026-10-21): 인라인 style 로 min-width:280px 이 박힌 2열 표(/faq#77 의 표 2개)는 위 3열 이상 규칙에 들지 않아 폭 360·390 에서도 상자 오른쪽으로 밀렸다(상자 폭 282 대 가로 스크롤 318 실측). 인라인 값을 누르려고 !important, 표는 width:100% 라 풀면 칸 안에 맞는다. 이 파일의 모든 규칙처럼 767 이하에만 닿는다 */
#container #bo_list .ige-faq-container .answer-content table[style*="min-width" i]{min-width:0 !important}
/* PC-F3/RC-F1(2026-10-22): /faq#76 첫 표처럼 칸마다 인라인 padding:20px · border-left:5px · width:50% 가 박힌 2열 카드 표는 칸 글자(24px 굵은 글씨)가 길어 폭 390 에서 두 칸이 나란히 못 들어가 표(343px)가 답변 상자(312px) 밖으로 나갔다. 이 패턴의 표만 카드를 세로로 쌓는다(새 마크업 없음 · 인라인 width 를 눌러야 해서 !important) */
#container #bo_list .ige-faq-container .answer-content table:has(td[style*="border-left" i]:is([style*="width: 50%" i],[style*="width:50%" i])){display:block;width:100% !important;box-sizing:border-box}
#container #bo_list .ige-faq-container .answer-content table:has(td[style*="border-left" i]:is([style*="width: 50%" i],[style*="width:50%" i])) :is(tbody,tr){display:block}
#container #bo_list .ige-faq-container .answer-content table:has(td[style*="border-left" i]:is([style*="width: 50%" i],[style*="width:50%" i])) td{display:block;box-sizing:border-box;width:auto !important;margin:0 0 12px}
/* 폭 360 이하에서는 칸 글자와 좌우 안쪽 여백을 줄여 표가 상자 안에 들어가게 한다(361 이상은 칸 글자 그대로) */
@media (max-width:360px){#container #bo_list .ige-faq-container .answer-content :is(td,th){font-size:12px;padding-left:4px;padding-right:4px}}

/* ---------- 답변 바닥 ---------- */
#container #bo_list .ige-faq-container .answer-content{margin-bottom:14px}
#container #bo_list .ige-faq-container .answer-footer{margin:0;padding-top:11px;border-top:1px dashed #cfdcdc}
#container #bo_list .ige-faq-container .answer-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;margin:0;font-size:12px;color:var(--mb-sub)}
#container #bo_list .ige-faq-container .update-date{font-size:12px;color:var(--mb-sub)}
#container #bo_list .ige-faq-container .helpful-section{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mb-sub)}
#container #bo_list .ige-faq-container .helpful-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:40px;margin:0;padding:0 14px;border:1.5px solid var(--mb-teal);border-radius:999px;background:#fff;color:var(--mb-teal);font-size:13px;font-weight:800}
#container #bo_list .ige-faq-container .helpful-btn:hover{background:#fff;color:var(--mb-teal);border-color:var(--mb-teal)}
#container #bo_list .ige-faq-container .helpful-btn span{margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--mb-yel);color:var(--mb-ink);font-size:12px}
#container #bo_list .ige-faq-container .related-links{margin:0}
#container #bo_list .ige-faq-container .related-link{box-sizing:border-box;display:block;margin:10px 0 0;padding:11px 13px;border-radius:12px;background:var(--mb-mint);color:var(--mb-teal) !important;font-size:13px;font-weight:800;line-height:1.5;text-decoration:none}
#container #bo_list .ige-faq-container .related-link:hover{transform:none;box-shadow:none;background:var(--mb-mint);color:var(--mb-teal) !important}

/* ---------- 연락 카드 ---------- */
#container #bo_list .ige-faq-container .faq-contact-section{box-sizing:border-box;margin:14px 14px 0;padding:16px 14px;border-radius:18px;background:linear-gradient(135deg,#0b3a44 0%,#0b4f54 100%);color:#fff}
#container #bo_list .ige-faq-container .faq-contact-section h3{margin:0;font-size:16px;line-height:1.4;font-weight:800;letter-spacing:-.02em;text-align:left;color:#fff}
#container #bo_list .ige-faq-container .contact-methods{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:11px 0 0}
#container #bo_list .ige-faq-container .contact-item{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:11px;min-height:56px;margin:0;padding:9px 12px;border-radius:13px;background:rgba(255,255,255,.1);box-shadow:none}
#container #bo_list .ige-faq-container .contact-item:hover{transform:none}
#container #bo_list .ige-faq-container .contact-icon{flex:0 0 auto;margin:0;font-size:22px;line-height:1}
#container #bo_list .ige-faq-container .contact-info{min-width:0}
#container #bo_list .ige-faq-container .contact-info h4{margin:0;font-size:13.5px;line-height:1.4;font-weight:800;color:#fff}
#container #bo_list .ige-faq-container .contact-info p{margin:1px 0 0;font-size:12px;line-height:1.45;color:#cfe5e4}
#container #bo_list .ige-faq-container .contact-info a{color:#cfe5e4;text-decoration:none}
/* 링크가 있는 항목(카카오톡 · 캐유맘 카페)은 항목 전체가 눌린다 — 새 마크업 없음 */
#container #bo_list .ige-faq-container .contact-info a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}

}