/*
  KoJa 디자인 시스템
  ============================================================================

  ── 어디서 온 색인가 ────────────────────────────────────────────────────────
  七夕(칠석)에서 가져왔다. 은하수를 사이에 두고 헤어진 직녀와 견우가 일 년에
  한 번 다리를 건너 만나는 이야기, 소원을 적어 대나무에 거는 短冊(단자쿠).
  바다를 사이에 둔 두 사람이 소원을 걸어 건너간다 — 이 서비스가 하는 일과
  그대로 겹친다. 국기색(적·백)은 쓰지 않는다.

  ── 밖은 은하수, 안은 和紙 ─────────────────────────────────────────────────
  · 랜딩은 남색 밤하늘. 별과 단자쿠가 떠 있는 장면 하나로 서비스를 설명한다.
  · 로그인 뒤 화면은 화지 빛 낮. 얼굴과 글을 오래 보는 곳이라 어두운 바탕은 눈이 먼저 지친다.
  두 세계를 잇는 것은 단자쿠 황금빛 하나. 어디서든 '눌러야 할 곳'은 이 색이다.

  ── 규칙 ────────────────────────────────────────────────────────────────────
  · 카드는 그림자 대신 1px 테두리로 면을 가른다.
  · 한 화면에서 가장 큰 글자는 하나.
  · 황금빛은 아껴 쓴다. 남발하면 강조가 아니게 된다.
  · 색을 직접 적지 말고 반드시 아래 변수를 쓸 것.
  · 앱(ui/theme/Color.kt)과 값이 같아야 한다.
*/

/* ── 토큰 ───────────────────────────────────────────────────────────────── */
:root {
  /* 은하수 (밤) */
  --night:        #101A3A;
  --night-2:      #182448;
  --night-3:      #212F5C;
  --night-line:   #2B3866;
  --on-night:     #EEF1FA;
  --on-night-dim: #9EA7C6;

  /* 화지 (낮) */
  --washi:        #FBF8F1;
  --paper:        #FFFFFF;
  --paper-2:      #F4EFE4;
  --line:         #E9E1D2;
  --ink:          #1C1B2E;
  --ink-muted:    #6C6B85;
  --ink-faint:    #9B9AB2;

  /* 단자쿠 (강조) */
  --tanzaku:      #F2B33D;
  --tanzaku-deep: #D9931B;
  --tanzaku-soft: #FFF3D6;
  --on-tanzaku:   #2B1D05;

  /* 청죽 — 좋은 상태, 인증 */
  --bamboo:       #2E9E7A;
  --bamboo-soft:  #E3F5EE;

  --danger:       #E1414A;
  --danger-soft:  #FDECEE;

  --r-lg: 26px;
  --r:    18px;
  --r-sm: 12px;

  --shell: 1120px;
  --pad:   20px;
}

/* ── 바탕 ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Pretendard', 'Noto Sans JP', 'Noto Sans KR', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--washi);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body.night { background: var(--night); color: var(--on-night); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

/* ── 글자 ───────────────────────────────────────────────────────────────── */
.h1 { font-size: clamp(34px, 6.2vw, 60px); font-weight: 800; letter-spacing: -.03em; line-height: 1.14; }
.h2 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; letter-spacing: -.025em; line-height: 1.25; }
.h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.body { font-size: 16px; color: var(--ink-muted); }
.small { font-size: 13.5px; color: var(--ink-faint); }

.night .body  { color: var(--on-night-dim); }
.night .small { color: var(--on-night-dim); opacity: .8; }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tanzaku);
}

/* ── 버튼 ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font-family: inherit; font-weight: 700;
  font-size: 16px; padding: 15px 26px; border-radius: 14px;
  background: var(--tanzaku); color: var(--on-tanzaku);
  transition: transform .12s ease, filter .15s ease;
}
.btn:hover  { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.night .btn.ghost { color: var(--on-night); border-color: var(--night-line); }

.btn.sm { font-size: 14px; padding: 11px 18px; border-radius: 12px; }
.btn.block { width: 100%; }

/* ── 카드 ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
}
.night .card { background: var(--night-2); border-color: var(--night-line); }
.card.soft { background: var(--paper-2); border-color: transparent; }

.bubble {
  width: 46px; height: 46px; border-radius: 15px;
  display: grid; place-items: center; font-size: 21px;
  background: var(--tanzaku-soft);
}
.bubble.bamboo { background: var(--bamboo-soft); }
.bubble.plain  { background: var(--paper-2); }
.night .bubble.plain { background: var(--night-3); }

/* ── 알약 ───────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 99px;
  background: var(--paper-2); color: var(--ink-muted);
}
.pill.tanzaku { background: var(--tanzaku-soft); color: var(--tanzaku-deep); }
.pill.bamboo  { background: var(--bamboo-soft);  color: var(--bamboo); }
.pill.danger  { background: var(--danger-soft);  color: var(--danger); }
.night .pill  { background: var(--night-3); color: var(--on-night-dim); }

/* ── 격자 ───────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* 한 요소에 .shell 과 겹치므로 좌우는 건드리지 않는다 */
.section { padding-top: 72px; padding-bottom: 72px; }
.section-head { margin-bottom: 30px; }
.section-head .h2 { margin-top: 10px; }
.section-head .body { margin-top: 10px; max-width: 560px; }

/* ── 은하수와 단자쿠 ────────────────────────────────────────────────────── */
/*
  랜딩 배경. 별은 점, 단자쿠는 세로로 긴 조각이 살랑인다.
  그림 파일이 아니라 도형과 애니메이션이라 용량이 0 이고 어떤 크기에서도 안 깨진다.
  '움직임 줄이기'를 켠 사람에게는 멈춰 있게 둔다.
*/
.sky { position: relative; overflow: hidden; }
.sky::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 70% 20%, rgba(242,179,61,.10), transparent 70%),
    radial-gradient(ellipse 90% 30% at 50% 45%, rgba(158,167,198,.12), transparent 70%);
}
.star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; opacity: .35;
  animation: twinkle 4s ease-in-out infinite;
}
.tanzaku-strip {
  position: absolute; width: 14px; height: 46px; border-radius: 3px;
  background: linear-gradient(180deg, var(--tanzaku), var(--tanzaku-deep));
  box-shadow: 0 0 18px rgba(242,179,61,.35);
  transform-origin: 50% -10px;
  animation: sway 6s ease-in-out infinite;
  opacity: .9;
}
.tanzaku-strip::before {
  content: ''; position: absolute; left: 50%; top: -12px; width: 1px; height: 12px;
  background: rgba(255,255,255,.5); transform: translateX(-50%);
}
.tanzaku-strip.b { background: linear-gradient(180deg, #8FB7E8, #4F7FCB); box-shadow: 0 0 18px rgba(143,183,232,.3); }
.tanzaku-strip.g { background: linear-gradient(180deg, #7ED3B2, var(--bamboo)); box-shadow: 0 0 18px rgba(46,158,122,.3); }
.tanzaku-strip.p { background: linear-gradient(180deg, #E9C2F0, #B77FD0); box-shadow: 0 0 18px rgba(183,127,208,.3); }

@keyframes twinkle { 0%,100% { opacity: .25; } 50% { opacity: .8; } }
@keyframes sway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .star, .tanzaku-strip { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── 머리띠 (로그인 후 화면들) ──────────────────────────────────────────── */
.appbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,248,241,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.appbar .shell { display: flex; align-items: center; gap: 14px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--tanzaku), var(--tanzaku-deep));
  box-shadow: 0 4px 14px rgba(242,179,61,.32);
  font-size: 15px;
}
.spacer { flex: 1; }

/* ── 바닥 ───────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--night-line); padding-top: 40px; padding-bottom: 56px; }
.foot .links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.foot .links a { font-size: 13.5px; color: var(--on-night-dim); }
.foot .links a:hover { color: var(--on-night); }

/* ── 자잘한 것 ──────────────────────────────────────────────────────────── */
.hide { display: none !important; }
.center { text-align: center; }
.stack-sm > * + * { margin-top: 8px; }
.stack   > * + * { margin-top: 16px; }