/* 홈페이지 관리 화면만 정돈한다. 다른 화면은 건드리지 않도록 모든 규칙을 #panel-homepage로 묶는다.
되돌리려면 index.html에서 이 파일을 부르는 한 줄만 지우면 된다.
손보기 전 상태: 카드 10장의 제목·설명·칸 여백이 인라인 style로 제각각(8/10/12px)이었고,
버튼은 72개가 전부 같은 크기(13px / 9px 16px, 높이 37px)여서 중요한 버튼과 곁다리 버튼이
구분되지 않았다. `btn small`의 small은 정의조차 없어 아무 효과가 없었다. */
/* 2026-09-19 — 어두운 화면 대응.
이 파일만 색을 직접 박아 두어(18가지) 어두운 화면을 전혀 따르지 않았다. 다른 패널은 모두
테마 토큰을 쓰는데 여기만 밝은 화면용 값이 고정이라, 어두운 바탕 위에 짙은 남색 제목이 그대로
얹혀 47곳이 대비 1.39~2.96 이었다(거의 안 보였다). 전부 토큰으로 옮겼다.
흐린 글자는 두 단으로 쓰고 있었다 — 카드 설명(--hp-muted)과 그보다 작은 보조 문구(.hp-hint-sm ·
.hp-sec-hint). 둘 다 --mw-muted 로 합치면 글의 층이 뭉개지므로, 설명은 한 단 진한
--mw-ink-soft, 보조는 --mw-muted 로 나눠 담았다. */
/* ---- 글자 크기 기준 ---- */
#panel-homepage {
--hp-gap: 12px; /* 칸과 칸 사이 */
--hp-line: var(--mw-line);
--hp-muted: var(--mw-ink-soft);
}
/* ---- 카드 ---- */
#panel-homepage .card { padding: 16px 18px; margin-bottom: 12px; }
/* 카드 제목 — 지금까지 그냥 라 아래 설명과 붙어 있었다. 밑줄로 머리와 몸을 나눈다. */
#panel-homepage .card > b {
display: block; font-size: 13.5px; font-weight: 700; color: var(--mw-ink);
padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--hp-line);
}
/* 카드 설명 — 크기와 여백을 한 가지로 모은다(11.5px와 12px가 섞여 있었다). */
#panel-homepage .card > p,
#panel-homepage .hp-hint {
font-size: 12px; color: var(--hp-muted); line-height: 1.6; margin: 0 0 12px;
}
#panel-homepage .hp-hint-sm { font-size: 11.5px; color: var(--mw-muted); line-height: 1.55; margin: 5px 0 0; }
#panel-homepage code { background: var(--mw-surface-sunken); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
/* ---- 입력칸 ---- */
#panel-homepage label { font-size: 12px; font-weight: 600; color: var(--mw-ink-soft); }
#panel-homepage input[type=text], #panel-homepage input[type=number], #panel-homepage input:not([type]),
#panel-homepage select, #panel-homepage textarea {
display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
padding: 7px 9px; border: 1px solid var(--mw-line-strong); border-radius: 7px;
font-size: 12.5px; font-weight: 400; color: var(--mw-ink); background: var(--mw-surface); font-family: inherit;
}
#panel-homepage textarea { line-height: 1.5; resize: vertical; }
#panel-homepage input:focus, #panel-homepage select:focus, #panel-homepage textarea:focus {
outline: none; border-color: var(--mw-accent); box-shadow: 0 0 0 3px var(--mw-accent-soft);
}
/* 파일 고르기 칸은 절대 늘리지 않는다. 칸을 늘리면 눈에 보이는 "파일 선택" 버튼은 그대로인데
누르면 반응하는 범위만 칸 끝까지 넓어져서, 옆의 빈 곳을 눌러도 파일 창이 열린다. */
#panel-homepage input[type=file] {
display: block; width: auto; max-width: 100%; box-sizing: border-box; margin-top: 4px;
font-size: 11.5px; color: var(--mw-ink-soft);
}
/* 체크박스는 칸을 늘리면 안 된다 — 위 규칙이 width:100%를 주지 않도록 따로 되돌린다. */
#panel-homepage input[type=checkbox] { display: inline-block; width:17px; height:17px; margin: 0; }
/* ---- 한 줄에 나란히 놓이는 칸들 ---- */
#panel-homepage .row-form { gap: var(--hp-gap); margin-bottom: var(--hp-gap); align-items: flex-end; }
#panel-homepage .row-form:last-child { margin-bottom: 0; }
#panel-homepage .row-form input { flex: 1; padding: 7px 9px; }
/* ---- 버튼: 기존의 70% 크기(높이 37px → 26px) ---- */
/* 크기를 줄이는 대신 성격이 드러나게 셋으로 나눈다 — 지금까지는 72개가 모두 같은 크기라
"저장"과 "지우기"가 화면에서 같은 무게로 보였다. */
/* 이 패널만 따로 쓰던 크기(11px/6px, small=10.5px/5px)를 관리자 화면 공통 등급(sm/xs)에 맞춘다 —
같은 성격의 버튼이 화면마다 다른 크기로 보이지 않게 한다. */
#panel-homepage .btn {
padding: 7px 13px; font-size: 12.5px; font-weight: 600; border-radius: 9px;
line-height: 1.45; letter-spacing: -.01em;
}
/* .btn.small 크기는 admin/index.html 에서 .btn.xs 와 한 벌로 정한다 — 여기서 또 정하면
같은 이름인데 이 화면만 크기가 달라진다(실제로 그랬다). */
#panel-homepage .btn.secondary { background: var(--mw-accent-soft); color: var(--mw-accent-ink); border: 1px solid var(--mw-line); }
#panel-homepage .btn:hover { filter: brightness(1.06); }
/* 카드 맨 아래 저장 버튼 줄 — 버튼과 알림 문구를 한 줄에 세운다. */
#panel-homepage .hp-actions {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hp-line);
}
#panel-homepage .hp-actions .error { margin: 0; font-size: 12px; }
/* ---- 이 영역 보이기 같은 스위치 ---- */
#panel-homepage .hp-switch {
display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px;
padding: 6px 11px; background: var(--mw-surface-sunken); border: 1px solid var(--hp-line);
border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--mw-ink); cursor: pointer;
}
#panel-homepage .hp-switch:hover { border-color: var(--mw-line-strong); }
/* ---- 그림 세 칸(로고·공유·첫 화면) ---- */
#panel-homepage .hp-imgs { display: flex; flex-wrap: wrap; gap: 14px; }
/* min-width:0 인 까닭 — flex 항목의 min-width 는 기본값 auto 라 "내용의 최소폭" 아래로는
줄어들지 않는다. 이 칸 안에 크기 입력줄(.hp-size)이 있어 최소폭이 329px 로 굳었고,
320px 짜리 화면에서 본문 안쪽 폭(268px)을 넘겨 본문이 49px 옆으로 스크롤됐다.
0 으로 두면 담는 자리에 맞춰 240px 까지 줄고, 칸 안의 내용은 그대로 들어간다(넘침 0).
flex-basis 210px 은 그대로다 — 자리가 넉넉하면 예전처럼 210px 를 기준으로 나란히 놓인다. */
#panel-homepage .hp-img {
flex: 1 1 210px; min-width: 0;
border: 1px solid var(--hp-line); border-radius: 9px; padding: 12px; background: var(--mw-surface-sunken);
}
#panel-homepage .hp-img > h4 { font-size: 12px; font-weight: 700; color: var(--mw-ink); margin: 0 0 8px; }
#panel-homepage .hp-img-preview { min-height: 40px; margin-bottom: 8px; }
#panel-homepage .hp-size { display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; }
#panel-homepage .hp-size .num { flex: 1 1 auto; }
#panel-homepage .hp-size .unit { flex: 0 0 66px; }
/* ---- 기본 그림 내려받기 ---- */
#panel-homepage .hp-art { display: flex; flex-wrap: wrap; gap: 12px; }
#panel-homepage .hp-art-item {
flex: 0 0 196px; border: 1px solid var(--hp-line); border-radius: 9px; padding: 10px; background: var(--mw-surface);
}
#panel-homepage .hp-art-item .thumb { background: var(--mw-surface-sunken); border-radius: 6px; padding: 8px; margin-bottom: 8px; }
#panel-homepage .hp-art-item .thumb svg { width: 100%; height: auto; display: block; }
#panel-homepage .hp-art-item .name { font-size: 11.5px; font-weight: 700; color: var(--mw-ink); }
#panel-homepage .hp-art-item .size { font-size: 11.5px; color: var(--hp-muted); margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
#panel-homepage .hp-art-item .btns { display: flex; gap: 5px; }
/* ---- 본문 섹션 ---- */
#panel-homepage .hp-sec {
border: 1px solid var(--hp-line); border-radius: 9px; padding: 13px; margin-bottom: 10px; background: var(--mw-surface);
}
#panel-homepage .hp-sec.off { background: var(--mw-surface-sunken); border-color: var(--mw-line); }
#panel-homepage .hp-sec-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
#panel-homepage .hp-sec-head .no { font-size: 12.5px; font-weight: 700; color: var(--mw-ink); }
#panel-homepage .hp-sec-head .kind {
font-size: 10.5px; color: var(--mw-accent-ink); background: var(--mw-accent-soft); padding: 2px 7px; border-radius: 9px; font-weight: 600;
}
#panel-homepage .hp-sec-head .hidden-tag { font-size: 10.5px; color: var(--mw-bad-ink); font-weight: 600; }
#panel-homepage .hp-sec-head .tools { margin-left: auto; display: flex; gap: 4px; }
#panel-homepage .hp-sec-hint { font-size: 11.5px; color: var(--mw-muted); margin: -4px 0 10px; }
#panel-homepage .hp-items-count { font-size: 11.5px; color: var(--hp-muted); margin-bottom: 6px; }
/* 항목 한 줄 */
#panel-homepage .hp-item {
display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
padding: 9px 10px; margin-bottom: 6px; background: var(--mw-surface-sunken);
border: 1px solid var(--mw-line); border-radius: 8px;
}
#panel-homepage .hp-item .del { margin-left: auto; }
/* min-width:0 — 위 .hp-img 와 같은 까닭이다. flex 항목은 min-width 기본값이 auto 라
안에 든 입력칸 때문에 최소폭이 303px 로 굳었고, 폰 폭에서 담는 자리(212px)를 넘겨
본문이 48px 밀렸다. 앞서 .hp-img 만 고치고 이 자리를 빠뜨렸다 — 같은 결함의 두 번째 곳이다. */
#panel-homepage .hp-item-img { flex: 1 1 190px; min-width: 0; }
#panel-homepage .hp-item-img > .cap { font-size: 12px; font-weight: 600; color: var(--mw-ink-soft); margin-bottom: 4px; }
#panel-homepage .hp-item-img .shown { display: flex; align-items: center; gap: 6px; }
#panel-homepage .hp-item-img img { height: 26px; border-radius: 4px; }
/* 좁은 화면에서는 칸을 한 줄에 하나씩 */
@media (max-width: 720px) {
#panel-homepage .card { padding: 14px; }
#panel-homepage .row-form { gap: 9px; }
#panel-homepage .hp-art-item { flex: 1 1 100%; }
}