/* ==========================================================================
   삼학도크루즈 공통 디자인 시스템
   - 7개 화면(reserve·ticket·board·counter·reserve-admin·admin·tobe) 공용 토큰
   - 폰트 자가호스팅(Pretendard, OFL) — CDN 의존 제거
   ========================================================================== */

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/PretendardVariable.woff2") format("woff2");
}

:root {
  /* ---- 브랜드 ---- */
  --sea:        #2B72C2;   /* 삼학도 블루 (바다) */
  --sea-deep:   #1D5AA0;
  --sea-ink:    #14243A;   /* 남색 잉크 */
  --leaf:       #3E9942;   /* 삼학도 그린 (섬) */
  --leaf-deep:  #2E7A34;
  --sun:        #E8913A;   /* 선셋/불꽃 강조 */

  /* ---- 중립 (바다빛 살짝) ---- */
  --ground:     #EEF3F8;   /* 페이지 배경 */
  --panel:      #FFFFFF;
  --panel-2:    #F5F8FC;
  --ink:        #16202B;   /* 본문 */
  --ink-2:      #47586A;
  --ink-3:      #7A8A99;
  --line:       #DCE5EF;
  --line-2:     #EBF0F6;

  /* ---- 의미색 ---- */
  --ok:         #2E7A34;
  --ok-bg:      #E7F3E8;
  --warn:       #B57A11;
  --warn-bg:    #FBF2E0;
  --danger:     #C23A2B;
  --danger-bg:  #FBEAE7;
  --info-bg:    #E6F0FA;

  /* ---- 타이포 ---- */
  --font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  /* ---- 크기·간격·모양 ---- */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --shadow:    0 1px 2px rgba(20,36,58,.06), 0 6px 16px rgba(20,36,58,.06);
  --shadow-lg: 0 4px 12px rgba(20,36,58,.08), 0 20px 44px rgba(20,36,58,.10);
  --ring: 0 0 0 3px rgba(43,114,194,.28);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --grad-sea: linear-gradient(135deg, #2B72C2 0%, #1D5AA0 55%, #17457C 100%);
  --grad-sky: linear-gradient(180deg, #3E86D0 0%, #2B72C2 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0C141C;
    --panel:   #131E29;
    --panel-2: #182634;
    --ink:     #E6EDF4;
    --ink-2:   #A5B4C2;
    --ink-3:   #74889A;
    --line:    #263543;
    --line-2:  #1C2A37;
    --sea:     #4E97E0;
    --sea-deep:#3A7FC4;
    --leaf:    #5DBA62;
    --ok-bg:   #12271A; --warn-bg:#2A2210; --danger-bg:#2C1512; --info-bg:#122236;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.35);
    --shadow-lg: 0 8px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --ground:#0C141C; --panel:#131E29; --panel-2:#182634;
  --ink:#E6EDF4; --ink-2:#A5B4C2; --ink-3:#74889A; --line:#263543; --line-2:#1C2A37;
  --sea:#4E97E0; --sea-deep:#3A7FC4; --leaf:#5DBA62;
  --ok-bg:#12271A; --warn-bg:#2A2210; --danger-bg:#2C1512; --info-bg:#122236;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.35); --shadow-lg:0 8px 30px rgba(0,0,0,.5);
}
:root[data-theme="light"] {
  --ground:#EEF3F8; --panel:#FFFFFF; --panel-2:#F5F8FC;
  --ink:#16202B; --ink-2:#47586A; --ink-3:#7A8A99; --line:#DCE5EF; --line-2:#EBF0F6;
  --sea:#2B72C2; --sea-deep:#1D5AA0; --leaf:#3E9942;
}

/* ---- 리셋 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 0;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---- 공용 유틸 ---- */
.tnum { font-variant-numeric: tabular-nums; }

/* 브랜드 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 12px 20px; font-size: .98rem; font-weight: 700; cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary { background: var(--grad-sea); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { box-shadow: var(--shadow-lg); }
.btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--sea); color: var(--sea); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 칩·배지 */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink-2);
}
.chip-ok     { color: var(--ok);     background: var(--ok-bg);     border-color: transparent; }
.chip-warn   { color: var(--warn);   background: var(--warn-bg);   border-color: transparent; }
.chip-danger { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.chip-sea    { color: var(--sea-deep); background: var(--info-bg); border-color: transparent; }

/* 입력 */
.field {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); color: var(--ink); font-size: 1rem; transition: border-color .12s, box-shadow .12s;
}
.field::placeholder { color: var(--ink-3); }
.field:focus { outline: none; border-color: var(--sea); box-shadow: var(--ring); }

/* 카드 */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* 라벨 */
.label { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* 접근성 */
:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* 가로 스크롤 컨테이너(표·넓은 콘텐츠) */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }