/* =============================================================
gnucms.com · atelier
따뜻한 공방 감성으로 꾸민 발견형 커뮤니티 테마.
화면 구조는 카테고리 원형 줄, 세로 커버 카드, 순위 목록, 관리 콘솔을 중심으로 잡았고,
색은 크림 종이 바탕 + 흙빛 오렌지로 다시 잡았다.
브랜드 자산(로고·이름·이미지·문구)은 쓰지 않고 배치 언어만 참고했다.
컴포넌트는 daisyUI 5 를 CDN 에서 그대로 받아 쓴다.
daisyUI 쪽에서 오는 것: 판(Tailwind preflight 리셋), btn · card · badge ·
alert · divider · kbd · status · input · select · textarea · toggle ·
checkbox · fieldset · validator-hint · table · list · menu · dropdown ·
drawer · dock · chat · stats · join · breadcrumbs · tabs · carousel ·
hero · footer · avatar · prose, 그리고 --color-* / --radius-* 변수 체계.
이 파일에서 하는 것: 공방 팔레트로 그 변수들을 덮어쓰고, 모양을 손보고,
daisyUI 에 없는 화면(머리글 · GNB · 카드 · 관리 콘솔 · CKEditor)을 짓는 것.
composer / npm / 컴파일은 쓰지 않는다. 링크 두 줄이 전부다.
⚠ 이 파일은 레이어 밖이라 daisyUI 의 어떤 규칙이든 특이도와 무관하게 이긴다.
그래서 두 가지를 지킨다.
1) a { color: inherit } 같은 요소 리셋을 두지 않는다.
그 한 줄이 daisyUI 의 .btn { color: var(--btn-fg) } 까지 덮어
의 글자가 배경에 묻힌다.
2) .btn / .badge 의 background · color 를 직접 쓰지 않는다.
daisyUI 는 변종을 --btn-color / --badge-color 로 정하므로
직접 칠하면 변종이 지고 흰 바탕에 흰 글씨가 된다. 모양만 손댄다.
============================================================= */
/* --- 01 daisyUI 테마: light -------------------------------- */
:root,
[data-theme="light"]{
color-scheme:light;
/* 공예 마켓의 종이 같은 따뜻한 무채색. */
--color-base-100:#fffdf9;
--color-base-200:#f7f2e9;
--color-base-300:#eadfce;
--color-base-content:#403932;
/* 흙빛 오렌지. 본문 위의 주요 동작과 선택 상태에 쓴다. */
--color-primary:#c24125;
--color-primary-content:#ffffff;
--color-secondary:#287567;
--color-secondary-content:#ffffff;
--color-accent:#9a5a9e;
--color-accent-content:#ffffff;
--color-neutral:#403932;
--color-neutral-content:#ffffff;
--color-info:#1a6ba1;
--color-info-content:#ffffff;
--color-success:#0f7a4a;
--color-success-content:#ffffff;
--color-warning:#8a5a00;
--color-warning-content:#ffffff;
--color-error:#c02626;
--color-error-content:#ffffff;
--field-border:color-mix(in srgb,var(--color-base-content) 55%,transparent);
--field-border-width:1.5px;
/* 배너·리본처럼 글자를 얹지 않는 자리에만 쓰는 흙빛 원색. */
--brand-vivid:#f28b64;
--brand-deep:#a8361e;
--brand-wash:#fff0df;
--radius-selector:9999px;
--radius-field:.8rem;
--radius-box:1.5rem;
--size-field:.25rem;
--size-selector:.25rem;
--border:1px;
/* daisyUI 의 입체·노이즈 효과를 꺼 평평하게 표현한다. */
--depth:0;
--noise:0;
/* 아바타·커버용 톤 (따뜻한 공예 색을 중심으로 잡는다) */
--tone-0:#d94f2b; --tone-1:#287567; --tone-2:#a66a35;
--tone-3:#4678a8; --tone-4:#a64f76; --tone-5:#7657a8;
--shadow-1:0 2px 0 rgba(88,62,40,.05);
--shadow-2:0 9px 26px rgba(88,62,40,.1);
--shadow-3:0 18px 46px rgba(88,62,40,.16);
--shadow-4:0 24px 48px -16px rgba(15,23,42,.24),0 8px 16px -10px rgba(15,23,42,.14);
--backdrop:rgba(15,23,42,.55);
}
/* --- 02 daisyUI 테마: dark --------------------------------- */
[data-theme="dark"]{
color-scheme:dark;
--color-base-100:#201c18;
--color-base-200:#171411;
--color-base-300:#332b24;
--color-base-content:#f4eadc;
--color-primary:#ff9874;
--color-primary-content:#31130a;
--color-secondary:#6ee7b7;
--color-secondary-content:#052018;
--color-accent:#93c5fd;
--color-accent-content:#0a1a2e;
--color-neutral:#1c2635;
--color-neutral-content:#dde5ee;
--color-info:#7dd3fc;
--color-info-content:#08202e;
--color-success:#6ee7b7;
--color-success-content:#05261b;
--color-warning:#fcd34d;
--color-warning-content:#2a2005;
--color-error:#fca5a5;
--color-error-content:#2e0c0c;
--field-border:color-mix(in srgb,var(--color-base-content) 18%,transparent);
--field-border-width:var(--border);
--brand-vivid:#ffad8c;
--brand-deep:#ffc2aa;
--brand-wash:#3a251b;
--tone-0:#7cc4f0; --tone-1:#5eead4; --tone-2:#a5b4fc;
--tone-3:#7dd3fc; --tone-4:#f9a8d4; --tone-5:#c4b5fd;
--shadow-1:0 1px 2px rgba(0,0,0,.5);
--shadow-2:0 2px 6px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.5);
--shadow-3:0 10px 24px -8px rgba(0,0,0,.7),0 4px 8px -6px rgba(0,0,0,.6);
--shadow-4:0 24px 48px -16px rgba(0,0,0,.75),0 8px 16px -10px rgba(0,0,0,.6);
--backdrop:rgba(0,0,0,.7);
}
/* 시스템 모드(= data-theme 없음)와 JS 꺼짐: daisyUI 의 prefersdark 동작 */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
color-scheme:dark;
--color-base-100:#201c18;
--color-base-200:#171411;
--color-base-300:#332b24;
--color-base-content:#f4eadc;
--color-primary:#ff9874;
--color-primary-content:#31130a;
--color-secondary:#6ee7b7;
--color-secondary-content:#052018;
--color-accent:#93c5fd;
--color-accent-content:#0a1a2e;
--color-neutral:#1c2635;
--color-neutral-content:#dde5ee;
--color-info:#7dd3fc;
--color-info-content:#08202e;
--color-success:#6ee7b7;
--color-success-content:#05261b;
--color-warning:#fcd34d;
--color-warning-content:#2a2005;
--color-error:#fca5a5;
--color-error-content:#2e0c0c;
--field-border:color-mix(in srgb,var(--color-base-content) 18%,transparent);
--field-border-width:var(--border);
--brand-vivid:#ffad8c;
--brand-deep:#ffc2aa;
--brand-wash:#3a251b;
--tone-0:#7cc4f0; --tone-1:#5eead4; --tone-2:#a5b4fc;
--tone-3:#7dd3fc; --tone-4:#f9a8d4; --tone-5:#c4b5fd;
--shadow-1:0 1px 2px rgba(0,0,0,.5);
--shadow-2:0 2px 6px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.5);
--shadow-3:0 10px 24px -8px rgba(0,0,0,.7),0 4px 8px -6px rgba(0,0,0,.6);
--shadow-4:0 24px 48px -16px rgba(0,0,0,.75),0 8px 16px -10px rgba(0,0,0,.6);
--backdrop:rgba(0,0,0,.7);
}
}
/* 파생값 */
:root{
/* 본문색 파생 3단계. 라이트/다크 양쪽에서 AA(4.5:1) 를 넘도록 잡았고
위계는 색보다 굵기·크기로 준다. */
--bc-strong:color-mix(in srgb,var(--color-base-content) 88%,transparent);
--bc-mid:color-mix(in srgb,var(--color-base-content) 76%,transparent);
--bc-soft:color-mix(in srgb,var(--color-base-content) 66%,transparent);
/* 아래 둘은 테두리·배경 전용(텍스트 아님) */
--bc-20:color-mix(in srgb,var(--color-base-content) 18%,transparent);
--bc-10:color-mix(in srgb,var(--color-base-content) 9%,transparent);
--p-soft:color-mix(in srgb,var(--color-primary) 12%,var(--color-base-100));
--p-line:color-mix(in srgb,var(--color-primary) 32%,transparent);
--wrap:72rem;
--pad:1rem;
--nav-h:76px;
--tabs-h:48px;
--dock-h:62px;
/* 웹폰트를 받지 않는다. 기기에 있는 글꼴만 쓰므로 캐시와 무관하게 늘 같은 화면이다.
Pretendard 가 설치된 기기에서는 그대로 쓰이고, 없으면 OS 기본 한글 글꼴로 간다.
(Inter 는 웹폰트 이름이라 설치돼 있을 일이 없어 뺐고, 리눅스용 Noto Sans CJK KR 을 넣었다) */
--font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR","Nanum Gothic",
system-ui,Roboto,"Segoe UI",sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--ease:cubic-bezier(.2,0,.2,1);
--dur:.18s;
}
/* --- 03 기본 ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
margin:0;min-height:100vh;
background:var(--color-base-200);color:var(--color-base-content);
font-family:var(--font);font-size:14px;line-height:1.62;
letter-spacing:-.01em;
-webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
/* a{color:inherit} 는 두지 않는다 — 머리말 ⚠ 1) 참고.
daisyUI 의 리셋(@layer base)이 이미 해 준다. */
img,svg{max-width:100%;display:block}
code{font-family:var(--mono)}
.icon{flex:none;display:inline-block;vertical-align:-.15em}
/* hidden 은 컴포넌트의 display 규칙(.textarea{display:block} 등)에 밀리면 안 된다. */
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-field)}
:focus:not(:focus-visible){outline:none}
::selection{background:color-mix(in srgb,var(--color-primary) 24%,transparent)}
.skip-link{position:fixed;left:1rem;top:-4rem;z-index:200;transition:top var(--dur) var(--ease)}
.skip-link:focus{top:1rem}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.main-area{padding-block:1.75rem 4rem}
.admin-page .main-area{padding:0;max-width:none}
.hide-sm{display:inline-flex}
.show-sm{display:none}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.link{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.link-hover{text-decoration:none}
.link-hover:hover{text-decoration:underline}
/* --- 04 btn ------------------------------------------------- */
/* 단추는 모서리를 둥글리고 테두리를 얇게 둔다. 눌린 느낌은 그림자가 아니라
살짝 가라앉는 움직임으로 준다. */
/* 낱개 단추는 알약 모양으로 만들고 join 안의 단추는 daisyUI 결합 모서리를 지킨다. */
.btn{
height:2.375rem;min-height:2.375rem;padding-inline:.875rem;
font-size:13px;font-weight:700;letter-spacing:-.01em;
box-shadow:none;
}
.btn:not(.join-item){border-radius:.625rem}
.btn:active{transform:translateY(1px)}
.btn-sm{height:1.875rem;min-height:1.875rem;padding-inline:.625rem;font-size:12px;gap:.25rem}
.btn-lg{height:3rem;min-height:3rem;padding-inline:1.375rem;font-size:14.5px}
.btn-square{padding:0;width:2.375rem}
.btn-square.btn-sm{width:1.875rem}
.btn-circle{padding:0;width:2.375rem;border-radius:9999px}
.btn-circle.btn-sm{width:1.875rem}
/* 라이트/다크 2단 토글: 지금 테마의 아이콘만 보이고, 눌러서 반대로 바꾼다 */
.theme-ico{display:none;align-items:center;gap:.375rem;line-height:1}
html[data-theme-mode="light"] .theme-ico-light,
html[data-theme-mode="dark"] .theme-ico-dark{display:inline-flex}
/* JavaScript 가 꺼져 있을 때는 OS 설정으로 아이콘을 고른다 */
html:not([data-theme-mode]) .theme-ico-light{display:inline-flex}
@media (prefers-color-scheme: dark){
html:not([data-theme-mode]):not([data-theme="light"]) .theme-ico-light{display:none}
html:not([data-theme-mode]):not([data-theme="light"]) .theme-ico-dark{display:inline-flex}
}
.theme-toggle .icon{flex:none}
/* 관리자에게만 보이는 관리 콘솔 바로가기 */
.admin-link{color:var(--color-primary)}
.admin-link:hover{background:color-mix(in srgb,var(--color-primary) 12%,transparent)}
/* --- 05 머리글 · GNB · drawer · dock · dropdown · menu ------ */
/* 머리글은 두 줄이다.
윗줄 = 로고 + 크고 둥근 검색창 + 오른쪽 아이콘,
아랫줄 = 가로로 흐르는 카테고리 GNB. */
.site-header{
position:sticky;top:0;z-index:60;
background:color-mix(in srgb,var(--color-base-100) 94%,transparent);
backdrop-filter:blur(12px);border:0;
}
/* daisyUI 의 .navbar-start / .navbar-end 는 width:50% 다. 그대로 두면 둘이 폭을
다 먹어서 가운데 검색칸에 남는 자리가 0 이 된다. 폭을 내용만큼으로 되돌린다.
.navbar 의 기본 padding(.5rem)도 이 테마는 .wrap 이 맡으므로 지운다. */
/* padding 을 통째로 0 으로 두면 .wrap 의 좌우 여백까지 지워져서
로고 줄만 본문보다 --pad 만큼 왼쪽으로 튀어나온다.
daisyUI 가 넣는 위아래 여백만 지우고 좌우는 .wrap 에 맡긴다. */
.navbar{display:flex;align-items:center;gap:.75rem;min-height:var(--nav-h);padding-block:0;width:100%}
.navbar-start{display:flex;gap:.5rem;flex:1;width:auto}
.navbar-end{display:flex;gap:.125rem;flex:none;width:auto;margin-left:auto}
.brand{display:flex;align-items:center;gap:.5rem;flex:none}
/* 손으로 매듭지은 리본 같은 표식. 브랜드 자산이 아니라 형태만 빌렸다. */
.brand-logo{
display:grid;place-items:center;width:2.45rem;height:2.45rem;flex:none;
border-radius:50% 50% 50% 28%;
background:var(--color-primary);transform:rotate(-4deg);
color:#fff;
box-shadow:none;
}
.brand-logo-sm{width:1.75rem;height:1.75rem;border-radius:.625rem .625rem .625rem .2rem}
.brand-name{
font-size:19px;font-weight:800;letter-spacing:-.045em;
color:var(--color-base-content);
}
[data-theme="dark"] .brand-logo{color:var(--color-primary-content)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand-logo{color:var(--color-primary-content)}}
.drawer-button{display:none}
/* 검색은 머리글에서 돋보기 하나로 줄이고, 누르면 위에서 내려오는 창으로 연다.
서랍과 같은 체크박스 방식이라 JavaScript 없이도 열리고 닫힌다. */
.search-toggle{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.search-modal{
position:fixed;inset:0;z-index:130;
display:grid;place-items:start center;
visibility:hidden;opacity:0;
transition:opacity .18s var(--ease),visibility .18s;
}
.search-toggle:checked ~ .search-modal{visibility:visible;opacity:1}
.search-modal-overlay{position:absolute;inset:0;background:var(--backdrop);cursor:pointer}
.search-modal-panel{
position:relative;z-index:1;
width:min(38rem,92vw);margin-top:min(14vh,7rem);
padding:1.25rem 1.25rem 1.5rem;
border-radius:var(--radius-box);
background:var(--color-base-100);
box-shadow:var(--shadow-4);
transform:translateY(-.75rem);
transition:transform .18s var(--ease);
}
.search-toggle:checked ~ .search-modal .search-modal-panel{transform:none}
.search-modal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.875rem}
.search-modal-head strong{font-size:15px;font-weight:800;letter-spacing:-.02em}
.header-search{display:flex;align-items:center;gap:.5rem;width:100%}
.header-search .input{
flex:1;min-width:0;height:3rem;padding-inline:.75rem;
border-width:var(--field-border-width);border-radius:9999px;border-color:var(--field-border);
background:var(--color-base-200);
font-size:14.5px;
}
.header-search .input:focus-within{
background:var(--color-base-100);
border-color:var(--color-primary);
box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent);
}
.header-search .input > input{font-size:14.5px;font-weight:500}
.header-search .input-icon{color:var(--color-primary)}
.header-search-btn{height:3rem;min-height:3rem;padding-inline:1.375rem;border-radius:9999px;font-size:14px}
/* GNB: 카테고리 줄 */
.header-tabs{border-top:var(--border) dashed var(--bc-20);overflow:hidden}
.header-tabs .wrap{display:flex;align-items:center;gap:.75rem}
.gnb-all{
flex:none;display:inline-flex;align-items:center;gap:.375rem;
height:2rem;padding-inline:.75rem;
border:0;border-radius:9999px;
background:var(--brand-wash);color:var(--color-base-content);
font-size:12.5px;font-weight:700;cursor:pointer;
}
.gnb-all:hover{border-color:var(--color-primary);color:var(--color-primary)}
.tabs{align-items:center;gap:.125rem;height:var(--tabs-h);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
/* daisyUI 도 tabs-border 의 밑줄을 ::before 로 그린다.
색이 서로 달라 두 줄로 겹치므로 daisyUI 쪽을 끄고 아래 ::after 만 남긴다. */
.tabs-border > .tab::before{content:none}
.tab{
position:relative;display:inline-flex;align-items:center;flex:none;border:0;
height:var(--tabs-h);padding-inline:.875rem;
color:var(--bc-mid);font-size:14px;font-weight:600;white-space:nowrap;
transition:color var(--dur) var(--ease);
}
.tab:hover{color:var(--color-base-content)}
.tabs-border .tab.tab-active{color:var(--color-primary);font-weight:800}
.tabs-border .tab.tab-active::after{
content:"";position:absolute;left:.875rem;right:.875rem;bottom:5px;height:4px;
border-radius:9999px;background:var(--color-primary);
}
/* 새 소식 표시용 작은 점 */
/* 서랍 자체(고정·미끄러짐·덮개)는 daisyUI 가 한다.
daisyUI 의 .drawer-side 는 z-index 10 이라 이 테마의 머리글(60)·탭바(70)에
가린다. 층만 올리고, 안쪽 판의 크기와 색을 정한다. */
.drawer-side{z-index:120}
.drawer-side > .drawer-panel,.drawer-side > .admin-sidebar{
width:min(20.5rem,88vw);min-height:100dvh;
background:var(--color-base-100);
}
.drawer-panel{display:flex;flex-direction:column;gap:1rem;padding:1rem;border-right:var(--border) solid var(--bc-10)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.drawer-user{
display:flex;align-items:center;gap:.75rem;padding:.875rem;
border-radius:var(--radius-box);
background:linear-gradient(135deg,var(--brand-wash),var(--color-base-200));
}
.drawer-user strong{display:block;font-size:14px;font-weight:700}
.drawer-foot{display:grid;gap:.5rem;margin-top:auto;padding-top:1rem;border-top:var(--border) solid var(--bc-10)}
.drawer-foot form{width:100%}
.menu{flex-direction:column;gap:.125rem;padding:.25rem}
.menu li > a,.menu li > button,.menu li > form > button{
display:flex;align-items:center;gap:.625rem;width:100%;
min-height:2.75rem;padding:.5rem .75rem;
border:0;border-radius:var(--radius-field);
background:transparent;color:var(--color-base-content);
font-size:14px;font-weight:600;text-align:left;cursor:pointer;
transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.menu li > a:hover,.menu li > button:hover,.menu li > form > button:hover{background:var(--bc-10)}
.menu li > a.menu-active{background:var(--p-soft);color:var(--color-primary);font-weight:800}
/* 로그아웃처럼 form 안의 단추도 행 전체가 눌리게 한다. daisyUI 가 li 직계 자식(form)에
display:grid 를 먹여 버튼이 max-content 트랙에 갇히므로 flex 로 풀어야 width:100% 가 산다 */
.menu li > form{display:flex;width:100%;padding:0;margin:0}
.menu li > form > button{width:100%;text-align:left;cursor:pointer}
.menu-title{padding:.875rem .75rem .25rem;color:var(--bc-soft);font-size:11.5px;font-weight:800;letter-spacing:.04em}
.dropdown{display:inline-flex}
.dropdown-content{
position:absolute;top:calc(100% + .5rem);z-index:100;
min-width:11.5rem;
background:var(--color-base-100);
border:var(--border) solid var(--bc-10);
opacity:0;visibility:hidden;transform:translateY(-.25rem);
transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.dropdown-end .dropdown-content{right:0}
.dropdown:focus-within .dropdown-content,
.dropdown-content:hover{opacity:1;visibility:visible;transform:none}
.shadow-lg{box-shadow:var(--shadow-3)}
.user-menu{width:12.5rem}
.dock{
position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;height:var(--dock-h);
background:var(--color-base-100);
border-top:var(--border) solid var(--bc-10);
padding-bottom:env(safe-area-inset-bottom);
}
.dock > a,.dock > label,.dock > button{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1875rem;
height:var(--dock-h);border:0;background:none;color:var(--bc-soft);
font-size:10.5px;font-weight:700;cursor:pointer;
}
.dock > .dock-active{color:var(--color-primary)}
.dock-label{line-height:1}
/* 바닥글: 안내 문구를 넓게 깔고 링크는 작게 준다 */
.footer{
display:block;
margin-top:3.5rem;padding-block:2.25rem;
background:var(--color-base-100);border-top:var(--border) solid var(--bc-10);
}
.footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:1.75rem;flex-wrap:wrap}
.footer-brand{display:flex;align-items:flex-start;gap:.75rem;max-width:26rem}
.footer-brand strong{font-size:14.5px;font-weight:800}
.footer-brand p{margin-top:.25rem;color:var(--bc-mid);font-size:12.5px;line-height:1.6}
.footer-nav{display:flex;flex-wrap:wrap;gap:.625rem 1.5rem}
.footer-nav a{color:var(--bc-mid);font-size:12.5px;font-weight:600}
.footer-nav a:hover{color:var(--color-primary)}
.footer-note{
width:100%;margin-top:1.5rem;padding-top:1.25rem;
border-top:var(--border) solid var(--bc-10);
color:var(--bc-soft);font-size:11.5px;line-height:1.7;
}
/* --- 06 card · badge · avatar · alert · divider ------------- */
.card{
display:flex;flex-direction:column;
border-radius:var(--radius-box);
background:var(--color-base-100);
border:var(--border) solid var(--bc-10);
overflow:hidden;
}
.card:not(.post-card){border-color:transparent;box-shadow:var(--shadow-1)}
/* 카드를 세로로 쌓을 때의 사이 여백. 격자·캐러셀은 gap 으로 이미 사이를 두므로
여기서 또 얹으면 두 번째 카드부터 아래로 밀린다. */
.card + .card,.card + .article-actions,.card + .pager{margin-top:1.25rem}
.card-grid .card + .card,.carousel .card + .card{margin-top:0}
.card-body{padding:1.75rem}
/* 세로 flex 안에서 배지·칩은 기본값(stretch) 때문에 줄 전체로 늘어난다. */
.card-body > .badge,.card-body > .chip,.article-head > .badge{align-self:flex-start}
.card-body-flush{padding:0;gap:0}
.card-title{font-size:19px;font-weight:800;letter-spacing:-.03em}
.card-sub{color:var(--bc-mid);font-size:13.5px}
.card-actions{align-items:center;margin-top:.5rem}
.card-head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.375rem 1.75rem;border-bottom:var(--border) solid var(--bc-10)}
.card-head-row-flush{padding:0;border-bottom:0;align-items:flex-start}
.card-narrow{max-width:36rem}
/* 배지 색 변종(primary/ghost/soft/success/error, sm/xs)은 daisyUI 것을 쓴다.
여기서는 글꼴 무게와 em 표시만 손본다. */
.badge{font-weight:700;letter-spacing:0}
.badge em{font-style:normal;font-weight:700;opacity:.72}
/* daisyUI 의 ghost 배지는 base-200 이라 이 테마의 분류 줄(같은 base-200) 위에서
사라진다. 손으로 만든 테마와 같은 농도로 맞춘다. */
.badge-ghost{background-color:var(--bc-10);border-color:transparent;color:var(--bc-strong)}
.badge-row{display:flex;flex-wrap:wrap;gap:.25rem}
[data-tone="0"]{--tone:var(--tone-0)}
[data-tone="1"]{--tone:var(--tone-1)}
[data-tone="2"]{--tone:var(--tone-2)}
[data-tone="3"]{--tone:var(--tone-3)}
[data-tone="4"]{--tone:var(--tone-4)}
[data-tone="5"]{--tone:var(--tone-5)}
.avatar{flex:none}
.avatar-inner{
display:grid;place-items:center;width:2rem;height:2rem;
border-radius:9999px;background:var(--tone,var(--tone-0));color:#fff;
font-size:13px;font-weight:800;line-height:1;text-transform:uppercase;
}
.avatar-sm .avatar-inner{width:1.75rem;height:1.75rem;font-size:11.5px}
.avatar-xs .avatar-inner{width:1.25rem;height:1.25rem;font-size:10px}
[data-theme="dark"] .avatar-inner{color:#0d1620}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .avatar-inner{color:#0d1620}}
.btn.avatar{padding:0}
.btn.avatar .avatar-inner{width:1.875rem;height:1.875rem;font-size:12px}
/* 알림 상자도 daisyUI 것을 쓰고 여백과 무게만 맞춘다. */
.alert{margin-bottom:1rem;border-radius:var(--radius-box);font-size:13.5px;font-weight:600}
.alert:empty{display:none}
/* 관리자 저장 완료 메시지는 넓은 면적을 차지하므로 채도를 낮추고 글자 대비를 높인다. */
.admin-page .alert-success{background:#e8f5ed;color:#16643d;border-color:#b8dcc7;box-shadow:none}
[data-theme="dark"] .admin-page .alert-success{background:color-mix(in srgb,var(--color-success) 13%,var(--color-base-100));color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 32%,transparent)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .admin-page .alert-success{background:color-mix(in srgb,var(--color-success) 13%,var(--color-base-100));color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 32%,transparent)}
}
.divider{margin-block:1.25rem;color:var(--bc-soft);font-size:12px;font-weight:600}
.divider-flush{margin:0;gap:0}
/* kbd · status 는 daisyUI 것을 그대로 쓴다. */
/* --- 07 form: fieldset · input · select · toggle · checkbox - */
.fieldset{display:flex;flex-direction:column;margin-block:.625rem}
.fieldset-legend{
display:flex;align-items:center;justify-content:space-between;gap:.5rem;
padding:0;font-size:13.5px;font-weight:700;
}
.legend-hint{color:var(--bc-soft);font-size:12px;font-weight:500}
.fieldset-label{color:var(--bc-soft);font-size:12px;line-height:1.6}
.usage-help{margin-top:.5rem;font-size:12px;color:var(--bc-soft)}
.usage-help summary{cursor:pointer;width:fit-content;color:var(--bc-mid);text-decoration:underline;text-underline-offset:2px}
.usage-help summary:hover{color:var(--color-base-content)}
.usage-guide{display:grid;gap:.25rem;margin-top:.5rem;padding-left:0;list-style:none}
.usage-guide li{line-height:1.55}
.usage-guide strong{color:var(--bc-mid);font-weight:700}
.validator-hint{display:flex;visibility:visible;align-items:center;gap:.25rem;margin-top:.375rem;color:var(--color-error);font-size:12.5px;font-weight:700}
.auth-notice{align-items:flex-start;margin-bottom:1rem;text-align:left}
.auth-notice p{margin:.25rem 0 .625rem;font-size:13px;line-height:1.55}
.input,.textarea,.select{
display:flex;align-items:center;gap:.5rem;
width:100%;height:2.5rem;padding-inline:.625rem;
border:var(--field-border-width) solid var(--field-border);border-radius:.5rem;
background:var(--color-base-100);color:var(--color-base-content);
font-family:inherit;font-size:14px;
transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.input{position:relative}
.input:focus-within,.textarea:focus,.select:focus{
outline:none;border-color:var(--color-primary);
box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 18%,transparent);
}
.input > input{
flex:1;min-width:0;height:100%;
border:0;background:transparent;color:inherit;font:inherit;
}
.input > input:focus{outline:none}
input.input{padding-inline:.625rem}
.input-icon{display:grid;place-items:center;flex:none;color:var(--bc-soft)}
.input .kbd{flex:none}
/* Edge 등 일부 브라우저가 password 칸에 자체 눈 아이콘을 붙인다.
사이트의 보기 단추와 겹치지 않도록 브라우저 기본 단추는 숨긴다. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{display:none}
/* 비밀번호 보기 단추. 입력칸 안 오른쪽에 앉는다.
지금 상태(가림/보임)에 맞는 아이콘 하나만 보이고, 누르면 반대가 된다. */
.pw-toggle{
position:absolute;right:.375rem;top:50%;z-index:1;transform:translateY(-50%);
display:grid;place-items:center;
width:1.875rem;height:1.875rem;padding:0;
border:0;border-radius:9999px;
background:var(--color-base-100);color:var(--bc-soft);cursor:pointer;
transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.input > input:has(+ .pw-toggle){padding-right:2.25rem}
.pw-toggle:hover{background:var(--bc-10);color:var(--color-base-content)}
.pw-toggle[aria-pressed="true"]{color:var(--color-primary)}
.pw-ico{display:none;line-height:0}
.pw-toggle .pw-ico-show{display:block}
.pw-toggle[aria-pressed="true"] .pw-ico-show{display:none}
.pw-toggle[aria-pressed="true"] .pw-ico-hide{display:block}
.textarea{height:auto;min-height:7rem;padding:.625rem;line-height:1.7;resize:vertical;display:block}
.select{
appearance:none;padding-right:2.25rem;cursor:pointer;display:block;line-height:2.5rem;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 1.125rem) 55%,calc(100% - .8rem) 55%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.input-block,.textarea-block,.select-block{width:100%}
.input[readonly],input[readonly].input{background:var(--color-base-200);color:var(--bc-mid)}
.select:disabled{background:var(--color-base-200);color:var(--bc-soft);cursor:not-allowed}
::placeholder{color:var(--bc-soft)}
.is-invalid .input,.is-invalid .textarea,.is-invalid .select{border-color:var(--color-error)}
/* 브라우저 자동완성(아이디·비밀번호)은 안쪽 에만 제 색(연한 파랑)을 칠한다.
.input 은 자물쇠 아이콘과 눈 단추까지 감싼 상자라서, 안쪽만 칠해지면
상자가 두 색으로 갈라져 보인다. 배경은 상자 색으로 덮고 글자색만 살린다. */
.input > input:-webkit-autofill,
.input > input:-webkit-autofill:hover,
.input > input:-webkit-autofill:focus,
.input > input:-webkit-autofill:active,
input.input:-webkit-autofill,
input.input:-webkit-autofill:hover,
textarea.textarea:-webkit-autofill,
select.select:-webkit-autofill{
-webkit-text-fill-color:var(--color-base-content);
caret-color:var(--color-base-content);
-webkit-box-shadow:0 0 0 100px var(--color-base-100) inset;
box-shadow:0 0 0 100px var(--color-base-100) inset;
/* 크롬은 자기 배경색을 전이(transition)로 되돌린다. 사실상 오지 않게 미룬다. */
transition:background-color 600000s 0s;
}
/* 낱개 입력칸은 초점 테두리도 box-shadow 로 그린다.
위 규칙이 그것을 덮어 버리므로, 자동완성 + 초점일 때는 둘을 함께 얹는다. */
input.input:-webkit-autofill:focus,
textarea.textarea:-webkit-autofill:focus,
select.select:-webkit-autofill:focus{
-webkit-box-shadow:0 0 0 100px var(--color-base-100) inset,
0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent);
box-shadow:0 0 0 100px var(--color-base-100) inset,
0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent);
}
.label{display:flex;gap:.75rem;cursor:pointer}
.toggle-list{gap:.5rem}
.toggle-row{
padding:.875rem 1rem;
border:var(--border) solid var(--bc-10);border-radius:var(--radius-field);
background:var(--color-base-100);
transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.toggle-row:hover{border-color:var(--bc-20);background:var(--color-base-200)}
.toggle-row span strong{display:flex;align-items:center;gap:.375rem;font-size:13.5px;font-weight:700}
.toggle-row span small{display:block;margin-top:.1875rem;color:var(--bc-mid);font-size:12px}
/* 토글·체크박스는 daisyUI 것을 쓴다.
다만 --radius-selector 가 9999px 이라 체크박스까지 동그래지므로 각을 돌려준다. */
.checkbox{border-radius:.375rem}
.check-row{align-items:flex-start;font-size:13.5px}
.check-row.is-invalid .checkbox{border-color:var(--color-error)}
.consent{gap:.5rem;padding:1rem;border-radius:var(--radius-box);background:var(--color-base-200)}
.form-section{display:flex;flex-direction:column;margin-top:1.5rem;padding-top:1.25rem;border-top:var(--border) solid var(--bc-10)}
.form-section:first-of-type{margin-top:.5rem;padding-top:0;border-top:0}
.form-section-title{margin-bottom:.375rem;font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.form-actions{justify-content:flex-end;padding-top:1.25rem;margin-top:1.25rem;border-top:var(--border) solid var(--bc-10)}
.post-create-actions{border-top:0;padding-top:0}
.grid-2{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.danger-zone{
display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
margin:0 1.75rem 1.75rem;padding:1.125rem 1.375rem;
border:var(--border) solid color-mix(in srgb,var(--color-error) 32%,transparent);
border-radius:var(--radius-box);
background:color-mix(in srgb,var(--color-error) 8%,var(--color-base-100));
}
.danger-zone strong{display:flex;align-items:center;gap:.375rem;font-size:13.5px;font-weight:800}
.danger-zone p{margin-top:.1875rem;color:var(--bc-mid);font-size:12.5px}
.test-mail{margin-top:1rem}
/* --- 08 join · breadcrumbs · pager -------------------------- */
/* 표 한 줄의 단추 묶음. 붙이지 않고 사이를 띄운다.
(daisyUI 의 join 은 붙여 놓는 컴포넌트라 여기서는 쓰지 않는다. 쪽 번호에만 쓴다) */
.row-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:.375rem;flex-wrap:wrap}
.row-actions form{display:inline-flex}
/* 약관 관리 목록: 한 약관은 한 줄. 좁으면 표가 가로로 넘치되 줄은 안 접는다 */
.table.terms-table th,.table.terms-table td{white-space:nowrap;padding-inline:.625rem}
.terms-table .select{width:auto;min-width:9rem}
.terms-table input[type=number]{width:4.5rem}
.terms-table .row-actions{flex-wrap:nowrap}
/* 게시판 이름 배지가 두 줄로 접히지 않게 (여러 게시판이 섞이는 표에서만).
width:1% 로 칸을 줄이던 옛 요령은 table-layout:fixed 아래에서 그대로 1% 가 되어
내용이 제목 칸 위로 넘쳐 겹친다. 아래 미디어 쿼리에서 실제 너비를 준다. */
.posts-table .post-col-board{white-space:nowrap}
.posts-table .post-col-board .badge{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs{margin-bottom:1rem;padding-block:0;font-size:12.5px;overflow-x:auto;scrollbar-width:none}
.breadcrumbs::-webkit-scrollbar{display:none}
.breadcrumbs > ul{display:flex;align-items:center;gap:.25rem;white-space:nowrap}
.breadcrumbs li{display:flex;align-items:center;color:var(--bc-mid)}
/* 구분 기호(꺾쇠)는 daisyUI 가 그린다. */
.breadcrumbs a:hover{color:var(--color-primary)}
.breadcrumbs [aria-current]{color:var(--color-base-content);font-weight:700}
/* 페이지 이동은 동그란 낱개 단추로 표현한다 */
.pager{display:flex;justify-content:center;margin-top:2rem}
.pager .join{gap:.25rem}
.pager .join-item,.pager .join > .btn{
border-radius:9999px!important;margin-inline-start:0!important;
min-width:2rem;border-color:transparent;background:transparent;font-weight:700;
}
.pager .join-item:hover{background:var(--bc-10)}
.pager .join-item.btn-active{background:var(--color-primary);color:var(--color-primary-content);border-color:transparent}
.pager .join-item.btn-disabled{background:transparent}
/* --- 09 table · list · stats ------------------------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{border-collapse:collapse;font-size:13.5px}
.table thead th{
padding:.875rem 1.5rem;
border-bottom:var(--border) solid var(--bc-10);
background:var(--color-base-200);
color:var(--bc-mid);font-size:12px;font-weight:700;text-align:left;white-space:nowrap;
}
.table td{padding:1rem 1.5rem;border-bottom:var(--border) solid var(--bc-10);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table-zebra tbody tr:nth-child(even){background:color-mix(in srgb,var(--color-base-200) 55%,var(--color-base-100))}
.table tbody tr:hover{background:var(--brand-wash)}
.table .right{text-align:right;white-space:nowrap}
.cell-title{display:block;font-size:14px;font-weight:700}
.cell-sub{
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
margin-top:.125rem;color:var(--bc-soft);font-size:12px;
}
.cell-user{display:flex;align-items:center;gap:.625rem;min-width:0}
.table-empty td{padding:3.5rem 1.5rem;text-align:center;color:var(--bc-mid)}
.table-empty:hover{background:transparent}
.posts-table{width:100%;table-layout:fixed}
.post-title-line{display:flex;align-items:center;gap:.375rem;min-width:0}
.posts-table .post-col-title .cell-title{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.posts-table .post-col-category .badge{display:block;max-width:6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:641px){
.posts-table .post-col-board,.posts-table .post-col-category,.posts-table .post-col-author,
.posts-table .post-col-date,.posts-table .post-col-views{padding-inline:.75rem}
.posts-table .post-col-board{width:7rem;white-space:nowrap}
.posts-table .post-col-category{width:7rem;white-space:nowrap}
.posts-table .post-col-author{width:9rem;white-space:nowrap}
.posts-table .post-col-date{width:4.75rem;white-space:nowrap}
.posts-table .post-col-views{width:3.75rem;white-space:nowrap}
}
.list-row{
display:flex;align-items:center;gap:.75rem;
padding:1rem 1.5rem;
border-bottom:var(--border) solid var(--bc-10);
}
.list-row:last-child{border-bottom:0}
.list-icon{
display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:none;
border-radius:9999px;
background:color-mix(in srgb,var(--tone,var(--tone-0)) 14%,var(--color-base-100));
color:var(--tone,var(--tone-0));
}
.list-copy{flex:1;min-width:0}
.list-title{font-size:14px;font-weight:700}
.list-sub{color:var(--bc-soft);font-size:12px}
.fact-list{border:var(--border) solid var(--bc-10);border-radius:var(--radius-box);margin-block:.875rem}
.fact-list .list-row{padding:.875rem 1.125rem;justify-content:space-between}
.fact-list span{color:var(--bc-mid)}
.stats{display:flex;background:var(--color-base-100);border:var(--border) solid var(--bc-10);overflow:hidden}
.stats-vertical{flex-direction:column}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:1rem;background:transparent;border:0;margin-bottom:1.5rem}
.stat{display:grid;gap:.1875rem;padding:1.375rem;background:var(--color-base-100);position:relative}
.stats-grid > .stat{border:var(--border) solid var(--bc-10);border-radius:var(--radius-box)}
.stats-vertical > .stat + .stat{border-top:var(--border) solid var(--bc-10)}
a.stat{transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
a.stat:hover{border-color:var(--p-line);transform:translateY(-2px)}
.stat-figure{
position:absolute;right:1.25rem;top:1.2rem;
display:grid;place-items:center;width:2.5rem;height:2.5rem;
border-radius:9999px;
background:color-mix(in srgb,var(--tone,var(--color-primary)) 14%,var(--color-base-100));
color:var(--tone,var(--color-primary));
}
.stat-title{color:var(--bc-mid);font-size:12.5px;font-weight:700}
.stat-value{font-size:28px;letter-spacing:-.04em;line-height:1.2}
.stat-desc{display:flex;align-items:center;gap:.25rem;color:var(--bc-soft);font-size:12px}
a.stat .stat-desc{color:var(--color-primary);font-weight:700}
/* --- 10 홈: 배너 · 카테고리 원형 · 캐러셀 · 작품 카드 ------- */
/* 첫 화면의 큰 배너. 사진 대신 손그림 같은 그러데이션을 깐다. */
.hero{
display:block;
/* daisyUI 의 place-items:center 는 최신 브라우저에서 block 의 자식도 가운데로 모아
내용 폭으로 줄여 버린다. 좌우가 텅 비어 보이던 원인. */
place-items:normal;
position:relative;overflow:hidden;
margin-bottom:1.75rem;
border:0;
border-radius:28px!important;
background:linear-gradient(128deg,var(--brand-wash),#f6dfbd);
box-shadow:var(--shadow-2);
}
[data-theme="dark"] .hero{background:linear-gradient(128deg,var(--brand-wash),#2b2821)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero{background:linear-gradient(128deg,var(--brand-wash),#2b2821)}}
.hero::after{
/* 종이에 눌러 찍은 듯한 테두리 */
content:"";position:absolute;inset:8px;pointer-events:none;
border-radius:inherit;border:var(--border) dashed color-mix(in srgb,var(--color-primary) 35%,transparent);
}
.hero-content{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;flex-wrap:wrap;min-height:320px;padding:3rem 3.2rem}
.hero-copy{flex:1 1 22rem;max-width:36rem;min-width:0}
/* 히어로 오른쪽의 사실 네 줄. 숫자 카드 대신 '무엇인지' 를 말한다 */
.hero-facts{flex:1 1 20rem;max-width:25rem;display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.hero-facts li{display:flex;align-items:flex-start;gap:.625rem;padding:.85rem 1rem;border:0;border-radius:18px;
background:color-mix(in srgb,var(--color-base-100) 82%,transparent);box-shadow:var(--shadow-1);backdrop-filter:blur(4px)}
.hero-facts .icon{flex:none;margin-top:.125rem;color:var(--color-primary)}
.hero-facts strong{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.hero-facts span{display:block;margin-top:.125rem;font-size:12px;line-height:1.5;color:var(--bc-mid)}
.hero-copy > .badge{
background:var(--color-base-100);color:var(--color-primary);
border-color:var(--p-line);box-shadow:var(--shadow-1);
}
.hero-copy h1{margin-top:.75rem;font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.04em;line-height:1.28;word-break:keep-all}
.hero-copy > p{margin-top:.625rem;color:var(--bc-strong);font-size:14.5px;line-height:1.7;word-break:keep-all}
.hero-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.hero .stats{flex:none;min-width:12rem;background:color-mix(in srgb,var(--color-base-100) 80%,transparent);backdrop-filter:blur(4px)}
/* 홈의 중심이 되는 카테고리 원형 줄 */
.shortcuts{display:flex;gap:1rem;margin:1rem 0 3rem;overflow-x:auto;scrollbar-width:none;padding-block:.25rem}
.shortcuts::-webkit-scrollbar{display:none}
.shortcut{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:none;width:6.3rem}
.shortcut-icon{
display:grid;place-items:center;width:4.3rem;height:4.3rem;
border:0;border-radius:42% 58% 52% 48%;
background:color-mix(in srgb,var(--tone,var(--color-primary)) 13%,var(--color-base-100));
color:var(--tone,var(--color-primary));
border:var(--border) solid color-mix(in srgb,var(--tone,var(--color-primary)) 18%,transparent);
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.shortcut:nth-child(even) .shortcut-icon{border-radius:58% 42% 46% 54%}
.shortcut:hover .shortcut-icon{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.shortcut-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bc-strong);font-size:12.5px;font-weight:700;text-align:center}
.feed{margin-top:3.5rem}
.feed-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.feed-head h2{font-size:21px;font-weight:800;letter-spacing:-.035em}
.feed-head h2::after{content:"";display:inline-block;width:8px;height:8px;margin-left:7px;border-radius:50%;background:var(--brand-vivid)}
.feed-sub{margin-top:.25rem;color:var(--bc-mid);font-size:13px}
.feed-head .btn{border-color:transparent;background:transparent;color:var(--bc-mid)}
.feed-head .btn:hover{color:var(--color-primary);background:transparent}
.carousel{display:flex;gap:1.4rem;overflow-x:auto;padding-bottom:.25rem}
.carousel::-webkit-scrollbar{display:none}
.carousel-item{flex:none;width:15.5rem;scroll-snap-align:start;display:flex}
.carousel-item > .card{width:100%}
.card-grid{display:grid;gap:2.2rem 1.35rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
/* 작품 카드: 테두리 없이 사진과 글만 배치한다. */
.post-card{
background:transparent;border:0;border-radius:0;overflow:visible;
}
.post-card .post-cover{
border-radius:24px 24px 12px 24px;
aspect-ratio:1/1;
box-shadow:var(--shadow-2);
}
.post-card:nth-child(even) .post-cover{border-radius:24px 12px 24px 24px}
.post-card .card-body{padding:.75rem .125rem 0;gap:.3125rem}
.post-card .card-title{
font-size:14.5px;font-weight:600;line-height:1.45;letter-spacing:-.02em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-card:hover .card-title{color:var(--color-primary)}
.post-card .post-cover-img{transition:transform .3s var(--ease)}
.post-card:hover .post-cover-img{transform:scale(1.04)}
.post-cover{
position:relative;display:block;aspect-ratio:16/10;overflow:hidden;margin:0;
container-type:inline-size;
background:
radial-gradient(120% 90% at 82% 12%,color-mix(in srgb,var(--tone,var(--tone-0)) 30%,transparent),transparent 62%),
color-mix(in srgb,var(--tone,var(--tone-0)) 11%,var(--color-base-200));
}
.post-cover-img{width:100%;height:100%;object-fit:cover;display:block}
/* 사진이 없는 글의 커버. 제목 첫 글자를 가운데 도장처럼 찍는다. */
.post-cover-mark{
position:absolute;inset:0;display:grid;place-items:center;
color:color-mix(in srgb,var(--tone,var(--tone-0)) 46%,transparent);
font-size:clamp(1.75rem,14cqw,3rem);font-weight:800;line-height:1;letter-spacing:-.04em;
}
.post-cover-badge{
position:absolute;left:.625rem;top:.625rem;max-width:calc(100% - 1.25rem);
background:color-mix(in srgb,var(--color-base-100) 92%,transparent);
color:var(--color-base-content);
backdrop-filter:blur(3px);
box-shadow:var(--shadow-1);overflow:hidden;text-overflow:ellipsis;
}
.post-cover-lock{
position:absolute;right:.625rem;top:.625rem;
display:grid;place-items:center;width:1.625rem;height:1.625rem;
border-radius:9999px;background:var(--color-base-100);color:var(--bc-mid);box-shadow:var(--shadow-1);
}
.post-meta{display:flex;align-items:center;gap:.375rem;color:var(--bc-mid);font-size:12px}
.post-author,.post-list-author{max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--bc-strong)}
.post-list-author{display:block}
.post-stats{display:flex;align-items:center;gap:.75rem;color:var(--bc-soft);font-size:12px;font-weight:600}
.post-stats span{display:inline-flex;align-items:center;gap:.25rem}
/* 인기 글 순위: 왼쪽에 큰 숫자를 세운다 */
.rank-list{counter-reset:rank}
.rank-list .list-row{gap:1rem;padding:.875rem 1.25rem}
.rank-list .list-row::before{
counter-increment:rank;content:counter(rank);
flex:none;width:1.75rem;text-align:center;
color:var(--bc-soft);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;
}
.rank-list .list-row:nth-child(-n+3)::before{color:var(--color-primary)}
.rank-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600}
.rank-title:hover{color:var(--color-primary)}
.rank-meta{flex:none;color:var(--bc-soft);font-size:11.5px}
/* 분류 칩 줄은 알약 모양 필터로 표현한다. */
.subnav{
position:sticky;top:calc(var(--nav-h) + var(--tabs-h));z-index:50;
background:color-mix(in srgb,var(--color-base-200) 88%,transparent);
backdrop-filter:blur(8px);
border-bottom:var(--border) solid var(--bc-10);
}
.subnav-inner{display:flex;align-items:center;gap:.75rem;min-height:3.5rem}
/* 가로 스크롤 상자라 안쪽 여백이 없으면 첫·끝 칩의 테두리와 포커스 링(2px+offset 2px)이 잘린다.
여백만큼 음수 마진으로 당겨 다른 칸들과 왼쪽 정렬을 지킨다. */
.chip-bar{display:flex;gap:.4375rem;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:.625rem .25rem;margin-inline:-.25rem;scroll-padding-inline:.25rem}
.chip-bar::-webkit-scrollbar{display:none}
.chip{flex:none;border-radius:9999px;background:var(--color-base-100);font-weight:600}
.chip.btn-active{background:var(--color-primary);color:var(--color-primary-content);border-color:transparent;font-weight:800}
.chip-radio{position:relative;gap:0;padding-inline:0;border-radius:9999px}
/* 0x0 으로 숨기면 브라우저가 "필수" 말풍선을 띄울 자리를 못 찾아 제출만 조용히 막힌다.
칩 전체를 덮는 실제 상자로 두고 투명하게만 만든다. */
.chip-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip-radio span{display:inline-flex;align-items:center;height:100%;padding-inline:1rem;border-radius:9999px}
.chip-radio:has(input:checked){background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-content)}
.chip-radio:has(input:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}
.inline-search{display:flex;gap:.5rem;margin-bottom:1rem;max-width:20rem}
.inline-search .input{flex:1;min-width:0;height:2.375rem;padding-inline:.625rem;border-radius:9999px;background:var(--color-base-100);font-size:13px}
.inline-search .input > input{font-size:13px}
.inline-search .btn{height:2.375rem;min-height:2.375rem;padding-inline:1rem;border-radius:9999px;font-size:13px}
.filter-note{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;color:var(--bc-mid);font-size:13.5px}
.filter-note .link{margin-left:auto}
.notice-list{margin-bottom:1.25rem}
.notice-list .list-row{padding:.875rem 1.375rem}
.notice-ico{display:grid;place-items:center;flex:none;color:var(--color-primary)}
.notice-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:700}
.notice-title:hover{color:var(--color-primary)}
.notice-date{flex:none;color:var(--bc-soft);font-size:12px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.page-head h1{font-size:25px;font-weight:800;letter-spacing:-.04em}
.page-sub{margin-top:.4375rem;color:var(--bc-mid);font-size:13.5px}
.page-head-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.page-head-actions-end{justify-content:flex-end;margin-left:auto}
.page-note{margin-top:1rem;color:var(--bc-soft);font-size:12.5px}
.section-title{display:flex;align-items:center;gap:.5rem;font-size:16px;font-weight:800;letter-spacing:-.02em}
/* 분류 입력: 칩으로 추가·삭제한다. JS 가 꺼져 있으면 textarea 로 떨어진다. */
.tag-input{display:grid;gap:.5rem}
.tag-input-list{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2rem}
.tag-input-empty{margin:0;color:var(--bc-soft);font-size:12.5px}
.tag-chip{
display:inline-flex;align-items:center;gap:.3125rem;
height:1.875rem;padding:0 .375rem 0 .875rem;
border:var(--border) solid var(--bc-20);border-radius:9999px;
background:var(--color-base-100);font-size:13px;font-weight:700;
}
.tag-chip-remove{
display:grid;place-items:center;width:1.125rem;height:1.125rem;padding:0;
border:0;border-radius:9999px;background:var(--bc-10);color:var(--bc-soft);
font:700 13px/1 inherit;cursor:pointer;
}
.tag-chip-remove:hover{background:var(--color-error);color:var(--color-error-content)}
.tag-input-add{display:flex;gap:.375rem}
.tag-input-add .input{flex:1;min-width:0;height:2.5rem;padding-inline:.625rem;font-size:13px}
/* 내용 화면의 '이 내용 수정' 톱니. 관리자에게만 나오고 카드 오른쪽 위에 앉는다.
제목이 길어도 겹치지 않게 머리 오른쪽 여백을 그만큼 비워 둔다. */
.article-page{position:relative;box-shadow:var(--shadow-2)}
.page-edit{position:absolute;top:1.25rem;right:1.25rem;z-index:1;background:var(--color-base-100)}
/* 미리보기 중이고 아직 공개 전인 초안일 때만. 공개된 화면과 구분되게 색만 바꾼다. */
.page-edit-draft{border-color:var(--color-warning);color:var(--color-warning)}
.article-page .article-head{padding-right:4.25rem}
/* 목록 형태 전환 (목록 / 갤러리 / 매거진 / 뉴스형) */
.view-switch{display:flex;gap:.375rem;margin-bottom:1.25rem;overflow-x:auto;scrollbar-width:none}
.view-switch::-webkit-scrollbar{display:none}
.view-switch .btn{flex:none;gap:.3125rem;border-radius:9999px;background:var(--color-base-100)}
.view-switch .btn-active{background:var(--color-primary);color:var(--color-primary-content);border-color:transparent}
/* 매거진형·뉴스형이 함께 쓰는 가로 행 */
.post-rows .list-row{align-items:flex-start;gap:1.125rem;padding:1.25rem 1.5rem}
.post-rows .list-row:hover{background:var(--color-base-200)}
.post-row-thumb{
flex:none;display:block;width:11rem;
border-radius:var(--radius-field);overflow:hidden;
}
.post-row-thumb .post-cover{aspect-ratio:4/3}
.post-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.375rem}
.post-row-head{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
.post-row-title{
font-size:16px;font-weight:700;letter-spacing:-.025em;line-height:1.45;
color:var(--color-base-content);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-row-title:hover{color:var(--color-primary)}
.comment-count{flex:none;vertical-align:.05em;white-space:nowrap}
.post-row-excerpt{
color:var(--bc-mid);font-size:13.5px;line-height:1.65;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-rows .post-stats{margin-top:.125rem}
.post-rows-text .list-row{padding:1.375rem 1.5rem}
.post-rows-text .post-row-title{-webkit-line-clamp:3}
.post-row-lock,.post-row-clip{display:inline-grid;place-items:center;flex:none;color:var(--bc-mid);vertical-align:-.1em}
.post-row-lock .icon,.post-row-clip .icon{stroke-width:2.2}
/* 홈 피드: 게시판 목록 형태에 따라 카드/줄 중 하나로 나온다 */
.feed-rows{margin-top:0}
.feed-rows .list-row{padding:1rem 1.25rem}
.feed-rows .post-row-thumb{width:8.5rem;border-radius:var(--radius-field)}
.feed-rows .post-row-title{font-size:15px;-webkit-line-clamp:2}
.feed-lines .list-row{
display:flex;align-items:center;gap:.5rem;
padding:.75rem 1.25rem;font-size:13.5px;
}
.feed-lines .badge{flex:none;white-space:nowrap}
.feed-line-title{
flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-weight:600;
}
.feed-line-title:hover{color:var(--color-primary)}
.feed-line-date{flex:none;margin-left:auto;color:var(--bc-soft);font-size:12px}
.feed-line-lock{display:inline-grid;place-items:center;flex:none;color:var(--bc-soft)}
/* --- 11 글 상세 · prose · chat 댓글 ------------------------- */
.read-progress{
position:fixed;left:0;top:0;z-index:80;width:100%;height:3px;
background:linear-gradient(90deg,var(--brand-vivid),var(--color-primary));
transform:scaleX(0);transform-origin:0 50%;display:none;
}
@supports (animation-timeline: scroll()){
.read-progress{display:block;animation:readbar linear forwards;animation-timeline:scroll(root block)}
@keyframes readbar{to{transform:scaleX(1)}}
}
.article-head{padding:2rem 2.25rem .5rem}
.article-title{margin-top:.625rem;font-size:clamp(21px,3.2vw,30px);font-weight:800;letter-spacing:-.04em;line-height:1.34;display:block;overflow-wrap:anywhere}
.article-summary{margin-top:.625rem;color:var(--bc-mid);font-size:14.5px}
.article-footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding:0 2.25rem 1.75rem}
.article-byline{display:grid;gap:.1875rem;min-width:0;margin-top:.875rem;text-align:left}
.article-byline strong{font-size:13.5px;font-weight:800}
.article-actions-inline{display:flex;align-items:center;gap:.375rem;margin-left:auto;flex:none}
.article-actions-inline .btn{background:var(--color-base-100)}
/* 삭제는 저장 옆에 두되, 실수로 누르지 않게 사이를 벌린다 */
.btn-delete{margin-left:.75rem}
.article-body{padding:1rem 2.25rem 2.25rem;font-size:16px;line-height:1.88}
.article-copy-row{display:flex;align-items:center;justify-content:flex-end;gap:.375rem;margin-top:1rem}
.article-copy-feedback{color:var(--bc-mid);font-size:12px;font-weight:700}
.article-copy-btn{color:var(--bc-mid)}
.article-copy-btn:hover{color:var(--color-primary)}
/* 읽기 좋은 줄 길이는 지키되, 제목·머리와 왼쪽 끝을 맞춘다 */
.article-page .article-body{max-width:46rem;margin-inline:0;width:100%}
.article-files{padding:1.375rem 2.25rem}
.article-writer-meta{
display:flex;align-items:center;gap:.625rem;flex-wrap:wrap;
color:var(--bc-mid);font-size:12px;
}
.stat-inline{display:inline-flex;align-items:center;gap:.25rem}
.stat-inline-link{color:var(--color-primary);font-weight:700}
.stat-inline-link:hover{text-decoration:underline}
.article-actions{display:flex;justify-content:center;margin-top:1.75rem}
.file-list{border:var(--border) solid var(--bc-10);border-radius:var(--radius-box)}
.file-list .list-row{padding:.875rem 1.125rem}
.file-ico{display:grid;place-items:center;flex:none;color:var(--bc-soft)}
.file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.file-size{flex:none;color:var(--bc-soft);font-size:12px}
.prose{overflow-wrap:anywhere}
.prose > * + *{margin-top:1.1em}
.prose h1,.prose h2,.prose h3{margin-top:1.9em;font-weight:800;letter-spacing:-.03em;line-height:1.4}
.prose h1{font-size:1.45em}
.prose h2{font-size:1.25em}
.prose h3{font-size:1.1em}
.prose ul,.prose ol{padding-left:1.35em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.35em}
.prose a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{
padding:.4em 0 .4em 1.2em;
border-left:3px solid var(--color-primary);
color:var(--bc-strong);
}
.prose pre{padding:1rem;border-radius:var(--radius-field);background:var(--color-base-200);font-size:13px;overflow-x:auto}
.prose code{padding:.125rem .3125rem;border-radius:.3rem;background:var(--color-base-200);font-size:.9em}
.prose pre code{padding:0;background:none}
.prose img{border-radius:var(--radius-box);margin-inline:0}
.prose a.zoom{display:inline-block;max-width:100%;cursor:zoom-in}
.prose a.zoom img{display:block;max-width:100%;height:auto}
/* 원본 사진 덮개 */
.lens{
position:fixed;inset:0;z-index:120;
display:flex;align-items:center;justify-content:center;padding:1.5rem;
background:rgba(9,14,20,.86);
}
.lens[hidden]{display:none}
.lens-img{max-width:100%;max-height:100%;border-radius:var(--radius-box);object-fit:contain}
.lens-close{
position:absolute;top:.75rem;right:.75rem;
display:grid;place-items:center;width:2.75rem;height:2.75rem;
border:0;border-radius:9999px;
background:rgba(255,255,255,.16);color:#fff;
font-size:26px;line-height:1;cursor:pointer;
}
.lens-close:hover{background:rgba(255,255,255,.28)}
.rich-content{white-space:normal}
.rich-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:13.5px}
.rich-content th,.rich-content td{padding:.5rem .75rem;border:var(--border) solid var(--bc-20)}
.rich-content iframe{max-width:100%;border-radius:var(--radius-box)}
.comment-thread{display:flex;flex-direction:column;gap:.25rem}
.comment-thread-sub{margin:.75rem 0 0 2.5rem;padding-left:1rem;border-left:2px solid var(--bc-10)}
/* 답글은 깊이 제한이 없다. 세 단계까지만 들여쓰고 그 아래로는 선만 이어 붙인다. */
.comment-thread-sub .comment-thread-sub .comment-thread-sub{margin-left:0}
.comment-edit-to{border-left-color:var(--color-warning)}
.comment-form.is-editing,.comment-form.is-reply{
padding:1.125rem;
border-left-width:3px;border-left-style:solid;
border-radius:0 var(--radius-box) var(--radius-box) 0;
}
.comment-form.is-editing{
margin-left:0;
border-left-color:var(--color-warning);
background:color-mix(in oklch,var(--color-warning) 7%,transparent);
}
.comment-form.is-reply{
margin-left:1.75rem;
border-left-color:var(--color-primary);
background:color-mix(in oklch,var(--color-primary) 6%,transparent);
}
@media (max-width: 640px){
.comment-form.is-reply{margin-left:.75rem}
.comment-form.is-editing,.comment-form.is-reply{padding:.875rem}
.comment-thread-sub{margin-left:1rem;padding-left:.75rem}
.comment-thread-sub .comment-thread-sub{margin-left:0}
}
/* 말풍선 격자는 daisyUI 가 잡는다(.chat-start = auto 1fr). 여백만 손본다. */
.chat{padding-block:.625rem}
.chat-image{align-self:start}
.chat-header{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:13px;font-weight:800;margin-bottom:.3125rem}
.chat-header time{color:var(--bc-soft);font-size:11.5px;font-weight:500}
.chat-lock{display:grid;place-items:center;flex:0 0 auto;margin-top:.2em;color:var(--bc-soft)}
.chat-bubble{
width:fit-content;max-width:100%;
padding:.75rem 1rem;
border-radius:var(--radius-box);
background:var(--color-base-200);color:var(--color-base-content);
font-size:14px;line-height:1.72;overflow-wrap:anywhere;
}
.chat-bubble-secret{display:flex;align-items:flex-start;gap:.5rem}
.chat-bubble-content{min-width:0}
.comment-secret-unlock{display:inline-block;margin-left:.5rem;color:var(--color-primary);font-weight:800;text-decoration:underline;text-underline-offset:.18em}
.comment-owner-modal{position:fixed;inset:0;width:min(92vw,28rem);max-height:calc(100dvh - 2rem);margin:auto;padding:0;overflow:auto;border:0;border-radius:var(--radius-box);background:var(--color-base-100);color:var(--color-base-content);box-shadow:0 1.5rem 4rem rgba(27,22,18,.24)}
.comment-owner-modal::backdrop{background:rgba(23,19,16,.52);backdrop-filter:blur(2px)}
.comment-owner-box{position:relative;display:flex;flex-direction:column;gap:1rem;padding:2rem}
.comment-owner-box .auth-mark{align-self:center}
.comment-owner-box h2{margin:0;text-align:center;font-size:1.35rem;font-weight:900}
.comment-owner-box>p{margin:0;text-align:center;color:var(--bc-soft);line-height:1.65}
.comment-owner-close{position:absolute;top:.75rem;right:.75rem;font-size:1.35rem}
.chat-start .chat-bubble{border-start-start-radius:.25rem}
/* 댓글 안 사진도 본문 사진처럼 모서리를 둥글린다. 말풍선 안이라 한 단계 작게 */
.chat-bubble img{display:block;max-width:100%;height:auto;border-radius:var(--radius-field)}
@media (max-width: 480px){
.chat-image .avatar-inner{width:1.625rem;height:1.625rem;font-size:11px}
}
.chat-removed .chat-header,.chat-removed .chat-bubble{color:var(--bc-soft)}
.chat-footer{margin-top:.3125rem}
.chat-footer .btn{padding-inline:.4375rem;color:var(--bc-soft)}
.chat-footer .btn:hover{color:var(--color-primary)}
.post-filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.125rem}
.post-filter .select{width:auto;min-width:9.5rem}
.post-filter .input{flex:1;min-width:12rem}
/* 댓글 쓰기 */
.comment-form{
display:flex;flex-direction:column;gap:.625rem;
margin-top:1.5rem;padding-top:1.5rem;
}
.comment-form .fieldset{margin-block:0}
.comment-reply-to{
display:flex;align-items:center;gap:.5rem;
padding:.5rem .875rem;border-radius:9999px;
background:var(--color-base-200);color:var(--bc-mid);font-size:13px;
}
.comment-reply-to span[data-reply-name]{font-weight:800;color:var(--color-base-content)}
.comment-reply-to .btn{margin-left:auto}
.comment-form-foot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.25rem}
.comment-secret{flex:1;min-width:12rem}
.comment-secret-control{align-items:center;padding:.5rem 0;background:transparent}
.comment-secret-control span strong{display:flex;align-items:center;gap:.375rem;font-size:13.5px;font-weight:700}
.comment-form-foot .btn[data-submit]{margin-left:auto}
.comment-denied{
margin-top:1.5rem;padding-top:1.5rem;
color:var(--bc-mid);font-size:13.5px;
}
/* --- 12 빈 화면 · 상태 · 인증 ------------------------------ */
.empty-card .card-body,.empty-inline{align-items:center;text-align:center;gap:.375rem;padding-block:3.5rem}
.empty-card-sm .card-body,.empty-inline{padding-block:2.25rem}
.empty-inline{display:flex;flex-direction:column}
.empty-icon{
display:grid;place-items:center;width:3.75rem;height:3.75rem;margin-bottom:.625rem;
border-radius:9999px;background:var(--brand-wash);color:var(--color-primary);
}
.empty-card .card-title{justify-content:center;font-size:17px}
.empty-card p,.empty-inline p{color:var(--bc-mid)}
.empty-card .card-actions,.empty-inline .btn{justify-content:center;margin-top:.875rem}
.status-card{max-width:32rem;margin:3rem auto;box-shadow:var(--shadow-2)}
.status-card .card-body{align-items:center;text-align:center;padding:2.75rem 1.75rem}
.status-card .card-title{font-size:22px;justify-content:center}
.status-card p{color:var(--bc-mid);font-size:14.5px}
.status-note{color:var(--bc-soft);font-size:12.5px}
.status-icon{display:grid;place-items:center;width:3.75rem;height:3.75rem;margin-bottom:.875rem;border-radius:9999px}
.status-icon-error{background:color-mix(in srgb,var(--color-error) 13%,var(--color-base-100));color:var(--color-error)}
.status-icon-success{background:color-mix(in srgb,var(--color-success) 13%,var(--color-base-100));color:var(--color-success)}
.status-list{width:100%;margin-top:1rem;border:var(--border) solid var(--bc-10);border-radius:var(--radius-box);text-align:left}
.status-list .list-row{padding:.75rem 1.125rem}
.status-list strong{flex:none;color:var(--bc-mid);font-weight:700}
.auth-wrap{display:flex;justify-content:center;padding-block:2rem 3rem}
.auth-card{width:100%;max-width:26.5rem;box-shadow:var(--shadow-2)}
.auth-card .card-body{padding:2.25rem 1.875rem}
.secret-password-card .card-body{align-items:center;text-align:center}
.secret-password-card form{width:100%;text-align:left}
.secret-password-card .form-actions{justify-content:center}
.auth-head{text-align:center;margin-bottom:1rem}
.auth-head .card-title,.auth-card-status .card-title{justify-content:center;font-size:21px}
.auth-card-status .card-body{align-items:center;text-align:center}
.auth-mark{
display:grid;place-items:center;width:3.5rem;height:3.5rem;margin:0 auto .875rem;
border-radius:1.125rem 1.125rem 1.125rem .375rem;
background:linear-gradient(140deg,var(--brand-vivid),var(--color-primary) 72%);
color:#fff;
box-shadow:0 6px 18px -8px color-mix(in srgb,var(--color-primary) 70%,transparent);
}
.auth-mark-soft{background:var(--brand-wash);color:var(--color-primary);box-shadow:none}
.auth-mark-ok{background:color-mix(in srgb,var(--color-success) 14%,var(--color-base-100));color:var(--color-success);box-shadow:none}
/* 카드 맨 아래 안내 줄. 회원가입과 비밀번호 찾기를 가는 선으로 나눠 나란히 둔다. */
.auth-switch{
display:flex;align-items:center;justify-content:center;gap:.625rem;flex-wrap:wrap;
margin-top:1.375rem;color:var(--bc-mid);font-size:13.5px;
}
.auth-switch-sep{width:var(--border);height:11px;background:var(--bc-20);flex:none}
/* 이 줄의 링크는 밑줄 없이 색과 굵기로만 구분하고, 가리켰을 때만 밑줄을 켠다.
(회원가입만 밑줄이 있어 두 링크가 달라 보이던 것을 맞춘 것) */
.auth-switch .link{text-decoration:none}
.auth-switch .link:hover{text-decoration:underline}
.social-list{display:grid;gap:.5rem}
.account-email{margin:0;padding:.5rem 0;font-size:14.5px;color:var(--bc-mid)}
.social-consent{margin-top:.75rem;text-align:center;font-size:12px;line-height:1.6;color:var(--bc-mid)}
.social-consent .link{color:inherit;text-decoration:underline;text-underline-offset:2px}
.social-mark{display:grid;place-items:center;width:1.375rem;height:1.375rem;flex:none;border-radius:.4rem;background:var(--bc-10);font-size:11.5px;font-weight:800}
.social-google .social-mark{background:#fff;border:var(--border) solid var(--bc-20);color:#4285f4}
.social-naver .social-mark{background:#03c75a;color:#fff}
.social-kakao .social-mark{background:#fee500;color:#3c1e1e}
.social-btn{height:2.875rem;min-height:2.875rem;justify-content:center;gap:.625rem;border-radius:.75rem}
.fab{
position:fixed;right:1.5rem;bottom:1.5rem;z-index:65;
width:3.625rem;height:3.625rem;
box-shadow:0 10px 24px -8px color-mix(in srgb,var(--color-primary) 80%,transparent),var(--shadow-3);
}
.to-top{
position:fixed;right:1.5rem;bottom:5.75rem;z-index:64;
width:2.75rem;height:2.75rem;min-height:2.75rem;
background:var(--color-base-100);border-color:var(--bc-20);
box-shadow:var(--shadow-2);
}
.to-top[hidden]{display:none}
/* 머리글 알림 종 */
.bell-link{position:relative}
.bell-dot{
position:absolute;top:.1875rem;right:.1875rem;
display:grid;place-items:center;
min-width:1.0625rem;height:1.0625rem;padding-inline:.25rem;
border-radius:9999px;background:var(--brand-vivid);color:#fff;
font-size:9.5px;font-weight:800;line-height:1;
border:2px solid var(--color-base-100);
}
/* 알림함 */
.notice-row{padding:0}
.notice-link{display:flex;align-items:flex-start;gap:.875rem;width:100%;padding:1.125rem 1.375rem;color:inherit}
.notice-link:hover{background:var(--color-base-200)}
.notice-link .notice-ico{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:9999px;background:var(--color-base-200);color:var(--bc-mid)}
.notice-body{display:grid;gap:.25rem;flex:1;min-width:0}
.notice-text{font-size:13.5px;color:var(--bc-mid)}
.notice-text strong{color:var(--color-base-content);font-weight:800}
.notice-subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--bc-soft)}
.notice-time{flex:none;color:var(--bc-soft);font-size:11.5px;white-space:nowrap}
.notice-row.is-unread .notice-link{background:color-mix(in oklch,var(--color-primary) 7%,transparent)}
.notice-row.is-unread .notice-ico{background:var(--color-primary);color:var(--color-primary-content)}
.notice-row.is-unread .notice-text{color:var(--color-base-content)}
/* --- 13 관리 콘솔 (daisyUI drawer + menu) ------------------- */
/* 공방 관리 화면처럼 공개 화면과 같은 팔레트를 쓰되
왼쪽 메뉴를 항상 펼쳐 두고 본문은 넓게 왼쪽에 붙인다. */
.admin-page{background:var(--color-base-200)}
.admin-shell{min-height:100vh}
.admin-sidebar,.drawer-side > .admin-sidebar{
display:flex;flex-direction:column;gap:.75rem;
width:16.5rem;padding:1.125rem .875rem;
background:var(--color-base-100);color:var(--color-base-content);
border-inline-end:var(--border) solid var(--bc-10);
}
.admin-sidebar-head{
display:flex;align-items:center;gap:.375rem;
padding:.625rem .5rem;
border-radius:var(--radius-box);
background:var(--brand-wash);
}
.admin-sidebar .brand-name{color:var(--color-base-content)}
.admin-sidebar-head .brand{flex:1;min-width:0;padding-inline:.125rem}
.admin-brand-copy{display:grid;min-width:0;line-height:1.32}
.admin-brand-copy strong{font-size:13.5px;font-weight:800}
.admin-brand-copy small{color:var(--bc-soft);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-menu{flex:1;overflow-y:auto}
.admin-menu .menu-text{overflow:hidden;text-overflow:ellipsis}
.admin-menu li > a.menu-active{
background:var(--color-primary);color:var(--color-primary-content);
box-shadow:0 6px 16px -8px color-mix(in srgb,var(--color-primary) 90%,transparent);
}
.admin-user-dropdown{position:relative}
.admin-user{display:flex;align-items:center;gap:.5rem;max-width:12rem;padding:.3125rem .5rem;border:var(--border) solid var(--bc-20);border-radius:9999px;background:var(--color-base-100);color:var(--color-base-content);font:inherit;cursor:pointer}
.admin-user-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-base-content);font-size:12.5px;font-weight:700}
.admin-user-chevron{display:grid;place-items:center;flex:none;color:var(--bc-soft)}
.admin-user-menu{width:12rem;margin:0}
.admin-content{display:flex;flex-direction:column;min-width:0}
.admin-navbar{
position:sticky;top:0;z-index:40;
padding-inline:0;min-height:3.75rem;
background:color-mix(in srgb,var(--color-base-100) 92%,transparent);
backdrop-filter:blur(8px);
border-bottom:var(--border) solid var(--bc-10);
}
/* 본문(.admin-body)이 66rem 에서 멈추므로 머리글 안쪽도 같은 폭에서 멈춘다.
넓은 화면에서 '사이트 보기'가 본문과 한참 떨어져 오른쪽 끝으로 날아가지 않게 한다.
여백까지 포함한 폭이라(box-sizing:border-box) 본문 글과 좌우 끝이 정확히 맞는다. */
.admin-navbar-inner{
display:flex;align-items:center;gap:.75rem;
width:100%;max-width:68rem;
padding-inline:1.75rem;
}
.admin-navbar-title{display:flex;align-items:center;gap:.5rem;font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.admin-navbar-title::before{
content:"";width:.5rem;height:.5rem;border-radius:9999px;
background:var(--brand-vivid);
}
/* 관리 화면 본문은 가운데로 모으지 않고 메뉴에 이어 왼쪽에 붙인다 */
.admin-body{flex:1;width:100%;max-width:68rem;padding:1.75rem 1.75rem 4.5rem;margin-inline:0}
.admin-menu-btn{display:inline-flex}
/* 데스크톱: drawer 를 항상 열어 둔다 (daisyUI lg:drawer-open) */
@media (min-width: 900px){
.drawer-lg-open{grid-template-columns:max-content auto}
.drawer-lg-open > .drawer-content{grid-column-start:2}
/* daisyUI 5 는 서랍을 transform 이 아니라
translate + opacity + visibility + width 로 감춘다. 전부 되돌려야 열린다. */
.drawer-lg-open > .drawer-side{
position:sticky;top:0;left:0;
grid-column-start:1;grid-row-start:1;
width:auto;height:100dvh;
display:block;overflow-y:auto;overscroll-behavior:auto;
visibility:visible;opacity:1;pointer-events:auto;
}
.drawer-lg-open > .drawer-side > .drawer-overlay{display:none}
.drawer-lg-open > .drawer-side > .admin-sidebar{
translate:0;transform:none;will-change:auto;min-height:100dvh;
width:var(--admin-side-w,16.5rem);
transition:width var(--dur) var(--ease);
}
.drawer-lg-open .admin-menu-btn{display:none}
html[data-admin-sidebar="collapsed"] .drawer-lg-open{--admin-side-w:4.5rem}
html[data-admin-sidebar="collapsed"] .admin-brand-copy,
html[data-admin-sidebar="collapsed"] .admin-menu .menu-text{display:none}
html[data-admin-sidebar="collapsed"] .admin-sidebar-head{flex-direction:column;background:none}
html[data-admin-sidebar="collapsed"] .admin-sidebar-head .brand{justify-content:center;padding:0}
html[data-admin-sidebar="collapsed"] .admin-menu li > a{justify-content:center;padding-inline:0}
html[data-admin-sidebar="collapsed"] .admin-menu .menu-title{height:1px;padding:.5rem 0 0;overflow:hidden;text-indent:-999px;border-top:var(--border) solid var(--bc-10)}
html[data-admin-sidebar="collapsed"] .admin-fold .icon{transform:rotate(180deg)}
}
@media (max-width: 899px){
.admin-fold{display:none}
}
/* --- 14 CKEditor 4 ----------------------------------------- */
.cke_chrome{border:var(--border) solid var(--bc-20)!important;border-radius:var(--radius-field)!important;overflow:hidden;box-shadow:none!important}
.cke_top,.cke_bottom{background:var(--color-base-200)!important;border-color:var(--bc-10)!important;box-shadow:none!important}
.cke_contents{background:var(--color-base-100)!important}
/* '사진 올리기' 는 직접 만든 버튼이라 CKEditor 스프라이트에 아이콘이 없다.
아이콘 없이 빈 칸으로 보여 누를 곳을 못 찾는다 — 사진 글리프를 직접 넣는다. */
.cke_button__gnucmsimages_icon{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='%23575757'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.4'%20y='3.8'%20width='15.2'%20height='12.4'%20rx='2.2'/%3E%3Ccircle%20cx='7'%20cy='8.4'%20r='1.4'/%3E%3Cpath%20d='m3.2%2014.4%204.1-3.6%203%202.6%202.7-2.3%203.8%203.3'/%3E%3C/svg%3E")!important;
background-position:center!important;
background-size:16px 16px!important;
background-repeat:no-repeat!important;
}
/* 링크·표 같은 다이얼로그는 CKEditor 기본 스킨이 밝은 색을 직접 박아 둔다.
다크 모드에서 화면만 어둡고 창은 하얗게 튀므로 팔레트에 맞춘다. */
[data-theme="dark"] .cke_panel{background:var(--color-base-100)!important;border-color:var(--bc-20)!important}
[data-theme="dark"] .cke_panel_frame{background:var(--color-base-100)!important}
[data-theme="dark"] .cke_colorblock{background:var(--color-base-100)!important;color:var(--color-base-content)!important}
[data-theme="dark"] .cke_colorbox{border-color:var(--bc-20)!important}
[data-theme="dark"] a.cke_colorauto,[data-theme="dark"] a.cke_colormore{background:var(--color-base-200)!important;color:var(--color-base-content)!important;border-color:var(--bc-10)!important}
[data-theme="dark"] a.cke_colorauto:hover,[data-theme="dark"] a.cke_colormore:hover{background:var(--color-base-300)!important}
[data-theme="dark"] .cke_panel_listItem a{background:var(--color-base-100)!important;color:var(--color-base-content)!important}
[data-theme="dark"] .cke_panel_listItem a:hover,[data-theme="dark"] .cke_panel_listItem.cke_selected a{background:var(--color-base-300)!important;color:var(--color-base-content)!important}
[data-theme="dark"] .cke_panel_grouptitle{background:var(--color-base-200)!important;color:var(--color-base-content)!important;border-color:var(--bc-10)!important}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .cke_panel{background:var(--color-base-100)!important;border-color:var(--bc-20)!important}
:root:not([data-theme="light"]) .cke_panel_frame{background:var(--color-base-100)!important}
:root:not([data-theme="light"]) .cke_colorblock{background:var(--color-base-100)!important;color:var(--color-base-content)!important}
:root:not([data-theme="light"]) .cke_colorbox{border-color:var(--bc-20)!important}
:root:not([data-theme="light"]) a.cke_colorauto,:root:not([data-theme="light"]) a.cke_colormore{background:var(--color-base-200)!important;color:var(--color-base-content)!important;border-color:var(--bc-10)!important}
:root:not([data-theme="light"]) a.cke_colorauto:hover,:root:not([data-theme="light"]) a.cke_colormore:hover{background:var(--color-base-300)!important}
:root:not([data-theme="light"]) .cke_panel_listItem a{background:var(--color-base-100)!important;color:var(--color-base-content)!important}
:root:not([data-theme="light"]) .cke_panel_listItem a:hover,:root:not([data-theme="light"]) .cke_panel_listItem.cke_selected a{background:var(--color-base-300)!important;color:var(--color-base-content)!important}
:root:not([data-theme="light"]) .cke_panel_grouptitle{background:var(--color-base-200)!important;color:var(--color-base-content)!important;border-color:var(--bc-10)!important}
}
[data-theme="dark"] .cke_dialog_background_cover{background:#000!important;opacity:.62!important}
[data-theme="dark"] .cke_dialog_body{background:var(--color-base-100)!important;border-color:var(--bc-20)!important;box-shadow:var(--shadow-3)!important}
[data-theme="dark"] .cke_dialog_title{background:var(--color-base-200)!important;color:var(--color-base-content)!important;border-bottom-color:var(--bc-10)!important;text-shadow:none!important}
[data-theme="dark"] .cke_dialog_contents{background:var(--color-base-100)!important;border-top-color:var(--bc-10)!important}
[data-theme="dark"] .cke_dialog_contents_body{background:var(--color-base-100)!important;color:var(--color-base-content)!important}
[data-theme="dark"] .cke_dialog_footer{background:var(--color-base-200)!important;border-top-color:var(--bc-10)!important;box-shadow:none!important}
[data-theme="dark"] .cke_dialog_footer_buttons{background:transparent!important}
[data-theme="dark"] .cke_dialog_tabs{background:transparent!important}
[data-theme="dark"] a.cke_dialog_tab{background:var(--color-base-200)!important;color:var(--bc-mid)!important;border-color:var(--bc-10)!important;text-shadow:none!important}
[data-theme="dark"] a.cke_dialog_tab:hover{background:var(--color-base-300)!important;color:var(--color-base-content)!important}
[data-theme="dark"] a.cke_dialog_tab_selected{background:var(--color-base-100)!important;color:var(--color-base-content)!important;border-bottom-color:var(--color-base-100)!important}
[data-theme="dark"] .cke_dialog_ui_labeled_label,
[data-theme="dark"] .cke_dialog_ui_checkbox_input + label,
[data-theme="dark"] .cke_dialog_ui_html{color:var(--color-base-content)!important}
[data-theme="dark"] input.cke_dialog_ui_input_text,
[data-theme="dark"] textarea.cke_dialog_ui_input_textarea,
[data-theme="dark"] select.cke_dialog_ui_input_select{background:var(--color-base-200)!important;color:var(--color-base-content)!important;border-color:var(--bc-20)!important}
[data-theme="dark"] .cke_dialog_ui_input_text,
[data-theme="dark"] .cke_dialog_ui_input_textarea,
[data-theme="dark"] .cke_dialog_ui_input_select{background:transparent!important}
[data-theme="dark"] a.cke_dialog_ui_button{background:var(--color-base-200)!important;color:var(--color-base-content)!important;border-color:var(--bc-20)!important;text-shadow:none!important;box-shadow:none!important}
[data-theme="dark"] a.cke_dialog_ui_button:hover{background:var(--color-base-300)!important}
[data-theme="dark"] a.cke_dialog_ui_button_ok{background:var(--color-primary)!important;color:var(--color-primary-content)!important;border-color:var(--color-primary)!important}
[data-theme="dark"] a.cke_dialog_ui_button_ok:hover{filter:brightness(.92)}
[data-theme="dark"] .cke_dialog_close_button{filter:invert(1) brightness(1.6)}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .cke_dialog_background_cover{background:#000!important;opacity:.62!important}
:root:not([data-theme="light"]) .cke_dialog_body{background:var(--color-base-100)!important;border-color:var(--bc-20)!important;box-shadow:var(--shadow-3)!important}
:root:not([data-theme="light"]) .cke_dialog_title{background:var(--color-base-200)!important;color:var(--color-base-content)!important;border-bottom-color:var(--bc-10)!important;text-shadow:none!important}
:root:not([data-theme="light"]) .cke_dialog_contents{background:var(--color-base-100)!important;border-top-color:var(--bc-10)!important}
:root:not([data-theme="light"]) .cke_dialog_contents_body{background:var(--color-base-100)!important;color:var(--color-base-content)!important}
:root:not([data-theme="light"]) .cke_dialog_footer{background:var(--color-base-200)!important;border-top-color:var(--bc-10)!important;box-shadow:none!important}
:root:not([data-theme="light"]) .cke_dialog_footer_buttons{background:transparent!important}
:root:not([data-theme="light"]) .cke_dialog_tabs{background:transparent!important}
:root:not([data-theme="light"]) a.cke_dialog_tab{background:var(--color-base-200)!important;color:var(--bc-mid)!important;border-color:var(--bc-10)!important;text-shadow:none!important}
:root:not([data-theme="light"]) a.cke_dialog_tab:hover{background:var(--color-base-300)!important;color:var(--color-base-content)!important}
:root:not([data-theme="light"]) a.cke_dialog_tab_selected{background:var(--color-base-100)!important;color:var(--color-base-content)!important;border-bottom-color:var(--color-base-100)!important}
:root:not([data-theme="light"]) .cke_dialog_ui_labeled_label,
:root:not([data-theme="light"]) .cke_dialog_ui_checkbox_input + label,
:root:not([data-theme="light"]) .cke_dialog_ui_html{color:var(--color-base-content)!important}
:root:not([data-theme="light"]) input.cke_dialog_ui_input_text,
:root:not([data-theme="light"]) textarea.cke_dialog_ui_input_textarea,
:root:not([data-theme="light"]) select.cke_dialog_ui_input_select{background:var(--color-base-200)!important;color:var(--color-base-content)!important;border-color:var(--bc-20)!important}
:root:not([data-theme="light"]) .cke_dialog_ui_input_text,
:root:not([data-theme="light"]) .cke_dialog_ui_input_textarea,
:root:not([data-theme="light"]) .cke_dialog_ui_input_select{background:transparent!important}
:root:not([data-theme="light"]) a.cke_dialog_ui_button{background:var(--color-base-200)!important;color:var(--color-base-content)!important;border-color:var(--bc-20)!important;text-shadow:none!important;box-shadow:none!important}
:root:not([data-theme="light"]) a.cke_dialog_ui_button:hover{background:var(--color-base-300)!important}
:root:not([data-theme="light"]) a.cke_dialog_ui_button_ok{background:var(--color-primary)!important;color:var(--color-primary-content)!important;border-color:var(--color-primary)!important}
:root:not([data-theme="light"]) a.cke_dialog_ui_button_ok:hover{filter:brightness(.92)}
:root:not([data-theme="light"]) .cke_dialog_close_button{filter:invert(1) brightness(1.6)}
}
/* CKEditor 도구모음 아이콘은 어두운 글리프 스프라이트다. 다크 배경에서는 묻히므로 뒤집는다. */
[data-theme="dark"] .cke_button_icon,
[data-theme="dark"] .cke_combo_arrow{filter:invert(1) brightness(1.6)}
[data-theme="dark"] .cke_button_label,
[data-theme="dark"] .cke_combo_text{color:var(--color-base-content)!important}
[data-theme="dark"] .cke_toolgroup,
[data-theme="dark"] .cke_combo_button{background:transparent!important;border-color:var(--bc-10)!important;box-shadow:none!important}
[data-theme="dark"] .cke_button:hover,
[data-theme="dark"] .cke_button_on,
[data-theme="dark"] .cke_combo_button:hover{background:var(--color-base-300)!important;border-color:var(--bc-20)!important}
[data-theme="dark"] .cke_toolbar_separator{background:var(--bc-20)!important}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .cke_button_icon,
:root:not([data-theme="light"]) .cke_combo_arrow{filter:invert(1) brightness(1.6)}
:root:not([data-theme="light"]) .cke_button_label,
:root:not([data-theme="light"]) .cke_combo_text{color:var(--color-base-content)!important}
:root:not([data-theme="light"]) .cke_toolgroup,
:root:not([data-theme="light"]) .cke_combo_button{background:transparent!important;border-color:var(--bc-10)!important;box-shadow:none!important}
:root:not([data-theme="light"]) .cke_button:hover,
:root:not([data-theme="light"]) .cke_button_on,
:root:not([data-theme="light"]) .cke_combo_button:hover{background:var(--color-base-300)!important;border-color:var(--bc-20)!important}
:root:not([data-theme="light"]) .cke_toolbar_separator{background:var(--bc-20)!important}
}
/* --- 15 반응형 --------------------------------------------- */
@media (min-width: 640px){:root{--pad:1.5rem}}
@media (min-width: 1024px){:root{--pad:2rem}}
@media (max-width: 899px){
.drawer-button{display:inline-flex}
.hide-sm{display:none!important}
.subnav{position:static;backdrop-filter:none}
.dock{display:flex}
body:not(.admin-page) .main-area{padding-bottom:calc(var(--dock-h) + 2.5rem)}
body:not(.admin-page) .footer{margin-bottom:var(--dock-h)}
.fab{right:1rem;bottom:calc(var(--dock-h) + 1rem)}
.to-top{right:1rem;bottom:calc(var(--dock-h) + 5.25rem)}
.hero-content{padding:2.25rem 1.5rem}
.hero .stats{width:100%}
.grid-2,.grid-3{grid-template-columns:1fr}
.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem .875rem}
.carousel-item{width:min(13rem,58vw)}
.post-rows .list-row{padding:1.125rem 1.25rem;gap:.875rem}
.post-row-thumb{width:7.5rem}
.post-row-title{font-size:15px}
.admin-body,.admin-navbar-inner{padding-inline:1.25rem}
.gnb-all{display:none}
}
@media (max-width: 640px){
.admin-user{padding:.25rem}
.admin-user-name,.admin-user-chevron{display:none}
.show-sm{display:flex}
.card-body{padding:1.25rem}
.card-head-row{padding:1.25rem}
.article-head,.article-body,.article-files{padding:1.375rem 1.25rem}
.article-head{padding-bottom:.375rem}
.article-body{padding-top:.875rem}
.article-footer{align-items:flex-start;flex-direction:column;padding:0 1.25rem 1.375rem}
.article-footer .article-actions-inline{margin-left:0}
.comments .card-body{padding:1.375rem 1.25rem}
.list-row{padding:1rem 1.25rem}
.danger-zone{margin:0 1.25rem 1.25rem}
.auth-card .card-body{padding:1.75rem 1.375rem}
.status-card .card-body{padding:2.25rem 1.375rem}
.form-actions{flex-direction:column-reverse;align-items:stretch}
.form-actions .btn{width:100%}
.btn-delete{margin-left:0}
.page-head h1{font-size:22px}
.page-head-actions{width:100%;flex-wrap:nowrap}
/* 검색만 남는 폭을 채우고, 톱니는 제 크기를 지킨다 */
.page-head-actions .inline-search{flex:1;min-width:0;margin-bottom:0}
.page-head-actions > .btn{flex:none}
/* 관리자 표를 카드로 접는다 */
.table,.table tbody,.table tr,.table td{display:block}
.table thead{display:none}
.table tbody tr{padding:1.125rem 1.25rem;border-bottom:var(--border) solid var(--bc-10)}
.table tbody tr:last-child{border-bottom:0}
.table td{display:flex;align-items:flex-start;gap:.75rem;padding:.1875rem 0;border:0}
.table td::before{
content:attr(data-label);flex:none;width:4.75rem;
color:var(--bc-soft);font-size:12px;font-weight:700;line-height:1.8;
}
.table .right{text-align:left}
.table td.right{padding-top:.625rem}
.table-empty td{padding:3rem 0;text-align:center}
.table-empty td::before{display:none}
}
@media (max-width: 520px){
.hero{border-radius:20px!important}
.shortcuts{gap:.35rem}
.shortcut{width:5rem}
.shortcut-icon{width:3.6rem;height:3.6rem}
}
@media (max-width: 420px){
.brand-name{font-size:16px}
.card-grid{grid-template-columns:1fr 1fr}
.post-card .card-title{font-size:13.5px}
.shortcut{width:4.5rem}
.shortcut-icon{width:3.25rem;height:3.25rem}
}
/* --- 16 모션 · 대비 · 인쇄 --------------------------------- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important;
}
.read-progress{display:none}
.post-card:hover .post-cover-img{transform:none}
}
@media (prefers-contrast: more){
:root{--bc-10:color-mix(in srgb,var(--color-base-content) 26%,transparent);
--bc-20:color-mix(in srgb,var(--color-base-content) 44%,transparent);
--bc-soft:color-mix(in srgb,var(--color-base-content) 82%,transparent);
--bc-mid:color-mix(in srgb,var(--color-base-content) 92%,transparent)}
}
@view-transition{navigation:auto}
@media print{
.site-header,.footer,.dock,.drawer-side,.search-modal,.fab,.to-top,.subnav,.inline-search,
.pager,.admin-navbar,.skip-link,.article-actions,.read-progress{display:none!important}
body{background:#fff;color:#000}
.card{border:0;box-shadow:none}
a{color:#000;text-decoration:none}
}
/* --- 17 daisyUI 호환 수식자 -------------------------------- */
/* daisyUI v5 에서 기본값이 된 수식자들. 마크업 호환을 위해 명시해 둔다. */
.input-bordered,.select-bordered,.textarea-bordered{border:var(--border) solid var(--bc-20)}
.is-invalid .input-bordered,.is-invalid .select-bordered,.is-invalid .textarea-bordered{border-color:var(--color-error)}
.avatar-placeholder .avatar-inner{overflow:hidden}
.article{overflow:hidden}
/* --- 18 이 테마에서만 쓰는 조각 ---------------------------- */
/* 목록 머리의 글 수 */
.page-count{margin-top:.5rem;color:var(--bc-soft);font-size:12.5px;font-weight:600}
.page-count strong{color:var(--color-primary);font-weight:800}
/* 글 상세 머리의 배지 줄 */
.article-tags{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
/* 홈 아래의 안내 블록 */
.guide{margin-top:3.25rem;padding-top:2.25rem;border-top:var(--border) solid var(--bc-10)}
.guide-title{margin-bottom:1.125rem;font-size:19px;font-weight:800;letter-spacing:-.035em}
.guide-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.guide-card{
display:flex;flex-direction:column;gap:.4375rem;
padding:1.5rem 1.375rem;
border:var(--border) dashed var(--bc-20);border-radius:22px;
background:var(--color-base-100);
}
.guide-ico{
display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:.375rem;
border-radius:45% 55% 52% 48%;
background:color-mix(in srgb,var(--tone,var(--color-primary)) 14%,var(--color-base-100));
color:var(--tone,var(--color-primary));
}
.guide-card strong{font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.guide-card p{color:var(--bc-mid);font-size:13px;line-height:1.65}
/* 관리 콘솔 첫 화면의 인사말 띠 */
.admin-hello{
display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;
margin-bottom:1.5rem;padding:1.5rem 1.625rem;
border-radius:var(--radius-box);
background:
radial-gradient(120% 160% at 92% -20%,color-mix(in srgb,var(--brand-vivid) 40%,transparent),transparent 60%),
linear-gradient(120deg,var(--brand-wash),var(--color-base-100) 70%);
border:var(--border) solid var(--bc-10);
}
.admin-hello h1{font-size:22px;font-weight:800;letter-spacing:-.035em}
.admin-hello p{margin-top:.375rem;color:var(--bc-mid);font-size:13.5px}
.admin-hello-actions{display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width: 640px){
.guide{margin-top:2.5rem;padding-top:1.75rem}
.guide-card{padding:1.25rem 1.125rem}
.admin-hello{padding:1.25rem 1.125rem}
}
/* 표와 목록은 줄마다 주황 글씨가 되면 너무 시끄럽다.
제목은 본문색으로 두고 가리켰을 때만 브랜드 색을 준다. */
.table a.link,.list a.list-title.link{color:var(--color-base-content)}
.table a.link:hover,.list a.list-title.link:hover{color:var(--color-primary)}
/* --- 유틸리티 재확인 -----------------------------------------
.inline-search{display:flex} 처럼 뒤에 오는 컴포넌트 규칙이
.show-sm{display:none} 을 이겨서 데스크톱에도 모바일 전용 검색칸이
보이던 문제가 있었다. 유틸리티는 파일 맨 끝에서 다시 못박는다. */
.hide-sm{display:inline-flex}
.show-sm{display:none}
@media (max-width: 899px){
.hide-sm{display:none!important}
}
@media (max-width: 640px){
.show-sm{display:flex}
}
/* 관리 콘솔 > 사이트 설정 > 데이터 구조 */
.schema-card { margin-top: 1.25rem; }
.schema-facts { display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: .75rem 0 1rem; }
.schema-facts dt { font-size: .8rem; color: color-mix(in oklch, currentColor 60%, transparent); }
.schema-facts dd { margin: 0; font-weight: 600; }
.schema-stamp { font-weight: 400; font-size: .75rem; opacity: .6; }
.schema-note { font-size: .875rem; opacity: .75; margin-top: .75rem; }
.schema-gc { display:flex; align-items:center; gap:.6rem; margin-top:.75rem; }
/* 사이트 설정의 숫자 입력은 긴 문장을 받지 않으므로 데스크톱에서 절반 폭만 쓴다. */
.settings-write-rules-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem; }
.settings-write-rules-row .input { width:100%; }
@media (max-width: 640px) {
.settings-write-rules-row { grid-template-columns:1fr;gap:0; }
}
/* 글쓰기 폼의 첨부 목록 */
.attach-box { margin-top: 1rem; }
.attach-zone { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border: 1.5px dashed color-mix(in oklch, currentColor 25%, transparent); border-radius: .75rem; }
.attach-zone.is-over { border-color: var(--color-primary, #2f7fe0); background: color-mix(in oklch, var(--color-primary, #2f7fe0) 8%, transparent); }
.attach-zone p { margin: 0; font-size: .875rem; opacity: .7; }
.attach-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.attach-row { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid color-mix(in oklch, currentColor 12%, transparent); border-radius: .5rem; background: color-mix(in oklch, currentColor 3%, transparent); }
.attach-row.is-dragging { opacity: .5; }
.attach-row.is-failed .attach-size { color: var(--color-error, #d92d20); }
.attach-grip { cursor: grab; opacity: .5; }
.attach-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.attach-size { font-size: .75rem; opacity: .6; white-space: nowrap; }
.attach-tools { display: flex; gap: .1rem; }
.attach-error { color: var(--color-error, #d92d20); }
/* 목록 도구 줄: 왼쪽 분류 칩, 오른쪽 목록 형태 선택. 옛 .view-switch 줄을 대신한다 */
.list-tools{display:flex;align-items:center;gap:.75rem;margin-bottom:.875rem}
.list-tools .chip-bar{flex:1;min-width:0}
.view-select{margin-left:auto;flex:none}
.view-select-btn{gap:.375rem;border-radius:9999px;background:var(--color-base-100)}
.view-menu{width:9.5rem}
/* 글쓴이 칸은 옛 데이터에 긴 이름이 남아 있어도 줄임표로 접는다 */
.cell-author{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-author{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
/* 목록의 글쓴이 단추와 모달 */
.link-author{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.link-author:hover{color:var(--color-primary)}
.author-modal .modal-box{max-width:22rem}
.author-modal-title{margin:0 0 .25rem;font-size:1.05rem;font-weight:800}
.author-modal-sub{margin:0 0 1rem;font-size:.8125rem;color:var(--bc-soft)}
.author-modal-links{display:grid;gap:.5rem}
/* 회원 댓글 목록 */
.author-comments .author-comment{display:flex;align-items:center;gap:.75rem}
.author-comment-body{flex:1;min-width:0;display:grid;gap:.15rem}
.author-comment-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.author-comment-post{font-size:.75rem;color:var(--bc-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.author-comment-date{font-size:.75rem;color:var(--bc-soft);white-space:nowrap}
.author-comment-empty{color:var(--bc-soft)}
/* 전체 공지 뱃지 글자가 줄바꿈되지 않게 한다. 색(강조색)은 badge-accent 클래스가 낸다 */
.notice-list .notice-scope{white-space:nowrap}
/* 공지 선택은 세 항목뿐이라 칸을 가득 채울 이유가 없다 */
.notice-select{width:100%;max-width:16rem}