/* brainchejo.com 공용 — 앱 토큰(apps/app/lib/ui/tokens.dart) 그대로. 홈 · 법적 세 쪽 · 404 가 같은 파일을 쓴다 (docs/05-growth/launch-prep.md §2 · §4.1)
   /assets/ 는 하루 캐시다 — 이 파일이나 글꼴을 바꾸면 홈의 site.css?v= 와 아래 글꼴의 ?v= 를 올린다 */
@font-face{font-family:"Gothic A1";src:url("/assets/fonts/gothic-a1-500.woff2?v=5") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Gothic A1";src:url("/assets/fonts/gothic-a1-700.woff2?v=5") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Gothic A1";src:url("/assets/fonts/gothic-a1-800.woff2?v=5") format("woff2");font-weight:800;font-style:normal;font-display:swap}
:root{--paper:#F0E9DB;--card:#FFFFFF;--soft:#F7F2E8;--ink:#1A1A1A;--ink2:#4E4942;--ink3:#6B6157;--accent:#C8452F;--stamp:#B8412C;--line:#DED5C4}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:"Gothic A1","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;font-weight:500;font-size:19px;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto}
strong{font-weight:700}

/* 준비 중 · 404 — 한 화면 가운데 */
.soon{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:48px 24px;text-align:center}
.soon-icon{width:112px;height:112px;border-radius:26px;box-shadow:0 10px 30px rgba(26,26,26,.12)}
.soon h1{margin:0;font-size:40px;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.soon .lede{margin:0;color:var(--ink2);font-size:20px;line-height:1.7;text-wrap:balance}

/* 머리 — 법적 세 쪽 */
.bar{display:flex;align-items:center;padding:14px max(20px,env(safe-area-inset-left));border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font-size:20px;font-weight:800}
.brand img{width:32px;height:32px;border-radius:8px}

/* 법적 세 쪽 — 한 틀 (launch-prep §4.1). 본문 18px · 폭 760 */
.legal{flex:1;width:100%;max-width:760px;margin:0 auto;padding:30px 20px 48px;font-size:18px;line-height:1.75}
.legal h1{margin:0 0 6px;font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.legal h2{margin:38px 0 10px;font-size:21px;font-weight:800;line-height:1.4;scroll-margin-top:16px}
.legal h3{margin:24px 0 8px;font-size:19px;font-weight:700}
.legal p,.legal li{margin:8px 0}
.legal ol,.legal ul{padding-left:26px}
.legal .meta{margin:0 0 24px;color:var(--ink3);font-size:16px}
.legal .lead{margin:0 0 8px}
.legal .disclaimer{margin:10px 0;padding:14px 18px 14px 40px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.legal table{border-collapse:collapse;width:100%;margin:12px 0;font-size:16px;line-height:1.6;background:var(--card)}
.legal th,.legal td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.legal thead th,.legal tbody th{background:var(--soft);font-weight:700}
.legal tbody th{width:9.5em}

/* 초안 표시 — 게시 전에는 지운다 (검사가 남아 있으면 운영 도메인 배포를 막는다) */
.draft{margin:0 0 24px;padding:12px 16px;border-radius:12px;background:#FFF4D6;border:1px solid #F0C24B;font-size:16px}
.todo{padding:0 4px;border-radius:4px;background:#FFE08A;font-weight:700}

/* 표 — 폰 폭에서는 줄마다 한 덩어리로 쌓고, 칸 이름(data-label, 줄머리 th)을 값 위에 적는다 (이담 docs/33 D66 과 같은 규칙) */
@media (max-width:600px){
  .legal table,.legal thead,.legal tbody,.legal tr,.legal th,.legal td{display:block;width:auto}
  .legal thead{display:none}
  .legal table{background:none}
  .legal tr{margin:0 0 10px;padding:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--card)}
  .legal th,.legal td{border:0;padding:3px 14px;background:none}
  .legal tbody th,.legal td[data-label]::before{font-size:14px;font-weight:700;color:var(--ink3)}
  .legal tbody th{width:auto;padding-bottom:0;background:none}
  .legal th+td{padding-top:0}
  .legal td[data-label]::before{content:attr(data-label);display:block}
}

/* 바닥 — 모든 쪽이 같다 */
.foot{padding:22px 20px max(26px,env(safe-area-inset-bottom));border-top:1px solid var(--line);text-align:center;font-size:15px;line-height:1.7;color:var(--ink3)}
.foot p{margin:4px 0}
.foot a{color:inherit}
.foot .links{text-wrap:balance}
.foot .links a{color:var(--ink2);font-weight:700;white-space:nowrap}

/* 홈 — 시안(디자인 캔버스 ‘두뇌체조 홈페이지 시안’ · 데스크톱 1280 · 폰 390)을 한 쪽으로 (launch-prep §3). 그림은 실제 것만 — infra/tool/site-images.py */
.home{--warm:#FBE6E0;--kick:#A33A26;--band:#E9E2D4;--ok:#2E7D4F;--shadow:0 1px 1px rgba(60,44,26,.12),0 2px 6px rgba(60,44,26,.06)}
.home main{flex:1;overflow-x:hidden;overflow-x:clip}
.home h1,.home h2,.home h3{margin:0;font-weight:800;text-wrap:balance}
.home h2{font-size:clamp(32px,4vw,46px);line-height:1.22;letter-spacing:-.03em}
.home p{margin:0}
.home ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:1184px;margin-inline:auto;padding-inline:max(32px,env(safe-area-inset-left))}
.kicker{color:var(--kick);font-size:17px;font-weight:800}
.lede{max-width:34em;color:var(--ink2);font-size:21px;line-height:1.7}
br.m{display:none}

/* 머리 */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:20px}
.top .brand{font-size:24px;letter-spacing:-.02em}
.top .brand img{width:44px;height:44px;border-radius:11px;box-shadow:0 1px 2px rgba(60,44,26,.2)}
.get-pill{padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:15px;font-weight:800;white-space:nowrap;text-decoration:none}
.get-pill:hover{background:var(--soft)}

/* 첫 화면 — 폰 안 실제 홈 화면, ‘오늘 완료’ 도장이 한 번 찍힌다 */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;align-items:center;gap:72px;padding-block:32px 112px}
.hero-copy{display:flex;flex-direction:column;gap:28px;min-width:0}
.hero .kicker{align-self:flex-start;padding:8px 16px;border-radius:999px;background:var(--warm)}
.hero h1{font-size:clamp(46px,6.4vw,80px);line-height:1.08;letter-spacing:-.04em}
.hero h1 .hl{color:var(--accent)}
/* 소제목(오늘의 두뇌체조)을 h1 안에 — 검색이 보는 제목에 이름이 들게(2026-10-12 SEO). 모양은 전과 같다: 간격은 .hero-copy 와 같고, 글자는 소제목 그대로 */
.hero-title{display:flex;flex-direction:column;gap:28px}
.hero-title .kicker{line-height:1.6;letter-spacing:normal}
.hero .lede{max-width:28em}
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:0 24px;border-radius:16px;background:var(--ink);color:#fff;font-size:19px;font-weight:800;line-height:1.25;text-decoration:none}
.store:hover{background:#3A3631}
.store span{color:#D9D2C5;font-size:13px;font-weight:700}
.note{color:var(--ink2);font-size:17px}
.hero-art{position:relative;display:flex;justify-content:center;padding-block:24px}
.hero-art::before{content:"";position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:var(--warm)}
.phone{position:relative;width:320px;max-width:100%;padding:12px;border-radius:48px;background:var(--ink);box-shadow:0 30px 60px rgba(60,44,26,.26)}
.phone img{display:block;width:100%;height:auto;border-radius:36px}
.stamp{position:absolute;right:-90px;top:276px;width:128px;height:128px;font-family:inherit;transform:rotate(-14deg);animation:stamp-in .7s cubic-bezier(.2,.8,.2,1) .5s both}
@keyframes stamp-in{0%{opacity:0;transform:rotate(-14deg) scale(1.6)}60%{opacity:1;transform:rotate(-14deg) scale(.94)}100%{opacity:1;transform:rotate(-14deg) scale(1)}}

/* 마디 */
.sec{display:flex;flex-direction:column;gap:44px;padding-block:96px}
.sec-head{display:flex;flex-direction:column;gap:16px;max-width:760px}

/* 다섯 영역 — 영역 색 위에 앱의 카드 그림 · 게임 넷 */
.domains{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.domain{display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:var(--card);box-shadow:var(--shadow)}
.art{background:var(--d);aspect-ratio:200/140}
.art img{display:block;width:100%;height:100%}
.domain .body{display:flex;flex-direction:column;gap:10px;padding:18px 18px 22px}
.domain h3{display:flex;align-items:center;gap:8px;font-size:21px}
.domain h3::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--dot,var(--d))}
.names{display:flex;flex-direction:column;gap:6px;color:var(--ink2);font-size:18px}
.d-lan{--d:#8FA9A0}.d-att{--d:#4A7C59}.d-mem{--d:#2E4A7D}.d-cal{--d:#D9A441}.d-spd{--d:#2E2A26;--dot:#1A1A1A}

/* 게임 스무 가지 — 천천히 흐르고, 올리면 멈추고, ‘동작 줄이기’면 멈춘 채 옆으로 넘겨 본다 */
.band{display:flex;flex-direction:column;gap:44px;padding-block:96px;background:var(--band)}
.strip{overflow:hidden}
.strip-rail{display:flex;width:max-content;animation:drift 100s linear infinite}
.strip:hover .strip-rail{animation-play-state:paused}
.strip-track{display:flex;gap:20px;padding-right:20px}
@keyframes drift{to{transform:translateX(-50%)}}
.tile{flex:none;display:flex;flex-direction:column;gap:10px;width:220px}
.tile .art{overflow:hidden;border-radius:16px}
.tile p{color:var(--ink2);font-size:15px}
.tile b{color:var(--ink);font-size:18px;font-weight:800}

/* 한 판 — 실제 게임 화면과 스토어 문구 */
.plays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.play{display:flex;flex-direction:column;align-items:center;gap:28px;margin:0;padding:40px 32px 36px;border-radius:28px;background:var(--card);box-shadow:var(--shadow)}
.play .phone{width:280px;padding:10px;border-radius:42px;box-shadow:none}
.play .phone img{border-radius:32px}
.play figcaption{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink2);font-size:19px;text-align:center}
.play strong{color:var(--ink);font-size:26px;font-weight:800;letter-spacing:-.02em}
.chip{padding:5px 12px;border-radius:999px;background:var(--d);color:#fff;font-size:15px;font-weight:800}
.chip.d-cal{color:var(--ink)}

/* 내 기록 */
.rec{display:grid;grid-template-columns:360px minmax(0,1fr);grid-template-areas:"phone head" "phone list";column-gap:72px;row-gap:24px}
.rec-head{grid-area:head;align-self:end;display:flex;flex-direction:column;gap:24px}
.rec-phone{grid-area:phone;display:flex;justify-content:center}
.checks{grid-area:list;align-self:start;display:flex;flex-direction:column;gap:14px;font-size:20px;line-height:1.5}
.checks li{display:flex;align-items:flex-start;gap:12px}
.checks svg{flex:none;width:26px;height:26px;margin-top:1px;fill:none;stroke:var(--ok);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* 편하게 · 안심 */
.band-card{background:var(--card)}
.band-card .wrap{display:flex;flex-direction:column;gap:44px}
.easy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.easy li{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:20px;background:var(--paper)}
.easy li>div{display:flex;flex-direction:column;gap:10px}
.ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--warm)}
.ico svg{width:26px;height:26px;fill:none;stroke:var(--stamp);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.easy h3{font-size:22px}
.easy p{color:var(--ink2);font-size:19px;line-height:1.65}

/* 마무리 */
.cta{display:flex;flex-direction:column;align-items:center;gap:28px;padding-block:120px;text-align:center}
.cta img{width:96px;height:96px;border-radius:24px;box-shadow:0 4px 14px rgba(60,44,26,.18)}
.cta h2{font-size:clamp(36px,4.6vw,52px);line-height:1.15}
.cta .stores{justify-content:center}
.cta .store{text-align:left}

/* 고지 — 바닥 위에. 바닥(.foot)은 모든 쪽이 같다 */
.home-note{display:flex;flex-direction:column;align-items:center;gap:12px;padding-block:40px 8px;border-top:1px solid var(--line);color:var(--ink2);font-size:16px;line-height:1.7;text-align:center}
.brand-line{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:19px;font-weight:800}
.brand-line img{width:32px;height:32px;border-radius:8px}
.home-note .disclaimer{max-width:46em}
.home .foot{border-top:0}
/* 웹에서 바로 풀기 — 다섯 영역 아래 · 오늘의 두뇌체조(/today · 함수) · 속담 퀴즈 */
.try{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:32px}
.try p{width:100%;margin:0;color:var(--ink2);font-size:17px;font-weight:700;text-align:center}
.try a{padding:13px 20px;border:1px solid var(--line);border-radius:999px;background:var(--card);box-shadow:var(--shadow);color:var(--ink);font-size:17px;font-weight:800;text-decoration:none}
.try a:hover{background:var(--soft)}

/* 앱 받기 (/app — 광고 · 쇼츠 · 카톡이 여는 곳 · 2026-10-08). 휴대폰을 보면 단추 하나(.one — assets/get.js), 아니면 두 단추 */
.get [hidden]{display:none!important}
.get main{flex:1;width:100%;max-width:520px;margin:0 auto;padding:40px max(20px,env(safe-area-inset-left)) 28px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.get-icon{width:112px;height:112px;border-radius:26px;box-shadow:0 6px 18px rgba(60,44,26,.18)}
.get h1{margin:0;font-size:40px;font-weight:800;letter-spacing:-.02em}
.get-lede{margin:-10px 0 4px;color:var(--ink2);font-size:21px;line-height:1.5}
.get-btns{display:flex;flex-direction:column;gap:12px;align-self:stretch}
.get-btn{display:flex;flex-direction:column;justify-content:center;min-height:76px;padding:0 24px;border-radius:18px;background:var(--ink);color:#fff;font-size:24px;font-weight:800;line-height:1.3;text-decoration:none}
.get-btn span{color:#D9D2C5;font-size:15px;font-weight:700}
.get-btn:hover{background:#3A3631}
.get-btn.alt{min-height:66px;background:var(--card);color:var(--ink);border:1px solid var(--line);font-size:21px}
.get-btn.alt span{color:var(--ink3)}
.get-btn.alt:hover{background:var(--soft)}
.get-btn.one{min-height:92px;background:var(--accent);font-size:30px}
.get-btn.one:hover{background:#B23C29}
.get-hint{margin:-4px 0 0;color:var(--ink2);font-size:19px;line-height:1.6}
.get-hint b{color:var(--ink)}
.get-other{margin:-8px 0 0;font-size:16px}
.get-other a{color:var(--ink2)}
.get-points{margin:8px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-self:stretch}
.get-points li{padding:14px 10px;border-radius:14px;background:var(--card);font-size:17px;font-weight:700}
.get-shots{display:flex;justify-content:center;gap:14px;align-self:stretch;margin-top:6px}
.get-shots .phone{width:46%;padding:7px;border-radius:30px;box-shadow:0 14px 30px rgba(60,44,26,.2)}
.get-shots .phone img{border-radius:23px}
.get-more{margin:2px 0 0;font-size:17px;font-weight:700}
.get-more a{color:var(--ink2)}
.get .disclaimer{margin:6px 0 0;color:var(--ink3);font-size:14px;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  .stamp,.strip-rail{animation:none}
  .strip{overflow-x:auto}
  .strip-track[aria-hidden]{display:none}
}
@media (max-width:1199px){.stamp{right:-64px}}
@media (max-width:999px){.domains{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:899px){
  .hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:20px 72px}
  .rec{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "phone" "list";row-gap:28px}
  .rec-head,.checks{align-self:auto}
  .easy{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699px){
  .wrap{padding-inline:max(20px,env(safe-area-inset-left))}
  br.m{display:inline}
  .top{padding-block:16px}
  .top .brand{font-size:21px}
  .top .brand img{width:36px;height:36px;border-radius:9px}
  .get-pill{padding:8px 14px;font-size:14px}
  .kicker{font-size:16px}
  .lede{font-size:19px}
  .hero{gap:24px}
  .hero-copy{gap:24px}
  .hero-title{gap:24px}
  .hero h1{font-size:48px;line-height:1.12}
  .stores{flex-direction:column;gap:10px}
  .store{padding:0 22px;font-size:18px}
  .note{font-size:16px}
  .hero-art{padding-block:28px 8px}
  .hero-art::before{width:380px;height:380px;margin:-190px 0 0 -190px}
  .phone{width:250px;padding:10px;border-radius:40px}
  .phone img{border-radius:30px}
  .stamp{width:84px;height:84px;right:-66px;top:272px}
  .sec,.band{gap:28px;padding-block:64px}
  .band-card .wrap{gap:24px}
  .sec-head{gap:12px}
  .domains{grid-template-columns:minmax(0,1fr);gap:12px}
  .domain{flex-direction:row;border-radius:18px}
  .domain .art{flex:none;display:flex;align-items:center;width:128px;aspect-ratio:auto}
  .domain .art img{height:auto}
  .domain .body{justify-content:center;gap:6px;padding:14px 16px}
  .domain h3{font-size:19px}
  .domain h3::before{width:11px;height:11px}
  .names{display:block;font-size:16px;line-height:1.55}
  .names li{display:inline;white-space:nowrap}
  .names li:not(:last-child)::after{content:"\00A0·"}
  .strip-rail{animation-duration:80s}
  .strip-track{gap:14px;padding-right:14px}
  .tile{gap:8px;width:150px}
  .tile .art{border-radius:14px}
  .tile p{display:flex;flex-direction:column;gap:2px;font-size:14px}
  .tile b{font-size:16px}
  .plays{grid-template-columns:minmax(0,1fr);gap:20px}
  .play{gap:20px;padding:28px 20px 24px;border-radius:24px}
  .play .phone{width:220px;padding:8px;border-radius:34px}
  .play .phone img{border-radius:26px}
  .play figcaption{gap:6px;font-size:17px}
  .play strong{font-size:22px}
  .chip{padding:4px 12px;font-size:14px}
  .checks{gap:12px;font-size:18px}
  .checks svg{width:24px;height:24px}
  .easy{grid-template-columns:minmax(0,1fr);gap:12px}
  .easy li{flex-direction:row;gap:14px;padding:20px;border-radius:18px}
  .easy li>div{gap:4px}
  .ico{flex:none;width:44px;height:44px}
  .ico svg{width:22px;height:22px}
  .easy h3{font-size:19px}
  .easy p{font-size:17px;line-height:1.6}
  .cta{gap:22px;padding-block:80px}
  .cta img{width:80px;height:80px;border-radius:20px}
  .cta h2{font-size:36px}
  .cta .lede{font-size:18px}
  .cta .stores{align-self:stretch}
  .home-note{font-size:15px}
}
@media (max-width:380px){.stamp{right:-30px}}