/**
 * common/style.css
 * SajuX 공통 스타일시트
 * 
 * 결과 영역, 아코디언, 오행 색상, 다크 테마, 사주 기둥, 점수 카드,
 * 월별 운세, 신살, 대운 스크롤, 럭키 아이템, 프리미엄/인증 UI 등
 * 모든 페이지에서 공통으로 사용하는 CSS
 * 
 * 의존성: 없음 (독립 실행)
 */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif;background:#0a0a1a;color:#e0e0e0;min-height:100vh}
.container{max-width:640px;margin:0 auto;padding:20px 16px}
h1{text-align:center;font-size:1.8em;margin:20px 0 8px;background:linear-gradient(135deg,#ff6b6b,#ffd93d,#6bcb77);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{text-align:center;color:#888;font-size:.9em;margin-bottom:24px}
.card{background:#151528;border-radius:16px;padding:24px;margin-bottom:16px;border:1px solid #252545}
.card h2{font-size:1.1em;margin-bottom:16px;color:#ffd93d;display:flex;align-items:center;gap:8px}
.form-row{display:flex;gap:8px;margin-bottom:12px;align-items:center;flex-wrap:wrap}
.form-row label{min-width:80px;font-size:.9em;color:#aaa}
.form-row select,.form-row input{background:#1a1a35;border:1px solid #333;color:#fff;padding:10px 12px;border-radius:8px;font-size:1em;flex:1;min-width:60px}
.form-row select:focus,.form-row input:focus{outline:none;border-color:#ffd93d}
.gender-group{display:flex;gap:8px}
.gender-group label{min-width:auto;cursor:pointer;padding:10px 20px;border-radius:8px;border:1px solid #333;background:#1a1a35;text-align:center;flex:1;transition:.2s}
.gender-group input{display:none}
.gender-group input:checked+span{color:#ffd93d}
.gender-group label:has(input:checked){border-color:#ffd93d;background:#252545}
.btn{width:100%;padding:14px;border:none;border-radius:12px;font-size:1.1em;font-weight:bold;cursor:pointer;background:linear-gradient(135deg,#ff6b6b,#ffd93d);color:#000;transition:.3s;margin-top:8px}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(255,217,61,.3)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
#result{display:none}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.pillar{text-align:center;background:#1a1a35;border-radius:12px;padding:12px 8px;border:1px solid #252545}
.pillar .label{font-size:.75em;color:#888;margin-bottom:6px}
.pillar .stem{font-size:1.6em;font-weight:bold;margin-bottom:2px}
.pillar .branch{font-size:1.6em;font-weight:bold}
.pillar .sipsin{font-size:.7em;color:#aaa;margin-top:4px}
.pillar .kr{font-size:.75em;color:#888;margin-top:2px}
.elem-wood{color:#6bcb77}.elem-fire{color:#ff6b6b}.elem-earth{color:#ffd93d}.elem-metal{color:#fff}.elem-water{color:#9b59b6}
.ohaeng-bar{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:.85em}
.ohaeng-bar .name{min-width:60px;text-align:right}
.ohaeng-bar .bar-bg{flex:1;height:20px;background:#1a1a35;border-radius:10px;overflow:hidden}
.ohaeng-bar .bar-fill{height:100%;border-radius:10px;transition:width .5s}
.ohaeng-bar .count{min-width:20px;text-align:center}
.section{margin:16px 0 8px;font-size:.95em;color:#ffd93d;font-weight:bold;border-bottom:1px solid #252545;padding-bottom:6px}
.fortune-cat{margin:12px 0}
.fortune-cat h3{font-size:.9em;color:#ff6b6b;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.fortune-cat p{font-size:.85em;line-height:1.6;color:#ccc;margin:4px 0}
.daeun-scroll{display:flex;gap:8px;overflow-x:auto;padding:8px 0}
.daeun-item{flex-shrink:0;text-align:center;background:#1a1a35;border-radius:10px;padding:10px 14px;border:1px solid #252545;min-width:70px}
.daeun-item.current{border-color:#ffd93d;background:#252530}
.daeun-item .age{font-size:.7em;color:#888}
.daeun-item .ganji{font-size:1.2em;font-weight:bold;margin:4px 0}
.lucky-item{display:flex;align-items:center;gap:12px;padding:10px;background:#1a1a35;border-radius:10px;margin:6px 0}
.lucky-color{width:32px;height:32px;border-radius:50%;flex-shrink:0}
.lucky-info{font-size:.85em}
.lucky-info .name{font-weight:bold;margin-bottom:2px}
.lucky-info .detail{color:#888;font-size:.8em}
.monthly-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.month-cell{background:#1a1a35;border-radius:8px;padding:8px;text-align:center;font-size:.8em}
.month-cell .m-name{color:#888;font-size:.75em}
.month-cell .m-ganji{font-size:1em;font-weight:bold;margin:2px 0}
.month-cell .m-icon{font-size:.9em}
.sinsal-list{font-size:.85em;line-height:1.8}
.sinsal-item{padding:4px 0;border-bottom:1px solid #1a1a35}
.interaction-item{padding:8px 0;border-bottom:1px solid #1a1a35;font-size:.85em;line-height:1.5}
.interaction-item .i-type{color:#ff6b6b;font-weight:bold}
.interaction-item .i-hap{color:#6bcb77;font-weight:bold}
.share-btn{background:#252545;color:#ffd93d;border:1px solid #ffd93d;padding:12px;border-radius:10px;width:100%;font-size:.95em;cursor:pointer;margin-top:8px}
.share-btn:hover{background:#303055}
.lucky-items-section{background:#151528;border-radius:16px;padding:24px;margin-bottom:16px;border:1px solid #252545}
.lucky-items-section h2{font-size:1.1em;margin-bottom:6px;color:#ffd93d;display:flex;align-items:center;gap:8px}
.lucky-items-subtitle{font-size:.85em;color:#888;margin-bottom:20px}
.lucky-elem-group{margin-bottom:20px}
.lucky-elem-title{display:flex;align-items:center;gap:8px;font-size:.95em;font-weight:bold;margin-bottom:10px}
.lucky-product{display:flex;align-items:center;gap:14px;padding:14px;background:#1a1a35;border-radius:10px;margin:8px 0;border-left:4px solid;cursor:pointer;transition:background .2s,transform .15s;text-decoration:none;color:inherit}
.lucky-product:hover{background:#252545;transform:translateX(4px)}
.lucky-product .lp-info{flex:1}
.lucky-product .lp-name{font-weight:bold;font-size:.9em;margin-bottom:3px}
.lucky-product .lp-desc{font-size:.8em;color:#888}
.lucky-product .lp-link{font-size:.8em;font-weight:bold;white-space:nowrap}
.lucky-disclaimer{font-size:.7em;color:#666;margin-top:16px;text-align:center;line-height:1.5}
.back-link{display:block;text-align:center;color:#888;text-decoration:none;margin:20px 0;font-size:.85em}
.back-link:hover{color:#ffd93d}
.celeb-back{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:50px;border:1px solid rgba(255,255,255,.15);background:none;color:#e0e0e0;font-size:.9em;cursor:pointer;transition:all .2s;text-decoration:none;margin-bottom:16px}
.celeb-back:hover{border-color:#ffd93d;color:#ffd93d}
.celeb-banner{background:linear-gradient(135deg,#151528,#252545);border:1px solid #252545;border-radius:16px;padding:24px 20px;margin-bottom:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.celeb-banner .cb-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;flex-shrink:0;background:rgba(255,217,61,.1);color:#ffd93d}
.celeb-banner .cb-info h2{font-size:1.3em;margin-bottom:2px;color:#ffd93d}
.celeb-banner .cb-info .cb-role{color:#888;font-size:.9em}
.celeb-timeline-section{background:#151528;border-radius:16px;padding:24px;margin-top:16px;border:1px solid #252545}
.celeb-timeline-section h2{font-size:1.1em;margin-bottom:8px;color:#ffd93d;display:flex;align-items:center;gap:8px}
.celeb-timeline-section .ct-intro{font-size:.9em;color:#aaa;margin-bottom:20px}
.ct-event{position:relative;padding:14px 16px;margin-bottom:12px;background:rgba(255,255,255,.03);border-radius:12px;border:1px solid rgba(255,255,255,.05);border-left:4px solid}
.ct-event.neg{border-left-color:#ff6b6b}
.ct-event.pos{border-left-color:#6bcb77}
.ct-event.neu{border-left-color:#ffd93d}
.ct-event .ct-year{font-size:.8em;color:#888}
.ct-event .ct-title{font-size:1em;font-weight:600;margin:4px 0}
.ct-event .ct-saju{display:inline-block;font-size:.85em;padding:2px 8px;border-radius:6px;background:rgba(155,89,182,.15);color:#9b59b6;margin:4px 0}
.ct-event .ct-pattern{font-size:.85em;color:#888;margin-top:4px}
.my-timeline{position:relative;margin:16px 0 8px 20px;padding-left:24px;border-left:2px solid rgba(255,255,255,.1)}
.my-timeline-event{position:relative;margin-bottom:16px;padding:14px 16px;background:rgba(255,255,255,.03);border-radius:12px;border:1px solid rgba(255,255,255,.05);border-left:4px solid}
.my-timeline-event.pos{border-left-color:#6bcb77}
.my-timeline-event.neg{border-left-color:#ff6b6b}
.my-timeline-event.neu{border-left-color:#ffd93d}
.my-timeline-event::before{content:'';position:absolute;left:-31px;top:18px;width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:#0a0a1a}
.my-timeline-event.pos::before{border-color:#6bcb77;background:#6bcb77}
.my-timeline-event.neg::before{border-color:#ff6b6b;background:#ff6b6b}
.my-timeline-event.neu::before{border-color:#ffd93d;background:#ffd93d}
.my-timeline-event .mt-year{font-size:.8em;color:#888}
.my-timeline-event .mt-title{font-size:1em;font-weight:600;margin:4px 0}
.my-timeline-event .mt-saju{display:inline-block;font-size:.85em;padding:2px 8px;border-radius:6px;background:rgba(155,89,182,.15);color:#9b59b6;margin:4px 4px 4px 0}
.my-timeline-event .mt-pattern{font-size:.85em;color:#ccc;margin-top:6px;line-height:1.6}
.my-timeline-event .mt-delete{position:absolute;top:10px;right:10px;background:none;border:none;color:#666;cursor:pointer;font-size:.9em;padding:4px}
.my-timeline-event .mt-delete:hover{color:#ff6b6b}
.my-tl-form{background:#1a1a35;border-radius:12px;padding:16px;margin-top:12px;border:1px solid #252545}
.my-tl-form select,.my-tl-form input{background:#252545;border:1px solid #333;color:#fff;padding:8px 10px;border-radius:8px;font-size:.9em}
.my-tl-form select:focus,.my-tl-form input:focus{outline:none;border-color:#ffd93d}
.my-tl-form .tl-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;align-items:center}
.my-tl-form .tl-row label{font-size:.85em;color:#aaa;min-width:50px}
.my-tl-type-group{display:flex;gap:6px}
.my-tl-type-group label{cursor:pointer;padding:6px 12px;border-radius:8px;border:1px solid #333;background:#252545;font-size:.85em;transition:.2s}
.my-tl-type-group label:has(input:checked){border-color:#ffd93d;background:#353555}
.my-tl-type-group input{display:none}
.my-tl-add-btn{background:linear-gradient(135deg,#ffd93d,#ff6b6b);color:#000;border:none;padding:8px 20px;border-radius:8px;font-weight:bold;cursor:pointer;font-size:.9em}
.my-tl-add-btn:hover{transform:translateY(-1px)}
.my-tl-toggle{background:#252545;color:#ffd93d;border:1px solid #ffd93d33;padding:10px 16px;border-radius:10px;cursor:pointer;font-size:.95em;width:100%;margin-bottom:8px}
.my-tl-toggle:hover{background:#303055}
.loading{display:none;text-align:center;padding:40px;font-size:1.1em;color:#ffd93d}
.loading .spinner{display:inline-block;width:30px;height:30px;border:3px solid #333;border-top-color:#ffd93d;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg)}}
.tag{display:inline-block;background:#252545;color:#aaa;font-size:.7em;padding:2px 8px;border-radius:10px;margin:2px}
.cta-box{background:linear-gradient(135deg,#1a1a35,#252545);border:1px solid #ffd93d33;border-radius:12px;padding:16px;text-align:center;margin:16px 0}
.cta-box a{color:#ffd93d;text-decoration:none;font-weight:bold}
.cta-box p{font-size:.8em;color:#888;margin-top:6px}
.score-circle{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#ffd93d,#ff6b6b);color:#000;font-size:1.5em;font-weight:bold;margin:10px}
.score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:16px 0}
.score-card{background:#1a1a35;border-radius:12px;padding:16px;text-align:center;border:1px solid #252545}
.score-card h4{color:#ffd93d;margin-bottom:8px;font-size:.9em}
.score-card .big-score{font-size:2em;margin:8px 0}
.score-card .emoji{font-size:1.5em;margin-left:8px}
.month-card{background:#1a1a35;border-radius:12px;padding:16px;margin:8px 0;border:1px solid #252545}
.month-card h4{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.month-card h4 .month-name{color:#ffd93d;font-weight:bold}
.month-card h4 .month-score{font-size:1.2em}
.month-card .month-unsung{font-size:.8em;color:#aaa;margin:4px 0}
.month-card .month-keyword{font-size:.9em;color:#ff6b6b;font-weight:bold;margin:6px 0}
.month-card .month-detail{font-size:.8em;line-height:1.6;color:#ccc}
.accordion{margin:16px 0}
.accordion-item{background:#1a1a35;border-radius:12px;margin-bottom:8px;border:1px solid #252545;overflow:hidden}
.accordion-header{padding:16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:#1a1a35;border:none;color:#ffd93d;font-size:1em;font-weight:bold;width:100%;text-align:left;transition:background .2s}
.accordion-header:hover{background:#252545}
.accordion-header .toggle-icon{transition:transform .3s;font-size:1.2em}
.accordion-header.active .toggle-icon{transform:rotate(180deg)}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}
.accordion-content.active{max-height:1000px}
.accordion-body{padding:0 16px 16px 16px}
.fortune-category{margin:12px 0;padding:12px;background:#252545;border-radius:8px}
.fortune-category h5{color:#ff6b6b;font-size:.9em;margin-bottom:6px;font-weight:bold}
.fortune-category p{font-size:.85em;line-height:1.6;color:#ccc;margin:4px 0}
.star-indicator{font-size:1.2em;margin-right:6px}
.category-score{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0;padding:10px;background:#252545;border-radius:8px}
.category-score .score-num{font-size:1.8em;color:#ffd93d;font-weight:bold}
.category-score .score-emoji{font-size:1.5em}
@media (max-width: 640px) {
  .pillars{grid-template-columns:repeat(2,1fr)}
  .score-grid{grid-template-columns:1fr}
  .monthly-grid{grid-template-columns:repeat(2,1fr)}
  #monthlyChart{width:100%;height:250px}
}
/* === 카카오 로그인 & 프리미엄 === */
.auth-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;margin-bottom:8px;border-radius:12px;background:#151528;border:1px solid #252545}
.auth-bar .user-info{display:flex;align-items:center;gap:10px}
.auth-bar .user-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #252545}
.auth-bar .user-name{font-size:.9em;font-weight:bold}
.auth-bar .premium-badge{display:inline-block;font-size:.7em;padding:2px 8px;border-radius:50px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;font-weight:bold;margin-left:6px}
.auth-bar .logout-btn{background:none;border:1px solid #555;color:#aaa;padding:6px 12px;border-radius:8px;font-size:.8em;cursor:pointer}
.auth-bar .logout-btn:hover{border-color:#ff6b6b;color:#ff6b6b}
.kakao-login-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border:none;border-radius:10px;background:#FEE500;color:#000;font-size:.95em;font-weight:bold;cursor:pointer;transition:.2s}
.kakao-login-btn:hover{filter:brightness(.95)}
.kakao-login-btn svg{width:20px;height:20px}
.premium-lock{position:relative;overflow:hidden}
.premium-lock .premium-overlay{position:absolute;inset:0;background:rgba(10,10,26,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;z-index:10;border-radius:16px}
.premium-overlay .lock-icon{font-size:2em;margin-bottom:8px}
.premium-overlay .lock-text{font-size:.9em;color:#ffd93d;font-weight:bold}
.premium-overlay .lock-sub{font-size:.75em;color:#aaa;margin-top:4px}
.premium-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center}
.premium-modal-bg.active{display:flex}
.premium-modal{background:#151528;border:1px solid #252545;border-radius:16px;padding:28px 24px;max-width:380px;width:90%;text-align:center}
.premium-modal h3{color:#ffd93d;font-size:1.2em;margin-bottom:12px}
.premium-modal p{font-size:.9em;color:#ccc;line-height:1.6;margin:8px 0}
.premium-modal .price{font-size:1.3em;color:#ffd93d;font-weight:bold;margin:12px 0}
.premium-modal .pay-btn{display:block;width:100%;padding:12px;border:none;border-radius:10px;background:#FEE500;color:#000;font-size:1em;font-weight:bold;cursor:pointer;margin:12px 0 8px}
.premium-modal .code-btn{display:block;width:100%;padding:12px;border:1px solid #ffd93d;border-radius:10px;background:none;color:#ffd93d;font-size:.95em;cursor:pointer;margin-bottom:8px}
.premium-modal .close-btn{background:none;border:none;color:#888;font-size:.85em;cursor:pointer;margin-top:8px}
.code-input-area{display:none;margin-top:12px}
.code-input-area input{width:160px;padding:10px;text-align:center;font-size:1.2em;letter-spacing:8px;border:1px solid #ffd93d;border-radius:8px;background:#1a1a35;color:#fff}
.code-input-area .verify-btn{margin-top:8px;padding:10px 24px;border:none;border-radius:8px;background:linear-gradient(135deg,#ff6b6b,#ffd93d);color:#000;font-weight:bold;cursor:pointer}
.code-msg{font-size:.85em;margin-top:8px;min-height:20px}
.code-msg.ok{color:#6bcb77}
.code-msg.err{color:#ff6b6b}