@charset "utf-8";
/* GROWTH-003M: Panduan Korea 모바일 스킨(기준 화면). 디자인 토큰 = css/inko-family.css 의 --fam-* (없으면 같은 값의 fallback).
   360px 폭에서 가로 스크롤 없음(고정 폭 없음, 칩·버튼 줄바꿈), 큰 배너 없음(제목 20px), 터치 대상 최소 44px,
   이미지 비율 유지(max-width:100%; height:auto), 하단 고정 버튼(글쓰기/홈, bottom 24px + 54px)과 겹치지 않도록 아래 여백 확보. */

#container_title { display: none !important; }

.panduan-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 14px calc(104px + env(safe-area-inset-bottom, 0px));
    font-family: Arial, "Noto Sans KR", sans-serif;
    color: var(--fam-ink, #111827);
    background: var(--fam-bg, #fff);
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.panduan-page *, .panduan-page *::before, .panduan-page *::after { box-sizing: border-box; }
.panduan-page img, .panduan-page video, .panduan-page iframe { max-width: 100%; }
.panduan-page img { height: auto; }

/* breadcrumb: GROWTH-002C partial 과 같은 모양(4단계는 이 스킨이 직접 출력하므로 여기에도 둔다) */
.panduan-page .growth-breadcrumb { max-width: 100%; margin: 0 0 4px; font-size: 12px; line-height: 1.4; color: var(--fam-sub, #6b7280); }
.panduan-page .growth-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.panduan-page .growth-breadcrumb li { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; margin: 0; padding: 0; overflow-wrap: anywhere; word-break: break-word; }
.panduan-page .growth-breadcrumb li + li::before { content: "\203A"; padding: 0 5px; color: var(--fam-mute, #9ca3af); }
.panduan-page .growth-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: #4b5563 !important; text-decoration: none !important; font-weight: 700; }

/* 제목 영역(작게, 배너 없음) */
.panduan-head { margin: 0 0 12px; }
.panduan-kicker { display: inline-flex; align-items: center; min-height: 44px; margin: 0; color: var(--fam-accent, #e9202a) !important; font-size: 13px; font-weight: 800; text-decoration: none !important; }
.panduan-head h1 { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 850; color: var(--fam-ink, #111827); letter-spacing: -0.3px; }
.panduan-head p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--fam-sub, #6b7280); }
.panduan-head-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.panduan-head-actions .panduan-btn { flex: 1 1 0; min-width: 0; }

/* 버튼 */
.panduan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: var(--fam-card, #fff);
    color: #374151 !important;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.panduan-btn-primary { background: var(--fam-accent, #e9202a) !important; border-color: var(--fam-accent, #e9202a) !important; color: #fff !important; }
.panduan-btn-dark { background: var(--fam-ink, #111827) !important; border-color: var(--fam-ink, #111827) !important; color: #fff !important; }

/* 검색 */
.panduan-search { display: flex; gap: 8px; margin: 0 0 12px; }
.panduan-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 12px;
    border: 1px solid #dbe1ea;
    border-radius: 12px;
    background: var(--fam-card, #fff);
    font-size: 16px; /* iOS 확대 방지 */
    color: var(--fam-ink, #111827);
    -webkit-appearance: none;
    appearance: none;
}
.panduan-search input[type="search"]:focus { outline: none; border-color: var(--fam-accent, #e9202a); box-shadow: 0 0 0 3px rgba(233, 32, 42, 0.1); }
.panduan-search button {
    flex: 0 0 auto;
    min-width: 64px;
    height: 46px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: var(--fam-accent, #e9202a);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

/* 분류 칩: 줄바꿈(가로 스크롤 없음) */
.panduan-chips { margin: 0 0 12px; }
.panduan-chips ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.panduan-chips li { max-width: 100%; }
.panduan-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    padding: 0 12px;
    border: 1px solid var(--fam-line, #edf0f5);
    border-radius: 999px;
    background: var(--fam-tile, #f3f5fa);
    color: var(--fam-tile-ink, #1e2a4a) !important;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none !important;
}
.panduan-chips a.is-active { background: var(--fam-accent, #e9202a); border-color: var(--fam-accent, #e9202a); color: #fff !important; }

/* 공통 카드 */
.panduan-card,
.panduan-tiles,
.panduan-list {
    margin: 0 0 12px;
    padding: 14px;
    background: var(--fam-card, #fff);
    border: 1px solid var(--fam-line, #edf0f5);
    border-radius: var(--fam-radius, 14px);
    box-shadow: var(--fam-shadow, 0 4px 14px rgba(17, 24, 39, .06));
}
.panduan-section-title { margin: 0 0 8px; font-size: 16px; font-weight: 850; color: var(--fam-ink, #111827); }

/* 허브 분류 타일: 2열 그리드(폭에 맞춰 줄어듦) */
.panduan-tiles ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.panduan-tiles li { min-width: 0; }
.panduan-tiles a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--fam-tile, #f3f5fa);
    color: var(--fam-tile-ink, #1e2a4a) !important;
    text-decoration: none !important;
}
.panduan-tiles a:active { background: var(--fam-accent-soft, #fff1f2); }
.panduan-tile-name { font-size: 14px; line-height: 1.35; font-weight: 850; }
.panduan-tile-desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.45;
    color: var(--fam-sub, #6b7280);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 질문 목록 카드: 제목 + direct answer 요약 + 업데이트 날짜 */
.panduan-items { margin: 0; padding: 0; list-style: none; }
.panduan-item { padding: 10px 0; border-bottom: 1px solid var(--fam-line, #edf0f5); }
.panduan-item:first-child { padding-top: 0; }
.panduan-item:last-child { border-bottom: 0; padding-bottom: 0; }
.panduan-item > a { display: block; min-height: 44px; color: var(--fam-ink, #111827) !important; text-decoration: none !important; }
.panduan-item-title { display: block; font-size: 16px; line-height: 1.45; font-weight: 800; }
.panduan-item-answer {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.panduan-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0; font-size: 12px; color: var(--fam-mute, #9ca3af); }
.panduan-item-cat { display: inline-flex; align-items: center; min-height: 44px; color: var(--fam-accent, #e9202a) !important; font-weight: 800; text-decoration: none !important; }
.panduan-item-date { display: inline-flex; align-items: center; padding: 4px 0; }
.panduan-pages { margin: 14px 0; text-align: center; }
.panduan-pages .pg_wrap, .panduan-pages .pg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; float: none; }
.panduan-pages a, .panduan-pages strong { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* 빈 상태 */
.panduan-empty { padding: 18px 4px; text-align: center; }
.panduan-empty-msg { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--fam-ink, #111827); }
.panduan-empty-sub { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--fam-sub, #6b7280); }
.panduan-empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.panduan-empty-links li { max-width: 100%; }
.panduan-empty-links a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 0 12px; border-radius: 999px; background: var(--fam-tile, #f3f5fa); color: var(--fam-tile-ink, #1e2a4a) !important; font-size: 13px; font-weight: 750; text-decoration: none !important; }
.panduan-empty-actions { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.panduan-empty-actions .panduan-btn { width: 100%; }

/* 질문 페이지 */
.panduan-article { padding: 16px 14px; }
.panduan-article-head { margin: 0 0 10px; }
.panduan-article-head h1 { margin: 0; font-size: 21px; line-height: 1.4; font-weight: 850; letter-spacing: -0.3px; color: var(--fam-ink, #111827); }
.panduan-answer {
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid #fecdd3;
    border-left: 4px solid var(--fam-accent, #e9202a);
    border-radius: 12px;
    background: var(--fam-accent-soft, #fff1f2);
}
.panduan-answer-title { margin: 0 0 4px; font-size: 13px; font-weight: 850; color: var(--fam-accent, #e9202a); }
.panduan-answer-text { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 700; color: var(--fam-ink, #111827); }
.panduan-updated { margin: 0 0 14px; font-size: 13px; color: var(--fam-sub, #6b7280); }
#bo_v_img { margin: 0 0 14px; }
#bo_v_img img, .panduan-content img { max-width: 100% !important; height: auto !important; border-radius: 12px; }
.panduan-content { margin: 0 0 8px; color: #1f2937; font-size: 16px; line-height: 1.8; word-break: break-word; }
.panduan-content p { margin: 0 0 14px; }
.panduan-content h2 { margin: 22px 0 10px; font-size: 18px; font-weight: 850; }
.panduan-content h3 { margin: 16px 0 8px; font-size: 16px; font-weight: 850; }
.panduan-content ol, .panduan-content ul { margin: 0 0 14px; padding-left: 20px; }
.panduan-content table { display: block; max-width: 100%; overflow-x: auto; }
.panduan-content pre { max-width: 100%; white-space: pre-wrap; }
.panduan-signature { margin-top: 14px; color: var(--fam-sub, #6b7280); font-size: 13px; }

.panduan-faq, .panduan-sources { margin: 18px 0 0; padding: 14px; border: 1px solid var(--fam-line, #edf0f5); border-radius: 12px; background: #f9fafb; }
.panduan-faq-title, .panduan-sources-title { margin: 0 0 6px; font-size: 16px; font-weight: 850; color: var(--fam-ink, #111827); }
.panduan-faq-item { padding: 10px 0; border-bottom: 1px solid var(--fam-line, #edf0f5); }
.panduan-faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.panduan-faq-q { margin: 0 0 4px; font-size: 15px; font-weight: 800; line-height: 1.5; }
.panduan-faq-a { margin: 0; font-size: 15px; line-height: 1.7; color: #374151; }
.panduan-sources ul { margin: 0; padding: 0; list-style: none; }
.panduan-source { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; border-bottom: 1px solid var(--fam-line, #edf0f5); }
.panduan-source:last-child { border-bottom: 0; }
.panduan-source a { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 6px 0; color: var(--fam-blue, #1f6fe0) !important; text-decoration: none !important; }
.panduan-source-name { font-size: 14px; font-weight: 800; }
.panduan-source-host { font-size: 12px; color: var(--fam-mute, #9ca3af); }
.panduan-badge-official { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid #bbf7d0; border-radius: 999px; background: #ecfdf5; color: #059669; font-size: 11px; font-weight: 900; }
.panduan-sources-official + .panduan-sources-other-title { margin-top: 14px; }

/* GROWTH-003F: 상위 사이트 CSS 상속으로 direct answer 등에서 단어 중간 줄바꿈("sebelu/m")이 생겼다.
   Panduan 텍스트 영역은 단어 단위로 줄바꿈하고, 한 단어가 줄보다 길 때만 끊는다.
   출처 링크(긴 URL/호스트)는 계속 아무 곳에서나 줄바꿈(overflow-wrap:anywhere). */
.panduan-page .panduan-head h1,
.panduan-page .panduan-head p,
.panduan-page .panduan-article-head h1,
.panduan-page .panduan-answer,
.panduan-page .panduan-answer-title,
.panduan-page .panduan-answer-text,
.panduan-page .panduan-updated,
.panduan-page .panduan-content,
.panduan-page .panduan-faq,
.panduan-page .panduan-faq-q,
.panduan-page .panduan-faq-a,
.panduan-page .panduan-sources-title,
.panduan-page .panduan-item-title,
.panduan-page .panduan-item-answer,
.panduan-page .panduan-tile-name,
.panduan-page .panduan-tile-desc,
.panduan-page .panduan-empty-msg,
.panduan-page .panduan-empty-sub { word-break: normal; overflow-wrap: break-word; }
.panduan-page .panduan-source a,
.panduan-page .panduan-source-name,
.panduan-page .panduan-source-host { word-break: normal; overflow-wrap: anywhere; }

/* 추천 / 동작 버튼 / 공유·옵션 메뉴 (모바일 basic 구조 유지) */
.panduan-vote { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; }
.panduan-vote a, .panduan-vote span { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 999px; background: #f9fafb; color: #374151 !important; font-size: 14px; font-weight: 850; text-decoration: none !important; }
.panduan-vote b { flex-basis: 100%; font-size: 13px; color: var(--fam-accent, #e9202a); text-align: center; }
/* 메뉴는 버튼 줄 전체 폭 기준으로 위쪽에 연다(버튼이 줄바꿈되어 왼쪽에 와도 화면 밖으로 나가지 않음) */
.panduan-actions { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--fam-line, #edf0f5); }
.panduan-actions > .panduan-btn, .panduan-actions > .panduan-more { flex: 1 1 auto; }
.panduan-more { position: static; display: inline-flex; }
.panduan-more > .panduan-btn { width: 100%; }
.panduan-more-menu { display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 50; padding: 6px; background: #fff; border: 1px solid var(--fam-line, #edf0f5); border-radius: 12px; box-shadow: 0 14px 28px rgba(0, 0, 0, .12); }
.panduan-more-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #374151 !important; font-size: 14px; font-weight: 800; text-decoration: none !important; }
.panduan-more-menu a:active { background: #f9fafb; }
.panduan-share-menu ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.panduan-share-menu li a { justify-content: center; min-width: 44px; }
.panduan-share-menu img { width: auto; max-height: 32px; }

/* 첨부 / 링크 / 이전·다음 */
.panduan-files, .panduan-links { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--fam-line, #edf0f5); border-radius: var(--fam-radius, 14px); background: var(--fam-card, #fff); }
.panduan-files h3, .panduan-links h3 { margin: 0 0 4px; font-size: 15px; font-weight: 850; }
.panduan-files ul, .panduan-links ul { margin: 0; padding: 0; list-style: none; }
.panduan-files li, .panduan-links li { padding: 6px 0; border-bottom: 1px solid var(--fam-line, #edf0f5); }
.panduan-files li:last-child, .panduan-links li:last-child { border-bottom: 0; }
.panduan-files a, .panduan-links a { display: flex; align-items: center; min-height: 44px; color: var(--fam-blue, #1f6fe0) !important; font-weight: 800; text-decoration: none !important; }
.panduan-sub-info { display: block; color: #8b95a1; font-size: 12px; }
.panduan-neighbor { margin: 0 0 12px; padding: 0; list-style: none; background: var(--fam-card, #fff); border: 1px solid var(--fam-line, #edf0f5); border-radius: var(--fam-radius, 14px); overflow: hidden; }
.panduan-neighbor li { display: flex; flex-direction: column; padding: 8px 14px 0; border-bottom: 1px solid var(--fam-line, #edf0f5); }
.panduan-neighbor li:last-child { border-bottom: 0; }
.panduan-neighbor .nb-label { color: var(--fam-sub, #6b7280); font-size: 12px; font-weight: 850; }
.panduan-neighbor a { display: flex; align-items: center; min-height: 44px; color: var(--fam-ink, #111827) !important; font-size: 14px; font-weight: 750; text-decoration: none !important; }

/* 관련 글(GROWTH-002C partial): 터치 대상만 보강 */
.panduan-page .growth-related a { display: flex; align-items: center; min-height: 44px; }

/* 글쓰기 */
.panduan-write { padding: 16px 14px; }
.panduan-write .inko-field { margin-bottom: 16px; }
.panduan-write .inko-label { display: block; margin-bottom: 6px; color: var(--fam-ink, #111827); font-size: 14px; font-weight: 850; }
.panduan-write .inko-label .req { color: var(--fam-accent, #e9202a); }
.panduan-write .inko-help { margin: 6px 0 0; color: var(--fam-mute, #9ca3af); font-size: 12px; line-height: 1.5; }
.panduan-write .inko-input,
.panduan-write .inko-select,
.panduan-write .inko-textarea { display: block; width: 100%; max-width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #dbe1ea; border-radius: 12px; background: #fff; color: var(--fam-ink, #111827); font-size: 16px; font-family: inherit; }
.panduan-write .inko-textarea { min-height: 96px; line-height: 1.6; resize: vertical; }
.panduan-write .inko-input:focus,
.panduan-write .inko-select:focus,
.panduan-write .inko-textarea:focus { outline: none; border-color: var(--fam-accent, #e9202a); box-shadow: 0 0 0 3px rgba(233, 32, 42, .1); }
.panduan-write .inko-option-box { margin-bottom: 16px; padding: 4px 12px; border: 1px solid var(--fam-line, #edf0f5); border-radius: 12px; background: #f9fafb; }
.panduan-write .inko-option-box ul { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 0; padding: 0; list-style: none; }
.panduan-write .inko-option-box li { display: inline-flex; align-items: center; gap: 4px; }
.panduan-write .inko-option-box label, .panduan-write .file_del label { display: inline-flex; align-items: center; min-height: 44px; color: #374151; font-size: 14px; font-weight: 800; cursor: pointer; }
.panduan-write .panduan-admin-fields { min-width: 0; margin: 0 0 16px; padding: 12px; border: 1px dashed #fecdd3; border-radius: 12px; background: #fffafa; }
.panduan-write .panduan-admin-fields legend { padding: 0 6px; font-size: 13px; font-weight: 850; color: var(--fam-accent, #e9202a); }
.panduan-write .panduan-counter { float: right; font-weight: 700; color: var(--fam-mute, #9ca3af); }
.panduan-write .inko-content-box { overflow: hidden; border: 1px solid #dbe1ea; border-radius: 12px; background: #fff; }
.panduan-write .inko-content-box textarea,
.panduan-write .inko-content-box iframe,
.panduan-write .inko-content-box .cke,
.panduan-write .inko-content-box .smarteditor2 { max-width: 100% !important; }
.panduan-write .wr_content textarea { width: 100% !important; min-height: 220px; padding: 12px !important; border: 0 !important; font-size: 16px; line-height: 1.7; }
.panduan-write .panduan-filebox { position: relative; display: flex; align-items: center; gap: 8px; }
.panduan-write .panduan-filebox .fileName { flex: 1 1 auto; min-width: 0; background: #f9fafb; }
.panduan-write .panduan-filebox label.panduan-btn { flex: 0 0 auto; }
.panduan-write .panduan-filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.panduan-write .panduan-file-desc { margin-top: 8px; }
.panduan-write .file_del { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--fam-sub, #6b7280); font-size: 13px; }
.panduan-write #char_count_desc, .panduan-write #char_count_wrap { margin: 8px 12px; color: var(--fam-mute, #9ca3af); font-size: 12px; }
.panduan-write #captcha { max-width: 100%; }
.panduan-write .panduan-btn-area { display: flex; flex-direction: column-reverse; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--fam-line, #edf0f5); }
.panduan-write .panduan-btn-area .panduan-btn { width: 100%; min-height: 48px; font-size: 15px; }

@media (max-width: 340px) {
    .panduan-page { padding-left: 10px; padding-right: 10px; }
    .panduan-tiles a { padding: 8px 10px; }
    .panduan-tile-desc { display: none; }
}