/* 자체 호스팅 폰트 — 외부(Google Fonts) 요청을 없애 방문자 IP가 제3자로 전달되지 않게 한다.
   원본은 프로토타입 문서에 내장돼 있던 TTF를 WOFF2로 변환한 것. */
@font-face{font-family:'Cinzel';src:url('fonts/Cinzel-regular.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;}
@font-face{font-family:'Cinzel';src:url('fonts/Cinzel-bold.woff2') format('woff2');
  font-weight:601 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/PlusJakartaSans-regular.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;}
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/PlusJakartaSans-bold.woff2') format('woff2');
  font-weight:601 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Mono';src:url('fonts/SpaceMono-regular.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Mono';src:url('fonts/SpaceMono-bold.woff2') format('woff2');
  font-weight:601 900;font-style:normal;font-display:swap;}

    :root {
      --bg-dark: #070710;
      --bg-card: rgba(18, 18, 34, 0.88);
      --border-card: rgba(255, 255, 255, 0.12);
      --wood: #00F5A0;
      --fire: #FF4757;
      --earth: #FFA502;
      --metal: #E0E6ED;
      --water: #00D2D3;
      --accent-purple: #9b51e0;
      --text-main: #FFFFFF;
      --text-muted: #9494AD;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: var(--bg-dark);
      color: var(--text-main);
      font-family: 'Plus Jakarta Sans', sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      background-image: 
        radial-gradient(circle at 15% 10%, rgba(155, 81, 224, 0.22) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(0, 210, 211, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255, 71, 87, 0.12) 0%, transparent 55%);
      background-attachment: fixed;
    }

    .container {
      max-width: 980px;
      margin: 0 auto;
      padding: 40px 20px 100px;
    }

    header {
      text-align: center;
      margin-bottom: 36px;
    }

    .badge-kitsch {
      display: inline-block;
      padding: 6px 18px;
      background: linear-gradient(90deg, rgba(255, 71, 87, 0.25), rgba(155, 81, 224, 0.25));
      border: 1px solid rgba(255, 117, 140, 0.4);
      border-radius: 999px;
      font-size: 0.8rem;
      font-family: 'Space Mono', monospace;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 16px;
      color: #FF85A2;
      box-shadow: 0 0 20px rgba(255, 71, 87, 0.2);
    }

    h1 {
      font-family: 'Cinzel', serif;
      font-size: clamp(2.4rem, 5.5vw, 3.8rem);
      font-weight: 900;
      letter-spacing: 1.5px;
      background: linear-gradient(135deg, #FFFFFF 20%, #FF9FF3 65%, #00F5A0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 12px;
    }

    p.subtitle {
      color: var(--text-muted);
      font-size: 1.05rem;
      max-width: 620px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* Input Card */
    .glass-card {
      background: var(--bg-card);
      backdrop-filter: blur(24px);
      border: 1px solid var(--border-card);
      border-radius: 28px;
      padding: 32px;
      margin-bottom: 36px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
      position: relative;
    }

    .prefill-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(0, 245, 160, 0.08);
      border: 1px dashed rgba(0, 245, 160, 0.35);
      border-radius: 14px;
      padding: 10px 18px;
      margin-bottom: 24px;
      font-size: 0.85rem;
      font-family: 'Space Mono', monospace;
      color: var(--wood);
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    .input-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .input-group label {
      font-size: 0.8rem;
      font-family: 'Space Mono', monospace;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 1px;
      white-space: nowrap;
    }

    .input-group input, .input-group select {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 14px;
      padding: 13px 15px;
      color: #fff;
      font-size: 0.95rem;
      font-family: inherit;
      outline: none;
      transition: all 0.25s ease;
    }

    .input-group input:focus, .input-group select:focus {
      border-color: var(--wood);
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 0 16px rgba(0, 245, 160, 0.3);
    }

    .btn-reveal {
      width: 100%;
      padding: 20px;
      border: none;
      border-radius: 18px;
      background: linear-gradient(135deg, #FF4757, #9B51E0, #00D2D3);
      background-size: 200% 200%;
      color: #FFF;
      font-family: 'Space Mono', monospace;
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      cursor: pointer;
      box-shadow: 0 12px 35px rgba(155, 81, 224, 0.45);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .btn-reveal:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 16px 45px rgba(155, 81, 224, 0.65);
      background-position: right center;
    }

    /* Process Tracker Bar */
    #progress-tracker {
      display: none;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 14px 20px;
      margin-bottom: 30px;
      font-family: 'Space Mono', monospace;
      font-size: 0.85rem;
      color: #FF9FF3;
      text-align: center;
      letter-spacing: 1px;
      animation: pulseText 2s infinite;
    }

    @keyframes pulseText {
      0%, 100% { opacity: 0.9; }
      50% { opacity: 0.6; }
    }

    /* Stage Canvas */
    #interactive-stage {
      display: none;
    }

    .stage-title {
      text-align: center;
      font-family: 'Cinzel', serif;
      font-size: 1.8rem;
      margin-bottom: 24px;
      letter-spacing: 1px;
    }

    /* Pillars Grid */
    .pillars-wrapper {
      position: relative;
      margin: 20px 0 40px;
      padding: 20px 10px;
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      position: relative;
      z-index: 2;
    }

    .pillar-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: rgba(255, 255, 255, 0.02);
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 22px;
      padding: 20px 10px;
      transition: all 0.4s ease;
      position: relative;
    }

    .pillar-col.highlight-day {
      border: 1.5px solid rgba(0, 245, 160, 0.5);
      background: rgba(0, 245, 160, 0.04);
      box-shadow: 0 0 30px rgba(0, 245, 160, 0.1);
    }

    .pillar-tag {
      font-size: 0.72rem;
      font-family: 'Space Mono', monospace;
      color: var(--text-muted);
      letter-spacing: 1px;
      margin-bottom: 12px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .pillar-role {
      font-size: 0.72rem;
      color: #FF9FF3;
      margin-bottom: 16px;
      text-align: center;
      font-weight: 600;
      height: 20px;
    }

    .realm-label-row {
      font-size: 0.65rem;
      font-family: 'Space Mono', monospace;
      color: #9B51E0;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 4px;
      white-space: nowrap;
    }

    .char-box {
      width: 72px;
      height: 72px;
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: 'Cinzel', serif;
      font-size: 1.85rem;
      font-weight: 800;
      margin: 8px 0;
      opacity: 0;
      transform: scale(0.3) rotate(-8deg);
      transition: all 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      z-index: 5;
    }

    .char-box.revealed {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

    .char-sub {
      font-size: 0.62rem;
      font-family: 'Space Mono', monospace;
      font-weight: 700;
      margin-top: 2px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Horizon Divider */
    .horizon-track {
      position: relative;
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 6px 0;
    }

    .horizon-line {
      position: absolute;
      width: 0%;
      height: 2px;
      background: linear-gradient(90deg, transparent 5%, #9B51E0 20%, #00F5A0 50%, #00D2D3 80%, transparent 95%);
      box-shadow: 0 0 16px #00F5A0;
      transition: width 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    }

    .horizon-pill {
      position: relative;
      z-index: 6;
      background: #090915;
      padding: 5px 16px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      font-family: 'Space Mono', monospace;
      font-size: 0.68rem;
      color: #E0E6ED;
      opacity: 0;
      transition: opacity 0.5s ease;
      letter-spacing: 2px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
    }

    /* Elements */
    .el-wood { background: rgba(0, 245, 160, 0.15); border: 2px solid var(--wood); color: var(--wood); box-shadow: 0 0 22px rgba(0, 245, 160, 0.35); }
    .el-fire { background: rgba(255, 71, 87, 0.15); border: 2px solid var(--fire); color: var(--fire); box-shadow: 0 0 22px rgba(255, 71, 87, 0.35); }
    .el-earth { background: rgba(255, 165, 2, 0.15); border: 2px solid var(--earth); color: var(--earth); box-shadow: 0 0 22px rgba(255, 165, 2, 0.35); }
    .el-metal { background: rgba(224, 230, 237, 0.15); border: 2px solid var(--metal); color: var(--metal); box-shadow: 0 0 22px rgba(224, 230, 237, 0.35); }
    .el-water { background: rgba(0, 210, 211, 0.15); border: 2px solid var(--water); color: var(--water); box-shadow: 0 0 22px rgba(0, 210, 211, 0.35); }

    /* SVG Connecting Beams Layer */
    #connector-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 3;
    }

    /* 5 Elements Energy Orbs & Matrix */
    .elements-section {
      margin: 40px 0;
      padding: 34px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
    }

    .orbs-row {
      display: flex;
      justify-content: space-around;
      margin-bottom: 30px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .orb-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .orb-circle {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      border: 2px solid rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.04);
      transition: all 0.4s ease;
      position: relative;
    }

    .orb-circle.active-pulse {
      transform: scale(1.18);
    }

    .orb-name {
      font-family: 'Space Mono', monospace;
      font-size: 0.75rem;
      font-weight: 700;
    }

    .energy-bars {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .bar-item {
      display: grid;
      grid-template-columns: 100px 1fr 60px;
      align-items: center;
      gap: 16px;
    }

    .bar-label {
      font-family: 'Space Mono', monospace;
      font-size: 0.85rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .bar-track {
      height: 14px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 7px;
      overflow: hidden;
      position: relative;
    }

    .bar-fill {
      height: 100%;
      width: 0%;
      border-radius: 7px;
      transition: width 1.4s cubic-bezier(0.12, 0.9, 0.2, 1);
    }

    .bar-val {
      font-family: 'Space Mono', monospace;
      font-size: 0.9rem;
      color: var(--text-muted);
      text-align: right;
      font-weight: 700;
    }

    /* Interpretation Cards */
    .deck-section {
      margin-top: 50px;
    }

    .card-hero {
      background: linear-gradient(145deg, rgba(26, 26, 48, 0.9), rgba(13, 13, 26, 0.96));
      border: 2px solid rgba(155, 81, 224, 0.4);
      border-radius: 30px;
      padding: 38px;
      margin-bottom: 30px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
      position: relative;
      overflow: hidden;
    }

    .card-hero::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -40%;
      width: 80%;
      height: 80%;
      background: radial-gradient(circle, rgba(0, 245, 160, 0.15), transparent 70%);
      pointer-events: none;
    }

    .totem-badge {
      font-family: 'Space Mono', monospace;
      font-size: 0.75rem;
      color: var(--wood);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .totem-name {
      font-family: 'Cinzel', serif;
      font-size: clamp(1.8rem, 4vw, 2.7rem);
      font-weight: 900;
      color: #FFF;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .totem-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 22px;
    }

    .tag-chip {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 999px;
      padding: 5px 14px;
      font-size: 0.78rem;
      font-family: 'Space Mono', monospace;
    }

    .totem-desc {
      color: #D1D1E4;
      line-height: 1.75;
      font-size: 1.05rem;
      margin-bottom: 24px;
    }

    .insights-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 20px;
    }

    .insight-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 22px;
      padding: 26px;
      transition: all 0.3s ease;
    }

    .insight-card:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.25);
      transform: translateY(-3px);
    }

    .insight-header {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Space Mono', monospace;
      font-size: 0.78rem;
      color: #FF9FF3;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .insight-title {
      font-family: 'Cinzel', serif;
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 10px;
      color: #FFF;
    }

    .insight-text {
      color: var(--text-muted);
      font-size: 0.92rem;
      line-height: 1.65;
    }

    .cta-area {
      display: flex;
      gap: 16px;
      margin-top: 40px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-secondary {
      padding: 15px 30px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      color: #fff;
      font-family: 'Space Mono', monospace;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.16);
      transform: translateY(-2px);
    }

    /* Floating Toast Notification */
    .toast-msg {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(80px);
      background: linear-gradient(135deg, rgba(155, 81, 224, 0.95), rgba(0, 210, 211, 0.95));
      color: #fff;
      padding: 12px 24px;
      border-radius: 999px;
      font-family: 'Space Mono', monospace;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 1px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
      opacity: 0;
      pointer-events: none;
      transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      z-index: 1000;
      white-space: nowrap;
    }

    .toast-msg.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    .orb-item {
      transition: transform 0.2s ease;
    }
    .orb-item:hover {
      transform: translateY(-3px) scale(1.05);
    }

    .desktop-text { display: inline; }
    .mobile-text { display: none; }

    @media (max-width: 680px) {
      .desktop-text { display: none; }
      .mobile-text { display: inline; }

      html, body {
        overflow-x: hidden;
      }

      .container {
        padding: 24px 12px 60px;
        max-width: 100%;
      }

      header {
        margin-bottom: 24px;
      }

      .badge-kitsch {
        font-size: 0.72rem;
        padding: 5px 14px;
        letter-spacing: 1px;
        margin-bottom: 12px;
      }

      h1 {
        font-size: clamp(1.85rem, 7.5vw, 2.8rem);
        margin-bottom: 8px;
        letter-spacing: 0.5px;
      }

      p.subtitle {
        font-size: 0.88rem;
        line-height: 1.5;
        padding: 0 4px;
      }

      /* Cards and Containers */
      .glass-card {
        padding: 18px 12px;
        border-radius: 20px;
        margin-bottom: 24px;
      }

      .prefill-banner {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        padding: 8px 12px;
        font-size: 0.72rem;
        margin-bottom: 16px;
        line-height: 1.4;
      }

      /* Form inputs - 2 column grid on mobile */
      .form-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 18px;
      }

      .input-group label {
        font-size: 0.68rem;
        letter-spacing: 0.5px;
        white-space: nowrap;
      }

      .input-group input, .input-group select {
        font-size: 16px; /* Prevents auto-zoom on iOS */
        padding: 10px 10px;
        border-radius: 10px;
      }

      .btn-reveal {
        padding: 14px 10px;
        font-size: clamp(0.72rem, 3.3vw, 1.05rem);
        letter-spacing: 0.5px;
        border-radius: 14px;
        white-space: nowrap;
        text-align: center;
      }

      /* Stage Title & Progress */
      .stage-title {
        font-size: 1.35rem;
        margin-bottom: 16px;
        white-space: nowrap;
      }

      #progress-tracker {
        padding: 10px 12px;
        font-size: 0.75rem;
        border-radius: 12px;
        margin-bottom: 20px;
      }

      /* 4 Pillars Section */
      .pillars-wrapper {
        margin: 10px 0 20px;
        padding: 10px 0;
      }

      .pillars-grid {
        gap: 6px;
      }

      .pillar-col {
        padding: 12px 3px;
        border-radius: 14px;
      }

      .pillar-tag {
        font-size: clamp(0.48rem, 1.9vw, 0.65rem);
        letter-spacing: 0.5px;
        margin-bottom: 4px;
        text-align: center;
        white-space: nowrap;
      }

      .pillar-role {
        font-size: clamp(0.55rem, 2.1vw, 0.68rem);
        height: auto;
        min-height: 28px;
        margin-bottom: 6px;
        line-height: 1.2;
        word-break: break-word;
      }

      .realm-label-row {
        font-size: 0.52rem;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
      }

      .char-box {
        width: clamp(42px, 12.5vw, 60px);
        height: clamp(42px, 12.5vw, 60px);
        border-radius: 12px;
        font-size: clamp(1.25rem, 4.2vw, 1.6rem);
        margin: 4px 0;
      }

      .char-sub {
        font-size: 0.5rem;
        letter-spacing: 0;
      }

      .horizon-track {
        height: 32px;
        margin: 2px 0;
      }

      .horizon-pill {
        font-size: 0.56rem;
        padding: 4px 10px;
        letter-spacing: 0.5px;
        border-radius: 14px;
        max-width: 96%;
        display: inline-block;
        white-space: normal;
      }

      /* 5 Elements Cocktail */
      .elements-section {
        margin: 24px 0;
        padding: 18px 12px;
        border-radius: 20px;
      }

      .orbs-row {
        margin-bottom: 20px;
        gap: 4px;
        justify-content: space-between;
      }

      .orb-circle {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
      }

      .orb-name {
        font-size: 0.65rem;
      }

      .energy-bars {
        gap: 12px;
      }

      .bar-item {
        grid-template-columns: 68px 1fr 48px;
        gap: 8px;
      }

      .bar-label {
        font-size: 0.72rem;
        gap: 4px;
      }

      .bar-track {
        height: 10px;
        border-radius: 5px;
      }

      .bar-fill {
        border-radius: 5px;
      }

      .bar-val {
        font-size: 0.75rem;
      }

      /* Interpretation Deck & Hero Card */
      .deck-section {
        margin-top: 30px;
      }

      .card-hero {
        padding: 20px 14px;
        border-radius: 20px;
        margin-bottom: 20px;
      }

      .totem-badge {
        font-size: 0.68rem;
        letter-spacing: 1px;
        margin-bottom: 6px;
      }

      .totem-name {
        font-size: clamp(1.35rem, 5.2vw, 2.2rem);
        margin-bottom: 10px;
        line-height: 1.25;
        word-break: break-word;
      }

      .totem-pills {
        gap: 6px;
        margin-bottom: 16px;
      }

      .tag-chip {
        padding: 4px 10px;
        font-size: 0.7rem;
      }

      .totem-desc {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 16px;
      }

      /* Insights Grid */
      .insights-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .insight-card {
        padding: 18px 14px;
        border-radius: 16px;
      }

      .insight-header {
        font-size: 0.72rem;
        margin-bottom: 6px;
      }

      .insight-title {
        font-size: 1.02rem;
        margin-bottom: 8px;
      }

      .insight-text {
        font-size: 0.86rem;
        line-height: 1.55;
      }

      /* Call to Action Buttons */
      .cta-area {
        flex-direction: column;
        gap: 10px;
        margin-top: 24px;
      }

      .btn-secondary {
        width: 100%;
        padding: 14px;
        font-size: 0.85rem;
        text-align: center;
      }
    }

    @media (max-width: 380px) {
      .pillar-col {
        padding: 8px 1px;
      }
      .char-box {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
      }
      .char-sub {
        display: none; /* Hide sub-text on ultra-small screens */
      }
      .bar-item {
        grid-template-columns: 60px 1fr 40px;
      }
      .orb-circle {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
      }
    }

/* ==========================================================================
   2026-09-10 — 언어 전환 도입에 맞춘 UI 정리
   ========================================================================== */

/* 언어 전환 — 오른쪽 위 세그먼트 버튼 */
.lang-switch{
  display:flex; gap:2px; justify-content:flex-end;
  margin:0 0 18px auto; width:fit-content;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px; padding:3px;
}
.lang-btn{
  border:0; cursor:pointer; border-radius:999px;
  padding:7px 15px; font-family:'Space Mono',monospace;
  font-size:.76rem; font-weight:700; letter-spacing:.5px;
  background:transparent; color:var(--text-muted);
  transition:background .2s ease,color .2s ease;
}
.lang-btn:hover{ color:#fff; }
.lang-btn.is-active{
  background:linear-gradient(135deg,rgba(155,81,224,.85),rgba(0,210,211,.75));
  color:#fff; box-shadow:0 4px 14px rgba(155,81,224,.35);
}

/* 개인정보 안내 — 배너보다 조용하게 */
.privacy-note{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(0,245,160,.06);
  border:1px solid rgba(0,245,160,.22);
  border-radius:14px; padding:11px 16px; margin-bottom:24px;
  font-size:.84rem; line-height:1.5; color:#BFEFD8;
}
.privacy-note b{ color:var(--wood); }
.privacy-icon{ font-size:1rem; }
.privacy-text{ flex:1 1 240px; }
.privacy-badge{
  font-family:'Space Mono',monospace; font-size:.68rem;
  letter-spacing:.5px; text-transform:uppercase;
  color:var(--wood); border:1px solid rgba(0,245,160,.35);
  border-radius:999px; padding:3px 10px; white-space:nowrap;
}

.span-all{ grid-column:1 / -1; }

/* 서머타임 체크 줄 */
.dst-row{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px; padding:13px 16px; margin-bottom:22px;
  font-size:.84rem; line-height:1.55; color:#C6C6D8;
}
.dst-row input{ width:auto; margin:2px 0 0; cursor:pointer; accent-color:var(--wood); flex:none; }
.dst-row em{ display:block; font-style:normal; color:var(--text-muted); font-size:.78rem; margin-top:3px; }

/* 결과 단계 제목 */
.stage-sub{
  text-align:center; color:var(--text-muted);
  font-size:.9rem; margin:-14px 0 26px;
}
.stage-title.small{ font-size:1.35rem; margin-bottom:22px; }
.pillar-tag.accent{ color:var(--wood); font-weight:700; }
.pillar-role.accent{ color:var(--wood); }
.horizon-pill-row{ text-align:center; margin:-6px 0 6px; }

/* 오행 오브를 버튼으로 (키보드 접근 가능) */
.orb-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:0; cursor:pointer; padding:4px 6px;
  border-radius:14px; transition:transform .2s ease;
  font-family:inherit;
}
.orb-item:hover{ transform:translateY(-3px) scale(1.04); }
.orb-circle{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; transition:transform .4s ease;
}

/* 해석 카드 */
#interpretation-deck{ opacity:0; transition:opacity .8s ease; }
.totem-hanja{
  display:block; font-size:.5em; font-weight:400;
  color:var(--text-muted); margin-top:6px; letter-spacing:.5px;
}
.totem-name{ flex-direction:column; align-items:flex-start; }
.btn-secondary.accent{
  background:linear-gradient(135deg,rgba(255,71,87,.32),rgba(155,81,224,.32));
  border-color:rgba(255,117,140,.55);
}

/* 푸터 */
footer{
  margin-top:56px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center; font-family:'Space Mono',monospace;
  font-size:.78rem; color:var(--text-muted); line-height:1.8;
}
footer a{ color:var(--wood); text-decoration:underline; }
footer .fine{ font-size:.7rem; color:#666; margin-top:8px; }

/* 진행 표시 */
#progress-tracker{ display:none; }

/* 접근성 — 키보드 초점을 또렷하게 */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible{
  outline:2px solid var(--wood);
  outline-offset:3px;
}

/* 움직임을 줄이도록 설정한 사용자에게는 애니메이션을 멈춘다 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .char-box{ opacity:1 !important; transform:none !important; }
}

@media (max-width:680px){
  .lang-switch{ margin-bottom:14px; }
  .privacy-note{ font-size:.78rem; padding:10px 12px; }
  .privacy-badge{ font-size:.62rem; }
  .dst-row{ font-size:.78rem; padding:11px 12px; }
  .stage-sub{ font-size:.82rem; margin:-10px 0 20px; }
  .orb-circle{ width:44px; height:44px; font-size:1.1rem; }
  footer{ margin-top:40px; font-size:.72rem; }
}

/* ==========================================================================
   해석 카드 — 네 기둥을 같은 크기로. 일주만 레어 카드처럼 도드라지게.
   ========================================================================== */
.totem-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px; margin-bottom:12px;
}
.totem-card{
  position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:26px 20px 24px;
  background:linear-gradient(160deg,rgba(26,26,48,.9),rgba(13,13,26,.96));
  border:1px solid rgba(255,255,255,.12); border-radius:24px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.totem-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.24); }

.totem-card-head{ margin-bottom:14px; }
.totem-pillar{
  display:block; font-family:'Space Mono',monospace; font-size:.72rem;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted);
}
.totem-role{ display:block; font-size:.74rem; color:#FF9FF3; margin-top:3px; }

.totem-avatar{
  width:82px; height:82px; border-radius:50%; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center; font-size:2.4rem;
  background:radial-gradient(circle,rgba(155,81,224,.28) 0%,transparent 70%);
  border:2px solid rgba(255,255,255,.18);
}
.totem-title{
  font-family:'Cinzel',serif; font-size:1.12rem; font-weight:800;
  color:#fff; line-height:1.3; margin-bottom:6px;
}
.totem-gz{
  font-family:'Space Mono',monospace; font-size:.76rem;
  color:var(--text-muted); margin-bottom:12px; letter-spacing:.3px;
}
.totem-text{ font-size:.88rem; line-height:1.62; color:#C9C9DC; }

/* 일주 — 기준이 되는 자리라 트레이딩 카드의 특수 인쇄처럼 도드라지게 한다.
   '희귀하다'는 뜻이 아니라 '여기가 중심'이라는 표시다. */
.totem-card.is-self{
  border-color:rgba(0,245,160,.55);
  background:linear-gradient(160deg,rgba(0,245,160,.08),rgba(13,13,26,.97));
  box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 34px rgba(0,245,160,.18);
}
/* 홀로그램 박 — 표면을 천천히 훑고 지나간다 */
.totem-card.is-self::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(115deg,
    transparent 32%,
    rgba(255,255,255,.10) 44%,
    rgba(0,245,160,.20) 50%,
    rgba(155,81,224,.16) 56%,
    transparent 68%);
  background-size:260% 260%;
  animation:foilSweep 7s ease-in-out infinite;
}
@keyframes foilSweep{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
/* 네 모서리에 옅은 각인 */
.totem-card.is-self::after{
  content:''; position:absolute; inset:7px; border-radius:18px;
  pointer-events:none; border:1px solid rgba(0,245,160,.22);
}
.totem-card.is-self > *{ position:relative; z-index:1; }

.totem-card.is-self .totem-avatar{
  border-color:var(--wood);
  box-shadow:0 0 26px rgba(0,245,160,.42);
  background:radial-gradient(circle,rgba(0,245,160,.26) 0%,transparent 70%);
}
.totem-card.is-self .totem-pillar{ color:var(--wood); font-weight:700; }
.totem-card.is-self .totem-title{ color:#EAFFF6; }
.totem-card.is-self .totem-note{ color:#8FBFAA; }

@media (prefers-reduced-motion:reduce){
  .totem-card.is-self::before{ animation:none; background-position:50% 50%; }
}

@media (max-width:680px){
  .totem-grid{ grid-template-columns:1fr; gap:14px; }
  .totem-card{ padding:20px 16px; }
  .totem-avatar{ width:66px; height:66px; font-size:2rem; }
  .totem-title{ font-size:1.05rem; }
}

/* 기둥이 무엇을 보는 자리인지 한 줄 부연 */
.totem-role{ font-weight:600; }
.totem-note{
  display:block; margin-top:6px;
  font-size:.7rem; line-height:1.45; color:var(--text-muted);
  max-width:22ch; margin-left:auto; margin-right:auto;
}

/* 입력 범위 안내와 자동 교정 표시 */
.field-hint{
  font-family:'Space Mono',monospace; font-size:.66rem;
  color:var(--text-muted); letter-spacing:.3px; margin-top:-2px;
}
/* 범위를 벗어나 값이 되돌려졌을 때 잠깐 깜빡인다 */
@keyframes fixedFlash{
  0%   { border-color:var(--earth); box-shadow:0 0 0 3px rgba(255,165,2,.28); }
  100% { border-color:rgba(255,255,255,.16); box-shadow:none; }
}
.was-fixed{ animation:fixedFlash 1.1s ease-out 1; }
@media (prefers-reduced-motion:reduce){ .was-fixed{ animation:none; } }