:root {
        color-scheme: dark;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        background:
          radial-gradient(circle at top, rgba(32, 232, 148, 0.18), transparent 24%),
          radial-gradient(circle at 80% 20%, rgba(32, 232, 148, 0.12), transparent 18%),
          radial-gradient(circle at 50% 100%, rgba(32, 232, 148, 0.08), transparent 28%),
          #121212;
      }

      @media (hover: hover) and (pointer: fine) {
        html,
        body,
        a,
        button,
        [role="button"] {
          cursor: none !important;
        }
      }

      .nav-glass {
        background: rgba(18, 18, 18, 0.35);
        border-color: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
      }

      .nav-glass.is-scrolled {
        background: rgba(18, 18, 18, 0.72);
        border-color: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
      }

      .hero-grid {
        background: #000000;
      }

      .hero-grid::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(ellipse 60% 40% at 20% 50%, rgba(0, 255, 163, 0.06), transparent),
          radial-gradient(ellipse 50% 50% at 80% 30%, rgba(0, 255, 163, 0.04), transparent);
        pointer-events: none;
      }

      .hero-grid::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 118px),
          linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 88px);
        opacity: 0.06;
        -webkit-mask-image: linear-gradient(180deg, transparent, black 18%, black 78%, transparent);
        mask-image: linear-gradient(180deg, transparent, black 18%, black 78%, transparent);
        pointer-events: none;
      }

      /*
       * ── 3D 텍스트 플립 효과 ──
       * 구조: .flip-wrapper > .flip-inner > (.flip-front + .flip-back)
       *
       * perspective: 부모에 원근감을 부여해 자식의 3D 변환이 입체적으로 보이게 함
       * transform-style: preserve-3d → 자식 요소의 3D 공간을 유지
       * backface-visibility: hidden → 뒤집힌 면이 보이지 않도록 숨김
       * rotateY(180deg) → hover 시 Y축 기준 180도 회전 (좌우 플립)
       */
      .flip-wrapper {
        display: inline-block;
        perspective: 800px;                     /* 원근감 — 낮을수록 극적 */
      }
      .flip-inner {
        position: relative;
        display: inline-block;
        transform-style: preserve-3d;           /* 자식의 3D 공간 보존 */
        transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);  /* 쫀득한 전환 */
      }
      .flip-wrapper:hover .flip-inner {
        transform: rotateY(180deg);             /* hover 시 Y축 180도 회전 */
      }
      /* 앞면(기본 상태) */
      .flip-front,
      .flip-back {
        display: block;
        backface-visibility: hidden;            /* 뒤집히면 숨김 */
        -webkit-backface-visibility: hidden;
      }
      /* 뒷면: 처음부터 180도 회전시켜 놓아야 플립 시 앞으로 나옴 */
      .flip-back {
        position: absolute;
        inset: 0;
        transform: rotateY(180deg);
      }

      /* CTA 직사각형 버튼 */
      .hero-cta-sharp {
        background: #00FFA3;
        color: #000000;
        font-weight: 700;
        font-size: 0.9rem;
        padding: 16px 40px;
        border: none;
        cursor: pointer;
        transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
      }
      .hero-cta-sharp:hover {
        background: #33FFB8;
        transform: translateY(-3px);
        box-shadow: 0 8px 32px rgba(0, 255, 163, 0.25);
      }

      .logo-orb {
        box-shadow:
          0 0 0 1px rgba(32, 232, 148, 0.12),
          0 0 70px rgba(32, 232, 148, 0.18),
          0 25px 60px rgba(0, 0, 0, 0.55);
      }

      .cta-glow {
        transition:
          transform 220ms ease,
          box-shadow 220ms ease,
          filter 220ms ease;
      }

      .cta-glow:hover {
        transform: translateY(-2px);
        box-shadow:
          0 0 0 1px rgba(32, 232, 148, 0.35),
          0 0 24px rgba(32, 232, 148, 0.34),
          0 16px 40px rgba(32, 232, 148, 0.2);
        filter: saturate(1.05);
      }

      .cta-glow:disabled,
      .cta-glow.is-disabled {
        opacity: 0.38;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
        filter: none;
      }

      .feature-card {
        transition:
          transform 220ms ease,
          border-color 220ms ease,
          box-shadow 220ms ease;
      }

      .feature-card:hover {
        transform: translateY(-8px);
        border-color: rgba(32, 232, 148, 0.55);
        box-shadow:
          0 0 0 1px rgba(32, 232, 148, 0.18),
          0 14px 40px rgba(0, 0, 0, 0.32),
          0 0 28px rgba(32, 232, 148, 0.14);
      }

      .testimonial-marquee-shell {
        position: relative;
        overflow: hidden;
        border-radius: 2rem;
        padding: 0.35rem 0;
        background:
          radial-gradient(circle at 50% 0%, rgba(32, 232, 148, 0.08), transparent 36%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.005));
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      }

      .testimonial-row {
        position: relative;
        overflow: hidden;
        padding: 0.95rem 0;
      }

      .testimonial-track {
        display: flex;
        width: max-content;
        align-items: stretch;
        gap: 1rem;
        will-change: transform;
        animation: testimonial-marquee-left var(--marquee-duration, 40s) linear infinite;
      }

      .testimonial-row[data-direction="right"] .testimonial-track {
        animation-name: testimonial-marquee-right;
        animation-duration: 44s;
      }

      .testimonial-row:hover .testimonial-track {
        animation-play-state: paused;
      }

      .testimonial-card {
        position: relative;
        width: min(360px, calc(100vw - 4.75rem));
        min-height: 198px;
        flex: 0 0 auto;
        padding: 1.3rem 1.25rem 1.2rem;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 1.6rem;
        background:
          radial-gradient(circle at top right, rgba(32, 232, 148, 0.08), transparent 32%),
          rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition:
          transform 240ms ease,
          border-color 240ms ease,
          background 240ms ease;
      }

      .testimonial-card:hover {
        transform: translateY(-4px);
        border-color: rgba(32, 232, 148, 0.22);
        background:
          radial-gradient(circle at top right, rgba(32, 232, 148, 0.13), transparent 35%),
          rgba(255, 255, 255, 0.055);
      }

      .testimonial-stars {
        font-size: 0.8rem;
        letter-spacing: 0.16em;
        color: rgba(32, 232, 148, 0.95);
      }

      .testimonial-quote {
        margin-top: 0.95rem;
        font-size: 1rem;
        line-height: 1.85;
        color: rgba(209, 213, 219, 0.92);
      }

      .testimonial-author {
        margin-top: 1.15rem;
      }

      .testimonial-name {
        font-size: 0.92rem;
        font-weight: 700;
        color: #00ffa3;
      }

      .testimonial-role {
        margin-top: 0.32rem;
        font-size: 0.82rem;
        line-height: 1.6;
        color: rgba(209, 213, 219, 0.46);
      }

      .testimonial-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.95rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        padding: 0.42rem 0.68rem;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(32, 232, 148, 0.86);
      }

      @keyframes testimonial-marquee-left {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(calc(-50% - 0.6rem), 0, 0);
        }
      }

      @keyframes testimonial-marquee-right {
        from {
          transform: translate3d(calc(-50% - 0.6rem), 0, 0);
        }
        to {
          transform: translate3d(0, 0, 0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .testimonial-track {
          animation: none !important;
          transform: none !important;
        }
      }

      .section-line {
        background: linear-gradient(90deg, transparent, rgba(32, 232, 148, 0.35), transparent);
      }

      .price-focus-section {
        position: relative;
      }

      .price-focus-line {
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 163, 0.9) 18%, rgba(0, 255, 163, 0.95) 50%, rgba(0, 255, 163, 0.9) 82%, transparent 100%);
        box-shadow:
          0 0 10px rgba(0, 255, 163, 0.28),
          0 0 22px rgba(0, 255, 163, 0.14);
      }

      .price-focus-stage {
        display: flex;
        min-height: 320px;
        align-items: center;
        justify-content: center;
        padding: 3.5rem 0;
      }

      .price-focus-motion {
        opacity: 0;
        transform: translate3d(-84px, 0, 0);
        transition:
          opacity 780ms cubic-bezier(0.16, 1, 0.3, 1),
          transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .price-focus-motion.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      .price-focus-number {
        color: #ffffff;
        font-size: clamp(4.6rem, 14vw, 10rem);
        font-weight: 700;
        letter-spacing: -0.08em;
        line-height: 0.9;
        text-align: center;
        text-wrap: nowrap;
        text-shadow:
          0 0 28px rgba(0, 255, 163, 0.08),
          0 18px 60px rgba(0, 0, 0, 0.38);
      }

      .price-focus-number .unit {
        margin-left: 0.18rem;
        color: #00ffa3;
        font-size: 0.24em;
        font-weight: 700;
        letter-spacing: -0.01em;
        vertical-align: middle;
      }

      /* Landing to survey transition shell */
      .landing-shell {
        transition:
          opacity 700ms ease,
          transform 700ms ease,
          filter 700ms ease;
      }

      body.survey-active .landing-shell {
        opacity: 0;
        transform: scale(0.985);
        filter: blur(18px);
        pointer-events: none;
      }

      /* Fullscreen survey stage */
      .survey-overlay {
        position: fixed;
        inset: 0;
        z-index: 120;
        display: none;
        place-items: center;
        padding: 24px;
        background:
          radial-gradient(circle at 50% 0%, rgba(32, 232, 148, 0.14), transparent 24%),
          rgba(18, 18, 18, 0.78);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 500ms ease,
          visibility 500ms ease;
      }

      body.survey-active .survey-overlay[aria-hidden="false"] {
        display: grid;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .survey-backdrop {
        position: absolute;
        inset: 0;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }

      .survey-stage {
        position: relative;
        width: min(100%, 920px);
        min-height: min(78dvh, 760px);
        max-height: calc(100dvh - 48px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 32px;
        background:
          linear-gradient(180deg, rgba(30, 30, 30, 0.94), rgba(18, 18, 18, 0.97));
        box-shadow:
          0 30px 90px rgba(0, 0, 0, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.04),
          0 0 0 1px rgba(32, 232, 148, 0.05);
        overflow: hidden;
      }

      .survey-stage::before {
        content: "";
        position: absolute;
        inset: auto -12% -18% -12%;
        height: 40%;
        background: radial-gradient(circle, rgba(32, 232, 148, 0.18), transparent 62%);
        filter: blur(30px);
        pointer-events: none;
      }

      .auth-panel,
      .survey-intro,
      .survey-panel,
      .loading-panel,
      .results-panel {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: clamp(24px, 5vw, 48px);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 420ms ease,
          visibility 420ms ease;
      }

      .survey-intro {
        transform: translateY(120px);
        filter: blur(26px);
      }

      .survey-overlay[data-phase="intro"] .survey-intro {
        visibility: visible;
        pointer-events: auto;
        animation: introRise 1150ms cubic-bezier(0.2, 0.9, 0.15, 1) forwards;
      }

      .survey-intro-text {
        text-align: center;
      }

      .survey-intro-text p:first-child {
        margin: 0;
        color: rgba(32, 232, 148, 0.74);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.32em;
        text-transform: uppercase;
      }

      .survey-intro-text h2 {
        margin: 18px 0 0;
        color: #fff;
        font-size: clamp(2rem, 5vw, 4rem);
        font-weight: 600;
        letter-spacing: -0.05em;
      }

      .survey-intro-text p:last-child {
        margin: 18px 0 0;
        color: rgba(224, 224, 224, 0.72);
        line-height: 1.8;
      }

      .survey-overlay[data-phase="auth"] .auth-panel,
      .survey-overlay[data-phase="questions"] .survey-panel,
      .survey-overlay[data-phase="loading"] .loading-panel,
      .survey-overlay[data-phase="results"] .results-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .survey-card {
        position: relative;
        width: min(100%, 640px);
        margin: auto;
        padding: clamp(28px, 5vw, 42px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }

      .survey-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        pointer-events: none;
        background: linear-gradient(160deg, rgba(32, 232, 148, 0.25), transparent 65%);
        -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
      }

      .question-shell {
        transition:
          opacity 320ms ease,
          transform 320ms ease,
          filter 320ms ease;
      }

      .question-shell.is-swapping {
        opacity: 0;
        transform: translateX(24px);
        filter: blur(12px);
      }

      .choice-button {
        position: relative;
        width: 100%;
        text-align: left;
        padding: 16px 18px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.03);
        color: #e0e0e0;
        transition:
          transform 220ms ease,
          border-color 220ms ease,
          box-shadow 220ms ease,
          background 220ms ease;
      }

      .choice-button:hover {
        transform: translateY(-2px);
        border-color: rgba(32, 232, 148, 0.44);
        background: rgba(32, 232, 148, 0.08);
        box-shadow: 0 0 0 1px rgba(32, 232, 148, 0.12), 0 16px 36px rgba(0, 0, 0, 0.24);
      }

      .choice-button {
        min-height: 52px;
      }

      /* Progress bar */
      .progress-track {
        height: 3px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        overflow: hidden;
      }

      .progress-fill {
        height: 100%;
        border-radius: 999px;
        background: #20e894;
        transition: width 400ms ease;
        box-shadow: 0 0 8px rgba(32, 232, 148, 0.5);
      }

      /* Survey close button */
      .survey-close-btn {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 10;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
        color: rgba(224, 224, 224, 0.5);
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          border-color 200ms ease,
          background 200ms ease,
          color 200ms ease;
      }

      .survey-close-btn:hover {
        border-color: rgba(32, 232, 148, 0.4);
        background: rgba(32, 232, 148, 0.08);
        color: #e0e0e0;
      }

      .auth-provider-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 54px;
        width: 100%;
        border-radius: 18px;
        border: 1px solid rgba(32, 232, 148, 0.5);
        background: linear-gradient(180deg, rgba(32, 232, 148, 0.85), rgba(32, 232, 148, 0.7));
        color: #08140f;
        box-shadow: 0 0 20px rgba(32, 232, 148, 0.15);
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        transition:
          transform 220ms ease,
          box-shadow 220ms ease,
          border-color 220ms ease;
      }

      .auth-provider-button:hover {
        transform: translateY(-2px);
        border-color: rgba(32, 232, 148, 0.7);
        background: linear-gradient(180deg, rgba(32, 232, 148, 0.95), rgba(32, 232, 148, 0.8));
        box-shadow:
          0 0 0 1px rgba(32, 232, 148, 0.3),
          0 0 28px rgba(32, 232, 148, 0.25),
          0 16px 36px rgba(32, 232, 148, 0.2);
      }

      .auth-provider-button.is-disabled {
        opacity: 0.36;
        pointer-events: none;
        filter: grayscale(0.15);
        box-shadow: none;
      }

      .auth-benefits {
        display: grid;
        gap: 12px;
        margin-top: 22px;
        text-align: left;
      }

      .auth-benefit {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 14px 16px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.025);
      }

      .auth-benefit-marker {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: rgba(32, 232, 148, 0.12);
        color: #20e894;
        font-size: 0.75rem;
        font-weight: 700;
      }

      .auth-benefit-title {
        margin: 0;
        color: #ffffff;
        font-size: 0.92rem;
        font-weight: 600;
      }

      .auth-benefit-copy {
        margin: 4px 0 0;
        color: rgba(224, 224, 224, 0.72);
        font-size: 0.82rem;
        line-height: 1.7;
      }

      /* Results panel */
      .results-section {
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      .results-section:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      .results-section-title {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(32, 232, 148, 0.8);
        margin: 0 0 8px;
      }

      .results-section-text {
        font-size: 0.88rem;
        line-height: 1.8;
        color: rgba(224, 224, 224, 0.85);
        margin: 0;
        white-space: pre-line;
      }

      .insight-card {
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
        padding: 20px;
      }

      .metric-card {
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.02);
        padding: 16px;
      }

      .trial-card {
        border-radius: 24px;
        border: 1px solid rgba(32, 232, 148, 0.18);
        background:
          linear-gradient(180deg, rgba(32, 232, 148, 0.08), rgba(255, 255, 255, 0.02));
        padding: 22px;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.05),
          0 16px 40px rgba(0, 0, 0, 0.18);
      }

      .pill-tag {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        padding: 6px 12px;
        font-size: 0.76rem;
        color: rgba(224, 224, 224, 0.84);
      }

      .loading-orb {
        width: 92px;
        height: 92px;
        border-radius: 999px;
        border: 1px solid rgba(32, 232, 148, 0.28);
        border-top-color: rgba(32, 232, 148, 0.9);
        box-shadow: 0 0 32px rgba(32, 232, 148, 0.18);
        animation: spin 1s linear infinite;
      }

      .loading-stage {
        position: relative;
        z-index: 2;
      }

      .loading-copy {
        width: min(100%, 620px);
        margin: 0 auto;
        padding: clamp(24px, 4vw, 36px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 28px;
        background:
          linear-gradient(180deg, rgba(18, 18, 18, 0.82), rgba(30, 30, 30, 0.92));
        box-shadow:
          0 20px 60px rgba(0, 0, 0, 0.42),
          0 0 0 1px rgba(32, 232, 148, 0.06),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }

      .loading-eyebrow {
        color: #ffffff;
        text-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
      }

      .loading-title {
        color: #ffffff;
        text-shadow:
          0 0 18px rgba(32, 232, 148, 0.08),
          0 10px 26px rgba(0, 0, 0, 0.3);
      }

      .loading-description {
        color: #ffffff;
        opacity: 1;
        text-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
      }

      .loading-layer {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        transition: opacity 420ms ease;
      }

      .loading-layer::before {
        content: "";
        position: absolute;
        inset: 12% 10%;
        border-radius: 28px;
        background:
          radial-gradient(circle at 50% 50%, rgba(32, 232, 148, 0.12), transparent 46%),
          linear-gradient(180deg, rgba(18, 18, 18, 0.1), rgba(18, 18, 18, 0.34));
        filter: blur(10px);
      }

      .loading-layer::after {
        content: "";
        position: absolute;
        inset: 20% 16%;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(32, 232, 148, 0.16), transparent 62%);
        filter: blur(18px);
      }

      .survey-overlay[data-phase="loading"] .loading-layer {
        opacity: 1;
      }

      .loading-dots span {
        display: inline-block;
        width: 7px;
        height: 7px;
        margin: 0 5px;
        border-radius: 999px;
        background: rgba(32, 232, 148, 0.8);
        animation: bounce 1.1s infinite ease-in-out;
      }

      .loading-dots span:nth-child(2) {
        animation-delay: 0.12s;
      }

      .loading-dots span:nth-child(3) {
        animation-delay: 0.24s;
      }

      @keyframes introRise {
        0% {
          opacity: 0;
          transform: translateY(140px);
          filter: blur(26px);
        }
        60% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: translateY(0);
          filter: blur(0);
        }
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes bounce {
        0%,
        80%,
        100% {
          transform: scale(0.65);
          opacity: 0.4;
        }
        40% {
          transform: scale(1);
          opacity: 1;
        }
      }

      .paywall-modal {
        position: fixed;
        inset: 0;
        z-index: 140;
        display: grid;
        place-items: center;
        padding: 24px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 300ms ease, visibility 300ms ease;
      }
      .paywall-modal[aria-hidden="false"] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .paywall-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(8, 8, 8, 0.74);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
      .paywall-panel {
        position: relative;
        width: min(100%, 560px);
        padding: 2rem;
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background:
          radial-gradient(circle at 20% 0%, rgba(0, 255, 163, 0.14), transparent 34%),
          linear-gradient(180deg, rgba(26, 26, 26, 0.96), rgba(17, 17, 17, 0.98));
        box-shadow:
          0 32px 90px rgba(0, 0, 0, 0.52),
          inset 0 1px 0 rgba(255, 255, 255, 0.04),
          0 0 0 1px rgba(0, 255, 163, 0.05);
      }
      .paywall-panel::before {
        content: "";
        position: absolute;
        inset: auto -8% -20% -8%;
        height: 38%;
        background: radial-gradient(circle, rgba(0, 255, 163, 0.18), transparent 60%);
        filter: blur(28px);
        pointer-events: none;
      }
      .paywall-kicker {
        color: rgba(0, 255, 163, 0.76);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.28em;
        text-transform: uppercase;
      }
      .paywall-feature-list {
        display: grid;
        gap: 0.85rem;
        margin-top: 1.2rem;
      }
      .paywall-feature-item {
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.03);
        padding: 0.95rem 1rem;
        color: rgba(224, 224, 224, 0.72);
        font-size: 0.88rem;
        line-height: 1.75;
      }
      .paywall-feature-item strong {
        display: block;
        margin-bottom: 0.28rem;
        color: #ffffff;
        font-size: 0.92rem;
      }
      .paywall-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.5rem;
      }
      .paywall-actions button {
        flex: 1 1 180px;
      }
      .logout-panel {
        width: min(100%, 500px);
      }

      .cursor-layer {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 999;
      }

      .cursor-inner,
      .cursor-outer {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        opacity: 0;
        transform: translate3d(-50%, -50%, 0);
        transition:
          opacity 220ms ease,
          width 220ms ease,
          height 220ms ease,
          border-color 220ms ease,
          background-color 220ms ease,
          box-shadow 220ms ease,
          backdrop-filter 220ms ease,
          -webkit-backdrop-filter 220ms ease;
        will-change: transform, width, height, opacity;
      }

      .cursor-inner {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: #20e894;
        box-shadow: 0 0 12px rgba(32, 232, 148, 0.65);
      }

      .cursor-outer {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: 1px solid rgba(32, 232, 148, 0.28);
        background: rgba(32, 232, 148, 0.08);
        box-shadow:
          0 0 0 1px rgba(32, 232, 148, 0.08),
          0 0 18px rgba(32, 232, 148, 0.18),
          0 0 40px rgba(32, 232, 148, 0.08);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        overflow: hidden;
      }

      .cursor-outer::after {
        content: "Z";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: rgba(255, 255, 255, 0);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: -0.08em;
        text-shadow: 0 0 10px rgba(32, 232, 148, 0);
        transition:
          color 220ms ease,
          text-shadow 220ms ease,
          transform 220ms ease;
        transform: scale(0.8);
      }

      .cursor-visible .cursor-inner,
      .cursor-visible .cursor-outer {
        opacity: 1;
      }

      .cursor-hover .cursor-outer {
        width: 52px;
        height: 52px;
        border-color: rgba(32, 232, 148, 0.62);
        background: rgba(32, 232, 148, 0.12);
        box-shadow:
          0 0 0 1px rgba(32, 232, 148, 0.2),
          0 0 28px rgba(32, 232, 148, 0.28),
          0 0 64px rgba(32, 232, 148, 0.14);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
      }

      .cursor-hover .cursor-outer::after {
        color: rgba(255, 255, 255, 0.34);
        text-shadow: 0 0 12px rgba(32, 232, 148, 0.3);
        transform: scale(1);
      }

      .reveal {
        opacity: 0;
        transform: translateY(28px) scale(0.985);
        transition:
          opacity 700ms ease,
          transform 700ms ease,
          filter 700ms ease;
        filter: blur(10px);
      }

      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }

      .reveal-delay-1 {
        transition-delay: 100ms;
      }

      .reveal-delay-2 {
        transition-delay: 180ms;
      }

      .reveal-delay-3 {
        transition-delay: 260ms;
      }

      .landing-section {
        content-visibility: auto;
        contain-intrinsic-size: 1px 820px;
      }

      @media (max-width: 768px) {
        .survey-stage {
          min-height: min(84dvh, 760px);
          max-height: calc(100dvh - 24px);
          border-radius: 24px;
        }
      }

      /* ── Dashboard overlay ── */
      .dashboard-overlay {
        position: fixed;
        inset: 0;
        z-index: 80;
        background: #111111;
        overflow: hidden;
        transition: opacity 420ms ease, visibility 420ms ease;
      }
      .dashboard-overlay[aria-hidden="true"] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      .dashboard-overlay[aria-hidden="false"] {
        opacity: 1;
        visibility: visible;
      }
      .dashboard-shell {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        width: 100%;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
      }
      .dashboard-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        min-width: 0;
        min-height: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        background:
          radial-gradient(circle at 18% 0%, rgba(0, 255, 163, 0.14), transparent 32%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
        padding: 1.5rem 1.25rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
      .dashboard-sidebar-brand {
        display: flex;
        align-items: center;
        gap: 0.85rem;
      }
      .dashboard-sidebar-brand img {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        object-fit: cover;
      }
      .dashboard-sidebar-brand p {
        margin: 0;
      }
      .dashboard-sidebar-brand .eyebrow {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(0, 255, 163, 0.72);
      }
      .dashboard-sidebar-brand .title {
        margin-top: 0.25rem;
        font-size: 1rem;
        font-weight: 700;
        color: #ffffff;
      }
      /* [UX-1] 사이드바 축소형 프로필 — 닉네임+아바타만 */
      .dashboard-sidebar-profile-mini {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0.85rem;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.025);
      }
      .dash-avatar-sm {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1px solid rgba(0, 255, 163, 0.22);
        object-fit: cover;
        background: rgba(0, 255, 163, 0.06);
        flex-shrink: 0;
      }
      .dash-badge-sm {
        font-size: 0.62rem;
        font-weight: 600;
      }
      .dashboard-sidebar-nav {
        display: grid;
        gap: 0.55rem;
      }
      .dashboard-nav-button {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        width: 100%;
        padding: 0.95rem 1rem;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        background: transparent;
        color: rgba(255, 255, 255, 0.7);
        text-align: left;
        font-size: 0.92rem;
        font-weight: 600;
        transition:
          border-color 220ms ease,
          background 220ms ease,
          color 220ms ease,
          transform 220ms ease;
      }
      .dashboard-nav-button:hover {
        color: #ffffff;
        border-color: rgba(0, 255, 163, 0.16);
        background: rgba(255, 255, 255, 0.03);
        transform: translateX(2px);
      }
      .dashboard-nav-button.is-active {
        color: #08140f;
        border-color: rgba(0, 255, 163, 0.38);
        background: linear-gradient(180deg, rgba(0, 255, 163, 0.96), rgba(0, 255, 163, 0.78));
        box-shadow: 0 14px 30px rgba(0, 255, 163, 0.12);
      }
      .dashboard-nav-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.06);
        font-size: 0.85rem;
        flex-shrink: 0;
      }
      .dashboard-nav-button.is-active .dashboard-nav-icon {
        background: rgba(8, 20, 15, 0.18);
      }
      /* [UX-4] gpt 모델 안내 → 사이드바 맨 아래 최소 푸터 */
      .dashboard-sidebar-footer {
        margin-top: auto;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.24);
        font-size: 0.68rem;
        letter-spacing: 0.04em;
      }
      .dashboard-sidebar-footer strong {
        color: rgba(0, 255, 163, 0.52);
        font-weight: 600;
      }
      .dashboard-main {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background:
          radial-gradient(circle at 100% 0%, rgba(0, 255, 163, 0.08), transparent 24%),
          #111111;
      }
      .dashboard-topbar {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.25rem 1.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(17, 17, 17, 0.86);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }
      .dashboard-topbar-head {
        display: flex;
        align-items: center;
        gap: 1rem;
        min-width: 0;
      }
      /* [UX-1] 탑바 중복 브랜드 삭제 — 사이드바 로고만 유지 */
      .dashboard-topbar-eyebrow {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: rgba(0, 255, 163, 0.68);
      }
      .dashboard-topbar-title {
        margin-top: 0.25rem;
        color: #ffffff;
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: -0.04em;
      }
      /* [UX-3] 탑바 설명문 제거 → 라우트 타이틀만 표시 */
      .dashboard-topbar-user {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding: 0.7rem 0.85rem;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.03);
      }
      .dashboard-topbar-user img {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        object-fit: cover;
      }
      .dashboard-topbar-user p {
        margin: 0;
      }
      .dashboard-topbar-user .name {
        color: #ffffff;
        font-size: 0.92rem;
        font-weight: 700;
      }
      .dashboard-topbar-user .meta {
        margin-top: 0.18rem;
        color: rgba(224, 224, 224, 0.48);
        font-size: 0.78rem;
      }
      .dashboard-topbar-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .dashboard-wallet-stack {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        flex-wrap: wrap;
      }
      .dashboard-wallet-pill {
        min-width: 122px;
        padding: 0.72rem 0.9rem;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }
      .dashboard-wallet-pill span {
        display: block;
        color: rgba(224, 224, 224, 0.44);
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }
      .dashboard-wallet-pill strong {
        display: block;
        margin-top: 0.42rem;
        color: #ffffff;
        font-size: 0.96rem;
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      /* [UX-2] 고스트 버튼 — 호버 시에만 네온 표시 */
      .dashboard-ghost-button {
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: transparent;
        padding: 0.6rem 0.85rem;
        color: rgba(255, 255, 255, 0.52);
        font-size: 0.78rem;
        font-weight: 600;
        transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
      }
      .dashboard-ghost-button:hover {
        border-color: rgba(0, 255, 163, 0.35);
        color: #00FFA3;
        background: rgba(0, 255, 163, 0.06);
      }
      .dashboard-view-shell {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 1.75rem;
        transition:
          opacity 220ms ease,
          transform 220ms ease,
          filter 220ms ease;
      }
      .dashboard-view-shell.is-switching {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(8px);
      }
      /* [UX-4] 일정한 패딩·라운딩 */
      .dashboard-panel,
      .dashboard-note-panel {
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
        padding: 1.5rem;
      }
      .dashboard-grid-2 {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .dashboard-grid-3 {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .dashboard-grid-4 {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .stat-card,
      .dashboard-kpi-card {
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.025);
        padding: 1.15rem 1.2rem;
        transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
      }
      .stat-card:hover,
      .dashboard-kpi-card:hover {
        border-color: rgba(0, 255, 163, 0.16);
        box-shadow: 0 0 18px rgba(0, 255, 163, 0.06);
        transform: translateY(-1px);
      }
      .dashboard-kpi-card .label {
        color: rgba(255, 255, 255, 0.44);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }
      .dashboard-kpi-card .value {
        margin-top: 0.65rem;
        color: #ffffff;
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.04em;
      }
      .dashboard-kpi-card .sub {
        margin-top: 0.45rem;
        color: rgba(224, 224, 224, 0.58);
        font-size: 0.82rem;
        line-height: 1.6;
      }
      .dashboard-panel-title {
        color: #ffffff;
        font-size: 1.08rem;
        font-weight: 700;
      }
      /* [UX-3] dashboard-panel-copy 삭제 — 줄글 대신 라벨+수치 */
      .dashboard-primary-button,
      .dashboard-secondary-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        border-radius: 16px;
        padding: 0.9rem 1.1rem;
        font-size: 0.92rem;
        font-weight: 700;
        transition:
          border-color 220ms ease,
          background 220ms ease,
          transform 220ms ease,
          box-shadow 220ms ease,
          opacity 220ms ease;
      }
      .dashboard-primary-button {
        border: 1px solid rgba(0, 255, 163, 0.3);
        background: linear-gradient(180deg, rgba(0, 255, 163, 0.98), rgba(0, 255, 163, 0.82));
        color: #08140f;
        box-shadow: 0 12px 28px rgba(0, 255, 163, 0.12);
      }
      .dashboard-primary-button:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 16px 36px rgba(0, 255, 163, 0.18);
      }
      /* [UX-2] 아웃라인 버튼 — 네온 테두리만, 배경 투명 */
      .dashboard-secondary-button {
        border: 1px solid rgba(0, 255, 163, 0.2);
        background: transparent;
        color: rgba(255, 255, 255, 0.78);
      }
      .dashboard-secondary-button:hover:not(:disabled) {
        border-color: rgba(0, 255, 163, 0.45);
        color: #00FFA3;
        background: rgba(0, 255, 163, 0.06);
        transform: translateY(-1px);
      }
      .dashboard-primary-button:disabled,
      .dashboard-secondary-button:disabled {
        cursor: not-allowed;
        opacity: 0.42;
        box-shadow: none;
        transform: none;
      }
      .dashboard-note-panel {
        border-color: rgba(0, 255, 163, 0.14);
        background: rgba(0, 255, 163, 0.05);
        color: rgba(224, 224, 224, 0.76);
        font-size: 0.9rem;
        line-height: 1.8;
      }
      .dashboard-counter {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: 999px;
        border: 1px solid rgba(0, 255, 163, 0.16);
        background: rgba(0, 255, 163, 0.08);
        padding: 0.55rem 0.9rem;
        color: #b8ffe3;
        font-size: 0.82rem;
        font-weight: 700;
      }
      .dashboard-section-stack {
        display: grid;
        gap: 1rem;
      }
      .dashboard-result-card {
        border-radius: 20px;
        border: 1px solid rgba(0, 255, 163, 0.12);
        background: rgba(0, 255, 163, 0.04);
        padding: 1.2rem;
      }
      .dashboard-result-card h4 {
        color: #ffffff;
        font-size: 0.98rem;
        font-weight: 700;
      }
      .dashboard-result-card p {
        margin-top: 0.7rem;
        color: rgba(224, 224, 224, 0.72);
        font-size: 0.9rem;
        line-height: 1.8;
      }
      .dashboard-route-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.2rem;
      }
      .dashboard-history-list {
        display: grid;
        gap: 0.9rem;
        margin-top: 1rem;
      }
      .dashboard-history-item {
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.025);
        padding: 1rem 1.1rem;
      }
      .dashboard-history-item time {
        color: rgba(0, 255, 163, 0.68);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .dashboard-history-item h4 {
        margin-top: 0.55rem;
        color: #ffffff;
        font-size: 0.96rem;
        font-weight: 700;
      }
      .dashboard-history-item p {
        margin-top: 0.6rem;
        color: rgba(224, 224, 224, 0.72);
        font-size: 0.88rem;
        line-height: 1.8;
      }
      .dashboard-reference-section {
        margin-top: 1rem;
        padding-top: 0.95rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      .dashboard-reference-label {
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
        color: rgba(0, 255, 163, 0.8);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .dashboard-reference-card {
        display: grid;
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 0.95rem;
        margin-top: 0.75rem;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
        padding: 0.82rem;
        text-decoration: none;
        transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
      }
      .dashboard-reference-card:hover {
        transform: translateY(-4px);
        border-color: rgba(0, 255, 163, 0.52);
        box-shadow: 0 18px 36px rgba(0, 255, 163, 0.12);
        background: linear-gradient(145deg, rgba(0, 255, 163, 0.08), rgba(255, 255, 255, 0.04));
      }
      .dashboard-reference-card:focus-visible {
        outline: none;
        transform: translateY(-4px);
        border-color: rgba(0, 255, 163, 0.6);
        box-shadow: 0 0 0 3px rgba(0, 255, 163, 0.16);
      }
      .dashboard-reference-thumb {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 14px;
        object-fit: cover;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
      }
      .dashboard-reference-body {
        min-width: 0;
      }
      .dashboard-reference-platform {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        border: 1px solid rgba(0, 255, 163, 0.2);
        background: rgba(0, 255, 163, 0.08);
        color: rgba(0, 255, 163, 0.85);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        padding: 0.28rem 0.6rem;
        text-transform: uppercase;
      }
      .dashboard-reference-title {
        margin-top: 0.7rem;
        color: #ffffff;
        font-size: 0.98rem;
        font-weight: 700;
        line-height: 1.45;
      }
      .dashboard-reference-reason {
        margin-top: 0.55rem;
        color: rgba(224, 224, 224, 0.74);
        font-size: 0.84rem;
        line-height: 1.75;
      }
      .dashboard-reference-link {
        margin-top: 0.72rem;
        color: rgba(0, 255, 163, 0.82);
        font-size: 0.77rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      @media (max-width: 720px) {
        .dashboard-reference-card {
          grid-template-columns: 1fr;
        }
      }
      .dashboard-empty-state {
        display: grid;
        place-items: center;
        min-height: 280px;
        border-radius: 22px;
        border: 1px dashed rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.02);
        text-align: center;
        padding: 1.5rem;
      }
      .dashboard-empty-state h4 {
        color: #ffffff;
        font-size: 1.05rem;
        font-weight: 700;
      }
      .dashboard-empty-state p {
        margin-top: 0.8rem;
        max-width: 480px;
        color: rgba(224, 224, 224, 0.64);
        font-size: 0.92rem;
        line-height: 1.8;
      }

      /* AI 스피너 */
      @keyframes dash-spin {
        to { transform: rotate(360deg); }
      }
      @keyframes dash-pulse {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 1; }
      }
      .dash-spinner {
        width: 48px;
        height: 48px;
        border: 3px solid rgba(32, 232, 148, 0.12);
        border-top-color: #20E894;
        border-radius: 50%;
        animation: dash-spin 0.9s linear infinite;
        box-shadow: 0 0 16px rgba(32, 232, 148, 0.2);
      }
      .dash-pulse-text {
        animation: dash-pulse 1.8s ease-in-out infinite;
      }

      /* AI 결과 카드 */
      .ai-card {
        border-radius: 16px;
        border: 1px solid rgba(32, 232, 148, 0.1);
        background: rgba(32, 232, 148, 0.03);
        padding: 1.5rem;
        transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
      }
      .ai-card:hover {
        border-color: rgba(32, 232, 148, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(32, 232, 148, 0.08);
      }
      .ai-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(32, 232, 148, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
      }

      .about-focus-card {
        position: relative;
        overflow: hidden;
        border-radius: 28px;
        border: 1px solid rgba(32, 232, 148, 0.16);
        background:
          radial-gradient(circle at 90% 12%, rgba(32, 232, 148, 0.18), transparent 34%),
          linear-gradient(180deg, rgba(32, 232, 148, 0.08), rgba(255, 255, 255, 0.02));
        box-shadow:
          0 24px 60px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.05),
          0 0 0 1px rgba(32, 232, 148, 0.05);
      }

      .about-focus-card::before {
        content: "";
        position: absolute;
        inset: auto -10% -22% auto;
        width: 220px;
        height: 220px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(32, 232, 148, 0.18), transparent 68%);
        filter: blur(22px);
        pointer-events: none;
      }

      .about-keyword {
        color: #20e894;
        font-weight: 700;
        text-shadow: 0 0 18px rgba(32, 232, 148, 0.24);
      }

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

      .about-focus-pill {
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
        padding: 14px 16px;
      }

      .about-focus-pill strong {
        display: block;
        color: #ffffff;
        font-size: 0.92rem;
        font-weight: 600;
      }

      .about-focus-pill span {
        display: block;
        margin-top: 6px;
        color: rgba(224, 224, 224, 0.68);
        font-size: 0.8rem;
        line-height: 1.6;
      }

      @media (max-width: 1100px) {
        .dashboard-shell {
          grid-template-columns: 1fr;
        }
        .dashboard-sidebar {
          border-right: none;
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
      }

      @media (max-width: 768px) {
        .about-focus-grid { grid-template-columns: 1fr; }
        .dashboard-topbar {
          align-items: flex-start;
          flex-direction: column;
          padding: 1.1rem 1rem;
        }
        .dashboard-topbar-head {
          width: 100%;
          flex-direction: column;
          align-items: flex-start;
        }
        .dashboard-topbar-actions {
          width: 100%;
          justify-content: flex-start;
        }
        .dashboard-view-shell {
          padding: 1rem;
        }
        .dashboard-grid-2,
        .dashboard-grid-3,
        .dashboard-grid-4 {
          grid-template-columns: 1fr;
        }
        .dashboard-sidebar-nav {
          grid-template-columns: 1fr;
        }
      }

      /* 완료 토스트 */
      @keyframes toast-in {
        from { opacity: 0; transform: translateY(20px) scale(0.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
      @keyframes toast-out {
        from { opacity: 1; transform: translateY(0) scale(1); }
        to { opacity: 0; transform: translateY(-12px) scale(0.95); }
      }
      .toast {
        position: fixed;
        bottom: 2rem;
        left: 50%;
        translate: -50% 0;
        z-index: 200;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 24px;
        border-radius: 16px;
        border: 1px solid rgba(32, 232, 148, 0.3);
        background: rgba(17, 17, 17, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 24px rgba(32, 232, 148, 0.1);
        color: #fff;
        font-size: 0.85rem;
        font-weight: 600;
        animation: toast-in 380ms ease forwards;
        pointer-events: none;
      }
      .toast.leaving {
        animation: toast-out 320ms ease forwards;
      }
      .toast-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(32, 232, 148, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        flex-shrink: 0;
      }

      /* ── AI 콘텐츠 아이디어 수평 스크롤 카드 ── */
      .content-ideas-section {
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
        padding: 1.5rem 0 1.5rem 1.5rem;       /* 오른쪽 패딩 제거 → 카드가 가장자리까지 스크롤 */
        overflow: hidden;
      }
      .content-ideas-scroll {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-right: 1.5rem;                  /* 마지막 카드 뒤 여백 */
        padding-bottom: 0.75rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .content-ideas-scroll::-webkit-scrollbar {
        display: none;
      }
      .content-idea-card {
        flex: 0 0 260px;
        min-height: 200px;
        scroll-snap-align: start;
        padding: 1.25rem 1.15rem 1.1rem;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background:
          radial-gradient(circle at top right, rgba(32, 232, 148, 0.1), transparent 48%),
          rgba(255, 255, 255, 0.045);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
      }
      @media (max-width: 640px) {
        .content-idea-card {
          flex: 0 0 72vw;
        }
      }
      .content-idea-card:hover {
        transform: translateY(-4px);
        border-color: rgba(32, 232, 148, 0.35);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3), 0 0 18px rgba(32, 232, 148, 0.12);
      }
      .content-idea-badge {
        display: inline-flex;
        align-self: flex-start;
        padding: 0.25rem 0.58rem;
        border-radius: 999px;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        border: 1px solid rgba(32, 232, 148, 0.25);
        background: rgba(32, 232, 148, 0.1);
        color: #20E894;
      }
      .content-idea-badge[data-variant="hot"] {
        border-color: rgba(255, 99, 99, 0.3);
        background: rgba(255, 99, 99, 0.1);
        color: #FF6363;
      }
      .content-idea-badge[data-variant="algo"] {
        border-color: rgba(99, 153, 255, 0.3);
        background: rgba(99, 153, 255, 0.1);
        color: #6399FF;
      }
      .content-idea-badge[data-variant="quick"] {
        border-color: rgba(255, 199, 0, 0.3);
        background: rgba(255, 199, 0, 0.1);
        color: #FFC700;
      }
      .content-idea-title {
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.5;
        color: #fff;
      }
      .content-idea-effect {
        margin-top: auto;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 0.75rem;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.48);
      }
      .content-idea-effect strong {
        color: #20E894;
        font-weight: 600;
      }
      .content-ideas-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.85rem;
        padding-right: 1.5rem;
      }
      .content-ideas-header h4 {
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
      }
      .content-ideas-hint {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.36);
        animation: hint-pulse 2s ease-in-out infinite;
      }
      @keyframes hint-pulse {
        0%, 100% { opacity: 0.36; }
        50% { opacity: 0.7; }
      }

      /* ── AI 콘텐츠 디렉터 채팅 (Apple / Vercel 감성) ── */
      .dashboard-view-shell.is-chat-route {
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .chat-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 56rem;
        height: calc(100dvh - 90px);
        min-height: 0;
      }
      .chat-builder-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.15rem 0.35rem;
      }
      .chat-builder-heading {
        max-width: 32rem;
      }
      .chat-builder-kicker {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        color: rgba(0, 255, 163, 0.74);
      }
      .chat-builder-title {
        margin-top: 0.45rem;
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.04em;
        color: #ffffff;
      }
      .chat-builder-copy {
        margin-top: 0.4rem;
        color: rgba(226, 232, 240, 0.58);
        line-height: 1.8;
        font-size: 0.86rem;
      }
      .chat-builder-exit {
        flex: 0 0 auto;
        min-height: 40px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.82);
        padding: 0 0.9rem;
        font-size: 0.82rem;
        font-weight: 700;
        transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
      }
      .chat-builder-exit:hover {
        border-color: rgba(0, 255, 163, 0.34);
        background: rgba(0, 255, 163, 0.08);
        transform: translateY(-1px);
      }

      /* 스크롤 영역 */
      .chat-messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 2rem 1.15rem 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
      }
      .chat-messages::-webkit-scrollbar { width: 3px; }
      .chat-messages::-webkit-scrollbar-track { background: transparent; }
      .chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

      /* 메시지 행 */
      .chat-row {
        display: flex;
        padding: 0.7rem 0;
        animation: bubble-in 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }
      .chat-row--user { justify-content: flex-end; }
      .chat-row--ai { align-items: flex-start; gap: 0.8rem; }
      .chat-row--system { justify-content: center; }

      @keyframes bubble-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      /* AI 아바타 */
      .chat-ai-avatar {
        width: 28px;
        height: 28px;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        flex-shrink: 0;
        margin-top: 3px;
      }

      /* 말풍선 */
      .chat-bubble {
        max-width: min(100%, 46rem);
        font-size: 0.95rem;
        line-height: 1.95;
        word-break: break-word;
      }
      /* 사용자 — 미세한 배경, 우측 */
      .chat-bubble--user {
        padding: 0.7rem 1rem;
        border-radius: 20px;
        border-bottom-right-radius: 4px;
        background: rgba(255, 255, 255, 0.06);
        color: #eef2f7;
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      /* AI — 테두리·배경 없음, 텍스트만 */
      .chat-bubble--ai {
        color: #d1d5db;
        padding: 0.1rem 0;
      }
      .chat-ai-name {
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: #00FFA3;
        margin-bottom: 0.55rem;
        opacity: 0.82;
      }

      .chat-markdown {
        max-width: 42rem;
      }

      .chat-markdown > * + * {
        margin-top: 0.9rem;
      }

      .chat-markdown-heading {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: #f8fafc;
      }

      .chat-markdown-paragraph {
        color: rgba(226, 232, 240, 0.92);
        line-height: 1.95;
      }

      .chat-markdown strong {
        color: #f8fafc;
        font-weight: 700;
      }

      .chat-markdown-list {
        display: grid;
        gap: 0.55rem;
        padding-left: 1.1rem;
        color: rgba(226, 232, 240, 0.92);
        line-height: 1.9;
      }

      .chat-markdown-list-item::marker {
        color: rgba(0, 255, 163, 0.72);
      }

      .chat-user-meta {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 0.35rem;
      }

      .chat-free-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.22rem 0.52rem;
        border-radius: 999px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: #00FFA3;
        background: rgba(0, 255, 163, 0.08);
        border: 1px solid rgba(0, 255, 163, 0.16);
      }

      .chat-director-title {
        font-size: 1.12rem;
        font-weight: 700;
        line-height: 1.45;
        color: #f8fafc;
        letter-spacing: -0.03em;
      }

      .chat-director-lead {
        margin-top: 0.65rem;
        max-width: 42rem;
        color: rgba(226, 232, 240, 0.92);
        line-height: 1.95;
      }

      .chat-director-lead strong,
      .chat-director-list strong,
      .chat-question-text strong {
        color: #f8fafc;
        font-weight: 700;
      }

      .chat-director-list {
        display: grid;
        gap: 0.7rem;
        margin-top: 1rem;
      }

      .chat-director-item {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 0.85rem;
        align-items: start;
      }

      .chat-director-item-label {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(0, 255, 163, 0.82);
      }

      .chat-director-item-copy {
        color: rgba(209, 213, 219, 0.92);
        line-height: 1.95;
      }

      .chat-reference-quote {
        margin-top: 1.15rem;
        padding: 0.95rem 1rem 0.95rem 1.05rem;
        border-left: 2px solid rgba(0, 255, 163, 0.34);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
        color: rgba(226, 232, 240, 0.72);
      }

      .chat-reference-label {
        display: block;
        margin-bottom: 0.3rem;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(0, 255, 163, 0.72);
      }

      .chat-reference-source {
        display: inline-block;
        margin-bottom: 0.35rem;
        color: #00FFA3;
        font-weight: 700;
      }

      .chat-question-card {
        margin-top: 1.15rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
      }

      .chat-question-label {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(0, 255, 163, 0.78);
      }

      .chat-question-text {
        margin-top: 0.55rem;
        color: #e5e7eb;
        line-height: 1.9;
      }

      .chat-followup-card {
        margin-top: 0.95rem;
        padding: 0.9rem 0.95rem;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      .chat-followup-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.65rem;
      }

      .chat-followup-title {
        font-size: 0.82rem;
        font-weight: 700;
        color: #f8fafc;
      }

      .chat-followup-copy {
        font-size: 0.82rem;
        line-height: 1.8;
        color: rgba(226, 232, 240, 0.68);
      }

      .chat-followup-form {
        display: flex;
        gap: 0.6rem;
        margin-top: 0.8rem;
      }

      .chat-followup-input {
        flex: 1;
        min-width: 0;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(15, 23, 42, 0.48);
        color: #f8fafc;
        padding: 0.8rem 0.95rem;
        outline: none;
        transition: border-color 180ms ease, background 180ms ease;
      }

      .chat-followup-input::placeholder {
        color: rgba(255, 255, 255, 0.28);
      }

      .chat-followup-input:focus {
        border-color: rgba(0, 255, 163, 0.26);
        background: rgba(15, 23, 42, 0.66);
      }

      .chat-followup-submit {
        flex: 0 0 auto;
        border: none;
        border-radius: 14px;
        padding: 0 1rem;
        background: #00FFA3;
        color: #08130f;
        font-weight: 800;
        cursor: pointer;
        transition: transform 160ms ease, opacity 160ms ease;
      }

      .chat-followup-submit:hover:not(:disabled) {
        transform: translateY(-1px);
        opacity: 0.88;
      }

      .chat-followup-submit:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }

      .chat-followup-done {
        margin-top: 0.8rem;
        font-size: 0.8rem;
        color: rgba(0, 255, 163, 0.72);
      }
      .chat-choice-card {
        margin-top: 0.95rem;
        padding: 1rem;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
        border: 1px solid rgba(255, 255, 255, 0.09);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }
      .chat-choice-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
      }
      .chat-choice-title {
        font-size: 0.84rem;
        font-weight: 700;
        color: #f8fafc;
      }
      .chat-choice-copy {
        margin-top: 0.65rem;
        color: rgba(226, 232, 240, 0.66);
        font-size: 0.82rem;
        line-height: 1.8;
      }
      .chat-choice-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem;
        margin-top: 0.85rem;
      }
      .chat-choice-button {
        border-radius: 16px;
        border: 1px solid rgba(0, 255, 163, 0.16);
        background: rgba(255, 255, 255, 0.035);
        color: rgba(255, 255, 255, 0.88);
        padding: 0.9rem 1rem;
        text-align: left;
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.7;
        transition:
          border-color 180ms ease,
          background 180ms ease,
          transform 180ms ease,
          opacity 180ms ease;
        animation: chat-choice-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      .chat-choice-button:nth-child(2) { animation-delay: 40ms; }
      .chat-choice-button:nth-child(3) { animation-delay: 80ms; }
      .chat-choice-button:hover:not(:disabled) {
        border-color: rgba(0, 255, 163, 0.42);
        background: rgba(0, 255, 163, 0.08);
        transform: translateY(-1px);
      }
      .chat-choice-button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      @keyframes chat-choice-in {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .chat-final-meta {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-top: 1rem;
      }
      .chat-final-title {
        color: rgba(0, 255, 163, 0.9);
        font-size: 0.82rem;
        font-weight: 700;
      }

      /* 타이핑 인디케이터 */
      .chat-typing {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0;
        animation: bubble-in 220ms ease forwards;
      }
      .chat-typing-dots {
        display: flex;
        gap: 3px;
      }
      .chat-typing-dots span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(0, 255, 163, 0.5);
        animation: typing-dot 1.4s ease-in-out infinite;
      }
      .chat-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
      .chat-typing-dots span:nth-child(3) { animation-delay: 0.30s; }
      @keyframes typing-dot {
        0%, 60%, 100% { opacity: 0.2; transform: scale(0.8); }
        30% { opacity: 1; transform: scale(1.2); }
      }
      .chat-typing-label {
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.3);
      }

      /* 에러 시스템 메시지 */
      .chat-bubble--error {
        font-size: 0.75rem;
        color: rgba(252, 165, 165, 0.85);
        background: rgba(220, 38, 38, 0.07);
        border: 1px solid rgba(220, 38, 38, 0.18);
        border-radius: 10px;
        padding: 0.45rem 0.9rem;
        animation: bubble-in 220ms ease forwards;
      }

      /* 하단 입력 영역 */
      .chat-footer {
        flex-shrink: 0;
        width: 100%;
        padding: 0.85rem 1rem 1rem;
        background: linear-gradient(180deg, rgba(10, 10, 10, 0.2), rgba(10, 10, 10, 0.82));
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }

      /* 퀵 버튼 */
      .chat-quick-actions {
        display: flex;
        gap: 0.45rem;
        overflow-x: auto;
        padding-bottom: 0.6rem;
        scrollbar-width: none;
      }
      .chat-quick-actions::-webkit-scrollbar { display: none; }
      .chat-quick-btn {
        flex: 0 0 auto;
        padding: 0.38rem 0.72rem;
        border-radius: 999px;
        border: 1px solid rgba(0, 255, 163, 0.2);
        background: transparent;
        color: rgba(0, 255, 163, 0.7);
        font-size: 0.72rem;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        transition: border-color 160ms, background 160ms, color 160ms;
      }
      .chat-quick-btn:hover {
        border-color: rgba(0, 255, 163, 0.45);
        background: rgba(0, 255, 163, 0.07);
        color: #00FFA3;
      }

      /* 입력창 래퍼 */
      .chat-input-wrap {
        position: relative;
        display: flex;
        align-items: flex-end;
      }
      .chat-input {
        flex: 1;
        min-height: 44px;
        max-height: 130px;
        padding: 0.8rem 3.2rem 1.4rem 1rem;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.035);
        color: #e2e8f0;
        font-size: 0.875rem;
        line-height: 1.7;
        resize: none;
        outline: none;
        font-family: inherit;
        transition: border-color 200ms, background 200ms;
      }
      .chat-input::placeholder { color: rgba(255, 255, 255, 0.25); }
      .chat-input:focus {
        border-color: rgba(0, 255, 163, 0.3);
        background: rgba(255, 255, 255, 0.05);
      }
      .chat-char-counter {
        position: absolute;
        right: 46px;
        bottom: 10px;
        font-size: 0.72rem;
        line-height: 1;
        color: rgba(148, 163, 184, 0.72);
        pointer-events: none;
        transition: color 160ms ease, opacity 160ms ease;
      }
      .chat-char-counter.is-warning {
        color: rgba(251, 146, 60, 0.96);
      }
      .chat-char-counter.is-limit {
        color: rgba(248, 113, 113, 0.98);
      }
      .chat-send-btn {
        position: absolute;
        right: 8px;
        bottom: 8px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: none;
        background: #00FFA3;
        color: #0a1a12;
        font-size: 0.95rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: opacity 160ms, transform 160ms;
        flex-shrink: 0;
      }
      .chat-send-btn:hover:not(:disabled) { opacity: 0.85; transform: scale(1.06); }
      .chat-send-btn:disabled { opacity: 0.3; cursor: not-allowed; }

      /* 비용 힌트 — 입력창 바로 아래 */
      .chat-cost-hint {
        margin-top: 0.48rem;
        font-size: 0.68rem;
        color: rgba(255, 255, 255, 0.28);
        text-align: center;
      }
      .history-plan-card {
        display: grid;
        gap: 1rem;
      }
      .history-plan-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.9rem;
        flex-wrap: wrap;
      }
      .history-plan-source {
        color: rgba(226, 232, 240, 0.42);
        font-size: 0.78rem;
      }
      .history-plan-title {
        color: #ffffff;
        font-size: 1.18rem;
        font-weight: 700;
        letter-spacing: -0.03em;
      }

      /* 웰컴 */
      .chat-welcome {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2.5rem 1rem;
        gap: 0.7rem;
      }
      .chat-welcome-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        margin-bottom: 0.2rem;
      }

      @media (max-width: 640px) {
        .chat-builder-header {
          flex-direction: column;
          align-items: stretch;
        }
        .chat-director-item {
          grid-template-columns: 1fr;
          gap: 0.35rem;
        }

        .chat-followup-form {
          flex-direction: column;
        }

        .chat-followup-submit {
          height: 46px;
        }
        .chat-choice-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ── 일일 자동 AI 조언 카드 ── */
      .advice-daily-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
      }
      .advice-daily-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
      }
      .advice-daily-refresh {
        font-size: 0.66rem;
        color: rgba(255, 255, 255, 0.3);
      }
      .advice-card {
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.03);
        padding: 1.15rem 1.2rem;
        transition: border-color 220ms ease, box-shadow 220ms ease;
        position: relative;
        overflow: hidden;
      }
      .advice-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg, rgba(0, 255, 163, 0.6), rgba(0, 255, 163, 0.1));
        border-radius: 18px 18px 0 0;
        opacity: 0;
        transition: opacity 300ms ease;
      }
      .advice-card.is-read {
        border-color: rgba(0, 255, 163, 0.18);
        background: rgba(0, 255, 163, 0.03);
      }
      .advice-card.is-read::before {
        opacity: 1;
      }
      .advice-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.6rem;
      }
      .advice-card-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.28rem;
        padding: 0.22rem 0.58rem;
        border-radius: 999px;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        border: 1px solid rgba(0, 255, 163, 0.2);
        background: rgba(0, 255, 163, 0.07);
        color: rgba(0, 255, 163, 0.78);
      }
      .advice-card-num {
        font-size: 0.62rem;
        color: rgba(255, 255, 255, 0.22);
        font-weight: 600;
      }
      .advice-card-title {
        font-size: 0.96rem;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.45;
      }
      .advice-card-body {
        margin-top: 0.45rem;
        font-size: 0.82rem;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.54);
      }
      .advice-card-action {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: 0.85rem;
        padding: 0.38rem 0.85rem;
        border-radius: 10px;
        border: 1px solid rgba(0, 255, 163, 0.18);
        background: transparent;
        color: rgba(0, 255, 163, 0.7);
        font-size: 0.74rem;
        font-weight: 700;
        cursor: pointer;
        transition: border-color 180ms, background 180ms, color 180ms;
      }
      .advice-card-action:hover:not([data-done]) {
        border-color: rgba(0, 255, 163, 0.4);
        background: rgba(0, 255, 163, 0.08);
        color: #00FFA3;
      }
      .advice-card-action[data-done] {
        border-color: rgba(0, 255, 163, 0.1);
        color: rgba(0, 255, 163, 0.35);
        cursor: default;
      }
      .advice-complete-banner {
        border-radius: 16px;
        border: 1px solid rgba(0, 255, 163, 0.18);
        background: rgba(0, 255, 163, 0.05);
        padding: 1.1rem 1.25rem;
        text-align: center;
        margin-top: 1rem;
      }
      .advice-complete-banner p:first-child {
        font-size: 0.88rem;
        font-weight: 700;
        color: #00FFA3;
      }
      .advice-complete-banner p:last-child {
        margin-top: 0.3rem;
        font-size: 0.74rem;
        color: rgba(255, 255, 255, 0.38);
      }