:root { --primary:#155eef; --primary-deep:#1046c8; --bg:#f5f8ff; --card:#fff; --tx:#172542; --sub:#64748b; --bd:#e3eaf6; --pt:var(--primary); --ptx:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--tx); font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; line-height:1.6; }
button,input,select { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.site-header { background:#fff; border-bottom:1px solid #eaf0fa; }
.header-inner { max-width:1180px; margin:auto; padding:16px 24px; display:flex; align-items:center; gap:32px; }
.brand { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:850; white-space:nowrap; }
.brand-logo { display:block; width:186px; height:auto; object-fit:contain; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; color:#fff; background:linear-gradient(135deg,#11c8d5,#155eef); border-radius:12px; font-size:23px; font-weight:900; transform:rotate(-12deg); }
.site-header nav { display:flex; gap:28px; margin-left:auto; font-size:14px; font-weight:650; }
.bookmark-btn { border:0; background:var(--primary); color:#fff; border-radius:100px; padding:10px 17px; font-size:13px; font-weight:750; }
.hero { position:relative; overflow:hidden; background:linear-gradient(115deg,#f7fbff 0%,#edf5ff 58%,#dcecff 100%); }
.hero-inner { position:relative; max-width:1180px; margin:auto; min-height:470px; padding:68px 24px 56px; }
.hero-copy { position:relative; z-index:2; max-width:790px; }
.eyebrow { margin:0 0 14px; color:var(--primary); font-size:16px; font-weight:750; }
h1 { margin:0; font-size:clamp(32px,4.3vw,55px); letter-spacing:-.055em; line-height:1.23; font-weight:850; }
h1 em { font-style:normal; color:var(--primary); }
.sub { margin:20px 0 27px; color:#52647f; font-size:17px; }
.search-wrap { position:relative; display:flex; align-items:center; gap:14px; max-width:780px; min-height:66px; padding:7px 9px 7px 22px; background:#fff; border:1px solid #dce8f9; border-radius:100px; box-shadow:0 12px 32px #185ad010; color:#7183a0; }
.search-wrap input { width:100%; border:0; background:transparent; outline:none; font-size:16px; color:var(--tx); }
.search-wrap input::placeholder { color:#98a5b9; }
#searchGo { flex:0 0 49px; height:49px; border:0; border-radius:50%; background:var(--primary); color:white; font-size:25px; }
.search-results { display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:10; padding:12px; border:1px solid var(--bd); border-radius:16px; background:#fff; box-shadow:0 14px 35px #193c7c21; }
.search-results.open { display:flex; flex-wrap:wrap; gap:7px; }
.search-results button { padding:9px 12px; border:1px solid var(--bd); border-radius:9px; background:#f7faff; color:var(--tx); }
.search-results p { padding:0 8px; color:var(--sub); font-size:14px; }
.popular { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:17px; }
.popular strong { margin-right:4px; color:var(--primary); font-size:13px; }
.popular button { padding:8px 12px; border:1px solid #dce8fc; border-radius:100px; background:#ffffffb8; color:#34517b; font-size:13px; }
.hero-art { position:absolute; bottom:0; right:0; width:450px; pointer-events:none; opacity:.94; overflow:visible; }
.hero-ribbon-svg { width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 15px 22px rgba(0,113,238,.09)); }
.page-container { max-width:1180px; padding:0 24px 60px; margin:auto; }
.category-panel { position:relative; margin-top:-20px; padding:25px 28px; border-radius:20px; background:#fff; box-shadow:0 15px 40px #123f7b0b; }
.category-intro { display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
h2 { margin:0; font-size:23px; letter-spacing:-.035em; }
.category-intro p,.section-head p { margin:3px 0 0; color:var(--sub); font-size:14px; }
.tabs { display:flex; gap:10px; flex-wrap:wrap; }
#grps button { flex:1 1 150px; padding:18px 10px; border:1px solid var(--bd); border-radius:13px; background:#f8faff; color:#385175; font-size:15px; font-weight:750; }
#grps button.on { border-color:var(--primary); background:#ebf2ff; color:var(--primary); }
.recommend-section,.all-section,.editor-section { padding-top:42px; }
.section-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:15px; margin-bottom:18px; }
.section-head-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.all-section > .section-head { margin-bottom:0; }
.all-section > .compact-how { margin:7px 0 18px; }
.section-head a,.share-btn { color:var(--primary); font-size:14px; font-weight:750; }
#recommendItems { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }
#recommendItems button { text-align:left; min-height:140px; padding:22px 17px; background:#fff; border:1px solid var(--bd); border-radius:16px; color:var(--tx); font-size:16px; font-weight:750; box-shadow:0 6px 20px #1b45800a; }
#recommendItems button .doc-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:15px; border-radius:12px; background:#e8f1ff; color:var(--primary); }
#recommendItems button::after { content:'작성하기  →'; display:block; margin-top:8px; color:var(--primary); font-size:12px; font-weight:600; }
#tabs { gap:8px; display:flex; flex-wrap:wrap; }
#tabs button { border:1px solid var(--bd); border-radius:50px; padding:10px 15px; background:#fff; color:#445674; font-size:14px; font-weight:500; }
#tabs button.on { border-color:var(--primary); background:var(--primary); color:#fff; }
#docCount { font-size:13px; color:var(--sub); }
.editor-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:20px; align-items:start; }
.editor-left,.editor-right { min-width:0; }
.card { background:var(--card); border:1px solid var(--bd); border-radius:17px; padding:23px; margin-bottom:18px; }
.card h3 { margin:0 0 15px; font-size:17px; }
label { display:block; margin:14px 0 5px; font-size:13px; color:#536582; font-weight:650; }
input:not([type="range"]):not([type="file"]):not([type="search"]),select,textarea { width:100%; padding:12px; border:1px solid #dce5f1; border-radius:9px; background:#fafcff; color:var(--tx); font-size:15px; }
input[type="file"] { max-width:100%; font-size:13px; }
input:focus,select:focus { outline:2px solid #b7cfff; outline-offset:1px; }
.preview-label { margin-bottom:14px; color:var(--primary); font-weight:750; font-size:14px; }
.paper { padding:28px 24px; min-height:330px; border:1px solid #e5e9ef; background:#fff; color:#171717; border-radius:8px; white-space:pre-wrap; word-break:keep-all; line-height:1.9; font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif; font-size:14px; }
.paper h2 { text-align:center; font-size:22px; letter-spacing:4px; margin:0 0 20px; }
.acts { display:flex; gap:10px; margin-top:15px; }
.acts button { flex:1; padding:12px; border:1px solid var(--primary); border-radius:10px; background:var(--primary); color:white; font-size:14px; font-weight:750; }
.acts button.g { background:white; color:var(--primary); }
@media(max-width:650px) { .acts { flex-wrap:wrap; } .acts button { flex:1 1 100%; } }
.share-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; background:#fff; border:1px solid var(--bd); border-radius:100px; }
.share-btn .material-symbols-rounded { font-size:18px; }
.note { font-size:12px; color:var(--sub); }
.legal { margin-top:22px; }
.guide h3 { margin:15px 0 5px; font-size:16px; }
.guide h3:first-child { margin-top:0; }
.guide p,.guide li { margin:0 0 5px; font-size:13px; }
.guide ul { padding-left:20px; }
.x { font-size:13px; padding:8px 12px; margin:6px 6px 0 0; border:1px solid var(--bd); border-radius:8px; background:#f7faff; color:var(--tx); }
.hm { color:var(--primary); font-size:13px; padding-top:8px; }
.hm:empty { display:none; }
.stamp { text-align:right; margin-top:10px; }
.stamp-anchor { position:relative; display:inline-block; white-space:nowrap; }
.stamp-anchor .stamp-overlay { position:absolute; left:0; top:50%; transform:translate(0,-50%); display:block; pointer-events:none; z-index:2; max-width:none; height:auto; opacity:.85; }
.stamp-anchor-long .stamp-overlay { left:auto; right:0; transform:translate(35%,-50%); }
.stamp img,.ph img { max-width:100%; }
.ph { margin-top:20px; }
.ph img { display:block; margin:10px 0; }
footer { padding:30px; border-top:1px solid var(--bd); text-align:center; font-size:12px; color:var(--sub); }
@media (max-width:900px) { .hero-art { opacity:.22; right:0; bottom:0; width:350px; } #recommendItems { grid-template-columns:repeat(3,minmax(0,1fr)); } .editor-grid { grid-template-columns:1fr; } }
@media (max-width:580px) { .header-inner { padding:13px 16px; } .site-header nav { display:none; } .bookmark-btn { margin-left:auto; padding:8px 11px; font-size:11px; } .brand { font-size:18px; } .hero-inner { min-height:410px; padding:50px 18px 48px; } .sub { font-size:14px; } .search-wrap { min-height:58px; } #searchGo { flex-basis:42px; height:42px; } .popular { gap:6px; } .popular button { font-size:12px; padding:7px 9px; } .page-container { padding:0 15px 40px; } .category-panel { padding:18px 15px; } .category-intro { display:block; } #grps button { flex-basis:calc(50% - 8px); padding:12px 5px; font-size:13px; } #recommendItems { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } #recommendItems button { min-height:130px; padding:15px 12px; font-size:14px; } .section-head { align-items:flex-start; } .section-head a { white-space:nowrap; font-size:12px; } .card { padding:16px; } .paper { padding:20px 15px; } }
@media print { body { background:white; } body > *:not(main) { display:none!important; } main > *:not(.page-container) { display:none!important; } .page-container > *:not(.editor-section) { display:none!important; } .editor-section > *:not(.editor-grid) { display:none!important; } .editor-left { display:none!important; } .editor-grid { display:block!important; } .editor-right > *:not(#pv) { display:none!important; } #pv { border:0; padding:0; margin:0; } .preview-label,.acts,#msg { display:none!important; } .paper { border:0; padding:0; } .ph { page-break-before:always; } }
 .material-symbols-rounded { font-size:22px; line-height:1; font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24; vertical-align:middle; }
.bookmark-btn { display:inline-flex; align-items:center; gap:7px; }
.bookmark-btn .material-symbols-rounded { font-size:18px; }
#grps button { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
#grps .category-icon { font-size:20px; }
#searchGo { display:flex; align-items:center; justify-content:center; }
@media (max-width:580px) { #grps .category-icon { font-size:18px; } .bookmark-btn .material-symbols-rounded { font-size:16px; } }

/* Main information architecture */
#all-documents, #categories, #how-to, #editor { scroll-margin-top:90px; }
#filterTabs { margin:20px 0 12px; gap:8px; flex-wrap:wrap; }
#filterTabs button { border:1px solid #dce5f3; border-radius:100px; background:#fff; color:#49607f; padding:9px 16px; font-size:13px; cursor:pointer; }
#filterTabs button.on { background:#2563eb; border-color:#2563eb; color:#fff; font-weight:700; }
#tabs { gap:8px; }
#tabs button { padding:12px 16px; background:#fff; border:1px solid #dce5f3; border-radius:50px; font-size:14px; font-weight:500; }
#tabs button.on { background:#eef4ff; border-color:#2563eb; color:#1d4ed8; }
.steps-section { margin-top:52px; }
.steps-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.steps-grid > div { display:flex; flex-direction:column; gap:8px; padding:24px 20px; background:#fff; border:1px solid #e1e9f6; border-radius:18px; }
.steps-grid b { color:#2563eb; font-size:13px; }
.steps-grid strong { font-size:17px; }
.steps-grid span { color:#64748b; font-size:13px; }
@media(max-width:768px) { .steps-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .steps-grid > div { padding:17px 13px; } .steps-grid strong { font-size:15px; } }

/* Compact usage guide */
.compact-how { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:7px 0 0; font-size:13px; line-height:1.6; color:#60718b; }
.compact-how .material-symbols-rounded { font-size:17px; color:#3975d7; }
.compact-how .arrow { color:#9aa9bc; }
@media (max-width:580px) { .compact-how { font-size:12px; gap:4px; } }

/* Single enlarged category navigation below the all-documents heading */
.category-compact {
    margin: 0 0 16px;
    padding: 23px 26px;
    border: 1px solid #e1e9f6;
    border-radius: 13px;
    background: #f7faff;
    box-shadow: none;
}
.category-compact .category-intro {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 17px;
}
.category-compact .category-intro h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 750;
    color: #24456f;
}
.category-compact .category-intro p {
    margin: 0;
    font-size: 13px;
    color: #71839e;
}
.category-compact #grps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.category-compact #grps button {
    flex: 0 1 auto;
    padding: 13px 19px;
    border: 1px solid #dbe6f5;
    border-radius: 9px;
    background: #fff;
    color: #456181;
    font-size: 14px;
    font-weight: 650;
}
.category-compact #grps button.on {
    border-color: #80a9f8;
    background: #e8f0ff;
    color: #1d56cb;
}
.category-compact #grps .category-icon {
    font-size: 20px;
}
@media (max-width:580px) {
    .category-compact {
        padding: 18px 15px;
    }
    .category-compact .category-intro {
        display: block;
    }
    .category-compact .category-intro p {
        margin-top: 3px;
    }
    .category-compact #grps button {
        flex: 0 1 auto;
        padding: 11px 13px;
        font-size: 13px;
    }
}

.custom-editor { margin-top:18px; padding-top:16px; border-top:1px solid #e3eaf6; }
.custom-editor-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.custom-editor-head h3 { margin:0; font-size:16px; }
.custom-editor-actions { display:flex; gap:7px; }
.custom-editor-actions button { border:1px solid #c9d9f5; border-radius:9px; background:#eff5ff; color:#1854c9; font-size:14px; font-weight:700; padding:8px 14px; cursor:pointer; }
.custom-fields { display:grid; gap:12px; margin-top:12px; }
.custom-field { border:1px solid #dce6f5; background:#f8fbff; border-radius:12px; padding:12px; }
.custom-field-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.custom-field-head strong { font-size:13px; }
.custom-field-head button { border:0; background:transparent; color:#4262a3; cursor:pointer; }
.custom-field textarea { min-height:95px; resize:vertical; }
.custom-field input { background:white; }
.custom-hint { font-size:12px; color:#64748b; margin:10px 0 0; }
.preview-custom { border:1px dashed #b7c9eb; padding:12px 14px; margin-top:14px; border-radius:8px; cursor:grab; white-space:pre-wrap; background:#f8fbff; }
.preview-custom:active { cursor:grabbing; }
.preview-custom.dragging { opacity:.45; }
.preview-custom.drag-over { outline:2px solid #2563eb; outline-offset:2px; }
.preview-custom-title { display:block; font-weight:700; margin-bottom:5px; }
.preview-custom-tools { display:flex; justify-content:flex-end; gap:6px; font-family:Pretendard,sans-serif; font-size:11px; color:#64748b; margin-bottom:5px; }
.preview-custom-tools button { border:1px solid #d9e5f8; background:white; color:#2454b0; border-radius:5px; padding:2px 7px; cursor:pointer; }
@media print { .preview-custom { border:0; padding:0; background:white; break-inside:avoid; } .preview-custom-tools { display:none!important; } }
.document-paragraph { white-space:pre-wrap; margin:0; min-height:1.9em; }
.document-drop-zone { height:0; min-height:0; overflow:hidden; border-radius:6px; color:transparent; font:11px Pretendard,sans-serif; text-align:center; transition:height .12s ease; }
#paper.reordering .document-drop-zone { height:18px; overflow:visible; border-top:1px dashed #b6cafa; } #paper.reordering .document-drop-zone:hover, .document-drop-zone.drop-active { height:36px; padding:8px; background:#e9f2ff; outline:2px dashed #2563eb; color:#1d4ed8; }
@media print { .document-drop-zone { display:none!important; } .document-paragraph { margin:0; } }
@media (max-width:580px) { .brand-logo { width:145px; } }

#msg, .msg { font-size:12px; line-height:1.55; margin-top:12px; }
@media (max-width:580px) { .hero-art { width:280px; right:0; bottom:0; opacity:.16; } }

.hero-art .hero-ribbon-image { display:block; width:100%; height:100%; object-fit:contain; }

/* Hero artwork is positioned relative to the full .hero section. */
@media (max-width: 580px) {
    .search-wrap {
        min-height: 46px;
        padding: 4px 6px 4px 13px;
        gap: 7px;
    }
    .search-wrap input {
        min-width: 0;
        font-size: 13px;
    }
    .search-wrap > .material-symbols-rounded { font-size: 19px; }
    #searchGo { flex: 0 0 36px; height: 36px; font-size: 19px; }
    #searchGo .material-symbols-rounded { font-size: 19px; }
    #tabs { gap: 5px; }
    #tabs button { padding: 6px 16px; }
    #filterTabs { gap: 5px; margin: 12px 0 9px; }
    #filterTabs button { padding: 6px 10px; font-size: 11px; }
}

/* 첨부 파일 선택 버튼 */
.file-picker { margin-top:6px; }
.file-picker-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip-path:inset(50%); }
.file-picker-button { display:flex; align-items:center; gap:9px; min-height:46px; margin:0; padding:10px 13px; border:1px solid #dce5f1; border-radius:9px; background:#fff; color:#8193ac; font-size:13px; font-weight:500; cursor:pointer; transition:border-color .2s, background .2s; }
.file-picker-button .material-symbols-rounded { font-size:20px; color:#8193ac; }
.file-picker-button:hover { border-color:var(--primary); background:#f7faff; color:var(--primary); }
.file-picker-input:focus-visible + .file-picker-button { outline:2px solid var(--primary); outline-offset:2px; }
.file-picker-name { display:block; margin-top:5px; font-size:12px; color:var(--sub); overflow-wrap:anywhere; }
.file-picker-name:empty { display:none; }

/* 북마크 안내는 페이지 안의 텍스트로 표시 */
.hm { white-space:pre-line; }


.site-info-footer{background:#fff;border-top:1px solid #e3eaf6;padding:30px 20px;text-align:center;color:#64748b;font-size:13px}.site-info-inner{max-width:960px;margin:auto}.site-info-footer nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 20px;margin-bottom:12px}.site-info-footer a{color:#334155;text-decoration:none}.site-info-footer a:hover,.site-info-footer a:focus-visible{color:var(--primary,#155eef);text-decoration:underline}.site-info-footer p{margin:0 0 8px;color:#64748b}.site-info-footer small{color:#94a3b8}@media print{.site-info-footer{display:none!important}}

.seo-index{background:#fff;padding:52px 24px}.seo-index-inner{max-width:1180px;margin:auto}.seo-index h2{font-size:26px;margin:0 0 10px}.seo-index p{color:#52647f}.seo-index ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:22px 0}.seo-index li a{display:block;padding:15px;border:1px solid #e3eaf6;border-radius:12px;color:#155eef;font-weight:650}.seo-index li a:hover{background:#f5f8ff}.seo-notice{font-size:13px}@media(max-width:768px){.seo-index ul{grid-template-columns:1fr}}