@charset "utf-8";

/* Clarity community layer: DaisyUI owns components; this file owns the community header. */
html[data-theme="light"] {
    /* 페이지 바닥. 시안(index-uiux2.html)의 --color-base-200 값 그대로다. */
    --color-base-200: #f5f7fa;
    --clarity-page: #f5f7fa;
    --clarity-surface: #ffffff;
    --clarity-surface-soft: #f8fafc;
    --clarity-surface-tint: #edf4ff;
    --clarity-text: #101828;
    --clarity-text-soft: #344054;
    --clarity-muted: #667085;
    --clarity-border: #d9e0ea;
    --clarity-border-strong: #c6d0dd;
    --clarity-primary: #3159b7;
    --clarity-primary-hover: #254a9f;
    --clarity-primary-soft: #edf4ff;
    --clarity-accent: #3159b7;
    --color-primary: #3159b7;
    --color-primary-content: #ffffff;
    --color-secondary: #4361b5;
    --color-secondary-content: #ffffff;
}

html[data-theme="dark"] {
    /* daisyUI 기본 토큰이 초록기가 도는 값이었다(#182321 · #101816 · #2d4039).
       카드와 표면은 남색(--clarity-surface 계열)이라 bg-base-100 을 쓰는 곳마다
       두 계열이 어긋났다. 남색 쪽으로 맞춘다. */
    --color-base-100: #182235;
    --color-base-200: #0b1220;
    --color-base-300: #33445f;
    --color-base-content: #edf2ff;
    --clarity-page: #0b1220;
    --clarity-surface: #182235;
    --clarity-surface-soft: #202c42;
    --clarity-surface-tint: #263a63;
    --clarity-text: #edf2ff;
    --clarity-text-soft: #c7d2e6;
    --clarity-muted: #9aa8bf;
    --clarity-border: #33445f;
    --clarity-border-strong: #455979;
    --clarity-primary: #8eaeff;
    --clarity-primary-hover: #b4c8ff;
    --clarity-primary-soft: #24365e;
    --clarity-accent: #a9bfff;
    --color-primary: #8eaeff;
    --color-primary-content: #0b1220;
    --color-secondary: #aab8ff;
    --color-secondary-content: #151b3a;
}

html[data-theme="light"], html[data-theme="dark"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* 페이지 레일. 헤더·서비스 전환·검색·푸터가 모두 이 한 자를 쓴다.
   전에는 셸에 여백이 없고 요소마다 따로 여백을 줘서, 푸터만 32px 바깥에
   서고 헤더는 16px 안에 서는 식으로 세로줄이 어긋났다.
   #container_wr 의 좌우 여백도 같은 값으로 맞춰 둔다. */
/* 스크롤 리빌. 시안과 같은 값(.35s ease-out, 12px 올라오며 나타남).
   숨김 상태는 [data-clarity-js] 안에만 둔다. 이 플래그는 head 의 부트
   스크립트가 IntersectionObserver 가 있고 모션 축소가 아닐 때만 켠다.
   그래서 JS 가 꺼져 있으면 내용이 처음부터 그냥 보인다. */
.clarity-reveal { transition: opacity .35s ease-out, transform .35s ease-out; }
[data-clarity-js="on"] .clarity-reveal { opacity: 0; transform: translateY(12px); }
[data-clarity-js="on"] .clarity-reveal[data-shown="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .clarity-reveal { opacity: 1; transform: none; }
}

.clarity-shell { width: min(100%, 80rem); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 40rem) { .clarity-shell { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .clarity-shell { padding-inline: 2rem; } }
.clarity-wrapper { min-height: 32rem; }

/* 홈도 다른 페이지와 같은 페이지 바닥 위에 놓는다. 흰 바탕에 흰 카드를
   얹으면 카드 경계가 테두리 하나로만 남아 패널이 떠 보이지 않는다.
   html 에도 같이 걸어 오버스크롤 여백까지 같은 색으로 둔다. */
html:has(body.clarity-home-page) { background: var(--clarity-page); }
body.clarity-home-page { background: var(--clarity-page); }
body.clarity-home-page #wrapper.clarity-wrapper { background: var(--clarity-page); }
.clarity-avatar { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--clarity-primary-soft); color: var(--clarity-primary); font-size: .7rem; font-weight: 800; }
.clarity-brand-footer .clarity-brand-mark { width: 2rem; height: 2rem; border-radius: .65rem; font-size: .95rem; }
.clarity-brand-footer strong { font-size: 1.1rem; }
.clarity-brand-footer .clarity-community-logo { height: 30px; width: auto; }

/* Keep the home and board shells on one visual grid instead of mixing DaisyUI spacing with stock Gnuboard spacing. */
#container_wr {
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 2rem;
    /* 위 여백은 헤더 높이(64px)의 절반이자 열 간격과 같은 눈금이다.
       시안은 48px 이지만 이 사이트에선 헤더 아래가 빈 띠로 읽혔다.
       아래는 푸터 앞이라 48px 을 남긴다. */
    padding: 2rem 2rem 3rem;
}
#container_wr > .clarity-main-content,
#container_wr > .clarity-sidebar { min-width: 0; }
#container_wr > .clarity-sidebar { gap: 1rem; }
.clarity-reference-panel,
.clarity-sidebar > .card,
.clarity-sidebar > #ol_before,
.clarity-sidebar #popular,
.clarity-sidebar #poll,
.clarity-sidebar #visit,
.clarity-sidebar .po,
.clarity-sidebar .visit,
.clarity-sidebar .connect {
    border-radius: .75rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04) !important;
}
.clarity-reference-panel > :first-child { min-height: 3.75rem; }

/* 홈 패널. 카드 자체를 조용히 둔다. 배경 틴트도 파란 제목도 굵은 행도 없다.
   목록이 굵고 파랗게 깔리면 무엇이 무엇인지가 오히려 흐려진다.

   한때 공지사항만 대표로 세워 파란 기가 도는 테두리와 위쪽 3px 그라디언트
   바를 줬는데, 나란히 놓고 보니 그 카드만 겉돌았다. 다섯 패널을 똑같이 둔다.
   대표를 다시 세울 일이 생기면 이 자리에 규칙을 더하면 된다. */
body.clarity-home-page .clarity-reference-panel {
    border-color: var(--clarity-border);
    background: var(--clarity-surface);
}
body.clarity-home-page .clarity-reference-panel > :first-child {
    border-bottom-color: var(--clarity-border);
    background: transparent;
}
body.clarity-home-page .clarity-reference-panel > :first-child h2 {
    color: var(--clarity-text);
    font-size: 1.125rem;
    font-weight: 900;
    letter-spacing: -.025em;
}
body.clarity-home-page .clarity-reference-panel .clarity-latest-list li {
    border-bottom-color: var(--clarity-border);
    border-radius: 0;
}

/* 회원 카드. 시안은 다른 사이드바 카드와 같은 흰 카드다. 파란 그라디언트와
   상단 바를 얹으면 사이드바에서 이 카드만 튀어, 정작 봐야 할 수치가 밀린다. */
body.clarity-home-page .clarity-reference-panel {
    position: relative;
    transition: box-shadow .25s ease, border-color .25s ease;
}
body.clarity-home-page .clarity-reference-panel:is(:hover, :focus-within) {
    box-shadow: var(--clarity-shadow-lift) !important;
}

body.clarity-page .clarity-member-card-body { position: relative; padding: 1.25rem !important; }
body.clarity-page .clarity-member-card-head { align-items: center; gap: .75rem; }
body.clarity-page .clarity-member-card-head > div { min-width: 0; }
body.clarity-page .clarity-member-avatar {
    width: 2.75rem !important;
    height: 2.75rem !important;
    flex: 0 0 2.75rem;
    border: 0;
    background: linear-gradient(135deg, var(--clarity-primary), color-mix(in oklab, var(--clarity-primary) 55%, #7C3AED));
    color: #fff;
    font-size: 1rem !important;
    font-weight: 800;
    box-shadow: none;
}
body.clarity-page .clarity-member-card h2 { max-width: 100%; overflow: hidden; color: var(--clarity-text); font-size: 1.125rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
/* 세 수치는 성격이 다르다. 포인트는 쌓이고, 안 읽은 쪽지는 지금 할 일이고,
   스크랩은 모아 둔 개수다. 같은 무게로 늘어놓으면 그 차이가 지워지므로
   안 읽은 쪽지에만 표시를 두고 나머지는 한 기준선에 맞춰 훑게 한다. */
body.clarity-page .clarity-member-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 0;
    border-block: 1px solid var(--clarity-border);
    border-radius: 0;
    background: none;
    padding: 0;
}
body.clarity-page .clarity-member-stat {
    display: flex;
    min-width: 0;
    min-height: 3.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    border-radius: 0;
    padding: .55rem .35rem;
    transition: background-color .18s ease;
}
body.clarity-page .clarity-member-stat + .clarity-member-stat { border-left: 0; box-shadow: inset 1px 0 0 var(--clarity-border); }
body.clarity-page .clarity-member-stat:hover { background: color-mix(in oklab, var(--clarity-primary) 8%, transparent); }
/* 10.4px 라 본문 크기로 취급된다. 장식용 흐림(52%)이 아니라 70% 를 써서
   4.5:1 을 넘긴다. 카드 배경 대비 라이트 5.55 · 다크 7.4 로 측정했다. */
body.clarity-page .clarity-member-stat-label { color: color-mix(in oklab, var(--color-base-content) 70%, transparent); font-size: .65rem; font-weight: 600; white-space: nowrap; }
body.clarity-page .clarity-member-stat-value {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--clarity-text);
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.2;
    white-space: nowrap;
    transition: color .18s ease;
}
body.clarity-page .clarity-member-stat:hover .clarity-member-stat-value { color: var(--clarity-primary); }
body.clarity-page .clarity-member-stat-unread .clarity-member-stat-value { color: var(--clarity-primary); }
/* 개수 자체가 뜻을 지고 링크 이름에도 적혀 있다. 점은 거들 뿐 혼자 알리지 않는다. */
body.clarity-page .clarity-member-stat-dot { width: .3rem; height: .3rem; align-self: flex-start; margin-left: .28rem; border-radius: 0; background: var(--color-error); }

/* 회원 카드 보조 동작은 daisyUI 인라인 버튼으로 표현해 링크의 역할과
   터치 영역을 한눈에 구분한다. 버튼의 색·높이·포커스 상태는 daisyUI
   토큰을 따른다. */
body.clarity-page .clarity-member-card-action { min-width: 0; }
body.clarity-page .clarity-member-card-action.btn-primary { color: var(--color-primary-content); }
body.clarity-page .clarity-member-card-action.btn-outline.btn-error { color: var(--color-error); }