/* Layout: 크림 종이 위의 수채화 그림책. 원형 크레용 시계가 페이지의 축이고, 섹션은 하루의 흐름(아침→밤)을 따라간다. */
:root {
  --paper: #FAF6EA;      /* 앱 Paper */
  --paper-deep: #F2EAD6;
  --card: #FFFDF6;
  --ink: #4A3F35;        /* 앱 Ink */
  --cocoa: #7E664E;      /* 앱 Cocoa */
  --kraft: #D2BA96;      /* 앱 Kraft */
  --am: #BFE0F2;         /* 오전 하늘 링 */
  --pm: #F7D3D6;         /* 오후 분홍 링 */
  --star: #F4D58A;       /* 별 스티커 */
  --sage: #959A84;
  --mint: #A8DDB0;
  --lavender: #A58BD8;
  --peach: #F6B48A;
  --accent: #C2614F;     /* 크레용 빨강: 강조 글자 */
  --line: rgba(126, 102, 78, .22);
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -14px rgba(74, 63, 53, .35);
  --display: "Gaegu", "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --body: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
 
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(34px, 5vw, 50px); }
h3 { font-size: 26px; }
p { margin: 0; }
.eyebrow { font-family: var(--display); font-size: 21px; color: var(--cocoa); letter-spacing: .04em; }
.lede { font-size: clamp(18px, 2.1vw, 21px); color: var(--cocoa); max-width: 40em; }
section { padding-block: clamp(56px, 9vw, 104px); }
section + section { border-top: 1.5px dashed var(--line); }
.head { display: grid; gap: 14px; margin-bottom: 40px; max-width: 46em; }
mark { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--star) 75%, transparent) 58% 92%, transparent 92%); color: inherit; padding: 0 .1em; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- 표지 ---------- */
.hero { position: relative; padding-block: clamp(40px, 7vw, 80px) clamp(160px, 22vw, 260px); overflow: hidden;
  background: var(--paper) url("../img/img-01-3d976aaf80.jpg") center bottom / cover no-repeat; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.brand-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 5px var(--pm), var(--shadow); display: grid; place-items: center; overflow: hidden; }
.brand-mark img { width: 120%; margin-top: 18%; }
.brand-name { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: .02em; }
.brand-name small { display: block; font-size: 16px; font-weight: 400; color: var(--cocoa); letter-spacing: .08em; margin-top: -6px; }
.hero h1 { font-size: clamp(46px, 8vw, 92px); letter-spacing: -.01em; }
.hero h1 .scribble { position: relative; white-space: nowrap; }
.hero h1 .scribble::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .26em; background: var(--pm); border-radius: 40% 60% 50% 50%; z-index: -1; transform: rotate(-1.2deg); }
.hero .lede { margin-top: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip { font-family: var(--display); font-size: 19px; padding: 6px 16px 4px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line); }
.dial-box { position: relative; }
.dial-box svg { width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(74,63,53,.18)); }
.dial-box .peek { position: absolute; width: 34%; right: -6%; bottom: -12%; }
.dial-caption { text-align: center; font-family: var(--display); color: var(--cocoa); font-size: 19px; margin-top: 18px; }

/* ---------- 한 문장 ---------- */
.thesis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.thesis img { width: clamp(120px, 18vw, 200px); }
.thesis blockquote { margin: 0; font-family: var(--display); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.3; }
.thesis blockquote span { color: var(--accent); }

/* ---------- 왜 필요한가 ---------- */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.why article { padding: 26px 24px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; }
.why .tag { justify-self: start; font-family: var(--display); font-size: 18px; padding: 2px 12px; border-radius: 8px; transform: rotate(-2deg); }
.why article:nth-child(1) .tag { background: var(--am); }
.why article:nth-child(2) .tag { background: var(--pm); }
.why article:nth-child(3) .tag { background: color-mix(in srgb, var(--star) 80%, var(--card)); }
.why h3 { font-size: 24px; }

/* ---------- 하루 타임라인 ---------- */
.day { display: grid; gap: 0; position: relative; }
.moment { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(18px, 3vw, 36px); align-items: center; padding-block: 30px; border-bottom: 1.5px dashed var(--line); }
.moment:last-child { border-bottom: 0; }
.time { font-family: var(--display); font-size: 30px; line-height: 1.1; color: var(--cocoa); font-variant-numeric: tabular-nums; }
.time small { display: block; font-size: 16px; letter-spacing: .06em; }
.moment h3 { margin-bottom: 8px; }
.moment .say { margin-top: 12px; font-family: var(--display); font-size: 20px; background: var(--card); border: 1.5px solid var(--line); border-radius: 18px 18px 18px 4px; padding: 10px 16px 8px; display: inline-block; }
.shot { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); border: 6px solid var(--card); background: var(--card); }
.shot figcaption { font-size: 14px; color: var(--cocoa); padding: 8px 6px 2px; }

/* ---------- 기능 ---------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.feature { padding: 22px; border-radius: 20px; border: 1.5px solid var(--line); background: color-mix(in srgb, var(--card) 70%, transparent); display: grid; gap: 8px; align-content: start; }
.feature .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--ink); }
.feature h3 { font-size: 22px; }
.feature p { font-size: 15.5px; color: var(--cocoa); }

/* ---------- 친구들 ---------- */
.friends { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.friend { text-align: center; padding: 18px 14px 20px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); }
.friend img { width: 78%; margin: 0 auto -6px; }
.friend b { font-family: var(--display); font-size: 28px; display: block; }
.friend span { font-size: 14.5px; color: var(--cocoa); display: block; line-height: 1.55; }
.games { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.games li { list-style: none; font-family: var(--display); font-size: 19px; padding: 5px 14px 3px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line); }
.games li.new { background: color-mix(in srgb, var(--mint) 45%, var(--card)); }
.games-wrap { padding: 0; margin: 0; }

/* ---------- 효과 ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.panel { padding: 30px 28px; border-radius: 26px; display: grid; gap: 16px; align-content: start; }
.panel.kid { background: color-mix(in srgb, var(--am) 45%, var(--card)); }
.panel.parent { background: color-mix(in srgb, var(--pm) 50%, var(--card)); }
.panel ul { margin: 0; padding: 0; display: grid; gap: 14px; }
.panel li { list-style: none; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.panel li::before { content: "★"; color: var(--accent); font-size: 18px; line-height: 1.6; }
.panel li b { display: block; font-weight: 700; }

/* ---------- 기르는 힘 ---------- */
.skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.skill { padding: 22px 20px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.skill .bar { height: 10px; border-radius: 6px; background: var(--paper-deep); overflow: hidden; }
.skill .bar i { display: block; height: 100%; border-radius: 6px; }
.skill h3 { font-size: 23px; }
.skill p { font-size: 15.5px; color: var(--cocoa); }

/* ---------- AI 시대 ---------- */
.ai { background: var(--paper-deep); }
.ai-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.rules { display: grid; gap: 12px; }
.rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--card); align-items: start; }
.rule .who { font-family: var(--display); font-size: 17px; padding: 2px 10px; border-radius: 8px; white-space: nowrap; }
.who.ai-can { background: var(--mint); color: #2f3a2b; }
.who.kid-does { background: var(--am); color: #2b3a45; }
.who.parent-does { background: var(--pm); color: #4a2f33; }
.rule p { font-size: 15.5px; }
.ladder { display: grid; gap: 10px; counter-reset: step; }
.ladder li { list-style: none; counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed var(--line); background: color-mix(in srgb, var(--card) 60%, transparent); }
.ladder li::before { content: counter(step); font-family: var(--display); font-size: 26px; width: 40px; height: 40px; border-radius: 50%; background: var(--star); color: #4A3F35; display: grid; place-items: center; }
.ladder b { display: block; }
.ladder ol { margin: 0; padding: 0; }

/* ---------- 기술 ---------- */
.tech { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.tech article { padding: 22px; border-radius: 18px; border: 1.5px solid var(--line); display: grid; gap: 6px; align-content: start; background: var(--card); }
.tech .k { font-family: var(--display); color: var(--cocoa); font-size: 18px; }
.tech h3 { font-size: 22px; }
.tech p { font-size: 15.5px; }
.tech code { font-size: 13.5px; background: var(--paper-deep); padding: 1px 6px; border-radius: 6px; }
.flow { overflow-x: auto; margin-top: 28px; }
.flow svg { min-width: 760px; width: 100%; height: auto; }

/* ---------- 철학 ---------- */
.philo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1.5px solid var(--line); border-radius: 26px; overflow: hidden; background: var(--card); }
.philo article { padding: 30px 26px; display: grid; gap: 10px; align-content: start; }
.philo article + article { border-left: 1.5px dashed var(--line); }
.philo .big { font-family: var(--display); font-size: 40px; line-height: 1.1; }

/* ---------- 마무리 ---------- */
.night { background: #26304A url("../img/img-02-48bf48a416.jpg") center / cover; background-blend-mode: multiply; color: #F2E6C4; text-align: center; }
.night .wrap { display: grid; justify-items: center; gap: 18px; }
.night h2 { font-size: clamp(38px, 6vw, 64px); }
.night p { color: #E9DCB8; max-width: 34em; }
.night .sleepers { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.night .sleepers img { width: clamp(70px, 12vw, 120px); }
footer { padding-block: 28px; text-align: center; font-size: 14px; color: var(--cocoa); background: var(--paper); }

@media (max-width: 900px) {
  .hero-grid, .ai-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .dial-box { max-width: 420px; margin: 0 auto; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .moment { grid-template-columns: minmax(0, 1fr); }
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .friends { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .philo { grid-template-columns: minmax(0, 1fr); }
  .philo article + article { border-left: 0; border-top: 1.5px dashed var(--line); }
}
@media (max-width: 520px) {
  .skills { grid-template-columns: minmax(0, 1fr); }
  .thesis { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .brand-name { font-size: 34px; }
}
@media (prefers-reduced-motion: no-preference) {
  .dial-hand { transform-origin: 200px 200px; animation: tick 14s ease-in-out infinite alternate; }
  @keyframes tick { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
  .peek { animation: bob 3.2s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
}

/* ---------- 실시간 대화 ---------- */
.talk { background: color-mix(in srgb, var(--am) 22%, var(--paper)); }
.talk-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.talk-mock { margin: 0; position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); border: 6px solid var(--card); background: var(--card); }
.talk-bg { width: 100%; filter: saturate(.85); }
.talk-veil { position: absolute; inset: 0 0 34px; background: rgba(250,246,234,.45); }
.talk-ui { position: absolute; left: 4%; right: 4%; bottom: calc(34px + 3%); display: grid; gap: 1.6%; font-family: var(--display); color: #4A3F35; container-type: inline-size; }
.tb { justify-self: center; width: min(78%, 620px); background: rgba(255,253,246,.94); border-radius: 22px; padding: 2.2cqw 3cqw; text-align: center; display: grid; gap: .8cqw; justify-items: center; box-shadow: 0 10px 30px -14px rgba(74,63,53,.5); }
.tb-notice { background: #959A84; color: #fff; border-radius: 999px; padding: .4cqw 1.8cqw; font-size: clamp(10px, 1.9cqw, 15px); }
.tb-main { font-size: clamp(12px, 2.7cqw, 21px); line-height: 1.3; font-weight: 700; }
.tb-me { font-family: var(--body); font-size: clamp(10px, 1.8cqw, 14px); color: #7E664E; }
.tb-wave { display: flex; gap: 3px; align-items: center; height: 3.4cqw; }
.tb-wave i { width: 4px; border-radius: 3px; background: #959A84; height: 30%; }
.tm { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1cqw; mask-image: linear-gradient(90deg, #000 85%, rgba(0,0,0,.25)); }
.tm span { background: #fff; border-radius: 12px; display: grid; justify-items: center; padding: .9cqw .3cqw; font-size: clamp(11px, 2.2cqw, 18px); line-height: 1.1; }
.tm b { font-size: clamp(8px, 1.5cqw, 13px); font-weight: 700; white-space: nowrap; }
.tm-end { background: #7E664E; color: #fff; border-radius: 12px; text-align: center; padding: 1cqw; font-size: clamp(10px, 1.8cqw, 15px); }
.talk-mock figcaption { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; font-size: 13.5px; color: var(--cocoa); padding: 8px 8px 0; background: var(--card); }
.talk-steps { margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: t; }
.talk-steps li { list-style: none; counter-increment: t; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; font-size: 15px; color: var(--cocoa); }
.talk-steps li::before { content: counter(t); width: 30px; height: 30px; border-radius: 50%; background: var(--star); color: #4A3F35; font-family: var(--display); font-size: 20px; display: grid; place-items: center; grid-row: span 2; }
.talk-steps b { display: block; color: var(--ink); font-size: 16.5px; }
.talk-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.talk-facts div { background: var(--card); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); display: grid; gap: 6px; align-content: start; }
.talk-facts b { font-family: var(--display); font-size: 26px; color: var(--accent); }
.talk-facts span { font-size: 14.5px; color: var(--cocoa); }
@media (prefers-reduced-motion: no-preference) {
  .tb-wave i { animation: wave 1s ease-in-out infinite; }
  .tb-wave i:nth-child(2) { animation-delay: .15s; } .tb-wave i:nth-child(3) { animation-delay: .3s; }
  .tb-wave i:nth-child(4) { animation-delay: .45s; } .tb-wave i:nth-child(5) { animation-delay: .6s; }
  @keyframes wave { 50% { height: 100%; } }
}

/* ---------- 언어 ---------- */
.lang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lang article { background: var(--card); border-radius: 22px; padding: 24px 22px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.lang-k { justify-self: start; font-family: var(--display); font-size: 17px; padding: 2px 12px; border-radius: 8px; color: #4A3F35; transform: rotate(-2deg); }
.lang h3 { font-size: 23px; }
.lang p { font-size: 15.5px; color: var(--cocoa); }
.note { margin-top: 18px; font-size: 14px; color: var(--cocoa); }

/* ---------- 맞춤 ---------- */
.pz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.pz-in, .pz-out { border-radius: 26px; padding: 28px 26px; display: grid; gap: 14px; align-content: start; }
.pz-in { background: color-mix(in srgb, var(--mint) 35%, var(--card)); }
.pz-out { background: color-mix(in srgb, var(--star) 35%, var(--card)); }
.pz-in ul { margin: 0; padding: 0; display: grid; gap: 10px; }
.pz-in li { list-style: none; font-size: 15px; color: var(--cocoa); }
.pz-in li b { display: block; color: var(--ink); font-size: 16.5px; }
.pz-out .say { font-family: var(--display); font-size: 20px; background: var(--card); border: 1.5px solid var(--line); border-radius: 18px 18px 18px 4px; padding: 10px 16px 8px; justify-self: start; }
.pz-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.pz-grid article { border: 1.5px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 8px; align-content: start; background: var(--card); }
.pz-grid h3 { font-size: 21px; }
.pz-grid p { font-size: 15px; color: var(--cocoa); }

/* ---------- 리터러시 ---------- */
.lit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lit article { background: var(--card); border-radius: 20px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.lit-n { width: 40px; height: 40px; border-radius: 50%; background: var(--am); font-family: var(--display); font-size: 24px; display: grid; place-items: center; color: #2b3a45; }
.lit h3 { font-size: 22px; }
.lit p { font-size: 15px; color: var(--cocoa); }
.lit-foot { margin-top: 22px; padding: 16px 20px; border-radius: 16px; border: 1.5px dashed var(--line); font-size: 16px; }
.lit-foot b { font-family: var(--display); font-size: 21px; color: var(--accent); }

@media (max-width: 900px) {
  .talk-stage, .pz { grid-template-columns: minmax(0, 1fr); }
  .talk-facts, .pz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang, .lit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .talk-facts, .pz-grid { grid-template-columns: minmax(0, 1fr); }
  .tm span:nth-child(n+7) { display: none; }
}

/* ---------- 배경: 밝은 크림 + 수채 번짐 ---------- */
:root { color-scheme: light; }
html { background: #FBF7EC; }
body {
  background:
    radial-gradient(60vw 40vw at 8% 4%, rgba(191,224,242,.45), transparent 70%),
    radial-gradient(50vw 36vw at 96% 18%, rgba(247,211,214,.5), transparent 70%),
    radial-gradient(55vw 40vw at 85% 62%, rgba(244,213,138,.28), transparent 70%),
    radial-gradient(60vw 44vw at 4% 88%, rgba(168,221,176,.28), transparent 70%),
    linear-gradient(180deg, #FFFCF4 0%, #FBF5E8 45%, #F8F1E2 100%);
  background-attachment: fixed;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .49 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
section, .ai, .talk, .personal { background: transparent; }
.ai, #literacy { background: linear-gradient(180deg, rgba(255,253,246,.0), rgba(242,234,214,.55) 30%, rgba(242,234,214,.55) 70%, rgba(255,253,246,0)); }
.talk { background: linear-gradient(180deg, rgba(191,224,242,0), rgba(191,224,242,.35) 25%, rgba(247,211,214,.3) 80%, rgba(247,211,214,0)); }
.hero { background-color: transparent; }
.night { background: linear-gradient(180deg, #F3E6F0 0%, #DCD3F0 45%, #C9C4EA 100%) !important; color: #4A3F35 !important; }
.night h2 { color: #4A3F35; } .night p { color: #6B5A72 !important; } .night .eyebrow { color: #A0708F !important; }
footer { background: transparent; }

/* ---------- 첫 화면: 앱 배경화면 '구름 고래' ---------- */
.hero { background: url("../img/img-03-58b1a718d2.jpg") center bottom / cover no-repeat !important; background-blend-mode: normal !important;
  padding-bottom: clamp(200px, 30vw, 380px) !important; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, #FFFCF4); pointer-events: none; }
@media (max-width: 900px) { .hero { background-size: 180% auto !important; background-color: #FBF5E8 !important; } }

/* ---------- 펠트 3D: 천 패치 + 크림 바느질 + 얇은 단면 (앱 Soft3DSurface와 같은 규칙) ---------- */
:root { --felt-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .24 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --stitch-cream: rgba(255,248,230,.95); --stitch-kraft: rgba(210,186,150,.85);
  --felt-edge: 0 3px 0 rgba(107,82,61,.16), 0 6px 14px -6px rgba(74,63,53,.28); }
.felt, .why article, .feature, .friend, .skill, .lang article, .lit article, .talk-facts div, .pz-grid article,
.tech article, .rule, .panel, .pz-in, .pz-out, .philo, .shot, .talk-mock, .ladder li, .lit-foot {
  position: relative; background-image: var(--felt-grain) !important; background-blend-mode: multiply;
  border: 0 !important; box-shadow: var(--felt-edge) !important;
  outline: 1.5px dashed var(--stitch-kraft); outline-offset: -8px; }
.why article, .friend, .skill, .lang article, .lit article, .talk-facts div, .pz-grid article, .tech article, .rule { background-color: #FFFBF0 !important; }
.feature { background-color: #FFF8EA !important; }
.panel.kid { background-color: #D9ECF5 !important; outline-color: var(--stitch-cream); }
.panel.parent { background-color: #F8DEE0 !important; outline-color: var(--stitch-cream); }
.pz-in { background-color: #D6EED9 !important; outline-color: var(--stitch-cream); }
.pz-out { background-color: #F8E7BC !important; outline-color: var(--stitch-cream); }
.philo { background-color: #FFFBF0 !important; }
.shot, .talk-mock { outline-offset: -3px; outline-color: var(--stitch-cream); }
.ladder li { background-color: rgba(255,251,240,.9) !important; outline-offset: -6px; }
.lit-foot { background-color: #FFF4DA !important; }
/* 알약 메뉴: 파스텔 천 + 흰 실 */
.chip, .games li, .tag, .lang-k, .who, .tm span, .tm-end, .tb-notice {
  background-image: var(--felt-grain) !important; background-blend-mode: multiply; border: 0 !important;
  box-shadow: 0 2.5px 0 rgba(107,82,61,.2), 0 4px 8px -4px rgba(74,63,53,.3);
  outline: 1.3px dashed var(--stitch-cream); outline-offset: -4px; }
.chip { padding: 8px 18px 6px; }
.chips .chip:nth-child(6n+1) { background-color: #BFE0F2; } .chips .chip:nth-child(6n+2) { background-color: #F7D3D6; }
.chips .chip:nth-child(6n+3) { background-color: #CFC1EE; } .chips .chip:nth-child(6n+4) { background-color: #F4D58A; }
.chips .chip:nth-child(6n+5) { background-color: #C3E6C8; } .chips .chip:nth-child(6n) { background-color: #F8CBAE; }
.games li { background-color: #F3EBDA; } .games li.new { background-color: #C3E6C8; }
.feature .ico, .lit-n, .brand-mark { box-shadow: 0 2.5px 0 rgba(107,82,61,.2) !important; outline: 1.3px dashed var(--stitch-cream); outline-offset: -4px; background-image: var(--felt-grain); background-blend-mode: multiply; }
.moment .say, .pz-out .say { border: 0 !important; background-color: #FFFDF6; box-shadow: 0 2px 0 rgba(107,82,61,.14); outline: 1.3px dashed var(--stitch-kraft); outline-offset: -5px; }
section + section { border-top: 2px dashed rgba(210,186,150,.6); }

/* ---------- 스토어 ---------- */
.store { background: linear-gradient(180deg, rgba(244,213,138,0), rgba(244,213,138,.22) 30%, rgba(247,211,214,.22) 75%, rgba(247,211,214,0)); }
.store-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 3vw, 36px); align-items: center; }
.store-flow { display: grid; gap: 12px; }
.sf { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background-color: #FFFBF0;
  background-image: var(--felt-grain); background-blend-mode: multiply; box-shadow: var(--felt-edge); outline: 1.5px dashed var(--stitch-kraft); outline-offset: -7px; position: relative; }
.sf + .sf::before { content: "↓"; position: absolute; top: -17px; left: 52px; font-family: var(--display); color: var(--cocoa); font-size: 18px; }
.sf-k { font-family: var(--display); font-size: 18px; text-align: center; padding: 4px 8px 2px; border-radius: 999px; color: #4A3F35;
  background-image: var(--felt-grain); background-blend-mode: multiply; outline: 1.3px dashed var(--stitch-cream); outline-offset: -4px; box-shadow: 0 2px 0 rgba(107,82,61,.2); }
.sf p { font-size: 15.5px; }
.store-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.root-quote { margin: 34px 0 0; padding: clamp(26px, 4vw, 44px); border-radius: 28px; text-align: center; display: grid; gap: 10px; justify-items: center;
  background-color: #FFF4DA; background-image: var(--felt-grain); background-blend-mode: multiply; box-shadow: var(--felt-edge); outline: 2px dashed var(--stitch-kraft); outline-offset: -10px; }
.rq-k { font-family: var(--display); font-size: 19px; padding: 3px 14px 1px; border-radius: 999px; background: #F4D58A; outline: 1.3px dashed var(--stitch-cream); outline-offset: -4px; }
.root-quote p { font-family: var(--display); font-size: clamp(26px, 3.8vw, 40px); line-height: 1.3; max-width: 22em; }
.root-quote small { color: var(--cocoa); font-size: 15.5px; }
@media (max-width: 900px) { .store-grid, .store-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .sf { grid-template-columns: minmax(0, 1fr); } .sf + .sf::before { left: 50%; } }

/* ---------- 한글 줄바꿈과 간격 다듬기 ---------- */
h1, h2, h3, .lede, p, li, blockquote { word-break: keep-all; overflow-wrap: break-word; }
h2 { text-wrap: balance; max-width: 22em; }
h2 .nb { white-space: nowrap; }
mark { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.friends { gap: 22px; }
.games { gap: 12px 10px; margin-top: 48px !important; }
.games + p { margin-top: 20px !important; }

/* ---------- 움직이는 홈 화면 ---------- */
.live { position: relative; margin: 10px 0 40px; }
.live-stage { width: min(1320px, calc(100vw - 48px)); position: relative; margin-left: calc(50% - min(660px, 50vw - 24px)); transform: translateY(var(--px, 0px)); will-change: transform; }
.live-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 34px; overflow: hidden; background: #FAF6EA;
  border: 14px solid #F3EAD8; outline: 2px dashed rgba(210,186,150,.9); outline-offset: -8px;
  box-shadow: 0 6px 0 rgba(107,82,61,.16), 0 40px 80px -30px rgba(74,63,53,.45); }
.ls-home { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ls-cat { position: absolute; width: 11%; aspect-ratio: 1; bottom: 12.5%; left: 4%; background-size: 400% 100%; background-repeat: no-repeat; z-index: 2; filter: drop-shadow(0 6px 6px rgba(74,63,53,.25)); }
.ls-tap { position: absolute; width: 5%; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(255,255,255,.95); background: rgba(194,97,79,.25); transform: translate(-50%,-50%) scale(.3); opacity: 0; z-index: 5; pointer-events: none; }
.ls-tap.on { animation: tap .7s ease-out; }
@keyframes tap { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); } }
.ls-month { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(102%); transition: transform .6s cubic-bezier(.2,.8,.2,1); z-index: 3; box-shadow: 0 -20px 40px -20px rgba(74,63,53,.4); }
.ls-month.on { transform: none; }
.ls-talk { position: absolute; left: 4%; right: 4%; bottom: 5%; display: grid; gap: 1.6%; font-family: var(--display); color: #4A3F35; container-type: inline-size; z-index: 4;
  opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .4s, transform .4s; }
.ls-talk.on { opacity: 1; transform: none; }
.ls-talk .tb-notice, .ls-talk .tb-me { transition: opacity .3s; }
.ls-talk:not(.heard) .tb-me, .ls-talk:not(.done) .tb-notice { opacity: 0; }
.live-stage::after { content: ""; position: absolute; inset: 0; border-radius: 34px; background: linear-gradient(90deg, rgba(251,247,236,.0) 40%, rgba(251,247,236,0)); pointer-events: none; }
.live-card { position: relative; z-index: 6; width: min(460px, 92%); margin: -9% clamp(0px, 2vw, 24px) 0 auto; padding: 26px 26px 22px; border-radius: 26px; display: grid; gap: 10px;
  background-color: rgba(255,251,240,.94); background-image: var(--felt-grain); background-blend-mode: multiply; backdrop-filter: blur(6px);
  box-shadow: var(--felt-edge), 0 30px 60px -30px rgba(74,63,53,.5); outline: 1.6px dashed var(--stitch-kraft); outline-offset: -9px; transform: translateY(var(--pc, 0px)); will-change: transform; }
.live-card .time { display: flex; align-items: baseline; gap: 10px; font-size: 26px; }
.live-card .time small { display: inline; }
.live-card .say { justify-self: start; font-family: var(--display); font-size: 19px; background-color: #FFFDF6; border-radius: 18px 18px 18px 4px; padding: 10px 16px 8px; box-shadow: 0 2px 0 rgba(107,82,61,.14); outline: 1.3px dashed var(--stitch-kraft); outline-offset: -5px; }
.live-steps { margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.live-steps li { list-style: none; font-family: var(--display); font-size: 17px; color: var(--cocoa); padding: 4px 12px 2px; border-radius: 999px; transition: background .3s, color .3s; }
.live-steps li::before { content: "○ "; }
.live-steps li.on { background: #F4D58A; color: #4A3F35; outline: 1.3px dashed var(--stitch-cream); outline-offset: -4px; }
.live-steps li.on::before { content: "● "; }
@media (max-width: 900px) {
  .live-stage { transform: none; }
  .live-screen { border-width: 8px; border-radius: 22px; }
  .live-card { margin: 18px 0 0; width: auto; transform: none; }
}

/* ---------- 디지털 액자 ---------- */
.frame-sec { background: linear-gradient(180deg, rgba(207,193,238,0), rgba(207,193,238,.22) 30%, rgba(191,224,242,.22) 75%, rgba(191,224,242,0)); }
.frame-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(20px, 3vw, 36px); align-items: center; }
.frame-mock { margin: 0; }
.fm-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: #2b2b2b; border: 12px solid #F3EAD8;
  outline: 2px dashed rgba(210,186,150,.9); outline-offset: -7px; box-shadow: 0 6px 0 rgba(107,82,61,.16), 0 30px 60px -30px rgba(74,63,53,.45); container-type: inline-size; }
.fm-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease, transform 1s ease; }
.fm-slides img.on { opacity: 1; z-index: 1; }
.fm-slides[data-fx="fade"] img.on { animation: kb 6s ease-out forwards; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.04); } }
.fm-slides[data-fx="zoom"] img { transform: scale(1.12); } .fm-slides[data-fx="zoom"] img.on { transform: scale(1); }
.fm-slides[data-fx="slide"] img { opacity: 1; transform: translateX(100%); }
.fm-slides[data-fx="slide"] img.on { transform: none; }
.fm-slides[data-fx="slide"] img.left { transform: translateX(-100%); }
.fm-slides img.snap { transition: none !important; }
.fm-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--display); }
.fm-ctrl button { font-family: var(--display); border: 0; cursor: pointer; color: #4A3F35; background-color: #F3EBDA; background-image: var(--felt-grain); background-blend-mode: multiply;
  box-shadow: 0 2.5px 0 rgba(107,82,61,.2); outline: 1.3px dashed var(--stitch-cream); outline-offset: -4px; }
.fm-prev, .fm-next, .fm-play { width: 44px; height: 44px; border-radius: 50%; font-size: 22px; line-height: 1; }
.fm-play { font-size: 13px; }
.fm-dots { display: flex; gap: 8px; }
.fm-dots button { width: 12px; height: 12px; border-radius: 50%; padding: 0; outline: 0; box-shadow: none; background: #E3D5BA; transition: width .3s; }
.fm-dots button.on { background: #C2614F; width: 26px; border-radius: 8px; }
.fm-fx-label { margin-left: auto; color: var(--cocoa); font-size: 16px; }
.fm-fx { display: flex; gap: 6px; }
.fm-fx button { padding: 6px 14px 4px; border-radius: 999px; font-size: 16px; }
.fm-fx button.on { background-color: #F4D58A; }
.fm-ctrl button:focus-visible { outline: 3px solid var(--accent); }
@media (max-width: 520px) { .fm-fx-label { margin-left: 0; width: 100%; } }
@keyframes fmSlide { 0% { opacity: 0; transform: scale(1.06); } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
.fm-over { z-index: 2; position: absolute; right: 3.5%; bottom: 4.5%; display: flex; align-items: center; gap: 2cqw; padding: 1.4cqw 2.2cqw; border-radius: 2.2cqw; background: rgba(0,0,0,.28); color: #fff; font-family: var(--display); }
.fm-over i { width: 1px; align-self: stretch; background: rgba(255,255,255,.6); }
.fm-time { display: grid; justify-items: end; line-height: 1.05; } .fm-time b { font-size: 5.6cqw; } .fm-time span { font-size: 1.8cqw; }
.fm-next { display: flex; align-items: center; gap: 1cqw; } .fm-next > span { font-size: 4cqw; } .fm-next b { display: block; font-size: 2.2cqw; } .fm-next small { font-size: 1.7cqw; }
.fm-letter { z-index: 2; position: absolute; top: 4%; left: 50%; transform: translateX(-50%); font-family: var(--display); font-size: clamp(11px, 2.2cqw, 20px); color: #4A3F35; background: rgba(255,253,246,.94);
  padding: .8cqw 2.4cqw; border-radius: 999px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); animation: fmLetter 20s infinite; }
@keyframes fmLetter { 0%, 52% { opacity: 0; transform: translate(-50%, -10px); } 56%, 76% { opacity: 1; transform: translate(-50%, 0); } 80%, 100% { opacity: 0; transform: translate(-50%, -10px); } }
.frame-mock figcaption { font-size: 14px; color: var(--cocoa); margin-top: 12px; }
.frame-points { display: grid; gap: 12px; }
.fp { padding: 16px 18px; border-radius: 18px; background-color: #FFFBF0; background-image: var(--felt-grain); background-blend-mode: multiply; box-shadow: var(--felt-edge); outline: 1.5px dashed var(--stitch-kraft); outline-offset: -7px; }
.fp b { font-family: var(--display); font-size: 20px; display: block; } .fp p { font-size: 15px; color: var(--cocoa); }
.modes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; margin-top: 34px; }
.mode { padding: 22px; border-radius: 22px; display: grid; gap: 6px; align-content: start; background-image: var(--felt-grain); background-blend-mode: multiply;
  box-shadow: var(--felt-edge); outline: 1.5px dashed var(--stitch-cream); outline-offset: -8px; }
.m-clock { background-color: #D9ECF5; } .m-frame { background-color: #F8DEE0; } .m-night { background-color: #3B4466; color: #F2E6C4; }
.m-night p { color: #E2D6B8 !important; }
.mode-k { justify-self: start; font-family: var(--display); font-size: 16px; padding: 2px 12px; border-radius: 999px; background: rgba(255,255,255,.7); color: #4A3F35; }
.mode h3 { font-size: 24px; } .mode p { font-size: 15px; color: var(--cocoa); }
.mode-ar { align-self: center; font-family: var(--display); font-size: 28px; color: var(--cocoa); }
.frame-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.frame-foot div { padding: 18px 20px; border-radius: 18px; border: 2px dashed rgba(210,186,150,.7); }
.frame-foot b { font-family: var(--display); font-size: 20px; } .frame-foot p { font-size: 15px; color: var(--cocoa); }
@media (max-width: 900px) {
  .frame-grid, .frame-foot { grid-template-columns: minmax(0, 1fr); }
  .modes { grid-template-columns: minmax(0, 1fr); } .mode-ar { justify-self: center; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .fm-slides img { transition: none; } .fm-letter { animation: none; opacity: 1; } }

/* ---------- 움직이는 홈 화면: 왼쪽 글 + 오른쪽 기기, 살짝 겹치기 ---------- */
.live { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center;
  width: min(1320px, calc(100vw - 48px)); margin: 10px 0 56px calc(50% - min(660px, 50vw - 24px)); }
.live-stage { grid-column: 2; grid-row: 1; width: auto; margin: 0; }
.live-screen { border-width: 12px; border-radius: 30px; }
.live-card { grid-column: 1; grid-row: 1; justify-self: end; width: auto; max-width: 470px; margin: 40px -96px 0 0; }
@media (max-width: 900px) {
  .live { grid-template-columns: minmax(0, 1fr); width: auto; margin-left: 0; }
  .live-stage, .live-card { grid-column: 1; }
  .live-card { grid-row: 2; justify-self: stretch; max-width: none; margin: -36px 12px 0; }
}

/* ---------- 하루 순간들: 기기 + 겹치는 글 카드, 좌우 번갈아 ---------- */
.moment2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; margin: 0 0 72px; }
.moment2 .shot { grid-column: 2; grid-row: 1; margin: 0; border: 10px solid #F3EAD8 !important; border-radius: 26px; outline: 2px dashed rgba(210,186,150,.9); outline-offset: -7px;
  box-shadow: 0 6px 0 rgba(107,82,61,.16), 0 30px 60px -30px rgba(74,63,53,.45) !important; transform: translateY(var(--px, 0px)); }
.moment2 .shot img { border-radius: 16px; }
.moment2 .shot figcaption { padding: 10px 6px 2px; }
.m-card { grid-column: 1; grid-row: 1; position: relative; z-index: 2; justify-self: end; max-width: 440px; margin: 48px -84px 0 0; padding: 24px 26px 22px; border-radius: 26px; display: grid; gap: 10px;
  background-color: rgba(255,251,240,.95); background-image: var(--felt-grain); background-blend-mode: multiply; backdrop-filter: blur(6px);
  box-shadow: var(--felt-edge), 0 30px 60px -30px rgba(74,63,53,.5); outline: 1.6px dashed var(--stitch-kraft); outline-offset: -9px; transform: translateY(var(--pc, 0px)); }
.m-card .time { display: flex; align-items: baseline; gap: 10px; font-size: 26px; } .m-card .time small { display: inline; }
.m-card h3 { margin: 0; }
.m-card .say { justify-self: start; margin: 0; font-family: var(--display); font-size: 19px; background-color: #FFFDF6; border: 0; border-radius: 18px 18px 18px 4px; padding: 10px 16px 8px;
  box-shadow: 0 2px 0 rgba(107,82,61,.14); outline: 1.3px dashed var(--stitch-kraft); outline-offset: -5px; }
.moment2.flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.moment2.flip .shot { grid-column: 1; }
.moment2.flip .m-card { grid-column: 2; justify-self: start; margin: 48px 0 0 -84px; }
@media (max-width: 900px) {
  .moment2, .moment2.flip { grid-template-columns: minmax(0, 1fr); margin-bottom: 48px; }
  .moment2 .shot, .moment2.flip .shot { grid-column: 1; transform: none; }
  .moment2 .m-card, .moment2.flip .m-card { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: none; margin: -30px 12px 0; transform: none; }
}

/* ---------- 메인 목업: iPad Pro 12.9형 (2732×2048, 4:3) 스페이스 그레이 ---------- */
.live-stage { position: relative; }
.live-screen { border: clamp(12px, 1.6vw, 20px) solid #1c1c1e !important; border-radius: clamp(28px, 3.4vw, 46px) !important; outline: 0 !important;
  box-shadow: 0 0 0 2px #8e8e93, 0 0 0 3.5px #c7c7cc, 0 2px 0 4px rgba(0,0,0,.08), 0 40px 80px -28px rgba(40,34,30,.55) !important; }
.live-stage::before { content: ""; position: absolute; z-index: 3; left: clamp(5px, .7vw, 9px); top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4a4f63, #0d0e12 70%); box-shadow: 0 0 0 1.5px #2a2a2d; }
.live-stage::after { content: "iPad Pro 12.9"; position: absolute; left: 0; right: 0; top: auto; bottom: -30px; height: auto; background: none; border-radius: 0;
  text-align: center; font-family: var(--body); font-size: 12.5px; letter-spacing: .08em; color: var(--cocoa); opacity: .7; }
@media (max-width: 900px) { .live-stage::after { display: none; } }

/* ---------- 하루 브리핑 (부모): 해 질 녘 약속 배너 + 분홍 섹션 ---------- */
.brief { background: color-mix(in srgb, var(--pm) 28%, var(--paper)); }
.brief-banner { position: relative; overflow: hidden; display: grid; gap: 16px; justify-items: center; text-align: center;
  padding: clamp(40px, 7vw, 76px) clamp(20px, 5vw, 56px); margin-bottom: clamp(52px, 8vw, 88px); border-radius: 36px; color: #F6EBCB;
  background-color: #34385A; background-image: var(--felt-grain), radial-gradient(120% 90% at 50% 120%, #E8A49A 0%, rgba(232,164,154,0) 55%),
  linear-gradient(170deg, #26304A 0%, #3E3F66 52%, #8E6A86 100%); background-blend-mode: multiply, normal, normal;
  box-shadow: var(--felt-edge), 0 40px 80px -40px rgba(38,48,74,.7); outline: 1.6px dashed rgba(255,240,210,.55); outline-offset: -10px; }
.brief-banner::before { content: "✦  ·  ✧    ·   ✦      ·   ✧  ·    ✦"; position: absolute; top: 22px; left: 0; right: 0; letter-spacing: .9em; color: rgba(244,213,138,.55); font-size: 13px; }
.brief-banner .eyebrow { color: #F4D58A; }
.brief-promise { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5.8vw, 64px); line-height: 1.28; text-wrap: balance; }
.brief-promise span { color: #F4D58A; white-space: nowrap; }
.brief-sub { font-size: clamp(17px, 2vw, 20px); color: #EADDBC; max-width: 34em; }
.brief-banner .sleepers { display: flex; gap: 4px; margin-top: 6px; }
.brief-banner .sleepers img { width: clamp(56px, 8vw, 84px); }

.brief-before { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 44px; }
.bb-card { border-radius: 24px; padding: 22px 24px; display: grid; gap: 8px; background-image: var(--felt-grain); background-blend-mode: multiply;
  box-shadow: var(--felt-edge); outline: 1.5px dashed var(--stitch-kraft); outline-offset: -8px; }
.bb-card.before { background-color: #EFE8DA; color: var(--cocoa); }
.bb-card.after { background-color: #FBE7B4; outline-color: var(--stitch-cream); }
.bb-k { font-family: var(--display); font-size: 17px; color: var(--cocoa); }
.bb-q, .bb-a { font-family: var(--display); font-size: clamp(20px, 2.4vw, 24px); line-height: 1.35; }
.bb-a { justify-self: end; text-align: right; }
.bb-card.before .bb-a { opacity: .7; }
.bb-arrow { font-family: var(--display); font-size: 40px; color: var(--accent); }

.brief-stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-bottom: 40px; }
.brief-stage .shot, .brief-action .shot { margin: 0; }
.brief-stage .shot img, .brief-action .shot img { border-radius: 12px; }

.brief-gets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 56px; }
.brief-gets article { border-radius: 20px; padding: 20px; display: grid; gap: 8px; align-content: start; background-color: #FFFBF0; background-image: var(--felt-grain);
  background-blend-mode: multiply; box-shadow: var(--felt-edge); outline: 1.5px dashed var(--stitch-kraft); outline-offset: -8px; }
.brief-gets .bg-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; box-shadow: 0 2.5px 0 rgba(107,82,61,.2);
  outline: 1.3px dashed var(--stitch-cream); outline-offset: -4px; }
.brief-gets h3 { font-size: 21px; }
.brief-gets p { font-size: 15px; color: var(--cocoa); }
.brief-gets article.alert { background-color: #FBE3DE; }

.brief-action { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-bottom: 56px; }
.ba-text { display: grid; gap: 14px; }
.ba-text h3 { font-size: clamp(28px, 3.4vw, 36px); }
.ba-text .say { font-family: var(--display); font-size: 20px; line-height: 1.45; background-color: #FFFDF6; border-radius: 18px 18px 18px 4px; padding: 12px 18px 10px;
  box-shadow: 0 2px 0 rgba(107,82,61,.14); outline: 1.3px dashed var(--stitch-kraft); outline-offset: -5px; }
.ba-list { margin: 0; padding: 0; display: grid; gap: 8px; }
.ba-list li { list-style: none; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: 15.5px; color: var(--cocoa); }
.ba-list li::before { content: "♥"; color: var(--accent); }

.brief-trust { border-radius: 28px; padding: clamp(24px, 4vw, 36px); margin-bottom: 40px; background-color: #FFF8EA; background-image: var(--felt-grain);
  background-blend-mode: multiply; box-shadow: var(--felt-edge); outline: 1.6px dashed var(--stitch-kraft); outline-offset: -10px; display: grid; gap: 20px; }
.bt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 26px; }
.bt-grid div { font-size: 15px; color: var(--cocoa); display: grid; gap: 4px; align-content: start; }
.bt-grid b { font-family: var(--display); font-size: 21px; color: var(--ink); }
.brief-close { text-align: center; font-family: var(--display); font-size: clamp(24px, 3.2vw, 34px); line-height: 1.45; margin-top: 48px; color: var(--ink); text-wrap: balance; }
.brief-close span { color: var(--accent); }
.night .night-promise { font-family: var(--display); font-size: clamp(24px, 3.4vw, 34px); color: #F4D58A; line-height: 1.4; max-width: none; }
@media (max-width: 900px) {
  .brief-stage, .brief-action { grid-template-columns: minmax(0, 1fr); }
  .brief-gets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-grid { grid-template-columns: minmax(0, 1fr); }
  .brief-before { grid-template-columns: minmax(0, 1fr); }
  .bb-arrow { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 520px) { .brief-gets { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 누구에게 필요한가 ---------- */
.sf { grid-template-columns: auto minmax(0, 1fr) !important; }
.sf-k { white-space: nowrap; padding: 4px 16px 2px !important; min-width: 124px; }
.need-common { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.nc-grow, .nc-risk { padding: 28px 26px; border-radius: 26px; display: grid; gap: 14px; align-content: start; background-image: var(--felt-grain); background-blend-mode: multiply;
  box-shadow: var(--felt-edge); outline: 1.6px dashed var(--stitch-cream); outline-offset: -9px; }
.nc-grow { background-color: #D6EED9; } .nc-risk { background-color: #F3E3DA; }
.nc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.nc-tags li { list-style: none; font-family: var(--display); font-size: 18px; padding: 5px 14px 3px; border-radius: 999px; background: #FFFBF0; outline: 1.2px dashed var(--stitch-kraft); outline-offset: -4px; box-shadow: 0 2px 0 rgba(107,82,61,.14); }
.nc-risk ul { margin: 0; padding: 0; display: grid; gap: 12px; }
.nc-risk li { list-style: none; font-size: 15.5px; color: var(--cocoa); } .nc-risk li b { display: block; color: var(--ink); font-size: 17px; }
.nc-src { font-size: 13.5px; color: var(--cocoa); opacity: .85; }
.need-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 22px; }
.need-card { padding: 30px 28px; border-radius: 26px; background-image: var(--felt-grain); background-blend-mode: multiply; box-shadow: var(--felt-edge); outline: 1.6px dashed var(--stitch-cream); outline-offset: -9px; display: grid; gap: 16px; align-content: start; }
.need-card.kid { background-color: #D9ECF5; } .need-card.parent { background-color: #F8DEE0; }
.need-k { justify-self: start; font-family: var(--display); font-size: 26px; font-weight: 700; padding: 4px 18px 2px; border-radius: 999px; background: #FFFBF0; outline: 1.3px dashed var(--stitch-kraft); outline-offset: -5px; }
.need-card ul { margin: 0; padding: 0; display: grid; gap: 14px; }
.need-card li { list-style: none; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: 15.5px; color: var(--cocoa); }
.need-card li::before { content: "★"; color: var(--accent); }
.need-card li b { display: block; color: var(--ink); font-size: 17px; }
.story { margin-top: 56px; }
.story-title { font-size: clamp(28px, 3.6vw, 38px); text-align: center; }
.story-sub { text-align: center; color: var(--cocoa); margin: 6px 0 26px; }
.story-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.story-col { padding: 28px 26px; border-radius: 26px; display: grid; gap: 16px; align-content: start; box-shadow: var(--felt-edge); background-image: var(--felt-grain); background-blend-mode: multiply; outline-offset: -9px; }
.story-col.before { background-color: #E9E4DC; outline: 1.6px dashed rgba(150,140,128,.6); filter: saturate(.85); }
.story-col.after { background-color: #FFF4DA; outline: 1.6px dashed var(--stitch-kraft); }
.story-k { justify-self: start; font-family: var(--display); font-size: 22px; font-weight: 700; padding: 3px 16px 1px; border-radius: 999px; }
.before .story-k { background: #CFC7BA; color: #4A3F35; } .after .story-k { background: #F4D58A; color: #4A3F35; }
.story-col ol { margin: 0; padding: 0; display: grid; gap: 0; }
.story-col li { list-style: none; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1.5px dashed rgba(126,102,78,.2); }
.story-col li:last-child { border-bottom: 0; }
.story-col time { font-family: var(--display); font-size: 20px; color: var(--cocoa); font-variant-numeric: tabular-nums; }
.story-col li p { font-size: 15.5px; }
.before li p { color: #6B6258; }
.story-end { font-family: var(--display); font-size: 22px; text-align: center; padding-top: 6px; }
.before .story-end { color: #7A6F63; } .after .story-end { color: var(--accent); }
@media (max-width: 900px) { .need-common, .need-split, .story-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 아이를 아는 AI 친구 (설계 철학) ---------- */
.mate { background: color-mix(in srgb, var(--mint) 22%, var(--paper)); }
.mate-quote { position: relative; display: grid; gap: 14px; justify-items: center; text-align: center; margin-bottom: clamp(48px, 7vw, 80px);
  padding: clamp(36px, 6vw, 64px) clamp(20px, 5vw, 56px); border-radius: 36px; background-color: #FFFBF0; background-image: var(--felt-grain);
  background-blend-mode: multiply; box-shadow: var(--felt-edge), 0 30px 60px -36px rgba(74,63,53,.45); outline: 1.6px dashed var(--stitch-kraft); outline-offset: -10px; }
.mate-quote q { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.8vw, 52px); line-height: 1.3; quotes: none; text-wrap: balance; }
.mate-quote q span { color: var(--accent); }
.mate-quote p { color: var(--cocoa); max-width: 36em; }
.mate-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 56px; }
.mate-pillars article { border-radius: 24px; padding: 24px 22px; display: grid; gap: 10px; align-content: start; background-image: var(--felt-grain); background-blend-mode: multiply;
  box-shadow: var(--felt-edge); outline: 1.5px dashed var(--stitch-cream); outline-offset: -8px; }
.mate-pillars article:nth-child(1) { background-color: #D9ECF5; } .mate-pillars article:nth-child(2) { background-color: #F8DEE0; } .mate-pillars article:nth-child(3) { background-color: #F8E7BC; }
.mate-pillars .k { font-family: var(--display); font-size: 18px; color: var(--cocoa); }
.mate-pillars h3 { font-size: 25px; }
.mate-pillars p { font-size: 15.5px; color: var(--ink); }
.mate-flow { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-bottom: 48px; }
.mate-flow.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.mate-flow.flip .shot { order: -1; }
.mate-flow .shot { margin: 0; } .mate-flow .shot img { border-radius: 12px; }
.mate-step { display: grid; gap: 12px; }
.mate-step .n { justify-self: start; font-family: var(--display); font-size: 20px; padding: 2px 14px; border-radius: 999px; background: var(--star); }
.mate-step h3 { font-size: clamp(26px, 3vw, 32px); }
.mate-step p { color: var(--cocoa); }
.tiers { display: grid; gap: 10px; }
.tiers div { border-radius: 16px; padding: 12px 16px; background-color: #FFFBF0; background-image: var(--felt-grain); background-blend-mode: multiply; box-shadow: var(--felt-edge); font-size: 15px; color: var(--cocoa); }
.tiers b { display: block; color: var(--ink); font-family: var(--display); font-size: 19px; }
.mate-kids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 56px; }
.mate-kids article { border-radius: 24px; padding: 22px; display: grid; gap: 10px; align-content: start; background-color: #FFFBF0; background-image: var(--felt-grain);
  background-blend-mode: multiply; box-shadow: var(--felt-edge); outline: 1.5px dashed var(--stitch-kraft); outline-offset: -8px; }
.mate-kids .who { justify-self: start; padding: 5px 14px 3px; border-radius: 10px; font-family: var(--display); font-size: 17px; }
.mate-kids h3 { font-size: 22px; }
.mate-kids .arrow { font-size: 15px; color: var(--cocoa); }
.mate-kids .say { font-family: var(--display); font-size: 19px; line-height: 1.45; background-color: #FFFDF6; border-radius: 18px 18px 18px 4px; padding: 10px 16px 8px;
  box-shadow: 0 2px 0 rgba(107,82,61,.14); outline: 1.3px dashed var(--stitch-kraft); outline-offset: -5px; }
.mate-kids .keep { font-size: 14.5px; color: var(--accent); }
.mate-rules { border-radius: 28px; padding: clamp(22px, 4vw, 34px); display: grid; gap: 16px; background-color: #F8DEE0; background-image: var(--felt-grain); background-blend-mode: multiply;
  box-shadow: var(--felt-edge); outline: 1.6px dashed var(--stitch-cream); outline-offset: -10px; }
.mate-rules table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.mate-rules td { padding: 10px 8px; border-top: 1.5px dashed rgba(126,102,78,.25); vertical-align: top; }
.mate-rules td:first-child { font-family: var(--display); font-size: 18px; white-space: nowrap; width: 34%; }
.mate-rules .foot { font-size: 14.5px; color: var(--cocoa); }
.mate-close { text-align: center; font-family: var(--display); font-size: clamp(24px, 3.2vw, 34px); line-height: 1.45; margin-top: 48px; text-wrap: balance; }
.mate-close span { color: var(--accent); }
.philo.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.philo.four .big { font-size: clamp(24px, 2.6vw, 32px); white-space: nowrap; word-break: keep-all; }
@media (max-width: 900px) {
  .mate-pillars, .mate-kids, .mate-flow, .mate-flow.flip { grid-template-columns: minmax(0, 1fr); }
  .mate-flow.flip .shot { order: 0; }
  .philo.four { grid-template-columns: minmax(0, 1fr); }
  .mate-rules td:first-child { white-space: normal; }
}

/* ---------- 상단 메뉴: 펠트 알약 + 흰 실 (페이지 나누기) ---------- */
html { scroll-padding-top: var(--site-h, 96px); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--card); padding: 8px 14px; border-radius: 10px; }
.skip:focus { left: 12px; }
.site { position: sticky; top: 0; z-index: 50; background: rgba(251,247,236,.86); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 2px dashed rgba(210,186,150,.55); box-shadow: 0 10px 24px -22px rgba(74,63,53,.6); }
.site-in { max-width: 1320px; margin: 0 auto; padding: 10px clamp(16px, 3vw, 32px); display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.logo-mark { width: 52px; height: auto; filter: drop-shadow(0 3px 4px rgba(74,63,53,.22)); transition: transform .25s; }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.05); }
.logo-word { height: 36px; width: auto; }
.menu { flex: 1 1 auto; display: flex; gap: 10px; justify-content: flex-end; overflow-x: auto; scrollbar-width: none; padding: 6px 4px 9px; margin: -6px -4px -9px; }
.menu::-webkit-scrollbar { display: none; }
.menu a { flex: none; font-family: var(--display); font-weight: 700; font-size: 18.5px; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap;
  padding: 11px 18px 9px; border-radius: 999px; background-color: var(--c); background-image: var(--felt-grain); background-blend-mode: multiply;
  box-shadow: 0 3px 0 rgba(107,82,61,.2), 0 6px 10px -6px rgba(74,63,53,.4); outline: 1.4px dashed rgba(255,255,255,.95); outline-offset: -5px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s; }
.menu a:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(107,82,61,.18), 0 10px 14px -8px rgba(74,63,53,.4); }
.menu a[aria-current="page"] { transform: translateY(2px); box-shadow: 0 1px 0 rgba(107,82,61,.28), inset 0 2px 5px rgba(74,63,53,.2); outline-color: rgba(126,102,78,.75); filter: saturate(1.15); }
.menu a.hot { color: #5A2E28; }
.menu a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1240px) {
  .site-in { padding-block: 8px 10px; }
  .menu { flex-basis: 100%; justify-content: flex-start; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .logo-mark { width: 42px; } .logo-word { height: 30px; }
}
@media (max-width: 520px) { .menu a { font-size: 16.5px; padding: 9px 14px 7px; } .menu { gap: 8px; } }

/* 페이지: 한 번에 한 이야기만 */
.page[hidden] { display: none !important; }
.page.enter > * { animation: pageIn .45s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page.enter > * { animation: none; } }

/* 표지: 로고 히어로 */
.hero-brand { gap: clamp(10px, 2vw, 22px); margin-bottom: 30px; align-items: center; }
.hero-mark { width: clamp(96px, 13vw, 150px); height: auto; filter: drop-shadow(0 12px 16px rgba(74,63,53,.25)); }
.hero-word img { width: clamp(190px, 27vw, 330px); height: auto; margin-left: -6px; }
.hero-word small { display: block; font-family: var(--display); font-size: clamp(15px, 1.6vw, 18px); color: var(--cocoa); letter-spacing: .04em; margin-top: 2px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { font-family: var(--display); font-weight: 700; font-size: 20px; text-decoration: none; color: var(--ink); padding: 13px 22px 11px; border-radius: 999px;
  background-color: #FFFBF0; background-image: var(--felt-grain); background-blend-mode: multiply; box-shadow: 0 3px 0 rgba(107,82,61,.2), 0 8px 14px -8px rgba(74,63,53,.4);
  outline: 1.4px dashed var(--kraft); outline-offset: -5px; transition: transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn.primary { background-color: #F7D3D6; outline-color: #fff; color: #5A2E28; }
.btn.ghost { background: transparent; box-shadow: none; outline: 1.6px dashed var(--kraft); }
@media (prefers-reduced-motion: no-preference) { .hero-mark { animation: bob 3.6s ease-in-out infinite; } }
@media (max-width: 520px) { .btn { font-size: 18px; padding: 11px 18px 9px; } }

/* 처음 화면: 둘러보기 카드 */
.tour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tour-card { position: relative; display: grid; gap: 8px; align-content: start; padding: 26px 24px 22px; border-radius: 26px; text-decoration: none; color: var(--ink);
  background-color: color-mix(in srgb, var(--c) 55%, #FFFBF0); background-image: var(--felt-grain); background-blend-mode: multiply;
  box-shadow: var(--felt-edge); outline: 1.6px dashed rgba(255,255,255,.95); outline-offset: -9px; transition: transform .18s ease, box-shadow .18s ease; }
.tour-card:hover { transform: translateY(-4px) rotate(-.3deg); box-shadow: 0 6px 0 rgba(107,82,61,.14), 0 22px 30px -18px rgba(74,63,53,.45); }
.tc-n { font-family: var(--display); font-size: 17px; color: var(--cocoa); letter-spacing: .04em; }
.tour-card b { font-family: var(--display); font-size: clamp(27px, 2.8vw, 32px); line-height: 1.15; }
.tour-card p { font-size: 15.5px; color: var(--cocoa); }
.tc-go { margin-top: 6px; justify-self: start; font-family: var(--display); font-size: 18px; padding: 5px 14px 3px; border-radius: 999px; background: rgba(255,255,255,.75); outline: 1.2px dashed var(--kraft); outline-offset: -4px; }
.tour-card.tc-feature { grid-column: span 2; color: #F6EBCB; background-color: #34385A;
  background-image: var(--felt-grain), radial-gradient(120% 90% at 50% 130%, #E8A49A 0%, rgba(232,164,154,0) 55%), linear-gradient(170deg, #26304A 0%, #3E3F66 52%, #8E6A86 100%);
  background-blend-mode: multiply, normal, normal; outline-color: rgba(255,240,210,.55); }
.tour-card.tc-feature .tc-n { color: #F4D58A; }
.tour-card.tc-feature p { color: #EADDBC; }
.tour-card.tc-feature .tc-promise { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.3; color: #F6EBCB; }
.tc-promise span { color: #F4D58A; white-space: nowrap; }
.tour-card.tc-feature .tc-go { background: #F4D58A; color: #4A3F35; outline-color: #fff; }
.tour-card.makers-card { grid-column: span 2; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 18px; }
.makers-card img { width: 100%; border-radius: 18px; mix-blend-mode: multiply; }
.makers-card > div { display: grid; gap: 8px; }
@media (max-width: 900px) {
  .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-card.makers-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) { .tour-grid { grid-template-columns: minmax(0, 1fr); } .tour-card.tc-feature, .tour-card.makers-card { grid-column: auto; } }

/* 페이지 끝: 이전·다음 */
.pager { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; padding-block: 8px clamp(56px, 8vw, 88px); }
.pg { display: grid; gap: 2px; padding: 20px 24px; border-radius: 24px; text-decoration: none; color: var(--ink); background-image: var(--felt-grain); background-blend-mode: multiply;
  box-shadow: var(--felt-edge); outline-offset: -8px; transition: transform .18s; }
.pg:hover { transform: translateY(-3px); }
.pg small { font-family: var(--display); font-size: 17px; color: var(--cocoa); }
.pg b { font-family: var(--display); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; }
.pg span { font-size: 15px; color: var(--cocoa); }
.pg.prev { background-color: rgba(255,251,240,.7); outline: 1.5px dashed var(--kraft); }
.pg.next { background-color: color-mix(in srgb, var(--c) 70%, #FFFBF0); outline: 1.5px dashed #fff; text-align: right; }
@media (max-width: 620px) { .pager { grid-template-columns: minmax(0, 1fr); } .pg.next { order: -1; } }

/* 만든 사람들 */
.makers { background: linear-gradient(180deg, rgba(244,213,138,0), rgba(244,213,138,.2) 30%, rgba(247,211,214,.22) 75%, rgba(247,211,214,0)); }
.mk-family { margin: 0 0 clamp(40px, 6vw, 64px); padding: clamp(18px, 3vw, 30px); border-radius: 34px; text-align: center; background-color: #FFFBF0; background-image: var(--felt-grain);
  background-blend-mode: multiply; box-shadow: var(--felt-edge), 0 30px 60px -36px rgba(74,63,53,.45); outline: 1.6px dashed var(--kraft); outline-offset: -11px; }
.mk-family img { width: min(100%, 980px); margin: 0 auto; mix-blend-mode: multiply; }
.mk-family figcaption { font-family: var(--display); font-size: 18px; color: var(--cocoa); margin-top: 6px; }
.mk-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: clamp(48px, 7vw, 72px); }
.mk-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; align-items: center; padding: 22px 24px 22px 10px; border-radius: 30px;
  background-image: var(--felt-grain); background-blend-mode: multiply; box-shadow: var(--felt-edge); outline: 1.6px dashed #fff; outline-offset: -10px; }
.mk-card.dad { background-color: #D9ECF5; } .mk-card.mom { background-color: #F8DEE0; }
.mk-card img { width: 100%; mix-blend-mode: multiply; }
.mk-body { display: grid; gap: 10px; align-content: start; }
.mk-k { justify-self: start; font-family: var(--display); font-size: 17px; padding: 3px 14px 1px; border-radius: 999px; background: #FFFBF0; outline: 1.2px dashed var(--kraft); outline-offset: -4px; }
.mk-card h3 { font-size: clamp(25px, 2.6vw, 30px); }
.mk-card ul { margin: 0; padding: 0; display: grid; gap: 6px; }
.mk-card li { list-style: none; display: grid; grid-template-columns: 20px minmax(0, 1fr); font-size: 15.5px; color: var(--ink); }
.mk-card li::before { content: "★"; color: var(--accent); font-size: 14px; line-height: 1.75; }
.mk-card .say { font-family: var(--display); font-size: 19px; line-height: 1.45; background-color: #FFFDF6; border-radius: 18px 18px 18px 4px; padding: 10px 16px 8px;
  box-shadow: 0 2px 0 rgba(107,82,61,.14); outline: 1.3px dashed var(--kraft); outline-offset: -5px; }
.mk-title { font-size: clamp(28px, 3.6vw, 38px); text-align: center; margin-bottom: 26px; }
.mk-road { margin: 0 0 clamp(40px, 6vw, 64px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.mk-road::before { content: ""; position: absolute; left: 6%; right: 6%; top: 27px; border-top: 2.5px dashed rgba(210,186,150,.9); }
.mk-road li { list-style: none; position: relative; display: grid; gap: 8px; align-content: start; padding: 0 4px; }
.mk-n { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 28px; font-weight: 700;
  background-color: var(--c); background-image: var(--felt-grain); background-blend-mode: multiply; box-shadow: 0 3px 0 rgba(107,82,61,.2); outline: 1.3px dashed #fff; outline-offset: -5px; }
.mk-road b { font-family: var(--display); font-size: 22px; line-height: 1.25; }
.mk-road p { font-size: 15.5px; color: var(--cocoa); }
.mk-letter { max-width: 760px; margin: 0 auto 36px; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); border-radius: 10px 10px 30px 30px; display: grid; gap: 14px;
  background-color: #FFFDF6; background-image: var(--felt-grain), repeating-linear-gradient(180deg, transparent 0 37px, rgba(191,224,242,.55) 37px 38.5px);
  background-blend-mode: multiply, normal; box-shadow: var(--felt-edge), 0 30px 50px -30px rgba(74,63,53,.45); outline: 1.6px dashed var(--kraft); outline-offset: -10px; transform: rotate(-.6deg); }
.mk-letter-k { justify-self: start; font-family: var(--display); font-size: 20px; padding: 3px 16px 1px; border-radius: 999px; background: #F7D3D6; outline: 1.2px dashed #fff; outline-offset: -4px; }
.mk-letter p { font-family: var(--display); font-size: clamp(20px, 2.3vw, 24px); line-height: 1.6; }
.mk-sign { justify-self: end; color: var(--accent); }
.mk-vals { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; }
.mk-vals li { list-style: none; font-family: var(--display); font-size: 19px; padding: 8px 18px 6px; border-radius: 999px; background-color: var(--c); background-image: var(--felt-grain);
  background-blend-mode: multiply; box-shadow: 0 2.5px 0 rgba(107,82,61,.2); outline: 1.3px dashed #fff; outline-offset: -4px; }
@media (max-width: 900px) {
  .mk-people { grid-template-columns: minmax(0, 1fr); }
  .mk-road { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .mk-road::before { display: none; }
}
@media (max-width: 520px) {
  .mk-card { grid-template-columns: minmax(0, 1fr); padding: 14px 18px 22px; } .mk-card img { width: 70%; margin: 0 auto; }
  .mk-road { grid-template-columns: minmax(0, 1fr); }
}

/* 표지: 움직이는 iPad 홈 화면이 주인공 */
.hero-live { padding-block: clamp(32px, 5vw, 64px) clamp(150px, 20vw, 260px) !important; }
.hero-grid2 { max-width: 1360px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 3.5vw, 56px); align-items: center; }
.hero-live h1 { font-size: clamp(40px, 4.8vw, 66px); }
.hero-live .hero-brand { margin-bottom: 22px; }
.hero-live .hero-mark { width: clamp(76px, 7.5vw, 104px); }
.hero-live .hero-word img { width: clamp(170px, 17vw, 240px); }
.hero-live .hero-word small { font-size: 15px; }
.hero-live .lede { font-size: clamp(16.5px, 1.45vw, 18.5px); margin-top: 18px; }
.hero-live .cta { margin-top: 24px; }
.hero-live .live { display: block; width: auto; margin: 0; }
.hero-live .live-stage { width: auto; margin: 0; transform: none !important; }
.hero-live .live-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 46px 0 0; }
.hero-live .live-steps li { background: rgba(255,251,240,.8); }
.hero-live .live-steps li.on { background: #F4D58A; }
/* 화면이 베젤에 잘리지 않게: 4:3 비율을 베젤 안쪽 화면에 건다 (스크린샷도 4:3) */
.live-screen { box-sizing: content-box !important; }
.ls-home, .ls-month { object-fit: fill; }
/* 07:00 자리에는 원판 시계 */
.moment2 .dial-shot { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; background-image: none !important; padding: 0 clamp(10px, 4vw, 60px); }
.moment2 .dial-shot figcaption { text-align: center; font-family: var(--display); font-size: 18px; margin-top: 10px; }
.tour-card.makers-card { grid-column: 1 / -1; }
@media (max-width: 1000px) {
  .hero-grid2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-live .hero-copy { display: contents; }
  .hero-live .hero-brand { order: 1; } .hero-live h1 { order: 2; } .hero-live .live { order: 3; margin-top: 24px; }
  .hero-live .lede { order: 4; } .hero-live .cta { order: 5; }
  .hero-live .live-stage::after { display: none; }
  .hero-live .live-steps { margin-top: 18px; }
}