/* ============================================================
   core.css — 밸류브릿지 공용 라이트 토대 (index/home 에디토리얼 기준)
   · 모든 고객 페이지가 공유하는 디자인 토큰 + 기본 chrome(로고·아이브로·카드·폼·버튼)
   · 페이지 고유 스타일은 각 페이지의 inline <style> 또는 page.css 에서 정의
   · 다크였던 기존 변수명을 그대로 유지하되 값만 라이트로 → 컴포넌트 재사용 극대화
   ============================================================ */
/* ── 디자인 토큰(팔레트·서체·이징)은 theme.css가 단일 소스로 제공 ──
   · 반드시 이 파일보다 먼저 theme.css를 로드할 것: <link theme.css> → <link core.css>
   · 라이트/다크는 theme.css의 :root[data-theme]가 관리 (여기서 재정의 금지) */

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans-kr);font-weight:500;
  word-break:keep-all;overflow-wrap:break-word;   /* 한글은 어절 단위 줄바꿈(가독성) */
  min-height:100vh;position:relative;overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 78% 44% at 50% -10%,color-mix(in srgb, var(--green) 6%, transparent),transparent 60%),
    radial-gradient(circle at 50% 118%,color-mix(in srgb, var(--gold) 6%, transparent),transparent 55%);
}

/* 인증/계정 페이지 공통 — 화면 중앙 정렬 레이아웃 */
body.auth-page{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:56px 18px;
}
body.auth-page::before{
  content:"";position:fixed;inset:14px;
  border:1px solid var(--line-soft);pointer-events:none;z-index:1;
}

/* ── Capacitor 앱(edge-to-edge) 안전영역 ─────────────────────────
   앱에서만(html.vb-native, native.js 주입) 상단 상태바(시계·배터리)와 콘텐츠가
   겹치지 않게 인셋만큼 위 여백을 확보한다. viewport-fit=cover + env() 로 실제 인셋 반영.
   웹 브라우저엔 vb-native 클래스가 없어 이 블록 전체가 미적용 → 웹 화면 100% 그대로.
   (홈=home.css / admin 상단바=admin.css 가 각자 처리하고, 여기는 그 외 공통 페이지용) */
html.vb-native body:not(.auth-page){
  padding-top:env(safe-area-inset-top, 0px);
}
/* 인증 페이지(중앙정렬 + 장식 프레임): 기존 56px 여백에 인셋을 '더하고' 프레임도 인셋만큼 안으로 */
html.vb-native body.auth-page{
  padding-top:calc(56px + env(safe-area-inset-top, 0px));
}
html.vb-native body.auth-page::before{
  top:calc(14px + env(safe-area-inset-top, 0px));
}
/* 우상단 코너마크(EST. 2026 · SEOUL)는 position:absolute 라 body 여백에 안 밀린다 → 인셋만큼 아래로 */
html.vb-native .corner-mark.tr{
  top:calc(30px + env(safe-area-inset-top, 0px));
}

/* ── 상단 로고 ── */
.home-logo{position:relative;z-index:20;margin:0 auto 4px;display:inline-block;
  opacity:.92;transition:opacity .3s var(--ease),transform .3s var(--ease);}
.home-logo img{height:34px;display:block;}
.home-logo:hover{opacity:1;transform:translateY(-1px);}
.home-logo:focus-visible{outline:1px solid var(--gold-soft);outline-offset:8px;}

/* ── 모서리 마크 ── */
.corner-mark{position:absolute;z-index:15;font-family:var(--sans);font-size:9.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted);}
.corner-mark.tr{top:30px;right:30px;}
.corner-mark .dot{color:var(--gold-text);}

/* ── 본문 래퍼 ── */
.wrap{width:100%;max-width:452px;position:relative;z-index:5;}

/* ── 아이브로 ── */
.eyebrow{text-align:center;font-family:var(--sans);font-size:11px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold-text);margin-bottom:14px;}
.eyebrow .rule{display:inline-block;width:30px;height:1px;background:var(--gold);
  vertical-align:middle;margin:0 12px;opacity:.7;}

/* ── 카드 ── */
.card{background:var(--surface);border:1px solid var(--card-border);border-radius:18px;
  padding:42px 34px 34px;box-shadow:0 22px 60px var(--shadow-2),0 2px 8px var(--shadow);
  position:relative;}
.card::before{content:"";position:absolute;top:0;left:34px;right:34px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);opacity:.6;}
.card h1{font-family:var(--serif-kr);font-size:25px;font-weight:500;letter-spacing:.01em;
  color:var(--ink-head);text-align:center;margin-bottom:8px;}
.card .desc{font-size:13.5px;color:var(--muted);text-align:center;margin-bottom:28px;line-height:1.7;}

/* ── 입력 필드 ── */
.field{margin-bottom:17px;}
.field label{display:block;font-family:var(--sans-kr);font-size:12px;letter-spacing:.02em;
  color:var(--muted);margin-bottom:9px;}
.field label .req{color:var(--gold-text);margin-left:4px;}
.field input,.field select{width:100%;padding:13px 15px;background:var(--surface);
  border:1px solid var(--gold-line);border-radius:10px;color:var(--ink);font-family:var(--sans-kr);
  font-size:16px;font-weight:400;outline:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);}
.field input::placeholder{color:var(--muted);}
.field input:focus,.field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent);}
.field input:disabled{opacity:.55;cursor:not-allowed;background:var(--surface-2);}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237A5E14' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;}
:root[data-theme="dark"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C9A84C' d='M6 8L0 0h12z'/%3E%3C/svg%3E");}
.field select option{background:var(--surface);color:var(--ink);}
.field .lock{font-size:12px;color:var(--muted);margin-top:5px;}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.55;}

/* ── 동의 체크 ── */
.agree{display:flex;gap:10px;align-items:flex-start;margin:4px 0 8px;}
.agree input{width:17px;height:17px;margin-top:2px;accent-color:var(--green);flex-shrink:0;}
.agree label{font-size:13px;color:var(--muted);line-height:1.6;}
.agree label a{color:var(--gold-text);text-decoration:underline;text-underline-offset:2px;}

/* ── 기본 버튼 (딥그린 프라이머리) ── */
.btn{width:100%;padding:15px;margin-top:12px;background:var(--green);color:var(--on-green);border:none;
  border-radius:99px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .25s,background .25s;
  box-shadow:0 10px 26px color-mix(in srgb, var(--green) 20%, transparent);}
.btn:hover{transform:translateY(-1px);background:var(--green-deep);box-shadow:0 14px 34px color-mix(in srgb, var(--green) 28%, transparent);}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none;}
.btn.ghost{background:none;border:1px solid var(--gold-line);color:var(--muted);box-shadow:none;}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-text);background:color-mix(in srgb, var(--gold) 6%, transparent);transform:none;box-shadow:none;}

/* ── 메시지 ── */
.msg{margin-top:18px;font-size:13px;text-align:center;line-height:1.6;display:none;}
.msg.show{display:block;} .msg.error{color:var(--err);} .msg.ok{color:var(--gold-text);}

/* ── 푸터 링크 ── */
.foot{text-align:center;margin-top:24px;font-size:13px;color:var(--muted);}
.foot a{color:var(--gold-text);text-decoration:none;font-weight:500;}
.foot a:hover{text-decoration:underline;}

/* ── 구분선 ── */
.divider{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--muted);
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--gold-line);}

/* ── 소셜 로그인 버튼 (브랜드 컬러 유지) ── */
.social-btn{width:100%;padding:13px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:10px;
  background:#FFFFFF;color:#1F1F1F;border:1px solid rgba(31,42,36,0.14);border-radius:99px;
  font-family:var(--sans-kr);font-size:14px;font-weight:500;cursor:pointer;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);}
.social-btn:hover{box-shadow:0 6px 18px rgba(31,42,36,0.12);transform:translateY(-1px);}
.social-btn svg{width:18px;height:18px;flex-shrink:0;}
.social-btn.kakao{background:#FEE500;color:#191600;border-color:rgba(25,22,0,0.10);}

@media(max-width:480px){
  body.auth-page{padding:44px 14px;}
  .home-logo img{height:30px;} .corner-mark.tr{right:20px;top:26px;font-size:8.5px;}
  .card{padding:34px 24px 30px;} .card h1{font-size:23px;}
}