/* 버튼 스타일 */
:root{
    --primary: #8F949F; 
    --primary-hover: #404859;
    --primary-press: #20242d;
    --secondary: #303030;
    --secondary-hover: #EE6811;
    --secondary-press: #ca5100;
    --tertiary: #EE6811;
    --tertiary-hover: #FF7B26;
    --tertiary-press: #ca5100;
    --disabled: #D5D6D9;
    --white:#fff;
  }
  .btn{
    height: 5rem; /* 3.125rem → 50px */
    padding: 0 2rem; /* 1.25rem → 20px */
    border-radius: 159.84rem; /* 999px → 그대로 둬도 됨 */
    font-size:1.8rem;
    transition: transform .03s ease, background-color .15s, color .15s, border-color .15s;
  }
  
  /* Filled */
  .btn--primary{ background: var(--primary); color: var(--white); border:1px solid var(--primary); }
  .btn--primary:hover{ background: var(--primary-hover);border:1px solid var(--primary-hover);}
  .btn--primary:active{ background: var(--primary-press); border:1px solid var(--primary-press);}
  
  /* Outline */
  .btn--secondary{ background: var(--white); color: var(--secondary); border:1px solid var(--secondary); }
  .btn--secondary:hover{color: var(--secondary-hover); border:1px solid var(--secondary-hover); }
  .btn--secondary:active{color: var(--secondary-press); border:1px solid var(--secondary-press); }
  
  /* Solid (Dark) */
  .btn--tertiary{ background: var(--tertiary); color: var(--white); border:1px solid var(--tertiary); }
  .btn--tertiary:hover{background: var(--tertiary-hover); color: var(--white); border:1px solid var(--tertiary-hover); }
  .btn--tertiary:active{background: var(--tertiary-press); color: var(--white); border:1px solid var(--tertiary-press); }
  
  .cta-btn{
      display: inline-flex;
      padding: 0.8rem 1.6rem; /* 0.5rem 1rem */
      align-items: center;
      gap: 1rem; /* 0.625rem */
      border-radius:159.84rem;
      border: 1px solid var(--Color__EE6811, #EE6811);
      background: #FFF;
      transition: transform .03s ease, background-color .15s, color .15s, border-color .15s;
  }
  .cta-btn:hover{ background: var(--tertiary); }
  .cta-btn:hover .cta__title{ color: #FFF; }
  
  .cta--lg {
    font-size: 1.7rem;
    padding: 0.8rem 1.2rem;
    gap: 1rem;
}
  .cta:hover{ filter: brightness(0.97) }
  .cta:active{ box-shadow: var(--shadow-press); transform: translateY(1px) }
  
  .cta__text{display:flex; text-align:left}
  .cta__title{
      color: var(--Color__EE6811, #EE6811);
      font-size: 1.6rem; /* 1rem */
      font-weight: 700;
      line-height: 100%; /* 1.6rem */
      letter-spacing: -0.064rem; /* -0.04rem */
  }
  .cta--lg .cta__title{
    font-size: clamp(1.5rem, calc(15px + (100vw - 768px) * 0.00441), 1.8rem);
}
  .cta__sub{font-weight:500; font-size:2.4rem; opacity:.9} /* 15px → 1.5rem → 2.4rem */
  .cta__icon{
      display: flex;
      width: 3.2rem; /* 2rem */
      height: 3.2rem; /* 2rem */
      justify-content: center;
      align-items: center;
      gap: 1rem; /* 0.625rem */
      aspect-ratio: 1/1;
      border-radius: 9.9rem; /* 6.1875rem */
      background: var(--Color__EE6811, #EE6811);
      backdrop-filter: blur(5px);
  }
  .cta--lg .cta__icon{
      width: 3rem; /* 2.5rem */
      height: 3rem; /* 2.5rem */
      gap: 1rem;
      border-radius: 9.9rem; /* 6.1875rem */
      background: #EE6811;
      backdrop-filter: blur(5px);
  }
  
  .subscribe-btn{
      display: flex !important;
      min-width: 16rem; /* 10rem */
      height: 4.8rem; /* 3rem */
      justify-content: center;
      align-items: center;
      gap: 1rem; /* 0.625rem */
      flex-shrink: 0;
      border-radius: 0.4rem; /* 0.25rem */
      border: 1px solid var(--secondary);
      background: var(--secondary);
      box-shadow: 0 0.32rem 0.32rem 0 rgba(0, 0, 0, 0.10);
      color: #FFF;
      font-size: 1.6rem; /* 1rem */
      font-weight: 600;
      line-height: 130%; /* 2.08rem */
      letter-spacing: -0.064rem; /* -0.04rem */
      transition: transform .03s ease, opacity .15s, color .15s, border-color .15s;
  }
  .subscribe-btn.line{
      min-width: 4.8rem; /* 3rem */
      height: 4.8rem; /* 3rem */
      border-radius: 0.4rem; /* 0.25rem */
      gap: 1rem;
  }
  .subscribe-btn:hover{
      background: var(--color666);
      border: 1px solid var(--color666);
  }
  .subscribe-btn.line:hover{
      background: var(--white);
      border: 1px solid var(--secondary-hover);
      color: var(--secondary-hover);
  }
  

  @media (max-width:960px) {
    .cta--lg {
        padding: 0.8rem 1.6rem;
        gap: 1rem;
    }  
    .cta--lg .cta__icon {
        width: 3rem;
        height: 3rem;
    }
  }

  .btn.btn--sm{
    font-size: 1.6rem;
    height: 4rem;
  }

  
  /* Login */
.login__bt_wrap{
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    flex-flow: row-reverse;
    margin-top: 4rem;
  }