/* 유메이커 홈페이지 — 하늘·보라 + 노랑 포인트 (AI체험놀이터와 같은 결) */
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --sky: #7FCBFF; --violet: #9AAEFF; --purple: #B79CFF;
  --yellow: #FFC107; --yellow-deep: #F2A03D; --yellow-soft: #FFF4CC;
  --red: #D32F2F; --pink: #D98A22;
  --ink: #1F2350; --soft: #5A5F86; --line: #E3E4F3; --bg: #F5F6FD; --card: #fff;
  --r: 20px; --shadow: 0 6px 0 rgba(40, 40, 120, .12);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { font-family: 'Paperlogy', 'Malgun Gothic', sans-serif; font-weight: 500; color: var(--ink); background: var(--bg); line-height: 1.6; word-break: keep-all; }
h1, h2, h3, .brand b { font-weight: 900; line-height: 1.25; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
[hidden] { display: none !important; }

.demo { background: var(--yellow-soft); color: #7a5a00; font-size: 14px; text-align: center; padding: 8px 12px; font-weight: 700; }

/* 머리글 */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 22px; }
.logo { width: 38px; height: 38px; border-radius: 12px; background: var(--yellow); display: grid; place-items: center; font-weight: 900; box-shadow: 0 3px 0 var(--yellow-deep); }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.top nav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.top nav a:hover, .top nav a.on { background: var(--yellow-soft); }

/* 히어로 */
.hero { background: linear-gradient(160deg, var(--sky), var(--violet) 55%, var(--purple)); color: #fff; padding: clamp(40px, 8vw, 84px) 0 clamp(48px, 8vw, 92px); }
.hero h1 { font-size: clamp(32px, 6vw, 58px); text-shadow: 0 3px 0 rgba(40,40,120,.18); }
.hero p { font-size: clamp(16px, 2.4vw, 21px); margin-top: 14px; max-width: 640px; font-weight: 700; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer; font: inherit; font-weight: 900; font-size: 17px; padding: 13px 26px; border-radius: 999px; background: var(--yellow); color: var(--ink); text-decoration: none; box-shadow: 0 5px 0 var(--yellow-deep); transition: transform .1s; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--yellow-deep); }
.btn.ghost { background: #fff; box-shadow: 0 5px 0 rgba(40,40,120,.18); }
.btn.sm { font-size: 14px; padding: 8px 16px; box-shadow: 0 3px 0 var(--yellow-deep); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* 섹션 */
section.block { padding: clamp(34px, 6vw, 60px) 0; }
section.block.alt { background: #fff; }
.sec-head { margin-bottom: 22px; }
.sec-head h2 { font-size: clamp(24px, 4vw, 34px); }
.sec-head p { color: var(--soft); margin-top: 4px; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tab { border: 2px solid var(--line); background: #fff; font: inherit; font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r); overflow: hidden; text-decoration: none; box-shadow: var(--shadow); transition: transform .15s; }
.card:hover { transform: translateY(-4px); }
.card .body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h3 { font-size: 20px; }
.card p { color: var(--soft); font-size: 15px; }
.card .meta { margin-top: auto; padding-top: 8px; font-size: 14px; color: var(--soft); display: flex; gap: 10px; flex-wrap: wrap; }

.photo { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 28%, #fff), color-mix(in srgb, var(--c) 62%, #fff)); }
.photo .em { font-size: clamp(54px, 9vw, 84px); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo.wide { aspect-ratio: 21 / 9; border-radius: var(--r); }

.badge { display: inline-block; align-self: flex-start; background: var(--c); color: #fff; font-weight: 700; font-size: 13px; padding: 3px 12px; border-radius: 999px; }
.sample-tag { font-size: 12px; background: var(--yellow-soft); color: #7a5a00; padding: 2px 8px; border-radius: 6px; font-weight: 700; }

/* 원데이 */
.oneday-row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.oneday { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.oneday .body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dates { display: flex; flex-direction: column; gap: 6px; }
.dates li { list-style: none; background: var(--bg); border-radius: 12px; padding: 8px 12px; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.oneday .actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* 후기 */
.reviews { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.review { background: #fff; border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.review .stars { color: var(--yellow-deep); letter-spacing: 2px; }
.review .who { font-size: 14px; color: var(--soft); margin-top: auto; }
.empty { color: var(--soft); background: #fff; border-radius: var(--r); padding: 28px; text-align: center; }

/* 폼 */
.form { background: #fff; border-radius: var(--r); padding: clamp(18px, 4vw, 28px); box-shadow: var(--shadow); display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.form input, .form select, .form textarea { font: inherit; font-weight: 500; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--violet); }
.form textarea { min-height: 110px; resize: vertical; }
.form .row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form .hp { position: absolute; left: -9999px; }
.form .note { font-size: 13px; color: var(--soft); font-weight: 500; }
.rating { display: flex; gap: 4px; }
.rating button { border: 0; background: none; font-size: 32px; color: #d4d6ea; cursor: pointer; line-height: 1; }
.rating button.on { color: var(--yellow-deep); }
.msg { padding: 14px 16px; border-radius: 14px; font-weight: 700; }
.msg.ok { background: #E6F7EC; color: #1d7a42; }
.msg.err { background: #FDE8E8; color: var(--red); }

/* 홍보(수업) 페이지 */
.detail-head { padding: 28px 0 8px; }
.detail-head h1 { font-size: clamp(28px, 5vw, 44px); margin: 10px 0; }
.facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 20px 0; }
.fact { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); }
.fact small { color: var(--soft); display: block; font-weight: 700; }
.two { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.panel { background: #fff; border-radius: var(--r); padding: 20px 22px; box-shadow: var(--shadow); }
.panel h3 { margin-bottom: 10px; font-size: 20px; }
.panel ul { padding-left: 20px; display: grid; gap: 6px; }
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-top: 12px; }
.gallery img { border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.sticky-cta { position: sticky; bottom: 0; background: rgba(255,255,255,.95); border-top: 1px solid var(--line); padding: 12px 0; z-index: 10; margin-top: 30px; }
.sticky-cta .wrap { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* 푸터 */
footer { background: var(--ink); color: #dfe1f5; padding: 36px 0; margin-top: 40px; }
footer b { font-size: 20px; color: #fff; }
footer .contact { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0; }
footer small a { color: #aeb2d8; }

/* 관리자 */
.admin-item { background: #fff; border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px; box-shadow: var(--shadow); }
.admin-item.pending { outline: 3px solid var(--yellow); }
.admin-item .acts { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .bar { height: auto; padding: 10px 0; flex-direction: column; align-items: flex-start; }
  .top nav { justify-content: flex-start; }
}

footer .kakao { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: #fff; color: var(--ink); border-radius: var(--r); padding: 18px 20px; margin: 18px 0 14px; }
footer .kakao img { width: 120px; height: 120px; border-radius: 12px; }
footer .kakao b { font-size: 19px; color: var(--ink); }
footer .kakao p { color: var(--soft); margin: 4px 0 12px; }
footer .cnote { font-size: 14px; color: #fff; background: rgba(255,255,255,.12); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; }
footer .tiny { font-size: 11px; color: #9a9ec8; margin-bottom: 8px; }

/* 소개 */
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat { background: #fff; border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); text-align: center; }
.stat b { display: block; font-size: clamp(26px, 4vw, 36px); color: var(--violet); font-weight: 900; }
.stat span { color: var(--soft); font-size: 14px; }
.quote { margin: 14px 0; padding: 12px 16px; background: var(--yellow-soft); border-radius: 14px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips span { background: var(--bg); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 700; }
.cta-band { margin-top: 44px; text-align: center; background: linear-gradient(160deg, var(--sky), var(--violet)); color: #fff; border-radius: var(--r); padding: clamp(26px, 5vw, 44px) 20px; }
.cta-band p { margin: 8px 0 18px; font-weight: 700; }
.intro-strip { margin-top: -34px; position: relative; }
.intro-strip .more { display: inline-block; margin-top: 14px; font-weight: 900; }

/* ===== dream.yumaker.com 소개 페이지와 맞춘 스타일 (하늘색 포인트 · 종이색 배경 · SBAggro 제목) ===== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@font-face { font-family: 'SBAggro'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff'); font-weight: 700; font-display: swap; }
:root {
  --bg: #F6FAFA; --ink: #1C345A; --soft: #4D6180; --line: #DDE9EA;
  --sky: #3E9C86; --violet: #3E9C86; --purple: #1C345A; --emerald: #3E9C86;
  --yellow: #F2A03D; --yellow-deep: #F2A03D; --yellow-soft: #FBE6CC; --pink: #F2A03D;
  --r: 18px; --shadow: 0 10px 30px rgba(20, 42, 59, .08);
}
body { font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif; font-weight: 500; }
h1, h2, .brand b, .stat b, .btn { font-family: 'SBAggro', 'Pretendard Variable', Pretendard, sans-serif; font-weight: 700; }
h3 { font-weight: 800; }
.hero { background: var(--bg) radial-gradient(circle, #d9e9e8 1.4px, transparent 1.6px) 0 0 / 26px 26px; color: var(--ink); padding: clamp(44px, 8vw, 90px) 0 clamp(70px, 9vw, 110px); }
.hero h1 { text-shadow: none; }
.hero h1 em { font-style: normal; color: var(--sky); }
.hero p { color: var(--soft); font-weight: 500; }
.btn { box-shadow: 0 5px 0 var(--yellow-deep); }
.btn.ghost { background: #fff; border: 2px solid var(--line); box-shadow: none; }
.top { background: rgba(245, 249, 252, .94); }
.top nav a:hover, .top nav a.on { background: #E4F3EF; color: var(--sky); }
.logo { background: var(--sky); color: #fff; box-shadow: 0 3px 0 var(--purple); }
.card, .oneday, .review, .panel, .fact, .stat, .form, .admin-item { box-shadow: var(--shadow); }
.stat b { color: var(--sky); }
.sec-head h2::before { content: ''; display: inline-block; width: 8px; height: 1em; background: var(--yellow); border-radius: 3px; margin-right: 10px; vertical-align: -0.12em; }
.cta-band { background: var(--ink); }
footer { background: var(--ink); }

/* 소개 페이지 */
.lead { font-size: clamp(16px, 2.3vw, 20px); color: var(--soft); max-width: 680px; margin-top: 14px; }
.stats.big .stat { padding: 24px 14px; }
.stats.big .stat b { font-size: clamp(32px, 5vw, 48px); }
.stat small { display: block; font-size: 12px; color: var(--soft); margin-top: 2px; }
.months { display: flex; align-items: flex-end; gap: clamp(4px, 1.5vw, 12px); height: 190px; padding-top: 10px; }
.months div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: 12px; color: var(--soft); }
.months i { display: block; width: 100%; max-width: 44px; background: linear-gradient(var(--sky), var(--purple)); border-radius: 8px 8px 0 0; }
.months b { font-size: 13px; color: var(--ink); }
.months .future i { background: repeating-linear-gradient(45deg, #CDE8E1, #CDE8E1 5px, #E4F3EF 5px, #E4F3EF 10px); }
.rank { display: grid; gap: 10px; }
.rank li { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.rank .bar-bg { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: #E4F3EF; overflow: hidden; }
.rank .bar-bg i { display: block; height: 100%; background: var(--sky); border-radius: 999px; }
.rank small { color: var(--soft); font-weight: 500; margin-left: 8px; }
.stats.big .stat b { font-size: clamp(26px, 4.6vw, 44px); white-space: nowrap; }
.hero { padding-bottom: clamp(80px, 10vw, 120px); }
.months { gap: 3px; }
.months div { min-width: 0; font-size: 11px; }
.months i { max-width: none; }
.panel { min-width: 0; }

/* 신청 안내 박스 · 무료/유료 */
.note-box { background: #E4F3EF; border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; color: var(--ink); }
.note-box.paid { background: var(--yellow-soft); }
.note-box.free { background: #E3F6EC; }
.badge.free { --c: #3E9C86; }
.badge.paid { --c: #F2A03D; color: #3d2f00; }
.visit-band { margin-top: 20px; background: #fff; border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* 신청 마감 */
.photo-wrap { position: relative; }
.closed-tag { position: absolute; top: 12px; left: 12px; background: var(--ink); color: #fff; font-weight: 800; padding: 5px 14px; border-radius: 999px; font-size: 14px; z-index: 2; }
.card.closed, .oneday.closed { cursor: default; }
.card.closed:hover { transform: none; }
.card.closed .photo, .oneday.closed .photo { filter: grayscale(.85); opacity: .75; }
.card.closed h3, .oneday.closed h3 { color: var(--soft); }
.btn[disabled] { background: #DDE9EA; color: var(--soft); box-shadow: none; }

/* ===== 랜딩 · 큰 제목 (dream 소개 페이지처럼 한눈에) ===== */
h1 { font-size: clamp(36px, 7.4vw, 76px); letter-spacing: -.02em; }
.sec-head h2 { font-size: clamp(30px, 5.2vw, 48px); letter-spacing: -.02em; }
.sec-head p { font-size: clamp(15px, 2vw, 18px); }
.panel h3, .card h3, .oneday h3 { font-size: clamp(20px, 2.6vw, 24px); }
.center { text-align: center; }
.sec-head.center h2::before { display: none; }
.eyebrow { font-weight: 800; letter-spacing: .12em; color: var(--sky); font-size: 14px; margin-bottom: 14px; }
.hero.landing { padding: clamp(56px, 11vw, 130px) 0 clamp(60px, 9vw, 110px); }
.hero.landing .lead { font-size: clamp(17px, 2.6vw, 22px); max-width: 640px; color: var(--soft); }
.hero.landing .lead b { color: var(--ink); background: linear-gradient(transparent 60%, var(--yellow) 60%); }
.hero.sub { padding: clamp(36px, 6vw, 64px) 0; }
.hero.sub h1 { font-size: clamp(34px, 6vw, 58px); }
.btn.big { font-size: 19px; padding: 16px 32px; }
.hl { background: linear-gradient(transparent 60%, var(--yellow) 60%); padding: 0 .1em; }
.block.proof { padding-top: 0; margin-top: -40px; position: relative; }
.block.tight { padding: clamp(28px, 5vw, 56px) 0; }
.big-quote { font-family: 'SBAggro', 'Pretendard Variable', sans-serif; font-weight: 700; font-size: clamp(22px, 4.2vw, 40px); line-height: 1.45; text-align: center; max-width: 900px; margin: 0 auto; }

.tiles { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.tile { display: flex; flex-direction: column; gap: 8px; text-decoration: none; background: #fff; border-radius: var(--r); padding: 26px 22px; box-shadow: var(--shadow); border-top: 6px solid var(--c); transition: transform .15s; }
.tile:hover { transform: translateY(-5px); }
.tile .em { font-size: 46px; line-height: 1.1; }
.tile b { font-family: 'SBAggro', 'Pretendard Variable', sans-serif; font-size: clamp(22px, 3vw, 28px); }
.tile span:not(.em) { color: var(--soft); }
.tile i { margin-top: auto; padding-top: 10px; font-style: normal; font-weight: 800; color: var(--c); }
.panel.center { text-align: center; }

/* 메뉴 OFF 안내 · 블로그 글 */
.menu-off > section, .menu-off > main { display: none; }
.menu-off > section:last-of-type { display: block; }
.off-note { padding: 50px 20px; }
.post-body { font-size: 18px; line-height: 1.85; }
.post-body h2 { font-size: 28px; margin: 1.6em 0 .5em; }
.post-body h3 { font-size: 22px; margin: 1.4em 0 .4em; }
.post-body p, .post-body ul, .post-body ol, .post-body blockquote { margin: .8em 0; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body img { border-radius: 14px; margin: 1em auto; }
.post-body blockquote { border-left: 5px solid var(--yellow); background: var(--yellow-soft); padding: 10px 16px; border-radius: 0 12px 12px 0; }
.post-body a { color: var(--sky); font-weight: 700; }
.post-body hr { border: 0; border-top: 2px dashed var(--line); margin: 1.6em 0; }
.post-meta { color: var(--soft); font-size: 14px; }
.editor-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.editor-bar button { border: 2px solid var(--line); background: #fff; border-radius: 10px; padding: 6px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.editor-bar button:hover { background: #E4F3EF; }
.editor { min-height: 260px; border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #fff; line-height: 1.8; }
.editor:focus { outline: 0; border-color: var(--sky); }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 800; }
.switch input { width: 46px; height: 26px; appearance: none; background: #c9d3dc; border-radius: 999px; position: relative; cursor: pointer; transition: background .15s; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch input:checked { background: var(--emerald); }
.switch input:checked::after { left: 23px; }
.menu-row { display: grid; gap: 10px; grid-template-columns: auto 1fr auto; align-items: center; background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); }
.menu-row.off { opacity: .6; }
.menu-row .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.menu-row input.lab { font: inherit; font-weight: 800; border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; width: 100%; min-width: 0; }
@media (max-width: 560px) { .menu-row { grid-template-columns: 1fr; } .menu-row .acts { justify-content: flex-start; } }

/* 재구성: 전 세대 · 3단계 · 랩 */
.proof-note { text-align: center; color: var(--soft); font-size: 13px; margin-top: 10px; }
.quote-by { text-align: center; color: var(--soft); margin-top: 10px; font-weight: 700; }
.gens { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.gen { background: #fff; border-radius: var(--r); padding: 22px 18px; box-shadow: var(--shadow); }
.gen .em { font-size: 42px; }
.gen h3 { margin: 6px 0; font-size: 21px; }
.gen p { color: var(--soft); font-size: 15px; }
.gen .chips { margin-top: 10px; }
.steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.step { background: #fff; border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); position: relative; }
.step b { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); font-family: 'SBAggro', sans-serif; font-size: 22px; margin-bottom: 8px; }
.step h3 { font-size: 21px; }
.step p { color: var(--soft); }
.center-cta { justify-content: center; margin-top: 26px; }
.tile.static { cursor: default; }
.tile.static:hover { transform: none; }
.lab-band { background: var(--ink); color: #fff; border-radius: var(--r); padding: clamp(22px, 4vw, 38px); display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lab-band h2 { color: #fff; }

/* 타임라인 */
.timeline { display: grid; gap: 0; border-left: 4px solid var(--yellow); margin-left: 8px; }
.tl { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 8px 0 18px 18px; position: relative; }
.tl::before { content: ''; position: absolute; left: -12px; top: 14px; width: 18px; height: 18px; border-radius: 50%; background: var(--sky); border: 4px solid var(--bg); }
.tl b { font-family: 'SBAggro', sans-serif; font-size: 20px; color: var(--sky); }
.tl h3 { font-size: 19px; }
.tl p { color: var(--soft); }
@media (max-width: 560px) { .tl { grid-template-columns: 1fr; gap: 2px; } }

/* 글자 크기 조절 (큰 글씨가 필요한 어르신·학부모를 위해) */
.fs { display: flex; gap: 2px; margin-left: 8px; }
.fs button { border: 2px solid var(--line); background: #fff; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-weight: 800; color: var(--ink); }
.fs button[data-fs="0"] { font-size: 13px; }
.fs button[data-fs="1"] { font-size: 16px; }
.fs button[data-fs="2"] { font-size: 20px; }
.fs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
html.fs-2 body { zoom: 1.15; }
html.fs-0 body { zoom: .92; }

/* 세대 카드 색 · 나이 */
.gen { border-top: 6px solid var(--g, var(--sky)); position: relative; }
.gen .age { position: absolute; top: 14px; right: 14px; background: var(--g, var(--sky)); color: #fff; font-weight: 800; font-size: 13px; padding: 2px 10px; border-radius: 999px; }

/* 선순환 */
.cycle { display: flex; gap: 10px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.cy { flex: 1 1 220px; max-width: 320px; background: #fff; border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); }
.cy small { font-family: 'SBAggro', sans-serif; color: var(--yellow-deep); font-size: 18px; }
.cy h3 { font-size: 26px; margin: 2px 0 6px; }
.cy p { color: var(--soft); }
.cycle .arrow { align-self: center; font-size: 28px; color: var(--sky); font-weight: 900; }
@media (max-width: 720px) { .cycle .arrow { display: none; } }

/* 맨 위 안내 바: 한 줄 소개 + 글자 크기 */
.utility { background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; }
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; }
.utility .fs-wrap { display: flex; align-items: center; gap: 10px; }
.utility .fs { margin: 0; gap: 6px; }
.utility .fs button { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.35); width: 36px; height: 34px; border-radius: 10px; }
.utility .fs button.on { background: #fff; color: var(--ink); border-color: #fff; }
.utility .fs button:hover { border-color: #fff; }
@media (max-width: 520px) { .utility { font-size: 13px; } .utility .wrap > span { flex: 1 1 100%; } }
/* 글자 크기 조절 시 가로로 넘치지 않게 폭을 보정 */
html.fs-2 body { zoom: 1.15; width: calc(100% / 1.15); }
html.fs-0 body { zoom: .92; width: calc(100% / .92); }
html.fs-2, html.fs-0 { overflow-x: hidden; }

/* ===== 유메이커 색상표 (남색 + 주황) · 직접 만든 아이콘 ===== */
:root {
  --ink: #1C345A; --sky: #3E9C86; --violet: #3E9C86; --purple: #1C345A; --emerald: #3E9C86;
  --yellow: #F2A03D; --yellow-deep: #D98A22; --yellow-soft: #FBE6CC; --line: #E4F3EF; --pink: #F2A03D;
}
.logo { background: none; box-shadow: none; width: 44px; height: 44px; border-radius: 0; display: block; }
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ico { width: 72px; height: 72px; object-fit: contain; display: block; }
.tile .em { display: block; margin-bottom: 4px; }
.tile .em img, .gen .em img { width: 72px; height: 72px; object-fit: contain; display: block; }
.gen .em { margin: 8px 0 4px; }
.pico img { width: 64px; height: 64px; object-fit: contain; display: block; }
.photo { background: #E4F3EF; }
.photo .ph-icon { position: relative; z-index: 1; width: min(42%, 150px); height: auto; object-fit: contain; }
.photo.wide .ph-icon { width: min(24%, 150px); }
.badge.paid { color: #3d2400; }
.hero { background-color: #F7FBFB; }
.stat b, .tl b { color: #3E9C86; }
.hl { background: linear-gradient(transparent 60%, #79CCB6 60%); }
.btn { color: #1C345A; }

/* ===== 새싹봇(대표 캐릭터) ===== */
.hero.landing .wrap, .hero.sub .wrap { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: center; }
.hero-mascot { width: 100%; max-width: 420px; height: auto; justify-self: center; }
.hero-mascot.sm { max-width: 240px; }
@media (max-width: 760px) {
  .hero.landing .wrap, .hero.sub .wrap { grid-template-columns: 1fr; }
  .hero-mascot { max-width: 220px; order: -1; justify-self: start; }
  .hero-mascot.sm { max-width: 150px; }
}
.msg-mascot { width: 56px; height: auto; vertical-align: middle; margin-right: 10px; }
.with-mascot { display: flex; gap: 18px; align-items: center; }
.side-mascot { width: 130px; height: auto; flex: none; }
@media (max-width: 560px) { .with-mascot { flex-direction: column; align-items: flex-start; } .side-mascot { width: 100px; } }

.hero[style*="padding-bottom"] .wrap { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: center; }
@media (max-width: 760px) { .hero[style*="padding-bottom"] .wrap { grid-template-columns: 1fr; } }

/* ===== 가독성: 작은 글씨(버튼·탭·라벨)는 본문 글꼴로, 제목만 굵은 제목 글꼴 ===== */
.btn, .tab, .badge, .closed-tag, .fs button, .editor-bar button, .menu-row input.lab, .switch, .tile i, .stat span {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif;
}
.btn { font-weight: 800; letter-spacing: -0.01em; }
.btn.sm { font-size: 15px; padding: 9px 18px; }
.btn.big { font-size: 18px; }
.tab { font-weight: 700; }
.badge { font-weight: 700; }

/* 원데이 오픈 예고 */
.soon-band { margin-top: 20px; background: var(--yellow-soft); border-radius: var(--r); padding: 18px 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.soon-band span { color: var(--soft); }

/* 첫 화면: 위쪽 여백을 줄여 메인 문구가 위로 올라오게 */
.hero.landing { padding: clamp(20px, 3vw, 44px) 0 clamp(44px, 6vw, 80px); }
.hero.landing .wrap { align-items: start; }
.hero.landing .hero-mascot { max-width: 380px; }
@media (max-width: 760px) {
  .hero.landing { padding-top: 16px; }
  .hero.landing .hero-mascot { max-width: 200px; }
}

/* ===== 첫 화면을 100% 크기에서 한 화면(숫자 카드까지)에 담기 — 화면 높이(vh)에 맞춰 줄어듦 ===== */
@media (min-width: 761px) {
  .hero.landing { padding: clamp(10px, 1.8vh, 24px) 0 clamp(26px, 4vh, 46px); }
  .hero.landing .eyebrow { margin-bottom: 4px; font-size: clamp(12px, 1.7vh, 14px); }
  .hero.landing h1 { font-size: clamp(32px, min(4.5vw, 7.2vh), 62px); line-height: 1.18; }
  .hero.landing .lead { font-size: clamp(15px, min(1.5vw, 2.2vh), 19px); margin-top: clamp(8px, 1.4vh, 14px); line-height: 1.55; }
  .hero.landing .cta { margin-top: clamp(14px, 2.2vh, 22px); }
  .hero.landing .btn.big { padding: clamp(10px, 1.6vh, 14px) 26px; font-size: 17px; }
  .hero.landing .hero-mascot { max-width: min(340px, 36vh); }
  .block.proof { margin-top: calc(clamp(26px, 4vh, 46px) * -0.55); }
  .stats.big .stat { padding: clamp(10px, 1.8vh, 18px) 10px; }
  .stats.big .stat b { font-size: clamp(24px, 4.4vh, 40px); }
  .stats.big .stat span { font-size: 13px; line-height: 1.3; }
  .proof-note { margin-top: 6px; }
}

/* 제목은 두 줄 고정: 글자 크기를 '글 영역 너비'에 맞춰 자동 조절 (꺾이지 않게) */
@media (min-width: 761px) {
  .hero.landing .hero-text { container-type: inline-size; }
  .hero.landing h1 { font-size: clamp(30px, min(8.6cqw, 7.2vh), 64px); white-space: nowrap; }
}

/* 글 영역을 조금 넓혀 제목을 더 크게 (캐릭터 열은 그대로) */
@media (min-width: 761px) {
  .hero.landing .wrap { grid-template-columns: 1.75fr 1fr; }
}

/* ===== 첫 화면 = 딱 한 화면: 제목·캐릭터·숫자 카드가 화면 높이를 채우고, 다음 섹션은 스크롤해야 보임 ===== */
@media (min-width: 761px) {
  .first-screen { min-height: calc(100vh - 130px); display: flex; flex-direction: column; }
  .first-screen .hero.landing { flex: 1; display: flex; align-items: center; padding: clamp(10px, 2vh, 28px) 0; }
  .first-screen .hero.landing .wrap { width: 100%; align-items: center; grid-template-columns: 1.6fr 1fr; }
  .first-screen .hero.landing h1 { font-size: clamp(34px, min(9.2cqw, 9.4vh), 80px); }
  .first-screen .hero.landing .lead { font-size: clamp(16px, min(1.7vw, 2.7vh), 21px); }
  .first-screen .hero.landing .eyebrow { font-size: clamp(13px, 1.9vh, 16px); }
  .first-screen .hero.landing .btn.big { padding: clamp(11px, 1.9vh, 17px) 30px; font-size: clamp(17px, 2.2vh, 20px); }
  .first-screen .hero.landing .hero-mascot { max-width: min(460px, 50vh); }
  .first-screen .block.proof { margin-top: 0; padding: 0 0 clamp(18px, 3.2vh, 38px); }
  .first-screen .stats.big .stat { padding: clamp(12px, 2.2vh, 22px) 10px; }
  .first-screen .stats.big .stat b { font-size: clamp(26px, 5vh, 46px); }
}

/* 넓은 화면에서는 첫 화면 영역을 넓혀 제목·캐릭터를 더 크게 */
@media (min-width: 1200px) {
  .first-screen .hero.landing .wrap, .first-screen .block.proof .wrap { max-width: min(1320px, 92vw); }
  .first-screen .hero.landing .wrap { grid-template-columns: 1.55fr 1fr; }
}

/* ===== 형광펜 강조: 줄마다 따로 그리고(clone), 글자 아래쪽에만 연하게 ===== */
.hl, .hero.landing .lead b {
  background-image: linear-gradient(transparent 66%, rgba(242, 160, 61, .55) 66%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .14em; margin: 0 -.14em; border-radius: 3px;
  background-color: transparent;
}

/* ===== 강조 표현: 둥근 모서리 + 살짝 그라데이션 + 투명한 형광펜 (글씨가 주인공) ===== */
.hl, .hero.landing .lead b {
  text-decoration: none;
  background-image: linear-gradient(100deg, rgba(255, 205, 110, .55), rgba(242, 160, 61, .32) 55%, rgba(255, 205, 110, .5));
  background-repeat: no-repeat;
  background-size: 100% 62%;
  background-position: 0 88%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: .02em .32em; margin: 0 -.12em;
  border-radius: 999px;
}
.hero.landing .lead b { color: var(--ink); font-weight: 800; }

/* ===== 첫 화면 대표 비주얼: 윰쌤이 주인공, 유싹이는 옆에서 거들어요 ===== */
.hero-duo { position: relative; justify-self: center; display: flex; justify-content: center; align-items: flex-end; width: 100%; }
.hero-duo .duo-glow { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 92%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 214, 140, .75), rgba(255, 214, 140, .25) 62%, transparent 72%); }
.hero-duo .duo-main { position: relative; display: block; width: auto; height: auto; max-width: 100%; max-height: min(58vh, 560px); object-fit: contain; filter: drop-shadow(0 8px 14px rgba(20, 50, 90, .14)); }
.hero-duo .duo-sub { position: absolute; left: -2%; bottom: 0; width: clamp(84px, 11vh, 130px); height: auto; filter: drop-shadow(0 4px 8px rgba(20, 50, 90, .18)); }
@media (max-width: 760px) {
  .hero-duo { max-width: 300px; justify-self: start; }
  .hero-duo .duo-main { max-height: 340px; }
  .hero-duo .duo-sub { width: 76px; }
}

/* ===== 숨 쉴 틈: 위쪽(제목·소개)을 더 크고 여유 있게, 숫자 카드는 작고 조용하게 ===== */
@media (min-width: 761px) {
  .first-screen .hero.landing { padding: clamp(18px, 4vh, 48px) 0 clamp(18px, 3.5vh, 40px); }
  .first-screen .hero.landing .eyebrow { margin-bottom: clamp(8px, 1.6vh, 16px); }
  .first-screen .hero.landing h1 { line-height: 1.3; }
  .first-screen .hero.landing .lead { line-height: 1.85; margin-top: clamp(14px, 2.6vh, 26px); }
  .first-screen .hero.landing .cta { margin-top: clamp(22px, 4vh, 40px); }
  .first-screen .block.proof .wrap { max-width: min(980px, 88vw); }
  .first-screen .block.proof { padding-bottom: clamp(14px, 2.6vh, 28px); }
  .first-screen .stats.big { gap: 12px; }
  .first-screen .stats.big .stat { padding: clamp(8px, 1.4vh, 14px) 8px; border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 50, 90, .06); }
  .first-screen .stats.big .stat b { font-size: clamp(18px, 3vh, 28px); }
  .first-screen .stats.big .stat span { font-size: 12px; opacity: .85; }
  .first-screen .proof-note { font-size: 12px; margin-top: 8px; opacity: .8; }
}


/* ===== 유메이커 공식 브랜드 색 (2026-10-19 확정): 흰 바탕+네이비 글씨, 민트 기본, 오렌지는 한 곳, 인디고는 보조 ===== */
:root {
  --mint: #79CCB6; --mint-deep: #3E9C86; --mint-soft: #E6F5F0;
  --orange: #F79C42; --orange-deep: #D97F2A; --indigo: #5E53B7; --navy: #1C345A;
  --ink: #1C345A; --soft: #4D6180; --line: #DDE9EA; --bg: #F6FAFA;
  --sky: #3E9C86; --violet: #3E9C86; --purple: #1C345A; --emerald: #3E9C86;
  --yellow: #79CCB6; --yellow-deep: #58B29B; --yellow-soft: #E6F5F0; --pink: #F79C42;
}
/* 기본 버튼 = 민트, 첫 화면의 신청 버튼 한 개만 오렌지 */
.btn { color: var(--navy); }
.hero.landing .cta .btn:not(.ghost) { background: var(--orange); box-shadow: 0 5px 0 var(--orange-deep); }
.hero.landing .cta .btn:not(.ghost):active { box-shadow: 0 2px 0 var(--orange-deep); }
.top nav a:hover, .top nav a.on { background: var(--mint-soft); color: var(--navy); }
.logo { background: none; box-shadow: none; width: auto; height: 40px; border-radius: 0; display: block; }
.logo img { width: auto; height: 100%; object-fit: contain; }
.brand { gap: 8px; }
.brand b { font-size: 24px; color: var(--navy); letter-spacing: -.5px; }
.stat b, .tl b { color: var(--navy); }
.demo, .sample-tag { background: var(--mint-soft); color: #2d6c5c; }
.note-box { background: var(--mint-soft); }
/* 형광펜 = 민트, 글씨는 네이비 그대로 */
.hl, .hero.landing .lead b {
  background-image: linear-gradient(100deg, rgba(121, 204, 182, .5), rgba(121, 204, 182, .28) 55%, rgba(121, 204, 182, .45));
}
.hero-duo .duo-glow { background: radial-gradient(circle at 50% 45%, rgba(121, 204, 182, .38), rgba(121, 204, 182, .14) 62%, transparent 72%); }
footer { background: var(--navy); }
footer .foot-logo { width: 150px; height: auto; margin-bottom: 6px; }
.closed-tag, .lab-band, .utility { background: var(--navy); }
.note-box.paid { background: #FDEBD7; }
.badge.paid { --c: #F79C42; color: #3d2400; }