/* 홍보 홈페이지 전용 스타일 — 수업 시스템(app.css)과 분리되어 있습니다.
모바일 우선으로 짜고, 720px 이상에서 여러 칸으로 넓힙니다. */
:root {
--terra: #8B2635; /* 버건디 — 포인트 */
--terra-dark: #6f1d29;
--terra-soft: #F7E9EB; /* 카드 그림 바탕 — 버건디를 아주 옅게 */
--teal: #5B3A44; /* 딥 모브 — 본문 강조 */
--teal-dark: #33171f;
--ink: #241d1f;
--sub: #6f6266;
/* 원장님: "배경이 화이트도 있어야 해. 배경이 톤업이 되자."
한 단계씩 밝혔습니다. 바탕이 **흰색**이 되고, 번갈아 오는 띠가
예전 바탕색(로즈 크림)을 이어받습니다. 흰 띠와 옅은 로즈 띠가
교대로 오면서 전체가 밝아지고, 띠의 구분은 그대로 살아 있습니다.
예전 로즈 크림 #faf6f4 ↔ 진한 로즈 #f4ebe9
지금 흰색 #ffffff ↔ 로즈 크림 #faf6f4 */
--bg: #ffffff; /* 흰 띠 */
--bg-alt: #faf6f4; /* 로즈 크림 띠 */
--card: #ffffff;
--line: #e8dcda;
--ok-bg: #e8f3ec; --ok-ink: #186b46;
--err-bg: #faeae6; --err-ink: #a8321f;
--radius: 14px;
--shadow: 0 2px 14px rgba(36, 29, 31, .07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
"Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.7;
word-break: keep-all;
overflow-wrap: anywhere;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; /* 가로로 돌렸을 때 글자가 멋대로 커지는 것 */
}
/* 어느 한 칸이 넘쳐도 화면이 옆으로 밀리지 않게.
⚠ `hidden` 이 아니라 `clip` 입니다. `overflow-x: hidden` 을 주면
브라우저가 여기를 **스크롤 상자**로 만들어 버리고, 그러면 안에 있는
`position: sticky` 가 전부 죽습니다 — 머리글이 위에 안 붙고 같이
올라가 버립니다. `clip` 은 넘치는 것만 자를 뿐 스크롤 상자를 만들지
않아서 붙임이 그대로 살아 있습니다. */
html, body { overflow-x: clip; }
/* 머리글이 붙어 있어서, 메뉴로 건너뛰면 제목이 머리글 밑에 가려집니다. */
section[id] { scroll-margin-top: 70px; }
a { color: var(--teal); text-decoration: none; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 640px; }
/* ── 헤더 ─────────────────────────────────────────── */
.hd {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, .9); /* 바탕이 흰색이 되어 머리글도 맞춥니다 */
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.hd-in { display: flex; align-items: center; gap: 18px; height: 58px; }
.logo { font-weight: 800; font-size: 22px; letter-spacing: -.5px; }
.logo-han { color: var(--terra); }
.logo-ibt { color: var(--teal); }
.logo.sm { font-size: 18px; }
.hd-nav { display: none; gap: 20px; margin-left: 8px; }
.hd-nav a { color: var(--ink); font-size: 15px; font-weight: 600; }
.hd-nav a:hover { color: var(--terra); }
.btn-login {
margin-left: auto;
padding: 8px 18px; border-radius: 999px;
border: 1.5px solid var(--teal); color: var(--teal);
font-weight: 700; font-size: 14px; white-space: nowrap;
}
.btn-login:hover { background: var(--teal); color: #fff; }
/* 로그인한 사람에게는 마이페이지 · 로그아웃,
로그인 안 한 사람에게는 회원가입 · 로그인 */
.hd-auth { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.hd-auth .btn-login { margin-left: 0; }
/* 회원가입 — 로그인보다 눈에 띄게 (처음 오는 사람이 갈 곳) */
.btn-signup {
padding: 8px 18px; border-radius: 999px;
background: var(--terra); color: #fff;
font-weight: 700; font-size: 14px; white-space: nowrap;
}
/* --terra-ink 는 어디에도 정의된 적이 없어서 대체값 #8a4a32(주황빛 갈색)가
나왔습니다. 회원가입 단추만 혼자 주황으로 보이던 원인입니다. */
.btn-signup:hover { background: var(--terra-dark); color: #fff; }
.btn-logout { color: var(--sub); font-size: 14px; font-weight: 600; white-space: nowrap; }
.btn-logout:hover { color: var(--terra); }
/* ── 좁은 화면 목차 ────────────────────────────────
예전에는 넓은 화면에만 메뉴가 있고 핸드폰에는 **아무 길도 없었습니다.**
처음 오신 분이 긴 화면을 끝까지 내리며 찾아야 했습니다. */
.hd-burger {
margin-left: auto; width: 42px; height: 42px; flex: none;
display: flex; flex-direction: column; justify-content: center; gap: 5px;
align-items: center; background: none; border: 0; cursor: pointer; padding: 0;
}
.hd-burger span {
display: block; width: 21px; height: 2px; border-radius: 2px;
background: var(--ink); transition: transform .2s, opacity .15s;
}
.hd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hd-burger:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.hd-menu {
border-top: 1px solid var(--line);
background: var(--bg);
padding: 6px 20px 14px;
max-height: calc(100vh - 58px); overflow-y: auto;
}
.hd-menu a {
display: block; padding: 13px 2px; font-size: 16px; font-weight: 600;
color: var(--ink); border-bottom: 1px solid var(--line);
}
.hd-menu a:last-child { border-bottom: 0; }
.hd-menu a:active { color: var(--terra); }
.hd-menu .hd-menu-b { color: var(--terra); }
/* 넓은 화면에서는 가로 메뉴만, 좁은 화면에서는 여는 목차만 */
@media (min-width: 860px) {
.hd-nav { display: flex; }
.hd-burger { display: none; }
.hd-menu { display: none !important; }
}
/* 버튼이 auth 단추보다 앞에 오지 않게 (auth 가 margin-left:auto 를 씁니다) */
@media (max-width: 859px) {
.hd-auth { margin-left: 8px; }
.btn-login { margin-left: 0; }
}
/* ── 히어로 ───────────────────────────────────────── */
.hero {
padding: clamp(40px, 9vw, 84px) 0 clamp(34px, 7vw, 64px);
/* 오른쪽 위는 버건디의 연한 톤, 왼쪽 아래는 보조색(자주)의 연한 톤.
예전에는 왼쪽 아래가 테라코타 시절의 탄색 #ece1d3 라 화면 아래쪽만
누렇게 번져 로그인 화면(로즈 한 겹)과 이어지지 않았습니다.
두 값은 app.css t-terra 의 --accent-soft · --accent2-soft 와 같습니다. */
background:
radial-gradient(1200px 500px at 85% -10%, #F6E7E9 0%, transparent 60%),
radial-gradient(900px 420px at -10% 110%, #EFECF1 0%, transparent 55%),
var(--bg);
text-align: center;
}
.hero-kicker {
margin: 0 0 10px; font-weight: 700; color: var(--terra);
font-size: clamp(13px, 3.4vw, 15px); letter-spacing: .02em;
}
.hero h1 {
margin: 0 0 16px; font-size: clamp(27px, 7.1vw, 46px); line-height: 1.28;
letter-spacing: -.03em; font-weight: 800; text-wrap: balance;
}
.hero-sub {
margin: 0 auto 26px; max-width: 34em;
color: var(--sub); font-size: clamp(15px, 1.6vw, 18px);
}
/* 원장님: "수능 만점에서 미국 명문대까지 밑에 버튼 사이의 gap 을 좀 더
만들어줘. 너무 답답해 보여."
맞습니다. 첫 화면 설명("통합 미국영어교육 — …")을 빼면서 그 칸이 갖고
있던 아래 여백 26px 까지 같이 사라졌습니다. 남은 것은 윗 문단의 12px
뿐이라 글과 단추가 붙어 버렸습니다.
애플 지침의 "여백으로 묶고 나눈다" 를 따릅니다 — 글과 단추는 **다른
덩어리**이므로, 문단 사이(12px)보다 눈에 띄게 벌려야 합니다.
좁은 화면 30px, 넓은 화면 42px. */
.hero-cta {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin-top: clamp(30px, 5vw, 42px);
}
.btn-main {
display: inline-block; padding: 14px 26px; border-radius: 12px;
background: var(--terra); color: #fff; font-weight: 800; font-size: 16px;
border: 0; cursor: pointer;
box-shadow: 0 4px 14px rgba(139, 38, 53, .3);
}
.btn-main:hover { background: var(--terra-dark); }
.btn-main.wide { width: 100%; }
.btn-sub {
display: inline-block; padding: 14px 26px; border-radius: 12px;
background: #fff; color: var(--teal); font-weight: 800; font-size: 16px;
border: 1.5px solid var(--teal);
}
.btn-sub:hover { background: var(--teal); color: #fff; }
/* 원장님: "히어로의 클래스 trust 를 히어로 밑으로 배치해줘."
사진 밖으로 나오면서 사진 위용 색(검은 유리·흰 글씨)은 모두 지웠습니다.
이제 아래 기본 모양 — 흰 상자에 검은 글씨 — 이 그대로 쓰입니다. */
/* 원장님: "코너의 라운드를 0 으로. 애플의 컨셉같이. 배경을 3단계로
조금씩 톤업 다운. 마진은 적게 패딩은 좀더 크게."
애플 첫 화면의 타일 격자가 그렇습니다 — 모서리는 각지고, 타일마다
바탕색이 조금씩 다르고, 타일 사이는 가늘게 띄우되 타일 안은 넉넉합니다.
색이 칸을 나누니 테두리도 구분선도 필요 없습니다.
톤은 세 단계로 올렸다 내립니다. 첫 칸도 순백으로 두지 않습니다 —
바탕(흰색)과 같으면 그 자리만 타일이 빠진 것처럼 보입니다.
가장 진한 세 번째 자리에 학습혜택 칸이 옵니다. */
/* 원장님: "마진을 아래의 마진과 일관되게."
위아래를 같은 값으로 둡니다. 아래 꼭지가 제 여백을 따로 갖고 있어서,
여기서 더 벌릴 필요가 없습니다. */
.trustband { background: var(--bg); padding: var(--s2) 0; }
.trust {
list-style: none; margin: 0 auto; padding: 0;
display: grid; grid-template-columns: 1fr 1fr;
gap: 4px;
}
.trust li {
border: 0; border-radius: 0; overflow: hidden;
padding: 30px 14px 26px; font-size: 13px; color: var(--sub);
letter-spacing: -.012em; line-height: 1.55;
}
.trust li:nth-child(1) { background: #fbf7f6; } /* 1단계 — 가장 옅게 */
.trust li:nth-child(2) { background: #f5edeb; } /* 2단계 */
.trust li:nth-child(3) { background: #f0e2e5; } /* 3단계 — 가장 진하게 */
.trust li:nth-child(4) { background: #f5edeb; } /* 다시 2단계 */
/* 타일 머리글 — 애플 타일처럼 한눈에 읽히는 크기로. */
.trust b {
color: var(--ink); display: block; margin-bottom: 4px;
font-size: clamp(16px, 4.2vw, 19px); font-weight: 700;
letter-spacing: -.028em; line-height: 1.35; text-wrap: balance;
}
.trust span { display: block; font-size: 13px; color: var(--sub); }
/* 사진은 타일 바닥까지 꽉 채웁니다 — 애플 타일이 그렇습니다. 안쪽 여백을
음수 마진으로 되돌려 좌우 끝까지 뻗게 합니다. */
.trust li.trust-go img {
display: block; margin: 20px -14px 0;
width: calc(100% + 28px); max-width: none; /* 공통 규칙의 100% 제한을 풉니다 */
aspect-ratio: 1 / 1; object-fit: cover; object-position: center top;
height: auto; border: 0; border-radius: 0;
}
@media (min-width: 720px) {
.trust { grid-template-columns: repeat(4, 1fr); }
}
/* ── 사진 ─────────────────────────────────────────────
HTML 에 적어 둔 width·height 를 여기서 `height: auto` 로 풀어 줍니다.
브라우저는 두 값의 **비율**로 자리를 미리 잡아 두었다가 그림이 오면
그 자리를 채웁니다. 그래서 그림이 늦게 와도 아래 글이 안 밀립니다.
(안 적으면 그림이 뜨는 순간 읽던 줄이 통째로 내려갑니다 — CLS) */
.shot { margin: 0; }
.shot img {
display: block; width: 100%; height: auto;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--bg-alt); /* 그림이 오기 전 빈 자리의 색 */
}
.shot figcaption {
margin-top: 9px; font-size: 14px; color: var(--sub); text-align: center;
}
.shot figcaption b { color: var(--ink); }
/* 첫 화면 — 단추 아래. 그림자를 조금 더 줘서 앞으로 나와 보이게 */
.shot-hero { max-width: 820px; margin: 26px auto 0; }
.shot-hero img { box-shadow: 0 8px 28px rgba(36, 29, 31, .13); }
/* 꼭지 안에 두는 것 — 크면 읽던 글을 밀어냅니다. 480px 로 묶습니다 */
.shot-mid { max-width: 480px; margin: 0 auto 22px; }
/* 가로 띠.
🔴 예전에는 여기서 `aspect-ratio: 5/2` + `object-fit: cover` 로 잘랐는데,
원장님이 "너무 짤렸어" 하셨습니다. 맞습니다 — 세로가 긴 사진을 띠에
억지로 끼우느라 위아래를 37%나 잘라내고 있었습니다.
지금은 **파일 자체를 2:1 로 미리 잘라서** 올립니다. 그래서 여기서는
자를 일이 없습니다. 사진을 바꾸실 때도 2:1 로 주시면 그대로 나옵니다. */
.shot-band { margin: 2px 0 18px; }
/* ── 첫 화면 — 사진을 섹션 전체 배경으로 ─────────────
원장님: "첫 이미지를 섹션 전체에 배경으로 하고 어둡게 전체적으로
블랙을 40프로 넣어줘. 그리고 글씨를 하얀색으로."
🔴 어둠의 진하기는 `--scrim-in` · `--scrim-out` 두 곳에서만 정합니다.
이 값만 바꾸면 온 화면이 같이 바뀝니다 — 색을 여러 군데 적어 두면
나중에 한 곳을 꼭 빠뜨립니다.
원장님: "배경이 너무 어두운데 글자 주변만 75프로, 바깥 부분은 60프로로
그라데이션으로." 고르게 덮으면 글이 읽힐 만큼 어둡게 할 때 사진까지
같이 죽습니다. 글이 놓인 가운데만 진하게 덮고 가장자리는 풀어 주면,
**글은 읽히면서 사진도 삽니다.**
이 사진은 창문과 흰 벽이 많아 아주 밝습니다. 40% 로 해 보았더니
밝은 부분에서 흰 글씨 대비가 1.6:1 까지 떨어졌습니다(읽기 기준 4.5:1). */
.hero-bg {
/* 원장님: "히어로의 배경이 너무 어두워. 밝게 빼줘."
가운데와 가장자리를 따로 내렸습니다. 글은 가운데에만 있으므로,
가장자리를 많이 밝히면 **전체가 훨씬 환해 보이면서** 글은 그대로
읽힙니다.
가운데 75% → 66% 가장자리 60% → 38%
66% 로 정한 근거가 있습니다. 이 사진 위에서 흰 글씨 대비를 재면
66% 에서 4.51:1 이 나옵니다 — 읽기 기준(4.5:1)을 딱 넘는 자리입니다.
여기서 더 내리면(62% → 4.13) 기준 아래로 떨어집니다. */
--scrim-in: .66; /* 글자가 놓인 가운데 — 대비 4.51:1 */
--scrim-out: .38; /* 바깥 가장자리 — 글이 없어 사진을 살립니다 */
position: relative;
isolation: isolate; /* 아래 두 겹이 이 섹션 밖으로 새지 않게 */
background: #1a1113; /* 사진이 오기 전 어두운 바탕 */
text-align: center;
}
.hero-bgimg {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%;
object-fit: cover; object-position: center 42%;
}
/* 원장님: "모바일은 사진을 오른쪽 중앙으로 정렬해."
좁은 화면에서는 가로로 많이 잘려 나갑니다. 가운데를 기준으로 자르면
아이 **뒤통수**만 크게 남고, 정작 이 사진의 요점인 수업 화면이 밖으로
밀려납니다. 오른쪽에 붙이면 노트북 화면과 지구본이 살아남습니다. */
@media (max-width: 719px) {
.hero-bgimg { object-position: right center; }
}
/* 가운데는 --scrim-in 으로 꽉 차 있다가 45% 지점부터 풀려서 가장자리에서
--scrim-out 이 됩니다. 타원을 쓰는 까닭은 글 덩어리가 가로로 넓은
타원 모양이라, 네모로 자르면 모서리에서 경계가 보이기 때문입니다. */
.hero-bg::before {
content: ""; position: absolute; inset: 0; z-index: -1;
/* 첫 화면 글이 일곱 줄에서 네 줄로 줄었으니 어두운 가운데도 좁힙니다 —
넓게 두면 글이 없는 자리까지 덮어 사진이 죽습니다. */
background: radial-gradient(ellipse 66% 56% at 50% 44%,
rgb(0 0 0 / var(--scrim-in)) 0%,
rgb(0 0 0 / var(--scrim-in)) 45%,
rgb(0 0 0 / var(--scrim-out)) 100%);
}
/* 좁은 화면에서는 글이 섹션을 거의 다 채웁니다 — 그래서 진한 부분을
훨씬 넓게 잡습니다. 데스크톱 비율을 그대로 쓰면 글 아래쪽 네 칸이
옅은 데로 밀려나 안 읽힙니다. */
@media (max-width: 719px) {
.hero-bg::before {
background: radial-gradient(ellipse 120% 62% at 50% 44%,
rgb(0 0 0 / var(--scrim-in)) 0%,
rgb(0 0 0 / var(--scrim-in)) 58%,
rgb(0 0 0 / var(--scrim-out)) 100%);
}
}
/* 글씨를 하얗게.
그림자를 **두 겹** 겹칩니다. 어둠은 40% 로 두라고 하셨으니 배경은
그대로 두고, 글자 쪽에서 버티게 하는 방법입니다.
· 가까운 한 겹(2px) — 글자 획에 딱 붙어 테두리를 만듭니다
· 퍼지는 한 겹(18px) — 글자 뒤에만 옅은 그늘을 깔아 배경과 떼어 놓습니다
한 겹만 쓰면 굵은 획은 살아도 가는 획이 밝은 사진에 먹힙니다. */
.hero-bg .hero-kicker {
color: #FBDDE1;
text-shadow: 0 1px 2px rgb(0 0 0 / .8), 0 2px 14px rgb(0 0 0 / .75);
}
.hero-bg h1,
.hero-bg .hero-vow {
color: #fff;
text-shadow: 0 1px 2px rgb(0 0 0 / .78), 0 3px 18px rgb(0 0 0 / .8);
}
.hero-bg .hero-vow b { color: #fff; }
.hero-bg .hero-sub {
color: #fff;
text-shadow: 0 1px 2px rgb(0 0 0 / .82), 0 2px 16px rgb(0 0 0 / .78);
}
.hero-bg .hero-sub b { color: #fff; }
/* 흰 단추는 어두운 사진 위에서 너무 튑니다 — 유리처럼 비치게 */
.hero-bg .btn-sub {
background: rgb(255 255 255 / .14); color: #fff;
border-color: rgb(255 255 255 / .55);
backdrop-filter: blur(6px);
}
.hero-bg .btn-sub:hover { background: #fff; color: var(--teal-dark); }
/* 네 칸도 같이 — 흰 상자에 검은 글씨를 두면 여기만 낮처럼 보입니다.
🔴 **흰 유리가 아니라 검은 유리**입니다. 흰색을 옅게 깔면 밝은 사진
위에서는 더 밝아져 흰 글씨가 묻힙니다. 검은색을 깔면 뒤가 무엇이든
어두워져서 글씨가 늘 읽힙니다. 처음에 흰 유리로 했다가
"강사 더보기" 가 안 보여서 바꿨습니다. */
/* ── 사진을 배경으로, 글자를 그 위에 ──────────────────
원장님: "이미지를 배경으로 넣고 글자를 위에 올려줘."
`background-image` 로 하지 않고 진짜 `![]()
` 를 깔았습니다. 그래야
화면 크기에 따라 작은 파일을 줄 수 있고(srcset), 눈이 불편하신 분께
읽어 줄 설명(alt)도 붙고, 자리도 미리 잡힙니다. */
.phero {
position: relative; overflow: hidden;
border-radius: var(--radius);
margin: 0 0 var(--s5, 22px);
background: var(--teal-dark); /* 사진이 오기 전 어두운 바탕 */
isolation: isolate; /* 안쪽 층이 바깥과 안 섞이게 */
}
.phero img {
display: block; width: 100%; height: auto;
aspect-ratio: 4 / 3; object-fit: cover; /* 휴대폰 — 세로가 넉넉해야 글자가 들어갑니다 */
}
@media (min-width: 720px) { .phero img { aspect-ratio: 2 / 1; } }
/* 🔴 글자를 읽히게 하는 어둠. 이게 없으면 성조기의 **흰 줄무늬** 위에서
흰 글자가 사라집니다. 사진이 바뀌어도 글자는 늘 읽혀야 하므로,
사진의 밝기를 믿지 않고 여기서 한 겹 깝니다.
아래는 진하게 위로 갈수록 옅게 — 사진도 반쯤 살아 있습니다. */
.phero::after {
content: ""; position: absolute; inset: 0; z-index: 1;
/* 숫자 넉 줄이 제목 위로 들어오면서 글자 덩이가 높아졌습니다.
어둠도 그만큼 위까지 끌어올립니다 — 안 그러면 숫자가 성조기의
흰 줄무늬 위에 얹혀 사라집니다. */
background: linear-gradient(to top,
rgba(18, 10, 12, .92) 0%,
rgba(18, 10, 12, .86) 38%,
rgba(18, 10, 12, .70) 58%,
rgba(18, 10, 12, .28) 80%,
rgba(18, 10, 12, .05) 100%);
}
.phero-in {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: clamp(18px, 4vw, 34px);
}
.phero-eyebrow {
margin: 0 0 5px; font-weight: 700; letter-spacing: .01em;
font-size: clamp(12.5px, 1.5vw, 14px);
color: #F2C3CA; /* 옅은 로즈 — 어둠 위에서 대비 10:1 */
}
.sec .phero-in h2 {
margin: 0; color: #fff;
text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}
/* ── 공통 섹션 ────────────────────────────────────── */
.sec { padding: clamp(38px, 8vw, 72px) 0; }
/* ── B안: 띠마다 화면 한 장 ──────────────────────────
링글은 띠마다 오른쪽에 제품 화면을 답니다. "무엇을 사는지" 가 글보다
먼저 보이기 때문입니다.
🔴 다만 **모든 띠에 넣지 않습니다.** 사진이 설명을 대신하는 곳에만
넣습니다. 억지로 채우면 사진이 글을 가리고, 페이지만 무거워집니다.
지금 넣은 곳은 둘 — 수업 선택(1:1 과 그룹의 차이)과 원생 혜택(단어
진도가 실제로 쌓이는 화면)입니다. */
/* 수업 선택 — 1:1 과 그룹을 사진 두 장으로 견줍니다.
왼쪽 테두리 색은 아래 표의 칸 색과 같습니다(파랑 = 1:1, 자주 = 그룹).
사진과 표가 같은 색으로 이어져야 눈이 따라갑니다. */
.vs-pics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3, 12px); margin-bottom: var(--s4, 16px); }
.vs-pics figure { margin: 0; }
.vs-pics img {
display: block; width: 100%; height: auto;
border-radius: 12px; border: 1px solid var(--line);
background: var(--bg-alt);
}
.vs-pics figcaption {
display: flex; align-items: center; justify-content: center; gap: 5px;
margin-top: 7px; font-size: 12.5px; font-weight: 700;
}
.vs-pics figcaption .ic { width: 13px; height: 13px; }
.vs-pics .a figcaption { color: #1c5b91; }
.vs-pics .b figcaption { color: #a8325a; }
.vs-pics .a img { border-color: #bcd3e6; }
.vs-pics .b img { border-color: #e8bdcd; }
/* 원장님: "데스크탑 이미지를 가운데 정렬을 해줘."
폭을 640px 로 묶어 두기만 하고 가운데로 미는 말을 안 적어서, 넓은
화면에서 두 장이 왼쪽에 붙어 있었습니다. 아래 표(.vs)는 폭을 다
쓰는데 사진만 왼쪽에 몰려 세로선이 어긋나 보였습니다. */
@media (min-width: 720px) {
.vs-pics { max-width: 640px; margin-left: auto; margin-right: auto; }
}
/* 원생 혜택 — 학부모 앱 수강권 화면. 세로로 긴 그림이라 폭을 묶고,
위쪽만 보이게 잘라 둡니다. 다 보여 주면 이 칸이 수강료보다 커집니다. */
.perk-shot {
margin: var(--s4, 16px) 0 0; max-width: 280px;
border-radius: 12px; overflow: hidden;
border: 1px solid var(--line); background: var(--card);
}
.perk-shot img {
display: block; width: 100%; height: auto;
margin-bottom: -38%; /* 아래쪽을 접어 둡니다 */
-webkit-mask-image: linear-gradient(#000 58%, transparent 96%);
mask-image: linear-gradient(#000 58%, transparent 96%);
}
/* ── B안: 아래 고정 신청 바 ──────────────────────────
홈이 화면으로 열여섯 장입니다. 중간쯤에서 마음이 정해진 분이 신청하려면
맨 위나 맨 아래까지 가야 했습니다.
좁은 화면에서만 띄웁니다. 넓은 화면은 머리글이 늘 붙어 있어 위로 가는
길이 짧고, 화면 아래를 가리면 오히려 답답합니다.
`translateY` 로 밀어 두었다가 올립니다 — `display` 를 바꾸면 툭 나타나
눈에 거슬립니다. `env(safe-area-inset-bottom)` 은 아이폰 아래 가로줄에
단추가 가리지 않게 하는 것입니다. */
.stickcta { display: none; }
@media (max-width: 719px) {
.stickcta {
display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255, 255, 255, .95);
backdrop-filter: blur(8px);
border-top: 1px solid var(--line);
transform: translateY(110%);
transition: transform .3s cubic-bezier(.25, .8, .35, 1);
}
.stickcta.on { transform: translateY(0); }
.stickcta .btn-main { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .stickcta { transition: none; } }
/* ── B안: 꼭지마다 같은 리듬 ─────────────────────────
원장님이 시안 B(띠마다 한 가지씩)를 고르셨습니다. 링글이 쓰는 방식인데,
띠마다 **모양이 똑같아서** 첫 띠에서 눈이 리듬을 익히면 나머지는
훑기만 해도 읽힙니다.
링글은 띠마다 색 딱지에 글자를 넣지만, 원장님이 "문구와 내용은 바꾸지
말고" 하셨으므로 **새 글자를 만들지 않습니다.** 대신 제목 위에 짧은
색 막대를 둡니다 — 글자 없이도 "여기서 새 이야기가 시작된다" 가
읽힙니다.
색은 버건디 하나입니다. 꼭지마다 다른 색을 쓰면 화려해 보이지만,
그러면 색으로 **무엇이 중요한지** 를 말할 수 없게 됩니다
(애플 지침 · 링글 · 스픽이 모두 강조색 하나만 씁니다).
`.wrap > h2` 로 **바로 아래 자식**만 고릅니다 — 합격 축하 꼭지의 제목은
사진 위에 얹혀 있어서(`.phero-in` 안) 여기 걸리지 않습니다. 사진 위에
막대까지 얹으면 어수선합니다. */
/* 🔴 `>` 하나만 쓰면 '영어에 날개를 달자' 가 빠집니다 — 그 제목만
`.h2birds`(새가 오가는 상자) 안에 들어 있습니다. 두 자리를 다 적습니다.
합격 축하의 제목은 사진 위(.phero-in)라 여기 걸리지 않습니다 — 사진
위에 막대까지 얹으면 어수선합니다. */
.sec .wrap > h2::before,
.sec .wrap > .h2birds > h2::before {
content: ""; display: block;
width: 28px; height: 3px; border-radius: 2px;
background: var(--terra); margin: 0 auto 14px; /* 가운데 정렬 */
}
/* ── 제목을 가운데로, 강조는 색으로 ───────────────────
원장님: "타이틀들을 가운데 정렬로", "링글과 애플과 같이 타이틀에
강조 부분의 색상을 바꾸자."
링글은 제목 한 덩이 안에서 **핵심 낱말만 보라색**으로 칠합니다
("꿈꾸던 커리어와 <보라>영어 실력을 만드는 영어 학습").
눈이 그 낱말에 먼저 가고, 나머지는 따라 읽힙니다.
우리는 버건디를 씁니다 — 강조색은 하나여야 하니까요. `` 으로
감싸고 기울임은 끕니다(기울인 한글은 읽기 나쁩니다). */
.sec .wrap h2 { text-align: center; }
/* 좁은 화면에서만 줄을 바꾸는 줄바꿈 — 넓은 화면에서는 꺼 둡니다 */
@media (min-width: 720px) { .br-m { display: none; } }
.sec .wrap h2 em { font-style: normal; color: var(--terra); }
.sec .wrap > .sec-eyebrow,
.sec .wrap > .sec-lead {
text-align: center;
margin-left: auto; margin-right: auto;
}
.sec.alt { background: var(--bg-alt); }
.sec h2 {
margin: 0 0 12px; font-size: clamp(21px, 5.2vw, 30px); letter-spacing: -.03em;
font-weight: 800; line-height: 1.32; text-wrap: balance;
}
.sec-lead { margin: 0 0 22px; color: var(--sub); max-width: 38em;
font-size: clamp(14.5px, 1.6vw, 16px); }
.cards { display: grid; gap: 14px; }
.card {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
/* 카드 그림. 브랜드색 동그라미 안에 선 그림 하나.
currentColor 를 쓰기 때문에 색은 여기 한 줄만 바꾸면 그림까지 따라옵니다. */
.card-ic {
display: flex; align-items: center; justify-content: center;
width: 46px; height: 46px; margin-bottom: 14px;
border-radius: 14px;
background: var(--terra-soft, #F7E9EB);
color: var(--terra);
}
.card-ic svg { width: 25px; height: 25px; }
.card h3 { margin: 0 0 8px; font-size: 17px; }
.card p { margin: 0; color: var(--sub); font-size: 15px; }
@media (min-width: 720px) {
.cards.two { grid-template-columns: 1fr 1fr; }
.cards.three { grid-template-columns: 1fr 1fr 1fr; }
}
/* 과목 카드 — 왼쪽 색 띠로 과목을 구분합니다.
원장님: "과목별로 앞의 색이 달라지는데 그 안의 교재 색이 같아서
이상해 보여." 맞습니다 — 띠만 과목 색이고 안쪽은 전부 버건디라
따로 노는 두 색이 한 카드에 있었습니다.
그래서 과목마다 **색 한 벌**(--sj 진한색 · --sj-soft 옅은색)을 두고,
카드 안의 모든 강조가 그 한 벌만 씁니다. 색을 한 군데서 정하니
나중에 바꿀 때도 한 줄만 고치면 됩니다. */
.card.subj {
--sj: var(--teal); --sj-soft: #F1EEF2;
border-left: 5px solid var(--sj);
}
.card.subj.s0 { --sj: #146b60; --sj-soft: #E7F2F0; } /* 스피킹 — 초록 */
.card.subj.s1 { --sj: #1c5b91; --sj-soft: #E9F1F8; }
.card.subj.s2 { --sj: #4a6a1e; --sj-soft: #EFF3E7; }
.card.subj.s3 { --sj: #9a5410; --sj-soft: #F8EFE4; } /* 미국교과 — 호박 */
.card.subj.s4 { --sj: #5a4bb0; --sj-soft: #EDEBF7; } /* 토플 — 보라 */
.card.subj.s5 { --sj: #a8325a; --sj-soft: #FAEAF0; } /* 주니어토플 — 자주 */
.level-note {
margin-top: 22px; background: var(--card); border: 1px dashed var(--teal);
border-radius: var(--radius); padding: 20px 22px;
}
.level-note h3 { margin: 0 0 6px; font-size: 16px; color: var(--teal); }
.level-note p { margin: 0; color: var(--sub); font-size: 15px; }
/* ── 교재 ─────────────────────────────────────────── */
.books { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.books li {
background: var(--card); border: 1px solid var(--line);
border-radius: 10px; padding: 14px 18px; font-size: 15px; color: var(--sub);
}
.books b { color: var(--ink); margin-right: 6px; }
@media (min-width: 720px) { .books { grid-template-columns: 1fr 1fr; } }
/* ── 수강 절차 ────────────────────────────────────── */
/* 원장님: "카드로 하지 말고 타임라인으로 만들어서 다이어그램처럼 만들어줘."
예전에는 카드 열 장을 두 칸 격자에 늘어놓았습니다. 그러면 읽는 순서가
①② / ③④ 로 꺾여서 **차례가 눈에 안 들어옵니다.** 절차는 순서가 전부라
위에서 아래로 내려가는 한 줄기로 그립니다. */
/* 1:1 · 그룹 고르개 — 알약 두 개. 예전에는 CSS 도 자바스크립트도 없어서
브라우저 기본 단추로 보였고 **눌러도 아무 일이 없었습니다.** */
/* ── 수강 절차 큰 흐름 넷 ─────────────────────────────
넓은 화면에서는 가로로 늘어서고 사이에 화살표(▸)가 생깁니다.
휴대폰에서는 세로로 쌓이고 화살표가 아래(▾)를 가리킵니다.
화살표는 글자라서 그림 파일이 하나도 안 늘어납니다. */
.flow {
list-style: none; margin: 0 0 20px; padding: 0;
display: grid; gap: 18px 10px;
}
/* 좁은 화면에서는 아이콘을 **왼쪽에** 두고 가로로 눕힙니다. 세로로 쌓으면
칸 하나가 300px 을 넘어서, 네 칸을 보는 데만 화면을 몇 번씩 쓸어내리게
됩니다. 넓은 화면에서는 아래에서 다시 세로로 돌립니다. */
.flow li {
position: relative;
background: var(--card); border: 1px solid var(--line);
border-radius: 12px; padding: 14px 15px;
box-shadow: var(--shadow);
display: grid; grid-template-columns: auto 1fr; gap: 3px 13px;
align-items: center;
}
.flow li b { grid-column: 2; align-self: end; }
.flow-d { grid-column: 2; align-self: start; }
.flow-ic { grid-row: 1 / span 2; }
/* 사이 화살표 — 마지막 칸 뒤에는 안 붙입니다 */
.flow li::after {
content: "▾";
position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
color: var(--terra); font-size: 13px; line-height: 1;
}
.flow li:last-child::after { content: none; }
.flow-ic {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: 12px; background: var(--terra-soft); color: var(--terra);
flex: none;
}
.flow-ic svg { width: 22px; height: 22px; }
.flow li b { font-size: 15.5px; }
.flow-d { color: var(--sub); font-size: 13.5px; line-height: 1.6; }
/* 무료 딱지 — 학부모가 가장 먼저 궁금해하시는 것이라 눈에 띄게 */
.flow-free {
position: absolute; top: 12px; right: 12px;
background: var(--terra); color: #fff;
font-size: 11.5px; font-weight: 700; letter-spacing: -.01em;
padding: 4px 9px; border-radius: 999px;
}
@media (min-width: 860px) {
.flow { grid-template-columns: repeat(4, 1fr); gap: 10px 26px; }
.flow li {
display: flex; flex-direction: column; align-items: flex-start;
padding: 20px 18px 18px; border-radius: var(--radius);
}
/* 좁은 화면에서 준 격자 자리·정렬을 되돌립니다. 세로 flex 에서
align-self:end 는 **오른쪽 끝**을 뜻해서 제목이 밀려납니다. */
.flow li b, .flow-d, .flow-ic { align-self: flex-start; }
.flow-ic { width: 44px; height: 44px; margin-bottom: 13px; }
.flow-ic svg { width: 24px; height: 24px; }
.flow li b { font-size: 16px; margin-bottom: 5px; }
.flow-d { font-size: 14px; line-height: 1.65; }
.flow li::after {
content: "▸";
left: auto; right: -20px; bottom: auto; top: 50%;
transform: translateY(-50%); font-size: 17px;
}
}
.wayswitch {
display: inline-flex; gap: 4px; margin: 0 0 26px;
background: var(--bg-alt); border: 1px solid var(--line);
border-radius: 999px; padding: 4px;
}
.way {
appearance: none; border: 0; cursor: pointer;
background: transparent; color: var(--sub);
font: 700 14.5px/1 inherit; padding: 10px 20px; border-radius: 999px;
transition: background .15s, color .15s;
}
.way:hover { color: var(--ink); }
.way.on { background: var(--terra); color: #fff; }
.way:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
/* 타임라인 본체 */
.steps {
list-style: none; counter-reset: step; margin: 0; padding: 0;
position: relative;
}
/* ⚠ display 를 주는 순간 브라우저 기본 [hidden] 규칙을 이깁니다.
이 한 줄이 없어서 1:1 과 그룹 목록이 **동시에** 나왔습니다. */
.steps[hidden] { display: none; }
.steps li {
counter-increment: step; position: relative;
padding: 0 0 30px 60px;
}
/* 세로 줄기 — 마지막 칸에서는 끊습니다 */
.steps li::after {
content: ""; position: absolute; left: 19px; top: 34px; bottom: -4px;
width: 2px; background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
/* 줄기 위의 번호 마디.
원장님: "회원가입의 숫자 사이의 선의 depth 가 위에 되어 있어. 뒤로 보내줘."
🔴 `::before`(번호)와 `::after`(세로 선)는 **같은 층**입니다. 층이 같으면
나중에 적힌 쪽이 위에 그려지는데, 선이 `::after` 라 번호 위로 올라왔습니다.
줄기는 번호 아래 34px 에서 시작해 동그라미 밑자락(40px)을 6px 물고
들어가므로, 그 6px 이 번호 위에 회색 선으로 보였습니다.
번호에 `z-index: 1` 을 주어 **선보다 앞으로** 꺼냅니다. 줄기를 아예
동그라미 아래에서 시작하게 할 수도 있지만, 그러면 둘 사이가 떠서
선이 끊겨 보입니다 — 물리되 가려지는 편이 자연스럽습니다.
둘레의 흰 테(box-shadow)도 이제 제 몫을 합니다. 번호가 앞으로 나오면서
그 테가 지나가는 선을 깨끗이 지웁니다. */
.steps li::before {
content: counter(step);
position: absolute; left: 0; top: 0; z-index: 1;
width: 40px; height: 40px; border-radius: 50%;
background: var(--card); color: var(--terra);
border: 2px solid var(--terra);
font-weight: 800; font-size: 15px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 5px var(--bg); /* 줄기를 마디 뒤에서 끊어 보이게 */
}
/* 마지막 단계(수업 시작)는 채워서 '도착' 으로 읽히게 */
.steps li:last-child::before { background: var(--terra); color: #fff; }
.steps h3 {
margin: 0 0 6px; font-size: 16.5px; line-height: 1.45;
padding-top: 8px;
}
.steps p { margin: 0; color: var(--sub); font-size: 15px; }
.steps-note {
margin: 26px 0 0; padding: 14px 18px; border-radius: 10px;
background: var(--ok-bg); color: var(--ok-ink); font-size: 15px;
}
/* 넓은 화면에서도 **한 줄기**로 둡니다 — 두 칸으로 나누면 차례가 꺾입니다.
대신 글줄이 너무 길어지지 않게 폭만 잡아 줍니다. */
@media (min-width: 860px) {
.steps { max-width: 720px; }
.steps li { padding-left: 68px; padding-bottom: 34px; }
.steps h3 { font-size: 17.5px; }
}
/* ── FAQ ──────────────────────────────────────────── */
#faq details {
background: var(--card); border: 1px solid var(--line);
border-radius: 10px; margin-bottom: 10px; padding: 0 18px;
}
#faq summary {
cursor: pointer; font-weight: 700; padding: 15px 0; font-size: 15px;
list-style: none; position: relative; padding-right: 26px;
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after {
content: "+"; position: absolute; right: 2px; top: 12px;
color: var(--terra); font-size: 20px; font-weight: 800;
}
#faq details[open] summary::after { content: "\2212"; }
#faq details p { margin: 0 0 16px; color: var(--sub); font-size: 15px; }
/* ── 신청 폼 ──────────────────────────────────────── */
.form-ok {
background: var(--ok-bg); color: var(--ok-ink);
border-radius: var(--radius); padding: 26px 22px; text-align: center;
font-size: 16px;
}
.form-err {
background: var(--err-bg); color: var(--err-ink);
border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 15px;
}
.apply-form {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); padding: 24px 20px; box-shadow: var(--shadow);
display: grid; gap: 16px;
}
.apply-form label { display: block; font-weight: 700; font-size: 14px; }
.apply-form input[type=text], .apply-form input[type=tel],
.apply-form select, .apply-form textarea {
display: block; width: 100%; margin-top: 6px;
padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px;
font: inherit; font-size: 16px; background: #fff; color: var(--ink);
}
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus {
outline: none; border-color: var(--teal);
}
.apply-form .req { color: var(--terra); }
.grid2 { display: grid; gap: 16px; }
@media (min-width: 560px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.kind { border: 0; margin: 0; padding: 0; }
.kind legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.kind label {
display: flex; align-items: center; gap: 8px;
border: 1.5px solid var(--line); border-radius: 10px;
padding: 11px 14px; margin-bottom: 8px; cursor: pointer;
font-weight: 600; font-size: 15px;
}
.kind label:has(input:checked) {
border-color: var(--terra); background: #f9eef0; color: var(--terra-dark);
}
.kind input { accent-color: var(--terra); }
/* 영어공부 참고사항 — 체크 4개를 두 칸으로 */
.sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-grid label { margin-bottom: 0; }
.form-note { margin: 0; text-align: center; color: var(--sub); font-size: 13px; }
/* 스팸 봇 함정 칸 — 화면 밖으로 밀어 사람에게는 안 보입니다 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
/* ── 신청 카드 셋 ─────────────────────────────────────
레벨테스트 · 수강신청 · 상담. 카드는 무엇을 할 수 있는지만 말하고
단추를 누르면 그 일에 맞는 팝업만 열립니다. */
.act-cards { margin-top: 26px; }
.act { display: flex; flex-direction: column; }
.act-tag {
align-self: flex-start; margin-bottom: 10px;
padding: 4px 11px; border-radius: 999px;
background: #f6e7e9; color: var(--terra-dark);
font-size: 12px; font-weight: 700; letter-spacing: .01em;
}
.act h3 { font-size: 19px; }
.act p { flex: 1; line-height: 1.7; margin-bottom: 18px; }
.act-btn {
display: block; text-align: center;
padding: 13px 18px; border-radius: 999px;
background: var(--terra); color: #fff;
font-weight: 700; font-size: 15px;
}
.act-btn:hover { background: var(--terra-dark); color: #fff; }
/* ── 팝업 ─────────────────────────────────────────────