/* 짜국 웹 공통 스타일 — 앱(패미컴 컨트롤러 · 플라스틱) 디자인을 그대로 옮긴 것.
   서체는 앱과 같은 갈무리11, 버튼·카드는 앱의 볼록 플라스틱 문법을 따른다.
   값은 앱 android/core/designsystem PlasticTokens.kt 에서 그대로 가져왔다.
   앱이 밝은 회색 플라스틱 한 가지 세계라, 웹도 단일 테마로 둔다(의도). */

:root {
  /* 몸통 플라스틱 */
  --body:#DCD9D3; --body-hi:#F0EEEA; --body-lo:#BEBBB4; --body-sh:#9E9B94;
  /* 검정 페이스플레이트 */
  --plate:#3B3B3B; --plate-hi:#4A4A4A; --plate-lo:#262626;
  /* 몸통에 새긴 줄무늬 */
  --trim:#9C9C9C; --trim-lo:#7E7E7E;
  /* A·B 버튼 빨강 = 주 동작 */
  --red:#D8342A; --red-hi:#E85A4C; --red-lo:#9E1F17;
  /* 십자키·고무 알약 */
  --ink:#1B1B1B; --rubber:#3A3A3A; --rubber-hi:#4C4C4C; --on-rubber:#C8C5C0;
  /* 글자 */
  --on-red:#FFFFFF; --on-plate:#DCD9D3; --on-plate-dim:#9E9B96;
  --dim:#6E6B64;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:var(--body);
  color:var(--ink);
  /* 앱 전체 서체 = 갈무리11. 로드 전/실패 시 시스템 한글 폴백. */
  font-family:'Galmuri11', -apple-system, BlinkMacSystemFont,
              "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  line-height:1.8;
  letter-spacing:-.01em;
}

.wrap { max-width:720px; margin:0 auto; padding:28px 20px 64px; }

header { padding:12px 0 20px; }
/* 앱은 굵기가 일반(400)·볼드(700) 둘뿐이라 웹도 그 둘만 쓴다. */
.brand { font-weight:700; color:var(--red); font-size:20px; letter-spacing:-.02em; }
h1 { font-weight:700; font-size:26px; margin:6px 0 4px; letter-spacing:-.02em; text-wrap:balance; }
.updated { color:var(--dim); font-size:14px; margin-bottom:20px; }
.lead { color:var(--dim); font-size:14px; margin-bottom:20px; }

/* 카드 = 앱의 볼록 플라스틱 하우징(raisedPlastic).
   위·왼쪽 밝은 테, 아래·오른쪽 어두운 테, 바닥에 드리우는 그림자로 볼록함을 낸다.
   흰 종이가 아니라 바탕과 같은 몸통색 위에 베벨만으로 떠 보이게 한다. */
.card {
  background:var(--body);
  border-radius:14px;
  padding:22px 22px 12px;
  box-shadow:
    inset 2px 2px 0 var(--body-hi),
    inset -2px -3px 0 var(--body-lo),
    0 3px 0 var(--body-sh),
    0 8px 18px rgba(0,0,0,.14);
}

h2 { font-weight:700; font-size:17px; margin:26px 0 8px; letter-spacing:-.01em; }
h2:first-child { margin-top:6px; }
p, li { font-size:15px; }
ul { padding-left:20px; }
li { margin:4px 0; }
strong { font-weight:700; }
a { color:var(--red); }

/* 표 — 앱엔 표가 없지만, 검정 판(faceplate) 머리글로 앱 색을 빌려 온다. */
table { width:100%; border-collapse:collapse; margin:8px 0 4px; font-size:14px; }
th, td { text-align:left; padding:9px 11px; border-bottom:1px solid var(--body-lo); vertical-align:top; }
th { color:var(--dim); font-weight:700; white-space:nowrap; }
.note { color:var(--dim); font-size:13px; }

/* 빨간 플라스틱 버튼 = 앱 raisedButton(빨강). 세로 그라디언트(위 12%/아래 12%만
   하이라이트·그늘, 가운데는 평평) + 알약 + 들림 그림자. 누르면 2px 내려간다(pressable). */
.btn {
  display:block; width:100%; height:46px; border:0; cursor:pointer;
  border-radius:999px;
  font-family:inherit; font-weight:700; font-size:15px; color:var(--on-red);
  /* 링크(<a>)로도 씁니다 — 그때 필요한 셋. <button> 에는 원래 없던 문제라
     기존 폼 버튼의 생김새는 그대로입니다.
     · text-decoration: 링크의 밑줄을 지웁니다
     · text-align + line-height: 글자를 알약 한가운데로 (button 은 저절로 되지만
       a 는 왼쪽·위에 붙습니다)
     · box-sizing: 혹시 테두리가 붙어도 높이가 46 을 넘지 않게 */
  text-decoration:none; text-align:center; line-height:46px; box-sizing:border-box;
  background:linear-gradient(180deg,
    var(--red-hi) 0%, var(--red) 12%, var(--red) 88%, var(--red-lo) 100%);
  box-shadow:0 3px 0 var(--red-lo), 0 5px 10px rgba(0,0,0,.22);
  transition:transform 40ms ease, box-shadow 40ms ease;
}
.btn:active {
  transform:translateY(2px);
  box-shadow:0 1px 0 var(--red-lo), 0 2px 5px rgba(0,0,0,.22);
}
.btn:disabled { opacity:.55; cursor:default; transform:none; box-shadow:0 3px 0 var(--red-lo); }
.btn:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* 입력칸 = 앱의 움푹 팬 화면(sunken). 위·왼쪽 어둡고 아래·오른쪽 밝게 파이게. */
label { display:block; font-size:13px; color:var(--dim); margin:14px 0 6px; }
input, textarea {
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:#E7E5E0;
  border:0; border-radius:10px; padding:11px 13px;
  box-shadow: inset 2px 2px 0 var(--body-lo), inset -1px -1px 0 var(--body-hi);
}
textarea { min-height:140px; resize:vertical; }
input:focus, textarea:focus { outline:2px solid var(--red); outline-offset:1px; }

footer { color:var(--dim); font-size:13px; margin-top:24px; text-align:center; line-height:1.7; }
footer a { color:var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition:none; }
}