/* 구운점 · 스타일시트
마크업(index.html)과 함께 디자인 담당 영역입니다.
js/ 폴더는 건드리지 마세요. */
:root{
--bg:#0a0a14; --panel:rgba(24,24,42,.72); --border:rgba(212,175,55,.22);
--gold:#e6c366; --gold-soft:#f3e2ad; --muted:#9aa0b5; --fg:#eef0f7;
--primary:#a07be0; --danger:#ff8a8a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:
radial-gradient(1200px 600px at 20% -10%, rgba(160,123,224,.18), transparent 60%),
radial-gradient(900px 500px at 90% 10%, rgba(212,175,55,.12), transparent 60%),
var(--bg);
color:var(--fg); font-family:"Noto Sans KR",system-ui,sans-serif; min-height:100vh;
}
#stars{position:fixed;inset:0;pointer-events:none;z-index:0}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.5;animation:tw 3s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:48px 16px 80px}
h1{font-family:"Gowun Batang",serif;font-size:clamp(34px,7vw,58px);margin:12px 0 0;
background:linear-gradient(120deg,#f6e6b4,#d4af37 45%,#fff3cf);-webkit-background-clip:text;background-clip:text;color:transparent}
header{text-align:center}
.eyebrow{letter-spacing:.4em;font-size:12px;color:rgba(230,195,102,.85);margin:0}
.lead{max-width:560px;margin:16px auto 0;color:var(--muted);font-size:14px;line-height:1.8}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:24px;backdrop-filter:blur(8px)}
form.panel{margin-top:40px;padding:20px}
@media(min-width:640px){form.panel{padding:32px}}
.grid2{display:grid;gap:16px}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
label{display:block}
.lab{font-size:12px;letter-spacing:.08em;color:var(--gold);font-weight:500}
.muted{color:var(--muted)}
input[type=text],input[type=date],input[type=password],select{
width:100%;margin-top:8px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.05);color:var(--fg);font-size:14px;font-family:inherit;outline:none}
input:focus,select:focus{border-color:rgba(160,123,224,.7);box-shadow:0 0 0 3px rgba(160,123,224,.2)}
select option{background:#151528}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.btn{font-family:inherit;cursor:pointer;border-radius:12px;padding:12px 16px;font-size:14px;
border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--muted);transition:.15s}
.btn:hover{border-color:rgba(160,123,224,.5)}
.btn.on{border-color:var(--primary);background:rgba(160,123,224,.2);color:var(--gold-soft)}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
@media(min-width:640px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc button{text-align:left;border-radius:16px;padding:12px;border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.03);color:var(--fg);cursor:pointer;font-family:inherit;transition:.15s}
.svc button:hover{border-color:rgba(160,123,224,.5)}
.svc button.on{border-color:var(--primary);background:rgba(160,123,224,.15);box-shadow:0 0 24px rgba(160,123,224,.25)}
.svc .ico{font-size:36px}
.svc .nm{font-weight:700;font-size:14px;margin-top:6px}
.svc .ds{font-size:11px;line-height:1.4;color:var(--muted);margin-top:2px}
.submit{width:100%;margin-top:28px;padding:16px;border-radius:16px;border:0;cursor:pointer;
font-size:16px;font-weight:700;font-family:inherit;color:#160f22;
background:linear-gradient(120deg,#f0dca0,#d4af37);box-shadow:0 0 40px rgba(212,175,55,.25)}
.submit:disabled{opacity:.6;cursor:progress}
.err{margin-top:20px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,120,120,.45);
background:rgba(255,120,120,.12);color:#ffd9d9;font-size:14px}
#result{margin-top:40px;display:grid;gap:24px}
.card{padding:24px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{border:1px solid var(--border);background:rgba(255,255,255,.04);border-radius:999px;
padding:6px 12px;font-size:12px;color:var(--muted)}
.chip b{color:var(--gold);font-weight:500}
.balls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.ball{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:linear-gradient(140deg,#b18ce8,#7d55c7);font-weight:700;font-size:14px;color:#fff}
h2{font-family:"Gowun Batang",serif;font-size:26px;margin:0;
background:linear-gradient(120deg,#f6e6b4,#d4af37 50%,#fff3cf);-webkit-background-clip:text;background-clip:text;color:transparent}
h3{color:var(--gold);font-size:16px;margin:0}
p.body{white-space:pre-line;line-height:1.9;font-size:14px;color:rgba(238,240,247,.9);margin:8px 0 0}
.cards{display:grid;gap:16px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.kw{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.kw span{background:rgba(160,123,224,.18);color:var(--gold-soft);border-radius:999px;padding:5px 12px;font-size:12px}
.foot{text-align:center;font-size:12px;color:var(--muted);padding-bottom:8px}
details{margin-top:24px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
summary{cursor:pointer;font-size:12px;color:var(--gold);letter-spacing:.05em}
.rise{animation:rise .5s ease both}
.thumb{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,.25);border-top-color:#160f22;
border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
/* ================================================================
가독성 개선 (40-60대 기준) — 글씨 크게, 명암대비 강하게
styles.css 맨 아래에 이 블록을 그대로 이어 붙이세요.
================================================================ */
/* 기본 텍스트 크기 확대 */
body{font-size:18px; line-height:1.7}
/* 밝기가 낮았던 회색 텍스트 -> 명암비 높은 밝은 회색으로 교체 */
:root{ --muted:#c3c8dd; }
/* 안내문/설명 텍스트 */
.eyebrow{font-size:15px; letter-spacing:.25em}
.lead{font-size:18px; line-height:1.9; color:#dcdfee}
.lab{font-size:16px; font-weight:700; letter-spacing:.04em}
.muted{color:var(--muted)}
/* 입력창, 선택창 */
input[type=text],input[type=date],input[type=password],select{
font-size:18px !important; padding:15px 16px !important; line-height:1.5;
}
input::placeholder{color:#8d92a8; opacity:1}
/* 성별/카메라 등 일반 버튼 */
.btn{font-size:17px !important; padding:14px 18px !important; color:#e7e9f3}
.btn.on{color:#fff8e8; font-weight:700}
/* 13가지 풀이 선택 카드 */
.svc .ico{font-size:44px}
.svc .nm{font-size:17px !important; font-weight:800; color:#ffffff}
.svc .ds{font-size:14px !important; line-height:1.5; color:#c3c8dd}
/* 메인 제출 버튼 */
.submit{font-size:20px !important; padding:18px !important; color:#1a1206; font-weight:800}
/* 에러/안내 메시지 */
.err{font-size:16px !important; line-height:1.6}
p[class="muted"], .lead ~ p, p.muted{font-size:16px}
/* 결과 카드 영역 */
h2{font-size:30px !important}
h3{font-size:19px !important; font-weight:700}
p.body{font-size:17px !important; line-height:2; color:#f3f4fa}
.chip{font-size:14px !important; padding:8px 14px !important; color:#dfe2f0}
.chip b{color:#ffd98a}
.kw span{font-size:14px !important; padding:7px 14px !important}
.foot{font-size:14px !important; line-height:1.8; color:#c3c8dd}
summary{font-size:14px !important}
/* 계산 참고사항 등 하단 부가 설명 */
ul li{font-size:14px !important; line-height:1.8 !important; color:#c3c8dd !important}
/* 로그인바/모달 (auth.js, billing.js가 그리는 부분) */
#gwj-auth-bar{font-size:16px !important}
.modal, #gwj-pricing-modal, #gwj-auth-modal{font-size:17px}
.modal input, #gwj-auth-modal input{font-size:17px !important; padding:12px !important}