/* ==========================================================
   SELFCODE — shared design tokens
   웜 뉴트럴 베이스 + 4가지 포인트 컬러(코랄/머스터드/세이지/라벤더)
   기존 페이지들은 동일한 변수명(--gold, --violet 등)을 그대로 참조하므로
   여기서 값만 바꾸면 사이트 전체 톤이 함께 바뀐다.
   ========================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root{
  /* 배경 */
  --bg-0:#F7F1E7;     /* 페이지 배경 (웜 크림) */
  --bg-1:#FFFFFF;     /* 카드 배경 (화이트) */
  --bg-2:#FBF6EE;     /* 카드 그라데이션 보조 톤 */
  --line:#EDE2D0;     /* 보더 라인 */

  /* 텍스트 */
  --text-0:#2E2822;   /* 본문/제목 (웜 다크) */
  --text-1:#948A7C;   /* 보조 텍스트 */

  /* 포인트 컬러 4종 (레퍼런스 이미지 기준) */
  --coral:#C97B57;    /* 포인트 1 · 메인 CTA */
  --mustard:#CC9C46;  /* 포인트 2 */
  --sage:#7FA98A;     /* 포인트 3 */
  --lavender:#A594C9; /* 포인트 4 */

  /* 기존 페이지 호환용 별칭 (같은 변수명을 그대로 사용) */
  --gold:var(--coral);
  --gold-soft:#DDA184;
  --violet:var(--lavender);
  --rose:#D98D7A;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:
    radial-gradient(ellipse 800px 500px at 15% -10%, rgba(201,123,87,0.06), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(165,148,201,0.07), transparent 60%),
    var(--bg-0);
  color:var(--text-0);
  font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--coral);
}

.card{
  background:linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 20px 40px -24px rgba(46,40,34,0.18);
}

/* ---- site header / footer (전 페이지 공통) ---- */
.site-nav{
  max-width:1040px;
  margin:0 auto;
  padding:22px 20px;
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.site-nav .logo{
  font-family:'Pretendard', sans-serif;
  font-weight:800;
  font-size:19px;
  color:var(--text-0);
  text-decoration:none;
  letter-spacing:-0.01em;
}
.site-nav .menu{
  display:flex;
  align-items:center;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}
.site-nav .menu > li{ position:relative; }
.site-nav .menu a, .site-nav .menu > li > span{
  font-family:'Pretendard', sans-serif;
  font-weight:600;
  font-size:13.5px;
  color:var(--text-1);
  text-decoration:none;
  cursor:pointer;
  padding:6px 0;
  display:inline-block;
}
.site-nav .menu > li > a:hover,
.site-nav .menu > li > span:hover,
.site-nav .menu > li:hover > span{ color:var(--coral); }

.site-nav .dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin-top:10px;
  min-width:230px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px;
  box-shadow:0 20px 40px -16px rgba(46,40,34,0.22);
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.site-nav .menu > li:hover .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.site-nav .dropdown a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:9px;
  font-size:13px;
  font-weight:500;
  color:var(--text-0);
  white-space:nowrap;
}
.site-nav .dropdown a:hover{ background:rgba(201,123,87,0.08); color:var(--coral); }
.site-nav .dropdown .dd-icon{
  width:26px; height:26px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
}

@media (max-width:640px){
  .site-nav{ flex-direction:column; align-items:flex-start; gap:14px; padding:18px 20px; }
  .site-nav .menu{ flex-wrap:wrap; gap:14px 20px; width:100%; }
  .site-nav .dropdown{ position:static; transform:none; opacity:1; visibility:visible;
    display:none; margin:8px 0 0 0; box-shadow:none; border:none; background:none; padding:0 0 0 4px; }
  .site-nav .menu > li.open .dropdown{ display:block; }
}

.site-footer{
  max-width:960px;
  margin:80px auto 0;
  padding:28px 20px 40px;
  text-align:center;
  position:relative;
  z-index:1;
}
.site-footer .footer-links{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 4px; margin-bottom:14px;
}
.site-footer .footer-links a{
  font-family:'Pretendard', sans-serif; font-size:12px; font-weight:500;
  color:var(--text-1); text-decoration:none; padding:2px 8px;
}
.site-footer .footer-links a:hover{ color:var(--coral); }
.site-footer .footer-links .dot{ color:var(--line); font-size:11px; }
.site-footer .footer-copy{
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--text-1);
}
.site-footer .footer-notice{
  font-family:'Pretendard', sans-serif;
  font-size:11px;
  color:var(--text-1);
  opacity:0.75;
  margin-top:8px;
}

/* ---- ad slot placeholder ----
   애드센스 승인 후 .ad-slot 안에 <ins class="adsbygoogle">...</ins> 코드만 넣으면 됨. */
.ad-slot{
  max-width:960px;
  margin:40px auto;
  min-height:0;
}

/* ==========================================================
   심리테스트 문항용 공용 컴포넌트 (레퍼런스 UI 기준)
   실제 테스트 페이지를 만들 때 이 클래스들을 그대로 쓰면
   레퍼런스 이미지와 같은 톤으로 바로 완성된다.
   ========================================================== */
.quiz-wrap{ max-width:480px; margin:0 auto; padding:40px 20px 80px; position:relative; z-index:1; }

.quiz-progress{ display:flex; gap:6px; margin-bottom:28px; }
.quiz-progress .seg{ flex:1; height:6px; border-radius:100px; background:var(--line); overflow:hidden; }
.quiz-progress .seg.filled{ background:var(--coral); }

.quiz-eyebrow{
  text-align:center; font-family:'Space Mono', monospace; font-size:11px;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--coral); margin-bottom:14px;
}
.quiz-question{
  text-align:center; font-family:'Pretendard', sans-serif; font-weight:700;
  font-size:22px; line-height:1.5; color:var(--text-0); margin:0 0 32px;
}

.quiz-options{ display:flex; flex-direction:column; gap:12px; }
.quiz-option{
  display:flex; align-items:center; gap:14px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; font-family:'Pretendard', sans-serif; font-weight:600; font-size:15px;
  color:var(--text-0); cursor:pointer; text-align:left;
  box-shadow:0 8px 20px -14px rgba(46,40,34,0.15);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.quiz-option:hover{ transform:translateY(-1px); box-shadow:0 12px 24px -14px rgba(46,40,34,0.22); }
.quiz-option.selected{ border-color:var(--dot-color, var(--coral)); }
.quiz-option .dot{
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:var(--dot-color, var(--coral));
}
.quiz-option:nth-of-type(4n+1){ --dot-color:var(--coral); }
.quiz-option:nth-of-type(4n+2){ --dot-color:var(--sage); }
.quiz-option:nth-of-type(4n+3){ --dot-color:var(--mustard); }
.quiz-option:nth-of-type(4n+4){ --dot-color:var(--lavender); }

.quiz-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:32px; }
.quiz-footer .step{ font-family:'Space Mono', monospace; font-size:12px; color:var(--text-1); }
.quiz-next{
  background:var(--coral); color:#fff; border:none; border-radius:100px;
  padding:13px 30px; font-family:'Pretendard', sans-serif; font-weight:700; font-size:14.5px;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.quiz-next:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(201,123,87,0.5); }
.quiz-next:disabled{ opacity:0.4; pointer-events:none; }