/*
 * polish.css — V4 디자인 유지, 세부만 개선 (2026-09-27)
 * 배치·구조는 바꾸지 않음. 대비·글자 크기·모서리/그림자·터치 크기·포커스·움직임만.
 * 반드시 다른 CSS 뒤에 불러옴.
 */
:root {
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1); /* JMT 주 곡선 */
  --dur-fast: 200ms;
  --dur-card: 240ms;
  --dur-img: 450ms;
  --focus-ring: #0a4f8f;
}

body { line-height: 1.7; }

/* ---------- 포커스 (키보드) ---------- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.btn:focus-visible,
.main-notice-card:focus-visible,
.business-card:focus-visible,
.gallery-item:focus-visible { outline-offset: 4px; }
.gallery-item:focus-visible .gallery-card-content { transform: translateY(0); opacity: 1; }

/* ---------- 버튼: 터치 영역 + 부드러운 움직임 ---------- */
.btn {
  min-height: 52px;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
    border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-fast) ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn.large { min-height: 60px; }
/* 히어로 "전통시장 찾기": 사진 위 투명 버튼 → 흰 바탕으로 글자 대비 확보 (모양 동일) */
.main-hero-buttons .btn-secondary { background-color: rgba(255, 255, 255, 0.92); }
.main-hero-buttons .btn-secondary:hover { background-color: var(--primary-color); }

/* ---------- 히어로 ---------- */
.main-hero-subtitle { font-weight: 600; }
@media (min-width: 768px) { .main-description-text { color: #4a4a4a; } }
.main-description-text { text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9); }
.main-description-line { background-color: var(--primary-bright); }
.main-qr-text { font-size: 17px; }

/* ---------- 섹션 제목/설명 ---------- */
.section-description,
.section-description2 { line-height: 1.75; }

/* ---------- 홈 공지 카드 (배치 그대로) ---------- */
.main-notice-card {
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-card) var(--ease-smooth), box-shadow var(--dur-card) var(--ease-smooth);
  cursor: pointer;
}
.main-notice-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.main-notice-card:active { transform: translateY(-1px); }
.main-cardNotice-image { align-self: stretch; height: auto; min-height: 130px; background: #f6f7f9; }
.main-cardNotice-image img { transition: transform var(--dur-img) var(--ease-smooth); }
.main-notice-card:hover .main-cardNotice-image img { transform: scale(1.03); }
.main-cardNotice-content { padding-top: 16px; padding-bottom: 16px; }
.main-cardNotice-category { font-size: 16px; font-weight: 600; color: var(--primary-color); }
.main-cardNotice-date { font-size: 15px; color: var(--text-muted); }
.main-cardNotice-title { line-height: 1.3; }
.main-cardNotice-description { font-size: 16px; color: var(--text-muted); }

/* ---------- 주요사업 카드 ---------- */
.business-card {
  border-color: #eceef1;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-card) var(--ease-smooth), box-shadow var(--dur-card) var(--ease-smooth);
}
.business-card:hover { opacity: 1; box-shadow: var(--shadow-md); }
.businessCard-image img,
.gallery-item img { transition: transform var(--dur-img) var(--ease-smooth); }
.businessCard-description { line-height: 1.45; }

/* ---------- 교육 영상 / 갤러리 ---------- */
.video-container { box-shadow: var(--shadow-md); }
.gallery-item { box-shadow: var(--shadow-sm); }
.gallery-item .gallery-card-content { transition: transform 320ms var(--ease-smooth), opacity 320ms var(--ease-smooth); }
.gallery-item:hover img { transform: scale(1.035); }
.gallery-card-content .gallery-card-date { font-weight: 400; }
.gallery-card-content .gallery-card-category { border-radius: 10px; }
.main-page-dot:hover, .main-page-dot.active { background-color: var(--secondary-color); }

/* ---------- 모바일 ---------- */
@media (max-width: 767px) {
  .main-description-text { font-size: 17px; line-height: 1.65; }
  .main-cardNotice-image { width: 88px; min-height: 96px; }
  .main-cardNotice-content { padding: 12px 16px 12px 14px; }
  .main-cardNotice-meta { margin-bottom: 4px; }
  .main-cardNotice-category { font-size: 15px; }
  .main-cardNotice-date { font-size: 15px; }
  .main-cardNotice-title { font-size: 19px; margin-bottom: 4px; }
  .main-cardNotice-description { font-size: 15px; line-height: 1.45; }
  .businessCard-description { font-size: 17px; }
}

/* ---------- 동작 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.12s !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .main-notice-card:hover, .business-card:hover { transform: none; }
  .gallery-item:hover img, .businessCard-image img, .main-notice-card:hover .main-cardNotice-image img { transform: none !important; }
}
/* ================================================
   빨강 정리: 글자·버튼 = 선명한 #e60012, 누름/올림 = #c8000f,
   24px 이상 굵은 큰 제목·장식 선 = 기존 밝은 #ff4149 (탁한 색 사용 안 함)
================================================ */
html body .main-title-highlight { color: var(--primary-bright); }
.btn-primary { box-shadow: 0 2px 8px rgba(230, 0, 18, 0.25); }
.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--primary-hover);
  filter: none;
  box-shadow: 0 6px 16px rgba(230, 0, 18, 0.3);
}
.btn-primary:active { background-color: var(--primary-hover); }
.btn-secondary:hover, .main-hero-buttons .btn-secondary:hover { background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-secondary:active, .main-hero-buttons .btn-secondary:active { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-more { min-height: 52px; transition: background-color 240ms var(--ease-smooth), color 240ms var(--ease-smooth), transform 240ms var(--ease-smooth), box-shadow 240ms var(--ease-smooth); }
.btn-more:hover { background-color: var(--primary-color); box-shadow: 0 6px 16px rgba(230, 0, 18, 0.3); }
.btn-more:active { background-color: var(--primary-hover); border-color: var(--primary-hover); color: #fff; box-shadow: 0 2px 8px rgba(230, 0, 18, 0.2); }
.btn-more:disabled { color: var(--text-muted); border-color: #d0d4da; background: transparent; box-shadow: none; transform: none; cursor: default; }
.submenu a:hover { background-color: rgba(230, 0, 18, 0.08); }
.no-more-data-message { color: var(--text-muted); border-color: #e3e6ea; }

/* ================================================
   소식 공통 상단(사진 배경) + 페이지 제목
================================================ */
html body .sub-hero-description { color: var(--text-navy); font-weight: 500; }
html body .page-title p { color: var(--text-secondary); }

/* ================================================
   02 공지사항 목록 (배치는 V4 그대로, 세부만 다듬음)
================================================ */
html body .search-input {
  border: 1px solid #d0d4da;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: border-color 200ms var(--ease-smooth), box-shadow 200ms var(--ease-smooth);
}
html body .search-input::placeholder { color: var(--text-muted); opacity: 1; }
html body .search-input:focus { outline: none; border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(0, 115, 188, 0.2), var(--shadow-sm); }
html body .notice-card {
  border: 1px solid #eceef1;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 240ms var(--ease-smooth), box-shadow 240ms var(--ease-smooth);
}
html body .notice-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
html body .notice-card:active { transform: translateY(-1px) scale(0.99); }
html body .notice-card-image { overflow: hidden; }
html body .notice-card-image img { transition: transform 400ms var(--ease-smooth); }
html body .notice-card:hover .notice-card-image img { transform: scale(1.04); }
html body .notice-card-title { font-weight: 600; color: var(--text-secondary); }
html body .notice-card-date { color: var(--text-muted); font-weight: 400; font-size: 16px; }
html body .notice-card-category { color: var(--secondary-color); font-weight: 600; font-size: 16px; }
@media (max-width: 767px) {
  html body .search-input { height: 56px; font-size: 18px; }
  html body .search-button { height: 56px; font-size: 18px; }
  html body .notice-card { align-items: stretch; min-height: 96px; }
  html body .notice-card-image { position: relative; width: 88px; height: auto; min-height: 96px; }
  html body .notice-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; }
  html body .notice-card-content { padding: 14px 18px 14px 14px; justify-content: center; }
  html body .notice-card-title { font-size: 19px; line-height: 1.35; margin-bottom: 8px; }
  html body .notice-card-date, html body .notice-card-category { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .notice-card:hover, html body .notice-card:active { transform: none; }
  html body .notice-card:hover .notice-card-image img { transform: none; }
}
/* ================================================
   03 보도자료 · 04 상인교육 (배치는 V4 그대로)
================================================ */
html body .press-card, html body .education-card {
  transition: transform 240ms var(--ease-smooth), box-shadow 240ms var(--ease-smooth);
}
html body .press-card:hover, html body .education-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
html body .press-card:active, html body .education-card:active { transform: translateY(-2px) scale(0.99); }
html body .press-card-thumbnail, html body .education-card-thumbnail, html body .education-card-video-container {
  background-color: #eef1f5;
  box-shadow: var(--shadow-sm);
}
html body .press-card-title, html body .education-card-title { font-size: 19px; }
html body .press-card-source, html body .education-card-source { font-size: 16px; font-weight: 600; color: var(--secondary-color); }
html body .press-card-date, html body .education-card-date { font-size: 16px; font-weight: 400; color: var(--text-muted); }
@media (max-width: 768px) {
  html body .education-card-title { font-size: 18px; line-height: 1.4; }
}
@media (max-width: 480px) {
  html body .education-card-info { font-size: 15px; }
  html body .education-card-title { font-size: 18px; }
  html body .education-card-source, html body .education-card-date { font-size: 15px; }
}

/* ================================================
   05 포토갤러리 (마우스를 올리면 설명이 올라오는 V4 방식 그대로)
================================================ */
html body .photo-item {
  box-shadow: var(--shadow-sm);
  transition: box-shadow 240ms var(--ease-smooth);
}
html body .photo-item:hover { box-shadow: var(--shadow-md); }
html body .photo-item img { transition: transform 400ms var(--ease-smooth); }
html body .photo-item:hover img { transform: scale(1.04); }
html body .photo-item .photo-card-content {
  background: rgba(10, 40, 80, 0.9); /* 탁한 회청색 → 맑은 남색 */
  transition: transform 300ms var(--ease-smooth), opacity 300ms var(--ease-smooth);
}
html body .photo-item:focus-visible .photo-card-content { transform: translateY(0); opacity: 1; }
html body .photo-card-content .photo-card-title { font-size: 19px; }
html body .photo-card-content .photo-card-category { font-size: 15px; font-weight: 600; border-radius: 8px; padding: 4px 10px; background: rgba(255, 255, 255, 0.22); }
html body .photo-card-content .photo-card-date { font-size: 15px; font-weight: 500; }

/* ================================================
   06 온라인홍보 · 07 라면특가 (배치는 V4 그대로)
================================================ */
html body .promotion-card, html body .ramen-event-card {
  box-shadow: var(--shadow-sm);
  border: 1px solid #eceef1;
  cursor: pointer;
  transition: transform 240ms var(--ease-smooth), box-shadow 240ms var(--ease-smooth);
}
html body .promotion-card:hover, html body .ramen-event-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
html body .promotion-card:active, html body .ramen-event-card:active { transform: translateY(-2px) scale(0.99); }
html body .promotion-card__image { background-color: #eef1f5; }
html body .promotion-card__meta { font-size: 16px; color: var(--text-muted); }
html body .promotion-card__category { color: var(--primary-color); font-weight: 700; }
@media (max-width: 768px) {
  html body .promotion-card__title { font-size: 18px; }
}
@media (max-width: 480px) {
  html body .promotion-card__meta { font-size: 15px; }
  html body .promotion-card__title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .press-card:hover, html body .education-card:hover, html body .promotion-card:hover, html body .ramen-event-card:hover,
  html body .press-card:active, html body .education-card:active, html body .promotion-card:active, html body .ramen-event-card:active { transform: none; }
  html body .photo-item:hover img { transform: none; }
}

/* 주요사업 상단: 설명 글이 사진 위에 겹치는 부분도 읽히도록 흰 번짐 (배치 그대로) */
html body .business-hero .sub-hero-description { text-shadow: 0 0 2px #fff, 0 0 8px rgba(255, 255, 255, 0.95), 0 0 16px rgba(255, 255, 255, 0.8); }

/* 페이지 제목 아래 소개 글: 휴대폰에서 18px (모든 페이지 공통) */
@media (max-width: 767px) {
  html body .page-title p { font-size: 18px; line-height: 1.65; }
}

/* ===== 공통 머리글·전체 메뉴·바닥글 (V4 색 그대로, 크기·누르기·초점·움직임만) ===== */
/* 머리글 메뉴: 48px 높이, 사진 위에서도 또렷하게 한 단계 진한 글씨 */
html body .navigation .menu-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; color: #1b1e23; font-weight: 500; border-radius: 10px; transition: color 200ms var(--ease-smooth); }
html body .navigation .menu-link:hover,
html body .navigation .menu-item:focus-within > .menu-link { color: #d92a31; }
html body .navigation a:focus-visible,
html body .navigation button:focus-visible { outline: 3px solid #0a4f8f; outline-offset: 2px; }
/* 펼침 메뉴: 17px 글씨, 48px 줄, 둥근 모서리·부드러운 그림자, 키보드로도 열림 */
html body .navigation .desktop-menu .submenu { top: calc(100% + 4px); min-width: 184px; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06), 0 16px 36px rgba(16, 24, 40, 0.14); transform: translateX(-50%) translateY(6px); transition: opacity 220ms var(--ease-smooth), transform 220ms var(--ease-smooth), visibility 0s linear 220ms; }
html body .navigation .desktop-menu .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
html body .navigation .desktop-menu .menu-item:hover .submenu,
html body .navigation .desktop-menu .menu-item:focus-within .submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity 220ms var(--ease-smooth), transform 220ms var(--ease-smooth), visibility 0s; }
html body .navigation .desktop-menu .submenu a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 14px; font-size: 17px; line-height: 1.3; color: #1b1e23; border-radius: 12px; white-space: nowrap; }
html body .navigation .desktop-menu .submenu a:hover,
html body .navigation .desktop-menu .submenu a:focus-visible { color: #d92a31; background-color: rgba(255, 65, 73, 0.1); }
html body .navigation .search-icon,
html body .navigation .search-btn { width: 48px; height: 48px; }

/* 햄버거 버튼: 48px */
html body .mobile-menu-btn { width: 48px; height: 48px; border-radius: 12px; }
html body .mobile-menu-btn span { width: 26px; height: 2.5px; border-radius: 2px; background-color: #1b1e23; transition: transform 280ms var(--ease-smooth), opacity 200ms var(--ease-smooth); }
html body .mobile-menu-btn.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
html body .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* 전체 메뉴(휴대폰·태블릿): 오른쪽에서 부드럽게 열림, 둥근 왼쪽 모서리, 52px 줄 */
html body .mobile-menu { display: block; right: 0; width: 86%; max-width: 380px; height: 100dvh; padding: 84px 20px 28px; border-radius: 22px 0 0 22px; box-shadow: -8px 0 32px rgba(16, 24, 40, 0.16); transform: translateX(105%); visibility: hidden; transition: transform 320ms var(--ease-smooth), visibility 0s linear 320ms; overscroll-behavior: contain; }
html body .mobile-menu.open { transform: translateX(0); visibility: visible; transition: transform 320ms var(--ease-smooth), visibility 0s; }
html body .mobile-menu-overlay { display: block; transition: opacity 320ms var(--ease-smooth), visibility 0s linear 320ms; }
html body .mobile-menu-overlay.open { transition: opacity 320ms var(--ease-smooth), visibility 0s; }
html body .mobile-menu .menu-list { gap: 0; }
html body .mobile-menu .menu-item { padding-bottom: 0; border-bottom: 1px solid #e6eaf0; }
html body .mobile-menu .menu-link { display: flex; min-height: 56px; padding: 0 6px; font-size: 20px; font-weight: 600; color: #1b1e23; }
html body .mobile-menu .menu-link::after { content: "›"; font-size: 26px; font-weight: 400; color: #6b6b6b; line-height: 1; }
html body .mobile-menu .has-submenu > .menu-link::after { content: "+"; font-size: 26px; transition: transform 280ms var(--ease-smooth); }
html body .mobile-menu .menu-item.open > .menu-link { color: #d92a31; }
html body .mobile-menu .menu-item.open > .menu-link::after { color: #d92a31; }
html body .mobile-menu .submenu { padding: 0 0 0 8px; transition: max-height 320ms var(--ease-smooth); }
html body .mobile-menu .menu-item.open .submenu { padding-bottom: 8px; }
html body .mobile-menu .submenu a { display: flex; align-items: center; justify-content: center; min-height: 52px; font-size: 18px; line-height: 1.3; color: #333; border-radius: 12px; }
html body .mobile-menu .submenu a:hover,
html body .mobile-menu .submenu a:active { color: #d92a31; background-color: rgba(255, 65, 73, 0.1); }

/* 바닥글: 글씨 15~18px, 회색 글씨 한 단계 진하게, 키보드 초점 */
html body .footer-menu a { color: #545454; display: inline-block; padding: 6px 4px; }
html body .footer-menu a:hover { color: #1b1e23; }
html body .social-link span { color: #545454; }
html body .footer-menu a:focus-visible,
html body .social-link:focus-visible,
html body .footer-column-header:focus-visible { outline: 3px solid #0a4f8f; outline-offset: 2px; border-radius: 8px; }
html body .footer-bottom { height: auto; }
html body .footer-copyright { position: static; padding-top: 28px; }
html body .footer-copyright p { font-size: 15px; line-height: 1.8; color: #545454; word-break: keep-all; }
@media (max-width: 767px) {
  html body .footer-column-header { min-height: 56px; padding: 0; }
  html body .footer-menu a,
  html body .social-link { display: flex; align-items: center; min-height: 48px; padding: 0 4px; font-size: 18px; }
  html body .footer-menu,
  html body .social-links { transition: max-height 320ms var(--ease-smooth), visibility 0s linear 320ms; }
  html body .footer-column-header[aria-expanded="false"] + .footer-menu,
  html body .footer-column-header[aria-expanded="false"] + .social-links { visibility: hidden; }
  html body .footer-column-header[aria-expanded="true"] + .footer-menu,
  html body .footer-column-header[aria-expanded="true"] + .social-links { visibility: visible; transition: max-height 320ms var(--ease-smooth), visibility 0s; }
  html body .social-links { padding-top: 4px; gap: 0; }
  html body .footer-copyright p { font-size: 15px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html body .navigation .desktop-menu .submenu,
  html body .mobile-menu,
  html body .mobile-menu-overlay,
  html body .mobile-menu .submenu,
  html body .mobile-menu-btn span,
  html body .footer-menu,
  html body .social-links { transition: none !important; }
}

/* 푸터: 전화·팩스 번호가 줄 중간에서 끊기지 않도록 */
html body .footer-copyright .nw { white-space: nowrap; }

/* 목록 카드가 진짜 링크(<a href>)가 됨: 링크 기본 글자색·밑줄·흐려짐 없이 기존 카드 모양 그대로 */
:where(a.notice-card, a.main-notice-card, a.gallery-item, a.photo-item, a.board-card) { display: block; }
a.notice-card, a.main-notice-card, a.gallery-item, a.photo-item, a.board-card { color: inherit; text-decoration: none; }
a.notice-card:hover, a.main-notice-card:hover, a.gallery-item:hover, a.photo-item:hover, a.board-card:hover { color: inherit; opacity: 1; }

/* ---------- 사진 없는 글의 대체 로고 (홈 공지 카드·갤러리 칸) ----------
   logo-fallback-v5.png 는 배경이 투명 → 칸 배경 한 색 위에 흐린 로고만 가운데 보임 */
.main-cardNotice-image img[src*="logo-fallback"],
.gallery-item img[src*="logo-fallback"],
.photo-item img[src*="logo-fallback"] {
  object-fit: contain;
  object-position: center;
  opacity: 0.35;
  filter: saturate(0.35) brightness(1.05);
}
.gallery-item:has(img[src*="logo-fallback"]),
.photo-item:has(img[src*="logo-fallback"]) {
  background: #f4f6f8;
}