/* style.css — 모임 궁합 (파스텔 수채화 테마) */
:root{
  --bg:#fbf6ee; --ink:#4f4234; --ink2:#8a7c6b; --muted:#a99e8f;
  --card:#fffdf9; --line:#ece2d4; --accent:#e79a86; --accent2:#86aed8;
  --good:#5fa777; --bad:#d98a8a; --warn:#d9a24a;
  --shadow:0 10px 30px rgba(120,98,70,.12);
  --serif:"Gowun Batang","Nanum Myeongjo",serif;
  --sans:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); line-height:1.6;
  background:
    radial-gradient(circle at 12% 8%, #fbdcc8aa, transparent 42%),
    radial-gradient(circle at 88% 12%, #d6ecdcaa, transparent 42%),
    radial-gradient(circle at 85% 90%, #dbe6f5aa, transparent 45%),
    radial-gradient(circle at 10% 92%, #ecdef3aa, transparent 45%),
    var(--bg);
  background-attachment:fixed; min-height:100vh;
}
.wrap{max-width:680px; margin:0 auto; padding:22px 16px 60px}

/* 헤더 */
.hero-top{text-align:center; padding:18px 6px 6px}
.hero-top h1{font-family:var(--serif); font-size:30px; margin:0 0 6px; letter-spacing:-.5px}
.hero-top .sub{color:var(--ink2); margin:0; font-size:15px}
.badge{display:inline-block; margin-top:10px; padding:4px 12px; border-radius:999px;
  background:#fff3ec; color:var(--accent); font-size:12.5px; border:1px solid #f3d9cd}

/* 카드 */
.card{background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:20px 18px; margin:16px 0; box-shadow:var(--shadow)}
.card-title{font-family:var(--serif); font-size:18px; margin:0 0 14px}
.hidden{display:none !important}

/* 입력 폼 */
.form-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.form-top h2{font-family:var(--serif); font-size:18px; margin:0}
#count-hint{font-size:13px; color:var(--muted)}
.p-row{display:grid; grid-template-columns:26px 1fr 1.2fr .9fr .6fr 30px;
  gap:7px; align-items:center; margin:9px 0}
.p-num{width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%;
  background:#f2e7d8; color:var(--ink2); font-size:13px; font-weight:700}
.p-row input,.p-row select{
  font-family:var(--sans); font-size:14px; padding:9px 8px; border:1px solid var(--line);
  border-radius:11px; background:#fffefb; color:var(--ink); width:100%; min-width:0}
.p-row input:focus,.p-row select:focus{outline:none; border-color:var(--accent)}
.p-del{border:none; background:#f6ede2; color:var(--muted); border-radius:9px;
  width:30px; height:34px; cursor:pointer; font-size:13px}
.p-del:hover{background:#f3d9cd; color:var(--accent)}
.form-actions{display:flex; gap:10px; margin-top:16px}
#btn-add{flex:0 0 auto}
.form-hint{min-height:18px; margin:8px 2px 0; font-size:13px; color:var(--accent);
  opacity:0; transition:opacity .2s}
.form-hint.show{opacity:1}
.field-help{font-size:12.5px; color:var(--muted); margin:2px 2px 4px}
.privacy-note{font-size:12px; color:var(--ink2); margin:0 2px 12px; background:#eef4ee;
  border:1px solid #d6e7d9; border-radius:10px; padding:7px 11px}
.privacy-note b{color:var(--good)}
.share-banner{font-size:13px; color:var(--ink); line-height:1.6; background:#fff3ec;
  border:1px solid #f3d9cd; border-radius:13px; padding:11px 14px; margin:0 0 14px}
.share-banner b{color:var(--accent)}

/* 버튼 */
.btn{font-family:var(--sans); font-size:15px; font-weight:700; border:none; cursor:pointer;
  border-radius:13px; padding:13px 18px; transition:transform .08s, filter .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,#ef9f86,#e98aa6); color:#fff; flex:1}
.btn.primary:hover{filter:brightness(1.04)}
.btn.ghost{background:#f4ece0; color:var(--ink2)}
.btn.line{background:#fff; border:1.5px solid var(--line); color:var(--ink2)}
.btn.kakao{background:#fee500; color:#3c1e1e}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* 결과 헤더 */
.result-head{text-align:center; margin:4px 0 6px}
.result-head h2{font-family:var(--serif); font-size:22px; margin:0}
.group-pct{color:var(--accent); font-weight:700; white-space:nowrap}
.group-pct::before{content:': '}
.hint-line{font-size:13px; color:var(--muted); margin:6px 0 0}

/* 그래프 */
.graph-box{display:flex; justify-content:center; margin:6px 0}
.rel-graph{width:100%; max-width:480px; height:auto; touch-action:manipulation}
.rel-node{cursor:pointer}
.rel-node-bg{fill:#fffdf9; stroke:#e6d8c5; stroke-width:2; transition:stroke .15s, stroke-width .15s, fill .15s}
.rel-node:hover .rel-node-bg{stroke:var(--accent); stroke-width:4}
.rel-node.sel .rel-node-bg{stroke:var(--accent); stroke-width:3.8; fill:#fff4ee}
/* 처음에 노드가 깜빡이며 '눌러보세요' 유도 */
.rel-graph.invite .rel-node-bg{animation:nodeInvite 1.5s ease-in-out infinite}
@keyframes nodeInvite{0%,100%{stroke:#e6d8c5; stroke-width:2}50%{stroke:var(--accent); stroke-width:5}}
/* 클릭 안내 배지 */
.graph-help{text-align:center; font-size:13.5px; color:var(--ink2); background:#fff3ec;
  border:1px dashed #f0cdbd; border-radius:12px; padding:9px 12px; margin:2px 0 10px; transition:background .2s}
.graph-help b{color:var(--accent)}
.graph-help.active{background:#eef6ef; border-color:#bfe0c6; border-style:solid}
.rel-emoji{font-size:26px}
.rel-name{font-size:14px; font-weight:700; fill:var(--ink); font-family:var(--sans)}
.rel-heart{font-size:14px}
.legend{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:8px;
  font-size:12.5px; color:var(--ink2)}
.legend i{display:inline-block; width:18px; height:4px; border-radius:3px; vertical-align:middle; margin-right:5px}

/* 쌍 요약 */
.pair-summary{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.ps{flex:1 1 200px; border:1px solid var(--line); border-radius:14px; padding:11px 14px;
  cursor:pointer; background:#fffefb; transition:transform .08s}
.ps:active{transform:translateY(1px)}
.ps.best{background:#f3faf4; border-color:#cfe7d3}
.ps.worst{background:#fdf2ef; border-color:#f1d6cf}
.ps-tag{display:block; font-size:12px; color:var(--ink2); margin-bottom:3px}
.ps b{font-size:15px}
.ps-score{float:right; font-weight:700; color:var(--ink2)}

/* 한줄평 + 리더/팔로워 */
.vibe-card{padding:16px 16px}
.oneliners{display:flex; flex-direction:column; gap:10px}
.ol{display:flex; gap:10px; align-items:flex-start; border-radius:13px; padding:11px 13px; line-height:1.55}
.ol.play{background:#fff5ec; border:1px solid #f4ddcb}
.ol.work{background:#eef3fa; border:1px solid #d9e4f1}
.ol-tag{flex:0 0 auto; font-size:12px; font-weight:700; border-radius:999px; padding:3px 9px; white-space:nowrap}
.ol.play .ol-tag{background:#f6c9ac; color:#7a4a2c}
.ol.work .ol-tag{background:#bcd2ec; color:#2f4d72}
.ol p{margin:1px 0 0; font-size:14px; color:var(--ink)}
.vibe-reroll{width:100%; margin-top:10px; font-size:13.5px; padding:9px}
.leadfollow{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.lf{flex:1 1 200px; display:flex; align-items:center; gap:8px; border-radius:12px; padding:9px 12px; flex-wrap:wrap}
.lf.lead{background:#fbf3e6; border:1px solid #ecdcc0}
.lf.follow{background:#f1f4ee; border:1px solid #dde6d6}
.lf-tag{font-size:12.5px; font-weight:700; color:var(--ink2); white-space:nowrap}
.lf-names b{font-size:14px}
.lf-names i{color:var(--muted); font-size:12.5px}

/* 역할 카드 */
.section-title{font-family:var(--serif); font-size:19px; text-align:center; margin:24px 0 4px}
.section-sub{text-align:center; color:var(--muted); font-size:13px; margin:0 0 14px}
.roles-box{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:560px){.roles-box{grid-template-columns:1fr 1fr}}
.role-card{display:flex; gap:12px; background:var(--card); border:1px solid var(--line);
  border-left:5px solid var(--el,#e79a86); border-radius:16px; padding:13px 14px; box-shadow:var(--shadow)}
.role-el{flex:0 0 40px; height:40px; line-height:40px; text-align:center; border-radius:11px;
  background:color-mix(in srgb, var(--el) 18%, #fff); color:var(--el); font-family:var(--serif);
  font-size:20px; font-weight:700}
.role-person{font-weight:700; font-size:15px}
.role-animal{font-weight:400; color:var(--muted); font-size:12.5px; margin-left:4px}
.role-role{font-size:13.5px; color:var(--ink2); margin:5px 0 3px;
  background:color-mix(in srgb, var(--el) 12%, #fff); border-radius:9px; padding:6px 10px}
.role-role b{color:var(--el,#e79a86); font-size:14.5px}
.role-char{margin:6px 0 1px; font-family:var(--serif); font-size:16px; color:var(--ink)}
.role-who{font-size:12.5px; color:var(--ink2); margin:0 0 5px}
.role-desc{font-size:13.5px; color:var(--ink2); margin:4px 0}
.role-why{font-size:12px; color:var(--muted); border-top:1px dashed var(--line); padding-top:6px; margin-top:6px}

/* 짝사랑 유료 */
.crush-card{background:linear-gradient(160deg,#fff5f1,#fdeef4); border:1px solid #f3d9cd}
.crush-head{text-align:center; margin-bottom:12px}
.crush-head h3{font-family:var(--serif); font-size:19px; margin:0 0 4px}
.crush-head p{font-size:13px; color:var(--ink2); margin:0}
.crush-pick{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:10px 0}
.crush-pick select{font-family:var(--sans); font-size:14px; padding:9px 12px; border:1px solid var(--line);
  border-radius:11px; background:#fff}
.crush-pick .arrow{color:var(--accent); font-size:18px}
.btn.crush{width:100%; background:linear-gradient(135deg,#ec6f9e,#e9577d); color:#fff; margin-top:6px}
.btn.crush.disabled{background:linear-gradient(135deg,#d9b9c4,#d3a9b8)}
.crush-locked{text-align:center; padding:18px 8px 6px}
.lock-emoji{font-size:34px}
.crush-locked h4{font-family:var(--serif); margin:8px 0 6px; font-size:17px}
.crush-locked p{font-size:13.5px; color:var(--ink2); margin:6px 0}
.muted{color:var(--muted)}
.crush-report{margin-top:14px}
.cr-top{font-family:var(--serif); font-size:16px; font-weight:700; padding-bottom:8px; border-bottom:1px solid var(--line)}
.cr-score{float:right; color:var(--accent)}
.cr-intro{font-size:12.5px; color:var(--ink2); line-height:1.7; margin:10px 0 8px;
  background:#fff3ec; border-radius:11px; padding:10px 12px}
.cr-tags{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 4px}
.cr-tags span{font-size:12px; color:var(--ink2); background:#faf4ea; border:1px solid var(--line);
  border-radius:999px; padding:3px 11px}
.cr-sec{margin-top:12px}
.cr-sec h4{font-size:14.5px; margin:0 0 6px; color:var(--ink)}
.cr-guide{font-size:12.5px; color:var(--ink2); line-height:1.72; background:#fff;
  border:1px solid var(--line); border-radius:11px; padding:10px 12px; margin:0 0 8px}
.cr-sec ul{margin:0; padding-left:18px}
.cr-sec li{font-size:13.5px; color:var(--ink2); margin:4px 0}
.cr-verdict{margin-top:14px; padding:12px; border-radius:12px; background:#fff3ec; text-align:center; font-weight:700}
.crush-sub{font-family:var(--sans); font-size:12px; font-weight:700; color:#fff; background:#ec6f9e;
  border-radius:999px; padding:2px 10px; vertical-align:middle; margin-left:4px}
.cr-scorekind{background:#ec6f9e; color:#fff; border-radius:999px; padding:1px 9px; font-size:11px;
  font-weight:700; margin-right:5px; vertical-align:middle}
.cr-actions{margin-top:14px}
.cr-actions .btn{width:100%}

/* 액션 */
.actions{display:flex; gap:10px; margin:20px 0}

/* 모달 */
.modal{position:fixed; inset:0; background:rgba(60,48,36,.42); backdrop-filter:blur(2px);
  display:none; align-items:flex-end; justify-content:center; z-index:50}
.modal.open{display:flex}
@media(min-width:560px){.modal.open{align-items:center}}
.modal-card{background:var(--card); width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  border-radius:22px 22px 0 0; padding:20px 18px 28px; box-shadow:0 -10px 40px rgba(0,0,0,.2);
  animation:slideUp .25s ease}
@media(min-width:560px){.modal-card{border-radius:22px}}
@keyframes slideUp{from{transform:translateY(30px); opacity:.6}to{transform:none; opacity:1}}
.modal-close{position:sticky; top:0; float:right; border:none; background:#f4ece0; color:var(--ink2);
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:15px}
.m-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; clear:both}
.m-names{font-family:var(--serif); font-size:17px}
.m-x{margin:0 6px; font-size:20px}
.m-score{text-align:center; flex:0 0 auto}
.m-score-num{font-family:var(--serif); font-size:34px; font-weight:700; color:var(--accent); line-height:1}
.m-score-num small{font-size:14px}
.m-label{font-size:13px; color:var(--ink2)}
.m-scorekind{font-size:11px; color:#fff; background:var(--accent2); border-radius:999px;
  padding:2px 9px; display:inline-block; margin-bottom:5px; font-weight:700}
.m-note{font-size:12.5px; color:var(--ink2); line-height:1.62; background:#eef3fa;
  border:1px solid #dbe6f5; border-radius:11px; padding:10px 12px; margin:2px 0 6px}
.m-note b{color:var(--ink)}
.m-pillars{display:flex; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--ink2);
  background:#faf4ea; border-radius:12px; padding:10px 12px; margin-bottom:8px}
.m-pillars b{color:var(--ink); font-family:var(--serif); font-size:15px}
.m-legend{font-size:12px; color:var(--muted); text-align:center; margin:2px 0 0}
.m-sec{padding:12px 0; border-top:1px solid var(--line)}
.m-sec h4{font-size:15px; margin:0 0 8px}
.sec-heart{margin-right:5px}
.m-sec.good h4{color:#3f8f5a}
.m-sec.bad h4{color:#4f7fc4}
.m-guide{font-size:13px; color:var(--ink2); line-height:1.72; background:#faf4ea;
  border-radius:12px; padding:11px 13px; margin:0 0 10px !important}
.m-sec p{font-size:13.5px; color:var(--ink2); margin:6px 0}
.m-couple b{color:var(--ink)}
.m-sec ul{margin:0; padding-left:6px; list-style:none}
.m-sec li{font-size:13.5px; margin:7px 0; padding-left:22px; position:relative; color:var(--ink2)}
.m-sec li::before{position:absolute; left:0; top:0}
.m-sec li.good::before{content:'💚'}
.m-sec li.bad::before{content:'⚡'}
.m-sec li.warn::before{content:'⚠️'}
.m-sec li.neu::before{content:'·'; left:6px; color:var(--muted)}

/* 푸터 */
.foot{text-align:center; color:var(--muted); font-size:12px; margin-top:30px; line-height:1.7}
.foot a{color:var(--ink2)}
.foot-links{margin-top:8px}
.foot-links a{color:var(--ink2); text-decoration:underline}

/* 소개·개인정보처리방침 등 정적 페이지 */
.legal{max-width:680px; margin:0 auto; padding:28px 18px 60px}
.legal .back{display:inline-block; margin-bottom:16px; color:var(--ink2); font-size:14px; text-decoration:none}
.legal h1{font-family:var(--serif); font-size:24px; margin:0 0 10px}
.legal h2{font-size:16px; margin:24px 0 6px; color:var(--ink)}
.legal p, .legal li{font-size:14px; color:var(--ink2); line-height:1.78}
.legal ul{padding-left:18px}
.legal a{color:var(--accent)}
.legal .updated{color:var(--muted); font-size:12.5px; margin-top:26px}