/* 큰바위얼굴의꿈 공통 디자인 — 목포 바다에서 가져온 두 색 인쇄물 */
:root {
  --paper: #f6f9f5;
  --tone: #e8efea;
  --tone-2: #d9e6e2;
  --ink: #1a2332;
  --soft: #4a5666;
  --accent: #1f6f70;
  --accent-dark: #17595a;
  --sea: #a8dadc;
  --on-dark: #f1faee;
  --on-dark-soft: #c3d3d4;
  --danger: #a4262c;
  --axis: 42%;
  --margin: clamp(20px, 3.4vw, 48px);
  --gap: clamp(72px, 9vw, 128px);
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --size-1: clamp(26px, 1.3rem + .9vw, 34px);
  --size-2: clamp(20px, 1.1rem + .4vw, 24px);
  --size-3: 18px;
  --size-4: 16px;
  --size-5: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--size-4); line-height: 1.7;
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; color: inherit; }
h1 { font-size: var(--size-1); line-height: 1.25; letter-spacing: -.03em; }
h2 { font-size: var(--size-2); }
h3 { font-size: var(--size-3); }
h4, h5, h6 { font-size: var(--size-4); }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding-left: 1.2em; }
li + li { margin-top: 4px; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .2s; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--on-dark); }
.container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); }

/* 머리글 */
header { position: sticky; top: 0; z-index: 1000; background: var(--paper); box-shadow: none !important; } /* taste-skill-ignore: 예전 스크립트가 넣는 그림자를 끈다 */
header nav.container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.logo { font-size: var(--size-3); font-weight: 700; letter-spacing: -.02em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 4px 24px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.nav-links li { margin: 0; }
.nav-links a { display: block; padding: 8px 0; text-decoration: none; }
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: 100%; left: -16px; min-width: 164px; padding: 8px 0; background: var(--ink); color: var(--on-dark);
  display: none;
}
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a { padding: 6px 16px; }
.dropdown-menu a:hover { color: var(--sea); }
.nav-links .login-btn, .nav-links .signup-btn, .nav-links .admin-btn, .logout-btn {
  padding: 6px 14px; border: 0; border-radius: 0; background: var(--tone); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer;
  min-height: 0; line-height: 1.5; transition: background .2s, color .2s;
}
.nav-links .login-btn { background: var(--accent); color: #fff; }
.nav-links .login-btn:hover { background: var(--accent-dark); color: #fff; }
.nav-links .signup-btn:hover, .logout-btn:hover { background: var(--tone-2); color: var(--ink); }
.nav-links .admin-btn { background: var(--ink); color: var(--on-dark); }
.user-info { font-size: 14px; }
.user-info span { color: var(--accent) !important; }

.mobile-menu-btn { display: none; padding: 8px 0; border: 0; background: none; font-size: 15px; font-weight: 500; cursor: pointer; }
.mobile-menu-overlay { display: none; position: fixed; inset: 0; z-index: 1999; background: rgba(26, 35, 50, .5); }
.mobile-menu-overlay.active { display: block; }
.mobile-menu {
  position: fixed; top: 0; right: 0; z-index: 2000; width: min(320px, 86vw); height: 100dvh; overflow-y: auto;
  background: var(--ink); color: var(--on-dark); display: none;
}
.mobile-menu.active { display: block; animation: slide-in .25s ease; }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
.mobile-menu .logo { color: var(--on-dark); }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; }
.mobile-menu-close { padding: 8px 0; border: 0; background: none; color: inherit; font-size: 15px; cursor: pointer; }
.mobile-menu-items { padding: 0 24px 40px; }
.mobile-menu-items a { display: block; padding: 11px 0; text-decoration: none; font-size: 16px; }
.mobile-menu-items a:hover { color: var(--sea); }
.mobile-menu-toggle::after { content: " +"; color: var(--sea); }
.mobile-menu-toggle.active::after { content: " −"; }
.mobile-submenu { display: none; padding-left: 16px; color: var(--on-dark-soft); }
.mobile-submenu.active { display: block; }

/* 하위 페이지 머리: 왼쪽 위치, 축 위에 제목 */
.page-header { background: var(--ink); color: var(--on-dark); padding-block: clamp(40px, 5vw, 72px); }
.page-header .page-title { display: grid; grid-template-columns: var(--axis) 1fr; align-items: end; padding: 0; }
.page-header .page-title h1 { grid-column: 2; grid-row: 1; }
.page-header .breadcrumb { grid-column: 1; grid-row: 1; padding-right: 24px; color: var(--on-dark-soft); font-size: var(--size-5); }
.page-header .breadcrumb a { color: inherit; }
.page-header .breadcrumb a:hover, .page-header a:hover { color: var(--sea); }
.page-header > .container > h1, .page-header > .container > .page-title:only-child:not(:has(h1)) { margin-left: var(--axis); font-size: var(--size-1); line-height: 1.25; }
.page-header > .container > .page-subtitle, .page-header > .container > .breadcrumb { margin-left: var(--axis); }
.page-subtitle { margin-top: 8px; color: var(--on-dark-soft); }
.page-title { font-weight: 600; }
.page-header h1, .page-header .page-title { color: var(--on-dark); }

/* 본문 */
.content-section, .main-content { padding-block: clamp(48px, 6vw, 88px) var(--gap); }
.main-content { padding-top: 0; }
.main-content .page-header, .container > .page-header { margin-inline: calc(50% - 50vw); margin-bottom: clamp(32px, 4vw, 56px); padding-inline: max(var(--margin), calc(50vw - 720px + var(--margin))); }
.page-header > h1, .page-header > .page-title, .page-header > .page-subtitle { margin-left: var(--axis); }
.page-header > .page-title { display: block; font-size: var(--size-1); line-height: 1.25; letter-spacing: -.03em; }
.content-section p, .row-body p, .policy p, .policy li { max-width: 46em; }
.content-section > .container > * + *, .content-section [class$="-container"] > * + * { margin-top: clamp(48px, 6vw, 80px); }

[class$="-intro"] { display: grid; grid-template-columns: var(--axis) 1fr; column-gap: 0; }
[class$="-intro"] > * { grid-column: 2; }
[class$="-intro"] > h2 { max-width: none; }
[class$="-intro"] > p { margin-top: 12px; }

/* 소제목은 왼쪽 열 없이 축 위에 */
.section-title, .achievements-title, .partners-title, .statistics-title, .stats-title, .partnership-title, .values-title, .application-title,
.highlights-title, .archive-title, .benefits-title, .guide-title, .faq-title, .inquiry-title, .location-title, .upload-title, .newsletter-title,
.related-news-title, .contact-title, .status-title { margin-bottom: 24px; font-size: var(--size-2); font-weight: 600; letter-spacing: -.02em; }

/* 칸: 그림자·선 없이 색 단계로만, 틈 없이 붙인 판형 */
[class$="-grid"], .purpose-cards, .business-areas, .service-categories, .departments, .archive-years {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 2px;
}
.featured-article, .area-card, .purpose-card, .dept-card, .program-card, .project-card, .news-card, .gallery-item, .highlight-item, .benefit-item, .step-card, .info-card,
.stat-card, .stat-item, .status-item, .achievement-item, .partner-category, .service-item, .category, .value-item, .vision-item, .archive-item,
.process-step, .related-item, .stats-card, .activity-item, .contact-item, .faq-item, .board, .ceo, .assembly, .board-item {
  position: relative; padding: clamp(20px, 2.4vw, 32px); background: var(--tone); border: 0; border-radius: 0; text-align: left;
}
[class*="-card"]::before, [class*="-card"]::after, .board::before, .ceo::before, .departments::before, .page-header::before, .page-header::after,
.timeline::before, .greeting-title::after, .hero::before { content: none !important; }
.area-card:hover, .news-card:hover, .gallery-item:hover, .program-card:hover, .project-card:hover { background: var(--tone-2); }
.news-card, .gallery-item, .highlight-item { cursor: pointer; transition: background .2s; }
[class$="-card"] h3, [class$="-title"] { font-weight: 600; }

/* 이모지 칸과 임시 이미지 칸은 비워 둔다 */
.icon, [class$="-icon"], .activity-number, .purpose-number, .quick-menu { display: none !important; }
.news-image, .program-image, .project-image, .featured-image, .highlight-image, .image-overlay,
[data-page="gallery"] .gallery-image { position: static; height: auto; min-height: 0; background: none !important; font-size: var(--size-5); color: var(--soft); }
.image-overlay { display: none; }
.news-date, .featured-badge, .project-status, .program-badge, .project-category, .gallery-category, .news-category, .notice-badge, .news-badge, .gallery-badge, .related-badge {
  position: static; display: inline-block; padding: 0; background: none !important; color: var(--accent) !important; border-radius: 0; font-size: var(--size-5); font-weight: 500;
}
.news-content, .program-content, .project-content, .featured-content, .gallery-content, .highlight-content, .area-content { padding: 0; }
[class$="-subtitle"] { color: var(--soft); font-size: var(--size-5); }
.page-header [class$="-subtitle"] { color: var(--on-dark-soft); font-size: var(--size-4); }
[class$="-description"], [class$="-excerpt"], [class$="-desc"] { margin-top: 8px; }
[class*="-meta"], .news-author, .news-views, .gallery-date, .gallery-views, .notice-date, .notice-author, .post-meta, .activity-meta, .activity-time { color: var(--soft); font-size: var(--size-5); }
.meta-item { display: inline-block; margin-right: 16px; }

/* 목록 */
.services-list, .program-details, .project-details, .service-details, .dept-tasks, .qualification-list, .process-list, .application-info ul, .upload-guidelines {
  margin-top: 8px; padding-left: 1.2em;
}
.services-list li, .program-details li, .project-details li, .service-details li, .dept-tasks li, .qualification-list li, .process-list li, .application-info li, .upload-guidelines li,
.partner-list li { position: static; padding: 0; background: none; border: 0; }
[class*="-list"] li::before, .upload-guidelines li::before, .application-info li::before { content: none !important; }
.process-list { list-style: decimal; }
.services-title { margin-top: 16px; font-weight: 600; }

/* 숫자 칸 */
:where([class$="-number"]) { font-size: var(--size-2); font-weight: 600; color: var(--accent); background: none; line-height: 1.3; width: auto; height: auto; border-radius: 0; display: block; -webkit-text-fill-color: currentColor; }
[class$="-label"]:not(.form-label):not(.priority-label):not(.checkbox-label) { font-weight: 600; }
.info-item, .info-row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); padding: 2px 0; background: none; }
.program-info { margin-top: 16px; }
.guide-steps, .application-process > div:not([class$="-title"]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 2px; }
.process-step, .step-card { min-width: 0; }
.programs-grid, .projects-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.write-container { padding-block: clamp(32px, 5vw, 64px); padding-inline: var(--margin); }
.write-container .header { margin-bottom: 28px; }

/* 색면 쪽: 사업 안에서 한 번씩 흐름을 끊는다 */
.partners, .partnership, .application-section, .inquiry-section, .newsletter, .upload-section, .statistics, .community-stats, .application-guide, .application-process {
  padding: clamp(32px, 4vw, 56px); background: var(--ink); color: var(--on-dark);
}
.partners a, .partnership a, .application-section a, .inquiry-section a, .application-guide a, .application-process a { color: var(--sea); }
.partners [class$="-category"], .partnership [class$="-category"], .application-section [class$="-item"], .application-process [class$="-item"], .application-process .process-step,
.statistics [class$="-item"], .community-stats .stat-card, .application-guide [class$="-item"], .application-section [class$="-card"] { background: #263348; color: var(--on-dark); }
.statistics [class$="-number"], .community-stats [class$="-number"], .application-process [class$="-number"] { color: var(--sea); }
.partners [class$="-desc"], .statistics [class$="-desc"], .community-stats [class$="-desc"], .application-section [class$="-subtitle"], .inquiry-section [class$="-subtitle"], .newsletter [class$="-subtitle"], .upload-section [class$="-subtitle"], .community-stats [class$="-label"] { color: var(--on-dark-soft); }

/* 인사말 */
.ceo-profile { display: grid; grid-template-columns: var(--axis) minmax(0, 1fr); }
.ceo-image { padding-right: 32px; }
.ceo-name { font-size: var(--size-2); font-weight: 600; }
.ceo-title { color: var(--soft); }
.greeting-content { margin-top: 0 !important; }
.greeting-title { margin-bottom: 24px; font-size: var(--size-2); }
.greeting-text + .greeting-text { margin-top: 14px; }
.signature { margin-top: 32px; }
.signature-name { font-weight: 600; }
.signature-date { color: var(--soft); font-size: var(--size-5); }

/* 연혁 */
.timeline { margin: 0; padding: 0; }
.timeline-item { display: grid; grid-template-columns: var(--axis) 1fr; padding-block: 14px; margin: 0; }
.timeline-year { position: static; order: -1; transform: none; padding: 0; background: none; color: var(--accent); font-size: var(--size-2); font-weight: 600; line-height: 1.3; }
.timeline-item > .timeline-content { grid-column: 2; padding: 0; background: none; border: 0; width: auto; margin: 0; text-align: left; }
.timeline-item::before, .timeline-item::after, .timeline-content::before, .timeline-content::after { content: none !important; }
.timeline-month { color: var(--soft); font-size: var(--size-5); background: none; padding: 0; }
.timeline-title { font-size: var(--size-3); font-weight: 500; }

/* 조직도 */
.org-chart { display: grid; gap: 2px; }
.org-chart > * { margin: 0; }
.assembly, .ceo { width: 100%; max-width: none; color: var(--ink); font-weight: 600; }
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 2px; padding: 0; background: none; }
.board-item { font-weight: 600; }
.org-chart + * { margin-top: 2px; }
.dept-name { font-size: var(--size-3); font-weight: 600; }
.dept-role { color: var(--soft); font-size: var(--size-5); }

/* 자원봉사 FAQ */
.faq-list { display: grid; gap: 2px; }
.faq-item { padding: 0; margin: 0; overflow: hidden; }
.faq-question { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; background: none; font-weight: 600; cursor: pointer; color: inherit; }
.faq-question:hover { background: var(--tone-2); }
.faq-answer { padding: 0 20px 18px; background: none; color: inherit; display: none; }
.faq-arrow { color: var(--accent); }

/* 표 */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 12px 12px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tone-2); font-weight: 400; }
th { color: var(--soft); font-weight: 600; background: none; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--tone); }

/* 게시 목록 */
.notice-list { background: none; border-radius: 0; }
.notice-header, .notice-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px 110px 70px; gap: 12px; align-items: center; padding: 12px 8px; }
.notice-header { background: var(--tone); font-weight: 600; font-size: 14px; color: var(--soft); }
.notice-item { margin-top: 2px; background: var(--paper); cursor: pointer; transition: background .15s; }
.notice-item:hover { background: var(--tone); }
.notice-title, .post-title { font-weight: 500; }
.post-title a { text-decoration: none; }
.board-controls, .search-box, .search-area { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 32px; }
.page-btn { min-width: 40px; padding: 8px 12px; border: 0; background: var(--tone); color: var(--ink); text-align: center; text-decoration: none; cursor: pointer; font-size: 14px; }
.page-btn:hover { background: var(--tone-2); color: var(--ink); }
.page-btn.active { background: var(--accent); color: #fff; }
.empty-state, .loading, .error-state { padding: 48px 16px; text-align: center; color: var(--soft); }
.empty-title, .error-title { font-weight: 600; color: var(--ink); }
.loading-spinner { width: 28px; height: 28px; margin: 0 auto 12px; border: 3px solid var(--tone-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 분류 버튼 */
.category-filter, .gallery-filter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; }
.category-btn, .filter-btn, .year-btn { text-decoration: none; padding: 8px 16px; border: 0; border-radius: 0; background: var(--tone); color: var(--ink); cursor: pointer; font-size: 14px; transition: background .2s; }
.category-btn:hover, .filter-btn:hover, .year-btn:hover { background: var(--tone-2); }
.category-btn.active, .filter-btn.active, .year-btn.active { background: var(--accent); color: #fff; }
.archive-years { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }

/* 상세 보기 */
.breadcrumb-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; color: var(--soft); font-size: var(--size-5); }
.breadcrumb-list li { margin: 0; }
.notice-content, .news-content.detail, .post-content, .content-body, .description-body { max-width: 44em; }
.notice-header.detail, .news-header, .gallery-header, .post-header { padding-bottom: 20px; margin-bottom: 24px; }
.news-title, .gallery-title { font-size: var(--size-3); }
[data-page$="-detail"] .notice-title, [data-page$="-detail"] .news-title, [data-page$="-detail"] .gallery-title, [data-page$="-detail"] .post-title { font-size: var(--size-1); font-weight: 600; line-height: 1.3; letter-spacing: -.03em; }
[data-page="notice-detail"] .notice-header { display: block; padding: 0 0 20px; background: none; color: inherit; font-size: inherit; }
.notice-navigation, .news-navigation, .gallery-navigation, .nav-buttons, .action-buttons, .post-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 40px; }
.gallery-image-container { background: var(--tone); padding: 16px; text-align: center; }
[data-page="gallery-detail"] .gallery-image { max-height: 70vh; object-fit: contain; cursor: pointer; }
.image-placeholder { padding: 48px; color: var(--soft); }
.lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: rgba(26, 35, 50, .94); cursor: pointer; }
.lightbox-image { max-width: 95%; max-height: 95%; object-fit: contain; }
.lightbox-close { position: absolute; top: 24px; right: 24px; color: var(--on-dark); font-size: 16px; cursor: pointer; }
.modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: rgba(26, 35, 50, .7); }
.modal-content { width: 90%; max-width: 760px; max-height: 90vh; overflow: hidden; background: var(--paper); }
.modal-body { padding: 28px; max-height: 60vh; overflow-y: auto; }
.file-item, .file-list > * { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--tone); }
.file-list { display: grid; gap: 2px; }
.file-size { color: var(--soft); font-size: var(--size-5); }
.comment-item { padding: 16px; margin-top: 2px; background: var(--tone); }
.comment-header { display: flex; flex-wrap: wrap; gap: 12px; color: var(--soft); font-size: var(--size-5); }
.comment-author { font-weight: 600; color: var(--ink); }
.comment-form { display: grid; gap: 8px; margin-top: 20px; }
.comments-section, .post-files { margin-top: 48px; }
.comments-header, .files-title { margin-bottom: 12px; font-weight: 600; }

/* 버튼 */
.btn, .btn-primary, .cta-button, .submit-btn, .apply-btn, .upload-btn, .newsletter-btn, .search-btn, .download-btn, .comment-submit, .read-more, .list-btn, .nav-btn, .login-btn, .signup-btn {
  display: inline-block; min-height: 44px; padding: 10px 22px; border: 0; border-radius: 0; background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 500; line-height: 24px; text-align: center; text-decoration: none; cursor: pointer;
  transition: background .2s, transform .15s;
}
.btn:hover, .btn-primary:hover, .cta-button:hover, .submit-btn:hover, .apply-btn:hover, .upload-btn:hover, .newsletter-btn:hover, .search-btn:hover, .download-btn:hover, .comment-submit:hover, .list-btn:hover, .login-btn:hover, .signup-btn:hover { background: var(--accent-dark); color: #fff; }
.btn:active, .cta-button:active, .submit-btn:active, .nav-btn:active { transform: translateY(1px); }
.btn-secondary, .btn-outline, .nav-btn, .read-more { background: var(--tone); color: var(--ink); border: 0; }
.btn-secondary:hover, .btn-outline:hover, .nav-btn:hover, .read-more:hover { background: var(--tone-2); color: var(--ink); }
.nav-btn.disabled { opacity: .45; pointer-events: none; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #861e23; color: #fff; }
.read-more { min-height: 0; padding: 6px 12px; font-size: var(--size-5); line-height: 22px; }

/* 글 본문과 사진 */
.content-body, .description-body, .post-content { white-space: pre-wrap; }
.post-image { display: block; width: 100%; max-height: 520px; margin-bottom: 24px; object-fit: contain; background: var(--tone); }
.gallery-image img, .news-image img, .featured-image img { display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 12px; object-fit: cover; }
.btn[disabled] { opacity: .55; cursor: wait; }

/* 문의 양식 */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inquiry-form .checkbox-group label { margin: 0; font-size: 14px; font-weight: 400; }
.form-status { min-height: 24px; margin: 0 0 12px; font-weight: 600; }

/* 입력 양식 */
.form-group { margin-bottom: 18px; }
.form-label, .form-group label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.required { color: var(--danger); }
.form-label.required { color: inherit; }
.form-input, .form-select, .form-textarea, .search-input, .newsletter-input, .comment-textarea, .form-group input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .form-group select, .form-group textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #aebcc0; border-radius: 0; background: #fff; color: var(--ink); font-size: 16px; line-height: 1.5;
}
.search-input { width: auto; flex: 1 1 220px; }
.form-input:focus, .form-select:focus, .form-textarea:focus, .search-input:focus, .comment-textarea:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.form-input.error { border-color: var(--danger); }
.form-help, .password-hint, .upload-help { margin-top: 4px; color: var(--soft); font-size: var(--size-5); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.form-actions, .button-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.form-container, .write-container, .detail-container { max-width: 860px; margin-inline: auto; }
.inquiry-section .inquiry-form { color: var(--on-dark); }
.inquiry-section .form-group input, .inquiry-section .form-group textarea, .inquiry-section .form-group select { color: var(--ink); }
.file-input, .priority-radio { display: none; }
.file-upload-area, .image-upload-area { padding: 32px; background: var(--tone); text-align: center; cursor: pointer; transition: background .2s; }
.file-upload-area:hover, .image-upload-area:hover, .dragover { background: var(--tone-2); }
.upload-subtext { color: var(--soft); font-size: var(--size-5); }
.alert, .error-message, .success-message { display: none; padding: 10px 14px; margin-bottom: 16px; font-size: var(--size-5); }
.alert-error, .error-message { background: #f6e3e3; color: #7c1d21; }
.alert-success, .success-message { background: var(--tone-2); color: var(--accent-dark); }
.priority-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 4px; }
.priority-label { display: block; padding: 12px; background: var(--tone); text-align: center; cursor: pointer; font-weight: 500; }
.priority-radio:checked + .priority-label { background: var(--accent); color: #fff; }
.checkbox-group { display: flex; gap: 8px; align-items: flex-start; }
.password-strength { height: 6px; margin-top: 6px; background: var(--tone); }
.password-strength-bar { height: 100%; width: 0; transition: width .2s; }
.strength-weak { width: 33%; background: var(--danger); }
.strength-medium { width: 66%; background: #b5791c; }
.strength-strong { width: 100%; background: var(--accent); }
.image-preview { margin-top: 12px; }

/* 로그인·회원가입: 왼쪽 색면, 축 위에 양식 */
[data-page="login"], [data-page="signup"] { display: grid; grid-template-columns: var(--axis) 1fr; min-height: 100dvh; }
.auth-side { grid-column: 1; grid-row: 1; background: var(--ink); }
.auth-side .masthead-face { position: sticky; top: max(0px, calc(100dvh - 500px)); width: min(90%, 460px); margin: 0; }
.login-container, .signup-container { grid-column: 2; align-self: center; width: 100%; padding: 48px var(--margin); background: none; border-radius: 0; text-align: left; }
.login-container .logo, .signup-container .logo { display: block; margin-bottom: 4px; font-size: var(--size-1); background: none; -webkit-text-fill-color: currentColor; }
.subtitle { margin-bottom: 28px; color: var(--soft); }
.home-link, .login-link { margin-top: 20px; font-size: 15px; }
.login-form .login-btn, .signup-form .signup-btn { width: 100%; }

/* 문의 */
.address-info, .location-content { display: grid; gap: 16px; }
.contact-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 2px; }
.inquiry-section { display: grid; grid-template-columns: var(--axis) minmax(0, 1fr); }
.inquiry-section > .inquiry-title, .inquiry-section > .inquiry-subtitle { grid-column: 1; padding-right: 32px; }
.inquiry-section > .inquiry-form { grid-column: 2; grid-row: 1 / span 3; max-width: none; }
.map-container { max-width: none; }
.map-image { display: block; width: 100%; height: 420px; object-fit: cover; }
.info-details strong { display: block; }

/* 현황 페이지 */
.chart-placeholder, .chart-container { padding: 32px; background: var(--tone); color: var(--soft); }
.detail-section + .detail-section { margin-top: 48px; }

/* 함께하기 · 개인정보 처리방침 */
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 3000; padding: 8px 14px; background: var(--accent); color: #fff; }
.skip-link:focus { top: 8px; }
.row { display: grid; grid-template-columns: var(--axis) 1fr; padding-block: clamp(28px, 3.4vw, 48px); }
.row:first-of-type { padding-top: clamp(48px, 6vw, 88px); }
.row:last-of-type { padding-bottom: var(--gap); }
.row-body { max-width: none; }
.row-body > p + p { margin-top: 12px; }
.steps { margin-top: 12px; }
.more { margin-top: 20px; }
.more a { font-weight: 600; color: var(--accent); }
.list div { display: grid; grid-template-columns: 130px minmax(0, 1fr); padding-block: 5px; }
.list dt { font-weight: 600; }
.policy-wrap { display: grid; grid-template-columns: var(--axis) minmax(0, 1fr); padding-block: clamp(48px, 6vw, 88px) var(--gap); }
.policy-toc { position: sticky; top: 92px; align-self: start; padding-right: 32px; font-size: var(--size-5); line-height: 1.5; }
.policy-toc ol { margin: 0; padding: 0; list-style: none; }
.policy-toc li { margin: 0; padding: 4px 0; }
.policy-toc a { color: var(--soft); text-decoration: none; }
.policy-toc a:hover { color: var(--accent); }
.policy { max-width: none; }
.policy p { margin-bottom: 10px; }
.policy h2 { margin: 36px 0 10px; font-size: var(--size-3); scroll-margin-top: 92px; }
.policy ol, .policy ul { margin: 8px 0 12px; }
.policy-contact div { display: grid; grid-template-columns: 80px minmax(0, 1fr); }
.policy-contact dt { color: var(--soft); }

/* 첫 화면: 이름에서 온 돌 얼굴, 오른쪽 축에 소개 */
.masthead { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); }
.masthead .container { display: grid; grid-template-columns: var(--axis) 1fr; align-items: end; min-height: min(620px, calc(100svh - 68px)); }
.masthead-face { display: block; align-self: end; width: min(100%, 480px); height: auto; margin: 32px 0 0 calc(-1 * var(--margin)); }
.masthead-copy { align-self: end; padding-block: 48px clamp(40px, 6vw, 80px); }
.masthead h1 { font-size: clamp(28px, 1.4rem + 1.2vw, 40px); }
.masthead h1 span { display: block; }
.masthead-copy p { max-width: none; margin-top: 18px; font-size: var(--size-3); line-height: 1.6; color: var(--on-dark-soft); }
.masthead-copy .btn-sea { margin-top: 28px; }
.btn-sea { display: inline-block; min-height: 44px; padding: 10px 22px; background: var(--sea); color: var(--ink); font-size: 15px; font-weight: 600; line-height: 24px; text-decoration: none; transition: background .2s, transform .15s; }
.btn-sea:hover { background: var(--on-dark); color: var(--ink); }
.btn-sea:active { transform: translateY(1px); }

.spread { padding-block: var(--gap) 0; }
.spread .container { display: grid; grid-template-columns: var(--axis) 1fr; }
.spread-head { padding-right: 32px; }
.spread-note { margin-top: 8px; color: var(--soft); font-size: var(--size-5); }
.statement { max-width: none; font-size: var(--size-2); font-weight: 500; line-height: 1.5; letter-spacing: -.02em; }
.value-row + .value-row { margin-top: 28px; }
.value-row p { margin-top: 4px; }
.band { margin-top: var(--gap); padding-block: clamp(56px, 7vw, 96px); background: var(--tone-2); }
.band .container { display: grid; grid-template-columns: var(--axis) 1fr; }
.work-list { margin: 0; padding: 0; list-style: none; }
.work-list li { margin: 0; }
.work-list a { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) auto; gap: 8px 20px; align-items: baseline; padding-block: 14px; text-decoration: none; transition: color .2s, transform .2s; }
.work-list a:hover { color: var(--accent-dark); transform: translateX(4px); }
.work-list h3 { font-size: var(--size-3); }
.work-list .go { color: var(--accent-dark); font-weight: 600; }

/* 어떤 조합원인지 고르면 하는 일이 바뀐다 */
.chooser-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.chooser-buttons button { min-height: 44px; padding: 8px 16px; border: 0; background: var(--tone); cursor: pointer; font-size: 15px; font-weight: 500; transition: background .2s; }
.chooser-buttons button:hover { background: var(--tone-2); }
.chooser-buttons button[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }
.chooser-buttons { display: none; }
.js-ready .chooser-buttons { display: flex; }
.chooser-panel { padding: clamp(20px, 2.6vw, 32px); background: var(--tone); }
.chooser-panel + .chooser-panel { margin-top: 2px; }
.js-ready .chooser-panel[hidden] { display: none; }
.chooser-panel h3 { font-size: var(--size-3); }
.chooser-panel p { margin-top: 4px; }
.chooser-panel a { display: inline-block; margin-top: 12px; color: var(--accent-dark); font-weight: 600; }

.close { margin-top: var(--gap); padding-block: clamp(56px, 7vw, 96px); background: var(--accent-dark); color: #fff; }
.close .container { display: grid; grid-template-columns: var(--axis) 1fr; }
.close h2 { padding-right: 32px; }
.close dl div { display: grid; grid-template-columns: 70px minmax(0, 1fr); padding-block: 4px; }
.close dt { color: var(--sea); }
.close a:hover { color: var(--sea); }
.close .lead { max-width: none; margin-bottom: 20px; font-size: var(--size-3); }

/* 하단 */
.site-foot { margin-top: 0; padding-block: clamp(48px, 5vw, 72px) 32px; background: var(--ink); color: var(--on-dark-soft); font-size: 15px; }
.site-foot .container { display: grid; grid-template-columns: var(--axis) 1fr; gap: 32px 0; }
.site-foot-name { font-size: var(--size-3); font-weight: 600; color: var(--on-dark); }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--sea); text-decoration: underline; }
.site-foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.site-foot-cols h2 { margin-bottom: 8px; font-size: 15px; color: var(--on-dark); }
.site-foot-cols ul { margin: 0; padding: 0; list-style: none; }
.site-foot-cols li { margin: 0; padding-block: 2px; }
.site-foot-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--size-5); }
[data-page="index"] .close + .site-foot { margin-top: 0; }

/* 등장 효과: 스크립트가 켜졌을 때만 숨기므로 실패해도 내용이 보인다 */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--delay, 0ms); }
  [data-reveal="in"] { opacity: 1; transform: none; }
  .masthead h1 span { overflow: hidden; }
  .masthead h1 span > span { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .masthead h1 span:nth-child(2) > span { animation-delay: .11s; }
  .masthead-copy p, .masthead-copy .btn-sea { animation: fade-up .7s ease .45s both; }
  @keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 태블릿 이하 */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .mobile-menu-btn { display: block; }
}
@media (max-width: 640px) {
  :root { --axis: 0%; }
  .page-header .page-title { display: block; }
  .page-header .breadcrumb { margin-top: 8px; padding: 0; }
  .page-header > h1, .page-header > .page-title, .page-header > .page-subtitle { margin-left: 0; }
  .page-header > .container > h1, .page-header > .container > .page-title:only-child:not(:has(h1)), .page-header > .container > .page-subtitle, .page-header > .container > .breadcrumb { margin-left: 0; }
  .inquiry-section, [class$="-intro"], .ceo-profile, .timeline-item, .row, .policy-wrap, .spread .container, .band .container, .close .container, .site-foot .container, .masthead .container { grid-template-columns: minmax(0, 1fr); }
  [class$="-intro"] > *, .timeline-item > .timeline-content { grid-column: 1; }
  .greeting-content { margin-top: 24px !important; }
  .inquiry-section > * { grid-column: 1 !important; grid-row: auto !important; }
  .map-image { height: 280px; }
  .row { gap: 10px; }
  .spread-head, .close h2 { padding: 0 0 16px; }
  .policy-toc { position: static; padding: 0 0 24px; }
  .band h2 { margin-bottom: 16px; }
  .masthead .container { min-height: 0; }
  .masthead-copy { order: -1; padding-block: 40px 16px; }
  .masthead-face { width: 62%; margin: 8px calc(-1 * var(--margin)) 0 auto; }
  .notice-header { display: none; }
  .notice-item { grid-template-columns: minmax(0, 1fr) auto; }
  .notice-item > *:not(:nth-child(2)):not(:nth-child(3)) { display: none; }
  .work-list a { grid-template-columns: minmax(0, 1fr) auto; }
  .work-list p { grid-column: 1 / -1; grid-row: 2; }
  [data-page="login"], [data-page="signup"] { display: block; }
  .auth-side { display: none; }
  .partners, .partnership, .application-section, .inquiry-section, .newsletter, .upload-section, .statistics, .community-stats, .application-guide, .application-process { padding: 28px 20px; }
  table { font-size: 14px; }
  .board-table th:nth-child(n+4), .board-table td:nth-child(n+4) { display: none; }
}