/*
* pds-modern.css — 학습자료실 목록/보기 새 디자인 시안 (2026-08-20)
*
* .i4u-pds-modern 안쪽만 건드린다. 페이지의 나머지(.snb 로그인 위젯, .tab-menu,
* 광고 슬롯 .location)는 다른 여러 페이지가 같이 쓰는 공용 뼈대라 손대지 않았다.
*
* 디자인 토큰은 /var/services/web/.design/tokens.css 의 iteach 브랜드 값 사본이다
* (top2.php 의 :root 스냅샷과 동일). tokens.css 가 웹으로 직접 서빙되면 이 블록을
* 한 줄로 교체한다.
*/
:root {
--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
'system-ui', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;
--fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem;
--fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem;
--line-tight: 1.3; --line-base: 1.65;
--letter-tight: -.02em;
--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
--space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
--space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 9999px;
--shadow-xs: 0 1px 2px rgb(0 0 0 / .04);
--shadow-sm: 0 1px 3px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .06);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .10), 0 4px 6px -4px rgb(0 0 0 / .05);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--duration-fast: 150ms; --duration-base: 200ms;
/* .pds-page-wrap 이 이 값을 쓴다. 예전엔 선언 없이 top2.php 의 :root 에
* 우연히 기대고 있어서, 헤더를 바꾸면 페이지가 조용히 full-bleed 로 퍼졌다.
* 스냅샷은 그 자체로 완결돼야 한다. */
--container-max: 1400px;
--gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1;
--gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155;
--gray-800: #1e293b; --gray-900: #0f172a;
--color-bg: #ffffff;
--color-fg: var(--gray-900);
--color-fg-muted: var(--gray-500);
--color-fg-subtle: var(--gray-400);
--color-border: var(--gray-200);
--color-border-strong: var(--gray-300);
--color-surface: var(--gray-50);
--color-surface-2: var(--gray-100);
--color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-active: #3730a3;
--color-primary-fg: #fff; --color-primary-soft: #eef2ff; --color-primary-soft-fg: #3730a3;
--color-accent: #b8893a; --color-accent-hover: #a37828;
--color-accent-soft: #f6ecd6; --color-accent-soft-fg: #6e5018; --color-accent-fg: #fff;
--color-success: #16a34a; --color-success-soft: #dcfce7;
--color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-soft: #fee2e2;
--color-warn: #d97706; --color-warn-soft: #fef3c7;
}
/* ─────────────────────────────────────────────────────────────
* 페이지 래퍼 — top2.php 헤더와 짝. 레거시 #wrapper(1240px) /
* .container article(970px) 대신 여기서 최대폭을 잡는다.
* ───────────────────────────────────────────────────────────── */
.pds-page, .pds-page * { box-sizing: border-box; }
.pds-page {
font-family: var(--font-sans);
color: var(--color-fg);
background: var(--color-bg);
}
.pds-page-wrap {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-6);
}
@media (max-width: 640px) { .pds-page-wrap { padding: 0 var(--space-4); } }
/* 상단 탭 (학습자료실 / 내자료 / 쓴댓글 …) */
.pds-tabnav {
display: flex; gap: var(--space-1); flex-wrap: wrap;
border-bottom: 1px solid var(--color-border);
margin-top: var(--space-5);
}
.pds-tabnav a {
font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg-muted);
padding: var(--space-3) var(--space-4); border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.pds-tabnav a:hover { color: var(--color-fg); }
.pds-tabnav a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--fw-semibold); }
.i4u-pds-modern, .i4u-pds-modern * { box-sizing: border-box; }
.i4u-pds-modern {
font-family: var(--font-sans);
color: var(--color-fg);
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: var(--space-8);
align-items: start;
margin: var(--space-6) 0 var(--space-12);
}
/* 사이드바(분류 필터) 없이 쓰는 화면 — 내자료 / 쓴댓글 / 받은댓글 / 즐겨찾기.
* 이 선언이 없으면 본문이 240px 짜리 첫 칸에 들어가 표가 한 글자씩 접힌다. */
.i4u-pds-modern.is-full { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
.i4u-pds-modern { grid-template-columns: 1fr; gap: var(--space-5); }
}
.i4u-pds-modern a { color: inherit; text-decoration: none; }
.i4u-pds-modern img { max-width: 100%; }
/* ─────────────────────────────────────────────────────────────
* 좌측 분류 트리 (skin/modern/shell_sidebar.php)
*
* sticky 로 붙여두되 뷰포트보다 길어지면 자기 안에서 스크롤되게 한다.
* 예전엔 max-height 없이 sticky 만 걸려 있어, 4단까지 펼치면 아래쪽 항목이
* 화면 밖으로 나간 채 스크롤도 되지 않아 아예 누를 수 없었다.
* ───────────────────────────────────────────────────────────── */
/* 사이드바 칸 = 분류 트리 카드 + 그 아래 광고.
* 카드 모양과 스크롤은 트리(.pds-tree)가 직접 갖는다 — 이 래퍼가 카드였을 때는
* 광고까지 카드 안에 갇혀 함께 스크롤됐다. */
.i4u-pds-sidebar {
position: sticky;
top: var(--space-4);
display: flex; flex-direction: column; gap: var(--space-4);
max-height: calc(100vh - var(--space-8));
}
@media (max-width: 900px) { .i4u-pds-sidebar { position: static; max-height: none; } }
/* 분류 트리 카드 — 길어지면 자기 안에서 스크롤한다.
* 예전엔 max-height 없이 sticky 만 걸려 있어, 4단까지 펼치면 아래쪽 항목이
* 화면 밖으로 나간 채 스크롤도 되지 않아 아예 누를 수 없었다. */
.pds-tree {
padding: var(--space-3); font-size: var(--fs-sm);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
overflow-y: auto;
overscroll-behavior: contain;
min-height: 0; /* flex 자식이 줄어들 수 있게 — 없으면 스크롤이 안 생긴다 */
scrollbar-width: thin;
}
.pds-tree::-webkit-scrollbar { width: 8px; }
.pds-tree::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
.pds-tree::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 900px) { .pds-tree { max-height: 340px; } }
/* 초기화는 ul 자체에만. 아래 단계별 규칙(.pds-tree ul.pds-tree-lN)이 이걸 덮는다.
* 주의: '.pds-tree ul'(클래스+엘리먼트)은 '.pds-tree-l2'(클래스)보다 특정도가 높다.
* 처음엔 단계 규칙을 .pds-tree-l2 로만 써서 들여쓰기가 통째로 0 이 됐었다
* (단계당 1px — 사실상 구분 불가). 그래서 아래는 전부 .pds-tree ul.xxx 로 쓴다. */
.pds-tree ul { list-style: none; margin: 0; padding: 0; }
.pds-tree-head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-1) var(--space-2) var(--space-3);
font-size: var(--fs-xs); font-weight: var(--fw-bold);
color: var(--color-fg-subtle); letter-spacing: .04em;
}
.pds-tree-reset {
font-weight: var(--fw-semibold); color: var(--color-primary) !important;
font-size: var(--fs-xs);
}
.pds-tree-reset:hover { text-decoration: underline; }
/* 공통 항목 */
.pds-tree-item, .pds-tree-leaf {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-2);
border-radius: var(--radius-md);
color: var(--color-fg-muted);
line-height: var(--line-tight);
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.pds-tree-item:hover, .pds-tree-leaf:hover { background: var(--color-surface); color: var(--color-fg); }
.pds-tree-item:focus-visible, .pds-tree-leaf:focus-visible {
outline: 3px solid var(--color-primary-soft); outline-offset: -2px;
}
.pds-tree-item.is-open { color: var(--color-fg); }
.pds-tree-item.is-current, .pds-tree-leaf.is-current {
background: var(--color-primary-soft); color: var(--color-primary-soft-fg);
font-weight: var(--fw-semibold);
}
/* ── 단계별 크기·굵기 — 깊어질수록 작고 옅어진다 ── */
.pds-tree ul.pds-tree-l1 > li > .pds-tree-item {
font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-fg);
}
.pds-tree ul.pds-tree-l2 > li > .pds-tree-item { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.pds-tree ul.pds-tree-l3 > li > .pds-tree-item { font-size: var(--fs-sm); }
.pds-tree ul.pds-tree-l4 > li > .pds-tree-leaf { font-size: var(--fs-xs); }
/* ── 들여쓰기 + 세로 안내선 ──
* 단계마다 확실히 벌리고, 안내선 색을 달리해 깊이를 눈으로 잡게 한다. */
.pds-tree ul.pds-tree-l2,
.pds-tree ul.pds-tree-l3,
.pds-tree ul.pds-tree-l4 {
margin: 3px 0 var(--space-2) var(--space-4);
padding-left: var(--space-4);
border-left: 2px solid var(--color-border);
}
/* 지금 타고 있는 경로의 안내선은 브랜드색 — 어디로 내려왔는지 선이 이어져 보인다 */
.pds-tree ul.pds-tree-l2 { border-left-color: var(--color-primary); }
.pds-tree ul.pds-tree-l3 { border-left-color: var(--color-primary-soft-fg); opacity: 1; }
.pds-tree ul.pds-tree-l4 { border-left-color: var(--color-border-strong); }
/* ── 단계 표시자 ──
* 펼칠 수 있는 항목은 삼각형, 마지막 단계(학기 등)는 점. */
.pds-tree-caret {
flex: 0 0 auto; width: 0; height: 0;
border-left: 5px solid currentColor;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
opacity: .4;
transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.pds-tree-item.is-open > .pds-tree-caret { transform: rotate(90deg); opacity: 1; }
.pds-tree-item:hover > .pds-tree-caret { opacity: .8; }
.pds-tree-leaf::before {
content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: var(--radius-full);
background: currentColor; opacity: .45;
}
.pds-tree-leaf.is-current::before { opacity: 1; }
/* 펼쳐진 갈래의 부모는 배경을 살짝 깔아 묶음을 만든다 */
.pds-tree ul.pds-tree-l1 > li:has(> .pds-tree-item.is-open) {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-1) var(--space-1) var(--space-1) 0;
margin-bottom: var(--space-2);
}
/* ─────────────────────────────────────────────────────────────
* 목록 상단 — 안내문구 / 검색 / 정렬 탭 / 글쓰기
* ───────────────────────────────────────────────────────────── */
.pds-hero {
background: linear-gradient(135deg, var(--color-primary-soft) 0%, #ffffff 70%);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-5) var(--space-6);
margin-bottom: var(--space-5);
}
.pds-hero h2 { margin: 0 0 var(--space-2); font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); }
.pds-hero-note {
margin: 0; font-size: var(--fs-sm); color: var(--color-primary-soft-fg);
display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.pds-hero-note a { font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; }
.pds-hero-count { font-weight: var(--fw-semibold); color: var(--color-primary); }
.pds-hero-auth { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--color-fg-muted); }
.pds-hero-auth a.pds-chip { background: var(--color-accent-soft); color: var(--color-accent-soft-fg); }
.pds-hero-auth a.pds-chip.is-active { background: var(--color-accent); color: var(--color-accent-fg); }
.pds-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
flex-wrap: wrap; margin-bottom: var(--space-4);
}
.pds-search { display: flex; align-items: stretch; gap: var(--space-2); }
.pds-search select, .pds-search input[type=text] {
font-family: inherit; font-size: var(--fs-sm); border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: #fff; color: var(--color-fg);
}
.pds-search input[type=text] { width: 220px; }
.pds-search input[type=submit] {
font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
background: var(--color-primary); color: var(--color-primary-fg); border: 0;
border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.pds-search input[type=submit]:hover { background: var(--color-primary-hover); }
.pds-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pds-chip {
display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: var(--fw-medium);
color: var(--color-fg-muted); background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-full); padding: var(--space-1) var(--space-4);
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.pds-chip:hover { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); border-color: var(--color-primary-soft); }
.pds-chip.is-sa { color: var(--color-success); }
.pds-chip.is-nc { color: #8e44ad; }
/* ── 버튼 컴포넌트 ──────────────────────────────────────────
* top2.php 의 .i4h-btn 과 같은 기하(높이 38, radius-full)로 맞춰 헤더와 본문이
* 같은 리듬을 갖게 한다. 이름을 .btn 으로 두면 안 된다 — 이 페이지에서
* span.btn.download1(레거시 첨부파일 버튼)이 이미 그 이름을 쓰고 있다. */
.pds-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
height: 38px; padding: 0 var(--space-5);
border: 1px solid transparent; border-radius: var(--radius-full);
font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
white-space: nowrap; cursor: pointer; text-decoration: none;
transition: background var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out),
color var(--duration-base) var(--ease-out);
}
.pds-btn:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.pds-btn-primary { background: var(--color-primary); color: var(--color-primary-fg); box-shadow: var(--shadow-sm); }
.pds-btn-primary:hover { background: var(--color-primary-hover); color: var(--color-primary-fg); box-shadow: var(--shadow-md); }
.pds-btn-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.pds-write-btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.pds-toolbar .pds-write-btn { margin-left: auto; }
/* 하단 글쓰기는 ghost 로 강등 — 한 화면에 solid primary 두 개를 두지 않는다 */
.pds-write-btn-foot .pds-btn-primary {
background: #fff; color: var(--gray-700); border-color: var(--color-border-strong); box-shadow: none;
}
.pds-write-btn-foot .pds-btn-primary:hover {
background: #fff; border-color: var(--color-primary); color: var(--color-primary); box-shadow: none;
}
.pds-admin-cart { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); }
.pds-admin-cart img { height: 16px; }
/* ─────────────────────────────────────────────────────────────
* 카드 그리드
* ───────────────────────────────────────────────────────────── */
.pds-grid { display: flex; flex-direction: column; gap: var(--space-3); }
.pds-card {
position: relative;
background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-xs);
transition: box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.pds-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.pds-card-top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.pds-cat { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-sm); padding: 2px 8px; }
.pds-cat a { color: inherit; }
.pds-cat-c { color: var(--color-fg-muted); background: var(--color-surface); }
.pds-card-top .pds-vote { margin-left: auto; font-size: var(--fs-xs); color: var(--color-fg-muted); white-space: nowrap; }
.pds-card-top .pds-vote img { height: 14px; vertical-align: -2px; }
.pds-title { margin: 0 0 var(--space-1); font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--line-tight); word-break: break-word; }
.pds-title a:hover { color: var(--color-primary); }
.pds-title img { height: 16px; vertical-align: -2px; margin-left: 2px; }
.pds-comment-badge {
display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em;
font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-primary-fg);
background: var(--color-primary); border-radius: var(--radius-full); padding: 0 6px; margin-left: 4px;
}
.pds-meta { font-size: var(--fs-xs); color: var(--color-fg-subtle); margin-bottom: var(--space-2); }
/* 파일 목록.
* flex 로 두면 라이센스 뱃지 [SA] 와 파일명 가 각각 독립된 flex 아이템이 되어
* 줄이 갈라진다. 한 줄에 이어 붙어야 하므로 일반 인라인 흐름으로 두고,
* 파일 사이 구분은 로직이 이미 넣어주는
에 맡긴다. */
.pds-files { font-size: var(--fs-sm); line-height: 1.9; color: var(--color-fg-muted); }
.pds-files a { color: var(--color-fg-muted); }
.pds-files a:hover { color: var(--color-primary); text-decoration: underline; }
.pds-files img { height: 16px; vertical-align: -3px; margin-right: 4px; }
/* 라이센스 뱃지([SA]/[NC]…)와 뒤따르는 파일명이 갈라지지 않게 */
.pds-files > a { white-space: nowrap; margin-right: 2px; }
.pds-files > a + a { white-space: normal; }
.pds-card-admin { position: absolute; top: var(--space-3); right: var(--space-3); }
.pds-card-empty { text-align: center; padding: var(--space-12) var(--space-4); color: var(--color-fg-muted); background: var(--color-surface); border-radius: var(--radius-lg); }
/* 하단 툴바 / 페이지네이션 */
.pds-footbar { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.i4u-pds-modern .page_nav { margin: var(--space-2) auto 0; }
.i4u-pds-modern .page_nav .paging { list-style: none; display: flex; justify-content: center; gap: 2px; margin: 0; padding: 0; flex-wrap: wrap; }
.i4u-pds-modern .page_nav .paging li { display: inline-flex; }
.i4u-pds-modern .page_nav .paging li a, .i4u-pds-modern .page_nav .paging li b {
display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px;
border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--color-fg-muted);
}
.i4u-pds-modern .page_nav .paging li a:hover { background: var(--color-surface); color: var(--color-fg); }
.i4u-pds-modern .page_nav .paging li b { background: var(--color-primary); color: var(--color-primary-fg); font-weight: var(--fw-semibold); }
/* ─────────────────────────────────────────────────────────────
* 상세보기
* ───────────────────────────────────────────────────────────── */
.pds-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-2); }
.pds-breadcrumb { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.pds-breadcrumb a:hover { color: var(--color-primary); }
.pds-breadcrumb .sep { margin: 0 4px; color: var(--color-fg-subtle); }
.pds-detail-actions { display: flex; align-items: center; gap: var(--space-2); }
.pds-detail-actions img { height: 18px; vertical-align: middle; }
.pds-detail-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); line-height: var(--line-tight); margin: 0 0 var(--space-3); word-break: break-word; }
.pds-detail-title img { height: 18px; vertical-align: -2px; margin-left: 4px; }
.pds-detail-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-fg-muted); margin-bottom: var(--space-5); flex-wrap: wrap; }
.pds-detail-meta .no { color: var(--color-fg-subtle); }
.pds-panel { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-xs); }
.pds-panel-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-fg-muted); margin: 0 0 var(--space-3); text-transform: uppercase; letter-spacing: .04em; }
/* 유료정보 */
.pds-price-box { display: flex; align-items: center; gap: var(--space-3); background: var(--color-warn-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
/* 첨부파일 목록 — pdsfiles 변수(비즈니스 로직 산출물) 재스킨 */
.pds-panel .pds-file-row {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
}
.pds-panel .pds-file-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pds-panel .pds-file-row img { height: 18px; vertical-align: -3px; }
/* 첫 .pds-file-left = 파일명+용량 → 남는 폭을 다 먹어 버튼 묶음을 오른쪽으로 민다.
* 두 번째 = 미리보기·서버 버튼 묶음 → 줄바꿈 없이 붙어 있게. */
.pds-panel .pds-file-left { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pds-panel .pds-file-row .pds-file-left:first-of-type { flex: 1 1 260px; min-width: 0; word-break: break-all; }
.pds-panel .pds-file-row .pds-file-left + .pds-file-left { flex: 0 0 auto; margin-left: auto; }
/* ── 첨부파일 액션 버튼 ──────────────────────────────────────
* span.btn 은 껍데기로 강등하고 알약은 안쪽 가 직접 그린다. 이유 두 가지:
* 1) padding 을 span 에 두면 알약 가장자리가 링크가 아니라서 눌러도 반응이 없다.
* 2) footer2.php 가 5초마다 $('.downloadN a').css('color', 부하색) 으로
* **인라인** 글자색을 주입한다. hover 에서 글자색을 바꾸려 하면 인라인에 져서
* 대비만 무너진다 → 글자색은 JS 에 맡기고 배경/테두리로만 상태를 표현한다.
* 마크업(view.php)은 구 스킨과 공유하므로 손대지 않는다 — CSS 로만 해결. */
.pds-panel .pds-file-row .btn {
display: inline-flex; align-items: center;
background: none; border: 0; padding: 0; margin: 0;
font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.pds-panel .pds-file-row .btn > a {
display: inline-flex; align-items: center; gap: 6px;
min-height: 30px; padding: 0 var(--space-3);
border: 1px solid transparent; border-radius: var(--radius-full);
line-height: 1; text-decoration: none; white-space: nowrap;
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.pds-panel .pds-file-row .btn > a:focus-visible {
outline: 3px solid var(--color-primary-soft); outline-offset: 2px;
}
/* 미리보기 / 파일보기 — 탐색용. 다운로드보다 한 단계 낮춘다 */
.pds-panel .pds-file-row .btn.preview > a,
.pds-panel .pds-file-row .btn.archiveview > a {
min-height: 26px;
background: var(--color-accent-soft); color: var(--color-accent-soft-fg);
border-color: transparent;
}
.pds-panel .pds-file-row .btn.preview > a:hover,
.pds-panel .pds-file-row .btn.archiveview > a:hover {
background: var(--color-accent); color: var(--color-accent-fg);
}
/* 다운로드 4종 — 서로 등가. 어느 서버도 시각적으로 승격하지 않는다.
* (안내 문구가 "부하 적은 서버를 고르라" 이므로 하나를 강조하면 조언과 모순된다) */
.pds-panel .pds-file-row .btn[class*="download"] > a {
background: var(--color-bg);
border-color: var(--color-primary);
color: var(--color-primary-soft-fg); /* JS 가 서버 부하색으로 덮어쓴다 */
}
/* 점(dot)은 currentColor 라 JS 가 넣는 부하색을 그대로 받아 상태 표시가 된다.
* JS 가 아직 안 돌았으면 그냥 상속색 — 깨지지 않는다. */
.pds-panel .pds-file-row .btn[class*="download"] > a::before {
content: ""; flex: 0 0 auto; width: 7px; height: 7px;
border-radius: var(--radius-full); background: currentColor;
}
.pds-panel .pds-file-row .btn[class*="download"] > a:hover {
background: var(--color-primary-soft); border-color: var(--color-primary-active);
}
/* "다운로드" 그룹 라벨 — 알약 바깥(span)에 찍어 4개가 한 묶음임을 보인다 */
.pds-panel .pds-file-row .btn.download1 { margin-left: var(--space-2); }
.pds-panel .pds-file-row .btn.download1::before {
content: "다운로드"; margin-right: var(--space-2);
font-weight: var(--fw-medium); color: var(--color-fg-subtle);
}
.pds-panel .pds-file-row .btn[class*="download"] + .btn[class*="download"] { margin-left: 4px; }
/* 서버 상태 바 — view.php 가 인라인 style 로 flex 를 박아둬서 좁은 화면에서
* 줄바꿈이 안 되고 가로 스크롤을 만든다. 감싸도록 덮어쓴다. */
#server-status-bar {
border-radius: var(--radius-md) !important;
flex-wrap: wrap; gap: var(--space-1); max-width: 100%;
}
#server-status-bar > span { white-space: nowrap; }
.pds-panel > div[style*="FFFBEA"] { border-radius: var(--radius-md) !important; }
/* 평점 / 신고 / 저작권 안내 */
.pds-score-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.pds-score-row .score p { margin: 0 0 var(--space-2); font-size: var(--fs-sm); color: var(--color-fg-muted); }
.pds-score-row .score ul { list-style: none; display: flex; gap: var(--space-2); margin: 0; padding: 0; flex-wrap: wrap; }
.pds-score-row .score li { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--color-fg-muted); cursor: pointer; }
.pds-license-note { font-size: var(--fs-xs); color: var(--color-fg-subtle); margin-top: var(--space-3); }
.pds-license-note a { text-decoration: underline; }
.pds-license-report { margin-top: var(--space-2); display: flex; gap: var(--space-2); }
.pds-license-report input[type=text] { flex: 1; font-family: inherit; font-size: var(--fs-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
/* 본문 / 서명 */
.pds-memo { font-size: var(--fs-base); line-height: var(--line-base); word-break: break-word; }
.pds-memo img { max-width: 100% !important; height: auto !important; }
/* 서명(fnGetSignature) — 레거시가 큰 프로필 이미지를 넣어 패널이 과하게 커진다 */
.pds-sign { margin-top: var(--space-4); font-size: var(--fs-sm); }
.pds-sign img { max-width: 120px; height: auto; }
.pds-sign table { width: auto !important; }
/* 추천 자료.
* grid 대신 flex + 명시적 정렬. 레거시 modeling.css 가 이 영역 조상에 걸어둔
* float/정렬 규칙에 휘둘리지 않도록 방향과 상단정렬을 못박는다. */
.pds-recommend {
display: flex; direction: ltr; gap: var(--space-6);
align-items: flex-start; flex-wrap: wrap;
}
.pds-recommend-col { flex: 1 1 280px; min-width: 0; float: none; }
@media (max-width: 640px) { .pds-recommend-col { flex: 1 1 100%; } }
.pds-recommend-col h4 { margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-fg-muted); }
.pds-recommend-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pds-recommend-col li { font-size: var(--fs-sm); }
.pds-recommend-col li .tag { color: var(--color-fg-subtle); margin-right: 4px; }
.pds-recommend-col li a:hover { color: var(--color-primary); text-decoration: underline; }
.pds-recommend-empty { font-size: var(--fs-sm); color: var(--color-fg-subtle); }
/* 댓글 — 비즈니스 로직( studymaterials/view.php )이