@charset "utf-8";
/* GROWTH-003P: Panduan Korea PC 스킨. 디자인 토큰 = css/inko-family.css 의 --fam-* (없으면 같은 값의 fallback).
   제목 영역은 작게(큰 배너 없음), 가로 스크롤 없음, 터치 대상 최소 44px. */

#container_title { display: none !important; }

.panduan-page {
    max-width: 980px;
    margin: 24px auto 64px;
    padding: 0 20px;
    font-family: Arial, "Noto Sans KR", sans-serif;
    color: var(--fam-ink, #111827);
    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 { max-width: 100%; height: auto; }

/* breadcrumb: GROWTH-002C partial 과 같은 모양(4단계는 이 스킨이 직접 출력하므로 여기에도 둔다) */
.panduan-page .growth-breadcrumb { max-width: 100%; margin: 0 0 10px; font-size: 13px; 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 6px; 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-page .growth-breadcrumb a:hover { color: var(--fam-accent, #e9202a) !important; }

/* 제목 영역(작게) */
.panduan-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0 0 14px;
}
.panduan-head-text { min-width: 0; flex: 1 1 320px; }
.panduan-kicker { display: inline-flex; align-items: center; min-height: 44px; margin: 0; color: var(--fam-accent, #e9202a); font-size: 13px; font-weight: 800; text-decoration: none !important; }
.panduan-head h1 { margin: 0; font-size: 22px; 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; }

/* 버튼 */
.panduan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    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;
}
.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 14px;
    border: 1px solid #dbe1ea;
    border-radius: 12px;
    background: var(--fam-card, #fff);
    font-size: 15px;
    color: var(--fam-ink, #111827);
}
.panduan-search input[type="search"]:focus { outline: none; border-color: var(--fam-accent, #e9202a); box-shadow: 0 0 0 4px rgba(233, 32, 42, 0.08); }
.panduan-search button {
    flex: 0 0 auto;
    min-width: 72px;
    height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--fam-accent, #e9202a);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

/* 분류 칩: 줄바꿈(가로 스크롤 없음) */
.panduan-chips { margin: 0 0 16px; }
.panduan-chips ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.panduan-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    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:hover { border-color: var(--fam-accent, #e9202a); }
.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 16px;
    padding: 18px 20px;
    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 10px; font-size: 17px; font-weight: 850; color: var(--fam-ink, #111827); }

/* 허브 분류 타일 */
.panduan-tiles ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.panduan-tiles a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--fam-tile, #f3f5fa);
    color: var(--fam-tile-ink, #1e2a4a) !important;
    text-decoration: none !important;
}
.panduan-tiles a:hover { background: var(--fam-accent-soft, #fff1f2); }
.panduan-tile-name { font-size: 15px; font-weight: 850; }
.panduan-tile-desc { font-size: 13px; line-height: 1.5; color: var(--fam-sub, #6b7280); }

/* 질문 목록 */
.panduan-items { margin: 0; padding: 0; list-style: none; }
.panduan-item { padding: 12px 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 > a:hover .panduan-item-title { color: var(--fam-accent, #e9202a); }
.panduan-item-answer { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: #4b5563; }
.panduan-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 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-pages { margin: 18px 0; text-align: center; }

/* 빈 상태 */
.panduan-empty { padding: 26px 20px; 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; color: var(--fam-sub, #6b7280); }
.panduan-empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.panduan-empty-links a { display: inline-flex; align-items: center; min-height: 44px; 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-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }

/* 질문 페이지 */
.panduan-article { padding: 22px 26px 26px; }
.panduan-article-head { margin: 0 0 14px; }
.panduan-article-head h1 { margin: 0; font-size: 24px; line-height: 1.4; font-weight: 850; letter-spacing: -0.3px; color: var(--fam-ink, #111827); }
.panduan-answer {
    margin: 0 0 12px;
    padding: 14px 16px;
    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.65; font-weight: 700; color: var(--fam-ink, #111827); }
.panduan-updated { margin: 0 0 16px; font-size: 13px; color: var(--fam-sub, #6b7280); }
.panduan-content { margin: 0 0 8px; color: #1f2937; font-size: 15px; line-height: 1.85; word-break: break-word; }
.panduan-content p { margin: 0 0 16px; }
.panduan-content h2 { margin: 24px 0 10px; font-size: 19px; font-weight: 850; }
.panduan-content h3 { margin: 18px 0 8px; font-size: 16px; font-weight: 850; }
.panduan-content ol, .panduan-content ul { margin: 0 0 16px; padding-left: 22px; }
.panduan-content img { border-radius: 12px; }
.panduan-content table { display: block; max-width: 100%; overflow-x: auto; }

.panduan-faq, .panduan-sources { margin: 22px 0 0; padding: 16px 18px; border: 1px solid var(--fam-line, #edf0f5); border-radius: 12px; background: #f9fafb; }
.panduan-faq-title, .panduan-sources-title { margin: 0 0 8px; font-size: 17px; 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: 14px; 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: 4px 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: 16px; }

/* GROWTH-003F: 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-files, .panduan-links { margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--fam-line, #edf0f5); border-radius: 12px; background: #f9fafb; }
.panduan-files h3, .panduan-links h3 { margin: 0 0 6px; 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: 8px 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: inline-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-share { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 0 12px; }
.panduan-vote { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; }
.panduan-vote a, .panduan-vote span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid #e5e7eb; border-radius: 999px; background: #f9fafb; color: #374151 !important; font-weight: 850; text-decoration: none !important; }
.panduan-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid var(--fam-line, #edf0f5); }
.panduan-actions-group { display: flex; flex-wrap: wrap; gap: 8px; }
.panduan-more { position: relative; }
.panduan-more-menu { display: none; position: absolute; right: 0; bottom: 50px; z-index: 50; width: max-content; max-width: calc(100vw - 32px); overflow: hidden; background: #fff; border: 1px solid var(--fam-line, #edf0f5); border-radius: 12px; box-shadow: 0 14px 28px rgba(0, 0, 0, .1); }
.panduan-more-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: #374151 !important; font-size: 13px; font-weight: 800; text-decoration: none !important; }
.panduan-more-menu a:hover { background: #f9fafb; }
.panduan-neighbor { margin: 0 0 16px; padding: 0; list-style: none; background: #fff; border: 1px solid var(--fam-line, #edf0f5); border-radius: var(--fam-radius, 14px); overflow: hidden; }
.panduan-neighbor li { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--fam-line, #edf0f5); }
.panduan-neighbor li:last-child { border-bottom: 0; }
.panduan-neighbor .nb-label { flex-shrink: 0; width: 84px; color: var(--fam-sub, #6b7280); font-size: 12px; font-weight: 850; }
.panduan-neighbor a { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 44px; color: var(--fam-ink, #111827) !important; font-size: 14px; font-weight: 750; text-decoration: none !important; }

/* 글쓰기 */
.panduan-write { padding: 22px 26px 26px; }
.panduan-write .inko-field { margin-bottom: 18px; }
.panduan-write .inko-label { display: block; margin-bottom: 7px; color: var(--fam-ink, #111827); font-size: 13px; 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 { width: 100%; min-height: 44px; padding: 11px 14px; border: 1px solid #dbe1ea; border-radius: 12px; background: #fff; color: var(--fam-ink, #111827); font-size: 14px; 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 4px rgba(233, 32, 42, .08); }
.panduan-write .inko-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.panduan-write .inko-option-box { margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--fam-line, #edf0f5); border-radius: 12px; background: #f9fafb; }
.panduan-write .inko-option-box ul { display: flex; flex-wrap: wrap; gap: 13px; margin: 0; padding: 0; list-style: none; }
.panduan-write .inko-option-box label { color: #374151; font-size: 13px; font-weight: 800; }
.panduan-write .panduan-admin-fields { margin: 0 0 18px; padding: 16px; 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: 15px !important; border: 0 !important; font-size: 14px; line-height: 1.75; }
.panduan-write .inko-file-field, .panduan-write .inko-link-field { display: flex; align-items: center; gap: 9px; }
.panduan-write .inko-file-field input[type="file"] { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px dashed #dbe1ea; border-radius: 12px; background: #f9fafb; font-size: 13px; }
.panduan-write .file_del { display: block; margin-top: 8px; color: var(--fam-sub, #6b7280); font-size: 12px; }
.panduan-write #btn_autosave { min-height: 44px; margin-top: 8px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb; color: #374151; font-size: 13px; font-weight: 800; cursor: pointer; }
.panduan-write #autosave_wrapper { position: relative; }
.panduan-write #autosave_pop { z-index: 1000; max-width: calc(100vw - 32px); }
.panduan-write #autosave_pop a, .panduan-write #autosave_pop button { display: inline-flex; align-items: center; min-height: 44px; }
.panduan-write .inko-option-box label, .panduan-write .file_del label { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.panduan-write #char_count_desc, .panduan-write #char_count_wrap { margin: 8px 0; color: var(--fam-mute, #9ca3af); font-size: 12px; }
.panduan-write .panduan-btn-area { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--fam-line, #edf0f5); }

@media (max-width: 800px) {
    .panduan-page { margin-top: 18px; padding: 0 14px; }
    .panduan-head h1 { font-size: 20px; }
    .panduan-article-head h1 { font-size: 21px; }
    .panduan-card, .panduan-tiles, .panduan-list, .panduan-article, .panduan-write { padding: 16px; }
    .panduan-tiles ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panduan-write .inko-row { grid-template-columns: 1fr; }
    .panduan-write .panduan-btn-area { flex-direction: column-reverse; }
    .panduan-write .panduan-btn-area .panduan-btn { width: 100%; }
    .panduan-neighbor li { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 14px; }
    .panduan-neighbor .nb-label { width: auto; }
}
@media (max-width: 480px) {
    .panduan-tiles ul { grid-template-columns: 1fr; }
}