:root{
      --background-primary-color:#050814;
      --background-secondary-color:#08152a;
      --card-background-color: rgba(255,255,255,.06);
      --card-background-secondary-color: rgba(255,255,255,.10);
      --border-line-color: rgba(255,255,255,.10);
      --primary-text-color: rgba(255,255,255,.92);
      --muted-text-color: rgba(255,255,255,.68);
      --secondary-muted-text-color: rgba(255,255,255,.56);
      --accent-primary-color:#6ee7ff;
      --accent-secondary-color:#60a5fa;
      --highlight-gold-color:#c59d5f;
      --shadow-effect: 0 18px 70px rgba(0,0,0,.45);
      --border-radius-value: 18px;
      --max-content-width: 860px;
      --safe-area-inset-bottom: env(safe-area-inset-bottom);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:'Noto Sans KR', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
      color:var(--primary-text-color);
      background:
        radial-gradient(1100px 700px at 20% 0%, rgba(110,231,255,.10), transparent 60%),
        radial-gradient(900px 520px at 80% 10%, rgba(96,165,250,.12), transparent 58%),
        radial-gradient(800px 600px at 60% 90%, rgba(197,157,95,.10), transparent 60%),
        linear-gradient(180deg, var(--background-primary-color), var(--background-secondary-color));
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed; inset:0;
      background-image:
        linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
      background-size: 26px 26px;
      opacity:.22;
      pointer-events:none;
      mask-image: radial-gradient(70% 50% at 50% 10%, rgba(0,0,0,1), rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 78%);
    }

    .main-container{max-width:var(--max-content-width); margin:0 auto; padding: 18px 16px calc(120px + var(--safe-area-inset-bottom));}
    .top-navigation-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 8px 2px 18px;}
    .brand-identity{display:flex; align-items:center; gap:10px; min-width:0;}
    .brand-identity-badge{
      width:38px; height:38px; border-radius:12px;
      background: linear-gradient(135deg, rgba(110,231,255,.35), rgba(96,165,250,.25));
      border:1px solid rgba(255,255,255,.12);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      display:flex; align-items:center; justify-content:center;
      font-weight:900; letter-spacing:.5px;
    }
    .brand-identity-name{font-weight:800; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .brand-identity-subtitle{font-size:12.5px; color:var(--muted-text-color); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .navigation-links{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
    .navigation-links a{
      text-decoration:none; color:var(--muted-text-color); font-size:12.5px;
      padding:8px 10px; border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
    }
    .navigation-links a:hover{color:var(--primary-text-color); border-color: rgba(255,255,255,.18);}

    .hero-banner{
      position:relative;
      border-radius: 22px;
      padding: 18px 16px 16px;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.12);
      box-shadow: var(--shadow-effect);
      overflow:hidden;
    }
    .hero-banner::after{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(520px 220px at 20% 10%, rgba(110,231,255,.16), transparent 60%),
                  radial-gradient(420px 240px at 80% 15%, rgba(96,165,250,.16), transparent 60%),
                  radial-gradient(420px 260px at 60% 95%, rgba(197,157,95,.12), transparent 58%);
      pointer-events:none;
      opacity:.9;
    }
    .hero-banner-grid-layout{position:relative; display:grid; gap:14px; grid-template-columns: 1fr; z-index:1;}
    .hero-banner-left-section{display:flex; gap:14px; align-items:center;}
    .orbital-visualization{
      position:relative;
      width: 132px; height: 132px; flex: 0 0 auto;
      display:flex; align-items:center; justify-content:center;
    }
    .orbital-visualization-ring{position:absolute; inset:12px; border-radius:50%; border:1px dashed rgba(255,255,255,.22);}
    .orbital-visualization-inner-ring{position:absolute; inset:28px; border-radius:50%; border:1px solid rgba(110,231,255,.18);}
    .orbital-visualization-center{
      width: 74px; height: 74px; border-radius: 50%;
      border: 2px solid rgba(197,157,95,.75);
      background: rgba(255,255,255,.06);
      box-shadow: 0 16px 50px rgba(0,0,0,.45);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center;
      overflow:hidden;
    }
    .orbital-visualization-center img{width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border:1px solid rgba(255,255,255,.18);}
    .orbital-visualization-center b{display:block; font-size:11px; margin-top:6px; letter-spacing:.2px;}
    .orbital-visualization-satellite{
      position:absolute;
      width: 36px; height: 36px; border-radius: 12px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.88);
      font-size: 12px;
      box-shadow: 0 10px 30px rgba(0,0,0,.32);
    }
    .orbital-visualization-satellite.position-1{top:10px; left:14px}
    .orbital-visualization-satellite.position-2{top:16px; right:12px}
    .orbital-visualization-satellite.position-3{bottom:12px; left:12px}
    .orbital-visualization-satellite.position-4{bottom:8px; right:14px}

    .hero-banner-title{margin:0; font-size:18px; line-height:1.25; letter-spacing:-.1px;}
    .hero-banner-description{margin:6px 0 0; font-size:13.5px; color:var(--muted-text-color); line-height:1.55;}
    .hero-banner-tag-container{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px;}
    .feature-tag{
      display:inline-flex; align-items:center; gap:6px;
      font-size:12.5px; color: rgba(255,255,255,.86);
      padding:8px 10px; border-radius: 999px;
      background: rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.12);
    }
    .feature-tag img{width:16px; height:16px; opacity:.92}

    .content-panel{margin-top:14px; display:grid; gap:12px; grid-template-columns: 1fr;}
    .content-card{
      border-radius: 22px;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.12);
      box-shadow: 0 16px 60px rgba(0,0,0,.35);
      overflow:hidden;
    }
    .content-card .content-card-inner{padding:16px;}
    .section-title-heading{margin:0; font-size:16px; letter-spacing:-.1px;}
    .paragraph-content{margin:10px 0 0; color: var(--muted-text-color); font-size:13.5px; line-height:1.7}
    .grid-layout-two-columns{display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px;}
    /* preview sections: alternated image/content + subtle tilt (tech look) */
    .alternating-rows-container{margin-top:12px; display:flex; flex-direction:column; gap:14px;}
    .alternating-single-row{display:grid; grid-template-columns:1fr; gap:12px; align-items:center;}
    .alternating-media-section{
      position:relative;
      border-radius: 18px;
      overflow:hidden;
      background: rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.14);
      box-shadow: 0 18px 60px rgba(0,0,0,.38);
      transform-origin: 40% 60%;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .alternating-media-section::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(520px 260px at 10% 10%, rgba(110,231,255,.10), transparent 60%),
                  radial-gradient(520px 260px at 90% 15%, rgba(96,165,250,.10), transparent 60%),
                  linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
      pointer-events:none;
    }
    .alternating-media-thumbnail{
      width:100%;
      aspect-ratio: 16 / 9;
      background: rgba(0,0,0,.22);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .alternating-media-thumbnail img{width:100%; object-fit:contain;}
    .alternating-text-content{
      border-radius: 18px;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.12);
      padding: 14px;
    }
    .alternating-text-content h3{margin:0; font-size:14px; letter-spacing:-.1px}
    .alternating-text-content .alternating-text-description{margin:8px 0 0; font-size:12.8px; color: rgba(255,255,255,.78); line-height:1.6}
    .alternating-feature-list{margin:10px 0 0; padding-left: 18px; color: rgba(255,255,255,.70); font-size:12.5px; line-height:1.55}
    .alternating-feature-list li{margin:4px 0;}
    .tilt-effect-left{transform: rotate(-1.6deg) translateX(-6px);}
    .tilt-effect-right{transform: rotate(1.6deg) translateX(6px);}
    @media (hover:hover){
      .alternating-media-section:hover{transform: rotate(0deg) translateX(0); border-color: rgba(110,231,255,.22); box-shadow: 0 22px 80px rgba(0,0,0,.48);}
    }
    @media (prefers-reduced-motion: reduce){
      .alternating-media-section{transition:none;}
      .tilt-effect-left,.tilt-effect-right{transform:none;}
    }



    .media-presentation-section{
      display:flex;
      gap:12px;
      flex-direction:column;
      align-items:stretch;
      padding:12px; border-radius: 18px;
      background: rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.10);
    }
    .media-presentation-thumbnail{
      width: 100%;
      height: 168px;
      border-radius: 14px;
      overflow:hidden; border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      flex: 0 0 auto;
    }
    .media-presentation-thumbnail img{width:100%; height:100%; object-fit:cover}
    .media-presentation-section h3{margin:0; font-size:13.5px}
    .media-presentation-section .media-description-text{margin:6px 0 0; font-size:12.5px; color: var(--secondary-muted-text-color); line-height:1.55}

    .important-notice-box{
      margin-top:12px;
      padding:12px;
      border-radius: 18px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
    }
    .important-notice-title{font-weight:900; margin-bottom:8px}
    .user-instruction-text{margin-top:14px; font-weight:800; color: rgba(255,255,255,.88)}

    .user-choice-container{margin-top:10px; display:grid; gap:10px;}
    .single-choice-option{
      display:flex; align-items:center; gap:10px;
      padding:12px 12px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      cursor:pointer;
    }
    .single-choice-option:hover{border-color: rgba(110,231,255,.20)}
    .single-choice-option input{width:18px; height:18px; accent-color: var(--accent-secondary-color);}
    .choice-option-badge{
      width: 30px; height: 30px; border-radius: 12px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(110,231,255,.12);
      border:1px solid rgba(110,231,255,.18);
      font-weight:900;
    }
    .choice-option-label-text{font-size:13.5px; color: rgba(255,255,255,.90)}

    .hint-text{margin-top:12px; color: var(--muted-text-color); font-size:13px; line-height:1.65}
    .call-to-action-section{margin-top:14px}
    .primary-action-button{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border:0;
      border-radius: 16px;
      padding: 14px 14px;
      font-weight:900;
      font-size: 15px;
      color: #08152a;
      background: linear-gradient(135deg, var(--accent-primary-color), var(--accent-secondary-color));
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
      cursor:pointer;
    }
    
    .button-logo-image{
      width:22px;
      height:22px;
      border-radius:7px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.12);
      padding:2px;
      object-fit: contain;
      flex: 0 0 auto;
    }
    .button-text-content{display:inline-block}

    @keyframes button-bounce-animation{
      0%, 78%{ transform: translateY(0); }
      82%{ transform: translateY(-5px); }
      86%{ transform: translateY(0); }
      90%{ transform: translateY(-2px); }
      100%{ transform: translateY(0); }
    }
    .bouncing-animation-class{
      animation: button-bounce-animation 3.2s ease-in-out infinite;
      will-change: transform;
    }
    @media (prefers-reduced-motion: reduce){
      .bouncing-animation-class{animation:none}
    }
.primary-action-button:active{transform: translateY(1px)}
    .button-row-layout{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
    .secondary-action-button{
      display:inline-flex; align-items:center; gap:8px;
      padding: 10px 12px; border-radius: 999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.86);
      text-decoration:none;
      font-size: 12.5px;
      cursor: pointer;
    }
    .secondary-action-button img{width:16px; height:16px}

    .sticky-bottom-action-bar{
      position:fixed; left:0; right:0; bottom:0;
      padding: 10px 12px calc(10px + var(--safe-area-inset-bottom));
      background: linear-gradient(180deg, rgba(5,8,20,0), rgba(5,8,20,.78) 35%, rgba(5,8,20,.92));
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255,255,255,.10);
      z-index: 50;
    }
    .sticky-bottom-action-inner{max-width:var(--max-content-width); margin:0 auto;}
    .sticky-bottom-action-bar .primary-action-button{border-radius: 18px}

    .page-footer{margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; color: var(--secondary-muted-text-color); font-size:12.5px}
    .page-footer a{color: var(--muted-text-color); text-decoration:none; cursor: pointer;}
    .page-footer a:hover{color: var(--primary-text-color)}

    #notification-toast{
      position: fixed; left: 50%; bottom: 92px;
      transform: translateX(-50%);
      background: rgba(0,0,0,.72);
      border: 1px solid rgba(255,255,255,.18);
      color: rgba(255,255,255,.92);
      padding: 10px 12px;
      border-radius: 999px;
      font-size: 12.5px;
      opacity: 0;
      pointer-events:none;
      transition: opacity .18s ease;
      z-index: 60;
      max-width: 92vw;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    #notification-toast.show{opacity:1}

    /* モーダルダイアログスタイル */
    .legal-document-modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    
    .legal-document-modal-overlay.active {
      display: flex;
    }
    
    .legal-document-modal-container {
      background: rgba(5, 8, 20, 0.95);
      border: 1px solid rgba(110, 231, 255, 0.15);
      border-radius: var(--border-radius-value);
      width: 100%;
      max-width: 700px;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: var(--shadow-effect);
      padding: 24px;
      position: relative;
    }
    
    .legal-document-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .legal-document-modal-title {
      font-size: 18px;
      font-weight: 800;
      margin: 0;
      color: var(--accent-primary-color);
    }
    
    .legal-document-modal-close-button {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--muted-text-color);
      font-size: 18px;
    }
    
    .legal-document-modal-close-button:hover {
      background: rgba(255, 255, 255, 0.12);
      color: var(--primary-text-color);
    }
    
    .legal-document-modal-content {
      color: var(--muted-text-color);
      font-size: 14px;
      line-height: 1.7;
    }
    
    .legal-document-modal-content h2 {
      color: var(--primary-text-color);
      font-size: 16px;
      margin-top: 24px;
      margin-bottom: 12px;
    }
    
    .legal-document-modal-content h3 {
      color: var(--primary-text-color);
      font-size: 15px;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    
    .legal-document-modal-content p {
      margin-bottom: 16px;
    }
    
    .legal-document-modal-content ul {
      padding-left: 20px;
      margin-bottom: 16px;
    }
    
    .legal-document-modal-content li {
      margin-bottom: 8px;
    }
    
    .legal-document-modal-content strong {
      color: var(--primary-text-color);
    }

    /* Mobile hero layout tuning: avoid awkward vertical centering and balance the tag pills */
    @media (max-width: 779px){
      .hero-banner{padding: 16px 14px 14px;}

      /* Mobile: avatar above title, centered (cleaner hierarchy) */
      .hero-banner-left-section{flex-direction:column; align-items:stretch; gap:12px;}
      .orbital-visualization{width: 104px; height: 104px; margin: 0 auto;}
      .orbital-visualization-center{width: 78px; height: 78px;}
      .orbital-visualization-center img{width: 50px; height: 50px;}
      .orbital-visualization-center b{margin-top: 6px; font-size: 12.5px;}

      .hero-banner-left-section > div:last-child{ text-align:center; }
      .hero-banner-title{font-size: 19px; line-height: 1.28;}
      .hero-banner-description{font-size: 13.4px; line-height: 1.62; margin-left:auto; margin-right:auto; max-width: 34rem;}

      /* Mobile: card-style 2-column feature buttons */
      .hero-banner-tag-container{margin-top: 12px; display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
      .feature-tag{
        width:100%;
        justify-content:flex-start;
        text-align:left;
        padding: 12px 10px;
        border-radius: 14px;
        min-height: 46px;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
      }
      .feature-tag img{width:18px; height:18px;}
    }
@media (min-width: 780px){
      .hero-banner-grid-layout{grid-template-columns: 1fr;}
      .grid-layout-two-columns{grid-template-columns: 1fr 1fr;}
      .media-presentation-section{flex-direction:row; align-items:center;}
      .media-presentation-thumbnail{width: 168px; height: 112px;}

      .alternating-single-row{grid-template-columns: 1.25fr .75fr; gap:14px;}
      .alternating-single-row.reverse-order{grid-template-columns: .75fr 1.25fr;}
      .alternating-single-row.reverse-order .alternating-media-section{order:2;}
      .alternating-single-row.reverse-order .alternating-text-content{order:1;}
  }