/* MIR ONE 새 간판 — 디자인 토큰은 intake 페이지(/join·/license·/terms)와 동일 계열. */
:root{
  --brand:#5B4BE0; --brand-d:#4A3BC8; --violet:#7C3AED;
  --dark:#1E1B2E; --dark2:#1A1730; --dark3:#2A2740;
  --g1:#9A97AC; --g2:#6B6982; --g3:#45425A;
  --lav1:#E7E4F2; --lav2:#ECE9F4; --lav3:#F2F1F8; --lavc:#C9BFF6;
  --line:#E7E4F2; --ink:#33303F;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI','Malgun Gothic',sans-serif;
  color:var(--dark); background:#fff; line-height:1.7; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer;}

/* ===== NAV ===== */
.nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:18px;
  padding:14px 24px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.logo{font-size:20px; font-weight:800; letter-spacing:.3px; color:var(--brand); text-decoration:none;}
.menu{display:flex; gap:4px; flex:1; flex-wrap:wrap;}
.navlink{border:0; background:none; font-size:14.5px; font-weight:600; color:var(--g2); padding:8px 12px; border-radius:9px;}
.navlink:hover{background:var(--lav3); color:var(--dark);}
.navlink.on{color:var(--brand); background:var(--lav2);}
.badge{flex-shrink:0; display:flex; align-items:center; gap:10px;}
.authbtn{font-size:13.5px; font-weight:700; padding:8px 15px; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--g2); text-decoration:none;}
.authbtn.primary{background:var(--brand); color:#fff; border-color:var(--brand);}
.authbtn:hover{filter:brightness(.97);}
.me{font-size:14px; font-weight:700; color:var(--dark);}

/* ===== PAGES (SPA 전환) ===== */
.main{min-height:60vh;}
[data-page]{display:none;}
[data-page].active{display:block;}
.page .wrap{max-width:960px; margin:0 auto; padding:64px 24px;}
.page h1{font-size:30px; font-weight:800; letter-spacing:-.5px; color:var(--dark); line-height:1.3; margin:0 0 12px;}
.skel{color:var(--g1); font-size:13.5px; line-height:1.7;}

/* ===== FOOTER ===== */
.footer{background:var(--dark2); color:#C9C4E2; margin-top:40px;}
.footwrap{max-width:960px; margin:0 auto; padding:44px 24px 34px;}
.footcols{display:flex; gap:48px; flex-wrap:wrap; margin-bottom:28px;}
.footcol{display:flex; flex-direction:column; gap:9px; align-items:flex-start;}
.foothead{font-size:13px; font-weight:700; color:#C9C4E2; margin-bottom:5px;}
.footlink{border:0; background:none; text-align:left; padding:0; color:#9893B8; font-size:14px; text-decoration:none;}
.footlink:hover{color:#fff;}
.footbiz{border-top:1px solid var(--dark3); padding-top:22px; display:flex; flex-direction:column; gap:6px;}
.bizline{font-size:12.5px; color:#615C82; line-height:1.7;}
.copy{font-size:12.5px; color:#615C82; margin-top:6px;}

/* ===== 보라 마우스 글로우 (은은 · 사장님 요청) =====
   세기 조절: 아래 rgba 알파(0.08)를 0.06~0.10 사이로. 반경 조절: 560px. */
.mir-glow{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(560px circle at var(--gx,50%) var(--gy,50%), rgba(91,75,224,0.08), rgba(91,75,224,0) 72%);
}
@media (prefers-reduced-motion:reduce){ .mir-glow{ display:none !important; } }

/* ===== 대시보드 기간 탭 (원본 tabStyle 이식) ===== */
.dashtab{border:none; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; padding:9px 18px; border-radius:9px; background:transparent; color:#6B6982; box-shadow:none;}
.dashtab.on{background:#5B4BE0; color:#fff; box-shadow:0 4px 12px rgba(91,75,224,0.26);}

/* ===== HOOK VIDEO 재생버튼 hover (원본 style-hover 이식) ===== */
.mir-playcircle{transition:transform .2s, background .2s;}
button:hover > .mir-playcircle{transform:scale(1.06); background:rgba(91,75,224,0.72);}

/* ===== 애니메이션 (원본 이식) ===== */
@keyframes mirFloat{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
@keyframes mirFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ [style*="mirFloat"]{animation:none !important;} }

/* ===== 약관/개인정보 인앱 페이지 (intake legal.js 룩 이식 · 토큰 공용) ===== */
.legalwrap{max-width:760px; margin:0 auto; padding:clamp(40px,6vw,72px) 24px 80px;}
.legal h1{font-size:24px; font-weight:800; color:var(--dark); letter-spacing:-.4px; margin:0 0 6px; line-height:1.32;}
.legal h2{font-size:17px; font-weight:800; color:var(--brand); margin:30px 0 10px; padding-top:16px; border-top:1px solid var(--line); line-height:1.4;}
.legal p{font-size:14px; line-height:1.78; color:var(--ink); margin:10px 0;}
.legal strong{color:var(--dark); font-weight:700;}
.legal ol, .legal ul{margin:10px 0; padding-left:22px;}
.legal li{font-size:14px; line-height:1.72; color:var(--ink); margin:5px 0;}
.legal ol ol{margin:6px 0 6px 2px;}
.legal .tablewrap{overflow-x:auto; margin:14px 0;}
.legal table{width:100%; border-collapse:collapse; font-size:13px; min-width:420px;}
.legal th, .legal td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top; line-height:1.6; color:var(--ink);}
.legal th{background:var(--lav2); font-weight:700; color:var(--dark); white-space:nowrap;}
.legal-compliance{margin-top:30px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--g2); line-height:1.7;}
.legal-compliance a{color:var(--brand); font-weight:600;}

/* ===== 회원정보 인앱 페이지 (박스 A · 기존 토큰만 재사용 — 새 색/폰트 0) ===== */
.acctwrap{max-width:760px; margin:0 auto; padding:clamp(40px,6vw,72px) 24px 80px;}
.acctcard{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin-bottom:18px; box-shadow:0 8px 28px rgba(40,30,90,0.06);}
.acctcard h2{font-size:16px; font-weight:800; color:var(--dark); margin:0 0 14px;}
.acctrow{display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:10px;}
.acctfield{flex:1 1 220px; min-width:180px;}
.acctfield label{display:block; font-size:12.5px; font-weight:700; color:var(--g2); margin-bottom:5px;}
.acctfield input, .acctfield select{width:100%; font-family:inherit; font-size:14px; color:var(--dark); padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#fff;}
.acctfield input:focus, .acctfield select:focus{outline:none; border-color:var(--brand);}
.acctstatic{font-size:14px; color:var(--dark); padding:9px 0;}
.acctbadge{display:inline-block; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;}
.acctbadge.ok{background:var(--lav2); color:var(--brand);}
.acctbadge.no{background:#FDECEC; color:#D14343;}
.acctbtn{font-size:13.5px; font-weight:700; padding:9px 16px; border-radius:9px; border:1px solid var(--brand); background:var(--brand); color:#fff;}
.acctbtn:hover{filter:brightness(.96);}
.acctbtn[disabled]{opacity:.6; cursor:default;}
.acctlink{font-size:13px; font-weight:700; color:var(--brand); text-decoration:none; border:1px solid var(--lavc); padding:7px 13px; border-radius:9px;}
.acctmsg{font-size:13.5px; margin-top:8px; line-height:1.6; color:var(--g2);}
.acctmsg.err{color:#D14343;}
.acctmsg.ok{color:var(--brand);}
.accthead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.accthead .nm{font-size:16px; font-weight:800; color:var(--dark);}
.acctnote{font-size:13px; color:var(--g2); line-height:1.6; margin:6px 0 10px;}
.acctbtn.ghost{background:#fff; color:var(--brand);}
.acctdel{background:#fff; border:1px solid #F3D6D6; color:#D14343;}
.acctdel.armed{background:#D14343; border-color:#D14343; color:#fff;}
.acctdanger{margin-top:56px; padding-top:16px; border-top:1px solid var(--line); text-align:right;}
.acctdanger button{background:none; border:1px solid #F3D6D6; color:#D14343; font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:9px;}
.acctmodal{position:fixed; inset:0; background:rgba(30,27,46,.55); z-index:80; display:flex; align-items:center; justify-content:center; padding:24px;}
.acctmodal .mbox{background:#fff; border-radius:16px; max-width:460px; width:100%; padding:26px 24px; box-shadow:0 24px 64px rgba(30,27,46,.35);}
.acctmodal .mbox h3{font-size:17px; font-weight:800; color:#D14343; margin:0 0 10px;}
.acctmodal .mbox p{font-size:13.5px; line-height:1.7; color:var(--ink); margin:0 0 14px;}

/* ===== 페이지 외곽 보라 글로우 (숨쉬듯 깜빡) ===== */
:root{
  --mir-edge:91,75,224;      /* 브랜드 보라 RGB — 색 바꾸려면 여기만 */
  --mir-edge-max:.36;        /* 글로우 최대 세기(0~1) — 은은하게 */
  --mir-edge-speed:6s;       /* 한 번 숨쉬는 주기 — 느릴수록 잔잔 */
}
#mirEdge{
  position:fixed; inset:0; pointer-events:none; z-index:60;
  border-radius:0;
  box-shadow:
    inset 0 0 0 1px rgba(var(--mir-edge),.16),
    inset 0 0 26px 2px rgba(var(--mir-edge),var(--mir-edge-max));
  animation:mirEdgeBreathe var(--mir-edge-speed) ease-in-out infinite;
}
@keyframes mirEdgeBreathe{
  0%,100%{ opacity:.35; }
  50%    { opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  #mirEdge{ animation:none; opacity:.5; }
}