/* =========================================================
   브랜드마루 — 공통 스타일 (public 유틸리티 페이지 공용)
   대상: forgot-password / reset-password / terms / privacy
   각 페이지는 <link rel="stylesheet" href="assets/site.css"> 로 불러 씁니다.
   ========================================================= */
:root{
  /* 브랜드마루 새 색톤: 네이비 + 민트 (2026-08 리브랜드) */
  --bm-black:#141C26;
  --bm-purple:#1F3A5F; --bm-purple-600:#16304F; --bm-purple-300:#4E6A8F; --bm-purple-light:#E9F0F7; /* (호환용: 기존 보라 변수명 → 네이비로 매핑) */
  --bm-navy:#1F3A5F; --bm-navy-700:#16304F; --bm-navy-900:#0F2540;
  --bm-mint:#16E0AE; --bm-mint-600:#12C99B; --bm-mint-ink:#0BAF86; --bm-mint-light:#E6FBF4;
  --bm-teal:#0BAF86; --bm-amber:#EF9F27; --bm-coral:#D85A30;
  --bm-white:#FDFDFB; --bm-ink:#1A2230; --bm-ink-60:rgba(26,34,48,.62); --bm-ink-40:rgba(26,34,48,.44);
  --bm-line:rgba(26,34,48,.12); --bm-field:#F1F5F9;
  --f-display:"Playfair Display","Noto Sans KR",serif;
  --f-ui:"Inter","Noto Sans KR",sans-serif;
  --f-body:"Noto Sans KR","Inter",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }

/* ── 로고 (카드형 페이지) ── */
.bm-logo{ display:flex; align-items:center; gap:10px; }
.bm-logo__mark{ width:26px; height:26px; border-radius:8px; position:relative; background:radial-gradient(circle at 30% 30%, var(--bm-purple-300), var(--bm-purple) 60%), var(--bm-purple); }
.bm-logo__mark::after{ content:""; position:absolute; inset:0; border-radius:8px; background:radial-gradient(circle at 72% 78%, rgba(22,224,174,.95), transparent 48%); mix-blend-mode:screen; }
.bm-logo__type{ font-family:var(--f-ui); font-weight:700; font-size:17px; }

/* ── 중앙 카드형 레이아웃 (비밀번호 찾기 / 재설정) ── */
.pg-center{ font-family:var(--f-body); color:var(--bm-ink); min-height:100vh; display:flex; justify-content:center; padding:24px;
  background:radial-gradient(120% 120% at 80% 0%, #e7f0f7 0%, var(--bm-white) 46%); -webkit-font-smoothing:antialiased; }
/* 내용이 화면보다 길어도 상단이 잘리지 않게 — 짧으면 세로 중앙, 길면 위부터 스크롤 */
.pg-center > *{ margin-top:auto; margin-bottom:auto; }
.bm-card{ width:100%; max-width:440px; background:#fff; border:1px solid var(--bm-line); border-radius:20px; padding:clamp(28px,5vw,40px); box-shadow:0 30px 70px -30px rgba(26,24,22,.25); }
.bm-card .bm-logo{ margin-bottom:22px; }
.bm-card h1{ font-family:var(--f-display); font-weight:700; font-size:28px; letter-spacing:-.01em; margin:0 0 8px; }
.bm-card .sub{ font-size:14px; color:var(--bm-ink-60); line-height:1.6; margin:0 0 24px; }
.bm-card label{ display:block; font-family:var(--f-ui); font-size:13px; font-weight:600; margin-bottom:7px; }
.field{ margin-bottom:14px; } .wrap{ position:relative; }
.input{ width:100%; height:50px; padding:0 15px; border-radius:12px; background:var(--bm-field); border:1.5px solid transparent; font-size:15px; font-family:var(--f-body); transition:.2s var(--ease); }
.input--pw{ padding-right:46px; }
.input:focus{ outline:none; background:#fff; border-color:var(--bm-purple); }
.toggle{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:9px; color:var(--bm-ink-40); display:flex; align-items:center; justify-content:center; }
.toggle:hover{ color:var(--bm-ink); background:rgba(0,0,0,.04); }
.err{ font-family:var(--f-ui); font-size:12.5px; color:var(--bm-coral); margin:6px 2px 0; min-height:1em; }
.btn{ display:flex; align-items:center; justify-content:center; width:100%; height:50px; border-radius:12px; font-family:var(--f-ui); font-weight:600; font-size:15px; background:var(--bm-purple); color:#fff; margin-top:8px; box-shadow:0 10px 26px -10px rgba(31,58,95,.55); transition:.2s var(--ease); text-decoration:none; }
.btn:hover{ background:var(--bm-purple-600); transform:translateY(-2px); }
.btn:disabled{ opacity:.6; cursor:progress; transform:none; }
.foot{ text-align:center; margin-top:20px; font-family:var(--f-ui); font-size:13.5px; color:var(--bm-ink-60); }
.foot a{ color:var(--bm-purple); font-weight:600; } .foot a:hover{ text-decoration:underline; }
.done{ text-align:center; padding:8px 0; }
.done__ic{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:rgba(29,158,117,.12); color:var(--bm-teal); display:flex; align-items:center; justify-content:center; font-size:28px; }
.done p{ font-size:14.5px; color:var(--bm-ink-60); line-height:1.7; margin:0 0 8px; }
.note{ font-family:var(--f-ui); font-size:12px; color:var(--bm-purple); background:var(--bm-purple-light); padding:8px 12px; border-radius:9px; margin:0 0 18px; display:none; }

/* ── 문서 페이지 (이용약관 / 개인정보처리방침) ── */
.lg-body{ font-family:var(--f-body); color:var(--bm-ink); background:var(--bm-white); -webkit-font-smoothing:antialiased; line-height:1.75; }
.lg-body a{ color:var(--bm-purple); }
.lg-top{ border-bottom:1px solid var(--bm-line); }
.lg-top__in{ max-width:820px; margin:0 auto; padding:20px clamp(20px,5vw,32px); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lg-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-family:var(--f-ui); font-weight:700; font-size:17px; }
.lg-logo__mark{ width:24px; height:24px; border-radius:7px; position:relative; background:radial-gradient(circle at 30% 30%, #4E6A8F, var(--bm-purple) 60%), var(--bm-purple); }
.lg-logo__mark::after{ content:""; position:absolute; inset:0; border-radius:7px; background:radial-gradient(circle at 72% 78%, rgba(22,224,174,.95), transparent 48%); mix-blend-mode:screen; }
.lg-back{ font-family:var(--f-ui); font-size:13.5px; font-weight:600; color:var(--bm-ink-60); text-decoration:none; }
.lg-back:hover{ color:var(--bm-ink); }
.lg-wrap{ max-width:820px; margin:0 auto; padding:clamp(32px,6vw,56px) clamp(20px,5vw,32px) 80px; }
.lg-eyebrow{ font-family:var(--f-ui); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--bm-purple); margin:0 0 10px; }
.lg-title{ font-family:var(--f-display); font-weight:700; font-size:clamp(28px,4vw,38px); letter-spacing:-.01em; margin:0 0 10px; }
.lg-meta{ font-family:var(--f-ui); font-size:13px; color:var(--bm-ink-40); margin:0 0 26px; }
.lg-intro{ font-size:14.5px; color:var(--bm-ink); margin:0 0 30px; }
.lg-note{ background:var(--bm-purple-light); border-radius:12px; padding:16px 18px; margin:0 0 32px; font-size:13.5px; color:var(--bm-ink-60); }
.lg-note b{ color:var(--bm-ink); }
.lg-note ul{ margin:8px 0 0; padding-left:18px; }
.lg-wrap h2{ font-family:var(--f-ui); font-size:17px; font-weight:700; margin:34px 0 10px; }
.lg-wrap p{ font-size:14.5px; color:var(--bm-ink); margin:0 0 12px; }
.lg-wrap ol, .lg-wrap ul{ font-size:14.5px; margin:0 0 12px; padding-left:22px; }
.lg-wrap li{ margin-bottom:6px; }
.lg-wrap table{ width:100%; border-collapse:collapse; font-size:13.5px; margin:6px 0 16px; }
.lg-wrap th, .lg-wrap td{ border:1px solid var(--bm-line); padding:9px 12px; text-align:left; vertical-align:top; }
.lg-wrap th{ background:var(--bm-field); font-family:var(--f-ui); font-weight:600; white-space:nowrap; }
.lg-tablewrap{ overflow-x:auto; }
.lg-foot{ border-top:1px solid var(--bm-line); margin-top:48px; padding-top:22px; font-family:var(--f-ui); font-size:12.5px; color:var(--bm-ink-40); display:flex; gap:18px; flex-wrap:wrap; }
.lg-foot a{ color:var(--bm-ink-60); text-decoration:none; }
.lg-foot a:hover{ color:var(--bm-ink); }

/* 모달(iframe) 임베드 시 헤더·푸터 숨김 */
.embed .lg-top{ display:none; }
.embed .lg-foot{ display:none; }
.embed .lg-wrap{ padding-top:22px; }