:root{
      --bg:#fbfbfd;
      --card:#ffffff;
      --text:#101828;
      --muted:#667085;
      --line:#e7eaf0;
      --shadow: 0 24px 60px rgba(16,24,40,.08);
      --shadow2: 0 14px 30px rgba(16,24,40,.07);
      --brand:#ff5a1f;         /* 포인트 컬러 */
      --brand-weak:#fff1ea;    /* 포인트 배경 */
      --radius:20px;
      --radius-sm:14px;
      --max: 1080px;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family:"Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
      color:var(--text);
      background: radial-gradient(900px 500px at 50% 0%, rgba(255,90,31,.10), transparent 55%),
                  linear-gradient(180deg, #ffffff 0%, var(--bg) 60%, #ffffff 100%);
    }

    a{ color:inherit; }
    .wrap{ max-width:var(--max); margin:0 auto; padding: 48px 18px 72px; }

    /* HERO */
    .hero{
      background: linear-gradient(180deg, rgba(255,90,31,.08), rgba(255,90,31,0));
      border:1px solid rgba(255,90,31,.18);
      border-radius: var(--radius);
      padding: 34px 28px;
      box-shadow: var(--shadow2);
    }
    .hero__kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 12px;
      border-radius:999px;
      background: var(--brand-weak);
      border:1px solid rgba(255,90,31,.25);
      color: var(--brand);
      font-weight:800;
      font-size: 12px;
      letter-spacing:-.2px;
    }
    .hero h1{
      margin: 14px 0 10px;
      font-size: clamp(26px, 3.2vw, 40px);
      letter-spacing:-.6px;
      line-height:1.15;
    }
    .hero p{
      margin:0;
      max-width: 70ch;
      color: var(--muted);
      line-height:1.7;
      font-size: 15px;
    }
    .hero__cta{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:18px;
    }

    /* BUTTONS */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      height: 48px;
      padding: 0 18px;
      border-radius: 14px;
      font-weight: 800;
      text-decoration:none;
      border: 1px solid transparent;
      transition: transform .06s ease, filter .12s ease, background .12s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:active{ transform: translateY(1px); }
    .btn--primary{
      background: var(--brand);
      color:#fff;
      box-shadow: 0 14px 30px rgba(255,90,31,.22);
    }
    .btn--primary:hover{ filter: brightness(.98); }
    .btn--ghost{
      background:#fff;
      color: var(--text);
      border-color: var(--line);
    }
    .btn--ghost:hover{ background:#fafafa; }

    .btn__sub{
      display:block;
      font-size:12px;
      font-weight:700;
      color: rgba(255,255,255,.85);
      line-height:1.1;
      margin-top:2px;
    }
    .btn--ghost .btn__sub{ color: var(--muted); }

    /* GRID */
    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
    }

    /* CARD */
    .card{
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .donate-container{
      margin-top: 32px;
      text-align: center;
    }
    .card__inner{ padding: 22px 22px 20px; }
    .card__top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      margin-bottom: 10px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      height: 30px;
      padding: 0 12px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      border: 1px solid rgba(255,90,31,.22);
      background: var(--brand-weak);
      color: var(--brand);
      flex: 0 0 auto;
    }
    .card h2{
      margin:0;
      font-size: 20px;
      letter-spacing:-.3px;
      line-height:1.25;
    }
    .card .lead{
      margin: 6px 0 0;
      color: var(--muted);
      line-height:1.7;
      font-size: 14px;
    }
    .divider{ height:1px; background: var(--line); margin: 16px 0; }

    /* steps */
    .steps{
      margin:0;
      padding-left: 18px;
      color: var(--text);
      line-height: 1.75;
      font-weight: 700;
    }
    .steps li{ margin: 8px 0; }
    .steps span{
      font-weight:800;
    }
    .steps small{
      font-weight:700;
      color: var(--muted);
    }

    /* card actions */
    .actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 14px;
    }
    .actions .btn{ height:44px; border-radius: 13px; }

    /* phone highlight */
    .phone-box{
      margin-top: 14px;
      padding: 14px 14px;
      border-radius: var(--radius-sm);
      background: linear-gradient(180deg, rgba(255,90,31,.08), rgba(255,90,31,0));
      border: 1px solid rgba(255,90,31,.18);
    }
    .phone-box__row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .phone{
      font-size: 18px;
      font-weight: 900;
      letter-spacing: -0.3px;
      color: var(--brand);
      text-decoration:none;
    }
    .phone:hover{ text-decoration: underline; }
    .phone-box p{
      margin: 10px 0 0;
      color: var(--text);
      line-height: 1.7;
      font-size: 14px;
    }
    .note{
      margin: 10px 0 0;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.6;
    }

    /* support blocks bottom */
    .support{
      margin-top: 18px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .mini{
      background:#fff;
      border:1px solid var(--line);
      border-radius: 16px;
      padding: 16px 16px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .mini h3{
      margin:0;
      font-size: 15px;
      letter-spacing:-.2px;
    }
    .mini p{
      margin: 6px 0 0;
      font-size: 13px;
      color: var(--muted);
      line-height:1.6;
    }
    .mini a{
      color: var(--brand);
      font-weight: 900;
      text-decoration:none;
      white-space:nowrap;
      margin-top: 2px;
    }
    .mini a:hover{ text-decoration: underline; }

    /* responsive */
    @media (max-width: 900px){
      .grid{ grid-template-columns: 1fr; }
      .support{ grid-template-columns: 1fr; }
      .hero{ padding: 26px 18px; }
      .card__inner{ padding: 18px 16px 16px; }
    }