/* ========================================================================= 숏폼 인사이트 (/shorts/) 전용 스타일 - 라이트 에디토리얼. 페이지 에 data-theme="light" 가 붙어 있어야 공용 GNB 가 라이트 스킨으로 전환된다. - 목록(index.php)과 상세(_render.php)가 같은 파일을 공유한다. ========================================================================= */ :root { --sh-bg: #ffffff; --sh-bg-subtle: #f7f8fa; --sh-ink: #0d1117; --sh-body: #333d4b; --sh-muted: #5b6472; --sh-accent: #2563eb; --sh-accent-dark: #1d4ed8; --sh-accent-tint: #eff4ff; --sh-border: #e6e9ee; --sh-radius: 16px; --sh-header-h: 5.2rem; --sh-sans: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --sh-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* 시리즈 색 토큰 */ --sh-series-security: #e0393e; --sh-series-sns: #5a4ff3; } html { margin: 0 !important; padding: 0 !important; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0 !important; font-family: var(--sh-sans); background: var(--sh-bg); color: var(--sh-body); line-height: 1.68; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; } body.admin-bar { margin-top: 0 !important; padding-top: 0 !important; } a { color: inherit; text-decoration: none; } img, video, iframe { display: block; max-width: 100%; } h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; padding: 0; } ul, ol { list-style: none; } .sh-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } .sh-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--sh-accent); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0; } .sh-skip:focus { left: 0; } /* ── 검수용 미리보기 안내 ─────────────────────────────────────────────── */ .sh-preview-bar { margin: 0; padding: .85rem 24px; background: #fff7ed; border-bottom: 1px solid #fbd8ac; color: #7c3d0b; font-size: .88rem; text-align: center; } .sh-preview-bar strong { font-weight: 800; } /* ── 브레드크럼 ───────────────────────────────────────────────────────── */ .sh-crumb { padding: 1.5rem 0 .25rem; font-size: .82rem; color: var(--sh-muted); } .sh-crumb ol { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .sh-crumb li::after { content: "›"; margin-left: .4rem; color: #b4bcc8; } .sh-crumb li:last-child::after { content: ""; } .sh-crumb a:hover { color: var(--sh-accent); } .sh-crumb [aria-current] { color: var(--sh-ink); font-weight: 600; } /* ── 목록 히어로 ──────────────────────────────────────────────────────── */ .sh-hero { position: relative; padding: calc(var(--sh-header-h) + 4.5rem) 0 3.5rem; margin-top: calc(-1 * var(--sh-header-h)); background: linear-gradient(180deg, #eef3fc 0%, #f5f8fd 48%, #ffffff 100%); border-bottom: 1px solid var(--sh-border); overflow: hidden; } .sh-hero__grid { position: absolute; inset: -2px; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(37, 99, 235, .14) 1.1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(120% 92% at 50% 0%, #000 32%, transparent 74%); mask-image: radial-gradient(120% 92% at 50% 0%, #000 32%, transparent 74%); opacity: .7; } .sh-hero .sh-container { position: relative; z-index: 1; } .sh-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--sh-accent-dark); background: #fff; border: 1px solid #d5e0f7; border-radius: 999px; padding: .38rem .85rem; } .sh-hero h1 { margin-top: 1.1rem; font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.28; letter-spacing: -.02em; color: var(--sh-ink); font-weight: 800; } .sh-hero__lead { margin-top: 1rem; max-width: 44rem; font-size: clamp(1rem, 1.6vw, 1.1rem); color: var(--sh-muted); } .sh-hero__stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2rem; } .sh-hero__stat strong { display: block; font-size: 1.55rem; font-weight: 800; color: var(--sh-ink); letter-spacing: -.01em; } .sh-hero__stat span { font-size: .82rem; color: var(--sh-muted); } /* ── 목록 카드 ────────────────────────────────────────────────────────── */ .sh-listing { padding: 3.5rem 0 4.5rem; } .sh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.75rem; } .sh-card { display: flex; flex-direction: column; border: 1px solid var(--sh-border); border-radius: var(--sh-radius); background: #fff; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .sh-card:hover { transform: translateY(-3px); border-color: #cdd7e6; box-shadow: 0 14px 34px rgba(15, 23, 42, .1); } .sh-card__media { position: relative; aspect-ratio: 9 / 16; background: #0d1424; } .sh-card__media img { width: 100%; height: 100%; object-fit: cover; } .sh-card__play { position: absolute; inset: auto 12px 12px auto; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(13, 17, 23, .72); color: #fff; font-size: .72rem; font-weight: 700; backdrop-filter: blur(6px); } .sh-card__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.15rem 1.15rem 1.35rem; flex: 1; } .sh-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .74rem; color: var(--sh-muted); } .sh-card h2 { font-size: 1.03rem; line-height: 1.45; color: var(--sh-ink); font-weight: 700; letter-spacing: -.01em; } .sh-card p { font-size: .87rem; color: var(--sh-muted); } .sh-card__more { margin-top: auto; padding-top: .35rem; font-size: .82rem; font-weight: 700; color: var(--sh-accent); } .sh-chip { display: inline-flex; align-items: center; gap: .32rem; padding: .22rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: -.01em; background: var(--sh-accent-tint); color: var(--sh-accent-dark); } .sh-chip--security { background: #fdecec; color: #b02328; } .sh-chip--sns { background: #eeecff; color: #4338ca; } .sh-chip--landing { background: #ecf3ff; color: #1d4ed8; } .sh-chip--price { background: #fff1e6; color: #b45309; } .sh-chip--form { background: #e9f6f1; color: #0f766e; } .sh-chip--industry { background: #f1f0ea; color: #6b5b3e; } .sh-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ── 상세: 2단 레이아웃 ───────────────────────────────────────────────── */ .sh-article { padding: 0 0 4.5rem; } .sh-layout { display: grid; grid-template-columns: minmax(0, 348px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: 1.5rem; } .sh-stage { position: sticky; top: calc(var(--sh-header-h) + 1rem); display: flex; flex-direction: column; gap: 1rem; } /* 영상 파사드: 클릭 전에는 이미지 한 장만 로드한다 */ .sh-player { position: relative; aspect-ratio: 9 / 16; width: 100%; border-radius: 18px; overflow: hidden; background: #0d1424; border: 1px solid #dfe4ec; box-shadow: 0 18px 44px rgba(15, 23, 42, .16); } .sh-player img, .sh-player iframe, .sh-player video { width: 100%; height: 100%; border: 0; } .sh-player img { object-fit: cover; } .sh-player video { object-fit: contain; background: #0d1424; } .sh-player__btn { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(6, 10, 22, .05) 0%, rgba(6, 10, 22, .38) 100%); border: 0; cursor: pointer; padding: 0; } .sh-player__btn::before { content: ""; width: 66px; height: 66px; border-radius: 50%; background: rgba(255, 255, 255, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d1117'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 28px 28px; box-shadow: 0 8px 26px rgba(0, 0, 0, .35); transition: transform .18s ease; } .sh-player__btn:hover::before { transform: scale(1.07); } .sh-player__btn:focus-visible { outline: 3px solid #fff; outline-offset: -6px; } .sh-stage__meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: var(--sh-muted); } .sh-stage__links { display: flex; flex-direction: column; gap: .5rem; } .sh-stage__link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .95rem; border: 1px solid var(--sh-border); border-radius: 12px; font-size: .85rem; font-weight: 600; color: var(--sh-ink); background: #fff; transition: border-color .18s ease, color .18s ease; } .sh-stage__link:hover { border-color: var(--sh-accent); color: var(--sh-accent); } .sh-stage__link span:last-child { color: var(--sh-muted); font-weight: 500; font-size: .78rem; } /* ── 상세: 본문 ───────────────────────────────────────────────────────── */ .sh-main { min-width: 0; } .sh-head__chips { display: flex; flex-wrap: wrap; gap: .5rem; } .sh-main h1 { margin-top: .9rem; font-size: clamp(1.65rem, 3.4vw, 2.35rem); line-height: 1.32; letter-spacing: -.025em; color: var(--sh-ink); font-weight: 800; } .sh-head__meta { margin-top: .85rem; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .82rem; color: var(--sh-muted); } .sh-answer { margin-top: 1.75rem; padding: 1.35rem 1.5rem; border: 1px solid #d8e3fb; border-left: 4px solid var(--sh-accent); border-radius: 4px 14px 14px 4px; background: var(--sh-accent-tint); } .sh-answer__q { font-size: .82rem; font-weight: 800; color: var(--sh-accent-dark); letter-spacing: -.01em; } .sh-answer__a { margin-top: .5rem; font-size: 1rem; color: #1e293b; } .sh-summary { margin-top: 1.75rem; padding: 1.4rem 1.5rem; border: 1px solid var(--sh-border); border-radius: var(--sh-radius); background: var(--sh-bg-subtle); } .sh-summary h2 { font-size: .82rem; font-weight: 800; letter-spacing: .04em; color: var(--sh-muted); text-transform: uppercase; } .sh-summary ul { margin-top: .85rem; display: flex; flex-direction: column; gap: .65rem; } .sh-summary li { position: relative; padding-left: 1.5rem; font-size: .95rem; color: #26303d; } .sh-summary li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--sh-accent); } .sh-toc { margin-top: 1.75rem; padding: 1.15rem 1.4rem; border: 1px dashed #d3dae5; border-radius: 14px; } .sh-toc h2 { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--sh-muted); } .sh-toc ol { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .45rem .9rem; counter-reset: sh-toc; } .sh-toc li { counter-increment: sh-toc; font-size: .87rem; } .sh-toc li::before { content: counter(sh-toc) ". "; color: var(--sh-muted); } .sh-toc a:hover { color: var(--sh-accent); text-decoration: underline; text-underline-offset: 3px; } .sh-body { margin-top: 2.5rem; font-size: 1.02rem; } .sh-body h2 { margin-top: 2.75rem; padding-top: .35rem; font-size: clamp(1.2rem, 2.2vw, 1.42rem); line-height: 1.45; color: var(--sh-ink); font-weight: 800; letter-spacing: -.02em; scroll-margin-top: calc(var(--sh-header-h) + 1rem); } .sh-body h2:first-child { margin-top: 0; } .sh-body h3 { margin-top: 1.9rem; font-size: 1.06rem; font-weight: 700; color: var(--sh-ink); } .sh-body p { margin-top: 1.05rem; } .sh-body strong { color: var(--sh-ink); font-weight: 700; } .sh-body a { color: var(--sh-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .sh-body a:hover { color: var(--sh-accent-dark); } .sh-body code { font-family: var(--sh-mono); font-size: .88em; background: #eef1f6; border: 1px solid #e0e5ec; border-radius: 5px; padding: .08em .35em; color: #1f2937; } .sh-code { margin-top: 1.15rem; padding: 1rem 1.15rem; overflow-x: auto; background: #0f172a; border-radius: 12px; color: #e2e8f0; font-family: var(--sh-mono); font-size: .85rem; line-height: 1.7; } .sh-code code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } .sh-list { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .6rem; } .sh-list li { position: relative; padding-left: 1.35rem; } .sh-list li::before { content: ""; position: absolute; left: .3rem; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: #94a3b8; } .sh-steps { margin-top: 1.15rem; display: flex; flex-direction: column; gap: .8rem; counter-reset: sh-step; } .sh-steps li { counter-increment: sh-step; position: relative; padding-left: 2.35rem; } .sh-steps li::before { content: counter(sh-step); position: absolute; left: 0; top: .1em; width: 1.65rem; height: 1.65rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sh-accent); color: #fff; font-size: .8rem; font-weight: 800; } .sh-callout { margin-top: 1.35rem !important; padding: 1rem 1.25rem; background: #fff7ed; border: 1px solid #fbd8ac; border-radius: 12px; color: #7c3d0b; } .sh-tablewrap { margin-top: 1.35rem; overflow-x: auto; border: 1px solid var(--sh-border); border-radius: 12px; } .sh-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 34rem; } .sh-table th, .sh-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--sh-border); vertical-align: top; } .sh-table thead th { background: var(--sh-bg-subtle); color: var(--sh-ink); font-weight: 700; font-size: .84rem; white-space: nowrap; } .sh-table tbody th { color: var(--sh-ink); font-weight: 700; white-space: nowrap; } .sh-table tr:last-child th, .sh-table tr:last-child td { border-bottom: 0; } /* ── 자막(대본) ───────────────────────────────────────────────────────── */ .sh-transcript { margin-top: 2.75rem; border: 1px solid var(--sh-border); border-radius: var(--sh-radius); overflow: hidden; } .sh-transcript > summary { list-style: none; cursor: pointer; padding: 1rem 1.35rem; background: var(--sh-bg-subtle); font-weight: 700; color: var(--sh-ink); font-size: .95rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sh-transcript > summary::-webkit-details-marker { display: none; } .sh-transcript > summary::after { content: "펼치기"; font-size: .78rem; font-weight: 600; color: var(--sh-accent); } .sh-transcript[open] > summary::after { content: "접기"; } .sh-transcript__body { padding: .5rem 1.35rem 1.35rem; } .sh-transcript__item { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: .9rem; padding: .9rem 0; border-bottom: 1px solid #f0f2f6; } .sh-transcript__item:last-child { border-bottom: 0; } .sh-transcript__time { font-family: var(--sh-mono); font-size: .82rem; color: var(--sh-accent); font-weight: 700; } .sh-transcript__time button { all: unset; cursor: pointer; color: inherit; font: inherit; } .sh-transcript__time button:hover { text-decoration: underline; } .sh-transcript__title { font-weight: 700; color: var(--sh-ink); font-size: .92rem; } .sh-transcript__text { margin-top: .25rem; font-size: .92rem; color: var(--sh-muted); } /* ── FAQ ──────────────────────────────────────────────────────────────── */ .sh-faq { margin-top: 3rem; } .sh-faq h2 { font-size: clamp(1.2rem, 2.2vw, 1.42rem); color: var(--sh-ink); font-weight: 800; letter-spacing: -.02em; } .sh-faq__list { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .75rem; } .sh-faq__item { border: 1px solid var(--sh-border); border-radius: 12px; overflow: hidden; } .sh-faq__item > summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; color: var(--sh-ink); font-size: .95rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .sh-faq__item > summary::-webkit-details-marker { display: none; } .sh-faq__item > summary::after { content: "+"; font-size: 1.2rem; line-height: 1; color: var(--sh-accent); } .sh-faq__item[open] > summary::after { content: "−"; } .sh-faq__answer { padding: 0 1.25rem 1.15rem; font-size: .93rem; color: var(--sh-muted); } /* ── CTA · 관련 링크 · 이웃 글 ────────────────────────────────────────── */ .sh-cta { margin-top: 3rem; padding: 1.85rem 1.9rem; border-radius: 18px; background: linear-gradient(135deg, #101a33 0%, #1e3a8a 100%); color: #e6edff; } .sh-cta h2 { font-size: 1.22rem; font-weight: 800; color: #fff; letter-spacing: -.02em; } .sh-cta p { margin-top: .7rem; font-size: .95rem; color: rgba(230, 237, 255, .84); } .sh-cta__btn { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.25rem; padding: .8rem 1.4rem; border-radius: 999px; background: #fff; color: #12234a; font-weight: 800; font-size: .92rem; transition: transform .18s ease; } .sh-cta__btn:hover { transform: translateY(-2px); color: #12234a; } .sh-related { margin-top: 3rem; } .sh-related h2, .sh-more h2 { font-size: clamp(1.2rem, 2.2vw, 1.42rem); color: var(--sh-ink); font-weight: 800; letter-spacing: -.02em; } .sh-related__list { margin-top: 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .sh-related__item { display: block; padding: 1.15rem 1.25rem; border: 1px solid var(--sh-border); border-radius: 14px; background: #fff; transition: border-color .18s ease, transform .18s ease; } .sh-related__item:hover { border-color: var(--sh-accent); transform: translateY(-2px); } .sh-related__item strong { display: block; color: var(--sh-ink); font-size: .95rem; font-weight: 700; } .sh-related__item span { display: block; margin-top: .4rem; font-size: .85rem; color: var(--sh-muted); } .sh-neighbors { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .sh-neighbors a { padding: 1.1rem 1.25rem; border: 1px solid var(--sh-border); border-radius: 14px; transition: border-color .18s ease; } .sh-neighbors a:hover { border-color: var(--sh-accent); } .sh-neighbors small { display: block; font-size: .74rem; font-weight: 700; color: var(--sh-muted); letter-spacing: .04em; } .sh-neighbors strong { display: block; margin-top: .4rem; font-size: .93rem; color: var(--sh-ink); font-weight: 700; line-height: 1.5; } .sh-neighbors .sh-neighbors__next { text-align: right; } .sh-more { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--sh-border); } /* 본문 아래에서는 카드를 가로형으로 눕힌다. 본문 칸이 좁아 세로 표지를 그대로 쓰면 카드 한 장이 화면을 넘길 만큼 길어진다. */ .sh-cards--mini { grid-template-columns: minmax(0, 1fr); gap: .85rem; } .sh-cards--mini .sh-card { flex-direction: row; align-items: stretch; } .sh-cards--mini .sh-card__media { flex: 0 0 88px; width: 88px; aspect-ratio: 9 / 16; max-height: 156px; } .sh-cards--mini .sh-card__play { display: none; } .sh-cards--mini .sh-card__body { padding: .95rem 1.1rem; gap: .4rem; justify-content: center; } .sh-cards--mini .sh-card h2 { font-size: .96rem; } .sh-cards--mini .sh-card p { font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sh-cards--mini .sh-card__more { display: none; } /* ── 반응형 ───────────────────────────────────────────────────────────── */ @media (max-width: 960px) { .sh-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .sh-stage { position: static; max-width: 340px; margin: 0 auto; width: 100%; } .sh-stage__links { flex-direction: row; flex-wrap: wrap; } .sh-stage__link { flex: 1 1 12rem; } } @media (max-width: 640px) { .sh-container { padding: 0 18px; } .sh-hero { padding-top: calc(var(--sh-header-h) + 3rem); } .sh-cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; } .sh-cards--mini { grid-template-columns: minmax(0, 1fr); } .sh-cta { padding: 1.5rem 1.35rem; } .sh-transcript__item { grid-template-columns: minmax(0, 1fr); gap: .3rem; } /* 모바일에서는 최소 글자 크기 12px, 누르는 요소는 44px 높이를 지킨다. */ .sh-chip { font-size: .75rem; padding: .3rem .6rem; } .sh-neighbors small { font-size: .78rem; } .sh-card__meta, .sh-card__play, .sh-crumb, .sh-stage__meta { font-size: .78rem; } .sh-toc ol { gap: 0; flex-direction: column; } .sh-toc li { display: flex; align-items: center; } .sh-toc li a { display: flex; align-items: center; width: 100%; min-height: 44px; } .sh-transcript__time button { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; } .sh-faq__item > summary, .sh-transcript > summary { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .sh-card, .sh-related__item, .sh-cta__btn, .sh-player__btn::before { transition: none; } }