/* 서비스 공통 — D.LAB HTML kit 0.4.0(dlab.css · patterns.css) 다음에 불러온다.
색 · 간격 · 글꼴 · 선은 --dlab-* 의미 토큰만 쓰고, dlab-* 컴포넌트 클래스는 덮어쓰지 않는다.
화면 구성(가이드 7장 "면으로 나누기"): 페이지 바탕 = COMMUNITY 패턴, 그 위의 내용 = 흰 CardView. */
/* 리셋 — 라이브러리는 전역 리셋을 포함하지 않는다(가이드 2장). */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
min-width: 320px;
font-family: var(--dlab-font-family-base);
color: var(--dlab-color-text-default);
background: var(--dlab-color-bg-default);
word-break: keep-all;
overflow-wrap: anywhere;
}
h1, h2, h3, h4, h5, h6, p, dl, dd, figure { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
img { max-width: 100%; }
/* 직접 만든 요소의 포커스 — 오렌지 2px, 2px 띄움(가이드 4장) */
a:focus-visible, button:focus-visible, summary:focus-visible {
outline: var(--dlab-border-width-regular) solid var(--dlab-color-border-accent);
outline-offset: var(--dlab-border-width-regular);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
left: var(--dlab-space-10);
top: -100px;
z-index: 999;
padding: var(--dlab-space-10) var(--dlab-space-15);
color: var(--dlab-color-text-inverse);
background: var(--dlab-color-bg-inverse);
font-size: var(--dlab-font-size-p2);
font-weight: var(--dlab-font-weight-bold);
text-decoration: none;
}
.skip-link:focus { top: var(--dlab-space-10); }
/* ── 상단 바(Gnb) ─────────────────────────────────────────────
.site-header는 navigation · auth-header · 알림 모듈이 찾는 감싸는 요소다.
알림 버튼은 Gnb의 메뉴 묶음 뒤에 붙으므로 메뉴 묶음을 오른쪽으로 민다(바깥 배치만). */
.site-header { position: relative; z-index: 950; }
.site-header .dlab-gnb-actions { margin-left: auto; }
/* Reserve the bar's layout while role-dependent controls settle, then fade once. */
.site-header .dlab-gnb > :not(.dlab-gnb-logo) { opacity: 1; transition: opacity var(--dlab-duration-fast) ease-out; }
.site-header[data-nav-pending] .dlab-gnb > :not(.dlab-gnb-logo) { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .site-header .dlab-gnb > :not(.dlab-gnb-logo) { transition: none; } }
/* 로그인 버튼 — 세션 확인 전에는 대기(Loading)를 보이고 누를 수 없다. 폭은 긴 문구(로그아웃)에 맞춘다. */
.login-button { position: relative; min-width: 100px; }
.login-button[data-auth-pending] { pointer-events: none; }
.login-button[data-auth-pending] .auth-button-label { visibility: hidden; }
.auth-button-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.login-button:not([data-auth-pending]) .auth-button-loading { display: none; }
/* 세션 확인 실패 알림 — Gnb 바로 아래 흰 바탕 */
.auth-status { padding-top: var(--dlab-space-20); padding-bottom: var(--dlab-space-20); }
/* ── 페이지 골격 ──────────────────────────────────────────────
패턴 위에는 글자를 바로 두지 않는다 — 제목 · 안내까지 모두 CardView 안에. */
.service-page { min-height: calc(100vh - 60px); }
.service-page-body {
display: flex;
flex-direction: column;
gap: var(--dlab-space-20);
padding-top: var(--dlab-space-30);
padding-bottom: var(--dlab-space-60);
}
.service-page-narrow { max-width: calc(640px + 2 * var(--dlab-layout-margin)); }
@media (min-width: 720px) {
.service-page { min-height: calc(100vh - 80px); }
.service-page-body { padding-top: var(--dlab-space-40); padding-bottom: var(--dlab-space-80); }
}
/* 페이지 머리 카드 — 제목(문서 구조 h1) · 안내 · 주요 동작 */
.service-head { display: flex; flex-direction: column; gap: var(--dlab-space-20); }
.service-head-copy { display: flex; flex-direction: column; gap: var(--dlab-space-10); min-width: 0; }
.service-head-copy > p { color: var(--dlab-color-text-secondary); }
@media (min-width: 720px) {
.service-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
.service-head > .service-actions { flex: 0 0 auto; }
}
/* 카드 본문은 자식 사이 간격이 없어서(가이드 7장 규칙 2) 감싸는 요소에 간격을 준다 */
.service-stack { display: flex; flex-direction: column; gap: var(--dlab-space-20); min-width: 0; }
.service-stack-tight { display: flex; flex-direction: column; gap: var(--dlab-space-10); min-width: 0; }
.service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dlab-space-10); }
.service-secondary { color: var(--dlab-color-text-secondary); }
/* 도구 줄 — 검색 · 정렬 · 보기 전환처럼 높이 32(small) 요소를 한 줄에 */
.service-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dlab-space-10); }
.service-toolbar-grow { flex: 1 1 240px; min-width: 0; }
/* 빈 상태 — 텍스트 스타일 + 여백(0단계). 테두리 상자로 감싸지 않는다(가이드 10장). */
.service-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dlab-space-10); padding: var(--dlab-space-30) 0; }
.service-empty-description { color: var(--dlab-color-text-secondary); }
.service-empty .service-actions { margin-top: var(--dlab-space-10); }
/* 숫자 요약 타일 — 카드 안에서 3개 이상 반복 → 테두리 없이 GRAY 50 + 안쪽 여백 20(가이드 7장 규칙 3) */
.service-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--dlab-space-10); }
.service-stat { display: flex; flex-direction: column; gap: var(--dlab-space-5); padding: var(--dlab-space-20); background: var(--dlab-color-bg-subtle); }
.service-stat dt { color: var(--dlab-color-text-secondary); }
/* 정의 목록 — 제작 기록 · 상세 정보 */
.service-definitions { display: flex; flex-direction: column; gap: var(--dlab-space-20); }
.service-definitions > div { display: flex; flex-direction: column; gap: var(--dlab-space-5); }
.service-definitions dd { white-space: pre-wrap; }
/* 직접 만든 상자 — 카드 · 모달 안에서는 자동으로 1px 회색(--dlab-nested-*)이 된다(가이드 4장) */
.service-box {
border: var(--dlab-nested-border-width, var(--dlab-border-width-regular)) solid
var(--dlab-nested-border-color, var(--dlab-color-border-default));
}
/* 파일 고르기 — 라이브러리에 없어 토큰으로 만든다. 입력칸과 같은 1px 회색 · hover GRAY 50 · 포커스 오렌지. */
.service-file {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--dlab-space-10);
padding: var(--dlab-space-20);
border: var(--dlab-border-width-thin) dashed var(--dlab-color-border-strong);
background: var(--dlab-color-bg-default);
transition: background-color var(--dlab-duration-fast) ease-out;
}
.service-file:hover, .service-file[data-dragging] { background: var(--dlab-color-bg-subtle); }
.service-file:focus-within { border-style: solid; border-color: var(--dlab-color-border-accent); }
.service-file input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.service-file-name { font-weight: var(--dlab-font-weight-bold); }
/* 접는 영역 — + 1px 구분선, 펼침 --dlab-duration-normal (가이드 10장) */
.service-details { border-top: var(--dlab-border-width-thin) solid var(--dlab-color-border-subtle); border-bottom: var(--dlab-border-width-thin) solid var(--dlab-color-border-subtle); }
.service-details > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--dlab-space-10);
min-height: 50px;
cursor: pointer;
list-style: none;
font-size: var(--dlab-font-size-p2);
font-weight: var(--dlab-font-weight-bold);
line-height: var(--dlab-font-line-height-base);
}
.service-details > summary::-webkit-details-marker { display: none; }
.service-details > summary svg { transition: transform var(--dlab-duration-normal) ease-out; }
.service-details[open] > summary svg { transform: rotate(180deg); }
.service-details-body { padding-bottom: var(--dlab-space-20); }
@media (prefers-reduced-motion: reduce) { .service-details > summary svg { transition: none; } }
/* 페이지 번호 목록 — 라이브러리에 없어 Text 버튼으로 만든다(가이드 10장). 현재 페이지는 오렌지 글자. */
.service-page-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dlab-space-5); }
.service-page-numbers [aria-current="page"] { color: var(--dlab-color-text-accent); }
/* 작은 상태 점 — 원은 상태 점에 허용(가이드 7장 규칙 9) */
.service-dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--dlab-radius-full); background: var(--dlab-color-bg-accent); }
/* 큰 미디어 틀 — 실행 화면 · 이미지 (직각, 검정 바탕) */
.service-media { position: relative; width: 100%; overflow: hidden; background: var(--dlab-color-bg-inverse); }
.service-media > iframe, .service-media > img, .service-media > video {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain;
}
/* ── 푸터 — 텍스트 스타일 + 여백(0단계), 패턴 밖 흰 바탕 ── */
.site-footer {
display: flex;
flex-direction: column;
gap: var(--dlab-space-15);
padding-top: var(--dlab-space-30);
padding-bottom: var(--dlab-space-40);
}
.site-footer p { color: var(--dlab-color-text-secondary); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 0; margin-left: calc(-1 * var(--dlab-space-15)); }
@media (min-width: 720px) {
.site-footer { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}