*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:#1e293b;background:#fff}a{color:inherit}.wrap{width:min(1120px,calc(100% - 36px));margin:0 auto}.site-header{position:sticky;top:0;background:rgba(255,255,255,.96);border-bottom:1px solid #e2e8f0;z-index:10}.header-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-size:1.25rem;font-weight:800;text-decoration:none}.main-nav{display:flex;gap:20px}.main-nav a{text-decoration:none;color:#475569}.hero{background:linear-gradient(135deg,#f8fafc,#eef2ff);padding:88px 0}.hero-inner{max-width:850px}.eyebrow{font-weight:700;color:#475569}.hero h1{font-size:clamp(2.1rem,5vw,4.1rem);line-height:1.08;margin:12px 0 18px}.hero p{font-size:1.08rem;line-height:1.8;color:#475569}.button{display:inline-block;margin-top:18px;padding:13px 20px;border-radius:12px;background:#0f172a;color:#fff;text-decoration:none;font-weight:700}.section{padding:72px 0}.section.alt{background:#f8fafc}.section h2{font-size:2rem}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card,.empty{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:24px}.empty{color:#64748b}.site-footer{border-top:1px solid #e2e8f0;padding:26px 0;color:#64748b}.footer-inner{display:flex;justify-content:space-between}.footer-inner a{text-decoration:none}@media(max-width:760px){.header-inner{align-items:flex-start;flex-direction:column;padding:18px 0}.main-nav{flex-wrap:wrap}.hero{padding:60px 0}.cards{grid-template-columns:1fr}}
.page-content{max-width:900px}.page-content h1{font-size:2.4rem;margin-bottom:28px}.wysiwyg-body{line-height:1.9;font-size:1.05rem}
.main-nav{align-items:center}
.nav-item{position:relative}
.nav-item>a{display:block;padding:9px 2px}
.sub-nav{display:none;position:absolute;left:-16px;top:100%;min-width:180px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:8px;box-shadow:0 16px 40px rgba(15,23,42,.12)}
.sub-nav a{display:block;padding:9px 11px;border-radius:8px;white-space:nowrap}
.sub-nav a:hover{background:#f1f5f9}
.nav-item.has-child:hover .sub-nav{display:block}
@media(max-width:760px){
.main-nav{width:100%;display:block}
.nav-item{width:100%}
.sub-nav{position:static;display:block;border:0;box-shadow:none;padding:2px 0 6px 16px}
}
.board-wrap{max-width:920px}
.board-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.board-head h1{margin:4px 0 0;font-size:2.2rem}
.secondary-link{display:inline-block;padding:10px 14px;border:1px solid #cbd5e1;border-radius:10px;text-decoration:none;background:#fff}
.board-list{border-top:2px solid #0f172a}
.board-row{display:flex;justify-content:space-between;gap:18px;padding:16px 8px;border-bottom:1px solid #e2e8f0;text-decoration:none}
.board-title{font-weight:700}
.board-meta{color:#64748b;font-size:.92rem;white-space:nowrap}
.post-meta{color:#64748b;border-bottom:1px solid #e2e8f0;padding-bottom:18px}
.post-body{padding:30px 0;line-height:1.9;min-height:180px}
.board-write-box{margin-top:38px;padding:22px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}
.board-write-box form{display:grid;gap:14px}
.board-write-box label{display:grid;gap:7px;font-weight:700}
.board-write-box input,.board-write-box textarea{width:100%;padding:12px 13px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;font:inherit}
.board-write-box button,.danger-public-btn{border:0;border-radius:10px;padding:12px 16px;font-weight:800;cursor:pointer}
.board-write-box button{background:#0f172a;color:#fff}
.danger-public-btn{background:#fee2e2;color:#991b1b}
@media(max-width:760px){.board-row{flex-direction:column}.board-meta{white-space:normal}.board-head{flex-direction:column}}
.board-search{display:flex;gap:8px;margin-bottom:16px}
.board-search input{flex:1;padding:11px 12px;border:1px solid #cbd5e1;border-radius:10px;font:inherit}
.board-search button{border:0;border-radius:10px;background:#0f172a;color:#fff;padding:11px 16px;font-weight:800}
.pager{display:flex;gap:7px;justify-content:center;margin:24px 0}
.pager a,.pager strong{min-width:34px;text-align:center;padding:8px;border:1px solid #cbd5e1;border-radius:8px;text-decoration:none}
.pager strong{background:#0f172a;color:#fff;border-color:#0f172a}
.attachment-box{margin:18px 0;padding:14px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}
.edit-box{margin:24px 0;border:1px solid #e2e8f0;border-radius:14px;padding:14px}
.edit-box summary{cursor:pointer;font-weight:800}
.edit-box form{display:grid;gap:14px;margin-top:16px}
.edit-box label{display:grid;gap:7px;font-weight:700}
.edit-box input,.edit-box textarea{width:100%;padding:12px 13px;border:1px solid #cbd5e1;border-radius:10px;font:inherit}
.edit-box button{border:0;border-radius:10px;background:#0f172a;color:#fff;padding:12px 16px;font-weight:800}
.upload-note{margin:0;color:#64748b;font-size:.9rem}
.gallery-wrap{max-width:1120px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.gallery-card{display:block;text-decoration:none;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;background:#fff}
.gallery-card img,.gallery-placeholder{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#f1f5f9}
.gallery-placeholder{display:flex;align-items:center;justify-content:center;color:#94a3b8}
.gallery-card strong{display:block;padding:14px 15px}
.gallery-detail-image{margin:20px 0}
.gallery-detail-image img{display:block;max-width:100%;max-height:760px;margin:0 auto;border-radius:16px}
@media(max-width:980px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.gallery-grid{grid-template-columns:1fr}}
.cms-popup{position:relative;width:100%;background:#fff;border:1px solid #cbd5e1;border-radius:16px;padding:22px;box-shadow:0 16px 42px rgba(15,23,42,.16)}
.cms-popup h3{margin:0 34px 10px 0}.cms-popup p{line-height:1.7;color:#475569}.cms-popup-close{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:1.7rem;cursor:pointer;color:#64748b}
.contact-wrap{max-width:760px}.contact-form{display:grid;gap:15px;margin-top:24px}.contact-form label{display:grid;gap:7px;font-weight:700}.contact-form input,.contact-form textarea{width:100%;padding:12px 13px;border:1px solid #cbd5e1;border-radius:10px;font:inherit}.contact-form button{border:0;border-radius:10px;background:#0f172a;color:#fff;padding:13px 18px;font-weight:800}.contact-success{margin-top:24px;padding:18px;border-radius:14px;background:#ecfdf5;color:#166534;font-weight:700}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.section-title-row h2{margin:0}
.section-title-row a{text-decoration:none;font-weight:700;color:#475569}
.cta-block{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px;border:1px solid #e2e8f0;border-radius:18px;background:#f8fafc}
.cta-block h2{margin-top:0}
@media(max-width:700px){.cta-block{align-items:flex-start;flex-direction:column}}
html,body{font-size:var(--cms-font-size,16px)}
.wrap{width:min(var(--cms-content-width,1120px),calc(100% - 36px))}
.button,.board-write-box button,.contact-form button,.edit-box button{background:var(--cms-primary,#0f172a)}
.eyebrow,.section-title-row a{color:var(--cms-accent,#475569)}
.brand-with-logo{display:flex;align-items:center;gap:10px}
.brand-with-logo img{height:42px;max-width:150px;object-fit:contain}
.header-center .header-inner{flex-direction:column;justify-content:center;padding:14px 0}
.header-center .main-nav{justify-content:center}
.header-compact .header-inner{min-height:54px}
.header-compact .brand-with-logo img{height:32px}
.account-nav{display:flex;align-items:center;gap:10px;font-size:.9rem}.account-nav a{text-decoration:none}.account-nav span{color:#64748b}
.account-wrap{max-width:560px}.account-form{display:grid;gap:14px;margin-top:22px}.account-form label{display:grid;gap:7px;font-weight:700}.account-form input{width:100%;padding:12px 13px;border:1px solid #cbd5e1;border-radius:10px;font:inherit}.account-form button{border:0;border-radius:10px;background:var(--cms-primary,#0f172a);color:#fff;padding:13px 18px;font-weight:800}.form-message{margin:16px 0;padding:12px 14px;border-radius:10px;background:#fff7ed;color:#9a3412}
@media(max-width:760px){.account-nav{width:100%;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}}
.join-policy-note{margin:18px 0;padding:14px 16px;border-radius:12px;background:#eff6ff;color:#1e3a8a;line-height:1.7}
/* v1.7 news/article */
.news-list{display:grid;gap:0;border-top:1px solid #e2e8f0}
.news-list-item{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid #e2e8f0}
.news-list-item.compact{grid-template-columns:150px minmax(0,1fr);gap:16px;padding:15px 0}
.news-thumb{display:block;overflow:hidden;border-radius:12px;background:#f1f5f9;aspect-ratio:16/10}
.news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.news-list-body{min-width:0}.news-kicker{display:flex;align-items:center;gap:8px;min-height:23px;color:var(--cms-accent,#475569);font-size:.8rem;font-weight:800}
.news-featured{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#fee2e2;color:#991b1b;font-size:.72rem;font-weight:900}
.news-list-body h3{margin:5px 0 7px;font-size:1.22rem;line-height:1.4}.news-list-item.compact h3{font-size:1.02rem}
.news-list-body h3 a{text-decoration:none;color:#111827}.news-list-body h3 a:hover{text-decoration:underline}
.news-list-body p{margin:0 0 9px;color:#64748b;line-height:1.65;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.news-list-meta{display:flex;flex-wrap:wrap;gap:9px;color:#94a3b8;font-size:.8rem}.news-list-meta a{color:#64748b;text-decoration:none;font-weight:700}
.news-filter-state{margin:5px 0 0;color:#64748b}.news-search{margin-bottom:20px}
.news-article-wrap{max-width:940px}.news-article-topline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.news-section-chip{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eef2ff;color:#3730a3;text-decoration:none;font-size:.82rem;font-weight:800}
.news-article-header{padding-bottom:24px;border-bottom:1px solid #e2e8f0}.news-article-header h1{max-width:900px;margin:0;font-size:2.35rem;line-height:1.28;letter-spacing:-.025em}
.news-article-summary{max-width:850px;margin:16px 0 0;color:#475569;font-size:1.08rem;line-height:1.75}
.news-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px;color:#64748b;font-size:.85rem}.news-article-meta a{color:#334155;text-decoration:none}
.news-print-btn{border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:6px 9px;color:#475569;cursor:pointer}
.news-article-lead{margin:28px 0 0}.news-article-lead img{display:block;max-width:100%;width:100%;height:auto;border-radius:14px}
.news-article-body{margin-top:30px;font-size:1.05rem;line-height:1.95}.news-article-body p{margin:0 0 1.25em}
.news-related{margin-top:42px;padding-top:28px;border-top:2px solid #111827}.news-related h2{margin:0 0 10px}.news-related-list .news-list-item{grid-template-columns:120px minmax(0,1fr)}
.news-write-box,.news-edit-box{margin-top:34px}.news-form-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;align-items:end}
.news-feature-check{display:flex!important;align-items:center!important;gap:8px;padding:12px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc}.news-feature-check input{width:auto!important}
.news-byline-preview{padding:12px 14px;border-radius:10px;background:#f8fafc;color:#475569}.news-byline-preview strong{color:#111827}
.news-write-box small,.news-edit-box small{display:block;margin-top:5px;color:#64748b}
.news-home-list .news-list-item:first-child{padding-top:8px}
@media(max-width:760px){
.news-list-item,.news-list-item.compact,.news-related-list .news-list-item{grid-template-columns:110px minmax(0,1fr);gap:12px}
.news-list-item:not(:has(.news-thumb)),.news-list-item.compact:not(:has(.news-thumb)){grid-template-columns:1fr}
.news-list-body p{display:none}.news-list-body h3{font-size:1rem}
.news-article-header h1{font-size:1.75rem}.news-article-summary{font-size:1rem}
.news-form-grid{grid-template-columns:1fr}
}
@media print{
.site-header,.site-footer,.account-nav,.main-nav,.edit-box,.danger-public-btn,.news-related,.news-print-btn,.attachment-box{display:none!important}
.news-article-section{padding:0!important}.news-article-wrap{max-width:none!important}.news-article-header h1{font-size:24pt}.news-article-body{font-size:11pt;line-height:1.8}
body{background:#fff!important}
}
/* v1.8 editorial workflow / newsroom */
.news-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.74rem;font-weight:900}
.news-status-draft{background:#f1f5f9;color:#475569}
.news-status-review{background:#fef3c7;color:#92400e}
.news-status-scheduled{background:#e0e7ff;color:#3730a3}
.news-status-approved,.news-status-published{background:#dcfce7;color:#166534}
.news-breaking{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:#dc2626;color:#fff;font-size:.72rem;font-weight:900}
.news-preview-notice{margin:0 0 18px;padding:12px 14px;border:1px solid #fbbf24;border-radius:10px;background:#fffbeb;color:#92400e;font-weight:700}
.news-workflow-panel{margin-top:28px;padding:20px;border:1px solid #c7d2fe;border-radius:14px;background:#f5f7ff}
.news-workflow-panel h2{margin:0 0 14px;font-size:1.1rem}
.news-workflow-panel form{display:grid;gap:12px}.news-workflow-panel button{justify-self:start}
.news-reporter-card{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:34px;padding:20px;border-top:2px solid #111827;border-bottom:1px solid #e2e8f0}
.news-reporter-card>div{min-width:0}.news-reporter-label{display:block;color:#64748b;font-size:.76rem;font-weight:900;text-transform:uppercase}.news-reporter-card strong{display:block;margin-top:3px;font-size:1.05rem}.news-reporter-card small{display:block;margin-top:3px;color:#64748b}.news-reporter-card p{margin:10px 0 0;color:#475569;line-height:1.7}.news-reporter-card>a{white-space:nowrap;text-decoration:none;font-weight:800}
.news-reporter-contact{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:9px;color:#64748b;font-size:.85rem}
.news-my-drafts{margin:0 0 24px;padding:18px;border:1px solid #dbeafe;border-radius:14px;background:#f8fbff}.news-my-drafts h2{margin:0 0 10px;font-size:1.05rem}.news-my-drafts>div{display:grid}.news-draft-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #e2e8f0;text-decoration:none;color:#1f2937}.news-draft-row:last-child{border-bottom:0}.news-draft-row span:last-child{color:#94a3b8;font-size:.8rem}
.news-breaking-ticker{background:#111827;color:#fff}.news-breaking-inner{display:flex;align-items:center;gap:14px;min-height:40px}.news-breaking-inner>strong{flex:0 0 auto;padding:4px 8px;border-radius:6px;background:#dc2626;font-size:.78rem}.news-breaking-inner>div{display:flex;gap:24px;min-width:0;overflow:hidden}.news-breaking-inner a{color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.88rem}
.news-headline-section{padding-top:26px}.news-global-headline{display:grid;gap:20px}.news-home-lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:28px;padding-bottom:25px;border-bottom:2px solid #111827}.news-home-lead-image{display:block;overflow:hidden;border-radius:14px;aspect-ratio:16/10;background:#f1f5f9}.news-home-lead-image img{width:100%;height:100%;object-fit:cover}.news-home-lead-body{align-self:center}.news-home-lead-body h3{margin:8px 0 10px;font-size:2rem;line-height:1.25}.news-home-lead-body h3 a{color:#111827;text-decoration:none}.news-home-lead-body p{color:#475569;line-height:1.7}
.news-global-subgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}.news-global-subgrid .news-list-item{grid-template-columns:120px minmax(0,1fr)}
@media(max-width:760px){
.news-reporter-card{flex-direction:column}.news-draft-row{grid-template-columns:auto minmax(0,1fr)}.news-draft-row span:last-child{grid-column:2}
.news-breaking-inner>div{gap:14px}.news-breaking-inner a:not(:first-child){display:none}
.news-home-lead{grid-template-columns:1fr;gap:14px}.news-home-lead-body h3{font-size:1.55rem}.news-global-subgrid{grid-template-columns:1fr}
}
@media print{.news-preview-notice,.news-workflow-panel,.news-reporter-card,.news-breaking-ticker{display:none!important}}
/* v1.9 newspaper integrity / reporter / footer */
.news-write-box select,.news-edit-box select,.news-workflow-panel select{width:100%;padding:12px 13px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;font:inherit}
.news-correction-notice{margin:24px 0;padding:16px 18px;border-left:4px solid #d97706;background:#fffbeb;border-radius:0 10px 10px 0;color:#78350f}.news-correction-notice strong{margin-right:10px}.news-correction-notice span{color:#92400e;font-size:.82rem}.news-correction-notice p{margin:7px 0 0;line-height:1.65}
.news-integrity-panel{margin-top:28px;padding:20px;border:1px solid #fed7aa;border-radius:14px;background:#fffaf5}.news-integrity-panel>h2{margin:0 0 6px}.news-integrity-panel>p{color:#7c2d12}.news-integrity-panel form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin:12px 0}.news-integrity-panel label{display:grid;gap:6px;font-weight:700}.news-integrity-panel input{width:100%;padding:11px 12px;border:1px solid #fdba74;border-radius:9px;background:#fff}.news-integrity-panel button{border:0;border-radius:9px;background:#7c2d12;color:#fff;padding:11px 14px;font-weight:800;cursor:pointer}.news-integrity-panel details{margin-top:16px}.news-integrity-panel summary{cursor:pointer;font-weight:800}
.news-history-list{margin-top:10px;display:grid}.news-history-row{display:grid;grid-template-columns:auto auto 1fr;gap:7px 12px;padding:10px 0;border-bottom:1px solid #fed7aa}.news-history-row strong{color:#7c2d12}.news-history-row span,.news-history-row small{font-size:.8rem;color:#92400e}.news-history-row p{grid-column:1/-1;margin:0;color:#475569}
.news-reporter-photo{width:76px;height:76px;flex:0 0 76px;border-radius:50%;object-fit:cover;background:#e2e8f0}
.news-publication-info{padding:0 0 20px;margin-bottom:18px;border-bottom:1px solid #e2e8f0}.news-publication-info>strong{display:block;margin-bottom:8px;color:#334155}.news-publication-info>div{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem}.news-publication-info p{margin:7px 0 0;font-size:.8rem;line-height:1.55}
.news-status-withdrawn{background:#fee2e2;color:#991b1b}
@media(max-width:760px){.news-integrity-panel form{grid-template-columns:1fr}.news-history-row{grid-template-columns:1fr}.news-history-row p{grid-column:1}.news-reporter-photo{width:64px;height:64px;flex-basis:64px}}
/* v2.0 news discovery / SEO public UI */
.news-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 0;padding:12px 0;border-top:1px solid #e2e8f0}.news-share>span{font-size:.82rem;font-weight:900;color:#64748b;margin-right:4px}.news-share button,.news-share a{border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#334155;padding:7px 10px;text-decoration:none;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}.news-share button:hover,.news-share a:hover{background:#f8fafc}
.news-popular-list{list-style:none;margin:0;padding:0;border-top:2px solid #111827}.news-popular-list li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px 4px;border-bottom:1px solid #e2e8f0}.news-popular-list li>span{font-size:1.2rem;font-weight:900;color:#94a3b8}.news-popular-list a{text-decoration:none;font-weight:800;line-height:1.45}.news-popular-list small{color:#94a3b8}
.news-archive-months{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.news-archive-months>strong{margin-right:5px}.news-archive-months a{display:inline-flex;padding:7px 10px;border:1px solid #cbd5e1;border-radius:999px;text-decoration:none;color:#475569;background:#fff;font-size:.82rem;font-weight:800}.news-archive-months a:hover{background:#f1f5f9}
.news-archive-page .news-archive-months{margin:0 0 24px;padding:14px;border-radius:12px;background:#f8fafc}.news-archive-list{margin-top:8px}
.news-footer-tools{display:flex;gap:12px;flex-wrap:wrap;margin:-8px 0 18px;font-size:.8rem}.news-footer-tools a{color:#475569;text-decoration:none;font-weight:800}.news-footer-tools a:hover{text-decoration:underline}
@media(max-width:760px){.news-popular-list li{grid-template-columns:30px minmax(0,1fr)}.news-popular-list small{grid-column:2}.news-share{align-items:stretch}.news-share>span{width:100%}}
/* v2.1 staff article analytics */
.news-article-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0;padding:12px;border:1px solid #dbeafe;border-radius:12px;background:#f8fbff}
.news-article-stats>div{padding:9px 10px;border-radius:9px;background:#fff}
.news-article-stats span{display:block;color:#64748b;font-size:.76rem;font-weight:800}
.news-article-stats strong{display:block;margin-top:4px;font-size:1.15rem}
@media(max-width:650px){.news-article-stats{grid-template-columns:repeat(2,1fr)}}
@media print{.news-article-stats{display:none!important}}
/* v2.1.1 member approval */
.account-approval-note{padding:11px 13px;border:1px solid #bbf7d0;border-radius:10px;background:#f0fdf4;color:#166534;line-height:1.6;font-size:.9rem}
/* v2.4 선택형 하위메뉴 레이아웃 */
.main-nav .nav-item.active>a{color:var(--cms-primary,#0f172a);font-weight:900}
.sub-nav a.active{background:#f1f5f9;color:var(--cms-primary,#0f172a);font-weight:800}
/* ② 주메뉴 아래형 */
.submenu-bar{border-bottom:1px solid #e2e8f0;background:#f8fafc}
.submenu-bar-inner{min-height:48px;display:flex;align-items:center;gap:20px}
.submenu-bar-inner>strong{flex:0 0 auto;font-size:.9rem;color:#334155;padding-right:18px;border-right:1px solid #cbd5e1}
.submenu-bar-links{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;padding:5px 0;scrollbar-width:thin}
.submenu-bar-links a{flex:0 0 auto;text-decoration:none;color:#64748b;padding:8px 11px;border-radius:9px;font-size:.92rem;font-weight:700;white-space:nowrap}
.submenu-bar-links a:hover,.submenu-bar-links a.active{background:#fff;color:var(--cms-primary,#0f172a)}
.submenu-bar-links a.active{box-shadow:inset 0 0 0 1px #cbd5e1}
/* ③ 좌측 하위메뉴형 */
.submenu-page-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;align-items:start}
.sidebar-submenu{margin-top:42px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;overflow:hidden}
.sidebar-submenu-title{padding:18px 17px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:1.05rem;font-weight:900;color:#0f172a}
.sidebar-submenu nav{display:grid;padding:8px}
.sidebar-submenu nav a{display:block;text-decoration:none;padding:11px 12px;border-radius:9px;color:#64748b;font-weight:700;line-height:1.4}
.sidebar-submenu nav a:hover{background:#f8fafc;color:#0f172a}
.sidebar-submenu nav a.active{background:#f1f5f9;color:var(--cms-primary,#0f172a);font-weight:900}
.submenu-main{min-width:0}
.submenu-main>.section{padding-top:42px}
.submenu-main .wrap{width:100%;max-width:100%}
.submenu-main .page-content,.submenu-main .board-wrap,.submenu-main .gallery-wrap,.submenu-main .contact-wrap{margin-left:0;margin-right:0}
/* 풀다운형에서는 기존 sub-nav만 사용하고 본문에는 별도 메뉴를 만들지 않는다. */
.submenu-mode-dropdown .submenu-bar,.submenu-mode-dropdown .sidebar-submenu{display:none}
@media(max-width:900px){
.submenu-page-layout{grid-template-columns:180px minmax(0,1fr);gap:22px}
}
@media(max-width:760px){
.submenu-bar-inner{align-items:flex-start;gap:8px;flex-direction:column;padding-top:7px;padding-bottom:7px}
.submenu-bar-inner>strong{border-right:0;padding-right:0;font-size:.82rem}
.submenu-bar-links{width:100%}
.submenu-page-layout{display:block}
.sidebar-submenu{margin-top:18px;margin-bottom:0}
.sidebar-submenu nav{display:flex;gap:4px;overflow-x:auto}
.sidebar-submenu nav a{flex:0 0 auto;white-space:nowrap}
.sidebar-submenu-title{padding:13px 14px}
.submenu-main>.section{padding-top:30px}
}
/* =========================================================
v2.4.4 Navigation contrast / board UX
테마 대표색이 흰색·연한색이어도 메뉴 글자는 항상 읽히도록 분리
========================================================= */
:root{
--cms-nav-text:#334155;
--cms-nav-text-strong:#0f172a;
--cms-nav-muted:#64748b;
--cms-nav-surface:#ffffff;
--cms-nav-hover:#f1f5f9;
--cms-nav-active:#e2e8f0;
--cms-nav-border:#cbd5e1;
}
/* 상단 헤더/주메뉴 */
.site-header{
background:rgba(255,255,255,.98);
color:var(--cms-nav-text-strong);
}
.brand,
.brand-with-logo,
.brand-with-logo span{
color:var(--cms-nav-text-strong)!important;
}
.main-nav .nav-item>a{
position:relative;
display:block;
padding:10px 9px;
border-radius:9px;
color:var(--cms-nav-text)!important;
background:transparent;
font-weight:700;
line-height:1.25;
transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.main-nav .nav-item>a:hover,
.main-nav .nav-item:focus-within>a{
color:var(--cms-nav-text-strong)!important;
background:var(--cms-nav-hover);
}
.main-nav .nav-item.active>a{
color:var(--cms-nav-text-strong)!important;
background:var(--cms-nav-hover);
font-weight:900;
box-shadow:inset 0 -3px 0 #475569;
}
.main-nav a:focus-visible,
.sub-nav a:focus-visible,
.submenu-bar-links a:focus-visible,
.sidebar-submenu nav a:focus-visible{
outline:3px solid #94a3b8;
outline-offset:2px;
}
/* 풀다운 메뉴: 흰 배경 + 진한 글자 명시 */
.sub-nav{
background:var(--cms-nav-surface)!important;
border:1px solid var(--cms-nav-border)!important;
box-shadow:0 16px 42px rgba(15,23,42,.16)!important;
padding:8px!important;
}
.sub-nav a{
color:var(--cms-nav-text)!important;
background:var(--cms-nav-surface);
font-weight:700;
line-height:1.35;
}
.sub-nav a:hover,
.sub-nav a:focus-visible{
color:var(--cms-nav-text-strong)!important;
background:var(--cms-nav-hover)!important;
}
.sub-nav a.active{
color:var(--cms-nav-text-strong)!important;
background:var(--cms-nav-active)!important;
font-weight:900;
box-shadow:inset 3px 0 0 #475569;
}
/* 주메뉴 바로 아래 가로 하위메뉴 */
.submenu-bar{
background:#f8fafc!important;
border-color:var(--cms-nav-border)!important;
}
.submenu-bar-inner>strong{
color:var(--cms-nav-text-strong)!important;
}
.submenu-bar-links a{
color:var(--cms-nav-text)!important;
background:transparent;
}
.submenu-bar-links a:hover,
.submenu-bar-links a:focus-visible{
color:var(--cms-nav-text-strong)!important;
background:#fff!important;
}
.submenu-bar-links a.active{
color:var(--cms-nav-text-strong)!important;
background:#fff!important;
font-weight:900;
box-shadow:inset 0 0 0 1px var(--cms-nav-border),inset 0 -3px 0 #475569;
}
/* 좌측 하위메뉴 */
.sidebar-submenu{
background:#fff!important;
border-color:var(--cms-nav-border)!important;
}
.sidebar-submenu-title{
color:var(--cms-nav-text-strong)!important;
background:#f8fafc!important;
}
.sidebar-submenu nav a{
color:var(--cms-nav-text)!important;
background:#fff;
}
.sidebar-submenu nav a:hover,
.sidebar-submenu nav a:focus-visible{
color:var(--cms-nav-text-strong)!important;
background:var(--cms-nav-hover)!important;
}
.sidebar-submenu nav a.active{
color:var(--cms-nav-text-strong)!important;
background:var(--cms-nav-active)!important;
font-weight:900;
box-shadow:inset 4px 0 0 #475569;
}
/* 게시판 본문/목록도 흰 배경에서 확실히 구분 */
.board-head h1,
.board-title{
color:var(--cms-nav-text-strong);
}
.board-row{
color:var(--cms-nav-text);
background:#fff;
border-bottom-color:#e2e8f0;
transition:background-color .14s ease,box-shadow .14s ease;
}
.board-row:hover,
.board-row:focus-visible{
color:var(--cms-nav-text-strong);
background:#f8fafc;
box-shadow:inset 3px 0 0 #94a3b8;
outline:none;
}
.board-meta,
.post-meta{
color:var(--cms-nav-muted);
}
.secondary-link{
color:var(--cms-nav-text)!important;
background:#fff!important;
border-color:var(--cms-nav-border)!important;
font-weight:700;
}
.secondary-link:hover,
.secondary-link:focus-visible{
color:var(--cms-nav-text-strong)!important;
background:var(--cms-nav-hover)!important;
outline:2px solid #94a3b8;
outline-offset:2px;
}
@media(max-width:760px){
.main-nav .nav-item>a{
padding:10px 11px;
}
.sub-nav{
margin:3px 0 7px 10px;
padding:5px!important;
background:#f8fafc!important;
border-left:3px solid #cbd5e1!important;
border-top:0!important;
border-right:0!important;
border-bottom:0!important;
box-shadow:none!important;
}
.sub-nav a{
background:transparent;
padding:9px 10px;
}
}
/* =========================================================
v2.4.5 게시판 메뉴 재배치 / 고대비 UX
========================================================= */
/* 현재 주메뉴: 흰 글씨/굵은 밑줄 대신 명확한 탭형 */
.main-nav .nav-item.active>a{
color:#0f172a!important;
background:#e2e8f0!important;
border:1px solid #cbd5e1;
box-shadow:none!important;
text-decoration:none!important;
font-weight:800;
}
.main-nav .nav-item>a,
.sub-nav a,
.submenu-bar-links a,
.sidebar-submenu nav a{
text-decoration:none!important;
}
.sub-nav a.active,
.submenu-bar-links a.active,
.sidebar-submenu nav a.active{
color:#0f172a!important;
background:#e2e8f0!important;
box-shadow:none!important;
border:1px solid #cbd5e1;
font-weight:800;
}
/* 게시판 헤더 */
.board-page-head{
align-items:center;
margin-bottom:14px;
padding-bottom:18px;
border-bottom:1px solid #e2e8f0;
}
.board-page-head h1{
color:#0f172a!important;
margin:3px 0 0;
line-height:1.25;
}
.board-head-help{
margin:9px 0 0;
color:#64748b;
font-size:.92rem;
line-height:1.55;
}
/* 게시판 조작 메뉴: 목록 / 검색 / 글쓰기 */
.board-action-nav{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap;
margin:0 0 18px;
padding:8px;
border:1px solid #dbe2ea;
border-radius:13px;
background:#f8fafc;
}
.board-action-nav a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:9px 14px;
border:1px solid transparent;
border-radius:9px;
background:transparent;
color:#334155!important;
text-decoration:none!important;
font-size:.9rem;
font-weight:700;
line-height:1.2;
white-space:nowrap;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.board-action-nav a:hover,
.board-action-nav a:focus-visible{
color:#0f172a!important;
background:#fff;
border-color:#cbd5e1;
}
.board-action-nav a.active,
.board-action-nav a[aria-current="page"]{
color:#0f172a!important;
background:#fff;
border-color:#94a3b8;
font-weight:900;
box-shadow:0 1px 2px rgba(15,23,42,.06);
}
.board-action-nav a.danger-link{
margin-left:auto;
color:#991b1b!important;
}
.board-action-nav a.danger-link:hover,
.board-action-nav a.danger-link:focus-visible{
background:#fff1f2;
border-color:#fecdd3;
color:#881337!important;
}
/* 게시글 상세 메뉴는 상단에서 바로 접근 */
.board-view-nav{
margin-bottom:14px;
}
.board-back-link{
min-height:40px;
display:inline-flex!important;
align-items:center;
}
/* 검색은 메뉴와 본문 사이의 독립 패널 */
.board-search-panel{
display:block!important;
margin:0 0 20px;
padding:14px;
border:1px solid #e2e8f0;
border-radius:12px;
background:#fff;
}
.board-search-label{
display:block;
margin:0 0 8px;
color:#334155;
font-size:.82rem;
font-weight:800;
}
.board-search-controls{
display:flex;
align-items:center;
gap:8px;
}
.board-search-controls input{
min-width:0;
flex:1;
min-height:42px;
color:#0f172a!important;
background:#fff!important;
}
.board-search-controls button{
min-height:42px;
border:1px solid #0f172a!important;
background:#0f172a!important;
color:#fff!important;
padding:9px 17px;
}
.board-search-reset{
display:inline-flex;
align-items:center;
min-height:42px;
padding:9px 13px;
border:1px solid #cbd5e1;
border-radius:10px;
background:#fff;
color:#334155!important;
text-decoration:none!important;
font-weight:700;
white-space:nowrap;
}
.board-search-reset:hover,
.board-search-reset:focus-visible{
background:#f1f5f9;
color:#0f172a!important;
}
/* 게시글 목록 */
#boardList{
scroll-margin-top:92px;
}
.board-list{
overflow:hidden;
border:1px solid #dbe2ea!important;
border-top:2px solid #334155!important;
border-radius:12px;
background:#fff;
}
.board-row{
min-height:58px;
align-items:center;
padding:14px 16px!important;
color:#334155!important;
text-decoration:none!important;
}
.board-row:hover,
.board-row:focus-visible{
color:#0f172a!important;
background:#f8fafc!important;
box-shadow:inset 4px 0 0 #64748b!important;
}
.board-title{
color:#0f172a!important;
font-weight:800;
line-height:1.45;
}
.board-meta{
color:#64748b!important;
font-size:.86rem;
}
/* 페이지 번호: 흰색 글자에 의존하지 않는 방식 */
.pager{
flex-wrap:wrap;
gap:6px;
}
.pager a,
.pager strong{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:38px;
min-height:38px;
padding:7px 10px;
border:1px solid #cbd5e1!important;
border-radius:9px;
background:#fff!important;
color:#334155!important;
text-decoration:none!important;
font-weight:700;
}
.pager a:hover,
.pager a:focus-visible{
background:#f1f5f9!important;
color:#0f172a!important;
}
.pager strong{
border-color:#64748b!important;
background:#e2e8f0!important;
color:#0f172a!important;
font-weight:900;
}
/* 글쓰기 / 수정은 작업영역으로 분리 */
#boardWrite,
#boardEdit,
#boardDelete{
scroll-margin-top:92px;
}
.board-write-box{
margin-top:30px!important;
padding:22px!important;
border:1px solid #cbd5e1!important;
border-radius:14px!important;
background:#f8fafc!important;
}
.board-write-box h2,
.edit-box summary{
color:#0f172a!important;
}
.board-write-box h2{
margin-top:0;
padding-bottom:12px;
border-bottom:1px solid #dbe2ea;
font-size:1.25rem;
}
.board-write-box button,
.edit-box button{
min-height:42px;
background:#0f172a!important;
color:#fff!important;
border:1px solid #0f172a!important;
}
.edit-box{
border-color:#cbd5e1!important;
background:#fff!important;
}
.edit-box summary{
padding:4px 0;
text-decoration:none!important;
}
.board-delete-form{
margin-top:12px;
padding-top:12px;
border-top:1px solid #e2e8f0;
}
.danger-public-btn{
min-height:40px;
border:1px solid #fecaca!important;
background:#fff1f2!important;
color:#991b1b!important;
font-weight:800;
}
/* 상세 본문 */
.post-meta{
padding:10px 0 14px;
color:#64748b!important;
}
.post-body{
color:#1e293b;
}
.attachment-box a{
color:#1d4ed8!important;
font-weight:700;
text-decoration:underline;
text-underline-offset:3px;
}
/* 터치/모바일 */
@media(max-width:760px){
.board-page-head{
gap:12px;
}
.board-back-link{
width:100%;
justify-content:center;
}
.board-action-nav{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
padding:7px;
}
.board-action-nav a{
width:100%;
min-height:44px;
white-space:normal;
text-align:center;
}
.board-action-nav a.danger-link{
margin-left:0;
}
.board-search-controls{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
}
.board-search-controls .board-search-reset{
grid-column:1 / -1;
justify-content:center;
}
.board-row{
align-items:flex-start;
gap:6px;
padding:14px!important;
}
.board-write-box{
padding:16px!important;
}
}
@media(max-width:430px){
.board-action-nav{
grid-template-columns:1fr;
}
.board-search-controls{
grid-template-columns:1fr;
}
.board-search-controls button,
.board-search-controls .board-search-reset{
width:100%;
justify-content:center;
}
}
.board-list-head{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
padding:9px 16px;
border-bottom:1px solid #e2e8f0;
background:#f8fafc;
color:#64748b;
font-size:.76rem;
font-weight:800;
}
@media(max-width:760px){
.board-list-head{display:none}
}
/* =========================================================
v2.4.6 파일 선택 취소 UI
========================================================= */
.file-input-row{
display:flex;
align-items:center;
gap:8px;
width:100%;
min-width:0;
}
.file-input-row input[type="file"]{
flex:1 1 auto;
min-width:0;
}
.file-clear-btn{
flex:0 0 auto;
min-height:38px;
padding:8px 12px;
border:1px solid #cbd5e1;
border-radius:9px;
background:#fff;
color:#334155;
font:inherit;
font-size:.86rem;
font-weight:700;
cursor:pointer;
white-space:nowrap;
}
.file-clear-btn:hover:not(:disabled),
.file-clear-btn:focus-visible:not(:disabled){
background:#f1f5f9;
color:#0f172a;
border-color:#94a3b8;
}
.file-clear-btn:focus-visible{
outline:3px solid #cbd5e1;
outline-offset:2px;
}
.file-clear-btn:disabled{
opacity:.45;
cursor:not-allowed;
background:#f8fafc;
color:#94a3b8;
}
@media(max-width:520px){
.file-input-row{
align-items:stretch;
flex-direction:column;
}
.file-clear-btn{
width:100%;
}
}
/* =========================================================
v2.4.8 다중 파일/사진 + 갤러리 대표사진
========================================================= */
.multi-upload-box{
display:grid;
gap:10px;
margin:8px 0 4px;
padding:14px;
border:1px solid #dbe2ea;
border-radius:12px;
background:#fff;
}
.multi-upload-list{display:grid;gap:10px}
.multi-upload-item{
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
gap:9px;
align-items:end;
padding:11px;
border:1px solid #e2e8f0;
border-radius:10px;
background:#f8fafc;
}
.multi-upload-item>label:first-child{
display:grid;
gap:6px;
min-width:0;
color:#334155;
font-weight:700;
}
.multi-upload-item input[type="file"]{
width:100%;
min-width:0;
background:#fff;
}
.multi-upload-add{
justify-self:start;
min-height:40px;
cursor:pointer;
font:inherit;
font-weight:800;
}
.multi-upload-add:disabled{
opacity:.5;
cursor:not-allowed;
}
.multi-upload-remove{
min-height:38px;
padding:8px 11px;
border:1px solid #fecaca;
border-radius:9px;
background:#fff1f2;
color:#991b1b;
font:inherit;
font-size:.84rem;
font-weight:800;
cursor:pointer;
}
.multi-cover-choice{
display:flex!important;
align-items:center;
gap:6px!important;
padding:8px 10px;
border:1px solid #cbd5e1;
border-radius:9px;
background:#fff;
color:#334155;
font-size:.84rem;
font-weight:800!important;
white-space:nowrap;
}
.multi-cover-choice input{
width:auto!important;
margin:0;
}
/* 갤러리 상세: 여러 사진 보기 */
.gallery-detail-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
margin:20px 0;
}
.gallery-detail-photo{
position:relative;
margin:0;
padding:8px;
border:1px solid #e2e8f0;
border-radius:14px;
background:#fff;
overflow:hidden;
}
.gallery-detail-photo.is-cover{
border:2px solid #64748b;
box-shadow:0 0 0 3px #f1f5f9;
}
.gallery-detail-photo img{
display:block;
width:100%;
aspect-ratio:4/3;
object-fit:contain;
background:#f8fafc;
border-radius:9px;
}
.gallery-detail-photo figcaption{
padding:8px 3px 2px;
color:#64748b;
font-size:.82rem;
line-height:1.4;
}
.gallery-detail-photo.is-cover figcaption{
color:#0f172a;
font-weight:900;
}
.gallery-cover-panel{
margin:24px 0;
padding:18px;
border:1px solid #cbd5e1;
border-radius:14px;
background:#f8fafc;
}
.gallery-cover-panel h2{margin:0 0 5px;font-size:1.15rem;color:#0f172a}
.gallery-cover-panel>p{margin:0 0 14px;color:#64748b;font-size:.9rem}
.gallery-cover-panel form{display:grid;gap:14px}
.gallery-cover-options{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
}
.gallery-cover-option{
position:relative;
display:grid!important;
gap:7px!important;
padding:9px;
border:1px solid #dbe2ea;
border-radius:11px;
background:#fff;
cursor:pointer;
font-weight:700!important;
}
.gallery-cover-option.selected{
border-color:#64748b;
box-shadow:0 0 0 2px #e2e8f0;
background:#f8fafc;
}
.gallery-cover-option input{
position:absolute;
top:10px;
left:10px;
width:auto!important;
z-index:1;
}
.gallery-cover-option img{
display:block;
width:100%;
aspect-ratio:4/3;
object-fit:cover;
border-radius:8px;
background:#f1f5f9;
}
.gallery-cover-option span{
color:#334155;
font-size:.78rem;
line-height:1.35;
word-break:break-all;
}
.gallery-cover-panel button[type="submit"]{
justify-self:start;
min-height:42px;
padding:10px 16px;
border:1px solid #0f172a;
border-radius:10px;
background:#0f172a;
color:#fff;
font:inherit;
font-weight:800;
cursor:pointer;
}
/* 여러 첨부파일 목록 */
.attachment-list{
display:grid;
gap:10px;
}
.attachment-list>strong{color:#0f172a}
.attachment-list>div{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.attachment-list a{
display:inline-flex;
align-items:center;
min-height:36px;
padding:7px 10px;
border:1px solid #cbd5e1;
border-radius:8px;
background:#fff;
color:#1d4ed8!important;
text-decoration:none!important;
font-weight:700;
}
.attachment-list a:hover{background:#f1f5f9}
@media(max-width:900px){
.gallery-cover-options{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
.multi-upload-item{grid-template-columns:1fr}
.multi-upload-remove{width:100%}
.multi-cover-choice{white-space:normal}
.gallery-detail-grid{grid-template-columns:1fr}
.gallery-cover-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:430px){
.gallery-cover-options{grid-template-columns:1fr}
}
/* v2.4.9 이미지 자동 축소/압축 상태 */
.image-optimize-note{
display:block;
grid-column:1 / -1;
margin-top:5px;
color:#64748b;
font-size:.78rem;
line-height:1.45;
}
.image-optimize-note.success{color:#166534}
.image-optimize-note.error{color:#b91c1c;font-weight:700}
/* =========================================================
v2.5.0 갤러리 기존 사진 개별 수정
========================================================= */
.gallery-photo-manage-panel{
margin:24px 0;
padding:18px;
border:1px solid #cbd5e1;
border-radius:14px;
background:#fff;
}
.gallery-photo-manage-panel>h2{
margin:0 0 5px;
color:#0f172a;
font-size:1.15rem;
}
.gallery-photo-manage-panel>p{
margin:0 0 14px;
color:#64748b;
font-size:.9rem;
line-height:1.55;
}
.gallery-manage-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}
.gallery-manage-card{
display:grid;
gap:10px;
min-width:0;
padding:12px;
border:1px solid #dbe2ea;
border-radius:12px;
background:#f8fafc;
}
.gallery-manage-photo{
position:relative;
overflow:hidden;
border-radius:9px;
background:#e2e8f0;
}
.gallery-manage-photo img{
display:block;
width:100%;
aspect-ratio:4/3;
object-fit:contain;
background:#fff;
}
.gallery-cover-badge{
position:absolute;
top:8px;
left:8px;
display:inline-flex;
align-items:center;
min-height:26px;
padding:4px 8px;
border-radius:999px;
background:#0f172a;
color:#fff;
font-size:.72rem;
font-weight:900;
}
.gallery-manage-name{
overflow:hidden;
color:#334155;
font-size:.82rem;
font-weight:800;
text-overflow:ellipsis;
white-space:nowrap;
}
.gallery-inline-form,
.gallery-replace-form{
display:grid;
gap:8px;
margin:0;
}
.gallery-replace-form{
padding-top:9px;
border-top:1px solid #e2e8f0;
}
.gallery-replace-form label{
display:grid;
gap:6px;
color:#334155;
font-size:.8rem;
font-weight:800;
}
.gallery-replace-form input[type="file"]{
width:100%;
min-width:0;
background:#fff;
}
.gallery-replace-form button[type="submit"]{
min-height:38px;
border:1px solid #0f172a;
border-radius:9px;
background:#0f172a;
color:#fff;
font:inherit;
font-weight:800;
cursor:pointer;
}
.gallery-last-photo-note{
margin:0;
padding:8px 10px;
border:1px dashed #cbd5e1;
border-radius:8px;
color:#64748b;
background:#fff;
font-size:.78rem;
line-height:1.45;
}
@media(max-width:900px){
.gallery-manage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
.gallery-manage-grid{grid-template-columns:1fr}
}
/* v2.5.2 WYSIWYG 저장본문 반응형 표 */
.board-content .editor-table-wrap{
width:100%;
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
margin:16px 0;
}
.board-content .editor-table-wrap table{
min-width:520px;
margin:0;
}
/* =========================================================
v2.5.13 긴 사이트명 / 상단메뉴 깨짐 방지
========================================================= */
/* flex/grid 자식이 내용 길이 때문에 컨테이너를 밀어내지 못하게 한다. */
.site-header .header-inner,
.site-header .brand,
.site-header .main-nav,
.site-header .account-nav{
min-width:0;
}
/* 사이트명은 메뉴 영역을 무한정 밀어내지 않는다. */
.site-header .brand{
flex:0 1 auto;
max-width:min(32vw,340px);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
line-height:1.25;
font-size:clamp(1rem,1.4vw,1.25rem);
}
.site-header .brand-with-logo{
display:flex;
align-items:center;
min-width:0;
max-width:min(36vw,390px);
}
.site-header .brand-with-logo img{
flex:0 0 auto;
max-width:min(150px,13vw);
}
.site-header .brand-with-logo span{
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* 넓은 화면에서는 한 줄 유지. 메뉴는 남은 공간을 사용한다. */
.site-header:not(.header-center) .header-inner{
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:space-between;
gap:clamp(10px,1.6vw,24px);
}
.site-header:not(.header-center) .main-nav{
flex:1 1 auto;
min-width:0;
justify-content:center;
gap:clamp(8px,1.25vw,20px);
flex-wrap:nowrap;
white-space:nowrap;
}
.site-header:not(.header-center) .nav-item{
flex:0 0 auto;
}
.site-header:not(.header-center) .nav-item>a{
padding-left:clamp(1px,.35vw,6px);
padding-right:clamp(1px,.35vw,6px);
font-size:clamp(.87rem,1vw,1rem);
white-space:nowrap;
}
/* 로그인/관리자 영역도 긴 문자열로 메뉴를 밀지 않게 한다. */
.site-header:not(.header-center) .account-nav{
flex:0 1 auto;
max-width:min(22vw,250px);
justify-content:flex-end;
white-space:nowrap;
}
.site-header:not(.header-center) .account-nav span{
min-width:0;
max-width:150px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.site-header:not(.header-center) .account-nav a{
flex:0 0 auto;
white-space:nowrap;
}
/*
중간 폭에서는 메뉴를 억지로 한 줄에 압축하지 않는다.
1행: 사이트명 + 계정
2행: 주메뉴 전체
*/
@media (max-width:1240px) and (min-width:761px){
.site-header:not(.header-center) .header-inner{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"brand account"
"nav nav";
column-gap:18px;
row-gap:0;
padding-top:9px;
padding-bottom:7px;
}
.site-header:not(.header-center) .brand{
grid-area:brand;
max-width:min(68vw,620px);
justify-self:start;
}
.site-header:not(.header-center) .brand-with-logo{
max-width:min(68vw,620px);
}
.site-header:not(.header-center) .brand-with-logo img{
max-width:140px;
}
.site-header:not(.header-center) .account-nav{
grid-area:account;
max-width:320px;
justify-self:end;
}
.site-header:not(.header-center) .account-nav span{
max-width:180px;
}
.site-header:not(.header-center) .main-nav{
grid-area:nav;
width:100%;
min-width:0;
justify-content:flex-start;
gap:6px 14px;
padding-top:5px;
border-top:1px solid #f1f5f9;
flex-wrap:wrap;
white-space:normal;
}
.site-header:not(.header-center) .nav-item>a{
padding:7px 4px;
font-size:.92rem;
}
}
/* 가운데형 헤더는 원래 2단 구조이므로 긴 이름만 안전하게 제한한다. */
.site-header.header-center .brand,
.site-header.header-center .brand-with-logo{
max-width:min(100%,720px);
}
.site-header.header-center .main-nav{
width:100%;
min-width:0;
justify-content:center;
flex-wrap:wrap;
gap:8px 18px;
}
/* 매우 긴 이름은 모바일에서 두 줄까지 허용하되 메뉴와 겹치지 않는다. */
@media(max-width:760px){
.site-header .header-inner{
width:min(var(--cms-content-width,1120px),calc(100% - 28px));
gap:10px;
}
.site-header .brand,
.site-header .brand-with-logo{
width:100%;
max-width:100%;
font-size:1.06rem;
}
.site-header .brand-with-logo img{
max-width:120px;
height:36px;
}
.site-header .main-nav{
width:100%;
min-width:0;
}
.site-header .main-nav .nav-item>a{
overflow-wrap:anywhere;
}
.site-header .account-nav{
width:100%;
max-width:100%;
}
.site-header .account-nav span{
max-width:min(60vw,260px);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
}
/* 아주 작은 화면에서는 로고와 사이트명 사이 간격도 줄인다. */
@media(max-width:420px){
.site-header .brand-with-logo{
gap:7px;
}
.site-header .brand-with-logo img{
max-width:96px;
height:32px;
}
.site-header .brand{
font-size:1rem;
}
}
/* =========================================================
v2.5.15 목적 × 운영방식 × 이용범위 × 모듈 자동 디자인
========================================================= */
.adaptive-site{
--adaptive-primary:#2563eb;
--adaptive-accent:#60a5fa;
--adaptive-soft:#eff6ff;
--adaptive-deep:#1e3a8a;
}
.adaptive-site.purpose-welfare{--adaptive-primary:#14866d;--adaptive-accent:#5bc0a6;--adaptive-soft:#eefaf6;--adaptive-deep:#145c4d}
.adaptive-site.purpose-association{--adaptive-primary:#4157a8;--adaptive-accent:#8092db;--adaptive-soft:#f1f3ff;--adaptive-deep:#27386f}
.adaptive-site.purpose-nonprofit{--adaptive-primary:#43834a;--adaptive-accent:#84b96d;--adaptive-soft:#f1f8ee;--adaptive-deep:#285730}
.adaptive-site.purpose-company{--adaptive-primary:#225ea8;--adaptive-accent:#68a7db;--adaptive-soft:#eef6fc;--adaptive-deep:#173d70}
.adaptive-site.purpose-center{--adaptive-primary:#1685a3;--adaptive-accent:#72c4d5;--adaptive-soft:#eefafd;--adaptive-deep:#15566a}
.adaptive-site.purpose-education{--adaptive-primary:#388c5b;--adaptive-accent:#78ba8a;--adaptive-soft:#f0f9f2;--adaptive-deep:#245e3e}
.adaptive-site.purpose-sports{--adaptive-primary:#e26b23;--adaptive-accent:#f4a35d;--adaptive-soft:#fff5ec;--adaptive-deep:#9b4216}
.adaptive-site.purpose-personal{--adaptive-primary:#6c4bb3;--adaptive-accent:#a98ade;--adaptive-soft:#f7f2fc;--adaptive-deep:#463077}
.adaptive-site.purpose-portal{--adaptive-primary:#178c8c;--adaptive-accent:#66c3c3;--adaptive-soft:#eefafa;--adaptive-deep:#125b5b}
.adaptive-site.purpose-news{--adaptive-primary:#b42335;--adaptive-accent:#d65d6b;--adaptive-soft:#fff2f3;--adaptive-deep:#701522}
.adaptive-site.purpose-custom{--adaptive-primary:#52657a;--adaptive-accent:#93a4b6;--adaptive-soft:#f5f7f9;--adaptive-deep:#334155}
.adaptive-hero{
position:relative;
overflow:hidden;
padding:76px 0;
background:
radial-gradient(circle at 8% 10%,color-mix(in srgb,var(--adaptive-accent) 16%,transparent),transparent 34%),
linear-gradient(135deg,var(--adaptive-soft),#fff 70%);
}
.adaptive-hero:after{
content:"";
position:absolute;
right:-90px;
top:-110px;
width:320px;
height:320px;
border-radius:50%;
border:55px solid color-mix(in srgb,var(--adaptive-accent) 10%,transparent);
pointer-events:none;
}
.adaptive-hero-layout{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(340px,48%);
align-items:center;
gap:clamp(30px,5vw,70px);
}
.adaptive-hero-copy{max-width:720px}
.adaptive-hero .eyebrow{
color:var(--adaptive-primary);
letter-spacing:.02em;
}
.adaptive-hero h1{
max-width:760px;
color:#172033;
}
.adaptive-hero .button{
background:var(--adaptive-primary);
}
.adaptive-hero-meta{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:18px 0 0;
}
.adaptive-hero-meta span{
padding:6px 9px;
border:1px solid color-mix(in srgb,var(--adaptive-primary) 22%,#fff);
border-radius:999px;
background:rgba(255,255,255,.78);
color:var(--adaptive-deep);
font-size:.79rem;
font-weight:700;
}
.adaptive-hero-media{
position:relative;
overflow:hidden;
border:1px solid rgba(148,163,184,.32);
border-radius:22px;
background:#fff;
box-shadow:0 22px 55px rgba(38,55,75,.14);
}
.adaptive-hero-media img{
display:block;
width:100%;
aspect-ratio:15/9;
object-fit:contain;
background:#fff;
}
.adaptive-hero-media:before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
pointer-events:none;
}
/* 운영방식에 따라 정보 밀도/히어로 비중 조절 */
.mode-promotion .adaptive-hero,
.mode-portfolio .adaptive-hero,
.mode-event .adaptive-hero{padding:94px 0}
.mode-content .adaptive-hero,
.mode-archive .adaptive-hero,
.mode-work .adaptive-hero,
.mode-portal .adaptive-hero{padding:54px 0}
.mode-content .adaptive-hero-layout,
.mode-archive .adaptive-hero-layout,
.mode-work .adaptive-hero-layout,
.mode-portal .adaptive-hero-layout{grid-template-columns:minmax(0,1.12fr) minmax(280px,38%)}
.mode-portfolio .adaptive-hero-layout{grid-template-columns:minmax(300px,42%) minmax(0,1fr)}
.mode-portfolio .adaptive-hero-copy{order:2}
.mode-portfolio .adaptive-hero-media{order:1}
.mode-application .adaptive-hero .button,
.mode-event .adaptive-hero .button{box-shadow:0 8px 18px color-mix(in srgb,var(--adaptive-primary) 24%,transparent)}
.mode-work .adaptive-hero-media,
.access-staff-only .adaptive-hero-media{filter:saturate(.75)}
/* 활성 모듈을 실제 홈 바로가기로 표시 */
.adaptive-module-strip{
position:relative;
z-index:3;
margin-top:-22px;
}
.adaptive-module-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:10px;
padding:11px;
border:1px solid #e2e8f0;
border-radius:18px;
background:rgba(255,255,255,.95);
box-shadow:0 14px 35px rgba(30,41,59,.09);
backdrop-filter:blur(8px);
}
.adaptive-module-grid>a,
.adaptive-module-grid>span{
display:grid;
grid-template-columns:38px minmax(0,1fr);
grid-template-rows:auto auto;
column-gap:10px;
padding:11px 12px;
border-radius:12px;
color:#334155;
text-decoration:none;
}
.adaptive-module-grid>a:hover{background:var(--adaptive-soft)}
.adaptive-module-grid b{
grid-row:1/3;
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:11px;
background:var(--adaptive-soft);
color:var(--adaptive-primary);
font-size:1.1rem;
}
.adaptive-module-grid strong{align-self:end;font-size:.93rem}
.adaptive-module-grid small{align-self:start;color:#94a3b8;font-size:.76rem}
/* 이용범위 */
.access-member-only .adaptive-hero,
.access-staff-only .adaptive-hero{
background:
linear-gradient(135deg,color-mix(in srgb,var(--adaptive-soft) 92%,#fff),#f8fafc);
}
.access-member-only .adaptive-hero-meta span:first-child,
.access-staff-only .adaptive-hero-meta span:first-child{
background:var(--adaptive-primary);
border-color:var(--adaptive-primary);
color:#fff;
}
.access-public-member .adaptive-hero-meta span:first-child,
.access-public-staff .adaptive-hero-meta span:first-child{
border-color:color-mix(in srgb,var(--adaptive-primary) 42%,#fff);
color:var(--adaptive-primary);
}
/* 모든 사이트 페이지에 목적별 색상 언어를 유지 */
.adaptive-site .section-title-row h2,
.adaptive-site .page-content>h1,
.adaptive-site .board-head h1{
position:relative;
}
.adaptive-site .page-content>h1,
.adaptive-site .board-head h1{
padding-left:15px;
border-left:4px solid var(--adaptive-primary);
}
.adaptive-site .section-title-row a{color:var(--adaptive-primary)}
.adaptive-site .card{
border-top:3px solid color-mix(in srgb,var(--adaptive-primary) 72%,#fff);
}
.mode-portal .cards,
.mode-work .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.mode-content .section,
.mode-archive .section{padding-top:52px;padding-bottom:52px}
.mode-guide .wysiwyg-body{max-width:860px}
.mode-event .section-title-row h2,
.mode-sports .section-title-row h2{font-weight:900}
/* purpose preview is decorative on inner pages via subtle page surface */
.adaptive-site .page-content{
position:relative;
}
.adaptive-site .page-content:before{
content:"";
display:block;
width:74px;
height:5px;
margin-bottom:17px;
border-radius:99px;
background:linear-gradient(90deg,var(--adaptive-primary),var(--adaptive-accent));
}
@media(max-width:900px){
.adaptive-hero-layout{
grid-template-columns:1fr;
}
.adaptive-hero-copy{max-width:none}
.adaptive-hero-media{max-width:680px}
.mode-portfolio .adaptive-hero-copy,
.mode-portfolio .adaptive-hero-media{order:initial}
.mode-portal .cards,
.mode-work .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
.adaptive-hero{padding:50px 0}
.adaptive-module-strip{margin-top:-10px}
.adaptive-module-grid{grid-template-columns:1fr 1fr}
.adaptive-hero-media{border-radius:15px}
.mode-portal .cards,
.mode-work .cards{grid-template-columns:1fr}
}
/* =========================================================
v2.5.16 페이지별 비주얼 배너 (복지기관 시작)
========================================================= */
.page-hero-banner{
display:grid;
grid-template-columns:minmax(280px,44%) minmax(0,1fr);
gap:26px;
align-items:center;
margin-bottom:26px;
padding:16px;
border:1px solid #e2e8f0;
border-radius:22px;
background:linear-gradient(135deg,#fff,#fbfdfe);
box-shadow:0 12px 30px rgba(30,41,59,.05);
}
.page-hero-visual{
overflow:hidden;
border-radius:18px;
border:1px solid #e2e8f0;
background:#fff;
}
.page-hero-visual img{
display:block;
width:100%;
aspect-ratio:16/9;
object-fit:cover;
}
.page-hero-copy{min-width:0}
.page-hero-kicker{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
background:var(--adaptive-soft);
color:var(--adaptive-primary);
font-size:.78rem;
font-weight:800;
}
.page-hero-copy h1{
margin:14px 0 10px;
padding-left:0 !important;
border-left:0 !important;
}
.page-hero-copy p{
margin:0;
color:#475569;
line-height:1.75;
font-size:1rem;
}
@media(max-width:760px){
.page-hero-banner{
grid-template-columns:1fr;
padding:12px;
gap:16px;
}
}
/* =========================================================
v2.5.17 복지기관 세부 페이지 구조화 디자인
========================================================= */
.welfare-prose{
max-width:900px;
margin:28px auto 0;
color:#475569;
line-height:1.85;
font-size:1rem;
}
.welfare-prose.compact{margin-top:20px}
.welfare-prose p{margin:0 0 15px}
.welfare-info-grid,
.welfare-value-grid,
.welfare-service-grid,
.welfare-support-grid{
display:grid;
gap:15px;
margin-top:24px;
}
.welfare-info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.welfare-value-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.welfare-service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.welfare-support-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.welfare-info-grid article,
.welfare-value-grid article,
.welfare-service-grid article,
.welfare-support-grid article{
position:relative;
overflow:hidden;
padding:23px;
border:1px solid #e2e8f0;
border-radius:18px;
background:#fff;
box-shadow:0 10px 25px rgba(30,41,59,.04);
}
.welfare-info-grid article span,
.welfare-support-grid article span{
display:grid;
place-items:center;
width:42px;
height:42px;
margin-bottom:15px;
border-radius:13px;
background:var(--adaptive-soft);
color:var(--adaptive-primary);
font-weight:900;
}
.welfare-info-grid strong,
.welfare-value-grid strong,
.welfare-service-grid strong,
.welfare-support-grid strong{
display:block;
margin-bottom:8px;
color:#1e293b;
font-size:1.06rem;
}
.welfare-info-grid p,
.welfare-value-grid p,
.welfare-service-grid p,
.welfare-support-grid p{
margin:0;
color:#64748b;
line-height:1.65;
font-size:.91rem;
}
.welfare-value-grid article b,
.welfare-service-grid article b{
display:inline-block;
margin-bottom:12px;
color:var(--adaptive-primary);
font-size:.76rem;
letter-spacing:.06em;
}
.welfare-greeting-card{
position:relative;
max-width:920px;
margin:26px auto 0;
padding:34px 38px 30px 72px;
border:1px solid #dfece7;
border-radius:22px;
background:linear-gradient(135deg,#f7fcfa,#fff);
color:#475569;
line-height:1.9;
}
.welfare-greeting-card .welfare-quote-mark{
position:absolute;
left:24px;
top:18px;
color:color-mix(in srgb,var(--adaptive-primary) 42%,#fff);
font-family:Georgia,serif;
font-size:4.5rem;
line-height:1;
}
.welfare-greeting-card p{margin:0 0 13px}
.welfare-step-list{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin:26px 0 0;
padding:0;
list-style:none;
}
.welfare-step-list li{
position:relative;
padding:24px 20px 22px;
border:1px solid #e2e8f0;
border-radius:18px;
background:#fff;
}
.welfare-step-list li>span{
display:grid;
place-items:center;
width:42px;
height:42px;
margin-bottom:15px;
border-radius:50%;
background:var(--adaptive-primary);
color:#fff;
font-weight:900;
}
.welfare-step-list strong{display:block;margin-bottom:7px;color:#1e293b}
.welfare-step-list p{margin:0;color:#64748b;line-height:1.65;font-size:.9rem}
.welfare-program-panel{
display:grid;
grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:24px;
margin-top:25px;
padding:30px;
border:1px solid #dfece5;
border-radius:22px;
background:linear-gradient(135deg,#f5fbf7,#fff);
}
.welfare-program-panel h2{margin:5px 0 10px;color:#1e293b}
.welfare-program-panel p{margin:0;color:#64748b;line-height:1.7}
.welfare-program-panel ul{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin:0;
padding:0;
list-style:none;
}
.welfare-program-panel li{
padding:13px 14px;
border:1px solid #e2e8f0;
border-radius:12px;
background:#fff;
color:#475569;
font-weight:700;
}
.welfare-quick-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:13px;
margin-top:25px;
}
.welfare-quick-card{
display:grid;
grid-template-columns:46px minmax(0,1fr);
grid-template-rows:auto auto;
gap:2px 12px;
padding:20px;
border:1px solid #e2e8f0;
border-radius:17px;
background:#fff;
color:#334155;
text-decoration:none;
transition:.18s ease;
}
.welfare-quick-card:hover{
transform:translateY(-2px);
border-color:color-mix(in srgb,var(--adaptive-primary) 30%,#e2e8f0);
box-shadow:0 10px 24px rgba(30,41,59,.07);
}
.welfare-quick-card b{
grid-row:1/3;
display:grid;
place-items:center;
width:46px;
height:46px;
border-radius:13px;
background:var(--adaptive-soft);
color:var(--adaptive-primary);
}
.welfare-quick-card strong{align-self:end}
.welfare-quick-card span{align-self:start;color:#94a3b8;font-size:.82rem;line-height:1.45}
.welfare-location-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
margin-top:25px;
}
.welfare-location-card{
padding:22px;
border:1px solid #e2e8f0;
border-radius:18px;
background:#fff;
}
.welfare-location-card>span{
display:inline-block;
margin-bottom:10px;
padding:5px 8px;
border-radius:999px;
background:var(--adaptive-soft);
color:var(--adaptive-primary);
font-size:.76rem;
font-weight:800;
}
.welfare-location-card strong{display:block;margin-bottom:8px;color:#1e293b}
.welfare-location-card p{margin:0;color:#64748b;line-height:1.6;font-size:.9rem}
.welfare-cta-row{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
margin-top:22px;
}
.welfare-cta-row .button{background:var(--adaptive-primary)}
@media(max-width:980px){
.welfare-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.welfare-step-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.welfare-program-panel{grid-template-columns:1fr}
}
@media(max-width:720px){
.welfare-info-grid,
.welfare-value-grid,
.welfare-support-grid,
.welfare-location-grid{grid-template-columns:1fr}
.welfare-service-grid{grid-template-columns:1fr}
.welfare-step-list{grid-template-columns:1fr}
.welfare-program-panel ul{grid-template-columns:1fr}
.welfare-greeting-card{padding:30px 22px 24px 55px}
}
/* =========================================================
v2.5.18 복지기관 완성형 메인화면
========================================================= */
.welfare-home-hero{
position:relative;
overflow:hidden;
padding:86px 0 80px;
background:
radial-gradient(circle at 8% 18%,rgba(117,190,162,.17),transparent 30%),
linear-gradient(135deg,#f0faf6 0%,#ffffff 68%);
}
.welfare-home-hero:after{
content:"";
position:absolute;
right:-130px;
bottom:-170px;
width:430px;
height:430px;
border-radius:50%;
border:70px solid rgba(76,160,128,.07);
}
.welfare-home-hero-grid{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(390px,47%);
gap:clamp(35px,5.4vw,72px);
align-items:center;
}
.welfare-home-label{
display:inline-flex;
padding:7px 10px;
border-radius:999px;
background:#dff3ea;
color:#167459;
font-size:.78rem;
font-weight:900;
letter-spacing:.02em;
}
.welfare-home-hero-copy h1{
max-width:700px;
margin:18px 0 16px;
color:#17342c;
font-size:clamp(2.05rem,4vw,3.5rem);
line-height:1.16;
letter-spacing:-.035em;
}
.welfare-home-hero-copy>p{
max-width:650px;
margin:0;
color:#52675f;
font-size:1.04rem;
line-height:1.82;
}
.welfare-home-hero-actions{
display:flex;
flex-wrap:wrap;
gap:11px;
align-items:center;
margin-top:25px;
}
.welfare-home-hero-actions .button{
background:#168268;
}
.welfare-home-hero-actions .secondary-link{
display:inline-flex;
padding:10px 14px;
border:1px solid #bfded2;
border-radius:10px;
background:#fff;
color:#276b57;
font-weight:800;
text-decoration:none;
}
.welfare-home-keywords{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:23px;
}
.welfare-home-keywords span{
padding:6px 9px;
border-radius:999px;
background:rgba(255,255,255,.75);
border:1px solid #d7e9e2;
color:#587068;
font-size:.77rem;
font-weight:700;
}
.welfare-home-hero-media{
overflow:hidden;
border:1px solid #d9e8e2;
border-radius:24px;
background:#fff;
box-shadow:0 26px 60px rgba(33,86,69,.13);
}
.welfare-home-hero-media img{
display:block;
width:100%;
aspect-ratio:16/9;
object-fit:cover;
}
.welfare-home-section-head{
display:flex;
justify-content:space-between;
gap:24px;
align-items:end;
margin-bottom:22px;
}
.welfare-home-section-head h2{
margin:4px 0 8px;
color:#1d3830;
font-size:clamp(1.55rem,2.3vw,2rem);
}
.welfare-home-section-head p{
max-width:680px;
margin:0;
color:#667a73;
line-height:1.7;
}
.welfare-home-section-head>a{
flex:0 0 auto;
color:#168268;
font-weight:800;
text-decoration:none;
}
.welfare-home-services{
padding-top:76px;
padding-bottom:78px;
}
.welfare-home-service-grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:12px;
}
.welfare-home-service-grid>a{
position:relative;
min-height:205px;
padding:22px 20px;
overflow:hidden;
border:1px solid #dfeae6;
border-radius:18px;
background:#fff;
color:#334a42;
text-decoration:none;
transition:.18s ease;
}
.welfare-home-service-grid>a:after{
content:"→";
position:absolute;
right:17px;
bottom:15px;
color:#1b8066;
font-weight:900;
}
.welfare-home-service-grid>a:hover{
transform:translateY(-3px);
border-color:#b9dace;
box-shadow:0 14px 28px rgba(28,79,63,.08);
}
.welfare-home-service-grid b{
display:grid;
place-items:center;
width:39px;
height:39px;
margin-bottom:24px;
border-radius:12px;
background:#eaf7f2;
color:#148267;
font-size:.78rem;
}
.welfare-home-service-grid strong{
display:block;
margin-bottom:9px;
color:#203a32;
font-size:1.03rem;
}
.welfare-home-service-grid span{
display:block;
padding-right:10px;
color:#71837d;
line-height:1.62;
font-size:.87rem;
}
.welfare-home-guide{
background:#f5faf8;
}
.welfare-home-guide-grid{
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:36px;
align-items:center;
}
.welfare-home-guide-copy h2{
margin:5px 0 12px;
color:#203b32;
}
.welfare-home-guide-copy p{
margin:0 0 19px;
color:#647972;
line-height:1.75;
}
.welfare-home-guide-copy .button{background:#168268}
.welfare-home-steps{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:9px;
margin:0;
padding:0;
list-style:none;
}
.welfare-home-steps li{
min-height:140px;
padding:17px;
border:1px solid #deebe6;
border-radius:16px;
background:#fff;
}
.welfare-home-steps li>span{
display:grid;
place-items:center;
width:34px;
height:34px;
margin-bottom:16px;
border-radius:50%;
background:#178168;
color:#fff;
font-size:.81rem;
font-weight:900;
}
.welfare-home-steps strong{display:block;margin-bottom:5px;color:#29463c}
.welfare-home-steps small{color:#82918c;line-height:1.45}
.welfare-home-news{
background:#fff;
}
.welfare-home-news .board-list,
.welfare-home-news .post-list{
border-top:2px solid #c9dfd7;
}
.welfare-home-gallery{
background:#f7fbf9 !important;
}
.welfare-home-support-band{
background:#eff8f3;
}
.welfare-home-support-grid{
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr);
gap:38px;
align-items:center;
}
.welfare-home-support-grid h2{
margin:6px 0 12px;
color:#213d34;
}
.welfare-home-support-grid p{
max-width:590px;
margin:0;
color:#657a72;
line-height:1.75;
}
.welfare-home-support-grid>img{
display:block;
width:100%;
border:1px solid #dce9e4;
border-radius:19px;
background:#fff;
}
.welfare-home-support-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:18px 0;
}
.welfare-home-support-tags span{
padding:6px 10px;
border:1px solid #cde2d9;
border-radius:999px;
background:#fff;
color:#4a6b5f;
font-size:.8rem;
font-weight:700;
}
.welfare-home-support-grid .button{background:#168268}
.welfare-home-contact{
padding-top:56px;
padding-bottom:56px;
background:#173d33;
}
.welfare-home-contact-inner{
display:flex;
justify-content:space-between;
gap:30px;
align-items:center;
}
.welfare-home-contact .eyebrow{color:#8bd1b6}
.welfare-home-contact h2{
margin:5px 0 8px;
color:#fff;
}
.welfare-home-contact p{
margin:0;
color:#c7d9d2;
line-height:1.7;
}
.welfare-home-contact-actions{
display:flex;
flex-wrap:wrap;
gap:9px;
flex:0 0 auto;
}
.welfare-home-contact .button{
background:#fff;
color:#174b3d;
}
.welfare-home-contact .secondary-link{
display:inline-flex;
align-items:center;
padding:10px 13px;
border:1px solid rgba(255,255,255,.34);
border-radius:9px;
color:#fff;
text-decoration:none;
font-weight:800;
}
@media(max-width:1120px){
.welfare-home-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.welfare-home-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
.welfare-home-hero-grid,
.welfare-home-guide-grid,
.welfare-home-support-grid{grid-template-columns:1fr}
.welfare-home-hero-media{max-width:720px}
.welfare-home-contact-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:680px){
.welfare-home-hero{padding:57px 0 48px}
.welfare-home-service-grid{grid-template-columns:1fr}
.welfare-home-service-grid>a{min-height:0}
.welfare-home-steps{grid-template-columns:1fr}
.welfare-home-section-head{align-items:flex-start;flex-direction:column}
}
/* =========================================================
v2.5.26 서브메뉴의 주메뉴 제목 클릭
========================================================= */
.submenu-parent-link{
display:inline-flex;
align-items:center;
gap:6px;
flex:0 0 auto;
color:#0f172a;
font-weight:900;
text-decoration:none;
white-space:nowrap;
}
.submenu-parent-link:after{
content:"›";
color:#94a3b8;
font-size:1.08em;
line-height:1;
}
.submenu-parent-link:hover,
.submenu-parent-link:focus-visible{
color:var(--adaptive-primary,#2563eb);
text-decoration:underline;
text-underline-offset:4px;
}
.submenu-parent-link:focus-visible,
.sidebar-parent-link:focus-visible{
outline:2px solid currentColor;
outline-offset:3px;
border-radius:4px;
}
.sidebar-submenu .sidebar-parent-link{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
color:inherit;
text-decoration:none;
cursor:pointer;
}
.sidebar-submenu .sidebar-parent-link:after{
content:"›";
color:#94a3b8;
font-size:1.1em;
}
.sidebar-submenu .sidebar-parent-link:hover{
color:var(--adaptive-primary,#2563eb);
}
@media(max-width:760px){
.submenu-parent-link{
max-width:100%;
white-space:normal;
}
}
/* =========================================================
v2.5.27 서브메뉴 주메뉴/하위메뉴 UI 상태 완전 통일
기본 / hover / active / focus-visible
========================================================= */
/* 공통 상태 토큰 */
:root{
--cms-submenu-bg:#f8fafc;
--cms-submenu-item-bg:transparent;
--cms-submenu-hover:#ffffff;
--cms-submenu-active:#ffffff;
--cms-submenu-text:var(--cms-nav-text,#334155);
--cms-submenu-strong:var(--cms-nav-text-strong,#0f172a);
--cms-submenu-border:var(--cms-nav-border,#cbd5e1);
--cms-submenu-indicator:#475569;
}
/* ---------- BAR형 ---------- */
.submenu-bar{
background:var(--cms-submenu-bg)!important;
border-top:1px solid #eef2f7;
border-bottom:1px solid var(--cms-submenu-border)!important;
}
.submenu-bar-inner{
min-height:52px;
display:flex;
align-items:center;
gap:6px;
}
/* 주메뉴도 하위메뉴와 같은 버튼형 */
.submenu-bar .submenu-parent-link,
.submenu-bar-links a{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
min-height:38px;
padding:8px 12px;
border:1px solid transparent;
border-radius:9px;
background:var(--cms-submenu-item-bg)!important;
color:var(--cms-submenu-text)!important;
text-decoration:none!important;
font-size:.92rem;
font-weight:700;
line-height:1.25;
white-space:nowrap;
box-shadow:none;
transition:
background-color .15s ease,
color .15s ease,
border-color .15s ease,
box-shadow .15s ease;
}
/* 주메뉴 구분은 동일 패턴 안에서 글자 굵기만 약간 강조 */
.submenu-bar .submenu-parent-link{
font-weight:850;
margin-right:5px;
}
.submenu-bar .submenu-parent-link:after{
content:"›";
margin-left:3px;
color:#94a3b8;
font-size:1em;
line-height:1;
}
/* 마우스가 올라간 상태: 주/하위 동일 */
.submenu-bar .submenu-parent-link:hover,
.submenu-bar .submenu-parent-link:focus-visible,
.submenu-bar-links a:hover,
.submenu-bar-links a:focus-visible{
background:var(--cms-submenu-hover)!important;
color:var(--cms-submenu-strong)!important;
border-color:#e2e8f0;
box-shadow:inset 0 0 0 1px rgba(148,163,184,.12);
text-decoration:none!important;
}
/* 선택됨: 주/하위 동일한 하단 인디케이터 */
.submenu-bar .submenu-parent-link.active,
.submenu-bar-links a.active{
background:var(--cms-submenu-active)!important;
color:var(--cms-submenu-strong)!important;
border-color:var(--cms-submenu-border)!important;
font-weight:900;
box-shadow:
inset 0 0 0 1px rgba(203,213,225,.25),
inset 0 -3px 0 var(--cms-submenu-indicator)!important;
}
/* active 상태에서 hover해도 동일한 선택 패턴 유지 */
.submenu-bar .submenu-parent-link.active:hover,
.submenu-bar .submenu-parent-link.active:focus-visible,
.submenu-bar-links a.active:hover,
.submenu-bar-links a.active:focus-visible{
background:#fff!important;
color:var(--cms-submenu-strong)!important;
border-color:var(--cms-submenu-border)!important;
box-shadow:
inset 0 0 0 1px rgba(203,213,225,.25),
inset 0 -3px 0 var(--cms-submenu-indicator)!important;
}
/* 키보드 포커스는 공통 외곽선 */
.submenu-bar .submenu-parent-link:focus-visible,
.submenu-bar-links a:focus-visible{
outline:3px solid #94a3b8;
outline-offset:2px;
}
/* ---------- SIDEBAR형 ---------- */
.sidebar-submenu{
padding:8px;
background:#fff!important;
border:1px solid var(--cms-submenu-border)!important;
border-radius:14px;
overflow:hidden;
}
/* 기존 '제목 헤더' 느낌을 없애고 첫 메뉴 항목으로 통일 */
.sidebar-submenu .sidebar-parent-link,
.sidebar-submenu nav a{
position:relative;
display:flex;
align-items:center;
min-height:42px;
width:100%;
padding:11px 12px;
border:1px solid transparent;
border-radius:9px;
background:#fff!important;
color:var(--cms-submenu-text)!important;
text-decoration:none!important;
font-size:.94rem;
font-weight:700;
line-height:1.35;
transition:
background-color .15s ease,
color .15s ease,
border-color .15s ease,
box-shadow .15s ease;
}
/* 주메뉴도 첫 번째 메뉴 항목처럼 보이되 약간 강조 */
.sidebar-submenu .sidebar-parent-link{
justify-content:space-between;
margin:0 0 5px;
font-size:.98rem;
font-weight:850;
}
.sidebar-submenu .sidebar-parent-link:after{
content:"›";
flex:0 0 auto;
margin-left:8px;
color:#94a3b8;
font-size:1.08em;
}
/* nav 자체는 같은 메뉴군 */
.sidebar-submenu nav{
display:grid;
gap:3px;
padding:0!important;
border-top:1px solid #eef2f7;
padding-top:5px!important;
}
/* hover: 주/하위 동일 */
.sidebar-submenu .sidebar-parent-link:hover,
.sidebar-submenu .sidebar-parent-link:focus-visible,
.sidebar-submenu nav a:hover,
.sidebar-submenu nav a:focus-visible{
background:var(--cms-nav-hover,#f1f5f9)!important;
color:var(--cms-submenu-strong)!important;
border-color:#e2e8f0;
box-shadow:none!important;
}
/* active: 주/하위 동일한 좌측 인디케이터 */
.sidebar-submenu .sidebar-parent-link.active,
.sidebar-submenu nav a.active{
background:var(--cms-nav-active,#e2e8f0)!important;
color:var(--cms-submenu-strong)!important;
border-color:#dbe2ea!important;
font-weight:900;
box-shadow:inset 4px 0 0 var(--cms-submenu-indicator)!important;
}
/* active + hover 시 선택 표시 유지 */
.sidebar-submenu .sidebar-parent-link.active:hover,
.sidebar-submenu .sidebar-parent-link.active:focus-visible,
.sidebar-submenu nav a.active:hover,
.sidebar-submenu nav a.active:focus-visible{
background:var(--cms-nav-active,#e2e8f0)!important;
color:var(--cms-submenu-strong)!important;
border-color:#dbe2ea!important;
box-shadow:inset 4px 0 0 var(--cms-submenu-indicator)!important;
}
.sidebar-submenu .sidebar-parent-link:focus-visible,
.sidebar-submenu nav a:focus-visible{
outline:3px solid #94a3b8;
outline-offset:2px;
}
/* ---------- 드롭다운형도 동일 상태 언어 유지 ---------- */
.sub-nav a{
border:1px solid transparent;
border-radius:8px;
transition:
background-color .15s ease,
color .15s ease,
border-color .15s ease,
box-shadow .15s ease;
}
.sub-nav a:hover,
.sub-nav a:focus-visible{
border-color:#e2e8f0!important;
}
.sub-nav a.active{
border-color:#dbe2ea!important;
box-shadow:inset 4px 0 0 var(--cms-submenu-indicator)!important;
}
/* ---------- 모바일 ---------- */
@media(max-width:760px){
.submenu-bar-inner{
gap:5px;
}
.submenu-bar .submenu-parent-link,
.submenu-bar-links a{
min-height:42px;
padding:9px 11px;
}
.submenu-bar .submenu-parent-link{
max-width:100%;
white-space:nowrap;
}
.sidebar-submenu{
padding:7px;
}
.sidebar-submenu .sidebar-parent-link{
min-height:44px;
margin-bottom:5px;
}
.sidebar-submenu nav{
display:flex;
gap:5px;
overflow-x:auto;
border-top:1px solid #eef2f7;
padding-top:6px!important;
}
.sidebar-submenu nav a{
width:auto;
min-height:42px;
flex:0 0 auto;
white-space:nowrap;
}
}
/* hover가 실제로 가능한 장치에서만 hover 시각 효과 강화 */
@media(hover:hover) and (pointer:fine){
.submenu-bar .submenu-parent-link:hover,
.submenu-bar-links a:hover{
transform:translateY(-1px);
}
.sidebar-submenu .sidebar-parent-link:hover,
.sidebar-submenu nav a:hover{
padding-left:14px;
}
.sidebar-submenu .sidebar-parent-link.active:hover,
.sidebar-submenu nav a.active:hover{
padding-left:12px;
}
}
/* =========================================================
v2.5.28 내용 없는 주메뉴는 선택 불가 분류 라벨
========================================================= */
/* 상단 주메뉴: 실제 콘텐츠가 없는 경우 클릭 요소가 아닌 span */
.main-nav .nav-parent-label{
position:relative;
display:block;
padding:10px 9px;
border-radius:9px;
color:var(--cms-nav-text,#334155)!important;
background:transparent;
font-weight:700;
line-height:1.25;
cursor:default;
user-select:none;
}
.main-nav .nav-item.has-child:hover>.nav-parent-label,
.main-nav .nav-item.has-child:focus-within>.nav-parent-label{
color:var(--cms-nav-text-strong,#0f172a)!important;
background:var(--cms-nav-hover,#f1f5f9);
}
/* 분류 라벨은 active 선택 표시를 절대 사용하지 않는다. */
.main-nav .nav-item.active>.nav-parent-label{
box-shadow:none!important;
font-weight:700!important;
}
/* BAR형: 분류 제목은 메뉴 버튼과 영역감은 맞추되 클릭/hover/active 없음 */
.submenu-bar .submenu-parent-label{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
min-height:38px;
margin-right:5px;
padding:8px 12px;
border:1px solid transparent;
border-radius:9px;
background:transparent!important;
color:var(--cms-submenu-strong,#0f172a)!important;
font-size:.92rem;
font-weight:900;
line-height:1.25;
white-space:nowrap;
cursor:default;
user-select:none;
}
.submenu-bar .submenu-parent-label:after{
content:"";
width:1px;
height:18px;
margin-left:12px;
background:var(--cms-submenu-border,#cbd5e1);
}
/* 분류 라벨에는 hover/active 이동 효과 없음 */
.submenu-bar .submenu-parent-label:hover{
transform:none!important;
background:transparent!important;
border-color:transparent!important;
box-shadow:none!important;
}
/* SIDEBAR형: 제목은 섹션 라벨이고 선택 가능한 메뉴 항목이 아님 */
.sidebar-submenu .sidebar-parent-label{
display:flex;
align-items:center;
min-height:42px;
width:100%;
margin:0 0 5px;
padding:11px 12px;
border:0;
border-radius:9px;
background:#f8fafc!important;
color:var(--cms-submenu-strong,#0f172a)!important;
font-size:.98rem;
font-weight:900;
line-height:1.35;
cursor:default;
user-select:none;
box-shadow:none!important;
}
.sidebar-submenu .sidebar-parent-label:before{
content:"";
width:4px;
height:16px;
margin-right:8px;
border-radius:999px;
background:#cbd5e1;
}
.sidebar-submenu .sidebar-parent-label:hover{
padding-left:12px!important;
background:#f8fafc!important;
box-shadow:none!important;
}
/* 내용 없는 부모 아래에서는 실제 하위메뉴만 active 가능 */
.sidebar-submenu .sidebar-parent-label.active,
.submenu-bar .submenu-parent-label.active{
box-shadow:none!important;
background:inherit!important;
}
/* 모바일에서도 분류 라벨은 터치 타깃처럼 보이지 않게 */
@media(max-width:760px){
.main-nav .nav-parent-label{
padding:10px 11px;
}
.submenu-bar .submenu-parent-label{
min-height:36px;
padding:6px 4px 4px;
margin-right:0;
}
.submenu-bar .submenu-parent-label:after{
display:none;
}
.sidebar-submenu .sidebar-parent-label{
min-height:40px;
}
}
/* =========================================================
v2.5.29 팝업 겹침 방지 / 자동 스택
========================================================= */
.cms-popup-stack{
position:fixed;
right:24px;
bottom:24px;
z-index:1000;
display:flex;
flex-direction:column;
gap:12px;
width:min(360px,calc(100% - 48px));
max-height:calc(100vh - 48px);
overflow-y:auto;
overflow-x:hidden;
padding:2px 4px 2px 2px;
overscroll-behavior:contain;
scrollbar-width:thin;
}
.cms-popup-stack:empty{
display:none;
}
.cms-popup-stack .cms-popup{
flex:0 0 auto;
margin:0;
max-width:100%;
box-sizing:border-box;
}
/* 서로 붙어 보여 하나의 큰 카드처럼 보이지 않도록 층 분리 */
.cms-popup-stack .cms-popup + .cms-popup{
margin-top:0;
}
.cms-popup h3{
padding-right:26px;
overflow-wrap:anywhere;
}
.cms-popup p{
overflow-wrap:anywhere;
}
.cms-popup .button{
display:inline-flex;
max-width:100%;
}
/* 닫기 버튼은 각 팝업 안에서만 배치 */
.cms-popup-close{
z-index:2;
width:36px;
height:36px;
display:grid;
place-items:center;
padding:0;
border-radius:9px;
}
.cms-popup-close:hover,
.cms-popup-close:focus-visible{
background:#f1f5f9;
color:#0f172a;
}
.cms-popup-close:focus-visible{
outline:3px solid #94a3b8;
outline-offset:2px;
}
/* 화면 높이가 낮아도 팝업끼리 포개지지 않고 스택 자체가 스크롤됨 */
@media(max-height:650px){
.cms-popup-stack{
top:12px;
bottom:12px;
max-height:none;
}
}
/* 태블릿/모바일: 우측 작은 카드 대신 화면 아래에서 넓게 세로 적층 */
@media(max-width:700px){
.cms-popup-stack{
left:12px;
right:12px;
bottom:12px;
width:auto;
max-height:min(72vh,620px);
gap:9px;
padding:2px;
}
.cms-popup-stack .cms-popup{
width:100%;
padding:18px 18px 17px;
border-radius:14px;
}
.cms-popup h3{
margin-right:28px;
font-size:1.02rem;
}
}
/* 아주 작은 화면에서도 좌우 잘림 방지 */
@media(max-width:380px){
.cms-popup-stack{
left:8px;
right:8px;
bottom:8px;
}
.cms-popup-stack .cms-popup{
padding:16px;
}
}
/* =========================================================
v2.5.30 팝업 오늘 하루 안 보기
========================================================= */
.cms-popup-actions{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}
.cms-popup-actions .button{
margin:0;
}
.cms-popup-hide-day{
min-height:38px;
padding:8px 11px;
border:1px solid #cbd5e1;
border-radius:9px;
background:#fff;
color:#475569;
font:inherit;
font-size:.82rem;
font-weight:800;
cursor:pointer;
}
.cms-popup-hide-day:hover,
.cms-popup-hide-day:focus-visible{
background:#f1f5f9;
color:#0f172a;
border-color:#94a3b8;
}
.cms-popup-hide-day:focus-visible{
outline:3px solid #94a3b8;
outline-offset:2px;
}
@media(max-width:500px){
.cms-popup-actions{
align-items:stretch;
flex-direction:column;
}
.cms-popup-actions .button,
.cms-popup-hide-day{
width:100%;
justify-content:center;
text-align:center;
}
}
/* =========================================================
v2.5.31 일반 페이지 WYSIWYG 본문
========================================================= */
.wysiwyg-body{
color:inherit;
line-height:1.8;
}
.wysiwyg-body img,
.welfare-prose img{
max-width:100%;
height:auto;
}
.wysiwyg-body .editor-table-wrap,
.welfare-prose .editor-table-wrap{
width:100%;
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.wysiwyg-body table,
.welfare-prose table{
border-collapse:collapse;
}
.wysiwyg-body td,.wysiwyg-body th,
.welfare-prose td,.welfare-prose th{
border:1px solid #cbd5e1;
padding:9px;
vertical-align:top;
}
.wysiwyg-body th,
.welfare-prose th{
background:#f8fafc;
font-weight:800;
}
/* =========================================================
v2.5.32 오시는 길 자동 지도
========================================================= */
.page-location-map{
margin-top:28px;
overflow:hidden;
border:1px solid #dbe2ea;
border-radius:18px;
background:#fff;
box-shadow:0 12px 34px rgba(15,23,42,.07);
}
.page-location-map-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:17px 19px;
border-bottom:1px solid #e2e8f0;
background:#f8fafc;
}
.page-location-map-head>div{
min-width:0;
}
.page-location-map-head span{
display:block;
margin-bottom:4px;
color:#64748b;
font-size:.72rem;
font-weight:900;
letter-spacing:.08em;
}
.page-location-map-head strong{
display:block;
color:#0f172a;
font-size:1rem;
line-height:1.5;
overflow-wrap:anywhere;
}
.page-location-map-head a{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
min-height:38px;
padding:8px 12px;
border:1px solid #cbd5e1;
border-radius:9px;
background:#fff;
color:#334155;
text-decoration:none;
font-size:.84rem;
font-weight:800;
}
.page-location-map-head a:hover,
.page-location-map-head a:focus-visible{
background:#f1f5f9;
color:#0f172a;
}
.page-location-map-frame{
position:relative;
width:100%;
height:430px;
background:#eef2f7;
}
.page-location-map-frame iframe{
display:block;
width:100%;
height:100%;
border:0;
}
@media(max-width:700px){
.page-location-map{
margin-top:22px;
border-radius:14px;
}
.page-location-map-head{
align-items:flex-start;
flex-direction:column;
padding:14px;
}
.page-location-map-head a{
width:100%;
}
.page-location-map-frame{
height:340px;
}
}
/* =========================================================
v2.5.33 페이지 콘텐츠 블록
========================================================= */
.wysiwyg-body .cms-content-block,
.welfare-prose .cms-content-block{
margin:28px 0;
}
.wysiwyg-body .cms-card-grid,
.welfare-prose .cms-card-grid{
display:grid;
gap:18px;
}
.wysiwyg-body .cms-card-grid.cms-cols-2,
.welfare-prose .cms-card-grid.cms-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wysiwyg-body .cms-card-grid.cms-cols-3,
.welfare-prose .cms-card-grid.cms-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wysiwyg-body .cms-card-grid.cms-cols-4,
.welfare-prose .cms-card-grid.cms-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wysiwyg-body .cms-photo-card,
.welfare-prose .cms-photo-card{
overflow:hidden;
border:1px solid #e2e8f0;
border-radius:16px;
background:#fff;
box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.wysiwyg-body .cms-photo-card>img,
.welfare-prose .cms-photo-card>img{
display:block;
width:100%;
height:220px!important;
max-width:none;
object-fit:cover;
}
.wysiwyg-body .cms-card-photo-placeholder,
.welfare-prose .cms-card-photo-placeholder,
.wysiwyg-body .cms-block-image-placeholder,
.welfare-prose .cms-block-image-placeholder{
display:grid;
place-items:center;
min-height:210px;
padding:20px;
background:#eef2f7;
color:#64748b;
text-align:center;
font-weight:800;
}
.wysiwyg-body .cms-card-body,
.welfare-prose .cms-card-body{padding:18px}
.wysiwyg-body .cms-card-body h3,
.welfare-prose .cms-card-body h3{margin:0 0 8px;font-size:1.08rem}
.wysiwyg-body .cms-card-body p,
.welfare-prose .cms-card-body p{margin:0 0 14px;color:#64748b;line-height:1.7}
.wysiwyg-body .cms-card-body a,
.welfare-prose .cms-card-body a,
.wysiwyg-body .cms-block-copy a,
.welfare-prose .cms-block-copy a,
.wysiwyg-body .cms-button-row a,
.welfare-prose .cms-button-row a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:8px 13px;
border-radius:9px;
background:var(--cms-primary,#0f172a);
color:#fff;
text-decoration:none;
font-weight:800;
}
.wysiwyg-body .cms-block-image-text,
.welfare-prose .cms-block-image-text{
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:30px;
align-items:center;
padding:24px;
border:1px solid #e2e8f0;
border-radius:18px;
background:#fff;
}
.wysiwyg-body .cms-block-image-text>img,
.welfare-prose .cms-block-image-text>img{
display:block;
width:100%;
height:320px!important;
max-width:none;
object-fit:cover;
border-radius:14px;
}
.wysiwyg-body .cms-block-copy h2,
.welfare-prose .cms-block-copy h2{margin:0 0 10px;font-size:1.7rem}
.wysiwyg-body .cms-block-copy h3,
.welfare-prose .cms-block-copy h3{margin:0 0 8px}
.wysiwyg-body .cms-block-copy p,
.welfare-prose .cms-block-copy p{margin:0 0 15px;color:#64748b;line-height:1.75}
.wysiwyg-body .cms-block-banner,
.welfare-prose .cms-block-banner{
padding:48px 34px;
border-radius:22px;
background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
text-align:center;
}
.wysiwyg-body .cms-block-banner h2,
.welfare-prose .cms-block-banner h2{margin:0 0 10px;font-size:clamp(1.6rem,3vw,2.3rem)}
.wysiwyg-body .cms-block-banner p,
.welfare-prose .cms-block-banner p{max-width:760px;margin:0 auto 18px;color:#475569}
.wysiwyg-body .cms-block-callout,
.welfare-prose .cms-block-callout{
padding:23px 25px;
border-left:5px solid var(--cms-accent,#64748b);
border-radius:12px;
background:#f8fafc;
}
.wysiwyg-body .cms-block-callout h3,
.welfare-prose .cms-block-callout h3{margin:0 0 7px}
.wysiwyg-body .cms-block-callout p,
.welfare-prose .cms-block-callout p{margin:0;color:#475569}
.wysiwyg-body .cms-block-buttons,
.welfare-prose .cms-block-buttons{
padding:26px;
border:1px solid #e2e8f0;
border-radius:16px;
background:#fff;
}
.wysiwyg-body .cms-button-row,
.welfare-prose .cms-button-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:15px;
}
@media(max-width:980px){
.wysiwyg-body .cms-card-grid.cms-cols-4,
.welfare-prose .cms-card-grid.cms-cols-4{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:760px){
.wysiwyg-body .cms-card-grid.cms-cols-3,
.welfare-prose .cms-card-grid.cms-cols-3{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.wysiwyg-body .cms-block-image-text,
.welfare-prose .cms-block-image-text{
grid-template-columns:1fr;
}
.wysiwyg-body .cms-block-image-text>img,
.welfare-prose .cms-block-image-text>img{
height:260px!important;
}
}
@media(max-width:520px){
.wysiwyg-body .cms-card-grid.cms-cols-2,
.welfare-prose .cms-card-grid.cms-cols-2,
.wysiwyg-body .cms-card-grid.cms-cols-3,
.welfare-prose .cms-card-grid.cms-cols-3,
.wysiwyg-body .cms-card-grid.cms-cols-4,
.welfare-prose .cms-card-grid.cms-cols-4{
grid-template-columns:1fr;
}
.wysiwyg-body .cms-block-banner,
.welfare-prose .cms-block-banner{padding:34px 20px}
.wysiwyg-body .cms-button-row a,
.welfare-prose .cms-button-row a{width:100%}
}
/* =========================================================
v1.7.9.17 메인 블록에서도 페이지 콘텐츠 블록 동일 적용
========================================================= */
.home-block-rich .cms-content-block,
.home-block-rich .cms-content-block{
margin:28px 0;
}
.home-block-rich .cms-card-grid,
.home-block-rich .cms-card-grid{
display:grid;
gap:18px;
}
.home-block-rich .cms-card-grid.cms-cols-2,
.home-block-rich .cms-card-grid.cms-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-block-rich .cms-card-grid.cms-cols-3,
.home-block-rich .cms-card-grid.cms-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-block-rich .cms-card-grid.cms-cols-4,
.home-block-rich .cms-card-grid.cms-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-block-rich .cms-photo-card,
.home-block-rich .cms-photo-card{
overflow:hidden;
border:1px solid #e2e8f0;
border-radius:16px;
background:#fff;
box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.home-block-rich .cms-photo-card>img,
.home-block-rich .cms-photo-card>img{
display:block;
width:100%;
height:220px!important;
max-width:none;
object-fit:cover;
}
.home-block-rich .cms-card-photo-placeholder,
.home-block-rich .cms-block-image-placeholder,
.home-block-rich .cms-block-image-placeholder{
display:grid;
place-items:center;
min-height:210px;
padding:20px;
background:#eef2f7;
color:#64748b;
text-align:center;
font-weight:800;
}
.home-block-rich .cms-card-body,
.home-block-rich .cms-card-body{padding:18px}
.home-block-rich .cms-card-body h3,
.home-block-rich .cms-card-body h3{margin:0 0 8px;font-size:1.08rem}
.home-block-rich .cms-card-body p,
.home-block-rich .cms-card-body p{margin:0 0 14px;color:#64748b;line-height:1.7}
.home-block-rich .cms-card-body a,
.home-block-rich .cms-block-copy a,
.home-block-rich .cms-button-row a,
.home-block-rich .cms-button-row a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:8px 13px;
border-radius:9px;
background:var(--cms-primary,#0f172a);
color:#fff;
text-decoration:none;
font-weight:800;
}
.home-block-rich .cms-block-image-text,
.home-block-rich .cms-block-image-text{
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:30px;
align-items:center;
padding:24px;
border:1px solid #e2e8f0;
border-radius:18px;
background:#fff;
}
.home-block-rich .cms-block-image-text>img,
.home-block-rich .cms-block-image-text>img{
display:block;
width:100%;
height:320px!important;
max-width:none;
object-fit:cover;
border-radius:14px;
}
.home-block-rich .cms-block-copy h2,
.home-block-rich .cms-block-copy h2{margin:0 0 10px;font-size:1.7rem}
.home-block-rich .cms-block-copy h3,
.home-block-rich .cms-block-copy h3{margin:0 0 8px}
.home-block-rich .cms-block-copy p,
.home-block-rich .cms-block-copy p{margin:0 0 15px;color:#64748b;line-height:1.75}
.home-block-rich .cms-block-banner,
.home-block-rich .cms-block-banner{
padding:48px 34px;
border-radius:22px;
background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
text-align:center;
}
.home-block-rich .cms-block-banner h2,
.home-block-rich .cms-block-banner h2{margin:0 0 10px;font-size:clamp(1.6rem,3vw,2.3rem)}
.home-block-rich .cms-block-banner p,
.home-block-rich .cms-block-banner p{max-width:760px;margin:0 auto 18px;color:#475569}
.home-block-rich .cms-block-callout,
.home-block-rich .cms-block-callout{
padding:23px 25px;
border-left:5px solid var(--cms-accent,#64748b);
border-radius:12px;
background:#f8fafc;
}
.home-block-rich .cms-block-callout h3,
.home-block-rich .cms-block-callout h3{margin:0 0 7px}
.home-block-rich .cms-block-callout p,
.home-block-rich .cms-block-callout p{margin:0;color:#475569}
.home-block-rich .cms-block-buttons,
.home-block-rich .cms-block-buttons{
padding:26px;
border:1px solid #e2e8f0;
border-radius:16px;
background:#fff;
}
.home-block-rich .cms-button-row,
.home-block-rich .cms-button-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:15px;
}
@media(max-width:980px){
.home-block-rich .cms-card-grid.cms-cols-4,
.home-block-rich .cms-card-grid.cms-cols-4{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:760px){
.home-block-rich .cms-card-grid.cms-cols-3,
.home-block-rich .cms-card-grid.cms-cols-3{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.home-block-rich .cms-block-image-text,
.home-block-rich .cms-block-image-text{
grid-template-columns:1fr;
}
.home-block-rich .cms-block-image-text>img,
.home-block-rich .cms-block-image-text>img{
height:260px!important;
}
}
@media(max-width:520px){
.home-block-rich .cms-card-grid.cms-cols-2,
.home-block-rich .cms-card-grid.cms-cols-3,
.home-block-rich .cms-card-grid.cms-cols-4,
.home-block-rich .cms-card-grid.cms-cols-4{
grid-template-columns:1fr;
}
.home-block-rich .cms-block-banner,
.home-block-rich .cms-block-banner{padding:34px 20px}
.home-block-rich .cms-button-row a,
.home-block-rich .cms-button-row a{width:100%}
}
/* =========================================================
v2.5.35 페이지별 상단 디자인
========================================================= */
.page-hero-custom{
--page-hero-text:#0f172a;
--page-hero-bg:#e2e8f0;
position:relative;
margin-bottom:34px;
overflow:hidden;
border-radius:20px;
color:var(--page-hero-text);
}
.page-hero-custom .page-hero-copy{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
}
.page-hero-custom.hero-align-center .page-hero-copy,
.page-hero-banner.hero-align-center .page-hero-copy{
align-items:center;
text-align:center;
}
.page-hero-custom.hero-height-small{min-height:220px}
.page-hero-custom.hero-height-normal{min-height:330px}
.page-hero-custom.hero-height-large{min-height:460px}
.page-hero-breadcrumb{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px;
margin-bottom:14px;
font-size:.78rem;
opacity:.75;
}
.page-hero-breadcrumb a{
color:inherit;
text-decoration:none;
}
.page-hero-breadcrumb a:hover{text-decoration:underline}
/* 사진형 */
.page-hero-photo{
--page-hero-image:none;
--page-hero-overlay:.36;
--page-hero-pos:center;
display:flex;
align-items:center;
padding:44px;
background:#334155;
}
.page-hero-photo-bg{
position:absolute;
inset:0;
background-image:linear-gradient(rgba(0,0,0,var(--page-hero-overlay)),rgba(0,0,0,var(--page-hero-overlay))),var(--page-hero-image);
background-size:cover;
background-position:var(--page-hero-pos) center;
}
.page-hero-photo .page-hero-copy{
max-width:780px;
color:var(--page-hero-text);
}
.page-hero-photo.hero-align-center .page-hero-copy{
width:100%;
margin:0 auto;
}
/* 단색형 */
.page-hero-solid{
display:flex;
align-items:center;
padding:44px;
background:var(--page-hero-bg);
}
.page-hero-solid .page-hero-copy{
width:100%;
color:var(--page-hero-text);
}
/* 분할형 */
.page-hero-split{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
background:var(--page-hero-bg);
}
.page-hero-split .page-hero-copy{
padding:42px;
color:var(--page-hero-text);
}
.page-hero-split-image{
min-height:inherit;
}
.page-hero-split-image img{
display:block;
width:100%;
height:100%;
min-height:100%;
object-fit:cover;
}
/* 기존 기본형에도 높이/정렬을 적용 */
.page-hero-banner.hero-height-small{min-height:230px}
.page-hero-banner.hero-height-normal{min-height:320px}
.page-hero-banner.hero-height-large{min-height:430px}
.page-hero-banner .page-hero-visual img{
width:100%;
height:100%;
object-fit:cover;
}
/* 공통 타이포 */
.page-hero-custom .page-hero-kicker{
display:block;
margin-bottom:9px;
font-size:.78rem;
font-weight:900;
letter-spacing:.12em;
opacity:.72;
}
.page-hero-custom h1{
margin:0;
font-size:clamp(2rem,4.2vw,3.5rem);
line-height:1.12;
letter-spacing:-.035em;
}
.page-hero-custom p{
max-width:760px;
margin:15px 0 0;
font-size:1rem;
line-height:1.75;
opacity:.86;
}
.page-hero-custom.hero-align-center p{margin-left:auto;margin-right:auto}
@media(max-width:760px){
.page-hero-custom{border-radius:15px;margin-bottom:24px}
.page-hero-custom.hero-height-small,
.page-hero-custom.hero-height-normal,
.page-hero-custom.hero-height-large{min-height:260px}
.page-hero-photo,.page-hero-solid{padding:28px 22px}
.page-hero-split{grid-template-columns:1fr}
.page-hero-split .page-hero-copy{padding:28px 22px}
.page-hero-split-image{min-height:240px}
.page-hero-custom h1{font-size:clamp(1.8rem,8vw,2.5rem)}
}
/* =========================================================
v2.5.38 오시는 길 지도 크기
========================================================= */
.page-location-map-head>div p{
margin:5px 0 0;
color:#64748b;
font-size:.9rem;
line-height:1.55;
}
.page-location-map.map-height-small .page-location-map-frame{height:300px}
.page-location-map.map-height-normal .page-location-map-frame{height:430px}
.page-location-map.map-height-large .page-location-map-frame{height:560px}
@media(max-width:700px){
.page-location-map.map-height-small .page-location-map-frame{height:280px}
.page-location-map.map-height-normal .page-location-map-frame{height:340px}
.page-location-map.map-height-large .page-location-map-frame{height:430px}
}
/* =========================================================
v2.5.43 자체 내용 없는 1차 메뉴는 선택 상태 표시 금지
========================================================= */
/*
예:
커뮤니티(자체 페이지 없음)
└ 공지사항(현재 페이지)
커뮤니티는 '분류명'으로만 보이며
공지사항에만 active 표시가 나타난다.
*/
/* BAR형: 내용 없는 부모는 버튼처럼 보이지 않는 중립 분류 라벨 */
.submenu-bar.parent-category-only .submenu-parent-category{
display:inline-flex!important;
align-items:center;
min-height:auto!important;
margin:0 10px 0 0!important;
padding:0 12px 0 0!important;
border:0!important;
border-right:1px solid var(--cms-submenu-border,#cbd5e1)!important;
border-radius:0!important;
background:transparent!important;
color:var(--cms-nav-muted,#64748b)!important;
font-size:.84rem!important;
font-weight:700!important;
line-height:1.3!important;
box-shadow:none!important;
text-decoration:none!important;
transform:none!important;
}
.submenu-bar.parent-category-only .submenu-parent-category:after{
display:none!important;
content:none!important;
}
.submenu-bar.parent-category-only .submenu-parent-category:hover,
.submenu-bar.parent-category-only .submenu-parent-category:focus,
.submenu-bar.parent-category-only .submenu-parent-category:focus-visible,
.submenu-bar.parent-category-only .submenu-parent-category.active{
border-color:var(--cms-submenu-border,#cbd5e1)!important;
background:transparent!important;
color:var(--cms-nav-muted,#64748b)!important;
font-weight:700!important;
box-shadow:none!important;
outline:0!important;
transform:none!important;
}
/* BAR형 선택 표시는 실제 하위메뉴 링크의 active에만 허용 */
.submenu-bar.parent-category-only .submenu-bar-links a:not(.active){
box-shadow:none;
}
.submenu-bar.parent-category-only .submenu-bar-links a.active{
background:var(--cms-submenu-active,#fff)!important;
color:var(--cms-submenu-strong,#0f172a)!important;
border-color:var(--cms-submenu-border,#cbd5e1)!important;
font-weight:900!important;
box-shadow:
inset 0 0 0 1px rgba(203,213,225,.25),
inset 0 -3px 0 var(--cms-submenu-indicator,#475569)!important;
}
/* SIDEBAR형: 내용 없는 부모는 선택 카드/헤더처럼 보이지 않음 */
.sidebar-submenu.parent-category-only .sidebar-parent-category{
display:block!important;
width:auto!important;
min-height:auto!important;
margin:2px 8px 7px!important;
padding:0 0 8px!important;
border:0!important;
border-bottom:1px solid #e2e8f0!important;
border-radius:0!important;
background:transparent!important;
color:var(--cms-nav-muted,#64748b)!important;
font-size:.82rem!important;
font-weight:700!important;
line-height:1.35!important;
box-shadow:none!important;
cursor:default!important;
}
.sidebar-submenu.parent-category-only .sidebar-parent-category:before,
.sidebar-submenu.parent-category-only .sidebar-parent-category:after{
display:none!important;
content:none!important;
}
.sidebar-submenu.parent-category-only .sidebar-parent-category:hover,
.sidebar-submenu.parent-category-only .sidebar-parent-category.active{
padding-left:0!important;
background:transparent!important;
color:var(--cms-nav-muted,#64748b)!important;
font-weight:700!important;
box-shadow:none!important;
}
/* SIDEBAR형에서도 현재 하위메뉴 한 곳에만 선택 강조 */
.sidebar-submenu.parent-category-only nav a.active{
background:var(--cms-nav-active,#e2e8f0)!important;
color:var(--cms-nav-text-strong,#0f172a)!important;
font-weight:900!important;
box-shadow:inset 3px 0 0 #475569!important;
}
/* 상단 주메뉴의 내용 없는 분류도 현재 하위페이지 때문에 active 스타일을 받지 않음 */
.main-nav .nav-item>.nav-parent-label{
box-shadow:none!important;
}
.main-nav .nav-item.active>.nav-parent-label{
background:transparent!important;
color:var(--cms-nav-text,#334155)!important;
font-weight:700!important;
box-shadow:none!important;
}
/* 모바일에서도 분류 라벨은 선택 탭처럼 보이지 않게 유지 */
@media(max-width:760px){
.submenu-bar.parent-category-only .submenu-parent-category{
margin:0!important;
padding:0 0 5px!important;
border-right:0!important;
border-bottom:1px solid #e2e8f0!important;
width:100%;
}
.sidebar-submenu.parent-category-only .sidebar-parent-category{
margin:0 4px 6px!important;
}
}
/* v2.5.44 오시는 길 카드 연동 */
.welfare-location-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.welfare-location-card{min-width:0}.welfare-location-card strong{overflow-wrap:anywhere}.welfare-location-details{display:grid;gap:5px}.welfare-location-detail{display:block;color:#64748b;font-size:.88rem;line-height:1.55;overflow-wrap:anywhere}.welfare-location-detail b{color:#475569;font-weight:800}.welfare-location-detail.muted{color:#94a3b8}@media(max-width:720px){.welfare-location-grid{grid-template-columns:1fr}}
/* =========================================================
v2.5.45 독립 페이지 없는 1차 메뉴 표시 방식
샘플: 기관소개(일반 부모 행) + 인사말(active)
========================================================= */
/*
부모가 독립 콘텐츠를 갖지 않는 경우:
- 부모 행은 일반 부모 메뉴와 동일한 흰색 행 형태
- 우측 > 표시 유지
- active 배경 / 좌측 선택선 / 굵은 선택 상태 없음
- 실제 하위메뉴 한 곳만 active
*/
/* SIDEBAR: 샘플 두 번째 그림처럼 일반 부모 행 모양 */
.sidebar-submenu.parent-no-independent-content .sidebar-parent-display{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
width:100%!important;
min-height:42px!important;
margin:0 0 5px!important;
padding:11px 12px!important;
border:1px solid transparent!important;
border-radius:9px!important;
background:#fff!important;
color:var(--cms-submenu-text,#334155)!important;
font-size:.98rem!important;
font-weight:850!important;
line-height:1.35!important;
box-shadow:none!important;
cursor:default!important;
user-select:none!important;
}
.sidebar-submenu.parent-no-independent-content .sidebar-parent-display:before,
.sidebar-submenu.parent-no-independent-content .sidebar-parent-display:after{
display:none!important;
content:none!important;
}
.sidebar-submenu.parent-no-independent-content .sidebar-parent-display-arrow{
flex:0 0 auto;
color:#94a3b8;
font-size:1.08em;
font-weight:700;
line-height:1;
}
/* 부모에는 어떤 경우에도 선택 상태 금지 */
.sidebar-submenu.parent-no-independent-content .sidebar-parent-display.active,
.sidebar-submenu.parent-no-independent-content .sidebar-parent-display:hover,
.sidebar-submenu.parent-no-independent-content .sidebar-parent-display:focus{
background:#fff!important;
color:var(--cms-submenu-text,#334155)!important;
border-color:transparent!important;
font-weight:850!important;
box-shadow:none!important;
outline:0!important;
padding-left:12px!important;
}
/* 실제 현재 하위메뉴에만 선택 표시 */
.sidebar-submenu.parent-no-independent-content nav a.active{
background:var(--cms-nav-active,#e2e8f0)!important;
color:var(--cms-submenu-strong,#0f172a)!important;
border-color:#dbe2ea!important;
font-weight:900!important;
box-shadow:inset 4px 0 0 var(--cms-submenu-indicator,#475569)!important;
}
/* 예전 v2.5.43 category-only 스타일보다 v2.5.45 규칙을 우선한다. */
.sidebar-submenu.parent-no-independent-content nav{
border-top:1px solid #eef2f7;
padding-top:5px!important;
}
/* BAR형도 부모는 중립 표시, 하위메뉴만 active */
.submenu-bar.parent-no-independent-content .submenu-parent-display{
position:relative;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 auto;
min-height:38px!important;
margin-right:5px!important;
padding:8px 12px!important;
border:1px solid transparent!important;
border-radius:9px!important;
background:transparent!important;
color:var(--cms-submenu-text,#334155)!important;
font-size:.92rem!important;
font-weight:850!important;
line-height:1.25!important;
box-shadow:none!important;
cursor:default!important;
}
.submenu-bar.parent-no-independent-content .submenu-parent-display:after{
content:"›"!important;
display:inline!important;
margin-left:6px;
color:#94a3b8;
font-size:1em;
}
.submenu-bar.parent-no-independent-content .submenu-parent-display.active,
.submenu-bar.parent-no-independent-content .submenu-parent-display:hover{
background:transparent!important;
border-color:transparent!important;
color:var(--cms-submenu-text,#334155)!important;
box-shadow:none!important;
transform:none!important;
}
.submenu-bar.parent-no-independent-content .submenu-bar-links a.active{
background:var(--cms-submenu-active,#fff)!important;
color:var(--cms-submenu-strong,#0f172a)!important;
border-color:var(--cms-submenu-border,#cbd5e1)!important;
font-weight:900!important;
box-shadow:
inset 0 0 0 1px rgba(203,213,225,.25),
inset 0 -3px 0 var(--cms-submenu-indicator,#475569)!important;
}
@media(max-width:760px){
.sidebar-submenu.parent-no-independent-content .sidebar-parent-display{
min-height:44px!important;
}
}
/* =========================================================
v2.5.47 페이지 블록 런타임
========================================================= */
.page-layout-runtime{display:grid;gap:28px}
.page-layout-block{width:100%}
.page-layout-block.style-soft{padding:24px;border-radius:18px;background:#f8fafc}
.page-layout-block.style-outline{padding:24px;border:1px solid #dbe2ea;border-radius:18px;background:#fff}
.page-layout-block.style-accent{padding:24px;border-radius:18px;background:linear-gradient(135deg,#f1f5f9,#e8eef5)}
.page-block-kicker{display:block;margin-bottom:6px;color:#64748b;font-size:.75rem;font-weight:900;letter-spacing:.08em}
.page-layout-block h2{margin:0;color:#0f172a;font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.25}
.page-block-text{margin-top:10px;color:#475569;line-height:1.75}
.page-block-text p{margin:0 0 9px}
.page-block-divider{display:grid;gap:15px}
.page-block-divider-line{height:1px;background:#dbe2ea}
.page-block-divider-copy{max-width:850px}
.page-block-single-card article{padding:22px;border:1px solid #e2e8f0;border-radius:16px;background:#fff}
.page-block-single-card article>span,.page-block-mini-card>span{display:block;margin-bottom:6px;color:#64748b;font-size:.74rem;font-weight:900}
.page-block-single-card article>strong,.page-block-mini-card>strong{display:block;color:#0f172a;font-size:1.08rem}
.page-block-card-text{margin-top:9px;color:#64748b;line-height:1.65}
.page-block-section-head{margin-bottom:15px}
.page-block-mini-grid{display:grid;gap:12px}
.page-block-mini-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-block-mini-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.page-block-mini-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.page-block-mini-card{min-width:0;padding:17px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
.page-block-mini-card p{margin:7px 0 0;color:#64748b;line-height:1.55}
.page-block-buttons{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
@media(max-width:900px){.page-block-mini-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
.page-layout-runtime{gap:20px}
.page-layout-block.style-soft,.page-layout-block.style-outline,.page-layout-block.style-accent{padding:17px}
.page-block-mini-grid.cols-2,.page-block-mini-grid.cols-3,.page-block-mini-grid.cols-4{grid-template-columns:1fr}
}
/* v2.5.48 목록 블록 */
.page-block-list{
display:grid;
gap:9px;
margin:14px 0 0;
padding:0;
list-style:none;
}
.page-block-list li{
position:relative;
padding:11px 13px 11px 34px;
border:1px solid #e2e8f0;
border-radius:11px;
background:#fff;
color:#334155;
}
.page-block-list li:before{
content:"";
position:absolute;
left:14px;
top:18px;
width:7px;
height:7px;
border-radius:999px;
background:#64748b;
}
.page-block-list li span{
display:block;
margin-top:4px;
color:#64748b;
font-size:.88rem;
}
/* =========================================================
v2.5.50 사진 / 사진+내용 블록
========================================================= */
.page-block-image-media{
overflow:hidden;
border-radius:16px;
background:#f1f5f9;
}
.page-block-image-media img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.page-block-image-media.image-height-small{height:260px}
.page-block-image-media.image-height-normal{height:420px}
.page-block-image-media.image-height-large{height:580px}
.page-block-image>.page-block-section-head{
max-width:880px;
}
.page-block-image-text{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:28px;
align-items:center;
}
.page-block-image-text.image-side-right{
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
}
.page-block-image-text.image-side-right .page-block-image-copy{order:1}
.page-block-image-text.image-side-right .page-block-image-media{order:2}
.page-block-image-copy{
min-width:0;
}
.page-block-image-copy .page-block-text{
margin-top:12px;
}
.page-block-image-text.style-soft,
.page-block-image-text.style-outline,
.page-block-image-text.style-accent{
padding:22px;
}
@media(max-width:820px){
.page-block-image-text,
.page-block-image-text.image-side-right{
grid-template-columns:1fr;
gap:17px;
}
.page-block-image-text.image-side-right .page-block-image-copy,
.page-block-image-text.image-side-right .page-block-image-media{
order:initial;
}
.page-block-image-media.image-height-small{height:220px}
.page-block-image-media.image-height-normal{height:320px}
.page-block-image-media.image-height-large{height:420px}
}
/* =========================================================
v2.5.51 블록 폭·여백·배경·모서리
========================================================= */
.page-layout-runtime{display:block}
.page-layout-unit{position:relative;box-sizing:border-box;width:100%}
.page-layout-unit:last-child{margin-bottom:0!important}
.page-layout-unit.block-width-default{width:100%}
.page-layout-unit.block-width-narrow{width:min(100%,760px);margin-left:auto;margin-right:auto}
.page-layout-unit.block-width-full{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.page-layout-unit.block-space-top-none{margin-top:0}.page-layout-unit.block-space-top-small{margin-top:12px}.page-layout-unit.block-space-top-normal{margin-top:28px}.page-layout-unit.block-space-top-large{margin-top:52px}
.page-layout-unit.block-space-bottom-none{margin-bottom:0}.page-layout-unit.block-space-bottom-small{margin-bottom:12px}.page-layout-unit.block-space-bottom-normal{margin-bottom:28px}.page-layout-unit.block-space-bottom-large{margin-bottom:52px}
.page-layout-unit.block-padding-none{padding:0}.page-layout-unit.block-padding-small{padding:12px}.page-layout-unit.block-padding-normal{padding:24px}.page-layout-unit.block-padding-large{padding:40px}
.page-layout-unit.block-radius-none{border-radius:0}.page-layout-unit.block-radius-small{border-radius:8px;overflow:hidden}.page-layout-unit.block-radius-normal{border-radius:16px;overflow:hidden}.page-layout-unit.block-radius-large{border-radius:28px;overflow:hidden}
.page-layout-unit.has-block-bg{background:var(--block-bg)}
.page-layout-unit.has-block-text,.page-layout-unit.has-block-text h1,.page-layout-unit.has-block-text h2,.page-layout-unit.has-block-text h3,.page-layout-unit.has-block-text strong,.page-layout-unit.has-block-text p,.page-layout-unit.has-block-text span,.page-layout-unit.has-block-text li,.page-layout-unit.has-block-text a:not(.button){color:var(--block-text)!important}
@media(max-width:820px){.page-layout-unit.block-width-full{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}.page-layout-unit.block-padding-large{padding:24px}.page-layout-unit.block-space-top-large{margin-top:38px}.page-layout-unit.block-space-bottom-large{margin-bottom:38px}}
/* =========================================================
v2.5.52 반응형 블록 표시 / 정렬
========================================================= */
.page-layout-unit.block-text-align-left{text-align:left}
.page-layout-unit.block-text-align-center{text-align:center}
.page-layout-unit.block-text-align-right{text-align:right}
.page-layout-unit.block-text-align-center .page-block-buttons{justify-content:center}
.page-layout-unit.block-text-align-right .page-block-buttons{justify-content:flex-end}
.page-layout-unit.block-text-align-left .page-block-buttons{justify-content:flex-start}
.page-layout-unit.block-valign-top .page-block-image-text,
.page-layout-unit.block-valign-top .welfare-program-panel{align-items:start}
.page-layout-unit.block-valign-center .page-block-image-text,
.page-layout-unit.block-valign-center .welfare-program-panel{align-items:center}
.page-layout-unit.block-valign-bottom .page-block-image-text,
.page-layout-unit.block-valign-bottom .welfare-program-panel{align-items:end}
@media(min-width:1025px){
.page-layout-unit.block-hide-desktop{display:none!important}
}
@media(min-width:681px) and (max-width:1024px){
.page-layout-unit.block-hide-tablet{display:none!important}
}
@media(max-width:680px){
.page-layout-unit.block-hide-mobile{display:none!important}
}
/* =========================================================
v2.5.54 모바일 메뉴 / 키보드 접근성
========================================================= */
.site-nav-toggle,.nav-child-toggle{display:none}
@media(min-width:761px){
.nav-item.has-child:hover>.sub-nav,
.nav-item.has-child:focus-within>.sub-nav{display:block}
}
@media(max-width:760px){
.site-header{position:relative}
.header-inner{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:10px;
padding:12px 0;
}
.site-nav-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-width:72px;
min-height:44px;
padding:8px 12px;
border:1px solid #cbd5e1;
border-radius:10px;
background:#fff;
color:#0f172a;
font-weight:900;
cursor:pointer;
}
.main-nav{
display:none!important;
grid-column:1/-1;
width:100%;
padding:8px 0 4px;
border-top:1px solid #e2e8f0;
}
.site-nav-open .main-nav{display:block!important}
.main-nav>.nav-item{
position:relative;
width:100%;
border-bottom:1px solid #f1f5f9;
}
.main-nav>.nav-item>a,
.main-nav>.nav-item>.nav-parent-label{
min-height:46px;
display:flex;
align-items:center;
padding:10px 46px 10px 10px!important;
}
.nav-child-toggle{
position:absolute;
z-index:3;
top:5px;
right:3px;
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border:0;
border-radius:9px;
background:#f8fafc;
color:#475569;
font-size:1rem;
font-weight:900;
cursor:pointer;
}
.nav-item.has-child>.sub-nav{
position:static;
display:none!important;
min-width:0;
margin:0;
padding:3px 0 8px 18px;
border:0;
border-radius:0;
box-shadow:none;
background:#f8fafc;
}
.nav-item.has-child.nav-open>.sub-nav{display:block!important}
.nav-item.has-child.nav-open>.nav-child-toggle{transform:rotate(180deg)}
.sub-nav a{
min-height:42px;
display:flex;
align-items:center;
white-space:normal;
}
.account-nav{
grid-column:1/-1;
display:none;
}
.site-nav-open .account-nav{
display:flex;
margin-top:0;
padding-top:8px;
border-top:1px solid #e2e8f0;
}
}
/* v2.5.56 기본 사이트 메인 핵심카드 */
.basic-starter-home-cards .section-title-row>div>p{margin:5px 0 0;color:#64748b}
.basic-starter-home-cards .card{display:block;text-decoration:none;color:inherit}
.basic-starter-home-cards .card strong{display:block;margin-bottom:7px;color:#0f172a}
.basic-starter-home-cards .card p{margin:0;color:#64748b;line-height:1.55}
/* =========================================================
v2.5.57 기본사이트별 페이지 디자인
========================================================= */
.adaptive-site:not(.purpose-welfare) .page-layout-runtime{
--starter-line:color-mix(in srgb,var(--adaptive-primary) 26%,#e2e8f0);
}
.adaptive-site:not(.purpose-welfare) .page-block-kicker{
color:var(--adaptive-primary);
}
.adaptive-site:not(.purpose-welfare) .page-block-mini-card{
border-color:var(--starter-line);
box-shadow:0 10px 24px rgba(15,23,42,.035);
}
.adaptive-site:not(.purpose-welfare) .page-block-mini-card>span{
color:var(--adaptive-primary);
}
.adaptive-site:not(.purpose-welfare) .page-block-list li{
border-color:var(--starter-line);
}
.adaptive-site:not(.purpose-welfare) .page-block-list li:before{
background:var(--adaptive-primary);
}
.adaptive-site:not(.purpose-welfare) .page-layout-block.style-accent{
background:linear-gradient(135deg,var(--adaptive-soft),#fff);
}
.adaptive-site:not(.purpose-welfare) .page-block-buttons .button{
background:var(--adaptive-primary);
}
.adaptive-site:not(.purpose-welfare) .page-hero-split{
border:1px solid color-mix(in srgb,var(--adaptive-primary) 14%,#e2e8f0);
box-shadow:0 18px 44px rgba(15,23,42,.08);
}
.adaptive-site:not(.purpose-welfare) .page-hero-split-image{
position:relative;
overflow:hidden;
}
.adaptive-site:not(.purpose-welfare) .page-hero-split-image:after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(135deg,transparent 58%,color-mix(in srgb,var(--adaptive-primary) 14%,transparent));
}
.adaptive-site.purpose-sports .page-hero-photo,
.adaptive-site.purpose-company .page-hero-photo,
.adaptive-site.purpose-news .page-hero-photo{
box-shadow:0 18px 44px rgba(15,23,42,.14);
}
.adaptive-site.purpose-sports .page-hero-kicker,
.adaptive-site.purpose-company .page-hero-kicker,
.adaptive-site.purpose-news .page-hero-kicker{
color:inherit;
opacity:.9;
}
.adaptive-site.purpose-news .page-layout-block{
border-radius:8px;
}
.adaptive-site.purpose-news .page-block-mini-card,
.adaptive-site.purpose-news .page-block-list li{
border-radius:8px;
}
.adaptive-site.purpose-sports .page-block-mini-card{
border-top:3px solid var(--adaptive-primary);
}
.adaptive-site.purpose-association .page-block-mini-card,
.adaptive-site.purpose-nonprofit .page-block-mini-card{
border-left:3px solid var(--adaptive-primary);
}
.adaptive-site.purpose-center .page-block-mini-card{
background:linear-gradient(180deg,#fff,var(--adaptive-soft));
}
.adaptive-site.purpose-education .page-block-mini-card{
border-bottom:3px solid var(--adaptive-primary);
}
.adaptive-site.purpose-company .page-block-mini-card{
border-top:3px solid var(--adaptive-primary);
}
@media(max-width:680px){
.adaptive-site:not(.purpose-welfare) .page-hero-split{
box-shadow:0 10px 28px rgba(15,23,42,.07);
}
}
/* =========================================================
v2.5.58 사이트 종류별 특화 블록
========================================================= */
.page-special-block{
display:grid;
gap:20px;
}
.page-special-timeline{
position:relative;
display:grid;
gap:0;
margin:0;
padding:0;
list-style:none;
}
.page-special-timeline:before{
content:"";
position:absolute;
left:78px;
top:8px;
bottom:8px;
width:2px;
background:color-mix(in srgb,var(--adaptive-primary) 24%,#e2e8f0);
}
.page-special-timeline li{
position:relative;
display:grid;
grid-template-columns:64px minmax(0,1fr);
gap:28px;
padding:14px 0;
}
.page-special-timeline li:before{
content:"";
position:absolute;
left:73px;
top:22px;
width:12px;
height:12px;
border:3px solid #fff;
border-radius:50%;
background:var(--adaptive-primary);
box-shadow:0 0 0 1px color-mix(in srgb,var(--adaptive-primary) 28%,#cbd5e1);
}
.page-special-timeline .special-meta{
color:var(--adaptive-primary);
font-weight:900;
}
.page-special-timeline strong,
.page-special-profile strong,
.page-special-schedule-item strong,
.page-special-result-item strong,
.page-special-partner strong{
display:block;
color:#0f172a;
font-size:1rem;
}
.page-special-timeline p,
.page-special-profile p,
.page-special-schedule-item p,
.page-special-result-item p,
.page-special-stat p,
.page-special-partner p{
margin:5px 0 0;
color:#64748b;
line-height:1.55;
}
.page-special-timeline a,
.page-special-profile a,
.page-special-schedule-item a,
.page-special-result-item a{
display:inline-block;
margin-top:7px;
color:var(--adaptive-primary);
font-size:.8rem;
font-weight:800;
text-decoration:none;
}
.page-special-profiles{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}
.page-special-profile{
padding:20px;
border:1px solid color-mix(in srgb,var(--adaptive-primary) 18%,#e2e8f0);
border-radius:16px;
background:#fff;
}
.page-special-profile .profile-avatar{
width:42px;
height:42px;
margin-bottom:14px;
border-radius:50%;
background:linear-gradient(135deg,var(--adaptive-soft),color-mix(in srgb,var(--adaptive-primary) 24%,#fff));
}
.page-special-profile>span{
display:block;
margin-bottom:5px;
color:var(--adaptive-primary);
font-size:.73rem;
font-weight:900;
}
.page-special-schedule,
.page-special-results{
display:grid;
gap:10px;
}
.page-special-schedule-item,
.page-special-result-item{
display:grid;
grid-template-columns:150px minmax(0,1fr);
gap:18px;
align-items:start;
padding:15px 17px;
border:1px solid #e2e8f0;
border-radius:12px;
background:#fff;
}
.page-special-schedule-item time{
color:var(--adaptive-primary);
font-weight:900;
}
.page-special-result-item{
grid-template-columns:86px minmax(0,1fr);
}
.page-special-result-item>b{
display:inline-flex;
min-height:38px;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:var(--adaptive-soft);
color:var(--adaptive-primary);
font-size:.82rem;
}
.page-special-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}
.page-special-stat{
padding:22px 18px;
border-radius:16px;
background:linear-gradient(145deg,var(--adaptive-soft),#fff);
text-align:center;
}
.page-special-stat>b{
display:block;
color:var(--adaptive-primary);
font-size:2rem;
line-height:1;
}
.page-special-stat>strong{
display:block;
margin-top:8px;
color:#0f172a;
}
.page-special-partners{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.page-special-partner{
display:block;
padding:17px;
border:1px solid #e2e8f0;
border-radius:12px;
background:#fff;
color:inherit;
text-decoration:none;
}
.page-special-partner>span{
display:block;
margin-bottom:5px;
color:var(--adaptive-primary);
font-size:.72rem;
font-weight:900;
}
.page-special-partner[href]:hover{
border-color:color-mix(in srgb,var(--adaptive-primary) 42%,#cbd5e1);
transform:translateY(-2px);
}
.page-special-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:26px 28px;
border-radius:18px;
background:linear-gradient(135deg,var(--adaptive-soft),#fff);
border:1px solid color-mix(in srgb,var(--adaptive-primary) 22%,#e2e8f0);
}
.page-special-cta .page-block-buttons{
flex:0 0 auto;
}
.adaptive-site.purpose-sports .page-special-stats .page-special-stat,
.adaptive-site.purpose-sports .page-special-results .page-special-result-item{
border-top:3px solid var(--adaptive-primary);
}
.adaptive-site.purpose-association .page-special-timeline li:before,
.adaptive-site.purpose-association .page-special-profile .profile-avatar{
box-shadow:0 0 0 4px var(--adaptive-soft);
}
.adaptive-site.purpose-company .page-special-stat{
border:1px solid color-mix(in srgb,var(--adaptive-primary) 18%,#dbeafe);
}
.adaptive-site.purpose-education .page-special-schedule-item{
border-left:4px solid var(--adaptive-primary);
}
@media(max-width:760px){
.page-special-profiles,
.page-special-stats,
.page-special-partners{
grid-template-columns:1fr;
}
.page-special-schedule-item,
.page-special-result-item{
grid-template-columns:1fr;
gap:5px;
}
.page-special-timeline:before{
left:16px;
}
.page-special-timeline li{
grid-template-columns:1fr;
gap:6px;
padding-left:42px;
}
.page-special-timeline li:before{
left:11px;
}
.page-special-cta{
align-items:flex-start;
flex-direction:column;
padding:20px;
}
}
/* =========================================================
v2.5.59 기본사이트별 전용 메인화면
========================================================= */
.home-page-feature{
position:relative;
}
.home-page-feature:nth-of-type(even){
background:color-mix(in srgb,var(--adaptive-soft) 52%,#fff);
}
.home-feature-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:20px;
}
.home-feature-head h2{
margin:4px 0 0;
}
.home-feature-head p{
margin:7px 0 0;
max-width:720px;
color:#64748b;
line-height:1.55;
}
.home-feature-more{
flex:0 0 auto;
color:var(--adaptive-primary);
font-size:.82rem;
font-weight:900;
text-decoration:none;
}
.home-page-feature .page-special-profiles,
.home-page-feature .page-special-stats,
.home-page-feature .page-special-partners{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.home-page-feature .page-special-schedule-item,
.home-page-feature .page-special-result-item{
box-shadow:0 8px 20px rgba(15,23,42,.025);
}
.home-feature-results{
background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--adaptive-soft) 48%,#fff));
}
.home-feature-stats .page-special-stat{
min-height:150px;
display:flex;
flex-direction:column;
justify-content:center;
}
.home-feature-profiles .page-special-profile{
min-height:180px;
}
.home-feature-partners .page-special-partner{
min-height:120px;
}
.adaptive-site.purpose-sports .home-feature-results .page-special-result-item{
border-left:4px solid var(--adaptive-primary);
}
.adaptive-site.purpose-association .home-feature-partners .page-special-partner{
border-top:3px solid var(--adaptive-primary);
}
.adaptive-site.purpose-company .home-feature-stats{
background:linear-gradient(135deg,var(--adaptive-soft),#fff);
}
.adaptive-site.purpose-education .home-feature-schedule .page-special-schedule-item{
background:#fff;
}
@media(max-width:760px){
.home-feature-head{
align-items:flex-start;
flex-direction:column;
gap:8px;
}
.home-page-feature .page-special-profiles,
.home-page-feature .page-special-stats,
.home-page-feature .page-special-partners{
grid-template-columns:1fr;
}
}
/* =========================================================
v2.5.74 앨범게시판
========================================================= */
.album-board-head{
align-items:flex-end;
}
.album-category-nav{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:0 0 18px;
}
.album-category-nav a{
display:inline-flex;
min-height:34px;
align-items:center;
padding:6px 12px;
border:1px solid #dbe2ea;
border-radius:999px;
background:#fff;
color:#475569;
font-size:.78rem;
font-weight:800;
text-decoration:none;
}
.album-category-nav a:hover,
.album-category-nav a.active{
border-color:var(--accent,#4f46e5);
background:var(--accent,#4f46e5);
color:#fff;
}
.album-board-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.album-board-card{
overflow:hidden;
border:1px solid #e2e8f0;
border-radius:16px;
background:#fff;
box-shadow:0 8px 24px rgba(15,23,42,.06);
color:inherit;
text-decoration:none;
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.album-board-card:hover{
transform:translateY(-3px);
border-color:#c7d2fe;
box-shadow:0 14px 30px rgba(15,23,42,.1);
}
.album-board-cover{
position:relative;
aspect-ratio:4/3;
overflow:hidden;
background:#f1f5f9;
}
.album-board-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .22s ease;
}
.album-board-card:hover .album-board-cover img{
transform:scale(1.025);
}
.album-photo-count{
position:absolute;
right:9px;
bottom:9px;
padding:4px 8px;
border-radius:999px;
background:rgba(15,23,42,.78);
color:#fff;
font-size:.7rem;
font-weight:800;
}
.album-board-card-body{
display:grid;
gap:7px;
padding:14px 15px 16px;
}
.album-board-card-body strong{
color:#0f172a;
font-size:1rem;
line-height:1.38;
}
.album-board-card-body small{
color:#64748b;
font-size:.76rem;
}
.album-category-badge{
display:inline-flex;
width:max-content;
max-width:100%;
padding:4px 8px;
border-radius:999px;
background:#eef2ff;
color:#4338ca;
font-size:.68rem;
font-weight:900;
}
.album-detail-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
margin:-4px 0 14px;
color:#64748b;
font-size:.78rem;
}
.album-detail-meta>span:not(.album-category-badge){
padding:4px 0;
}
.album-form-meta{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.album-write-box{
margin-top:24px;
}
@media(max-width:980px){
.album-board-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:640px){
.album-board-grid,
.album-form-meta{
grid-template-columns:1fr;
}
.album-board-grid{
gap:12px;
}
}
/* =========================================================
v2.5.74 앨범게시판
========================================================= */
.album-board-wrap{
display:grid;
gap:16px;
}
.album-board-head{
align-items:flex-end;
}
.album-board-head .board-head-help{
margin:5px 0 0;
color:#64748b;
font-size:.76rem;
}
.album-category-nav{
display:flex;
flex-wrap:wrap;
gap:7px;
padding:10px;
border:1px solid #e2e8f0;
border-radius:12px;
background:#fff;
}
.album-category-nav a{
display:inline-flex;
align-items:center;
min-height:34px;
padding:6px 11px;
border:1px solid #dbe2ea;
border-radius:999px;
background:#f8fafc;
color:#475569;
font-size:.72rem;
font-weight:800;
text-decoration:none;
}
.album-category-nav a.active{
border-color:#93c5fd;
background:#eff6ff;
color:#1d4ed8;
}
.album-board-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}
.album-board-card{
overflow:hidden;
border:1px solid #e2e8f0;
border-radius:14px;
background:#fff;
color:inherit;
text-decoration:none;
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.album-board-card:hover{
transform:translateY(-2px);
border-color:#bfdbfe;
box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.album-board-cover{
position:relative;
aspect-ratio:4/3;
overflow:hidden;
background:#f1f5f9;
}
.album-board-cover img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.album-photo-count{
position:absolute;
right:9px;
bottom:9px;
padding:4px 7px;
border-radius:999px;
background:rgba(15,23,42,.78);
color:#fff;
font-size:.64rem;
font-weight:900;
}
.album-board-card-body{
display:grid;
gap:6px;
padding:12px;
}
.album-board-card-body strong{
color:#0f172a;
font-size:.9rem;
line-height:1.35;
}
.album-board-card-body small{
color:#94a3b8;
font-size:.68rem;
}
.album-category-badge{
display:inline-flex;
width:max-content;
max-width:100%;
padding:3px 7px;
border-radius:999px;
background:#eef2ff;
color:#4338ca;
font-size:.62rem;
font-weight:900;
}
.album-detail-meta{
display:flex;
flex-wrap:wrap;
gap:7px;
align-items:center;
padding:9px 0;
color:#64748b;
font-size:.7rem;
}
.album-detail-meta>span:not(.album-category-badge){
padding:3px 7px;
border-radius:999px;
background:#f8fafc;
}
.album-form-meta{
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
}
.album-write-box{
margin-top:5px;
}
@media(max-width:900px){
.album-board-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:620px){
.album-board-grid,
.album-form-meta{
grid-template-columns:1fr;
}
}
/* =========================================================
v2.5.75 팝업 WYSIWYG 본문
========================================================= */
.cms-popup-body{
color:#475569;
font-size:.92rem;
line-height:1.7;
overflow-wrap:anywhere;
}
.cms-popup-body>*:first-child{
margin-top:0;
}
.cms-popup-body>*:last-child{
margin-bottom:0;
}
.cms-popup-body p,
.cms-popup-body div{
margin:.45em 0;
}
.cms-popup-body h1,
.cms-popup-body h2,
.cms-popup-body h3{
margin:.7em 0 .35em;
color:#0f172a;
line-height:1.35;
}
.cms-popup-body ul,
.cms-popup-body ol{
margin:.45em 0;
padding-left:1.4em;
}
.cms-popup-body blockquote{
margin:.65em 0;
padding:.55em .8em;
border-left:3px solid #cbd5e1;
background:#f8fafc;
}
.cms-popup-body table{
width:100%;
margin:.65em 0;
border-collapse:collapse;
font-size:.86em;
}
.cms-popup-body th,
.cms-popup-body td{
padding:6px 7px;
border:1px solid #dbe2ea;
vertical-align:top;
}
.cms-popup-body img{
max-width:100%;
height:auto;
}
/* =========================================================
v2.5.77 메인 블록 편집/앵커/리치본문
========================================================= */
.home-block-frame{
scroll-margin-top:110px;
}
.home-block-rich{
line-height:1.72;
overflow-wrap:anywhere;
}
.home-block-rich>*:first-child{
margin-top:0;
}
.home-block-rich>*:last-child{
margin-bottom:0;
}
.home-block-rich p,
.home-block-rich div{
margin:.45em 0;
}
.home-block-rich ul,
.home-block-rich ol{
margin:.5em 0;
padding-left:1.45em;
}
.home-block-rich blockquote{
margin:.7em 0;
padding:.6em .85em;
border-left:3px solid #cbd5e1;
background:#f8fafc;
}
.home-block-rich table{
width:100%;
margin:.7em 0;
border-collapse:collapse;
}
.home-block-rich th,
.home-block-rich td{
padding:7px 8px;
border:1px solid #dbe2ea;
vertical-align:top;
}
.home-block-rich img{
max-width:100%;
height:auto;
}
.home-block-rich a{
text-decoration:underline;
text-underline-offset:2px;
}
.home-hero-copy{
margin-top:8px;
}
.home-album-section .album-board-grid{
margin-top:10px;
}
/* =========================================================
v2.5.79 독립 본문블록
========================================================= */
.page-body-content-block .page-block-rich-body{
color:inherit;
line-height:1.78;
}
.page-body-content-block .page-block-rich-body>*:first-child{
margin-top:0;
}
.page-body-content-block .page-block-rich-body>*:last-child{
margin-bottom:0;
}
.page-body-content-block .page-block-rich-body img{
max-width:100%;
height:auto;
}
.page-body-content-block .page-block-rich-body table{
width:100%;
border-collapse:collapse;
}
.page-body-content-block .page-block-rich-body th,
.page-body-content-block .page-block-rich-body td{
padding:7px 8px;
border:1px solid #dbe2ea;
vertical-align:top;
}
/* Ulsan Mugeo Welfare Center front customizations */
.skip-link{position:absolute;left:-9999px;top:auto}.skip-link:focus{left:16px;top:10px;z-index:9999;background:#fff;padding:10px 14px;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.mugeo-utility{background:#f7fafc;border-bottom:1px solid #e5e7eb;font-size:13px}.mugeo-utility-inner{min-height:34px;display:flex;align-items:center;justify-content:flex-end;gap:16px}.mugeo-utility nav{display:flex;gap:16px;align-items:center}.mugeo-utility a{color:#334155;text-decoration:none;font-weight:700}.mugeo-utility a:hover{text-decoration:underline}
.mugeo-adminbar{background:#102a43;color:#fff;font-size:14px}.mugeo-adminbar .wrap{display:flex;gap:14px;align-items:center;min-height:40px}.mugeo-adminbar a{color:#fff;text-decoration:none;border-left:1px solid rgba(255,255,255,.25);padding-left:14px}.mugeo-adminbar a:hover{text-decoration:underline}
.mugeo-footer{display:grid;gap:14px}.mugeo-footer-brand{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.mugeo-footer-brand strong{font-size:18px}.mugeo-footer-brand span{font-size:13px;opacity:.78}.mugeo-footer-info{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px}.mugeo-footer-links{display:flex;flex-wrap:wrap;gap:14px}.mugeo-footer-links a{text-decoration:none}.mugeo-footer-links a:hover{text-decoration:underline}
@media (max-width:760px){.mugeo-utility-label{display:none}.mugeo-utility-inner{justify-content:flex-end}.mugeo-utility nav{gap:10px;font-size:12px}.mugeo-adminbar .wrap{overflow-x:auto;white-space:nowrap}.mugeo-footer-info{display:grid;gap:6px}}
/* =========================================================
울산무거복지센터 v1.1 브랜드/메인 UX 보강
========================================================= */
:root{
--mugeo-blue:#104ea2;
--mugeo-blue-deep:#083b83;
--mugeo-green:#2e9e45;
--mugeo-green-deep:#237c36;
--mugeo-red:#e84c4c;
--mugeo-soft-blue:#eef6ff;
--mugeo-soft-green:#eff9f1;
}
.mugeo-home-hero{
padding:78px 0 72px;
background:
radial-gradient(circle at 9% 16%,rgba(46,158,69,.14),transparent 30%),
radial-gradient(circle at 92% 8%,rgba(16,78,162,.12),transparent 34%),
linear-gradient(135deg,#f7fbff 0%,#fff 52%,#f5fbf6 100%);
}
.mugeo-home-hero:after{border-color:rgba(16,78,162,.05)}
.mugeo-home-hero .welfare-home-label{background:#e9f4ff;color:var(--mugeo-blue-deep)}
.mugeo-home-hero .welfare-home-hero-copy h1{color:#123f78}
.mugeo-home-hero .welfare-home-hero-actions .button{background:var(--mugeo-blue)}
.mugeo-home-hero .welfare-home-hero-actions .secondary-link{border-color:#bfd2ec;color:var(--mugeo-blue-deep)}
.mugeo-home-hero .welfare-home-keywords span{border-color:#d6e4f5;color:#49647f}
.mugeo-hero-brandcard{
position:relative;
min-height:345px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:38px 32px;
overflow:hidden;
border:1px solid #d7e5f4;
border-radius:28px;
background:
linear-gradient(160deg,rgba(255,255,255,.97),rgba(243,249,255,.95)),
linear-gradient(135deg,var(--mugeo-soft-green),var(--mugeo-soft-blue));
box-shadow:0 26px 60px rgba(16,78,162,.12);
text-align:center;
}
.mugeo-hero-brandcard:before,
.mugeo-hero-brandcard:after{
content:"";
position:absolute;
border-radius:50%;
pointer-events:none;
}
.mugeo-hero-brandcard:before{width:260px;height:260px;right:-110px;top:-120px;border:42px solid rgba(46,158,69,.08)}
.mugeo-hero-brandcard:after{width:300px;height:300px;left:-145px;bottom:-180px;border:48px solid rgba(16,78,162,.07)}
.mugeo-hero-brandmark{position:relative;z-index:1;width:min(210px,65%);margin-bottom:20px}
.mugeo-hero-brandmark img{display:block;width:100%;height:auto}
.mugeo-hero-brandcard strong{position:relative;z-index:1;color:var(--mugeo-blue-deep);font-size:clamp(1.55rem,2.6vw,2.1rem);letter-spacing:-.035em}
.mugeo-hero-brandcard span{position:relative;z-index:1;margin-top:9px;color:var(--mugeo-green-deep);font-weight:800}
.mugeo-hero-brandcard small{position:relative;z-index:1;margin-top:16px;color:#7890a8;font-size:.72rem;letter-spacing:.1em}
.mugeo-custom-card-section:nth-of-type(even){background:#f8fbff}
.mugeo-custom-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mugeo-custom-card-grid>a,.mugeo-custom-card-grid>article{min-height:180px}
.mugeo-custom-card-grid>article{position:relative;padding:22px 20px;border:1px solid #dfeae6;border-radius:18px;background:#fff;color:#334a42}
.mugeo-custom-card-grid>article b{display:grid;place-items:center;width:39px;height:39px;margin-bottom:24px;border-radius:12px;background:#eaf7f2;color:#148267;font-size:.78rem}
.mugeo-custom-card-grid>article strong{display:block;margin-bottom:9px;color:#203a32;font-size:1.03rem}
.mugeo-custom-card-grid>article span{display:block;color:#71837d;line-height:1.62;font-size:.87rem}
.mugeo-facts-section{padding-top:54px;padding-bottom:54px;background:#fff}
.mugeo-facts-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.mugeo-facts-grid>a{min-height:158px;border-color:#dbe7f4;background:linear-gradient(180deg,#fff,#fbfdff)}
.mugeo-facts-grid>a b{background:#edf5ff;color:var(--mugeo-blue)}
.mugeo-facts-grid>a:after{color:var(--mugeo-blue)}
.mugeo-facts-grid>a:hover{border-color:#bad0ea;box-shadow:0 14px 28px rgba(16,78,162,.08)}
.mugeo-day-grid{grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr)}
.mugeo-day-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
.mugeo-day-steps li{min-height:154px}
.mugeo-day-steps li>span{background:var(--mugeo-blue)}
.mugeo-day-section .welfare-home-guide-copy .button{background:var(--mugeo-blue)}
.mugeo-support-brandcard{
min-height:280px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:34px;
border:1px solid #d8e7df;
border-radius:22px;
background:linear-gradient(145deg,#fff,#f5fbf7 60%,#f2f8ff);
text-align:center;
}
.mugeo-support-brandcard img{width:min(180px,56%);height:auto;margin-bottom:20px}
.mugeo-support-brandcard strong{color:var(--mugeo-green-deep);font-size:1.4rem}
.mugeo-support-brandcard span{margin-top:10px;color:#647b70;line-height:1.6}
.mugeo-footer-brand{display:flex;align-items:center;gap:12px}
.mugeo-footer-brand img{width:58px;height:auto;flex:0 0 auto}
.mugeo-footer-brand>div{display:flex;flex-direction:column;gap:3px}
.mugeo-footer-brand strong{color:#1e3f72}
.mugeo-footer-brand span{font-size:.82rem;color:#748295}
@media(max-width:1120px){
.mugeo-facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mugeo-day-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
.mugeo-day-grid{grid-template-columns:1fr}
.mugeo-hero-brandcard{max-width:700px;min-height:300px}
}
@media(max-width:680px){
.mugeo-home-hero{padding:48px 0 42px}
.mugeo-hero-brandcard{min-height:250px;padding:30px 22px}
.mugeo-custom-card-grid,.mugeo-facts-grid,.mugeo-day-steps{grid-template-columns:1fr}
.mugeo-custom-card-grid>a,.mugeo-custom-card-grid>article,.mugeo-facts-grid>a{min-height:0}
.mugeo-footer-brand{align-items:flex-start}
}
/* =========================================================
울산무거복지센터 v1.3 서브페이지 공통 UX
========================================================= */
.page-content{
--mugeo-page-blue:#104ea2;
--mugeo-page-green:#2e9e45;
}
.page-content .page-hero-custom{
border:1px solid #dce8f4;
box-shadow:0 16px 36px rgba(16,78,162,.07);
}
.page-content .page-hero-custom:before{
content:"";
position:absolute;
z-index:0;
right:-70px;
top:-110px;
width:250px;
height:250px;
border:36px solid rgba(46,158,69,.07);
border-radius:50%;
pointer-events:none;
}
.page-content .page-hero-custom:after{
content:"";
position:absolute;
z-index:0;
left:-100px;
bottom:-150px;
width:300px;
height:300px;
border:44px solid rgba(16,78,162,.055);
border-radius:50%;
pointer-events:none;
}
.page-content .page-hero-copy{position:relative;z-index:1}
.page-content .page-hero-kicker{color:#2f6daa;opacity:1}
.page-content .page-hero-breadcrumb{color:#57718b;opacity:1}
.page-content .page-layout-runtime{padding-bottom:14px}
.page-content .page-layout-unit{scroll-margin-top:110px}
.page-content .page-block-section-head{max-width:900px;margin-bottom:20px}
.page-content .page-block-kicker{color:#2b6fb5}
.page-content .page-layout-block h2{color:#173f72}
.page-content .page-block-mini-card{
border-color:#dce8e3;
border-radius:17px;
box-shadow:0 10px 24px rgba(15,43,67,.035);
}
.page-content .page-block-mini-card>span{color:#25833a}
.page-content .page-block-mini-card>strong{color:#23433a}
.page-content .page-block-mini-card[href]{transition:.18s ease;text-decoration:none}
.page-content .page-block-mini-card[href]:hover{
transform:translateY(-3px);
border-color:#b9d9c2;
box-shadow:0 15px 30px rgba(46,158,69,.09);
}
.page-content .page-layout-block.style-soft{
background:linear-gradient(145deg,#f7fbff,#f6fbf7);
border:1px solid #e2ece8;
}
.page-content .page-layout-block.style-accent,
.page-content .page-special-cta.style-accent{
background:linear-gradient(135deg,#edf6ff,#f2faf4);
border:1px solid #d8e8e0;
}
.page-content .page-special-cta h2{color:#173f72}
.page-content .page-special-cta .button,
.page-content .page-block-buttons .button{background:#104ea2}
.page-content .page-block-buttons .secondary-link{border-color:#c6d9ed;color:#164b83;background:#fff}
.page-content .welfare-step-list li>span{background:#104ea2}
.page-content .welfare-greeting-card{border-color:#d7e6dd;background:linear-gradient(145deg,#fff,#f6fbf7)}
.page-content .welfare-location-card{border-color:#dce8f4}
.page-content .welfare-location-card>span{color:#2c6da8}
.page-content .welfare-prose{
max-width:900px;
font-size:1rem;
line-height:1.86;
color:#344a5e;
}
.page-content .welfare-prose.compact{max-width:820px}
.page-content .page-body-content-block .page-block-rich-body{line-height:1.82;color:#344a5e}
.page-content .page-body-content-block table{font-size:.95rem}
.page-content .page-body-content-block th{background:#f3f8fd;color:#244a70}
.page-content .page-block-single-card.style-accent article{border-color:#cfe2d7;background:linear-gradient(145deg,#fff,#f5fbf7)}
.page-content .page-block-single-card.style-accent article>span{color:#2e9e45}
.page-content .page-block-single-card.style-accent article>strong{color:#173f72;font-size:1.18rem}
@media(max-width:760px){
.page-content .page-hero-custom{margin-left:-2px;margin-right:-2px}
.page-content .page-special-cta{gap:18px}
.page-content .page-block-buttons a{width:100%;text-align:center;justify-content:center}
}
/* 울산무거복지센터 V1.5 관리자 작업바 */
.mugeo-adminbar{position:sticky;top:0;z-index:1200;box-shadow:0 2px 10px rgba(15,23,42,.15)}
.mugeo-adminbar .wrap{justify-content:space-between;min-height:44px}
.mugeo-adminbar strong{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mugeo-adminbar strong span{font-weight:500;color:#bfdbfe;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mugeo-adminbar nav{display:flex;align-items:center;gap:12px;overflow-x:auto;white-space:nowrap}
.mugeo-adminbar a.mugeo-admin-primary{background:#fff;color:#102a43;border:0;border-radius:8px;padding:7px 11px;font-weight:800}
.mugeo-adminbar a.mugeo-admin-primary:hover{text-decoration:none;background:#e2e8f0}
@media (max-width:760px){.mugeo-adminbar .wrap{display:grid;grid-template-columns:1fr;gap:4px;padding-top:6px;padding-bottom:6px}.mugeo-adminbar strong span{max-width:180px}.mugeo-adminbar nav{gap:10px}.mugeo-adminbar a{border-left:0;padding-left:0}.mugeo-adminbar a.mugeo-admin-primary{padding:6px 9px}}
/* 울산무거복지센터 V1.6 화면 안정화 */
/* 관리자 작업바와 sticky 헤더가 같은 top:0에서 겹치던 현상 방지 */
.has-adminbar .site-header{position:relative;top:auto}
/* 긴 주소·메일·게시물 내용이 작은 화면에서 가로폭을 밀어내지 않도록 방어 */
.page-content,.board-wrap,.gallery-wrap,.contact-wrap,.mugeo-footer{min-width:0;overflow-wrap:anywhere}
.page-layout-runtime,.page-layout-unit,.wysiwyg-body{min-width:0}
.page-layout-runtime img,.wysiwyg-body img,.board-content img{max-width:100%;height:auto}
.page-layout-runtime table,.wysiwyg-body table,.board-content table{max-width:100%}
@media(max-width:760px){
.mugeo-utility-inner{width:min(100%,calc(100% - 20px));}
.mugeo-utility nav{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;font-size:11px}
.mugeo-utility nav a{display:block;min-width:0;padding:7px 3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:7px}
.page-content table,.board-content table,.wysiwyg-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* =========================================================
v1.7.4 직원사이트형 활동소식 앨범 UX
========================================================= */
.album-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:14px}.album-page-head h1{margin:2px 0 5px}.album-page-head p{margin:0;color:#667085}.album-page-actions,.album-view-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}.album-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border-radius:9px;border:1px solid #d8e0e8;text-decoration:none;font-weight:800;font-size:.84rem}.album-btn.primary{background:var(--accent,#217a4a);border-color:var(--accent,#217a4a);color:#fff}.album-btn.ghost{background:#fff;color:#425466}.album-filter-panel{padding:14px 16px;margin-bottom:16px;border:1px solid #e0e5ec;border-radius:12px;background:#fff}.album-filter-form{display:grid;grid-template-columns:minmax(240px,1fr) 160px 125px auto auto;gap:8px;align-items:end}.album-filter-form label{display:grid;gap:5px;font-size:.75rem;font-weight:700;color:#5b6778}.album-filter-form input,.album-filter-form select{height:40px;border:1px solid #d7dde6;border-radius:8px;background:#fff;padding:0 11px;font:inherit}.album-filter-submit,.album-filter-reset{height:40px;border-radius:8px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;text-decoration:none}.album-filter-submit{border:1px solid #334155;background:#334155;color:#fff;cursor:pointer}.album-filter-reset{border:1px solid #d7dde6;background:#fff;color:#475569}.album-list-head{display:flex;justify-content:space-between;align-items:center;margin:0 2px 10px;color:#657083;font-size:.78rem}.album-list-head strong{font-size:.86rem;color:#263244}.album-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.album-card{min-width:0;background:#fff;border:1px solid #e0e5ec;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(35,49,70,.05);transition:.18s ease}.album-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(35,49,70,.1);border-color:#c9d5cb}.album-card-link{display:block;color:inherit;text-decoration:none}.album-card-cover{position:relative;aspect-ratio:4/3;background:#eef2f5;overflow:hidden}.album-card-cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .25s ease}.album-card:hover .album-card-cover img{transform:scale(1.025)}.album-card-empty{height:100%;display:grid;place-items:center;font-size:48px;color:#9ca7b6}.album-card-cover>.album-category-badge{position:absolute;left:8px;top:8px;background:rgba(245,252,247,.95);color:#28713e}.album-card-body{padding:11px 12px 12px}.album-card-date{font-size:.68rem;color:#748093;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album-card-body h2{font-size:.95rem;line-height:1.35;margin:0 0 6px;color:#263244;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album-card-body p{font-size:.75rem;line-height:1.55;color:#697487;margin:0;min-height:37px}.album-card-meta{display:flex;justify-content:space-between;gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid #eef1f5;font-size:.66rem;color:#8a94a4}.album-empty-state{min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed #d6dde6;border-radius:12px;background:#fafbfc;color:#7c8798}.album-empty-state>span{font-size:42px}.album-empty-state strong{margin-top:8px;color:#334155}.album-empty-state p{margin:5px 0 0;font-size:.8rem}.album-pagination{margin-top:16px}
.album-view-panel{border:1px solid #e0e5ec;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 3px 14px rgba(35,49,70,.05)}.album-view-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding:0 0 12px;background:transparent}.album-view-toolbar h1{margin:1px 0 0;font-size:1.45rem}.album-view-header{padding:17px 18px 14px;border-bottom:1px solid #e8ebef}.album-view-title h2{font-size:1.35rem;margin:7px 0 8px;color:#263244}.album-view-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem;color:#687487}.album-view-description{padding:13px 18px;background:#fafbfc;border-bottom:1px solid #edf0f3;font-size:.86rem;line-height:1.75;color:#556174}.album-gallery{padding:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.album-gallery-item{margin:0;min-width:0}.album-gallery-item button{position:relative;display:block;width:100%;padding:0;border:0;border-radius:9px;overflow:hidden;background:#eef2f5;cursor:zoom-in;aspect-ratio:4/3}.album-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}.album-gallery-item button:hover img{transform:scale(1.025)}.album-zoom-icon{position:absolute;right:7px;top:7px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:rgba(15,23,42,.68);color:#fff;font-size:.75rem}.album-gallery-item figcaption{font-size:.72rem;line-height:1.4;color:#657184;padding:5px 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album-lightbox[hidden]{display:none}.album-lightbox{position:fixed;z-index:99999;inset:0;background:rgba(9,14,22,.94);display:grid;grid-template-columns:70px minmax(0,1fr) 70px;align-items:center}.album-lightbox-stage{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 10px 58px;min-width:0}.album-lightbox-stage img{max-width:100%;max-height:calc(100vh - 95px);object-fit:contain;box-shadow:0 8px 30px rgba(0,0,0,.35)}.album-lightbox-info{margin-top:11px;color:#fff;display:flex;gap:12px;align-items:center;font-size:.8rem}.album-lightbox-info strong{min-width:54px}.album-lightbox-close{position:absolute;right:18px;top:14px;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px;cursor:pointer}.album-lightbox-nav{width:48px;height:64px;justify-self:center;border:0;border-radius:10px;background:rgba(255,255,255,.11);color:#fff;font-size:38px;cursor:pointer}.album-lightbox-open{overflow:hidden}
.album-admin-panel{margin-top:18px;padding:16px;border:1px solid #dce2e9;border-radius:12px;background:#fbfcfd}.album-admin-panel-head h2{margin:0 0 4px;font-size:1.05rem}.album-admin-panel-head p{margin:0 0 12px;color:#748093;font-size:.78rem}.album-photo-editor-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}.album-photo-edit-card{min-width:0;border:1px solid #dce2e9;border-radius:9px;background:#fff;overflow:hidden}.album-photo-preview{position:relative;aspect-ratio:4/3;background:#eef2f5;overflow:hidden}.album-photo-preview img{width:100%;height:100%;object-fit:cover;display:block}.album-cover-mark{position:absolute;left:6px;top:6px;background:#2f7c48;color:#fff;border-radius:5px;padding:2px 6px;font-size:.64rem;font-weight:800}.album-photo-order{position:absolute;right:6px;top:6px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:rgba(20,28,40,.75);color:#fff;font-size:.62rem;font-weight:800}.album-caption-form{padding:7px 7px 4px}.album-caption-form label{display:grid;gap:4px;font-size:.66rem;color:#697487}.album-caption-form input{height:30px;border:1px solid #dce1e8;border-radius:6px;padding:0 7px;font-size:.72rem}.album-caption-form button,.album-replace-form button{margin-top:5px;width:100%;height:28px;border:1px solid #d8dee7;border-radius:6px;background:#f7f9fb;color:#556274;cursor:pointer;font-size:.68rem}.album-photo-controls{display:grid;grid-template-columns:32px 32px 1fr;gap:4px;padding:0 7px 7px}.album-photo-controls form{margin:0}.album-photo-controls button{width:100%;height:28px;border:1px solid #d8dee7;border-radius:6px;background:#f7f9fb;color:#556274;cursor:pointer;font-size:.68rem}.album-photo-cover-label{display:grid;place-items:center;height:28px;font-size:.65rem;color:#2f7c48;font-weight:800}.album-replace-form{padding:0 7px 7px}.album-replace-form label{display:grid;gap:4px;font-size:.65rem;color:#697487}.album-replace-form input{font-size:.64rem;max-width:100%}.album-photo-delete-form{margin:0;padding:0 7px 8px}.album-photo-delete-form button{width:100%;height:28px;border:1px solid #efd1d1;border-radius:6px;background:#fff7f7;color:#a33838;cursor:pointer;font-size:.68rem}.album-form-meta{grid-template-columns:repeat(3,minmax(0,1fr))}.album-write-help{margin:-5px 0 12px;color:#718096;font-size:.78rem}
@media(max-width:1100px){.album-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.album-photo-editor-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.album-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:860px){.album-filter-form{grid-template-columns:1fr 1fr}.album-filter-search{grid-column:1/-1}.album-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.album-photo-editor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.album-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.album-form-meta{grid-template-columns:1fr 1fr}.album-lightbox{grid-template-columns:54px minmax(0,1fr) 54px}}@media(max-width:620px){.album-page-head,.album-view-toolbar{align-items:flex-start;flex-direction:column}.album-page-actions,.album-view-toolbar-actions{width:100%}.album-page-actions .album-btn,.album-view-toolbar-actions .album-btn{flex:1}.album-filter-form{grid-template-columns:1fr}.album-filter-search{grid-column:auto}.album-card-grid,.album-gallery,.album-photo-editor-grid,.album-form-meta{grid-template-columns:1fr}.album-card-grid{gap:12px}.album-lightbox{grid-template-columns:44px minmax(0,1fr) 44px}.album-lightbox-nav{width:36px;height:52px;font-size:30px}.album-lightbox-close{right:10px;top:10px}}
/* =========================================================
v1.7.5 게시판·앨범 등록 팝업 UX
========================================================= */
.board-action-nav .board-action-link{
display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;
border:1px solid transparent;border-radius:9px;background:transparent;color:#334155;
font:inherit;font-size:.9rem;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.board-action-nav .board-action-link:hover,.board-action-nav .board-action-link:focus-visible{
color:#0f172a;background:#fff;border-color:#cbd5e1;
}
.album-page-actions button.album-btn{font:inherit;cursor:pointer}
.public-entry-modal[aria-hidden="true"]{display:none}
.public-entry-modal[aria-hidden="false"],.public-entry-modal.is-open{display:flex}
.public-entry-modal{
position:fixed;inset:0;z-index:100000;align-items:center;justify-content:center;padding:20px;
}
.public-entry-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(2px)}
.public-entry-modal-dialog{
position:relative;z-index:1;width:min(720px,100%);max-height:calc(100vh - 40px);overflow:hidden;
display:flex;flex-direction:column;background:#fff;border:1px solid #dbe2ea;border-radius:18px;
box-shadow:0 28px 80px rgba(15,23,42,.32);
}
.public-entry-modal-dialog.public-entry-modal-wide{width:min(980px,100%)}
.public-entry-modal-head{
flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
padding:20px 22px 16px;border-bottom:1px solid #e5eaf0;background:#fff;
}
.public-entry-modal-head .eyebrow{margin:0 0 3px}.public-entry-modal-head h2{margin:0 0 5px;font-size:1.25rem}
.public-entry-modal-head p:not(.eyebrow){margin:0;color:#667085;font-size:.83rem;line-height:1.55}
.public-entry-modal-x{
flex:0 0 auto;width:40px;height:40px;border:0;border-radius:10px;background:#f1f5f9;color:#334155;
font-size:1.5rem;line-height:1;cursor:pointer;
}
.public-entry-modal-body{min-height:0;overflow:auto;padding:20px 22px 24px;background:#fff}
.public-entry-form{display:grid;gap:14px}.public-entry-form>label{display:grid;gap:7px;font-weight:800}
.public-entry-form input[type="text"],.public-entry-form input[type="date"],.public-entry-form input:not([type]),
.public-entry-form select,.public-entry-form textarea{
width:100%;padding:12px 13px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;font:inherit;
}
.public-entry-form textarea{resize:vertical;min-height:120px}
.public-entry-modal-actions{
position:sticky;bottom:-24px;z-index:3;display:flex;justify-content:flex-end;gap:8px;margin:4px -22px -24px;
padding:14px 22px;background:#fff;border-top:1px solid #e9edf2;
}
.public-entry-modal-actions button{min-height:42px;padding:10px 17px;border-radius:10px;font-weight:900;cursor:pointer}
.public-entry-modal-actions button[type="submit"]{border:1px solid var(--cms-primary,#0f172a);background:var(--cms-primary,#0f172a);color:#fff}
.public-entry-modal-actions .public-modal-cancel{border:1px solid #cbd5e1;background:#fff;color:#475569}
body.public-entry-modal-open{overflow:hidden}
.public-entry-modal .multi-upload-box{margin-top:2px}
.public-entry-modal .wel4u-editor{max-width:100%}
@media(max-width:760px){
.board-action-nav .board-action-link{width:100%;min-height:44px;white-space:normal;text-align:center}
.public-entry-modal{padding:8px;align-items:stretch}
.public-entry-modal-dialog,.public-entry-modal-dialog.public-entry-modal-wide{width:100%;max-height:calc(100vh - 16px);border-radius:14px;margin:auto}
.public-entry-modal-head{padding:16px}.public-entry-modal-body{padding:16px}
.public-entry-modal-actions{bottom:-16px;margin:4px -16px -16px;padding:12px 16px}
.public-entry-modal-actions button{flex:1}
}
/* =========================================================
v1.7.6 앨범 등록 - 다중 사진 선택 / 드래그앤드롭
========================================================= */
.album-photo-dropzone{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
min-height:150px;padding:22px 18px;border:2px dashed #9fb9a7;border-radius:14px;
background:#f7fbf8;color:#40564a;text-align:center;cursor:pointer;outline:none;
transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.album-photo-dropzone:hover,.album-photo-dropzone:focus-visible,.album-photo-dropzone.is-dragover{
border-color:#2f7c48;background:#eef8f1;box-shadow:0 0 0 4px rgba(47,124,72,.10);
}
.album-photo-dropzone.is-dragover{transform:translateY(-1px)}
.album-photo-dropzone-icon{
width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
background:#2f7c48;color:#fff;font-size:1.55rem;font-weight:500;line-height:1;
}
.album-photo-dropzone strong{font-size:1rem;color:#244832}
.album-photo-dropzone span:not(.album-photo-dropzone-icon){font-size:.84rem;line-height:1.5;color:#536b5b}
.album-photo-dropzone small{font-size:.72rem;color:#7a8b7f}
.album-bulk-status{min-height:18px;margin:-2px 2px 0;font-size:.76rem;color:#4b6352}
.album-bulk-status.is-error{color:#a14a36}
.album-bulk-upload .multi-upload-list{margin-top:2px}
.album-bulk-upload .multi-upload-item.has-file{
grid-template-columns:72px minmax(0,1.25fr) minmax(0,1fr) auto auto;
align-items:center;
}
.multi-upload-thumb{
width:72px;height:58px;border-radius:8px;overflow:hidden;background:#e9eef0;border:1px solid #d5dde0;
}
.multi-upload-thumb img{width:100%;height:100%;display:block;object-fit:cover}
@media(max-width:900px){
.album-bulk-upload .multi-upload-item.has-file{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr)}
.album-bulk-upload .multi-upload-item.has-file .multi-cover-choice,.album-bulk-upload .multi-upload-item.has-file .multi-upload-remove{align-self:end}
.multi-upload-thumb{width:64px;height:54px}
}
@media(max-width:620px){
.album-photo-dropzone{min-height:132px;padding:18px 12px}
.album-bulk-upload .multi-upload-item.has-file{grid-template-columns:1fr}
.multi-upload-thumb{width:100%;height:auto;aspect-ratio:16/9}
}
/* =========================================================
v1.7.9.27 활동소식 사진 번호순 업로드
========================================================= */
.gallery-upload-order-option{
display:flex!important;
align-items:flex-start;
gap:10px!important;
padding:11px 12px;
border:1px solid #cfe2d5;
border-radius:10px;
background:#f5faf6;
color:#334155;
cursor:pointer;
}
.gallery-upload-order-option input[type="checkbox"]{
flex:0 0 auto;
width:18px;
height:18px;
margin:2px 0 0;
accent-color:#2f7c48;
}
.gallery-upload-order-option>span{
display:grid;
gap:3px;
min-width:0;
}
.gallery-upload-order-option strong{
font-size:.84rem;
color:#245b36;
}
.gallery-upload-order-option small{
font-size:.73rem;
line-height:1.55;
font-weight:500;
color:#64748b;
}
.gallery-photo-order-tools{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:0 0 10px;
padding:10px 12px;
border:1px solid #d8e3dc;
border-radius:9px;
background:#f7faf8;
}
.gallery-photo-order-tools>div{
display:grid;
gap:2px;
min-width:0;
}
.gallery-photo-order-tools strong{
font-size:.82rem;
color:#244832;
}
.gallery-photo-order-tools span{
font-size:.72rem;
line-height:1.45;
color:#6b7788;
}
.gallery-photo-order-tools form{margin:0;flex:0 0 auto}
.gallery-photo-order-tools button{
min-height:36px;
padding:7px 11px;
border:1px solid #94bda0;
border-radius:8px;
background:#fff;
color:#2f6f43;
font:inherit;
font-size:.75rem;
font-weight:800;
cursor:pointer;
white-space:nowrap;
}
.gallery-photo-order-tools button:hover,
.gallery-photo-order-tools button:focus-visible{
background:#edf7f0;
border-color:#5c9a6d;
}
@media(max-width:620px){
.gallery-photo-order-tools{align-items:stretch;flex-direction:column}
.gallery-photo-order-tools form,.gallery-photo-order-tools button{width:100%}
}
/* =========================================================
v1.7.9.12 메인 WYSIWYG 출력 일치
- 관리자 WYSIWYG의 줄바꿈/굵게/기울임/밑줄/글꼴/크기/색상을 홈에서 유지
========================================================= */
.welfare-home-rich,
.home-feature-body{
overflow-wrap:anywhere;
}
.welfare-home-rich>*:first-child,
.home-feature-body>*:first-child{
margin-top:0;
}
.welfare-home-rich>*:last-child,
.home-feature-body>*:last-child{
margin-bottom:0;
}
.welfare-home-rich p,
.welfare-home-rich div,
.home-feature-body p,
.home-feature-body div{
margin:.45em 0;
}
.welfare-home-rich ul,
.welfare-home-rich ol,
.home-feature-body ul,
.home-feature-body ol{
margin:.55em 0;
padding-left:1.45em;
}
.welfare-home-rich blockquote,
.home-feature-body blockquote{
margin:.7em 0;
padding:.6em .85em;
border-left:3px solid #cbd5e1;
background:rgba(248,250,252,.82);
}
.welfare-home-rich img,
.home-feature-body img{
max-width:100%;
height:auto;
}
.welfare-home-rich table,
.home-feature-body table{
width:100%;
margin:.7em 0;
border-collapse:collapse;
}
.welfare-home-rich th,
.welfare-home-rich td,
.home-feature-body th,
.home-feature-body td{
padding:7px 8px;
border:1px solid #dbe2ea;
vertical-align:top;
}
.welfare-home-rich a,
.home-feature-body a{
text-decoration:underline;
text-underline-offset:2px;
}
.welfare-home-hero-body{
max-width:650px;
margin:0;
color:#52675f;
font-size:1.04rem;
line-height:1.82;
}
.welfare-home-section-rich{
max-width:680px;
margin-top:8px;
color:#667a73;
line-height:1.7;
}
.welfare-home-guide-body{
margin:0 0 19px;
color:#647972;
line-height:1.75;
}
.welfare-home-support-body{
max-width:590px;
margin:0;
color:#657a72;
line-height:1.75;
}
.welfare-home-contact-body{
margin:0;
color:#c7d9d2;
line-height:1.7;
}
.home-feature-body{
max-width:720px;
margin:7px 0 0;
color:#64748b;
line-height:1.55;
}
/* =========================================================
v1.7.9.20 복합 블록 / 카드 그리드 제목 개선
========================================================= */
.home-composite-section{background:#f7faf8}
.home-composite-section-head{display:grid;gap:10px;margin-bottom:24px}
.home-composite-section-head h2{position:relative;display:flex;align-items:center;gap:12px;margin:0;color:#173b2a;font-size:clamp(1.72rem,2.8vw,2.35rem);font-weight:900;line-height:1.2;letter-spacing:-.035em}.home-composite-section-head h2:before{content:"";flex:0 0 6px;align-self:stretch;min-height:34px;border-radius:999px;background:var(--accent,#2f7d4e)}
.home-composite-intro{max-width:880px;color:#61736b;line-height:1.7}
.home-composite-grid{
display:grid;
grid-template-columns:repeat(var(--home-composite-columns,3),minmax(0,1fr));
gap:16px;
align-items:stretch;
}
.home-composite-card{
min-width:0;
display:flex;
flex-direction:column;
overflow:hidden;
border:1px solid #dce6df;
border-radius:16px;
background:#fff;
box-shadow:0 10px 28px rgba(32,72,49,.07);
}
.home-composite-card-head{
min-height:58px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:15px 16px 13px;
border-bottom:1px solid #e7eee9;
background:linear-gradient(180deg,#fff,#fbfdfb);
}
.home-composite-card-head h2,.home-composite-card-head h3{min-width:0;margin:0;color:#173f2a;font-size:1.16rem;font-weight:900;line-height:1.3;letter-spacing:-.02em}
.home-composite-card-head>a{flex:0 0 auto;color:#47745a;font-size:.76rem;font-weight:800;text-decoration:none}
.home-composite-card-head>a:hover{text-decoration:underline;text-underline-offset:3px}
.home-composite-card-body{flex:1;min-width:0;padding:11px 16px 16px}
.home-composite-list{display:grid}
.home-composite-list-row{
min-width:0;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
align-items:center;
padding:10px 2px;
border-bottom:1px solid #edf1ee;
color:#334b3d;
text-decoration:none;
}
.home-composite-list-row:last-child{border-bottom:0}
.home-composite-list-row:hover .home-composite-list-title{color:#1f6b42;text-decoration:underline;text-underline-offset:3px}
.home-composite-list-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
.home-composite-list-title i{margin-right:5px;font-style:normal;font-size:.8rem}
.home-composite-list-row time{color:#596f61;font-size:max(12px,.75rem);white-space:nowrap}
.home-composite-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.home-composite-media-item{min-width:0;display:grid;gap:6px;color:#344a3d;text-decoration:none}
.home-composite-thumb{display:block;overflow:hidden;border-radius:10px;background:#edf2ee;aspect-ratio:4/3}
.home-composite-thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .2s ease}
.home-composite-media-item:hover .home-composite-thumb img{transform:scale(1.035)}
.home-composite-thumb-empty{width:100%;height:100%;display:grid;place-items:center;color:#8a9990;font-size:.75rem}
.home-composite-media-item strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.79rem;line-height:1.35}
.home-composite-media-item time{color:#596f61;font-size:max(12px,.75rem)}
.home-composite-media-list .home-composite-list-row{padding:11px 2px}
.home-composite-summary{margin:2px 0 0;color:#5f7168;line-height:1.7;font-size:.88rem}
.home-composite-rich{color:#556b60;line-height:1.7;font-size:.88rem;overflow-wrap:anywhere}
.home-composite-rich>*:first-child{margin-top:0}
.home-composite-rich>*:last-child{margin-bottom:0}
.home-composite-rich img{max-width:100%;height:auto}
.home-composite-rich table{max-width:100%;display:block;overflow-x:auto}
.home-composite-link-button{
display:inline-flex;
align-items:center;
gap:7px;
margin-top:13px;
padding:9px 13px;
border-radius:9px;
background:#2f6b47;
color:#fff;
font-size:.78rem;
font-weight:800;
text-decoration:none;
}
.home-composite-link-button:hover{background:#24583a}
.home-composite-empty{display:grid;place-items:center;min-height:120px;padding:18px;color:#596f61;text-align:center;font-size:max(12px,.82rem);line-height:1.5}
@media(max-width:980px){
.home-composite-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
.home-composite-grid{grid-template-columns:1fr;gap:12px}
.home-composite-card{border-radius:13px}
.home-composite-card-head{min-height:52px;padding:13px 14px 11px}
.home-composite-card-body{padding:9px 14px 14px}
}
/* =========================================================
v1.7.9.21 홈페이지 메인 블록 세로 간격 압축
- 첫 화면의 블록 사이 빈 공간을 최소화
- 블록 내부 콘텐츠·카드 높이는 유지하여 가독성 보존
========================================================= */
:root{
--home-section-space:18px;
--home-section-space-mobile:13px;
}
.home-block-frame{
margin:0;
padding:0;
}
.home-block-frame>.section{
padding-top:var(--home-section-space);
padding-bottom:var(--home-section-space);
}
.home-block-frame>.hero{
padding-top:30px;
padding-bottom:26px;
}
.home-block-frame>.home-text-content-only{
padding-top:8px;
padding-bottom:8px;
}
.home-block-frame>.welfare-home-contact{
padding-top:18px;
padding-bottom:18px;
}
.home-block-frame>.adaptive-module-strip{
margin-top:-10px;
margin-bottom:0;
}
.home-block-frame .section-title-row,
.home-block-frame .welfare-home-section-head,
.home-block-frame .home-feature-head{
margin-bottom:10px;
}
.home-block-frame .home-composite-section-head{
gap:5px;
margin-bottom:10px;
}
.home-block-frame .welfare-home-section-head h2{
margin:2px 0 4px;
}
.home-block-frame .welfare-home-section-head p,
.home-block-frame .welfare-home-section-rich,
.home-block-frame .home-composite-intro{
line-height:1.55;
}
.home-block-frame .welfare-home-section-rich{
margin-top:3px;
}
.home-block-frame .welfare-home-guide-copy h2,
.home-block-frame .welfare-home-support-grid h2,
.home-block-frame .welfare-home-contact h2{
margin-top:2px;
margin-bottom:6px;
}
.home-block-frame .welfare-home-guide-copy p,
.home-block-frame .welfare-home-guide-body{
margin-bottom:10px;
}
.home-block-frame .welfare-home-support-tags{
margin-top:10px;
margin-bottom:10px;
}
.home-block-frame .home-album-section .album-board-grid{
margin-top:4px;
}
.home-block-frame .home-feature-head p{
margin-top:4px;
}
@media(max-width:680px){
.home-block-frame>.section{
padding-top:var(--home-section-space-mobile);
padding-bottom:var(--home-section-space-mobile);
}
.home-block-frame>.hero{
padding-top:24px;
padding-bottom:20px;
}
.home-block-frame>.home-text-content-only{
padding-top:6px;
padding-bottom:6px;
}
.home-block-frame>.welfare-home-contact{
padding-top:14px;
padding-bottom:14px;
}
.home-block-frame .section-title-row,
.home-block-frame .welfare-home-section-head,
.home-block-frame .home-feature-head,
.home-block-frame .home-composite-section-head{
margin-bottom:8px;
}
}
/* =========================================================
v1.7.9.26 첫 화면 본문/소개 이미지 가로폭 일치
- 일반 페이지 폭에 머물던 단독 이미지를 메인 블록 가로폭에 맞춤
- 카드·표·복합 콘텐츠 내부 이미지는 기존 크기 유지
========================================================= */
.home-text-content-only .home-block-rich > img:not([width]),
.home-text-content-only .home-block-rich > p > img:only-child:not([width]),
.home-text-content-only .home-block-rich > div > img:only-child:not([width]),
.home-text-content-only .home-block-rich > figure > img:not([width]){
display:block;
width:100%;
max-width:100%;
height:auto;
}
/* Accessible title for the image-based home hero. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Standalone homepage images: keep intrinsic ratio even with editor width attributes. */
.home-text-content-only.home-single-image .home-block-rich,
.home-text-content-only.home-single-image .home-block-rich :is(p,div,figure,a,span){
display:block;
width:auto !important;
max-width:none !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
}
.home-text-content-only.home-single-image .home-block-rich img{
display:block;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:none !important;
object-fit:contain;
margin:0 auto;
}
.home-text-content-only.home-image-width-screen > .wrap{
width:100%;
max-width:none;
padding:0;
margin-inline:0;
}
/* Image poster popups; legacy notice cards retain their original stack. */
.popup-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
.cms-poster-deck{position:fixed;z-index:1001;top:110px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;pointer-events:none}
.cms-poster-items{display:flex;align-items:flex-start;justify-content:center;gap:16px;max-width:100%}
.cms-popup.cms-popup-poster{position:relative;flex:0 1 var(--poster-width,450px);width:var(--poster-width,450px);min-width:0;max-width:100%;max-height:calc(100vh - 180px);max-height:calc(100dvh - 180px);padding:0;border-radius:0;border:1px solid #d1d5db;display:flex;flex-direction:column;pointer-events:auto;overflow:hidden}
.cms-poster-image{min-height:0;overflow:auto;overscroll-behavior:contain;background:#fff}
.cms-poster-image img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain}
.cms-poster-tools{display:flex;gap:18px;padding:7px 12px;background:#fff;flex-shrink:0;font-size:.875rem}
.cms-poster-tools a{color:#164c81;text-decoration:underline}
.cms-poster-footer{display:flex;justify-content:space-between;background:#202020;flex-shrink:0}
.cms-poster-footer button{border:0;border-radius:0;background:#202020;color:#fff;padding:10px 12px;min-height:44px;font:inherit;cursor:pointer}
.cms-poster-footer button:last-child{background:#404040}
.cms-poster-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px;background:#fff;border:1px solid #cbd5e1;padding:4px 8px;pointer-events:auto}
.cms-poster-pager button{min-height:44px;padding:5px 16px;background:#164c81;color:#fff;border:0;cursor:pointer}
.cms-poster-deck button:focus-visible,.cms-poster-deck a:focus-visible{outline:3px solid #f59e0b;outline-offset:-3px}
.cms-popup-poster[hidden],.cms-poster-deck[hidden],.cms-poster-pager[hidden]{display:none!important}
@media(max-width:700px){
.cms-poster-deck{top:80px;max-width:calc(100% - 24px);width:calc(100% - 24px)}
.cms-poster-items{gap:0}
.cms-popup.cms-popup-poster{width:100%;flex-basis:100%;max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px)}
}
@media(max-height:500px){
.cms-poster-deck{top:12px}
.cms-popup.cms-popup-poster{max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px)}
}
/* Homepage noticeboard: contain every image within a stable, responsive frame. */
.home-notice{min-width:0}
.notice-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.notice-heading h2{margin:0;font-size:1.55rem;line-height:1.4}
.notice-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.notice-controls [data-notice-count]{padding:8px 14px;border-radius:24px;background:#e5efff;color:#164c81;font-variant-numeric:tabular-nums}
.notice-controls button{min-width:44px;min-height:44px;padding:6px 12px;background:#fff;color:#164c81;border:1px solid #b9c9dc;border-radius:8px;font:inherit;cursor:pointer}
.notice-controls [data-notice-prev],.notice-controls [data-notice-next]{font-size:1.6rem;line-height:1}
.notice-slide{margin:0;min-width:0}
.notice-slide[hidden],.notice-image-stage [hidden]{display:none!important}
.notice-image-stage{aspect-ratio:var(--notice-ratio,16 / 9);background:#f3f6fa;border-radius:12px;overflow:hidden;position:relative;touch-action:pan-y}
.notice-image-stage>a{display:block;width:100%;height:100%}
.notice-image-stage img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain}
.notice-image-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#475569;padding:20px}
.notice-slide figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:10px;color:#334155;overflow-wrap:anywhere}
.notice-slide figcaption>a{flex-shrink:0;text-decoration:underline;color:#164c81;min-height:44px;display:inline-flex;align-items:center}
.home-notice button:focus-visible,.home-notice a:focus-visible{outline:3px solid #1268bd;outline-offset:3px}
@media(max-width:480px){.notice-heading{gap:8px;margin-bottom:12px}.notice-heading h2{font-size:1.3rem}.notice-controls{gap:4px}.notice-controls button{padding:5px 9px}.notice-controls [data-notice-count]{padding:8px 10px}}
/* Board category filters preserve image-free, wrapping mobile navigation. */
.board-category-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.board-category-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid #b9c9c5;border-radius:24px;color:#23463b;background:#fff;max-width:100%;overflow-wrap:anywhere}
.board-category-tabs a[aria-current="page"]{background:#195b45;color:#fff;border-color:#195b45;font-weight:700}
.board-category-tabs a:focus-visible{outline:3px solid #145dcc;outline-offset:3px}
.board-category-badge{display:inline-block;background:#e6f2ed;color:#174a38;border-radius:6px;padding:2px 7px;font-size:.85em;overflow-wrap:anywhere;max-width:100%}
/* Match inner-page outer spacing to the compact homepage image section.
Home blocks have their own frame and keep their existing section spacing. */
#mainContent > .section{padding-top:8px;padding-bottom:8px}
#mainContent > .section > .wrap > :first-child{margin-top:0}
#mainContent > .section > .wrap > :last-child{margin-bottom:0}
#mainContent > .section > .page-content > .page-layout-runtime{padding-bottom:0}
#mainContent > .section .page-layout-runtime > .page-layout-unit:first-child{margin-top:0}
#mainContent > .section .page-layout-runtime > .page-layout-unit:first-child > :first-child{margin-top:0}
.submenu-page-layout > .sidebar-submenu{margin-top:8px}
@media(max-width:760px){
#mainContent > .section{padding-top:6px;padding-bottom:6px}
.submenu-page-layout > .sidebar-submenu{margin-top:6px}
}
/* Inner-page edge cleanup: retain content, remove empty outer space. */
#mainContent > .section .page-layout-runtime > .page-layout-unit:first-child > .page-hero-solid{
min-height:0;padding:20px 24px;margin-bottom:0;
}
#mainContent > .section .page-layout-runtime > .page-layout-unit:last-child > :last-child{margin-bottom:0}
#mainContent > .section .welfare-prose > :last-child,
#mainContent > .section .wysiwyg-body > :last-child{margin-bottom:0}
#mainContent > .section .welfare-prose > p > img:only-child,
#mainContent > .section .wysiwyg-body > p > img:only-child{vertical-align:top}
@media(max-width:760px){
#mainContent > .section .page-layout-runtime > .page-layout-unit:first-child > .page-hero-solid{padding:16px 18px}
}
#mainContent > .section .page-layout-unit:first-child .welfare-prose > :first-child,
#mainContent > .section .page-layout-unit:first-child .wysiwyg-body > :first-child{margin-top:0}
#mainContent > .section .welfare-prose p:last-child,
#mainContent > .section .wysiwyg-body p:last-child{margin-bottom:0}
#mainContent > .section .welfare-prose p > img:only-child,
#mainContent > .section .wysiwyg-body p > img:only-child{vertical-align:top}
/* 게시판 목록: 제목 옆 글쓰기 / 목록과 페이지 이동 아래 검색 */
.board-list-page-head{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:12px;margin-bottom:12px}
.board-list-page-head>div{min-width:0;flex:1}
.board-list-page-head h1{overflow-wrap:anywhere;margin:0;min-height:44px;display:flex;align-items:center}
.board-write-trigger{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1px solid var(--accent,#195b45);border-radius:9px;background:var(--accent,#195b45);color:#fff;font:inherit;font-weight:700;cursor:pointer;margin-top:0}
.board-wrap .board-search-bottom{display:block;width:100%;max-width:540px;margin:20px auto 0;padding:0;border:0;background:transparent}
.board-search-bottom .board-search-controls{display:flex;flex-direction:row;align-items:stretch;gap:8px}
.board-search-bottom .board-search-controls input{width:0;flex:1;min-width:0;min-height:44px;margin:0}
.board-search-bottom .board-search-controls button{flex:none;width:auto;min-height:44px;border-color:#cbd5e1!important;background:#fff!important;color:#334155!important;margin:0}
.board-search-state{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:0 0 12px;color:#475569;font-size:.9rem;overflow-wrap:anywhere}
.board-search-state a{display:inline-flex;align-items:center;min-height:44px;padding:4px 12px;border:1px solid #cbd5e1;border-radius:8px}
.board-wrap .board-category-tabs a,.board-wrap .board-category-tabs a:hover,.board-wrap .board-row,.board-wrap .board-row:hover,.board-wrap .board-title,.board-wrap .board-title:hover,.board-wrap .board-back-link,.board-wrap .board-back-link:hover,.board-wrap .board-action-nav a,.board-wrap .board-row-edit,.board-search-state a{text-decoration:none!important}
.board-wrap .board-category-tabs a:hover{background:#edf5f1;color:#174a38}
.board-wrap .board-category-tabs a[aria-current="page"]{background:var(--accent,#195b45);border-color:var(--accent,#195b45);color:#fff}
.board-wrap .board-row:hover{background:#f1f7f4}
.board-wrap .board-row:hover .board-title{color:#195b45}
.board-wrap .board-back-link{padding:8px 14px;border:1px solid #cbd5e1;border-radius:8px}
.board-wrap a:focus-visible,.board-write-trigger:focus-visible,.board-search-bottom button:focus-visible{outline:3px solid #145dcc;outline-offset:3px}
@media(max-width:760px){
.board-list-page-head{flex-wrap:wrap;gap:10px}
.board-list-page-head>div{flex:1 1 150px}
.board-write-trigger{margin-top:0;margin-left:auto}
.board-category-tabs{gap:6px;margin:14px 0}
.board-category-tabs a{padding:7px 12px}
.board-wrap .board-search-bottom{margin-top:16px}
}