/* ═════════════════════════════════════════════════════════════ 미디어 상세 확정본 — D1(도식 강화형) 기반 변경점 ① 좌측 목차 제거 → 본문을 좌측까지 확장 ② 상단 읽기 진행바 하늘색 강화 ③ 우측 '무료 진단 신청' 화살표 왕복 모션 ④ 시각화 모듈 6종 추가(요약·체크리스트·대비2열·예외스택·예외표·강조밴드) ⑤ 모든 블록을 data-mod 모듈로 감싸 관리자에서 숨김/표시 고유 접두 v1-(기존 도식) / mf-(확정본 추가분) ───────────────────────────────────────────────────────────── */ /* ── ① 1단 레이아웃 — 좌측 CTA 패널 제거 ──────────────── 좌측 패널이 하던 일(진단·견적 CTA)은 스티키 카테고리 탭바로, '이 글의 데이터'는 본문 맨 아래 가로형 카드로 옮겼습니다. ★ 2026-08-01 §1 공통 그리드 — 폭 기준을 ux-common.css 로 통일. 좌측선 = 로고 시작점(--ux-padL:32px) / 우측선 = 햄버거 3선 끝점(--ux-padR:45px) 컨테이너 = --ux-max(1520px, .gnb-in 과 동일) ⛔ padding 단축 지정 금지 — 좌우가 지워져 본문이 화면 끝에 붙는다. */ .mdf .md-wrap{ max-width:var(--ux-max); padding-left:var(--ux-padL); padding-right:var(--ux-padR); } .mdf .md-grid{ display:block; padding-top:52px; } .mdf .md-main{ max-width:none; } .mdf #body > p, .mdf #body > h2, .mdf #body > ul, .mdf #body > ol{ max-width:none; } /* ── ①-b 헤더 — 헤드라인 위 숨통 ────────────────────── */ /* ★2026-08-04 §6 — 178px 하드코딩을 공통 토큰으로(176px). 목록·포트폴리오 히어로와 같은 값을 보므로 세 페이지의 상단 리듬이 함께 움직인다. */ .mdf .md-head{ padding-top:var(--hero-space-top); } .mdf .md-meta{ margin-top:38px; } .mdf .md-head h1{ margin-top:28px; max-width:none; } .mdf .md-lead{ max-width:none; } /* ── ①-c 스티키 카테고리 탭바 (네비 76px 바로 아래) ──── 좌 = 본문 h2 목차(챕터 순서) / 우 = CTA 2종(색으로 구분) */ .mf-tabs{ position:sticky; top:76px; z-index:70; margin-top:30px; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .mf-tabs-in{ display:flex; align-items:center; gap:24px; } .mf-tabnav{ flex:1 1 auto; min-width:0; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .mf-tabnav::-webkit-scrollbar{ display:none; } .mf-tabnav a{ position:relative; flex:0 0 auto; padding:17px 12px 16px; font-size:14px; font-weight:500; line-height:1.2; letter-spacing:-.024em; color:var(--g500); white-space:nowrap; transition:color .25s var(--ease); } /* ★§7 — 밑줄은 '좌→우로 그어진다'. transform-origin 이 없으면 가운데서 양쪽으로 퍼져 규칙이 깨진다. 빠질 때는 오른쪽으로 걷힌다. */ .mf-tabnav a::after{ content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--ease); } .mf-tabnav a:not(.on)::after{ transform-origin:right center; } .mf-tabnav a i{ font-style:normal; margin-right:6px; font-size:11px; font-weight:700; letter-spacing:.02em; color:#B4BECE; font-variant-numeric:tabular-nums; transition:color .25s var(--ease); } .mf-tabnav a:hover{ color:var(--g700); } .mf-tabnav a.on i{ color:var(--blue); } .mf-tabnav a.on{ color:var(--blue-d); font-weight:600; } .mf-tabnav a.on::after{ transform:scaleX(1); } .mf-tabcta{ flex:0 0 auto; display:flex; align-items:center; gap:8px; } .mf-tabcta a{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border-radius:10px; font-size:13.5px; font-weight:600; letter-spacing:-.024em; white-space:nowrap; transition:background .3s var(--ease), border-color .3s, color .3s, transform .45s var(--ease); } .mf-tabcta .c1{ background:var(--blue); color:#fff; } .mf-tabcta .c1:hover{ background:var(--blue-d); transform:translateY(-2px); } /* ★화살표는 .ux-ar(공통, 1~2회 왕복)로 통일 — 개별 translateX 규칙 제거(§7) */ .mf-tabcta .c2{ background:var(--tint); color:var(--blue-d); border:1px solid var(--tint-b); } .mf-tabcta .c2:hover{ background:#fff; border-color:var(--blue); transform:translateY(-2px); } /* ── ①-d 모바일 하단 고정 CTA (탭바에서 빠진 버튼) ───── */ .mf-mcta{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:75; gap:9px; padding:10px 16px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95); backdrop-filter:blur(14px); border-top:1px solid var(--line); } .mf-mcta a{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:48px; border-radius:12px; font-size:15px; font-weight:600; letter-spacing:-.024em; } .mf-mcta .c1{ background:var(--blue); color:#fff; } .mf-mcta .c2{ background:var(--tint); color:var(--blue-d); border:1px solid var(--tint-b); } /* ── ①-e '이 글의 데이터' — 본문 하단 가로형 ──────────── */ .mf-data{ margin-top:72px; padding:22px 26px 6px; border:1px solid var(--line); border-radius:16px; background:var(--bg2); } .mf-data .k{ font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--g500); } .mf-data dl{ margin:12px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 30px; } .mf-data .r{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); } .mf-data dt{ font-size:13px; font-weight:500; color:var(--g500); flex-shrink:0; } .mf-data dd{ margin:0; font-size:13.5px; font-weight:600; color:var(--ink); text-align:right; line-height:1.5; } .mf-data dd.acc{ color:var(--blue-d); } @media(max-width:900px){ /* ⛔padding-top:146px 삭제 — 토큰이 1080px 이하에서 138px 로 이미 내려간다 */ .mf-tabcta{ display:none; } /* 모바일 탭바엔 목차만 */ .mf-mcta{ display:flex; } /* 고정바에 가려지지 않게 하는 보정은 스타일 맨 끝 블록에 있습니다 (여기 두면 뒤에 오는 .mf-adm / .md-cta-zone 규칙에 덮임) */ } @media(max-width:820px){ /* ★좌우 패딩은 --ux-padL/R 이 관리한다(ux-common.css). ux-common 정정(2026-07-30)으로 모바일에서도 32/45 를 유지하고, ≤380px 에서만 우측을 32px 로 완화한다 — 5개 페이지 공통 정책. ⛔여기서 padding 단축으로 다시 쓰면 그 정책이 이 페이지만 끊긴다. */ .mdf .md-grid{ padding-top:36px; } /* ⛔padding-top:128px 삭제 — 640px 이하에서 토큰이 118px 로 내려간다 */ .mdf .md-meta{ margin-top:30px; } .mdf .md-head h1{ margin-top:22px; } .mf-tabnav a{ padding:15px 11px 14px; font-size:13.5px; } .mf-data{ margin-top:52px; padding:20px 20px 4px; } .mf-data dl{ grid-template-columns:1fr; } } /* ── ② 읽기 진행바 — 위닝피피티(.sprog) 방식 ────────────── 단색 1개 · 3px · 그림자/그라데이션 없음 · 트랙 투명 · 항상 표시 z-index는 .gnb(90)보다 위여야 함 — 이전엔 60이라 네비에 가려 안 보였음 */ .mdf .mx-prog{ height:3px; z-index:100; background:transparent; } .mdf .mx-prog i{ background:var(--blue); border-radius:0; box-shadow:none; transition:width .08s linear; } @media(prefers-reduced-motion:reduce){ .mdf .mx-prog i{ transition:none; } } .mf-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ── ②-b 타이포 · 섹션 여백 ─────────────────────────────── */ .mdf .mx-body{ line-height:1.9; letter-spacing:-.022em; } .mdf .mx-body > * + *{ margin-top:26px; } /* 섹션 타이틀 확대 */ .mdf .mx-body h2{ margin-top:92px; font-size:33px; line-height:1.36; letter-spacing:-.032em; } .mdf .mx-body h3{ margin-top:52px; font-size:22px; letter-spacing:-.026em; } /* ★타이틀 ↔ 바로 아래 본문/도식은 붙여서 한 덩어리로 읽히게 (#body가 id라 [data-mod] 규칙보다 특이도를 높여 둬야 먹는다) */ .mdf #body > h2 + *, .mdf #body > h3 + *{ margin-top:16px; } .mdf #body > h2 + [data-mod], .mdf #body > h3 + [data-mod]{ margin-top:24px; } /* 도식·강조 블록 — 글과의 간격은 넉넉히 ★ vs·stack은 클래스 없는 래퍼에 싸여 있어 클래스 셀렉터로는 안 걸린다. 모듈은 전부 data-mod를 가지므로 속성 기준으로 잡을 것 */ .mdf #body > [data-mod], .mdf #body > blockquote, .mdf #body > figure{ margin-top:38px; margin-bottom:38px; } /* 시각화 박스끼리 '보이는 상태로' 연달아 올 때는 좁게(.mf-tight = 스크립트가 부여) */ .mdf #body > [data-mod].mf-tight{ margin-top:20px; } /* 블록 바로 뒤에 h2가 오면 이중 여백이 되지 않게 */ .mdf #body > * + h2{ margin-top:92px; } /* '도입 결과 요약' 박스 ↔ 본문 첫 문단 사이 */ .mdf .md-rb{ margin-top:44px; margin-bottom:64px; } .mdf .md-rb + .mx-body{ margin-top:0; } .mdf .md-rel-zone{ padding-top:132px; } .mdf .md-cta-zone{ padding-top:112px; padding-bottom:140px; } @media(max-width:820px){ .mdf .mx-body h2, .mdf #body > * + h2{ margin-top:64px; font-size:26px; } .mdf .mx-body h3{ font-size:19.5px; } .mdf #body > .v1-fig, .mdf #body > .mf-read, .mdf #body > .mf-chk, .mdf #body > .mf-vs, .mdf #body > .mf-stack, .mdf #body > .mf-table, .mdf #body > .mf-band, .mdf #body > blockquote, .mdf #body > figure{ margin-top:32px; margin-bottom:32px; } .mdf .md-rb{ margin-top:32px; margin-bottom:44px; } .mdf .md-rel-zone{ padding-top:88px; } .mdf .md-cta-zone{ padding-top:76px; padding-bottom:104px; } } /* ── ③ 화살표 모션 — §7 공통 규칙으로 이관 ──────────────── 이전엔 .md-card .go span 에 animation:infinite 를 걸었습니다. §7 "과도하게 반복하지 말 것"에 어긋나고, 좌측 패널을 없앤 뒤로는 해당 셀렉터가 붙을 요소도 없어 통째로 걷어냈습니다. → 화살표는 전부 ux-common 의 .ux-ar(1~2회 왕복)로 통일. */ /* ═════ 기존 D1 도식 ═════════════════════════════════════ */ .v1-fig{ margin-top:34px; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; } .v1-fig-hd{ display:flex; align-items:center; gap:9px; padding:14px 20px; border-bottom:1px solid var(--line); background:var(--bg2); font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--g700); } .v1-fig-hd .n{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; background:var(--blue); color:#fff; font-size:11px; font-weight:700; } .v1-fig-bd{ padding:24px 22px; } .v1-fig-cap{ padding:0 22px 18px; font-size:12.5px; line-height:1.65; color:var(--g500); } /* ① 단계 레일 */ .v1-rail{ display:grid; grid-template-columns:repeat(11,1fr); gap:5px; } .v1-rail .st{ position:relative; border-radius:8px; padding:12px 5px 11px; text-align:center; background:var(--bg2); border:1px solid var(--line); } .v1-rail .st .i{ font-size:10.5px; font-weight:700; color:var(--g500); font-variant-numeric:tabular-nums; } .v1-rail .st .t{ margin-top:6px; font-size:11px; font-weight:600; line-height:1.4; color:var(--g700); word-break:keep-all; } .v1-rail .st.cut{ background:repeating-linear-gradient(-45deg,#F4F6FA 0 6px,#EDF0F6 6px 12px); border-style:dashed; } .v1-rail .st.cut .t{ color:#A8B0BF; text-decoration:line-through; text-decoration-thickness:1px; } .v1-rail .st.keep{ background:var(--tint); border-color:#BFD6FF; } .v1-rail .st.keep .i{ color:var(--blue-d); } .v1-rail .st.keep .t{ color:var(--blue-d); } .v1-lg{ margin-top:16px; display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:var(--g500); } .v1-lg i{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; } .v1-lg .a i{ background:var(--tint); border:1px solid #BFD6FF; } .v1-lg .b i{ background:#EDF0F6; border:1px dashed #C7CFDD; } /* ② 비포/애프터 바 */ .v1-ba{ display:grid; gap:14px; } .v1-ba .row{ display:grid; grid-template-columns:74px 1fr 92px; align-items:center; gap:14px; } .v1-ba .lb{ font-size:12.5px; font-weight:600; color:var(--g500); } .v1-ba .tk{ height:34px; border-radius:8px; background:var(--bg2); overflow:hidden; } .v1-ba .fl{ height:100%; border-radius:8px; background:#D7DEEA; width:0; transition:width 1.1s var(--ease); } .v1-ba .row.hi .fl{ background:linear-gradient(90deg,var(--blue),var(--blue-l)); } .v1-ba .row.in .fl.w100{ width:100%; } .v1-ba .row.in .fl.w5{ width:5%; } .v1-ba .vl{ text-align:right; font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--g700); font-variant-numeric:tabular-nums; } .v1-ba .row.hi .vl{ color:var(--blue-d); } /* ③ 예외 분기 */ .v1-br{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .v1-br .c{ border:1px solid var(--line); border-radius:13px; padding:18px 16px; background:var(--bg2); } .v1-br .c .hd{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .v1-br .c .nm{ font-size:14px; font-weight:600; color:var(--ink); } .v1-br .c .ct{ font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--blue-d); font-variant-numeric:tabular-nums; } .v1-br .c .tk{ margin-top:11px; height:5px; border-radius:3px; background:#E3E8F1; overflow:hidden; } .v1-br .c .tk i{ display:block; height:100%; background:var(--blue); width:0; transition:width .9s var(--ease); } .v1-br .c.in .tk i{ width:var(--w); } .v1-br .c p{ margin-top:12px; font-size:12.5px; line-height:1.68; color:var(--g500); } .v1-br .c.warn .ct{ color:#B8432E; } .v1-br .c.warn .tk i{ background:#B8432E; } /* ④ 타임라인 */ .v1-tl{ position:relative; padding-left:22px; } .v1-tl::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line); } .v1-tl .w{ position:relative; } .v1-tl .w + .w{ margin-top:20px; } .v1-tl .w::before{ content:''; position:absolute; left:-22px; top:5px; width:12px; height:12px; border-radius:50%; background:#fff; border:2.5px solid var(--blue); } .v1-tl .wk{ font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--blue); } .v1-tl .ti{ margin-top:5px; font-size:14.5px; font-weight:600; color:var(--ink); } .v1-tl .ds{ margin-top:6px; font-size:13px; line-height:1.7; color:var(--g500); } /* 본문 안 요약 스트립 */ .v1-key{ margin-top:26px; display:flex; align-items:flex-start; gap:12px; border-left:3px solid var(--blue); background:var(--tint); border-radius:0 12px 12px 0; padding:16px 20px; font-size:15.5px; line-height:1.7; color:var(--ink); font-weight:500; } .v1-key .k{ flex-shrink:0; font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--blue-d); padding-top:5px; } /* ═════ ④ 추가 시각화 모듈 ═══════════════════════════════ */ /* [A] 다크 요약 박스 — 이 글을 읽으면 알 수 있는 것 */ .mf-read{ position:relative; overflow:hidden; margin-top:28px; border-radius:16px; background:var(--ink); color:#fff; padding:24px 26px; display:flex; align-items:flex-start; gap:14px; } .mf-read::after{ content:''; position:absolute; right:-60px; top:-70px; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle,rgba(77,162,255,.30),transparent 70%); } .mf-read .em{ position:relative; z-index:1; flex-shrink:0; font-size:20px; line-height:1.55; } .mf-read .tx{ position:relative; z-index:1; font-size:15px; line-height:1.76; color:rgba(255,255,255,.72); } .mf-read .tx b{ display:block; margin-bottom:5px; font-size:15.5px; font-weight:600; color:#fff; } /* [B] 체크리스트 카드 — 반드시 적는 세 가지 */ .mf-chk{ margin-top:30px; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; } .mf-chk .hd{ display:flex; align-items:center; gap:9px; padding:15px 20px; border-bottom:1px solid var(--line); background:var(--bg2); font-size:13.5px; font-weight:600; color:var(--ink); } .mf-chk ul{ list-style:none; margin:0; padding:6px; } .mf-chk li{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px; font-size:14.5px; line-height:1.72; color:var(--g500); border-radius:10px; transition:background .25s var(--ease); } .mf-chk li:hover{ background:var(--bg2); } .mf-chk li .ic{ flex-shrink:0; width:22px; height:22px; border-radius:50%; margin-top:3px; background:var(--tint); color:var(--blue-d); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; } .mf-chk li b{ font-weight:600; color:var(--ink); } .mf-chk .tip{ display:flex; align-items:flex-start; gap:10px; margin:0 6px 8px; padding:13px 14px; border-radius:10px; background:var(--tint); font-size:13.5px; line-height:1.7; color:var(--g700); } .mf-chk .tip b{ font-weight:600; color:var(--blue-d); } /* [C] 규칙 / 모델 대비 2열 + 경고 밴드 */ .mf-vs{ margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:14px; } .mf-vs .c{ border:1px solid var(--line); border-radius:14px; padding:19px 20px; background:#fff; } .mf-vs .c .hd{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink); } .mf-vs .c ul{ margin-top:13px; padding-left:0; list-style:none; } .mf-vs .c li{ position:relative; padding-left:16px; font-size:14px; line-height:1.7; color:var(--g500); } .mf-vs .c li + li{ margin-top:8px; } .mf-vs .c li::before{ content:''; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background:#C7CFDD; } .mf-vs .c.ok{ background:var(--tint); border-color:#CFE0FF; } .mf-vs .c.ok li{ color:var(--g700); } .mf-vs .c.ok li::before{ background:var(--blue); } .mf-note{ margin-top:14px; display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:13px; background:#fff; padding:16px 18px; font-size:14px; line-height:1.72; color:var(--g500); } .mf-note .em{ flex-shrink:0; font-size:17px; line-height:1.6; } .mf-note b{ font-weight:600; color:var(--ink); } .mf-note.warn{ background:#FFF6F3; border-color:#F5D9D0; } .mf-note.tint{ background:var(--tint); border-color:#CFE0FF; color:var(--g700); } .mf-note.tint b{ color:var(--blue-d); } /* [D] 예외 3종 세로 스택 */ .mf-stack{ margin-top:30px; display:grid; gap:12px; } .mf-stack .s{ display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; border:1px solid var(--line); border-radius:14px; background:#fff; padding:18px 20px; transition:border-color .3s var(--ease), transform .45s var(--ease); } .mf-stack .s:hover{ border-color:#BFD6FF; transform:translateX(3px); } .mf-stack .s .n{ width:44px; height:44px; border-radius:12px; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:19px; } .mf-stack .s .t{ display:flex; align-items:baseline; gap:8px; font-size:15.5px; font-weight:600; color:var(--ink); } .mf-stack .s .t .ct{ font-size:15.5px; font-weight:700; color:var(--blue-d); font-variant-numeric:tabular-nums; } .mf-stack .s .d{ margin-top:7px; font-size:14px; line-height:1.72; color:var(--g500); } .mf-stack .s .tag{ display:inline-block; margin-top:10px; font-size:11.5px; font-weight:600; color:var(--blue-d); background:var(--tint); border-radius:6px; padding:4px 9px; } .mf-stack .s.warn .t .ct{ color:#B8432E; } .mf-stack .s.warn .tag{ color:#B8432E; background:#FCEDE9; } /* [E] 예외 대응 규칙 표 */ .mf-tbl-wrap{ overflow-x:auto; } .mf-tbl{ width:100%; border-collapse:collapse; min-width:520px; } .mf-tbl th, .mf-tbl td{ padding:12px 10px; border-bottom:1px solid var(--line); font-size:14px; text-align:left; line-height:1.65; } .mf-tbl th{ font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--g500); background:var(--bg2); } .mf-tbl td{ color:var(--g500); } .mf-tbl td:first-child{ font-weight:600; color:var(--ink); white-space:nowrap; } .mf-tbl td.ct{ text-align:right; font-weight:700; color:var(--blue-d); font-variant-numeric:tabular-nums; white-space:nowrap; } .mf-tbl tr:last-child td{ border-bottom:0; } .mf-tbl tr.warn td.ct{ color:#B8432E; } /* [F] 다크 강조 밴드 */ .mf-band{ margin-top:34px; border-radius:18px; background:var(--ink); color:#fff; padding:36px 38px 34px; position:relative; overflow:hidden; } .mf-band::after{ content:''; position:absolute; left:-40px; bottom:-70px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(46,111,242,.30),transparent 70%); } .mf-band .q{ position:relative; z-index:1; font-size:clamp(20px,2vw,26px); font-weight:600; line-height:1.55; letter-spacing:-.028em; } .mf-band .q em{ font-style:normal; color:var(--blue-l); } .mf-band .s{ position:relative; z-index:1; margin-top:15px; font-size:14.5px; line-height:1.72; color:rgba(255,255,255,.62); } /* ═════ ⑤ 모듈 표시/숨김 + 관리자 패널 ═══════════════════ */ [data-mod].mf-off{ display:none !important; } .mf-adm{ position:fixed; right:18px; bottom:18px; z-index:90; display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 15px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--g700); box-shadow:0 8px 24px rgba(10,28,62,.12); transition:border-color .25s, color .25s, transform .4s var(--ease); } .mf-adm:hover{ border-color:var(--blue); color:var(--blue-d); transform:translateY(-2px); } .mf-adm .ic{ font-size:14px; line-height:1; } .mf-adm .cnt{ font-size:11px; font-weight:700; color:var(--blue-d); background:var(--tint); border-radius:999px; padding:2px 7px; font-variant-numeric:tabular-nums; } .mf-panel{ position:fixed; right:18px; bottom:66px; z-index:91; width:330px; max-height:min(70vh,560px); overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 22px 60px rgba(10,28,62,.20); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; } .mf-panel.open{ opacity:1; visibility:visible; transform:translateY(0); } .mf-panel .ph{ padding:16px 18px 13px; border-bottom:1px solid var(--line); } .mf-panel .ph .k{ font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--blue); } .mf-panel .ph .t{ margin-top:6px; font-size:14.5px; font-weight:600; color:var(--ink); } .mf-panel .ph .d{ margin-top:6px; font-size:12px; line-height:1.6; color:var(--g500); } .mf-panel .grp{ padding:11px 12px 4px; font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--g500); } .mf-panel .it{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 8px; padding:10px 10px; border-radius:10px; cursor:pointer; transition:background .22s var(--ease); } .mf-panel .it:hover{ background:var(--bg2); } .mf-panel .it .nm{ font-size:13.5px; font-weight:500; color:var(--g700); line-height:1.45; } .mf-panel .it .sub{ margin-top:3px; font-size:11.5px; color:var(--g500); } .mf-sw{ flex-shrink:0; width:38px; height:22px; border-radius:999px; background:#D7DEEA; position:relative; transition:background .25s var(--ease); } .mf-sw::after{ content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(10,28,62,.25); transition:transform .25s var(--ease); } .mf-panel .it.on .mf-sw{ background:var(--blue); } .mf-panel .it.on .mf-sw::after{ transform:translateX(16px); } .mf-panel .it.on .nm{ color:var(--ink); font-weight:600; } .mf-panel .pf{ position:sticky; bottom:0; background:#fff; display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); } .mf-panel .pf button{ flex:1; border:1px solid var(--line); background:#fff; border-radius:9px; padding:9px 10px; font-size:12.5px; font-weight:600; color:var(--g700); cursor:pointer; transition:border-color .25s, color .25s; } .mf-panel .pf button:hover{ border-color:var(--blue); color:var(--blue-d); } @media(max-width:900px){ .v1-rail{ grid-template-columns:repeat(6,1fr); } .v1-br{ grid-template-columns:1fr; } .v1-ba .row{ grid-template-columns:62px 1fr 80px; gap:10px; } .mf-vs{ grid-template-columns:1fr; } .mf-band{ padding:28px 24px 26px; } .mf-panel{ width:calc(100vw - 36px); } } /* ═══════════════════════════════════════════════════════════ ★ 사장님 피드백 반영분 (12건) — 아래는 전부 '오버라이드 블록' 위쪽 원본 규칙을 고치지 않고 뒤에서 덮어씁니다. ═══════════════════════════════════════════════════════════ */ /* ── 공통: 한국어 줄바꿈 도구 ──────────────────────────── .mf-br = 의미 단위 강제 개행(모바일에선 해제) .mf-nb = 쪼개면 안 되는 명사구 */ .mf-br{ display:inline; } .mf-nb{ white-space:nowrap; } .mdf .mf-read .tx, .mdf .mf-band .q, .mdf .mf-band .s, .mdf .mx-cta h3, .mdf .mx-cta p, .mdf .v1-key, .mdf .mf-chk .tip, .mdf .mf-note{ word-break:keep-all; } @media(max-width:820px){ .mf-br{ display:none; } /* 강제 개행만 해제 — .mf-nb(명사구)는 모바일에서도 유지 */ } /* ═════ ① 스티키 카테고리바 5안 — body[data-tb="1~5"] ═════ 공통 유지: sticky top:76px · 스크롤 스파이 · ≤900px에선 탭바 CTA 숨김(하단 고정바 .mf-mcta로 분리) · 라벨은 data-tab ───────────────────────────────────────────────────── */ .mf-tabs{ transition:background .45s var(--ease), border-color .45s, box-shadow .45s var(--ease); } .mf-tabnav a b{ font-weight:inherit; } .mf-gauge{ display:none; } /* TB1 · 밑줄 탭(현행 개선형) — 밑줄을 굵히고 활성 탭에 옅은 바탕 */ body[data-tb="1"] .mf-tabnav a{ padding:18px 13px 17px; border-radius:8px 8px 0 0; } body[data-tb="1"] .mf-tabnav a::after{ height:2.5px; border-radius:2px 2px 0 0; } body[data-tb="1"] .mf-tabnav a.on{ background:linear-gradient(180deg,rgba(234,242,255,0),rgba(234,242,255,.9)); } /* TB2 · 알약(칩) 채움형 — 활성 탭을 코발트로 꽉 채움 */ body[data-tb="2"] .mf-tabnav{ gap:6px; padding:11px 0; } body[data-tb="2"] .mf-tabnav a{ padding:9px 15px; border-radius:999px; background:var(--bg2); border:1px solid transparent; transition:background .28s var(--ease), color .28s, border-color .28s; } body[data-tb="2"] .mf-tabnav a::after{ display:none; } body[data-tb="2"] .mf-tabnav a:hover{ background:var(--tint); color:var(--blue-d); } body[data-tb="2"] .mf-tabnav a.on{ background:var(--blue); color:#fff; font-weight:600; } body[data-tb="2"] .mf-tabnav a.on i{ color:rgba(255,255,255,.72); } /* TB3 · 진행 게이지 + 현재 섹션명 컴팩트형 목차는 바에 올리면(또는 포커스하면) 아래로 펼쳐집니다 */ body[data-tb="3"] .mf-gauge{ display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width:0; padding:13px 0; min-height:48px; /* 섹션명이 들어와도 바 높이가 안 흔들리게(border-box) */ } body[data-tb="3"] .mf-tabnav{ position:absolute; left:0; right:0; top:100%; z-index:2; justify-content:center; background:rgba(255,255,255,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); box-shadow:0 14px 30px rgba(10,28,62,.10); padding:0 24px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } body[data-tb="3"] .mf-tabs:hover .mf-tabnav, body[data-tb="3"] .mf-tabnav:focus-within{ opacity:1; visibility:visible; transform:none; } .mf-gauge .g-no{ flex:0 0 auto; font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--blue); font-variant-numeric:tabular-nums; } .mf-gauge .g-tk{ flex:0 0 110px; height:4px; border-radius:2px; background:#E3E8F1; overflow:hidden; } .mf-gauge .g-tk i{ display:block; height:100%; width:0; background:var(--blue); border-radius:2px; } .mf-gauge .g-nm{ min-width:0; font-size:17px; font-weight:600; letter-spacing:-.028em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mf-gauge .g-hint{ margin-left:auto; flex:0 0 auto; font-size:11.5px; color:var(--g500); white-space:nowrap; } /* TB4 · 번호 도트 레일 — 라벨은 호버 툴팁으로 */ body[data-tb="4"] .mf-tabnav{ gap:0; padding:14px 0; align-items:center; overflow:visible; } body[data-tb="4"] .mf-tabnav a{ padding:8px 11px; } body[data-tb="4"] .mf-tabnav a b{ display:none; } body[data-tb="4"] .mf-tabnav a i{ display:flex; align-items:center; justify-content:center; margin:0; width:28px; height:28px; border-radius:50%; background:var(--bg2); border:1px solid var(--line); color:var(--g500); font-size:11px; transition:background .28s var(--ease), color .28s, border-color .28s, transform .35s var(--ease); } body[data-tb="4"] .mf-tabnav a:hover i{ border-color:var(--blue); color:var(--blue-d); } body[data-tb="4"] .mf-tabnav a.on i{ background:var(--blue); border-color:var(--blue); color:#fff; transform:scale(1.16); } body[data-tb="4"] .mf-tabnav a + a::before{ content:''; position:absolute; left:-5px; top:50%; width:10px; height:1px; background:var(--line); } body[data-tb="4"] .mf-tabnav a::after{ content:attr(data-l); left:50%; right:auto; bottom:auto; top:calc(100% + 7px); height:auto; background:var(--ink); color:#fff; font-size:11.5px; font-weight:500; letter-spacing:-.02em; padding:5px 10px; border-radius:7px; white-space:nowrap; pointer-events:none; opacity:0; transform:translateX(-50%) translateY(4px); transition:opacity .22s var(--ease), transform .22s var(--ease); } body[data-tb="4"] .mf-tabnav a:hover::after, body[data-tb="4"] .mf-tabnav a:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); } /* TB5 · 다크 반전 — 스크롤이 시작되면 어두워지며 떠오름 */ body[data-tb="5"] .mf-tabs{ border-bottom-color:transparent; } body[data-tb="5"] .mf-tabs.stuck{ background:rgba(10,25,48,.94); border-bottom-color:rgba(255,255,255,.10); box-shadow:0 12px 34px rgba(10,28,62,.30); } body[data-tb="5"] .mf-tabs.stuck .mf-tabnav a{ color:rgba(255,255,255,.60); } body[data-tb="5"] .mf-tabs.stuck .mf-tabnav a:hover{ color:#fff; } body[data-tb="5"] .mf-tabs.stuck .mf-tabnav a.on{ color:#fff; } body[data-tb="5"] .mf-tabs.stuck .mf-tabnav a i{ color:rgba(255,255,255,.38); } body[data-tb="5"] .mf-tabs.stuck .mf-tabnav a.on i{ color:var(--blue-l); } body[data-tb="5"] .mf-tabs.stuck .mf-tabnav a::after{ background:var(--blue-l); } body[data-tb="5"] .mf-tabs.stuck .mf-tabcta .c2{ background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.24); } body[data-tb="5"] .mf-tabs.stuck .mf-tabcta .c2:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.44); } @media(max-width:900px){ .mf-gauge .g-hint{ display:none; } .mf-gauge .g-tk{ flex:0 0 72px; } .mf-gauge .g-nm{ font-size:15px; } } /* ═════ ② 다크 요약 박스 — 타이틀 확대(+5px≈4pt) · 여백 ═════ */ .mdf .mf-read{ padding:30px 34px; gap:16px; } .mdf .mf-read .em{ font-size:26px; line-height:1.3; } .mdf .mf-read .tx{ font-size:15.5px; line-height:1.85; } .mdf .mf-read .tx b{ margin-bottom:11px; font-size:20.5px; line-height:1.46; letter-spacing:-.03em; } @media(max-width:820px){ .mdf .mf-read{ padding:24px 22px; } .mdf .mf-read .tx b{ font-size:18px; } } /* ═════ ③ 업무 단계 분해 — '남긴 단계' 등장 모션 3안 ═════ body[data-rm="1|2|3"] · 재생 전 = .mf-arm / 재생 = .mf-play reduced-motion·백그라운드 탭이면 JS가 두 클래스를 안 붙여 기본 CSS(=최종 상태) 그대로 보입니다. */ .v1-rail.mf-arm .st.keep{ opacity:.16; } /* RM1 · 순차 페이드 + 글로우 펄스 */ body[data-rm="1"] .v1-rail.mf-play .st.keep{ animation:mfKeep1 .95s var(--ease) both; animation-delay:var(--d,0ms); } @keyframes mfKeep1{ 0% { opacity:.16; box-shadow:0 0 0 0 rgba(46,111,242,0); } 35% { opacity:1; box-shadow:0 0 0 7px rgba(46,111,242,.24); } 75% { box-shadow:0 0 0 12px rgba(46,111,242,0); } 100%{ opacity:1; box-shadow:0 0 0 0 rgba(46,111,242,0); } } /* RM2 · 좌→우 스윕 하이라이트가 훑고 지나가며 남긴 칩이 밝아짐 */ body[data-rm="2"] .v1-rail{ position:relative; } body[data-rm="2"] .v1-rail.mf-play::after{ content:''; position:absolute; inset:-8px -12px; border-radius:12px; pointer-events:none; background:linear-gradient(100deg,rgba(46,111,242,0) 38%,rgba(46,111,242,.20) 50%,rgba(46,111,242,0) 62%); background-size:240% 100%; animation:mfSweep2 1.6s var(--ease) both; } @keyframes mfSweep2{ from{ background-position:-70% 0; } to{ background-position:130% 0; } } body[data-rm="2"] .v1-rail.mf-play .st.keep{ animation:mfKeep2 .8s var(--ease) both; animation-delay:var(--d2,0ms); } @keyframes mfKeep2{ 0% { opacity:.16; background:var(--bg2); border-color:var(--line); } 45% { opacity:1; background:#D3E5FF; border-color:var(--blue); } 100%{ opacity:1; background:var(--tint); border-color:#BFD6FF; } } /* RM3 ★확정(§5.2) · 아래에서 위로 부드럽게 떠오름 ⛔제거한 것: 링 펄스(box-shadow 확산) · 오버슈트(-4px 되튐) · 스케일 확장 → "펄스처럼 크기가 순간 확장되거나 쿵 하고 튀는 느낌" 요소가 없습니다. ★이징: var(--ease)(.16,1,.3,1)는 끝이 급히 멎는 아웃 계열이라 가속·감속이 대칭인 ease-in-out 계열로 바꾸고, 1s → 1.35s 로 늦췄습니다. */ body[data-rm="3"] .v1-rail.mf-play .st.cut{ animation:mfCut3 1.15s cubic-bezier(.42,0,.28,1) both; } @keyframes mfCut3{ from{ opacity:1; } to{ opacity:.42; } } body[data-rm="3"] .v1-rail.mf-play .st.keep{ animation:mfKeep3 1.35s cubic-bezier(.42,0,.28,1) both; animation-delay:var(--d,0ms); } @keyframes mfKeep3{ from{ opacity:.16; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } @media(prefers-reduced-motion:reduce){ .v1-rail .st{ animation:none !important; opacity:1 !important; transform:none !important; } } /* ═════ ④ 체크리스트 ↔ 아이디어(💡) 박스 사이 숨통 ═════ ★모듈 간 간격이 아니라 카드 '내부' 여백이라 mfSpacing()과 무관 */ .mdf .mf-chk ul{ padding:10px 8px 0; } .mdf .mf-chk li{ padding:14px 14px; } .mdf .mf-chk .tip{ margin:26px 10px 14px; padding:17px 18px; } /* ═════ ⑤ '규칙으로 처리' 카드 강조 — 네 변 균일하게 ═════ */ .mdf .mf-vs .c.ok{ border:2px solid #7FAAFB; background:#E3EEFF; padding:18px 19px; box-shadow:0 6px 18px rgba(46,111,242,.10); } .mdf .mf-vs .c.ok .hd{ color:var(--blue-d); } /* ═════ ⑥ 주의 밴드 — 주황 → 레드/핑크 파스텔 ═════ */ .mdf .mf-note.warn{ background:#FFF1F4; border-color:#F2CFD9; color:#5C4650; } .mdf .mf-note.warn b{ color:#B33453; } /* ═════ ⑦ 예외 표 '건수' 열 확대(+3px≈2.3pt) ═════ */ .mdf .mf-tbl td.ct{ font-size:17px; letter-spacing:-.015em; } /* ═════ ⑨ 도입 전후 비교 — 대비 강화 + 애프터 원형 강조 ═════ */ .mf-ba2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .mf-bc{ border:1px solid var(--line); border-radius:16px; background:#fff; padding:20px 22px 18px; } .mf-bc-k{ font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--g500); } .mf-bc-k span{ display:block; margin-top:5px; font-size:11.5px; font-weight:500; letter-spacing:0; color:#A8B0BF; } .mf-bc-row{ margin-top:16px; display:grid; grid-template-columns:1fr 24px auto; align-items:center; gap:10px; } .mf-bc .bf .lb{ font-size:12px; font-weight:600; letter-spacing:.02em; color:#A8B0BF; } .mf-bc .bf .vv{ margin-top:7px; font-size:29px; font-weight:700; letter-spacing:-.038em; line-height:1.1; color:#B3BDCC; font-variant-numeric:tabular-nums; text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:#D7DEEA; } .mf-bc .ar{ font-size:17px; color:#C7CFDD; text-align:center; } .mf-bc .af{ text-align:center; } .mf-bc .af .lb{ margin-top:11px; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--blue-d); } .mf-bc .cir{ position:relative; display:block; width:112px; height:112px; margin:0 auto; } .mf-bc .core{ position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#3C7DF7,#1B4CB8); box-shadow:0 12px 28px rgba(31,85,200,.30); } .mf-bc .core b{ font-size:25px; font-weight:700; letter-spacing:-.038em; color:#fff; font-variant-numeric:tabular-nums; } .mf-bc .pg, .mf-bc .pg2{ position:absolute; inset:0; border-radius:50%; opacity:0; pointer-events:none; } .mf-bc:nth-child(2) .cir{ --pd:1.3s; } .mf-cmp{ margin-top:18px; display:grid; gap:7px; } .mf-cmp .cr{ display:grid; grid-template-columns:18px 1fr; align-items:center; gap:9px; } .mf-cmp .k{ font-size:11px; font-weight:600; color:#A8B0BF; } .mf-cmp .tk{ height:9px; border-radius:5px; background:#F0F3F8; overflow:hidden; } .mf-cmp i{ display:block; height:100%; width:var(--w); border-radius:5px; background:#CBD4E2; transition:width 1.15s var(--ease); } .mf-cmp .cr.a .k{ color:var(--blue-d); } .mf-cmp .cr.a i{ background:linear-gradient(90deg,var(--blue),var(--blue-l)); } .mf-ba2.mf-arm .mf-cmp i{ width:0; } .mf-bc-ft{ margin-top:16px; padding-top:13px; border-top:1px solid var(--line); font-size:13px; line-height:1.65; color:var(--g500); } .mf-bc-ft b{ display:block; margin-bottom:6px; font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--blue-d); } /* BM1 · 단일 링 ping(2.8s 주기) */ body[data-bm="1"] .mf-ba2 .pg2{ display:none; } body[data-bm="1"] .mf-ba2.mf-play .pg{ background:rgba(46,111,242,.30); animation:mfPing1 2.8s var(--ease) infinite; animation-delay:var(--pd,0s); } @keyframes mfPing1{ 0%{ transform:scale(1); opacity:.6; } 65%,100%{ transform:scale(1.74); opacity:0; } } /* BM2 · 이중 링 교대 확산 */ body[data-bm="2"] .mf-ba2.mf-play .pg, body[data-bm="2"] .mf-ba2.mf-play .pg2{ border:2px solid rgba(46,111,242,.5); animation:mfPing2 3.2s var(--ease) infinite; } body[data-bm="2"] .mf-ba2.mf-play .pg{ animation-delay:var(--pd,0s); } body[data-bm="2"] .mf-ba2.mf-play .pg2{ animation-delay:calc(var(--pd,0s) + 1.6s); } @keyframes mfPing2{ 0%{ transform:scale(.98); opacity:.75; } 78%,100%{ transform:scale(2); opacity:0; } } /* BM3 ★확정(§5.3) · 은은한 빛 번짐(글로우) ⛔"지나치게 네온처럼" 보이지 않도록 알파(.45→.26)·확산 반경(2.18→1.62배)을 낮추고 주기를 3.6s → 5.6s 로 늘려 숨 쉬는 속도를 절반 가까이 늦췄습니다. */ body[data-bm="3"] .mf-ba2.mf-play .pg{ background:radial-gradient(circle,rgba(46,111,242,.26),rgba(46,111,242,0) 66%); animation:mfGlow3 5.6s ease-in-out infinite; animation-delay:var(--pd,0s); } body[data-bm="3"] .mf-ba2.mf-play .pg2{ background:rgba(77,162,255,.07); animation:mfGlow3b 5.6s ease-in-out infinite; animation-delay:var(--pd,0s); } @keyframes mfGlow3 { 0%,100%{ transform:scale(1.34); opacity:.24; } 50%{ transform:scale(1.62); opacity:.44; } } @keyframes mfGlow3b{ 0%,100%{ transform:scale(1.04); opacity:.35; } 50%{ transform:scale(1.16); opacity:.60; } } /* 도입 '후' 쪽에만 정적 글로우를 얹어 전·후 대비가 한눈에 드러나게 — 모션이 꺼진 환경(reduced-motion)에서도 이 대비는 남습니다. */ body[data-bm="3"] .mf-bc .core{ box-shadow:0 12px 28px rgba(31,85,200,.30), 0 0 24px 3px rgba(77,162,255,.28); } body[data-bm="3"] .mf-cmp .cr.a i{ box-shadow:0 0 9px rgba(46,111,242,.40); } @media(prefers-reduced-motion:reduce){ .mf-bc .pg, .mf-bc .pg2{ animation:none !important; opacity:0 !important; } .mf-cmp i{ transition:none !important; } } @media(max-width:900px){ .mf-ba2{ grid-template-columns:1fr; } .mf-bc .cir{ width:96px; height:96px; } .mf-bc .core b{ font-size:23px; } .mf-bc .bf .vv{ font-size:23px; } } /* ═════ ⑩ 구축 일정 — 순차 등장 + 노드/세로선 중앙 정렬 ═════ ::before 원은 측정이 안 돼 실제 요소(.v1-nd)로 바꿔 그립니다. 세로선의 top/height/left는 JS가 노드 중심을 실측해 넣습니다. */ .mdf .v1-tl .w::before{ display:none; } .mdf .v1-tl::before{ left:var(--tlX,5px); width:2px; top:var(--tlT,6px); bottom:auto; height:var(--tlH,calc(100% - 12px)); } .v1-nd{ position:absolute; left:-22px; top:5px; width:13px; height:13px; border-radius:50%; background:#fff; border:2.5px solid var(--blue); box-sizing:border-box; z-index:1; transition:transform .5s var(--ease), opacity .5s var(--ease); } .v1-tl .w{ transition:opacity .62s var(--ease), transform .62s var(--ease); } .v1-tl.mf-arm .w{ opacity:0; transform:translateY(14px); } .v1-tl.mf-arm .w .v1-nd{ transform:scale(.35); opacity:0; } .v1-tl .w.on{ opacity:1; transform:none; } .v1-tl .w.on .v1-nd{ transform:scale(1); opacity:1; } @media(prefers-reduced-motion:reduce){ .v1-tl .w, .v1-tl .w .v1-nd{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ═════ ⑪ '이 글의 데이터' — 2×2(상하 2단 × 좌우 2열) ═════ */ .mdf .mf-data{ margin-top:76px; padding:28px 32px 24px; border-radius:18px; } .mdf .mf-data .k{ font-size:12px; letter-spacing:.18em; } .mdf .mf-data dl{ margin-top:16px; grid-template-columns:repeat(2,1fr); gap:0 44px; } .mdf .mf-data .r{ display:block; padding:19px 2px 21px; } .mdf .mf-data dt{ font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--g500); } .mdf .mf-data dd{ margin-top:10px; font-size:19px; font-weight:700; letter-spacing:-.028em; color:var(--ink); text-align:left; line-height:1.42; } .mdf .mf-data dd.acc{ color:var(--blue-d); } @media(min-width:901px){ .mdf .mf-data dl > .r:nth-last-child(-n+2){ border-bottom:0; padding-bottom:8px; } } @media(max-width:900px){ .mdf .mf-data{ padding:24px 22px 18px; } .mdf .mf-data dl{ grid-template-columns:1fr; gap:0; } .mdf .mf-data dl > .r:last-child{ border-bottom:0; } } /* ═════ ⑫ 하단 다크 CTA 배너 — 넓게 · 크게 · 버튼 세로 2단 ═════ */ /* ★§5.4 — 배너만 1140px이라 본문 모듈과 폭이 어긋나 보였습니다. .md-wrap 과 같은 공통 그리드(--ux-max)로 맞춰 좌우선을 통일합니다. */ .mdf .md-cta-zone{ max-width:var(--ux-max); } .mdf .mx-cta{ padding:56px 54px; gap:48px; } .mdf .mx-cta h3{ margin-top:0; font-size:32px; line-height:1.44; letter-spacing:-.032em; } .mdf .mx-cta p{ margin-top:16px; font-size:15.5px; } .mdf .mx-cta .b{ flex-direction:column; align-items:stretch; gap:10px; min-width:238px; } .mdf .mx-cta .b a{ justify-content:center; padding:17px 26px; } @media(max-width:900px){ .mdf .md-cta-zone{ max-width:none; } .mdf .mx-cta{ padding:38px 26px; gap:26px; } .mdf .mx-cta h3{ font-size:23px; } .mdf .mx-cta .b{ width:100%; min-width:0; } } /* ═════ 시안 전환 UI — 기존 '본문 모듈' 패널 안 별도 그룹 ═════ */ .mf-panel .sgt{ padding:11px 12px 7px; font-size:12px; font-weight:600; color:var(--g700); } .mf-panel .seg{ display:flex; flex-wrap:wrap; gap:6px; margin:0 12px; } .mf-panel .seg button{ flex:1 1 0; min-width:46px; border:1px solid var(--line); background:#fff; border-radius:9px; padding:8px 4px; font-family:inherit; font-size:11.5px; font-weight:600; color:var(--g500); cursor:pointer; transition:background .22s, border-color .22s, color .22s; } .mf-panel .seg button:hover{ border-color:var(--tint-b); color:var(--blue-d); } .mf-panel .seg button.on{ background:var(--blue); border-color:var(--blue); color:#fff; } .mf-panel .sgd{ margin:8px 12px 4px; font-size:11px; line-height:1.6; color:var(--g500); } /* ── 모바일 하단 고정 CTA 보정 — 뒤에 오는 규칙이 이기므로 맨 끝에 ── */ @media(max-width:900px){ .mdf .md-cta-zone{ padding-bottom:172px; } /* 고정바(69px)에 가리지 않게 */ .mdf .mf-adm{ bottom:90px; } .mdf .mf-panel{ bottom:136px; } } /* ═══════════════════════════════════════════════════════════ ★★ 2026-08-01 2차 요청 반영 — §5.1 다크 전환 / §5.4 버튼 모션 (오버라이드 블록이므로 반드시