*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --navy:       #111827;
      --navy-dark:  #0a0f1a;
      --navy-light: #1e293b;
      --gold:       #b8975a;
      --gold-light: #d4b57a;
      --gold-subtle:#f5eede;
      --white:      #ffffff;
      --gray-light: #f8f9fb;
      --gray:       #e5e7eb;
      --text-dark:  #111827;
      --text-mid:   #374151;
      --text-light: #6b7280;
      --radius-sm:  8px;
      --radius-md:  14px;
      --radius-lg:  20px;
      --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
      --shadow-md:  0 4px 14px rgba(0,0,0,.08);
      --shadow-lg:  0 10px 40px rgba(0,0,0,.12);
      --transition: .25s cubic-bezier(.4,0,.2,1);
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo",
                   "Malgun Gothic", sans-serif;
      color: var(--text-dark);
      background: var(--gray-light);
      -webkit-font-smoothing: antialiased;
      line-height: 1.7;
      min-height: 100vh;
    }
    a { text-decoration: none; color: inherit; }

    /* ── HEADER ── */
    .page-header {
      background: var(--navy);
      position: sticky; top: 0; z-index: 100;
      box-shadow: 0 1px 0 rgba(255,255,255,.04);
    }
    .header-in {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .header-logo {
      display: flex; align-items: center; gap: 10px;
      color: #fff; font-size: 15px; font-weight: 700;
    }
    .header-logo .cross {
      color: var(--gold); font-size: 20px;
    }
    .header-back {
      display: flex; align-items: center; gap: 6px;
      color: rgba(255,255,255,.6);
      font-size: 13px; font-weight: 500;
      transition: color var(--transition);
    }
    .header-back:hover { color: var(--gold-light); }

    /* ── HERO ── */
    .hero {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
      padding: 64px 24px 48px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: -60%; left: -20%;
      width: 140%; height: 200%;
      background: radial-gradient(ellipse at center, rgba(184,151,90,.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-icon {
      width: 80px; height: 80px;
      margin: 0 auto 20px;
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      border-radius: 24px;
      display: flex; align-items: center; justify-content: center;
      font-size: 38px;
      box-shadow: 0 8px 32px rgba(184,151,90,.3);
      animation: float 3s ease-in-out infinite;
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .hero-en {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .hero h1 {
      font-size: 32px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
      line-height: 1.3;
      margin-bottom: 12px;
    }
    .hero-sub {
      font-size: 15px;
      color: rgba(255,255,255,.55);
      font-weight: 400;
      max-width: 400px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ── MAIN CONTENT ── */
    .content {
      max-width: 960px;
      margin: 0 auto;
      padding: 40px 20px 60px;
    }

    /* ── PARKING CARDS ── */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 40px;
    }

    .parking-card {
      background: #fff;
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--gray);
      transition: all .35s cubic-bezier(.4,0,.2,1);
      position: relative;
    }
    .parking-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: transparent;
    }

    .card-top {
      padding: 28px 28px 0;
      display: flex;
      align-items: flex-start;
      gap: 20px;
    }

    .card-icon-wrap {
      width: 64px; height: 64px;
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      font-size: 28px;
      flex-shrink: 0;
      transition: transform .35s;
    }
    .parking-card:hover .card-icon-wrap {
      transform: scale(1.08) rotate(-3deg);
    }
    .card-icon-wrap.floor1 {
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      box-shadow: 0 4px 16px rgba(184,151,90,.25);
    }
    .card-icon-wrap.floor3 {
      background: linear-gradient(135deg, #3b82f6, #60a5fa);
      box-shadow: 0 4px 16px rgba(59,130,246,.25);
    }
    .card-icon-wrap.school {
      background: linear-gradient(135deg, #10b981, #34d399);
      box-shadow: 0 4px 16px rgba(16,185,129,.25);
    }

    .card-info { flex: 1; }
    .card-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 20px;
      margin-bottom: 8px;
    }
    .card-badge.floor1 { background: var(--gold-subtle); color: var(--gold); }
    .card-badge.floor3 { background: #eff6ff; color: #3b82f6; }
    .card-badge.school { background: #ecfdf5; color: #10b981; }

    .card-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--text-dark);
      letter-spacing: -0.02em;
      line-height: 1.3;
      margin-bottom: 6px;
    }
    .card-subtitle {
      font-size: 13px;
      color: var(--text-light);
      line-height: 1.6;
    }

    .card-body {
      padding: 20px 28px 28px;
    }

    .card-detail {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 16px;
      background: var(--gray-light);
      border-radius: var(--radius-sm);
      margin-bottom: 10px;
      transition: background .2s;
    }
    .card-detail:last-child { margin-bottom: 0; }
    .card-detail:hover { background: #f0f1f4; }

    .detail-icon {
      font-size: 18px;
      flex-shrink: 0;
      width: 28px;
      text-align: center;
      line-height: 1.4;
    }
    .detail-text {
      font-size: 14px;
      color: var(--text-mid);
      line-height: 1.6;
    }
    .detail-text strong {
      color: var(--text-dark);
      font-weight: 700;
    }

    /* ── SUNDAY SPECIAL BANNER ── */
    .sunday-banner {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
      border-radius: var(--radius-md);
      padding: 32px 28px;
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      gap: 24px;
      position: relative;
      overflow: hidden;
    }
    .sunday-banner::before {
      content: '';
      position: absolute;
      top: -50%; right: -20%;
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(184,151,90,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .sunday-icon {
      width: 72px; height: 72px;
      background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
      border: 1.5px solid rgba(255,255,255,.15);
      border-radius: 20px;
      display: flex; align-items: center; justify-content: center;
      font-size: 32px;
      flex-shrink: 0;
    }
    .sunday-info { position: relative; z-index: 1; }
    .sunday-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .sunday-title {
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }
    .sunday-desc {
      font-size: 13px;
      color: rgba(255,255,255,.55);
      line-height: 1.6;
    }

    /* ── TIP SECTION ── */
    .tips-section {
      background: #fff;
      border-radius: var(--radius-md);
      padding: 28px;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--gray);
      margin-bottom: 40px;
    }
    .tips-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text-dark);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .tip-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--gray);
    }
    .tip-row:last-child { border-bottom: none; }
    .tip-icon {
      font-size: 18px;
      flex-shrink: 0;
      width: 28px;
      text-align: center;
    }
    .tip-text {
      font-size: 14px;
      color: var(--text-mid);
      line-height: 1.6;
    }

    /* ── BACK BUTTON ── */
    .back-section {
      text-align: center;
      padding-bottom: 20px;
    }
    .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 32px;
      background: var(--navy);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      border-radius: 50px;
      transition: all .3s;
      box-shadow: 0 4px 16px rgba(17,24,39,.2);
    }
    .back-btn:hover {
      background: var(--navy-light);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(17,24,39,.3);
    }

    /* ── FOOTER ── */
    .page-footer {
      background: var(--navy-dark);
      text-align: center;
      padding: 24px;
      font-size: 12px;
      color: rgba(255,255,255,.35);
    }

    /* ── RESPONSIVE ── */
    @media (min-width: 640px) {
      .cards-grid {
        grid-template-columns: 1fr 1fr;
      }
      .cards-grid .parking-card:last-child {
        grid-column: 1 / -1;
      }
    }
    @media (min-width: 768px) {
      .hero { padding: 80px 24px 60px; }
      .hero h1 { font-size: 38px; }
      .cards-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .cards-grid .parking-card:last-child {
        grid-column: auto;
      }
      .sunday-banner { padding: 36px 32px; }
    }
    /* ══ 한글 텍스트 줄바꿈 안전망 (모바일 밀림 방지) ══ */
    .hero-sub,
    .card-title, .card-subtitle, .detail-text, .detail-text strong,
    .sunday-title, .sunday-desc, .sunday-label,
    .tips-title, .tip-text,
    .highlight-main, .highlight-sub,
    .card-badge, .card-info {
      word-break: keep-all;
      overflow-wrap: break-word;
      min-width: 0;
    }
    /* flex 자식 텍스트가 부모 폭을 넘지 못하도록 */
    .card-info, .sunday-info, .detail-text, .tip-text {
      flex: 1 1 auto;
      min-width: 0;
    }
    .parking-card, .sunday-banner, .tips-section, .highlight-inner {
      max-width: 100%;
      overflow: hidden;
    }
    .content { overflow-x: hidden; }

    @media (max-width: 639px) {
      .content { padding: 28px 14px 48px; }
      .hero { padding: 48px 18px 36px; }
      .hero h1 { font-size: 26px; }
      .hero-sub { font-size: 14px; padding: 0 4px; }
      .hero-icon { width: 68px; height: 68px; font-size: 32px; border-radius: 20px; }

      .card-top { padding: 20px 18px 0; gap: 14px; }
      .card-body { padding: 14px 18px 20px; }
      .card-icon-wrap { width: 52px; height: 52px; font-size: 22px; border-radius: 14px; }
      .card-title { font-size: 17px; line-height: 1.35; }
      .card-subtitle { font-size: 12.5px; line-height: 1.55; }
      .card-detail { padding: 12px 14px; gap: 10px; }
      .detail-icon { width: 22px; font-size: 16px; }
      .detail-text { font-size: 13px; line-height: 1.55; }

      .sunday-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px 18px;
        gap: 14px;
        margin-bottom: 28px;
      }
      .sunday-icon { width: 58px; height: 58px; font-size: 26px; }
      .sunday-label { font-size: 9.5px; letter-spacing: 1.5px; }
      .sunday-title { font-size: 15.5px; line-height: 1.4; }
      .sunday-desc { font-size: 12.5px; line-height: 1.6; padding: 0 2px; }

      .tips-section { padding: 22px 18px; }
      .tips-title { font-size: 15px; }
      .tip-row { padding: 10px 0; gap: 10px; }
      .tip-icon { width: 22px; font-size: 16px; }
      .tip-text { font-size: 13px; line-height: 1.55; }

      .back-btn { padding: 13px 24px; font-size: 13px; }
    }

    /* 매우 좁은 뷰포트 (iPhone SE 등 ≤375px) */
    @media (max-width: 375px) {
      .content { padding: 24px 12px 40px; }
      .hero h1 { font-size: 23px; }
      .hero-sub { font-size: 13px; }
      .card-top { padding: 18px 14px 0; gap: 10px; }
      .card-body { padding: 12px 14px 18px; }
      .card-icon-wrap { width: 46px; height: 46px; font-size: 20px; border-radius: 12px; }
      .card-title { font-size: 16px; }
      .card-detail { padding: 10px 12px; gap: 8px; }
      .detail-text { font-size: 12.5px; }
      .sunday-banner { padding: 22px 14px; }
      .sunday-title { font-size: 14.5px; }
      .sunday-desc { font-size: 12px; }
      .tips-section { padding: 18px 14px; }
      .tip-text { font-size: 12.5px; }
    }

    /* ── HIGHLIGHT BANNER (탄벌중 주차) ── */
    .highlight-banner {
      max-width: 960px;
      margin: -20px auto 0;
      padding: 0 20px;
      position: relative;
      z-index: 10;
    }
    .highlight-inner {
      background: linear-gradient(135deg, #C8A45C 0%, #d4b57a 50%, #C8A45C 100%);
      border-radius: var(--radius-lg);
      padding: 36px 28px 28px;
      text-align: center;
      box-shadow: 0 8px 40px rgba(200,164,92,.35), 0 0 0 3px rgba(200,164,92,.15);
      position: relative;
      overflow: hidden;
      animation: pulse-glow 2.5s ease-in-out infinite;
    }
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 8px 40px rgba(200,164,92,.35), 0 0 0 3px rgba(200,164,92,.15); }
      50% { box-shadow: 0 8px 50px rgba(200,164,92,.5), 0 0 0 6px rgba(200,164,92,.2); }
    }
    .highlight-inner::before {
      content: '';
      position: absolute;
      top: -50%; left: -50%;
      width: 200%; height: 200%;
      background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.15) 0%, transparent 50%);
      pointer-events: none;
    }
    .highlight-badge {
      display: inline-block;
      background: rgba(27,42,74,.85);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2px;
      padding: 5px 16px;
      border-radius: 30px;
      margin-bottom: 14px;
      text-transform: uppercase;
    }
    .highlight-main {
      font-size: 28px;
      font-weight: 900;
      color: #1B2A4A;
      letter-spacing: -0.03em;
      line-height: 1.35;
      margin-bottom: 10px;
      text-shadow: 0 1px 2px rgba(255,255,255,.3);
    }
    .highlight-sub {
      font-size: 14px;
      color: rgba(27,42,74,.7);
      font-weight: 500;
      line-height: 1.6;
      margin-bottom: 18px;
    }
    .highlight-warning {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #dc2626;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      padding: 10px 24px;
      border-radius: 50px;
      box-shadow: 0 4px 16px rgba(220,38,38,.3);
      animation: shake-subtle 3s ease-in-out infinite;
    }
    @keyframes shake-subtle {
      0%, 100% { transform: translateX(0); }
      92% { transform: translateX(0); }
      94% { transform: translateX(-3px); }
      96% { transform: translateX(3px); }
      98% { transform: translateX(-2px); }
    }

    @media (max-width: 639px) {
      .highlight-banner { margin-top: -12px; padding: 0 14px; }
      .highlight-inner { padding: 24px 18px 22px; }
      .highlight-badge { font-size: 10px; letter-spacing: 1.5px; padding: 4px 12px; }
      .highlight-main { font-size: 20px; line-height: 1.4; }
      .highlight-sub { font-size: 13px; line-height: 1.55; }
      .highlight-warning { font-size: 12.5px; padding: 9px 18px; }
    }
    @media (min-width: 768px) {
      .highlight-main { font-size: 34px; }
    }

    /* ── FADE-IN ANIMATION ── */
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .5s ease, transform .5s ease;
    }
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
  
    /* ── 모바일 추가 ── */
    @media (max-width: 480px) {
      [class*="-grid"] { grid-template-columns: 1fr !important; gap: 12px; }
    }