@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Jua&family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

/* ============================================================
   꾸꾸·비비 — 공용 스타일
   ============================================================ */

:root {
  --cream: #fffae7;
  --cream-2: #faf4e4;
  --cream-3: #f3ecd9;
  --ink: #2f2d2d;
  --ink-soft: #332e29;
  --red: #d02e2e;
  --red-band: #c1393a;
  --yellow: #e0a951;
  --line: #2f2d2d1f;
  --line-mid: #2f2d2d38;
  --line-strong: #2f2d2d59;

  --display: 'Jua', 'Apple SD Gothic Neo', 'Pretendard', 'Noto Sans KR', sans-serif;
  --body: 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --pen: 'Nanum Pen Script', 'Apple SD Gothic Neo', cursive;

  --shell: 1180px;
  --header-h: 72px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  word-break: keep-all;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 타이포 ---------- */

.display { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; line-height: 1.16; }
.pen { font-family: var(--pen); color: var(--ink-soft); }

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 18px;
}

.mark { color: var(--red); }

.underline-rough {
  position: relative;
  display: inline-block;
  color: var(--red);
}
.underline-rough::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%; bottom: -.16em;
  height: .24em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1 8 C 30 2, 55 10, 88 5 S 150 9, 199 4' fill='none' stroke='%23e0a951' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 7px;
  border: 1.5px solid var(--ink);
  font-family: var(--body);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn-red,
.nav a.btn-red {
  background: var(--red);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-red:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-red:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--cream-3); border-color: var(--ink); }

.btn-light {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 #00000026;
}
.btn-light:hover { transform: translate(-2px, -2px); }

.btn-sm { padding: 10px 16px; font-size: .85rem; border-radius: 6px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--line-mid);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: #fff6;
}

.link-red {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
  font-size: .92rem;
}
.link-red:hover { text-decoration: underline; }

/* ---------- 헤더 ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.header-in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo {
  font-family: var(--display);
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.logo span { color: var(--red); }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav a {
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav a:hover { color: var(--red); }
.nav .btn { margin-left: 4px; }

/* ---------- 스프라이트 ---------- */

.sprite {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.sprite-stage {
  position: relative;
  display: grid;
  place-items: center;
}

/* 히어로 캐러셀 카드 */
.cat-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.cat-card {
  background: var(--cream-2);
  border: 1.5px solid var(--line-mid);
  border-radius: 14px;
  padding: 18px 16px 14px;
  box-shadow: 6px 8px 0 #2f2d2d14;
  transition: transform .2s ease;
}
.cat-card:nth-child(1) { transform: rotate(-2.4deg); }
.cat-card:nth-child(2) { transform: rotate(1.8deg) translateY(18px); }
.cat-card:nth-child(3) { transform: rotate(1.4deg) translateY(-6px); }
.cat-card:nth-child(4) { transform: rotate(-1.6deg) translateY(12px); }
.cat-card:hover { transform: rotate(0) translateY(-4px) scale(1.02); }

.cat-card .sprite-stage {
  background: var(--cream);
  border: 1px dashed var(--line-mid);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
}
.cat-card .sprite { width: 104px; }
.cat-card-name {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 0 0 2px;
}
.cat-card-desc { font-size: .78rem; color: #2f2d2dad; margin: 0; line-height: 1.5; }

/* 손글씨 주석 + 화살표 */
.scribble {
  position: absolute;
  font-family: var(--pen);
  font-size: 1.4rem;
  color: var(--ink-soft);
  line-height: 1.25;
  pointer-events: none;
  z-index: 5;
}
.scribble svg { display: block; }
.arrow-doodle { stroke: var(--red); fill: none; stroke-width: 2.4; stroke-linecap: round; }

.sticker {
  position: absolute;
  z-index: 6;
  display: inline-block;
  padding: 8px 15px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--display);
  font-size: .9rem;
  border-radius: 6px;
  transform: rotate(-6deg);
  box-shadow: 3px 3px 0 #2f2d2d33;
  white-space: nowrap;
}
.sticker-light {
  background: var(--cream);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

/* ---------- 히어로 ---------- */

.hero { padding: 74px 0 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5.6vw, 3.9rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 0 0 22px;
}
.hero-sub {
  font-size: 1.02rem;
  color: #2f2d2dd6;
  margin: 0 0 30px;
  max-width: 30em;
}
.hero-sub strong { font-weight: 700; color: var(--ink); }
.hero-sub u { text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 9px; }

.hero-visual { position: relative; }

/* ---------- 스탯 밴드 ---------- */

.stats {
  border-top: 1px solid var(--line-mid);
  border-bottom: 1px solid var(--line-mid);
  background: var(--cream-2);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 40px 22px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat-num {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--red);
  line-height: 1;
  margin: 0 0 8px;
}
.stat-num small { font-size: .45em; }
.stat-label { font-size: .84rem; color: #2f2d2dab; margin: 0; }

/* ---------- 섹션 공통 ---------- */

.section { padding: 84px 0; }
.section-head { max-width: 42em; margin-bottom: 46px; }
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 0 0 14px;
}
.section-head p { margin: 0; color: #2f2d2dc4; }

/* ---------- 레드 풀블리드 (다운로드) ---------- */

.band-red {
  background: var(--red-band);
  color: #fff;
  padding: 84px 0;
  position: relative;
}
.band-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 58px;
  align-items: start;
}
.band-copy { position: relative; padding-top: 42px; }
.band-badges {
  position: absolute;
  top: -8px; left: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}
.badge-tilt {
  background: #fff;
  color: var(--ink);
  font-family: var(--display);
  font-size: .82rem;
  padding: 6px 13px;
  border-radius: 5px;
  transform: rotate(-5deg);
  box-shadow: 2px 3px 0 #00000026;
}
.badge-dark {
  background: #2f2d2d;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}
.band-red h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 0 0 18px;
  color: #fff;
}
.band-red p { color: #ffffffdb; margin: 0 0 14px; }
.band-red p strong { color: #fff; font-weight: 700; }
.band-red .pen { color: #ffffffcc; font-size: 1.35rem; display: block; margin-top: 18px; }

.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.dl-card {
  background: var(--cream);
  color: var(--ink);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 26px #00000026;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dl-top { display: flex; align-items: center; gap: 13px; }
.dl-icon {
  width: 58px; height: 58px;
  flex: 0 0 58px;
  background: var(--cream-3);
  border: 1.5px solid var(--line-mid);
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.dl-icon .sprite { width: 46px; }
.dl-name { font-family: var(--display); font-size: 1.12rem; margin: 0; line-height: 1.25; }
.dl-meta, .band-red .dl-card p.dl-meta { font-size: .74rem; color: #2f2d2d99; margin: 2px 0 0; }
.dl-desc, .band-red .dl-card p.dl-desc { font-size: .82rem; color: #2f2d2dbd; margin: 0; line-height: 1.6; flex: 1; }
.dl-card .btn { justify-content: center; }
.dl-tag {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--red);
  background: #d02e2e14;
  border: 1px solid #d02e2e30;
  border-radius: 4px;
  padding: 3px 8px;
}

/* ---------- 기능 카드 그리드 ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line-mid);
}
.feature {
  padding: 34px 32px;
  border-bottom: 1px solid var(--line-mid);
  border-left: 1px solid var(--line-mid);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.feature:nth-child(odd) { border-left: 0; }
.feature-ico {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  background: var(--cream-3);
  border: 1px solid var(--line-mid);
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.feature-ico img { width: 38px; image-rendering: pixelated; }
.feature h3 { font-family: var(--display); font-size: 1.15rem; margin: 0 0 7px; }
.feature p { margin: 0 0 10px; font-size: .88rem; color: #2f2d2dbd; }

/* ---------- 설치 배너 ---------- */

.notice {
  background: var(--cream-3);
  border-top: 1px solid var(--line-mid);
  border-bottom: 1px solid var(--line-mid);
  padding: 62px 0;
}
.notice-in {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
}
.notice h2 {
  font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  margin: 0 0 12px;
  line-height: 1.25;
}
.notice p { margin: 0; color: #2f2d2dc9; max-width: 34em; }
.notice .pen { font-size: 1.4rem; display: block; margin-top: 10px; color: var(--red); }

/* ---------- macOS 다이얼로그 모사 ---------- */

.mac-dialog {
  width: 100%;
  max-width: 340px;
  background: #f2f2f4;
  border: 1px solid #00000024;
  border-radius: 13px;
  box-shadow: 0 16px 40px #0000002e;
  padding: 22px 20px 18px;
  text-align: center;
  font-family: var(--body);
  color: #1d1d1f;
}
.mac-dialog.dark { background: #2c2c2e; color: #f5f5f7; border-color: #ffffff1f; }
.mac-ico {
  width: 54px; height: 54px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: linear-gradient(160deg, #ffdc7a, #e0a951);
  border: 1px solid #0000001f;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mac-ico img { width: 44px; image-rendering: pixelated; }
.mac-ico.warn { background: linear-gradient(160deg, #ffd15c, #f0a020); font-size: 1.7rem; line-height: 1; }
.mac-title { font-size: .88rem; font-weight: 700; margin: 0 0 6px; line-height: 1.45; }
.mac-body { font-size: .76rem; line-height: 1.6; margin: 0 0 16px; opacity: .8; }
.mac-btns { display: flex; flex-direction: column; gap: 7px; }
.mac-btn {
  font-size: .8rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #00000021;
  box-shadow: 0 1px 1px #0000000f;
}
.mac-btn.primary { background: #0a6cff; color: #fff; border-color: transparent; font-weight: 600; }
.mac-btn.hl {
  outline: 2.5px dashed var(--red);
  outline-offset: 3px;
}
.dark .mac-btn { background: #48484a; border-color: #ffffff1a; color: #f5f5f7; }

/* 우클릭 컨텍스트 메뉴 모사 */
.mac-menu {
  width: 208px;
  background: #f6f6f8ee;
  backdrop-filter: blur(8px);
  border: 1px solid #0000001f;
  border-radius: 9px;
  box-shadow: 0 12px 30px #00000030;
  padding: 5px;
  font-size: .78rem;
  color: #1d1d1f;
}
.mac-menu div { padding: 5px 10px; border-radius: 5px; }
.mac-menu div.on { background: #0a6cff; color: #fff; font-weight: 600; }
.mac-menu hr { border: 0; border-top: 1px solid #0000001c; margin: 5px 8px; }

/* 시스템 설정 창 모사 */
.mac-window {
  width: 100%;
  max-width: 420px;
  background: #f2f2f4;
  border: 1px solid #00000024;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 14px 34px #0000002b;
  color: #1d1d1f;
  font-size: .78rem;
}
.mac-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: #e8e8ea;
  border-bottom: 1px solid #00000014;
}
.mac-dot { width: 10px; height: 10px; border-radius: 50%; }
.mac-bar span:last-child { margin-left: 8px; font-weight: 600; font-size: .76rem; }
.mac-window-body { padding: 14px 14px 16px; }
.mac-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 8px;
  padding: 11px 13px;
  line-height: 1.5;
}
.mac-row + .mac-row { margin-top: 8px; }
.mac-row p { margin: 0; font-size: .74rem; }
.mac-section-title { font-weight: 700; margin: 0 0 9px; font-size: .8rem; }

/* ---------- 가이드 페이지 ---------- */

.guide-hero {
  padding: 66px 0 52px;
  border-bottom: 1px solid var(--line-mid);
}
.guide-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: -.03em;
  margin: 0 0 18px;
  max-width: 22em;
}
.guide-hero p { margin: 0 0 8px; color: #2f2d2dcc; max-width: 40em; }

.crumb { font-size: .8rem; color: #2f2d2d8f; margin: 0 0 20px; }
.crumb a { color: var(--red); text-decoration: none; font-weight: 700; }

.method {
  border-top: 1px solid var(--line-mid);
  padding: 56px 0;
}
.method-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 54px;
  align-items: start;
}
.method-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 12px;
}
.method-tag b {
  background: var(--red);
  color: #fff;
  width: 22px; height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: .78rem;
  letter-spacing: 0;
}
.method h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.9vw, 2.05rem);
  margin: 0 0 12px;
  line-height: 1.25;
}
.method > .shell > .method-grid > div > p { color: #2f2d2dc9; }

.steps { list-style: none; counter-reset: st; margin: 22px 0 0; padding: 0; }
.steps li {
  counter-increment: st;
  position: relative;
  padding: 0 0 18px 42px;
  font-size: .93rem;
  color: #2f2d2ddb;
}
.steps li::before {
  content: counter(st);
  position: absolute;
  left: 0; top: 1px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: var(--cream-3);
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: .82rem;
  color: var(--ink);
}
.steps li strong { color: var(--ink); }
.steps li code, .inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
  background: var(--cream-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}

.code-block {
  background: var(--ink);
  color: #f6efe0;
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  line-height: 1.7;
  margin: 18px 0 0;
}
.code-block .c { color: #e0a951; }

.callout {
  background: var(--cream-2);
  border: 1.5px solid var(--line-mid);
  border-left: 5px solid var(--red);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 26px 0 0;
}
.callout h3 { font-family: var(--display); font-size: 1.05rem; margin: 0 0 8px; }
.callout p { margin: 0 0 8px; font-size: .89rem; color: #2f2d2dc9; }
.callout p:last-child { margin-bottom: 0; }

.faq { display: grid; gap: 0; border-top: 1px solid var(--line-mid); }
.faq-item { border-bottom: 1px solid var(--line-mid); padding: 26px 0; }
.faq-item h3 { font-family: var(--display); font-size: 1.1rem; margin: 0 0 8px; }
.faq-item p { margin: 0; font-size: .91rem; color: #2f2d2dc4; }

.illus-wrap { position: relative; display: grid; place-items: center; gap: 16px; }
.illus-note {
  font-family: var(--pen);
  font-size: 1.3rem;
  color: var(--red);
  text-align: center;
  line-height: 1.3;
}

/* ---------- 푸터 ---------- */

.site-footer {
  background: var(--ink);
  color: #fffae7c4;
  padding: 56px 0 46px;
  padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px));
}
.footer-in {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 36px;
}
.footer-logo {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--cream);
  margin: 0 0 10px;
}
.footer-logo span { color: #ff8a8a; }
.site-footer p { margin: 0 0 6px; font-size: .84rem; }
.footer-col h4 {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fffae78c;
  margin: 0 0 12px;
  font-weight: 700;
}
.footer-col a {
  display: block;
  font-size: .87rem;
  color: var(--cream);
  text-decoration: none;
  margin-bottom: 7px;
}
.footer-col a:hover { color: #ff9d9d; }
.footer-bottom {
  border-top: 1px solid #fffae724;
  margin-top: 38px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  font-size: .78rem;
  color: #fffae78f;
}

/* ---------- 하단 고정 미니바 ---------- */

.minibar {
  position: fixed;
  text-decoration: none;
  z-index: 70;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 8px 10px 8px 16px;
  box-shadow: 4px 5px 0 #2f2d2d2e;
  max-width: calc(100vw - 32px);
}
.minibar .mini-sprite { width: 32px; flex: 0 0 32px; image-rendering: pixelated; }
.minibar span { font-size: .84rem; font-weight: 700; white-space: nowrap; }

/* ---------- 반응형 ---------- */

@media (max-width: 960px) {
  .hero-grid, .band-grid, .method-grid, .notice-in { grid-template-columns: 1fr; gap: 40px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .footer-in { grid-template-columns: 1fr 1fr; }
  .notice-in { justify-items: start; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .shell { padding: 0 18px; }
  .nav a { display: none; }
  .nav { gap: 10px; }
  .hero { padding: 46px 0 40px; }
  .section, .band-red { padding: 58px 0; }
  .cat-cards { gap: 12px; }
  .cat-card { padding: 13px 11px 11px; }
  .cat-card:nth-child(n) { transform: none; }
  .cat-card .sprite { width: 78px; }
  .dl-grid, .feature-grid { grid-template-columns: 1fr; }
  .feature { border-left: 0; padding: 26px 0; }
  .footer-in { grid-template-columns: 1fr; gap: 26px; }
  .scribble { display: none; }
  .sticker { display: none; }
  .minibar { padding: 7px 8px 7px 12px; gap: 8px; }
  .minibar span { font-size: .76rem; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* 하단 고정 미니바가 푸터 마지막 줄을 가리지 않도록 */
.footer-bottom { padding-bottom: 44px; }

/* ---------- 이벤트 페이지 ---------- */
/* 콘셉트: "이벤트 공고 포스터" — 다크/레드 기조 위에 크림 종이가 얹히는 1컬럼 구성.
   홈(index.html)의 크림 배경 2컬럼 구조와 의도적으로 반대로 설계했다.
   이벤트 전용 규칙은 모두 `ev-` 접두사. 아래 3개(.ig-ico / .btn-lg / .event-strip)만
   다른 페이지와 공유하므로 유지한다. */

/* 인스타그램 인라인 아이콘 (버튼 안) — 공용 */
.ig-ico {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
.ig-ico .ig-dot { fill: currentColor; stroke: none; }

.btn-lg { padding: 17px 30px; font-size: 1.05rem; border-radius: 8px; }

.pen-note {
  font-family: var(--pen);
  font-size: 1.35rem;
  color: var(--red);
  margin: 6px 0 0;
}

/* 이벤트 유도 배너 (index.html에서 사용 — 건드리지 말 것) */
.event-strip {
  background: var(--cream-3);
  border-top: 1px solid var(--line-mid);
  border-bottom: 1px solid var(--line-mid);
  padding: 26px 0;
}
.event-strip-in {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  text-align: center;
}
.event-strip .badge-tilt {
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 #2f2d2d2e;
}
.event-strip-text { font-size: 1rem; font-weight: 700; margin: 0; }
.event-strip-text .mark { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.event-strip .pen { font-size: 1.3rem; color: var(--red); }

/* ============================================================
   이벤트 페이지 전용 (ev-)
   ============================================================ */

/* 배경 반전: 본문 전체가 다크, 섹션마다 레드/다크 교차 */
.ev-main {
  background: var(--ink);
  background-image: repeating-linear-gradient(135deg, #ffffff08 0 2px, transparent 2px 13px);
  color: #fffae7;
  overflow-x: clip;
}

/* 섹션 래퍼 — --ev-notch 는 티켓 펀치홀이 뚫린 것처럼 보이게 하는 배경색 */
.ev-dark { background: var(--ink); --ev-notch: #2f2d2d; padding: 78px 0; position: relative; }
.ev-band { background: var(--red-band); --ev-notch: #c1393a; padding: 78px 0; position: relative; }

.ev-narrow { max-width: 780px; margin: 0 auto; }

/* 섹션 헤드 — 홈과 달리 전부 중앙 정렬 */
.ev-head { text-align: center; max-width: 36em; margin: 0 auto 46px; }
.ev-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 14px;
}
.ev-band .ev-eyebrow { color: #ffe6b4; }
.ev-head h2 {
  font-family: var(--display);
  font-size: clamp(1.85rem, 4.2vw, 2.7rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 0 0 12px;
  color: #fff;
}
.ev-head h2 .ev-hl { color: var(--yellow); }
.ev-band .ev-head h2 .ev-hl { color: #ffe6b4; }
.ev-head p { margin: 0; color: #fffae7cc; font-size: .96rem; }
.ev-head .pen { display: block; font-family: var(--pen); font-size: 1.35rem; color: #ffe6b4; margin-top: 12px; }

/* ---------- 1. 포스터 히어로 (중앙 1컬럼) ---------- */

.ev-poster { padding: 62px 0 78px; position: relative; }
.ev-poster-in { position: relative; max-width: 760px; margin: 0 auto; }

/* 크림 전단지 */
.ev-sheet {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 5px;
  box-shadow: 13px 15px 0 #00000059;
  padding: 62px 44px 42px;
  text-align: center;
}
.ev-sheet::before {
  content: '';
  position: absolute;
  inset: 11px;
  border: 1.5px dashed #2f2d2d3d;
  border-radius: 2px;
  pointer-events: none;
}
.ev-sheet > * { position: relative; }

/* 상단 EVENT 스탬프 */
.ev-stamp {
  position: absolute;
  top: -25px; left: 50%;
  transform: translateX(-50%) rotate(-2.5deg);
  z-index: 4;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-size: .92rem;
  letter-spacing: .3em;
  padding: 11px 30px 11px 34px;
  border: 2.5px solid var(--ink);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--ink);
  white-space: nowrap;
}

/* 기울어진 원형 도장 스티커 */
.ev-seal {
  position: absolute;
  top: 18px; right: -22px;
  z-index: 5;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: var(--cream);
  border: 2.5px solid var(--red);
  box-shadow: 0 0 0 4px var(--cream), 4px 5px 0 #00000045;
  transform: rotate(-13deg);
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--display);
  color: var(--red);
  line-height: 1.15;
  font-size: .95rem;
}
.ev-seal b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.6rem; }
.ev-seal::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px dotted var(--red);
  border-radius: 50%;
}

/* 좌상단 기울어진 스티커 */
.ev-tilt-sticker {
  position: absolute;
  top: 34px; left: -26px;
  z-index: 5;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--display);
  font-size: .85rem;
  padding: 8px 15px;
  border-radius: 5px;
  transform: rotate(-8deg);
  box-shadow: 3px 4px 0 #00000059;
  white-space: nowrap;
}

.ev-crumb { font-size: .78rem; color: #2f2d2d8f; margin: 0 0 14px; }
.ev-crumb a { color: var(--red); text-decoration: none; font-weight: 700; }

.ev-kicker {
  font-family: var(--pen);
  font-size: 1.55rem;
  color: var(--red);
  margin: 0 0 2px;
  line-height: 1.2;
}

/* 초대형 중앙 헤드라인 */
.ev-title {
  font-family: var(--display);
  font-size: clamp(2.3rem, 7.4vw, 4.3rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  margin: 0 0 6px;
  color: var(--ink);
}
.ev-title em { font-style: normal; color: var(--red); }
.ev-title .ev-block { display: block; }

/* 점선 구분 룰 */
.ev-rule {
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 430px;
  margin: 22px auto;
  font-family: var(--pen);
  font-size: 1.2rem;
  color: #2f2d2d8f;
  white-space: nowrap;
}
.ev-rule::before, .ev-rule::after {
  content: '';
  flex: 1;
  border-top: 2px dotted #2f2d2d54;
}

/* 마주보는 꾸꾸·비비 */
.ev-duo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 6px;
}
.ev-duo .sprite { width: 116px; }
.ev-flip { transform: scaleX(-1); }
.ev-duo-mid {
  align-self: center;
  font-family: var(--pen);
  font-size: 1.5rem;
  color: var(--red);
  padding-bottom: 12px;
}

.ev-lead {
  font-size: 1rem;
  line-height: 1.8;
  color: #2f2d2dd6;
  max-width: 33em;
  margin: 6px auto 26px;
  text-align: left;
}
.ev-lead strong { font-weight: 700; color: var(--ink); }
.ev-lead u {
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

/* 포스터 하단 응모 조건 배지 */
.ev-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.ev-pill {
  padding: 6px 13px;
  border: 1.5px solid #2f2d2d38;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  color: #2f2d2dcc;
  background: #fff8;
}
.ev-dark .ev-pill, .ev-band .ev-pill {
  border-color: #fffae75c;
  color: #fffae7de;
  background: #ffffff14;
}

/* 포스터 밑 손글씨 */
.ev-poster-foot {
  text-align: center;
  font-family: var(--pen);
  font-size: 1.4rem;
  color: #ffe6b4;
  margin: 30px 0 0;
}

/* ---------- 2. 티켓형 CTA (응모권) ---------- */

.ev-ticket {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  background: var(--cream);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 13px;
  box-shadow: 8px 9px 0 #00000047;
  padding: 26px 34px 24px;
  text-align: center;
}
/* 양옆 반원 펀치홀 — 섹션이 지정한 --ev-notch 색으로 파낸 것처럼 */
.ev-ticket::before, .ev-ticket::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ev-notch, var(--cream-3));
  border: 2.5px solid var(--ink);
  transform: translateY(-50%);
}
.ev-ticket::before { left: -17px; }
.ev-ticket::after { right: -17px; }

/* 포스터 종이 안에 놓이는 티켓은 크림 위 크림 */
.ev-sheet .ev-ticket {
  --ev-notch: var(--cream);
  background: var(--cream-2);
  box-shadow: 6px 7px 0 #2f2d2d2e;
  max-width: 480px;
}

.ev-ticket-label {
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .26em;
  color: var(--red);
  margin: 0 0 8px;
}
.ev-ticket h3, .ev-ticket .ev-ticket-title {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0 0 14px;
  color: var(--ink);
}
/* 점선 절취선 */
.ev-tear {
  border: 0;
  border-top: 2px dashed #2f2d2d40;
  margin: 16px -12px;
}
.ev-ticket .btn-red { color: #fff; }
.ev-ticket-note {
  font-family: var(--pen);
  font-size: 1.25rem;
  color: #2f2d2d99;
  margin: 12px 0 0;
}
.ev-ticket-serial {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .66rem;
  letter-spacing: .2em;
  color: #2f2d2d7a;
  margin: 10px 0 0;
}

/* ---------- 3. 참여 방법 = 세로 타임라인 ---------- */

.ev-tl {
  list-style: none;
  position: relative;
  max-width: 660px;
  margin: 0 auto;
  padding: 0;
}
/* 점선 세로 라인 */
.ev-tl::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 14px; bottom: 26px;
  border-left: 3px dotted #fffae77a;
}
.ev-band .ev-tl::before { border-left-color: #ffffff8a; }
.ev-tl > li { position: relative; padding: 0 0 24px 88px; }
.ev-tl > li:last-child { padding-bottom: 0; }

.ev-tl-num {
  position: absolute;
  left: 0; top: 0;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--red);
  border: 2.5px solid var(--ink);
  box-shadow: 4px 5px 0 #0000004d;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  z-index: 2;
}
.ev-tl-card {
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 17px 20px;
  box-shadow: 6px 7px 0 #0000004d;
}
.ev-tl-card h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 0 0 6px;
  color: var(--ink);
}
/* 다크/레드 배경 규칙에 먹히지 않도록 카드 내부 텍스트 색 명시 */
.ev-tl-card p { margin: 0; font-size: .9rem; line-height: 1.7; color: #2f2d2dc9; }
.ev-tl-card p strong { color: var(--ink); font-weight: 700; }
.ev-tl-card .inline-code { color: var(--ink); }
.ev-tl-card.is-option { background: var(--cream-3); border-style: dashed; }
.ev-tl-tag {
  display: inline-block;
  margin: 0 0 8px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--red);
  background: #d02e2e14;
  border: 1px solid #d02e2e33;
  border-radius: 4px;
  padding: 3px 8px;
}

/* 타임라인 끝 매듭 */
.ev-tl-end {
  position: relative;
  max-width: 660px;
  margin: 4px auto 0;
  padding-left: 88px;
  font-family: var(--pen);
  font-size: 1.4rem;
  color: #ffe6b4;
}
.ev-tl-end::before {
  content: '★';
  position: absolute;
  left: 17px; top: -2px;
  font-family: var(--body);
  font-size: 1.7rem;
  color: var(--yellow);
  line-height: 1;
}

/* 인스타 계정 미니 배너 (타임라인 하단) */
.ev-acct {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 660px;
  margin: 34px auto 0;
  padding: 16px 20px;
  border: 2px dashed #fffae78a;
  border-radius: 14px;
  background: #00000024;
}
.ev-acct-ava {
  width: 52px; height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--cream);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ev-acct-ava .sprite { width: 44px; }
.ev-acct-txt { flex: 1 1 240px; min-width: 0; }
.ev-acct-txt b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.05rem; color: #fff; }
.ev-acct-txt span { display: block; font-size: .82rem; color: #fffae7bd; }

/* ---------- 4. 당첨 특전 = 폴라로이드 콜라주 ---------- */

.ev-collage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 34px 32px;
  padding: 10px 0 0;
}
.ev-polaroid {
  position: relative;
  width: 246px;
  background: #fffdf6;
  color: var(--ink);
  padding: 13px 13px 0;
  border: 1px solid #00000017;
  box-shadow: 0 18px 36px #00000075;
}
.ev-polaroid:nth-child(1) { transform: rotate(-3.4deg); }
.ev-polaroid:nth-child(2) { transform: rotate(1.9deg) translateY(20px); }
.ev-polaroid:nth-child(3) { transform: rotate(-1.6deg) translateY(6px); }
.ev-polaroid:hover { transform: rotate(0) translateY(-4px); }
.ev-polaroid { transition: transform .2s ease; }

/* 마스킹테이프 조각 */
.ev-tape {
  position: absolute;
  top: -15px; left: 50%;
  width: 104px; height: 30px;
  transform: translateX(-50%) rotate(-4deg);
  background: #e0a95199;
  border-left: 1px dashed #fffef880;
  border-right: 1px dashed #fffef880;
  box-shadow: 0 2px 4px #00000038;
}
.ev-polaroid:nth-child(2) .ev-tape { transform: translateX(-50%) rotate(5deg); background: #d02e2e6b; }
.ev-polaroid:nth-child(3) .ev-tape { transform: translateX(-52%) rotate(-8deg); }

.ev-photo {
  background: var(--cream-3);
  border: 1px solid #0000001f;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ev-photo .sprite { width: 124px; }
.ev-photo img { width: 108px; image-rendering: pixelated; }

.ev-cap { padding: 9px 6px 14px; text-align: center; }
.ev-cap h3 {
  font-family: var(--pen);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 0 0 2px;
  color: var(--ink);
}
.ev-cap-meta { font-size: .7rem; color: #2f2d2d94; margin: 0 0 8px; letter-spacing: .02em; }
.ev-cap p { font-size: .79rem; line-height: 1.6; color: #2f2d2dbd; margin: 0; text-align: left; }

/* 특전 설명 + 손글씨 */
.ev-prize-note {
  max-width: 40em;
  margin: 44px auto 0;
  text-align: center;
  font-size: .95rem;
  line-height: 1.8;
  color: #fffae7d1;
}
.ev-prize-note strong { color: #fff; font-weight: 700; }

/* ---------- 5. 일정 / 인원 = 티켓 스텁 표 ---------- */

.ev-stub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 760px;
  margin: 0 auto;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 8px 9px 0 #00000047;
}
.ev-stub > div {
  padding: 19px 14px;
  text-align: center;
  border-left: 2px dashed #2f2d2d33;
}
.ev-stub > div:first-child { border-left: 0; }
.ev-stub span { display: block; font-size: .74rem; color: #2f2d2d99; margin-bottom: 5px; }
.ev-stub b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--red);
}

/* ---------- 6. 유의사항 아코디언 ---------- */

.ev-faq {
  max-width: 800px;
  margin: 0 auto;
  background: var(--cream);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 10px 12px 0 #00000047;
  padding: 8px 26px;
}
.ev-q { border-bottom: 1px dashed #2f2d2d33; }
.ev-q:last-of-type { border-bottom: 0; }
.ev-q > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 16px 38px 16px 0;
  font-family: var(--display);
  font-size: 1.03rem;
  line-height: 1.45;
  color: var(--ink);
}
.ev-q > summary::-webkit-details-marker { display: none; }
.ev-q > summary::after {
  content: '+';
  position: absolute;
  right: 2px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--red);
}
.ev-q[open] > summary::after { content: '−'; }
.ev-q > summary:hover { color: var(--red); }
.ev-q p {
  margin: 0 0 17px;
  font-size: .9rem;
  line-height: 1.75;
  color: #2f2d2dc4;
}
.ev-q p strong { color: var(--ink); font-weight: 700; }

/* 당첨 안 돼도 받을 수 있다는 안내 */
.ev-consol {
  max-width: 800px;
  margin: 26px auto 0;
  background: #ffffff12;
  border: 1.5px solid #fffae75c;
  border-left: 5px solid var(--yellow);
  border-radius: 10px;
  padding: 18px 22px;
}
.ev-consol h3 { font-family: var(--display); font-size: 1.05rem; margin: 0 0 6px; color: #fff; }
.ev-consol p { margin: 0 0 8px; font-size: .89rem; color: #fffae7cc; }
.ev-consol p:last-child { margin-bottom: 0; }
.ev-consol a { color: var(--yellow); font-weight: 700; text-decoration: none; }
.ev-consol a:hover { text-decoration: underline; }

/* ---------- 7. 마지막 티켓 CTA ---------- */

.ev-final { padding: 74px 0 92px; text-align: center; }
.ev-final-cats {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 20px;
}
.ev-final-cats .sprite { width: 84px; }
.ev-final > .shell > h2 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.22;
  margin: 0 0 12px;
  color: #fff;
}
.ev-final > .shell > h2 .ev-hl { color: #ffe6b4; }
.ev-final > .shell > p { margin: 0 auto 30px; max-width: 32em; color: #fffae7cc; }
.ev-final .ev-ticket { max-width: 560px; }
.ev-final-foot {
  font-family: var(--pen);
  font-size: 1.4rem;
  color: #ffe6b4;
  margin: 26px 0 0;
}

/* ---------- 이벤트 반응형 ---------- */

@media (max-width: 900px) {
  .ev-sheet { padding: 56px 26px 38px; }
  .ev-seal { width: 88px; height: 88px; top: -14px; right: -10px; font-size: .8rem; }
  .ev-seal b { font-size: 1.3rem; }
  .ev-tilt-sticker { left: -10px; top: 26px; }
  .ev-stub { grid-template-columns: repeat(2, 1fr); }
  .ev-stub > div:nth-child(3) { border-left: 0; }
  .ev-stub > div:nth-child(n+3) { border-top: 2px dashed #2f2d2d33; }
}

@media (max-width: 720px) {
  .ev-dark, .ev-band { padding: 54px 0; }
  .ev-poster { padding: 40px 0 52px; }
  .ev-sheet { padding: 50px 18px 32px; box-shadow: 8px 9px 0 #00000059; }
  .ev-sheet::before { inset: 8px; }
  .ev-stamp { font-size: .78rem; letter-spacing: .22em; padding: 9px 20px 9px 23px; }
  .ev-seal { display: none; }
  .ev-tilt-sticker { display: none; }
  .ev-duo .sprite { width: 86px; }
  .ev-duo-mid { font-size: 1.2rem; }
  .ev-lead { font-size: .94rem; }
  .ev-rule { font-size: 1.05rem; max-width: 100%; }

  .ev-ticket { padding: 22px 20px 20px; border-radius: 11px; }
  .ev-ticket::before, .ev-ticket::after { width: 24px; height: 24px; }
  .ev-ticket::before { left: -13px; }
  .ev-ticket::after { right: -13px; }
  .ev-ticket .btn { width: 100%; justify-content: center; }

  /* 타임라인: 번호 뱃지 축소, 라인 왼쪽 붙임 */
  .ev-tl::before { left: 22px; }
  .ev-tl > li { padding-left: 62px; }
  .ev-tl-num { width: 46px; height: 46px; font-size: 1.15rem; box-shadow: 3px 4px 0 #0000004d; }
  .ev-tl-end { padding-left: 62px; }
  .ev-tl-end::before { left: 12px; }

  .ev-collage { gap: 26px 20px; }
  .ev-polaroid { width: 100%; max-width: 290px; }
  .ev-polaroid:nth-child(n) { transform: none; }

  .ev-faq { padding: 4px 18px; border-radius: 12px; }
  .ev-final { padding: 52px 0 72px; }
  .ev-final-cats .sprite { width: 66px; }
}