@charset "UTF-8";
/* /theme/henallte/design/css/golfstar-theme.css
 *
 * golfstar-theme.css
 * - 브랜드/테마 설정 전용
 * - 색상·폰트·배경 등 "환경설정" + 앱 쉘 + 푸터 다이얼 토큰 정리본
 *
 * 구조:
 *  1) :root  = 라이트(기본) 테마 토큰
 *  2) html[data-theme="dark"] = 다크 테마 토큰 오버라이드
 *  3) 베이스 reset + 타이포
 *  4) 골프스타 배경/컨테이너/버튼
 *  5) 다크모드 텍스트 보정
 */



@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2);
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2);
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2);
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2);
    font-weight: 900;
    font-display: swap;
}



/* ─────────────────────────────────────────────
 * 1. 라이트 테마(기본) 토큰
 * ──────────────────────────────────────────── */
:root {
  /* === GolfStar 전용 토큰 === */
  --gs-bg: #f5f5f7;
  --gs-bg-elevated: #ffffff;
  --gs-bg-strong: #ffffff;

  --gs-text: #111827;
  --gs-text-main: var(--gs-text);
  --gs-text-sub: #6b7280;

  --gs-border: rgba(0,0,0,0.06);
  --gs-primary: #1d9bf0;
  --gs-primary-soft: #dbeafe;
  --gs-secondary: #16a34a;
  --gs-secondary-soft: #dcfce7;

  --gs-header-bg: rgba(255,255,255,0.92);
  --gs-card-shadow: 0 8px 24px rgba(15,23,42,0.06);

  --gs-surface: #ffffff;
  --gs-shadow-soft: 0 8px 24px rgba(15,23,42,0.06);
  --gs-btn-radius: 999px;

  /* === 앱 쉘 공통 토큰(lite/app.css 기반) === */
  --brand: #25aae1;
  --brand-ink: #0e6e8f;

  /* 앱 전역 배경/텍스트는 GS 토큰을 기본으로 따라감 */
  --bg: var(--gs-bg);
  --card: none;
  --text: var(--gs-text);
  --muted: var(--gs-text-sub);
  --line: #e5e7eb;
  --shadow: 0 6px 18px rgba(0,0,0,.06);

  --radius: 12px;
  --space: 12px;
  --space-lg: 18px;
  --maxw: 1080px;
  --tabbar-h: 64px;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  /* === Footer / dial 토큰 (footer.css 기반) === */
  --fg: #111111;
  --border: rgba(0,0,0,.12);
  --card-soft: #fafafa;
  --backdrop: rgba(0,0,0,.55);
  --accent: #2563eb;

  --dial-size: 250px;
  --peek: 18px;
  --expose-gap: 10px;
  --dot-offset: 10px;

  /* === Swipe 메뉴 토큰 === */
  --gs-menu-bg: #2ca2f8;
  --gs-menu-fg: #ffffff;
  --gs-accent: #22c55e;
  --gs-overlay: rgba(0,0,0,.38);
  --gs-z: 2147483000;
  --gs-edge: 16px;
  --gs-radius: 16px;
  --gs-shadow: 0 10px 30px rgba(0,0,0,.35);
  --gs-item-h: 48px;
  --gs-tab-w: 16px;
  --gs-tab-h: 88px;
}

/* 작은 화면에서 다이얼 크기 조정 */
@media (max-width: 768px) {
  :root {
    --dial-size: 214px;
    --peek: 14px;
  }
}

/* ─────────────────────────────────────────────
 * 2. 다크 테마 토큰 (app.js: html[data-theme="dark"] 기준)
 * ──────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;

  /* 앱 쉘 공통 (배경/카드/텍스트) */
  --bg: #0b0f17;
  --card: #0f1520;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --line: #1f2937;
  --shadow: none;

  /* GolfStar 전용 */
  --gs-bg: #020617;
  --gs-bg-elevated: #0b1020;
  --gs-bg-strong: #020617;

  --gs-text: #e5e7eb;
  --gs-text-main: #e5e7eb;
  --gs-text-sub: #9ca3af;

  --gs-border: rgba(148,163,184,0.4);
  --gs-primary: #38bdf8;
  --gs-primary-soft: #082f49;
  --gs-secondary-soft: #064e3b;

  --gs-header-bg: rgba(15,23,42,0.92);
  --gs-card-shadow: 0 12px 32px rgba(0,0,0,0.6);

  --gs-surface: #020617;
  --gs-shadow-soft: 0 12px 32px rgba(0,0,0,0.8);

  /* Footer / dial */
  --fg: #f5f6f7;
  --border: rgba(255,255,255,.15);
  --card: #171a21;
  --card-soft: #151821;
  --backdrop: rgba(0,0,0,.65);
  --accent: #3b82f6;
}

/* ─────────────────────────────────────────────
 * 3. 베이스 reset + 타이포
 * ──────────────────────────────────────────── */




* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: NanumSquareNeo, 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto,
        Apple SD Gothic Neo, Malgun Gothic, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────
 * 4. GolfStar 전역 스타일
 * ──────────────────────────────────────────── */

/* header 공통 */
.gs-header {
  background: var(--gs-header-bg);
  border-bottom: 1px solid var(--gs-border);
}

/* 카드 */
.gs-card {
  background: var(--gs-bg-elevated);
  border: 1px solid var(--gs-border);
  box-shadow: var(--gs-card-shadow);
  color: var(--gs-text);
}

/* 보조 텍스트 */
.gs-muted {
  color: var(--gs-text-sub);
}

/* 공통 버튼 (Primary) */
.gs-btn-primary {
  background: var(--gs-primary);
  color: #ffffff;
  border-radius: var(--gs-btn-radius);
  box-shadow: var(--gs-shadow-soft);
}

/* 서브 버튼/태그 pill */
.gs-pill-green {
  background: var(--gs-secondary-soft);
  color: var(--gs-secondary);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* 골프스타 전체 배경(바닥)
   body에 class="app golfstar" 가 붙는 경우 */
body.app.golfstar {
  min-height: 100vh;
  color: var(--gs-text-main);

  /* 파스텔 sky blue + green 그라디언트 */
  background:
    radial-gradient(circle at top left,
      var(--gs-primary-soft) 0,
      var(--gs-bg) 40%),
    radial-gradient(circle at bottom right,
      var(--gs-secondary-soft) 0,
      var(--gs-bg-strong) 55%);
  background-attachment: fixed;
}

/* 골프스타 컨테이너 기본 레이아웃 */
/*
body.app.golfstar .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 12px 80px;
}

body.app.golfstar .container > * {
  background: var(--gs-surface);
  border-radius: 18px;
  box-shadow: var(--gs-shadow-soft);
  padding: 16px;
}
*/

/* ─────────────────────────────────────────────
 * 5. 다크모드 텍스트/링크 보정
 * ──────────────────────────────────────────── */

/* 다크 모드에서 기본 텍스트를 밝게 강제 */
html[data-theme="dark"] body,
html[data-theme="dark"] :where(
  h1,h2,h3,h4,h5,h6,p,span,small,strong,em,mark,
  a,li,dt,dd,blockquote,code,pre,
  th,td,caption,label,legend,
  button,input,textarea,select
) {
  color: #e5e7eb !important;
}

html[data-theme="dark"] a {
  color: #bfe9fb !important;
}

html[data-theme="dark"] ::placeholder {
  color: #9ca3af !important;
  opacity: 1;
}

html[data-theme="dark"] svg {
  color: #e5e7eb;
}