* { box-sizing: border-box; }

    :root{
      --green:#21a957;
      --green-dark:#168744;
      --green-light:#eefaf3;
      --text:#1f2a37;
      --sub:#6b7280;
      --line:#e5e7eb;
      --bg:#f5f8f6;
      --white:#fff;
      --shadow:0 10px 28px rgba(24, 70, 44, .10);
    }

    body{
      margin:0;
      font-family:'Pretendard','Noto Sans KR',Arial,sans-serif;
      background:linear-gradient(135deg,#f3faf5 0%,#ffffff 45%,#edf7f1 100%);
      color:var(--text);
      line-height:1.35;
    }

    .page{
      width:100%;
      min-height:100vh;
      padding:18px 14px;
      display:flex;
      justify-content:center;
      align-items:flex-start;
    }

    .wrap{
      width:100%;
      max-width:760px;
    }

    .hero{
      text-align:center;
      margin-bottom:12px;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:5px 12px;
      border-radius:999px;
      background:var(--green-light);
      color:var(--green-dark);
      font-size:12px;
      font-weight:700;
      margin-bottom:8px;
    }

    .hero h1{
      margin:0;
      font-size:24px;
      letter-spacing:-.4px;
      font-weight:800;
    }

    .hero p{
      margin:6px 0 0;
      font-size:14px;
      color:var(--sub);
    }

    .card{
      background:rgba(255,255,255,.94);
      border:1px solid rgba(229,231,235,.9);
      border-radius:18px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .form-head{
      padding:14px 22px;
      background:linear-gradient(90deg,#1fa251,#39bf6c);
      color:#fff;
    }

    .form-head h2{
      margin:0;
      font-size:18px;
      font-weight:800;
    }

    .form-head p{
      margin:4px 0 0;
      opacity:.92;
      font-size:12px;
    }

    form{
      padding:18px 22px 20px;
    }

    .grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px 16px;
    }

    .field.full{ grid-column:1 / -1; }

    label{
      display:block;
      margin-bottom:5px;
      font-size:12px;
      font-weight:700;
      color:#263238;
    }

    .required{ color:var(--green); }

    input, textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius:10px;
      padding:9px 12px;
      font-size:14px;
      color:var(--text);
      background:#fff;
      outline:none;
      transition:.2s ease;
    }

    textarea{
      min-height:58px;
      resize:vertical;
    }

    input:focus, textarea:focus{
      border-color:var(--green);
      box-shadow:0 0 0 4px rgba(33,169,87,.12);
    }

    .choice-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }

    .choice{
      position:relative;
    }

    .choice input{
      position:absolute;
      opacity:0;
      pointer-events:none;
    }

    .choice span{
      display:flex;
      justify-content:center;
      align-items:center;
      height:38px;
      border:1px solid var(--line);
      border-radius:10px;
      background:#fff;
      color:#4b5563;
      font-size:14px;
      font-weight:700;
      cursor:pointer;
      transition:.22s ease;
    }

    .choice span:hover{
      border-color:var(--green);
      background:var(--green-light);
      color:var(--green-dark);
      transform:translateY(-1px);
      box-shadow:0 6px 14px rgba(33,169,87,.12);
    }

    .choice input:checked + span{
      border-color:var(--green);
      background:var(--green);
      color:#fff;
      box-shadow:0 6px 14px rgba(33,169,87,.18);
    }

    .guide{
      margin-top:14px;
      padding:10px 12px;
      border-radius:11px;
      background:#f8faf9;
      border:1px solid #edf0ee;
      font-size:12px;
      color:#5f6b63;
    }

    .form-buttons{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:14px;
      margin-top:16px;
      flex-wrap:wrap;
    }

    .form-buttons button{
      width:150px;
      height:40px;
      border:none;
      border-radius:10px;
      font-size:14px;
      font-weight:800;
      cursor:pointer;
      transition:.23s ease;
    }

    .btn-submit{
      background:var(--green);
      color:#fff;
    }

    .btn-submit:hover{
      background:var(--green-dark);
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(33,169,87,.24);
    }

    .btn-reset{
      background:#eef1f0;
      color:#4b5563;
    }

    .btn-reset:hover{
      background:#dde4e0;
      transform:translateY(-1px);
    }

    .result{
      display:none;
      margin-top:14px;
      padding:16px 22px 18px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:16px;
      box-shadow:0 8px 22px rgba(31,42,55,.07);
    }

    .result.show{ display:block; }

    .result-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:10px;
    }

    .result-title h3{
      margin:0;
      font-size:18px;
      font-weight:800;
    }

    .status{
      padding:5px 10px;
      border-radius:999px;
      background:var(--green-light);
      color:var(--green-dark);
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
    }

    .result-list{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }

    .result-item{
      padding:9px 12px;
      border:1px solid #edf0ee;
      border-radius:10px;
      background:#fbfdfc;
    }

    .result-item.full{ grid-column:1 / -1; }

    .result-item strong{
      display:block;
      margin-bottom:4px;
      font-size:12px;
      color:#6b7280;
    }

    .result-item span{
      font-size:14px;
      font-weight:700;
      color:#263238;
      word-break:break-word;
    }

    .result-note{
      margin:10px 0 0;
      color:#6b7280;
      font-size:14px;
    }

    .result-actions{
      display:flex;
      justify-content:center;
      margin-top:14px;
    }

    .btn-result-check{
      width:150px;
      height:40px;
      border:none;
      border-radius:10px;
      background:#f97316;
      color:#fff;
      font-size:14px;
      font-weight:800;
      cursor:pointer;
      transition:.23s ease;
    }

    .btn-result-check:hover{
      background:#ea580c;
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(249,115,22,.24);
    }


    @media(max-width:760px){
      .page{ padding:14px 10px; }
      .hero h1{ font-size:22px; }
      .hero p{ font-size:13px; }
      .form-head, form, .result{ padding-left:16px; padding-right:16px; }
      .grid, .result-list{ grid-template-columns:1fr; }
      .field.full, .result-item.full{ grid-column:auto; }
      .choice-row{ grid-template-columns:1fr 1fr; }
      .form-buttons button{ width:150px; }
    }

    @media(max-width:430px){
      .choice-row{ grid-template-columns:1fr; }
      .form-buttons{ flex-direction:column; }
      .form-buttons button{ width:100%; max-width:300px; }
      .result-title{ align-items:flex-start; flex-direction:column; }
      .btn-result-check{ width:100%; max-width:300px; }
    }