/* =========================================================
참빛북클럽 · 원장님 운영 가이드
Grid : 12 col / max 1200 / gutter 24 / margin 32
Space : 8px base
Type : Pretendard, min 18px, 700 / 600 / 400
Color : white + ink + 4 pastel tints (당근 방식)
========================================================= */
:root{
--white:#ffffff;
--surface:#f5f5f3;
--ink:#111213; /* 본문 · 제목 대비 17.4:1 */
--ink-2:#4a4c50; /* 보조 본문 대비 8.6:1 */
--ink-3:#71747a; /* 라벨 · 캡션 대비 4.7:1 (AA 통과) */
--ink-4:#a8aab0; /* 장식 전용 — 글자 금지 대비 2.4:1 */
--line:#e4e4e1;
--line-2:#c9c9c5;
/* 포커스 링 : 한 가지 규격으로 통일합니다 */
--focus:#ff9a50;
--focus-w:2px;
--focus-o:3px;
/* 파스텔 틴트 */
--tint-green:#f1f7ea;
--tint-blue:#ecf0fd;
--tint-teal:#eef6f5;
--tint-pink:#f9f0f6;
--tint-sand:#f6f2ea;
--s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
--s6:48px; --s7:64px; --s8:80px; --s9:96px; --s10:120px;
--s11:160px;
--maxw:1200px;
--gutter:24px;
--margin:32px;
--radius:16px;
}
*{ box-sizing:border-box; }
html{ background:var(--white); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
margin:0;
background:var(--white);
color:var(--ink);
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;
font-size:18px;
font-weight:400;
line-height:1.8;
word-break:keep-all;
overflow-wrap:break-word;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{ margin:0; font-weight:700; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
/* ---------- grid ---------- */
.container{ max-width:var(--maxw); margin:0 auto; padding-left:var(--margin); padding-right:var(--margin); }
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); row-gap:0; }
/* ---------- type ---------- */
.display-1{ font-size:clamp(2.4rem,4.4vw,3.75rem); font-weight:700; line-height:1.32; letter-spacing:-0.025em; }
.display-2{ font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:700; line-height:1.4; letter-spacing:-0.02em; }
.title{ font-size:26px; font-weight:700; line-height:1.45; letter-spacing:-0.015em; }
.lede{ font-size:20px; font-weight:400; line-height:1.85; color:var(--ink-2); }
.label{ font-size:18px; font-weight:600; letter-spacing:0.02em; line-height:1.5; color:var(--ink-3); }
/* 번호 배지 : 검은 원 안에 흰 숫자 (원 아래 라벨) */
.label--stacked{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
}
.label--stacked .num-badge{ margin-right:0; }
/* 주도 칩 : 블록마다 "누가 주도하는 단계인지"를 상단에서 바로 보여줍니다 */
.lead-row{ display:flex; align-items:center; gap:12px; }
.lead-chip{
display:inline-flex; align-items:center; gap:8px;
height:34px; padding:0 14px 0 3px;
border-radius:999px;
background:var(--white);
border:1px solid var(--line);
line-height:1;
}
.lead-chip b{ font-size:16px; font-weight:600; letter-spacing:-0.01em; color:var(--ink-3); }
.lead-chip img{
width:28px; height:28px; border-radius:50%;
object-fit:cover; object-position:50% 12%;
background:var(--surface);
flex:0 0 auto;
}
.lead-chip--teacher,
.lead-chip--together{ background:#fff4ec; border-color:#ffd9bd; }
.lead-chip--teacher b,
.lead-chip--together b{ color:#e07a2f; }
.lead-chip--teacher img,
.lead-chip--together img{ background:#ffe8d6; }
@media (max-width:768px){
.lead-row{ gap:10px; }
.lead-chip{ height:32px; padding:0 13px 0 3px; }
.lead-chip b{ font-size:14px; }
.lead-chip img{ width:24px; height:24px; }
}
.num-badge{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px; height:28px;
border-radius:50%;
background:var(--ink);
color:var(--white);
font-size:16px;
font-weight:700;
line-height:1;
letter-spacing:0;
font-variant-numeric:tabular-nums;
margin-right:10px;
vertical-align:middle;
}
/* ---------- brand ---------- */
/* ---------- GNB : new.bookclubs.co.kr 운영 헤더 그대로 ----------
높이 113 · inner max 1200 · 로고 173×46 · nav gap 59 · 들어가기 171×50 radius 100 #0b0b0b */
.gnb{ background:#fff; }
.gnb-inner{
display:flex; align-items:center; justify-content:space-between;
height:113px;
}
.gnb-logo{ display:block; flex:0 0 auto; }
.gnb-logo img{ display:block; width:173px; height:46px; object-fit:contain; }
.gnb-nav{ display:flex; align-items:center; gap:59px; }
.gnb-link{
font-size:16px; line-height:1.5; white-space:nowrap;
font-weight:500; color:#6b6b6b;
transition:color .15s ease;
}
.gnb-link--home{ font-weight:700; color:#252432; }
.gnb-link:hover{ color:#111213; }
.gnb-enter{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
flex:0 0 auto;
height:50px; padding:0 35px;
border-radius:100px;
background:#0b0b0b; color:#fff;
font-size:16px; font-weight:800; line-height:1; white-space:nowrap;
transition:background .15s ease;
}
.gnb-enter:hover{ background:#2a2a2a; }
/* 태블릿 이하 : nav 간격을 줄이고, 모바일에서는 로고+버튼 아래로 링크를 내립니다 */
@media (max-width:1024px){
.gnb-nav{ gap:32px; }
.gnb-inner{ height:92px; }
}
@media (max-width:768px){
.gnb-inner{ height:auto; flex-wrap:wrap; row-gap:14px; padding-top:16px; padding-bottom:16px; }
.gnb-logo img{ width:150px; height:40px; }
.gnb-nav{ order:3; width:100%; gap:24px; }
.gnb-enter{ height:44px; padding:0 22px; font-size:15px; }
}
/* ---------- section ---------- */
.section{ padding-top:var(--s11); }
/* SYSTEM 헤드라인 삭제 : 히어로 리드문 바로 아래에 주도 밴드가 붙습니다 */
#system .rail{ margin-top:0; }
/* HOW 도입부 : 바로 아래 1~6번 블록과 한 묶음으로 붙입니다 */
.section--howhead{ padding-bottom:0; }
.section--howhead + .stage1{ margin-top:var(--s6); }
/* 5번도 1~4번과 같은 그레이 패널로 : 같은 흐름의 콘텐츠임을 바로 보이게 */
.section--principles{ padding-top:56px; }
.section--principles .principle{
background:#f4f4f4;
border-radius:28px;
border-top:0;
padding:var(--s8) var(--s7) var(--s7);
}
.section--principles .principle:first-of-type{ margin-top:0; }
/* 5번 : 왼쪽 헤더 + 오른쪽 흰 카드 2단 */
.pr-head{ grid-column:1 / 7; align-self:start; }
.pr-head .display-2{ margin-top:var(--s2); }
.pr-head .sf-lede{ margin-top:var(--s3); font-size:20px; line-height:1.85; color:var(--ink-2); }
.pr-body{ grid-column:8 / 13; align-self:start; }
.pr-card{
background:var(--white);
border-radius:16px;
padding:var(--s4) var(--s4) var(--s5);
}
.pr-card .figure-caption{ margin-top:var(--s3); }
@media (max-width:900px){
.pr-head{ grid-column:1 / 13; }
.pr-body{ grid-column:1 / 13; margin-top:var(--s5); }
}
.section--principles .principle + .principle{ margin-top:56px; }
/* 종착점 구성을 5번 패널 안으로 (JS 가 노드를 옮깁니다) */
.section--principles .principle > .converge{
grid-column:1 / 13;
margin-top:var(--s7);
}
@media (max-width:768px){
.section--principles .principle > .converge{
margin-top:var(--s4);
margin-bottom:0;
align-items:start; /* 마지막 행이 늘어나 빈 공간이 생기던 것 제거 */
}
.section--principles .principle > .converge .converge-out{
align-self:start;
margin-bottom:0;
}
/* 포스터 아래 ~ CTA 사이 여백 제거 */
.section--principles .principle{ padding-bottom:0; }
.section--principles{ padding-bottom:0; }
.section--cta{ padding-top:var(--s3); }
}
/* DESTINATION 마감 문구 : 그레이 패널 마지막 칸에 중앙 정렬로 놓습니다.
여기서 흐름이 끝나므로 좌우 여백을 넓게 잡아 문장이 가운데로 모이게 합니다. */
.section--principles .principle > .cta-copy{
grid-column:2 / 12;
margin-top:50px; /* 40 + 10 */
padding-top:0;
padding-bottom:20px; /* 마지막 문장 아래 숨 고르는 여백 */
border-top:0;
text-align:center;
}
.section--principles .principle > .cta-copy .cta-label{
font-size:14px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
color:var(--ink-3);
}
.section--principles .principle > .cta-copy .cta-title{
margin-top:var(--s3);
font-size:clamp(1.8rem,3vw,2.4rem);
line-height:1.45;
word-break:keep-all;
}
@media (max-width:900px){
.section--principles .principle > .cta-copy{ grid-column:1 / 13; }
}
@media (max-width:768px){
.section--principles .principle > .cta-copy{
margin-top:34px; /* 24 + 10 */
padding-top:0;
padding-bottom:20px;
}
.section--principles .principle > .cta-copy .cta-label{ font-size:13px; }
.section--principles .principle > .cta-copy .cta-title{
margin-top:var(--s2);
font-size:24px; line-height:1.5;
}
}
/* 그레이 패널 위에서는 카드가 흰색이어야 보입니다 */
.section--principles .principle .in-card{
background:var(--white);
border-color:transparent;
}
/* ===== 마지막 CTA ===== */
.section--cta{ padding-top:var(--s7); padding-bottom:var(--s10); }
/* 마감 CTA : 왼쪽 문구 · 오른쪽 액션 (Notion·Stripe 마감 배너 방식) */
.cta-box{
grid-column:1 / 13;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
column-gap:var(--s7);
padding:0;
text-align:left;
}
.cta-label{
font-size:18px; font-weight:600; letter-spacing:0.02em;
color:var(--ink-3);
}
.cta-title{
margin-top:var(--s2);
font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:700;
line-height:1.4; letter-spacing:-0.02em; color:var(--ink);
}
.cta-lead{
margin-top:14px;
max-width:24em;
font-size:16px; line-height:1.75; color:var(--ink-3);
word-break:keep-all;
}
/* 버튼 두 개를 같은 폭으로 묶어 하나의 덩어리로 */
.cta-actions{
margin-top:0;
display:flex; flex-direction:column;
align-items:stretch; gap:8px;
}
.cta-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
min-width:214px; height:50px; padding:0 22px;
border-radius:999px;
font-size:16px; font-weight:700; letter-spacing:-0.01em; line-height:1;
white-space:nowrap;
transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cta-btn--primary{
background:#ff9a50; color:#fff;
border:1px solid transparent;
box-shadow:0 6px 16px rgba(255,154,80,0.30);
}
.cta-btn--primary:hover{
background:#e07a2f;
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(224,122,47,0.34);
}
.cta-btn--ghost{
background:#eceae6; color:var(--ink);
border:1px solid transparent;
box-shadow:none;
}
.cta-btn--ghost:hover{
background:#e2dfda;
transform:translateY(-2px);
}
/* 문의 블록 : 사용 가이드 페이지와 같은 규격 */
.cta-help{
grid-column:1 / 13;
margin-top:var(--s7);
padding-top:0;
border-top:0;
}
.cta-help-title{
font-size:22px; font-weight:700; line-height:1.4; letter-spacing:-0.015em;
color:var(--ink);
}
.cta-help-lead{
margin-top:12px;
font-size:16px; line-height:1.75; color:var(--ink-3);
word-break:keep-all;
}
.cta-help-grid{
margin-top:var(--s4);
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s2);
}
.help-card{
display:flex; align-items:center; gap:14px;
background:none;
border:1px solid var(--line);
border-radius:16px;
padding:18px 20px;
transition:border-color .15s ease, transform .15s ease;
}
.help-card:hover{ border-color:var(--ink); transform:translateY(-2px); }
.help-ico{
flex:0 0 auto;
width:44px; height:44px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:12px;
}
.help-ico svg{ width:22px; height:22px; }
.help-ico--kakao{ background:#fae100; }
.help-ico--tel{ background:var(--ink); }
/* 활용 시나리오 3종
연한 틴트 하나를 셋에 돌려 쓰면 아이콘이 배경처럼 읽힙니다.
카드마다 고유색을 꽉 채우고, 같은 색을 hover 테두리까지 잇습니다. */
.cta-help-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.help-card--sc{ --sc:var(--ink); }
.help-card--sc:nth-of-type(1){ --sc:#ff9a50; } /* 수업용 · 브랜드 포인트 */
.help-card--sc:nth-of-type(2){ --sc:#111213; } /* 숙제용 · 잉크 */
.help-card--sc:nth-of-type(3){ --sc:#4f7a72; } /* 랩실용 · 딥 틸 */
.help-ico--sc{ background:var(--sc); color:#fff; }
.help-ico--sc svg{ width:24px; height:24px; }
.help-card--sc:hover{ border-color:var(--sc); }
.help-card--sc:hover .help-go{ color:var(--sc); }
/* 문의는 박스 대신 한 줄로 — 카드가 연속으로 쌓이지 않게 합니다 */
.cta-contact{
margin-top:var(--s4);
font-size:15px; line-height:1.7; color:var(--ink-3);
}
.cta-contact a{
color:var(--ink); font-weight:600;
border-bottom:1px solid var(--line-2);
padding-bottom:1px;
transition:border-color .15s ease;
}
.cta-contact a:hover{ border-color:var(--ink); }
.cta-contact i{
display:inline-block; width:1px; height:11px;
margin:0 10px -1px;
background:var(--line-2);
}
.help-txt{ flex:1 1 auto; min-width:0; }
.help-txt em{
display:block;
font-style:normal; font-size:14px; font-weight:600; color:var(--ink-3);
}
.help-txt b{
display:block; margin-top:4px;
font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--ink);
}
.help-go{
flex:0 0 auto;
font-size:22px; color:var(--ink-3); line-height:1;
transition:transform .15s ease;
}
.help-card:hover .help-go{ transform:translateX(3px); }
.cta-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.cta-btn .arrow{ display:inline-block; transition:transform .15s ease; }
.cta-btn:hover .arrow{ transform:translateX(4px); }
@media (max-width:900px){
.cta-box{
grid-template-columns:1fr;
row-gap:var(--s4);
padding:0;
}
.cta-lead{ max-width:none; }
.cta-btn{ min-width:0; width:100%; }
}
@media (max-width:768px){
.section--cta{ padding-top:var(--s2); padding-bottom:var(--s6); }
.cta-box{ padding:0; row-gap:var(--s4); }
.cta-label{ font-size:13px; } /* 한글 가독 하한 13px */
.cta-title{ margin-top:10px; }
.cta-lead{ margin-top:12px; font-size:15px; line-height:1.7; }
.cta-btn{ height:54px; padding:0 20px; font-size:16px; }
.cta-help{ margin-top:var(--s6); padding-top:0; }
.cta-help-title{ font-size:19px; }
.cta-help-lead{ margin-top:10px; font-size:15px; }
.cta-help-grid,
.cta-help-grid--3{ margin-top:var(--s3); grid-template-columns:1fr; }
.help-card{ padding:16px; }
.help-txt b{ font-size:17px; }
.cta-contact{ margin-top:var(--s3); font-size:14px; }
.cta-contact i{ display:none; }
.cta-contact a{ display:block; width:max-content; margin-top:6px; }
}
/* 종착점 섹션은 converge 를 담고만 있고 (JS 가 5번으로 옮깁니다) 화면에는 남지 않습니다 */
.section--dest{ padding:0; }
.section-head{ grid-column:1 / 12; }
.section-head .display-2{ margin-top:var(--s2); }
.section-head .lede{ margin-top:var(--s3); max-width:none; }
/* ---------- 1. hero ---------- */
.hero{ padding-top:var(--s6); } /* 64 → 48 : 히어로를 위로 당깁니다 */
.hero-copy{ grid-column:1 / 8; }
/* 눈썹 라벨 : 「참빛북클럽은」을 헤드라인에서 분리했습니다.
─ 6자짜리 첫 줄이 만들던 오른쪽 위 L자 공백이 사라집니다
─ 헤드라인이 14자/11자 두 줄이 되어 끝선이 쐐기가 됩니다
─ 왼쪽 칼럼에 상단 앵커가 생겨 오른쪽 리드문과 높이가 맞습니다 */
.hero-eyebrow{
margin:0 0 var(--s2);
font-size:40px; font-weight:300;
letter-spacing:-0.02em; line-height:1.3;
color:var(--ink); /* 제목과 같은 잉크 — 굵기(300)로만 위계를 만듭니다 */
}
.hero-copy .display-1{ margin-top:0; }
/* 1단 히어로
눈썹 라벨 → 제목 → 리드문이 하나의 왼쪽 축 위에 쌓입니다.
2단 편집형보다 축이 하나라 시원하고, 아래 캐릭터 밴드·레일 01~05 와도
같은 선에서 시작해 첫 화면 전체가 한 덩어리로 읽힙니다. */
.hero .lede{
grid-column:1 / 13;
margin-top:var(--s5);
max-width:none; /* 줄바꿈은 br.pc 로 직접 잡습니다 (2줄) */
font-size:18px;
font-weight:300; /* Light — 「참빛북클럽은」과 같은 굵기로 묶습니다 */
line-height:1.8;
color:var(--ink-3); /* #71747a — 라벨·캡션 그레이 (대비 4.7:1, AA 통과) */
text-wrap:pretty;
}
/* ---------- 2. 리딩 1단계 (틴트 패널) ---------- */
/* 순서 변경 : SYSTEM(전체 흐름) → 리딩 1단계
· SYSTEM 은 히어로 바로 다음이라 섹션 간격을 좁게
· 리딩 1단계는 일반 섹션 간격 */
#system{ padding-top:var(--s8); }
.stage1{ margin-top:56px; } /* 카드 사이 간격 : 160 → 56 (1/3) */
.stage1-panel{
grid-column:1 / 13;
background:#f4f4f4;
border-radius:28px;
padding:var(--s8) var(--s7) var(--s7); /* 상단 96 → 80 */
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter);
}
.stage1-copy{ grid-column:1 / 6; align-self:center; }
.stage1-copy .display-2{ margin-top:var(--s2); }
.stage1-copy p{ margin-top:var(--s4); font-size:20px; line-height:1.85; color:var(--ink-2); max-width:26em; }
/* 1번 라벨은 본문 문단 규칙(.stage1-copy p)에 잡혀 20px·ink-2 로 렌더링되고 있었습니다.
2~5번과 동일하게 .label 규격으로 되돌립니다. */
.stage1-copy p.label{
margin-top:0;
font-size:18px; font-weight:600; letter-spacing:0.02em; line-height:1.5;
color:var(--ink-3);
max-width:none;
}
/* 강조 : 배지가 아니라 타이포그래피로 */
.emphasis{
margin-top:var(--s5);
padding-top:var(--s3);
border-top:2px solid var(--ink);
}
.emphasis p{
margin-top:0;
font-size:22px;
font-weight:700;
line-height:1.6;
letter-spacing:-0.015em;
color:var(--ink);
max-width:20em;
}
.emphasis em{
font-style:normal;
background:linear-gradient(to top, rgba(17,18,19,0.14) 0 36%, transparent 36%);
padding:0 2px;
}
/* 영상 (당근 방식 : 우측 라운드 미디어 · 약 490×612) */
.stage1-media{ grid-column:7 / 13; align-self:center; }
.video-frame{
position:relative;
border-radius:20px;
overflow:hidden;
aspect-ratio:4 / 5; /* 영상도 4:5(720×900)로 잘라 넣어 여백 없이 채워집니다 */
background:
radial-gradient(120% 90% at 30% 20%, #ffffff 0%, #e9edf9 55%, #dfe5f5 100%);
}
.video-frame video{
width:100%; height:100%;
object-fit:cover;
display:block;
}
/* 본문 안 강조 */
.stage1-copy p strong{ font-weight:700; color:var(--ink); }
/* ① 블록의 질문 말풍선 */
.qbox{ grid-column:1 / 13; margin-top:calc(var(--s8) - 5px); }
.qbox .qlead{
font-size:28px;
font-weight:300;
line-height:1.5;
letter-spacing:-0.01em;
color:#3f4a63; /* 패널(#ecf0fd)과 같은 계열의 딥 블루그레이 */
text-align:center;
}
.qlist{
margin-top:var(--s4);
margin-bottom:20px; /* 아이콘이 걸치는 만큼 */
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--s3);
}
.qlist li{
position:relative;
display:flex;
align-items:center; /* 말풍선 높이가 같아도 글이 가운데 놓이도록 */
justify-content:center;
background:var(--white);
border-radius:16px;
padding:22px var(--s3) 30px;
min-height:100%;
font-size:18px;
line-height:1.6;
text-align:center;
color:var(--ink-2); /* 본문 그레이 (한 단계 낮은 톤) */
box-shadow:0 6px 16px rgba(17,18,19,0.05);
}
/* 말풍선 꼬리 (아래쪽) — 요약 바 알약과 같은 실루엣(오목 플레어 + 둥근 끝) */
.qlist li::after{
content:"";
position:absolute;
bottom:-8px;
left:36%;
transform:translateX(-50%);
width:24px; height:9.5px;
border:0;
background:url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* 말풍선 아이콘 : 꼬리 옆, 아래 모서리에 걸칩니다 (기본/오버 두 장을 겹쳐 교차) */
.qlist .qicon{
position:absolute;
bottom:-20px;
left:52%;
width:40px;
height:40px;
object-fit:contain;
z-index:1;
transform:translateX(-50%);
transition:opacity .22s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.qlist .qicon--on{ opacity:0; }
.qlist li:hover .qicon--off{ opacity:0; transform:translateX(-50%) scale(.9); }
.qlist li:hover .qicon--on{ opacity:1; transform:translateX(-50%) scale(1.12) rotate(-4deg); }
/* 말풍선 자체도 아주 살짝 반응합니다 */
.qlist li{ transition:transform .22s ease, box-shadow .22s ease; }
.qlist li:hover{
transform:translateY(-3px);
box-shadow:0 12px 24px rgba(17,18,19,0.08);
}
/* ---------- 3. 주도 밴드 (캐릭터) + 스텝 레일 ---------- */
.rail{ grid-column:1 / 13; margin-top:var(--s8); }
/* 주도 구간 : 캐릭터 + 점선 브래킷 (브래킷 양 끝이 레일의 원과 맞물립니다) */
.zone-band{
--zone-accent:#ff9a50;
--zone-dot:#ffc79c;
--tick-h:46px; /* 브래킷 끝에서 레일까지 */
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
column-gap:var(--gutter);
align-items:end;
}
.zbracket{ position:relative; }
.zbracket--teacher{ grid-column:1 / 2; margin-right:calc(-1 * var(--gutter)); }
.zbracket--self{ grid-column:2 / 5; margin-right:calc(-1 * var(--gutter)); }
.zbracket--together{ grid-column:5 / 6; }
.zchar{
display:block;
height:150px;
width:auto;
max-width:100%;
margin:0 auto 14px;
object-fit:contain;
}
/* 가로 점선이 세로 점선(원 중심)에서 정확히 시작·끝나도록 */
.zbracket .line{
position:relative;
display:flex;
align-items:center;
height:24px;
margin-left:8px;
margin-right:-8px;
}
.zbracket--together .line{ margin-right:8px; }
.zbracket .line::before,
.zbracket .line::after{
content:"";
flex:1;
border-top:2px dotted var(--zone-dot);
}
.zbracket .zlabel{
font-size:18px;
font-weight:600;
color:var(--zone-accent);
white-space:nowrap;
line-height:1;
padding:0 12px; /* 점선과 라벨 사이 숨 */
}
/* 세로 점선 : 경계마다 하나씩만 (구간끼리 겹치지 않게) */
.zbracket .tick{
position:absolute;
top:12px;
height:var(--tick-h);
width:0;
border-left:2px dotted var(--zone-dot);
}
.zbracket .tick--l{ left:0; }
.zbracket .tick--r{ right:0; }
/* 구간이 맞닿는 경계(02·05)의 세로선은 생략 — 양 끝에만 둡니다 */
.zbracket--teacher .tick--r,
.zbracket--together .tick--l{ display:none; }
/* 아이 주도 구간은 그레이 (선생님이 개입하지 않는 구간) */
.zbracket--self .line::before,
.zbracket--self .line::after{ border-top-color:var(--line-2); }
.zbracket--self .zlabel{ color:var(--ink-3); }
/* 레일 : 선·원·화살촉이 모두 같은 축(--rail-y) 위에 놓입니다 */
.rail-track{
--rail-y:34px; /* 브래킷 점선(46px)이 정확히 내려와 닿는 지점 */
--dot:16px;
--rail-color:#d5d5d2;
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
column-gap:var(--gutter);
position:relative;
padding-top:var(--rail-y);
align-items:stretch;
}
.rail-track::before{ /* 진행선 */
content:"";
position:absolute;
top:var(--rail-y);
left:0; right:7px;
height:3px;
border-radius:2px;
background:var(--rail-color);
transform:translateY(-50%);
}
/* 화살촉 : 당근의 화살표 아이콘 비례를 그대로 따랐습니다.
(당근 arrow icon — 촉 세로:가로 ≈ 1.2:1, 축과 같은 굵기, 모든 꼭짓점 라운드)
꽉 찬 예각 삼각형 대신 진행선과 같은 3px 획으로 벌어진 촉을 그립니다. */
.rail-track::after{
content:"";
position:absolute;
top:var(--rail-y);
right:0;
transform:translateY(-50%);
width:10.5px; height:18px;
border:0;
background:url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* 구간 헤더 : 데스크톱은 위쪽 브래킷이 구간을 표시하므로 숨깁니다.
모바일 세로 타임라인에서만 나타납니다. */
.rail-zone{ display:none; }
.zchar-sm{ display:none; } /* 구간 라벨 옆 캐릭터 — 모바일 전용 */
.rail-node{
display:flex;
flex-direction:column;
padding-top:var(--s5);
position:relative;
height:100%;
}
.rail-node::before{ /* 단계 원 */
content:"";
position:absolute;
top:0; left:0;
width:var(--dot); height:var(--dot);
box-sizing:border-box;
border-radius:50%;
background:var(--white);
border:3px solid var(--rail-color);
transform:translateY(-50%);
transition:background .15s ease, border-color .15s ease, box-shadow .18s ease;
}
/* 채워진 원 = 선생님이 개입하는 구간 (브래킷 색과 같은 신호) */
.rail-node--key::before{ background:#ff9a50; border-color:#ff9a50; }
.rail-node .step{ font-size:18px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.rail-node--key .step{ color:#ff9a50; }
/* 클릭 가능한 단계 : 칸 전체가 반응합니다 */
a.rail-node::after{
content:"";
position:absolute;
left:-14px; right:-14px;
top:26px; bottom:-24px;
background:#f7f7f5;
border-radius:14px;
opacity:0;
transition:opacity .18s ease;
}
a.rail-node > *{ position:relative; z-index:1; }
a.rail-node:hover::after{ opacity:1; }
/* 회색 원 : 테두리가 진해지며 링 */
a.rail-node:not(.rail-node--key):hover::before{
border-color:var(--ink);
box-shadow:0 0 0 6px rgba(17,18,19,0.07);
}
/* 오렌지 원 : 색은 그대로 두고 같은 색 링만 */
a.rail-node--key:hover::before{
box-shadow:0 0 0 6px rgba(255,154,80,0.20);
}
.rail-node h3{
margin-top:12px;
font-size:20px;
line-height:1.4;
letter-spacing:-0.01em;
min-height:1.4em; /* 제목 한 줄 기준 — 아래 내용을 한 선에서 시작 */
}
.rail-node .who{ margin-top:12px; font-size:18px; line-height:1.6; color:var(--ink-2); }
/* 카드 요약 : 한 줄 설명 + 키워드 태그 (상세는 아래 1~5번 블록에서) */
.rn-line{
margin-top:12px;
font-size:16px; line-height:1.7; color:var(--ink-2);
word-break:keep-all;
}
/* 문장 + 활동 이름을 한 짝으로 (01·02 카드) */
.rn-seq{ margin-top:12px; display:grid; gap:var(--s2); }
.rn-seq > li{ display:block; }
.rn-seq p{
font-size:16px; line-height:1.7; color:var(--ink-2);
word-break:keep-all;
}
.rn-seq span{
display:inline-block; margin-top:6px;
padding:6px 11px; border-radius:8px;
background:var(--surface);
font-size:14px; font-weight:600; line-height:1.3; letter-spacing:0;
color:var(--ink-3);
white-space:nowrap;
}
.rail-node--key .rn-seq span{ background:#fff4ec; color:#e07a2f; }
.rn-tags{ margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; }
.rn-tags span{
padding:6px 11px;
border-radius:8px;
background:var(--surface);
font-size:14px; font-weight:600; line-height:1.3;
color:var(--ink-3);
white-space:nowrap;
}
.rail-node--key .rn-tags span{ background:#fff4ec; color:#e07a2f; }
/* 영문 활동 이름 태그 : 한 줄에 하나씩 쌓아 순서처럼 읽히게 */
.rn-tags--en{ flex-direction:column; align-items:flex-start; gap:6px; }
.rn-tags--en span{ letter-spacing:0; font-size:14px; }
.rn-tags--six span{ font-size:13px; padding:6px 10px; letter-spacing:0.01em; }
/* ===== 2번 블록 : 왼쪽 리딩 3단계 스택 · 오른쪽 이북 화면 ===== */
/* ===== 2번 : 태블릿과 3단계를 한 장의 카드 안에 ===== */
#step02 .sf-body{
display:grid;
grid-template-columns:1.06fr 1fr;
grid-template-rows:auto 1fr;
column-gap:var(--s5);
row-gap:var(--s3);
align-items:center;
background:var(--white);
border-radius:20px;
padding:var(--s5);
}
#step02 .rd-panel{ display:contents; } /* 자식이 위 그리드에 직접 참여 */
#step02 .rd-tablet{
grid-area:2 / 1 / 3 / 2;
display:block; width:100%; height:auto;
margin:0; padding:0; background:none; border-radius:0;
}
#step02 .rd-panel > div{
grid-area:1 / 1 / 2 / 3; /* 제목은 카드 전체 폭 · 가운데 */
display:block; background:none; padding:0; margin:0;
}
#step02 .rd-card{ background:none; padding:0; text-align:center; }
#step02 .rd-card h3{ font-size:22px; line-height:1.4; }
#step02 .rd-card p{ margin-top:8px; font-size:16px; line-height:1.6; color:var(--ink-3); }
#step02 .rd-steps{ display:none; } /* 아이콘은 아래 목록이 이어받습니다 */
/* 리딩 3단계 : 카드가 아니라 목록으로 (여백을 벌지 않습니다) */
#step02 .rs-grid{
grid-area:2 / 2 / 3 / 3;
align-self:center;
}
.rs-card{
display:grid;
grid-template-columns:110px minmax(0,1fr);
column-gap:var(--s2);
background:none; border-radius:0; padding:0; text-align:left;
}
.rs-card + .rs-card{
margin-top:var(--s2); padding-top:var(--s2);
border-top:1px solid var(--line);
}
/* 아이콘 : 기존 3종 이미지를 1/3 씩 잘라 씁니다 (src 는 JS 에서 주입) */
.rs-icon{
grid-column:1; grid-row:1 / span 3;
align-self:center;
width:110px; height:91px;
background-repeat:no-repeat;
background-size:300% auto;
background-position:0% 50%;
}
.rs-icon--2{ background-position:50% 50%; }
.rs-icon--3{ background-position:100% 50%; }
.rs-card .cap{
grid-column:2; margin:0;
font-size:13px; font-weight:700; letter-spacing:0.04em;
color:#ff9a50;
}
.rs-card h4{
grid-column:2; margin-top:2px;
font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-0.015em;
}
.rs-card h4 span{
display:inline-block; margin-left:8px;
font-size:15px; font-weight:600; color:var(--ink-2);
white-space:nowrap; /* '소리 내어 읽기'가 중간에서 끊기지 않게 */
}
.rs-card .rs-desc{
grid-column:2; margin-top:6px;
font-size:15px; line-height:1.7; color:var(--ink-3);
}
@media (max-width:900px){
#step02 .sf-body{ grid-template-columns:1fr; grid-template-rows:auto auto auto; padding:var(--s3); row-gap:var(--s3); }
/* 태블릿 이미지의 흰 여백이 위아래 텍스트를 덮지 않도록 레이어 순서 지정 */
#step02 .rd-tablet{
grid-area:2 / 1 / 3 / 2;
margin-top:-30px;
position:relative; z-index:0;
}
#step02 .rd-panel > div{
grid-area:1 / 1 / 2 / 2;
position:relative; z-index:2;
}
#step02 .rs-grid{
grid-area:3 / 1 / 4 / 2;
position:relative; z-index:2;
}
/* STEP 카드 : 텍스트는 한 축으로, 아이콘은 오른쪽으로 */
.rs-card{
grid-template-columns:minmax(0,1fr) 76px;
column-gap:14px;
padding:var(--s3) 0;
}
.rs-icon{
grid-column:2;
grid-row:1 / span 2;
align-self:center;
width:76px; height:62px;
}
.rs-card .cap,
.rs-card h4{ grid-column:1; }
.rs-card .cap{ font-size:13px; letter-spacing:0.04em; }
.rs-card h4{ margin-top:6px; font-size:18px; line-height:1.3; }
/* 영문 / 한글을 항상 두 줄로 : 세 카드의 간격을 동일하게 */
.rs-card h4 span{
display:block;
margin-left:0; margin-top:4px;
font-size:14px;
}
.rs-card .rs-desc{
grid-column:1 / 3;
margin-top:12px;
font-size:15px; line-height:1.7;
word-break:keep-all;
}
.rs-card + .rs-card{ margin-top:0; padding-top:var(--s3); }
}
/* 짧은 키워드 4개 : 2 × 2 (칩 크기는 다른 카드와 동일하게 내용 폭) */
.rn-tags--grid2{
display:grid;
grid-template-columns:repeat(2,max-content);
justify-content:start;
gap:6px;
}
/* 단계 라벨 : Listening / Q&A 처럼 활동의 이름을 붙여줍니다 */
.ph-step{
display:flex; align-items:center; gap:8px;
width:fit-content;
height:34px; padding:0 15px;
margin-top:var(--s4);
border-radius:999px;
background:var(--white);
border:1px solid var(--line);
line-height:1;
}
.ph-step b{ font-size:16px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.ph-step em{ font-style:normal; font-size:14px; font-weight:600; color:var(--ink-3); }
.ph-step--center{ margin-left:auto; margin-right:auto; }
/* 질문 블록의 Q&A 칩 : 10px 올리고 아래 문장과 간격 확보 */
.qbox .ph-step{ margin-top:var(--s4); margin-bottom:var(--s3); }
.stage1-copy p.ph-step{ margin-top:var(--s4); font-size:inherit; max-width:none; color:var(--ink); }
.stage1-copy p.ph-step + p{ margin-top:10px; }
/* 질문 블록 마무리 한 줄 */
.qfoot{
margin-top:var(--s5);
text-align:center;
font-size:17px; line-height:1.7; color:var(--ink-3);
}
.qfoot strong{ font-weight:700; color:var(--ink-2); }
@media (max-width:768px){
.ph-step{ margin-top:var(--s3); height:32px; padding:0 14px; }
.ph-step b{ font-size:15px; }
.ph-step em{ font-size:13px; }
.qfoot{ margin-top:var(--s4); font-size:15px; }
}
.rail-node .go{
align-self:flex-start;
margin-top:auto; /* 모든 이동 버튼을 같은 선상에 정렬 */
padding-top:var(--s4);
font-size:18px; font-weight:600; color:var(--ink);
}
.rail-node .go span{ border-bottom:1.5px solid var(--ink); padding-bottom:2px; }
a.rail-node:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; }
/* 전체 요약 바 : 이 흐름 전체가 15년 커리큘럼 (레일과 같은 5칸 그리드) */
.summary-bar{
grid-column:1 / 13;
margin-top:var(--s7);
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
column-gap:var(--gutter);
align-items:center;
background:var(--surface); /* #f5f5f3 · 연한 그레이 */
border-radius:999px;
padding:3px 0; /* 알약 높이에 딱 맞춘 바 */
}
.summary-bar .sum-label{
display:flex;
align-items:center;
height:50px; /* 알약과 같은 높이 → 세로 중심 일치 */
padding-left:44px;
font-size:16px;
font-weight:600;
line-height:1;
color:#f36700;
white-space:nowrap;
}
.summary-bar .sum-pill{
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
background:#ff9a50;
color:#ffffff;
font-size:16px;
font-weight:700;
line-height:1.25;
border-radius:999px;
/* 세 알약의 크기를 완전히 동일하게 (시안 기준 168×50) */
width:100%;
max-width:163px;
height:50px;
padding:0 12px;
/* 위 레일과 같은 5칸 그리드 — 알약도 각 칸의 '시작선'에 맞춥니다.
가운데 정렬하면 위의 번호·제목(좌측 정렬)과 어긋나 보입니다. */
margin:0;
justify-self:start;
}
/* 말풍선 꼬리.
각진 삼각형(base16 × h8)은 radius 999 알약 위에 '붙여놓은 도형'으로 보입니다.
윤곽이 알약에서 자라나오도록 양옆을 오목하게 흘리고(플레어) 끝을 둥글렸습니다.
26 × 8, 팁 반경 2.6 — 폭:높이 = 3.25:1 로 낮고 넓게. */
.summary-bar .sum-pill::before{
content:"";
position:absolute;
top:-8px;
left:27px; /* 꼬리 중심 = 알약 왼쪽에서 40px (라운드 캡 밖) */
width:26px; height:9.5px;
border:0;
transform:none;
background:url("data:image/svg+xml;utf8,") no-repeat 0 0 / 100% 100%;
}
/* 마지막 알약 : 두 줄이라 행간만 더 좁힘 (정렬은 다른 알약과 동일) */
.summary-bar .sum-pill--last{
line-height:1.15;
padding-top:4px; /* 알약·꼬리는 그대로, 두 줄 텍스트만 2px 내림 */
}
/* ---------- 5. principles ---------- */
.principle{
grid-column:1 / 13;
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter);
padding-top:var(--s8);
padding-bottom:var(--s8);
border-top:1px solid var(--line);
}
.principle:first-of-type{ margin-top:var(--s7); }
.principle-index{
grid-column:1 / 3;
display:flex;
flex-direction:column;
align-items:center; /* 배지 · 태그 · 캐릭터를 한 축에 */
text-align:center;
}
.principle-index .n{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px; height:46px;
border-radius:50%;
background:var(--ink);
color:var(--white);
font-size:21px;
font-weight:700;
line-height:1;
font-variant-numeric:tabular-nums;
}
.principle-index .tag{ margin-top:var(--s2); font-size:18px; color:var(--ink-3); }
.principle-index .pchar{
display:block;
width:100%;
max-width:161px; /* 230px의 70% — 상단 레일 캐릭터보다 한 단계 작게 */
height:auto;
margin:var(--s4) auto 0;
}
.principle-body{ grid-column:3 / 10; padding-left:40px; } /* 캐릭터와 본문 사이 여유 */
.principle-body .sub{ margin-top:var(--s3); font-size:18px; line-height:1.9; color:var(--ink-2); }
.principle-body .link{
display:inline-flex; align-items:center; gap:8px;
margin-top:var(--s4);
font-size:18px; font-weight:600; color:var(--ink);
border-bottom:1.5px solid var(--ink); padding-bottom:2px;
}
.principle-body .link .arrow{ display:inline-block; transition:transform .15s ease; }
.principle-body .link:hover .arrow{ transform:translateX(3px); }
.principle-figure{ grid-column:10 / 13; }
.figure-caption{ margin-top:var(--s2); font-size:18px; color:var(--ink-3); }
.checklist{ display:grid; gap:8px; }
.checklist li{
display:flex; align-items:center; gap:var(--s2);
background:var(--tint-green);
border-radius:10px;
padding:var(--s2) var(--s3);
font-size:18px; font-weight:600;
}
.checklist .check{ width:22px; height:22px; flex:0 0 auto; display:block; }
/* ③ 방학특강 : 여름·겨울 두 번, 각 한 권 */
.vac{ border-top:2px solid var(--ink); }
.vac-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:16px 0;
border-bottom:1px solid var(--line);
}
.vac-season{
display:flex;
align-items:center;
gap:10px;
font-size:18px;
color:var(--ink-2);
}
.vac-season svg{ width:20px; height:20px; flex:0 0 auto; }
.vac-count{
font-size:20px;
font-weight:700;
color:var(--ink);
font-variant-numeric:tabular-nums;
}
.vac-total{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
padding-top:18px;
}
.vac-total span{ font-size:18px; color:var(--ink-3); }
.vac-total b{
font-size:28px;
font-weight:700;
line-height:1;
letter-spacing:-0.02em;
color:#f36700;
}
/* ---------- 6. 종착점 ---------- */
.converge{
grid-column:1 / 13;
margin-top:var(--s8);
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter);
align-items:stretch; /* 영상이 들어간 도착점 카드 높이에 왼쪽 두 카드를 맞춥니다 */
}
.converge-in{
position:relative;
grid-column:1 / 6; display:grid; grid-template-rows:1fr 1fr;
gap:var(--s5); /* + 기호가 놓일 자리 */
}
/* 연산 기호 : 토스·당근 모두 기호를 회색 원 배지에 담지 않습니다.
배경 없이 작고 옅게 두고, 크기·명도 차이로만 순위를 만듭니다. */
.converge-plus{
position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
display:flex; align-items:center; justify-content:center;
color:var(--line-2); /* 보조 기호 : 가장 옅게 */
}
.converge-plus svg{ width:20px; height:20px; display:block; }
/* 당근 카드 문법 : 회색 채움이 아니라 1px 라인 (border 1px #eaebee · radius 16 · padding 40 · 그림자 없음) */
.in-card{
background:transparent;
border:1px solid var(--line);
border-radius:var(--radius);
padding:var(--s5);
display:flex; flex-direction:column; justify-content:center;
}
.in-card .label{ color:var(--ink-3); }
.in-card .name{ margin-top:var(--s1); font-size:24px; font-weight:700; line-height:1.4; letter-spacing:-0.015em; }
/* 결론어 아래에 근거 한 줄 — 위 5스텝 레일에서 쓰인 말을 그대로 이어받습니다 */
.in-why{
margin-top:var(--s3);
font-size:18px; line-height:1.75; color:var(--ink-2);
word-break:keep-all;
}
/* 합류 표시 : 도식이 아니라 기호 하나로. 선을 그리면 위 레일의 화살표와 겹치고,
두 칸(180px)을 선 하나에 쓰게 됩니다. */
.converge-arrow{ grid-column:6 / 7; display:flex; justify-content:center; align-items:center; }
.converge-arrow .node{
display:flex; align-items:center; justify-content:center;
color:var(--ink-2); /* 주 기호 : + 보다 진하고 크게 */
}
.converge-arrow svg{
width:34px; height:34px; display:block;
transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
/* ── 진입 인터랙션 ────────────────────────────────────────────────
새로 드러내는 것은 없습니다. 이미 있는 다섯 요소가
'상상하는 힘 + 영어의 기본기 → 어린이 영어작가 과정' 이라는
문장을 읽는 순서 그대로 도착합니다. 0.66초 안에 끝나고 한 번만 실행됩니다.
호버가 아니라 스크롤에 걸려 있어 터치 기기에서도 동일하게 동작합니다. */
.js .converge .in-card,
.js .converge .converge-arrow,
.js .converge .converge-out{
opacity:0; transform:translateY(10px);
transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.js .converge .converge-plus{
opacity:0; transform:translate(-50%,calc(-50% + 8px));
transition:opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.js .converge.is-in .in-card,
.js .converge.is-in .converge-arrow,
.js .converge.is-in .converge-out{ opacity:1; transform:none; }
.js .converge.is-in .converge-plus{ opacity:1; transform:translate(-50%,-50%); }
.js .converge.is-in .in-card:nth-of-type(1){ transition-delay:0s; }
.js .converge.is-in .converge-plus { transition-delay:.12s; }
.js .converge.is-in .in-card:nth-of-type(2){ transition-delay:.20s; }
.js .converge.is-in .converge-arrow { transition-delay:.34s; }
.js .converge.is-in .converge-out { transition-delay:.46s; }
/* 호버는 실제로 누를 수 있는 것에만 : 화살표는 방향만 살짝 강조합니다 */
.converge-arrow svg{ transition:transform .3s cubic-bezier(.22,.61,.36,1) .34s; }
.converge:hover .converge-arrow svg{ transform:translateX(4px); transition-delay:0s; }
/* 도착점 카드 = 영상 한 장.
당근 사용자 이야기 카드(570×632 · radius 16 · overflow hidden)와 같은 비율·같은 마스크.
영상 전체를 덮는 딤은 쓰지 않습니다. */
.converge-out{
position:relative;
grid-column:7 / 13;
background:var(--ink);
color:var(--white);
border-radius:var(--radius);
overflow:hidden;
aspect-ratio:0.9; /* 588 × 653 — 세로 구도의 원본과 맞습니다 */
align-self:start; /* 비율이 높이를 정하도록 */
padding:var(--s6);
}
.goal-film{
position:absolute; inset:0; z-index:0;
background:#000;
}
.goal-film video{
width:100%; height:100%; object-fit:cover; display:block;
filter:brightness(1.08) contrast(1.02) saturate(1.04); /* 야간 톤 원본을 살짝 들어 올립니다 */
}
/* 그림의 밝은 부분(아이·불빛·침대)은 그대로 두고,
원래 어두운 천장 쪽 위 절반에만 얕게 깔립니다. 54% 아래로는 0. */
.goal-film::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(180deg,
rgba(17,18,19,0.62) 0%,
rgba(17,18,19,0.52) 20%,
rgba(17,18,19,0.26) 38%,
rgba(17,18,19,0) 54%);
pointer-events:none;
}
.goal-sound{
position:absolute; z-index:2; right:16px; bottom:14px;
width:40px; height:40px; padding:0;
border-radius:50%;
border:0;
background:rgba(0,0,0,0.34);
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
color:#fff;
display:flex; align-items:center; justify-content:center;
cursor:pointer;
opacity:0; transform:translateY(4px);
transition:opacity .18s ease, transform .18s ease, background .15s ease;
}
.converge-out:hover .goal-sound,
.goal-sound:focus-visible{ opacity:1; transform:none; }
.goal-sound:hover{ background:rgba(0,0,0,0.52); }
.goal-sound svg{ width:18px; height:18px; display:block; }
.goal-sound .ic-on{ display:none; }
.goal-sound[aria-pressed="true"] .ic-on{ display:block; }
.goal-sound[aria-pressed="true"] .ic-off{ display:none; }
/* 글자는 그림 위에 뜹니다 — 넓은 딤 대신 글자 자신에게만 그림자를 줍니다 */
.goal-body{
position:relative; z-index:1;
text-shadow:0 1px 16px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.35);
}
.converge-out .name{ font-size:clamp(1.6rem,2.6vw,2.1rem); font-weight:700; line-height:1.4; letter-spacing:-0.02em; }
.converge-out p{ margin-top:var(--s3); font-size:18px; line-height:1.8; color:rgba(255,255,255,0.9); }
/* 영상 위의 UI = 당근 방식 그대로.
당근은 영상 위 칩·링크를 background:rgba(0,0,0,.3) + backdrop-filter:blur(10px) 알약으로 처리하고
그림자(box-shadow·text-shadow)는 일절 쓰지 않습니다. 뒤 배경을 흐려서 눌러버리는 방식입니다. */
/* 어두운 일러스트 위에서는 반투명 검정이 묻힙니다 → 흰 알약 + 잉크 텍스트 */
/* 흰 유리 : 뒤 그림이 살짝 비치면서도 글자는 또렷하게 */
.glass{
display:inline-flex; align-items:center; gap:10px;
border-radius:999px;
background:rgba(255,255,255,0.78);
-webkit-backdrop-filter:blur(14px) saturate(140%);
backdrop-filter:blur(14px) saturate(140%);
color:var(--ink);
text-shadow:none;
box-shadow:0 6px 20px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.55);
border:0;
}
.converge-out .link{
margin-top:var(--s5);
padding:14px 24px;
font-size:18px; font-weight:600; letter-spacing:-0.01em; line-height:1;
transition:background .15s ease;
}
.converge-out .link:hover{ background:rgba(255,255,255,0.92); color:#e07a2f; }
.converge-out .link span{ display:inline-block; transition:transform .15s ease; }
.converge-out .link:hover span{ transform:translateX(3px); }
.converge-out .link:focus-visible{ outline:2px solid #ff9a50; outline-offset:3px; }
/* ---------- 워크북 모달 ---------- */
.wb-overlay{
position:fixed; inset:0;
background:rgba(17,18,19,0.55);
-webkit-backdrop-filter:blur(2px);
backdrop-filter:blur(2px);
display:flex; align-items:center; justify-content:center;
padding:var(--s3);
z-index:100;
opacity:0; visibility:hidden;
transition:opacity .2s ease, visibility .2s ease;
}
.wb-overlay.is-open{ opacity:1; visibility:visible; }
.wb-dialog{
position:relative;
width:min(1080px,100%);
max-height:94vh;
overflow:auto;
background:var(--white);
border-radius:24px;
padding:var(--s6) var(--s5) var(--s5);
transform:translateY(12px);
transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.wb-overlay.is-open .wb-dialog{ transform:none; }
.wb-close{
position:absolute;
top:16px; right:16px;
width:40px; height:40px;
display:flex; align-items:center; justify-content:center;
border:none; border-radius:50%;
background:#f2f2f0;
color:var(--ink);
font-size:20px; line-height:1;
cursor:pointer;
transition:background .15s ease;
}
.wb-close:hover{ background:#e6e6e3; }
.wb-title{
font-size:clamp(1.6rem,2.6vw,2.1rem);
font-weight:700;
line-height:1.3;
letter-spacing:-0.02em;
text-align:center;
color:var(--ink);
}
.wb-sub{
margin-top:8px;
font-size:18px;
line-height:1.6;
color:var(--ink-2);
text-align:center;
}
/* 패널 */
.wb-panel{
margin-top:var(--s4);
background:#f9f9f9;
border-radius:20px;
padding:var(--s3) var(--s3) var(--s4); /* 좌우를 줄여 책이 더 크게 */
}
.wb-note{
font-size:16px;
line-height:1.5;
color:var(--ink-3);
text-align:center;
}
/* 책 : 비율 유지 + 화면 높이에 맞춰 축소 → 스크롤 없이 한눈에 */
.wb-figure{
position:relative;
margin:var(--s2) auto 0;
width:100%;
aspect-ratio:878 / 430; /* 6장 모두 동일 크기로 정규화 */
max-height:min(462px, 46vh); /* 기존 대비 +10% */
border:none; background:none; padding:0;
cursor:zoom-in;
display:block;
}
.wb-figure.is-inner{ aspect-ratio:1587 / 1122; cursor:zoom-out; }
.wb-figure img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:contain; /* 그림자까지 온전히 */
transition:opacity .18s ease;
}
.wb-figure.is-loading img{ opacity:0; }
/* 표지+펼침 구성상 무게중심이 왼쪽에 쏠려 보여 시각 보정 */
.wb-figure:not(.is-inner) img{ transform:translateX(40px); }
/* 컨트롤 : 칩 + 체크리스트 한 줄 */
.wb-controls{
margin-top:0; /* 이미지 아래 여백 없이 바로 선 */
padding-top:var(--s3);
border-top:1px solid #ececea;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s4);
flex-wrap:wrap;
}
.wb-chips{ display:flex; flex-wrap:nowrap; gap:6px; }
.wb-chip{
flex:0 0 auto;
width:42px; height:42px;
display:flex; align-items:center; justify-content:center;
border-radius:999px;
border:1.5px solid var(--line-2);
background:var(--white);
color:var(--ink);
font-size:16px; font-weight:600;
letter-spacing:-0.01em;
cursor:pointer;
transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.wb-chip:hover{ border-color:var(--ink); }
.wb-chip[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.wb-features{ display:flex; flex-wrap:wrap; gap:10px var(--s4); }
.wb-features li{
display:flex; align-items:center; gap:10px;
font-size:18px; line-height:1.5; color:var(--ink-2);
}
.wb-features svg{ width:20px; height:20px; flex:0 0 auto; }
@media (max-width:900px){
.wb-dialog{ padding:var(--s6) var(--s3) var(--s3); border-radius:20px; }
.wb-panel{ padding:var(--s3); }
.wb-figure{ max-height:none; }
.wb-controls{ flex-direction:column; align-items:flex-start; gap:var(--s3); }
.wb-features{ flex-direction:column; gap:12px; }
}
/* ---------- 리딩(e-Book) 모달 ---------- */
.rd-panel{
margin-top:var(--s5);
padding:0; /* 바깥 그레이 박스 없음 */
display:grid;
grid-template-columns:1fr 1.05fr;
column-gap:var(--s5);
align-items:center;
}
.rd-card{
background:#f4f4f4; /* 카드 쪽을 그레이로 */
border-radius:16px;
padding:var(--s4) var(--s3);
text-align:center;
}
.rd-card h3{
font-size:22px;
font-weight:700;
line-height:1.4;
letter-spacing:-0.01em;
color:var(--ink);
}
.rd-card p{
margin-top:10px;
font-size:18px;
line-height:1.6;
color:var(--ink-2);
}
.rd-steps{
display:block;
width:100%;
max-width:420px;
margin:var(--s4) auto 0;
height:auto;
}
.rd-tablet{
display:block;
width:100%;
max-width:560px;
margin:0 auto;
height:auto;
}
@media (max-width:900px){
.rd-panel{ grid-template-columns:1fr; row-gap:var(--s4); }
.rd-tablet{ max-width:440px; }
}
/* ---------- 러닝 6단계 모달 ---------- */
.ln-panel{
position:relative; /* 이전·다음 버튼의 기준 */
margin-top:var(--s5);
display:grid;
grid-template-columns:1.15fr 1fr;
column-gap:var(--s6);
align-items:center;
}
/* 태블릿 : 프레임 이미지 위에 화면을 정확한 비율로 얹습니다 */
.ln-tablet{ position:relative; width:100%; transform:translateX(40px); }
.ln-tablet .frame{ display:block; width:100%; height:auto; }
.ln-tablet .scr{
position:absolute;
left:19.07%;
top:6.3%;
width:77.32%;
height:88.98%;
object-fit:fill;
transition:opacity .18s ease;
}
.ln-tablet.is-loading .scr{ opacity:0; }
.ln-info{ padding-left:30px; }
/* 스와이프 : 세로 스크롤만 브라우저에 넘기고 가로는 스크립트가 처리 */
.ln-panel{ touch-action:pan-y; }
/* 스와이프 안내 : 모바일에서만 나타납니다 */
.ln-swipe{ display:none; } /* 태블릿과 간격 확보 */
.ln-info .area{ font-size:18px; font-weight:600; color:var(--ink-3); }
.ln-info .idx{
margin-top:var(--s3);
font-size:18px;
color:var(--ink-3);
font-variant-numeric:tabular-nums;
}
.ln-info .idx b{
color:var(--ink);
font-weight:700;
border-bottom:2px solid var(--ink);
padding-bottom:2px;
}
.ln-info .en{
margin-top:var(--s3);
font-size:26px;
font-weight:700;
line-height:1.25;
letter-spacing:-0.01em;
color:var(--ink);
}
.ln-info .ko{
margin-top:6px;
font-size:20px;
font-weight:700;
line-height:1.4;
color:var(--ink);
}
.ln-info .desc{
margin-top:var(--s2);
font-size:18px;
line-height:1.7;
color:var(--ink-2);
min-height:3.4em; /* 문구 길이가 달라도 점 위치 고정 */
}
.ln-dots{ display:flex; gap:10px; margin-top:var(--s3); }
.ln-dot{
width:10px; height:10px;
border:none; border-radius:50%;
background:#dcdcda;
padding:0;
cursor:pointer;
transition:background .15s ease, transform .15s ease;
}
.ln-dot:hover{ background:#b9b9b6; }
/* 이전·다음 버튼 : 점 6개를 정확히 눌러야 하는 부담을 없앱니다.
태블릿 좌우 가장자리에 걸쳐 놓아 어느 화면 크기에서도 같은 자리에 있습니다. */
.ln-nav{
position:absolute; top:50%;
transform:translate(0,calc(-50% - 50px)); /* 태블릿 중심에서 50px 위로 */
z-index:3;
width:60px; height:60px; /* 탭 영역 */
display:flex; align-items:center; justify-content:center;
border:0; border-radius:0;
background:none; box-shadow:none;
padding:0;
color:var(--ink-3);
cursor:pointer;
transition:color .15s ease, transform .15s ease;
}
.ln-nav:hover{ color:var(--ink); }
.ln-nav--prev:hover{ transform:translate(-3px,calc(-50% - 50px)); }
.ln-nav--next:hover{ transform:translate(3px,calc(-50% - 50px)); }
.ln-nav:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.ln-nav svg{ width:37px; height:37px; display:block; } /* 31 → 37px (+20%) */
.ln-nav--prev{ left:-22px; }
.ln-nav--next{ right:-22px; }
.ln-dot[aria-selected="true"]{ background:var(--ink); transform:scale(1.15); }
@media (max-width:900px){
.ln-panel{ grid-template-columns:1fr; row-gap:var(--s4); }
.ln-tablet{ transform:none; }
.ln-info{ padding-left:0; }
.ln-info .en{ font-size:22px; }
.ln-info .desc{ min-height:0; }
}
/* 원칙 블록에 링크가 둘 이상일 때 */
.link-stack{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
margin-top:var(--s4);
}
.link-stack .link{ margin-top:0; }
.link-stack .link + .link{ margin-top:10px; } /* 단어장 소개를 10px 아래로 */
/* ---------- 단어장(Word List) 모달 ---------- */
.wl-panel{
margin-top:var(--s5);
background:#f9f9f9; /* 워크북 팝업과 같은 그레이 판 */
border-radius:20px;
padding:var(--s4);
display:grid;
grid-template-columns:1fr 1.2fr;
column-gap:var(--s6);
align-items:center;
}
.wl-copy{ padding-left:48px; } /* 안내 문구가 이 열로 들어와 높이가 달라졌으므로 시각 보정(-10px) 해제 */ /* 판 안쪽 여백 포함 총 80px · 위로 10px */
.wl-feats{ display:grid; gap:18px; }
.wl-feats li{
display:flex; align-items:center; gap:12px;
font-size:20px; line-height:1.5; color:var(--ink-2);
}
.wl-feats svg{ width:22px; height:22px; flex:0 0 auto; }
/* 미디어 슬롯 : 사진 ↔ 단어장 샘플을 같은 자리에서 교차 (높이 변화 없음) */
.wl-media:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; border-radius:16px; }
.wl-media{
position:relative;
width:100%;
aspect-ratio:628 / 410;
border:none; padding:0; margin:0;
background:none;
cursor:pointer;
display:block;
}
.wl-face{
position:absolute;
inset:0;
border-radius:16px;
overflow:hidden;
opacity:1;
transition:opacity .22s ease;
}
.wl-face--sample{ opacity:0; pointer-events:none; }
.wl-media.is-sample .wl-face--photo{ opacity:0; }
.wl-media.is-sample .wl-face--sample{ opacity:1; }
.wl-face--photo img{
width:100%; height:100%;
object-fit:cover;
display:block;
transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.wl-media:hover .wl-face--photo img{ transform:scale(1.03); }
/* 단어장 샘플 */
.wl-face--sample{
background:var(--white);
border:1px solid var(--line);
padding:var(--s3);
display:flex;
flex-direction:column;
}
.wl-face--sample h4{ font-size:20px; font-weight:700; text-align:center; color:var(--ink); line-height:1.3; }
.wl-face--sample .book{ margin-top:2px; font-size:15px; color:var(--ink-3); text-align:center; }
.wl-words{
margin-top:var(--s2);
flex:1;
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-rows:1fr;
gap:6px 16px;
}
.wl-word{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:0 12px;
border-radius:8px;
background:#faf7f1;
font-size:15px;
line-height:1.3;
}
.wl-word b{ font-weight:700; color:var(--ink); }
.wl-word span{ color:var(--ink-2); }
/* 상태 안내 : 기능 목록 아래, 체크 아이콘과 같은 시작선 */
.wl-hint{
margin-top:var(--s5);
font-size:16px;
color:var(--ink-3);
text-align:left;
}
@media (max-width:900px){
.wl-panel{ grid-template-columns:1fr; row-gap:var(--s4); padding:var(--s3); }
.wl-copy{ padding-left:0; transform:none; }
}
/* ---------- page end ---------- */
/* ---------- page end ---------- */
body{ padding-bottom:var(--s10); }
/* ---------- responsive ---------- */
@media (max-width:1024px){
:root{ --margin:24px; --gutter:20px; }
/* 1024px 이하 : 2단 히어로를 1단으로 풉니다.
칼럼이 좁아지면 리드문이 5~6줄로 터지고 오른쪽에 빈 삼각형이 남습니다. */
.hero-copy{ grid-column:1 / 13; }
.section-head{ grid-column:1 / 13; }
.stage1-panel{ padding:var(--s7) var(--s6); }
.stage1-copy{ grid-column:1 / 13; }
.stage1-media{ grid-column:1 / 13; margin-top:var(--s7); }
.qlist{ grid-template-columns:1fr; }
.video-frame{ max-width:520px; margin:0 auto; }
.zchar{ height:120px; }
.principle-index{
grid-column:1 / 13;
display:flex; flex-direction:row; flex-wrap:wrap;
align-items:center; text-align:left;
gap:var(--s3);
}
.principle-index .tag{ margin-top:0; }
.principle-index .pchar{ margin:0 0 0 auto; max-width:120px; }
.principle-body{ grid-column:1 / 9; margin-top:var(--s4); padding-left:0; }
.principle-figure{ grid-column:9 / 13; margin-top:var(--s4); }
/* 세로 흐름 : 두 카드 높이를 맞춰야 + 가 사이 정중앙에 놓입니다 */
.converge-in{ grid-column:1 / 13; grid-template-rows:1fr 1fr; }
/* 화살표는 숨기지 않고 아래를 가리키게 돌립니다 (A ↓ B ↓ C) */
.converge-arrow{ grid-column:1 / 13; margin:var(--s4) 0 var(--s3); }
.converge-arrow svg{ width:28px; height:28px; transform:rotate(90deg); }
.converge:hover .converge-arrow svg{ transform:rotate(90deg); }
/* 카드가 전폭이 되므로 0.9 비율을 그대로 두면 세로가 1000px을 넘습니다 */
.converge-out{ grid-column:1 / 13; margin-top:0; aspect-ratio:16 / 10; }
.goal-sound{ opacity:1; transform:none; }
}
@media (max-width:768px){
/* 여백 스케일 자체를 모바일용으로 다시 정의합니다.
이것이 가장 큰 지렛대 — 페이지 전체의 var(--sN) 이 한 번에 줄어듭니다.
(데스크톱 24/32/40/48/64/80/96/120/160 → 모바일) */
:root{
--margin:20px; --gutter:12px;
--s3:20px; --s4:24px; --s5:28px; --s6:32px;
--s7:40px; --s8:56px; --s9:72px; --s10:80px; --s11:88px;
}
.section{ padding-top:var(--s10); }
.hero{ padding-top:var(--s6); }
.stage1{ margin-top:var(--s7); }
.stage1-panel{ padding:var(--s6) var(--s4); border-radius:20px; }
.video-frame{ border-radius:16px; max-width:none; }
/* 모바일 : 밴드와 레일을 세로로 */
.zone-band{ grid-template-columns:1fr; row-gap:var(--s5); }
.zbracket--teacher,.zbracket--self,.zbracket--together{ grid-column:1 / 2; margin-right:0; }
.zbracket .tick{ display:none; }
.zchar{ height:130px; }
/* 요약 바 : Stripe 은 모바일에서도 지표 4개를 4열로 유지합니다.
세로로 쌓으면 '하나의 커리큘럼 안에 담겨 있다'는 뜻이 사라집니다. */
.summary-bar{
grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:8px; row-gap:12px;
border-radius:20px;
padding:16px 14px;
}
.summary-bar > span:empty{ display:none; } /* 빈 칸(04) 제거 */
.summary-bar .sum-label{
grid-column:1 / 4;
height:auto; padding:0;
justify-content:center; text-align:center;
white-space:normal;
}
.summary-bar .sum-pill{
max-width:none; width:100%;
height:auto; min-height:46px;
padding:9px 6px; margin:0;
justify-self:stretch;
line-height:1.3;
}
.summary-bar .sum-pill::before{ display:none; }
.rail-track{ grid-template-columns:1fr; row-gap:var(--s6); padding-top:var(--s4); }
.rail-track::before,.rail-track::after{ display:none; }
.rail-node{ border-top:2px solid var(--line-2); padding-top:var(--s3); }
.rail-node--key{ border-top-color:#ff9a50; }
.rail-node::before{ display:none; }
a.rail-node::after{ display:none; }
.rail-track:hover .rail-node:not(:hover){ opacity:1; }
.rail-node .go{ margin-top:var(--s3); padding-top:0; }
.principle-body{ grid-column:1 / 13; }
.principle-figure{ grid-column:1 / 13; margin-top:var(--s6); }
.converge-out{ padding:var(--s4); aspect-ratio:auto; min-height:520px; }
.converge-out .goal-film::after{
background:linear-gradient(180deg,
rgba(17,18,19,0.74) 0%, rgba(17,18,19,0.62) 26%,
rgba(17,18,19,0.3) 46%, rgba(17,18,19,0) 62%);
}
}
/* =========================================================
인터랙션 : 스크롤 진입 시 한 번만, 아주 절제해서
(JS가 없으면 모든 요소가 그대로 보입니다)
========================================================= */
.js .reveal{ opacity:0; transform:translateY(12px); }
.js .reveal.is-in{
opacity:1; transform:none;
transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
/* 레일 : 선이 왼쪽에서 그어지고, 원이 순서대로 찍힙니다 */
.js .rail .rail-track::before{ transform:translateY(-50%) scaleX(0); transform-origin:left center; }
.js .rail.is-in .rail-track::before{
transform:translateY(-50%) scaleX(1);
transition:transform 1s cubic-bezier(.22,.61,.36,1) .1s;
}
.js .rail .rail-track::after{ opacity:0; }
.js .rail.is-in .rail-track::after{ opacity:1; transition:opacity .35s ease 1s; }
.js .rail .rail-node::before{ transform:translateY(-50%) scale(0); }
.js .rail.is-in .rail-node::before{
transform:translateY(-50%) scale(1);
transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .15s ease, border-color .15s ease, box-shadow .18s ease;
}
/* 구간 헤더(.rail-zone) 3개가 레일 안에 함께 들어 있어
실제 자식 순번은 2·4·5·6·8 입니다 (1·3·7 은 구간 헤더).
1~5 로 적으면 04·05 가 지연 없이 먼저 튀어나옵니다. */
.js .rail.is-in .rail-node:nth-child(2)::before{ transition-delay:.25s; }
.js .rail.is-in .rail-node:nth-child(4)::before{ transition-delay:.42s; }
.js .rail.is-in .rail-node:nth-child(5)::before{ transition-delay:.59s; }
.js .rail.is-in .rail-node:nth-child(6)::before{ transition-delay:.76s; }
.js .rail.is-in .rail-node:nth-child(8)::before{ transition-delay:.93s; }
/* 캐릭터·브래킷 : 살짝 떠오르며 등장 */
.js .rail .zchar{ opacity:0; transform:translateY(10px); }
.js .rail.is-in .zchar{
opacity:1; transform:none;
transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.js .rail.is-in .zbracket--self .zchar{ transition-delay:.1s; }
.js .rail.is-in .zbracket--together .zchar{ transition-delay:.2s; }
.js .rail .zbracket .line{ opacity:0; }
.js .rail.is-in .zbracket .line{ opacity:1; transition:opacity .5s ease .35s; }
.js .rail .zbracket .tick{ opacity:0; }
.js .rail.is-in .zbracket .tick{ opacity:1; transition:opacity .4s ease .55s; }
/* 단계 텍스트 : 원이 찍힌 뒤 따라 올라옵니다 */
.js .rail .rail-node > *{ opacity:0; transform:translateY(8px); }
.js .rail.is-in .rail-node > *{
opacity:1; transform:none;
transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.js .rail.is-in .rail-node:nth-child(2) > *{ transition-delay:.35s; }
.js .rail.is-in .rail-node:nth-child(4) > *{ transition-delay:.5s; }
.js .rail.is-in .rail-node:nth-child(5) > *{ transition-delay:.65s; }
.js .rail.is-in .rail-node:nth-child(6) > *{ transition-delay:.8s; }
.js .rail.is-in .rail-node:nth-child(8) > *{ transition-delay:.95s; }
/* 호버 : 해당 단계만 또렷해집니다 */
a.rail-node .go span{ transition:border-bottom-width .15s ease; }
a.rail-node:hover .go span{ border-bottom-width:2.5px; }
/* 하나를 짚으면 나머지는 한 걸음 물러납니다 (되돌아올 때도 부드럽게) */
.rail-node{ transition:opacity .22s ease; }
.rail-track:hover .rail-node:not(:hover){ opacity:0.62; }
/* 숫자 칩 : 진입할 때 숫자가 올라갑니다 (JS) */
/* =========================================================
모바일 정리
기준값 : 당근 375 — 좌우 24 / h1 36·lh1.44 / 카드 1열 전폭 · radius 16
토스 375 — 좌우 20 / 섹션 제목 36·lh1.28·ls-0.02em / 본문 16·lh1.6
원칙 : 제목은 데스크톱보다 행간을 조이고, 본문 최소 18px은 유지.
손가락이 닿는 것은 44px 이상. 팝업은 바텀시트.
========================================================= */
@media (max-width:768px){
/* ---------------------------------------------------------
모바일 타입 스케일
당근 375 : H1 36/lh1.44 · 섹션 28/lh1.50 · 본문 14/lh1.71 · 자간 -0.6px
토스 375 : 섹션 36/lh1.28 · 본문 16/lh1.60 · 자간 -0.02em
→ 두 회사 공통값(본문 14~16 / 행간 1.6~1.7 / 자간 -0.02em)을 따릅니다.
--------------------------------------------------------- */
body{ font-size:16px; letter-spacing:-0.02em; }
/* 둘째 줄 = 한글 11자 + 공백 5 − 자간 ≈ 11.7em.
화면 폭에서 좌우 여백(40px)을 뺀 값을 12로 나누면 어떤 기기에서도 한 줄에 들어갑니다.
(390px → 29px · 360px → 27px · 320px → 23px, 최대 38.4px) */
.display-1{
font-size:min(38.4px, calc((100vw - 40px) / 12));
line-height:1.38;
letter-spacing:-0.03em;
}
/* 26px 에서는 두 섹션 제목이 3줄이 되고 마지막 줄에 "씁니다." "모입니다." 만 남습니다.
24px 이면 둘 다 2줄로 떨어집니다. */
.display-2{ font-size:24px; line-height:1.45; letter-spacing:-0.025em; }
.title{ font-size:20px; line-height:1.5; letter-spacing:-0.02em; }
.label{ font-size:14px; line-height:1.5; letter-spacing:0.04em; }
/* 17px 에서는 마지막 줄에 "연결합니다." 만 남고(4줄), 셋째 줄이 76px 비었습니다.
16px 이면 3줄로 떨어지고 각 줄의 남는 폭이 7·24·56px 으로 고릅니다. */
.lede{ font-size:16px; line-height:1.72; }
/* 마지막 줄이 한 단어만 남는 것을 브라우저가 피하도록 (지원 브라우저 한정) */
.display-1, .display-2, .lede, .title, .stage1-copy > p, .principle-body .sub{
text-wrap:pretty;
}
/* 본문 계열 : 16px / 행간 1.7 로 통일 */
.stage1-copy > p,
.principle-body .sub,
.in-why,
.converge-out p,
.checklist li,
.qlist li{ font-size:16px; line-height:1.7; }
/* 라벨은 본문 축소 대상이 아닙니다 (.label 규칙 유지) */
.stage1-copy > p.label{ font-size:14px; line-height:1.5; letter-spacing:0.04em; }
/* 캡션 계열은 한 단계 더 작게 (당근 14) */
.figure-caption,
.wb-note,
.vac-season{ font-size:14px; line-height:1.6; }
.emphasis{ margin-top:var(--s4); padding-top:var(--s2); }
.emphasis p{ font-size:19px; line-height:1.55; }
.qbox .qlead{ font-size:19px; line-height:1.55; }
.in-card .name{ font-size:20px; }
.converge-out .name{ font-size:24px; }
/* 링크·버튼 16px (당근·토스 모두 16) */
.rail-node .go,
.principle-body .link,
.converge-out .link,
.gnb-link,
.gnb-enter{ font-size:16px; }
/* 제목 → 본문 간격을 좁힙니다 (당근 8px) */
.section-head .display-2{ margin-top:10px; }
.section-head .lede{ margin-top:12px; }
.principle-body .sub{ margin-top:12px; }
.stage1-copy .display-2{ margin-top:8px; }
.stage1-copy > p{ margin-top:16px; }
.principle-index .tag{ margin-top:0; }
.vac-count{ font-size:17px; }
.vac-total span{ font-size:14px; }
.vac-total b{ font-size:24px; }
.summary-bar .sum-label{ font-size:14px; }
.summary-bar .sum-pill{ font-size:13px; } /* 12px → 13px : 한글 가독 하한 */
/* --- 손가락 : 최소 44px --- */
.gnb-link{ padding:10px 0; }
.rail-node .go,
.principle-body .link,
.converge-out .link,
.wl-media{ min-height:44px; }
/* --- 종착점 --- */
.in-card{ padding:var(--s4); }
.converge-out{ aspect-ratio:3 / 4; min-height:0; padding:var(--s5) var(--s4); }
/* --- 요약 바 : 라벨도 알약과 같은 가운데 정렬 --- */
.summary-bar .sum-label{ justify-content:center; }
/* --- 페이지 끝 여백 --- */
body{ padding-bottom:var(--s8); }
/* ---------------------------------------------------------
데스크톱용 줄바꿈 해제
넓은 화면 기준으로 넣은
이 375px 에서는 "아이를" 같은
짧은 토막 줄을 만듭니다. 좁은 화면에서는 흐르게 둡니다.
--------------------------------------------------------- */
/* 히어로 제목은 원문의 3줄 구성이 그대로 좋습니다 — 접지 않습니다.
대신 둘째 줄("읽은 것을 쓸 수 있는 아이를" ≈ 11.7em)이 항상 한 줄에
들어가도록 글자 크기를 화면 폭에 물립니다. */
.hero .lede br.pc,
.section-head h2 br.pc,
.stage1-copy > p br.pc,
.principle-body .sub br.pc,
.in-why br.pc,
.converge-out p br.pc,
.rail-node h3 br.pc,
.rail-node .who br.pc,
.qlist li span br.pc{ display:none; }
.display-1, .display-2, .lede, .title{ word-break:keep-all; }
/* ---------------------------------------------------------
SYSTEM : 화면을 합리적으로 쓰도록 다시 짭니다
당근 모바일은 4열 정사각 카드(374×374)를 1열 174px 짜리
납작한 행으로 바꿉니다 — 세로로 그냥 늘리지 않습니다.
--------------------------------------------------------- */
/* 주도 밴드 : 세로로 쌓으면 이미지 3장이 500px 을 씁니다 → 한 줄 3칸 */
.zone-band{
grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:10px; row-gap:0;
}
.zbracket--teacher,
.zbracket--self,
.zbracket--together{ grid-column:auto; margin-right:0; }
.zchar{ height:78px; margin-bottom:10px; }
.zbracket .line{ margin:0; justify-content:center; }
.zbracket .line::before,
.zbracket .line::after{ display:none; }
/* 상단 밴드는 '범례' 역할 — 아래 타임라인의 구간 헤더와 같은 크기·굵기로 맞춥니다 */
.zbracket .zlabel{ font-size:13px; font-weight:700; letter-spacing:0.02em; padding:0; }
/* 스텝 : 가로 레일을 세로 타임라인으로 옮깁니다.
구분선으로 나누면 '목록'이지만, 선과 점으로 이으면 '흐름'이 됩니다.
데스크톱에서 가로로 하던 이야기를 모바일 문법으로 옮긴 것입니다. */
/* 상단 밴드를 내렸으므로 그 자리를 위해 잡아둔 여백도 함께 걷습니다.
(데스크톱은 .rail margin-top 56 + .rail-track padding-top 24 = 80px 이
캐릭터 밴드 자리였습니다 — 모바일에는 그 밴드가 없습니다) */
.rail{ margin-top:var(--s6); }
.rail-track{ row-gap:0; padding-top:0; position:relative; }
/* 구간 헤더 : 어느 단계가 어느 주도인지 타임라인 안에서 바로 읽히도록 */
/* 구간 헤더 : 색 면을 깔면 구분은 되지만 페이지가 투박해집니다.
대신 레일 선의 '색'이 구간을 말하게 하고(아래 규칙), 라벨은 이름만 답니다.
구분의 주역이 선이라 라벨은 작고 조용해도 섞이지 않습니다. */
.rail-zone{
display:flex;
align-items:center;
position:relative;
background:none;
padding:0 0 0 40px; /* 글의 왼쪽 축은 단계 제목과 동일 */
margin:36px 0 14px; /* 위를 크게, 아래를 작게 → 아래 단계에 붙습니다 */
}
.rail-zone span{
flex:0 0 auto;
font-size:13px; font-weight:700;
letter-spacing:0.05em; /* 자간을 벌려 본문과 다른 결로 */
color:#cf5f05;
}
.rail-zone--self span{ color:var(--ink-3); }
.rail-zone:first-child{ margin-top:0; }
/* 캐릭터를 구간의 얼굴로 — 상단 장식이 아니라 '누가 주도하는지'를 보여주는 표식.
라벨 바로 옆에 붙여야 한 덩어리로 읽힙니다.
오른쪽 끝으로 밀면(margin-left:auto) 둘 사이가 멀어져 별개로 보입니다. */
.zchar-sm{
display:block;
margin-left:10px;
height:48px; width:auto;
object-fit:contain;
flex:0 0 auto;
}
/* 같은 말을 두 번 하지 않습니다 — 캐릭터가 타임라인 안으로 들어왔으므로
상단 밴드는 모바일에서 내립니다 (약 150px 절약) */
.zone-band{ display:none; }
/* 연결선 : 데스크톱처럼 하나로 이어지고 끝에 화살촉이 붙습니다.
단계와 구간 헤더가 각자 자기 구간의 선을 그려 끊김 없이 이어집니다. */
.rail-track{ padding-bottom:20px; }
.rail-track::before{ display:none; }
.rail-track .rail-node::after{
display:block;
content:"";
position:absolute;
left:13px; top:30px; right:auto; bottom:-2px;
width:2px; height:auto;
background:var(--rail-color);
border:0; border-radius:2px;
opacity:1; transform:none;
}
/* 구간 라벨 자리에도 선을 이어 그립니다 */
.rail-track .rail-zone::before,
.rail-track .rail-zone::after{
content:"";
position:absolute;
left:13px; width:2px;
border-radius:2px;
}
.rail-track .rail-zone::before{ top:-36px; height:36px; }
.rail-track .rail-zone::after{ top:0; bottom:-14px; height:auto; }
.rail-track .rail-zone:first-child::before{ display:none; }
/* ── 구간별 레일 색 ────────────────────────────────────────
선이 바뀌는 것으로 구간을 말합니다. 스크롤하며 색이 바뀌는 걸 보게 되고,
선은 글자가 아니므로 본문과 섞일 여지가 없습니다.
형제 선택자(~)라 마크업은 그대로 두고 색만 이어받습니다. */
.rail-track .rail-node::after,
.rail-track .rail-zone::before,
.rail-track .rail-zone::after{ background:#ffc08a; } /* 선생님 주도 */
.rail-track .rail-zone--self::after,
.rail-track .rail-zone--self ~ .rail-node::after,
.rail-track .rail-zone--together::before{ background:var(--rail-color); } /* 아이 주도 */
.rail-track .rail-zone--together::after,
.rail-track .rail-zone--together ~ .rail-node::after{ background:#ffc08a; } /* 함께 주도 */
/* 화살촉도 마지막 구간 색에 맞춥니다 */
.rail-track::after{
background-image:url("data:image/svg+xml;utf8,");
}
/* 마지막 단계는 화살촉 안쪽까지 선을 내립니다 (데스크톱과 같은 물림 깊이) */
.rail-track .rail-node:last-child::after{ bottom:-13px; }
/* 화살촉 : 데스크톱 갈매기표(10.5×18 · 촉 6.5×7 · 3px 둥근 획)를 그대로 90° 돌린 것.
선 중심 x=14 와 촉 꼭짓점 x=14 를 정확히 맞춥니다. */
.rail-track::after{
display:block;
content:"";
position:absolute;
left:5px; bottom:0; top:auto; right:auto;
width:18px; height:10.5px;
border:0;
transform:none;
background:url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.rail-node{
display:grid;
grid-template-columns:28px minmax(0,1fr) auto;
align-items:start;
column-gap:12px;
height:auto;
padding:0 0 26px;
border-top:0;
}
.rail-node:last-child{ padding-bottom:0; }
/* 번호를 레일 위의 점으로 */
.rail-node .step{
grid-area:1 / 1;
display:flex; align-items:center; justify-content:center;
width:28px; height:28px;
border-radius:50%;
background:var(--white);
border:2px solid var(--rail-color);
color:var(--ink-3);
font-size:13px; font-weight:700;
position:relative; z-index:1;
}
.rail-node--key .step{
background:#ff9a50; border-color:#ff9a50; color:#fff;
}
/* 데스크톱 레일은 가로선을 scaleX 로 그리는 애니메이션이 걸려 있습니다.
세로선에 그대로 적용되면 사라지므로 해제합니다. */
.js .rail .rail-track::before,
.js .rail.is-in .rail-track::before{ transform:none; }
.rail-node h3{
grid-area:1 / 2;
margin:1px 0 0; min-height:0;
font-size:19px; line-height:1.35; letter-spacing:-0.02em;
}
/* 모바일에서는 소개 링크를 숨깁니다 — 바로 아래 1~5번 블록이 같은 내용입니다 */
.rail-node .go{ display:none; }
/* 설명은 캡션 위계 — 제목 19 : 설명 15 로 당근의 20 : 14 비례를 따릅니다 */
.rail-node .who{
grid-area:2 / 2 / 3 / 4;
margin-top:8px;
font-size:15px; line-height:1.6;
}
/* 요약 줄과 태그도 본문 열에 이어 붙입니다 */
.rail-node .rn-line{
grid-area:2 / 2 / 3 / 4;
margin-top:8px; font-size:15px; line-height:1.6;
}
.rail-node .rn-tags{
grid-area:3 / 2 / 4 / 4;
margin-top:10px;
}
.rail-node .rn-seq{
grid-area:2 / 2 / 4 / 4;
margin-top:8px; gap:12px;
}
.rn-seq p{ font-size:15px; line-height:1.6; }
.rn-seq span{ font-size:13px; padding:5px 10px; }
.rn-tags span{ font-size:13px; padding:5px 10px; }
/* ---------------------------------------------------------
HOW : 세로 세 덩어리(번호축 · 본문 · 그림)를
모바일에서는 [머리글 줄] → [본문] → [자료] 한 흐름으로
--------------------------------------------------------- */
.principle{
padding-top:var(--s7);
padding-bottom:var(--s7);
}
.principle:first-of-type{ margin-top:var(--s5); }
/* 머리글 : 번호·구분·캐릭터를 한 줄에 (세로 축으로 쌓지 않습니다)
※ 기본 규칙의 flex-direction:column 을 반드시 되돌려야 합니다.
display:flex 만 다시 써도 방향은 column 그대로 남습니다. */
.principle-index{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
gap:12px;
text-align:left;
}
.principle-index .n{
width:34px; height:34px;
font-size:17px;
flex:0 0 auto;
}
.principle-index .tag{
font-size:15px; font-weight:600;
color:var(--ink);
letter-spacing:-0.02em;
}
.principle-index .pchar{
margin:0 0 0 auto; /* 오른쪽 끝으로 */
max-width:76px;
flex:0 0 auto;
}
/* 순서 : 제목 → 본문 → 자료 → 링크.
행동 유도가 근거보다 먼저 나오면 그 아래 자료는 읽히지 않습니다.
.principle-body 를 display:contents 로 풀어 자식들을
.principle 그리드의 직접 항목으로 만든 뒤 order 로 재배열합니다. */
.principle-body{ display:contents; }
.principle-index{ order:1; }
.principle-body .title{
order:2; grid-column:1 / 13;
margin-top:var(--s3);
letter-spacing:-0.025em;
}
.principle-body .sub{
order:3; grid-column:1 / 13;
line-height:1.7;
}
.principle-figure{ order:4; grid-column:1 / 13; margin-top:var(--s5); }
.link-stack,
.principle-body > .link{
order:5; grid-column:1 / 13;
margin-top:var(--s4);
}
.principle-body > .link{ justify-self:start; } /* 그리드 항목이 되면 폭이 늘어납니다 */
.link-stack .link{ margin-top:0; }
.link-stack .link + .link{ margin-top:12px; }
/* 자료 : 체크리스트 4종을 2×2 로 (세로로 쌓으면 240px 을 씁니다) */
.checklist{ grid-template-columns:1fr 1fr; gap:8px; }
.checklist li{ padding:12px 14px; font-size:15px; gap:10px; }
.checklist .check{ width:19px; height:19px; }
/* 캡션을 위로 : 아래에 있으면 설명이지만, 위에 있으면 묶음의 이름표가 됩니다 */
.principle-figure{ display:flex; flex-direction:column; }
.checklist + .figure-caption{ order:-1; margin:0 0 10px; }
/* 방학 표 : 행 높이를 줄이고 숫자를 키웁니다 */
.vac-row{ padding:13px 0; }
.vac-season svg{ width:18px; height:18px; }
.vac-total{ padding-top:14px; }
}
/* 좁은 화면 : 팝업을 바텀시트로 (모바일 표준 패턴) */
@media (max-width:600px){
.wb-overlay{ align-items:flex-end; padding:0; }
.wb-dialog{
width:100%;
max-height:92vh;
border-radius:24px 24px 0 0;
padding:var(--s5) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
transform:translateY(28px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.wb-overlay.is-open .wb-dialog{ transform:none; }
/* 닫기 버튼과 제목 겹침
제목이 전폭이라 첫 줄 오른쪽 끝이 버튼 밑으로 들어갔습니다.
좌우에 '같은' 안쪽 여백을 주면 — iOS 내비게이션 바가 쓰는 방식 —
버튼 자리를 비우면서도 가운데 정렬이 그대로 유지됩니다. */
.wb-close{ top:10px; right:10px; } /* 40px 유지 — 탭 타깃 */
.wb-title{
font-size:21px;
padding:0 46px; /* 좌우 대칭 → 광학 중심 유지 */
}
.wb-sub{ font-size:15px; padding:0 10px; }
/* 워크북 : 레벨 칩은 줄바꿈 허용 (6개 × 44px 가 한 줄에 안 들어갑니다) */
.wb-panel{ padding:var(--s3) var(--s2); }
.wb-figure{ max-height:none; }
/* 교재 이미지가 오른쪽으로 밀려 있던 원인 :
데스크톱 시각 보정 translateX(40px) 이 모바일에서도 그대로 걸려 있었습니다.
폭이 1000px → 290px 로 줄었으니 보정값도 비율에 맞춰 줄입니다. */
.wb-figure:not(.is-inner) img{ transform:translateX(12px); }
.wb-controls{ flex-direction:column; align-items:stretch; gap:var(--s2); }
.wb-chips{ flex-wrap:wrap; justify-content:center; gap:6px; }
.wb-chip{ width:44px; height:44px; }
/* 기능 목록 : 항목마다 따로 가운데 정렬되어 체크 아이콘의 세로선이 어긋났습니다.
블록 자체를 가운데 두고(width:fit-content + margin auto)
항목은 왼쪽 맞춤(justify-items:start) → 아이콘이 한 줄에 섭니다. */
.wb-features{
display:grid;
grid-auto-flow:row;
gap:10px;
width:fit-content;
max-width:100%;
margin-left:70px; margin-right:auto; /* 패널 왼쪽 선에서 70px 안쪽 */
justify-items:start;
}
/* 리딩 · 러닝 · 단어장 : 2단 → 1단, 데스크톱용 시각 보정값 해제 */
.ln-panel, .wl-panel{ grid-template-columns:1fr; row-gap:var(--s3); }
/* 리딩 팝업 : 아이콘 줄과 태블릿은 한 덩어리의 그림이라 사이를 띄우지 않습니다.
(데스크톱은 좌우 2단이라 이 간격이 필요 없었는데, 1단으로 접히며 24px 이 생겼습니다) */
.rd-panel{ grid-template-columns:1fr; row-gap:0; }
/* 태블릿을 10px 끌어올려 아이콘 줄과 겹칩니다.
두 이미지의 배경이 같은 흰색이라 겹침이 보이지 않고,
GIF 안쪽에 남아 있는 투명 여백만 상쇄됩니다.
아이콘 줄이 위 레이어(z-index 1)라 겹쳐도 가려지지 않습니다. */
.rd-steps{ margin-top:16px; position:relative; z-index:1; }
.rd-tablet{ margin-top:-20px; position:relative; z-index:0; }
.rd-tablet, .rd-steps, .ln-tablet{ margin-left:auto; margin-right:auto; }
.ln-tablet{ transform:none; max-width:320px; }
.ln-info{ padding-left:0; text-align:center; }
.ln-dots{ justify-content:center; }
/* 스와이프 : 세로 스크롤만 브라우저에 넘기고 가로는 우리가 처리합니다 */
.ln-swipe{
display:block;
margin-top:12px;
font-size:13px; color:var(--ink-3);
text-align:center;
}
.ln-nav{ display:none; } /* 모바일은 스와이프 */
.ln-dot{ width:12px; height:12px; position:relative; }
/* 보이는 크기는 그대로, 손가락이 닿는 범위만 넓힙니다 */
.ln-dot::after{ content:""; position:absolute; inset:-14px; }
.ln-dots{ gap:14px; padding:6px 0; }
.wb-features li{ font-size:15px; }
/* 모달 본문 타입 : 페이지 본문과 같은 스케일로 */
.ln-info .area,
.ln-info .idx{ font-size:14px; }
.ln-info .en{ font-size:21px; margin-top:12px; }
.ln-info .ko{ font-size:17px; }
.ln-info .desc{ font-size:15px; line-height:1.6; min-height:0; margin-top:8px; }
/* 팝업 안 카드 제목이 팝업 타이틀(21px)보다 컸습니다 — 강약이 뒤집혀 있었습니다.
타이틀 21 > 카드 제목 17 > 본문 14 로 한 단계씩 내려갑니다. */
.rd-card{ padding:var(--s3) var(--s2); }
.rd-card h3{ font-size:17px; line-height:1.45; letter-spacing:-0.02em; }
.rd-card p{ font-size:14px; line-height:1.6; margin-top:6px; }
.wl-hint{ font-size:13px; }
.wb-note{ font-size:13px; }
.wl-panel{ padding:var(--s3); }
.wl-copy{ padding-left:0; transform:none; }
.wl-feats{ gap:12px; }
.wl-feats li{ font-size:15px; gap:10px; }
.wl-feats svg{ width:19px; height:19px; }
}
/* 작은 기기(320~360px) : GNB 가 한 줄에 들어가지 않습니다.
로고 150 + 버튼 159 = 309px > 가용 280px */
@media (max-width:360px){
.gnb-logo img{ width:132px; height:35px; }
.gnb-enter{ height:42px; padding:0 16px; font-size:15px; }
.gnb-nav{ gap:18px; }
.gnb-link{ font-size:15px; }
.summary-bar{ padding:14px 8px; column-gap:5px; }
.summary-bar .sum-pill br.pc{ display:none; } /* 억지 줄바꿈 해제 → 칸에 맞춰 흐름 */
/* 11px 은 한글에서 읽히지 않습니다. 글자를 줄이는 대신 3열 → 2열로 풀어
13px 하한을 지킵니다. (당근·토스 모두 최소 12~13px, 한글 본문은 13px) */
.summary-bar{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.summary-bar .sum-label{ grid-column:1 / 3; }
.summary-bar .sum-pill{ font-size:13px; padding:9px 6px; }
.rail-node{ grid-template-columns:26px minmax(0,1fr) auto; column-gap:10px; }
.rail-node h3{ font-size:18px; }
.rail-node .go{ font-size:14px; }
}
/* =========================================================
터치 기기 : 호버 상태 고착 방지
손가락은 '떼어도' 호버가 남습니다. 탭 한 번으로 요소가 뜨거나
흐려진 채 굳으면 사용자는 오류로 읽습니다.
색만 바뀌는 호버는 남기고, 위치·투명도를 바꾸는 것만 해제합니다.
========================================================= */
@media (hover:none){
.qlist li:hover{ transform:none; box-shadow:0 6px 16px rgba(17,18,19,0.05); }
.qlist li:hover .qicon--off{ opacity:1; transform:translateX(-50%); }
.qlist li:hover .qicon--on{ opacity:0; }
.rail-track:hover .rail-node:not(:hover){ opacity:1; }
a.rail-node:not(.rail-node--key):hover::before{ border-color:var(--rail-color); box-shadow:none; }
a.rail-node--key:hover::before{ box-shadow:none; }
a.rail-node:hover .go span{ border-bottom-width:1.5px; }
.principle-body .link:hover .arrow,
.converge-out .link:hover span{ transform:none; }
.wl-media:hover .wl-face--photo img{ transform:none; }
.converge-out .link:hover{ background:rgba(0,0,0,0.34); }
.goal-sound:hover{ background:rgba(0,0,0,0.34); }
}
/* =========================================================
모바일 : 스크롤 등장 애니메이션 해제
요소가 opacity:0 으로 시작하므로, 관찰자가 늦거나 빠르게 스크롤하면
내용이 '흰 화면'으로 남습니다. 데스크톱에서는 여유롭게 보이던 연출이
모바일에서는 로딩 실패처럼 읽힙니다. 내용을 처음부터 보여줍니다.
========================================================= */
@media (max-width:768px){
.js .reveal,
.js .converge .in-card,
.js .converge .converge-arrow,
.js .converge .converge-out,
.js .rail .zchar,
.js .rail .zbracket .line,
.js .rail .zbracket .tick,
.js .rail .rail-node > *,
.js .rail .rail-track::after{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
.js .converge .converge-plus{
opacity:1 !important;
transform:translate(-50%,-50%) !important;
transition:none !important;
}
.js .rail .rail-node::before{ transform:translateY(-50%) scale(1) !important; }
}
@media (prefers-reduced-motion:reduce){
*{ transition:none !important; animation:none !important; }
html{ scroll-behavior:auto; }
.js .reveal{ opacity:1 !important; transform:none !important; }
.js .converge .in-card,
.js .converge .converge-arrow,
.js .converge .converge-out{ opacity:1 !important; transform:none !important; }
.js .converge .converge-plus{ opacity:1 !important; transform:translate(-50%,-50%) !important; }
/* [치명 결함 수정] 여기가 opacity:0 이었습니다.
'OS 동작 줄이기'를 켠 사용자에게는 레일 01~05 단계 텍스트·캐릭터·브래킷이
영구히 보이지 않았습니다. 애니메이션을 끄는 것이지 내용을 숨기는 것이 아닙니다. */
.js .rail .zchar,
.js .rail .zbracket .line,
.js .rail .zbracket .tick,
.js .rail .rail-node > *{ opacity:1 !important; transform:none !important; }
.qlist .qicon--on{ opacity:0 !important; }
.qlist .qicon--off{ opacity:1 !important; }
.js .rail .rail-track::before{ transform:translateY(-50%) scaleX(1) !important; }
.js .rail .rail-track::after{ opacity:1 !important; }
.js .rail .rail-node::before{ transform:translateY(-50%) scale(1) !important; }
.rail-track:hover .rail-node:not(:hover){ opacity:1; }
}
/* ---------- 단계 상세 (B안) : 리딩 1단계와 같은 그레이 패널 구조 ---------- */
.stepfull{ margin-top:56px; }
.sf-head{ grid-column:1 / 13; }
.sf-head .display-2{ margin-top:var(--s2); }
.sf-head .sf-lede{
margin-top:var(--s3);
font-size:20px; line-height:1.85; color:var(--ink-2);
max-width:46em; word-break:keep-all;
}
.sf-body{ grid-column:1 / 13; margin-top:var(--s5); }
/* 그레이 패널 위에서는 내용 카드가 흰색이 됩니다 */
.stepfull .rd-panel{
margin-top:0; padding:0;
grid-template-columns:1fr 1.05fr;
column-gap:var(--s5);
align-items:stretch; /* 좌우 두 덩어리의 높이를 맞춥니다 */
}
/* 왼쪽 : 위 텍스트 카드 + 아래 음원 카드 (아래 카드가 남은 높이를 채웁니다) */
.stepfull .rd-panel > div{
display:grid;
grid-template-rows:auto 1fr;
row-gap:20px; /* 위·아래 카드 사이 */
}
.stepfull .rd-card{
background:var(--white);
padding:var(--s4) var(--s3);
display:flex; flex-direction:column; justify-content:center;
}
.stepfull .rd-steps{
background:var(--white); border-radius:16px;
padding:var(--s3); max-width:none; margin:0;
height:100%; object-fit:contain;
}
.stepfull .rd-tablet{
background:var(--white); border-radius:16px;
padding:var(--s4); max-width:none; margin:0;
height:100%; object-fit:contain;
}
@media (max-width:900px){
.stepfull .rd-panel{ grid-template-columns:1fr; row-gap:20px; }
.stepfull .rd-panel > div{ grid-template-rows:auto auto; }
.stepfull .rd-steps, .stepfull .rd-tablet{ height:auto; }
}
.ln-grid{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--s4) var(--gutter);
}
.ln-card{ background:var(--white); border-radius:20px; padding:var(--s4); }
.ln-card img{ display:block; width:100%; height:auto; border-radius:12px; background:#f4f4f4; }
.ln-card .cap{ margin-top:var(--s3); font-size:16px; font-weight:600; color:#ff9a50; }
.ln-card h4{ margin-top:6px; font-size:21px; font-weight:700; line-height:1.3; letter-spacing:-0.015em; }
.ln-card h4 span{ display:block; margin-top:4px; font-size:17px; color:var(--ink-2); }
.ln-card p{ margin-top:10px; font-size:16px; line-height:1.7; color:var(--ink-2); }
.stepfull .wb-panel{ background:var(--white); margin-top:0; }
.wbf-levels{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:var(--s3); }
.wbf-levels button{
width:44px; height:44px; display:flex; align-items:center; justify-content:center;
border-radius:999px; border:1.5px solid var(--line-2);
background:var(--white); font-family:inherit;
font-size:16px; font-weight:600; color:var(--ink);
cursor:pointer;
transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.wbf-levels button:hover{ border-color:var(--ink); transform:translateY(-2px); }
.wbf-levels button:focus-visible{ outline:2px solid #ff9a50; outline-offset:2px; }
.wbf-levels button.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.wbf-levels button[aria-selected="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* 역할 분리 : 레벨 선택은 섹션에서, 모달은 내지 전용 뷰 */
#wbModal .wb-chips, #wbModal .wb-features, #wbModal .wb-controls{ display:none; }
.wb-open{
position:relative;
display:block;
width:100%;
aspect-ratio:878 / 430; /* 6개 레벨 표지를 같은 크기로 정규화 */
max-height:min(462px, 46vh);
margin:var(--s3) auto 0;
padding:0; border:0; background:none; cursor:zoom-in;
}
.wb-open img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:contain;
transition:opacity .18s ease;
}
.wb-open.is-swapping img{ opacity:0; }
.wb-open:focus-visible{ outline:2px solid #ff9a50; outline-offset:4px; border-radius:16px; }
/* 클릭할 수 있다는 표시 */
.wb-open-badge{
position:absolute; right:14px; bottom:14px; z-index:2;
display:inline-flex; align-items:center; gap:6px;
padding:9px 15px; border-radius:999px;
background:rgba(17,18,19,.82); color:#fff;
font-family:inherit; font-size:14px; font-weight:600; letter-spacing:-0.01em;
box-shadow:0 6px 16px rgba(0,0,0,.16);
transition:background .15s ease, transform .15s ease;
pointer-events:none;
}
.wb-open-badge svg{ width:16px; height:16px; flex:0 0 auto; }
.wb-open:hover .wb-open-badge{ background:#ff9a50; transform:translateY(-2px); }
/* ④ 워크북 카드 : 왼쪽 실물 · 오른쪽 정보 (세로 여백 낭비 제거) */
#step04 .wb-panel{
display:grid;
grid-template-columns:1.9fr 1fr;
column-gap:var(--s3);
align-items:center;
padding:var(--s4) var(--s4) 0 0; /* 왼쪽·아래를 비워 책이 카드 끝까지 */
overflow:hidden;
}
#step04 .wb-panel .wb-open{
margin:0 0 -1px; /* 서브픽셀 흰 선 제거 */
aspect-ratio:878 / 430; /* 이미지가 absolute 라 높이를 반드시 잡아줘야 합니다 */
max-height:none;
align-self:end; /* 책 아래가 카드 밑변에 맞습니다 */
}
/* contain 이라 잘리지 않고, 카드 안쪽 여백 안에서 최대 크기로 들어갑니다 */
#step04 .wb-panel .wb-open img{ object-fit:contain; object-position:center; }
#step04 .wb-panel .wb-open-badge{
top:-5px; bottom:auto;
left:50%; right:auto;
transform:translateX(-50%);
background:#ff9a50;
}
#step04 .wb-panel .wb-open:hover .wb-open-badge{
background:#e07a2f;
transform:translateX(-50%) translateY(-2px);
}
#step04 .wb-side{ padding:0 0 var(--s4) 0; }
#step04 .wb-side{ display:flex; flex-direction:column; align-self:center; }
/* 오른쪽 열 : 모두 가운데 정렬 (체크리스트만 가운데 놓인 왼쪽 정렬 블록) */
#step04 .wb-side{ align-items:center; }
#step04 .wb-side .ph-step{ margin:0 auto; }
#step04 .wb-side .wb-note{ margin-top:var(--s3); text-align:center; font-size:15px; }
#step04 .wb-side .wbf-levels{ justify-content:center; margin-top:var(--s2); }
#step04 .wb-side .wb-controls{
width:100%;
margin-top:var(--s3); padding-top:var(--s3);
justify-content:center;
}
#step04 .wb-features{
flex-direction:column; align-items:flex-start;
gap:var(--s2);
width:fit-content; margin:0 auto;
}
#step04 .wb-features li{ font-size:16px; }
@media (max-width:900px){
#step04 .wb-panel{
grid-template-columns:1fr;
row-gap:var(--s3);
padding:12px var(--s3) var(--s3);
overflow:hidden; /* 확대된 책이 흰 카드 밖으로 나가지 않게 */
}
/* 책을 30% 크게 : 박스를 세로로 늘리고 이미지를 확대 */
#step04 .wb-panel .wb-open{
margin:-16px 0 0; /* 카드 윗변과 책 사이 빈 공간 축소 */
aspect-ratio:878 / 560;
}
#step04 .wb-panel .wb-open img{ transform:translateX(10px) scale(1.3); }
/* 배지를 이미지 안쪽 하단으로 : 카드 밖으로 나가지 않게 */
#step04 .wb-panel .wb-open-badge{
top:auto; bottom:4px;
left:50%; right:auto;
transform:translateX(-50%);
}
#step04 .wb-panel .wb-open:hover .wb-open-badge{
transform:translateX(-50%) translateY(-2px);
}
/* 카드 안 요소는 모두 가운데, 체크리스트만 '가운데 놓인 왼쪽 정렬 블록' */
#step04 .wb-side{ padding:0; align-items:center; }
#step04 .wb-side .ph-step{ margin:0 auto; }
#step04 .wb-side .wb-note{ margin-top:var(--s3); text-align:center; }
#step04 .wb-side .wb-controls{
display:block; /* flex 정렬 변수 제거 */
width:100%;
margin-top:var(--s3); padding-top:var(--s3);
}
#step04 .wb-features{
display:flex; flex-direction:column; align-items:flex-start;
gap:var(--s2);
width:fit-content; /* 내용 폭만큼만 */
margin-left:auto; margin-right:auto;
transform:translateX(-10px); /* 시각 보정 : 왼쪽으로 10px */
}
#step04 .wb-features li{
font-size:16px; line-height:1.5;
align-items:flex-start; gap:10px;
}
#step04 .wb-features svg{ margin-top:2px; }
/* 레벨 칩 6개를 무조건 한 줄로 : 폭을 균등 분할 */
#step04 .wb-side .wbf-levels{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:6px;
justify-content:stretch;
}
#step04 .wb-side .wbf-levels button{ width:100%; height:42px; font-size:15px; }
}
/* ④ 워크북 다음 단계 : 독후활동 3종 */
.wbx{ margin-top:var(--s6); }
br.mo{ display:none; } /* 모바일에서만 줄바꿈 */
@media (max-width:768px){ br.mo{ display:inline; } }
.wbx-head{ text-align:center; }
.wbx-head h3{
font-size:24px; font-weight:700; line-height:1.4; letter-spacing:-0.015em;
}
.wbx-head > p{
margin-top:10px;
font-size:17px; line-height:1.7; color:var(--ink-3);
}
.wbx-grid{
margin-top:var(--s3);
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--s2);
}
.wbx-desc b{ font-weight:700; color:var(--ink); }
/* 결론 : 워크북 + 3종 = 4종 */
.wbx-sum{
margin-top:var(--s3);
background:var(--white);
border-radius:16px;
padding:var(--s4) var(--s3);
text-align:center;
}
.wbx-sum-row{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:10px;
}
.wbx-sum-row b{ font-size:16px; font-weight:700; color:var(--ink-3); }
.wbx-sum .pill{
padding:8px 16px; border-radius:999px;
background:var(--surface);
font-size:16px; font-weight:600; color:var(--ink-2);
white-space:nowrap;
}
.wbx-sum .pill--key{ background:#fff4ec; color:#e07a2f; }
.wbx-sum-txt{
margin-top:var(--s3);
font-size:24px; line-height:1.6; letter-spacing:-0.015em;
color:var(--ink-3);
}
.wbx-sum-txt b{ font-weight:700; color:var(--ink); }
.wbx-item{
background:var(--white);
border-radius:16px;
padding:var(--s4);
display:flex; flex-direction:column;
}
.wbx-item .cap{
font-size:13px; font-weight:700; letter-spacing:0.04em;
color:#ff9a50;
}
.wbx-item h4{
margin-top:8px;
font-size:20px; font-weight:700; line-height:1.3; letter-spacing:-0.015em;
}
.wbx-item h4 span{
display:block; margin-top:4px;
font-size:14px; font-weight:600; letter-spacing:0; color:var(--ink-3);
}
.wbx-desc{
margin-top:12px;
font-size:16px; line-height:1.7; color:var(--ink-2);
}
.wbx-lv{ margin-top:auto; padding-top:var(--s3); display:flex; flex-wrap:wrap; gap:5px; }
.wbx-lv span{
padding:6px 11px; border-radius:8px;
background:var(--surface);
font-size:14px; font-weight:600; color:var(--ink-3);
}
.wbx-note{
margin-top:auto; padding-top:var(--s3);
font-size:15px; color:var(--ink-3);
}
.wbx-item .link{
margin-top:auto;
align-self:flex-start;
display:inline-flex; align-items:center; gap:8px;
font-size:16px; font-weight:600; color:var(--ink);
border-bottom:1.5px solid var(--ink); padding:var(--s3) 0 2px;
}
.wbx-item .link span.arrow{ display:inline-block; transition:transform .15s ease; }
.wbx-item .link:hover span.arrow{ transform:translateX(3px); }
@media (max-width:900px){
.wbx{ margin-top:var(--s5); }
.wbx-head h3{ font-size:20px; }
.wbx-head > p{ font-size:15px; }
.wbx-grid{ grid-template-columns:1fr; }
.wbx-lv, .wbx-note, .wbx-item .link{ margin-top:var(--s2); padding-top:0; }
.wbx-sum{ padding:var(--s4) var(--s3); }
/* 4종을 2 × 2 로 : + 기호가 줄 끝에 매달리지 않게 */
.wbx-sum-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
max-width:320px;
margin:0 auto;
}
.wbx-sum-row b{ display:none; }
.wbx-sum .pill{
font-size:15px; padding:11px 8px;
text-align:center; white-space:normal;
}
.wbx-sum-txt{
margin-top:var(--s3); font-size:16px; line-height:1.6;
word-break:keep-all; text-wrap:balance;
}
}
/* 독서기록장 모달 : 표지 → 내지 전환 */
#rjModal .wl-panel{ grid-template-columns:1fr 1.5fr; column-gap:var(--s5); }
#rjModal .wl-copy{ padding-left:78px; } /* 단어장 대비 오른쪽으로 30px */
/* 내지를 볼 때는 왼쪽 설명을 접고 이미지만 크게 */
#rjModal .wl-panel.is-inner{ grid-template-columns:1fr; }
#rjModal .wl-panel.is-inner .wl-copy{ display:none; }
#rjModal .wl-panel.is-inner .rj-figure{ max-width:84%; }
.rj-figure{
position:relative;
display:block;
max-width:96%;
margin:0 auto;
transition:max-width .2s ease;
padding:0; border:0; background:none;
cursor:zoom-in;
overflow:visible;
}
.rj-figure img{
display:block; width:100%; height:auto;
background:none;
transition:opacity .18s ease;
}
.rj-figure.is-loading img{ opacity:0; }
.rj-figure.is-cover{ max-width:44%; } /* 세로형 표지는 작게 */
/* 표지일 때 배지는 책 오른쪽 아래 모서리에 걸칩니다 */
#rjModal .rj-figure.is-cover .rj-badge{
top:auto; bottom:16px;
left:auto; right:-34px;
transform:none;
}
#rjModal .rj-figure.is-cover:hover .rj-badge{ transform:translateY(-2px); }
/* 배지는 워크북 '내지 보기'와 동일 규격 */
.rj-badge{
position:absolute; top:10px; left:50%; z-index:2;
transform:translateX(-50%);
display:inline-flex; align-items:center; gap:6px;
padding:9px 15px; border-radius:999px;
background:#ff9a50; color:#fff;
font-family:inherit; font-size:14px; font-weight:600; letter-spacing:-0.01em;
line-height:1;
box-shadow:0 6px 16px rgba(0,0,0,.16);
transition:background .15s ease, transform .15s ease;
pointer-events:none;
}
.rj-badge svg{ width:16px; height:16px; flex:0 0 auto; }
#rjModal .wl-feats li,
#brModal .wl-hint{ letter-spacing:-0.01em; }
.rj-figure:hover .rj-badge{
background:#e07a2f;
transform:translateX(-50%) translateY(-2px);
}
.rj-dots{
margin-top:var(--s3);
display:flex; gap:8px;
justify-content:flex-start;
padding-left:calc(var(--s4) + 78px); /* 왼쪽 안내문과 같은 축 */
}
.rj-dots button{
width:9px; height:9px; padding:0;
border:0; border-radius:50%;
background:var(--line-2);
cursor:pointer;
transition:background .15s ease, transform .15s ease;
}
.rj-dots button.is-on{ background:var(--ink); transform:scale(1.15); }
/* 북리포트 모달 : 레벨 선택 + 자료 이미지 (독서기록장·단어장과 같은 판) */
#brModal .wl-panel{ grid-template-columns:1fr 1.35fr; column-gap:var(--s5); align-items:center; }
#brModal .wl-copy{ padding-left:60px; }
.br-levels{ display:flex; flex-wrap:nowrap; gap:7px; } /* 7개 한 줄 */
.br-levels button{
flex:0 0 auto;
width:44px; height:44px;
display:flex; align-items:center; justify-content:center;
border-radius:999px; border:1.5px solid var(--line-2);
background:var(--white); font-family:inherit;
font-size:15px; font-weight:600; color:var(--ink);
cursor:pointer;
transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.br-levels button:hover{ border-color:var(--ink); transform:translateY(-2px); }
.br-levels button.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.br-book{
margin-top:var(--s4);
font-size:24px; font-weight:700; line-height:1.35; letter-spacing:-0.015em;
color:var(--ink);
}
#brModal .wl-hint{ margin-top:12px; }
.br-figure{ display:block; max-width:62%; margin:0 auto; }
.br-figure img{
display:block; width:100%; height:auto;
transition:opacity .18s ease;
}
.br-figure.is-loading img{ opacity:0; }
/* 모바일 : 자료 팝업 2단 → 1단, 레벨 칩은 균등 분할로 한 줄 유지 */
@media (max-width:768px){
#brModal .wl-panel,
#rjModal .wl-panel{
grid-template-columns:1fr;
row-gap:var(--s3);
padding:var(--s3);
}
#brModal .wl-copy{ padding-left:0; }
#rjModal .wl-copy,
#wlModal .wl-copy{ padding-left:40px; }
.br-levels{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:5px;
}
.br-levels button{ width:100%; height:40px; font-size:14px; }
.br-book{ margin-top:var(--s3); font-size:19px; }
.br-figure{ max-width:100%; }
.rj-figure.is-cover{ max-width:52%; }
#rjModal .wl-panel.is-inner .rj-figure{ max-width:100%; }
.rj-dots{ padding-left:0; justify-content:center; margin-top:var(--s2); }
.rj-badge{ font-size:13px; padding:8px 13px; }
#rjModal .rj-figure.is-cover .rj-badge{ right:-10px; bottom:10px; }
}
.wbx-copy .sub{ margin-top:var(--s3); font-size:18px; line-height:1.9; color:var(--ink-2); }
.wbx-copy .link{
display:inline-flex; align-items:center; gap:8px;
font-size:18px; font-weight:600; color:var(--ink);
border-bottom:1.5px solid var(--ink); padding-bottom:2px;
}
.wbx-copy .link .arrow{ display:inline-block; transition:transform .15s ease; }
.wbx-copy .link:hover .arrow{ transform:translateX(3px); }
/* 그레이 패널 위에서는 연두 틴트가 묻혀서, 흰색 80%로 띄웁니다 */
.wbx .checklist li{
background:rgba(255,255,255,0.8);
border-radius:12px;
padding:var(--s2) var(--s3);
}
.wbx .checklist{ gap:10px; }
.wbx .checklist .check rect{ fill:#ff9a50; } /* 상단 포인트 컬러와 통일 */
@media (max-width:768px){
.section--principles .principle{ padding:var(--s5) var(--s3) 0; border-radius:20px; }
}
@media (max-width:900px){
.wbx{ grid-template-columns:1fr; row-gap:var(--s4); }
}
@media (max-width:768px){
.wb-open{ max-height:none; }
.wb-open-badge{ right:8px; bottom:8px; padding:7px 12px; font-size:13px; }
}
.stepfull .wb-controls{ justify-content:center; }
@media (max-width:1024px){ .ln-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:768px){
.stepfull{ margin-top:40px; }
.sf-head .sf-lede{ font-size:17px; line-height:1.7; margin-top:12px; }
.sf-body{ margin-top:var(--s5); }
.ln-grid{ grid-template-columns:1fr; gap:var(--s3); }
.ln-card{ padding:var(--s3); }
.ln-card h4{ font-size:19px; }
.ln-card h4 span{ font-size:16px; }
.ln-card p{ font-size:15px; }
.ln-card .cap{ font-size:14px; }
.stepfull .rd-steps, .stepfull .rd-tablet{ padding:var(--s2); }
}
/* ===========================================================
마감 구간 여백 — 반드시 파일 맨 끝에 둡니다.
1661행의 @media 안 `.section{ padding-top:120px }` 가
앞쪽에 쓴 규칙들을 덮어쓰고 있었습니다. (동일 특이도 → 뒤가 우선)
=========================================================== */
.section--dest{ padding:0; }
.section--cta{ padding-top:var(--s7); padding-bottom:var(--s10); }
@media (max-width:768px){
.section--dest{ padding:0; }
/* [수정 1] 패널 아래 여백. 이제 패널이 DESTINATION 마감 문구로 끝나므로
영상 박스만 있을 때보다 넉넉하게 잡습니다. */
.section--principles .principle{ padding-bottom:var(--s6); }
/* 패널 radius(20px) 안쪽에 들어가는 카드이므로 한 단계 작은 값으로 맞춥니다 */
.section--principles .principle > .converge .converge-out{
border-radius:16px;
overflow:hidden;
}
/* [수정 2] 패널 아래 ~ DESTINATION 사이 : 24px → 44px (요청 +20px) */
.section--cta{ padding-top:44px; padding-bottom:var(--s6); }
}
/* ═══════════════════════════════════════════════════════════
UI/UX 정리 · 2026-09-17
당근·토스의 공통 규격을 기준으로 다듬은 항목들입니다.
═══════════════════════════════════════════════════════════ */
/* ── 1. 포커스 링 : 한 가지 규격으로 통일 ──
기존에는 잉크/오렌지 2색 × 오프셋 2·3·4·6px 이 섞여 있었고,
help-card · gnb · 문의 링크 · 모달 닫기에는 아예 없었습니다.
키보드 사용자에게는 '지금 어디에 있는지'가 유일한 단서입니다. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.help-card:focus-visible,
.gnb-link:focus-visible,
.gnb-enter:focus-visible,
.cta-contact a:focus-visible,
.wb-close:focus-visible{
outline:var(--focus-w) solid var(--focus);
outline-offset:var(--focus-o);
border-radius:6px;
}
.cta-btn:focus-visible,
a.rail-node:focus-visible,
.wl-media:focus-visible,
.wb-open:focus-visible,
.wbf-levels button:focus-visible,
.ln-nav:focus-visible,
.converge-out .link:focus-visible{
outline:var(--focus-w) solid var(--focus);
outline-offset:var(--focus-o);
}
/* ── 2. PC : 1025~1320px 구간의 좌우 여백 ──
32px 은 1200px 컨테이너가 화면에 닿기 직전 구간에서 답답합니다.
토스 48 / 당근 40 을 따릅니다. 1320px 이상은 컨테이너가 중앙 정렬되므로 그대로. */
@media (min-width:1025px) and (max-width:1320px){
:root{ --margin:48px; }
}
/* ── 3. 터치 : 탭했을 때 파란 사각형이 뜨는 것 방지 ── */
a, button, [role="button"]{ -webkit-tap-highlight-color:transparent; }
/* ── 4. 드래그 선택 색 : 기본 파랑 대신 브랜드 톤 ── */
::selection{ background:#ffe0c4; color:var(--ink); }
/* ── 5. 호버는 마우스가 있는 기기에서만 ──
손가락은 탭 후에도 호버가 남아 카드가 들린 채 굳습니다. */
@media (hover:none){
.help-card:hover{ transform:none; }
.help-card:hover .help-go{ transform:none; }
}
/* ── 6. 숫자 정렬 ──
전화번호·레벨·단계 숫자가 폭이 달라 미세하게 흔들립니다. */
.cta-contact,
.help-txt b,
.sum-pill,
.vac-count,
.vac-total b{ font-variant-numeric:tabular-nums; }
/* ── 7. 타입 스케일 정리 ──
기존 11·12·13·14·15·16·17·18·19·20·21·22·24·26·28 = 15단계.
인접 단계가 1px 차이라 위계가 생기지 않습니다.
(토스 9단계 · 당근 8단계) → 13/14/16/18/20/24/28 로 모읍니다. */
.title{ font-size:24px; } /* 26 → 24 */
.emphasis p{ font-size:20px; } /* 22 → 20 */
.cta-help-title{ font-size:20px; } /* 22 → 20 */
@media (max-width:768px){
.emphasis p{ font-size:18px; } /* 19 → 18 */
.cta-help-title{ font-size:18px; } /* 19 → 18 */
}
/* ── 9. Q&A 리드문 ──
앞 단계에서 이 문장을 19·21px 무리에 섞어 20px 로 내렸는데, 이것은 본문이 아니라
패널 안의 소제목급 문장이었습니다. 되돌리고 한 단계 더 키웁니다. */
.qbox .qlead{ font-size:24px; font-weight:300; line-height:1.5; letter-spacing:-0.015em; }
@media (max-width:1024px){
.qbox .qlead{ font-size:22px; }
}
@media (max-width:768px){
.qbox .qlead{ font-size:19px; line-height:1.55; letter-spacing:-0.02em; }
}
/* ── 8. 히어로 눈썹 라벨 : 화면 폭별 크기 ── */
@media (max-width:1024px){
.hero-eyebrow{ font-size:32px; margin-bottom:12px; }
}
@media (max-width:768px){
.hero-eyebrow{ font-size:24px; margin-bottom:8px; letter-spacing:-0.025em; }
}