*{box-sizing:border-box}
body{margin:0;background:#0A0A0B;color:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;line-height:1.6}
/* 🔴 form 요소는 font-family 비상속(UA 기본 Arial/monospace) — 본문 타이포 강제 상속 (R3 ⑨ P0-1 계열·앱 index.html 동기) */
button,input,textarea,select{font-family:inherit}
/* 🔴 가로 오버플로우 근원 차단: 긴 '·'(U+00B7) 연결 목록(예 토스뱅크·증권·페이먼츠·인슈어런스·플레이스·모바일)은
   줄바꿈 기회가 없어 뷰포트를 넘긴다. word-break:keep-all(한국어 어절 자연 줄바꿈) + overflow-wrap:anywhere(긴
   토큰 강제 줄바꿈) 조합을 .wrap에 걸어 하위 #report·story 텍스트·meta 전부 상속(둘 다 inherited 속성).
   🔴 .wrap/body에 overflow-x:hidden 금지 — overflow-y가 auto로 강제돼 스크롤 컨테이너가 생기고 .stickyhdr가
   깨진다(버그B의 함정). 근원은 넘치는 텍스트를 줄바꿈시키는 것. */
.wrap{max-width:720px;margin:0 auto;padding:20px 18px 48px;word-break:keep-all;overflow-wrap:anywhere}
.brand{font-size:20px;letter-spacing:-.3px}
/* 🔴 워드마크 accent = 브랜드 SoT 토큰(--jr-mark, 애프리콷 다크톤) — 파랑 클리셰 폐기·메인과 단일 정체성 (REQ-060) */
.brand b{color:var(--jr-mark)}
.tag{color:#8b97a6;font-size:13px;margin:2px 0 16px}
/* 정찰 대상 = 헤더 내 텍스트 라인 — 🔴 단일 헤더 시스템(대표 지시 2026-07-17 16:02·큐 3-4j): 메인 #meta
   텍스트 문법과 병치 동일(15px·700). 구 토스 카드 문법(border+surface+radius 20+padding 16px 18px)은
   헤더 상시 점유 157.6px(메인 65px 대비 2.4배)의 주범이라 폐기 — 헤더 밖 카드(.blk·.ad)는 불변.
   ym 1줄화(nowrap·우측 정렬) 유지. .meta 사용처 = .stickyhdr 내 1곳(마크업 무변경·CSS만) */
/* 🔴 2줄 위계 재설계(대표 실기기 catch 07-17 18:10 — 토스 /r/ 회사명 "토.." 잘림 = 1줄 강제가 정보 위계 파괴):
   줄1 = 칩+회사명(절대 비잘림 — 최우선 폭·전수 39개 분포 최장 "토스증권(toss securities)" 실폭 ~190px 수납·
   극단 안전장치 = JS 넘침 감지 시 폰트 15→13 1단 축소) / 줄2 = 직군(잘림 허용 ellipsis)+정찰월(우측 고정).
   높이 54px(26+4+24) 고정 — scouting/발행 헤더에서 tag(28px) 숨김과 정확 상쇄 → 헤더 105px by construction 불변.
   메인 #meta 미러. */
.meta{display:block;height:54px;margin:0;border:0;background:transparent;border-radius:0;padding:0;min-width:0;overflow:hidden}   /* 명시 리셋 = _CRITICAL_CSS 캐스케이드 봉쇄 유지 */
.meta .mrow{display:flex;flex-wrap:nowrap;align-items:center;height:26px;gap:8px;min-width:0;overflow:hidden}
.meta .mrow2{height:24px;margin-top:4px}
.meta .chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;background:rgba(255,158,91,.12);color:#FF9E5B;padding:3px 9px;border-radius:999px;white-space:nowrap}   /* 메인 #meta .chip 동일 문법(accent-wash·버튼 위계 P0 — 필=행동 전용) */
.meta .chip svg{width:12px;height:12px}
.meta .co{font-size:15px;font-weight:700;letter-spacing:-.01em;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* ellipsis = 물리 한계 최후 방어만(전수 분포상 미도달 — JS 1단 축소 선행) */
.meta .fd{font-size:12.5px;color:#8b97a6;font-weight:500;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta .ym{font-size:12px;color:#8A95A3;font-weight:600;margin-left:auto;white-space:nowrap;text-align:right;flex:0 0 auto}
.blk{border:1px solid #63646E;background:#1E1F24;border-radius:12px;padding:14px 16px;margin:12px 0}
.blk h2{font-size:16px;margin:0 0 8px;color:#f0f4f8}
.blk h3{font-size:14px;margin:12px 0 6px;color:#dbe2ea}
.blk p{margin:6px 0;font-size:15px;color:#dbe2ea}
.blk ul{margin:6px 0;padding-left:18px}
.blk li{margin:4px 0;font-size:14.5px;color:#dbe2ea}
.blk strong{color:#f0f4f8;font-weight:700}
.blk code{background:#0A0A0B;border:1px solid #26262B;border-radius:5px;padding:1px 5px;font-size:13px}
#report hr,.blk hr{border:0;border-top:1px solid #26262B;margin:16px 0}
.cta{display:block;text-align:center;margin:20px 0 8px;padding:15px;border-radius:18px;background:linear-gradient(180deg,#FFB681,#FF9E5B);color:#2A1404;font-weight:700;text-decoration:none;font-size:16px}   /* 버튼 위계 R1(button-system spec P2): Primary 토큰 통일 — 메인 #go 그라데이션·r18 정합(평면 r12 이원 폐기) */
.cta-sub{text-align:center;color:#8b97a6;font-size:12.5px;margin-bottom:4px}
/* DQA-20260716: #6b7684(4.29:1) → #8A95A3(6.51:1) — 12px AA 4.5:1 충족 */
.foot{color:#8A95A3;font-size:12px;text-align:center;margin-top:26px;line-height:1.6}
.foot a{color:#8b97a6}
/* 광고 지면 — 토스식 네이티브 카드(본문 카드 동일 radius 20·좌 제목/부제·우 아이콘 자리·하단 dim 고지). 실광고 승인 전 뉴트럴 placeholder(거짓 카피 미노출·FLR-AGT-002) */
.ad{margin:14px 0;background:#1E1F24;border:1px solid rgba(255,255,255,.02);border-radius:20px;padding:18px 20px}
.ad-row{display:flex;align-items:center;gap:14px}
.ad-row .ad-body{flex:1;min-width:0}
.ad-row .ad-body b{display:block;font-size:15px;font-weight:700;color:#dfe4ea;letter-spacing:-.02em;line-height:1.35}
.ad-row .ad-body span{display:block;margin-top:5px;font-size:12.5px;color:#8b97a6;line-height:1.45}
.ad-icon{width:52px;height:52px;border-radius:14px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#8b97a6;background:radial-gradient(120% 120% at 30% 20%,#2b323d,#1a1f27);border:1px solid #26262B}
/* DQA-20260717: #5c636d(~2.8:1)·11px → #8A95A3(≥4.5:1)·12px — 노출 고지 텍스트 (앱 .ad-note 미러) */
.ad-note{margin-top:13px;font-size:12px;color:#8A95A3}
.ad .adsbygoogle{display:block;min-height:52px}
/* 🔴 단일 헤더 시스템(대표 지시 16:02): 메인 .anchor.pinned와 동일 스펙 — sticky top0 z50·풀블리드
   (wrap padding 전체 음수 마진 = 비침 0)·상하 padding 10/8·border-bottom 1px(경계 명료·그림자 폐기).
   480px 미디어 tag 12.5px = 메인 반응형 스케일 미러(헤더 높이 px 완전 정합 105px) */
.stickyhdr{position:sticky;top:0;z-index:50;background:#0A0A0B;margin:-20px -18px 6px;padding:10px 18px 8px;border-bottom:1px solid #26262B}
/* 🔴 글래스 전환(대표 정정 07-17 17:32 "투명도가 필요하다" — 완전 불투명 solid 정정): 반투명 .52 + blur 20px frosted(대표 19:35 "더 티가 나게" — 투명도 우선·blur 상향 가독 방어)(대표 catch 07-17 19:21 ② — 다크 위 .78 체감 0 → 하향·blur 16px = 가독 방어).
   @supports 폴백 = 위 불투명 solid 유지(backdrop 미지원 시 지저분한 비침 회귀 금지 — REQ-080 뿌리).
   blur 는 헤더 단일 요소만(성능·-webkit- = 사파리 필수·대표 모바일). 메인 body.scouting .anchor.pinned 미러. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.stickyhdr{background:rgba(10,10,11,.52);-webkit-backdrop-filter:blur(20px) saturate(1.1);backdrop-filter:blur(20px) saturate(1.1)}
}
.stickyhdr .meta{margin:0}
@media (max-width:480px){.tag{font-size:12.5px}}
/* (R4-023③ → 대표 직접 지시 07-17 17:33 override) 광고 sticky 상단 고정 — "스크롤할 때 광고가 넘어가서
   안 보이면 안 된다". client 설정 시에만 .ad-stick 부여(_ad_slot 분기): 헤더(105px 고정 스펙) 직하 고정.
   미설정(현재) placeholder 는 비고정 유지 — 빈 지면 상시 점유 방지(대표 "지금은 꺼져 있긴 하지" 인지).
   R4-023③ 판정 파생(sticky 밖)을 대표 지시로 override — 이력 본 주석+spec 명시. z49 = 헤더(z50) 아래. */
.ad-stick{position:sticky;top:105px;z-index:49}
/* 텍스트 선택 → 더 파고들기(앱 이식·자족). 개인 평결 미포함·회사 심화만.
   🔴 하단 중앙 고정 플로팅 — 선택지점 팝업 폐기로 iOS/Android 네이티브 선택메뉴와 비겹침(#2)+상단 sticky와 위치 자체 비겹침(#3). 앱 static/index.html과 동기. */
#digBtn{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%);display:none;z-index:90;width:auto;margin:0;padding:11px 20px;font-size:14px;font-weight:700;border:0;border-radius:999px;background:#FF9E5B;color:#2A1404;box-shadow:0 10px 30px -6px rgba(0,0,0,.7);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#digBtn.on{display:block;animation:digUp .18s cubic-bezier(.2,.7,.2,1)}
@keyframes digUp{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (prefers-reduced-motion:reduce){#digBtn.on{animation:none}}
.comment{margin:10px 0 14px;background:#26272E;border-radius:10px;padding:10px 12px}
.comment .cq{font-size:12px;color:#8b97a6;margin-bottom:7px;padding-bottom:7px;border-bottom:1px dashed #26262B}
.comment .cq b{color:#FF9E5B;font-weight:700}
.comment .cx{float:right;cursor:pointer;color:#8b97a6;font-size:14px;line-height:1;margin-left:8px}
.comment .cbody{font-size:14px;color:#dbe2ea;line-height:1.6}
.comment .cbody .ln{margin:4px 0}
.comment .cbody ul,.comment .cbody ol{margin:6px 0;padding-left:18px}
.comment .cbody strong{color:#f0f4f8}
.comment .cbody code{background:#0A0A0B;border:1px solid #26262B;border-radius:5px;padding:1px 5px;font-size:13px}
.comment .err{color:#ff6b6b}
.comment .cta-app{display:inline-block;margin-top:8px;color:#FF9E5B;font-weight:700;text-decoration:none}
/* 공고 생존(P0-a): 마감 경고 배너 + D-day/상시 칩. */
.deadbn{background:#2a1618;border:1px solid #5a2a2e;color:#ffb4b4;border-radius:10px;padding:11px 14px;margin:0 0 14px;font-size:13.5px;font-weight:600;line-height:1.5}
.ddaybn{display:inline-block;background:#12161d;border:1px solid #2f6b3a;color:#7fe0a0;border-radius:999px;padding:3px 11px;margin:0 0 12px;font-size:12.5px;font-weight:700}
.ddaybn.unk{border-color:#3a4250;color:#aab6c4}  /* R3-016 미확인 = 중립 회색(경고·안심 어느 쪽도 단정 안 함) */
/* 더 파고들기 가이드(#4) — 앱 static/index.html .dighint 이식(디자인 톤 동기)·dismissible. 리포트 모드에서만 노출. */
.dighint{position:relative;margin:12px 0 4px;padding:11px 32px 11px 13px;font-size:13px;color:#cdd6e2;background:rgba(255,158,91,.09);border:1px solid rgba(255,158,91,.35);border-radius:10px;line-height:1.55}
.dighint b{color:#FF9E5B;font-weight:700}
.dighint .dx{position:absolute;top:8px;right:10px;cursor:pointer;color:#8b97a6;font-size:14px;line-height:1}
body.mode-story .dighint{display:none}

/* 보기 전환 = 토스식 텍스트 탭(solid pill 폐기·활성 흰 굵게 + 애프리콧 언더바 2px). JS가 display:flex 로 노출 */
.modeseg{display:none;gap:22px;align-items:center;margin:0 0 16px;padding:0;background:none;border:0;border-bottom:1px solid #26262B;width:auto}
.modeseg button{position:relative;width:auto;margin:0;padding:11px 0;min-height:38px;font-size:15px;font-weight:600;background:none;color:#8b97a6;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s}
/* 🔴 터치 히트 확장: 시각 유지 + 유효 히트 44px (R3 ⑨ P0-2 — ::after 확장, PM320 R49 전례) */
.modeseg button::after{content:"";position:absolute;left:-6px;right:-6px;top:-3px;bottom:-3px}
.modeseg button.on{color:#eef2f7;font-weight:700}
.modeseg button.on::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#FF9E5B;border-radius:2px}
.storyview{display:none}
body.mode-story .storyview{display:block}
body.mode-story #report,body.mode-story .repextra{display:none!important}
/* 🔴 스토리 탭 = 마무리 카드 CTA 전담 (대표 catch 07-17 21:37 — 카드 공유 + 하단 공유 병존 중복 수술).
   mode-story는 스토리 덱 렌더 시에만 부여(3축 미만 미부여) = "마무리 카드 존재 시" by construction.
   리포트 탭(mode-report) = 하단 sharebar가 유일 공유 수단으로 유지. 앱은 기존 body.mode-story #shareBtn 룰이 동일 역할(index.html 647). */
body.mode-story .sharebar{display:none!important}
/* 스토리 흐름 광고 카드 = 스토리 모드에서만(리포트 모드는 repextra 내 광고). 스토리 미빌드 시 숨김 */
.adwrap-story{display:none}
body.mode-story .adwrap-story{display:block;margin:2px 0 4px}
/* R5-029 스냅 상태 뷰포트 공백 해소 — JS(syncH)가 트랙h를 현재 스냅 카드 높이로 동기. 앱 index.html 미러(G6) */
.story-deck{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 2px;margin:2px -2px;transition:height .3s cubic-bezier(.2,.7,.2,1)}
.story-deck::-webkit-scrollbar{display:none}
/* DQA-20260716: 카드 경계 = card_edge 토큰(vs bg 3.37:1·WCAG 1.4.11 boundary) — 카드 윤곽 소실(구 1.10:1) 해소 */
.story-card{position:relative;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;box-sizing:border-box;min-height:34vh;display:flex;flex-direction:column;overflow:hidden;--sc:#FF9E5B;--sc2:#FFB681;--scg:rgba(255,158,91,.16);background:radial-gradient(130% 88% at 86% 2%,var(--scg),transparent 56%),linear-gradient(168deg,#222329,#1B1C20 74%);border:1px solid #63646E;border-radius:20px;padding:26px 22px 24px;box-shadow:0 1px 0 rgba(255,255,255,.035) inset,0 20px 46px -26px rgba(0,0,0,.78)}
/* 대형 배경 숫자 = 뉴트럴 dim(애프리콧 → 흰색 저투명·토스 톤·조니 지시) */
.story-card .ghost{position:absolute;right:10px;bottom:-24px;z-index:0;font-size:168px;font-weight:900;line-height:.76;letter-spacing:-.06em;color:#fff;opacity:.045;pointer-events:none;font-variant-numeric:tabular-nums}
.story-card>*:not(.ghost){position:relative;z-index:1}
.story-card .spacer{flex:1 1 auto;min-height:12px}
.story-kicker{align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.09em;color:var(--sc);margin-bottom:17px;display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;padding:6px 12px 6px 10px;border-radius:999px;background:var(--scg)}
.story-kicker svg{width:1.2em;height:1.2em}
.story-hl{font-size:22.5px;font-weight:800;line-height:1.4;color:#f4f7fa;letter-spacing:-.3px}
.story-hl strong{color:#fff}
/* 표지(hook) — 회사명 대형 타이포 지배, 상단정렬. 크기는 JS coFont가 글자수 기반 주입 */
.story-card.hook{justify-content:flex-start}
.story-card.hook .story-co-lg{margin-top:6px;font-weight:900;line-height:1.04;letter-spacing:-1.2px;color:#fff;word-break:keep-all}
.story-card.hook .story-pos{margin-top:10px;font-size:15.5px;font-weight:700;color:#8b97a6;letter-spacing:-.2px}
.story-card.hook .story-tease{margin-top:15px;color:#8b97a6;font-size:12.5px}
.story-ev{margin-top:18px;font-size:15px;line-height:1.65;color:#c7d0da}
.story-card.hook .story-ev{font-size:16.5px;line-height:1.6;color:#dbe4ee}
.story-ev strong{color:#eef2f6;font-weight:700}
/* 🔴 형광펜 catch-all — 설정/전복 beat(.hb-line) 마크가 어느 선택자에도 안 걸려 브라우저 기본
   노랑(#FFFF00)으로 폴백하던 결함(조니·ux "순수 옐로우") 봉쇄. 전 story-card 마크를 앰버 단일 토큰으로 (REQ-067) */
.story-card mark.kw{background:var(--jr-hl-bg);color:var(--jr-hl-text);border-radius:5px;padding:0 4px;font-weight:800;box-shadow:inset 0 -2px 0 var(--jr-hl-ink)}
.bwrap{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.bwrap .tease{color:#8b97a6;font-size:12.5px}
/* 근거 원문 = 뉴트럴 ghost pill(애프리콧 틴트 → 투명+뉴트럴 보더·토스 보조 액션 톤) */
/* DQA-20260717: ghost 버튼 보더 #26262B 1.31:1 → card_edge(형태 인지 UI = edge 이원 규칙 미러) */
.story-anchor{position:relative;align-self:flex-start;width:auto;margin:18px 0 0;padding:9px 14px;font-size:12.5px;font-weight:700;color:#FFB681;background:rgba(255,158,91,.16);border:0;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;-webkit-tap-highlight-color:transparent}   /* 버튼 위계 P1(button-system spec): 메인·/r/ 근거 원문 = accent-wash r999 한 문법 통일(뉴트럴 outline r13 이원 폐기 — 카드 내 유일 액션이라 wash 허용) */
.story-anchor svg{color:#FF9E5B}
/* 🔴 터치 히트 확장: 시각 34px 유지 + 유효 히트 44px (R3 ⑨ P0-2 — 스토리 카드 심미 동결, ::after 확장) */
.story-anchor::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
.story-anchor svg{width:1.1em;height:1.1em}
.story-card.allmore{align-items:center;justify-content:center;text-align:center}
.story-card.allmore .story-hl{text-align:center}
.story-cta{display:inline-block;width:auto;margin:22px 0 0;padding:13px 24px;font-size:15px;font-weight:800;background:var(--sc);color:#08110c;border:0;border-radius:12px;cursor:pointer;text-decoration:none;box-shadow:0 12px 30px -10px var(--scg)}
/* 마무리 카드 Secondary 공유 CTA — button-system R2 (share-slot spec §2). accent 필은 Primary 1개 유지 */
.story-share{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;margin:10px 0 0;padding:12px 22px;min-height:46px;font-size:15px;font-weight:700;line-height:1;color:#CDD6E2;background:transparent;border:1px solid #63646E;border-radius:12px;cursor:pointer}
.story-share svg{width:16px;height:16px;flex:none}
.story-share:hover{border-color:var(--sc)}
.story-share:focus-visible{outline:2px solid var(--sc);outline-offset:2px}
.story-card .story-kicker,.story-card .story-hl,.story-card .story-ev,.story-card .story-co-lg,.story-card .story-pos,.story-card .story-tease,.story-card .bwrap,.story-card .story-names,.story-card .story-anchor,.story-card .story-cta,.story-card .story-share{opacity:0;transform:translateY(12px)}
.story-card.inview .story-kicker{animation:storyRise .5s .03s cubic-bezier(.2,.7,.2,1) forwards}
.story-card.inview .story-co-lg{animation:storyRise .6s .08s cubic-bezier(.2,.7,.2,1) forwards}
.story-card.inview .story-pos{animation:storyRise .55s .15s cubic-bezier(.2,.7,.2,1) forwards}
.story-card.inview .story-tease{animation:storyRise .5s .32s cubic-bezier(.2,.7,.2,1) forwards}
.story-card.inview .story-hl{animation:storyRise .55s .1s cubic-bezier(.2,.7,.2,1) forwards}
.story-card.inview .story-ev{animation:storyRise .55s .19s cubic-bezier(.2,.7,.2,1) forwards}
.story-card.inview .story-names{animation:storyRise .55s .2s cubic-bezier(.2,.7,.2,1) forwards}
.story-card.inview .bwrap{animation:storyRise .55s .17s cubic-bezier(.2,.7,.2,1) forwards}
.story-card.inview .story-anchor{animation:storyRise .5s .38s cubic-bezier(.2,.7,.2,1) forwards}
.story-card.inview .story-cta{animation:storyRise .5s .2s cubic-bezier(.2,.7,.2,1) forwards}
.story-card.inview .story-share{animation:storyRise .5s .28s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes storyRise{to{opacity:1;transform:none}}
/* === 조니식 역할별 밀도·리듬(FR-061c) — 설정=여백(숨 들이쉼)·전복=타격. 높이 통일(가로 스냅), 밀도는 폰트·여백으로. === */
.story-card.role-setup .story-hl,.story-card.role-context .story-hl{font-size:20px;font-weight:700;line-height:1.56;color:#dde5ef}
.story-names{align-self:stretch;margin-top:20px;display:flex;flex-direction:column;gap:11px}
.story-name{font-size:15.5px;font-weight:700;line-height:1.45;color:#d3dbe6;letter-spacing:-.2px;word-break:keep-all}
.story-name strong{color:#eef3f8;font-weight:800}
.story-name mark.kw{background:var(--jr-hl-bg);color:var(--jr-hl-text);border-radius:5px;padding:0 4px;font-weight:800;box-shadow:inset 0 -2px 0 var(--jr-hl-ink)}
.story-card.role-subvert{background:radial-gradient(122% 84% at 84% 0%,var(--scg),transparent 50%),linear-gradient(168deg,#24252A,#1B1C20 74%)}
.story-card .story-hl.big{font-size:25.5px;font-weight:900;line-height:1.38;color:#fff;letter-spacing:-.4px}
.story-kicker.warn{color:#fcd34d;background:rgba(251,191,36,.15)}
/* beat kicker(축 라벨) = 뉴트럴 dim(애프리콧 강등·조니 §6 — 골드 데이터와 따뜻톤 근접 해소·라벨은 별색 불요·setup_txt 재사용) */
.story-kicker.soft{color:#A2A2AC;opacity:1;font-weight:700;background:transparent;padding-left:2px;text-transform:none;letter-spacing:.01em;font-size:12px}
.story-card.role-hook .hookbeat{margin-top:22px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(12px)}
.story-card.role-hook.inview .hookbeat{animation:storyRise .6s .16s cubic-bezier(.2,.7,.2,1) forwards}
.hb-line{font-size:16px;line-height:1.58}
.hb-setup{color:#A2A2AC;font-style:italic}
.hb-setup strong{color:#c5cdd8;font-weight:700}
.hb-subvert{color:#eef2f7;font-weight:700}
.hb-subvert strong{color:#ffffff}
.story-card.role-axis.first{justify-content:flex-start}
.story-card.role-axis.first .story-co-lg{margin:6px 0 4px;font-weight:900;line-height:1.05;letter-spacing:-1.2px;color:#fff;word-break:keep-all}
.story-card.role-axis.first .story-pos{margin-bottom:8px;font-size:15px;font-weight:700;color:#8792a0;letter-spacing:-.2px}
.story-card.role-axis .story-beat{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.story-card.role-axis.first .story-beat{margin-top:18px}
.story-card.role-axis .story-quote{margin-top:15px;font-size:14.5px;line-height:1.62;color:#c3ccd7;opacity:.96}
.story-card.role-axis .story-quote strong{color:#e8eef4}
.story-card.role-axis .story-quote mark.kw{background:var(--jr-hl-bg);color:var(--jr-hl-text);border-radius:5px;padding:0 4px;font-weight:800;box-shadow:inset 0 -2px 0 var(--jr-hl-ink)}
.story-mean{margin-top:16px;display:flex;gap:8px;align-items:flex-start;font-size:14.5px;line-height:1.56;font-weight:700;color:var(--sc2)}
.story-mean svg{flex:0 0 auto;width:1.15em;height:1.15em;margin-top:2px;opacity:.9}
.story-mean>span{flex:1 1 auto}
.story-mean strong{color:#fff}
.story-mean mark.kw{background:var(--jr-hl-bg);color:var(--jr-hl-text);border-radius:5px;padding:0 3px;font-weight:800;box-shadow:inset 0 -2px 0 var(--jr-hl-ink)}
/* "그런데" 전환 = 텍스트 뉴트럴 dim + 글리프만 애프리콧(조니 지시 — 라벨은 뉴트럴·화살표 글리프가 반전 신호) */
.hb-turn{display:inline-flex;align-items:center;gap:6px;color:#8b97a6;font-size:12px;font-weight:700;letter-spacing:.01em;margin:1px 0}
.hb-turn svg{width:16px;height:16px;color:var(--sc)}
/* R6-038 nav+dots 한 행 — 화살표를 카드 좌우 오버레이(top:44%·카드 높이 종속 = R5 ⑨ 교차 81% 구조 원인)에서 덱 아래 dots 행으로: 콘텐츠 safe-area 물리 분리(교차 0 구조 보장). 앱 index.html 미러(G6) */
/* R7-047 페이저 sticky — 긴 카드에서 dots·화살표가 fold 아래로 사라지지 않게 뷰포트 하단 고정 후 자연 위치 정착(콘텐츠 절단 없는 어포던스 확보). 앱 index.html 미러(G6) */
.story-nav-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px auto 2px;position:sticky;bottom:10px;z-index:5;width:fit-content;padding:5px 12px;border-radius:999px;background:rgba(10,10,11,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
/* PAGER-GAP (REQ-078d·조니 R15 P2): sticky 페이저 pill이 통과 구간에서 아래 인터랙티브 콘텐츠(근거원문 등) 클릭을 가로채지 않게 — pill 배경·여백 pointer 투과, 도트·화살표만 수용(양보). 앱 index.html 미러 */
.story-nav-row .dot,.story-nav-row .story-nav{pointer-events:auto}
/* DQA-20260716: gap 7→17px = dot 중심간격 24px — WCAG 2.5.8 AA(Target Size Minimum) spacing 충족.
   가로 44px 완전 달성은 dots 행 폭 286px(뷰포트 73%) 필요 = 페이저 시각 정체성 파괴라 불채택,
   스와이프(카드 전면)·데스크탑 화살표가 동등 기능 대체 수단(2.5.8 예외 축 병행) */
.story-dots{display:flex;justify-content:center;gap:17px}
/* DQA-20260716: dot 비활성 = dot_off 토큰(vs bg 3.92:1) — 구 border 재사용(1.31:1·존재 인지 불가) 해소 */
.story-dots .dot{position:relative;width:7px;height:7px;border-radius:999px;background:#6E6E78;transition:width .25s,background .25s;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* R7-047 dot 실효 터치 세로 44px+ (7+19*2=45 — 시각 7px 유지). 가로는 dot 간 겹침 없는 상한 = 중심간격 24px(±8.5px). REQ-039 공유 버튼과 동일 ::after 확장 패턴 */
.story-dots .dot::after{content:"";position:absolute;left:-8.5px;right:-8.5px;top:-19px;bottom:-19px}
.story-dots .dot.on{width:22px;background:var(--dot-on,#FF9E5B)}
.storyview{position:relative}
.story-nav{display:none}
@media (hover:hover) and (pointer:fine){
.story-nav{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border-radius:999px;border:1px solid #26262B;background:rgba(10,10,11,.82);color:#dbe4ee;cursor:pointer;transition:opacity .2s,background .15s}
.story-nav:hover{background:rgba(23,28,38,.95)}
.story-nav[disabled]{opacity:.22;cursor:default}
.story-nav svg{width:20px;height:20px}
}
.sharebar{display:flex;justify-content:center;margin:14px 0 2px}
/* R6-039(REQ-JOBRECON-20260713-039) 터치 히트 확장 — 시각 39.6px 유지 + ::after로 실효 44px+ (R5 조니 이진탐색 39.64~39.78 실측·R3 ⑨ P0-2 modeseg 전례).
   -4px 사유: border 1px가 ::after containing block(padding box)을 안쪽으로 만들어 -3이 실질 -2로 동작(G9 43.98 실측) — border 감안 -4 = 실질 -3/방향 → 45.7px */
/* 이 정찰 공유 = 뉴트럴 ghost(애프리콧 틴트 → 투명+뉴트럴 보더·주CTA solid 1개 원칙 = 공유는 보조) */
.sharebar button{position:relative;display:inline-flex;align-items:center;gap:7px;width:auto;padding:10px 18px;font-size:13.5px;font-weight:600;color:#cbd1da;background:transparent;border:1px solid #63646E;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}   /* 버튼 위계 R2(button-system spec P1): Secondary r12 단일(r13 파편 폐기) */
.sharebar button::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.sharebar button svg{width:1.15em;height:1.15em}
.sharetoast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 64px);transform:translateX(-50%);z-index:95;background:#222329;border:1px solid #2E2E34;color:#dbe4ee;font-size:13px;font-weight:600;padding:9px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s}
.sharetoast.on{opacity:1}
@media (prefers-reduced-motion:reduce){.story-card .story-kicker,.story-card .story-hl,.story-card .story-ev,.story-card .story-co-lg,.story-card .story-pos,.story-card .story-tease,.story-card .bwrap,.story-card .story-names,.story-card .story-anchor,.story-card .story-cta,.story-card .story-share,.story-card .hookbeat{opacity:1!important;transform:none!important;animation:none!important}.story-deck{transition:none}}