/* Layout: a quiet room with one subject. Rouge is only the beak. */
  :root {
    --bg: #FFFFFF; --glow: #FFFFFF; --text: #121212; --text2: #6B6966; --text3: #9C9A96; --line: #D9D7D3; --accent: #D42A4C;
    --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans TC", "Noto Sans KR", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #101010; --glow: #101010; --text: #F5F5F5; --text2: #B7B7B7; --text3: #858585; --line: #454545;
      color-scheme: dark;
    }
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0; color: var(--text); font: 16px/1.6 var(--sans);
    background: var(--bg);
    padding-block: 0; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
  }
  h1, p { margin: 0; }
  :focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }

  .page { min-height: 100%; max-width: 960px; margin: 0 auto; }
  .stage { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100vh; padding-block: 24px; }

  .kyu { width: min(46vw, 30vh, 280px); aspect-ratio: 1; color: var(--text); display: block; }
  .word { margin-top: clamp(20px, 5vh, 48px); font: italic 400 clamp(56px, min(12vw, 11vh), 112px)/1 var(--serif); letter-spacing: 0.005em; }
  .line { margin-top: clamp(12px, 2.4vh, 24px); font-size: clamp(15px, 1.2vw + 8px, 19px); letter-spacing: 0.12em; color: var(--text2); font-weight: 400; padding-left: 0.12em; }
  .hero-copy { max-width: 520px; margin-top: 10px; color: var(--text2); font-size: 15px; }
  .stores { margin-top: clamp(24px, 6vh, 56px); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .store { height: 44px; padding: 0 22px 0 18px; border-radius: 999px; border: 0.5px solid var(--text); display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; text-decoration: none; color: inherit; }
  .store svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
  .store.solid { background: var(--text); color: var(--bg); }
  .store.solid small { color: var(--bg); opacity: .6; }
  .store small { font-size: 12px; color: var(--text3); font-weight: 400; }


  .showcase { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(36px, 6vw, 80px); max-width: 960px; margin: 0 auto; padding: 64px 0 88px; border-top: 1px solid var(--line); }
  .showcase-intro { padding: 0; border: 0; }
  .eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
  .showcase h2 { max-width: 460px; margin: 12px 0 18px; font: 400 clamp(30px, 3.2vw, 40px)/1.25 var(--serif); }
  .lead { max-width: 440px; color: var(--text2); font-size: 16px; line-height: 1.8; }
  .features { display: flex; flex-direction: column; gap: 0; margin: 0; }
  .feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .feature:first-child { border-top: 1px solid var(--line); }
  .feature .number { grid-column: 1; grid-row: 1; padding-top: 2px; color: var(--accent); font-size: 11px; letter-spacing: .12em; }
  .feature h3 { grid-column: 2; grid-row: 1; margin: 0 0 7px; font-size: 15px; font-weight: 600; }
  .feature p, .policy-copy { grid-column: 2; margin: 0; color: var(--text2); font-size: 14px; line-height: 1.75; }
  .policy { padding: 30px 0; border-top: 1px solid var(--line); }
  .policy-en { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
  .policy-en h3 { margin: 8px 0; font-size: 18px; }
  .policy-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
  .policy-links a { color: inherit; text-underline-offset: 3px; }
  .foot { padding-block: 16px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 24px; justify-content: center; font-size: 11px; letter-spacing: 0.2em; color: var(--text3); text-transform: uppercase; }
  @media (max-width: 640px) {
    .showcase { grid-template-columns: 1fr; gap: 28px; padding: 42px 0 56px; }
    .showcase h2 { max-width: 420px; font-size: clamp(28px, 8vw, 34px); }
    .lead { font-size: 15px; }
    .feature { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; padding: 18px 0; }
  }


  .rise { animation: rise 1100ms cubic-bezier(.2,.6,.2,1) both; }
  .rise.d1 { animation-delay: 200ms; } .rise.d2 { animation-delay: 400ms; } .rise.d3 { animation-delay: 600ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @media (max-width: 600px) {
    .stores { width: 100%; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 12px; }
    .store { width: min(100%, 320px); justify-content: center; }
  }
  @media (prefers-reduced-motion: reduce) { .rise { animation: none; } }