/* ===== Base (Mobile First) ===== */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif; color: #111; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; margin: 0 auto; padding: 18px 14px; }

/* ===== Header (Mobile First) ===== */
.site-header { border-bottom: 1px solid #eee; background: #fff; position: sticky; top: 0; z-index: 50; }

/* 헤더도 본문과 같은 폭 기준 */
.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;

    height: 72px;                 /* ✅ 높이 고정 */
    display: flex;
    align-items: center;          /* ✅ 세로 중앙 */
    gap: 32px;
}

.brand { font-weight: 900; letter-spacing: 0.2px; }

/* 데스크탑 링크: 기본은 숨김(모바일) */
.header-links { display: none; gap: 12px; font-size: 14px; color: #444; }
.header-links a { color: #444; }

.menu-btn {
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  position: relative; z-index: 60;
}

/* Mobile Nav */
.mobile-nav { display: none; border-top: 1px solid #eee; padding: 10px 14px 14px;position: relative; z-index: 55; }
.mobile-nav.open { display: grid; gap: 10px; }
.mobile-nav a { padding: 10px 10px; border-radius: 12px; background: #f7f7f9; }
.mobile-nav-divider { height: 1px; margin: 6px 0; }

/* Mobile 2depth */
.mobile-group { margin-bottom: 6px; }
.mobile-parent {
  width: 100%;
  padding: 12px 10px;
  border-radius: 12px;
  background: #f2f3f7;
  border: none;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.mobile-parent::after {
  content: "▾";
  float: right;
  transition: transform 0.2s ease;
}
.mobile-parent.open::after { transform: rotate(180deg); }

.mobile-child { display: none; padding: 6px 0 4px 10px; }
.mobile-child.open { display: grid; gap: 6px; }
.mobile-child a {
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

/* Desktop Nav 기본은 숨김(모바일) */
.desktop-nav { display: none; }

/* ===== Main Visual ===== */
.main-visual { border-radius: 16px; padding: 26px 16px; background: #f6f7fb; margin-top: 12px; }
.visual-text h1 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.visual-text p { margin: 0; color: #444; font-size: 14px; }

/* ===== Sections ===== */
.section-header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.section-header h2 { margin: 0; font-size: 18px; }
.more { font-size: 13px; color: #666; white-space: nowrap; }

.home-notice { margin-top: 16px; }
.notice-list { list-style: none; padding: 0; margin: 10px 0 0; border-top: 1px solid #eee; }
.notice-list li { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 2px; border-bottom: 1px solid #eee; }
.notice-list .date { color: #777; font-size: 12px; }

/* ===== Program (Mobile: 1 column) ===== */
.home-program { margin: 18px 0; }
.home-program h2 { margin: 0; font-size: 18px; }
.program-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.program-card { border: 1px solid #eee; border-radius: 14px; padding: 14px; background: #fff; }
.program-card h3 { margin: 0 0 8px; font-size: 16px; }
.program-card p { margin: 0 0 10px; color: #555; font-size: 13px; }
.btn-detail { font-size: 13px; font-weight: 700; }

/* ===== Shortcut (Mobile: 1 column) ===== */
.home-shortcut { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 18px 0 8px; }
.shortcut-card { border-radius: 14px; padding: 16px; background: #111; color: #fff; }
.shortcut-card p { margin: 8px 0 0; opacity: 0.9; }
.shortcut-card a { display: inline-block; margin-top: 12px; font-weight: 800; }

/* ===== Sub pages ===== */
.subheader { padding: 18px 0; border-bottom: 1px solid #eee; margin-bottom: 14px; }
.subheader-inner h1 { margin: 0 0 6px; font-size: 20px; }
.breadcrumb { margin: 0; color: #777; font-size: 12px; }
.page .content { padding-top: 6px; }

/* ===== Footer (Center aligned - FIX) ===== */
footer {
  border-top: 1px solid #eee;
  padding: 24px 16px;
  color: #555;
  text-align: center;
}

/* 링크 영역 */
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

/* 주소/정보 영역 */
.footer-info {
  margin-top: 12px;
  text-align: center; /* 🔥 핵심 */
}

/* p 태그도 강제로 */
.footer-info p {
  margin: 6px 0 0;
  font-size: 12px;
  color: #666;
  text-align: center; /* 🔥 핵심 */
}

/* ===== Swiper Banner ===== */
.banner-slide { position: relative; border-radius: 16px; overflow: hidden; }
.banner-img { width: 100%; height: 220px; object-fit: cover; }
.banner-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  color: #fff;
}
.banner-overlay h1 { margin: 0 0 6px; font-size: 20px; }
.banner-overlay p { margin: 0; font-size: 13px; opacity: 0.95; }

/* ===== Breakpoints ===== */
@media (min-width: 768px) {
  .container { max-width: 1100px; padding: 24px 16px; }

  .main-visual { padding: 56px 28px; }
  .visual-text h1 { font-size: 34px; }

  .program-list { grid-template-columns: repeat(2, 1fr); }
  .home-shortcut { grid-template-columns: repeat(3, 1fr); }

  .banner-img { height: 360px; }
  .banner-overlay h1 { font-size: 34px; }
  .banner-overlay p { font-size: 15px; }
}

/* ===== Desktop (2depth) ===== */
@media (min-width: 1024px) {
  /* 모바일 요소 숨김 */
  .menu-btn { display: none !important; }
  .mobile-nav { display: none; }

  /* 데스크탑 상단 링크/메뉴 노출 */
  .header-links { display: flex; align-items: center; }
  .desktop-nav { display: block; border-top: 1px solid #eee; background: #fff; }

  /* GNB도 본문 폭 기준으로 */
  .desktop-nav .gnb {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    list-style: none;
    display: flex;
    gap: 24px;
    height: 56px;
    align-items: center;
  }

  /* 1뎁스 버튼을 링크처럼 보이게 */
  .gnb-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    font-weight: 800;
    color: #222;
  }

  .has-child { position: relative; }
  /* ✅ hover 끊김 방지: 부모 li에 여유 공간을 줘서 마우스 이동 시 hover가 유지되게 */
  .has-child { padding-bottom: 10px; }
  /* ✅ 갭 제거: top을 100%로 두고 margin-top 없애기 */
  .depth2 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;

    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 8px;
    min-width: 180px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }

  .depth2 li { list-style: none; }
  .depth2 a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    color: #222;
    white-space: nowrap;
  }
  .depth2 a:hover { background: #f2f3f7; }

  /* 마우스 오버일 때만 열림 */
  .has-child:hover .depth2 {
    display: block;
  }

  /* 키보드(탭) 접근일 때만 열림 (마우스 클릭으로 생기는 focus는 제외) */
  .has-child:has(.gnb-link:focus-visible) .depth2 {
    display: block;
  }
}

/* ===== Policy pages ===== */
.policy-content {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 14px;
}

.policy-content h2 {
  margin-top: 28px;
  font-size: 17px;
}

.policy-content ul {
  margin: 8px 0 0 18px;
}

.policy-content li {
  margin-bottom: 6px;
}

/* ===== Board (Conko-style) ===== */
.board-search {
  display: flex;
  gap: 8px;
  margin: 8px 0 14px;
}

.board-search input {
  flex: 1;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  background: #fff;
}

.board-search button {
  border: 1px solid #111;
  background: #111;
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  cursor: pointer;
}

.board-table-wrap {
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.board-table {
  width: 100%;
  border-collapse: collapse;
}

.board-table thead th {
  background: #f7f7f9;
  color: #222;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  padding: 12px 10px;
  border-bottom: 1px solid #eee;
}

.board-table tbody td {
  padding: 14px 10px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  vertical-align: middle;
}

.board-table tbody tr:last-child td { border-bottom: none; }

.col-no, .col-date, .col-view { text-align: center; }
.col-no { width: 88px; }
.col-date { width: 120px; }
.col-view { width: 80px; }

.col-title a {
  font-weight: 800;
  color: #111;
  display: inline-block;
}

.is-pinned { background: #fffdf6; }

.badge-pin {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

/* Paging (dummy) */
.paging {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 4px;
}

.page-btn {
  border: 1px solid #eee;
  background: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: #333;
}

.page-btn.is-active {
  border-color: #111;
  background: #111;
  color: #fff;
  font-weight: 900;
}

/* Notice detail */
.notice-detail {
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.notice-head {
  padding: 16px 14px;
  border-bottom: 1px solid #eee;
}

.notice-title-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.notice-title-row h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.notice-meta {
  margin-top: 10px;
  color: #666;
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.notice-meta .sep { color: #bbb; }

.notice-body {
  padding: 18px 14px;
  line-height: 1.75;
  font-size: 14px;
  color: #222;
  white-space: pre-wrap; /* 줄바꿈 유지 */
}

.notice-actions {
  padding: 14px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

.notice-actions .btn {
  border: 1px solid #111;
  background: #111;
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
}

/* Mobile: 표가 답답하면 날짜/조회 숨김 */
@media (max-width: 420px) {
  .col-date, .col-view { display: none; }
}

/* ===== Brand pages ===== */
.brand-wrap {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.75;
  font-size: 14px;
  color: #222;
}

.brand-hero {
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 18px 16px;
  background: #fff;
}

.brand-hero h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.brand-hero p { margin: 0; color: #555; }

.brand-section {
  margin-top: 16px;
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  padding: 18px 16px;
}

.brand-section h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.brand-kv {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.brand-kv .kv-card {
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px;
}

.brand-kv .kv-title { font-weight: 900; margin-bottom: 6px; }
.brand-kv .kv-desc { margin: 0; color: #555; }

.brand-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.brand-table th, .brand-table td {
  border-top: 1px solid #eee;
  padding: 12px 10px;
  vertical-align: top;
  text-align: left;
}

.brand-table th {
  width: 140px;
  color: #444;
  font-weight: 900;
}

.brand-note {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

@media (min-width: 768px) {
  .brand-hero { padding: 22px 20px; }
  .brand-section { padding: 22px 20px; }
  .brand-kv { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Gallery List ===== */
.gallery-top {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.gallery-desc {
  margin: 0 0 10px;
  color: #666;
  font-size: 13px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.gallery-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.thumb {
  border-radius: 14px;
  overflow: hidden;
  background: #f2f3f7;
  height: 92px;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #888;
  font-size: 12px;
  letter-spacing: 0.6px;
}

.card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.card-title {
  font-size: 15px;
  font-weight: 900;
  color: #111;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-meta {
  font-size: 12px;
  color: #777;
}

/* 빈 상태 */
.empty {
  margin-top: 20px;
  padding: 18px;
  border: 1px dashed #e3e3e3;
  border-radius: 16px;
  color: #777;
  text-align: center;
}

/* Desktop/Tablet grid */
@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .gallery-card {
    grid-template-columns: 1fr;
    padding: 0;
    overflow: hidden;
  }

  .thumb {
    height: 170px;
    border-radius: 16px 16px 0 0;
  }

  .card-body {
    padding: 14px 14px 16px;
  }

  .gallery-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  }
}

.thumb-fallback{
  width:100%;
  height:100%;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
  color:#fff;
  background: linear-gradient(135deg, #111 0%, #444 100%);
}

.fallback-badge{
  align-self:flex-start;
  font-size:11px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
}

.fallback-title{
  font-size:13px;
  font-weight:900;
  line-height:1.2;
  opacity:0.95;
}

/* ===== Gallery Detail ===== */
.gallery-detail-head {
  margin-top: 6px;
}

.gd-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.2px;
}

.gd-meta {
  margin-top: 8px;
  font-size: 12px;
  color: #777;
}

.gd-hero {
  margin-top: 14px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eee;
  background: #f2f3f7;
}

.gd-hero img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.gd-hero-fallback {
  height: 220px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  color: #fff;
  background: linear-gradient(135deg, #111 0%, #444 100%);
}

.gd-section {
  margin-top: 16px;
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
}

.gd-section h2 {
  margin: 0 0 10px;
  font-size: 15px;
}

.gd-text {
  white-space: pre-line;
  color: #333;
  font-size: 14px;
  line-height: 1.8;
}

.gd-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.gd-images img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #eee;
  background: #f2f3f7;
}

.gd-empty {
  padding: 14px;
  border: 1px dashed #e3e3e3;
  border-radius: 14px;
  color: #777;
  font-size: 13px;
  text-align: center;
}

.gd-actions {
  margin: 16px 0 6px;
  display: flex;
  justify-content: flex-end;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  font-weight: 900;
  font-size: 14px;
}

@media (min-width: 768px) {
  .gd-title { font-size: 26px; }
  .gd-hero img, .gd-hero-fallback { height: 360px; }
  .gd-images { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gd-images { grid-template-columns: repeat(3, 1fr); }
}

/* ===== News (User) ===== */
.news-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

.news-card {
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}

.news-thumb { background:#f2f3f7; height: 180px; overflow:hidden; }
.news-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.news-thumb-fallback{
  height:100%;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  color:#fff;
  background: linear-gradient(135deg, #111 0%, #444 100%);
}

.news-body { padding: 14px 14px 16px; display:grid; gap:6px; }
.news-title {
  font-weight: 900; font-size: 15px; line-height: 1.25;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.news-meta { font-size: 12px; color:#777; }

@media (min-width: 768px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .news-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.08); }
}

/* News detail */
.news-detail-head { margin-top: 6px; }
.nd-title { margin:0; font-size: 20px; line-height:1.25; }
.nd-meta { margin-top:8px; font-size:12px; color:#777; }

.nd-hero { margin-top: 14px; border:1px solid #eee; border-radius:16px; overflow:hidden; }
.nd-hero img { width:100%; height: 220px; object-fit: cover; display:block; }
@media (min-width: 768px) { .nd-title{font-size:26px;} .nd-hero img{height:360px;} }

.nd-content {
  margin-top: 16px;
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  line-height: 1.8;
  color: #222;
}
.nd-content img { max-width: 100%; border-radius: 14px; border:1px solid #eee; }
.nd-content p { margin: 0 0 12px; }

.nd-actions { margin: 16px 0 6px; display:flex; justify-content:flex-end; }
.btn-back { padding: 10px 14px; border:1px solid #ddd; border-radius: 12px; background:#fff; font-weight:900; }

/* ✅ Desktop: logo + gnb same row */
@media (min-width: 1024px) {
  .header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  /* 기존: border-top으로 분리하던 desktop-nav 제거 */
  .desktop-nav {
    display: block;
    border-top: 0 !important;
    background: transparent !important;
    flex: 1;              /* 가운데 영역을 nav가 차지 */
  }

  .gnb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 22px;
  }

  .gnb-link {
    font-weight: 800;
    color: #222;
    padding: 10px 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .gnb-link:hover { background: #f2f3f7; }

  .header-links { margin-left: auto; } /* 우측 링크 밀기 */
}

/* ✅ DropDown 안정화: hover 시 사라짐 방지 (마우스 이동 여유 공간) */
@media (min-width: 1024px) {
  .has-child { position: relative; }

  .depth2 {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 8px;
    min-width: 180px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }

  /* ✅ "메뉴와 서브메뉴 사이" 마우스 경로에 여유를 줘서 클릭 가능하게 */
  .has-child::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px; /* 이 공간 덕분에 hover가 끊기지 않음 */
  }

  .has-child:hover .depth2,
  .has-child:focus-within .depth2 {
    display: block;
  }

  .depth2 li { list-style: none; }
  .depth2 a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    color: #222;
    white-space: nowrap;
  }

  .depth2 a:hover { background: #f2f3f7; }
}

.site-header {
  background: #fff;
  border-bottom: 1px solid #f0e6df;
}

.desktop-nav {
  flex: 1;                      /* 가운데 영역 */
}

.gnb {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
}

.gnb-link {
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;

  font-size: 16px;
  font-weight: 800;
}

.header-links {
  margin-left: auto;            /* 오른쪽 끝 */
  display: flex;
  align-items: center;
}

/* ===== Brand ===== */
.brand {
  font-weight: 900;
  font-size: 18px;
  color: #E98973;               /* 🍑 살구 포인트 */
}

/* ===== GNB ===== */
.gnb-link {
  color: #6B4F45;
  transition: color 0.2s ease, background 0.2s ease;
}

.gnb-link:hover {
  color: #E98973;
  background: #FFF2EE;
  border-radius: 10px;
}

/* active 상태용 (선택) */
.gnb-link.is-active {
  color: #E98973;
}

/* ===== Login ===== */
.header-link {
  font-size: 14px;
  font-weight: 800;
  color: #6B4F45;
}

.header-link:hover {
  color: #E98973;
}

/* ===== Brand ===== */
.brand {
  font-weight: 900;
  font-size: 18px;
  color: #E98973;               /* 🍑 살구 포인트 */
}

/* ===== GNB ===== */
.gnb-link {
  color: #6B4F45;
  transition: color 0.2s ease, background 0.2s ease;
}

.gnb-link:hover {
  color: #E98973;
  background: #FFF2EE;
  border-radius: 10px;
}

/* active 상태용 (선택) */
.gnb-link.is-active {
  color: #E98973;
}

/* ===== Login ===== */
.header-link {
  font-size: 14px;
  font-weight: 800;
  color: #6B4F45;
}

.header-link:hover {
  color: #E98973;
}

 /* ===== Header height only (safe) ===== */
 .site-header .header-inner{
   height: 72px;          /* 원하는 높이 */
   display: flex;
   align-items: center;   /* 로고/메뉴/로그인 세로 중앙 */
 }

 /* ===== Header height only (safe) ===== */
 .site-header .header-inner{
   height: 72px;          /* 원하는 높이 */
   display: flex;
   align-items: center;   /* 로고/메뉴/로그인 세로 중앙 */
 }

 @media (min-width: 1024px){
   .desktop-nav .gnb{
     height: 72px;          /* header-inner와 동일 */
     align-items: center;
   }
 }

 /* ✅ Header vertical align fix (scoped, safe) */
 .site-header .header-inner{
   height: 72px;              /* 원하는 높이 */
   padding-top: 0 !important;  /* 기존 768px 패딩 무력화 */
   padding-bottom: 0 !important;
   display: flex;
   align-items: center;
 }

 /* 로고(brand) */
 .site-header .brand{
   display: inline-flex;
   align-items: center;
   height: 100%;
   line-height: 1;
 }

 /* 데스크탑 gnb 컨테이너도 헤더 높이 따라가게 */
 @media (min-width: 1024px){
   .site-header .desktop-nav .gnb{
     height: 100%;
     display: flex;
     align-items: center;
   }

   /* 1뎁 메뉴 */
   .site-header .desktop-nav .gnb-link{
     display: inline-flex;
     align-items: center;
     height: 100%;
     line-height: 1;
   }
 }

 /* 로그인 링크 */
 .site-header .header-links a,
 .site-header .header-link{
   display: inline-flex;
   align-items: center;
   height: 100%;
   line-height: 1;
 }

 @media (min-width: 1024px){
   .site-header .desktop-nav{
     flex: 1;
     display: flex;
     justify-content: center;   /* 🔥 가운데 */
   }

   .site-header .desktop-nav .gnb{
     gap: 56px;                 /* 🔥 넓은 간격 */
   }
 }

 /* ===== Recruit (Instructor) - Senior tone ===== */
 .recruit-hero{
   border: 1px solid #f0e6df;
   background: #fff8f5;
   border-radius: 16px;
   padding: 18px 16px;
   margin-top: 6px;
   margin-bottom: 14px;
 }

 .recruit-badge{
   display:inline-block;
   padding:6px 12px;
   border-radius:999px;
   background:#FFF2EE;
   color:#E98973;
   font-weight:900;
   font-size:13px;
 }

 .recruit-title{
   margin: 10px 0 6px;
   font-size: 18px;
   line-height: 1.25;
   color:#6B4F45;
 }

 .recruit-desc{
   margin:0;
   color:#7A5A4E;
   font-size:14px;
   line-height:1.7;
 }

 .recruit-cta{
   margin-top: 12px;
   display:flex;
   gap:10px;
   flex-wrap:wrap;
 }

 .btn-primary{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   padding: 10px 14px;
   border-radius: 12px;
   border:1px solid #E98973;
   background:#E98973;
   color:#fff;
   font-weight:900;
   font-size:14px;
 }

 .btn-secondary{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   padding: 10px 14px;
   border-radius: 12px;
   border:1px solid #f0e6df;
   background:#fff;
   color:#6B4F45;
   font-weight:900;
   font-size:14px;
 }

 .recruit-inline-link{
   font-weight:900;
   color:#E98973;
 }

 .recruit-bottom{
   margin-top: 16px;
 }

 .recruit-bottom-card{
   border:1px solid #eee;
   border-radius:16px;
   padding: 16px;
   background:#fff;
   display:flex;
   justify-content:space-between;
   align-items:center;
   gap:12px;
   flex-wrap:wrap;
 }

 .recruit-bottom-title{
   font-weight:900;
   color:#6B4F45;
   font-size:14px;
 }

 .recruit-bottom-desc{
   margin-top:6px;
   color:#777;
   font-size:13px;
   line-height:1.6;
 }

 .site-header .brand img {
   height: 64px;
   width: auto;
 }

 /* board table: recruit page에서 조회 컬럼 제거했으니 모바일에서도 안정 */
 @media (max-width: 420px) {
   .col-date { display: none; }
 }

 /* ===== Header Logo (image + subtitle) ===== */
 .brand{
   display:flex;
   flex-direction:column;
   gap:2px;
   line-height:1;
 }

 .brand-logo{
   height: 60px;     /* ✅ 헤더 높이 깨짐 방지 */
   width: auto;
   display:block;
 }

 .brand-sub{
   font-size:12px;
   font-weight:700;
   color:#8a6f64;    /* 살구/브라운 계열 */
   letter-spacing:-0.2px;
 }

 /* 데스크탑에서는 로고를 조금 키워도 안정적 */
 @media (min-width: 1024px){
   .brand-logo{ height: 60px; }
 }

 .brand{
   display:flex;
   align-items:center;  /* 헤더 기준 중앙 */
   line-height:0;       /* 이미지 baseline 영향 제거 */
 }

 .brand-logo{
   height:60px;         /* 카피 포함 이미지면 조금 크게 */
   width:auto;
   display:block;
   transform: translateY(3px); /* ✅ 정렬 보정: 2~5px 사이로 조절 */
 }

 .header-inner{
   height:72px;
   display:flex;
   align-items:center; /* ✅ 이것이 반드시 있어야 함 */
 }

 /* gnb도 헤더 높이 기준으로 중앙정렬 */
 .desktop-nav .gnb{
   height:72px;              /* header-inner와 같은 높이 */
   display:flex;
   align-items:center;
 }

 /* ===== Header logo size up (2안 유지) ===== */

 .brand {
   display: flex;
   align-items: center;   /* 헤더 기준 세로 중앙 */
   line-height: 0;        /* 이미지 baseline 영향 제거 */
 }

 .brand img,
 .brand-logo {
   height: 60px;          /* 🔥 기존 36~40px → 48px */
   width: auto;
   display: block;

   /* 카피가 이미지 상단에 있어서 떠보이는 현상 보정 */
   transform: translateY(3px);
 }

 /* 데스크탑에서 조금 더 강조 */
 @media (min-width: 1024px) {
   .brand img,
   .brand-logo {
     height: 60px;        /* 🔥 PC에서 더 큼 */
     transform: translateY(4px);
   }
 }

 /* =========================================================
    THEME (Logo-based: Warm Orange / Yellow / Green)
    - 기존 살구 톤(#E98973, #FFF2EE 등) 제거용
    ========================================================= */
 :root{
   --c-ink: #111;
   --c-text: #3a2f2a;

   --c-orange: #E55A3C;   /* 로고 웜 오렌지 */
   --c-yellow: #F3B31C;   /* 로고 옐로우 */
   --c-green:  #2F7D4E;   /* 로고 그린 */

   --c-border: #eee;
   --c-border-soft: #f2f2f4;
   --c-bg: #fff;
   --c-bg-soft: #fafafb;

   --c-hover: rgba(229, 90, 60, 0.08); /* 오렌지 hover */
 }

 /* =========================================================
    HEADER (2안 유지: 로고 + 1뎁스 + 로그인 같은 줄)
    - 메인 깨짐 방지: header 영역만 스코프 적용
    ========================================================= */
 .site-header{
   background: var(--c-bg);
   border-bottom: 1px solid var(--c-border);
   position: sticky;
   top: 0;
   z-index: 50;
 }

 .site-header .header-inner{
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 20px;
   height: 72px;
   display: flex;
   align-items: center;
   gap: 28px;
 }

 /* 브랜드(로고) */
 .site-header .brand{
   display: inline-flex;
   align-items: center;
   line-height: 0; /* baseline 흔들림 제거 */
 }

 .site-header .brand img,
 .site-header .brand-logo{
   height: 60px;           /* ✅ 로고 사이즈 업 */
   width: auto;
   display: block;
   transform: translateY(2px); /* ✅ 카피 포함 이미지 보정 (2~4px 튜닝) */
 }

 /* 로그인/우측 링크 */
 .site-header .header-links{
   display: none; /* mobile default */
   gap: 12px;
   font-size: 14px;
   margin-left: auto;
   align-items: center;
 }

 .site-header .header-link,
 .site-header .header-links a{
   display: inline-flex;
   align-items: center;
   height: 100%;
   font-weight: 800;
   color: var(--c-text);
 }

 .site-header .header-link:hover,
 .site-header .header-links a:hover{
   color: var(--c-orange);
 }

 /* =========================================================
    DESKTOP GNB
    ========================================================= */
 .desktop-nav{ display: none; } /* mobile default */

 @media (min-width: 1024px){
   .menu-btn{ display:none !important; }
   .mobile-nav{ display:none; }

   .site-header .header-links{ display:flex; }

   .desktop-nav{
     display: flex;      /* ✅ header-inner 안에서 동작 */
     flex: 1;
     justify-content: center;
     background: transparent;
     border: 0;
   }

   .desktop-nav .gnb{
     list-style: none;
     margin: 0;
     padding: 0;
     height: 72px;              /* header-inner와 동일 */
     display: flex;
     align-items: center;
     gap: 56px;                 /* ✅ 메뉴 간격 넓게 */
   }

   .gnb-link{
     background: none;
     border: none;
     cursor: pointer;

     display: inline-flex;
     align-items: center;
     height: 100%;

     padding: 0 8px;
     font: inherit;
     font-size: 16px;
     font-weight: 900;
     color: var(--c-text);

     border-radius: 10px;
     transition: background .2s ease, color .2s ease;
   }

   .gnb-link:hover{
     color: var(--c-orange);
     background: var(--c-hover);
   }

   .gnb-link.is-active{
     color: var(--c-orange);
   }

   /* 2depth dropdown은 기존 유지(필요하면 여기서 추가 튜닝) */
   .has-child{ position: relative; }

   .depth2{
     display: none;
     position: absolute;
     top: calc(100% + 8px);
     left: 0;
     z-index: 50;

     background: #fff;
     border: 1px solid var(--c-border);
     border-radius: 14px;
     padding: 8px;
     min-width: 180px;
     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
   }

   .has-child::after{
     content:"";
     position:absolute;
     left:0; right:0;
     top:100%;
     height:12px; /* hover 끊김 방지 */
   }

   .has-child:hover .depth2,
   .has-child:focus-within .depth2{ display:block; }

   .depth2 li{ list-style:none; }
   .depth2 a{
     display:block;
     padding:10px 12px;
     border-radius:12px;
     font-size:14px;
     color: var(--c-text);
     white-space: nowrap;
   }
   .depth2 a:hover{ background: #f4f5f7; color: var(--c-orange); }
 }

 /* =========================================================
    RECRUIT (Instructor) - Senior tone (로고 컬러 기반)
    ========================================================= */
 .recruit-hero{
   border: 1px solid rgba(47, 125, 78, 0.18);  /* green tint */
   background: linear-gradient(135deg,
     rgba(47,125,78,0.06) 0%,
     rgba(243,179,28,0.06) 55%,
     rgba(229,90,60,0.05) 100%);
   border-radius: 16px;
   padding: 18px 16px;
   margin-top: 6px;
   margin-bottom: 14px;
 }

 .recruit-badge{
   display:inline-block;
   padding:6px 12px;
   border-radius:999px;
   background: rgba(243,179,28,0.14); /* yellow tint */
   color: #6a4a00;
   font-weight: 900;
   font-size: 13px;
   border: 1px solid rgba(243,179,28,0.28);
 }

 .recruit-title{
   margin: 10px 0 6px;
   font-size: 18px;
   line-height: 1.25;
   color: var(--c-text);
 }

 .recruit-desc{
   margin:0;
   color: #5b4a43;
   font-size:14px;
   line-height:1.7;
 }

 .recruit-cta{
   margin-top: 12px;
   display:flex;
   gap:10px;
   flex-wrap:wrap;
 }

 .btn-primary{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   padding: 10px 14px;
   border-radius: 12px;
   border: 1px solid var(--c-orange);
   background: var(--c-orange);
   color:#fff;
   font-weight:900;
   font-size:14px;
 }

 .btn-secondary{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   padding: 10px 14px;
   border-radius: 12px;
   border: 1px solid rgba(47,125,78,0.28);
   background: #fff;
   color: var(--c-green);
   font-weight: 900;
   font-size: 14px;
 }

 .recruit-inline-link{
   font-weight: 900;
   color: var(--c-orange);
 }

 /* 모바일 표 숨김(필요한 것만 유지) */
 @media (max-width: 420px){
   .col-date, .col-view{ display:none; }
 }

/* ===== Branch (List Only) ===== */
.branch-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 1024px){
  .branch-grid{
    grid-template-columns: 1.1fr 1fr; /* 지도 조금 더 넓게 */
    align-items: start;
  }
}

/* Left: map */
.branch-map{ padding: 16px; }
.branch-map-head{ display:grid; gap:4px; margin-bottom: 10px; }
.branch-map-title{ font-weight:900; font-size:14px; color:#111; }
.branch-map-desc{ font-size:12px; color:#666; }

.branch-map-box{
  border: 1px solid #eee;
  border-radius: 16px;
  overflow:hidden;
  background:#fafafb;
}

.branch-map-img{
  width:100%;
  height:auto;
  display:block;
}

.branch-map-note{
  margin-top:10px;
  font-size:12px;
  color:#777;
  line-height:1.6;
}

/* Right: list */
.branch-list{ padding: 16px; }
.branch-list-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.branch-list-title{ font-weight:900; font-size:14px; color:#111; }
.branch-list-desc{ margin-top:4px; font-size:12px; color:#666; }

.branch-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.branch-card{
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 14px;
  background:#fff;
}

.branch-name{
  font-weight: 900;
  font-size: 14px;
  color:#111;
}

.branch-addr{
  margin-top: 6px;
  font-size: 13px;
  color:#555;
  line-height: 1.6;
}

.branch-meta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.branch-label{
  font-size: 12px;
  font-weight: 900;
  color:#777;
}

.branch-tel{
  font-size: 13px;
  font-weight: 900;
  color:#111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.branch-bottom{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e6e6e6;
}
.branch-bottom-title{
  font-weight: 900;
  color:#111;
  font-size: 13px;
}
.branch-bottom-desc{
  margin-top: 6px;
  color:#666;
  font-size: 13px;
  line-height: 1.6;
}

.branch-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.branch-map{
  border:1px solid #eee;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.branch-map img{
  width:100%;
  height:auto;
  display:block;
}

.map-hint{
  padding: 10px 12px;
  font-size: 13px;
  color:#666;
  border-top:1px solid #eee;
  background:#fafafb;
}

.branch-list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.branch-card{
  border:1px solid #eee;
  border-radius:16px;
  padding:14px;
  background:#fff;
}

.branch-name{ font-weight: 900; font-size: 15px; }
.branch-addr{ margin-top:6px; color:#555; font-size: 13px; line-height:1.6; }
.branch-meta{ margin-top:10px; display:flex; gap:8px; align-items:center; color:#777; font-size: 13px; }
.branch-meta a{ font-weight:900; text-decoration: underline; }

@media (min-width: 1024px){
  .branch-layout{
    grid-template-columns: 1.1fr 0.9fr; /* 왼쪽 지도 크게 */
    align-items:start;
    gap: 18px;
  }
}

/* =========================
   BRAND (/brand) - photo mood
   ========================= */

/* 로고 컬러(웜오렌지/옐로우/그린 기반) 톤 */
:root{
  --bn-warm: #F07A3B;   /* 웜 오렌지 */
  --bn-yellow:#FFD36A;  /* 옐로우 */
  --bn-green: #46A86B;  /* 그린 */
  --bn-apple: #8BC34A;  /* 애플그린 */
  --bn-lav: #B8A7FF;    /* 라벤더 */
  --bn-ink: #1B1B1B;
  --bn-muted:#6C6C6C;
  --bn-line:#EFEFEF;
  --bn-bg:#FBFBFC;
}

.brand2-hero{
  border: 1px solid var(--bn-line);
  border-radius: 20px;
  background: linear-gradient(135deg, #FFF6F0 0%, #FFFDF7 55%, #F3FFF6 100%);
  padding: 18px;
  margin-top: 10px;
}

.brand2-hero-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.brand2-pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #EEF7FF;
  color: #2C5AA0;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
}

.brand2-title{
  margin: 10px 0 8px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: var(--bn-ink);
}
.brand2-accent{ color: var(--bn-warm); }

.brand2-lead{
  margin: 0;
  color: #3E3E3E;
  font-size: 14px;
  line-height: 1.75;
}

.brand2-hero-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.brand2-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid transparent;
}

.brand2-btn-primary{
  background: var(--bn-warm);
  border-color: var(--bn-warm);
  color: #fff;
}

.brand2-btn-ghost{
  background: #fff;
  border-color: #E9E9EC;
  color: #222;
}

.brand2-chips{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.brand2-chip{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid #ECECEF;
  font-weight: 800;
  font-size: 13px;
  color: #333;
}

.brand2-hero-right{
  display: grid;
  gap: 12px;
}

.brand2-photo{
  border-radius: 18px;
  overflow: hidden;
  background: #F2F3F7;
  border: 1px solid #EEE;
}

.brand2-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand2-photo-hero{
  height: 220px;
}

.brand2-note{
  border: 1px solid #EEE;
  border-radius: 18px;
  background: rgba(255,255,255,0.8);
  padding: 14px;
}

.brand2-note-top{
  font-weight: 900;
  color: #444;
  margin-bottom: 8px;
}

.brand2-note-title{
  font-weight: 900;
  font-size: 16px;
  color: #222;
  line-height: 1.3;
}

.brand2-note-desc{
  margin: 8px 0 0;
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}

.brand2-dots{
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.brand2-dots span{
  width: 10px; height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: #E7E7EA;
}
.brand2-dots span:nth-child(1){ background: rgba(240,122,59,.35); }
.brand2-dots span:nth-child(2){ background: rgba(255,211,106,.45); }
.brand2-dots span:nth-child(3){ background: rgba(70,168,107,.35); }

.brand2-section{
  margin-top: 18px;
}

.brand2-section-head h2{
  margin: 0;
  font-size: 18px;
  color: #111;
}
.brand2-section-head p{
  margin: 6px 0 0;
  color: #666;
  font-size: 13px;
}

.brand2-grid3{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.brand2-card{
  border: 1px solid #EEE;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}

.brand2-photo-card{
  height: 170px;
}

.brand2-card-body{
  padding: 14px 14px 16px;
}

.brand2-card-body h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
  color: #111;
}
.brand2-card-body p{
  margin: 0;
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}

.brand2-principles{
  margin-top: 18px;
  border: 1px solid var(--bn-line);
  border-radius: 20px;
  padding: 16px;
  background: linear-gradient(180deg, #F7FFFB 0%, #FFFFFF 55%, #FFF8F2 100%);
}

.brand2-principles-head h2{
  margin: 0;
  font-size: 18px;
}
.brand2-principles-head p{
  margin: 6px 0 0;
  color: #666;
  font-size: 13px;
}

.brand2-grid2{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.brand2-mini{
  border: 1px solid #EEE;
  border-radius: 16px;
  background: rgba(255,255,255,0.85);
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.brand2-mini-icon{
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  flex: 0 0 auto;
}
.brand2-mini-icon.i1{ background: var(--bn-lav); }
.brand2-mini-icon.i2{ background: var(--bn-warm); }
.brand2-mini-icon.i3{ background: var(--bn-green); }
.brand2-mini-icon.i4{ background: #6C7A89; }

.brand2-mini-title{
  font-weight: 900;
  color: #111;
  margin-top: 2px;
}
.brand2-mini-desc{
  margin-top: 6px;
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}

.brand2-cta{
  margin-top: 18px;
  border: 1px solid #EEE;
  border-radius: 20px;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brand2-cta-left h2{
  margin: 0;
  font-size: 18px;
}
.brand2-cta-left p{
  margin: 6px 0 0;
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}

.brand2-cta-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (min-width: 768px){
  .brand2-hero{ padding: 22px; }
  .brand2-title{ font-size: 34px; }
  .brand2-hero-inner{ grid-template-columns: 1.1fr .9fr; gap: 18px; }
  .brand2-photo-hero{ height: 260px; }
  .brand2-grid3{ grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .brand2-grid2{ grid-template-columns: repeat(2, 1fr); }
  .brand2-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  }
  .brand2-cta{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.branch-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.branch-card{
  border:1px solid var(--c-line);
  border-radius: 18px;
  background:#fff;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}
.branch-card h3{ margin:0 0 6px; font-size: 16px; }
.branch-card p{ margin: 6px 0 0; color:#444; font-size: 13px; line-height: 1.6; }
.branch-card .muted{ color:#777; margin:0; }

@media (min-width: 768px){
  .branch-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* 1) 헤더 로고는 가로 로고: 크기 안정 (모바일/데스크 공통) */
.site-header .brand-logo{
  height: 54px;
  width:auto;
  display:block;
}

/* 2) 브랜드 페이지 내부 세로로고는 '섹션용'으로 크게 (헤더와 분리) */
.brand-logo-vertical{
  max-height: 150px;
  width:auto;
}

/* 3) 모바일에서 Hero 그리드를 세로 정렬 + 사진/로고 순서 조정 */
@media (max-width: 767px){
  .brand-hero-grid{
    grid-template-columns: 1fr;
  }

  /* 모바일에선 사진이 먼저 오고, 세로로고는 아래 '브랜드 마크'로 자연스럽게 */
  .brand-hero-right{
    order: -1;
  }

  .brand-hero-photoCard img{
    height: 220px;
  }

  .brand-mark{
    justify-content:flex-start;
  }
}

/* 4) 모바일 카드 사진 높이 너무 커지지 않게 */
@media (max-width: 420px){
  .photo-thumb img{ height: 160px; }
}

/* ===== Program Intro ===== */
.program-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.program-card{
  border: 1px solid var(--c-line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  display: grid;
  grid-template-columns: 1fr;
}

.program-media{
  position: relative;
  background: #f2f3f7;
}

.program-media img{
  width: 100%;
  height: 210px;
  object-fit: cover;
  display:block;
}

.program-tag{
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}

.tag-warm{ background: var(--c-warm); }
.tag-yellow{ background: var(--c-yellow); color:#2a2400; }
.tag-apple{ background: var(--c-apple); color:#0f2a12; }
.tag-violet{ background: var(--c-violet); }
.tag-lav{ background: var(--c-lav); color:#251a44; }

.program-body{
  padding: 14px 14px 16px;
  display: grid;
  gap: 8px;
}

.program-title{
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.2px;
}

.program-desc{
  margin: 0;
  color: #666;
  line-height: 1.8;
  font-size: 14px;
}

.program-points{
  margin: 0;
  padding-left: 18px;
  color: #444;
  line-height: 1.75;
  font-size: 13px;
}

@media (min-width: 768px){
  .program-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .program-media img{ height: 220px; }
}

@media (min-width: 1024px){
  /* 데스크탑에서 카드가 더 감성적으로 '가로형'으로 보이게 */
  .program-card{
    grid-template-columns: 0.95fr 1.05fr;
    align-items: stretch;
  }
  .program-media img{
    height: 100%;
    min-height: 240px;
  }
}

/* ===== Notice (Brand tone) ===== */
.notice-hero{
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 18px 16px;
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(243,108,61,.10), transparent 60%),
    radial-gradient(700px 220px at 90% 20%, rgba(79,174,110,.10), transparent 55%),
    linear-gradient(180deg, #fff 0%, #fffaf6 100%);
  margin: 6px 0 14px;
  display: grid;
  gap: 10px;
}

.notice-hero .kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  font-weight: 900;
  color: #5f4b3f;
  background: rgba(243,108,61,.10);
  border: 1px solid rgba(243,108,61,.18);
  padding: 6px 10px;
  border-radius: 999px;
  width: fit-content;
}

.notice-hero h2{
  margin:0;
  font-size: 20px;
  line-height:1.25;
  letter-spacing:-0.2px;
  color:#1f2430;
}

.notice-hero p{
  margin:0;
  color:#6b7280;
  font-size:14px;
  line-height:1.7;
}

/* 검색바: 브랜드 톤 */
.notice-search{
  display:flex;
  gap:10px;
  align-items:center;
  margin: 12px 0 14px;
}

.notice-search .search-wrap{
  flex:1;
  display:flex;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}

.notice-search input{
  flex:1;
  border:0;
  outline:0;
  font-size:14px;
  background: transparent;
}

.notice-search button{
  border: 1px solid rgba(243,108,61,.35);
  background: rgba(243,108,61,.12);
  color: #c94b21;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  cursor:pointer;
}

.notice-search button:hover{
  background: rgba(243,108,61,.18);
}

/* 리스트 컨테이너를 카드 느낌으로 */
.notice-board{
  border: 1px solid #eee;
  border-radius: 18px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 12px 30px rgba(16,24,40,0.06);
}

/* 기존 board-table을 톤만 살짝 조정 */
.notice-board .board-table thead th{
  background: #faf7f3;
  color:#5f4b3f;
}

.notice-board .board-table tbody tr:hover{
  background: #fffaf6;
}

.notice-board .col-title a{
  color:#1f2430;
}

.notice-board .col-title a:hover{
  color:#f36c3d;
}

/* 공지 뱃지: 브랜드 포인트 */
.notice-board .badge-pin{
  background:#f36c3d;
}

/* 고정 공지는 은은한 배경 */
.notice-board .is-pinned{
  background: #fff7f3;
}

/* 상세 헤더를 브랜드 카드처럼 */
.notice-card{
  border: 1px solid #eee;
  border-radius: 18px;
  background:#fff;
  overflow:hidden;
  box-shadow: 0 12px 30px rgba(16,24,40,0.06);
}

.notice-card-head{
  padding: 18px 16px;
  background:
    radial-gradient(600px 220px at 15% 0%, rgba(243,108,61,.10), transparent 60%),
    radial-gradient(600px 220px at 85% 15%, rgba(79,174,110,.10), transparent 55%),
    linear-gradient(180deg, #fff 0%, #fffaf6 100%);
  border-bottom: 1px solid #eee;
}

.notice-card-title{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.notice-card-title h2{
  margin:0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing:-0.2px;
}

.notice-chips{
  margin-top: 10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:#6b7280;
  font-size: 13px;
}

.notice-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #eee;
  background:#fff;
  font-weight: 800;
}

/* 본문: 브랜드 페이지 텍스트 톤과 통일 */
.notice-card-body{
  padding: 18px 16px;
  line-height: 1.85;
  color:#1f2430;
  font-size: 14px;
}

.notice-card-body img{
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid #eee;
}

.notice-card-actions{
  padding: 14px 16px 18px;
  border-top: 1px solid #eee;
  display:flex;
  justify-content:flex-end;
}

/* 목록 버튼: 브랜드 버튼과 맞추기 */
.btn-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #eee;
  background:#fff;
  font-weight: 900;
}

.btn-brand:hover{
  border-color: rgba(243,108,61,.35);
  background: rgba(243,108,61,.08);
}

/* 데스크탑에서 히어로/검색 정돈 */
@media (min-width: 768px){
  .notice-hero{
    padding: 22px 20px;
  }
  .notice-hero h2{ font-size: 26px; }
}

/* ===== Notice page layout align (brand with container) ===== */
.page .content{ padding-top: 6px; } /* 기존 있으면 유지 */

.notice-page{
  max-width: 1100px;      /* 브랜드 .container와 동일 */
  margin: 0 auto;
  padding: 0 16px 24px;   /* 좌우 여백 통일 */
}

/* 서브헤더 아래부터 시작 위치(세로 리듬) 통일 */
.notice-page > *:first-child{
  margin-top: 6px;
}

/* 브랜드 카드 리듬(라운드/그림자/간격) */
.notice-hero{ margin-top: 6px; }
.notice-board{ margin-top: 14px; }
.paging{ margin-top: 16px; }

/* 모바일에서 content 패딩이 너무 크면 균형 */
@media (max-width: 767px){
  .notice-page{ padding: 0 14px 22px; }
}

/* 히어로 크기 살짝 컴팩트하게 */
.notice-hero{ padding: 16px 16px; gap: 8px; }
.notice-hero h2{ font-size: 18px; }
@media (min-width: 768px){
  .notice-hero{ padding: 18px 18px; }
  .notice-hero h2{ font-size: 22px; }
}

/* ===== Brand frame (공지/갤러리/브랜드 소개 공통으로 쓰기 좋음) ===== */
.page--brand .brand-frame{
  padding-top: 18px;
  padding-bottom: 44px;
}

.brand-card{
  border: 1px solid rgba(30, 35, 41, .06);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow:
    0 18px 46px rgba(20, 25, 30, .06),
    0 2px 10px rgba(20, 25, 30, .04);
  backdrop-filter: blur(6px);
}

.brand-card__inner{
  padding: 18px 20px;
}

.brand-empty{
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(245, 246, 248, .8);
  border: 1px dashed rgba(30,35,41,.12);
  color: #6b7280;
  text-align: center;
}

/* 작은 감성 문장 */
.muted{ color:#7a8594; font-size: .95em; margin-left: 6px; }

/* 섹션 타이틀 톤 */
.brand-h2{
  margin: 18px 0 10px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* 본문 톤 */
.brand-prose{
  color: #2f343a;
  line-height: 1.8;
}

/* ===== Gallery list ===== */
.gallery-top{
  margin-bottom: 14px;
}

.gallery-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #2a2f35;
}

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 980px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .gallery-grid{ grid-template-columns: 1fr; }
}

.gallery-card{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(30,35,41,.06);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 40px rgba(20,25,30,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
  color: inherit;
}

.gallery-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 52px rgba(20,25,30,.10);
}

.gallery-card .thumb{
  position: relative;
  aspect-ratio: 16/10;
}

.gallery-card .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(70% 70% at 20% 15%, rgba(255,255,255,.10), transparent 60%),
              linear-gradient(180deg, transparent 55%, rgba(0,0,0,.10));
  pointer-events:none;
}

.gallery-card .card-body{
  padding: 14px 14px 16px;
}

.gallery-card .card-title{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.gallery-card .card-meta{
  font-size: 13px;
  color: #7a8594;
}

/* ===== Gallery detail ===== */
.brand-photoframe{
  margin-top: 14px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(30,35,41,.06);
  background: #fff;
  box-shadow: 0 18px 46px rgba(20,25,30,.08);
}

.brand-photoframe img{
  width: 100%;
  height: auto;
  display: block;
}

.gd-section{
  margin-top: 18px;
}

.gd-images--polaroid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 980px){
  .gd-images--polaroid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .gd-images--polaroid{ grid-template-columns: 1fr; }
}

.gd-figure{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(30,35,41,.06);
  background: rgba(255,255,255,.95);
  box-shadow: 0 14px 40px rgba(20,25,30,.06);
}

.gd-figure img{
  width: 100%;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* 하단 버튼 톤 */
.btn-back--brand{
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(30,35,41,.10);
  background: rgba(255,255,255,.92);
}
.paging--brand .page-btn{
  border-radius: 999px;
}

/* ===== Brand Frame ===== */
.page--brand .brand-frame{
  padding-top: 18px;
  padding-bottom: 44px;
}

/* ===== Brand Hero (Gallery) ===== */
.brand-hero{
  border: 1px solid rgba(30,35,41,.06);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,245,238,.85), rgba(250,252,255,.90));
  box-shadow: 0 18px 46px rgba(20,25,30,.06);
  overflow: hidden;
  margin-bottom: 16px;
}

.brand-hero__grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  padding: 20px;
  align-items: center;
}

@media (max-width: 980px){
  .brand-hero__grid{ grid-template-columns: 1fr; }
}

.kicker{
  display:inline-block;
  font-weight:700;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(30,35,41,.06);
  color:#3b424a;
}

.brand-hero__title{
  margin: 10px 0 8px;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.brand-hero__title .accent{
  color: #ff7a3d;
}

.brand-hero__desc{
  margin: 0 0 14px;
  color:#3a424b;
  line-height: 1.75;
}

.brand-hero__cta{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* 버튼이 이미 있으면 이건 생략 가능 */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: 10px 14px;
  background:#ff7a3d;
  color:#fff;
  border:1px solid rgba(0,0,0,.06);
  text-decoration:none;
  font-weight:700;
}
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,.85);
  color:#2b3137;
  border:1px solid rgba(30,35,41,.10);
  text-decoration:none;
  font-weight:700;
}

.brand-hero__chips{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}

.chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(30,35,41,.06);
  color:#4a5562;
}

/* 오른쪽 사진 프레임 */
.photo-frame{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(30,35,41,.06);
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 46px rgba(20,25,30,.08);
  aspect-ratio: 16 / 10;
}

.photo-frame img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.photo-fallback{
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  color:#6b7280;
  gap:8px;
}

.photo-glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(70% 60% at 25% 20%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,.10));
  pointer-events:none;
}

/* ===== Gallery grid (brand tuned) ===== */
.gallery-grid--brand{
  margin-top: 10px;
}

.gallery-card--brand{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(30,35,41,.06);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 40px rgba(20,25,30,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.gallery-card--brand:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 52px rgba(20,25,30,.10);
}

.thumb-label{
  position:absolute;
  left: 12px;
  bottom: 12px;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(30,35,41,.08);
  backdrop-filter: blur(6px);
}

.thumb-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#ff7a3d;
  box-shadow: 0 0 0 4px rgba(255,122,61,.18);
}

.thumb-label-text{
  font-size: 12px;
  font-weight: 700;
  color:#2b3137;
}

.card-meta .sep{
  margin: 0 6px;
  color:#c2c9d1;
}
.muted{ color:#7a8594; }

/* ===== Gallery Detail: Brand Tone ===== */

/* 상단 카드 */
.brand-hero-card{
  border: 1px solid #eee;
  background: #fff;
  border-radius: 18px;
  padding: 18px 16px;
  margin-top: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.05);
}
@media (min-width: 768px){
  .brand-hero-card{ padding: 22px 20px; }
}

.brand-hero-card__kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 180, 80, 0.16);
  border: 1px solid rgba(255, 180, 80, 0.28);
  color: #6B4F45;
  font-weight: 900;
  font-size: 12px;
}

.kicker-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff8a4a; /* 로고의 웜오렌지 느낌 */
}

.brand-hero-card__title{
  margin: 12px 0 10px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.2px;
}
@media (min-width: 768px){
  .brand-hero-card__title{ font-size: 28px; }
}

.brand-hero-card__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.meta-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #eee;
  font-size: 13px;
  color:#444;
}
.meta-label{ color:#777; font-weight:700; }

/* 대표 사진 프레임 */
.brand-photoframe{
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #eee;
  background: #f2f3f7;
  position: relative;
}
.brand-photoframe img{
  width:100%;
  height: 240px;
  object-fit: cover;
  display:block;
}
@media (min-width: 768px){
  .brand-photoframe img{ height: 420px; }
}
.brand-photo-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(255,180,80,0.16), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0));
}

/* 썸네일 없을 때 fallback */
.brand-photo-fallback{
  height: 240px;
  padding: 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  color:#fff;
  background: linear-gradient(135deg, #111 0%, #444 100%);
}
@media (min-width: 768px){
  .brand-photo-fallback{ height: 420px; }
}

/* 섹션 카드 */
.brand-section{
  margin-top: 16px;
  border: 1px solid #eee;
  border-radius: 18px;
  background: #fff;
  padding: 16px;
}
@media (min-width: 768px){
  .brand-section{ padding: 20px; }
}

.brand-section__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.brand-subcopy{
  margin:0;
  color:#777;
  font-size: 13px;
}

/* 사진 그리드(폴라로이드 결) */
.polaroid-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px){
  .polaroid-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .polaroid-grid{ grid-template-columns: repeat(3, 1fr); }
}

.polaroid{
  margin:0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid #eee;
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.07);
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease;
}
.polaroid img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}
@media (min-width: 768px){
  .polaroid img{ height: 240px; }
}
.polaroid:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
}

/* 하단 액션 */
.brand-actions{
  margin: 16px 0 6px;
  display:flex;
  justify-content:flex-end;
}
.btn-back--brand{
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  font-weight: 900;
}

/* branch hero 보강 */
.branch-hero .brand-hero-grid{ align-items: stretch; gap: 24px; }
.branch-left{ display:flex; flex-direction:column; justify-content:center; }

/* 칩 버튼화 */
.region-chips .chip{
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.7);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.region-chips .chip:hover{ transform: translateY(-1px); }
.region-chips .chip.is-active{
  background: rgba(255,126,64,0.12);
  border-color: rgba(255,126,64,0.35);
}

/* ✅ 포커스 카드 */
.region-focus-card{
  margin-top: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 14px 30px rgba(0,0,0,0.06);
}
.region-focus-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
}
.region-name{ font-size:18px; font-weight:900; }
.region-sub{ font-size:13px; font-weight:800; color:#777; }

.region-lines{ padding-top: 12px; display:flex; flex-direction:column; gap:10px; }
.region-lines .line{ display:flex; gap:10px; }
.region-lines .label{ width:44px; flex:0 0 44px; font-size:12px; font-weight:900; color:#888; }
.region-lines .value{ font-size:13px; font-weight:700; color:#333; line-height:1.4; }
.region-lines .link{ text-decoration:none; border-bottom:1px solid rgba(0,0,0,0.12); }

.region-cta{ margin-top: 12px; display:flex; gap:8px; flex-wrap:wrap; }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.85);
  font-weight: 900;
  text-decoration:none; color:#333;
}

.soft-note{
  margin-top: 6px;
  color:#777;
  font-size:13px;
  line-height:1.5;
}

/* 지도 카드 조금 더 존재감 */
.branch-mapcard img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 16px;
}

/* 아래 카드 하이라이트 */
.branch-card.is-active{
  border-color: rgba(255,126,64,0.35);
  box-shadow: 0 10px 24px rgba(255,126,64,0.12);
  transform: translateY(-1px);
}

/* 반응형: 모바일에서 지도 아래로 */
@media (max-width: 900px){
  .branch-hero .brand-hero-grid{ grid-template-columns: 1fr; }
  .region-focus-card{ order: 2; }
}

/* 지도 클릭 영역을 올리기 위한 래퍼 */
.map-wrap{
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.map-wrap img{
  display:block;
  width:100%;
  height:auto;
}

/* 투명 버튼(핫스팟) */
.map-hotspot{
  position:absolute;
  border:0;
  background: transparent;
  cursor:pointer;
  border-radius: 18px;
  outline: none;
}

/* hover 시만 아주 은은하게 */
.map-hotspot:hover{
  box-shadow: 0 0 0 2px rgba(255,126,64,0.25) inset;
  background: rgba(255,126,64,0.06);
}

/* ✅ 아래는 대략적인 위치 (top/left/width/height는 %로) */
/* 수도권 */
.hs-capital{
  top: 20%;
  left: 18%;
  width: 26%;
  height: 22%;
}
/* 충청권 */
.hs-chungcheong{
  top: 43%;
  left: 30%;
  width: 24%;
  height: 18%;
}
/* 전북권 */
.hs-jeonbuk{
  top: 58%;
  left: 24%;
  width: 24%;
  height: 17%;
}
/* 전남권 */
.hs-jeonnam{
  top: 72%;
  left: 12%;
  width: 30%;
  height: 20%;
}
/* 경북권 */
.hs-gyeongbuk{
  top: 40%;
  left: 56%;
  width: 34%;
  height: 26%;
}
/* 경남권 */
.hs-gyeongnam{
  top: 66%;
  left: 46%;
  width: 42%;
  height: 24%;
}

/* ===== Branch page polish (no interaction) ===== */
.brand-hero-photoCard{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
}

.brand-hero-photoCard img{
  width: 100%;
  height: auto;
  display: block;
}

.brand-noteCard{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
}

.brand-noteTitle{
  font-weight: 900;
  color: #222;
  margin-bottom: 6px;
}

.brand-noteDesc{
  font-size: 13px;
  line-height: 1.7;
  color: #555;
}

.map-caption{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}

.map-caption__title{
  font-weight: 900;
  font-size: 13px;
  color: #222;
  margin-bottom: 4px;
}

.map-caption__desc{
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

/* 데스크탑에서 지도 영역 조금 더 “차지”하게 */
@media (min-width: 1024px){
  .brand-hero-right{
    align-self: stretch;
  }
  .brand-hero-photoCard{
    height: 100%;
  }
  .brand-hero-photoCard img{
    height: 100%;
    object-fit: contain; /* 지도를 잘라먹지 않게 */
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;

  color: #6B5BFF; /* 톤 다운된 보라 */
  background: rgba(107, 91, 255, 0.12);

  border-radius: 999px;
  border: 1px solid rgba(107, 91, 255, 0.25);

  /* ❌ 장식 제거 */
  box-shadow: none;
  backdrop-filter: none;
}

/* Partner / Network 같은 상단 pill */
.pill {
  display: inline-flex;            /* ✅ 텍스트 길이만큼만 */
  align-items: center;
  justify-content: center;

  width: fit-content;              /* ✅ 내용만큼 */
  max-width: max-content;          /* ✅ 혹시 상속으로 늘어나는 것 방지 */
  white-space: nowrap;             /* ✅ 줄바꿈 방지 */

  padding: 8px 14px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;

  color: #6B5BFF;
  background: rgba(107, 91, 255, 0.12);
  border: 1px solid rgba(107, 91, 255, 0.28);

  /* ✅ 길게 퍼지는 효과 제거 */
  box-shadow: none;
}


/* ===== Page Rhythm ===== */
.page { padding-bottom: 64px; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Header ===== */
.page-head {
  padding: 36px 0 22px;
}
.page-kicker {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #e5e7f0;
  font-weight: 600;
}
.page-title {
  margin: 16px 0 10px;
  line-height: 1.15;
}
.page-desc {
  max-width: 640px;
  opacity: .85;
}

/* ===== Body ===== */
.page-body { padding-top: 16px; }
.page-block {
  display: grid;
  gap: 22px;
}

/* ===== Section Card ===== */
.section-card {
  background: #fff;
  border: 1px solid #ececf3;
  border-radius: 20px;
  padding: 22px;
}

/* ===== CTA ===== */
.page-foot { margin-top: 32px; }
.page-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-radius: 22px;
  padding: 20px 24px;
  border: 1px solid #ececf3;
  background: #fff;
}
.page-cta-actions { display: flex; gap: 12px; }

/* ===== Layout Skeleton (PC/Mobile responsive, consistent) ===== */
:root{
  --container: 1100px;
  --gutter: 16px;
  --header-h: 72px;
}

*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif; color:#111; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.skip{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{ left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background:#fff; border:1px solid #ddd; border-radius:12px; z-index:9999; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.site-main{
  padding: 18px 0 36px;
  min-height: calc(100vh - var(--header-h) - 120px); /* 푸터 높이 여유 */
}

/* ===== Header ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background:#fff;
  border-bottom: 1px solid #eee;
}

.header-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
  height: var(--header-h);
  display:flex;
  align-items:center;
  gap: 18px;
}

.brand{ display:flex; align-items:center; line-height:0; }
.brand-logo{ height:56px; width:auto; }

.menu-btn{
  margin-left:auto;
  border:1px solid #ddd;
  background:#fff;
  padding:8px 10px;
  border-radius:10px;
  font-size:18px;
  line-height:1;
}

.desktop-nav{ display:none; }
.header-links{ display:none; }

/* Mobile nav */
.mobile-nav{
  display:none;
  border-top:1px solid #eee;
  padding: 10px var(--gutter) 14px;
}
.mobile-nav.open{ display:grid; gap:10px; }

.mobile-parent{
  width:100%;
  padding:12px 10px;
  border-radius:12px;
  background:#f2f3f7;
  border:none;
  font-weight:800;
  text-align:left;
}
.mobile-parent::after{ content:"▾"; float:right; transition:transform .2s ease; }
.mobile-parent.open::after{ transform:rotate(180deg); }

.mobile-child{ display:none; padding: 6px 0 4px 10px; }
.mobile-child.open{ display:grid; gap:6px; }
.mobile-child a{ padding:10px; border-radius:10px; background:#fff; }

/* Desktop */
@media (min-width:1024px){
  .menu-btn{ display:none; }
  .mobile-nav{ display:none !important; }

  .desktop-nav{ display:block; flex:1; }
  .gnb{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 46px;
  }

  .gnb-link{
    background:none;
    border:none;
    padding:10px 6px;
    font:inherit;
    cursor:pointer;
    font-weight:900;
    color:#222;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    line-height:1;
  }
  .gnb-link:hover{ background:#f2f3f7; }

  .has-child{ position:relative; }
  .depth2{
    display:none;
    position:absolute;
    top: calc(100% + 10px);
    left:0;
    z-index:60;
    background:#fff;
    border:1px solid #eee;
    border-radius:14px;
    padding:8px;
    min-width:180px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
  }
  .has-child::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:100%;
    height:12px;
  }
  .has-child:hover .depth2,
  .has-child:focus-within .depth2{ display:block; }

  .depth2 li{ list-style:none; }
  .depth2 a{
    display:block;
    padding:10px 12px;
    border-radius:12px;
    white-space:nowrap;
  }
  .depth2 a:hover{ background:#f2f3f7; }
}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid #eee;
  padding: 22px 0;
  background:#fff;
}
.footer-inner{ text-align:center; }
.footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:13px;
  color:#555;
}
.footer-links .dot{ color:#bbb; }
.footer-info p{
  margin:10px 0 0;
  font-size:12px;
  color:#777;
}

/* =========================
   Branch page - Brand tone
   (main.css 맨 아래에 추가)
========================= */

/* 레이아웃 폭/높이 통일(페이지마다 미세한 높이차 방지) */
.page .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 14px;
}
@media (min-width: 768px) {
  .page .container { padding: 24px 16px; }
}

/* 브랜드 히어로 카드 */
.brand-hero-photo {
  border: 1px solid #eee;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  padding: 18px 16px;
}
@media (min-width: 768px){
  .brand-hero-photo { padding: 22px 20px; }
}

/* 히어로 내부 2컬럼 */
.brand-hero-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px){
  .brand-hero-grid{
    grid-template-columns: 1.05fr 0.95fr; /* 왼쪽 설명이 더 넓게 */
    align-items: center;
    gap: 18px;
  }
}

.brand-hero-left { min-width: 0; }
.brand-hero-right { min-width: 0; }

/* pill(Network) - 텍스트 길이만큼만 */
.pill{
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: #3b2e2a;
  background: #f7f4ef;
  border: 1px solid #eee;
}

/* 헤더 텍스트 */
.brand-hero-h1{
  margin: 10px 0 6px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.3px;
}
@media (min-width: 768px){
  .brand-hero-h1{ font-size: 30px; }
}

.brand-hero-p{
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.7;
}

/* 칩들 */
.brand-hero-chips{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #eee;
  font-size: 12px;
  font-weight: 900;
  color: #333;
}

/* 지도 카드 */
.brand-hero-photoCard{
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  padding: 10px;
}
.brand-hero-photoCard img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* 지도 밑 캡션 */
.brand-hero-caption{
  margin: 10px 0 0;
  color: #777;
  font-size: 12px;
  line-height: 1.6;
}

/* 섹션 타이틀(브랜드 공통 틀) */
.branch-section{
  margin-top: 16px;
}
.section-title{
  margin: 16px 0 10px;
}
.section-title h2{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}
.section-desc{
  margin: 6px 0 0;
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}

/* 지사 카드 그리드 */
.branch-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px){
  .branch-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 1024px){
  .branch-grid{ grid-template-columns: repeat(3, 1fr); }
}

.branch-card{
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
}
.branch-card h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
}
.branch-card p{
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
}
.branch-card .muted{
  margin-top: 2px;
  color: #777;
  font-size: 12px;
}

/* 링크/강조 텍스트 공통 */
.branch-card b{
  font-weight: 900;
  color: #111;
}

.brand-hero-photo--img{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 36px 34px;
  border: 1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,150,90,.16), transparent 55%),
    radial-gradient(900px 500px at 0% 100%, rgba(120,210,170,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88));
}

/* 이미지 레이어 */
.brand-hero-photo--img::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
  opacity: .20;                /* 사진은 은은하게 */
  transform: scale(1.02);
}

/* 화이트 블러/톤 보정 레이어 */
.brand-hero-photo--img::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.35) 100%);
}

/* 글자는 위로 */
.brand-hero-photo--img > *{
  position: relative;
  z-index: 1;
}

@media (max-width: 768px){
  .brand-hero-photo--img{ padding: 28px 22px; }
  .brand-hero-photo--img::after{
    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 60%, rgba(255,255,255,.55) 100%);
  }
}

.brand-hero-photo--img::before{
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  opacity: .2;
}

/* 사진 래퍼: 흰 배경/테두리/여백 제거 */
.brand-hero-photoCard {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 24px; /* 이미지 라운드와 동일하게 */
  overflow: hidden;    /* 라운드 밖 이미지 잘라주기 */
}

/* 사진 자체를 "프레임 없이" 꽉 차게 */
.brand-hero-photoCard img {
  width: 100%;
  height: 100%;
  max-height: 320px;       /* 필요 시 조정 */
  object-fit: cover;
  display: block;
  border-radius: 24px;     /* 라운드 */
}

.brand-hero-chips .chip {
  cursor: default !important;     /* 포인터 제거 */
  user-select: none;
  pointer-events: none;           /* 클릭/호버 이벤트 자체 차단 */

  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  color: rgba(17, 24, 39, 0.78) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* 혹시 기존에 hover 스타일이 있으면 완전히 무력화 */
.brand-hero-chips .chip:hover,
.brand-hero-chips .chip:active,
.brand-hero-chips .chip:focus {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(17, 24, 39, 0.12) !important;
  box-shadow: none !important;
  transform: none !important;
}

.map-frame{
  background: #fff;
  border-radius: 24px;
  padding: 18px;
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 18px 40px rgba(17,24,39,.06);
  overflow: visible;               /* ✅ 중요: hidden이면 잘릴 수 있음 */
}

.map-img{
  width: 100%;
  height: auto;                    /* ✅ 세로비율 유지 */
  display: block;
  object-fit: contain;             /* ✅ cover 금지: contain으로 */
  max-height: 320px;               /* 필요하면 조정 */
}

/* ✅ 히어로 내부 클릭 막는 투명 레이어 제거 */
.brand-hero-photo,
.brand-hero-grid{
  position: relative;
}

.branch-card.is-selected{
  border-color: rgba(255,120,60,.45);
  box-shadow: 0 18px 40px rgba(255,120,60,.14);
}

.branch-card.is-selected {
  border-color: rgba(255, 120, 60, 0.45);
  box-shadow: 0 16px 32px rgba(255, 120, 60, 0.15);
}

/* 혹시 히어로에 ::before/::after 오버레이가 있으면 클릭 무력화 */
.brand-hero-photo::before,
.brand-hero-photo::after{
  pointer-events: none;
}

/* ✅ 실제 클릭해야 하는 영역은 위로 */
.brand-hero-left{
  position: relative;
  z-index: 2;
}

/* ✅ 버튼도 확실히 클릭되게 */
.brand-hero-actions a{
  position: relative;
  z-index: 3;
}

/* ✅ 클릭 가능한 칩 */
.chip--btn{
  cursor: pointer;
  pointer-events: auto;
  user-select: none;

  border: 1px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.75);
  color: rgba(17,24,39,.85);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.chip--btn:hover{
  background: #fff;
  box-shadow: 0 10px 22px rgba(17,24,39,.10);
  transform: translateY(-1px);
}

.chip--btn.is-active{
  border-color: rgba(255,120,60,.45);
  box-shadow: 0 10px 22px rgba(255,120,60,.18);
}

/* 선택 카드 하이라이트 */
.branch-card.is-selected{
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.branch-card.is-selected{
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* ✅ branch 칩 클릭 막힘 방지 */
.page--branch .brand-hero-left{
  position: relative;
  z-index: 5;
}

.page--branch .brand-hero-right,
.page--branch .map-frame,
.page--branch .map-img{
  position: relative;
  z-index: 1;
}

/* 혹시 glow/overlay류가 클릭을 먹는다면 전부 무시 */
.page--branch .photo-glow,
.page--branch .thumb-overlay,
.page--branch .map-frame::before,
.page--branch .map-frame::after{
  pointer-events: none;
}

/* 칩 버튼 클릭 가능 보장 */
.page--branch .chip--btn{
  pointer-events: auto;
  cursor: pointer;
}

/* ===== Branch: chips look clickable + selected ===== */
.page--branch .brand-hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}

/* 버튼처럼 보이게 */
.page--branch .chip--btn{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.65);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.page--branch .chip--btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.9);
}

.page--branch .chip--btn:focus-visible{
  outline: 3px solid rgba(255, 170, 60, 0.35); /* 로고 웜톤 계열 */
  outline-offset: 2px;
}

/* 선택 상태 */
.page--branch .chip--btn.is-active{
  border-color: rgba(255, 170, 60, 0.55);
  background: rgba(255, 170, 60, 0.14);
  box-shadow: 0 12px 26px rgba(0,0,0,0.10);
}

/* ===== Branch: selected card highlight ===== */
.page--branch .branch-card{
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* 선택된 카드만 강조 */
.page--branch .branch-card.is-selected{
  border-color: rgba(255, 170, 60, 0.55);
  background: linear-gradient(180deg, rgba(255,170,60,0.08) 0%, rgba(255,255,255,1) 65%);
  box-shadow: 0 14px 28px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* ===== Region focus card: link처럼 보이지 않게 ===== */
.page--branch #regionTel,
.page--branch #regionEmail{
  color: inherit;
  text-decoration: none;
  cursor: default;
}

.page--branch .chip--btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  padding: 10px 16px;

  font-size: 13px;
  font-weight: 800;
  line-height: 1;

  cursor: pointer;              /* ✅ 포인터 */
  user-select: none;            /* ✅ 텍스트 선택 방지 */
  pointer-events: auto;         /* ✅ 클릭 보장 */

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.08s ease;
}

/* hover = 버튼처럼 */
.page--branch .chip--btn:hover {
  background: rgba(255,170,60,0.12);
  border-color: rgba(255,170,60,0.4);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* active(클릭 중) */
.page--branch .chip--btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12) inset;
}

/* 선택 상태 */
.page--branch .chip--btn.is-active {
  background: rgba(255,170,60,0.2);
  border-color: rgba(255,170,60,0.6);
  box-shadow: 0 10px 24px rgba(255,170,60,0.25);
}

/* 키보드 접근성 */
.page--branch .chip--btn:focus-visible {
  outline: 3px solid rgba(255,170,60,0.35);
  outline-offset: 2px;
}

.page--branch .region-focus-card {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 16px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.9),
    rgba(255,255,255,0.75)
  );

  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);

  cursor: default;   /* ❗ 버튼 아님 명확히 */
}

.page--branch .branch-card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 16px;

  background: #fff;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease;
}

/* hover = 카드 클릭 가능 느낌 */
.page--branch .branch-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.08);
}

/* 선택된 카드 */
.page--branch .branch-card.is-selected {
  border-color: rgba(255,170,60,0.6);
  background: rgba(255,170,60,0.08);
  box-shadow: 0 16px 34px rgba(255,170,60,0.18);
}

/* ===== Brand hero right (mobile empty fix) ===== */
.brand-hero-photoCard--soft{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

/* 흰 테두리 느낌 나면 border 제거 */
.brand-hero-photoImg{
  width: 100%;
  height: 280px;
  object-fit: cover;
  display:block;
}

/* 캡션 가독성용 오버레이 */
.brand-hero-photoOverlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 50%,
    rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}

.brand-hero-photoCaption{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color:#fff;
  display:grid;
  gap:6px;
}

.photo-pill{
  display:inline-flex;
  width: fit-content;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:-0.2px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.2);
}

.photo-title{
  font-size:16px;
  font-weight:900;
  letter-spacing:-0.3px;
  line-height:1.25;
}

.photo-desc{
  font-size:13px;
  opacity:0.95;
  line-height:1.5;
}

/* 작은 정보 배지 3개 */
.brand-hero-miniRow{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.miniStat{
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
}

.miniStat__k{
  font-size:12px;
  color:#777;
  font-weight:800;
}

.miniStat__v{
  margin-top:4px;
  font-size:14px;
  font-weight:900;
  color:#222;
}

/* 반응형: 데스크탑은 사진 조금 더 크게 */
@media (min-width: 1024px){
  .brand-hero-photoImg{ height: 360px; }
}

/* 기존 */
.brand-hero-photoCard--soft{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

/* 수정본 */
.brand-hero-photoCard--soft{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;   /* ✅ 회색 제거 */
}

.brand-hero-photoImg{
  width: 100%;
  height: 280px;
  object-fit: cover;
  display:block;
  background:#ddd;           /* 이미지 로딩 전 깜빡임 방지 */
}

/* 모바일 메뉴 깜빡임 완화 */
#mobileMenu {
  will-change: transform;
  backface-visibility: hidden;
}

/* HERO: 오른쪽 대표 이미지 프레임 */
.page--gallery .brand-hero__photo .photo-frame{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  /* 흰 테두리 느낌 있으면 제거 */
  border: 0 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.10);
}

/* HERO 이미지: 항상 프레임을 꽉 채움 */
.page--gallery .brand-hero__photo .photo-frame img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* HERO: 모바일에서는 높이 고정(보기 좋게) */
.page--gallery .brand-hero__photo .photo-frame{
  aspect-ratio: 4 / 3;          /* 기본 비율 */
}

/* PC에서는 좀 더 와이드하게 */
@media (min-width: 1024px){
  .page--gallery .brand-hero__photo .photo-frame{
    aspect-ratio: 16 / 10;
  }
}

/* 혹시 glow가 클릭/레이아웃 간섭하면 */
.page--gallery .photo-glow{
  pointer-events: none;
}

/* =========================
 * Gallery cards - thumbnail unify
 * ========================= */

.page--gallery .gallery-card--brand{
  overflow: hidden;
}

.page--gallery .gallery-card--brand .thumb{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

/* 썸네일 이미지 통일 */
.page--gallery .gallery-card--brand .thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 모바일: 카드 썸네일 높이 */
.page--gallery .gallery-card--brand .thumb{
  height: 210px;
  width: 100%;
}

/* 태블릿 */
@media (min-width: 768px){
  .page--gallery .gallery-card--brand .thumb{
    height: 220px;
  }
}

/* PC */
@media (min-width: 1024px){
  .page--gallery .gallery-card--brand .thumb{
    height: 240px;
    width: 100%;
  }
}

/* 오버레이는 클릭 방해 없게 */
.page--gallery .thumb-overlay,
.page--gallery .thumb-label{
  pointer-events: none;
}

/* 메타 줄(날짜)만 남기니 간격 정리 */
.page--gallery .card-meta{
  display: flex;
  gap: 8px;
  align-items: center;
  color: #777;
  font-size: 12px;
}

.page--gallery .photo-fallback{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px;
  color: #fff;
}

.page--gallery .gallery-card--brand{
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.8,.2,1),
              box-shadow .45s cubic-bezier(.2,.8,.2,1);
}

/* 살짝 뜨는 느낌 */
.page--gallery .gallery-card--brand:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

/* 썸네일 */
.page--gallery .gallery-card--brand .thumb{
  position: relative;
  overflow: hidden;
  background: #ececec;
}

/* 이미지에 필름 감성 */
.page--gallery .gallery-card--brand .thumb img{
  transition: transform .9s ease, filter .6s ease;
  filter: saturate(.95) contrast(.95);
}

/* hover 시 살짝 확대 + 색 살아남 */
.page--gallery .gallery-card--brand:hover .thumb img{
  transform: scale(1.05);
  filter: saturate(1) contrast(1);
}

/* 필름 질감 오버레이 */
.page--gallery .thumb-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.08) 70%,
      rgba(0,0,0,0.18) 100%
    );
  opacity: .65;
  transition: opacity .4s ease;
}

.page--gallery .gallery-card--brand:hover .thumb-overlay{
  opacity: .85;
}

.page--gallery .card-body{
  padding: 16px 16px 18px;
}

.page--gallery .card-title{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.2px;
  margin-bottom: 6px;
}

/* 날짜는 캡션처럼 */
.page--gallery .card-meta{
  font-size: 12px;
  color: #8a8a8a;
  letter-spacing: .2px;
}

.page--gallery .brand-hero__photo .photo-frame{
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 12px 32px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

@media (max-width: 767px){
  .page--gallery .gallery-card--brand{
    border-radius: 16px;
  }

  .page--gallery .card-title{
    font-size: 14px;
  }

  .page--gallery .gallery-card--brand:hover{
    transform: none; /* 모바일에서는 튀지 않게 */
  }
}

/* ============================= */
/* HERO IMAGE STABLE LAYOUT FIX */
/* ============================= */

.hero-frame {
  width: 100%;
  aspect-ratio: 16 / 9;   /* 모바일 안정 핵심 */
  overflow: hidden;
  border-radius: 24px;
}

.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-hero-photo {
  background: transparent;
  padding-bottom: 0;
}

.hero-frame {
  box-shadow: none;
}

@media (max-width: 768px) {
  .hero-frame {
    aspect-ratio: 4 / 3;   /* 모바일에 더 자연스러운 비율 */
  }
}

/* 히어로 이미지 프레임: 회색 바탕 제거 */
.page .brand-hero__photo .photo-frame,
.page .brand-hero-right .brand-hero-photoCard,
.page .gd-hero.brand-photoframe {
  background: transparent !important;
  border: 0 !important;          /* 흰 테두리도 같이 제거 가능 */
  box-shadow: none !important;
}

/* 이미지가 컨테이너를 꽉 채우도록 */
.photo-frame img,
.brand-hero-photoCard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 프레임 자체 높이(비율) 고정해서 회색 “면”이 튀는 느낌 줄이기 */
.photo-frame{
  aspect-ratio: 16 / 10; /* 너가 쓰는 히어로 비율에 맞춰 16/9, 3/2 등 조정 */
  overflow: hidden;
  border-radius: 18px;
}

/* 히어로 이미지는 로딩 연출 제거 */
.brand-hero__photo img,
.brand-hero-photoCard img {
  transition: none !important;
  animation: none !important;
}

/* ========================================= */
/* HERO STABILIZER PATCH (최하단에 추가) */
/* ========================================= */

/* 1. 회색 배경 완전 제거 */
.brand-hero-photo,
.brand-hero,
.brand-hero--gallery,
.photo-frame {
  background: transparent !important;
}

/* 2. 이미지 깜빡임 방지 */
.photo-frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

@media (max-width: 768px) {
  .photo-frame {
    aspect-ratio: 4 / 3;
  }
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 3. glow가 클릭 막는 문제 제거 */
.photo-glow,
.thumb-overlay,
.map-frame::before,
.map-frame::after {
  pointer-events: none !important;
}

.brand-hero-chips .chip--btn {
  cursor: pointer;
}

.photo-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 🔥 히어로 이미지 영역 공간 선점 */
.brand-hero-photoCard {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* ⭐ 핵심 */
  overflow: hidden;
  border-radius: 24px;
}

/* 이미지 안정화 */
.brand-hero-photoCard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 오버레이 */
.brand-hero-photoOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.1) 40%,
    rgba(0,0,0,0)
  );
  pointer-events: none;
}

@media (max-width: 768px) {
  .brand-hero-photoCard {
    aspect-ratio: 4 / 3;
  }
}

/* ========================================
   Program Hero
======================================== */

.brand-hero-photo {
  padding: 100px 0 80px;
}

.brand-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

.brand-hero-left {
  max-width: 560px;
}

.brand-hero-h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 20px 0;
}

.brand-hero-p {
  font-size: 17px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 28px;
}

.accent {
  color: #7C5CFC; /* 브랜드 포인트 컬러 */
}

.brand-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 999px;
  background: #f5f3ff;
  color: #5b4cc4;
  font-weight: 500;

  /* ❌ 버튼 느낌 제거 */
  border: none;
  cursor: default;
}

.brand-hero-photoCard {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* ⭐ 핵심 */
  overflow: hidden;
  border-radius: 24px;
}

.brand-hero-photoCard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {

  .brand-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .brand-hero-left {
    max-width: 100%;
  }

  .brand-hero-photoCard {
    aspect-ratio: 4 / 3;
  }

  .brand-hero-photoCard img {
    object-position: center;
  }
}

.brand-hero-photoCard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0)
  );
  pointer-events: none;
}

/* 공통 이미지 프레임 (모든 페이지에서 재사용) */
.media-frame{
  width:100%;
  aspect-ratio: 16 / 9;   /* 기본 */
  overflow:hidden;
  border-radius: 18px;
}

.media-frame > img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* 모든 이미지가 레이아웃 흔들지 않게 */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* 히어로/카드 등에서 공통 프레임 */
.media-frame{
  width:100%;
  overflow:hidden;
  border-radius: 18px;
}

/* 히어로는 16:9, 모바일은 4:3 */
.media-frame.is-hero{ aspect-ratio: 16 / 9; }
@media (max-width:768px){
  .media-frame.is-hero{ aspect-ratio: 4 / 3; }
}

.media-frame > img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================
   PROGRAM HERO
========================= */

.program-hero {
  padding: 40px 0 24px;
}

.program-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;   /* stretch 금지 */
}

.program-hero-left {
  max-width: 560px;
}

.program-hero-title {
  margin: 16px 0 12px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.program-hero-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #555;
}

.program-hero-right {
  min-height: auto !important;  /* 기존 충돌 제거 */
}

/* 🔥 이미지 안정화 핵심 */
.program-media {
  width: 100%;
  height: 280px;
  aspect-ratio: 16 / 9;   /* 레이아웃 고정 */
  overflow: hidden;
  border-radius: 20px;
}

.program-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px){

  .program-hero-grid{
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
  }

  .program-hero-title{
    font-size: 42px;
  }

}

/* =========================
   PROGRAM HIGHLIGHT
========================= */

.program-highlight {
  padding: 28px 0 60px;
}

.program-highlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.program-item {
  padding: 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 12px 28px rgba(0,0,0,0.04);
  transition: transform .2s ease, box-shadow .2s ease;
}

.program-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.program-item-title {
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 6px;
}

.program-item-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

@media (min-width: 768px){
  .program-highlight-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px){
  .program-highlight-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px){
  .program-highlight-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

.program-item-desc{
  font-size: 13px;
  line-height: 1.5;
  color: #666;

  display: -webkit-box;
  -webkit-line-clamp: 2;     /* 최대 2줄 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page--program .program-highlight-grid{
  grid-template-columns: repeat(3, 1fr) !important;
}

/* =========================================================
   STRUCTURE FIX — Page scoped overrides (붙여넣기 전용)
   main.css "맨 아래"에 추가
   ========================================================= */

/* 0) 공통: hero 레이아웃 안정화 (이미지 로딩 시 높이 점프 방지) */
.media-frame{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;         /* ✅ 회색 바탕 제거 */
}

/* ✅ 핵심: 비율을 고정하면 “회색이 먼저 보였다가 늘어나는” 현상이 사라짐 */
.media-frame--hero{
  aspect-ratio: 16 / 10;           /* PC 기본 */
}
@media (max-width: 767px){
  .media-frame--hero{
    aspect-ratio: 4 / 3;           /* 모바일에서 더 자연스러운 비율 */
  }
}

.media-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;         /* ✅ 회색 보이는 느낌 제거 */
}

/* 오버레이/캡션(선택) */
.media-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.20) 55%,
    rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.media-caption{
  position:absolute;
  left: 14px; right: 14px; bottom: 14px;
  color:#fff;
  display:grid;
  gap:6px;
}
.media-pill{
  display:inline-flex;
  width: fit-content;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
}
.media-title{ font-size:16px; font-weight:900; line-height:1.25; letter-spacing:-0.3px; }
.media-desc{ font-size:13px; opacity:.95; line-height:1.5; }

/* 1) hero grid: 페이지 공통 구조를 “예측 가능”하게 고정 */
.page--brand .brand-hero-grid,
.page--program .brand-hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 1024px){
  .page--brand .brand-hero-grid,
  .page--program .brand-hero-grid{
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 18px;
  }
}

/* ✅ 문제의 원흉: 전역 .brand-hero-right min-height 같은 것들 무력화(페이지 스코프) */
.page--brand .brand-hero-right,
.page--program .brand-hero-right{
  min-height: auto !important;     /* ✅ 여기서 끊김/간격 과다/회색 면적 확장 방지 */
}

/* 2) 브랜드 소개: hero 이미지 + 아래 미니 카드 간격 (모바일에서 과한 간격 줄이기) */
.page--brand .hero-miniRow{
  margin-top: 10px;                /* ✅ 기존이 크면 여기로 통일 */
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.page--brand .miniStat{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
}
.page--brand .miniStat__k{ font-size:12px; color:#777; font-weight:800; }
.page--brand .miniStat__v{ margin-top:4px; font-size:14px; font-weight:900; color:#222; }

/* 모바일에서 “히어로 이미지와 아래 3개” 간격 더 타이트하게 */
@media (max-width: 767px){
  .page--brand .hero-miniRow{ margin-top: 8px; gap: 8px; }
}

/* 3) 칩: 버튼처럼 보이지 않게(브랜드/프로그램 공통) */
.page--brand .brand-hero-chips .chip,
.page--program .brand-hero-chips.chips--soft .chip{
  cursor: default;
  user-select:none;
  pointer-events:none;             /* ✅ 클릭 요소처럼 느껴지지 않게 */

  border: 1px solid rgba(17,24,39,0.10);
  background: rgba(255,255,255,0.55);
  color: rgba(17,24,39,0.75);
  box-shadow: none;
  transform: none;
}

/* 4) 칩 줄 바꿈/PC에서 깨짐 방지(텍스트 길어져도 줄바꿈/높이 균일) */
.page--program .brand-hero-chips.chips--soft{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.page--program .brand-hero-chips.chips--soft .chip{
  padding: 8px 12px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.05;
  white-space: nowrap;             /* ✅ “아래로 길게” 깨지는 현상 방지 */
}

/* 5) hero 카드 자체 여백(모바일에서 간격 과다 방지) */
.page--brand .brand-hero-photo,
.page--program .brand-hero-photo{
  padding: 18px 16px;
}
@media (max-width: 767px){
  .page--brand .brand-hero-photo,
  .page--program .brand-hero-photo{
    padding: 16px 14px;
  }
}

/* ===== Brand Photo Tone (logo color: warm orange / yellow / green) ===== */
:root{
  --c-ink:#1b1b1b;
  --c-muted:#5b5b5b;
  --c-line:#ececec;

  --c-warm:#F06A3A;     /* 웜오렌지 */
  --c-yellow:#F2C94C;   /* 옐로우 */
  --c-green:#2E9B4F;    /* 그린 */
  --c-apple:#7ED957;    /* 애플그린 */
  --c-lav:#C8B6FF;      /* 라벤더 */
  --c-violet:#6C63FF;   /* 블루바이올렛(포인트용) */

  --r-16:16px;
  --shadow: 0 18px 50px rgba(0,0,0,.08);
}

.brand-hero-photo{
  border:1px solid var(--c-line);
  border-radius: 22px;
  background:
    radial-gradient(900px 260px at 10% 10%, rgba(240,106,58,.10), transparent 60%),
    radial-gradient(900px 260px at 60% 30%, rgba(242,201,76,.12), transparent 60%),
    radial-gradient(900px 260px at 40% 90%, rgba(46,155,79,.10), transparent 60%),
    #fff;
  padding: 18px;
  margin-top: 10px;
  margin-bottom: 14px;
}

.brand-hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(108,99,255,.10);
  color: var(--c-violet);
  font-weight: 900;
  font-size: 13px;
}

.brand-hero-h1{
  margin: 10px 0 8px;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.3px;
  color: var(--c-ink);
}
.brand-hero-h1 .accent{ color: var(--c-warm); }

.brand-hero-p{
  margin:0;
  color: var(--c-muted);
  line-height: 1.8;
  font-size: 14px;
}

.brand-hero-actions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--c-warm);
  background: var(--c-warm);
  color:#fff;
  font-weight: 900;
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background:#fff;
  font-weight: 900;
}

.brand-hero-chips{
  margin-top: 12px;
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid var(--c-line);
  color:#444;
  font-weight: 800;
  font-size: 13px;
}

.brand-hero-right{
  display:grid;
  gap: 12px;
}

.brand-mark{
  border: 1px solid var(--c-line);
  border-radius: 18px;
  background:#fff;
  padding: 12px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.brand-logo-vertical{
  max-height: 140px;
  width:auto;
  display:block;
}

.brand-hero-photoCard{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow);
  background:#f6f7fb;
}
.brand-hero-photoCard img{
  width:100%;
  height: auto;
  object-fit: cover;
  display:block;
}

.brand-gallery{ margin-top: 18px; }
.section-title h2{ margin:0; font-size: 20px; letter-spacing:-.2px; }
.section-title p{ margin:6px 0 0; color:#666; }

.photo-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.photo-card{
  border: 1px solid var(--c-line);
  border-radius: 18px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.photo-thumb img{
  width:100%;
  height: 180px;
  object-fit: cover;
  display:block;
}
.photo-body{ padding: 14px; }
.photo-body h3{ margin:0 0 6px; font-size: 16px; }
.photo-body p{ margin:0; color:#666; line-height: 1.7; font-size: 13px; }

.brand-story{ margin-top: 18px; }
.story-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items:start;
}
.story-left{
  border:1px solid var(--c-line);
  border-radius: 18px;
  background:#fff;
  padding: 16px;
}
.story-left h2{ margin:0 0 8px; font-size: 22px; }
.story-left p{ margin:0; color:#666; line-height:1.8; }

.story-card{
  border:1px solid var(--c-line);
  border-radius: 18px;
  background:
    radial-gradient(700px 240px at 10% 30%, rgba(242,201,76,.16), transparent 60%),
    radial-gradient(700px 240px at 70% 10%, rgba(46,155,79,.10), transparent 60%),
    #fff;
  padding: 16px;
}
.story-card h3{ margin:0 0 10px; font-size: 16px; }
.story-list{ margin:0; padding-left: 18px; color:#444; line-height:1.8; }
.story-list b{ color:#222; }

.brand-bottom{ margin: 18px 0 6px; }
.brand-bottom-card{
  border:1px solid var(--c-line);
  border-radius: 18px;
  background:#fff;
  padding: 16px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.brand-bottom-title{ font-weight: 900; color:#222; }
.brand-bottom-desc{ margin-top: 6px; color:#666; font-size: 13px; line-height:1.6; }
.brand-bottom-actions{ display:flex; gap:10px; flex-wrap: wrap; }

@media (min-width: 768px){
  .brand-hero-grid{
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    align-items: center;
  }
  .brand-hero-photoCard img{ height: auto; }
  .photo-grid{ grid-template-columns: repeat(3, 1fr); }
  .photo-thumb img{ height: 170px; }
  .story-grid{ grid-template-columns: 1fr 1fr; }
  .brand-hero-h1{ font-size: 34px; }
}

/* ✅ 칩(권역) 버튼은 무조건 클릭 커서 */
.page--branch #branchChips .chip--btn,
.page--branch #branchChips .chip--btn * {
  cursor: pointer !important;
}

/* ✅ 혹시 chips 래퍼나 주변에 overlay가 커서를 먹으면 방지 */
.page--branch #branchChips {
  position: relative;
  z-index: 10;
}

/* ✅ chips 주변에 깔린 장식/오버레이는 커서/클릭을 먹지 못하게 */
.page--branch .photo-glow,
.page--branch .thumb-overlay,
.page--branch .map-frame::before,
.page--branch .map-frame::after {
  pointer-events: none !important;
}

/* 기존 */
.brand-hero-photoCard--soft{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

/* 수정본 */
.brand-hero-photoCard--soft{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;   /* ✅ 회색 제거 */
}

.brand-hero-photoImg{
  width: 100%;
  height: 280px;
  object-fit: cover;
  display:block;
  background:#ddd;           /* 이미지 로딩 전 깜빡임 방지 */
}

/* ✅ 모바일 히어로 이미지 하단 회색/그라데이션 제거 */
.brand-hero-photo .photo-frame,
.brand-hero-photo .brand-hero-photoCard,
.brand-hero-photo .hero-media,
.brand-hero-photo .hero-photo {
  background: transparent !important;
}

/* 이미지가 빈공간 없이 채워지게 */
.brand-hero-photo .photo-frame img,
.brand-hero-photo .brand-hero-photoCard img,
.brand-hero-photo .hero-media img,
.brand-hero-photo .hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 혹시 오버레이가 회색으로 보이면 완화/제거 */
.brand-hero-photo .thumb-overlay,
.brand-hero-photo .photo-glow,
.brand-hero-photo .hero-overlay {
  opacity: 0.0 !important; /* 필요하면 0.08 정도로만 */
}

/* 이미지 영역 자체에 그림자/테두리로 떠 보이게만 */
.brand-hero-photo .photo-frame,
.brand-hero-photo .brand-hero-photoCard {
  border: 0 !important;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.10);
  overflow: hidden;
  border-radius: 22px;
}

/* ✅ 칩을 버튼이 아니라 '태그' 느낌으로 */
.brand-hero-chips,
.brand-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* 기존 .chip이 버튼같으면 완화 */
.chip {
  border: 1px solid rgba(17, 24, 39, 0.08);  /* 아주 옅게 */
  background: rgba(255, 255, 255, 0.55);     /* 살짝만 */
  box-shadow: none !important;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: rgba(17, 24, 39, 0.75);
  cursor: default;               /* ✅ 손가락 X */
  user-select: none;
}

/* hover로 버튼처럼 보이는 효과 제거 */
.chip:hover {
  transform: none !important;
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(17, 24, 39, 0.08);
}

/* ✅ 3개 요약 카드(운영 권역/대상/형태) 정렬 고정 */
.hero-stats,
.brand-stats,
.summary-triples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 16px 0 10px;
}

/* 모바일에서는 1줄 유지(너 캡쳐처럼) */
@media (max-width: 520px) {
  .hero-stats,
  .brand-stats,
  .summary-triples {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}

.hero-stat,
.brand-stat,
.summary-triples > div,
.hero-stats > div {
  text-align: center;
  padding: 14px 10px;
  border-radius: 16px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.70);
}

/* 라벨/값 중앙 정렬 확실히 */
.hero-stat .label,
.brand-stat .label {
  display: block;
  font-size: 13px;
  color: rgba(17, 24, 39, 0.55);
  font-weight: 600;
  margin-bottom: 6px;
}

.hero-stat .value,
.brand-stat .value {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: rgba(17, 24, 39, 0.92);
  line-height: 1.2;
}

/* CTA 버튼 영역 */
.brand-hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* 설명 태그 영역 */
.brand-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* 버튼과 완전히 다른 인상 */
.brand-hero-tags .tag {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(17, 24, 39, 0.55);
  cursor: default;      /* 🔥 핵심 */
  pointer-events: none; /* 아예 인터랙션 차단 */
}

/* • 구분자로 문장처럼 보이게 해도 좋음 */
.brand-hero-tags .tag::before {
  content: "• ";
  color: rgba(17, 24, 39, 0.35);
}

/* ✅ (BRAND) 모바일: 히어로 이미지 ↔ 3칩 간격 줄이기 (강제 적용) */
@media (max-width: 767px){
  .brand-hero-photo .brand-hero-right{
    display: grid !important;
    gap: 10px !important;           /* 전체 간격 줄임 */
  }

  .brand-hero-photo .brand-hero-miniRow{
    margin-top: 6px !important;     /* 이미지 아래 여백 줄임 */
    gap: 8px !important;            /* 3칩 사이 간격도 줄임 */
  }

  .brand-hero-photo .miniStat{
    padding: 8px 10px !important;   /* 칩 박스도 컴팩트 */
    border-radius: 12px !important;
  }
  .brand-hero-photo .miniStat__k{ font-size: 11px !important; }
  .brand-hero-photo .miniStat__v{ font-size: 13px !important; }
}

/* ✅ 모바일: brand hero 오른쪽(이미지 카드 + 3칩) 간격 컴팩트 */
@media (max-width: 767px){

  /* 오른쪽 컬럼 자체를 grid로 만들고 gap으로 간격 제어 */
  .brand-hero-photo > .brand-hero-grid > .brand-hero-right{
    display: grid !important;
    gap: 10px !important;            /* ✅ 이미지 ↔ 3칩 간격 */
  }

  /* 이미지 카드 아래쪽 여백이 커서 벌어지는 경우가 많음 */
  .brand-hero-photo > .brand-hero-grid > .brand-hero-right > .brand-hero-photoCard{
    margin: 0 !important;
  }

  /* 3칩(미니 스탯) 영역 위 여백 줄이기 */
  .brand-hero-photo > .brand-hero-grid > .brand-hero-right > .brand-hero-miniRow{
    margin-top: 4px !important;
    gap: 8px !important;
  }

  /* 칩 카드 자체도 조금 컴팩트하게 */
  .brand-hero-photo > .brand-hero-grid > .brand-hero-right > .brand-hero-miniRow .miniStat{
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }
  .brand-hero-photo > .brand-hero-grid > .brand-hero-right > .brand-hero-miniRow .miniStat__k{
    font-size: 11px !important;
  }
  .brand-hero-photo > .brand-hero-grid > .brand-hero-right > .brand-hero-miniRow .miniStat__v{
    margin-top: 3px !important;
    font-size: 13px !important;
  }
}

/* ✅ 모바일: 히어로 이미지 레이아웃 점프(끊김) 방지 */
@media (max-width: 767px){
  .brand-hero-photo > .brand-hero-grid > .brand-hero-right > .brand-hero-photoCard{
    overflow: hidden;
    border-radius: 18px;
  }

  /* 이미지가 로딩되기 전에도 공간을 확보 */
  .brand-hero-photo > .brand-hero-grid > .brand-hero-right > .brand-hero-photoCard img{
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;     /* ✅ 모바일에서 안정적인 비율 */
    object-fit: cover;
    display: block;
  }
}

/* ✅ 모바일에서 hero 오른쪽 최소높이 제거 */
@media (max-width: 767px){
  .brand-hero-photo .brand-hero-right{
    min-height: auto !important;
  }
}

@media (max-width: 767px){

  .brand-hero-photo .brand-hero-right{
    min-height: auto !important;
    display: block;
  }

  .brand-hero-photo .brand-hero-photoCard{
    margin-bottom: 8px;
  }

  .brand-hero-photo .brand-hero-miniRow{
    margin-top: 6px;
  }

}

/* 프로그램 페이지 전용 soft 칩 */
.brand-hero-chips--soft{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 클릭 느낌 제거 */
.chip--soft{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 500;

  background: #f6f2ff;
  color: #6d5bd0;

  border: 1px solid #e4dcff;

  cursor: default;
  pointer-events: none;

  transition: none;
}

/* hover 제거 */
.chip--soft:hover{
  background: #f6f2ff;
  transform: none;
  box-shadow: none;
}

.chip--soft{
  background: transparent;
  border: none;
  color: #6d5bd0;
  font-weight: 600;
  padding: 0;
}

.chip--soft{
  background: transparent;
  border: none;
  color: #6d5bd0;
  font-weight: 600;
  padding: 0;
}

.program-highlight{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.program-highlight-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: #faf9ff;
  border: 1px solid #ece8ff;
  transition: all 0.25s ease;
}

.program-highlight-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

.ph-icon{
  font-size: 20px;
  flex-shrink: 0;
}

.ph-title{
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  color: #222;
}

.ph-desc{
  font-size: 13px;
  color: #666;
}

/* 반응형 */
@media (max-width: 1024px){
  .program-highlight{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .program-highlight{
    grid-template-columns: 1fr;
  }
}

.brand-hero-grid {
    align-items: start !important;
}

.brand-hero-right {
    min-height: auto !important;
}

.brand-hero-photoCard {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.brand-hero-photoCard img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

@media (min-width: 1024px){
  .brand-hero-grid{
      grid-template-columns: 1.1fr 0.9fr;
      align-items: center;
  }

  .brand-hero-right{
      display: flex;
      align-items: center;
  }
}

/* =========================================
   Recruit Page
========================================= */

.page--recruit .recruit-cta-group{
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.recruit-cta{
  display: block;
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  text-decoration: none;
  transition: all .25s ease;
  cursor: pointer;
}

.recruit-cta:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.recruit-cta--primary{
  background: linear-gradient(135deg,#6B4EFF,#8E77FF);
  color: #fff;
  border: none;
}

.recruit-features{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #555;
  font-size: 14px;
}

.feature-item{
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6B4EFF;
}

.board-table--brand{
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.board-link{
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease;
}

.board-link:hover{
  color: #6B4EFF;
}

.board-empty{
  text-align:center;
  padding: 40px 0;
  color: #888;
}

/* === Hero background 완전 제거 === */
.page--recruit .brand-hero-right,
.page--recruit .brand-hero-photoCard,
.page--recruit .media-frame{
  background: transparent !important;
}

.page--recruit .media-frame{
  padding: 0 !important;
  min-height: unset !important;
  border-radius: 20px;
  overflow: hidden;
}

.page--recruit .media-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page--recruit .brand-hero-right{
  min-height: auto !important;
}

.page--recruit .brand-hero-right{
  min-height: auto !important;
  background: transparent !important;
}

.page--recruit .media-frame{
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden;
}

.page--recruit .media-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================
   HERO / MEDIA FRAME: wide-screen gray flash fix
   - 화면 폭이 커질 때 나타나는 회색 배경 제거
   - 이미지가 프레임을 항상 꽉 채우게 강제
   ========================================= */

/* 1) 히어로 우측/프레임의 회색 배경 원천 제거 */
.brand-hero-right,
.brand-hero-photoCard,
.media-frame,
.photo-frame,
.hero-frame{
  background: transparent !important;
}

/* 2) "프레임이 이미지보다 커지는" 원인(최소 높이/고정 높이) 제거 */
.brand-hero-right{
  min-height: auto !important;
  height: auto !important;
}

/* 3) 프레임 자체는 '비율 유지 박스'로 만들고, 안의 이미지는 100% 채우기 */
.brand-hero-photoCard,
.media-frame,
.photo-frame,
.hero-frame{
  position: relative;
  overflow: hidden;
  border-radius: 20px;   /* 기존 톤 유지 */
}

/* ⚠️ 핵심: 프레임이 커질 때 이미지가 같이 커지게 */
.brand-hero-photoCard > img,
.media-frame > img,
.photo-frame > img,
.hero-frame > img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
}

/* 4) 혹시 aspect-ratio를 쓰는 프레임이 있으면 "이미지가 100% 채우는 구조"로 통일 */
.brand-hero-photoCard,
.media-frame{
  aspect-ratio: 16 / 10;   /* 기본(데스크탑) */
}

/* 모바일에서는 조금 더 자연스러운 비율 */
@media (max-width: 767px){
  .brand-hero-photoCard,
  .media-frame{
    aspect-ratio: 4 / 3;
  }
}

/* 5) pseudo overlay가 배경처럼 보이는 경우도 있어서 같이 제거 */
.brand-hero-photoCard::before,
.brand-hero-photoCard::after,
.media-frame::before,
.media-frame::after,
.photo-frame::before,
.photo-frame::after{
  background: transparent !important;
}

/* 6) 로딩 중 깜빡임(회색->이미지) 완화: 브라우저가 레이아웃을 먼저 잡게 */
.brand-hero-photoCard img,
.media-frame img{
  content-visibility: auto;
}

.brand-hero-photo {
  background: #ffffff !important;
}

.brand-hero-photo {
  padding-bottom: 0 !important;
}

.brand-hero-grid {
  align-items: stretch;
}

.page .brand-hero-photo {
  background: #fff !important;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 2;
}

.page--program .brand-hero-photo {
  padding-bottom: 20px !important;
  margin-bottom: 24px !important;
}

.page--recruit .brand-hero-photo {
  padding-bottom: 20px !important;
  margin-bottom: 24px !important;
}

.page--branch .brand-hero-photo {
  padding-bottom: 20px !important;
  margin-bottom: 24px !important;
}

.page .brand-gallery {
  position: relative;
  z-index: 1;
}

/* ===== HERO LAYOUT (Desktop) ===== */
.brand-hero-photo{
  border-radius: 26px;
  padding: 34px 34px;
}

.brand-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;   /* ✅ 중앙축 맞추기 */
}

/* 왼쪽 텍스트 폭이 너무 넓게 퍼지면 읽기 힘듦 */
.brand-hero-left{
  max-width: 640px;
}

/* CTA와 설명(태그) 분리 */
.brand-hero-actions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand-hero-tags,
.brand-hero-chips{ /* 기존 클래스 유지한다면 */
  margin-top: 14px;        /* ✅ 버튼과 거리 */
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(17,24,39,.55);
  font-weight: 600;
}

/* ✅ 태그는 클릭요소처럼 보이지 않게 */
.brand-hero-chips .chip{
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: default;
}

.brand-hero-chips .chip::before{
  content:"• ";
  color: rgba(17,24,39,.35);
}

/* ===== HERO RIGHT: photo + stats 묶기 ===== */
.hero-media{
  display: grid;
  gap: 1px;
}

.hero-photo .photo-frame{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

/* 스펙 카드: 이미지 아래 가로 3개 */
.hero-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hero-stats .stat{
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  padding: 12px 12px;
  text-align: center;        /* ✅ 가운데 정렬 */
}

.hero-stats .stat-k{
  font-size: 12px;
  color: rgba(17,24,39,.55);
  font-weight: 700;
  letter-spacing: -.2px;
}

.hero-stats .stat-v{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 800;
  color: rgba(17,24,39,.92);
}

/* ===== Responsive (Tablet/Mobile) ===== */
@media (max-width: 1023px){
  .brand-hero-grid{
    grid-template-columns: 1fr;
  }
  .brand-hero-left{
    max-width: none;
  }
  .hero-stats{
    grid-template-columns: 1fr;
  }
}

/* ✅ HERO 안에 깔린 overlay(회색)들이 콘텐츠를 덮지 않게 */
.brand-hero-photo{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* ✅ z-index 격리(이게 진짜 중요) */
}

/* 혹시 기존에 .brand-hero-photo::before / ::after 로 그라데이션/오버레이 깔았다면 */
.brand-hero-photo::before,
.brand-hero-photo::after{
  z-index: -1 !important;   /* ✅ 무조건 뒤로 */
  pointer-events: none;
}

/* 너가 이미 쓰던 overlay 클래스가 히어로 안에도 들어가면 이것도 뒤로 */
.brand-hero-photo .thumb-overlay,
.brand-hero-photo .photo-glow{
  z-index: 0;
  pointer-events: none;
}

.hero-photo{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

.hero-photo > img{
  width: 100%;
  height: 320px;          /* 데스크탑 기준 */
  object-fit: cover;
  display: block;
}

/* 사진 위 캡션(현장 스케치) */
.hero-caption{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  color: #fff;
  z-index: 2;
}

.cap-pill{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  font-weight: 700;
}

.cap-title{
  margin-top: 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.4px;
}
.cap-desc{
  margin-top: 6px;
  opacity: .9;
  font-weight: 600;
}

/* ✅ 사진 아래 스펙 3개: absolute 금지 */
.hero-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hero-stats .stat{
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.78);
  border-radius: 16px;
  padding: 12px;
  text-align: center;
}

.hero-stats .k{
  font-size: 12px;
  color: rgba(17,24,39,.55);
  font-weight: 800;
}
.hero-stats .v{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 900;
}

/* 모바일 */
@media (max-width: 1023px){
  .hero-photo > img{ height: 260px; }
  .hero-stats{ grid-template-columns: 1fr; }
}

.hero-photo{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
}

/* ✅ 텍스트 가독성용 그라데이션 */
.hero-photo::after{
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 35%,
    rgba(0,0,0,0.05) 70%,
    rgba(0,0,0,0) 100%
  );

  z-index: 1;
}

.hero-caption{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;

  z-index: 2; /* ✅ 오버레이보다 위 */
  color: #fff;
}

.cap-title{
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.cap-desc{
  opacity: .95;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}

background: linear-gradient(
  to top,
  rgba(0,0,0,0.55),
  rgba(224,107,63,0.25),
  rgba(0,0,0,0)
);

/* ✅ 모바일에서 좌우 여백 과함 해결 */
@media (max-width: 768px){
  .page .container{
    max-width: 100%;
    padding-left: 16px;   /* 기존이 24~32px면 과해 보임 */
    padding-right: 16px;
  }

  /* 히어로 카드 자체도 양 옆이 더 줄어들게 */
  .brand-hero-photo{
    border-radius: 22px;
    padding: 18px 16px;   /* 내부 여백도 모바일용으로 약간 축소 */
  }
}

@media (max-width: 768px){
  .program-chips--meta{
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
    margin-top: 10px;
  }
  .program-chips--meta .chip--meta{
    pointer-events: none;
    cursor: default;
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(15,23,42,.10);
    color: #475569;
    font-weight: 700;
  }
}

@media (max-width: 768px){
  .hero-metrics, .brand-metrics, .hero-stats{
    gap: 10px;
  }
  .hero-metrics .metric, .brand-metrics .metric, .hero-stats .stat{
    padding: 14px 14px;
    border-radius: 18px;
  }
}

/* =========================
   HERO spacing (PC/모바일 공통)
========================= */

/* 히어로 카드: 위/아래 패딩이 달라 보이는 문제를 '상하 동일'로 고정 */
.brand-hero-photo{
  padding-block: 44px;          /* ✅ 위/아래 동일 */
  padding-inline: 44px;
}

/* 그리드 상하 정렬감 */
.brand-hero-grid{
  align-items: center;
  gap: 36px;
}

/* 오른쪽(이미지+스탯)도 같은 리듬으로 */
.brand-hero-right{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 모바일에서만 패딩 줄이기 (좌우 여백 과함 방지) */
@media (max-width: 768px){
  .brand-hero-photo{
    padding-block: 22px;
    padding-inline: 16px;
  }
  .brand-hero-grid{
    gap: 18px;
  }
}

/* =========================
   INFO chips (클릭 불가/버튼 느낌 제거)
========================= */

/* 칩 그룹과 버튼 영역 분리감 (버튼 아래 살짝 띄우기) */
.brand-hero-actions{
  margin-bottom: 12px;
}

/* 칩: "정보 배지" 느낌으로 */
.brand-hero-chips--info{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* ✅ 클릭커블해 보이는 문제 제거 */
.brand-hero-chips--info .chip--info{
  cursor: default !important;
  user-select: none;

  /* 버튼 느낌 ↓ / 배지 느낌 ↑ */
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: none;
  color: #64748b;
  font-weight: 700;

  padding: 8px 12px;
  border-radius: 999px;
}

/* hover가 있던 경우 무력화 */
.brand-hero-chips--info .chip--info:hover{
  transform: none;
  filter: none;
}

/* 모바일에서 칩이 너무 커 보이면 */
@media (max-width: 768px){
  .brand-hero-chips--info .chip--info{
    font-size: 14px;
    padding: 7px 10px;
  }
}

.hero-stats, .brand-metrics, .hero-metrics{
  margin-top: 10px;   /* 이미지 밑 간격 */
}

/* =========================
   BRAND PAGE BASE
========================= */
.page {
  padding-block: 28px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* 모바일 좌우 여백 과한 문제 해결 */
@media (max-width: 768px) {
  .page { padding-block: 16px; }
  .container { padding-inline: 14px; }
}

/* =========================
   HERO CARD (brand.html)
========================= */

.brand-hero-photo{
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 242, 236, .70), rgba(235, 247, 255, .55));
  border: 1px solid rgba(15, 23, 42, .08);
  overflow: hidden;

  /* ✅ 위/아래 리듬 통일 */
  padding: 44px;
}

.brand-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center; /* ✅ 상하 높이 불균형 해결 */
}

.brand-hero-left{
  min-width: 0;
}

.brand-hero-right{
  min-width: 0;
}

/* 모바일: 위 아래로 쌓기 + 패딩 축소 */
@media (max-width: 900px){
  .brand-hero-photo{ padding: 20px; border-radius: 24px; }
  .brand-hero-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* =========================
   HERO TEXT
========================= */
.pill{
  display: inline-flex;
  align-items: center;
  width: fit-content;            /* ✅ 텍스트 길이만큼 */
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(99, 102, 241, .10);
  border: 1px solid rgba(99, 102, 241, .18);
  color: #4f46e5;
  font-weight: 800;
  letter-spacing: .2px;
}

.brand-hero-h1{
  margin-top: 16px;
  margin-bottom: 14px;
  line-height: 1.15;
}

.brand-hero-p{
  color: #475569;
  line-height: 1.8;
  margin-bottom: 18px;
}

.brand-hero-actions{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px; /* ✅ 아래 칩과 분리감 */
  flex-wrap: wrap;
}

/* =========================
   INFO CHIPS (비클릭)
========================= */
.brand-hero-chips--info{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-hero-chips--info .chip--info{
  cursor: default !important;
  user-select: none;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: none;
  color: #64748b;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
}

/* =========================
   HERO MEDIA (사진 + 캡션)
========================= */
.hero-media{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-photo{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.10);
}

/* ✅ 이미지가 "꽉" 차고 잘리지 않게 */
.brand-hero-photoImg{
  display: block;
  width: 100%;
  height: auto;              /* ✅ 비율 유지 */
  aspect-ratio: 16 / 9;      /* ✅ 안정적인 히어로 비율 */
  object-fit: cover;
}

/* 캡션 가독성(흰색 글씨 안 보임 문제 해결) */
.hero-caption{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  color: #fff;

  /* ✅ 텍스트 가독성 강화 */
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
  backdrop-filter: blur(2px);
}

.cap-pill{
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  font-weight: 800;
  margin-bottom: 10px;
}

.cap-title{
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 6px;
}

.cap-desc{
  font-size: 14px;
  opacity: .95;
  line-height: 1.4;
}

/* 모바일: 캡션 크기 줄이기 */
@media (max-width: 768px){
  .hero-caption{ left: 12px; right: 12px; bottom: 12px; }
  .cap-title{ font-size: 18px; }
}

/* =========================
   HERO STATS
========================= */
.hero-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat{
  border-radius: 18px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.08);
  padding: 14px 14px;
  text-align: center;
}

.stat .k{
  color: #6b7280;
  font-weight: 800;
  margin-bottom: 6px;
}

.stat .v{
  font-weight: 900;
  color: #0f172a;
}

/* 모바일: 3개가 세로로 길게 보이면 2열로 */
@media (max-width: 480px){
  .hero-stats{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .stat{
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .stat .k{ margin-bottom: 0; }
}

/* =========================
   BRAND GALLERY (회색 테두리/프레임 제거 + 이미지 꽉 채우기)
========================= */
.photo-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.photo-card{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
}

.photo-thumb{
  background: #f8fafc;
}

.photo-thumb img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;      /* ✅ 회색 테두리처럼 보이는 여백 제거 */
}

.photo-body{
  padding: 14px 14px 16px;
}

@media (max-width: 900px){
  .photo-grid{ grid-template-columns: 1fr; }
}

/* =========================
   STORY SECTION (디자인 요소 보강)
========================= */
.brand-story{
  margin-top: 26px;
}

.story-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.story-left, .story-right{
  min-width: 0;
}

.story-left{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
  padding: 22px;
}

.story-left h2{
  margin-bottom: 10px;
}

.story-left p{
  color: #475569;
  line-height: 1.8;
}

/* ✅ “100” 카드 느낌 포인트 */
.story-left::before{
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 78px;
  height: 78px;
  border-radius: 20px;
  pointer-events: none;
}

.story-card{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(240, 253, 244, .70); /* 은은한 브랜드 그린 */
  padding: 22px;
}

.story-list{
  margin: 12px 0 0;
  padding-left: 18px;
  line-height: 1.9;
}

@media (max-width: 900px){
  .story-grid{ grid-template-columns: 1fr; }
}

/* =========================
   BOTTOM CTA
========================= */
.brand-bottom{
  margin-top: 22px;
}

.brand-bottom-card{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand-bottom-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px){
  .brand-bottom-card{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* === FIX: brand hero 하단 여백 부족 === */
/* 1) 히어로 카드 자체 하단 패딩 보강 */
.page .brand-hero-photo {
  padding-bottom: 56px; /* 기존보다 넉넉하게 */
}

/* 2) 오른쪽 영역 마지막 요소(스탯) 아래 여백 확보 */
.page .hero-media {
  padding-bottom: 12px; /* 안전 여백 */
}

/* 3) 스탯 박스 자체가 바닥에 붙는 느낌 완화 */
.page .hero-stats {
  margin-bottom: 12px;
}

/* 모바일도 동일하게 리듬 유지 */
@media (max-width: 900px) {
  .page .brand-hero-photo {
    padding-bottom: 2px;
  }
  .page .hero-media {
    padding-bottom: 8px;
  }
  .page .hero-stats {
    margin-bottom: 8px;
  }
}

.page--brand .brand-hero-photo { padding-bottom: 56px; }

/* === 모바일에서 히어로 하단이 딱 붙는 문제 FIX === */
@media (max-width: 900px) {
  /* 히어로 카드 자체 아래 여백 */
  .page .brand-hero-photo {
    padding-bottom: 2px !important;
  }

  /* 왼쪽 컬럼(텍스트/버튼/칩) 아래 여백 */
  .page .brand-hero-left {
    padding-bottom: 18px !important;
  }

  /* 칩이 마지막에 오면 하단에 여유를 줌 */
  .page .brand-hero-chips {
    margin-bottom: 12px !important;
  }
}

@media (max-width: 900px) {
  .page--brand .brand-hero-photo { padding-bottom: 10px !important; }
  .page--brand .brand-hero-left { padding-bottom: 10px !important; }
  .page--brand .brand-hero-chips { margin-bottom: 12px !important; }
}

/* 히어로 특징: 버튼처럼 보이지 않게 '리스트' 톤으로 */
.hero-features{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: #667085; /* muted */
}

.hero-feature{
  position: relative;
  padding-left: 14px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  cursor: default;
  user-select: none;
}

.hero-feature::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff7a45; /* 브랜드 포인트(오렌지) */
}

/* 모바일에서 너무 커보이면 살짝 줄임 */
@media (max-width: 900px){
  .hero-features{ gap: 8px 12px; }
  .hero-feature{ font-size: 13px; }
}

/* =========================
   Program Hero Features
   ========================= */

.program-features{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.program-features li{
  position: relative;
  padding-left: 14px;
  font-weight: 700;
  font-size: 15px;
  color: #475467;
  cursor: default;
  user-select: none;
}

.program-features li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff7a45; /* 브랜드 오렌지 */
}

/* 모바일 */
@media (max-width: 900px){
  .program-features{
    gap: 8px 14px;
  }

  .program-features li{
    font-size: 14px;
  }
}

.brand-hero-actions{
  margin-bottom: 12px;
}

.story-left::after{
  display:none;
}

.story-accent-box{
  display:none;
}

/* 프로그램 페이지 히어로 하단 여백 보장 */
.brand-hero-photo{
  margin-bottom: 80px;
}

@media (max-width: 1023px){
  .brand-hero-photo{
    margin-bottom: 56px;
  }
}

.page--brand .brand-hero-photo,
.page--program .brand-hero-photo {
  padding-left: 16px;
  padding-right: 16px;
  /* 또는 padding-inline: 16px; */
}

/* =========================
   Recruit hero = Program hero width/layout
   ========================= */

/* 히어로 컨테이너의 좌우/상하 여백을 program과 동일하게 */
.page--recruit .brand-hero-photo{
  padding-bottom: 96px;
  padding-left: 16px;
  padding-right: 16px;
  margin-bottom: 24px;
}

/* grid 폭/간격을 program 수준으로 */
.page--recruit .brand-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* ← program 느낌(좌 약간 넓게) */
  gap: 48px;
  align-items: center;
}

/* 오른쪽 이미지 영역이 너무 크거나 작지 않게 */
.page--recruit .brand-hero-right{
  display: flex;
  justify-content: flex-end; /* program처럼 오른쪽 정렬 */
}

/* program hero-photo처럼 라운드/크롭/그림자 정리 */
.page--recruit .brand-hero-photoCard{
  width: 100%;
  max-width: 640px;         /* ← program 히어로 이미지 체감 폭 */
  border-radius: 28px;
  overflow: hidden;
  border: 0;                /* 흰 테두리 제거 */
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
  background: transparent;
}

/* 이미지 비율 고정 + 크롭 */
.page--recruit .brand-hero-photoCard img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 오버레이가 클릭 막지 않게 */
.page--recruit .media-overlay{
  pointer-events: none;
}

/* 태블릿/모바일에서는 program처럼 세로 스택 */
@media (max-width: 1023px){
  .page--recruit .brand-hero-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page--recruit .brand-hero-right{
    justify-content: flex-start;
  }
  .page--recruit .brand-hero-photoCard{
    max-width: 100%;
    border-radius: 22px;
  }
}

/* =========================================
   Hero 이미지 뒤 회색 배경 완전 제거
   ========================================= */

.brand-hero-photoCard,
.hero-media,
.brand-hero-right,
.media-frame,
.media-frame--soft {
  background: transparent !important;
  box-shadow: none !important;
}

/* 혹시 가상요소로 깔려있다면 제거 */
.brand-hero-photoCard::before,
.brand-hero-photoCard::after,
.media-frame::before,
.media-frame::after {
  display: none !important;
}

/* 오버레이 제거 (필요 시 유지 가능) */
.media-overlay {
  display: none !important;
}

.page .brand-hero-photo {
  padding: 16px 16px 16px 16px;
}

/* 히어로 상단 우측 살구색 blob 제거 */
.brand-hero-photo::before,
.brand-hero-photo::after{
  content:none !important;
  display:none !important;
}

/* ✅ 살구색 blob/장식 전부 제거(브랜드 페이지 한정) */
.page--brand .brand-hero-photo::before,
.page--brand .brand-hero-photo::after,
.page--brand .brand-hero-grid::before,
.page--brand .brand-hero-grid::after,
.page--brand .container::before,
.page--brand .container::after,
.page--brand .page::before,
.page--brand .page::after{
  content: "" !important;
  display: none !important;
  background: transparent !important;
}

/* 혹시 '장식 div'가 있는 경우까지 대비 */
.page--brand .photo-glow{
  background: none !important;
}

/* ✅ 브랜드 히어로 주변의 '배경 이미지/그라데이션' 전부 차단 */
.page--brand,
.page--brand .container,
.page--brand .brand-hero-photo,
.page--brand .brand-hero-grid{
  background-image: none !important;
}

/* 혹시 배경색 자체가 살구색이면 이것도 같이 초기화 */
.page--brand .brand-hero-photo,
.page--brand .brand-hero-grid{
  background-color: transparent !important;
}

/* ✅ 살구색 장식용 요소가 있다면 강제 숨김(브랜드 페이지만) */
.page--brand [class*="blob"],
.page--brand [class*="deco"],
.page--brand [class*="orn"],
.page--brand [class*="shape"],
.page--brand [class*="accent-bg"],
.page--brand [class*="bg-accent"]{
  display: none !important;
}

/* ✅ 번짐/필터 계열 제거(브랜드 히어로 주변) */
.page--brand .brand-hero-photo,
.page--brand .brand-hero-grid,
.page--brand .hero-media,
.page--brand .hero-photo{
  box-shadow: none !important;
  filter: none !important;
}

/* =========================================================
   ✅ 브랜드 페이지: 상단 살구색 데코(의사요소) 완전 차단
   - page/container/hero 섹션에 붙는 ::before/::after 장식 제거
========================================================= */
.page--brand::before,
.page--brand::after,
.page--brand .container::before,
.page--brand .container::after,
.page--brand .brand-hero-photo::before,
.page--brand .brand-hero-photo::after,
.page--brand .brand-hero-grid::before,
.page--brand .brand-hero-grid::after{
  content: none !important;
  display: none !important;
}

/* 혹시 배경 그라데이션/이미지로 들어간 경우까지 차단 */
.page--brand,
.page--brand .container,
.page--brand .brand-hero-photo,
.page--brand .brand-hero-grid{
  background-image: none !important;
}

/* 살구색이 그림자/필터로 보이는 경우도 있어서 같이 컷 */
.page--brand .brand-hero-photo,
.page--brand .brand-hero-grid{
  filter: none !important;
  box-shadow: none; /* 필요하면 !important로 올려도 됨 */
}

.page--brand .hero-photo{
  position: relative;
  overflow: hidden;
  border-radius: 28px; /* 기존 톤 유지 */
}

.page--brand .hero-caption{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: #fff;
  z-index: 2;
}

/* 캡션 뒤에 어두운 오버레이 깔아주기 */
.page--brand .hero-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ==========================================
   브랜드 페이지 상단 살구색 데코 제거
========================================== */

.page--brand::before,
.page--brand::after {
  content: none !important;
  display: none !important;
}

/* 혹시 background로 들어간 경우 */
.page--brand {
  background-image: none !important;
}

/* Notice hero: 검색을 히어로 톤으로 */
.page--notice .board-search--hero{
  margin-top: 14px;
  display:flex;
  gap:10px;
  align-items:center;
  max-width: 520px;
}

.page--notice .board-search--hero input{
  flex:1;
  height:44px;
  border-radius: 999px;
  padding: 0 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  outline: none;
}

.page--notice .board-search--hero button{
  height:44px;
  padding: 0 16px;
  border-radius: 999px;
}

/* 모바일에서 히어로 검색이 꽉 차게 */
@media (max-width: 768px){
  .page--notice .board-search--hero{
    max-width: 100%;
  }
}

.page--notice-detail .notice-meta{
  margin-top: 14px;
  display:flex;
  gap:16px;
  font-size:14px;
  color:#666;
}

.notice-meta-item b{
  margin-left:6px;
  color:#111;
}

.notice-pinned-badge{
  margin-top:14px;
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:#f4efe9;
  font-size:12px;
  color:#8a6f55;
}

.notice-detail-body{
  margin-top:60px;
}

.notice-content{
  max-width:860px;
  line-height:1.8;
  font-size:16px;
}

.notice-detail-actions{
  margin-top:40px;
}

/* page 공통 여백이 안 먹는 문제 방지용: page 단에서 padding 주기 */
.page{
  padding: 48px 0 72px;
}
@media (max-width: 767px){
  .page{
    padding: 28px 0 56px;
  }
}

.page--notice-detail .container{
  max-width: 1120px;
}

/* 히어로 */
.notice-hero{
  margin-bottom: 22px;
}
.notice-hero__inner{
  padding: 22px 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.notice-hero__titleRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 10px;
}

.notice-hero__title{
  margin:0;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.notice-hero__meta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#666;
  font-size:14px;
}

.notice-hero__meta b{
  color:#111;
  font-weight:700;
}

.notice-hero__desc{
  margin-top: 12px;
  color:#555;
  line-height:1.7;
  font-size:15px;
}

/* 본문 카드 */
.notice-detail-card{
  margin-top: 18px;
  padding: 26px 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.notice-detail-content{
  line-height: 1.85;
  font-size: 16px;
  color:#222;
}

/* 에디터에서 들어오는 이미지/표 안전 */
.notice-detail-content img{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display:block;
}
.notice-detail-content table{
  width: 100%;
  border-collapse: collapse;
}
.notice-detail-content td,
.notice-detail-content th{
  border: 1px solid rgba(0,0,0,0.08);
  padding: 10px;
}

/* 하단 버튼 */
.notice-detail-actions{
  margin-top: 22px;
  display:flex;
  justify-content:flex-end;
}

/* 모바일 타이포 */
@media (max-width: 767px){
  .notice-hero__inner{ padding: 18px 16px; }
  .notice-hero__title{ font-size: 24px; }
  .notice-detail-card{ padding: 20px 16px; }
}

/* =========================
   공통 히어로 리듬 통일
========================= */

.page--gallery .brand-hero-photo{
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 14px 40px rgba(0,0,0,0.06);
}

.page--gallery .brand-hero-photo {
  padding-bottom: 20px !important;
  margin-bottom: 24px !important;
}

.hero-features{
  margin-top: 20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0;
  list-style:none;
}

.hero-feature{
  font-size:14px;
  padding:6px 14px;
  border-radius:999px;
  color:#444;
  font-weight:500;
  pointer-events:none;   /* 클릭 방지 */
  cursor:default;        /* 손가락 모양 제거 */
}

.hero-features--soft .hero-feature{
  color:#2b4d8f;
}

/* ===============================
   HERO 통일 (Program 기준)
================================ */

.page--gallery .brand-hero-photo{
  padding: 16px 16px 16px 16px;
  border-radius: 22px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 14px 40px rgba(0,0,0,0.06);
}

/* 내부 그리드 높이 통일 */
.page--gallery .brand-hero-grid{
  align-items:center;
}

/* 우측 이미지 박스 높이 정렬 */
.page--gallery .brand-hero__photo .photo-frame{
  border-radius:18px;
  overflow:hidden;
}

/* 모바일 */
@media (max-width:768px){
  .page--gallery .brand-hero-photo{
    padding:16px 16px 16px 16px;
  }
}

/* ===========================
   Gallery Default Image Tone
=========================== */

.thumb-fallback,
.photo-fallback{
  background:linear-gradient(135deg, #f8f6f3, #eef1f6);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:20px;
  border-radius:20px;
}

/* 가운데 텍스트 */
.thumb-fallback .fallback-title,
.photo-fallback .fallback-title{
  font-size:16px;
  font-weight:600;
  color:#6b7280;
  margin-top:6px;
}

/* 작은 배지 */
.thumb-fallback .fallback-badge,
.photo-fallback .fallback-badge{
  font-size:11px;
  letter-spacing:1px;
  font-weight:700;
  color:#ff7a45;
  background:#fff;
  padding:4px 10px;
  border-radius:20px;
  border:1px solid #ffe2d3;
}

/* =========================
   HERO PILL (공통)
========================= */
.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  border-radius:999px;
  margin-bottom:18px;
}

.pill--brand{
  background:linear-gradient(135deg, #f8f4ff, #ece4ff);
  color:#6b4de6;
  border:1px solid rgba(107,77,230,.15);
}

@media (max-width:768px){
  .pill{
    font-size:12px;
    padding:5px 12px;
    margin-bottom:14px;
  }
}

@media (max-width:768px){
  .pill{
    font-size:12px;
    padding:5px 12px;
    margin-bottom:14px;
  }
}

@media (max-width:768px){
  .brand-hero-grid{
    display:flex;
    flex-direction:column;
  }

  .brand-hero__photo{
    order:-1;
    margin-bottom:20px;
  }
}

/* ===============================
   모바일 히어로 이미지 제거
================================= */
@media (max-width: 768px){

  /* 오른쪽 히어로 영역 숨김 */
  .brand-hero__photo{
    display: none !important;
  }

  /* 그리드 1열로 */
  .brand-hero-grid{
    grid-template-columns: 1fr !important;
  }

  /* 모바일 전용 여백 재조정 */
  .brand-hero-photo{
    padding: 40px 0 32px;
  }

  .brand-hero-left{
    max-width: 100%;
  }

}

/* ===============================
   Gallery Detail
================================= */
.page--gallery-detail .brand-card{
  margin-bottom: 18px;
}

.page--gallery-detail .brand-section{
  margin-top: 22px;
}

.page--gallery-detail .brand-section--last{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* ✅ 사진 그리드: 데스크탑 2열 */
.gd-images--grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* 이미지 프레임 */
.gd-images--grid .gd-figure{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.02);
}

.gd-images--grid img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ✅ 모바일: 1열 */
@media (max-width: 768px){
  .gd-images--grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .page--gallery-detail .brand-section{
    margin-top: 18px;
  }
}

/* ===== Branch hero info ===== */
.page--branch .branch-hero-info{
  margin-top: 18px;
}

.page--branch .branch-hero-bullets{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.6;
}

.page--branch .branch-hero-bullets li b{
  color:#111827;
}

/* ===== Branch card highlight ===== */
.page--branch .branch-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 1px solid rgba(17,24,39,.08);
}

.page--branch .branch-card.is-focus{
  border-color: rgba(255,122,64,.40);
  box-shadow: 0 18px 40px rgba(17,24,39,.08);
  transform: translateY(-2px);
}

/* 선택된 카드 상단에 살짝 포인트 */
.page--branch .branch-card.is-focus::before{
  content:"";
  display:block;
  height: 4px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: rgba(255,122,64,.85);
}

/* =========================
   BRANCH: chips(tab) style
   ========================= */
.page--branch #branchChips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin-top: 14px;
}

/* 버튼 기본 리셋 + 칩 형태 */
.page--branch #branchChips .chip--btn{
  appearance: none;
  border: 1px solid rgba(20, 20, 20, .10);
  background: #fff;
  color: #2a2a2a;
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.2px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* hover: 과하게 버튼처럼 튀지 않게 “살짝” */
.page--branch #branchChips .chip--btn:hover{
  border-color: rgba(255, 122, 60, .35);
  background: rgba(255, 122, 60, .06);
}

/* active(선택됨): 프로그램 페이지 포인트 색감처럼 */
.page--branch #branchChips .chip--btn.is-active{
  border-color: rgba(255, 122, 60, .55);
  background: rgba(255, 122, 60, .10);
  color: #1f1f1f;
  box-shadow: 0 6px 18px rgba(255,122,60,.10);
}

/* 키보드 포커스(접근성) */
.page--branch #branchChips .chip--btn:focus-visible{
  outline: 3px solid rgba(255,122,60,.25);
  outline-offset: 2px;
}

.page--branch .brand-hero-left{
  position: relative;
  z-index: 5;
}
.page--branch #branchChips{
  position: relative;
  z-index: 6;
}
.page--branch .brand-hero-right{
  position: relative;
  z-index: 1;
}
.page--branch .map-frame{
  pointer-events: none; /* 지도 영역이 클릭을 가로채지 않게 */
}

/* branch chips 앞 점 제거 */
.page--branch #branchChips .chip--btn::before{
  content: none !important;
  display: none !important;
}

/* 프로그램 히어로 느낌으로 그리드 비율 정리 */
.page--branch .branch-hero .brand-hero-grid{
  align-items: center;
  gap: 28px;
}

/* 데스크탑에서 오른쪽 지도 영역을 조금 더 “꽉” */
@media (min-width: 1024px){
  .page--branch .branch-hero .brand-hero-grid{
    grid-template-columns: 1.45fr .55fr; /* 왼쪽/오른쪽 비율 */
  }
}

/* 지도 프레임 패딩 제거 + 오른쪽으로 조금 치우치게 */
.page--branch .map-frame{
  padding: 0 !important;
  overflow: hidden;
}

/* 이미지 자체를 오른쪽으로 살짝 당겨 여백 보정 */
.page--branch .map-img{
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  transform: translateX(1%);
}

.page--branch .branch-hero{
  margin-bottom: 28px;     /* hero 아래 공간 */
  padding-bottom: 8px;     /* 카드 내부 아래 여유 */
}

.page--branch .branch-card{
  border: 1px solid rgba(20,20,20,.10);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.page--branch .branch-card.is-active{
  border-color: rgba(255,122,60,.55);
  box-shadow: 0 10px 24px rgba(255,122,60,.10);
}

/* ✅ chips 영역 자체를 기준으로 */
#branchChips{
  position: relative;
  z-index: 5;
}

/* ✅ chips 영역에 혹시 있는 장식 가상요소가 클릭 먹는 것 방지 */
#branchChips::before,
#branchChips::after{
  pointer-events: none !important;
}

/* ✅ 버튼을 확실히 위로 */
#branchChips .chip--btn{
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

/* 고정 헤더 높이 + 여유 */
.branch-card { scroll-margin-top: 88px; }  /* 너희 헤더에 맞게 조절 */

.branch-card {
  transition: all 0.3s ease;
  border: 1px solid #eee;
}

.branch-card.is-highlight {
  border: 2px solid #e67e22; /* 브랜드 컬러 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transform: translateY(-4px);
}

@media (max-width: 420px){

  /* 1) 이미지 프레임: 라운드 + 오버레이 잘리게 */
  .hero-photo{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
  }

  /* 이미지가 프레임을 꽉 채우게 */
  .brand-hero-photoImg{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  /* 2) “음영 박스”는 캡션 div가 아니라, hero-photo의 ::after로 깔기 */
  .hero-photo::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* 아래쪽만 진하게 + 살짝 전체 어둡게 */
    background:
      linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.55) 100%);
  }

  /* 3) 캡션은 절대 위치로, 폭/패딩 모바일 최적화 */
  .hero-caption{
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 2; /* ::after 위로 */
    padding: 14px 14px 12px;
    border-radius: 16px;

    /* 캡션 자체 배경은 "유리 느낌"으로만, 음영은 ::after가 담당 */
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(2px);
  }

  /* “현장 스케치” 줄바꿈 방지 + 크기 조절 */
  .hero-caption .cap-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    white-space: nowrap;      /* ✅ 깨짐 방지 */
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
  }

  /* 제목/설명 폰트 줄이고 줄수 제한 */
  .hero-caption .cap-title{
    margin-top: 10px;
    font-size: 20px;
    line-height: 1.25;

    display: -webkit-box;
    -webkit-line-clamp: 2;    /* ✅ 2줄까지만 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-caption .cap-desc{
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;

    display: -webkit-box;
    -webkit-line-clamp: 2;    /* ✅ 2줄까지만 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 420px){
  .hero-photo{
    height: 220px; /* 360x740 기준 안정적인 높이 */
  }
}

@media (max-width: 768px) {

  .gallery-card {
    display: block;   /* 가로 → 세로 */
  }

  .gallery-card .thumb {
    width: 100%;
  }

  .gallery-card .card-body {
    padding: 14px 6px 6px;
  }

  .gallery-card .card-title {
    font-size: 15px;
    margin-top: 8px;
  }

  .gallery-card .card-meta {
    font-size: 12px;
    opacity: .6;
  }
}

@media (max-width: 768px) {

  .gallery-card .card-meta {
    display: none;  /* 날짜 제거 */
  }

}

/* =========================
   Notice Detail (Mobile)
   360px 기준 타이틀/본문 축소
========================= */
@media (max-width: 480px) {

  /* 상단 카드 패딩 살짝 줄이기 */
  .brand-hero-photo {
    padding: 16px 14px;
  }

  /* 제목 영역 레이아웃: 배지 + 타이틀이 한 줄에서 무너지지 않게 */
  .notice-card-title{
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  /* '공지' 원형 배지 크기 축소 + 글자 안정화 */
  .badge-pin{
    width: 34px;
    height: 34px;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap; /* 공지가 줄바꿈 안되게 */
  }

  /* 제목 폰트/줄간격 축소 + 단어 단위 줄바꿈 */
  .notice-card-title h2{
    font-size: 20px;     /* 기존이 26~32면 너무 큼 */
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0;
    word-break: keep-all;     /* 한글 깨짐 방지 */
    overflow-wrap: anywhere;  /* 긴 영문/특수문자 안전 */
  }

  /* 등록일/조회 칩도 살짝 작게 */
  .notice-chips{
    gap: 8px;
    flex-wrap: wrap;
  }
  .notice-chip{
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 999px;
  }
  .notice-chip b{
    font-size: 12px;
  }

  /* 본문 기본 글씨/줄간격 축소 */
  .notice-card-body{
    font-size: 15px;     /* 16~18이면 커보임 */
    line-height: 1.75;
    letter-spacing: -0.01em;
  }

  /* 본문 안에 h1/h2/h3 같은 게 들어오면 과하게 커지는거 방지(리뉴얼 공지처럼) */
  .notice-card-body h1{ font-size: 20px; line-height: 1.3; margin: 18px 0 10px; }
  .notice-card-body h2{ font-size: 18px; line-height: 1.35; margin: 16px 0 8px; }
  .notice-card-body h3{ font-size: 16px; line-height: 1.4; margin: 14px 0 6px; }

  /* 문단 간격도 모바일에서 조금 타이트하게 */
  .notice-card-body p{
    margin: 10px 0;
  }
}

/* =========================
   HOME
========================= */
.page--home .home-hero { margin-bottom: 18px; }

/* QUICK */
.home-quick { margin: 12px 0 22px; }
.home-quick-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.home-quick-card{
  display: block;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px 14px;
  background: #fff;
  text-decoration: none;
}
.home-quick-card .t{ font-weight: 800; font-size: 16px; color:#111; }
.home-quick-card .d{ margin-top: 6px; color:#5b6472; font-size: 13px; line-height: 1.45; }
.home-quick-card .more{ margin-top: 10px; font-weight: 700; font-size: 13px; color:#2b2f36; opacity: .9; }

/* PROGRAM PREVIEW */
.home-program-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.home-program-card{
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 18px;
  padding: 14px 14px 12px;
}
.home-program-card .tag{
  display: inline-block;
  font-weight: 800;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
}
.home-program-card .title{ margin-top: 10px; font-weight: 900; font-size: 14px; line-height: 1.35; }
.home-program-card .desc{ margin-top: 6px; color:#5b6472; font-size: 13px; line-height: 1.45; }
.home-more{ margin-top: 14px; }

/* SECTION TITLE ROW */
.section-title--row{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
}
.btn-sm{ padding: 10px 12px; border-radius: 999px; }

/* GALLERY PREVIEW */
.home-gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.thumb-fallback--soft{
  width:100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
}

/* NOTICE PREVIEW */
.home-notice-card{
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 18px;
  padding: 10px 12px;
}
.home-notice-list{ list-style:none; padding:0; margin:0; }
.home-notice-list li a{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 6px;
  text-decoration:none;
  border-radius: 12px;
}
.home-notice-list li a:hover{ background: rgba(0,0,0,.03); }
.home-notice-list .pin{
  font-size: 12px; font-weight: 900;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  flex: 0 0 auto;
}
.home-notice-list .title{
  font-weight: 800;
  color:#111;
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.home-notice-list .date{
  color:#697386; font-size: 12px; flex: 0 0 auto;
}

/* =========================
   RESPONSIVE (360x740 기준)
========================= */
@media (max-width: 960px){
  .home-quick-grid{ grid-template-columns: 1fr; }
  .home-program-grid{ grid-template-columns: 1fr; }
  .home-gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px){
  /* 모바일에서 히어로 우측 이미지 숨기면 짤림/클릭유도 이슈 해결 */
  .page--home .home-hero__right{ display:none; }

  /* 제목/문단을 360폭에 맞춰 살짝 축소 */
  .page--home .brand-hero-h1{ font-size: 26px; line-height: 1.18; }
  .page--home .brand-hero-p{ font-size: 15px; line-height: 1.75; }

  .home-gallery-grid{ grid-template-columns: 1fr; }
}

.hub-hero{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 26px;
  background: #fff;
  padding: 22px;
  margin: 18px 0 18px;
}

.hub-hero__top{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 14px;
}

.hub-logo{ height: 42px; width:auto; display:block; }

.hub-slogan{
  margin:0;
  text-align:right;
  line-height:1.2;
}
.hub-slogan b{ font-size: 18px; }
.hub-slogan-sub{ display:block; color:#7a8392; font-weight:700; font-size: 13px; margin-top: 4px; }

.hub-launcher{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hub-card{
  display:block;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px 14px;
  text-decoration:none;
  background: rgba(0,0,0,.015);
}
.hub-card__t{ font-weight: 900; color:#111; }
.hub-card__d{ margin-top: 6px; color:#5b6472; font-size: 13px; line-height:1.45; }

.hub-card--primary{
  background: rgba(255, 122, 74, .10);
  border-color: rgba(255, 122, 74, .25);
}

.hub-hero__cta{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width: 960px){
  .hub-launcher{ grid-template-columns: 1fr 1fr; }
  .hub-hero__top{ align-items:flex-start; flex-direction:column; }
  .hub-slogan{ text-align:left; }
  .hub-logo{ height: 38px; }
}
@media (max-width: 480px){
  .hub-hero{ padding: 16px; }
  .hub-launcher{ grid-template-columns: 1fr; }
  .hub-slogan b{ font-size: 16px; }
}

/* =========================
   HOME HUB (B안)
========================= */

.page--home .container { padding-top: 18px; }

.hub-hero{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 26px;
  background: #fff;
  padding: 22px;
  margin: 18px 0 18px;
}

.hub-hero__top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 18px;
}

.hub-hero__brand{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.hub-logo{ height: 44px; width:auto; display:block; }

.hub-slogan{
  margin:0;
  line-height:1.15;
}
.hub-slogan b{ font-size: 18px; font-weight: 900; }
.hub-slogan-sub{
  display:block;
  margin-top: 6px;
  color:#7a8392;
  font-weight:800;
  font-size: 13px;
}

.hub-hero__lead{
  margin: 6px 0 0;
  color:#4f5968;
  line-height:1.6;
  font-size: 15px;
  max-width: 520px;
}

.hub-launcher{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hub-card{
  display:block;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px 14px;
  text-decoration:none;
  background: rgba(0,0,0,.015);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.hub-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.hub-card__t{ font-weight: 900; color:#111; font-size: 16px; }
.hub-card__d{ margin-top: 6px; color:#5b6472; font-size: 13px; line-height:1.45; }

.hub-card--primary{
  background: rgba(255, 122, 74, .10);
  border-color: rgba(255, 122, 74, .28);
}

.hub-hero__cta{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* rows */
.hub-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.hub-panel{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  background:#fff;
  padding: 18px;
}

.hub-panel__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.hub-h2{
  margin:0;
  font-size: 18px;
  font-weight: 900;
}

.hub-more{
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  color:#6b7482;
}
.hub-more:hover{ color:#111; }

.hub-bullets{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.hub-bullets li{
  color:#4f5968;
  line-height:1.45;
  font-weight: 650;
  padding-left: 14px;
  position: relative;
}
.hub-bullets li::before{
  content:"";
  width:6px; height:6px;
  border-radius: 99px;
  background: rgba(255,122,74,.85);
  position:absolute;
  left:0; top: 10px;
}

.hub-kv{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}
.hub-k{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(0,0,0,.015);
}
.hub-k__label{ color:#7a8392; font-weight:800; font-size: 12px; }
.hub-k__value{ margin-top: 6px; font-weight: 900; color:#111; }

.hub-note{
  margin: 12px 0 0;
  color:#4f5968;
  line-height:1.6;
}

/* latest */
.hub-latest{ margin-top: 14px; margin-bottom: 18px; }

.hub-latest__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}

.hub-block{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  background:#fff;
  padding: 18px;
}

.hub-block__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.hub-list{ display:flex; flex-direction:column; gap: 10px; }
.hub-item{
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(0,0,0,.012);
}
.hub-item:hover{ border-color: rgba(0,0,0,.12); }
.hub-item__title{
  font-weight: 900;
  color:#111;
  line-height:1.35;
}
.hub-item__meta{
  margin-top: 6px;
  color:#7a8392;
  font-size: 12px;
  font-weight: 750;
}
.hub-dot{ margin: 0 6px; }

.hub-thumbgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.hub-thumb{
  display:block;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  background:#fff;
}
.hub-thumb img{
  display:block;
  width:100%;
  height: 120px;
  object-fit: cover;
}
.hub-thumb-fallback{
  width:100%;
  height: 120px;
  background: linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.01));
}

/* responsive */
@media (max-width: 960px){
  .hub-launcher{ grid-template-columns: 1fr 1fr; }
  .hub-row{ grid-template-columns: 1fr; }
  .hub-latest__grid{ grid-template-columns: 1fr; }
  .hub-hero__top{ flex-direction:column; }
  .hub-hero__lead{ max-width: 100%; }
}
@media (max-width: 480px){
  .hub-hero{ padding: 16px; border-radius: 22px; }
  .hub-logo{ height: 38px; }
  .hub-slogan b{ font-size: 16px; }
  .hub-hero__lead{ font-size: 14px; }
  .hub-launcher{ grid-template-columns: 1fr; }
  .hub-thumb img, .hub-thumb-fallback{ height: 140px; }
}

/* =========================
   HUB SLOGAN ROLLING
========================= */

.hub-slogan-rolling{
  position:relative;
  margin-top:18px;
  height:28px;
  overflow:hidden;
}

.hub-slogan-line{
  position:absolute;
  width:100%;
  left:0;
  top:0;
  opacity:0;
  transform:translateY(10px);
  transition:all .6s ease;
  font-size:16px;
  color:#666;
  font-weight:500;
}

.hub-slogan-line.is-active{
  opacity:1;
  transform:translateY(0);
}

/* 모바일 */
@media (max-width:768px){
  .hub-slogan-line{
    font-size:14px;
  }
}

.hub-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #e6e6e6;
  background:#f7f8ff;
  color:#3b4cff;
  font-weight:700;
  font-size:14px;
}

.hub-slogan{
  margin:14px 0 0;
  font-size:22px;
  font-weight:800;
  color:#111;
  letter-spacing:-0.02em;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}

.hub-slogan.is-show{
  opacity:1;
  transform:translateY(0);
}

/* 360px 최소 대응 */
@media (max-width:420px){
  .hub-slogan{ font-size:18px; }
  .hub-kicker{ font-size:13px; padding:7px 12px; }
}

.page--home .hub-hero{
  border:1px solid #eee;
  border-radius:28px;
  padding:28px;
  background:#fff;
}

.page--home .hub-hero__top{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:24px;
  align-items:start;
}

.page--home .hub-hero__lead{
  margin:0;
  color:#556;
  font-size:16px;
  line-height:1.7;
}

.page--home .hub-launcher{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
}

.page--home .hub-card{
  display:block;
  border:1px solid #eee;
  border-radius:18px;
  padding:18px;
  background:#fff;
  text-decoration:none;
  color:#111;
}

.page--home .hub-card__t{ font-weight:800; font-size:16px; }
.page--home .hub-card__d{ margin-top:6px; color:#667; font-size:14px; }

.page--home .hub-card--primary{
  border-color:#ffb9a0;
  background:#fff5f0;
}

.page--home .hub-hero__cta{
  margin-top:18px;
  display:flex;
  gap:10px;
}

/* 반응형 */
@media (max-width:900px){
  .page--home .hub-hero__top{
    grid-template-columns: 1fr;
  }
  .page--home .hub-launcher{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:420px){
  .page--home .hub-hero{ padding:18px; border-radius:22px; }
  .page--home .hub-launcher{ grid-template-columns: 1fr; }
}

/* 슬로건 스택 */
.slogan-stack{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.slogan-item{
  font-size:20px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#111;
  opacity:.35;
  transform:translateY(6px);
  filter:saturate(.9);
  transition: opacity .35s ease, transform .35s ease, background .35s ease, color .35s ease;
}

/* 처음 로딩 시: 위에서 아래로 “들어오는” 느낌 */
.slogan-stack.is-ready .slogan-item{
  opacity:.35;
  transform:translateY(0);
}

/* 강조 상태 */
.slogan-item.is-active{
  opacity:1;
  color:#111;
  background:rgba(255, 122, 64, .10);
  border-radius:12px;
  padding:8px 10px;
}

/* 360px 최소 대응 */
@media (max-width:420px){
  .slogan-item{ font-size:16px; }
  .slogan-item.is-active{ padding:7px 9px; }
}

.slogan-stack{
  margin-top:16px;
  margin-bottom:24px;
}

.slogan-item{
  font-size:28px;
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.2;
  opacity:.25;
  transition: all .4s ease;
}

.slogan-item.is-active{
  opacity:1;
  color:#111;
  background: linear-gradient(90deg, rgba(255,122,64,.15), transparent);
  padding:10px 14px;
  border-radius:14px;
}

.hub-hero{
  position:relative;
  overflow:hidden;
}

.hub-hero::before{
  content:"";
  position:absolute;
  inset:-40px -80px auto auto;
  width:420px;
  height:420px;
  background: radial-gradient(circle, rgba(255,122,64,.12), transparent 60%);
  border-radius:50%;
  pointer-events:none;
}

.hub-card{
  transition: all .25s ease;
  border:1px solid #eee;
}

.hub-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,.06);
  border-color:rgba(255,122,64,.4);
}

/* =========================
   HOME (감성 강조형)
========================= */
.page--home .container{
  padding-top: 24px;
  padding-bottom: 80px;
}

/* ---- Emotion Hero ---- */
.emotion-hero{
  position: relative;
  border-radius: 28px;
  border: 1px solid #eee;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,122,64,.12), transparent 52%),
    radial-gradient(circle at 80% 75%, rgba(124,151,255,.10), transparent 55%);
  padding: 84px 24px 64px;
  overflow: hidden;
  margin-bottom: 28px;
}

.emotion-inner{
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.emotion-kicker{
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4e5dff;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 26px;
}

.emotion-slogan-stage{
  position: relative;
  min-height: 96px;
}

.emotion-slogan{
  position: absolute;
  left: 0;
  right: 0;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.04em;
  opacity: 0;
  transform: translateY(18px);
  transition: all .6s ease;
  color: #111;
}

.emotion-slogan.is-active{
  opacity: 1;
  transform: translateY(0);
}

.emotion-desc{
  margin-top: 44px;
  font-size: 18px;
  line-height: 1.8;
  color: #555;
}

.emotion-cta{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

.emotion-scroll{
  display: inline-block;
  margin-top: 44px;
  font-size: 14px;
  color: #999;
  text-decoration: none;
}

/* ---- Scene ---- */
.emotion-scene{
  border-radius: 28px;
  border: 1px solid #eee;
  background: #fff;
  padding: 24px;
  margin-bottom: 22px;
}

.scene-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: center;
}

.scene-photo{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #eee;
  background: #f6f6f6;
  aspect-ratio: 16/9;
}

.scene-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scene-fallback{
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(255,122,64,.10), transparent 55%),
    linear-gradient(225deg, rgba(124,151,255,.10), transparent 55%),
    #f6f6f6;
}

.scene-label{
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #222;
}

.scene-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff7a40;
  display: inline-block;
}

.scene-title{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}

.scene-desc{
  margin: 0 0 18px;
  color: #555;
  line-height: 1.8;
}

.scene-actions{
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.scene-features{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: #666;
  font-weight: 600;
}

.scene-features li{
  background: #fafafa;
  border: 1px solid #eee;
  padding: 8px 12px;
  border-radius: 999px;
}

/* ---- Hub Launcher ---- */
.home-hub{
  margin: 18px 0 24px;
}

.home-hub__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.home-hub__card{
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 18px;
  text-decoration: none;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}

.home-hub__card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.home-hub__card .t{
  font-weight: 900;
  color: #111;
  margin-bottom: 6px;
}

.home-hub__card .d{
  color: #666;
  line-height: 1.5;
}

.home-hub__card.is-primary{
  border-color: rgba(255,122,64,.35);
  background: rgba(255,122,64,.06);
}

/* ---- Latest ---- */
.home-latest__grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
}

.home-block{
  border: 1px solid #eee;
  border-radius: 22px;
  background: #fff;
  padding: 18px;
}

.home-block__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.home-h2{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.home-more{
  color: #666;
  text-decoration: none;
  font-weight: 700;
}

.home-list{
  display: grid;
  gap: 10px;
}

.home-item{
  display: block;
  text-decoration: none;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

.home-item__title{
  font-weight: 900;
  color: #111;
  margin-bottom: 6px;
}

.home-item__meta{
  color: #777;
  font-size: 13px;
}

.home-item__meta .dot{
  margin: 0 6px;
}

.home-thumbgrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.home-thumb{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #eee;
  aspect-ratio: 16/11;
  background: #f5f5f5;
  display: block;
}

.home-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-thumb-fallback{
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(255,122,64,.10), transparent 55%),
    linear-gradient(225deg, rgba(124,151,255,.10), transparent 55%),
    #f5f5f5;
}

/* =========================
   MOBILE (360x740 기준)
========================= */
@media (max-width: 420px){

  .emotion-hero{
    padding: 54px 16px 40px;
    border-radius: 22px;
  }

  .emotion-slogan-stage{
    min-height: 78px;
  }

  .emotion-slogan{
    font-size: 28px;
  }

  .emotion-desc{
    font-size: 15px;
    margin-top: 34px;
  }

  .emotion-cta{
    flex-direction: column;
  }

  .emotion-scene{
    padding: 16px;
    border-radius: 22px;
  }

  .scene-grid{
    grid-template-columns: 1fr;
  }

  .scene-title{
    font-size: 22px;
  }

  .scene-actions{
    flex-direction: column;
  }

  .home-hub__grid{
    grid-template-columns: 1fr 1fr;
  }

  .home-latest__grid{
    grid-template-columns: 1fr;
  }
}

/* 허브 히어로를 감성 카드처럼 */
.hub-hero{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(60% 60% at 18% 18%, rgba(255,122,64,.14), transparent 60%),
    radial-gradient(55% 55% at 82% 78%, rgba(90,120,255,.12), transparent 62%),
    linear-gradient(180deg, #ffffff, #ffffff);
  box-shadow: 0 24px 60px rgba(0,0,0,.06);
}

/* 은은한 공기감(블러) */
.hub-hero::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(255,122,64,.18), transparent 70%),
    radial-gradient(38% 38% at 70% 70%, rgba(90,120,255,.16), transparent 72%);
  filter: blur(18px);
  opacity:.55;
  pointer-events:none;
}

/* 미세 노이즈(텍스처) */
.hub-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity:.35;
  pointer-events:none;
}

.slogan-stack{
  position: relative;
  padding: 18px 18px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  display: grid;
  gap: 10px;
  max-width: 520px;
}

/* 초기 전체 노출 느낌 */
.slogan-stack:not(.is-ready) .slogan-item{
  opacity: .35;
}

/* 기본 */
.slogan-item{
  font-weight: 900;
  letter-spacing: -0.04em;
  font-size: 28px;
  color: #111;
  opacity: .28;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}

/* 활성 */
.slogan-item.is-active{
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

/* 활성 하이라이트(살구색 밑면) */
.slogan-item.is-active::after{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  bottom:-6px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,122,64,.16);
  z-index:-1;
}

/* 서브라인 */
.slogan-subline{
  margin-top: 12px;
  color: #666;
  font-weight: 700;
  line-height: 1.6;
  max-width: 520px;
}

@media (max-width: 420px){
  .slogan-stack{ max-width: 100%; padding: 14px; }
  .slogan-item{ font-size: 20px; }
  .slogan-subline{ font-size: 13px; }
}

.hub-card{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.85);
  transition: transform .15s ease, box-shadow .2s ease;
}

.hub-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

.hub-card__m{
  margin-top: 10px;
  color: #777;
  font-weight: 700;
  font-size: 13px;
}

/* 2컬럼 */
.hub-hero__top--split{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: start;
}

@media (max-width: 920px){
  .hub-hero__top--split{
    grid-template-columns: 1fr;
  }
  .hub-hero__right{ display:none; } /* 모바일은 감성 요소 과하면 숨겨도 됨 */
}

/* 타이핑 */
.slogan-typing{
  display:flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  max-width: 560px;
}

.typing-prefix{
  font-weight: 900;
  color: #3e55ff; /* 기존 Better Senior Care 느낌 */
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.typing-text{
  font-weight: 900;
  letter-spacing: -0.04em;
  font-size: 28px;
  color: #111;
}

.typing-caret{
  width: 2px;
  height: 1.15em;
  background: rgba(0,0,0,.55);
  display:inline-block;
  transform: translateY(2px);
  animation: caretBlink 1s steps(1) infinite;
}

@keyframes caretBlink{
  50%{ opacity: 0; }
}

@media (max-width: 420px){
  .typing-text{ font-size: 20px; }
  .typing-prefix{ font-size: 14px; }
}

/* 오른쪽 비주얼 */
.hub-visual{
  display:grid;
  gap: 14px;
}

.hub-visual__photo{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: #f7f7f7;
  min-height: 220px;
}

.hub-visual__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.hub-visual__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,.30));
  pointer-events:none;
}

.hub-visual__cap{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: #fff;
}

.cap-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  font-weight: 800;
}

.cap-title{
  margin-top: 10px;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.hub-visual__stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.vstat{
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
}

.vstat .k{
  font-size: 12px;
  color: #666;
  font-weight: 800;
}

.vstat .v{
  margin-top: 6px;
  font-size: 15px;
  color: #111;
  font-weight: 900;
}

/* =========================
   HOME (감성 강조형)
========================= */
.page--home{
  padding-bottom: 44px;
}
@media (max-width: 520px){
  .page--home{ padding-bottom: 56px; }
}

.home-hero{
  position: relative;
  border-radius: 26px;
  padding: 28px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  margin-top: 14px;
  margin-bottom: 18px;
}

.home-hero__bg{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(55% 45% at 20% 15%, rgba(62,85,255,.16), transparent 60%),
    radial-gradient(55% 45% at 80% 20%, rgba(255,180,120,.14), transparent 60%),
    radial-gradient(60% 50% at 50% 90%, rgba(80,200,160,.10), transparent 60%);
  filter: blur(10px);
  pointer-events:none;
}

.home-hero__grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 920px){
  .home-hero{
    padding: 18px;
    border-radius: 22px;
  }
  .home-hero__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .home-hero__right{ display:none; }
}

.home-hero__lead{
  margin-top: 14px;
  color: #333;
  line-height: 1.65;
  font-size: 15px;
}
@media (max-width: 420px){
  .home-hero__lead{
    font-size: 14px;
    margin-top: 12px;
  }
}

/* CTA */
.home-hero__cta{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.btn-link{
  display:inline-flex;
  align-items:center;
  padding: 10px 6px;
  font-weight: 900;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* badges (칩처럼 보이되 버튼 느낌 X) */
.home-badges{
  list-style:none;
  padding:0;
  margin: 14px 0 0;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.badge{
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 900;
  color: #333;
  cursor: default;           /* 클릭 유도 방지 */
  user-select: none;
}
.badge:hover{ transform:none; }

/* slogan typing */
.slogan-typing{
  display:flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  max-width: 620px;
}

.typing-prefix{
  font-weight: 900;
  color: #3e55ff;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-size: 14px;
}

.typing-text{
  font-weight: 900;
  letter-spacing: -0.04em;
  font-size: 30px;
  color: #111;
}

.typing-caret{
  width: 2px;
  height: 1.15em;
  background: rgba(0,0,0,.55);
  display:inline-block;
  transform: translateY(2px);
  animation: caretBlink 1s steps(1) infinite;
}

@keyframes caretBlink{
  50%{ opacity: 0; }
}

.slogan-subline{
  margin-top: 10px;
  color:#555;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (max-width: 420px){
  .slogan-typing{
    padding: 12px 14px;
    border-radius: 16px;
  }
  .typing-text{ font-size: 20px; }
  .typing-prefix{ font-size: 12px; }
  .slogan-subline{ font-size: 13px; }
}

/* RIGHT visual */
.home-visual{
  display:grid;
  gap: 12px;
}

.home-visual__photo{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: #f7f7f7;
  min-height: 240px;
}

.home-visual__photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.home-visual__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,.32));
  pointer-events:none;
}

.home-visual__cap{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: #fff;
}

.cap-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  font-weight: 900;
}

.cap-title{
  margin-top: 10px;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.03em;
}
.cap-desc{
  margin-top: 6px;
  font-size: 13px;
  opacity: .9;
}

.home-visual__stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.vstat{
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(0,0,0,.06);
}

.vstat .k{
  font-size: 12px;
  color: #666;
  font-weight: 900;
}
.vstat .v{
  margin-top: 6px;
  font-size: 15px;
  color: #111;
  font-weight: 900;
}

/* Launcher cards */
.home-launcher{
  position: relative;
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 920px){
  .home-launcher{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.home-card{
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  text-decoration:none;
  color:#111;
  transition: transform .14s ease;
}
.home-card:hover{ transform: translateY(-2px); }
.home-card__t{ font-weight: 900; letter-spacing: -0.03em; }
.home-card__d{ margin-top: 6px; color:#666; font-weight: 700; font-size: 13px; }

.home-card--primary{
  background: rgba(62,85,255,.10);
  border-color: rgba(62,85,255,.20);
}

/* Sections below */
.home-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 920px){
  .home-row{ grid-template-columns: 1fr; }
}

.home-panel{
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
}

.home-panel__head,
.home-block__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.home-h2{
  margin:0;
  font-size: 18px;
  letter-spacing: -0.03em;
  font-weight: 900;
}
.home-more{
  font-weight: 900;
  color: #3e55ff;
  text-decoration: none;
}
.home-more:hover{ text-decoration: underline; text-underline-offset: 3px; }

.home-bullets{
  margin: 12px 0 0;
  padding-left: 18px;
  color:#333;
  line-height: 1.7;
  font-weight: 700;
}

.home-kv{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 420px){
  .home-kv{ grid-template-columns: 1fr; }
}
.home-k{
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
}
.home-k__label{ font-size: 12px; color:#666; font-weight: 900; }
.home-k__value{ margin-top: 6px; font-weight: 900; color:#111; }

.home-note{
  margin-top: 12px;
  color:#555;
  line-height: 1.6;
  font-weight: 700;
}

/* Latest grid */
.home-latest{
  margin-top: 18px;
}
.home-latest__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
}
@media (max-width: 920px){
  .home-latest__grid{ grid-template-columns: 1fr; }
}

.home-block{
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
}

.home-list{ margin-top: 10px; display:grid; gap: 10px; }
.home-item{
  text-decoration:none;
  color:#111;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.78);
}
.home-item:hover{ transform: translateY(-1px); }
.home-item__title{ font-weight: 900; letter-spacing: -0.03em; }
.home-item__meta{ margin-top: 6px; color:#666; font-weight: 700; font-size: 12px; }
.dot{ margin: 0 6px; opacity: .7; }

.home-thumbgrid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.home-thumb{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: #f4f4f4;
  display:block;
  aspect-ratio: 1 / 1;
}
.home-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.home-thumb-fallback{
  width:100%;
  height:100%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(62,85,255,.14), transparent 60%),
    radial-gradient(60% 60% at 80% 20%, rgba(255,180,120,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.2));
}

/* ✅ 타이핑 영역이 흔들리지 않게 "고정" */
.slogan-typing{
  display:flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);

  /* 🔥 고정 폭: 데스크탑에서 안정감 */
  max-width: 620px;
  width: 100%;
}

/* prefix는 길이 고정 */
.typing-prefix{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 🔥 텍스트 영역은 "남은 공간"으로 고정 */
.typing-text{
  flex: 1 1 auto;
  min-width: 0;

  /* 🔥 한 줄 고정 + 넘치면 ... */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-weight: 900;
  letter-spacing: -0.04em;
  font-size: 30px;
  line-height: 1.15;

  /* ✅ 높이 고정(라인 높이 기준) */
  height: 1.15em;
  display:block;
}

/* caret도 높이 고정 */
.typing-caret{
  flex: 0 0 auto;
  width: 2px;
  height: 1.15em;
  background: rgba(0,0,0,.55);
  display:inline-block;
  transform: translateY(2px);
  animation: caretBlink 1s steps(1) infinite;
}

/* 모바일 최적화(360x740) */
@media (max-width: 420px){
  .slogan-typing{
    padding: 12px 14px;
    border-radius: 16px;
    max-width: 100%;
  }
  .typing-text{
    font-size: 20px;
    height: 1.15em;
  }
  .typing-prefix{
    font-size: 12px;
  }
}

/* =========================
   HOME — IMMERSIVE
========================= */
.container--home{ max-width: 1100px; }

.page--home{ padding: 0; } /* 메인은 섹션이 자체 여백 가짐 */

.home-immersive{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  margin: 18px 0 26px;
  min-height: 520px;
}

.home-immersive__bg{
  position:absolute; inset:0;
}
.home-immersive__bgImg{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.02);
  display:block;
}

.home-immersive__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 20% 20%, rgba(255,255,255,.20), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.70) 100%);
  pointer-events:none;
}

.home-immersive__inner{
  position:relative;
  padding: 34px;
  display:grid;
  gap: 22px;
}

.home-immersive__brand{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.home-logo{
  height: 34px;
  width: auto;
  display:block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

.home-sloganStack{
  position: relative;
  height: 34px; /* 고정 높이(레이아웃 흔들림 방지) */
  overflow: hidden;
}
.home-slogan{
  position:absolute;
  left:0; top:0;
  width:100%;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  color: rgba(255,255,255,.95);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.home-slogan.is-active{
  opacity:1;
  transform: translateY(0);
}

.home-immersive__copy{
  max-width: 680px;
  color: rgba(255,255,255,.92);
}

.home-heroTitle{
  margin: 0 0 10px;
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.home-heroDesc{
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.90);
  text-shadow: 0 12px 24px rgba(0,0,0,.30);
}

.home-heroCta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.home-heroFacts{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.86);
  font-size: 14px;
}
.home-heroFacts .dot{
  display:inline-block;
  width:6px; height:6px;
  border-radius: 99px;
  margin-right: 8px;
  background: rgba(255,255,255,.8);
  vertical-align: middle;
}

.home-scrollCue{
  margin-top: 4px;
  width: fit-content;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.86);
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  padding: 6px 0;
}
.home-scrollCue__line{
  width: 44px;
  height: 1px;
  background: rgba(255,255,255,.65);
}
.home-scrollCue__text{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-hub{ padding: 18px 0 10px; }
.home-sectionHead{ margin: 0 0 14px; }
.home-h2{
  margin:0;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.home-sub{
  margin: 6px 0 0;
  color: rgba(0,0,0,.60);
  font-size: 14px;
}

.home-hubGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.home-hubCard{
  border-radius: 16px;
  padding: 16px;
  text-decoration:none;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 24px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
  color: inherit;
  cursor: pointer;
}
.home-hubCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,.10);
}
.home-hubCard .t{
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.home-hubCard .d{
  color: rgba(0,0,0,.62);
  font-size: 13px;
  line-height: 1.35;
}
.home-hubCard--primary{
  background: rgba(0,0,0,.85);
  color: #fff;
  border-color: rgba(255,255,255,.08);
}
.home-hubCard--primary .d{ color: rgba(255,255,255,.80); }

.home-latest{ padding: 16px 0 38px; }
.home-latestGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.home-block{
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 24px rgba(0,0,0,.06);
  padding: 16px;
}
.home-blockHead{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  margin-bottom: 12px;
}
.home-more{
  font-size: 13px;
  color: rgba(0,0,0,.55);
  text-decoration:none;
}
.home-more:hover{ text-decoration: underline; }

.home-list{ display:flex; flex-direction:column; gap: 10px; }
.home-item{
  text-decoration:none;
  color: inherit;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.05);
  background: rgba(255,255,255,.55);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.home-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.home-itemTitle{
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.home-itemMeta{
  font-size: 12px;
  color: rgba(0,0,0,.55);
}
.home-itemMeta .sep{ margin: 0 6px; }

.home-thumbGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.home-thumb{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.04);
}
.home-thumb img{
  width:100%; height:100%;
  display:block;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.home-thumbFallback{
  width:100%;
  aspect-ratio: 1/1;
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(0,0,0,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}

/* =========================
   Responsive (360x740 포함)
========================= */
@media (max-width: 1023px){
  .home-immersive{
    border-radius: 18px;
    min-height: 520px;
    margin: 12px 0 18px;
  }
  .home-immersive__inner{ padding: 22px; gap: 16px; }

  .home-logo{ height: 28px; }

  .home-sloganStack{ height: 30px; }
  .home-slogan{ font-size: 16px; }

  .home-heroTitle{ font-size: 28px; }
  .home-heroDesc{ font-size: 14px; }

  .home-hubGrid{
    grid-template-columns: 1fr 1fr;
  }
  .home-latestGrid{
    grid-template-columns: 1fr;
  }
  .home-thumbGrid{
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 380px){
  .home-immersive__inner{ padding: 18px; }
  .home-heroTitle{ font-size: 26px; }
  .home-heroFacts{ gap: 10px; font-size: 13px; }
}

/* ========= HOME IMMERSIVE (감성 강화) ========= */
.container--home{ max-width: 1100px; }
.page--home{ padding: 0; }

.home-immersive{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  margin: 18px 0 26px;
  min-height: 560px;
  box-shadow: 0 26px 70px rgba(0,0,0,.14);
}

.home-immersive__bg{ position:absolute; inset:0; }
.home-immersive__bgImg{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.04);
}

/* 비네팅 + 블룸 + 하단 안정감 */
.home-immersive__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(110% 90% at 20% 18%, rgba(255,255,255,.22), transparent 58%),
    radial-gradient(90% 70% at 80% 25%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.74) 100%);
  pointer-events:none;
}

/* 필름 그레인(아주 약하게) */
.home-immersive__grain{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0px, rgba(0,0,0,.06) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

.home-immersive__inner{
  position:relative;
  padding: 36px;
  display:grid;
  gap: 22px;
}

.home-logo{
  height: 34px;
  width: auto;
  display:block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.24));
}

.home-sloganStack{
  position: relative;
  height: 34px;
  overflow: hidden;
  margin-top: 10px;
}
.home-slogan{
  position:absolute;
  left:0; top:0;
  width:100%;
  opacity:0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
  color: rgba(255,255,255,.95);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 16px 34px rgba(0,0,0,.38);
}
.home-slogan.is-active{
  opacity:1;
  transform: translateY(0);
}

.home-immersive__copy{
  max-width: 720px;
  color: rgba(255,255,255,.92);
}

.home-heroTitle{
  margin: 0 0 12px;
  font-size: 42px;
  line-height: 1.16;
  letter-spacing: -0.035em;
  color: #fff;
  text-shadow: 0 18px 38px rgba(0,0,0,.42);
}

.home-heroDesc{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.90);
  text-shadow: 0 14px 28px rgba(0,0,0,.34);
}

/* 감성 한 줄 */
.home-whisper{
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 2px solid rgba(255,255,255,.55);
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  text-shadow: 0 12px 22px rgba(0,0,0,.30);
}

.home-heroCta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

/* 칩 느낌 제거하고 “정보 바”로 */
.home-factsBar{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.home-fact{
  font-size: 13px;
  color: rgba(255,255,255,.88);
  display:flex;
  align-items:center;
  gap: 8px;
}
.home-fact .dot{
  width:6px; height:6px;
  border-radius: 99px;
  background: rgba(255,255,255,.78);
}

.home-scrollCue{
  width: fit-content;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.86);
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  padding: 6px 0;
}
.home-scrollCue__line{
  width: 44px;
  height: 1px;
  background: rgba(255,255,255,.65);
}
.home-scrollCue__text{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ===== Responsive (360x740 최저) ===== */
@media (max-width: 1023px){
  .home-immersive{
    border-radius: 18px;
    min-height: 540px;
    margin: 12px 0 18px;
  }
  .home-immersive__inner{ padding: 22px; gap: 16px; }
  .home-logo{ height: 28px; }
  .home-sloganStack{ height: 30px; }
  .home-slogan{ font-size: 16px; }

  .home-heroTitle{ font-size: 28px; }
  .home-heroDesc{ font-size: 14px; }
  .home-whisper{ font-size: 13px; margin-bottom: 16px; }
}

@media (max-width: 380px){
  .home-immersive__inner{ padding: 18px; }
  .home-heroTitle{ font-size: 26px; }
  .home-factsBar{ padding: 9px 10px; gap: 10px; }
}

.home-immersive__overlay{
  position:absolute; inset:0;
  background:
    /* 브랜드 3색 “빛” 레이어 (아주 약하게) */
    radial-gradient(100% 80% at 18% 18%, rgba(255, 165, 80, .22), transparent 60%), /* warm */
    radial-gradient(90% 70% at 82% 22%, rgba(255, 210, 90, .18), transparent 62%),  /* yellow */
    radial-gradient(95% 75% at 55% 85%, rgba(120, 200, 120, .14), transparent 65%), /* green */

    /* 텍스트 가독성용 다크 베이스 */
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.62) 100%);
  pointer-events:none;
}

/* 슬로건/포인트에 브랜드 감성 */
.home-slogan.is-active{
  color: rgba(255,255,255,.96);
}
.home-heroTitle .accent{
  background: linear-gradient(90deg, rgba(255, 180, 90, 1), rgba(255, 225, 120, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* factsBar의 점 3색 순환 */
.home-factsBar .home-fact:nth-child(1) .dot{ background: rgba(255, 165, 80, .92); }
.home-factsBar .home-fact:nth-child(2) .dot{ background: rgba(255, 210, 90, .92); }
.home-factsBar .home-fact:nth-child(3) .dot{ background: rgba(120, 200, 120, .88); }

:root{
  --brand-warm: #FFA550;   /* 오렌지 */
  --brand-sun:  #FFD25A;   /* 옐로 */
  --brand-leaf: #78C878;   /* 그린 */
}

/* HERO 래퍼 */
.home-immersive{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: #111;
  isolation: isolate; /* 합성 레이어 분리 */
}

/* 배경 이미지 */
.home-immersive__bgImg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  transform: translateZ(0);     /* GPU 안정화 */
  backface-visibility: hidden;
  will-change: transform;
}

/* 오버레이(여기에만 그라데이션/톤) */
.home-immersive__overlay{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(100% 80% at 18% 18%, rgba(255,165,80,.22), transparent 60%),
    radial-gradient(90% 70% at 82% 22%, rgba(255,210,90,.18), transparent 62%),
    radial-gradient(95% 75% at 55% 85%, rgba(120,200,120,.14), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.62) 100%);
}

/* 배경 전체에는 절대 backdrop-filter 금지 */
.home-immersive,
.home-immersive__overlay,
.home-immersive__bgImg{
  backdrop-filter: none !important;
}

/* 필요하면 텍스트 박스/칩 바 같은 작은 요소에만 */
.home-immersive .glass{
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

.home-immersive{
  overflow: visible;         /* hidden 제거 */
  clip-path: inset(0 round 28px); /* 대신 클립으로 라운드 */
}

.home-immersive{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;          /* 이미지 없을 때도 검정 방지 */
  min-height: 520px;         /* 데스크탑 기준 */
}

.home-immersive__bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.home-immersive__bgImg{
  width:100%;
  height:100%;
  object-fit: cover;         /* ✅ 전체 꽉차게 */
  object-position: 50% 35%;  /* 얼굴/중심이 위쪽이면 이렇게 */
  transform: translateZ(0);
  backface-visibility:hidden;
}

/* 오버레이는 ‘브랜드 컬러’로 은은하게 */
.home-immersive__overlay{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
}

/* 그레인 있으면 아주 약하게 */
.home-immersive__grain{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.06;
  mix-blend-mode:multiply;
}

.home-immersive__inner{
  position: relative;
  z-index:3;
  padding: 16px;
}

.home-programRoll{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:18px;
  padding: 12px 14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}

.home-programRoll .label{
  font-weight:700;
  color:#222;
  white-space:nowrap;
}

.home-programRoll .roll{
  position:relative;
  height: 22px;              /* ✅ 고정 높이 */
  overflow:hidden;
  flex:1;
}

.home-programRoll .item{
  position:absolute;
  inset:0;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  color:#444;
  font-weight:600;
}

.home-programRoll .item.is-active{
  opacity:1;
  transform: translateY(0);
}

.home-copyCard{
  max-width: 620px;
  padding: 26px 26px 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(1px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* 텍스트 색을 “진한 회색”으로 */
.home-heroTitle{ color:#1f2328; }
.home-heroDesc{ color:#2b3138; }
.home-whisper{ color:#3a424c; opacity:.9; }

/* 강조색은 기존 브랜드 오렌지/옐로우 쪽 */
.home-heroTitle .accent{ color: #ff7a3d; }

.home-sloganStack{
  height: 70px;             /* 고정 높이 유지 */
}

.home-slogan{
  font-size: 42px;          /* ✅ 크게 */
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #1d2126;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}

@media (max-width: 480px){
  .home-slogan{
    font-size: 30px;
  }
}

.home-slogan.is-active{
  opacity: 1;
  transform: translateY(0);
}

/* 영어 슬로건만 살짝 톤 다르게 */
.home-slogan:nth-child(2){
  font-weight: 800;
}

.home-programCarousel{
  margin-top: 22px;
}

.prog-track{
  display:flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.prog-track::-webkit-scrollbar{ height: 8px; }
.prog-track::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius:999px; }

.prog-card{
  flex: 0 0 320px;             /* 데스크탑 카드 폭 */
  scroll-snap-align: start;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}

.prog-name{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.prog-one{
  margin-top: 6px;
  color:#ff7a3d;               /* 브랜드 포인트 */
  font-weight: 800;
}

.prog-desc{
  margin-top: 10px;
  color:#3a424c;
  line-height: 1.55;
}

/* 작은 모바일(360폭) 대응 */
@media (max-width: 420px){
  .prog-card{ flex-basis: 86vw; }  /* 화면 폭에 맞게 */
}

/* ===== Program Spotlight (auto rolling) ===== */
.prog-spotlight{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  padding: 16px;
  min-height: 168px;
}

.prog-card{
  position: absolute;
  inset: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

.prog-card.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.prog-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background:
    linear-gradient(90deg, rgba(255,122,61,.14), rgba(255,199,81,.12), rgba(102,160,91,.10));
  color:#0f141b;
}

.prog-title{
  margin-top: 12px;
  font-size: 20px;
  font-weight: 900;
  color:#0f141b;
  letter-spacing: -0.02em;
}

.prog-desc{
  margin-top: 6px;
  color:#374151;
  line-height: 1.55;
  font-weight: 600;
}

.prog-meta{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.prog-chip{
  font-size: 13px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color:#111827;
}

/* controls */
.prog-controls{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
}

.prog-btn{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  font-size: 20px;
  line-height: 1;
  cursor:pointer;
}

.prog-dots{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  flex:1;
}

.prog-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}
.prog-dot.is-active{
  width: 18px;
  background: rgba(255,122,61,.70);
}

/* mobile tuning */
@media (max-width: 420px){
  .prog-spotlight{
    padding: 14px;
    min-height: 178px;
  }
  .prog-card{ inset: 14px; }
  .prog-title{ font-size: 18px; }
  .prog-desc{ font-size: 14px; }
}

/* ===== Program Spotlight Theme Tokens ===== */
.prog-card{
  --p1: rgba(255,122,61,.18);  /* default */
  --p2: rgba(255,199,81,.14);
  --p3: rgba(102,160,91,.12);
  --accent: rgba(255,122,61,.75);
}

/* themes */
.prog-card[data-theme="vital"]{   /* 활력피움: green 중심 */
  --p1: rgba(102,160,91,.18);
  --p2: rgba(255,199,81,.14);
  --p3: rgba(255,122,61,.10);
  --accent: rgba(102,160,91,.80);
}
.prog-card[data-theme="sound"]{   /* 소리피움: yellow 중심 */
  --p1: rgba(255,199,81,.20);
  --p2: rgba(255,122,61,.14);
  --p3: rgba(102,160,91,.10);
  --accent: rgba(255,199,81,.88);
}
.prog-card[data-theme="color"]{   /* 오색피움: orange 중심 */
  --p1: rgba(255,122,61,.22);
  --p2: rgba(255,199,81,.14);
  --p3: rgba(102,160,91,.10);
  --accent: rgba(255,122,61,.85);
}
.prog-card[data-theme="cog"]{     /* 인지피움: green+orange 균형 */
  --p1: rgba(102,160,91,.18);
  --p2: rgba(255,122,61,.16);
  --p3: rgba(255,199,81,.10);
  --accent: rgba(255,122,61,.70);
}
.prog-card[data-theme="wisdom"]{  /* 지혜피움: green 안정감 */
  --p1: rgba(102,160,91,.16);
  --p2: rgba(255,199,81,.12);
  --p3: rgba(255,122,61,.10);
  --accent: rgba(102,160,91,.70);
}

/* apply tokens */
.prog-badge{
  background: linear-gradient(90deg, var(--p1), var(--p2), var(--p3));
}

.prog-dot.is-active{
  background: var(--accent);
}

/* 제목의 강조(아주 살짝) */
.prog-title{
  text-decoration: none;
}
.prog-card.is-active .prog-title{
  text-shadow: 0 0 0 rgba(0,0,0,0); /* 유지용 */
}

/* 선택적으로: 카드 좌측 얇은 포인트 라인 */
.prog-card::before{
  content:"";
  position:absolute;
  left:-16px;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius: 999px;
  background: var(--accent);
  opacity:.55;
}
@media (max-width: 420px){
  .prog-card::before{ left:-14px; }
}

/* controls tint */
.prog-spotlight{
  --spot-accent: rgba(255,122,61,.75);
}
.prog-btn{
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.prog-spotlight .prog-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--spot-accent) 30%, transparent);
  border-color: color-mix(in srgb, var(--spot-accent) 45%, rgba(0,0,0,.12));
}

/* ===== Program Spotlight (namespaced) ===== */
.program-spotlight { margin-top: 22px; }
.program-spotlight__head { margin: 0 0 12px; }

.ps{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

/* ✅ 높이 고정 스테이지: 여기서 “들쑥날쑥” 해결 */
.ps-stage{
  position: relative;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  min-height: 180px;          /* 데스크탑 기본 높이 */
  padding: 14px 14px 10px;    /* 내부 여백 */
}

/* 카드 겹치기 + 전환 */
.ps-card{
  position: absolute;
  inset: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;

  /* theme defaults */
  --p1: rgba(255,122,61,.18);  /* orange */
  --p2: rgba(255,199,81,.14);  /* yellow */
  --p3: rgba(102,160,91,.12);  /* green */
  --accent: rgba(255,122,61,.75);
}
.ps-card.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* theme vars */
.ps-card[data-theme="vital"]{
  --p1: rgba(102,160,91,.18);
  --p2: rgba(255,199,81,.14);
  --p3: rgba(255,122,61,.10);
  --accent: rgba(102,160,91,.80);
}
.ps-card[data-theme="sound"]{
  --p1: rgba(255,199,81,.20);
  --p2: rgba(255,122,61,.14);
  --p3: rgba(102,160,91,.10);
  --accent: rgba(255,199,81,.88);
}
.ps-card[data-theme="color"]{
  --p1: rgba(255,122,61,.22);
  --p2: rgba(255,199,81,.14);
  --p3: rgba(102,160,91,.10);
  --accent: rgba(255,122,61,.85);
}
.ps-card[data-theme="cog"]{
  --p1: rgba(102,160,91,.18);
  --p2: rgba(255,122,61,.16);
  --p3: rgba(255,199,81,.10);
  --accent: rgba(255,122,61,.70);
}
.ps-card[data-theme="wisdom"]{
  --p1: rgba(102,160,91,.16);
  --p2: rgba(255,199,81,.12);
  --p3: rgba(255,122,61,.10);
  --accent: rgba(102,160,91,.70);
}

/* 왼쪽 포인트 라인(테마) */
.ps-card::before{
  content:"";
  position:absolute;
  left:-14px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius: 999px;
  background: var(--accent);
  opacity:.55;
}

/* badge */
.ps-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -.2px;
  background: linear-gradient(90deg, var(--p1), var(--p2), var(--p3));
  border: 1px solid rgba(0,0,0,.06);
  width: fit-content;
}

/* text */
.ps-title{
  margin: 14px 0 8px;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -.6px;
}
.ps-desc{
  margin: 0;
  color: rgba(0,0,0,.62);
  font-size: 15px;
  line-height: 1.55;
}

/* ✅ 감성 문장: 살짝 ‘슬라이드/페이드’ 느낌 */
.ps-whisper{
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 60%, rgba(0,0,0,.08));
  color: rgba(0,0,0,.58);
  font-size: 14px;
  line-height: 1.6;
  opacity: .95;
}

/* tags */
.ps-tags{
  display:flex;
  gap:8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.ps-tags li{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.65);
  font-size: 13px;
}

/* controls */
.ps-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  margin-top: 14px;
}
.ps-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.ps-dots{
  display:flex;
  gap: 8px;
  align-items:center;
}
.ps-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.08);
  cursor: pointer;
}
.ps-dot.is-active{
  background: var(--spot-accent, rgba(255,122,61,.75));
  border-color: color-mix(in srgb, var(--spot-accent, rgba(255,122,61,.75)) 60%, rgba(0,0,0,.12));
}

/* 모바일: 높이/타이포 살짝 줄임 */
@media (max-width: 420px){
  .ps-stage{ min-height: 210px; } /* 모바일은 줄바꿈이 늘어나니 오히려 약간 더 확보 */
  .ps-title{ font-size: 20px; }
}

/* 아이콘 */
.ps-ico{
  display:inline-flex;
  width: 22px;
  height: 22px;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 14px;
}

/* 배지 그라데이션이 '살짝' 흐르도록 */
.ps-badge{
  background-size: 220% 220%;
  animation: psGradient 6.5s ease-in-out infinite;
}

/* 카드 내부에 아주 은은한 컬러 빛(감성) */
.ps-card::after{
  content:"";
  position:absolute;
  inset: -30%;
  background: radial-gradient(60% 50% at 15% 20%, var(--p1), transparent 60%),
              radial-gradient(60% 50% at 85% 30%, var(--p2), transparent 65%),
              radial-gradient(70% 60% at 60% 90%, var(--p3), transparent 70%);
  opacity: .55;
  pointer-events:none;
  filter: blur(18px);
  transform: translateZ(0);
  z-index: -1;
}

/* 카드 자체 배경도 살짝 톤을 받게 */
.ps-stage{
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,1));
}

/* 그라데이션 애니메이션 */
@keyframes psGradient{
  0%   { background-position: 10% 20%; }
  50%  { background-position: 90% 80%; }
  100% { background-position: 10% 20%; }
}

/* 도트/버튼 디테일 업 */
.ps-btn{
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.ps-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.16);
}
.ps-dot{
  transition: transform .12s ease, background-color .2s ease, border-color .2s ease;
}
.ps-dot.is-active{
  transform: scale(1.2);
}

/* 모바일에서는 애니메이션 줄이기(과하면 부담) */
@media (max-width: 420px){
  .ps-badge{ animation-duration: 8.5s; }
  .ps-card::after{ opacity: .45; filter: blur(16px); }
}

.home-quick{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
  align-items: stretch;
  margin: 26px 0 10px;
}

.home-quick__left{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}

.home-quick__whisper{
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(255,122,61,.45);
  color: rgba(0,0,0,.62);
  line-height: 1.65;
}

.home-quick__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quick-card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .18s ease;
  display:flex;
  flex-direction: column;
  justify-content: center;
  min-height: 86px;
}
.quick-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
}
.quick-card .t{
  font-weight: 900;
  letter-spacing: -.3px;
  font-size: 16px;
}
.quick-card .d{
  margin-top: 6px;
  color: rgba(0,0,0,.55);
  font-size: 13px;
}

.quick-card--primary{
  background: linear-gradient(135deg, rgba(255,122,61,.10), rgba(255,199,81,.10));
  border-color: rgba(255,122,61,.22);
}

@media (max-width: 860px){
  .home-quick{ grid-template-columns: 1fr; }
}
@media (max-width: 420px){
  .home-quick__grid{ grid-template-columns: 1fr; }
}

/* 감성 문장 기본 */
.home-whisper{
  margin-top: 10px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;   /* 긴 문장도 안전 */
}

/* ✅ 혹시 말줄임/한줄고정이 걸려있다면 전부 해제 */
.home-whisper{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;

  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* 모바일 최적화 */
@media (max-width: 420px){
  .home-whisper{
    font-size: 13px;
    line-height: 1.65;
    padding-right: 2px;   /* 가장자리 글자 끊김 방지 */
  }
}

@media (max-width: 420px){
  .home-immersive__inner,
  .home-immersive__copy{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 420px){
  .home-whisper{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
}

.home-programs { margin-top: 26px; }

.prog-slider{
  border: 1px solid #eee;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  padding: 18px 18px 14px;
}

.prog-viewport{
  overflow: hidden;
  border-radius: 20px;
}

.prog-track{
  display: flex;
  gap: 14px;
  will-change: transform;
  transition: transform 520ms cubic-bezier(.22,.7,.2,1);
}

.prog-card{
  flex: 0 0 100%;
  border-radius: 20px;
  padding: 22px 22px 18px;
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
  min-height: 220px;
}

@media (min-width: 980px){
  .prog-card{ padding: 28px 28px 22px; min-height: 240px; }
}

/* 상단 */
.prog-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 14px;
}
.prog-pill{
  display:inline-flex;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
}
.prog-mini{ color:#6b7280; font-weight: 600; }

.prog-title{ margin: 0 0 10px; font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
.prog-desc{ margin: 0 0 10px; color:#374151; font-weight: 600; }
.prog-whisper{
  margin: 0 0 14px;
  color:#111827;
  opacity: .9;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.prog-tags{ display:flex; gap:8px; flex-wrap: wrap; }
.prog-tags .tag{
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.6);
}

/* 컨트롤 */
.prog-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin-top: 12px;
}
.prog-btn{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.prog-dots{ display:flex; gap: 8px; align-items:center; }
.prog-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.15);
}
.prog-dot.is-active{ background: rgba(0,0,0,.55); width: 18px; }

/* ✅ 테마 컬러(부드러운 빛) */
.theme-vital{ background: linear-gradient(135deg, rgba(255,118,66,.10), rgba(255,255,255,.75)); }
.theme-sound{ background: linear-gradient(135deg, rgba(255,196,72,.12), rgba(255,255,255,.75)); }
.theme-color{ background: linear-gradient(135deg, rgba(106,193,124,.12), rgba(255,255,255,.75)); }
.theme-cog{   background: linear-gradient(135deg, rgba(90,165,255,.10), rgba(255,255,255,.75)); }
.theme-wise{  background: linear-gradient(135deg, rgba(185,147,255,.10), rgba(255,255,255,.75)); }

/* 모바일 폰트만 살짝 다운 */
@media (max-width: 420px){
  .prog-title{ font-size: 22px; }
  .prog-desc{ font-size: 14px; }
  .prog-whisper{ font-size: 13px; }
}

/* === Program Slider === */
.home-program{ margin-top: 28px; }

.prog-slider{
  position: relative;
  overflow: hidden;            /* ✅ 흘러나오는 것 숨김 */
  border-radius: 18px;
  min-height: 160px;           /* ✅ 흰색만 나올 때 1순위 해결 */
  background: #f6f3ef;          /* ✅ 배경 기본값 (테마 안 먹어도 흰색 방지) */
}

.prog-track{
  display: flex;               /* ✅ 옆으로 슬라이딩 */
  transition: transform .6s ease;
  will-change: transform;
}

.prog-slide{
  flex: 0 0 100%;
  padding: 18px 16px 18px;
  border-radius: 18px;         /* track 밖에서도 안전 */
  color: #1d2126;
  background: var(--bg, #f6f3ef);
}

/* 테마 컬러 (프로그램별) */
.prog-slide[data-theme="warm"]   { --bg: linear-gradient(135deg, rgba(255,153,102,.22), rgba(255,255,255,.85)); }
.prog-slide[data-theme="yellow"] { --bg: linear-gradient(135deg, rgba(255,214,102,.22), rgba(255,255,255,.85)); }
.prog-slide[data-theme="green"]  { --bg: linear-gradient(135deg, rgba( 92,193,146,.22), rgba(255,255,255,.85)); }
.prog-slide[data-theme="violet"] { --bg: linear-gradient(135deg, rgba(158,140,255,.22), rgba(255,255,255,.85)); }
.prog-slide[data-theme="lav"]    { --bg: linear-gradient(135deg, rgba(205,165,255,.22), rgba(255,255,255,.85)); }

.prog-badge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
}

.prog-title{
  margin: 10px 0 6px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.prog-desc{
  margin: 0;
  color: rgba(29,33,38,.85);
  line-height: 1.45;
  word-break: keep-all;        /* ✅ 모바일 잘림/뭉개짐 완화 */
}

/* dots */
.prog-dots{
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 10px 0 12px;
}

.prog-dots button{
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.18);
  cursor: pointer;
}
.prog-dots button.is-active{
  background: rgba(0,0,0,.45);
  transform: scale(1.2);
}

/* 모바일 */
@media (max-width: 480px){
  .prog-slider{ border-radius: 16px; min-height: 180px; }
  .prog-slide{ padding: 16px 14px 16px; }
  .prog-title{ font-size: 17px; }
  .prog-desc{ font-size: 14px; }
}

/* =========================
   HOME 5대 프로그램 슬라이더
========================= */
.home-prog{ margin-top: 28px; }

.home-progSlider{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #f6f3ef;     /* ✅ 테마가 안 먹어도 흰색 방지 */
  min-height: 240px;       /* ✅ 높이 0 이슈 방지 */
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.home-progTrack{
  display: flex;           /* ✅ 필수 */
  width: 100%;
  transition: transform .65s ease;
  will-change: transform;
}

.home-progSlide{
  flex: 0 0 100%;
  padding: 18px 16px 16px;
  background: var(--bg, #f6f3ef);
  color: #1d2126;
}

.home-progSlide[data-theme="warm"]{
  --bg: radial-gradient(120% 90% at 20% 10%, rgba(255,153,102,.30), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}
.home-progSlide[data-theme="yellow"]{
  --bg: radial-gradient(120% 90% at 20% 10%, rgba(255,214,102,.30), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}
.home-progSlide[data-theme="green"]{
  --bg: radial-gradient(120% 90% at 20% 10%, rgba(92,193,146,.30), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}
.home-progSlide[data-theme="violet"]{
  --bg: radial-gradient(120% 90% at 20% 10%, rgba(158,140,255,.30), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}
.home-progSlide[data-theme="lav"]{
  --bg: radial-gradient(120% 90% at 20% 10%, rgba(205,165,255,.30), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}

.home-progTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.home-progBadge{
  display:inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.07);
  backdrop-filter: blur(6px);
}

.home-progIcon{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  animation: homeProgFloat 3.6s ease-in-out infinite;
}
@keyframes homeProgFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

.home-progTitle{
  margin: 12px 0 8px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.home-progDesc{
  margin: 0 0 12px;
  color: rgba(29,33,38,.86);
  line-height: 1.5;
  word-break: keep-all;
}

.home-progPoints{
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 8px;
}
.home-progPoints li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(29,33,38,.86);
}
.home-progPoints li::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-top: 7px;
  background: rgba(29,33,38,.35);
  flex: 0 0 auto;
}

/* Nav */
.home-progNav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 12px 12px;
}

.home-progBtn{
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  cursor: pointer;
}
.home-progBtn:hover{ background: rgba(255,255,255,.95); }

.home-progDots{
  display:flex;
  gap: 6px;
  align-items:center;
  justify-content:center;
}

.home-progDots button{
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.22);
  cursor: pointer;
}
.home-progDots button.is-active{
  background: rgba(0,0,0,.55);
  transform: scale(1.2);
}

/* 모바일 */
@media (max-width: 480px){
  .home-progSlider{ border-radius: 16px; min-height: 270px; }
  .home-progSlide{ padding: 16px 14px 14px; }
  .home-progTitle{ font-size: 17px; }
  .home-progDesc{ font-size: 14px; }
}

/* ===== HOME 5대 프로그램 : calm infinite ===== */
.home-prog{ margin-top: 28px; }

.home-progSlider{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #f7f4f0;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

/* track: JS가 translate로 이동 */
.home-progTrack{
  display: flex;
  gap: 14px;
  padding: 14px;
  will-change: transform;
}

/* ✅ 한 화면에 1개(모바일), 2개(데스크탑)로 보이게 */
.home-progSlide{
  flex: 0 0 86%;
  border-radius: 16px;
  padding: 18px 16px 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  color: #1d2126;
}

/* 데스크탑: 2장 보이게 */
@media (min-width: 900px){
  .home-progSlide{ flex-basis: 46%; }
}

/* ✅ 테마는 과하게 안 튀게, “은은한 상단 빛”만 */
.home-progSlide::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 16px;
  pointer-events:none;
  background: radial-gradient(120% 70% at 10% 0%, rgba(255,200,150,.22), transparent 60%);
  opacity: .9;
}
.home-progSlide{ position: relative; }

.home-progSlide[data-theme="yellow"]::before{
  background: radial-gradient(120% 70% at 10% 0%, rgba(255,220,120,.22), transparent 60%);
}
.home-progSlide[data-theme="green"]::before{
  background: radial-gradient(120% 70% at 10% 0%, rgba(120,220,170,.18), transparent 60%);
}
.home-progSlide[data-theme="violet"]::before{
  background: radial-gradient(120% 70% at 10% 0%, rgba(170,150,255,.18), transparent 60%);
}
.home-progSlide[data-theme="lav"]::before{
  background: radial-gradient(120% 70% at 10% 0%, rgba(210,170,255,.18), transparent 60%);
}

/* 상단 라벨 (아이콘 흔들림 제거) */
.home-progTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.home-progBadge{
  display:inline-flex;
  align-items:center;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
}

.home-progIcon{
  width: 32px; height: 32px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
  /* ✅ 눈아픈 애니메이션 제거 */
}

.home-progTitle{
  margin: 12px 0 8px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.home-progDesc{
  margin: 0 0 12px;
  color: rgba(29,33,38,.86);
  line-height: 1.55;
  word-break: keep-all;
}

.home-progPoints{
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 8px;
}
.home-progPoints li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(29,33,38,.86);
}
.home-progPoints li::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 8px;
  background: rgba(29,33,38,.30);
  flex: 0 0 auto;
}

/* 모바일 텍스트 잘림 방지 */
@media (max-width: 480px){
  .home-progTrack{ padding: 12px; gap: 12px; }
  .home-progSlide{ flex-basis: 92%; padding: 16px 14px 14px; }
  .home-progTitle{ font-size: 17px; }
  .home-progDesc{ font-size: 14px; }
}

:root{
  --ink:#242021;
  --paper:#FFFBF5;

  --warm:#DD6547;   /* warm orange */
  --sun:#EEB53A;    /* yellow */
  --leaf:#6C8A5D;   /* green */

  --line: rgba(36,32,33,.10);
  --shadow: 0 12px 32px rgba(36,32,33,.10);
}

/* ===== Program Marquee (5대 프로그램) ===== */
.home-programMarquee{
  margin: 22px 0 0;
}

.pmq{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 가장자리 페이드 마스크(눈부심 줄이기) */
.pmq__mask{
  pointer-events: none;
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(255,251,245,0) 12%, rgba(255,251,245,0) 88%, var(--paper) 100%);
  z-index: 2;
}

/* 트랙 */
.pmq__track{
  display: flex;
  gap: 12px;
  padding: 14px;
  width: max-content;
  will-change: transform;
  animation: pmq-move 26s linear infinite;
}

/* 너무 눈 아프면 속도만 늘려: 32~40s 추천 */
@keyframes pmq-move{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* JS에서 내용 2번 붙이면 -50%가 딱 맞음 */
}

/* hover하면 잠깐 멈춤(데스크탑 UX) */
@media (hover:hover){
  .pmq:hover .pmq__track{ animation-play-state: paused; }
}

/* 카드(높이/정렬 고정) */
.pmq__card{
  min-width: 240px;
  max-width: 240px;
  height: 112px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(36,32,33,.10);
  background: rgba(255,255,255,.65);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.pmq__badge{
  display: inline-flex;
  align-items:center;
  width: fit-content;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}

.pmq__title{
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pmq__desc{
  font-size: 12.5px;
  color: rgba(36,32,33,.78);
  line-height: 1.35;
  /* 모바일에서 짤리는 문제: 2줄까지 허용 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 테마(프로그램별 컬러) */
.pmq__card.is-warm .pmq__badge{ background: rgba(221,101,71,.14); color: var(--warm); border:1px solid rgba(221,101,71,.22); }
.pmq__card.is-sun  .pmq__badge{ background: rgba(238,181,58,.16); color: #9A6A00; border:1px solid rgba(238,181,58,.25); }
.pmq__card.is-leaf .pmq__badge{ background: rgba(108,138,93,.16); color: var(--leaf); border:1px solid rgba(108,138,93,.25); }
.pmq__card.is-ink  .pmq__badge{ background: rgba(36,32,33,.08);  color: rgba(36,32,33,.85); border:1px solid rgba(36,32,33,.14); }

/* 모바일 최적화(360px 기준) */
@media (max-width: 420px){
  .pmq__track{ padding: 12px; gap: 10px; animation-duration: 30s; }
  .pmq__card{ min-width: 220px; max-width: 220px; height: 118px; }
}

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .pmq__track{ animation: none; }
  .pmq__mask{ background: none; }
}

/* =========================
   HUB GRID
========================= */

.home-hubGrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 1024px){
  .home-hubGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px){
  .home-hubGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* =========================
   HUB CARD
========================= */
.home-hubCard{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: all .35s ease;
  position: relative;
  overflow: hidden;
}

/* 은은한 브랜드 빛 */
.home-hubCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 80% 20%, rgba(221,101,71,.06), transparent 60%);
  opacity:0;
  transition: opacity .35s ease;
}

/* hover 효과 (과하지 않게) */
.home-hubCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(36,32,33,.08);
}

.home-hubCard:hover::before{
  opacity:1;
}

/* =========================
   ICON
========================= */
.home-hubIcon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(36,32,33,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.home-hubIcon svg{
  width: 22px;
  height: 22px;
  stroke: var(--ink);
  stroke-linejoin: round;
}

/* primary 카드 */
.home-hubCard--primary{
  border-color: rgba(221,101,71,.25);
  background: linear-gradient(135deg, rgba(221,101,71,.08), rgba(238,181,58,.05));
}

.home-hubCard--primary .home-hubIcon{
  background: rgba(221,101,71,.12);
}

.home-hubCard--primary svg{
  stroke: var(--warm);
}

/* =========================
   TEXT
========================= */
.home-hubText .t{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.home-hubText .d{
  font-size: 13px;
  margin-top: 4px;
  color: rgba(36,32,33,.65);
}

/* 기본: 데스크탑에서만 줄바꿈 보이기 */
.only-desktop{ display:inline; }

/* 모바일: 강제 줄바꿈 제거 → 문장 자연 연결 */
@media (max-width: 480px){
  .only-desktop{ display:none; }
}

.home-heroDesc{
  word-break: keep-all;
  overflow-wrap: break-word;
}

.story-title{
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.story-100{
  font-size: 1.25em;              /* 전체보다 더 크게 */
  font-weight: 900;
  color: #f28c28;                  /* 웜 오렌지 */
  position: relative;
}

.story-100::after{
  content:"";
  position:absolute;
  left:0;
  bottom:4px;
  width:100%;
  height:8px;
  background: rgba(242,140,40,.18);
  z-index:-1;
  border-radius:6px;
}

.brand-diff{
  font-size: clamp(28px, 3.5vw, 24px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  margin-top: 6px;
}

.brand-diff span{
  color: #7bbf6a;                /* 브랜드 그린 */
  position: relative;
}

.brand-diff span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:6px;
  width:100%;
  height:10px;
  background: rgba(123,191,106,.18);
  z-index:-1;
  border-radius:8px;
}

@keyframes fadeUpSoft{
  from{
    opacity:0;
    transform: translateY(8px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

.brand-diff span{
  animation: fadeUpSoft .8s ease forwards;
}

@media (max-width:480px){

  .story-title{
    font-size:22px;
  }

  .brand-diff{
    font-size:24px;
  }

  .story-100{
    font-size:1.15em;
  }
}

/* =========================
   Branch contacts: 데스크탑 카드 높이 고정
========================= */
@media (min-width: 1024px){

  /* 1) 같은 행 카드 높이 통일 */
  .branch-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch; /* ✅ 핵심 */
  }

  .branch-card{
    height: 100%;                 /* ✅ 그리드 stretch와 같이 씀 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 18px 18px;
    border-radius: 18px;
  }

  /* 2) 내용 높이 튐 방지: 각 라인을 동일한 “줄 수”로 고정 */
  .branch-card p{
    margin: 4px 0;
    line-height: 1.45;
  }

  /* 주소는 길어질 수 있으니 2줄까지만 보여주고 높이 고정 */
  .branch-card p:nth-of-type(2){
    display: -webkit-box;
    -webkit-line-clamp: 2;        /* ✅ 주소 2줄 고정 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.45em * 2); /* ✅ 2줄 높이 확보 */
  }

  /* 전화/이메일은 1줄 고정(높이 일정) */
  .branch-card p:nth-of-type(3),
  .branch-card p:nth-of-type(4){
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.45em;
  }
}

/* 기본 */
.chip--btn{
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  transition: all .25s ease;
  cursor: pointer;
}

/* hover */
.chip--btn:hover{
  border-color: #ff8a3d;
  color: #ff8a3d;
}

/* active (브랜드 웜 오렌지) */
.chip--btn.is-active{
  background: linear-gradient(135deg,#ff8a3d,#ffb347);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(255,138,61,.35);
}

.branch-card{
  transition: all .3s ease;
  border: 1px solid #eee;
  border-radius: 18px;
}

/* 데스크탑 하이라이트 */
.branch-card.is-active{
  border-color: #ff8a3d;
  box-shadow: 0 10px 30px rgba(255,138,61,.15);
  transform: translateY(-4px);
}

/* 지사안내 버튼 클릭 보장 */
.page--branch .brand-hero-chips{
  position: relative;
  z-index: 20;
}

.page--branch .chip--btn{
  position: relative;
  z-index: 30;
  pointer-events: auto;
  cursor: pointer;
}

/* 혹시 위에 덮는 요소가 있다면 차단 */
.page--branch .brand-hero-photo::before,
.page--branch .brand-hero-photo::after,
.page--branch .photo-glow,
.page--branch .map-frame::before,
.page--branch .map-frame::after{
  pointer-events: none !important;
}