@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
    :root {
      --paper: #fcf9f2;
      --paper-2: #f1eee7;
      --paper-3: #ebe8e1;
      --card: #fbf9f5;
      --ink: #1c1c18;
      --muted: #4f4636;
      --line: #d2c5b0;
      --gold: #7a5900;
      --gold-2: #b88a1d;
      --green: #3e6659;
      --green-dark: #264e42;
      --error: #ba1a1a;
      --ok: #2f6f4e;
      --max: 1280px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      color: var(--ink);
      background-color: var(--paper);
      background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
      font-family:
        "Pretendard",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      line-height: 1.6;
    }
    main {
      flex: 1 0 auto;
    }
    body.locked { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    img { max-width: 100%; display: block; }
    .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; }
    .wrap { width: min(100% - 40px, var(--max)); margin: 0 auto; }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 40;
      border-bottom: 1px solid rgba(129, 118, 99, .18);
      background: rgba(252, 249, 242, .88);
      backdrop-filter: blur(14px);
    }
    .nav {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      font-size: clamp(22px, 3vw, 28px);
      font-weight: 800;
      color: var(--gold);
      white-space: nowrap;
      letter-spacing: -.02em;
    }
    .nav-links, .footer-links {
      display: flex;
      align-items: center;
      gap: 28px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav-link, .footer-links a {
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .05em;
      padding: 12px 3px;
      text-transform: uppercase;
    }
    .nav-link[aria-current="page"] {
      color: var(--gold);
      border-bottom: 2px solid var(--gold);
    }
    .nav-link:hover, .footer-links a:hover { color: var(--gold); }
    .footer-email {
      display: inline-block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 14px;
    }
    .footer-email:hover { color: var(--gold); }
    .primary-btn, .secondary-btn, .icon-btn {
      min-height: 42px;
      border-radius: 4px;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background .2s, border-color .2s, color .2s;
    }
    .primary-btn {
      background: var(--green);
      color: white;
      padding: 10px 18px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .primary-btn:hover { background: var(--green-dark); }
    .secondary-btn {
      background: transparent;
      border-color: rgba(122, 89, 0, .45);
      color: var(--gold);
      padding: 9px 16px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .05em;
    }
    .secondary-btn:hover { background: rgba(122, 89, 0, .08); }
    .icon-btn {
      width: 44px;
      padding: 0;
      background: var(--paper-2);
      border-color: rgba(129, 118, 99, .2);
      color: var(--gold);
    }
    .mobile-toggle { display: none; }
    .mobile-panel {
      display: none;
      border-top: 1px solid rgba(129, 118, 99, .14);
      padding: 14px 20px 22px;
    }
    .mobile-panel.open {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .mobile-panel .nav-link, .mobile-panel .primary-btn {
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 0;
      padding: 12px 14px;
      border-radius: 4px;
      font-size: 16px;
      background: rgba(241, 238, 231, .72);
      border: 1px solid rgba(129, 118, 99, .12);
      text-align: left;
    }
    .mobile-panel .primary-btn {
      background: var(--green);
      border-color: var(--green);
      color: white;
    }
    section { scroll-margin-top: 92px; }
    .hero {
      min-height: calc(100vh - 72px);
      display: grid;
      place-items: center;
      padding: 72px 0 92px;
      text-align: center;
    }
    .logo-ring {
      position: relative;
      width: min(340px, 74vw);
      margin: 0 auto 38px;
      padding: 22px;
      border: 1px solid rgba(129, 118, 99, .16);
      border-radius: 50%;
    }
    .logo-ring::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(184, 138, 29, .16);
      border-radius: 50%;
    }
    .logo-mark {
      position: relative;
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: radial-gradient(circle, #fffdf8, #eee7d8);
      border: 1px solid rgba(122, 89, 0, .18);
      overflow: hidden;
      padding: 28px;
    }
    .logo-mark img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    h1, h2, h3 {
      font-family:
        "Pretendard",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      line-height: 1.18;
      margin: 0;
      letter-spacing: -.03em;
    }
    h1 { font-size: clamp(42px, 8vw, 72px); font-weight: 850; }
    h2 { font-size: clamp(32px, 5vw, 46px); font-weight: 800; }
    h3 { font-size: clamp(23px, 3vw, 30px); font-weight: 800; }
    .lead {
      max-width: 680px;
      margin: 18px auto 0;
      color: var(--muted);
      font-size: clamp(17px, 2vw, 20px);
    }
    .hero-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 42px;
    }
    .social-btn {
      min-width: 168px;
      background: var(--paper-2);
      border: 1px solid rgba(129, 118, 99, .18);
      color: var(--ink);
      padding: 14px 18px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .05em;
    }
    .social-btn span { color: var(--gold); }
    .band {
      padding: 88px 0;
      border-top: 1px solid rgba(129, 118, 99, .14);
    }
    .paper-band { background: rgba(241, 238, 231, .64); }
    .section-head {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 44px;
      text-align: center;
    }
    .section-head::before, .section-head::after {
      content: "";
      height: 1px;
      flex: 1;
      background: rgba(129, 118, 99, .28);
    }
    .eyebrow {
      display: inline-block;
      color: var(--gold);
      font-size: clamp(18px, 1.5vw, 24px);
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .card {
      background: var(--card);
      border: 1px solid #ded9cc;
      border-radius: 8px;
      padding: 28px;
    }
    .news-card {
      min-height: 210px;
      text-align: left;
      color: inherit;
      transition: border-color .2s, background .2s;
    }
    .news-card:hover { border-color: rgba(122, 89, 0, .5); background: #fffdf8; }
    .news-card .material-symbols-outlined { color: var(--gold); font-size: 30px; }
    .news-card h3 { font-size: 22px; margin: 18px 0 8px; }
    .news-card p, .card p { color: var(--muted); margin: 0; }
    .split {
      display: grid;
      grid-template-columns: 5fr 6fr;
      gap: clamp(32px, 7vw, 96px);
      align-items: center;
    }
    .split.reverse { grid-template-columns: 6fr 5fr; }
    .image-panel {
      min-height: 420px;
      border-radius: 4px;
      border: 1px solid rgba(129, 118, 99, .18);
      background:
        linear-gradient(rgba(252, 249, 242, .12), rgba(252, 249, 242, .12)),
        url("../img/about_title.jpeg") center/cover;
    }
    .value-heading { align-self: start; }
    .value-list { margin: 0; display: grid; gap: 0; }
    .value-list > div { padding: 22px 0; border-top: 1px solid rgba(129, 118, 99, .24); }
    .value-list > div:last-child { border-bottom: 1px solid rgba(129, 118, 99, .24); }
    .value-list dt { color: var(--gold); font-weight: 800; letter-spacing: .04em; }
    .value-list dd { margin: 8px 0 0; color: var(--muted); }
    .value-list ol { margin: 0; padding-left: 1.4em; }
    .value-list li + li { margin-top: 4px; }
    .portrait {
      min-height: 520px;
      border-radius: 4px;
      border: 1px solid rgba(129, 118, 99, .18);
      background: #e7dfce;
      position: relative;
      overflow: hidden;
    }
    .portrait img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .conductor-photo {
      width: min(360px, 100%);
      justify-self: center;
      aspect-ratio: 1;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid rgba(129, 118, 99, .2);
      background: #fffdf8;
      box-shadow: 0 20px 50px rgba(53, 93, 80, .1);
    }
    .conductor-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .bio h3 {
      margin-top: 24px;
    }
    body[data-page="about"] .bio p,
    body[data-page="about"] .value-list {
      font-size: clamp(17px, 1.35vw, 19px);
      line-height: 1.75;
    }
    body[data-page="about"] .value-list dt {
      font-size: clamp(18px, 1.5vw, 20px);
    }
    .owner-bio h3 {
      font-size: clamp(32px, 5vw, 46px);
      margin-top: 0;
    }
    .bio .role {
      margin-top: 4px;
      color: rgba(28, 28, 24, .7);
      font-size: clamp(19px, 1.6vw, 21px);
      font-weight: 700;
    }
    .bio p { color: var(--muted); margin: 16px 0 0; }
    .field { display: grid; gap: 8px; }
    label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    input, select, textarea {
      width: 100%;
      min-height: 46px;
      border: 1px solid #ded9cc;
      border-radius: 4px;
      background: #fffdf8;
      color: var(--ink);
      padding: 10px 12px;
      outline: none;
    }
    textarea { min-height: 128px; resize: vertical; }
    input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 138, 29, .12); }
    .club-list, .part-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .club-card {
      min-height: 190px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 18px;
      position: relative;
      overflow: hidden;
    }
    .club-card::before {
      content: "";
      position: absolute;
      width: 92px;
      height: 92px;
      right: -22px;
      top: -22px;
      border-radius: 0 0 0 80px;
      background: rgba(241, 238, 231, .9);
    }
    .club-card h3 { font-size: 21px; position: relative; }
    .club-main {
      display: grid;
      gap: 18px;
      position: relative;
    }
    .club-logo {
      width: 112px;
      height: 112px;
      border-radius: 8px;
      border: 1px solid rgba(129, 118, 99, .18);
      background: #fffdf8;
      padding: 12px;
      object-fit: contain;
      position: relative;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--green);
      color: white;
      font-size: 10px;
      font-weight: 700;
      vertical-align: middle;
      margin-left: 6px;
    }
    .club-meta { color: var(--muted); font-size: 14px; margin: 10px 0 20px; position: relative; }
    .club-actions { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
    .brand-svg {
      width: 17px;
      height: 17px;
      display: block;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .youtube-icon {
      position: relative;
      width: 18px;
      height: 13px;
      display: inline-block;
      border-radius: 4px;
      background: currentColor;
    }
    .youtube-icon::after {
      content: "";
      position: absolute;
      left: 7px;
      top: 3px;
      width: 0;
      height: 0;
      border-left: 5px solid #fffdf8;
      border-top: 3.5px solid transparent;
      border-bottom: 3.5px solid transparent;
    }
    .part-card {
      min-height: 228px;
      width: 100%;
      text-align: left;
      color: inherit;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .part-card:hover { border-color: rgba(122, 89, 0, .5); }
    .part-card h3 { font-size: 28px; }
    .part-card p { color: var(--muted); margin: 4px 0 0; }
    .part-card .watermark {
      position: absolute;
      right: -18px;
      top: -18px;
      color: rgba(28, 28, 24, .06);
      font-size: 112px;
    }
    .part-detail {
      display: none;
      margin-top: 42px;
      padding-top: 42px;
      border-top: 1px solid rgba(129, 118, 99, .18);
    }
    .part-detail.open { display: block; }
    .detail-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
    .member-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px 24px;
    }
    .member-list li::before {
      content: "";
      width: 7px;
      height: 7px;
      display: inline-block;
      background: rgba(122, 89, 0, .45);
      margin-right: 10px;
      vertical-align: middle;
    }
    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%) translateY(24px);
      z-index: 80;
      opacity: 0;
      pointer-events: none;
      max-width: calc(100% - 32px);
      background: var(--green);
      color: white;
      border-radius: 4px;
      padding: 12px 16px;
      font-size: 14px;
      transition: opacity .2s, transform .2s;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 70;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(28, 28, 24, .42);
    }
    .modal-backdrop.open { display: flex; }
    .modal {
      width: min(720px, 100%);
      max-height: min(760px, calc(100vh - 40px));
      overflow: auto;
      background: var(--paper);
      border: 1px solid rgba(129, 118, 99, .28);
      border-radius: 8px;
      box-shadow: 0 20px 60px rgba(53, 93, 80, .18);
    }
    .modal-head {
      position: sticky;
      top: 0;
      background: rgba(252, 249, 242, .94);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      border-bottom: 1px solid rgba(129, 118, 99, .16);
    }
    .modal-body { padding: 24px; }
    .modal h2 { font-size: 30px; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-grid .full { grid-column: 1 / -1; }
    .error-text { min-height: 18px; color: var(--error); font-size: 13px; }
    .success-box {
      display: none;
      margin-top: 16px;
      border: 1px solid rgba(47, 111, 78, .3);
      background: rgba(47, 111, 78, .08);
      color: var(--ok);
      padding: 12px;
      border-radius: 4px;
    }
    footer {
      margin-top: auto;
      background: var(--paper-2);
      border-top: 1px solid rgba(129, 118, 99, .16);
      padding: 44px 0;
    }
    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 32px;
      align-items: flex-start;
    }
    .copyright { color: var(--muted); margin: 6px 0 0; max-width: 620px; }
    @media (max-width: 860px) {
      .wrap { width: min(100% - 40px, var(--max)); }
      .nav-links, .nav > .primary-btn { display: none; }
      .mobile-toggle { display: inline-flex; }
      .hero { min-height: auto; padding: 54px 0 72px; }
      .grid-3, .club-list, .part-grid { grid-template-columns: 1fr; }
      .split, .split.reverse, .detail-grid { grid-template-columns: 1fr; }
      .split.reverse .portrait { order: -1; }
      .image-panel, .portrait { min-height: 320px; }
      .band { padding: 64px 0; }
      .section-head { gap: 12px; margin-bottom: 30px; }
      .form-grid, .member-list { grid-template-columns: 1fr; }
      .footer-inner { flex-direction: column; }
      .footer-links { align-items: flex-start; flex-wrap: wrap; gap: 18px; }
    }
    @media (max-width: 390px) {
      .wrap { width: min(100% - 32px, var(--max)); }
      .brand { font-size: 20px; }
      .hero-actions { flex-direction: column; }
      .social-btn { width: 100%; }
      .card { padding: 22px; }
      .section-head::before, .section-head::after { display: none; }
      .club-logo { width: 96px; height: 96px; }
    }

    /* ===== Motion graphics =====
       app.js가 플래그 상태에 따라 <html>에 m-* 클래스를 토글한다.
       m-hero: 히어로 인트로 / m-reveal: 스크롤 등장 / m-hover: 호버 효과
       m-ambient: 앰비언트 모션 / m-vt: 페이지 전환(스타일은 JS가 주입) */
    @keyframes m-rise {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: none; }
    }
    @keyframes m-fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes m-breathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.015); }
    }
    @keyframes m-ring-draw {
      from { stroke-dashoffset: 100; }
      to { stroke-dashoffset: 0; }
    }
    @keyframes m-spin {
      to { transform: rotate(360deg); }
    }
    @keyframes m-drift {
      0%, 100% { transform: translate(-3%, -3%) scale(1); }
      50% { transform: translate(4%, 4%) scale(1.08); }
    }
    @keyframes m-sway {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(7px) rotate(-3deg); }
    }

    /* 1. 히어로 인트로: 금색 링 드로잉 + 타이틀 순차 등장 + 숨쉬는 로고 */
    .motion-ring {
      position: absolute;
      inset: -1px;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      display: none;
      pointer-events: none;
    }
    .motion-ring circle {
      fill: none;
      stroke: rgba(184, 138, 29, .55);
      stroke-width: .7;
      stroke-linecap: round;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }
    html.m-hero .motion-ring {
      display: block;
      animation: m-spin 140s linear 2.2s infinite;
    }
    html.m-hero .motion-ring circle {
      /* 12 + .5 = 12.5 단위 주기가 pathLength 100에 8번 반복 → 흰 틈 8개 */
      stroke-dasharray: 12 .5;
      animation: m-ring-draw 1.8s cubic-bezier(.4, 0, .2, 1) .2s both;
    }
    html.m-hero .hero .logo-ring {
      animation: m-fade 1s ease both, m-breathe 8s ease-in-out 2.4s infinite;
    }
    html.m-hero .hero h1 { animation: m-rise .9s cubic-bezier(.2, .7, .2, 1) .35s both; }
    html.m-hero .hero .lead { animation: m-rise .9s cubic-bezier(.2, .7, .2, 1) .5s both; }
    html.m-hero .hero .hero-actions { animation: m-rise .9s cubic-bezier(.2, .7, .2, 1) .65s both; }

    /* 2. 스크롤 진입: 카드/섹션이 아래에서 올라오며 페이드인
       시차 = 요소 순번(--reveal-i) x 간격(--reveal-step, 모바일에서 더 짧게) */
    html { --reveal-step: 90ms; }
    html.m-reveal .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity .7s ease calc(var(--reveal-i, 0) * var(--reveal-step)),
        transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--reveal-i, 0) * var(--reveal-step));
    }
    html.m-reveal .reveal.in {
      opacity: 1;
      transform: none;
    }

    /* 3. 호버 마이크로 인터랙션: 리프트 대신 금색 보더/인셋 스트로크 전환 */
    html.m-hover .card { transition: border-color .25s, background .25s, box-shadow .25s; }
    html.m-hover .card:hover {
      border-color: rgba(184, 138, 29, .55);
      background: #fffdf8;
      box-shadow: inset 0 0 0 1px rgba(184, 138, 29, .18);
    }
    /* 두 플래그가 동시에 켜지면 리빌 전환과 호버 전환을 한 목록으로 합친다 */
    html.m-reveal.m-hover .card.reveal {
      transition:
        border-color .25s, background .25s, box-shadow .25s,
        opacity .7s ease calc(var(--reveal-i, 0) * var(--reveal-step)),
        transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--reveal-i, 0) * var(--reveal-step));
    }
    html.m-hover .nav-link { position: relative; }
    html.m-hover .nav-link:not([aria-current="page"])::after {
      content: "";
      position: absolute;
      left: 3px;
      right: 3px;
      bottom: 6px;
      height: 2px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s cubic-bezier(.2, .7, .2, 1);
    }
    html.m-hover .nav-link:not([aria-current="page"]):hover::after { transform: scaleX(1); }
    html.m-hover .social-btn .material-symbols-outlined,
    html.m-hover .primary-btn .material-symbols-outlined { transition: transform .3s; }
    html.m-hover .social-btn:hover .material-symbols-outlined { transform: translateY(-2px) scale(1.08); }
    html.m-hover .primary-btn:hover .material-symbols-outlined { transform: translateX(2px); }
    html.m-hover .part-card .watermark { transition: transform .5s, color .5s; }
    html.m-hover .part-card:hover .watermark {
      transform: scale(1.08) rotate(4deg);
      color: rgba(122, 89, 0, .1);
    }

    /* 4. 앰비언트 모티프: 히어로에 먹이 번지듯 떠다니는 블롭 + 워터마크 흔들림
       블롭은 뷰포트 폭 기준으로 배치하고(50% - 50vw = 뷰포트 왼쪽 끝) 그라디언트가
       스스로 투명해지며 끝나므로, 컨테이너 폭에서 잘려 경계선이 생기지 않는다 */
    html.m-ambient .hero {
      position: relative;
      isolation: isolate;
    }
    html.m-ambient .hero::before,
    html.m-ambient .hero::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: min(46vw, 560px);
      aspect-ratio: 1;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(48px);
    }
    html.m-ambient .hero::before {
      top: 2%;
      left: calc(50% - 50vw + 4vw);
      background: radial-gradient(circle, rgba(184, 138, 29, .1), transparent 62%);
      animation: m-drift 26s ease-in-out infinite;
    }
    html.m-ambient .hero::after {
      bottom: 4%;
      right: calc(50% - 50vw + 4vw);
      background: radial-gradient(circle, rgba(62, 102, 89, .09), transparent 62%);
      animation: m-drift 32s ease-in-out -14s infinite reverse;
    }
    html.m-ambient .part-card .watermark { animation: m-sway 7s ease-in-out infinite; }

    /* 모바일: 카드가 1열이라 시차·이동거리·전환시간을 줄여 더 경쾌하게 */
    @media (max-width: 860px) {
      html { --reveal-step: 50ms; }
      html.m-reveal .reveal,
      html.m-reveal.m-hover .card.reveal {
        transform: translateY(14px);
        transition-duration: .45s;
      }
      html.m-reveal .reveal.in,
      html.m-reveal.m-hover .card.reveal.in { transform: none; }
    }