/* =========================================================
    1. 기본 색상 및 공통 설정
    ========================================================= */
:root {
--bg: #fbfbfb;
--card: #ffffff;
--line: #e7e2dc;

--text: #191714;
--sub: #6c655f;
--muted: #9b938b;

--accent: #002454;
--accent-bg: #edf3f9;
}

 * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family:
          Pretendard,
          -apple-system,
          BlinkMacSystemFont,
          "Apple SD Gothic Neo",
          sans-serif;
      }

      button,
      a {
        font-family: inherit;
      }

      /* =========================================================
         2. 전체 레이아웃 및 상단 소개
         ========================================================= */
      .wrap {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
        padding: 42px 18px 70px;
      }

      .tag {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 6px;
        background: var(--accent-bg);
        color: var(--accent);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
      }

      .hero h1 {
        margin: 14px 0 8px;
        font-size: 28px;
        line-height: 1.35;
      }

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

      /* =========================================================
         3. 설문 진행률
         ========================================================= */
      .progress {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 30px 0 22px;
      }

      .track {
        flex: 1;
        height: 4px;
        overflow: hidden;
        border-radius: 5px;
        background: var(--line);
      }

      .fill {
        height: 100%;
        background: var(--accent);
        transition: width 0.3s ease;
      }

      .count {
        color: var(--muted);
        font-size: 12px;
      }

      /* =========================================================
         4. 질문 및 선택지
         ========================================================= */
      .qey {
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
      }

      .qtext {
        margin: 8px 0 18px;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5;
      }

      .opts {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 9px;
      }

      .opt {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 13px;
        width: calc(50% - 9px);
        padding: 15px 16px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: var(--card);
        cursor: pointer;
        transition:
          border-color 0.15s ease,
          background 0.15s ease,
          transform 0.1s ease;
      }

      .opt:hover {
        border-color: #cfc7bf;
      }

      .opt:active {
        transform: scale(0.99);
      }

      .opt.sel {
        border-color: var(--accent);
        background: var(--accent-bg);
      }

      .ico {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        flex-shrink: 0;
        border-radius: 9px;
        background: #f4f1ed;
        font-size: 30px
      }

      /* =========================================================
         5. 설문 이동 버튼
         ========================================================= */
      .nav {
        display: flex;
        justify-content: space-between;
        margin-top: 22px;
      }

      .btn {
        height: 44px;
        padding: 0 22px;
        border: 1px solid #d4cec7;
        border-radius: 9px;
        background: #ffffff;
        font-weight: 600;
        cursor: pointer;
      }

      .btn.primary {
        border-color: var(--accent);
        background: var(--accent);
        color: #ffffff;
      }

      .btn:disabled {
        opacity: 0.35;
        cursor: default;
      }

      /* =========================================================
         6. 로딩 화면
         ========================================================= */
      .loading,
      .result {
        display: none;
      }

      .loading.on {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 80px 10px;
      }

      .spin {
        width: 36px;
        height: 36px;
        border: 3px solid var(--line);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* =========================================================
         7. 추천 결과
         ========================================================= */
      .result.on {
        display: block;
      }

      .analysis {
        margin: 18px 0;
        padding: 18px;
        border-radius: 14px;
        background: var(--accent-bg);
      }

      .analysis h3 {
        margin: 0 0 8px;
        color: var(--accent);
        font-size: 14px;
      }

      .analysis p {
        margin: 4px 0;
        color: #38516a;
        font-size: 14px;
        line-height: 1.7;
      }

      .card {
        padding: 24px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #ffffff;
      }

      .card img {
        width: 100%;
        margin: 4px 0 18px;
        border-radius: 12px;
      }

      .badge {
        display: inline-block;
        margin-bottom: 5px;
        padding: 5px 9px;
        border-radius: 5px;
        background: var(--accent-bg);
        color: var(--accent);
        font-size: 11px;
        font-weight: 700;
      }

      .name {
        margin: 12px 0 8px;
        font-size: 23px;
        font-weight: 800;
      }

      .summary {
        color: var(--sub);
        font-size: 14px;
        line-height: 1.8;
      }

      .sect {
        margin-top: 24px;
      }

      .sect h3 {
        margin: 0 0 10px;
        font-size: 15px;
      }

      .why {
        margin: 0;
        padding-left: 20px;
        color: var(--sub);
        font-size: 14px;
        line-height: 1.75;
      }

      .tip {
        padding: 15px;
        border-radius: 12px;
        background: #f8f6f3;
        color: var(--sub);
        font-size: 14px;
        line-height: 1.7;
      }

      .buy {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        margin-top: 22px;
        border-radius: 10px;
        background: var(--accent);
        color: #ffffff;
        font-weight: 700;
        text-decoration: none;
      }

      /* =========================================================
         8. 대체 추천 및 다시 시작
         ========================================================= */
      .alts {
        margin-top: 18px;
      }

      .alt {
        display: block;
        margin-top: 8px;
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: #ffffff;
        color: var(--text);
        text-decoration: none;
      }

      .restart {
        width: 100%;
        height: 44px;
        margin-top: 22px;
        border: 1px solid #d4cec7;
        border-radius: 9px;
        background: transparent;
        color: var(--sub);
        cursor: pointer;
      }
      .chatLabel p { 
        margin: 0;
        padding: 15px 0;
        color: var(--sub);
        font-size: 14px; 
        text-align:center;
        cursor:pointer;
      }
      .chatLabel p a { color: var(--sub); text-decoration: none; }
      /* =========================================================
         9. 모바일 대응
         ========================================================= */
      @media (max-width: 480px) {
        .chatLabel p { font-size: 12px; white-space: pre-line; line-height: 1.5; }
        .wrap {
          padding-top: 28px;
        }

        .hero h1 {
          font-size: 24px;
        }

        .qtext {
          font-size: 18px;
        }
        .name { font-size: 20px; }
      }