/* 올비전 v2 공통 스타일 — 밝은 하늘 테마 + 우주/디스코드 화면용 .dark-ui 범위 */

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: url('/assets/v2/fonts/Pretendard-Regular.subset.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: url('/assets/v2/fonts/Pretendard-Medium.subset.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: url('/assets/v2/fonts/Pretendard-SemiBold.subset.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: url('/assets/v2/fonts/Pretendard-Bold.subset.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-weight: 400;
    font-display: swap;
    src: url('/assets/v2/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-weight: 500;
    font-display: swap;
    src: url('/assets/v2/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}

:root {
    /* only: 브라우저의 강제 다크(Chrome Auto Dark Theme 등)가 색을 바꾸지 않게 한다.
     * 어두운 화면은 .dark-ui와 대시보드 테마가 직접 그린다. */
    color-scheme: only light;
    --void: #f5f8fd;
    --ink: #ffffff;
    --panel: #f3f7fd;
    --raise: #eaf1fb;
    --line: rgba(16, 42, 94, 0.09);
    --line-strong: rgba(16, 42, 94, 0.16);
    --hover: rgba(16, 42, 94, 0.05);
    --star: #0a1530;
    --star-soft: #46536e;
    --haze: #7a87a1;
    --signal: #2a6ff0;
    --sky: #87ceeb;
    --verdict: #e0435c;
    --caution: #c47a08;
    --clear: #0f9b66;
    --btn-bg: #0a1530;
    --btn-fg: #ffffff;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 24px 60px -34px rgba(16, 42, 94, 0.35);
    --f-body: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
    /* JetBrains Mono 서브셋에는 한글이 없어, 한글은 시스템 고정폭(굴림체 등) 대신 Pretendard로 그린다 */
    --f-mono: 'JetBrains Mono', 'Pretendard', ui-monospace, SFMono-Regular, Consolas, monospace;
    --wrap: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
}

/* 일본어 화면: 가나·한자는 Pretendard 서브셋에 없으므로 일본어 시스템 글꼴로 이어서 그린다
 * (한국어 글꼴이 한자를 한국식 자형으로 그리지 않게 한국어 글꼴보다 앞에 둔다). */
:root:lang(ja) {
    --f-body:
        'Pretendard', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic',
        Meiryo, 'Noto Sans JP', system-ui, sans-serif;
    --f-mono:
        'JetBrains Mono', 'Pretendard', 'Hiragino Sans', 'Yu Gothic UI', Meiryo, ui-monospace,
        SFMono-Regular, Consolas, monospace;
}

.dark-ui {
    color-scheme: dark;
    --void: #02040c;
    --ink: #0b0e17;
    --panel: #10141e;
    --raise: #161b27;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --hover: rgba(255, 255, 255, 0.06);
    --star: #f2f5fb;
    --star-soft: #a8b1c4;
    --haze: #6d768b;
    --signal: #9fc4ff;
    --verdict: #ff5f7e;
    --caution: #f5b75b;
    --clear: #4ade9b;
    --btn-bg: #ffffff;
    --btn-fg: #02040c;
    color: var(--star);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--void);
    /* 휴대폰 가로 화면에서 브라우저가 글자를 임의로 키워 레이아웃이 달라지지 않게 한다(확대는 그대로 가능). */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--void);
    color: var(--star);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 일본어는 띄어쓰기가 없어 keep-all이면 줄이 넘친다. 줄바꿈 금칙(문장 부호)만 지킨다. */
:root:lang(ja) body {
    word-break: normal;
    line-break: strict;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
video,
canvas {
    max-width: 100%;
    display: block;
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

h1,
h2 {
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.14;
    text-wrap: balance;
}

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 6px;
}

::selection {
    background: rgba(42, 111, 240, 0.22);
}

[hidden] {
    display: none !important;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: fixed;
    left: 12px;
    top: 10px;
    z-index: 99;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--star);
    color: var(--ink);
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform 0.15s;
}

.skip:focus {
    transform: none;
}

.label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--haze);
}

.label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--signal);
}

.dark-ui .label::before {
    box-shadow: 0 0 12px var(--signal);
}

.grad {
    background: linear-gradient(180deg, #0a1530 35%, #3b6fd0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.grad-space {
    background: linear-gradient(180deg, #ffffff 40%, #9ccbff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 버튼 */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding-inline: 20px;
    border-radius: 10px;
    border: 0;
    font: inherit;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.2s,
        background 0.2s,
        box-shadow 0.2s,
        border-color 0.2s;
}

.btn-lead {
    background: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 10px 30px -10px rgba(10, 21, 48, 0.45);
}

.btn-lead:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 40px -10px rgba(42, 111, 240, 0.55);
}

.dark-ui .btn-lead {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.9),
        0 8px 30px -6px rgba(160, 200, 255, 0.45);
}

.btn-lead::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 35%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    transition: transform 0.7s;
}

.btn-lead:hover::after {
    transform: translateX(120%);
}

.btn-lead .arr {
    transition: transform 0.2s;
}

.btn-lead:hover .arr {
    transform: translateX(3px);
}

.btn-ghost {
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.6);
    color: var(--star);
    backdrop-filter: blur(8px);
}

.btn-ghost:hover {
    border-color: var(--signal);
    background: var(--ink);
}

.dark-ui .btn-ghost {
    background: rgba(255, 255, 255, 0.05);
}

.dark-ui .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-danger {
    background: var(--verdict);
    color: #ffffff;
}

.btn-sm {
    height: 36px;
    padding-inline: 14px;
    font-size: 13.5px;
    border-radius: 8px;
}

/* 헤더 */
.hdr {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 40;
    background: rgba(245, 248, 253, 0.78);
    backdrop-filter: blur(16px) saturate(170%);
    border-bottom: 1px solid var(--line);
    transition:
        background 0.4s,
        border-color 0.4s,
        color 0.4s;
}

.hdr-in {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.04em;
}

.brand-mark {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    overflow: hidden;
    background: #02040c;
    box-shadow:
        0 0 0 1px rgba(16, 42, 94, 0.12),
        0 6px 16px -6px rgba(16, 60, 160, 0.5);
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.nav a {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--star-soft);
    transition:
        color 0.2s,
        background 0.2s;
}

.nav a:hover,
.nav a[aria-current='page'] {
    color: var(--star);
    background: var(--hover);
}

/* 우주 위 헤더(랜딩 첫 화면): 투명 + 흰 글씨.
 * 밝은 기본 헤더와 같은 파일에 두어, 첫 화면에서 밝은 헤더가 계산됐다가
 * 다른 스타일시트가 늦게 적용되며 어두워지는 전환이 생기지 않게 한다. */
.hdr.space {
    color: #f2f5fb;
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
}

.hdr.space .nav a {
    color: rgba(242, 245, 251, 0.72);
}

.hdr.space .nav a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.hdr.space .btn-lead {
    --btn-bg: #ffffff;
    --btn-fg: #02040c;
}

/* 머리글 오른쪽 단추 묶음(초대 · 스터디 참가). */
.hdr-acts {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
}

.hdr.space .btn-ghost {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    backdrop-filter: none;
}

.hdr.space .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.12);
}

/* 언어 선택(머리글). <details> 하나로 열고 닫으므로 스크립트 없이도 동작한다. */
.lang-menu {
    position: relative;
    flex: none;
    font-size: 13.5px;
}

.lang-menu > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding-inline: 10px;
    border-radius: 8px;
    color: var(--star-soft);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition:
        color 0.2s,
        background 0.2s;
}

.lang-menu > summary::-webkit-details-marker {
    display: none;
}

.lang-menu > summary:hover,
.lang-menu[open] > summary {
    color: var(--star);
    background: var(--hover);
}

.lang-menu svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.lang-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    display: grid;
    gap: 2px;
    min-width: 136px;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--ink);
    box-shadow: 0 18px 40px -18px rgba(10, 21, 48, 0.45);
}

.lang-list a {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--star-soft);
}

.lang-list a:hover {
    color: var(--star);
    background: var(--hover);
}

.lang-list a[aria-current='true'] {
    color: var(--star);
    font-weight: 600;
}

.hdr.space .lang-menu > summary {
    color: rgba(242, 245, 251, 0.72);
}

.hdr.space .lang-menu > summary:hover,
.hdr.space .lang-menu[open] > summary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 920px) {
    .nav {
        display: none;
    }

    .hdr-in .btn {
        margin-left: auto;
    }

    /* 메뉴가 숨으면 언어 선택이 오른쪽 버튼 옆으로 간다. */
    .hdr-in .lang-menu {
        margin-left: auto;
    }

    .hdr-in .lang-menu + .btn,
    .hdr-in .hdr-acts .btn {
        margin-left: 0;
    }
}

/* 단추가 둘인 머리글은 좁은 화면에서 간격을 줄이고, 언어는 지구 모양만 남긴다(이름은 메뉴 안에 있다). */
@media (max-width: 560px) {
    .hdr-in:has(.hdr-acts) {
        gap: 12px;
    }

    .hdr-in:has(.hdr-acts) [data-lang-current] {
        display: none;
    }

    .hdr-acts {
        gap: 6px;
    }

    .hdr-acts .btn-sm {
        padding-inline: 11px;
    }
}

/* 아주 좁은 화면은 상표 글자를 숨기고 마크만 둔다(링크 이름은 aria-label에 있다). */
@media (max-width: 400px) {
    .hdr-in:has(.hdr-acts) .brand {
        gap: 0;
        font-size: 0;
    }
}

/* 바닥글 */
footer {
    border-top: 1px solid var(--line);
    padding-block: 32px;
}

.foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    font-size: 13.5px;
    color: var(--haze);
}

.foot .brand {
    color: var(--star);
    font-size: 15px;
}

.foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-left: auto;
}

.foot a:hover {
    color: var(--star);
}

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    padding: 10px 16px;
    border-radius: 10px;
    background: #0a1530;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transform: translate(-50%, 20px);
    transition: 0.25s;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* 인라인 style 속성 없이 쓰는 지연·순서 유틸 (사이트 CSP: style-src 'self') */
.d0 {
    --d: 0;
}
.d1 {
    --d: 1;
}
.d2 {
    --d: 2;
}
.d3 {
    --d: 3;
}
.d4 {
    --d: 4;
}
.d5 {
    --d: 5;
}
.i1 {
    --i: 1;
}
.i2 {
    --i: 2;
}
.i3 {
    --i: 3;
}
.c-bad {
    --c: var(--verdict);
}
.c-warn {
    --c: var(--caution);
}
.c-sig {
    --c: var(--signal);
}
.c-ok {
    --c: var(--clear);
}