/* ========================================================================== 패턴 영어 V2 뷰어 (스태프 미리보기) ========================================================================== */ .pv2-page { background: #f7f8fa; font-family: 'Nunito', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; color: #1f2430; } .pv2 { max-width: 860px; margin: 0 auto; padding: 0 18px 80px; } /* ── 테마 전역 스타일 무력화 ───────────────────────────── 테마 style.css 가 컨테이너에 text-align:center 를 걸고 `* { list-style:none; margin:0; padding:0 }` 리셋을 적용하기 때문에, 뷰어 스코프 안에서만 명시적으로 되돌린다. (body 클래스를 함께 써서 테마 규칙보다 우선순위를 높인다) */ body.pv2-page .pv2, body.pv2-page .pv2 * { text-align: left; } /* 의도적으로 가운데 정렬하는 요소만 예외 처리 */ body.pv2-page .pv2-hero, body.pv2-page .pv2-hero *, body.pv2-page .pv2-empty, body.pv2-page .pv2-empty *, body.pv2-page .pv2-line__sp, body.pv2-page .pv2-pagenum { text-align: center; } /* 히어로는 양쪽 다 좌측 정렬. 가운데 정렬 + 짧은 카피는 랜딩페이지에서 너무 많이 본 배치라 본문(좌측 정렬)과 축이 어긋나기도 한다. */ body.pv2-page .pv2-hero--single, body.pv2-page .pv2-hero--single *, body.pv2-page .pv2-hero--list, body.pv2-page .pv2-hero--list * { text-align: left; } /* 목록 마커 복원 (테마의 * 리셋이 list-style:none 을 걸어둠) */ body.pv2-page .pv2-structures, body.pv2-page .pv2-examples, body.pv2-page .pv2-output, body.pv2-page .pv2-discussion, body.pv2-page .pv2-selfcheck { list-style: decimal outside; } body.pv2-page .pv2-bullets, body.pv2-page .pv2-ex-list { list-style: disc outside; } body.pv2-page .pv2-mistakes { list-style: none; } body.pv2-page .pv2 li::marker { color: #8b93a7; font-weight: 700; } /* ── 미리보기 바 ────────────────────────────────────────── */ .pv2-preview-bar { background: #1f2430; color: #e8eaf0; font-size: 13px; padding: 8px 18px; display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; } .pv2-preview-bar__tag { background: #ffb020; color: #1f2430; font-weight: 800; border-radius: 4px; padding: 1px 8px; font-size: 12px; } /* ── 언어 전환 (scls) ───────────────────────────────────── JS가 에 클래스를 붙이기 전에도 한쪽만 보이도록 :not() 으로 기본 상태(한국어)를 지정한다. 양쪽이 동시에 깜빡이는 것 방지. */ html:not(.scls-lang-en) .scls-en { display: none; } html.scls-lang-en .scls-ko { display: none; } /* 언어 전환 span 은 글자를 담는 껍데기일 뿐이라 스스로 꾸미면 안 된다. 테마 style.css 가 span 에 폰트 크기·색을 잡고 있어서, 이걸 풀어 주지 않으면 부모에 준 font-size 가 무시된다 (목록 제목이 안 커지던 원인). display 는 건드리지 않는다 — 위 두 줄이 언어 전환을 담당한다. */ body.pv2-page .scls-ko, body.pv2-page .scls-en { font-size: inherit; font-weight: inherit; font-family: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } /* 언어 스위치는 '정의와 뉘앙스' 섹션 안에만 있다 (상단 컨트롤 바는 제거됨) */ .pv2-langswitch { display: inline-flex; border: 1px solid #d8dce6; border-radius: 20px; overflow: hidden; flex: 0 0 auto; } .pv2-langswitch button { background: #fff; border: 0; padding: 5px 12px; font-size: 12px; font-weight: 700; color: #5a6478; cursor: pointer; font-family: inherit; white-space: nowrap; } .pv2-langswitch button:hover { background: #eef2fb; color: #2b5b9e; } .pv2-langswitch button.is-active { background: #2b5b9e; color: #fff; } /* ── 언어별 표시 규칙 ──────────────────────────────────── 교재 내용은 원칙적으로 양쪽 언어 모두 동일하게 보여준다. 예외는 '정의와 뉘앙스' 한 곳 — 같은 내용을 두 언어로 중복 노출할 이유가 없어 .scls-ko / .scls-en 으로 한쪽만 띄우고 스위치로 전환한다. */ .pv2-note--en { color: #5a6478; font-style: italic; } /* ── 히어로 ─────────────────────────────────────────────── */ .pv2-hero { padding: 34px 0 22px; text-align: center; } .pv2-hero--single { text-align: left; position: relative; } /* ── 목록 히어로 ───────────────────────────────────────── 제목과 카피 한 줄뿐이다. 배경도 장식도 없이 타이포로만 잡는다. */ .pv2-hero--list { padding: 48px 0 30px; } /* 한글 큰 글씨는 자간을 조여야 낱글자가 아니라 덩어리로 읽힌다 */ .pv2-hero--list .pv2-hero__title { font-size: 36px; letter-spacing: -.02em; margin: 0 0 12px; } .pv2-hero__lead { max-width: 520px; margin: 0; font-size: 16px; line-height: 1.75; color: #5a6478; word-break: keep-all; } /* 카피에서 한 단어만 눌러 준다. 테마가 span/b 색을 잡고 있어 body 접두사로 이긴다 */ body.pv2-page .pv2-hero__lead b { color: #1e4674; font-weight: 800; } .pv2-hero__back { display: inline-block; font-size: 13px; color: #5a6478; text-decoration: none; margin-bottom: 10px; } .pv2-hero__back:hover { color: #2b5b9e; } .pv2-hero__num { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #8b93a7; text-transform: uppercase; } .pv2-hero__title { font-size: 32px; font-weight: 800; margin: 4px 0 6px; line-height: 1.25; word-break: keep-all; } /* 히어로도 영어(정의)가 주, 한국어(뜻)가 부 — 언어 설정과 무관 */ .pv2-hero__sub-en { font-size: 16px; color: #3a4256; margin: 4px 0 0; line-height: 1.6; } .pv2-hero__sub { font-size: 13px; color: #8b93a7; margin: 0; } .pv2-hero__warn { margin-top: 14px; background: #fff4e5; border: 1px solid #ffd9a0; color: #8a5300; border-radius: 8px; padding: 8px 12px; font-size: 13px; } /* ── 검색 ───────────────────────────────────────────────── */ .pv2-search { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .pv2-search input[type="search"] { flex: 1 1 220px; border: 1px solid #d8dce6; border-radius: 4px; padding: 10px 14px; font-size: 15px; background: #fff; } .pv2-btn { display: inline-flex; align-items: center; gap: 4px; background: #2b5b9e; color: #fff; border: 0; border-radius: 4px; padding: 10px 18px; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; } .pv2-btn:hover { background: #234b82; color: #fff; } .pv2-btn--ghost { background: #fff; color: #3a4256; border: 1px solid #d8dce6; } .pv2-btn--ghost:hover { background: #eef2fb; color: #2b5b9e; } /* 버튼 글자는 안쪽 .scls-ko / .scls-en span 에 들어 있는데, 테마 style.css 가 span 색을 따로 잡고 있어 파란 버튼 위에 검은 글자가 나왔다. text-align 을 되돌릴 때와 같이 body 클래스를 붙여 우선순위를 올린다. */ body.pv2-page .pv2-btn, body.pv2-page .pv2-btn * { color: #fff; } body.pv2-page .pv2-btn--ghost, body.pv2-page .pv2-btn--ghost * { color: #3a4256; } body.pv2-page .pv2-btn--ghost:hover, body.pv2-page .pv2-btn--ghost:hover * { color: #2b5b9e; } /* ── 목록 ───────────────────────────────────────────────── */ .pv2-list { display: grid; /* 문장 한 줄이 들어가므로 예전(250px)보다 조금 넓게 잡는다 */ grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; } /* 카드는 평평하게 둔다. 둥근 모서리 + 옅은 그림자 + 뜨는 호버는 어느 사이트에나 있는 조합이라 화면 전체가 어디서 본 듯한 인상이 된다. 테두리 한 줄로만 구분한다. */ .pv2-card { /* 질문 블록을 카드 바닥에 붙여 여러 장이 나란히 놓여도 눈높이가 맞게 한다 */ display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e5ea; border-radius: 4px; padding: 20px 18px; text-decoration: none; color: inherit; transition: border-color .12s ease; } .pv2-card:hover { border-color: #9fadc2; color: inherit; } .pv2-card__num { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a2a9ba; margin-bottom: 7px; } .pv2-card__expr { display: block; font-size: 19px; font-weight: 800; line-height: 1.3; margin-bottom: 3px; word-break: break-word; } .pv2-card__trans { display: block; font-size: 13px; line-height: 1.5; color: #6b7488; margin-bottom: 16px; } /* 목표 문장 — 색면으로 감싸는 대신 왼쪽 선 하나로 떼어 놓는다. 연한 파란 박스에 이모지까지 얹으면 딱 그 흔한 화면이 된다. 문장은 한국어 한 줄뿐이다. 영어는 일부러 싣지 않는다 — 답을 미리 주면 "이걸 영어로 말할 수 있게 되겠구나" 하는 동기가 사라진다. */ .pv2-card__goal { margin-top: auto; padding-left: 13px; border-left: 2px solid #d4d8e0; transition: border-color .12s ease; } .pv2-card:hover .pv2-card__goal { border-color: #2b5b9e; } /* 라벨은 카드마다 똑같이 반복되므로 눈에 먼저 들어오면 안 된다. 한국어 문장(15px)보다 확실히 작고 옅게 둬서 "읽는 것"이 아니라 "알아채는 것"에 가깝게 만든다. */ .pv2-card__goal-label { display: block; font-size: 11px; font-weight: 700; line-height: 1; color: #949cad; margin-bottom: 7px; } .pv2-card__goal-ko { display: block; font-size: 15px; font-weight: 700; line-height: 1.65; color: #1f2430; word-break: keep-all; } .pv2-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 26px; flex-wrap: wrap; } .pv2-pagenum { min-width: 34px; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid #e6e9f0; color: #3a4256; text-decoration: none; font-size: 14px; } .pv2-pagenum.is-current { background: #2b5b9e; border-color: #2b5b9e; color: #fff; font-weight: 700; } /* ── PART / 섹션 ────────────────────────────────────────── */ .pv2-part { margin-top: 34px; } .pv2-part__title { font-size: 15px; font-weight: 800; color: #3a4256; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid #1f2430; } .pv2-part__title > span { background: #1f2430; color: #fff; font-size: 11px; letter-spacing: .06em; border-radius: 4px; padding: 3px 8px; } .pv2-part__title-sub { font-style: normal; font-weight: 600; color: #8b93a7; font-size: 13px; } .pv2-part__title-sub::before { content: '· '; } .pv2-sec { background: #fff; border: 1px solid #e6e9f0; border-radius: 12px; padding: 20px 22px; margin-bottom: 12px; } .pv2-sec__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; /* 제목 자체의 margin 은 아래에서 0 으로 죽이므로, 간격은 바가 갖는다. (제목만 있는 섹션과 같은 12px 을 유지) */ margin-bottom: 12px; } .pv2-sec__title { font-size: 16px; font-weight: 800; margin: 0 0 12px; color: #1f2430; } /* 섹션 제목: 언어 설정과 무관하게 영어가 주제목, 한국어가 부제 */ .pv2-sec__title-en { display: block; font-size: 16px; font-weight: 800; color: #1f2430; } .pv2-sec__title-ko { display: block; font-size: 12px; font-weight: 600; color: #8b93a7; margin-top: 2px; } /* 섹션 제목 바로 아래 붙는 핵심 문장 (예: 한국어 정의) */ .pv2-sec__lead { font-size: 16px; font-weight: 700; color: #1e4674; background: #f0f4ff; border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; line-height: 1.6; } .pv2-sec__bar .pv2-sec__title { margin-bottom: 0; } .pv2-hint { font-size: 12px; color: #8b93a7; margin: 0 0 12px; } .pv2-legacy-tag { font-size: 11px; font-style: normal; font-weight: 600; color: #8b93a7; background: #f0f2f7; border-radius: 4px; padding: 2px 7px; margin-left: 6px; } .pv2-toggle { background: #eef2fb; border: 0; border-radius: 20px; color: #2b5b9e; font-size: 12px; font-weight: 700; padding: 6px 14px; cursor: pointer; } .pv2-toggle:hover { background: #dfe8fa; } /* ── 정의 / 뉘앙스 ──────────────────────────────────────── */ .pv2-def { margin: 0 0 12px; font-size: 15px; line-height: 1.75; } .pv2-def:last-child { margin-bottom: 0; } .pv2-def strong { display: block; font-size: 12px; font-weight: 800; color: #2b5b9e; letter-spacing: .04em; margin-bottom: 3px; } .pv2-bullets { margin: 0; padding-left: 18px; } .pv2-bullets li { font-size: 15px; line-height: 1.8; color: #3a4256; } /* ── 문형 구조 ──────────────────────────────────────────── */ .pv2-structures { margin: 0; padding-left: 20px; } .pv2-structures > li { margin-bottom: 16px; } .pv2-structures > li:last-child { margin-bottom: 0; } .pv2-form { display: inline-block; background: #f0f4ff; color: #1e4674; border-radius: 6px; padding: 3px 10px; font-size: 15px; font-weight: 700; font-family: inherit; } .pv2-note { font-size: 13px; color: #5a6478; margin: 6px 0 0; line-height: 1.7; } /* ── 예문 공통 ──────────────────────────────────────────── */ .pv2-ex { display: block; line-height: 1.7; } .pv2-ex__en { display: block; font-size: 15px; font-weight: 600; color: #1f2430; } .pv2-ex__ko { display: block; font-size: 13px; color: #5a6478; margin-top: 2px; } .pv2-ex--clickable { cursor: pointer; } .pv2-ex--clickable.is-hidden .pv2-ex__ko { display: none; } .pv2-ex-list { margin: 8px 0 0; padding-left: 16px; } .pv2-ex-list li { margin-bottom: 8px; } .pv2-ex-list li:last-child { margin-bottom: 0; } .pv2-examples { margin: 0; padding-left: 22px; } .pv2-examples > li { padding: 10px 0; border-bottom: 1px dashed #eef0f5; } .pv2-examples > li:last-child { border-bottom: 0; } /* ── 유사 / 반대 표현 ───────────────────────────────────── */ .pv2-exprs { display: grid; gap: 12px; } .pv2-expr { border-left: 3px solid #2b5b9e; background: #f8faff; border-radius: 0 8px 8px 0; padding: 12px 14px; } .pv2-expr--contrast { border-left-color: #e0603c; background: #fff8f6; } .pv2-expr__head { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pv2-expr__meaning { font-size: 14px; color: #3a4256; } /* ── 칩 ─────────────────────────────────────────────────── */ .pv2-chip { display: inline-block; background: #eef0f5; color: #5a6478; border-radius: 20px; font-size: 11px; font-weight: 700; padding: 2px 9px; white-space: nowrap; } .pv2-chip--warn { background: #fff0ee; color: #c2453f; } .pv2-chip--lv1 { background: #e8f6ee; color: #1e7e4f; } .pv2-chip--lv2 { background: #eef2fb; color: #1e4674; } .pv2-chip--lv3 { background: #fdf0e4; color: #96570d; } /* ── 흔한 실수 ──────────────────────────────────────────── */ .pv2-mistakes { list-style: none; margin: 0; padding: 0; } .pv2-mistakes > li { background: #fbfbfd; border: 1px solid #eef0f5; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; } .pv2-mistakes > li:last-child { margin-bottom: 0; } .pv2-mistake__wrong { margin: 0; color: #c2453f; font-size: 14px; text-decoration: line-through; } .pv2-mistake__right { margin: 4px 0 0; color: #1e7e4f; font-size: 15px; font-weight: 700; } /* ── 대화 ───────────────────────────────────────────────── */ .pv2-dialogue { margin-bottom: 22px; } .pv2-dialogue:last-child { margin-bottom: 0; } .pv2-dialogue__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; padding-bottom: 8px; border-bottom: 1px solid #eef0f5; } .pv2-dialogue__num { font-size: 14px; font-weight: 800; } .pv2-dialogue__topic { font-size: 13px; color: #3a4256; } .pv2-dialogue__title { font-size: 12px; color: #8b93a7; } .pv2-line { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; align-items: flex-start; } .pv2-line.is-target { background: #f0f4ff; } .pv2-line.is-target .pv2-line__en { color: #1e4674; font-weight: 800; } .pv2-line.is-hidden .pv2-line__ko { display: none; } .pv2-line__sp { flex: 0 0 auto; min-width: 58px; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 20px; text-align: center; background: #eef0f5; color: #5a6478; } .pv2-line__body { flex: 1 1 auto; } .pv2-line__en { display: block; font-size: 15px; line-height: 1.65; } .pv2-line__ko { display: block; font-size: 13px; color: #5a6478; margin-top: 2px; } /* 화자별 색 (음성 배정 확인용) */ .pv2-sp0 { background: #e7effd; color: #1e4674; } .pv2-sp1 { background: #fdeff0; color: #b23a48; } .pv2-sp2 { background: #e8f6ee; color: #1e7e4f; } .pv2-sp3 { background: #fdf3e4; color: #96570d; } .pv2-sp4 { background: #f1ebfb; color: #6035b0; } .pv2-sp5 { background: #e4f5f7; color: #12707e; } /* ── TTS 재생 버튼 ────────────────────────────────────── 비즈니스 대화의 UX(재생 → 로딩 → 정지)를 그대로 따르되, 레거시 CSS 는 3열 그리드 레이아웃에 묶여 있어 여기서 새로 정의한다. */ .pv2-play { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid #d8dce6; border-radius: 50%; background: #fff; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; transition: background .12s, border-color .12s; } .pv2-play:hover { background: #eef2fb; border-color: #b9c7e8; } /* 삼각형 재생 아이콘 (외부 이미지 의존 없음) */ .pv2-play__icon { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #2b5b9e; margin-left: 2px; } /* 재생 중 — 정지 아이콘 */ .pv2-play.is-playing { background: #e7effd; border-color: #2b5b9e; } .pv2-play.is-playing .pv2-play__icon { width: 9px; height: 10px; border: 0; margin-left: 0; background: #2b5b9e; -webkit-mask: linear-gradient(#000 0 0) left/3px 100% no-repeat, linear-gradient(#000 0 0) right/3px 100% no-repeat; mask: linear-gradient(#000 0 0) left/3px 100% no-repeat, linear-gradient(#000 0 0) right/3px 100% no-repeat; } /* 생성 중 — 회전 링 */ .pv2-play.is-loading { border-color: #2b5b9e; } .pv2-play.is-loading .pv2-play__icon { width: 12px; height: 12px; border: 2px solid #dfe6f5; border-top-color: #2b5b9e; border-radius: 50%; margin-left: 0; animation: pv2-spin .7s linear infinite; } @keyframes pv2-spin { to { transform: rotate(360deg); } } .pv2-play.is-error { border-color: #e0603c; } .pv2-play.is-error .pv2-play__icon { border-left-color: #e0603c; } /* 대화 전체 재생 */ .pv2-playall { display: inline-flex; align-items: center; gap: 6px; background: #eef2fb; border: 0; border-radius: 20px; padding: 4px 12px 4px 8px; font-size: 12px; font-weight: 700; color: #2b5b9e; cursor: pointer; font-family: inherit; } .pv2-playall:hover { background: #dfe8fa; } .pv2-playall.is-playing { background: #2b5b9e; color: #fff; } .pv2-playall.is-playing .pv2-play__icon { border-left-color: #fff; } /* 대화 줄의 버튼은 오른쪽 끝, 첫 줄 높이에 맞춘다 */ .pv2-line .pv2-play { align-self: center; opacity: 0; transition: opacity .12s; } .pv2-line:hover .pv2-play, .pv2-line .pv2-play.is-playing, .pv2-line .pv2-play.is-loading { opacity: 1; } /* 터치 기기는 hover 가 없으므로 항상 노출 */ @media (hover: none) { .pv2-line .pv2-play { opacity: 1; } } /* ── 아웃풋 / 자가점검 ──────────────────────────────────── */ .pv2-output { margin: 0; padding-left: 20px; } .pv2-output > li { margin-bottom: 14px; } .pv2-output > li:last-child { margin-bottom: 0; } .pv2-output__en { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.7; } .pv2-output__ko { margin: 3px 0 0; font-size: 13px; color: #5a6478; line-height: 1.7; } /* 9) 문장 만들기 — 모범 답변 (숨김 → 한국어 → 영어) */ .pv2-output > li.pv2-ex--clickable { cursor: pointer; } /* 버튼 줄 — 키워드 카드와 달리 질문 아래에 왼쪽 정렬로 놓는다 */ .pv2-output__peeks { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; } .pv2-output__peeks .pv2-peek { margin-left: 0; } .pv2-output__answer { margin-top: 8px; padding: 8px 12px; background: #f6f8fc; border-left: 3px solid #35c07f; border-radius: 0 6px 6px 0; } .pv2-output__answer .pv2-ex__ko { font-size: 14px; color: #3a4256; margin-top: 0; } .pv2-output__answer .pv2-ex__en { font-size: 14px; font-weight: 600; color: #1e7e4f; margin-top: 5px; } .pv2-output > li.is-hidden .pv2-output__answer { display: none; } .pv2-output > li.is-peeked .pv2-output__answer .pv2-ex__en { display: none; } /* 디스커션 — 표현 없이 자유 대화. 유형 칩으로 난이도를 알린다 */ .pv2-discussion { margin: 0; padding-left: 22px; } .pv2-discussion > li { margin-bottom: 16px; } .pv2-discussion > li:last-child { margin-bottom: 0; } .pv2-discussion .pv2-output__en { margin-top: 4px; } .pv2-chip--experience { background: #e8f6ee; color: #1e7e4f; } .pv2-chip--habit { background: #eef2fb; color: #1e4674; } .pv2-chip--opinion { background: #fdf0e4; color: #96570d; } .pv2-selfcheck { margin: 0; padding-left: 22px; } .pv2-selfcheck > li { padding: 12px 0; border-bottom: 1px dashed #eef0f5; } .pv2-selfcheck > li:last-child { border-bottom: 0; } .pv2-ex__ko--lead { font-size: 15px; font-weight: 700; color: #1f2430; margin: 0; } .pv2-ex__en--answer { font-size: 14px; color: #1e7e4f; margin-top: 4px; font-weight: 600; } /* 자가점검은 한국어가 '문제'이므로 항상 보여야 한다. 공통 규칙(.pv2-ex--clickable.is-hidden .pv2-ex__ko)이 이것까지 숨기므로 되돌린다. */ .pv2-selfcheck > li.is-hidden .pv2-ex__ko--lead { display: block; } .pv2-selfcheck > li.is-hidden .pv2-ex__en--answer { display: none; } /* ── 즉석 말하기 ────────────────────────────────────────── */ /* 상황 / 낱말 두 묶음. 그룹 제목이 유형 표시를 대신하므로 항목에는 라벨이 없다 */ .pv2-kwgroup + .pv2-kwgroup { margin-top: 22px; } .pv2-kwgroup__head { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pv2-kwgroup__en { font-size: 14px; font-weight: 800; color: #1f2430; } .pv2-kwgroup__ko { font-size: 12px; font-weight: 700; color: #8b93a7; } .pv2-kwgroup__note { font-size: 12px; color: #8b93a7; margin: 4px 0 10px; line-height: 1.7; } /* 낱말 묶음은 난도가 한 단계 올라가는 지점이라 살짝 구분해 준다. hover 도 따로 잡아 준다 — 안 그러면 공통 규칙에 밀려 보라색이 풀린다 */ .pv2-kwgroup--thing .pv2-keyword { background: #fbf9fe; border-color: #efe8f8; } .pv2-kwgroup--thing .pv2-keyword:hover { background: #fff; border-color: #e3d5f5; } .pv2-kwgroup--thing .pv2-keyword__kw { background: #f6edfd; color: #7a3fb0; } .pv2-keywords { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .pv2-keyword { background: #fbfbfd; border: 1px solid #eef0f5; border-radius: 10px; padding: 12px 14px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .pv2-keyword:hover { background: #fff; border-color: #dde5f4; box-shadow: 0 2px 10px rgba(31, 36, 48, .06); } .pv2-keyword__head { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pv2-keyword__kw { font-size: 16px; font-weight: 800; color: #1e4674; background: #f0f4ff; border-radius: 6px; padding: 4px 12px; } /* 다음 단계 버튼. 카드 전체가 클릭 대상이라 실제