/* ============================================================
   kujo.my.to 공용 디자인 토큰  (base.css)
   ------------------------------------------------------------
   왜 이 파일이 있나:
     앱 5개가 각자 다른 색·간격·라운드를 쓰고 있었다(랜딩만 다크, 나머지는 라이트).
     각 앱 HTML을 다시 쓰는 대신, **앱이 이미 쓰고 있는 CSS 변수 이름을**
     여기 공용 토큰으로 다시 정의한다. 앱 구조는 그대로 두고 색만 갈아끼우는 방식.

   쓰는 법:
     각 앱 <head>의 인라인 <style> **뒤에** 이 파일을 링크한다(뒤에 와야 이깁니다).
       <link rel="stylesheet" href="/base.css">

   기본은 다크(풋살 앱 기준), 시스템이 라이트면 자동으로 라이트.
   ============================================================ */

/* ── 1. 공용 토큰 (다크 = 기본) ───────────────────────────── */
:root{
  /* 바탕 — 순회색이 아니라 청록 쪽으로 살짝 기운 중성색 */
  --k-bg:#0c1116;  --k-bg2:#0f161c;  --k-card:#151f25;  --k-card2:#1a262d;
  --k-line:#26343c;
  --k-ink:#eef4f2; --k-mut:#8aa0a3;  --k-dim:#5d7176;

  /* 액센트 — 풋살 코트색 계열이되 청록(cyan) 쪽으로 밀었다.
     초록으로 두면 '좋음'(최저가 갱신·대출가능)과 색이 겹쳐 구분이 안 된다. */
  --k-accent:#2bb3c9; --k-accent-d:#1a8598; --k-accent-soft:#0f2b31; --k-accent-ink:#03191d;

  /* 의미색 — 액센트와 분리(좋음/주의/나쁨은 브랜드색이 아니다) */
  --k-good:#34d399; --k-good-soft:#10312a;
  --k-warn:#ffa34d; --k-warn-soft:#33240f;
  --k-bad:#f87171;  --k-bad-soft:#331a1c;

  /* 모양·간격 */
  --k-r-card:14px; --k-r-btn:12px; --k-r-pill:999px;
  --k-gap:12px; --k-pad:16px;
  --k-shadow:0 8px 24px -10px rgba(0,0,0,.55);
  --k-safe-b:env(safe-area-inset-bottom, 0px);
}

/* ── 2. 라이트 (시스템 설정 따라감) ───────────────────────── */
@media (prefers-color-scheme: light){
  :root{
    --k-bg:#f1f4f4;  --k-bg2:#e9eeee;  --k-card:#ffffff;  --k-card2:#f5f8f8;
    --k-line:#dde5e4;
    --k-ink:#16211f; --k-mut:#667573;  --k-dim:#8b9a98;

    --k-accent:#0e7c8f; --k-accent-d:#0a5f6e; --k-accent-soft:#e0f2f5; --k-accent-ink:#ffffff;

    --k-good:#0f8f63; --k-good-soft:#e4f6ee;
    --k-warn:#b4610a; --k-warn-soft:#fdf0e2;
    --k-bad:#c33c46;  --k-bad-soft:#fdeaec;

    --k-shadow:0 6px 20px -10px rgba(16,33,31,.28);
  }
}

/* 수동 전환용(앱에 토글 달면 씀) */
:root[data-theme="light"]{
  --k-bg:#f1f4f4; --k-bg2:#e9eeee; --k-card:#fff; --k-card2:#f5f8f8; --k-line:#dde5e4;
  --k-ink:#16211f; --k-mut:#667573; --k-dim:#8b9a98;
  --k-accent:#0e7c8f; --k-accent-d:#0a5f6e; --k-accent-soft:#e0f2f5; --k-accent-ink:#fff;
  --k-good:#0f8f63; --k-good-soft:#e4f6ee; --k-warn:#b4610a; --k-warn-soft:#fdf0e2;
  --k-bad:#c33c46; --k-bad-soft:#fdeaec;
  --k-shadow:0 6px 20px -10px rgba(16,33,31,.28);
}
:root[data-theme="dark"]{
  --k-bg:#0c1116; --k-bg2:#0f161c; --k-card:#151f25; --k-card2:#1a262d; --k-line:#26343c;
  --k-ink:#eef4f2; --k-mut:#8aa0a3; --k-dim:#5d7176;
  --k-accent:#2bb3c9; --k-accent-d:#1a8598; --k-accent-soft:#0f2b31; --k-accent-ink:#03191d;
  --k-good:#34d399; --k-good-soft:#10312a; --k-warn:#ffa34d; --k-warn-soft:#33240f;
  --k-bad:#f87171; --k-bad-soft:#331a1c;
  --k-shadow:0 8px 24px -10px rgba(0,0,0,.55);
}

/* ── 3. 앱들이 이미 쓰는 변수명 → 공용 토큰으로 연결 ────────
   앱별로 이름만 다를 뿐 뜻은 같아서 한 번에 묶인다.
   (풋살의 종목색 --futsal/--swim/--pull 등은 '데이터 분류색'이라 손대지 않음) */
:root{
  --bg:var(--k-bg);          --bg2:var(--k-bg2);
  --card:var(--k-card);      --card2:var(--k-card2);
  --line:var(--k-line);
  --ink:var(--k-ink);        --txt:var(--k-ink);
  --mut:var(--k-mut);        --sub:var(--k-mut);       --muted:var(--k-mut);
  --dim:var(--k-dim);

  --accent:var(--k-accent);  --court:var(--k-accent);   /* court = 풋살앱의 액센트 */
  --blue:var(--k-accent);    --blue-d:var(--k-accent-d); --blue-l:var(--k-accent-soft);

  --panel:var(--k-card);     /* 증시 연표 */
  --green:var(--k-good);     --green-l:var(--k-good-soft); --green-d:var(--k-good); --ok:var(--k-good);
  --good:var(--k-good);      --warn:var(--k-warn);
  --red:var(--k-bad);        --red-l:var(--k-bad-soft);    --no:var(--k-bad);
  --amber:var(--k-warn);     --amber-l:var(--k-warn-soft);
}

/* ── 4. 변수를 안 쓰고 색을 박아둔 곳 보정 ─────────────────
   앱 원본 HTML을 안 고치려고 여기 모아둔 패치.
   (도서관은 깃허브 레포가 따로 있어서 서버 파일만 고치면 레포와 어긋난다 → 여기서 처리)
   base.css가 앱 인라인 <style> '뒤'에 오므로 같은 specificity면 이쪽이 이긴다. */

/* 공통: 입력 컨트롤이 라이트 고정이던 것 */
input,textarea,select{background:var(--k-card2);color:var(--k-ink);border-color:var(--k-line)}
input::placeholder,textarea::placeholder{color:var(--k-dim)}
button:disabled{background:var(--k-line);color:var(--k-dim)}

/* 최저가 — 카드/그래프 바탕이 #F9FAFB 하드코딩 */
.pcard,.vcard,.graph{background:var(--k-card2)}
.pcard.win,.vcard.win{background:var(--k-good-soft);border-color:var(--k-good)}
.prow{border-top-color:var(--k-line)}
.rank{background:var(--k-card);color:var(--k-mut)}
.rank.r1{background:var(--k-good);color:var(--k-accent-ink)}
.vdiff{background:var(--k-bad-soft);color:var(--k-bad)}
.toast{background:var(--k-card2);color:var(--k-ink);border:1px solid var(--k-line)}
/* 추이 그래프 SVG는 색이 속성으로 박혀 있는데, CSS가 presentation attribute를 이긴다 */
.graph svg path{stroke:var(--k-accent)}
.graph svg path[fill^="rgba"]{fill:var(--k-accent-soft)}
.graph svg circle{fill:var(--k-accent)}
.graph svg text{fill:var(--k-mut)}

/* 도서관 — 뱃지·표 머리·보조 텍스트가 전부 라이트 고정 */
.pick-hint{color:var(--k-ink)}
.cover{background:var(--k-card2)}
.bk-sub{color:var(--k-mut)}
.bk-isbn{color:var(--k-dim)}
.b-ok,.p-ok{background:var(--k-good-soft);color:var(--k-good)}
.b-no,.p-no{background:var(--k-bad-soft);color:var(--k-bad)}
.b-mut,.p-mut{background:var(--k-card2);color:var(--k-mut)}
.p-amber{background:var(--k-warn-soft);color:var(--k-warn)}
.p-resv{background:var(--k-accent-soft);color:var(--k-accent)}
.tbl th{background:var(--k-card2);color:var(--k-mut)}
.tbl .sub2,.tbl td:nth-child(5){color:var(--k-dim)}
.legend{color:var(--k-mut)} .legend b{color:var(--k-ink)}
.bk-go{color:var(--k-accent)}

/* 증시 연표 — 상단바·칩·표·이벤트 카드가 흰색 하드코딩 */
.gnb,.chip,table,.event,.lessons{background:var(--k-card)}
.chip.on .dot{background:var(--k-accent-ink)}
.event{border-color:var(--k-line)}
table th{background:var(--k-card2)}

/* ── 5. 겉멋 빼기 ────────────────────────────────────────
   큰 그라데이션 배너, 알약처럼 둥근 카드, 둥둥 뜨는 그림자는 빼고
   내용이 먼저 보이게 한다. */

/* 최저가: 화면 1/4를 먹던 그라데이션 배너 → 제목 한 줄 */
.hero{ background:none; color:var(--k-ink); border-radius:0;
       border-bottom:1px solid var(--k-line); padding:20px 18px 15px }
.hero h1{ font-size:18px; font-weight:700 }
.hero p{ color:var(--k-mut) }

/* 라운드는 8px 하나로 통일(14~18px은 장난감처럼 보인다) */
.card,.pcard,.vcard,.graph,.wcard,.wtop,.habcard,.dietcard,.daycard,.glink,.btn,.fab,
.startbtn,.markbtn,.wbtn,dialog,input,select,textarea{ border-radius:8px }

/* 떠 있는 그림자 제거 */
.fab{ box-shadow:none; bottom:calc(20px + var(--k-safe-b)) }
.card{ box-shadow:none }

/* 풋살: 하단 탭바 배경 하드코딩 */
nav{ background:var(--k-card) !important; }

/* 도서관: 본문 글자색이 #222 하드코딩 */
body{ color:var(--k-ink); background:var(--k-bg); }

/* 공통: 키보드 포커스가 보이게 (지금은 전 앱이 아웃라인 없음) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--k-accent); outline-offset:2px; border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
