/*
[DEV:CSS] 컴포넌트 스타일 인수인계 정리 (2026-08-28). 이번 정리는 주석만 변경.
이전 퍼블리셔본과의 실제 변경값: docs/STYLE_CHANGES.md / 파일·에셋 목록: docs/CHANGE_INVENTORY.csv
기본 컴포넌트와 후행 보정 규칙이 함께 있다. 동일 선택자의 마지막 선언 및 활성 미디어쿼리를 확인한다.
foundation.css 토큰을 우선 사용하되, 현재 코드는 요청별 px·색상 직접 지정도 포함한다.
[DEV:FONT] 푸터 제외 최소 14px, 홀수 px를 위 짝수로 정리, 14px 문구의 행간 22px.
중복된 동일 폰트 정책 주석은 이 안내로 통합했다. 이후 개별 요청의 실제 값은 해당 선언이 기준.
기존 날짜별 주석은 수정 맥락이며 백업 대비 신규 기능을 뜻하지 않는다. 동작 변경 시 JS와 반응형 규칙도 확인.
*/
/* 웹폰트는 foundation.css 에서 로드 (NanumSquareRound) */
/* ============================================================================
LAYOUT
========================================================================== */
.container,
.section__inner {
width: 100%;
max-width: var(--container-max); /* 공통 1200 */
margin: 0 auto;
padding-inline: var(--container-pad); /* 좌우 20 */
}
/* full-bleed section, inner content centered */
.section { position: relative; width: 100%; }
/* ============================================================================
BUTTON (Figma: button / variant primary·secondary, radius 10)
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
height: 52px;
padding-inline: var(--space-16);
border-radius: var(--radius-10);
font-family: var(--font-round);
font-weight: var(--weight-extrabold);
font-size: var(--font-label-3); /* 16 */
line-height: var(--lh-label-3); /* 20 */
color: var(--text-inverse);
white-space: nowrap;
transition: filter .15s ease;
}
@media (hover: hover) and (pointer: fine) {
.btn:hover { filter: brightness(1.04); } /* 밝기만, 움직임 없음 */
}
.btn--primary { background: var(--bg-brand-500); } /* #f97316 */
.btn--secondary { background: var(--bg-inverse-primary); } /* #303030 */
.btn--tertiary { background: var(--bg-primary); color: var(--text-secondary); } /* white bg */
.btn--outline {
background: transparent;
color: var(--text-primary);
border: 1.5px solid var(--border-dark-100);
}
.btn--ghost { background: var(--bg-slate-primary); color: var(--text-primary); }
.btn--text { background: transparent; color: var(--text-secondary); } /* 텍스트 버튼 — 바탕 없음 (최하위 준위) */
/* icon-right (chevron) — icon-arrow-right.svg 원본을 data URI 로 인라인 (file:// 에서 외부 SVG mask 는 CORS 차단),
currentColor 로 tint (버튼 텍스트 색을 그대로 따라감) */
.btn__arrow {
width: 24px; height: 24px; flex: none;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='rotate(-90 12 12) translate(4.8 7.8)'%3E%3Cpath d='M12.3515 0.351472C12.8201 -0.117157 13.5797 -0.117157 14.0483 0.351472C14.517 0.820101 14.517 1.57972 14.0483 2.04835L8.04835 8.04835C7.57972 8.51698 6.8201 8.51698 6.35147 8.04835L0.351472 2.04835C-0.117157 1.57972 -0.117157 0.820101 0.351472 0.351472C0.820101 -0.117157 1.57972 -0.117157 2.04835 0.351472L7.19991 5.50303L12.3515 0.351472Z' fill='black'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='rotate(-90 12 12) translate(4.8 7.8)'%3E%3Cpath d='M12.3515 0.351472C12.8201 -0.117157 13.5797 -0.117157 14.0483 0.351472C14.517 0.820101 14.517 1.57972 14.0483 2.04835L8.04835 8.04835C7.57972 8.51698 6.8201 8.51698 6.35147 8.04835L0.351472 2.04835C-0.117157 1.57972 -0.117157 0.820101 0.351472 0.351472C0.820101 -0.117157 1.57972 -0.117157 2.04835 0.351472L7.19991 5.50303L12.3515 0.351472Z' fill='black'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.btn--icon-right { padding-left: var(--space-16); padding-right: var(--space-12); }
.btn__arrow--left { transform: scaleX(-1); } /* 왼쪽 방향 화살표 (이전 등) */
.btn--sm .btn__arrow { width: 18px; height: 18px; } /* 텍스트 행간과 별개로 아이콘은 기존 18px 유지 · mask는 contain으로 비례 축소 */
/* sizes */
.btn--sm { height: 40px; font-size: var(--font-label-2); line-height: 22px; }
.btn--lg { height: 60px; font-size: var(--font-label-4); padding-inline: var(--space-24); }
.btn--w120 { width: 120px; }
.btn--w200 { width: 200px; }
.btn--block { width: 100%; }
.btn--pill { border-radius: 20px; } /* CTA 버튼 라운드 전역 통일 (pill → 20) */
/* 마이페이지 전용 스몰 버튼 — 라벨 길이가 달라도 폭을 맞춰 카드 우측 라인이 정렬되게 */
.btn--my { min-width: 120px; }
/* 비활성 — 구매 팝업 CTA(.modal__cta .btn[disabled])와 동일 톤: 회색 면 + 회색 글자
.is-disabled 는 '보기에만 비활성' — 클릭은 받아 조건 안내 팝업을 띄우는 용도 */
.btn:disabled, .btn[disabled], .btn.is-disabled {
background: var(--bg-tertiary);
color: var(--text-tertiary);
border-color: transparent;
filter: none;
}
.btn:disabled, .btn[disabled] { cursor: default; pointer-events: none; }
/* 텍스트 버튼은 원래 바탕이 없다 — 위 공통 비활성(회색 면)이 그대로 걸리면
비활성일 때만 없던 회색 박스가 튀어나온다. 면은 투명하게 두고 글자만 흐리게. */
.btn--text:disabled, .btn--text[disabled], .btn--text.is-disabled {
background: transparent;
color: var(--text-tertiary);
}
.btn--text:disabled .btn__arrow,
.btn--text[disabled] .btn__arrow,
.btn--text.is-disabled .btn__arrow { opacity: .45; }
/* ============================================================================
HEADER / GNB
========================================================================== */
.gnb {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
max-width: var(--container-max);
margin: 0 auto;
padding-inline: var(--container-pad);
}
/* 새 로고는 717×460 (옛 로고 77.9×29.7 보다 훨씬 세로가 김) — 같은 높이면 폭이 절반으로
보여서 작아 보인다. 옛 로고와 비슷한 존재감이 되도록 높이를 키운다. */
.gnb__logo { height: 72px; width: auto; }
.gnb__nav {
display: flex;
align-items: center;
gap: var(--space-40);
margin-left: 80px; /* 로고와 80px 간격, 좌측 정렬 */
margin-right: auto; /* 우측 그룹(CTA·계정)은 오른쪽 끝으로 */
font-family: var(--font-round);
font-weight: var(--weight-bold);
font-size: var(--font-label-3);
line-height: var(--lh-label-3);
}
.gnb__nav a { transition: opacity .15s ease; }
@media (hover: hover) and (pointer: fine) {
.gnb__nav a:hover { opacity: .7; }
}
.gnb__right { display: flex; align-items: center; gap: var(--space-20); }
.gnb__cta { display: flex; align-items: center; gap: var(--space-12); }
.gnb__account { font-size: var(--font-body-2); line-height: 22px; color: var(--text-tertiary)}
.gnb__account span{opacity:.4;}
/* GNB on the sky hero (light text over gradient) */
.gnb--on-hero { color: var(--text-inverse); }
.gnb--on-hero .gnb__account { color: var(--text-inverse-a80); }
/* 서브페이지 흰 헤더 (sticky) */
.site-header {
position: sticky; top: 0; z-index: 80;
width: 100%; background: var(--bg-primary);
transition: background .25s ease;
}
/* 스크롤 시: 흰색 반투명 + 축소, GNB는 dark 변형(Figma: Property 1=PC, Property 2=dark · node 10154:37517)
— 다크 로고 · 다크 텍스트 (index 히어로 헤더 / 서브 헤더 공통) */
.gnb { transition: height .25s ease; }
.is-scrolled {
position: fixed; top: 0; left: 0; width: 100%; z-index: 80;
background:#fff;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 1px 0 rgba(26, 26, 26, .08);
}
.is-scrolled .gnb { height: var(--gnb-scrolled-h); color: var(--text-primary); } /* 로고 72px 이 들어갈 높이 · 네비 top 과 같은 변수 */
/* 로고 교체 — 예전엔 흰 로고에 filter:brightness(0) 을 걸었는데, 그러면 로고의
하늘색 포인트까지 통째로 검게 뭉갠다. 흰/어두운 두 파일을 겹쳐두고 보이는 쪽만 바꾼다. */
.gnb__logo--dark { display: none; }
.is-scrolled .gnb--on-hero .gnb__logo--light { display: none; }
.is-scrolled .gnb--on-hero .gnb__logo--dark { display: block; }
.is-scrolled .gnb__account { color: var(--color-gray-6); }
@media (hover: hover) and (pointer: fine) {
.is-scrolled .gnb__account button:hover { color: var(--text-secondary); }
}
.site-header.is-scrolled { position: sticky; } /* 서브는 sticky 유지(점프 방지) */
/* ============================================================================
미리 체험하기 · 프리뷰 카드
========================================================================== */
.preview-cards { display: flex; gap: var(--space-40); width: 100%; align-items: stretch; }
.preview-card {
flex: 1; min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: var(--space-40);
padding: var(--space-32) var(--space-40);
border-radius: var(--radius-24);
}
.preview-card--sky { background: var(--bg-sky-100); } /* #bfe6fd */
.preview-card--lilac { background: var(--color-lilac-50); } /* #e0dcf8 */
.preview-card__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); text-align: center; }
.preview-card__title { font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: var(--font-title-6); line-height: 1.5; color: var(--text-primary); }
.preview-card__desc { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-label-3); line-height: var(--lh-label-3); color: var(--text-slate-secondary); opacity: .8; }
.preview-card__mock { width: 100%; max-width: 384px; height: auto; border-radius: var(--radius-16); box-shadow: var(--shadow-100); }
.preview-card__actions { display: flex; gap: var(--space-20); justify-content: center; }
/* ============================================================================
HERO (KV)
========================================================================== */
.hero {
position: relative;
min-height: 1080px;
overflow: hidden;
color: var(--text-inverse);
/* 하늘 그라디언트 : #2f9ff5 → #a4ebff (bottom) */
background: linear-gradient(to top, #a4ebff 2.6%, #41abff 53%);
}
.hero__header { position: fixed; top: 0; left: 0; width: 100%; z-index: 80; }
/* [개발자 확인 20260827] 정적 KV: 원본 1920×1102 캔버스와 텍스트 좌표를 비율로 유지한다.
기존 영상용 딤/마스크는 적용하지 않아 전달받은 KV_bg 색상이 그대로 보인다.
modifier로 구분하여 이전 hero 반응형 padding/최소높이 규칙과 충돌하지 않게 한다. */
.hero.hero--static-kv {
min-height: 0;
padding: 0;
aspect-ratio: 1920 / 1102;
background: #38c5d3;
}
.hero.hero--static-kv::before { content: none; }
.hero__kv-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center bottom;
pointer-events: none;
}
.hero__kv-text {
position: absolute;
left: 18.75%; /* 360 / 1920 */
top: 22.2323%; /* 245 / 1102 */
width: 35.416667%; /* 680 / 1920 */
margin: 0;
z-index: 2;
line-height: 0;
}
.hero__kv-text > img { display: block; width: 100%; height: auto; }
/* [개발자 확인 20260827] 모바일/패드에서는 KV_txt를 상단 중앙에 배치하고
KV_bg의 아이가 하단에 보이도록 크롭 기준을 조절한다. 영상용 하단 여백은 사용하지 않는다. */
@media (max-width: 1024px) {
.hero.hero--static-kv { aspect-ratio: auto; height: clamp(640px, calc(480px + 40vw), 860px); }
.hero__kv-bg { object-position: 65% bottom; }
.hero__kv-text { top: 128px; left: max(24px, calc((100% - 520px) / 2)); width: calc(100% - 48px); max-width: 520px; }
}
/* [개발자 확인 20260827] 모바일 KV_txt 이미지만 부모 너비의 75%로 축소하고
좌우 자동 여백으로 중앙 정렬한다. PC/패드 크기 및 기존 등장 효과는 유지한다. */
@media (max-width: 768px) {
.hero__kv-text > img { width: 75%; margin-inline: auto; }
}
/* 배경 영상 — 히어로 전체를 덮음. 재생 전/실패 시에는 poster가 배경이 된다.
영상 좌우·하단은 마스크로 서서히 투명해져 hero 그라디언트로 스며든다. */
.hero__video {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; /* 하단 기준 · 가운데 정렬 */
height: 100%;
display: flex; align-items: flex-end; justify-content: center;
overflow: hidden;
background: center bottom / cover no-repeat; /* JS가 poster를 배경으로 넣음 (모바일·비재생 시) */
}
/* 카피 뒤 딤 — 밝은 하늘·구름에 흰 글씨가 묻히지 않게 히어로 위쪽만 아주 살짝 누른다.
영상(.hero__video)이 아니라 히어로 전체에 거는 이유: 모바일은 영상이 화면 아래쪽
블록이라 영상에만 딤을 깔면 영상이 시작되는 지점에 가로 경계선이 그어진다.
z-index 1 — 영상(0) 위, 카피(20) 아래. */
.hero::before {
content: '';
position: absolute; left: 0; right: 0; top: 0;
height: 62%;
z-index: 1;
pointer-events: none;
/* 순수 검정 대신 하늘 배경과 같은 계열의 짙은 블루 — 회색빛으로 탁해지지 않고 톤이 유지된다 */
background: linear-gradient(to bottom,
rgba(10, 44, 92, .24) 0%,
rgba(10, 44, 92, .12) 45%,
rgba(10, 44, 92, 0) 100%);
}
.hero__video-el {
width: 100%; max-width: 1920px; height: 100%;
object-fit: cover;
object-position: center bottom; /* 프레임 하단 기준 */
display: block;
/* 가장자리를 서서히 투명하게 → hero 그라디언트로 스며듦 */
-webkit-mask-image:
linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
mask-image:
linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
margin-left:100px;
}
/* 회오리 콘페티 — 영상과 완전히 같은 배치 규칙을 써야 캐릭터를 따라간다.
(SVG 를 1920x1080 캔버스로 감싸 놨으므로 cover 크롭 결과가 영상과 일치한다) */
.hero__confetti {
position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
z-index: 1; /* 영상 위 (히어로 카피 20·모달보다는 아래) */
width: 100%; max-width: 1920px; height: 100%;
object-fit: cover;
object-position: center bottom;
margin-left: 100px; /* 영상과 동일한 오프셋 */
opacity: .7; /* 캐릭터를 가리지 않게 연하게 */
pointer-events: none;
display: block;
}
/* 중앙 고정 스테이지 — 1920×1080 디자인 캔버스를 화면 중앙에 고정.
창을 가로/세로로 줄여도 배치는 유지되고 가장자리만 잘린다. */
.hero__stage {
--kv-u: 1px; /* 디자인 1px. 좁은 화면에서는 responsive.css 가 이 값만 줄인다 */
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: calc(1920 * var(--kv-u));
height: calc(1080 * var(--kv-u));
}
.hero__stage > img { position: absolute; pointer-events: none; }
/* KV-full 좌표 (x/y/width, 1920×1080 기준) + z-order(뒤→앞)
Figma: Frame 1618875143 (10256:8835) — 그래픽을 화면 중앙 하단으로 재배치 */
.hero__stage .kv-wind { left: calc(592 * var(--kv-u)); top: calc(457 * var(--kv-u)); width: calc(1039 * var(--kv-u)); z-index: 1; }
.hero__stage .cloud-bottom2 { left: calc(419 * var(--kv-u)); top: calc(620 * var(--kv-u)); width: calc(2002 * var(--kv-u)); z-index: 2; }
.hero__stage .cloud-bottom1 { left: calc(-710 * var(--kv-u)); top: calc(679 * var(--kv-u)); width: calc(1129 * var(--kv-u)); z-index: 3; }
.hero__stage .kv-graphic { left: calc(551 * var(--kv-u)); top: calc(286 * var(--kv-u)); width: calc(920 * var(--kv-u)); z-index: 4; }
.hero__stage .kv-deco3 { left: calc(1426 * var(--kv-u)); top: calc(542 * var(--kv-u)); width: calc(84 * var(--kv-u)); z-index: 5; }
.hero__stage .kv-deco2 { left: calc(1114 * var(--kv-u)); top: calc(840 * var(--kv-u)); width: calc(357 * var(--kv-u)); z-index: 6; }
.hero__stage .kv-deco1 { left: calc(462 * var(--kv-u)); top: calc(540 * var(--kv-u)); width: calc(179 * var(--kv-u)); z-index: 7; }
.hero__stage .kv-light1 { left: calc(333 * var(--kv-u)); top: calc(750 * var(--kv-u)); width: calc(93 * var(--kv-u)); z-index: 8; }
.hero__stage .kv-light2 { left: calc(1559 * var(--kv-u)); top: calc(292 * var(--kv-u)); width: calc(64 * var(--kv-u)); z-index: 9; }
.hero__stage .kv-cloud { left: calc(1676 * var(--kv-u)); top: calc(357 * var(--kv-u)); width: calc(360 * var(--kv-u)); z-index: 10; }
/* ── KV 장식 별 (PC 전용 · .hero__stage--deco) ────────────────────────────
영상 위에 얹는 별만 담은 스테이지. 위 좌표계(--kv-u)를 그대로 쓰므로
창 크기가 바뀌어도 KV 디자인 좌표에 그대로 붙어 있는다.
z-index 2 — 영상(0)·딤(1) 위, 히어로 카피(20)와 모달 아래. */
.hero__stage--deco { z-index: 2; }
/* 배경 큰 별 — 고정 글로우 (애니메이션 없음).
.hero-cloud--pc 와 같은 방식으로 화면 중앙에서 margin 으로 밀어낸다.
창 폭이 변해도 카피와의 간격이 유지돼 글자와 겹치지 않는다.
카피 왼쪽 끝은 1440·1920 어느 폭에서든 중앙 기준 -605px (카피 블록이 고정폭 중앙정렬).
글자와 안 겹치려면 별 오른쪽 끝이 -605px 보다 왼쪽이어야 한다
→ margin-left(-1120) + width(480) = -640px. */
.hero__star {
position: absolute;
left: 50%;
margin-left: -1120px;
top: -60px;
width: 480px;
opacity: .5;
z-index: 2; /* 영상(0)·딤(1) 위, 카피(20) 아래 */
pointer-events: none; user-select: none;
}
/* light = 켜졌다 흐려지며 작아지는 반짝임 (좌표·크기는 위 .kv-light1/2 규칙 그대로) */
.hero__stage .kv-light1,
.hero__stage .kv-light2 {
transform-origin: 50% 50%;
animation: kv-twinkle 3.2s ease-in-out infinite;
}
.hero__stage .kv-light2 { animation-duration: 4.1s; animation-delay: -1.6s; }
/* 반짝임 자리 — 영상 속 캐릭터/풍선과 안 겹치게 띄운다.
영상 프레임(1920×1080) 안에서 풍선은 대략 x1300~1640 · y250~480 을 차지한다.
light2 의 Figma 원래 자리(1559,292)가 풍선 한가운데라 그 위 하늘로 올린다. */
.hero__stage--deco .kv-light2 { left: calc(1620 * var(--kv-u)); top: calc(140 * var(--kv-u)); }
@keyframes kv-twinkle {
0%,
100% { opacity: .12; transform: scale(.5); } /* 꺼진 상태 */
40% { opacity: 1; transform: scale(1); } /* 확 켜짐 */
75% { opacity: .45; transform: scale(.78); } /* 흐려지며 작아짐 */
}
@media (prefers-reduced-motion: reduce) {
.hero__stage .kv-light1,
.hero__stage .kv-light2 { animation: none; opacity: .9; }
}
/* copy block — 상단 중앙 (Figma 좌표 x666/y160/w587 = 화면 중앙 정렬) */
.hero__copy {
position: absolute;
left: max((100% - var(--container-max)) / 2, var(--container-pad));
top: 240px;
transform: none;
text-align: left;
align-items: flex-start;
width: min(587px, calc(100% - var(--container-pad) * 2));
display: flex;
flex-direction: column;
gap: var(--space-60);
z-index: 20;
}
.hero__copy > div { position: relative; } /* 장식 구름(.hero-cloud--b) 배치 기준 */
/* ── 콘페티 버스트 (현재 미사용) ────────────────────────────────────────
index.html 의 .kv-burst 마크업은 제거된 상태. 되살리려면 .kv-burst 안에
.kv-burst__bit 이미지들을 넣고 각 조각에 --x/--y/--r/--s/--dur/--dly 를 지정하면 된다.
※ .kv-burst__bit 의 max-width:none 은 필수 — 부모가 width:0 이라
foundation 의 전역 img{max-width:100%} 가 걸리면 조각 폭이 0 이 된다. */
/* 터지는 원점 — 화면 정중앙이 아니라 캐릭터가 있는 자리.
PC 는 영상이 히어로를 꽉 채우고 캐릭터 무리가 오른쪽 아래에 있으므로 그쪽으로 옮긴다.
(≤1024 는 영상이 화면 아래 블록으로 내려가므로 responsive.css 에서 다시 잡는다) */
.kv-burst {
position: absolute;
left: var(--burst-x, 70%);
top: var(--burst-y, 62%);
z-index: 3;
width: 0; height: 0;
pointer-events: none;
}
.kv-burst__bit {
position: absolute; left: 0; top: 0;
width: var(--s, 24px); height: auto;
/* max-width 해제 필수 — foundation 의 전역 `img { max-width: 100% }` 가 걸리는데
부모 .kv-burst 가 width:0 이라 100% = 0px 이 되어 조각이 전부 폭 0 으로 찌그러진다.
(콘페티가 "분명 넣었는데 안 보이던" 원인) */
max-width: none;
margin: calc(var(--s, 24px) / -2);
opacity: 0;
animation: confetti-pop var(--dur, 1.5s) cubic-bezier(.12, .7, .25, 1) calc(.5s + var(--dly, 0s)) forwards;
}
/* 직선으로 쭉 뻗지 않고 한 번 떠올랐다 흩어지는 "휘리릭" 궤적.
55% 지점을 목표점의 45% 위치 + 위로 52px 띄운 곳에 찍어 두면 그 사이가 곡선으로 보간되어
포물선을 그린다. 회전도 앞구간에서 더 빨리 돌려(65%) 끝에서 스르륵 멎는 느낌을 준다. */
@keyframes confetti-pop {
0% { transform: translate(0, 0) scale(.2) rotate(0deg); opacity: 0; }
12% { opacity: 1; }
55% {
transform:
translate(calc(var(--x) * .45), calc(var(--y) * .45 - 52px))
scale(1.06)
rotate(calc(var(--r) * .65));
opacity: 1;
}
78% { opacity: .85; }
100% {
transform: translate(var(--x), var(--y)) scale(.88) rotate(var(--r));
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.kv-burst { display: none; }
}
/* PC 전용 장식 구름 — 화면 중앙(left:50%)을 기준점으로 두고 margin 으로만 밀어내
창 폭이 바뀌어도 위치가 흔들리지 않는다. 영상(z-index 0) 위, 카피(20) 아래. */
.hero-cloud--pc {
position: absolute; left: 50%; z-index: 2;
pointer-events: none; user-select: none;
/* 등장(페이드) + 둥둥(이동) 두 애니메이션 병행 — 서로 다른 속성이라 충돌 없음.
카피·영상이 올라온 뒤에 따라 나오도록 딜레이를 준다 */
animation: cloud-in 1s ease .85s both,
cloud-bob-pc 6.5s ease-in-out .85s infinite;
}
@keyframes cloud-in { from { opacity: 0; } to { opacity: 1; } }
.hero-cloud--pc-r { /* 영상 오른쪽 바깥 — 풍선(중앙 기준 +600px)보다 더 바깥에 둔다 */
width: 281px;
margin-left: 880px;
top: 237px;
mix-blend-mode: luminosity;
filter: blur(7px);
opacity: 0.8;
}
.hero-cloud--pc-br { /* 오른쪽 하단 구석 — 아주 크게 확대해 모서리에 걸침.
다른 둘과 달리 중앙 기준 margin 이 아니라 오른쪽·아래 모서리에 붙인다
(창 폭이 변해도 구석에 그대로 있어야 하므로) */
left: auto;
right: -260px;
bottom: -220px;
width: 1000px;
/* 흰 구름은 채도가 0 이라 hue-rotate 만으로는 색이 안 붙는다.
sepia 로 색을 한 번 입힌 뒤 파랑으로 돌려 옅은 하늘톤을 만든다. */
filter: blur(9px) sepia(.7) hue-rotate(175deg) saturate(2.6);
opacity: .9;
/* 두 애니메이션에 각각 지정 — 한 값만 쓰면 등장 페이드(cloud-in)까지 느려진다 */
animation-duration: 1s, 9s;
animation-delay: .85s, -4.5s;
}
.hero-cloud--pc-l { /* 영상 왼쪽 아래 바깥 */
width: 520px;
margin-left: -1116px;
bottom: 52px;
animation-duration: 8s;
animation-delay: -3s;
filter: blur(7px);
mix-blend-mode: luminosity;
}
@keyframes cloud-bob-pc {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(10px, -24px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-cloud--pc { animation: none; }
}
/* ── KV 등장 애니메이션 ──────────────────────────────────────────────────
.reveal-line 이 넘침을 잘라내고, 안쪽 span 이 아래에서 위로 밀려 올라온다.
(다른 섹션에서도 그대로 재사용 가능한 공통 클래스) */
.reveal-line {
display: block;
overflow: hidden;
margin-bottom: -.14em; /* 받침·꼬리 글자 잘림 방지 */
}
.reveal-line > span {
display: block;
transform: translateY(112%);
opacity: 0;
animation: reveal-up 1s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes reveal-up {
from { transform: translateY(112%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* 순차 등장 — 아이브로우 → 타이틀 1행 → 2행 → 리드 */
.hero__eyebrow .reveal-line > span { animation-delay: .15s; }
.hero__title .reveal-line:nth-of-type(1) > span { animation-delay: .30s; }
.hero__title .reveal-line:nth-of-type(2) > span { animation-delay: .44s; }
.hero__lead .reveal-line > span { animation-delay: .66s; }
/* 배경 영상·구름은 한 박자 뒤에 은은하게 */
.hero__video { animation: hero-fade 1.4s ease .35s both; }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.reveal-line > span { animation: none; transform: none; opacity: 1; }
.hero__video { animation: none; }
}
.hero__eyebrow {
font-family: var(--font-round);
font-weight: var(--weight-bold);
font-size: var(--font-title-3); /* 18 */
line-height: var(--lh-title-3); /* 24 */
color: var(--text-inverse-a90, rgba(255,255,255,.9));
margin-bottom: var(--space-12);
}
.hero__title {
font-family: var(--font-neo);
font-weight: var(--weight-extrabold);
font-size: 60px;
line-height: 1.55; /* Figma 2줄 블록 높이 188 기준 */
color: var(--text-inverse);
margin: 0;
}
.hero__lead {
font-family: var(--font-round);
font-weight: var(--weight-bold);
font-size: var(--font-title-6); /* 24 */
line-height: var(--lh-title-6); /* 32 */
color: rgba(255,255,255,.9);
margin-top: var(--space-36);
}
.hero__lead strong { font-weight: var(--weight-extrabold); color: var(--text-inverse); }
.hero__actions { display: flex; gap: var(--space-20); }
/* scroll-to-top FAB — 화면 고정, 화살표는 위 방향 */
.fab-top {
position: fixed;
right: 40px; bottom: 60px;
width: 80px; height: 80px;
display: flex; align-items: center; justify-content: center;
background: var(--color-white);
border-radius: var(--radius-full);
box-shadow: 0 4px 6px rgba(102,102,102,.14);
z-index: 90;
}
.fab-top img { width: 24px; height: 24px; }
/* [KRS 이용권 구매 아이콘 SVG 교체 20260824 반영] 전달 SVG 자체에 원형·광택·그림자가 포함되어 별도 도형/텍스트 효과를 만들지 않는다. */
.fab-diag {
position: fixed;
right: 28px; bottom: 140px;
width: 104px; height: 104px;
padding: 0;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: none; border-radius: 0;
box-shadow: none; cursor: pointer;
z-index: 90;
}
.fab-diag__art { display: block; width: 100%; height: 100%; object-fit: contain; }
/* [KRS 이용권 구매 모바일 아이콘-only 20260824] 기본(PC)에서는 문구 포함 기존 SVG만 노출한다. */
.fab-diag__art--mobile { display: none; }
/* ----------------------------------------------------------------------------
이후 컴포넌트는 각 섹션의 Figma 컴포넌트/스타일을 확인한 뒤
1:1로 매핑해 아래에 추가한다. (토큰만 참조, 추측성 스타일 금지)
-------------------------------------------------------------------------- */
/* ============================================================================
SECTION 공통 (Figma: 섹션 프레임 py-120, 콘텐츠 1200)
========================================================================== */
.section--pad { padding-block: var(--space-60); overflow: hidden; }
/* 1025 부터 — responsive.css 의 (max-width: 1024px) 와 딱 1024px 에서 겹치지 않게 경계를 분리 */
@media (min-width: 1025px) { .section--pad { padding-block: 120px; } }
.section__inner + .section__inner { margin-top: 120px; }
/* 섹션 제목 (Figma: Display/Secondary/1 패밀리 · 28px · center) */
.sec-title {
font-family: var(--font-neo);
font-weight: var(--weight-extrabold);
font-size: 28px;
line-height: 1.5;
text-align: center;
color: var(--text-primary);
}
/* [강조 타이틀 행간 20260819 반영] 두 줄로 줄바꿈되는 강조 제목을 포함해 PC/모바일 공통 행간을 1.7로 통일한다. */
.sec-title--highlighted { line-height: 1.7; }
.sec-title em { font-style: normal; } /* [Figma 20260817] 타이틀 내 강조 span — 이탤릭 방지 */
.sec-title em.c-brand { color: var(--text-brand-500); }
.sec-title em.c-slate { color: var(--text-slate-primary); }
/* 참고 시안처럼 본문은 Bold, 핵심 구절만 ExtraBold로 구분하는 제목 */
.sec-title--mixed-weight { font-weight: var(--weight-bold); }
.sec-title--mixed-weight em,
.sec-title--mixed-weight strong {
font-style: normal;
font-weight: var(--weight-extrabold);
}
/* [PDF 20260818 반영] 첫 문장은 굵고 크게, 출발점 설명은 한 단계 작게 분리 */
.level-intro-title { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.level-intro-title strong { font-weight: var(--weight-extrabold); }
.level-intro-title small {
/* [진단 출발점 문구 스타일 통일 20260819 반영] 독서력 설명 문구와 동일한 크기·굵기·색상·행간·자간을 적용한다. */
font-family: var(--font-round); font-size: var(--font-body-5); line-height: 1.5;
font-weight: var(--weight-bold); color: var(--text-primary); letter-spacing: var(--letter-spacing-tighter);
}
/* [수정] SVG 기준 타이틀 하이라이트: #C7E4FF → #92B8FF 수평 그라데이션, 라운드 없음.
box-decoration-break:clone — 좁은 화면에서 텍스트가 여러 줄로 꺾여도 줄마다 배경이 따라붙는다. */
.sec-title__highlight {
display: inline;
background: linear-gradient(90deg, #C7E4FF 0%, #92B8FF 100%);
padding: 6px 16px;
border-radius: 0;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* [Figma 10575:31306 반영 20260817] 성장 리포트 — "부모님에게는?" 리드인 */
.report-lead-in {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-neo); font-weight: var(--weight-bold);
font-size: 28px; line-height: 1.5; color: var(--text-primary);
}
.report-lead-in img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.report-heading-copy {
display: flex; flex-direction: column; align-items: center;
gap: 8px; width: 100%;
}
.report-title-highlight {
display: inline;
padding: 0 4px 4px;
background: linear-gradient(to bottom, transparent 50%, #FDF4DE 50%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* [전문 코칭 타이틀 마커 색상 20260824 수정] `체계적인 승급과 보상`의 리포트 마커와 동일한 #FDF4DE를 사용하고 한 줄을 유지한다. */
.coaching-title-highlight {
display: inline-block;
padding: 0 4px 4px;
background: linear-gradient(to bottom, transparent 50%, #FDF4DE 50%);
white-space: nowrap;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* ============================================================================
SECTION 2 · 고민(Worry) + 카드 + CTA 배너
========================================================================== */
.concern { display: flex; flex-direction: column; align-items: center; gap: var(--space-40); }
/* [개발자 확인 20260826] 260825 MO 문단 간격 요청: 두 문장은 의미상 한 제목이지만 독립 블록으로 관리한다. */
.concern-intro-title > span { display: block; }
.concern-intro-title__paragraph { margin-top: var(--space-8); }
/* 슬라이드 + 화살표 + 카드 묶음 — .concern 과 같은 간격이라 레이아웃은 그대로,
모바일에서 이 안쪽 간격만 따로 줄일 수 있다 */
.concern-group {
display: flex; flex-direction: column; align-items: center;
gap: var(--space-40);
width: 100%;
}
.concern--b { gap: var(--space-60); } /* 그래서 KRS→배너 블록 (Figma gap 60) */
/* 고민 칩 (Figma: group pill, bg slate/primary, radius 999, Title/Primary/3) */
.worry { display: flex; flex-direction: column; align-items: center; }
.worry-chip {
display: inline-flex;
align-items: center;
gap: var(--space-12);
height: 72px;
padding-inline: var(--space-20);
background: var(--bg-slate-primary);
border-radius: var(--radius-full);
font-family: var(--font-round);
font-weight: var(--weight-bold);
font-size: var(--font-title-3); /* 18 */
line-height: var(--lh-title-3); /* 24 */
color: var(--text-primary);
}
.worry-chip__icon { width: 40px; height: 40px; }
/* 중앙 화살표 — 위아래 바운스 */
.concern-arrow { width: 40px; height: 40px; animation: arrow-bounce 1.4s ease-in-out infinite; }
@keyframes arrow-bounce {
0%, 100% { transform: translateY(-4px); }
50% { transform: translateY(4px); }
}
/* 카드 그리드 (3장, 살짝 회전 + 중앙 겹침) */
/* [DEV:INTRO] 우려 카드의 메인 강조/서브 제목/본문/상세 인용은 별도 크기와 행간을 사용. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
.concern-cards {
display: flex;
justify-content: center;
align-items: stretch; /* 세 카드 높이를 제일 긴 카드에 맞춤 */
gap: var(--space-8);
width: 100%;
}
.concern-card {
width: 400px;
flex: none;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-32);
padding: var(--space-48) var(--space-24) var(--space-24);
border-radius: var(--radius-24);
transform: rotate(var(--rot, 0deg));
}
.concern-card--sky { background: var(--bg-sky-100); } /* #bfe6fd */
.concern-card--lilac { background: var(--color-lilac-100); z-index: 2; margin-inline: -28px; }
.concern-card--mint { background: var(--color-mint-100); }
.concern-card__icon { width: 120px; height: 120px; }
.concern-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.concern-card__body {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
text-align: center;
}
/* [스크린샷 20260819 반영]
기존에는 제목 전체 배경이라 둘째 줄 "아이 탓이 아니에요."까지 강조됐다.
제목을 main/sub로 분리해 main만 28px·글자 높이의 절반만 강조한다.
[마커 색상 20260819 반영] 강조 색상은 요청값 #FDE3AB을 사용한다. */
.concern-card__title {
font-family: var(--font-neo);
font-weight: var(--weight-extrabold);
font-size: 24px;
line-height: 1.5;
color: var(--text-primary);
}
.concern-card__title-main {
display: block;
width: max-content;
max-width: 100%;
margin-inline: auto;
padding-inline: 4px;
font-size: 28px;
background: linear-gradient(to bottom, transparent 50%, #FDE3AB 50%, #FDE3AB 92%, transparent 92%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.concern-card__title-sub {
display: block;
font-size: 24px;
background: none; /* 20260819: "아이 탓이 아니에요."에는 하이라이트를 적용하지 않는다. */
}
.concern-card__detail{
width: 100%;
margin-top: var(--space-20);
/* [개발자 확인 20260827] 고민 카드 인용 박스의 상하좌우 패딩을 PC·모바일 공통 24px로 통일한다. */
padding: 24px;
/* [고민 카드 상세 배경 20260819 반영] 기존 #ffffff33에서 요청한 #ffffff50으로 투명도를 높인다. */
background: #ffffff50;
border-radius: var(--radius-8);
overflow: hidden;
}
.concern-card__desc {
/* [개발자 확인 20260827] 설명 문구에만 행간 토큰을 30px로 재정의한다. 다른 요소의 공통 행간은 유지한다. */
--lh-label-3: 30px;
margin-top: var(--space-12);
font-family: var(--font-round);
font-weight: var(--weight-bold);
/* [개발자 확인 20260827] 고민 카드 설명 글자 크기를 PC·모바일 공통 18px로 변경한다. 기존 행간·색상·굵기는 유지한다. */
font-size: 18px;
line-height: var(--lh-label-3);
color: var(--text-slate-secondary);
opacity: 1;
}
.concern-card__desc span{
color: var(--text-slate-primary);
font-weight: var(--weight-extrabold);
}
/* [추가] 첨부 이미지 반영(20260817): 인용구 박스(.concern-card__detail) 안 원문 —
박스 밖 소제목(.concern-card__desc)보다 작고 옅은 톤으로 위계를 낮춤 */
.concern-card__quote {
font-family: var(--font-round);
font-weight: var(--weight-regular);
/* [개발자 확인 20260827] 요청한 카드 하단 인용문을 PC·모바일 공통 14px로 변경한다. 강조 문구도 상속하며 색상·굵기는 유지한다. */
font-size: 14px;
line-height: 22px;
color: var(--text-slate-tertiary);
}
.concern-card__quote span {
color: var(--text-slate-secondary);
font-weight: var(--weight-extrabold);
}
.concern-card__cite {
font-family: var(--font-round);
font-weight: var(--weight-bold);
/* [개발자 확인 20260827] 인용문 아래 인명·이론명도 PC·모바일 공통 14px로 맞춘다. */
font-size: 14px;
line-height: 22px;
color: var(--text-slate-secondary);
opacity: .8;
margin-top: var(--space-12);
}
/* CTA 배너 (Figma: bg #2f9ff5, h420, radius 24) */
.cta-banner {
position: relative;
width: 100%;
height: 420px;
border-radius: var(--radius-24);
overflow: hidden;
background: var(--color-hero-blue);
display: flex;
align-items: center;
justify-content: center;
}
/* bg_img2 배경 이미지 버전 (하늘·구름·별·열기구 포함) */
.cta-banner--bg {
background: var(--color-hero-blue) url("/etc/krs/assets/index/bg-banner.png") center / cover no-repeat;
}
.cta-banner__text {
position: relative;
z-index: 2;
font-family: var(--font-neo);
font-weight: var(--weight-extrabold);
font-size: 36px;
line-height: 1.5;
text-align: center;
color: var(--text-inverse);
}
.cta-banner img { position: absolute; pointer-events: none; mix-blend-mode: luminosity;}
.cta-banner__balloon { left: -10px; top: -40px; width: 300px; z-index: 1; }
.cta-banner__chars { right: 24px; bottom: -20px; width: 460px; z-index: 1; }
.cta-banner__cloud { opacity: .6; mix-blend-mode: luminosity; }
.cta-banner__cloud--1 { left: -160px; top: -150px; width: 520px; }
.cta-banner__cloud--2 { right: -60px; bottom: -120px; width: 700px; }
/* ============================================================================
SECTION 3 · 좌측 타이틀 + 우측 피처 카드 리스트
========================================================================== */
.section--alt { background: var(--bg-secondary); } /* #fafafa */
.sec-title--left { text-align: left; }
.feature-split {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-40);
}
.feature-list { width: 640px; flex: none; display: flex; flex-direction: column; gap: 30px; }
.feature-card {
display: flex;
align-items: center;
gap: var(--space-40);
padding: var(--space-32) var(--space-28);
background: var(--bg-primary);
border-radius: var(--radius-24);
}
.feature-card__icon { width: 96px; height: 96px; flex: none; object-fit: contain; }
.feature-card__text { display: flex; flex-direction: column; gap: var(--space-12); }
.feature-card__eyebrow {
font-family: var(--font-round);
font-weight: var(--weight-bold);
font-size: var(--font-body-2); /* 14/22 */
line-height: 22px;
color: var(--text-tertiary);
opacity: .8;
}
.feature-card__title {
font-family: var(--font-neo);
font-weight: var(--weight-extrabold);
font-size: var(--font-title-6); /* 24 */
line-height: 1.5;
color: var(--text-primary);
}
.feature-card__desc {
font-family: var(--font-round);
font-weight: var(--weight-bold);
font-size: var(--font-body-3); /* 16 */
line-height: 1.5;
color: var(--text-slate-secondary);
opacity: .8;
}
/* ============================================================================
SECTION 공통 서브요소 (eyebrow / desc)
========================================================================== */
/* 섹션 라벨 — Figma: 연한 하늘 알약 + 3D 아이콘 32 (h44 · pad 20 · gap 10) */
.sec-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
padding-inline: var(--space-20);
background: var(--bg-sky-50);
border-radius: var(--radius-full);
font-family: var(--font-round);
font-weight: var(--weight-extrabold);
font-size: var(--font-body-3); /* 16 */
line-height: 1;
color: var(--color-hero-blue);
text-align: center;
}
.sec-eyebrow-white{
background: var(--color-white);
}
.sec-eyebrow__icon { width: 32px; height: 32px; flex: none; }
.sec-desc {
font-family: var(--font-round);
font-weight: var(--weight-bold);
font-size: var(--font-body-3); /* 16 */
line-height: 1.5;
color: var(--text-slate-secondary);
opacity: .8;
text-align: center;
}
.sec-desc em { font-style: normal; font-weight: var(--weight-extrabold); color: var(--text-primary); } /* [Figma 20260817] 강조 span */
.sec-head-group { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); }
/* ============================================================================
SECTION 4 · 레벨 시스템 / 제작 근거 / 입체 진단 / CTA
========================================================================== */
.s4 { display: flex; flex-direction: column; align-items: center; gap: var(--space-40); }
/* --- 레벨 시스템 --- */
.level { display: flex; flex-direction: column; align-items: center; gap: var(--space-40); width: 100%; }
.level__stage-visual { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center;
margin-bottom: var(--space-12);}
/* [레벨 모바일 Swiper 20260819 반영] PC에서는 기존 1200px 레이아웃을 유지하고 모바일에서만 Swiper가 이 트랙을 이동한다. */
.level-scroll { width: 100%; }
.level-con-slide { width: 100%; }
/* 말풍선 + 캐릭터 묶음 — 항상 화면 폭 기준 (레벨 바/카드만 가로 스크롤) */
.level__intro {
display: flex; flex-direction: column; align-items: center;
width: 100%;
}
.level-callout {
position: relative;
z-index: 3;
display: inline-flex;
align-items: center;
padding: var(--space-24) var(--space-40);
background: var(--bg-slate-primary);
border-radius: var(--radius-full);
font-family: var(--font-round);
font-weight: var(--weight-bold);
font-size: var(--font-title-3); /* 18 */
line-height: var(--lh-title-3);
color: var(--text-primary);
margin-bottom: var(--space-20);
}
.level-callout::after {
content: "";
position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
border: 13px solid transparent;
border-top-color: var(--bg-slate-primary);
border-bottom: 0;
}
.level-chars {
display: flex;
align-items: flex-end;
justify-content: center;
margin: 8px 0 -24px;
height: 300px;
position: relative;
z-index: 1; /* 레벨 바(2)보다 뒤로 — 캐릭터가 바 뒤에 서 있게 */
}
.level-chars picture { display: contents; }
.level-chars img { height: 100%; width: auto; object-fit: contain; }
.level-bar {
position: relative; z-index: 2; /* 캐릭터 영상(1) 앞으로 */
display: flex;
gap: var(--space-20);
width: 100%;
padding: 6px var(--space-16);
border-radius: var(--radius-16);
background: linear-gradient(90deg,
var(--color-level-basic) 0%,
var(--color-level-fluent) 27%,
var(--color-level-master) 52%,
var(--color-level-deep) 77%,
var(--color-level-lime) 100%);
}
.level-bar__group { flex: 1; display: flex; gap: var(--space-4); }
.level-bar__chip {
flex: 1; min-width: 0; /* 0 이어야 12칸이 실제로 균등 분할된다 (기본 auto 는 글자폭이 하한) */
display: flex; align-items: center; justify-content: center;
/* K12 처럼 3글자짜리가 좁은 칸에서 'K1 / 2' 로 쪼개지면 칩이 2줄이 되고
그 한 칸 때문에 바 전체 높이가 늘어난다 → 줄바꿈 금지 + 좌우 패딩은 폭 따라 줄어들게 */
white-space: nowrap;
padding: 10px clamp(2px, 1vw, var(--space-16));
font-family: var(--font-neo);
font-weight: var(--weight-extrabold);
font-size: 20px;
line-height: 24px;
color: #f8f8f8;
}
/* --- 단계 카드 --- */
.stage-cards { display: flex; gap: var(--space-20); width: 100%; }
.stage-card { flex: 1; display: flex; flex-direction: column; gap: var(--space-8); }
.stage-card__head {
display: flex; align-items: center; justify-content: center;
padding: var(--space-12) var(--space-16);
border-radius: var(--radius-16);
font-family: var(--font-neo);
font-weight: var(--weight-extrabold);
font-size: 20px; line-height: 24px;
color: #f8f8f8;
}
.stage-card__body {
display: flex; flex-direction: column; gap: var(--space-16);
padding: var(--space-20);
background: var(--bg-slate-primary);
border-radius: var(--radius-16);
}
.stage-card__grade { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-2); line-height: 22px; color: var(--text-tertiary); }
.stage-card__level { font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: 30px; line-height: 32px; }
.stage-card__desc { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-3); line-height: var(--lh-body-3); color: var(--text-slate-secondary); opacity: .8; }
.stage-card--basic .stage-card__head { background: var(--color-level-basic); } .stage-card--basic .stage-card__level { color: var(--color-level-basic); }
.stage-card--fluent .stage-card__head { background: var(--color-level-fluent); } .stage-card--fluent .stage-card__level { color: var(--color-level-fluent); }
.stage-card--master .stage-card__head { background: var(--color-level-master); } .stage-card--master .stage-card__level { color: var(--color-level-master); }
.stage-card--deep .stage-card__head { background: var(--color-level-deep); } .stage-card--deep .stage-card__level { color: var(--color-level-deep); }
/* --- 통계 3 --- */
.stat-row { display: flex; justify-content: center; gap: 60px; width: 100%; }
.stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); width: 220px; text-align: center; }
.stat__icon { width: 40px; height: 40px; }
.stat__label { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-2); line-height: 22px; color: var(--text-tertiary); }
/* tabular-nums — 스크롤 진입 시 0 → 실제값으로 카운트업하는데(index.html [data-count]),
숫자 폭이 제각각이면 올라가는 동안 좌우로 덜컹거린다. 고정폭 숫자로 잡아둔다. */
.stat__num { font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: 32px; line-height: 40px; color: var(--text-primary); display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.stat__num small { font-size: 20px; }
.stat__cap { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: 16px; line-height: 1.5; color: var(--text-secondary); opacity: .8; margin-bottom: 20px;}
/* --- 정밀 레벨링 카드 3 --- */
.dcards { display: flex; gap: var(--space-40); width: 100%; }
.dcard { flex: 1; border-radius: var(--radius-24); overflow: hidden; background: var(--bg-primary);}
.dcard__top {
position: relative; height: 220px; overflow: hidden;
display: flex; flex-direction: column; justify-content: center; gap: var(--space-8);
padding: var(--space-32);
}
/* 카드별 바탕색 — 위에 얹히는 .dcard__pattern PNG가 반투명이라 이 색이 그대로 비쳐 보임 */
.dcard:nth-child(1) .dcard__top { background: #4a90e2; } /* Leveled Text System — 블루 */
.dcard:nth-child(2) .dcard__top { background: #4ccede; } /* Cognitive Booster — 시안 */
.dcard:nth-child(3) .dcard__top { background: #5b6ee1; } /* 3-Way Diagnostic — 인디고 */
.dcard__pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.dcard__eyebrow { position: relative; z-index: 1; font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-2); line-height: 22px; color: var(--text-inverse-a80); }
.dcard__en { position: relative; z-index: 1; font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: 28px; line-height: 1.3; color: var(--text-inverse); }
.dcard__body { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-28); background: var(--color-slate-50);}
.dcard__lead { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-5); line-height: 1.5; color: var(--text-primary); }
.dcard__desc { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-2); line-height: 22px; color: var(--text-tertiary); }
.level-modal__cards .dcard__lead {
font-family: var(--font-neo);
font-weight: var(--weight-bold);
}
.level-modal__cards .dcard__lead strong {
font-weight: var(--weight-extrabold);
}
/* --- 입체 진단 (2컬럼 · 실제 CSS 드로잉, Figma 좌표 기반) --- */
/* container-type — 아래 --dc-u / --pm-u 가 쓰는 cqw(=이 박스 폭의 1%)의 기준점.
vw 와 달리 스크롤바를 포함하지 않고, JS 가 관여하지 않아 항상 실제 폭과 일치한다. */
.diagnosis { display: flex; gap: var(--space-40); align-items: center; justify-content: center; width: 100%; container-type: inline-size; }
/* 좌: 원형 다이어그램 — 디자인 캔버스 400×452
페르소나 맵과 같은 규칙: zoom 금지, "디자인 1px = --dc-u" 로 환산해 비례 축소.
캔버스가 정사각형이 아니라서 원(ring·node)에 %를 쓰면 타원이 되므로 좌표·크기 모두 --dc-u 를 쓴다. */
.diag-circle {
/* 남는 폭이 400 이상이면 원본 크기, 모자라면 딱 맞게 축소 — 미디어쿼리도 JS도 필요 없다 */
--dc-u: min(1px, calc(100cqw / 400));
position: relative; flex: none;
width: calc(400 * var(--dc-u));
height: calc(452 * var(--dc-u));
}
.diag-circle__ring { position: absolute; border-radius: 50%; }
.diag-circle__ring--outer { left: calc(30 * var(--dc-u)); top: calc(30 * var(--dc-u)); width: calc(340 * var(--dc-u)); height: calc(340 * var(--dc-u)); background: var(--bg-sky-100); opacity: .25; }
.diag-circle__ring--inner { left: calc(70 * var(--dc-u)); top: calc(70 * var(--dc-u)); width: calc(260 * var(--dc-u)); height: calc(260 * var(--dc-u)); background: var(--bg-sky-100); opacity: .45;}
.diag-circle__center {
position: absolute; left: calc(120 * var(--dc-u)); top: calc(124 * var(--dc-u));
width: calc(160 * var(--dc-u)); height: calc(160 * var(--dc-u)); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.diag-circle__center img { width: calc(140 * var(--dc-u)); height: calc(140 * var(--dc-u)); object-fit: contain; }
.diag-node {
position: absolute; width: calc(96 * var(--dc-u)); height: calc(96 * var(--dc-u)); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: clamp(14px, calc(16 * var(--dc-u)), 16px);
line-height: 22px;
color: var(--text-inverse);
white-space: nowrap;
}
.diag-node--top { left: calc(152 * var(--dc-u)); top: 0; background: #4985ff; }
.diag-node--left { left: calc(10 * var(--dc-u)); top: calc(233 * var(--dc-u)); background: #3dcbfe; }
.diag-node--right { left: calc(294 * var(--dc-u)); top: calc(233 * var(--dc-u)); background: #5ca9ff; }
/* 버튼만은 축소 대상 제외 — 탭 영역이 줄면 안 되므로 항상 실제 크기 (zoom 역보정도 불필요) */
.diag-circle__btn { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
/* 우: 페르소나 산점도 — 디자인 캔버스 740×452
----------------------------------------------------------------------------
축소는 zoom/transform 이 아니라 "디자인 1px = --pm-u" 환산으로 처리한다.
· 좌표(축·라벨·인디케이터)는 캔버스 대비 % → 비율이 어떤 폭에서도 그대로 유지
· 크기(이미지·글자)는 calc(N * var(--pm-u)) 로 비례 축소
· 테두리·점선은 --pm-u 와 무관한 순수 1px → 축소해도 절대 사라지지 않음
zoom 은 레이아웃 값을 반올림해 1px 실선/점선을 통째로 날려버리고,
offsetWidth/offsetLeft 까지 다른 좌표계로 돌려줘서 GSAP 계산도 어긋난다. */
/* 산점도 + 그 아래 안내 바를 한 덩어리로 (Figma: Frame 1618875087 · 740×501) */
.persona-col {
--pm-u: min(1px, calc(100cqw / 740));
flex: none; display: flex; flex-direction: column; gap: var(--space-8);
width: calc(740 * var(--pm-u));
}
/* ※ 글자 크기는 --pm-u 로 스케일하지 않는다 — 맵이 줄면 폰트까지 같이 줄어
모바일에서 읽을 수 없을 만큼 작아진다. 박스만 유동, 글자는 고정 + 줄바꿈 허용. */
.persona-map__note {
display: flex; align-items: center; justify-content: center;
min-height: 40px; padding: var(--space-8) var(--space-12);
background: var(--bg-slate-primary); border-radius: var(--radius-10);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 14px; line-height: 22px;
color: var(--text-secondary); text-align: center;
}
.persona-map {
--pm-u: min(1px, calc(100cqw / 740)); /* 디자인 1px 이 화면에서 차지하는 길이 */
position: relative; flex: none;
width: calc(740 * var(--pm-u));
height: calc(452 * var(--pm-u));
background: var(--bg-primary);
border: 0;
border-radius: var(--radius-24);
}
.persona-map__axis { position: absolute; }
.persona-map__axis--v { left: 50%; top: 13.274%; height: 73.673%; border-left: 1px dashed var(--color-gray-300); }
.persona-map__axis--h { left: 14.189%; top: 53.319%; width: 71.622%; border-top: 1px dashed var(--color-gray-300); }
.persona-map__edge {
position: absolute;
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: clamp(14px, calc(16 * var(--pm-u)), 16px);
line-height: 22px;
color: var(--text-slate-primary);
white-space: nowrap;
}
.persona-map__edge--top { left: 50%; top: 4.646%; transform: translateX(-50%); }
.persona-map__edge--bottom { left: 50%; bottom: 3.319%; transform: translateX(-50%); }
/* 좌우 라벨은 가로축(53.319%) 위에 세로 중앙 정렬 — 글자 크기가 clamp 로 따로 놀아도 축에서 안 벗어남 */
.persona-map__edge--left { left: 2.027%; top: 53.319%; transform: translateY(-50%); }
.persona-map__edge--right { right: 2.432%; top: 53.319%; transform: translateY(-50%); }
.persona-map__corner {
position: absolute;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 14px;
line-height: 22px;
color: var(--text-tertiary);
white-space: nowrap;
}
.persona {
position: absolute;
display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--pm-u));
}
.persona img { width: calc(60 * var(--pm-u)); height: calc(60 * var(--pm-u)); border-radius: 50%; }
.persona span {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 14px;
line-height: 22px;
color: var(--text-tertiary);
white-space: nowrap;
}
/* ============================================================================
[Figma 20260817 반영] SECTION 4 신규 블록 — 3-STEP 진단 / 레벨 박스 / 독서성향 안내패널 / KRS 비교
========================================================================== */
/* --- 3중 입체 진단 3-STEP (Figma 10575:30940) --- */
/* [DEV:DIAG] 진단 단계 이미지·본문 한 카드 구성, 첫 카드 교차 페이드와 단계별 노출. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
.diag3-code {
display: grid;
grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
align-items: center; gap: var(--space-12);
width: 1200px; max-width: 100%;
}
.diag3-code__card {
/* [개발자 확인 20260827] 첨부 SVG의 371×297 구조처럼 이미지와 문구를 하나의 F5FAFF 카드로 묶는다. */
min-width: 0;
padding: 16px;
overflow: hidden;
border-radius: 12px;
background: #f5faff;
}
/* [개발자 확인 20260827] 단일 카드 내부 이미지 영역은 SVG의 339×185·radius 12 규격을 따른다.
첨부 SVG 기준으로 외곽 라인은 제거하고, y 4px / blur 16px / #1A1A1A 9% 그림자를 적용한다. */
.diag3-code__media {
position: relative;
width: 100%;
aspect-ratio: 339 / 185;
overflow: hidden;
border-radius: 12px;
border: 0;
background: var(--bg-primary);
box-shadow: 0 4px 16px rgba(26, 26, 26, 0.09);
}
.diag3-code__screen {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: var(--bg-primary);
}
/* [개발자 확인 20260827] STEP 1의 두 진단 화면은 위치 이동 없이 opacity만 교차해 자연스럽게 전환한다. */
.diag3-code__media--crossfade .diag3-code__screen {
position: absolute;
inset: 0;
animation: diag3-screen-crossfade 8s ease-in-out infinite;
}
.diag3-code__media--crossfade .diag3-code__screen--second { opacity: 0; animation-delay: -4s; }
@keyframes diag3-screen-crossfade {
0%, 38% { opacity: 1; }
50%, 88% { opacity: 0; }
100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.diag3-code__media--crossfade .diag3-code__screen { animation: none; }
.diag3-code__media--crossfade .diag3-code__screen--second { display: none; }
}
/* [개발자 확인 20260827] 하단 문구 영역의 별도 배경·라운드를 제거하고 동일 카드 내부에 자연스럽게 이어 붙인다. */
.diag3-code__copy {
margin-top: 0;
padding: 18px 0 0;
border-radius: 0;
background: transparent;
text-align: center;
}
.diag3-code__title {
font-family: var(--font-round); font-size: 20px; line-height: 1.45;
font-weight: var(--weight-extrabold); color: var(--text-primary);
}
.diag3-code__desc {
margin-top: var(--space-8); font-family: var(--font-round); font-size: 16px; line-height: 1.5;
font-weight: var(--weight-bold); color: var(--text-tertiary);
}
.diag3-code__arrow { display: block; width: 24px; height: 120px; background: url('../assets/icons/icon-arrow-diag3.svg') center / contain no-repeat; }
/* [타이틀 색상 20260819 반영] "국내 유일"의 크기 강조는 유지하되 PC/모바일 모두 주변 검정 제목색을 상속한다. */
.diag3-title__only { display: inline-block; margin-right: .12em; font-size: 1.24em; color: inherit; }
/* --- 레벨 박스 (Figma 10575:30965) — 카드 테두리 + 배지 + CTA 버튼 --- */
/* [DEV:LEVEL] 레벨 안내 박스·팝업 CTA 및 작은 화면 스와이프. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
.level-box {
display: flex; flex-direction: column; align-items: center; gap: var(--space-40);
width: 100%; max-width: 1200px;
/* [배지-설명 간격 20260819 반영] 배지 하단부터 첫 설명까지 40px을 확보해 하단 패딩 40px과 균형을 맞춘다.
좌우 패딩은 기존 20px을 유지한다. */
padding: 74px var(--space-20) var(--space-40); /* 배지 실제 높이를 포함하면 설명까지 정확히 40px */
border: 1px solid var(--color-gray-150); border-radius: var(--radius-20);
position: relative;
}
/* [PDF 20260818 반영] 회색 배지 대신 블루톤을 사용해 독서력 항목의 시인성을 높인다. */
.level-box__badge {
position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
padding: var(--space-12) var(--space-4);
background: linear-gradient(135deg, #d8ecff, #b9d9ff); border-radius: 60px;
box-shadow: 0 8px 22px rgba(47, 159, 245, .16);
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: var(--font-body-5); color: var(--text-primary);
min-width: 240px; text-align: center;
}
/* [통이미지 코드화 20260819 반영] 텍스트 SVG 대신 수정·검색 가능한 본문과 각주를 실제 텍스트로 구성한다. */
.level-box__desc-code { width: 100%; max-width: 760px; text-align: center; }
/* [독서력 설명 폰트 통일 20260819 반영] 독서 취향·기질의 `.persona-outer__lead`와
폰트·크기·굵기·색상·행간·자간을 동일한 규격으로 맞춘다. */
.level-box__summary {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-5); line-height: 1.5; letter-spacing: var(--letter-spacing-tighter);
color: var(--text-primary); text-align: center;
}
.level-box__summary strong { font-weight: var(--weight-extrabold); }
/* [파란 마커 통일 20260819 반영] 독서력의 `읽기 역량`과 독서 취향·기질 용어가 동일한 마커 규격을 공유한다. */
.level-box__summary-term,
.persona-outer__term {
color: #1A1A1A;
background: linear-gradient(to bottom, transparent 50%, #DDE9FD 50%);
padding: 0 2px 2px;
border-radius: 0;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.level-box__criteria {
margin-top: var(--space-12);
font-family: var(--font-round); font-size: 16px; line-height: 1.5;
font-weight: var(--weight-bold); color: var(--text-tertiary);
}
/* [버튼 패딩 20260819 반영] btn--w200 고정 폭과 icon-right의 비대칭 좌우 패딩을 덮고
세로 패딩과 동일한 16px을 가로에도 적용해 네 방향 여백을 통일한다. */
.level-box__cta {
/* [개발자 확인 20260828] 레벨 안내 버튼의 PC·모바일 공통 글자 크기를 16px로 적용한다. */
font-size: 16px;
/* [개발자 확인 20260827] 손가락의 위치 기준은 레벨 버튼에만 추가한다.
공통 CTA에 relative를 지정하면 워크북 말풍선의 absolute 위치가 깨지므로 분리한다. */
position: relative; overflow: visible;
width: auto; height: auto;
margin-top: var(--space-8);
/* 100px 손 이미지가 하단 테두리 밖으로 잘리지 않도록 장식용 여유 공간을 확보한다. */
margin-bottom: 16px;
padding: var(--space-16);
}
/* [추가] 사용자 요청 반영: "독서력"(.level-box)과 같은 테두리 박스 + 상단 배지 패턴을
독서 취향·기질 섹션에도 적용 — 구조/네이밍은 .level-box를 그대로 따라간다 */
.persona-outer {
display: flex; flex-direction: column; align-items: center; gap: var(--space-40);
width: 100%; max-width: 1200px;
padding: 64px var(--space-20) var(--space-40);
border: 0; border-radius: var(--radius-20);
position: relative; isolation: isolate;
}
/* [개발자 확인 20260824] 라인 박스만 독립 reveal할 수 있도록 실제 border를 전용 절대 배치 레이어로 이동한다. */
.persona-outer__frame {
position: absolute; z-index: 0; inset: 0;
border: 1px solid var(--color-gray-150); border-radius: inherit;
pointer-events: none;
}
.persona-outer__badge {
position: absolute; z-index: 2; top: -20px; left: 50%; transform: translateX(-50%);
padding: var(--space-12) var(--space-4);
/* [배지 스타일 통일 20260819 반영] 독서력(.level-box__badge)과 같은 배경색·그림자를 사용한다. */
background: linear-gradient(135deg, #d8ecff, #b9d9ff); border-radius: 60px;
box-shadow: 0 8px 22px rgba(47, 159, 245, .16);
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: var(--font-body-5); color: var(--text-primary);
min-width: 240px; text-align: center;
}
.persona-outer__lead {
position: relative; z-index: 1;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-5); line-height: 1.5; color: var(--text-primary);
text-align: center;
}
.persona-outer__lead strong { font-weight: var(--weight-extrabold); }
/* --- 독서 성향 (Figma 10575:31029) — persona-map + 우측 안내 패널 --- */
.persona-box { position: relative; z-index: 1; display: flex; align-items: stretch; justify-content: center; gap: var(--space-40); width: 100%; container-type: inline-size; }
.persona-box__note {
flex: none; width: 342px;
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: space-between;
padding: 96px var(--space-8) 0;
overflow: visible;
background: #dbe9ff; border-radius: var(--radius-20);
}
.persona-box__note::before {
content: "";
position: absolute;
top: 50%;
left: -28px;
width: 36px;
height: 100px;
transform: translateY(-50%);
background: url("data:image/svg+xml,%3Csvg width='36' height='100' viewBox='0 0 36 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.50611 59.9951C-1.16869 54.1516 -1.16869 45.8484 3.50611 40.0049L35.51 0V100L3.50611 59.9951Z' fill='%23DBE9FF'/%3E%3C/svg%3E") center / 36px 100px no-repeat;
pointer-events: none;
}
.persona-box__note p {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-title-4); line-height: 1.6; color: var(--text-slate-primary);
text-align: center;
}
.persona-box__note p em { font-style: normal; font-weight: var(--weight-extrabold); }
.persona-box__note img {
display: block;
flex: none;
width: 253px;
height: 230px;
margin-top: var(--space-20);
object-fit: cover;
object-position: center top;
}
/* --- KRS 시스템 비교 (Figma 10575:31079) --- */
/* [DEV:COMPARE] 진단 비교 카드의 글자·추천 띠·모바일 두 열 및 여백. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
.krs-compare-section { max-width: 1240px; gap: 54px; }
.krs-compare-section .sec-title { font-weight: var(--weight-bold); line-height: 1.7; } /* 20260819: 다른 highlighted 타이틀과 행간 통일 */
.krs-compare-section .sec-title strong { font-weight: var(--weight-extrabold); }
.krs-compare-section .sec-title__highlight {
display: inline;
height: auto;
padding: 6px 16px;
line-height: inherit;
}
.krs-compare { display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; }
.krs-compare__col { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); flex: 0 1 371px; min-width: 0; max-width: 371px; }
.krs-compare__col--wide { flex-basis: 763px; max-width: 763px; }
.krs-compare__label { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: 28px; line-height: 42px; color: var(--text-slate-primary); text-align: center; }
.krs-compare__label--muted { color: var(--color-slate-400); }
.krs-compare__arrow { flex: none; width: 66px; height: 200px; object-fit: contain; transform: translateY(16px); }
/* [KRS 비교 카드 SVG 시안 20260824 반영] 하단 컬러 바가 카드의 16px 라운드 안에서 정확히 잘리도록 overflow를 적용한다. */
.krs-compare__card { border-radius: var(--radius-16); width: 100%; height: 424px; position: relative; overflow: hidden; }
.krs-compare__card--generic { background: var(--bg-slate-secondary); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-16); padding-top: 74px; }
.krs-compare__icon { width: 160px; height: 170px; object-fit: contain; }
.krs-compare__generic-desc { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: 28px; line-height: 40px; color: var(--color-slate-400); text-align: center; }
.krs-compare__persons { display: flex; gap: 21px; width: 100%; }
/* [KRS 비교 카드 컬러 시안 20260824 반영] 전달 SVG 기준으로 민준 카드는 기존 연블루를 유지하고 서연 카드는 #FFD7EC 핑크 배경으로 변경한다. */
.krs-compare__card--blue { background: #d0ecff; padding: 0; display: block; }
.krs-compare__card--sky { background: #ffd7ec; padding: 0; display: block; }
.krs-compare__photo {
position: absolute; top: 32px; left: 50%; transform: translateX(-50%);
width: 96px; height: 96px; flex: none;
border-radius: 50%; object-fit: cover; object-position: center top; background: var(--bg-primary);
}
/* [KRS 비교 서연이 프로필 원형 정렬 보정 20260820 반영] SVG 내부 크롭을 조정했으므로 카드에서 추가로 위로 밀던 -2px 오프셋을 제거한다. */
.krs-compare__card--sky .krs-compare__photo { object-position: center; }
.krs-compare__name {
position: absolute; top: 144px; left: 0; width: 100%;
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: var(--font-title-5); color: var(--text-primary); text-align: center;
}
.krs-compare__detail {
position: absolute; top: 196px; left: 24px; right: 24px;
display: flex; flex-direction: column; gap: var(--space-8);
width: auto; margin: 0; padding-top: var(--space-16);
border-top: 1px solid rgba(26,26,26,.2);
}
.krs-compare__detail div { display: flex; gap: var(--space-8); align-items: baseline; width: 203px; margin-inline: auto; }
.krs-compare__detail dt { width: 40px; flex: none; font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-body-5); color: var(--text-secondary); }
.krs-compare__detail dd { flex: 1; min-width: 0; margin: 0; font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-5); color: var(--text-primary); white-space: nowrap; }
/* [KRS 비교 카드 컬러 시안 20260824 반영] 레벨 강조색을 각 카드의 새로운 하단 바 컬러와 통일한다. */
.krs-compare__detail dd.krs-compare__k--blue { color: #36a8ff; font-weight: var(--weight-extrabold); }
.krs-compare__detail dd.krs-compare__k--sky { color: #f977bb; font-weight: var(--weight-extrabold); }
/* [KRS 비교 카드 SVG 시안 20260824 반영] 추천 바는 조작 버튼이 아닌 정적 정보 라벨이다. 클릭·호버·포커스 효과 없이 시안의 컬러 바만 유지한다. */
.krs-compare__recommendation {
position: absolute; left: 0; right: 0; bottom: 0;
width: 100%; height: 72px; flex: none; padding: 0;
display: flex; align-items: center; justify-content: center; gap: 12px;
border-radius: 0 0 var(--radius-16) var(--radius-16);
font-family: var(--font-round); font-size: 20px; font-weight: var(--weight-extrabold); color: #fff;
}
.krs-compare__card--blue > .krs-compare__recommendation { background: #36a8ff; }
.krs-compare__card--sky > .krs-compare__recommendation { background: #f977bb; }
/* [KRS 비교 카드 체크 아이콘 교체 20260824 반영] 전달받은 24×24 SVG가 축소되지 않도록 고정 크기로 배치한다. */
.krs-compare__check {
display: block; flex: 0 0 24px;
width: 24px; height: 24px;
}
/* [KRS 비교 카드 컬러 시안 20260824 반영] 체크 아이콘 내부 컬러도 하단 추천 바와 동일하게 맞춘다. */
.krs-compare__card--blue .krs-compare__check { color: #36a8ff; }
.krs-compare__card--sky .krs-compare__check { color: #f977bb; }
/* ============================================================================
추천사 (Figma: recomand · 10123:3976 — 1200×616)
구성 ① 인용 카드(연회색 라운드) ② 인물 사진 + 프로필(이름/직함/약력 2열)
사진은 카드 왼쪽으로 68px 빠져나와 걸치므로 .recomm 은 overflow 를 자르지 않는다.
========================================================================== */
/* [DEV:RECOMM] 추천 메시지와 교수 프로필의 PC/모바일 배치 및 말풍선 연결. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
.recomm { position: relative; }
/* 열기구 + 구름 장식 — 인용 카드 오른쪽 위 모서리에 걸친다 (Figma: teacher_cha 10348:11699).
카드(.recomm__quote)가 overflow:hidden 이라 카드 안에 두면 잘려서 .recomm 기준으로 띄운다.
컨테이너(1200) 오른쪽 밖으로 나가는 배치라 right 기준으로 잡아야 폭이 줄어도 안 흐트러진다.
바깥으로 나간 부분은 .section--pad 의 overflow:hidden 이 잘라준다. */
.recomm__deco {
position: absolute; inset: 0;
z-index: 2;
pointer-events: none; user-select: none;
}
.recomm__deco img { position: absolute; display: block; }
/* Figma 원좌표(1200 기준)는 열기구 right -235 · 구름 right -351 인데, 그건 1920 캔버스라
양옆 360px 여백이 있을 때 얘기다. 1440 에서는 여백이 120px 뿐이라 둘 다 잘려 안 보인다.
그래서 안쪽으로 당겨 1440 에서도 보이게 하고, 넓은 화면에서는 자연스럽게 더 드러나게 둔다. */
.recomm__deco-balloon { right: 12px; top: -108px; width: 225px; }
/* 열기구 옆 구름 — 카드 위쪽 선에 살짝 걸치게 */
.recomm__deco-cloud {
right: -39px;
top: 155px;
width: 132px;
opacity: 1;
z-index: 2;
}
/* 카드 왼쪽 위 작은 구름 — 오른쪽 열기구와 좌우 균형. 모바일에서도 남긴다 */
.recomm__deco-cloud2 { left: 40px; top: -24px; width: 92px; opacity: .9; }
/* ① 인용 카드
[수정] 첨부 이미지 반영(20260817): 회색 채움 → 흰 배경 + 얇은 테두리로 변경 */
.recomm__quote {
position: relative;
overflow: visible; /* 말풍선 꼬리가 카드 밖으로 이어져야 함 */
padding: var(--space-48) var(--space-40);
background: var(--bg-primary); /* 흰 배경 */
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-24);
text-align: center;
}
/* [추천사 PC 말풍선 길이 축소 20260820 반영] 폭은 유지하고 높이를 58px → 42px로 줄여 박스와 동일한 외곽선으로 연결한다. */
.recomm__quote::after {
content: '';
position: absolute; left: clamp(120px, 19vw, 245px); bottom: -41px;
width: 69px; height: 42px;
background: url('../assets/index/recomm-quote-tail-lined-short.svg') center / contain no-repeat;
z-index: 2;
}
.recomm__glow { /* Figma Star 210 — 좌하단 흐린 별 */
position: absolute; left: 120px; bottom: -60px; width: 178px;
pointer-events: none;
}
.recomm__lead {
position: relative; z-index: 1;
font-family: var(--font-round);
/* [개발자 확인 20260827] 요청 반영: 추천사 기본 문장 굵기를 Regular에서 Bold로 조정한다. */
font-weight: var(--weight-bold);
font-size: var(--font-body-3); /* 16 */
line-height: 28px;
color: var(--text-primary);
}
.recomm__point {
position: relative; z-index: 1;
margin-top: var(--space-24);
font-family: var(--font-round);
/* [개발자 확인 20260827] 기본 문장은 Bold, 아래 strong/em 강조 구간은 ExtraBold로 구분한다. */
font-weight: var(--weight-bold);
font-size: 18px; line-height: 30px;
color: var(--text-primary);
}
.recomm__quote strong,
.recomm__quote em {
font-style: normal;
font-weight: var(--weight-extrabold);
}
.recomm__point em { color: #0e8fdb; }
/* [개발자 확인 20260827] 진짜 독서와 동일한 반높이 마커를 KRS 및 책 읽는 아이 시스템 강조에도 공통 적용한다. */
.recomm__marker {
display: inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
background: linear-gradient(to bottom, transparent 58%, #fff29e 58%);
}
/* [추가] 첨부 이미지 반영(20260817): 사진·프로필 영역 뒤 풀블리드 연회색 밴드.
.recomm__band 는 인용 카드 아래부터 시작해 뷰포트 전체 폭으로 배경을 깔고,
사진·프로필(.recomm__body)은 그 위에 z-index로 얹는다.
[수정] 사용자 요청 반영: profile/name을 그레이 박스 안에서 "세로 가운데 정렬"하려면
박스가 내용보다 넉넉히 커야 한다 — min-height로 여유를 주고 flex로 body를 채운 뒤,
body도 flex로 profile을 가운데 정렬한다. */
.recomm__band {
/* [수정] 사용자 요청 반영: 위 인용 카드(.recomm__quote)와 겹치지 않도록 120px 간격 확보 */
position: relative;
margin-top: 88px;
min-height: 280px;
display: flex;
}
.recomm__band::before {
/* [수정] 사용자 요청 반영: 그레이 박스 자체의 40px 인셋을 제거하고 .recomm__band 박스와
정확히 일치시킴 — profile은 항상 band를 꽉 채우므로(centering 여유 없음), 박스 자체에
인셋을 주면 profile의 padding-top/bottom(40px)과 우연히 겹쳐 여백이 0으로 상쇄되는
문제가 있었다. 이제 텍스트~그레이 박스 여백은 오직 .recomm__profile의 padding만으로 결정된다. */
content: '';
position: absolute;
top: 0; bottom: 0;
left: 50%; width: 100vw;
transform: translateX(-50%);
background: var(--bg-slate-secondary); /* #ebeef6 */
z-index: 0;
}
/* ② 사진 + 프로필
[수정] 첨부 이미지 반영(20260817): 카드 왼쪽으로 크게 빠져나오던 사진을
카드 왼쪽 끝에 맞춰 살짝만 겹치도록 재배치 (기존 left:-68px → 0) */
/* [반응형 수정: recomm__photo]
기존엔 420px 고정폭 + 1024px 브레이크포인트에서 320px로 한 번에 점프하는 구조라,
그 사이(예: 1025~1150px)에서는 사진이 줄지 않고 그대로 있어 본문 텍스트(.recomm__body)
왼쪽 여백(padding-left)과 부딪히며 겹치는 구간이 생겼다.
width/height/left를 모두 clamp()로 바꿔 뷰포트 폭에 비례해 연속적으로 줄어들게 하고,
.recomm__body의 padding-left도 같은 clamp 값으로 맞물려 텍스트가 항상 사진 오른쪽에서
시작하도록 한다 (겹침 방지). 768px 이하의 세로 적층 레이아웃은 아래 반응형 미디어쿼리에서
position을 relative로 풀고 별도로 재정의한다. */
/* [수정] 사용자 요청 반영: 사진이 첨부 이미지보다 커서 글자와 겹쳤음 — 최대 크기를
420×650 → 300×470로 줄이고(비율은 유지), .recomm__body의 padding-left 최대값(324px)보다
항상 작게(300<324) 만들어 어떤 화면 폭에서도 텍스트와 겹치지 않도록 함 */
/* [추천사 사진 확대 20260819 반영] 데스크톱 최대 너비를 310px → 330px로 확대한다.
기존 486px 높이 안에서 원본 비율을 유지하며, 768px 이하의 200px/160px 모바일 규격은 그대로 둔다. */
.recomm__photo {
/* [수정] 그레이 박스 인셋 제거(0)에 맞춰 bottom도 40px → 0으로 보정 (박스 끝과 계속 일치) */
position: absolute; bottom: 0;
left: clamp(-24px, -2vw, 0px);
width: clamp(196px, 22vw, 330px);
height: clamp(305px, 34vw, 486px);
max-width: 100%;
z-index: 1;
pointer-events: none; user-select: none;
}
.recomm__photo img {
display: block;
width: 100%; height: 100%;
object-fit: contain; /* 넘치는 대신 비율 유지하며 축소 */
object-position: bottom left; /* 줄어들 때 아래쪽(그레이 박스 끝) 기준을 유지 */
}
/* [반응형 수정: recomm__photo] — 사진 폭(clamp)과 같은 비율로 좁아지도록
padding-left도 고정값(324px) 대신 clamp로 전환. 사진이 줄어드는 만큼 본문 시작 위치도
같이 왼쪽으로 당겨져, 사진과 텍스트 사이 간격이 항상 일정하게 유지된다. */
.recomm__body {
position: relative; z-index: 1;
flex: 1;
display: flex; align-items: center; /* [수정] 사용자 요청 반영: profile을 세로 가운데 정렬 */
padding-left: clamp(180px, 22.5vw, 324px); /* Figma 프로필 x = 324 (1440 기준 22.5vw) */
}
.recomm__profile {
/* [수정] 사용자 요청 반영: 위아래 패딩 40px 추가 */
position: relative; z-index: 1;
width: 100%;
padding-top: 40px; padding-bottom: 40px;
}
.recomm__name {
font-family: var(--font-round);
font-weight: var(--weight-extrabold);
font-size: 24px; line-height: 30px;
color: var(--text-primary);
padding-bottom: var(--space-4);
}
.recomm__name small { color: #0e8fdb; font-size: max(14px, .72em); }
.recomm__name span { font-size: max(14px, .78em); }
/* [추천사 이름 밑줄 정렬 20260819 반영] 기존 문단 기준 ::after를 이름 요소로 옮겨 PC·모바일 모두 `조병영` 바로 아래에 맞춘다. */
.recomm__person-name {
position: relative; display: inline-block;
padding-bottom: var(--space-4);
font-weight: inherit;
}
.recomm__person-name::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
height: 4px;
background: #0e8fdb; border-radius: 2px;
}
.recomm__role {
margin-top: var(--space-20);
font-family: var(--font-round);
font-weight: var(--weight-bold);
/* [개발자 확인 20260827] 교수님 소속 문구를 경력 목록과 동일한 14px로 표시한다. 이름·상단 추천사 크기는 유지한다. */
font-size: 14px;
line-height: 22px;
color: var(--text-primary);
}
.recomm__career {
display: flex; gap: var(--space-32);
margin-top: var(--space-20);
}
/* [개발자 확인 20260826] 260825 요청서의 추천사 약력 좌우 1:1 비율을 적용한다. */
.recomm__career ul { flex: 1 1 0; min-width: 0; }
/* [추천사 PC·모바일 하이픈 통일 20260819 반영] 現/前 태그를 숨기고 모든 약력을 동일한 `- 텍스트` 시작선으로 맞춘다.
하이픈은 absolute로 고정하고 본문에 왼쪽 여백을 줘 여러 줄에서도 텍스트 정렬을 유지한다. */
.recomm__career li {
position: relative;
padding-left: 12px;
text-indent: 0;
font-family: var(--font-round);
/* [개발자 확인 20260827] 교수님 경력 목록 전체를 PC·모바일 공통 14px로 변경한다. */
font-size: 14px; line-height: 22px;
color: var(--text-slate-secondary);
}
.recomm__career li + li { margin-top: var(--space-8); }
.recomm__career li::before { content: '-'; position: absolute; left: 0; top: 0; }
.recomm__career-tag { display: none; }
/* --- CTA 프로모 배너 (Figma: 10230:8831 · 10230:8824 — w1200 h152 · bg #11a1f4)
.cta-banner 를 그대로 쓰고 높이/배경만 재정의. 장식 이미지는 .cta-banner img 규칙(absolute)에 얹힌다. */
.cta-promo { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; }
.cta-promo > .sec-title { margin-bottom: var(--space-20); }
.cta-banner--promo { height: 152px; background: #11a1f4; }
.cta-banner__inner {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: var(--space-16);
}
.cta-banner__title {
font-family: var(--font-neo);
font-weight: var(--weight-extrabold);
font-size: var(--font-title-6); /* 24 */
line-height: 36px;
color: var(--text-inverse);
text-align: center;
}
.cta-banner__actions { display: flex; gap: var(--space-20); justify-content: center; }
/* 배경 장식 — 좌표는 Figma 1200 기준 (left/right + top) */
.cta-banner__glow { z-index: 1; }
.cta-banner__glow--r {
left: 0;
top: -90px;
width: 147px;
}
.cta-banner__glow--l { left: 163px; top: 80px; width: 241px; }
.cta-banner__art { z-index: 1; opacity: .7; }
.cta-banner__art--graph { right: 34px; top: -17px; width: 356px; }
.cta-banner__art--report { right: -66px; top: -62px; width: 387px; opacity: .4; }
.cta-banner__art--pen { left: 25px; top: -98px; width: 276px; }
/* [개발자 확인 20260827] 진단 안내 문구를 PC·모바일 공통 14px / 22px로 통일. */
.cta-promo__note {
font-family: var(--font-round);
font-size: 14px; line-height: 22px;
color: var(--text-slate-secondary);
text-align: center;
}
.btn--w220 { width: 220px; }
/* --- CTA 박스 --- */
.cta-box {
display: flex; flex-direction: column; align-items: center; gap: var(--space-16);
padding: var(--space-24) var(--space-40);
background: var(--bg-sky-50);
border-radius: var(--radius-24);
width: 100%;
}
.cta-box__title { font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: var(--font-title-6); line-height: 1.5; color: var(--text-primary); text-align: center; }
.cta-box__actions { display: flex; gap: var(--space-20); justify-content: center; }
/* ============================================================================
SECTION 5 · 독서 성장 시스템 (성장 곡선 + 탭 + 앱 목업)
========================================================================== */
.growth { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
.growth__curve { width: 100%; height: auto; display: block; }
.growth-cards { display: flex; justify-content: center; gap: var(--space-40); }
.growth-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); }
/* 단계 아이콘 + 태그 묶음 — 데스크톱에서는 display:contents 라 기존 레이아웃 그대로
(아이콘은 곡선 위 .growth__tiger 가 담당하므로 숨김) */
.growth-card__side { display: contents; }
.growth-card__icon { display: none; }
.growth-card__tag {
display: inline-flex; align-items: center; height: 40px; padding-inline: var(--space-20);
border-radius: var(--radius-full);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-title-3); line-height: var(--lh-title-3); color: var(--text-inverse);
}
.growth-card--1 .growth-card__tag { background: #3dcbfe; }
.growth-card--2 .growth-card__tag { background: #3a9dff; }
.growth-card--3 .growth-card__tag { background: #3773ff; }
.growth-card__box {
display: flex; flex-direction: column; align-items: center; gap: var(--space-12);
padding: var(--space-24) var(--space-40);
background: var(--bg-primary); border-radius: var(--radius-20);
text-align: center;
}
.growth-card__title { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-title-3); line-height: var(--lh-title-3); color: var(--text-primary); }
.growth-card__list { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-3); line-height: var(--lh-body-3); color: var(--text-secondary); }
.growth-card__list p { margin: 0; }
/* 탭 */
.tabs { display: flex; gap: var(--space-8); justify-content: center; }
.tab {
display: inline-flex; align-items: center; height: 40px; padding-inline: var(--space-16);
border-radius: var(--radius-full);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
/* [개발자 확인 20260828] 공통 탭 글자 크기를 16px로 변경. 기존 행간·굵기·여백·활성 스타일은 유지한다. */
font-size: 16px; line-height: var(--lh-label-3);
color: var(--text-tertiary);
}
.tab--active { background: var(--bg-inverse-primary); color: var(--text-inverse); box-shadow: var(--shadow-gray-5); }
.core-block { position: relative; display: flex; flex-direction: column; gap: var(--space-40); width: 100%; margin-top: var(--space-60); }
.core-swiper {
width: 100%; overflow: hidden;
/* 절대 배치된 책·말풍선의 그림자가 Swiper 상하단에서 잘리지 않도록 렌더링 영역 확장 */
padding-block: 24px 80px;
margin-block: -24px -80px;
}
/* autoHeight 를 끈 상태 — 슬라이드들이 같은 높이(가장 큰 것)로 늘어나 wrapper 높이가 고정된다.
덕분에 장을 넘겨도 아래 콘텐츠가 밀리지 않는다. */
.core-swiper .swiper-wrapper { align-items: stretch; }
.core-swiper .swiper-slide { height: auto; }
/* [DEV:SHOWCASE] 홈 메뉴 패드 이미지·롤링·오른쪽 실제 텍스트/내비게이션 정렬. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
.core-swiper .swiper-slide.core-showcase { display: flex; }
/* fade 전환 — 겹쳐 놓고 투명도로만 바꾸므로 비활성 슬라이드는 클릭도 막는다 */
.core-swiper .swiper-slide { transition-property: opacity; }
.core-swiper .swiper-slide:not(.swiper-slide-active) { pointer-events: none; }
/* 좌우 화살표 — 흰 원 + 아주 옅은 보더 한 겹 */
.core-nav {
/* --core-nav-top 은 ≤1024 에서 JS 가 앱 목업 중앙 좌표를 넣어준다 (없으면 블록 한가운데) */
position: absolute; top: var(--core-nav-top, 50%); z-index: 3;
transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
width: 52px; height: 52px; padding: 0;
background: #fff; border: 1px solid rgba(17, 24, 39, .06); border-radius: 50%;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.core-nav img { display: block; width: 22px; height: 22px; }
.core-nav--prev { left: -60px; }
.core-nav--next { right: -60px; }
.core-nav:hover { border-color: rgba(17, 24, 39, .12); background: var(--bg-slate-primary); }
.core-nav:active { transform: translateY(-50%) scale(.94); }
/* loop 라서 끝이 없다 — Swiper 가 disabled 를 붙여도 항상 켜진 상태로 보이게 */
.core-nav.swiper-button-disabled { opacity: 1; pointer-events: auto; }
/* 코어 쇼케이스 (앱 목업 + 텍스트) */
.core-showcase { display: flex; gap: 60px; align-items: center; width: 100%; }
.core-showcase__app { position: relative; width: 576px; flex: none; }
.core-showcase__app > img { display: block; width: 100%; height: auto; border-radius: var(--radius-20); box-shadow: none; }
/* 1~4번 슬라이드가 공유하는 실제 태블릿 본체 규격: 576×360. */
.core-pad-frame {
position: relative; width: 576px; max-width: 100%; height: auto;
aspect-ratio: 8 / 5; flex: none; overflow: visible;
}
.core-showcase__app.core-pad-frame { padding-inline: 0; }
.core-pad-frame > img {
position: absolute; z-index: 0; display: block;
max-width: none;
object-fit: contain; object-position: center; border-radius: 0;
/* [코어 서비스 패드 이미지 공통 배치 20260824] 네 개 탭의 패드 이미지를 전달된 2번 시안과 동일한 위치·크기·radius-20 클리핑 값으로 통일한다. */
/* [패드 이미지 가로 눌림 교정 20260831 반영]
이전 값(left .525% / top -6.653% / width 98.992% / height 112.891% + clip-path)은
636×420 캔버스를 가로 0.897배·세로 0.968배로 서로 다르게 늘려, 네 개 탭 모두 가로가 약 7% 눌려 있었다.
일러스트 탭에서는 티가 덜 났지만 실제 앱 화면을 쓰는 AI 추천픽에서 왜곡이 드러났다.
가로세로를 같은 0.955배로 바꿔 눌림을 없앤다. 계산 근거(패드 576×360, SVG 캔버스 636×420, 화면 576×360@30,26):
width = 636 × 0.955 ÷ 576 = 105.448%
height = 420 × 0.955 ÷ 360 = 111.417%
left = (13.0 − 30 × 0.955) ÷ 576 = −2.717% ← 화면 좌우 여백 13px
top = ( 8.1 − 26 × 0.955) ÷ 360 = −4.647% ← 화면 상하 여백 8.1px
0.955는 교체 전과 같은 두께의 흰 여백을 유지하려고 고른 값이다. 여백 두께를 바꾸려면
네 값을 위 식으로 함께 다시 계산해야 하며, 하나만 고치면 다시 눌린다.
clip-path는 제거했다. SVG가 자체 드롭 섀도우를 갖고 있어 잘라내면 그림자까지 사라진다. */
left: -2.717%; top: -4.647%;
width: 105.448%; height: 111.417%;
}
/* [AI 추천픽 SVG 프레임 깨짐 20260824 재수정]
원본 패널이 서로 겹치는 스트립을 통째로 이동하면 인접 화면 일부가 노출되므로,
SVG 내부에서 8개 그룹을 동일 좌표에 배치하고 한 장씩 불투명도 전환한다. 외부 배치는 위의 네 탭 공통 규격을 사용한다. */
/* [AI 추천픽 프레임·비율 정렬 20260831 반영]
AI 추천픽은 화면만 들어있는 PNG라 다른 세 탭이 가진 흰 프레임·라운드·그림자가 없어 혼자 꽉 차 보였다.
아래 두 규칙이 그 세 가지를 나눠 맡는다.
· `::before` → 흰 프레임과 그림자
· `> .ai-pick-roll` → 화면(이미지 8장이 들어가는 상자)과 화면 라운드
값의 근거는 각 규칙의 주석에 있다.
※ 20260831 초기 기록에 "바깥 여백이 흰 프레임처럼 보이는 것"이라고 적어 둔 적이 있는데, 틀렸다.
빨간 배경 위에 올려 확인한 결과 다른 탭 SVG에는 실제로 흰 도형이 그려져 있다. */
.core-pad-frame--ai { overflow: visible; }
.core-pad-frame--ai::before {
content: ""; position: absolute; z-index: 0; display: block;
/* [AI 추천픽 흰 프레임 복원 20260831 반영]
다른 세 탭 SVG에는 화면(576×360, rx 18) 바깥으로 사방 14px 흰 프레임(604×388, rx 32)이
그려져 있고, 드롭 그림자도 화면이 아니라 이 흰 프레임에 붙어 있다.
(빨간 배경 위에 올려 픽셀을 직접 측정해 확인한 값이다.)
AI 추천픽은 화면만 들어있는 PNG라 그 프레임이 없었다. 같은 규격을 여기서 만들어 깔아 둔다.
HTML을 건드리지 않으려고 가짜 요소(::before)를 쓴다.
계산(현재 배율 0.955, 화면 550.08×343.8, 프레임 두께 14×0.955 = 13.37px):
width = 604 × 0.955 ÷ 576 = 100.142%
height = 388 × 0.955 ÷ 360 = 102.928%
left = (13.0 − 13.37) ÷ 576 = −0.064%
top = ( 8.1 − 13.37) ÷ 360 = −1.464%
라운드를 px가 아닌 %로 쓴 이유: 모바일에서 패드가 줄어들 때
SVG 탭처럼 라운드도 같은 비율로 줄어들게 하기 위해서다. */
left: -.064%; top: -1.464%;
width: 100.142%; height: 102.928%;
background: #fff;
border-radius: 5.298% / 8.247%; /* SVG rx 32 ÷ 604, ÷ 388 */
box-shadow: 0 4px 15px rgba(26, 26, 26, .09); /* 다른 탭 SVG의 filter0_d(dy 4 / blur 16 / #1A1A1A 9%) 환산값 */
}
/* [AI 추천픽 롤링 멈춤 수정 20260831 반영]
직전까지는 `app-core03-roll-strip-20260831.svg` 한 장을 넣고 SVG 파일 내부 CSS로 8화면을 전환했다.
![]()
로 불러온 SVG의 내부 애니메이션은 브라우저·GPU 설정에 따라 재생되지 않는 환경이 있어
일부 PC에서 화면이 멈춰 보였다. 8장을 개별 PNG로 분리하고 전환을 이 파일로 옮긴다.
구조와 동작 방식은 아래 .reward-roll(성장 리포트 보상 롤링)과 동일하다. HTML은 index.html [DEV:SHOWCASE] 참고. */
/* 이 상자가 곧 다른 탭의 "화면" 사각형이다. 576×360을 0.955배(=550.08×343.8)로 줄이고
좌우 13px·상하 8.1px 여백을 남겨, 위 `.core-pad-frame > img`가 만드는 화면과 정확히 같은 자리에 놓는다.
두 규칙은 한 쌍이므로 한쪽만 고치지 말 것. 550.08 ÷ 343.8 = 1.600 으로 PNG 원본(1280×800)과 비율이 같아 눌리지 않는다. */
.core-pad-frame--ai > .ai-pick-roll {
position: absolute; z-index: 1; overflow: hidden;
left: 2.257%; top: 2.25%;
width: 95.5%; height: 95.5%;
border-radius: 3.125% / 5%; /* 다른 탭 SVG의 rx 18 ÷ 576, ÷ 360 */
/* 그림자는 위 ::before 흰 프레임이 가진다. 여기에 또 주면 그림자가 이중으로 진해진다. */
}
/* 상자 비율과 PNG 비율이 같으므로 그대로 꽉 채운다. object-fit을 쓰지 않아도 왜곡되지 않는다. */
.ai-pick-roll > img {
position: absolute; left: 0; top: 0;
display: block; width: 100%; height: 100%; max-width: none;
opacity: 0; will-change: opacity;
animation: ai-pick-roll 8s steps(1, end) infinite;
}
.ai-pick-roll > img:nth-child(1) { animation-delay: 0s; }
.ai-pick-roll > img:nth-child(2) { animation-delay: 1s; }
.ai-pick-roll > img:nth-child(3) { animation-delay: 2s; }
.ai-pick-roll > img:nth-child(4) { animation-delay: 3s; }
.ai-pick-roll > img:nth-child(5) { animation-delay: 4s; }
.ai-pick-roll > img:nth-child(6) { animation-delay: 5s; }
.ai-pick-roll > img:nth-child(7) { animation-delay: 6s; }
.ai-pick-roll > img:nth-child(8) { animation-delay: 7s; }
/* 8초 주기 안에서 한 장씩 1초(=12.5%)만 보이게 한다. 원래 SVG 내부에 있던 전환 속도와 동일하다.
장수를 바꾸면 주기(8s)와 위 nth-child 지연값, 아래 12.5% 구간을 함께 고쳐야 한다. */
@keyframes ai-pick-roll {
0%, 12.499% { opacity: 1; }
12.5%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
/* 모션 축소 환경에서는 첫 화면만 정적으로 표시한다. */
.ai-pick-roll > img { animation: none; }
.ai-pick-roll > img:first-child { opacity: 1; }
.ai-pick-roll > img:not(:first-child) { display: none; }
}
/* 2·3번 원본(660×460)의 투명 여백 28/22/28/50px을 제거해 본체만 576×360으로 통일한다. */
/* [미사용 확인 20260831] index.html·experience.html 어디에서도 `core-pad-frame--padded`를 붙이지 않는다.
아래 값은 20260831 비율 교정(위 `.core-pad-frame > img`) 이전 기준이라 지금 그대로 쓰면 다시 눌린다.
되살릴 일이 생기면 위와 같은 방식으로 가로세로 같은 배율로 다시 계산할 것. */
.core-pad-frame--padded > img {
left: -4.636%; top: -7.222%;
width: 109.272%; height: 121.854%;
clip-path: inset(5.927% 4.242% 12.012% 4.242% round var(--radius-20));
}
/* 4번 슬라이드의 전체 SVG 프레임을 공통 576×360 패드 영역에 맞춘다. */
.core-showcase--library { box-sizing: border-box; padding-left: 0; }
/* 새 SVG의 바깥 캔버스에 포함된 그림자가 프레임 밖에서도 잘리지 않게 유지한다. */
.core-showcase__app--library { overflow: visible; }
/* [코어 서비스 패드 이미지 공통 배치 20260824] KRS 도서관 이미지도 별도 위치 보정을 제거하고 위의 공통 패드 규격을 그대로 사용한다. */
/* [코어 서비스 롤링 이미지 4번 섀도우 통일 20260824 반영] 새 SVG의 흰 프레임·라운드를 그대로 사용하므로 기존 코드 프레임은 중복 노출하지 않는다. */
.core-showcase__app--library::after {
content: none;
}
/* [코어 리딩북 책 4권 복원 20260824 반영] 추가 그림자 없이 이전 오프셋·크기로 합성 이미지를 다시 배치한다. */
.core-library-books {
position: absolute; left: -10.306%; bottom: -8.128%; z-index: 2;
width: 74.208%; aspect-ratio: 402 / 323;
overflow: visible; pointer-events: none;
}
.core-library-books img { display: block; width: 100%; height: 100%; overflow: visible; }
/* [DEV:WORKBOOK] 코어 리딩북 팝업/CTA. 팝업 템플릿은 js/ui.js의 TPL.workbook. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
.core-workbook-cta--static { bottom: 4px; cursor: default; }
.core-workbook-cta--static span { color: var(--text-primary); font-weight: var(--weight-extrabold); }
.core-workbook-cta--static strong { color: #148fe8; font-weight: var(--weight-extrabold); }
/* KRS 도서관의 말풍선만 실제 CTA로 사용한다. */
.core-workbook-cta {
/* [코어 리딩북 말풍선 위치 조정 20260823 반영] 첨부 시안에 맞춰 패드 왼쪽 기준 위치를 6%로 조정한다. */
/* [개발자 확인 20260827] 말풍선의 패드 하단 여백을 요청값 23px로 조정한다. */
position: absolute; left: 6%; bottom: 23px; z-index: 6;
/* [코어 리딩북 말풍선 좌우 여백 20260819 반영] 고정 비율 폭으로 패딩이 눌리지 않도록 콘텐츠 폭을 따르고, 작은 화면에서는 양쪽 4% 여백 안에서만 줄어들게 한다. */
width: fit-content; max-width: 92%; min-height: clamp(44px, 5.17vw, 62px);
padding-block: clamp(8px, 1vw, 12px); padding-inline: clamp(18px, 2vw, 24px);
display: flex; align-items: center; justify-content: center;
border: 0; border-radius: 18px;
background: #fff; box-shadow: 0 8px 18px rgba(29, 48, 76, .18); cursor: pointer;
font-family: var(--font-round); font-size: 16px; line-height: 1.35;
font-weight: var(--weight-bold); color: #148fe8; white-space: nowrap;
}
.core-workbook-cta:not(.core-workbook-cta--static) { gap: 8px; }
.core-workbook-cta:not(.core-workbook-cta--static) > span:first-child {
padding-right: 0; color: var(--text-primary); font-weight: var(--weight-extrabold);
}
.core-workbook-cta:not(.core-workbook-cta--static) > span:first-child strong {
color: #148fe8; font-weight: var(--weight-extrabold);
}
.core-showcase__app--library .core-workbook-cta { bottom: 4px; }
.core-workbook-cta::before {
/* [코어 리딩북 말풍선 꼭지 라운드 20260823 반영] 각진 보더 삼각형 대신 회전한 사각형으로 꼭지 끝을 부드럽게 처리한다. */
/* [개발자 확인 20260827] 말풍선 본문과 이미지 연결 위치에 맞춰 꼭지의 가로 좌표를 28%로 조정한다. */
content: ''; position: absolute; top: -10px; left: 28%; z-index: -1;
width: 24px; height: 24px; background: #fff;
border-radius: 4px 0 0; transform: rotate(45deg);
}
.core-workbook-cta b { color: var(--text-primary); font-weight: var(--weight-extrabold); }
.core-workbook-cta:focus-visible { outline: 3px solid #148fe8; outline-offset: 3px; }
/* [개발자 확인 20260827] 레벨 버튼·코어 리딩북 말풍선 공통 클릭 안내.
PC/모바일 모두 56×56px로 축소한다. 축소된 폭과 오른쪽 오프셋을 함께 적용해 두 손끝을 문구 밖 오른쪽으로 옮긴다.
Lottie 원본의 100×100 좌표계는 보존하고 표시 크기만 변경한다.
absolute 장식이므로 버튼 크기·텍스트 정렬은 유지되고, pointer-events:none으로 클릭을 통과시킨다.
[개발자 확인 20260828] Lottie의 불투명도는 고정하고 손목 기준 눌림/복귀로 변경한다. CSS 이동 효과는 중복 적용하지 않는다. */
.cta-click-hint {
position: absolute; right: -36px; top: calc(50% - 12px); z-index: 7;
display: block; width: 56px; height: 56px;
pointer-events: none; user-select: none;
}
.cta-click-hint > img {
display: block; width: 100%; height: 100%; max-width: none;
object-fit: contain; pointer-events: none;
}
/* [개발자 확인 20260827] 로딩 완료 전/오류 시 정지 이미지를 보존하고 Lottie 준비 후 교체한다.
동작 줄이기 설정에서는 JS 상태와 관계없이 정지 PNG만 노출한다. */
.cta-click-hint__player {
position: absolute; inset: 0; display: block;
width: 100%; height: 100%; visibility: hidden; pointer-events: none;
}
.cta-click-hint__player > svg { display: block; width: 100%; height: 100%; }
.cta-click-hint.is-lottie-ready .cta-click-hint__player { visibility: visible; }
.cta-click-hint.is-lottie-ready .cta-click-hint__fallback { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
.cta-click-hint.is-lottie-ready .cta-click-hint__player { visibility: hidden; }
.cta-click-hint.is-lottie-ready .cta-click-hint__fallback { visibility: visible; }
}
@media (max-width: 768px) {
/* [개발자 확인 20260827] 모바일도 56px를 유지하며 기존 -12px에서 -20px로 옮겨 문구와의 겹침을 줄인다. */
.cta-click-hint { right: -20px; }
}
.core-workbook-cta__arrow {
position: relative; right: auto; top: auto; flex: 0 0 auto;
width: 17px; height: 11px;
}
.core-workbook-cta__arrow::before {
content: ''; position: absolute; left: 3px; top: 0;
width: 11px; height: 11px;
border-top: 3px solid var(--text-primary); border-right: 3px solid var(--text-primary);
/* [개발자 확인 20260828] 코어 리딩북 안내 화살표의 좌우 반복 모션을 PC·모바일 모두 중지한다.
오른쪽 화살표 형태와 버튼 클릭 기능은 유지하며 손가락 안내 모션에는 영향을 주지 않는다. */
animation: none;
transform: rotate(45deg);
}
@keyframes core-workbook-arrow-inline {
0%, 100% { transform: translateX(-3px) rotate(45deg); }
50% { transform: translateX(3px) rotate(45deg); }
}
@keyframes core-workbook-arrow {
0%, 100% { transform: translate(-5px, -50%) rotate(45deg); }
50% { transform: translate(5px, -50%) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
.core-workbook-cta__arrow::before { animation: none; transform: rotate(45deg); }
}
@media (max-width: 640px) {
.core-showcase--library { padding-left: 0; }
.core-showcase__app--library { height: auto; aspect-ratio: 8 / 5; }
.core-workbook-cta {
/* [코어 리딩북 말풍선 좌우 여백 20260819 반영] 모바일도 PC의 콘텐츠 폭·좌우 패딩을 그대로 상속한다. */
border-radius: 13px; font-size: 14px;
line-height: 22px;
}
.core-workbook-cta::before { top: -7px; width: 18px; height: 18px; border-radius: 3px 0 0; }
.core-workbook-cta__arrow { width: 14px; height: 8px; }
.core-workbook-cta__arrow::before { width: 8px; height: 8px; border-width: 2px 2px 0 0; }
}
/* [개발자 확인 20260827] 모바일 말풍선은 위 640px 규칙에서 최소 14px / 행간 22px를 전 구간 적용한다. */
.core-showcase__text {
flex: 1; display: flex; flex-direction: column; gap: var(--space-24); padding-inline: var(--space-40);
/* [코어 서비스 콘텐츠 Y축 정렬 20260824] 데스크톱 우측 설명은 패드 이미지의 세로 중심축과 동일하게 명시적으로 중앙 정렬한다. */
align-self: center;
}
.core-showcase__title { font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: 28px; line-height: 1.5; color: var(--text-primary); }
.core-showcase__list {
display: flex; flex-direction: column; gap: var(--space-12);
margin: 0; padding: 0; list-style: none;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3); color: var(--text-secondary);
}
/* [개발자 확인 20260827] 롤링 설명은 이미지 내 문구가 아닌 실제 HTML li이며, 기존 가운뎃점은 CSS로 일관되게 표시한다. */
.core-showcase__list li { position: relative; margin: 0; padding-left: .75em; }
.core-showcase__list li::before { content: '·'; position: absolute; left: 0; }
.core-highlight {
display: flex; align-items: center; gap: var(--space-12);
padding: var(--space-12) var(--space-20);
background: rgba(255,255,255,.8); border-radius: var(--radius-16);
}
.core-highlight img { width: 28px; height: 28px; }
.core-highlight span { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-title-3); line-height: var(--lh-title-3); color: var(--text-primary); }
.core-highlight em { font-style: normal; color: #0e8fdb; }
/* ============================================================================
SECTION 6 · 성장 리포트 (탭 클릭 → 전환 스와이퍼)
========================================================================== */
/* 화살표는 overflow:hidden 인 스와이퍼 밖, 이 래퍼 기준으로 얹는다 */
.report-audience {
display: flex; flex-direction: column; align-items: center;
gap: var(--space-32); width: 100%;
}
.report-audience--child { margin-top: var(--space-40); }
.report-audience__head { width: 100%; }
.report-block { position: relative; width: 100%; max-width: 800px; margin: 0 auto; }
.report-swiper { width: 100%; overflow: hidden; }
/* [DEV:REPORT-PARENT] 성장 리포트 공통 슬라이드. 부모/아이의 등장 감지는 HTML/JS에서 분리. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
.report-slide { display: flex; flex-direction: column; align-items: center; gap: var(--space-32); }
.report-slide img { width: 100%; max-width: 684px; height: auto; border-radius: var(--radius-20); }
.report-slide__caption {
display: flex; flex-direction: column; justify-content: center; align-items: center;
width: 100%; max-width: 640px; min-height: 72px;
padding: var(--space-16) var(--space-20);
background: var(--bg-secondary);
border-radius: var(--radius-16);
text-align: center;
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-3); line-height: var(--lh-label-3);
color: var(--text-primary);
}
.report-slide__caption small {
display: block; margin-top: 2px;
font-family: var(--font-round); font-size: 14px; line-height: 22px;
/* [승급·보상 각주 스타일 통일 20260819 반영] 독서력 기준 문구(.level-box__criteria)와 동일한 굵기와 색상을 적용한다. */
font-weight: var(--weight-bold); color: var(--text-tertiary);
}
/* [성장 리포트 캡션-이미지 간격 통일 20260824 반영] 아이 영역만 캡션을 96px로 키우던 예외를 제거해 부모 영역과 동일한 72px 높이·32px gap을 사용한다. */
/* [보상 이미지 5화면 자동 롤링 속도 조정 20260820 반영] 위치는 고정하고 각 화면을 3초씩, 총 15초 주기로 노출한다. */
.reward-roll {
position: relative; width: 100%; max-width: 684px; aspect-ratio: 690 / 500;
overflow: hidden; border-radius: var(--radius-20); background: #fff;
}
.report-slide .reward-roll img {
position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
object-fit: contain; border-radius: var(--radius-20);
opacity: 0;
/* [보상 이미지 고정 전환 20260820 반영] 좌우 이동·확대를 제거하고 같은 위치에서 투명도만 전환한다. */
will-change: opacity;
animation: reward-crossfade 15s cubic-bezier(.4, 0, .2, 1) infinite;
}
.report-slide .reward-roll img:nth-child(1) { animation-delay: 0s; }
.report-slide .reward-roll img:nth-child(2) { animation-delay: 3s; }
.report-slide .reward-roll img:nth-child(3) { animation-delay: 6s; }
.report-slide .reward-roll img:nth-child(4) { animation-delay: 9s; }
.report-slide .reward-roll img:nth-child(5) { animation-delay: 12s; }
@keyframes reward-crossfade {
0% { opacity: 0; }
5%, 17% { opacity: 1; }
22%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.report-slide .reward-roll img { animation: none; }
/* [보상 이미지 접근성 20260820 반영] 모션 축소 환경에서는 첫 화면만 정적으로 표시한다. */
.report-slide .reward-roll img:first-child { opacity: 1; }
.report-slide .reward-roll img:not(:first-child) { display: none; }
}
/* ============================================================================
SECTION 7 · KRS 리얼 후기 (별점 리뷰 카드 · 가로 스크롤)
========================================================================== */
.reviews-row {
display: flex;
gap: 30px;
overflow-x: auto;
padding: var(--space-40) var(--container-pad) var(--space-8);
scrollbar-width: none;
}
.reviews-row::-webkit-scrollbar { display: none; }
.review-card {
flex: none;
width: 420px;
display: flex; flex-direction: column; gap: var(--space-28);
padding: var(--space-40);
background: var(--bg-primary);
border-radius: var(--radius-20);
}
.review-card__stars { display: flex; gap: var(--space-4); }
.review-card__stars img { width: 28px; height: 28px; }
.review-card__body { display: flex; flex-direction: column; gap: var(--space-20); }
.review-card__title { font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: 20px; line-height: 1.5; color: var(--text-primary); }
.review-card__text { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-3); line-height: var(--lh-body-3); color: var(--text-secondary); }
.review-card__author { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-2); line-height: 22px; color: var(--text-tertiary); }
/* 후기 마퀴 — 끊김없이 옆으로 흐르는 무한 스크롤 */
.reviews-marquee { width: 100%; overflow: hidden; padding: var(--space-60) 0 var(--space-8); }
.reviews-track { display: flex; width: max-content; will-change: transform; } /* 이동은 index.html 의 rAF 가 담당 */
.reviews-track .review-card { flex: none; width: 420px; margin-right: 30px; }
/* [수정요청 PDF 260820 · 단순 콘텐츠 20260822 반영] 최종 증정품 이미지/장식 없이 프로모션 문구의 기본 위계와 가독성만 적용한다. */
.promo-copy {
width: min(100%, 760px);
display: flex; flex-direction: column; align-items: center; gap: var(--space-28);
font-family: var(--font-round); color: var(--text-primary); text-align: center;
}
.promo-copy__notes {
display: flex; flex-direction: column; gap: var(--space-8);
font-size: var(--font-body-3); line-height: 1.6;
}
.promo-copy__notes li { position: relative; padding-left: 14px; }
.promo-copy__notes li::before { content: '•'; position: absolute; left: 0; }
.promo-copy__notes small,
.promo-copy__gift small { display: block; font-size: var(--font-body-2); line-height: 22px; color: var(--text-secondary); }
.promo-copy__gift { font-size: 20px; line-height: 1.5; font-weight: var(--weight-extrabold); }
/* hover 정지·화면 밖 정지·무한 순환은 모두 index.html 의 rAF 루프가 처리한다 */
/* 고민 Swiper — 뒤에 다음 장 1장이 작고 투명하게 겹쳐 보이는 덱 */
.worry-swiper {
width: 560px;
max-width: 90%;
height: 72px;
margin: 0 auto 64px; /* 아래로 겹치는 뒷장 공간 확보 */
overflow: visible; /* 뒤에 겹친 카드가 보이도록 */
}
.worry-swiper .swiper-slide {
border-radius: var(--radius-full);
overflow: hidden;
}
.worry-swiper .worry-chip {
width: 100%;
height: 72px;
justify-content: center; /* 그림자 제거 — 테두리처럼 보이는 윤곽 없앰 */
}
/* 칩 투명도는 클래스 기반으로 — 앞으로 올라올 때 글자가 빠르게(0.2s) 선명해짐 */
.worry-swiper .worry-chip { opacity: 0; transition: opacity .2s ease; } /* 뒤에 겹친 장들은 숨김 (글자 겹침 방지) */
.worry-swiper .swiper-slide-next .worry-chip { opacity: .4; }
.worry-swiper .swiper-slide-active .worry-chip { opacity: 1; }
/* 사라지는 앞장 — 글자·아이콘은 즉시 숨기고(display:none) 빈 칩만 빠르게 페이드 */
.worry-swiper .swiper-slide-prev {
opacity: 0 !important;
transition-duration: .22s !important; /* 본 전환(450ms)보다 빠르게 컷 */
}
.worry-swiper .swiper-slide-prev .worry-chip span,
.worry-swiper .swiper-slide-prev .worry-chip__icon { display: none; }
/* ============================================================================
SECTION 3 · 책 좋아하는 아이는 키워지는 거에요 (Figma: 10230:8963)
========================================================================== */
.grow-section { background: #ecf3fd; } /* 연한 블루 배경 */
/* [섹션 폭 20260819 반영] 공통 section__inner는 max-width 1200px 안에 좌우 패딩 20px가 포함돼
실제 콘텐츠가 1160px가 되므로, 이 섹션만 외곽을 1240px로 넓혀 콘텐츠 양끝을 정확히 1200px에 맞춘다. */
.grow {
display: flex; flex-direction: column; align-items: center;
max-width: calc(1200px + (var(--container-pad) * 2));
padding-block: 120px;
}
.grow__logo { display: block; width: 187px; height: auto; margin-bottom: var(--space-20); }
.grow__sub {
margin-top: var(--space-12);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-secondary);
text-align: center;
}
/* [첨부 SVG 전체 코드화 20260819 재반영] 1200×168 원본 좌표를 기준으로 카드 2개와 중앙 플러스를 실제 코드로 구성한다. */
.grow-basis-code {
display: grid;
/* [첨부 SVG 좌표 반영 20260819] 1200px 기준 카드 556px + 중앙 88px + 카드 556px 구조를 비율로 유지한다. */
grid-template-columns: minmax(0, 1fr) clamp(64px, 7.333%, 88px) minmax(0, 1fr);
align-items: center;
gap: 0;
margin-top: 60px;
width: 1200px; max-width: 100%;
}
.grow-basis-code__card {
min-width: 0; height: 168px;
display: flex; align-items: center;
padding: 0;
border-radius: var(--radius-24);
/* [카드 배경 오퍼시티 조정 20260824 반영] 흰색 배경 투명도를 요청값 50%로 조정하고 #0E8FDB 1px 외곽선은 유지한다. */
background: rgba(255, 255, 255, .5);
border: 1px solid #0e8fdb;
}
.grow-basis-code__icon { display: block; flex: none; overflow: visible; }
.grow-basis-code__card--traditional .grow-basis-code__icon { align-self: flex-start; width: 78px; height: 78px; margin: 51px 0 0 66px; }
.grow-basis-code__card--tech .grow-basis-code__icon { align-self: flex-start; width: 80px; height: 80px; margin: 51px 0 0 71px; }
.grow-basis-code__body {
align-self: flex-start; min-width: 0; margin-top: 51px;
display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16);
}
.grow-basis-code__card--traditional .grow-basis-code__body { margin-left: 33px; }
.grow-basis-code__card--tech .grow-basis-code__body { margin-left: 37px; }
/* [타이틀 폰트 통일 20260819 반영] 하단 `.grow-card__title`과 같은 Neo ExtraBold·24/32 규격을 적용한다. */
.grow-basis-code__title {
width: fit-content; max-width: 100%; padding-inline: 3px;
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: 24px; line-height: 32px; color: var(--text-primary);
background: linear-gradient(to bottom, transparent 56%, rgba(165, 200, 255, .45) 56%);
}
.grow-basis-code__desc {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 18px; line-height: 28px; color: var(--text-secondary);
}
.grow-basis-code__plus {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 40px; line-height: 1; color: var(--text-primary);
}
.grow-cards {
display: flex; justify-content: center; gap: 30px;
margin-top: 60px;
width: 1200px; max-width: 100%;
}
.grow-card {
width: 380px; flex: none;
padding: var(--space-32) var(--space-20);
background: var(--bg-primary);
border-radius: var(--radius-24);
display: flex; flex-direction: column; align-items: center;
text-align: center;
}
.grow-card__chip {
height: 36px;
display: inline-flex; align-items: center;
padding-inline: var(--space-16);
background: var(--bg-sky-50);
border-radius: var(--radius-full);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: 16px; line-height: 1;
color: var(--color-hero-blue);
}
.grow-card__icon { width: 100px; height: 100px; margin-top: var(--space-24); }
.grow-card__title {
margin-top: var(--space-24);
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: 24px; line-height: 32px;
color: var(--text-primary);
}
.grow-card__title em { font-style: normal; color: #2f9ff5; } /* 키워드 블루 강조 */
.grow-card__desc {
margin-top: var(--space-24);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: 24px;
color: var(--text-secondary);
}
/* ============================================================================
SECTION 8 · 시작 프로세스 / 전문선생님 관리 / FAQ
========================================================================== */
.sec-subtitle { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-title-3); line-height: var(--lh-title-3); color: var(--text-primary); text-align: center; }
.btn--w160 { width: 160px; }
.btn--h44 { height: 44px; }
/* 4-step 프로세스 */
.service-section { background: #F1F6FE; }
.service-section__eyebrow { background: #FFFFFF; }
.process { position: relative; display: flex; gap: 30px; width: 100%; margin-bottom: var(--space-40); }
.process__line {
position: absolute; top: 104px; left: 12.5%; right: 12.5%; height: 16px;
border-radius: var(--radius-full);
background: linear-gradient(90deg, #4ccfff 0%, #006aff 100%);
z-index: 0;
}
.process-step { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); padding: var(--space-32); text-align: center; }
/* 아이콘 옆 텍스트 묶음 — 데스크톱에서는 display:contents 라 기존 세로 배치 그대로 */
.process-step__body { display: contents; }
.process-step__no { order: -1; font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-3); line-height: var(--lh-body-3); color: var(--text-slate-secondary); opacity: .8; }
.process-step__icon { width: 64px; height: 64px; border-radius: var(--radius-full); background: #fff; border: 4px solid #65bfff; display: flex; align-items: center; justify-content: center; }
.process-step__icon img { width: 40px; height: 40px; }
.process-step--1 .process-step__icon { border-color: #65bfff; }
.process-step--2 .process-step__icon { border-color: #37b3ff; }
.process-step--3 .process-step__icon { border-color: #1e91ff; }
.process-step--4 .process-step__icon { border-color: #0672ff; }
.service-section .process-step.is-on .process-step__icon { background: #FFFFFF; animation: none; }
.service-section .process-step--1.is-on .process-step__icon { border-color: #65bfff; }
.service-section .process-step--2.is-on .process-step__icon { border-color: #37b3ff; }
.service-section .process-step--3.is-on .process-step__icon { border-color: #1e91ff; }
.service-section .process-step--4.is-on .process-step__icon { border-color: #0672ff; }
.service-section .process-step.is-on .ico-color { opacity: 1; }
.service-section .process-step.is-on .ico-white { opacity: 0; }
.process-step__title { font-family: var(--font-round); font-weight: var(--weight-extrabold); font-size: var(--font-title-6); line-height: var(--lh-title-6); color: var(--text-primary); }
.process-step__desc { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-3); line-height: var(--lh-body-3); color: var(--text-slate-secondary); opacity: .8; }
/* 관리 서비스 구성도 — SVG 1200×1960 하단 구조를 1200×1000 반응형 캔버스로 재구성 */
/* [DEV:SERVICE] 서비스 구성 이미지의 공통 크기·모바일 순서 및 화살표. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
.service-ecosystem {
position: relative;
width: 100%; max-width: 1200px;
aspect-ratio: 6 / 5;
margin-top: var(--space-40);
}
.service-ecosystem__circle {
position: absolute; left: 50%; top: 49%;
aspect-ratio: 1; border-radius: 50%;
transform: translate(-50%, -50%);
background: rgba(171, 221, 250, .3);
}
.service-ecosystem__circle--outer { width: 61.667%; }
.service-ecosystem__circle--inner { width: 38.333%; background: rgba(171, 221, 250, .5); }
.service-ecosystem__item {
position: absolute; z-index: 2;
width: 24%; margin: 0;
display: flex; flex-direction: column; align-items: center; gap: var(--space-12);
}
.service-ecosystem__item > img {
display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover;
border-radius: var(--radius-12);
/* [관리 서비스 이미지 그림자 제거 20260820 반영] 플랫폼·진단·코칭·코어리딩북 네 이미지의 외부 그림자를 모두 제거한다. */
box-shadow: none;
}
/* [개발자 확인 20260827] 플랫폼 PNG는 캔버스를 끝까지 채워 내부 여백이 있는 SVG 3종보다 크게 보인다.
PC에서도 모바일과 동일하게 90%로 보정해 네 이미지의 실제 보이는 크기를 통일한다. */
.service-ecosystem__item--platform > img { transform: scale(.9); }
.service-ecosystem__item figcaption {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: 20px; line-height: 1.5; color: var(--text-primary); text-align: center;
}
/* [PDF 20260818 반영] 진단(상) → 플랫폼(좌) → 코어 리딩북(우) → 전문 코칭(하) 순으로 재배치 */
.service-ecosystem__item--diagnosis { left: 38%; top: 6%; }
.service-ecosystem__item--platform { left: 8.833%; top: 37.5%; }
.service-ecosystem__item--coaching { left: 38%; right: auto; top: 76.1%; }
.service-ecosystem__logo {
position: absolute; z-index: 3; left: 50%; top: 49%;
width: 21.333%; aspect-ratio: 1;
transform: translate(-50%, -50%);
display: flex; align-items: center; justify-content: center;
padding: 4.5%;
background: #FFFFFF; border: 4px solid #3D8BFF; border-radius: 50%;
}
.service-ecosystem__logo img { display: block; width: 100%; height: auto; }
.service-ecosystem__item--books { left: auto; right: 8.833%; top: 37.5%; }
/* [개발자 확인 20260827] 단계 연결 화살표는 모바일 전용이므로 PC 구성도에서는 노출하지 않는다. */
.service-ecosystem__flow { display: none; }
/* [코어리딩북 배송 이미지 교체 20260820 반영] 완성형 SVG도 공통 서비스 이미지의 8:5 세로값을 사용하며, 투명 여백만 잘라 실제 표지가 같은 높이로 보이게 한다. */
.service-ecosystem__books-image { object-fit: cover; object-position: center; }
/* [전문 코칭 패널 상단 섹션 이동 20260819 반영] 블루 관리 서비스 섹션 안에서 전문 코칭 콘텐츠 영역만 흰색 라운드 패널로 표시한다. */
.coaching-panel {
position: relative;
padding: 72px var(--space-40) var(--space-48);
background: var(--bg-primary);
border-radius: var(--radius-24);
}
/* [전문 코칭 패널 말꼭지 확대 20260819 반영] 패널 상단 중앙 말꼭지를 30px에서 36px로 키워 좌우 폭을 조금 넓히고 둥근 끝을 유지한다. */
.coaching-panel::before {
content: '';
position: absolute; left: 50%; top: 0;
width: 36px; height: 36px;
background: var(--bg-primary);
border-radius: 5px;
transform: translate(-50%, -50%) rotate(45deg);
}
/* [FAQ 독립 흰 배경 20260819 반영] FAQ 섹션은 패널 효과 없이 페이지 전체 흰 배경을 사용한다. */
.faq-section { background: var(--bg-primary); }
/* [전문 코칭 장점 카드 20260824 반영] 기존 KRS 폰트·라운드·섀도 토큰을 유지한 코드형 2×2 레이아웃. 레퍼런스 중앙 문구는 제외하고 각 카드의 문구는 좌측, 장면은 우측에 둔다. */
/* [DEV:COACHING] 코칭 효과 4개 카드. 실제 이미지 비율·하단 기준 정렬·텍스트 간격을 유지. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
.coaching-benefits {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
/* [개발자 확인 20260824] PC에서도 가장 긴 3·4번 행을 기준으로 네 카드 높이를 같게 맞춰 1·2번 이미지 영역을 동일한 세로 크기로 확장한다. */
grid-auto-rows: 1fr; align-items: stretch;
gap: var(--space-24); width: 100%;
}
.coaching-benefit {
--benefit-accent: #e88445;
--benefit-art-bg: #FFF4EC;
/* [코칭 장점 카드 높이 20260824 수정] 카드 최소 높이를 180px로 축소한다. */
position: relative; min-width: 0; min-height: 180px; overflow: hidden;
/* [코칭 장점 문구·이미지 간격 20260824 수정] 우측 이미지 영역 46%에 24px 간격을 더해 문구가 이미지에 닿지 않게 한다. */
padding: var(--space-32) calc(46% + 24px) var(--space-32) var(--space-32);
/* [코칭 장점 카드 구분 방식 20260824 수정] 박스 라인을 제거하고 우측 이미지 영역의 연한 배경색으로 문구·이미지 영역을 구분한다. */
background: var(--bg-primary); border: none; border-radius: var(--radius-24);
box-shadow: none;
}
.coaching-benefit__copy { position: relative; z-index: 2; min-width: 0; text-align: left; overflow-wrap: break-word; }
.coaching-benefit__heading { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-20); }
/* [코칭 장점 타이틀 20260824 수정] 타이틀은 20px, 번호 원은 PC·모바일 공통 24px로 축소한다. */
.coaching-benefit__number {
width: 24px; height: 24px; flex: 0 0 24px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-full); color: var(--text-inverse);
font-family: var(--font-neo); font-size: 14px; line-height: 22px;
font-weight: var(--weight-extrabold);
}
.coaching-benefit h3 {
margin: 0; font-family: var(--font-neo); font-size: 20px; line-height: 1.3;
font-weight: var(--weight-extrabold); color: var(--benefit-accent); white-space: normal;
}
.coaching-benefit p {
margin: 0; font-family: var(--font-round); font-size: 16px; line-height: 24px;
font-weight: var(--weight-bold); color: var(--text-secondary);
}
/* [코칭 장점 이미지 배경 20260824] 각 타이틀 강조색과 연결되는 저채도 배경을 투명 PNG 뒤에 적용한다. */
.coaching-benefit--vocabulary { --benefit-accent: #e88445; --benefit-art-bg: #FFF4EC; }
.coaching-benefit--deep-reading { --benefit-accent: #729c3b; --benefit-art-bg: #F4F8ED; }
.coaching-benefit--emotion { --benefit-accent: #7151a4; --benefit-art-bg: #F6F1FB; }
.coaching-benefit--motivation { --benefit-accent: #579bad; --benefit-art-bg: #EEF8FA; }
.coaching-benefit__number { background: var(--benefit-accent); color: var(--text-inverse); }
/* [개발자 확인 20260824] 3·4번 이미지의 기존 세로 크기를 복원하고, 동일해진 카드 높이 안에서 네 이미지가 top 12px~bottom 0 영역을 공통으로 사용한다. */
.coaching-benefit__art {
position: absolute; z-index: 1; top: 12px; right: 12px; bottom: 0; height: auto;
width: calc(46% - 12px); max-width: 252px;
background-color: var(--benefit-art-bg);
background-repeat: no-repeat; background-size: 118% auto; background-position: center bottom;
border-radius: var(--radius-16);
pointer-events: none;
}
.coaching-benefit__art--vocabulary { background-image: url('../assets/index/coaching-benefit-vocabulary-20260824.png'); }
.coaching-benefit__art--deep-reading { background-image: url('../assets/index/coaching-benefit-deep-reading-20260824.png'); }
.coaching-benefit__art--emotion { background-image: url('../assets/index/coaching-benefit-emotion-20260824.png'); }
.coaching-benefit__art--motivation { background-image: url('../assets/index/coaching-benefit-motivation-20260824.png'); }
/* 전문선생님 관리 2카드 */
.manage-cards { display: flex; gap: var(--space-40); width: 100%; }
.manage-card { flex: 1; display: flex; gap: var(--space-32); align-items: flex-start; padding: var(--space-32); background: var(--bg-slate-primary); border-radius: var(--radius-24); }
.manage-card__icon { width: 60px; height: 60px; flex: none; object-fit: contain; }
.manage-card__text { display: flex; flex-direction: column; gap: var(--space-20); }
.manage-card__title { font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: 20px; line-height: 1.5; color: var(--text-primary); }
.manage-card__desc { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-3); line-height: var(--lh-body-3); color: var(--text-slate-secondary); opacity: .8; }
/* FAQ */
.faq { width: 100%; display: flex; flex-direction: column; gap: var(--space-20); }
.faq__head { display: flex; align-items: center; justify-content: space-between; }
.faq__title { font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: 20px; line-height: 1.5; color: var(--text-primary); }
.faq__list {
display: flex; flex-direction: column;
border-bottom: 1px solid var(--bg-tertiary); /* 마지막 항목이 필터/페이징으로 숨어도 하단 라인 유지 */
}
.faq-item { display: flex; gap: var(--space-20); align-items: center; padding: var(--space-20); border-top: 1px solid var(--bg-tertiary); cursor: pointer; }
.faq-item__cat { width: 80px; flex: none; text-align: center; font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-label-2); line-height: 22px; color: var(--text-secondary); }
.faq-item__q { flex: 1; font-family: var(--font-round); font-weight: var(--weight-bold); font-size: var(--font-body-3); line-height: var(--lh-body-3); color: var(--text-primary); opacity: .8; }
.faq-item__toggle {
width: 18px; height: 18px; flex: none;
filter: invert(30%); /* 검정 → #4d4d4d (≈ --text-secondary) · 전체보기 화살표와 동일 색 */
}
/* ============================================================================
PAGE NAVI — 홈 전용 플로팅 섹션 이동 바 (Figma: page-navi · 10178:1314)
스크롤을 시작하면 하단 중앙에 나타나고, 현재 섹션 탭이 다크 필로 하이라이트
========================================================================== */
/* 축소된 GNB 바로 아래 붙는 풀폭 바.
.page-navi = 화면 끝까지 깔리는 바(배경·경계·노출 애니메이션)
.page-navi__inner = 그 안에서 본문 컬럼(1200) 폭으로 가운데 몰리는 실제 탭 줄
두 역할을 한 요소에 겹쳐 두면 배경 폭과 콘텐츠 폭을 따로 못 잡는다. */
.page-navi {
position: fixed; left: 0; right: 0; top: var(--gnb-scrolled-h); z-index: 79; /* 헤더(80)보다 뒤 */
/* 옅은 그레이 + 반투명 — 뒤 콘텐츠가 블러로 비친다.
투명도는 background 알파로만 준다. opacity 속성은 아래 노출 애니메이션이 쓰고 있어 겹치면 안 된다. */
background: rgba(244, 246, 252, .82);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-gray-150);
opacity: 0; visibility: hidden;
transform: translateY(-24px);
transition: opacity .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1), visibility .3s;
}
.page-navi__inner {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-20);
width: 100%; max-width: var(--container-max); /* 본문 컬럼(1200)과 같은 폭 — 섹션과 좌우가 맞는다 */
margin-inline: auto;
padding: 8px var(--container-pad);
overflow-x: auto; scrollbar-width: none;
}
.page-navi__inner::-webkit-scrollbar { display: none; }
.page-navi.is-show { opacity: 1; visibility: visible; transform: none; }
.page-navi__tab {
position: relative; /* 활성 도트 기준 */
flex: none; height: 40px; padding: 0 var(--space-16);
border-radius: var(--radius-full);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-label-3); line-height: var(--lh-label-3);
color: var(--text-primary);
white-space: nowrap;
transition: background .15s ease, color .15s ease;
}
/* hover 배경 없음 — 회색 알약이 켜졌다 꺼지면 활성 표시(색+도트)와 헷갈린다 */
/* 활성 — 색 + 도트로만 구분 (weight는 GNB 링크와 동일하게 유지) */
.page-navi__tab.is-active {
color: var(--color-sky-400);
}
.page-navi__tab.is-active::after {
content: ''; position: absolute;
left: 50%; bottom: 2px; transform: translateX(-50%);
width: 6px; height: 6px; border-radius: var(--radius-full);
background: var(--color-sky-400);
}
/* 앵커로 이동 시 고정 GNB + 상단 네비에 가려지지 않게 */
[id^="nav"] { scroll-margin-top: 140px; }
/* ============================================================================
APP INSTALL — 푸터 바로 위 KRS 앱 설치 안내 (Figma: KRS-소개 > install · 10142:36653)
좌: 2줄 카피 / 우: 스토어 버튼 2개 · 푸터와는 옅은 그레이 라인으로 구분
========================================================================== */
/* 앱 설치 — 푸터 바로 위 보조 섹션이라 면(배경색)으로 강조하지 않는다.
위쪽 얇은 구분선 하나로만 앞 섹션과 나눈다 (위계 최하). */
/* 앱 설치 — 푸터 바로 위 보조 섹션이라 면(배경색)으로 강조하지 않고 흰 바탕 + 구분선만.
위쪽은 본문과 나누는 아주 연한 선, 아래쪽(푸터와 경계)은 한 단계 진한 선으로 위계를 준다. */
.app-install {
width: 100%;
background: var(--color-white);
border-top: 1px solid rgba(26, 26, 26, .05); /* 아주 연함 */
}
.app-install__inner {
max-width: var(--container-max); margin: 0 auto;
padding: var(--space-40) var(--container-pad);
display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
}
.app-install__text {
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: var(--font-body-5); line-height: 1.5; /* 20 / 1.5 */
color: var(--text-primary);
}
.app-install__actions { display: flex; align-items: center; gap: var(--space-20); }
.app-install__btn { /* .btn--secondary(#303030) 위에 크기만 재정의 */
width: 160px; height: 44px;
border-radius: var(--radius-10);
font-size: var(--font-label-3); line-height: var(--lh-label-3);
}
.app-install__btn img { flex: none; width: 16px; height: 16px; }
.app-install__btn--ios img { width: 24px; height: 24px; }
/* ============================================================================
FOOTER
========================================================================== */
/* [개발자 확인 20260827] 푸터는 최소 14px / 짝수 px 통일 대상에서 제외하여 기존 글자 크기와 행간을 유지한다. */
.footer { width: 100%; background: #f8f9fb; padding: var(--space-28) 0 var(--space-48); }
.footer__inner { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); display: flex; flex-direction: column; gap: var(--space-20); }
.footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-40); }
.footer__left { display: flex; flex-direction: column; gap: var(--space-20); }
/* 로고 + 펼치기 화살표 한 줄 (a 를 inline 으로 두면 img 밑 baseline 여백 때문에 줄이 안 맞는다) */
.footer__brand { display: flex; align-items: center; gap: var(--space-8); }
.footer__brand > a { display: inline-flex; align-items: center; }
.footer__logo { display: block; width: 146px; height: 60px; } /* svg preserveAspectRatio=none → 명시 고정 */
/* 푸터는 본문보다 한 단 낮은 정보라 전체적으로 타입을 한 단계씩 내린다 (label-2 14 → 12·13) */
.footer__addr { font-family: var(--font-round); font-weight: var(--weight-bold); font-size: 12px; line-height: 17px; color: var(--color-gray-400); }
.footer__copy { font-size: 10px; line-height: 15px; color: var(--color-gray-700); }
.footer__right { display: flex; gap: 72px; align-items: flex-start; }
.footer__cs { display: flex; flex-direction: column; gap: var(--space-8); }
.footer__cs-row { display: flex; gap: var(--space-8); align-items: center; font-family: var(--font-round); font-weight: var(--weight-bold); font-size: 13px; line-height: 17px; color: #444; }
.footer__cs-row .num { color: var(--text-brand-500); }
.footer__hours { font-size: 11px; line-height: 16px; color: #75787b; letter-spacing: -.5px; }
.footer__util { display: flex; flex-direction: column; gap: var(--space-12); }
.footer__family {
display: flex; align-items: center; justify-content: space-between;
width: 260px; height: 40px; padding: 0 14px 0 16px;
background: #fff;
border: 1px solid var(--color-gray-300); border-radius: var(--radius-8);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 12px; color: var(--text-muted);
}
.footer__family img { width: 18px; height: 18px; }
/* Family Site — 박스 위에 투명 select 를 덮어 실제 이동을 맡긴다.
(네이티브 select 로는 이 박스 모양을 그대로 못 만들어서 시각은 div, 동작은 select) */
.footer__family { position: relative; }
.footer__family-select {
position: absolute; inset: 0;
width: 100%; height: 100%;
opacity: 0; cursor: pointer;
font: inherit;
}
/* 모바일 접기 버튼 — 와이드에서는 숨김 */
.footer__toggle { display: none; }
.footer__sns { display: flex; align-items: center; gap: var(--space-16); }
.footer__sns img { height: 20px; width: auto; }
.footer__sns .sns-history { height: 17px; opacity: .5; }
/* flex-wrap 필수 — 없으면 링크 4개가 한 줄에 강제로 붙어 min-content 가 298px 이 되고,
그게 문서 최소 폭(318px)을 만들어 300px 이하 화면에서 가로 스크롤이 생긴다 */
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; font-family: var(--font-round); font-weight: var(--weight-bold); font-size: 12px; line-height: 17px; color: var(--color-gray-700); }
.footer__links .dot { color: var(--color-gray-6); }
/* ============================================================================
MODAL (Figma: 예시팝업1 · 예시팝업2 위계)
----------------------------------------------------------------------------
구조: dim 오버레이 > 흰 라운드 카드 > (좌상단 X · 중앙 타이틀) > 본문 > CTA
========================================================================== */
.modal-overlay {
position: fixed; inset: 0; z-index: 100;
display: none;
align-items: center; justify-content: center;
background: var(--overlay-dim);
padding: var(--space-24);
}
.modal-overlay.is-open { display: flex; }
/* 팝업에서 팝업을 열면 아래 팝업은 숨김 — 겹침·dim 중첩 없이 항상 하나만 보이게
(ui.js 오버레이 스택이 클래스 부여 · 위 팝업을 닫으면 아래 팝업이 다시 보임) */
.modal-overlay.is-behind { display: none; }
/* 팝업 구조 (Figma: popup · node 10179:1352 — 640 폭 · head 88 / body 48패딩 / buttons 하단 24)
전체 패딩 없이 head / body / foot 이 각자 패딩을 가짐 */
.modal {
position: relative;
width: 640px; max-width: 100%;
max-height: calc(100vh - 96px);
display: flex; flex-direction: column;
background: var(--bg-primary);
border-radius: var(--radius-24);
padding: 0;
box-shadow: var(--shadow-100);
overflow: hidden;
}
.modal--wide { width: 640px; }
.modal--sm { width: 480px; } /* 내용이 적은 팝업 (비밀번호 변경 · 배송지 입력 등) */
.modal--sm .modal__body { padding-inline: var(--space-24); }
.modal--sm .modal__foot { padding-inline: var(--space-24); }
/* 코어 리딩북을 제대로 읽는 법 — 첨부 1280×2142 SVG 본문 */
.modal--workbook { width: 1280px; max-height: calc(100vh - 48px); }
.workbook-modal__body {
/* [개발자 확인 20260828] 특징 3종 위·아래 간격을 하나의 값으로 통일한다.
상단 책→특징 / 특징→내지 카드: 기존 간격의 2배인 PC 80px, 모바일 48px. */
--workbook-feature-gap: 80px;
display: flex; flex-direction: column; gap: var(--workbook-feature-gap);
overflow-y: auto; padding: var(--space-20) var(--space-40) var(--space-40);
text-align: left; background: #fff;
}
.workbook-guide__intro { display: flex; flex-direction: column; gap: var(--workbook-feature-gap); }
/* [개발자 확인 20260828] 높이가 제한된 팝업에서도 이미지 영역을 세로로 압축하지 않는다.
본문은 스크롤하고, 책/내지 이미지는 원본 가로·세로 비율을 유지한다. */
.workbook-modal__body > *,
.workbook-guide__intro > * { flex-shrink: 0; }
.workbook-guide__books {
width: min(520px, 100%); margin: -12px auto 0; padding: 0;
/* [개발자 확인 20260828] SVG 높이 323 중 책 하단은 y=243이며 나머지 80은
그림자용 여백이다. 레이아웃 높이만 책 끝에 맞추고 그림자는 자르지 않는다. */
position: relative; aspect-ratio: 402 / 243;
display: block; overflow: visible;
}
.workbook-guide__books img {
position: absolute; top: 0; left: 0; display: block;
width: 100%; max-width: 100%; height: auto; object-fit: contain;
/* [개발자 확인 20260828] 재반영: 책 이미지의 원본 비율(402×323)을 명시한다. */
aspect-ratio: auto 402 / 323;
}
.workbook-guide__intro > h3 {
margin: 0; text-align: center;
font-family: var(--font-neo); font-size: 28px; line-height: 42px;
font-weight: var(--weight-bold); color: var(--text-primary);
}
.workbook-guide__intro > h3 span {
padding: 0 4px; background: linear-gradient(90deg, #c7e4ff 0%, #92b8ff 100%);
box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.workbook-guide__intro > h3 strong { font-weight: var(--weight-extrabold); }
.workbook-guide__features {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 0 var(--space-40);
}
.workbook-guide__feature {
min-width: 0; padding: 0 var(--space-32);
display: flex; flex-direction: column; align-items: center;
text-align: center; font-family: var(--font-round);
}
.workbook-guide__feature + .workbook-guide__feature { border-left: 1px solid #dedede; }
.workbook-guide__feature img { width: 40px; height: 40px; margin-bottom: var(--space-16); }
/* [개발자 확인 20260828] 팝업의 핵심 특징 3개 타이틀을 PC·모바일 모두 24px/32px로 통일.
작은 화면에서도 동일하게 표시하도록 아래 미디어쿼리의 20px·18px 축소 규칙은 제거했다. */
.workbook-guide__feature h4 {
margin: 0; font-size: 24px; line-height: 32px;
font-weight: var(--weight-extrabold); color: var(--text-primary);
}
.workbook-guide__feature p {
margin: var(--space-16) 0 0; font-size: 16px; line-height: 1.55;
font-weight: var(--weight-bold); color: var(--text-tertiary);
}
/* [개발자 확인 20260828] 내지 안내 5개를 세로형 카드(이미지 위·설명 아래) 2열로 변경.
01→05 순서는 유지하며 마지막 카드는 왼쪽 열에 배치한다. */
.workbook-guide__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
.workbook-guide__step {
min-width: 0; padding: var(--space-32);
display: flex; flex-direction: column;
/* [개발자 확인 20260828] 내지 이미지와 설명 사이 간격 축소. */
align-items: center; gap: var(--space-16);
background: #fafafa; border-radius: var(--radius-24);
}
.workbook-guide__visual {
position: relative; min-width: 0; width: 100%; overflow: visible;
}
.workbook-guide__visual img {
/* [개발자 확인 20260828] 각 SVG의 고유 크기를 HTML width/height로 명시한다.
공통 고정 높이로 늘리지 않고 가용 너비 안에서 원본 비율로 축소한다. */
position: static; display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto;
object-fit: contain; object-position: center;
aspect-ratio: auto var(--workbook-image-ratio);
/* [개발자 확인 20260828] SVG 하단의 그림자용 여백 80 중 48만큼
레이아웃 간격에서 제외한다. 원본 비율·그림자는 유지하고 축소 비율에 맞춰 보정. */
margin-bottom: max(-48px, calc(-4800% / var(--workbook-image-width)));
}
/* [개발자 확인 20260828] 재반영: 내지 5종은 가로 길이가 서로 다르므로
공통 가로·세로 크기를 강제하지 않고 각 원본 비율을 유지한다. PC/모바일 공통. */
.workbook-guide__visual--1 { --workbook-image-ratio: 560 / 362; --workbook-image-width: 560; }
.workbook-guide__visual--2 { --workbook-image-ratio: 549 / 362; --workbook-image-width: 549; }
.workbook-guide__visual--3 { --workbook-image-ratio: 486 / 362; --workbook-image-width: 486; }
.workbook-guide__visual--4 { --workbook-image-ratio: 538 / 362; --workbook-image-width: 538; }
.workbook-guide__visual--5 { --workbook-image-ratio: 676 / 362; --workbook-image-width: 676; }
.workbook-guide__copy { width: 100%; text-align: center; font-family: var(--font-neo); }
.workbook-guide__copy > span {
display: block; margin-bottom: var(--space-16);
font-size: 24px; line-height: 1; font-weight: var(--weight-bold); color: #888;
}
.workbook-guide__copy h4 {
/* [개발자 확인 20260828] 내지 안내 5종 타이틀은 PC 24px / 32px 유지.
모바일 크기와 여백은 아래 768px 이하 규칙에서 별도 조정한다. */
margin: 0; font-size: 24px; line-height: 32px;
font-weight: var(--weight-extrabold); color: var(--text-primary);
}
@media (max-width: 900px) {
.workbook-guide__features { padding-inline: 0; }
.workbook-guide__feature { padding-inline: var(--space-16); }
.workbook-guide__feature p { font-size: 14px; line-height: 22px; }
.workbook-guide__step { padding: var(--space-24); }
.workbook-guide__copy h4 { font-size: 24px; }
}
@media (max-width: 768px) {
/* [개발자 확인 20260828] 코어리딩북 팝업의 01~05 내지 카드에만 적용.
모바일 타이틀은 20px / 28px, 이미지·설명 간격과 카드 안쪽 여백은 24px.
PC 및 상단 핵심 특징 3개 타이틀, 별도 수치 강조 스타일은 유지한다. */
.workbook-guide__step { padding: var(--space-24); gap: var(--space-24); }
.workbook-guide__copy h4 { font-size: 20px; line-height: 28px; }
}
@media (max-width: 640px) {
.modal-overlay--workbook { padding: 12px; }
.modal--workbook {
width: 100%; max-height: calc(100dvh - 24px);
border-radius: var(--radius-16);
}
.modal--workbook .modal__head { min-height: 56px; padding: 10px 52px; }
.modal--workbook .modal__title { font-size: 16px; line-height: 24px; }
.modal--workbook .modal__close { width: 40px; height: 40px; right: 8px; }
/* [개발자 확인 20260828] 모바일 특징 영역 위·아래 간격을 24px에서 48px로 2배 확대. */
.workbook-modal__body { --workbook-feature-gap: var(--space-48); padding: var(--space-16); }
.workbook-guide__intro > h3 { font-size: 20px; line-height: 1.5; }
.workbook-guide__features { grid-template-columns: 1fr; gap: 0; }
.workbook-guide__feature { padding: var(--space-20) var(--space-12); }
.workbook-guide__feature + .workbook-guide__feature { border-left: 0; border-top: 1px solid #dedede; }
.workbook-guide__feature img { width: 32px; height: 32px; margin-bottom: var(--space-12); }
.workbook-guide__feature p { margin-top: var(--space-8); font-size: 14px; line-height: 22px; }
/* [개발자 확인 20260828] 좁은 모바일에서는 내지와 설명의 가독성을 위해 1열로 전환.
카드 내부의 이미지 위·설명 아래 배치와 원본 이미지 비율은 유지한다. */
.workbook-guide__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
.workbook-guide__step {
/* [개발자 확인 20260828] 좁은 모바일에서도 위의 24px 패딩·간격을 유지한다. */
min-height: 0;
border-radius: var(--radius-16);
}
/* [개발자 확인 20260828] 모바일 이미지 아래의 추가 여백도 제거해 공통 간격 적용. */
.workbook-guide__visual { width: calc(100% - 16px); margin: 8px 8px 0; }
.workbook-guide__copy { text-align: center; }
.workbook-guide__copy > span { margin-bottom: var(--space-8); font-size: 18px; }
}
.modal__head {
position: relative; flex: none;
display: flex; align-items: center; justify-content: center;
min-height: 72px; /* Figma: Title 영역 높이 88 */
padding: var(--space-16) 72px; /* 좌우 88 = 닫기 버튼 영역 확보 */
}
.modal__title {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-title-3); line-height: var(--lh-title-3); /* 18/24 */
color: var(--text-primary); text-align: center;
}
.modal__close {
position: absolute; right: var(--space-24);
top: 50%; transform: translateY(-50%); /* 헤드 높이가 바뀌어도 항상 세로 중앙 (고정 top 금지) */
width: 40px; height: 40px; padding: 0;
display: flex; align-items: center; justify-content: center;
color: var(--text-primary);
border-radius: var(--radius-full);
transition: background .15s ease;
}
@media (hover: hover) and (pointer: fine) {
.modal__close:hover { background: rgba(26, 26, 26, .06); }
}
.modal__close img { width: 28px; height: 28px; } /* 글리프가 뷰박스의 50%라 40으로 채워야 Figma 두께가 나옴 */
.modal__body {
flex: 1 1 auto; overflow-y: auto;
padding: var(--space-24) var(--space-48) ;
}
.modal__body > .modal__section-label:first-child { margin-top: 0; }
.modal__foot {
flex: none;
display: flex; justify-content: center; gap: var(--space-16); /* Figma: Buttons 중앙 · 간격 16 */
padding:var(--space-12) var(--space-48) var(--space-24) var(--space-48);
}
.modal__foot[hidden] { display: none; } /* 스텝별 푸터 토글용 — display:flex가 hidden을 덮지 않게 */
.modal__foot .btn { border-radius: var(--radius-10); min-width: 200px; height: 56px; } /* button-popup 147 pill · 높이 56 */
.modal__foot .btn--block { min-width: 0; }
/* KRS 레벨 확인 팝업 (Figma 1:5220) — 공용 모달 외형과 동작은 유지하고 본문만 확장 */
.modal--level { width: 1280px; max-height: calc(100vh - 48px); }
.level-modal__body {
display: flex; flex-direction: column; gap: var(--space-40);
padding: var(--space-20) var(--space-40) var(--space-40);
}
.level-modal__intro { flex: none; display: flex; flex-direction: column; gap: var(--space-40); }
.level-modal__heading { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); text-align: center; }
.level-modal__heading h3 {
font-family: var(--font-neo); font-weight: var(--weight-bold);
font-size: 28px; line-height: 42px; color: var(--text-primary);
}
.level-modal__heading h3 > span {
padding: 0 4px;
background: linear-gradient(90deg, #c7e4ff 0%, #92b8ff 100%);
box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.level-modal__heading h3 strong { font-weight: var(--weight-extrabold); }
.level-modal__heading > p {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 20px; line-height: 32px; color: var(--text-secondary);
}
.level-modal__heading > p strong { color: var(--text-primary); font-weight: var(--weight-extrabold); }
.level-modal__stats {
position: relative; display: flex; justify-content: space-between;
padding: var(--space-40) 80px;
}
.level-modal__stats::before,
.level-modal__stats::after {
content: ''; position: absolute; top: var(--space-40);
width: 1px; height: 172px; background: #dedede;
}
.level-modal__stats::before { left: 33.333%; }
.level-modal__stats::after { left: 66.667%; }
.level-modal__stat {
position: relative; flex: 0 0 220px; display: flex; flex-direction: column;
align-items: center; gap: var(--space-8); text-align: center;
}
.level-modal__stat img { width: 40px; height: 40px; }
/* [개발자 확인 20260828] 레벨 팝업의 단어 분석·어휘 난이도·다면 분석 타이틀도 24px/32px 적용.
아래 stat-value 및 small의 큰 수치(82만 개·2만 개·3중 AI 분석)는 강조 크기를 유지한다. */
.level-modal__stat-label {
margin-top: 0; font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 24px; line-height: 32px; color: var(--text-secondary);
}
.level-modal__stat-value {
display: flex; align-items: baseline; gap: 2px;
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: 40px; line-height: 40px; color: var(--text-primary);
}
.level-modal__stat-value small { font-size: 32px; line-height: 40px; }
.level-modal__stat p {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 14px; line-height: 22px; color: var(--text-tertiary);
}
.level-modal__table-scroll { flex: none; width: 100%; overflow-x: auto; border-radius: var(--radius-10); }
.level-modal__table {
width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0;
table-layout: fixed; font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 20px; line-height: 30px; color: var(--text-secondary); text-align: center;
}
.level-modal__table th { padding: var(--space-16); background: #60a5fa; color: #fff; font-weight: var(--weight-extrabold); }
.level-modal__table th:first-child { border-radius: var(--radius-10) 0 0 0; }
.level-modal__table th:last-child { border-radius: 0 var(--radius-10) 0 0; }
.level-modal__table th:nth-child(-n+4),
.level-modal__table td:nth-child(-n+4) { width: 13.333%; }
.level-modal__table th:last-child,
.level-modal__table td:last-child { width: 46.668%; }
.level-modal__table td { padding: 25px var(--space-12); background: #fff; }
.level-modal__table tbody tr:nth-child(even):not(.level-modal__table-krs) td { background: rgba(230, 244, 254, .4); }
.level-modal__table-krs td {
background: rgba(195, 230, 250, .6); color: var(--text-primary);
font-weight: var(--weight-extrabold); border-top: 2px solid #0e8fdb; border-bottom: 2px solid #0e8fdb;
}
.level-modal__table-krs td:first-child { border-left: 2px solid #0e8fdb; border-radius: 0 0 0 var(--radius-10); }
.level-modal__table-krs td:last-child { border-right: 2px solid #0e8fdb; border-radius: 0 0 var(--radius-10) 0; }
.level-modal__table-krs td:nth-child(4) { color: #0e8fdb; }
.level-modal__cards {
flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch; gap: var(--space-40);
}
.level-modal__cards .dcard {
min-width: 0; display: flex; flex-direction: column;
border-radius: var(--radius-10);
}
.level-modal__cards .dcard__top { flex: none; }
.level-modal__cards .dcard__body {
flex: 1 1 auto; min-height: 182px;
padding: var(--space-24) var(--space-28);
}
/* confirm(예시팝업2) 변형 */
.modal--confirm { text-align: center; }
.modal__question {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-title-4); line-height: var(--lh-title-4); /* 20/28 */
color: var(--text-primary);
margin: var(--space-8) 0 var(--space-12);
}
.modal__sub {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-secondary);
}
.modal__actions { display: flex; gap: var(--space-16); justify-content: center; } /* 버튼 스타일은 .modal__foot .btn 공통 규칙 사용 */
.btn--line { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--color-gray-300); }
/* 진단 항목 안내 팝업 — 역량별 표 (컬러 헤더 + 흰 제목 / 본문 셀)
※ 클래스명 주의: 아래 진단 결과 상세 패널이 .diag-detail(width:380px)을 쓰고 있어
이름이 겹치면 뒤 규칙에 덮여 팝업 안에서 가로 넘침이 난다. 그래서 .diag-table 로 분리.
※ confirmModal 의 sub 는 안에 렌더되므로 마크업이 span — display:block 으로 세운다. */
/* 한 줄 = 테두리 박스 안에 [컬러 원 + 설명]. 원은 위 진단 다이어그램(.diag-node)과 같은 모양·색이라
팝업을 열었을 때 다이어그램의 어느 항목인지 바로 이어진다. */
.diag-table {
display: flex; align-items: center; gap: var(--space-16);
text-align: left;
padding: var(--space-16);
border: 1px solid var(--color-gray-150);
border-radius: var(--radius-10);
}
.diag-table + .diag-table { margin-top: var(--space-12); }
.diag-table__head {
flex: none;
width: 72px; height: 72px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
text-align: center;
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: 14px; line-height: 22px;
color: var(--text-inverse);
}
.diag-table__body {
flex: 1; min-width: 0;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-secondary);
}
/* 헤더 색 = 진단 다이어그램 원(.diag-node--top/right/left)과 동일 */
.diag-table--capability .diag-table__head { background: #4985ff; } /* 독서역량 */
.diag-table--temper .diag-table__head { background: #5ca9ff; } /* 독서기질 */
.diag-table--taste .diag-table__head { background: #3dcbfe; } /* 독서취향 */
/* 상단(타이틀·X) 없는 confirm 변형 — 본문 위 여백 보강 */
.modal--nohead .modal__body { padding-top: var(--space-48); }
/* ---------- 사이트 토스트 — 잠깐 떴다 사라지는 안내 (로그아웃 등) ---------- */
.site-toast {
position: fixed; left: 50%; top: 96px; transform: translate(-50%, -8px);
z-index: 200;
padding: 12px 24px;
background: var(--bg-primary);
border: 1px solid var(--color-gray-150);
border-radius: var(--radius-full);
box-shadow: var(--shadow-200);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-primary);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease, transform .3s ease;
}
.site-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- 통합인증 팝업 (krs-main ap0 구성 + 소셜 로그인) ---------- */
.auth-welcome {
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: 24px; line-height: 1.45;
color: var(--text-primary);
}
.auth-welcome strong { color: var(--bg-brand-500); }
.auth-welcome-sub {
margin-top: var(--space-8);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-secondary);
}
.auth-card {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
width: 100%;
padding: var(--space-20);
background: var(--bg-primary);
border: 1px solid var(--color-gray-300);
border-radius: 16px;
text-align: left;
transition: border-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
.auth-card:hover { border-color: var(--text-primary); }
}
.auth-card__title {
display: block;
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-3); line-height: var(--lh-label-3);
color: var(--text-primary);
}
.auth-card__sub {
display: block; margin-top: 4px;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
}
.auth-card .btn__arrow { color: var(--text-tertiary); }
/* 소셜 로그인 — 구분선 + 원형 아이콘 3개 */
.auth-sns { margin-top: var(--space-28); }
.auth-sns__divider {
display: flex; align-items: center; gap: var(--space-12);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-1); line-height: 22px;
color: var(--text-tertiary);
}
.auth-sns__divider::before, .auth-sns__divider::after {
content: ''; flex: 1; height: 1px; background: var(--color-gray-150);
}
/* 브랜드 컬러 풀폭 바 — 좌측 아이콘 · 중앙 라벨 */
.auth-sns__bar {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 100%; height: 52px;
margin-top: var(--space-12);
border-radius: 12px;
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-3); line-height: var(--lh-label-3);
transition: filter .15s ease;
}
.auth-sns__bar:first-of-type { margin-top: var(--space-20); }
@media (hover: hover) and (pointer: fine) {
.auth-sns__bar:hover { filter: brightness(.97); }
}
.auth-sns__bar--kakao { background: #fee500; color: #191919; }
.auth-sns__bar--naver { background: #03c75a; color: #fff; }
.auth-sns__bar-icon {
position: absolute; left: var(--space-20); top: 50%; transform: translateY(-50%);
display: flex; align-items: center;
}
.auth-sns__bar-icon--n { font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: 18px; }
/* 리스트 선택(예시팝업1) 변형 */
.modal__list { display: flex; flex-direction: column; gap: var(--space-12); }
.modal__option {
display: flex; align-items: center; gap: var(--space-12);
padding: var(--space-16) var(--space-20);
background: var(--bg-secondary);
border-radius: var(--radius-16);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-primary);
cursor: pointer; text-align: left; width: 100%;
border: 1.5px solid transparent;
}
.modal__option.is-selected { border-color: var(--bg-brand-500); background: var(--bg-brand-100); }
.modal__cta { display: flex; justify-content: center; margin-top: var(--space-28); }
.modal__cta .btn[disabled] { background: var(--bg-tertiary); color: var(--text-tertiary); cursor: default; filter: none; }
/* ============================================================================
FORM (Figma: 고객센터_문의_등록 위계 — 좌 라벨 · 우 필드 · 행 구분선)
========================================================================== */
.form { width: 100%; }
.form-row {
display: flex; align-items: flex-start; gap: var(--space-40);
padding: var(--space-24) 0;
border-bottom: 1px solid var(--color-gray-150);
}
.form-row:first-child { border-top: 1px solid var(--color-gray-150); }
.form-label {
flex: none; width: 140px; padding-top: 12px;
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-3); line-height: var(--lh-label-3);
color: var(--text-primary);
}
.form-label .req { color: var(--text-brand-500); margin-left: 2px; }
.form-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
/* 인풋 공통 (Figma: 기본 정보 입력 — h52 · radius 12 · border #e5e5e5) */
.input, .select, .textarea {
width: 100%;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-primary);
background: var(--bg-primary);
border: 1px solid var(--color-gray-300);
border-radius: 12px;
height: 52px;
padding: 0 var(--space-16);
outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--bg-brand-500); }
/* 인풋 상태 (Figma: 참고 — 상태 스펙) */
/* 비밀번호 인풋 — Nanum Square Round에 마스킹 글리프(●)가 없어 Pretendard로 대체
플레이스홀더는 다른 인풋과 동일하게 원래 폰트 유지 */
input[type="password"] { font-family: "Pretendard", "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
input[type="password"]::placeholder { font-family: var(--font-round); }
/* 플레이스홀더가 ● 도트인 경우(카드 비밀번호 앞 2자리)는 라운드에 글리프가 없어 높이가 틀어짐 → Pretendard 유지 */
input[type="password"][placeholder="●●"]::placeholder { font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
/* 진단 테스트 목업 뷰어 — 풀페이지 flex 컬럼: 헤더 / (이력 메뉴 + 스크롤 본문) / 푸터
스크롤은 본문 영역 안에서만 생김 (헤더·푸터에 안 잘림) */
.diag-viewer {
position: fixed; inset: 0; z-index: 400;
display: none;
flex-direction: column;
background: var(--bg-slate-primary); /* 슬레이트 그레이 — 헤더(흰색)와 구분 */
}
.diag-viewer.is-open { display: flex; }
.diag-viewer__head {
position: relative; flex: none;
display: flex; align-items: center; gap: var(--space-12);
padding: var(--space-20) 88px var(--space-20) var(--space-32); /* 우측은 닫기 버튼 영역 확보 */
background: var(--bg-primary);
border-bottom: 1px solid var(--color-gray-300);
}
.diag-viewer__title {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-title-4); line-height: var(--lh-title-4);
color: var(--text-primary);
}
/* 닫기 X — 헤더 안에서 베이스 .modal__close의 % 중앙 정렬(top 50%) 그대로 사용 */
.diag-viewer__close { cursor: pointer; }
.diag-viewer__main { flex: 1 1 auto; display: flex; min-height: 0; }
/* 본문 — 테스트 장: 중앙 정렬 · 결과지: 세로 스크롤 문서 */
.diag-viewer__body {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; justify-content: center;
overflow: hidden; /* 테스트 장 — 스크롤 없음 (트랙도 안 생김) */
cursor: pointer;
padding: var(--space-16);
}
.diag-viewer__img {
display: block;
width: 1280px; max-width: 100%; /* 원본 폭 풀 사이즈 (영역이 좁으면만 축소) */
height: auto;
max-height: 100%; object-fit: contain; /* 테스트 장 — 본문 영역 안에 */
}
.diag-viewer--result .diag-viewer__body {
display: block; cursor: default; /* 결과지 — 클릭 넘김 없음 · 스크롤 열람 */
overflow-y: auto; /* 스크롤은 결과지에서만 */
padding: 0;
}
.diag-viewer--result .diag-viewer__img { max-height: none; margin: 0 auto; }
/* 결과지 푸터 — 하단 흰색 바 + [구매하기] (모달 푸터와 동일 버튼 규격) */
.diag-viewer__foot {
flex: none;
display: flex; justify-content: center;
padding: var(--space-16) var(--space-32);
background: var(--bg-primary);
border-top: 1px solid var(--color-gray-300);
}
.diag-viewer__foot[hidden] { display: none; }
.diag-viewer__foot .btn { border-radius: var(--radius-10); min-width: 240px; height: 56px; } /* modal__foot 버튼과 동일 */
/* 결과 화면 좌측 진단 이력 — trial-menu(미리 체험하기)와 동일 UI · 라이트 변형 */
.diag-viewer__history {
flex: none; cursor: default;
border-right: 1px solid var(--bg-tertiary);
overflow-y: auto;
}
.diag-viewer__history[hidden] { display: none; }
.trial-menu.trial-menu--light { background: var(--bg-primary); } /* 원본 .trial-menu(slate-900)가 파일 뒤에 있어 특이도로 이김 */
.trial-menu--light .trial-menu__item { color: var(--text-tertiary); }
.trial-menu--light .trial-menu__item--major { color: var(--text-primary); }
.trial-menu--light .trial-menu__item.is-active { color: var(--text-primary); background: var(--bg-slate-primary); } /* on은 색으로만 — 굵기 변경 금지(레이아웃 흔들림) */
.trial-menu--light .trial-menu__item--sub.is-active { color: var(--text-primary); background: none; }
.trial-menu--light .trial-menu__divider { background: var(--bg-tertiary); }
@media (hover: hover) and (pointer: fine) {
.trial-menu--light .trial-menu__item:hover { color: var(--text-primary); background: var(--bg-slate-primary); }
.trial-menu--light .trial-menu__item--sub:hover { background: none; }
}
/* 비밀번호 표시/숨김 토글 (눈 아이콘) — .pw-field로 감싼 인풋 공통 */
.pw-field { position: relative; }
.pw-field .input { padding-right: 52px; }
.pw-toggle {
position: absolute; right: var(--space-16); top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; padding: 0;
display: flex; align-items: center; justify-content: center;
}
.pw-toggle img { width: 20px; height: 20px; opacity: .55; }
@media (hover: hover) and (pointer: fine) {
.pw-toggle:hover img { opacity: .8; }
}
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--color-error); }
.input.is-success, .select.is-success, .textarea.is-success { border-color: var(--color-success); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--bg-inverse-100); color: var(--text-tertiary); }
.form-helper.is-error { color: var(--color-error); }
.form-helper.is-success { color: var(--color-success); }
.select { appearance: none; -webkit-appearance: none; color: var(--text-tertiary);
/* 화살표: assets/icons/icon-arrow-down.svg */
background-image: url("/etc/krs/assets/icons/icon-arrow-down.svg");
background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;
max-width: 320px;
}
.select.has-value { color: var(--text-primary); }
.textarea { min-height: 180px; height: auto; padding: 14px var(--space-16); resize: vertical; }
/* 라벨-위 폼 그룹 (Figma: 기본 정보 입력 위계) */
.form-group { display: flex; flex-direction: column; gap: var(--space-8); }
.form-group__label {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-2); line-height: 22px;
color: var(--text-primary);
}
.form-group__label .req { color: var(--text-brand-500); margin-left: 2px; }
.form-helper {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-1); line-height: 22px;
color: var(--text-tertiary);
}
/* 인풋 + 우측 보조버튼 (PASS 인증 · 확인) */
.input-row { display: flex; gap: var(--space-12); }
.input-row[hidden] { display: none; } /* 인증번호 행 등 — hidden 속성이 flex에 지지 않게 */
/* 직계 인풋에만 — .input-row 안에 .form-group(세로 flex)을 넣는 경우 basis 0이 상속돼 인풋 높이가 사라짐 */
.input-row > .input { flex: 1; min-width: 0; }
.input-row > .form-group { flex: 1; min-width: 0; }
.btn-aux {
flex: none; height: 52px; padding-inline: var(--space-8);
border-radius: 12px;
background: var(--bg-tertiary); color: var(--text-tertiary);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-2); line-height: 22px;
min-width: 80px;
}
/* 년/월/일 3분할 셀렉트 */
.select-row { display: flex; gap: var(--space-12); }
.select-row .select { flex: 1; max-width: none; }
.file-row { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; }
.file-hint {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
}
.file-hint .em { color: var(--text-brand-500); }
.form-foot {
display: flex; align-items: center; justify-content: space-between;
padding-top: var(--space-24);
}
.form-foot__note {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-secondary);
}
.form-foot__note .req { color: var(--text-brand-500); }
.form-foot__actions { display: flex; gap: var(--space-12); }
/* 체크박스 (Figma: checkbox · node 10179:1304 — 24×24 · radius 7 ·
unchecked: white bg + gray-300 보더 + 그레이 체크 / checked: brand-500 bg + 흰 체크) */
.check-row input[type="checkbox"],
.agree-all input[type="checkbox"] {
-webkit-appearance: none; appearance: none;
width: 24px; height: 24px; flex: none; cursor: pointer; margin: 0;
border: 1.5px solid var(--color-gray-300); border-radius: 7px;
background-color: var(--color-white);
background-repeat: no-repeat; background-position: center; background-size: 14px 11px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5l3.8 3.8L12.5 1.5' fill='none' stroke='%23e5e5e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
transition: background-color .15s ease, border-color .15s ease;
}
.check-row input[type="checkbox"]:checked,
.agree-all input[type="checkbox"]:checked {
border-color: var(--bg-brand-500);
background-color: var(--bg-brand-500);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5l3.8 3.8L12.5 1.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check-row input[type="checkbox"]:disabled,
.agree-all input[type="checkbox"]:disabled {
border-color: var(--bg-tertiary);
background-color: var(--bg-tertiary);
cursor: default;
}
/* 체크박스/라디오 행 */
.check-row { display: flex; align-items: center; gap: var(--space-8);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3); color: var(--text-primary); cursor: pointer; }
.check-row .opt { color: var(--text-tertiary); font-size: var(--font-body-2); line-height: 22px; }
.check-row .view { margin-left: auto; font-size: var(--font-body-1); color: var(--text-slate-tertiary); line-height: 22px; }
.check-row--sm { font-size: var(--font-body-2); line-height: 22px; }
.check-row--sm input[type="checkbox"] { width: 20px; height: 20px; border-radius: 6px; background-size: 12px 9px; }
.check-row--sub { padding-left: 28px; } /* sm 체크박스 20 + gap 8 만큼 들여쓰기 */
/* 동의 영역 — 전체 동의 박스(회색 배경)로만 구분 (패딩/보더 없음) */
.agree-area {
display: flex; flex-direction: column;
gap: var(--space-12);
margin-top: var(--space-24);
}
/* 전체 동의 — 살짝 회색 배경 박스 (왼쪽 체크 · 오른쪽 제목+설명 좁은 간격) */
.agree-all {
display: flex; align-items: center; gap: var(--space-12);
padding: var(--space-12) var(--space-12);
background: var(--bg-secondary); /* 배경 체계 토큰 사용 */
border-radius: 12px;
cursor: pointer;
}
.agree-all__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agree-all__title {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-primary);
}
.agree-all__sub {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-1); line-height: 22px;
color: var(--text-tertiary);
}
/* 개별 동의 행 — 전체 동의보다 위계 낮게 (14px · 세컨더리 · 익스트라볼드 없음)
좌우 패딩으로 위 전체 동의 박스와 체크 열 맞춤 (박스 밖이어도 열은 동일) */
.agree-area .check-row {
padding-inline: var(--space-12);
font-size: var(--font-label-2); line-height: 22px; /* 14/22 */
font-weight: var(--weight-bold);
color: var(--text-secondary);
}
.agree-area .check-row strong { font-weight: inherit; color: inherit; } /* (필수)/(선택) 강조 제거 */
.agree-area .check-row--sub { padding-left: 40px; } /* 마케팅 하위 수신 동의 — 한 단계 들여쓰기 (기본 12 + 28) */
.agree-note {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-1); line-height: 22px;
color: var(--text-tertiary);
}
/* 인증하기 등 활성 보조 버튼 */
.btn-aux--active { background: var(--bg-brand-500); color: var(--text-inverse); }
.btn-aux:disabled { opacity: .5; cursor: default; }
/* PASS 인증·확인 등 다크 보조 버튼 (Figma 기본 정보 입력 · 10188:2342) */
.btn-aux--dark { background: var(--bg-inverse-primary); color: var(--text-inverse);}
/* 동의 블록 — 체크 + [필수/선택] 라벨 + 우측 '보기' 토글 + 수집 항목 상세 박스 (Figma 10188:2342) */
.agree-block { display: flex; flex-direction: column; gap: var(--space-8); }
.agree-block .check-row strong { font-weight: var(--weight-extrabold); }
/* 라벨 텍스트를 한 덩어리로 — flex 아이템 분리로 인한 (필수) 줄바꿈 방지 */
.check-row__label { flex: 1; min-width: 0; }
/* 체크 + 라벨 묶음 — '보기' 버튼을 label 밖에 두어 버튼 클릭 시 체크박스가 토글되지 않게 분리 */
.check-row__main { display: flex; align-items: center; gap: var(--space-8); flex: 1; min-width: 0; cursor: pointer; }
/* 체크박스 없는 안내 행 — 체크 열(24px)을 빈 칸으로 채워 라벨 열 정렬 유지 */
.check-row__spacer { width: 24px; flex: none; }
.agree-view {
flex: none;
margin-left: var(--space-8); /* 체크 라벨(클릭 시 체크됨)과의 오클릭 방지 간격 — 행 gap 8 + 8 */
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
text-decoration: underline; text-underline-offset: 3px;
padding: var(--space-8) var(--space-12); /* 히트 영역 확대 (시각 위치는 네거티브 마진으로 유지) */
margin-block: calc(var(--space-8) * -1);
margin-right: calc(var(--space-12) * -1);
}
@media (hover: hover) and (pointer: fine) {
.agree-view:hover { color: var(--text-secondary); }
}
.agree-detail {
display: none; /* '보기' 클릭 시에만 펼침 */
margin-left: 32px; /* 체크박스 24 + gap 8 */
padding: var(--space-12) var(--space-16);
background: var(--bg-secondary);
border-radius: var(--radius-10);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-1); line-height: 22px;
color: var(--text-tertiary);
}
.agree-block.is-open .agree-detail { display: block; }
.agree-detail p { margin: 0; }
.agree-detail strong { color: var(--text-secondary); }
/* [PDF 20260804 v1.1 반영] 환불 규정 등 긴 안내는 기본 높이의 절반 정도로 줄이고 스크롤 노출 */
.agree-detail--scroll { max-height: 130px; overflow-y: auto; }
/* [PDF 20260804 v1.1 반영] 배송지 입력 팝업 상단 안내 배너 — 실물 워크북 배송 안내 + 개인정보 수집·이용 안내 */
.ship-banner {
margin-bottom: var(--space-20);
padding: var(--space-16);
background: var(--bg-sky-50);
border-radius: var(--radius-10);
}
/* [수정] 기획안 반영(260811 1차추가): 배송 안내문구를 더 굵게(extrabold)·더 진한 색으로 —
아래 "개인정보 수집·이용 안내"보다 이 안내문구가 우선순위가 높다는 것을 명확히 표현 */
.ship-banner > p {
margin: 0 0 var(--space-8);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-primary);
}
.ship-banner__privacy .check-row { padding-inline: 0; }
.ship-banner__privacy .agree-detail { margin-left: 0; }
/* [수정] 기획안 반영(260811 1차추가): "개인정보 수집·이용 안내" 라벨/보기 링크는 위 안내문구(굵게, 14px)보다
작게 — 안내문구가 더 중요하다는 위계를 시각적으로 표현 (기본 .check-row 16px → 12px로 축소) */
.ship-banner__privacy .check-row { font-size: var(--font-body-1); line-height: 22px; }
.ship-banner__privacy .agree-view { font-size: var(--font-body-1); line-height: 22px; }
/* 구매 옵션 카드(라디오) */
.plan-option {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
padding: var(--space-20); border: 1px solid var(--color-gray-300); /* 폼 요소 공통 1px (인풋·셀렉트와 통일) */
border-radius: var(--radius-16); cursor: pointer; width: 100%;
font-family: var(--font-round);
}
.plan-option.is-selected {
border-color: var(--bg-sky-400); background: var(--bg-sky-50); /* 세컨더리 브랜드(sky) 400 보더 · 50 바탕 */
box-shadow: inset 0 0 0 1px var(--bg-sky-400); /* 보더 두께 변경 없이 선택 강조 (레이아웃 안 밀림) */
}
.plan-option:disabled, .plan-option.is-disabled { opacity: .45; cursor: default; } /* 구매 자녀 선택 — 진단 전/구독 중 자녀 비활성 */
.plan-option--static { cursor: default; } /* 자녀 1명 — 선택 개념 없이 노출만 */
.plan-option--pending { /* 진단 전 — disabled 톤 (회색 바탕 + 텍스트 딤 · 진단하기 버튼은 선명) */
background: var(--bg-secondary); cursor: default;
}
.plan-option--pending > span:first-child { opacity: .55; }
/* 구매 자녀 섹션 헤더 — 좌 라벨 · 우 [ⓘ 자녀추가] */
.modal__section-row {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
margin: var(--space-28) 0 var(--space-12);
}
.modal__section-row .modal__section-label { margin: 0; }
[data-child-area] > .modal__section-row:first-child { margin-top: 0; }
.btn__plus { width: 16px; height: 16px; } /* 버튼 뒤 plus 아이콘 (자녀추가 등) */
/* 구매 팝업 [ⓘ 자녀추가] — 추가 버튼이 아니라 안내. 클릭 시 아래 반투명 말풍선 토글 */
.addchild-hint { position: relative; display: flex; align-items: center; }
.addchild-hint__btn { margin: 0; background: none; cursor: pointer; }
.addchild-tip {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 5;
padding: 10px var(--space-16);
background: rgba(26, 26, 26, .82);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: var(--radius-10);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-inverse);
white-space: nowrap;
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.addchild-tip::before { /* 꼬리 — 위(아이콘)를 가리킴 */
content: ''; position: absolute; right: 20px; top: -6px;
border-left: 6px solid transparent; border-right: 6px solid transparent;
border-bottom: 6px solid rgba(26, 26, 26, .82);
}
.addchild-tip.is-show { opacity: 1; visibility: visible; transform: none; }
/* 성별 라디오 (통합인증 자녀 추가 팝업) — 체크박스 커스텀(24×24 · gray-300 · checked: brand-500)과 동일 문법, 원형 + 도트 */
.radio-row { display: flex; gap: var(--space-16); }
.radio-item {
display: flex; align-items: center; gap: 6px; cursor: pointer;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3); color: var(--text-primary);
}
.radio-item input[type="radio"] {
-webkit-appearance: none; appearance: none;
width: 24px; height: 24px; flex: none; cursor: pointer; margin: 0;
border: 1.5px solid var(--color-gray-300); border-radius: 50%;
background-color: var(--color-white);
background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4' fill='%23e5e5e5'/%3E%3C/svg%3E");
transition: background-color .15s ease, border-color .15s ease;
}
.radio-item input[type="radio"]:checked {
border-color: var(--bg-brand-500);
background-color: var(--bg-brand-500);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4' fill='%23ffffff'/%3E%3C/svg%3E");
}
.btn--diag-sm { /* 진단 전 자녀 카드 안 진단 유도 — 시작 단계 셀렉트(84×36 · r10)와 동일 크기 */
flex: none; width: 84px; height: 36px; padding: 0;
border-radius: 10px;
font-size: 14px; line-height: 22px;
min-width: 0;
}
/* 진단 전 — 구매 불가 상태 표기 (붉은 텍스트) */
.plan-option__desc--error { color: var(--color-error); }
/* 인포 안내 — icon-info-circle.svg를 mask로 그려 텍스트색(회색/에러 붉은색)을 그대로 따라감 */
.info-note {
display: flex; align-items: center; gap: 2px;
margin: var(--space-12) var(--space-4) 0;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-1); line-height: 22px;
color: var(--text-tertiary);
}
.info-note[hidden] { display: none; } /* display:flex가 hidden을 덮지 않게 */
.info-note--error { color: var(--color-error); } /* 진단 미완료 = 구매 불가 조건 — 아이콘·텍스트 모두 붉은색 */
.info-note__icon {
flex: none; width: 16px; height: 16px; /* 기본 인라인 안내용 — 크게 쓰려면 .info-note--stack */
background: url("/etc/krs/assets/icons/icon-info-circle.svg") no-repeat center / contain;
opacity: .6; /* 회색 안내 텍스트 톤에 맞춤 */
}
.info-note--error .info-note__icon {
background-image: url("/etc/krs/assets/icons/icon-info-circle-error.svg"); /* 에러 전용 아이콘 에셋 */
opacity: 1; /* 에러(구매 불가 조건)는 풀 톤 */
}
.info-note .link-muted { display: inline; padding: 0; font-size: inherit; }
/* 값 옆에 붙여 쓰는 인라인 인포 (예: 미구매 ⓘ 진단 후 구매 가능) */
.info-note--inline { display: inline-flex; margin: 0 0 0 var(--space-8); vertical-align: middle; }
/* 자녀 카드 우측 시작 단계 — 진단 결과 레벨이 디폴트로 선택된 컴팩트 셀렉트 */
.select--level {
flex: none; width: 84px; height: 36px;
padding: 0 26px 0 12px;
border-radius: 10px;
font-size: 14px; line-height: 22px;
font-weight: var(--weight-extrabold); color: var(--text-primary);
background-position: right 9px center; background-size: 15px 15px;
}
.plan-option > span:first-child { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } /* 이름 아래에 상세 설명 세로 배치 */
.plan-option__name { font-weight: var(--weight-extrabold); font-size: var(--font-label-3); line-height: var(--lh-label-3); color: var(--text-primary); }
.plan-option__desc { font-weight: var(--weight-bold); font-size: var(--font-body-2); line-height: 22px; color: var(--text-tertiary); margin-top: 4px; }
.plan-option__price {
display: flex; flex-direction: column; align-items: flex-end; /* Wavve 구성: 가격 큰 글씨 + 아래 보조 표기 */
font-weight: var(--weight-extrabold); font-size: var(--font-label-3); color: var(--text-primary); white-space: nowrap;
} /* 색 최소화 — 강조는 결제 버튼(브랜드색)이 담당 */
.plan-option__price-sub {
font-weight: var(--weight-bold); font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary); margin-top: 2px;
}
.plan-badge { /* 할인율 배지 — Wavve의 % 칩 구성, 색은 세컨더리 브랜드(sky) */
display: inline-block; vertical-align: middle; margin-left: 4px;
padding: 0px 6px; border-radius: var(--radius-8);
background: var(--bg-sky-400); color: #fff;
font-weight: var(--weight-extrabold); font-size: var(--font-body-2); line-height: 22px;
}
/* 구독 특징 리스트 — 위계 낮은 안내 (배경 없는 체크 · 본문과 같은 그레이) */
.plan-features { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-12) var(--space-4) 0; padding: 0; }
.plan-features li {
position: relative; padding-left: 20px;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-1); line-height: 22px;
color: var(--text-tertiary);
}
.plan-features li::before {
content: '✓';
position: absolute; left: 2px; top: 0;
color: inherit; /* 글자색과 동일한 그레이 체크 */
}
/* 구매 팝업 — 시작 단계 셀렉트는 풀폭 */
.modal--wide .select { max-width: none; }
/* 모달 폼 공통 — 셀렉트 풀폭 (카드 등록 등) */
.modal__list--form .select { max-width: none; width: 100%; }
/* 모달 본문 리드 — 큰 메인 타이틀 + 서브 설명 (카드 등록 · 주문 확인 등 단계 화면) */
.modal__lead { margin-bottom: var(--space-20); }
.modal__lead-title {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-title-4); line-height: var(--lh-title-4);
color: var(--text-primary);
}
.modal__lead-sub {
margin-top: 4px;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
}
/* 카드 등록 — 유효기간/비밀번호 2열 */
.form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
/* 주문 내역 확인 박스 (krs-main 프로토타입 구성: 회색 박스 · 라벨-값 행 · 구분선) */
.order-box {
display: flex; flex-direction: column; gap: var(--space-12);
margin-top: var(--space-12);
padding: var(--space-20);
background: var(--bg-secondary); border-radius: var(--radius-16);
font-family: var(--font-round);
}
.order-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); }
.order-row__label { font-weight: var(--weight-bold); font-size: var(--font-body-2); line-height: 22px; color: var(--text-tertiary); flex: none; }
.order-row__value { font-weight: var(--weight-extrabold); font-size: var(--font-body-2); line-height: 22px; color: var(--text-primary); text-align: right; }
.order-hr { height: 1px; background: var(--color-gray-300); margin: var(--space-4) 0; }
.modal__total {
display: flex; justify-content: space-between; align-items: center;
padding: var(--space-16) var(--space-20);
background: var(--bg-slate-primary); border-radius: var(--radius-16);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-3); color: var(--text-primary);
margin-top: var(--space-16);
}
.modal__total .num { color: var(--text-brand-500); font-size: var(--font-label-4); }
.modal__section-label {
font-family: var(--font-round);
font-weight: var(--weight-extrabold);
font-size: var(--font-label-1);
line-height: var(--lh-label-2);
color: var(--text-primary);
margin: var(--space-28) 0 var(--space-12);
}
/* 자녀 영역이 숨겨진 상태(비로그인)에서는 다음 섹션 라벨이 첫 콘텐츠 — 상단 마진 제거
(:first-child는 hidden이어도 DOM상 첫째만 매칭되므로 인접 형제로 처리) */
[data-child-area][hidden] + .modal__section-label { margin-top: 0; }
/* ============================================================================
UNDERLINE TABBAR (Figma: 고객센터 상단 탭 — 활성: 오렌지 텍스트+언더라인)
========================================================================== */
.tabbar { display: flex; gap: var(--space-32); justify-content: center; }
.tabbar__item {
position: relative;
padding: var(--space-12) var(--space-4);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-3); line-height: var(--lh-label-3);
color: var(--text-tertiary);
}
.tabbar__item--active { color: var(--text-primary); } /* on: Text/Default/Primary */
.tabbar__item--active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
height: 2px; background: var(--text-primary); border-radius: 2px;
}
/* 서브페이지 공통 (미리 체험하기 · 고객지원 — 동일 패딩/중앙 타이틀, 푸터와 여유 간격) */
.subpage { padding-block: 80px 160px; }
/* GNB 로그인/회원가입 → 버튼 (클릭 시 마이페이지 전환) */
.gnb__account { display: flex; align-items: center; gap: 6px; }
.gnb__account button { font: inherit; color: inherit; padding: 0; }
@media (hover: hover) and (pointer: fine) {
.gnb__account button:hover { opacity: .7; } /* 밑줄 대신 은은한 투명도 */
}
/* GNB 유저 버튼 (로그인 후) — 크기·구조는 어디서나 40 고정 공통, 컨텍스트별로 '색만' 다름.
기본: 다크(icon-user.svg opacity 60%) / hero(밝은 배경) 위: 흰색 / 스크롤(흰 반투명) 시: 다시 다크 */
.gnb__user { position: relative; }
.gnb__userBtn {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-full);
padding: 0;
}
.gnb__userBtn img { width: 24px; height: 24px; opacity: .6; }
.gnb__userBtn[aria-expanded="true"] { background: rgba(26,26,26,.04); border-color: var(--color-gray-400); }
/* 밝은 배경(hero) 위: 흰색으로만 변경 */
.gnb--on-hero .gnb__userBtn { border-color: rgba(255,255,255,.4); }
.gnb--on-hero .gnb__userBtn[aria-expanded="true"] { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }
.gnb--on-hero .gnb__userBtn img { filter: brightness(0) invert(1); }
/* 스크롤(흰 반투명 배경) 시: hero에서도 다크로 복귀 — 보더는 alpha-dark-40 */
.is-scrolled .gnb--on-hero .gnb__userBtn { border-color: var(--bg-alpha-dark-40); }
.is-scrolled .gnb--on-hero .gnb__userBtn[aria-expanded="true"] { background: rgba(26,26,26,.04); border-color: var(--color-gray-400); }
.is-scrolled .gnb--on-hero .gnb__userBtn img { filter: none; }
/* 유저 버튼 hover — PC(마우스) 환경에서만 */
@media (hover: hover) and (pointer: fine) {
.gnb__userBtn:hover { background: rgba(26,26,26,.04); border-color: var(--color-gray-400); }
.gnb--on-hero .gnb__userBtn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }
.is-scrolled .gnb--on-hero .gnb__userBtn:hover { background: rgba(26,26,26,.04); border-color: var(--color-gray-400); }
}
.gnb__userMenu {
position: absolute; top: calc(100% + 10px); right: 0;
min-width: 148px; padding: 6px;
display: flex; flex-direction: column;
background: var(--color-white);
border-radius: var(--radius-16);
box-shadow: 0 4px 6px rgba(102,102,102,.14);
z-index: 100;
}
.gnb__userMenu[hidden] { display: none; }
.gnb__userMenu button {
font: inherit; text-align: left;
padding: 10px 14px;
border-radius: var(--radius-8);
color: var(--color-neutral-900);
}
@media (hover: hover) and (pointer: fine) {
.gnb__userMenu button:hover { background: var(--color-neutral-100); }
}
/* 공지사항 표 (Figma: 고객센터_공지 · 10199:3914 — 번호 80 · 구분 112 · 제목 flex · 조회수 112 · 날짜 152) */
.notice-list { display: flex; flex-direction: column; }
.notice-thead {
display: flex; align-items: center;
height: 48px;
border-top: 1px solid var(--color-gray-150);
border-bottom: 1px solid var(--color-gray-150);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-primary);
}
.notice-thead span { text-align: center; }
.notice-col-no { flex: none; width: 80px; }
.notice-col-cat { flex: none; width: 112px; }
.notice-col-title { flex: 1; min-width: 0; }
.notice-col-views { flex: none; width: 112px; }
.notice-col-date { flex: none; width: 152px; }
.notice-item {
display: flex; align-items: center;
min-height: 64px;
border-bottom: 1px solid var(--color-gray-150);
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.notice-item:hover { background: var(--bg-secondary); } /* 클릭 가능함을 알리는 피드백 */
}
.notice-item__no {
flex: none; width: 80px; text-align: center;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-secondary);
}
/* 구분 — FAQ 카테고리(faq-item__cat)와 동일 톤 */
.notice-item__badge {
flex: none; width: 112px; text-align: center;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-label-2); line-height: 22px;
color: var(--text-secondary);
}
.notice-item__title {
flex: 1; min-width: 0;
padding: 0 var(--space-16);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice-item__views {
flex: none; width: 112px; text-align: center;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-secondary);
}
.notice-item__date {
flex: none; width: 152px; text-align: center;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-secondary);
}
/* 게시판 공통 — 상단(필터·검색·총 건수) / 빈 상태 */
.board-top {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
margin-bottom: var(--space-16);
}
.board-count {
flex: none;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 14px; line-height: 22px; /* 목록 본문보다 한 단 아래 — 보조 정보 */
color: var(--text-secondary);
}
.board-count strong { font-weight: var(--weight-extrabold); color: var(--text-brand-500); } /* 숫자 오렌지 (Figma) */
/* 분류 드롭다운 (Figma: dropdown · 10200:2478 — default 회색 텍스트 / done 다크 / active 오렌지 보더) */
.select--filter {
width: 140px; height: 44px; /* 시스템 select(52)보다 한 단계 작게 */
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary); /* status=default */
-webkit-appearance: none; appearance: none;
padding: 0 38px 0 var(--space-16);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231a1a1a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
}
.select--filter.is-done { color: var(--text-primary); } /* status=done — 선택 완료 시 다크 */
/* 검색 인풋 (Figma: Search · 10179:1258 — 좌 돋보기 + 우 원형 X clear) */
.board-search { position: relative; flex: 0 1 300px; min-width: 0; }
.board-search__icon {
position: absolute; left: var(--space-16); top: 50%; transform: translateY(-50%);
width: 20px; height: 20px;
filter: invert(30%); /* 검정 → --text-secondary 톤 */
pointer-events: none;
}
.input--search {
/* 옆 board-count 가 밀리지 않게 최대 300 까지만 쓰고, 좁아지면 같이 줄어든다 */
width: 100%; max-width: 300px;
height: 44px; /* 공지 쪽 .select--filter 와 같은 높이 */
padding-left: 46px; /* 돋보기 자리 */
padding-right: 44px; /* clear 버튼 자리 */
}
.input--search::-webkit-search-cancel-button { /* 브라우저 기본 X 제거 → 우리 아이콘 사용 */
-webkit-appearance: none; appearance: none;
}
.board-search__clear {
position: absolute; right: var(--space-12); top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; padding: 0;
display: flex; align-items: center; justify-content: center;
background: var(--bg-tertiary); /* Figma: 회색 원 + icon-x */
border-radius: var(--radius-full);
}
.board-search__clear[hidden] { display: none; }
.board-search__clear img { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
.board-search__clear:hover { background: var(--color-gray-300); }
}
.board-empty {
padding: var(--space-60) 0;
text-align: center;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: 1.8;
color: var(--text-tertiary);
}
/* 공지사항 상세 */
.notice-detail__head {
display: flex; align-items: center; gap: var(--space-20);
padding: var(--space-20);
border-top: 1px solid var(--color-gray-150);
border-bottom: 1px solid var(--color-gray-150);
}
.notice-detail__title {
flex: 1; min-width: 0;
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-4); line-height: var(--lh-label-4);
color: var(--text-primary);
}
.notice-detail__body {
min-height: 180px;
padding: var(--space-28) var(--space-20);
border-bottom: 1px solid var(--color-gray-150);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: 1.9;
color: var(--text-secondary);
white-space: pre-line; /* 본문 줄바꿈 유지 */
}
.notice-nav-row {
display: flex; align-items: center; gap: var(--space-20);
padding: var(--space-16) var(--space-20);
border-bottom: 1px solid var(--color-gray-150);
cursor: pointer;
}
.notice-nav-row__label {
flex: none; width: 60px;
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-2); line-height: 22px;
color: var(--text-secondary);
}
.notice-nav-row__title {
flex: 1; min-width: 0;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice-nav-row.is-disabled { cursor: default; }
.notice-nav-row.is-disabled .notice-nav-row__title { color: var(--text-tertiary); }
@media (hover: hover) and (pointer: fine) {
.notice-nav-row:not(.is-disabled):hover { background: var(--bg-secondary); }
}
.notice-detail__foot { display: flex; justify-content: center; margin-top: var(--space-28); }
/* 고객지원 섹션 묶음 */
.support-block { display: flex; flex-direction: column; gap: var(--space-20); width: 100%; }
.support-block__title { font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: 20px; line-height: 1.5; color: var(--text-primary); }
/* FAQ 아코디언 (+ 클릭 시 답변) */
/* 토글 아이콘은 JS에서 icon-plus ↔ icon-minus 로 교체 */
/* 답변 — 카드처럼 띄우지 않고, 질문 아래에 붙는 한 장의 면으로 구분한다.
라운드·바깥 여백 없이 목록 폭을 꽉 채우고 배경만 슬레이트 톤(푸른기 도는 회색)으로 깐다. */
.faq-answer {
display: none;
margin: 0;
padding: var(--space-20); padding-left: 120px;
background: var(--bg-slate-primary); /* #ebeef6 — slate 100 */
border-radius: 0;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-slate-primary);
}
.faq-entry.is-open .faq-answer { display: block; }
/* 페이지네이션 */
/* 페이지네이션 (Figma: 고객센터_공지 · 10184:1548 — 숫자 32×32 텍스트 · 활성 오렌지 · 화살표만 원형 그레이 배경) */
.pagination { display: flex; gap: var(--space-8); align-items: center; justify-content: center; margin-top: var(--space-24); }
.pagination__btn {
min-width: 32px; height: 32px; padding: 0 4px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-full);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-label-3); line-height: 1;
color: var(--text-secondary);
}
.pagination__btn--active { color: var(--text-brand-500); font-weight: var(--weight-extrabold); }
@media (hover: hover) and (pointer: fine) {
.pagination__btn:hover { background: var(--color-neutral-100); }
.pagination__btn--active:hover { background: transparent; }
}
.pagination__btn[data-go="prev"],
.pagination__btn[data-go="next"] { background: var(--color-neutral-100); color: var(--text-secondary); }
.pagination__btn img {
width: 16px; height: 16px;
filter: invert(30%); /* 검정 → --text-secondary 톤 (faq 토글과 동일 처리) */
}
.pagination__btn:disabled { opacity: .35; cursor: default; background: var(--color-neutral-100); }
/* 서브페이지 제목 — 메인의 섹션 제목(.sec-title)과 같은 준위로 맞춘다.
display-1 은 히어로급이라 서브페이지 본문 위에서 과하게 컸다. */
.page-title {
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: 28px; line-height: 2;
color: var(--text-primary);
text-align: center;
}
/* ============================================================================
MYPAGE (netlify 프로토타입 → 웹 1200 · 자녀 1명 구성)
========================================================================== */
.my-card {
display: flex; flex-direction: column; gap: var(--space-24);
padding: var(--space-28);
background: var(--bg-primary); /* 보더 없이 슬레이트 페이지 배경과의 대비로 구분 */
border-radius: var(--radius-16);
}
/* 자녀 0명 빈 케이스 — 흰 카드 대신 점선 박스 + 인포 안내
점선은 CSS border-dashed로 대시 간격을 못 늘려서 SVG 배경으로 그림
(stroke #e3e3e3 = --bg-tertiary / stroke-width 4 = 실제 2px 노출 / 대시 10 · 간격 12) */
.my-card--empty {
align-items: center; justify-content: center;
min-height: 180px;
padding: var(--space-28) var(--space-20);
background: transparent;
border: 0;
border-radius: var(--radius-16);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='16' ry='16' fill='none' stroke='%23e3e3e3' stroke-width='4' stroke-dasharray='10 12' stroke-linecap='round'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
}
.my-card--empty .info-note { margin: 0; font-size: var(--font-body-2); line-height: 22px; }
/* 세로형 인포 — 아이콘을 크게 위에 두고 문구를 아래로 (빈 상태 안내용) */
.info-note--stack { flex-direction: column; gap: var(--space-8); text-align: center; }
.info-note--stack .info-note__icon { width: 40px; height: 40px; opacity: .4; } /* 크게 쓰는 만큼 톤은 더 연하게 */
/* 마이페이지 등 — 페이지 배경을 제일 연한 슬레이트로 */
.page-slate { background: var(--bg-slate-primary); }
.my-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); }
/* 자녀 카드 패널 — 외곽 박스·패딩 없이: 헤더 아래 라인 하나로 구분, 칸 사이 세로선만
라벨(작은 그레이) → 값(크게) → 하단 액션, 두 칸 높이 동일 */
.my-panels {
display: flex; align-items: stretch; flex-wrap: wrap;
border: 1px solid var(--bg-tertiary); /* 정보 전체를 감싸는 라인 박스 */
border-radius: var(--radius-16);
overflow: hidden;
}
.my-panel {
flex: 1 1 0; min-width: 280px;
display: flex; flex-direction: column; align-items: flex-start;
padding: var(--space-20) var(--space-24);
}
.my-panel + .my-panel { border-left: 1px solid var(--bg-tertiary); } /* 칸 사이 세로선 */
.my-panel--row {
flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-16);
flex-basis: 100%;
}
.my-panel__label {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
margin-bottom: var(--space-8);
}
.my-panel__title {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-primary);
margin-bottom: 2px;
}
.my-panel__value {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-title-3); line-height: var(--lh-title-3);
color: var(--text-primary);
}
.my-panel__value .my-panel__sub { margin-left: 2px; }
.my-panel__sub {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
}
.my-panel__actions {
display: flex; align-items: center; gap: var(--space-16);
margin-top: auto; padding-top: var(--space-16); /* 액션은 패널 바닥 고정 → 좌우 패널 라인 정렬 */
min-height: calc(40px + var(--space-16)); /* btn--sm 높이 기준 — 버튼 없는 칸도 라인 맞춤 */
flex-direction: row-reverse;
}
.my-panel__actions .info-note { margin: 0; } /* 인포 안내가 액션 자리에 올 때 버튼 라인과 수직 중앙 정렬 */
.my-panel .link-muted { align-self: auto; } /* 링크 기본 align-self(flex-end) 해제 */
.my-panel--row .my-panel__actions { margin-top: 0; padding-top: 0; flex: none; }
.my-panel__tip {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--space-8);
padding: 7px 12px;
border-radius: var(--radius-full);
background: #eef6ff;
color: #148fe8;
font-family: var(--font-round);
font-size: 13px;
font-weight: var(--weight-extrabold);
line-height: 18px;
white-space: nowrap;
}
.my-panel__tip-icon {
flex: none;
width: 16px;
height: 16px;
background: #148fe8;
-webkit-mask: url("/etc/krs/assets/icons/icon-arrow-up.svg") no-repeat center / contain;
mask: url("/etc/krs/assets/icons/icon-arrow-up.svg") no-repeat center / contain;
opacity: .95;
}
/* 프로필 (자녀/부모 공용) */
.my-profile { display: flex; align-items: center; gap: var(--space-16); }
.my-avatar {
width: 56px; height: 56px; flex: none;
display: flex; align-items: center; justify-content: center;
background: var(--bg-slate-primary);
border-radius: var(--radius-full);
}
.my-avatar img { width: 26px; height: 26px; }
/* 자녀 아바타 — 부모 아바타(.my-avatar)와 같은 슬레이트 톤.
오렌지 브랜드 컬러는 CTA 준위라 목록 안 아바타가 그걸 쓰면 시선이 먼저 끌린다. */
.my-avatar--child {
background: var(--bg-slate-primary);
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: 22px; color: var(--text-slate-secondary);
}
.my-profile__name {
display: flex; align-items: center; gap: var(--space-8);
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: 20px; line-height: 1.5; color: var(--text-primary);
}
.my-profile__meta {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
}
/* 상태 뱃지 */
.badge {
display: inline-flex; align-items: center;
padding: 3px 10px;
border-radius: var(--radius-full);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-2); line-height: 22px;
}
.badge--level { background: var(--bg-brand-100); color: var(--text-brand-500); }
.badge--active { background: rgba(46, 195, 105, .12); color: var(--color-success); }
.badge--off { background: var(--bg-inverse-100); color: var(--text-tertiary); }
/* 라벨/값 행 */
.my-rows { display: flex; flex-direction: column; gap: var(--space-12); }
.my-row {
display: flex; align-items: center; gap: var(--space-16);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
}
.my-row__label { flex: none; width: 110px; color: var(--text-tertiary); }
.my-row__value { color: var(--text-primary); display: flex; align-items: center; gap: var(--space-12); }
.my-row__sub { color: var(--text-tertiary); font-size: var(--font-body-2); line-height: 22px; }
.my-actions { display: flex; gap: var(--space-12); }
/* 구독 카드 */
.my-plan__name {
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: 20px; line-height: 1.5; color: var(--text-primary);
}
.my-plan__desc {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
}
.my-plan__price {
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: var(--font-label-5); line-height: var(--lh-label-5);
color: var(--text-brand-500);
white-space: nowrap;
}
/* 업셀 안내 (12개월 전환) */
.my-hint {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
padding: var(--space-16) var(--space-20);
background: var(--bg-brand-100);
border-radius: var(--radius-10);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-secondary);
}
.my-hint strong { color: var(--text-brand-500); font-weight: var(--weight-extrabold); }
/* ----------------------------------------------------------------------------
구독 및 결제 팝업 (mdSubscription) — 플랜 요약 + 정보 그룹 박스 + 전환 업셀
-------------------------------------------------------------------------- */
/* 헤더·푸터는 다른 팝업과 동일한 공통 구조(.modal__head / .modal__foot) 그대로 사용 */
/* 플랜 요약 — 라인 박스 */
.sub-plan {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
padding: var(--space-20) var(--space-24);
border-radius: var(--radius-16);
background: var(--bg-sky-50);
}
.sub-plan__name {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-title-3); line-height: var(--lh-title-3);
color: var(--text-primary);
}
.sub-plan__desc {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
margin-top: 2px;
}
.sub-plan__right { text-align: right; white-space: nowrap; }
.sub-plan__price {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-title-6); line-height: var(--lh-title-6);
color: var(--text-primary);
}
.sub-plan__unit { /* 금액 앞 '월' — 작게 붙여서 */
font-size: var(--font-body-2); line-height: 22px; margin-right: 1px;
margin-right: 5px;
}
.sub-plan__note {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-1); line-height: 22px;
color: var(--text-tertiary);
margin-top: 2px;
}
/* 그룹 라벨 + 정보 박스 */
.sub-label { /* 폼 라벨(.form-group__label)과 동일 위계 */
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-2); line-height: 22px;
color: var(--text-primary);
margin: var(--space-24) 0 var(--space-8) var(--space-4);
}
.sub-box {
background: #fff;
border-radius: var(--radius-16);
padding: 0 var(--space-20);
border: 1px solid var(--bg-tertiary);
}
.sub-row {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
min-height: 52px;
padding: var(--space-12) 0;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
}
/* 박스 안 항목은 첫 줄 빼고 모두 구분선 — 펼침(.sub-fold)처럼 래퍼가 끼어도 동일 */
.sub-box > * + * { border-top: 1px solid var(--bg-tertiary); }
/* [PDF 20260804 v1.1 반영] 배송지 주소처럼 값 아래 보조 문구가 붙는 세로형 행 —
기본 .sub-row(좌우 배치)와 달리 위아래로 쌓고 간격을 좁힌다 */
.sub-row--stack {
flex-direction: column; align-items: flex-start; justify-content: flex-start;
gap: var(--space-8);
}
.sub-row--stack .sub-row__value { text-align: left; }
.sub-row--stack .info-note--inline { margin: 0; }
.sub-row__label { flex: none; color: var(--text-tertiary); }
.sub-row__value {
display: flex; align-items: center; gap: var(--space-8);
font-weight: var(--weight-extrabold); color: var(--text-primary); text-align: right;
}
.sub-row__sub { font-weight: var(--weight-bold); font-size: var(--font-body-1); color: var(--text-tertiary); line-height: 22px; }
.sub-row__btn { /* 행 안에 들어가는 작은 [변경] */
height: 34px; min-width: 0; padding: 0 var(--space-16);
font-size: var(--font-body-2); line-height: 22px; border-radius: var(--radius-8);
}
.sub-card-mark { /* 카드사 로고 자리 — 연동 전 목업 색면 */
flex: none; width: 24px; height: 16px;
background: #3b5bdb; border-radius: 3px;
}
/* 푸터에 업셀 + CTA를 세로로 쌓는 변형 */
.modal__foot--stack { flex-direction: column; align-items: stretch; gap: var(--space-12); }
/* 연간 전환 업셀 — 카드 전체가 버튼 */
.sub-upsell {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
width: 100%;
padding: var(--space-16) var(--space-20);
background: #fff;
border: 2px solid rgb(249 115 22 / 60%);
border-radius: var(--radius-16);
text-align: left; cursor: pointer;
}
.sub-upsell[hidden], .sub-upsell[style*="none"] { display: none; }
.sub-upsell__text { display: flex; flex-direction: column; gap: 2px; }
.sub-upsell__title {
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-secondary);
}
.sub-upsell__title strong { color: var(--text-brand-500); font-weight: var(--weight-extrabold); }
.sub-upsell__sub {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
}
.sub-upsell__go {
flex: none; width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: var(--text-brand-500); border-radius: var(--radius-full);
transition: transform .15s ease;
}
.sub-upsell__go img { width: 24px; height: 24px; } /* icon-arrow-right-white.svg */
@media (hover: hover) and (pointer: fine) {
.sub-upsell:hover .sub-upsell__go { transform: translateX(2px); }
}
/* 환불 규정 · 구독 해지 — 결제 수단/결제 예정 금액 행과 완전히 같은 위계 (라벨 회색 · 값 우측) */
.sub-row--link { width: 100%; text-align: left; cursor: pointer; background: none; }
.sub-row--link .sub-row__value { gap: 2px; }
.sub-row__link-text { text-decoration: underline; text-underline-offset: 3px; }
/* 환불 규정 펼침 — 약관 동의 상세(.agree-detail)와 같은 위계, 박스 안쪽에서 아래로 열림 */
.sub-fold + .sub-row { border-top: 1px solid var(--bg-tertiary); }
.sub-fold.is-open { border-bottom: 1px solid var(--bg-tertiary); }
.sub-policy {
max-height: 260px; overflow-y: auto;
padding: var(--space-12) 0 var(--space-16);
border-top: 1px dashed var(--bg-tertiary);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
}
.sub-policy[hidden] { display: none; }
.sub-policy p { margin: 0 0 var(--space-12); }
.sub-policy p:last-child { margin-bottom: 0; }
.sub-policy strong { color: var(--text-secondary); font-weight: var(--weight-extrabold); }
@media (hover: hover) and (pointer: fine) {
.sub-row--link:hover .sub-row__value { color: var(--text-secondary); }
}
/* 진단 이력 행 (notice-item 위계 재사용) */
.diag-row {
display: flex; align-items: center; gap: var(--space-20);
padding: var(--space-20);
border-top: 1px solid var(--color-gray-150);
}
.diag-row:last-child { border-bottom: 1px solid var(--color-gray-150); }
.diag-row__date {
flex: none; width: 110px;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
}
.diag-row__level {
flex: none; width: 44px; text-align: center;
padding: 3px 0; border-radius: var(--radius-8);
background: var(--bg-brand-100);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-2); line-height: 22px;
color: var(--text-brand-500);
}
.diag-row__desc {
flex: 1; min-width: 0;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 낮은 위계 텍스트 액션 (해지 신청 · 회원탈퇴) */
.link-muted {
align-self: flex-end;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
text-decoration: underline; text-underline-offset: 3px;
}
/* 링크처럼 보이는 보조 액션(회원탈퇴 · 다시 진단하기).
글자는 작게 두되 탭 영역은 위아래 패딩으로 벌린다 — 밑줄 글자만 노리면 누르기 어렵다.
패딩이 레이아웃을 밀지 않도록 상하 margin 을 같은 값만큼 음수로 상쇄한다. */
.btn--my-link {
font-size: 14px; line-height: 22px;
padding-block: var(--space-12);
margin-block: calc(var(--space-12) * -1);
}
@media (hover: hover) and (pointer: fine) {
.link-muted:hover { color: var(--text-secondary); }
}
/* 환불 규정 박스 (SB S13: 법무팀 요청 — 접지 않고 펼쳐진 채 상시 노출) */
.refund-box {
max-height: 190px; overflow-y: auto;
padding: var(--space-16) var(--space-20);
background: var(--bg-secondary);
border-radius: var(--radius-10);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-1); line-height: 22px;
color: var(--text-tertiary);
}
/* 팝업 안에서 단독으로 쓸 때 — 배경/패딩 없이 본문처럼, 글자만 한 단계 크게 */
.refund-box--plain {
max-height: none; padding: 0;
background: none; border-radius: 0;
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-secondary);
}
.refund-box p { margin: 0 0 6px; }
.refund-box p:last-child { margin-bottom: 0; }
.refund-box--plain p { margin-bottom: var(--space-12); }
/* 진단 이력 — 좌 리스트 · 우 상세 (SB S19: 레벨 클릭 시 상세 결과 우측 표시) */
.diag-layout { display: flex; gap: var(--space-40); align-items: flex-start; }
.diag-list { flex: 1; min-width: 0; }
.diag-row { cursor: pointer; transition: background .15s ease; }
.diag-row.is-active { background: var(--bg-brand-100); }
@media (hover: hover) and (pointer: fine) {
.diag-row:hover { background: var(--bg-secondary); }
}
.diag-detail {
flex: none; width: 380px;
display: flex; flex-direction: column; gap: var(--space-16);
padding: var(--space-28);
background: var(--bg-secondary);
border-radius: var(--radius-16);
}
.diag-detail__level {
align-self: flex-start;
padding: 6px 16px; border-radius: var(--radius-full);
background: var(--bg-brand-500); color: var(--text-inverse);
font-family: var(--font-neo); font-weight: var(--weight-extrabold); font-size: 20px;
}
.diag-detail__date {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-tertiary);
}
.diag-detail__desc {
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-secondary);
}
/* ============================================================================
미리 체험하기 — 3개 핵심 서비스 진입 카드 (Figma: KRS-미리체험하기 · 10203:8390)
========================================================================== */
.page-sub {
margin-top: var(--space-20);
text-align: center;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-secondary);
}
/* [DEV:TRIAL] 미리 체험하기 대표 카드. 모바일 이미지 폭/가운데 정렬/24px 패딩과 외곽 8px 라운드 확인. 최종 재정의와 비교값: docs/STYLE_CHANGES.md */
.entry-cards {
display: flex; gap: 40px;
width: 100%;
margin-top: 40px;
}
.entry-card {
flex: 1; min-width: 0;
display: flex; flex-direction: column; align-items: center;
padding: var(--space-28) 40px var(--space-28);
background: var(--bg-slate-primary);
border-radius: var(--radius-24);
text-align: center;
}
/* [개발자 확인 20260828] 번호와 제목을 PC·모바일 공통 가로 한 줄로 묶고 그룹 전체를 중앙 정렬한다. */
.entry-card__heading {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
flex-wrap: nowrap;
}
.entry-card__num {
width: 32px; height: 32px; flex: none;
display: flex; align-items: center; justify-content: center;
background: var(--bg-inverse-primary);
border-radius: var(--radius-full);
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: 14px;
color: var(--text-inverse);
line-height: 22px;
}
.entry-card__title {
margin-top: 0;
white-space: nowrap;
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: 24px; line-height: 1.5;
color: var(--text-primary);
}
.entry-card__mock {
margin-top: var(--space-20);
width: 100%;
/* [개발자 확인 20260824] 미리 체험하기 이미지의 외곽선은 제거하고 기존 섀도우만 유지한다. */
border: 0;
outline: 0;
border-radius: var(--radius-10);
overflow: hidden;
box-shadow: var(--shadow-100);
}
.entry-card__mock img { width: 100%; display: block; border: 0; outline: 0; }
/* [개발자 확인 20260824] 코어·스키마·AI 추천픽 메인 이미지 라운드를 8px로 축소한다. */
.entry-card__mock--main-preview,
.entry-card__mock--main-preview img { border-radius: var(--radius-8); }
/* [개발자 확인 20260828] 제목의 [KRS] 미리보기 마커를 독서 취향(.persona-outer__term)과 같은 #DDE9FD로 통일.
하단 패딩을 제거하고 색상 영역을 아래 35%로 줄여 기존 베이지 마커보다 얇게 표시한다. */
.preview-page-title span {
display: inline-block; padding: 0 6px;
background: linear-gradient(to bottom, transparent 65%, #DDE9FD 65%);
color: var(--text-primary); font-weight: var(--weight-extrabold);
}
.entry-card__desc {
margin-top: var(--space-20);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-secondary);
}
.entry-card__desc--strong {
font-weight: var(--weight-extrabold);
color: var(--text-primary);
}
.entry-card__actions { margin-top: auto; padding-top: 40px; }
/* ============================================================================
KRS 미리보기 (TRIAL) — 미리 체험하기 풀페이지 팝업 (trial3 이식 · KRS 토큰)
========================================================================== */
.trial-ov {
position: fixed; inset: 0; z-index: 150;
display: none;
background: rgba(10, 10, 10, .8);
}
.trial-ov.is-open { display: block; }
/* 팝업이지만 풀페이지 — 화면 전체를 채움 */
.trial-app {
width: 100%; height: 100%;
display: flex; flex-direction: column;
background: var(--bg-primary);
overflow: hidden;
}
/* 헤더 — 모달 헤드와 동일 위계 (닫기 X 좌상단) */
.trial-head {
position: relative; flex: none;
display: flex; align-items: center; justify-content: center;
min-height: 72px;
padding: var(--space-16) 88px;
border-bottom: 1px solid var(--color-gray-150);
}
.trial-head__title {
display: flex; align-items: center; gap: var(--space-8);
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: 20px; line-height: 1.5; color: var(--text-primary);
}
.trial-head__close {
position: absolute; right: var(--space-24); top: 50%; transform: translateY(-50%);
width: 40px; height: 40px; padding: 0;
display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-full);
transition: background .15s ease;
}
.trial-head__close img { width: 40px; height: 40px; }
@media (hover: hover) and (pointer: fine) {
.trial-head__close:hover { background: rgba(26, 26, 26, .06); }
}
.trial-body { position: relative; flex: 1; display: flex; overflow: hidden; }
/* 대분류 진입 스플래시 (Figma: trial_XX-start — 다크 딤 + 중앙 화이트 카드, 잠깐 떠있다 사라짐) */
.trial-splash {
position: absolute; inset: 0; z-index: 70;
display: flex; align-items: center; justify-content: center;
background: rgba(26, 26, 26, .55);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
.trial-splash.is-show { opacity: 1; pointer-events: auto; cursor: pointer; } /* 클릭하면 바로 시작 */
.trial-splash__card {
width: 430px; max-width: calc(100vw - 48px);
padding: var(--space-32) var(--space-40);
background: var(--bg-primary);
border-radius: var(--radius-24);
box-shadow: var(--shadow-100);
text-align: center;
transform: scale(.95);
transition: transform .3s ease;
}
.trial-splash.is-show .trial-splash__card { transform: scale(1); }
.trial-splash__icon { display: block; width: 32px; height: 32px; margin: 0 auto; } /* 센터 정렬 */
.trial-splash__title {
margin-top: var(--space-8);
font-family: var(--font-neo); font-weight: var(--weight-extrabold);
font-size: var(--font-label-4); line-height: var(--lh-label-4);
color: var(--text-primary);
}
.trial-splash__desc {
margin-top: var(--space-12);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-secondary);
}
.trial-splash__ok {
margin-top: var(--space-20);
width: 100%; height: 48px;
border-radius: 12px;
}
/* 시작 가이드 말풍선 (Figma: tooltip · 10198:2595 — 반투명 다크 pill · 10×16 패딩 · 꼬리 16×8) */
.trial-toast {
position: absolute; z-index: 90; /* 최상위 — 스플래시(70)·화살표(80)보다 위 (가이드는 팝업 전체 기준) */
padding: 12px 18px;
background: rgba(244, 246, 252, .92); /* slate-50 반투명 + 블러 */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: var(--radius-full);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-body-2); line-height: 22px;
color: var(--text-primary); /* 어두운 글자 */
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .35s ease, transform .35s ease;
}
/* 말풍선 문구 스왑 — 기본(PC)은 PC 문구만. ≤768 에서 모바일 문구로 바뀐다 */
.trial-toast__mo { display: none; }
.trial-toast::before { content: ""; position: absolute; }
/* 메뉴 안내 — 꼬리가 왼쪽(메뉴)을 가리킴 */
.trial-toast--menu { transform: translateX(-8px); }
.trial-toast--menu::before {
left: -6px; top: 50%; transform: translateY(-50%);
border-top: 8px solid transparent; border-bottom: 8px solid transparent;
border-right: 8px solid rgba(244, 246, 252, .92);
}
.trial-toast--menu.is-show { opacity: 1; transform: translateX(0); }
/* 이전/다음 안내 — 꼬리가 아래(버튼)를 가리킴 */
.trial-toast--nav { transform: translateY(8px); }
.trial-toast--nav::before {
left: 50%; bottom: -6px; transform: translateX(-50%);
border-left: 8px solid transparent; border-right: 8px solid transparent;
border-top: 8px solid rgba(244, 246, 252, .92);
}
.trial-toast--nav.is-show { opacity: 1; transform: translateY(0); }
/* 좌측 사이드 메뉴 — KRS 다크 슬레이트 */
.trial-menu {
width: 220px; flex: none;
background: var(--color-slate-900);
padding: var(--space-16) var(--space-12);
overflow-y: auto;
}
.trial-menu[hidden] { display: none; }
.trial-menu__group { display: flex; flex-direction: column; margin-bottom: 6px; }
.trial-menu__divider { height: 1px; background: rgba(255,255,255,.12); margin: var(--space-12) var(--space-8); }
.trial-menu__item {
display: flex; align-items: center; gap: var(--space-8);
width: 100%; text-align: left;
padding: 7px 10px;
border-radius: var(--radius-8);
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: 14px; line-height: 22px;
color: var(--text-inverse-a80);
transition: background .15s ease, color .15s ease;
}
.trial-menu__icon { width: 24px; height: 24px; flex: none; }
.trial-menu__item--major { font-size: 16px; font-weight: var(--weight-extrabold); color: var(--text-inverse); }
/* 서브: 들여쓰기 + 방점(dot) — 텍스트 시작을 메이저 텍스트(아이콘 뒤)와 정렬 */
.trial-menu__item--sub { padding-left: 31px; font-size: 14px; line-height: 22px; } /* 방점+gap 포함, 메이저 텍스트(10+24+8=42)와 정렬 */
.trial-menu__item--sub::before {
content: ""; flex: none;
width: 3px; height: 3px;
border-radius: var(--radius-full);
background: currentColor; opacity: .7;
}
/* on: 연한 화이트 배경 한 톤 + 완전 화이트 텍스트 (오렌지 강조 없음) */
.trial-menu__item.is-active { color: var(--text-inverse); background: var(--bg-alpha-white-20); } /* on은 색으로만 — 굵기 변경 금지(레이아웃 흔들림) */
/* 서브 항목 on: 배경 없이 텍스트만 화이트 */
.trial-menu__item--sub.is-active { color: var(--text-inverse); background: none; }
@media (hover: hover) and (pointer: fine) {
.trial-menu__item:hover { color: var(--text-inverse); background: var(--bg-alpha-white-20); }
.trial-menu__item--sub:hover { background: none; } /* 서브는 hover 배경 없음 */
}
/* 우측 콘텐츠 */
.trial-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* 세부 콘텐츠 */
.trial-detail { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.trial-detail[hidden] { display: none; }
.trial-detail__body {
flex: 1;
overflow-y: auto; overflow-x: hidden; /* 내부가 넘치면 스크롤 */
display: flex;
padding: 40px;
background: var(--bg-secondary);
}
/* 이미지 figure — 가로 1200 · 라운드 래퍼 + 40px 아래 캡션 */
.trial-figure {
width: min(1280px, 100%); /* 이미지 원본 1280×800 그대로 렌더 */
display: flex; flex-direction: column; align-items: center;
gap: 40px; /* 이미지 ↔ 캡션 간격 */
margin: auto; /* 중앙 정렬 · 세로로 넘치면 body가 스크롤 */
}
.trial-img-wrap {
position: relative; /* 스플래시가 이 안에서 중앙 정렬됨 */
width: 100%;
flex: none; /* 눌리지 않음 — 이미지 비율(1280:800) 항상 유지 */
/* [개발자 확인 20260824] 상세 이미지도 별도 외곽선 없이 SVG에 포함된 섀도우만 노출한다. */
border: 0;
outline: 0;
/* [개발자 확인 20260824] 상세 화면 래퍼와 이미지 레이어도 동일한 8px 라운드를 사용한다. */
border-radius: var(--radius-8);
overflow: hidden;
/* [개발자 확인 20260824] SVG 투명 외곽 여백은 자산에서 제거하고, 래퍼에는 외곽선 없이 섀도우와 공통 라운드만 유지한다. */
box-shadow: var(--shadow-100);
isolation: isolate;
display: flex;
}
.trial-img-stack {
flex: 1;
display: grid; /* 이미지 두 장을 같은 칸에 겹쳐 크로스페이드 */
align-items: center; justify-items: center;
border: 0;
outline: 0;
border-radius: var(--radius-8);
overflow: hidden;
}
.trial-img-stack img {
grid-area: 1 / 1;
display: block;
width: 100%;
height: auto; /* 비율 그대로 — 잘리지 않음 */
border: 0;
outline: 0;
border-radius: var(--radius-8);
clip-path: inset(0 round var(--radius-8));
transition: opacity .22s ease;
}
/* 캡션 — 좌: 무엇에 대한 설명인지(페이지 네비게이션형 라벨) · 우: 상세 설명 */
.trial-img-caption {
flex: none;
width: 100%;
display: flex; align-items: flex-start; gap: var(--space-16);
}
.trial-img-caption__label {
flex: none;
padding: 6px 16px;
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-full);
font-family: var(--font-round); font-weight: var(--weight-extrabold);
font-size: var(--font-label-2); line-height: 22px;
color: var(--text-secondary);
white-space: nowrap;
}
.trial-img-caption__desc {
flex: 1; min-width: 0;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-3); line-height: var(--lh-body-3);
color: var(--text-secondary);
}
.trial-ov--dark .trial-img-caption__label { border-color: var(--color-slate-600); color: var(--color-slate-400); }
.trial-ov--dark .trial-img-caption__desc { color: var(--color-slate-100); } /* slate-400 → 한 톤 밝게 */
/* 좌우 이동 화살표 — top은 JS(positionArrows)가 이미지 래퍼 중앙으로 갱신 */
.trial-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 80; /* 스플래시 모달(70)보다 위 */
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .55); /* 반투명 + 배경 블러 (글래스) */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: var(--radius-full);
box-shadow: var(--shadow-100);
transition: background .15s ease, opacity .15s ease, top .25s ease;
}
/* 이미지(최대 1280) 가장자리에서 40px 떨어진 위치 · 화면이 좁으면 최소 24px 확보 */
.trial-arrow--left { left: max(var(--space-24), calc(50% - 640px - 40px - 48px)); }
.trial-arrow--right { right: max(var(--space-24), calc(50% - 640px - 40px - 48px)); }
.trial-arrow img { width: 20px; height: 20px; filter: invert(30%); }
.trial-arrow:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
.trial-arrow:hover:not(:disabled) { background: var(--color-gray-300); }
}
/* 푸터 — 팝업(modal__foot)과 동일 스펙: 좌우 48 · 하 24 · 버튼 147×56 */
.trial-detail__foot {
position: relative; flex: none;
display: flex; align-items: center; justify-content: center; gap: var(--space-16); /* 버튼 중앙 정렬 */
padding: var(--space-16) var(--space-48) var(--space-24);
border-top: 1px solid var(--color-gray-150);
background: var(--bg-primary);
}
.trial-detail__foot .btn { min-width: 147px; height: 56px; border-radius: 20px; }
.trial-detail__foot .btn:disabled { opacity: .35; cursor: default; filter: none; }
/* ----------------------------------------------------------------------------
TRIAL 다크모드 (.trial-ov--dark) — 이 팝업만 몰입형 다크
베이스: foundation Slate Scale (slate-900 바탕 · slate-600 보더/면 · slate-400 보조 텍스트)
-------------------------------------------------------------------------- */
.trial-ov--dark .trial-app { background: var(--color-slate-900); }
.trial-ov--dark .trial-head { border-bottom-color: var(--color-slate-600); }
.trial-ov--dark .trial-head__title { color: var(--text-inverse); }
.trial-ov--dark .trial-head__close img { filter: invert(1); }
.trial-ov--dark .trial-menu { background: rgba(0, 0, 0, .25); } /* slate-900 위에 한 단계 더 깊게 */
.trial-ov--dark .trial-menu__item { color: var(--color-slate-400); }
.trial-ov--dark .trial-menu__item--major { color: var(--text-inverse); }
.trial-ov--dark .trial-menu__item.is-active { color: var(--text-inverse); background: var(--bg-alpha-white-20); }
.trial-ov--dark .trial-menu__item--sub.is-active { color: var(--text-inverse); background: none; }
.trial-ov--dark .trial-menu__divider { background: var(--color-slate-600); }
.trial-ov--dark .trial-home__intro { color: var(--text-inverse); }
.trial-ov--dark .trial-card {
background: rgba(255, 255, 255, .05);
border-color: var(--color-slate-600);
}
.trial-ov--dark .trial-card__label { color: var(--text-inverse); }
.trial-ov--dark .trial-card__num { background: var(--bg-brand-500); }
.trial-ov--dark .trial-card__desc { color: var(--color-slate-400); }
.trial-ov--dark .btn--outline { color: var(--text-inverse); border-color: var(--color-slate-500); }
.trial-ov--dark .trial-detail__body { background: rgba(0, 0, 0, .3); }
.trial-ov--dark .trial-detail__foot {
background: var(--color-slate-900);
border-top-color: var(--color-slate-600);
}
.trial-ov--dark .trial-detail__foot .btn--text { color: var(--color-slate-100); } /* 바탕 없는 흰색 계통 텍스트 버튼 */
@media (hover: hover) and (pointer: fine) {
.trial-ov--dark .trial-detail__foot .btn--text:hover:not(:disabled) {
background: var(--bg-alpha-white-20);
color: var(--text-inverse);
filter: none;
}
}
.trial-ov--dark .trial-arrow { background: rgba(71, 85, 105, .6); } /* slate-600 반투명 — 배경 블러와 조합 */
.trial-ov--dark .trial-arrow img { filter: invert(1); }
/* 다크 스크롤바 — slate 톤 (팝업 내부 스크롤 영역 공통) */
.trial-ov--dark *::-webkit-scrollbar { width: 8px; height: 8px; }
.trial-ov--dark *::-webkit-scrollbar-track { background: transparent; }
.trial-ov--dark *::-webkit-scrollbar-thumb {
background: var(--color-slate-600);
border-radius: var(--radius-full);
}
.trial-ov--dark *::-webkit-scrollbar-thumb:hover { background: var(--color-slate-500); }
/* 안내 팝업·투어 말풍선은 다크에서도 화이트(공통 팝업 형식) 유지 */
@media (hover: hover) and (pointer: fine) {
.trial-ov--dark .trial-head__close:hover { background: rgba(255, 255, 255, .1); }
.trial-ov--dark .btn--outline:hover { border-color: rgba(255, 255, 255, .8); }
}
/* 인풋 하단 안내/오류 — info-note와 동일하게 인포 아이콘 + 텍스트 한 줄 구성 */
.form-hint, .form-error {
display: flex; align-items: center; gap: 2px;
font-family: var(--font-round); font-weight: var(--weight-bold);
font-size: var(--font-body-1); line-height: 22px;
color: var(--text-tertiary);
}
/* 기본 안내: 기본색(#1A1A1A) 아이콘을 오퍼시티 낮춰 회색 텍스트 톤에 맞춤 */
.form-hint::before, .form-error::before {
content: ''; flex: none; width: 16px; height: 16px;
background: url("/etc/krs/assets/icons/icon-info-circle.svg") no-repeat center / contain;
opacity: .6;
}
/* 오류: 안내 문구는 그대로 두고 색만 에러색으로 — 아이콘도 에러 전용 에셋 */
.form-hint.is-error { color: var(--color-error); }
.form-hint.is-error::before, .form-error::before {
background-image: url("/etc/krs/assets/icons/icon-info-circle-error.svg");
opacity: 1;
}
.form-error { color: var(--color-error); display: none; }
.form-error.is-visible { display: flex; }
/* 성공 안내 (휴대폰 인증 완료 등) — 성공 전용 아이콘 에셋 */
.form-hint--success { color: var(--color-success); }
.form-hint--success::before {
background-image: url("/etc/krs/assets/icons/icon-info-circle-success.svg");
opacity: 1;
}
.form-hint--success[hidden] { display: none; } /* display:flex가 hidden을 덮지 않게 */
/* 미리 체험하기 뷰어 — 사이드 메뉴의 "현재 항목" 표시줄.
데스크톱에서는 사이드 메뉴가 그대로 펼쳐져 있으므로 필요 없다.
≤768 에서 상단 드롭다운으로 바뀔 때만 responsive.css 가 display:flex 로 켠다. */
.trial-menu__current { display: none; }
/* ============================================================================
초기 로딩 화면 (js/preloader.js 가 마크업을 만든다)
KRS 로고 / 캐릭터 얼굴이 든 원 / "로딩 N%" 세로 배치.
원은 index 의 .diag-circle__center 와 같은 --fill 방식 — 100% 면 빈 원, 0% 면 가득.
배경은 히어로와 같은 하늘 그라데이션이라 걷힐 때 튀지 않는다.
========================================================================== */
.preloader {
position: fixed; inset: 0; z-index: 9999;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: var(--space-16);
background: #fff;
transition: opacity .45s ease;
}
.preloader.is-done { opacity: 0; pointer-events: none; }
.preloader__logo { width: 84px; height: auto; }
.preloader__circle {
position: relative;
width: 120px; height: 120px;
border-radius: 999px;
background: #fff;
border: 3px solid #4A80FF;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.preloader__circle::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, #488AFF 0%, #3FC1FE 100%);
transform: translateY(var(--fill, 100%));
transition: transform .35s ease-out;
}
.preloader__face { position: relative; z-index: 1; width: 84px; height: 84px; object-fit: contain; }
.preloader__label {
font-family: var(--font-round);
font-weight: var(--weight-extrabold);
font-size: 14px; line-height: 22px;
color: var(--text-slate-secondary);
}
.preloader__label .preloader__num { margin-left: var(--space-8); }
@media (max-width: 480px) {
.preloader__circle { width: 100px; height: 100px; }
.preloader__face { width: 70px; height: 70px; }
.preloader__logo { width: 68px; }
}
@media (prefers-reduced-motion: reduce) {
.preloader__circle::before { transition: none; }
}
/* ============================================================================
2026.08.31 개인정보처리방침 CSS 추가
========================================================================== */
html {
scroll-behavior: smooth;
}
.contBody {
* {
word-break: break-all;
}
p{
word-break: keep-all;
line-height: 1.6;
}
}
.policywrap {
font-family: 'Malgun Gothic', dotum, sans-serif;
text-align: center;
}
.Title-wrap {
margin-bottom: 40px;
}
.subBoxTitleWrap h2 {
text-align: center;
}
.txtMarginM {
margin-bottom: 12px;
}
.hd3 {
font-size: 2rem;
}
.hd {
line-height: 140%;
letter-spacing: -0.02em;
}
.bd {
font-weight: 600;
}
.layoutWrap {
width: 1720px;
padding: 0 40px;
margin: 0 auto;
}
.sortArea {
height: 48px;
display: flex;
justify-content: center;
}
.boxMarginS {
margin-bottom: 60px;
}
.sortArea .select_basic {
margin: 0 auto;
height: 48px;
width: 100%;
max-width: 600px;
font-weight: 600;
padding-right: 36px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#cateForm{
width:100%;
display:flex;
align-item:center;
justify-content:center;
}
.otherCont strong{
color:var(--gr900);
font-weight:700;
}
.otherCont strong > span{
color:var(--gr900);
font-weight:700;
}
.select_basic{
-o-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0 16px;
position: relative;
float: left;
width: 280px;
height: 40px;
color: var(--gr400, #6D757E);
font-weight: 300;
background: #fff url('/re/images/icons/arrowFill_gr.svg') calc(100% - 10px) center/16px no-repeat;
border-radius: 8px;
transition: all 375ms ease-in-out;
border: 1px solid var(--gr150, #DEE2E6);
margin-bottom: 20px;
}
.select_basic:focus-visible{
outline: none;
border: 1px solid var(--gr900, #212529) !important;
}
.select_basic:focus-visible{
outline: none;
border: 1px solid var(--gr900, #212529) !important;
}
/* 개인정보처리방침 콘텐츠 영역 내부로 스타일 한정 (스코핑) */
.contBody {
scroll-behavior: smooth;
}
/* 전체 기본 폰트, 색상, 자간 규칙 통일 */
.contBody,
.contBody .sentence,
.contBody p,
.contBody td,
.contBody th {
font-size: 15px;
line-height: 1.6;
letter-spacing: -0.5px;
color: #333;
}
/* 모든 입력 요소 및 하위 텍스트에 자간 강제 적용 */
.contBody * {
letter-spacing: -0.5px;
}
.contBody .sentence {
margin-top: 35px;
font-size: 17px;
line-height: 1.7;
word-break: keep-all;
color: #545454;
}
/* --- 라벨링 영역 --- */
.contBody .labelWrap {
display: flex;
justify-content: center;
width: 100%;
padding: 40px 20px;
box-sizing: border-box;
margin: 30px 0;
}
.contBody .labelTable {
background: #fff;
width: 900px;
max-width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 2px solid #111;
border-left: 1px solid #ccc;
}
.contBody .labelArea {
display: flex;
flex-direction: column;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.contBody .label {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.contBody .label a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.contBody .label img {
width: 90%;
max-width: 180px;
height: auto;
object-fit: contain;
display: block;
}
.contBody .labelTxt {
display: flex;
justify-content: center;
align-items: center;
height: 52px;
border-top: 1px solid #eee;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
text-align: center;
word-break: keep-all;
padding: 0 8px;
box-sizing: border-box;
background-color: #fcfcfc;
color: #222;
}
/* --- 본문 타이틀 및 섹션 --- */
.contBody .sectionBlock {
text-align: left;
margin: 50px 0;
}
.contBody .subsectionThis {
font-size: 1.3rem;
font-weight: 700;
color: #111;
margin-top: 30px;
margin-bottom: 15px;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
}
.contBody p {
margin-bottom: 12px;
line-height: 1.65;
word-break: keep-all;
color: #333;
}
/* --- 테이블 (표) 정렬 및 폰트 설정 --- */
.contBody .tableThis {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
table-layout: fixed;
}
.contBody .tableThis th,
.contBody .tableThis td {
border: 1px solid #ddd;
font-size: 14px;
padding: 10px;
line-height: 1.5;
word-break: keep-all !important;
}
.contBody .tableThis th {
background-color: #f7f9fa;
color: #111;
font-weight: 600;
text-align: center;
}
.contBody .tableThis td {
text-align: left;
color: #444;
font-weight: normal;
}
/* 비교 테이블 스펙 조정 */
.contBody .compareTable {
font-weight: normal !important;
}
.contBody .compareTable td {
text-align: left;
padding: 20px;
background-color: #fff;
color: #333;
}
.contBody .compareTable p {
color: #333;
}
/* --- 브라우저 설정 안내 영역 --- */
.contBody .browserSection {
margin: 25px 0;
padding-left: 5px;
}
.contBody .browserTitle {
font-size: 16px;
font-weight: 700;
color: #000;
margin-top: 15px;
margin-bottom: 15px;
}
.contBody .policyItem {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 12px 0 ;
}
.contBody .num {
min-width: 22px;
height: 22px;
border-radius: 50%;
background: #222;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 11px;
font-weight: 700;
margin-top: 2px;
}
.contBody .txt {
flex: 1;
font-size: 14px;
line-height: 1.6;
color: #444;
word-break: keep-all;
}
.contBody .indentText {
padding-left: 1.2em;
text-indent: -1.2em;
}
/* 링크 스타일 */
.contBody a {
color: #0066cc;
text-decoration: underline;
}
.contBody .thisSection p a {
color: #0066cc !important;
}
@media only screen and (max-width: 1024px){
.contBody .labelTable {
grid-template-columns: repeat(2, 1fr);
}
}