/* 알려드림·올려드림 홈페이지와 약관 공통. 글꼴(@font-face)은 빌드가 npm 패키지에서 만드는 fonts.css에 있다 — site/build.mjs
   2026-10-18: 11장 발표형(가운데 한 줄, 칠판과 메모지 번갈아) 시안으로 다시 만듦.
   정본: 설계 폴더 docs/aldream/current/allyeodream-homepage-plan-20261017.md §10~12, 시안 캔버스 2개. */

:root {
  --paper: #f4eee2; --paper-deep: #e8dfc8; --cream: #fffdf7; --memo: #fff6c9;
  --ink: #2b2522; --ink-deep: #141110; --ink-soft: #4a4340; --ink-mute: #7a6f68;
  --yellow: #f2c230; --chalk-yellow: #ffd84a; --red: #d2412f; --green: #2f6f62;
  --board: #2c3b34; --board-frame: #6e5236; --chalk: #fffdf7; --chalk-soft: #ece6d8;
  --grid: rgba(185, 201, 216, 0.45); --line-mute: #d8ccb2;
  --brand-ollydream: #d2412f;
  /* 칠판·메모지 테이프와 강조 버튼 색. 올려드림은 olly.css에서 빨강으로 바꾼다 */
  --accent: #f2c230; --accent-ink: #2b2522; --note-tape: rgba(242, 194, 48, 0.75);
  --line-bold: 5px; --line: 3px; --radius: 14px; --radius-card: 6px;
  --lift: 3px 4px 0 rgba(43, 37, 34, 0.22); --lift-card: 2px 3px 0 rgba(43, 37, 34, 0.18);
  --lift-press: 1px 1px 0 rgba(43, 37, 34, 0.22);
  --clean-bg: #fffdf7; --clean-line: #d7d2c8; --clean-radius: 12px;
  --clean-shadow: 0 1px 2px rgba(20, 17, 16, 0.06), 0 8px 24px rgba(20, 17, 16, 0.06);
  --font-bold: "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  /* 손글씨는 Gaegu 하나만 쓴다(2026-10-18, 예전 Nanum Pen Script 제거) */
  --font-hand: "Gaegu", "Pretendard", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* [WHY] 갤럭시·크롬의 강제 다크 모드는 '다크 모드를 스스로 처리하는 사이트'에는 적용되지 않는다.
     그래서 다크도 지원한다고 알리고, 아래 prefers-color-scheme: dark에서 같은 종이 색을 다시 지정해 화면은 항상 밝게 둔다. */
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 한국어 줄바꿈 공식(2026-10-17): 띄어쓰기에서만 바꾼다. 띄어쓰기 없는 긴 주소·번호는 넘칠 때만 끊는다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #f4eee2; --cream: #fffdf7; --ink: #2b2522; --ink-soft: #4a4340; }
  body { background-color: #f4eee2; color: #2b2522; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: 80px; }
/* 모눈 종이 바탕(예전 종이 사진 330KB 대신 CSS 선) */
body {
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: var(--font-bold);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:hover { color: var(--red); }
/* 장면 그림이 무대 밖으로 나가도 가로 스크롤이 생기지 않게 */
main { overflow-x: clip; }
.font-warm { position: absolute; left: -9999px; top: 0; }
.font-warm .warm-bold { font-family: Pretendard; font-weight: 900; }
.font-warm .warm-hand { font-family: Gaegu; font-weight: 700; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 30; background: var(--cream); padding: 6px 12px; border: var(--line) solid var(--ink); }

/* ── 상단 메뉴 */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(244, 238, 226, 0.95); border-bottom: 2px solid var(--ink); }
/* 글자를 크게 키우거나 아주 좁은 화면에서는 오른쪽 버튼이 다음 줄로 내려간다(넘침 대신) */
.nav-in { display: flex; flex-wrap: wrap; row-gap: 6px; align-items: center; gap: 24px; min-height: 64px; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.logo { font-weight: 900; font-size: 23px; letter-spacing: -0.5px; text-decoration: none; white-space: nowrap; }
.logo b { position: relative; z-index: 0; }
.logo b::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: 3px; height: 10px; background: var(--accent); opacity: 0.6; z-index: -1; transform: rotate(-1.5deg); border-radius: 3px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.menu + .nav-right { margin-left: 0; }
.nav .btn { min-height: 42px; font-size: 15px; padding: 4px 14px; border-width: var(--line); box-shadow: var(--lift-press); }
.nav .nav-cta { background: var(--yellow); }
.logo small { font-family: var(--font-hand); font-weight: 700; font-size: 18px; color: var(--ink-soft); margin-left: 8px; letter-spacing: 0; }
/* 두 사이트 오가기(알려드림 ↔ 올려드림). 2026-10-18 발표형으로 다시 만들며 빠졌던 것을 되살림 */
.switch { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 4px 13px 4px 8px; font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; background: var(--cream); border: var(--line) solid var(--ink); border-radius: 999px; }
.switch:hover { color: var(--ink); background: #fff; }
.switch .dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-ollydream); border: 2px solid var(--ink); }
.switch.to-al .dot { background: var(--yellow); }
.switch svg { width: 12px; height: 12px; fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.switch.to-al svg { stroke: var(--ink); }
.switch small { font-family: var(--font-hand); font-weight: 700; font-size: 16px; color: var(--ink-soft); }
.menu { display: flex; gap: 20px; list-style: none; margin: 0 0 0 auto; padding: 0; font-weight: 700; font-size: 15px; }
.menu a { text-decoration: none; white-space: nowrap; }
.menu a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font: inherit; font-weight: 800; font-size: 16px; text-decoration: none; background: var(--accent); color: var(--accent-ink); border: var(--line-bold) solid var(--ink); border-radius: var(--radius); padding: 8px 18px; box-shadow: var(--lift); transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); white-space: nowrap; cursor: pointer; }
.btn:hover { color: var(--accent-ink); transform: translate(-1px, -1px); box-shadow: 4px 5px 0 rgba(43, 37, 34, 0.22); }
.btn:active { transform: translate(2px, 3px); box-shadow: var(--lift-press); }
.btn.ghost { background: var(--cream); color: var(--ink); }
.btn.big { min-height: 58px; font-size: 19px; font-weight: 900; padding: 12px 28px; }
:is(.btn, .menu a, .logo, summary, input, select, textarea, a):focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* ── 11장 발표: 한 장 = 칠판(또는 메모지) + 그 아래 그림 */
.sec { padding-top: 88px; padding-bottom: 72px; }
.tag-row { text-align: center; }
.tag { display: inline-block; font-family: var(--font-hand); font-weight: 700; font-size: 23px; line-height: 1.4; background: var(--accent); color: var(--accent-ink); border: var(--line) solid var(--ink); padding: 2px 16px; border-radius: var(--radius); margin: 0 0 20px; transform: rotate(-2deg); }
/* 알려드림 첫 장 아래 한 줄 설명(2026-10-18 대표 문구) */
.lead-desc { margin: 22px auto 0; max-width: 860px; text-align: center; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
/* 06 대표님 하루, 시간이 가는 곳: 사장님 그림 두 장(예전 → 바뀐 뒤), 가운데 정렬 */
.day { margin: 0 auto; text-align: center; }
.day-title { margin: 0 0 14px; font-weight: 900; font-size: 22px; }
.day-scenes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.day-scene { margin: 0; }
.day-scene figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 6px; }
.day-scene figcaption b { font-size: 20px; font-weight: 900; }
.day-scene.now figcaption b { color: var(--red); }
.day-when { font-family: var(--font-hand); font-weight: 700; font-size: 20px; color: var(--ink-soft); }
.day-arrow::before { content: "→"; font-weight: 900; font-size: 40px; color: var(--red); }
.day-note { margin: 10px 0 0; text-align: right; font-size: 13px; color: var(--ink-mute); }

/* 칠판: 글은 고정, 그림이 나아가는 만큼 분필 밑줄(li.on)만 옮겨 간다(deck.js) */
.board { position: relative; text-align: center; background: var(--board); color: var(--chalk); border: 12px solid var(--board-frame); border-radius: 10px; box-shadow: var(--lift); padding: 42px 44px 34px; }
.board::before { content: ""; position: absolute; top: -24px; left: 50%; width: 120px; height: 30px; margin-left: -60px; background: rgba(232, 223, 200, 0.92); transform: rotate(-3deg); }
.board .no { position: absolute; top: 12px; right: 18px; font-family: var(--font-hand); font-weight: 700; font-size: 22px; color: var(--chalk-yellow); }
.board :is(h1, h2) { margin: 0 0 18px; font-weight: 900; font-size: 42px; line-height: 1.3; letter-spacing: -0.02em; }
.board ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.board li { font-size: 19px; line-height: 1.6; color: var(--chalk-soft); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 6px; transition: color 400ms, text-decoration-color 400ms; }
.board li.on { color: var(--chalk); text-decoration-color: var(--chalk-yellow); }
.board .y { color: var(--chalk-yellow); }
/* 메모지: 칠판과 번갈아 리듬을 준다 */
.board.note { background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: var(--radius-card); box-shadow: 3px 4px 0 rgba(43, 37, 34, 0.2); transform: rotate(-0.4deg); }
.board.note::before { background: var(--note-tape); }
.board.note .no { color: var(--red); }
.board.note li { color: var(--ink-soft); }
.board.note li.on { color: var(--ink); text-decoration-color: var(--yellow); }
.board.note .y { color: var(--red); }

/* 그림 무대 */
.stage { position: relative; background: var(--cream); border: 4px solid var(--ink); border-radius: var(--radius-card); box-shadow: 3px 4px 0 rgba(43, 37, 34, 0.2); margin-top: 30px; padding: 30px; }
.stage.deep { background: var(--paper-deep); }
.stage-note { text-align: center; margin: 16px 0 0; font-size: 14px; color: var(--ink-soft); }
svg.scene { display: block; width: 100%; height: auto; overflow: hidden; }
/* 장면 높이를 스크립트가 viewBox를 바꾸기 전부터 맞춰 둔다(폰 배치 tall과 같은 비율, 화면이 튀지 않게 — 각 scene-*.js layouts와 같은 값) */
@media (max-width: 700px) {
  #alhero { aspect-ratio: 600 / 1060; }
  #aldesk { aspect-ratio: 700 / 600; }
  #almachine { aspect-ratio: 700 / 860; }
  #ointro { aspect-ratio: 1000 / 680; }
}
.row { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.center { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; text-align: center; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gap-top { margin-top: 34px; }
.card { position: relative; background: var(--cream); border: var(--line) solid var(--ink); border-radius: var(--radius-card); padding: 22px; box-shadow: var(--lift-card); }
.card h3 { margin: 0 0 10px; font-size: 20px; font-weight: 900; line-height: 1.4; }
.card p { margin: 0; font-size: 16px; line-height: 1.65; }
.card p + p { margin-top: 8px; }
.card.mid { text-align: center; }
.card.dim { background: #ece6d8; }
.card.good { border-color: var(--green); box-shadow: 3px 4px 0 rgba(47, 111, 98, 0.3); }
.card.good .label { color: var(--green); }
.taped::before { content: ""; position: absolute; top: -14px; left: 24px; width: 70px; height: 22px; background: rgba(242, 194, 48, 0.75); transform: rotate(-5deg); }
.label { font-family: var(--font-hand); font-weight: 700; font-size: 21px; color: var(--ink-mute); }
.doodle { display: inline-block; font-family: var(--font-hand); font-weight: 700; font-size: 24px; line-height: 1.35; color: var(--red); transform: rotate(-4deg); }
.big-num { font-size: 46px; font-weight: 900; line-height: 1.2; color: var(--red); }
.strong { font-weight: 700; }

/* 자세히 보기: 메모지가 펼쳐진다(글은 처음부터 문서 안에 있다) */
.more { margin-top: 18px; }
.more summary { list-style: none; display: flex; justify-content: center; }
.more summary::-webkit-details-marker { display: none; }
/* 바깥 span 하나에만 테두리(안쪽 열기/접기 span까지 잡으면 테두리가 두 번 그려졌다, 2026-10-18) */
.more summary > span { display: inline-block; font-size: 16px; font-weight: 800; background: var(--cream); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 12px 22px; min-height: 48px; cursor: pointer; box-shadow: 3px 4px 0 rgba(43, 37, 34, 0.22); }
.more[open] .when-closed, .more:not([open]) .when-open { display: none; }
.memo { background: var(--memo); border: var(--line) solid var(--ink); border-radius: var(--radius-card); padding: 22px 26px; margin-top: 16px; font-size: 17px; line-height: 1.7; transform: rotate(-0.6deg); }
.memo p { margin: 0 0 8px; }
.memo p:last-child { margin-bottom: 0; }

/* 큰 버튼(시안의 노란/빨간 버튼) */
.cta { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 900; font-size: 19px; line-height: 1.3; background: var(--accent); color: var(--accent-ink); border: 4px solid var(--ink); border-radius: var(--radius); padding: 14px 30px; min-height: 56px; text-decoration: none; text-align: center; box-shadow: 3px 4px 0 rgba(43, 37, 34, 0.22); cursor: pointer; transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.cta:hover { color: var(--accent-ink); transform: translate(-1px, -1px); }
.cta:active { transform: translate(2px, 3px); box-shadow: var(--lift-press); }
.cta.ghost { background: var(--cream); color: var(--ink); font-weight: 700; font-size: 17px; border-width: 3px; min-height: 52px; padding: 12px 22px; }
.cta[disabled] { opacity: 0.6; cursor: wait; }
.cta[hidden] { display: none; }

/* 02 숫자·사람·그래프 */
.people { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 10px; }
.person { width: 22px; height: 34px; position: relative; }
.person::before { content: ""; position: absolute; left: 5px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #363b4e; }
.person::after { content: ""; position: absolute; left: 1px; top: 14px; width: 20px; height: 20px; border-radius: 10px 10px 4px 4px; background: #363b4e; }
.in .person.go { animation: fade 1.2s ease-out forwards; }
.in .person.go:nth-child(5) { animation-delay: 0.1s; } .in .person.go:nth-child(6) { animation-delay: 0.2s; }
.in .person.go:nth-child(7) { animation-delay: 0.3s; } .in .person.go:nth-child(8) { animation-delay: 0.4s; }
.in .person.go:nth-child(9) { animation-delay: 0.5s; } .in .person.go:nth-child(10) { animation-delay: 0.6s; }
@keyframes fade { to { opacity: 0.12; transform: translateY(6px); } }
.chart { display: block; width: 100%; height: auto; }
.in .line { stroke-dasharray: 800; animation: draw 1.6s ease-out 0.3s both; }
.in .line.late { animation-delay: 0.9s; }
@keyframes draw { from { stroke-dashoffset: 800; } to { stroke-dashoffset: 0; } }

/* 02 사업 확장: 작은 가게 하나 → 건물이 차례로 솟는다 */
.grow .bld { transform-box: fill-box; transform-origin: 50% 100%; }
.in .grow .bld:not(:nth-child(3)) { animation: rise 0.7s var(--ease-out) both; }
.in .grow .bld:nth-child(4) { animation-delay: 0.3s; } .in .grow .bld:nth-child(5) { animation-delay: 0.55s; }
.in .grow .bld:nth-child(6) { animation-delay: 0.8s; } .in .grow .bld:nth-child(7) { animation-delay: 1.05s; }
@keyframes rise { from { transform: scaleY(0.04); } }

/* 06 휴대폰 알림 */
@keyframes slide { from { opacity: 0; translate: 0 18px; } }

/* 08 점 100개 */
.dots { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 6px; }
.dot { aspect-ratio: 1; border-radius: 50%; background: var(--red); transition: background-color 500ms; }
.in .dot.off { background: var(--line-mute); }
.src { font-size: 14px; color: var(--ink-soft); margin-top: 14px; line-height: 1.6; }

/* 09 대표 한마디 */
.sign { max-width: 560px; margin: 28px auto 0; background: var(--memo); border: var(--line) solid var(--ink); border-radius: var(--radius-card); padding: 20px 24px; transform: rotate(-1deg); box-shadow: 2px 3px 0 rgba(43, 37, 34, 0.18); }
.sign p { margin: 0; text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 25px; line-height: 1.45; }
.sign div { margin-top: 10px; text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 22px; color: var(--green); }

/* 10 질문 */
.faq-list { display: flex; flex-direction: column; gap: 14px; margin-top: 44px; }
.faq-list.near { margin-top: 30px; }
/* 손글씨 제목은 가운데 한 덩어리로 두고 아래 칸과 띄운다(기울어진 글이 첫 칸 테두리에 겹치지 않게) */
.faq-list > .doodle { align-self: center; margin-bottom: 8px; }
.qa { border: var(--line) solid var(--ink); border-radius: var(--radius-card); background: var(--cream); padding: 18px 22px; }
.qa h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.45; }
.qa p { margin: 8px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.link-line { text-align: center; margin: 24px 0 0; font-size: 16px; }
.link-line a { font-weight: 800; }

/* 11 신청 흐름과 양식 */
.flow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; list-style: none; margin: 26px 0; padding: 0; font-size: 15px; font-weight: 700; }
.flow li { display: flex; align-items: center; gap: 10px; }
.flow span { background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 12px; white-space: nowrap; }
.flow i { font-style: normal; }
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 700; }
.field small { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea, .field select { font: inherit; font-weight: 400; font-size: 16px; color: var(--ink); border: var(--line) solid var(--ink); border-radius: 10px; padding: 12px; background: var(--cream); min-height: 48px; width: 100%; }
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 20px center, right 14px center; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.6; }
.agree input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 3px; accent-color: var(--ink); }
.agree a { font-weight: 800; }
.form-msg { margin: 0; padding: 14px 16px; border-radius: 10px; border: var(--line) solid var(--ink); background: var(--memo); font-size: 16px; font-weight: 700; }
.form-msg.bad { background: #fde3dc; }
.form-msg[hidden] { display: none; }
.form .cta { align-self: center; }

/* 바닥글 */
/* [WHY] 보조 회색(--ink-mute)은 종이 위 작은 글자에서 대비가 모자라 작은 글자는 --ink-soft */
footer { border-top: 2px solid var(--ink); padding: 36px 0 120px; font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
footer .brand { font-weight: 900; color: var(--ink); font-size: 16px; }
footer .links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 14px; font-weight: 700; }
footer .links a { text-decoration: none; }
footer .info span { display: inline-block; margin-right: 14px; }
footer p { margin: 10px 0 0; }

/* 폰 아래쪽 고정 신청 버튼. 오른쪽은 채널톡 상담 버튼 자리로 비운다.
   예시·신청서([data-keep-clear])가 보이면 keep-clear.js가 .off를 붙여 숨긴다(자리는 그대로라 화면이 튀지 않음).
   footer 아래 여백 120px은 페이지 끝에서도 채널톡 버튼(44px, 아래 18px)이 글·링크를 덮지 않게 하는 자리다.
   2026-10-18: 버튼을 화면 가운데에 둔다. 좌우 여백을 같게(88px) 둬서 가운데이면서 오른쪽 채널톡 버튼 자리와 겹치지 않는다. */
.sticky { display: none; position: sticky; bottom: 12px; z-index: 15; justify-content: center; margin: 0 88px 12px; transition: opacity 0.2s, visibility 0.2s; }
/* 숨길 때는 바로 완전히 숨긴다(흐린 버튼이 남지 않게). 나타날 때만 부드럽게 */
.sticky.off { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.sticky .cta { font-size: 16px; padding: 10px 18px; min-height: 48px; white-space: nowrap; }

/* ── 한국어 줄바꿈 공식(2026-10-17, 설계 폴더 typography-linebreak-spec-20261017.md §1·§2) */
h1, h2, h3, summary { text-wrap: balance; }
p, li, td, dd, .lead { text-wrap: pretty; }
.nb { white-space: nowrap; }
/* 칠판 제목·꼬리표의 구절 묶음: 한 줄에 들어가면 함께 다음 줄로 가고, 글이 아주 크거나 화면이 아주 좁아
   묶음 자체가 한 줄보다 길 때만 안에서 줄을 바꾼다(넘침 대신). 2026-10-18 큰 글자·400% 확대 검사 */
.board :is(h1, h2) .nb, .tag .nb, .ratio .nb { display: inline-block; white-space: normal; }
.pl { white-space: pre-line; }
br.m, .br-m { display: none; }

/* ── 폰 */
/* 아주 좁은 화면(320px = 1280px 창의 400% 확대): 고정 버튼 글을 한 줄로 두고 채널톡 자리를 비운다 */
@media (max-width: 340px) {
  .sticky { margin: 0 76px 12px; }
  .sticky .cta { font-size: 15px; padding: 10px 12px; }
}
/* 901~1100px: 메뉴·바꾸기 단추·신청 버튼이 한 줄에 들어가게 줄인다 */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav-in { gap: 16px; }
  .menu { gap: 14px; }
  .switch small, .nav .logo small { display: none; }
}
@media (max-width: 900px) {
  .menu { display: none; }
  .menu + .nav-right { margin-left: auto; }
  .nav-in { gap: 12px; min-height: 58px; padding: 0 16px; }
  .switch small { display: none; }
  html { scroll-padding-top: 68px; }
  /* 폰과 좁은 창: 위 신청 버튼 대신 아래 고정 버튼 */
  .nav .nav-cta { display: none; }
  /* 꼬리표는 한 줄(360px까지 맞는 크기, 글자를 키우면 구절 단위로 내려온다) */
  .tag { font-size: 15px; padding: 2px 12px; }
  .lead-desc { font-size: 16px; margin-top: 16px; }
  .day-title { font-size: 19px; }
  .day-scenes { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .day-scene svg.scene { max-width: 320px; margin: 0 auto; }
  .day-arrow::before { content: "↓"; font-size: 30px; }
}
/* 폰에서 상단 한 줄 유지: 바꾸기 단추를 줄이고, 올려드림은 로그인까지 있어 로고 옆 작은 글을 뺀다 */
@media (max-width: 480px) {
  .switch { gap: 5px; padding: 3px 10px 3px 5px; font-size: 14px; }
  .switch .dot { width: 20px; height: 20px; }
  .olly .nav .logo small { display: none; }
}
@media (max-width: 359px) {
  .nav .logo small { display: none; }
}
@media (max-width: 700px) {
  br.m, .br-m { display: inline; }
  .wrap { padding: 0 16px; }
  .sec { padding-top: 60px; padding-bottom: 50px; }
  .board { padding: 36px 22px 24px; border-width: 9px; }
  .board :is(h1, h2) { font-size: clamp(20px, 5.9vw, 28px); }
  .board li { font-size: 17px; }
  .board .no { font-size: 19px; top: 8px; right: 12px; }
  .three, .two { grid-template-columns: minmax(0, 1fr); }
  .stage { padding: 20px; }
  .dots { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .big-num { font-size: 40px; }
  .sticky { display: flex; }
.logo small { font-size: 16px; }
  .sign p { font-size: 22px; }
}

/* 들어오는 움직임은 장이 보이기 전까지 숨겨 둔다(deck.js가 움직임을 쓸 때만 html.motion) */
.motion .sec:not(.in) .bar { opacity: 0; }
.motion .sec:not(.in) .grow .bld:not(:nth-child(3)) { transform: scaleY(0.04); }
.motion .sec:not(.in) .line { stroke-dasharray: 800; stroke-dashoffset: 800; }

/* 움직임 줄이기: 처음부터 완성된 모습(숫자는 끝 값, 그래프는 다 그린 선) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .person.go { opacity: 0.12; }
  .dot.off { background: var(--line-mute); }
}