/* 바위너구리스튜디오: the dark showcase (docs/design/site, option B). */
:root {
  --bg: #121110;
  --panel: #1c1a18;
  --ink: #f4efe9;
  --muted: #a39a91;
  --line: #2c2926;
  --font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.nav { display: flex; justify-content: space-between; align-items: center; padding-block: 26px; }
.brand { font-weight: 900; font-size: 19px; letter-spacing: -0.02em; }
.links { display: flex; gap: 24px; color: var(--muted); font-size: 15px; }
.links a:hover { color: var(--ink); }
.hero { padding-block: 88px 72px; text-align: center; }
.hero h1 { margin: 0; font-size: clamp(42px, 8vw, 76px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.1; text-wrap: balance; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #ffb38a, #ff6f91 50%, #b794ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: 22px auto 0; max-width: 560px; font-size: 18px; color: var(--muted); }
.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 8px; border-radius: 36px; overflow: hidden; background: linear-gradient(135deg, #ffe3e8, #fff6f1 60%); color: #3e2a24; margin-bottom: 20px; }
.feature .txt { padding: 56px; align-self: center; }
.feature small { font-weight: 800; color: #cf3d61; letter-spacing: 0.06em; font-size: 13px; }
.feature h2 { margin: 12px 0; font-size: clamp(30px, 4vw, 44px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.18; }
.feature p { margin: 0; font-size: 17px; color: #6e5a52; }
.feature .btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; background: #3e2a24; color: #fff; padding: 13px 20px; border-radius: 14px; font-weight: 700; font-size: 15px; }
.feature .btn img { width: 24px; border-radius: 6px; }
.feature .shots { display: flex; gap: 16px; justify-content: center; padding: 40px 40px 0; }
.feature .shots img { width: min(190px, 40%); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(160, 60, 80, 0.2); }
.feature:hover .btn { background: #2b1d19; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-bottom: 80px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 12px; min-height: 236px; min-width: 0; }
.tile.secret { border-style: dashed; background: transparent; }
a.tile:hover { border-color: #4a4540; }
.icon { width: 64px; height: 64px; border-radius: 16px; }
.letter { display: grid; place-items: center; font-family: "Nunito", var(--font); font-weight: 900; font-size: 26px; color: #fff; }
.tile h3 { margin: 4px 0 0; font-size: 19px; font-weight: 800; }
.tile p { margin: 0; font-size: 14px; color: var(--muted); }
.state { margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px; }
.foot { border-top: 1px solid var(--line); padding-block: 32px 44px; font-size: 13px; color: var(--muted); line-height: 1.9; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot b { color: var(--ink); }
.foot a { text-decoration: underline; text-underline-offset: 3px; }
.lost { padding-block: 120px; text-align: center; }
.lost h1 { margin: 0 0 12px; font-size: 32px; }
.lost p { color: var(--muted); }
.lost a { color: #ff8aa5; text-decoration: underline; }
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: 1fr; }
  .feature .txt { padding: 36px 28px 0; }
  .feature .shots { padding: 28px 20px 0; }
}
@media (max-width: 520px) {
  .hero { padding-block: 56px 48px; }
  .hero p { font-size: 16px; }
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
  .links { gap: 16px; }
}