/* 회원 화면 공용 CSS — /signup/ · /membership/ · /account/ (2026-08-09, /login/ 은 2026-08-15 통합)
   홈(index.html)의 다크 글래스 토큰을 그대로 쓴다. 세 페이지에 같은 <style> 을 각각 인라인하면
   한 곳만 고쳐 어긋나므로 order.css 와 같은 방식으로 한 파일에 모았다. */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;}
/* 🔴 `display:` 를 준 클래스(.agree 의 flex 등)가 브라우저 기본 `[hidden]{display:none}` 을
   덮어써서, JS 로 hidden 을 켜도 그대로 보인다. 로그인 탭에 회원가입용 동의 체크박스가
   남아 있던 원인이다(2026-08-09). */
[hidden]{display:none !important;}
:root{--bg:#0a0a0e;--surface:#191b21;--surface2:#252831;--line:rgba(255,255,255,.09);
  --text:#f4f5f7;--muted:#a7abb5;--brand:#ffc93c;--brand2:#ffb300;--onbrand:#17181d;
  --ok:#4ade80;--hot:#ff4d5e;}
html,body{background:var(--bg);color:var(--text);
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Pretendard','Apple SD Gothic Neo',sans-serif;
  line-height:1.6;letter-spacing:-0.02em;}
.bgglow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(600px 320px at 50% -8%,rgba(255,201,60,.13),transparent 70%),
             radial-gradient(520px 300px at 90% 22%,rgba(255,179,0,.07),transparent 72%);}

/* 상단 헤더 스타일은 header.css 로 옮겼다 (2026-08-09 전 페이지 통일).
   여기에 다시 쓰지 말 것 — 두 벌이 되면 페이지마다 헤더가 달라진다.
   주의: CSS 주석 안에 별표+슬래시를 쓰면 주석이 거기서 끝나 뒤 규칙이 통째로 죽는다. */

.wrap{position:relative;z-index:1;max-width:440px;margin:0 auto;
  padding:26px 18px calc(40px + env(safe-area-inset-bottom));}

.hd{text-align:center;margin-bottom:22px;}
.hd h1{font-size:23px;font-weight:900;letter-spacing:-.03em;line-height:1.34;}
.hd h1 .g{background:linear-gradient(135deg,#ffd756,#ffb300);-webkit-background-clip:text;
  background-clip:text;color:transparent;}
.hd p{font-size:13.5px;color:var(--muted);margin-top:8px;}
/* 머리말 안의 링크(가입 ↔ 로그인 이동). 기본 파란 밑줄이 나오지 않게 본문 색을 물려받고,
   눌러야 할 낱말(<b>)만 브랜드 색으로 띄운다. */
.hd p a{color:inherit;text-decoration:none;}
.hd p a b{color:var(--brand);font-weight:800;}
.hd p a:active{opacity:.7;}

.card{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:22px;
  padding:20px 18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin-bottom:14px;}
.card h2{font-size:15px;font-weight:900;letter-spacing:-.02em;margin-bottom:12px;}

/* ── 로그인/가입 진입 — 카카오를 대문으로 두고 나머지는 접어 둔다 (2026-08-09) ──
   선택지를 넷 다 늘어놓으면 고르느라 멈춘다. 국내 사용자가 가장 많이 쓰는 카카오만 채운
   버튼으로 크게 두고, 「다른 방법 보기」를 누른 사람에게만 나머지를 편다.
   ⚠️ 카카오만 브랜드 색을 채우고 나머지는 아이콘만 브랜드 색 — 노랑이 눈에 먼저 들어와야 한다. */
.sso{display:flex;flex-direction:column;gap:9px;}
.sso a,.sso button{display:flex;align-items:center;justify-content:center;gap:9px;height:52px;
  width:100%;border-radius:14px;text-decoration:none;font-family:inherit;font-size:14.5px;
  font-weight:800;letter-spacing:-.02em;cursor:pointer;
  background:var(--surface2);color:var(--text);border:1px solid var(--line);}
.sso a:active,.sso button:active{transform:translateY(1px);}
.sso svg{width:18px;height:18px;flex:0 0 auto;}
.sso .kakao{background:#FEE500;color:#191600;border-color:#FEE500;}
.sso .naver svg{color:#03C75A;}
.sso .more{color:var(--muted);font-size:13.5px;}
.sso .more svg{width:13px;height:13px;transition:transform .2s;}
.sso .rest{display:none;flex-direction:column;gap:9px;}
.sso.open .more{display:none;}
.sso.open .rest{display:flex;}

.orline{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;font-weight:700;
  margin:18px 0;}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line);}

/* ── 폼 ── */
.f{margin-bottom:11px;}
.f label{display:block;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:6px;}
/* 라벨 안에서 한 낱말만 살리는 강조(「무료 혜택」 받으실 번호). 라벨이 12px 회색이라
   그냥 두면 나머지 칸과 똑같이 읽히고 지나간다.
   ⚠️ `.hd h1 .g`(그라데이션 클리핑)를 여기에 쓰면 12px 에서는 흐릿하게 뭉개진다 → 단색 앰버. */
.f label .hl{color:var(--brand);font-weight:900;font-size:12.5px;}
.f input{width:100%;height:48px;padding:0 14px;border-radius:13px;background:var(--surface2);
  border:1px solid var(--line);color:var(--text);font-family:inherit;font-size:15px;
  letter-spacing:-.01em;}
.f input:focus{outline:none;border-color:rgba(255,201,60,.55);}
.f input::placeholder{color:#6f737d;}
.f .hint{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.55;}

.agree{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--muted);
  line-height:1.55;margin:14px 0 4px;}
.agree input{width:18px;height:18px;flex:0 0 auto;margin-top:1px;accent-color:var(--brand);}
.agree a{color:var(--brand);text-decoration:none;}

.btn{width:100%;height:52px;border:0;border-radius:14px;font-family:inherit;font-size:15px;
  font-weight:900;letter-spacing:-.02em;cursor:pointer;
  background:linear-gradient(135deg,#ffd756,#ffb300);color:var(--onbrand);}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:.55;cursor:default;transform:none;}
.btn.ghost{background:var(--surface2);color:var(--text);border:1px solid var(--line);}

.msg{display:none;margin-top:12px;padding:11px 13px;border-radius:12px;font-size:13px;
  line-height:1.6;background:rgba(255,77,94,.1);border:1px solid rgba(255,77,94,.32);color:#ffb3bb;}
.msg.on{display:block;}
.msg.ok{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.32);color:#a7f3c6;}

.note{font-size:12px;color:var(--muted);line-height:1.7;margin-top:16px;text-align:center;}
.note a{color:var(--brand);text-decoration:none;}

/* ── 멤버십 ── */
.price{display:flex;align-items:baseline;gap:8px;justify-content:center;margin:2px 0 4px;}
.price b{font-size:34px;font-weight:900;letter-spacing:-.04em;
  background:linear-gradient(135deg,#ffd756,#ffb300);-webkit-background-clip:text;
  background-clip:text;color:transparent;}
.price span{font-size:14px;color:var(--muted);font-weight:800;}
.perks{list-style:none;margin-top:6px;}
.perks li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.65;
  padding:9px 0;border-top:1px solid var(--line);}
.perks li:first-child{border-top:0;}
.perks li::before{content:"✓";flex:0 0 auto;width:20px;height:20px;border-radius:7px;margin-top:2px;
  background:rgba(255,201,60,.14);color:var(--brand);font-size:12px;font-weight:900;
  display:flex;align-items:center;justify-content:center;}

/* ── 계정 ── */
.who{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.who .av{width:46px;height:46px;flex:0 0 auto;border-radius:15px;display:flex;align-items:center;
  justify-content:center;font-size:20px;font-weight:900;color:var(--onbrand);
  background:linear-gradient(135deg,#ffd756,#ffb300);}
.who .nm{font-size:16px;font-weight:900;letter-spacing:-.02em;}
.who .em{font-size:12.5px;color:var(--muted);word-break:break-all;}
.state{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:-.02em;
  padding:6px 11px;border-radius:999px;width:fit-content;margin-bottom:12px;}
.state.on{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3);color:var(--ok);}
.state.off{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);}
.state.soon{background:rgba(255,201,60,.12);border:1px solid rgba(255,201,60,.32);color:var(--brand);}
/* 하단 고정 바의 상태 알약(/account/). 색은 위와 같고 여백만 바 기준으로 줄인다.
   바 안은 배경이 어두워서 알약이 그대로 뜨면 카드 안에서보다 커 보인다.
   자리는 둘이다 — 바 **위**(만료됨 안내)와 바 **안**(`.pinfo`, 이용 중일 때 유일한 표시). */
.paybar .state{margin:0 0 7px 4px;font-size:11.5px;padding:5px 11px;
  background:rgba(23,23,29,.92);backdrop-filter:blur(8px);}
.paybar .pinfo .state{margin:0;}
.paybar .state.on{background:rgba(20,42,28,.94);}
.paybar .state.soon{background:rgba(45,36,12,.94);}
.paybar .state.off{background:rgba(28,28,34,.94);}
.until{font-size:13.5px;color:var(--muted);line-height:1.7;}
.until b{color:var(--text);font-weight:800;}
.setlist{margin-top:4px;}
.setlist a,.setlist div.set{display:flex;align-items:center;gap:12px;padding:12px 13px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-bottom:8px;
  text-decoration:none;color:var(--text);}
.setlist .ic{width:38px;height:38px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:18px;background:linear-gradient(135deg,#ffd756,#ffb300);}
.setlist .nm{font-size:14px;font-weight:800;letter-spacing:-.02em;}
.setlist .sb{font-size:11.5px;color:var(--muted);}
.setlist .go{margin-left:auto;color:var(--muted);font-size:16px;}
.setlist div.set{opacity:.5;}

/* ── 푸터 (전 페이지 공통 · 전자상거래 고지) ── */
footer{margin-top:26px;text-align:center;font-size:11.5px;color:#6f737d;line-height:1.85;}
footer a{color:#8a8e98;text-decoration:none;}
footer .bizfold{display:inline;}
footer .bizfold summary{display:inline;cursor:pointer;color:#8a8e98;list-style:none;font-size:11.5px;}
footer .bizfold summary::-webkit-details-marker{display:none;}
footer .bizbody{margin-top:8px;color:#6f737d;font-size:11px;line-height:1.8;word-break:keep-all;}
footer .cp{margin-top:10px;color:#5c606a;}