:root{
  /* ── 하루연산 브랜드 팔레트(CI/BI) ──
     Sky #4DAAF7 · Navy #1F2D5A · Mint #7ED5C2 · Yellow #FFD15C · LightGray #F2F4F7 */
  --blue:#4daaf7; --blue-d:#2f8fd8; --blue-l:#d7ecfd; --blue-xl:#eff7ff;
  --navy:#1f2d5a; --navy-d:#16204a;
  --yellow:#ffd15c; --yellow-l:#fff2d0;
  --mint:#7ed5c2; --mint-l:#e4f7f2;
  --green:#17a184; --green-l:#dcf4ee;      /* 성공(정답·완료) = 브랜드 민트-틸 계열 */
  --amber:#c98a1e; --amber-l:#fff2d0;
  --red:#e5544b; --red-l:#fde8e6;
  --ink:#25324f; --muted:#6b7a99; --line:#e5eaf1; --paper:#ffffff; --bg:#f2f4f7;
  --radius:16px; --shadow:0 2px 10px rgba(31,45,90,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* 인라인 SVG 아이콘(_icons.html) — currentColor, 텍스트 옆 정렬. PC/폰 폰트 무관 동일 렌더 */
.ic{width:1.08em; height:1.08em; display:inline-block; vertical-align:-0.17em; flex:0 0 auto}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.55;
}
a{color:inherit;text-decoration:none}
header.appbar{
  position:sticky; top:0; z-index:20; background:linear-gradient(135deg,var(--blue),var(--navy));
  color:#fff; padding:14px 22px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow);
}
.logo{font-size:22px; font-weight:800; letter-spacing:-.5px; display:flex; align-items:center; gap:9px}
.logo .dot{background:var(--yellow); color:#7c4a03; border-radius:9px; padding:2px 9px; font-size:16px}
/* ── 브랜드 로고(CI 이미지) 배치 ──
   흰/밝은 배경(로그인·푸터)=풀컬러 그대로 / 색 배경(네이비 헤더)=흰 칩+흰 워드마크(보색)로 선명하게 */
.w1, .w2{white-space:nowrap}          /* flex 안에서 '하루'·'연산'이 세로로 쪼개지지 않게 */
/* 헤더(네이비 그라디언트=색 배경): 반전(흰색) CI 로고 이미지 그대로 — 보색으로 선명 */
.logo{flex:0 0 auto}
.logo .logo-white{height:32px; width:auto; display:block}
/* 로그인/회원가입: 전체 로고(아이콘+워드마크+슬로건) 이미지, 카드 위 중앙 */
.brand .bl{display:block}
.brand-logo{display:block; margin:0 auto; width:auto; max-width:290px; height:auto}
/* 푸터: 가로형 로고(아이콘+워드마크) */
.ft-logo{display:block; height:28px; width:auto}
.tag{margin-left:auto; font-size:13px; opacity:.9; background:rgba(255,255,255,.15); padding:5px 12px; border-radius:20px}
nav.steps{
  background:#fff; border-bottom:1px solid var(--line); padding:12px 16px;
  display:flex; gap:6px; overflow-x:auto; position:sticky; top:56px; z-index:15;
}
nav.steps a{
  flex:0 0 auto; border:1.5px solid var(--line); background:#fff; color:var(--muted);
  padding:9px 14px; border-radius:30px; font-size:14px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; gap:7px; transition:.15s; white-space:nowrap;
}
nav.steps a .num{
  background:var(--bg); color:var(--muted); width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:800;
}
nav.steps a:hover{border-color:var(--blue); color:var(--blue)}
nav.steps a.active{background:var(--blue); border-color:var(--blue); color:#fff}
nav.steps a.active .num{background:var(--yellow); color:#7c4a03}
nav.steps a.disabled{opacity:.45; pointer-events:none}
nav.steps .arrow{color:#cbd5e1; align-self:center; flex:0 0 auto; font-size:13px}

main{width:100%; max-width:760px; margin:0 auto; padding:26px 18px 80px}
/* ↑ width:100% 필수 — body.authpage/infopage(flex column)에서 margin:auto가 있으면
   flex가 stretch 대신 내용폭으로 shrink-wrap → 회원가입이 로고폭(290px)만큼 좁아지던 버그 방지 */
h2.title{font-size:26px; font-weight:800; margin:0 0 4px; letter-spacing:-.6px; color:var(--navy)}
h2.title .tsub{font-size:15px; color:var(--muted); font-weight:700}
p.sub{color:var(--muted); margin:0 0 22px; font-size:15px}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); margin-bottom:18px}
.card h3{margin:0 0 14px; font-size:18px; font-weight:800; color:var(--navy)}
label.fld{display:block; font-weight:700; font-size:14px; margin:14px 0 6px}
input[type=text], select{
  width:100%; padding:13px 14px; font-size:17px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
}
input[type=text]:focus, select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-l)}
.btn{
  border:none; border-radius:11px; padding:13px 22px; font-size:16px; font-weight:800; cursor:pointer; transition:.15s;
  background:var(--blue); color:#fff; box-shadow:var(--shadow);
}
.btn:hover{background:var(--blue-d)}
.btn.big{width:100%; padding:16px; font-size:18px}
.btn.ghost{background:#fff; color:var(--blue); border:1.5px solid var(--blue); box-shadow:none}
.btn.ghost:hover{background:var(--blue-xl)}
.btn.yellow{background:var(--yellow); color:#7c4a03}
.btn.yellow:hover{background:#f59e0b}
.btn:disabled{background:#cbd5e1; color:#fff; cursor:not-allowed; box-shadow:none}
.btn.sm{padding:8px 14px; font-size:14px; border-radius:9px}
.hint{background:var(--yellow-l); border:1px solid #fcd34d; color:#7c4a03; padding:13px 16px; border-radius:11px; font-size:14px; margin-bottom:18px; display:flex; gap:10px}
.hint b{font-weight:800}
.student-row{display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:11px; margin-top:10px; cursor:pointer}
.student-row:hover{border-color:var(--blue); background:var(--blue-xl)}
.avatar{width:40px; height:40px; border-radius:50%; background:var(--blue-l); color:var(--blue-d); display:grid; place-items:center; font-weight:800}
.grade-pill{margin-left:auto; background:var(--bg); color:var(--muted); padding:4px 11px; border-radius:20px; font-size:13px; font-weight:700}
.dom{display:inline-block; font-size:11px; font-weight:800; padding:1px 8px; border-radius:20px; vertical-align:middle}

/* 화면2 3단 탐색 */
.gtabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap}
.gtabs button{border:1.5px solid var(--line); background:#fff; color:var(--muted); font-weight:800; font-size:15px; padding:9px 16px; border-radius:11px; cursor:pointer; transition:.12s}
.gtabs button:hover{border-color:var(--blue); color:var(--blue)}
.gtabs button.on{background:var(--blue); border-color:var(--blue); color:#fff}
.book{border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; background:#fff}
.book-head{display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; background:var(--blue-xl); font-weight:800}
.book-head:hover{background:#e0ebff}
.book .bk-caret{transition:.15s; color:var(--blue); font-size:13px}
.book.open .bk-caret{transform:rotate(90deg)}
.book .bk-range{margin-left:auto; font-size:11px; color:var(--muted); font-family:ui-monospace,monospace; background:#fff; border:1px solid var(--line); padding:2px 8px; border-radius:20px}
.book-body{display:none; padding:14px 16px}
.book.open .book-body{display:block}
.steps-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
.stepcard{border:1.5px solid var(--line); border-radius:12px; padding:11px 13px; cursor:pointer; display:flex; align-items:center; gap:10px; background:#fff; transition:.12s}
.stepcard:hover{border-color:var(--blue)}
.stepcard.sel{border-color:var(--blue); background:var(--blue-xl); box-shadow:0 0 0 2px var(--blue-l) inset}
.stepcard .sbox{width:22px; height:22px; border:2px solid #cbd5e1; border-radius:7px; flex:0 0 auto; display:grid; place-items:center; color:#fff; font-size:14px; font-weight:900}
.stepcard.sel .sbox{background:var(--blue); border-color:var(--blue)}
.stepcard .sname{font-weight:700; font-size:14px; line-height:1.25}
.stepcard .smeta{font-size:11px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.stepcard .skey{font-family:ui-monospace,monospace}
.stepcard .mstat{font-size:11px;font-weight:800;margin-top:3px}
.selbar{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 22px; margin-top:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap} /* 카드와 동일한 안쪽 여백(22px)으로 내용 정렬 — 전엔 padding:0이라 글자·버튼이 박스 가장자리에 붙어 어긋나 보였음 */
.selcount{font-weight:800; font-size:15px}
.selcount b{color:var(--blue)}
/* 문항 수(학습량) 세그먼트 선택 */
.countseg{display:inline-flex; flex-wrap:wrap; gap:6px}
.countseg button{border:1.5px solid var(--line); background:#fff; color:var(--muted); font-weight:800; font-size:14px;
  padding:8px 14px; border-radius:9px; cursor:pointer; transition:.12s}
.countseg button:hover{border-color:var(--blue); color:var(--blue)}
.countseg button.on{background:var(--blue); border-color:var(--blue); color:#fff}
.countsel{width:auto; padding:9px 12px; font-size:14px; font-weight:700; border:1.5px solid var(--line);
  border-radius:9px; background:#fff; color:var(--ink)}
.countsel:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-l)}

/* dashboard */
.stat-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.stat-head .avatar{width:52px; height:52px; font-size:20px}

/* 대시보드 탭(회차 이력 / 단계별 숙련도) — 08_ux_mockup_dashboard 미러 */
.dtabs{display:flex; gap:8px; margin-bottom:14px}
.dtabs button{border:1.5px solid var(--line); background:#fff; color:var(--muted); font-weight:800; font-size:15px;
  padding:11px 20px; border-radius:11px 11px 0 0; cursor:pointer; transition:.12s; display:flex; align-items:center; gap:8px}
.dtabs button:hover{border-color:var(--blue); color:var(--blue)}
.dtabs button.on{background:var(--blue); border-color:var(--blue); color:#fff}
.dtabs button .cnt{background:rgba(0,0,0,.12); border-radius:20px; padding:1px 8px; font-size:12px}
.dtabs button.on .cnt{background:rgba(255,255,255,.25)}
.tabpanel{display:none}
.tabpanel.on{display:block}

/* 공통: 한 줄 로그 리스트(회차 이력 · 단계별 숙련도 동일 UI/UX) */
.loglist{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.logrow{display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line); transition:.1s}
.logrow:last-child{border-bottom:none}
.logrow:hover{background:var(--blue-xl)}
.loggroup{padding:10px 18px 6px; font-size:12px; font-weight:800; color:var(--muted); background:#f8fafc; border-bottom:1px solid var(--line)}
.loggroup:not(:first-child){border-top:1px solid var(--line)}

/* 회차 행 */
.rnum{flex:0 0 auto; width:52px; font-weight:900; font-size:14px; color:var(--blue-d)}
.rdot{flex:0 0 auto; width:9px; height:9px; border-radius:50%}
.rdot.done{background:var(--green)}
.rdot.wait{background:var(--amber)}
.rmain{flex:1 1 auto; min-width:0}
.rtitle{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rmeta{font-size:12.5px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rbadge{flex:0 0 auto; font-size:11px; font-weight:800; padding:3px 9px; border-radius:20px; white-space:nowrap}
.rbadge.done{background:var(--green-l); color:#166534}
.rbadge.wait{background:var(--amber-l); color:#92400e}
.rrate{flex:0 0 auto; width:46px; text-align:right; font-weight:800; font-size:14.5px}
.racts{flex:0 0 auto; display:flex; gap:4px}
.rowicon{width:30px; height:30px; border-radius:8px; border:1.5px solid var(--line); background:#fff; color:var(--muted);
  display:grid; place-items:center; font-size:14px; cursor:pointer; text-decoration:none}
.rowicon:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-xl)}

/* 숙련도 행(회차 행과 동일 골격, 값 영역만 다름) */
.mlight{flex:0 0 auto; width:9px; height:9px; border-radius:50%}
.mlight.green{background:var(--green)} .mlight.amber{background:var(--amber)} .mlight.red{background:var(--red)}
.mkey{font-family:ui-monospace,monospace; font-size:11px; color:var(--muted); margin-left:6px}
.mbarwrap{flex:0 0 130px; height:8px; background:var(--bg); border-radius:20px; overflow:hidden}
.mbarwrap i{display:block; height:100%; border-radius:20px}
.mbarwrap i.green{background:var(--green)} .mbarwrap i.amber{background:var(--amber)} .mbarwrap i.red{background:var(--red)}
.mval{flex:0 0 auto; font-size:13px; font-weight:800; width:104px; text-align:right}
.lvtag{background:var(--blue-l); color:var(--blue-d); font-size:11px; font-weight:800; padding:1px 7px; border-radius:20px; margin-left:5px}

.frontier{background:var(--blue-xl); border:1px solid var(--blue-l); border-radius:12px; padding:13px 15px; margin-bottom:14px; font-size:14px}
.frontier b{color:var(--blue-d)}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); padding:12px 18px; border-top:1px solid var(--line)}
.legend span{display:flex; align-items:center; gap:6px}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

@media(max-width:600px){
  .rmeta, .mkey{display:none}
  .racts{gap:2px}
}

/* paper preview */
.paper-tabs{display:flex; gap:8px; margin-bottom:14px; align-items:center; flex-wrap:wrap}
.paper-tabs .tabbtn{border:1.5px solid var(--line); background:#fff; padding:9px 18px; border-radius:10px 10px 0 0; font-weight:800; cursor:pointer; color:var(--muted)}
.paper-tabs .tabbtn.on{background:var(--blue); color:#fff; border-color:var(--blue)}
.paper-wrap{background:#e2e8f0; border-radius:14px; padding:16px}
.paper-frame{width:100%; height:760px; border:none; background:#fff; border-radius:3px; box-shadow:0 4px 18px rgba(0,0,0,.16)}
.pdf-frame{width:100%; height:85vh; min-height:720px; border:none; background:#fff; border-radius:3px; box-shadow:0 4px 18px rgba(0,0,0,.16)}
.html-frame{width:100%; height:80vh; min-height:640px; border:none; background:#e2e8f0; border-radius:6px}  /* HTML 미리보기: 내부에 A4 시트가 스크롤됨 */
.eco-note{margin-left:auto;font-size:12px;font-weight:700;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:14px;padding:4px 12px}

/* grading */
.mode-tabs{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.mode-tabs button{border:1.5px solid var(--line); background:#fff; padding:9px 16px; border-radius:11px; font-weight:800; cursor:pointer; color:var(--muted)}
.mode-tabs button.on{background:var(--blue); color:#fff; border-color:var(--blue)}
.prog{display:flex; align-items:center; gap:12px; margin-bottom:16px; position:sticky; top:112px; background:var(--bg); padding:8px 0; z-index:5}
.prog .pbar{flex:1; height:12px; background:#e2e8f0; border-radius:20px; overflow:hidden}
.prog .pbar > i{display:block; height:100%; background:var(--green); width:0; transition:width .2s}
.prog .ptxt{font-weight:800; font-size:14px; white-space:nowrap}
.gblock{border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; background:#fff}
.gblock.confirmed{border-color:#86efac}
.gbhead{display:flex; align-items:center; gap:10px; padding:13px 15px; flex-wrap:wrap; background:#f8fafc}
.gblock.confirmed .gbhead{background:#f0fdf4}
.gbtitle{font-weight:800; font-size:15px}
.gbtitle .gbcount{font-size:12px; color:var(--muted); font-weight:700; margin-left:4px}
.gbstate{font-size:12px; font-weight:800; padding:3px 10px; border-radius:20px; background:var(--amber-l); color:#92400e}
.gblock.confirmed .gbstate{background:var(--green-l); color:#166534}
.gbrows{display:none; padding:8px 15px 14px; border-top:1px solid var(--line)}
.gbrows.show{display:block}
.grid-hint{font-size:12px; color:var(--muted); padding:6px 0 8px}
.grow{display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; margin-bottom:7px; background:#fff}
.grow.set-o{border-color:#bbf7d0; background:#f0fdf4}
.grow.set-x{border-color:#fca5a5; background:#fef2f2}
.grow .gn{font-weight:800; width:28px; flex:0 0 auto}
.grow .gq{flex:1; font-size:14px; min-width:0}
.grow .gq .qa{color:var(--muted); font-size:12px}
.ox{display:flex; gap:6px; flex:0 0 auto}
.ox button{width:42px; height:42px; border-radius:11px; border:2px solid var(--line); background:#fff; font-size:19px; font-weight:900; cursor:pointer; color:#94a3b8}
.ox button.o.on{background:var(--green); border-color:var(--green); color:#fff}
.ox button.x.on{background:var(--red); border-color:var(--red); color:#fff}
.num-panel{display:none}
.num-panel.show{display:block}
.savebar{position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line); padding:14px 0; margin-top:10px}
.frac{display:inline-flex; flex-direction:column; text-align:center; vertical-align:middle; margin:0 3px; line-height:1.02}
.frac .fn{border-bottom:1px solid currentColor; padding:0 5px}
.frac .fd{padding:0 5px}

/* report */
.kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px}
@media(max-width:600px){.kpi{grid-template-columns:1fr}}
.kpi .box{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center; box-shadow:var(--shadow)}
.kpi .box .k{font-size:13px; color:var(--muted); font-weight:700}
.kpi .box .v{font-size:30px; font-weight:900; margin-top:4px; color:var(--navy)}
table.rep{width:100%; border-collapse:collapse; font-size:14px}
table.rep th,table.rep td{padding:11px 10px; border-bottom:1px solid var(--line); text-align:left}
table.rep th{font-size:12px; color:var(--muted); font-weight:800; background:var(--bg)}
.lvchg{font-weight:800; display:inline-flex; align-items:center; gap:4px}
.up{color:var(--green)} .down{color:var(--red)} .keep{color:var(--muted)} .passed{color:var(--blue-d)}
.repbar{height:12px; background:var(--bg); border-radius:20px; overflow:hidden; min-width:90px}
.repbar > i{display:block; height:100%; border-radius:20px}
.comment{background:var(--red-l); border:1px solid #fca5a5; color:#991b1b; padding:14px 16px; border-radius:12px; font-weight:700; margin:6px 0 18px}
.distro{display:flex; height:36px; border-radius:10px; overflow:hidden; margin:6px 0 6px; border:1px solid var(--line)}
.distro > div{display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:800; min-width:0; overflow:hidden}
.next-item{border:1px solid var(--line); border-left:5px solid var(--blue); border-radius:10px; padding:13px 15px; margin-bottom:10px}
.next-item .nt{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.next-item .slot{font-size:11px; font-weight:800; padding:2px 9px; border-radius:20px}
.slot.bo{background:var(--red-l); color:#991b1b}
.slot.ma{background:var(--blue-l); color:var(--blue-d)}
.slot.ex{background:var(--green-l); color:#166534}
.slot.co{background:var(--yellow-l); color:#92400e}
.next-item .nlab{font-weight:800; font-size:15px}
.next-item .nkey{font-size:11px; color:var(--muted); font-family:ui-monospace,monospace}
.next-item .ncnt{margin-left:auto; font-size:13px; font-weight:800; color:var(--blue-d); background:var(--blue-xl); border-radius:20px; padding:3px 11px}
.next-item .nlv{font-size:12px; font-weight:800; color:var(--muted)}
.next-item .why{color:var(--muted); font-size:13px; margin-top:6px}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:#111827; color:#fff; padding:12px 20px; border-radius:30px; font-weight:700; font-size:14px; opacity:0; transition:.25s; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.3)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.err{background:var(--red-l);border:1px solid #fca5a5;color:#991b1b;padding:12px 16px;border-radius:11px;margin-bottom:16px;font-weight:700}

/* ============ 회원 체계 (로그인/가입/자녀 관리/네비) ============ */
:root{--kakao:#FEE500; --kakao-ink:#191600}
input[type=email], input[type=password]{
  width:100%; padding:13px 14px; font-size:17px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
}
input[type=email]:focus, input[type=password]:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-l)}
input.err{border-color:var(--red); box-shadow:0 0 0 3px var(--red-l)}
label.fld .opt{color:var(--muted); font-weight:600; font-size:12px; margin-left:6px}
.fldhint{font-size:12px; color:var(--muted); margin:5px 2px 0}
.btn.gray{background:#fff; color:var(--muted); border:1.5px solid var(--line); box-shadow:none}
.btn.gray:hover{border-color:var(--muted); color:var(--ink)}
.btn.danger{background:var(--red); color:#fff}
.btn.danger:hover{background:#b91c1c}

/* auth 카드 */
.authwrap{max-width:460px; width:100%; margin:0 auto}
.brand{text-align:center; margin:6px 0 20px}
.brand .bl{font-size:30px; font-weight:900; letter-spacing:-1px; color:var(--navy); display:inline-flex; align-items:center; gap:10px}
.brand .bl .dot{background:var(--yellow); color:#7c4a03; border-radius:11px; padding:2px 12px; font-size:24px}
.brand .bs{color:var(--muted); font-size:14px; margin-top:6px}
.divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; font-weight:700; margin:18px 0}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}
.oauth{display:flex; flex-direction:column; gap:10px}
.obtn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:14px; border-radius:11px; font-size:16px; font-weight:800; cursor:pointer; transition:.12s; border:1.5px solid var(--line)}
.obtn:hover{filter:brightness(.98)}
.obtn .oi{width:20px; height:20px; flex:0 0 auto; display:block}   /* 공식 브랜드 로고 SVG */
.obtn.google{background:#fff; color:#3c4043; border-color:#dadce0}
.obtn.kakao{background:var(--kakao); color:var(--kakao-ink); border-color:var(--kakao)}
.authfoot{text-align:center; margin-top:18px; font-size:14px; color:var(--muted)}
.authfoot a{color:var(--blue); font-weight:800}
.authfoot a:hover{text-decoration:underline}
.flink{text-align:center; margin-top:10px; font-size:13px}
.flink a{color:var(--muted); text-decoration:underline}
.infobadge{background:var(--blue-xl); border:1px solid var(--blue-l); color:var(--blue-d); padding:12px 15px; border-radius:11px; font-size:13.5px; margin-bottom:18px; display:flex; gap:9px; align-items:flex-start}
.infobadge b{font-weight:800}
.errbox{background:var(--red-l); border:1px solid #fca5a5; color:#991b1b; padding:12px 15px; border-radius:11px; font-size:14px; font-weight:700; margin-bottom:14px; display:none; gap:9px; align-items:flex-start}
.errbox.show{display:flex}

/* provider 배지 */
.pbadge{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; padding:3px 10px; border-radius:20px; vertical-align:middle}
.pbadge .pi{width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:900; flex:0 0 auto}
.pbadge.email{background:var(--blue-l); color:var(--blue-d)} .pbadge.email .pi{background:var(--blue-d); color:#fff}
.pbadge.google{background:#f1f3f4; color:#3c4043; border:1px solid #dadce0} .pbadge.google .pi{background:#fff; color:#4285F4; border:1px solid #eee; font-family:Georgia,serif}
.pbadge.kakao{background:var(--kakao); color:var(--kakao-ink)} .pbadge.kakao .pi{background:var(--kakao-ink); color:var(--kakao); border-radius:5px; width:16px; height:15px; font-size:10px}
.pbadge.onblue{background:rgba(255,255,255,.2); color:#fff}
.pbadge.onblue .pi{background:#fff; color:var(--blue-d)}

/* appbar 회원 영역 + 자녀 전환 */
.member-area{margin-left:auto; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.childsel{position:relative}
.childsel summary{list-style:none; background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:20px; padding:6px 13px; font-size:13.5px; font-weight:800; cursor:pointer; display:flex; align-items:center; gap:7px}
.childsel summary::-webkit-details-marker{display:none}
.childsel summary:hover{background:rgba(255,255,255,.26)}
.childsel .caret{font-size:10px}
.childsel[open] .caret{transform:rotate(180deg)}
.childsel .menu{position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(15,23,42,.2); min-width:230px; padding:7px; z-index:30}
.childsel .menu .mi{display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:9px; cursor:pointer; color:var(--ink)}
.childsel .menu .mi:hover{background:var(--blue-xl)}
.childsel .menu .mi.cur{background:var(--blue-l)}
.childsel .menu .mi .mav{width:30px; height:30px; border-radius:50%; background:var(--yellow-l); color:var(--amber); display:grid; place-items:center; font-weight:800; font-size:14px; flex:0 0 auto}
.childsel .menu .mi .mn{font-weight:800; font-size:14px; display:block}
.childsel .menu .mi .mg{font-size:11px; color:var(--muted)}
.childsel .menu .mi .chk{margin-left:auto; color:var(--blue); font-weight:900}
.childsel .menu .sep{height:1px; background:var(--line); margin:6px 4px}
.childsel .menu .add{color:var(--blue); font-weight:800; font-size:13.5px; justify-content:center}
.plogout{background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:20px; padding:6px 13px; font-size:13.5px; font-weight:800; cursor:pointer}
.plogout:hover{background:rgba(255,255,255,.26)}

/* 자녀 카드 (화면 C) */
.child{display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; transition:.12s}
.child:hover{border-color:var(--blue-l); box-shadow:var(--shadow)}
.child .cav{width:48px; height:48px; border-radius:50%; background:var(--yellow-l); color:var(--amber); display:grid; place-items:center; font-weight:800; font-size:20px; flex:0 0 auto}
.child .cinfo{min-width:0}
.child .cname{font-weight:800; font-size:17px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.child .cname .grade-pill{margin-left:0}
.child .cmeta{font-size:13px; color:var(--muted); margin-top:3px}
.child .cmeta b{color:var(--ink)}
.child .cacts{margin-left:auto; display:flex; gap:7px; flex-wrap:wrap; flex:0 0 auto; align-items:center}
.iconbtn{border:1.5px solid var(--line); background:#fff; color:var(--muted); border-radius:9px; padding:8px 11px; font-size:13px; font-weight:700; cursor:pointer; display:inline-block}
.iconbtn:hover{border-color:var(--blue); color:var(--blue)}
.iconbtn.del:hover{border-color:var(--red); color:var(--red)}
@media(max-width:620px){.child{flex-wrap:wrap} .child .cacts{margin-left:0; width:100%}}
.child.editing{border-color:var(--blue); background:var(--blue-xl); display:block}
.editgrid{display:grid; grid-template-columns:1fr 130px; gap:10px; margin:4px 0 10px}
@media(max-width:560px){.editgrid{grid-template-columns:1fr}}
.addcard{border:2px dashed #cbd5e1; border-radius:12px; padding:18px; background:#fbfdff}
.addcard h3{margin:0 0 4px; font-size:16px; font-weight:800; display:flex; align-items:center; gap:7px}
.addrow{display:grid; grid-template-columns:1fr 130px auto; gap:10px; align-items:end; margin-top:12px}
@media(max-width:560px){.addrow{grid-template-columns:1fr}}
.empty{text-align:center; padding:34px 20px; color:var(--muted)}
.empty .ei{font-size:44px}
.empty h3{font-size:18px; color:var(--ink); margin:10px 0 4px}

/* ── 공통 푸터(회사 정보) — bm.plataid.com 미러, 무채색·저채도 ── */
.site-footer{border-top:1px solid var(--line); background:#fff; margin-top:40px; padding:26px 18px 34px}
.site-footer .ft-inner{max-width:760px; margin:0 auto; color:var(--muted); font-size:12.5px; line-height:1.7}
.site-footer .ft-brand{font-size:16px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:7px; margin-bottom:8px}
.site-footer .ft-brand .dot{background:var(--yellow); color:#7c4a03; border-radius:8px; padding:1px 7px; font-size:13px}
.site-footer .ft-links{margin-bottom:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.site-footer .ft-links a{color:var(--ink); font-weight:700}
.site-footer .ft-links a:hover{color:var(--blue)}
.site-footer .ft-links span{color:var(--line)}
.site-footer .ft-company{display:flex; flex-direction:column; gap:4px; margin-bottom:12px}
.site-footer .ft-company .ft-line{display:flex; flex-wrap:wrap; gap:2px 14px}  /* 주소=단독 줄, 고객센터·이메일=같은 줄 */
.site-footer .ft-company b{color:var(--ink)}
.site-footer .ft-copy{font-size:12px; color:#94a3b8; border-top:1px solid var(--line); padding-top:12px}

/* 로그인/가입(auth) 화면: 푸터를 화면 하단에 고정(스티키 푸터). 내용이 길면 자연스럽게 아래로 흐름(오버랩 없음). */
body.authpage, body.infopage{min-height:100vh; display:flex; flex-direction:column}
body.authpage > main, body.infopage > main{flex:1 0 auto}
body.authpage .site-footer{margin-top:0}

/* ── 정보 문서 페이지(이용약관·개인정보·FAQ·공지) ── */
.doc{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 30px 34px}
.doc-title{font-size:26px; font-weight:900; margin:0 0 4px; letter-spacing:-.6px; color:var(--navy)}
.doc-updated{color:var(--muted); font-size:13.5px; margin:0 0 22px}
.doc h2{font-size:16.5px; font-weight:800; margin:24px 0 8px; color:var(--ink)}
.doc h2:first-of-type{margin-top:8px}
.doc p{font-size:14.5px; color:#334155; margin:0 0 10px; line-height:1.7}
.doc ul{margin:0 0 12px; padding-left:20px}
.doc li{font-size:14.5px; color:#334155; margin:4px 0; line-height:1.65}
.doc b{color:var(--ink)}
.doc-note{background:var(--blue-xl); border:1px solid var(--blue-l); border-radius:10px; padding:11px 14px; font-size:13.5px; color:var(--blue-d)}
.doc-company{background:var(--bg); border-radius:10px; padding:13px 15px; font-size:13.5px; color:#475569; line-height:1.7}

/* FAQ 아코디언 */
.faq{border:1px solid var(--line); border-radius:11px; margin-bottom:10px; overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:14px 16px; font-weight:800; font-size:15px; color:var(--ink); background:#fff; display:flex; gap:8px; align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"▸"; color:var(--blue); font-size:13px; margin-top:2px; transition:.15s}
.faq[open] summary::before{transform:rotate(90deg)}
.faq[open] summary{background:var(--blue-xl)}
.faq .faq-a{padding:12px 16px 15px 30px; font-size:14px; color:#334155; line-height:1.7; border-top:1px solid var(--line)}

/* 공지사항 */
.notice{border:1px solid var(--line); border-radius:11px; padding:15px 17px; margin-bottom:12px}
.notice-head{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:7px}
.notice-tag{background:var(--yellow-l); color:#7c4a03; font-size:11px; font-weight:800; padding:2px 9px; border-radius:20px}
.notice-title{font-weight:800; font-size:15.5px}
.notice-date{margin-left:auto; color:var(--muted); font-size:12.5px}
.notice-body{font-size:14px; color:#334155; line-height:1.7}

/* ============================================================
   랜딩(브랜드 홈) 페이지 — 첨부 목업 미러 · .lp-* 스코프(앱 스타일 불간섭)
   무료 강조: .lp-free 배지/하이라이트
   ============================================================ */
.lp{background:#fff; color:var(--ink); word-break:keep-all}  /* 한글 어절 단위 줄바꿈(글자 중간 끊김 방지) */
.lp img{max-width:100%}
/* 랜딩 푸터: 폭을 홈페이지(nav/섹션 1080)와 동일하게(서비스 페이지 760 푸터와 구분) */
.lp-foot{padding-left:0; padding-right:0}
.lp-foot .ft-inner{max-width:1080px; padding:0 20px}
.lp-wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.lp-section{padding:64px 0; scroll-margin-top:76px}  /* 스티키 nav 높이만큼 앵커 오프셋(#faq 등) */
.lp-section.alt{background:var(--bg)}
.lp h2.lp-h{font-size:30px; font-weight:900; text-align:center; color:var(--navy); letter-spacing:-.6px; margin:0 0 8px}
.lp .lp-sub{text-align:center; color:var(--muted); font-size:16px; margin:0 0 36px}
.lp .accent{color:var(--blue)}

/* 상단 Nav */
.lp-nav{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.lp-nav .in{max-width:1080px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:22px}
.lp-nav .lp-logo{height:34px; width:auto; display:block}
.lp-nav .lp-menu{display:flex; gap:26px; margin-left:14px}
.lp-nav .lp-menu a{color:var(--ink); font-weight:700; font-size:15px}
.lp-nav .lp-menu a:hover{color:var(--blue)}
.lp-nav .lp-navcta{margin-left:auto; display:flex; gap:10px; align-items:center}
.lp-btn{display:inline-flex; align-items:center; gap:8px; border-radius:12px; font-weight:800; cursor:pointer;
  border:none; text-decoration:none; transition:.15s; white-space:nowrap}
.lp-btn.primary{background:var(--blue); color:#fff; padding:12px 22px; font-size:16px; box-shadow:0 6px 16px rgba(77,170,247,.35)}
.lp-btn.primary:hover{background:var(--blue-d)}
.lp-btn.ghost{background:#fff; color:var(--navy); border:1.5px solid var(--line); padding:12px 20px; font-size:16px}
.lp-btn.ghost:hover{border-color:var(--blue); color:var(--blue)}
.lp-btn.sm{padding:9px 16px; font-size:14px}
.lp-btn.lg{padding:15px 30px; font-size:18px}
.lp-btn.white{background:#fff; color:var(--blue-d)}
.lp-btn.white:hover{background:var(--blue-xl)}
/* 모바일 전용 컨트롤(로그인 아이콘 + 햄버거) + 드롭다운 — 데스크톱 숨김 */
.lp-mobonly{display:none; margin-left:auto; gap:8px; align-items:center}
.lp-loginicon{display:grid; place-items:center; width:40px; height:40px; border-radius:10px; color:var(--navy);
  border:1.5px solid var(--line); background:#fff}
.lp-loginicon:hover{border-color:var(--blue); color:var(--blue)}
.lp-burger{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:40px; height:40px; border-radius:10px; border:1.5px solid var(--line); background:#fff; cursor:pointer; padding:0}
.lp-burger span{display:block; width:18px; height:2px; background:var(--navy); border-radius:2px; transition:.2s}
.lp-nav.open .lp-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.lp-nav.open .lp-burger span:nth-child(2){opacity:0}
.lp-nav.open .lp-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.lp-mnav{display:none; flex-direction:column; gap:2px; padding:8px 20px 16px; border-top:1px solid var(--line); background:#fff}
.lp-mnav a{padding:13px 8px; font-weight:700; font-size:16px; color:var(--navy); border-radius:9px}
.lp-mnav a:hover{background:var(--blue-xl); color:var(--blue)}
.lp-mnav .lp-btn.primary{margin-top:8px; justify-content:center; padding:14px; font-size:16px}
.lp-nav.open .lp-mnav{display:flex}
@media(max-width:760px){
  .lp-nav .lp-menu{display:none}
  .lp-nav .lp-navcta{display:none}   /* 데스크톱 버튼(로그인·무료로 시작) 숨김 → 아이콘+햄버거로 */
  .lp-mobonly{display:flex}
  .lp-nav .in{gap:12px}
}

/* 무료 강조 배지 */
.lp-free{display:inline-flex; align-items:center; gap:7px; background:var(--mint-l); color:#0f8a6d;
  border:1px solid #b8e8dc; border-radius:30px; padding:6px 15px; font-weight:800; font-size:14px}
.lp-free b{color:#0b6b54}
.lp-free .d{width:8px; height:8px; border-radius:50%; background:var(--green)}

/* 히어로 */
.lp-hero{background:linear-gradient(180deg,#fff 0%,var(--blue-xl) 100%)}
.lp-hero .in{max-width:1080px; margin:0 auto; padding:56px 20px 40px; display:grid;
  grid-template-columns:1fr 1fr; gap:24px; align-items:center}
.lp-hero h1{font-size:42px; line-height:1.25; font-weight:900; color:var(--navy); letter-spacing:-1px; margin:16px 0 14px}
.lp-hero p.lead{font-size:18px; color:var(--muted); margin:0 0 26px; line-height:1.6}
.lp-hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.lp-hero .note{color:var(--muted); font-size:14px}
.lp-hero .heroart{text-align:center}
.lp-hero .heroart img{width:100%; max-width:560px}
@media(max-width:860px){
  .lp-hero .in{grid-template-columns:1fr; text-align:center}
  .lp-hero h1{font-size:32px}
  .lp-hero .cta{justify-content:center}
  .lp-hero .lp-free{margin:0 auto}
  .lp-hero .heroart{order:-1}
}

/* 특징 스트립 4 */
.lp-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; background:#fff;
  border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:26px 22px; margin-top:-36px; position:relative; z-index:5}
.lp-strip .it{display:flex; gap:13px; align-items:center}
.lp-strip .it img{width:46px; height:46px; flex:0 0 auto}
.lp-strip .it .t{font-weight:800; color:var(--navy); font-size:16px}
.lp-strip .it .d{font-size:13px; color:var(--muted); margin-top:2px}
@media(max-width:820px){.lp-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.lp-strip{grid-template-columns:1fr}}

/* 특징 카드 4 */
.lp-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.lp-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 20px; text-align:center; box-shadow:var(--shadow); transition:.15s}
.lp-card:hover{transform:translateY(-4px); border-color:var(--blue-l)}
.lp-card img{width:64px; height:64px; margin-bottom:12px}
.lp-card .t{font-weight:800; color:var(--navy); font-size:17px; margin-bottom:8px}
.lp-card .d{font-size:14px; color:var(--muted); line-height:1.6}
@media(max-width:860px){.lp-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.lp-cards{grid-template-columns:1fr}}

/* 시작 3단계 */
.lp-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.lp-step{background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 22px 26px; box-shadow:var(--shadow); text-align:center}
.lp-step .num{width:32px; height:32px; border-radius:50%; background:var(--blue); color:#fff; font-weight:900;
  display:grid; place-items:center; font-size:15px; margin:0 auto 8px}
.lp-step .ill{height:112px; display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.lp-step .ill img{max-height:108px; max-width:78%; width:auto}
.lp-step .t{font-weight:800; color:var(--navy); font-size:18px; margin-bottom:8px}
.lp-step .d{font-size:14px; color:var(--muted); line-height:1.6}
@media(max-width:820px){.lp-steps{grid-template-columns:1fr} .lp-step .ill{height:120px}}

/* 샘플 미리보기 */
.lp-tabs{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:26px}
.lp-tabs button{border:1.5px solid var(--line); background:#fff; color:var(--muted); font-weight:800; font-size:14px;
  padding:9px 16px; border-radius:30px; cursor:pointer; transition:.12s}
.lp-tabs button:hover{border-color:var(--blue); color:var(--blue)}
.lp-tabs button.on{background:var(--blue); border-color:var(--blue); color:#fff}
.lp-sample{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch}
/* 문제지 미리보기와 진도표(단계 구성) 높이 일치 — 둘 다 고정 높이 */
.lp-sample .paper{position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 26px rgba(31,45,90,.12); overflow:hidden; height:540px}
.lp-sample .paper img{display:block; width:100%}
.lp-sample .paper::after{content:""; position:absolute; left:0; right:0; bottom:0; height:64px; background:linear-gradient(rgba(255,255,255,0), #fff); pointer-events:none}
.lp-curric{background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:22px;
  height:540px; display:flex; flex-direction:column}   /* 문제지 미리보기와 높이 일치 */
.lp-curric h3{margin:0 0 14px; font-size:16px; color:var(--navy); font-weight:800}
.lp-curric #lpSteps{flex:1 1 auto}   /* 단계 목록이 남는 높이를 채워 버튼이 아래에 정렬 */
.lp-curric .row{display:flex; align-items:center; gap:12px; padding:12px 12px; border:1px solid var(--line); border-radius:12px; margin-bottom:9px}
.lp-curric .row.on{border-color:var(--blue); background:var(--blue-xl)}
.lp-curric .row .st{width:26px; height:26px; border-radius:8px; background:var(--blue-l); color:var(--blue-d); font-weight:800; font-size:12px; display:grid; place-items:center; flex:0 0 auto}
.lp-curric .row.on .st{background:var(--blue); color:#fff}
.lp-curric .row .nm{font-weight:700; font-size:14px; color:var(--ink); flex:1; min-width:0}
.lp-curric .row .lock{color:#cbd5e1}
.lp-curric .row .star{color:var(--yellow)}
.lp-curric .more{font-size:12.5px; color:var(--muted); text-align:center; padding:10px 0 4px}
@media(max-width:820px){.lp-sample{grid-template-columns:1fr} .lp-sample .paper, .lp-sample .lp-curric{height:auto}}

/* CTA 배너 — 새 배너 이미지(왼쪽 캐릭터+오른쪽 여백) 위에 문구·버튼 오버레이. 배너 파랑에 네이비 텍스트=대비 */
.lp-cta{position:relative; border-radius:24px; overflow:hidden; background:#7db9fd; box-shadow:0 16px 40px rgba(31,45,90,.22)}
.lp-cta .bg{display:block; width:100%; height:auto}
.lp-cta .over{position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding:0 5% 0 34%}
.lp-cta .txt{text-align:right; color:var(--navy); max-width:66%}
.lp-cta .free{display:inline-block; background:var(--yellow); color:#7c4a03; font-weight:800; font-size:12.5px; padding:3px 11px; border-radius:30px; margin-bottom:9px}
.lp-cta h2{font-size:26px; font-weight:900; margin:0 0 14px; color:var(--navy); letter-spacing:-.5px; line-height:1.25}
@media(max-width:960px){.lp-cta h2{font-size:21px; margin-bottom:10px} .lp-cta .lp-btn.lg{padding:11px 20px; font-size:15px}}
@media(max-width:760px){
  .lp-cta .bg{display:none}
  .lp-cta{padding:34px 24px}
  .lp-cta .over{position:static; padding:0; justify-content:center}
  .lp-cta .txt{text-align:center; max-width:none}
  .lp-cta h2{font-size:23px}
}

/* ── 랜딩 모바일 홈 폴리시 ── */
@media(max-width:640px){
  .lp-section{padding:44px 0}
  .lp h2.lp-h{font-size:23px}
  .lp .lp-sub{font-size:14.5px; margin-bottom:26px; padding:0 4px}
  .lp-hero .in{padding:36px 20px 28px}
  .lp-hero h1{font-size:27px; line-height:1.3}
  .lp-hero p.lead{font-size:15.5px}
  .lp-hero .heroart img{max-width:340px}
  .lp-strip{margin-top:18px; padding:18px 16px; gap:16px}   /* 히어로와 겹침 제거 */
  .lp-strip .it img{width:40px; height:40px}
  .lp-cta{padding:28px 20px}
  .lp-cta .free{font-size:12px}
  .lp-tabs{gap:6px}
  .lp-tabs button{padding:8px 13px; font-size:13px}
  .lp-curric{padding:18px}
  .lp-nav .in{padding:10px 18px}
}
@media(max-width:380px){
  .lp-hero h1{font-size:24px}
  .lp h2.lp-h{font-size:21px}
}

/* ============ 어드민 콘솔(/admin) ============ */
body.admin{background:var(--bg)}
.adm{display:flex;min-height:100vh}
.adm-side{width:216px;background:linear-gradient(180deg,var(--blue),var(--navy));color:#fff;padding:18px 12px;flex:0 0 auto;position:sticky;top:0;height:100vh}
.adm-side .adm-brand{font-weight:900;font-size:16px;padding:6px 10px 16px;display:flex;align-items:center;gap:8px}
.adm-side .adm-brand img{height:26px}
.adm-side a{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.9);padding:11px 12px;border-radius:9px;font-weight:700;text-decoration:none;margin-bottom:3px;font-size:14px}
.adm-side a.on,.adm-side a:hover{background:rgba(255,255,255,.16);color:#fff}
.adm-side a .cnt{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:20px;padding:1px 7px}
.adm-side .who{margin-top:18px;border-top:1px solid rgba(255,255,255,.2);padding-top:12px;font-size:12px;opacity:.9}
.adm-side .who button{margin-top:8px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:8px;padding:7px 12px;font-weight:700;cursor:pointer;font-size:12.5px;width:100%}
.adm-main{flex:1;padding:26px 30px 60px;min-width:0;max-width:1080px}
.adm-main h1{font-size:23px;font-weight:900;color:var(--navy);margin:0 0 4px;letter-spacing:-.4px}
.adm-main .sub{color:var(--muted);margin:0 0 20px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px}
.kpi .k{font-size:12.5px;color:var(--muted);font-weight:700}.kpi .v{font-size:26px;font-weight:900;color:var(--navy);margin-top:3px}
.kpi .d{font-size:11.5px;color:var(--green);font-weight:700;margin-top:2px}
.kpi.warn .v{color:var(--red)}
.chartrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.abars{display:flex;align-items:flex-end;gap:10px;height:130px;padding-top:20px}
.abars .b{flex:1;background:var(--blue);border-radius:6px 6px 0 0;position:relative;min-width:12px}
.abars .b span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10px;color:var(--muted)}
.abars .b i{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10.5px;font-weight:800;color:var(--navy);font-style:normal}
.adm-table{width:100%;border-collapse:collapse}
.adm-table th,.adm-table td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);font-size:13px}
.adm-table th{font-size:11.5px;color:var(--muted);background:var(--bg)}
.adm-table tr:hover td{background:var(--blue-xl)}
.fpill{display:inline-flex;align-items:center;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:20px}
.fpill.new{background:var(--red-l);color:#b3382f}.fpill.answered{background:var(--green-l);color:var(--green)}.fpill.closed{background:var(--bg);color:var(--muted)}
.fpill.kind{background:var(--blue-xl);color:var(--blue-d)}
.fpill.email{background:var(--blue-l);color:var(--blue-d)}.fpill.google{background:#f1f3f4;color:#3c4043}.fpill.kakao{background:#fee500;color:#191600}
.adm-detail{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px;background:#fbfdff}
.filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filter a{border:1.5px solid var(--line);background:#fff;color:var(--muted);padding:7px 13px;border-radius:20px;font-weight:800;font-size:12.5px;text-decoration:none}
.filter a.on{background:var(--blue);border-color:var(--blue);color:#fff}
@media(max-width:760px){.adm-side{width:60px}.adm-side .lbl,.adm-side .who span{display:none}.kpis,.chartrow{grid-template-columns:1fr}}