/* =============================================================================
 * BTPA 2026 — 디자인 시스템 (정부·공공기관 + 모던 비즈니스)
 * 컨셉: 신뢰·전문성·글로벌 + AI 산업단지 비전
 * ============================================================================= */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --c-navy: #0a2540; --c-navy-2: #15355a; --c-navy-3: #1e4570;
  --c-teal: #0e7c86; --c-teal-2: #0f8a96; --c-teal-light: #e6f4f5;
  --c-gold: #c89738; --c-gold-light: #faf3e0;
  --c-bg: #ffffff; --c-bg-alt: #f7f9fc; --c-bg-dark: #0a2540;
  --c-surface: #ffffff; --c-border: #e5e9ef; --c-border-2: #d0d7e0;
  --c-text: #1a2332; --c-text-2: #475467; --c-text-3: #8b95a3; --c-text-inv: #ffffff;
  --c-success: #15803d; --c-warning: #b45309; --c-danger: #b91c1c; --c-info: #0e7c86;
  --c-mark: #fff3a0;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;
  --sh-sm: 0 1px 2px rgba(10,37,64,.06);
  --sh-md: 0 4px 12px rgba(10,37,64,.08);
  --sh-lg: 0 12px 32px rgba(10,37,64,.12);
  --sh-xl: 0 20px 50px rgba(10,37,64,.16);
  --ease: cubic-bezier(.4,0,.2,1);
  --container: 1200px; --container-narrow: 960px;
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: 18px; line-height: 1.7; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (max-width: 600px) { body { font-size: 16px; line-height: 1.6; } }
body.lang-ar { direction: rtl; }
body.lang-zh { font-family: 'Pretendard Variable', 'Microsoft YaHei', 'PingFang SC', sans-serif; }
body.lang-ja { font-family: 'Pretendard Variable', 'Hiragino Sans', 'Yu Gothic', sans-serif; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-teal); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--c-navy); }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4,h5 { font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--c-navy); margin: 0 0 var(--sp-4); }
h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 var(--sp-4); }

/* 본문 컨테이너 — 좌우 15% 여백 (콘텐츠 폭 70%) */
.container       { width: 100%; max-width: none; margin: 0 auto; padding: 0 15%; }
.container-narrow{ width: 100%; max-width: none; margin: 0 auto; padding: 0 20%; }
/* 헤더·유틸리티바 — 좌우 10% 여백 (콘텐츠 폭 80%) */
.utility-bar .container,
.site-header .container { padding: 0 10%; }
@media (max-width: 1600px) {
  .container        { padding: 0 12%; }
  .container-narrow { padding: 0 16%; }
  .site-header .container, .utility-bar .container { padding: 0 7%; }
}
@media (max-width: 1200px) {
  .container        { padding: 0 8%; }
  .container-narrow { padding: 0 12%; }
  .site-header .container, .utility-bar .container { padding: 0 5%; }
}
@media (max-width: 900px) {
  .container        { padding: 0 5%; }
  .container-narrow { padding: 0 8%; }
  .site-header .container, .utility-bar .container { padding: 0 4%; }
}
@media (max-width: 600px) {
  .container, .container-narrow,
  .site-header .container, .utility-bar .container { padding: 0 16px; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 12px 22px; border-radius: var(--r-md); border: 1px solid transparent; font-weight: 600; font-size: .95rem; cursor: pointer; transition: all .15s var(--ease); text-decoration: none; }
.btn-primary { background: var(--c-navy); color: #fff; }
.btn-primary:hover { background: var(--c-navy-2); transform: translateY(-1px); box-shadow: var(--sh-md); color: #fff; }
.btn-teal { background: var(--c-teal); color: #fff; }
.btn-teal:hover { background: var(--c-teal-2); color: #fff; box-shadow: var(--sh-md); }
.btn-outline { background: transparent; color: var(--c-navy); border-color: var(--c-border-2); }
.btn-outline:hover { border-color: var(--c-navy); background: var(--c-bg-alt); }
.btn-ghost { background: transparent; color: var(--c-text); }
.btn-ghost:hover { background: var(--c-bg-alt); }
.btn-lg { padding: 16px 28px; font-size: 1rem; }
.btn-sm { padding: 8px 14px; font-size: .85rem; }

/* Top utility bar */
.utility-bar { background: var(--c-navy); color: #c0d4ee; font-size: .82rem; padding: 6px 0; }
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.utility-bar a { color: #c0d4ee; }
.utility-bar a:hover { color: #fff; }
.utility-bar .util-left, .utility-bar .util-right { display: flex; gap: var(--sp-4); align-items: center; }
@media (max-width: 720px) { .utility-bar .util-left { display: none; } }

/* Header */
.site-header { background: #fff; border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); }
.site-header .container { display: flex; align-items: center; gap: clamp(8px, 1.5vw, var(--sp-6)); padding-top: var(--sp-4); padding-bottom: var(--sp-4); flex-wrap: nowrap; }
.site-header .logo { display: flex; align-items: center; gap: var(--sp-3); font-weight: 800; color: var(--c-navy); font-size: clamp(.85rem, 1vw, 1.05rem); line-height: 1.2; letter-spacing: -.01em; flex-shrink: 0; text-decoration: none; }
.site-header .logo--image img { display: block; height: clamp(34px, 3.2vw, 44px); width: auto; max-width: 100%; }
.site-header .logo-mark { width: clamp(36px, 3.5vw, 44px); height: clamp(36px, 3.5vw, 44px); background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-teal) 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.2rem; box-shadow: var(--sh-sm); flex-shrink: 0; }
.site-header .logo-text { display: flex; flex-direction: column; min-width: 0; }
.site-header .logo-text > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.site-header .logo-text small { font-size: .7rem; font-weight: 500; color: var(--c-text-2); letter-spacing: .05em; white-space: nowrap; }
/* 좁은 화면: 로고 영문 부제 숨김 */
@media (max-width: 1100px) { .site-header .logo-text small { display: none; } }
@media (max-width: 900px)  { .site-header .logo-text > span { max-width: 14ch; font-size: .85rem; } }

/* GNB — flex-nowrap + 자동 폰트 리사이징 (2줄 줄바꿈 방지) */
.gnb {
  display: flex;
  gap: clamp(0px, 0.4vw, var(--sp-2));
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: nowrap;            /* 절대 줄바꿈 금지 */
  min-width: 0;                  /* flex 자식이 부모 폭을 넘지 않도록 */
  justify-content: flex-end;
}
/* 대메뉴 — 화면폭 따라 16~22px 자동 (줄바꿈 절대 금지) */
.gnb > a, .gnb > .gnb-item > a {
  color: var(--c-text);
  padding: 12px clamp(6px, 1vw, 18px);
  font-weight: 700;
  font-size: clamp(13px, 1.35vw, 22px);
  line-height: 1.3;
  border-radius: var(--r-md);
  position: relative;
  white-space: nowrap;          /* 메뉴 항목 자체도 nowrap */
  letter-spacing: -0.01em;
}
.gnb > a:hover, .gnb > .gnb-item:hover > a { color: var(--c-navy); background: var(--c-bg-alt); text-decoration: none; }
.gnb-item { position: relative; flex-shrink: 1; min-width: 0; }
.gnb-sub { position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: var(--sp-3); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: all .15s var(--ease); z-index: 110; }
.gnb-item:hover .gnb-sub { opacity: 1; pointer-events: auto; transform: translateY(0); }
/* 중메뉴 — 18px (서브는 드롭다운이라 줄바꿈 OK) */
.gnb-sub a { display: block; padding: 12px 16px; border-radius: var(--r-sm); color: var(--c-text); font-size: 16px; line-height: 1.4; font-weight: 500; white-space: nowrap; }
.gnb-sub a:hover { background: var(--c-bg-alt); color: var(--c-navy); }
/* RTL: 드롭다운 우측 정렬 */
[dir="rtl"] .gnb-sub { left: auto; right: 0; }

.header-tools { display: flex; gap: var(--sp-2); align-items: center; }

/* === 언어 선택기 === */
/* 데스크톱: 국기 10개 가로 인라인 */
.lang-flags { display: flex; gap: 2px; list-style: none; padding: 0; margin: 0; align-items: center; }
.lang-flags li a {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 8px; border-radius: var(--r-sm);
  color: var(--c-text); text-decoration: none; line-height: 1;
  transition: all .15s var(--ease);
}
/* flag-icons 정확 국기 (CDN 로드, 4x3 비율 기본) */
.btpa-flag { width: 26px; height: 19.5px; border: 1px solid rgba(0,0,0,.15); border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.1); display: inline-block; vertical-align: middle; }
.lang-flags li a .btpa-flag { display: block; margin: 0 auto; }
.lang-flags li a .code { font-size: 9px; font-weight: 700; color: var(--c-text-3); letter-spacing: .04em; font-family: var(--font-mono); margin-top: 3px; }
.lang-dropdown li a .btpa-flag { margin-right: 8px; width: 24px; height: 18px; }
.lang-dropdown summary .btpa-flag { margin-right: 4px; width: 22px; height: 16px; }
.lang-flags li a:hover { background: var(--c-bg-alt); transform: translateY(-1px); }
.lang-flags li a:hover .code { color: var(--c-navy); }
.lang-flags li a.active { background: var(--c-navy); }
.lang-flags li a.active .code { color: #fff; }
.lang-flags li a.active::after {
  content: ''; position: absolute; bottom: -2px; left: 25%; right: 25%; height: 2px; background: var(--c-gold); border-radius: 2px;
}
.lang-flags li { position: relative; }

/* 좁은 화면: 드롭다운 */
.lang-dropdown { display: none; position: relative; }
.lang-dropdown summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: var(--r-md); color: var(--c-text); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.lang-dropdown summary::-webkit-details-marker { display: none; }
.lang-dropdown summary:hover { background: var(--c-bg-alt); }
.lang-dropdown[open] ul { position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-2); min-width: 180px; box-shadow: var(--sh-lg); list-style: none; margin: 6px 0 0 0; z-index: 200; }
.lang-dropdown li a { display: block; padding: 10px 14px; border-radius: var(--r-sm); color: var(--c-text); font-size: 16px; text-decoration: none; }
.lang-dropdown li a:hover { background: var(--c-bg-alt); color: var(--c-navy); }

@media (max-width: 1280px) {
  .lang-flags { display: none; }
  .lang-dropdown { display: block; }
}

.mobile-toggle { display: none; padding: 8px; background: none; border: 0; }
@media (max-width: 960px) { .gnb { display: none; } .mobile-toggle { display: inline-flex; } }

/* Hero */
/* Hero — 어두운 배경 사진 + 다크 오버레이 (가독성 확보)
   배경 사진 경로: /assets/hero/hero-bg.jpg  (2560×1440 권장)
   사진이 없을 경우 navy 그라디언트로 자동 fallback */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(10,37,64,.72) 0%, rgba(10,37,64,.88) 100%),
    url('/assets/hero/hero-bg.jpg') center center / cover no-repeat,
    radial-gradient(circle at 20% 0%, rgba(14,124,134,.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(200,151,56,.12) 0%, transparent 50%),
    linear-gradient(180deg, var(--c-navy) 0%, var(--c-navy-2) 100%);
  background-color: var(--c-navy);
  color: #fff;
  padding: var(--sp-24) 0 var(--sp-20);
  overflow: hidden;
}
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; opacity: .6; }
.hero .container { position: relative; z-index: 2; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); background: rgba(255,255,255,.08); padding: 6px 14px; border-radius: var(--r-full); font-size: .82rem; font-weight: 600; color: #c0d4ee; border: 1px solid rgba(255,255,255,.12); margin-bottom: var(--sp-6); }
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; max-width: 920px; }
.hero h1 .highlight { background: linear-gradient(120deg, var(--c-gold) 0%, #f4d780 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { font-size: clamp(1rem, 1.8vw, 1.2rem); color: #d0deef; max-width: 720px; margin: var(--sp-6) 0 var(--sp-8); line-height: 1.65; }
.hero-search { background: #fff; padding: 8px; border-radius: var(--r-xl); display: flex; gap: 6px; max-width: 720px; box-shadow: 0 20px 60px rgba(0,0,0,.25); align-items: stretch; }
.hero-search input { flex: 1; border: 0; padding: 14px 20px; font-size: 1.05rem; font-family: inherit; background: transparent; color: var(--c-text); outline: none; }
.hero-search button { background: var(--c-navy); color: #fff; border: 0; padding: 0 28px; border-radius: var(--r-lg); font-weight: 600; font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.hero-search button:hover { background: var(--c-teal); }
.hero-quicklinks { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); font-size: .85rem; }
.hero-quicklinks a { color: #c0d4ee; padding: 4px 12px; border-radius: var(--r-full); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.hero-quicklinks a:hover { background: rgba(255,255,255,.14); color: #fff; }

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-16); padding-top: var(--sp-10); border-top: 1px solid rgba(255,255,255,.12); }
.hero-stat .num { font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 800; color: var(--c-gold); letter-spacing: -.02em; line-height: 1; }
.hero-stat .label { color: #a8c0d8; font-size: .9rem; margin-top: var(--sp-2); }
@media (max-width: 720px) { .hero-stats { grid-template-columns: repeat(2,1fr); } }

/* Sections */
.section { padding: var(--sp-20) 0; }
.section-alt { background: var(--c-bg-alt); }
.section-dark { background: linear-gradient(180deg, var(--c-navy) 0%, #051527 100%); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: #c0d4ee; }
.section-eyebrow { display: inline-block; color: var(--c-teal); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; max-width: 800px; margin-bottom: var(--sp-4); }
.section-lead { color: var(--c-text-2); font-size: 1.05rem; max-width: 720px; line-height: 1.7; margin-bottom: var(--sp-12); }

/* AI 메시지 섹션 */
.ai-message-section { position: relative; overflow: hidden; background: linear-gradient(135deg, #0a2540 0%, #15355a 50%, #1e4570 100%); color: #fff; padding: var(--sp-24) 0; }
.ai-message-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(14,124,134,.25) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.ai-message-section::after { content: ''; position: absolute; bottom: -150px; left: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(200,151,56,.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.ai-message-section .container { position: relative; z-index: 2; text-align: center; }
.ai-message-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); background: rgba(200,151,56,.15); border: 1px solid rgba(200,151,56,.4); padding: 8px 16px; border-radius: var(--r-full); color: var(--c-gold); font-weight: 700; font-size: .85rem; letter-spacing: .08em; margin-bottom: var(--sp-6); }
.ai-message-section h2 { color: #fff; font-size: clamp(1.8rem, 4.5vw, 3.2rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; max-width: 1000px; margin: 0 auto var(--sp-6); }
.ai-message-section h2 .accent { background: linear-gradient(120deg, var(--c-gold) 0%, #f4d780 60%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-message-section .lead { color: #d0deef; font-size: clamp(1rem, 1.8vw, 1.2rem); line-height: 1.7; max-width: 800px; margin: 0 auto var(--sp-10); }

.ai-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--sp-4); align-items: center; max-width: 1000px; margin: 0 auto; }
.ai-flow-step { background: rgba(255,255,255,.06); padding: var(--sp-6); border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.12); text-align: center; }
.ai-flow-step .icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-teal-2) 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-3); font-size: 1.6rem; }
.ai-flow-step h4 { color: #fff; margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.ai-flow-step p { color: #c0d4ee; font-size: .9rem; margin: 0; }
.ai-flow-arrow { color: var(--c-gold); font-size: 1.5rem; }
@media (max-width: 800px) { .ai-flow { grid-template-columns: 1fr; } .ai-flow-arrow { transform: rotate(90deg); margin: 0 auto; } }

/* 4가지 활동 (Pillar) */
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-10); }
.pillar-card { position: relative; background: #fff; padding: var(--sp-8) var(--sp-6) var(--sp-6); border-radius: var(--r-lg); border: 1px solid var(--c-border); transition: all .2s var(--ease); overflow: hidden; }
.pillar-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--c-teal); }
.pillar-card .num { position: absolute; top: -10px; right: var(--sp-6); font-size: 4.5rem; font-weight: 800; color: var(--c-bg-alt); font-family: var(--font-mono); line-height: 1; letter-spacing: -.05em; z-index: 1; }
.pillar-card .icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--c-teal-light), #fff); border: 1px solid var(--c-teal); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: var(--sp-4); position: relative; z-index: 2; }
.pillar-card h3 { font-size: 1.2rem; margin-bottom: var(--sp-3); position: relative; z-index: 2; }
.pillar-card p { color: var(--c-text-2); font-size: .94rem; line-height: 1.65; margin-bottom: 0; position: relative; z-index: 2; }
.pillar-card .features { list-style: none; padding: 0; margin: var(--sp-4) 0 0; position: relative; z-index: 2; }
.pillar-card .features li { padding: 4px 0 4px 22px; font-size: .88rem; color: var(--c-text-2); position: relative; }
.pillar-card .features li::before { content: '✓'; position: absolute; left: 0; top: 4px; color: var(--c-teal); font-weight: 700; }

/* 9개 단지 카드 */
.parks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-10); }
.park-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--c-border); color: var(--c-text); position: relative; overflow: hidden; transition: all .2s var(--ease); }
.park-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--c-navy), var(--c-teal)); z-index: 2; pointer-events: none; }
.park-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.park-card a { text-decoration: none; color: inherit; }
.park-card .park-photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0a2540; }
.park-card .park-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); }
.park-card:hover .park-photo img { transform: scale(1.04); }
.park-card .park-body { display: block; padding: var(--sp-5) var(--sp-6) var(--sp-4); flex: 1; }
.park-card .park-code { display: inline-block; font-family: var(--font-mono); font-weight: 700; background: var(--c-navy); color: #fff; padding: 2px 10px; border-radius: var(--r-sm); font-size: .78rem; letter-spacing: .05em; }
.park-card h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: 1.1rem; }
.park-card .meta { color: var(--c-text-2); font-size: .88rem; margin: 0; }
.park-card .stats { display: flex; gap: var(--sp-4); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.park-card .stat-num { font-size: 1.4rem; font-weight: 700; color: var(--c-navy); }
.park-card .stat-label { font-size: .75rem; color: var(--c-text-3); }
.park-card .park-domain { display: flex; align-items: center; gap: 6px; padding: 10px var(--sp-6); border-top: 1px solid var(--c-border); background: #f7fafc; color: #1a73c7; font-size: .82rem; font-weight: 600; word-break: break-all; transition: background .15s var(--ease); }
.park-card .park-domain:hover { background: #eef5fb; text-decoration: underline; }
.park-card .park-domain-icon { flex-shrink: 0; }

/* 신규 회원사 가입예정 카드 (RENOBURG 등) */
.park-card--upcoming { border: 1px dashed rgba(200, 151, 56, .55); background: linear-gradient(180deg, #fffaf0 0%, #ffffff 60%); }
.park-card--upcoming::before { background: linear-gradient(90deg, #c89738, #f0b85b); }
.park-card--upcoming .park-photo--static { position: relative; }
.park-card--upcoming .park-photo--static .park-coming-badge { position: absolute; top: 12px; right: 12px; background: #d35454; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; padding: 4px 10px; border-radius: var(--r-full); box-shadow: 0 2px 6px rgba(0,0,0,.25); z-index: 3; }
.park-card--upcoming .park-body--static { padding: var(--sp-5) var(--sp-6) var(--sp-4); }
.park-card--upcoming .park-code--upcoming { background: #c89738; color: #1a2332; }
.park-card--upcoming .park-status { display: inline-block; margin: 6px 0 0; padding: 3px 10px; background: rgba(200,151,56,.15); color: #8a6418; font-size: .78rem; font-weight: 700; border-radius: var(--r-full); border: 1px solid rgba(200,151,56,.35); }
.park-card--upcoming .stat-num--tbd { color: #b08735; font-size: 1.05rem; font-style: italic; font-weight: 600; }
.park-card--upcoming .park-domain--tbd { background: #fff7e6; color: #8a6418; border-top-color: rgba(200,151,56,.3); cursor: default; }
.park-card--upcoming .park-domain--tbd:hover { background: #fff7e6; text-decoration: none; }

/* 글로벌 마케팅 섹션 */
.global-section { background: #f0f5f9; }
.global-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; margin-top: var(--sp-10); }
@media (max-width: 900px) { .global-grid { grid-template-columns: 1fr; } }
.global-visual { background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-teal) 100%); border-radius: var(--r-lg); padding: var(--sp-12); color: #fff; min-height: 380px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.global-visual::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.15) 0%, transparent 30%), radial-gradient(circle at 70% 70%, rgba(200,151,56,.2) 0%, transparent 30%); }
.global-visual .lang-bubbles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); position: relative; z-index: 2; }
.lang-bubble { background: rgba(255,255,255,.12); padding: var(--sp-4) var(--sp-2); border-radius: var(--r-md); text-align: center; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); font-weight: 600; font-size: .85rem; }
.lang-bubble .flag { font-size: 1.6rem; display: block; margin-bottom: 4px; }

/* Boards */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
@media (max-width: 720px) { .cols-2 { grid-template-columns: 1fr; gap: var(--sp-6); } }
.board-block h2 { font-size: 1.3rem; padding-bottom: var(--sp-3); border-bottom: 2px solid var(--c-navy); display: flex; justify-content: space-between; align-items: center; }
.board-block h2 a { font-size: .85rem; font-weight: 500; color: var(--c-text-2); }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; gap: var(--sp-4); align-items: baseline; }
.post-list li.is-notice { background: var(--c-gold-light); padding: var(--sp-4) var(--sp-3); border-radius: var(--r-sm); }
.post-list li time { color: var(--c-text-3); font-size: .82rem; white-space: nowrap; font-family: var(--font-mono); }
.post-list .title { flex: 1; color: var(--c-text); font-weight: 500; }
.post-list .title:hover { color: var(--c-navy); }
.post-list .num { width: 50px; color: var(--c-text-3); font-size: .85rem; font-family: var(--font-mono); }
.post-list .author { color: var(--c-text-3); font-size: .85rem; min-width: 80px; text-align: right; }
.post-list .views { color: var(--c-text-3); font-size: .8rem; min-width: 50px; text-align: right; font-family: var(--font-mono); }
.post-list .attach, .post-list .comments { margin-left: 4px; font-size: .8rem; color: var(--c-text-3); }

/* General cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-6); }
.card { display: block; background: #fff; padding: var(--sp-6); border-radius: var(--r-lg); border: 1px solid var(--c-border); color: var(--c-text); transition: all .2s var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); text-decoration: none; }
.card img { max-height: 80px; object-fit: contain; margin-bottom: var(--sp-3); }
.card h3 { font-size: 1.05rem; margin: var(--sp-3) 0 var(--sp-2); }
.card .meta, .card .park { font-size: .85rem; color: var(--c-text-2); margin: 0; }
.card .badge { background: var(--c-gold); color: #fff; padding: 2px 8px; border-radius: var(--r-full); font-size: .7rem; font-weight: 700; }

/* Search results */
.page-header { margin-bottom: var(--sp-10); }
.search-bar { display: flex; gap: 8px; padding: 6px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--c-border-2); box-shadow: var(--sh-sm); margin-bottom: var(--sp-8); }
.search-bar input { flex: 1; border: 0; padding: 12px 16px; font-size: 1rem; outline: none; background: transparent; }
.search-bar select { border: 0; padding: 0 12px; background: transparent; font-size: .95rem; cursor: pointer; }
.search-bar button { background: var(--c-navy); color: #fff; border: 0; padding: 0 24px; border-radius: var(--r-md); font-weight: 600; cursor: pointer; }
.search-bar button:hover { background: var(--c-teal); }
.search-results { list-style: none; padding: 0; margin: 0; }
.search-item { padding: var(--sp-6) 0; border-bottom: 1px solid var(--c-border); display: flex; gap: var(--sp-5); align-items: flex-start; }
.search-item:last-child { border-bottom: 0; }
.search-item h3 { margin: var(--sp-2) 0 var(--sp-2); font-size: 1.15rem; }
.search-item h3 a { color: var(--c-navy); }
.search-item .snippet { color: var(--c-text-2); font-size: .94rem; line-height: 1.65; margin: 0; }
.search-thumb { flex: 0 0 160px; width: 160px; height: 110px; border-radius: var(--r-md); overflow: hidden; background: var(--c-bg-alt); position: relative; }
.search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-thumb-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-mono); }
.search-body { flex: 1; min-width: 0; }
.search-meta-top { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-2); }
.search-links { font-size: .85rem; color: var(--c-text-3); margin: var(--sp-2) 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.search-link { color: var(--c-text-2); text-decoration: none; }
.search-link:hover { color: var(--c-navy); text-decoration: underline; }
/* 좌측 영상 영역 — YouTube 썸네일 + YouTube/Shorts 버튼 */
.search-thumb.si-thumb-col {
  display: flex; flex-direction: column; gap: 6px;
  flex: 0 0 160px; width: 160px; height: auto;
  background: transparent; overflow: visible;
}
.si-thumb-frame {
  position: relative; display: block;
  width: 160px; height: 90px; border-radius: var(--r-md);
  overflow: hidden; background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  text-decoration: none;
}
.si-thumb-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si-thumb-frame .search-thumb-fallback { width: 100%; height: 100%; }
.si-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,0,0,.9); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; padding-left: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  transition: all .2s var(--ease);
}
.si-thumb-frame:hover .si-play { transform: translate(-50%,-50%) scale(1.15); background: #ff0000; }

.si-vbtns { display: flex; gap: 4px; flex-wrap: nowrap; }
.si-yt-btn, .si-sh-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 8px; height: 28px; border-radius: var(--r-sm);
  font-size: .76rem; font-weight: 700;
  text-decoration: none; transition: all .15s var(--ease);
  flex: 1 1 0; justify-content: center;
  white-space: nowrap; overflow: hidden;
  letter-spacing: -.01em;
  min-width: 0;
}
.si-yt-btn { background: #ff0000; color: #fff; }
.si-yt-btn:hover { background: #cc0000; transform: translateY(-1px); text-decoration: none; }
.si-yt-btn svg { display: block; flex-shrink: 0; }
.si-sh-btn { background: linear-gradient(135deg,#ff4081 0%,#f50057 100%); color: #fff; }
.si-sh-btn:hover { transform: translateY(-1px); text-decoration: none; opacity: .92; }

/* 영상·쇼츠·갤러리 빈 슬롯 — 흑백 '준비중' 상태 */
.si-thumb-frame.is-empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
  filter: grayscale(1);
  cursor: default;
}
.si-empty-label {
  font-size: .75rem; font-weight: 700;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.5);
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: -.02em;
}
.si-yt-btn.is-disabled,
.si-sh-btn.is-disabled {
  background: #b8b8b8 !important;
  color: #fff;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(1);
  opacity: .6;
}
.si-gal-item.is-empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #d8d8d8 0%, #b8b8b8 100%);
  filter: grayscale(1);
  cursor: default;
}
.si-gal-item.is-empty:hover {
  transform: none; box-shadow: none; border-color: var(--c-border);
}
.si-gal-item.is-empty .si-empty-label {
  font-size: .68rem;
  color: rgba(0,0,0,.6);
  background: rgba(255,255,255,.78);
  padding: 2px 8px;
}

/* /kr/companies 전용 hero — 메인 hero 와 동일 시스템 + 입주사 검색 컨텍스트 마이크로 차이 */
.hero.hero-companies {
  /* 결과가 아래에 바로 따라오므로 하단 마진 자연스럽게 */
  padding-bottom: var(--sp-12);
}
.hero.hero-companies::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent 0%, var(--c-bg) 100%);
  pointer-events: none;
}
.hero.hero-companies h1 { max-width: 1100px; }
.hero.hero-companies .hero-lead { max-width: 860px; }
.hero.hero-companies .hero-lead strong { color: var(--c-gold); font-weight: 700; }
.hero.hero-companies .hero-search { max-width: 860px; }
.hero.hero-companies .hero-search input { font-size: 1.05rem; }
.hero.hero-companies .hero-quicklinks { margin-top: var(--sp-5); max-width: 860px; }
.hero.hero-companies .hero-quicklinks a {
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.hero.hero-companies .hero-quicklinks a:hover {
  transform: translateY(-1px);
}
.hero.hero-companies .hero-stats {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
}
@media (max-width: 720px) {
  .hero.hero-companies .hero-search { flex-wrap: wrap; }
  .hero.hero-companies .hero-search button { width: 100%; padding: 14px 20px; }
}

/* =====================================================================
   입주사 쇼케이스 (Member Showcase) — /kr/showcase
   - 3개 탭 (신제품·기업스토리·탐방) 컨셉 페이지
   - SVG 풍부, 애니메이션, 카드 레이아웃
===================================================================== */
.hero.showcase-hero { padding-bottom: var(--sp-12); }
.hero.showcase-hero h1 { max-width: 1100px; }
.hero.showcase-hero .hero-lead { max-width: 920px; }
.hero.showcase-hero .hero-lead strong { color: var(--c-gold); font-weight: 700; }
.showcase-hero-art {
  margin: var(--sp-10) 0 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
}
.showcase-hero-art svg { display: block; width: 100%; height: auto; }
.showcase-hero-art .flowline {
  animation: flowDash 2.4s linear infinite;
}
.showcase-hero-art .halo {
  animation: heroSpin 18s linear infinite;
  transform-origin: center;
}
@keyframes flowDash {
  to { stroke-dashoffset: -28; }
}
@keyframes heroSpin {
  to { transform: rotate(360deg); }
}
.showcase-hero-stats {
  margin-top: var(--sp-12);
  padding-top: var(--sp-10);
}

/* 컨테이너 — 헤더와 동일 폭 (좌우 10% padding, 데스크톱 기준).
   기본 .container 는 15% 라 좁게 보임 → showcase 만 헤더 폭과 일치시킴. */
.hero.showcase-hero .container,
.showcase-container.container {
  padding-left: 10%;
  padding-right: 10%;
}
@media (max-width: 1600px) {
  .hero.showcase-hero .container,
  .showcase-container.container { padding-left: 7%; padding-right: 7%; }
}
@media (max-width: 1200px) {
  .hero.showcase-hero .container,
  .showcase-container.container { padding-left: 5%; padding-right: 5%; }
}
@media (max-width: 900px) {
  .hero.showcase-hero .container,
  .showcase-container.container { padding-left: 4%; padding-right: 4%; }
}
.showcase-container {
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-16);
}
.showcase-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 var(--sp-12);  /* 컨테이너 너비 100% 사용 (헤더와 동일 폭) */
  padding: 8px;
  background: var(--c-bg-alt);
  border-radius: var(--r-xl);
  position: sticky;
  top: 76px;
  z-index: 30;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.showcase-tabs button {
  background: transparent;
  border: 0;
  padding: 16px 20px;
  border-radius: var(--r-lg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  font-family: inherit;
  transition: all .2s var(--ease);
}
.showcase-tabs button .tab-num {
  font-family: ui-monospace, monospace;
  font-size: .72rem;
  font-weight: 800;
  color: var(--c-text-3);
  letter-spacing: 2px;
}
.showcase-tabs button .tab-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -.02em;
}
.showcase-tabs button .tab-sub {
  font-size: .82rem;
  color: var(--c-text-3);
}
.showcase-tabs button:hover {
  background: rgba(255,255,255,.6);
}
.showcase-tabs button.active {
  background: var(--c-navy);
  box-shadow: 0 8px 24px rgba(10,37,64,.25);
}
.showcase-tabs button.active .tab-num { color: var(--c-gold); }
.showcase-tabs button.active .tab-name { color: #fff; }
.showcase-tabs button.active .tab-sub { color: #c0d4ee; }

/* 탭 패널 */
.showcase-panel { display: none; animation: fadeUp .5s var(--ease) both; }
.showcase-panel.active { display: block; }
.panel-head { max-width: 920px; margin: 0 auto var(--sp-10); text-align: center; }
.panel-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(200,151,56,.12);
  color: var(--c-gold);
  border: 1px solid rgba(200,151,56,.3);
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: var(--sp-4);
}
.panel-head h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
}
.panel-h2-sub {
  display: block;
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  font-weight: 500;
  color: var(--c-text-2);
  margin-top: 8px;
  letter-spacing: -.01em;
}
.panel-lead {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--c-text-2);
  margin: 0;
}
.panel-lead + .panel-lead {
  margin-top: var(--sp-3);
}
.panel-lead.panel-lead-2 {
  /* 2번째 줄: AI 인용 메커니즘 — 약간 다른 톤으로 시각적 분리 */
  color: var(--c-text-3);
  font-size: 1rem;
}
.panel-lead strong { color: var(--c-navy); font-weight: 700; }
.panel-lead em {
  font-style: normal;
  background: rgba(200, 151, 56, 0.12);
  color: var(--c-navy);
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

/* 패널 SVG 일러스트 */
.panel-art {
  margin: var(--sp-12) 0;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: 0 8px 32px rgba(10,37,64,.04);
}
.panel-art svg { display: block; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; }

/* why-cards 3열 그리드 */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin: var(--sp-12) 0;
}
.why-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: 0 4px 16px rgba(10,37,64,.04);
  transition: all .25s var(--ease);
}
.why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(10,37,64,.1);
  border-color: var(--c-teal);
}
.why-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-4);
}
.why-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--c-navy);
  margin: 0 0 var(--sp-4);
}
.why-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.why-list li {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--c-text-2);
  padding-left: 18px;
  position: relative;
  margin-bottom: 10px;
}
.why-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-teal);
  font-weight: 800;
}
.why-list code {
  background: #f1f5f9;
  color: #0f172a;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .82em;
}
.why-list strong { color: var(--c-navy); }
.why-list.ex-list li {
  font-style: italic;
  color: var(--c-text);
  font-family: 'Georgia', serif;
}
.why-list.ex-list li::before {
  content: '"';
  font-size: 1.2em;
  font-style: normal;
  color: var(--c-gold);
  top: -2px;
}

/* Schema.org JSON-LD 미리보기 */
.schema-preview {
  margin: var(--sp-12) 0;
  background: #0f172a;
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  position: relative;
  overflow: hidden;
}
.schema-preview::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(74,222,128,.15) 0%, transparent 70%);
}
.schema-eyebrow {
  color: #4ade80;
  font-size: .85rem;
  font-weight: 700;
  margin: 0 0 var(--sp-4);
  letter-spacing: 1px;
}
.schema-code {
  color: #e2e8f0;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: .85rem;
  line-height: 1.65;
  margin: 0;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Story 인용구 박스 */
.story-mockup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin: var(--sp-12) 0;
}
.story-quote-box {
  background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
  border-left: 6px solid var(--c-gold);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  position: relative;
}
.story-quote-box .quote-mark {
  position: absolute;
  top: 12px; left: 24px;
  font-size: 5rem;
  font-family: Georgia, serif;
  color: var(--c-gold);
  opacity: .35;
  line-height: 1;
}
.story-quote-box .quote-text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #78350f;
  margin: var(--sp-4) 0 var(--sp-3);
  font-style: italic;
  position: relative;
}
.story-quote-box .quote-by {
  font-size: .9rem;
  font-weight: 700;
  color: #92400e;
  margin: 0;
}
.story-claim {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  font-size: .92rem;
  line-height: 1.85;
  color: #14532d;
}
.story-claim strong {
  display: block;
  color: #166534;
  font-size: 1rem;
  margin-bottom: var(--sp-2);
}

/* Roadmap */
.showcase-roadmap {
  margin: var(--sp-16) 0;
  padding: var(--sp-12) 0;
  border-top: 1px solid var(--c-border);
}
.showcase-roadmap h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  text-align: center;
  letter-spacing: -.025em;
  margin: 0 0 var(--sp-10);
  color: var(--c-text);
}
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.roadmap-card {
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  position: relative;
  overflow: hidden;
}
.roadmap-card.phase-1 {
  background: linear-gradient(135deg, #0a2540 0%, #163e5f 100%);
  color: #fff;
}
.roadmap-card.phase-2 {
  background: linear-gradient(135deg, #0e7c86 0%, #14a098 100%);
  color: #fff;
}
.roadmap-card.phase-3 {
  background: linear-gradient(135deg, #c89738 0%, #f4d780 100%);
  color: #1a1a1a;
}
.roadmap-num {
  font-family: ui-monospace, monospace;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 3px;
  opacity: .8;
  margin-bottom: var(--sp-3);
}
.roadmap-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 var(--sp-2);
  letter-spacing: -.02em;
}
.roadmap-meta {
  font-size: .82rem;
  opacity: .8;
  margin: 0 0 var(--sp-4);
}
.roadmap-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.roadmap-card ul li {
  padding: 8px 0 8px 22px;
  position: relative;
  font-size: .92rem;
  line-height: 1.55;
  border-top: 1px solid rgba(255,255,255,.15);
}
.roadmap-card.phase-3 ul li {
  border-top-color: rgba(0,0,0,.12);
}
.roadmap-card ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  font-weight: 800;
}
.roadmap-card ul li:first-child { border-top: 0; }

/* CTA 콜아웃 */
.showcase-cta {
  margin: var(--sp-12) 0 0;
  padding: var(--sp-10) var(--sp-8);
  background: linear-gradient(135deg, #0a2540 0%, #1a3f6f 100%);
  border-radius: var(--r-xl);
  display: flex;
  gap: var(--sp-8);
  align-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.showcase-cta::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(244,215,128,.15) 0%, transparent 60%);
  pointer-events: none;
}
.showcase-cta .cta-art { flex: 0 0 120px; }
.showcase-cta h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 var(--sp-3);
  color: #fff;
}
.showcase-cta p {
  font-size: 1rem;
  line-height: 1.7;
  color: #c0d4ee;
  margin: 0 0 var(--sp-3);
}
.showcase-cta strong { color: var(--c-gold); }
.showcase-cta .cta-meta {
  font-size: .9rem;
  color: #8aa3c4;
  margin-top: var(--sp-3);
}

/* 모바일 */
@media (max-width: 900px) {
  .showcase-tabs { grid-template-columns: 1fr; }
  .panel-grid, .roadmap-grid, .story-mockup { grid-template-columns: 1fr; }
  .showcase-cta { flex-direction: column; text-align: center; }
}

/* =====================================================================
   AI 우선 인용 메커니즘 섹션 (각 탭 안, panel-head 와 웹진 리스트 사이)
===================================================================== */
.ai-mechanism {
  margin: var(--sp-12) 0;
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: linear-gradient(180deg, #fbfcfd 0%, #f5f7fa 100%);
  border-radius: var(--r-xl);
}
.ai-mechanism-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  margin: 0 var(--sp-8) var(--sp-10);
}
.ai-mech-svg {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--c-border);
  padding: 8px;
}
.ai-mech-svg .am-flow {
  animation: flowDash 2.6s linear infinite;
}
.ai-mech-svg .am-halo {
  animation: heroSpin 22s linear infinite;
  transform-origin: center;
}
.ai-mech-headline {
  padding: var(--sp-2) 0;
}
.ai-mech-headline .ai-mech-eyebrow {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--track-color, var(--c-gold));
  margin: 0 0 var(--sp-3);
}
.ai-mech-headline h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
}
.ai-mech-headline h3 strong {
  color: var(--track-color, var(--c-navy));
}
.ai-mech-headline p {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--c-text-2);
  margin: 0;
}
.ai-mech-headline p strong {
  color: var(--c-navy);
  font-weight: 700;
}

/* 6 신호 카드 grid */
.ai-signals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  padding: 0 var(--sp-8) var(--sp-2);
}
.ai-signal-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  position: relative;
  transition: all .25s var(--ease);
  border-top: 3px solid var(--track-color, var(--c-gold));
}
.ai-signal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(10,37,64,.08);
}
.ai-signal-card .signal-num {
  position: absolute;
  top: 14px; right: 18px;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--track-color, var(--c-gold));
  opacity: .25;
  font-family: ui-monospace, monospace;
  line-height: 1;
}
.ai-signal-card .signal-icon {
  width: 42px; height: 42px;
  margin-bottom: var(--sp-4);
}
.ai-signal-card h4 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--c-navy);
  margin: 0 0 var(--sp-3);
  line-height: 1.25;
}
.ai-signal-card .signal-ex {
  font-size: .95rem;
  color: var(--c-text-3);
  margin: 0 0 var(--sp-4);
  line-height: 1.6;
}
.ai-signal-card .signal-ex code {
  background: #f1f5f9;
  color: #0f172a;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: .82em;
  font-family: ui-monospace, monospace;
}
.ai-signal-card .signal-effect {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--c-text-2);
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-border);
  word-break: keep-all;
  word-wrap: break-word;
}
.ai-signal-card .signal-effect strong {
  color: var(--c-navy);
  font-weight: 700;
}
.ai-signal-card .signal-effect em {
  font-style: italic;
  color: var(--c-text);
  background: rgba(200,151,56,.1);
  padding: 0 4px;
  border-radius: 3px;
}

@media (max-width: 1100px) {
  .ai-mechanism-hero { grid-template-columns: 1fr; gap: var(--sp-6); margin: 0 var(--sp-5) var(--sp-8); }
  .ai-signals-grid { grid-template-columns: repeat(2, 1fr); padding: 0 var(--sp-5); }
}
@media (max-width: 700px) {
  .ai-signals-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   웹진 리스트 — 허브 페이지 각 탭 안에 임베드
===================================================================== */
.webzine-section {
  margin: var(--sp-12) 0 var(--sp-8);
}
.webzine-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--track-color, var(--c-navy));
}
.webzine-section-head h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--c-text);
  margin: 0;
}
.webzine-section-head h3 .meta {
  font-size: .85rem;
  font-weight: 500;
  color: var(--c-text-3);
  margin-left: 8px;
  letter-spacing: 0;
}
.webzine-section-head .see-all {
  font-size: .92rem;
  font-weight: 700;
  color: var(--track-color, var(--c-navy));
  text-decoration: none;
  white-space: nowrap;
}
.webzine-section-head .see-all:hover { text-decoration: underline; }

/* 관리자 글쓰기 버튼 */
.webzine-section-head .btn-admin-write {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--track-color, var(--c-navy));
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s var(--ease);
}
.webzine-section-head .btn-admin-write:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  color: #fff;
  text-decoration: none;
  opacity: .92;
}

/* 페이지네이션 (이전 / 목록 / 다음) — 모든 게시판 공통 패턴 */
.webzine-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.webzine-pagination .pn-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 22px;
  border-radius: var(--r-md);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-text);
  transition: all .15s var(--ease);
}
.webzine-pagination .pn-btn:hover:not(.pn-disabled) {
  background: var(--track-color, var(--c-navy));
  color: #fff;
  border-color: var(--track-color, var(--c-navy));
  text-decoration: none;
  transform: translateY(-1px);
}
.webzine-pagination .pn-list {
  background: var(--track-color, var(--c-navy));
  color: #fff;
  border-color: var(--track-color, var(--c-navy));
}
.webzine-pagination .pn-list:hover {
  opacity: .92;
}
.webzine-pagination .pn-num {
  font-family: ui-monospace, monospace;
  font-size: .85rem;
  margin-right: 6px;
  opacity: .85;
}
.webzine-pagination .pn-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--c-bg-alt);
}
@media (max-width: 600px) {
  .webzine-pagination .pn-btn { padding: 8px 14px; font-size: .85rem; }
}

/* 등록 CTA — 센터 정렬, 트랙별 색상 */
.webzine-register-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px dashed var(--c-border);
}
.btn-register {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 22px 56px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  font-size: 2.05rem;
  font-weight: 800;
  letter-spacing: -.025em;
  text-decoration: none;
  border-radius: var(--r-lg);
  box-shadow: 0 10px 32px rgba(37, 99, 235, .25);
  transition: all .25s var(--ease);
}
.btn-register:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(37, 99, 235, .35);
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  color: #fff;
  text-decoration: none;
}
@media (max-width: 700px) {
  .btn-register { font-size: 1.4rem; padding: 16px 32px; }
}

/* 빈 게시판 placeholder (인라인) */
.webzine-section .webzine-empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
  background: #fff;
  border: 2px dashed var(--c-border);
  border-radius: var(--r-xl);
}
.webzine-section .webzine-empty h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--c-text);
  margin: var(--sp-4) 0 var(--sp-2);
}
.webzine-section .webzine-empty p {
  font-size: .92rem;
  color: var(--c-text-3);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}

/* meta 영역 산업·단지 칩 */
.webzine-meta .meta-sector,
.webzine-card-meta .meta-sector {
  background: rgba(200,151,56,.12);
  color: var(--c-gold);
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 600;
}


/* =====================================================================
   허브 페이지의 트랙별 실시간 카드 (DB 에서 최신 5건)
===================================================================== */
.showcase-track-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-8) 0;
}
.track-card {
  display: block;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all .25s var(--ease);
  border-top: 4px solid var(--track-color);
}
.track-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10,37,64,.12);
  text-decoration: none;
}
.track-card-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-alt);
  position: relative;
}
.track-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.65);
  font-size: 3rem; font-weight: 800;
}
.track-card-body { padding: var(--sp-5); }
.track-card-title {
  font-size: 1rem; font-weight: 700; color: var(--c-text);
  margin: 0 0 var(--sp-2);
  letter-spacing: -.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.track-card-summary {
  font-size: .85rem; color: var(--c-text-2);
  margin: 0 0 var(--sp-3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.track-card-meta {
  font-size: .78rem; color: var(--c-text-3);
  margin: 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.track-card-meta .meta-company { font-weight: 600; color: var(--c-navy); }
.track-card-meta .meta-park { color: var(--track-color); }
.track-card-more {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--track-color);
  color: #fff;
  border-radius: var(--r-xl);
  text-decoration: none;
  padding: var(--sp-8);
  text-align: center;
  transition: all .25s var(--ease);
  min-height: 200px;
}
.track-card-more:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.2);
  text-decoration: none;
  color: #fff;
}
.track-card-more .more-icon {
  font-size: 2rem;
  margin-bottom: var(--sp-3);
  font-weight: 800;
}
.track-card-more .more-text {
  font-size: .9rem; font-weight: 700;
  letter-spacing: -.01em;
}

/* 빈 트랙 placeholder */
.showcase-track-empty {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border: 2px dashed var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  margin: var(--sp-8) 0;
}
.track-empty-art {
  width: 80px; height: 80px;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--track-color) 0%, transparent 100%);
  opacity: .15;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.track-empty-glyph {
  font-size: 3rem; font-weight: 800;
  color: var(--track-color);
  opacity: 1;
  position: absolute;
}
.track-empty-msg {
  font-size: 1.1rem; color: var(--c-text);
  margin: 0 0 var(--sp-2);
}
.track-empty-msg strong { color: var(--c-navy); }
.track-empty-sub {
  font-size: .9rem; color: var(--c-text-3);
  margin: 0 0 var(--sp-5);
}

/* panel-art 가 더 이상 메인이 아니라 참고용일 때 */
.panel-art.panel-art-preview {
  margin-top: var(--sp-12);
  background: rgba(10,37,64,.02);
  border-style: dashed;
}
.panel-art.panel-art-preview::before {
  content: '📖 콘텐츠 구조 가이드';
  display: block;
  text-align: center;
  font-size: .82rem;
  color: var(--c-text-3);
  letter-spacing: 1px;
  margin-bottom: var(--sp-4);
}


/* =====================================================================
   웹진 게시판 (트랙 목록 페이지) — /kr/showcase/(track)
===================================================================== */
.showcase-board-hero {
  padding-bottom: var(--sp-10);
}
.showcase-board-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin: 0 0 var(--sp-4);
}
.showcase-board-hero .hero-lead .back-link {
  color: var(--c-gold);
  text-decoration: none;
  font-weight: 700;
}
.showcase-board-hero .hero-lead .back-link:hover { text-decoration: underline; }
.showcase-board-hero .meta-dot { color: rgba(255,255,255,.4); margin: 0 8px; }

/* Hero 게시물 (첫 글 — 큰 카드) */
.webzine-hero {
  margin: var(--sp-10) 0;
}
.webzine-hero-link {
  display: grid;
  grid-template-columns: 320px 1fr;     /* 이미지 320px 고정, 본문 나머지 (현재 비율 대비 ~60% 축소) */
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border-top: 6px solid var(--track-color);
  transition: all .3s var(--ease);
}
.webzine-hero-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(10,37,64,.12);
  text-decoration: none;
}
.webzine-hero-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg-alt);
  position: relative;
  max-height: 320px;        /* 이미지 영역 키도 제한 */
}
.webzine-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.webzine-hero-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5);
}
.webzine-hero-placeholder .placeholder-glyph { font-size: 6rem; font-weight: 800; }
.webzine-hero-badge {
  position: absolute; top: 16px; left: 16px;
  background: var(--track-color);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .5px;
}
.webzine-hero-body {
  padding: var(--sp-10);
  display: flex; flex-direction: column; justify-content: center;
}
.webzine-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: .85rem; color: var(--c-text-3);
  margin: 0 0 var(--sp-3);
}
.webzine-meta .meta-company { font-weight: 700; color: var(--c-navy); }
.webzine-meta .meta-park {
  background: var(--c-bg-alt);
  padding: 2px 10px;
  border-radius: var(--r-full);
}
.webzine-hero-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.25;
  color: var(--c-text);
  margin: 0 0 var(--sp-5);
}
.webzine-hero-summary {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-text-2);
  margin: 0 0 var(--sp-4);
}
.webzine-hero-audience {
  background: rgba(200,151,56,.08);
  border-left: 3px solid var(--c-gold);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: .9rem;
  color: var(--c-text);
  margin: 0 0 var(--sp-5);
}
.webzine-hero-cta {
  color: var(--track-color);
  font-weight: 700;
  font-size: .92rem;
  align-self: flex-start;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}

/* 카드 grid (두 번째 글부터) */
.webzine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-6);
  margin: var(--sp-10) 0;
}
.webzine-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  border-top: 4px solid var(--track-color);
  transition: all .25s var(--ease);
}
.webzine-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10,37,64,.1);
}
.webzine-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.webzine-card-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-alt);
  position: relative;
}
.webzine-card-img img { width: 100%; height: 100%; object-fit: cover; }
.webzine-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.webzine-card-placeholder .placeholder-glyph-sm {
  font-size: 4rem; color: rgba(255,255,255,.6); font-weight: 800;
}
.webzine-card-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: .72rem;
  font-weight: 700;
  background: rgba(255,255,255,.95);
  color: var(--c-navy);
}
.webzine-card-badge.badge-notice { background: var(--c-gold); color: #1a1a1a; }
.webzine-card-body { padding: var(--sp-5); }
.webzine-card-meta {
  font-size: .78rem; color: var(--c-text-3);
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 0 0 var(--sp-2);
}
.webzine-card-meta .meta-company { font-weight: 700; color: var(--c-navy); }
.webzine-card-meta .meta-park { color: var(--track-color); }
.webzine-card-title {
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.4;
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.webzine-card-summary {
  font-size: .88rem;
  color: var(--c-text-2);
  line-height: 1.55;
  margin: 0 0 var(--sp-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.webzine-card-foot {
  font-size: .78rem;
  color: var(--c-text-3);
  display: flex; gap: 12px;
  margin: 0;
}

/* 빈 게시판 */
.webzine-empty {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
}
.webzine-empty h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-text);
  margin: var(--sp-5) 0 var(--sp-3);
}
.webzine-empty p {
  font-size: 1rem;
  color: var(--c-text-2);
  max-width: 560px;
  margin: 0 auto var(--sp-8);
  line-height: 1.7;
}
.empty-cta {
  display: flex; gap: var(--sp-3);
  justify-content: center; flex-wrap: wrap;
}


/* =====================================================================
   웹진 게시물 상세 — /kr/showcase/(track)/(id)
===================================================================== */
.showcase-article { color: var(--c-text); }
.article-hero {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background: var(--c-bg-alt);
}
.article-cover {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
  object-fit: cover;
}
.article-cover-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.article-cover-placeholder .placeholder-glyph-xl {
  font-size: 9rem; color: rgba(255,255,255,.35); font-weight: 800;
}
.article-hero-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: var(--sp-12) 0 var(--sp-10);
  background: linear-gradient(180deg, rgba(10,37,64,0) 0%, rgba(10,37,64,.85) 100%);
}
.article-track-link {
  display: inline-block;
  background: var(--track-color);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: var(--sp-5);
}
.article-track-link:hover { color: #fff; opacity: .92; text-decoration: none; }
.article-title,
.article-track-name {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 var(--sp-4);
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
/* 게시물 제목 — Hero 아래 본문 상단에 위치 */
.article-post-header {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}
.article-meta-top {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: .92rem;
  color: var(--c-text-3);
  margin: 0 0 var(--sp-4);
}
.article-meta-top .meta-company-link {
  color: var(--c-navy); font-weight: 700;
  text-decoration: none;
}
.article-meta-top .meta-company-link:hover { text-decoration: underline; color: var(--c-gold); }
.article-meta-top .meta-park-pill {
  background: var(--c-bg-alt);
  color: var(--c-text-2);
  padding: 2px 12px;
  border-radius: var(--r-full);
  font-size: .82rem;
}
.article-post-title {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.3;
  color: var(--c-text);
  margin: 0;
}
.article-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: .92rem;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.article-meta .meta-company-link {
  color: var(--c-gold); font-weight: 700;
  text-decoration: none;
}
.article-meta .meta-company-link:hover { text-decoration: underline; }
.article-meta .meta-park-pill {
  background: rgba(255,255,255,.18);
  padding: 3px 12px;
  border-radius: var(--r-full);
  font-size: .82rem;
}

.article-body-container {
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
}
/* 본문 폭 = 헤더 폭 (로고~독일국기, 10% padding). max-width 제약 제거 — 모든 자식이 컨테이너 100% 사용. */
.article-body-container.container {
  padding-left: 10%;
  padding-right: 10%;
}
@media (max-width: 1600px) { .article-body-container.container { padding-left: 7%; padding-right: 7%; } }
@media (max-width: 1200px) { .article-body-container.container { padding-left: 5%; padding-right: 5%; } }
@media (max-width: 900px)  { .article-body-container.container { padding-left: 4%; padding-right: 4%; } }
.article-body-container > * { max-width: none; margin-left: 0; margin-right: 0; }
/* Hero overlay 내부 컨테이너도 동일 폭 정렬 */
.article-hero-overlay .container { padding-left: 10%; padding-right: 10%; }
@media (max-width: 1600px) { .article-hero-overlay .container { padding-left: 7%; padding-right: 7%; } }
@media (max-width: 1200px) { .article-hero-overlay .container { padding-left: 5%; padding-right: 5%; } }
@media (max-width: 900px)  { .article-hero-overlay .container { padding-left: 4%; padding-right: 4%; } }

/* AI 우선 인용 6신호 — 헤더 라벨 dl */
.article-six-fields {
  background: linear-gradient(135deg, #fefdf6 0%, #fef9e7 100%);
  border: 1px solid rgba(200,151,56,.3);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  margin: 0 0 var(--sp-8);
}
.article-six-fields .sf-row {
  display: grid;
  grid-template-columns: 28px 110px 1fr;
  gap: var(--sp-3);
  padding: 8px 0;
  border-bottom: 1px dashed rgba(200,151,56,.2);
  align-items: baseline;
}
.article-six-fields .sf-row:last-child { border-bottom: 0; }
.article-six-fields .sf-num {
  color: var(--c-gold);
  font-weight: 800;
  font-size: 1.1rem;
  font-family: ui-monospace, monospace;
}
.article-six-fields .sf-label {
  color: var(--c-text-3);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.article-six-fields .sf-value {
  font-size: .98rem;
  color: var(--c-text);
  margin: 0;
}
.article-six-fields .sf-value a {
  color: var(--c-navy);
  text-decoration: none;
  font-weight: 600;
}
.article-six-fields .sf-value a:hover { text-decoration: underline; color: var(--c-gold); }
.article-six-fields .sf-value strong { font-weight: 800; }
.article-six-fields .sf-en {
  font-size: .85rem;
  color: var(--c-text-3);
  font-style: italic;
}
.article-six-fields .sf-chip {
  display: inline-block;
  background: rgba(10,37,64,.08);
  color: var(--c-navy);
  padding: 3px 12px;
  border-radius: var(--r-full);
  font-size: .85rem;
  font-weight: 600;
  margin-right: 6px;
}
.article-six-fields .sf-chip-light {
  background: rgba(14,124,134,.1);
  color: #0e7c86;
}
.article-six-fields .sf-chip-park {
  background: rgba(200,151,56,.15);
  color: var(--c-gold);
}

/* 섹션 라벨 (소개·핵심기술·FAQ·외부연결) — 본문 서체, 키워서 가독성 */
.article-section-label {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--track-color, var(--c-navy));
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-4);
  font-family: inherit;        /* 본문 서체 사용 (굴림체 → 본문체) */
  line-height: 1.3;
}

/* 외부 연결 리스트 */
.article-external-links {
  background: #f0f9ff;
  border-left: 4px solid #0ea5e9;
  border-radius: 8px;
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-8) 0;
}
.article-external-links .ext-link-list {
  list-style: none;
  padding: 0; margin: 0;
}
.article-external-links li {
  padding: 8px 0;
  border-bottom: 1px dashed #bae6fd;
}
.article-external-links li:last-child { border-bottom: 0; }
.article-external-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0c4a6e;
  text-decoration: none;
  font-size: .92rem;
  flex-wrap: wrap;
}
.article-external-links a:hover { text-decoration: underline; }
.article-external-links .ext-icon { font-size: 1.2rem; }
.article-external-links .ext-label {
  font-weight: 700;
  color: #0369a1;
  min-width: 110px;
}
.article-external-links .ext-url {
  font-size: .85rem;
  color: #075985;
  font-family: ui-monospace, monospace;
  word-break: break-all;
}

.article-summary {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-left: 4px solid #22c55e;
  border-radius: 8px;
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.article-summary-eyebrow {
  font-size: .78rem; font-weight: 800;
  color: #166534;
  letter-spacing: 2px;
  margin: 0 0 8px;
}
.article-summary-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #14532d;
  margin: 0;
}

.article-audience {
  background: rgba(200,151,56,.08);
  border-left: 4px solid var(--c-gold);
  border-radius: 8px;
  padding: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.article-audience .audience-eyebrow {
  font-size: .82rem; font-weight: 800;
  color: var(--c-gold);
  margin: 0 0 6px;
  display: block;
}
.article-audience p {
  font-size: 1rem; line-height: 1.7;
  color: var(--c-text);
  margin: 0;
}

.article-content {
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--c-text);
  margin-bottom: var(--sp-10);
}
.article-content p { margin: 0 0 var(--sp-5); }
.article-content h2, .article-content h3 {
  font-weight: 800;
  letter-spacing: -.025em;
  margin: var(--sp-10) 0 var(--sp-4);
}
.article-content h2 { font-size: 1.6rem; }
.article-content h3 { font-size: 1.3rem; }
.article-content blockquote {
  border-left: 4px solid var(--track-color);
  padding-left: var(--sp-5);
  font-style: italic;
  color: var(--c-text-2);
  margin: var(--sp-6) 0;
}
.article-content img {
  max-width: 100%; height: auto;
  border-radius: var(--r-md);
  margin: var(--sp-5) 0;
}

.article-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: var(--sp-8) 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.15);
}
.article-video iframe { width: 100%; height: 100%; border: 0; }

/* 섹션 라벨에 보조 메타(예: "10장") */
.article-section-label .label-meta {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text-3);
  margin-left: 8px;
}

/* ========== 갤러리 (최대 10장 그리드) ========== */
.article-gallery {
  margin: var(--sp-10) 0;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.gallery-item {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  transition: all .25s var(--ease);
  position: relative;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--ease);
}
.gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(10,37,64,.15);
  border-color: var(--track-color, var(--c-teal));
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item::after {
  content: '🔍';
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(10,37,64,.75);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.gallery-item:hover::after { opacity: 1; }

/* ========== YouTube 영상 + Shorts ========== */
.article-videos {
  margin: var(--sp-10) 0;
}
.videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
.videos-grid.has-shorts {
  grid-template-columns: 2.4fr 1fr;
  align-items: start;
}
.video-eyebrow {
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-text-2);
  margin-bottom: var(--sp-2);
  letter-spacing: -.01em;
}
.video-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  background: #000;
}
.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-frame-16x9 { aspect-ratio: 16 / 9; }
.video-frame-9x16 {
  aspect-ratio: 9 / 16;
  max-width: 360px;
}

@media (max-width: 900px) {
  .videos-grid.has-shorts { grid-template-columns: 1fr; }
  .video-frame-9x16 { max-width: 280px; margin: 0 auto; }
}

.article-transcript {
  background: #f8fafc;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin: var(--sp-6) 0;
}
.article-transcript summary {
  font-weight: 700;
  cursor: pointer;
  color: var(--c-navy);
}
.article-transcript .transcript-text {
  margin-top: var(--sp-4);
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-text-2);
}

.article-claim {
  background: #f0f9ff;
  border-left: 4px solid #0ea5e9;
  border-radius: 8px;
  padding: var(--sp-5);
  margin: var(--sp-8) 0;
}
.article-claim .claim-eyebrow {
  font-size: .82rem;
  font-weight: 800;
  color: #0369a1;
  margin: 0 0 6px;
}
.article-claim .claim-text {
  font-size: .95rem;
  line-height: 1.7;
  color: #0c4a6e;
  margin: 0;
}

.article-faq {
  margin: var(--sp-12) 0;
}
.article-faq h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 var(--sp-6);
}
.article-faq details {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
}
.article-faq summary {
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  color: var(--c-text);
}
.article-faq details[open] {
  background: #f8fafc;
  border-color: var(--track-color);
}
.article-faq details p {
  margin: var(--sp-4) 0 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--c-text-2);
}

.article-company-card {
  background: linear-gradient(135deg, #0a2540 0%, #1a3f6f 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  margin: var(--sp-12) 0;
}
.cc-eyebrow {
  font-size: .82rem;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--c-gold);
  margin: 0 0 var(--sp-5);
}
.cc-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-5);
}
.cc-logo, .cc-logo-placeholder {
  width: 80px; height: 80px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; color: var(--c-gold);
  object-fit: cover;
}
.cc-info h3 {
  font-size: 1.4rem; font-weight: 800;
  margin: 0 0 4px; color: #fff;
  letter-spacing: -.02em;
}
.cc-info .cc-en {
  font-size: .9rem;
  color: rgba(255,255,255,.7);
  margin: 0 0 var(--sp-3);
}
.cc-info .cc-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: .85rem;
  color: rgba(255,255,255,.85);
  margin: 0 0 var(--sp-5);
}
.cc-info .cc-meta .park-pill {
  background: rgba(244,215,128,.18);
  color: var(--c-gold);
  padding: 2px 10px;
  border-radius: var(--r-full);
}
.cc-info .cc-links {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 0;
}
.btn.btn-sm { padding: 6px 14px; font-size: .85rem; }
.btn.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
}
.btn.btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

.article-foot-nav {
  display: flex; gap: var(--sp-5);
  flex-wrap: wrap;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-border);
  margin-top: var(--sp-8);
}
.article-foot-nav .back-link {
  color: var(--c-text-2);
  text-decoration: none;
  font-size: .92rem;
}
.article-foot-nav .back-link:hover {
  color: var(--c-navy);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .webzine-hero-link { grid-template-columns: 1fr; }
  .webzine-hero-body { padding: var(--sp-6); }
  .article-hero { min-height: 360px; }
  .article-hero-overlay { padding: var(--sp-8) 0 var(--sp-6); }
  .cc-grid { grid-template-columns: 60px 1fr; gap: var(--sp-4); }
  .cc-logo, .cc-logo-placeholder { width: 60px; height: 60px; }
}

/* SNS·블로그 빈 슬롯 — 흑백 비활성 (회사가 아직 채우지 않은 채널) */
.smr-i.is-empty {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: .35;
  pointer-events: none;
}
.smr-i.is-empty:hover {
  background: var(--c-bg-alt) !important;
  color: var(--c-text);
  transform: none;
}

/* 우측 갤러리 — 영상 썸네일과 동일 사이즈 3장 */
.si-gallery { flex: 0 0 auto; display: flex; gap: 6px; }
.si-gal-item {
  display: block; flex: 0 0 160px;
  width: 160px; height: 90px; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--c-border);
  background: var(--c-bg-alt); transition: all .15s var(--ease);
}
.si-gal-item:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--c-teal); }
.si-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 본문 — 스니펫 + 인라인 SNS 한 줄 */
.snippet-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin: var(--sp-2) 0 0; font-size: .9rem; color: var(--c-text-2);
}
.snippet-row .snippet { margin: 0; flex: 0 1 auto; }
.sns-inline { display: inline-flex; align-items: center; gap: 4px; }
.sns-label { font-size: .8rem; font-weight: 600; color: var(--c-text-3); margin-right: 2px; }
.smr-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: var(--r-sm); background: var(--c-bg-alt); color: var(--c-text);
  font-size: 12px; text-decoration: none; transition: all .15s var(--ease);
}
.smr-i:hover { color: #fff; transform: translateY(-1px); text-decoration: none; }
.smr-ig:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.smr-fb:hover { background: #1877f2; }
.smr-li:hover { background: #0a66c2; }
.smr-blog:hover { background: #03c75a; }

/* 화면 폭 따른 갤러리 자동 축소 */
@media (max-width: 1400px) {
  .si-gallery { gap: 4px; }
  .si-gal-item { flex: 0 0 120px; width: 120px; height: 70px; }
}
@media (max-width: 1100px) {
  .si-gal-item { flex: 0 0 90px; width: 90px; height: 56px; }
}
@media (max-width: 900px) {
  .search-item { flex-wrap: wrap; }
  .si-gallery { flex: 0 0 100%; margin-top: 8px; }
  .si-gal-item { flex: 1 1 0; width: auto; height: 90px; }
}
.search-link-empty { color: var(--c-text-3); cursor: default; opacity: .7; }
.search-link-empty:hover { text-decoration: none; color: var(--c-text-3); }
.search-link-tel { color: var(--c-teal); font-weight: 500; }
.search-link-email { color: var(--c-text-2); }
/* Hub 강조 텍스트 — {HL}…{/HL} 마커가 .hub-hl 로 변환됨 */
.hub-hl {
  background: linear-gradient(120deg, var(--c-gold) 0%, #f4d780 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  font-size: 1.18em;
  letter-spacing: -.01em;
  padding: 0 2px;
  display: inline-block;
}
/* "우리회사 정보 보완하기" 버튼 — 한국어 검색 결과 회사명 옆 */
.btn-claim {
  display: inline-block; margin-left: 10px; padding: 4px 10px;
  font-size: .78rem; font-weight: 600; line-height: 1.4;
  background: var(--c-bg-alt); color: var(--c-teal);
  border: 1px solid #d0e4e6; border-radius: var(--r-full);
  text-decoration: none; vertical-align: middle;
  transition: all .15s var(--ease); white-space: nowrap;
}
.btn-claim:hover { background: var(--c-teal); color: #fff; border-color: var(--c-teal); text-decoration: none; transform: translateY(-1px); }
.search-item h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.search-item h3 a { flex: 0 1 auto; }
@media (max-width: 600px) {
  .search-item { flex-direction: column; gap: var(--sp-3); }
  .search-thumb { width: 100%; flex: none; height: 200px; }
}
.search-item.is-auto-translated { border-left: 3px solid var(--c-teal); padding-left: var(--sp-5); background: var(--c-teal-light); border-radius: 0 var(--r-md) var(--r-md) 0; }
.translation-notice { padding: var(--sp-4); background: var(--c-teal-light); border-left: 4px solid var(--c-teal); border-radius: var(--r-sm); margin-bottom: var(--sp-6); color: var(--c-navy); }
.badge { display: inline-block; font-size: .72rem; padding: 3px 10px; background: var(--c-bg-alt); color: var(--c-text-2); border-radius: var(--r-full); margin-right: 6px; font-weight: 600; letter-spacing: .02em; }
.badge.type-company { background: #e6f7e6; color: #166534; }
.badge.type-post    { background: #fff7d6; color: #854d0e; }
.badge.type-page    { background: #f0e7ff; color: #5b21b6; }
.badge-fallback     { background: #fff0e6; color: #9a3412; }
.badge-translated   { background: var(--c-teal-light); color: var(--c-teal); }
mark { background: var(--c-mark); padding: 0 4px; border-radius: 3px; font-weight: 600; color: var(--c-text); }

/* Pagination */
.pagination { text-align: center; margin: var(--sp-10) 0; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--c-border-2); color: var(--c-text); font-weight: 500; transition: all .15s var(--ease); }
.pagination .cur { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.pagination a:hover { background: var(--c-bg-alt); text-decoration: none; }

/* Company detail */
.company-detail { max-width: 920px; margin: 0 auto; }
.company-header { display: flex; gap: var(--sp-6); align-items: center; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--c-border); }
.company-header .logo { width: 100px; height: 100px; object-fit: contain; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 8px; background: #fff; }
.company-header h1 { margin: 0; font-size: 1.8rem; }
.company-header .alt-name { color: var(--c-text-2); margin: 4px 0; font-size: .95rem; }
.company-header .park-badge { display: inline-block; background: var(--c-bg-alt); padding: 4px 12px; border-radius: var(--r-full); font-size: .82rem; color: var(--c-navy); }
.company-info { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-3) var(--sp-5); margin: var(--sp-8) 0; }
.company-info dt { font-weight: 600; color: var(--c-text-2); }
.company-info dd { margin: 0; color: var(--c-text); }
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-6) 0; }
.tags li a { display: inline-block; padding: 6px 12px; background: var(--c-bg-alt); border-radius: var(--r-full); font-size: .85rem; color: var(--c-navy); border: 1px solid var(--c-border); }
.tags li a:hover { background: var(--c-navy); color: #fff; }

/* Footer */
.site-footer { background: linear-gradient(180deg, var(--c-navy) 0%, #051527 100%); color: #c0d4ee; padding: var(--sp-16) 0 var(--sp-6); }
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: var(--sp-4); }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--sp-8); margin-bottom: var(--sp-10); }
@media (max-width: 720px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { padding: 4px 0; }
.site-footer a { color: #c0d4ee; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-brand h3 { color: #fff; font-size: 1.2rem; }
.site-footer .footer-brand p { color: #8a9aae; font-size: .85rem; line-height: 1.65; }
.site-footer .copyright { text-align: center; padding-top: var(--sp-8); border-top: 1px solid rgba(255,255,255,.08); font-size: .82rem; color: #6a7a8e; }

/* Lang notice */
.lang-notice { background: linear-gradient(90deg, #fff8e1 0%, var(--c-gold-light) 100%); border-bottom: 1px solid #f0d878; font-size: .9rem; }
.lang-notice .container { display: flex; align-items: center; gap: var(--sp-3); padding-top: 10px; padding-bottom: 10px; }
.lang-notice-icon { color: #b07f00; font-weight: 700; }
.lang-notice-text { color: #5a4400; flex: 1; }
.lang-notice-close { background: none; border: 0; font-size: 1.4em; line-height: 1; color: #8a6800; cursor: pointer; }

/* Popup */
.btpa-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.3); border-radius: var(--r-lg); z-index: 9999; max-width: 90vw; }
.btpa-popup-inner { padding: var(--sp-6); min-width: 320px; }
.btpa-popup-x { position: absolute; top: 12px; right: 12px; background: none; border: 0; font-size: 1.5em; cursor: pointer; }
.btpa-popup-close { display: block; margin-top: var(--sp-4); padding: 8px 14px; background: var(--c-bg-alt); border: 1px solid var(--c-border-2); border-radius: var(--r-sm); }

/* Misc */
.empty { padding: var(--sp-20) var(--sp-4); text-align: center; color: var(--c-text-3); }
.error { padding: var(--sp-12); text-align: center; color: var(--c-danger); }
.muted { color: var(--c-text-3); }
.back { display: inline-block; margin-top: var(--sp-6); color: var(--c-text-2); }

/* CTA Banner */
.cta-banner { position: relative; overflow: hidden; color: #fff; padding: clamp(56px, 6vw, 88px) 0; text-align: center; isolation: isolate; }
.cta-banner__deco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.cta-banner__inner { position: relative; z-index: 1; padding: 0 clamp(20px, 5vw, 60px); max-width: 1400px; margin: 0 auto; }
.cta-banner h2 { color: #fff; margin: 0 0 var(--sp-3); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.cta-banner__lead { color: #e6f1f9; max-width: 1100px; margin: 0 auto var(--sp-6); font-size: clamp(.9rem, 1vw, 1.05rem); text-shadow: 0 1px 6px rgba(0,0,0,.35); line-height: 1.6; }
.cta-banner__lead br { display: block; content: ''; margin-top: 4px; }
.cta-banner__btn { background: #fff; color: var(--c-navy); box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: all .2s var(--ease); }
.cta-banner__btn:hover { background: var(--c-gold); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.32); }
@media (max-width: 768px) {
  .cta-banner__deco { opacity: .55; }
  .cta-banner__lead { white-space: normal; max-width: 90%; }
}

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.hero h1, .hero-lead, .hero-search { animation: fadeUp .6s var(--ease) both; }
.hero-lead { animation-delay: .1s; }
.hero-search { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print { .site-header, .site-footer, .hero-search, .lang-switcher, .btpa-popup, .lang-notice { display: none; } body { color: #000; background: #fff; } }


/* =============================================================================
 * SUBPAGE SYSTEM — 모든 서브페이지의 공통 골격
 *  - 본문 영역: 좌 15% / 우 15% 여백 (사용자 합의)
 *  - 모바일에서는 여백 점진 축소
 * ============================================================================= */
.subpage { background: var(--c-bg); }
.subpage-shell { padding: clamp(48px, 6vw, 96px) 15% clamp(72px, 8vw, 120px); }
@media (max-width: 1100px) { .subpage-shell { padding-left: 8%;  padding-right: 8%; } }
@media (max-width: 768px)  { .subpage-shell { padding-left: 5%;  padding-right: 5%; } }

/* 페이지 헤더 (다크 그라데이션 + 인라인 SVG 패턴) */
.subpage-hero { position: relative; overflow: hidden; padding: 0; min-height: clamp(220px, 28vw, 360px); display: flex; align-items: center; justify-content: center; color: #fff; }
.subpage-hero__deco { position: absolute; inset: 0; width: 100%; height: 100%; }
.subpage-hero__inner { position: relative; z-index: 2; padding: clamp(40px, 5vw, 72px) 15% clamp(36px, 4vw, 60px); width: 100%; max-width: 100%; }
@media (max-width: 1100px) { .subpage-hero__inner { padding-left: 8%; padding-right: 8%; } }
@media (max-width: 768px)  { .subpage-hero__inner { padding-left: 5%; padding-right: 5%; } }

.subpage-crumbs { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: rgba(255,255,255,.7); margin-bottom: var(--sp-4); }
.subpage-crumbs a { color: rgba(255,255,255,.78); text-decoration: none; transition: color .15s var(--ease); }
.subpage-crumbs a:hover { color: #fff; text-decoration: underline; }
.subpage-crumbs .sep { opacity: .4; }
.subpage-crumbs .cur { color: #fff; font-weight: 600; }

.subpage-eyebrow { display: inline-block; color: var(--c-gold); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.subpage-title { margin: 0 0 var(--sp-4); font-size: clamp(1.7rem, 3.4vw, 2.65rem); line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: #fff; }
/* 다크 hero 전용 — 기존 .hub-hl(text-clip 골드 그라데이션)을 끄고 단색 골드 + underline 하이라이트로 명시 */
.subpage-hero .hub-hl,
.subpage-title .hub-hl {
  background: linear-gradient(180deg, transparent 62%, rgba(255,215,110,.38) 62%);
  -webkit-background-clip: border-box;
          background-clip: border-box;
  color: #ffd76a;
  font-size: 1em;
  padding: 0 .12em;
  border-radius: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.subpage-lead { margin: 0; font-size: clamp(.95rem, 1.1vw, 1.05rem); color: rgba(255,255,255,.85); }
.subpage-lead strong { color: #fff; }


/* =============================================================================
 * ABOUT — 발전협의회 소개 페이지 전용 디자인
 * ============================================================================= */
/* 공통 섹션 헤드 */
.about-section-head { margin: 0 0 var(--sp-8); max-width: 760px; }
.about-section-head--center { margin: 0 auto var(--sp-8); text-align: center; }
.about-eyebrow { display: inline-block; color: var(--c-teal); font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.about-eyebrow--gold { color: var(--c-gold); }
.about-h2 { margin: 0 0 var(--sp-4); font-size: clamp(1.55rem, 2.6vw, 2.2rem); line-height: 1.3; font-weight: 800; letter-spacing: -.01em; color: var(--c-navy); }
.about-h2 em { font-style: normal; color: var(--c-teal); position: relative; padding: 0 .15em; }
.about-h2 em::before { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: .35em; background: rgba(200,151,56,.22); z-index: -1; border-radius: 2px; }
.about-h2--inverse { color: #fff; }
.about-h2--inverse em { color: var(--c-gold); }
.about-h2--inverse em::before { background: rgba(200,151,56,.30); }
.about-h2--small { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin-bottom: var(--sp-5); }
.about-section-lead { margin: 0; color: rgba(255,255,255,.85); font-size: clamp(.95rem, 1.05vw, 1.05rem); line-height: 1.7; max-width: 720px; }

/* MISSION — 3 카드 (지그재그 SVG + 풍부한 본문) */
.about-mission { padding-top: clamp(56px, 6vw, 96px) !important; padding-bottom: clamp(40px, 4vw, 64px) !important; }

.about-mp { position: relative; display: grid; grid-template-columns: clamp(260px, 33%, 440px) 1fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; padding: clamp(28px, 3vw, 48px); margin: 0 0 clamp(28px, 3.5vw, 56px); border-radius: var(--r-xl); background: linear-gradient(180deg, #ffffff 0%, var(--c-bg-alt) 100%); border: 1px solid var(--c-border); box-shadow: var(--sh-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); overflow: hidden; }
.about-mp:last-child { margin-bottom: 0; }
.about-mp::before { content: attr(data-card); position: absolute; right: clamp(16px, 2vw, 28px); top: clamp(14px, 1.6vw, 22px); font-family: var(--font-mono); font-size: clamp(2.2rem, 3.4vw, 3.4rem); font-weight: 800; color: rgba(10,37,64,.06); letter-spacing: .02em; line-height: 1; pointer-events: none; z-index: 0; }
.about-mp:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--c-border-2); }
/* 짝수 카드는 SVG를 우측으로 (지그재그) */
.about-mp[data-card="02"] { grid-template-columns: 1fr clamp(260px, 33%, 440px); }
.about-mp[data-card="02"] .about-mp__svg-wrap { order: 2; }
.about-mp[data-card="02"] .about-mp__body    { order: 1; }
@media (max-width: 880px) {
  .about-mp { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-6) var(--sp-5); align-items: center; }
  .about-mp[data-card="02"] { grid-template-columns: 1fr; }
  .about-mp[data-card="02"] .about-mp__svg-wrap { order: 0; }
  .about-mp[data-card="02"] .about-mp__body    { order: 1; }
  .about-mp::before { right: 12px; top: 8px; font-size: 2rem; }
}

/* SVG 래퍼 — 본문 길이에 맞춰 함께 늘어남 (align-items: stretch) */
.about-mp__svg-wrap { position: relative; width: 100%; min-height: 260px; align-self: stretch; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 50%, #f7f9fc 0%, var(--c-bg-alt) 70%, #eef2f7 100%); display: flex; align-items: center; justify-content: center; padding: clamp(16px, 2vw, 28px); }
.about-mp--ai      .about-mp__svg-wrap { background: radial-gradient(circle at 50% 40%, #faf3e0 0%, #fef9ee 60%, #fff 100%); border: 1px solid #f5e6c0; }
.about-mp--cluster .about-mp__svg-wrap { background: radial-gradient(circle at 50% 50%, #e6eef8 0%, #f4f7fc 60%, #fff 100%); border: 1px solid #d8e3f1; }
.about-mp--support .about-mp__svg-wrap { background: radial-gradient(circle at 50% 50%, #e6f4f5 0%, #f1f9fa 60%, #fff 100%); border: 1px solid #c8e3e6; }
.about-mp__svg { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }
@media (max-width: 880px) {
  .about-mp__svg-wrap { min-height: 240px; max-width: 320px; margin: 0 auto; aspect-ratio: 1 / 1; }
}

/* 본문 */
.about-mp__body { position: relative; z-index: 1; min-width: 0; }
.about-mp__tag { display: inline-flex; align-items: center; padding: 4px 12px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-full); color: var(--c-text-2); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.about-mp__tag--gold { background: linear-gradient(135deg, #faf3e0, #fff5d6); border-color: #e8c876; color: #8a6313; }
.about-mp--ai      .about-mp__tag { background: linear-gradient(135deg, #faf3e0, #fff5d6); border-color: #e8c876; color: #8a6313; }
.about-mp--cluster .about-mp__tag { background: #e6eef8; border-color: #c4d4ea; color: #1a3a5e; }
.about-mp--support .about-mp__tag { background: #e6f4f5; border-color: #b8dde0; color: #0a5a62; }
.about-mp__h { margin: 0 0 var(--sp-4); font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 800; line-height: 1.35; color: var(--c-navy); letter-spacing: -.01em; }
.about-mp__lead { margin: 0 0 var(--sp-5); color: var(--c-text); font-size: clamp(.97rem, 1.05vw, 1.05rem); line-height: 1.8; }
.about-mp__lead strong { color: var(--c-navy); font-weight: 700; background: linear-gradient(180deg, transparent 62%, rgba(200,151,56,.28) 62%); padding: 0 2px; }
.about-mp__lead em { font-style: normal; color: var(--c-teal); font-weight: 700; }

.about-mp__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-4); }
@media (max-width: 980px) { .about-mp__list { grid-template-columns: 1fr; } }
.about-mp__list li { position: relative; padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 18px); background: rgba(255,255,255,.7); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text-2); font-size: .93rem; line-height: 1.7; transition: all .2s var(--ease); }
.about-mp__list li:hover { background: #fff; border-color: var(--c-border-2); transform: translateX(2px); }
.about-mp__list li::before { content: ''; position: absolute; left: var(--sp-4); top: calc(var(--sp-4) + 8px); width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--c-gold), #f0b85b); box-shadow: 0 0 0 3px rgba(200,151,56,.18); }
.about-mp--cluster .about-mp__list li::before { background: linear-gradient(135deg, #0e7c86, #15a3b0); box-shadow: 0 0 0 3px rgba(14,124,134,.18); }
.about-mp__list li strong { display: block; color: var(--c-navy); font-weight: 700; font-size: 1em; line-height: 1.45; margin-bottom: 6px; }
.about-mp__list li em { font-style: normal; color: var(--c-teal); font-weight: 700; background: linear-gradient(180deg, transparent 65%, rgba(14,124,134,.18) 65%); padding: 0 2px; }
.about-mp__list li code { background: var(--c-bg-alt); border: 1px solid var(--c-border); padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono); font-size: .82em; color: var(--c-teal-2); }

/* RTL — 카드 02 지그재그 역전 */
.lang-ar .about-mp__list li { padding: var(--sp-4) calc(var(--sp-4) + 18px) var(--sp-4) var(--sp-4); }
.lang-ar .about-mp__list li::before { left: auto; right: var(--sp-4); }
.lang-ar .about-mp__list li:hover { transform: translateX(-2px); }

/* STATS — 4개 큰 숫자 */
.about-stats { background: linear-gradient(135deg, #0a2540 0%, #133359 50%, #1a3a5e 100%); color: #e6eef8; padding: clamp(56px, 6vw, 96px) 0; position: relative; overflow: hidden; }
.about-stats::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(200,151,56,.18), transparent 55%), radial-gradient(circle at 15% 85%, rgba(14,124,134,.22), transparent 55%); pointer-events: none; }
.about-stats > .subpage-shell { padding-top: 0 !important; padding-bottom: 0 !important; }
.about-stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 24px); }
@media (max-width: 1100px) { .about-stats__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
@media (max-width: 700px)  { .about-stats__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px)  { .about-stats__grid { grid-template-columns: 1fr; } }
.about-stat { position: relative; padding: clamp(20px, 2.5vw, 32px) clamp(16px, 2vw, 24px); background: rgba(255,255,255,.04); border: 1px solid rgba(200,151,56,.22); border-radius: var(--r-lg); text-align: center; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.about-stat:hover { transform: translateY(-4px); border-color: rgba(200,151,56,.55); }
.about-stat__num { display: block; font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.05; font-family: var(--font-mono); }
.about-stat__label { display: block; margin-top: var(--sp-2); color: #c8d3e1; font-size: clamp(.82rem, .95vw, .95rem); font-weight: 500; letter-spacing: .04em; }
.about-stat--accent { background: linear-gradient(180deg, rgba(200,151,56,.18) 0%, rgba(200,151,56,.06) 100%); border-color: rgba(255,215,110,.55); }
.about-stat--accent .about-stat__num { color: #ffd76a; }

/* GOALS — 2 카드 (우리는 해냅니다!) */
.about-goals { padding-top: clamp(56px, 6vw, 96px) !important; padding-bottom: clamp(40px, 4vw, 64px) !important; }
.about-goals__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 2.8vw, 44px); }
@media (max-width: 880px) { .about-goals__grid { grid-template-columns: 1fr; } }
.about-goal { padding: clamp(32px, 3.4vw, 52px); background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--sh-sm); position: relative; overflow: hidden; transition: all .3s var(--ease); }
.about-goal::after { content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--c-teal), var(--c-gold)); transition: width .35s var(--ease); }
.about-goal:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--c-border-2); }
.about-goal:hover::after { width: 100%; }
.about-goal__icon { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 180px; aspect-ratio: 1 / 1; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 45%, #f7f9fc 0%, var(--c-bg-alt) 70%, #eef2f7 100%); border: 1px solid var(--c-border); margin: 0 0 var(--sp-5); padding: clamp(12px, 1.6vw, 20px); }
.about-goal--inflow .about-goal__icon { background: radial-gradient(circle at 50% 45%, #e6f4f5 0%, #f1f9fa 60%, #fff 100%); border-color: #c8e3e6; }
.about-goal--boost  .about-goal__icon { background: radial-gradient(circle at 50% 45%, #faf3e0 0%, #fef9ee 60%, #fff 100%); border-color: #f5e6c0; }
.about-goal__svg { width: 100%; height: 100%; display: block; }
.about-goal__t { margin: 0 0 var(--sp-4); font-size: clamp(1.15rem, 1.55vw, 1.42rem); font-weight: 800; color: var(--c-navy); line-height: 1.4; letter-spacing: -.01em; }
.about-goal__t em { font-style: normal; color: var(--c-teal); position: relative; padding: 0 .12em; }
.about-goal__t em::before { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: .35em; background: rgba(200,151,56,.22); z-index: -1; border-radius: 2px; }
.about-goal__d { margin: 0; color: var(--c-text); font-size: clamp(.95rem, 1.02vw, 1.04rem); line-height: 1.85; }
.about-goal__d strong { color: var(--c-navy); font-weight: 700; background: linear-gradient(180deg, transparent 62%, rgba(200,151,56,.26) 62%); padding: 0 2px; }
.about-goal__d em { font-style: normal; color: var(--c-teal); font-weight: 700; background: linear-gradient(180deg, transparent 65%, rgba(14,124,134,.18) 65%); padding: 0 2px; }
.about-goal--inflow .about-goal__d strong { background: linear-gradient(180deg, transparent 62%, rgba(14,124,134,.22) 62%); }
.about-goal--boost  .about-goal__d strong { background: linear-gradient(180deg, transparent 62%, rgba(200,151,56,.30) 62%); }

/* PARKS — 9 단지 그리드 */
.about-parks { background: linear-gradient(180deg, #0a2540 0%, #133359 100%); color: #fff; padding: clamp(56px, 6vw, 96px) 0; position: relative; overflow: hidden; }
.about-parks::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; opacity: .55; pointer-events: none; }
.about-parks > .subpage-shell { padding-top: 0 !important; padding-bottom: 0 !important; position: relative; }
.about-parks .about-section-lead { max-width: none; }
.about-parks__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 980px) { .about-parks__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .about-parks__grid { grid-template-columns: 1fr; } }
.about-park-cell { display: contents; }
.about-park { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); background: rgba(255,255,255,.05); border: 1px solid rgba(200,151,56,.22); border-radius: var(--r-md); transition: all .25s var(--ease); text-decoration: none; }
.about-park--link { cursor: pointer; }
.about-park--link:hover { background: rgba(255,255,255,.11); border-color: rgba(200,151,56,.7); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.about-park--link:hover .about-park__code { background: rgba(200,151,56,.25); color: #ffd76a; }
.about-park--link:hover .about-park__ext { opacity: 1; transform: translate(2px,-2px); }
.about-park__num { flex-shrink: 0; font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--c-gold); letter-spacing: .04em; }
.about-park__name { flex: 1 1 auto; font-size: clamp(.9rem, 1.02vw, 1.02rem); font-weight: 600; color: #fff; line-height: 1.4; min-width: 0; }
.about-park__code { flex-shrink: 0; font-family: var(--font-mono); font-weight: 600; font-size: .72rem; color: rgba(200,215,235,.75); padding: 4px 8px; background: rgba(255,255,255,.06); border-radius: 999px; letter-spacing: .06em; transition: all .2s var(--ease); }
.about-park__ext { flex-shrink: 0; color: rgba(200,215,235,.55); opacity: .7; transition: all .2s var(--ease); }
/* 입주예정 (10번째) — 골드 그라디언트 보더 + COMING 배지 */
.about-park--coming { background: linear-gradient(180deg, rgba(200,151,56,.12) 0%, rgba(200,151,56,.04) 100%); border: 1px dashed rgba(200,151,56,.6); cursor: default; }
.about-park--coming:hover { background: linear-gradient(180deg, rgba(200,151,56,.16) 0%, rgba(200,151,56,.06) 100%); }
.about-park--coming .about-park__num { color: rgba(200,151,56,.5); }
.about-park--coming .about-park__name { color: rgba(255,255,255,.85); }
.about-park__badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: linear-gradient(135deg, #c89738, #f0b85b); color: #1a2332; font-size: .7rem; font-weight: 800; border-radius: 999px; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(200,151,56,.4); }
.about-park__badge::before { content: '✦'; font-size: .85em; }

/* SLOGAN */
.about-slogan { padding-top: clamp(56px, 6vw, 96px) !important; padding-bottom: clamp(40px, 4vw, 64px) !important; }
.about-slogan__card { position: relative; padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px); border-radius: var(--r-xl); background: linear-gradient(135deg, #faf3e0 0%, #fff 50%, #e6f4f5 100%); border: 1px solid var(--c-border); text-align: center; box-shadow: var(--sh-md); overflow: hidden; }
.about-slogan__card::before { content: ''; position: absolute; top: -40%; right: -10%; width: 60%; height: 200%; background: conic-gradient(from 0deg, rgba(200,151,56,.10), transparent 25%, rgba(14,124,134,.10) 50%, transparent 75%, rgba(200,151,56,.10)); animation: aboutSloganRotate 24s linear infinite; pointer-events: none; }
@keyframes aboutSloganRotate { to { transform: rotate(360deg); } }
.about-slogan__eyebrow { display: inline-block; padding: 6px 14px; background: var(--c-navy); color: var(--c-gold); font-size: .78rem; font-weight: 700; letter-spacing: .15em; border-radius: 999px; margin-bottom: var(--sp-5); position: relative; }
.about-slogan__main { position: relative; margin: 0 0 var(--sp-5); font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.3; color: var(--c-navy); letter-spacing: -.01em; }
.about-slogan__main em { font-style: normal; color: var(--c-gold); }
.about-slogan__sub { position: relative; margin: 0; color: var(--c-text-2); font-size: clamp(.98rem, 1.1vw, 1.1rem); line-height: 1.7; max-width: 680px; margin-left: auto; margin-right: auto; }

/* LEGAL CARD */
.about-legal { padding-top: clamp(40px, 4vw, 64px) !important; padding-bottom: clamp(40px, 4vw, 64px) !important; }
.about-legal__dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-6); }
@media (max-width: 700px) { .about-legal__dl { grid-template-columns: 1fr; } }
.about-legal__dl > div { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px dashed var(--c-border-2); }
.about-legal__dl dt { color: var(--c-text-2); font-size: .9rem; font-weight: 600; letter-spacing: .02em; }
.about-legal__dl dd { margin: 0; color: var(--c-text); font-size: .95rem; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }

/* CTA buttons row */
.about-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-top: clamp(28px, 3vw, 48px) !important; padding-bottom: clamp(48px, 6vw, 96px) !important; border-top: 1px solid var(--c-border); margin-top: 0; }
.about-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-full); color: var(--c-navy); font-size: .95rem; font-weight: 600; text-decoration: none; transition: all .2s var(--ease); }
.about-cta:hover { background: #fff; border-color: var(--c-teal); color: var(--c-teal); transform: translateY(-1px); box-shadow: var(--sh-sm); }
.about-cta--primary { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.about-cta--primary:hover { background: var(--c-navy-2); border-color: var(--c-navy-2); color: #fff; }

/* RTL 보정 (아랍어) */
.lang-ar .about-mp__step,
.lang-ar .about-park__num { direction: ltr; }

/* ── 모바일 최적화 ── */
@media (max-width: 880px) {
  /* Mission cards — SVG smaller, text more compact */
  .about-mp__svg-wrap { min-height: 220px; }
  .about-mp__lead { font-size: .95rem; line-height: 1.75; }
  .about-mp__h { font-size: clamp(1.05rem, 4vw, 1.3rem); }
  .about-mp__list li { font-size: .9rem; line-height: 1.65; padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 16px); }
  .about-mp__list li::before { left: var(--sp-3); top: calc(var(--sp-3) + 7px); width: 7px; height: 7px; }
  .lang-ar .about-mp__list li { padding: var(--sp-3) calc(var(--sp-3) + 16px) var(--sp-3) var(--sp-3); }
  .lang-ar .about-mp__list li::before { left: auto; right: var(--sp-3); }
}
@media (max-width: 600px) {
  /* Hero — tighter */
  .subpage-hero { min-height: clamp(180px, 38vw, 240px); }
  .subpage-title { font-size: clamp(1.4rem, 5.5vw, 1.85rem); }
  .subpage-lead  { font-size: .9rem; }

  /* Mission */
  .about-mp { padding: var(--sp-5) var(--sp-4); margin-bottom: var(--sp-5); }
  .about-mp::before { font-size: 1.7rem; }
  .about-mp__svg-wrap { min-height: 200px; max-width: 280px; }
  .about-mp__lead { font-size: .92rem; line-height: 1.7; }
  .about-mp__list li { font-size: .88rem; }
  .about-mp__list li strong { font-size: .98em; }

  /* Stats */
  .about-stat__num { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .about-stat__label { font-size: .78rem; }

  /* Goals */
  .about-goal { padding: var(--sp-6) var(--sp-5); }
  .about-goal__icon { max-width: 140px; }
  .about-goal__t { font-size: 1.05rem; }
  .about-goal__d { font-size: .92rem; line-height: 1.75; }

  /* Parks */
  .about-park { padding: var(--sp-4); gap: var(--sp-3); }
  .about-park__name { font-size: .92rem; }
  .about-park__num { font-size: .98rem; }
  .about-park__code { font-size: .68rem; padding: 3px 7px; }
  .about-park__badge { font-size: .65rem; padding: 3px 8px; }

  /* Slogan */
  .about-slogan__card { padding: var(--sp-8) var(--sp-5); }
  .about-slogan__main { font-size: clamp(1.4rem, 6vw, 1.85rem); }
  .about-slogan__sub { font-size: .92rem; }

  /* Legal */
  .about-legal__dl > div { grid-template-columns: 1fr; gap: 4px; padding: var(--sp-3) 0; }
  .about-legal__dl dt { font-size: .82rem; }
  .about-legal__dl dd { font-size: .9rem; }

  /* CTA */
  .about-ctas { gap: var(--sp-2); }
  .about-cta { padding: 10px 16px; font-size: .88rem; }
}
@media (max-width: 400px) {
  /* 작은 폰 (iPhone SE 375px 등) */
  .about-mp__svg-wrap { min-height: 180px; max-width: 240px; }
  .subpage-title { font-size: 1.25rem; line-height: 1.3; }
  .about-mp__h, .about-goal__t { font-size: 1rem; }
}


/* =============================================================================
 * LOCATION — 오시는 길 (지도 · 교통 · 공항 · 택시카드)
 * ============================================================================= */
.loc-main { padding-top: clamp(48px, 5vw, 80px) !important; padding-bottom: clamp(40px, 4vw, 64px) !important; }
.loc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 3vw, 48px); align-items: start; }
@media (max-width: 980px) { .loc-grid { grid-template-columns: 1fr; } }

/* 지도 영역 */
.loc-map__head { margin-bottom: var(--sp-4); }
.loc-map__eyebrow { display: inline-block; padding: 4px 12px; background: var(--c-navy); color: var(--c-gold); font-size: .76rem; font-weight: 800; letter-spacing: .14em; border-radius: 999px; margin-bottom: var(--sp-3); text-transform: uppercase; }
.loc-map__title { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 800; color: var(--c-navy); letter-spacing: -.01em; line-height: 1.3; }
.loc-map__title em { font-style: normal; color: var(--c-teal); position: relative; padding: 0 .12em; }
.loc-map__title em::before { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: .35em; background: rgba(200,151,56,.22); z-index: -1; border-radius: 2px; }
.loc-map__frame { position: relative; width: 100%; aspect-ratio: 16 / 11; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-border); box-shadow: var(--sh-md); background: var(--c-bg-alt); }
.loc-map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 880px) { .loc-map__frame { aspect-ratio: 4 / 3; } }
@media (max-width: 480px) { .loc-map__frame { aspect-ratio: 1 / 1; } }
.loc-map__open { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-4); padding: 10px 18px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-full); color: var(--c-navy); font-size: .9rem; font-weight: 600; text-decoration: none; transition: all .2s var(--ease); }
.loc-map__open:hover { background: var(--c-navy); color: #fff; border-color: var(--c-navy); transform: translateY(-1px); }

/* 우측 주소 카드 */
.loc-card { position: sticky; top: 100px; padding: clamp(24px, 2.6vw, 32px); background: linear-gradient(180deg, #fff 0%, var(--c-bg-alt) 100%); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--sh-sm); }
@media (max-width: 980px) { .loc-card { position: static; } }
.loc-card__title { margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--c-navy); font-size: 1.15rem; font-weight: 800; color: var(--c-navy); letter-spacing: .04em; }
.loc-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.loc-card__list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.loc-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--c-teal-light); color: var(--c-teal); flex-shrink: 0; margin-top: 2px; }
.loc-card__content { min-width: 0; }
.loc-card__lbl { display: block; color: var(--c-text-3); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.loc-card__val { margin: 0; color: var(--c-text); font-size: .92rem; line-height: 1.6; word-break: keep-all; }
.loc-card__val a { color: var(--c-teal); text-decoration: none; }
.loc-card__val a:hover { text-decoration: underline; }
.loc-card__sub { color: var(--c-text-2); font-size: .85rem; }

/* TRANSIT 섹션 (다크) */
.loc-transit { background: linear-gradient(180deg, #0a2540 0%, #133359 100%); color: #fff; padding: clamp(56px, 6vw, 96px) 0; position: relative; overflow: hidden; }
.loc-transit::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; opacity: .55; pointer-events: none; }
.loc-transit > .subpage-shell { position: relative; padding-top: 0 !important; padding-bottom: 0 !important; }
.loc-transit__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(20px, 2.5vw, 32px); }
@media (max-width: 880px) { .loc-transit__grid { grid-template-columns: 1fr; } }
.loc-transit-card { padding: clamp(24px, 2.8vw, 36px); background: rgba(255,255,255,.05); border: 1px solid rgba(200,151,56,.22); border-radius: var(--r-lg); transition: all .25s var(--ease); }
.loc-transit-card:hover { background: rgba(255,255,255,.09); border-color: rgba(200,151,56,.55); transform: translateY(-3px); }
.loc-transit-card__head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.loc-transit-card__icon { display: inline-flex; flex-shrink: 0; padding: 10px; background: rgba(255,255,255,.06); border-radius: var(--r-md); }
.loc-transit-card h3 { margin: 0; color: var(--c-gold); font-size: 1.15rem; font-weight: 800; letter-spacing: .04em; }
.loc-transit-card p { margin: 0; color: rgba(255,255,255,.92); font-size: .94rem; line-height: 1.85; }
.loc-transit-card p strong { color: #ffd76a; font-weight: 700; }

/* AIRPORT 섹션 */
.loc-airport { padding-top: clamp(48px, 5vw, 80px) !important; padding-bottom: clamp(40px, 4vw, 64px) !important; }
.loc-airport__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 32px); }
@media (max-width: 880px) { .loc-airport__grid { grid-template-columns: 1fr; } }
.loc-airport-card { display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-5); padding: clamp(24px, 2.8vw, 36px); background: linear-gradient(180deg, #fff 0%, var(--c-bg-alt) 100%); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: all .3s var(--ease); }
.loc-airport-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--c-border-2); }
.loc-airport-card__icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.loc-airport-card__code { display: inline-block; padding: 3px 10px; background: var(--c-navy); color: var(--c-gold); font-family: var(--font-mono); font-size: .78rem; font-weight: 800; letter-spacing: .12em; border-radius: 999px; margin-bottom: 6px; }
.loc-airport-card h3 { margin: 0 0 var(--sp-3); font-size: 1.1rem; font-weight: 800; color: var(--c-navy); }
.loc-airport-card p { margin: 0; color: var(--c-text); font-size: .92rem; line-height: 1.7; }
.loc-airport-card p strong { color: var(--c-navy); font-weight: 700; background: linear-gradient(180deg, transparent 65%, rgba(200,151,56,.24) 65%); padding: 0 2px; }

/* TAXI CARD */
.loc-taxi-section { padding-top: clamp(40px, 4vw, 64px) !important; padding-bottom: clamp(40px, 4vw, 64px) !important; }
.loc-taxi { max-width: 580px; margin: 0 auto; text-align: center; }
.loc-taxi__head { margin-bottom: var(--sp-5); }
.loc-taxi__eyebrow { display: inline-block; padding: 4px 12px; background: linear-gradient(135deg, #c89738, #f0b85b); color: #1a2332; font-size: .72rem; font-weight: 800; letter-spacing: .14em; border-radius: 999px; margin-bottom: var(--sp-3); text-transform: uppercase; }
.loc-taxi__instruction { margin: 0; color: var(--c-text-2); font-size: 1rem; font-weight: 600; }
.loc-taxi__card { border: 3px dashed var(--c-gold); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px); background: linear-gradient(135deg, #fff 0%, #faf3e0 100%); box-shadow: 0 12px 32px rgba(200,151,56,.18); position: relative; }
.loc-taxi__card::before { content: '✂'; position: absolute; top: -14px; left: 24px; padding: 0 8px; background: var(--c-bg); color: var(--c-gold); font-size: 1.2rem; }
.loc-taxi__lang { margin: 0 0 var(--sp-3); color: var(--c-text-3); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.loc-taxi__korean { margin: 0 0 var(--sp-3); font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 800; color: var(--c-navy); line-height: 1.5; letter-spacing: -.01em; }
.loc-taxi__zip { margin: 0 0 var(--sp-3); color: var(--c-navy); font-size: 1rem; font-weight: 600; font-family: var(--font-mono); }
.loc-taxi__romanized { margin: 0; padding-top: var(--sp-3); border-top: 1px dashed rgba(200,151,56,.4); color: var(--c-text-2); font-size: .82rem; font-family: var(--font-mono); }

/* APPOINTMENT NOTICE */
.loc-appt { padding-top: clamp(28px, 3vw, 48px) !important; padding-bottom: clamp(40px, 4vw, 64px) !important; }
.loc-appt__card { display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-6); align-items: center; padding: clamp(24px, 3vw, 40px); background: linear-gradient(135deg, #0a2540 0%, #133359 100%); border-radius: var(--r-xl); color: #fff; box-shadow: var(--sh-lg); position: relative; overflow: hidden; }
.loc-appt__card::before { content: ''; position: absolute; top: -40%; right: -10%; width: 50%; height: 200%; background: radial-gradient(circle at 50% 50%, rgba(200,151,56,.18), transparent 70%); pointer-events: none; }
@media (max-width: 600px) { .loc-appt__card { grid-template-columns: 1fr; text-align: center; } .loc-appt__icon { margin: 0 auto; } }
.loc-appt__icon { display: flex; align-items: center; justify-content: center; }
.loc-appt__eyebrow { display: inline-block; padding: 4px 12px; background: linear-gradient(135deg, #c89738, #f0b85b); color: #1a2332; font-size: .72rem; font-weight: 800; letter-spacing: .14em; border-radius: 999px; margin-bottom: var(--sp-3); text-transform: uppercase; }
.loc-appt__title { margin: 0 0 var(--sp-3); font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 800; color: #fff; line-height: 1.3; }
.loc-appt__title em { font-style: normal; color: #ffd76a; }
.loc-appt__lead { margin: 0 0 var(--sp-4); color: rgba(255,255,255,.9); font-size: .95rem; line-height: 1.7; }
.loc-appt__lead strong { color: #ffd76a; font-weight: 700; }
.loc-appt__btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); position: relative; }
.loc-appt__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--c-gold); color: #1a2332; font-weight: 700; border-radius: var(--r-full); text-decoration: none; transition: all .2s var(--ease); }
.loc-appt__btn:hover { background: #f0b85b; transform: translateY(-1px); color: #1a2332; }
.loc-appt__btn + .loc-appt__btn { background: rgba(255,255,255,.95); color: var(--c-navy); }
.loc-appt__btn + .loc-appt__btn:hover { background: #fff; color: var(--c-navy); }

/* GPS + MULTI-MAP */
.loc-multi { padding-top: clamp(28px, 3vw, 48px) !important; padding-bottom: clamp(28px, 3vw, 48px) !important; }
.loc-multi__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); margin-bottom: var(--sp-6); }
@media (max-width: 600px) { .loc-multi__row { grid-template-columns: 1fr; } }
.loc-multi__cell { padding: var(--sp-4); background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.loc-multi__label { display: block; color: var(--c-text-3); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.loc-multi__value { display: block; font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--c-navy); background: transparent; padding: 0; }
.loc-multi__maps-label { display: block; color: var(--c-text-2); font-size: .88rem; font-weight: 600; margin-bottom: var(--sp-3); }
.loc-multi__maps-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.loc-map-btn { display: inline-flex; align-items: center; padding: 8px 14px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-full); color: var(--c-navy); font-size: .82rem; font-weight: 600; text-decoration: none; transition: all .2s var(--ease); }
.loc-map-btn:hover { background: var(--c-navy); color: #fff; border-color: var(--c-navy); transform: translateY(-1px); }
.loc-map-btn--google { border-color: #4285f4; color: #4285f4; }
.loc-map-btn--google:hover { background: #4285f4; border-color: #4285f4; color: #fff; }
.loc-map-btn--naver { border-color: #03c75a; color: #03c75a; }
.loc-map-btn--naver:hover { background: #03c75a; border-color: #03c75a; color: #fff; }
.loc-map-btn--kakao { border-color: #fee500; color: #3c1e1e; background: #fee500; }
.loc-map-btn--kakao:hover { background: #fadb00; border-color: #fadb00; color: #3c1e1e; }
.loc-map-btn--apple { border-color: #000; color: #000; }
.loc-map-btn--apple:hover { background: #000; border-color: #000; color: #fff; }
.loc-map-btn--osm { border-color: #7ebc6f; color: #5a8a4c; }
.loc-map-btn--osm:hover { background: #7ebc6f; border-color: #7ebc6f; color: #fff; }

/* 모바일 미세 조정 */
@media (max-width: 600px) {
  .loc-map__title { font-size: 1.3rem; }
  .loc-airport-card { grid-template-columns: 60px 1fr; padding: var(--sp-5); }
  .loc-taxi__korean { font-size: 1.1rem; }
}


/* =============================================================================
 * HISTORY — 연혁 (2009 ~ 2026 타임라인, 지그재그)
 * ============================================================================= */
.hi-timeline { position: relative; padding-top: clamp(56px, 6vw, 96px) !important; padding-bottom: clamp(56px, 6vw, 96px) !important; }
/* 중앙 spine (세로 라인) */
.hi-spine { position: absolute; left: 50%; top: clamp(20px, 3vw, 40px); bottom: 20px; width: 2px; background: linear-gradient(180deg, transparent 0%, rgba(200,151,56,.35) 8%, rgba(14,124,134,.35) 50%, rgba(200,151,56,.35) 92%, transparent 100%); transform: translateX(-1px); pointer-events: none; }
@media (max-width: 880px) { .hi-spine { left: 28px; } }

/* 시대 (era) 그룹 */
.hi-era { position: relative; margin-bottom: clamp(40px, 5vw, 80px); }
.hi-era:last-child { margin-bottom: 0; }
.hi-era__header { position: relative; text-align: center; margin: 0 0 clamp(24px, 3vw, 48px); padding: clamp(20px, 2.5vw, 32px) clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: linear-gradient(135deg, var(--c-bg-alt) 0%, #fff 50%, var(--c-bg-alt) 100%); border: 1px solid var(--c-border); box-shadow: var(--sh-sm); display: inline-block; left: 50%; transform: translateX(-50%); max-width: 480px; width: calc(100% - 32px); }
@media (max-width: 880px) { .hi-era__header { left: 0; transform: none; max-width: none; padding-left: 64px; text-align: left; } }
.hi-era__years { display: inline-block; padding: 4px 12px; background: var(--c-navy); color: var(--c-gold); font-family: var(--font-mono); font-size: .82rem; font-weight: 700; letter-spacing: .06em; border-radius: 999px; margin-bottom: var(--sp-3); }
.hi-era__title { margin: 0 0 6px; font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 800; color: var(--c-navy); letter-spacing: -.01em; }
.hi-era__sub { margin: 0; color: var(--c-text-2); font-size: clamp(.92rem, 1vw, 1rem); }

/* 시대별 톤 (좌측 액센트 컬러) */
.hi-era--genesis .hi-era__years { background: #1a3a5e; color: #9ad3da; }
.hi-era--launch  .hi-era__years { background: var(--c-teal); color: #fff; }
.hi-era--growth  .hi-era__years { background: #0f8a96; color: #fff; }
.hi-era--leap    .hi-era__years { background: linear-gradient(135deg, #c89738, #f0b85b); color: #1a2332; }

/* 타임라인 리스트 (중앙 spine 양쪽 지그재그) */
.hi-list { list-style: none; margin: 0; padding: 0; position: relative; }
.hi-item { position: relative; min-height: 70px; margin-bottom: var(--sp-5); display: grid; grid-template-columns: 1fr 50% 1fr; align-items: center; gap: 0; }
.hi-item:last-child { margin-bottom: 0; }
@media (max-width: 880px) { .hi-item { grid-template-columns: 56px 1fr; } }

/* 도트 — 중앙 spine 위 */
.hi-item__dot { position: absolute; left: 50%; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-bg-alt); border: 3px solid var(--c-teal); transform: translateX(-50%); z-index: 2; transition: all .3s var(--ease); box-shadow: 0 0 0 4px rgba(255,255,255,.85); }
@media (max-width: 880px) { .hi-item__dot { left: 28px; } }
.hi-item--star .hi-item__dot { background: var(--c-gold); border-color: #c89738; width: 18px; height: 18px; box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 0 0 8px rgba(200,151,56,.18); }
.hi-item--star .hi-item__dot::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(200,151,56,.4); animation: hiPulse 2.4s var(--ease) infinite; }
@keyframes hiPulse {
  0% { transform: scale(.8); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* 카드 — 좌/우 지그재그 */
.hi-item__card { position: relative; padding: var(--sp-5) var(--sp-6); background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-sm); transition: all .25s var(--ease); }
.hi-item__card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--c-border-2); }
.hi-item--left .hi-item__card { grid-column: 1; margin-right: clamp(20px, 3vw, 36px); }
.hi-item--right .hi-item__card { grid-column: 3; margin-left: clamp(20px, 3vw, 36px); }
@media (max-width: 880px) {
  .hi-item--left .hi-item__card,
  .hi-item--right .hi-item__card { grid-column: 2; margin: 0; }
}

/* 화살표(꼬리) — 카드에서 spine 방향 */
.hi-item__card::before { content: ''; position: absolute; top: 22px; width: 12px; height: 12px; background: #fff; border-top: 1px solid var(--c-border); border-right: 1px solid var(--c-border); transform: rotate(45deg); }
.hi-item--left .hi-item__card::before { right: -7px; transform: rotate(45deg); }
.hi-item--right .hi-item__card::before { left: -7px; border-top: 1px solid var(--c-border); border-left: 1px solid var(--c-border); border-right: none; transform: rotate(-135deg); border-bottom: none; }
@media (max-width: 880px) {
  .hi-item__card::before { left: -7px; right: auto; border-top: 1px solid var(--c-border); border-left: 1px solid var(--c-border); border-right: none; border-bottom: none; transform: rotate(-135deg); }
}

/* 카드 콘텐츠 */
.hi-item__date { display: block; font-family: var(--font-mono); font-size: .85rem; font-weight: 700; color: var(--c-teal); letter-spacing: .04em; margin-bottom: 6px; }
.hi-item__title { margin: 0; font-size: clamp(.95rem, 1.05vw, 1.05rem); font-weight: 600; color: var(--c-navy); line-height: 1.5; }
.hi-item__title strong { font-weight: 800; color: var(--c-navy); background: linear-gradient(180deg, transparent 65%, rgba(200,151,56,.28) 65%); padding: 0 2px; }

/* 별 마일스톤 카드 — 골드 강조 */
.hi-item--star .hi-item__card { background: linear-gradient(180deg, #fff 0%, #faf3e0 100%); border-color: rgba(200,151,56,.55); box-shadow: 0 8px 22px rgba(200,151,56,.18); }
.hi-item--star .hi-item__card::before { background: #faf3e0; border-color: rgba(200,151,56,.55); }
.hi-item--star .hi-item__date { color: #8a6313; }
.hi-item__badge { display: inline-block; padding: 3px 10px; background: linear-gradient(135deg, #c89738, #f0b85b); color: #1a2332; font-size: .68rem; font-weight: 800; letter-spacing: .12em; border-radius: 999px; margin-bottom: 6px; text-transform: uppercase; }

/* 모바일 미세 조정 */
@media (max-width: 600px) {
  .hi-item__card { padding: var(--sp-4) var(--sp-5); }
  .hi-item__date { font-size: .78rem; }
  .hi-item__title { font-size: .92rem; line-height: 1.5; }
  .hi-era__title { font-size: 1.25rem; }
  .hi-era__sub { font-size: .88rem; }
  .hi-era__years { font-size: .76rem; }
}

/* RTL — 아랍어 미러링 */
.lang-ar .hi-spine { left: 50%; }
.lang-ar .hi-item--left .hi-item__card { grid-column: 3; margin-right: 0; margin-left: clamp(20px, 3vw, 36px); }
.lang-ar .hi-item--right .hi-item__card { grid-column: 1; margin-left: 0; margin-right: clamp(20px, 3vw, 36px); }
@media (max-width: 880px) {
  .lang-ar .hi-spine { left: auto; right: 28px; }
  .lang-ar .hi-item__dot { left: auto; right: 28px; transform: translateX(50%); }
  .lang-ar .hi-item { grid-template-columns: 1fr 56px; }
  .lang-ar .hi-item--left .hi-item__card,
  .lang-ar .hi-item--right .hi-item__card { grid-column: 1; margin: 0; }
  .lang-ar .hi-item__card::before { left: auto; right: -7px; transform: rotate(45deg); border-top: 1px solid var(--c-border); border-right: 1px solid var(--c-border); border-left: none; border-bottom: none; }
  .lang-ar .hi-era__header { padding-left: 24px; padding-right: 64px; text-align: right; }
}


/* =============================================================================
 * ORGANIZATION — 임원 9인 + 실무협의회 9인
 * ============================================================================= */
.org-board { padding-top: clamp(56px, 6vw, 96px) !important; padding-bottom: clamp(56px, 6vw, 96px) !important; }

.org-row { display: grid; gap: clamp(20px, 2.4vw, 32px); margin-bottom: clamp(28px, 3vw, 48px); }
.org-row:last-child { margin-bottom: 0; }
.org-row--chair { grid-template-columns: minmax(280px, 360px); justify-content: center; }
.org-row--3 { grid-template-columns: repeat(3, 1fr); max-width: 880px; margin-left: auto; margin-right: auto; }
.org-row--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .org-row--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px)  { .org-row--3 { grid-template-columns: 1fr 1fr; } .org-row--5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .org-row--3, .org-row--5 { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } }

/* 카드 */
.org-card { position: relative; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: all .3s var(--ease); }
.org-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--c-border-2); }
.org-card__photo { position: relative; aspect-ratio: 5 / 6; background: #f7f9fc; overflow: hidden; }
.org-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.org-card:hover .org-card__photo img { transform: scale(1.04); }
.org-card__role-pill { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; padding: 5px 12px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.15); text-transform: uppercase; }
.org-card__role-pill--chair { background: linear-gradient(135deg, #c89738, #f0b85b); color: #1a2332; }
.org-card__role-pill--vice  { background: linear-gradient(135deg, #0e7c86, #15a3b0); color: #fff; }
.org-card__role-pill--audit { background: linear-gradient(135deg, #b91c1c, #d63b3b); color: #fff; }
.org-card__role-pill--dir   { background: rgba(10,37,64,.92); color: #fff; }
.org-card__role-pill--advisor { background: linear-gradient(135deg, #6b46c1, #9333ea); color: #fff; }
.org-card--advisor-inline { /* 이사와 동일한 일반 카드 크기 */ }
/* ROW 4: 고문 — 이사 행과 같은 폭의 그리드를 유지하되, 1개 카드만 좌측 정렬 (이사 김재각의 다음 칸 위치 ≈ 첫 칸) */
.org-row--advisor { margin-top: clamp(20px, 2.4vw, 32px); }
.org-row--advisor .org-card { grid-column: 1; }
@media (max-width: 1100px) { .org-row--advisor .org-card { grid-column: 1; } }
@media (max-width: 880px)  { .org-row--advisor .org-card { grid-column: 1; } }
.org-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); text-align: center; }
.org-card__name { margin: 0 0 4px; font-size: clamp(1rem, 1.2vw, 1.18rem); font-weight: 800; color: var(--c-navy); letter-spacing: -.01em; line-height: 1.3; }
.org-card__company { margin: 0 0 2px; color: var(--c-text); font-size: .9rem; font-weight: 600; }
.org-card__park { margin: 0; color: var(--c-text-3); font-size: .8rem; line-height: 1.4; }

/* 회장 카드 — 더 크고 강조 */
.org-card--chair { border: 2px solid var(--c-gold); box-shadow: 0 12px 32px rgba(200,151,56,.18); }
.org-card--chair .org-card__name { font-size: clamp(1.2rem, 1.5vw, 1.5rem); }
.org-card--chair .org-card__company { font-size: 1rem; }
.org-card--chair::before { content: ''; position: absolute; inset: -2px; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(200,151,56,.22), transparent 40%, rgba(14,124,134,.18)); pointer-events: none; z-index: -1; }

/* OPS 섹션 (다크) */
.org-ops { background: linear-gradient(180deg, #0a2540 0%, #133359 100%); color: #fff; padding: clamp(56px, 6vw, 96px) 0; position: relative; overflow: hidden; }
.org-ops::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; opacity: .55; pointer-events: none; }
.org-ops > .subpage-shell { position: relative; padding-top: 0 !important; padding-bottom: 0 !important; }
.org-ops__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 980px) { .org-ops__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .org-ops__grid { grid-template-columns: 1fr; } }
.org-op { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-5); background: rgba(255,255,255,.05); border: 1px solid rgba(200,151,56,.22); border-radius: var(--r-md); transition: all .25s var(--ease); }
.org-op:hover { background: rgba(255,255,255,.09); border-color: rgba(200,151,56,.55); transform: translateY(-2px); }
.org-op__park { color: var(--c-gold); font-size: .78rem; font-weight: 700; letter-spacing: .04em; line-height: 1.3; }
.org-op__name { color: #fff; font-size: clamp(1.05rem, 1.2vw, 1.2rem); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.org-op__role { color: rgba(200,215,235,.85); font-size: .85rem; font-weight: 500; line-height: 1.4; }

/* 모바일 */
@media (max-width: 600px) {
  .org-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .org-card__name { font-size: 1rem; }
  .org-card__company { font-size: .85rem; }
  .org-card__park { font-size: .76rem; }
  .org-card__role-pill { left: 8px; top: 8px; padding: 3px 8px; font-size: .65rem; }
  .org-op { padding: var(--sp-4); }
  .org-op__name { font-size: 1rem; }
  .org-op__role { font-size: .8rem; }
}


/* =============================================================================
 * GREETING — 회장 인사말 전용 디자인
 * ============================================================================= */
.greeting-grid { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: clamp(36px, 4vw, 64px); align-items: start; }
@media (max-width: 880px) { .greeting-grid { grid-template-columns: 1fr; } }

/* 좌측 사진 + 인적 카드 */
.greeting-portrait { position: sticky; top: 100px; align-self: start; }
@media (max-width: 880px) { .greeting-portrait { position: static; } }

.portrait-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--c-border); background: #f1f4f8; aspect-ratio: 4 / 5; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform .5s var(--ease); filter: contrast(1.04) saturate(1.05); }
.portrait-frame:hover img { transform: scale(1.06); }
.portrait-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(10,37,64,.18); }
.portrait-frame__ribbon { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: linear-gradient(135deg, #f0b85b, #c89738); color: #1a2332; font-weight: 700; font-size: .8rem; border-radius: var(--r-full); box-shadow: 0 4px 10px rgba(0,0,0,.18); }

.portrait-card { margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-6); background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.portrait-card__role { display: inline-block; color: var(--c-teal); font-weight: 700; font-size: .72rem; letter-spacing: .14em; }
.portrait-card h3 { margin: 8px 0 4px; font-size: 1.55rem; font-weight: 800; color: var(--c-navy); letter-spacing: -.01em; }
.portrait-card__sub { margin: 0 0 var(--sp-4); color: var(--c-text-2); font-size: .92rem; }
.portrait-card__bio { margin: 0; padding: var(--sp-3) 0 0; list-style: none; border-top: 1px dashed var(--c-border-2); }
.portrait-card__bio li { position: relative; padding: 6px 0 6px 20px; color: var(--c-text-2); font-size: .9rem; line-height: 1.55; }
.portrait-card__bio li::before { content: ''; position: absolute; left: 4px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-teal); }

/* 우측 본문 */
.greeting-body { font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.85; color: var(--c-text); }
.greeting-body p { margin: 0 0 var(--sp-5); }
.greeting-body strong { color: var(--c-navy); font-weight: 700; }
.greeting-body code { background: var(--c-bg-alt); border: 1px solid var(--c-border); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: .92em; color: var(--c-teal-2); }

/* 강조 인용구 */
.greeting-pullquote { position: relative; margin: 0 0 var(--sp-8); padding: var(--sp-6) var(--sp-8) var(--sp-6) calc(var(--sp-8) + 56px); font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 700; line-height: 1.5; color: var(--c-navy); background: linear-gradient(135deg, var(--c-gold-light) 0%, #fff 75%); border-left: 4px solid var(--c-gold); border-radius: 0 var(--r-lg) var(--r-lg) 0; quotes: none; }
.greeting-pullquote::before, .greeting-pullquote::after { content: none; }
.greeting-pullquote__qmark { position: absolute; left: var(--sp-6); top: var(--sp-5); width: 44px; height: 44px; }

/* AI 글로벌 비즈니스 콜아웃 박스 */
.greeting-callout { position: relative; margin: var(--sp-10) 0; padding: var(--sp-10) clamp(var(--sp-6), 4vw, var(--sp-12)); border-radius: var(--r-xl); background: linear-gradient(180deg, #0a2540 0%, #133359 60%, #1a3a5e 100%); color: #e6eef8; overflow: hidden; box-shadow: var(--sh-xl); }
.greeting-callout::before { content: ''; position: absolute; top: 0; right: -10%; width: 60%; height: 100%; background: radial-gradient(circle at 70% 30%, rgba(200,151,56,.18), transparent 60%); pointer-events: none; }
.greeting-callout__head { display: flex; gap: var(--sp-5); align-items: flex-start; margin-bottom: var(--sp-6); }
.greeting-callout__icon { flex-shrink: 0; width: 64px; height: 64px; }
.greeting-callout__eyebrow { display: inline-block; color: var(--c-gold); font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.greeting-callout__head h2 { margin: 0; color: #fff; font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.35; font-weight: 800; letter-spacing: -.01em; }
.greeting-callout p { color: #d6e1ee; margin: 0 0 var(--sp-5); }
.greeting-callout strong { color: #ffd76a; font-weight: 700; }
.greeting-callout__lead { font-size: clamp(1rem, 1.1vw, 1.1rem); }
.greeting-callout__close { margin-top: var(--sp-6) !important; padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.1); color: #f0f5fb !important; font-size: 1.02em; }

.greeting-pillars { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
@media (max-width: 700px) { .greeting-pillars { grid-template-columns: 1fr; } }
.greeting-pillars li { position: relative; display: flex; gap: var(--sp-4); padding: var(--sp-5); background: rgba(255,255,255,.04); border: 1px solid rgba(200,151,56,.18); border-radius: var(--r-md); transition: all .25s var(--ease); }
.greeting-pillars li:hover { background: rgba(255,255,255,.08); border-color: rgba(200,151,56,.4); transform: translateY(-2px); }
.greeting-pillars .num { flex-shrink: 0; font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; color: var(--c-gold); letter-spacing: .04em; }
.greeting-pillars h4 { margin: 0 0 6px; color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.greeting-pillars p { margin: 0; color: #c8d3e1; font-size: .92rem; line-height: 1.6; }

/* 결언/감사 */
.greeting-thanks { font-size: 1.15rem; font-weight: 700; color: var(--c-navy); margin-bottom: var(--sp-8) !important; }

/* 서명 블록 */
.greeting-sign { margin: var(--sp-10) 0 var(--sp-8); padding: var(--sp-6) 0 0; border-top: 2px solid var(--c-navy); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right; }
.greeting-sign__org { color: var(--c-text-2); font-size: .92rem; }
.greeting-sign__name { font-size: clamp(1.4rem, 1.8vw, 1.7rem); font-weight: 800; color: var(--c-navy); letter-spacing: .15em; display: inline-flex; align-items: center; gap: var(--sp-3); }
.greeting-sign__name .seal { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #b91c1c; color: #fff; border-radius: 4px; font-size: .9rem; font-weight: 700; transform: rotate(-3deg); box-shadow: 0 2px 4px rgba(0,0,0,.18); letter-spacing: 0; }

/* CTA 버튼 그룹 */
.greeting-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-6) 0 0; border-top: 1px dashed var(--c-border-2); }
.greeting-cta__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-full); color: var(--c-navy); font-size: .92rem; font-weight: 600; text-decoration: none; transition: all .2s var(--ease); }
.greeting-cta__btn:hover { background: var(--c-bg); border-color: var(--c-teal); color: var(--c-teal); transform: translateY(-1px); box-shadow: var(--sh-sm); }
.greeting-cta__btn--primary { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.greeting-cta__btn--primary:hover { background: var(--c-navy-2); border-color: var(--c-navy-2); color: #fff; }


/* =============================================================================
 * MEMBERSHIP — 회원사 가입문의 폼
 * ============================================================================= */
/* MEMBERSHIP — 가입 혜택 4종 (가입문의서 위 섹션) */
.mship-benefits { padding-top: clamp(48px, 5vw, 80px) !important; padding-bottom: clamp(40px, 4vw, 64px) !important; }
.mship-benefits__head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 3vw, 48px); }
.mship-benefits__eyebrow { display: inline-block; padding: 5px 14px; background: var(--c-navy); color: var(--c-gold); font-size: .76rem; font-weight: 800; letter-spacing: .15em; border-radius: 999px; margin-bottom: var(--sp-3); text-transform: uppercase; }
.mship-benefits__h2 { margin: 0 0 var(--sp-4); font-size: clamp(1.4rem, 2.6vw, 2.05rem); font-weight: 800; color: var(--c-navy); line-height: 1.3; letter-spacing: -.01em; }
.mship-benefits__h2 em { font-style: normal; color: var(--c-teal); position: relative; padding: 0 .12em; }
.mship-benefits__h2 em::before { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: .35em; background: rgba(200,151,56,.22); z-index: -1; border-radius: 2px; }
.mship-benefits__lead { margin: 0; color: var(--c-text-2); font-size: clamp(.95rem, 1.05vw, 1.05rem); line-height: 1.75; }
.mship-benefits__lead strong { color: var(--c-navy); font-weight: 700; }

.mship-benefits__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); }
@media (max-width: 880px) { .mship-benefits__grid { grid-template-columns: 1fr; } }

.mship-benefit { position: relative; display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: clamp(20px, 2.5vw, 32px); align-items: center; padding: clamp(24px, 2.8vw, 36px); background: linear-gradient(180deg, #fff 0%, var(--c-bg-alt) 100%); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--sh-sm); transition: all .3s var(--ease); overflow: hidden; }
.mship-benefit::before { content: attr(data-benefit); position: absolute; right: 18px; top: 14px; font-family: var(--font-mono); font-size: clamp(2rem, 3vw, 3rem); font-weight: 800; color: rgba(10,37,64,.06); line-height: 1; pointer-events: none; }
.mship-benefit:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--c-border-2); }
@media (max-width: 600px) {
  .mship-benefit { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); }
}

.mship-benefit__svg-wrap { width: 100%; aspect-ratio: 1 / 1; max-width: 200px; margin: 0 auto; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 45%, #f7f9fc 0%, var(--c-bg-alt) 70%, #eef2f7 100%); border: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; padding: 12px; }
.mship-benefit[data-benefit="01"] .mship-benefit__svg-wrap { background: radial-gradient(circle at 50% 45%, #e6f4f5 0%, #f1f9fa 60%, #fff 100%); border-color: #c8e3e6; }
.mship-benefit[data-benefit="02"] .mship-benefit__svg-wrap { background: radial-gradient(circle at 50% 45%, #faf3e0 0%, #fef9ee 60%, #fff 100%); border-color: #f5e6c0; }
.mship-benefit[data-benefit="03"] .mship-benefit__svg-wrap { background: radial-gradient(circle at 50% 45%, #e6eef8 0%, #f4f7fc 60%, #fff 100%); border-color: #d8e3f1; }
.mship-benefit[data-benefit="04"] .mship-benefit__svg-wrap { background: radial-gradient(circle at 50% 45%, #faf3e0 0%, #fef9ee 60%, #fff 100%); border-color: #f5e6c0; }
.mship-benefit__svg { width: 100%; height: 100%; display: block; }

.mship-benefit__body { min-width: 0; }
.mship-benefit__tag { display: inline-block; padding: 4px 12px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-text-2); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.mship-benefit__tag--gold { background: linear-gradient(135deg, #faf3e0, #fff5d6); border-color: #e8c876; color: #8a6313; }
.mship-benefit__h { margin: 0 0 var(--sp-3); font-size: clamp(1.05rem, 1.4vw, 1.28rem); font-weight: 800; color: var(--c-navy); line-height: 1.4; letter-spacing: -.01em; }
.mship-benefit__h em { font-style: normal; color: var(--c-teal); position: relative; padding: 0 .1em; }
.mship-benefit__h em::before { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: .32em; background: rgba(200,151,56,.22); z-index: -1; border-radius: 2px; }
.mship-benefit__lead { margin: 0 0 var(--sp-3); color: var(--c-text); font-size: clamp(.92rem, 1vw, 1rem); line-height: 1.75; }
.mship-benefit__lead strong { color: var(--c-navy); font-weight: 700; background: linear-gradient(180deg, transparent 65%, rgba(200,151,56,.24) 65%); padding: 0 2px; }
.mship-benefit__list { list-style: none; margin: 0; padding: 0; }
.mship-benefit__list li { position: relative; padding: 4px 0 4px 18px; color: var(--c-text-2); font-size: .88rem; line-height: 1.55; }
.mship-benefit__list li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold); box-shadow: 0 0 0 2px rgba(200,151,56,.18); }
.mship-benefit[data-benefit="01"] .mship-benefit__list li::before,
.mship-benefit[data-benefit="03"] .mship-benefit__list li::before { background: var(--c-teal); box-shadow: 0 0 0 2px rgba(14,124,134,.18); }

@media (max-width: 600px) {
  .mship-benefit__svg-wrap { max-width: 160px; }
  .mship-benefit__h { font-size: 1.05rem; }
  .mship-benefit__lead { font-size: .92rem; line-height: 1.7; }
  .mship-benefit__list li { font-size: .85rem; }
}

.mship-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 3vw, 48px); align-items: start; }
@media (max-width: 980px) { .mship-grid { grid-template-columns: 1fr; } }

.mship-form { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--sh-sm); }
.mship-form__title { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; color: var(--c-navy); }
.mship-form__hint { margin: 0 0 var(--sp-6); color: var(--c-text-2); font-size: .92rem; }
.req-mark { color: #b91c1c; font-weight: 700; }

.mship-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-5); }
@media (max-width: 700px) { .mship-fields { grid-template-columns: 1fr; } }
.mship-field--full { grid-column: 1 / -1; }
.mship-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.mship-field__label { font-size: .9rem; font-weight: 600; color: var(--c-navy); }
.mship-field input,
.mship-field textarea,
.mship-field select { font-family: inherit; font-size: 1rem; padding: 11px 14px; border: 1px solid var(--c-border-2); border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text); transition: all .15s var(--ease); width: 100%; }
.mship-field textarea { resize: vertical; min-height: 130px; line-height: 1.65; }
.mship-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-text-2) 50%), linear-gradient(135deg, var(--c-text-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; cursor: pointer; }
.mship-field input:focus,
.mship-field textarea:focus,
.mship-field select:focus { outline: none; border-color: var(--c-teal); box-shadow: 0 0 0 3px rgba(14,124,134,.15); }
.mship-field input:invalid:not(:placeholder-shown) { border-color: #d35454; }
.mship-field__counter { position: absolute; right: 8px; bottom: 8px; font-size: .72rem; color: var(--c-text-3); pointer-events: none; }
.mship-field__help { color: var(--c-text-3); font-size: .82rem; }

/* 산수 캡차 */
.mship-field--captcha { grid-column: 1 / -1; padding: var(--sp-5); background: var(--c-bg-alt); border: 1px dashed var(--c-border-2); border-radius: var(--r-md); }
.captcha-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: 4px; }
.captcha-eq { display: inline-flex; align-items: center; gap: 8px; font-size: 1.4rem; font-weight: 700; color: var(--c-navy); font-family: var(--font-mono); }
.captcha-eq strong { display: inline-block; min-width: 36px; padding: 4px 12px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-sm); text-align: center; }
.captcha-op, .captcha-eq-sign { color: var(--c-teal); font-weight: 800; }
.captcha-input { max-width: 110px; text-align: center; font-size: 1.2rem !important; font-weight: 700; }

/* honeypot 숨김 */
.hp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* 개인정보 동의 */
.mship-privacy { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px dashed var(--c-border-2); }
.mship-privacy__box { background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-md); margin-bottom: var(--sp-3); }
.mship-privacy__box summary { list-style: none; padding: 12px 16px; cursor: pointer; font-size: .95rem; color: var(--c-navy); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mship-privacy__box summary::-webkit-details-marker { display: none; }
.mship-privacy__box summary strong { color: #b91c1c; }
.mship-privacy__chevron { transition: transform .2s var(--ease); color: var(--c-text-3); font-size: .9rem; }
.mship-privacy__box[open] .mship-privacy__chevron { transform: rotate(180deg); }
.mship-privacy__body { padding: 0 16px 16px; font-size: .88rem; color: var(--c-text-2); line-height: 1.7; }
.mship-privacy__body p { margin: 0 0 8px; }
.mship-privacy__body ul { margin: 0 0 10px; padding-left: 20px; }
.mship-privacy__body strong { color: var(--c-navy); }
.mship-privacy__small { font-size: .78rem; color: var(--c-text-3); }
.mship-privacy__small a { color: var(--c-teal); }
.mship-privacy__check { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--r-md); cursor: pointer; }
.mship-privacy__check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--c-teal); flex-shrink: 0; }
.mship-privacy__check span { font-size: .92rem; color: var(--c-text); }
.mship-privacy__check strong { color: var(--c-navy); }

/* 제출 버튼 */
.mship-submit { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.mship-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 1px solid var(--c-border); border-radius: var(--r-full); background: #fff; color: var(--c-navy); font-size: .96rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all .2s var(--ease); }
.mship-btn:hover:not(:disabled) { border-color: var(--c-teal); color: var(--c-teal); transform: translateY(-1px); }
.mship-btn--primary { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.mship-btn--primary:hover:not(:disabled) { background: var(--c-navy-2); border-color: var(--c-navy-2); color: #fff; box-shadow: var(--sh-md); }
.mship-btn:disabled { opacity: .55; cursor: wait; }

/* 결과 박스 */
.mship-result { margin-top: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-md); font-size: .94rem; line-height: 1.65; border-width: 1px; border-style: solid; }
.mship-result--ok { background: #ecfdf5; border-color: #a7f3d0; color: #064e3b; }
.mship-result--err { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }

/* 우측 안내 패널 */
.mship-info { position: sticky; top: 100px; align-self: start; display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 980px) { .mship-info { position: static; } }
.mship-info__card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); }
.mship-info__card h3 { margin: 0 0 var(--sp-4); font-size: 1.05rem; font-weight: 700; color: var(--c-navy); }
.mship-info__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.mship-info__steps li { display: flex; gap: 12px; align-items: flex-start; }
.mship-info__steps .step-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--c-navy); color: #fff; font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.mship-info__steps strong { color: var(--c-navy); font-size: .94rem; }
.mship-info__steps p { margin: 2px 0 0; color: var(--c-text-2); font-size: .82rem; line-height: 1.5; }
.mship-info__card--contact .mship-info__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.mship-info__contact li { display: flex; gap: 10px; font-size: .88rem; color: var(--c-text-2); line-height: 1.55; }
.mship-info__contact a { color: var(--c-teal); }
.mship-info__contact .ico { flex-shrink: 0; width: 22px; }
.mship-info__note { display: flex; gap: 10px; padding: var(--sp-4) var(--sp-5); background: var(--c-teal-light); border: 1px solid #b8dadd; border-radius: var(--r-md); color: var(--c-navy); }
.mship-info__note svg { color: var(--c-teal); flex-shrink: 0; }
.mship-info__note p { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--c-text-2); }
.mship-info__note strong { color: var(--c-navy); }

/* ─ 파일 첨부 (점진 공개) ─ */
.attach-block { margin-top: 4px; }
.attach-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.attach-slot { display: flex; align-items: center; gap: 10px; }
.attach-slot__label { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; padding: 8px 14px; border: 1px dashed var(--c-border-2); border-radius: var(--r-md); background: var(--c-bg); transition: all .15s var(--ease); }
.attach-slot__label:hover { border-color: var(--c-teal); background: #f5fafb; }
.attach-slot.has-file .attach-slot__label { border-style: solid; border-color: var(--c-teal); background: var(--c-teal-light); }
.attach-slot__input { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.attach-slot__btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--c-navy); color: #fff; border-radius: var(--r-sm); font-size: .82rem; font-weight: 600; flex-shrink: 0; }
.attach-slot.has-file .attach-slot__btn { background: var(--c-teal); }
.attach-slot__name { flex: 1; min-width: 0; color: var(--c-text-2); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-slot.has-file .attach-slot__name { color: var(--c-navy); font-weight: 500; }
.attach-slot__remove { flex-shrink: 0; width: 28px; height: 28px; border: 1px solid var(--c-border); background: #fff; color: var(--c-text-2); border-radius: 50%; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; transition: all .15s var(--ease); }
.attach-slot__remove:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }