/* ============================================================ Super Financial — mockup v3 "캐주얼 포털" 레퍼런스: i-boss.co.kr · 회색빛 배경 #f2f4f6 + 그림자 없는 흰 카드 + 8~16px 라운드 · 연보라 포인트 #4e07d2, 보조 컬러(핑크·오렌지·블루) 자유롭게 · 본문 14px, 섹션 제목 18px/700 — 조밀한 위젯 포털 글·지표 데이터는 실제 superfinancial.net 것. ============================================================ */ /* ---------- tokens ---------- */ :root { --bg: #f2f4f6; --card: #ffffff; --sunken: #f7f8fa; --ink: #191f28; --ink-2: #4e5968; --muted: #8b95a1; --line: #e5e8eb; --bar: #d3d8de; /* 차트 회색 막대 */ --violet: #4e07d2; --violet-2: #6d3df0; --violet-soft: #f2ecff; --blue: #3182f6; --blue-soft: #e8f2ff; --pink: #ff5b8e; --orange: #fc6d35; --red: #ff4949; --green: #00b26f; --sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; --max: 1180px; --measure: 640px; /* 글 상세 본문 읽기 폭 */ --gut: clamp(14px, 3.5vw, 24px); --r: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --stick: 70px; /* sticky 칩바(56px) + 여유 — 스크롤 목적지 오프셋 */ --ease: cubic-bezier(0.25, 0.8, 0.35, 1); } :root[data-theme="dark"] { --bg: #15171c; --card: #1d2026; --sunken: #24282f; --ink: #eef1f5; --ink-2: #b6bfcb; --muted: #7e8896; --line: #2c313a; --bar: #3b424e; --violet: #a583ff; --violet-2: #8b63f5; --violet-soft: #2a2140; --blue: #6aa6ff; --blue-soft: #1d2a3d; --pink: #ff86ae; --orange: #ff9057; --red: #ff7a7a; --green: #35d191; } /* ============================================================ 한/영 — 두 언어를 HTML에 같이 심고 으로 하나만 보여준다. JS는 lang 속성만 바꾸면 되고, 나머지는 전부 이 두 줄이 처리한다. ============================================================ */ html[lang="ko"] .t-en, html[lang="en"] .t-ko { display: none !important; } /* 영어판에 아직 없는 이미지 자리 — 빈 틀로 두고 예정이라고 알린다 */ .cover-todo { display: grid; place-items: center; gap: 6px; width: 100%; aspect-ratio: 3 / 2; background: repeating-linear-gradient( -45deg, var(--sunken), var(--sunken) 12px, var(--card) 12px, var(--card) 24px ); border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--muted); text-align: center; padding: 16px; } .cover-todo b { font-size: 13px; font-weight: 700; color: var(--ink-2); } .cover-todo span { font-size: 11.5px; line-height: 1.5; } .post-thumb .cover-todo, .hero-thumb .cover-todo { aspect-ratio: 16 / 9; height: 100%; border: 0; border-radius: 0; padding: 10px; } .post-thumb .cover-todo b, .hero-thumb .cover-todo b { font-size: 11.5px; } .post-thumb .cover-todo span, .hero-thumb .cover-todo span { font-size: 10.5px; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.55; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--violet); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r) 0; } .skip:focus { left: 0; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ============================================================ HEADER ============================================================ */ .top { background: var(--card); border-bottom: 1px solid var(--line); } .top-inner { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 24px); min-height: 62px; } .logo { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.035em; white-space: nowrap; } .logo-badge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--violet), var(--violet-2)); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0; transform: rotate(-4deg); } .searchbar { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 380px; background: var(--sunken); border: 1.5px solid transparent; border-radius: 999px; padding: 8px 16px; transition: border-color 0.18s var(--ease), background 0.18s var(--ease); } .searchbar:focus-within { border-color: var(--violet); background: var(--card); } .searchbar svg { width: 16px; height: 16px; flex: none; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; } .searchbar input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; } .searchbar input::placeholder { color: var(--muted); } .top-spacer { flex: 1; } .top-actions { display: flex; align-items: center; gap: 8px; } .icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--sunken); cursor: pointer; font-size: 15px; line-height: 1; transition: background 0.18s var(--ease); } .icon-btn:hover { background: var(--violet-soft); } .btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; background: var(--violet); color: #fff; transition: transform 0.14s var(--ease), filter 0.18s var(--ease); } .btn:hover { filter: brightness(1.08); } .btn:active { transform: scale(0.97); } .btn-ghost { background: var(--sunken); color: var(--ink-2); } /* 이 페이지엔 번역본이 없을 때 — 눌러도 되지만 지금은 바뀔 게 없다는 표시 */ .btn-ghost.is-muted { opacity: 0.55; } .btn-ghost:hover { background: var(--violet-soft); color: var(--violet); filter: none; } /* 칩바가 덮지 않도록 스크롤 목적지를 아래로 밀어 둔다 */ #calc, #quiz, #gloss, #cal, #feed, #tools, #sub, #briefs { scroll-margin-top: var(--stick); } /* 스크롤로 도착한 위젯을 잠깐 표시 */ .widget.is-target, .card.is-target { animation: target-flash 1.4s var(--ease); } @keyframes target-flash { 0%, 35% { box-shadow: 0 0 0 2px var(--violet); } 100% { box-shadow: 0 0 0 2px transparent; } } /* ---- 카테고리 칩 내비 ---- */ .chipnav { position: sticky; top: 0; z-index: 30; background: var(--card); border-bottom: 1px solid var(--line); } .chipnav-inner { display: flex; align-items: center; gap: 6px; padding-block: 10px; overflow-x: auto; scrollbar-width: none; } .chipnav-inner::-webkit-scrollbar { display: none; } .chipnav a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background 0.18s var(--ease), color 0.18s var(--ease); } .chipnav a:hover { background: var(--sunken); color: var(--ink); } /* 지금 보고 있는 페이지 */ .chipnav a.is-here { background: var(--ink); color: var(--card); } /* 스크롤해서 지금 보고 있는 위젯 */ .chipnav a.is-on { background: var(--violet-soft); color: var(--violet); } /* 이동 칩과 스크롤 칩 사이 구분선 */ .chip-sep { flex: none; width: 1px; align-self: stretch; margin-inline: 6px; background: var(--line); } .chip-jump { font-weight: 500; } /* ============================================================ LAYOUT ============================================================ */ .shell { padding-block: 18px 40px; } .grid { display: grid; gap: 16px; } @media (min-width: 1000px) { .grid { grid-template-columns: minmax(0, 1fr) 316px; align-items: start; } } .col, .side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } @media (min-width: 1000px) { .side { position: sticky; top: 62px; } } /* ---------- 카드 기본 ---------- */ .card { background: var(--card); border-radius: var(--r-lg); overflow: hidden; } .card-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; } .card-head h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; } .card-head .more { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color 0.18s var(--ease); } .card-head .more:hover { color: var(--violet); } .card-body { padding: 0 18px 16px; } /* ============================================================ 히어로 배너 ============================================================ */ .hero { position: relative; border-radius: var(--r-lg); background: linear-gradient(118deg, #4e07d2 0%, #6d3df0 48%, #9b5cf6 100%); color: #fff; overflow: hidden; display: grid; gap: 18px; padding: 22px; } @media (min-width: 700px) { .hero { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; padding: 26px 28px; } } .hero::after { content: ""; position: absolute; right: -90px; top: -110px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 255, 255, 0.09); pointer-events: none; } .hero-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 11px; align-items: flex-start; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; } .hero h2 { margin: 0; font-size: clamp(20px, 2.6vw, 27px); font-weight: 800; line-height: 1.35; letter-spacing: -0.035em; word-break: keep-all; } .hero h2 a:hover { text-decoration: underline; text-underline-offset: 4px; } .hero p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); word-break: keep-all; } .hero .btn-hero { background: #fff; color: var(--violet); margin-top: 4px; } .hero-thumb { position: relative; z-index: 1; border-radius: var(--r-md); overflow: hidden; background: #fff; aspect-ratio: 16 / 9; } .hero-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s var(--ease); } .hero-thumb:hover img { transform: scale(1.03); } /* ============================================================ 탭 + 랭킹 리스트 ============================================================ */ .tabs { display: flex; gap: 4px; padding: 14px 14px 0; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { appearance: none; border: 0; background: transparent; border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background 0.18s var(--ease), color 0.18s var(--ease); } .tab:hover { color: var(--ink-2); background: var(--sunken); } .tab.is-on { color: var(--violet); background: var(--violet-soft); } .ranklist { list-style: none; margin: 0; padding: 8px 6px 10px; } .ranklist li.is-hidden { display: none; } .ranklist a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: var(--r); transition: background 0.16s var(--ease); } .ranklist a:hover { background: var(--sunken); } .rk { font-size: 14px; font-weight: 800; color: var(--muted); text-align: center; } .ranklist li:nth-child(-n + 3) .rk { color: var(--violet); } .rt { display: flex; align-items: center; gap: 7px; min-width: 0; } .rt > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .ranklist a:hover .rt > span:first-child { text-decoration: underline; text-underline-offset: 2px; } .cmt { flex: none; font-size: 12px; font-weight: 700; color: var(--pink); } .hot { flex: none; font-size: 11px; } .rd { font-size: 12px; color: var(--muted); white-space: nowrap; } /* ============================================================ 위젯 벤토 ============================================================ */ .bento { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .widget { background: var(--card); border-radius: var(--r-lg); padding: 16px 16px 15px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .widget h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -0.03em; } .widget .hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; } .widget .hint a { color: var(--violet); font-weight: 600; } .widget .hint a:hover { text-decoration: underline; } /* 환율 계산기 */ .calc-pair { display: flex; gap: 6px; margin-bottom: 10px; } .calc-pair-btn { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; background: var(--sunken); color: var(--ink-2); font-size: 12.5px; font-weight: 700; cursor: pointer; } .calc-pair-btn.is-on { background: var(--violet-soft); border-color: transparent; color: var(--violet); } .calc-pair-btn:hover { filter: brightness(0.98); } .calc-row { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 6px; align-items: center; } .calc-field { background: var(--sunken); border-radius: var(--r); padding: 8px 10px; } .calc-field span { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 1px; } .calc-field input { width: 100%; border: 0; background: transparent; outline: none; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; } .calc-swap { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--violet-soft); color: var(--violet); font-size: 13px; cursor: pointer; transition: transform 0.25s var(--ease); } .calc-swap:hover { transform: rotate(180deg); } /* 퀴즈 */ .quiz-q { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.5; word-break: keep-all; } .quiz-choices { display: grid; gap: 6px; } .quiz-choice { text-align: left; border: 1.5px solid var(--line); background: var(--card); border-radius: var(--r); padding: 8px 11px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.16s var(--ease); } .quiz-choice:hover:not(:disabled) { border-color: var(--violet); color: var(--violet); } .quiz-choice:disabled { cursor: default; } .quiz-choice.is-right { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); } .quiz-choice.is-wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); } .quiz-why { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-2); background: var(--sunken); border-radius: var(--r); padding: 9px 11px; word-break: keep-all; } .quiz-why a { color: var(--violet); font-weight: 700; } .quiz-why a:hover { text-decoration: underline; } /* 용어 사전 */ .gloss-input { width: 100%; border: 1.5px solid var(--line); background: var(--sunken); border-radius: var(--r); padding: 8px 11px; font-size: 13px; outline: none; transition: border-color 0.18s var(--ease); } .gloss-input:focus { border-color: var(--violet); background: var(--card); } .gloss-list { list-style: none; margin: 0; padding: 0; max-height: 138px; overflow-y: auto; display: grid; gap: 2px; } .gloss-list li.is-hidden { display: none; } .gloss-list b { font-size: 12.5px; font-weight: 700; } .gloss-list p { margin: 1px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; word-break: keep-all; } .gloss-list > li { padding: 6px 8px; border-radius: 6px; } .gloss-list > li:hover { background: var(--sunken); } .gloss-empty { font-size: 12px; color: var(--muted); padding: 8px; } /* 캘린더 */ .cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cal-list a { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: var(--r); background: var(--sunken); transition: background 0.16s var(--ease); } .cal-list a:hover { background: var(--violet-soft); } .cal-d { display: grid; place-items: center; border-radius: 7px; background: var(--card); padding: 5px 0; font-size: 13px; font-weight: 800; color: var(--violet); line-height: 1.15; } .cal-d small { display: block; font-size: 10px; font-weight: 700; color: var(--muted); } .cal-t { font-size: 12.5px; font-weight: 600; line-height: 1.45; word-break: keep-all; } .cal-t em { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--orange); margin-bottom: 1px; } /* ============================================================ 글 카드 그리드 ============================================================ */ .feed { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); padding: 4px 18px 18px; } .post { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .post.is-hidden { display: none; } .post-thumb { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; background: var(--sunken); aspect-ratio: 16 / 9; } .post-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s var(--ease); } .post:hover .post-thumb img { transform: scale(1.04); } .pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; line-height: 1.5; } .pill.markets { background: var(--blue-soft); color: var(--blue); } .pill.sciences { background: var(--violet-soft); color: var(--violet); } .post-title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: -0.03em; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post:hover .post-title { color: var(--violet); } .post-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 2px; } .like { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 2px 4px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; transition: color 0.16s var(--ease), background 0.16s var(--ease); } /* 목록 카드에서만 우측 끝으로 밀어 둔다 */ .post-meta .like { margin-left: auto; } .like:hover { background: var(--sunken); } .like.is-on { color: var(--pink); } .like .heart { font-size: 12px; transition: transform 0.25s var(--ease); } .like.is-on .heart { transform: scale(1.22); } .feed-empty { padding: 30px 0 34px; text-align: center; color: var(--muted); font-size: 13px; } /* ============================================================ 2단 리스트 ============================================================ */ .duo { display: grid; gap: 16px; } @media (min-width: 680px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .minilist { list-style: none; margin: 0; padding: 2px 6px 12px; } .minilist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: var(--r); transition: background 0.16s var(--ease); } .minilist a:hover { background: var(--sunken); } .minilist .mt { font-size: 13px; font-weight: 500; line-height: 1.45; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .minilist a:hover .mt { color: var(--violet); } /* ============================================================ 사이드 ============================================================ */ .pulse-list { list-style: none; margin: 0; padding: 0 8px 12px; display: grid; gap: 2px; } .pulse-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r); } .pulse-list li.pulse-sec { display: block; padding: 10px 10px 2px; margin-top: 4px; pointer-events: none; } .pulse-list li.pulse-sec:first-child { margin-top: 0; padding-top: 4px; } .pulse-list li.pulse-sec span { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; } .pulse-list li:hover { background: var(--sunken); } .pulse-list li.pulse-sec:hover { background: transparent; } .pq-name { font-size: 13px; font-weight: 700; } .pq-name small { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); } .pq-val { font-size: 14px; font-weight: 700; } .pq-dp { border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; min-width: 58px; text-align: center; } .pq-dp.chg-up { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); } .pq-dp.chg-down { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); } .pulse-foot { padding: 0 18px 15px; font-size: 11.5px; color: var(--muted); } /* 포인트 카드 */ .promo { border-radius: var(--r-lg); padding: 18px; color: #fff; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .promo.pink { background: linear-gradient(140deg, #ff5b8e, #fc6d35); } .promo h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.03em; } .promo p { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); word-break: keep-all; } .promo .btn { background: #fff; color: var(--orange); margin-top: 4px; } .sub-form { display: flex; gap: 6px; width: 100%; margin-top: 4px; } .sub-form input { flex: 1; min-width: 0; border: 0; border-radius: var(--r); padding: 9px 12px; font-size: 13px; outline: none; background: rgba(255, 255, 255, 0.92); color: var(--ink); } .sub-form button { border: 0; border-radius: var(--r); padding: 9px 14px; font-size: 13px; font-weight: 700; background: rgba(0, 0, 0, 0.22); color: #fff; cursor: pointer; } .sub-form button:hover { background: rgba(0, 0, 0, 0.34); } .sub-msg { margin: 0; font-size: 11.5px; color: rgba(255, 255, 255, 0.92); min-height: 1.1em; } /* 태그 */ .tagwrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 16px; } .tag { background: var(--sunken); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--ink-2); transition: all 0.16s var(--ease); } .tag:hover { background: var(--violet-soft); color: var(--violet); } /* 파이프라인 */ .flow { list-style: none; margin: 0; padding: 0 18px 16px; display: grid; gap: 8px; } .flow li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; } .flow .step { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; background: var(--violet-soft); color: var(--violet); font-size: 11px; font-weight: 800; } .flow b { display: block; font-size: 13px; font-weight: 700; } .flow span.d { font-size: 12px; color: var(--muted); line-height: 1.45; word-break: keep-all; } /* ============================================================ FOOTER ============================================================ */ .foot { background: var(--card); border-top: 1px solid var(--line); margin-top: 8px; } .foot-inner { display: grid; gap: 18px; padding-block: 26px 20px; } @media (min-width: 700px) { .foot-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; } } .foot .logo { margin-bottom: 10px; } .foot p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); max-width: 46ch; word-break: keep-all; } .foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; font-weight: 600; color: var(--ink-2); align-content: start; } .foot-links a:hover { color: var(--violet); } .foot-base { border-top: 1px solid var(--line); padding-block: 13px 20px; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; font-size: 12px; color: var(--muted); } /* ============================================================ MOTION ============================================================ */ .up { opacity: 0; transform: translateY(10px); } .up.is-in { opacity: 1; transform: none; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .up { opacity: 1; transform: none; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ============================================================ 작은 화면 ============================================================ */ @media (max-width: 720px) { .searchbar { display: none; } .top-inner { min-height: 56px; } .hero::after { display: none; } } @media (max-width: 560px) { /* 헤더가 넘치지 않게 — 도구 버튼은 칩 내비에 이미 있다 */ .top-actions .btn-ghost { display: none; } .top-actions .btn { padding: 8px 14px; } .logo { font-size: 16.5px; } } @media (max-width: 420px) { .feed { grid-template-columns: minmax(0, 1fr); } .rd { display: none; } } /* ============================================================ 카테고리 페이지 (markets.html / sciences.html) ============================================================ */ .cat-head { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: var(--r-lg); padding: 18px 20px; } .cat-emoji { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--violet-soft); font-size: 22px; line-height: 1; } .cat-copy { min-width: 0; } .cat-head h1 { margin: 0 0 3px; font-size: 20px; font-weight: 800; letter-spacing: -0.035em; } .cat-head p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; word-break: keep-all; } .cat-count { flex: none; margin-left: auto; display: flex; align-items: baseline; gap: 2px; color: var(--violet); } .cat-count b { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; } .cat-count small { font-size: 12px; font-weight: 700; } .cat-more { margin: 0; padding: 4px 18px 18px; font-size: 12.5px; color: var(--muted); word-break: keep-all; } .cat-more a { color: var(--violet); font-weight: 700; } .cat-more a:hover { text-decoration: underline; } @media (max-width: 480px) { .cat-head { flex-wrap: wrap; gap: 10px 12px; } .cat-count { margin-left: 0; } } /* ============================================================ ARTICLE (글 상세 목업) ============================================================ */ .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12.5px; color: var(--muted); } .crumb a:hover { color: var(--violet); } .article { padding: 0; } /* 본문 한 줄이 너무 길지 않게 — 가운데 정렬된 읽기 컬럼. 커버만 카드 전체 폭을 쓴다. */ .article-head, .article-lede, .prose, .article-tags, .article-actions { max-width: calc(var(--measure) + 44px); margin-inline: auto; } .article-head { padding: 22px 22px 0; } .article-head h1 { margin: 10px 0 12px; font-size: clamp(22px, 3.2vw, 28px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.35; word-break: keep-all; /* 좁은 화면에서 "11개 / 월"로 끊기지 않게 */ } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 16px; font-size: 12.5px; color: var(--muted); } .article-meta .dot { opacity: 0.5; } .article-cover { margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--sunken); } /* 커버는 인포그래픽이라 위아래를 자르면 글자가 날아간다. 실제 사이트(sf_home_editorial.php)와 같이 contain으로 통째로 보여준다. */ .article-cover img { display: block; width: 100%; height: auto; object-fit: contain; background: var(--card); } .article-cover figcaption { max-width: calc(var(--measure) + 44px); margin-inline: auto; padding: 9px 22px 11px; font-size: 12px; line-height: 1.5; color: var(--muted); } .article-lede { padding: 18px 22px 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); word-break: keep-all; } .toc { max-width: var(--measure); margin: 18px auto; padding: 14px 16px; background: var(--sunken); border-radius: var(--r-md); } .toc-title { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); } .toc ol { margin: 0; padding-left: 18px; } .toc li { margin: 4px 0; } .toc a { font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .toc a:hover { color: var(--violet); } .prose { padding: 4px 22px 8px; font-size: 15px; line-height: 1.75; color: var(--ink); } .prose h2 { margin: 28px 0 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; scroll-margin-top: 72px; word-break: keep-all; } .prose p { margin: 0 0 14px; color: var(--ink-2); word-break: keep-all; } .prose strong { color: var(--ink); font-weight: 700; } /* 글 끝 마무리 — WP가 내려주는 separator + quote. 62편이 이 조합으로 끝나는데 스타일이 없어 브라우저 기본값(들여쓰기 40px)으로 나왔다. */ .prose hr, .prose .wp-block-separator { height: 0; margin: 26px 0 18px; border: 0; border-top: 1px solid var(--line); } .prose blockquote, .prose .wp-block-quote { margin: 0 0 16px; padding: 14px 16px; border-left: 3px solid var(--violet); border-radius: 0 var(--r) var(--r) 0; background: var(--violet-soft); font-style: normal; } .prose blockquote p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); } .prose blockquote p:last-child { margin-bottom: 0; } .prose blockquote cite, .prose blockquote em { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--muted); } .keylist { margin: 0 0 16px; padding: 12px 16px 12px 32px; background: var(--violet-soft); border-radius: var(--r-md); color: var(--ink-2); } .keylist li { margin: 6px 0; word-break: keep-all; } .viz { margin: 16px 0 20px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); } .viz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 700; } .viz-head .axis { font-size: 11.5px; font-weight: 600; color: var(--muted); } /* 막대 영역(120px)과 라벨 줄을 분리한다. 예전엔 .bar가 flex라서 라벨 줄 수만큼 막대 자리가 줄었다 — 같은 --h:100%인데 라벨이 3줄인 막대가 2줄인 막대보다 짧게 그려졌다. */ .bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; margin-bottom: 8px; } .bar { display: grid; grid-template-rows: 120px auto; justify-items: center; gap: 6px; min-width: 0; } .bar-fill { align-self: end; } .bar-fill { display: block; width: 100%; max-width: 36px; height: var(--h, 50%); border-radius: 6px 6px 2px 2px; background: var(--bar); } .bar.is-on .bar-fill { background: linear-gradient(180deg, var(--violet-2), var(--violet)); } .bar em { font-style: normal; font-size: 10.5px; line-height: 1.25; text-align: center; color: var(--muted); } .bar.is-on em { color: var(--violet); font-weight: 700; } .viz-foot { margin: 0; font-size: 11.5px; color: var(--muted); } .steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 14px; background: var(--sunken); border-radius: var(--r-md); } .step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--violet); color: #fff; font-size: 13px; font-weight: 800; } .steps strong { display: block; margin-bottom: 2px; font-size: 14px; } .steps p { margin: 0; font-size: 13.5px; } .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; } .compare > div { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); } .compare > div.is-on { border-color: color-mix(in srgb, var(--violet) 35%, var(--line)); background: var(--violet-soft); } .compare h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); } .compare p { margin: 0 0 4px; font-size: 14px; } .callout { margin: 0 0 16px; padding: 14px 16px; border-left: 3px solid var(--violet); background: var(--violet-soft); border-radius: 0 var(--r) var(--r) 0; } .callout strong { display: block; margin-bottom: 4px; font-size: 12.5px; color: var(--violet); } .callout p { margin: 0; font-size: 14px; } .disclaimer { font-size: 12.5px !important; color: var(--muted) !important; padding: 12px 0 4px; border-top: 1px dashed var(--line); } .article-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 22px 16px; } .article-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 22px 22px; border-top: 1px solid var(--line); } .like-lg { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--sunken); font-size: 13px; font-weight: 700; cursor: pointer; } .like-lg[aria-pressed="true"] { background: var(--violet-soft); border-color: transparent; color: var(--violet); } .related, .comments { margin-top: 0; } .cmt-form { display: grid; gap: 8px; padding: 0 16px 12px; } .cmt-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 560px) { .cmt-fields { grid-template-columns: 1fr; } } .cmt-form input[type="text"], .cmt-form input[type="email"], .cmt-form textarea { width: 100%; border: 1.5px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--sunken); outline: none; font: inherit; } .cmt-form textarea { resize: vertical; } .cmt-form input:focus, .cmt-form textarea:focus { border-color: var(--violet); background: var(--card); } .cmt-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .cmt-status { margin: 0; font-size: 0.85rem; color: var(--muted, #6b7280); } .cmt-form .btn { justify-self: end; } .cmt-list { list-style: none; margin: 0; padding: 0 16px 14px; } .cmt-empty { color: var(--muted, #6b7280); padding: 8px 0 4px; } .cmt-list li { padding: 12px 0; border-top: 1px solid var(--line); } .cmt-meta { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 12.5px; color: var(--muted); } .cmt-meta strong { color: var(--ink); font-weight: 700; } .cmt-list p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; } .side-rank { padding: 0 4px 8px; } .side-rank a { padding-inline: 12px !important; } .back-home { width: 100%; justify-content: center; background: var(--card); color: var(--ink-2); border: 1px solid var(--line); } .back-home:hover { background: var(--violet-soft); color: var(--violet); filter: none; } @media (max-width: 560px) { .article-head, .article-lede, .prose, .article-tags, .article-actions, .article-cover figcaption { padding-inline: 16px; } .toc { margin-inline: 16px; } .compare { grid-template-columns: 1fr; } .bars { height: 100px; } } /* === site: lang toggle (post.html에는 없음, 이중언어 글용) === */ .post-lang[hidden] { display: none !important; } .prose .bars { min-height: 0; }