/* ══════════ 오프닝 시퀀스 ══════════ 진입부 전용. 본편 스타일은 건드리지 않는다. 토큰은 design-system 1.1~1.2 그대로 쓴다(:root 는 본편 것을 상속). */ #seqbg{position:fixed;inset:0;z-index:45;display:none} #seqbg.on{display:block} /* 지도를 덮는 어둠 — 비트마다 농도·블러가 바뀐다(연출의 핵심) */ #seqVeil{position:absolute;inset:0;background:#0E1610;opacity:.76; transition:opacity .75s cubic-bezier(.4,0,.2,1), backdrop-filter .75s cubic-bezier(.4,0,.2,1), -webkit-mask-position .75s cubic-bezier(.4,0,.2,1); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); -webkit-mask-image:none;mask-image:none} /* 지도를 봐야 하는 비트 — 어둠을 왼쪽 '패널 컬럼'으로 잘라낸다. 전면 어둠이면 지도를 보여주는 장면인데 지도가 안 보이고, 그라디언트로 넓게 퍼뜨리면 패널 밖까지 얼룩처럼 어두워진다. 컬럼으로 끊는 게 깔끔하다. */ #seqVeil.side{ right:auto;width:var(--seq-col,700px); -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 74%,transparent 100%); mask-image:linear-gradient(90deg,#000 0%,#000 74%,transparent 100%)} /* 전면 클릭 캐처 — 아무 데나 눌러 전진 */ #seqCatch{position:absolute;inset:0;cursor:pointer} /* 시퀀스 동안 본편 크롬을 치운다. 패키지 원본은 사이드바(body.side-collapsed)만 접는데, 이 페이지에는 규모 카드· 레이어 패널·메시지 바·사이드바 토글이 더 있다. 어둠 아래에 흰 카드가 남으면 "지도 위에서 도는 시퀀스"가 아니라 "본편에 덮개를 씌운 화면"으로 보인다. */ body.seq-on .rankcard, body.seq-on .legend, body.seq-on .commbar, body.seq-on .mixcard, body.seq-on #sideToggle{opacity:0;pointer-events:none;transition:opacity .3s} /* 패널 — 비트마다 자리가 바뀐다 (center: 읽는 장면 / left: 지도를 보여주는 장면) */ #seqPanel{position:absolute;background:#fff;border-radius:22px; box-shadow:0 40px 120px rgba(0,0,0,.55);padding:42px 48px 38px; word-break:keep-all;text-wrap:pretty;pointer-events:none; max-height:93vh;overflow:hidden; transition:left .8s cubic-bezier(.4,0,.2,1),top .8s cubic-bezier(.4,0,.2,1), width .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)} #seqPanel.p-center{left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,94vw)} #seqPanel.p-left {left:56px;top:50%;transform:translate(0,-50%);width:min(560px,90vw)} /* 비트 내용 — 방향성 있는 페이지 넘김 (다음=왼쪽으로 빠지고 오른쪽에서 들어옴) */ #seqBody{opacity:1;transform:translateX(0); transition:opacity .26s cubic-bezier(.4,0,1,1),transform .26s cubic-bezier(.4,0,1,1)} #seqBody.out-next{opacity:0;transform:translateX(-38px)} #seqBody.out-prev{opacity:0;transform:translateX(38px)} #seqBody.in-next {opacity:0;transform:translateX(44px);transition:none} #seqBody.in-prev {opacity:0;transform:translateX(-44px);transition:none} #seqBody.settle {opacity:1;transform:translateX(0); transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .52s cubic-bezier(.16,1,.3,1)} /* 장 번호 — 몇 장 중 몇 번째인지 (페이지 감각) */ #seqCount{position:absolute;top:44px;right:48px;font-variant-numeric:tabular-nums; font-size:12px;font-weight:800;color:var(--faint);letter-spacing:.06em} #seqCount b{color:var(--brand);font-size:15px} /* 클릭 파문 — 눌린 것이 즉시 보이게 */ .seq-ripple{position:absolute;border-radius:50%;pointer-events:none; width:14px;height:14px;margin:-7px 0 0 -7px; background:radial-gradient(circle,rgba(235,78,0,.55) 0%,rgba(235,78,0,0) 70%); animation:seqRip .62s cubic-bezier(.16,1,.3,1) forwards} @keyframes seqRip{to{transform:scale(11);opacity:0}} #seqbg .s-eye{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--brand-dk); text-transform:uppercase;margin-bottom:14px} #seqbg .s-eye .logo{font-family:'Pretendard',sans-serif;color:var(--brand); letter-spacing:-.02em;text-transform:none;margin-right:12px;font-size:16px} #seqbg .s-eye .s-mark{height:24px;width:auto;vertical-align:-7px;margin-right:8px} #seqbg .s-eye .s-x{font-size:11px;color:var(--faint);margin-right:8px;letter-spacing:0} /* 시퀀스 헤드라인 = 디스플레이 층. 전체화면·회의실 투사를 전제로 본문 스케일 위 한 단 */ #seqbg h2{font-size:28px;line-height:1.28;font-weight:800;letter-spacing:-.025em; color:var(--ink);margin:0 0 16px} #seqbg .s-lede{font-size:15px;line-height:1.6;color:var(--body);margin:0 0 9px} #seqbg .s-lede b{color:var(--ink)} #seqbg .s-note{font-size:12px;line-height:1.6;color:var(--faint);margin-top:13px} /* 03·핵심권역 탭 — 4장처럼 버튼(거주·도보·차량)으로 구분, 그 밑에 표/칩 */ #seqbg .wday{margin:13px 0 2px;padding-top:13px;border-top:1px solid var(--line)} #seqbg .wtabs{display:flex;gap:8px;margin-bottom:12px} #seqbg .wtab{flex:1;padding:9px 4px;border:1.4px solid var(--line);background:#fff;border-radius:10px; font:inherit;font-size:12.5px;font-weight:800;color:var(--muted);cursor:pointer;pointer-events:auto;transition:.15s} #seqbg .wtab:hover{border-color:var(--brand);color:var(--brand-dk)} #seqbg .wtab.on{background:var(--brand);border-color:var(--brand);color:#fff} #seqbg .wtab.walk.on{background:#C93B00;border-color:#C93B00} #seqbg .wtab.car.on{background:#7C3AED;border-color:#7C3AED} #seqbg .wpane{display:none} #seqbg .wpane.on{display:block} #seqbg .wpane .mxm.lit{animation:none} /* 3장 칩은 정적(펄스 없음) */ #seqbg .wpane.car .mxm.lit{border-color:#7C3AED;background:#f1ecfe;color:#5b21b6} #seqbg .wpane .s-tbl{margin-top:0} #seqbg .wpane .wlead{font-size:12.5px;line-height:1.58;color:var(--body);margin:0 0 11px} #seqbg .wpane .wlead b{color:var(--ink);font-weight:700} #seqbg .wpane .whint{font-size:11.5px;color:var(--faint);margin:9px 0 0;line-height:1.5} /* 03·핵심권역 지도 범례 — 패널 밖, 지도 우측 상단. 심볼이 무엇을 뜻하는지 보여준다 */ #wlegend{position:absolute;top:118px;right:22px;z-index:8;pointer-events:none;display:none; background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:11px; padding:9px 13px 10px;box-shadow:0 8px 22px rgba(20,22,30,.14);max-width:186px; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} #wlegend .wl-t{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--faint);margin-bottom:7px} #wlegend .wl-r{display:flex;align-items:center;gap:9px;padding:2.5px 0;font-size:12px;font-weight:600;color:var(--body)} #wlegend .wl-dot{width:11px;height:11px;border-radius:50%;flex:none;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.14)} #wlegend .wl-ring{width:12px;height:12px;border-radius:50%;flex:none;background:#fff;border:2.4px solid #2EA043} #wlegend .wl-line{width:16px;height:0;flex:none;border-top:3px solid #C93B00;border-radius:2px} #wlegend .wl-dash{width:15px;height:10px;flex:none;border:1.5px dashed #C93B00;border-radius:3px;background:rgba(235,78,0,.06)} #wlegend .wl-box{width:14px;height:11px;flex:none;border:1.6px solid #C93B00;border-radius:3px} @media (max-width:760px){#wlegend{top:104px;right:14px;padding:8px 11px;max-width:154px}#wlegend .wl-r{font-size:11px}} /* 타깃 3분할 */ #seqbg .s-tgt{display:grid;gap:11px;margin-top:6px} #seqbg .s-trow{display:flex;gap:16px;align-items:baseline; background:var(--paper);border-radius:12px;padding:14px 18px} #seqbg .s-trow .tn{font-size:12px;font-weight:800;color:var(--brand-dk); flex:none;width:52px} #seqbg .s-trow .tt{font-size:15px;font-weight:800;color:var(--ink);flex:none;width:132px} #seqbg .s-trow .td{font-size:13.5px;color:var(--muted);line-height:1.55} /* ══════════ 데이터 프리미티브 ══════════ adtype-market-report-kit / web-kit 이식. 판형(764×1080)은 가져오지 않고 차트 문법(design-rules 12·13장)만 가져온다 — 여기는 지도 위 전체화면 시퀀스다. 토큰 값은 킷 tokens.css 와 동일하다(본편 :root 가 이미 대부분 갖고 있다). */ #seqbg{--up:#17756A;--down:#DC2626;--bar:#8B8377;--bar-lt:#CFC7BA; --bar-label-w:92px;--bar-val-w:74px} /* 자료 블록 — 모든 근거의 껍데기. 제목 + 내용 + 출처 */ #seqbg .fig{margin:8px 0 2px;padding-top:8px;border-top:1px solid var(--line)} #seqbg .fig + .fig{margin-top:10px} #seqbg .ft{font-size:12px;font-weight:800;color:var(--ink);margin-bottom:8px} #seqbg .ft.key{font-size:14px;line-height:1.4;letter-spacing:-.01em;margin-bottom:11px} /* 핵심 문장형 소제목 */ #seqbg .ft.key b{color:var(--brand-dk)} #seqbg .src{margin-top:8px;font-size:11px;color:var(--faint);line-height:1.55} /* 제목 옆 예산안 표시 (5·6장) */ #seqbg h2 .h2tag{font-style:normal;font-size:15px;font-weight:800;color:#fff;background:var(--brand); border-radius:999px;padding:4px 14px;vertical-align:middle;letter-spacing:0;white-space:nowrap} /* 05·06장 예산안 버튼 · 패널은 pointer-events:none 이라 버튼만 살린다 */ #seqbg .seqplan{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 6px} #seqbg .seqplan .planb{flex:1 1 auto;pointer-events:auto;border:1.4px solid var(--line);background:#fff; border-radius:10px;padding:9px 10px;font:inherit;font-size:12.5px;font-weight:800;color:var(--muted); cursor:pointer;white-space:nowrap;transition:.13s} #seqbg .seqplan .planb:hover{border-color:var(--brand);color:var(--brand-dk)} #seqbg .seqplan .planb.on{background:var(--brand);border-color:var(--brand);color:#fff} #seqbg .mxdecks{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap} #seqbg .mxdeck{flex:1 1 auto;border:1px solid var(--brand);background:rgba(235,78,0,.07);color:var(--brand-dk); font:inherit;font-size:11.5px;font-weight:800;padding:7px 9px;border-radius:8px;cursor:pointer;pointer-events:auto;white-space:nowrap;text-align:center} #seqbg .mxdeck:hover{background:var(--brand);color:#fff} /* 증거 2열 병렬 — 대비 주장은 같은 형식·같은 척도로 나란히 (13.1) */ #seqbg .ev-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start} #seqbg .ev-pair .ft{font-size:11.5px} /* 1장 현황 — 지표 3개를 그래프로만. 막대는 HTML이라 폰트 고정 px. 여백 넉넉히 */ #seqbg .fig:has(.mb-pair3){margin-top:22px;padding-top:18px} /* 도표 간 여백 확대 */ #seqbg .mb-pair3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* 지표 3개 나란히 */ #seqbg .mb{display:flex;flex-direction:column} #seqbg .mb-t{font-size:13.5px;font-weight:800;color:var(--brand-dk);margin-bottom:12px;line-height:1.32} /* 소제목=핵심, 강조 */ #seqbg .hbars{display:flex;flex-direction:column;gap:11px} #seqbg .hb-row{display:grid;grid-template-columns:38px 1fr 74px;align-items:center;gap:9px; padding:4px 7px;margin:0 -7px;border-radius:8px} #seqbg .hb-row.hi{background:rgba(235,78,0,.10)} /* ① 강조 행 배경 띠 */ #seqbg .hb-l{font-size:10.5px;color:#6A635B;white-space:nowrap} #seqbg .hb-track{height:12px;border-radius:6px;background:#ECE7DF;overflow:hidden} #seqbg .hb-fill{display:block;height:100%;border-radius:6px;background:#B4AB9E} #seqbg .hb-row.hi .hb-fill{background:#EB4E00} #seqbg .hb-v{font-size:10.5px;font-weight:800;color:#4A443D;font-variant-numeric:tabular-nums; display:flex;align-items:center;gap:5px;justify-content:flex-end;white-space:nowrap} #seqbg .hb-row.hi .hb-v{color:#C93B00} #seqbg .hb-chip{font-size:9px;font-weight:800;color:#fff;background:#EB4E00;border-radius:5px;padding:2px 6px;line-height:1.4} /* ② 순위 칩 */ /* 표+차트 조합 — 표는 좁게(값만), 차트는 넓게. 좁은 화면에선 base 규칙이 1열로 접는다 */ @media (min-width:881px){ #seqbg .ev-pair.chart-lg{grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:10px} } /* 가로 바 — 최대값 기준 척도(12.8). .acc 는 판정문의 주어에만(12.7) */ #seqbg .bars{display:flex;flex-direction:column;gap:9px} #seqbg .bar-row{display:grid;grid-template-columns:var(--bar-label-w) 1fr var(--bar-val-w); align-items:center;gap:10px} #seqbg .bar-row .bn{font-size:12.5px;color:var(--body);font-weight:500;line-height:1.35} #seqbg .bar-row .track{position:relative;height:10px;border-radius:4px;background:var(--paper);overflow:hidden} #seqbg .bar-row .track i{position:absolute;left:0;top:0;display:block;height:100%; border-radius:4px;background:var(--bar);min-width:2px} #seqbg .bar-row .track i.acc{background:var(--brand)} #seqbg .bar-row .track i.dim{background:var(--bar-lt)} #seqbg .bar-row .bv{font-size:12.5px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums} #seqbg .bar-row .bv em{font-style:normal;color:var(--faint);font-size:11px} /* 이상 대비 — 옅은 바가 이상, 진한 바가 현재. 남은 폭이 이상까지의 거리다 */ #seqbg .bar-row .track i.goal{background:var(--bar-lt)} #seqbg .bar-row .track i.over{background:var(--up)} /* 데이터 표 — 킷 규격(3.2). win 행은 배경만, 텍스트 색은 그대로 */ #seqbg .s-tbl{width:100%;border-collapse:collapse;margin-top:2px} #seqbg .s-tbl th{font-size:11px;font-weight:800;color:var(--muted);text-align:left; padding:7px 9px;background:var(--paper)} #seqbg .s-tbl td{font-size:12.5px;color:var(--body);padding:4px 9px;border-top:1px solid var(--line2); font-variant-numeric:tabular-nums} #seqbg .s-tbl th.r,#seqbg .s-tbl td.r{text-align:right} #seqbg .s-tbl td.name{font-weight:500;color:var(--ink)} #seqbg .s-tbl td.hi{color:var(--brand-dk);font-weight:800} #seqbg .s-tbl tr.win td{background:var(--win-bg)} #seqbg .s-tbl .wait{color:var(--faint)} /* 하루 동선 — 구간마다 접점이 이어진다. 시간 순서가 왼쪽에서 오른쪽으로 흐른다 */ #seqbg .s-flow{display:grid;gap:8px;margin:16px 0 2px;padding-top:16px;border-top:1px solid var(--line)} #seqbg .s-frow{display:flex;gap:14px;align-items:baseline} #seqbg .s-frow .fk{font-size:12px;font-weight:800;color:var(--brand-dk);flex:none;width:58px} #seqbg .s-frow .fv{font-size:13.5px;color:var(--body);line-height:1.55} #seqbg .s-frow .fv i{font-style:normal;color:var(--faint);margin:0 5px} #seqbg .s-frow.buy{margin-top:2px;padding-top:9px;border-top:1px dashed var(--line)} #seqbg .s-frow.buy .fk{color:var(--brand)} /* 05장 하루 동선 — 시간대 탭 + 그 순간 닿는 매체 반짝임 */ #seqbg .mixday{margin:14px 0 2px;padding-top:14px;border-top:1px solid var(--line)} #seqbg .mixtabs{display:flex;gap:8px;margin-bottom:13px} #seqbg .mixtab{flex:1;padding:9px 4px;border:1.4px solid var(--line);background:#fff;border-radius:10px; font:inherit;font-size:13px;font-weight:800;color:var(--muted);cursor:pointer;pointer-events:auto;transition:.15s} #seqbg .mixtab:hover{border-color:var(--brand);color:var(--brand-dk)} #seqbg .mixtab.on{background:var(--brand);border-color:var(--brand);color:#fff} #seqbg .mixtab.buy.on{background:var(--marine-dk);border-color:var(--marine-dk)} #seqbg .mixtab.l9.on{background:#A98A1F;border-color:#A98A1F} /* 출퇴근 = 9호선 골드 */ #seqbg .mixgrp.l9 .mxm.lit{border-color:#A98A1F;background:#F7F1DC;color:#7C6415} #seqbg .mixmedia{display:flex;flex-direction:column;gap:9px} #seqbg .mixgrp{display:flex;align-items:center;gap:11px} #seqbg .mixgrp .mxg-l{flex:none;width:38px;font-size:11px;font-weight:800;color:var(--faint);text-align:right} #seqbg .mixgrp .mxg-v{display:flex;flex-wrap:wrap;gap:6px} #seqbg .mxm{display:inline-block;padding:6px 12px;border-radius:20px;border:1.4px solid var(--line); background:var(--paper);font-size:12.5px;font-weight:700;color:var(--muted);transition:.2s} #seqbg .mxm.lit{border-color:var(--brand);background:var(--win-bg);color:var(--brand-dk); animation:mxpulse 1.3s ease-in-out infinite} #seqbg .mixgrp.buy .mxm.lit{border-color:var(--marine-dk);background:#eaf2fb;color:var(--marine-dk); animation-name:mxpulseb} @keyframes mxpulse{0%,100%{box-shadow:0 0 0 0 rgba(235,78,0,0)}50%{box-shadow:0 0 0 5px rgba(235,78,0,.22)}} @keyframes mxpulseb{0%,100%{box-shadow:0 0 0 0 rgba(31,82,136,0)}50%{box-shadow:0 0 0 5px rgba(31,82,136,.22)}} /* 06장 커뮤니케이션 — 기존 소재 이미지 + 문구 + 시점별 베리에이션 제안 (넓은 2열) */ #seqPanel.p-center:has(.commkv){width:min(1080px,96vw)} /* 06장은 소재 이미지·본문 가독성 위해 넓게 */ #seqbg .commkv{display:flex;gap:30px;margin:18px 0 4px;align-items:stretch;position:relative} /* 이미지 위 사각형 박스 + 그 박스를 기능 이미지 막대로 잇는 선(오버레이) */ #seqbg .ck-box{position:absolute;left:6%;right:6%;border:2.6px solid #EB4E00;border-radius:5px; pointer-events:none;z-index:3;box-shadow:0 0 0 2px rgba(255,255,255,.45)} #seqbg .ck-box.a{top:4.5%;height:10.5%} #seqbg .ck-box.b{bottom:1.5%;height:9.5%} #seqbg .ck-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible} #seqbg .ck-img{flex:none;width:360px;max-width:42%;position:relative;border-radius:12px;overflow:hidden; background:var(--paper);min-height:240px;box-shadow:0 6px 20px rgba(20,30,20,.22)} #seqbg .ck-img img{width:100%;height:100%;display:block;position:relative;z-index:1;object-fit:cover;object-position:center} #seqbg .ck-img .ck-ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--faint);font-size:11px;line-height:1.7} #seqbg .ck-tx{flex:1;min-width:0} #seqbg .ck-tag{font-size:12.5px;font-weight:800;color:var(--brand);letter-spacing:.06em} #seqbg .ck-copy{font-size:25px;font-weight:800;color:var(--ink);margin:3px 0 11px;letter-spacing:-.01em;line-height:1.2} #seqbg .ck-msg{font-size:15px;line-height:1.72;color:var(--body);margin:0 0 15px} #seqbg .ck-note{font-size:13.5px;line-height:1.64;color:var(--body);background:var(--win-bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:18px 0 13px} #seqbg .ck-note b{color:var(--brand-dk)} #seqbg .ck-var{display:grid;gap:8px} #seqbg .ck-vrow{display:flex;gap:14px;align-items:baseline;background:var(--paper);border-radius:9px;padding:10px 15px} #seqbg .ck-vrow .ck-vk{flex:none;width:42px;font-size:13px;font-weight:800;color:var(--brand-dk)} #seqbg .ck-vrow .ck-vv{font-size:14.5px;color:var(--ink);font-weight:600} #seqbg .ck-vrow.buy .ck-vk{color:var(--marine-dk)} #seqbg .commkv .bar-row .bn,#seqbg .commkv .bar-row .bv{font-size:13.5px} /* 기능 이미지 막대도 크게 */ #seqbg .brg{display:block;width:100%;height:auto} /* 06장 포스터→기능 이미지 브릿지 SVG */ #seqbg .commkv .bar-row .bv em{font-size:12px} @media(max-width:720px){ #seqbg .commkv{flex-direction:column} #seqbg .ck-img{width:100%;max-width:none} } /* 05장 미디어 믹스 — 예산(왼쪽) · 목표/노출·도달(오른쪽) 2열. 표·폰트 크게, 여백 넉넉히 */ #seqPanel.p-center:has(.mix2col){width:min(1080px,96vw)} #seqPanel.p-center:has(.mb-pair3){width:min(1040px,96vw)} /* 1장 현황 — 지표 3개 그래프 위해 더 넓게 */ #seqbg .mix2col{display:flex;gap:34px;align-items:flex-start;margin:16px 0 2px} #seqbg .mix2col > .fig{flex:1;min-width:0;margin-top:0} #seqbg .mix2col > .mix-right{flex:1;min-width:0} #seqbg .mix-right .fig:first-child{margin-top:0} #seqbg .mix-right .fig+.fig{margin-top:18px} /* 목표 표 ↔ 노출·도달 표 사이 여백 */ #seqbg .mix2col .ft{font-size:13px;margin-bottom:10px} #seqbg .mix2col .s-tbl th{font-size:12.5px;padding:9px 12px} #seqbg .mix2col .s-tbl td{font-size:14px;padding:8px 12px} /* 표 글자 확대(가독성) */ #seqbg .s-tbl td.em{color:var(--brand-dk);font-weight:800} #seqbg .mxbtbl tbody tr.mxb{cursor:pointer;pointer-events:auto;transition:background .12s} #seqbg .mxbtbl tbody tr.mxb td.name{color:var(--brand-dk);font-weight:600} #seqbg .mxbtbl tbody tr.mxb:hover td{background:var(--win-bg)} @media(max-width:720px){ #seqbg .mix2col{flex-direction:column;gap:8px} } /* 진행 바 — 색점 나열(3.4 금지)·방문 상태(5.2) 대신 경과 비율만 */ #seqProg{position:absolute;left:0;top:0;height:4px;background:var(--brand); width:0;box-shadow:0 0 16px rgba(235,78,0,.55); transition:width .62s cubic-bezier(.16,1,.3,1)} #seqSkip{position:absolute;top:22px;right:24px;border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.10);color:#F0EDE8;border-radius:9px; padding:8px 14px;font:700 12px Pretendard,sans-serif;cursor:pointer; pointer-events:auto;transition:.15s} #seqSkip:hover{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.5)} #seqHint{position:absolute;left:0;right:0;bottom:30px;text-align:center; font-size:13px;font-weight:700;color:rgba(240,237,232,.78);pointer-events:none; transition:opacity .3s} #seqHint .kbd{display:inline-block;border:1px solid rgba(255,255,255,.3); border-radius:5px;padding:2px 7px;margin:0 3px;font-size:12px} #seqHint .nx{display:inline-block;margin-left:8px;color:var(--brand); animation:seqNudge 1.7s ease-in-out infinite} @keyframes seqNudge{0%,100%{transform:translateX(0);opacity:.75}50%{transform:translateX(6px);opacity:1}} /* 마지막 비트의 진입 버튼만 클릭 가능. 본편에 공용 .btn 이 없어 여기서 자립적으로 정의한다 — 결론 버튼이므로 브랜드 채움. */ #seqPanel .s-go{pointer-events:auto;margin-top:22px;padding:13px 24px; font:800 15px Pretendard,sans-serif;letter-spacing:-.01em;cursor:pointer; background:var(--brand);border:1px solid var(--brand);color:#fff;border-radius:10px; box-shadow:0 6px 18px rgba(235,78,0,.28);transition:.15s} #seqPanel .s-go:hover{background:var(--brand-dk);border-color:var(--brand-dk); box-shadow:0 8px 22px rgba(235,78,0,.36)} /* 지도만 보기 — 패널을 잠깐 치운다 (발표 중 "이 지도 좀 봅시다") */ /* 근거가 긴 비트(이미지 바 + 메시지 4행)는 88vh 를 넘는다. 패널을 잘라내면 진입 버튼이 사라지므로, 스크롤은 본문에만 연다 — 장 번호와 '지도만 보기' 는 패널에 붙어 남는다. p-left 는 그 버튼 자리만큼 아래를 비워 둔다. */ #seqBody{max-height:calc(93vh - 116px);overflow-y:auto;overscroll-behavior:contain; scrollbar-width:none} /* 의미 없는 스크롤바 숨김(휠·드래그는 유지) */ #seqBody::-webkit-scrollbar{width:0;height:0;display:none} #seqPanel.p-left{padding-bottom:74px} #seqPanel.p-center #seqBody{max-height:calc(93vh - 80px)} #seqPeek{position:absolute;bottom:26px;left:48px;pointer-events:auto; border:1px solid var(--line);background:var(--paper);color:var(--muted); border-radius:9px;padding:8px 14px;font:800 12px Pretendard,sans-serif;cursor:pointer; transition:.15s} #seqPeek:hover{border-color:var(--brand-line);color:var(--brand-dk);background:var(--brand-bg)} #seqPanel.p-center #seqPeek{display:none} /* 읽는 장면에는 필요 없다 */ /* 치운 상태 */ #seqbg.peek #seqPanel{transform:translate(calc(-100% - 72px),-50%);opacity:0} #seqbg.peek #seqVeil{opacity:0!important} #seqbg.peek #seqProg{opacity:.35} #seqbg.peek #seqBack{display:block} #seqBack{display:none;position:absolute;left:50%;bottom:30px;transform:translateX(-50%); pointer-events:none;background:rgba(255,255,255,.94);color:var(--ink); border:1px solid var(--line);border-radius:10px;padding:10px 18px; font:800 13px Pretendard,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.28)} @media (max-width:1100px){ #seqPanel.p-left{left:32px;width:min(480px,88vw)} #seqVeil.side{--seq-col:600px} } @media (max-width:880px){ #seqPanel.p-left{left:50%;top:auto;bottom:20px;transform:translate(-50%,0);width:min(620px,92vw)} #seqPanel{padding:26px 26px 24px;max-height:84vh;overflow-y:auto} #seqbg h2{font-size:21px} #seqbg .s-lede{font-size:13.5px} /* 좁은 화면에서 2열 병렬은 두 근거가 다 뭉개진다 — 세로로 쌓는다 */ #seqbg .ev-pair,#seqbg .mb-pair3{grid-template-columns:1fr;gap:18px} #seqbg .mb{max-width:none} #seqbg{--bar-label-w:78px;--bar-val-w:66px} #seqCount{top:26px;right:26px} /* 좁은 화면은 패널이 하단 시트라 컬럼 어둠이 안 맞는다 → 아래쪽만 어둡게 */ #seqVeil.side{right:0;width:auto; -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 40%,#000 78%); mask-image:linear-gradient(180deg,transparent 0%,transparent 40%,#000 78%)} #seqPeek{left:50%;transform:translateX(-50%);bottom:auto;top:-46px} } /* ══════════ 상단 버튼 정렬 ══════════ 본편 .fwbtn 은 margin-left:auto 라 하나일 때만 오른쪽에 붙는다. 3개가 되면 각자 여백을 나눠 가져 바 전체에 흩어지므로 묶어서 한 덩어리로 만든다. (본편 CSS 는 건드리지 않고 여기서 덮는다) */ .topbar .topacts{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none} .topbar .topacts .fwbtn{margin-left:0} /* 위계 — 개요가 대표 입구(브랜드 아웃라인), 나머지 둘은 보조(뉴트럴). 같은 무게의 오렌지 버튼 3개는 어느 것도 강조가 아니다. */ .topbar .fwbtn.ghost{border-color:var(--line);color:var(--muted)} .topbar .fwbtn.ghost:hover{border-color:var(--faint);color:var(--ink)} /* 버튼이 늘어난 만큼 가운데 문서 제목과 부딪힌다 — 좁아지면 제목을 먼저 접는다 */ @media (max-width:1400px){ .topbar .doctitle .dt-sub{display:none} } @media (max-width:1240px){ .topbar .doctitle{display:none} } /* ══════════ 01 캠페인 전략 — 카드 + 그래프 조합 ══════════ */ #seqPanel:has(.strat-cards){width:min(1060px,96vw)} .strat-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 12px} .scard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px} .sc-eye{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.02em;margin-bottom:8px} .sc-hero{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px} .sc-hero b{font-size:32px;font-weight:800;color:var(--brand);letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums} .sc-cap{font-size:13px;font-weight:700;color:var(--muted);line-height:1.3;white-space:nowrap} .sc-sub{font-size:13.5px;line-height:1.62;color:var(--body);margin-bottom:12px;word-break:keep-all} .sc-sub b{color:var(--ink)} .sc-bars{display:flex;flex-direction:column;gap:8px;margin-bottom:9px} .scb{display:grid;grid-template-columns:74px 1fr 58px;align-items:center;gap:10px} .scb-l{font-size:12px;font-weight:700;color:var(--muted)} .scb-t{height:10px;border-radius:5px;background:#ECE7DF;overflow:hidden} .scb-t i{display:block;height:100%;border-radius:5px;background:#B4AB9E} .scb-t i.full{width:100%} .scb-t i.empty{width:6%} .scb-t i.hot{background:var(--brand)} .scb-v{font-size:12.5px;font-weight:800;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums} .scb-v.hot{color:var(--brand-dk)} .sc-note{font-size:10.5px;color:var(--faint);line-height:1.55;margin-top:3px} .stratflow{display:flex;align-items:stretch;gap:9px;margin-top:6px} .sf-step{flex:1;display:flex;gap:9px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 13px} .sf-step.win{border-color:var(--brand-line);background:var(--brand-bg)} .sf-n{width:23px;height:23px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;flex:none} .sf-step.win .sf-n{background:var(--brand)} .sf-tx b{display:block;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.01em} .sf-tx span{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:1px;word-break:keep-all} .sf-ar{align-self:center;width:12px;height:12px;border-top:2.4px solid var(--brand);border-right:2.4px solid var(--brand);transform:rotate(45deg);flex:none} @media(max-width:760px){.strat-cards{grid-template-columns:1fr}.stratflow{flex-direction:column}.sf-ar{transform:rotate(135deg)}} /* 02 타깃 — 코어 타깃 정의 칩 */ .tgt-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px} .tchip{font-size:13.5px;font-weight:800;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px} .tchip.lead{color:#fff;background:var(--brand);border-color:var(--brand)} /* 05 추정 성과 — 집행 시 지표 상승폭(추정 범위) 막대 · 세로 확대 */ #seqbg .lift{display:flex;flex-direction:column;gap:18px;margin:12px 0 6px} #seqbg .lf-row{display:grid;grid-template-columns:96px 1fr 74px;align-items:center;gap:11px} #seqbg .lf-l{font-size:13.5px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px} #seqbg .lf-row.hi .lf-l{color:var(--brand-dk)} #seqbg .lf-l em{font-style:normal;font-size:10px;font-weight:800;color:#fff;background:var(--brand);border-radius:999px;padding:2px 7px} #seqbg .lf-t{height:18px;border-radius:7px;background:#ECE7DF;overflow:hidden} #seqbg .lf-t b{display:block;height:100%;border-radius:7px;background:#C9BEB0} #seqbg .lf-row.hi .lf-t b{background:var(--brand)} #seqbg .lf-v{font-size:15.5px;font-weight:800;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums} #seqbg .lf-row.hi .lf-v{color:var(--brand-dk)} #seqbg .lf-v u{text-decoration:none;font-size:11px;color:var(--faint);margin-left:1px} /* 06 커뮤니케이션 전략 — 제품 이미지 + 세로형 기억 사슬(상황→브랜드→이유→제품) */ #seqPanel.p-center:has(.commrow){width:min(760px,96vw)} #seqbg .commrow{display:flex;gap:24px;align-items:center;margin:16px 0 6px} #seqbg .commimg{flex:0 0 auto;width:242px;max-width:42%;margin:0;position:relative} #seqbg .commimg img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)} #seqbg .commimg figcaption{position:absolute;left:10px;bottom:10px;background:rgba(20,18,15,.72);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:999px} #seqbg .memchain{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;margin:0} #seqbg .mn{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px} #seqbg .mn.brand{border-color:var(--brand);background:var(--brand-bg)} #seqbg .mn.win{border-color:var(--brand-line);background:var(--brand-bg)} #seqbg .mn-eye{font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--faint)} #seqbg .mn.brand .mn-eye,#seqbg .mn.win .mn-eye{color:var(--brand-dk)} #seqbg .mn-body{font-size:15px;font-weight:700;color:var(--body);line-height:1.35;word-break:keep-all} #seqbg .mn-q{color:var(--ink)} #seqbg .mn-logo{height:31px;width:auto;display:block} #seqbg .mn-link{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0} #seqbg .mn-link em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--brand-dk)} #seqbg .mn-link i{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--brand)} #seqbg .comm-why{font-size:14px;line-height:1.6;color:var(--body);margin:0 0 11px;word-break:keep-all} @media(max-width:640px){#seqbg .commrow{flex-direction:column;align-items:center}#seqbg .commimg{width:100%;max-width:240px}} /* 01 근거 막대 — 긴 라벨을 한 줄로(기억된 브랜드 중 선택 / 새로운 브랜드 비교 선택) */ .sc-bars.lbl .scb{grid-template-columns:150px 1fr 42px} .sc-bars.lbl .scb-l{white-space:nowrap} /* 02 전략 — 어떤 순간 칩 2×2 그리드(3+1 여백 제거) */ #seqbg .tgt-chips.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px} #seqbg .tgt-chips.grid2 .tchip{text-align:center} /* 05 미디어 믹스 — 매체별 세분화(부모·자식) 서브행 */ #seqbg .mxbtbl tbody tr.mxsub td{border-top:none;padding:1px 12px 7px;font-size:11px;color:var(--faint);font-weight:600} /* 05 커버리지 — 컴팩트(상승폭 막대에 세로 공간 양보) */ #seqbg .mix-right .fig.cov-sm{padding-top:6px} #seqbg .mix-right .fig.cov-sm .s-tbl td{padding:4px 12px;font-size:13px} /* ── KODIT 덱 보강: side 카드(p-left, 560px)에서는 단계 화살 도식을 세로로 쌓는다. 아카나의 max-width:760px 스태킹 규칙을 패널 폭 기준으로 옮긴 것 ── */ #seqPanel.p-left .stratflow{flex-direction:column} #seqPanel.p-left .sf-ar{transform:rotate(135deg)} /* 본문 가독성: 리드 문단 한 단계 키움 (사용자 요청 2026-08-22) */ #seqbg .s-lede{font-size:16.5px;line-height:1.66} @media(max-width:1100px){#seqbg .s-lede{font-size:15px}} /* 카드 도식 가독성: 그리드 숨통 (사용자 요청 2026-08-22) */ #seqbg .memchain{margin:16px 0 4px} #seqbg .mn{padding:14px 18px;gap:16px} #seqbg .mn-body{font-size:16px;line-height:1.45} #seqbg .mn-eye{font-size:11.5px} #seqbg .mn-link{padding:8px 0;gap:3px} #seqbg .mn-link em{font-size:11.5px} #seqbg .fig{margin-top:20px} #seqbg .fig .ft{margin-bottom:10px} #seqbg .stratflow{gap:12px;margin-top:10px} #seqbg .sf-step{padding:12px 15px;gap:11px} #seqbg .sf-tx b{font-size:14.5px} #seqbg .sf-tx span{font-size:12.5px;line-height:1.5;margin-top:2px} #seqbg .s-note{margin-top:16px} /* side 카드(세로 스택)에서는 단계 간격을 줄여 한 화면에 담는다 */ #seqPanel.p-left .stratflow{gap:8px} #seqPanel.p-left .sf-step{padding:10px 14px} /* 빈도 역산 블록: 단계 카드 숨통 (사용자 요청) */ #seqbg .fig{margin-top:24px} #seqbg .fig .ft{margin-bottom:12px} #seqbg .stratflow{gap:16px;margin-top:12px} #seqbg .sf-step{padding:15px 18px;gap:12px} #seqbg .sf-n{width:25px;height:25px} #seqbg .sf-tx b{font-size:15px} #seqbg .sf-tx span{font-size:13px;line-height:1.55;margin-top:3px} #seqbg .fig + .s-lede{margin-top:18px} #seqbg .s-note{margin-top:18px;line-height:1.7} /* side 카드는 위 확장의 예외: 한 화면 안에 담는 것이 우선 */ #seqPanel.p-left .fig{margin-top:14px} #seqPanel.p-left .fig .ft{margin-bottom:8px} #seqPanel.p-left .stratflow{margin-top:8px} #seqPanel.p-left .sf-tx span{font-size:12.5px;line-height:1.45;margin-top:2px} #seqPanel.p-left .fig + .s-lede{margin-top:12px} #seqPanel.p-left .s-note{margin-top:12px} #seqPanel.p-left .fig{margin-top:10px} #seqPanel.p-left .fig .ft{margin-bottom:6px} #seqPanel.p-left .stratflow{gap:7px;margin-top:6px} #seqPanel.p-left .sf-step{padding:9px 13px} /* 카드 3: 표·옵션 버튼 숨통 (사용자 요청) */ #seqbg .s-tbl{margin:14px 0 4px} #seqbg .s-tbl th{padding:6px 10px;font-size:11.5px} #seqbg .s-tbl td{padding:8px 10px;font-size:13.5px} #seqbg .mixtabs{margin-top:16px;margin-bottom:14px;gap:10px} #seqbg .mixtab{padding:11px 6px} /* 카드 4(stratflow 있는 side 카드)는 한 화면 유지가 우선이라 원 밀도로 되돌린다 */ #seqPanel.p-left:has(.stratflow) .mixtabs{margin-top:8px;margin-bottom:10px;gap:8px} #seqPanel.p-left:has(.stratflow) .mixtab{padding:9px 4px} /* ══ 구 덱 이식: 카드용 지도 범례 (우측 상단, 보기 전용) ══ */ #seqLegend{position:absolute;top:150px;right:26px;z-index:4;pointer-events:none; background:rgba(255,255,255,.96);border-radius:14px;padding:13px 15px; box-shadow:0 10px 34px rgba(0,0,0,.28);width:212px; opacity:0;transform:translateY(-6px);transition:opacity .28s,transform .28s} #seqLegend.on{opacity:1;transform:none} #seqLegend .sl-t{font-size:10.5px;font-weight:800;color:var(--muted); letter-spacing:.02em;margin-bottom:7px} #seqLegend .sl-i{display:flex;align-items:center;gap:8px;font-size:11.5px; color:var(--body);line-height:1.4;margin-top:5px} #seqLegend .sl-i i{flex:none;width:13px;height:13px;border-radius:50%; border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(34,27,21,.16)} #seqLegend .sl-i i.sq{border-radius:3px;box-shadow:none;border:0} #seqLegend .sl-i i.ring{background:none;border:1.6px solid var(--brand);box-shadow:none} #seqLegend .sl-i i.dash{background:none;border:0;border-top:2.4px solid var(--brand); height:0;border-radius:0;box-shadow:none} /* ══ 구 덱 이식: 이전/다음 내비 - 카드 아래(화면 하단 중앙) 고정 ══ */ #seqbg .seq-nav{position:absolute;left:50%;bottom:24px;transform:translateX(-50%); display:flex;gap:10px;z-index:5;pointer-events:auto} .seq-nav button{flex:none;padding:10px 20px;border-radius:10px;font:inherit; font-size:13px;font-weight:800;cursor:pointer;pointer-events:auto} .seq-nav .sn-prev{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.92);color:var(--muted)} .seq-nav .sn-prev:hover{color:var(--ink)} .seq-nav .sn-next{border:1px solid var(--brand);background:var(--brand);color:#fff} .seq-nav .sn-next:hover{background:var(--brand-dk)} #seqHint{display:none} /* ══ 구 덱 이식: 탐색형 카드 - 지도 팬·줌·클릭 허용 ══ #seqbg 는 풀스크린이라 캐처를 꺼도 pointer-events 기본값이면 지도를 가로챈다. 오버레이를 투명 통과시키고 실제로 눌러야 하는 것만 되살린다. */ body.seq-explore #seqbg, body.seq-explore #seqVeil, body.seq-explore #seqPanel, body.seq-explore #seqLegend, body.seq-explore #seqProg{pointer-events:none} body.seq-explore #seqBody, body.seq-explore #seqCount, body.seq-explore .seq-nav, body.seq-explore #seqSkip, body.seq-explore #seqPeek{pointer-events:auto} /* ══ 구 덱 이식: 카드용 지도 범례 (우측 상단, 보기 전용) ══ */ #seqLegend{position:absolute;top:150px;right:26px;z-index:4;pointer-events:none; background:rgba(255,255,255,.96);border-radius:14px;padding:13px 15px; box-shadow:0 10px 34px rgba(0,0,0,.28);width:212px; opacity:0;transform:translateY(-6px);transition:opacity .28s,transform .28s} #seqLegend.on{opacity:1;transform:none} #seqLegend .sl-t{font-size:10.5px;font-weight:800;color:var(--muted); letter-spacing:.02em;margin-bottom:7px} #seqLegend .sl-i{display:flex;align-items:center;gap:8px;font-size:11.5px; color:var(--body);line-height:1.4;margin-top:5px} #seqLegend .sl-i i{flex:none;width:13px;height:13px;border-radius:50%; border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(34,27,21,.16)} #seqLegend .sl-i i.sq{border-radius:3px;box-shadow:none;border:0} #seqLegend .sl-i i.ring{background:none;border:1.6px solid var(--brand);box-shadow:none} #seqLegend .sl-i i.dash{background:none;border:0;border-top:2.4px solid var(--brand); height:0;border-radius:0;box-shadow:none} /* ══ 구 덱 이식: 이전/다음 내비 - 카드 아래(화면 하단 중앙) 고정 ══ */ #seqbg .seq-nav{position:absolute;left:50%;bottom:24px;transform:translateX(-50%); display:flex;gap:10px;z-index:5;pointer-events:auto} .seq-nav button{flex:none;padding:10px 20px;border-radius:10px;font:inherit; font-size:13px;font-weight:800;cursor:pointer;pointer-events:auto} .seq-nav .sn-prev{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.92);color:var(--muted)} .seq-nav .sn-prev:hover{color:var(--ink)} .seq-nav .sn-next{border:1px solid var(--brand);background:var(--brand);color:#fff} .seq-nav .sn-next:hover{background:var(--brand-dk)} #seqHint{display:none} /* ══ 구 덱 이식: 탐색형 카드 - 지도 팬·줌·클릭 허용 ══ #seqbg 는 풀스크린이라 캐처를 꺼도 pointer-events 기본값이면 지도를 가로챈다. 오버레이를 투명 통과시키고 실제로 눌러야 하는 것만 되살린다. */ body.seq-explore #seqbg, body.seq-explore #seqVeil, body.seq-explore #seqPanel, body.seq-explore #seqLegend, body.seq-explore #seqProg{pointer-events:none} body.seq-explore #seqBody, body.seq-explore #seqCount, body.seq-explore .seq-nav, body.seq-explore #seqSkip, body.seq-explore #seqPeek{pointer-events:auto} /* ══ 구 덱 이식: 카드용 지도 범례 (우측 상단, 보기 전용) ══ */ #seqLegend{position:absolute;top:150px;right:26px;z-index:4;pointer-events:none; background:rgba(255,255,255,.96);border-radius:14px;padding:13px 15px; box-shadow:0 10px 34px rgba(0,0,0,.28);width:212px; opacity:0;transform:translateY(-6px);transition:opacity .28s,transform .28s} #seqLegend.on{opacity:1;transform:none} #seqLegend .sl-t{font-size:10.5px;font-weight:800;color:var(--muted); letter-spacing:.02em;margin-bottom:7px} #seqLegend .sl-i{display:flex;align-items:center;gap:8px;font-size:11.5px; color:var(--body);line-height:1.4;margin-top:5px} #seqLegend .sl-i i{flex:none;width:13px;height:13px;border-radius:50%; border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(34,27,21,.16)} #seqLegend .sl-i i.sq{border-radius:3px;box-shadow:none;border:0} #seqLegend .sl-i i.ring{background:none;border:1.6px solid var(--brand);box-shadow:none} #seqLegend .sl-i i.dash{background:none;border:0;border-top:2.4px solid var(--brand); height:0;border-radius:0;box-shadow:none} /* ══ 구 덱 이식: 이전/다음 내비 - 카드 아래(화면 하단 중앙) 고정 ══ */ #seqbg .seq-nav{position:absolute;left:50%;bottom:24px;transform:translateX(-50%); display:flex;gap:10px;z-index:5;pointer-events:auto} .seq-nav button{flex:none;padding:10px 20px;border-radius:10px;font:inherit; font-size:13px;font-weight:800;cursor:pointer;pointer-events:auto} .seq-nav .sn-prev{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.92);color:var(--muted)} .seq-nav .sn-prev:hover{color:var(--ink)} .seq-nav .sn-next{border:1px solid var(--brand);background:var(--brand);color:#fff} .seq-nav .sn-next:hover{background:var(--brand-dk)} #seqHint{display:none} /* ══ 구 덱 이식: 탐색형 카드 - 지도 팬·줌·클릭 허용 ══ #seqbg 는 풀스크린이라 캐처를 꺼도 pointer-events 기본값이면 지도를 가로챈다. 오버레이를 투명 통과시키고 실제로 눌러야 하는 것만 되살린다. */ body.seq-explore #seqbg, body.seq-explore #seqVeil, body.seq-explore #seqPanel, body.seq-explore #seqLegend, body.seq-explore #seqProg{pointer-events:none} body.seq-explore #seqBody, body.seq-explore #seqCount, body.seq-explore .seq-nav, body.seq-explore #seqSkip, body.seq-explore #seqPeek{pointer-events:auto} /* 카드 본문이 늘어난 경우를 위한 미세 조정 (내용을 자르지 않고 여백에서 확보) */ #seqbg .memchain{margin:12px 0 2px} #seqbg .mn{padding:12px 16px} #seqbg .fig{margin-top:18px} #seqPanel.p-left .stratflow{gap:6px} #seqPanel.p-left .sf-step{padding:8px 12px} /* ── 본편 크롬 ── 이식한 규칙은 KODIT 크롬 이름이라 여기에 우리 것을 더한다. 상단 탭(.steps)은 감추지 않는다. 카드가 넘어갈 때 탭이 따라 바뀌는 것이 「카드가 지도를 조종한다」는 사실을 그대로 보여준다. 범례도 살린다. 지도가 무엇을 그리는지 알려주는 유일한 안내다. */ body.seq-on #side, body.seq-on #sideToggle, body.seq-on .rampbox{opacity:0!important;pointer-events:none;transition:opacity .3s} body.seq-on .steps{opacity:.6!important;pointer-events:none;transition:opacity .3s} /* 범례는 지도를 보여주는 장(side = explore)에서만 띄운다. 읽는 장(표지·목표)에서는 아직 답을 안 보여줬는데 범례만 먼저 뜨면 산만하다. */ body.seq-on .legend{opacity:0!important;pointer-events:none;transition:opacity .3s} body.seq-explore .legend{opacity:1!important;pointer-events:auto} /* ── 「카드로 돌아가기」 ── 이식본은 이걸 pointer-events:none 안내 라벨로 둔다. 정본은 복귀를 #seqCatch 에 맡기는데, explore 장에서는 그 캐처를 꺼 두므로 안내만 뜨고 아무 데도 눌리지 않는 상태가 된다. 여기서는 버튼으로 쓴다. */ #seqBack{pointer-events:auto;cursor:pointer;transition:border-color .15s,color .15s} #seqBack:hover{border-color:var(--brand);color:var(--brand-dk)} body.seq-explore #seqBack{pointer-events:auto} /* ── 과제 표(2장) ── 정본 .s-trow 의 .tt 는 132px 이라 과제명이 안 들어간다. 담당자 정본 과제명을 줄이지 않기로 했으므로 칸을 넓히고 위쪽 정렬로 바꾼다. .tn 도 「과제 1」이 들어가야 해서 52px 로는 좁다. */ #seqbg .s-tgt .s-trow{align-items:flex-start;padding:15px 20px} #seqbg .s-tgt .tn{width:52px;padding-top:2px} #seqbg .s-tgt .tt{width:216px;line-height:1.36;font-size:14.5px} #seqbg .s-tgt .td{font-size:13px;line-height:1.6} #seqPanel.p-center:has(.s-tgt){width:min(1000px,95vw)} /* ── 본문 스케일 ── 이식본 뒤쪽에 KODIT 건에서 키운 규칙이 누적돼 있다. (s-lede 15 → 16.5, sf-tx b 14 → 15, stratflow gap 9 → 16 …) 그 덱은 560px side 카드가 주력이라 키운 것인데, 이 덱은 읽는 장이 880px p-center 라 같은 값이 과하게 읽히고 카드가 넘친다. 정본 기본값 쪽으로 되돌린다. 정본 블록은 건드리지 않는다. 애드덤이 뒤에 있어 이긴다. */ /* 글자를 줄였으면 여백은 되살려야 한다. 둘 다 줄이면 밀도만 올라간다. 문단 사이(.s-lede margin-bottom)가 정본 9px 인데 15px 본문에서는 붙어 보인다. */ #seqbg .s-lede{font-size:15px;line-height:1.68;margin-bottom:15px} @media(max-width:1100px){#seqbg .s-lede{font-size:14px;margin-bottom:13px}} #seqbg h2{margin-bottom:19px} #seqbg .fig{margin-top:26px} #seqbg .fig .ft{margin-bottom:13px} #seqbg .stratflow{gap:14px;margin-top:12px} #seqbg .sf-step{padding:14px 16px;gap:11px} #seqbg .sf-n{width:24px;height:24px} #seqbg .sf-tx b{font-size:13.5px} #seqbg .sf-tx span{font-size:12px;line-height:1.55;margin-top:3px} #seqbg .fig + .s-lede{margin-top:22px} #seqbg .s-note{margin-top:20px;line-height:1.7} /* 표도 같은 이유로 숨통을 준다 */ #seqbg .s-tbl td{padding-top:9px;padding-bottom:9px} #seqbg .s-tgt{gap:13px} /* ── 쌓임 순서 ── 이식본의 #seqVeil 이 z-index 8 을 갖고 있어 DOM 순서와 무관하게 카드 위로 올라온다. 그래서 흰 카드가 어둠에 덮여 뿌옇게 보였다. 게다가 veil 은 pointer-events 기본값이라 개념 장에서 캐처의 클릭까지 가로챈다. 카드와 조작 요소를 어둠 위로 올린다. */ #seqCatch{z-index:9} #seqPanel{z-index:10} #seqBack,#seqProg,#seqSkip,#seqbg .seq-nav{z-index:11} /* ── 카드 이동 ── 위치를 전환하지 않는다. p-center 는 left:50% + translate(-50%), p-left 는 left:56px + translate(0) 이라 전환하면 브라우저가 % 와 px 를 보간하는 사이 두 값이 어긋나 카드가 화면 밖으로 나갔다 돌아온다. 자리는 즉시 잡고, 넘김 감은 #seqBody 의 방향성 페이드가 맡는다. peek 은 transform 만 쓰므로 그 전환은 살려 둔다. */ #seqPanel{transition:none} #seqbg.peek #seqPanel{transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s ease} /* ── 주간 체류 두 집단 표(5장) ── 좌우로 나란히 놓는다. 한 집단씩 위아래로 쌓으면 「어느 쪽이 더 큰가」를 눈으로 비교할 수 없다. .s-tbl 을 그대로 쓰되 좁은 칸에 맞게 글자와 여백만 줄인다. */ #seqbg .dp-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px 20px;margin-top:24px} #seqbg .dp-col .ft{margin-bottom:10px} #seqbg .dp-t{table-layout:fixed;width:100%} #seqbg .dp-t th,#seqbg .dp-t td{font-size:11.5px;padding-left:0;padding-right:8px} #seqbg .dp-t th:last-child,#seqbg .dp-t td:last-child{padding-right:0} #seqbg .dp-t th{font-size:10px;letter-spacing:-.01em} #seqbg .dp-t th:first-child,#seqbg .dp-t td:first-child{width:26px} #seqbg .dp-t th:nth-child(3),#seqbg .dp-t td:nth-child(3){width:74px} #seqbg .dp-t th:nth-child(4),#seqbg .dp-t td:nth-child(4){width:40px} #seqbg .dp-t td.name{font-weight:600;letter-spacing:-.02em} #seqbg .dp-t td.r,#seqbg .dp-t th.r{text-align:right;font-variant-numeric:tabular-nums} #seqbg .dp-t td,#seqbg .dp-t th{padding-top:7px;padding-bottom:7px} /* 두 집단 표가 든 카드만 넓힌다. 560px 본문(464px)에는 250px 두 칸이 안 들어간다. :has 를 쓰면 다른 side 카드는 560px 그대로 남는다. */ #seqPanel.p-left:has(.dp-duo){width:min(760px,64vw)} @media(max-width:1100px){#seqPanel.p-left:has(.dp-duo){width:min(680px,80vw)}} /* 지도 권역 라벨 - 집단마다 번호 색을 갈라 범례와 맞춘다. 둘 다 주황이면 어느 쪽 1위인지 알 수 없다. 주황은 결론에만 쓴다. */ .zlab.chip.wrk{border-color:rgba(235,78,0,.34);box-shadow:0 2px 8px rgba(34,27,21,.14),0 0 0 3px rgba(235,78,0,.1)} .zlab.chip.wrk .rk{background:var(--brand)} .zlab.chip.hmk{border-color:rgba(47,143,107,.36);box-shadow:0 2px 8px rgba(34,27,21,.14),0 0 0 3px rgba(47,143,107,.1)} .zlab.chip.hmk .rk{background:#2F8F6B} /* ── 생활 이동 표(6장) ── dp-t 의 순위 칸 폭(26px)이 출발 이름을 누른다. OD 표는 이름 두 칸이 주인공이라 폭을 다시 배분한다. */ #seqbg .dp-t.od-t th:first-child,#seqbg .dp-t.od-t td:first-child{width:31%} #seqbg .dp-t.od-t th:nth-child(2),#seqbg .dp-t.od-t td:nth-child(2){width:auto} #seqbg .dp-t.od-t th:nth-child(3),#seqbg .dp-t.od-t td:nth-child(3){width:66px} #seqbg .dp-t.od-t th:nth-child(4),#seqbg .dp-t.od-t td:nth-child(4){width:52px} #seqbg .dp-t.od-t td.name{letter-spacing:-.03em;font-size:11px} /* 6장 결론 블록 - dp-duo 3열 변형. sc-* 는 전역 정의를 그대로 쓴다 */ #seqbg .dp-duo.tri{grid-template-columns:1fr 1fr 1fr} #seqbg .dp-duo.tri .sc-hero b{font-size:26px} #seqbg .dp-duo.tri .sc-cap{white-space:normal} #seqbg .dp-duo.tri .sc-sub{font-size:12.5px;line-height:1.6;margin-bottom:0} /* 6장 결론 카드는 표준 사이드 폭. 지도가 주인공이다 */ #seqPanel.p-left:has(.dp-duo.tri){width:min(560px,50vw)} #seqbg .dp-duo.tri{gap:10px} #seqbg .dp-duo.tri .sc-hero b{font-size:22px} #seqbg .dp-duo.tri .sc-cap{font-size:11.5px}