/* ===== [A] 여기부터 산출물에 그대로 복사 ===== */ /* ---------- 토큰 ---------- */ .dtl{ /* ① theme — 색 값 정의만. 레이어에 직접 물리지 않는다. 기본 노랑, data-theme으로 전환 */ --theme-normal:#FFC800; --theme-strong:#FF9F00; --theme-soft:#FFF1BE; --theme-banner:#FFD84D; --theme-point:#FB5F1C; --theme-deep:#7A4E00; --theme-black:#1B1602; /* ③ 시스템 셰이프 — 표면과 무관 */ --radius-050:4px; --radius-100:8px; --radius-150:12px; --radius-200:16px; --radius-media:12px; /* 베이스 — Pretendard, 자간 = 크기 × -4% */ max-width:800px; margin:0 auto; background:var(--base-surface); color:var(--label-normal); font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif; font-size:16px; font-weight:400; line-height:1.6; letter-spacing:-0.64px; word-break:keep-all; overflow-wrap:break-word; text-align:left; } .dtl[data-theme="yellow"]{--theme-normal:#FFC800;--theme-strong:#FF9F00;--theme-soft:#FFF1BE;--theme-banner:#FFD84D;--theme-point:#FB5F1C;--theme-deep:#7A4E00;--theme-black:#1B1602;} .dtl[data-theme="skyblue"]{--theme-normal:#5FBDF2;--theme-strong:#1289C4;--theme-soft:#DFF4FF;--theme-banner:#96D5F8;--theme-point:#2A72E8;--theme-deep:#0A4E7A;--theme-black:#02101B;} .dtl[data-theme="orange"]{--theme-normal:#FF9F2E;--theme-strong:#FF6B00;--theme-soft:#FFEFDB;--theme-banner:#FFBF5C;--theme-point:#F54F27;--theme-deep:#7E3A00;--theme-black:#1B0C02;} .dtl[data-theme="green"]{--theme-normal:#6BD22E;--theme-strong:#46A302;--theme-soft:#DCFBC3;--theme-banner:#95E063;--theme-point:#049E68;--theme-deep:#2F6B00;--theme-black:#0A1602;} .dtl[data-theme="purple"]{--theme-normal:#A99EE2;--theme-strong:#6438F0;--theme-soft:#F0EDFF;--theme-banner:#BFB4F5;--theme-point:#7A58F0;--theme-deep:#3F2FA0;--theme-black:#0E0A1C;} /* 테마 키는 Figma '상세페이지 · 컬러' 모드와 짝이다 — blue 는 진한 파랑('블루'), skyblue 는 하늘색('스카이 블루'), red 는 '레드'. 그 밖의 키는 이름 그대로다. */ .dtl[data-theme="blue"]{--theme-normal:#2C7DFF;--theme-strong:#0B5ED9;--theme-soft:#D4E4FF;--theme-banner:#91BDFF;--theme-point:#4C5BF9;--theme-deep:#08387F;--theme-black:#020B1A;} .dtl[data-theme="red"]{--theme-normal:#FF4740;--theme-strong:#D93E38;--theme-soft:#FFE9E7;--theme-banner:#FFADA9;--theme-point:#FC2E2E;--theme-deep:#C6332D;--theme-black:#1A0605;} /* ④ 메시 짝 색 — 훅 배경(.dtl-sec--hero)이 밝은 표면에서 쓰는 보조 색 넷. "자기 테마를 뺀 나머지 테마의 soft 값에서 넷"이라는 규칙으로 정했다 — 새 색을 고르지 않고 기존 팔레트 안에서만 정의되므로 팔레트가 바뀌어도 따라올 곳이 한 군데다. 순서가 뜻을 갖는다: a·b 가 큰 덩어리(위쪽)를 맡으므로 자기 색과 가까운 색조를 앞에 둔다. */ .dtl[data-theme="yellow"] {--mesh-a:#FFEFDB;--mesh-b:#DCFBC3;--mesh-c:#DFF4FF;--mesh-d:#FFE9E7;} .dtl[data-theme="green"] {--mesh-a:#DFF4FF;--mesh-b:#F0EDFF;--mesh-c:#FFF1BE;--mesh-d:#FFE9E7;} .dtl[data-theme="skyblue"]{--mesh-a:#E4EEFF;--mesh-b:#F0EDFF;--mesh-c:#DCFBC3;--mesh-d:#FFF1BE;} .dtl[data-theme="blue"] {--mesh-a:#DFF4FF;--mesh-b:#F0EDFF;--mesh-c:#FFE9E7;--mesh-d:#DCFBC3;} .dtl[data-theme="purple"] {--mesh-a:#E4EEFF;--mesh-b:#FFE9E7;--mesh-c:#DFF4FF;--mesh-d:#DCFBC3;} .dtl[data-theme="orange"] {--mesh-a:#FFF1BE;--mesh-b:#FFE9E7;--mesh-c:#DCFBC3;--mesh-d:#F0EDFF;} .dtl[data-theme="red"] {--mesh-a:#FFEFDB;--mesh-b:#F0EDFF;--mesh-c:#FFF1BE;--mesh-d:#DFF4FF;} /* ② brand + ③ 시스템 — 표면 모드(plain·inverse·brand·soft)에 따라 같은 토큰이 다른 값을 가리킨다. 컴포넌트는 이 층만 참조하므로, 모드가 바뀌어도 컴포넌트 CSS는 그대로다. 루트에 쓰면 페이지 기본값, 섹션에 쓰면 그 섹션만 바뀐다(토큰 상속). */ .dtl,.dtl [data-surface="plain"]{ --label-black:#000000; --brand-normal:var(--theme-normal); --brand-strong:var(--theme-strong); --brand-soft:var(--theme-soft); --brand-banner:var(--theme-banner); --brand-point:var(--theme-point); --brand-black:var(--theme-black); --label-strong:#212529; --label-normal:#343A40; --label-subtle:#868E96; --label-disable:#CED4DA; --label-inverse:#FFFFFF; --base-surface:#FFFFFF; --bg-gray:#F3F3F3; --bg-tag:#E9ECEF; --line-card:var(--theme-normal); --line-hairline:#E2E2E2; --state-pass:#10B981; --state-warn:#F59E0B; --state-block:#EF4444; } .dtl[data-surface="inverse"],.dtl [data-surface="inverse"]{ --label-black:#000000; --brand-normal:var(--theme-normal); --brand-strong:var(--theme-normal); --brand-soft:rgba(255,255,255,.08); --brand-banner:var(--theme-banner); --brand-point:var(--theme-normal); --brand-black:var(--theme-black); --label-strong:#FFFFFF; --label-normal:#FFFFFF; --label-subtle:#A0A0A8; --label-disable:#5A5A62; --label-inverse:#111111; --base-surface:var(--theme-black); --bg-gray:#27272C; --bg-tag:#2A2A2E; --line-card:rgba(255,255,255,.24); --line-hairline:rgba(255,255,255,.12); --state-pass:#34D399; --state-warn:#FBBF24; --state-block:#F87171; } .dtl[data-surface="brand"],.dtl [data-surface="brand"]{ --label-black:#000000; --brand-normal:var(--theme-point); --brand-strong:var(--theme-point); --brand-soft:var(--theme-soft); --brand-banner:var(--theme-banner); --brand-point:var(--theme-point); --brand-black:var(--theme-black); --label-strong:#1A1D20; --label-normal:#212529; --label-subtle:#5C5647; --label-disable:rgba(0,0,0,.28); --label-inverse:#FFFFFF; --base-surface:var(--theme-banner); --bg-gray:#F8F8F8; --bg-tag:rgba(255,255,255,.55); --line-card:rgba(255,255,255,.45); --line-hairline:rgba(255,255,255,.50); --state-pass:#0E7C5A; --state-warn:#B45309; --state-block:#B42318; } .dtl[data-surface="soft"],.dtl [data-surface="soft"]{ --label-black:#000000; --brand-normal:var(--theme-normal); --brand-strong:var(--theme-strong); --brand-soft:#FFFFFF; --brand-banner:var(--theme-banner); --brand-point:var(--theme-point); --brand-black:var(--theme-black); --label-strong:#212529; --label-normal:#343A40; --label-subtle:#7C8189; --label-disable:rgba(0,0,0,.22); --label-inverse:#FFFFFF; --base-surface:var(--theme-soft); --bg-gray:#E8E8E8; --bg-tag:rgba(255,255,255,.80); --line-card:var(--theme-normal); --line-hairline:rgba(0,0,0,.08); --state-pass:#10B981; --state-warn:#D97706; --state-block:#DC2626; } .dtl *,.dtl *::before,.dtl *::after{box-sizing:border-box;margin:0;padding:0;} .dtl :focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px;border-radius:2px;} @media (prefers-reduced-motion: reduce){ .dtl *,.dtl *::before,.dtl *::after{transition:none !important;animation:none !important;} } /* ---------- 호스트 임베딩 프리셋 (opt-in) ---------- 호스트가 산출물을 감싸는 래퍼에 .dtl-fit-page 를 붙이면 켜진다. 문서 자신은 항상 "주어진 폭"에만 적응하고, 뷰포트→폭 매핑은 호스트가 켤지 결정한다 — 편집기 캔버스처럼 뷰포트와 슬롯 폭이 다른 표면이 있어 무조건 적용하면 안 된다. 수치는 에듀꾸그 데스크탑 그리드 기준. 폭을 calc 로 적는 이유 — zoom 은 요소를 자기 자신까지 확대한다. max-width 는 확대된 좌표계 안의 값이라, 그냥 520px 을 주면 부모가 보는 실제 폭은 520 * 1.1 = 572px 이 된다. 의도는 "520 자리 안에서 내용만 1.1배"이므로 1.1 로 나눈 값을 준다: 472.73 * 1.1 = 520px. */ @media (min-width: 986px){ .dtl-fit-page .dtl{max-width:calc(520px / 1.1);zoom:1.1;} } /* ---------- 타이포 — 크기·행간·자간·기본 굵기만. 색은 컴포넌트가 정함 ---------- 굵기는 시안 변수 그대로다: weight/regular 400 · weight/medium 500 · weight/semibold 600 · weight/bold 700. 시안 텍스트 스타일 'title/18medium' 은 이름과 달리 weight/semibold(600) 를 쓴다 — 18 의 비(非)Bold 는 600 이다. */ .dtl-lead-26{font-size:26px;line-height:1.4;letter-spacing:-1.04px;font-weight:500;} .dtl-lead-22{font-size:22px;line-height:1.4;letter-spacing:-0.8px;font-weight:700;} .dtl-title-18{font-size:18px;line-height:1.5;letter-spacing:-0.72px;font-weight:600;} /* 시안 title/18medium = SemiBold */ .dtl-body-16{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:400;} .dtl-body-15{font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:400;} .dtl-body-14{font-size:14px;line-height:1.6;letter-spacing:-0.56px;font-weight:400;} .dtl-cap-13{font-size:13px;line-height:1.6;letter-spacing:-0.52px;font-weight:400;} .dtl-cap-12{font-size:12px;line-height:1.6;letter-spacing:-0.48px;font-weight:400;} .dtl-cap-11{font-size:11px;line-height:1.6;letter-spacing:-0.44px;font-weight:400;} .dtl-metric-34{font-size:34px;line-height:1.4;letter-spacing:-1.36px;font-weight:700;} .dtl-md{font-weight:500;} .dtl-bold{font-weight:700;} .dtl-strong{font-weight:700;} /* 잉크는 팔레트(색 토큰)가 정한다 — 섹션 원칙대로 형태만 */ /* ---------- 텍스트 강조 (시안 9250:152840) ---------- 본문 일부를 감싸는 인라인 마크. 블록이 아니라 드래그한 구간에 붙는다. 색은 전부 --brand-strong 을 따라가므로 테마 6종 × 표면 4종을 그대로 상속한다. ★ 줄바꿈 — 강조 구간이 여러 줄에 걸쳐도 줄마다 표시가 온전히 이어져야 한다. 기본값(slice)은 배경을 한 덩어리로 그린 뒤 잘라내 중간 줄의 모서리가 어긋난다. clone 은 줄마다 배경·패딩·라운드를 새로 그린다. 밑줄형(--b)은 text-decoration 이라 브라우저가 알아서 줄마다 그으므로 이 선언이 필요 없다. */ .dtl-hl{-webkit-box-decoration-break:clone;box-decoration-break:clone;} /* A — 채움 박스. 잉크가 배경 위로 오므로 label/inverse 로 뒤집는다 */ .dtl-hl--a{background:var(--brand-strong);color:var(--label-inverse);padding:1px 4px;border-radius:var(--radius-050);} /* B — 밑줄. 시안은 브러시 SVG지만 렌더 크기에서 직선과 구분되지 않아 CSS로 긋는다. 두께 3 · 글자와의 간격 5. skip-ink 를 끄는 이유: 기본값은 받침 같은 글자에서 밑줄을 끊는데 시안은 관통한다. */ .dtl-hl--b{text-decoration:underline;text-decoration-color:var(--brand-strong);text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-skip-ink:none;} /* C — 형광펜 (시안 9250:164422). 띠는 수평이다 — 기울인 그라디언트는 하드 스톱에 안티에일리어싱이 걸리지 않아 경계가 계단처럼 끊기고, 구간마다 기울기가 새로 시작해 나란히 놓인 강조끼리 단차가 생긴다. 띠 높이 1.23em(시안 26px 글자에 32px)은 글자를 덮으므로 잉크를 label/inverse 로 뒤집는다. 높이를 그라디언트로 못박는 이유: 콘텐츠 상자 높이는 폰트 메트릭을 타지만 띠는 시안 값을 그대로 지켜야 한다. 위아래 여백은 그 띠가 padding 상자에 잘리지 않을 만큼만 둔다 (인라인 패딩은 줄 간격을 벌리지 않으므로 레이아웃 비용이 없다). */ .dtl-hl--c{padding:0.1em 0;color:var(--label-inverse);background:linear-gradient(var(--brand-strong),var(--brand-strong)) no-repeat center/100% 1.23em;} /* D — 색. 브랜드색 잉크에 굵기 700. 상자·띠·선이 없어 여러 줄에 걸려도 글줄을 끊지 않는다. A·B·C 와 같이 자리 제한이 없다 — 헤드 카피에도 본문에도 건다. 인라인 `color: var(--brand-strong)` 가 아니라 클래스인 이유: 이 강조는 팔레트에서 고르는 색이 아니라 늘 같은 한 스타일이고, 굵기까지 한 이름에 묶어야 표현이 두 곳(class·style)에 흩어지지 않는다. 인라인 색(rules.inlineStyleAllow)은 편집기 팔레트가 임의 토큰을 심는 자리로 그대로 남는다. .dtl-strong 과 달리 잉크를 갖는 이유: 이것은 형태가 아니라 강조 스타일이라 textMarks(A·B·C)와 같은 층이다. */ .dtl-hl--d{color:var(--brand-strong);font-weight:700;} /* 크기 × 굵기 강조 — 편집기 서식 툴바의 크기 드롭다운(rules.textSizes)은 위 타이포 클래스를 드래그한 구간에 건다. 타이포 클래스는 기본 굵기까지 가지므로, 진하게·강조(색) 안쪽에 크기를 걸면 굵기가 풀리고 바깥에 걸면 유지돼 결과가 적용 순서를 탄다. 굵기 강조를 명시한 감싸개 안쪽에서는 강조가 이기게 해 순서와 무관하게 만든다. rules.textSizes 에 크기를 더하면 아래 :is() 목록에도 더한다. */ .dtl :is(.dtl-strong,.dtl-bold,.dtl-hl--d) :is(.dtl-lead-26,.dtl-lead-22,.dtl-title-18,.dtl-body-16,.dtl-body-15,.dtl-body-14,.dtl-cap-13,.dtl-cap-12,.dtl-cap-11,.dtl-metric-34){font-weight:700;} /* ---------- 섹션 골격 — 여백은 전부 여기(템플릿) 소관 ---------- */ .dtl-sec{background:var(--base-surface);} .dtl-sec--gray{background:var(--bg-gray);} /* ---------- 훅 배경 — 표면에 따라 성격이 갈린다 ---------- 강조가 보이려면 덩어리와 배경 사이에 명도 차가 있어야 한다. 표면마다 배경 밝기가 다르므로 한 장치로 넷을 덮을 수 없다. 클래스는 하나로 두고 CSS 안에서 표면으로 갈랐다 — 편집기에서 표면을 바꾸면 배경도 알아서 따라간다. · 밝은 표면(plain·soft·brand) — 메시. 흰 바탕엔 더 밝힐 여지가 없으니 밝기 대신 색으로 간다. · inverse — 조명. 검정 위에서는 색을 칠하는 것보다 빛을 비추는 편이 자연스럽다. 본문이 의사요소에 덮이지 않도록 자식을 한 층 올린다. */ .dtl-sec--hero{position:relative;overflow:hidden;} .dtl-sec--hero > *{position:relative;z-index:1;} .dtl-sec--hero::before,.dtl-sec--hero::after{content:"";position:absolute;z-index:0;pointer-events:none;} /* 밝은 표면 — 메시. 덩어리 여섯이 각자 자리를 맡고 경계에서만 겹친다. 색을 늘린다고 다채로워지지 않는다: 옅은 색을 같은 자리에 포개면 겹친 자리가 중성색으로 수렴해 오히려 밋밋해진다. 그래서 겹치기가 아니라 "각 색에 자기 영역 주기"로 짰고, 블러도 영역을 뭉개지 않을 만큼(35px)만 건다. 상자보다 키워(inset 음수) 블러가 가장자리를 묽히지 않게 하고 섹션에서 잘라 낸다. oklab 보간은 sRGB 의 탁한 중간색을 피한다. 보간 방식을 모르는 낡은 엔진은 이 선언을 통째로 무시하므로, 그런 곳에서는 배경이 없는 평범한 섹션이 된다(내용은 그대로다). */ .dtl-sec--hero{--mesh-op:.8;--mesh-blur:35px;} .dtl-sec--hero::before{ inset:-14%; opacity:var(--mesh-op); filter:blur(var(--mesh-blur)); background-repeat:no-repeat; background-image: radial-gradient(46% 40% at 6% 6% in oklab,var(--theme-normal) 0%,transparent 100%), radial-gradient(44% 38% at 52% 0% in oklab,var(--mesh-a) 0%,transparent 100%), radial-gradient(48% 42% at 98% 12% in oklab,var(--mesh-b) 0%,transparent 100%), radial-gradient(46% 40% at 2% 64% in oklab,var(--mesh-c) 0%,transparent 100%), radial-gradient(50% 44% at 96% 76% in oklab,var(--theme-banner) 0%,transparent 100%), radial-gradient(48% 42% at 42% 100% in oklab,var(--mesh-d) 0%,transparent 100%); } .dtl-sec--hero::after{display:none;} /* 표면은 섹션에 붙기도 하고 루트(.dtl)에 붙기도 한다 — 문서 전체를 인버스로 세우는 경우다. 토큰은 상속되지만 이 분기는 선택자 매치라 상속되지 않으므로 두 경우를 다 적는다. 섹션이 표면을 직접 덮어썼다면 그 값이 이겨야 하니 루트 쪽은 :not([data-surface]) 로 좁힌다. */ /* inverse — 조명. 원의 중심을 섹션 위끝(50% 0)에 두어 아래 절반만 보인다. 색은 단색으로 깔고 알파는 mask 로 깎는다: 색 토큰은 불투명값이라 그래디언트 색 스톱으로 알파를 줄 방법이 없고, 준다 해도 알파가 직선으로 떨어져 끝나는 자리에 테두리처럼 단이 생긴다. mask 는 색과 무관하게 알파만 다루므로 토큰을 그대로 쓰면서 여러 스톱으로 완만하게 지울 수 있다. 감쇠는 앞쪽에서 가파르게 떨군다 — 완만하게 끌면 빛이 섹션을 다 먹어 배경의 검정이 남지 않는다. */ .dtl-sec--hero[data-surface="inverse"], .dtl[data-surface="inverse"] .dtl-sec--hero:not([data-surface]){--glow-h:240px;--glow-w:86%;--glow-op:.34;--glow-core:.22;} .dtl-sec--hero[data-surface="inverse"]::before, .dtl[data-surface="inverse"] .dtl-sec--hero:not([data-surface])::before{ inset:0 0 auto;height:var(--glow-h); opacity:var(--glow-op); filter:none; background:var(--brand-normal); -webkit-mask-image:radial-gradient(var(--glow-w) 100% at 50% 0,#000 0%,rgba(0,0,0,.62) 10%,rgba(0,0,0,.34) 22%,rgba(0,0,0,.16) 36%,rgba(0,0,0,.06) 52%,rgba(0,0,0,.02) 70%,transparent 100%); mask-image:radial-gradient(var(--glow-w) 100% at 50% 0,#000 0%,rgba(0,0,0,.62) 10%,rgba(0,0,0,.34) 22%,rgba(0,0,0,.16) 36%,rgba(0,0,0,.06) 52%,rgba(0,0,0,.02) 70%,transparent 100%); } /* 흰 코어 — 조명 한가운데가 하얗게 뜬다. 밝은 표면에서는 더할 밝기가 없어 꺼 둔다 */ .dtl-sec--hero[data-surface="inverse"]::after, .dtl[data-surface="inverse"] .dtl-sec--hero:not([data-surface])::after{ display:block; inset:0 0 auto;height:var(--glow-h); opacity:var(--glow-core); background:#FFFFFF; -webkit-mask-image:radial-gradient(calc(var(--glow-w) * .4) 56% at 50% 0,#000 0%,rgba(0,0,0,.44) 12%,rgba(0,0,0,.18) 26%,rgba(0,0,0,.06) 44%,rgba(0,0,0,.01) 66%,transparent 100%); mask-image:radial-gradient(calc(var(--glow-w) * .4) 56% at 50% 0,#000 0%,rgba(0,0,0,.44) 12%,rgba(0,0,0,.18) 26%,rgba(0,0,0,.06) 44%,rgba(0,0,0,.01) 66%,transparent 100%); } .dtl-sec--hero[data-surface="inverse"] .dtl-head__title, .dtl[data-surface="inverse"] .dtl-sec--hero:not([data-surface]) .dtl-head__title{text-shadow:0 0 24px rgba(255,255,255,.22);} /* 섹션 사이 가로선 — 같은 표면이 연달아 올 때만 뒤 섹션의 border-top 으로 긋는다. 표면이 바뀌면 배경 자체가 경계라 선이 필요 없다. `+` 가 "직전 형제와 표면이 같다"를 그대로 표현한다. 선을 섹션 "안"(border)으로 옮긴 덕에 그 섹션의 data-surface 토큰을 따라간다 — 루트 직계 divider 요소로는 안 되던 부분이다. plain 은 속성이 생략되므로 :not([data-surface]) 로 잡는다. gray 는 data-surface 를 거치지 않고 --bg-gray 로 배경을 직접 바꾼다. 표면이 같아도 배경이 달라 잘못된 자리에 선이 생기므로 양쪽 모두에서 제외한다 */ .dtl-sec:not([data-surface]):not(.dtl-sec--gray) + .dtl-sec:not([data-surface]):not(.dtl-sec--gray), .dtl-sec[data-surface="inverse"]:not(.dtl-sec--gray) + .dtl-sec[data-surface="inverse"]:not(.dtl-sec--gray), .dtl-sec[data-surface="brand"]:not(.dtl-sec--gray) + .dtl-sec[data-surface="brand"]:not(.dtl-sec--gray), .dtl-sec[data-surface="soft"]:not(.dtl-sec--gray) + .dtl-sec[data-surface="soft"]:not(.dtl-sec--gray){border-top:1px solid var(--line-hairline);} .dtl-wrap{padding:20px;} /* 표준 블록 래퍼: 콘텐츠 폭 = 섹션 - 40 */ .dtl-wrap--x{padding:0 20px;} .dtl-wrap--media{padding:10px 20px;} .dtl-wrap--faq{padding:64px 20px;} .dtl-wrap--bubble{padding:29px 20px;} .dtl-wrap--lg{padding:64px 20px 88px;} /* 체험 수업 회색 블록의 마무리 헤드 — 시안 A-Trial 255 = 64+103+88 */ .dtl-stack{display:flex;flex-direction:column;gap:16px;} /* 반복 블록 컨테이너 */ .dtl-stack--24{gap:24px;} .dtl-stack--20{gap:20px;} .dtl-stack--40{gap:40px;} .dtl-stack--44{gap:44px;} .dtl-stack--0{gap:0;} /* 섹션 여백 — 시안 DividerSet의 Margin 계열을 그대로 옮긴 것. 이름은 시안 높이에 묶인다. SmallMargin 24 · M-Margin 48 · Margin 64 · XL-Margin 84 */ .dtl-margin{height:64px;} .dtl-margin--sm{height:24px;} .dtl-margin--md{height:48px;} .dtl-margin--xl{height:84px;} .dtl-margin--xxl{height:180px;} /* 노치: 흰 띠에 회색 쐐기가 아래로 물린다. 회색 섹션 끝(또는 흰 섹션 앞)에 full-bleed로 놓는다 */ .dtl-margin--notch{height:21px;position:relative;overflow:hidden;background:var(--base-surface);} .dtl-margin--notch::before{content:"";position:absolute;top:0;left:50%;margin-left:-32px;border-left:32px solid transparent;border-right:32px solid transparent;border-top:21px solid var(--bg-gray);} /* 섹션 사이 가로선은 위 .dtl-sec 경계선 규칙이 낸다 — 루트 직계 요소로는 섹션의 data-surface 를 따라가지 못한다. 섹션 간 간격은 각 섹션이 자기 여백으로 낸다. 아래는 전부 섹션 "안"에 놓이는 구분자다. */ .dtl-divider--line{height:32px;position:relative;} /* 헤어라인: 시안 DividerSet Set=Line — 32px 안에 선이 가운데 */ .dtl-divider--line::before{content:"";position:absolute;left:20px;right:20px;top:50%;border-top:1px solid var(--line-hairline);} .dtl-divider--kebab{padding:16px 0;display:flex;justify-content:center;} .dtl-divider--kebab > svg{width:24px;height:24px;color:var(--brand-normal);} .dtl-divider--arrow{padding:16px 0;display:flex;justify-content:center;} .dtl-divider--arrow > svg{width:32px;height:32px;color:var(--brand-normal);} .dtl-divider--chevron{padding:16px 0;display:flex;justify-content:center;} /* 시안 DividerSet + IconChevronDoubleDown 32 (09.17 9664:231275) · 브랜드 점 색 — 수업 후 변화 A 의 셰브론과 같은 잉크. 크기는 자리가 정한다 — 섹션을 가르는 구분자는 32, 카드 사이는 28 */ .dtl-divider--chevron > svg{width:32px;height:32px;color:var(--brand-point);} /* ---------- 헤드 카피 ---------- */ .dtl-head{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;color:var(--label-strong);} /* 상·하 부제는 스타일이 같다. 마스터 헤드(blocks.json 의 head)가 parts 를 조립할 때 --top / --bot 수식자를 함께 달아 어느 자리인지 표시한다 — 스타일이 아니라 식별용이라 여기에 규칙을 두지 않는다. 수식자가 없는 마크업도 이 규칙으로 그대로 렌더된다. */ .dtl-head__sub{font-size:18px;line-height:1.5;letter-spacing:-0.72px;font-weight:600;} /* 시안 title/18medium = SemiBold 600 */ /* 잉크는 label/strong — 시안(헤드 마스터 8048:9902 · teacher-a 8054:95558)이 본문보다 한 단계 진하다. */ .dtl-head__title{font-size:26px;line-height:1.4;letter-spacing:-1.04px;font-weight:700;color:var(--label-strong);} .dtl-head__subtitle{font-size:22px;line-height:1.4;letter-spacing:-0.8px;font-weight:700;color:var(--label-normal);} /* 섹션 태그 — 시안 Badge type=SectionTag. 헤드 위에 놓이고 아래 간격은 20 (head gap 4 + 16). 글자는 brand/strong (09.16 9609:230193 대조) */ .dtl-head__tag{display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;padding:7px 14px;border-radius:128px;background:var(--brand-soft);font-size:14px;line-height:1.6;letter-spacing:-0.56px;font-weight:700;color:var(--brand-strong);white-space:nowrap;} /* ---------- 헤드 꾸밈요소 — 카피 위에 놓이는 작은 장식 ---------- 4각별 다섯이 아치를 그린다. 순수 CSS(clip-path)라 에셋도 심볼도 늘지 않는다. 잉크는 currentColor 한 곳에서 나오고 그 색은 --brand-strong 을 타므로 표면이 바뀌면 토큰이 알아서 뒤집는다(plain=theme-strong, inverse=theme-normal). 높이를 26 으로 못박는 이유: 장식을 넣고 빼도 카피가 위아래로 흔들리지 않아야 한다. */ .dtl-orn{display:flex;align-items:center;justify-content:center;gap:8px;height:26px;margin-bottom:10px;color:var(--brand-strong);} .dtl-orn i{display:block;flex:none;background:currentColor;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);} .dtl-orn i:nth-child(1),.dtl-orn i:nth-child(5){width:7px;height:7px;opacity:.55;transform:translateY(6px);} .dtl-orn i:nth-child(2),.dtl-orn i:nth-child(4){width:11px;height:11px;opacity:.8;transform:translateY(1px);} .dtl-orn i:nth-child(3){width:17px;height:17px;transform:translateY(-4px);} /* ---------- 본문 텍스트 · 캡션 ---------- */ .dtl-body-text{font-size:16px;line-height:1.6;letter-spacing:-0.64px;color:var(--label-normal);text-align:center;} .dtl-body-text--left{text-align:left;} .dtl-caption{font-size:13px;line-height:1.6;letter-spacing:-0.52px;color:var(--label-subtle);} .dtl-caption--center{text-align:center;} /* ---------- 공통 박스 (InfoBox · CheckList · STEP) ---------- */ .dtl-box{background:var(--brand-soft);border:1px solid var(--brand-strong);border-radius:var(--radius-150);padding:16px 18px;} /* ---------- InfoBox ---------- */ .dtl-infobox__title{font-size:14px;line-height:1.6;letter-spacing:-0.56px;font-weight:700;color:var(--brand-strong);} .dtl-infobox__body{margin-top:4px;font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} /* ---------- CheckList / Check ---------- */ /* 테두리는 --line-card(테마 normal). .dtl-box 기본값(--brand-strong)보다 옅다 — 시안 usp-a. .dtl-box 를 바꾸면 스텝 박스·infobox 까지 따라오므로 여기서만 덮는다. */ .dtl-checklist{display:flex;flex-direction:column;gap:16px;border-color:var(--line-card);} .dtl-check{display:flex;gap:12px;align-items:flex-start;} /* 아이콘 위 2px — 24px 아이콘과 27px 줄상자(18 × 1.5)의 차이 절반이다. center 로 두면 설명이 여러 줄인 항목에서 아이콘이 제목을 벗어나 가운데로 뜬다. */ .dtl-check > svg{flex:none;width:24px;height:24px;margin-top:2px;color:var(--brand-normal);} .dtl-check__title{font-size:18px;line-height:1.5;letter-spacing:-0.72px;font-weight:700;color:var(--label-strong);} .dtl-check__desc{font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} /* ---------- STEP 카드 ---------- */ .dtl-step__head{display:flex;gap:8px;align-items:center;} .dtl-step__label{font-size:14px;line-height:1.6;letter-spacing:-0.56px;font-weight:700;color:var(--brand-strong);white-space:nowrap;} .dtl-step__time{flex:1;min-width:0;font-size:14px;line-height:1.6;letter-spacing:-0.56px;font-weight:700;color:var(--label-subtle);} .dtl-step__title{margin-top:4px;font-size:18px;line-height:1.5;letter-spacing:-0.72px;font-weight:700;color:var(--label-strong);} .dtl-step__divider{margin-top:8px;border:0;border-top:1px solid var(--line-hairline);} .dtl-step__list{margin-top:8px;padding-left:21px;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.6;letter-spacing:-0.56px;color:var(--label-normal);} .dtl-step__list > li{list-style:disc;} /* ---------- STEP B · C (흰 카드형) ---------- */ .dtl-step--b{background:var(--brand-soft);border:1px solid var(--line-card);border-radius:var(--radius-100);padding:20px;} /* C형 — 시안 STEP type=C. 테두리 없음·라운드 12. 머리줄 뱃지는 dtl-badge--after(노랑 알약)이고, dtl-badge--black 마크업도 그대로 렌더된다. how-c 가 이 카드를 쓴다. */ .dtl-step--c{background:var(--brand-soft);border-radius:var(--radius-150);padding:20px;} .dtl-step--b .dtl-step__title{margin-top:0;} /* B형은 머리줄과 제목이 붙는다 */ .dtl-step__head--b{display:flex;gap:8px;align-items:center;white-space:nowrap;} .dtl-step__num{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--brand-strong);} .dtl-step__head--c{display:flex;gap:8px;align-items:center;} .dtl-step__body{margin-top:8px;font-size:16px;line-height:1.6;letter-spacing:-0.64px;color:var(--label-normal);} .dtl-step--c .dtl-step__title{margin-top:8px;} /* ---------- Numbering (번호 카드) ---------- */ .dtl-numbering{display:flex;flex-direction:column;gap:8px;align-items:flex-start;} .dtl-numbering--center{align-items:center;text-align:center;} /* 잉크는 label/normal — 시안(9264:43102)에서 설명(__desc)과 같은 단계다. 굵기는 title/18medium(SemiBold 600) — 09.16 9609:230193 대조 */ .dtl-numbering__title{font-size:18px;line-height:1.5;letter-spacing:-0.72px;font-weight:600;color:var(--label-normal);} /* 설명은 16 — 시안(9264:43102)의 teacher-a Numbering 세 장이 모두 body/16 이다. 이 컴포넌트는 teacher-a 전용이다. */ .dtl-numbering__desc{margin-top:4px;font-size:16px;line-height:1.6;letter-spacing:-0.64px;color:var(--label-normal);} /* ---------- Badge — 시안 Badge 컴포넌트 type 11종 ---------- 글자색은 Default가 label/inverse를 들고 있어 Before(subtle)만 되짚는다. 괄호 안은 별칭 클래스명 — 저장된 산출물이 쓰므로 같은 규칙을 함께 받는다. */ .dtl-badge{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;border-radius:64px;background:var(--brand-normal);font-size:14px;line-height:1.6;letter-spacing:-0.56px;font-weight:700;color:var(--label-inverse);white-space:nowrap;} .dtl-badge--session{background:var(--brand-point);font-size:12px;letter-spacing:-0.48px;} .dtl-badge--before{background:var(--bg-tag);color:var(--label-subtle);font-size:13px;letter-spacing:-0.52px;} .dtl-badge--after{min-width:54px;font-size:13px;letter-spacing:-0.52px;} .dtl-badge--black{min-width:54px;padding:4px 12px;background:var(--label-black);font-size:13px;letter-spacing:-0.52px;} /* Inv (별칭 --step) — 채워진 포인트 pill */ .dtl-badge--inv,.dtl-badge--step{background:var(--theme-point);font-size:14px;letter-spacing:-0.56px;} /* Square (별칭 --numsq) */ .dtl-badge--square,.dtl-badge--numsq{flex:none;width:33px;height:33px;padding:0;border-radius:4px;font-size:16px;letter-spacing:-0.64px;} /* Circle */ .dtl-badge--circle{flex:none;width:20px;height:20px;padding:0;border-radius:50%;background:var(--label-strong);font-size:12px;letter-spacing:-0.48px;} /* Rectangle (별칭 --q) */ .dtl-badge--rect,.dtl-badge--q{flex:none;padding:0 7px;border-radius:4px;font-size:12px;letter-spacing:-0.48px;} /* RectanglePoint (별칭 --label) */ .dtl-badge--rect-point,.dtl-badge--label{flex:none;padding:0 7px;border-radius:4px;background:var(--theme-point);font-size:12px;letter-spacing:-0.48px;} /* ---------- Linear List (선형 리스트) ---------- 연결선은 항목마다 "내 아이콘 아래 → 다음 아이콘 위"를 절대좌표로 잇는다 (다음 항목의 padding-top 16px 구간까지 bottom:-16px로 연장). 브리지 두께 3px — 38px 아이콘 중심(19)에 맞추려 left 는 19 - 1.5 = 17.5. */ .dtl-llist{display:flex;flex-direction:column;} .dtl-llist__item{display:flex;gap:12px;align-items:stretch;} .dtl-llist__axis{position:relative;flex:none;width:38px;} .dtl-llist__axis > svg{display:block;width:38px;height:38px;color:var(--brand-normal);} .dtl-llist__item:not(:last-child) .dtl-llist__axis::after{content:"";position:absolute;left:17.5px;top:38px;bottom:-16px;border-left:3px solid var(--brand-normal);} .dtl-llist__body{flex:1;min-width:0;padding:6px 0 16px;font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:500;color:var(--label-normal);border-bottom:2px solid var(--line-hairline);} .dtl-llist__item + .dtl-llist__item{padding-top:16px;} /* ---------- Session / SessionList (회차 리스트) ---------- 세로 레일은 항목마다 "내 점 아래 → 다음 점 위"를 절대좌표로 잇는다 (flex gap 20px 구간까지 bottom:-27px로 연장 = gap 20 + 다음 점 top 8 - 1). */ .dtl-sessions{background:var(--bg-gray);border-radius:var(--radius-150);padding:32px 10px;display:flex;flex-direction:column;gap:20px;} .dtl-sessions--plain{background:none;border-radius:0;padding:0 10px;} /* 커리큘럼 B: 흰 섹션에 타임라인 직접 */ .dtl-session{position:relative;display:flex;gap:8px;align-items:flex-start;padding-left:20px;} .dtl-session::before{content:"";position:absolute;left:3px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--brand-point);} /* 브리지: 세션 간격 20 + 다음 dot top 8 + dot 중심 3 = 31 — dot2 중심까지 닿게 (dot이 위에 그려져 겹침은 안 보인다) */ .dtl-session:not(:last-child)::after{content:"";position:absolute;left:5.5px;top:14px;bottom:-31px;border-left:1px solid var(--brand-point);} .dtl-session > .dtl-badge--session{flex:none;width:44px;margin-top:2px;} .dtl-session__texts{flex:1;min-width:0;} .dtl-session__title{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-normal);} .dtl-session__desc{font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} /* ---------- Banner (링크 배너) ---------- */ .dtl-banner{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-100);background:var(--brand-point);text-decoration:none;color:inherit;} .dtl-banner--point{background:var(--brand-point);} .dtl-banner__media{flex:none;width:56px;height:56px;border-radius:var(--radius-media);object-fit:cover;display:block;} .dtl-banner__texts{flex:1;min-width:0;} .dtl-banner__desc{font-size:14px;line-height:1.6;letter-spacing:-0.56px;color:var(--label-inverse);} .dtl-banner__title{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-inverse);} /* B형(흰 배경·검정 테두리)은 어두운 텍스트 유지 */ .dtl-banner--b .dtl-banner__desc{color:var(--label-subtle);} .dtl-banner--b .dtl-banner__title{color:var(--label-normal);} .dtl-banner__chev{flex:none;width:24px;height:24px;color:var(--label-normal);} /* ---------- Card (인물 카드) ---------- */ /* 높이 115px 고정. 이미지는 카드 높이에 맞춘 정사각(테두리 1px 안쪽이라 113×113), 본문은 3줄. 세로 패딩 8px이어야 3줄(72px)이 115px 안에 정확히 들어간다: 115 - 테두리2 - 패딩16 - 메타20.8 - 간격4 = 72.2 */ .dtl-card{display:flex;align-items:stretch;height:115px;border:1px solid var(--line-hairline);border-radius:var(--radius-150);overflow:hidden;} .dtl-card__media{flex:none;width:auto;aspect-ratio:1/1;align-self:stretch;object-fit:cover;display:block;} .dtl-card__body{flex:1;min-width:0;padding:8px 12px;background:var(--bg-gray);} .dtl-card__meta{display:flex;gap:8px;align-items:center;} .dtl-card__name{font-size:13px;line-height:1.6;letter-spacing:-0.52px;font-weight:700;color:var(--label-normal);} .dtl-card__sep{width:1px;height:16px;background:var(--line-hairline);} .dtl-card__age{font-size:13px;line-height:1.6;letter-spacing:-0.52px;color:var(--label-subtle);} /* 후기 본문은 3줄에서 끊는다 (72px = 15px × 1.6 × 3) */ .dtl-card__text{margin-top:4px;font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;} /* ---------- metric / Metrics (지표) ---------- 시안 Metrics: 지표 사이 24, 지표 하나의 최소 폭 100 (review-a). */ .dtl-metrics{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center;} .dtl-metric{min-width:100px;text-align:center;} .dtl-metric__label{font-size:14px;line-height:1.6;letter-spacing:-0.56px;color:var(--label-normal);} .dtl-metric__value{font-size:34px;line-height:1.4;letter-spacing:-1.36px;font-weight:700;color:var(--brand-point);} /* ---------- Compare (수업 전/후 비교) ---------- */ /* 높이는 내용을 따른다 — 카드를 정사각으로 못박지 않는다. 폭은 flex 로 나눈다 (flex-basis 0 + min-width:0 이라 긴 낱말이 있어도 제 몫을 넘지 않는다). */ /* 시안 9559:214346 · 09.16 9609:230484 — 위아래 한 줄이다. '수업 전' 회색 카드가 위, 브랜드 점 색 이중 셰브론, '수업 후' 카드가 아래다. 전 카드는 후 카드보다 양옆 16 씩 좁다(시안 288 대 320) — 조각 폭이 360 이 아닐 때도 그 차이가 유지되도록 px 가 아니라 calc 로 잰다. 아래 카드가 넓어 무게가 뒤로 간다. 셰브론이 없는 마크업도 같은 세로 배치로 그려진다. C형(.dtl-compare--c)은 가로 두 칸이라 아래에서 방향을 되돌린다. */ .dtl-compare{display:flex;flex-direction:column;gap:20px;align-items:center;} .dtl-compare__card{width:calc(100% - 32px);border-radius:var(--radius-150);padding:16px;background:var(--bg-gray);} .dtl-compare__card--after{width:100%;background:var(--brand-point);} .dtl-compare__title{font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:700;color:var(--label-subtle);} .dtl-compare__card--after .dtl-compare__title{font-size:16px;letter-spacing:-0.64px;color:var(--label-inverse);} .dtl-compare__list{margin-top:8px;display:flex;flex-direction:column;gap:6px;} .dtl-compare__card--after .dtl-compare__list{margin-top:6px;} .dtl-compare__item{display:flex;gap:6px;align-items:flex-start;font-size:14px;line-height:1.6;letter-spacing:-0.56px;color:var(--label-normal);} .dtl-compare__card--after .dtl-compare__item{font-size:15px;letter-spacing:-0.6px;color:var(--label-inverse);} /* 아이콘을 첫 줄에 맞춘다 — center 로 두면 두 줄 넘는 항목에서 아이콘이 줄 사이에 떠 버린다. 위 4px 은 14px 아이콘과 22.4px 줄상자(14 × 1.6)의 차이 절반이다. '수업 후' 카드는 본문이 15px 이라 절반이 5px 이다. */ .dtl-compare__item > svg{flex:none;width:14px;height:14px;margin-top:4px;} .dtl-compare__card--after .dtl-compare__item > svg{margin-top:5px;} /* 두 카드 사이의 이중 셰브론 — 섹션 템플릿이 넣는 장식이라 컨테이너 밖이다. */ .dtl-compare__chevron{display:flex;justify-content:center;} .dtl-compare__chevron > svg{width:28px;height:28px;color:var(--brand-point);} /* 시안 IconChevronDoubleDown 28 (09.17 9657:231071) — 카드 사이라 섹션 구분자(32)보다 한 단계 작다 */ /* ---------- 단독 아이콘 ---------- */ .dtl-i-check20{display:block;width:20px;height:20px;color:var(--brand-point);} .dtl-compare__item > svg.dtl-i-x{color:var(--label-subtle);} .dtl-compare__item > svg.dtl-i-ok{color:var(--label-inverse);} /* ---------- 미디어 슬롯 · 그리드 ---------- */ .dtl-media{display:block;width:100%;height:auto;margin-inline:auto;border-radius:var(--radius-media);object-fit:cover;} .dtl-media--169{aspect-ratio:16/9;} .dtl-media--11{aspect-ratio:1/1;} /* 여백 없는 이미지 자리(이미지 섹션 image-a) — 긴 상세 이미지를 잘라 이어 붙이는 용도라 섹션 폭에 맞붙고 모서리 둥글림이 없다. 후손 선택자인 이유: 편집기가 이미지에 링크를 걸면 가 한 겹 감싸고, 유튜브로 바꾸면 .dtl-video 가 된다 — 어느 형태든 각지게 */ .dtl .dtl-bleed .dtl-media,.dtl .dtl-bleed .dtl-slot,.dtl .dtl-bleed .dtl-video{border-radius:0;} /* ---------- 빈 이미지 슬롯 ---------- 이미지가 아직 없을 때는 가 아니라 이 자리표시 div를 쓴다. 주소가 정해지면 같은 클래스의 로 교체된다(base64를 산출물에 남기지 않기 위함). 빈 상태의 배경은 이 규칙 하나가 정한다 — 이미지 자리 클래스(.dtl-media, .dtl-bubble-row__avatar, .dtl-card__media …)는 배경을 갖지 않는다. 편집기가 교체할 때 .dtl-slot 만 벗기고 컴포넌트 클래스는 남기므로, 그 클래스가 배경을 들고 있으면 이미지가 올라온 뒤에 그 색이 드러난다. (validate-css.py 의 "이미지 자리 클래스에 배경 없음" 이 이 규율을 지킨다) 왜 `.dtl` 를 앞에 두는가 — 슬롯은 언제나 어떤 이미지 자리 클래스와 함께 붙고, 그 규칙들은 실제 이미지를 전제로 display:block 을 준다. 한 클래스짜리 선택자라 이 규칙과 특정도가 같아서 뒤에 선언된 쪽이 이기고, 그러면 display:block 이 되어 자리표시 문구의 가운데 정렬이 풀린다 (아바타·stepwrap 미디어가 그랬다). `.dtl` 을 앞에 붙여 특정도를 올리면 선언 순서와 무관하게 슬롯이 이기고, 의도된 두 클래스 override(.dtl-emblem.dtl-slot 등)는 그대로 살아 있다. */ .dtl .dtl-slot{display:flex;align-items:center;justify-content:center;background:#E9E9E9;border-radius:var(--radius-media);color:var(--label-black);font-size:12px;line-height:1.6;letter-spacing:-0.48px;font-weight:700;text-align:center;} .dtl-slot::after{content:attr(data-hint);} /* ---------- figure · 그리드 ---------- 미디어 캡션 규칙: 어디에 놓이든 caption-12 · label-subtle · 이미지와 8px 간격. media-cell 도 dtl-figure 를 달아 이 규칙을 받는다. dtl-figure 가 없는 media-cell 은 아래 data-block 선택자가 같은 값을 준다 — 그리드 밖(dtl-stack)에 놓여도 16px 본문 색으로 떨어지지 않는다. */ .dtl-figure,.dtl [data-block="media-cell"]{display:flex;flex-direction:column;gap:8px;} .dtl-figure > figcaption,.dtl [data-block="media-cell"] > figcaption{font-size:12px;line-height:1.6;letter-spacing:-0.48px;color:var(--label-subtle);} /* 미디어 자리의 세로 간격 — "이미지 여백 가이드"(Figma 9333:160403). 시안의 MediaAlign(미디어 + 캡션)은 어느 섹션에 놓이든 16px 로 쌓인다. dtl-wrap 계열 컨테이너는 블록 레이아웃이라 그냥 두면 둘째 블록이 간격 0 으로 맞붙으므로, 컨테이너 이름을 겨냥해 간격을 준다 — 저장된 문서도 같은 값을 받는다(styleHref 는 덮어쓰기라 CSS 가 모든 마크업에 닿는다). 이 자리들의 직계 자식은 미디어 블록뿐이라 안전하다. 미디어 그리드(dtl-media-grid)도 같은 16 을 쓴다 — 단수가 1단이라 행 간격 하나뿐이다. 제외는 image-a(images) 하나이고 gap 0 이다. */ .dtl [data-container="media"], .dtl [data-container="medias"]{display:flex;flex-direction:column;gap:16px;} /* 근거 카드 자리도 같은 16 — 카드를 여러 장 두면 dtl-wrap 이 블록 레이아웃이라 0 으로 맞붙었다. 카드 안 미디어 간격과 같은 값이다. */ .dtl [data-container="evidence"]{display:flex;flex-direction:column;gap:16px;} .dtl-media-note{display:flex;flex-direction:column;gap:20px;} /* 이미지 + 아래 글 묶음 — 수업 결과물 B(본문), 수업 자료 C(텍스트 카드) */ .dtl-media-note--12{gap:12px;} /* 수업 자료 C — 시안 StepWrap type=E(9333:160055)는 미디어와 카드 사이가 12 */ /* 단수는 1단 고정이다 — MediaAlign 은 1단만 쓴다. 데스크탑(.dtl-fit-page)에서도 벌어지지 않으므로 편집기 캔버스가 주입할 그리드 규칙도 없다. --3 는 저장된 문서가 쓰므로 클래스를 지우지 않고 같은 1단으로 눕힌다. */ .dtl-media-grid,.dtl-media-grid--3{display:grid;grid-template-columns:1fr;gap:16px;} /* 비운 자리 흔적 지우기 — 편집기는 되살릴 수 있게 껍데기를 남기고 지우므로, 남은 껍데기가 래퍼의 패딩과 부모의 flex gap 을 그대로 물고 있으면 지운 자리가 빈 띠로 보인다. 껍데기를 display:none 으로 빼면 gap 은 저절로 없어지고, 래퍼는 아래에서 접는다. 편집기만 이 자리를 되살려 "추가"·"복원" 자리표시를 보여준다. 빈 글 상자. span 은 일부러 뺐다 — .dtl-card__sep · .dtl-review__rating-sep 처럼 비어 있는 채로 선을 그리는 span 이 있어 한꺼번에 지우면 그 선이 같이 사라진다. .dtl-media 계열도 빈 div 로 자리를 잡으므로 태그를 p·figcaption·li 로 한정한다. */ .dtl [data-container]:empty, .dtl p:empty, .dtl figcaption:empty, .dtl li:empty, .dtl-head:empty{display:none;} /* 래퍼는 안이 다 비면 패딩째 접힌다. 접는 조건 넷 — ① 자식이 아예 없다 — 칸이 곧 블록인 자리(본문)를 지우면 래퍼만 남는다 ② 하나뿐인 자식이 빈 컨테이너다 ③ 하나뿐인 자식이 빈 헤드다 — 칸을 지워 껍데기만 남은 모양 ④ 하나뿐인 자식이 헤드인데 그 안의 글 상자만 비었다 — 글자만 지운 모양 ③·④ 를 :has() 하나로 합치지 못하는 것은 :has() 안에 :has() 를 넣을 수 없어서다. 래퍼 목록은 위(컨테이너)와 같은 이유로 지금 그 자리가 실제로 놓이는 것만 적는다 — 헤드를 유일 자식으로 품는 래퍼는 dtl-wrap 과 dtl-wrap--lg 둘뿐이다(faq 는 목록을 같이 품어 유일 자식이 아니다). 새 래퍼에 넣게 되면 그때 이 목록에 더한다. */ .dtl-wrap:empty, .dtl-wrap:has(> [data-container]:empty:only-child), .dtl-wrap--x:has(> [data-container]:empty:only-child), .dtl-wrap--media:has(> [data-container]:empty:only-child), .dtl-wrap:has(> .dtl-head:empty:only-child), .dtl-wrap--lg:has(> .dtl-head:empty:only-child), .dtl-wrap:has(> .dtl-head:only-child > p:empty:only-child), .dtl-wrap--lg:has(> .dtl-head:only-child > p:empty:only-child){display:none;} /* 래퍼가 남는 자리(헤드 옆에 목록이 함께 있는 faq)는 헤드가 지워진 만큼 간격도 지운다 */ .dtl-wrap--faq > .dtl-head:empty + .dtl-qa{margin-top:0;} /* ---------- 자유 자리 (rules.freeSlot) ---------- 편집기가 섹션 안 이음매에 끼우는 래퍼. 안의 블록(본문·이미지·이미지+캡션)은 늘 "본문"으로 친다 — 본문과 맞닿는 쪽은 16 으로 붙고, 헤드·섹션 끝과 맞닿는 쪽은 템플릿이 정한 원래 간격을 그대로 둔다. 자리는 여백을 새로 만들지 않는다. 붙는 쪽 띠의 padding 을 반대편으로 옮겨 받아, 반대편 이음매가 끼우기 전과 같게 남는다. · 본문 뒤(기본) : 위 띠의 아래 padding(--free-pb)을 자기 아래로. margin-top = 16 − 그 값 · 헤드 아래(lead): 아래 띠의 위 padding(--free-pt)을 자기 위로. margin-bottom = 16 − 그 값 띠 종류는 셋이 아니라 래퍼 클래스마다 padding 이 달라 목록으로 적는다. 새 래퍼를 섹션 최상위에 두게 되면 이 목록에도 더한다. */ .dtl-free{display:flex;flex-direction:column;gap:16px;--free-g:16px;--free-pb:0px;--free-pt:0px; padding:0 20px var(--free-pb);margin-top:calc(var(--free-g) - var(--free-pb));} .dtl-free:empty{display:none;} .dtl-wrap + .dtl-free{--free-pb:20px;} .dtl-wrap--x + .dtl-free{--free-pb:0px;} .dtl-wrap--media + .dtl-free{--free-pb:10px;} .dtl-wrap--bubble + .dtl-free{--free-pb:29px;} .dtl-wrap--faq + .dtl-free{--free-pb:64px;} .dtl-wrap--lg + .dtl-free{--free-pb:88px;} .dtl-wrap--list + .dtl-free{--free-pb:16px;} /* 앞 띠가 접혀 있으면(위 접힘 조건과 같은 목록) 보이지 않는 띠를 건너뛰어 그 앞 띠의 padding 을 받는다. 접힘 조건을 고치면 여기 :is() 목록도 함께 고친다. 접힌 띠가 둘 연달아 있는 경우는 다루지 않는다. 앞머리의 .dtl 은 스코프 규칙(선택자는 .dtl 로 시작) 때문이다. 아래 여덟 줄 모두에 붙여 우선순위 순서(기본 < 접힌 띠 뒤 < 앞 띠 + 접힌 띠 뒤)가 유지되게 한다. */ .dtl :is(.dtl-wrap:empty,.dtl-wrap:has(> [data-container]:empty:only-child),.dtl-wrap--x:has(> [data-container]:empty:only-child),.dtl-wrap--media:has(> [data-container]:empty:only-child),.dtl-wrap:has(> .dtl-head:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:empty:only-child),.dtl-wrap:has(> .dtl-head:only-child > p:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:only-child > p:empty:only-child)) + .dtl-free{--free-pb:0px;} .dtl .dtl-wrap + :is(.dtl-wrap:empty,.dtl-wrap:has(> [data-container]:empty:only-child),.dtl-wrap--x:has(> [data-container]:empty:only-child),.dtl-wrap--media:has(> [data-container]:empty:only-child),.dtl-wrap:has(> .dtl-head:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:empty:only-child),.dtl-wrap:has(> .dtl-head:only-child > p:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:only-child > p:empty:only-child)) + .dtl-free{--free-pb:20px;} .dtl .dtl-wrap--x + :is(.dtl-wrap:empty,.dtl-wrap:has(> [data-container]:empty:only-child),.dtl-wrap--x:has(> [data-container]:empty:only-child),.dtl-wrap--media:has(> [data-container]:empty:only-child),.dtl-wrap:has(> .dtl-head:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:empty:only-child),.dtl-wrap:has(> .dtl-head:only-child > p:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:only-child > p:empty:only-child)) + .dtl-free{--free-pb:0px;} .dtl .dtl-wrap--media + :is(.dtl-wrap:empty,.dtl-wrap:has(> [data-container]:empty:only-child),.dtl-wrap--x:has(> [data-container]:empty:only-child),.dtl-wrap--media:has(> [data-container]:empty:only-child),.dtl-wrap:has(> .dtl-head:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:empty:only-child),.dtl-wrap:has(> .dtl-head:only-child > p:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:only-child > p:empty:only-child)) + .dtl-free{--free-pb:10px;} .dtl .dtl-wrap--bubble + :is(.dtl-wrap:empty,.dtl-wrap:has(> [data-container]:empty:only-child),.dtl-wrap--x:has(> [data-container]:empty:only-child),.dtl-wrap--media:has(> [data-container]:empty:only-child),.dtl-wrap:has(> .dtl-head:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:empty:only-child),.dtl-wrap:has(> .dtl-head:only-child > p:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:only-child > p:empty:only-child)) + .dtl-free{--free-pb:29px;} .dtl .dtl-wrap--faq + :is(.dtl-wrap:empty,.dtl-wrap:has(> [data-container]:empty:only-child),.dtl-wrap--x:has(> [data-container]:empty:only-child),.dtl-wrap--media:has(> [data-container]:empty:only-child),.dtl-wrap:has(> .dtl-head:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:empty:only-child),.dtl-wrap:has(> .dtl-head:only-child > p:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:only-child > p:empty:only-child)) + .dtl-free{--free-pb:64px;} .dtl .dtl-wrap--lg + :is(.dtl-wrap:empty,.dtl-wrap:has(> [data-container]:empty:only-child),.dtl-wrap--x:has(> [data-container]:empty:only-child),.dtl-wrap--media:has(> [data-container]:empty:only-child),.dtl-wrap:has(> .dtl-head:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:empty:only-child),.dtl-wrap:has(> .dtl-head:only-child > p:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:only-child > p:empty:only-child)) + .dtl-free{--free-pb:88px;} .dtl .dtl-wrap--list + :is(.dtl-wrap:empty,.dtl-wrap:has(> [data-container]:empty:only-child),.dtl-wrap--x:has(> [data-container]:empty:only-child),.dtl-wrap--media:has(> [data-container]:empty:only-child),.dtl-wrap:has(> .dtl-head:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:empty:only-child),.dtl-wrap:has(> .dtl-head:only-child > p:empty:only-child),.dtl-wrap--lg:has(> .dtl-head:only-child > p:empty:only-child)) + .dtl-free{--free-pb:16px;} /* 헤드 아래(lead) — 여는 헤드 뒤 스페이서를 건너 다음 띠 바로 앞에 놓인다. 다음 띠가 접힌 경우는 CSS 로 풀 수 없다: .dtl-free--lead:has(+ :is(접힘)) 은 :has() 안에 :has() 를 넣는 꼴이라 규칙째 버려진다. 편집기가 내보낼 때 정리한다(자리를 접힌 띠 뒤로 옮긴다 — 편집 중에는 옮기지 않는다. 되살리면 순서가 뒤바뀌기 때문이다). */ .dtl-free--lead{padding:var(--free-pt) 20px 0;margin-top:0;margin-bottom:calc(var(--free-g) - var(--free-pt));} .dtl-free--lead:has(+ .dtl-wrap){--free-pt:20px;} .dtl-free--lead:has(+ .dtl-wrap--x){--free-pt:0px;} .dtl-free--lead:has(+ .dtl-wrap--media){--free-pt:10px;} .dtl-free--lead:has(+ .dtl-wrap--bubble){--free-pt:29px;} .dtl-free--lead:has(+ .dtl-wrap--faq){--free-pt:64px;} .dtl-free--lead:has(+ .dtl-wrap--list){--free-pt:16px;} .dtl-free--lead:has(+ :is(.dtl-divider--kebab,.dtl-divider--arrow,.dtl-divider--chevron)){--free-pt:16px;} .dtl-media-grid > figure{min-width:0;display:flex;flex-direction:column;gap:8px;} .dtl-media-grid > figure > figcaption{font-size:12px;line-height:1.6;letter-spacing:-0.48px;color:var(--label-subtle);} /* ---------- Tag · Careers (경력 및 활동) ---------- */ .dtl-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:24px;background:var(--bg-tag);font-size:14px;line-height:1.6;letter-spacing:-0.56px;font-weight:700;color:var(--label-normal);} .dtl-careers__list{margin-top:16px;padding-left:22px;display:flex;flex-direction:column;} .dtl-careers__list > li{list-style:disc;font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} /* ---------- StepWrap ---------- */ .dtl-stepwrap{background:var(--base-surface);border:1px solid var(--brand-normal);border-radius:var(--radius-150);padding:17px 25px 3px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;} .dtl-stepwrap__label{font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:700;color:var(--brand-strong);} .dtl-stepwrap__title{margin-top:4px;font-size:18px;line-height:1.5;letter-spacing:-0.72px;font-weight:700;color:var(--label-normal);} .dtl-stepwrap__media{width:270px;max-width:100%;height:auto;aspect-ratio:1/1;border-radius:var(--radius-media);object-fit:cover;display:block;} /* C형 — 어두운 라벨 띠가 위에 붙고 그 아래 16:9 미디어가 카드를 꽉 채운다. 라운드는 카드가 갖고(overflow:hidden), 안의 미디어는 각을 세운다. */ .dtl-stepwrap--c{align-items:stretch;gap:0;padding:0;border:0;border-radius:var(--radius-150);background:var(--bg-gray);overflow:hidden;text-align:left;} .dtl-stepwrap__bar{padding:8px 16px;background:var(--label-normal);font-size:14px;line-height:1.6;letter-spacing:-0.56px;font-weight:700;color:var(--label-inverse);} .dtl-stepwrap--c > .dtl-media,.dtl-stepwrap--c > .dtl-slot{border-radius:0;} /* ---------- NumberSquare · List (성과 A형 / USP B형) ---------- */ .dtl-numlist{display:flex;flex-direction:column;gap:20px;} .dtl-numlist__item{display:flex;gap:16px;align-items:flex-start;} .dtl-numlist__texts{flex:1;min-width:0;} .dtl-numlist__title{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:500;color:var(--label-normal);} .dtl-numlist__desc{font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} .dtl-numbox-list{display:flex;flex-direction:column;gap:16px;} /* List C형 — 시안 8124:11881. 번호 뱃지 옆에 18 Bold 제목이 붙고, 설명(16 Medium)은 그 아래 한 줄이다. grid 2열이다 — 뱃지·제목이 첫 줄, 제목 뒤의 설명은 두 열을 가로지른다(grid-column). 제목이 없는 마크업 (뱃지 + 설명 한 칸)은 설명이 2열에 놓여 뱃지 옆 한 줄로 그려진다. 뱃지는 블록의 직계로 남긴다 — 편집기의 자동 재번호가 :scope > .dtl-badge--square 로 찾는다. */ .dtl-numbox{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:12px;align-items:center;padding:20px 18px;border:1px solid var(--line-hairline);border-radius:var(--radius-100);background:var(--bg-gray);} .dtl-numbox__title{min-width:0;font-size:18px;line-height:1.5;letter-spacing:-0.72px;font-weight:700;color:var(--label-normal);} .dtl-numbox__text{min-width:0;font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:500;color:var(--label-normal);} .dtl-numbox__title + .dtl-numbox__text{grid-column:1 / -1;} /* ---------- List F형 (라벨 + 헤어라인 + 본문) — 시안 List type=F 시의성 섹션의 근거 카드. 라벨은 brand/strong 잉크로 본문과 층을 나눈다. */ .dtl-list-f{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--radius-150);background:var(--bg-gray);} .dtl-list-f__label{font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:700;color:var(--brand-strong);} .dtl-list-f__line{margin:0;align-self:stretch;border:0;border-top:1px solid var(--line-hairline);} .dtl-list-f__body{font-size:16px;line-height:1.6;letter-spacing:-0.64px;color:var(--label-normal);} /* ---------- 근거 카드 (문구 + 미디어) — 시의성 B형의 회색 카드 ---------- */ .dtl-evidence{display:flex;flex-direction:column;gap:24px;padding:32px 20px;border-radius:var(--radius-150);background:var(--bg-gray);} .dtl-evidence__title{font-size:18px;line-height:1.5;letter-spacing:-0.72px;font-weight:600;color:var(--label-normal);text-align:center;} /* B형 시안 title/18medium = SemiBold 600 (09.16 9607:228649). C형(--brand)은 title/18 Bold — 아래에서 700 */ /* 출처 줄 — 근거 카드 3종 공통. 색·크기만 정하고 정렬은 담긴 자리를 따른다: A형 카드는 좌측 정렬, B·C형은 가운데 정렬한 묶음 안에 들어간다. */ .dtl-source{font-size:13px;line-height:1.6;letter-spacing:-0.52px;color:var(--label-subtle);} /* B형 — 미디어와 출처를 한 벌로 묶는다. 카드 gap 이 24 인데 이 둘 사이만 16 이다 */ .dtl-evidence__fig{display:flex;flex-direction:column;gap:16px;text-align:center;} /* 근거 항목 (A형) — 미디어 + 라벨 + 본문 + 출처를 담은 회색 카드. .dtl-list-f(라벨 + 헤어라인 + 본문)를 대신하지만 그 클래스는 저장된 문서가 쓰므로 남는다. */ .dtl-evidence-item{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--radius-150);background:var(--bg-gray);} .dtl-evidence-item__texts{display:flex;flex-direction:column;gap:8px;} .dtl-evidence-item__label{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--brand-strong);} .dtl-evidence-item__body{font-size:16px;line-height:1.6;letter-spacing:-0.64px;color:var(--label-normal);} /* ---------- List B형 (체크 + 한 줄 + 구분선) ---------- */ .dtl-list-b{display:flex;flex-direction:column;gap:10px;padding-top:11px;} .dtl-list-b__row{display:flex;gap:8px;align-items:flex-start;} .dtl-list-b__row > svg{flex:none;width:24px;height:24px;color:var(--brand-normal);} .dtl-list-b__text{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:500;color:var(--label-normal);} .dtl-list-b__line{margin:0;border:0;border-top:2px dashed var(--line-hairline);} /* ---------- Session B형 (순번 뱃지) ---------- 뱃지는 제목과 한 줄에 놓이고, 설명은 뱃지 왼쪽 끝에 맞춰 다음 줄로 내려간다. 아래 첫 줄은 뱃지가 .dtl-session 직계인 마크업도 같은 규칙을 받게 한다. */ .dtl-session--b > .dtl-badge{flex:none;margin-top:2px;} .dtl-session--b .dtl-session__texts{display:flex;flex-direction:column;gap:2px;} .dtl-session__row{display:flex;gap:8px;align-items:center;} .dtl-session__row > .dtl-badge{flex:none;} /* ---------- Q&A B형 (카드 + 순번 뱃지) ---------- */ .dtl-qab{padding:10px 14px;border-radius:var(--radius-100);background:var(--base-surface);} .dtl-qab__head{display:flex;gap:8px;align-items:center;} .dtl-qab__q{font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:700;color:var(--label-normal);} .dtl-qab__a{margin-top:4px;font-size:14px;line-height:1.6;letter-spacing:-0.56px;color:var(--label-normal);} /* ---------- 리뷰 카드 ---------- */ .dtl-review{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--radius-150);background:var(--bg-gray);box-shadow:0 4px 6px -4px rgba(15,23,42,.1),0 10px 15px -3px rgba(15,23,42,.1);} .dtl-review__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;} .dtl-review__author{font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:500;color:var(--label-subtle);} .dtl-review__stars{display:flex;gap:2px;color:var(--brand-point);} .dtl-review__stars svg{flex:none;width:18px;height:18px;} .dtl-review__title{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-normal);} .dtl-review__body{margin-top:4px;font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} /* 제목과 본문은 한 덩어리(간격 4) — 카드 자신의 gap 10은 메타와 이 덩어리 사이에만 */ .dtl-review__texts{display:flex;flex-direction:column;gap:4px;align-self:stretch;} .dtl-review__texts > .dtl-review__body{margin-top:0;} /* ---------- 리뷰 카드 B형 (별점 뱃지 · 하단 작성자) — 시안 Card type=B ---------- 그림자 대신 헤어라인 테두리. 본문 아래 절취선을 두고 작성자를 맨 아래로 내린다. */ .dtl-review--b{gap:12px;border:1px solid var(--line-hairline);box-shadow:none;} .dtl-review__rating{align-self:flex-start;display:inline-flex;gap:6px;align-items:center;padding:2px 9px;border-radius:48px;background:var(--theme-point);color:var(--label-inverse);} .dtl-review__rating > svg{flex:none;width:16px;height:16px;} .dtl-review__rating-sep{flex:none;width:1px;height:12px;background:currentColor;} .dtl-review__score{font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:700;} .dtl-review__line{margin:0;align-self:stretch;border:0;border-top:2px dashed var(--line-hairline);} .dtl-review--b .dtl-review__body{margin-top:0;} .dtl-review--b .dtl-review__meta{justify-content:flex-start;gap:4px;} .dtl-review--b .dtl-review__author{letter-spacing:-0.56px;color:var(--label-strong);} .dtl-review__bar{font-size:15px;line-height:1.6;letter-spacing:-0.56px;font-weight:500;color:var(--label-disable);} /* 시안 Card B: 구분 막대는 label/disable */ .dtl-review__age{font-size:15px;line-height:1.6;letter-spacing:-0.56px;font-weight:500;color:var(--label-subtle);} /* ---------- 선생님 소개 카드 ---------- */ .dtl-teacher{position:relative;display:flex;flex-direction:column;gap:12px;padding:32px 20px 20px;border-radius:var(--radius-150);background:var(--bg-gray);} /* 알약 높이 38의 절반만큼(19px) 카드 위로 올라가 앞 이미지에 걸친다 */ .dtl-teacher__name{position:absolute;top:-19px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;padding:5px 18px;border-radius:64px;background:var(--theme-point);font-size:18px;line-height:1.5;letter-spacing:-0.72px;font-weight:700;color:var(--label-inverse);white-space:nowrap;} .dtl-teacher__head{font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:500;color:var(--brand-point);text-align:center;} .dtl-teacher__careers{margin-top:4px;padding-top:16px;border-top:1px dashed var(--line-hairline);display:flex;flex-direction:column;gap:16px;} /* ---------- 경력 리스트 (List E형) ---------- */ .dtl-career-e{display:flex;flex-direction:column;gap:11px;align-items:flex-start;padding-bottom:16px;border-bottom:1px dashed var(--line-hairline);} .dtl-career-e__list{display:flex;flex-direction:column;gap:4px;align-items:flex-start;align-self:stretch;} /* 뱃지 1개 아래 경력 줄들이 쌓이는 자리 */ .dtl-career-e__texts{font-size:14px;line-height:1.6;letter-spacing:-0.56px;font-weight:500;color:var(--label-normal);} /* ---------- Before/After 리스트 ---------- */ .dtl-cardbox{background:var(--base-surface);border-radius:12px;padding:20px;box-shadow:0 1px 2px rgba(15,23,42,.05);} /* gray 섹션 위 흰 카드 래퍼 — dtl-card(인물 카드)와 별개 */ .dtl-ba{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px dashed var(--line-hairline);} .dtl-ba:last-child{padding-bottom:0;border-bottom:0;} .dtl-ba__row{display:flex;gap:11px;align-items:flex-start;} .dtl-ba__row > .dtl-badge{flex:none;} .dtl-ba__text{flex:1;min-width:0;font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:400;color:var(--label-normal);} /* 시안 BeforeAfterList type=B — body/15 Regular */ .dtl-ba__text--before{color:var(--label-subtle);} /* C형 (수업 후 변화 C) — 시안 9559:214347 · 09.16 9609:230485. 좁은 회색 '전' 줄 아래에 화살표 칸 + 소프트 바탕 '후' 줄이 붙는다. 전 줄은 후 줄보다 양옆 8 씩 좁고(시안 304 대 320) 가운데 맞춰 후 줄이 앞으로 나온다 — 조각 폭이 달라도 차이가 유지되도록 calc 로 잰다. */ .dtl-ba--c{gap:0;align-items:center;padding-bottom:0;border-bottom:0;} .dtl-ba__before{display:flex;gap:8px;align-items:flex-start;width:calc(100% - 16px);padding:12px;border-radius:var(--radius-100) var(--radius-100) 0 0;background:var(--bg-gray);} .dtl-ba__before > svg{flex:none;width:12px;height:12px;margin-top:6px;color:var(--label-subtle);} .dtl-ba__after{display:flex;align-items:stretch;width:100%;} .dtl-ba__arrow{flex:none;display:flex;align-items:center;padding:16px 12px;border-radius:var(--radius-100) 0 0 var(--radius-100);background:var(--brand-normal);} .dtl-ba__arrow > svg{width:16px;height:16px;color:var(--label-inverse);} .dtl-ba__after > .dtl-ba__text{padding:12px 8px;border-radius:0 var(--radius-100) var(--radius-100) 0;background:var(--brand-soft);} .dtl-ba--c .dtl-ba__text--before{font-size:14px;letter-spacing:-0.56px;} /* ---------- 배너 B형 (테두리 + 오프셋 그림자) ---------- */ .dtl-banner--b{background:var(--brand-banner);border:1px solid var(--label-strong);box-shadow:4px 4px 0 0 var(--label-strong);} /* ---------- BubbleChat (수업의 필요성) ---------- 행은 [아바타 + 꼬리 + 본문] 덩어리를 가운데 모은다 — 시안 ChatImageList 가 320 안에서 좌우 여백을 같게 두고 서 있다. 본문 폭이 고정이라 가운데로 모으지 않으면 덩어리가 양 끝에 붙는다. 좌·우형은 아바타 쪽만 바뀌고 자리는 같다. */ .dtl-bubble-row{display:flex;gap:16px;align-items:flex-end;justify-content:center;} .dtl-bubble-row--b{align-items:center;} /* B형은 이모지와 말풍선을 수직 가운데로 */ .dtl-bubble-row--right{flex-direction:row-reverse;} /* 아바타 48 — 시안 9161:94607. A형은 48px 인물 일러스트 슬롯(people 풀), B형은 48px 이모지로 값이 같다. --b 규칙은 같은 값이라 별칭으로만 남는다. */ .dtl-bubble-row__avatar{flex:none;width:48px;height:48px;border-radius:var(--radius-media);object-fit:cover;display:block;} .dtl-bubble-row--b .dtl-bubble-row__avatar{width:48px;height:48px;} /* 꼬리+본문은 한 덩어리다 — 행의 gap(16px)은 아바타와 이 덩어리 사이에만 들어간다. 내용 폭만 차지해야 행이 덩어리를 가운데 놓을 수 있다. 자리가 좁으면 줄어든다(shrink 1 · min-width 0). */ .dtl-bubble-chat{flex:0 1 auto;min-width:0;display:flex;align-items:flex-end;} .dtl-bubble-row--b .dtl-bubble-chat{align-items:center;} .dtl-bubble-row--right .dtl-bubble-chat{flex-direction:row-reverse;} /* 꼬리는 본문에 겹치지 않고 자리를 차지한다. 색은 currentColor로 배경을 따라간다. */ .dtl-bubble-tail{flex:none;width:14px;height:27px;color:var(--bg-gray);} .dtl-bubble-row--b .dtl-bubble-tail{height:24px;} .dtl-bubble-row--right .dtl-bubble-tail{transform:scaleX(-1);} /* 방향은 자리가 정한다 — 말풍선 컨테이너(.dtl-stack) 안에서는 홀수번째가 좌, 짝수번째가 우로 놓여 좌·우·좌·우가 된다. 블록의 --right 클래스보다 이 규칙이 이긴다(nth-child 한 조각만큼 더 구체적) — 즉 산출물이 어떤 순서로 좌·우를 적어 두었든 렌더는 반드시 번갈아 간다. 블록을 넣고 빼도 nth-child가 다시 세므로 유지된다. .dtl-zigzag 는 같은 값을 받는 별칭이다. 컨테이너 밖에 홀로 선 말풍선(문서 견본의 A-우·C-우 표본)은 --right 가 그대로 듣는다. */ .dtl-stack > .dtl-bubble-row:nth-child(odd), .dtl-zigzag > .dtl-bubble-row:nth-child(odd){flex-direction:row;} .dtl-stack > .dtl-bubble-row:nth-child(odd) .dtl-bubble-chat, .dtl-zigzag > .dtl-bubble-row:nth-child(odd) .dtl-bubble-chat{flex-direction:row;} .dtl-stack > .dtl-bubble-row:nth-child(odd) .dtl-bubble-tail, .dtl-zigzag > .dtl-bubble-row:nth-child(odd) .dtl-bubble-tail{transform:none;} .dtl-stack > .dtl-bubble-row:nth-child(even), .dtl-zigzag > .dtl-bubble-row:nth-child(even){flex-direction:row-reverse;} .dtl-stack > .dtl-bubble-row:nth-child(even) .dtl-bubble-chat, .dtl-zigzag > .dtl-bubble-row:nth-child(even) .dtl-bubble-chat{flex-direction:row-reverse;} .dtl-stack > .dtl-bubble-row:nth-child(even) .dtl-bubble-tail, .dtl-zigzag > .dtl-bubble-row:nth-child(even) .dtl-bubble-tail{transform:scaleX(-1);} /* 본문 폭은 타입마다 다르게 고정한다(시안 8102:148692) — A 205 · B 216 · C 260. 어느 것이든 320 콘텐츠 폭 안에 아바타·꼬리까지 합쳐 들어간다(A 283 · B 294 · C 316). 행 안에서 남는 자리는 비워 둔다(좌형은 왼쪽에, 우형은 row-reverse 로 오른쪽에 붙는다). grow 0 이라 늘지 않고, shrink 1 + min-width 0 이라 자리가 더 좁은 표면에서만 줄어들어 넘치지 않는다. */ .dtl-bubble{flex:0 1 205px;width:205px;min-width:0;padding:12px;border-radius:var(--radius-100);background:var(--bg-gray);font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} .dtl-bubble-row--b .dtl-bubble{flex-basis:216px;width:216px;} /* ---------- Q&A ---------- */ .dtl-qa{display:flex;flex-direction:column;gap:24px;} .dtl-qa--b{gap:12px;} /* A형 — 시안 8054:95561. 어두운 Q 뱃지 + 질문 한 줄, 답변은 회색 상자, 아래는 점선 절취선. 답변 위 간격은 항목의 gap 이 만든다 — 뱃지가 없는 마크업도 같은 8px 이 된다. */ .dtl-qa__item{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px dashed var(--line-hairline);} .dtl-qa__head{display:flex;gap:8px;align-items:center;} .dtl-qa__badge{flex:none;padding:2px 8px;border-radius:var(--radius-100);background:var(--label-normal);font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:700;color:var(--label-inverse);} .dtl-qa__q{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-normal);} .dtl-qa__a{padding:12px;border-radius:var(--radius-100);background:var(--bg-tag);font-size:15px;line-height:1.6;letter-spacing:-0.56px;font-weight:500;color:var(--label-normal);} .dtl-wrap--faq > .dtl-qa{margin-top:16px;} .dtl-wrap--faq > .dtl-qa--b{margin-top:24px;} /* ---------- BubbleChat C형 (체험 수업) ---------- 아바타가 없고, 꼬리가 말풍선 아래 모서리에서 흘러나온다. 꼬리 반대쪽에는 시안대로 같은 폭(28px)의 여백을 둔다. 본문 폭은 260 고정이라 28+260+28 = 316 이 된다. */ .dtl-bubble-row--c .dtl-bubble-chat::after{content:"";flex:none;width:28px;} .dtl-bubble-tail--c{width:28px;height:32px;color:var(--base-surface);} .dtl-bubble--c{flex-basis:260px;width:260px;padding:16px 20px;border-radius:var(--radius-150);background:var(--base-surface);font-size:16px;line-height:1.6;letter-spacing:-0.64px;} /* 소프트형(강조 말풍선) — 라운드는 색과 무관하게 12px, 꼬리만 같은 색을 따라간다. 저장된 산출물이 쓰므로 남긴다. 시안(C-우)이 쓰는 것은 아래 --brand 다. */ .dtl-bubble--soft{background:var(--brand-soft);} .dtl-bubble-tail--soft{color:var(--brand-soft);} /* 브랜드형(강조 말풍선) — 시안 BubbleChat C-우: brand/normal 바탕 + label/black 잉크 */ .dtl-bubble--brand{background:var(--brand-normal);color:var(--label-black);} .dtl-bubble-tail--brand{color:var(--brand-normal);} /* ---------- PerforatedCard (체험 수업이 특별한 이유) ---------- 한 덩어리 카드를 절취선으로 나눈 모양. 테두리·라운드는 그룹이 갖고, 항목 사이만 점선으로 끊는다. */ .dtl-perf{display:flex;flex-direction:column;background:var(--bg-gray);border:1px solid var(--line-hairline);border-radius:var(--radius-100);overflow:hidden;} .dtl-perf__item{display:flex;gap:20px;align-items:center;padding:16px;} .dtl-perf__item + .dtl-perf__item{border-top:2px dashed var(--line-hairline);} .dtl-perf__media{flex:none;width:40px;height:40px;object-fit:contain;display:block;} .dtl-perf__texts{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;} .dtl-perf__head{display:flex;gap:6px;align-items:center;} .dtl-perf__title{font-size:18px;line-height:1.5;letter-spacing:-0.72px;font-weight:700;color:var(--label-normal);} .dtl-perf__desc{font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} /* ---------- PriceBanner (체험 수업 가격) ---------- */ .dtl-price{display:flex;flex-direction:column;gap:4px;align-items:center;padding:16px 20px;border:1px solid var(--line-card);border-radius:var(--radius-100);background:var(--brand-soft);text-align:center;} .dtl-price__head{display:flex;flex-direction:column;gap:4px;align-items:center;} .dtl-price__emoji{display:block;width:40px;height:40px;object-fit:contain;} .dtl-price__title{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-normal);} .dtl-price__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;} .dtl-price__was{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-subtle);text-decoration:line-through;} .dtl-price__arrow{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-normal);} .dtl-price__pair{display:inline-flex;gap:4px;align-items:center;} .dtl-price__now{font-size:22px;line-height:1.4;letter-spacing:-0.8px;font-weight:700;color:var(--brand-point);} .dtl-price__note{font-size:16px;line-height:1.6;letter-spacing:-0.64px;color:var(--label-normal);} /* ---------- 유튜브 임베드 ---------- */ .dtl-video{display:block;width:100%;border:0;border-radius:var(--radius-media);background:var(--brand-soft);} /* ===================== 템플릿 C (Figma 9012:92688) ===================== */ /* ---------- 래퍼 — 리스트 묶음의 세로 여백 16 (시안 A-03 py-16) ---------- */ .dtl-wrap--list{padding:16px 20px;} /* ---------- 썸네일 미디어 (훅 C) — 125px 정사각, 가운데 ---------- */ .dtl-media--thumb{width:125px;aspect-ratio:1/1;} /* ---------- 엠블럼 (쓰는 템플릿 없음) — 84px 장식 이모지. 저장된 문서를 위해 클래스만 둔다 (styleHref 는 덮어쓰기라 CSS 가 모든 마크업에 닿는다) ---------- */ .dtl-emblem{display:block;width:84px;height:84px;margin:0 auto;object-fit:contain;} .dtl-emblem.dtl-slot{border-radius:50%;} /* ---------- List G형 (쓰는 템플릿 없음) — 번호 칸(brand/strong) + 소프트 바탕 텍스트. 시안 List type=G. 저장된 문서를 위해 클래스만 둔다 ---------- */ .dtl-list-g{display:flex;align-items:stretch;background:var(--brand-soft);min-height:68px;border-radius:var(--radius-150);overflow:hidden;} .dtl-list-g__num{flex:none;width:64px;display:flex;align-items:center;justify-content:center;background:var(--brand-strong);font-size:22px;line-height:1.4;letter-spacing:-0.8px;font-weight:700;color:var(--label-inverse);} .dtl-list-g__text{flex:1;min-width:0;align-self:center;padding:8px 16px;font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:500;color:var(--label-normal);} /* ---------- BubbleChat Emoji형 (필요성 C) — 알약형 회색 말풍선, 아바타 대신 40px 이모지 ---------- 이모지는 faces.json(표정 풀)에서 고른 일러스트 . 비어 있을 때는 dtl-slot 자리표시. */ .dtl-bubble-e{display:flex;gap:12px;align-items:center;padding:16px 24px;border-radius:9999px;background:var(--bg-gray);} .dtl-bubble-e__emoji{flex:none;width:40px;height:40px;object-fit:contain;display:block;} .dtl-bubble-e__text{flex:1;min-width:0;font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-strong);text-align:center;} /* ---------- List Point형 (USP C) — 체크 이모지 + 라벨(state/pass) + 점선 + 제목/내용. 시안 List type=Point ---------- */ .dtl-list-point{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line-hairline);border-radius:var(--radius-150);background:var(--bg-gray);} .dtl-list-point__head{display:flex;gap:8px;align-items:center;} .dtl-list-point__icon{flex:none;width:28px;height:28px;object-fit:contain;display:block;} .dtl-list-point__label{font-size:18px;line-height:1.5;letter-spacing:-0.72px;font-weight:700;color:var(--state-pass);} /* 라벨 아래에 구분선을 두지 않는다(시안 9568:227943) — 템플릿은
를 넣지 않고, 저장된 산출물의
도 같은 모습이 되도록 숨긴다. 클래스는 지우지 않는다. */ .dtl-list-point__line{display:none;margin:0;border:0;border-top:2px dashed var(--line-hairline);} .dtl-list-point__title{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-normal);} .dtl-list-point__body{font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} /* ---------- 근거 카드 C형 (시의성 C) — 시안 9568:226453(StepWrap type=F) ---------- 헤어라인 카드 안에서 미디어가 위쪽에 맞붙고, 글은 회색 상자에 담긴다. --brand 라는 이름은 저장된 산출물이 쓰므로 이름만 그대로 두고 값은 이 규칙을 따른다. */ .dtl-evidence--brand{gap:0;padding:0;border:1px solid var(--line-hairline);border-radius:var(--radius-200);background:var(--base-surface);overflow:hidden;} .dtl-evidence--brand > [data-container="media"] .dtl-media, .dtl-evidence--brand > [data-container="media"] .dtl-slot, .dtl-evidence--brand > [data-container="media"] .dtl-video{border-radius:0;} .dtl-evidence--brand > .dtl-evidence__texts{padding:32px 20px;background:var(--bg-gray);} .dtl-evidence--brand .dtl-evidence__title{font-weight:700;} /* 시안 9568:226453 — C형 근거 문구는 title/18 Bold */ .dtl-evidence__texts{display:flex;flex-direction:column;gap:8px;text-align:center;} .dtl-evidence__body{font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);text-align:center;} /* ---------- TimeTable (커리큘럼 C) — "회차 | 수업" 표. 대신 div 라 편집기가 행을 블록으로 넣고 뺀다 ---------- */ .dtl-tt{border-radius:var(--radius-150);overflow:hidden;} .dtl-tt__head{display:flex;background:var(--label-normal);border-bottom:1px solid var(--line-hairline);} .dtl-tt__th{flex:1;min-width:0;padding:7px 16px;font-size:16px;line-height:1.6;letter-spacing:-0.64px;color:var(--label-inverse);} .dtl-tt__th:first-child{flex:none;width:70px;padding:7px 12px;} .dtl-tt__body{display:flex;flex-direction:column;} .dtl-tt__row{display:flex;align-items:stretch;background:var(--bg-gray);} .dtl-tt__no{flex:none;width:70px;padding:7px 12px;font-size:16px;line-height:1.6;letter-spacing:-0.64px;color:var(--label-normal);} .dtl-tt__cell{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center;padding:8px 12px;} .dtl-tt__title{font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:700;color:var(--label-normal);} .dtl-tt__desc{font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} /* ---------- List Emoji형 (추천 대상 C) — 회색 카드, 이모지 40 + 한 줄 ---------- 시안 List type=Emoji(9568:225588). 이모지가 글 왼쪽에 서는 가로 한 줄·왼쪽 정렬이고 글은 Medium 이다. */ .dtl-list-emoji{display:flex;gap:16px;align-items:center;padding:20px 20px 24px;border-radius:var(--radius-150);background:var(--bg-gray);} .dtl-list-emoji__emoji{flex:none;width:40px;height:40px;object-fit:contain;display:block;} .dtl-list-emoji__text{flex:1;min-width:0;font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:500;color:var(--label-normal);} /* ---------- Compare C형 (수업 후 변화 C) — 탭 머리 카드 둘. "후" 카드가 더 크고 앞으로 나온다 ---------- 전 카드는 오른쪽 모서리를 각지게 두고 후 카드 뒤로 물린다. 항목 블록(compare-item-x/ok)은 A형과 같다. 높이 관계: 후 카드는 언제나 전 카드보다 위아래 20px 씩 크다. 행을 stretch 로 두고 전 카드에 margin 20px 0 을 주면 행 높이 = max(전 내용 + 40, 후 내용, 208) 이 되어, 어느 쪽 내용이 길어져도 후 = 전 + 40 이 유지된다(전 내용이 길면 후가 따라 커지고, 후 내용이 길면 전이 가운데서 늘어난다). min-height 는 후 카드 208 하나만 둔다 — 전 카드 168 은 그 뺄셈으로 나온다. */ .dtl-compare--c{flex-direction:row;gap:0;align-items:stretch;} .dtl-compare--c .dtl-compare__card{flex:1;width:auto;min-width:0;margin:20px 0;display:flex;flex-direction:column;padding:0;border-radius:0;background:none;} .dtl-compare--c .dtl-compare__card--after{flex:none;width:55%;margin:0;min-height:208px;} .dtl-compare__tab{display:block;padding:6px 8px;border-radius:var(--radius-150) 0 0 0;background:var(--label-normal);font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:700;color:var(--label-inverse);text-align:center;} .dtl-compare__card--after .dtl-compare__tab{padding:5px 8px;border-radius:var(--radius-150) var(--radius-150) 0 0;background:var(--brand-point);color:var(--label-inverse);} .dtl-compare__panel{flex:1;display:flex;flex-direction:column;justify-content:center;padding:16px;border-radius:0 0 0 var(--radius-150);background:var(--bg-gray);} .dtl-compare__card--after .dtl-compare__panel{border:1px solid var(--brand-point);border-radius:0 0 var(--radius-150) var(--radius-150);background:var(--label-inverse);} .dtl-compare--c .dtl-compare__list{margin-top:0;} /* 전 항목은 caption-12 · label-subtle 로 한 단 작다. 아이콘 위 3px = (19.2 줄상자 - 14 아이콘) / 2 */ .dtl-compare--c .dtl-compare__card .dtl-compare__item{color:var(--label-subtle);} .dtl-compare--c .dtl-compare__card:not(.dtl-compare__card--after) .dtl-compare__item{font-size:12px;letter-spacing:-0.48px;} .dtl-compare--c .dtl-compare__card:not(.dtl-compare__card--after) .dtl-compare__item > svg{margin-top:3px;} .dtl-compare--c .dtl-compare__card--after .dtl-compare__item{color:var(--label-normal);} .dtl-compare--c .dtl-compare__item > svg.dtl-i-ok{color:var(--brand-point);} /* ---------- StepWrap D형 (수업 결과물 C) — 16:9 미디어 위, 회색 텍스트 카드 아래. 시안 StepWrap type=D ---------- */ .dtl-stepwrap--d{align-items:stretch;gap:0;padding:0;border:1px solid var(--line-hairline);border-radius:var(--radius-150);background:var(--base-surface);overflow:hidden;text-align:center;} .dtl-stepwrap--d > .dtl-media,.dtl-stepwrap--d > .dtl-slot{border-radius:0;} .dtl-stepwrap__card{display:flex;flex-direction:column;gap:12px;align-items:center;padding:24px 20px;background:var(--bg-gray);} .dtl-stepwrap__caption{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-normal);} .dtl-stepwrap__desc{font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} /* ---------- 리뷰 카드 C형 (수강 후기 C) — 흰 카드(회색 섹션 위), 이모지 + 작성자 · 별점 · 점선 · 본문. 시안 Card type=C ---------- */ .dtl-review--c{gap:12px;background:var(--bg-gray);box-shadow:none;} .dtl-review__who{display:flex;gap:8px;align-items:center;min-width:0;} .dtl-review__emoji{flex:none;width:32px;height:32px;object-fit:contain;display:block;} .dtl-review__name{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-normal);} .dtl-review--c .dtl-review__body{margin-top:0;} /* ---------- 선생님 카드 C형 (써클형) — 원형 사진(포인트 테두리) + 이름 + 소개 + 경력 ---------- */ .dtl-teacher--c{gap:16px;align-items:center;padding:24px 20px;text-align:center;} .dtl-teacher__avatar{flex:none;width:146px;height:146px;padding:10px;border:2px solid var(--brand-point);border-radius:50%;} .dtl-teacher__photo{display:block;width:100%;height:100%;aspect-ratio:1/1;border-radius:50%;object-fit:cover;} .dtl-teacher__texts{display:flex;flex-direction:column;gap:8px;align-self:stretch;} .dtl-teacher__label{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--brand-point);} .dtl-teacher--c .dtl-teacher__careers{margin-top:0;align-self:stretch;text-align:left;} /* ---------- Q&A C형 (FAQ C) — 어두운 질문 머리 + 흰 답변 카드. 시안 Q&A 카드형. 답변 카드는 최소 높이 없이 내용 높이만 갖는다. ---------- */ .dtl-qac{border-radius:var(--radius-150);overflow:hidden;} .dtl-qac__q{padding:8px 22px;background:var(--label-normal);font-size:15px;line-height:1.6;letter-spacing:-0.6px;font-weight:700;color:var(--label-inverse);text-align:center;} .dtl-qac__a{padding:16px;background:var(--base-surface);font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} /* ---------- 텍스트 카드 (수업 자료 C) — 회색 카드, 제목 + 본문 가운데 ---------- */ .dtl-textcard{display:flex;flex-direction:column;gap:12px;align-items:center;padding:32px 20px;border-radius:var(--radius-150);background:var(--bg-gray);text-align:center;} .dtl-textcard__title{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-normal);} .dtl-textcard__body{font-size:16px;line-height:1.6;letter-spacing:-0.64px;color:var(--label-normal);} /* ---------- 작은 이모지 자리표시 — 28~40px 안에 힌트("이모지")가 들어가도록 글자를 줄이고 원형으로 ---------- */ .dtl-bubble-e__emoji.dtl-slot,.dtl-list-emoji__emoji.dtl-slot,.dtl-review__emoji.dtl-slot,.dtl-list-point__icon.dtl-slot{border-radius:50%;font-size:9px;letter-spacing:-0.36px;} /* 템플릿 D 테마 이모지 자리표시(24~56px) — 시안 MediaSlot 은 라운드 12 사각이라 모양은 두고 글자만 줄인다. 24px 자리는 힌트가 넘쳐 감춘다 */ .dtl-step__emoji.dtl-slot,.dtl-emojicard__emoji.dtl-slot{font-size:9px;letter-spacing:-0.36px;} .dtl-list-point__emoji.dtl-slot{overflow:hidden;font-size:0;} /* 말풍선 아바타 자리표시(48px) — 힌트 "일러스트"·"이모지"가 들어가게 글자만 줄인다. 모양은 시안대로 라운드 12 사각 그대로 */ .dtl-bubble-row__avatar.dtl-slot{font-size:9px;letter-spacing:-0.36px;} /* 선생님 C 사진 자리표시 — 컨테이너(.dtl-teacher__avatar)가 원이라 슬롯도 원. .dtl .dtl-slot 이 --radius-media 를 주므로 같은 특정도(두 클래스)로 뒤에서 덮는다. */ .dtl-teacher__photo.dtl-slot{border-radius:50%;} /* ===== 템플릿 D 컴포넌트 (09.21 시안 · Figma 9770:159659) — 테마 이모지(objects 풀) 슬롯 ===== */ /* Badge — theme/strong 알약(Point 01, 리스트 Point-Emoji) */ .dtl-badge--strong{background:var(--brand-strong);} /* List Point-Emoji (usp-d) — 회색 카드(테두리 없음) · 포인트 뱃지 · [이모지 24 + 제목 18] · 내용 16. 이모지는 제목 첫 줄에 맞춰 2px 내려 앉는다 */ .dtl-list-point--emoji{border:0;} .dtl-list-point--emoji > .dtl-badge{align-self:flex-start;} .dtl-list-point__texts{display:flex;flex-direction:column;gap:8px;} .dtl-list-point__row{display:flex;gap:6px;align-items:flex-start;} .dtl-list-point__emoji{flex:none;width:24px;height:24px;margin-top:2px;object-fit:contain;display:block;} .dtl-list-point--emoji .dtl-list-point__title{flex:1;min-width:0;font-size:18px;line-height:1.5;letter-spacing:-0.72px;} .dtl-list-point--emoji .dtl-list-point__body{font-size:16px;letter-spacing:-0.64px;} /* STEP D (how-d) — 위에 붙은 노랑 탭(STEP 01) + 회색 카드(왼쪽 위 모서리만 각). 카드 안은 [연노랑 상자 안 이모지 28] + [시간 알약 · 제목 16 · 설명 15] */ .dtl-step--d{display:flex;flex-direction:column;align-items:flex-start;} .dtl-step__tab{display:inline-flex;align-items:center;padding:1px 12px;border-radius:var(--radius-100) var(--radius-100) 0 0;background:var(--brand-normal);font-size:14px;line-height:1.6;letter-spacing:-0.56px;font-weight:700;color:var(--label-inverse);white-space:nowrap;} .dtl-step__card{display:flex;gap:12px;align-items:flex-start;align-self:stretch;padding:20px;border-radius:0 var(--radius-150) var(--radius-150) var(--radius-150);background:var(--bg-gray);} .dtl-step__emoji-box{flex:none;display:flex;padding:12px;border-radius:var(--radius-150);background:var(--brand-soft);} .dtl-step__emoji{flex:none;width:28px;height:28px;object-fit:contain;display:block;} .dtl-step__texts{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start;} /* 소요 시간은 .dtl-badge 가 아니라 .dtl-step__time 에 둔다 — 편집기가 .dtl-badge 를 자동 번호 자리로 보고 글 자리에서 뺀다(variant-switch). 모양만 bg/tag 알약·13 Bold subtle */ .dtl-step--d .dtl-step__time{flex:none;display:inline-flex;align-items:center;padding:0 8px;border-radius:64px;background:var(--bg-tag);font-size:13px;letter-spacing:-0.52px;} .dtl-step--d .dtl-step__title{margin-top:0;font-size:16px;line-height:1.6;letter-spacing:-0.64px;color:var(--label-normal);} .dtl-step--d .dtl-step__body{margin-top:0;font-size:15px;letter-spacing:-0.6px;} /* 이모지 카드 (material-d · relevance-d) — 연노랑 띠(이모지 48, --lg 는 56) 위 · 회색 본문 카드 아래. 제목 16 Bold · 본문 15 · (D 근거 카드만) 출처 13 가운데 */ .dtl-emojicard{display:flex;flex-direction:column;border-radius:var(--radius-150);overflow:hidden;} .dtl-emojicard__band{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--brand-soft);} .dtl-emojicard__emoji{flex:none;width:48px;height:48px;object-fit:contain;display:block;} .dtl-emojicard--lg .dtl-emojicard__emoji{width:56px;height:56px;} .dtl-emojicard__texts{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:20px 20px 24px;background:var(--bg-gray);} .dtl-emojicard__title{font-size:16px;line-height:1.6;letter-spacing:-0.64px;font-weight:700;color:var(--label-normal);} .dtl-emojicard__body{font-size:15px;line-height:1.6;letter-spacing:-0.6px;color:var(--label-normal);} .dtl-emojicard__source{margin-top:8px;align-self:stretch;text-align:center;} /* 리뷰 카드 D (review-d) — 별점 20 · 본문 15 · [연노랑 원 48 안 표정 이모지 28 + 작성자 16 Bold]. C 처럼 회색 카드에 그림자 없음 */ .dtl-review--d{gap:20px;background:var(--bg-gray);box-shadow:none;} .dtl-review--d .dtl-review__stars svg{width:20px;height:20px;} .dtl-review--d .dtl-review__body{margin-top:-8px;} .dtl-review__avatar{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--brand-soft);} .dtl-review--d .dtl-review__emoji{width:28px;height:28px;} /* ===== [A] 산출물 복사 끝 ===== */