:root {
        --bg-top: #f2f2f2;
        --bg-info: #3e3e52;
        --bg-header: var(--bg-top);
        --text-main: #111111;
        --text-sub: #6b6b6b;
        --text-on-dark: #ffffff;
        --kakao: #fee500;
        --kakao-press: #f5d800;
        --max-width: 480px;
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --font: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
      }

      *, *::before, *::after { box-sizing: border-box; }
      html { -webkit-text-size-adjust: 100%; }

      body {
        margin: 0;
        min-height: 100dvh;
        font-family: var(--font);
        background: var(--bg-top);
        color: var(--text-main);
        line-height: 1.45;
      }

      img { display: block; max-width: 100%; height: auto; }
      a { text-decoration: none; color: inherit; }

      .page {
        width: 100%;
        max-width: var(--max-width);
        margin: 0 auto;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        background: var(--bg-top);
      }

      /* —— 헤더 —— */
      .site-header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 60px;
        padding: calc(6px + var(--safe-top)) 14px 4px;
        background: var(--bg-header);
      }

      .site-header__brand { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }

      .site-header__logo {
        height: 48px;
        width: auto;
        max-width: min(64vw, 248px);
        object-fit: contain;
        object-position: left center;
      }

      .site-header__cta {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
        border-radius: 8px;
        line-height: 0;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s ease, opacity 0.15s ease;
      }
      .site-header__cta:active { transform: scale(0.95); opacity: 0.9; }
      .site-header__cta-icon { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }

      /* —— 상단 프로필 —— */
      .hero { flex: 0 0 auto; padding: 8px 20px 20px; }
      .hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

      .hero__photo {
        width: min(72vw, 280px);
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: center top;
        border-radius: 4px;
        background: transparent;
      }

      .hero__name {
        margin: 22px 0 0;
        font-size: clamp(1.35rem, 5.2vw, 1.75rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--text-main);
      }

      .hero__tagline {
        margin: 10px 0 0;
        max-width: 20em;
        font-size: clamp(0.92rem, 3.6vw, 1.05rem);
        font-weight: 500;
        color: var(--text-sub);
        letter-spacing: -0.01em;
      }

      /* —— 카톡 버튼 —— */
      .kakao-btn {
        margin-top: 22px;
        align-self: stretch;
        width: 100%;
        max-width: none;
        min-height: 72px;
        padding: 18px 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        background: var(--kakao);
        border-radius: 8px;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
        text-align: center;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, transform 0.15s ease;
      }
      .kakao-btn:active { background: var(--kakao-press); transform: scale(0.985); }
      .kakao-btn__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; }
      .kakao-btn__icon img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; }
      .kakao-btn__label {
        font-size: clamp(1.35rem, 5.8vw, 1.6rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.2;
        color: #191919;
      }

      /* —— 유튜브 영상 —— */
      .video { width: 100%; margin-top: 28px; }
      .video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111; }
      .video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

      /* —— 하단 정보 —— */
      .info {
        flex: 1 1 auto;
        margin-top: 8px;
        background: var(--bg-info);
        border-radius: 18px 18px 0 0;
        color: var(--text-on-dark);
        padding-bottom: calc(28px + var(--safe-bottom));
      }
      .info__inner { padding: 28px 24px 8px; }
      .info__block + .info__block { margin-top: 28px; }
      .info__title { margin: 0 0 10px; font-size: clamp(1.05rem, 4vw, 1.2rem); font-weight: 800; letter-spacing: -0.02em; }
      .info__text { margin: 0; font-size: clamp(0.95rem, 3.6vw, 1.05rem); font-weight: 400; line-height: 1.55; opacity: 0.95; }
      .info__list { margin: 0; padding: 0; list-style: none; }
      .info__list li { font-size: clamp(0.95rem, 3.6vw, 1.05rem); font-weight: 400; line-height: 1.7; opacity: 0.95; }

      /* 넓은 화면에서도 모바일 카드처럼 중앙 정렬 */
      @media (min-width: 481px) {
        body { background: #e8e8e8; }
        .page { box-shadow: 0 0 40px rgba(0, 0, 0, 0.08); }
        .hero { padding-top: 10px; }
        .kakao-btn { min-height: 76px; }
      }