/* 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}
.vibe-line{display:flex; gap:11px; align-items:center; background:#fff5ec; border:1px solid #f4ddcb;
  border-radius:14px; padding:14px 16px}
.vibe-tag{flex:0 0 auto; font-size:12px; font-weight:700; background:#f6c9ac; color:#7a4a2c;
  border-radius:999px; padding:4px 11px; white-space:nowrap}
.vibe-line p{margin:0; font-size:15.5px; color:var(--ink); font-weight:600; line-height:1.5}
.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}

/* 사주 궁합 가이드(콘텐츠 아티클) */
.post .post-lead{font-size:15px; color:var(--ink); background:#faf6ee; border:1px solid var(--line);
  border-radius:12px; padding:13px 15px; line-height:1.85; margin:0 0 6px}
.post h2{margin-top:26px}
.post h3{font-size:14.5px; margin:18px 0 4px; color:var(--ink)}
.post .post-note{margin-top:26px; font-size:12.5px; color:var(--muted); line-height:1.7}
.post .post-cta{margin-top:6px; font-size:14.5px}
.post .post-cta a{font-weight:700}
.post-more{margin-top:28px; padding-top:18px; border-top:1px solid var(--line)}
.post-more h2{font-size:15px; margin:0 0 10px}
.post-more ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px}
.post-more a{color:var(--accent); font-size:13.5px; text-decoration:none}
.post-more a:hover{text-decoration:underline}

/* 가이드 목록(허브) */
.guide-intro{font-size:14.5px; color:var(--ink2); line-height:1.8}
.guide-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 8px}
.guide-card{display:block; padding:16px 15px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); text-decoration:none; transition:transform .12s, border-color .12s, box-shadow .12s}
.guide-card:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow)}
.guide-card .gc-emoji{font-size:24px; line-height:1}
.guide-card h2{font-size:14.5px; margin:9px 0 4px; color:var(--ink)}
.guide-card p{font-size:12.5px; color:var(--ink2); margin:0; line-height:1.6}
@media (max-width:520px){.guide-grid{grid-template-columns:1fr}}

/* 상품 카드(상품 안내 페이지) */
.product-card{margin:20px 0 6px; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow)}
.product-media{background:linear-gradient(135deg,#fff3ec,#eef4fb); line-height:0}
.product-media img{display:block; width:100%; height:auto}
.product-body{padding:18px 18px 20px}
.product-badge{display:inline-block; padding:3px 11px; border-radius:999px; font-size:12px;
  background:#eaf6ee; color:var(--good); border:1px solid #cfe9d8}
.product-name{font-family:var(--serif); font-size:20px; margin:10px 0 6px; color:var(--ink)}
.product-price{font-size:16px; color:var(--ink); margin:0 0 10px}
.product-price b{font-size:24px; color:var(--accent)}
.product-unit{font-size:13px; color:var(--muted)}
.product-desc{font-size:14px; color:var(--ink2); line-height:1.75; margin:0 0 12px}
.product-points{margin:0 0 16px; padding-left:18px}
.product-points li{font-size:13.5px; color:var(--ink2); line-height:1.7}
.product-buy{width:100%; font-size:16px}
.product-note{font-size:12px; color:var(--muted); margin:12px 0 0; line-height:1.6}
.product-note a{color:var(--ink2)}

/* 결제 페이지 */
.pay-summary{margin:14px 0 18px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card)}
.pay-summary-row{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:15px; color:var(--ink)}
.pay-summary-row b{font-size:18px; color:var(--accent)}
#payment-method, #agreement{margin:10px 0}

/* 리포트 내 고백 시뮬레이션 안내 */
.cr-sim{margin:16px 0 4px; padding:14px 16px; border:1px solid #f0d6cf; border-radius:14px;
  background:linear-gradient(135deg,#fff3ec,#f6eefb)}
.cr-sim h4{margin:0 0 6px; font-size:15px; color:var(--ink)}
.cr-sim-price{font-size:12.5px; color:var(--accent); font-weight:700}
.cr-sim p{margin:0 0 12px; font-size:13px; color:var(--ink2); line-height:1.7}
.cr-sim .cr-sim-btn{width:100%}

/* 고백 연습 채팅 화면 */
.sim-wrap{display:flex; flex-direction:column; min-height:100vh; padding-bottom:12px}
.sim-head{display:flex; align-items:center; gap:12px; padding:6px 2px 8px}
.sim-head .back{color:var(--ink2); font-size:14px; text-decoration:none; white-space:nowrap; flex:0 0 auto}
.sim-head .sim-title{flex:1; min-width:0; font-size:14px; color:var(--ink); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#sim-count{color:var(--muted); font-size:12px; white-space:nowrap; flex:0 0 auto}

/* 항상 보이는 고백 성공 확률 (상단 고정) */
.sim-probbar{position:sticky; top:0; z-index:6; display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0 0 10px; padding:12px 16px; border-radius:16px; border:1px solid #f0d6cf;
  background:linear-gradient(135deg,#fff1ea,#f7edfb); box-shadow:0 4px 14px rgba(180,120,120,.12)}
.sim-probbar-label{font-size:13px; font-weight:700; color:var(--ink2)}
.sim-prob-big{font-family:var(--serif); font-size:30px; font-weight:700; line-height:1; color:var(--accent); transition:color .3s}
.sim-prob-big i{font-size:17px; font-style:normal; margin-left:1px}
.sim-prob-arrow{font-size:15px; min-width:14px; color:var(--muted)}
.sim-probbar.up .sim-prob-big, .sim-probbar.up .sim-prob-arrow{color:#2ea36b}
.sim-probbar.down .sim-prob-big, .sim-probbar.down .sim-prob-arrow{color:#d0563f}
.sim-probbar.pulse{animation:prob-pop .5s ease}
@keyframes prob-pop{0%{transform:scale(1)}35%{transform:scale(1.045)}100%{transform:scale(1)}}
.sim-notice{padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card);
  font-size:14px; color:var(--ink2); line-height:1.7}
.sim-notice a{color:var(--accent)}
.sim-chat{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
  padding:12px; background:var(--card); border:1px solid var(--line); border-radius:16px; min-height:320px}
.sim-bubble{max-width:80%; padding:9px 13px; border-radius:16px; font-size:14px; line-height:1.6; word-break:break-word}
.sim-bubble.them{align-self:flex-start; background:#f1ece3; color:var(--ink); border-bottom-left-radius:5px}
.sim-bubble.me{align-self:flex-end; background:#ffe0d6; color:#5b3f36; border-bottom-right-radius:5px}
.sim-typing{opacity:.6; letter-spacing:2px}
.sim-sysnote{align-self:center; text-align:center; max-width:92%; font-size:12px; color:var(--muted);
  background:#faf6ee; border:1px solid var(--line); border-radius:999px; padding:6px 12px}
.sim-inputbar{display:flex; align-items:flex-end; gap:8px; margin-top:10px}
.sim-inputbar textarea{flex:1 1 auto; min-width:0; width:100%; padding:11px 14px; border:1px solid var(--line);
  border-radius:14px; font-family:inherit; font-size:15px; line-height:1.4; background:var(--card); color:var(--ink);
  resize:none; overflow-y:auto; max-height:84px; box-sizing:border-box}
.sim-inputbar .btn{flex:0 0 auto; white-space:nowrap; padding-left:16px; padding-right:16px}

/* 다른 상황 연습하기(5턴마다) */
.sim-switch{margin-top:10px; text-align:center}
.sim-switch-btn{font-family:inherit; font-size:13px; padding:9px 16px; border:1px dashed var(--accent);
  border-radius:999px; background:#fff6f2; color:var(--accent); cursor:pointer}
.sim-switch-btn:hover{background:#ffece4}
.sim-more{margin-top:12px; text-align:center; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--card)}
.sim-more p{margin:0 0 10px; font-size:13.5px; color:var(--ink2)}
.sim-more .btn{width:100%}

/* 시뮬레이션 설정 화면 */
.sim-setup{padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--card)}
.sim-setup-lead{margin:0 0 16px; font-family:var(--serif); font-size:17px; color:var(--ink); text-align:center}
.sim-setup-block{margin-bottom:16px}
.sim-setup-label{font-size:13px; font-weight:700; color:var(--ink2); margin-bottom:8px}
.sim-chips{display:flex; flex-wrap:wrap; gap:8px}
.sim-chip{font-family:inherit; font-size:13.5px; padding:9px 13px; border:1px solid var(--line);
  border-radius:999px; background:#faf6ee; color:var(--ink); cursor:pointer; transition:all .12s}
.sim-chip:hover{border-color:var(--accent)}
.sim-chip.on{background:var(--accent); border-color:var(--accent); color:#fff}
.sim-start-btn{width:100%; margin-top:4px}
.sim-start-btn:disabled{opacity:.45; cursor:not-allowed}
.sim-setup-hint{margin:10px 0 0; text-align:center; font-size:12px; color:var(--muted)}

/* 결제 전 저장 안내(경고 박스) */
.pay-warn{margin:14px 0; padding:13px 15px; border:1px solid #f0d3a0; border-radius:12px;
  background:#fff8ec; color:#7a6a4a}
.pay-warn b{color:#8a6a2a}
.pay-warn > b{display:block; font-size:14px; margin-bottom:5px}
.pay-warn p{margin:0; font-size:12.8px; line-height:1.7}

/* 리포트 하단 PDF 저장 리마인더 */
.cr-save-note{margin:0 0 8px; padding:10px 12px; border-radius:10px;
  background:#fff3ec; border:1px solid #f3d9cd; color:#8a6a5a; font-size:12.5px; line-height:1.65; text-align:left}
.cr-save-note b{color:#c76a52}

/* 로딩 스피너 */
.pay-spinner{display:inline-block; width:44px; height:44px; border-radius:50%;
  border:4px solid #f0e2d6; border-top-color:var(--accent); animation:pay-spin .8s linear infinite}
@keyframes pay-spin{to{transform:rotate(360deg)}}

/* 결제 결과(성공/실패) */
.pay-result{text-align:center; padding:24px 6px}
.pay-result-icon{font-size:52px; line-height:1; margin-bottom:10px}
.pay-result h1{font-family:var(--serif); font-size:22px; margin:0 0 8px}
.pay-result > p{font-size:14.5px; color:var(--ink2); margin:0 auto; max-width:420px}
.pay-detail{margin:18px auto 0; max-width:380px; padding:14px 16px; border:1px solid var(--line);
  border-radius:12px; background:var(--card); text-align:left}
.pay-detail p{margin:4px 0; font-size:13.5px; color:var(--ink2)}
.pay-actions{display:flex; flex-direction:column; gap:10px; max-width:340px; margin:22px auto 0}
.pay-actions .btn{width:100%}

/* 메인 상단 상품 안내 진입 배너 */
.shop-cta{display:flex; align-items:center; gap:12px; max-width:520px; margin:16px auto 0;
  padding:13px 16px; border-radius:14px; text-decoration:none;
  background:#fff; border:1px solid #f0e2d6; box-shadow:var(--shadow)}
.shop-cta:hover{transform:translateY(-1px)}
.shop-cta .shop-emoji{font-size:22px}
.shop-cta .shop-text{display:flex; flex-direction:column}
.shop-cta .shop-text b{color:var(--ink); font-size:14.5px}
.shop-cta .shop-text small{color:var(--ink2); font-size:12px}
.shop-cta .shop-go{margin-left:auto; color:var(--accent); font-size:13px; white-space:nowrap}

/* 이미 본 몰래 궁합(재열람 목록) */
.history-card .history-head{margin-bottom:10px}
.history-card h2{font-family:var(--serif); font-size:18px; margin:0 0 4px; color:var(--ink)}
.history-sub{font-size:12.5px; color:var(--ink2); margin:0}
.history-list{display:flex; flex-direction:column; gap:8px}
.hist-item{display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(135deg,#fff6f1,#f4f7fc); font-family:inherit; transition:transform .12s ease, box-shadow .12s ease}
.hist-item:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.hist-names{font-size:14.5px; color:var(--ink); font-weight:700}
.hist-arrow{color:var(--accent); margin:0 2px}
.hist-meta{font-size:12px; color:var(--ink2); white-space:nowrap}

/* 자기이해 안내(외부 링크 CTA) */
.self-cta{display:flex; align-items:center; gap:14px; max-width:520px; margin:26px auto 4px;
  padding:16px 18px; border-radius:16px; text-decoration:none;
  background:linear-gradient(135deg,#fff3ec,#eef4fb); border:1px solid #f0e2d6;
  box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease}
.self-cta:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(120,98,70,.18)}
.self-cta-emoji{font-size:28px; flex:0 0 auto}
.self-cta-text{display:flex; flex-direction:column; gap:3px}
.self-cta-text b{color:var(--ink); font-size:15.5px}
.self-cta-text small{color:var(--ink2); font-size:12.5px}

/* 사업자 정보(전자상거래법 필수 표기) */
.biz-info{margin-top:28px; padding:16px 16px 14px; border:1px solid var(--line,#e6ddcf); border-radius:12px; background:rgba(0,0,0,0.015); text-align:left}
.biz-info p{margin:3px 0; font-size:12.5px; color:var(--muted); line-height:1.7}
.biz-info a{color:var(--ink2)}
.biz-info .foot-links{margin-top:10px}
.biz-info .foot-links a{color:var(--ink2); text-decoration:underline}