/* 태블릿 웹뷰 전용. 가로로 쓰는 10~13인치를 기준으로 짰다.
   손가락으로 누르는 화면이라 과녁을 키우고(최소 72px) 한 화면에 세 장이 들어오게 한다. */
:root{
  --canvas:#f6f7fa; --surface:#fff; --line:#dfe3ea; --line-soft:#eef1f6;
  --ink:#111827; --text:#1f2537; --muted:#5f687d;
  --accent:#514ee4; --accent-strong:#3f3dca; --on-accent:#fff;
  --warn:#b42318; --r-lg:16px; --r-md:12px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --canvas:#0b1020; --surface:#111831; --line:#273149; --line-soft:#1c2439;
  --ink:#f1f3f5; --text:#e6ebfb; --muted:#a9b3c9;
  --accent:#6461f0; --accent-strong:#5552e3; --on-accent:#0b1020;
  --warn:#ff6b6b;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0b1020; --surface:#111831; --line:#273149; --line-soft:#1c2439;
    --ink:#f1f3f5; --text:#e6ebfb; --muted:#a9b3c9;
    --accent:#6461f0; --accent-strong:#5552e3; --on-accent:#0b1020;
    --warn:#ff6b6b; color-scheme:dark;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--canvas); color:var(--text);
  font:17px/1.6 system-ui,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  /* 웹뷰에서 길게 눌러 글자가 잡히거나 당겨 새로고침되는 것을 막는다. */
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; overscroll-behavior:none;
}
#main{max-width:1180px; margin:0 auto; padding:32px 32px calc(32px + env(safe-area-inset-bottom))}

.head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:40px}
.brand{margin:0; font-size:20px; font-weight:800; letter-spacing:.12em; color:var(--ink)}
.brand span{color:var(--accent)}
.account{
  display:inline-flex; align-items:center; min-height:56px; padding:0 20px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  color:var(--text); font-weight:700; text-decoration:none;
}

.title{margin:0 0 6px; font-size:34px; line-height:1.25; color:var(--ink)}
.lead{margin:0 0 28px; color:var(--muted)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0; padding:0; list-style:none}
/* 세로로 들거나 작은 태블릿이면 한 줄에 둘, 더 좁으면 하나. */
@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .cards{grid-template-columns:1fr} #main{padding:20px} .title{font-size:28px} }

.card{display:flex; flex-direction:column; gap:10px; padding:24px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface)}
.card h2{margin:0; font-size:22px; color:var(--ink)}
.card p{margin:0; color:var(--muted); min-height:3.2em}
.card .open{
  display:flex; align-items:center; justify-content:center; min-height:72px; margin-top:auto;
  border-radius:var(--r-md); background:var(--accent); color:var(--on-accent);
  font-size:18px; font-weight:800; text-decoration:none;
}
.card .open:active{background:var(--accent-strong)}
.card.risk p{color:var(--warn); font-weight:700}

.note{margin:28px 0 0; color:var(--muted)}
a:focus-visible,.open:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}