/* ══════════════════════════════════════════════════════════════ textyle HOT — 뉴스룸 / 마켓 터미널. 원칙: 그라데이션·글래스·이모지·과한 라운드 없음. 뉴스프린트 지면 + 잉크 + 속보 레드. 1px 룰선으로 지면을 나눈다. 숫자(순위·시각·수치)는 전부 tabular mono = 터미널 감각. ══════════════════════════════════════════════════════════════ */ /* 기본 테마 = 다크. 시스템 설정(prefers-color-scheme)과 무관하게 다크로 시작한다. 사용자가 ◐ 로 직접 바꾼 값(localStorage.theme)만 존중하며, 그건 header.php 의 인라인 스크립트가 로 먼저 붙여서 첫 페인트부터 반영된다(깜빡임 없음). ⚠ app.js 의 토글도 기본값을 'dark' 로 봐야 한다. 시스템 설정을 기본으로 읽으면 라이트 시스템 사용자가 버튼을 눌러도 아무 일이 안 일어나는 것처럼 보인다. */ :root{ --bg:#191a1d; --surface:#212328; --surface-2:#2a2c32; --surface-3:#34363d; --border:#3a3d45; --rule:#e6e4de; --text:#e9e7e1; --text-2:#c0bdb5; --muted:#96938b; --accent:#ff6a52; /* 속보 레드(다크 보정) */ --accent-2:#4ed6b6; /* 보조 잉크 그린 */ --up:#ff6a52; --dn:#79aeff; /* 순위 상승/하락 */ --hi:#4a4326; /* 신규 항목 하이라이트 플래시 */ --r:3px; --r2:2px; --pill:999px; /* 본문 서체: Noto Sans KR (cdn.textyle.net/f/noto-sans-kr.css, unicode-range 서브셋). ⚠ 웹폰트가 제공하는 웨이트는 **400 과 700 뿐이다.** 예전엔 CSS 가 500·600·650·750·800·900 을 썼는데 전부 400/700 으로 반올림돼 렌더됐다 — 즉 있지도 않은 위계를 지정하고 있었다. 지금은 실제로 존재하는 두 값만 쓴다. 굵기를 더 쪼개고 싶으면 폰트 서버(textyle.net)에서 600 서브셋을 먼저 만들어야 한다. 여기서 숫자만 바꾸면 아무 일도 안 일어난다. ⚠ --mono 목록의 등폭 폰트에는 **한글 글리프가 없다**(SFMono·JetBrains·Menlo·Consolas 전부). 그런데 --mono 를 쓰는 선택자 상당수가 한글을 담는다 — 속보/단독 뱃지, 카테고리 칩, "N개 매체", 티커의 '속보' 라벨, '더 보기 →', 상단 요일·날씨. 맨 끝이 monospace 이면 그 한글들이 OS 기본 고딕으로 떨어져 본문과 서체가 달라지고 윈도우·맥·안드로이드에서 결과가 제각각이 된다. 본문 서체를 마지막 폴백으로 두면 숫자·영문은 등폭, 한글만 본문 서체로 간다(글리프 단위 폴백이라 한 줄 안에서 섞인다). */ --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono","Cascadia Mono",Menlo,Consolas,"Noto Sans KR",sans-serif; --sans:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; --nav-h:112px; color-scheme:dark; } /* 라이트는 이제 '사용자가 고른 예외'다 */ :root[data-theme=light]{ --bg:#f4f2ec; --surface:#fffefa; --surface-2:#eae6dc; --surface-3:#e0dbcf; --border:#d8d2c4; --rule:#16150f; --text:#16150f; --text-2:#3a382e; --muted:#75705f; --accent:#cf2216; --accent-2:#0b5f52; --up:#cf2216; --dn:#1f5fbf; --hi:#fff3a8; color-scheme:light; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans); font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased; min-height:100vh;display:flex;flex-direction:column; font-variant-numeric:tabular-nums} a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:#fff} .wrap{max-width:1240px;margin:0 auto;padding:0 20px;width:100%} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.3px} /* 화면에는 안 보이지만 스크린리더·검색엔진에는 읽히는 텍스트. 홈처럼 시각적 제목을 둘 자리가 없는 페이지의 h1 용. display:none 이면 둘 다에게 안 읽힌다. */ .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ── 마스트헤드 ── */ .nav{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:2px solid var(--rule)} .nav-top{max-width:1240px;margin:0 auto;padding:13px 20px 11px;display:flex;align-items:center;gap:16px} .brand{display:flex;align-items:baseline;gap:9px;flex:none;font-weight:700;font-size:23px; letter-spacing:-0.6px;line-height:1} /* 마크는 favicon.svg 하나를 쓴다 — textyle.net(폰트) 과 같은 기하학, 색만 HOT 팔레트. ⚠ 여기 색을 바꾸려면 favicon.svg 를 고쳐야 한다(CSS 로는 못 건드린다). */ .brand .mark{width:21px;height:21px;background:url(favicon.svg) center/contain no-repeat; flex:none;align-self:center} .brand .wm{color:var(--text)} /* HOT 이 이 사이트의 정체다. 회색 mono 로 두면 화면에서 제일 조용한 요소가 된다 → accent 칩. */ .brand .sub{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.8px; background:var(--accent);color:#fff;padding:2px 5px 3px;border-radius:var(--r2); text-transform:uppercase;align-self:center} .nav-mid{margin-left:auto;display:flex;align-items:center;gap:14px;font-family:var(--mono); font-size:12px;color:var(--muted);letter-spacing:-.2px;white-space:nowrap} .nav-mid b{color:var(--text-2);font-weight:700} .nav-right{display:flex;align-items:center;gap:5px;flex:none} .icon-btn{width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--border); background:var(--surface);color:var(--text-2);cursor:pointer;border-radius:var(--r); font-size:13px;font-family:inherit;padding:0;transition:.12s} .icon-btn:hover{border-color:var(--rule);color:var(--text)} .search-btn{display:flex;align-items:center;gap:7px;height:31px;padding:0 10px;border:1px solid var(--border); background:var(--surface);color:var(--muted);cursor:pointer;border-radius:var(--r);font:inherit;font-size:12.5px} .search-btn:hover{border-color:var(--rule);color:var(--text)} .search-btn .kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--border); padding:1px 4px;border-radius:2px;color:var(--muted)} /* 카테고리 레일 */ .nav-cats{border-top:1px solid var(--border);background:var(--surface)} .nav-cats-in{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;gap:0; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .nav-cats-in::-webkit-scrollbar{display:none} .nav-cats a{padding:11px 14px;font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap; border-bottom:2px solid transparent;margin-bottom:-1px;letter-spacing:-.3px;transition:.12s} .nav-cats a:hover{color:var(--text)} .nav-cats a.on{color:var(--text);border-bottom-color:var(--accent)} /* ── 속보 티커 ── */ .ticker{border-bottom:1px solid var(--border);background:var(--surface);overflow:hidden;height:32px} /* 내용만 본문 칼럼(1240px)에 맞춘다. 띠 배경·룰선은 전체 폭 유지 — nav-cats 와 같은 방식. */ .ticker-in{max-width:1240px;margin:0 auto;padding:0 20px;height:100%;display:flex;align-items:stretch} .ticker-lab{flex:none;display:flex;align-items:center;padding:0 11px;background:var(--accent);color:#fff; font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1px} .ticker-lab::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;margin-right:6px; animation:blip 1.4s steps(1,end) infinite} @keyframes blip{0%,60%{opacity:1}61%,100%{opacity:.15}} /* 한 건씩 교체되는 뷰포트. 항목을 겹쳐 쌓고 .on 하나만 보인다. ⚠ 높이를 부모(.ticker)에 고정해 두어야 교체할 때 레이아웃이 안 흔들린다. */ .tk-view{flex:1;min-width:0;position:relative;height:100%} .tk-item{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 14px; font-size:13.5px;color:var(--text-2);opacity:0;visibility:hidden;transition:opacity .28s ease} .tk-item.on{opacity:1;visibility:visible} .tk-item b{font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-item:hover b{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .tk-item i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none} /* 화살표는 JS 가 붙었을 때만 의미가 있다 → 기본 숨김, app.js 가 .tk-js 를 달면 보인다. JS 가 없어도 첫 항목은 그대로 읽히고 눌린다. */ .tk-nav{display:none} .tk-js .tk-nav{flex:none;display:flex;align-items:center;gap:2px;padding-right:8px} .tk-cnt{font-family:var(--mono);font-size:10px;color:var(--muted);padding-right:4px} .tk-btn{width:26px;height:26px;display:grid;place-items:center;border:0;background:none;cursor:pointer; color:var(--muted);font-size:17px;line-height:1;font-family:inherit;border-radius:var(--r2)} .tk-btn:hover{background:var(--surface-2);color:var(--text)} /* JS 가 없으면 첫 항목만 보인다 — 여전히 읽히고 눌린다. 화살표는 그때 의미가 없으니 숨긴다. */ main{flex:1;padding-bottom:56px} /* ── 섹션 라벨 (지면 헤더) ── */ .sec-label{display:flex;align-items:center;gap:10px;margin:36px 0 0;padding-bottom:8px; border-bottom:2px solid var(--rule);font-size:15.5px;font-weight:700;letter-spacing:-.4px} .sec-label a,.sec-label span{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700; color:var(--muted);letter-spacing:-.2px} .sec-label a:hover{color:var(--accent)} .empty{color:var(--muted);font-size:13.5px;padding:26px 4px;text-align:center} /* ══════════ 이슈 페이지 ══════════ */ .issue-hero{border:1px solid var(--border);border-top:3px solid var(--rule);background:var(--surface); margin:22px 0 18px;padding:15px 17px 16px} .ih-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:13px} .ih-top h1{margin:0;font-size:17.5px;font-weight:700;letter-spacing:-.5px;display:flex;align-items:center;gap:8px} .ih-top h1::before{content:"";width:6px;height:15px;background:var(--accent)} .ih-stat{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)} .ih-stat b{color:var(--text-2);font-weight:700} /* 키워드 = 터미널 시세판 */ .ih-tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:0; border-top:1px solid var(--border);border-left:1px solid var(--border)} .ih-tag{position:relative;display:flex;align-items:center;gap:7px;padding:7px 10px;overflow:hidden; border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .12s} .ih-tag::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;width:var(--f,0%); background:var(--accent);opacity:.55} .ih-tag:hover{background:var(--surface-2)} .ih-tag.on{background:var(--rule);color:var(--bg)} .ih-tag.on em,.ih-tag.on span{color:var(--bg);opacity:.66} .ih-tag em{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted); min-width:16px;flex:none} .ih-tag b{font-weight:700;font-size:14px;letter-spacing:-.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ih-tag span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);flex:none} .ih-tag .mv{font-family:var(--mono);font-style:normal;font-size:9.5px;font-weight:700;flex:none} .mv.up{color:var(--up)} .mv.dn{color:var(--dn)} .mv.new{color:var(--accent-2)} .ih-more{display:none;margin-top:10px;width:100%;padding:8px;cursor:pointer;background:var(--surface-2); border:1px solid var(--border);color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;border-radius:var(--r)} /* 필터 바 */ .issue-bar{position:sticky;top:var(--nav-h);z-index:40;margin:0 0 2px;padding:9px 0;background:var(--bg); border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:7px} .ib-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .ib-kind{gap:2px} .ib-kind a{padding:6px 14px;font-size:14px;font-weight:700;color:var(--muted);border:1px solid transparent; border-radius:var(--r);letter-spacing:-.3px} .ib-kind a:hover{color:var(--text)} .ib-kind a.on{background:var(--rule);color:var(--bg)} .ib-search{margin-left:auto;display:flex;align-items:center;background:var(--surface); border:1px solid var(--border);border-radius:var(--r);padding:0 3px 0 10px;height:29px} .ib-search input{border:0;background:none;color:var(--text);font:inherit;font-size:12.5px;width:132px;outline:none} .ib-search button{border:0;background:none;cursor:pointer;font-size:11px;padding:4px 7px;color:var(--muted);font-family:var(--mono)} .ib-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px} .ib-cats::-webkit-scrollbar{display:none} .ib-cats a{display:flex;align-items:center;gap:5px;padding:5px 11px;font-size:13.5px;font-weight:700; color:var(--muted);white-space:nowrap;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)} .ib-cats a i{font-style:normal;font-family:var(--mono);font-size:9.5px;opacity:.6} .ib-cats a:hover{color:var(--text);border-color:var(--rule)} .ib-cats a.on{background:var(--rule);color:var(--bg);border-color:var(--rule)} .ib-cats a.on i{opacity:.55} .ib-lab{font-family:var(--mono);color:var(--muted);font-size:10px;letter-spacing:.7px;text-transform:uppercase} .ib-sep{width:1px;height:14px;background:var(--border);margin:0 4px} .chip{padding:5px 10px;font-size:13px;font-weight:700;color:var(--muted);border:1px solid transparent;border-radius:var(--r)} .chip:hover{color:var(--text);background:var(--surface-2)} .chip.on{color:var(--text);border-color:var(--rule);background:var(--surface)} .chip.ghost{margin-left:auto;border-color:var(--border);font-family:var(--mono);font-size:10.5px} /* 2단 지면 */ .issue-layout{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:28px;align-items:start;margin-top:14px} .issue-main{min-width:0;position:relative} /* ── 기사 리스트 ── */ .issue-list{border-top:1px solid var(--border)} .issue-row{display:flex;gap:13px;padding:13px 6px;border-bottom:1px solid var(--border); transition:background .12s;position:relative} .issue-row:hover{background:var(--surface)} /* ⚠ `.issue-row:visited .ir-title{color:...}` 는 브라우저가 **무시한다**. 방문기록 노출을 막으려고 :visited 는 링크 자기 자신에만, 그것도 color 계열에만 적용된다(자손 선택자 불가). 그래서 지금까지 "읽은 기사" 표시가 전혀 동작하지 않았다. 앵커에 걸고 제목이 상속받게 한다. */ .issue-row:visited{color:var(--muted)} .ir-rank{flex:none;width:30px;text-align:right;font-family:var(--mono);font-size:13px;font-weight:700; color:var(--muted);padding-top:2px} .issue-row:nth-child(-n+3) .ir-rank{color:var(--accent);font-weight:700} .ir-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px} .ir-title{font-size:16.5px;font-weight:700;line-height:1.52;letter-spacing:-.42px;color:inherit; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .issue-row:hover .ir-title{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .ir-flag{display:inline-block;margin-right:6px;padding:0 5px;font-family:var(--mono);font-size:10px; font-weight:700;letter-spacing:.3px;color:#fff;vertical-align:1.5px;line-height:16px;border-radius:2px} .ir-flag.br{background:var(--accent)} .ir-flag.ex{background:var(--accent-2)} .ir-meta{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);flex-wrap:wrap} .ir-src{font-weight:700;color:var(--text-2)} .ir-cat{font-family:var(--mono);font-size:11px;padding:0 5px;border:1px solid var(--border);border-radius:2px} .ir-meta time{font-family:var(--mono);font-size:11.5px} /* "N개 매체 보도" = 이 사이트가 가진 유일한 사회적 증거(여러 매체가 같이 다룬 사건이다). 회색 잔글씨로 두면 아무도 안 본다 → accent 테두리 칩으로 올린다. */ .ir-n{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--accent);font-style:normal} /* ⚠ 테두리 칩은 **.ir-meta(flex 행) 안에서만** 쓴다. 홈(.hi-row i · .lead-side i)의 메타는 "매체 · 카테고리 · 시각 · N개 매체" 한 줄 텍스트라, 여기에 inline-block + border + line-height 를 넣으면 그 한 조각만 줄 높이가 튀고 앞의 가운뎃점과 붙어 어색해진다. 한 줄 텍스트 안에서는 색·굵기만으로 충분히 눈에 띈다. */ .ir-meta .ir-n{font-size:11px;border:1px solid currentColor;border-radius:var(--r2); padding:0 4px;line-height:15px;display:inline-block} .ir-clk{font-family:var(--mono);font-size:11.5px} /* 로딩 스켈레톤 */ .issue-list.loading{position:relative;min-height:220px} .issue-list.loading>*{opacity:.28;filter:saturate(.2)} .sk-row{display:flex;gap:12px;padding:12px 6px;border-bottom:1px solid var(--border)} .sk-row i{display:block;height:11px;border-radius:2px;background:var(--surface-2); animation:sk 1.15s ease-in-out infinite} .sk-row .a{width:26px;flex:none;height:11px} .sk-row .b{flex:1} .sk-row .b i:first-child{width:min(88%,540px);margin-bottom:8px;height:13px} .sk-row .b i:last-child{width:180px;height:9px} @keyframes sk{0%,100%{opacity:.45}50%{opacity:1}} /* ── 영상 그리드 ── */ .vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px;margin-top:14px} .vid-card{border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column; transition:.14s;border-radius:var(--r);overflow:hidden} .vid-card:hover{border-color:var(--rule);transform:translateY(-2px)} .vc-th{display:block;aspect-ratio:16/9;background:var(--surface-2);position:relative} .vc-th img{width:100%;height:100%;object-fit:cover;display:block} .vc-b{padding:9px 11px 11px;display:flex;flex-direction:column;gap:5px} .vc-b b{font-size:14px;font-weight:700;line-height:1.42;letter-spacing:-.3px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .vc-m{font-family:var(--mono);font-size:10.5px;color:var(--muted)} /* ── 페이지네이션 ── */ .pager{display:flex;justify-content:center;align-items:center;gap:3px;margin:22px 0 6px;flex-wrap:wrap} .pager a{min-width:31px;height:31px;display:grid;place-items:center;padding:0 8px;font-family:var(--mono); font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--border);border-radius:var(--r)} .pager a:hover{color:var(--text);border-color:var(--rule)} .pager a.on{background:var(--rule);color:var(--bg);border-color:var(--rule)} .pager .gap{color:var(--muted);padding:0 2px;font-family:var(--mono)} /* ── 사이드 레일 ── */ .issue-rail{position:sticky;top:calc(var(--nav-h) + 62px);display:flex;flex-direction:column;gap:15px} .ir-card{background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--rule);padding:12px 13px} .ir-card h4{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:6px} .ir-card h4 small{margin-left:auto;font-family:var(--mono);font-weight:400;color:var(--muted);font-size:10px} .ir-note{margin:0 0 10px;font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.6} .ir-note b{color:var(--text-2)} .ir-bar{position:relative;display:flex;align-items:center;gap:7px;padding:5px 6px;font-size:12.5px;overflow:hidden} .ir-bar span{position:absolute;inset:0 auto 0 0;background:var(--surface-2)} .ir-bar b,.ir-bar em{position:relative} .ir-bar b{font-weight:700} .ir-bar em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted)} .ir-top{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;line-height:1.4} .ir-top:last-child{border-bottom:0} .ir-top em{font-style:normal;font-family:var(--mono);font-weight:700;color:var(--accent);flex:none;font-size:10.5px;padding-top:2px} .ir-top i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:2px} .ir-legal p{margin:0 0 7px;font-size:12px;color:var(--muted);line-height:1.62} .ir-legal a{font-family:var(--mono);font-size:10.5px;color:var(--accent);font-weight:700} /* 날씨 */ .wx{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border)} .wx div{background:var(--surface);padding:6px 9px;display:flex;align-items:center;gap:5px;font-size:12.5px} .wx b{font-weight:700;color:var(--text-2)} .wx em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11px} /* ══════════ 홈 ══════════ */ .lead{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0;align-items:start; border-top:3px solid var(--rule);border-bottom:1px solid var(--border);margin-top:20px} /* 좌: 리드(1행) + 보도매체(2행) · 우: 랭킹이 두 행에 걸쳐 세로 룰선을 이룬다 */ .lead-main{grid-column:1;grid-row:1;padding:20px 26px 14px 0;min-width:0} .lead-kick{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px; font-weight:700;letter-spacing:1px;color:var(--accent);margin-bottom:10px} .lead-main h2{margin:0 0 12px;font-size:35px;font-weight:700;line-height:1.22;letter-spacing:-0.8px} .lead-main:hover h2{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px} .lead-meta{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;color:var(--muted);flex-wrap:wrap} .lead-side{grid-column:2;grid-row:1 / span 2;align-self:stretch;padding:20px 0 22px 24px; border-left:1px solid var(--border);display:flex;flex-direction:column;min-width:0} .lead-side a{padding:9px 0;border-bottom:1px solid var(--border);display:flex;gap:9px} .lead-side a:last-child{border-bottom:0} .lead-side a:hover b{text-decoration:underline;text-underline-offset:3px} .lead-side em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--accent);flex:none;font-weight:700;padding-top:2px} .lead-side b{font-size:15px;font-weight:700;line-height:1.5;letter-spacing:-.35px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lead-side i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:3px} .home-tags{display:flex;flex-wrap:wrap;gap:0;border-left:1px solid var(--border);margin:14px 0 0} .home-tags a{display:flex;align-items:center;gap:6px;padding:7px 12px;font-size:13.5px;font-weight:700; border-right:1px solid var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .home-tags a:hover{background:var(--surface)} .home-tags a em{font-style:normal;font-family:var(--mono);color:var(--muted);font-size:10px;font-weight:700} .home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:0 26px;margin-top:2px} .hi-row{display:flex;gap:10px;padding:13px 0;border-bottom:1px solid var(--border)} .hi-row:hover b{text-decoration:underline;text-underline-offset:3px} .hi-row em{font-style:normal;font-family:var(--mono);font-weight:700;font-size:11px;color:var(--accent);flex:none;padding-top:2px} .hi-row div{min-width:0} .hi-row b .ir-flag,.lead-side b .ir-flag{vertical-align:1px;line-height:15px} .hi-row b{display:-webkit-box;font-size:15px;font-weight:700;line-height:1.5;letter-spacing:-.35px; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hi-row i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted);display:block;margin-top:3px} /* ══════════ 웹 도구 ══════════ */ /* ⚠ .tool-search 의 flex:1 과 .tool-sort 는 원래 .tool-top(flex 행) 안에서 쓰라고 만든 것인데, 도구 인덱스는 이 둘을 .tools-hero 에 바로 넣는다. .tools-hero 가 flex 가 아니어서 flex:1 이 죽고 간격도 0 이라 검색폼과 카테고리/인기순이 서로 붙어 겹쳐 보였다(2026-08-02). 여기를 flex 행으로 만들면 두 문제가 한 번에 풀린다 — 제목·설명은 통줄로 내린다. */ .tools-hero{padding:26px 0 20px;border-bottom:2px solid var(--rule);margin-bottom:18px; display:flex;flex-wrap:wrap;align-items:center;gap:10px} .tools-hero h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-0.7px;flex:0 0 100%} .tools-hero p{margin:0 0 4px;color:var(--muted);font-size:14px;flex:0 0 100%} .tool-top{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .tool-search{flex:1;min-width:180px;padding:8px 12px;border:1px solid var(--border);background:var(--surface); color:var(--text);font:inherit;font-size:13.5px;border-radius:var(--r);outline:none} .tool-search:focus{border-color:var(--rule)} .tool-sort{display:flex;gap:2px} .tool-sort a{padding:6px 11px;font-size:12.5px;font-weight:700;color:var(--muted);border:1px solid var(--border);border-radius:var(--r)} .tool-sort a.on{background:var(--rule);color:var(--bg);border-color:var(--rule)} .tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1px; background:var(--border);border:1px solid var(--border)} .tool-card{background:var(--surface);padding:14px 15px;display:flex;flex-direction:column;gap:6px;transition:.12s;min-height:104px} .tool-card:hover{background:var(--surface-2)} .tc-ic{font-size:19px;line-height:1;filter:grayscale(1);opacity:.8} .tool-card b{font-size:15px;font-weight:700;letter-spacing:-.4px} .tc-d{font-size:12.5px;color:var(--muted);line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tc-stat{margin-top:auto;font-family:var(--mono);font-size:10px;color:var(--muted);display:flex;gap:9px} .tool-chip{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border); background:var(--surface);border-radius:var(--r);transition:.12s} .tool-chip:hover{border-color:var(--rule)} .tool-chip b{font-size:13px;font-weight:700;letter-spacing:-.3px} .tool-back{display:inline-block;margin:18px 0 12px;font-family:var(--mono);font-size:11.5px;color:var(--muted)} .tool-back:hover{color:var(--accent)} .tool-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:14px 0 0; padding-top:12px;border-top:1px solid var(--border)} .tool-views,.tool-stat{font-family:var(--mono);font-size:11px;color:var(--muted)} .tool-share{display:flex;gap:5px;margin-left:auto} .sh{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface); cursor:pointer;font-size:11.5px;border-radius:var(--r);color:var(--text-2);font-family:var(--mono);padding:0} .sh:hover{border-color:var(--rule)} .tool-in,.tool-out,.tool-ta{width:100%;padding:10px 12px;border:1px solid var(--border);background:var(--surface); color:var(--text);font-family:var(--mono);font-size:13px;border-radius:var(--r);outline:none;line-height:1.6} .tool-in:focus,.tool-ta:focus{border-color:var(--rule)} .tool-out{background:var(--surface-2);white-space:pre-wrap;word-break:break-all;min-height:44px} .tool-ta{min-height:132px;resize:vertical} .tool-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:9px 0} .tool-l{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:12px 0 5px;letter-spacing:.2px} .tool-btns{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0} .tool-note{font-size:11.5px;color:var(--muted);margin:10px 0 0;line-height:1.6} .tool-msg{font-size:12.5px;color:var(--accent-2);font-weight:700;min-height:19px;margin:7px 0 0;font-family:var(--mono)} .tool-hr{border:0;border-top:1px solid var(--border);margin:18px 0} .tool-qr{display:block;margin:12px auto;max-width:100%;background:#fff;padding:9px;border-radius:var(--r)} .tool-sw{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer} .tool-slash{font-family:var(--mono);color:var(--muted)} .ft-row{display:flex;gap:9px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:12.5px} .ft-name{font-weight:700} .ft-res{font-family:var(--mono);color:var(--muted);margin-left:auto;font-size:11.5px} .ft-cp{cursor:pointer;font-family:var(--mono);font-size:10.5px;color:var(--accent)} .sn-row{display:flex;gap:9px;padding:5px 0;font-size:12.5px;font-family:var(--mono)} .myip-big{font-family:var(--mono);font-size:23px;font-weight:700;letter-spacing:-.6px;word-break:break-all} .lt-wrap{position:relative;margin:14px 0} .lt-set{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0} .lt-ball{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%; background:var(--rule);color:var(--bg);font-family:var(--mono);font-weight:700;font-size:14px} .lt-plus{align-self:center;color:var(--muted);font-family:var(--mono)} .rl-wrap{position:relative;display:grid;place-items:center;margin:16px 0} .rl-stage{position:relative} .rl-svg{max-width:100%;height:auto} .rl-ptr{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:19px;color:var(--accent)} .rl-win{text-align:center;font-weight:700;font-size:15px;margin-top:11px;min-height:22px} .tsec{margin-bottom:20px} /* ══════════ 공용 컨트롤 ══════════ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px; background:var(--rule);color:var(--bg);border:1px solid var(--rule);cursor:pointer; font:inherit;font-size:13px;font-weight:700;border-radius:var(--r);transition:.12s} .btn:hover{opacity:.86} .btn.ghost{background:transparent;color:var(--text);border-color:var(--border)} .btn.ghost:hover{border-color:var(--rule);opacity:1} .btn.small{padding:5px 11px;font-size:12px} .mini-btn{display:inline-block;padding:3px 9px;font-family:var(--mono);font-size:10.5px;font-weight:700; border:1px solid var(--border);color:var(--muted);border-radius:var(--r)} .mini-btn:hover{border-color:var(--rule);color:var(--text)} .badge{display:inline-block;padding:2px 7px;font-family:var(--mono);font-size:11px;font-weight:700; border:1px solid var(--border);border-radius:2px;color:var(--muted)} .badge.dev{border-color:var(--accent-2);color:var(--accent-2)} .badge.life{border-color:var(--accent);color:var(--accent)} .lock{font-family:var(--mono);font-size:10px;color:var(--muted)} .row{display:flex;gap:9px;align-items:center;flex-wrap:wrap} .meta{font-family:var(--mono);font-size:11px;color:var(--muted)} .like-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--border); background:var(--surface);color:var(--muted);cursor:pointer;font:inherit;font-size:12px;border-radius:var(--r)} .like-btn:hover{border-color:var(--rule)} .like-btn.liked{border-color:var(--accent);color:var(--accent)} .like-count{font-family:var(--mono);font-size:11px} input,textarea,select{font-family:inherit} .panel input:not([type=checkbox]):not([type=radio]),.panel textarea,.panel select{ padding:8px 11px;border:1px solid var(--border);background:var(--surface);color:var(--text); font-size:13.5px;border-radius:var(--r);outline:none} .panel input:focus,.panel textarea:focus{border-color:var(--rule)} /* ══════════ 관리자 ══════════ */ .panel{background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--rule); padding:16px 18px;margin-bottom:16px} /* 도구 상세의 제목은 h3 → h1 로 승격했다(그 페이지가 곧 SEO 랜딩이라). 생김새는 그대로 둔다. */ .panel h3,.panel.tool h1{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:-.4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .panel-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap} .console-grid{display:grid;grid-template-columns:186px minmax(0,1fr);gap:22px;align-items:start;margin-top:20px} .console-side{position:sticky;top:calc(var(--nav-h) + 16px)} .console-main{min-width:0;font-size:14px;line-height:1.65} /* 관리자 가독성(2026-07-30): 설명 문단이 12px 이라 한글이 답답했다. 콘솔 안에서만 키운다 — .panel/.meta 는 공개 페이지도 쓰므로 전역으로 올리면 안 된다. */ .console-main .panel h3{font-size:15.5px;margin-bottom:13px} .console-main .meta{font-size:12.5px} .console-main .panel p{font-size:13.5px;line-height:1.7} .console-main .panel label{font-size:13.5px} .console-main .panel code{font-size:12.5px} .console-main .empty{font-size:14px} .cs-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;letter-spacing:-.5px; padding-bottom:10px;border-bottom:2px solid var(--rule);margin-bottom:10px} .cs-dot{width:7px;height:7px;background:var(--accent);flex:none} .cs-nav{display:flex;flex-direction:column;gap:1px} .cs-nav a{padding:8px 11px;font-size:13.5px;font-weight:700;color:var(--muted);border-radius:var(--r)} .cs-nav a:hover{background:var(--surface-2);color:var(--text)} .cs-nav a.on{background:var(--rule);color:var(--bg)} .cs-exit{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--muted)} .cs-skin{margin-top:16px} .cs-skin-l{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase} .cs-skin-opts{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap} .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;background:var(--border); border:1px solid var(--border);margin-bottom:16px} .kpi{background:var(--surface);padding:12px 14px} .kpi-n{font-family:var(--mono);font-size:23px;font-weight:700;letter-spacing:-1px;display:block} .kpi-l{font-size:12.5px;color:var(--muted);margin-top:2px;display:block} /* ══════════ 추이 그래프 (SVG) ══════════ ⚠ .chart/.bar 는 원래 **div 막대그래프**용이었다(display:flex + background + border-top). 그런데 k.php · brief.php · admin.php 는 전부 안에 를 그린다. SVG 도형에는 background·border 가 **안 먹는다** — fill/stroke 로 칠해야 한다. 그래서 rect 에 fill 이 지정되지 않았고, SVG 기본 fill 인 **검정**으로 칠해져 있었다 (실측 2026-08-02: "그래프가 너무 까맣다"). axis 도 stroke 가 없어 아예 안 보였다. */ svg.chart{display:block;width:100%;height:180px;margin:10px 0 4px;overflow:visible} svg.chart .bar{fill:var(--accent);fill-opacity:.55;transition:fill-opacity .15s} svg.chart .bar:hover{fill-opacity:1} /* 가장 최근 막대를 진하게 — 어디가 '지금'인지 한눈에 */ svg.chart .bar:last-of-type{fill-opacity:.95} svg.chart .axis{stroke:var(--border);stroke-width:2;vector-effect:non-scaling-stroke} /* 눈금선: 25/50/75% 높이에 옅은 가로선. viewBox 0~160 기준(160 이 바닥). */ svg.chart .grid{stroke:var(--border);stroke-width:1;stroke-dasharray:2 4;opacity:.6; vector-effect:non-scaling-stroke} /* div 막대그래프가 필요해지면 이 클래스를 쓸 것(SVG 와 섞지 말 것) */ .chart-div{display:flex;align-items:flex-end;gap:3px;height:132px;margin:10px 0 4px} .chart-div .bar{flex:1;background:var(--surface-2);border-top:2px solid var(--accent);min-height:2px;transition:.2s} .chart-div .bar:hover{background:var(--surface-3)} .chart-x{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted)} .axis{font-family:var(--mono);font-size:10px;color:var(--muted)} .bar-track{height:6px;background:var(--surface-2);border-radius:2px;overflow:hidden} .bar-fill{height:100%;background:var(--accent)} .dist{display:flex;flex-direction:column;gap:7px} /* 스파크라인 행(키워드 히스토리). ⚠ .dist 를 재사용하면 안 된다 — .dist 는 column 이라 인라인으로 display:flex 만 얹으면 방향이 안 바뀌어 SVG 가 세로로 늘어난다(실제로 깨졌음). */ .spark-row{display:flex;flex-direction:row;align-items:center;gap:12px;padding:5px 0;border-bottom:1px solid var(--border)} .spark-row:last-child{border-bottom:0} .spark-row > a{flex:0 0 96px;font-weight:700;font-size:13.5px} .spark-row > svg{flex:0 0 120px;width:120px;height:26px;overflow:visible} .spark-row > .meta{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap} .dist-l{display:flex;justify-content:space-between;font-size:13px;margin-bottom:3px} .stat-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px} .manage-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border); font-size:13.5px;flex-wrap:wrap} .manage-item:last-child{border-bottom:0} .manage-item b{font-weight:700} .x{border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer;font:inherit; font-size:12px;padding:3px 9px;border-radius:var(--r)} .x:hover{border-color:var(--accent);color:var(--accent)} .seg,.period-seg{display:inline-flex;gap:2px} .seg a,.period-seg a{padding:4px 10px;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted); border:1px solid var(--border);border-radius:var(--r)} .seg a.on,.period-seg a.on{background:var(--rule);color:var(--bg);border-color:var(--rule)} .ok{color:var(--accent-2);font-size:12.5px;font-weight:700} .auth-wrap{display:grid;place-items:center;min-height:62vh;padding:20px} .auth-card{width:100%;max-width:344px;background:var(--surface);border:1px solid var(--border); border-top:3px solid var(--rule);padding:28px 26px} .auth-logo{width:38px;height:38px;display:grid;place-items:center;background:var(--rule);color:var(--bg); font-weight:700;font-size:19px;margin-bottom:14px} .auth-card h2{margin:0 0 5px;font-size:19px;font-weight:700;letter-spacing:-.7px} .auth-sub{margin:0 0 18px;font-size:12.5px;color:var(--muted);line-height:1.6} .auth-card input{width:100%;padding:10px 12px;border:1px solid var(--border);background:var(--bg); color:var(--text);font:inherit;font-size:14px;border-radius:var(--r);margin-bottom:10px;outline:none} .auth-card input:focus{border-color:var(--rule)} .auth-btn{width:100%;justify-content:center} .auth-err{color:var(--accent);font-size:12.5px;margin:0 0 12px;font-weight:700} .article{font-size:14.5px;line-height:1.75} .article h2,.article h3{letter-spacing:-.6px;margin:22px 0 9px} .article p{margin:0 0 13px} .article ul,.article ol{padding-left:20px} .article code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:1px 5px;border-radius:2px} /* ══════════ ⌘K 명령 팔레트 ══════════ */ .cmdk{position:fixed;inset:0;z-index:200;display:none;background:color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter:blur(3px);padding:12vh 20px 20px} .cmdk.open{display:block} .cmdk-box{max-width:568px;margin:0 auto;background:var(--surface);border:1px solid var(--rule); box-shadow:0 22px 60px -18px rgba(0,0,0,.5);animation:pop .16s ease-out} @keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .cmdk-box input{width:100%;padding:15px 17px;border:0;border-bottom:1px solid var(--border); background:none;color:var(--text);font:inherit;font-size:15.5px;outline:none} .cmdk-list{max-height:52vh;overflow-y:auto} .cmdk-list a{display:flex;align-items:center;gap:10px;padding:9px 17px;border-bottom:1px solid var(--border);font-size:13.5px} .cmdk-list a:last-child{border-bottom:0} .cmdk-list a.sel,.cmdk-list a:hover{background:var(--surface-2)} .cmdk-list .k{font-family:var(--mono);font-size:9.5px;color:var(--muted);border:1px solid var(--border); padding:1px 5px;border-radius:2px;flex:none} .cmdk-list .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmdk-list .s{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted);flex:none} .cmdk-empty{padding:22px 17px;color:var(--muted);font-size:13px;text-align:center} /* ── 진행바 / 맨위로 / 푸터 ── */ .progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:100;transition:width .1s} .to-top{position:fixed;right:18px;bottom:18px;width:38px;height:38px;border:1px solid var(--border); background:var(--surface);color:var(--text);cursor:pointer;opacity:0;pointer-events:none; transition:.2s;z-index:50;font-size:15px;border-radius:var(--r)} .to-top.on{opacity:1;pointer-events:auto} .to-top:hover{border-color:var(--rule)} footer{border-top:2px solid var(--rule);background:var(--surface);padding:22px 20px; font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;line-height:1.9} footer a:hover{color:var(--accent)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important} /* 속보 티커는 자동 교체 자체를 멈춘다(app.js 가 matchMedia 로 같이 판단한다). 화살표는 남으니 사용자가 직접 넘길 수 있다 — 정보 접근을 뺏지 않으면서 자동 변화만 없앤다. */ .tk-item{transition:none} } /* ── 반응형 ── */ @media(max-width:1080px){ .issue-layout{grid-template-columns:1fr} .issue-rail{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:4px} .issue-rail::-webkit-scrollbar{display:none} .ir-card{flex:0 0 256px} .console-grid{grid-template-columns:1fr} .console-side{position:static} .cs-nav{flex-direction:row;flex-wrap:wrap} } @media(max-width:820px){ .lead{grid-template-columns:1fr} /* ⚠ 모바일 순서를 리드 → **랭킹 2~6위** → 보도매체 띠 로 바꿨다(2026-08-01). 예전엔 '보도한 매체' 띠(최대 12개 칩, 2~3줄)가 리드와 랭킹 사이에 끼어서 첫 화면에 **누를 수 있는 기사가 리드 1건뿐**이었다. 목록형 사이트에서 첫 화면의 링크 개수는 클릭 수와 거의 선형이다. 띠는 리드를 이미 본 사람에게 의미가 있으니 뒤로 뺀다. */ .lead-main{grid-column:1;grid-row:1;padding:14px 0 10px} .lead-side{grid-column:1;grid-row:2;padding:10px 0 14px;border-left:0;border-top:1px solid var(--border)} .lead-main h2{font-size:23px} .stat-2col{grid-template-columns:1fr} } @media(max-width:640px){ :root{--nav-h:100px} /* 속보 티커 — 390px 화면에서 라벨(46px)+카운터·화살표(94px)를 빼면 제목에 남는 폭이 130px 남짓이라 한글 8자쯤에서 잘렸다. 모바일에선 제목이 전부다 → 매체명과 카운터를 접어 폭을 되돌려준다. */ .ticker-in{padding:0 14px} .tk-item{padding:0 10px;gap:6px} .tk-item i:last-child{display:none} .tk-cnt{display:none} .wrap{padding:0 14px} .nav-top{padding:11px 14px 9px;gap:10px} .brand{font-size:19px;gap:7px} /* ⚠ HOT 을 숨기지 말 것. 숨기면 모바일 브랜드가 그냥 'textyle' 이라 폰트 사이트와 구별이 안 된다. 자리는 nav-mid(날짜·날씨)를 접어서 만든다 — 그건 본문에도 있는 정보다. */ .brand .sub{font-size:9.5px;padding:2px 4px} .nav-mid{display:none} .nav-cats-in{padding:0 14px} .issue-hero{padding:13px 13px 14px} .ih-tags{grid-template-columns:1fr 1fr} /* ⚠ 접기(max-height + 페이드 마스크)는 **'더 보기' 버튼이 있는 곳에만** 걸어야 한다. 예전엔 .ih-tags 전체에 걸려 있었는데, 그 클래스를 브리핑 페이지의 '급상승' 블록도 쓴다. 거기엔 .ih-more 버튼이 없어서(app.js bindMore 도 버튼을 못 찾고 그냥 빠진다) 모바일에서 급상승 키워드가 174px 에서 잘리고 아래쪽이 페이드로 사라진 채 **펼칠 방법이 없었다** (실측 2026-08-02: /brief/2026-08-01 급상승 10개 중 아랫줄이 안 보임). 그래서 이슈 페이지의 키워드 구름(#tags)에만 한정한다. */ #tags{max-height:174px;overflow:hidden;mask-image:linear-gradient(#000 70%,transparent)} #tags.open{max-height:none;mask-image:none} .ih-more:not([hidden]){display:block} .ih-stat{margin-left:0;width:100%} /* 키워드를 고르면 이 입력창에 그 단어가 들어간다. order:3 으로 아랫줄에 떨어지는데 .ib-kind 의 gap 이 2px 뿐이라 뉴스/커뮤니티 버튼에 딱 붙어 보였다(2026-08-02). */ .ib-search{width:100%;margin-left:0;margin-top:9px;order:3} .ib-search input{width:100%} .ir-title{font-size:14px} .ir-rank{width:19px} .issue-row{padding:10px 2px;gap:9px} .home-grid{grid-template-columns:1fr} .tools-hero h1{font-size:24px} } /* 리드 기사 아래 '보도한 매체' 띠 — 본문을 못 싣는 자리를 보도 현황으로 채운다 */ .lead-main{display:flex;flex-direction:column} .lead-srcs{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:6px;align-items:center; padding:0 26px 20px 0} .ls-lab{font-family:var(--mono);font-size:10px;letter-spacing:.6px;color:var(--muted); width:100%;margin-bottom:2px;text-transform:uppercase} .lead-srcs a{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;font-size:12px;font-weight:700; border:1px solid var(--border);border-radius:var(--r);background:var(--surface)} .lead-srcs a:hover{border-color:var(--rule)} .lead-srcs a i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--muted)} /* ⚠ 이 미디어쿼리는 **위쪽 @media(max-width:820px) 블록이 아니라 여기** 있어야 한다. 바로 위 .lead-srcs 기본 규칙(grid-row:2)이 파일에서 더 뒤에 선언돼 있어서, 명시도가 같은 위쪽 미디어쿼리의 grid-row 는 뒤 규칙에 덮인다. 실제로 그렇게 물렸다(2026-08-02): 모바일에서 .lead-side(2행)와 .lead-srcs(2행)가 같은 그리드 셀에 겹쳐 렌더됐다. 모바일 순서: 리드(1) → 랭킹 2~6위(2) → 보도매체 띠(3). */ @media(max-width:820px){.lead-srcs{grid-row:3;padding:0 0 16px}} /* ══════════ PC 1면 지면화 (2026-08-02) ══════════ ⚠ **이 블록은 반드시 모든 .lead-* 기본 규칙 뒤에 있어야 한다.** 미디어쿼리는 명시도를 올려주지 않는다. 처음엔 .lead 기본 규칙 바로 뒤(=.lead-main 기본 규칙 앞)에 뒀다가 그대로 물렸다: 뒤에 오는 `.lead-main{padding:20px 26px 14px 0}` 축약형이 여기서 준 padding-left 를 0 으로 되돌려, 3px 잉크 괘선이 제목 글자 위에 겹쳐 그려졌다. `.lead-side` 도 padding-right 가 0 으로 돌아가 오른쪽 칼럼이 테두리에 딱 붙었다. → padding 은 축약형으로 통째 지정하고, 위치는 맨 뒤로 고정한다. 리드 좌우가 맨바닥이라 '지면'이 아니라 '떠 있는 텍스트'로 읽히던 문제를 고친다. 그라데이션·글래스는 쓰지 않는다(이 스타일시트의 원칙). 모바일은 이미 꽉 차서 제외. */ @media(min-width:821px){ .lead{background:var(--surface);border:1px solid var(--border); border-top:3px solid var(--rule);padding:0 24px} .lead-main{position:relative;padding:20px 26px 14px 18px} .lead-main::before{content:"";position:absolute;left:0;top:24px;bottom:16px; width:3px;background:var(--accent)} /* 같은 1열이므로 리드 본문과 들여쓰기를 맞춘다(안 맞추면 아래 띠만 왼쪽으로 튀어나온다) */ .lead-srcs{padding:0 26px 20px 18px} .lead-side{background:var(--surface-2);padding:20px 24px 22px 24px;margin-right:-24px} } .ir-cmt{font-family:var(--mono);font-size:11.5px;color:var(--accent-2);font-weight:700} .ir-cmt.approx{color:var(--muted);font-weight:400} /* 관측이 오래된 댓글수 = 하한값(+) */ .mv.same{color:var(--muted);opacity:.55} /* 순위 동일 */ /* 새 이슈 알림 알약 — 화면을 가리지 않고, 누르기 전까지 내용을 건드리지 않는다. 눈에 띄어야 하지만 읽기를 방해하면 안 되므로: 큰 크기 + 은은한 맥동 + 글로우. 깜빡임은 쓰지 않는다. */ .newpill{position:sticky;top:calc(var(--nav-h) + 10px);z-index:35;display:flex;justify-content:center; height:0;overflow:visible;pointer-events:none} .newpill button{pointer-events:auto;transform:translateY(-22px) scale(.86);opacity:0; display:inline-flex;align-items:center;gap:9px;padding:11px 24px 11px 20px;border:0;cursor:pointer; background:var(--accent);color:#fff;font:inherit;font-size:15px;font-weight:700;letter-spacing:-.4px; border-radius:var(--pill);white-space:nowrap; box-shadow:0 8px 24px -4px color-mix(in srgb,var(--accent) 60%,transparent), 0 2px 10px -2px rgba(0,0,0,.35), 0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent); transition:transform .34s cubic-bezier(.34,1.56,.64,1),opacity .28s,box-shadow .2s} .newpill.show button{transform:none;opacity:1;animation:pillPulse 2.4s ease-out infinite} .newpill button:hover{filter:brightness(1.1);transform:translateY(-2px) scale(1.03);animation-play-state:paused} .newpill button:active{transform:translateY(0) scale(.98)} /* 화살표 아이콘 */ .newpill button::before{content:"↑";font-size:15px;font-weight:700;line-height:1; display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%; background:rgba(255,255,255,.22)} .newpill b{font-family:var(--mono);font-size:16px;font-weight:700} /* 시선을 끄는 은은한 맥동(고리가 퍼져나감) — 깜빡이지 않아 읽기를 방해하지 않는다 */ @keyframes pillPulse{ 0% {box-shadow:0 8px 24px -4px color-mix(in srgb,var(--accent) 60%,transparent), 0 2px 10px -2px rgba(0,0,0,.35), 0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)} 70% {box-shadow:0 8px 24px -4px color-mix(in srgb,var(--accent) 60%,transparent), 0 2px 10px -2px rgba(0,0,0,.35), 0 0 0 14px transparent} 100%{box-shadow:0 8px 24px -4px color-mix(in srgb,var(--accent) 60%,transparent), 0 2px 10px -2px rgba(0,0,0,.35), 0 0 0 0 transparent}} @media (prefers-reduced-motion:reduce){.newpill.show button{animation:none}} @media(max-width:640px){.newpill button{font-size:14px;padding:10px 18px 10px 15px}} /* 새로 들어온 행 잠깐 강조 */ .issue-row.fresh,.hi-row.fresh{animation:freshflash 2.6s ease-out} @keyframes freshflash{0%{background:var(--hi)}100%{background:transparent}} /* ══════════════════════════════════════════════════════════════ 모바일 최적화 (2026-08-02) ⚠ **이 블록은 파일의 맨 끝이다.** 앞선 규칙에 덮이지 않으려고 여기 둔 것이니 새 규칙을 이 아래에 추가하지 말 것(이 스타일시트에서 세 번 물린 실수다). ══════════════════════════════════════════════════════════════ */ /* ① 입력창 포커스 시 페이지가 확대되던 문제 — 모바일 불만의 실제 원인. iOS 사파리는 **글자 16px 미만인 입력요소에 포커스하면 페이지를 자동으로 확대한다.** 확대된 채로 남으니 상단 고정 네비가 통째로 커져 보인다. 손가락 확대가 아니다. 이슈 검색창 12.5px · 도구 검색 13.5px · ⌘K 15.5px 전부 해당됐다. 해결은 확대를 막는 게(user-scalable=no) 아니라 **글자를 16px 로 올리는 것**이다. */ @media(max-width:820px){ input,textarea,select,.tool-search,.ib-search input,.cmdk-box input{font-size:16px} .ib-search input{width:100%} } /* ② 100vh → 100dvh. 모바일 브라우저는 주소창이 접혔다 펴져서 100vh 가 실제 보이는 높이보다 크다. */ body{min-height:100dvh} /* ③ 상단 고정 네비 밑으로 앵커가 숨지 않게 */ html{scroll-padding-top:calc(var(--nav-h) + 14px)} /* ④ 탭 하이라이트 — 기본 회색 사각형 대신 브랜드 색 잔상. 끄지는 않는다(누른 느낌이 없어짐). */ html{-webkit-tap-highlight-color:rgba(255,106,82,.18)} /* ⑤ 스크롤 체이닝 차단 — 목록 끝에서 계속 당길 때 페이지 전체가 튕기는 것 방지 */ body{overscroll-behavior-y:contain} /* ⑥ 어떤 미디어도 가로로 넘치지 않게 (기사 썸네일·도구 SVG) */ img,svg,video,iframe{max-width:100%} /* ⑦ 노치·펀치홀 안전영역. env() 를 모르는 브라우저는 @supports 로 통째 건너뛴다. */ @supports (padding:max(0px)){ .wrap,.nav-top,.nav-cats-in,.ticker-in{ padding-left:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right)); } footer{padding-bottom:max(26px,env(safe-area-inset-bottom))} @media(max-width:640px){ .wrap,.nav-top,.nav-cats-in,.ticker-in{ padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(14px,env(safe-area-inset-right)); } } } /* ⑧ 터치 타깃. 애플 HIG·WCAG 2.5.8 이 권하는 최소 크기에 맞춘다(기존엔 26~31px 이었다). */ @media(max-width:640px){ .ticker{height:40px} .tk-btn{width:34px;height:34px;font-size:19px} .icon-btn{width:36px;height:36px} .search-btn{height:36px;padding:0 12px} .pager a{min-width:40px;height:40px} .ib-kind a{padding:9px 14px} .ib-cats a{padding:8px 12px} .chip{padding:8px 12px} .tool-sort a{padding:9px 13px} .ih-tag{padding:10px 11px} .home-tags a{padding:9px 11px} .like-btn,.sh{min-height:36px} }