/* ============================================================= gnucms.com · default (오늘의집 모티브 + daisyUI 컴포넌트 API) 오늘의집(ohou.se) 레이아웃 모티브 + daisyUI 컴포넌트 API. daisyUI 는 Tailwind 플러그인이지만 클래스 이름이 시맨틱해서, v5 의 테마 변수 체계(--color-*, --radius-*)와 컴포넌트 스펙을 그대로 손으로 옮겨 정적 CSS 로 재현했다. 다크 모드도 daisyUI 방식 그대로 를 쓴다. npm / composer / 컴파일 없이 이 파일 하나로 동작한다. ============================================================= */ /* --- 01 daisyUI 테마: light -------------------------------- */ :root, [data-theme="light"]{ color-scheme:light; --color-base-100:#ffffff; --color-base-200:#f7f9fa; --color-base-300:#eaedef; --color-base-content:#2f3438; --color-primary:#0e7490; --color-primary-content:#ffffff; --color-secondary:#7c3aed; --color-secondary-content:#ffffff; --color-accent:#0f766e; --color-accent-content:#ffffff; --color-neutral:#2f3438; --color-neutral-content:#ffffff; --color-info:#0369a1; --color-info-content:#ffffff; --color-success:#047857; --color-success-content:#ffffff; --color-warning:#b45309; --color-warning-content:#ffffff; --color-error:#b91c1c; --color-error-content:#ffffff; --radius-selector:1rem; --radius-field:.5rem; --radius-box:1rem; --size-field:.25rem; --border:1px; /* 아바타·커버용 톤 */ --tone-0:#0891b2; --tone-1:#6366f1; --tone-2:#0d9488; --tone-3:#ea580c; --tone-4:#9333ea; --tone-5:#db2777; --shadow-1:0 1px 2px rgba(15,23,42,.06); --shadow-2:0 1px 3px rgba(15,23,42,.1),0 1px 2px -1px rgba(15,23,42,.1); --shadow-3:0 10px 15px -3px rgba(15,23,42,.1),0 4px 6px -4px rgba(15,23,42,.1); --shadow-4:0 20px 25px -5px rgba(15,23,42,.12),0 8px 10px -6px rgba(15,23,42,.12); --backdrop:rgba(15,23,42,.45); } /* --- 02 daisyUI 테마: dark --------------------------------- */ [data-theme="dark"]{ color-scheme:dark; --color-base-100:#1d232a; --color-base-200:#191e24; --color-base-300:#15191e; --color-base-content:#d7dde4; --color-primary:#22d3ee; --color-primary-content:#08191e; --color-secondary:#c084fc; --color-secondary-content:#1a0f2b; --color-accent:#2dd4bf; --color-accent-content:#062420; --color-neutral:#2a323c; --color-neutral-content:#d7dde4; --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; --tone-0:#38bdf8; --tone-1:#818cf8; --tone-2:#2dd4bf; --tone-3:#fb923c; --tone-4:#c084fc; --tone-5:#f472b6; --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 1px 3px rgba(0,0,0,.6),0 1px 2px -1px rgba(0,0,0,.6); --shadow-3:0 10px 15px -3px rgba(0,0,0,.65),0 4px 6px -4px rgba(0,0,0,.65); --shadow-4:0 20px 25px -5px rgba(0,0,0,.7),0 8px 10px -6px rgba(0,0,0,.7); --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:#1d232a; --color-base-200:#191e24; --color-base-300:#15191e; --color-base-content:#d7dde4; --color-primary:#22d3ee; --color-primary-content:#08191e; --color-secondary:#c084fc; --color-secondary-content:#1a0f2b; --color-accent:#2dd4bf; --color-accent-content:#062420; --color-neutral:#2a323c; --color-neutral-content:#d7dde4; --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; --tone-0:#38bdf8; --tone-1:#818cf8; --tone-2:#2dd4bf; --tone-3:#fb923c; --tone-4:#c084fc; --tone-5:#f472b6; --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 1px 3px rgba(0,0,0,.6),0 1px 2px -1px rgba(0,0,0,.6); --shadow-3:0 10px 15px -3px rgba(0,0,0,.65),0 4px 6px -4px rgba(0,0,0,.65); --shadow-4:0 20px 25px -5px rgba(0,0,0,.7),0 8px 10px -6px rgba(0,0,0,.7); --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) 78%,transparent); --bc-soft:color-mix(in srgb,var(--color-base-content) 70%,transparent); /* 아래 둘은 테두리·배경 전용(텍스트 아님) */ --bc-20:color-mix(in srgb,var(--color-base-content) 20%,transparent); --bc-10:color-mix(in srgb,var(--color-base-content) 10%,transparent); --p-soft:color-mix(in srgb,var(--color-primary) 14%,var(--color-base-100)); --wrap:80rem; --pad:1rem; --nav-h:60px; --tabs-h:46px; --dock-h:60px; --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",Inter,Roboto,"Segoe UI",sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --ease:cubic-bezier(.4,0,.2,1); --dur:.16s; } /* --- 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.6; -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;text-decoration:none} img,svg{max-width:100%;display:block} button{font:inherit;color:inherit} fieldset{margin:0;padding:0;border:0} code{font-family:var(--mono)} .icon{flex:none;display:inline-block;vertical-align:-.15em} /* hidden 은 컴포넌트의 display 규칙(.textarea{display:block} 등)에 밀리면 안 된다. 분류 칩 UI 의 폴백 textarea 가 계속 보이던 원인이다. */ [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) 26%,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.5rem 3.5rem} .admin-page .main-area{padding:0;max-width:none} .hide-sm{display:inline-flex} .show-sm{display:none} .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 ------------------------------------------------- */ .btn{ --btn-bg:var(--color-base-100); --btn-fg:var(--color-base-content); --btn-bd:var(--bc-20); display:inline-flex;align-items:center;justify-content:center;gap:.375rem; height:2.25rem;min-height:2.25rem;padding-inline:.75rem; border:var(--border) solid var(--btn-bd);border-radius:var(--radius-field); background:var(--btn-bg);color:var(--btn-fg); font-size:13px;font-weight:600;line-height:1;text-align:center; white-space:nowrap;cursor:pointer; box-shadow:var(--shadow-1); transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease); } .btn:hover{--btn-bg:var(--color-base-300)} .btn:active{transform:translateY(1px)} .btn-primary{--btn-bg:var(--color-primary);--btn-fg:var(--color-primary-content);--btn-bd:transparent} .btn-primary:hover{--btn-bg:color-mix(in srgb,var(--color-primary) 86%,#000)} .btn-ghost{--btn-bg:transparent;--btn-fg:var(--bc-strong);--btn-bd:transparent;box-shadow:none} .btn-ghost:hover{--btn-bg:var(--bc-10);--btn-fg:var(--color-base-content)} .btn-outline{--btn-bg:transparent;--btn-fg:var(--color-base-content);--btn-bd:var(--bc-20);box-shadow:none} .btn-outline:hover{--btn-bg:var(--bc-10);--btn-bd:var(--bc-soft)} .btn-error{--btn-fg:var(--color-error);--btn-bd:color-mix(in srgb,var(--color-error) 45%,transparent)} .btn-error:hover{--btn-bg:color-mix(in srgb,var(--color-error) 12%,var(--color-base-100))} .btn-active{--btn-bg:var(--color-primary);--btn-fg:var(--color-primary-content);--btn-bd:transparent} .btn-disabled,.btn:disabled{opacity:.5;pointer-events:none;box-shadow:none} .btn-sm{height:1.75rem;min-height:1.75rem;padding-inline:.5rem;font-size:12px;gap:.25rem} .btn-lg{height:2.75rem;min-height:2.75rem;padding-inline:1.125rem;font-size:14px} .btn-block{width:100%} .btn-square{width:2.25rem;padding:0} .btn-square.btn-sm{width:1.75rem} .btn-circle{width:2.25rem;padding:0;border-radius:9999px} .btn-circle.btn-sm{width:1.75rem} /* 라이트/다크 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) 14%,transparent)} .admin-link-text{font-weight:700} /* --- 05 navbar · drawer · dock · dropdown · menu ------------ */ .site-header{ position:sticky;top:0;z-index:60; background:var(--color-base-100); border-bottom:var(--border) solid var(--bc-10); } .navbar{display:flex;align-items:center;gap:.5rem;min-height:var(--nav-h)} .navbar-start{display:flex;align-items:center;gap:.5rem;flex:none} .navbar-center{display:flex;justify-content:center;flex:1;min-width:0} .navbar-end{display:flex;align-items:center;gap:.25rem;flex:none;margin-left:auto} .brand{display:flex;align-items:center;gap:.5rem;flex:none} .brand-logo{ display:grid;place-items:center;width:2rem;height:2rem;flex:none; border-radius:var(--radius-field); background:var(--color-primary);color:var(--color-primary-content); } .brand-logo-sm{width:1.625rem;height:1.625rem} .brand-name{font-size:17px;font-weight:800;letter-spacing:-.02em} .drawer-button{display:none} .header-tabs{border-top:var(--border) solid var(--bc-10);overflow:hidden} .tabs{display:flex;align-items:center;gap:.125rem;height:var(--tabs-h);overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{ position:relative;display:inline-flex;align-items:center;flex:none; height:var(--tabs-h);padding-inline:.75rem; color:var(--bc-mid);font-size:14px;font-weight:500;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:700} .tabs-border .tab.tab-active::after{ content:"";position:absolute;left:.75rem;right:.75rem;bottom:0;height:2px; border-radius:2px 2px 0 0;background:var(--color-primary); } /* daisyUI drawer: 체크박스 기반, JS 없이 열고 닫힌다 */ .drawer{position:relative;display:grid;width:100%} .drawer-toggle{position:absolute;width:0;height:0;opacity:0;pointer-events:none} .drawer-content{grid-area:1/1;min-width:0} .drawer-side{ position:fixed;inset:0;z-index:120; display:grid;grid-auto-columns:max-content; overflow:hidden;visibility:hidden; } .drawer-toggle:checked ~ .drawer-side{visibility:visible;overflow-y:auto} .drawer-overlay{ grid-area:1/1;position:sticky;top:0; width:100vw;height:100dvh; background:var(--backdrop);opacity:0; transition:opacity .2s var(--ease);cursor:pointer; } .drawer-toggle:checked ~ .drawer-side > .drawer-overlay{opacity:1} .drawer-side > .drawer-panel,.drawer-side > .admin-sidebar{ grid-area:1/1; width:min(20rem,88vw);min-height:100dvh; transform:translateX(-100%); transition:transform .22s var(--ease); background:var(--color-base-100); will-change:transform; } .drawer-toggle:checked ~ .drawer-side > .drawer-panel, .drawer-toggle:checked ~ .drawer-side > .admin-sidebar{transform:translateX(0)} .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:.75rem;border-radius:var(--radius-box);background:var(--color-base-200)} .drawer-user strong{display:block;font-size:14px;font-weight:700} .drawer-theme{display:grid;gap:.5rem} .drawer-theme-label{color:var(--bc-mid);font-size:12px;font-weight:600} .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{display:flex;flex-direction:column;gap:.125rem;padding:.25rem} .menu li > a,.menu li > 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:500;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{background:var(--bc-10)} .menu li > a.menu-active{background:var(--p-soft);color:var(--color-primary);font-weight:700} .menu li > form{width:100%} .menu-title{padding:.75rem .75rem .25rem;color:var(--bc-soft);font-size:11.5px;font-weight:700;letter-spacing:.04em} .dropdown{position:relative;display:inline-flex} .dropdown-content{ position:absolute;top:calc(100% + .375rem);z-index:100; min-width:11rem; 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} .rounded-box{border-radius:var(--radius-box)} .shadow-lg{box-shadow:var(--shadow-3)} .user-menu{width:12rem} .dock{ position:fixed;left:0;right:0;bottom:0;z-index:70;display:none; 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-mid); font-size:11px;font-weight:600;cursor:pointer; } .dock > .dock-active{color:var(--color-primary)} .dock-label{line-height:1} .footer{margin-top:3rem;padding-block:1.75rem;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.5rem;flex-wrap:wrap} .footer-brand{display:flex;align-items:center;gap:.625rem} .footer-brand strong{font-size:14px;font-weight:700} .footer-brand p{margin-top:.125rem;color:var(--bc-mid);font-size:12.5px} .footer-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem} .footer-nav a{color:var(--bc-mid);font-size:12.5px} .footer-nav a:hover{color:var(--color-primary)} /* --- 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); box-shadow:var(--shadow-1); overflow:hidden; } /* 카드를 세로로 쌓을 때의 사이 여백. 격자·캐러셀은 gap 으로 이미 사이를 두므로 여기서 또 얹으면 두 번째 카드부터 아래로 밀려 첫 카드만 커 보인다. */ .card + .card,.card + .article-actions,.card + .pager{margin-top:1.25rem} .card-grid .card + .card,.carousel .card + .card{margin-top:0} .card-body{display:flex;flex-direction:column;gap:.5rem;padding:1.5rem} /* 세로 flex 안에서 배지·칩은 기본값(stretch) 때문에 줄 전체로 늘어난다. 내용만큼만 차지하게 둔다. */ .card-body > .badge,.card-body > .chip,.article-head > .badge{align-self:flex-start} .card-compact .card-body{padding:.875rem} .card-body-flush{padding:0;gap:0} .card-title{display:flex;align-items:center;gap:.5rem;font-size:18px;font-weight:700;letter-spacing:-.02em} .card-sub{color:var(--bc-mid);font-size:13.5px} .card-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.5rem} .card-head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;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} .badge{ display:inline-flex;align-items:center;gap:.25rem; height:1.5rem;padding-inline:.625rem; border:var(--border) solid transparent;border-radius:var(--radius-selector); background:var(--bc-10);color:var(--color-base-content); font-size:11.5px;font-weight:600;white-space:nowrap; } .badge em{color:var(--bc-soft);font-style:normal;font-weight:700} .badge-sm{height:1.25rem;padding-inline:.5rem;font-size:11px} .badge-xs{height:1rem;padding-inline:.375rem;font-size:10px} .badge-ghost{background:var(--bc-10);color:var(--bc-strong)} .badge-primary{background:var(--color-primary);color:var(--color-primary-content)} .badge-success{background:var(--color-success);color:var(--color-success-content)} .badge-error{background:var(--color-error);color:var(--color-error-content)} .badge-primary.badge-soft{background:color-mix(in srgb,var(--color-primary) 16%,var(--color-base-100));color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 30%,transparent)} .badge-success.badge-soft{background:color-mix(in srgb,var(--color-success) 16%,var(--color-base-100));color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 30%,transparent)} .badge-error.badge-soft{background:color-mix(in srgb,var(--color-error) 16%,var(--color-base-100));color:var(--color-error);border-color:color-mix(in srgb,var(--color-error) 30%,transparent)} .badge-ghost.badge-soft{background:var(--bc-10);color:var(--bc-strong)} .badge-soft{background:var(--bc-10);color:var(--bc-strong)} .badge-tone{background:color-mix(in srgb,var(--tone,var(--tone-0)) 16%,var(--color-base-100));color:var(--tone,var(--tone-0));border-color:color-mix(in srgb,var(--tone,var(--tone-0)) 30%,transparent)} .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{display:inline-flex;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:700;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:#10161b} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .avatar-inner{color:#10161b}} .btn.avatar{padding:0} .btn.avatar .avatar-inner{width:1.75rem;height:1.75rem;font-size:12px} .alert{ display:flex;align-items:center;gap:.625rem;flex-wrap:wrap; padding:.875rem 1rem;margin-bottom:1rem; border:var(--border) solid var(--bc-10);border-radius:var(--radius-box); background:var(--color-base-100); font-size:13.5px; } .alert > span{min-width:0} .alert .btn{margin-left:auto} .alert-success{border-color:color-mix(in srgb,var(--color-success) 35%,transparent);background:color-mix(in srgb,var(--color-success) 12%,var(--color-base-100));color:var(--color-success)} .alert-info{border-color:color-mix(in srgb,var(--color-info) 35%,transparent);background:color-mix(in srgb,var(--color-info) 12%,var(--color-base-100));color:var(--color-info)} .alert-error{border-color:color-mix(in srgb,var(--color-error) 35%,transparent);background:color-mix(in srgb,var(--color-error) 12%,var(--color-base-100));color:var(--color-error)} .alert-soft{box-shadow:none} .alert:empty{display:none} .divider{display:flex;align-items:center;gap:.75rem;margin-block:1.25rem;color:var(--bc-soft);font-size:12px;font-weight:500} .divider::before,.divider::after{content:"";flex:1;height:var(--border);background:var(--bc-10)} .divider-flush{margin:0} .divider-flush::before,.divider-flush::after{flex:1} .kbd{ display:inline-flex;align-items:center;justify-content:center; min-width:1.5rem;height:1.5rem;padding-inline:.375rem; border:var(--border) solid var(--bc-20);border-bottom-width:2px; border-radius:var(--radius-field); background:var(--color-base-200);color:var(--bc-strong); font-size:11.5px;font-weight:600; } .kbd-sm{height:1.25rem;min-width:1.25rem;font-size:11px} .status{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;background:var(--bc-soft)} .status-success{background:var(--color-success)} /* --- 07 form: fieldset · input · select · toggle · checkbox - */ .fieldset{display:flex;flex-direction:column;gap:.3125rem;margin-block:.5rem} .fieldset-legend{ display:flex;align-items:center;justify-content:space-between;gap:.5rem; padding:0;font-size:13.5px;font-weight:600; } .legend-hint{color:var(--bc-soft);font-size:12px;font-weight:400} .legend-link{font-size:12.5px;font-weight:500} .fieldset-label{color:var(--bc-soft);font-size:12px;line-height:1.55} .validator-hint{display:flex;align-items:center;gap:.25rem;color:var(--color-error);font-size:12.5px;font-weight:600} .input,.textarea,.select{ display:flex;align-items:center;gap:.5rem; width:100%;height:2.25rem;padding-inline:.75rem; border:var(--border) solid var(--bc-20);border-radius:var(--radius-field); background:var(--color-base-100);color:var(--color-base-content); font-family:inherit;font-size:13.5px; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .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) 30%,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:1rem} .input-sm{height:1.875rem;padding-inline:.625rem;font-size:12.5px} input.input-sm{padding-inline:.75rem} .input-icon{display:grid;place-items:center;flex:none;color:var(--bc-soft)} .input .kbd{flex:none} .textarea{height:auto;min-height:6rem;padding:.5rem .75rem;line-height:1.65;resize:vertical;display:block} .select{ appearance:none;padding-right:2rem;cursor:pointer;display:block;line-height:2.25rem; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 1rem) 55%,calc(100% - .7rem) 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)} .label{display:flex;align-items:center;gap:.75rem;cursor:pointer} .toggle-list{gap:.5rem} .toggle-row{ padding:.75rem .875rem; border:var(--border) solid var(--bc-10);border-radius:var(--radius-field); background:var(--color-base-100); transition:border-color var(--dur) var(--ease); } .toggle-row:hover{border-color:var(--bc-20)} .toggle-row span strong{display:flex;align-items:center;gap:.375rem;font-size:13.5px;font-weight:600} .toggle-row span small{display:block;margin-top:.125rem;color:var(--bc-mid);font-size:12px} .toggle{ appearance:none;position:relative;flex:none; width:2.75rem;height:1.625rem; border:var(--border) solid var(--bc-20);border-radius:9999px; background:var(--bc-20);cursor:pointer; transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); } .toggle::after{ content:"";position:absolute;left:.1875rem;top:50%;transform:translateY(-50%); width:1.125rem;height:1.125rem;border-radius:9999px;background:#fff; box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease); } .toggle:checked{background:var(--color-primary);border-color:var(--color-primary)} .toggle-primary:checked{background:var(--color-primary)} .toggle:checked::after{transform:translate(1.125rem,-50%)} .checkbox{ appearance:none;position:relative;flex:none; width:1.25rem;height:1.25rem; border:2px solid var(--bc-20);border-radius:.3rem; background:var(--color-base-100);cursor:pointer; transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); } .checkbox::after{ content:"";position:absolute;left:50%;top:46%; width:.375rem;height:.6875rem; border:solid var(--color-primary-content);border-width:0 2px 2px 0; transform:translate(-50%,-50%) rotate(45deg) scale(0); transition:transform var(--dur) var(--ease); } .checkbox:checked{background:var(--color-primary);border-color:var(--color-primary)} .checkbox:checked::after{transform:translate(-50%,-50%) rotate(45deg) scale(1)} .checkbox-sm{width:1.125rem;height:1.125rem} .check-row{align-items:flex-start;font-size:13.5px} .check-row.is-invalid .checkbox{border-color:var(--color-error)} .consent{gap:.5rem;padding:.875rem;border-radius:var(--radius-box);background:var(--color-base-200)} .form-section{display:flex;flex-direction:column;margin-top:1.25rem;padding-top:1rem;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:.25rem;font-size:14px;font-weight:700} .form-actions{justify-content:flex-end;padding-top:1rem;margin-top:1rem;border-top:var(--border) solid var(--bc-10)} .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.5rem 1.5rem;padding:1rem 1.25rem; border:var(--border) solid color-mix(in srgb,var(--color-error) 35%,transparent); border-radius:var(--radius-box); background:color-mix(in srgb,var(--color-error) 10%,var(--color-base-100)); } .danger-zone strong{display:flex;align-items:center;gap:.375rem;font-size:13.5px;font-weight:700} .danger-zone p{margin-top:.125rem;color:var(--bc-mid);font-size:12.5px} .test-mail{margin-top:1rem} /* --- 08 join · breadcrumbs · pager -------------------------- */ .join{display:inline-flex;align-items:stretch} .join-item,.join > .btn,.join > form > .btn{border-radius:0} .join > :first-child,.join > :first-child > .btn{border-start-start-radius:var(--radius-field);border-end-start-radius:var(--radius-field)} .join > :last-child,.join > :last-child > .btn{border-start-end-radius:var(--radius-field);border-end-end-radius:var(--radius-field)} .join > :not(:first-child),.join > :not(:first-child) > .btn{margin-inline-start:calc(var(--border) * -1)} .join > .btn:hover,.join > form > .btn:hover{position:relative;z-index:1} .join-block{display:grid;grid-template-columns:repeat(3,1fr);width:100%} .breadcrumbs{margin-bottom:.875rem;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)} .breadcrumbs li + li::before{ content:"";display:block;width:.35rem;height:.35rem;margin-inline:.5rem; border-top:1.4px solid var(--bc-soft);border-right:1.4px solid var(--bc-soft); transform:rotate(45deg); } .breadcrumbs a:hover{color:var(--color-primary)} .breadcrumbs [aria-current]{color:var(--color-base-content);font-weight:600} .pager{display:flex;justify-content:center;margin-top:1.75rem} /* --- 09 table · list · stats ------------------------------- */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .table{width:100%;border-collapse:collapse;font-size:13.5px} .table thead th{ padding:.75rem 1.25rem; border-bottom:var(--border) solid var(--bc-10); color:var(--bc-mid);font-size:12px;font-weight:600;text-align:left;white-space:nowrap; } .table td{padding:.875rem 1.25rem;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:var(--color-base-200)} .table tbody tr:hover{background:var(--bc-10)} .table .right{text-align:right;white-space:nowrap} .cell-title{display:block;font-size:14px;font-weight:600} .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:3rem 1.25rem;text-align:center;color:var(--bc-mid)} .table-empty:hover{background:transparent} .list{display:flex;flex-direction:column} .list-row{ display:flex;align-items:center;gap:.75rem; padding:.875rem 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.25rem;height:2.25rem;flex:none; border-radius:var(--radius-field); background:color-mix(in srgb,var(--tone,var(--tone-0)) 15%,var(--color-base-100)); color:var(--tone,var(--tone-0)); } .list-copy{flex:1;min-width:0} .list-title{font-size:14px;font-weight:600} .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:.75rem} .fact-list .list-row{padding:.75rem 1rem;justify-content:space-between} .fact-list span{color:var(--bc-mid)} .stats{display:flex;border-radius:var(--radius-box);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(11rem,1fr));gap:1px;background:var(--bc-10);border:var(--border) solid var(--bc-10);margin-bottom:1.25rem} .stat{display:grid;gap:.125rem;padding:1.25rem;background:var(--color-base-100);position:relative} .stats-vertical > .stat + .stat{border-top:var(--border) solid var(--bc-10)} a.stat{transition:background-color var(--dur) var(--ease)} a.stat:hover{background:var(--color-base-200)} .stat-figure{ position:absolute;right:1.25rem;top:1.1rem; display:grid;place-items:center;width:2.25rem;height:2.25rem; border-radius:var(--radius-field); background:color-mix(in srgb,var(--tone,var(--color-primary)) 15%,var(--color-base-100)); color:var(--tone,var(--color-primary)); } .stat-title{color:var(--bc-mid);font-size:12.5px;font-weight:600} .stat-value{font-size:26px;font-weight:800;letter-spacing:-.03em;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:600} /* --- 10 hero · 바로가기 · carousel · 글 카드 (오늘의집) ----- */ .hero{ margin-bottom:1.5rem; background:linear-gradient(120deg,color-mix(in srgb,var(--color-primary) 14%,var(--color-base-100)),var(--color-base-100) 62%); border:var(--border) solid var(--bc-10); } .hero-content{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:2.25rem 2rem} .hero-copy{max-width:40rem;min-width:0} .hero-copy h1{margin-top:.875rem;font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.25} .hero-copy > p{margin-top:.625rem;color:var(--bc-strong);font-size:15px;line-height:1.65} .hero-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem} .hero .stats{flex:none;min-width:11rem} .shortcuts{display:flex;gap:.5rem;margin-bottom:2rem;overflow-x:auto;scrollbar-width:none} .shortcuts::-webkit-scrollbar{display:none} .shortcut{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:none;width:4.75rem} .shortcut-icon{ display:grid;place-items:center;width:3.25rem;height:3.25rem; border-radius:var(--radius-box); background:color-mix(in srgb,var(--tone,var(--color-primary)) 15%,var(--color-base-100)); color:var(--tone,var(--color-primary)); transition:transform var(--dur) var(--ease); } .shortcut:hover .shortcut-icon{transform:translateY(-2px)} .shortcut-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bc-mid);font-size:12px;font-weight:600;text-align:center} .feed{margin-top:2.25rem} .feed-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.875rem} .feed-head h2{font-size:18px;font-weight:700;letter-spacing:-.02em} .feed-sub{margin-top:.1875rem;color:var(--bc-mid);font-size:13px} .carousel{display:flex;gap:.875rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.25rem} .carousel::-webkit-scrollbar{display:none} .carousel-item{flex:none;width:15rem;scroll-snap-align:start;display:flex} .carousel-item > .card{width:100%} .card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr))} .post-card{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)} .post-cover{ position:relative;display:block;aspect-ratio:16/10;overflow:hidden;margin:0; background: radial-gradient(120% 90% at 82% 12%,color-mix(in srgb,var(--tone,var(--tone-0)) 32%,transparent),transparent 62%), color-mix(in srgb,var(--tone,var(--tone-0)) 12%,var(--color-base-200)); } .post-cover-mark{ position:absolute;right:-.25rem;bottom:-1.75rem; color:color-mix(in srgb,var(--tone,var(--tone-0)) 36%,transparent); font-size:6rem;font-weight:800;line-height:1;letter-spacing:-.06em; } .post-cover-badge{ position:absolute;left:.625rem;top:.625rem;max-width:calc(100% - 1.25rem); background:var(--color-base-100);color:var(--color-base-content); 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.5rem;height:1.5rem; border-radius:9999px;background:var(--color-base-100);color:var(--bc-mid);box-shadow:var(--shadow-1); } .post-card .card-title{ font-size:14.5px;font-weight:600;line-height:1.45; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .post-card:hover .card-title{color:var(--color-primary)} .post-meta{display:flex;align-items:center;gap:.375rem;color:var(--bc-mid);font-size:12px} .post-author{max-width:7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500} .post-stats{display:flex;align-items:center;gap:.75rem;color:var(--bc-soft);font-size:12px;font-weight:500} .post-stats span{display:inline-flex;align-items:center;gap:.25rem} .subnav{position:sticky;top:calc(var(--nav-h) + var(--tabs-h));z-index:50;background:var(--color-base-200);border-bottom:var(--border) solid var(--bc-10)} .subnav-inner{display:flex;align-items:center;gap:.75rem;min-height:3.25rem} .chip-bar{display:flex;gap:.375rem;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding-block:.5rem} .chip-bar::-webkit-scrollbar{display:none} .chip{flex:none;border-radius:9999px} .chip-radio{position:relative;gap:0;padding-inline:0} /* 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} /* 검색은 버튼과 같은 눈금(2.25rem)에 맞춘다. 입력만 크면 줄이 어긋나 보인다. */ /* 검색은 머리글의 곁들이다. 너무 넓거나 둥글면 화면의 주인공처럼 보인다. */ .header-search{display:flex;align-items:center;gap:.375rem;width:min(15rem,100%)} .header-search .input{height:2rem;padding-inline:.625rem;border-radius:var(--radius-field);background:var(--color-base-200);font-size:12.5px} .header-search .input > input{font-size:12.5px} .header-search .kbd{height:1.125rem;min-width:1.125rem;font-size:10.5px} .header-search-btn{height:1.75rem;min-height:1.75rem;padding-inline:.75rem;font-size:12px} /* 검색어는 길어야 낱말 몇 개다. 줄 끝까지 늘리지 않고 필요한 만큼만 차지한다. */ .inline-search{display:flex;gap:.5rem;margin-bottom:1rem;max-width:18rem} .inline-search .input{flex:1;min-width:0;height:2rem;padding-inline:.75rem;border-radius:var(--radius-field);font-size:12.5px} .inline-search .input > input{font-size:12.5px} .inline-search .btn{height:2rem;min-height:2rem;padding-inline:.875rem;font-size:12.5px} .filter-note{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.875rem;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:.8125rem 1.25rem} .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:600} .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.25rem} .page-head h1{font-size:22px;font-weight:800;letter-spacing:-.025em} .page-sub{margin-top:.375rem;color:var(--bc-mid);font-size:13.5px} .page-head-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .page-note{margin-top:1rem;color:var(--bc-soft);font-size:12.5px} .section-title{display:flex;align-items:center;gap:.5rem;font-size:15px;font-weight:700} /* 분류 입력: 칩으로 추가·삭제한다. 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.75rem;padding:0 .3125rem 0 .75rem; border:var(--border) solid var(--bc-20);border-radius:9999px; background:var(--color-base-100);font-size:13px;font-weight:600; } .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:600 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.25rem;padding-inline:.75rem;font-size:13px} .input[readonly]{background:var(--color-base-200);color:var(--bc-mid)} /* 관리자에게만 보이는 '이 내용 수정' 줄 */ .admin-bar{border-style:dashed} .admin-bar .btn{margin-left:auto} /* 목록 형태 전환 (목록 / 갤러리 / 매거진 / 뉴스형) */ /* 낱개 단추를 같은 간격으로 늘어놓는다 (붙여 놓으면 지금 어느 형태인지 덜 또렷하다) */ .view-switch{display:flex;gap:.375rem;margin-bottom:1rem;overflow-x:auto;scrollbar-width:none} .view-switch::-webkit-scrollbar{display:none} .view-switch .btn{flex:none;gap:.3125rem} /* 썸네일에 실제 사진이 들어갈 때 */ .post-cover-img{width:100%;height:100%;object-fit:cover;display:block} /* 매거진형·뉴스형이 함께 쓰는 가로 행 */ .post-rows .list-row{align-items:flex-start;gap:1rem;padding:1.125rem 1.25rem} .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:16/10} .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:-.015em;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.25rem} .post-rows-text .post-row-title{-webkit-line-clamp:3} .post-row-lock,.post-row-clip{display:inline-grid;place-items:center;color:var(--bc-soft);vertical-align:-.1em} /* --- 11 글 상세 · prose · chat 댓글 ------------------------- */ .read-progress{ position:fixed;left:0;top:0;z-index:80;width:100%;height:2px; background: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:1.75rem 2rem 1.25rem} .article-title{margin-top:.5rem;font-size:clamp(20px,3vw,27px);font-weight:800;letter-spacing:-.03em;line-height:1.35;display:block;overflow-wrap:anywhere} .article-summary{margin-top:.5rem;color:var(--bc-mid);font-size:14.5px} .article-writer{display:flex;align-items:center;gap:.625rem;margin-top:1.25rem} .article-writer-copy{display:grid;gap:.125rem;min-width:0} .article-writer-copy strong{font-size:13.5px;font-weight:700} .article-writer-copy time{font-size:12px} .article-back{margin-left:auto;flex:none} .article-actions-inline{display:flex;align-items:center;gap:.375rem;margin-left:auto;flex:none} /* 삭제는 저장 옆에 두되, 실수로 누르지 않게 사이를 벌린다 */ .btn-delete{margin-left:.75rem} .delete-password .input{width:11rem;height:2rem} .article-body{padding:1.75rem 2rem;font-size:15.5px;line-height:1.85} /* 읽기 좋은 줄 길이는 지키되, 제목·머리와 왼쪽 끝을 맞춘다 (가운데로 모으지 않는다) */ .article-page .article-body{max-width:46rem;margin-inline:0;width:100%} .article-files{padding:1.25rem 2rem} /* 글쓴이 줄: 이름 아래에 시간·조회·댓글이 한 줄로 이어진다 */ .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:600} .stat-inline-link:hover{text-decoration:underline} .article-actions{display:flex;justify-content:center;margin-top:1.5rem} .file-list{border:var(--border) solid var(--bc-10);border-radius:var(--radius-box)} .file-list .list-row{padding:.75rem 1rem} .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:500} .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:700;letter-spacing:-.025em;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:.2em 0 .2em 1.1em;border-left:3px solid var(--bc-20);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(0,0,0,.82); } .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.5rem;height:2.5rem; border:0;border-radius:9999px; background:rgba(255,255,255,.14);color:#fff; font-size:26px;line-height:1;cursor:pointer; } .lens-close:hover{background:rgba(255,255,255,.26)} .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.375rem;padding-left:.875rem;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:1rem; border-left-width:2px;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) 6%,transparent); } .comment-form.is-reply{ margin-left:1.75rem; border-left-color:var(--color-primary); background:color-mix(in oklch,var(--color-primary) 5%,transparent); } @media (max-width: 640px){ .comment-form.is-reply{margin-left:.75rem} .comment-form.is-editing,.comment-form.is-reply{padding:.75rem} } @media (max-width: 640px){ .comment-thread-sub{margin-left:1rem;padding-left:.625rem} .comment-thread-sub .comment-thread-sub{margin-left:0} } .chat{display:grid;grid-template-columns:auto 1fr;column-gap:.625rem;padding-block:.5rem} .chat-image{grid-row:span 2;align-self:start} .chat-header{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:13px;font-weight:700;margin-bottom:.25rem} .chat-header time{color:var(--bc-soft);font-size:11.5px;font-weight:400} .chat-lock{display:grid;place-items:center;color:var(--bc-soft)} .chat-bubble{ width:fit-content;max-width:100%; padding:.625rem .875rem; border-radius:var(--radius-box); background:var(--color-base-200);color:var(--color-base-content); font-size:14px;line-height:1.7;overflow-wrap:anywhere; } .chat-start .chat-bubble{border-start-start-radius:.25rem} @media (max-width: 480px){ .chat-image .avatar-inner,.article-writer .avatar-inner{width:1.5rem;height:1.5rem;font-size:10.5px} } .chat-removed .chat-header,.chat-removed .chat-bubble{color:var(--bc-soft)} .post-filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem} .post-filter .select{width:auto;min-width:9rem} .post-filter .input{flex:1;min-width:12rem} /* 홈 피드: 게시판 목록 형태에 따라 카드/줄 중 하나로 나온다 */ .feed-rows{margin-top:0} .feed-rows .list-row{padding:.875rem 1.125rem} .feed-rows .post-row-thumb{width:8rem} .feed-rows .post-row-title{font-size:14.5px;-webkit-line-clamp:2} .feed-lines .list-row{ display:flex;align-items:center;gap:.5rem; padding:.625rem 1.125rem;font-size:13.5px; } .feed-line-title{ flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-weight:550; } .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)} @media (max-width: 640px){ .feed-rows .post-row-thumb{width:6rem} .feed-rows .list-row,.feed-lines .list-row{padding-inline:1rem} } /* 댓글 쓰기 */ .comment-form{ display:flex;flex-direction:column;gap:.5rem; margin-top:1.25rem;padding-top:1.25rem; border-top:var(--border) solid var(--bc-10); } .comment-form .fieldset{margin-block:0} .comment-reply-to{ display:flex;align-items:center;gap:.5rem; padding:.5rem .75rem;border-radius:var(--radius-field); background:var(--color-base-200);color:var(--bc-mid);font-size:13px; } .comment-reply-to span[data-reply-name]{font-weight:700;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-form-foot .btn[data-submit]{margin-left:auto} .comment-denied{ margin-top:1.25rem;padding-top:1.25rem; border-top:var(--border) solid var(--bc-10); color:var(--bc-mid);font-size:13.5px; } .chat-footer{grid-column:2;margin-top:.25rem} .chat-footer .btn{padding-inline:.375rem;color:var(--bc-soft)} .chat-footer .btn:hover{color:var(--color-primary)} .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* --- 12 빈 화면 · 상태 · 인증 ------------------------------ */ .empty-card .card-body,.empty-inline{align-items:center;text-align:center;gap:.375rem;padding-block:3rem} .empty-card-sm .card-body,.empty-inline{padding-block:2rem} .empty-inline{display:flex;flex-direction:column} .empty-icon{ display:grid;place-items:center;width:3.25rem;height:3.25rem;margin-bottom:.5rem; border-radius:9999px;background:var(--bc-10);color:var(--bc-soft); } .empty-card .card-title{justify-content:center} .empty-card p,.empty-inline p{color:var(--bc-mid)} .empty-card .card-actions,.empty-inline .btn{justify-content:center;margin-top:.75rem} .status-card{max-width:32rem;margin:2.5rem auto;box-shadow:var(--shadow-2)} .status-card .card-body{align-items:center;text-align:center;padding:2.5rem 1.75rem} .status-card .card-title{font-size:21px;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.5rem;height:3.5rem;margin-bottom:.75rem;border-radius:9999px} .status-icon-error{background:color-mix(in srgb,var(--color-error) 15%,var(--color-base-100));color:var(--color-error)} .status-icon-success{background:color-mix(in srgb,var(--color-success) 15%,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:.625rem 1rem} .status-list strong{flex:none;color:var(--bc-mid);font-weight:600} .auth-wrap{display:flex;justify-content:center;padding-block:1.75rem 2.5rem} .auth-card{width:100%;max-width:26rem;box-shadow:var(--shadow-2)} .auth-card .card-body{padding:2rem 1.75rem} .auth-head{text-align:center;margin-bottom:.75rem} .auth-head .card-title,.auth-card-status .card-title{justify-content:center;font-size:20px} .auth-card-status .card-body{align-items:center;text-align:center} .auth-mark{ display:grid;place-items:center;width:3.25rem;height:3.25rem;margin:0 auto .75rem; border-radius:var(--radius-box);background:var(--color-primary);color:var(--color-primary-content); } .auth-mark-soft{background:color-mix(in srgb,var(--color-primary) 16%,var(--color-base-100));color:var(--color-primary)} .auth-mark-ok{background:color-mix(in srgb,var(--color-success) 16%,var(--color-base-100));color:var(--color-success)} .auth-switch{margin-top:1.25rem;text-align:center;color:var(--bc-mid);font-size:13.5px} .social-list{display:grid;gap:.5rem} .social-mark{display:grid;place-items:center;width:1.375rem;height:1.375rem;flex:none;border-radius:.35rem;background:var(--bc-10);font-size:11.5px;font-weight:700} .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} .fab{position:fixed;right:1.5rem;bottom:1.5rem;z-index:65;width:3.5rem;height:3.5rem;box-shadow:var(--shadow-3)} .to-top{ position:fixed;right:1.5rem;bottom:5.5rem;z-index:64; width:2.75rem;height:2.75rem;min-height:2.75rem; box-shadow:var(--shadow-2); } .to-top[hidden]{display:none} /* --- 13 관리 콘솔 (daisyUI drawer + menu) ------------------- */ .admin-page{background:var(--color-base-200)} /* 머리글 알림 종 */ .bell-link{position:relative} .bell-dot{ position:absolute;top:.125rem;right:.125rem; display:grid;place-items:center; min-width:1rem;height:1rem;padding-inline:.25rem; border-radius:9999px;background:var(--color-primary);color:var(--color-base-100); font-size:9.5px;font-weight:700;line-height:1; } /* 알림함 */ .notice-row{padding:0} .notice-link{display:flex;align-items:flex-start;gap:.75rem;width:100%;padding:1rem 1.25rem;color:inherit} .notice-link:hover{background:var(--color-base-200)} .notice-ico{display:grid;place-items:center;flex:none;width:2rem;height:2rem;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:700} .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-base-100)} .notice-row.is-unread .notice-text{color:var(--color-base-content)} .admin-shell{min-height:100vh} .admin-sidebar{ display:flex;flex-direction:column;gap:.75rem; width:16rem;padding:1rem .75rem; background:var(--color-base-100); border-inline-end:var(--border) solid var(--bc-10); } .admin-sidebar-head{display:flex;align-items:center;gap:.375rem} .admin-sidebar-head .brand{flex:1;min-width:0;padding-inline:.25rem} .admin-brand-copy{display:grid;min-width:0;line-height:1.3} .admin-brand-copy strong{font-size:13.5px;font-weight:700} .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-sidebar-foot{padding-top:.75rem;border-top:var(--border) solid var(--bc-10)} .admin-user{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border-radius:var(--radius-field);background:var(--color-base-200)} .admin-user-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:600} .admin-content{display:flex;flex-direction:column;min-width:0} .admin-navbar{ position:sticky;top:0;z-index:40; padding-inline:1.25rem;min-height:3.5rem; background:var(--color-base-100);border-bottom:var(--border) solid var(--bc-10); } .admin-navbar-title{font-size:14px;font-weight:700} /* 관리 화면 본문은 가운데로 모으지 않고 메뉴에 이어 왼쪽에 붙인다 */ .admin-body{flex:1;width:100%;max-width:66rem;padding:1.5rem 1.5rem 4rem;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} .drawer-lg-open > .drawer-side{ position:sticky;top:0;left:0; grid-column-start:1;grid-row-start:1; height:100dvh;visibility:visible;overflow-y:auto; display:block; } .drawer-lg-open > .drawer-side > .drawer-overlay{display:none} .drawer-lg-open > .drawer-side > .admin-sidebar{ transform:none;min-height:100dvh; width:var(--admin-side-w,16rem); 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.25rem} html[data-admin-sidebar="collapsed"] .admin-brand-copy, html[data-admin-sidebar="collapsed"] .admin-menu .menu-text, html[data-admin-sidebar="collapsed"] .admin-user-name{display:none} html[data-admin-sidebar="collapsed"] .admin-sidebar-head{flex-direction:column} 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-user{flex-direction:column;padding-inline:.125rem} 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_icon 규칙이 함께 처리한다. */ .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){ /* 링크·표 같은 다이얼로그는 CKEditor 기본 스킨이 밝은 색을 직접 박아 둔다. 다크 모드에서 화면만 어둡고 창은 하얗게 튀므로 팔레트에 맞춘다. */ :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){ .navbar-center{display:none} .drawer-button{display:inline-flex} .hide-sm{display:none!important} .subnav{position:static} .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) + 5rem)} .hero-content{padding:1.75rem 1.25rem} .hero .stats{width:100%} .grid-2,.grid-3{grid-template-columns:1fr} .card-grid{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.75rem} .carousel-item{width:min(15rem,62vw)} .post-rows .list-row{padding:1rem 1.125rem;gap:.75rem} .post-row-thumb{width:7.5rem} .post-row-title{font-size:15px} .admin-body{padding-inline:1.25rem} } @media (max-width: 640px){ .show-sm{display:flex} .card-body{padding:1.125rem} .card-head-row{padding:1.125rem} .article-head,.article-body,.article-files{padding:1.25rem 1.125rem} .comments .card-body{padding:1.25rem 1.125rem} .list-row{padding:.875rem 1.125rem} .danger-zone{margin:0 1.125rem 1.125rem} .auth-card .card-body{padding:1.5rem 1.25rem} .status-card .card-body{padding:2rem 1.25rem} .form-actions{flex-direction:column-reverse;align-items:stretch} .form-actions .btn{width:100%} .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} .comment-thread-sub{margin-left:1.25rem;padding-left:.75rem} .join-block{grid-template-columns:1fr} .join-block > :not(:first-child){margin-inline-start:0;margin-block-start:calc(var(--border) * -1)} .join-block > :first-child{border-radius:var(--radius-field) var(--radius-field) 0 0} .join-block > :last-child{border-radius:0 0 var(--radius-field) var(--radius-field)} /* 관리자 표를 카드로 접는다 */ .table,.table tbody,.table tr,.table td{display:block} .table thead{display:none} .table tbody tr{padding:1rem 1.125rem;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.5rem; color:var(--bc-soft);font-size:12px;font-weight:600;line-height:1.8; } .table .right{text-align:left} .table td.right{padding-top:.625rem} .table-empty td{padding:2.75rem 0;text-align:center} .table-empty td::before{display:none} } @media (max-width: 420px){ .brand-name{font-size:15px} .card-grid{grid-template-columns:1fr 1fr} .post-card .card-title{font-size:13.5px} .shortcut{width:4.25rem} .shortcut-icon{width:2.875rem;height:2.875rem} } /* --- 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} } @media (prefers-contrast: more){ :root{--bc-10:color-mix(in srgb,var(--color-base-content) 28%,transparent); --bc-20:color-mix(in srgb,var(--color-base-content) 45%,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,.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} .checkbox-primary:checked{background:var(--color-primary);border-color:var(--color-primary)} .social-btn{height:2.75rem;min-height:2.75rem;justify-content:center;gap:.625rem} .article{overflow:hidden} /* ============================================================= codex-preline — build-free Preline UI skin Preline의 시각 언어와 컴포넌트 패턴을 정적 CSS로 구현한다. Tailwind CDN, npm, 번들러 없이 vendor/preline/preline.js만 사용한다. ============================================================= */ :root, [data-theme="light"]{ --color-base-100:#fff; --color-base-200:#f8fafc; --color-base-300:#eef2f7; --color-base-content:#172033; --color-primary:#4f46e5; --color-primary-content:#fff; --color-secondary:#7c3aed; --color-accent:#0891b2; --color-neutral:#111827; --color-info:#2563eb; --color-success:#059669; --color-warning:#d97706; --color-error:#dc2626; --radius-field:.625rem; --radius-box:.875rem; --ui-border:#dce2eb; --wrap:76rem; --nav-h:68px; --shadow-1:0 1px 2px rgba(15,23,42,.04); --shadow-2:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04); --shadow-3:0 12px 30px rgba(15,23,42,.08); --shadow-4:0 24px 50px rgba(15,23,42,.14); } [data-theme="dark"]{ --color-base-100:#111827; --color-base-200:#0b1120; --color-base-300:#1f2937; --color-base-content:#e5e7eb; --color-primary:#818cf8; --color-primary-content:#0b1120; --color-secondary:#a78bfa; --color-accent:#22d3ee; --color-neutral:#030712; --color-info:#60a5fa; --color-success:#34d399; --color-warning:#fbbf24; --color-error:#f87171; --ui-border:#2c384b; --shadow-1:0 1px 2px rgba(0,0,0,.3); --shadow-2:0 1px 3px rgba(0,0,0,.36),0 1px 2px rgba(0,0,0,.3); --shadow-3:0 16px 34px rgba(0,0,0,.36); --shadow-4:0 28px 60px rgba(0,0,0,.5); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --color-base-100:#111827; --color-base-200:#0b1120; --color-base-300:#1f2937; --color-base-content:#e5e7eb; --color-primary:#818cf8; --color-primary-content:#0b1120; --color-secondary:#a78bfa; --color-accent:#22d3ee; --color-neutral:#030712; --color-info:#60a5fa; --color-success:#34d399; --color-warning:#fbbf24; --color-error:#f87171; --ui-border:#2c384b; } } body.theme-codex-preline{ background: radial-gradient(circle at 12% -8%,color-mix(in srgb,var(--color-primary) 10%,transparent),transparent 28rem), var(--color-base-200); font-size:14px; letter-spacing:-.012em; } /* Preline-style navigation */ .theme-codex-preline .site-header{ border-bottom:1px solid var(--bc-10); background:color-mix(in srgb,var(--color-base-100) 88%,transparent); box-shadow:0 1px 0 rgba(15,23,42,.02); backdrop-filter:blur(18px) saturate(1.3); } .theme-codex-preline .navbar{gap:1rem} .theme-codex-preline .brand{gap:.65rem} .theme-codex-preline .brand-logo{ width:2.1rem;height:2.1rem; border-radius:.65rem; background:linear-gradient(145deg,#6366f1,#4338ca); color:#fff; box-shadow:0 7px 16px rgba(79,70,229,.22); } .theme-codex-preline .brand-name{font-weight:750;letter-spacing:-.035em} .theme-codex-preline .header-tabs{border-top:1px solid var(--bc-10);background:transparent} .theme-codex-preline .tabs{gap:1.5rem} .theme-codex-preline .tab{min-height:43px;padding:0;color:var(--bc-mid);font-size:13px;font-weight:600} .theme-codex-preline .tab::after{height:2px;border-radius:99px;background:var(--color-primary)} .theme-codex-preline .tab:hover,.theme-codex-preline .tab-active{color:var(--color-primary)} .theme-codex-preline .user-menu{ margin-top:.55rem;padding:.5rem; border:1px solid var(--bc-10); border-radius:.75rem; background:var(--color-base-100); box-shadow:var(--shadow-4); } .theme-codex-preline .bell-dot{box-shadow:0 0 0 2px var(--color-base-100)} /* Surfaces and controls */ .theme-codex-preline .main-area{padding-block:clamp(1.5rem,4vw,3rem) 4.5rem} .theme-codex-preline .card{ border-color:var(--ui-border); border-radius:.875rem; background:color-mix(in srgb,var(--color-base-100) 96%,transparent); box-shadow:var(--shadow-2); } .theme-codex-preline .card:hover{border-color:color-mix(in srgb,var(--color-primary) 22%,var(--bc-10))} .theme-codex-preline .card-body{padding:1.5rem} .theme-codex-preline .card-title{letter-spacing:-.025em} .theme-codex-preline .btn{ min-height:2.5rem; padding-inline:1rem; border-radius:.625rem; font-size:13px; font-weight:650; box-shadow:none; } .theme-codex-preline .btn-sm{min-height:2.125rem;padding-inline:.75rem;font-size:12px} .theme-codex-preline .btn-lg{min-height:2.875rem;padding-inline:1.15rem} .theme-codex-preline .btn-primary{ border-color:transparent; background:#4f46e5; color:#fff; box-shadow:0 1px 2px rgba(15,23,42,.1),0 7px 15px rgba(79,70,229,.16); } .theme-codex-preline .btn-primary:hover{background:#4338ca;box-shadow:0 8px 18px rgba(79,70,229,.22);transform:translateY(-1px)} [data-theme="dark"] .theme-codex-preline .btn-primary{background:#6366f1;color:#fff} .theme-codex-preline .btn-outline{border-color:var(--bc-20);background:var(--color-base-100)} .theme-codex-preline .btn-outline:hover,.theme-codex-preline .btn-ghost:hover{background:var(--p-soft);color:var(--color-primary)} .theme-codex-preline .input,.theme-codex-preline .select,.theme-codex-preline .textarea{ min-height:2.7rem; border-color:var(--bc-20); border-radius:.625rem; background:var(--color-base-100); box-shadow:var(--shadow-1); } .theme-codex-preline .input:focus-within,.theme-codex-preline .select:focus,.theme-codex-preline .textarea:focus{ border-color:var(--color-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 14%,transparent); } .theme-codex-preline .badge{border-radius:99px;font-weight:650} .theme-codex-preline .alert{border-radius:.75rem;box-shadow:none} /* Home and community */ .theme-codex-preline .hero{ position:relative; overflow:hidden; border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--bc-10)); border-radius:1.25rem; background: radial-gradient(circle at 85% 18%,color-mix(in srgb,var(--color-accent) 22%,transparent),transparent 14rem), radial-gradient(circle at 68% 108%,color-mix(in srgb,var(--color-secondary) 20%,transparent),transparent 19rem), linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 9%,var(--color-base-100)),var(--color-base-100) 60%); box-shadow:var(--shadow-3); } .theme-codex-preline .hero::before{ content:"";position:absolute;right:-3rem;top:-4rem;width:15rem;height:15rem; border:1px solid color-mix(in srgb,var(--color-primary) 20%,transparent);border-radius:50%; } .theme-codex-preline .hero-content{position:relative;padding:clamp(2rem,5vw,4rem)} .theme-codex-preline .hero-copy h1{max-width:16em;font-size:clamp(30px,4.5vw,48px);font-weight:780;line-height:1.14} .theme-codex-preline .hero-copy>p{max-width:38rem;font-size:15px} .theme-codex-preline .hero .stats{ overflow:hidden;border:1px solid var(--bc-10);border-radius:1rem; background:color-mix(in srgb,var(--color-base-100) 80%,transparent); backdrop-filter:blur(12px);box-shadow:var(--shadow-2); } .theme-codex-preline .shortcuts{gap:.75rem;padding-block:1.5rem} .theme-codex-preline .shortcut{padding:.65rem;border:1px solid transparent;border-radius:.75rem} .theme-codex-preline .shortcut:hover{border-color:var(--bc-10);background:var(--color-base-100);box-shadow:var(--shadow-2);transform:translateY(-2px)} .theme-codex-preline .shortcut-icon{border-radius:.75rem} .theme-codex-preline .feed{margin-top:2.75rem} .theme-codex-preline .feed-head h2{font-size:20px;font-weight:750} .theme-codex-preline .post-card{border-radius:1rem} .theme-codex-preline .post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)} .theme-codex-preline .post-cover{background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 18%,var(--color-base-200)),color-mix(in srgb,var(--tone) 7%,var(--color-base-100)))} .theme-codex-preline .list-row{transition:background .14s ease} .theme-codex-preline .list-row:hover{background:color-mix(in srgb,var(--color-primary) 4%,var(--color-base-100))} /* Articles, auth, notifications */ .theme-codex-preline .article{max-width:56rem;margin-inline:auto;border-radius:1rem} .theme-codex-preline .article-head{padding:clamp(1.5rem,5vw,3rem)} .theme-codex-preline .article-title{font-size:clamp(26px,4vw,40px);line-height:1.2} .theme-codex-preline .article-body{padding:clamp(1.5rem,5vw,3rem);font-size:15px;line-height:1.85} .theme-codex-preline .auth-wrap{padding-block:clamp(2rem,7vw,5rem)} .theme-codex-preline .auth-card{max-width:29rem;border-radius:1.1rem;box-shadow:var(--shadow-3)} .theme-codex-preline .auth-card .card-body{padding:clamp(1.5rem,5vw,2.5rem)} .theme-codex-preline .auth-mark{border-radius:.8rem;background:linear-gradient(145deg,#6366f1,#4338ca);box-shadow:0 10px 22px rgba(79,70,229,.22)} .theme-codex-preline .notice-list{overflow:hidden} .theme-codex-preline .notice-row.is-unread{background:color-mix(in srgb,var(--color-primary) 7%,var(--color-base-100))} /* Preline-style admin */ .theme-codex-preline.admin-page{background:var(--color-base-200)} .theme-codex-preline .admin-navbar{ border-bottom:1px solid var(--bc-10); background:color-mix(in srgb,var(--color-base-100) 92%,transparent); backdrop-filter:blur(14px); } .theme-codex-preline .admin-sidebar{ border-right:1px solid #263247; background:#111827; color:#d1d5db; } .theme-codex-preline .admin-sidebar .brand-logo{box-shadow:none} .theme-codex-preline .admin-sidebar .admin-brand-copy strong{color:#f8fafc} .theme-codex-preline .admin-sidebar .admin-brand-copy small{color:#94a3b8} .theme-codex-preline .admin-sidebar .menu-title{color:#94a3b8} .theme-codex-preline .admin-sidebar .menu a{color:#cbd5e1;border-radius:.55rem;font-weight:550} .theme-codex-preline .admin-sidebar .menu a:hover{background:#1f2937;color:#fff} .theme-codex-preline .admin-sidebar .menu li>a.menu-active{ background:#4f46e5; color:#fff; box-shadow:0 5px 14px rgba(79,70,229,.25); } .theme-codex-preline .admin-sidebar .menu li>a.menu-active:hover{background:#4338ca;color:#fff} .theme-codex-preline .admin-sidebar .btn-ghost{ --btn-bg:transparent; --btn-fg:#cbd5e1; --btn-bd:transparent; color:#cbd5e1; } .theme-codex-preline .admin-sidebar .btn-ghost:hover{background:#1f2937;color:#fff} .theme-codex-preline .admin-sidebar-foot{border-color:#374151} .theme-codex-preline .admin-sidebar .admin-user{ border:1px solid #334155; background:#1e293b; color:#f8fafc; } .theme-codex-preline .admin-sidebar .admin-user-name{color:#f8fafc} .theme-codex-preline .admin-body{max-width:92rem;padding:clamp(1.25rem,3vw,2.5rem)} .theme-codex-preline .page-head h1{font-size:clamp(24px,3vw,31px);font-weight:760} .theme-codex-preline .stats-grid{gap:1rem} .theme-codex-preline .stats-grid .stat{border-color:var(--ui-border);border-radius:.875rem;box-shadow:var(--shadow-2)} .theme-codex-preline .stats-grid .stat:hover{border-color:color-mix(in srgb,var(--color-primary) 38%,var(--ui-border));box-shadow:var(--shadow-3);transform:translateY(-2px)} .theme-codex-preline .stat-value{letter-spacing:-.04em} .theme-codex-preline .table-wrap{border-color:var(--ui-border);border-radius:.875rem} .theme-codex-preline .table th{background:color-mix(in srgb,var(--color-base-200) 82%,var(--color-base-100));font-size:11px;letter-spacing:.035em} .theme-codex-preline .table td{padding-block:1rem} .theme-codex-preline .breadcrumbs{color:var(--bc-soft)} .theme-codex-preline .admin-body .list-row{border-color:var(--ui-border)} .theme-codex-preline .admin-body .list-row>.btn-ghost{color:var(--bc-strong)} .theme-codex-preline .admin-body .list-row>.btn-ghost:hover{background:var(--p-soft);color:var(--color-primary)} /* Footer and mobile */ .theme-codex-preline .footer{border-top:1px solid var(--bc-10);background:var(--color-base-100)} .theme-codex-preline .dock{border-top:1px solid var(--bc-10);background:color-mix(in srgb,var(--color-base-100) 92%,transparent);backdrop-filter:blur(18px)} .theme-codex-preline .drawer-panel{background:var(--color-base-100);box-shadow:var(--shadow-4)} .theme-codex-preline .to-top{box-shadow:var(--shadow-3)} @media (max-width:767px){ .theme-codex-preline .site-header{box-shadow:var(--shadow-1)} .theme-codex-preline .header-tabs{display:none} .theme-codex-preline .main-area{padding-top:1.25rem} .theme-codex-preline .hero-content{padding:2rem 1.25rem} .theme-codex-preline .hero-copy h1{font-size:30px} .theme-codex-preline .hero .stats{width:100%} .theme-codex-preline .feed{margin-top:2rem} .theme-codex-preline .card-body{padding:1.125rem} .theme-codex-preline .admin-body{padding:1rem} }