:root{
  --bg:#F7F4EC;
  --bg-dim:#EEE7D6;
  --ink:#231F1A;
  --ink-soft:#4A4238;
  --muted:#8A8272;
  --jade:#2F5D50;
  --jade-dim:#DCE8E2;
  --gold:#B8892E;
  --line:rgba(35,31,26,0.12);
  --radius:16px;
  --font-body:'Pretendard', sans-serif;
}
*{box-sizing:border-box;}
html, body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.7;
  word-break:keep-all;
  overflow-wrap:break-word;
}
body{
  background-image:
    radial-gradient(ellipse 560px 380px at 8% -8%, rgba(47,93,80,0.09), transparent 60%),
    radial-gradient(ellipse 560px 380px at 100% 4%, rgba(184,137,46,0.08), transparent 60%);
}
a{color:inherit;}

/* ==== 헤더 ==== */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  max-width:880px; margin:0 auto; padding:20px 20px 8px;
}
.logo{
  font-size:19px; font-weight:900; letter-spacing:-0.01em;
  text-decoration:none; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.logo span{color:var(--jade);}
.nav-family-link{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
  background:var(--jade-dim); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; text-decoration:none;
  transition:border-color 0.2s;
}
.nav-family-link:hover{border-color:var(--jade);}

.wrap{max-width:880px; margin:0 auto; padding:0 20px;}

/* ==== 히어로 ==== */
.back-link{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; font-weight:700; color:var(--jade);
  text-decoration:none; margin-top:18px;
}
.back-link:hover{text-decoration:underline;}

.toggle-row{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--ink-soft); margin:10px 0;
}
.toggle-row input{width:auto;}

.hero{padding:44px 0 10px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:0.12em;
  color:var(--gold); text-transform:uppercase; margin-bottom:14px;
}
.eyebrow::before{content:''; width:16px; height:1.5px; background:var(--gold);}
.hero h1{
  font-size:clamp(26px, 5.6vw, 40px); font-weight:900; letter-spacing:-0.02em;
  line-height:1.35; max-width:600px;
}
.hero h1 .accent{
  background:linear-gradient(100deg, var(--jade), var(--gold) 65%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{margin-top:14px; font-size:14.5px; color:var(--ink-soft); max-width:56ch;}
.trust-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px;}
.trust-badge{
  font-size:11.5px; font-weight:700; color:var(--jade);
  background:var(--jade-dim); border-radius:999px; padding:5px 12px;
}

/* ==== 모드 선택 카드 (허브) ==== */
.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:30px 0;}
@media(max-width:600px){ .mode-grid{grid-template-columns:1fr;} }
.mode-card{
  display:block; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:26px 22px; transition:transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s;
}
.mode-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px -14px rgba(35,31,26,0.2);}
.mode-card .emoji{font-size:34px; margin-bottom:12px; display:block;}
.mode-card h2{font-size:19px; font-weight:800; margin-bottom:8px;}
.mode-card p{font-size:13.5px; color:var(--ink-soft); margin-bottom:14px;}
.mode-card .cta{font-size:13px; font-weight:700; color:var(--jade);}

/* ==== 근거 설명 섹션 ==== */
.method-section{padding:20px 0 10px;}
.method-section h3{font-size:15px; font-weight:800; margin-bottom:10px;}
.method-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
@media(max-width:640px){ .method-grid{grid-template-columns:1fr;} }
.method-item{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px;
  font-size:12.5px; color:var(--ink-soft);
}
.method-item b{display:block; font-size:13.5px; color:var(--jade); margin-bottom:6px;}

/* ==== 폼 ==== */
.card{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:24px 22px; margin-bottom:16px;
}
.card h2{font-size:18px; font-weight:800; margin-bottom:6px;}
.card .desc{font-size:13px; color:var(--muted); margin-bottom:16px;}
.form-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.field{flex:1; min-width:90px;}
.field label{font-size:12px; font-weight:700; color:var(--muted); display:block; margin-bottom:5px;}
input, select{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:14px; background:var(--bg); color:var(--ink); font-family:inherit;
}
input:focus, select:focus{outline:2px solid var(--gold); outline-offset:1px;}
.hint{font-size:11.5px; color:var(--muted); margin-top:4px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:13px 20px; border-radius:12px; border:none;
  background:linear-gradient(100deg, var(--jade), #3E7A69);
  color:#fff; font-weight:700; font-size:14.5px; cursor:pointer;
  width:100%; margin-top:6px; transition:box-shadow 0.2s, transform 0.15s;
}
.btn:hover{box-shadow:0 8px 18px -8px rgba(47,93,80,0.5);}
.btn:active{transform:scale(0.98);}
.btn.ghost{background:transparent; border:1.5px solid var(--line); color:var(--ink-soft);}
.btn.secondary{background:var(--jade-dim); color:var(--jade); box-shadow:none;}

/* ==== 결과 화면 ==== */
.result-hero{
  text-align:center; background:#fff; border:1px solid var(--line);
  border-radius:22px; padding:30px 22px; margin-bottom:16px;
}
.result-hero .name-big{font-size:32px; font-weight:900; letter-spacing:0.06em; margin-bottom:6px;}
.result-hero .name-hanja{font-size:14px; color:var(--muted); margin-bottom:16px;}
.score-ring-label{font-size:12px; font-weight:700; color:var(--muted); margin-bottom:4px;}
.score-big{font-size:48px; font-weight:900; color:var(--jade); line-height:1;}
.score-tier{
  display:inline-block; margin-top:8px; font-size:12.5px; font-weight:700;
  padding:4px 12px; border-radius:999px;
}
.score-tier.good{background:var(--jade-dim); color:var(--jade);}
.score-tier.mid{background:#F3E7CE; color:var(--gold);}
.score-tier.low{background:#F5E1DC; color:#B8452E;}

.sagyeok-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0;}
@media(max-width:480px){ .sagyeok-grid{grid-template-columns:repeat(2,1fr);} }
.sagyeok-item{
  background:var(--bg); border-radius:12px; padding:12px 8px; text-align:center;
}
.sagyeok-item .g-name{font-size:11px; color:var(--muted); font-weight:700;}
.sagyeok-item .g-value{font-size:20px; font-weight:900; margin:4px 0;}
.sagyeok-item .g-judge{font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; display:inline-block;}
.g-judge.대길{background:var(--jade-dim); color:var(--jade);}
.g-judge.길{background:var(--jade-dim); color:var(--jade);}
.g-judge.반길반흉{background:#F3E7CE; color:var(--gold);}
.g-judge.흉{background:#F5E1DC; color:#B8452E;}

.detail-block{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; margin-bottom:12px;
}
.detail-block h3{font-size:14px; font-weight:800; margin-bottom:8px; color:var(--jade);}
.detail-block p{font-size:13.5px; color:var(--ink-soft);}
.oheng-chain{display:flex; align-items:center; justify-content:center; gap:8px; margin:10px 0; flex-wrap:wrap;}
.oheng-pill{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:16px;
}
.o-목{background:#4C7A50;} .o-화{background:#C1432E;} .o-토{background:#B8894A;}
.o-금{background:#9A9A9E;} .o-수{background:#3A6B8A;}

/* 후보 목록 (생성형) */
.candidate-list{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.candidate-item{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer; transition:border-color 0.2s;
}
.candidate-item:hover{border-color:var(--jade);}
.candidate-item .cname{font-size:17px; font-weight:800;}
.candidate-item .chanja{font-size:12px; color:var(--muted);}
.candidate-item .cscore{font-size:18px; font-weight:900; color:var(--jade);}

/* ==== 광고 자리 ==== */
.ad-slot{
  margin:20px auto; max-width:880px; min-height:100px;
  display:flex; align-items:center; justify-content:center; padding:16px;
  border:1.5px dashed var(--line); border-radius:var(--radius);
  background:repeating-linear-gradient(45deg, rgba(35,31,26,0.02), rgba(35,31,26,0.02) 10px, transparent 10px, transparent 20px);
  color:var(--muted); font-size:12px;
}
.ad-slot-tag{font-size:10px; font-weight:700; letter-spacing:0.08em; opacity:0.7;}
.ad-slot-bottom{min-height:250px;}

/* ==== 푸터 ==== */
.site-footer{
  max-width:880px; margin:20px auto 0; padding:24px 20px 40px;
  border-top:1px solid var(--line); font-size:12px; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.site-footer nav{display:flex; gap:16px;}
.site-footer a{text-decoration:none; font-weight:600; color:var(--ink-soft);}
.site-footer a:hover{color:var(--jade);}

.suri-legend{
  display:flex; flex-wrap:wrap; gap:10px 16px;
  margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--line);
}
.suri-legend .item{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--muted);
}
.suri-legend .dot{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
}
.suri-legend .dot.대길{background:var(--jade);}
.suri-legend .dot.길{background:#6FA593;}
.suri-legend .dot.반길반흉{background:var(--gold);}
.suri-legend .dot.흉{background:#B8452E;}

/* ==== 공유 모달 ==== */
.share-modal{
  display:none; position:fixed; inset:0; background:rgba(35,31,26,0.72);
  z-index:200; align-items:center; justify-content:center; padding:20px;
}
.share-modal-inner{
  background:var(--bg); border-radius:18px; padding:18px;
  max-width:min(92vw,420px); max-height:90vh; overflow-y:auto; text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,0.3);
}
.share-modal-inner img{max-width:100%; border-radius:12px; display:block; margin:0 auto 14px; box-shadow:0 6px 16px rgba(0,0,0,0.15);}
.share-modal-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.share-modal-hint{font-size:12px; color:var(--muted); margin-top:10px;}

/* 쿠팡파트너스 배너 */
.coupang-slot{
  max-width:100%;
  overflow-x:auto;
  margin:16px auto;
  text-align:center;
}
.coupang-notice{
  font-size:11px;
  color:var(--muted);
  text-align:center;
  margin-bottom:6px;
}

.disclaimer{
  font-size:11.5px; color:var(--muted); background:var(--bg-dim);
  border-radius:12px; padding:12px 14px; margin-top:14px; line-height:1.7;
}