/* 찰나 게임 안내 페이지 */
:root{ --ink:#1B1F1B; --muted:rgba(27,31,27,.58); --line:rgba(27,31,27,.12); --paper:#fff; --go:#2E9E6D; --bg:#FAFAF8; }
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Noto Sans KR','Noto Sans JP','Noto Sans SC',system-ui,-apple-system,'Apple SD Gothic Neo','Hiragino Sans','PingFang SC','Microsoft YaHei',sans-serif; line-height:1.7; overflow-wrap:anywhere; }
html:lang(ko) body{ word-break:keep-all; }
html:lang(ja) body, html:lang(zh-Hans) body{ line-break:strict; }
a{ color:inherit; }
img{ max-width:100%; height:auto; }
.wrap{ max-width:880px; margin:0 auto; padding:0 16px; }

/* 상단 */
.top{ position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line); }
.top-in{ display:flex; align-items:center; gap:14px; min-height:56px; flex-wrap:wrap; }
.logo{ display:flex; align-items:center; gap:8px; text-decoration:none; font-weight:900; font-size:19px; }
.logo img{ border-radius:8px; display:block; }
.topnav{ display:flex; gap:14px; font-size:14px; font-weight:500; margin-right:auto; }
.topnav a{ text-decoration:none; color:var(--muted); }
.topnav a:hover{ color:var(--ink); }
.langs{ display:flex; gap:4px; }
.langs a{ text-decoration:none; font-size:12px; font-weight:700; color:var(--muted); border:1.5px solid var(--line); border-radius:8px; padding:3px 7px; }
.langs a.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
@media (max-width:520px){ .topnav{ order:3; width:100%; margin:0 0 8px; } .langs{ margin-left:auto; } }

/* 공통 */
main{ padding-top:18px; padding-bottom:40px; }
h1{ font-weight:900; letter-spacing:-.01em; line-height:1.25; }
h2{ font-size:clamp(18px,3vw,21px); font-weight:800; margin:0 0 12px; letter-spacing:-.01em; }
section{ margin-top:34px; }
.crumbs{ font-size:13px; color:var(--muted); }
.crumbs a{ text-decoration:none; }
.note{ font-size:13px; color:var(--tink,#555); background:var(--tint,#f3f3f3); border-radius:10px; padding:8px 12px; display:inline-block; margin:8px 0 0; }
.play{ display:inline-block; background:var(--ink); color:#fff; text-decoration:none; font-weight:700; font-size:16px; padding:13px 26px; border-radius:999px; }
.play:hover{ background:#000; }

/* 게임 페이지 */
.hero{ display:grid; grid-template-columns: 1fr 250px; gap:28px; align-items:center; margin-top:14px; }
.badge{ display:inline-block; font-size:13px; font-weight:700; color:var(--tink); background:var(--tint); border-radius:999px; padding:4px 12px; }
.hero h1{ font-size:clamp(30px,6vw,44px); margin:10px 0 4px; }
.tagline{ font-size:clamp(17px,3vw,20px); font-weight:700; margin:0 0 12px; }
.lead{ font-size:16px; color:rgba(27,31,27,.82); margin:0 0 20px; }
.play-sub{ font-size:13px; color:var(--muted); margin:8px 0 0; }
.shot{ margin:0; }
.shot img{ display:block; width:100%; border-radius:24px; border:6px solid #fff; box-shadow:0 10px 30px rgba(0,0,0,.12), 0 0 0 1px var(--line); background:#fff; }
@media (max-width:680px){ .hero{ grid-template-columns:1fr; } .shot{ max-width:260px; margin:0 auto; } }
.glance dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:0; }
.glance dl div{ background:var(--tint); border-radius:14px; padding:12px 14px; }
.glance dt{ font-size:12.5px; font-weight:700; color:var(--tink); }
.glance dd{ margin:2px 0 0; font-size:15px; font-weight:500; }
.steps{ counter-reset:s; list-style:none; padding:0; margin:0; }
.steps li{ counter-increment:s; position:relative; padding:12px 14px 12px 52px; background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:8px; }
.steps li::before{ content:counter(s); position:absolute; left:14px; top:12px; width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; line-height:1; }
.tips, .for{ padding-left:20px; margin:0; }
.tips li, .for li{ margin-bottom:8px; }
.skills{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.skill{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.skill b{ display:block; font-size:16px; margin-bottom:4px; color:var(--tink); }
.skill span{ font-size:14.5px; color:rgba(27,31,27,.8); }
.more p{ margin:0; }
.cta{ text-align:center; background:var(--tint); border-radius:20px; padding:26px 16px; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.card{ display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 12px; text-decoration:none; transition: box-shadow .15s, transform .15s; }
.card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-1px); }
.card img{ width:52px; height:52px; flex:none; border-radius:10px; object-fit:contain; background:#F4F4F1; }
.card b{ display:block; font-size:15.5px; }
.card i{ display:block; font-style:normal; font-size:13px; color:var(--muted); line-height:1.45; }
.all{ margin:14px 0 0; font-weight:700; }

/* 목록 페이지 */
.idx h1{ font-size:clamp(28px,5vw,38px); margin:8px 0 8px; }
.idx .lead{ max-width:680px; }
.catsec{ background:var(--tint); border-radius:22px; padding:20px 16px 18px; }
.catsec .cathead{ display:flex; align-items:baseline; gap:10px; }
.catsec .cathead h2{ margin:0; }
.catsec .cathead span{ font-size:13px; font-weight:700; color:var(--tink); }
.catsec > p{ margin:4px 0 12px; color:rgba(27,31,27,.75); }
.catsec .note{ background:#fff; margin:0 0 12px; }
.howto ul{ padding-left:20px; }

/* 소개·방침 (앱 내용 재사용) */
.appcopy{ padding-top:6px; }
.appcopy .intro-wrap, .appcopy .privacy-wrap{ background:transparent; }

/* 아래 */
.foot{ border-top:1px solid var(--line); background:#fff; padding:22px 0 30px; font-size:13px; color:var(--muted); }
.foot p{ margin:0 0 6px; }
.foot .disc{ color:rgba(27,31,27,.7); }

/* 타이머 페이지 */
.tpage h1{ font-size:clamp(28px,5vw,38px); margin:8px 0 8px; }
.tbox{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:22px 14px 18px; max-width:460px; margin:22px auto 0; box-shadow:0 6px 20px rgba(0,0,0,.05); }

/* 앱 소개·방침 */

  .privacy-wrap{
    max-width: 640px; margin: 0 auto;
    padding: clamp(20px, 4vh, 32px) clamp(20px, 5vw, 32px) 64px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .privacy-wrap h1{ font-weight: 900; font-size: clamp(24px, 5vw, 32px); margin: 0 0 8px; letter-spacing: -0.01em; color: var(--ink); }
  .privacy-updated{ font-weight: 500; font-size: 14px; color: var(--muted); margin: 0 0 28px; }
  .privacy-wrap h2{ font-weight: 700; font-size: clamp(17px, 3vw, 19px); margin: 32px 0 10px; letter-spacing: -0.01em; color: var(--ink); }
  .privacy-wrap p, .privacy-wrap li{ font-weight: 400; font-size: clamp(14px, 2.6vw, 15px); color: rgba(27,31,27,0.85); line-height: 1.7; }
  .privacy-wrap ul{ padding-left: 20px; margin: 8px 0; }
  .privacy-wrap li{ margin-bottom: 6px; }
  .privacy-wrap a{ color: var(--ink); }
  .privacy-note{
    background: rgba(46,158,109,0.07); border: 1px solid rgba(46,158,109,0.25);
    border-radius: 12px; padding: 14px 16px; margin: 14px 0;
    font-size: 13px; color: rgba(27,31,27,0.8);
  }


  .intro-wrap{
    max-width: 640px; margin: 0 auto;
    padding: clamp(20px, 4vh, 32px) clamp(20px, 5vw, 32px) 64px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .intro-hero{ text-align: center; margin-bottom: clamp(28px, 5vh, 40px); }
  .intro-hero h1{ font-weight: 900; font-size: clamp(24px, 5.5vw, 34px); letter-spacing: -0.01em; margin: 0 0 12px; color: var(--ink); }
  .intro-hero p{ font-weight: 400; font-size: clamp(14px, 2.8vw, 16px); color: var(--muted); max-width: 480px; margin: 0 auto; }

  .intro-stat-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 8px; }
  .intro-stat{ background: #F5F6F3; border-radius: 14px; padding: 16px 10px; text-align: center; }
  .intro-stat b{ display: block; font-weight: 900; font-size: clamp(20px, 4.5vw, 26px); margin-bottom: 2px; color: var(--ink); }
  .intro-stat span{ font-weight: 500; font-size: 12px; color: var(--muted); }

  .intro-wrap h2{ font-weight: 700; font-size: clamp(17px, 3vw, 19px); margin: 32px 0 10px; letter-spacing: -0.01em; color: var(--ink); }
  .intro-wrap p, .intro-wrap li{ font-weight: 400; font-size: clamp(14px, 2.6vw, 15px); color: rgba(27,31,27,0.85); line-height: 1.7; }
  .intro-wrap ul{ padding-left: 20px; margin: 8px 0; }
  .intro-wrap li{ margin-bottom: 6px; }

  .intro-cat-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
  .intro-cat-box{ border-radius: 14px; padding: 18px 14px; }
  .intro-cat-box.intro-cat-cognitive{ background: #EAF0FE; }
  .intro-cat-box.intro-cat-sensorimotor{ background: #E9F7EF; }
  .intro-cat-box.intro-cat-casual{ background: #FBF1DE; }
  .intro-cat-box.intro-cat-toddler{ background: #FFEFF5; }
  .intro-cat-box h3{ font-weight: 700; font-size: 15px; margin: 0 0 6px; color: var(--ink); }
  .intro-cat-box p{ font-size: 12px; margin: 0; color: rgba(27,31,27,0.7); }
  @media (max-width: 420px){ .intro-cat-grid{ grid-template-columns: 1fr; } }

  .intro-cta{ margin-top: 40px; text-align: center; padding: 28px 18px; background: #F5F6F3; border-radius: 18px; }
  .intro-cta p{ margin: 0 0 14px; font-weight: 500; }
  .intro-cta button{
    display: inline-block; background: var(--ink); color: #fff; border: none;
    font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 14px;
    padding: 11px 26px; border-radius: 999px; cursor: pointer;
  }