가 cover를 담당.
이중 컨테이너 충돌 방지를 위해 aspect-ratio / img 직접 스타일은 제거. */
}
.home-research__tg-img .no-auto-cover {
width: 100%;
display: block;
}
.home-research__tg-img .no-auto-cover__img {
transition: transform 0.4s ease;
}
.home-research__tg-body {
display: flex;
flex-direction: column;
gap: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
align-items: flex-start;
}
.home-research__tg-body > .ui-cta {
margin-top: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
}
.home-research__tg-name {
color: var(--clr-gray-900);
}
.home-research__tg-name a {
color: inherit;
text-decoration: none;
transition: color 0.25s ease;
}
.home-research__tg-id {
color: var(--clr-primary-700);
}
.home-research__tg-desc {
/* 본문 위계(line-height 포함)는 마크업 .no-body-sm 가 담당 (rule #17 §A). */
color: var(--clr-text-secondary);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-clamp: 3;
overflow: hidden;
}
.home-research {
/* ── panels wrapper ─────────────────────────────── */
}
.home-research__panels {
min-width: 0;
}
.home-research {
/* AOS가 hidden 속성을 무시하므로 CSS 클래스로 숨김 처리. !important 로 AOS transform/opacity 우선순위 차단. */
}
.home-research__panel--hidden {
display: none !important;
}
.home-research {
/* ── Publication panel ──────────────────────────── */
}
.home-research__pub-list {
display: flex;
flex-direction: column;
}
.home-research__pub {
display: flex;
flex-direction: column;
gap: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem);
padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
border-bottom: 1px solid var(--clr-gray-200);
}
.home-research__pub:last-child {
border-bottom: 1px solid transparent;
}
.home-research__pub-meta {
/* 위계는 마크업 .no-body-xs 담당 (rule #17 §A). */
display: flex;
flex-wrap: wrap;
gap: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem);
color: var(--clr-text-secondary);
}
.home-research__pub-year {
color: var(--clr-primary-700);
font-weight: 600;
}
.home-research__pub-sep {
color: var(--clr-gray-400);
}
.home-research__pub-title {
/* 위계는 마크업 .no-heading-xs 담당 (rule #17 §A). */
color: var(--clr-gray-900);
}
.home-research__pub-title a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
.home-research__pub-title a:hover {
color: var(--clr-primary-700);
}
.home-research__pub-doi {
/* 위계는 마크업 .no-body-xs 담당. */
color: var(--clr-text-secondary);
}
.home-research__pub-doi a {
color: var(--clr-primary-700);
text-decoration: underline;
text-underline-offset: 2px;
}
.home-research__pub-doi a:hover {
color: var(--clr-primary-900);
}
/* Research — TG Overview (2026-06-05 신설) */
.sec-tg-overview {
background: var(--clr-bg-page);
}
.sec-tg-overview__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
align-items: center;
}
@media (max-width: 768px) {
.sec-tg-overview__grid {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
}
.sec-tg-overview__copy { /* layout only — typography via .no-* utilities */ }
.sec-tg-overview__eyebrow {
color: var(--clr-primary-700);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.sec-tg-overview__heading {
color: var(--clr-text-primary);
}
.sec-tg-overview__heading::after {
content: "";
display: block;
width: 4.8rem;
height: 2px;
margin-top: var(--spacing-md);
background: var(--clr-primary-900);
}
.sec-tg-overview__body {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.sec-tg-overview__body p {
color: var(--clr-text-secondary);
}
.sec-tg-overview__media {
overflow: hidden;
border-radius: var(--radius-md);
background: var(--clr-primary-50);
}
.sec-tg-overview__diagram {
background: transparent;
}
/* Research — CP Overview + CP List (2026-06-05 신설, Rule #19) */
.sec-cp-overview {
background: var(--clr-bg-page);
}
.sec-cp-overview__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
align-items: center;
}
@media (max-width: 768px) {
.sec-cp-overview__grid {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
}
.sec-cp-overview__copy { /* layout only — typography via .no-* utilities */ }
.sec-cp-overview__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
color: var(--clr-primary-700);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.sec-cp-overview__eyebrow::before {
content: "";
display: inline-block;
width: 3px;
height: 1.2em;
background: var(--clr-primary-400);
border-radius: 2px;
flex-shrink: 0;
}
.sec-cp-overview__heading {
color: var(--clr-text-primary);
}
.sec-cp-overview__heading::after {
content: "";
display: block;
width: 4.8rem;
height: 2px;
margin-top: var(--spacing-md);
background: var(--clr-primary-900);
}
.sec-cp-overview__body {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
max-width: 54ch;
}
.sec-cp-overview__body p {
color: var(--clr-text-secondary);
}
.sec-cp-overview__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-lg);
}
@media (max-width: 544px) {
.sec-cp-overview__stats {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
}
.sec-cp-overview__stat {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
padding-top: var(--spacing-md);
border-top: 2px solid var(--clr-primary-100);
}
.sec-cp-overview__stat-value {
color: var(--clr-primary-900);
line-height: 1;
}
.sec-cp-overview__stat-label {
color: var(--clr-text-secondary);
}
.sec-cp-overview__media {
overflow: hidden;
border-radius: var(--radius-md);
background: var(--clr-primary-50);
}
.sec-cp-overview__diagram {
background: transparent;
}
.sec-cp-list {
background: var(--clr-base-white);
}
.sec-cp-list__head {
border-top: 1px solid var(--clr-gray-300);
padding-top: var(--spacing-xl);
}
.sec-cp-list__eyebrow {
color: var(--clr-accent-500);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.sec-cp-list__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: var(--spacing-3xl);
row-gap: var(--spacing-2xl);
}
@media (max-width: 768px) {
.sec-cp-list__list {
grid-template-columns: 1fr;
}
}
.sec-cp-list__item {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--spacing-xl);
align-items: start;
}
@media (max-width: 544px) {
.sec-cp-list__item {
grid-template-columns: 1fr;
}
}
.sec-cp-list__media {
display: block;
aspect-ratio: 1/1;
overflow: hidden;
background: var(--clr-gray-100);
}
.sec-cp-list__media img,
.sec-cp-list__media .no-auto-cover {
width: 100%;
height: 100%;
}
.sec-cp-list__media .no-auto-cover__img {
object-fit: cover;
transition: transform 0.4s ease;
}
.sec-cp-list__media:hover .no-auto-cover__img {
transform: scale(1.04);
}
.sec-cp-list__body {
color: var(--clr-text-primary);
}
.sec-cp-list__body p {
color: var(--clr-text-secondary);
}
.sec-cp-list__item-eyebrow {
color: var(--clr-primary-700);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.sec-cp-list__item-title {
color: var(--clr-text-primary);
}
.sec-cp-list__item-id {
color: var(--clr-primary-700);
font-weight: 700;
}
.sec-cp-list__item-name {
color: var(--clr-text-primary);
}
/* Search (2026-06-05 신설 — search-bar 섹션 추출, Rule #19) */
/* ===================================================
sec-search-bar — 검색 결과 페이지 재검색 바
View: resources/views/sections/search/search-bar.php
Rule #17 — layout/border/shadow 만. font·spacing 는 유틸 또는 토큰만.
=================================================== */
.sec-search-bar__form {
display: flex;
align-items: center;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
padding: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem) clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem) clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-round);
background: var(--clr-base-white);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
transition: border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart);
}
.sec-search-bar__form:focus-within {
border-color: var(--clr-primary-900);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-brand-primary) 8%, transparent);
}
.sec-search-bar__form .ui-search-input {
flex: 1;
min-width: 0;
}
@media (max-width: 544px) {
.sec-search-bar__form {
flex-direction: column;
align-items: stretch;
border-radius: var(--radius-md);
}
.sec-search-bar__form .ui-cta {
justify-content: center;
}
}
/* Learning — callout text band (2026-06-05 신설, Rule #19) */
.sec-callout-text-band {
background: var(--clr-primary-50);
padding: clamp(5.6rem, 2.5889967638vw + 4.6291262136rem, 9.6rem) 0;
text-align: center;
}
.sec-callout-text-band__text {
max-width: 76rem;
margin: 0 auto;
color: var(--clr-text-primary);
line-height: 1.85;
}
.sec-callout-text-band--bg-white {
background: #fff;
}
/* Research — 사이드컬럼 Resources (2026-06-05 신설, sitemap §3.2) */
/* ===================================================
sec-research-side — Research 섹션 사이드컬럼
sitemap §3.2 "Side column (supporting assets)" 구현
=================================================== */
.sec-research-side {
padding: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
background: #fff;
}
.sec-research-side__label {
display: block;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--clr-text-secondary);
padding-bottom: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
margin-bottom: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
border-bottom: 1px solid var(--clr-gray-200);
}
.sec-research-side__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.sec-research-side__item {
border-bottom: 1px solid var(--clr-gray-100);
}
.sec-research-side__item:last-child {
border-bottom: none;
}
.sec-research-side__link {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) 0;
text-decoration: none;
color: inherit;
transition: color 0.2s ease;
}
.sec-research-side__link:hover .sec-research-side__link-label, .sec-research-side__link:focus-visible .sec-research-side__link-label {
color: var(--clr-primary-700);
}
.sec-research-side__link.is-active .sec-research-side__link-label {
color: var(--clr-primary-700);
font-weight: 700;
}
.sec-research-side__link-label {
font-weight: 600;
color: var(--clr-text-primary);
line-height: 1.4;
transition: color 0.2s ease;
}
.sec-research-side__link-desc {
color: var(--clr-text-secondary);
line-height: 1.5;
}
/* Research — OA-SDL 개요 섹션 (2026-06-05 신설, 밝은 배경) */
/* ===================================================
sec-oasdl-overview — OA-SDL 상단 개요 섹션
밝은 배경 + stat bar + 2컬럼 소개
=================================================== */
.sec-oasdl-overview {
background: var(--clr-bg-page);
padding: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem) 0;
}
.sec-oasdl-overview__stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
list-style: none;
padding: 0;
margin: 0;
border-top: 2px solid var(--clr-primary-900);
border-bottom: 1px solid var(--clr-gray-200);
}
@media (max-width: 768px) {
.sec-oasdl-overview__stats {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 544px) {
.sec-oasdl-overview__stats {
grid-template-columns: repeat(2, 1fr);
}
}
.sec-oasdl-overview__stat {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
border-right: 1px solid var(--clr-gray-200);
}
.sec-oasdl-overview__stat:last-child {
border-right: none;
}
@media (max-width: 768px) {
.sec-oasdl-overview__stat:nth-child(3) {
border-right: none;
}
.sec-oasdl-overview__stat:nth-child(4) {
border-right: 1px solid var(--clr-gray-200);
}
}
@media (max-width: 544px) {
.sec-oasdl-overview__stat:nth-child(2n) {
border-right: none;
}
.sec-oasdl-overview__stat:nth-child(2n+1):not(:last-child) {
border-right: 1px solid var(--clr-gray-200);
}
}
.sec-oasdl-overview__stat-value {
color: var(--clr-primary-900);
font-weight: 700;
line-height: 1;
}
.sec-oasdl-overview__stat-label {
font-weight: 600;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--clr-text-secondary);
}
.sec-oasdl-overview__grid {
display: grid;
grid-template-columns: 4fr 6fr;
gap: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
align-items: start;
}
@media (max-width: 768px) {
.sec-oasdl-overview__grid {
grid-template-columns: 1fr;
gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
}
.sec-oasdl-overview__eyebrow {
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--clr-primary-700);
}
.sec-oasdl-overview__bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
}
.sec-oasdl-overview__bullet-item {
display: flex;
align-items: baseline;
gap: 0.8rem;
color: var(--clr-text-primary);
line-height: 1.6;
}
.sec-oasdl-overview__bullet-item::before {
content: "";
display: inline-block;
flex-shrink: 0;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
background: var(--clr-primary-700);
margin-top: 0.1em;
}
.sec-oasdl-overview__body p {
color: var(--clr-text-secondary);
line-height: 1.8;
}
.sec-oasdl-overview__actions {
display: flex;
gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
flex-wrap: wrap;
}
.no-visual {
position: relative;
overflow: hidden;
padding: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem) clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem) 0;
display: flex;
flex-direction: column;
height: 90svh;
}
@media (max-width: 1920px) {
.no-visual {
padding: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem) clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem) 20rem;
height: auto;
}
}
@media (max-width: 768px) {
.no-visual {
height: auto;
padding-bottom: clamp(8rem, 7.7669902913vw + 5.0873786408rem, 20rem);
}
}
.no-visual .title-txt {
--slogan-gap: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2rem);
--brand-offset: 0px;
--brand-gap: 0px;
display: flex;
flex-direction: column;
}
.no-visual .title-txt .line-mask {
display: block;
overflow: hidden;
padding-bottom: clamp(0.5rem, 0.9708737864vw + 0.1359223301rem, 2rem);
}
.no-visual .title-txt .line-mask h2 {
font-size: var(--display-xl-fs);
}
@media (max-width: 1920px) {
.no-visual .title-txt .line-mask h2 {
font-size: var(--display-xl-fs);
}
}
.no-visual .title-txt .slogan-line {
display: inline-block;
will-change: transform, padding-left;
}
.no-visual .title-txt .slogan-brand {
padding-left: calc(var(--brand-offset) + var(--brand-gap));
}
.no-visual .title-txt .img-reveal {
display: flex;
align-items: center;
position: relative;
}
.no-visual .title-txt .img-box {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 100%;
overflow: hidden;
will-change: width;
border-radius: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
display: flex;
}
.no-visual .title-txt .img-box img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.no-visual .sub-title-txt {
display: flex;
flex-direction: column;
margin-top: clamp(3rem, 3.2362459547vw + 1.786407767rem, 8rem);
}
.no-visual .sub-title-txt p {
margin-left: auto;
font-size: var(--heading-sm-fs);
}
.no-visual .scroll-down {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 4rem;
color: #666;
transition: color 0.3s, gap 0.45s;
display: flex;
align-items: center;
gap: 0.2rem;
}
@media (max-width: 768px) {
.no-visual .scroll-down {
display: none;
}
}
.no-visual .scroll-down:hover {
color: #000;
gap: 0.8rem;
}
.no-visual--hero {
height: 100svh;
padding: 0;
}
.no-visual--hero .no-visual__bg {
position: absolute;
inset: 0;
background-image: url("/assets/images/home-hero.jpg");
background-size: cover;
background-position: center;
z-index: 0;
}
.no-visual--hero .no-visual__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%);
z-index: 1;
}
.no-visual--hero .no-visual__body {
position: relative;
z-index: 2;
margin-top: auto;
padding: 0 clamp(2.4rem, 3.6245954693vw + 1.040776699rem, 8rem) clamp(6rem, 2.5889967638vw + 5.0291262136rem, 10rem);
}
.no-visual--hero .no-visual__body .title-txt .line-mask .no-visual__headline {
color: #fff;
font-size: var(--display-xl-fs);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
}
.no-visual--hero .scroll-down {
color: rgba(255, 255, 255, 0.7);
z-index: 2;
}
.no-visual--hero .scroll-down:hover {
color: #fff;
}
.no-show {
position: relative;
overflow: hidden;
}
.no-show figure {
display: flex;
position: relative;
overflow: hidden;
aspect-ratio: 16/9;
margin: 0 clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
border-radius: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
@media (max-width: 1024px) {
.no-show figure {
aspect-ratio: auto;
height: 100%;
}
}
.no-show figure video {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transform-origin: 50% 50%;
}
/* HOME — Our People · Latest News · Events · Research
* 4개 BEM 블록 정의는 sections/_sec-home-{people-grid,news-bento,events-bento,research-tg-list}.scss
* 4개 파일로 추출 (2026-05-31, 절대규칙 #19).
*/
/* =====================================================
EXISTING — no-projects
===================================================== */
.no-projects {
position: relative;
}
.no-projects .inner {
padding: 0 clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
.no-projects h2 {
position: relative;
width: max-content;
margin: 0 auto;
}
.no-projects h2 .count {
position: absolute;
right: -4rem;
top: -0.5rem;
padding: clamp(0.5rem, 0.3236245955vw + 0.3786407767rem, 1rem) clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2rem);
font-size: var(--heading-xs-fs);
background-color: var(--clr-primary-400);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
font-weight: 600;
border-radius: 5.5rem;
transform-origin: center center;
overflow: hidden;
z-index: 2;
}
@media (max-width: 544px) {
.no-projects h2 .count {
right: -2rem;
top: -1.5rem;
}
}
.no-projects .projects-wrap {
position: relative;
display: flex;
gap: 4.8rem;
align-items: flex-start;
}
@media (max-width: 768px) {
.no-projects .projects-wrap {
gap: 3.2rem;
flex-direction: column;
align-items: stretch;
margin-top: clamp(3.2rem, 6.213592233vw + 0.8699029126rem, 12.8rem);
}
}
.no-projects .projects-wrap .sticky-wrap {
position: sticky;
top: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem);
height: fit-content;
width: min(clamp(20rem, 18.1229773463vw + 13.2038834951rem, 48rem), 22%);
min-width: clamp(20rem, 18.1229773463vw + 13.2038834951rem, 48rem);
align-self: flex-start;
}
@media (max-width: 768px) {
.no-projects .projects-wrap .sticky-wrap {
position: relative;
width: 100%;
top: 0;
}
}
.no-projects .projects-wrap .filter-box {
position: relative;
width: 100%;
align-self: flex-start;
background-color: #fff;
padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.8rem);
border-radius: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
@media (max-width: 768px) {
.no-projects .projects-wrap .filter-box.is-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
border-radius: 0;
z-index: 40;
}
}
@media (max-width: 768px) {
.no-projects .projects-wrap .filter-box .count {
text-align: center;
font-size: var(--heading-xs-fs);
}
}
.no-projects .projects-wrap .filter-box .no-filter-search {
position: relative;
}
.no-projects .projects-wrap .filter-box .no-filter-search .icon {
position: absolute;
left: 2rem;
top: 51%;
transform: translateY(-50%);
cursor: auto;
color: #999;
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
.no-projects .projects-wrap .filter-box .no-filter-search input {
width: 100%;
height: clamp(4.6rem, 0.2588996764vw + 4.5029126214rem, 5rem);
border: 2px solid #aaa;
border-radius: 5.5rem;
padding: 13px 42px 13px 46px;
font-size: var(--body-sm-fs);
font-weight: 400;
outline: none;
transition: border-color 0.2s ease;
}
@media (max-width: 768px) {
.no-projects .projects-wrap .filter-box .no-filter-search input {
border-width: 1px;
}
}
.no-projects .projects-wrap .filter-box .no-filter-search input::placeholder {
color: #999;
font-weight: 500;
}
.no-projects .projects-wrap .filter-box .no-filter-search input:focus {
border-color: var(--clr-primary-500);
}
.no-projects .projects-wrap .filter-box .no-filter-group {
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.no-projects .projects-wrap .filter-box .no-filter-group {
display: none;
}
}
.no-projects .projects-wrap .filter-box .no-filter-group .list {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.no-projects .projects-wrap .filter-box .no-filter-group .list button {
border: 1px solid rgba(0, 0, 0, 0.36);
border-radius: 999px;
color: rgba(0, 0, 0, 0.36);
font-size: var(--body-sm-fs);
font-weight: 500;
line-height: 1;
padding: clamp(0.5rem, 0.1294498382vw + 0.4514563107rem, 0.7rem) clamp(0.9rem, 0.3236245955vw + 0.7786407767rem, 1.4rem);
transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.no-projects .projects-wrap .filter-box .no-filter-group .list button:hover {
border-color: #000;
color: #000;
}
.no-projects .projects-wrap .filter-box .no-filter-group .list button.active {
color: #000;
border-color: #000;
font-weight: 500;
}
.no-projects .projects-wrap .filter-box .no-filter-actions {
display: flex;
gap: 1rem;
}
@media (max-width: 768px) {
.no-projects .projects-wrap .filter-box .no-filter-actions {
margin-top: 1.2rem;
}
}
.no-projects .projects-wrap .filter-box .no-filter-actions button {
border-radius: 5.5rem;
padding: 1.4rem 0.8rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-size: var(--body-sm-fs);
transition: border 0.3s, background-color 0.3s;
}
.no-projects .projects-wrap .filter-box .no-filter-actions .reset {
width: 30%;
border: 1px solid #aaa;
background-color: #fff;
}
@media (max-width: 768px) {
.no-projects .projects-wrap .filter-box .no-filter-actions .reset {
width: 25%;
}
}
@media (max-width: 375px) {
.no-projects .projects-wrap .filter-box .no-filter-actions .reset {
display: none;
}
}
.no-projects .projects-wrap .filter-box .no-filter-actions .reset:hover {
border-color: #000;
}
.no-projects .projects-wrap .filter-box .no-filter-actions .category {
width: 30%;
border: 1px solid #aaa;
background-color: #fff;
display: none;
}
@media (max-width: 768px) {
.no-projects .projects-wrap .filter-box .no-filter-actions .category {
width: 25%;
display: flex;
}
}
@media (max-width: 375px) {
.no-projects .projects-wrap .filter-box .no-filter-actions .category {
width: 50%;
}
}
.no-projects .projects-wrap .filter-box .no-filter-actions .category:hover {
border-color: #000;
}
.no-projects .projects-wrap .filter-box .no-filter-actions .submit {
width: 70%;
background-color: #000;
color: #fff;
}
@media (max-width: 768px) {
.no-projects .projects-wrap .filter-box .no-filter-actions .submit {
width: 50%;
}
}
.no-projects .projects-wrap .filter-box .no-filter-actions .submit:hover {
background-color: var(--clr-primary-400);
}
.no-projects .projects-wrap .filter-mobile-wrap {
position: fixed;
inset: 0px;
z-index: 99999;
display: none;
pointer-events: none;
}
.no-projects .projects-wrap .filter-mobile-wrap.is-open {
display: block;
pointer-events: auto;
}
.no-projects .projects-wrap .filter-mobile-wrap .overlay {
position: absolute;
inset: 0px;
background: rgba(0, 0, 0, 0.4);
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
background: #fff;
border-radius: 2rem 2rem 0px 0px;
padding: 2rem;
max-height: 80vh;
overflow-y: auto;
display: flex;
flex-direction: column;
z-index: 2;
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .top-group {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-bottom: 1rem;
}
@media (max-width: 375px) {
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .top-group {
align-items: center;
}
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .top-group p {
font-size: var(--body-lg-fs);
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .top-group .close {
cursor: pointer;
font-size: var(--body-lg-fs);
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group {
position: relative;
margin-top: 2rem;
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group h3 {
font-size: var(--body-md-fs);
margin-bottom: 1.2rem;
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group .list {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group .list button {
border: 1px solid rgba(0, 0, 0, 0.36);
border-radius: 999px;
color: rgba(0, 0, 0, 0.36);
font-size: var(--body-sm-fs);
font-weight: 500;
line-height: 1;
padding: 1rem 1.6rem;
transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group .list button:hover {
border-color: #000;
color: #000;
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group .list button.active {
color: #000;
border-color: #000;
font-weight: 500;
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions {
display: flex;
gap: 1rem;
padding-top: 2rem;
padding-bottom: 1.2rem;
border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions button {
border-radius: 5.5rem;
padding: 1.4rem 0.8rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-size: var(--body-sm-fs);
transition: border 0.3s, background-color 0.3s;
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions .reset {
width: 50%;
border: 1px solid #aaa;
background-color: #fff;
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions .reset:hover {
border-color: #000;
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions .submit {
width: 50%;
background-color: #000;
color: #fff;
}
.no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions .submit:hover {
background-color: #222;
}
.no-projects .projects-wrap .projects-list {
flex: 1 1 0%;
min-width: 0px;
width: 100%;
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4.8rem 2.4rem;
}
@media (max-width: 1920px) {
.no-projects .projects-wrap .projects-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.no-projects .projects-wrap .projects-list {
grid-template-columns: repeat(1, 1fr);
}
}
@media (max-width: 768px) {
.no-projects .projects-wrap .projects-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
.no-projects .projects-wrap .projects-list {
grid-template-columns: repeat(1, 1fr);
gap: 2.4rem;
}
}
.no-projects .projects-wrap .projects-list li.no-projects-empty {
grid-column: 1/-1;
display: grid;
place-items: center;
padding: 7.2rem 0;
width: 100%;
text-align: center !important;
}
.no-projects .projects-wrap .projects-list li.no-projects-empty .no-projects-empty__inner {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.8rem;
margin: 0 auto;
}
.no-projects .projects-wrap .projects-list li.no-projects-empty .no-projects-empty__icon {
width: 6.4rem;
height: 6.4rem;
border: 2px solid #d9d9d9;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #b7b7b7;
font-size: var(--heading-lg-fs);
line-height: 1;
}
.no-projects .projects-wrap .projects-list li.no-projects-empty .no-projects-empty__text {
color: #5a5a5a;
font-size: var(--heading-xs-fs);
font-weight: 500;
line-height: 1.35;
text-align: center !important;
}
@media (max-width: 768px) {
.no-projects .projects-wrap .projects-list li.no-projects-empty {
padding: 4.8rem 0;
}
.no-projects .projects-wrap .projects-list li.no-projects-empty .no-projects-empty__inner {
gap: 2rem;
}
.no-projects .projects-wrap .projects-list li.no-projects-empty .no-projects-empty__text {
font-size: var(--body-lg-fs);
}
}
.no-projects .projects-wrap .projects-list li a {
position: relative;
}
.no-projects .projects-wrap .projects-list li a figure {
display: flex;
overflow: hidden;
aspect-ratio: 16/9;
border-radius: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
position: relative;
}
.no-projects .projects-wrap .projects-list li a figure svg {
position: absolute;
width: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
height: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
right: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2rem);
bottom: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2rem);
z-index: 2;
background-color: #333;
border-radius: 50%;
transition: background-color 0.3s, transform 0.45s;
}
.no-projects .projects-wrap .projects-list li a figure svg path {
fill: #fff;
}
.no-projects .projects-wrap .projects-list li a figure img {
transition: transform 0.45s;
}
.no-projects .projects-wrap .projects-list li a .f-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.2rem;
}
.no-projects .projects-wrap .projects-list li a .f-wrap .category-list {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.no-projects .projects-wrap .projects-list li a .f-wrap .category-list li {
border-radius: 5.5rem;
align-items: center;
justify-content: center;
padding: clamp(0.4rem, 0.0647249191vw + 0.3757281553rem, 0.5rem) clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
color: #666;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.no-projects .projects-wrap .projects-list li a:hover figure svg {
background-color: var(--clr-primary-400);
transform: rotate(180deg);
}
.no-projects .projects-wrap .projects-list li a:hover figure img {
transform: scale(1.05);
}
.no-projects .projects-wrap .projects-modal-wrap {
position: fixed;
inset: 0px;
z-index: 99999;
pointer-events: none;
}
.no-projects .projects-wrap .projects-modal-wrap.is-open {
pointer-events: auto;
}
.no-projects .projects-wrap .projects-modal-wrap.is-open .overlay {
opacity: 1;
}
.no-projects .projects-wrap .projects-modal-wrap.is-open .projects-modal-box {
transform: translateY(0%);
opacity: 1;
}
.no-projects .projects-wrap .projects-modal-wrap .overlay {
position: absolute;
inset: 0px;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.35s ease;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
background: #fff;
max-width: 164rem;
margin: 0 auto;
transition: 0.3s ease-in-out;
border-radius: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem) clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem) 0px 0px;
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
z-index: 2;
opacity: 0;
transform: translateY(100%);
transition: transform 0.35s ease, opacity 0.35s ease;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0 clamp(1.5rem, 4.2071197411vw - 0.0776699029rem, 8rem);
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box::-webkit-scrollbar {
display: none;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-close {
position: sticky;
top: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
right: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
align-self: flex-end;
min-width: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem);
min-height: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem);
border-radius: 50%;
background: #ebebeb;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--body-lg-fs);
transition: border-color 0.25s ease, background-color 0.25s ease;
z-index: 4;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-close:hover {
background-color: #dfdfdf;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2rem);
padding: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem) 0 0;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .category-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.8rem;
justify-content: center;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .category-list li {
background: #f7f7f7;
color: #666;
border-radius: 5.5rem;
font-size: var(--body-sm-fs);
padding: clamp(0.4rem, 0.1941747573vw + 0.327184466rem, 0.7rem) clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap {
width: 100%;
margin-top: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
position: relative;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap iframe {
width: 100%;
min-height: 60svh;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap iframe {
min-height: 80svh;
}
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap .site-direct-link {
position: absolute;
left: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2rem);
bottom: clamp(2rem, 0.6472491909vw + 1.7572815534rem, 3rem);
z-index: 2;
border-radius: 5.5rem;
padding: 1.1rem 1.6rem;
line-height: 1;
color: #fff;
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(2px);
transition: background-color 0.25s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap .site-direct-link i {
color: #fff;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap .site-direct-link:hover {
background: var(--clr-primary-500);
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-footer {
padding: clamp(3rem, 0.6472491909vw + 2.7572815534rem, 4rem) 0 clamp(4rem, 1.2944983819vw + 3.5145631068rem, 6rem);
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-footer .modal-nav {
width: 4.4rem;
height: 4.4rem;
border-radius: 50%;
background-color: #eee;
color: #333;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--body-lg-fs);
transition: background-color 0.25s ease;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-footer .modal-nav:hover {
background-color: #d9d9d9;
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-footer .inquiry-btn {
min-width: clamp(19rem, 9.7087378641vw + 15.359223301rem, 34rem);
border-radius: 5.5rem;
padding: 1.6rem 2.4rem;
text-align: center;
line-height: 1;
transition: background-color 0.3s;
color: #fff;
background-color: var(--clr-primary-400);
}
.no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-footer .inquiry-btn:hover {
background-color: var(--clr-primary-800);
}
@keyframes pinRipple {
0% {
transform: scale(0.8);
opacity: 0.3;
}
100% {
transform: scale(1.7);
opacity: 0;
}
}
@media (max-width: 768px) {
.no-sub section {
padding-top: 2rem;
}
}
.store-pin-ripple {
position: absolute;
width: 3.6rem;
height: 3.6rem;
border-radius: 50%;
background: var(--clr-primary-500);
pointer-events: none;
animation: pinRipple 2s ease-out infinite;
}
.verify {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.verify.is-open {
display: flex;
}
.verify .backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.28);
}
.verify .dialog {
position: relative;
z-index: 1;
width: min(69.4rem, 100% - 3.2rem);
min-height: clamp(46rem, 10.7443365696vw + 41.9708737864rem, 62.6rem);
margin: 0;
padding: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem);
border-radius: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem);
background: var(--clr-base-white);
color: var(--clr-base-black);
}
.verify .dialog > h3 {
margin-bottom: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem);
}
.verify .dialog > p {
color: var(--clr-base-black);
}
.verify .dialog > p + p {
margin-top: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
}
.verify .close {
position: absolute;
top: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
right: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
width: 2.8rem;
height: 2.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--body-lg-fs);
color: var(--clr-base-black);
}
.verify .close:hover {
color: var(--clr-primary-500);
}
.verify .row {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(12.8rem, 1.0355987055vw + 12.4116504854rem, 14.4rem);
gap: 0.8rem;
margin-top: clamp(3.6rem, 0.2588996764vw + 3.5029126214rem, 4rem);
}
@media (max-width: 544px) {
.verify .row {
grid-template-columns: 1fr;
}
}
.verify .code {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
min-height: clamp(4.4rem, 0.2588996764vw + 4.3029126214rem, 4.8rem);
padding: 0 clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
border: 1px solid rgba(0, 0, 0, 0.28);
border-radius: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem);
}
.verify .input {
min-width: 0;
width: 100%;
color: var(--clr-base-black);
}
.verify .timer {
color: rgba(0, 0, 0, 0.48);
}
.verify .msg {
margin-top: 0.8rem;
color: #c0392b;
}
.verify .msg.--ok {
color: #1a7f4b;
}
.verify .resend,
.verify .submit {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem);
background: var(--clr-base-black);
color: var(--clr-base-white);
transition: background-color var(--tran-3), color var(--tran-3);
}
.verify .resend:hover,
.verify .submit:hover {
background: var(--clr-primary-500);
color: var(--clr-base-white);
}
.verify .resend {
min-height: clamp(4.4rem, 0.2588996764vw + 4.3029126214rem, 4.8rem);
padding-inline: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
}
.verify .submit {
position: absolute;
left: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem);
right: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem);
bottom: clamp(2.8rem, 0.3883495146vw + 2.654368932rem, 3.4rem);
min-height: clamp(5.8rem, 0.3883495146vw + 5.654368932rem, 6.4rem);
border-radius: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
background: rgba(7, 2, 16, 0.96);
color: var(--clr-secondary-500);
}
.verify .submit:hover {
background: var(--clr-secondary-500);
color: var(--clr-base-black);
border: 2px solid var(--clr-base-black);
}
.is-email-verify-open {
overflow: hidden;
}
.subpage {
position: relative;
isolation: isolate;
}
.subpage > .cont {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(16rem, 0.2fr) minmax(0, 1fr);
align-items: start;
gap: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem);
}
.subpage .tree.img {
position: absolute;
bottom: -1.5%;
right: -1%;
z-index: 0;
width: clamp(48rem, 28.4789644013vw + 37.3203883495rem, 92rem);
aspect-ratio: auto;
margin: 0;
border-radius: 0;
pointer-events: none;
user-select: none;
}
.subpage .tree.img img {
height: 100%;
}
.subpage > .cont > .side {
position: sticky;
top: calc(var(--header-height) + clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem));
align-self: start;
}
.subpage > .cont > .side > .side-title {
margin-bottom: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
font-size: clamp(2.2rem, 0.6472491909vw + 1.9572815534rem, 3.2rem);
}
.subpage > .cont > .side > .tabs {
border-left: 0.3rem solid color-mix(in srgb, var(--clr-base-black) 8%, transparent);
}
.subpage > .cont > .side > .tabs > .list {
margin: 0;
padding: 0;
}
.subpage > .cont > .side > .tabs > .list > .item > .link {
position: relative;
display: block;
padding: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem) 0 clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem) clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
color: var(--clr-text-sub);
font-size: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2rem);
line-height: 1.41;
transition: border-color 0.2s ease, color 0.2s ease;
}
.subpage > .cont > .side > .tabs > .list > .item > .link:hover, .subpage > .cont > .side > .tabs > .list > .item > .link:focus-visible, .subpage > .cont > .side > .tabs > .list > .item > .link.is-active {
border-left-color: var(--clr-primary-500);
color: var(--clr-primary-700);
font-weight: 700;
}
.subpage > .cont > .side > .tabs > .list > .item > .link.is-active::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -0.3rem;
width: 0.3rem;
height: 80%;
background-color: var(--clr-ui-main);
content: "";
}
.subpage > .cont > .side > .tabs > .list > .item:first-child > .link {
padding-top: 0;
font-size: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2rem);
}
.subpage > .cont > .side > .tabs > .list > .item:last-child > .link {
padding-bottom: 0;
}
.subpage > .cont > .main {
min-width: 0;
}
.subpage > .cont > .main > .head {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.subpage > .cont > .main > .head .lead {
margin-top: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
color: var(--clr-base-black);
}
.subpage > .cont > .main > .head .lead span {
color: var(--clr-ui-main);
}
.subpage > .cont > .main > .head > .breadcrumb {
position: relative;
justify-content: flex-end;
gap: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
color: var(--clr-base-black);
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
}
.subpage > .cont > .main > .head > .breadcrumb .home {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem);
height: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem);
flex: 0 0 auto;
color: var(--clr-base-black);
}
.subpage > .cont > .main > .head > .breadcrumb .home img {
display: block;
width: 100%;
height: 100%;
}
.subpage > .cont > .main > .head > .breadcrumb .section-link {
color: var(--clr-base-black);
}
.subpage > .cont > .main > .head > .breadcrumb .section-link:hover, .subpage > .cont > .main > .head > .breadcrumb .section-link:focus-visible {
color: var(--clr-ui-main);
text-decoration-color: currentColor;
}
.subpage > .cont > .main > .head > .breadcrumb .ui-breadcrumb__sep {
width: 0.4rem;
height: 0.4rem;
margin: 0;
background-color: var(--clr-base-black);
opacity: 1;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-dropdown {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-dropdown.is-open {
z-index: 3;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-dropdown.is-open .breadcrumb-chevron {
transform: rotate(180deg);
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-current {
display: inline-flex;
align-items: center;
gap: 0.8rem;
min-height: clamp(2.4rem, 0.3883495146vw + 2.254368932rem, 3rem);
padding: 0;
border: 0;
appearance: none;
background: transparent;
color: var(--clr-base-black);
font-family: inherit;
white-space: nowrap;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-current > span {
color: inherit;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-current[aria-controls] {
cursor: pointer;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-current:focus-visible {
border-radius: 0.2rem;
outline: 0.2rem solid var(--clr-ui-main);
outline-offset: 0.4rem;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-chevron {
display: block;
width: 1.4rem;
height: 1.4rem;
flex: 0 0 auto;
color: color-mix(in srgb, var(--clr-base-black) 42%, transparent);
transition: transform 0.2s ease;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-chevron path {
stroke-width: 1.5;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-menu {
position: absolute;
top: calc(100% + 1.2rem);
right: 0;
z-index: 50;
overflow-y: auto;
width: max-content;
min-width: 20rem;
max-width: calc(100vw - 4rem);
max-height: min(30rem, 100svh - 12rem);
margin: 0;
padding: 0.8rem;
border: 0.1rem solid color-mix(in srgb, var(--clr-base-black) 10%, transparent);
border-radius: 1rem;
background-color: var(--clr-base-white);
box-shadow: 0 1.2rem 3.2rem color-mix(in srgb, var(--clr-base-black) 14%, transparent);
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-menu[hidden] {
display: none;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-menu-link {
display: block;
padding: 0.9rem 1.2rem;
border-radius: 0.6rem;
color: var(--clr-base-black);
text-align: left;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-menu-link:hover, .subpage > .cont > .main > .head > .breadcrumb .breadcrumb-menu-link:focus-visible {
background-color: var(--clr-ui-light);
color: var(--clr-ui-main);
text-decoration: none;
outline: none;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-menu-link.is-active {
background-color: var(--clr-ui-light);
color: var(--clr-ui-main);
}
@media (prefers-reduced-motion: reduce) {
.subpage .breadcrumb-chevron {
transition: none;
}
}
.subpage > .cont > .main > .visual {
overflow: hidden;
aspect-ratio: 2/0.8;
margin-top: clamp(4rem, 5.1779935275vw + 2.0582524272rem, 12rem);
border-radius: 1.6rem;
}
.subpage > .cont > .main > .visual img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.subpage > .cont > .main > .content {
position: relative;
z-index: 1;
margin-top: clamp(4rem, 5.1779935275vw + 2.0582524272rem, 12rem);
}
.subpage > .cont > .main > .content > section {
padding-block: 0;
}
.subpage > .cont > .main > .content > section + section {
margin-top: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
}
.subpage > .cont > .main > .content > section > .no-container-xl,
.subpage > .cont > .main > .content > section > .no-container-md,
.subpage > .cont > .main > .content > section > .no-container-content {
width: 100%;
max-width: none;
padding-inline: 0;
}
.subpage > .cont > .main > .content > .message {
margin-top: 0;
}
.subpage > .cont > .main > .content > .message > .intro {
color: var(--clr-text-base);
line-height: 1.41;
}
@media (max-width: 544px) {
.subpage > .cont > .main > .content > .message > .intro {
font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
}
}
.subpage > .cont > .main > .content > .message > .body {
margin-top: clamp(1.2rem, 1.8122977346vw + 0.5203883495rem, 4rem);
color: #333;
}
.subpage > .cont > .main > .content > .message > .body p + p {
margin-top: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
color: #333;
}
.subpage > .cont > .main > .content > .message > .closing {
margin-top: clamp(1.2rem, 1.5533980583vw + 0.6174757282rem, 3.6rem);
}
.subpage > .cont > .main > .content > .message > .sign {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
margin-top: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
}
.subpage > .cont > .main > .content > .message > .sign .name {
font-size: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
.subpage > .cont > .main > .content > .message > .sign > .org,
.subpage > .cont > .main > .content > .message > .sign > .role {
margin-right: 0.8rem;
}
@media (max-width: 1024px) {
.subpage > .cont {
grid-template-columns: 1fr;
gap: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem);
}
.subpage > .cont > .side {
position: static;
}
.subpage > .cont > .side > .side-title {
margin-bottom: 1.6rem;
}
.subpage > .cont > .side > .tabs {
overflow-x: auto;
padding-bottom: 0.4rem;
border-left: 0;
}
.subpage > .cont > .side > .tabs > .list {
display: flex;
width: max-content;
}
.subpage > .cont > .side > .tabs > .list > .item + .item {
margin-top: 0;
margin-left: 0.8rem;
}
.subpage > .cont > .side > .tabs > .list > .item > .link {
padding: 0.8rem 1.2rem;
border-left: 0;
border-bottom: 0.2rem solid transparent;
}
.subpage > .cont > .side > .tabs > .list > .item > .link:hover, .subpage > .cont > .side > .tabs > .list > .item > .link:focus-visible, .subpage > .cont > .side > .tabs > .list > .item > .link.is-active {
border-left-color: transparent;
border-bottom-color: var(--clr-primary-500);
}
.subpage > .cont > .side > .tabs > .list > .item > .link.is-active::before {
display: none;
}
.subpage > .cont > .side > .tabs > .list > .item:first-child > .link,
.subpage > .cont > .side > .tabs > .list > .item:last-child > .link {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
}
@media (max-width: 768px) {
.subpage > .cont > .main > .head {
grid-template-columns: 1fr;
gap: 6rem;
}
.subpage > .cont > .side {
display: none;
}
.subpage > .cont > .main > .head > .breadcrumb {
order: -1;
justify-content: flex-start;
z-index: 5;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-dropdown {
position: static;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-dropdown.is-open {
z-index: 10;
}
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-menu {
left: 0;
right: auto;
z-index: 50;
}
.subpage > .cont > .main > .head .text-wrap {
position: relative;
z-index: 1;
}
.subpage > .cont > .main > .head .lead br,
.subpage > .cont > .main > .content > .message > .intro br {
display: block;
}
}
@media (max-width: 768px) and (max-width: 375px) {
.subpage > .cont > .main > .head .lead br,
.subpage > .cont > .main > .content > .message > .intro br {
display: none;
}
}
@media (max-width: 768px) {
.subpage > .cont > .main > .visual {
aspect-ratio: 16/7;
}
}
@media (max-width: 544px) {
.subpage > .cont > .main > .head > .breadcrumb {
gap: 0.8rem;
white-space: normal;
}
.subpage > .cont > .main > .head > .breadcrumb .section-link,
.subpage > .cont > .main > .head > .breadcrumb .breadcrumb-current {
white-space: nowrap;
}
.subpage > .cont > .main > .visual {
aspect-ratio: 4/2;
}
.subpage > .cont > .main > .content > .message > .sign {
justify-content: flex-start;
}
.subpage > .cont > .main > .content > .message > .sign > .org {
width: 100%;
margin: 0 0 0.6rem;
}
}
.about-greeting .cont > .main > .content {
margin-top: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
}
.about-page .no-sub-nav {
position: sticky;
top: var(--header-height);
z-index: 10;
background: var(--clr-base-white, #fff);
}
.about-page .about-section {
padding: clamp(6.4rem, 3.1067961165vw + 5.2349514563rem, 11.2rem) 0;
}
.about-page .about-structure {
background: var(--clr-background-primary);
}
.about-page .about-structure__inner {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
align-items: start;
}
@media (max-width: 768px) {
.about-page .about-structure__inner {
grid-template-columns: 1fr;
gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
}
.about-page .about-structure__heading {
font-size: var(--heading-xl-fs);
font-weight: 700;
color: var(--clr-text-primary);
line-height: 1.2;
}
.about-page .about-structure__body {
display: flex;
flex-direction: column;
gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.about-page .about-structure__body p {
color: var(--clr-text-secondary);
line-height: 1.75;
}
.about-page .about-features__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
@media (max-width: 768px) {
.about-page .about-features__grid {
grid-template-columns: 1fr;
}
}
.about-page .about-card {
padding: clamp(3.6rem, 1.2944983819vw + 3.1145631068rem, 5.6rem) clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
background: var(--clr-background-primary);
border-top: 3px solid var(--clr-primary-900);
}
.about-page .about-card__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--clr-primary-700);
margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.about-page .about-card__eyebrow::before {
content: "";
display: block;
width: 2rem;
height: 2px;
background: currentColor;
flex: 0 0 auto;
}
.about-page .about-card__title {
font-size: var(--heading-md-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
line-height: 1.3;
}
.about-page .about-card__body {
color: var(--clr-text-secondary);
line-height: 1.75;
}
.about-page .about-program .program-intro {
color: var(--clr-text-base);
}
@media (max-width: 768px) {
.about-page .about-program .overview-list {
gap: 4rem;
}
}
.about-page .about-program .overview-item {
min-width: 0;
}
.about-page .about-program .program-media {
overflow: hidden;
width: 100%;
aspect-ratio: 16/11;
border-radius: 1.6rem;
}
.about-page .about-program .program-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.about-page .about-program .program-media--wide {
aspect-ratio: 16/5.7;
}
.about-page .about-program .text {
color: var(--clr-text-sub);
}
.about-page .about-program .goal-list {
display: grid;
gap: 1.6rem;
margin-bottom: 0;
padding: 0;
list-style: none;
}
.about-page .about-program .goal-item {
display: grid;
grid-template-columns: clamp(5.6rem, 1.5533980583vw + 5.0174757282rem, 8rem) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem);
padding: 2.4rem;
border-radius: 1.6rem;
background-color: #e7f0e4;
}
.about-page .about-program .goal-icon {
display: flex;
align-items: center;
justify-content: center;
width: clamp(5.4rem, 2.2006472492vw + 4.5747572816rem, 8.8rem);
aspect-ratio: 1;
border-radius: 50%;
background-color: #fff;
}
.about-page .about-program .goal-icon img {
display: block;
width: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
height: auto;
object-fit: contain;
}
@media (max-width: 544px) {
.about-page .about-program .program-media--wide {
aspect-ratio: 4/3;
}
.about-page .about-program .goal-item {
align-items: start;
}
}
.about-page .about-advisory__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
@media (max-width: 1024px) {
.about-page .about-advisory__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
.about-page .about-advisory__grid {
grid-template-columns: 1fr;
}
}
.about-page .about-advisor-card {
display: flex;
flex-direction: column;
gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
}
.about-page .about-advisor-card__photo {
width: 100%;
}
.about-page .about-advisor-card__body {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.about-page .about-advisor-card__name {
font-size: var(--heading-sm-fs);
font-weight: 700;
color: var(--clr-text-primary);
line-height: 1.3;
}
.about-page .about-advisor-card__role {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--clr-primary-700);
}
.about-page .about-advisor-card__affiliation {
font-size: var(--body-sm-fs);
color: var(--clr-text-secondary);
line-height: 1.5;
}
.about-page .sec-advisory-list .no-container-xl {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
}
.about-page .sec-advisory-list__toolbar {
grid-column: 1/-1;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
flex-wrap: wrap;
}
.about-page .sec-advisory-list__totals-label {
font-size: var(--body-sm-fs);
color: var(--clr-text-secondary);
margin-right: 0.6rem;
}
.about-page .sec-advisory-list__totals-value {
font-size: var(--body-md-fs);
font-weight: 700;
color: var(--clr-primary-900);
}
.about-page .sec-advisory-list__search {
position: relative;
flex: 0 0 28rem;
}
.about-page .sec-advisory-list__search i {
position: absolute;
left: 1.4rem;
top: 50%;
transform: translateY(-50%);
color: var(--clr-gray-400);
pointer-events: none;
}
.about-page .sec-advisory-list__search input {
width: 100%;
height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-sm);
padding: 0 1.4rem 0 4rem;
font-size: var(--body-sm-fs);
background: #fff;
}
.about-page .sec-advisory-list__search input:focus {
outline: none;
border-color: var(--clr-primary-700);
}
.about-page .sec-advisory-list__empty {
grid-column: 1/-1;
padding: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem) 0;
color: var(--clr-text-secondary);
text-align: center;
}
.about-page .sec-advisory-list .no-pagination {
grid-column: 1/-1;
}
.about-page .sec-advisory-list__item {
display: grid;
grid-template-columns: 20rem 1fr;
gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
align-items: start;
padding: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem) 0;
border-top: 1px solid var(--clr-gray-200);
cursor: pointer;
transition: opacity 0.2s ease;
}
.about-page .sec-advisory-list__item:hover {
opacity: 0.8;
}
.about-page .sec-advisory-list__item:last-child {
border-bottom: 1px solid var(--clr-gray-200);
}
@media (max-width: 1024px) {
.about-page .sec-advisory-list__item:nth-child(2) {
border-top: 1px solid var(--clr-gray-200);
}
}
@media (max-width: 768px) {
.about-page .sec-advisory-list__item {
grid-template-columns: 1fr;
gap: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
}
}
.about-page .sec-advisory-list__photo {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
}
.about-page .sec-advisory-list__photo--placeholder {
aspect-ratio: 3/4;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, hsl(calc(207deg + var(--ph-hue, 0deg)), 55%, 90%), hsl(calc(207deg + var(--ph-hue, 0deg)), 55%, 82%));
}
.about-page .sec-advisory-list__photo-initial {
color: hsl(calc(207deg + var(--ph-hue, 0deg)), 45%, 32%);
user-select: none;
}
.about-page .sec-advisory-list__info {
display: flex;
flex-direction: column;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
padding-top: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
.about-page .sec-advisory-list__name {
color: var(--clr-text-primary);
}
.about-page .sec-advisory-list__role {
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--clr-primary-700);
}
.about-page .sec-advisory-list__affiliation {
color: var(--clr-text-secondary);
}
.about-page .sec-advisory-list__research {
color: var(--clr-text-tertiary, var(--clr-gray-500));
margin-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
}
.about-page .about-join__list {
display: flex;
flex-direction: column;
gap: clamp(3.6rem, 1.2944983819vw + 3.1145631068rem, 5.6rem);
}
.about-page .about-join__block-title {
font-size: var(--heading-sm-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
}
.about-page .about-join__block-lead, .about-page .about-join__block-body {
color: var(--clr-text-secondary);
line-height: 1.75;
}
.about-page .about-join__block-lead + .about-page .about-join__block-lead, .about-page .about-join__block-lead + .about-page .about-join__block-body, .about-page .about-join__block-body + .about-page .about-join__block-lead, .about-page .about-join__block-body + .about-page .about-join__block-body {
margin-top: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
}
.about-page .about-join__bullets {
margin: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) 0;
padding-left: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
}
.about-page .about-join__bullets li {
font-size: var(--body-md-fs);
color: var(--clr-text-secondary);
line-height: 1.7;
list-style: disc;
}
.about-page .about-join__block--cta {
padding-top: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem);
border-top: 1px solid var(--clr-gray-200);
}
.about-page .about-join__actions {
display: flex;
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
margin-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
flex-wrap: wrap;
}
.about-page .about-contact {
text-align: center;
}
.about-page .about-contact__map-wrap {
overflow: hidden;
max-width: 96rem;
aspect-ratio: 16/9;
margin: 0 auto clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
border-radius: var(--radius-md, 8px);
}
.about-page .about-contact__map-frame {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.about-page .about-contact__details {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.about-page .about-contact__address {
color: var(--clr-text-primary);
}
.about-page .about-contact__social {
display: flex;
align-items: center;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
margin: 0;
padding: 0;
list-style: none;
}
.about-page .about-contact__social a {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--clr-gray-600);
transition: color 0.2s ease;
}
.about-page .about-contact__social a:hover {
color: var(--clr-primary-900);
}
.about-page .about-contact__social a i {
font-size: 1.6rem;
}
.about-page .about-contact__email a {
color: var(--clr-primary-700);
font-size: var(--body-sm-fs);
text-decoration: none;
}
.about-page .about-contact__email a:hover {
text-decoration: underline;
}
.about-page .about-contact__note {
color: var(--clr-text-secondary);
}
.about-page .about-location {
display: flex;
flex-direction: column;
gap: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
color: var(--clr-text-base);
}
.about-page .about-location .location-school__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
margin-bottom: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem);
padding-bottom: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
border-bottom: 0.2rem solid var(--clr-base-black);
}
.about-page .about-location .location-school__title {
color: var(--clr-base-black);
}
.about-page .about-location .location-map {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 16/6;
border-radius: 1.6rem;
background-color: var(--clr-gray-200);
}
.about-page .about-location .location-map.is-error {
display: grid;
place-items: center;
padding: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
color: var(--clr-text-sub);
}
.about-page .about-location .location-contact {
padding: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem) 0 clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem);
border-bottom: 0.1rem solid #ddd;
background-color: transparent;
}
.about-page .about-location .location-contact__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.about-page .about-location .location-contact__address {
margin: 0;
color: var(--clr-base-black);
font-style: normal;
}
.about-page .about-location .location-contact__maps {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.8rem;
}
.about-page .about-location .location-contact__map-btn {
display: inline-flex;
align-items: center;
gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem);
width: clamp(14.4rem, 2.071197411vw + 13.6233009709rem, 17.6rem);
min-height: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.2rem);
padding-inline: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
border: 0.1rem solid #ddd;
border-radius: 999rem;
background-color: var(--clr-base-white);
color: #3d3d3d;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.about-page .about-location .location-contact__map-btn img {
display: block;
flex: 0 0 auto;
width: 2rem;
height: 2rem;
}
.about-page .about-location .location-contact__map-btn i {
flex: 0 0 auto;
margin-left: auto;
}
.about-page .about-location .location-contact__map-btn:hover, .about-page .about-location .location-contact__map-btn:focus-visible {
border-color: #aaa;
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
text-decoration: none;
transform: translateY(-0.1rem);
}
.about-page .about-location .location-contact__list {
display: flex;
flex-wrap: wrap;
gap: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem) clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
margin-top: 1.2rem;
color: var(--clr-text-sub);
}
.about-page .about-location .location-contact__item {
display: inline-flex;
align-items: baseline;
gap: 0.6rem;
}
.about-page .about-location .location-contact__item dt {
color: var(--clr-text-sub);
}
.about-page .about-location .location-contact__item dd,
.about-page .about-location .location-contact__item a {
color: var(--clr-text-base);
}
.about-page .about-location .location-contact__item a:hover,
.about-page .about-location .location-contact__item a:focus-visible {
color: var(--clr-ui-main);
}
.about-page .about-location .location-transport {
display: grid;
grid-template-columns: minmax(12rem, 0.28fr) minmax(0, 1fr);
gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
margin-top: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
.about-page .about-location .location-transport__title {
color: var(--clr-base-black);
}
.about-page .about-location .location-transport__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
}
.about-page .about-location .location-transport__grid--campus {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.about-page .about-location .location-route {
min-width: 0;
padding-inline: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem);
border-left: 0.1rem solid #ddd;
}
.about-page .about-location .location-route__label {
margin-bottom: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
color: var(--clr-text-sub);
}
.about-page .about-location .location-route__body {
color: var(--clr-text-base);
}
.about-page .about-location .location-route__primary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem;
color: var(--clr-base-black);
}
.about-page .about-location .location-route__note {
margin-top: 0.8rem;
color: var(--clr-text-sub);
}
.about-page .about-location .transit-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1.2rem;
border-radius: 999rem;
line-height: 1;
white-space: nowrap;
font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
.about-page .about-location .transit-badge--subway {
background-color: #747f00;
color: var(--clr-base-white);
}
.about-page .about-location .transit-badge--bus-blue {
background-color: #1e7adb;
color: var(--clr-base-white);
}
.about-page .about-location .transit-badge--bus-green {
background-color: #5bb025;
color: var(--clr-base-white);
}
.about-page .about-location .transit-badge--bus-red {
background-color: #e43607;
color: var(--clr-base-white);
}
.about-page .about-location .location-bus-list {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.about-page .about-location .location-bus-list__groups {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 1.2rem;
}
.about-page .about-location .location-bus-list__group {
display: grid;
grid-template-columns: 3.2rem minmax(0, 1fr);
align-items: start;
gap: 0.8rem;
text-align: left;
}
.about-page .about-location .location-bus-list__numbers {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
}
.about-page .about-location .bus-kind {
color: var(--clr-text-sub);
text-align: left;
font-weight: 600;
font-size: clamp(1.3rem, 0.1941747573vw + 1.227184466rem, 1.6rem);
}
.about-page .about-location .bus-kind--blue {
color: #1e7adb;
}
.about-page .about-location .bus-kind--green {
color: #4d941f;
}
.about-page .about-location .bus-kind--red {
color: #e43607;
}
.about-page .about-location .location-tabs {
display: flex;
align-items: center;
gap: 0.8rem;
}
.about-page .about-location .location-tabs__button {
min-height: clamp(3.8rem, 0.3883495146vw + 3.654368932rem, 4.4rem);
padding-inline: clamp(1.2rem, 0.6472491909vw + 0.9572815534rem, 2.2rem);
border: 0.1rem solid transparent;
border-radius: 999rem;
background-color: color-mix(in srgb, var(--clr-base-black) 6%, var(--clr-base-white));
color: var(--clr-text-sub);
}
@media (max-width: 544px) {
.about-page .about-location .location-tabs__button {
font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
}
.about-page .about-location .location-tabs__button {
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.about-page .about-location .location-tabs__button:hover, .about-page .about-location .location-tabs__button:focus-visible {
border-color: color-mix(in srgb, var(--clr-ui-main) 28%, transparent);
color: var(--clr-ui-main);
}
.about-page .about-location .location-tabs__button.is-active {
background-color: var(--clr-ui-main);
color: var(--clr-base-white);
}
.about-page .about-location .location-campus-panel[hidden] {
display: none;
}
@media (max-width: 768px) {
.about-page .about-location .location-school__head--tabs {
align-items: flex-start;
flex-direction: column;
}
.about-page .about-location .location-tabs {
overflow-x: auto;
width: 100%;
padding-bottom: 0.4rem;
}
.about-page .about-location .location-map {
aspect-ratio: 16/8;
}
.about-page .about-location .location-transport {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) and (max-width: 544px) {
.about-page .about-location .location-transport {
gap: 0;
}
}
@media (max-width: 544px) {
.about-page .about-location .location-map {
aspect-ratio: 4/3;
}
.about-page .about-location .location-contact__list {
flex-direction: column;
}
.about-page .about-location .location-contact__top {
align-items: flex-start;
flex-direction: column;
}
.about-page .about-location .location-contact__maps {
width: 100%;
}
.about-page .about-location .location-contact__map-btn {
flex: 1 1 0;
}
.about-page .about-location .location-transport__grid,
.about-page .about-location .location-transport__grid--campus {
grid-template-columns: 1fr;
}
.about-page .about-location .location-route {
padding: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem) 0;
border-left: 0;
}
.about-page .about-location .location-route:last-child {
padding-bottom: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.about-page .about-location .location-contact__map-btn,
.about-page .about-location .location-tabs__button {
transition: none;
}
}
.about-page .about-banner {
background: var(--clr-primary-900);
color: var(--clr-base-white, #fff);
}
.about-page .about-banner__inner {
max-width: 80rem;
margin-inline: auto;
text-align: center;
}
.about-page .about-banner__heading {
font-size: var(--heading-xl-fs);
font-weight: 700;
margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
color: inherit;
}
.about-page .about-banner__body {
color: rgba(255, 255, 255, 0.78);
line-height: 1.75;
}
.people-related {
margin-top: var(--section-sm, clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem));
}
.people-related__title {
margin-bottom: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
color: var(--clr-text-base);
}
.people-related__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
.people-related__item {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
border-bottom: 1px solid var(--clr-gray-200);
}
.people-related__link {
color: var(--clr-primary-700, var(--clr-primary-900));
text-decoration: none;
font-size: var(--body-sm-fs);
font-weight: 600;
line-height: 1.4;
}
.people-related__link:hover {
text-decoration: underline;
}
.people-related__name {
font-size: var(--body-sm-fs);
font-weight: 600;
color: var(--clr-text-base);
line-height: 1.4;
}
.people-related__meta {
font-size: var(--body-xs-fs);
color: var(--clr-text-secondary);
}
.person-modal {
display: flex;
flex-direction: column;
gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
}
.person-modal__header {
display: flex;
align-items: flex-start;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.person-modal__photo {
flex: 0 0 clamp(160px, 14vw, 200px);
width: clamp(160px, 14vw, 200px);
aspect-ratio: 3/4;
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--clr-gray-100);
}
.person-modal__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.person-modal__photo--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, hsl(calc(207deg + var(--ph-hue, 0deg)), 52%, 88%), hsl(calc(207deg + var(--ph-hue, 0deg)), 52%, 78%));
}
.person-modal__photo-initial {
font-size: clamp(3.6rem, 0.7766990291vw + 3.3087378641rem, 4.8rem);
font-weight: 700;
line-height: 1;
color: hsl(calc(207deg + var(--ph-hue, 0deg)), 45%, 28%);
letter-spacing: -0.02em;
user-select: none;
}
.person-modal__header-info {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding-top: 0.4rem;
}
.person-modal__name {
font-size: var(--heading-sm-fs);
font-weight: 700;
color: var(--clr-text-primary);
line-height: 1.2;
margin: 0;
}
.person-modal__role {
font-size: var(--body-sm-fs);
font-weight: 700;
color: var(--clr-primary-500, var(--clr-primary-400));
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0;
}
.person-modal__affiliation {
font-size: var(--body-sm-fs);
color: var(--clr-text-secondary);
margin: 0;
}
.person-modal__name-ko {
font-size: var(--body-xs-fs);
color: var(--clr-text-tertiary, var(--clr-gray-400));
margin: 0;
margin-top: 0.2rem;
}
.person-modal__meta-strip {
display: flex;
flex-direction: column;
gap: 0;
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) 0;
border-top: 1px solid var(--clr-gray-200);
border-bottom: 1px solid var(--clr-gray-200);
margin: 0;
}
.person-modal__meta-item {
display: grid;
grid-template-columns: 14rem 1fr;
align-items: baseline;
gap: 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
padding: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2rem) 0;
border-bottom: 1px solid var(--clr-gray-100);
}
.person-modal__meta-item:last-child {
border-bottom: none;
}
.person-modal__meta-item dt {
font-size: var(--body-xs-fs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--clr-text-tertiary, var(--clr-gray-400));
padding-top: 0.15em;
}
.person-modal__meta-item dd {
font-size: var(--body-sm-fs);
color: var(--clr-text-primary);
margin: 0;
line-height: 1.5;
}
.person-modal__meta-item dd a {
color: var(--clr-primary-700, var(--clr-primary-900));
text-decoration: none;
word-break: break-all;
}
.person-modal__meta-item dd a:hover {
text-decoration: underline;
}
.person-modal__tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.person-modal__links {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.person-modal__links a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 1.2rem;
border-radius: 999px;
border: 1px solid var(--clr-primary-300, var(--clr-primary-400));
background: transparent;
color: var(--clr-primary-700, var(--clr-primary-900));
font-size: var(--body-sm-fs);
font-weight: 600;
text-decoration: none;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.person-modal__links a i {
font-size: 0.9em;
}
.person-modal__links a:hover {
background: var(--clr-primary-50, #e6f2fa);
border-color: var(--clr-primary-500, var(--clr-primary-400));
}
.person-modal__bio {
color: var(--clr-text-secondary);
line-height: 1.85;
font-size: var(--body-md-fs);
}
/* ===================================================
Research pages — Framework, Technical Groups,
Core Projects, Platforms, Publications, Partnering
=================================================== */
.research-page .research-partner-companies .partner-company-list {
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 544px) {
.research-page .research-partner-companies .partner-company-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
}
}
.research-page .research-partner-companies .partner-company-card {
min-width: 0;
}
.research-page .research-partner-companies .partner-company-logo {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
place-items: center;
overflow: hidden;
aspect-ratio: 1;
margin: 0;
padding: clamp(2rem, 1.0355987055vw + 1.6116504854rem, 3.6rem);
border: 1px solid #ddd;
border-radius: 1.6rem;
background: var(--clr-base-white);
}
.research-page .research-partner-companies .partner-company-logo img {
display: block;
width: 75%;
height: 75%;
object-fit: contain;
}
@media (max-width: 544px) {
.research-page .research-partner-companies .partner-company-logo {
padding: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
}
}
.research-page .research-core-projects {
--project-green-light: rgba(122, 168, 59, 0.88);
--project-green-main: rgba(11, 119, 66, 0.88);
--project-green-muted: rgba(116, 129, 104, 0.88);
--project-surface: #e7f0e4;
}
.research-page .research-core-projects > .cont > .main > .visual {
aspect-ratio: 20/7;
}
.research-page .research-core-projects > .cont > .main > .content {
margin-top: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
}
.research-page .research-core-projects .value-list,
.research-page .research-core-projects .operation-list {
margin-bottom: 0;
padding: 0;
list-style: none;
}
.research-page .research-core-projects .value-list {
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.research-page .research-core-projects .value-item {
position: relative;
display: grid;
place-content: center;
width: clamp(32rem, 3.8834951456vw + 30.5436893204rem, 38rem);
max-width: 36.666%;
aspect-ratio: 1;
flex-shrink: 0;
padding: clamp(1.2rem, 2.3300970874vw + 0.3262135922rem, 4.8rem);
border-radius: 50%;
color: var(--clr-base-white);
text-align: center;
}
.research-page .research-core-projects .value-item + .value-item {
margin-left: -5%;
}
.research-page .research-core-projects .value-item--advisor {
z-index: 1;
background-color: var(--project-green-light);
}
.research-page .research-core-projects .value-item--student {
z-index: 2;
background-color: var(--project-green-main);
}
.research-page .research-core-projects .value-item--expert {
z-index: 1;
background-color: var(--project-green-muted);
}
.research-page .research-core-projects .value-item .title::after {
display: block;
width: clamp(3.2rem, 0.7766990291vw + 2.9087378641rem, 4.4rem);
height: 0.2rem;
margin: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem) auto clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
background-color: currentColor;
content: "";
opacity: 0.68;
}
.research-page .research-core-projects .value-item .text {
color: inherit;
}
.research-page .research-core-projects .operation-list {
display: grid;
gap: 1.6rem;
}
.research-page .research-core-projects .operation-item {
display: grid;
grid-template-columns: clamp(6.4rem, 1.5533980583vw + 5.8174757282rem, 8.8rem) minmax(0, 1fr) auto;
align-items: center;
gap: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
padding: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem) clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
border-radius: 1.6rem;
background-color: var(--project-surface);
}
.research-page .research-core-projects .operation-item .text-wrap {
min-width: 0;
}
.research-page .research-core-projects .operation-number {
color: #cfdec8;
line-height: 1;
}
.research-page .research-core-projects .icon-slot {
display: block;
width: clamp(6.4rem, 1.5533980583vw + 5.8174757282rem, 8.8rem);
aspect-ratio: 1;
border-radius: 50%;
background-color: var(--clr-base-white);
background-position: center;
background-repeat: no-repeat;
background-size: clamp(3.6rem, 1.8122977346vw + 2.9203883495rem, 6.4rem) auto;
}
.research-page .research-core-projects .icon-slot--joint {
background-image: url("/assets/images/sub/project-icon01.svg");
}
.research-page .research-core-projects .icon-slot--mentoring {
background-image: url("/assets/images/sub/project-icon02.svg");
}
.research-page .research-core-projects .icon-slot--research {
background-image: url("/assets/images/sub/project-icon03.svg");
}
.research-page .research-core-projects .icon-slot--skills {
background-image: url("/assets/images/sub/project-icon04.svg");
}
@media (max-width: 544px) {
.research-page .research-core-projects > .cont > .main > .visual {
aspect-ratio: 4/3;
}
.research-page .research-core-projects .value-list {
flex-direction: column;
}
.research-page .research-core-projects .value-item {
width: min(100%, 28rem);
max-width: 100%;
}
.research-page .research-core-projects .value-item + .value-item {
margin-top: -2.4rem;
margin-left: 0;
}
.research-page .research-core-projects .operation-item {
position: relative;
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.research-page .research-core-projects .operation-number {
position: absolute;
top: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
right: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
}
.research-page .research-framework {
--framework-main: #0e3d36;
--framework-green: #237647;
--framework-icon: #dde9de;
--framework-soft: #e3f1e4;
--framework-line: #dddddd;
--framework-border: #e1e1e1;
--flow-dot-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
}
.research-page .research-framework .framework-cont {
width: 100%;
min-width: 0;
}
.research-page .research-framework .framework-head {
color: var(--clr-base-black);
}
.research-page .research-framework .framework-head p {
color: var(--clr-text-sub);
}
.research-page .research-framework .system-flow,
.research-page .research-framework .committee-list,
.research-page .research-framework .faculty-list {
list-style: none;
}
.research-page .research-framework .system-flow {
display: grid;
row-gap: 0;
isolation: isolate;
width: 90%;
margin: 0 auto;
}
@media (max-width: 544px) {
.research-page .research-framework .system-flow {
width: 100%;
}
}
.research-page .research-framework .flow-item {
display: grid;
row-gap: 0;
}
.research-page .research-framework .flow-connector {
position: relative;
z-index: 2;
width: var(--flow-dot-size);
height: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem);
margin-top: calc(var(--flow-dot-size) / -2);
margin-bottom: calc(var(--flow-dot-size) / -2);
margin-inline: auto;
pointer-events: none;
}
.research-page .research-framework .flow-connector::before {
position: absolute;
z-index: 1;
top: calc(var(--flow-dot-size) / 2);
bottom: calc(var(--flow-dot-size) / 2);
left: 50%;
width: 1px;
background: var(--framework-line);
content: "";
transform: translateX(-50%);
}
.research-page .research-framework .flow-connector__dot {
position: absolute;
z-index: 2;
left: 50%;
width: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, var(--framework-main) 0 28%, var(--clr-base-white) 29% 38%, var(--framework-main) 39% 46%, transparent 47%);
transform: translateX(-50%);
}
.research-page .research-framework .flow-connector__dot:first-child {
top: 0;
}
.research-page .research-framework .flow-connector__dot:last-child {
bottom: 0;
}
.research-page .research-framework .agency-card,
.research-page .research-framework .operation-card {
position: relative;
z-index: 1;
border: 1px solid var(--framework-line);
background: var(--clr-base-white);
box-shadow: 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem) clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem) rgba(14, 61, 54, 0.04);
}
.research-page .research-framework .agency-card {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
padding: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
border-radius: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2rem);
}
.research-page .research-framework .framework-img-slot {
display: grid;
place-items: center;
flex: none;
margin-bottom: 0;
overflow: hidden;
border: 0;
background: transparent;
color: var(--framework-green);
}
.research-page .research-framework .framework-img-slot img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.research-page .research-framework .slot-icon {
display: block;
width: 64%;
height: 64%;
overflow: visible;
}
.research-page .research-framework .image-slot--agency {
width: clamp(6.4rem, 2.3300970874vw + 5.5262135922rem, 10rem);
aspect-ratio: 1;
border-radius: 50%;
background: var(--clr-base-white);
}
.research-page .research-framework .image-slot--agency img {
width: 80%;
height: 80%;
}
.research-page .research-framework .framework-label {
display: inline-flex;
padding: 0.4rem 1rem;
border: 1px solid var(--framework-green);
border-radius: 0.4rem;
color: var(--framework-green);
}
.research-page .research-framework .agency-title,
.research-page .research-framework .operation-title {
margin-top: 0.8rem;
color: var(--clr-base-black);
}
.research-page .research-framework .agency-desc,
.research-page .research-framework .operation-desc {
margin-top: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem);
color: var(--clr-text-sub);
}
.research-page .research-framework .operation-card {
display: grid;
grid-template-columns: minmax(0, 0.4fr) minmax(0, 1.28fr);
align-items: center;
column-gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
padding: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem) clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
border-radius: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.research-page .research-framework .university-list {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(7.2rem, 0.3fr) minmax(0, 1fr);
align-items: center;
column-gap: clamp(1rem, 0.5177993528vw + 0.8058252427rem, 1.8rem);
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
border-radius: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
}
.research-page .research-framework .university-card {
display: flex;
flex-direction: column;
align-items: center;
padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
border-radius: 1.2rem;
background: #f0f9f1;
text-align: center;
gap: 0.4rem;
}
.research-page .research-framework .university-label,
.research-page .research-framework .faculty-label {
display: inline-flex;
padding: clamp(0.3rem, 0.1941747573vw + 0.227184466rem, 0.6rem) clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
border-radius: 0.4rem;
background: var(--clr-ui-main);
color: var(--clr-base-white);
}
.research-page .research-framework .image-slot--school {
width: clamp(6.4rem, 2.3300970874vw + 5.5262135922rem, 10rem);
aspect-ratio: 1;
margin-top: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2rem);
}
.research-page .research-framework .image-slot--school img {
width: 80%;
height: 80%;
}
.research-page .research-framework .university-name {
margin-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
color: var(--clr-base-black);
}
.research-page .research-framework .collaboration {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
color: var(--framework-main);
text-align: center;
}
.research-page .research-framework .collaboration-label {
max-width: clamp(7.2rem, 1.0355987055vw + 6.8116504854rem, 8.8rem);
line-height: 1.4;
}
.research-page .research-framework .collaboration-arrow {
width: 100%;
max-width: clamp(7.2rem, 2.3948220065vw + 6.3019417476rem, 10.9rem);
margin-top: 0;
margin-bottom: 0;
}
.research-page .research-framework .collaboration-arrow img {
display: block;
width: 100%;
height: auto;
}
.research-page .research-framework .organization-chart {
--chart-line: #d7ddda;
--chart-dot-size: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
--chart-dot-half: calc(var(--chart-dot-size) / 2);
--chart-committee-width: 92%;
--chart-faculty-width: 76%;
--chart-committee-gap: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem);
--chart-faculty-gap: clamp(8rem, 4.6601941748vw + 6.2524271845rem, 15.2rem);
--chart-v-gap: clamp(7.2rem, 1.0355987055vw + 6.8116504854rem, 8.8rem);
position: relative;
display: flex;
overflow: visible;
flex-direction: column;
align-items: center;
isolation: isolate;
margin-inline: auto;
}
.research-page .research-framework .director-card-shell {
display: flex;
justify-content: center;
width: 100%;
padding: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
}
.research-page .research-framework .director-card {
position: relative;
z-index: 2;
display: flex;
overflow: visible;
width: clamp(18.4rem, 2.3300970874vw + 17.5262135922rem, 22rem);
aspect-ratio: 1;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
border-radius: 50%;
color: var(--clr-base-white);
}
.research-page .research-framework .director-card::before {
position: absolute;
z-index: 2;
inset: 0;
border: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem) solid #78988f;
border-radius: inherit;
background: var(--framework-main);
box-shadow: 0 0 0 clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem) #bdceca;
content: "";
}
.research-page .research-framework .director-card .store-pin-ripple {
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
background: #bdceca;
}
.research-page .research-framework .director-card .store-pin-ripple:nth-of-type(2) {
animation-delay: 1s;
}
@media (prefers-reduced-motion: reduce) {
.research-page .research-framework .director-card .store-pin-ripple {
animation: none;
opacity: 0;
}
}
.research-page .research-framework .image-slot--director {
position: relative;
z-index: 3;
width: clamp(5.2rem, 0.7766990291vw + 4.9087378641rem, 6.4rem);
aspect-ratio: 1;
background: transparent;
color: var(--clr-base-white);
}
.research-page .research-framework .image-slot--director .slot-icon {
width: 100%;
height: 100%;
}
.research-page .research-framework .director-title {
position: relative;
z-index: 3;
margin-top: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem);
color: inherit;
}
.research-page .research-framework .committee-item::before,
.research-page .research-framework .committee-item:nth-child(2)::after,
.research-page .research-framework .faculty-card::before,
.research-page .research-framework .faculty-card::after,
.research-page .research-framework .student-card::before {
position: absolute;
z-index: 2;
left: 50%;
width: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, var(--framework-main) 0 28%, var(--clr-base-white) 29% 38%, var(--framework-main) 39% 46%, transparent 47%);
content: "";
transform: translateX(-50%);
}
.research-page .research-framework .committee-item::before,
.research-page .research-framework .faculty-card::before,
.research-page .research-framework .student-card::before {
top: calc(var(--chart-dot-size) / -2);
}
.research-page .research-framework .committee-item:nth-child(2)::after,
.research-page .research-framework .faculty-card::after {
bottom: calc(var(--chart-dot-size) / -2);
}
.research-page .research-framework .chart-connector {
position: relative;
z-index: 0;
display: grid;
flex: none;
overflow: visible;
}
.research-page .research-framework .chart-connector::before, .research-page .research-framework .chart-connector::after,
.research-page .research-framework .chart-connector .connector-leg::before {
position: absolute;
background: var(--chart-line);
content: "";
}
.research-page .research-framework .chart-connector::before {
z-index: 0;
height: 1px;
}
.research-page .research-framework .chart-connector::after,
.research-page .research-framework .chart-connector .connector-leg::before {
width: 1px;
}
.research-page .research-framework .chart-connector::after {
left: 50%;
transform: translateX(-50%);
}
.research-page .research-framework .chart-connector .connector-leg {
position: relative;
}
.research-page .research-framework .chart-connector .connector-leg::before {
left: 50%;
transform: translateX(-50%);
}
.research-page .research-framework .chart-connector--committee {
width: var(--chart-committee-width);
height: var(--chart-v-gap);
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--chart-committee-gap);
}
.research-page .research-framework .chart-connector--committee::before {
top: 50%;
right: calc((100% - 2 * var(--chart-committee-gap)) / 6);
left: calc((100% - 2 * var(--chart-committee-gap)) / 6);
transform: translateY(-50%);
}
.research-page .research-framework .chart-connector--committee .connector-leg::before {
top: 50%;
bottom: 0;
}
.research-page .research-framework .chart-connector--committee .connector-leg:nth-child(2)::before {
top: 0;
}
.research-page .research-framework .chart-connector--faculty,
.research-page .research-framework .chart-connector--student {
width: var(--chart-faculty-width);
height: var(--chart-v-gap);
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--chart-faculty-gap);
}
.research-page .research-framework .chart-connector--faculty::before,
.research-page .research-framework .chart-connector--student::before {
top: 50%;
right: calc((100% - var(--chart-faculty-gap)) / 4);
left: calc((100% - var(--chart-faculty-gap)) / 4);
transform: translateY(-50%);
}
.research-page .research-framework .chart-connector--faculty::after {
top: 0;
height: 50%;
}
.research-page .research-framework .chart-connector--faculty .connector-leg::before {
top: 50%;
bottom: 0;
}
.research-page .research-framework .chart-connector--student::after {
top: 50%;
bottom: 0;
}
.research-page .research-framework .chart-connector--student .connector-leg::before {
top: 0;
height: 50%;
}
.research-page .research-framework .committee-list {
position: relative;
display: grid;
overflow: visible;
width: var(--chart-committee-width);
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--chart-committee-gap);
margin: 0;
}
.research-page .research-framework .committee-item {
position: relative;
z-index: 1;
display: grid;
min-height: clamp(6.4rem, 0.5177993528vw + 6.2058252427rem, 7.2rem);
place-items: center;
padding: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
border: 1px solid var(--framework-border);
border-radius: 999px;
background: var(--clr-base-white);
color: var(--clr-base-black);
text-align: center;
}
.research-page .research-framework .faculty-list {
position: relative;
display: grid;
overflow: visible;
width: var(--chart-faculty-width);
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--chart-faculty-gap);
margin: 0;
}
.research-page .research-framework .faculty-card {
position: relative;
z-index: 1;
display: flex;
min-height: clamp(17.8rem, 1.4239482201vw + 17.2660194175rem, 20rem);
flex-direction: column;
align-items: center;
padding: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem) clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
border: 1px solid var(--framework-border);
border-radius: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
background: #f0f9f1;
text-align: center;
}
.research-page .research-framework .image-slot--faculty {
width: clamp(4.8rem, 1.8122977346vw + 4.1203883495rem, 7.6rem);
aspect-ratio: 1;
margin-top: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
}
.research-page .research-framework .faculty-title {
margin-top: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
color: var(--clr-base-black);
}
.research-page .research-framework .student-card {
position: relative;
z-index: 1;
display: grid;
width: calc((var(--chart-committee-width) - 2 * var(--chart-committee-gap)) / 3);
min-height: clamp(6.4rem, 0.5177993528vw + 6.2058252427rem, 7.2rem);
place-items: center;
padding: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
border: 2px solid #0e3d36;
border-radius: 999px;
background: var(--clr-base-white);
color: var(--clr-base-black);
text-align: center;
}
@media (max-width: 768px) {
.research-page .research-framework .operation-card {
grid-template-columns: 1fr;
row-gap: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem);
}
.research-page .research-framework .university-list {
padding: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
}
}
@media (max-width: 544px) {
.research-page .research-framework {
overflow-x: clip;
}
.research-page .research-framework .flow-connector {
height: 6rem;
margin-top: calc(var(--flow-dot-size) / -2);
margin-bottom: calc(var(--flow-dot-size) / -2);
}
.research-page .research-framework .agency-card {
grid-template-columns: 1fr;
justify-items: center;
row-gap: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
text-align: center;
}
.research-page .research-framework .operation-info {
text-align: center;
}
.research-page .research-framework .university-list {
grid-template-columns: 1fr;
row-gap: 0.8rem;
}
.research-page .research-framework .collaboration {
flex-direction: row;
justify-content: center;
align-items: center;
gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
padding-block: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
}
.research-page .research-framework .collaboration-label {
flex: none;
max-width: none;
text-align: left;
}
.research-page .research-framework .collaboration-arrow {
display: flex;
flex: none;
width: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
height: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
align-items: center;
justify-content: center;
max-width: none;
margin-top: 0;
transform: rotate(90deg);
}
.research-page .research-framework .collaboration-arrow img {
width: 100%;
height: auto;
}
.research-page .research-framework .organization-chart {
width: 100%;
max-width: 100%;
padding-inline: 0;
overflow: visible;
}
.research-page .research-framework .director-card-shell {
padding: 2.4rem 1.6rem;
}
.research-page .research-framework .director-card {
width: min(100%, 16.8rem);
}
.research-page .research-framework .committee-list,
.research-page .research-framework .faculty-list {
width: 100%;
grid-template-columns: 1fr;
gap: 3.2rem;
margin: 0;
padding: 0;
}
.research-page .research-framework .committee-item,
.research-page .research-framework .faculty-card,
.research-page .research-framework .student-card {
width: 100%;
min-width: 0;
}
.research-page .research-framework .committee-item {
padding-inline: 1.6rem;
}
.research-page .research-framework .chart-connector {
display: block;
width: 1px;
height: 3.2rem;
align-self: center;
margin-inline: auto;
background: var(--chart-line);
}
.research-page .research-framework .chart-connector::before, .research-page .research-framework .chart-connector::after,
.research-page .research-framework .chart-connector .connector-leg {
display: none;
}
.research-page .research-framework .committee-list::before,
.research-page .research-framework .faculty-list::before {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: calc(50% - 0.5px);
width: 1px;
background: var(--chart-line);
content: "";
}
.research-page .research-framework .committee-item::before,
.research-page .research-framework .faculty-card::before,
.research-page .research-framework .student-card::before {
width: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
inset-inline-start: 50%;
margin-inline-start: calc(var(--chart-dot-size) / -1.4);
transform: none;
top: calc(var(--chart-dot-size) / -1.4);
}
.research-page .research-framework .committee-item:nth-child(2)::after,
.research-page .research-framework .faculty-card::after {
display: none;
}
}
.research-page .research-band {
padding: clamp(5.6rem, 2.5889967638vw + 4.6291262136rem, 9.6rem) 0;
text-align: center;
}
.research-page .research-band--navy {
background: var(--clr-primary-900);
color: #fff;
}
.research-page .research-band--soft {
background: transparent;
}
.research-page .research-band__title {
color: var(--clr-text-primary);
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.research-page .research-band__text {
max-width: 80rem;
margin: 0 auto;
line-height: 1.75;
color: inherit;
}
.research-page .research-cycle__title {
text-align: center;
color: var(--clr-text-primary);
margin-bottom: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem);
}
.research-page .research-cycle__diagram {
margin: 0 auto clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem);
}
.research-page .research-cycle__columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
}
@media (max-width: 768px) {
.research-page .research-cycle__columns {
grid-template-columns: 1fr;
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
}
.research-page .research-cycle__columns p {
color: var(--clr-text-secondary);
line-height: 1.8;
}
.research-page .research-why {
text-align: center;
}
.research-page .research-why__eyebrow {
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--clr-primary-700);
margin-bottom: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
}
.research-page .research-why__title {
color: var(--clr-text-primary);
margin-bottom: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem);
}
.research-page .research-why .ui-feature-card {
text-align: left;
}
.research-page .research-platform-links {
display: flex;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
justify-content: center;
margin-top: clamp(2.8rem, 1.0355987055vw + 2.4116504854rem, 4.4rem);
flex-wrap: wrap;
}
.research-page .research-platform-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem) clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem);
border-radius: var(--radius-sm);
font-size: var(--body-md-fs);
font-weight: 700;
text-decoration: none;
transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.research-page .research-platform-link:hover, .research-page .research-platform-link:focus-visible {
opacity: 0.92;
transform: translateY(-2px);
box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.3);
}
.research-page .research-platform-link--filled-navy {
background: var(--clr-primary-900);
color: #fff;
}
.research-page .research-platform-link--filled-blue {
background: var(--clr-primary-700);
color: #fff;
}
.research-page .research-platform-link--outline {
background: #fff;
color: var(--clr-primary-900);
border: 1px solid var(--clr-primary-900);
}
.research-page .research-platform-oasdl {
text-align: center;
}
.research-page .research-platform-oasdl__title {
color: var(--clr-text-primary);
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.research-page .research-platform-oasdl__sub {
max-width: 76rem;
margin: 0 auto clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
color: var(--clr-text-secondary);
line-height: 1.75;
}
.research-page .research-tg-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
@media (max-width: 1024px) {
.research-page .research-tg-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
.research-page .research-tg-grid {
grid-template-columns: 1fr;
}
}
.research-page .research-tg-card {
display: flex;
flex-direction: column;
gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
border: 1px solid transparent;
border-radius: var(--radius-md);
background: var(--clr-base-white);
}
.research-page .research-tg-card:hover .research-page .research-tg-card__img img {
transform: scale(1.04);
}
.research-page .research-tg-card:hover .research-page .research-tg-card__name {
color: var(--clr-primary-400);
}
.research-page .research-tg-card__img {
width: 100%;
overflow: hidden;
border-radius: var(--radius-sm);
}
.research-page .research-tg-card__img img {
display: block;
width: 100%;
height: auto;
transition: transform 0.4s ease;
}
.research-page .research-tg-card__body {
display: flex;
flex-direction: column;
gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
align-items: flex-start;
}
.research-page .research-tg-card__title {
display: flex;
align-items: baseline;
gap: 0.8rem;
font-size: var(--heading-sm-fs);
font-weight: 700;
line-height: 1.3;
}
.research-page .research-tg-card__id {
color: var(--clr-primary-700);
}
.research-page .research-tg-card__name {
color: var(--clr-text-primary);
transition: color 0.25s ease;
}
.research-page .research-tg-card__desc {
font-size: var(--body-sm-fs);
color: var(--clr-text-secondary);
line-height: 1.7;
}
.research-page .research-tg-footer {
background: var(--clr-bg-section);
}
.research-page .research-tg-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
align-items: center;
}
@media (max-width: 768px) {
.research-page .research-tg-footer__grid {
grid-template-columns: 1fr;
}
}
.research-page .research-tg-footer__title {
color: var(--clr-text-primary);
margin-bottom: clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.2rem);
}
.research-page .research-tg-footer p {
color: var(--clr-text-secondary);
line-height: 1.8;
}
.research-page .research-tg-footer p + p {
margin-top: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
}
.research-page .research-cp-overview {
background: var(--clr-bg-section);
}
.research-page .research-cp-overview__title {
font-size: var(--heading-md-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
.research-page .research-cp-overview__grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem);
}
@media (max-width: 768px) {
.research-page .research-cp-overview__grid {
grid-template-columns: 1fr;
}
}
.research-page .research-cp-overview__grid p {
color: var(--clr-text-secondary);
line-height: 1.8;
}
.research-page .research-cp-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
}
@media (max-width: 544px) {
.research-page .research-cp-stats {
grid-template-columns: repeat(2, 1fr);
}
}
.research-page .research-cp-stat {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.research-page .research-cp-stat__value {
font-size: var(--heading-lg-fs);
font-weight: 700;
color: var(--clr-primary-900);
line-height: 1;
}
.research-page .research-cp-stat__label {
font-size: var(--body-xs-fs);
color: var(--clr-text-secondary);
}
.research-page .research-cp-list-section__title {
font-size: var(--heading-md-fs);
font-weight: 700;
text-align: center;
color: var(--clr-text-primary);
margin-bottom: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem);
}
.research-page .research-cp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
@media (max-width: 768px) {
.research-page .research-cp-grid {
grid-template-columns: 1fr;
}
}
.research-page .research-cp-card {
padding: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
border-radius: var(--radius-md);
color: #fff;
display: flex;
flex-direction: column;
gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.research-page .research-cp-card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 44px -18px rgba(15, 23, 42, 0.45);
}
.research-page .research-cp-card--navy {
background: var(--clr-primary-900);
}
.research-page .research-cp-card--sky {
background: var(--clr-primary-700);
}
.research-page .research-cp-card--red {
background: #b32424;
}
.research-page .research-cp-card--blue {
background: #1e3a8a;
}
.research-page .research-cp-card__eyebrow {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.research-page .research-cp-card__title {
display: flex;
align-items: baseline;
gap: 0.8rem;
font-size: var(--heading-sm-fs);
font-weight: 700;
line-height: 1.3;
flex-wrap: wrap;
}
.research-page .research-cp-card__id {
color: rgba(255, 255, 255, 0.65);
}
.research-page .research-cp-card__desc {
font-size: var(--body-sm-fs);
line-height: 1.75;
color: rgba(255, 255, 255, 0.85);
}
.research-page .research-cp-card__bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.research-page .research-cp-card__bullets li {
font-size: var(--body-sm-fs);
color: rgba(255, 255, 255, 0.9);
padding-left: 1.6rem;
position: relative;
line-height: 1.6;
}
.research-page .research-cp-card__bullets li::before {
content: "—";
position: absolute;
left: 0;
color: rgba(255, 255, 255, 0.55);
}
.research-page .research-cp-banner {
background: var(--clr-primary-900);
color: #fff;
text-align: center;
}
.research-page .research-cp-banner__inner {
max-width: 92rem;
margin: 0 auto;
}
.research-page .research-cp-banner__eyebrow {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--clr-primary-500);
margin-bottom: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
}
.research-page .research-cp-banner__title {
font-size: var(--heading-md-fs);
font-weight: 700;
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.research-page .research-cp-banner__body {
color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
}
.research-page .research-publications__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
border-bottom: 1px solid var(--clr-gray-200);
flex-wrap: wrap;
gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
}
.research-page .research-publications__count {
font-size: var(--body-sm-fs);
color: var(--clr-text-secondary);
}
.research-page .research-publications__active-filters {
display: flex;
gap: 0.8rem;
align-items: center;
}
.research-page .research-partnering-intro__grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem);
align-items: center;
}
@media (max-width: 768px) {
.research-page .research-partnering-intro__grid {
grid-template-columns: 1fr;
}
}
.research-page .research-partnering-intro__grid p {
color: var(--clr-text-secondary);
line-height: 1.8;
}
.research-page .research-partnering-types {
background: var(--clr-bg-section);
}
.research-page .research-partnering-types__title {
font-size: var(--heading-sm-fs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--clr-text-primary);
margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
.research-page .research-partnering-soft {
background: var(--clr-bg-section);
padding: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem) 0;
}
.research-page .research-partnering-soft__text {
max-width: 86rem;
margin: 0 auto;
text-align: center;
color: var(--clr-text-secondary);
line-height: 1.85;
}
.research-page .research-partnering-impact__title {
font-size: var(--heading-sm-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
.research-page .research-partnering-cta {
background: var(--clr-primary-900);
color: #fff;
padding: clamp(5.6rem, 2.5889967638vw + 4.6291262136rem, 9.6rem) 0;
}
.research-page .research-partnering-cta__inner {
max-width: 76rem;
text-align: left;
}
.research-page .research-partnering-cta__title {
font-size: var(--heading-md-fs);
font-weight: 700;
margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.research-page .research-partnering-cta__body {
color: rgba(255, 255, 255, 0.8);
line-height: 1.75;
margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
}
.research-two-col {
display: grid;
grid-template-columns: 1fr 28rem;
gap: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem);
align-items: start;
padding-block: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem);
}
@media (max-width: 1024px) {
.research-two-col {
grid-template-columns: 1fr;
gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
}
}
.research-two-col__main {
min-width: 0;
}
.research-two-col__side {
position: sticky;
top: calc(var(--header-height, 7.2rem) + clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem));
}
@media (max-width: 1024px) {
.research-two-col__side {
position: static;
}
}
/* ===================================================
Facilities pages — OA-SDL, Usage Procedures, Reservation
=================================================== */
.facilities-page .about-section,
.research-page .about-section {
padding: clamp(6.4rem, 3.1067961165vw + 5.2349514563rem, 11.2rem) 0;
}
.facilities-page .oasdl-hero,
.research-page .oasdl-hero {
background: linear-gradient(135deg, var(--clr-primary-900) 0%, var(--clr-primary-700) 100%);
color: #fff;
padding-top: calc(var(--header-height) + clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem));
padding-bottom: 0;
}
.facilities-page .oasdl-hero__eyebrow,
.research-page .oasdl-hero__eyebrow {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.facilities-page .oasdl-hero__title,
.research-page .oasdl-hero__title {
font-size: var(--heading-xl-fs);
font-weight: 700;
line-height: 1.15;
max-width: 72rem;
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.facilities-page .oasdl-hero__abbr,
.research-page .oasdl-hero__abbr {
color: var(--clr-primary-500);
}
.facilities-page .oasdl-hero__sub,
.research-page .oasdl-hero__sub {
font-size: var(--body-lg-fs);
color: rgba(255, 255, 255, 0.8);
max-width: 60rem;
line-height: 1.7;
margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
}
.facilities-page .oasdl-hero__actions,
.research-page .oasdl-hero__actions {
display: flex;
gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
flex-wrap: wrap;
margin-bottom: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
}
.facilities-page .oasdl-hero__btn,
.research-page .oasdl-hero__btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
border-radius: var(--radius-sm);
font-weight: 700;
text-decoration: none;
transition: transform 0.2s ease;
}
.facilities-page .oasdl-hero__btn:hover,
.research-page .oasdl-hero__btn:hover {
transform: translateY(-1px);
}
.facilities-page .oasdl-hero__btn--primary,
.research-page .oasdl-hero__btn--primary {
background: #fff;
color: var(--clr-primary-900);
}
.facilities-page .oasdl-hero__btn--ghost,
.research-page .oasdl-hero__btn--ghost {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.facilities-page .oasdl-hero__stats,
.research-page .oasdl-hero__stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
list-style: none;
padding: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem) 0;
margin: 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
background: var(--clr-primary-900);
}
.facilities-page .oasdl-hero__stats li,
.research-page .oasdl-hero__stats li {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
@media (max-width: 768px) {
.facilities-page .oasdl-hero__stats,
.research-page .oasdl-hero__stats {
grid-template-columns: repeat(2, 1fr);
}
}
.facilities-page .oasdl-hero__stat-value,
.research-page .oasdl-hero__stat-value {
font-size: var(--heading-md-fs);
font-weight: 700;
color: #fff;
line-height: 1;
}
.facilities-page .oasdl-hero__stat-label,
.research-page .oasdl-hero__stat-label {
font-size: var(--body-xs-fs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.facilities-page .oasdl-intro__eyebrow,
.research-page .oasdl-intro__eyebrow {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--clr-primary-700);
margin-bottom: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
}
.facilities-page .oasdl-intro__title,
.research-page .oasdl-intro__title {
font-size: var(--heading-md-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
max-width: 80rem;
}
.facilities-page .oasdl-intro__body,
.research-page .oasdl-intro__body {
display: flex;
flex-direction: column;
gap: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
max-width: 84rem;
}
.facilities-page .oasdl-intro__body p,
.research-page .oasdl-intro__body p {
color: var(--clr-text-secondary);
line-height: 1.8;
}
.facilities-page .oasdl-flow,
.research-page .oasdl-flow {
background: var(--clr-bg-section);
}
.facilities-page .oasdl-flow__title,
.research-page .oasdl-flow__title {
font-size: var(--heading-md-fs);
font-weight: 700;
text-align: center;
color: var(--clr-text-primary);
margin-bottom: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem);
}
.facilities-page .oasdl-inside__title,
.research-page .oasdl-inside__title {
font-size: var(--heading-md-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
.facilities-page .oasdl-contact__title,
.research-page .oasdl-contact__title {
font-size: var(--heading-md-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
.facilities-page .oasdl-contact__grid,
.research-page .oasdl-contact__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
@media (max-width: 768px) {
.facilities-page .oasdl-contact__grid,
.research-page .oasdl-contact__grid {
grid-template-columns: 1fr;
}
}
.facilities-page .oasdl-contact-card,
.research-page .oasdl-contact-card {
padding: clamp(2.8rem, 1.0355987055vw + 2.4116504854rem, 4.4rem);
border-radius: var(--radius-md);
border: 1px solid var(--clr-gray-200);
background: #fff;
}
.facilities-page .oasdl-contact-card--filled,
.research-page .oasdl-contact-card--filled {
background: var(--clr-primary-900);
color: #fff;
border-color: var(--clr-primary-900);
}
.facilities-page .oasdl-contact-card--filled .oasdl-contact-card__label,
.research-page .oasdl-contact-card--filled .oasdl-contact-card__label {
color: rgba(255, 255, 255, 0.65);
}
.facilities-page .oasdl-contact-card--filled .oasdl-contact-card__value,
.research-page .oasdl-contact-card--filled .oasdl-contact-card__value {
color: #fff;
}
.facilities-page .oasdl-contact-card--filled .oasdl-contact-card__detail,
.research-page .oasdl-contact-card--filled .oasdl-contact-card__detail {
color: rgba(255, 255, 255, 0.85);
}
.facilities-page .oasdl-contact-card__label,
.research-page .oasdl-contact-card__label {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--clr-gray-400);
margin-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
.facilities-page .oasdl-contact-card__value,
.research-page .oasdl-contact-card__value {
font-size: var(--heading-sm-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
}
.facilities-page .oasdl-contact-card__note, .facilities-page .oasdl-contact-card__detail,
.research-page .oasdl-contact-card__note,
.research-page .oasdl-contact-card__detail {
color: var(--clr-text-secondary);
line-height: 1.6;
}
.facilities-page .oasdl-contact-card__note + .facilities-page .oasdl-contact-card__note, .facilities-page .oasdl-contact-card__note + .facilities-page .oasdl-contact-card__detail,
.facilities-page .oasdl-contact-card__note + .research-page .oasdl-contact-card__note,
.facilities-page .oasdl-contact-card__note + .research-page .oasdl-contact-card__detail, .facilities-page .oasdl-contact-card__detail + .facilities-page .oasdl-contact-card__note, .facilities-page .oasdl-contact-card__detail + .facilities-page .oasdl-contact-card__detail,
.facilities-page .oasdl-contact-card__detail + .research-page .oasdl-contact-card__note,
.facilities-page .oasdl-contact-card__detail + .research-page .oasdl-contact-card__detail,
.research-page .oasdl-contact-card__note + .facilities-page .oasdl-contact-card__note,
.research-page .oasdl-contact-card__note + .facilities-page .oasdl-contact-card__detail,
.research-page .oasdl-contact-card__note + .research-page .oasdl-contact-card__note,
.research-page .oasdl-contact-card__note + .research-page .oasdl-contact-card__detail,
.research-page .oasdl-contact-card__detail + .facilities-page .oasdl-contact-card__note,
.research-page .oasdl-contact-card__detail + .facilities-page .oasdl-contact-card__detail,
.research-page .oasdl-contact-card__detail + .research-page .oasdl-contact-card__note,
.research-page .oasdl-contact-card__detail + .research-page .oasdl-contact-card__detail {
margin-top: 0.4rem;
}
.facilities-page .oasdl-contact-card__btn,
.research-page .oasdl-contact-card__btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
background: #fff;
color: var(--clr-primary-900);
border-radius: var(--radius-sm);
font-weight: 700;
font-size: var(--body-sm-fs);
text-decoration: none;
}
.facilities-page .oasdl-faq,
.research-page .oasdl-faq {
background: var(--clr-bg-section);
}
.facilities-page .oasdl-faq__title,
.research-page .oasdl-faq__title {
font-size: var(--heading-md-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
.facilities-page .oasdl-faq__list,
.research-page .oasdl-faq__list {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--clr-gray-200);
}
.facilities-page .oasdl-faq__item,
.research-page .oasdl-faq__item {
border-bottom: 1px solid var(--clr-gray-200);
padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem) 0;
}
.facilities-page .oasdl-faq__item summary,
.research-page .oasdl-faq__item summary {
cursor: pointer;
font-size: var(--body-md-fs);
font-weight: 600;
color: var(--clr-text-primary);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.facilities-page .oasdl-faq__item summary::-webkit-details-marker,
.research-page .oasdl-faq__item summary::-webkit-details-marker {
display: none;
}
.facilities-page .oasdl-faq__item summary::after,
.research-page .oasdl-faq__item summary::after {
content: "+";
font-size: var(--heading-xs-fs);
color: var(--clr-primary-700);
}
.facilities-page .oasdl-faq__item[open] summary::after,
.research-page .oasdl-faq__item[open] summary::after {
content: "−";
}
.facilities-page .oasdl-faq__item p,
.research-page .oasdl-faq__item p {
margin-top: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
color: var(--clr-text-secondary);
line-height: 1.7;
}
.facilities-page .usage-intro__quote,
.research-page .usage-intro__quote {
max-width: 84rem;
margin: 0 auto;
padding: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
border-left: 4px solid var(--clr-primary-700);
background: var(--clr-primary-50);
font-size: var(--body-md-fs);
color: var(--clr-text-primary);
line-height: 1.7;
}
.facilities-page .usage-steps__eyebrow,
.research-page .usage-steps__eyebrow {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--clr-primary-700);
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.facilities-page .usage-fees,
.research-page .usage-fees {
background: var(--clr-bg-section);
}
.facilities-page .usage-fees__title,
.research-page .usage-fees__title {
font-size: var(--heading-md-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
}
.facilities-page .usage-fees__sub,
.research-page .usage-fees__sub {
color: var(--clr-text-secondary);
margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
.facilities-page .usage-fees__note,
.research-page .usage-fees__note {
font-size: var(--body-xs-fs);
color: var(--clr-text-secondary);
}
.facilities-page .usage-fees__footnote,
.research-page .usage-fees__footnote {
margin-top: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
color: var(--clr-text-secondary);
}
.facilities-page .usage-guidelines__title,
.research-page .usage-guidelines__title {
font-size: var(--heading-md-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
.facilities-page .reservation__toolbar,
.research-page .reservation__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
flex-wrap: wrap;
}
.facilities-page .reservation__totals-label,
.research-page .reservation__totals-label {
font-size: var(--body-sm-fs);
color: var(--clr-text-secondary);
margin-right: 0.6rem;
}
.facilities-page .reservation__totals-value,
.research-page .reservation__totals-value {
font-size: var(--body-md-fs);
font-weight: 700;
color: var(--clr-primary-900);
}
.facilities-page .reservation__search,
.research-page .reservation__search {
position: relative;
flex: 0 0 28rem;
}
.facilities-page .reservation__search i,
.research-page .reservation__search i {
position: absolute;
left: 1.4rem;
top: 50%;
transform: translateY(-50%);
color: var(--clr-gray-400);
}
.facilities-page .reservation__search input,
.research-page .reservation__search input {
width: 100%;
height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-sm);
padding: 0 1.4rem 0 4rem;
font-size: var(--body-sm-fs);
background: #fff;
}
.facilities-page .reservation__search input:focus,
.research-page .reservation__search input:focus {
outline: none;
border-color: var(--clr-primary-700);
}
.facilities-page .reservation__categories,
.research-page .reservation__categories {
margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
}
.facilities-page .reservation__layout,
.research-page .reservation__layout {
display: grid;
grid-template-columns: 26rem 1fr 26rem;
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
align-items: flex-start;
}
@media (max-width: 1024px) {
.facilities-page .reservation__layout,
.research-page .reservation__layout {
grid-template-columns: 1fr;
}
}
.facilities-page .reservation__list,
.research-page .reservation__list {
display: flex;
flex-direction: column;
gap: 0;
max-height: 72rem;
overflow-y: auto;
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
background: #fff;
}
.facilities-page .reservation__list-head,
.research-page .reservation__list-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
border-bottom: 1px solid var(--clr-gray-200);
font-size: var(--body-sm-fs);
font-weight: 600;
color: var(--clr-text-primary);
position: sticky;
top: 0;
background: #fff;
z-index: 1;
}
.facilities-page .reservation__sort,
.research-page .reservation__sort {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: transparent;
border: 0;
color: var(--clr-text-secondary);
font-size: var(--body-xs-fs);
cursor: pointer;
}
.facilities-page .reservation__detail,
.research-page .reservation__detail {
padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
background: #fff;
}
.facilities-page .reservation__detail-img,
.research-page .reservation__detail-img {
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.facilities-page .reservation__detail-name,
.research-page .reservation__detail-name {
font-size: var(--heading-sm-fs);
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: 0.4rem;
}
.facilities-page .reservation__detail-sub,
.research-page .reservation__detail-sub {
font-size: var(--body-sm-fs);
color: var(--clr-text-secondary);
margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.facilities-page .reservation__detail-meta,
.research-page .reservation__detail-meta {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 0 0 clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.facilities-page .reservation__detail-meta div,
.research-page .reservation__detail-meta div {
display: grid;
grid-template-columns: 9rem 1fr;
gap: 1rem;
font-size: var(--body-sm-fs);
}
.facilities-page .reservation__detail-meta dt,
.research-page .reservation__detail-meta dt {
color: var(--clr-text-secondary);
}
.facilities-page .reservation__detail-meta dd,
.research-page .reservation__detail-meta dd {
color: var(--clr-text-primary);
margin: 0;
}
.facilities-page .reservation__detail-more,
.research-page .reservation__detail-more {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 1.2rem;
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-sm);
background: #fff;
font-size: var(--body-xs-fs);
color: var(--clr-text-primary);
cursor: pointer;
}
.facilities-page .reservation__side,
.research-page .reservation__side {
display: flex;
flex-direction: column;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.facilities-page .reservation__apply-btn,
.research-page .reservation__apply-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
background: var(--clr-primary-700);
color: #fff;
border-radius: var(--radius-sm);
font-weight: 700;
text-decoration: none;
}
.facilities-page .reservation__side-tabs,
.research-page .reservation__side-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.facilities-page .reservation__side-tab,
.research-page .reservation__side-tab {
display: inline-flex;
align-items: center;
justify-content: space-between;
padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-sm);
background: #fff;
font-size: var(--body-sm-fs);
color: var(--clr-text-primary);
cursor: pointer;
}
.facilities-page .reservation__side-tab.is-active,
.research-page .reservation__side-tab.is-active {
background: var(--clr-primary-50);
border-color: var(--clr-primary-700);
color: var(--clr-primary-900);
}
.facilities-page .reservation__notices,
.research-page .reservation__notices {
padding: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
background: #fff;
}
.facilities-page .reservation__notices-head,
.research-page .reservation__notices-head {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--clr-text-secondary);
margin-bottom: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
}
.facilities-page .reservation__notice-list,
.research-page .reservation__notice-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
}
.facilities-page .reservation__notice-tag,
.research-page .reservation__notice-tag {
font-size: var(--body-xs-fs);
font-weight: 700;
color: var(--clr-primary-700);
}
.facilities-page .reservation__notice-body,
.research-page .reservation__notice-body {
font-size: var(--body-sm-fs);
color: var(--clr-text-primary);
line-height: 1.5;
}
.facilities-page .reservation__notice-pager,
.research-page .reservation__notice-pager {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
font-size: var(--body-xs-fs);
color: var(--clr-text-secondary);
}
.facilities-page .reservation__notice-pager button,
.research-page .reservation__notice-pager button {
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
}
.facilities-page .reservation__schedule,
.research-page .reservation__schedule {
margin-top: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
}
.facilities-page .reservation__schedule-head,
.research-page .reservation__schedule-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
flex-wrap: wrap;
}
.facilities-page .reservation__schedule-nav,
.research-page .reservation__schedule-nav {
display: inline-flex;
align-items: center;
gap: 1rem;
}
.facilities-page .reservation__schedule-nav button,
.research-page .reservation__schedule-nav button {
background: transparent;
border: 0;
color: var(--clr-text-primary);
cursor: pointer;
}
.facilities-page .reservation__schedule-legend,
.research-page .reservation__schedule-legend {
display: inline-flex;
align-items: center;
gap: 1.2rem;
font-size: var(--body-xs-fs);
color: var(--clr-text-secondary);
}
.facilities-page .reservation__legend-chip,
.research-page .reservation__legend-chip {
display: inline-block;
width: 1rem;
height: 1rem;
border-radius: var(--radius-xs);
margin-right: 0.4rem;
}
.facilities-page .reservation__legend-chip--pending,
.research-page .reservation__legend-chip--pending {
background: var(--clr-gray-300);
}
.facilities-page .reservation__legend-chip--approved,
.research-page .reservation__legend-chip--approved {
background: var(--clr-primary-700);
}
.facilities-page .reservation__legend-chip--completed,
.research-page .reservation__legend-chip--completed {
background: #15803d;
}
.facilities-page .reservation__schedule-grid,
.research-page .reservation__schedule-grid {
width: 100%;
}
.facilities-page .reservation__schedule-footnote,
.research-page .reservation__schedule-footnote {
margin-top: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
color: var(--clr-text-secondary);
}
.facilities-page .reservation-item,
.research-page .reservation-item {
display: flex;
gap: 1rem;
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
border-bottom: 1px solid var(--clr-gray-200);
text-align: left;
background: transparent;
transition: background-color 0.2s ease;
}
.facilities-page .reservation-item:hover,
.research-page .reservation-item:hover {
background: var(--clr-gray-50);
}
.facilities-page .reservation-item.is-active,
.research-page .reservation-item.is-active {
background: var(--clr-primary-50);
border-left: 3px solid var(--clr-primary-700);
}
.facilities-page .reservation-item__thumb,
.research-page .reservation-item__thumb {
width: 6.4rem;
flex-shrink: 0;
}
.facilities-page .reservation-item__body,
.research-page .reservation-item__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.facilities-page .reservation-item__name,
.research-page .reservation-item__name {
font-size: var(--body-md-fs);
font-weight: 700;
color: var(--clr-text-primary);
line-height: 1.3;
}
.facilities-page .reservation-item__sub,
.research-page .reservation-item__sub {
font-size: var(--body-xs-fs);
color: var(--clr-primary-700);
font-weight: 600;
}
.facilities-page .reservation-item__contact, .facilities-page .reservation-item__phone,
.research-page .reservation-item__contact,
.research-page .reservation-item__phone {
font-size: var(--body-xs-fs);
color: var(--clr-text-secondary);
line-height: 1.4;
}
/* ===================================================
Learning pages — Education Programs,
Outreach & Public Engagement, Learning Resources
=================================================== */
.learning-curriculum .curriculum-cont {
display: flex;
flex-direction: column;
gap: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem);
}
.learning-curriculum .curriculum-block {
min-width: 0;
}
.learning-curriculum .curriculum-head {
padding-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
.learning-curriculum .curriculum-note {
color: #333;
}
.learning-curriculum .curriculum-required-badge {
margin-left: 0.8rem;
font-weight: inherit;
vertical-align: middle;
background: #e5f0e3;
border: none;
padding: 0.6rem 1rem;
font-weight: 500;
}
.learning-curriculum .curriculum-level-badge {
padding: 0.6rem 1rem;
font-weight: 500;
}
.learning-curriculum .curriculum-level-badge--basic {
background: #e5f0e3;
color: #0c3731;
}
.learning-curriculum .curriculum-level-badge--advanced {
background: #e8f4fb;
color: #004a82;
}
.learning-curriculum .curriculum-level-badge--practical {
background: #fef3c7;
color: #92400e;
}
.learning-curriculum .curriculum-table-wrap {
overflow-x: auto;
width: 100%;
margin-top: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--clr-ui-main) #f7f7f7;
}
.learning-curriculum .curriculum-table-wrap::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
}
.learning-curriculum .curriculum-table-wrap::-webkit-scrollbar-track {
background: #f7f7f7;
}
.learning-curriculum .curriculum-table-wrap::-webkit-scrollbar-thumb {
background: var(--clr-ui-main);
border-radius: 999px;
}
.learning-curriculum .curriculum-table-wrap:focus-visible {
outline: 0.2rem solid var(--clr-ui-main);
outline-offset: 0.4rem;
}
.learning-curriculum .curriculum-table {
width: 100%;
min-width: 72rem;
border-collapse: collapse;
border-top: 0.1rem solid color-mix(in srgb, var(--clr-base-black) 34%, transparent);
table-layout: fixed;
}
.learning-curriculum .curriculum-table th,
.learning-curriculum .curriculum-table td {
border-bottom: 0.1rem solid color-mix(in srgb, var(--clr-base-black) 12%, transparent);
vertical-align: middle;
}
.learning-curriculum .curriculum-table th:not(:last-child),
.learning-curriculum .curriculum-table td:not(:last-child) {
border-right: 0.1rem solid color-mix(in srgb, var(--clr-base-black) 18%, transparent);
}
.learning-curriculum .curriculum-table thead {
background-color: #edf5eb;
color: var(--clr-base-black);
}
.learning-curriculum .curriculum-table thead th {
height: 5.4rem;
padding: 1.4rem 2rem;
border-bottom-color: color-mix(in srgb, var(--clr-base-black) 34%, transparent);
}
.learning-curriculum .curriculum-table tbody {
color: #444;
}
.learning-curriculum .curriculum-table tbody th,
.learning-curriculum .curriculum-table tbody td {
padding: 1.4rem 2rem;
}
.learning-curriculum .curriculum-table--system col:nth-child(1) {
width: 14%;
}
.learning-curriculum .curriculum-table--system col:nth-child(2) {
width: 15%;
}
.learning-curriculum .curriculum-table--system col:nth-child(3) {
width: 71%;
}
.learning-curriculum .curriculum-table--requirements {
min-width: 76rem;
}
.learning-curriculum .curriculum-table--requirements col:nth-child(1) {
width: 11%;
}
.learning-curriculum .curriculum-table--requirements col:nth-child(2) {
width: 39%;
}
.learning-curriculum .curriculum-table--requirements col:nth-child(3) {
width: 50%;
}
.learning-education-programs > .cont > .main > .content {
margin-top: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
}
.learning-education-programs .education-programs-tabs {
width: 100%;
}
.learning-education-programs .education-programs-list.ui-tabs {
width: 100%;
flex-wrap: wrap;
gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem);
margin: 0;
padding: 0;
}
.learning-education-programs .education-programs-tab.ui-tabs__item {
min-height: clamp(3.8rem, 0.5177993528vw + 3.6058252427rem, 4.6rem);
padding: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem) clamp(1rem, 0.5177993528vw + 0.8058252427rem, 1.8rem);
border: 0;
background: color-mix(in srgb, var(--clr-ui-main) 7%, transparent);
color: var(--clr-base-black);
transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}
@media (max-width: 768px) {
.learning-education-programs .education-programs-tab.ui-tabs__item {
min-height: auto;
}
}
.learning-education-programs .education-programs-tab.ui-tabs__item:hover, .learning-education-programs .education-programs-tab.ui-tabs__item:focus-visible {
background: color-mix(in srgb, var(--clr-ui-main) 13%, transparent);
color: var(--clr-ui-main);
outline: none;
}
.learning-education-programs .education-programs-tab.ui-tabs__item.is-active {
border-color: var(--clr-ui-main);
background: var(--clr-ui-main);
color: var(--clr-base-white);
}
.learning-education-programs .education-programs-check {
display: none;
flex: 0 0 auto;
margin-right: clamp(0.3rem, 0.1941747573vw + 0.227184466rem, 0.6rem);
}
.learning-education-programs .education-programs-tab.is-active .education-programs-check {
display: inline-flex;
}
.learning-education-programs .education-program-panel[hidden] {
display: none;
}
.learning-education-programs .education-program-overview {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
align-items: center;
gap: clamp(3.2rem, 3.1067961165vw + 2.0349514563rem, 8rem);
}
.learning-education-programs .education-program-img {
aspect-ratio: 16/10;
overflow: hidden;
border-radius: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.learning-education-programs .education-program-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.learning-education-programs .program-number,
.learning-education-programs .course-number {
color: color-mix(in srgb, var(--clr-primary-900) 68%, var(--clr-base-white));
}
@media (max-width: 768px) {
.learning-education-programs .course-number h4 {
font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
font-weight: 600;
}
}
.learning-education-programs .program-subtitle {
color: var(--clr-primary-900);
}
.learning-education-programs .program-description,
.learning-education-programs .course-description {
color: #444;
}
.learning-education-programs .education-courses-head {
display: flex;
align-items: center;
}
.learning-education-programs .education-course-list {
list-style: none;
border-top: 0.1rem solid color-mix(in srgb, var(--clr-base-black) 10%, transparent);
}
.learning-education-programs .education-course-item {
display: grid;
grid-template-columns: 4.8rem minmax(18rem, 28rem) 12rem minmax(0, 1fr);
align-items: center;
column-gap: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
padding: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem) clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
border-bottom: 0.1rem solid color-mix(in srgb, var(--clr-base-black) 10%, transparent);
}
.learning-education-programs .education-course-heading {
display: contents;
}
.learning-education-programs .course-description {
min-width: 0;
}
.learning-education-programs .education-course-badge {
justify-self: start;
color: var(--clr-primary-900);
background: color-mix(in srgb, var(--clr-primary-900) 3%, transparent);
padding: 0.6rem 1.2rem;
border-color: none;
}
.learning-education-programs .education-course-badge--basic {
color: #0c3731;
background: #e5f0e3;
}
.learning-education-programs .education-course-badge--advanced {
color: #004a82;
background: #e8f4fb;
}
@media (max-width: 1024px) {
.learning-education-programs .education-course-item {
grid-template-columns: 4rem minmax(16rem, 1fr) 11rem;
}
.learning-education-programs .course-description {
grid-column: 2/-1;
margin-top: 0.8rem;
}
}
@media (max-width: 768px) {
.learning-education-programs .education-program-overview {
grid-template-columns: 1fr;
}
}
@media (max-width: 544px) {
.learning-education-programs .education-course-item {
grid-template-columns: 3.2rem minmax(0, 1fr);
align-items: start;
row-gap: 0.8rem;
}
.learning-education-programs .course-number {
align-self: center;
}
.learning-education-programs .education-course-heading {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
grid-column: 2;
grid-row: 1;
min-width: 0;
}
.learning-education-programs .education-course-heading h4 {
min-width: 0;
font-size: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2rem);
}
.learning-education-programs .education-course-badge {
flex-shrink: 0;
margin-top: 0;
}
.learning-education-programs .course-description {
grid-column: 2;
grid-row: 2;
margin-top: 0;
}
}
.learning-internship {
--internship-surface: #e7f0e4;
}
.learning-internship > .cont > .main > .visual {
aspect-ratio: 20/7;
}
.learning-internship > .cont > .main > .content {
margin-top: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
}
.learning-internship .internship-content {
color: var(--clr-text-base);
}
.learning-internship .internship-intro {
color: var(--clr-text-sub);
}
.learning-internship .internship-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
margin-bottom: 0;
padding: 0;
list-style: none;
}
.learning-internship .internship-item {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
border: 0.1rem solid var(--clr-base-white);
border-radius: 1.6rem;
background-color: var(--internship-surface);
}
.learning-internship .internship-item > .text {
color: var(--clr-text-sub);
}
.learning-internship .internship-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
width: 100%;
padding-bottom: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
}
.learning-internship .internship-icon {
display: block;
width: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
aspect-ratio: 1;
border-radius: 0.8rem;
background-color: var(--clr-ui-main);
background-position: center;
background-repeat: no-repeat;
background-size: clamp(3.6rem, 0.7766990291vw + 3.3087378641rem, 4.8rem) auto;
}
.learning-internship .internship-icon--01 {
background-image: url("/assets/images/sub/outreach-icon01.svg");
}
.learning-internship .internship-icon--02 {
background-image: url("/assets/images/sub/outreach-icon02.svg");
}
.learning-internship .internship-icon--03 {
background-image: url("/assets/images/sub/outreach-icon03.svg");
}
@media (max-width: 768px) {
.learning-internship .internship-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 544px) {
.learning-internship > .cont > .main > .visual {
aspect-ratio: 4/3;
}
}
/* ===================================================
News / Events / Activities pages
=================================================== */
.news-page .about-section {
padding: clamp(6.4rem, 3.1067961165vw + 5.2349514563rem, 11.2rem) 0;
}
.news-page .news-list-section__categories,
.news-page .events-section__categories,
.news-page .activities-section__categories {
margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
}
.news-page .news-list-section__pager {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
margin-top: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem);
}
.news-page .news-list-section__pager button,
.news-page .news-list-section__pager a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3.6rem;
height: 3.6rem;
padding: 0 0.8rem;
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-sm);
background: #fff;
color: var(--clr-text-primary);
font-size: var(--body-sm-fs);
text-decoration: none;
cursor: pointer;
}
.news-page .news-list-section__pager .is-active {
background: var(--clr-primary-900);
color: #fff;
border-color: var(--clr-primary-900);
padding: 0 1.2rem;
min-width: 3.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.news-page .news-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
@media (max-width: 1024px) {
.news-page .news-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
.news-page .news-grid {
grid-template-columns: 1fr;
}
}
.news-page .events-section__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
flex-wrap: wrap;
}
.news-page .events-section__view .ui-tabs__item {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.news-page .events-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.news-page .events-calendar .ui-calendar__head {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.news-page .events-calendar .ui-calendar__nav {
background: transparent;
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-sm);
width: 3.6rem;
height: 3.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.news-page .events-calendar .ui-calendar__month {
font-size: var(--heading-sm-fs);
font-weight: 700;
color: var(--clr-text-primary);
}
.news-page .activities-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
@media (max-width: 1024px) {
.news-page .activities-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.news-page .activities-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
.news-page .activities-grid {
grid-template-columns: 1fr;
}
}
/* ─── People (about-page extension) ──────────────────────────────────────── */
.about-page .about-people__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
flex-wrap: wrap;
}
.about-page .about-people__totals-label {
font-size: var(--body-sm-fs);
color: var(--clr-text-secondary);
margin-right: 0.6rem;
}
.about-page .about-people__totals-value {
font-size: var(--body-md-fs);
font-weight: 700;
color: var(--clr-primary-900);
}
.about-page .about-people__search {
position: relative;
flex: 0 0 28rem;
}
.about-page .about-people__search i {
position: absolute;
left: 1.4rem;
top: 50%;
transform: translateY(-50%);
color: var(--clr-gray-400);
}
.about-page .about-people__search input {
width: 100%;
height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-sm);
padding: 0 1.4rem 0 4rem;
font-size: var(--body-sm-fs);
background: #fff;
}
.about-page .about-people__search input:focus {
outline: none;
border-color: var(--clr-primary-700);
}
.about-page .about-people__categories {
margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
}
.about-page .about-people__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
@media (max-width: 544px) {
.about-page .about-people__grid {
grid-template-columns: 1fr;
}
}
/* ===================================================
게시판 게시글 — 썸네일 / 첨부파일
(board-page · post-card · post-detail 의 신규 미디어 요소 한정)
=================================================== */
.post-card__thumb {
display: block;
overflow: hidden;
margin-bottom: var(--spacing-md);
border-radius: var(--radius-md);
background: var(--clr-gray-50);
aspect-ratio: 16/9;
}
.post-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--tran-3);
}
.post-card__link:hover .post-card__thumb img,
.post-card__link:focus-visible .post-card__thumb img {
transform: scale(1.04);
}
.post-card--gallery .post-card__thumb,
.post-card--webzine .post-card__thumb {
aspect-ratio: 4/3;
}
.post-attachments {
margin-top: var(--section-sm);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--clr-gray-100);
}
.post-attachments__title {
margin-bottom: var(--spacing-md);
}
.post-attachments__list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
list-style: none;
margin: 0;
padding: 0;
}
.post-attachments__link {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-lg);
border: 1px solid var(--clr-gray-100);
border-radius: var(--radius-md);
color: var(--clr-base-black);
transition: border-color var(--tran-3), background-color var(--tran-3), color var(--tran-3);
}
.post-attachments__link:hover, .post-attachments__link:focus-visible {
border-color: var(--clr-primary-500);
background: color-mix(in srgb, var(--clr-primary-500) 5%, transparent);
color: var(--clr-primary-500);
}
.post-attachments__icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
.post-attachments__name {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.post-attachments__size {
flex: 0 0 auto;
color: var(--clr-text-desc);
}
.post-detail__back {
display: flex;
justify-content: center;
margin-top: var(--section-sm);
}
.post-prev-next {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--spacing-md);
margin-top: var(--section-sm);
}
.post-prev-next__cell {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
min-width: 0;
padding: var(--spacing-lg);
border-radius: var(--radius-md);
color: var(--clr-text-primary);
transition: border-color var(--tran-3), background-color var(--tran-3);
}
.post-prev-next__cell--next {
align-items: flex-end;
text-align: right;
}
.post-prev-next__cell:hover:not(.post-prev-next__cell--empty), .post-prev-next__cell:focus-visible:not(.post-prev-next__cell--empty) {
border-color: var(--clr-accent-500);
background: color-mix(in srgb, var(--clr-accent-500) 5%, transparent);
}
.post-prev-next__cell--empty {
opacity: 0.5;
pointer-events: none;
}
.post-prev-next__content {
width: 100%;
min-width: 0;
overflow: hidden;
gap: var(--spacing-xs);
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.post-prev-next__cell--next .post-prev-next__content {
align-items: flex-end;
text-align: right;
}
.post-prev-next__arrow {
display: none;
}
.post-prev-next__label {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
color: var(--clr-accent-500);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.post-prev-next__title {
width: 100%;
max-width: 70%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 768px) {
.post-prev-next__title {
max-width: 100%;
}
}
.post-prev-next__date {
color: var(--clr-text-tertiary);
}
.post-prev-next--reference {
gap: clamp(4rem, 5.1779935275vw + 2.0582524272rem, 12rem);
margin-top: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
padding-top: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
border-top: 1px solid #ddd;
}
@media (max-width: 768px) {
.post-prev-next--reference {
gap: 1.2rem;
grid-template-columns: 1fr;
}
.post-prev-next--reference .post-prev-next__cell--next {
grid-template-columns: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem) minmax(0, 1fr);
align-items: center;
text-align: left;
}
.post-prev-next--reference .post-prev-next__cell--next .post-prev-next__arrow {
grid-column: 1;
grid-row: 1;
}
.post-prev-next--reference .post-prev-next__cell--next .post-prev-next__content {
grid-column: 2;
grid-row: 1;
align-items: flex-start;
text-align: left;
}
}
.post-prev-next--reference .post-prev-next__cell {
display: grid;
grid-template-columns: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem) minmax(0, 1fr);
align-items: center;
gap: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
min-width: 0;
min-height: clamp(8rem, 1.2944983819vw + 7.5145631068rem, 10rem);
overflow: hidden;
padding: clamp(1.1rem, 0.8414239482vw + 0.7844660194rem, 2.4rem);
background: #ebf1e9;
border-radius: 1.6rem;
transition: background-color var(--tran-3), color var(--tran-3), opacity var(--tran-3);
}
.post-prev-next--reference .post-prev-next__cell--next {
grid-template-columns: minmax(0, 1fr) clamp(5.6rem, 1.5533980583vw + 5.0174757282rem, 8rem);
}
.post-prev-next--reference .post-prev-next__cell--empty {
opacity: 0.4;
}
.post-prev-next--reference .post-prev-next__cell:hover:not(.post-prev-next--reference .post-prev-next__cell--empty), .post-prev-next--reference .post-prev-next__cell:focus-visible:not(.post-prev-next--reference .post-prev-next__cell--empty) {
background: var(--clr-ui-main);
color: var(--clr-base-white);
}
.post-prev-next--reference .post-prev-next__cell:hover:not(.post-prev-next--reference .post-prev-next__cell--empty) .post-prev-next__label,
.post-prev-next--reference .post-prev-next__cell:hover:not(.post-prev-next--reference .post-prev-next__cell--empty) .post-prev-next__title, .post-prev-next--reference .post-prev-next__cell:focus-visible:not(.post-prev-next--reference .post-prev-next__cell--empty) .post-prev-next__label,
.post-prev-next--reference .post-prev-next__cell:focus-visible:not(.post-prev-next--reference .post-prev-next__cell--empty) .post-prev-next__title {
color: var(--clr-base-white);
}
.post-prev-next--reference .post-prev-next__cell:hover:not(.post-prev-next--reference .post-prev-next__cell--empty) .post-prev-next__arrow, .post-prev-next--reference .post-prev-next__cell:focus-visible:not(.post-prev-next--reference .post-prev-next__cell--empty) .post-prev-next__arrow {
color: var(--clr-ui-main);
}
.post-prev-next--reference .post-prev-next__arrow {
display: inline-grid;
width: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
height: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
place-items: center;
border-radius: 50%;
background: #fff;
color: var(--clr-gray-700);
font-size: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
transition: color var(--tran-3);
}
.post-prev-next--reference .post-prev-next__content {
gap: 0.4rem;
min-width: 0;
overflow: hidden;
}
.post-prev-next--reference .post-prev-next__label {
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: normal;
text-transform: none;
transition: color var(--tran-3);
}
.post-prev-next--reference .post-prev-next__title {
color: #444;
transition: color var(--tran-3);
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 1;
}
.post-prev-next--reference .post-prev-next__date {
display: none;
}
.board-detail {
padding-bottom: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
color: var(--clr-text-base);
}
.board-detail__inner {
padding-top: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.board-detail__sub-visual .no-sub-visual__title {
font-weight: 700;
letter-spacing: -0.035em;
}
.board-detail__header {
padding: 0 0 clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
border-bottom: 1px solid #ddd;
}
.board-detail__title {
margin: 0;
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.35;
word-break: keep-all;
}
@media (max-width: 544px) {
.board-detail__title {
font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
}
}
.board-detail__meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
margin-top: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
}
.board-detail__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem) clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.2rem);
margin: 0;
color: var(--clr-gray-600);
}
.board-detail__meta-item {
position: relative;
display: flex;
align-items: center;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
.board-detail__meta-item + .board-detail__meta-item {
padding-left: clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.2rem);
}
.board-detail__meta-item + .board-detail__meta-item::before {
position: absolute;
top: 50%;
left: 0;
width: 1px;
height: 1.4rem;
background: var(--clr-gray-300);
content: "";
transform: translateY(-50%);
}
.board-detail__meta-item dt {
color: #333;
font-weight: 600;
}
.board-detail__meta-item dd {
margin: 0;
color: #666;
}
.board-detail__body {
padding: clamp(4rem, 1.2944983819vw + 3.5145631068rem, 6rem) 0;
color: var(--clr-gray-800);
}
.board-detail__content {
margin-inline: auto;
line-height: 1.81;
word-break: keep-all;
}
.board-detail__content h2,
.board-detail__content h3,
.board-detail__content h4 {
color: var(--clr-text-base);
font-weight: 700;
line-height: 1.45;
}
.board-detail__content ul,
.board-detail__content ol {
padding-left: 1.4em;
}
.board-detail__content ul {
list-style: disc;
}
.board-detail__content ol {
list-style: decimal;
}
.board-detail__content blockquote {
padding: clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.6rem);
border-left: 0.3rem solid var(--clr-brand-primary);
background: var(--clr-gray-50);
}
.board-detail__content a {
color: var(--clr-brand-primary);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.board-detail__content img,
.board-detail__content video,
.board-detail__content iframe {
display: block;
max-width: 100%;
height: auto;
margin-inline: auto;
}
.board-detail__figure {
max-width: 120rem;
margin: clamp(4rem, 2.071197411vw + 3.2233009709rem, 7.2rem) auto 0;
overflow: hidden;
background: var(--clr-gray-50);
}
.board-detail__image {
position: static;
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.board-detail__attachments .post-attachments {
margin-top: clamp(4.8rem, 1.5533980583vw + 4.2174757282rem, 7.2rem);
}
.board-detail__footer {
display: flex;
justify-content: center;
margin-top: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.board-detail__list-button {
min-width: clamp(14rem, 3.8834951456vw + 12.5436893204rem, 20rem);
justify-content: center;
}
@media (max-width: 544px) {
.board-detail__inner {
padding-top: 5.6rem;
}
.board-detail__meta-row {
align-items: flex-end;
}
.board-detail__body {
min-height: 24rem;
padding-top: 3.6rem;
}
.post-prev-next--reference .post-prev-next__cell,
.post-prev-next--reference .post-prev-next__cell--next {
grid-template-columns: 3.6rem minmax(0, 1fr);
}
.post-prev-next--reference .post-prev-next__cell--next {
align-items: center;
text-align: left;
}
.post-prev-next--reference .post-prev-next__cell--next .post-prev-next__arrow {
grid-column: 1;
grid-row: 1;
}
.post-prev-next--reference .post-prev-next__cell--next .post-prev-next__content {
grid-column: 2;
grid-row: 1;
align-items: flex-start;
text-align: left;
}
}
/* ===================================================
Search results page (/search)
View: resources/views/pages/search/index.php
Rule #17 — typography hierarchy via no-* utility classes only.
This file = layout / position / background / border only.
=================================================== */
.search-page {
background: #fff;
}
.search-results {
/* 상단 여백: page-header 와 검색바 사이 숨통 (토큰만 — Rule #17-B). 하단 기존 유지. */
padding-block: var(--section-xs) clamp(6.4rem, 3.6245954693vw + 5.040776699rem, 12rem);
/* 검색 바 레이아웃은 sec-search-bar 섹션 SCSS 로 위임 (Rule #19) */
}
.search-results .sec-search-bar {
margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
.search-results {
/* ── Tabs ── */
}
.search-results__tabs {
margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
.search-results__tab-count {
margin-left: 0.4rem;
color: var(--clr-gray-400);
}
.search-results__count {
color: var(--clr-gray-600);
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.search-results__count strong {
color: var(--clr-primary-900);
}
.search-results {
/* ── Group (All tab) ── */
}
.search-results__group {
margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
background: #fff;
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
overflow: hidden;
}
.search-results__group:last-child {
margin-bottom: 0;
}
.search-results__group-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.2rem;
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
background: var(--clr-gray-50);
border-bottom: 1px solid var(--clr-gray-200);
}
@media (max-width: 544px) {
.search-results__group-head {
flex-direction: column;
align-items: flex-start;
}
}
.search-results__see-all {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--clr-primary-900);
text-decoration: none;
white-space: nowrap;
transition: color var(--dur-base) var(--ease-out-quart);
}
.search-results__see-all i {
transition: transform var(--dur-base) var(--ease-out-quart);
}
.search-results__see-all:hover {
color: var(--clr-primary-400);
}
.search-results__see-all:hover i {
transform: translateX(4px);
}
.search-results {
/* ── List ── */
}
.search-results__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.search-results {
/* 빈 상태 / 플레이스홀더는 `empty-state` 공용 컴포넌트로 위임 (Rule #19) */
/* ── Pagination ── */
}
.search-results__pagination {
display: flex;
justify-content: center;
gap: 0.4rem;
margin-top: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 4.8rem);
}
.search-results__page {
min-width: 4rem;
height: 4rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
border: 1px solid var(--clr-gray-200);
color: var(--clr-gray-700);
text-decoration: none;
transition: border-color var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart), background var(--dur-base) var(--ease-out-quart);
}
.search-results__page:hover {
border-color: var(--clr-primary-900);
color: var(--clr-primary-900);
}
.search-results__page.is-active {
background: var(--clr-primary-900);
border-color: var(--clr-primary-900);
color: #fff;
}
.search-results {
/* ── 정렬 사이드바: 모바일(lg↓)에서 세로 블록 대신 가로 스크롤 스트립 ──
레이아웃이 lg 에서 스택되면(sidebar 가 결과 위 풀폭) 세로 옵션이 화면을
크게 차지함 → 가로 한 줄로 압축. layout/overflow 만 (Rule #17 준수). */
}
@media (max-width: 1024px) {
.search-results__sidebar .ui-filter-sidebar__group {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: var(--spacing-sm);
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: var(--spacing-xs);
}
}
@media (max-width: 1024px) {
.search-results__sidebar .ui-filter-sidebar__group::-webkit-scrollbar {
display: none;
}
}
@media (max-width: 1024px) {
.search-results__sidebar .ui-filter-sidebar__group-label {
flex-shrink: 0;
margin-bottom: 0;
}
}
@media (max-width: 1024px) {
.search-results__sidebar .ui-filter-sidebar__option {
flex-shrink: 0;
white-space: nowrap;
padding: var(--spacing-xs) var(--spacing-md);
border-left: 0;
border-radius: var(--radius-round);
border: 1px solid var(--clr-gray-200);
}
}
@media (max-width: 1024px) {
.search-results__sidebar .ui-filter-sidebar__option.is-active {
border-color: var(--clr-primary-900);
}
}
/* ===================================================
Guide — /guide/components 쇼케이스 페이지 chrome.
원칙 (CLAUDE.md 절대규칙 #17 준수):
- 이 파일은 페이지 레이아웃·격자·sticky·data-display 만 담당.
- 타이포 위계(font-size/weight/family/lh/ls)는 SCSS에서 지정하지 않는다.
마크업에서 no-display-* / no-heading-* / no-body-* 유틸로만 부여.
- 컴포넌트(ui-*)·유틸(no-*)을 그대로 인용. 새 BEM 컴포넌트 정의 금지.
- 모든 spacing 은 var(--spacing-*) / var(--section-*) 토큰만 사용.
=================================================== */
.guide {
/* 페이지 컨테이너 — 좌우 여백 + 본문 최대폭. */
padding-bottom: var(--section-xl);
}
.guide__intro {
padding-top: var(--spacing-md);
padding-bottom: var(--spacing-md);
color: var(--clr-text-secondary);
}
/* === Sticky tab bar — ui-tabs 컴포넌트를 그대로 감싼다. === */
.guide-tabnav {
position: sticky;
top: 0;
z-index: 10;
background: var(--clr-base-white);
border-bottom: 1px solid var(--clr-gray-200);
padding-top: var(--spacing-sm);
padding-bottom: 0;
margin-bottom: var(--spacing-2xl);
/* ui-tabs 가 가진 border-bottom 을 sticky 바깥에서 처리하므로 끈다. */
}
.guide-tabnav .ui-tabs {
border-bottom: 0;
}
/* === Panel / section === */
.guide-panel[hidden] {
display: none;
}
.guide-panel + .guide-panel {
margin-top: 0;
}
.guide-section {
padding-top: var(--spacing-3xl);
padding-bottom: var(--spacing-3xl);
border-top: 1px solid var(--clr-gray-200);
}
.guide-section:first-child {
border-top: 0;
padding-top: 0;
}
.guide-section__head {
margin-bottom: var(--spacing-xl);
}
.guide-section__eyebrow {
display: inline-block;
padding: var(--spacing-xxs) var(--spacing-sm);
border-radius: var(--radius-sm);
background: var(--clr-primary-50);
color: var(--clr-primary-900);
text-transform: uppercase;
margin-bottom: var(--spacing-sm);
}
.guide-section__lead {
max-width: 72ch;
color: var(--clr-text-secondary);
margin-top: var(--spacing-sm);
}
.guide-section__body + .guide-section__body {
margin-top: var(--spacing-2xl);
}
/* 데모 블록 — variants 를 가로로 늘어놓는 라이브 영역 */
.guide-demo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-lg);
padding: var(--spacing-xl);
background: var(--clr-bg-section);
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
}
.guide-demo--dark {
background: var(--clr-gray-900);
border-color: var(--clr-gray-900);
}
.guide-demo--center {
justify-content: center;
}
.guide-demo--stack {
flex-direction: column;
align-items: stretch;
}
.guide-demo--plain {
background: transparent;
border: 0;
padding: 0;
}
.guide-demo__label {
width: 100%;
color: var(--clr-text-secondary);
margin-bottom: var(--spacing-xs);
}
.guide-demo--dark .guide-demo__label {
color: rgba(255, 255, 255, 0.6);
}
.guide-demo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
gap: var(--spacing-lg);
}
/* === Code snippet block ===
font-family / font-size / line-height 은 HTML 의 UA 모노스페이스 기본을
그대로 사용하고, 위계는 처럼 유틸로 부여한다. */
.guide-code {
margin-top: var(--spacing-md);
padding: var(--spacing-lg);
background: var(--clr-gray-900);
color: var(--clr-gray-100);
border-radius: var(--radius-md);
overflow-x: auto;
}
.guide-code code {
color: inherit;
white-space: pre;
}
/* === Color swatches === */
.guide-swatch-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
gap: var(--spacing-lg);
}
.guide-swatch {
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--clr-base-white);
}
.guide-swatch__chip {
height: 9.6rem;
background-color: var(--swatch-color, var(--clr-gray-200));
}
.guide-swatch__meta {
padding: var(--spacing-md);
}
.guide-swatch__token {
display: block;
color: var(--clr-text-primary);
margin-bottom: var(--spacing-xs);
word-break: break-all;
}
.guide-swatch__hex {
color: var(--clr-text-secondary);
}
.guide-swatch__role {
margin-top: var(--spacing-xs);
color: var(--clr-text-tertiary);
}
/* === Typography hierarchy rows === */
.guide-type {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.guide-type-row {
display: grid;
grid-template-columns: 18rem 1fr;
gap: var(--spacing-lg);
align-items: baseline;
padding-bottom: var(--spacing-lg);
border-bottom: 1px dashed var(--clr-gray-200);
}
@media (max-width: 768px) {
.guide-type-row {
grid-template-columns: 1fr;
}
}
.guide-type-row__meta {
color: var(--clr-text-secondary);
}
.guide-type-row__meta code {
display: block;
color: var(--clr-primary-900);
word-break: break-all;
}
.guide-type-row__sample {
color: var(--clr-text-primary);
}
/* === Spacing visualization === */
.guide-spacing-list {
display: grid;
gap: var(--spacing-md);
}
.guide-spacing-row {
display: grid;
grid-template-columns: 14rem 1fr;
gap: var(--spacing-md);
align-items: center;
}
@media (max-width: 768px) {
.guide-spacing-row {
grid-template-columns: 1fr;
}
}
.guide-spacing-row__meta {
color: var(--clr-text-secondary);
}
.guide-spacing-row__meta code {
display: inline-block;
color: var(--clr-primary-900);
}
.guide-spacing-row__bar {
width: var(--guide-bar-width, var(--spacing-md));
height: 1.6rem;
background: var(--clr-primary-900);
border-radius: var(--radius-xs);
}
.guide-section-spacing {
display: grid;
gap: var(--spacing-md);
}
.guide-section-spacing__row {
display: grid;
grid-template-columns: 14rem 1fr;
gap: var(--spacing-md);
align-items: stretch;
}
@media (max-width: 768px) {
.guide-section-spacing__row {
grid-template-columns: 1fr;
}
}
.guide-section-spacing__meta {
color: var(--clr-text-secondary);
}
.guide-section-spacing__meta code {
color: var(--clr-primary-900);
}
.guide-section-spacing__demo {
background: repeating-linear-gradient(45deg, var(--clr-primary-50), var(--clr-primary-50) 8px, var(--clr-base-white) 8px, var(--clr-base-white) 16px);
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-sm);
position: relative;
}
.guide-section-spacing__demo-inner {
background: var(--clr-base-white);
border-left: 2px solid var(--clr-primary-900);
border-right: 2px solid var(--clr-primary-900);
margin: 0 var(--spacing-lg);
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
color: var(--clr-text-secondary);
text-align: center;
}
/* === Border-radius preview === */
.guide-radius-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
gap: var(--spacing-lg);
}
.guide-radius {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
}
.guide-radius__box {
width: 100%;
aspect-ratio: 1/1;
background: var(--clr-primary-50);
border: 1px solid var(--clr-primary-500);
}
.guide-radius__label {
color: var(--clr-text-secondary);
}
/* === Container width preview === */
.guide-container-list {
display: grid;
gap: var(--spacing-sm);
}
.guide-container-bar {
display: grid;
grid-template-columns: 12rem 1fr;
gap: var(--spacing-md);
align-items: center;
}
.guide-container-bar__meta {
color: var(--clr-text-secondary);
}
.guide-container-bar__rule {
height: 0.4rem;
background: var(--clr-primary-900);
border-radius: var(--radius-round);
width: var(--guide-container-width, 100%);
max-width: 100%;
}
/* === Layout snippet card (header/footer 등) === */
.guide-snippet {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
padding: var(--spacing-xl);
background: var(--clr-bg-section);
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
}
.guide-snippet__note {
color: var(--clr-text-secondary);
}
/* === Form layout demo === */
.guide-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
max-width: 64rem;
}
@media (max-width: 544px) {
.guide-form-grid {
grid-template-columns: 1fr;
}
}
.guide-form-grid--inline {
grid-template-columns: 1fr auto;
align-items: end;
}
.guide-form-grid--stack {
grid-template-columns: 1fr;
}
.guide-field {
display: grid;
gap: var(--spacing-xs);
}
.guide-field__label {
color: var(--clr-text-primary);
}
.guide-field__input {
width: 100%;
height: 4.4rem;
padding: 0 var(--spacing-md);
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-sm);
background: var(--clr-base-white);
color: var(--clr-text-primary);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.guide-field__input:focus {
outline: none;
border-color: var(--clr-primary-900);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-brand-primary) 16%, transparent);
}
.guide-field__input--textarea {
height: auto;
min-height: 10rem;
padding: var(--spacing-md);
resize: vertical;
}
.guide-field__input.is-error {
border-color: var(--clr-status-error);
}
.guide-field__input.is-error:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
}
.guide-field__input:disabled {
background: var(--clr-gray-100);
color: var(--clr-text-tertiary);
cursor: not-allowed;
}
.guide-field__helper {
color: var(--clr-text-secondary);
}
.guide-field__error {
color: var(--clr-status-error);
}
/* === Alert (Forms/Components 공용) — 임시 inline alert, 추후 ui-alert 도입 시 교체 === */
.guide-alert {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-lg);
border-left: 4px solid var(--clr-gray-400);
background: var(--clr-bg-section);
color: var(--clr-text-primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.guide-alert + .guide-alert {
margin-top: var(--spacing-sm);
}
.guide-alert--success {
border-left-color: var(--clr-status-success);
background: rgba(22, 163, 74, 0.06);
}
.guide-alert--warning {
border-left-color: var(--clr-status-warning);
background: rgba(217, 119, 6, 0.06);
}
.guide-alert--error {
border-left-color: var(--clr-status-error);
background: rgba(220, 38, 38, 0.06);
}
.guide-alert--info {
border-left-color: var(--clr-status-info);
background: rgba(0, 168, 204, 0.06);
}
/* === Chip (simple, until ui-chip 컴포넌트 정의) === */
.guide-chip {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xxs) var(--spacing-md);
background: var(--clr-gray-100);
color: var(--clr-text-secondary);
border-radius: var(--radius-round);
}
.guide-chip--primary {
background: var(--clr-primary-50);
color: var(--clr-primary-900);
}
.guide-chip__close {
background: none;
border: 0;
padding: 0;
color: inherit;
cursor: pointer;
opacity: 0.6;
}
.guide-chip__close:hover {
opacity: 1;
}
/* === Mock card (for Layout 탭 — 헤더·푸터 등 라이브 임베드 없이 frame 만 표시) === */
.guide-mockup {
background: var(--clr-base-white);
border: 1px dashed var(--clr-gray-300);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
color: var(--clr-text-secondary);
text-align: center;
}
.guide-mockup__pin {
display: inline-block;
padding: var(--spacing-xxs) var(--spacing-md);
background: var(--clr-primary-900);
color: var(--clr-base-white);
border-radius: var(--radius-round);
margin-bottom: var(--spacing-sm);
text-transform: uppercase;
}
/* ===================================================
/guide/sections 전용 보조 클래스
- 섹션 partial 의 실제 디자인을 풀폭으로 보여주는 라이브 프레임.
- .guide-demo 와 달리 padding·background 를 두지 않는다 (섹션 자체가 책임).
=================================================== */
.guide-section-item {
padding-top: var(--spacing-3xl);
padding-bottom: var(--spacing-3xl);
border-top: 1px solid var(--clr-gray-200);
}
.guide-section-item:first-child {
border-top: 0;
padding-top: 0;
}
.guide-section-item__meta {
margin-bottom: var(--spacing-xl);
}
.guide-section-item__meta > code {
display: inline-block;
padding: var(--spacing-xxs) var(--spacing-sm);
background: var(--clr-primary-50);
color: var(--clr-primary-900);
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-sm);
}
.guide-section-item__desc {
max-width: 72ch;
color: var(--clr-text-secondary);
margin-top: var(--spacing-xs);
}
.guide-section-item__frame {
position: relative;
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
background: var(--clr-base-white);
overflow: hidden;
/* 섹션 안에서 .no-container-* 가 풀폭이 아닌 데모 폭에 맞춰지도록 */
}
.guide-section-item__frame > section {
width: 100%;
}
.guide-section-item__frame--bleed {
/* 본문 컨테이너 .no-container-xl 의 좌우 패딩을 무시하고 풀-블리드로 노출 */
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
border-left: 0;
border-right: 0;
border-radius: 0;
}
.guide-section-item__frame--dark {
background: var(--clr-gray-900);
}
:root {
--e-bg: var(--clr-base-white);
--e-fg: var(--clr-text-base);
--e-brand: var(--clr-primary-900);
--e-muted: var(--clr-text-sub);
--e-line: var(--clr-ui-border);
--e-line-light: var(--clr-gray-100);
--e-accent: var(--clr-status-error);
--e-accent-bg: var(--clr-primary-50);
--e-code-bg: #1e1e1e;
--e-code-fg: #d4d4d4;
}
.e-body {
margin: 0;
background: var(--e-bg);
color: var(--e-fg);
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
font-family: "Poppins", sans-serif;
}
.e-404 {
max-width: 400px;
width: 100%;
text-align: center;
}
.e-404__icon {
margin: 0 auto 28px;
color: var(--e-brand);
}
.e-404__icon svg {
width: 64px;
height: 64px;
stroke-width: 1.5;
}
.e-404__num {
font-size: clamp(48px, 10vw, 72px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
margin: 0 0 16px;
color: var(--e-brand);
}
.e-404__title {
font-size: clamp(15px, 2vw, 16px);
font-weight: 500;
margin: 0 0 8px;
color: var(--e-fg);
}
.e-404__desc {
font-size: 13px;
color: var(--e-muted);
margin: 0 0 32px;
line-height: 1.6;
}
.e-404__actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.e-btn {
appearance: none;
border: 1px solid var(--e-line);
background: transparent;
color: var(--e-fg);
border-radius: 6px;
padding: 10px 18px;
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.e-btn:hover {
background: var(--e-line-light);
border-color: var(--e-line);
}
.e-btn--primary {
background: var(--e-brand);
color: var(--e-bg);
border-color: var(--e-brand);
}
.e-btn--primary:hover {
opacity: 0.9;
}
.e-error {
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 24px;
}
.e-error__container {
width: min(720px, 100%);
text-align: left;
}
.e-error__header {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.e-error__badge {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: var(--e-fg);
background: var(--e-line-light);
border: 1px solid var(--e-line);
}
.e-error__exception {
font-size: 12px;
color: var(--e-muted);
font-family: "Poppins", sans-serif;
padding: 4px 10px;
background: var(--e-line-light);
border-radius: 4px;
border: 1px solid var(--e-line);
}
.e-error__title {
font-size: clamp(22px, 3.5vw, 32px);
font-weight: 700;
margin: 0 0 12px;
color: var(--e-fg);
line-height: 1.25;
}
.e-error__desc {
font-size: 15px;
color: var(--e-muted);
margin: 0 0 24px;
line-height: 1.6;
}
.e-error__desc .e-error__path {
padding: 2px 8px;
background: var(--e-line-light);
border-radius: 4px;
font-size: 13px;
}
.e-error__source {
margin: 24px 0;
border: 1px solid var(--e-line-light);
border-radius: 8px;
overflow: hidden;
}
.e-error__source-header {
padding: 12px 16px;
font-size: 12px;
font-family: "Poppins", sans-serif;
background: var(--e-line-light);
color: var(--e-fg);
border-bottom: 1px solid var(--e-line);
}
.e-error__source-file {
color: var(--e-muted);
}
.e-error__source-line {
color: var(--e-accent);
font-weight: 600;
}
.e-error__snippet {
background: var(--e-code-bg);
color: var(--e-code-fg);
}
.e-error__snippet-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
font-family: "Poppins", sans-serif;
}
.e-error__snippet-row td {
padding: 4px 16px;
vertical-align: top;
}
.e-error__snippet-row--active td {
background: var(--e-accent-bg);
color: var(--e-accent);
}
.e-error__snippet-row--active .e-error__snippet-num {
color: var(--e-accent);
font-weight: 600;
}
.e-error__snippet-num {
width: 1%;
min-width: 48px;
padding-right: 16px;
text-align: right;
user-select: none;
color: var(--e-muted);
}
.e-error__snippet-code code {
display: block;
white-space: pre;
overflow-x: auto;
}
.e-error__meta {
margin: 24px 0;
padding: 20px;
border: 1px solid var(--e-line-light);
border-radius: 8px;
font-size: 13px;
background: var(--e-bg);
}
.e-error__meta dt {
color: var(--e-muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.e-error__meta dd {
margin: 0 0 16px;
word-break: break-all;
}
.e-error__meta dd:last-child {
margin-bottom: 0;
}
.e-error__meta dd code {
padding: 2px 6px;
background: var(--e-line-light);
border-radius: 4px;
font-size: 12px;
}
.e-error__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 24px 0;
}
.e-error__details {
margin-top: 24px;
border: 1px solid var(--e-line-light);
border-radius: 8px;
overflow: hidden;
}
.e-error__details-summary {
padding: 14px 18px;
cursor: pointer;
font-weight: 600;
font-size: 13px;
background: var(--e-line-light);
color: var(--e-fg);
user-select: none;
}
.e-error__details-summary:hover {
background: var(--e-line);
}
.e-error__pre {
margin: 0;
padding: 16px;
max-height: 320px;
overflow: auto;
font-size: 11px;
line-height: 1.5;
font-family: "Poppins", sans-serif;
background: var(--e-code-bg);
color: var(--e-code-fg);
}
.e-btn--link {
border-color: transparent;
text-decoration: underline;
color: var(--e-muted);
}
.e-btn--link:hover {
background: transparent;
border-color: transparent;
color: var(--e-fg);
opacity: 1;
}
.online-consult-page {
background: var(--clr-base-white);
}
.online-consult-write {
--admin-primary: var(--clr-brand-primary);
--admin-primary-rgb: 158, 28, 38;
--admin-border-focus: var(--clr-brand-primary);
padding-top: 8rem;
padding-bottom: clamp(9.6rem, 5.4368932039vw + 7.5611650485rem, 18rem);
color: var(--clr-text-base);
}
.online-consult-write__hero {
padding-top: clamp(5.6rem, 2.3300970874vw + 4.7262135922rem, 9.2rem);
padding-bottom: clamp(5.6rem, 1.8122977346vw + 4.9203883495rem, 8.4rem);
}
.online-consult-write__sub-visual .no-sub-visual__nav {
margin-bottom: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
color: var(--clr-text-sub);
}
.online-consult-write__sub-visual .no-sub-visual__title {
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.03em;
}
.online-consult-write__heading {
margin: 0;
color: var(--clr-text-base);
font-weight: 700;
}
.online-consult-write__description {
max-width: 68rem;
margin: 1.2rem 0 0;
color: var(--clr-gray-600);
word-break: keep-all;
}
.online-consult-write__inner {
padding-top: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
border-top: 1px solid var(--clr-text-base);
}
.online-consult-write__intro {
margin-bottom: clamp(4.8rem, 1.5533980583vw + 4.2174757282rem, 7.2rem);
}
.online-consult-write__form {
position: relative;
display: grid;
gap: clamp(6.4rem, 2.071197411vw + 5.6233009709rem, 9.6rem);
}
.online-consult-write__honeypot {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.online-consult-write__section {
min-width: 0;
}
.online-consult-write__section-title {
margin: 0;
padding-bottom: 2.4rem;
border-bottom: 1px solid var(--clr-text-base);
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.025em;
}
.online-consult-write__row {
display: grid;
grid-template-columns: 16rem minmax(0, 1fr);
gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
align-items: center;
padding: 2.4rem 0;
border-bottom: 1px solid var(--clr-gray-200);
}
.online-consult-write__row--textarea {
align-items: start;
}
.online-consult-write__row--textarea .online-consult-write__label {
padding-top: 1.5rem;
}
.online-consult-write__label {
margin: 0;
color: var(--clr-text-base);
word-break: keep-all;
}
.online-consult-write__label span {
color: var(--clr-brand-accent);
}
.online-consult-write__field {
min-width: 0;
}
.online-consult-write__control {
display: block;
width: 100%;
min-height: 5.4rem;
padding: 0 1.8rem;
border: 1px solid transparent;
border-radius: 0.8rem;
background: color-mix(in srgb, var(--clr-text-base) 4%, var(--clr-base-white));
color: var(--clr-text-base);
font-family: inherit;
font-size: var(--body-md-fs);
outline: none;
transition: border-color 0.18s ease, background-color 0.18s ease;
}
.online-consult-write__control::placeholder {
color: var(--clr-gray-500);
}
.online-consult-write__control:focus {
border-color: var(--clr-brand-primary);
background: var(--clr-base-white);
box-shadow: none;
}
.online-consult-write__control:autofill, .online-consult-write__control:-webkit-autofill, .online-consult-write__control:-webkit-autofill:hover, .online-consult-write__control:-webkit-autofill:focus, .online-consult-write__control:-webkit-autofill:active {
-webkit-background-clip: padding-box;
background-clip: padding-box;
caret-color: var(--clr-text-base);
-webkit-text-fill-color: var(--clr-text-base);
-webkit-box-shadow: 0 0 0 100rem var(--clr-gray-50) inset;
box-shadow: 0 0 0 100rem var(--clr-gray-50) inset;
transition: background-color 9999s ease-out 0s;
}
.online-consult-write__field > .online-consult-write__control:focus, .online-consult-write__field > .admin-form__input.online-consult-write__control:focus {
border-color: var(--clr-brand-primary);
background: var(--clr-base-white);
outline: none;
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--clr-brand-primary) 12%, transparent);
}
.online-consult-write__field > .online-consult-write__control:autofill, .online-consult-write__field > .online-consult-write__control:-webkit-autofill, .online-consult-write__field > .online-consult-write__control:-webkit-autofill:hover, .online-consult-write__field > .online-consult-write__control:-webkit-autofill:focus, .online-consult-write__field > .online-consult-write__control:-webkit-autofill:active {
-webkit-text-fill-color: var(--clr-text-base);
-webkit-box-shadow: 0 0 0 100rem var(--clr-gray-50) inset;
box-shadow: 0 0 0 100rem var(--clr-gray-50) inset;
}
.online-consult-write select.online-consult-write__control {
padding-right: 5.2rem;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25 7 8.75l4-3.5' stroke='%231d1d1d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 2rem center;
cursor: pointer;
}
.online-consult-write__field--select {
position: relative;
}
.online-consult-write__field--select .cs-wrap {
position: relative;
display: block;
width: 100%;
}
.online-consult-write__field--select .cs-trigger {
display: flex;
width: 100%;
min-height: 5.4rem;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 0 2rem 0 1.8rem;
border: 1px solid transparent;
border-radius: 0.8rem;
background: color-mix(in srgb, var(--clr-text-base) 4%, var(--clr-base-white));
color: var(--clr-text-base);
font-family: inherit;
font-size: var(--body-md-fs);
text-align: left;
cursor: pointer;
transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.online-consult-write__field--select .cs-trigger:hover {
border-color: var(--clr-gray-300);
}
.online-consult-write__field--select .cs-trigger:focus-visible, .online-consult-write__field--select .cs-trigger--open, .online-consult-write__field--select .cs-trigger[aria-expanded=true] {
border-color: var(--clr-brand-primary);
background: var(--clr-base-white);
outline: none;
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--clr-brand-primary) 12%, transparent);
}
.online-consult-write__field--select .cs-trigger__value {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.online-consult-write__field--select .cs-trigger__value--empty {
color: var(--clr-gray-500);
}
.online-consult-write__field--select .cs-trigger__arrow {
display: inline-flex;
width: 1.6rem;
height: 1.6rem;
flex: 0 0 1.6rem;
align-items: center;
justify-content: center;
margin-left: 1.6rem;
color: var(--clr-text-base);
transition: transform 0.18s ease;
}
.online-consult-write__field--select .cs-trigger__arrow svg {
width: 1.4rem;
height: 1.4rem;
}
.online-consult-write__field--select .cs-trigger--open .cs-trigger__arrow,
.online-consult-write__field--select .cs-trigger[aria-expanded=true] .cs-trigger__arrow {
transform: rotate(180deg);
}
.online-consult-write__field--select .cs-dropdown {
position: absolute;
z-index: 30;
top: calc(100% + 0.8rem);
right: 0;
left: 0;
overflow: hidden;
border: 1px solid var(--clr-gray-300);
border-radius: 0.8rem;
background: var(--clr-base-white);
box-shadow: 0 1.2rem 3.2rem color-mix(in srgb, var(--clr-text-base) 14%, transparent);
}
.online-consult-write__field--select .cs-dropdown[hidden] {
display: none;
}
.online-consult-write__field--select .cs-dropdown--up {
top: auto;
bottom: calc(100% + 0.8rem);
}
.online-consult-write__field--select .cs-list {
max-height: 28rem;
margin: 0;
padding: 0.8rem;
overflow-y: auto;
overscroll-behavior: contain;
list-style: none;
}
.online-consult-write__field--select .cs-option {
display: flex;
min-height: 4.4rem;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
padding: 0.8rem 1.2rem;
border-radius: 0.6rem;
color: var(--clr-text-base);
font-size: var(--body-md-fs);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.online-consult-write__field--select .cs-option:hover:not(.online-consult-write__field--select .cs-option--disabled), .online-consult-write__field--select .cs-option--active:not(.online-consult-write__field--select .cs-option--disabled) {
background: var(--clr-gray-50);
}
.online-consult-write__field--select .cs-option--selected {
background: color-mix(in srgb, var(--clr-brand-primary) 7%, var(--clr-base-white));
color: var(--clr-brand-primary);
font-weight: 600;
}
.online-consult-write__field--select .cs-option__label {
min-width: 0;
flex: 1 1 auto;
}
.online-consult-write__field--select .cs-option__check {
display: inline-flex;
flex: 0 0 auto;
color: var(--clr-brand-primary);
}
.online-consult-write__textarea {
min-height: 18rem;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
resize: vertical;
}
.online-consult-write__radios {
display: flex;
flex-wrap: wrap;
gap: 2rem 4rem;
min-height: 5.4rem;
align-items: center;
}
.online-consult-write__radios .admin-radio-wrap {
position: relative;
display: inline-flex;
align-items: center;
gap: 1rem;
color: var(--clr-text-base);
cursor: pointer;
}
.online-consult-write__radios .admin-radio-wrap input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.online-consult-write__radios .admin-radio__dot {
position: relative;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
border: 1px solid var(--clr-gray-400);
border-radius: 50%;
background: var(--clr-base-white);
}
.online-consult-write__radios .admin-radio-wrap input:checked + .admin-radio__dot {
border-color: var(--clr-brand-primary);
}
.online-consult-write__radios .admin-radio-wrap input:checked + .admin-radio__dot::after {
content: "";
position: absolute;
inset: 0.4rem;
border-radius: 50%;
background: var(--clr-brand-primary);
}
.online-consult-write__radios .admin-radio-wrap input:focus-visible + .admin-radio__dot {
border-color: var(--clr-brand-primary);
outline: none;
box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--clr-brand-primary) 16%, transparent);
}
.online-consult-write__radios .admin-radio__label {
font-size: var(--body-md-fs);
}
.online-consult-write__file {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
min-height: 5.4rem;
overflow: hidden;
border: 1px solid var(--clr-gray-300);
border-radius: 0.8rem;
background: var(--clr-base-white);
}
.online-consult-write__file-name {
align-self: center;
min-width: 0;
padding: 0 1.8rem;
overflow: hidden;
color: var(--clr-gray-600);
text-overflow: ellipsis;
white-space: nowrap;
}
.online-consult-write__file-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 11rem;
padding: 0 1.8rem;
border-left: 1px solid var(--clr-gray-300);
background: var(--clr-gray-50);
color: var(--clr-text-base);
cursor: pointer;
transition: background-color 0.18s ease;
}
.online-consult-write__file-button:hover, .online-consult-write__file-button:focus-visible {
background: var(--clr-gray-100);
}
.online-consult-write__file-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.online-consult-write__file-help {
margin: 0.8rem 0 0;
color: var(--clr-gray-500);
}
.online-consult-write__field-help {
margin: 0.8rem 0 0;
color: var(--clr-gray-500);
}
.online-consult-write__captcha {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1.2rem;
}
.online-consult-write__captcha-image-wrap {
display: grid;
grid-template-columns: 16.4rem 4.8rem;
min-height: 5.4rem;
overflow: hidden;
border: 1px solid var(--clr-gray-300);
border-radius: 0.8rem;
background: var(--clr-gray-50);
}
.online-consult-write__captcha-image {
display: block;
width: 16.4rem;
height: 5.4rem;
}
.online-consult-write__captcha-refresh {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-left: 1px solid var(--clr-gray-300);
background: transparent;
color: var(--clr-text-base);
cursor: pointer;
transition: background-color 0.18s ease;
}
.online-consult-write__captcha-refresh:hover, .online-consult-write__captcha-refresh:focus-visible {
background: var(--clr-gray-100);
}
.online-consult-write__captcha-input {
min-width: 0;
}
.online-consult-write__field-error, .online-consult-write__form-error {
margin: 0.8rem 0 0;
color: var(--clr-brand-accent);
}
.online-consult-write__form-error {
margin: 0 0 2.4rem;
padding: 1.4rem 1.6rem;
border-radius: 0.8rem;
background: color-mix(in srgb, var(--clr-brand-accent) 7%, var(--clr-base-white));
}
.online-consult-write__section--privacy .online-consult-write__section-title {
margin-bottom: 2.4rem;
}
.online-consult-write__privacy {
overflow: hidden;
border: 1px solid var(--clr-gray-300);
border-radius: 0.8rem;
background: var(--clr-base-white);
}
.online-consult-write__privacy-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
padding: 2rem 2.4rem;
}
.online-consult-write__privacy-check.admin-checkbox-wrap {
position: relative;
display: inline-flex;
align-items: center;
gap: 1rem;
cursor: pointer;
}
.online-consult-write__privacy-check.admin-checkbox-wrap input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.online-consult-write__privacy-check.admin-checkbox-wrap .admin-checkbox__box {
position: relative;
display: inline-block;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
border: 1px solid var(--clr-gray-400);
border-radius: 0.4rem;
background: var(--clr-base-white);
}
.online-consult-write__privacy-check.admin-checkbox-wrap input:checked + .admin-checkbox__box {
border-color: var(--clr-brand-primary);
background: var(--clr-brand-primary);
}
.online-consult-write__privacy-check.admin-checkbox-wrap input:checked + .admin-checkbox__box::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0.5rem;
height: 0.9rem;
border-right: 0.2rem solid var(--clr-base-white);
border-bottom: 0.2rem solid var(--clr-base-white);
transform: translate(-50%, -58%) rotate(45deg);
transform-origin: center;
}
.online-consult-write__privacy-check.admin-checkbox-wrap input:focus-visible + .admin-checkbox__box {
outline: 0.3rem solid color-mix(in srgb, var(--clr-brand-primary) 16%, transparent);
outline-offset: 0.2rem;
}
.online-consult-write__privacy-check.admin-checkbox-wrap .admin-checkbox__label {
color: var(--clr-text-base);
font-size: var(--body-sm-fs);
font-weight: 600;
}
.online-consult-write__privacy-toggle {
display: inline-flex;
align-items: center;
gap: 0.8rem;
flex: 0 0 auto;
padding: 0.4rem 0;
border: 0;
background: transparent;
color: var(--clr-text-base);
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.online-consult-write__privacy-toggle span,
.online-consult-write__privacy-toggle i {
text-decoration: none;
}
.online-consult-write__privacy-toggle i {
font-size: 1.2rem;
transition: transform 0.18s ease;
}
.online-consult-write__privacy-toggle[aria-expanded=true] i {
transform: rotate(180deg);
}
.online-consult-write__privacy-toggle:focus-visible {
border-radius: 0.3rem;
outline: 0.2rem solid var(--clr-brand-primary);
outline-offset: 0.3rem;
}
.online-consult-write__privacy-panel {
max-height: 36rem;
padding: 2.4rem;
overflow-y: auto;
border-top: 1px solid var(--clr-gray-300);
background: var(--clr-gray-50);
}
.online-consult-write__privacy-panel[hidden] {
display: none;
}
.online-consult-write__privacy-intro {
margin: 0;
color: var(--clr-gray-700);
}
.online-consult-write__privacy-list {
display: grid;
gap: 1.6rem;
margin-top: 2rem;
}
.online-consult-write__privacy-item-title {
margin: 0;
color: var(--clr-text-base);
}
.online-consult-write__privacy-item-body {
margin: 0.4rem 0 0;
color: var(--clr-gray-600);
word-break: keep-all;
}
.online-consult-write__actions {
display: flex;
justify-content: center;
margin-top: -2.4rem;
}
.online-consult-write__button.ui-cta {
width: min(100%, 22rem);
min-height: 5.8rem;
justify-content: center;
border-radius: 0.8rem;
font-weight: 600;
}
.online-consult-write__button--submit.ui-cta {
border-color: var(--clr-brand-primary);
background: var(--clr-brand-primary);
color: var(--clr-base-white);
}
.online-consult-write__button--submit.ui-cta:hover, .online-consult-write__button--submit.ui-cta:focus-visible {
border-color: var(--clr-brand-primary-dark);
background: var(--clr-brand-primary-dark);
}
.online-consult-write__button--submit.ui-cta:focus:not(:focus-visible) {
border-color: var(--clr-brand-primary);
background: var(--clr-brand-primary);
color: var(--clr-base-white);
}
.online-consult-write__button--submit.ui-cta:active {
border-color: var(--clr-brand-primary-dark);
background: var(--clr-brand-primary-dark);
color: var(--clr-base-white);
}
.online-consult-write__button--submit.ui-cta:disabled, .online-consult-write__button--submit.ui-cta.is-submitting {
border-color: var(--clr-brand-primary);
background: var(--clr-brand-primary);
color: var(--clr-base-white);
opacity: 0.78;
cursor: wait;
transform: none;
}
@media (max-width: 768px) {
.online-consult-write__form {
gap: 5.6rem;
}
.online-consult-write__row {
grid-template-columns: 1fr;
gap: 1.2rem;
padding: 2rem 0;
}
.online-consult-write__row--textarea .online-consult-write__label {
padding-top: 0;
}
}
@media (max-width: 544px) {
.online-consult-write__captcha {
grid-template-columns: 1fr;
}
.online-consult-write__captcha-image-wrap {
width: 21.2rem;
}
.online-consult-write__privacy-header {
align-items: flex-start;
flex-direction: column;
}
.online-consult-write__privacy-panel {
max-height: 32rem;
padding: 2rem;
}
.online-consult-write__file {
grid-template-columns: minmax(0, 1fr) 9.6rem;
}
.online-consult-write__file-button {
min-width: 0;
padding: 0 1.2rem;
}
}
.online-consult {
padding-top: 8rem;
padding-bottom: clamp(9.6rem, 5.4368932039vw + 7.5611650485rem, 18rem);
color: var(--clr-text-base);
}
.online-consult__hero {
padding: clamp(5.6rem, 2.3300970874vw + 4.7262135922rem, 9.2rem) 0 clamp(6.4rem, 3.1067961165vw + 5.2349514563rem, 11.2rem);
}
.online-consult__sub-visual .no-sub-visual__nav {
margin-bottom: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
color: var(--clr-text-sub);
}
.online-consult__sub-visual .no-sub-visual__title {
color: var(--clr-text-base);
}
.online-consult__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
margin-bottom: clamp(4.4rem, 1.6828478964vw + 3.7689320388rem, 7rem);
}
.online-consult__search {
position: relative;
width: min(100%, 36rem);
margin: 0;
}
.online-consult .ui-search-input--online-consult .ui-search-input__field {
height: clamp(5.2rem, 0.3883495146vw + 5.054368932rem, 5.8rem);
padding: 0 9rem 0 clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
border: 1px solid transparent;
border-radius: 1.2rem;
background: color-mix(in srgb, var(--clr-text-base) 4%, var(--clr-base-white));
color: var(--clr-text-base);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.online-consult .ui-search-input--online-consult .ui-search-input__field::placeholder {
color: var(--clr-gray-500);
}
.online-consult .ui-search-input--online-consult .ui-search-input__field:focus {
border-color: var(--clr-gray-400);
background: color-mix(in srgb, var(--clr-text-base) 4%, var(--clr-base-white));
}
.online-consult .ui-search-input--online-consult .ui-search-input__icon {
display: none;
}
.online-consult .ui-search-input--online-consult .ui-search-input__clear {
right: 5.6rem;
}
.online-consult__search-submit {
position: absolute;
top: 50%;
right: 1.2rem;
display: inline-grid;
place-items: center;
width: 4rem;
height: 4rem;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--clr-text-base);
cursor: pointer;
transform: translateY(-50%);
transition: background-color 0.18s ease, color 0.18s ease;
}
.online-consult__search-submit:hover, .online-consult__search-submit:focus-visible {
background: var(--clr-base-white);
color: var(--clr-brand-primary);
outline: none;
}
.online-consult__inquiry-button.ui-cta {
min-width: clamp(14.2rem, 2.2006472492vw + 13.3747572816rem, 17.6rem);
min-height: clamp(5.2rem, 0.3883495146vw + 5.054368932rem, 5.8rem);
justify-content: center;
border-color: var(--clr-text-base);
border-radius: 1.2rem;
color: var(--clr-text-base);
font-weight: 600;
}
.online-consult__inquiry-button.ui-cta:hover, .online-consult__inquiry-button.ui-cta:focus-visible {
border-color: var(--clr-brand-primary);
background: var(--clr-brand-primary);
color: var(--clr-base-white);
}
.online-consult__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
min-height: 3.2rem;
margin-bottom: 1.2rem;
color: var(--clr-gray-600);
}
.online-consult__summary strong {
color: var(--clr-brand-primary);
font-weight: 700;
}
.online-consult__search-keyword {
display: inline-flex;
align-items: center;
gap: 1.2rem;
}
.online-consult__search-keyword a {
color: var(--clr-text-base);
text-decoration: underline;
text-underline-offset: 0.3rem;
}
.online-consult__list-head, .online-consult__item {
display: grid;
grid-template-columns: minmax(34rem, 1fr) auto 10rem;
align-items: center;
gap: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 2.8rem);
}
.online-consult__list-head {
min-height: 6rem;
padding: 0 clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
border-top: 1px solid var(--clr-text-base);
border-bottom: 1px solid var(--clr-gray-300);
color: var(--clr-gray-600);
font-size: var(--body-sm-fs);
font-weight: 600;
text-align: center;
}
.online-consult__primary-head, .online-consult__primary {
display: grid;
grid-template-columns: 7rem 9rem minmax(18rem, 1fr);
align-items: center;
gap: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
min-width: 0;
}
.online-consult__meta-head, .online-consult__meta {
display: grid;
grid-template-columns: 7rem 9rem;
align-items: center;
gap: clamp(1rem, 0.5177993528vw + 0.8058252427rem, 1.8rem);
text-align: center;
}
.online-consult__list {
margin: 0;
padding: 0;
list-style: none;
}
.online-consult__item {
padding: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem) clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
border-bottom: 1px solid var(--clr-gray-200);
}
.online-consult__number {
color: var(--clr-gray-500);
text-align: center;
}
.online-consult__category-field {
display: flex;
min-width: 0;
align-items: center;
justify-content: center;
}
.online-consult__category {
display: inline-flex;
align-items: center;
justify-content: center;
justify-self: center;
min-height: 3.2rem;
padding: 0.5rem 1rem;
border-radius: 0.6rem;
background: var(--clr-brand-primary);
color: var(--clr-base-white);
font-weight: 600;
white-space: nowrap;
}
.online-consult__field-label {
display: none;
}
.online-consult__title {
overflow: hidden;
margin: 0;
color: var(--clr-text-base);
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}
.online-consult__title-text {
overflow: hidden;
text-overflow: ellipsis;
}
.online-consult__meta {
color: var(--clr-gray-600);
}
.online-consult__meta-item {
white-space: nowrap;
}
.online-consult__meta-label, .online-consult__state-label {
display: none;
}
.online-consult__state {
display: flex;
justify-content: center;
}
.online-consult__pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 8.6rem;
min-height: 4rem;
padding: 0.8rem 1.4rem;
border-radius: 999px;
font-size: var(--body-sm-fs);
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.online-consult__pill--consultation {
border: 1px solid var(--clr-text-base);
background: var(--clr-base-white);
color: var(--clr-text-base);
}
.online-consult__pill--consultation.is-complete {
border-color: var(--clr-text-base);
background: var(--clr-text-base);
color: var(--clr-base-white);
}
.online-consult__pill--answer {
border: 1px solid var(--clr-gray-300);
background: var(--clr-gray-100);
color: var(--clr-gray-600);
}
.online-consult__pill--answer.is-complete {
border-color: var(--clr-brand-primary);
background: var(--clr-brand-primary);
color: var(--clr-base-white);
}
.online-consult__empty {
display: flex;
min-height: clamp(26rem, 6.4724919094vw + 23.572815534rem, 36rem);
padding: 4rem 2rem;
border-bottom: 1px solid var(--clr-gray-200);
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.online-consult__empty-icon {
display: inline-grid;
place-items: center;
width: 5.6rem;
height: 5.6rem;
margin-bottom: 2rem;
border-radius: 50%;
background: var(--clr-gray-100);
color: var(--clr-gray-500);
font-size: 2rem;
}
.online-consult__empty-title {
margin: 0;
color: var(--clr-text-base);
}
.online-consult__empty-desc {
margin: 0.8rem 0 0;
color: var(--clr-gray-600);
}
.online-consult__pagination {
margin-top: clamp(4.4rem, 1.5533980583vw + 3.8174757282rem, 6.8rem);
}
.online-consult__pagination .no-pagination__link--num[aria-current=page] {
border-color: var(--clr-brand-primary);
background: var(--clr-brand-primary);
}
@media (max-width: 1280px) {
.online-consult__list-head {
display: none;
}
.online-consult__list {
border-top: 1px solid var(--clr-text-base);
}
.online-consult__item {
grid-template-columns: minmax(0, 1fr) auto;
gap: 2rem;
}
.online-consult__primary {
grid-column: 1/-1;
grid-template-columns: 5rem 8rem minmax(0, 1fr);
}
.online-consult__meta {
grid-template-columns: repeat(2, auto);
justify-content: start;
gap: 2rem;
text-align: left;
}
}
@media (max-width: 768px) {
.online-consult {
padding-top: 6rem;
}
.online-consult__hero {
padding-top: 4.8rem;
}
.online-consult__toolbar {
align-items: stretch;
flex-direction: column;
}
.online-consult__search {
width: 100%;
}
.online-consult__inquiry-button.ui-cta {
width: 100%;
}
.online-consult__list {
display: grid;
gap: 1.2rem;
border-top: 0;
}
.online-consult__item {
display: grid;
grid-template-columns: 1fr;
gap: 0;
padding: 2.4rem;
border: 1px solid var(--clr-gray-200);
border-radius: 1.4rem;
background: var(--clr-base-white);
box-shadow: 0 0.8rem 2.4rem rgba(29, 29, 29, 0.04);
}
.online-consult__primary {
grid-column: 1/-1;
grid-template-columns: auto 1fr;
gap: 1.2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--clr-gray-200);
}
.online-consult__number {
display: inline-flex;
grid-column: 1;
grid-row: 1;
gap: 0.8rem;
align-items: center;
text-align: left;
}
.online-consult__category-field {
display: inline-flex;
grid-column: 2;
grid-row: 1;
gap: 0.8rem;
justify-self: end;
}
.online-consult__field-label, .online-consult__meta-label, .online-consult__state-label {
display: block;
color: var(--clr-gray-500);
font-size: var(--body-xs-fs);
font-weight: 500;
line-height: 1.3;
}
.online-consult__field-value {
color: var(--clr-text-base);
font-weight: 600;
}
.online-consult__title {
display: flex;
overflow: visible;
grid-column: 1/-1;
grid-row: 2;
gap: 0.7rem;
margin-top: 0.8rem;
flex-direction: column;
white-space: normal;
}
.online-consult__title-text {
overflow: visible;
color: var(--clr-text-base);
font-weight: 600;
line-height: 1.45;
text-overflow: clip;
word-break: keep-all;
}
.online-consult__meta {
display: grid;
grid-column: 1/-1;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.6rem;
padding: 1.8rem 0;
border-bottom: 1px solid var(--clr-gray-200);
text-align: left;
}
.online-consult__meta-item {
display: flex;
min-width: 0;
gap: 0.6rem;
flex-direction: column;
color: var(--clr-text-base);
font-weight: 500;
}
.online-consult__state {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1.6rem;
padding-top: 1.8rem;
align-items: center;
justify-content: initial;
}
.online-consult__pill {
width: auto;
min-width: 9.6rem;
min-height: 3.8rem;
}
}
@media (max-width: 544px) {
.online-consult__summary {
align-items: flex-start;
flex-direction: column;
}
.online-consult__item {
padding: 2rem 1.8rem;
}
.online-consult__meta {
gap: 1.2rem;
}
.online-consult__category-field {
gap: 0.6rem;
}
.online-consult__pill {
min-width: 8.8rem;
}
}
.online-consult-write-legacy {
padding-top: 8rem;
padding-bottom: clamp(9.6rem, 5.4368932039vw + 7.5611650485rem, 18rem);
color: var(--clr-text-base);
}
.online-consult-write-legacy__hero {
padding-top: clamp(5.6rem, 2.3300970874vw + 4.7262135922rem, 9.2rem);
padding-bottom: clamp(5.6rem, 1.8122977346vw + 4.9203883495rem, 8.4rem);
}
.online-consult-write-legacy__sub-visual .no-sub-visual__nav {
margin-bottom: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
color: var(--clr-text-sub);
}
.online-consult-write-legacy__sub-visual .no-sub-visual__title {
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.03em;
}
.online-consult-write-legacy__inner {
padding-top: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
border-top: 1px solid var(--clr-text-base);
}
.online-consult-write-legacy__intro {
margin-bottom: clamp(3.6rem, 1.0355987055vw + 3.2116504854rem, 5.2rem);
}
.online-consult-write-legacy__heading {
margin: 0;
color: var(--clr-text-base);
font-weight: 700;
}
.online-consult-write-legacy__description {
max-width: 68rem;
margin: 1.2rem 0 0;
color: var(--clr-gray-600);
word-break: keep-all;
}
.online-consult-write-legacy__form {
display: grid;
gap: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
}
.online-consult-write-legacy__field {
min-width: 0;
}
.online-consult-write-legacy__label {
display: block;
margin-bottom: 1rem;
color: var(--clr-text-base);
}
.online-consult-write-legacy__label span {
color: var(--clr-brand-accent);
}
.online-consult-write-legacy__control {
display: block;
width: 100%;
min-height: 5.6rem;
padding: 0 1.8rem;
border: 1px solid var(--clr-gray-300);
border-radius: 0.8rem;
background: var(--clr-base-white);
color: var(--clr-text-base);
font-family: inherit;
font-size: var(--body-md-fs);
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.online-consult-write-legacy__control::placeholder {
color: var(--clr-gray-400);
}
.online-consult-write-legacy__control:focus {
border-color: var(--clr-brand-primary);
box-shadow: 0 0 0 0.3rem rgba(158, 28, 38, 0.08);
}
.online-consult-write-legacy select.online-consult-write-legacy__control {
cursor: pointer;
}
.online-consult-write-legacy__textarea {
min-height: 22rem;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
resize: vertical;
}
.online-consult-write-legacy__contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.online-consult-write-legacy__field-error, .online-consult-write-legacy__form-error {
margin: 0.8rem 0 0;
color: var(--clr-brand-accent);
}
.online-consult-write-legacy__form-error {
margin: 0 0 2.4rem;
padding: 1.4rem 1.6rem;
border-radius: 0.8rem;
background: rgba(226, 0, 22, 0.06);
}
.online-consult-write-legacy__privacy {
padding: 2rem;
border-radius: 0.8rem;
background: var(--clr-gray-50);
}
.online-consult-write-legacy__privacy-check.admin-checkbox-wrap {
position: relative;
display: inline-flex;
align-items: center;
gap: 1rem;
cursor: pointer;
}
.online-consult-write-legacy__privacy-check.admin-checkbox-wrap input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.online-consult-write-legacy__privacy-check.admin-checkbox-wrap .admin-checkbox__box {
position: relative;
display: inline-block;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
border: 1px solid var(--clr-gray-400);
border-radius: 0.4rem;
background: var(--clr-base-white);
}
.online-consult-write-legacy__privacy-check.admin-checkbox-wrap input:checked + .admin-checkbox__box {
border-color: var(--clr-brand-primary);
background: var(--clr-brand-primary);
}
.online-consult-write-legacy__privacy-check.admin-checkbox-wrap input:checked + .admin-checkbox__box::after {
content: "";
position: absolute;
top: 0.35rem;
left: 0.65rem;
width: 0.5rem;
height: 0.9rem;
border-right: 0.2rem solid var(--clr-base-white);
border-bottom: 0.2rem solid var(--clr-base-white);
transform: rotate(45deg);
}
.online-consult-write-legacy__privacy-check.admin-checkbox-wrap input:focus-visible + .admin-checkbox__box {
outline: 0.3rem solid rgba(158, 28, 38, 0.14);
outline-offset: 0.2rem;
}
.online-consult-write-legacy__privacy-check.admin-checkbox-wrap .admin-checkbox__label {
color: var(--clr-text-base);
font-size: var(--body-sm-fs);
font-weight: 600;
}
.online-consult-write-legacy__privacy-note {
margin: 1rem 0 0 3rem;
color: var(--clr-gray-600);
}
.online-consult-write-legacy__actions {
display: grid;
grid-template-columns: minmax(14rem, 0.45fr) minmax(18rem, 1fr);
gap: 1.2rem;
margin-top: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 2.8rem);
}
.online-consult-write-legacy__button.ui-cta {
width: 100%;
min-height: 5.8rem;
justify-content: center;
border-radius: 0.8rem;
font-weight: 600;
}
.online-consult-write-legacy__button--back.ui-cta {
border-color: var(--clr-text-base);
color: var(--clr-text-base);
}
.online-consult-write-legacy__button--back.ui-cta:hover, .online-consult-write-legacy__button--back.ui-cta:focus-visible {
border-color: var(--clr-text-base);
background: var(--clr-text-base);
color: var(--clr-base-white);
}
.online-consult-write-legacy__button--submit.ui-cta {
border-color: var(--clr-brand-primary);
background: var(--clr-brand-primary);
color: var(--clr-base-white);
}
.online-consult-write-legacy__button--submit.ui-cta:hover, .online-consult-write-legacy__button--submit.ui-cta:focus-visible {
border-color: var(--clr-brand-primary-dark);
background: var(--clr-brand-primary-dark);
}
@media (max-width: 768px) {
.online-consult-write-legacy {
padding-top: 6rem;
}
.online-consult-write-legacy__hero {
padding-top: 4.8rem;
}
.online-consult-write-legacy__contact-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 544px) {
.online-consult-write-legacy__actions {
grid-template-columns: 1fr;
}
.online-consult-write-legacy__button--submit {
grid-row: 1;
}
.online-consult-write-legacy__button--back {
grid-row: 2;
}
}
body.has-online-contact-modal {
overflow: hidden;
}
.online-contact-password {
position: fixed;
z-index: 1200;
inset: 0;
display: grid;
place-items: center;
padding: 2rem;
opacity: 0;
transition: opacity 0.16s ease;
}
.online-contact-password[hidden] {
display: none;
}
.online-contact-password.is-open {
opacity: 1;
}
.online-contact-password__backdrop {
position: absolute;
inset: 0;
background: rgba(12, 7, 8, 0.72);
backdrop-filter: blur(0.5rem);
}
.online-contact-password__dialog {
position: relative;
width: min(100%, 52rem);
max-height: min(76rem, 100vh - 4rem);
padding: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
overflow-y: auto;
border: 1px solid color-mix(in srgb, var(--clr-brand-primary) 18%, var(--clr-gray-200));
border-radius: 2rem;
background: var(--clr-base-white);
box-shadow: 0 2.4rem 8rem rgba(15, 7, 8, 0.24);
text-align: center;
}
.online-contact-password__close {
position: absolute;
top: 1.6rem;
right: 1.6rem;
display: inline-grid;
place-items: center;
width: 4rem;
height: 4rem;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--clr-text-base);
font-size: 2rem;
cursor: pointer;
}
.online-contact-password__close:hover, .online-contact-password__close:focus-visible {
background: var(--clr-gray-100);
outline: none;
}
.online-contact-password__title {
margin: 0;
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.03em;
}
.online-contact-password__description {
margin: 1rem 0 0;
color: var(--clr-gray-600);
}
.online-contact-password__form {
margin-top: 2.8rem;
}
.online-contact-password__input {
width: 100%;
height: 6rem;
padding: 0 2rem;
border: 1px solid var(--clr-gray-300);
border-radius: 1rem;
background: var(--clr-gray-50);
color: var(--clr-text-base);
font-family: inherit;
font-weight: 600;
letter-spacing: 0.8rem;
text-align: center;
outline: none;
}
.online-contact-password__input:focus {
border-color: var(--clr-brand-primary);
background: var(--clr-base-white);
box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--clr-brand-primary) 11%, transparent);
}
.online-contact-password__input[aria-invalid=true] {
border-color: var(--clr-brand-primary);
}
.online-contact-password__error {
margin: 1rem 0 0;
color: var(--clr-brand-primary);
font-weight: 600;
}
.online-contact-password__error[hidden] {
display: none;
}
.online-contact-password__help {
margin: 1rem 0 0;
color: var(--clr-gray-500);
text-align: left;
}
.online-contact-password__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 3rem;
}
.online-contact-password__button {
min-height: 5.6rem;
padding: 1rem 1.8rem;
border-radius: 0.9rem;
font-family: inherit;
cursor: pointer;
transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.online-contact-password__button [hidden] {
display: none;
}
.online-contact-password__button--cancel {
border: 1px solid var(--clr-text-base);
background: var(--clr-base-white);
color: var(--clr-text-base);
}
.online-contact-password__button--cancel:hover, .online-contact-password__button--cancel:focus-visible {
border-color: var(--clr-gray-600);
background: var(--clr-gray-100);
outline: none;
}
.online-contact-password__button--confirm {
border: 1px solid var(--clr-brand-primary);
background: var(--clr-brand-primary);
color: var(--clr-base-white);
}
.online-contact-password__button--confirm:hover, .online-contact-password__button--confirm:focus-visible {
border-color: var(--clr-brand-primary-dark);
background: var(--clr-brand-primary-dark);
outline: none;
}
.online-contact-password__button--confirm:disabled {
cursor: wait;
opacity: 0.72;
}
@media (max-width: 544px) {
.online-contact-password {
padding: 1.6rem;
}
.online-contact-password__dialog {
max-height: calc(100vh - 3.2rem);
padding: 3.6rem 2rem 2.4rem;
border-radius: 1.6rem;
}
.online-contact-password__actions {
gap: 0.8rem;
}
}
.online-consult__item {
position: relative;
transition: border-color 0.16s ease, background-color 0.16s ease;
}
.online-consult__item:hover {
border-color: var(--clr-gray-300);
background: color-mix(in srgb, var(--clr-brand-primary) 2%, var(--clr-base-white));
}
.online-consult__title-link {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 0.8rem;
color: inherit;
text-decoration: none;
}
.online-consult__title-link::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
}
.online-consult__title-link:focus-visible {
outline: none;
}
.online-consult__title-link:focus-visible .online-consult__title-text {
color: var(--clr-brand-primary);
text-decoration: underline;
text-underline-offset: 0.4rem;
}
.online-consult__notice--error {
border-color: color-mix(in srgb, var(--clr-brand-primary) 26%, transparent);
background: color-mix(in srgb, var(--clr-brand-primary) 6%, var(--clr-base-white));
}
.online-contact-detail {
padding-top: 8rem;
padding-bottom: clamp(9.6rem, 5.4368932039vw + 7.5611650485rem, 18rem);
color: var(--clr-text-base);
}
.online-contact-detail__hero {
padding: clamp(5.6rem, 2.3300970874vw + 4.7262135922rem, 9.2rem) 0 clamp(5.6rem, 1.8122977346vw + 4.9203883495rem, 8.4rem);
}
.online-contact-detail__sub-visual .no-sub-visual__title {
color: var(--clr-text-base);
}
.online-contact-detail__inner {
min-width: 0;
}
.online-contact-detail__back {
display: inline-flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 2.4rem;
color: var(--clr-gray-600);
text-decoration: none;
}
.online-contact-detail__back:hover, .online-contact-detail__back:focus-visible {
color: var(--clr-brand-primary);
outline: none;
}
.online-contact-detail__article {
border-top: 1px solid var(--clr-text-base);
}
.online-contact-detail__header {
padding: clamp(3.2rem, 1.2944983819vw + 2.7145631068rem, 5.2rem) 0;
border-bottom: 1px solid var(--clr-gray-200);
}
.online-contact-detail__title {
margin: 0;
color: var(--clr-text-base);
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.03em;
word-break: keep-all;
}
.online-contact-detail__date {
display: flex;
flex-wrap: wrap;
gap: 0.8rem 1.6rem;
margin-top: 1.6rem;
color: var(--clr-gray-500);
}
.online-contact-detail__section {
padding: clamp(3.6rem, 1.0355987055vw + 3.2116504854rem, 5.2rem) 0;
border-bottom: 1px solid var(--clr-gray-200);
}
.online-contact-detail__section-title {
margin: 0 0 2.4rem;
color: var(--clr-text-base);
font-weight: 700;
}
.online-contact-detail__info {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0;
border-top: 1px solid var(--clr-gray-300);
}
.online-contact-detail__info-item {
display: grid;
grid-template-columns: 12rem minmax(0, 1fr);
min-width: 0;
border-bottom: 1px solid var(--clr-gray-200);
}
.online-contact-detail__info-item:nth-child(odd) {
border-right: 1px solid var(--clr-gray-200);
}
.online-contact-detail__info-item dt,
.online-contact-detail__info-item dd {
min-width: 0;
margin: 0;
padding: 1.8rem 2rem;
font-size: var(--body-md-fs);
line-height: 1.55;
}
.online-contact-detail__info-item dt {
background: var(--clr-gray-50);
color: var(--clr-gray-600);
font-weight: 600;
}
.online-contact-detail__info-item dd {
color: var(--clr-text-base);
overflow-wrap: anywhere;
}
.online-contact-detail__content {
min-height: 16rem;
color: var(--clr-gray-800);
line-height: 1.85;
overflow-wrap: anywhere;
white-space: normal;
}
.online-contact-detail__files {
display: grid;
gap: 0.8rem;
margin: 0;
padding: 0;
list-style: none;
}
.online-contact-detail__file {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
gap: 1rem;
align-items: center;
min-height: 5.6rem;
padding: 1.2rem 1.6rem;
border: 1px solid var(--clr-gray-200);
border-radius: 0.8rem;
background: var(--clr-gray-50);
color: var(--clr-text-base);
text-decoration: none;
}
.online-contact-detail__file > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.online-contact-detail__file small {
color: var(--clr-gray-500);
}
.online-contact-detail__file:hover, .online-contact-detail__file:focus-visible {
border-color: var(--clr-brand-primary);
color: var(--clr-brand-primary);
outline: none;
}
.online-contact-detail__owner-actions {
display: flex;
justify-content: center;
gap: 1rem;
padding: 2.4rem 0 0;
}
.online-contact-detail__owner-actions form {
display: inline-flex;
align-items: center;
margin: 0;
}
.online-contact-detail__action {
display: inline-flex;
min-height: 4.6rem;
align-items: center;
justify-content: center;
gap: 0.8rem;
padding: 0.8rem 1.6rem;
border-radius: 0.7rem;
font-family: inherit;
cursor: pointer;
}
.online-contact-detail__action--outline {
border: 1px solid var(--clr-text-base);
background: var(--clr-base-white);
color: var(--clr-text-base);
}
.online-contact-detail__action--danger {
border: 1px solid var(--clr-gray-300);
background: var(--clr-base-white);
color: var(--clr-gray-600);
}
.online-contact-detail__action:hover, .online-contact-detail__action:focus-visible {
border-color: var(--clr-brand-primary);
color: var(--clr-brand-primary);
outline: none;
}
@media (max-width: 768px) {
.online-contact-detail {
padding-top: 6rem;
}
.online-contact-detail__hero {
padding-top: 4.8rem;
}
.online-contact-detail__info {
grid-template-columns: 1fr;
}
.online-contact-detail__info-item:nth-child(odd) {
border-right: 0;
}
}
@media (max-width: 544px) {
.online-contact-detail__info-item {
grid-template-columns: 10rem minmax(0, 1fr);
}
.online-contact-detail__info-item dt,
.online-contact-detail__info-item dd {
padding: 1.5rem 1.2rem;
}
.online-contact-detail__file {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.online-contact-detail__file small {
display: none;
}
.online-contact-detail__owner-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.online-contact-detail__owner-actions form,
.online-contact-detail__owner-actions button {
width: 100%;
}
}
.online-contact-edit {
margin-top: clamp(4.8rem, 1.5533980583vw + 4.2174757282rem, 7.2rem);
padding: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
border: 1px solid color-mix(in srgb, var(--clr-brand-primary) 20%, var(--clr-gray-200));
border-radius: 1.4rem;
background: color-mix(in srgb, var(--clr-brand-primary) 2%, var(--clr-base-white));
scroll-margin-top: 12rem;
}
.online-contact-edit[hidden] {
display: none;
}
.online-contact-edit__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-bottom: 2.8rem;
padding-bottom: 1.8rem;
border-bottom: 1px solid var(--clr-gray-300);
}
.online-contact-edit__title {
margin: 0;
font-weight: 700;
}
.online-contact-edit__close {
display: inline-grid;
place-items: center;
width: 4rem;
height: 4rem;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--clr-text-base);
cursor: pointer;
}
.online-contact-edit__close:hover, .online-contact-edit__close:focus-visible {
background: var(--clr-gray-100);
outline: none;
}
.online-contact-edit__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.4rem;
}
.online-contact-edit__field {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.online-contact-edit__field > label,
.online-contact-edit__field > legend {
display: block;
margin-bottom: 0.9rem;
color: var(--clr-text-base);
font-size: var(--body-sm-fs);
font-weight: 600;
}
.online-contact-edit__field > label span,
.online-contact-edit__field > legend span {
color: var(--clr-brand-primary);
}
.online-contact-edit__field--wide {
grid-column: 1/-1;
}
.online-contact-edit__field--radio {
display: flex;
flex-direction: column;
}
.online-contact-edit__field .cs-wrap {
position: relative;
display: block;
}
.online-contact-edit__field .cs-trigger {
display: flex;
width: 100%;
min-height: 5.4rem;
align-items: center;
justify-content: space-between;
padding: 0 1.8rem;
border: 1px solid var(--clr-gray-300);
border-radius: 0.8rem;
background: var(--clr-base-white);
color: var(--clr-text-base);
font: inherit;
text-align: left;
}
.online-contact-edit__field .cs-trigger:focus-visible, .online-contact-edit__field .cs-trigger[aria-expanded=true] {
border-color: var(--clr-brand-primary);
outline: none;
box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--clr-brand-primary) 10%, transparent);
}
.online-contact-edit__field .cs-dropdown {
position: absolute;
z-index: 20;
top: calc(100% + 0.6rem);
right: 0;
left: 0;
overflow: hidden;
border: 1px solid var(--clr-gray-300);
border-radius: 0.8rem;
background: var(--clr-base-white);
box-shadow: 0 1.2rem 3rem rgba(29, 29, 29, 0.12);
}
.online-contact-edit__field .cs-dropdown[hidden] {
display: none;
}
.online-contact-edit__field .cs-dropdown--up {
top: auto;
bottom: calc(100% + 0.6rem);
}
.online-contact-edit__field .cs-list {
max-height: 26rem;
margin: 0;
padding: 0.7rem;
overflow-y: auto;
list-style: none;
}
.online-contact-edit__field .cs-option {
min-height: 4.2rem;
padding: 1rem;
border-radius: 0.6rem;
cursor: pointer;
}
.online-contact-edit__field .cs-option:hover, .online-contact-edit__field .cs-option--active, .online-contact-edit__field .cs-option--selected {
background: color-mix(in srgb, var(--clr-brand-primary) 7%, var(--clr-base-white));
color: var(--clr-brand-primary);
}
.online-contact-edit__control {
width: 100%;
min-height: 5.4rem;
padding: 0 1.6rem;
border: 1px solid var(--clr-gray-300);
border-radius: 0.8rem;
background: var(--clr-base-white);
color: var(--clr-text-base);
font: inherit;
outline: none;
}
.online-contact-edit__control:focus {
border-color: var(--clr-brand-primary);
box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--clr-brand-primary) 10%, transparent);
}
.online-contact-edit__field > .online-contact-edit__control:focus {
border-color: var(--clr-brand-primary);
outline: none;
box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--clr-brand-primary) 10%, transparent);
}
.online-contact-edit__field > .online-contact-edit__control:autofill, .online-contact-edit__field > .online-contact-edit__control:-webkit-autofill, .online-contact-edit__field > .online-contact-edit__control:-webkit-autofill:hover, .online-contact-edit__field > .online-contact-edit__control:-webkit-autofill:focus, .online-contact-edit__field > .online-contact-edit__control:-webkit-autofill:active {
-webkit-background-clip: padding-box;
background-clip: padding-box;
caret-color: var(--clr-text-base);
-webkit-text-fill-color: var(--clr-text-base);
-webkit-box-shadow: 0 0 0 100rem var(--clr-base-white) inset;
box-shadow: 0 0 0 100rem var(--clr-base-white) inset;
transition: background-color 9999s ease-out 0s;
}
.online-contact-edit__textarea {
min-height: 18rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
resize: vertical;
}
.online-contact-edit__radios {
display: flex;
min-height: 5.4rem;
align-items: center;
gap: 2.8rem;
}
.online-contact-edit__radios .admin-radio-wrap {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.8rem;
cursor: pointer;
}
.online-contact-edit__radios .admin-radio-wrap input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.online-contact-edit__radios .admin-radio__dot {
position: relative;
width: 2rem;
height: 2rem;
border: 1px solid var(--clr-gray-400);
border-radius: 50%;
background: var(--clr-base-white);
}
.online-contact-edit__radios input:checked + .admin-radio__dot {
border-color: var(--clr-brand-primary);
}
.online-contact-edit__radios input:checked + .admin-radio__dot::after {
content: "";
position: absolute;
inset: 0.4rem;
border-radius: 50%;
background: var(--clr-brand-primary);
}
.online-contact-edit__radios .admin-radio-wrap input:focus-visible + .admin-radio__dot {
border-color: var(--clr-brand-primary);
outline: none;
box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--clr-brand-primary) 16%, transparent);
}
.online-contact-edit__error {
margin: 0.7rem 0 0;
color: var(--clr-brand-primary);
font-size: var(--body-xs-fs);
}
.online-contact-edit__actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 3rem;
}
.online-contact-edit__button {
min-width: 12rem;
min-height: 5rem;
border-radius: 0.8rem;
font-family: inherit;
font-weight: 600;
cursor: pointer;
}
.online-contact-edit__button--cancel {
border: 1px solid var(--clr-text-base);
background: var(--clr-base-white);
color: var(--clr-text-base);
}
.online-contact-edit__button--save {
border: 1px solid var(--clr-brand-primary);
background: var(--clr-brand-primary);
color: var(--clr-base-white);
}
.online-contact-edit__button:hover, .online-contact-edit__button:focus-visible {
filter: brightness(0.92);
outline: none;
}
@media (max-width: 768px) {
.online-contact-edit__grid {
grid-template-columns: 1fr;
}
.online-contact-edit__field--wide {
grid-column: auto;
}
}
.online-contact-thread {
margin-top: clamp(6.4rem, 2.071197411vw + 5.6233009709rem, 9.6rem);
padding-top: clamp(3.6rem, 1.0355987055vw + 3.2116504854rem, 5.2rem);
border-top: 1px solid var(--clr-text-base);
scroll-margin-top: 12rem;
}
.online-contact-thread__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: 3.2rem;
}
.online-contact-thread__title {
margin: 0;
color: var(--clr-text-base);
font-weight: 700;
}
.online-contact-thread__count {
color: var(--clr-gray-500);
}
.online-contact-thread__empty {
display: grid;
place-items: center;
min-height: 22rem;
padding: 3rem;
border: 1px solid var(--clr-gray-200);
border-radius: 1.2rem;
background: var(--clr-gray-50);
color: var(--clr-gray-500);
text-align: center;
}
.online-contact-thread__empty i {
margin-bottom: 1.2rem;
color: var(--clr-gray-400);
font-size: 2.6rem;
}
.online-contact-thread__empty p,
.online-contact-thread__empty span {
margin: 0;
}
.online-contact-thread__empty p {
color: var(--clr-text-base);
}
.online-contact-thread__list {
display: grid;
gap: 1.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.online-contact-thread__composer {
margin-top: 3.2rem;
padding-top: 3.2rem;
border-top: 1px solid var(--clr-gray-200);
}
.online-contact-thread__composer-label {
display: block;
margin-bottom: 1rem;
color: var(--clr-text-base);
}
.online-contact-thread__composer-box {
overflow: hidden;
border: 1px solid var(--clr-gray-300);
border-radius: 1.2rem;
background: var(--clr-base-white);
}
.online-contact-thread__composer-box:focus-within {
border-color: var(--clr-brand-primary);
box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--clr-brand-primary) 9%, transparent);
}
.online-contact-thread__composer-box textarea {
display: block;
width: 100%;
min-height: 13rem;
padding: 1.8rem;
border: 0;
background: transparent;
color: var(--clr-text-base);
font: inherit;
line-height: 1.7;
resize: vertical;
outline: none;
box-shadow: none;
}
.online-contact-thread__composer-box textarea::placeholder {
color: var(--clr-gray-400);
}
.online-contact-thread__composer-box button {
display: flex;
min-width: 13rem;
min-height: 4.8rem;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin: 0 1.2rem 1.2rem auto;
padding: 0.8rem 1.6rem;
border: 1px solid var(--clr-brand-primary);
border-radius: 0.8rem;
background: var(--clr-brand-primary);
color: var(--clr-base-white);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.online-contact-thread__composer-box button:hover, .online-contact-thread__composer-box button:focus-visible {
border-color: var(--clr-brand-primary-dark);
background: var(--clr-brand-primary-dark);
outline: none;
}
@media (max-width: 544px) {
.online-contact-thread__header {
align-items: flex-start;
flex-direction: column;
gap: 1rem;
}
.online-contact-thread__composer-box button {
width: calc(100% - 2.4rem);
margin-left: 1.2rem;
}
}
.online-contact-message {
max-width: 84%;
padding: 1.8rem 2rem;
border: 1px solid var(--clr-gray-200);
border-radius: 1.2rem;
background: var(--clr-base-white);
scroll-margin-top: 12rem;
}
.online-contact-message--admin {
justify-self: start;
border-color: color-mix(in srgb, var(--clr-brand-primary) 22%, var(--clr-gray-200));
background: color-mix(in srgb, var(--clr-brand-primary) 5%, var(--clr-base-white));
}
.online-contact-message--user {
justify-self: end;
background: var(--clr-gray-50);
}
.online-contact-message__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6rem 1.6rem;
margin-bottom: 1rem;
}
.online-contact-message__author {
color: var(--clr-text-base);
}
.online-contact-message--admin .online-contact-message__author {
color: var(--clr-brand-primary);
}
.online-contact-message__time {
color: var(--clr-gray-500);
}
.online-contact-message__body {
color: var(--clr-gray-800);
line-height: 1.75;
overflow-wrap: anywhere;
}
.online-contact-message__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1.2rem;
margin-top: 1.4rem;
}
.online-contact-message__actions form {
display: inline-flex;
align-items: center;
margin: 0;
}
.online-contact-message__actions a,
.online-contact-message__actions button {
display: inline-flex;
min-height: 2.4rem;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: var(--clr-gray-500);
font: inherit;
font-size: var(--body-xs-fs);
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.online-contact-message__actions a:hover, .online-contact-message__actions a:focus-visible,
.online-contact-message__actions button:hover,
.online-contact-message__actions button:focus-visible {
color: var(--clr-brand-primary);
outline: none;
}
.online-contact-message__edit textarea {
width: 100%;
min-height: 11rem;
padding: 1.4rem;
border: 1px solid var(--clr-gray-300);
border-radius: 0.8rem;
background: var(--clr-base-white);
color: var(--clr-text-base);
font: inherit;
line-height: 1.65;
resize: vertical;
outline: none;
}
.online-contact-message__edit textarea:focus {
border-color: var(--clr-brand-primary);
}
.online-contact-message__edit-actions {
display: flex;
justify-content: flex-end;
gap: 0.8rem;
margin-top: 1rem;
}
.online-contact-message__edit-actions a,
.online-contact-message__edit-actions button {
display: inline-flex;
min-height: 4rem;
align-items: center;
justify-content: center;
padding: 0.7rem 1.5rem;
border-radius: 0.6rem;
font: inherit;
font-size: var(--body-sm-fs);
font-weight: 600;
text-decoration: none;
}
.online-contact-message__edit-actions a {
border: 1px solid var(--clr-gray-300);
color: var(--clr-text-base);
}
.online-contact-message__edit-actions button {
border: 1px solid var(--clr-brand-primary);
background: var(--clr-brand-primary);
color: var(--clr-base-white);
cursor: pointer;
}
@media (max-width: 768px) {
.online-contact-message {
max-width: 94%;
}
}
@media (max-width: 544px) {
.online-contact-message {
max-width: 100%;
padding: 1.6rem;
}
}
.success-cases-page,
.success-case-detail-page {
background: var(--clr-base-white);
}
.success-cases,
.success-case-detail {
padding-top: 8rem;
padding-bottom: clamp(9.6rem, 4.142394822vw + 8.0466019417rem, 16rem);
color: var(--clr-text-base);
}
.success-cases__hero,
.success-case-detail__hero {
padding: clamp(5.6rem, 2.3300970874vw + 4.7262135922rem, 9.2rem) 0 clamp(6.4rem, 2.8478964401vw + 5.332038835rem, 10.8rem);
}
.success-cases__sub-visual .no-sub-visual__nav,
.success-case-detail__sub-visual .no-sub-visual__nav {
margin-bottom: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
color: var(--clr-text-sub);
}
.success-cases__sub-visual .no-sub-visual__title,
.success-case-detail__sub-visual .no-sub-visual__title {
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.035em;
}
.success-cases__toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
}
.success-cases__search {
position: relative;
width: min(100%, 36rem);
margin: 0;
}
.success-cases .ui-search-input--success-cases .ui-search-input__field {
height: clamp(5.2rem, 0.3883495146vw + 5.054368932rem, 5.8rem);
padding: 0 9rem 0 clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
border: 1px solid transparent;
border-radius: 1.2rem;
background: color-mix(in srgb, var(--clr-text-base) 4%, var(--clr-base-white));
color: var(--clr-text-base);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.success-cases .ui-search-input--success-cases .ui-search-input__field::placeholder {
color: var(--clr-gray-500);
}
.success-cases .ui-search-input--success-cases .ui-search-input__field:focus {
border-color: var(--clr-gray-400);
background: color-mix(in srgb, var(--clr-text-base) 4%, var(--clr-base-white));
}
.success-cases .ui-search-input--success-cases .ui-search-input__icon {
display: none;
}
.success-cases .ui-search-input--success-cases .ui-search-input__clear {
right: 5.6rem;
}
.success-cases__search-submit {
position: absolute;
top: 50%;
right: 1.2rem;
display: inline-grid;
width: 4rem;
height: 4rem;
place-items: center;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--clr-text-base);
cursor: pointer;
transform: translateY(-50%);
transition: color 0.18s ease, background-color 0.18s ease;
}
.success-cases__search-submit:hover, .success-cases__search-submit:focus-visible {
background: var(--clr-base-white);
color: var(--clr-brand-primary);
outline: none;
}
.success-cases__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(2rem, 0.6472491909vw + 1.7572815534rem, 3rem);
}
.success-cases__card {
display: flex;
min-width: 0;
min-height: clamp(38rem, 5.8252427184vw + 35.8155339806rem, 47rem);
overflow: hidden;
flex-direction: column;
border: 1px solid var(--clr-gray-200);
border-radius: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
background: var(--clr-base-white);
box-shadow: 0 1.6rem 4rem rgba(41, 21, 22, 0.04);
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.success-cases__card:hover {
border-color: color-mix(in srgb, var(--clr-brand-primary) 38%, var(--clr-gray-200));
box-shadow: 0 2rem 5rem rgba(99, 30, 33, 0.1);
transform: translateY(-0.5rem);
}
.success-cases__card-body {
display: block;
min-width: 0;
flex: 1 1 auto;
padding: clamp(2.4rem, 0.6472491909vw + 2.1572815534rem, 3.4rem);
color: var(--clr-text-base);
}
.success-cases__card-body:hover, .success-cases__card-body:focus-visible {
color: var(--clr-text-base);
}
.success-cases__badge {
display: inline-flex;
min-height: 3.2rem;
align-items: center;
padding: 0.5rem 1.2rem;
border-radius: 99rem;
background: var(--clr-brand-primary);
color: var(--clr-base-white);
}
.success-cases__card-eyebrow {
margin: clamp(2.8rem, 0.6472491909vw + 2.5572815534rem, 3.8rem) 0 0;
color: var(--clr-brand-primary);
font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5rem);
font-weight: 700;
letter-spacing: 0.06em;
}
.success-cases__card-title {
display: -webkit-box;
overflow: hidden;
margin: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem) 0 0;
color: var(--clr-text-base);
word-break: keep-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.success-cases__card-description {
display: -webkit-box;
overflow: hidden;
margin: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem) 0 0;
color: var(--clr-gray-600);
word-break: keep-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.success-cases__people {
display: flex;
min-height: clamp(11.2rem, 1.2944983819vw + 10.7145631068rem, 13.2rem);
align-items: center;
gap: clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.6rem);
margin: 0;
padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem) clamp(2.4rem, 0.6472491909vw + 2.1572815534rem, 3.4rem);
border-top: 1px solid var(--clr-gray-200);
list-style: none;
}
.success-cases__person {
display: grid;
justify-items: center;
gap: 0.8rem;
color: var(--clr-text-base);
}
.success-cases__person:hover, .success-cases__person:focus-visible {
color: var(--clr-brand-primary);
}
.success-cases__person:hover .success-cases__person-photo, .success-cases__person:focus-visible .success-cases__person-photo {
border-color: var(--clr-brand-primary);
}
.success-cases__person-photo {
display: block;
width: clamp(5.4rem, 0.9061488673vw + 5.0601941748rem, 6.8rem);
aspect-ratio: 1;
overflow: hidden;
border: 1px solid transparent;
border-radius: 50%;
background: var(--clr-primary-50);
transition: border-color 0.2s ease;
}
.success-cases__person-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.success-cases__person-name {
white-space: nowrap;
}
.success-cases__empty {
display: grid;
min-height: 32rem;
place-items: center;
align-content: center;
gap: 1.6rem;
border: 1px solid var(--clr-gray-200);
border-radius: 2.4rem;
color: var(--clr-gray-500);
text-align: center;
}
.success-cases__empty i {
color: var(--clr-brand-primary);
font-size: 3.2rem;
}
.success-cases__empty p {
margin: 0;
}
.success-cases__pagination {
margin-top: clamp(4.8rem, 1.5533980583vw + 4.2174757282rem, 7.2rem);
}
.success-case-detail__header {
max-width: 100rem;
margin-bottom: clamp(4.8rem, 1.8122977346vw + 4.1203883495rem, 7.6rem);
}
.success-case-detail__badge {
display: inline-flex;
min-height: 3.4rem;
align-items: center;
padding: 0.6rem 1.4rem;
border-radius: 99rem;
background: var(--clr-brand-primary);
color: var(--clr-base-white);
}
.success-case-detail__title {
max-width: 94rem;
margin: clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.6rem) 0 0;
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.035em;
word-break: keep-all;
}
.success-case-detail__layout {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(34rem, 0.9fr);
gap: clamp(5.2rem, 2.5889967638vw + 4.2291262136rem, 9.2rem);
align-items: start;
}
.success-case-detail__content {
min-width: 0;
}
.success-case-detail__section {
padding: 0 0 clamp(4.8rem, 1.5533980583vw + 4.2174757282rem, 7.2rem);
border-bottom: 1px solid var(--clr-gray-200);
}
.success-case-detail__section + .success-case-detail__section {
padding-top: clamp(4.8rem, 1.2944983819vw + 4.3145631068rem, 6.8rem);
}
.success-case-detail__section-title, .success-case-detail__section-body, .success-case-detail__aside-title {
margin: 0;
}
.success-case-detail__section-title {
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.025em;
}
.success-case-detail__section-body {
margin-top: clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3rem);
color: var(--clr-gray-700);
line-height: 1.85;
word-break: keep-all;
}
.success-case-detail__aside {
position: sticky;
top: 12rem;
display: grid;
gap: clamp(3.6rem, 0.9061488673vw + 3.2601941748rem, 5rem);
}
.success-case-detail__result-section, .success-case-detail__people-section {
min-width: 0;
}
.success-case-detail__result-card {
display: grid;
grid-template-columns: minmax(13rem, 0.9fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
min-height: 24rem;
padding: clamp(2.2rem, 0.3883495146vw + 2.054368932rem, 2.8rem);
border: 1px solid var(--clr-gray-200);
border-radius: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
background: var(--clr-base-white);
}
.success-case-detail__result-card--text-only {
grid-template-columns: 1fr;
min-height: 15rem;
}
.success-case-detail__image-card {
position: relative;
display: block;
width: 100%;
overflow: hidden;
aspect-ratio: 3/4;
padding: 0;
border: 1px solid var(--clr-gray-200);
border-radius: 1.2rem;
background: var(--clr-base-white);
box-shadow: 0 1.2rem 3rem rgba(25, 18, 18, 0.08);
cursor: pointer;
}
.success-case-detail__image-card:focus-visible {
outline: 2px solid var(--clr-brand-primary);
outline-offset: 0.4rem;
}
.success-case-detail__image {
width: 100%;
height: 100%;
object-fit: contain;
}
.success-case-detail__image-zoom {
position: absolute;
right: 1rem;
bottom: 1rem;
display: grid;
width: 3.8rem;
height: 3.8rem;
place-items: center;
border-radius: 50%;
background: rgba(20, 20, 20, 0.6);
color: var(--clr-base-white);
font-size: 1.6rem;
backdrop-filter: blur(0.8rem);
}
.success-case-detail__result-meta {
display: grid;
justify-items: start;
gap: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
min-width: 0;
}
.success-case-detail__result-badge {
display: inline-flex;
min-height: 3.8rem;
align-items: center;
padding: 0.7rem 1.4rem;
border-radius: 0.9rem;
background: var(--clr-brand-primary);
color: var(--clr-base-white);
}
.success-case-detail__result-name {
margin: 0;
color: var(--clr-text-base);
line-height: 1.45;
word-break: keep-all;
}
.success-case-detail__preview {
display: grid;
width: 100%;
min-height: 0;
place-items: center;
overflow: hidden;
border-radius: 1.2rem;
background: var(--clr-base-white);
}
.success-case-detail__preview-image {
position: static;
inset: auto;
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 72vh;
object-fit: contain;
object-position: center;
}
.success-case-detail__aside-title {
margin-bottom: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
color: var(--clr-text-base);
}
.success-case-detail__people {
display: grid;
gap: 1.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.success-case-detail__person {
display: grid;
grid-template-columns: clamp(6.4rem, 1.1650485437vw + 5.9631067961rem, 8.2rem) minmax(0, 1fr);
align-items: center;
gap: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem);
min-height: clamp(9.8rem, 1.2944983819vw + 9.3145631068rem, 11.8rem);
padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem) clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
border: 1px solid var(--clr-gray-200);
border-radius: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem);
background: var(--clr-base-white);
color: var(--clr-text-base);
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.success-case-detail__person:hover, .success-case-detail__person:focus-visible {
border-color: var(--clr-gray-300);
background: var(--clr-base-white);
color: var(--clr-text-base);
box-shadow: 0 1rem 2.8rem rgba(20, 20, 20, 0.07);
}
.success-case-detail__person-photo {
display: block;
width: 100%;
aspect-ratio: 1;
overflow: hidden;
border-radius: 50%;
background: var(--clr-primary-50);
}
.success-case-detail__person-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.success-case-detail__person-name {
overflow: hidden;
color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
}
.success-case-detail__footer {
display: flex;
justify-content: center;
margin-top: clamp(6.4rem, 2.071197411vw + 5.6233009709rem, 9.6rem);
}
@media (max-width: 768px) {
.success-case-detail__layout {
grid-template-columns: 1fr;
}
.success-case-detail__aside {
position: static;
}
}
.app-modal-backdrop .app-modal-box--success-case-image {
width: min(82rem, 100% - 3.2rem);
max-width: 82rem;
max-height: 92vh;
background: var(--clr-base-white);
}
.app-modal-backdrop .app-modal-box--success-case-image .app-modal-header {
border-bottom: 0;
background: var(--clr-brand-primary);
}
.app-modal-backdrop .app-modal-box--success-case-image .app-modal-title,
.app-modal-backdrop .app-modal-box--success-case-image .app-modal-close {
color: var(--clr-base-white);
}
.app-modal-backdrop .app-modal-box--success-case-image .app-modal-body {
display: grid;
min-height: 0;
place-items: center;
padding: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
.app-modal-backdrop .app-modal-box--success-case-image .app-modal-footer {
display: none;
}
@media (max-width: 1024px) {
.success-cases__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 544px) {
.success-cases,
.success-case-detail {
padding-top: 7.2rem;
}
.success-cases__hero,
.success-case-detail__hero {
padding-bottom: 5.6rem;
}
.success-cases__toolbar, .success-cases__search {
width: 100%;
}
.success-cases__grid {
grid-template-columns: 1fr;
}
.success-cases__card {
min-height: 38rem;
}
.success-cases__people {
overflow-x: auto;
}
.success-case-detail__layout {
gap: 4.8rem;
}
.success-case-detail__result-card {
grid-template-columns: minmax(10rem, 0.75fr) minmax(0, 1fr);
min-height: 0;
}
.success-case-detail__result-card--text-only {
grid-template-columns: 1fr;
}
.success-case-detail__section-body {
word-break: normal;
}
}
.services-page {
background: var(--clr-base-white);
}
.services-detail-page {
background: var(--clr-base-white);
}
.practice-index {
padding-top: 8rem;
padding-bottom: clamp(9.6rem, 4.142394822vw + 8.0466019417rem, 16rem);
color: var(--clr-text-base);
}
.practice-index__hero {
padding: clamp(5.6rem, 2.3300970874vw + 4.7262135922rem, 9.2rem) 0 clamp(6.4rem, 2.8478964401vw + 5.332038835rem, 10.8rem);
}
.practice-index__sub-visual .no-sub-visual__nav {
margin-bottom: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
color: var(--clr-text-sub);
}
.practice-index__sub-visual .no-sub-visual__title {
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.035em;
}
.practice-index__intro {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: end;
gap: clamp(4rem, 3.1067961165vw + 2.8349514563rem, 8.8rem);
margin-bottom: clamp(5.6rem, 2.071197411vw + 4.8233009709rem, 8.8rem);
padding-top: clamp(3.4rem, 0.9061488673vw + 3.0601941748rem, 4.8rem);
border-top: 1px solid var(--clr-gray-300);
}
.practice-index__intro-heading {
min-width: 0;
}
.practice-index__eyebrow {
display: block;
margin-bottom: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem);
color: var(--clr-brand-primary);
letter-spacing: 0.08em;
}
.practice-index__lead {
margin: 0;
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.04em;
word-break: keep-all;
}
.practice-index__intro-copy {
max-width: 68rem;
margin: 0 0 0.4rem;
color: var(--clr-gray-600);
line-height: 1.8;
word-break: keep-all;
}
.practice-index__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(2rem, 0.6472491909vw + 1.7572815534rem, 3rem);
}
.practice-index__card {
position: relative;
min-width: 0;
min-height: clamp(43rem, 5.8252427184vw + 40.8155339806rem, 52rem);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
background: var(--clr-primary-950);
box-shadow: 0 1.8rem 5rem rgba(34, 11, 13, 0.08);
isolation: isolate;
scroll-margin-top: calc(var(--header-height) + 3rem);
color: var(--clr-base-white);
text-decoration: none;
transform: translateY(0);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.45s ease;
}
.practice-index__card:hover, .practice-index__card:focus-visible {
border-color: rgba(158, 28, 38, 0.52);
box-shadow: 0 2.2rem 5.6rem rgba(99, 30, 33, 0.16);
outline: none;
transform: translateY(-0.6rem);
}
.practice-index__card:hover .practice-index__image, .practice-index__card:focus-visible .practice-index__image {
filter: saturate(0.84) contrast(1.04) brightness(1.05);
transform: scale(1.035);
}
.practice-index__card:hover .practice-index__shade, .practice-index__card:focus-visible .practice-index__shade {
opacity: 0.9;
}
.practice-index__card:hover .practice-index__line, .practice-index__card:focus-visible .practice-index__line {
background: rgba(255, 255, 255, 0.72);
}
.practice-index__card:hover .practice-index__link-indicator, .practice-index__card:focus-visible .practice-index__link-indicator {
border-color: rgba(255, 255, 255, 0.48);
background: rgba(255, 255, 255, 0.18);
transform: translateX(0.3rem);
}
.practice-index__media, .practice-index__shade {
position: absolute;
inset: 0;
}
.practice-index__media {
z-index: -2;
margin: 0;
}
.practice-index__image {
width: 100%;
height: 100%;
filter: saturate(0.72) contrast(1.02);
object-fit: cover;
transform: scale(1.001);
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}
.practice-index__shade {
z-index: -1;
background: linear-gradient(180deg, rgba(9, 5, 6, 0.34) 0%, rgba(17, 5, 7, 0.62) 38%, rgba(24, 5, 8, 0.96) 100%), linear-gradient(90deg, rgba(99, 30, 33, 0.18), transparent 70%);
opacity: 1;
transition: opacity 0.45s ease;
}
.practice-index__content {
display: flex;
min-height: inherit;
flex-direction: column;
padding: clamp(2.6rem, 0.7766990291vw + 2.3087378641rem, 3.8rem);
}
.practice-index__number-line {
display: flex;
align-items: center;
gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.practice-index__number {
color: rgba(255, 255, 255, 0.72);
font-variant-numeric: tabular-nums;
}
.practice-index__line {
width: clamp(4.2rem, 1.9417475728vw + 3.4718446602rem, 7.2rem);
height: 1px;
background: rgba(255, 255, 255, 0.36);
transition: background-color 0.25s ease;
}
.practice-index__link-indicator {
display: inline-flex;
width: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.4rem);
height: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.4rem);
flex: 0 0 auto;
align-items: center;
justify-content: center;
margin-left: auto;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: var(--clr-base-white);
transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.practice-index__link-indicator i {
font-size: 1.5rem;
}
.practice-index__copy {
margin-top: auto;
padding-top: clamp(4.8rem, 1.8122977346vw + 4.1203883495rem, 7.6rem);
}
.practice-index__card-title {
margin: 0;
color: var(--clr-base-white);
font-weight: 700;
letter-spacing: -0.035em;
}
.practice-index__description {
max-width: 58rem;
margin: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem) 0 0;
color: rgba(255, 255, 255, 0.82);
line-height: 1.7;
word-break: keep-all;
}
.practice-index__tags {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem) 0 0;
padding: 0;
list-style: none;
}
.practice-index__tag {
display: inline-flex;
min-height: 3.2rem;
align-items: center;
padding: 0.5rem 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 99rem;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.86);
line-height: 1.4;
backdrop-filter: blur(0.8rem);
}
.practice-detail {
padding-top: 8rem;
padding-bottom: clamp(10rem, 4.4012944984vw + 8.3495145631rem, 16.8rem);
color: var(--clr-text-base);
}
.practice-detail__heading {
position: relative;
z-index: 3;
padding: clamp(7.2rem, 3.1067961165vw + 6.0349514563rem, 12rem) 0 clamp(5rem, 1.6828478964vw + 4.3689320388rem, 7.6rem);
}
.practice-detail__sub-visual .no-sub-visual__content {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 3.2rem;
text-align: left;
}
.practice-detail__sub-visual .no-sub-visual__nav {
grid-column: 2;
grid-row: 1;
justify-self: end;
margin: 0 0 1.2rem;
color: var(--clr-text-base);
}
.practice-detail__sub-visual .no-sub-visual__home,
.practice-detail__sub-visual .no-sub-visual__dot {
display: none;
}
.practice-detail__sub-visual .no-sub-visual__title {
grid-column: 1;
grid-row: 1;
max-width: 86rem;
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.055em;
}
.practice-detail__sub-visual .no-sub-visual__current {
color: var(--clr-gray-700);
}
.practice-detail__sub-visual .no-sub-visual__menu {
right: 0;
left: auto;
min-width: 22rem;
border-color: var(--clr-gray-200);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 1.8rem 4.8rem rgba(32, 18, 18, 0.14);
transform: none;
}
.practice-detail__sub-visual .no-sub-visual__menu-link {
color: var(--clr-gray-700);
}
.practice-detail__sub-visual .no-sub-visual__menu-link:hover, .practice-detail__sub-visual .no-sub-visual__menu-link:focus-visible {
background: var(--clr-gray-100);
color: var(--clr-text-base);
}
.practice-detail__sub-visual .no-sub-visual__menu-link.is-active {
background: var(--clr-primary-700);
color: var(--clr-base-white);
}
.practice-detail__visual {
position: relative;
height: clamp(35rem, 14.8867313916vw + 29.4174757282rem, 58rem);
overflow: hidden;
margin: 0;
border-radius: clamp(1.8rem, 0.7766990291vw + 1.5087378641rem, 3rem);
background: var(--clr-gray-100);
box-shadow: 0 2.4rem 6.4rem rgba(49, 25, 27, 0.1);
}
.practice-detail__visual::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(25, 7, 9, 0.26)), linear-gradient(90deg, rgba(67, 19, 23, 0.1), transparent 58%);
content: "";
pointer-events: none;
}
.practice-detail__image {
width: 100%;
height: 100%;
filter: saturate(0.78) contrast(1.03);
object-fit: cover;
}
.practice-detail__overview {
display: grid;
grid-template-columns: minmax(25rem, 0.72fr) minmax(0, 1.28fr);
gap: clamp(4.8rem, 3.8834951456vw + 3.3436893204rem, 10.8rem);
margin-top: clamp(6.8rem, 2.8478964401vw + 5.732038835rem, 11.2rem);
padding-bottom: clamp(7.6rem, 2.5889967638vw + 6.6291262136rem, 11.6rem);
}
.practice-detail__overview-head {
align-self: start;
}
.practice-detail__overview-title {
margin: 0;
font-weight: 700;
letter-spacing: -0.04em;
}
.practice-detail__lead {
margin: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem) 0 0;
color: var(--clr-gray-600);
line-height: 1.75;
word-break: keep-all;
}
.practice-detail__body {
color: var(--clr-gray-700);
line-height: 1.9;
word-break: keep-all;
}
.practice-detail__body p {
margin: 0;
}
.practice-detail__body p + p {
margin-top: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
}
.practice-detail__scope {
display: grid;
grid-template-columns: minmax(25rem, 0.72fr) minmax(0, 1.28fr);
gap: clamp(4.8rem, 3.8834951456vw + 3.3436893204rem, 10.8rem);
padding-top: clamp(4.2rem, 1.0355987055vw + 3.8116504854rem, 5.8rem);
border-top: 1px solid var(--clr-gray-300);
}
.practice-detail__scope-head {
display: flex;
align-items: baseline;
gap: 1.4rem;
}
.practice-detail__scope-title {
margin: 0;
font-weight: 700;
letter-spacing: -0.035em;
}
.practice-detail__scope-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.2rem;
margin: 0;
padding: 0;
list-style: none;
}
.practice-detail__scope-item {
display: flex;
min-width: 0;
min-height: 7.6rem;
align-items: center;
gap: 0.8rem;
padding: 1.6rem 1.8rem;
border: 1px solid var(--clr-gray-300);
border-radius: 1.4rem;
background: var(--clr-base-white);
color: var(--clr-gray-700);
word-break: keep-all;
}
.practice-detail__scope-mark {
flex: 0 0 auto;
color: var(--clr-primary-500);
font-weight: 700;
}
@media (max-width: 768px) {
.practice-index__intro {
grid-template-columns: 1fr;
align-items: start;
gap: 2.4rem;
}
.practice-index__intro-copy {
max-width: 60rem;
}
.practice-index__grid {
grid-template-columns: 1fr;
}
.practice-detail__overview, .practice-detail__scope {
grid-template-columns: 1fr;
}
.practice-detail__overview {
gap: 3.6rem;
}
.practice-detail__scope-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 544px) {
.practice-index {
padding-top: 7.2rem;
}
.practice-index__hero {
padding-bottom: 5.6rem;
}
.practice-index__intro {
padding-top: 2.8rem;
}
.practice-index__intro-copy, .practice-index__description {
word-break: normal;
}
.practice-index__card {
min-height: 40rem;
border-radius: 2rem;
}
.practice-index__content {
padding: 2.4rem;
}
.practice-index__copy {
padding-top: 4.8rem;
}
.practice-index__tags {
gap: 0.6rem;
}
.practice-index__tag {
min-height: 3rem;
padding: 0.45rem 1rem;
}
.practice-detail {
padding-top: 7.2rem;
}
.practice-detail__heading {
padding: 5.6rem 0 4rem;
}
.practice-detail__sub-visual .no-sub-visual__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.2rem;
}
.practice-detail__sub-visual .no-sub-visual__title {
order: 1;
}
.practice-detail__sub-visual .no-sub-visual__nav {
order: 2;
align-self: stretch;
justify-self: auto;
margin: 0;
}
.practice-detail__sub-visual .no-sub-visual__menu {
right: auto;
left: 0;
max-width: calc(100vw - 4.8rem);
}
.practice-detail__visual {
height: 30rem;
border-radius: 1.8rem;
}
.practice-detail__overview {
margin-top: 5.6rem;
padding-bottom: 6.4rem;
}
.practice-detail__lead, .practice-detail__body {
word-break: normal;
}
.practice-detail__scope {
padding-top: 3.6rem;
}
.practice-detail__scope-list {
grid-template-columns: 1fr;
}
.practice-detail__scope-item {
min-height: 6.4rem;
}
}
.people-index-page {
background: var(--clr-ui-light);
}
.people-index {
color: var(--clr-text-base);
}
.people-index__inner, .people-index__group {
min-width: 0;
}
.people-index__toolbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
@media (max-width: 544px) {
.people-index__toolbar {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
}
}
.people-index__search {
width: min(100%, 39rem);
}
.people-index__search .ui-search-submit {
width: 100%;
}
@media (max-width: 544px) {
.people-index__search {
width: 100%;
}
}
.people-index__total {
margin: 0;
white-space: nowrap;
}
.people-index__total strong {
color: var(--clr-ui-main);
font: inherit;
font-weight: 700;
}
.people-index__groups {
margin-top: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem);
}
.people-index__group + .people-index__group {
margin-top: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem);
}
.people-index__group-title {
margin: 0;
padding-bottom: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
border-bottom: 0.2rem solid var(--clr-base-black);
word-break: keep-all;
font-size: clamp(2.2rem, 0.6472491909vw + 1.9572815534rem, 3.2rem);
}
.people-index__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2rem);
margin: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem) 0 0;
padding: 0;
list-style: none;
}
.people-index__item {
display: flex;
width: 100%;
min-width: 0;
}
.people-index__card {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background: var(--clr-base-white);
}
.people-index__media-wrap {
position: relative;
border-top-left-radius: 1.6rem;
border-top-right-radius: 1.6rem;
overflow: hidden;
}
.people-index__media {
aspect-ratio: 1/1;
background: #dce1da;
height: auto;
}
.people-index__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.people-index__placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: #dce1da;
color: var(--clr-ui-main);
}
.people-index__homepage {
position: absolute;
top: 0.8rem;
right: 0.8rem;
display: grid;
width: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem);
height: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem);
place-items: center;
border-radius: 50%;
background: var(--clr-ui-main);
color: var(--clr-base-white);
text-decoration: none;
}
.people-index__homepage:focus-visible {
outline: 0.2rem solid var(--clr-base-white);
outline-offset: -0.4rem;
}
.people-index__homepage i {
font-size: 0.8em;
}
.people-index__card-body {
flex: 1 1 auto;
padding: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem) clamp(0.9rem, 0.5825242718vw + 0.6815533981rem, 1.8rem);
border: 1px solid #dddddd;
border-top: none;
border-bottom-left-radius: 1.6rem;
border-bottom-right-radius: 1.6rem;
}
.people-index__identity {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.4rem);
}
.people-index__person {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.2rem;
margin: 0;
}
.people-index__name, .people-index__position {
font: inherit;
}
.people-index__university {
flex: 0 0 auto;
color: var(--clr-ui-main);
text-align: right;
}
.people-index__meta {
display: grid;
gap: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
margin: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem) 0 0;
padding: 0;
color: color-mix(in srgb, var(--clr-base-black) 62%, transparent);
list-style: none;
}
.people-index__meta-item {
display: flex;
align-items: center;
gap: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem);
min-width: 0;
font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
@media (max-width: 544px) {
.people-index__meta-item {
align-items: flex-start;
}
}
.people-index__meta-item a {
min-width: 0;
color: inherit;
text-decoration: none;
overflow-wrap: anywhere;
font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
.people-index__meta-icon {
flex: 0 0 1.6rem;
width: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
height: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
object-fit: contain;
}
@media (max-width: 544px) {
.people-index__meta-icon {
transform: translateY(0.2rem);
}
}
@media (max-width: 1320px) {
.people-index__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.people-index__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.people-index__toolbar {
align-items: flex-start;
flex-direction: column;
}
.people-index__search {
width: 100%;
}
.people-index__total {
order: -1;
}
}
@media (max-width: 375px) {
.people-index__grid {
grid-template-columns: 1fr;
}
}
.people-detail-page {
background: var(--clr-base-white);
}
.people-detail {
padding-top: 8rem;
padding-bottom: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem);
color: var(--clr-text-base);
}
.people-detail__hero {
padding: clamp(5.6rem, 2.3300970874vw + 4.7262135922rem, 9.2rem) 0 clamp(7.2rem, 2.3300970874vw + 6.3262135922rem, 10.8rem);
}
.people-detail__sub-visual .no-sub-visual__nav {
margin-bottom: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
color: var(--clr-text-sub);
}
.people-detail__sub-visual .no-sub-visual__title {
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.035em;
}
.people-detail__visual {
position: relative;
height: clamp(36rem, 9.0614886731vw + 32.6019417476rem, 50rem);
}
.people-detail__background {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: clamp(22rem, 5.1779935275vw + 20.0582524272rem, 30rem);
border-radius: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
object-fit: cover;
}
.people-detail__portrait {
position: absolute;
bottom: 0;
left: clamp(1.8rem, 3.8834951456vw + 0.3436893204rem, 7.8rem);
z-index: 1;
display: block;
width: clamp(30rem, 12.9449838188vw + 25.145631068rem, 50rem);
height: clamp(34rem, 10.355987055vw + 30.1165048544rem, 50rem);
object-fit: contain;
object-position: center bottom;
pointer-events: none;
}
.people-detail__identity {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.22em;
margin: clamp(3.4rem, 1.2944983819vw + 2.9145631068rem, 5.4rem) 0 clamp(5.4rem, 1.8122977346vw + 4.7203883495rem, 8.2rem);
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.03em;
word-break: keep-all;
}
.people-detail__name, .people-detail__position {
font: inherit;
}
.people-detail__content {
border-top: 1px solid var(--clr-gray-300);
}
.people-detail__section {
padding: clamp(3.8rem, 1.1650485437vw + 3.3631067961rem, 5.6rem) 0;
border-bottom: 1px solid var(--clr-gray-200);
}
.people-detail__section-title {
margin: 0 0 clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
color: var(--clr-text-base);
font-weight: 700;
letter-spacing: -0.025em;
}
.people-detail__introduction {
max-width: 110rem;
margin: 0;
color: var(--clr-gray-800);
line-height: 1.85;
word-break: keep-all;
}
.people-detail__list {
display: grid;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
margin: 0;
padding: 0;
list-style: none;
}
.people-detail__item {
position: relative;
padding-left: 1.2em;
color: var(--clr-gray-800);
line-height: 1.75;
word-break: keep-all;
}
.people-detail__item::before {
position: absolute;
top: 0;
left: 0;
content: "·";
font-weight: 700;
}
.people-detail__section--cases {
padding-top: clamp(4.8rem, 1.5533980583vw + 4.2174757282rem, 7.2rem);
padding-bottom: clamp(5.2rem, 1.5533980583vw + 4.6174757282rem, 7.6rem);
}
.people-detail__footer {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
margin: clamp(7.2rem, 2.5889967638vw + 6.2291262136rem, 11.2rem) auto 0;
}
@media (max-width: 544px) {
.people-detail__hero {
padding-bottom: 5.6rem;
}
.people-detail__visual {
height: 34rem;
}
.people-detail__background {
height: 19rem;
border-radius: 1.8rem;
}
.people-detail__portrait {
left: 50%;
width: min(31rem, 92vw);
height: 32rem;
transform: translateX(-50%);
}
.people-detail__identity {
justify-content: center;
text-align: center;
}
.people-detail__introduction, .people-detail__item {
word-break: normal;
}
.people-detail__footer {
margin-top: 5.6rem;
}
}
.legal-privacy-page {
background: var(--clr-base-white);
}
.legal-privacy {
--legal-card-bg: #fff;
padding-top: calc(var(--header-height) + clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem));
padding-bottom: clamp(9.6rem, 4.142394822vw + 8.0466019417rem, 16rem);
color: var(--clr-text-base);
}
.legal-privacy__layout {
display: grid;
grid-template-columns: minmax(16rem, 0.22fr) minmax(0, 1fr);
align-items: start;
gap: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem);
}
.legal-privacy__side {
position: sticky;
top: calc(var(--header-height) + clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem));
align-self: start;
min-width: 0;
}
.legal-privacy__side-title {
margin: 0 0 clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
color: var(--clr-text-base);
letter-spacing: -0.03em;
word-break: keep-all;
}
.legal-privacy__tabs {
border-left: 0.3rem solid color-mix(in srgb, var(--clr-base-black) 8%, transparent);
}
.legal-privacy__tab-list {
margin: 0;
padding: 0;
list-style: none;
}
.legal-privacy__tab-item {
margin: 0;
}
.legal-privacy__tab-link {
position: relative;
display: block;
padding: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem) 0 clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem) clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
color: var(--clr-text-sub);
line-height: 1.45;
word-break: keep-all;
transition: color 0.2s ease, font-weight 0.2s ease;
}
.legal-privacy__tab-link:hover, .legal-privacy__tab-link:focus-visible, .legal-privacy__tab-link.is-active {
color: var(--clr-ui-main);
outline: none;
}
.legal-privacy__tab-link.is-active {
font-weight: 700;
}
.legal-privacy__tab-link.is-active::before {
position: absolute;
top: 50%;
left: -0.3rem;
width: 0.3rem;
height: 80%;
background-color: var(--clr-ui-main);
content: "";
transform: translateY(-50%);
}
.legal-privacy__tab-item:first-child .legal-privacy__tab-link {
padding-top: 0;
}
.legal-privacy__tab-item:last-child .legal-privacy__tab-link {
padding-bottom: 0;
}
.legal-privacy__main {
display: grid;
gap: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
min-width: 0;
}
.legal-privacy__card {
min-width: 0;
padding: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem);
background: var(--legal-card-bg);
border-radius: 1.6rem;
scroll-margin-top: calc(var(--header-height) + clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem));
}
.legal-privacy__card-title {
display: flex;
align-items: baseline;
gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
margin: 0 0 clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
color: var(--clr-text-base);
letter-spacing: -0.025em;
word-break: keep-all;
}
.legal-privacy__card-number {
flex: 0 0 auto;
color: var(--clr-ui-main);
font-variant-numeric: tabular-nums;
font-size: clamp(1.4rem, 0.6472491909vw + 1.1572815534rem, 2.4rem);
}
.legal-privacy__card-body {
display: grid;
gap: 0.6rem;
min-width: 0;
}
.legal-privacy__paragraph {
margin: 0;
color: #222;
line-height: 1.85;
word-break: keep-all;
}
.legal-privacy__contact {
display: grid;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
margin: 0.4rem 0 0;
padding-top: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
border-top: 1px solid color-mix(in srgb, var(--clr-base-black) 8%, transparent);
}
.legal-privacy__contact-row {
display: grid;
grid-template-columns: 7.2rem minmax(0, 1fr);
gap: 1.6rem;
align-items: baseline;
}
.legal-privacy__contact-label, .legal-privacy__contact-value {
margin: 0;
}
.legal-privacy__contact-label {
color: var(--clr-text-base);
}
.legal-privacy__contact-value {
color: var(--clr-gray-700);
word-break: keep-all;
}
.legal-privacy__contact-value a {
color: inherit;
transition: color 0.2s ease;
}
.legal-privacy__contact-value a:hover, .legal-privacy__contact-value a:focus-visible {
color: var(--clr-ui-main);
outline: none;
}
@media (max-width: 1024px) {
.legal-privacy__layout {
grid-template-columns: 18rem minmax(0, 1fr);
gap: 4rem;
}
}
@media (max-width: 768px) {
.legal-privacy__layout {
grid-template-columns: 1fr;
gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
}
.legal-privacy__side {
position: static;
}
.legal-privacy__tabs {
overflow-x: auto;
border-left: 0;
border-bottom: 0.3rem solid color-mix(in srgb, var(--clr-base-black) 8%, transparent);
scrollbar-width: none;
}
.legal-privacy__tabs::-webkit-scrollbar {
display: none;
}
.legal-privacy__tab-list {
display: flex;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
padding-bottom: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem);
}
.legal-privacy__tab-item {
flex: 0 0 auto;
}
.legal-privacy__tab-link {
padding: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem) clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
white-space: nowrap;
}
.legal-privacy__tab-link.is-active::before {
top: auto;
bottom: -0.3rem;
left: 50%;
width: 80%;
height: 0.3rem;
transform: translateX(-50%);
}
.legal-privacy__tab-item:first-child .legal-privacy__tab-link, .legal-privacy__tab-item:last-child .legal-privacy__tab-link {
padding-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
padding-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
}
@media (max-width: 544px) {
.legal-privacy {
padding-top: calc(var(--header-height) + 2.4rem);
}
.legal-privacy__contact-row {
grid-template-columns: 5.6rem minmax(0, 1fr);
gap: 1rem;
}
}
@media (prefers-reduced-motion: reduce) {
.legal-privacy__tab-link, .legal-privacy__contact-value a {
transition: none;
}
}
.auth-shell {
background: var(--clr-background-paper);
}
.auth-shell .auth-page.no-pd-140--y {
padding-top: calc(var(--header-height) + clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem));
padding-bottom: clamp(7rem, 4.5307443366vw + 5.3009708738rem, 14rem);
}
@media (max-width: 544px) {
.auth-shell .auth-page.no-pd-140--y {
padding-top: calc(var(--header-height) + 4rem);
}
}
.member-info {
padding: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 14%, transparent);
background: var(--clr-base-white);
box-shadow: 0 1rem 3.2rem color-mix(in srgb, var(--clr-ui-main) 6%, transparent);
}
.member-info__head {
display: flex;
align-items: center;
}
.member-info__head-icon {
display: grid;
flex: 0 0 clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.2rem);
width: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.2rem);
aspect-ratio: 1;
margin-right: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 18%, transparent);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--clr-ui-main) 9%, var(--clr-base-white));
color: var(--clr-ui-main);
place-items: center;
}
.member-info__copy {
min-width: 0;
}
.member-info__copy p {
margin-top: 0.4rem;
color: var(--clr-text-sub);
}
.member-info__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
margin: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem) 0 0;
}
.member-info__item {
min-width: 0;
padding: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 10%, transparent);
border-radius: var(--radius-sm);
background: var(--clr-ui-light);
}
.member-info__item dt {
display: flex;
align-items: center;
color: var(--clr-ui-main);
}
.member-info__item dd {
margin: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2rem) 0 0;
overflow-wrap: anywhere;
color: var(--clr-text-base);
}
.member-info__item--grade {
border-color: color-mix(in srgb, var(--clr-ui-main) 18%, transparent);
background: color-mix(in srgb, var(--clr-ui-sub) 24%, var(--clr-base-white));
}
.member-info__item--grade dd {
display: inline-flex;
padding: 0.4rem 1.2rem;
border-radius: 999px;
background: var(--clr-ui-main);
color: var(--clr-base-white);
}
.member-info__label-icon {
display: grid;
flex: 0 0 2.8rem;
width: 2.8rem;
aspect-ratio: 1;
margin-right: 0.8rem;
border-radius: 0.8rem;
background: color-mix(in srgb, var(--clr-ui-main) 9%, var(--clr-base-white));
color: var(--clr-ui-main);
place-items: center;
}
.member-info__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
padding: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
border-radius: var(--radius-sm);
background: var(--clr-ui-light);
}
.member-info__actions-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.member-info__btn {
display: inline-flex;
min-height: 4.8rem;
align-items: center;
justify-content: center;
padding-inline: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
border: 1px solid var(--clr-ui-main);
border-radius: 0.8rem;
background: var(--clr-ui-main);
color: var(--clr-base-white);
font-family: inherit;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.member-info__btn + .member-info__btn {
margin-left: 1rem;
}
.member-info__actions-group .member-info__btn + .member-info__btn {
margin-left: 0;
}
.member-info__btn i {
margin-right: 0.8rem;
}
.member-info__btn--primary:hover, .member-info__btn--primary:focus-visible {
border-color: color-mix(in srgb, var(--clr-ui-main) 82%, var(--clr-base-black));
background: color-mix(in srgb, var(--clr-ui-main) 82%, var(--clr-base-black));
}
.member-info__btn--secondary {
border-color: color-mix(in srgb, var(--clr-ui-main) 24%, transparent);
background: var(--clr-base-white);
color: var(--clr-ui-main);
}
.member-info__btn--secondary:hover, .member-info__btn--secondary:focus-visible {
border-color: var(--clr-ui-main);
background: color-mix(in srgb, var(--clr-ui-main) 8%, var(--clr-base-white));
}
.member-info__btn:focus-visible {
outline: 0.3rem solid color-mix(in srgb, var(--clr-ui-sub) 70%, transparent);
outline-offset: 0.3rem;
}
.member-info__btn--danger {
border-color: color-mix(in srgb, #b42318 42%, transparent);
background: #fff8f7;
color: #b42318;
}
.member-info__btn--danger:hover, .member-info__btn--danger:focus-visible {
background: #b42318;
color: var(--clr-base-white);
}
@media (max-width: 768px) {
.member-info__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 544px) {
.member-info__head-icon {
flex-basis: 4.4rem;
width: 4.4rem;
}
.member-info__list {
grid-template-columns: 1fr;
}
.member-info__actions {
align-items: stretch;
flex-direction: column;
}
.member-info__actions-group {
flex-direction: column;
width: 100%;
}
.member-info__btn {
width: 100%;
}
.member-info__btn + .member-info__btn {
margin-top: 1rem;
margin-left: 0;
}
.member-info__actions-group .member-info__btn + .member-info__btn {
margin-top: 1rem;
}
}
.auth-modal[hidden] {
display: none;
}
.auth-modal .app-modal-box {
max-height: calc(100svh - 3.2rem);
}
.auth-modal .app-modal-body {
overflow-y: auto;
white-space: normal;
}
.auth-modal__desc, .auth-modal__danger {
margin-bottom: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
}
.auth-modal__desc {
color: var(--clr-text-sub);
}
.auth-modal__danger {
padding: 1.4rem 1.6rem;
border-left: 0.4rem solid #b42318;
background: #fff4f2;
color: #912018;
}
.auth-modal__section {
margin-top: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
padding-top: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
border-top: 1px solid var(--clr-ui-border);
}
.auth-modal__section-head {
margin-bottom: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
}
.auth-modal__section-title {
margin: 0 0 0.4rem;
color: var(--clr-text-base);
}
.auth-modal__section-desc {
margin: 0;
color: var(--clr-text-sub);
}
.auth-modal .app-modal-btn.auth-modal__delete {
border-color: #b42318;
background: #b42318;
color: var(--clr-base-white);
}
.auth-modal .app-modal-btn.auth-modal__delete:hover, .auth-modal .app-modal-btn.auth-modal__delete:focus-visible {
border-color: #7a271a;
background: #7a271a;
}
@media (max-width: 544px) {
.auth-modal .app-modal-footer {
align-items: stretch;
flex-direction: column-reverse;
}
.auth-modal .app-modal-btn {
width: 100%;
}
}
body.has-auth-modal {
overflow: hidden;
}
.auth-page {
color: var(--clr-text-base);
}
.auth-page__container {
max-width: 54rem;
margin-inline: auto;
padding-top: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 4.8rem);
border-top: 0.4rem solid var(--clr-ui-main);
}
.auth-page__head {
margin-bottom: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
}
.auth-page__title {
color: var(--clr-base-black);
}
.auth-page__description, .auth-page__desc {
margin-top: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
color: var(--clr-text-sub);
}
.auth-page__form {
display: grid;
gap: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem);
}
.auth-page--login .auth-page__form {
padding: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 18%, transparent);
background: var(--clr-base-white);
}
.auth-page__section {
padding: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem);
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 18%, transparent);
background: var(--clr-base-white);
}
.auth-page__section--consent {
border-color: #ddd;
background: #fff;
}
.auth-page__section-heading {
display: flex;
align-items: flex-start;
gap: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
margin-bottom: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.auth-page__section-number {
width: clamp(3.2rem, 0.7766990291vw + 2.9087378641rem, 4.4rem);
height: clamp(3.2rem, 0.7766990291vw + 2.9087378641rem, 4.4rem);
border-radius: 0.8rem;
background: var(--clr-ui-main);
color: var(--clr-base-white);
display: flex;
justify-content: center;
align-items: center;
}
.auth-page__section-copy {
min-width: 0;
}
.auth-page__section-title {
color: var(--clr-base-black);
font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
}
.auth-page__section-description {
color: var(--clr-text-sub);
font-size: fuid(13, 16);
}
.auth-page__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
}
.auth-page__field {
min-width: 0;
}
.auth-page__label {
display: block;
margin-bottom: 0.8rem;
color: var(--clr-text-base);
}
.auth-page__required {
margin-left: 0.4rem;
color: var(--clr-ui-main);
}
.auth-page__input-wrap {
position: relative;
}
.auth-page__input {
display: block;
width: 100%;
min-height: clamp(4.5rem, 0.6472491909vw + 4.2572815534rem, 5.5rem);
padding-inline: 1.5rem;
border: 1px solid #ddd;
border-radius: 0.6rem;
background: var(--clr-base-white);
color: #333;
font: inherit;
font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
line-height: 1.31;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.auth-page__input::placeholder {
color: var(--clr-text-aux);
}
.auth-page__input:focus {
border-color: var(--clr-ui-main);
outline: 0;
}
.auth-page__input:disabled {
background: var(--clr-ui-light);
color: var(--clr-text-aux);
cursor: not-allowed;
}
.auth-page__input[aria-invalid=true], .auth-page__input.is-error {
border-color: #b42318;
box-shadow: 0 0 0 0.3rem rgba(180, 35, 24, 0.1);
}
.auth-page__input-wrap--password .auth-page__input {
padding-right: 5.8rem;
}
.auth-page__password-toggle {
position: absolute;
top: 50%;
right: 0;
display: grid;
width: 5.4rem;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: var(--clr-ui-main);
place-items: center;
transform: translateY(-50%);
cursor: pointer;
}
.auth-page__password-toggle:focus-visible {
outline: 0.2rem solid var(--clr-ui-sub);
outline-offset: -0.4rem;
}
.auth-page__toggle-icon {
display: grid;
place-items: center;
}
.auth-page__hint {
margin-top: 0.8rem;
color: var(--clr-text-sub);
}
.auth-page__utility, .auth-page__options {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.2rem 2rem;
}
.auth-page__checkbox-wrap {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
}
.auth-page__checkbox-input, .auth-page__choice-input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
.auth-page__checkbox-box {
display: grid;
width: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
height: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 35%, transparent);
border-radius: 0.3rem;
background: var(--clr-base-white);
color: transparent;
place-items: center;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.auth-page__checkbox-input:checked + .auth-page__checkbox-box {
border-color: var(--clr-ui-main);
background: var(--clr-ui-main);
color: var(--clr-base-white);
}
.auth-page__checkbox-input:focus-visible + .auth-page__checkbox-box {
outline: 0.3rem solid color-mix(in srgb, var(--clr-ui-sub) 65%, transparent);
outline-offset: 0.2rem;
}
.auth-page__checkbox-label, .auth-page__choice-label {
color: var(--clr-text-base);
}
.auth-page__help-link, .auth-page__link, .auth-page__privacy-link {
color: var(--clr-ui-main);
text-decoration: underline;
text-underline-offset: 0.4rem;
}
.auth-page__help-link:hover, .auth-page__help-link:focus-visible, .auth-page__link:hover, .auth-page__link:focus-visible, .auth-page__privacy-link:hover, .auth-page__privacy-link:focus-visible {
color: var(--clr-base-black);
}
.auth-page__help-link {
justify-self: end;
}
.auth-page__consent-box {
max-height: clamp(18rem, 3.8834951456vw + 16.5436893204rem, 24rem);
overflow-y: auto;
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 24%, transparent);
border-left: 0.4rem solid var(--clr-ui-main);
background: var(--clr-ui-light);
scrollbar-color: var(--clr-ui-main) var(--clr-ui-sub);
scrollbar-width: thin;
}
.auth-page__consent-box:focus-visible {
outline: 0.3rem solid color-mix(in srgb, var(--clr-ui-sub) 70%, transparent);
outline-offset: 0.2rem;
}
.auth-page__consent-box::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
}
.auth-page__consent-box::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--clr-ui-sub) 45%, var(--clr-base-white));
}
.auth-page__consent-box::-webkit-scrollbar-thumb {
background: var(--clr-ui-main);
}
.auth-page__consent-intro {
margin-bottom: 1.2rem;
color: var(--clr-text-base);
}
.auth-page__consent-intro, .auth-page__consent-term, .auth-page__consent-value, .auth-page__privacy-link {
font-size: 1.2rem;
}
.auth-page__consent-list {
margin: 0;
border-top: 1px solid color-mix(in srgb, var(--clr-ui-main) 22%, transparent);
}
.auth-page__consent-row {
display: grid;
grid-template-columns: 10rem minmax(0, 1fr);
border-bottom: 1px solid color-mix(in srgb, var(--clr-ui-main) 18%, transparent);
}
.auth-page__consent-term, .auth-page__consent-value {
margin: 0;
padding: 1.2rem;
}
.auth-page__consent-term {
background: color-mix(in srgb, var(--clr-ui-sub) 30%, var(--clr-base-white));
color: var(--clr-ui-main);
}
.auth-page__consent-value {
color: var(--clr-text-sub);
}
.auth-page__privacy-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1.2rem;
}
.auth-page__consent-note {
margin-top: 1.2rem;
color: var(--clr-text-sub);
}
.auth-page__choice-list {
display: flex;
flex-wrap: wrap;
gap: 1.2rem 2.4rem;
margin-top: 2rem;
}
.auth-page__choice {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
}
.auth-page__choice-control {
display: grid;
width: 1.6rem;
height: 1.6rem;
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 42%, transparent);
border-radius: 50%;
background: var(--clr-base-white);
place-items: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-page__choice-control span {
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
background: var(--clr-ui-main);
opacity: 0;
transform: scale(0.6);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.auth-page__choice-input:checked + .auth-page__choice-control {
border-color: var(--clr-ui-main);
}
.auth-page__choice-input:checked + .auth-page__choice-control span {
opacity: 1;
transform: scale(1);
}
.auth-page__choice-input:focus-visible + .auth-page__choice-control {
box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--clr-ui-sub) 70%, transparent);
}
.auth-page__choice-input.is-error + .auth-page__choice-control, .auth-page__choice-input[aria-invalid=true] + .auth-page__choice-control {
border-color: #b42318;
box-shadow: 0 0 0 0.3rem rgba(180, 35, 24, 0.1);
}
.auth-page__btn {
display: inline-flex;
min-height: clamp(4.8rem, 0.6472491909vw + 4.5572815534rem, 5.8rem);
width: clamp(18rem, 7.7669902913vw + 15.0873786408rem, 30rem);
margin: 0 auto;
align-items: center;
justify-content: center;
gap: 0.8rem;
padding-inline: 2.4rem;
border: 1px solid transparent;
border-radius: 0.8rem;
font: inherit;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.auth-page__btn--primary {
border-color: var(--clr-ui-main);
background: var(--clr-ui-main);
color: var(--clr-base-white);
}
.auth-page__btn--primary:hover, .auth-page__btn--primary:focus-visible {
opacity: 0.95;
}
.auth-page__btn--outline, .auth-page__btn--secondary {
border-color: var(--clr-ui-main);
background: var(--clr-base-white);
color: var(--clr-ui-main);
}
.auth-page__btn--outline:hover, .auth-page__btn--outline:focus-visible, .auth-page__btn--secondary:hover, .auth-page__btn--secondary:focus-visible {
background: var(--clr-ui-light);
color: var(--clr-base-black);
}
.auth-page__btn:disabled {
border-color: var(--clr-ui-sub);
background: var(--clr-ui-sub);
color: var(--clr-ui-main);
cursor: not-allowed;
}
.auth-page__btn-loader {
display: none;
}
.auth-page__btn-inner {
display: inline-flex;
align-items: center;
font-size: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2rem);
}
.auth-page__error-box, .auth-page__error {
margin-bottom: 2rem;
padding: 1.4rem 1.8rem;
border-left: 0.4rem solid #b42318;
background: #fff4f2;
color: #912018;
}
.auth-page__success-box {
margin-bottom: 2rem;
padding: 1.4rem 1.8rem;
border-left: 0.4rem solid var(--clr-ui-main);
background: var(--clr-ui-light);
color: var(--clr-ui-main);
}
.auth-page__footer {
margin-top: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
color: var(--clr-text-sub);
display: flex;
justify-content: center;
align-items: flex-end;
gap: 0.8rem;
}
.auth-page__captcha-row {
display: grid;
grid-template-columns: auto 4.8rem 1fr;
gap: 0.8rem;
align-items: center;
}
.auth-page__captcha-wrap[hidden] {
display: none;
}
.auth-page__captcha-img {
display: block;
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 30%, transparent);
}
.auth-page__captcha-refresh {
display: grid;
min-height: 4.8rem;
padding: 0;
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 30%, transparent);
background: var(--clr-base-white);
color: var(--clr-ui-main);
place-items: center;
cursor: pointer;
}
.auth-page__input--captcha {
min-height: 4.8rem;
}
.auth-page--notice {
display: grid;
min-height: 100svh;
align-items: center;
}
@media (max-width: 768px) {
.auth-page--notice {
min-height: 80svh;
}
}
.auth-page__notice-card {
position: relative;
overflow: hidden;
padding: clamp(3.6rem, 1.8122977346vw + 2.9203883495rem, 6.4rem) clamp(2.4rem, 2.071197411vw + 1.6233009709rem, 5.6rem);
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 12%, transparent);
background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--clr-ui-sub) 24%, transparent), transparent 42%), var(--clr-base-white);
box-shadow: 0 clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem) clamp(5rem, 1.9417475728vw + 4.2718446602rem, 8rem) color-mix(in srgb, var(--clr-ui-main) 10%, transparent);
text-align: center;
}
.auth-page__notice-icon {
display: grid;
width: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
height: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
margin-inline: auto;
border: 1px solid color-mix(in srgb, var(--clr-ui-main) 14%, transparent);
border-radius: 50%;
color: var(--clr-ui-main);
font-size: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
place-items: center;
box-shadow: inset 0 0 0 0.6rem color-mix(in srgb, var(--clr-base-white) 70%, transparent);
}
.auth-page__notice-icon-graphic {
display: block;
width: clamp(2.4rem, 0.3883495146vw + 2.254368932rem, 3rem);
height: clamp(2.4rem, 0.3883495146vw + 2.254368932rem, 3rem);
fill: none;
stroke: currentcolor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.auth-page__notice-copy {
margin-top: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
}
@media (max-width: 768px) {
.auth-page--notice .auth-page__description br {
display: block;
}
}
.auth-page__notice-actions {
display: flex;
justify-content: center;
gap: 1.2rem;
margin-top: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem);
}
.auth-page--notice .auth-page__btn {
min-width: clamp(13.2rem, 1.8122977346vw + 12.5203883495rem, 16rem);
}
.auth-page--notice .auth-page__btn:focus-visible {
outline: 0.2rem solid var(--clr-ui-main);
outline-offset: 0.3rem;
}
@media (max-width: 544px) {
.auth-page__container {
padding-top: 2.4rem;
}
.auth-page__grid {
grid-template-columns: 1fr;
}
.auth-page__section {
padding-inline: 2rem;
}
.auth-page__section-heading {
align-items: flex-start;
flex-direction: column;
}
.auth-page__consent-row {
grid-template-columns: 1fr;
}
.auth-page__consent-term, .auth-page__consent-value {
padding: 1rem;
}
.auth-page__choice-list, .auth-page__notice-actions {
align-items: stretch;
}
.auth-page__notice-card {
padding-inline: 2rem;
}
.auth-page--notice .auth-page__btn {
width: 100%;
}
.auth-page__utility, .auth-page__options {
align-items: flex-start;
}
.auth-page__help-link {
justify-self: start;
}
.auth-page__captcha-row {
grid-template-columns: 1fr 4.8rem;
}
.auth-page__input--captcha {
grid-column: 1/-1;
}
}
.no-main section,
.no-sub section {
background-color: var(--clr-ui-light);
}
:root {
--admin-white: #ffffff;
--admin-black: #0a0a0a;
--admin-grey-50: #f9fafb;
--admin-grey-100: #f3f4f6;
--admin-grey-200: #e5e7eb;
--admin-grey-300: #d1d5db;
--admin-grey-400: #9ca3af;
--admin-grey-500: #6b7280;
--admin-grey-600: #4b5563;
--admin-grey-700: #374151;
--admin-grey-800: #1f2937;
--admin-grey-900: #111827;
--admin-grey-950: #030712;
--admin-error: #dc2626;
--admin-error-rgb: 220, 38, 38;
--admin-error-bg: #fee2e2;
--admin-error-text: #b91c1c;
--admin-error-border: rgb(243.0197044335, 114.9802955665, 114.9802955665);
--admin-error-hover: rgb(195.8166666667, 31.5833333333, 31.5833333333);
--admin-error-active: rgb(178.25, 28.75, 28.75);
--admin-success: #22c55e;
--admin-success-rgb: 34, 197, 94;
--admin-success-bg: #dcfce7;
--admin-success-text: #15803d;
--admin-success-border: rgb(60.5584415584, 221.4415584416, 119.7792207792);
--admin-success-hover: rgb(29.4961038961, 170.9038961039, 81.5480519481);
--admin-success-active: rgb(26.4935064935, 153.5064935065, 73.2467532468);
--admin-warn: #eab308;
--admin-warn-rgb: 234, 179, 8;
--admin-warn-bg: #fef9c3;
--admin-warn-text: #a16207;
--admin-warn-border: rgb(247.826446281, 198.5082644628, 45.173553719);
--admin-warn-hover: rgb(204.4115702479, 156.3661157025, 6.9884297521);
--admin-warn-active: rgb(184.6859504132, 141.2768595041, 6.3140495868);
--admin-premium: #f9a825;
--admin-premium-rgb: 249, 168, 37;
--admin-premium-bg: #fffde7;
--admin-premium-text: #f57f17;
--admin-premium-hover: rgb(248.1803571429, 156.1151785714, 7.2196428571);
--admin-premium-active: rgb(228.7053571429, 143.7276785714, 6.2946428571);
--admin-info: #3b82f6;
--admin-info-rgb: 59, 130, 246;
--admin-info-bg: #eff6ff;
--admin-info-text: #1d4ed8;
--admin-primary: #0076cb;
--admin-primary-rgb: 0, 118, 203;
--admin-primary-hover: #0066b2;
--admin-primary-light: #f0f8ff;
--admin-primary-border: #dff0ff;
--admin-primary-text: #0066b2;
--admin-on-primary: #ffffff;
--admin-header-notifications-pill-bg: rgba(255, 255, 255, 0.92);
--admin-header-notifications-pill-fg: #1a1a2e;
--admin-header-notifications-pill-border: rgba(255, 255, 255, 0.65);
--admin-header-notifications-pill-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
--admin-accent-violet: #5b21b6;
--admin-accent-violet-bg: #ede9fe;
--admin-accent-violet-text: #4c1d95;
--admin-accent-purple: #6d28d9;
--admin-accent-purple-bg: #f5f3ff;
--admin-accent-purple-text: #5b21b6;
--admin-accent-fuchsia: #a21caf;
--admin-accent-fuchsia-bg: #fae8ff;
--admin-accent-fuchsia-text: #86198f;
--admin-accent-pink: #be185d;
--admin-accent-pink-bg: #fce7f3;
--admin-accent-pink-text: #9d174d;
--admin-accent-rose: #e11d48;
--admin-accent-rose-bg: #ffe4e6;
--admin-accent-rose-text: #be123c;
--admin-accent-coral: #ea580c;
--admin-accent-coral-bg: #ffedd5;
--admin-accent-coral-text: #c2410c;
--admin-accent-cyan: #0e7490;
--admin-accent-cyan-bg: #ecfeff;
--admin-accent-cyan-text: #155e75;
--admin-accent-teal: #0f766e;
--admin-accent-teal-bg: #ccfbf1;
--admin-accent-teal-text: #115e59;
--admin-drawer-width: 220px;
--admin-drawer-mini-width: 68px;
--admin-sub-drawer-width: 220px;
--admin-header-height: 6.4rem;
--admin-body-bg: #f4f6f8;
--admin-main-bg: #ffffff;
--admin-card-bg: #ffffff;
--admin-bg-soft: #f9fafb;
--admin-header-bg: linear-gradient(135deg, #0066b2 0%, #0a4370 50%, #055187 100%);
--admin-header-bg-hover: rgba(255, 255, 255, 0.1);
--admin-drawer-bg: #ffffff;
--admin-drawer-border: #e5e7eb;
--admin-drawer-text: #4b5563;
--admin-drawer-text-active: #111827;
--admin-drawer-hover-bg: #f3f4f6;
--admin-drawer-active-bg: #f0f8ff;
--admin-drawer-active-bar: 3px solid #0076cb;
--admin-drawer-active-accent: #0066b2;
--admin-drawer-focus-ring: rgba(0, 118, 203, 0.25);
--admin-drawer-summary-open-bg: #f9fafb;
--admin-drawer-summary-open-border: #f3f4f6;
--admin-drawer-sublink-active-bg: #f0f8ff;
--admin-drawer-sublink-active-bar: 3px solid #0076cb;
--admin-drawer-top-bg: #f9fafb;
--admin-drawer-top-border: #e5e7eb;
--admin-drawer-top-text: #374151;
--admin-drawer-avatar-bg: #0076cb;
--admin-border: #d1d5db;
--admin-border-light: #e5e7eb;
--admin-border-strong: #9ca3af;
--admin-border-focus: #0a97ed;
--admin-outline: rgba(0, 0, 0, 0.1);
--admin-outline-variant: rgba(0, 0, 0, 0.06);
--admin-fs-xs: 1.1rem;
--admin-fs-sm: 1.2rem;
--admin-fs-base: 1.3rem;
--admin-fs-body: 1.4rem;
--admin-fs-body-lg: 1.4rem;
--admin-fs-lg: 1.5rem;
--admin-fs-xl: 1.6rem;
--admin-fs-2xl: 1.8rem;
--admin-fs-display: 2.4rem;
--admin-fs-menu: var(--admin-fs-lg);
--admin-fs-title: var(--admin-fs-2xl);
--admin-fs-subtitle: 2.0rem;
--admin-fs-body-xl: var(--admin-fs-body-lg);
--admin-text: #111827;
--admin-text-secondary: #6b7280;
--admin-text-muted: #9ca3af;
--admin-text-disabled: #d1d5db;
--admin-text-tertiary: #4b5563;
--admin-text-inverse: #f9fafb;
--admin-state-hover: rgba(0, 0, 0, 0.04);
--admin-state-focus: rgba(0, 0, 0, 0.08);
--admin-state-pressed: rgba(0, 0, 0, 0.1);
--admin-state-drag: rgba(0, 0, 0, 0.12);
--admin-focus-ring: 0 0 0 3px #dff0ff;
--admin-focus-ring-border: 1px solid #0a97ed;
--admin-focus-ring-offset: 0px;
--admin-error-focus-ring: 0 0 0 3px #fee2e2;
--admin-duration-short: 150ms;
--admin-duration: 200ms;
--admin-duration-long: 300ms;
--admin-ease: cubic-bezier(0.4, 0, 0.2, 1);
--admin-ease-out: cubic-bezier(0, 0, 0.2, 1);
--admin-radius-xs: 3px;
--admin-radius-sm: 5px;
--admin-radius: 8px;
--admin-radius-lg: 10px;
--admin-radius-full: 9999px;
--admin-size-input-height: 3.6rem;
--admin-size-icon-sm: 1.125rem;
--admin-size-icon: 1.25rem;
--admin-size-icon-lg: 2.5rem;
--admin-size-select-arrow: 2.25rem;
--admin-size-scrollbar: 0.3rem;
--admin-size-dropdown-head-bg: 5.6rem;
--admin-size-editor-min-height: 18rem;
--admin-space-3xs: 0.2rem;
--admin-space-2xs: 0.4rem;
--admin-space-xs: 0.6rem;
--admin-space-sm: 0.75rem;
--admin-space: 1.0rem;
--admin-space-md: 1.0rem;
--admin-space-lg: 1.25rem;
--admin-space-xl: 1.5rem;
--admin-space-2xl: 2.0rem;
--admin-space-3xl: 2.5rem;
--admin-space-4xl: 3.0rem;
--admin-space-main-y: 5rem;
--admin-space-main-y-md: 3.6rem;
--admin-space-main-y-sm: 3rem;
--admin-section-action-gap: var(--admin-space-2xl);
--admin-elevation-0: none;
--admin-elevation-1: 0 1px 3px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
--admin-elevation-2: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
--admin-elevation-3: 0 8px 30px rgba(0,0,0,0.10);
--admin-shadow: var(--admin-elevation-1);
--admin-shadow-card: var(--admin-elevation-2);
--admin-surface: var(--admin-card-bg);
--admin-surface-2: var(--admin-bg-soft);
--admin-bg: var(--admin-body-bg);
--admin-bg-secondary: var(--admin-main-bg);
--admin-bg-subtle: var(--admin-bg-soft);
--admin-text-primary: var(--admin-text);
--admin-text-placeholder: var(--admin-text-muted);
--admin-on-surface: var(--admin-text);
--admin-on-surface-variant: var(--admin-text-secondary);
--admin-danger: var(--admin-error);
--admin-danger-bg: var(--admin-error-bg);
--admin-warning: var(--admin-warn);
--admin-warning-bg: var(--admin-warn-bg);
--admin-warning-hover: var(--admin-warn-hover);
--admin-on-error: var(--admin-on-primary);
--admin-on-success: var(--admin-on-primary);
--admin-on-warn: var(--admin-black);
--admin-primary-soft: var(--admin-primary-light);
--admin-primary-tint: var(--admin-primary-light);
--admin-duration-base: var(--admin-duration);
--admin-radius-md: var(--admin-radius);
--admin-fs-2xs: 1.0rem;
--admin-fs-md: var(--admin-fs-base);
--admin-fs-body-sm: var(--admin-fs-sm);
--admin-fs-3xl: 2.2rem;
--admin-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--admin-font-mono: var(--admin-mono);
--admin-shadow-md: var(--admin-elevation-2);
--admin-shadow-lg: var(--admin-elevation-3);
--admin-content-px: var(--admin-space-2xl);
--admin-z-dropdown: 1000;
--admin-modal-backdrop-bg: rgba(0, 0, 0, 0.6);
--admin-modal-backdrop-blur: 4px;
--admin-modal-backdrop-padding: var(--admin-space-lg);
--admin-modal-backdrop-z: 10000;
--admin-modal-box-bg: var(--admin-white);
--admin-modal-box-radius: var(--admin-radius);
--admin-modal-box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.08);
--admin-modal-min-width: 26rem;
--admin-modal-max-width: min(90vw, 36rem);
--admin-modal-max-height: 85vh;
--admin-modal-header-padding: var(--admin-space) var(--admin-space-lg);
--admin-modal-header-border: 1px solid var(--admin-border);
--admin-modal-title-fs: var(--admin-fs-body-lg);
--admin-modal-title-fw: 600;
--admin-modal-title-color: var(--admin-text);
--admin-modal-close-size: 2rem;
--admin-modal-close-radius: var(--admin-radius-sm);
--admin-modal-close-color: var(--admin-text-muted);
--admin-modal-close-hover-bg: var(--admin-grey-100);
--admin-modal-close-hover-color: var(--admin-text);
--admin-modal-close-focus-ring: 2px solid var(--admin-primary);
--admin-modal-body-padding: var(--admin-space-xl) var(--admin-space-lg);
--admin-modal-body-color: var(--admin-text-secondary);
--admin-modal-body-fs: var(--admin-fs-body);
--admin-modal-body-lh: 1.6;
--admin-modal-footer-padding: var(--admin-space) var(--admin-space-lg);
--admin-modal-footer-border: 1px solid var(--admin-border);
--admin-modal-btn-padding: 0.5rem 1.25rem;
--admin-modal-btn-radius: var(--admin-radius-sm);
--admin-modal-btn-fs: var(--admin-fs-sm);
--admin-modal-btn-border: 1px solid var(--admin-border);
--admin-modal-btn-bg: var(--admin-white);
--admin-modal-btn-color: var(--admin-text-secondary);
--admin-modal-btn-hover-bg: var(--admin-grey-50);
--admin-modal-btn-hover-border: var(--admin-grey-400);
--admin-modal-btn-primary-bg: var(--admin-primary);
--admin-modal-btn-primary-color: var(--admin-on-primary);
--admin-modal-btn-primary-hover-bg: var(--admin-primary-hover);
--admin-modal-duration: var(--admin-duration);
--admin-theme-mode: light;
}
[data-theme=dark] {
--admin-body-bg: #0b0d14;
--admin-main-bg: #13161e;
--admin-card-bg: #1c2032;
--admin-bg-soft: #161a26;
--admin-drawer-bg: #181c2a;
--admin-drawer-border: #2c3050;
--admin-drawer-text: #b8c0d4;
--admin-drawer-text-active: #ffffff;
--admin-drawer-hover-bg: #232740;
--admin-drawer-active-bg: rgba(52, 175, 252, 0.18);
--admin-drawer-active-bar: 3px solid #34affc;
--admin-drawer-active-accent: #7bcafe;
--admin-drawer-focus-ring: rgba(52, 175, 252, 0.35);
--admin-drawer-summary-open-bg: rgba(255,255,255,0.04);
--admin-drawer-summary-open-border: #2c3050;
--admin-drawer-sublink-active-bg: rgba(52, 175, 252, 0.14);
--admin-drawer-sublink-active-bar: 3px solid #7bcafe;
--admin-drawer-top-bg: #111422;
--admin-drawer-top-border: #2c3050;
--admin-drawer-top-text: #dde3f0;
--admin-drawer-avatar-bg: #0a97ed;
--admin-border: #2c3050;
--admin-border-light: #222640;
--admin-border-strong: #3d4472;
--admin-border-focus: #34affc;
--admin-outline: rgba(255,255,255,0.07);
--admin-outline-variant: rgba(255,255,255,0.04);
--admin-text: #eef2fa;
--admin-text-secondary: #a8b4cc;
--admin-text-muted: #6e7b99;
--admin-text-disabled: #3d4472;
--admin-text-tertiary: #b4bdd4;
--admin-text-inverse: #111827;
--admin-state-hover: rgba(255,255,255,0.05);
--admin-state-focus: rgba(255,255,255,0.08);
--admin-state-pressed: rgba(255,255,255,0.1);
--admin-state-drag: rgba(255,255,255,0.12);
--admin-focus-ring: 0 0 0 3px rgba(52,175,252,0.25);
--admin-focus-ring-border: 1px solid #34affc;
--admin-error-focus-ring: 0 0 0 3px rgba(239,68,68,0.2);
--admin-elevation-0: none;
--admin-elevation-1: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
--admin-elevation-2: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
--admin-elevation-3: 0 8px 30px rgba(0,0,0,0.5);
--admin-shadow: var(--admin-elevation-1);
--admin-shadow-card: var(--admin-elevation-2);
--admin-modal-box-bg: #1e2230;
--admin-modal-btn-bg: #252838;
--admin-modal-btn-color: #94a3b8;
--admin-modal-btn-hover-bg: #2e3347;
--admin-white: #1e2230;
--admin-theme-mode: dark;
--admin-grey-50: #252838;
--admin-grey-100: #2e3347;
--admin-grey-200: #3d4260;
--admin-grey-300: #4a5072;
--admin-grey-400: #64748b;
--admin-grey-500: #8899aa;
--admin-grey-600: #a0aec0;
--admin-grey-700: #cbd5e1;
--admin-grey-800: #e2e8f0;
--admin-grey-900: #f1f5f9;
--admin-header-notifications-pill-bg: rgba(255, 255, 255, 0.88);
--admin-header-notifications-pill-fg: #1a1a2e;
--admin-header-notifications-pill-border: rgba(255,255,255,0.55);
--admin-header-notifications-pill-shadow: 0 1px 4px rgba(0,0,0,0.6);
--admin-primary: #34affc;
--admin-primary-rgb: 96, 165, 250;
--admin-primary-hover: #7bcafe;
--admin-on-primary: #ffffff;
--admin-primary-light: rgba(52, 175, 252, 0.15);
--admin-primary-border: rgba(52, 175, 252, 0.30);
--admin-primary-text: #7bcafe;
--admin-primary-dark: #7bcafe;
--admin-text-muted: #8b9abf;
--admin-error-bg: rgba(220, 38, 38, 0.15);
--admin-error-text: #fca5a5;
--admin-error-border: rgba(220, 38, 38, 0.35);
--admin-success-bg: rgba(34, 197, 94, 0.13);
--admin-success-text: #86efac;
--admin-success-border: rgba(34, 197, 94, 0.30);
--admin-warn-bg: rgba(234, 179, 8, 0.13);
--admin-warn-text: #fde047;
--admin-warn-border: rgba(234, 179, 8, 0.30);
--admin-info-bg: rgba(59, 130, 246, 0.13);
--admin-info-text: #93c5fd;
--admin-premium-bg: rgba(249, 168, 37, 0.15);
--admin-premium-text: #fcd34d;
--admin-accent-violet-bg: rgba(91, 33, 182, 0.18);
--admin-accent-violet-text: #c4b5fd;
--admin-accent-teal-bg: rgba(15, 118, 110, 0.18);
--admin-accent-teal-text: #5eead4;
--admin-accent-coral-bg: rgba(234, 88, 12, 0.18);
--admin-accent-coral-text: #fdba74;
}
[data-theme=light-mongo] {
--admin-body-bg: #f8faf8;
--admin-main-bg: #ffffff;
--admin-card-bg: #ffffff;
--admin-bg-soft: #f0f6f3;
--admin-header-bg: linear-gradient(135deg, #00684A 0%, #004d35 100%);
--admin-drawer-bg: #f0f7f4;
--admin-drawer-border: #d4e8df;
--admin-drawer-text: #4a6b5a;
--admin-drawer-text-active: #004d35;
--admin-drawer-hover-bg: #d5ebe2;
--admin-drawer-active-bg: rgba(0, 104, 74, 0.14);
--admin-drawer-active-bar: 3px solid #004d35;
--admin-drawer-active-accent: #004d35;
--admin-drawer-focus-ring: rgba(0, 104, 74, 0.28);
--admin-drawer-summary-open-bg: #daeee6;
--admin-drawer-summary-open-border: #d4e8df;
--admin-drawer-sublink-active-bg: rgba(0, 104, 74, 0.10);
--admin-drawer-sublink-active-bar: 3px solid #004d35;
--admin-drawer-top-bg: #eaf3ef;
--admin-drawer-top-border: #d4e8df;
--admin-drawer-top-text: #2d5042;
--admin-drawer-avatar-bg: #00684A;
--admin-border: #d4e8df;
--admin-border-light: #e5f2ec;
--admin-border-strong: #a8cfc0;
--admin-border-focus: #00684A;
--admin-outline: rgba(0, 104, 74, 0.10);
--admin-outline-variant: rgba(0, 104, 74, 0.05);
--admin-text: #1C1F26;
--admin-text-secondary: #4a6b5a;
--admin-text-muted: #7ea090;
--admin-text-disabled: #c8ddd7;
--admin-text-tertiary: #2d5042;
--admin-text-inverse: #ffffff;
--admin-primary: #00684A;
--admin-primary-rgb: 0, 104, 74;
--admin-primary-hover: #005538;
--admin-primary-light: rgba(0, 104, 74, 0.10);
--admin-primary-border: #a8cfc0;
--admin-primary-text: #005538;
--admin-on-primary: #ffffff;
--admin-focus-ring: 0 0 0 3px rgba(0, 104, 74, 0.22);
--admin-focus-ring-border: 1px solid #00684A;
--admin-theme-mode: light;
}
[data-theme=dark-mongo] {
--admin-body-bg: #001e2b;
--admin-main-bg: #00293d;
--admin-card-bg: #023a51;
--admin-bg-soft: #002335;
--admin-header-bg: linear-gradient(135deg, #001e2b 0%, #00684a 100%);
--admin-drawer-bg: #001620;
--admin-drawer-border: #0a3a48;
--admin-drawer-text: #a3b3b0;
--admin-drawer-text-active: #e3fcef;
--admin-drawer-hover-bg: #00293d;
--admin-drawer-active-bg: rgba(0, 237, 100, 0.13);
--admin-drawer-active-bar: 3px solid #00ed64;
--admin-drawer-active-accent: #00ed64;
--admin-drawer-focus-ring: rgba(0, 237, 100, 0.32);
--admin-drawer-summary-open-bg: rgba(0, 237, 100, 0.05);
--admin-drawer-summary-open-border: #0a3a48;
--admin-drawer-sublink-active-bg: rgba(0, 237, 100, 0.10);
--admin-drawer-sublink-active-bar: 3px solid #00ed64;
--admin-drawer-top-bg: #001218;
--admin-drawer-top-border: #0a3a48;
--admin-drawer-top-text: #c3d3d0;
--admin-drawer-avatar-bg: #00ed64;
--admin-border: #0a3a48;
--admin-border-light: #032838;
--admin-border-strong: #135868;
--admin-border-focus: #00ed64;
--admin-outline: rgba(0, 237, 100, 0.10);
--admin-outline-variant: rgba(0, 237, 100, 0.05);
--admin-text: #e3fcef;
--admin-text-secondary: #a3c0b8;
--admin-text-muted: #6e8a85;
--admin-text-disabled: #2a4a52;
--admin-text-tertiary: #b8d0ca;
--admin-text-inverse: #001e2b;
--admin-primary: #00ed64;
--admin-primary-rgb: 0, 237, 100;
--admin-primary-hover: #00c853;
--admin-primary-light: rgba(0, 237, 100, 0.15);
--admin-primary-border: rgba(0, 237, 100, 0.35);
--admin-primary-text: #00ed64;
--admin-on-primary: #001e2b;
--admin-state-hover: rgba(0, 237, 100, 0.05);
--admin-state-focus: rgba(0, 237, 100, 0.10);
--admin-state-pressed: rgba(0, 237, 100, 0.14);
--admin-state-drag: rgba(0, 237, 100, 0.16);
--admin-focus-ring: 0 0 0 3px rgba(0, 237, 100, 0.30);
--admin-focus-ring-border: 1px solid #00ed64;
--admin-error-focus-ring: 0 0 0 3px rgba(255, 105, 105, 0.22);
--admin-elevation-1: 0 1px 3px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,237,100,0.04);
--admin-elevation-2: 0 4px 16px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,237,100,0.04);
--admin-elevation-3: 0 8px 30px rgba(0,0,0,0.65);
--admin-shadow: var(--admin-elevation-1);
--admin-shadow-card: var(--admin-elevation-2);
--admin-modal-box-bg: #00293d;
--admin-modal-btn-bg: #023a51;
--admin-modal-btn-color: #a3c0b8;
--admin-modal-btn-hover-bg: #034a68;
--admin-white: #00293d;
--admin-theme-mode: dark;
--admin-grey-50: #023a51;
--admin-grey-100: #034a68;
--admin-grey-200: #135868;
--admin-grey-300: #2a6878;
--admin-grey-400: #4a8088;
--admin-grey-500: #6a8a85;
--admin-grey-600: #a3c0b8;
--admin-grey-700: #b8d0ca;
--admin-grey-800: #d3e6e0;
--admin-grey-900: #e3fcef;
--admin-error: #ff6969;
--admin-error-bg: rgba(255, 105, 105, 0.13);
--admin-error-text: #ff8888;
--admin-error-border: rgba(255, 105, 105, 0.32);
--admin-success: #00ed64;
--admin-success-bg: rgba(0, 237, 100, 0.13);
--admin-success-text: #00ed64;
--admin-success-border: rgba(0, 237, 100, 0.32);
--admin-warn: #ffc94a;
--admin-warn-bg: rgba(255, 201, 74, 0.13);
--admin-warn-text: #ffd877;
--admin-warn-border: rgba(255, 201, 74, 0.32);
--admin-info: #5fc7ff;
--admin-info-bg: rgba(95, 199, 255, 0.13);
--admin-info-text: #8fd9ff;
--admin-header-notifications-pill-bg: rgba(0, 237, 100, 0.30);
--admin-header-notifications-pill-fg: #002a0f;
--admin-header-notifications-pill-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
[data-theme=light-notion] {
--admin-body-bg: #F7F7F7;
--admin-main-bg: #ffffff;
--admin-card-bg: #ffffff;
--admin-bg-soft: #F3F3F3;
--admin-header-bg: linear-gradient(135deg, #1F1F1F 0%, #000000 100%);
--admin-drawer-bg: #F5F5F5;
--admin-drawer-border: #E5E5E5;
--admin-drawer-text: #666666;
--admin-drawer-text-active: #111111;
--admin-drawer-hover-bg: #EBEBEB;
--admin-drawer-active-bg: rgba(0, 0, 0, 0.08);
--admin-drawer-active-bar: 3px solid #111111;
--admin-drawer-active-accent: #111111;
--admin-drawer-focus-ring: rgba(0, 0, 0, 0.22);
--admin-drawer-summary-open-bg: #EEEEEE;
--admin-drawer-summary-open-border: #E5E5E5;
--admin-drawer-sublink-active-bg: rgba(0, 0, 0, 0.06);
--admin-drawer-sublink-active-bar: 3px solid #111111;
--admin-drawer-top-bg: #F5F5F5;
--admin-drawer-top-border: #E5E5E5;
--admin-drawer-top-text: #111111;
--admin-drawer-avatar-bg: #111111;
--admin-border: #E5E5E5;
--admin-border-light: #F2F2F2;
--admin-border-strong: #BDBDBD;
--admin-border-focus: #111111;
--admin-outline: rgba(0, 0, 0, 0.08);
--admin-outline-variant: rgba(0, 0, 0, 0.04);
--admin-text: #111111;
--admin-text-secondary: #666666;
--admin-text-muted: #999999;
--admin-text-disabled: #C9C9C9;
--admin-text-tertiary: #444444;
--admin-text-inverse: #ffffff;
--admin-primary: #111111;
--admin-primary-rgb: 17, 17, 17;
--admin-primary-hover: #000000;
--admin-primary-light: rgba(0, 0, 0, 0.06);
--admin-primary-border: #BDBDBD;
--admin-primary-text: #111111;
--admin-on-primary: #ffffff;
--admin-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.16);
--admin-focus-ring-border: 1px solid #111111;
--admin-state-hover: rgba(0, 0, 0, 0.04);
--admin-state-focus: rgba(0, 0, 0, 0.07);
--admin-state-pressed: rgba(0, 0, 0, 0.10);
--admin-state-drag: rgba(0, 0, 0, 0.12);
--admin-modal-box-bg: #ffffff;
--admin-theme-mode: light;
--admin-grey-50: #FAFAFA;
--admin-grey-100: #F5F5F5;
--admin-grey-200: #E5E5E5;
--admin-grey-300: #D4D4D4;
--admin-grey-400: #A3A3A3;
--admin-grey-500: #737373;
--admin-grey-600: #525252;
--admin-grey-700: #404040;
--admin-grey-800: #262626;
--admin-grey-900: #111111;
--admin-accent-violet: #525252;
--admin-accent-violet-bg: #F5F5F5;
--admin-accent-violet-text: #404040;
--admin-accent-purple: #525252;
--admin-accent-purple-bg: #F5F5F5;
--admin-accent-purple-text: #404040;
--admin-accent-fuchsia: #525252;
--admin-accent-fuchsia-bg: #F5F5F5;
--admin-accent-fuchsia-text: #404040;
--admin-accent-pink: #525252;
--admin-accent-pink-bg: #F5F5F5;
--admin-accent-pink-text: #404040;
--admin-accent-rose: #525252;
--admin-accent-rose-bg: #F5F5F5;
--admin-accent-rose-text: #404040;
--admin-accent-coral: #525252;
--admin-accent-coral-bg: #F5F5F5;
--admin-accent-coral-text: #404040;
--admin-accent-cyan: #525252;
--admin-accent-cyan-bg: #F5F5F5;
--admin-accent-cyan-text: #404040;
--admin-accent-teal: #525252;
--admin-accent-teal-bg: #F5F5F5;
--admin-accent-teal-text: #404040;
--admin-premium: #D4D4D4;
--admin-premium-rgb: 212, 212, 212;
--admin-premium-bg: #F5F5F5;
--admin-premium-text: #404040;
--admin-premium-hover: #C4C4C4;
--admin-premium-active: #A3A3A3;
--admin-error: #B83A3A;
--admin-error-rgb: 184, 58, 58;
--admin-error-bg: #F9EEEE;
--admin-error-text: #9F2F2F;
--admin-error-border: #E5B6B6;
--admin-error-hover: #A53131;
--admin-error-active: #8F2929;
--admin-success: #52705A;
--admin-success-rgb: 82, 112, 90;
--admin-success-bg: #EFF4F0;
--admin-success-text: #405D48;
--admin-success-border: #BFCEC2;
--admin-success-hover: #45634D;
--admin-success-active: #395440;
--admin-warn: #7A6A3A;
--admin-warn-rgb: 122, 106, 58;
--admin-warn-bg: #F4F2EA;
--admin-warn-text: #66582F;
--admin-warn-border: #D6CEB5;
--admin-warn-hover: #695B32;
--admin-warn-active: #574B29;
--admin-info: #52697A;
--admin-info-rgb: 82, 105, 122;
--admin-info-bg: #EFF2F4;
--admin-info-text: #405666;
--admin-info-border: #C3CDD4;
}
[data-theme=dark-notion] {
--admin-body-bg: #0A0A0A;
--admin-main-bg: #111111;
--admin-card-bg: #1A1A1A;
--admin-bg-soft: #202020;
--admin-header-bg: linear-gradient(135deg, #0A0A0A 0%, #000000 100%);
--admin-drawer-bg: #0F0F0F;
--admin-drawer-border: #2A2A2A;
--admin-drawer-text: #A3A3A3;
--admin-drawer-text-active: #FFFFFF;
--admin-drawer-hover-bg: #242424;
--admin-drawer-active-bg: rgba(255, 255, 255, 0.10);
--admin-drawer-active-bar: 3px solid #FFFFFF;
--admin-drawer-active-accent: #FFFFFF;
--admin-drawer-focus-ring: rgba(255, 255, 255, 0.24);
--admin-drawer-summary-open-bg: rgba(255, 255, 255, 0.05);
--admin-drawer-summary-open-border: #2A2A2A;
--admin-drawer-sublink-active-bg: rgba(255, 255, 255, 0.08);
--admin-drawer-sublink-active-bar: 3px solid #FFFFFF;
--admin-drawer-top-bg: #0A0A0A;
--admin-drawer-top-border: #2A2A2A;
--admin-drawer-top-text: #F5F5F5;
--admin-drawer-avatar-bg: #404040;
--admin-border: #2A2A2A;
--admin-border-light: #202020;
--admin-border-strong: #404040;
--admin-border-focus: #FFFFFF;
--admin-outline: rgba(255, 255, 255, 0.08);
--admin-outline-variant: rgba(255, 255, 255, 0.04);
--admin-text: #F5F5F5;
--admin-text-secondary: #A3A3A3;
--admin-text-muted: #737373;
--admin-text-disabled: #404040;
--admin-text-tertiary: #D4D4D4;
--admin-text-inverse: #0A0A0A;
--admin-primary: #FFFFFF;
--admin-primary-rgb: 255, 255, 255;
--admin-primary-hover: #E5E5E5;
--admin-primary-light: rgba(255, 255, 255, 0.08);
--admin-primary-border: rgba(255, 255, 255, 0.22);
--admin-primary-text: #FFFFFF;
--admin-on-primary: #0A0A0A;
--admin-state-hover: rgba(255, 255, 255, 0.04);
--admin-state-focus: rgba(255, 255, 255, 0.08);
--admin-state-pressed: rgba(255, 255, 255, 0.12);
--admin-state-drag: rgba(255, 255, 255, 0.15);
--admin-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.18);
--admin-focus-ring-border: 1px solid #FFFFFF;
--admin-error-focus-ring: 0 0 0 3px rgba(239, 68, 68, 0.22);
--admin-elevation-1: 0 1px 3px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
--admin-elevation-2: 0 4px 16px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.05);
--admin-elevation-3: 0 8px 30px rgba(0,0,0,0.75);
--admin-shadow: var(--admin-elevation-1);
--admin-shadow-card: var(--admin-elevation-2);
--admin-modal-box-bg: #1A1A1A;
--admin-modal-btn-bg: #262626;
--admin-modal-btn-color: #A3A3A3;
--admin-modal-btn-hover-bg: #333333;
--admin-white: #1A1A1A;
--admin-theme-mode: dark;
--admin-grey-50: #171717;
--admin-grey-100: #202020;
--admin-grey-200: #2A2A2A;
--admin-grey-300: #404040;
--admin-grey-400: #525252;
--admin-grey-500: #737373;
--admin-grey-600: #A3A3A3;
--admin-grey-700: #C4C4C4;
--admin-grey-800: #E5E5E5;
--admin-grey-900: #FFFFFF;
--admin-accent-violet: #C4C4C4;
--admin-accent-violet-bg: #202020;
--admin-accent-violet-text: #E5E5E5;
--admin-accent-purple: #C4C4C4;
--admin-accent-purple-bg: #202020;
--admin-accent-purple-text: #E5E5E5;
--admin-accent-fuchsia: #C4C4C4;
--admin-accent-fuchsia-bg: #202020;
--admin-accent-fuchsia-text: #E5E5E5;
--admin-accent-pink: #C4C4C4;
--admin-accent-pink-bg: #202020;
--admin-accent-pink-text: #E5E5E5;
--admin-accent-rose: #C4C4C4;
--admin-accent-rose-bg: #202020;
--admin-accent-rose-text: #E5E5E5;
--admin-accent-coral: #C4C4C4;
--admin-accent-coral-bg: #202020;
--admin-accent-coral-text: #E5E5E5;
--admin-accent-cyan: #C4C4C4;
--admin-accent-cyan-bg: #202020;
--admin-accent-cyan-text: #E5E5E5;
--admin-accent-teal: #C4C4C4;
--admin-accent-teal-bg: #202020;
--admin-accent-teal-text: #E5E5E5;
--admin-premium: #525252;
--admin-premium-rgb: 82, 82, 82;
--admin-premium-bg: #202020;
--admin-premium-text: #E5E5E5;
--admin-premium-hover: #666666;
--admin-premium-active: #737373;
--admin-error: #A94343;
--admin-error-rgb: 169, 67, 67;
--admin-error-bg: rgba(201, 95, 95, 0.13);
--admin-error-text: #E08A8A;
--admin-error-border: rgba(201, 95, 95, 0.32);
--admin-error-hover: #B65050;
--admin-error-active: #913838;
--admin-success: #78937F;
--admin-success-rgb: 120, 147, 127;
--admin-success-bg: rgba(120, 147, 127, 0.13);
--admin-success-text: #9CB3A2;
--admin-success-border: rgba(120, 147, 127, 0.30);
--admin-success-hover: #879F8D;
--admin-success-active: #688570;
--admin-on-success: #0A0A0A;
--admin-warn: #A39467;
--admin-warn-rgb: 163, 148, 103;
--admin-warn-bg: rgba(163, 148, 103, 0.13);
--admin-warn-text: #C2B589;
--admin-warn-border: rgba(163, 148, 103, 0.30);
--admin-warn-hover: #B0A174;
--admin-warn-active: #8F8158;
--admin-on-warn: #0A0A0A;
--admin-info: #7891A5;
--admin-info-rgb: 120, 145, 165;
--admin-info-bg: rgba(120, 145, 165, 0.13);
--admin-info-text: #9BAFC0;
--admin-info-border: rgba(120, 145, 165, 0.30);
--admin-header-notifications-pill-bg: rgba(255, 255, 255, 0.88);
--admin-header-notifications-pill-fg: #1a1a2e;
--admin-header-notifications-pill-border: rgba(255,255,255,0.55);
--admin-header-notifications-pill-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
[data-theme=light-figma] {
--admin-body-bg: #F0F0F0;
--admin-main-bg: #ffffff;
--admin-card-bg: #ffffff;
--admin-bg-soft: #EBEBEB;
--admin-header-bg: linear-gradient(135deg, #2c2c2c 0%, #1e1e1e 100%);
--admin-drawer-bg: #E8E8E8;
--admin-drawer-border: #D0D0D0;
--admin-drawer-text: #666666;
--admin-drawer-text-active: #5a3fff;
--admin-drawer-hover-bg: #D4D4D4;
--admin-drawer-active-bg: rgba(123, 97, 255, 0.13);
--admin-drawer-active-bar: 3px solid #5a3fff;
--admin-drawer-active-accent: #5a3fff;
--admin-drawer-focus-ring: rgba(123, 97, 255, 0.28);
--admin-drawer-summary-open-bg: #D8D8D8;
--admin-drawer-summary-open-border: #D0D0D0;
--admin-drawer-sublink-active-bg: rgba(123, 97, 255, 0.10);
--admin-drawer-sublink-active-bar: 3px solid #5a3fff;
--admin-drawer-top-bg: #E0E0E0;
--admin-drawer-top-border: #D0D0D0;
--admin-drawer-top-text: #1e1e1e;
--admin-drawer-avatar-bg: #7B61FF;
--admin-border: #D0D0D0;
--admin-border-light: #E8E8E8;
--admin-border-strong: #AAAAAA;
--admin-border-focus: #7B61FF;
--admin-outline: rgba(0, 0, 0, 0.08);
--admin-outline-variant: rgba(0, 0, 0, 0.04);
--admin-text: #333333;
--admin-text-secondary: #666666;
--admin-text-muted: #999999;
--admin-text-disabled: #CCCCCC;
--admin-text-tertiary: #444444;
--admin-text-inverse: #ffffff;
--admin-primary: #7B61FF;
--admin-primary-rgb: 123, 97, 255;
--admin-primary-hover: #5a3fff;
--admin-primary-light: rgba(123, 97, 255, 0.10);
--admin-primary-border: #C4BAFF;
--admin-primary-text: #5a3fff;
--admin-on-primary: #ffffff;
--admin-focus-ring: 0 0 0 3px rgba(123, 97, 255, 0.22);
--admin-focus-ring-border: 1px solid #7B61FF;
--admin-state-hover: rgba(0, 0, 0, 0.04);
--admin-state-focus: rgba(123, 97, 255, 0.08);
--admin-state-pressed: rgba(123, 97, 255, 0.10);
--admin-state-drag: rgba(123, 97, 255, 0.12);
--admin-modal-box-bg: #ffffff;
--admin-theme-mode: light;
--admin-grey-50: #F5F5F5;
--admin-grey-100: #E8E8E8;
--admin-grey-200: #D0D0D0;
--admin-grey-300: #AAAAAA;
--admin-grey-400: #999999;
--admin-grey-500: #777777;
--admin-grey-600: #555555;
--admin-grey-700: #333333;
--admin-grey-800: #222222;
--admin-grey-900: #111111;
}
[data-theme=dark-figma] {
--admin-body-bg: #1E1E1E;
--admin-main-bg: #252525;
--admin-card-bg: #2C2C2C;
--admin-bg-soft: #232333;
--admin-header-bg: linear-gradient(135deg, #1E1E1E 0%, #7B61FF 100%);
--admin-drawer-bg: #1A1A1A;
--admin-drawer-border: #333340;
--admin-drawer-text: #9898B0;
--admin-drawer-text-active: #BDB0FF;
--admin-drawer-hover-bg: #2E2E42;
--admin-drawer-active-bg: rgba(157, 140, 255, 0.18);
--admin-drawer-active-bar: 3px solid #BDB0FF;
--admin-drawer-active-accent: #BDB0FF;
--admin-drawer-focus-ring: rgba(157, 140, 255, 0.35);
--admin-drawer-summary-open-bg: rgba(157, 140, 255, 0.08);
--admin-drawer-summary-open-border: #333340;
--admin-drawer-sublink-active-bg: rgba(157, 140, 255, 0.13);
--admin-drawer-sublink-active-bar: 3px solid #BDB0FF;
--admin-drawer-top-bg: #151515;
--admin-drawer-top-border: #333340;
--admin-drawer-top-text: #D0CFFF;
--admin-drawer-avatar-bg: #9D8CFF;
--admin-border: #333340;
--admin-border-light: #2A2A38;
--admin-border-strong: #4D4D62;
--admin-border-focus: #9D8CFF;
--admin-outline: rgba(157, 140, 255, 0.08);
--admin-outline-variant: rgba(157, 140, 255, 0.04);
--admin-text: #E8E8FF;
--admin-text-secondary: #9898B0;
--admin-text-muted: #6868A0;
--admin-text-disabled: #3A3A55;
--admin-text-tertiary: #C0C0E0;
--admin-text-inverse: #1E1E1E;
--admin-primary: #9D8CFF;
--admin-primary-rgb: 157, 140, 255;
--admin-primary-hover: #BDB0FF;
--admin-primary-light: rgba(157, 140, 255, 0.15);
--admin-primary-border: rgba(157, 140, 255, 0.35);
--admin-primary-text: #BDB0FF;
--admin-on-primary: #1E1E1E;
--admin-state-hover: rgba(157, 140, 255, 0.06);
--admin-state-focus: rgba(157, 140, 255, 0.10);
--admin-state-pressed: rgba(157, 140, 255, 0.14);
--admin-state-drag: rgba(157, 140, 255, 0.18);
--admin-focus-ring: 0 0 0 3px rgba(157, 140, 255, 0.28);
--admin-focus-ring-border: 1px solid #9D8CFF;
--admin-error-focus-ring: 0 0 0 3px rgba(239, 68, 68, 0.22);
--admin-elevation-1: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(157,140,255,0.05);
--admin-elevation-2: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(157,140,255,0.06);
--admin-elevation-3: 0 8px 30px rgba(0,0,0,0.65);
--admin-shadow: var(--admin-elevation-1);
--admin-shadow-card: var(--admin-elevation-2);
--admin-modal-box-bg: #252525;
--admin-modal-btn-bg: #2C2C2C;
--admin-modal-btn-color: #9898B0;
--admin-modal-btn-hover-bg: #363648;
--admin-white: #252525;
--admin-theme-mode: dark;
--admin-grey-50: #242434;
--admin-grey-100: #2C2C3C;
--admin-grey-200: #3A3A50;
--admin-grey-300: #4D4D62;
--admin-grey-400: #6868A0;
--admin-grey-500: #8888C0;
--admin-grey-600: #9898B0;
--admin-grey-700: #C0C0E0;
--admin-grey-800: #D8D8F8;
--admin-grey-900: #E8E8FF;
--admin-error: #ff7777;
--admin-error-bg: rgba(220, 38, 38, 0.15);
--admin-error-text: #fca5a5;
--admin-error-border: rgba(220, 38, 38, 0.35);
--admin-success: #77eeaa;
--admin-success-bg: rgba(34, 197, 94, 0.13);
--admin-success-text: #86efac;
--admin-success-border: rgba(34, 197, 94, 0.30);
--admin-warn: #ffee66;
--admin-warn-bg: rgba(234, 179, 8, 0.13);
--admin-warn-text: #fde047;
--admin-warn-border: rgba(234, 179, 8, 0.30);
--admin-info: #99bbff;
--admin-info-bg: rgba(59, 130, 246, 0.13);
--admin-info-text: #93c5fd;
--admin-header-notifications-pill-bg: rgba(157, 140, 255, 0.22);
--admin-header-notifications-pill-fg: #1a1830;
--admin-header-notifications-pill-border: rgba(157, 140, 255, 0.40);
--admin-header-notifications-pill-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
[data-theme=light-claude] {
--admin-body-bg: #F0EDE8;
--admin-main-bg: #FAF9F7;
--admin-card-bg: #ffffff;
--admin-bg-soft: #EBE7E1;
--admin-header-bg: linear-gradient(135deg, #CC785C 0%, #b85f40 100%);
--admin-drawer-bg: #EBE7E1;
--admin-drawer-border: #DDD9D2;
--admin-drawer-text: #8C7F72;
--admin-drawer-text-active: #b85f40;
--admin-drawer-hover-bg: #D8D2C8;
--admin-drawer-active-bg: rgba(204, 120, 92, 0.14);
--admin-drawer-active-bar: 3px solid #b85f40;
--admin-drawer-active-accent: #b85f40;
--admin-drawer-focus-ring: rgba(204, 120, 92, 0.28);
--admin-drawer-summary-open-bg: #DEDAD2;
--admin-drawer-summary-open-border: #DDD9D2;
--admin-drawer-sublink-active-bg: rgba(204, 120, 92, 0.10);
--admin-drawer-sublink-active-bar: 3px solid #b85f40;
--admin-drawer-top-bg: #EBE7E1;
--admin-drawer-top-border: #DDD9D2;
--admin-drawer-top-text: #3D3027;
--admin-drawer-avatar-bg: #CC785C;
--admin-border: #DDD9D2;
--admin-border-light: #EBE7E1;
--admin-border-strong: #C0B8AD;
--admin-border-focus: #CC785C;
--admin-outline: rgba(204, 120, 92, 0.08);
--admin-outline-variant: rgba(204, 120, 92, 0.04);
--admin-text: #2C2016;
--admin-text-secondary: #8C7F72;
--admin-text-muted: #B8AFA6;
--admin-text-disabled: #DDD9D2;
--admin-text-tertiary: #5C5046;
--admin-text-inverse: #ffffff;
--admin-primary: #CC785C;
--admin-primary-rgb: 204, 120, 92;
--admin-primary-hover: #b85f40;
--admin-primary-light: rgba(204, 120, 92, 0.10);
--admin-primary-border: #E0C4B8;
--admin-primary-text: #b85f40;
--admin-on-primary: #ffffff;
--admin-focus-ring: 0 0 0 3px rgba(204, 120, 92, 0.22);
--admin-focus-ring-border: 1px solid #CC785C;
--admin-state-hover: rgba(204, 120, 92, 0.04);
--admin-state-focus: rgba(204, 120, 92, 0.08);
--admin-state-pressed: rgba(204, 120, 92, 0.10);
--admin-state-drag: rgba(204, 120, 92, 0.12);
--admin-modal-box-bg: #ffffff;
--admin-theme-mode: light;
--admin-grey-50: #F5F2EE;
--admin-grey-100: #EBE7E1;
--admin-grey-200: #DDD9D2;
--admin-grey-300: #C0B8AD;
--admin-grey-400: #B8AFA6;
--admin-grey-500: #8C7F72;
--admin-grey-600: #5C5046;
--admin-grey-700: #3D3027;
--admin-grey-800: #2C2016;
--admin-grey-900: #1A1008;
}
[data-theme=dark-claude] {
--admin-body-bg: #1A1815;
--admin-main-bg: #22201C;
--admin-card-bg: #2A2622;
--admin-bg-soft: #1F1D19;
--admin-header-bg: linear-gradient(135deg, #1A1815 0%, #CC785C 100%);
--admin-drawer-bg: #161412;
--admin-drawer-border: #352E28;
--admin-drawer-text: #9A8C80;
--admin-drawer-text-active: #F0AE8A;
--admin-drawer-hover-bg: #302A24;
--admin-drawer-active-bg: rgba(232, 149, 109, 0.18);
--admin-drawer-active-bar: 3px solid #F0AE8A;
--admin-drawer-active-accent: #F0AE8A;
--admin-drawer-focus-ring: rgba(232, 149, 109, 0.35);
--admin-drawer-summary-open-bg: rgba(232, 149, 109, 0.08);
--admin-drawer-summary-open-border: #352E28;
--admin-drawer-sublink-active-bg: rgba(232, 149, 109, 0.13);
--admin-drawer-sublink-active-bar: 3px solid #F0AE8A;
--admin-drawer-top-bg: #120F0C;
--admin-drawer-top-border: #352E28;
--admin-drawer-top-text: #E8D8CC;
--admin-drawer-avatar-bg: #E8956D;
--admin-border: #352E28;
--admin-border-light: #2A2420;
--admin-border-strong: #4A4038;
--admin-border-focus: #E8956D;
--admin-outline: rgba(232, 149, 109, 0.10);
--admin-outline-variant: rgba(232, 149, 109, 0.05);
--admin-text: #F0E8E0;
--admin-text-secondary: #9A8C80;
--admin-text-muted: #6A5E55;
--admin-text-disabled: #3A3028;
--admin-text-tertiary: #D0C0B0;
--admin-text-inverse: #1A1815;
--admin-primary: #E8956D;
--admin-primary-rgb: 232, 149, 109;
--admin-primary-hover: #F0AE8A;
--admin-primary-light: rgba(232, 149, 109, 0.15);
--admin-primary-border: rgba(232, 149, 109, 0.38);
--admin-primary-text: #F0AE8A;
--admin-on-primary: #1A0A00;
--admin-state-hover: rgba(232, 149, 109, 0.06);
--admin-state-focus: rgba(232, 149, 109, 0.10);
--admin-state-pressed: rgba(232, 149, 109, 0.14);
--admin-state-drag: rgba(232, 149, 109, 0.18);
--admin-focus-ring: 0 0 0 3px rgba(232, 149, 109, 0.30);
--admin-focus-ring-border: 1px solid #E8956D;
--admin-error-focus-ring: 0 0 0 3px rgba(239, 68, 68, 0.22);
--admin-elevation-1: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(232,149,109,0.05);
--admin-elevation-2: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,149,109,0.06);
--admin-elevation-3: 0 8px 30px rgba(0,0,0,0.7);
--admin-shadow: var(--admin-elevation-1);
--admin-shadow-card: var(--admin-elevation-2);
--admin-modal-box-bg: #2A2622;
--admin-modal-btn-bg: #322C26;
--admin-modal-btn-color: #9A8C80;
--admin-modal-btn-hover-bg: #3C3630;
--admin-white: #2A2622;
--admin-theme-mode: dark;
--admin-grey-50: #26221E;
--admin-grey-100: #2A2622;
--admin-grey-200: #352E28;
--admin-grey-300: #4A4038;
--admin-grey-400: #6A5E55;
--admin-grey-500: #8A7C70;
--admin-grey-600: #9A8C80;
--admin-grey-700: #C8B8A8;
--admin-grey-800: #E0D0C0;
--admin-grey-900: #F0E8E0;
--admin-error: #ff9999;
--admin-error-bg: rgba(220, 38, 38, 0.15);
--admin-error-text: #fca5a5;
--admin-error-border: rgba(220, 38, 38, 0.35);
--admin-success: #88ddaa;
--admin-success-bg: rgba(34, 197, 94, 0.13);
--admin-success-text: #86efac;
--admin-success-border: rgba(34, 197, 94, 0.30);
--admin-warn: #ffdd88;
--admin-warn-bg: rgba(234, 179, 8, 0.13);
--admin-warn-text: #fde047;
--admin-warn-border: rgba(234, 179, 8, 0.30);
--admin-info: #88aaee;
--admin-info-bg: rgba(59, 130, 246, 0.13);
--admin-info-text: #93c5fd;
--admin-header-notifications-pill-bg: rgba(232, 149, 109, 0.30);
--admin-header-notifications-pill-fg: #3a1a08;
--admin-header-notifications-pill-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
[data-theme=light-apple] {
--admin-body-bg: #F5F5F7;
--admin-main-bg: #ffffff;
--admin-card-bg: #ffffff;
--admin-header-bg: linear-gradient(135deg, #1d1d1f 0%, #3d3d3f 100%);
--admin-drawer-bg: #F0F0F2;
--admin-drawer-border: #E0E0E5;
--admin-drawer-text: #86868B;
--admin-drawer-text-active: #007AFF;
--admin-drawer-hover-bg: #E8E8ED;
--admin-drawer-active-bg: rgba(0, 122, 255, 0.08);
--admin-drawer-active-bar: 3px solid #007AFF;
--admin-drawer-active-accent: #0066DD;
--admin-drawer-focus-ring: rgba(0, 122, 255, 0.22);
--admin-drawer-summary-open-bg: #E8E8ED;
--admin-drawer-summary-open-border: #E0E0E5;
--admin-drawer-sublink-active-bg: rgba(0, 122, 255, 0.06);
--admin-drawer-sublink-active-bar: 3px solid #007AFF;
--admin-drawer-top-bg: #F0F0F2;
--admin-drawer-top-border: #E0E0E5;
--admin-drawer-top-text: #1d1d1f;
--admin-drawer-avatar-bg: #007AFF;
--admin-border: #E0E0E5;
--admin-border-light: #EBEBF0;
--admin-border-strong: #BCBCC8;
--admin-border-focus: #007AFF;
--admin-outline: rgba(0, 0, 0, 0.08);
--admin-outline-variant: rgba(0, 0, 0, 0.04);
--admin-text: #1d1d1f;
--admin-text-secondary: #6e6e73;
--admin-text-muted: #AEAEB2;
--admin-text-disabled: #D1D1D6;
--admin-text-tertiary: #3d3d3f;
--admin-text-inverse: #ffffff;
--admin-primary: #007AFF;
--admin-primary-rgb: 0, 122, 255;
--admin-primary-hover: #0066DD;
--admin-primary-light: rgba(0, 122, 255, 0.08);
--admin-primary-border: #B8D4FF;
--admin-primary-text: #0066DD;
--admin-on-primary: #ffffff;
--admin-focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.20);
--admin-focus-ring-border: 1px solid #007AFF;
--admin-state-hover: rgba(0, 0, 0, 0.04);
--admin-state-focus: rgba(0, 122, 255, 0.07);
--admin-state-pressed: rgba(0, 122, 255, 0.10);
--admin-state-drag: rgba(0, 122, 255, 0.12);
--admin-modal-box-bg: #ffffff;
--admin-theme-mode: light;
--admin-grey-50: #F5F5F7;
--admin-grey-100: #F0F0F2;
--admin-grey-200: #E0E0E5;
--admin-grey-300: #D1D1D6;
--admin-grey-400: #AEAEB2;
--admin-grey-500: #8E8E93;
--admin-grey-600: #6e6e73;
--admin-grey-700: #48484A;
--admin-grey-800: #3A3A3C;
--admin-grey-900: #1d1d1f;
}
[data-theme=dark-apple] {
--admin-body-bg: #000000;
--admin-main-bg: #111111;
--admin-card-bg: #1C1C1E;
--admin-header-bg: linear-gradient(135deg, #1C1C1E 0%, #2C2C2E 100%);
--admin-drawer-bg: #111111;
--admin-drawer-border: #3A3A3C;
--admin-drawer-text: #8E8E93;
--admin-drawer-text-active: #0A84FF;
--admin-drawer-hover-bg: #1C1C1E;
--admin-drawer-active-bg: rgba(10, 132, 255, 0.15);
--admin-drawer-active-bar: 3px solid #0A84FF;
--admin-drawer-active-accent: #409CFF;
--admin-drawer-focus-ring: rgba(10, 132, 255, 0.30);
--admin-drawer-summary-open-bg: rgba(255, 255, 255, 0.04);
--admin-drawer-summary-open-border: #3A3A3C;
--admin-drawer-sublink-active-bg: rgba(10, 132, 255, 0.12);
--admin-drawer-sublink-active-bar: 3px solid #409CFF;
--admin-drawer-top-bg: #0A0A0A;
--admin-drawer-top-border: #3A3A3C;
--admin-drawer-top-text: #E5E5EA;
--admin-drawer-avatar-bg: #0A84FF;
--admin-border: #3A3A3C;
--admin-border-light: #2C2C2E;
--admin-border-strong: #545456;
--admin-border-focus: #0A84FF;
--admin-outline: rgba(255, 255, 255, 0.06);
--admin-outline-variant: rgba(255, 255, 255, 0.03);
--admin-text: #F5F5F7;
--admin-text-secondary: #AEAEB2;
--admin-text-muted: #636366;
--admin-text-disabled: #3A3A3C;
--admin-text-tertiary: #C7C7CC;
--admin-text-inverse: #1d1d1f;
--admin-primary: #0A84FF;
--admin-primary-rgb: 10, 132, 255;
--admin-primary-hover: #409CFF;
--admin-primary-light: rgba(10, 132, 255, 0.15);
--admin-primary-border: rgba(10, 132, 255, 0.35);
--admin-primary-text: #409CFF;
--admin-on-primary: #ffffff;
--admin-state-hover: rgba(255, 255, 255, 0.05);
--admin-state-focus: rgba(10, 132, 255, 0.08);
--admin-state-pressed: rgba(10, 132, 255, 0.12);
--admin-state-drag: rgba(10, 132, 255, 0.15);
--admin-focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.28);
--admin-focus-ring-border: 1px solid #0A84FF;
--admin-error-focus-ring: 0 0 0 3px rgba(255, 69, 58, 0.25);
--admin-elevation-1: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
--admin-elevation-2: 0 4px 16px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
--admin-elevation-3: 0 8px 30px rgba(0,0,0,0.75);
--admin-shadow: var(--admin-elevation-1);
--admin-shadow-card: var(--admin-elevation-2);
--admin-modal-box-bg: #1C1C1E;
--admin-modal-btn-bg: #2C2C2E;
--admin-modal-btn-color: #AEAEB2;
--admin-modal-btn-hover-bg: #3A3A3C;
--admin-white: #1C1C1E;
--admin-theme-mode: dark;
--admin-grey-50: #1C1C1E;
--admin-grey-100: #2C2C2E;
--admin-grey-200: #3A3A3C;
--admin-grey-300: #48484A;
--admin-grey-400: #636366;
--admin-grey-500: #8E8E93;
--admin-grey-600: #AEAEB2;
--admin-grey-700: #C7C7CC;
--admin-grey-800: #E5E5EA;
--admin-grey-900: #F5F5F7;
--admin-error: #FF453A;
--admin-error-bg: rgba(255, 69, 58, 0.15);
--admin-error-text: #FF6961;
--admin-error-border: rgba(255, 69, 58, 0.35);
--admin-success: #30D158;
--admin-success-bg: rgba(48, 209, 88, 0.13);
--admin-success-text: #34C759;
--admin-success-border: rgba(48, 209, 88, 0.30);
--admin-warn: #FFD60A;
--admin-warn-bg: rgba(255, 214, 10, 0.13);
--admin-warn-text: #FFD60A;
--admin-warn-border: rgba(255, 214, 10, 0.30);
--admin-info: #64D2FF;
--admin-info-bg: rgba(100, 210, 255, 0.13);
--admin-info-text: #64D2FF;
--admin-header-notifications-pill-bg: rgba(255, 255, 255, 0.88);
--admin-header-notifications-pill-fg: #1a1a2e;
--admin-header-notifications-pill-border: rgba(255,255,255,0.55);
--admin-header-notifications-pill-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
[data-theme=light-airtable] {
--admin-body-bg: #F0F5FF;
--admin-main-bg: #ffffff;
--admin-card-bg: #ffffff;
--admin-header-bg: linear-gradient(135deg, #2D7FF9 0%, #1a6ee0 100%);
--admin-drawer-bg: #E8F0FF;
--admin-drawer-border: #D0E0FF;
--admin-drawer-text: #6080C0;
--admin-drawer-text-active: #2D7FF9;
--admin-drawer-hover-bg: #DDE8FF;
--admin-drawer-active-bg: rgba(45, 127, 249, 0.10);
--admin-drawer-active-bar: 3px solid #2D7FF9;
--admin-drawer-active-accent: #1a6ee0;
--admin-drawer-focus-ring: rgba(45, 127, 249, 0.25);
--admin-drawer-summary-open-bg: #DDE8FF;
--admin-drawer-summary-open-border: #D0E0FF;
--admin-drawer-sublink-active-bg: rgba(45, 127, 249, 0.08);
--admin-drawer-sublink-active-bar: 3px solid #2D7FF9;
--admin-drawer-top-bg: #E8F0FF;
--admin-drawer-top-border: #D0E0FF;
--admin-drawer-top-text: #12266A;
--admin-drawer-avatar-bg: #2D7FF9;
--admin-border: #D0E0FF;
--admin-border-light: #E8F0FF;
--admin-border-strong: #A8C4F0;
--admin-border-focus: #2D7FF9;
--admin-outline: rgba(45, 127, 249, 0.10);
--admin-outline-variant: rgba(45, 127, 249, 0.05);
--admin-text: #12266A;
--admin-text-secondary: #6080C0;
--admin-text-muted: #90A8E0;
--admin-text-disabled: #C8D8FF;
--admin-text-tertiary: #2A4A9A;
--admin-text-inverse: #ffffff;
--admin-primary: #2D7FF9;
--admin-primary-rgb: 45, 127, 249;
--admin-primary-hover: #1a6ee0;
--admin-primary-light: rgba(45, 127, 249, 0.10);
--admin-primary-border: #A8C4F0;
--admin-primary-text: #1a6ee0;
--admin-on-primary: #ffffff;
--admin-focus-ring: 0 0 0 3px rgba(45, 127, 249, 0.22);
--admin-focus-ring-border: 1px solid #2D7FF9;
--admin-state-hover: rgba(45, 127, 249, 0.04);
--admin-state-focus: rgba(45, 127, 249, 0.08);
--admin-state-pressed: rgba(45, 127, 249, 0.10);
--admin-state-drag: rgba(45, 127, 249, 0.12);
--admin-modal-box-bg: #ffffff;
--admin-theme-mode: light;
--admin-grey-50: #F0F5FF;
--admin-grey-100: #E8F0FF;
--admin-grey-200: #D0E0FF;
--admin-grey-300: #A8C4F0;
--admin-grey-400: #90A8E0;
--admin-grey-500: #6080C0;
--admin-grey-600: #2A4A9A;
--admin-grey-700: #1C3478;
--admin-grey-800: #12266A;
--admin-grey-900: #0A1840;
}
[data-theme=dark-airtable] {
--admin-body-bg: #0B1419;
--admin-main-bg: #141E26;
--admin-card-bg: #1A2530;
--admin-header-bg: linear-gradient(135deg, #0B1419 0%, #2D7FF9 100%);
--admin-drawer-bg: #0D1820;
--admin-drawer-border: #1E3040;
--admin-drawer-text: #6080A0;
--admin-drawer-text-active: #4B9FFE;
--admin-drawer-hover-bg: #162030;
--admin-drawer-active-bg: rgba(75, 159, 254, 0.14);
--admin-drawer-active-bar: 3px solid #4B9FFE;
--admin-drawer-active-accent: #7AB8FF;
--admin-drawer-focus-ring: rgba(75, 159, 254, 0.32);
--admin-drawer-summary-open-bg: rgba(75, 159, 254, 0.06);
--admin-drawer-summary-open-border: #1E3040;
--admin-drawer-sublink-active-bg: rgba(75, 159, 254, 0.10);
--admin-drawer-sublink-active-bar: 3px solid #7AB8FF;
--admin-drawer-top-bg: #080E14;
--admin-drawer-top-border: #1E3040;
--admin-drawer-top-text: #C0D8F0;
--admin-drawer-avatar-bg: #4B9FFE;
--admin-border: #1E3040;
--admin-border-light: #162030;
--admin-border-strong: #2E4860;
--admin-border-focus: #4B9FFE;
--admin-outline: rgba(75, 159, 254, 0.10);
--admin-outline-variant: rgba(75, 159, 254, 0.05);
--admin-text: #D0E8FF;
--admin-text-secondary: #6080A0;
--admin-text-muted: #405870;
--admin-text-disabled: #1E3040;
--admin-text-tertiary: #90B8E0;
--admin-text-inverse: #0B1419;
--admin-primary: #4B9FFE;
--admin-primary-rgb: 75, 159, 254;
--admin-primary-hover: #7AB8FF;
--admin-primary-light: rgba(75, 159, 254, 0.15);
--admin-primary-border: rgba(75, 159, 254, 0.35);
--admin-primary-text: #7AB8FF;
--admin-on-primary: #0B1419;
--admin-state-hover: rgba(75, 159, 254, 0.06);
--admin-state-focus: rgba(75, 159, 254, 0.10);
--admin-state-pressed: rgba(75, 159, 254, 0.14);
--admin-state-drag: rgba(75, 159, 254, 0.18);
--admin-focus-ring: 0 0 0 3px rgba(75, 159, 254, 0.28);
--admin-focus-ring-border: 1px solid #4B9FFE;
--admin-error-focus-ring: 0 0 0 3px rgba(239, 68, 68, 0.22);
--admin-elevation-1: 0 1px 3px rgba(0,0,0,0.45), 0 0 0 1px rgba(75,159,254,0.05);
--admin-elevation-2: 0 4px 16px rgba(0,0,0,0.55), 0 0 0 1px rgba(75,159,254,0.06);
--admin-elevation-3: 0 8px 30px rgba(0,0,0,0.7);
--admin-shadow: var(--admin-elevation-1);
--admin-shadow-card: var(--admin-elevation-2);
--admin-modal-box-bg: #1A2530;
--admin-modal-btn-bg: #1E2E40;
--admin-modal-btn-color: #6080A0;
--admin-modal-btn-hover-bg: #263850;
--admin-white: #1A2530;
--admin-theme-mode: dark;
--admin-grey-50: #162030;
--admin-grey-100: #1E2E40;
--admin-grey-200: #263850;
--admin-grey-300: #2E4860;
--admin-grey-400: #405870;
--admin-grey-500: #6080A0;
--admin-grey-600: #90B8E0;
--admin-grey-700: #A8C8F0;
--admin-grey-800: #C0D8FF;
--admin-grey-900: #D0E8FF;
--admin-error: #ff8888;
--admin-error-bg: rgba(220, 38, 38, 0.15);
--admin-error-text: #fca5a5;
--admin-error-border: rgba(220, 38, 38, 0.35);
--admin-success: #88ddbb;
--admin-success-bg: rgba(34, 197, 94, 0.13);
--admin-success-text: #86efac;
--admin-success-border: rgba(34, 197, 94, 0.30);
--admin-warn: #ffdd66;
--admin-warn-bg: rgba(234, 179, 8, 0.13);
--admin-warn-text: #fde047;
--admin-warn-border: rgba(234, 179, 8, 0.30);
--admin-info: #88ccff;
--admin-info-bg: rgba(59, 130, 246, 0.13);
--admin-info-text: #93c5fd;
--admin-header-notifications-pill-bg: rgba(75, 159, 254, 0.30);
--admin-header-notifications-pill-fg: #07182e;
--admin-header-notifications-pill-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
[data-theme=light-gumroad] {
--admin-body-bg: #f4f4f0;
--admin-main-bg: #ffffff;
--admin-card-bg: #ffffff;
--admin-header-bg: #000000;
--admin-drawer-bg: #f0f0eb;
--admin-drawer-border: #e0e0da;
--admin-drawer-text: #777770;
--admin-drawer-text-active: #000000;
--admin-drawer-hover-bg: #eaeae4;
--admin-drawer-active-bg: rgba(0, 0, 0, 0.06);
--admin-drawer-active-bar: 3px solid #000000;
--admin-drawer-active-accent: #000000;
--admin-drawer-focus-ring: rgba(0, 0, 0, 0.22);
--admin-drawer-summary-open-bg: #eaeae4;
--admin-drawer-summary-open-border: #d8d8d2;
--admin-drawer-sublink-active-bg: rgba(0, 0, 0, 0.05);
--admin-drawer-sublink-active-bar: 3px solid #000000;
--admin-drawer-top-bg: #e8e8e3;
--admin-drawer-top-border: #d8d8d2;
--admin-drawer-top-text: #000000;
--admin-drawer-avatar-bg: #000000;
--admin-border: #000000;
--admin-border-light: #1c1c1a;
--admin-border-strong: #000000;
--admin-border-focus: #ff90e8;
--admin-outline: rgba(255, 144, 232, 0.10);
--admin-outline-variant: rgba(255, 144, 232, 0.05);
--admin-text: #000000;
--admin-text-secondary: #555555;
--admin-text-muted: #999999;
--admin-text-disabled: #cccccc;
--admin-text-tertiary: #333333;
--admin-text-inverse: #ffffff;
--admin-primary: #ff90e8;
--admin-primary-rgb: 255, 144, 232;
--admin-primary-hover: #f060d0;
--admin-primary-light: rgba(255, 144, 232, 0.12);
--admin-primary-border: rgba(255, 144, 232, 0.40);
--admin-primary-text: #d040b0;
--admin-on-primary: #000000;
--admin-elevation-1: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
--admin-elevation-2: 0 4px 12px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
--admin-elevation-3: 0 8px 24px rgba(0,0,0,0.14);
--admin-shadow: var(--admin-elevation-1);
--admin-shadow-card: var(--admin-elevation-2);
--admin-state-hover: rgba(0, 0, 0, 0.04);
--admin-state-focus: rgba(255, 144, 232, 0.10);
--admin-state-pressed: rgba(255, 144, 232, 0.14);
--admin-state-drag: rgba(255, 144, 232, 0.18);
--admin-focus-ring: 0 0 0 3px rgba(255, 144, 232, 0.35);
--admin-focus-ring-border: 1px solid #ff90e8;
--admin-error-focus-ring: 0 0 0 3px rgba(220, 52, 30, 0.22);
--admin-modal-box-bg: #ffffff;
--admin-modal-btn-bg: #f4f4f0;
--admin-modal-btn-color: #555555;
--admin-modal-btn-hover-bg: #e8e8e3;
--admin-white: #ffffff;
--admin-theme-mode: light;
--admin-grey-50: #f4f4f0;
--admin-grey-100: #ececE7;
--admin-grey-200: #e0e0da;
--admin-grey-300: #cccccc;
--admin-grey-400: #aaaaaa;
--admin-grey-500: #888888;
--admin-grey-600: #666666;
--admin-grey-700: #444444;
--admin-grey-800: #222222;
--admin-grey-900: #000000;
--admin-error: #dc341e;
--admin-error-bg: rgba(220, 52, 30, 0.10);
--admin-error-text: #b02010;
--admin-error-border: rgba(220, 52, 30, 0.30);
--admin-success: #23a094;
--admin-success-bg: rgba(35, 160, 148, 0.10);
--admin-success-text: #1a7870;
--admin-success-border: rgba(35, 160, 148, 0.30);
--admin-warn: #ffc900;
--admin-warn-bg: rgba(255, 201, 0, 0.12);
--admin-warn-text: #a07800;
--admin-warn-border: rgba(255, 201, 0, 0.35);
--admin-info: #90a8ed;
--admin-info-bg: rgba(144, 168, 237, 0.12);
--admin-info-text: #5060b0;
--admin-info-border: rgba(144, 168, 237, 0.35);
--admin-header-notifications-pill-bg: rgba(255, 144, 232, 0.18);
--admin-header-notifications-pill-fg: #000000;
--admin-header-notifications-pill-border: rgba(255, 144, 232, 0.45);
--admin-header-notifications-pill-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
[data-theme=dark-gumroad] {
--admin-body-bg: #0a0a08;
--admin-main-bg: #141412;
--admin-card-bg: #1c1c1a;
--admin-header-bg: #000000;
--admin-drawer-bg: #0e0e0c;
--admin-drawer-border: #3a3a38;
--admin-drawer-text: #888880;
--admin-drawer-text-active: #ffffff;
--admin-drawer-hover-bg: #222220;
--admin-drawer-active-bg: transparent;
--admin-drawer-active-bar: none;
--admin-drawer-active-accent: #0a0a08;
--admin-drawer-focus-ring: rgba(255, 144, 232, 0.30);
--admin-drawer-summary-open-bg: rgba(255, 255, 255, 0.04);
--admin-drawer-summary-open-border: #3a3a38;
--admin-drawer-sublink-active-bg: rgba(255, 255, 255, 0.10);
--admin-drawer-sublink-active-bar: 3px solid #ff90e8;
--admin-drawer-top-bg: #080806;
--admin-drawer-top-border: #3a3a38;
--admin-drawer-top-text: #e0e0d8;
--admin-drawer-avatar-bg: #2a2a28;
--admin-border: rgba(255, 255, 255, 0.18);
--admin-border-light: rgba(255, 255, 255, 0.08);
--admin-border-strong: rgba(255, 255, 255, 0.35);
--admin-border-focus: #ff90e8;
--admin-outline: rgba(255, 144, 232, 0.10);
--admin-outline-variant: rgba(255, 144, 232, 0.05);
--admin-text: #f0f0e8;
--admin-text-secondary: #a0a098;
--admin-text-muted: #606058;
--admin-text-disabled: #343430;
--admin-text-tertiary: #c8c8c0;
--admin-text-inverse: #0a0a08;
--admin-primary: #ff90e8;
--admin-primary-rgb: 255, 144, 232;
--admin-primary-hover: #ffb0f0;
--admin-primary-light: rgba(255, 144, 232, 0.18);
--admin-primary-border: rgba(255, 144, 232, 0.45);
--admin-primary-text: #ff90e8;
--admin-on-primary: #000000;
--admin-elevation-1: 0 1px 3px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,144,232,0.04);
--admin-elevation-2: 0 4px 16px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,144,232,0.05);
--admin-elevation-3: 0 8px 30px rgba(0,0,0,0.75);
--admin-shadow: var(--admin-elevation-1);
--admin-shadow-card: var(--admin-elevation-2);
--admin-state-hover: rgba(255, 144, 232, 0.06);
--admin-state-focus: rgba(255, 144, 232, 0.10);
--admin-state-pressed: rgba(255, 144, 232, 0.14);
--admin-state-drag: rgba(255, 144, 232, 0.18);
--admin-focus-ring: 0 0 0 3px rgba(255, 144, 232, 0.35);
--admin-focus-ring-border: 1px solid #ff90e8;
--admin-error-focus-ring: 0 0 0 3px rgba(220, 52, 30, 0.28);
--admin-modal-box-bg: #1c1c1a;
--admin-modal-btn-bg: #242422;
--admin-modal-btn-color: #a0a098;
--admin-modal-btn-hover-bg: #2c2c2a;
--admin-white: #1c1c1a;
--admin-theme-mode: dark;
--admin-grey-50: #1a1a18;
--admin-grey-100: #222220;
--admin-grey-200: #2a2a28;
--admin-grey-300: #3a3a38;
--admin-grey-400: #606058;
--admin-grey-500: #808078;
--admin-grey-600: #a0a098;
--admin-grey-700: #c0c0b8;
--admin-grey-800: #dcdcd4;
--admin-grey-900: #f0f0e8;
--admin-error: #ff5544;
--admin-error-bg: rgba(220, 52, 30, 0.18);
--admin-error-text: #ff8870;
--admin-error-border: rgba(220, 52, 30, 0.40);
--admin-success: #30c8bc;
--admin-success-bg: rgba(35, 160, 148, 0.18);
--admin-success-text: #50e8dc;
--admin-success-border: rgba(35, 160, 148, 0.40);
--admin-warn: #ffd830;
--admin-warn-bg: rgba(255, 201, 0, 0.16);
--admin-warn-text: #ffe870;
--admin-warn-border: rgba(255, 201, 0, 0.38);
--admin-info: #b0c0ff;
--admin-info-bg: rgba(144, 168, 237, 0.18);
--admin-info-text: #c8d4ff;
--admin-info-border: rgba(144, 168, 237, 0.40);
--admin-header-notifications-pill-bg: rgba(255, 144, 232, 0.30);
--admin-header-notifications-pill-fg: #2a0020;
--admin-header-notifications-pill-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.admin {
margin: 0;
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-body);
line-height: 1.5;
color: var(--admin-text);
background: var(--admin-body-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 1024px) {
.admin.admin--drawer-open {
overflow: hidden;
}
}
.admin__wrap {
display: flex;
min-height: 100vh;
}
.admin__content-wrap {
flex: 1;
min-width: 0;
margin-left: var(--admin-drawer-width);
display: flex;
flex-direction: column;
min-height: 100vh;
transition: margin-left var(--admin-duration-long) ease;
}
@media (max-width: 1024px) {
.admin__content-wrap {
margin-left: 0;
}
}
.admin__main {
flex: 1;
padding: var(--admin-space-main-y) var(--admin-space-2xl);
background: var(--admin-body-bg);
min-height: 0;
overflow: auto;
}
@media (max-width: 1440px) {
.admin__main {
padding: var(--admin-space-main-y) var(--admin-space-2xl);
}
}
@media (max-width: 1024px) {
.admin__main {
padding: var(--admin-space-main-y-md) var(--admin-space-2xl);
}
}
@media (max-width: 768px) {
.admin__main {
padding: var(--admin-space-main-y-sm) var(--admin-space-2xl);
}
}
.admin__content {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--admin-space-sm);
}
@media (max-width: 1024px) {
.admin__content {
padding: 0;
}
}
.admin.admin--embed .admin__main--embed {
min-height: 100vh;
padding: var(--admin-space-lg) var(--admin-space-2xl);
}
.admin.admin--embed .admin__content--embed {
max-width: 1200px;
margin: 0 auto;
}
.admin--auth .admin__wrap {
display: block;
}
.admin--auth .admin__content-wrap {
margin-left: 0;
}
.admin-drawer-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--admin-modal-backdrop-bg);
z-index: 85;
opacity: 0;
transition: opacity var(--admin-duration-long) var(--admin-ease);
}
@media (max-width: 1024px) {
.admin-drawer-overlay {
display: block;
pointer-events: none;
}
.admin--drawer-open .admin-drawer-overlay {
pointer-events: auto;
opacity: 1;
}
}
.admin__content-wrap::after {
content: "";
position: fixed;
inset: 0;
z-index: 80;
background: rgba(0, 0, 0, 0.14);
opacity: 0;
pointer-events: none;
transition: opacity var(--admin-duration-long) var(--admin-ease);
}
#admin-drawer[data-flyout-active] ~ .admin__content-wrap::after {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 1024px) {
#admin-drawer[data-flyout-active] ~ .admin__content-wrap::after {
opacity: 0;
pointer-events: none;
}
}
@media (max-width: 1024px) {
.admin-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
.admin-auth__password-wrap {
position: relative;
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: nowrap;
min-height: var(--admin-size-input-height);
border-radius: 0.6rem;
border: 1px solid var(--admin-border);
background: var(--admin-white);
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
overflow: hidden;
}
.admin-auth__password-wrap:hover {
border-color: rgba(var(--admin-primary-rgb), 0.4);
}
.admin-auth__password-wrap:focus-within {
border-color: var(--admin-border-focus);
box-shadow: 0 0 0 0.2rem rgba(var(--admin-primary-rgb), 0.1);
}
.admin-auth__password-wrap .admin-auth__input {
flex: 1 1 auto;
min-width: 0;
min-height: var(--admin-size-input-height);
height: auto;
border: none;
border-radius: 0;
padding: 0.9rem var(--admin-size-input-height) 0.9rem 1.2rem;
background: transparent;
box-shadow: none;
}
.admin-auth__password-wrap .admin-auth__input:focus {
box-shadow: none;
}
.admin-auth__password-toggle {
flex: 0 0 var(--admin-size-input-height);
width: var(--admin-size-input-height);
min-width: var(--admin-size-input-height);
align-self: stretch;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: none;
border-left: 1px solid var(--admin-border-light);
background: transparent;
color: var(--admin-text-muted);
cursor: pointer;
font: inherit;
line-height: 1;
-webkit-appearance: none;
appearance: none;
transition: color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-auth__password-toggle:hover {
color: var(--admin-text-secondary);
background: var(--admin-state-hover);
}
.admin-auth__password-toggle:active {
background: var(--admin-state-pressed);
}
.admin-auth__password-toggle:focus {
outline: none;
}
.admin-auth__password-toggle:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: -2px;
}
.admin-auth__password-toggle .admin-auth__toggle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.admin-auth__password-toggle .admin-auth__toggle-icon i {
font-size: var(--admin-fs-body);
}
.admin.admin--auth .admin-auth__password-wrap {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
}
.admin.admin--auth .admin-auth__password-wrap > .admin-auth__input {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.admin.admin--auth .admin-auth__password-wrap > .admin-auth__password-toggle {
flex: 0 0 var(--admin-size-input-height) !important;
width: var(--admin-size-input-height) !important;
min-width: var(--admin-size-input-height) !important;
display: inline-flex !important;
align-self: stretch !important;
}
.admin-header {
flex-shrink: 0;
height: var(--admin-header-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--admin-space-lg) 0 var(--admin-space-lg);
gap: var(--admin-space);
background: var(--admin-header-bg);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
z-index: 80;
}
@media (max-width: 1024px) {
.admin-header {
padding: 0 var(--admin-space) 0 var(--admin-space);
}
}
.admin-header__menu-btn {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: var(--admin-radius-sm);
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
font: inherit;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
flex-shrink: 0;
}
.admin-header__menu-btn:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.admin-header__menu-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.7);
outline-offset: 2px;
}
.admin-header__menu-btn .admin-header__menu-icon {
font-size: var(--admin-fs-body);
}
.admin-header__menu-btn .admin-header__menu-icon--close {
display: none;
}
@media (max-width: 1024px) {
.admin-header__menu-btn {
display: inline-flex;
}
}
body.admin--drawer-open .admin-header__menu-icon--open {
display: none;
}
body.admin--drawer-open .admin-header__menu-icon--close {
display: inline-block !important;
}
.admin-header__breadcrumb {
flex: 1;
min-width: 0;
margin: 0 var(--admin-space-sm) 0 0;
}
@media (max-width: 1024px) {
.admin-header__breadcrumb {
display: none !important;
margin-right: var(--admin-space-2xs);
}
}
.admin-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: var(--admin-space-2xs);
font-size: var(--admin-fs-sm);
}
@media (max-width: 1024px) {
.admin-breadcrumb {
font-size: var(--admin-fs-base);
}
}
.admin-breadcrumb__item {
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs);
margin: 0;
}
.admin-breadcrumb__link {
display: inline-flex;
align-items: center;
min-width: 0;
color: #d9ecff;
text-decoration: none;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
transition: color var(--admin-duration) var(--admin-ease);
}
.admin-breadcrumb__link:hover {
color: #fff;
}
.admin-breadcrumb__link:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.7);
outline-offset: 2px;
}
.admin-breadcrumb__sep {
display: inline-flex;
align-items: center;
justify-content: center;
color: #b8d9f5;
font-weight: 700;
line-height: 1;
user-select: none;
pointer-events: none;
}
.admin-breadcrumb__current {
display: inline-flex;
align-items: center;
min-width: 0;
color: #fff;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0;
white-space: nowrap;
}
.admin-breadcrumb__node {
position: relative;
display: inline-flex;
align-items: center;
min-width: 0;
gap: var(--admin-space-3xs);
}
.admin-breadcrumb__dropdown {
display: inline-flex;
align-items: center;
}
.admin-breadcrumb__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-height: 3rem;
max-width: 28rem;
padding: 0 var(--admin-space-2xs);
gap: var(--admin-space-2xs);
border: 0;
border-radius: var(--admin-radius-sm);
color: #fff;
background: transparent;
cursor: pointer;
list-style: none;
line-height: 1.25;
transition: background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-breadcrumb__trigger::-webkit-details-marker, .admin-breadcrumb__trigger::marker {
display: none;
}
.admin-breadcrumb__trigger i {
flex-shrink: 0;
font-size: var(--admin-fs-xs);
transition: transform var(--admin-duration) var(--admin-ease);
}
.admin-breadcrumb__trigger:hover, .admin-breadcrumb__trigger[aria-expanded=true], .admin-breadcrumb__dropdown[open] .admin-breadcrumb__trigger {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.admin-breadcrumb__trigger[aria-expanded=true] i, .admin-breadcrumb__dropdown[open] .admin-breadcrumb__trigger i {
transform: rotate(180deg);
}
.admin-breadcrumb__trigger:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.7);
outline-offset: 2px;
}
.admin-breadcrumb__item--current .admin-breadcrumb__trigger {
color: #fff;
}
.admin-breadcrumb__trigger-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.admin-breadcrumb__trigger-label--current {
font-weight: 700;
}
.admin-breadcrumb__menu {
position: absolute;
top: calc(100% + var(--admin-space-2xs));
left: 0;
z-index: 210;
display: flex;
flex-direction: column;
min-width: 24rem;
max-width: min(32rem, 100vw - var(--admin-space-xl));
max-height: min(42rem, 100vh - var(--admin-header-height) - var(--admin-space-lg));
padding: var(--admin-space-2xs);
overflow-y: auto;
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-lg);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18), 0 6px 18px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.admin-breadcrumb__menu[hidden], .admin-breadcrumb__dropdown:not([open]) .admin-breadcrumb__menu {
display: none;
}
.admin-breadcrumb__menu-item {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
min-width: 0;
min-height: 4.2rem;
padding: var(--admin-space-xs) var(--admin-space-sm);
color: var(--admin-text);
text-decoration: none;
font-size: var(--admin-fs-body);
font-weight: 700;
line-height: 1.35;
border-radius: var(--admin-radius);
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-breadcrumb__menu-item:hover, .admin-breadcrumb__menu-item:focus-visible {
background: var(--admin-grey-50);
color: var(--admin-text);
}
.admin-breadcrumb__menu-item:focus-visible {
outline: 2px solid var(--admin-primary);
outline-offset: -2px;
}
.admin-breadcrumb__menu-item--current {
color: var(--admin-text);
background: var(--admin-grey-50);
cursor: default;
}
.admin-breadcrumb__menu-icon {
flex-shrink: 0;
width: 1.2em;
color: var(--admin-grey-600);
text-align: center;
}
.admin-breadcrumb__menu-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-header__actions {
display: flex;
align-items: center;
gap: var(--admin-space-2xs);
}
@media (max-width: 1024px) {
.admin-header__actions .admin-header__action--link {
display: inline-flex;
}
}
.admin-header__action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 4rem;
padding: 0 var(--admin-space-sm);
border-radius: var(--admin-radius-full);
color: rgba(255, 255, 255, 0.75);
background: transparent;
border: none;
cursor: pointer;
font: inherit;
font-size: var(--admin-fs-sm);
font-weight: 500;
text-decoration: none;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-header__action:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.95);
}
.admin-header__action:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.7);
outline-offset: 2px;
}
.admin-header__action i {
font-size: 1.8rem;
flex-shrink: 0;
}
@media (max-width: 1024px) {
.admin-header__action {
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
padding: 4px 8px;
min-width: 44px;
min-height: 48px;
}
}
@media (max-width: 1024px) {
.admin-header__action:not(.admin-header__action--link) {
display: none;
}
}
.admin-header__action-label {
white-space: nowrap;
font-size: var(--admin-fs-sm);
}
@media (max-width: 1024px) {
.admin-header__action-label {
display: block;
font-size: 9px;
line-height: 1;
text-align: center;
margin-top: 2px;
}
}
.admin-header__menu {
position: relative;
}
.admin-header__menu > summary {
list-style: none;
}
.admin-header__menu > summary::-webkit-details-marker, .admin-header__menu > summary::marker {
display: none;
}
.admin-header__menu[open] > summary {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.95);
}
.admin-header__menu[open] > summary .admin-header__action-caret {
transform: rotate(180deg);
}
.admin-header__action--menu {
cursor: pointer;
gap: 0.4rem;
}
.admin-header__action-caret {
font-size: var(--admin-fs-xs);
opacity: 0.7;
transition: transform var(--admin-duration) var(--admin-ease);
}
@media (max-width: 1024px) {
.admin-header__action-caret {
display: none;
}
}
.admin-header__menu-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: var(--admin-card-bg);
border-radius: var(--admin-radius-lg);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
border: 1px solid var(--admin-border-light);
padding: var(--admin-space-xs) 0;
z-index: 200;
overflow: hidden;
}
@media (max-width: 1024px) {
.admin-header__menu-dropdown {
right: 0;
}
}
.admin-header__menu-item {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
width: 100%;
padding: var(--admin-space-sm) var(--admin-space-lg);
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
box-sizing: border-box;
}
.admin-header__menu-item:hover {
background: var(--admin-grey-50);
color: var(--admin-text);
}
.admin-header__menu-item:focus-visible {
outline: 2px solid var(--admin-primary);
outline-offset: -2px;
}
.admin-header__menu-item i {
flex-shrink: 0;
width: 1.1em;
text-align: center;
color: var(--admin-grey-400);
font-size: var(--admin-fs-body);
transition: color var(--admin-duration) var(--admin-ease);
}
.admin-header__menu-item:hover i {
color: var(--admin-grey-600);
}
.admin-header__menu-item > span {
flex: 1;
min-width: 0;
font-weight: 500;
}
.admin-header__actions-divider {
width: 1px;
height: 20px;
background: rgba(255, 255, 255, 0.12);
flex-shrink: 0;
margin: 0 var(--admin-space-2xs);
}
@media (max-width: 1024px) {
.admin-header__actions-divider {
display: none;
}
}
.admin-header__dropdown {
position: relative;
}
.admin-header__dropdown[open] .admin-header__avatar {
background: #fff;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.admin-header__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #ffffff;
border: none;
cursor: pointer;
list-style: none;
padding: 0;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.25);
transition: background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-header__avatar::-webkit-details-marker, .admin-header__avatar::marker {
display: none;
}
.admin-header__avatar:hover {
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 3px 10px rgba(0, 0, 0, 0.3);
}
.admin-header__avatar:has(.admin-header__avatar-img) {
background: var(--admin-grey-200);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.admin-header__avatar--lg {
width: 52px;
height: 52px;
cursor: default;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.15);
flex-shrink: 0;
}
.admin-header__avatar-letter {
font-size: var(--admin-fs-sm);
font-weight: 700;
color: #0a0a0a;
line-height: 1;
letter-spacing: -0.01em;
}
.admin-header__avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.admin-header__avatar--lg .admin-header__avatar-letter {
font-size: var(--admin-fs-body-lg);
font-weight: 800;
color: #0a0a0a;
}
.admin-header__avatar--lg .admin-header__avatar-img {
width: 52px;
height: 52px;
}
.admin-header__dropdown-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 268px;
background: var(--admin-card-bg);
border-radius: var(--admin-radius-lg);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
border: 1px solid var(--admin-border-light);
padding: 0;
z-index: 200;
overflow: hidden;
}
.admin-header__dropdown-head {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--admin-space-xl) var(--admin-space-xl) var(--admin-space-lg);
padding-top: calc(var(--admin-space-3xl) + var(--admin-space));
}
.admin-header__dropdown-head-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--admin-size-dropdown-head-bg);
background: linear-gradient(135deg, var(--admin-header-bg-hover) 0%, var(--admin-header-bg) 100%);
border-radius: var(--admin-radius-lg) var(--admin-radius-lg) 0 0;
}
.admin-header__dropdown-head .admin-header__avatar--lg {
position: relative;
z-index: 1;
margin-top: calc(var(--admin-size-icon-lg) * -1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.admin-header__dropdown-name {
position: relative;
z-index: 1;
margin-top: var(--admin-space-sm);
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
letter-spacing: -0.01em;
}
.admin-header__dropdown-role {
position: relative;
z-index: 1;
margin-top: var(--admin-space-3xs);
font-size: var(--admin-fs-xs);
font-weight: 500;
color: var(--admin-text-muted);
background: var(--admin-grey-100);
padding: 2px var(--admin-space-xs);
border-radius: var(--admin-radius-full);
}
.admin-header__dropdown-list {
padding: var(--admin-space-xs) 0;
border-top: 1px solid var(--admin-border-light);
}
.admin-header__dropdown-item {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
width: 100%;
padding: var(--admin-space-sm) var(--admin-space-lg);
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
box-sizing: border-box;
}
.admin-header__dropdown-item:hover {
background: var(--admin-grey-50);
color: var(--admin-text);
}
.admin-header__dropdown-item:focus-visible {
outline: 2px solid var(--admin-primary);
outline-offset: -2px;
}
.admin-header__dropdown-item i {
flex-shrink: 0;
width: 1.1em;
text-align: center;
color: var(--admin-grey-400);
font-size: var(--admin-fs-body);
transition: color var(--admin-duration) var(--admin-ease);
}
.admin-header__dropdown-item:hover i {
color: var(--admin-grey-600);
}
.admin-header__dropdown-item > span {
flex: 1;
min-width: 0;
font-weight: 500;
}
.admin-header__dropdown-item--logout {
color: var(--admin-error);
font-weight: 500;
margin-top: var(--admin-space-3xs);
padding-top: var(--admin-space-sm);
border-top: 1px solid var(--admin-border-light);
}
.admin-header__dropdown-item--logout:hover {
background: var(--admin-error-bg);
color: var(--admin-error);
}
.admin-header__dropdown-item--logout i {
color: var(--admin-error);
opacity: 0.7;
}
.admin-header__dropdown-item--logout:hover i {
color: var(--admin-error);
opacity: 1;
}
.admin-header__dropdown-form {
margin: 0;
padding: 0;
border: none;
}
.admin-header__notifications {
position: relative;
}
.admin-header__notifications-bell-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1024px) {
.admin-header__notifications-bell-wrap {
position: relative;
}
}
.admin-header__notifications-unread-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6rem;
height: 1.6rem;
margin-left: 0.3rem;
padding: 0 0.4rem;
border-radius: var(--admin-radius-full);
font-size: 10.5px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
flex-shrink: 0;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
background: rgba(255, 255, 255, 0.95);
color: #111111;
border: 1.5px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.admin-header__notifications-unread-pill.is-unread {
background: #ffffff;
color: #c81e1e;
border-color: rgba(200, 30, 30, 0.25);
box-shadow: 0 0 0 1.5px rgba(200, 30, 30, 0.18), 0 2px 8px rgba(0, 0, 0, 0.35);
}
@media (max-width: 1024px) {
.admin-header__notifications-unread-pill {
position: absolute;
top: 4px;
right: 4px;
margin-left: 0;
}
}
.admin-header__notifications summary::-webkit-details-marker,
.admin-header__notifications summary::marker {
display: none;
}
.admin-header__notifications-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 360px;
max-width: 440px;
max-height: 80vh;
display: flex;
flex-direction: column;
background: var(--admin-card-bg);
border-radius: var(--admin-radius-lg);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
border: 1px solid var(--admin-border-light);
z-index: 200;
overflow: hidden;
}
.admin-header__notifications-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--admin-space-sm);
padding: var(--admin-space) var(--admin-space-lg);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-header__notifications-head-title {
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text);
}
.admin-header__notifications-head-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.8rem;
height: 1.6rem;
padding: 0 0.5rem;
border-radius: var(--admin-radius-full);
font-size: 11px;
font-weight: 700;
line-height: 1;
color: var(--admin-text-secondary);
background: var(--admin-grey-100);
}
.admin-header__notifications-head-count--unread, .admin-header__notifications-head-count.is-unread {
color: #ffffff;
background: var(--admin-primary);
}
.admin-header__notifications-tabs {
display: flex;
gap: 0.25rem;
padding: 0.5rem var(--admin-space-lg);
overflow-x: auto;
border-bottom: 1px solid var(--admin-border-light);
scrollbar-width: thin;
}
.admin-header__notifications-tab {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
padding: 0.4rem 0.75rem;
font-size: var(--admin-fs-sm);
font-weight: 500;
color: var(--admin-text-secondary);
background: transparent;
border: 1px solid transparent;
border-radius: var(--admin-radius-full);
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-tab:hover {
background: var(--admin-grey-50);
color: var(--admin-text);
}
.admin-header__notifications-tab--active {
background: var(--admin-primary-soft, rgba(59, 130, 246, 0.1));
color: var(--admin-primary);
border-color: var(--admin-primary-soft, rgba(59, 130, 246, 0.2));
}
.admin-header__notifications-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.1rem;
padding: 0 0.35rem;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
color: #ffffff;
background: var(--admin-primary);
border-radius: var(--admin-radius-full);
}
.admin-header__notifications-list {
padding: 0;
max-height: 420px;
overflow-y: auto;
}
.admin-header__notifications-loading {
margin: 0;
padding: var(--admin-space-xl);
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
text-align: center;
}
.admin-header__notifications-item {
position: relative;
display: flex;
align-items: stretch;
gap: var(--admin-space-sm);
padding: var(--admin-space) var(--admin-space-lg);
border-bottom: 1px solid var(--admin-border-light);
transition: background var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-item:last-child {
border-bottom: none;
}
.admin-header__notifications-item:hover {
background: var(--admin-grey-50);
}
.admin-header__notifications-item.is-unread {
background: var(--admin-primary-soft, rgba(59, 130, 246, 0.05));
}
.admin-header__notifications-item.is-unread::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background: var(--admin-primary);
}
.admin-header__notifications-item.is-unread:hover {
background: var(--admin-primary-soft, rgba(59, 130, 246, 0.08));
}
.admin-header__notifications-item-link {
display: flex;
align-items: flex-start;
gap: var(--admin-space-sm);
flex: 1;
min-width: 0;
color: inherit;
text-decoration: none;
}
.admin-header__notifications-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
font-size: 0.95rem;
}
.admin-header__notifications-item.is-unread .admin-header__notifications-item-icon {
background: var(--admin-primary-soft, rgba(59, 130, 246, 0.15));
color: var(--admin-primary);
}
.admin-header__notifications-item-body {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.admin-header__notifications-item-title {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-header__notifications-item-msg {
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
.admin-header__notifications-item-meta {
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 2px;
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-header__notifications-item-group-chip {
display: inline-flex;
align-items: center;
padding: 0.1rem 0.45rem;
font-size: 10.5px;
font-weight: 500;
color: var(--admin-text-secondary);
background: var(--admin-grey-100);
border-radius: var(--admin-radius-full);
}
.admin-header__notifications-item-time {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-header__notifications-item-mark {
display: inline-flex;
flex-shrink: 0;
align-items: center;
margin: 0;
}
.admin-header__notifications-item-mark button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: 1px solid var(--admin-border-light);
border-radius: 50%;
color: var(--admin-text-muted);
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-item-mark button:hover {
background: var(--admin-primary);
color: #ffffff;
border-color: var(--admin-primary);
}
.admin-header__notifications-item--empty {
display: block;
padding: var(--admin-space-xl);
color: var(--admin-text-muted);
text-align: center;
font-size: var(--admin-fs-sm);
}
.admin-header__notifications-footer {
display: flex;
flex-wrap: wrap;
gap: 0;
border-top: 1px solid var(--admin-border-light);
background: var(--admin-grey-50);
}
.admin-header__notifications-mark-all-form {
flex: 1;
min-width: 0;
margin: 0;
border-right: 1px solid var(--admin-border-light);
}
.admin-header__notifications-mark-all {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
padding: var(--admin-space-sm) var(--admin-space);
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-mark-all:hover {
background: var(--admin-grey-100);
color: var(--admin-primary);
}
.admin-header__notifications-all,
.admin-header__notifications-log {
flex: 1;
min-width: 0;
padding: var(--admin-space-sm) var(--admin-space);
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-primary);
text-align: center;
text-decoration: none;
transition: background var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-all:hover,
.admin-header__notifications-log:hover {
background: var(--admin-grey-100);
}
.admin-header__notifications-log {
border-left: 1px solid var(--admin-border-light);
color: var(--admin-text-secondary);
font-weight: 500;
}
.admin-header__notifications-log:hover {
color: var(--admin-primary);
}
.admin-header__theme-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.admin-header__theme-icon--system {
display: inline-block;
}
.admin-header__theme-icon--light {
display: none;
}
.admin-header__theme-icon--dark {
display: none;
}
:root[data-theme=light] .admin-header__theme-icon--system,
:root[data-theme=light-quiet] .admin-header__theme-icon--system,
:root[data-theme=light-solarized] .admin-header__theme-icon--system,
:root[data-theme=light-hc] .admin-header__theme-icon--system,
[data-forced-theme=light] .admin-header__theme-icon--system {
display: none;
}
:root[data-theme=light] .admin-header__theme-icon--light,
:root[data-theme=light-quiet] .admin-header__theme-icon--light,
:root[data-theme=light-solarized] .admin-header__theme-icon--light,
:root[data-theme=light-hc] .admin-header__theme-icon--light,
[data-forced-theme=light] .admin-header__theme-icon--light {
display: inline-block;
}
:root[data-theme=light] .admin-header__theme-icon--dark,
:root[data-theme=light-quiet] .admin-header__theme-icon--dark,
:root[data-theme=light-solarized] .admin-header__theme-icon--dark,
:root[data-theme=light-hc] .admin-header__theme-icon--dark,
[data-forced-theme=light] .admin-header__theme-icon--dark {
display: none;
}
:root[data-theme=dark] .admin-header__theme-icon--system,
:root[data-theme=dark-modern] .admin-header__theme-icon--system,
:root[data-theme=dark-abyss] .admin-header__theme-icon--system,
:root[data-theme=dark-dracula] .admin-header__theme-icon--system,
:root[data-theme=dark-mongo] .admin-header__theme-icon--system,
:root[data-theme=dark-red] .admin-header__theme-icon--system,
[data-forced-theme=dark] .admin-header__theme-icon--system {
display: none;
}
:root[data-theme=dark] .admin-header__theme-icon--light,
:root[data-theme=dark-modern] .admin-header__theme-icon--light,
:root[data-theme=dark-abyss] .admin-header__theme-icon--light,
:root[data-theme=dark-dracula] .admin-header__theme-icon--light,
:root[data-theme=dark-mongo] .admin-header__theme-icon--light,
:root[data-theme=dark-red] .admin-header__theme-icon--light,
[data-forced-theme=dark] .admin-header__theme-icon--light {
display: none;
}
:root[data-theme=dark] .admin-header__theme-icon--dark,
:root[data-theme=dark-modern] .admin-header__theme-icon--dark,
:root[data-theme=dark-abyss] .admin-header__theme-icon--dark,
:root[data-theme=dark-dracula] .admin-header__theme-icon--dark,
:root[data-theme=dark-mongo] .admin-header__theme-icon--dark,
:root[data-theme=dark-red] .admin-header__theme-icon--dark,
[data-forced-theme=dark] .admin-header__theme-icon--dark {
display: inline-block;
}
.admin-header__theme-dropdown {
min-width: 18rem;
}
.admin-header__theme-group-label {
display: block;
padding: 0.5rem 1rem 0.2rem;
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
cursor: default;
user-select: none;
border-top: 1px solid var(--admin-border-light);
margin-top: 0.2rem;
}
.admin-header__theme-group-label:first-of-type {
border-top: none;
margin-top: 0;
}
.admin-header__theme-check {
margin-left: auto;
font-size: var(--admin-fs-xs);
color: var(--admin-primary);
opacity: 0;
flex-shrink: 0;
}
.admin-header__theme-item[aria-checked=true] .admin-header__theme-check {
opacity: 1;
}
[data-theme=dark] .admin-header__menu-dropdown,
[data-theme=dark] .admin-header__dropdown-menu,
[data-theme=dark] .admin-header__notifications-dropdown,
[data-theme=dark-modern] .admin-header__menu-dropdown,
[data-theme=dark-modern] .admin-header__dropdown-menu,
[data-theme=dark-modern] .admin-header__notifications-dropdown,
[data-theme=dark-abyss] .admin-header__menu-dropdown,
[data-theme=dark-abyss] .admin-header__dropdown-menu,
[data-theme=dark-abyss] .admin-header__notifications-dropdown,
[data-theme=dark-dracula] .admin-header__menu-dropdown,
[data-theme=dark-dracula] .admin-header__dropdown-menu,
[data-theme=dark-dracula] .admin-header__notifications-dropdown,
[data-theme=dark-mongo] .admin-header__menu-dropdown,
[data-theme=dark-mongo] .admin-header__dropdown-menu,
[data-theme=dark-mongo] .admin-header__notifications-dropdown,
[data-theme=dark-red] .admin-header__menu-dropdown,
[data-theme=dark-red] .admin-header__dropdown-menu,
[data-theme=dark-red] .admin-header__notifications-dropdown {
background: var(--admin-card-bg);
border-color: var(--admin-border);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--admin-border);
}
[data-theme=dark] .admin-header__dropdown-list,
[data-theme=dark] .admin-header__notifications-list,
[data-theme=dark] .admin-header__notifications-footer,
[data-theme=dark-modern] .admin-header__dropdown-list,
[data-theme=dark-modern] .admin-header__notifications-list,
[data-theme=dark-modern] .admin-header__notifications-footer,
[data-theme=dark-abyss] .admin-header__dropdown-list,
[data-theme=dark-abyss] .admin-header__notifications-list,
[data-theme=dark-abyss] .admin-header__notifications-footer,
[data-theme=dark-dracula] .admin-header__dropdown-list,
[data-theme=dark-dracula] .admin-header__notifications-list,
[data-theme=dark-dracula] .admin-header__notifications-footer,
[data-theme=dark-mongo] .admin-header__dropdown-list,
[data-theme=dark-mongo] .admin-header__notifications-list,
[data-theme=dark-mongo] .admin-header__notifications-footer,
[data-theme=dark-red] .admin-header__dropdown-list,
[data-theme=dark-red] .admin-header__notifications-list,
[data-theme=dark-red] .admin-header__notifications-footer {
border-color: var(--admin-border);
}
[data-theme=dark] .admin-header__notifications-item,
[data-theme=dark-modern] .admin-header__notifications-item,
[data-theme=dark-abyss] .admin-header__notifications-item,
[data-theme=dark-dracula] .admin-header__notifications-item,
[data-theme=dark-mongo] .admin-header__notifications-item,
[data-theme=dark-red] .admin-header__notifications-item {
border-color: var(--admin-border);
}
[data-theme=dark] .admin-header__dropdown-item--logout,
[data-theme=dark-modern] .admin-header__dropdown-item--logout,
[data-theme=dark-abyss] .admin-header__dropdown-item--logout,
[data-theme=dark-dracula] .admin-header__dropdown-item--logout,
[data-theme=dark-mongo] .admin-header__dropdown-item--logout,
[data-theme=dark-red] .admin-header__dropdown-item--logout {
border-top-color: var(--admin-border);
}
[data-theme=dark] .admin-header__notifications-log,
[data-theme=dark-modern] .admin-header__notifications-log,
[data-theme=dark-abyss] .admin-header__notifications-log,
[data-theme=dark-dracula] .admin-header__notifications-log,
[data-theme=dark-mongo] .admin-header__notifications-log,
[data-theme=dark-red] .admin-header__notifications-log {
border-left-color: var(--admin-border);
}
[data-theme=dark] .admin-header__actions-divider,
[data-theme=dark-modern] .admin-header__actions-divider,
[data-theme=dark-abyss] .admin-header__actions-divider,
[data-theme=dark-dracula] .admin-header__actions-divider,
[data-theme=dark-mongo] .admin-header__actions-divider,
[data-theme=dark-red] .admin-header__actions-divider {
background: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .admin-header__dropdown-role,
[data-theme=dark-modern] .admin-header__dropdown-role,
[data-theme=dark-abyss] .admin-header__dropdown-role,
[data-theme=dark-dracula] .admin-header__dropdown-role,
[data-theme=dark-mongo] .admin-header__dropdown-role,
[data-theme=dark-red] .admin-header__dropdown-role {
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
}
.admin-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--admin-drawer-width);
display: flex;
flex-direction: column;
background: var(--admin-drawer-bg);
z-index: 90;
overflow: hidden;
border-right: 1px solid var(--admin-drawer-border);
transition: transform var(--admin-duration-long) var(--admin-ease), box-shadow var(--admin-duration-long) var(--admin-ease);
}
@media (max-width: 1024px) {
.admin-drawer {
transform: translateX(-100%);
}
}
@media (max-width: 1024px) {
.admin--drawer-open .admin-drawer {
transform: translateX(0);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
}
}
.admin-drawer__brand {
flex-shrink: 0;
display: flex;
align-items: center;
padding: var(--admin-space-sm);
border-bottom: 1px solid var(--admin-drawer-border);
height: var(--admin-header-height);
}
.admin-drawer__logo {
display: block;
flex: 1;
min-width: 0;
text-decoration: none;
transition: opacity var(--admin-duration) var(--admin-ease);
}
.admin-drawer__logo:hover {
opacity: 0.85;
}
.admin-drawer__logo:focus-visible {
outline: 2px solid var(--admin-primary);
outline-offset: 2px;
}
.admin-drawer__logo .admin-drawer__logo-img {
display: block;
width: 100%;
height: auto;
max-height: 44px;
object-fit: contain;
object-position: left center;
}
.admin-drawer__logo .admin-drawer__logo-img--dark {
display: none;
}
[data-theme^=dark] .admin-drawer__logo .admin-drawer__logo-img--light {
display: none;
}
[data-theme^=dark] .admin-drawer__logo .admin-drawer__logo-img--dark {
display: block;
}
.admin-drawer--drilldown {
width: var(--admin-drawer-width);
}
.admin-drawer__stack {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
}
.admin-drawer__panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: var(--admin-drawer-bg);
transform: translateX(100%);
transition: transform var(--admin-duration-long) var(--admin-ease);
visibility: hidden;
}
.admin-drawer__panel.is-active {
transform: translateX(0);
visibility: visible;
}
.admin-drawer__panel.is-prev {
transform: translateX(-100%);
visibility: visible;
}
.admin-drawer__panel.is-no-animate {
transition: none;
}
.admin-drawer__head {
flex-shrink: 0;
display: flex;
align-items: center;
padding: var(--admin-space-2xs) var(--admin-space-2xs);
min-height: var(--admin-header-height);
border-bottom: 1px solid var(--admin-drawer-border);
}
.admin-drawer__back {
width: 100%;
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin: 1px var(--admin-space-xs);
padding: var(--admin-space-xs) var(--admin-space-sm);
min-height: 40px;
border: none;
background: transparent;
border-radius: var(--admin-radius-sm);
cursor: pointer;
color: var(--admin-drawer-text);
font: inherit;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.35;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer__back:hover {
background: var(--admin-drawer-hover-bg);
color: var(--admin-drawer-text-active);
}
.admin-drawer__back:focus-visible {
outline: 2px solid var(--admin-drawer-focus-ring);
outline-offset: 2px;
}
.admin-drawer__back-icon {
font-size: 1.2rem;
opacity: 0.85;
}
.admin-drawer__back-text {
line-height: 1.2;
}
.admin-drawer__body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--admin-space-2xs) 0 var(--admin-space-sm);
}
.admin-drawer__list {
list-style: none;
margin: 0;
padding: 0;
}
.admin-drawer__divider {
height: 1px;
background: var(--admin-drawer-border);
margin: var(--admin-space-xs) var(--admin-space-xs);
list-style: none;
}
.admin-drawer__list-group-label {
list-style: none;
margin: var(--admin-space-xs) var(--admin-space-xs) 2px;
padding: 4px var(--admin-space-sm) 2px;
color: color-mix(in srgb, var(--admin-drawer-text) 80%, transparent);
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
pointer-events: none;
user-select: none;
}
.admin-drawer__drill {
position: relative;
display: flex;
align-items: center;
gap: var(--admin-space-xs);
width: calc(100% - 2 * var(--admin-space-xs));
margin: 1px var(--admin-space-xs);
padding: var(--admin-space-xs) var(--admin-space-sm);
min-height: 40px;
border: none;
background: transparent;
border-radius: var(--admin-radius-sm);
cursor: pointer;
color: var(--admin-drawer-text);
font: inherit;
font-size: 1.4rem;
font-weight: 600;
text-align: left;
letter-spacing: 0.01em;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer__drill:hover {
background: var(--admin-drawer-hover-bg);
color: var(--admin-drawer-text-active);
}
.admin-drawer__drill:focus-visible {
outline: 2px solid var(--admin-drawer-focus-ring);
outline-offset: 2px;
}
.admin-drawer__drill--active {
background: var(--admin-drawer-active-bg);
color: var(--admin-drawer-active-accent);
font-weight: 700;
}
.admin-drawer__drill-icon {
flex-shrink: 0;
width: 1.6rem;
text-align: center;
font-size: 1.4rem;
color: inherit;
opacity: 0.75;
}
.admin-drawer__drill--active .admin-drawer__drill-icon {
opacity: 1;
}
.admin-drawer__drill-text {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-drawer__drill-chevron {
flex-shrink: 0;
font-size: 1.1rem;
opacity: 0.5;
transition: transform var(--admin-duration) var(--admin-ease);
}
.admin-drawer__drill:hover .admin-drawer__drill-chevron {
transform: translateX(2px);
opacity: 0.8;
}
.admin-drawer__leaf {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin: 1px var(--admin-space-xs);
padding: var(--admin-space-xs) var(--admin-space-sm);
min-height: 40px;
border-radius: var(--admin-radius-sm);
text-decoration: none;
color: var(--admin-drawer-text);
font-size: 1.4rem;
font-weight: 500;
line-height: 1.35;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer__leaf:hover {
background: var(--admin-drawer-hover-bg);
color: var(--admin-drawer-text-active);
}
.admin-drawer__leaf:focus-visible {
outline: 2px solid var(--admin-drawer-focus-ring);
outline-offset: 2px;
}
.admin-drawer__leaf--active {
background: var(--admin-drawer-active-bg);
color: var(--admin-drawer-active-accent);
font-weight: 700;
border-left: var(--admin-drawer-active-bar);
border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}
.admin-drawer__leaf--active .admin-drawer__leaf-icon {
color: var(--admin-drawer-active-accent);
opacity: 1;
}
.admin-drawer__leaf--active:hover {
background: var(--admin-drawer-active-bg);
color: var(--admin-drawer-active-accent);
}
.admin-drawer__leaf-icon {
flex-shrink: 0;
width: 1.6rem;
text-align: center;
font-size: 1.4rem;
color: inherit;
opacity: 0.75;
}
.admin-drawer__leaf-text {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-drawer__badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
height: 16px;
padding: 0 6px;
border-radius: var(--admin-radius-full);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
background: rgba(245, 158, 11, 0.12);
color: var(--admin-warn-text);
margin-right: var(--admin-space-2xs);
}
.admin-drawer--tree {
width: var(--admin-drawer-width);
}
.admin-drawer--tree .admin-drawer__nav {
overflow-y: auto;
display: block;
}
.admin-drawer--tree .admin-drawer__menu {
list-style: none;
margin: 0;
padding: var(--admin-space-xs) 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
.admin-drawer--tree .admin-drawer__menu-item {
margin: 0;
}
.admin-drawer--tree .admin-sidebar__home {
position: relative;
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin: 0 var(--admin-space-xs);
padding: var(--admin-space-xs) var(--admin-space-sm);
min-height: 40px;
border-radius: var(--admin-radius-sm);
text-decoration: none;
color: var(--admin-drawer-text);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.01em;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__home:hover {
background: var(--admin-drawer-hover-bg);
color: var(--admin-drawer-text-active);
}
.admin-drawer--tree .admin-sidebar__home:focus-visible {
outline: 2px solid var(--admin-drawer-focus-ring);
outline-offset: 2px;
}
.admin-drawer--tree .admin-sidebar__home--active {
background: var(--admin-drawer-active-bg);
color: var(--admin-drawer-active-accent);
font-weight: 700;
border-left: var(--admin-drawer-active-bar);
border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}
.admin-drawer--tree .admin-sidebar__home--active .admin-sidebar__home-icon {
color: var(--admin-drawer-active-accent);
opacity: 1;
}
.admin-drawer--tree .admin-sidebar__home-icon {
flex-shrink: 0;
width: 1.6rem;
text-align: center;
font-size: 1.4rem;
opacity: 0.75;
transition: opacity var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__home-text {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-drawer--tree .admin-sidebar__section {
margin: 0;
padding: 0;
border: 0;
}
.admin-drawer--tree .admin-sidebar__section-hd {
position: relative;
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin: 0 var(--admin-space-xs);
padding: var(--admin-space-xs) var(--admin-space-sm);
min-height: 40px;
list-style: none;
cursor: pointer;
user-select: none;
border-radius: var(--admin-radius-sm);
color: var(--admin-text-secondary);
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__section-hd::-webkit-details-marker, .admin-drawer--tree .admin-sidebar__section-hd::marker {
display: none;
}
.admin-drawer--tree .admin-sidebar__section-hd:hover {
background: var(--admin-drawer-hover-bg);
color: var(--admin-text-secondary);
}
.admin-drawer--tree .admin-sidebar__section-hd:focus-visible {
outline: 2px solid var(--admin-drawer-focus-ring);
outline-offset: 2px;
}
.admin-drawer--tree .admin-sidebar__section-icon {
flex-shrink: 0;
width: 1.6rem;
text-align: center;
font-size: 1.4rem;
opacity: 0.75;
}
.admin-drawer--tree .admin-sidebar__section-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-drawer--tree .admin-sidebar__section-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
height: 16px;
padding: 0 6px;
border-radius: var(--admin-radius-full);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
background: var(--admin-grey-100);
color: var(--admin-text-muted);
}
.admin-sidebar__section--system .admin-drawer--tree .admin-sidebar__section-badge {
background: rgba(245, 158, 11, 0.12);
color: var(--admin-warn-text);
}
.admin-drawer--tree .admin-sidebar__section-chevron {
flex-shrink: 0;
font-size: 9px;
color: var(--admin-text-muted);
transition: transform var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__section[open] > .admin-sidebar__section-hd .admin-sidebar__section-chevron {
transform: rotate(180deg);
}
.admin-drawer--tree .admin-sidebar__section-body {
padding: var(--admin-space-3xs) 0 var(--admin-space-xs);
}
.admin-drawer--tree .admin-sidebar__section-list {
list-style: none;
margin: 0 var(--admin-space-xs) 0 calc(var(--admin-space-xs) + 1.8rem);
padding: 0 var(--admin-space-xs) 0 var(--admin-space-sm);
border-left: 2px solid var(--admin-drawer-border);
}
.admin-drawer--tree .admin-sidebar__nav-item {
margin: 0 0 1px;
}
.admin-drawer--tree .admin-sidebar__nav-group-label {
list-style: none;
margin: var(--admin-space-xs) 0 2px;
padding: 2px var(--admin-space-sm) 2px 0;
color: color-mix(in srgb, var(--admin-drawer-text) 80%, transparent);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
pointer-events: none;
user-select: none;
}
.admin-drawer--tree .admin-sidebar__nav-divider {
list-style: none;
height: 1px;
margin: var(--admin-space-xs) 0;
background: var(--admin-drawer-border);
}
.admin-drawer--tree .admin-sidebar__nav-link {
position: relative;
display: flex;
align-items: center;
gap: var(--admin-space-sm);
margin: 0;
padding: var(--admin-space-xs) var(--admin-space-sm);
min-height: 38px;
border-radius: var(--admin-radius-sm);
text-decoration: none;
color: var(--admin-drawer-text);
font-size: 1.4rem;
font-weight: 400;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__nav-link:hover {
background: var(--admin-drawer-hover-bg);
color: var(--admin-drawer-text-active);
}
.admin-drawer--tree .admin-sidebar__nav-link:focus-visible {
outline: 2px solid var(--admin-drawer-focus-ring);
outline-offset: 2px;
}
.admin-drawer--tree .admin-sidebar__nav-link--active {
background: var(--admin-drawer-active-bg);
color: var(--admin-drawer-active-accent);
font-weight: 600;
border-left: var(--admin-drawer-active-bar);
border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}
.admin-drawer--tree .admin-sidebar__nav-link--active .admin-sidebar__nav-icon {
opacity: 0.9;
}
.admin-drawer--tree .admin-sidebar__nav-text {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-drawer--tree .admin-sidebar__nav-icon {
flex-shrink: 0;
width: 1.6rem;
text-align: center;
font-size: 1.3rem;
opacity: 0.65;
transition: opacity var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__expandable {
margin: 0;
}
.admin-drawer--tree .admin-sidebar__parent {
position: relative;
display: flex;
align-items: center;
gap: var(--admin-space-sm);
margin: 0;
padding: var(--admin-space-xs) var(--admin-space-sm);
min-height: 38px;
list-style: none;
cursor: pointer;
user-select: none;
border-radius: var(--admin-radius-sm);
color: var(--admin-drawer-text);
font-size: 1.4rem;
font-weight: 600;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__parent::-webkit-details-marker, .admin-drawer--tree .admin-sidebar__parent::marker {
display: none;
}
.admin-drawer--tree .admin-sidebar__parent:hover {
background: var(--admin-drawer-hover-bg);
color: var(--admin-drawer-text-active);
}
.admin-drawer--tree .admin-sidebar__parent:focus-visible {
outline: 2px solid var(--admin-drawer-focus-ring);
outline-offset: 2px;
}
.admin-drawer--tree .admin-sidebar__parent--open, .admin-sidebar__expandable[open] .admin-drawer--tree .admin-sidebar__parent {
color: var(--admin-drawer-active-accent);
}
.admin-drawer--tree .admin-sidebar__parent--open .admin-sidebar__nav-icon, .admin-sidebar__expandable[open] .admin-drawer--tree .admin-sidebar__parent .admin-sidebar__nav-icon {
opacity: 1;
}
.admin-drawer--tree .admin-sidebar__expandable-chevron {
margin-left: auto;
flex-shrink: 0;
font-size: 10px;
opacity: 0.45;
transition: transform var(--admin-duration) var(--admin-ease), opacity var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__expandable[open] .admin-sidebar__expandable-chevron {
transform: rotate(180deg);
opacity: 0.75;
}
.admin-drawer--tree .admin-sidebar__subtree {
margin: var(--admin-space-3xs) 0 var(--admin-space-xs) 1.6rem;
padding: 0 0 0 var(--admin-space-sm);
border-left: 2px solid var(--admin-drawer-border);
}
.admin-drawer--tree .admin-sidebar__children {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.admin-drawer--tree .admin-sidebar__child-link {
display: flex;
align-items: center;
padding: 0.8rem 1.2rem;
min-height: 34px;
border-radius: var(--admin-radius-sm);
text-decoration: none;
color: var(--admin-drawer-text);
font-size: 1.3rem;
font-weight: 400;
line-height: 1.35;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__child-link:hover {
background: var(--admin-drawer-hover-bg);
color: var(--admin-drawer-text-active);
}
.admin-drawer--tree .admin-sidebar__child-link:focus-visible {
outline: 2px solid var(--admin-drawer-focus-ring);
outline-offset: 2px;
}
.admin-drawer--tree .admin-sidebar__child-link--active {
background: var(--admin-drawer-sublink-active-bg);
color: var(--admin-drawer-active-accent);
font-weight: 600;
border-left: var(--admin-drawer-sublink-active-bar);
border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}
[data-theme=dark-gumroad] .admin-drawer__drill--active {
background: #ffffff;
color: #0a0a08;
font-weight: 700;
border-left: none;
border-radius: var(--admin-radius-lg, 9999px);
margin-inline: var(--admin-space-xs);
}
[data-theme=dark-gumroad] .admin-drawer__drill--active .admin-drawer__drill-icon {
color: #0a0a08;
opacity: 1;
}
[data-theme=dark-gumroad] .admin-drawer__drill--active .admin-drawer__drill-chevron {
opacity: 0.5;
}
[data-theme=dark-gumroad] .admin-drawer__drill--active:hover {
background: #f0f0e8;
color: #0a0a08;
}
[data-theme=dark-gumroad] .admin-drawer__leaf--active {
background: #ffffff;
color: #0a0a08;
font-weight: 700;
border-left: none;
border-radius: var(--admin-radius-lg, 9999px);
margin-inline: var(--admin-space-xs);
}
[data-theme=dark-gumroad] .admin-drawer__leaf--active .admin-drawer__leaf-icon {
color: #0a0a08;
opacity: 1;
}
[data-theme=dark-gumroad] .admin-drawer__leaf--active:hover {
background: #f0f0e8;
color: #0a0a08;
}
[data-theme=dark-gumroad] .admin-sidebar__nav-link--active {
background: #ffffff;
color: #0a0a08;
font-weight: 700;
border-left: none;
border-radius: var(--admin-radius-lg, 9999px);
padding-inline: var(--admin-space-md);
}
[data-theme=dark-gumroad] .admin-sidebar__nav-link--active .admin-sidebar__nav-icon {
opacity: 1;
color: #0a0a08;
}
[data-theme=dark-gumroad] .admin-sidebar__nav-link--active:hover {
background: #f0f0e8;
color: #0a0a08;
}
[data-theme=dark-gumroad] .admin-sidebar__child-link--active {
background: rgba(255, 255, 255, 0.9);
color: #0a0a08;
font-weight: 600;
border-left: none;
border-radius: var(--admin-radius-lg, 9999px);
}
[data-theme=dark-gumroad] .admin-sidebar__child-link--active:hover {
background: #f0f0e8;
color: #0a0a08;
}
.admin-drawer--nested {
width: var(--admin-drawer-width);
overflow: visible;
}
.admin-drawer__nested {
position: relative;
flex: 1;
min-height: 0;
}
.admin-drawer__column {
height: 100%;
overflow-y: auto;
padding: var(--admin-space-2xs) 0 var(--admin-space-sm);
}
.admin-drawer__flyout {
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: var(--admin-sub-drawer-width);
display: flex;
flex-direction: column;
background: var(--admin-drawer-bg);
border-right: 1px solid var(--admin-drawer-border);
box-shadow: var(--admin-elevation-2);
transform: translateX(-0.8rem);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform var(--admin-duration-long) var(--admin-ease), opacity var(--admin-duration-long) var(--admin-ease), visibility var(--admin-duration-long) var(--admin-ease);
z-index: 1;
}
.admin-drawer__flyout[data-flyout-open] {
transform: translateX(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (max-width: 1024px) {
.admin-drawer__flyout {
left: 0;
width: 100%;
z-index: 2;
box-shadow: none;
}
}
.admin-drawer__flyout-group {
list-style: none;
}
.admin-drawer__flyout-details {
margin: var(--admin-space-2xs) 0 0;
}
.admin-drawer__flyout-subhead {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin: 1px var(--admin-space-xs);
padding: var(--admin-space-xs) var(--admin-space-sm);
min-height: 36px;
list-style: none;
cursor: pointer;
user-select: none;
border-radius: var(--admin-radius-sm);
color: var(--admin-drawer-text);
font-size: 1.35rem;
font-weight: 600;
transition: background var(--admin-duration) var(--admin-ease);
}
.admin-drawer__flyout-subhead::-webkit-details-marker, .admin-drawer__flyout-subhead::marker {
display: none;
}
.admin-drawer__flyout-subhead:hover {
background: var(--admin-drawer-hover-bg);
color: var(--admin-drawer-text-active);
}
.admin-drawer__flyout-subhead-chevron {
margin-left: auto;
flex-shrink: 0;
font-size: 10px;
opacity: 0.45;
transition: transform var(--admin-duration) var(--admin-ease);
}
.admin-drawer__flyout-details[open] .admin-drawer__flyout-subhead-chevron {
transform: rotate(180deg);
opacity: 0.75;
}
.admin-drawer__flyout-sublist {
list-style: none;
margin: 0 0 0 var(--admin-space-md);
padding: 0 0 0 var(--admin-space-sm);
border-left: 2px solid var(--admin-drawer-border);
}
.admin-flash {
display: flex;
align-items: flex-start;
gap: var(--admin-space);
padding: var(--admin-space) var(--admin-space-lg);
margin-bottom: var(--admin-space-lg);
border-radius: var(--admin-radius);
font-size: var(--admin-fs-body-lg);
font-weight: 500;
line-height: 1.5;
border: 1px solid transparent;
border-left-width: 4px;
}
.admin-flash__icon {
flex-shrink: 0;
font-size: 1.4rem;
margin-top: 0.1rem;
}
.admin-flash__body {
flex: 1;
}
.admin-flash__title {
font-weight: 600;
margin-bottom: 0.2rem;
}
.admin-flash__msg {
font-weight: 400;
color: inherit;
opacity: 0.85;
}
.admin-flash--success {
background: var(--admin-success-bg);
color: var(--admin-success-text);
border-color: var(--admin-success);
}
.admin-flash--error {
background: var(--admin-error-bg);
color: var(--admin-error-text);
border-color: var(--admin-error);
}
.admin-flash--warning {
background: var(--admin-warn-bg);
color: var(--admin-warn-text);
border-color: var(--admin-warn);
}
.admin-flash--info {
background: var(--admin-info-bg);
color: var(--admin-info-text);
border-color: var(--admin-info);
border-left-color: var(--admin-info);
}
.admin-flash--premium {
background: var(--admin-premium-bg);
color: var(--admin-premium-text);
border-color: var(--admin-premium);
}
.admin-footer {
padding: var(--admin-space) var(--admin-space-2xl);
font-size: var(--admin-fs-xs);
font-weight: 500;
color: var(--admin-text-muted);
letter-spacing: 0.02em;
border-top: 1px solid var(--admin-border-light);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--admin-space);
flex-wrap: wrap;
background: var(--admin-white);
}
.admin-footer__copy {
flex: 1;
min-width: 0;
margin: 0;
}
.admin-footer__links {
display: flex;
gap: var(--admin-space-sm);
align-items: center;
flex-shrink: 0;
}
.admin-footer__link {
color: var(--admin-text-muted);
text-decoration: none;
transition: color var(--admin-duration-short) var(--admin-ease);
}
.admin-footer__link:hover {
color: var(--admin-primary);
}
.admin-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
height: 3.6rem;
padding: 0 1.4rem;
font-size: var(--admin-fs-body-lg);
font-weight: 500;
line-height: 1;
white-space: nowrap;
text-decoration: none !important;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
cursor: pointer;
font-family: inherit;
background: var(--admin-white);
color: var(--admin-text);
position: relative;
overflow: hidden;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease), transform var(--admin-duration-short) var(--admin-ease);
}
.admin-btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.2s ease-out;
pointer-events: none;
opacity: 0;
}
.admin-btn:active::before {
width: 200px;
height: 200px;
opacity: 1;
transition: width 0.2s ease-out, height 0.2s ease-out, opacity 0.15s ease-out;
}
.admin-btn i, .admin-btn svg {
font-size: 1.3rem;
flex-shrink: 0;
}
.admin-btn:hover {
background: var(--admin-grey-100);
border-color: var(--admin-border-strong);
transform: scale(1.01);
}
.admin-btn:active {
background: var(--admin-grey-200);
transform: scale(0.99);
transition-duration: 0.1s;
}
.admin-btn:focus-visible {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.admin-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
transform: none !important;
box-shadow: none !important;
}
.admin-btn--primary {
background: var(--admin-primary);
border-color: transparent;
color: var(--admin-on-primary);
font-weight: 600;
box-shadow: 0 1px 3px rgba(var(--admin-primary-rgb), 0.12);
}
.admin-btn--primary:hover {
background: var(--admin-primary-hover);
border-color: transparent;
box-shadow: 0 2px 6px rgba(var(--admin-primary-rgb), 0.2);
}
.admin-btn--primary:active {
background: var(--admin-primary-hover);
filter: brightness(0.92);
}
.admin-btn--primary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.3);
}
.admin-btn--secondary {
background: transparent;
border-color: rgba(var(--admin-primary-rgb), 0.45);
color: var(--admin-primary-text, var(--admin-primary));
font-weight: 500;
}
.admin-btn--secondary:hover {
background: var(--admin-primary-light);
border-color: var(--admin-primary);
color: var(--admin-primary);
}
.admin-btn--secondary:active {
background: rgba(var(--admin-primary-rgb), 0.12);
}
.admin-btn--secondary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.22);
}
.admin-btn--outline {
background: transparent;
border-color: var(--admin-border-strong);
color: var(--admin-text-secondary);
font-weight: 500;
}
.admin-btn--outline:hover {
background: var(--admin-grey-100);
border-color: var(--admin-border-strong);
color: var(--admin-text);
}
.admin-btn--outline:active {
background: var(--admin-grey-200);
}
.admin-btn--outline:focus-visible {
outline: none;
box-shadow: var(--admin-focus-ring);
}
.admin-btn--danger {
background: var(--admin-error);
border-color: transparent;
color: var(--admin-on-error, #fff);
font-weight: 600;
box-shadow: 0 1px 3px rgba(var(--admin-error-rgb), 0.12);
}
.admin-btn--danger:hover {
background: var(--admin-error-hover);
box-shadow: 0 2px 6px rgba(var(--admin-error-rgb), 0.2);
}
.admin-btn--danger:active {
background: var(--admin-error-active);
}
.admin-btn--danger:focus-visible {
box-shadow: 0 0 0 3px rgba(var(--admin-error-rgb), 0.3);
}
.admin-btn--success {
background: var(--admin-success);
border-color: transparent;
color: var(--admin-on-success, #fff);
font-weight: 600;
box-shadow: 0 1px 3px rgba(var(--admin-success-rgb), 0.12);
}
.admin-btn--success:hover {
background: var(--admin-success-hover);
box-shadow: 0 2px 6px rgba(var(--admin-success-rgb), 0.2);
}
.admin-btn--warn {
background: var(--admin-warn);
border-color: transparent;
color: var(--admin-on-warn, #fff);
font-weight: 600;
}
.admin-btn--warn:hover {
background: var(--admin-warn-hover);
}
.admin-btn--premium {
background: var(--admin-premium);
border-color: transparent;
color: var(--admin-grey-900);
font-weight: 600;
}
.admin-btn--premium:hover {
background: var(--admin-premium-hover);
}
.admin-btn--ghost {
border-color: transparent;
background: transparent;
color: var(--admin-text-secondary);
}
.admin-btn--ghost:hover {
background: var(--admin-grey-100);
color: var(--admin-text);
border-color: transparent;
}
.admin-btn--ghost:focus-visible {
outline: none;
box-shadow: var(--admin-focus-ring);
border-color: var(--admin-border-focus);
}
.admin-btn--icon {
width: 3.6rem;
padding: 0;
flex-shrink: 0;
}
.admin-btn--icon i, .admin-btn--icon svg {
font-size: 1.4rem;
}
.admin-btn--icon.admin-btn--sm {
width: 3rem;
}
.admin-btn--icon.admin-btn--sm i, .admin-btn--icon.admin-btn--sm svg {
font-size: 1.2rem;
}
.admin-btn--xs {
height: 2.4rem;
padding: 0 0.7rem;
font-size: var(--admin-fs-xs);
gap: 0.3rem;
border-radius: var(--admin-radius-xs);
}
.admin-btn--xs i, .admin-btn--xs svg {
font-size: 1rem;
}
.admin-btn--sm {
height: 3rem;
padding: 0 1rem;
font-size: var(--admin-fs-body);
gap: 0.4rem;
}
.admin-btn--sm i, .admin-btn--sm svg {
font-size: 1.1rem;
}
.admin-btn--lg {
height: 4.2rem;
padding: 0 1.8rem;
font-size: var(--admin-fs-body-lg);
gap: 0.8rem;
}
.admin-btn--xl {
height: 4.6rem;
padding: 0 2.2rem;
font-size: var(--admin-fs-lg);
gap: 1rem;
}
.admin-btn--disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
transform: none !important;
box-shadow: none !important;
}
@media (hover: none) and (pointer: coarse) {
.admin-btn:hover {
transform: none;
box-shadow: none;
}
.admin-btn:active {
transform: scale(0.96);
transition: transform 0.1s ease;
}
}
button.admin-btn {
appearance: none;
-webkit-appearance: none;
}
.admin-input-wrap {
margin-bottom: var(--admin-space-lg);
}
.admin-input-wrap--sort-order {
max-width: 140px;
}
.admin-input-wrap--sort-order .admin-form__hint {
margin-bottom: 0;
}
.admin-input-label {
display: block;
margin-bottom: 0.5rem;
font-size: var(--admin-fs-body);
font-weight: 500;
color: var(--admin-text);
letter-spacing: 0.005em;
}
.admin-input, .admin-textarea {
display: block;
width: 100%;
height: var(--admin-size-input-height);
padding: 0.9rem 1.2rem;
font-size: var(--admin-fs-body-lg);
line-height: 1.5;
color: var(--admin-text);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: 0.6rem;
font-family: inherit;
box-sizing: border-box;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-input::placeholder, .admin-textarea::placeholder {
color: var(--admin-text-muted);
}
.admin-input:hover:not(:disabled):not(:focus), .admin-textarea:hover:not(:disabled):not(:focus) {
border-color: rgba(var(--admin-primary-rgb), 0.4);
}
.admin-input:focus, .admin-textarea:focus {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: 0 0 0 0.2rem rgba(var(--admin-primary-rgb), 0.1);
}
.admin-input:-webkit-autofill, .admin-textarea:-webkit-autofill, .admin-input:-webkit-autofill:hover, .admin-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 100px var(--admin-white) inset;
-webkit-text-fill-color: var(--admin-text);
}
.admin-input.admin-input--error, .admin-input--error.admin-textarea {
border-color: var(--admin-error);
}
.admin-input.admin-input--error:focus, .admin-input--error.admin-textarea:focus {
border-color: var(--admin-error);
box-shadow: var(--admin-error-focus-ring);
}
.admin-input:disabled, .admin-textarea:disabled {
background: var(--admin-grey-50);
color: var(--admin-text-disabled);
cursor: not-allowed;
border-color: var(--admin-border-light);
opacity: 0.7;
}
.admin-textarea {
height: auto;
min-height: var(--admin-size-editor-min-height);
padding: var(--admin-space-sm) var(--admin-space);
line-height: 1.6;
resize: vertical;
}
.admin-switch {
display: inline-flex;
align-items: center;
gap: var(--admin-space-sm);
cursor: pointer;
user-select: none;
margin-bottom: var(--admin-space-2xs);
}
.admin-switch input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.admin-switch__track {
position: relative;
flex-shrink: 0;
background: var(--admin-grey-300);
border-radius: var(--admin-radius-full);
transition: background var(--admin-duration-short) var(--admin-ease);
width: 34px;
height: 18px;
}
.admin-switch__thumb {
position: absolute;
background: var(--admin-white);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform var(--admin-duration-short) var(--admin-ease);
top: 3px;
left: 3px;
width: 12px;
height: 12px;
}
input:checked + .admin-switch__track {
background: var(--admin-primary);
}
input:checked + .admin-switch__track .admin-switch__thumb {
transform: translateX(16px);
}
input:focus-visible + .admin-switch__track {
box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.2);
}
.admin-switch:hover .admin-switch__track {
filter: brightness(0.94);
}
.admin-switch__label {
font-size: var(--admin-fs-body-lg);
font-weight: 500;
color: var(--admin-text);
}
.admin-switch--disabled {
cursor: not-allowed;
opacity: 0.45;
}
.admin-switch--success input:checked + .admin-switch__track {
background: var(--admin-success);
}
.admin-switch--xs .admin-switch__track {
width: 26px;
height: 14px;
}
.admin-switch--xs .admin-switch__thumb {
top: 2px;
left: 2px;
width: 10px;
height: 10px;
}
.admin-switch--xs input:checked + .admin-switch__track .admin-switch__thumb {
transform: translateX(12px);
}
.admin-switch--sm .admin-switch__track {
width: 34px;
height: 18px;
}
.admin-switch--sm .admin-switch__thumb {
top: 3px;
left: 3px;
width: 12px;
height: 12px;
}
.admin-switch--sm input:checked + .admin-switch__track .admin-switch__thumb {
transform: translateX(16px);
}
.admin-switch--md .admin-switch__track {
width: 42px;
height: 24px;
}
.admin-switch--md .admin-switch__thumb {
top: 4px;
left: 4px;
width: 16px;
height: 16px;
}
.admin-switch--md input:checked + .admin-switch__track .admin-switch__thumb {
transform: translateX(18px);
}
.admin-switch--lg .admin-switch__track {
width: 50px;
height: 28px;
}
.admin-switch--lg .admin-switch__thumb {
top: 4px;
left: 4px;
width: 20px;
height: 20px;
}
.admin-switch--lg input:checked + .admin-switch__track .admin-switch__thumb {
transform: translateX(22px);
}
.admin-switch--xl .admin-switch__track {
width: 58px;
height: 32px;
}
.admin-switch--xl .admin-switch__thumb {
top: 4px;
left: 4px;
width: 24px;
height: 24px;
}
.admin-switch--xl input:checked + .admin-switch__track .admin-switch__thumb {
transform: translateX(26px);
}
.admin-checkbox-wrap {
display: inline-flex;
align-items: center;
gap: var(--admin-space-sm);
font-size: var(--admin-fs-body-lg);
color: var(--admin-text);
cursor: pointer;
margin-bottom: var(--admin-space-2xs);
user-select: none;
}
.admin-checkbox-wrap input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.admin-checkbox-wrap .admin-checkbox__box {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 3px;
background: var(--admin-white);
border: 2px solid var(--admin-grey-400);
width: 18px;
height: 18px;
transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-checkbox-wrap .admin-checkbox__box::after {
content: "";
border: solid var(--admin-white);
transform: rotate(45deg) scale(0);
transition: transform var(--admin-duration-short) var(--admin-ease);
width: 5px;
height: 9px;
border-width: 0 2px 2px 0;
}
.admin-checkbox-wrap input:checked + .admin-checkbox__box {
background: var(--admin-primary);
border-color: var(--admin-primary);
}
.admin-checkbox-wrap input:checked + .admin-checkbox__box::after {
transform: rotate(45deg) scale(1);
}
.admin-checkbox-wrap:hover .admin-checkbox__box {
border-color: var(--admin-grey-600);
}
.admin-checkbox-wrap input:focus-visible + .admin-checkbox__box {
box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.2);
}
.admin-checkbox-wrap--disabled {
cursor: not-allowed;
opacity: 0.45;
}
.admin-checkbox-wrap .admin-checkbox__label {
font-weight: 500;
}
.admin-checkbox-wrap--xs .admin-checkbox__box {
width: 12px;
height: 12px;
border-width: 1.5px;
}
.admin-checkbox-wrap--xs .admin-checkbox__box::after {
width: 4px;
height: 6px;
border-width: 0 1.5px 1.5px 0;
}
.admin-checkbox-wrap--sm .admin-checkbox__box {
width: 15px;
height: 15px;
border-width: 1.5px;
}
.admin-checkbox-wrap--sm .admin-checkbox__box::after {
width: 4px;
height: 7px;
border-width: 0 1.5px 1.5px 0;
}
.admin-checkbox-wrap--md .admin-checkbox__box {
width: 18px;
height: 18px;
border-width: 2px;
}
.admin-checkbox-wrap--md .admin-checkbox__box::after {
width: 5px;
height: 9px;
border-width: 0 2px 2px 0;
}
.admin-checkbox-wrap--lg .admin-checkbox__box {
width: 20px;
height: 20px;
border-width: 2px;
}
.admin-checkbox-wrap--lg .admin-checkbox__box::after {
width: 6px;
height: 10px;
border-width: 0 2px 2px 0;
}
.admin-checkbox-wrap--xl .admin-checkbox__box {
width: 22px;
height: 22px;
border-width: 2px;
}
.admin-checkbox-wrap--xl .admin-checkbox__box::after {
width: 7px;
height: 11px;
border-width: 0 2.5px 2.5px 0;
}
.admin-checkbox-wrap:not(:has(.admin-checkbox__box)) input {
position: static;
width: 18px;
height: 18px;
margin: 0;
clip: auto;
overflow: visible;
accent-color: var(--admin-primary);
cursor: pointer;
}
.admin-tag-chip {
display: inline-flex;
align-items: center;
padding: var(--admin-space-2xs) var(--admin-space-sm);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-full);
background: var(--admin-bg-secondary);
cursor: pointer;
user-select: none;
transition: background 0.15s, border-color 0.15s;
}
.admin-tag-chip__input {
display: none;
}
.admin-tag-chip__label {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1;
}
.admin-tag-chip.is-selected {
background: var(--admin-primary);
border-color: var(--admin-primary);
}
.admin-tag-chip.is-selected .admin-tag-chip__label {
color: #fff;
}
.admin-tag-chip:hover:not(.is-selected) {
border-color: var(--admin-primary);
background: var(--admin-primary-tint, color-mix(in srgb, var(--admin-primary) 12%, transparent));
}
.admin-radio-group {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
.admin-radio-wrap {
display: inline-flex;
align-items: center;
gap: var(--admin-space-sm);
font-size: var(--admin-fs-body-lg);
color: var(--admin-text);
cursor: pointer;
user-select: none;
}
.admin-radio-wrap input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.admin-radio-wrap .admin-radio__dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
border: 1.5px solid var(--admin-grey-400);
border-radius: 50%;
background: var(--admin-white);
transition: border-color var(--admin-duration-short) var(--admin-ease);
}
.admin-radio-wrap .admin-radio__dot::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--admin-primary);
transform: scale(0);
transition: transform var(--admin-duration-short) var(--admin-ease);
}
.admin-radio-wrap input:checked + .admin-radio__dot {
border-color: var(--admin-primary);
}
.admin-radio-wrap input:checked + .admin-radio__dot::after {
transform: scale(1);
}
.admin-radio-wrap:hover .admin-radio__dot {
border-color: var(--admin-grey-600);
}
.admin-radio-wrap input:focus-visible + .admin-radio__dot {
box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.2);
}
.admin-radio-wrap .admin-radio__label {
font-weight: 500;
}
.admin-radio-wrap--disabled {
cursor: not-allowed;
opacity: 0.45;
}
.admin-radio-wrap:not(:has(.admin-radio__dot)) input {
position: static;
width: 18px;
height: 18px;
margin: 0;
clip: auto;
overflow: visible;
accent-color: var(--admin-primary);
cursor: pointer;
}
.admin-radio-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: var(--admin-space-sm);
}
.admin-radio-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--admin-space-xs);
padding: var(--admin-space-md) var(--admin-space-sm);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
background: var(--admin-white);
cursor: pointer;
user-select: none;
transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-radio-card input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.admin-radio-card:hover {
border-color: var(--admin-border-strong);
background: var(--admin-bg-soft);
}
.admin-radio-card:has(input:checked) {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
}
.admin-radio-card:has(input:checked) .admin-radio-card__icon {
color: var(--admin-primary);
}
.admin-radio-card:has(input:focus-visible) {
box-shadow: var(--admin-focus-ring);
}
.admin-radio-card__icon {
font-size: var(--admin-fs-xl);
line-height: 1;
color: var(--admin-text-secondary);
transition: color var(--admin-duration-short) var(--admin-ease);
}
.admin-radio-card__label {
font-size: var(--admin-fs-sm);
font-weight: 600;
line-height: 1.2;
color: var(--admin-text);
}
.admin-select {
display: block;
width: 100%;
height: var(--admin-size-input-height);
padding: 0 var(--admin-size-select-arrow) 0 var(--admin-space-lg);
font-size: var(--admin-fs-body-lg);
line-height: 1;
color: var(--admin-text);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
font-family: inherit;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--admin-space) center;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-select:hover:not(:disabled) {
border-color: var(--admin-border-strong);
}
.admin-select:focus {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.admin-select.admin-select--error {
border-color: var(--admin-error);
}
.admin-select.admin-select--error:focus {
border-color: var(--admin-error);
box-shadow: var(--admin-error-focus-ring);
}
.admin-select:disabled {
background-color: var(--admin-grey-50);
color: var(--admin-text-muted);
cursor: not-allowed;
}
select.admin-select[multiple] {
height: auto;
padding: var(--admin-space-sm) var(--admin-space);
min-height: 120px;
background-image: none;
}
[data-theme=dark] .admin-select,
[data-theme=dark-modern] .admin-select,
[data-theme=dark-abyss] .admin-select,
[data-theme=dark-dracula] .admin-select,
[data-theme=dark-mongo] .admin-select,
[data-theme=dark-red] .admin-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8b4cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme=dark] .admin-select:focus,
[data-theme=dark-modern] .admin-select:focus,
[data-theme=dark-abyss] .admin-select:focus,
[data-theme=dark-dracula] .admin-select:focus,
[data-theme=dark-mongo] .admin-select:focus,
[data-theme=dark-red] .admin-select:focus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2334affc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.admin-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
height: 2rem;
padding: 0 0.75rem;
font-size: var(--admin-fs-xs);
font-weight: 600;
line-height: 1;
border-radius: var(--admin-radius-full);
border: 1px solid transparent;
letter-spacing: 0.02em;
white-space: nowrap;
vertical-align: middle;
}
.admin-badge i, .admin-badge svg {
font-size: 1rem;
}
.admin-badge--default {
background: var(--admin-grey-100);
color: var(--admin-grey-700);
border-color: var(--admin-grey-200);
}
.admin-badge--primary {
background: var(--admin-primary-light);
color: var(--admin-primary-text);
border-color: var(--admin-primary-border);
}
.admin-badge--success {
background: var(--admin-success-bg);
color: var(--admin-success-text);
border-color: var(--admin-success-border);
}
.admin-badge--error {
background: var(--admin-error-bg);
color: var(--admin-error-text);
border-color: var(--admin-error-border);
}
.admin-badge--warn {
background: var(--admin-warn-bg);
color: var(--admin-warn-text);
border-color: var(--admin-warn-border);
}
.admin-badge--premium {
background: var(--admin-premium-bg);
color: var(--admin-premium-text);
}
.admin-badge--info {
background: var(--admin-info-bg);
color: var(--admin-info-text);
}
.admin-badge--outline {
background: transparent;
color: var(--admin-text-secondary);
border-color: var(--admin-border);
}
.admin-badge--sm {
height: 1.7rem;
padding: 0 0.55rem;
font-size: var(--admin-fs-xs);
}
.admin-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
height: 2.4rem;
padding: 0 0.9rem;
font-size: var(--admin-fs-sm);
font-weight: 500;
border-radius: var(--admin-radius-full);
border: 1px solid var(--admin-border);
background: var(--admin-white);
color: var(--admin-text);
transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease);
}
.admin-chip:hover {
background: var(--admin-grey-50);
border-color: #c6ccd2;
}
.admin-chip__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.4rem;
height: 1.4rem;
padding: 0;
border: none;
background: transparent;
color: var(--admin-text-muted);
border-radius: 50%;
cursor: pointer;
font-size: var(--admin-fs-body);
line-height: 1;
transition: background var(--admin-duration-short) var(--admin-ease);
}
.admin-chip__remove:hover {
background: var(--admin-state-hover);
color: var(--admin-text);
}
.admin-chip__remove:focus-visible {
outline: 2px solid var(--admin-primary);
outline-offset: 1px;
}
.admin-chip--success {
background: var(--admin-success-bg);
color: var(--admin-success-text);
border-color: rgba(var(--admin-success-rgb), 0.3);
}
.admin-chip--error {
background: var(--admin-error-bg);
color: var(--admin-error-text);
border-color: rgba(var(--admin-error-rgb), 0.3);
}
.admin-chip--warn {
background: var(--admin-warn-bg);
color: var(--admin-warn-text);
border-color: rgba(var(--admin-warn-rgb), 0.3);
}
.admin-chip--premium {
background: var(--admin-premium-bg);
color: var(--admin-premium-text);
border-color: rgba(var(--admin-premium-rgb), 0.3);
}
.admin-card {
background: var(--admin-white);
border-radius: 0.8rem;
border: 1px solid var(--admin-border-light);
margin-bottom: 2.4rem;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
@media (min-width: 1024px) {
.admin-card {
margin-bottom: 3.2rem;
}
}
.admin-card__header {
padding: 2rem 2.4rem;
border-bottom: 1px solid var(--admin-border-light);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.2rem;
background: var(--admin-white);
}
.admin-card__title {
font-size: 1.8rem;
font-weight: 600;
color: var(--admin-text);
margin: 0;
line-height: 1.4;
}
.admin-card__badge {
display: inline-block;
padding: 0.4rem 1.2rem;
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
border-radius: 1.2rem;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.5;
}
.admin-card__body {
padding: 0;
background: var(--admin-white);
}
.admin-card__body--padded {
padding: 2.4rem;
}
.admin-card__body--lg {
padding: 3.2rem;
}
.admin-card__footer {
padding: 1.6rem 2.4rem;
border-top: 1px solid var(--admin-border-light);
display: flex;
align-items: center;
gap: var(--admin-space);
background: var(--admin-grey-50);
}
.admin-card__empty {
padding: 6rem 2.4rem;
text-align: center;
}
.admin-card__empty-text {
color: var(--admin-text-muted);
font-size: 1.4rem;
margin: 0;
line-height: 1.6;
}
.admin-card__empty-link {
color: var(--admin-primary);
text-decoration: none;
font-weight: 500;
margin-left: 0.4rem;
transition: color 0.2s;
}
.admin-card__empty-link:hover {
color: var(--admin-primary-hover);
text-decoration: underline;
}
.admin-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.admin-modal[hidden] {
display: none;
}
.admin-modal__backdrop {
position: absolute;
inset: 0;
background: var(--admin-modal-backdrop-bg);
backdrop-filter: blur(var(--admin-modal-backdrop-blur));
-webkit-backdrop-filter: blur(var(--admin-modal-backdrop-blur));
}
.admin-modal__box {
position: relative;
background: var(--admin-modal-box-bg);
border-radius: var(--admin-modal-box-radius);
box-shadow: var(--admin-modal-box-shadow);
max-width: 400px;
width: 100%;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.admin-modal__box--md {
max-width: 480px;
}
.admin-modal__box--lg {
max-width: 640px;
}
.admin-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--admin-modal-header-padding);
border-bottom: var(--admin-modal-header-border);
}
.admin-modal__title {
margin: 0;
font-size: var(--admin-modal-title-fs);
font-weight: var(--admin-modal-title-fw);
color: var(--admin-modal-title-color);
}
.admin-modal__title-sub {
display: block;
font-size: 1.2rem;
font-weight: 400;
color: var(--admin-text-muted);
margin-top: 0.2rem;
}
.admin-modal__title-sub code {
font-family: "Poppins", sans-serif;
font-size: 1.1rem;
background: var(--admin-bg-subtle, #f3f4f6);
padding: 0 0.3rem;
border-radius: 3px;
}
.admin-modal__close {
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
line-height: 1;
color: var(--admin-modal-close-color);
width: 32px;
height: 32px;
border-radius: var(--admin-modal-close-radius);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-modal__close:hover {
color: var(--admin-modal-close-hover-color);
background: var(--admin-modal-close-hover-bg);
}
.admin-modal__close:focus-visible {
outline: var(--admin-modal-close-focus-ring);
outline-offset: 2px;
}
.admin-modal__body {
padding: var(--admin-modal-body-padding);
color: var(--admin-modal-body-color);
font-size: var(--admin-modal-body-fs);
line-height: var(--admin-modal-body-lh);
overflow-y: auto;
overflow-x: hidden;
}
.admin-modal__steps {
display: block;
overflow: hidden;
}
.admin-modal__step {
display: flex;
flex-direction: column;
gap: var(--admin-space-lg);
min-width: 0;
}
.admin-modal__steps[data-active=main] > .admin-modal__step--options {
display: none;
}
.admin-modal__steps[data-active=options] > .admin-modal__step--main {
display: none;
}
.admin-modal__step-header {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-modal__step-title {
font-size: var(--admin-fs-md);
font-weight: 700;
color: var(--admin-text);
}
.admin-modal__step-desc {
margin: 0;
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
}
.admin-modal__back {
background: none;
border: none;
width: 32px;
height: 32px;
border-radius: var(--admin-modal-close-radius);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--admin-text-secondary);
cursor: pointer;
margin-right: var(--admin-space-xs);
transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-modal__back:hover {
color: var(--admin-text);
background: var(--admin-bg-soft);
}
.admin-modal__back:focus-visible {
outline: var(--admin-modal-close-focus-ring);
outline-offset: 2px;
}
.admin-modal__back--hidden {
display: none;
}
.admin-modal__head > .admin-modal__close {
margin-left: auto;
}
.admin-modal__footer--hidden {
display: none;
}
.admin-modal__list {
margin: 0;
padding-left: 1.25rem;
}
.admin-modal__list li {
margin: 0.25rem 0;
}
.admin-modal__footer {
display: flex;
gap: var(--admin-space-sm);
justify-content: flex-end;
padding: var(--admin-modal-footer-padding);
border-top: var(--admin-modal-footer-border);
background: var(--admin-bg-soft);
}
.admin-modal__body--form {
display: flex;
flex-direction: column;
gap: var(--admin-space-lg);
}
.admin-modal__section {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-modal__section-title {
font-size: var(--admin-fs-xs);
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.4rem;
}
.app-modal-backdrop {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--admin-modal-backdrop-bg);
z-index: var(--admin-modal-backdrop-z);
padding: var(--admin-modal-backdrop-padding);
backdrop-filter: blur(0.4rem);
}
.app-modal-box {
max-width: var(--admin-modal-max-width);
width: 100%;
background: var(--admin-modal-box-bg);
border-radius: 1.6rem;
box-shadow: 0 2rem 2.5rem rgba(0, 0, 0, 0.15), 0 0.8rem 1rem rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid var(--admin-border-light);
display: flex;
flex-direction: column;
animation: app-modal-appear 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-modal-backdrop .app-modal-box--wide {
max-width: min(96vw, 112rem);
}
.app-modal-backdrop .app-modal-box--md {
max-width: min(92vw, 54rem);
}
.app-modal-backdrop .app-modal-box--wide .app-modal-body--scroll {
max-height: min(78vh, 76rem);
}
.app-modal-backdrop .cal-post-modal {
max-width: min(94vw, 72rem);
}
.app-modal-backdrop .cal-post-modal .cal-post-modal__body {
max-height: 72vh;
}
.cal-modal-delete-row {
display: flex;
margin-top: var(--admin-space-2xl);
padding-top: var(--admin-space-lg);
border-top: 1px solid var(--admin-border-light);
}
.cal-modal-delete-row .admin-btn {
min-width: 12rem;
}
@keyframes app-modal-appear {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.app-modal-header {
display: flex;
align-items: center;
gap: 1.2rem;
padding: var(--admin-modal-header-padding);
border-bottom: var(--admin-modal-header-border);
}
.app-modal-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 4.8rem;
height: 4.8rem;
border-radius: 50%;
flex-shrink: 0;
}
.app-modal-icon-wrap--success {
background: var(--admin-success-bg);
color: var(--admin-success);
}
.app-modal-icon-wrap--error {
background: var(--admin-error-bg);
color: var(--admin-error);
}
.app-modal-icon-wrap--warning {
background: var(--admin-warn-bg);
color: var(--admin-warn);
}
.app-modal-icon-wrap--info {
background: var(--admin-info-bg);
color: var(--admin-info);
}
.app-modal-icon {
font-size: 2.4rem;
}
.app-modal-title {
font-size: clamp(1.8rem, 2vw, 2rem);
font-weight: 600;
color: var(--admin-modal-title-color);
margin: 0;
line-height: 1.2;
flex: 1;
}
.app-modal-title--success {
color: var(--admin-success-text);
}
.app-modal-title--error {
color: var(--admin-error-text);
}
.app-modal-title--warning {
color: var(--admin-warn-text);
}
.app-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 3.2rem;
height: 3.2rem;
border: none;
background: transparent;
cursor: pointer;
font-size: 1.6rem;
line-height: 1;
color: var(--admin-modal-close-color);
border-radius: 0.8rem;
padding: 0;
margin-left: auto;
flex-shrink: 0;
transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease), transform var(--admin-duration-short) var(--admin-ease);
}
.app-modal-close:hover {
background: var(--admin-grey-100);
color: var(--admin-text);
}
.app-modal-close:active {
transform: scale(0.95);
}
.app-modal-close:focus-visible {
outline: 2px solid rgba(var(--admin-primary-rgb), 0.4);
outline-offset: 2px;
}
.app-modal-body {
padding: var(--admin-modal-body-padding);
font-size: var(--admin-fs-body-lg);
line-height: 1.6;
color: var(--admin-modal-body-color);
white-space: pre-line;
overflow-y: auto;
max-height: 60vh;
-webkit-overflow-scrolling: touch;
}
.app-modal-body--scroll {
white-space: normal;
}
.app-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--admin-space-sm);
padding: var(--admin-modal-footer-padding);
border-top: var(--admin-modal-footer-border);
}
.app-modal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 10rem;
padding: var(--admin-modal-btn-padding);
border-radius: 0.6rem;
font-size: var(--admin-modal-btn-fs);
font-weight: 500;
cursor: pointer;
border: 1px solid var(--admin-border);
background: var(--admin-white);
color: var(--admin-text);
font-family: inherit;
transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease), transform var(--admin-duration-short) var(--admin-ease);
}
.app-modal-btn:hover {
background: var(--admin-grey-100);
border-color: var(--admin-border-strong);
}
.app-modal-btn:active {
transform: scale(0.98);
}
.app-modal-btn--primary {
background: var(--admin-primary);
border-color: var(--admin-primary);
color: var(--admin-on-primary);
font-weight: 600;
}
.app-modal-btn--primary:hover {
background: var(--admin-primary-hover);
border-color: var(--admin-primary-hover);
}
.app-modal-btn--danger {
background: var(--admin-error);
border-color: var(--admin-error);
color: #fff;
font-weight: 600;
}
.app-modal-btn--danger:hover {
background: var(--admin-error-hover);
border-color: var(--admin-error-hover);
}
.admin-search-bar {
position: relative;
display: flex;
align-items: center;
}
.admin-search-bar__icon {
position: absolute;
left: var(--admin-space);
color: var(--admin-text-muted);
font-size: 1.3rem;
pointer-events: none;
z-index: 1;
}
.admin-search-bar__input {
width: 100%;
height: var(--admin-size-input-height);
padding: 0 var(--admin-space) 0 calc(var(--admin-space) + 1.6rem + var(--admin-space-xs));
font-size: var(--admin-fs-body-lg);
color: var(--admin-text);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
font-family: inherit;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-search-bar__input::placeholder {
color: var(--admin-text-muted);
}
.admin-search-bar__input:hover:not(:disabled) {
border-color: var(--admin-border-strong);
}
.admin-search-bar__input:focus {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.admin-search-bar__input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.admin-search-bar__clear {
position: absolute;
right: var(--admin-space-xs);
display: flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border: none;
background: transparent;
color: var(--admin-text-muted);
border-radius: var(--admin-radius-xs);
cursor: pointer;
font-size: 1.3rem;
transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-search-bar__clear:hover {
background: var(--admin-grey-100);
color: var(--admin-text);
}
.admin-nav-tabs {
display: flex;
gap: 0;
padding: 0;
margin: 0 0 1.5rem 0;
border-bottom: 1px solid var(--admin-border-light);
background: transparent;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.admin-nav-tabs::-webkit-scrollbar {
display: none;
}
.admin-nav-tabs--center {
justify-content: center;
}
.admin-nav-tabs__tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
color: var(--admin-text-secondary);
text-decoration: none;
font-weight: 500;
font-size: 1.4rem;
white-space: nowrap;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
cursor: pointer;
font-family: inherit;
transition: all 0.2s ease;
position: relative;
margin-bottom: -1px;
}
.admin-nav-tabs__tab i, .admin-nav-tabs__tab svg {
font-size: 1.3rem;
transition: color 0.2s ease;
}
.admin-nav-tabs__tab:hover:not(.admin-nav-tabs__tab--active) {
color: var(--admin-primary);
background: var(--admin-grey-50);
}
.admin-nav-tabs__tab--active {
color: var(--admin-primary);
border-bottom-color: var(--admin-primary);
font-weight: 600;
background: transparent;
}
.admin-nav-tabs__tab--active i, .admin-nav-tabs__tab--active svg {
color: var(--admin-primary);
}
.admin-nav-tabs__tab:focus-visible {
outline: 2px solid rgba(var(--admin-primary-rgb), 0.4);
outline-offset: 2px;
border-radius: 4px;
}
.admin-nav-tabs__badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.8rem;
padding: 0 0.6rem;
min-width: 1.8rem;
font-size: var(--admin-fs-xs);
font-weight: 600;
border-radius: var(--admin-radius-full);
background: var(--admin-grey-200);
color: var(--admin-text-secondary);
}
.admin-nav-tabs__tab--active .admin-nav-tabs__badge {
background: rgba(var(--admin-primary-rgb), 0.12);
color: var(--admin-primary);
}
.admin-nav-tabs--locale {
margin-top: var(--admin-space-2xl);
margin-bottom: var(--admin-space-sm);
}
.admin-form__locale-panel {
display: none;
}
.admin-form__locale-panel--active {
display: block;
}
.admin-toggle-switch-form {
margin: 0;
display: inline-flex;
}
.admin-toggle-switch {
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs);
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
font: inherit;
color: var(--admin-text-secondary);
}
.admin-toggle-switch:focus-visible {
outline: none;
}
.admin-toggle-switch:focus-visible .admin-toggle-switch__track {
box-shadow: 0 0 0 3px var(--admin-state-focus);
}
.admin-toggle-switch[disabled] {
cursor: not-allowed;
opacity: 0.55;
}
.admin-toggle-switch__track {
position: relative;
display: inline-block;
width: 3rem;
height: 1.625rem;
background: var(--admin-grey-300);
border: 1px solid var(--admin-grey-400);
border-radius: 999px;
transition: background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-toggle-switch__thumb {
position: absolute;
top: 50%;
left: 0.1875rem;
width: 1.25rem;
height: 1.25rem;
background: var(--admin-white);
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transform: translateY(-50%);
transition: left var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-toggle-switch__hint {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: inherit;
user-select: none;
}
.admin-toggle-switch.is-on {
color: var(--admin-text);
}
.admin-toggle-switch.is-on .admin-toggle-switch__track {
background: var(--admin-primary);
border-color: var(--admin-primary);
}
.admin-toggle-switch.is-on .admin-toggle-switch__thumb {
left: calc(100% - 1.25rem - 0.1875rem);
background: var(--admin-white);
}
.admin-toggle-switch.is-off .admin-toggle-switch__track {
background: var(--admin-grey-200);
}
.admin-toggle-switch[disabled] .admin-toggle-switch__hint {
opacity: 0.55;
font-style: italic;
}
.admin-toggle-switch:not([disabled]):hover.is-on .admin-toggle-switch__track {
background: var(--admin-primary-hover);
border-color: var(--admin-primary-hover);
}
.admin-toggle-switch:not([disabled]):hover.is-off .admin-toggle-switch__track {
background: var(--admin-grey-300);
border-color: var(--admin-grey-500);
}
.admin-sns-visibility {
margin-top: var(--admin-space-lg);
padding-top: var(--admin-space-lg);
border-top: 1px solid var(--admin-border);
}
.admin-sns-visibility__title {
margin: 0 0 var(--admin-space-xs);
font-size: var(--admin-fs-lg);
font-weight: 700;
color: var(--admin-text);
line-height: 1.4;
}
.admin-sns-visibility__hint {
margin: 0 0 var(--admin-space-md);
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
line-height: 1.55;
}
.admin-sns-visibility__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
.admin-sns-visibility__item {
display: flex;
align-items: center;
gap: var(--admin-space-md);
padding: var(--admin-space-md);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
}
@media (max-width: 544px) {
.admin-sns-visibility__item {
flex-wrap: wrap;
}
}
.admin-sns-visibility__item-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--admin-radius-sm);
background: color-mix(in srgb, var(--admin-primary) 8%, transparent);
color: var(--admin-primary);
font-size: var(--admin-fs-lg);
}
.admin-sns-visibility__item-info {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.admin-sns-visibility__item-label {
font-size: var(--admin-fs-lg);
font-weight: 600;
color: var(--admin-text);
line-height: 1.4;
}
.admin-sns-visibility__item-desc {
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
line-height: 1.55;
}
.admin-sns-visibility__item-toggle {
flex: 0 0 auto;
display: flex;
align-items: center;
}
@media (max-width: 544px) {
.admin-sns-visibility__item-toggle {
width: 100%;
padding-top: var(--admin-space-xs);
justify-content: flex-end;
}
}
.admin-segmented-control-form {
margin: 0;
display: inline-flex;
}
.admin-segmented-control {
display: inline-flex;
align-items: stretch;
padding: 0.1875rem;
background: var(--admin-grey-200);
border: 1px solid var(--admin-grey-300);
border-radius: 999px;
position: relative;
font-size: var(--admin-fs-sm);
user-select: none;
}
.admin-segmented-control.is-disabled {
opacity: 0.55;
cursor: not-allowed;
}
.admin-segmented-control__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.admin-segmented-control__input:focus-visible + .admin-segmented-control__option {
outline: 2px solid var(--admin-state-focus);
outline-offset: 2px;
}
.admin-segmented-control__option {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 5rem;
padding: 0.375rem 0.875rem;
border-radius: 999px;
color: var(--admin-text-secondary);
font-weight: 600;
cursor: pointer;
background: transparent;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-segmented-control__option:hover {
color: var(--admin-text);
background: rgba(0, 0, 0, 0.04);
}
.admin-segmented-control__option.is-selected {
background: var(--admin-white);
color: var(--admin-text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--admin-grey-300);
}
.admin-segmented-control__option.is-selected:hover {
background: var(--admin-white);
}
.admin-segmented-control.is-loading {
pointer-events: none;
opacity: 0.75;
}
.admin-segmented-control.is-disabled .admin-segmented-control__option {
cursor: not-allowed;
}
.admin-segmented-control__label {
display: inline-block;
white-space: nowrap;
}
.admin-file-uploader-box {
min-height: 120px;
padding: var(--admin-space);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-white);
}
.admin-file-uploader__fallback {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100px;
padding: var(--admin-space-xl);
border: 2px dashed var(--admin-border);
border-radius: var(--admin-radius);
background: var(--admin-grey-50);
cursor: pointer;
text-align: center;
transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-file-uploader__fallback:hover {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
}
.admin-file-uploader__fallback input[type=file] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
font-size: 0;
color: transparent;
}
.admin-file-uploader__fallback input[type=file]::file-selector-button {
display: none;
}
.admin-file-uploader__dropzone input[type=file] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
font-size: 0;
color: transparent;
}
.admin-file-uploader__dropzone input[type=file]::file-selector-button {
display: none;
}
.admin-file-uploader-box--inited .admin-file-uploader__fallback {
display: none;
}
.admin-file-uploader__list {
margin-top: var(--admin-space);
}
.admin-file-uploader__grid {
display: grid;
gap: var(--admin-space-sm);
margin-top: var(--admin-space-sm);
}
.admin-file-uploader__grid--image {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.admin-file-uploader__grid--video, .admin-file-uploader__grid--audio {
grid-template-columns: 1fr;
}
.admin-file-uploader__grid--document, .admin-file-uploader__grid--archive {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.admin-file-uploader__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--admin-space-xs);
padding: var(--admin-space-sm);
background: var(--admin-grey-50);
border-radius: var(--admin-radius-sm);
border: 1px solid var(--admin-border-light);
transition: box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-file-uploader__item:hover {
box-shadow: var(--admin-elevation-1);
}
.admin-file-uploader__thumb {
width: 100%;
height: auto;
max-height: 110px;
object-fit: cover;
border-radius: var(--admin-radius-xs);
}
.admin-file-uploader__preview-video {
width: 100%;
max-height: 160px;
border-radius: var(--admin-radius-xs);
}
.admin-file-uploader__preview-audio {
width: 100%;
max-width: 320px;
}
.admin-file-uploader__icon {
font-size: var(--admin-fs-body-xl);
color: var(--admin-text-muted);
}
.admin-file-uploader__dropzone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100px;
padding: var(--admin-space-xl);
border: 2px dashed var(--admin-border);
border-radius: var(--admin-radius);
background: var(--admin-grey-50);
cursor: pointer;
text-align: center;
transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-file-uploader__dropzone:hover, .admin-file-uploader__dropzone--dragover {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
}
.admin-file-uploader__dropzone--disabled {
pointer-events: none;
opacity: 0.55;
cursor: not-allowed;
}
.admin-file-uploader__dropzone-icon {
display: block;
font-size: 2.4rem;
color: var(--admin-text-muted);
margin-bottom: var(--admin-space-sm);
}
.admin-file-uploader__dropzone-icon i {
font-size: inherit;
}
.admin-file-uploader__dropzone-text {
font-size: var(--admin-fs-body-lg);
font-weight: 600;
color: var(--admin-text);
margin-bottom: 0.3rem;
}
.admin-file-uploader__dropzone-hint {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-file-uploader__dropzone-loader {
display: none;
position: absolute;
inset: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--admin-space);
background: rgba(255, 255, 255, 0.92);
border-radius: inherit;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
backdrop-filter: blur(2px);
}
.admin-file-uploader__dropzone-loader .fa-spinner {
font-size: 1.8rem;
color: var(--admin-primary);
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.admin-file-uploader-box--loading .admin-file-uploader__dropzone .admin-file-uploader__dropzone-loader {
display: flex;
}
.admin-file-uploader-box--loading .admin-file-uploader__dropzone .admin-file-uploader__dropzone-icon,
.admin-file-uploader-box--loading .admin-file-uploader__dropzone .admin-file-uploader__dropzone-text,
.admin-file-uploader-box--loading .admin-file-uploader__dropzone .admin-file-uploader__dropzone-hint {
visibility: hidden;
}
.admin-file-uploader__meta {
width: 100%;
margin-top: var(--admin-space-2xs);
}
.admin-file-uploader__name {
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-file-uploader__size {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
margin-top: 0.1rem;
}
.admin-file-uploader__actions {
display: flex;
gap: var(--admin-space-2xs);
flex-wrap: wrap;
margin-top: var(--admin-space-xs);
}
/* CMS 슬롯 변형 */
.admin-file-uploader-box--cms-slot {
min-height: 0;
padding: 0;
border: none;
border-radius: inherit;
background: transparent;
}
.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone--cms-slot {
width: 100%;
min-height: 100%;
flex: 1;
margin: 0;
gap: var(--admin-space-xs);
}
.admin-cms-media-placeholder--list-uploader.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone--cms-slot {
min-height: 140px;
flex: 0 0 auto;
}
.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone.is-cms-slot-overlay {
position: absolute;
inset: 0;
min-height: 0;
border-radius: inherit;
background: rgba(0, 0, 0, 0.15);
border-color: rgba(255, 255, 255, 0.25);
opacity: 1;
transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease);
}
.admin-file-uploader-box--cms-slot:hover .admin-file-uploader__dropzone.is-cms-slot-overlay,
.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone.is-cms-slot-overlay.admin-file-uploader__dropzone--dragover {
background: rgba(37, 99, 235, 0.12);
border-color: rgba(37, 99, 235, 0.6);
}
.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone-icon {
margin-bottom: var(--admin-space-2xs);
}
.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone-text {
margin-bottom: 0;
text-align: center;
}
.admin-single-image-uploader__rules {
margin-bottom: var(--admin-space-xl);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.6;
}
.admin-single-image-uploader__dropzone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
padding: var(--admin-space-2xl);
border: 2px dashed var(--admin-border);
border-radius: var(--admin-radius);
background: var(--admin-grey-50);
cursor: pointer;
text-align: center;
transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-single-image-uploader__dropzone:hover, .admin-single-image-uploader__dropzone--dragover {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
}
.admin-single-image-uploader__dropzone input[type=file] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
font-size: 0;
color: transparent;
}
.admin-single-image-uploader__dropzone input[type=file]::file-selector-button {
display: none;
}
.admin-single-image-uploader__dropzone-icon {
font-size: 3rem;
color: var(--admin-text-muted);
margin-bottom: var(--admin-space);
display: block;
}
.admin-single-image-uploader__dropzone-text {
font-size: var(--admin-fs-body-lg);
font-weight: 600;
color: var(--admin-text);
margin-bottom: 0.4rem;
}
.admin-single-image-uploader__dropzone-hint {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-single-image-uploader__preview {
display: flex;
align-items: center;
gap: var(--admin-space-lg);
max-width: 440px;
padding: var(--admin-space);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
margin-top: var(--admin-space);
}
.admin-single-image-uploader__thumb {
width: 80px;
height: 80px;
flex-shrink: 0;
object-fit: cover;
border-radius: var(--admin-radius-sm);
border: 1px solid var(--admin-border-light);
}
.admin-single-image-uploader__meta {
flex: 1;
min-width: 0;
}
.admin-single-image-uploader__name {
font-size: var(--admin-fs-body-lg);
font-weight: 600;
color: var(--admin-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-single-image-uploader__size {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
margin-top: 0.2rem;
}
.admin-single-image-uploader__actions {
display: flex;
gap: var(--admin-space-xs);
margin-top: var(--admin-space-sm);
flex-wrap: wrap;
}
.admin-single-video-uploader__rules {
margin-bottom: var(--admin-space-lg);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.6;
}
.admin-single-video-uploader__dropzone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 120px;
padding: var(--admin-space-xl);
border: 2px dashed var(--admin-border);
border-radius: var(--admin-radius);
background: var(--admin-grey-50);
cursor: pointer;
text-align: center;
transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-single-video-uploader__dropzone:hover, .admin-single-video-uploader__dropzone--dragover {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
}
.admin-single-video-uploader__dropzone input[type=file] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
font-size: 0;
color: transparent;
}
.admin-single-video-uploader__dropzone input[type=file]::file-selector-button {
display: none;
}
.admin-single-video-uploader__icon {
font-size: 2.8rem;
color: var(--admin-text-muted);
margin-bottom: var(--admin-space-sm);
display: block;
}
.admin-single-video-uploader__text {
font-size: var(--admin-fs-body-lg);
font-weight: 600;
color: var(--admin-text);
margin-bottom: 0.3rem;
}
.admin-single-video-uploader__hint {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-single-video-uploader__preview {
margin-top: var(--admin-space);
padding: var(--admin-space);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
}
.admin-single-video-uploader video {
width: 100%;
max-height: 200px;
border-radius: var(--admin-radius-sm);
}
.admin-cpf {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.admin-cpf__modes {
display: inline-flex;
border: 1px solid var(--admin-border-light, #eee);
border-radius: var(--admin-radius-sm, 6px);
overflow: hidden;
}
.admin-cpf__modes[hidden] {
display: none;
}
.admin-cpf__mode {
appearance: none;
-webkit-appearance: none;
border: 0;
margin: 0;
background: var(--admin-grey-50, #fafafa);
color: var(--admin-text-secondary, #525252);
font: inherit;
font-size: 12px;
font-weight: 700;
line-height: 1;
padding: 6px 12px;
cursor: pointer;
}
.admin-cpf__mode + .admin-cpf__mode {
border-left: 1px solid var(--admin-border-light, #eee);
}
.admin-cpf__mode.is-active {
background: var(--admin-primary, #171717);
color: var(--admin-on-primary, #fff);
}
.admin-cpf__pane[hidden] {
display: none;
}
.admin-cpf__pane--gradient {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 320px;
}
.admin-cpf__grad-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.admin-cpf__grad-field {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 12px;
color: var(--admin-text-secondary, #525252);
}
.admin-cpf__grad-type {
font: inherit;
font-size: 12px;
padding: 3px 6px;
border: 1px solid var(--admin-border-light, #eee);
border-radius: var(--admin-radius-xs, 4px);
background: #fff;
}
.admin-cpf__grad-angle,
.admin-cpf__stop-pos {
width: 3.5rem;
font: inherit;
font-size: 12px;
padding: 3px 6px;
border: 1px solid var(--admin-border-light, #eee);
border-radius: var(--admin-radius-xs, 4px);
background: #fff;
}
.admin-cpf__grad-unit {
font-size: 11px;
color: var(--admin-text-secondary, #525252);
}
.admin-cpf__stops {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.admin-cpf__stop {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.admin-cpf__stop-tag {
width: 2.6em;
font-size: 11px;
font-weight: 700;
color: var(--admin-text-secondary, #525252);
}
.admin-cpf__grad-preview {
width: 100%;
min-width: 12rem;
height: 1.75rem;
border-radius: var(--admin-radius-xs, 4px);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.admin-cpf .pickr {
position: relative;
z-index: 2;
}
.admin-cpf .pcr-app {
z-index: 40;
}
.admin-cpf__pickr .pickr .pcr-button {
width: 2.5rem;
height: 2.5rem;
min-width: 2.25rem;
min-height: 2.25rem;
padding: 0.35rem;
border-radius: var(--admin-radius-sm, 6px);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.admin-cpf__stop-pickr .pickr .pcr-button {
width: 1.9rem;
height: 1.9rem;
min-width: 1.75rem;
min-height: 1.75rem;
padding: 0.25rem;
border-radius: var(--admin-radius-xs, 4px);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* 하위 서비스 — 심층 DSL 편집기 (관리자) */
.admin-si-deep {
display: flex;
flex-direction: column;
gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
}
.admin-si-deep__hint-top {
margin: 0 0 8px;
font-size: 13px;
color: var(--admin-on-surface-variant);
}
.admin-si-deep__guide {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
padding: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2rem) clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
background: rgba(var(--admin-primary-rgb), 0.06);
border: 1px solid var(--admin-outline-variant);
border-radius: 8px;
font-size: 12px;
line-height: 1.4;
}
.admin-si-deep__toolbar-wrap {
display: flex;
flex-direction: column;
gap: 8px;
}
.admin-si-deep__toolbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.admin-si-deep__guide-label {
font-weight: 700;
color: var(--admin-on-surface);
margin-right: 4px;
}
.admin-si-deep__guide-doc {
width: 100%;
margin-top: 2px;
font-size: 11px;
color: var(--admin-on-surface-variant);
}
.admin-si-deep__guide-doc code {
font-size: 11px;
}
.admin-si-deep__chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-family: "Poppins", sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid transparent;
}
.admin-si-deep__chip--section {
background: var(--admin-accent-purple-bg);
color: var(--admin-accent-purple-text);
border-color: transparent;
}
.admin-si-deep__chip--end {
background: var(--admin-error-bg);
color: var(--admin-error-text);
border-color: transparent;
}
.admin-si-deep__chip--title {
background: var(--admin-accent-teal-bg);
color: var(--admin-accent-teal-text);
border-color: transparent;
}
.admin-si-deep__chip--sep {
background: var(--admin-premium-bg);
color: var(--admin-premium-text);
border-color: transparent;
}
.admin-si-deep__chip--at {
background: var(--admin-info-bg);
color: var(--admin-info-text);
border-color: transparent;
}
.admin-si-deep__tool {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
min-height: 36px;
padding: 0 12px;
border: 1px solid var(--admin-outline-variant);
border-radius: 8px;
background: var(--admin-white);
color: var(--admin-on-surface);
font-family: inherit;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.admin-si-deep__tool:hover {
transform: translateY(-1px);
}
.admin-si-deep__tool:focus-visible {
outline: 2px solid rgba(var(--admin-primary-rgb), 0.35);
outline-offset: 2px;
}
.admin-si-deep__tool--section {
background: var(--admin-accent-purple-bg);
color: var(--admin-accent-purple-text);
border-color: transparent;
}
.admin-si-deep__tool--end {
background: var(--admin-error-bg);
color: var(--admin-error-text);
border-color: transparent;
}
.admin-si-deep__tool--title {
background: var(--admin-accent-teal-bg);
color: var(--admin-accent-teal-text);
border-color: transparent;
}
.admin-si-deep__tool--sep {
background: var(--admin-premium-bg);
color: var(--admin-premium-text);
border-color: transparent;
}
.admin-si-deep__tool--at {
background: var(--admin-info-bg);
color: var(--admin-info-text);
border-color: transparent;
}
.admin-si-deep__editor-shell {
min-height: 460px;
border: 1px solid var(--admin-outline-variant);
border-radius: 10px;
background: var(--admin-white);
overflow: hidden;
}
.admin-si-deep__ta {
display: block;
margin: 0;
padding: 16px 18px;
font-size: 14px;
line-height: 1.7;
font-family: "Poppins", sans-serif;
border: none;
border-radius: 0;
box-sizing: border-box;
width: 100%;
min-height: 460px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
tab-size: 4;
}
.admin-si-deep__ta {
resize: vertical;
background: var(--admin-white) !important;
color: var(--admin-text);
caret-color: var(--admin-text);
}
.admin-si-deep__ta::placeholder {
color: var(--admin-text-muted);
}
.admin-si-deep__ta::selection {
background: rgba(var(--admin-primary-rgb), 0.2);
}
.admin-si-deep__ta:focus {
outline: 2px solid rgba(var(--admin-primary-rgb), 0.35);
outline-offset: -1px;
}
.admin-si-deep__result {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--admin-outline-variant);
border-radius: 10px;
background: var(--admin-white);
overflow: hidden;
}
.admin-si-deep__tabs {
display: flex;
align-items: center;
gap: 4px;
padding: 8px;
background: var(--admin-grey-50);
border-bottom: 1px solid var(--admin-outline-variant);
}
.admin-si-deep__tab {
min-width: 84px;
height: 36px;
padding: 0 14px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--admin-on-surface-variant);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.admin-si-deep__tab:hover {
background: rgba(var(--admin-primary-rgb), 0.08);
color: var(--admin-on-surface);
}
.admin-si-deep__tab.is-active {
background: var(--admin-white);
border-color: var(--admin-outline-variant);
color: var(--admin-on-surface);
}
.admin-si-deep__tab:focus-visible {
outline: 2px solid rgba(var(--admin-primary-rgb), 0.35);
outline-offset: 2px;
}
.admin-si-deep__panel {
display: none;
background: var(--admin-white);
}
.admin-si-deep__panel.is-active {
display: block;
}
.admin-si-deep__output {
margin: 0;
padding: 16px 18px;
min-height: 240px;
max-height: 360px;
overflow: auto;
background: var(--admin-white);
color: var(--admin-text);
font-size: 13px;
line-height: 1.7;
white-space: pre-wrap;
word-break: break-word;
font-family: "Poppins", sans-serif;
}
/**
* 인덱스 페이지 공용 보조 스타일.
* - Excel 다운로드 버튼 (Airtable 스타일)
* - 대량 선택 체크박스 컬럼
* - 선택된 행 강조
*
* 툴바 본체 스타일은 _index-toolbar.scss 참고.
*/
/* Excel 다운로드 버튼 (녹색 계열 — Office 엑셀 컬러) */
.admin-btn--excel {
background: var(--admin-white);
border-color: var(--admin-border);
color: #217346;
}
.admin-btn--excel:hover {
background: var(--admin-success-bg);
border-color: var(--admin-success-border);
color: var(--admin-success-text);
}
.admin-btn--excel i {
color: #217346;
}
/* 테이블 체크박스 컬럼 */
.admin-table__check {
width: 40px !important;
padding-left: 1rem !important;
padding-right: 0 !important;
}
.admin-table__check input[type=checkbox] {
accent-color: var(--admin-primary);
width: 15px;
height: 15px;
cursor: pointer;
}
/* 선택된 행 하이라이트 */
table tr.is-selected td,
.admin-table tbody tr.is-selected td {
background: var(--admin-primary-light);
}
.admin-index-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-xs) var(--admin-space);
margin: 0 0 var(--admin-space);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-white);
transition: background 150ms ease, border-color 150ms ease;
}
.admin-index-toolbar.is-active {
background: var(--admin-primary-light);
border-color: rgba(var(--admin-primary-rgb), 0.35);
}
.admin-index-toolbar .admin-btn {
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
height: var(--admin-size-input-height);
}
.admin-index-toolbar .admin-btn i {
font-size: 1.2rem;
line-height: 1;
}
.admin-index-toolbar__group {
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs);
}
.admin-index-toolbar__group--page {
flex-wrap: wrap;
gap: var(--admin-space-xs);
padding-left: var(--admin-space);
margin-left: var(--admin-space-xs);
border-left: 1px solid var(--admin-border-light);
}
.admin-index-toolbar__group--end {
margin-left: auto;
}
.admin-index-toolbar__page-jump {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--admin-text-secondary);
font-size: var(--admin-fs-body);
}
.admin-index-toolbar__page-input {
width: 52px;
height: var(--admin-size-input-height);
padding: 0 0.5rem;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-xs);
background: var(--admin-white);
color: var(--admin-text);
font-size: var(--admin-fs-body-lg);
text-align: center;
-moz-appearance: textfield;
}
.admin-index-toolbar__page-input::-webkit-outer-spin-button, .admin-index-toolbar__page-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.admin-index-toolbar__page-input:focus {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.admin-index-toolbar__page-info {
color: var(--admin-text-muted);
font-size: var(--admin-fs-body);
}
.admin-index-toolbar__page-info strong {
color: var(--admin-text);
font-weight: 600;
}
.admin-index-toolbar__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.8rem;
height: 1.8rem;
padding: 0 0.5rem;
margin-left: 0.2rem;
border-radius: 99px;
background: var(--admin-error-bg);
color: var(--admin-error-text);
font-size: var(--admin-fs-xs);
font-weight: 700;
line-height: 1;
}
.admin-index-toolbar [data-bulk-action=delete]:disabled .admin-index-toolbar__count {
background: var(--admin-grey-100);
color: var(--admin-text-muted);
}
.admin-sortable__handle.admin-sortable__handle--sm {
width: 1.5rem;
height: 1.5rem;
font-size: 0.875rem;
}
.admin-index-listing {
position: relative;
}
@media (max-width: 1024px) {
.admin-index-listing .admin-table-wrap {
display: none;
}
}
.admin-index-card {
display: none;
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 1024px) {
.admin-index-card {
display: flex;
flex-direction: column;
gap: var(--admin-space-lg);
}
}
.admin-index-card__i18n {
display: none;
}
@media (max-width: 1024px) {
.admin-index-card__i18n {
display: flex;
justify-content: flex-end;
margin-bottom: var(--admin-space);
}
}
.admin-index-card__item {
display: flex;
flex-direction: column;
gap: var(--admin-space-md);
padding: var(--admin-space-xl);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
}
.admin-index-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--admin-space);
}
.admin-index-card__title {
margin: 0;
flex: 1 1 auto;
min-width: 0;
font-size: var(--admin-fs-lg);
font-weight: 600;
color: var(--admin-text);
}
.admin-index-card__title a {
color: inherit;
text-decoration: none;
}
.admin-index-card__title a:hover {
color: var(--admin-primary);
text-decoration: underline;
}
.admin-index-card__check {
flex-shrink: 0;
}
.admin-index-card__check .admin-checkbox-wrap {
margin: 0;
}
.admin-index-card__fields {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
margin: 0;
}
.admin-index-card__field {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--admin-space);
}
.admin-index-card__field-label {
flex-shrink: 0;
margin: 0;
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-index-card__field-value {
margin: 0;
text-align: right;
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
word-break: break-word;
}
.admin-index-card__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--admin-space-xs);
padding-top: var(--admin-space-xs);
border-top: 1px solid var(--admin-border-light);
}
.admin-index-card__actions .admin-table__actions {
display: contents;
}
.admin-table-cards {
display: none;
}
@media (max-width: 1024px) {
.admin-table-cards {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
}
@media (max-width: 1024px) {
[data-table-manager] table,
[data-listing-table] table {
display: none;
}
}
.admin-table-card {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: transparent;
overflow: hidden;
}
.admin-table-card--current, .admin-table-card.user-sessions__row--current {
border-left: 3px solid var(--admin-primary);
}
.admin-table-card__header {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-xs) var(--admin-space);
border-bottom: 1px solid var(--admin-border-light);
background: var(--admin-grey-50);
}
.admin-table-card__check {
display: inline-flex;
align-items: center;
line-height: 1;
}
.admin-table-card__check .admin-checkbox-wrap {
margin: 0;
}
.admin-table-card__icon {
display: flex;
align-items: center;
color: var(--admin-text-muted);
font-size: 1.3rem;
}
.admin-table-card__body {
padding: var(--admin-space-sm) var(--admin-space);
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-table-card__row {
display: flex;
align-items: baseline;
gap: var(--admin-space-sm);
}
.admin-table-card__label {
flex-shrink: 0;
min-width: 80px;
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-table-card__value {
flex: 1;
font-size: var(--admin-fs-body-lg);
color: var(--admin-text);
word-break: break-all;
}
.admin-table-card__value code {
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-sm);
background: var(--admin-grey-100);
padding: 1px 5px;
border-radius: 3px;
color: var(--admin-accent-coral);
}
.admin-table-card__action {
padding: var(--admin-space-sm) var(--admin-space);
border-top: 1px solid var(--admin-border-light);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--admin-space-sm);
background: var(--admin-grey-50);
}
.cs-wrap {
position: relative;
display: block;
}
.cs-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--admin-space-xs);
width: 100%;
min-height: var(--admin-size-input-height);
padding: 0 var(--admin-space-sm) 0 var(--admin-space-lg);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
font-size: var(--admin-fs-body-lg);
font-family: inherit;
color: var(--admin-text);
cursor: pointer;
text-align: left;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.cs-trigger:hover:not(:disabled) {
border-color: var(--admin-border-strong);
}
.cs-trigger:focus-visible, .cs-trigger--open, .cs-trigger[aria-expanded=true] {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.cs-trigger:disabled {
background: var(--admin-grey-50);
color: var(--admin-text-disabled);
cursor: not-allowed;
opacity: 0.7;
}
.cs-trigger__value {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cs-trigger__value--empty {
color: var(--admin-text-muted);
}
.cs-trigger__arrow {
flex-shrink: 0;
color: var(--admin-text-muted);
display: flex;
align-items: center;
transition: transform var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.cs-trigger--open .cs-trigger__arrow, .cs-trigger[aria-expanded=true] .cs-trigger__arrow {
transform: rotate(180deg);
color: var(--admin-primary);
}
.cs-dropdown {
position: absolute;
z-index: 1050;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-2);
overflow: hidden;
animation: cs-in var(--admin-duration-short) var(--admin-ease) both;
}
.cs-dropdown--up {
top: auto;
bottom: calc(100% + 4px);
animation-name: cs-in-up;
}
.cs-dropdown__search {
padding: var(--admin-space-xs) var(--admin-space-sm);
border-bottom: 1px solid var(--admin-border-light);
background: var(--admin-grey-50);
}
.cs-dropdown__search-input {
width: 100%;
height: 3rem;
padding: 0 var(--admin-space-sm);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-xs);
font-size: var(--admin-fs-body-lg);
font-family: inherit;
color: var(--admin-text);
}
.cs-dropdown__search-input::placeholder {
color: var(--admin-text-muted);
}
.cs-dropdown__search-input:focus {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
@keyframes cs-in {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cs-in-up {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cs-list {
list-style: none;
margin: 0;
padding: 4px 0;
max-height: min(240px, 60vh);
overflow-y: auto;
overscroll-behavior: contain;
}
.cs-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.65rem var(--admin-space);
font-size: var(--admin-fs-body-lg);
color: var(--admin-text);
cursor: pointer;
transition: background var(--admin-duration-short) var(--admin-ease);
}
.cs-option:hover:not(.cs-option--disabled):not(.cs-option--empty):not(.cs-option--selected) {
background: var(--admin-grey-50);
}
.cs-option--active:not(.cs-option--selected):not(.cs-option--disabled) {
background: var(--admin-grey-100);
}
.cs-option--selected {
background: var(--admin-primary-light);
color: var(--admin-primary-text);
font-weight: 500;
}
.cs-option--disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cs-option--empty {
cursor: default;
justify-content: center;
color: var(--admin-text-muted);
font-size: var(--admin-fs-sm);
padding: 1.2rem var(--admin-space);
}
.cs-option__label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cs-option__sublabel {
flex-shrink: 0;
margin-left: var(--admin-space-sm);
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
letter-spacing: 0.02em;
}
.cs-option--selected .cs-option__sublabel {
color: var(--admin-primary-text);
opacity: 0.7;
}
.cs-option__check {
flex-shrink: 0;
margin-left: var(--admin-space-sm);
color: var(--admin-primary);
display: flex;
align-items: center;
}
.mcs-wrap {
position: relative;
display: block;
}
.mcs-trigger {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--admin-space-2xs);
min-height: var(--admin-size-input-height);
padding: var(--admin-space-xs) var(--admin-space-sm);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
cursor: text;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.mcs-trigger:hover {
border-color: var(--admin-border-strong);
}
.mcs-trigger--open, .mcs-trigger:focus-within, .mcs-trigger[aria-expanded=true] {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.mcs-tags {
display: contents;
}
.mcs-tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
height: 2rem;
padding: 0 0.4rem 0 0.65rem;
background: var(--admin-primary-light);
color: var(--admin-primary-text);
border: 1px solid rgba(var(--admin-primary-rgb), 0.25);
border-radius: var(--admin-radius-full);
font-size: var(--admin-fs-body);
font-weight: 500;
line-height: 1;
white-space: nowrap;
max-width: 200px;
}
.mcs-tag__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mcs-tag__remove {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4rem;
height: 1.4rem;
padding: 0;
border: none;
background: transparent;
color: inherit;
opacity: 0.65;
border-radius: 50%;
cursor: pointer;
transition: background var(--admin-duration-short) var(--admin-ease), opacity var(--admin-duration-short) var(--admin-ease);
}
.mcs-tag__remove:hover {
background: rgba(var(--admin-primary-rgb), 0.18);
opacity: 1;
}
.mcs-search {
flex: 1 1 80px;
min-width: 80px;
height: 2.4rem;
padding: 0 var(--admin-space-2xs);
border: none;
outline: none;
background: transparent;
font-size: var(--admin-fs-body-lg);
font-family: inherit;
color: var(--admin-text);
}
.mcs-search::placeholder {
color: var(--admin-text-muted);
}
.mcs-dropdown {
position: absolute;
z-index: 1050;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-2);
overflow: hidden;
animation: cs-in var(--admin-duration-short) var(--admin-ease) both;
}
.mcs-dropdown--up {
top: auto;
bottom: calc(100% + 4px);
animation-name: cs-in-up;
}
.mcs-list {
list-style: none;
margin: 0;
padding: 4px 0;
max-height: min(240px, 60vh);
overflow-y: auto;
overscroll-behavior: contain;
}
.mcs-option {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: 0.65rem var(--admin-space);
font-size: var(--admin-fs-body-lg);
color: var(--admin-text);
cursor: pointer;
transition: background var(--admin-duration-short) var(--admin-ease);
}
.mcs-option:hover:not(.mcs-option--disabled):not(.mcs-option--empty) {
background: var(--admin-grey-50);
}
.mcs-option--active:not(.mcs-option--disabled) {
background: var(--admin-grey-100);
}
.mcs-option--selected {
font-weight: 500;
}
.mcs-option--disabled {
opacity: 0.4;
cursor: not-allowed;
}
.mcs-option--empty {
cursor: default;
justify-content: center;
color: var(--admin-text-muted);
font-size: var(--admin-fs-sm);
padding: 1.2rem var(--admin-space);
}
.mcs-option--addable {
color: var(--admin-primary);
font-weight: 500;
}
.mcs-option__check {
flex-shrink: 0;
width: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--admin-primary);
}
.mcs-option__label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mcs-option__add-icon {
flex-shrink: 0;
width: 1.4rem;
text-align: center;
font-size: 1.1rem;
font-weight: 700;
color: var(--admin-primary);
}
.mcs-wrap--search-top .mcs-trigger {
cursor: pointer;
padding: var(--admin-space-xs) var(--admin-space-sm);
min-height: var(--admin-size-input-height);
}
.mcs-wrap--search-top .mcs-trigger-placeholder {
color: var(--admin-text-muted);
font-size: var(--admin-fs-body-lg);
pointer-events: none;
user-select: none;
}
.mcs-search-bar {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
padding: var(--admin-space-xs) var(--admin-space-sm);
border-bottom: 1px solid var(--admin-border-light);
background: var(--admin-grey-50);
position: sticky;
top: 0;
z-index: 1;
}
.mcs-search-bar__icon {
flex-shrink: 0;
color: var(--admin-text-muted);
display: flex;
align-items: center;
}
.mcs-search-bar .mcs-search {
flex: 1 1 0;
min-width: 0;
height: 2.8rem;
padding: 0 var(--admin-space-xs);
font-size: var(--admin-fs-body-lg);
}
.mcs-wrap--rich .mcs-trigger {
align-items: stretch;
}
.mcs-wrap--rich .mcs-tags {
display: flex;
flex-direction: column;
width: 100%;
gap: var(--admin-space-2xs);
}
.mcs-wrap--rich .mcs-tag--rich {
width: 100%;
max-width: none;
height: auto;
align-items: center;
gap: var(--admin-space-xs);
padding: var(--admin-space-2xs) var(--admin-space-xs);
border-radius: var(--admin-radius);
}
.mcs-wrap--rich .mcs-option__body,
.mcs-wrap--rich .mcs-tag__body {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
gap: 2px;
}
.mcs-wrap--rich .mcs-option__title,
.mcs-wrap--rich .mcs-tag__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mcs-wrap--rich .mcs-option__meta,
.mcs-wrap--rich .mcs-tag__meta {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mcs-thumb {
flex-shrink: 0;
width: 4rem;
height: 3rem;
object-fit: cover;
border-radius: var(--admin-radius-xs);
background: var(--admin-grey-100);
user-select: none;
}
.mcs-thumb--empty {
display: inline-block;
}
.admin-tag-input {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-2xs);
min-height: var(--admin-size-input-height);
padding: var(--admin-space-xs) var(--admin-space-sm);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
cursor: text;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-tag-input:focus-within {
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
outline: none;
}
.admin-tag-input--error {
border-color: var(--admin-error);
}
.admin-tag-input--error:focus-within {
box-shadow: 0 0 0 0.2rem rgba(var(--admin-error-rgb, 220, 38, 38), 0.12);
}
.admin-tag-input--stacked {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
}
.admin-tag-input--stacked .admin-tag-input__chip {
width: 100%;
max-width: none;
justify-content: space-between;
}
.admin-tag-input--stacked .admin-tag-input__chip-label {
flex: 1 1 auto;
}
.admin-tag-input--stacked .admin-tag-input__field {
flex: 0 0 auto;
width: 100%;
}
.admin-tag-input__tags {
display: contents;
}
.admin-tag-input__chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
height: 2.2rem;
padding: 0 0.4rem 0 0.7rem;
background: var(--admin-primary-light);
color: var(--admin-primary-text);
border: 1px solid rgba(var(--admin-primary-rgb), 0.25);
border-radius: var(--admin-radius-full);
font-size: var(--admin-fs-body);
font-weight: 500;
line-height: 1;
white-space: nowrap;
max-width: 180px;
}
.admin-tag-input__chip-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-tag-input__chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
padding: 0;
border: none;
background: transparent;
color: inherit;
opacity: 0.55;
border-radius: 50%;
cursor: pointer;
transition: background var(--admin-duration-short) var(--admin-ease), opacity var(--admin-duration-short) var(--admin-ease);
}
.admin-tag-input__chip-remove:hover {
background: rgba(var(--admin-primary-rgb), 0.18);
opacity: 1;
}
.admin-tag-input__field {
flex: 1 1 100px;
min-width: 100px;
height: 2.4rem;
padding: 0 var(--admin-space-2xs);
border: none;
outline: none;
background: transparent;
font-size: var(--admin-fs-body-lg);
font-family: inherit;
color: var(--admin-text);
}
.admin-tag-input__field::placeholder {
color: var(--admin-text-muted);
}
.admin-number-stepper {
display: inline-flex;
align-items: stretch;
align-self: flex-start;
height: var(--admin-size-input-height);
width: auto;
max-width: 100%;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
background: var(--admin-white);
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-number-stepper:focus-within {
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.admin-number-stepper__btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 3.8rem;
padding: 0;
border: none;
background: var(--admin-grey-50);
color: var(--admin-text-muted);
cursor: pointer;
font-family: inherit;
transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
user-select: none;
}
.admin-number-stepper__btn:hover:not(:disabled) {
background: var(--admin-grey-100);
color: var(--admin-text);
}
.admin-number-stepper__btn:active:not(:disabled) {
background: var(--admin-grey-200, #e5e7eb);
}
.admin-number-stepper__btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.admin-number-stepper__btn--minus {
border-right: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius) 0 0 var(--admin-radius);
}
.admin-number-stepper__btn--plus {
border-left: 1px solid var(--admin-border-light);
border-radius: 0 var(--admin-radius) var(--admin-radius) 0;
}
.admin-number-stepper__input {
flex: 0 1 auto;
display: inline-block;
width: auto;
min-width: 5ch;
field-sizing: content;
height: 100%;
padding: 0 var(--admin-space-xs);
border: none;
outline: none;
background: transparent;
font-size: var(--admin-fs-body-lg);
font-family: inherit;
color: var(--admin-text);
text-align: center;
-moz-appearance: textfield;
}
.admin-number-stepper__input::-webkit-inner-spin-button, .admin-number-stepper__input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.admin-number-stepper__suffix {
display: inline-flex;
align-items: center;
padding: 0 var(--admin-space-sm) 0 0;
font-size: var(--admin-fs-body);
color: var(--admin-text-muted);
white-space: nowrap;
}
.admin-char-counter__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space-sm);
}
.admin-char-counter__header .admin-form__label {
margin-bottom: 0;
}
.admin-char-counter__count {
display: inline-flex;
align-items: baseline;
gap: 0.1rem;
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.admin-char-counter__current {
font-weight: 600;
color: var(--admin-text);
transition: color var(--admin-duration-short) var(--admin-ease);
}
.admin-char-counter__current--warn {
color: var(--admin-warn-text, #92400e);
}
.admin-char-counter__current--limit {
color: var(--admin-error-text, #991b1b);
}
.admin-char-counter__sep {
color: var(--admin-border);
margin: 0 0.15rem;
}
.admin-char-counter__max {
color: var(--admin-text-muted);
}
.admin-char-counter__wrap {
position: relative;
}
.admin-char-counter__wrap textarea {
display: block;
width: 100%;
padding: var(--admin-space-sm) var(--admin-space);
min-height: var(--admin-size-editor-min-height);
resize: vertical;
font-size: var(--admin-fs-body-lg);
font-family: inherit;
line-height: 1.6;
color: var(--admin-text);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-char-counter__wrap textarea::placeholder {
color: var(--admin-text-muted);
}
.admin-char-counter__wrap textarea:focus {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.admin-char-counter__wrap--warn textarea {
border-color: var(--admin-warn, #d97706);
}
.admin-char-counter__wrap--limit textarea {
border-color: var(--admin-error, #dc2626);
}
.admin-intl-phone {
position: relative;
}
.admin-intl-phone .iti {
width: 100%;
display: block;
}
.admin-intl-phone .iti__selected-country {
height: 3.2rem;
padding: 0 var(--admin-space-xs) 0 var(--admin-space-sm);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-right: none;
border-radius: var(--admin-radius-sm) 0 0 var(--admin-radius-sm);
color: var(--admin-text);
gap: var(--admin-space-xs);
transition: border-color var(--admin-duration-short) var(--admin-ease);
}
.admin-intl-phone .iti__selected-country:hover:not(:disabled) {
border-color: var(--admin-border-strong);
}
.admin-intl-phone .iti__selected-country:focus {
outline: none;
border-color: var(--admin-border-focus);
}
.admin-intl-phone__input {
border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}
.admin-intl-phone .iti__dropdown-content {
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
background: var(--admin-card-bg);
box-shadow: var(--admin-elevation-2);
color: var(--admin-text);
}
.admin-intl-phone .iti__country {
color: var(--admin-text);
font-size: var(--admin-fs-body);
}
.admin-intl-phone .iti__country.iti__highlight, .admin-intl-phone .iti__country:hover {
background: var(--admin-grey-100);
}
.admin-intl-phone .iti__dial-code {
color: var(--admin-text-muted);
font-size: var(--admin-fs-sm);
}
.admin-intl-phone .iti__search-input {
border-bottom: 1px solid var(--admin-border-light);
color: var(--admin-text);
background: var(--admin-white);
font-family: inherit;
font-size: var(--admin-fs-body);
}
.admin-intl-phone .iti__search-input::placeholder {
color: var(--admin-text-muted);
}
.admin-rich-editor {
background: var(--admin-white);
border-radius: var(--admin-radius-sm);
overflow: visible;
position: relative;
--rich-editor-min-height: 24rem;
}
.admin-rich-editor__mount,
.admin-editor-quill.admin-quill-container {
position: relative;
}
.admin-rich-editor .ql-toolbar.ql-snow,
.admin-quill-toolbar.ql-snow {
align-items: center;
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-bottom: 0;
border-radius: var(--admin-radius-sm) var(--admin-radius-sm) 0 0;
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-xs) var(--admin-space);
overflow: visible;
padding: var(--admin-space-xs) var(--admin-space);
position: relative;
z-index: 30;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-formats,
.admin-quill-toolbar.ql-snow .ql-formats {
margin-right: 0;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker,
.admin-rich-editor .ql-toolbar.ql-snow button,
.admin-quill-toolbar.ql-snow .ql-picker,
.admin-quill-toolbar.ql-snow button {
color: var(--admin-text-secondary);
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker:hover, .admin-rich-editor .ql-toolbar.ql-snow .ql-picker:focus,
.admin-rich-editor .ql-toolbar.ql-snow button:hover,
.admin-rich-editor .ql-toolbar.ql-snow button:focus,
.admin-quill-toolbar.ql-snow .ql-picker:hover,
.admin-quill-toolbar.ql-snow .ql-picker:focus,
.admin-quill-toolbar.ql-snow button:hover,
.admin-quill-toolbar.ql-snow button:focus {
color: var(--admin-primary);
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-active,
.admin-quill-toolbar.ql-snow .ql-active {
color: var(--admin-primary);
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-active .ql-stroke,
.admin-quill-toolbar.ql-snow .ql-active .ql-stroke {
stroke: var(--admin-primary);
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-active .ql-fill,
.admin-quill-toolbar.ql-snow .ql-active .ql-fill {
fill: var(--admin-primary);
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font {
width: 13.8rem;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-header,
.admin-quill-toolbar.ql-snow .ql-picker.ql-header {
width: 11.2rem;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker-options,
.admin-quill-toolbar.ql-snow .ql-picker-options {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
box-shadow: var(--admin-elevation-2);
z-index: 80;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "Normal";
font-family: inherit;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
content: "Poppins";
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
content: "Poppins";
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=display]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=display]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=display]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=display]::before {
content: "Poppins";
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=poppins]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=poppins]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=poppins]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=poppins]::before {
content: "Poppins";
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=inter]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=inter]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=inter]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=inter]::before {
content: "Poppins";
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=noto]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=noto]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=noto]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=noto]::before {
content: "Poppins";
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=nanum]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=nanum]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=nanum]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=nanum]::before {
content: "Poppins";
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=cormorant]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=cormorant]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=cormorant]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=cormorant]::before {
content: "Poppins";
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=rounded]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=rounded]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=rounded]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=rounded]::before {
content: "Poppins";
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-container.ql-snow,
.admin-editor-quill.ql-container.ql-snow {
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: 0 0 var(--admin-radius-sm) var(--admin-radius-sm);
font-family: inherit;
font-size: var(--admin-fs-body);
overflow: visible;
}
.admin-rich-editor .ql-editor,
.admin-editor-quill.ql-container .ql-editor {
color: var(--admin-text);
line-height: 1.7;
padding: var(--admin-space-xl) var(--admin-space-2xl);
}
.admin-rich-editor .ql-editor.ql-blank::before,
.admin-editor-quill.ql-container .ql-editor.ql-blank::before {
color: var(--admin-text-muted);
font-style: normal;
left: var(--admin-space-2xl);
right: var(--admin-space-2xl);
}
.admin-rich-editor .ql-editor strong,
.admin-rich-editor .ql-editor b,
.admin-editor-quill.ql-container .ql-editor strong,
.admin-editor-quill.ql-container .ql-editor b {
font-weight: 700;
}
.admin-rich-editor .ql-editor em,
.admin-rich-editor .ql-editor i,
.admin-editor-quill.ql-container .ql-editor em,
.admin-editor-quill.ql-container .ql-editor i {
font-style: italic;
}
.admin-rich-editor .ql-editor u,
.admin-editor-quill.ql-container .ql-editor u {
text-decoration: underline;
text-underline-offset: 0.16em;
}
.admin-rich-editor .ql-editor s,
.admin-rich-editor .ql-editor strike,
.admin-editor-quill.ql-container .ql-editor s,
.admin-editor-quill.ql-container .ql-editor strike {
text-decoration: line-through;
}
.admin-rich-editor .ql-editor a,
.admin-editor-quill.ql-container .ql-editor a {
color: var(--admin-primary);
text-decoration: underline;
text-underline-offset: 0.16em;
}
.admin-rich-editor .ql-editor h1, .admin-rich-editor .ql-editor h2, .admin-rich-editor .ql-editor h3, .admin-rich-editor .ql-editor h4, .admin-rich-editor .ql-editor h5, .admin-rich-editor .ql-editor h6,
.admin-editor-quill.ql-container .ql-editor h1,
.admin-editor-quill.ql-container .ql-editor h2,
.admin-editor-quill.ql-container .ql-editor h3,
.admin-editor-quill.ql-container .ql-editor h4,
.admin-editor-quill.ql-container .ql-editor h5,
.admin-editor-quill.ql-container .ql-editor h6 {
color: var(--admin-text);
font-weight: 700;
}
.admin-rich-editor .ql-editor h1,
.admin-editor-quill.ql-container .ql-editor h1 {
font-size: var(--admin-fs-display);
margin: var(--admin-space-2xl) 0 var(--admin-space);
}
.admin-rich-editor .ql-editor h2,
.admin-editor-quill.ql-container .ql-editor h2 {
font-size: var(--admin-fs-2xl);
margin: var(--admin-space-xl) 0 var(--admin-space);
}
.admin-rich-editor .ql-editor h3,
.admin-editor-quill.ql-container .ql-editor h3 {
font-size: var(--admin-fs-xl);
margin: var(--admin-space-lg) 0 var(--admin-space-sm);
}
.admin-rich-editor .ql-editor h4,
.admin-editor-quill.ql-container .ql-editor h4 {
font-size: var(--admin-fs-lg);
margin: var(--admin-space) 0 var(--admin-space-sm);
}
.admin-rich-editor .ql-editor h5,
.admin-editor-quill.ql-container .ql-editor h5 {
font-size: var(--admin-fs-body-lg);
margin: var(--admin-space) 0 var(--admin-space-xs);
}
.admin-rich-editor .ql-editor h6,
.admin-editor-quill.ql-container .ql-editor h6 {
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm);
letter-spacing: 0;
margin: var(--admin-space) 0 var(--admin-space-xs);
text-transform: uppercase;
}
.admin-rich-editor .ql-editor .ql-font-serif,
.admin-editor-quill.ql-container .ql-editor .ql-font-serif {
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-monospace,
.admin-editor-quill.ql-container .ql-editor .ql-font-monospace {
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-display,
.admin-editor-quill.ql-container .ql-editor .ql-font-display {
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-poppins,
.admin-editor-quill.ql-container .ql-editor .ql-font-poppins {
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-inter,
.admin-editor-quill.ql-container .ql-editor .ql-font-inter {
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-noto,
.admin-editor-quill.ql-container .ql-editor .ql-font-noto {
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-nanum,
.admin-editor-quill.ql-container .ql-editor .ql-font-nanum {
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-cormorant,
.admin-editor-quill.ql-container .ql-editor .ql-font-cormorant {
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-rounded,
.admin-editor-quill.ql-container .ql-editor .ql-font-rounded {
font-family: "Poppins", sans-serif;
}
.admin-rich-editor .ql-editor p,
.admin-editor-quill.ql-container .ql-editor p {
margin: 0 0 var(--admin-space);
}
.admin-rich-editor .ql-editor blockquote,
.admin-editor-quill.ql-container .ql-editor blockquote {
border-left: 3px solid var(--admin-primary);
color: var(--admin-text-secondary);
margin: var(--admin-space) 0;
padding: var(--admin-space-2xs) 0 var(--admin-space-2xs) var(--admin-space-lg);
}
.admin-rich-editor .ql-editor code,
.admin-rich-editor .ql-editor pre.ql-syntax,
.admin-editor-quill.ql-container .ql-editor code,
.admin-editor-quill.ql-container .ql-editor pre.ql-syntax {
font-family: "Poppins", sans-serif;
font-size: 0.92em;
}
.admin-rich-editor .ql-editor code,
.admin-editor-quill.ql-container .ql-editor code {
background: var(--admin-grey-100);
border-radius: 3px;
color: var(--admin-accent-coral, var(--admin-primary));
padding: 0.1rem var(--admin-space-2xs);
}
.admin-rich-editor .ql-editor pre.ql-syntax,
.admin-editor-quill.ql-container .ql-editor pre.ql-syntax {
background: #0f172a;
border-radius: var(--admin-radius-sm);
color: #e2e8f0;
overflow-x: auto;
padding: var(--admin-space-lg) var(--admin-space-xl);
}
.admin-rich-editor .ql-editor img,
.admin-rich-editor .ql-editor video,
.admin-rich-editor .ql-editor iframe.ql-video,
.admin-editor-quill.ql-container .ql-editor img,
.admin-editor-quill.ql-container .ql-editor video,
.admin-editor-quill.ql-container .ql-editor iframe.ql-video {
border-radius: var(--admin-radius-sm);
box-shadow: var(--admin-elevation-1);
height: auto;
max-width: 100%;
}
.admin-rich-editor .ql-editor video,
.admin-rich-editor .ql-editor iframe.ql-video,
.admin-editor-quill.ql-container .ql-editor video,
.admin-editor-quill.ql-container .ql-editor iframe.ql-video {
display: block;
min-height: 18rem;
}
.admin-rich-editor .ql-editor .ql-media-draggable,
.admin-editor-quill.ql-container .ql-editor .ql-media-draggable {
cursor: grab;
outline: 0 solid transparent;
transition: outline-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-rich-editor .ql-editor .ql-media-draggable:focus-visible,
.admin-editor-quill.ql-container .ql-editor .ql-media-draggable:focus-visible {
outline: 2px solid var(--admin-primary);
outline-offset: 3px;
}
.admin-rich-editor .ql-editor .ql-media-draggable.is-dragging,
.admin-editor-quill.ql-container .ql-editor .ql-media-draggable.is-dragging {
cursor: grabbing;
opacity: 0.65;
}
.admin-rich-editor .ql-editor table,
.admin-editor-quill.ql-container .ql-editor table {
border-collapse: collapse;
font-size: var(--admin-fs-body);
margin: var(--admin-space-lg) 0;
width: 100%;
}
.admin-rich-editor .ql-editor td, .admin-rich-editor .ql-editor th,
.admin-editor-quill.ql-container .ql-editor td,
.admin-editor-quill.ql-container .ql-editor th {
border: 1px solid var(--admin-border-light);
padding: var(--admin-space-xs) var(--admin-space);
vertical-align: top;
}
.admin-rich-editor .ql-editor th,
.admin-editor-quill.ql-container .ql-editor th {
background: var(--admin-grey-50);
font-weight: 600;
text-align: left;
}
.admin-rich-editor .ql-editor {
min-height: var(--rich-editor-min-height);
}
.admin-editor-quill.ql-container .ql-editor {
min-height: var(--admin-size-editor-min-height);
}
.admin-quill-container.ql-snow .ql-tooltip {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
box-shadow: var(--admin-elevation-2);
max-width: min(42rem, 100vw - 2.4rem);
white-space: normal;
z-index: 90;
}
.admin-quill-container.ql-snow .ql-tooltip input[type=text] {
max-width: calc(100vw - 9rem);
}
.admin-quill-container.ql-snow .ql-out-bottom,
.admin-quill-container.ql-snow .ql-out-top {
visibility: visible;
}
.admin-quill-container.ql-snow .ql-drop-indicator {
background: var(--admin-primary);
border-radius: 9999px;
box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.14);
height: 2px;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translateY(-1px);
transition: opacity var(--admin-duration-short) var(--admin-ease);
z-index: 85;
}
.admin-quill-container.ql-snow .ql-drop-indicator.is-visible {
opacity: 1;
}
.admin-quill-container.ql-snow.is-file-dragging .ql-editor {
outline: 1px dashed var(--admin-primary);
outline-offset: -0.4rem;
}
.admin-rich-editor .qlbt-operation-menu,
.admin-quill-container .qlbt-operation-menu {
border-radius: var(--admin-radius-sm);
box-shadow: var(--admin-elevation-2);
z-index: 100;
}
.guide-demo .admin-rich-editor {
width: 100%;
--rich-editor-min-height: 28rem;
}
.admin-locale-tabs {
margin-bottom: 1.6rem;
}
.admin-locale-tabs__bar {
display: flex;
gap: 0.4rem;
padding: 0.4rem;
background: var(--admin-bg-soft, #f4f6f8);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
margin-bottom: 1.6rem;
flex-wrap: wrap;
}
.admin-locale-tabs__copy {
display: inline-flex;
align-items: center;
gap: var(--admin-space-xs);
margin-left: auto;
}
.admin-locale-tabs__tab {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.8rem 1.6rem;
background: transparent;
border: 0;
border-radius: calc(var(--admin-radius) - 0.2rem);
color: var(--admin-text-secondary);
font-size: 1.3rem;
font-weight: 600;
cursor: pointer;
transition: background 0.18s, color 0.18s;
}
.admin-locale-tabs__tab:hover {
background: rgba(var(--admin-primary-rgb), 0.06);
color: var(--admin-primary);
}
.admin-locale-tabs__tab:focus-visible {
outline: 2px solid var(--admin-primary);
outline-offset: 2px;
}
.admin-locale-tabs__tab--active {
background: var(--admin-white);
color: var(--admin-primary);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
cursor: default;
}
.admin-locale-tabs__tab--active:hover {
background: var(--admin-white);
}
.admin-locale-tabs__tab-code {
display: inline-block;
padding: 0.1rem 0.6rem;
background: rgba(var(--admin-primary-rgb), 0.1);
border-radius: var(--admin-radius-full);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--admin-primary);
}
.admin-locale-tabs__tab .locale-flag {
flex: none;
}
.admin-locale-tabs__tab--active .admin-locale-tabs__tab-code {
background: var(--admin-primary);
color: var(--admin-white);
}
.admin-locale-tabs__panels {
position: relative;
}
.admin-locale-tabs__panel {
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
padding: 1.6rem;
display: flex;
flex-direction: column;
gap: var(--admin-space-lg);
}
.admin-locale-tabs__panel--hidden {
display: none;
}
.admin-locale-tabs--split {
margin-bottom: 0;
}
.admin-locale-tabs--split .admin-card {
margin-bottom: 1.6rem;
}
.admin-locale-tabs--split .admin-card:last-child {
margin-bottom: 2.4rem;
}
.admin-locale-tabs--split .admin-locale-tabs__panel {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
}
.csg-wrap {
position: relative;
display: block;
}
.csg-trigger {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
width: 100%;
min-height: var(--admin-size-input-height);
padding: 0 var(--admin-space-sm) 0 var(--admin-space-lg);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
font-size: var(--admin-fs-body-lg);
font-family: inherit;
color: var(--admin-text);
cursor: pointer;
text-align: left;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.csg-trigger:hover {
border-color: var(--admin-border-strong);
}
.csg-trigger--open, .csg-trigger[aria-expanded=true] {
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
outline: none;
}
.csg-trigger__icon {
display: inline-flex;
align-items: center;
font-size: var(--admin-fs-xl);
color: var(--admin-primary);
line-height: 1;
flex-shrink: 0;
}
.csg-trigger__label {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csg-trigger__label--empty {
color: var(--admin-text-placeholder, var(--admin-text-secondary));
}
.csg-trigger__arrow {
flex-shrink: 0;
color: var(--admin-text-secondary);
transition: transform var(--admin-duration-short) var(--admin-ease);
}
.csg-trigger[aria-expanded=true] .csg-trigger__arrow {
transform: rotate(180deg);
}
.csg-panel {
position: absolute;
z-index: var(--admin-z-dropdown, 200);
top: calc(100% + 0.4rem);
left: 0;
min-width: 100%;
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
box-shadow: var(--admin-shadow-md);
padding: var(--admin-space-sm);
}
.csg-panel--up {
top: auto;
bottom: calc(100% + 0.4rem);
}
.csg-grid {
display: grid;
grid-template-columns: repeat(var(--csg-cols, 4), minmax(0, 1fr));
gap: var(--admin-space-xs);
list-style: none;
padding: 0;
margin: 0;
}
.csg-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: var(--admin-space-sm) var(--admin-space-xs);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
cursor: pointer;
text-align: center;
transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
user-select: none;
}
.csg-card:hover:not(.csg-card--disabled) {
border-color: var(--admin-border-strong);
background: var(--admin-bg-soft, #f4f6f8);
}
.csg-card--selected {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
}
.csg-card--disabled {
opacity: 0.4;
cursor: not-allowed;
}
.csg-card__icon {
font-size: var(--admin-fs-xl);
color: var(--admin-text);
line-height: 1;
}
.csg-card--selected .csg-card__icon {
color: var(--admin-primary);
}
.csg-card__label {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text);
line-height: 1.2;
}
.csg-card__desc {
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
line-height: 1.2;
}
.fp-locale-fields {
display: flex;
flex-direction: column;
gap: var(--admin-space-md);
}
.fp-input-row {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.fp-input-row__label {
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
}
.fp-input-row__input {
width: 100%;
padding: 0.5rem var(--admin-space-sm);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
font-size: var(--admin-fs-body);
color: var(--admin-text);
background: var(--admin-card-bg);
line-height: 1.4;
}
.fp-input-row__input:focus {
outline: none;
border-color: var(--admin-primary);
box-shadow: 0 0 0 2px var(--admin-primary-light);
}
.fp-toggle-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--admin-space-xs) 0;
font-size: var(--admin-fs-body);
}
.fp-toggle-row__label {
color: var(--admin-text);
}
.fp-toggle-switch {
position: relative;
display: inline-block;
width: 3.6rem;
height: 2rem;
flex-shrink: 0;
cursor: pointer;
}
.fp-toggle-switch__input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.fp-toggle-switch__input:checked + .fp-toggle-switch__slider {
background: var(--admin-primary);
}
.fp-toggle-switch__input:checked + .fp-toggle-switch__slider::before {
transform: translateX(1.6rem);
}
.fp-toggle-switch__input:focus + .fp-toggle-switch__slider {
box-shadow: 0 0 0 2px var(--admin-primary-light);
}
.fp-toggle-switch__slider {
position: absolute;
inset: 0;
background: var(--admin-border);
border-radius: 2rem;
transition: background 0.2s;
}
.fp-toggle-switch__slider::before {
content: "";
position: absolute;
left: 0.2rem;
top: 0.2rem;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: var(--admin-white);
transition: transform 0.2s;
}
.fp-options-card {
display: flex;
align-items: center;
gap: var(--admin-space);
width: 100%;
padding: var(--admin-space) var(--admin-space-lg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
background: var(--admin-card-bg);
color: var(--admin-text);
cursor: pointer;
transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease);
text-align: left;
}
.fp-options-card:hover {
background: var(--admin-bg-soft);
border-color: var(--admin-primary-border);
}
.fp-options-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.2rem;
height: 3.2rem;
border-radius: var(--admin-radius);
background: var(--admin-primary-light);
color: var(--admin-primary);
flex-shrink: 0;
font-size: var(--admin-fs-base);
}
.fp-options-card__text {
display: flex;
flex-direction: column;
gap: 0.2rem;
flex: 1;
min-width: 0;
}
.fp-options-card__label {
font-size: var(--admin-fs-body);
color: var(--admin-text);
font-weight: 600;
}
.fp-options-card__count {
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
}
.fp-options-card__chevron {
color: var(--admin-text-secondary);
font-size: var(--admin-fs-base);
}
.fp-options-root {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.fp-type-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--admin-space-xs);
}
.fp-type-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: var(--admin-space-sm) var(--admin-space-xs);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
cursor: pointer;
text-align: center;
transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
user-select: none;
}
.fp-type-card:hover {
border-color: var(--admin-border-strong);
background: var(--admin-bg-soft, #f4f6f8);
}
.fp-type-card--selected {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
}
.fp-type-card--selected .fp-type-card__icon {
color: var(--admin-primary);
}
.fp-type-card__radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.fp-type-card__icon {
font-size: var(--admin-fs-xl);
color: var(--admin-text);
line-height: 1;
}
.fp-type-card__text {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.fp-type-card__label {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text);
line-height: 1.2;
}
.fp-type-card__desc {
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
line-height: 1.2;
}
.fp-dynamic-sec {
display: contents;
}
.admin-btn--icon {
width: 3rem;
height: 3rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--admin-radius);
border: 1px solid var(--admin-border-light);
background: transparent;
color: var(--admin-text-secondary);
cursor: pointer;
font-size: var(--admin-fs-base);
}
.admin-btn--icon:hover {
background: var(--admin-bg-soft);
color: var(--admin-text);
border-color: var(--admin-border);
}
/* ===================================================
board-calendar (admin)
Same DOM classes as home/_ui-calendar.scss but
wired to admin design tokens. View partial:
resources/views/components/board-calendar.php
=================================================== */
.ui-cal-controls {
display: flex;
align-items: center;
gap: 1.2rem;
flex-wrap: wrap;
margin-bottom: 1.6rem;
}
.ui-cal-controls__nav {
display: flex;
align-items: center;
gap: 0.6rem;
}
.ui-cal-controls__month {
font-size: var(--admin-fs-lg, 1.6rem);
font-weight: 700;
color: var(--admin-text, #111);
min-width: 18rem;
text-align: center;
}
.ui-cal-controls__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.4rem;
height: 3.4rem;
border-radius: 50%;
border: 1px solid var(--admin-border, var(--admin-grey-200));
background: var(--admin-surface, #fff);
color: var(--admin-text-muted, var(--admin-grey-500));
font-size: var(--admin-fs-sm, 1.2rem);
cursor: pointer;
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ui-cal-controls__btn:hover, .ui-cal-controls__btn:focus-visible {
border-color: var(--admin-primary);
color: var(--admin-primary);
outline: none;
}
.ui-cal-controls__today {
padding: 0 1.4rem;
height: 3.4rem;
display: inline-flex;
align-items: center;
border-radius: var(--admin-radius-sm);
border: 1px solid var(--admin-border, var(--admin-grey-200));
background: var(--admin-surface, #fff);
font-size: var(--admin-fs-sm, 1.2rem);
font-weight: 600;
color: var(--admin-text, #111);
text-decoration: none;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.ui-cal-controls__today:hover, .ui-cal-controls__today:focus-visible {
border-color: var(--admin-primary);
color: var(--admin-primary);
outline: none;
}
.ui-calendar {
border: 1px solid var(--admin-border, var(--admin-grey-200));
border-radius: var(--admin-radius);
overflow: hidden;
background: var(--admin-surface, #fff);
}
.ui-calendar__header {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--admin-primary);
color: #fff;
}
.ui-calendar__dow {
padding: 1rem 0.4rem;
text-align: center;
font-size: var(--admin-fs-sm, 1.2rem);
font-weight: 700;
letter-spacing: 0.06em;
}
.ui-calendar__body {
display: flex;
flex-direction: column;
background: var(--admin-border, var(--admin-grey-200));
gap: 1px;
}
.ui-calendar__week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}
.ui-calendar__day {
background: var(--admin-surface, #fff);
min-height: 9rem;
padding: 0.6rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.ui-calendar__day--outside {
background: var(--admin-grey-50);
}
.ui-calendar__day--today .ui-calendar__day-num {
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background: var(--admin-primary);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ui-calendar__day-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
}
.ui-calendar__day-num {
font-size: var(--admin-fs-sm, 1.2rem);
font-weight: 600;
color: var(--admin-text, var(--admin-grey-700));
line-height: 1;
flex-shrink: 0;
}
.ui-calendar__add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
border: 1px dashed var(--admin-border, var(--admin-grey-300));
color: var(--admin-text-muted, var(--admin-grey-500));
background: transparent;
font-size: var(--admin-fs-sm, 1.2rem);
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ui-calendar__add:hover, .ui-calendar__add:focus-visible {
border-color: var(--admin-primary);
color: var(--admin-primary);
background: var(--admin-primary-light);
outline: none;
}
.ui-calendar__chips {
display: flex;
flex-direction: column;
gap: 0.3rem;
overflow: hidden;
}
.ui-calendar__chip {
display: block;
padding: 0.2rem 0.6rem;
border-radius: var(--admin-radius-xs);
font-size: var(--admin-fs-sm, 1.2rem);
font-weight: 600;
line-height: 1.4;
color: #fff;
background: var(--admin-primary);
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
transition: opacity 0.15s ease;
}
.ui-calendar__chip:hover, .ui-calendar__chip:focus-visible {
opacity: 0.85;
outline: none;
}
.ui-calendar__chip--pending {
background: var(--admin-warn);
}
.ui-calendar__chip--approved {
background: var(--admin-info);
}
.ui-calendar__chip--completed {
background: var(--admin-success);
}
.ui-calendar__chip[hidden] {
display: none;
}
.board-calendar-wrap {
display: block;
}
.admin-entity-picker {
display: inline-block;
position: relative;
}
.admin-entity-picker__trigger {
display: inline-flex;
align-items: center;
gap: var(--admin-space-sm);
min-width: 22rem;
min-height: var(--admin-size-input-height);
padding: 0 var(--admin-space) 0 var(--admin-space-lg);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
font-size: var(--admin-fs-body-lg);
font-family: inherit;
color: var(--admin-text);
cursor: pointer;
text-align: left;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-entity-picker__trigger:hover {
border-color: var(--admin-border-strong);
}
.admin-entity-picker__trigger:focus-visible {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.admin-entity-picker__current {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.admin-entity-picker__chevron {
flex-shrink: 0;
font-size: 1.1rem;
color: var(--admin-text-muted);
}
.admin-entity-picker__panel {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-entity-picker__search-row {
position: relative;
display: flex;
align-items: center;
}
.admin-entity-picker__search-icon {
position: absolute;
left: var(--admin-space);
color: var(--admin-text-muted);
font-size: 1.3rem;
pointer-events: none;
}
.admin-entity-picker__search {
width: 100%;
height: var(--admin-size-input-height);
padding: 0 var(--admin-space) 0 calc(var(--admin-space) + 1.6rem + var(--admin-space-xs));
font-size: var(--admin-fs-body-lg);
color: var(--admin-text);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
font-family: inherit;
}
.admin-entity-picker__search::placeholder {
color: var(--admin-text-muted);
}
.admin-entity-picker__search:focus {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.admin-entity-picker__search::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.admin-entity-picker__list {
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs);
margin: 0;
padding: 0;
list-style: none;
max-height: 50vh;
overflow-y: auto;
}
.admin-entity-picker__card {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
width: 100%;
padding: var(--admin-space-sm);
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
font-family: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-entity-picker__card:hover {
border-color: var(--admin-border-strong);
background: var(--admin-grey-50);
}
.admin-entity-picker__card:focus-visible {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.admin-entity-picker__card--selected {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
}
.admin-entity-picker__thumb {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: var(--admin-radius-sm);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
color: var(--admin-text-muted);
font-size: 1.6rem;
overflow: hidden;
}
.admin-entity-picker__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.admin-entity-picker__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.admin-entity-picker__name {
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.admin-entity-picker__sub {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.admin-entity-picker__check {
flex-shrink: 0;
color: var(--admin-primary);
font-size: 1.3rem;
}
.admin-entity-picker__empty,
.admin-entity-picker__no-result {
margin: 0;
padding: var(--admin-space-lg) 0;
text-align: center;
font-size: var(--admin-fs-body);
color: var(--admin-text-muted);
}
.admin-status-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space) var(--admin-space-lg);
margin: 0;
padding: 0;
list-style: none;
}
.admin-status-legend__item {
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs);
}
.admin-status-legend__dot {
width: 1rem;
height: 1rem;
border-radius: var(--admin-radius-full);
background: var(--admin-text-muted);
flex-shrink: 0;
}
.admin-status-legend__dot--pending {
background: var(--admin-warn);
}
.admin-status-legend__dot--approved {
background: var(--admin-info);
}
.admin-status-legend__dot--completed {
background: var(--admin-success);
}
.admin-status-legend__label {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-cal-filter {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-xs);
}
.admin-cal-filter__chip {
display: inline-flex;
align-items: center;
gap: var(--admin-space-3xs);
padding: var(--admin-space-3xs) var(--admin-space-sm);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-full);
background: var(--admin-white);
font-size: var(--admin-fs-sm);
font-family: inherit;
color: var(--admin-text-secondary);
cursor: pointer;
transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-cal-filter__chip::before {
content: "";
width: 0.8rem;
height: 0.8rem;
border-radius: var(--admin-radius-full);
background: currentColor;
opacity: 0.55;
}
.admin-cal-filter__chip:hover {
border-color: var(--admin-border-strong);
}
.admin-cal-filter__chip:focus-visible {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.admin-cal-filter__chip[aria-pressed=false] {
opacity: 0.5;
}
.admin-cal-filter__chip--pending {
color: var(--admin-warn);
}
.admin-cal-filter__chip--approved {
color: var(--admin-info);
}
.admin-cal-filter__chip--completed {
color: var(--admin-success);
}
.admin-cal-filter__chip--all {
color: var(--admin-text-secondary);
}
.admin-cal-filter__chip.is-active {
color: var(--admin-text-inverse);
border-color: transparent;
}
.admin-cal-filter__chip.is-active::before {
opacity: 1;
background: var(--admin-white);
}
.admin-cal-filter__chip--pending.is-active {
background: var(--admin-warn);
}
.admin-cal-filter__chip--approved.is-active {
background: var(--admin-info);
}
.admin-cal-filter__chip--completed.is-active {
background: var(--admin-success);
}
.admin-cal-filter__chip--all.is-active {
background: var(--admin-text-secondary);
}
.admin-tooltip {
position: absolute;
z-index: 1000;
max-width: 28rem;
padding: var(--admin-space-xs) var(--admin-space-sm);
border-radius: var(--admin-radius-sm);
background: var(--admin-text, #111827);
color: var(--admin-white, #fff);
box-shadow: var(--admin-shadow-lg, 0 1.2rem 3rem rgba(15, 23, 42, 0.18));
font-size: var(--admin-fs-xs);
font-weight: 600;
line-height: 1.45;
pointer-events: none;
}
.admin-tooltip[hidden] {
display: none;
}
.admin-db__body {
display: flex;
flex-direction: column;
gap: var(--admin-space-3xl);
}
.admin-db__group-title {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--admin-text-muted);
margin-bottom: var(--admin-space-lg);
}
.admin-db__group-title-bar {
display: inline-block;
width: 3px;
height: 1.4em;
border-radius: 2px;
background: var(--admin-primary);
flex-shrink: 0;
}
.admin-db__group-title-bar--orange {
background: var(--admin-accent-coral);
}
.admin-db__group-title-bar--grey {
background: var(--admin-grey-300);
}
.admin-db__cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--admin-space-lg);
}
@media (max-width: 768px) {
.admin-db__cards {
grid-template-columns: 1fr;
gap: var(--admin-space-sm);
}
}
.admin-db__card {
display: flex;
align-items: center;
gap: var(--admin-space-lg);
padding: 2rem 2.2rem;
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-lg);
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease), transform var(--admin-duration-short) var(--admin-ease);
}
.admin-db__card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: transparent;
border-radius: var(--admin-radius-lg) 0 0 var(--admin-radius-lg);
transition: background var(--admin-duration-short) var(--admin-ease);
}
.admin-db__card:hover {
border-color: rgba(var(--admin-primary-rgb), 0.2);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
transform: translateY(-2px);
}
.admin-db__card:hover::before {
background: var(--admin-primary);
}
.admin-db__card:hover .admin-db__card-arrow {
opacity: 1;
transform: translateX(2px);
}
.admin-db__card:hover .admin-db__card-title {
color: var(--admin-primary);
}
.admin-db__card--alert {
background: color-mix(in srgb, var(--admin-accent-coral) 4%, var(--admin-card-bg));
border-color: color-mix(in srgb, var(--admin-accent-coral) 22%, var(--admin-border-light));
}
.admin-db__card--alert::before {
background: var(--admin-accent-coral);
}
.admin-db__card--alert .admin-db__card-title {
color: var(--admin-text);
}
.admin-db__card--alert .admin-db__card-desc {
color: var(--admin-text-secondary);
}
.admin-db__card--alert:hover {
border-color: var(--admin-accent-coral);
box-shadow: 0 4px 20px color-mix(in srgb, var(--admin-accent-coral) 18%, transparent);
}
.admin-db__card--alert:hover .admin-db__card-title {
color: var(--admin-accent-coral);
}
.admin-db__card--reply {
padding-right: 5.2rem;
}
.admin-db__card--reply .admin-db__card-title {
display: block;
font-size: var(--admin-fs-body-lg);
letter-spacing: -0.02em;
}
.admin-db__card--reply .admin-db__card-arrow {
display: none;
}
.admin-db__card-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 5rem;
height: 5rem;
border-radius: 1.4rem;
font-size: 2rem;
}
.admin-db__card-icon--blue {
background: color-mix(in srgb, var(--admin-primary) 14%, var(--admin-card-bg));
color: var(--admin-primary);
}
.admin-db__card-icon--teal {
background: color-mix(in srgb, var(--admin-accent-teal) 14%, var(--admin-card-bg));
color: var(--admin-accent-teal);
}
.admin-db__card-icon--purple {
background: color-mix(in srgb, var(--admin-accent-purple) 14%, var(--admin-card-bg));
color: var(--admin-accent-purple);
}
.admin-db__card-icon--green {
background: color-mix(in srgb, var(--admin-success) 14%, var(--admin-card-bg));
color: var(--admin-success);
}
.admin-db__card-icon--orange {
background: color-mix(in srgb, var(--admin-accent-coral) 14%, var(--admin-card-bg));
color: var(--admin-accent-coral);
}
.admin-db__card-icon--amber {
background: color-mix(in srgb, var(--admin-premium) 14%, var(--admin-card-bg));
color: var(--admin-premium);
}
.admin-db__card-icon--cyan {
background: color-mix(in srgb, var(--admin-accent-cyan) 14%, var(--admin-card-bg));
color: var(--admin-accent-cyan);
}
.admin-db__card-icon--red {
background: color-mix(in srgb, var(--admin-error) 14%, var(--admin-card-bg));
color: var(--admin-error);
}
.admin-db__card-body {
display: flex;
flex-direction: column;
gap: 0.3rem;
flex: 1;
min-width: 0;
}
.admin-db__card-title {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
font-size: var(--admin-fs-body-xl);
font-weight: 700;
color: var(--admin-text);
line-height: 1.3;
transition: color var(--admin-duration-short) var(--admin-ease);
}
.admin-db__card-title-text {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-db__card-desc {
font-size: var(--admin-fs-body);
color: var(--admin-text-muted);
line-height: 1.5;
}
.admin-db__card-reply-summary {
display: flex;
align-items: center;
gap: var(--admin-space-2xs);
min-width: 0;
overflow: hidden;
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm);
line-height: 1.4;
white-space: nowrap;
}
.admin-db__card-reply-summary > span:last-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-db__card-reply-name {
color: var(--admin-text);
font-weight: 600;
}
.admin-db__card-reply-meta {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
min-width: 0;
color: var(--admin-text-muted);
font-size: var(--admin-fs-xs);
line-height: 1.4;
}
.admin-db__card-reply-subject {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-db__card-reply-time {
flex: 0 0 auto;
}
.admin-db__card-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0 0.5rem;
background: var(--admin-accent-coral);
color: var(--admin-on-primary, #fff);
border-radius: var(--admin-radius-full);
font-size: 1.1rem;
font-weight: 700;
line-height: 1;
}
.admin-db__card-badge--reply {
position: absolute;
top: 2rem;
right: 2.2rem;
}
.admin-db__card-arrow {
color: var(--admin-text-muted);
font-size: 1.2rem;
flex-shrink: 0;
opacity: 0;
transition: opacity var(--admin-duration-short) var(--admin-ease), transform var(--admin-duration-short) var(--admin-ease);
}
.admin-stat-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--admin-space-lg);
margin-bottom: var(--admin-space-2xl);
}
@media (max-width: 1280px) {
.admin-stat-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.admin-stat-cards {
grid-template-columns: repeat(2, 1fr);
gap: var(--admin-space-sm);
}
}
.admin-stat-card {
display: flex;
align-items: center;
gap: 1.6rem;
padding: 2.4rem;
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-lg);
box-shadow: var(--admin-elevation-1);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.admin-stat-card:hover {
border-color: rgba(var(--admin-primary-rgb), 0.35);
box-shadow: 0 4px 12px rgba(var(--admin-primary-rgb), 0.1);
transform: translateY(-2px);
}
.admin-stat-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 6rem;
height: 6rem;
border-radius: 1.4rem;
flex-shrink: 0;
font-size: 2.2rem;
transition: all 0.2s ease;
}
.admin-stat-card__icon--blue {
background: color-mix(in srgb, var(--admin-primary) 14%, var(--admin-card-bg));
color: var(--admin-primary);
}
.admin-stat-card__icon--green {
background: color-mix(in srgb, var(--admin-success) 14%, var(--admin-card-bg));
color: var(--admin-success);
}
.admin-stat-card__icon--orange {
background: color-mix(in srgb, var(--admin-premium) 14%, var(--admin-card-bg));
color: var(--admin-premium);
}
.admin-stat-card__icon--yellow {
background: color-mix(in srgb, var(--admin-warn) 14%, var(--admin-card-bg));
color: var(--admin-warn-text);
}
.admin-stat-card__icon--red {
background: color-mix(in srgb, var(--admin-error) 14%, var(--admin-card-bg));
color: var(--admin-error);
}
.admin-stat-card__icon--purple {
background: color-mix(in srgb, var(--admin-accent-purple) 14%, var(--admin-card-bg));
color: var(--admin-accent-purple);
}
.admin-stat-card__icon--teal {
background: color-mix(in srgb, var(--admin-accent-teal) 14%, var(--admin-card-bg));
color: var(--admin-accent-teal);
}
.admin-stat-card__icon--cyan {
background: color-mix(in srgb, var(--admin-accent-cyan) 14%, var(--admin-card-bg));
color: var(--admin-accent-cyan);
}
.admin-stat-card__body {
flex: 1;
min-width: 0;
}
.admin-stat-card__label {
font-size: 1.3rem;
font-weight: 500;
color: var(--admin-text-secondary);
margin-bottom: 0.6rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.admin-stat-card__value {
font-size: 2.4rem;
font-weight: 700;
color: var(--admin-text);
line-height: 1.2;
letter-spacing: -0.02em;
word-break: break-word;
}
.admin-stat-card__sub {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
margin-top: var(--admin-space-3xs);
}
@media (max-width: 768px) {
.admin-stat-card {
padding: 1.4rem;
gap: 1rem;
}
.admin-stat-card__icon {
width: 4.4rem;
height: 4.4rem;
border-radius: 1rem;
font-size: 1.8rem;
}
.admin-stat-card__value {
font-size: var(--admin-fs-xl);
}
}
.admin-dash-section {
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
margin-bottom: var(--admin-space-xl);
overflow: hidden;
}
.admin-dash-section__hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--admin-space-lg) var(--admin-space-2xl);
border-bottom: 1px solid var(--admin-border-light);
background: var(--admin-grey-50);
}
.admin-dash-section__title {
font-size: var(--admin-fs-body-lg);
font-weight: 700;
color: var(--admin-text);
}
.admin-dash-section__meta {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-dash-section__body {
padding: 0;
}
.admin-dash-section table {
width: 100%;
border-collapse: collapse;
font-size: var(--admin-fs-body);
}
.admin-dash-section table thead th {
padding: var(--admin-space-sm) var(--admin-space-xl);
background: var(--admin-grey-50);
border-bottom: 1px solid var(--admin-border-light);
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-secondary);
text-align: left;
white-space: nowrap;
}
.admin-dash-section table tbody td {
padding: var(--admin-space-sm) var(--admin-space-xl);
border-bottom: 1px solid var(--admin-border-light);
color: var(--admin-text);
vertical-align: middle;
}
.admin-dash-section table tbody tr:last-child td {
border-bottom: none;
}
.admin-dash-section table tbody tr:hover td {
background: var(--admin-grey-50);
}
.admin-dash-section__empty {
padding: var(--admin-space-3xl);
text-align: center;
color: var(--admin-text-muted);
font-size: var(--admin-fs-body);
}
.admin-dash-filter {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--admin-space-lg);
padding: var(--admin-space-xl) var(--admin-space-2xl);
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
margin-bottom: var(--admin-space-xl);
}
.admin-dash-filter__group {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
flex: 1;
min-width: 160px;
}
.admin-dash-filter__label {
font-size: var(--admin-fs-sm);
font-weight: 500;
color: var(--admin-text-secondary);
}
.admin-dash-filter__actions {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding-bottom: 0;
}
@media (max-width: 768px) {
.admin-dash-filter {
flex-direction: column;
gap: var(--admin-space);
}
.admin-dash-filter__group {
min-width: 100%;
}
.admin-dash-filter__actions {
width: 100%;
}
}
[data-theme=light-notion] .admin-db__group-title-bar--orange,
[data-theme=dark-notion] .admin-db__group-title-bar--orange {
background: var(--admin-primary);
}
[data-theme=light-notion] .admin-db__card-icon,
[data-theme=dark-notion] .admin-db__card-icon {
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
}
[data-theme=light-notion] .admin-db__card--alert,
[data-theme=dark-notion] .admin-db__card--alert {
background: var(--admin-card-bg);
border-color: var(--admin-border-light);
}
[data-theme=light-notion] .admin-db__card--alert::before,
[data-theme=dark-notion] .admin-db__card--alert::before {
background: var(--admin-primary);
}
[data-theme=light-notion] .admin-db__card--alert:hover,
[data-theme=dark-notion] .admin-db__card--alert:hover {
border-color: var(--admin-border-strong);
box-shadow: var(--admin-elevation-1);
}
[data-theme=light-notion] .admin-db__card--alert:hover .admin-db__card-title,
[data-theme=dark-notion] .admin-db__card--alert:hover .admin-db__card-title {
color: var(--admin-text);
}
[data-theme=light-notion] .admin-db__card-badge,
[data-theme=dark-notion] .admin-db__card-badge {
background: var(--admin-primary);
color: var(--admin-on-primary);
}
.admin-auth {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--admin-body-bg);
padding: var(--admin-space-lg);
}
.admin-auth__wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--admin-space-sm);
width: 100%;
max-width: 440px;
}
.admin-auth__card {
width: 100%;
padding: 2.4rem 2.4rem 2rem;
background: var(--admin-card-bg);
border-radius: var(--admin-radius-lg);
border: 1px solid var(--admin-border);
box-shadow: none;
}
.admin-auth__logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.6rem;
}
.admin-auth__logo .admin-auth__logo-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--admin-radius-sm);
background: var(--admin-primary);
color: var(--admin-on-primary);
font-size: 1.2rem;
flex-shrink: 0;
}
.admin-auth__logo .admin-auth__logo-text {
font-size: 1.8rem;
font-weight: 700;
color: var(--admin-text);
letter-spacing: -0.02em;
line-height: 1;
}
.admin-auth__title {
margin: 0 0 0.6rem;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: -0.02em;
text-align: center;
color: var(--admin-text);
}
.admin-auth__form {
margin: 0;
}
.admin-auth__form-group {
margin-bottom: var(--admin-space-sm);
}
.admin-auth__label {
display: block;
margin-bottom: var(--admin-space-2xs);
font-size: var(--admin-fs-sm);
font-weight: 500;
color: var(--admin-text);
letter-spacing: 0.01em;
}
.admin-auth__input {
width: 100%;
height: var(--admin-size-input-height);
padding: 0.9rem 1.2rem;
border: 1px solid var(--admin-border);
border-radius: 0.6rem;
font-size: var(--admin-fs-body-lg);
font-family: inherit;
box-sizing: border-box;
color: var(--admin-text);
background: var(--admin-white);
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-auth__input::placeholder {
color: var(--admin-text-muted);
}
.admin-auth__input:hover:not(:disabled):not(:focus) {
border-color: rgba(var(--admin-primary-rgb), 0.4);
}
.admin-auth__input:focus {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: 0 0 0 0.2rem rgba(var(--admin-primary-rgb), 0.1);
}
.admin-auth__password-wrap {
position: relative;
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: nowrap;
min-height: var(--admin-size-input-height);
height: auto;
border-radius: 0.6rem;
border: 1px solid var(--admin-border);
background: var(--admin-white);
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
overflow: hidden;
}
.admin-auth__password-wrap:hover {
border-color: rgba(var(--admin-primary-rgb), 0.4);
}
.admin-auth__password-wrap:focus-within {
border-color: var(--admin-border-focus);
box-shadow: 0 0 0 0.2rem rgba(var(--admin-primary-rgb), 0.1);
}
.admin-auth__password-wrap .admin-auth__input {
flex: 1 1 auto;
min-width: 0;
min-height: var(--admin-size-input-height);
height: auto;
border: none;
border-radius: 0;
padding: 0.9rem var(--admin-size-input-height) 0.9rem 1.2rem;
background: transparent;
box-shadow: none;
}
.admin-auth__password-wrap .admin-auth__input:focus {
box-shadow: none;
}
.admin-auth__password-toggle {
flex: 0 0 var(--admin-size-input-height);
width: var(--admin-size-input-height);
min-width: var(--admin-size-input-height);
min-height: var(--admin-size-input-height);
align-self: stretch;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: none;
border-left: 1px solid var(--admin-border-light);
background: transparent;
color: var(--admin-text-muted);
cursor: pointer;
font: inherit;
line-height: 1;
-webkit-appearance: none;
appearance: none;
transition: color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-auth__password-toggle:hover {
color: var(--admin-text-secondary);
background: var(--admin-state-hover);
}
.admin-auth__password-toggle:active {
background: var(--admin-state-pressed);
}
.admin-auth__password-toggle:focus {
outline: none;
}
.admin-auth__password-toggle:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: -2px;
}
.admin-auth__password-toggle .admin-auth__toggle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.admin-auth__password-toggle .admin-auth__toggle-icon i {
font-size: var(--admin-fs-body);
}
.admin-auth__link {
font-size: var(--admin-fs-body);
font-weight: 500;
color: var(--admin-primary);
text-decoration: none;
border-radius: var(--admin-radius-xs);
padding: var(--admin-space-3xs) var(--admin-space-2xs);
margin: calc(var(--admin-space-3xs) * -1) calc(var(--admin-space-2xs) * -1);
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-auth__link:hover {
color: var(--admin-primary-hover);
background: var(--admin-state-hover);
}
.admin-auth__link:active {
background: var(--admin-state-pressed);
}
.admin-auth__link:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: 2px;
}
.admin-auth__submit {
width: 100%;
padding: 0.85rem var(--admin-space);
margin-top: var(--admin-space-sm);
background: var(--admin-primary);
color: var(--admin-on-primary);
border: none;
border-radius: var(--admin-radius-sm);
font-size: var(--admin-fs-body-lg);
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
font-family: inherit;
transition: background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-auth__submit:hover {
background: var(--admin-primary-hover);
}
.admin-auth__submit:active {
background: var(--admin-grey-900);
}
.admin-auth__submit:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: var(--admin-focus-ring-offset);
}
.admin-auth__below-card {
width: 100%;
padding: 1.2rem 2rem;
background: var(--admin-card-bg);
border-radius: var(--admin-radius-lg);
border: 1px solid var(--admin-border);
text-align: center;
}
.admin-auth__below-card-text {
margin: 0;
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
}
.admin-auth__logo {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--admin-space-lg);
}
.admin-auth__logo .admin-auth__logo-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--admin-radius);
background: var(--admin-primary);
color: var(--admin-on-primary);
font-size: 1.5rem;
}
.admin-auth__subtitle {
margin: 0 0 1.6rem;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
text-align: center;
line-height: 1.5;
}
.admin-auth__checkrow {
display: flex;
align-items: center;
gap: var(--admin-space-lg);
}
.admin-auth__divider {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
margin: 1.4rem 0;
font-size: var(--admin-fs-xs);
font-weight: 400;
color: var(--admin-text-muted);
letter-spacing: 0.06em;
}
.admin-auth__divider::before, .admin-auth__divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--admin-border);
}
.admin-auth__social-group {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.admin-auth__social-btn {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
padding: 0.85rem 1.2rem;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
background: var(--admin-white);
color: var(--admin-text);
font-size: var(--admin-fs-body);
font-weight: 500;
font-family: inherit;
cursor: pointer;
text-decoration: none;
transition: background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-auth__social-btn:hover {
background: #f8f8f8;
border-color: #bbb;
}
.admin-auth__social-btn:active {
background: #f0f0f0;
}
.admin-auth__social-btn:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: var(--admin-focus-ring-offset);
}
.admin-auth__social-btn .admin-auth__social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.admin-auth__social-btn .admin-auth__social-icon img, .admin-auth__social-btn .admin-auth__social-icon svg {
width: 18px;
height: 18px;
}
.admin-auth__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
tab-index: -1;
}
.admin-auth__sso-label {
margin: 0 0 var(--admin-space-sm);
font-size: var(--admin-fs-xs);
font-weight: 500;
color: var(--admin-text-muted);
text-align: center;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-auth__otp-input {
width: 100%;
padding: var(--admin-space) var(--admin-space-lg);
border: 1px solid var(--admin-outline-variant);
border-radius: var(--admin-radius);
font-size: 1.75rem;
font-family: "Poppins", sans-serif;
font-weight: 600;
letter-spacing: 0.4em;
text-align: center;
box-sizing: border-box;
color: var(--admin-text);
background: var(--admin-white);
transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-auth__otp-input::placeholder {
color: var(--admin-text-muted);
letter-spacing: 0.2em;
font-size: var(--admin-fs-body-lg);
}
.admin-auth__otp-input:focus {
outline: none;
border-color: var(--admin-primary);
border-width: 2px;
box-shadow: 0 0 0 1px var(--admin-primary);
}
.admin-auth__otp-group {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
.admin-auth__backup-toggle {
display: block;
margin-top: var(--admin-space);
text-align: center;
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
cursor: pointer;
background: none;
border: none;
padding: 0;
font-family: inherit;
text-decoration: underline;
}
.admin-auth__backup-toggle:hover {
color: var(--admin-text-secondary);
}
.admin-auth__backup-codes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--admin-space-sm);
margin: var(--admin-space-sm) 0;
}
.admin-auth__backup-codes .admin-auth__backup-code {
padding: var(--admin-space-xs) var(--admin-space-sm);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-xs);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text);
text-align: center;
letter-spacing: 0.1em;
}
.admin-auth__qr-wrap {
display: flex;
justify-content: center;
margin: var(--admin-space-lg) 0;
}
.admin-auth__qr-wrap img {
width: 200px;
height: 200px;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
}
.admin-auth__secret-key {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-sm);
font-weight: 600;
letter-spacing: 0.15em;
color: var(--admin-text);
word-break: break-all;
cursor: pointer;
user-select: all;
}
.admin-auth__submit--link {
display: block;
text-align: center;
text-decoration: none;
}
.admin-auth__submit--mt {
margin-top: var(--admin-space-sm);
}
.admin-auth__step {
margin: 0 0 var(--admin-space);
}
.admin-auth__step .admin-auth__step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--admin-primary);
color: var(--admin-on-primary);
font-size: var(--admin-fs-xs);
font-weight: 700;
flex-shrink: 0;
margin-right: var(--admin-space-xs);
}
.admin-auth__step .admin-auth__step-label {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text);
}
.admin-auth__step-header {
display: flex;
align-items: center;
margin-bottom: var(--admin-space-xs);
}
.admin-auth__back-link {
display: block;
text-align: center;
margin-top: var(--admin-space);
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
text-decoration: none;
transition: color var(--admin-duration) var(--admin-ease);
}
.admin-auth__back-link:hover {
color: var(--admin-text-secondary);
text-decoration: underline;
}
.admin-auth__step--done .admin-auth__step-num {
background: var(--admin-success, #16a34a);
color: #fff;
font-size: var(--admin-fs-xs);
}
.admin-auth__step--done .admin-auth__step-label {
color: var(--admin-text-muted);
font-weight: 400;
}
.admin-auth__step--active .admin-auth__step-num {
background: var(--admin-primary);
color: var(--admin-on-primary);
}
.admin-auth__step--active .admin-auth__step-label {
color: var(--admin-text);
font-weight: 600;
}
.admin-auth__steps {
margin-bottom: var(--admin-space-lg);
}
.admin-auth__send-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--admin-space-xs);
width: 100%;
padding: 0.7rem var(--admin-space);
margin-bottom: var(--admin-space-sm);
background: var(--admin-white);
color: var(--admin-primary);
border: 1.5px solid var(--admin-primary);
border-radius: var(--admin-radius-sm);
font-size: var(--admin-fs-body);
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-auth__send-btn:hover {
background: var(--admin-primary);
color: var(--admin-on-primary);
}
.admin-auth__send-btn:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: var(--admin-focus-ring-offset);
}
.admin-auth__send-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: var(--admin-white);
color: var(--admin-text-muted);
border-color: var(--admin-border-light);
}
.admin-auth__hint {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin: 0 0 var(--admin-space-sm);
padding: var(--admin-space-xs) var(--admin-space-sm);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-xs);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.5;
}
.admin-auth__hint strong {
color: var(--admin-text);
font-weight: 600;
}
.admin-auth__hint i {
flex-shrink: 0;
color: var(--admin-primary);
}
.admin-auth__channel-group {
border: none;
padding: 0;
margin: 0 0 var(--admin-space-sm);
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-auth__channel-legend {
display: block;
margin-bottom: var(--admin-space-xs);
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text);
}
.admin-auth__channel-option {
display: flex;
align-items: flex-start;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space);
border: 1.5px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
cursor: pointer;
transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-auth__channel-option:has(.admin-auth__channel-radio:checked) {
border-color: var(--admin-primary);
background: rgba(var(--admin-primary-rgb), 0.04);
}
.admin-auth__channel-option:hover:not(:has(.admin-auth__channel-radio:checked)) {
border-color: #aaa;
background: var(--admin-state-hover);
}
.admin-auth__channel-radio {
width: 16px;
height: 16px;
margin: 2px 0 0;
flex-shrink: 0;
accent-color: var(--admin-primary);
cursor: pointer;
}
.admin-auth__channel-label {
display: flex;
flex-direction: column;
gap: var(--admin-space-3xs);
cursor: pointer;
flex: 1;
}
.admin-auth__channel-label i {
display: none;
}
.admin-auth__channel-name {
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text);
}
.admin-auth__channel-desc {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-auth__steps--timeline {
margin-bottom: var(--admin-space-lg);
display: flex;
flex-direction: column;
gap: 0;
}
.admin-auth__steps--timeline .admin-auth__step {
display: flex;
gap: var(--admin-space-sm);
margin: 0;
}
.admin-auth__step-connector {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 28px;
}
.admin-auth__step-dot {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--admin-grey-200);
color: var(--admin-text-muted);
flex-shrink: 0;
z-index: 1;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-auth__step-dot .admin-auth__step-num {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--admin-fs-xs);
font-weight: 700;
line-height: 1;
width: 100%;
height: 100%;
margin: 0;
background: none;
color: inherit;
border-radius: 0;
}
.admin-auth__step-line {
flex: 1;
width: 2px;
background: var(--admin-grey-200);
margin: 2px 0;
min-height: 16px;
transition: background var(--admin-duration) var(--admin-ease);
}
.admin-auth__step-line.admin-auth__step-line--done {
background: var(--admin-success, #16a34a);
}
.admin-auth__step-content {
flex: 1;
min-width: 0;
padding-bottom: var(--admin-space-md);
}
.admin-auth__steps--timeline .admin-auth__step-header {
display: flex;
align-items: center;
min-height: 28px;
margin-bottom: 0;
}
.admin-auth__steps--timeline .admin-auth__step-label {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-muted);
transition: color var(--admin-duration) var(--admin-ease);
}
.admin-auth__step-body {
margin-top: var(--admin-space-sm);
}
.admin-auth__steps--timeline .admin-auth__step--done .admin-auth__step-dot {
background: var(--admin-success, #16a34a);
color: #fff;
}
.admin-auth__steps--timeline .admin-auth__step--done .admin-auth__step-label {
color: var(--admin-text-muted);
font-weight: 400;
}
.admin-auth__steps--timeline .admin-auth__step--active .admin-auth__step-dot {
background: var(--admin-primary);
color: var(--admin-on-primary);
box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.18);
}
.admin-auth__steps--timeline .admin-auth__step--active .admin-auth__step-label {
color: var(--admin-text);
font-weight: 600;
}
.admin-auth__steps--timeline .admin-auth__step--pending .admin-auth__step-dot {
background: var(--admin-grey-100);
color: var(--admin-text-muted);
border: 1.5px dashed var(--admin-border-light);
}
.admin-auth__steps--timeline .admin-auth__step--pending .admin-auth__step-label {
color: var(--admin-text-muted);
font-weight: 400;
}
.admin-auth__step-next-btn {
display: inline-flex;
align-items: center;
gap: var(--admin-space-xs);
margin-top: var(--admin-space-sm);
padding: 0.5rem var(--admin-space);
background: var(--admin-primary);
color: var(--admin-on-primary);
border: none;
border-radius: var(--admin-radius-sm);
font-size: var(--admin-fs-body);
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease);
}
.admin-auth__step-next-btn:hover {
background: var(--admin-primary-hover);
}
.admin-auth__step-next-btn:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: var(--admin-focus-ring-offset);
}
.admin-auth__channel-cards {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
margin-bottom: var(--admin-space-sm);
}
.admin-auth__channel-card {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space);
border: 1.5px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
cursor: pointer;
user-select: none;
transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-auth__channel-card:hover {
border-color: #aaa;
background: var(--admin-state-hover);
}
.admin-auth__channel-card:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: var(--admin-focus-ring-offset);
}
.admin-auth__channel-card[aria-checked=true] {
border-color: var(--admin-primary);
background: rgba(var(--admin-primary-rgb), 0.05);
box-shadow: 0 0 0 1px var(--admin-primary);
}
.admin-auth__channel-card--disabled {
opacity: 0.48;
cursor: not-allowed;
pointer-events: none;
}
.admin-auth__channel-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--admin-radius-xs);
background: var(--admin-grey-100);
flex-shrink: 0;
}
.admin-auth__channel-card-icon i {
font-size: 1.1rem;
color: var(--admin-text-secondary);
}
.admin-auth__channel-card[aria-checked=true] .admin-auth__channel-card-icon {
background: rgba(var(--admin-primary-rgb), 0.1);
}
.admin-auth__channel-card[aria-checked=true] .admin-auth__channel-card-icon i {
color: var(--admin-primary);
}
.admin-auth__channel-card-text {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.admin-auth__channel-badge--soon {
flex-shrink: 0;
padding: 2px 8px;
border-radius: 99px;
background: var(--admin-grey-200);
color: var(--admin-text-muted);
font-size: var(--admin-fs-2xs, 1rem);
font-weight: 600;
letter-spacing: 0.02em;
}
.admin-auth__totp-guide {
margin: 0 0 var(--admin-space-sm);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.5;
}
.admin-auth__totp-qr-wrap {
display: flex;
justify-content: center;
margin: var(--admin-space-sm) 0;
}
.admin-auth__totp-qr {
width: 200px;
height: 200px;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
display: block;
}
.admin-auth__totp-or {
margin: var(--admin-space-sm) 0 var(--admin-space-xs);
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
text-align: center;
}
.admin-auth__totp-secret {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-sm);
font-weight: 600;
letter-spacing: 0.12em;
color: var(--admin-text);
word-break: break-all;
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-auth__totp-secret:hover {
background: var(--admin-grey-100);
border-color: var(--admin-primary);
}
.admin-auth__totp-secret i:first-child {
color: var(--admin-primary);
flex-shrink: 0;
}
.admin-auth__totp-secret span {
flex: 1;
min-width: 0;
}
.admin-auth__totp-secret-copy {
flex-shrink: 0;
color: var(--admin-text-muted);
font-size: var(--admin-fs-sm);
}
.admin.admin--auth .admin-auth__password-wrap {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
}
.admin.admin--auth .admin-auth__password-wrap > .admin-auth__input {
flex: 1 1 auto !important;
min-width: 0 !important;
display: block !important;
}
.admin.admin--auth .admin-auth__password-wrap > .admin-auth__password-toggle {
flex: 0 0 var(--admin-size-input-height) !important;
width: var(--admin-size-input-height) !important;
min-width: var(--admin-size-input-height) !important;
display: inline-flex !important;
align-self: stretch !important;
}
.admin-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--admin-radius);
border: 1px solid var(--admin-border-light);
box-shadow: var(--admin-elevation-1);
background: var(--admin-card-bg);
}
.admin-table {
width: 100%;
border-collapse: collapse;
background: var(--admin-card-bg);
}
.admin-table thead {
position: sticky;
top: 0;
z-index: 1;
}
.admin-table th {
padding: 1rem var(--admin-space-lg);
text-align: left;
background: var(--admin-grey-50);
font-weight: 600;
font-size: var(--admin-fs-sm);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--admin-text-muted);
border-bottom: 2px solid var(--admin-border);
white-space: nowrap;
user-select: none;
}
.admin-table th.admin-table__col-sortable {
cursor: pointer;
}
.admin-table th.admin-table__col-sortable:hover {
color: var(--admin-text-secondary);
}
.admin-table td {
padding: 1.1rem var(--admin-space-lg);
text-align: left;
border-bottom: 1px solid var(--admin-border-light);
font-size: var(--admin-fs-body-lg);
color: var(--admin-text);
vertical-align: middle;
}
.admin-table tbody tr {
background: var(--admin-card-bg);
position: relative;
transition: background var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-table tbody tr td:first-child {
box-shadow: inset 2px 0 0 transparent;
transition: box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-table tbody tr:hover {
background: var(--admin-grey-50);
}
.admin-table tbody tr:hover td:first-child {
box-shadow: inset 2px 0 0 rgba(var(--admin-primary-rgb), 0.55);
}
.admin-table tbody tr:last-child td {
border-bottom: none;
}
.admin-table tbody tr.is-selected {
background: var(--admin-primary-light);
}
.admin-table tbody tr.is-selected td:first-child {
box-shadow: inset 2px 0 0 rgba(var(--admin-primary-rgb), 0.7);
}
.admin-table tbody tr.is-selected td {
border-bottom-color: var(--admin-primary-border);
}
.admin-table tbody tr.is-selected:hover {
background: rgba(var(--admin-primary-rgb), 0.07);
}
.admin-table tbody tr.admin-table__row--current, .admin-table tbody tr.user-sessions__row--current {
background: var(--admin-white);
}
.admin-table--compact th {
padding: 0.7rem var(--admin-space);
font-size: var(--admin-fs-xs);
}
.admin-table--compact td {
padding: 0.7rem var(--admin-space);
font-size: var(--admin-fs-body);
}
.admin-table--comfortable th {
padding: 1.4rem var(--admin-space-xl);
}
.admin-table--comfortable td {
padding: 1.4rem var(--admin-space-xl);
}
.admin-table__col-check,
.admin-table__cell-check {
width: 40px;
max-width: 40px;
text-align: center;
}
.admin-table__col-handle,
.admin-table__cell-handle {
width: 32px;
max-width: 32px;
color: var(--admin-text-muted);
cursor: grab;
text-align: center;
}
.admin-table__col-handle:active,
.admin-table__cell-handle:active {
cursor: grabbing;
}
.admin-table__col-thumb,
.admin-table__cell-thumb {
width: 132px;
max-width: 132px;
}
.admin-table__col-thumb--portfolio-logo,
.admin-table__cell-thumb--portfolio-logo {
width: 112px;
max-width: 112px;
}
.admin-table__col-compact {
white-space: nowrap;
vertical-align: middle;
}
.admin-table__thumb {
display: block;
width: 40px;
height: 40px;
object-fit: cover;
border-radius: var(--admin-radius-sm);
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
}
.admin-table__thumb--service-item {
width: 120px;
max-width: 100%;
height: auto;
aspect-ratio: 16/9;
object-fit: cover;
}
.admin-table__thumb--portfolio-logo {
width: 96px;
max-width: 100%;
height: 40px;
object-fit: contain;
object-position: center left;
aspect-ratio: auto;
}
.admin-table__thumb-placeholder {
display: block;
width: 120px;
max-width: 100%;
aspect-ratio: 16/9;
border-radius: var(--admin-radius-sm);
background: var(--admin-grey-100);
border: 1px dashed var(--admin-border-light);
}
.admin-table__thumb-placeholder--portfolio-logo {
width: 96px;
height: 40px;
aspect-ratio: auto;
}
.admin-table .admin-badge {
white-space: nowrap;
flex-shrink: 0;
}
.admin-table td:has(.admin-badge) {
white-space: nowrap;
vertical-align: middle;
}
.admin-table__muted {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-table__sub {
display: block;
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
margin-top: 2px;
}
.admin-table__title-link {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.admin-table__title-link:hover {
color: var(--admin-primary);
text-decoration: underline;
}
.admin-table__title-link:focus-visible {
outline: none;
border-radius: var(--admin-radius-xs);
box-shadow: var(--admin-focus-ring);
}
.admin-i18n-switch {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--admin-space-xs);
}
.admin-i18n-switch__label { /* "이름" 등 단일 라벨 — 헤더 th 의 text-transform 상속 */ }
.admin-i18n-switch__btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.2rem 0.6rem;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
background: var(--admin-card-bg);
color: var(--admin-text-secondary);
font-family: inherit;
font-size: var(--admin-fs-xs);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
cursor: pointer;
transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-i18n-switch__btn:hover {
border-color: var(--admin-border-focus);
background: var(--admin-grey-50);
}
.admin-i18n-switch__btn:focus-visible {
outline: none;
box-shadow: var(--admin-focus-ring);
border-color: var(--admin-border-focus);
}
.admin-i18n-switch__icon {
font-size: var(--admin-fs-xs);
transition: transform var(--admin-duration-short) var(--admin-ease);
}
.admin-i18n-switch[data-i18n-switch] .admin-i18n-switch__btn[aria-expanded=true] .admin-i18n-switch__icon {
transform: rotate(180deg);
}
.admin-i18n-switch__menu {
position: absolute;
top: calc(100% + 0.4rem);
left: auto;
right: 0;
z-index: 8;
min-width: 9rem;
margin: 0;
padding: 0.4rem;
list-style: none;
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
box-shadow: var(--admin-elevation-2);
}
.admin-i18n-switch__menu li {
padding: 0.6rem 0.8rem;
border-radius: var(--admin-radius-xs);
font-size: var(--admin-fs-body);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--admin-text-secondary);
cursor: pointer;
}
.admin-i18n-switch__menu li:hover {
background: var(--admin-grey-100);
color: var(--admin-text);
}
.admin-i18n-switch__menu li[aria-selected=true] {
color: var(--admin-primary);
font-weight: 600;
}
.admin-table__col-actions,
.admin-table__cell-actions {
width: 1px;
text-align: right;
white-space: nowrap;
}
.admin-table__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--admin-space-xs);
flex-wrap: nowrap;
white-space: nowrap;
}
.admin-table__actions > form,
.admin-table__actions > .admin-form-inline {
display: inline-flex;
align-items: center;
margin: 0;
}
.admin-table__actions > form {
gap: var(--admin-space-xs);
}
.admin-table__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
height: 2.8rem;
padding: 0 1rem;
font-size: var(--admin-fs-body);
font-weight: 500;
border-radius: var(--admin-radius-sm);
text-decoration: none;
border: 1px solid transparent;
background: transparent;
color: var(--admin-text-secondary);
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-table__btn i, .admin-table__btn svg {
font-size: 1.2rem;
flex-shrink: 0;
}
.admin-table__btn:hover {
background: var(--admin-grey-100);
border-color: var(--admin-border);
color: var(--admin-text);
}
.admin-table__btn:active {
background: var(--admin-grey-200);
}
.admin-table__btn:focus-visible {
outline: none;
box-shadow: var(--admin-focus-ring);
border-color: var(--admin-border-focus);
}
.admin-table__btn:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.admin-table__btn--primary {
background: var(--admin-primary);
border-color: transparent;
color: var(--admin-on-primary);
font-weight: 600;
}
.admin-table__btn--primary:hover {
background: var(--admin-primary-hover);
color: var(--admin-on-primary);
border-color: transparent;
}
.admin-table__btn--danger {
color: var(--admin-error-text);
}
.admin-table__btn--danger:hover {
background: var(--admin-error-bg);
border-color: var(--admin-error-border);
color: var(--admin-error-text);
}
.admin-table__btn--danger:focus-visible {
box-shadow: var(--admin-error-focus-ring);
}
.admin-table__empty td {
padding: 4.8rem var(--admin-space-lg);
text-align: center;
border-bottom: none;
}
.admin-table-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--admin-space-sm);
}
.admin-table-empty__icon {
font-size: 3.2rem;
color: var(--admin-grey-300);
line-height: 1;
}
.admin-table-empty__title {
font-size: var(--admin-fs-body-lg);
font-weight: 600;
color: var(--admin-text-secondary);
}
.admin-table-empty__desc {
font-size: var(--admin-fs-body);
color: var(--admin-text-muted);
max-width: 320px;
line-height: 1.6;
}
.admin-table-empty__action {
margin-top: var(--admin-space-xs);
}
.admin-table__skeleton td {
padding-top: 1.2rem;
padding-bottom: 1.2rem;
}
@keyframes admin-skeleton-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
.admin-skeleton {
display: inline-block;
height: 1.4rem;
border-radius: var(--admin-radius-xs);
background: var(--admin-grey-200);
animation: admin-skeleton-pulse 1.6s ease-in-out infinite;
}
.admin-skeleton--sm {
height: 1rem;
}
.admin-skeleton--lg {
height: 1.8rem;
}
.admin-skeleton--full {
width: 100%;
display: block;
}
.admin-skeleton--w60 {
width: 60%;
}
.admin-skeleton--w80 {
width: 80%;
}
.admin-skeleton--circle {
width: 4rem;
height: 4rem;
border-radius: 50%;
}
.admin-page__breadcrumb {
display: none;
margin-bottom: var(--admin-space);
padding: var(--admin-space-sm) 0;
}
.admin-page__breadcrumb .admin-breadcrumb {
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
}
.admin-page__breadcrumb .admin-breadcrumb__link {
color: var(--admin-primary);
text-decoration: none;
}
.admin-page__breadcrumb .admin-breadcrumb__link:hover {
text-decoration: underline;
}
.admin-page__breadcrumb .admin-breadcrumb__sep {
color: var(--admin-text-tertiary);
}
.admin-page__breadcrumb .admin-breadcrumb__current {
color: var(--admin-text);
font-weight: 600;
}
@media (max-width: 1024px) {
.admin-page__breadcrumb {
display: block;
}
}
.admin-invite-created-banner {
margin-bottom: var(--admin-space-lg);
padding: var(--admin-space-lg);
background: rgba(22, 101, 52, 0.08);
border: 1px solid rgba(22, 101, 52, 0.22);
border-radius: var(--admin-radius);
}
.admin-invite-created-banner__title {
margin: 0 0 var(--admin-space-xs);
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text);
}
.admin-invite-created-banner__title .fa-link {
margin-right: 0.35em;
opacity: 0.85;
}
.admin-invite-created-banner__desc {
margin: 0 0 var(--admin-space);
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
line-height: 1.45;
}
.admin-invite-url--banner {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-sm);
align-items: center;
}
.admin-invite-url--banner .admin-form__input {
flex: 1;
min-width: min(100%, 280px);
}
.admin-page__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-bottom: 3.2rem;
}
.admin-page__header > .admin-page__header-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 1.2rem;
}
.admin-page__header > .admin-page__header-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
align-items: flex-start;
}
.admin-page__header > .admin-page__header-info .admin-page__header-title-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 1.2rem;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.admin-page__header {
flex-direction: column;
gap: 1.6rem;
margin-bottom: 2.4rem;
align-items: flex-start;
}
.admin-page__header > .admin-page__header-left {
flex-direction: column;
gap: 0.8rem;
align-items: flex-start;
}
.admin-page__header > .admin-page__header-info {
gap: 0.4rem;
}
.admin-page__header .admin-page__header-actions {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
gap: 0.8rem;
}
}
.admin-page__header-actions {
display: flex;
gap: 1.2rem;
flex-shrink: 0;
width: auto;
justify-content: flex-end;
}
.admin-page__title {
margin: 0;
font-size: clamp(2rem, 2.8vw, 2.8rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--admin-text);
line-height: 1.2;
word-break: break-word;
}
.admin-page__subtitle {
display: inline-flex;
align-items: center;
font-size: clamp(1.3rem, 1.4vw, 1.4rem);
color: var(--admin-primary-text);
background: var(--admin-primary-light);
padding: 0.4rem 1rem;
border-radius: 1.2rem;
margin: 0;
line-height: 1.5;
font-weight: 600;
border: 1px solid rgba(var(--admin-primary-rgb), 0.2);
white-space: nowrap;
}
@media (min-width: 768px) {
.admin-page__subtitle {
font-size: 1.4rem;
padding: 0.5rem 1.2rem;
}
}
@media (min-width: 1024px) {
.admin-page__subtitle {
padding: 0.6rem 1.4rem;
}
}
.admin-page__desc {
margin: 0;
font-size: var(--admin-fs-body);
font-weight: 500;
color: var(--admin-text-secondary);
line-height: 1.5;
}
.admin-page__toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space-lg);
}
.admin-empty {
padding: var(--admin-space-2xl) var(--admin-space-lg);
text-align: center;
background: var(--admin-card-bg);
border-radius: var(--admin-radius);
border: 1px dashed var(--admin-border);
}
.admin-empty__text {
margin: 0 0 var(--admin-space);
font-size: var(--admin-fs-body);
font-weight: 500;
color: var(--admin-text-secondary);
}
.admin-empty__text--sm,
.admin-empty__desc {
margin: calc(var(--admin-space) * -0.5) 0 var(--admin-space);
font-size: var(--admin-fs-sm, 1.25rem);
font-weight: 400;
color: var(--admin-text-muted);
}
.admin-index-filter {
display: flex;
flex-direction: column;
gap: var(--admin-space);
margin-bottom: var(--admin-space-lg);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-card-bg);
border-radius: var(--admin-radius);
border: 1px solid var(--admin-border-light);
}
.admin-index-filter .admin-search-bar__input,
.admin-index-filter .admin-form__input,
.admin-index-filter .admin-select,
.admin-index-filter .admin-btn {
height: var(--admin-size-input-height);
}
.admin-index-filter .cs-trigger {
min-height: var(--admin-size-input-height);
height: var(--admin-size-input-height);
}
.admin-index-filter__search {
width: 100%;
}
.admin-index-filter__filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--admin-space) var(--admin-space-lg);
}
.admin-index-filter__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--admin-space-2xs);
}
.admin-index-filter__item--date .admin-index-filter__date-inputs {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
}
.admin-index-filter__item--date .admin-index-filter__sep {
color: var(--admin-text-tertiary);
font-weight: 500;
}
.admin-index-filter__item--date .admin-form__input {
width: auto;
}
.admin-index-filter__label {
display: flex;
align-items: center;
gap: 0.35em;
margin: 0;
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-text-muted);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-index-filter__label i {
font-size: 0.85em;
}
.admin-index-filter__input {
min-width: 140px;
}
.admin-index-filter__select {
width: auto;
/* 옵션 중 가장 긴 텍스트(예: 발매일 최신순)가 잘리지 않도록 */
min-width: 12rem;
}
.admin-index-filter__item .cs-wrap,
.admin-index-filter__item .mcs-wrap {
width: 18rem;
max-width: 100%;
}
.admin-index-filter__search-row {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
width: 100%;
}
.admin-index-filter__search-row .admin-search-bar {
flex: 1 1 0;
min-width: 0;
}
.admin-index-filter__search-row .admin-index-filter__action-btns {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
flex-shrink: 0;
}
.admin-index-filter__actions {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--admin-space-xs);
}
.admin-pagination-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.4rem;
margin-top: 2.4rem;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.admin-pagination-wrapper {
flex-direction: column;
align-items: stretch;
gap: 1.6rem;
margin-top: 1.6rem;
}
}
.admin-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
flex-wrap: wrap;
flex: 1;
}
@media (max-width: 768px) {
.admin-pagination {
gap: 0.4rem;
width: 100%;
}
}
.admin-pagination__info {
margin: 0;
font-size: var(--admin-fs-body);
font-weight: 500;
color: var(--admin-text-secondary);
}
.admin-pagination__info strong {
color: var(--admin-text);
font-weight: 600;
}
.admin-pagination__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem;
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 768px) {
.admin-pagination__list {
gap: 0.4rem;
}
}
.admin-pagination__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3.2rem;
height: 3.2rem;
padding: 0 0.8rem;
font-size: 1.3rem;
font-weight: 500;
color: var(--admin-text-secondary);
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: 0.6rem;
text-decoration: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
position: relative;
}
@media (min-width: 768px) {
.admin-pagination__btn {
min-width: 3.6rem;
height: 3.6rem;
padding: 0 1.2rem;
}
}
.admin-pagination__btn:hover:not(.admin-pagination__btn--disabled):not(.admin-pagination__btn--current):not(.admin-pagination__btn--ellipsis) {
background: var(--admin-primary-light);
border-color: rgba(var(--admin-primary-rgb), 0.4);
color: var(--admin-primary);
transform: translateY(-0.15rem) scale(1.05);
box-shadow: 0 0.3rem 0.6rem rgba(var(--admin-primary-rgb), 0.15);
}
.admin-pagination__btn:active:not(.admin-pagination__btn--disabled):not(.admin-pagination__btn--current):not(.admin-pagination__btn--ellipsis) {
transform: translateY(0) scale(0.98);
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}
.admin-pagination__btn:focus-visible {
outline: none;
box-shadow: 0 0 0 0.2rem rgba(var(--admin-primary-rgb), 0.25);
}
.admin-pagination__btn--current {
background: var(--admin-primary);
border-color: var(--admin-primary);
color: var(--admin-on-primary);
font-weight: 600;
cursor: default;
box-shadow: 0 0.2rem 0.4rem rgba(var(--admin-primary-rgb), 0.25);
transform: scale(1.05);
}
.admin-pagination__btn--current:hover {
background: var(--admin-primary-hover);
transform: scale(1.08);
box-shadow: 0 0.3rem 0.6rem rgba(var(--admin-primary-rgb), 0.3);
}
.admin-pagination__btn--disabled {
color: var(--admin-text-disabled);
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
.admin-pagination__btn--ellipsis {
border-color: transparent;
background: transparent;
cursor: default;
pointer-events: none;
color: var(--admin-text-muted);
padding: 0 0.4rem;
}
.admin-pagination__btn--ellipsis:hover {
background: transparent;
}
.admin-pagination__btn i, .admin-pagination__btn svg {
font-size: 1.2rem;
}
.admin-pagination__per-page {
display: flex;
align-items: center;
gap: 0.8rem;
flex-shrink: 0;
}
@media (max-width: 768px) {
.admin-pagination__per-page {
width: 100%;
justify-content: space-between;
}
}
.admin-pagination__per-page-label {
font-size: 1.3rem;
color: var(--admin-text-secondary);
display: flex;
align-items: center;
gap: 0.6rem;
white-space: nowrap;
}
.admin-pagination__per-page-label i {
font-size: 1.2rem;
}
.admin-pagination__per-page-select {
padding: 0.7rem 2.8rem 0.7rem 1rem;
border: 1px solid var(--admin-border);
border-radius: 0.6rem;
font-size: 1.3rem;
background: var(--admin-white);
color: var(--admin-text);
cursor: pointer;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.8rem center;
background-size: 1.2rem;
min-width: 7rem;
font-family: inherit;
}
.admin-pagination__per-page-select:focus {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: 0 0 0 0.2rem rgba(var(--admin-primary-rgb), 0.1);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230076cb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
.admin-pagination__per-page-select:hover {
border-color: rgba(var(--admin-primary-rgb), 0.4);
}
@media (max-width: 768px) {
.admin-pagination__per-page-select {
flex: 1;
max-width: 12rem;
}
}
.admin-form-inline {
display: inline;
}
.admin-table__link {
font-weight: 600;
color: var(--admin-text);
text-decoration: none;
}
.admin-table__link:hover {
text-decoration: underline;
color: var(--admin-primary);
}
.admin-message {
padding: var(--admin-space) var(--admin-space-lg);
border-radius: var(--admin-radius-sm);
margin-bottom: var(--admin-space);
font-size: var(--admin-fs-body);
font-weight: 500;
}
.admin-message--error {
background: var(--admin-error-bg);
color: var(--admin-error-text);
border: 1px solid rgba(var(--admin-error-rgb), 0.3);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.admin-tab-nav {
display: flex;
gap: 0;
border-bottom: 2px solid var(--admin-border-light);
margin-bottom: var(--admin-space-xl);
overflow-x: auto;
scrollbar-width: none;
}
.admin-tab-nav::-webkit-scrollbar {
display: none;
}
.admin-tab-nav__item {
flex-shrink: 0;
padding: var(--admin-space-sm) var(--admin-space-lg);
font-size: var(--admin-fs-body);
font-weight: 500;
color: var(--admin-text-secondary);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
white-space: nowrap;
}
.admin-tab-nav__item:hover {
color: var(--admin-text);
}
.admin-tab-nav__item--active {
color: var(--admin-primary);
font-weight: 600;
border-bottom-color: var(--admin-primary);
}
.admin-siteinfo-logo-list {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-siteinfo-logo-item {
display: flex;
align-items: flex-start;
gap: var(--admin-space-lg);
padding: var(--admin-space);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
background: var(--admin-bg-subtle, #fafafa);
}
.admin-siteinfo-logo-item__left {
flex: 0 0 220px;
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-siteinfo-logo-item__right {
flex: 1 1 0;
min-width: 0;
}
.admin-siteinfo-logo-preview {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
border-radius: var(--admin-radius-sm);
border: 1px solid var(--admin-border-light);
overflow: hidden;
}
.admin-siteinfo-logo-preview--dark {
background: var(--admin-grey-900);
}
.admin-siteinfo-logo-preview--light {
background: var(--admin-grey-50);
}
.admin-siteinfo-logo-preview--admin {
background: var(--admin-drawer-bg);
border-color: var(--admin-drawer-border);
}
.admin-siteinfo-logo-preview__img {
max-height: 72px;
max-width: 90%;
object-fit: contain;
}
.admin-siteinfo-quick-menu {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.admin-siteinfo-quick-menu__item {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
background: var(--admin-bg);
}
.admin-siteinfo-quick-menu__item.is-dragging {
opacity: 0.55;
box-shadow: var(--admin-shadow-sm);
}
.admin-siteinfo-quick-menu__handle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.2rem;
height: 3.2rem;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-xs);
background: var(--admin-bg-subtle, #fafafa);
color: var(--admin-text-muted);
cursor: grab;
}
.admin-siteinfo-quick-menu__handle:active {
cursor: grabbing;
}
.admin-siteinfo-quick-menu__handle:focus-visible {
outline: 2px solid var(--admin-primary);
outline-offset: 2px;
}
.admin-siteinfo-quick-menu__index {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.2rem;
height: 3.2rem;
border-radius: 999px;
background: var(--admin-primary-soft);
color: var(--admin-primary);
font-weight: 700;
}
.admin-siteinfo-quick-menu__body {
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs);
min-width: 0;
}
.admin-siteinfo-quick-menu__label {
color: var(--admin-text);
}
.admin-siteinfo-quick-menu__meta {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-siteinfo-quick-menu__rank {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
}
.admin-siteinfo-quick-menu__rank-label {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-siteinfo-quick-menu__rank-input {
width: 7rem;
}
.admin-siteinfo-sns-icon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
gap: var(--admin-space);
}
.admin-siteinfo-sns-icon-card {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
padding: var(--admin-space);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
background: var(--admin-bg);
}
.admin-siteinfo-sns-icon-card__header {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
}
.admin-siteinfo-sns-icon-card__preview {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.4rem;
height: 4.4rem;
border-radius: var(--admin-radius-sm);
background: var(--admin-grey-900);
color: var(--admin-white);
}
.admin-siteinfo-sns-icon-card__preview svg {
width: 55%;
height: 55%;
fill: currentColor;
}
.admin-siteinfo-sns-icon-card__title {
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs);
min-width: 0;
}
.admin-siteinfo-sns-icon-card__title strong {
color: var(--admin-text);
}
.admin-siteinfo-sns-icon-card__title span {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
@media (max-width: 768px) {
.admin-siteinfo-quick-menu__item {
grid-template-columns: auto auto minmax(0, 1fr);
}
.admin-siteinfo-quick-menu__rank {
grid-column: 1/-1;
justify-content: flex-end;
}
}
.admin-form__label-hint {
margin-left: var(--admin-space-xs);
font-size: var(--admin-fs-xs);
font-weight: 400;
color: var(--admin-text-muted);
}
[data-theme=dark] .admin-pagination__per-page-select,
[data-theme=dark-modern] .admin-pagination__per-page-select,
[data-theme=dark-abyss] .admin-pagination__per-page-select,
[data-theme=dark-dracula] .admin-pagination__per-page-select,
[data-theme=dark-mongo] .admin-pagination__per-page-select,
[data-theme=dark-red] .admin-pagination__per-page-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a8b4cc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
[data-theme=dark] .admin-pagination__per-page-select:focus,
[data-theme=dark-modern] .admin-pagination__per-page-select:focus,
[data-theme=dark-abyss] .admin-pagination__per-page-select:focus,
[data-theme=dark-dracula] .admin-pagination__per-page-select:focus,
[data-theme=dark-mongo] .admin-pagination__per-page-select:focus,
[data-theme=dark-red] .admin-pagination__per-page-select:focus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2334affc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
.admin-form {
max-width: 640px;
}
.admin-form--wide {
max-width: 1280px;
}
.admin-form__section {
margin-bottom: var(--admin-space-2xl);
padding-top: var(--admin-space-sm);
}
.admin-form__section:first-child {
padding-top: 0;
}
.admin-form__section:last-child {
margin-bottom: 0;
}
.admin-form__section:has(+ .admin-form__actions) {
margin-bottom: 0;
}
.admin-form__section-title {
font-size: var(--admin-fs-body-xl);
font-weight: 700;
color: var(--admin-text);
margin-bottom: var(--admin-space-2xs);
padding-bottom: var(--admin-space-xs);
display: flex;
align-items: center;
gap: var(--admin-space-sm);
}
.admin-form__section-title::after {
content: "";
flex: 1;
height: 1px;
background: var(--admin-border);
}
.admin-form__fieldset {
display: flex;
flex-direction: column;
gap: var(--admin-space-lg);
margin-bottom: var(--admin-space-lg);
}
.admin-form__block {
margin-bottom: var(--admin-space-2xl);
}
.admin-form__block:last-child {
margin-bottom: 0;
}
.admin-form__block + .admin-form__block {
margin-top: var(--admin-space-xl);
}
.admin-form__group {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
.admin-form__label {
display: block;
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text);
letter-spacing: 0.005em;
margin-bottom: var(--admin-space-xs);
}
.admin-form__label--required::after {
content: " *";
color: var(--admin-error);
font-weight: 700;
}
.admin-form__label--sm {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-secondary);
margin-bottom: var(--admin-space-xs);
}
.admin-form__input, .admin-form__textarea {
display: block;
width: 100%;
height: var(--admin-size-input-height);
padding: 0.9rem 1.2rem;
font-size: var(--admin-fs-body-lg);
color: var(--admin-text);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: 0.6rem;
font-family: inherit;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-form__input::placeholder, .admin-form__textarea::placeholder {
color: var(--admin-text-muted);
}
.admin-form__input:hover:not(:disabled):not(:focus), .admin-form__textarea:hover:not(:disabled):not(:focus) {
border-color: rgba(var(--admin-primary-rgb), 0.4);
}
.admin-form__input:focus, .admin-form__textarea:focus {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: 0 0 0 0.2rem rgba(var(--admin-primary-rgb), 0.1);
}
.admin-form__input:-webkit-autofill, .admin-form__input:-webkit-autofill:hover, .admin-form__input:-webkit-autofill:focus, .admin-form__textarea:-webkit-autofill, .admin-form__textarea:-webkit-autofill:hover, .admin-form__textarea:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 100px var(--admin-white) inset;
-webkit-text-fill-color: var(--admin-text);
}
.admin-form__input:disabled, .admin-form__textarea:disabled {
background: var(--admin-grey-50);
color: var(--admin-text-muted);
cursor: not-allowed;
}
.admin-form__textarea {
height: auto;
min-height: var(--admin-size-editor-min-height);
padding: var(--admin-space-sm) var(--admin-space);
resize: vertical;
line-height: 1.6;
}
.admin-form__desc {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
line-height: 1.5;
margin-top: var(--admin-space-2xs);
margin-bottom: var(--admin-space-2xl);
}
.admin-form__desc + .admin-form__label, .admin-form__desc + .admin-form__label--sm {
margin-top: var(--admin-space-lg);
}
.admin-form__hint {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
line-height: 1.5;
margin-top: 0.2rem;
}
.admin-form__hint--below {
margin-bottom: var(--admin-space-xs);
}
.admin-form__hint--readable {
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-xs);
}
.admin-form__hint--rules {
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-warn-bg);
color: var(--admin-warn-text);
border: 1px solid rgba(var(--admin-warn-rgb), 0.25);
border-radius: var(--admin-radius-xs);
}
.admin-form__hint--rules ul {
padding-left: 1.4em;
list-style: disc;
}
.admin-form__hint--rules li {
margin-bottom: 0.2rem;
}
.admin-form__error {
font-size: var(--admin-fs-sm);
color: var(--admin-error-text);
font-weight: 500;
margin-top: 0.2rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.admin-form__field--narrow {
max-width: 10rem;
}
.admin-form__field--narrow:has(.admin-number-stepper) {
max-width: max-content;
}
.admin-form {
/* Avatar / 썸네일 미리보기 */
}
.admin-form__avatar {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--admin-border-light);
background: var(--admin-grey-100);
}
.admin-form {
/* 2컬럼 그리드 */
}
.admin-form__grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
gap: var(--admin-space-lg);
align-items: start;
}
.admin-form__grid-2 > .admin-form__block:not(:has(.admin-checkbox-wrap)) {
margin: 0;
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}
.admin-form__grid-2 > .admin-form__block:not(:has(.admin-checkbox-wrap)) > .admin-form__group {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
gap: var(--admin-space-sm);
}
.admin-form__grid-2 > .admin-form__block:has(.admin-checkbox-wrap) {
margin: 0;
align-self: end;
}
.admin-form__grid-2 .admin-form__label {
min-height: 2rem;
}
@media (max-width: 1024px) {
.admin-form__grid-2 {
grid-template-columns: 1fr;
}
}
.admin-form {
/* 태그 피커 — 체크박스 기반 멀티 칩 선택 컨테이너 */
}
.admin-form__tag-picker {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-xs);
padding: var(--admin-space-xs) var(--admin-space-sm);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
background: var(--admin-bg);
min-height: 4.4rem;
align-content: flex-start;
}
.admin-form {
/* 컬러 피커 */
}
.admin-form__color-picker-wrap {
display: flex;
align-items: center;
gap: var(--admin-space);
}
.admin-form {
/* 사진 미리보기 — file 입력 위에 현재 사진 썸네일 표시 */
}
.admin-form__photo-preview {
margin-bottom: var(--admin-space-2xs);
}
.admin-form__photo-preview img {
display: block;
max-width: 12rem;
max-height: 12rem;
object-fit: cover;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
background: var(--admin-bg-secondary);
}
.admin-form {
/* 폼 submit 로더 — 기본 숨김, Form.ts가 submit 중에만 inline-block으로 표시 */
}
.admin-form__loader {
display: none;
margin-left: var(--admin-space-2xs);
}
.admin-form__loader--hidden {
display: none;
}
.admin-form {
/* 폼 하단 액션 바 */
}
.admin-form__actions {
display: flex;
align-items: center;
gap: var(--admin-space);
padding-top: var(--admin-space-xl);
border-top: 1px solid var(--admin-border-light);
margin-top: var(--admin-space-xl);
flex-wrap: wrap;
}
.admin-form__actions--right {
justify-content: flex-end;
}
.admin-form__actions--between {
justify-content: space-between;
}
.admin-notice-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--admin-border-light);
margin-bottom: var(--admin-space);
}
.admin-notice-tabs__tab {
padding: var(--admin-space-sm) var(--admin-space);
border: none;
background: none;
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.admin-notice-tabs__tab:hover {
color: var(--admin-text);
}
.admin-notice-tabs__tab--active {
color: var(--admin-primary);
font-weight: 600;
border-bottom-color: var(--admin-primary);
}
.admin-notice-panel--hidden {
display: none;
}
.admin-notice-panel__body-en {
margin-top: var(--admin-space);
}
.admin-notice-thumbnail-current {
margin-bottom: var(--admin-space);
}
.admin-editor-quill .ql-editor {
min-height: var(--admin-size-editor-min-height);
}
.admin-editor-quill .ql-container {
font-size: var(--admin-fs-body-lg);
}
.admin-form__section-badge {
font-size: var(--admin-fs-xs);
font-weight: 500;
color: var(--admin-text-muted);
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
border-radius: 9999px;
padding: 0.1rem 0.7rem;
margin-left: var(--admin-space-xs);
vertical-align: middle;
}
.admin-artist-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--admin-border-light);
margin-bottom: var(--admin-space);
}
.admin-artist-tabs__tab {
padding: var(--admin-space-sm) var(--admin-space);
border: none;
background: none;
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.admin-artist-tabs__tab:hover {
color: var(--admin-text);
}
.admin-artist-tabs__tab--active {
color: var(--admin-primary);
font-weight: 600;
border-bottom-color: var(--admin-primary);
}
.admin-artist-panel--hidden {
display: none;
}
.admin-form__list-area {
margin-top: var(--admin-space-2xl);
padding-top: var(--admin-space-lg);
border-top: 1px solid var(--admin-border-light);
width: 100%;
}
.admin-form__list-title {
margin: 0 0 var(--admin-space);
font-size: var(--admin-fs-menu);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--admin-text);
}
.admin-form__list-area .admin-table-wrap {
width: 100%;
}
.admin-artists-form .admin-form__section .admin-form__block {
margin-bottom: var(--admin-space);
}
.admin-artists-form .admin-form__section .admin-form__row {
gap: var(--admin-space-sm) var(--admin-space);
}
.admin-artists-form .admin-form__row--add-row {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: var(--admin-space-sm) var(--admin-space);
}
.admin-artists-form .admin-form__group--flex {
flex: 1;
min-width: 200px;
}
.admin-form__section--nested {
margin-bottom: 0;
}
.admin-form__section--nested .admin-form__section-title {
font-size: var(--admin-fs-body);
margin-bottom: var(--admin-space-sm);
}
.admin-user-edit-tabs {
display: flex;
gap: 0;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-bottom: 1px solid var(--admin-border-light);
margin-bottom: var(--admin-space);
}
.admin-user-edit-tabs::-webkit-scrollbar {
display: none;
}
.admin-user-edit-tabs__tab {
display: inline-flex;
align-items: center;
flex-shrink: 0;
white-space: nowrap;
padding: var(--admin-space-sm) var(--admin-space-lg);
font-size: var(--admin-fs-body-lg);
font-weight: 500;
color: var(--admin-text-secondary);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
border-radius: var(--admin-radius-xs) var(--admin-radius-xs) 0 0;
transition: color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-user-edit-tabs__tab:hover {
color: var(--admin-text);
background: var(--admin-grey-50);
}
.admin-user-edit-tabs__tab--active {
color: var(--admin-primary);
font-weight: 600;
border-bottom-color: var(--admin-primary);
background: transparent;
}
.admin-user-edit-panel--hidden {
display: none;
}
.admin-form__actions--page {
margin-top: var(--admin-space-2xl);
border-top: none;
padding-top: 0;
}
[data-controller=UserController][data-action=edit] .admin-form__section--tabs {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.user-sessions__table th, .user-sessions__table td {
vertical-align: middle;
}
.user-sessions__row--current {
background: var(--admin-white);
}
.user-sessions__icon-cell {
text-align: center;
color: var(--admin-text-secondary);
}
.user-sessions__device-icon {
font-size: 1.25rem;
}
.user-sessions__ip-code {
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-sm);
background: var(--admin-grey-100);
padding: 2px 6px;
border-radius: 4px;
color: var(--admin-text);
}
.user-sessions__ua {
line-height: 1.4;
}
.user-sessions__browser {
color: var(--admin-text-secondary);
}
.user-sessions__time, .user-sessions__created {
white-space: nowrap;
color: var(--admin-text-secondary);
}
.user-sessions__current-badge {
display: inline-block;
white-space: nowrap;
font-weight: 600;
color: var(--admin-primary);
border: 1px solid currentColor;
border-radius: 999px;
padding: 2px 10px;
}
.admin-board-edit-tabs {
display: flex;
flex-wrap: wrap;
gap: 0;
border-bottom: 1px solid var(--admin-border-light);
margin-top: var(--admin-space-lg);
margin-bottom: var(--admin-space-lg);
}
.admin-board-edit-tabs__tab {
padding: var(--admin-space-sm) var(--admin-space);
border: none;
background: none;
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.admin-board-edit-tabs__tab:hover {
color: var(--admin-text);
}
.admin-board-edit-tabs__tab--active {
color: var(--admin-primary);
font-weight: 600;
border-bottom-color: var(--admin-primary);
}
.admin-board-edit-panel--hidden {
display: none;
}
.admin-form__block--row {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space) var(--admin-space-lg);
}
.admin-input-wrap--select .admin-select--board {
min-width: 12rem;
width: auto;
}
.admin-input-wrap--sort-order .admin-input--narrow {
width: 6rem;
}
.admin-input--narrow {
width: 5rem;
}
.admin-input--hours {
width: 5rem;
min-width: 4rem;
}
.admin-input--role-code {
width: 10rem;
max-width: 100%;
}
.admin-board-approval-fields {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-board-approval-fields__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-sm) var(--admin-space);
}
.admin-board-approval-fields__row .admin-form__inline-unit {
margin-left: 0;
}
.admin-form__section-note {
margin-bottom: var(--admin-space-sm);
}
.admin-form__inline-unit {
color: var(--admin-text-secondary);
}
.admin-form__row--wrap {
flex-wrap: wrap;
gap: var(--admin-space) var(--admin-space-lg);
}
.admin-form__row--tag-list {
gap: var(--admin-space-2xs) var(--admin-space);
}
.admin-board-tag-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
max-width: 28rem;
}
.admin-board-tag-list__item {
border-bottom: 1px solid var(--admin-border-light, #e2e8f0);
}
.admin-board-tag-list__item:last-child {
border-bottom: none;
}
.admin-board-tag-list__label {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) 0;
cursor: pointer;
min-height: 2.25rem;
}
.admin-board-tag-list__label:hover .admin-board-tag-list__box {
border-color: var(--admin-primary, #0f172a);
background: var(--admin-card-bg, #fff);
}
.admin-board-tag-list__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.admin-board-tag-list__input:focus-visible + .admin-board-tag-list__box {
outline: 2px solid var(--admin-primary, #0f172a);
outline-offset: 2px;
}
.admin-board-tag-list__input:checked + .admin-board-tag-list__box {
background: var(--admin-primary, #0f172a);
border-color: var(--admin-primary, #0f172a);
}
.admin-board-tag-list__input:checked + .admin-board-tag-list__box::after {
opacity: 1;
}
.admin-board-tag-list__box {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
border: 2px solid var(--admin-grey-400, #94a3b8);
border-radius: 4px;
background: var(--admin-card-bg, #fff);
position: relative;
transition: border-color 0.15s, background 0.15s;
}
.admin-board-tag-list__box::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0.375rem;
height: 0.625rem;
margin-left: -0.1875rem;
margin-top: -0.3125rem;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.15s;
}
.admin-board-tag-list__name {
font-size: var(--admin-fs-body);
color: var(--admin-text);
}
.admin-boards__count-link {
text-decoration: none;
}
.admin-boards__count-link:hover {
background: var(--admin-primary-light);
color: var(--admin-primary);
}
.admin-code {
display: inline-block;
padding: 0.2rem 0.6rem;
background: var(--admin-bg-soft);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
color: var(--admin-text);
}
.admin-boards-fields,
.admin-boards-categories,
.admin-boards-tags {
margin-top: var(--admin-space-xl);
}
.admin-boards-fields__head,
.admin-boards-categories__head,
.admin-boards-tags__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--admin-space-md);
margin-bottom: var(--admin-section-action-gap);
}
@media (max-width: 544px) {
.admin-boards-fields__head,
.admin-boards-categories__head,
.admin-boards-tags__head {
flex-direction: column;
align-items: stretch;
}
}
.admin-boards-fields__head-text,
.admin-boards-categories__head-text,
.admin-boards-tags__head-text {
flex: 1 1 auto;
min-width: 0;
}
.admin-boards-fields__new,
.admin-boards-categories__new,
.admin-boards-tags__new {
margin-bottom: var(--admin-section-action-gap);
}
.admin-boards-fields__new-form,
.admin-boards-categories__new-form,
.admin-boards-tags__new-form {
gap: 2.4rem;
}
.admin-boards-fields__new-form .admin-form__label,
.admin-boards-categories__new-form .admin-form__label,
.admin-boards-tags__new-form .admin-form__label {
margin-bottom: 0;
}
.admin-boards-fields__new-form .admin-form__group,
.admin-boards-categories__new-form .admin-form__group,
.admin-boards-tags__new-form .admin-form__group {
gap: 0.8rem;
}
.admin-boards-fields__new-form .admin-form__block,
.admin-boards-categories__new-form .admin-form__block,
.admin-boards-tags__new-form .admin-form__block {
margin-bottom: 0;
}
.admin-boards-fields__new-form .admin-locale-tabs,
.admin-boards-categories__new-form .admin-locale-tabs,
.admin-boards-tags__new-form .admin-locale-tabs {
margin-bottom: 0;
}
.admin-boards-fields__new-form .admin-locale-tabs__bar,
.admin-boards-categories__new-form .admin-locale-tabs__bar,
.admin-boards-tags__new-form .admin-locale-tabs__bar {
margin-bottom: var(--admin-space-md);
}
.admin-boards-fields__new-form .admin-locale-tabs__panel:not(.admin-locale-tabs__panel--hidden),
.admin-boards-categories__new-form .admin-locale-tabs__panel:not(.admin-locale-tabs__panel--hidden),
.admin-boards-tags__new-form .admin-locale-tabs__panel:not(.admin-locale-tabs__panel--hidden) {
background: transparent;
border: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.admin-boards-fields__new-form select[data-card-select] {
display: none;
}
.admin-boards-fields__new-row {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.admin-boards-fields__new-row > .admin-form__block {
margin-bottom: 0;
}
.admin-boards-fields__new-options {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-xl);
}
.admin-boards-fields__new-options .admin-form__block,
.admin-boards-fields__new-options .admin-form__group {
display: contents;
}
.admin-boards-fields__new-options .admin-checkbox-wrap {
margin-bottom: 0;
}
@media (max-width: 768px) {
.admin-boards-fields__new-options {
flex-direction: column;
align-items: flex-start;
gap: var(--admin-space-md);
}
}
.admin-boards-fields__empty,
.admin-boards-categories__empty,
.admin-boards-tags__empty {
margin-top: var(--admin-space-md);
padding: var(--admin-space-xl);
background: var(--admin-bg-soft);
border: 1px dashed var(--admin-border-light);
border-radius: var(--admin-radius-lg);
text-align: center;
color: var(--admin-text-secondary);
}
.admin-boards-fields__table-wrap,
.admin-boards-categories__table-wrap,
.admin-boards-tags__table-wrap {
margin-top: var(--admin-space-md);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-lg);
overflow: hidden;
background: var(--admin-card-bg);
}
.admin-boards-fields__row {
transition: background 0.12s ease;
}
.admin-boards-fields__row:hover {
background: var(--admin-bg-soft);
}
.admin-boards-fields__handle {
cursor: grab;
color: var(--admin-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border-radius: var(--admin-radius-sm);
}
.admin-boards-fields__handle:hover {
color: var(--admin-text-secondary);
background: var(--admin-bg-soft);
}
.admin-boards-fields__type-badge {
display: inline-flex;
align-items: center;
gap: var(--admin-space-xs);
padding: 0.3rem 0.7rem;
background: var(--admin-bg-soft);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-full);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-boards-fields__type-badge i {
color: var(--admin-primary);
}
.admin-boards-fields__label-ko {
display: block;
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text);
}
.admin-boards-fields__label-en {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-boards-fields__key-code {
display: inline-block;
padding: 0.2rem 0.6rem;
background: var(--admin-bg-soft);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
}
.admin-boards-fields__meta {
display: flex;
gap: var(--admin-space-xs);
flex-wrap: wrap;
margin-top: 0.4rem;
}
.admin-boards-fields__cell-handle {
width: 4rem;
text-align: center;
}
.admin-boards-fields__cell-options {
text-align: center;
}
.admin-boards-fields__cell-actions {
white-space: nowrap;
}
.admin-boards-fields__cell-actions > * + * {
margin-left: var(--admin-space-xs);
}
.admin-boards-fields__col-handle {
width: 4rem;
}
.admin-boards-fields__col-sort {
width: 4rem;
}
.admin-boards-fields__col-type {
width: 14rem;
}
.admin-boards-fields__col-key {
width: 16rem;
}
.admin-boards-fields__col-options {
width: 8rem;
}
.admin-boards-fields__col-actions {
width: 14rem;
}
.admin-boards-fields__cell-sort {
text-align: center;
}
.admin-boards-fields__sort-num {
font-size: 1.1rem;
color: var(--admin-text-muted);
font-variant-numeric: tabular-nums;
}
.admin-boards-fields__options-row--hidden {
display: none;
}
.admin-boards-fields__options-cell {
padding: var(--admin-space-md) var(--admin-space-lg);
background: var(--admin-bg-soft);
border-top: 1px solid var(--admin-border-light);
}
.admin-boards-fields__options {
margin-top: 1.6rem;
padding: 1.4rem;
background: var(--admin-bg-soft);
border-radius: var(--admin-radius);
}
.admin-boards-fields__options-title {
font-size: var(--admin-fs-sm);
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 1rem;
}
.admin-boards-fields__option-new {
margin-bottom: 1rem;
}
.admin-boards-fields__option-new > summary {
cursor: pointer;
list-style: none;
}
.admin-boards-fields__option-new > summary::-webkit-details-marker {
display: none;
}
.admin-boards-fields__option-new[open] > summary {
margin-bottom: 1rem;
}
.admin-boards-fields__option-new form {
padding: 1.2rem;
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
}
.admin-boards-fields__option-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.admin-boards-fields__option-item {
display: grid;
grid-template-columns: auto auto 1fr auto;
gap: 1rem;
align-items: center;
padding: 0.8rem 1rem;
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
position: relative;
}
.admin-boards-fields__option-value code {
padding: 0.2rem 0.6rem;
background: var(--admin-bg-soft);
border-radius: var(--admin-radius);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
color: var(--admin-text);
}
.admin-boards-fields__option-label {
font-size: var(--admin-fs-base);
color: var(--admin-text);
}
.admin-boards-fields__option-actions {
display: flex;
gap: 0.4rem;
}
.admin-boards-fields__option-edit {
grid-column: 1/-1;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px dashed var(--admin-border-light);
}
.admin-boards-fields__option-edit--hidden {
display: none;
}
.admin-form__subsection-title {
font-size: var(--admin-fs-base);
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 1.6rem 0 1rem;
}
.admin-form__section-header {
margin-bottom: 1.6rem;
}
.admin-form__section-desc {
margin: var(--admin-space-2xs) 0 var(--admin-space-2xl);
font-size: var(--admin-fs-base);
color: var(--admin-text-secondary);
}
.admin-form__row--3col {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.2rem;
align-items: start;
}
@media (max-width: 768px) {
.admin-form__row--3col {
grid-template-columns: 1fr;
}
}
.admin-table__sub {
color: var(--admin-text-secondary);
}
.admin-table__muted {
color: var(--admin-text-secondary);
font-style: italic;
}
.admin-secret-toggle {
display: flex;
align-items: center;
gap: var(--admin-space-md);
}
.admin-secret-toggle__desc {
color: var(--admin-text);
line-height: 1.5;
}
.admin-secret-section {
transition: opacity 0.2s ease;
}
.admin-secret-section.is-disabled {
opacity: 0.4;
pointer-events: none;
}
.admin-index-filter select[name=board_id] {
min-width: 20rem;
}
.admin-tags-add {
margin-bottom: 1.5rem;
}
.admin-tags-add__form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
}
.admin-tags-add__group {
margin-bottom: 0;
}
.admin-tags-add__hint {
margin-top: 0.35rem;
}
.admin-tags-boards-cell .admin-btn {
margin-left: 0.35rem;
}
.admin-form--inline {
display: inline;
}
.admin-modal__body .admin-form__hint {
margin-top: 0;
}
.admin-detail {
background: var(--admin-card-bg);
border-radius: var(--admin-radius);
padding: var(--admin-space-lg) var(--admin-space-xl);
box-shadow: var(--admin-elevation-1);
border: 1px solid var(--admin-border-light);
}
.admin-detail__list {
margin: 0;
}
.admin-detail__row {
display: grid;
grid-template-columns: 140px 1fr;
gap: var(--admin-space);
padding: var(--admin-space-sm) 0;
border-bottom: 1px solid var(--admin-border-light);
}
.admin-detail__row:last-child {
border-bottom: none;
}
.admin-detail__row--full {
grid-template-columns: 1fr;
}
.admin-detail__term {
margin: 0;
font-size: var(--admin-fs-body);
font-weight: 500;
color: var(--admin-text-secondary);
}
.admin-detail__value {
margin: 0;
font-size: var(--admin-fs-body-lg);
font-weight: 500;
color: var(--admin-text);
}
.admin-detail__value a {
color: var(--admin-primary);
text-decoration: none;
border-radius: var(--admin-radius-xs);
padding: var(--admin-space-3xs) var(--admin-space-3xs);
margin: calc(var(--admin-space-3xs) * -1);
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-detail__value a:hover {
color: var(--admin-primary-hover);
background: var(--admin-state-hover);
}
.admin-detail__value a:active {
background: var(--admin-state-pressed);
}
.admin-detail__value a:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: 2px;
}
.admin-detail__value--block {
white-space: pre-wrap;
word-break: break-word;
line-height: 1.6;
}
.admin-site__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--admin-space);
margin-top: var(--admin-space-lg);
}
.admin-site__card {
display: flex;
flex-direction: column;
padding: var(--admin-space-lg) var(--admin-space-xl);
background: var(--admin-card-bg);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
text-decoration: none;
color: inherit;
border: 1px solid var(--admin-border-light);
transition: box-shadow var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-site__card:hover {
box-shadow: var(--admin-elevation-2);
background: var(--admin-white);
border-color: var(--admin-border);
transform: translateY(-1px);
}
.admin-site__card:active {
transform: translateY(0);
box-shadow: var(--admin-elevation-1);
}
.admin-site__card:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: var(--admin-focus-ring-offset);
}
.admin-site__card-icon {
display: block;
font-size: var(--admin-fs-menu);
margin-bottom: var(--admin-space);
opacity: 0.9;
color: var(--admin-text);
}
.admin-site__card-icon i {
font-size: inherit;
}
.admin-site__card-title {
margin: 0;
font-size: var(--admin-fs-menu);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.3;
}
.admin-site__card-desc {
margin: var(--admin-space-sm) 0 0;
font-size: var(--admin-fs-body);
font-weight: 500;
color: var(--admin-text-secondary);
line-height: 1.45;
flex: 1;
}
/* 탭 네비게이션은 공용 컴포넌트로 이동: resources/scss/admin/components/_nav-tabs.scss
* (view: admin.components.nav-tabs · 카탈로그: docs/03-constants/components.md) */
.admin-site-meta-aux {
margin-top: var(--admin-space-xl);
padding-top: var(--admin-space-lg);
border-top: 1px solid var(--admin-border-light);
}
.admin-site-meta__robots-pre {
padding: 12px;
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
white-space: pre-wrap;
font-size: var(--admin-fs-xs);
}
/* =========================================================
* Favicon 페이지 전용 UI (7종 카드 그리드 + 업로드 폼)
* ========================================================= */
.admin-favicon {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
/* -------- 상단 요약 -------- */
.admin-favicon__summary {
display: grid;
grid-template-columns: 1fr minmax(200px, 280px);
gap: var(--admin-space);
align-items: center;
padding: var(--admin-space);
background: linear-gradient(135deg, var(--admin-grey-50) 0%, var(--admin-grey-100) 100%);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
}
@media (max-width: 768px) {
.admin-favicon__summary {
grid-template-columns: 1fr;
}
}
.admin-favicon__title {
margin: 0 0 var(--admin-space-3xs) 0;
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text);
}
.admin-favicon__desc {
margin: 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.5;
}
.admin-favicon__desc code {
padding: 1px 5px;
background: var(--admin-grey-200);
border-radius: var(--admin-radius-xs);
font-size: 0.9em;
}
.admin-favicon__summary-stats {
display: flex;
flex-direction: column;
gap: var(--admin-space-3xs);
}
.admin-favicon__progress {
position: relative;
width: 100%;
height: 6px;
background: var(--admin-grey-200);
border-radius: var(--admin-radius-full);
overflow: hidden;
}
.admin-favicon__progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--admin-success) 0%, var(--admin-primary) 100%);
border-radius: inherit;
transition: width var(--admin-duration) var(--admin-ease);
}
.admin-favicon__progress-text {
margin: 0;
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
}
.admin-favicon__progress-text strong {
color: var(--admin-text);
font-size: var(--admin-fs-sm);
font-weight: 700;
}
.admin-favicon__updated {
margin: 0;
font-size: 11px;
color: var(--admin-text-secondary);
display: inline-flex;
align-items: center;
gap: 4px;
}
.admin-favicon__updated i {
opacity: 0.7;
}
/* -------- 카드 그리드 (컴팩트) -------- */
.admin-favicon__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--admin-space-sm);
}
.admin-favicon__card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
background: var(--admin-white);
overflow: hidden;
transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-favicon__card:hover {
border-color: var(--admin-grey-400);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.admin-favicon__card--missing {
background: var(--admin-grey-50);
border-style: dashed;
}
.admin-favicon__card--present {
border-color: rgba(var(--admin-success-rgb), 0.35);
}
.admin-favicon__card-preview {
position: relative;
width: 100%;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
background: var(--admin-grey-100);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-favicon__preview-checker {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--admin-white);
background-image: linear-gradient(45deg, var(--admin-grey-200) 25%, transparent 25%), linear-gradient(-45deg, var(--admin-grey-200) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--admin-grey-200) 75%), linear-gradient(-45deg, transparent 75%, var(--admin-grey-200) 75%);
background-size: 12px 12px;
background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.admin-favicon__preview-img {
max-width: 62%;
max-height: 62%;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}
.admin-favicon__preview-icon {
font-size: 28px;
color: var(--admin-grey-400);
}
.admin-favicon__card--present .admin-favicon__preview-icon {
color: var(--admin-text-secondary);
}
.admin-favicon__status {
position: absolute;
top: 6px;
right: 6px;
width: 18px;
height: 18px;
border-radius: var(--admin-radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.admin-favicon__status--ok {
background: var(--admin-success);
}
.admin-favicon__status--missing {
background: var(--admin-grey-400);
}
.admin-favicon__card-body {
padding: var(--admin-space-xs) var(--admin-space-sm);
display: flex;
flex-direction: column;
gap: 2px;
}
.admin-favicon__card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
}
.admin-favicon__card-label {
font-size: 12px;
font-weight: 600;
color: var(--admin-text);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-favicon__card-size {
flex-shrink: 0;
padding: 1px 6px;
border-radius: var(--admin-radius-full);
background: var(--admin-grey-200);
font-size: 10px;
font-weight: 600;
color: var(--admin-text-secondary);
letter-spacing: 0.2px;
}
.admin-favicon__card-purpose {
margin: 0;
font-size: 11px;
color: var(--admin-text-secondary);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.admin-favicon__card-link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 2px;
font-size: 11px;
color: var(--admin-primary);
text-decoration: none;
font-weight: 500;
}
.admin-favicon__card-link:hover {
text-decoration: underline;
}
/* -------- 업로드 폼 섹션 -------- */
.admin-favicon__form {
margin: 0;
}
.admin-favicon__upload {
padding: var(--admin-space);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-white);
}
.admin-favicon__upload-head {
margin-bottom: var(--admin-space-sm);
}
.admin-favicon__upload-title {
margin: 0 0 var(--admin-space-3xs) 0;
font-size: var(--admin-fs-sm);
font-weight: 700;
color: var(--admin-text);
display: inline-flex;
align-items: center;
gap: 6px;
}
.admin-favicon__upload-title i {
color: var(--admin-primary);
}
.admin-favicon__upload-desc {
margin: 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.5;
}
/* =========================================================
* 소셜 로그인 설정 페이지
* ========================================================= */
.admin-social-provider {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
padding: var(--admin-space-lg);
background: var(--admin-white);
margin-bottom: var(--admin-space);
}
.admin-social-provider:last-of-type {
margin-bottom: 0;
}
.admin-social-provider__header {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space-sm);
}
.admin-social-provider__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--admin-radius-sm);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
flex-shrink: 0;
}
.admin-social-provider__icon svg {
display: block;
}
.admin-social-provider__title {
margin: 0;
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text);
flex: 1;
}
.admin-social-provider__badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: var(--admin-radius-full);
font-size: var(--admin-fs-xs);
font-weight: 600;
}
.admin-social-provider__badge--on {
background: rgba(var(--admin-success-rgb), 0.12);
color: var(--admin-success);
}
.admin-social-provider__badge--off {
background: var(--admin-grey-100);
color: var(--admin-text-muted);
}
.admin-social-provider__callback {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-xs) var(--admin-space-sm);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
margin-bottom: var(--admin-space);
}
.admin-social-provider__callback-label {
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-text-secondary);
white-space: nowrap;
flex-shrink: 0;
}
.admin-social-provider__callback-url {
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
color: var(--admin-primary);
word-break: break-all;
background: none;
border: none;
padding: 0;
}
/* =========================================================
* 언어 설정 토글 리스트
* ========================================================= */
.admin-form__locale-list {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
margin-top: var(--admin-space-sm);
}
.admin-form__locale-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--admin-space-sm) var(--admin-space);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
background: var(--admin-white);
transition: border-color var(--admin-duration) var(--admin-ease);
}
.admin-form__locale-row:hover {
border-color: var(--admin-grey-400);
}
.admin-form__locale-info {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
}
.admin-form__locale-flag {
display: inline-block;
flex-shrink: 0;
width: 20px;
height: 15px;
}
.admin-form__locale-name {
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text);
}
.admin-form__hint-link {
color: var(--admin-primary);
text-decoration: underline;
font-weight: 500;
}
.admin-form__hint-link:hover {
color: var(--admin-primary-hover);
}
.admin-form__og-cache-hint {
margin-top: 0.8rem;
}
.admin-locale {
max-width: 720px;
}
.admin-locale__body {
display: flex;
flex-direction: column;
gap: var(--admin-space-2xl);
}
/* 언어 선택 드롭다운 wrapper */
.admin-locale-select-wrap {
max-width: 32rem;
}
.admin-locale-select-wrap select {
width: 100%;
}
/* 언어 추가 selectbox 하단 여백 */
.admin-locale__add-wrap {
margin-bottom: var(--admin-space-xl);
}
.admin-locale__add-wrap--spaced {
margin-top: var(--admin-space-2xl);
}
/* 활성 언어 리스트 row 간격·패딩 */
.admin-form__locale-list {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
margin-top: var(--admin-space-lg);
}
.admin-form__locale-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--admin-space-lg) var(--admin-space-xl);
min-height: 5.6rem;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
background: var(--admin-white);
transition: border-color var(--admin-duration) var(--admin-ease);
}
.admin-form__locale-row:hover {
border-color: var(--admin-grey-400);
}
.admin-form__locale-info {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
flex: 1;
min-width: 0;
}
/* 드래그 핸들 */
.admin-form__locale-handle {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.4rem;
height: 2.4rem;
margin-right: var(--admin-space-xs);
color: var(--admin-text-muted);
cursor: grab;
border-radius: var(--admin-radius-xs);
transition: background-color var(--admin-duration-short) var(--admin-ease);
}
.admin-form__locale-handle:hover {
background-color: var(--admin-grey-100);
color: var(--admin-text-secondary);
}
.admin-form__locale-handle:active {
cursor: grabbing;
}
.admin-form__locale-handle i {
font-size: 1.4rem;
pointer-events: none;
}
/* 토글 + 구분선 + 삭제버튼 묶음 */
.admin-form__locale-actions {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
flex-shrink: 0;
}
/* 토글과 삭제 버튼 사이 수직 구분선 */
.admin-locale__actions-divider {
display: block;
width: 1px;
height: 2rem;
background: var(--admin-border-light);
flex-shrink: 0;
}
.admin-form__locale-row:hover .admin-locale__actions-divider {
background: var(--admin-border);
}
.admin-locale__delete-form {
display: inline-flex;
}
.locale-flag {
display: inline-block;
flex-shrink: 0;
width: 20px;
height: 15px;
border-radius: 2px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
background-image: image-set(url("/assets/images/intl-tel-input/flags.webp") 1x, url("/assets/images/intl-tel-input/flags@2x.webp") 2x);
background-repeat: no-repeat;
background-size: 4880px 15px;
}
.cs-option__label .locale-flag {
vertical-align: middle;
margin-right: var(--admin-space-xs);
margin-top: -1px;
}
.cs-trigger__value .locale-flag {
vertical-align: middle;
margin-right: var(--admin-space-xs);
margin-top: -1px;
}
.locale-flag--ac {
background-position: 0px 0;
}
.locale-flag--ad {
background-position: -20px 0;
}
.locale-flag--ae {
background-position: -40px 0;
}
.locale-flag--af {
background-position: -60px 0;
}
.locale-flag--ag {
background-position: -80px 0;
}
.locale-flag--ai {
background-position: -100px 0;
}
.locale-flag--al {
background-position: -120px 0;
}
.locale-flag--am {
background-position: -140px 0;
}
.locale-flag--ao {
background-position: -160px 0;
}
.locale-flag--ar {
background-position: -180px 0;
}
.locale-flag--as {
background-position: -200px 0;
}
.locale-flag--at {
background-position: -220px 0;
}
.locale-flag--au {
background-position: -240px 0;
}
.locale-flag--aw {
background-position: -260px 0;
}
.locale-flag--ax {
background-position: -280px 0;
}
.locale-flag--az {
background-position: -300px 0;
}
.locale-flag--ba {
background-position: -320px 0;
}
.locale-flag--bb {
background-position: -340px 0;
}
.locale-flag--bd {
background-position: -360px 0;
}
.locale-flag--be {
background-position: -380px 0;
}
.locale-flag--bf {
background-position: -400px 0;
}
.locale-flag--bg {
background-position: -420px 0;
}
.locale-flag--bh {
background-position: -440px 0;
}
.locale-flag--bi {
background-position: -460px 0;
}
.locale-flag--bj {
background-position: -480px 0;
}
.locale-flag--bl {
background-position: -500px 0;
}
.locale-flag--bm {
background-position: -520px 0;
}
.locale-flag--bn {
background-position: -540px 0;
}
.locale-flag--bo {
background-position: -560px 0;
}
.locale-flag--bq {
background-position: -580px 0;
}
.locale-flag--br {
background-position: -600px 0;
}
.locale-flag--bs {
background-position: -620px 0;
}
.locale-flag--bt {
background-position: -640px 0;
}
.locale-flag--bw {
background-position: -660px 0;
}
.locale-flag--by {
background-position: -680px 0;
}
.locale-flag--bz {
background-position: -700px 0;
}
.locale-flag--ca {
background-position: -720px 0;
}
.locale-flag--cc {
background-position: -740px 0;
}
.locale-flag--cd {
background-position: -760px 0;
}
.locale-flag--cf {
background-position: -780px 0;
}
.locale-flag--cg {
background-position: -800px 0;
}
.locale-flag--ch {
background-position: -820px 0;
}
.locale-flag--ci {
background-position: -840px 0;
}
.locale-flag--ck {
background-position: -860px 0;
}
.locale-flag--cl {
background-position: -880px 0;
}
.locale-flag--cm {
background-position: -900px 0;
}
.locale-flag--cn {
background-position: -920px 0;
}
.locale-flag--co {
background-position: -940px 0;
}
.locale-flag--cr {
background-position: -960px 0;
}
.locale-flag--cu {
background-position: -980px 0;
}
.locale-flag--cv {
background-position: -1000px 0;
}
.locale-flag--cw {
background-position: -1020px 0;
}
.locale-flag--cx {
background-position: -1040px 0;
}
.locale-flag--cy {
background-position: -1060px 0;
}
.locale-flag--cz {
background-position: -1080px 0;
}
.locale-flag--de {
background-position: -1100px 0;
}
.locale-flag--dj {
background-position: -1120px 0;
}
.locale-flag--dk {
background-position: -1140px 0;
}
.locale-flag--dm {
background-position: -1160px 0;
}
.locale-flag--do {
background-position: -1180px 0;
}
.locale-flag--dz {
background-position: -1200px 0;
}
.locale-flag--ec {
background-position: -1220px 0;
}
.locale-flag--ee {
background-position: -1240px 0;
}
.locale-flag--eg {
background-position: -1260px 0;
}
.locale-flag--eh {
background-position: -1280px 0;
}
.locale-flag--er {
background-position: -1300px 0;
}
.locale-flag--es {
background-position: -1320px 0;
}
.locale-flag--et {
background-position: -1340px 0;
}
.locale-flag--fi {
background-position: -1360px 0;
}
.locale-flag--fj {
background-position: -1380px 0;
}
.locale-flag--fk {
background-position: -1400px 0;
}
.locale-flag--fm {
background-position: -1420px 0;
}
.locale-flag--fo {
background-position: -1440px 0;
}
.locale-flag--fr {
background-position: -1460px 0;
}
.locale-flag--ga {
background-position: -1480px 0;
}
.locale-flag--gb {
background-position: -1500px 0;
}
.locale-flag--gd {
background-position: -1520px 0;
}
.locale-flag--ge {
background-position: -1540px 0;
}
.locale-flag--gf {
background-position: -1560px 0;
}
.locale-flag--gg {
background-position: -1580px 0;
}
.locale-flag--gh {
background-position: -1600px 0;
}
.locale-flag--gi {
background-position: -1620px 0;
}
.locale-flag--gl {
background-position: -1640px 0;
}
.locale-flag--gm {
background-position: -1660px 0;
}
.locale-flag--gn {
background-position: -1680px 0;
}
.locale-flag--gp {
background-position: -1700px 0;
}
.locale-flag--gq {
background-position: -1720px 0;
}
.locale-flag--gr {
background-position: -1740px 0;
}
.locale-flag--gt {
background-position: -1760px 0;
}
.locale-flag--gu {
background-position: -1780px 0;
}
.locale-flag--gw {
background-position: -1800px 0;
}
.locale-flag--gy {
background-position: -1820px 0;
}
.locale-flag--hk {
background-position: -1840px 0;
}
.locale-flag--hn {
background-position: -1860px 0;
}
.locale-flag--hr {
background-position: -1880px 0;
}
.locale-flag--ht {
background-position: -1900px 0;
}
.locale-flag--hu {
background-position: -1920px 0;
}
.locale-flag--id {
background-position: -1940px 0;
}
.locale-flag--ie {
background-position: -1960px 0;
}
.locale-flag--il {
background-position: -1980px 0;
}
.locale-flag--im {
background-position: -2000px 0;
}
.locale-flag--in {
background-position: -2020px 0;
}
.locale-flag--io {
background-position: -2040px 0;
}
.locale-flag--iq {
background-position: -2060px 0;
}
.locale-flag--ir {
background-position: -2080px 0;
}
.locale-flag--is {
background-position: -2100px 0;
}
.locale-flag--it {
background-position: -2120px 0;
}
.locale-flag--je {
background-position: -2140px 0;
}
.locale-flag--jm {
background-position: -2160px 0;
}
.locale-flag--jo {
background-position: -2180px 0;
}
.locale-flag--jp {
background-position: -2200px 0;
}
.locale-flag--ke {
background-position: -2220px 0;
}
.locale-flag--kg {
background-position: -2240px 0;
}
.locale-flag--kh {
background-position: -2260px 0;
}
.locale-flag--ki {
background-position: -2280px 0;
}
.locale-flag--km {
background-position: -2300px 0;
}
.locale-flag--kn {
background-position: -2320px 0;
}
.locale-flag--kp {
background-position: -2340px 0;
}
.locale-flag--kr {
background-position: -2360px 0;
}
.locale-flag--kw {
background-position: -2380px 0;
}
.locale-flag--ky {
background-position: -2400px 0;
}
.locale-flag--kz {
background-position: -2420px 0;
}
.locale-flag--la {
background-position: -2440px 0;
}
.locale-flag--lb {
background-position: -2460px 0;
}
.locale-flag--lc {
background-position: -2480px 0;
}
.locale-flag--li {
background-position: -2500px 0;
}
.locale-flag--lk {
background-position: -2520px 0;
}
.locale-flag--lr {
background-position: -2540px 0;
}
.locale-flag--ls {
background-position: -2560px 0;
}
.locale-flag--lt {
background-position: -2580px 0;
}
.locale-flag--lu {
background-position: -2600px 0;
}
.locale-flag--lv {
background-position: -2620px 0;
}
.locale-flag--ly {
background-position: -2640px 0;
}
.locale-flag--ma {
background-position: -2660px 0;
}
.locale-flag--mc {
background-position: -2680px 0;
}
.locale-flag--md {
background-position: -2700px 0;
}
.locale-flag--me {
background-position: -2720px 0;
}
.locale-flag--mf {
background-position: -2740px 0;
}
.locale-flag--mg {
background-position: -2760px 0;
}
.locale-flag--mh {
background-position: -2780px 0;
}
.locale-flag--mk {
background-position: -2800px 0;
}
.locale-flag--ml {
background-position: -2820px 0;
}
.locale-flag--mm {
background-position: -2840px 0;
}
.locale-flag--mn {
background-position: -2860px 0;
}
.locale-flag--mo {
background-position: -2880px 0;
}
.locale-flag--mp {
background-position: -2900px 0;
}
.locale-flag--mq {
background-position: -2920px 0;
}
.locale-flag--mr {
background-position: -2940px 0;
}
.locale-flag--ms {
background-position: -2960px 0;
}
.locale-flag--mt {
background-position: -2980px 0;
}
.locale-flag--mu {
background-position: -3000px 0;
}
.locale-flag--mv {
background-position: -3020px 0;
}
.locale-flag--mw {
background-position: -3040px 0;
}
.locale-flag--mx {
background-position: -3060px 0;
}
.locale-flag--my {
background-position: -3080px 0;
}
.locale-flag--mz {
background-position: -3100px 0;
}
.locale-flag--na {
background-position: -3120px 0;
}
.locale-flag--nc {
background-position: -3140px 0;
}
.locale-flag--ne {
background-position: -3160px 0;
}
.locale-flag--nf {
background-position: -3180px 0;
}
.locale-flag--ng {
background-position: -3200px 0;
}
.locale-flag--ni {
background-position: -3220px 0;
}
.locale-flag--nl {
background-position: -3240px 0;
}
.locale-flag--no {
background-position: -3260px 0;
}
.locale-flag--np {
background-position: -3280px 0;
}
.locale-flag--nr {
background-position: -3300px 0;
}
.locale-flag--nu {
background-position: -3320px 0;
}
.locale-flag--nz {
background-position: -3340px 0;
}
.locale-flag--om {
background-position: -3360px 0;
}
.locale-flag--pa {
background-position: -3380px 0;
}
.locale-flag--pe {
background-position: -3400px 0;
}
.locale-flag--pf {
background-position: -3420px 0;
}
.locale-flag--pg {
background-position: -3440px 0;
}
.locale-flag--ph {
background-position: -3460px 0;
}
.locale-flag--pk {
background-position: -3480px 0;
}
.locale-flag--pl {
background-position: -3500px 0;
}
.locale-flag--pm {
background-position: -3520px 0;
}
.locale-flag--pr {
background-position: -3540px 0;
}
.locale-flag--ps {
background-position: -3560px 0;
}
.locale-flag--pt {
background-position: -3580px 0;
}
.locale-flag--pw {
background-position: -3600px 0;
}
.locale-flag--py {
background-position: -3620px 0;
}
.locale-flag--qa {
background-position: -3640px 0;
}
.locale-flag--re {
background-position: -3660px 0;
}
.locale-flag--ro {
background-position: -3680px 0;
}
.locale-flag--rs {
background-position: -3700px 0;
}
.locale-flag--ru {
background-position: -3720px 0;
}
.locale-flag--rw {
background-position: -3740px 0;
}
.locale-flag--sa {
background-position: -3760px 0;
}
.locale-flag--sb {
background-position: -3780px 0;
}
.locale-flag--sc {
background-position: -3800px 0;
}
.locale-flag--sd {
background-position: -3820px 0;
}
.locale-flag--se {
background-position: -3840px 0;
}
.locale-flag--sg {
background-position: -3860px 0;
}
.locale-flag--sh {
background-position: -3880px 0;
}
.locale-flag--si {
background-position: -3900px 0;
}
.locale-flag--sj {
background-position: -3920px 0;
}
.locale-flag--sk {
background-position: -3940px 0;
}
.locale-flag--sl {
background-position: -3960px 0;
}
.locale-flag--sm {
background-position: -3980px 0;
}
.locale-flag--sn {
background-position: -4000px 0;
}
.locale-flag--so {
background-position: -4020px 0;
}
.locale-flag--sr {
background-position: -4040px 0;
}
.locale-flag--ss {
background-position: -4060px 0;
}
.locale-flag--st {
background-position: -4080px 0;
}
.locale-flag--sv {
background-position: -4100px 0;
}
.locale-flag--sx {
background-position: -4120px 0;
}
.locale-flag--sy {
background-position: -4140px 0;
}
.locale-flag--sz {
background-position: -4160px 0;
}
.locale-flag--tc {
background-position: -4180px 0;
}
.locale-flag--td {
background-position: -4200px 0;
}
.locale-flag--tg {
background-position: -4220px 0;
}
.locale-flag--th {
background-position: -4240px 0;
}
.locale-flag--tj {
background-position: -4260px 0;
}
.locale-flag--tk {
background-position: -4280px 0;
}
.locale-flag--tl {
background-position: -4300px 0;
}
.locale-flag--tm {
background-position: -4320px 0;
}
.locale-flag--tn {
background-position: -4340px 0;
}
.locale-flag--to {
background-position: -4360px 0;
}
.locale-flag--tr {
background-position: -4380px 0;
}
.locale-flag--tt {
background-position: -4400px 0;
}
.locale-flag--tv {
background-position: -4420px 0;
}
.locale-flag--tw {
background-position: -4440px 0;
}
.locale-flag--tz {
background-position: -4460px 0;
}
.locale-flag--ua {
background-position: -4480px 0;
}
.locale-flag--ug {
background-position: -4500px 0;
}
.locale-flag--us {
background-position: -4520px 0;
}
.locale-flag--uy {
background-position: -4540px 0;
}
.locale-flag--uz {
background-position: -4560px 0;
}
.locale-flag--va {
background-position: -4580px 0;
}
.locale-flag--vc {
background-position: -4600px 0;
}
.locale-flag--ve {
background-position: -4620px 0;
}
.locale-flag--vg {
background-position: -4640px 0;
}
.locale-flag--vi {
background-position: -4660px 0;
}
.locale-flag--vn {
background-position: -4680px 0;
}
.locale-flag--vu {
background-position: -4700px 0;
}
.locale-flag--wf {
background-position: -4720px 0;
}
.locale-flag--ws {
background-position: -4740px 0;
}
.locale-flag--xk {
background-position: -4760px 0;
}
.locale-flag--ye {
background-position: -4780px 0;
}
.locale-flag--yt {
background-position: -4800px 0;
}
.locale-flag--za {
background-position: -4820px 0;
}
.locale-flag--zm {
background-position: -4840px 0;
}
.locale-flag--zw {
background-position: -4860px 0;
}
/* =========================================================
* 프로젝트 변수 문서 편집기 (view: admin.pages.project-docs.edit)
* 세로 스택 레이아웃:
* ① 메타데이터 카드 (프런트매터 필드별 입력)
* ② 본문 카드 (마크다운 textarea, 풀-와이드)
* ③ 미리보기 카드 (메타박스 + 본문 렌더, 풀-와이드)
* 탭은 공용 컴포넌트(.admin-nav-tabs), 버튼은 .admin-form__actions 재사용 — 여기엔 페이지 고유 레이아웃만.
* ========================================================= */
.admin-project-docs__filemeta {
margin: var(--admin-space-2xs) 0 var(--admin-space);
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-project-docs__filemeta code {
padding: 1px 5px;
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
}
.admin-project-docs__form {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-project-docs {
/* --- 카드 (메타·본문·미리보기 공통 컨테이너) ---------------------------- */
}
.admin-project-docs__card {
box-sizing: border-box;
padding: var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-project-docs__card + .admin-project-docs__card {
margin-top: 0;
}
.admin-project-docs__card--preview {
background: var(--admin-grey-50);
}
.admin-project-docs__card-header {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: var(--admin-space);
padding-bottom: var(--admin-space-sm);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-project-docs__card-title {
margin: 0;
font-size: var(--admin-fs-body-lg);
font-weight: 600;
color: var(--admin-text);
letter-spacing: -0.01em;
}
.admin-project-docs__card-desc {
margin: 0;
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-project-docs {
/* --- 메타 카드 내부 grid (2열, 작은 화면에서 1열) ----------------------- */
}
.admin-project-docs__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--admin-space) var(--admin-space-lg);
}
@media (max-width: 1024px) {
.admin-project-docs__grid {
grid-template-columns: 1fr;
}
}
.admin-project-docs__grid-row {
min-width: 0;
}
.admin-project-docs__grid-row--full {
grid-column: 1/-1;
}
.admin-project-docs__grid-row .admin-form__block {
margin: 0;
}
.admin-project-docs {
/* --- 본문 textarea ---------------------------------------------------- */
}
.admin-project-docs__textarea {
width: 100%;
box-sizing: border-box;
min-height: max(var(--admin-size-editor-min-height), 60vh);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-sm);
line-height: 1.7;
tab-size: 2;
white-space: pre;
overflow: auto;
resize: vertical;
padding: var(--admin-space-sm) var(--admin-space);
}
.admin-project-docs {
/* --- 미리보기: 메타박스 ------------------------------------------------ */
}
.admin-project-docs__meta-box {
margin: 0 0 var(--admin-space-lg);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
display: grid;
grid-template-columns: minmax(110px, max-content) 1fr;
gap: var(--admin-space-2xs) var(--admin-space);
font-size: var(--admin-fs-sm);
}
.admin-project-docs__meta-row {
display: contents;
}
.admin-project-docs__meta-row dt {
font-weight: 600;
color: var(--admin-text-muted);
font-family: "Poppins", sans-serif;
font-size: 0.92em;
padding-top: 1px;
}
.admin-project-docs__meta-row dd {
margin: 0;
color: var(--admin-text);
display: flex;
flex-wrap: wrap;
gap: 4px;
word-break: break-word;
}
.admin-project-docs__chip {
display: inline-flex;
align-items: center;
padding: 1px 9px;
background: rgba(var(--admin-primary-rgb), 0.06);
color: var(--admin-primary);
border: 1px solid rgba(var(--admin-primary-rgb), 0.18);
border-radius: var(--admin-radius-full);
font-size: 0.88em;
font-family: "Poppins", sans-serif;
line-height: 1.7;
}
.admin-project-docs__chip--empty {
background: transparent;
border-color: transparent;
color: var(--admin-text-muted);
font-style: italic;
padding: 0;
}
.admin-project-docs {
/* --- 미리보기 본문 ---------------------------------------------------- */
}
.admin-project-docs__preview {
box-sizing: border-box;
min-height: 40vh;
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
color: var(--admin-text);
font-size: var(--admin-fs-body);
line-height: 1.75;
word-break: break-word;
overflow: auto;
}
.admin-project-docs__preview > :first-child {
margin-top: 0;
}
.admin-project-docs__preview h1, .admin-project-docs__preview h2, .admin-project-docs__preview h3, .admin-project-docs__preview h4, .admin-project-docs__preview h5, .admin-project-docs__preview h6 {
margin: 1.3em 0 0.5em;
line-height: 1.3;
}
.admin-project-docs__preview h1 {
font-size: 1.5em;
padding-bottom: 0.2em;
border-bottom: 1px solid var(--admin-border-light);
}
.admin-project-docs__preview h2 {
font-size: 1.28em;
padding-bottom: 0.15em;
border-bottom: 1px solid var(--admin-border-light);
}
.admin-project-docs__preview h3 {
font-size: 1.12em;
}
.admin-project-docs__preview p {
margin: 0.6em 0;
}
.admin-project-docs__preview a {
color: var(--admin-primary);
}
.admin-project-docs__preview code {
padding: 1px 5px;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-sm);
font-family: "Poppins", sans-serif;
font-size: 0.88em;
}
.admin-project-docs__preview pre {
margin: 0.8em 0;
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-grey-900);
color: var(--admin-grey-100);
border-radius: var(--admin-radius-sm);
overflow: auto;
}
.admin-project-docs__preview pre code {
padding: 0;
background: none;
color: inherit;
font-size: 0.85em;
}
.admin-project-docs__preview blockquote {
margin: 0.6em 0;
padding: 0.2em 0.9em;
border-left: 3px solid var(--admin-border);
color: var(--admin-text-secondary);
}
.admin-project-docs__preview ul, .admin-project-docs__preview ol {
margin: 0.5em 0;
padding-left: 1.4em;
}
.admin-project-docs__preview li {
margin: 0.2em 0;
}
.admin-project-docs__preview hr {
margin: 1.3em 0;
border: 0;
border-top: 1px solid var(--admin-border-light);
}
.admin-project-docs__preview table {
margin: 0.6em 0;
border-collapse: collapse;
width: 100%;
}
.admin-project-docs__preview th, .admin-project-docs__preview td {
padding: 0.4em 0.7em;
border: 1px solid var(--admin-border-light);
}
.admin-project-docs__preview th {
background: var(--admin-grey-50);
font-weight: 600;
}
/* =========================================================
* 프로젝트 정보 자동 업데이트 (view: admin.pages.project-sync.edit)
* 세로 스택 카드 레이아웃:
* ① API 키 카드 (Anthropic 키 입력)
* ② 본 입력 카드 (자유 텍스트 → 5개 정본 문서 갱신)
* ③ 최근 백업 카드 (있을 때만, 되돌리기 버튼)
* project-docs 의 카드 톤을 그대로 따른다 — 동일 그룹(insight/docs).
* ========================================================= */
.admin-project-sync {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-project-sync__card {
box-sizing: border-box;
padding: var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-project-sync__card-header {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: var(--admin-space);
padding-bottom: var(--admin-space-sm);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-project-sync__card-title {
margin: 0;
font-size: var(--admin-fs-body-lg);
font-weight: 600;
color: var(--admin-text);
letter-spacing: -0.01em;
}
.admin-project-sync__card-desc {
margin: 0;
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
line-height: 1.6;
}
.admin-project-sync__card-desc strong {
color: var(--admin-text);
}
.admin-project-sync__card-desc a {
color: var(--admin-primary);
text-decoration: underline;
text-decoration-color: rgba(var(--admin-primary-rgb), 0.35);
text-underline-offset: 2px;
}
.admin-project-sync__card-desc a:hover {
text-decoration-color: var(--admin-primary);
}
.admin-project-sync {
/* code 칩 (백업 디렉터리명 등) */
}
.admin-project-sync code {
padding: 1px 6px;
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
font-family: "Poppins", sans-serif;
font-size: 0.92em;
color: var(--admin-text);
}
.admin-project-sync {
/* 본 입력 textarea — 자유 텍스트라 mono 폰트는 부담스러움. 본문 폰트 유지 + 적당한 높이. */
}
.admin-project-sync .admin-form__textarea {
min-height: 28rem;
line-height: 1.7;
}
/* =========================================================
* 문서 라이브러리 (view: admin.pages.library.index / .show)
* 21st.dev 스타일 — 좌 카테고리 사이드바(체크박스형 다중 선택) + 우 2열 카드 그리드.
* 필터링은 클라이언트(TS) 가 비동기로 — 카테고리 토글·검색 시 새로고침 없음.
* ========================================================= */
.admin-library__layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--admin-space-xl, 32px);
align-items: start;
margin-top: var(--admin-space-lg);
}
@media (max-width: 1024px) {
.admin-library__layout {
grid-template-columns: 1fr;
gap: var(--admin-space);
}
}
.admin-library {
/* ----------------------------------------------- 사이드바 ----- */
}
.admin-library__sidebar {
position: sticky;
top: var(--admin-space);
align-self: start;
display: flex;
flex-direction: column;
gap: var(--admin-space-lg);
}
@media (max-width: 1024px) {
.admin-library__sidebar {
position: static;
}
}
.admin-library__sidebar-section {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-library__sidebar-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--admin-space-2xs);
}
.admin-library__sidebar-title {
margin: 0;
font-size: var(--admin-fs-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--admin-text-muted);
}
.admin-library__sidebar-clear {
appearance: none;
background: none;
border: 0;
padding: 2px 6px;
border-radius: var(--admin-radius-sm);
font-size: var(--admin-fs-xs);
color: var(--admin-primary);
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease);
}
.admin-library__sidebar-clear:hover {
background: rgba(59, 130, 246, 0.08);
}
.admin-library__sidebar-clear.is-hidden {
display: none;
}
.admin-library__sidebar-hint {
margin: var(--admin-space-xs) 0 0;
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
line-height: 1.5;
}
.admin-library__cats {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.admin-library__cat {
appearance: none;
background: none;
border: 0;
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--admin-radius-sm);
color: var(--admin-text);
text-align: left;
font-size: var(--admin-fs-sm);
line-height: 1.3;
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-library__cat:hover:not(:disabled) {
background: var(--admin-grey-50);
}
.admin-library__cat {
/* active 가 base hover 보다 우선되도록 specificity 를 :not(:disabled) 까지 맞춤 */
}
.admin-library__cat--active, .admin-library__cat--active:hover:not(:disabled), .admin-library__cat--active:focus-visible {
background: var(--admin-grey-900);
color: var(--admin-white);
}
.admin-library__cat--empty {
opacity: 0.45;
cursor: not-allowed;
}
.admin-library__cat:disabled {
cursor: not-allowed;
}
.admin-library__cat-check {
flex: 0 0 18px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--admin-border);
border-radius: 5px;
background: var(--admin-card-bg);
font-size: 10px;
color: transparent;
transition: background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-library__cat--active .admin-library__cat-check {
background: var(--admin-white);
border-color: var(--admin-white);
color: var(--admin-grey-900);
}
.admin-library__cat-label {
flex: 1;
min-width: 0;
font-weight: 500;
}
.admin-library__cat-count {
font-variant-numeric: tabular-nums;
font-size: var(--admin-fs-xs);
opacity: 0.6;
}
.admin-library {
/* ----------------------------------------------- 메인 ----- */
}
.admin-library__main {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-library__searchbar {
display: flex;
gap: var(--admin-space);
align-items: center;
flex-wrap: wrap;
}
.admin-library__search {
position: relative;
flex: 1;
min-width: 280px;
}
.admin-library__search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--admin-text-muted);
font-size: var(--admin-fs-sm);
pointer-events: none;
}
.admin-library__search-input {
width: 100%;
box-sizing: border-box;
padding: 12px 40px;
border: 1px solid var(--admin-border-light);
border-radius: 10px;
background: var(--admin-card-bg);
color: var(--admin-text);
font-size: var(--admin-fs-body);
line-height: 1.4;
transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-library__search-input::placeholder {
color: var(--admin-text-muted);
}
.admin-library__search-input:focus {
outline: none;
border-color: var(--admin-grey-900);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.admin-library__search-clear {
appearance: none;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--admin-text-muted);
background: none;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-library__search-clear:hover {
background: var(--admin-grey-100);
color: var(--admin-text);
}
.admin-library__search-clear.is-hidden {
display: none;
}
.admin-library__searchbar-meta {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
font-variant-numeric: tabular-nums;
}
.admin-library__searchbar-meta strong {
color: var(--admin-text);
font-weight: 700;
}
.admin-library__activefilters {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.admin-library__activefilters.is-hidden {
display: none;
}
.admin-library__chip {
appearance: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
background: var(--admin-grey-900);
color: var(--admin-white);
border: 0;
font-size: var(--admin-fs-xs);
cursor: pointer;
transition: opacity var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-library__chip:hover {
opacity: 0.85;
transform: translateY(-1px);
}
.admin-library__chip strong {
font-weight: 600;
}
.admin-library__chip i {
font-size: 10px;
opacity: 0.7;
}
.admin-library__empty {
padding: calc(var(--admin-space-lg) * 2.5) var(--admin-space);
text-align: center;
color: var(--admin-text-secondary);
background: var(--admin-card-bg);
border: 1px dashed var(--admin-border-light);
border-radius: var(--admin-radius);
}
.admin-library__empty.is-hidden {
display: none;
}
.admin-library {
/* ----------------------------------------------- 카드 그리드 (2열) ----- */
}
.admin-library__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--admin-space);
}
@media (max-width: 768px) {
.admin-library__grid {
grid-template-columns: 1fr;
}
}
.admin-library__card {
position: relative;
display: flex;
flex-direction: column;
background: var(--admin-card-bg);
border-radius: 14px;
border: 1px solid var(--admin-border-light);
overflow: hidden;
transition: box-shadow var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-library__card:hover {
box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
border-color: var(--admin-grey-300, #d1d5db);
transform: translateY(-2px);
}
.admin-library__card:hover .admin-library__card-cta {
color: var(--admin-text);
opacity: 1;
transform: translateX(2px);
}
.admin-library__card[hidden] {
display: none;
}
.admin-library__card-link {
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 24px 18px;
text-decoration: none;
color: inherit;
flex: 1;
min-height: 200px;
}
.admin-library__card-head {
display: flex;
flex-direction: column;
gap: 10px;
}
.admin-library__card-cats {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.admin-library__card-cats li {
padding: 3px 10px;
border-radius: 999px;
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
font-size: 11px;
font-weight: 500;
line-height: 1.45;
letter-spacing: 0.01em;
}
.admin-library__card-title {
margin: 0;
font-size: 17px;
font-weight: 700;
line-height: 1.35;
color: var(--admin-text);
letter-spacing: -0.01em;
}
.admin-library__card-desc {
margin: 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.admin-library__card-foot {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--admin-grey-100);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--admin-space-xs);
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-library__card-rel {
font-family: "Poppins", sans-serif;
font-size: 11px;
color: var(--admin-text-muted);
word-break: break-all;
min-width: 0;
flex: 1;
}
.admin-library__card-cta {
flex-shrink: 0;
color: var(--admin-text-muted);
font-weight: 500;
opacity: 0.7;
transition: color var(--admin-duration) var(--admin-ease), opacity var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-library__card-cta i {
margin-left: 4px;
font-size: 10px;
}
.admin-library__copy {
appearance: none;
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
border: 1px solid var(--admin-border-light);
background: var(--admin-white);
color: var(--admin-text);
font-size: var(--admin-fs-xs);
font-weight: 500;
cursor: pointer;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
opacity: 0;
transform: translateY(-2px);
transition: opacity var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-library__copy:hover {
background: var(--admin-grey-900);
color: var(--admin-white);
border-color: var(--admin-grey-900);
}
.admin-library__card:hover .admin-library__copy, .admin-library__card:focus-within .admin-library__copy {
opacity: 1;
transform: translateY(0);
}
.admin-library {
/* ----------------------------------------------- 상세 ----- */
}
.admin-library--show .admin-library__detail-crumb {
margin: 0 0 var(--admin-space-2xs);
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-library--show .admin-library__detail-crumb .admin-breadcrumb__link {
color: inherit;
text-decoration: none;
}
.admin-library--show .admin-library__detail-crumb .admin-breadcrumb__link:hover {
color: var(--admin-text);
}
.admin-library--show .admin-library__detail-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--admin-space-lg);
align-items: start;
margin-top: var(--admin-space);
}
@media (max-width: 1024px) {
.admin-library--show .admin-library__detail-layout {
grid-template-columns: 1fr;
}
}
.admin-library--show .admin-library__detail-body {
box-sizing: border-box;
padding: var(--admin-space-lg) var(--admin-space-xl, 32px);
border: 1px solid var(--admin-border-light);
border-radius: 12px;
background: var(--admin-card-bg);
color: var(--admin-text);
font-size: var(--admin-fs-body);
line-height: 1.7;
word-break: break-word;
min-height: 60vh;
}
.admin-library--show .admin-library__detail-body > :first-child {
margin-top: 0;
}
.admin-library--show .admin-library__detail-body h1, .admin-library--show .admin-library__detail-body h2, .admin-library--show .admin-library__detail-body h3, .admin-library--show .admin-library__detail-body h4, .admin-library--show .admin-library__detail-body h5, .admin-library--show .admin-library__detail-body h6 {
margin: 1.3em 0 0.5em;
line-height: 1.3;
}
.admin-library--show .admin-library__detail-body h1 {
font-size: 1.5em;
padding-bottom: 0.2em;
border-bottom: 1px solid var(--admin-border-light);
}
.admin-library--show .admin-library__detail-body h2 {
font-size: 1.28em;
padding-bottom: 0.15em;
border-bottom: 1px solid var(--admin-border-light);
}
.admin-library--show .admin-library__detail-body h3 {
font-size: 1.12em;
}
.admin-library--show .admin-library__detail-body p {
margin: 0.6em 0;
}
.admin-library--show .admin-library__detail-body a {
color: var(--admin-primary);
}
.admin-library--show .admin-library__detail-body code {
padding: 1px 5px;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-sm);
font-family: "Poppins", sans-serif;
font-size: 0.88em;
}
.admin-library--show .admin-library__detail-body pre {
margin: 0.8em 0;
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-grey-900);
color: var(--admin-grey-100);
border-radius: var(--admin-radius-sm);
overflow: auto;
}
.admin-library--show .admin-library__detail-body pre code {
padding: 0;
background: none;
color: inherit;
font-size: 0.85em;
}
.admin-library--show .admin-library__detail-body blockquote {
margin: 0.6em 0;
padding: 0.2em 0.9em;
border-left: 3px solid var(--admin-border);
color: var(--admin-text-secondary);
}
.admin-library--show .admin-library__detail-body ul, .admin-library--show .admin-library__detail-body ol {
margin: 0.5em 0;
padding-left: 1.4em;
}
.admin-library--show .admin-library__detail-body li {
margin: 0.2em 0;
}
.admin-library--show .admin-library__detail-body hr {
margin: 1.3em 0;
border: 0;
border-top: 1px solid var(--admin-border-light);
}
.admin-library--show .admin-library__detail-body table {
margin: 0.6em 0;
border-collapse: collapse;
}
.admin-library--show .admin-library__detail-body th, .admin-library--show .admin-library__detail-body td {
padding: 0.3em 0.6em;
border: 1px solid var(--admin-border-light);
}
.admin-library--show .admin-library__detail-meta {
position: sticky;
top: var(--admin-space);
display: flex;
flex-direction: column;
gap: var(--admin-space);
padding: var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: 12px;
font-size: var(--admin-fs-sm);
}
@media (max-width: 1024px) {
.admin-library--show .admin-library__detail-meta {
position: static;
}
}
.admin-library--show .admin-library__meta-list {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.admin-library--show .admin-library__meta-list > div {
display: flex;
justify-content: space-between;
gap: var(--admin-space);
}
.admin-library--show .admin-library__meta-list dt {
color: var(--admin-text-muted);
margin: 0;
font-size: var(--admin-fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-library--show .admin-library__meta-list dd {
margin: 0;
color: var(--admin-text);
text-align: right;
}
.admin-library--show .admin-library__meta-list dd a {
color: var(--admin-primary);
text-decoration: none;
}
.admin-library--show .admin-library__meta-list dd span {
margin: 0 4px;
color: var(--admin-text-muted);
}
.admin-library--show .admin-library__meta-list dd code {
font-family: "Poppins", sans-serif;
font-size: 0.85em;
color: var(--admin-text-secondary);
}
.admin-library--show .admin-library__meta-block h3 {
margin: 0 0 var(--admin-space-2xs);
font-size: var(--admin-fs-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--admin-text-muted);
}
.admin-library--show .admin-library__meta-related {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.admin-library--show .admin-library__meta-related a {
color: var(--admin-primary);
text-decoration: none;
font-size: var(--admin-fs-sm);
}
.admin-library--show .admin-library__meta-related a:hover {
text-decoration: underline;
}
.admin-library--show .admin-library__raw {
width: 100%;
box-sizing: border-box;
min-height: 140px;
max-height: 280px;
padding: 10px 12px;
border: 1px solid var(--admin-border-light);
border-radius: 8px;
font-family: "Poppins", sans-serif;
font-size: 11px;
line-height: 1.6;
resize: vertical;
background: var(--admin-grey-50);
color: var(--admin-text);
}
/* =========================================================
* Admin Work / Templates / Sections / Categories 스타일
* ========================================================= */
/* 섹션 카드 그리드 (admin.site.work-sections.index) */
.admin-work-sections__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--admin-space);
}
.admin-work-sections__thumb {
overflow: hidden;
margin: calc(-1 * var(--admin-space)) calc(-1 * var(--admin-space)) var(--admin-space-2xs);
aspect-ratio: 16/10;
background: var(--admin-grey-100);
display: flex;
align-items: center;
justify-content: center;
}
.admin-work-sections__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.admin-work-sections__thumb-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 72px;
color: var(--admin-grey-400);
font-size: 1.75rem;
}
.admin-work-sections__card {
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
overflow: hidden;
padding: var(--admin-space);
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs);
}
.admin-work-sections__card--off {
opacity: 0.7;
background: var(--admin-grey-50);
}
.admin-work-sections__card--orphan {
border-color: var(--admin-danger, #b91c1c);
background: rgba(185, 28, 28, 0.04);
}
.admin-work-sections__card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--admin-space-2xs);
}
.admin-work-sections__slug code {
background: var(--admin-grey-100);
padding: 2px 6px;
border-radius: var(--admin-radius-xs);
font-size: 12px;
}
.admin-work-sections__badge {
padding: 2px 8px;
border-radius: var(--admin-radius-full);
font-size: 11px;
font-weight: 600;
}
.admin-work-sections__badge--ok {
background: var(--admin-success);
color: var(--admin-on-success, #fff);
}
.admin-work-sections__badge--off {
background: var(--admin-grey-400);
color: var(--admin-text-inverse, #fff);
}
.admin-work-sections__badge--info {
background: var(--admin-grey-200);
color: var(--admin-text);
}
.admin-work-sections__badge--warn {
background: var(--admin-danger, #b91c1c);
color: var(--admin-on-error, #fff);
}
.admin-work-sections__title {
margin: 0;
font-size: var(--admin-fs-body);
font-weight: 700;
}
.admin-work-sections__desc {
margin: 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-work-sections__fields summary {
cursor: pointer;
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm);
}
.admin-work-sections__fields ul {
list-style: none;
padding-left: 0;
margin: var(--admin-space-2xs) 0 0 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.admin-work-sections__fields ul li {
font-size: 12px;
}
.admin-work-sections__fields ul code {
margin-right: 6px;
}
.admin-work-sections__ft {
display: inline-block;
padding: 1px 6px;
border-radius: var(--admin-radius-xs);
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
font-size: 10px;
margin-right: 4px;
}
.admin-work-sections__req {
color: var(--admin-danger, #b91c1c);
}
.admin-work-sections__actions {
display: flex;
gap: var(--admin-space-2xs);
margin-top: auto;
}
/* Template blocks builder */
.admin-work-blocks {
margin-top: var(--admin-space-lg);
}
.admin-work-blocks__head {
margin-bottom: var(--admin-section-action-gap);
}
.admin-work-blocks__palette {
border: 1px dashed var(--admin-border-light);
border-radius: var(--admin-radius);
padding: var(--admin-space);
margin-bottom: var(--admin-space);
}
.admin-work-blocks__palette-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.admin-work-blocks__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
.admin-work-blocks__palette-btn {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
text-align: left;
}
.admin-work-blocks__palette-btn i:first-child {
opacity: 0.85;
font-size: 14px;
}
.admin-work-blocks__palette-slug {
opacity: 0.65;
font-weight: 400;
margin-left: 2px;
}
.admin-work-blocks__item {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-white);
padding: var(--admin-space);
}
.admin-work-blocks__item-head {
display: flex;
align-items: flex-start;
gap: var(--admin-space-2xs);
margin-bottom: var(--admin-space-sm);
flex-wrap: wrap;
}
.admin-work-blocks__drag {
flex-shrink: 0;
margin-top: 2px;
border: none;
background: transparent;
padding: 0;
}
.admin-work-blocks__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--admin-radius-xs);
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
font-size: 14px;
}
.admin-work-blocks__meta {
flex: 1;
min-width: 140px;
}
.admin-work-blocks__label {
display: block;
font-size: var(--admin-fs-body);
}
.admin-work-blocks__desc {
margin: 4px 0 0 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.4;
}
.admin-work-blocks__slug {
padding: 2px 6px;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-xs);
font-size: 11px;
align-self: center;
}
.admin-work-blocks__item-body {
padding-top: var(--admin-space-2xs);
border-top: 1px solid var(--admin-border-light);
}
.admin-work-blocks__advanced-sum {
cursor: pointer;
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-secondary);
}
.admin-work-blocks__advanced-body {
margin-top: var(--admin-space-sm);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--admin-space);
}
/* Work template editor: 메인 + 우측 미리보기 */
.admin-work-templates-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--admin-space-lg);
align-items: start;
margin-top: var(--admin-space-lg);
}
@media (max-width: 1280px) {
.admin-work-templates-layout {
grid-template-columns: 1fr;
}
}
/* =========================================================
* Canvas route: ㅍ 형태 (상단 툴바 + 좌 구조 + 우 캔버스)
* ========================================================= */
.admin-work-templates--canvas .admin-page__header,
.admin-work-templates--canvas .admin-page__toolbar {
display: none;
}
/* 레이아웃 .admin__content 기본 max-width:1200px — 캔버스는 1280까지 사용 */
.admin__content:has(> .admin-work-templates--canvas.is-canvas-only),
.admin__content:has(> .admin-work.admin-work--canvas) {
max-width: 1280px;
}
/* Work 캔버스와 동일 톤: 캔버스 미리보기는 외곽 박스(패널) 느낌 제거 */
.admin-work-templates--canvas .admin-work-templates__preview--canvas {
border: 0;
background: transparent;
padding: 0;
max-height: none;
overflow: visible;
}
.admin-work-template-canvas {
height: calc(100vh - var(--admin-space) * 2);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: var(--admin-space);
}
.admin-work-template-canvas__toolbar {
display: grid;
grid-template-rows: auto auto auto;
gap: var(--admin-space-sm);
align-items: stretch;
padding: var(--admin-space-sm);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-white);
position: sticky;
top: var(--admin-space);
z-index: 2;
}
.admin-work-template-canvas__toolbar-title {
min-width: 0;
}
.admin-work-template-canvas__toolbar-blocks {
min-width: 0;
}
.admin-work-template-canvas__toolbar-blocks--work {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.admin-work-template-canvas__add-label {
margin: 0;
font-size: 12px;
}
.admin-work-template-canvas__add-select {
max-width: 280px;
min-width: 160px;
}
.admin-work-template-canvas__toolbar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* Canvas: force-save loading state */
.admin-work--canvas [data-work-canvas-force-save].is-loading {
opacity: 0.85;
cursor: progress;
}
.admin-work-template-canvas__title {
font-size: var(--admin-fs-body);
font-weight: 800;
margin: 0;
display: block;
}
.admin-work-template-canvas__desc {
margin: 6px 0 0;
font-size: 12px;
color: var(--admin-text-muted);
line-height: 1.4;
}
/* 템플릿 캔버스: 블록 팔레트 Swiper (가로 스크롤 대신 화살표) */
.admin-work-blocks-palette__swiper-host {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.admin-work-blocks-palette-swiper {
flex: 1;
min-width: 0;
overflow: hidden;
}
.admin-work-blocks-palette__slide {
width: auto;
height: auto;
padding: 2px 4px;
box-sizing: border-box;
}
.admin-work-blocks-palette__slide .admin-work-blocks__palette-btn {
white-space: nowrap;
}
.admin-work-blocks-palette__nav {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border-radius: var(--admin-radius-xs);
border: 1px solid var(--admin-border-light);
background: var(--admin-white);
color: var(--admin-text-secondary);
cursor: pointer;
transition: background var(--tran-15, 0.15s), border-color var(--tran-15, 0.15s), color var(--tran-15, 0.15s);
}
.admin-work-blocks-palette__nav:hover:not(.swiper-button-disabled) {
border-color: rgba(99, 102, 241, 0.45);
color: rgb(67, 56, 202);
background: rgba(99, 102, 241, 0.06);
}
.admin-work-blocks-palette__nav.swiper-button-disabled {
opacity: 0.35;
cursor: default;
}
.admin-work-blocks-palette__nav i {
font-size: 12px;
}
.admin-work-template-canvas__body {
min-height: 0;
display: grid;
grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
gap: var(--admin-space);
align-items: stretch;
}
.admin-work-template-canvas__body--single {
grid-template-columns: 1fr;
}
.admin-work-templates--canvas.is-canvas-only .admin-work-template-canvas__body {
grid-template-columns: 1fr;
}
.admin-work-templates--canvas.is-canvas-only .admin-work-template-canvas__structure {
display: none;
}
.admin-work-template-canvas__structure {
min-width: 0;
min-height: 0;
overflow: auto;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-white);
padding: var(--admin-space);
}
.admin-work-template-canvas__preview {
min-width: 0;
min-height: 0;
}
.admin-work--canvas .admin-work-template-canvas__preview {
border: 0;
}
.admin-work--canvas .is-cms-next-slot {
outline: 2px dashed rgba(255, 255, 255, 0.35);
outline-offset: 6px;
}
.admin-work-templates--canvas .admin-work-templates__preview {
height: 100%;
max-height: none;
position: static;
padding: 0;
}
.admin-work-templates-layout__main {
min-width: 0;
}
.admin-work-templates__preview {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-grey-50, #fafafa);
padding: var(--admin-space);
}
@media (min-width: 1280px) {
.admin-work-templates__preview {
position: sticky;
top: var(--admin-space);
max-height: calc(100vh - var(--admin-space) * 3);
overflow: auto;
}
}
.admin-work-templates__preview-box {
display: flex;
flex-direction: column;
min-height: 520px;
}
.admin-work-templates__canvas-form {
flex: 1;
min-height: 420px;
}
.admin-work-templates__preview-cms-body {
min-height: 420px;
}
.admin-work-templates__preview-head {
margin-bottom: var(--admin-space-sm);
}
.admin-work-templates__preview-title {
margin: 0 0 var(--admin-space-3xs);
font-size: var(--admin-fs-body);
font-weight: 700;
}
.admin-work-templates__preview-hint {
margin: 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
line-height: 1.45;
}
.admin-work-templates__preview-actions {
margin: var(--admin-space-sm) 0 0;
}
.admin-work-templates__canvas-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: var(--admin-space-sm);
border-bottom: 1px solid var(--admin-border-light);
background: var(--admin-grey-50, #fafafa);
}
.admin-work-templates__canvas-form {
display: block;
}
.admin-work-templates__preview-tabs {
margin-top: var(--admin-space-sm);
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
}
.admin-work-templates__preview-tab {
appearance: none;
border: 1px solid var(--admin-border-light);
background: var(--admin-white);
color: var(--admin-text-secondary);
border-radius: 999px;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.admin-work-templates__preview-tab.is-active {
background: var(--admin-grey-100);
color: var(--admin-text);
}
.admin-work-templates__preview-tab:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.admin-work-templates__preview-box {
position: relative;
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
min-height: 120px;
}
.admin-work-templates__preview-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: var(--admin-space-2xs);
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
background: rgba(255, 255, 255, 0.85);
z-index: 1;
}
.admin-work-templates__preview-body {
padding: var(--admin-space-sm);
}
.admin-work-templates__preview-cms-body {
padding: var(--admin-space-sm);
}
/* Canvas: section labeling + handle (match blocks list tone) */
.admin-cms-block {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-white);
overflow: hidden;
margin-bottom: var(--admin-space);
}
/* Canvas performance: skip offscreen render work */
.admin-work--canvas .admin-work-templates-cms-preview .admin-cms-block {
content-visibility: auto;
contain: layout paint style;
/* approximate block height to prevent scroll jumps */
contain-intrinsic-size: 900px;
}
.admin-cms-block__head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--admin-border-light);
background: var(--admin-grey-50, #fafafa);
}
.admin-cms-block__drag {
border: none;
background: transparent;
padding: 0;
cursor: grab;
color: var(--admin-text-secondary);
}
.admin-cms-block__move {
display: inline-flex;
gap: 4px;
}
.admin-cms-block__move-btn {
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid var(--admin-border-light);
background: var(--admin-white);
color: var(--admin-text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.admin-cms-block__move-btn:disabled,
.admin-cms-block__move-btn[aria-disabled=true] {
opacity: 0.4;
cursor: not-allowed;
}
.admin-cms-block__move-btn:hover:not(:disabled) {
background: var(--admin-grey-100);
}
.admin-cms-block__label {
font-size: 13px;
font-weight: 800;
}
.admin-cms-block__slug {
margin-left: auto;
padding: 2px 6px;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-xs);
font-size: 11px;
}
.admin-cms-block__badge {
padding: 2px 8px;
border-radius: 999px;
background: rgba(99, 102, 241, 0.12);
color: rgb(67, 56, 202);
font-size: 11px;
font-weight: 700;
}
.admin-cms-block__body {
padding: 12px;
}
/* 블록 미리보기 위 "이미지 채우기" 라디오 (cover / contain) */
.admin-cms-block__fit-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
padding: 6px 10px;
margin-bottom: 10px;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
background: var(--admin-grey-50, #fafafa);
font-size: 12px;
}
.admin-cms-block__fit-label {
font-weight: 700;
color: var(--admin-text-secondary);
}
/* 옵션은 공통 라디오 컴포넌트(.admin-radio-wrap) 사용 — components/_ui.scss */
.admin-cms-block__fit-bar .admin-radio-wrap {
font-size: 12px;
}
/* CMS 캔버스: 섹션별 인라인 색상 선택기 (예: split_brand_media_text·media_dual_row 배경)
— 위젯 자체 스타일은 components/_color-picker-field.scss(.admin-cpf) */
.admin-cms-block-color {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--admin-space);
padding: 10px 12px;
border-bottom: 1px solid var(--admin-border-light);
background: var(--admin-grey-50, #fafafa);
/* .no-blocks-showcase--cms-preview 가 흰 글자색을 상속시키므로 명시적으로 되돌림 */
color: var(--admin-text);
}
.admin-cms-block-color__label {
font-size: 12px;
font-weight: 700;
color: var(--admin-text-secondary);
padding-top: 6px;
}
.admin-cms-block-color__value {
margin-left: auto;
align-self: flex-start;
padding: 2px 6px;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-xs);
font-size: 11px;
}
/* 카드 N개 섹션: 카드별 색상 컨트롤을 2열 그리드(아래 카드 입력란과 동일 리듬)로 */
.admin-cms-block-color-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 10px 12px;
background: var(--admin-grey-50, #fafafa);
border-bottom: 1px solid var(--admin-border-light);
}
@media (max-width: 544px) {
.admin-cms-block-color-grid {
grid-template-columns: 1fr;
}
}
.admin-cms-block-color-grid__card {
display: flex;
flex-direction: column;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
background: var(--admin-white, #fff);
overflow: hidden;
}
.admin-cms-block-color-grid .admin-cms-block-color {
flex: 1;
background: transparent;
}
.admin-cms-block-color-grid__card .admin-cms-block-color:last-child {
border-bottom: 0;
}
.admin-work-templates-cms-preview [data-field-key] {
outline: 1px dashed rgba(99, 102, 241, 0.35);
outline-offset: 2px;
border-radius: 4px;
cursor: text;
}
.admin-work-templates-cms-preview [data-field-type=text],
.admin-work-templates-cms-preview [data-field-type=richtext],
.admin-work-templates-cms-preview [data-field-type=json] {
background: rgba(99, 102, 241, 0.06);
padding: 2px 4px;
border-radius: 4px;
caret-color: #0f172a;
}
.admin-work-templates-cms-preview .is-cms-editing {
outline: 2px solid rgba(99, 102, 241, 0.65);
background: rgba(99, 102, 241, 0.1);
}
.admin-work-templates-cms-preview [data-field-type=text]:empty::before,
.admin-work-templates-cms-preview [data-field-type=richtext]:empty::before {
content: "텍스트 입력";
opacity: 0.45;
}
.admin-work-templates-cms-preview [data-field-key][data-cms-placeholder]:empty::before {
content: attr(data-cms-placeholder);
}
/* :empty 가 아닌데 내용은 비어 보일 때(줄바꿈·제로폭 문자 등) — TS 가 data-cms-empty 설정 */
.admin-work-templates-cms-preview [data-field-key][data-cms-placeholder][data-cms-empty="1"]:not(:focus-within)::before {
content: attr(data-cms-placeholder);
opacity: 0.45;
pointer-events: none;
}
.admin-work-templates-cms-preview [data-field-type=text]:focus-within,
.admin-work-templates-cms-preview [data-field-type=richtext]:focus-within,
.admin-work-templates-cms-preview [data-field-type=json]:focus-within {
outline: 2px solid rgba(79, 70, 229, 0.65);
outline-offset: 3px;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.admin-work-templates-cms-preview [data-field-type=json]:empty::before {
content: "JSON 입력";
opacity: 0.45;
}
.admin-work-templates-cms-preview [data-field-type=image],
.admin-work-templates-cms-preview [data-field-type=video],
.admin-work-templates-cms-preview [data-field-type=image_list],
.admin-work-templates-cms-preview [data-field-type=json] {
cursor: default;
}
.admin-cms-media-placeholder {
min-height: 220px;
border-radius: 8px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(15, 23, 42, 0.04));
border: 1px dashed rgba(99, 102, 241, 0.4);
position: relative;
}
.admin-cms-media-slot {
overflow: hidden;
height: 100%;
}
.admin-cms-media-slot > img,
.admin-cms-media-slot > video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Work 캔버스: 섹션 미디어 컨테이너(비율/고정높이) 안에서 슬롯이 100% 채우도록 고정 */
.admin-work-templates-cms-preview .no-block-media-slot,
.admin-work-templates-cms-preview .no-work-section__media,
.admin-work-templates-cms-preview figure.no-work-section__media {
position: relative;
}
.admin-work-templates-cms-preview .no-block-media-slot > .admin-cms-media-slot,
.admin-work-templates-cms-preview .no-work-section__media > .admin-cms-media-slot,
.admin-work-templates-cms-preview figure.no-work-section__media > .admin-cms-media-slot {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* CMS 캔버스: gallery_swiper 는 가로 스크롤 대신 그리드로 나열(정렬/드래그는 Sortable 유지) */
.admin-work-templates-cms-preview .no-work-section--gallery-swiper .no-work-section__swiper {
overflow: visible;
scroll-snap-type: none;
padding-inline: 0;
}
.admin-work-templates-cms-preview .no-work-section--gallery-swiper .no-work-section__track {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--spacing-md, 16px);
}
.admin-work-templates-cms-preview .no-work-section--gallery-swiper .no-work-section__slide {
width: auto;
scroll-snap-align: unset;
}
.admin-work-templates-cms-preview .no-work-section--gallery-swiper .no-work-section__slide img {
width: 100%;
height: auto;
display: block;
}
.admin-cms-media-placeholder::before {
content: "클릭/드롭으로 업로드";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--admin-text-muted);
font-size: 12px;
}
.admin-cms-media-placeholder:has(.admin-file-uploader__dropzone)::before {
display: none;
}
.admin-cms-media-placeholder.admin-file-uploader-box--cms-slot {
display: flex;
flex-direction: column;
}
.admin-cms-media-placeholder--hero {
min-height: 340px;
}
.admin-work-templates-cms-preview .is-drop-over {
outline: 2px solid rgba(99, 102, 241, 0.55);
outline-offset: 2px;
}
.admin-cms-media__delete {
position: absolute;
top: 6px;
right: 6px;
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.92);
color: var(--admin-error);
font-size: 18px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.admin-cms-media__delete:hover {
background: var(--admin-white);
border-color: rgba(185, 28, 28, 0.25);
}
.admin-work-templates__preview-error {
margin: 0;
padding: var(--admin-space-sm);
font-size: var(--admin-fs-sm);
color: var(--admin-error-text, #b91c1c);
background: var(--admin-error-bg, rgba(185, 28, 28, 0.06));
}
.admin-work-templates-preview-empty__text {
margin: 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
text-align: center;
padding: var(--admin-space);
}
/* Work CMS canvas: 라이트 프리뷰 — 카드 패딩 제거 + 편집 영역 대비 */
.admin-work--canvas {
/*
* NOTE:
* - 기존에는 "미리보기 본문만 스크롤"로 이중 스크롤을 막았지만,
* 편집 시 맨 위로 올리기 불편해서 페이지 스크롤을 사용하도록 변경.
*/
}
.admin-work--canvas .admin-work-template-canvas {
height: auto;
max-height: none;
min-height: 0;
display: flex;
flex-direction: column;
}
.admin-work--canvas .admin-work-template-canvas__toolbar {
flex-shrink: 0;
}
.admin-work--canvas .admin-work-template-canvas__body {
flex: 1;
min-height: 0;
overflow: visible;
display: flex;
flex-direction: column;
}
.admin-work--canvas .admin-work-template-canvas__preview {
flex: 1;
min-height: 0;
overflow: visible;
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
.admin-work--canvas .admin-work-template-canvas__preview > form[data-work-canvas-form],
.admin-work--canvas .admin-work-template-canvas__preview > .admin-work-templates__preview-loading,
.admin-work--canvas .admin-work-template-canvas__preview > .admin-work-templates__preview-error {
flex-shrink: 0;
}
.admin-work--canvas .admin-work-templates__preview-cms-body {
flex: 1;
min-height: auto;
overflow: visible;
overscroll-behavior: auto;
padding: 0;
}
.admin-work--canvas .admin-cms-block {
border: 1px dashed rgba(99, 102, 241, 0.35);
background: transparent;
}
.admin-work--canvas .admin-cms-block__body {
padding: 0;
background: transparent;
}
.admin-work--canvas {
/* 다크 쇼케이스 배경 위 인라인 편집 힌트 (/sections 프리뷰와 동일 영역) */
}
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=text],
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=richtext],
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=json] {
background: rgba(255, 255, 255, 0.1);
color: #f8fafc;
caret-color: #f8fafc;
}
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-key][data-cms-placeholder]:empty::before {
content: attr(data-cms-placeholder);
color: rgba(255, 255, 255, 0.62);
font-weight: 500;
}
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-key][data-cms-placeholder][data-cms-empty="1"]:not(:focus-within)::before {
content: attr(data-cms-placeholder);
color: rgba(255, 255, 255, 0.62);
font-weight: 500;
pointer-events: none;
}
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=text]:empty::before,
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=richtext]:empty::before,
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=json]:empty::before {
color: rgba(255, 255, 255, 0.45);
opacity: 1;
}
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=text]:focus-within,
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=richtext]:focus-within,
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=json]:focus-within {
outline: 2px solid rgba(56, 189, 248, 0.95);
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.22);
background: rgba(255, 255, 255, 0.14);
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-cms-media-placeholder {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
border-color: rgba(255, 255, 255, 0.28);
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-cms-media-placeholder::before {
color: rgba(255, 255, 255, 0.65);
font-weight: 600;
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader__dropzone--cms-slot {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.35);
color: #f8fafc;
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader__dropzone--cms-slot:hover,
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader__dropzone--cms-slot.admin-file-uploader__dropzone--dragover {
border-color: rgba(56, 189, 248, 0.85);
background: rgba(56, 189, 248, 0.12);
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader__dropzone--cms-slot .admin-file-uploader__dropzone-icon {
color: rgba(255, 255, 255, 0.85);
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader__dropzone--cms-slot .admin-file-uploader__dropzone-text {
color: rgba(248, 250, 252, 0.92);
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader-box--cms-slot.admin-file-uploader-box--loading .admin-file-uploader__dropzone-loader {
background: rgba(15, 23, 42, 0.82);
color: rgba(248, 250, 252, 0.9);
}
.admin-work--canvas .no-blocks-showcase--cms-preview {
/* image_list 도 FileUploader 드롭존으로 통일 (JS가 업로더 박스를 삽입) */
}
.admin-work-templates-preview-stack {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
.admin-work-templates-preview-card {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
padding: var(--admin-space-sm);
background: var(--admin-grey-50, #fafafa);
position: relative;
overflow: hidden;
}
.admin-work-templates-preview-card__bar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--admin-primary, #111);
opacity: 0.85;
}
.admin-work-templates-preview-card__head {
display: flex;
gap: var(--admin-space-2xs);
align-items: flex-start;
padding-left: 8px;
}
.admin-work-templates-preview-card__icon {
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--admin-radius-xs);
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
color: var(--admin-text-secondary);
font-size: 14px;
}
.admin-work-templates-preview-card__titles {
flex: 1;
min-width: 0;
}
.admin-work-templates-preview-card__step {
display: inline-block;
font-size: 10px;
font-weight: 700;
color: var(--admin-text-muted);
margin-right: 6px;
}
.admin-work-templates-preview-card__title {
margin: 0;
display: inline;
font-size: var(--admin-fs-sm);
font-weight: 700;
}
.admin-work-templates-preview-card__desc {
margin: 4px 0 0 0;
font-size: 12px;
color: var(--admin-text-secondary);
line-height: 1.4;
}
.admin-work-templates-preview-card__meta {
margin-top: var(--admin-space-2xs);
padding-left: calc(2rem + var(--admin-space-2xs) + 8px);
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.admin-work-templates-preview-card__slug {
font-size: 11px;
padding: 2px 6px;
background: var(--admin-white);
border-radius: var(--admin-radius-xs);
border: 1px solid var(--admin-border-light);
}
.admin-work-templates-preview-card__variant {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--admin-radius-full);
background: var(--admin-grey-200);
color: var(--admin-text);
}
.admin-work-templates-preview-fields {
list-style: none;
padding: var(--admin-space-2xs) 0 0 0;
margin: var(--admin-space-2xs) 0 0 0;
border-top: 1px dashed var(--admin-border-light);
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.admin-work-templates-preview-fields__item {
font-size: 11px;
padding: 3px 8px;
border-radius: var(--admin-radius-xs);
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
}
.admin-work-templates-preview-fields__key {
font-weight: 600;
margin-right: 4px;
}
.admin-work-templates-preview-fields__type {
font-family: "Poppins", sans-serif;
font-size: 10px;
color: var(--admin-text-muted);
}
.admin-work-templates-preview-fields__req {
color: var(--admin-danger, #b91c1c);
font-weight: 700;
}
.admin-work-templates-preview-card__wireframe {
margin-top: var(--admin-space-sm);
padding-top: var(--admin-space-sm);
border-top: 1px dashed var(--admin-border-light);
}
/* ---- Work wireframes (admin preview, data-field-* for TS) ---- */
.admin-work-wireframe {
border-radius: var(--admin-radius);
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
padding: var(--admin-space-sm);
font-size: 11px;
}
.admin-work-wireframe__slot {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 10px;
border-radius: var(--admin-radius-xs);
border: 1px dashed var(--admin-grey-400, #9ca3af);
background: var(--admin-grey-50, #fafafa);
min-height: 2.25rem;
justify-content: center;
}
.admin-work-wireframe__slot-key {
font-family: "Poppins", sans-serif;
font-size: 10px;
font-weight: 700;
color: var(--admin-text-secondary);
}
.admin-work-wireframe__slot-meta {
font-size: 10px;
color: var(--admin-text-muted);
line-height: 1.35;
}
.admin-work-wireframe--hero-visual {
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs);
}
.admin-work-wireframe__hero-media {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
min-height: 100px;
}
.admin-work-wireframe__hero-caption {
display: flex;
flex-direction: column;
gap: 6px;
}
.admin-work-wireframe--project-summary .admin-work-wireframe__ps-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--admin-space-sm);
}
@media (max-width: 544px) {
.admin-work-wireframe--project-summary .admin-work-wireframe__ps-grid {
grid-template-columns: 1fr;
}
}
.admin-work-wireframe__ps-col {
display: flex;
flex-direction: column;
gap: 6px;
}
.admin-work-wireframe--gallery-grid .admin-work-wireframe__gg-title {
margin-bottom: 6px;
}
.admin-work-wireframe__gg-grid {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
min-height: 120px;
padding: 8px;
border-radius: var(--admin-radius-xs);
background: repeating-linear-gradient(-45deg, var(--admin-grey-100), var(--admin-grey-100) 6px, #fff 6px, #fff 12px);
}
.admin-work-wireframe--cols-2 .admin-work-wireframe__gg-grid {
grid-template-columns: repeat(2, 1fr);
}
.admin-work-wireframe--cols-3 .admin-work-wireframe__gg-grid {
grid-template-columns: repeat(3, 1fr);
}
.admin-work-wireframe--cols-4 .admin-work-wireframe__gg-grid {
grid-template-columns: repeat(4, 1fr);
}
.admin-work-wireframe__gg-cell {
min-height: 36px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.65);
}
.admin-work-wireframe__gg-hint {
position: absolute;
bottom: 6px;
right: 8px;
font-size: 10px;
color: var(--admin-text-muted);
background: rgba(255, 255, 255, 0.9);
padding: 2px 6px;
border-radius: var(--admin-radius-xs);
}
.admin-work-wireframe--gallery-swiper .admin-work-wireframe__gs-title {
margin-bottom: 6px;
}
.admin-work-wireframe__gs-track {
display: flex;
gap: 8px;
align-items: stretch;
min-height: 88px;
padding: 8px;
border-radius: var(--admin-radius-xs);
background: var(--admin-grey-100);
overflow-x: auto;
position: relative;
}
.admin-work-wireframe__gs-slide {
flex: 0 0 72px;
height: 72px;
border-radius: 4px;
border: 1px dashed var(--admin-grey-400);
background: var(--admin-white);
}
.admin-work-wireframe__gs-hint {
position: absolute;
bottom: 4px;
right: 6px;
font-size: 10px;
color: var(--admin-text-muted);
}
.admin-work-wireframe--full-image {
display: flex;
flex-direction: column;
gap: 6px;
}
.admin-work-wireframe--full-image > .admin-work-wireframe__slot:first-child {
min-height: 120px;
}
.admin-work-wireframe__fi-caption {
max-width: 100%;
}
.admin-work-wireframe--callout-quote {
padding: var(--admin-space);
}
.admin-work-wireframe--theme-dark {
background: #1f2937;
color: #f9fafb;
}
.admin-work-wireframe--theme-dark .admin-work-wireframe__slot {
border-color: rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.06);
}
.admin-work-wireframe--theme-brand {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.35);
}
.admin-work-wireframe--theme-light {
background: #f3f4f6;
}
.admin-work-wireframe__cq-quote .admin-work-wireframe__slot {
min-height: 72px;
}
.admin-work-wireframe__cq-attr {
margin-top: 6px;
max-width: 80%;
}
.admin-work-wireframe--outro .admin-work-wireframe__outro-stack {
display: flex;
flex-direction: column;
gap: 6px;
}
.admin-work-wireframe--two-col .admin-work-wireframe__tc-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--admin-space-sm);
align-items: start;
}
@media (max-width: 544px) {
.admin-work-wireframe--two-col .admin-work-wireframe__tc-grid {
grid-template-columns: 1fr;
}
}
.admin-work-wireframe--image-right .admin-work-wireframe__tc-grid {
direction: rtl;
}
.admin-work-wireframe--image-right .admin-work-wireframe__tc-grid > * {
direction: ltr;
}
.admin-work-wireframe__tc-media .admin-work-wireframe__slot {
min-height: 140px;
}
.admin-work-wireframe__tc-text {
display: flex;
flex-direction: column;
gap: 6px;
}
.admin-work-wireframe--generic .admin-work-wireframe__variant-badge {
margin: 0 0 8px 0;
font-size: 10px;
}
.admin-work-wireframe--generic .admin-work-wireframe__stack {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Work form block editor */
.admin-work-block-editor {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
.admin-work-block-editor__block {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-white);
padding: var(--admin-space-sm) var(--admin-space);
}
.admin-work-block-editor__summary {
cursor: pointer;
display: flex;
align-items: center;
gap: var(--admin-space-2xs);
flex-wrap: wrap;
font-weight: 600;
}
.admin-work-block-editor__slug,
.admin-work-block-editor__key {
padding: 2px 6px;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-xs);
font-size: 11px;
font-weight: 500;
color: var(--admin-text-secondary);
}
.admin-work-block-editor__field {
margin-top: var(--admin-space);
}
.admin-work-block-editor__ft {
margin-left: 6px;
padding: 1px 6px;
border-radius: var(--admin-radius-xs);
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
font-size: 10px;
font-weight: 500;
}
.admin-work-block-editor__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--admin-space-sm);
}
/* Inline row edit for categories */
.admin-form__block--inline {
display: flex;
gap: var(--admin-space-sm);
align-items: flex-start;
flex-wrap: wrap;
}
.admin-form__block--inline .admin-form__field {
flex: 1;
min-width: 0;
}
.admin-form__block--inline .admin-form__input {
min-width: 140px;
}
.admin-form-row {
display: contents;
}
/* Work form grid helpers */
.admin-form__block--grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--admin-space);
}
@media (max-width: 768px) {
.admin-form__block--grid-2 {
grid-template-columns: 1fr;
}
}
.admin-form__block--grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--admin-space);
}
@media (max-width: 768px) {
.admin-form__block--grid-3 {
grid-template-columns: 1fr;
}
}
.admin-form__checkgroup {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-sm) var(--admin-space-lg);
align-items: center;
}
/* =========================================================
* Add / List section visual separation
* ========================================================= */
.admin-add-section {
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
padding: var(--admin-space-lg);
margin-bottom: var(--admin-section-action-gap);
box-shadow: var(--admin-elevation-1);
}
.admin-add-section__title {
margin: 0 0 var(--admin-space-sm);
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text);
}
.admin-add-section__form .admin-form__block--inline {
gap: var(--admin-space-sm);
}
.admin-form__field {
display: flex;
flex-direction: column;
gap: var(--admin-space-3xs);
}
.admin-form__field .admin-form__label {
margin: 0;
font-size: var(--admin-fs-sm);
font-weight: 500;
color: var(--admin-text-secondary);
white-space: nowrap;
}
.admin-form__field .admin-form__input {
flex: none;
}
.admin-list-section {
margin-bottom: var(--admin-space-xl);
}
.admin-list-section__header {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space-xs);
}
.admin-list-section__title {
margin: 0;
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text);
}
.admin-list-section__count {
font-size: var(--admin-fs-sm);
font-weight: 400;
color: var(--admin-text-muted);
}
.admin-list-section__hint {
margin: 0 0 var(--admin-space-sm);
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-list-section__hint .fa-grip-lines {
margin-right: 0.35em;
}
/* =========================================================
* Sortable drag-and-drop
* ========================================================= */
.admin-table__col-handle {
width: 2.5rem;
padding: 0 var(--admin-space-xs) !important;
}
.admin-sortable__handle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
color: var(--admin-text-muted);
cursor: grab;
border-radius: var(--admin-radius-xs);
transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-sortable__handle:hover {
background: var(--admin-grey-100);
color: var(--admin-text);
}
.admin-sortable__handle:active {
cursor: grabbing;
}
/* Ghost row (placeholder while dragging) */
.admin-sortable__ghost {
opacity: 0.4;
background: var(--admin-primary-light);
}
/* Row being dragged */
.admin-sortable__drag {
box-shadow: var(--admin-elevation-3);
background: var(--admin-card-bg) !important;
opacity: 1;
}
/* Saving overlay – tbody를 가리는 전체 크기 로더 */
.admin-sortable__saving {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
align-items: center;
justify-content: center;
padding: var(--admin-space-xl);
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(2px);
color: var(--admin-text-muted);
}
.admin-sortable__saving--visible {
display: flex;
}
.admin-sortable__saving-inner {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--admin-space-sm);
min-width: 240px;
padding: var(--admin-space-lg) var(--admin-space-xl);
font-size: var(--admin-fs-body);
font-weight: 600;
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-2);
}
.admin-sortable__saving-inner .fa-spinner {
font-size: 2rem;
color: var(--admin-grey-400);
}
/* 로더가 떠도 리스트는 유지 (스크롤/레이아웃 고정 목적) */
/* 저장 실패 에러 표시 */
.admin-sortable__error {
display: none;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space-lg);
font-size: var(--admin-fs-sm);
font-weight: 500;
color: var(--admin-error-text);
background: var(--admin-error-bg);
border-bottom: 2px solid var(--admin-error);
}
.admin-sortable__error i {
flex-shrink: 0;
}
.admin-sortable__error--visible {
display: flex;
}
/* global loading state (keep scroll position, block interactions) */
html.admin--loading,
html.admin--loading body {
cursor: progress;
}
/* CMS 캔버스 — 블록 레이아웃 갤러리 모달 */
.admin-work-block-picker {
z-index: 1100;
}
.admin-work-block-picker .admin-work-block-picker__box {
max-width: min(960px, 96vw);
width: 100%;
max-height: 88vh;
}
.admin-work-block-picker .admin-work-block-picker__body {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-work-block-picker .admin-work-block-picker__filter-wrap {
display: block;
margin: 0;
}
.admin-work-block-picker .admin-search-bar {
max-width: 440px;
}
.admin-work-block-picker .admin-work-block-picker__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--admin-space-sm);
}
.admin-work-block-picker .admin-work-block-picker__cell {
margin: 0;
}
.admin-work-block-picker .admin-work-block-picker__card {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-white);
cursor: pointer;
text-align: left;
display: flex;
flex-direction: column;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-work-block-picker .admin-work-block-picker__card:hover {
border-color: var(--admin-primary, #0ea5e9);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.admin-work-block-picker .admin-work-block-picker__card:focus-visible {
outline: 2px solid var(--admin-primary, #0ea5e9);
outline-offset: 2px;
}
.admin-work-block-picker .admin-work-block-picker__thumb-wrap {
aspect-ratio: 16/10;
background: var(--admin-grey-100);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.admin-work-block-picker .admin-work-block-picker__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.admin-work-block-picker .admin-work-block-picker__thumb-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 80px;
color: var(--admin-grey-400);
font-size: 2rem;
}
.admin-work-block-picker .admin-work-block-picker__meta {
padding: var(--admin-space-sm);
display: flex;
flex-direction: column;
gap: 4px;
}
.admin-work-block-picker .admin-work-block-picker__label {
font-size: var(--admin-fs-body);
font-weight: 700;
margin: 0;
}
.admin-work-block-picker .admin-work-block-picker__slug {
font-size: 11px;
color: var(--admin-text-secondary);
background: var(--admin-grey-100);
padding: 2px 6px;
border-radius: var(--admin-radius-xs);
align-self: flex-start;
}
.admin-work-block-picker .admin-work-block-picker__desc {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.admin-work-block-picker .admin-work-block-picker__hint {
margin: 0;
margin-top: var(--admin-space-xs);
}
/* ================================================================
* Work 템플릿 캔버스 — 썸네일 모드 (좌측 컴팩트 팔레트 + 우측 카드 리스트)
* 디자인 톤: 엔터프라이즈 (subtle elevation, 절제된 색, 충분한 여백)
* ================================================================ */
.admin-work-templates--canvas-thumb .admin-work-template-canvas {
display: flex;
flex-direction: column;
gap: var(--admin-space-lg);
}
.admin-work-templates--canvas-thumb {
/* 헤더 바 */
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__header {
display: flex;
align-items: center;
gap: var(--admin-space);
padding: var(--admin-space-sm) var(--admin-space);
border-radius: var(--admin-radius);
background: var(--admin-white);
box-shadow: var(--admin-elevation-1);
flex-wrap: wrap;
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__header-title {
display: inline-flex;
align-items: center;
gap: var(--admin-space-sm);
flex: 1 1 auto;
min-width: 0;
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__title {
font-size: var(--admin-fs-body-lg);
font-weight: 700;
color: var(--admin-text-primary);
line-height: 1.2;
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__slug {
padding: 3px 8px;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-xs);
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
font-family: "Poppins", sans-serif;
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__header-actions {
display: inline-flex;
align-items: center;
gap: var(--admin-space-xs);
flex: 0 0 auto;
}
.admin-work-templates--canvas-thumb {
/* 본문: 고정폭 팔레트 + 가변폭 캔버스 */
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__body {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: var(--admin-space-lg);
align-items: start;
}
@media (max-width: 1280px) {
.admin-work-templates--canvas-thumb .admin-work-template-canvas__body {
grid-template-columns: 1fr;
}
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__target {
min-width: 0;
}
/* ─── 좌측 팔레트 (컴팩트) ─────────────────────────────────────── */
.admin-work-blocks-thumb-palette {
display: flex;
flex-direction: column;
border-radius: var(--admin-radius);
background: var(--admin-white);
box-shadow: var(--admin-elevation-1);
position: sticky;
top: var(--admin-space-lg);
max-height: calc(100vh - var(--admin-space-2xl));
overflow: hidden;
min-width: 0;
}
.admin-work-blocks-thumb-palette__head {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
flex: 0 0 auto;
padding: var(--admin-space-sm) var(--admin-space) var(--admin-space-xs);
border-bottom: 1px solid var(--admin-grey-100);
}
.admin-work-blocks-thumb-palette__title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0;
color: var(--admin-text-secondary);
}
.admin-work-blocks-thumb-palette__filter {
display: block;
}
.admin-work-blocks-thumb-palette__filter input {
width: 100%;
padding: 6px 10px;
font-size: var(--admin-fs-sm);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-xs);
background: var(--admin-grey-50, #fafafa);
transition: border-color 120ms ease, background 120ms ease;
}
.admin-work-blocks-thumb-palette__filter input:focus {
outline: none;
border-color: var(--admin-primary);
background: var(--admin-white);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.admin-work-blocks-thumb-palette__list {
list-style: none;
margin: 0;
padding: var(--admin-space-2xs);
display: flex;
flex-direction: column;
gap: 2px;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
}
.admin-work-blocks-thumb-palette__cell {
list-style: none;
}
.admin-work-blocks-thumb-palette__cell[hidden] {
display: none;
}
.admin-work-blocks-thumb-palette__card {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: var(--admin-space-2xs);
align-items: center;
width: 100%;
padding: 6px 8px;
border: 1px solid transparent;
border-radius: var(--admin-radius-xs);
background: transparent;
text-align: left;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.admin-work-blocks-thumb-palette__card:hover {
background: var(--admin-grey-50, #fafafa);
border-color: var(--admin-grey-100);
}
.admin-work-blocks-thumb-palette__card:focus-visible {
outline: none;
background: var(--admin-white);
border-color: var(--admin-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.admin-work-blocks-thumb-palette__thumb-wrap {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: var(--admin-grey-100);
border-radius: 3px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.admin-work-blocks-thumb-palette__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.admin-work-blocks-thumb-palette__thumb-fallback {
font-size: 12px;
color: var(--admin-text-secondary);
}
.admin-work-blocks-thumb-palette__meta {
display: flex;
flex-direction: column;
min-width: 0;
gap: 1px;
align-self: center;
}
.admin-work-blocks-thumb-palette__label {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-primary);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 1.25;
}
.admin-work-blocks-thumb-palette__slug {
font-family: "Poppins", sans-serif;
font-size: 10px;
color: var(--admin-text-secondary);
background: transparent;
padding: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 1.2;
}
/* ─── 우측 캔버스: 추가된 섹션 카드 리스트 ────────────────────── */
.admin-work-blocks--canvas-target {
background: transparent;
border: none;
padding: 0;
display: flex;
flex-direction: column;
}
.admin-work-blocks--canvas-target .admin-work-blocks__head {
padding: 0 var(--admin-space-2xs) var(--admin-space-sm);
margin: 0;
border: none;
}
.admin-work-blocks--canvas-target .admin-work-blocks__head .admin-form__section-title {
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text-primary);
margin: 0 0 4px;
}
.admin-work-blocks--canvas-target .admin-work-blocks__head .admin-form__hint {
margin: 0;
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
}
.admin-work-blocks--canvas-target .admin-work-blocks__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
/* 추가된 카드: 분리된 머리/발 영역, 부드러운 elevation */
.admin-work-blocks__item--thumb {
border-radius: var(--admin-radius);
background: var(--admin-white);
overflow: hidden;
box-shadow: var(--admin-elevation-1);
transition: box-shadow 150ms ease;
}
.admin-work-blocks__item--thumb:hover {
box-shadow: var(--admin-elevation-2);
}
.admin-work-blocks__item--thumb .admin-work-blocks__item-head {
display: grid;
grid-template-columns: auto auto 220px minmax(0, 1fr) auto;
gap: var(--admin-space);
align-items: center;
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-white);
border-bottom: 1px solid var(--admin-grey-100);
}
@media (max-width: 768px) {
.admin-work-blocks__item--thumb .admin-work-blocks__item-head {
grid-template-columns: auto auto minmax(0, 1fr) auto;
grid-template-areas: "drag move thumb remove" "meta meta meta meta";
row-gap: var(--admin-space-sm);
}
}
/* 드래그 핸들 */
.admin-work-blocks__item--thumb .admin-work-blocks__drag {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--admin-text-secondary);
cursor: grab;
border-radius: var(--admin-radius-xs);
transition: background 120ms ease, color 120ms ease;
}
@media (max-width: 768px) {
.admin-work-blocks__item--thumb .admin-work-blocks__drag {
grid-area: drag;
}
}
.admin-work-blocks__item--thumb .admin-work-blocks__drag:hover {
background: var(--admin-grey-50, #fafafa);
color: var(--admin-text-primary);
}
.admin-work-blocks__item--thumb .admin-work-blocks__drag:active {
cursor: grabbing;
}
/* ▲▼ 이동 버튼: 컴팩트한 세그먼트 컨트롤 느낌 */
.admin-work-blocks__move {
display: inline-flex;
flex-direction: column;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-xs);
overflow: hidden;
background: var(--admin-white);
}
@media (max-width: 768px) {
.admin-work-blocks__item--thumb .admin-work-blocks__move {
grid-area: move;
}
}
.admin-work-blocks__move-btn {
width: 24px;
height: 18px;
border: none;
background: var(--admin-white);
color: var(--admin-text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 10px;
padding: 0;
transition: background 100ms ease, color 100ms ease;
}
.admin-work-blocks__move-btn + .admin-work-blocks__move-btn {
border-top: 1px solid var(--admin-border-light);
}
.admin-work-blocks__move-btn:hover:not(:disabled) {
background: var(--admin-grey-50, #fafafa);
color: var(--admin-text-primary);
}
.admin-work-blocks__move-btn:disabled,
.admin-work-blocks__move-btn[aria-disabled=true] {
opacity: 0.35;
cursor: not-allowed;
}
/* 우측 카드 썸네일 */
.admin-work-blocks__thumb-wrap {
width: 220px;
aspect-ratio: 16/9;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-xs);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.admin-work-blocks__item--thumb .admin-work-blocks__thumb-wrap {
grid-area: thumb;
width: 140px;
}
}
.admin-work-blocks__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.admin-work-blocks__thumb-fallback {
font-size: 28px;
color: var(--admin-text-secondary);
}
/* 메타 텍스트 */
.admin-work-blocks__item--thumb .admin-work-blocks__meta {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
@media (max-width: 768px) {
.admin-work-blocks__item--thumb .admin-work-blocks__meta {
grid-area: meta;
}
}
.admin-work-blocks__item--thumb .admin-work-blocks__label {
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text-primary);
line-height: 1.2;
}
.admin-work-blocks__item--thumb .admin-work-blocks__slug {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 2px 6px;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-xs);
font-family: "Poppins", sans-serif;
font-size: 10px;
color: var(--admin-text-secondary);
}
.admin-work-blocks__item--thumb .admin-work-blocks__desc {
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
margin: 2px 0 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 카드 푸터: 인라인 옵션 */
.admin-work-blocks__item--thumb .admin-work-blocks__item-foot {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: var(--admin-space-lg);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-grey-50, #fafafa);
border-top: 1px solid var(--admin-grey-100);
}
@media (max-width: 768px) {
.admin-work-blocks__item--thumb .admin-work-blocks__item-foot {
grid-template-columns: minmax(0, 1fr);
gap: var(--admin-space-sm);
}
}
.admin-work-blocks__inline-field {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
}
.admin-work-blocks__inline-field .admin-form__label--sm {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--admin-text-secondary);
margin: 0;
}
.admin-work-blocks__inline-field input,
.admin-work-blocks__inline-field select {
padding: 6px 10px;
font-size: var(--admin-fs-sm);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-xs);
background: var(--admin-white);
width: 100%;
}
/* 빈 상태 */
.admin-work-blocks__empty {
list-style: none;
padding: var(--admin-space-2xl) var(--admin-space-lg);
border: 1.5px dashed var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-white);
text-align: center;
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm);
}
.admin-work-blocks__empty p {
margin: 0;
}
/* 삭제 버튼은 카드 헤드 우측에서 살짝 작게 */
.admin-work-blocks__item--thumb .admin-work-blocks__remove {
white-space: nowrap;
}
@media (max-width: 768px) {
.admin-work-blocks__item--thumb .admin-work-blocks__remove {
grid-area: remove;
justify-self: end;
}
}
.admin-comp-section {
margin-bottom: var(--admin-space-2xl);
padding: var(--admin-space-lg);
background: var(--admin-card-bg);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
border: 1px solid var(--admin-border-light);
}
.admin-comp-section__title {
margin: 0 0 var(--admin-space);
font-size: var(--admin-fs-body);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--admin-text);
padding-bottom: var(--admin-space-sm);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-comp-section__row {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space);
align-items: center;
}
.admin-comp-section__row--col {
flex-direction: column;
align-items: stretch;
max-width: 400px;
}
.admin-comp-section__note {
margin: var(--admin-space) 0 0;
font-size: var(--admin-fs-sm);
font-weight: 500;
color: var(--admin-text-secondary);
word-break: keep-all;
overflow-wrap: normal;
}
.admin-comp-section__note code {
padding: var(--admin-space-3xs) var(--admin-space-2xs);
background: var(--admin-grey-100);
border-radius: var(--admin-radius-xs);
font-size: var(--admin-fs-sm);
}
.admin-comp-section--file-uploader .admin-file-uploader-demo {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--admin-space-lg);
margin-top: var(--admin-space);
}
.admin-file-uploader-box {
min-height: 140px;
padding: var(--admin-space);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-card-bg);
}
.admin-file-uploader-demo__item .admin-input-label {
font-weight: 600;
color: var(--admin-text);
}
.admin-file-uploader__list {
margin-top: var(--admin-space);
}
.admin-file-uploader__grid {
display: grid;
gap: var(--admin-space);
margin-top: var(--admin-space-sm);
}
.admin-file-uploader__grid--image {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.admin-file-uploader__grid--video, .admin-file-uploader__grid--audio {
grid-template-columns: 1fr;
}
.admin-file-uploader__grid--document, .admin-file-uploader__grid--archive {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.admin-file-uploader__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--admin-space-sm);
padding: var(--admin-space);
background: var(--admin-grey-100);
border-radius: var(--admin-radius);
border: 1px solid var(--admin-border-light);
}
.admin-file-uploader__thumb {
width: 100%;
height: auto;
max-height: 120px;
object-fit: cover;
border-radius: var(--admin-radius-xs);
}
.admin-file-uploader__preview-video {
width: 100%;
max-height: 180px;
border-radius: var(--admin-radius-xs);
}
.admin-file-uploader__preview-audio {
width: 100%;
max-width: 320px;
}
.admin-file-uploader__icon {
font-size: var(--admin-fs-body-xl);
color: var(--admin-text-secondary);
}
.admin-file-uploader__dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 120px;
padding: var(--admin-space);
border: 2px dashed var(--admin-border);
border-radius: var(--admin-radius);
background: var(--admin-grey-100);
cursor: pointer;
transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-file-uploader__dropzone:hover, .admin-file-uploader__dropzone--dragover {
border-color: var(--admin-primary);
background: rgba(var(--admin-primary-rgb), 0.06);
}
.admin-file-uploader__dropzone--disabled {
pointer-events: none;
opacity: 0.65;
cursor: not-allowed;
}
.admin-file-uploader__dropzone-text {
font-weight: 600;
color: var(--admin-text);
margin-bottom: var(--admin-space-2xs);
}
.admin-file-uploader__dropzone-hint {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-file-uploader__meta {
width: 100%;
margin-top: var(--admin-space-2xs);
}
.admin-file-uploader__name {
font-size: var(--admin-fs-xs);
font-weight: 500;
color: var(--admin-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-file-uploader__size {
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
margin-top: var(--admin-space-3xs);
}
.admin-file-uploader__actions {
display: flex;
gap: var(--admin-space-2xs);
flex-wrap: wrap;
margin-top: var(--admin-space-sm);
}
.admin-datetime-input-wrap,
.admin-time-input-wrap,
.admin-daterange-input-wrap {
display: flex;
align-items: center;
border: 1px solid var(--admin-border, #e2e8f0);
border-radius: var(--admin-radius-sm);
background: var(--admin-white);
cursor: pointer;
}
.admin-datetime-input-wrap:focus-within,
.admin-time-input-wrap:focus-within,
.admin-daterange-input-wrap:focus-within {
border-color: var(--admin-primary, #3b82f6);
outline: 1px solid var(--admin-primary, #3b82f6);
}
.admin-datetime-input,
.admin-time-input,
.admin-daterange-input {
flex: 1;
border: none;
background: none;
cursor: pointer;
}
.admin-datetime-input__icon,
.admin-time-input__icon {
padding: 0 var(--admin-space);
color: var(--admin-text-secondary, #64748b);
pointer-events: none;
}
.admin-comp-editor-wrap {
min-height: 180px;
background: var(--admin-card-bg);
border: 1px solid var(--admin-border, #e2e8f0);
border-radius: var(--admin-radius);
}
.admin-comp-editor-wrap .ql-editor {
min-height: 160px;
}
.admin-comp-section__row--calendars {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-lg);
align-items: flex-start;
margin-top: var(--admin-space);
}
.admin-comp-calendar-box {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-comp-calendar-box__label {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-secondary);
}
.admin-comp-calendar-box__inner {
display: inline-block;
border-radius: var(--admin-radius);
overflow: hidden;
box-shadow: var(--admin-elevation-2);
}
.admin-comp-calendar-box__inner .flatpickr-calendar {
position: static;
box-shadow: none;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
font-family: inherit;
}
.admin-comp-calendar-box__inner .flatpickr-day.selected,
.admin-comp-calendar-box__inner .flatpickr-day.selected:hover {
background: var(--admin-primary);
border-color: var(--admin-primary);
}
.admin-comp-calendar-box__inner .flatpickr-day.inRange {
background: rgba(var(--admin-primary-rgb), 0.12);
border-color: transparent;
}
.admin-comp-calendar-box__inner .flatpickr-day.startRange,
.admin-comp-calendar-box__inner .flatpickr-day.endRange {
background: var(--admin-primary);
border-color: var(--admin-primary);
}
.admin-guide {
max-width: 100%;
}
.guide-section {
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
padding: 2.4rem;
margin-bottom: 2.4rem;
}
.guide-section:last-child {
margin-bottom: 0;
}
.guide-section__header {
margin-bottom: 2rem;
}
.guide-section__tag {
display: inline-block;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--admin-primary);
background: var(--admin-primary-light);
border: 1px solid rgba(var(--admin-primary-rgb), 0.2);
border-radius: var(--admin-radius-full);
padding: 0.3rem 1rem;
margin-bottom: 0.8rem;
text-transform: uppercase;
}
.guide-section__title {
font-size: clamp(1.6rem, 2vw, 2rem);
font-weight: 700;
color: var(--admin-text);
margin: 0 0 0.6rem;
line-height: 1.3;
}
.guide-section__desc {
font-size: 1.4rem;
color: var(--admin-text-secondary);
margin: 0;
line-height: 1.6;
}
.guide-grid {
display: grid;
gap: 1.6rem;
}
.guide-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
.guide-grid--2 {
grid-template-columns: 1fr;
}
}
.guide-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
.guide-grid--3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.guide-grid--3 {
grid-template-columns: 1fr;
}
}
.guide-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
.guide-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.guide-grid--4 {
grid-template-columns: 1fr;
}
}
.guide-card {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
padding: 2rem;
background: var(--admin-white);
}
.guide-card--highlight {
background: var(--admin-primary-light);
border-color: rgba(var(--admin-primary-rgb), 0.18);
}
.guide-card__icon {
font-size: 2.4rem;
color: var(--admin-primary);
margin-bottom: 1.2rem;
}
.guide-card__title {
font-size: 1.5rem;
font-weight: 700;
color: var(--admin-text);
margin: 0 0 0.8rem;
}
.guide-card__body {
font-size: 1.4rem;
color: var(--admin-text-secondary);
line-height: 1.6;
margin: 0;
}
.guide-value-card {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
padding: 1.6rem;
background: var(--admin-white);
position: relative;
overflow: hidden;
}
.guide-value-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--admin-primary);
border-radius: var(--admin-radius) var(--admin-radius) 0 0;
}
.guide-value-card__num {
display: block;
font-size: 2.4rem;
font-weight: 800;
color: rgba(var(--admin-primary-rgb), 0.15);
line-height: 1;
margin-bottom: 0.8rem;
letter-spacing: -0.04em;
}
.guide-value-card__title {
font-size: 1.4rem;
font-weight: 700;
color: var(--admin-text);
margin: 0 0 0.4rem;
}
.guide-value-card__body {
font-size: 1.3rem;
color: var(--admin-text-secondary);
margin: 0;
line-height: 1.5;
}
.guide-colors {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.guide-color-group {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.guide-color-group__label {
font-size: 1.2rem;
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
}
.guide-color-swatches {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.guide-swatch {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 9.6rem;
height: 6.4rem;
border-radius: var(--admin-radius-sm);
padding: 0.6rem 0.8rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.guide-swatch--bordered {
border: 1px solid var(--admin-border-light);
}
@media (max-width: 768px) {
.guide-swatch {
width: 7.2rem;
height: 5.2rem;
}
}
.guide-swatch__name {
font-size: 1.1rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.55);
line-height: 1;
}
.guide-swatch__hex {
font-size: 1rem;
color: rgba(0, 0, 0, 0.45);
font-family: "Poppins", sans-serif;
margin-top: 0.2rem;
}
.guide-voice-card {
border-radius: var(--admin-radius);
padding: 2rem;
border: 1px solid var(--admin-border-light);
}
.guide-voice-card--do {
background: var(--admin-success-bg);
border-color: rgba(var(--admin-success-rgb), 0.25);
}
.guide-voice-card--do .guide-voice-card__badge {
background: var(--admin-success);
color: #fff;
}
.guide-voice-card--dont {
background: var(--admin-error-bg);
border-color: rgba(var(--admin-error-rgb), 0.2);
}
.guide-voice-card--dont .guide-voice-card__badge {
background: var(--admin-error);
color: #fff;
}
.guide-voice-card__badge {
display: inline-block;
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.08em;
padding: 0.3rem 1rem;
border-radius: var(--admin-radius-full);
margin-bottom: 1.2rem;
}
.guide-voice-card__list {
margin: 0;
padding: 0 0 0 1.6rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.guide-voice-card__list li {
font-size: 1.4rem;
color: var(--admin-text-secondary);
line-height: 1.5;
}
.guide-type-table {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
overflow: hidden;
}
.guide-type-row {
display: grid;
grid-template-columns: 10rem 16rem 12rem 1fr;
align-items: center;
gap: 1.2rem;
padding: 1.2rem 1.6rem;
border-bottom: 1px solid var(--admin-border-light);
}
.guide-type-row:last-child {
border-bottom: none;
}
.guide-type-row--header {
background: var(--admin-grey-50);
font-size: 1.2rem;
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 1rem 1.6rem;
}
@media (max-width: 1024px) {
.guide-type-row--header span:nth-child(n+3) {
display: none;
}
}
@media (max-width: 1024px) {
.guide-type-row {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
}
@media (max-width: 768px) {
.guide-type-row {
grid-template-columns: 1fr;
}
}
.guide-type-role {
font-size: 1.3rem;
font-weight: 600;
color: var(--admin-text);
}
.guide-type-token {
font-size: 1.1rem;
font-family: "Poppins", sans-serif;
color: var(--admin-accent-coral);
background: var(--admin-grey-50);
padding: 0.2rem 0.6rem;
border-radius: 3px;
}
.guide-type-size {
font-size: 1.2rem;
color: var(--admin-text-muted);
}
.guide-type-sample {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.guide-spacing-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.guide-spacing-row {
display: flex;
align-items: center;
gap: 1.6rem;
}
.guide-spacing-token {
flex: 0 0 14rem;
font-size: 1.1rem;
font-family: "Poppins", sans-serif;
color: var(--admin-accent-coral);
background: var(--admin-grey-50);
padding: 0.2rem 0.6rem;
border-radius: 3px;
white-space: nowrap;
}
.guide-spacing-bar {
height: 1.2rem;
background: var(--admin-primary);
border-radius: 2px;
opacity: 0.7;
flex-shrink: 0;
}
.guide-spacing-size {
flex: 0 0 10rem;
font-size: 1.2rem;
font-weight: 600;
color: var(--admin-text);
}
.guide-spacing-desc {
font-size: 1.3rem;
color: var(--admin-text-secondary);
}
.guide-breakpoints {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.guide-bp {
display: flex;
align-items: center;
gap: 1.6rem;
}
.guide-bp__bar {
height: 3.2rem;
background: linear-gradient(90deg, var(--admin-primary) 0%, rgba(var(--admin-primary-rgb), 0.4) 100%);
border-radius: var(--admin-radius-sm);
flex-shrink: 0;
min-width: 4rem;
}
.guide-bp__label {
flex: 0 0 6rem;
font-size: 1.3rem;
font-weight: 700;
color: var(--admin-text);
}
.guide-bp__val {
flex: 0 0 14rem;
font-size: 1.2rem;
color: var(--admin-text-secondary);
font-family: "Poppins", sans-serif;
}
.guide-bp__cols {
font-size: 1.3rem;
color: var(--admin-primary);
font-weight: 600;
}
.guide-motion-card {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
padding: 1.6rem;
text-align: center;
background: var(--admin-white);
}
.guide-motion-card__demo {
height: 6.4rem;
border-radius: var(--admin-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.4rem;
margin-bottom: 1.2rem;
cursor: default;
}
.guide-motion-card__demo--fade {
background: var(--admin-primary-light);
color: var(--admin-primary);
transition: opacity 200ms ease-out;
}
.guide-motion-card__demo--fade:hover {
opacity: 0.4;
}
.guide-motion-card__demo--slide {
background: var(--admin-success-bg);
color: var(--admin-success-text);
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.guide-motion-card__demo--slide:hover {
transform: translateY(-4px);
}
.guide-motion-card__demo--scale {
background: var(--admin-warn-bg);
color: var(--admin-warn-text);
transition: transform 150ms ease;
}
.guide-motion-card__demo--scale:hover {
transform: scale(1.05);
}
.guide-motion-card__label {
font-size: 1.3rem;
font-weight: 600;
color: var(--admin-text);
margin: 0 0 0.4rem;
}
.guide-motion-card__code {
font-size: 1.1rem;
font-family: "Poppins", sans-serif;
color: var(--admin-text-muted);
background: var(--admin-grey-50);
padding: 0.2rem 0.5rem;
border-radius: 3px;
}
.admin-guide-page .admin__content {
max-width: 1440px;
}
.guide-layout {
display: grid;
grid-template-columns: 24rem minmax(0, 1fr) 20rem;
gap: 2.4rem;
margin-top: 2rem;
align-items: start;
}
@media (max-width: 1280px) {
.guide-layout {
grid-template-columns: 24rem minmax(0, 1fr);
gap: 2rem;
}
}
@media (max-width: 1024px) {
.guide-layout {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
}
.guide-layout__nav {
position: sticky;
top: 8rem;
max-height: calc(100vh - 8rem - 2rem);
overflow-y: auto;
padding: 0.4rem 0.4rem 2rem 0;
scrollbar-width: thin;
}
@media (max-width: 1024px) {
.guide-layout__nav {
position: fixed;
top: 0;
left: 0;
width: min(28rem, 86vw);
height: 100vh;
max-height: none;
background: var(--admin-white);
border-right: 1px solid var(--admin-border-light);
box-shadow: var(--admin-elevation-3);
padding: 1.6rem 1.6rem 2.4rem;
transform: translateX(-101%);
transition: transform 240ms var(--admin-ease);
z-index: 9000;
}
.guide-layout--nav-open .guide-layout__nav {
transform: translateX(0);
}
}
.guide-layout__main {
min-width: 0;
}
.guide-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.guide-layout__toc {
position: sticky;
top: 8rem;
max-height: calc(100vh - 8rem - 2rem);
overflow-y: auto;
padding: 0.4rem 0.4rem 2rem 0;
scrollbar-width: thin;
}
@media (max-width: 1280px) {
.guide-layout__toc {
display: none;
}
}
.guide-layout::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 240ms var(--admin-ease);
z-index: 8900;
}
@media (min-width: 1024px) {
.guide-layout::before {
display: none;
}
}
.guide-layout--nav-open::before {
opacity: 1;
pointer-events: auto;
}
body.guide-nav-open {
overflow: hidden;
}
@media (min-width: 1024px) {
body.guide-nav-open {
overflow: auto;
}
}
.guide-nav__close {
display: none;
align-self: flex-end;
width: 3.2rem;
height: 3.2rem;
border: 0;
background: transparent;
color: var(--admin-text-secondary);
border-radius: var(--admin-radius-sm);
cursor: pointer;
font-size: 1.6rem;
}
.guide-nav__close:hover {
background: var(--admin-state-hover);
}
@media (max-width: 1024px) {
.guide-nav__close {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.8rem;
}
}
.guide-nav {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.guide-nav__group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.guide-nav__group-title {
margin: 0 0 0.2rem;
padding: 0 1rem;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--admin-text-muted);
}
.guide-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.guide-nav__item {
margin: 0;
}
.guide-nav__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
padding: 0.7rem 1rem;
font-size: 1.32rem;
font-weight: 500;
line-height: 1.4;
color: var(--admin-text-secondary);
text-decoration: none;
border-radius: var(--admin-radius-sm);
border-left: 2px solid transparent;
transition: background 160ms var(--admin-ease), color 160ms var(--admin-ease), border-color 160ms var(--admin-ease);
}
.guide-nav__link:hover {
background: var(--admin-state-hover);
color: var(--admin-text);
}
.guide-nav__link.is-active {
background: var(--admin-primary-light);
border-left-color: var(--admin-primary);
color: var(--admin-primary-text);
font-weight: 700;
}
.guide-nav__label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.guide-nav__badge {
flex: 0 0 auto;
font-size: 1rem;
font-weight: 700;
padding: 0.1rem 0.5rem;
border-radius: var(--admin-radius-full);
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
}
.is-active .guide-nav__badge {
background: rgba(var(--admin-primary-rgb), 0.18);
color: var(--admin-primary-text);
}
.guide-toc__title {
margin: 0 0 1rem;
padding: 0 1rem;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--admin-text-muted);
}
.guide-toc__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.05rem;
border-left: 1px solid var(--admin-border-light);
}
.guide-toc__item {
margin: 0;
}
.guide-toc__link {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.5rem 1rem;
margin-left: -1px;
border-left: 2px solid transparent;
font-size: 1.25rem;
line-height: 1.4;
color: var(--admin-text-muted);
text-decoration: none;
transition: color 160ms var(--admin-ease), border-color 160ms var(--admin-ease);
}
.guide-toc__link:hover {
color: var(--admin-text-secondary);
}
.guide-toc__link.is-active {
color: var(--admin-primary-text);
border-left-color: var(--admin-primary);
font-weight: 600;
}
.guide-toc__bullet {
display: none;
}
.guide-toc__label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.guide-mobile-toggle {
display: none;
}
@media (max-width: 1024px) {
.guide-mobile-toggle {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 1.2rem;
font-size: 1.3rem;
font-weight: 600;
color: var(--admin-text);
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
cursor: pointer;
margin: 1.2rem 0;
}
.guide-mobile-toggle:hover {
background: var(--admin-grey-50);
}
.guide-mobile-toggle i {
color: var(--admin-primary);
}
}
.guide-section {
scroll-margin-top: 8rem;
}
.guide-section--no-card {
background: transparent;
border: 0;
padding: 0;
margin-bottom: 0;
}
.guide-section--bordered {
background: var(--admin-white);
}
.guide-demo {
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
overflow: hidden;
box-shadow: var(--admin-elevation-1);
}
.guide-demo:has([data-admin-breadcrumb]) {
overflow: visible;
}
.guide-demo[data-mode=preview] .guide-demo__code {
display: none;
}
.guide-demo[data-mode=code] .guide-demo__preview {
display: none;
}
.guide-demo__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
padding: 0.8rem 1.2rem;
background: var(--admin-grey-50);
border-bottom: 1px solid var(--admin-border-light);
}
.guide-demo__title {
font-size: 1.2rem;
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
}
.guide-demo__actions {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-left: auto;
}
.guide-demo__actions button {
appearance: none;
border: 0;
background: transparent;
font-size: 1.2rem;
font-weight: 600;
color: var(--admin-text-secondary);
padding: 0.4rem 0.9rem;
border-radius: var(--admin-radius-sm);
cursor: pointer;
transition: background 160ms var(--admin-ease), color 160ms var(--admin-ease);
}
.guide-demo__actions button:hover {
background: var(--admin-state-hover);
color: var(--admin-text);
}
.guide-demo__actions button.is-active {
background: var(--admin-white);
color: var(--admin-primary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--admin-border-light);
}
.guide-demo__actions button.is-copied {
background: var(--admin-success-bg);
color: var(--admin-success-text);
}
.guide-demo__actions button.is-copied::after {
content: " ✓";
}
.guide-demo__preview {
padding: 2rem 2.4rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.2rem;
}
.guide-demo__preview--block {
display: block;
}
.guide-demo__preview--center {
justify-content: center;
}
.guide-demo__code {
margin: 0;
padding: 1.6rem 2rem;
background: #0f172a;
color: #e2e8f0;
font-size: 1.25rem;
line-height: 1.6;
overflow-x: auto;
font-family: "Poppins", sans-serif;
white-space: pre;
tab-size: 2;
}
.admin-guide__breadcrumb-surface {
display: flex;
align-items: center;
width: 100%;
min-height: var(--admin-header-height);
padding: 0 var(--admin-space-lg);
background: var(--admin-header-bg);
border-radius: var(--admin-radius);
}
.admin-guide__breadcrumb-nav {
flex: 1;
min-width: 0;
}
.guide-token-row {
display: grid;
grid-template-columns: 5.2rem minmax(16rem, 22rem) minmax(10rem, 14rem) 1fr auto;
align-items: center;
gap: 1.4rem;
padding: 1rem 1.4rem;
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
}
.guide-token-row + .guide-token-row {
margin-top: 0.6rem;
}
@media (max-width: 1024px) {
.guide-token-row {
grid-template-columns: 4rem 1fr auto;
grid-template-areas: "swatch var copy" "swatch value value" "swatch usage usage";
row-gap: 0.4rem;
}
}
.guide-token-row__swatch {
width: 4.2rem;
height: 4.2rem;
border-radius: var(--admin-radius-sm);
background: var(--swatch-bg, var(--admin-grey-100));
border: 1px solid rgba(0, 0, 0, 0.06);
flex-shrink: 0;
}
@media (max-width: 1024px) {
.guide-token-row > .guide-token-row__swatch {
grid-area: swatch;
}
}
.guide-token-row__var {
font-family: "Poppins", sans-serif;
font-size: 1.25rem;
color: var(--admin-accent-coral, var(--admin-primary));
background: var(--admin-grey-50);
padding: 0.3rem 0.7rem;
border-radius: 3px;
justify-self: start;
}
@media (max-width: 1024px) {
.guide-token-row > .guide-token-row__var {
grid-area: var;
}
}
.guide-token-row__value {
font-family: "Poppins", sans-serif;
font-size: 1.25rem;
color: var(--admin-text);
}
@media (max-width: 1024px) {
.guide-token-row > .guide-token-row__value {
grid-area: value;
}
}
.guide-token-row__usage {
font-size: 1.3rem;
color: var(--admin-text-secondary);
}
@media (max-width: 1024px) {
.guide-token-row > .guide-token-row__usage {
grid-area: usage;
}
}
.guide-token-row__copy {
appearance: none;
border: 1px solid var(--admin-border-light);
background: var(--admin-white);
color: var(--admin-text-secondary);
font-size: 1.1rem;
font-weight: 600;
padding: 0.4rem 0.9rem;
border-radius: var(--admin-radius-sm);
cursor: pointer;
transition: background 160ms var(--admin-ease), color 160ms var(--admin-ease);
}
.guide-token-row__copy:hover {
background: var(--admin-state-hover);
color: var(--admin-text);
}
.guide-token-row__copy.is-copied {
background: var(--admin-success-bg);
color: var(--admin-success-text);
border-color: rgba(var(--admin-success-rgb), 0.3);
}
.guide-token-row__copy.is-copied::after {
content: " ✓";
}
@media (max-width: 1024px) {
.guide-token-row > .guide-token-row__copy {
grid-area: copy;
}
}
.guide-props-table {
width: 100%;
border-collapse: collapse;
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
overflow: hidden;
font-size: 1.3rem;
margin-top: 1.4rem;
}
.guide-props-table thead {
background: var(--admin-grey-50);
font-size: 1.15rem;
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.guide-props-table th, .guide-props-table td {
text-align: left;
padding: 1rem 1.4rem;
border-bottom: 1px solid var(--admin-border-light);
vertical-align: top;
}
.guide-props-table tr:last-child td {
border-bottom: 0;
}
.guide-props-table code {
font-family: "Poppins", sans-serif;
font-size: 1.2rem;
color: var(--admin-accent-coral, var(--admin-primary));
background: var(--admin-grey-50);
padding: 0.15rem 0.5rem;
border-radius: 3px;
}
.guide-swatch-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
gap: 1.2rem;
}
.guide-swatch-card {
background: var(--admin-white);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
overflow: hidden;
display: flex;
flex-direction: column;
}
.guide-swatch-card__color {
height: 8rem;
background: var(--swatch-bg, var(--admin-grey-100));
}
.guide-swatch-card__meta {
padding: 0.8rem 1rem 1rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.guide-swatch-card__name {
font-size: 1.3rem;
font-weight: 700;
color: var(--admin-text);
}
.guide-swatch-card__hex {
font-family: "Poppins", sans-serif;
font-size: 1.15rem;
color: var(--admin-text-secondary);
}
.guide-callout {
display: flex;
gap: 1.2rem;
padding: 1.4rem 1.6rem;
background: var(--admin-info-bg);
border: 1px solid rgba(var(--admin-info-rgb), 0.25);
border-radius: var(--admin-radius-sm);
color: var(--admin-info-text);
}
.guide-callout--warn {
background: var(--admin-warn-bg);
border-color: rgba(var(--admin-warn-rgb), 0.3);
color: var(--admin-warn-text);
}
.guide-callout--error {
background: var(--admin-error-bg);
border-color: rgba(var(--admin-error-rgb), 0.3);
color: var(--admin-error-text);
}
.guide-callout__icon {
flex: 0 0 auto;
font-size: 1.8rem;
line-height: 1.2;
}
.guide-callout__body {
flex: 1 1 auto;
font-size: 1.3rem;
line-height: 1.55;
}
.guide-callout__title {
margin: 0 0 0.4rem;
font-size: 1.35rem;
font-weight: 700;
}
.admin-docs {
display: grid;
grid-template-columns: 220px 1fr 200px;
gap: var(--admin-space-3xl);
align-items: start;
max-width: 1280px;
margin: 0 auto;
padding: var(--admin-space-2xl) var(--admin-space-lg);
font-size: var(--admin-fs-body);
line-height: 1.65;
}
@media (max-width: 1024px) {
.admin-docs {
grid-template-columns: 1fr;
gap: var(--admin-space-xl);
padding: var(--admin-space) var(--admin-space);
}
}
.admin-docs__tabs {
grid-column: 1/-1;
display: flex;
gap: 0;
margin-bottom: var(--admin-space);
border-bottom: 2px solid var(--admin-border-light);
background: var(--admin-main-bg);
}
.admin-docs__tab {
padding: var(--admin-space) var(--admin-space-lg);
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text-secondary);
text-decoration: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-docs__tab:hover {
color: var(--admin-text);
}
.admin-docs__tab.is-active {
color: var(--admin-primary);
border-bottom-color: var(--admin-primary);
}
.admin-docs__tab-panel {
display: none;
}
.admin-docs__tab-panel.is-active {
display: block;
}
.admin-docs__tab-panel-title {
margin: 0 0 var(--admin-space-sm);
font-size: var(--admin-fs-menu);
font-weight: 600;
color: var(--admin-text);
}
.admin-docs__tab-panel-lead {
margin: 0 0 var(--admin-space-xl);
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
}
.admin-docs__nav-group {
margin-bottom: var(--admin-space);
list-style: none;
}
.admin-docs__nav-group-title {
display: block;
padding: var(--admin-space-2xs) 0 var(--admin-space-2xs) var(--admin-space-sm);
font-size: var(--admin-fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--admin-text-muted);
}
.admin-docs__nav-sublist {
margin: 0;
padding: 0;
list-style: none;
}
.admin-docs__nav {
padding: var(--admin-space) var(--admin-space-sm) var(--admin-space-xl) 0;
margin: 0 var(--admin-space-sm) 0 0;
border-right: 1px solid var(--admin-border-light);
background: var(--admin-main-bg);
z-index: 2;
}
@media (max-width: 1024px) {
.admin-docs__nav {
position: static;
max-height: none;
overflow: visible;
margin: 0;
padding: 0 0 var(--admin-space);
margin-bottom: var(--admin-space);
border-right: none;
border-bottom: 1px solid var(--admin-border-light);
background: transparent;
}
}
.admin-docs__nav-title {
margin: 0 0 var(--admin-space);
font-size: var(--admin-fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--admin-text-muted);
}
.admin-docs__nav-list {
margin: 0;
padding: 0;
list-style: none;
}
.admin-docs__nav-list li {
margin-bottom: 0;
}
.admin-docs__nav-link {
display: block;
padding: var(--admin-space-2xs) 0 var(--admin-space-2xs) var(--admin-space-sm);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
text-decoration: none;
border-left: 2px solid transparent;
margin-left: -2px;
transition: color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-docs__nav-link:hover {
color: var(--admin-text);
border-left-color: var(--admin-grey-300);
}
.admin-docs__main {
min-width: 0;
max-width: 720px;
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-main-bg);
border-radius: var(--admin-radius-sm);
}
@media (max-width: 1024px) {
.admin-docs__main {
max-width: none;
padding: 0;
}
}
.admin-docs__header {
margin-bottom: var(--admin-space-2xl);
padding-bottom: var(--admin-space-xl);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-docs__title {
margin: 0 0 var(--admin-space);
font-size: var(--admin-fs-title);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.25;
color: var(--admin-text);
}
.admin-docs__lead {
margin: 0;
font-size: var(--admin-fs-body-lg);
line-height: 1.6;
color: var(--admin-text-secondary);
}
.admin-docs__section {
margin-bottom: var(--admin-space-2xl);
padding-bottom: var(--admin-space-xl);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-docs__section:last-child {
border-bottom: none;
}
.admin-docs__section-title {
margin: 0 0 var(--admin-space);
font-size: var(--admin-fs-menu);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--admin-text);
scroll-margin-top: calc(var(--admin-header-height) + var(--admin-space-lg));
}
.admin-docs__subsection {
margin: var(--admin-space-xl) 0 var(--admin-space);
font-size: var(--admin-fs-body-lg);
font-weight: 600;
color: var(--admin-text);
scroll-margin-top: calc(var(--admin-header-height) + var(--admin-space-lg));
}
.admin-docs__subsection:first-child {
margin-top: 0;
}
.admin-docs__subsubsection {
margin: var(--admin-space-lg) 0 var(--admin-space-sm);
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text-secondary);
}
.admin-docs__main p {
margin: 0 0 var(--admin-space);
font-size: inherit;
line-height: 1.7;
color: var(--admin-text);
}
.admin-docs__main code {
font-family: "Poppins", sans-serif;
font-size: 0.9em;
padding: 0.15em 0.45em;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-xs);
color: var(--admin-text);
border: 1px solid var(--admin-grey-200);
}
.admin-docs__main a {
color: var(--admin-primary);
text-decoration: none;
transition: color var(--admin-duration) var(--admin-ease);
}
.admin-docs__main a:hover {
color: var(--admin-primary-hover);
text-decoration: underline;
}
.admin-docs__list {
margin: 0 0 var(--admin-space);
padding-left: 1.5em;
}
.admin-docs__list li {
margin-bottom: var(--admin-space-2xs);
line-height: 1.65;
}
.admin-docs__list--ordered {
list-style: decimal;
padding-left: 1.75em;
}
.admin-docs__list--ordered li {
margin-bottom: var(--admin-space-sm);
}
.admin-docs__table {
width: 100%;
margin: var(--admin-space) 0;
border-collapse: collapse;
font-size: var(--admin-fs-sm);
line-height: 1.5;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
overflow: hidden;
box-shadow: var(--admin-elevation-1);
}
.admin-docs__table thead {
background: var(--admin-grey-50);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-docs__table th {
padding: var(--admin-space-sm) var(--admin-space);
font-weight: 600;
text-align: left;
color: var(--admin-text);
font-size: var(--admin-fs-xs);
text-transform: none;
letter-spacing: 0;
}
.admin-docs__table td {
padding: var(--admin-space-sm) var(--admin-space);
border-bottom: 1px solid var(--admin-border-light);
color: var(--admin-text);
vertical-align: top;
}
.admin-docs__table td:first-child {
color: var(--admin-text-secondary);
font-weight: 500;
white-space: nowrap;
width: 1%;
}
.admin-docs__table tbody tr {
transition: background var(--admin-duration) var(--admin-ease);
}
.admin-docs__table tbody tr:last-child td {
border-bottom: none;
}
.admin-docs__table tbody tr:hover {
background: var(--admin-grey-50);
}
.admin-docs__table code {
font-size: 0.88em;
padding: 0.12em 0.35em;
word-break: break-all;
}
@media (max-width: 1024px) {
.admin-docs__table {
font-size: 1.15rem;
}
.admin-docs__table th,
.admin-docs__table td {
padding: var(--admin-space) var(--admin-space-sm);
}
.admin-docs__table td:first-child {
white-space: normal;
}
}
.admin-docs__hero {
position: relative;
overflow: hidden;
padding: var(--admin-space-2xl);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: linear-gradient(135deg, rgba(17, 24, 39, 0.04), rgba(17, 24, 39, 0.01));
}
@media (max-width: 1024px) {
.admin-docs__hero {
padding: var(--admin-space-xl);
}
}
.admin-docs__eyebrow {
display: inline-flex;
align-items: center;
margin-bottom: var(--admin-space-sm);
padding: 0.35rem 0.7rem;
border-radius: var(--admin-radius-full);
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
font-size: var(--admin-fs-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-docs__hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-sm);
margin-top: var(--admin-space-lg);
}
@media (max-width: 1024px) {
.admin-docs__hero-actions {
grid-template-columns: 1fr;
}
}
.admin-docs__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 var(--admin-space-lg);
border-radius: var(--admin-radius-full);
background: var(--admin-text);
color: #fff !important;
font-size: var(--admin-fs-sm);
font-weight: 600;
text-decoration: none;
transition: transform var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-docs__button:hover {
background: var(--admin-primary);
transform: translateY(-1px);
text-decoration: none !important;
box-shadow: var(--admin-elevation-2);
}
.admin-docs__button--secondary {
background: var(--admin-white);
color: var(--admin-text) !important;
border: 1px solid var(--admin-border-light);
}
.admin-docs__callout,
.admin-docs__tip {
margin: 0 0 var(--admin-space-lg);
padding: var(--admin-space-lg);
border-radius: var(--admin-radius);
border: 1px solid var(--admin-border-light);
}
.admin-docs__callout {
background: rgba(15, 23, 42, 0.04);
}
.admin-docs__callout strong {
display: inline-block;
margin-bottom: var(--admin-space-2xs);
color: var(--admin-text);
}
.admin-docs__callout p:last-child {
margin-bottom: 0;
}
.admin-docs__tip {
background: rgba(255, 255, 255, 0.92);
}
.admin-docs__tip strong {
display: inline-block;
margin-bottom: var(--admin-space-2xs);
color: var(--admin-primary);
}
.admin-docs__tip p:last-child {
margin-bottom: 0;
}
.admin-docs__card-grid,
.admin-docs__link-grid {
display: grid;
gap: var(--admin-space);
}
.admin-docs__card-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
@media (max-width: 1024px) {
.admin-docs__card-grid {
grid-template-columns: 1fr;
}
}
.admin-docs__link-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
@media (max-width: 1024px) {
.admin-docs__link-grid {
grid-template-columns: 1fr;
}
}
.admin-docs__mini-card,
.admin-docs__link-card {
padding: var(--admin-space-lg);
border-radius: var(--admin-radius);
border: 1px solid var(--admin-border-light);
background: var(--admin-card-bg);
box-shadow: var(--admin-elevation-1);
}
.admin-docs__mini-card p:last-child {
margin-bottom: 0;
}
.admin-docs__link-card {
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs);
text-decoration: none;
transition: transform var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-docs__link-card strong {
color: var(--admin-text);
font-size: var(--admin-fs-body);
}
.admin-docs__link-card span {
color: var(--admin-text-secondary);
line-height: 1.6;
}
.admin-docs__link-card:hover {
transform: translateY(-2px);
border-color: var(--admin-border);
box-shadow: var(--admin-elevation-2);
text-decoration: none !important;
}
.admin-docs--ops-manual .admin-docs__section:first-of-type {
padding-top: 0;
}
.admin-docs__toc {
padding: var(--admin-space) 0 var(--admin-space-xl) var(--admin-space-sm);
margin: 0 0 0 var(--admin-space-sm);
border-left: 1px solid var(--admin-border-light);
background: var(--admin-main-bg);
z-index: 2;
}
@media (max-width: 1024px) {
.admin-docs__toc {
position: static;
max-height: none;
overflow: visible;
margin: 0;
padding: var(--admin-space) 0 0;
border-left: none;
border-top: 1px solid var(--admin-border-light);
background: transparent;
}
}
.admin-docs__toc-title {
margin: 0 0 var(--admin-space);
font-size: var(--admin-fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--admin-text-muted);
}
.admin-docs__toc-list {
margin: 0;
padding: 0;
list-style: none;
}
.admin-docs__toc-list li {
margin-bottom: var(--admin-space-2xs);
}
.admin-docs__toc-link {
display: block;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
text-decoration: none;
padding: var(--admin-space-2xs) 0;
transition: color var(--admin-duration) var(--admin-ease);
}
.admin-docs__toc-link:hover {
color: var(--admin-primary);
}
.admin-notifications {
max-width: 900px;
padding-bottom: var(--admin-space-2xl);
}
.admin-notifications__tabs {
margin-top: var(--admin-space);
margin-bottom: var(--admin-space);
}
.admin-notifications__filters {
display: flex;
align-items: flex-end;
gap: var(--admin-space);
margin-bottom: var(--admin-space);
}
.admin-notifications__filters .admin-form__field {
max-width: 14rem;
}
.admin-notifications__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--admin-space);
padding: var(--admin-space-2xl) var(--admin-space);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
color: var(--admin-text-muted);
}
.admin-notifications__empty-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--admin-grey-100);
color: var(--admin-text-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
}
.admin-notifications__empty-text {
margin: 0;
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
}
.admin-notifications__list {
margin: 0;
padding: 0;
list-style: none;
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
overflow: hidden;
}
.admin-notifications__item {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--admin-space);
padding: var(--admin-space) var(--admin-space-lg);
border-bottom: 1px solid var(--admin-border-light);
min-height: 72px;
transition: background var(--admin-duration) var(--admin-ease);
}
.admin-notifications__item:last-child {
border-bottom: none;
}
.admin-notifications__item:hover {
background: var(--admin-grey-50);
}
.admin-notifications__item--unread {
background: var(--admin-primary-soft, rgba(59, 130, 246, 0.05));
}
.admin-notifications__item--unread::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background: var(--admin-primary);
}
.admin-notifications__item--unread:hover {
background: var(--admin-primary-soft, rgba(59, 130, 246, 0.08));
}
.admin-notifications__item-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
font-size: 1.05rem;
}
.admin-notifications__item--unread .admin-notifications__item-icon {
background: var(--admin-primary-soft, rgba(59, 130, 246, 0.15));
color: var(--admin-primary);
}
.admin-notifications__item-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs);
}
.admin-notifications__item-link {
text-decoration: none;
color: inherit;
}
.admin-notifications__item-link:hover .admin-notifications__title {
color: var(--admin-primary);
}
.admin-notifications__title {
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text);
transition: color var(--admin-duration) var(--admin-ease);
}
.admin-notifications__msg {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5;
}
.admin-notifications__meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-notifications__group-chip {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.5rem;
font-size: 11px;
font-weight: 500;
color: var(--admin-text-secondary);
background: var(--admin-grey-100);
border-radius: var(--admin-radius-full);
}
.admin-notifications__time {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-notifications__unread-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--admin-primary);
flex-shrink: 0;
}
.admin-notifications__mark-form {
flex-shrink: 0;
margin: 0;
}
.admin-notifications__mark-form button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 1px solid var(--admin-border-light);
border-radius: 50%;
color: var(--admin-text-muted);
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-notifications__mark-form button:hover {
background: var(--admin-primary);
color: #ffffff;
border-color: var(--admin-primary);
}
.admin-notifications__mark-all-form {
display: inline-flex;
margin: 0;
}
.admin-notifications-config {
max-width: 880px;
/* --- 리스트 ---------------------------------------------------- */
}
.admin-notifications-config__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-notifications-config {
/* --- 항목 카드 -------------------------------------------------- */
}
.admin-notifications-config__item {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas: "icon info toggle" "form form form";
column-gap: var(--admin-space);
row-gap: var(--admin-space);
align-items: center;
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-notifications-config__item:hover {
border-color: var(--admin-border);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.admin-notifications-config__item.is-on {
border-left: 3px solid var(--admin-success);
padding-left: calc(var(--admin-space-lg) - 2px);
}
.admin-notifications-config__item.is-off {
background: var(--admin-grey-50);
}
.admin-notifications-config__item.is-off .admin-notifications-config__item-icon {
opacity: 0.45;
}
.admin-notifications-config__item.is-off .admin-notifications-config__item-label {
color: var(--admin-text-secondary);
}
.admin-notifications-config__item.is-off .admin-notifications-config__item-state {
color: var(--admin-text-muted);
background: var(--admin-grey-100);
}
.admin-notifications-config__item.is-off .admin-notifications-config__recipients-form {
opacity: 0.7;
}
.admin-notifications-config__item {
/* --- 반응형 ---------------------------------------------------- */
}
@media (max-width: 1024px) {
.admin-notifications-config__item {
grid-template-columns: auto 1fr;
grid-template-areas: "icon info" "toggle toggle" "form form";
padding: var(--admin-space);
}
}
.admin-notifications-config {
/* --- 아이콘 ---------------------------------------------------- */
}
.admin-notifications-config__item-icon {
grid-area: icon;
align-self: center;
flex: 0 0 32px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--admin-radius-sm);
background: color-mix(in srgb, var(--admin-primary) 8%, transparent);
color: var(--admin-primary);
font-size: 1.7rem;
transition: opacity var(--admin-duration) var(--admin-ease);
}
.is-off .admin-notifications-config__item-icon {
background: var(--admin-grey-100);
color: var(--admin-text-muted);
}
.admin-notifications-config {
/* --- 정보 영역 -------------------------------------------------- */
}
.admin-notifications-config__item-info {
grid-area: info;
align-self: center;
min-width: 0;
}
.admin-notifications-config__item-heading {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space-3xs);
}
.admin-notifications-config__item-label {
font-size: var(--admin-fs-lg);
font-weight: 600;
color: var(--admin-text);
line-height: 1.4;
}
.admin-notifications-config__item-group {
display: inline-block;
padding: 1px 8px;
border-radius: var(--admin-radius-full);
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
font-size: var(--admin-fs-xs);
font-weight: 500;
}
.admin-notifications-config__item-state {
display: inline-flex;
align-items: center;
padding: 1px 8px;
font-size: var(--admin-fs-xs);
font-weight: 500;
color: var(--admin-success-text, var(--admin-success));
background: color-mix(in srgb, var(--admin-success) 12%, transparent);
border-radius: var(--admin-radius-full);
}
.admin-notifications-config__item-desc {
margin: 0;
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
line-height: 1.55;
}
.admin-notifications-config {
/* --- 토글 영역 -------------------------------------------------- */
}
.admin-notifications-config__item-toggle {
grid-area: toggle;
align-self: center;
display: flex;
align-items: center;
}
@media (max-width: 1024px) {
.admin-notifications-config__item-toggle {
justify-content: flex-end;
padding-top: var(--admin-space-xs);
}
}
.admin-notifications-config .admin-toggle-switch.is-on .admin-toggle-switch__hint {
color: var(--admin-success-text);
}
.admin-notifications-config .admin-toggle-switch.is-off .admin-toggle-switch__hint {
color: var(--admin-text-muted);
}
.admin-notifications-config {
/* --- 받는 사람 폼 ----------------------------------------------- */
}
.admin-notifications-config__recipients-form {
grid-area: form;
display: flex;
flex-direction: column;
gap: var(--admin-space);
padding-top: var(--admin-space);
border-top: 1px dashed var(--admin-border-light);
}
.admin-notifications-config__field {
margin: 0;
}
.admin-notifications-config__field[hidden] {
display: none;
}
.admin-notifications-config__actions {
display: flex;
justify-content: flex-end;
gap: var(--admin-space-2xs);
}
.admin-notifications-config {
/* --- 빈 상태 ---------------------------------------------------- */
}
.admin-notifications-config__empty {
margin: var(--admin-space-lg) 0;
padding: var(--admin-space-xl);
background: var(--admin-card-bg);
border: 1px dashed var(--admin-border);
border-radius: var(--admin-radius);
color: var(--admin-text-muted);
font-size: var(--admin-fs-body);
text-align: center;
}
.admin-notifications-config__empty code {
padding: 2px 6px;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-sm, 4px);
font-family: "Poppins", sans-serif;
font-size: 0.92em;
}
.admin-analytics {
--an-accent: var(--admin-primary);
}
.admin-analytics .analytics-header__range {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-2xs);
align-items: center;
}
.admin-analytics .analytics-header__chip {
display: inline-flex;
align-items: center;
gap: var(--admin-space-3xs);
padding: var(--admin-space-3xs) var(--admin-space-sm);
border-radius: var(--admin-radius-full);
font-size: var(--admin-fs-sm);
font-weight: 700;
background: var(--admin-primary);
color: var(--admin-on-primary);
white-space: nowrap;
}
.admin-analytics .analytics-header__chip i {
font-size: 0.92em;
opacity: 0.85;
}
.admin-analytics .analytics-header__chip--soft {
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
}
.admin-analytics .analytics-header__chip--soft i {
color: var(--admin-text-muted);
opacity: 1;
}
.admin-analytics .analytics-header__dash {
opacity: 0.65;
}
.admin-analytics .analytics-manual {
margin-bottom: var(--admin-space-lg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
background: var(--admin-card-bg);
overflow: hidden;
box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-manual__summary {
display: flex;
align-items: center;
gap: var(--admin-space-2xs);
padding: var(--admin-space-sm) var(--admin-space-lg);
cursor: pointer;
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text);
background: var(--admin-grey-50);
list-style: none;
}
.admin-analytics .analytics-manual__summary::-webkit-details-marker {
display: none;
}
.admin-analytics .analytics-manual__summary:hover {
background: var(--admin-grey-100);
}
.admin-analytics .analytics-manual__summary .fa-circle-question {
color: var(--admin-text-muted);
}
.admin-analytics .analytics-manual__summary .analytics-manual__chev {
margin-left: auto;
transition: transform 0.2s ease;
color: var(--admin-text-muted);
}
.admin-analytics .analytics-manual[open] .analytics-manual__chev {
transform: rotate(180deg);
}
.admin-analytics .analytics-manual__body {
padding: var(--admin-space-lg) var(--admin-space-xl) var(--admin-space-xl);
border-top: 1px solid var(--admin-border-light);
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
}
.admin-analytics .analytics-manual__body p {
margin: 0 0 var(--admin-space-sm);
}
.admin-analytics .analytics-manual__body ul {
margin: 0 0 var(--admin-space) 1.3em;
padding: 0;
}
.admin-analytics .analytics-manual__body ul li {
margin-bottom: var(--admin-space-3xs);
}
.admin-analytics .analytics-manual__body strong {
color: var(--admin-text);
}
.admin-analytics .analytics-manual__body code {
font-family: "Poppins", sans-serif;
font-size: 0.92em;
background: var(--admin-grey-100);
padding: 0.05em 0.35em;
border-radius: var(--admin-radius-xs);
color: var(--admin-text);
}
.admin-analytics .analytics-manual__h {
margin: var(--admin-space-lg) 0 var(--admin-space-2xs);
font-size: var(--admin-fs-body-lg);
font-weight: 700;
color: var(--admin-text);
}
.admin-analytics .analytics-manual__h:first-child {
margin-top: 0;
}
.admin-analytics .analytics-manual__code {
margin: 0 0 var(--admin-space);
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-grey-900);
color: var(--admin-grey-200);
border-radius: var(--admin-radius-sm);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-sm);
overflow-x: auto;
white-space: pre;
}
.admin-analytics .analytics-manual__table-wrap {
margin: 0 0 var(--admin-space);
overflow-x: auto;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
}
.admin-analytics .analytics-manual__formula {
width: 100%;
border-collapse: collapse;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-analytics .analytics-manual__formula th, .admin-analytics .analytics-manual__formula td {
padding: var(--admin-space-2xs) var(--admin-space-sm);
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--admin-border-light);
}
.admin-analytics .analytics-manual__formula thead th {
background: var(--admin-grey-50);
color: var(--admin-text);
font-weight: 800;
font-size: var(--admin-fs-xs);
letter-spacing: 0.02em;
text-transform: uppercase;
border-bottom: 1px solid var(--admin-border);
white-space: nowrap;
}
.admin-analytics .analytics-manual__formula tbody th[scope=row] {
color: var(--admin-text);
font-weight: 700;
white-space: nowrap;
width: 9rem;
}
.admin-analytics .analytics-manual__formula tbody tr:last-child th,
.admin-analytics .analytics-manual__formula tbody tr:last-child td {
border-bottom: 0;
}
.admin-analytics .analytics-manual__formula tbody tr:hover {
background: var(--admin-grey-50);
}
.admin-analytics .analytics-manual__formula code {
font-family: "Poppins", sans-serif;
font-size: 0.92em;
background: var(--admin-grey-100);
padding: 0.05em 0.35em;
border-radius: var(--admin-radius-xs);
color: var(--admin-text);
}
.admin-analytics .analytics-toolbar {
display: grid;
gap: var(--admin-space-sm);
padding: var(--admin-space) var(--admin-space-lg);
margin-bottom: var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-toolbar__main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-sm) var(--admin-space-lg);
}
.admin-analytics .analytics-toolbar__sub {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-sm) var(--admin-space-lg);
padding-top: var(--admin-space-sm);
border-top: 1px dashed var(--admin-border);
}
.admin-analytics .analytics-fg {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--admin-space-2xs);
}
.admin-analytics .analytics-fg__label {
display: inline-flex;
align-items: center;
gap: var(--admin-space-3xs);
font-size: var(--admin-fs-sm);
font-weight: 800;
color: var(--admin-text-muted);
letter-spacing: -0.01em;
white-space: nowrap;
}
.admin-analytics .analytics-fg__label i {
font-size: 0.95em;
color: var(--admin-text-muted);
}
.admin-analytics .analytics-seg {
display: inline-flex;
flex-wrap: wrap;
gap: 3px;
padding: 3px;
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-full);
}
.admin-analytics .analytics-seg__item {
display: inline-flex;
align-items: center;
padding: var(--admin-space-3xs) var(--admin-space-sm);
border-radius: var(--admin-radius-full);
background: transparent;
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm);
font-weight: 600;
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.admin-analytics .analytics-seg__item:hover {
background: var(--admin-white);
color: var(--admin-text);
}
.admin-analytics .analytics-seg__item.is-active {
background: var(--admin-primary);
color: var(--admin-on-primary);
font-weight: 700;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.admin-analytics .analytics-toolbar__dates {
display: flex;
align-items: center;
gap: var(--admin-space-2xs);
}
.admin-analytics .analytics-toolbar__date {
padding: var(--admin-space-3xs) var(--admin-space-2xs);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
font-size: var(--admin-fs-sm);
color: var(--admin-text);
background: var(--admin-white);
}
.admin-analytics .analytics-toolbar__tilde {
color: var(--admin-text-muted);
}
.admin-analytics .analytics-summary {
margin-bottom: var(--admin-space-lg);
padding: var(--admin-space-lg);
background: linear-gradient(180deg, var(--admin-grey-50), var(--admin-white));
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-summary__head {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space-sm);
padding-bottom: var(--admin-space-sm);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-analytics .analytics-summary__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
flex: 0 0 auto;
border-radius: var(--admin-radius);
background: var(--admin-primary);
color: var(--admin-on-primary);
font-size: var(--admin-fs-body);
}
.admin-analytics .analytics-summary__title {
margin: 0;
font-size: var(--admin-fs-body-xl);
font-weight: 800;
color: var(--admin-text);
}
.admin-analytics .analytics-summary__sub {
margin: 1px 0 0;
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-analytics .analytics-summary__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--admin-space-2xs) var(--admin-space-lg);
}
.admin-analytics .analytics-summary__item {
display: flex;
align-items: flex-start;
gap: var(--admin-space-2xs);
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
line-height: 1.5;
}
.admin-analytics .analytics-summary__item i {
margin-top: 0.2em;
color: var(--admin-success-text);
font-size: 0.95em;
flex: 0 0 auto;
}
.admin-analytics .analytics-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--admin-space);
margin-bottom: var(--admin-space);
}
@media (max-width: 1280px) {
.admin-analytics .analytics-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 544px) {
.admin-analytics .analytics-kpis {
grid-template-columns: 1fr;
}
}
.admin-analytics .analytics-kpi {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto;
column-gap: var(--admin-space-sm);
row-gap: var(--admin-space-3xs);
align-items: center;
padding: var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
box-shadow: var(--admin-elevation-1);
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.admin-analytics .analytics-kpi:hover {
box-shadow: var(--admin-elevation-2);
transform: translateY(-1px);
}
.admin-analytics .analytics-kpi--accent {
background: var(--admin-primary);
border-color: var(--admin-primary);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__label,
.admin-analytics .analytics-kpi--accent .analytics-kpi__hint {
color: color-mix(in srgb, var(--admin-on-primary, #fff) 70%, transparent);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__value {
color: var(--admin-on-primary, #fff);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__icon {
background: color-mix(in srgb, var(--admin-on-primary, #fff) 14%, transparent);
color: var(--admin-on-primary, #fff);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__delta--none {
color: color-mix(in srgb, var(--admin-on-primary, #fff) 50%, transparent);
}
.admin-analytics .analytics-kpi__icon {
grid-row: 1/span 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--admin-radius);
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
font-size: var(--admin-fs-menu);
}
.admin-analytics .analytics-kpi__label {
align-self: end;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-3xs);
font-size: var(--admin-fs-sm);
font-weight: 700;
color: var(--admin-text-muted);
}
.admin-analytics .analytics-kpi__label-text {
font-weight: inherit;
color: inherit;
}
.admin-analytics .analytics-kpi__hint {
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-grey-500);
}
.admin-analytics .analytics-kpi__info,
.admin-analytics .analytics-metric__info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.2em;
height: 1.2em;
margin-left: var(--admin-space-3xs);
border-radius: 50%;
color: var(--admin-text-muted);
cursor: help;
font-size: 0.95em;
transition: color 0.15s ease, background-color 0.15s ease;
}
.admin-analytics .analytics-kpi__info:hover, .admin-analytics .analytics-kpi__info:focus,
.admin-analytics .analytics-metric__info:hover,
.admin-analytics .analytics-metric__info:focus {
color: var(--admin-text);
background: var(--admin-grey-100);
outline: 0;
}
.admin-analytics .analytics-kpi__info i,
.admin-analytics .analytics-metric__info i {
line-height: 1;
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__info {
color: color-mix(in srgb, var(--admin-on-primary, #fff) 65%, transparent);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__info:hover,
.admin-analytics .analytics-kpi--accent .analytics-kpi__info:focus {
color: var(--admin-on-primary, #fff);
background: color-mix(in srgb, var(--admin-on-primary, #fff) 14%, transparent);
}
.admin-analytics .analytics-kpi__value {
align-self: start;
font-size: var(--admin-fs-display);
font-weight: 800;
line-height: 1.05;
color: var(--admin-text);
letter-spacing: -0.02em;
}
.admin-analytics .analytics-kpi__deltawrap {
grid-column: 1/-1;
margin-top: var(--admin-space-3xs);
}
.admin-analytics .analytics-kpi__delta {
display: inline-flex;
align-items: center;
gap: var(--admin-space-3xs);
padding: 2px var(--admin-space-2xs);
border-radius: var(--admin-radius-full);
font-size: var(--admin-fs-xs);
font-weight: 700;
}
.admin-analytics .analytics-kpi__delta--up {
background: var(--admin-success-bg);
color: var(--admin-success-text);
}
.admin-analytics .analytics-kpi__delta--down {
background: var(--admin-error-bg);
color: var(--admin-error-text);
}
.admin-analytics .analytics-kpi__delta--flat {
background: var(--admin-grey-100);
color: var(--admin-text-muted);
}
.admin-analytics .analytics-kpi__delta--none {
padding: 0;
background: transparent;
color: var(--admin-grey-500);
font-weight: 600;
}
.admin-analytics .analytics-kpi__delta-cap {
font-weight: 500;
color: inherit;
opacity: 0.7;
}
.admin-analytics .analytics-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--admin-space);
margin-bottom: var(--admin-space-lg);
}
.admin-analytics .analytics-metric {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-metric__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
flex: 0 0 auto;
border-radius: var(--admin-radius-sm);
background: var(--admin-grey-100);
color: var(--admin-text-muted);
font-size: var(--admin-fs-body);
}
.admin-analytics .analytics-metric__text {
display: flex;
flex-direction: column;
min-width: 0;
}
.admin-analytics .analytics-metric__label {
display: inline-flex;
align-items: center;
gap: var(--admin-space-3xs);
font-size: var(--admin-fs-xs);
font-weight: 700;
color: var(--admin-text-muted);
}
.admin-analytics .analytics-metric__label-text {
font-weight: inherit;
color: inherit;
}
.admin-analytics .analytics-metric__value {
font-size: var(--admin-fs-menu);
font-weight: 800;
line-height: 1.1;
color: var(--admin-text);
}
.admin-analytics .analytics-metric__hint {
margin-left: auto;
font-size: var(--admin-fs-xs);
color: var(--admin-grey-500);
white-space: nowrap;
}
.admin-analytics .analytics-grid {
display: grid;
gap: var(--admin-space);
margin-bottom: var(--admin-space);
}
.admin-analytics .analytics-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-analytics .analytics-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-analytics .analytics-card {
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
margin-bottom: var(--admin-space);
overflow: hidden;
box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-card--wide {
width: 100%;
}
.admin-analytics .analytics-card__header {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space) var(--admin-space-lg);
border-bottom: 1px solid var(--admin-border-light);
background: linear-gradient(180deg, var(--admin-grey-50), var(--admin-white));
}
.admin-analytics .analytics-card__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
flex: 0 0 auto;
border-radius: var(--admin-radius-sm);
background: var(--admin-primary);
color: var(--admin-on-primary);
font-size: var(--admin-fs-body);
}
.admin-analytics .analytics-card__title {
margin: 0;
font-size: var(--admin-fs-body-xl);
font-weight: 800;
color: var(--admin-text);
}
.admin-analytics .analytics-card__desc {
margin: 1px 0 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-analytics .analytics-card__body {
padding: var(--admin-space-lg);
position: relative;
}
.admin-analytics .analytics-card__body--flush {
padding: 0;
}
.admin-analytics .analytics-chart-canvas {
width: 100% !important;
min-height: 240px;
max-height: 340px;
}
.admin-analytics .analytics-funnel {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--admin-space-sm);
}
.admin-analytics .analytics-funnel__empty {
text-align: center;
color: var(--admin-text-muted);
padding: var(--admin-space-2xl);
}
.admin-analytics .analytics-funnel__row {
display: grid;
grid-template-columns: 130px 1fr 120px;
align-items: center;
gap: var(--admin-space-sm);
}
.admin-analytics .analytics-funnel__label {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
font-weight: 700;
}
.admin-analytics .analytics-funnel__bar {
height: 24px;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-sm);
overflow: hidden;
}
.admin-analytics .analytics-funnel__bar span {
display: block;
height: 100%;
min-width: 4px;
background: linear-gradient(90deg, var(--admin-grey-600), var(--admin-grey-900));
border-radius: var(--admin-radius-sm);
transition: width 0.4s ease;
}
.admin-analytics .analytics-funnel__meta {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: var(--admin-space-3xs);
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-analytics .analytics-funnel__meta strong {
color: var(--admin-text);
font-size: var(--admin-fs-body-lg);
font-weight: 800;
}
.admin-analytics .analytics-funnel__meta em {
font-style: normal;
}
.admin-analytics .analytics-table {
margin: 0;
}
.admin-analytics .analytics-table th.num, .admin-analytics .analytics-table td.num {
text-align: right;
white-space: nowrap;
}
.admin-analytics .analytics-table td.empty {
text-align: center;
color: var(--admin-text-muted);
padding: var(--admin-space-2xl);
}
.admin-analytics .analytics-table tbody tr:hover {
background: var(--admin-grey-50);
}
.admin-analytics .analytics-path {
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-sm);
color: var(--admin-text);
word-break: break-all;
}
.admin-analytics .analytics-rate {
display: inline-block;
padding: 1px var(--admin-space-2xs);
border-radius: var(--admin-radius-full);
font-size: var(--admin-fs-sm);
font-weight: 700;
color: var(--admin-text-muted);
}
.admin-analytics .analytics-rate.is-positive {
background: var(--admin-success-bg);
color: var(--admin-success-text);
}
.admin-analytics .analytics-heatmap {
display: grid;
gap: 3px;
overflow-x: auto;
}
.admin-analytics .analytics-heatmap__hours,
.admin-analytics .analytics-heatmap__row {
display: grid;
grid-template-columns: 44px repeat(24, minmax(20px, 1fr));
gap: 3px;
align-items: center;
}
.admin-analytics .analytics-heatmap__hour-spacer,
.admin-analytics .analytics-heatmap__weekday {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
text-align: center;
font-weight: 700;
}
.admin-analytics .analytics-heatmap__hour {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
text-align: center;
}
.admin-analytics .analytics-heatmap__cell {
aspect-ratio: 1/1;
min-height: 22px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
color: rgba(15, 23, 42, 0.7);
background: var(--admin-grey-100);
}
.admin-analytics .analytics-heatmap__cell.has-value {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.admin-analytics .analytics-heatmap__legend {
display: flex;
align-items: center;
gap: var(--admin-space-3xs);
justify-content: flex-end;
margin-top: var(--admin-space-sm);
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-analytics .analytics-heatmap__legend i {
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-analytics .analytics-heatmap__legend span:first-child {
margin-right: var(--admin-space-3xs);
}
.admin-analytics .analytics-heatmap__legend span:last-child {
margin-left: var(--admin-space-3xs);
}
.admin-analytics .analytics-heatmap__legend-step--1 {
background: color-mix(in srgb, var(--admin-text) 10%, transparent);
}
.admin-analytics .analytics-heatmap__legend-step--2 {
background: color-mix(in srgb, var(--admin-text) 30%, transparent);
}
.admin-analytics .analytics-heatmap__legend-step--3 {
background: color-mix(in srgb, var(--admin-text) 55%, transparent);
}
.admin-analytics .analytics-heatmap__legend-step--4 {
background: color-mix(in srgb, var(--admin-text) 80%, transparent);
}
.admin-analytics .analytics-tabs {
margin-top: var(--admin-space);
}
.admin-analytics .analytics-condbar {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-2xs);
align-items: center;
margin-bottom: var(--admin-space-sm);
}
.admin-analytics .analytics-realtime {
margin-bottom: var(--admin-space-lg);
}
.admin-analytics .analytics-realtime__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--admin-space-2xs);
margin-bottom: var(--admin-space-sm);
padding: 0 var(--admin-space-3xs);
}
.admin-analytics .analytics-realtime__dot {
width: 9px;
height: 9px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--admin-success);
box-shadow: 0 0 0 0 rgba(var(--admin-success-rgb), 0.45);
animation: analyticsPulse 2s infinite;
}
@keyframes analyticsPulse {
0% {
box-shadow: 0 0 0 0 rgba(var(--admin-success-rgb), 0.45);
}
70% {
box-shadow: 0 0 0 8px rgba(var(--admin-success-rgb), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--admin-success-rgb), 0);
}
}
.admin-analytics .analytics-realtime__title {
font-size: var(--admin-fs-body-lg);
font-weight: 800;
color: var(--admin-text);
}
.admin-analytics .analytics-realtime__sub {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-analytics .analytics-realtime__sub strong {
color: var(--admin-text);
font-weight: 800;
}
.admin-analytics .analytics-realtime__nums {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--admin-space);
margin-bottom: var(--admin-space);
}
.admin-analytics .analytics-realtime__num {
position: relative;
display: flex;
flex-direction: column;
gap: var(--admin-space-3xs);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-realtime__num.is-accent {
background: var(--admin-primary);
border-color: var(--admin-primary);
}
.admin-analytics .analytics-realtime__num.is-accent .analytics-realtime__num-value {
color: var(--admin-on-primary);
}
.admin-analytics .analytics-realtime__num.is-accent .analytics-realtime__num-label {
color: rgba(255, 255, 255, 0.7);
}
.admin-analytics .analytics-realtime__num.is-accent .analytics-realtime__num-ico {
color: rgba(255, 255, 255, 0.85);
}
.admin-analytics .analytics-realtime__num-ico {
position: absolute;
top: var(--admin-space);
right: var(--admin-space-lg);
font-size: var(--admin-fs-body);
color: var(--admin-grey-400);
}
.admin-analytics .analytics-realtime__num-label {
font-size: var(--admin-fs-sm);
font-weight: 700;
color: var(--admin-text-muted);
}
.admin-analytics .analytics-realtime__num-value {
font-size: var(--admin-fs-subtitle);
font-weight: 800;
line-height: 1.05;
color: var(--admin-text);
letter-spacing: -0.02em;
}
.admin-analytics .analytics-realtime__panel {
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-realtime__panel-head {
display: flex;
align-items: center;
gap: var(--admin-space-3xs);
margin-bottom: var(--admin-space-sm);
padding-bottom: var(--admin-space-sm);
border-bottom: 1px solid var(--admin-border-light);
font-size: var(--admin-fs-sm);
font-weight: 800;
color: var(--admin-text-secondary);
}
.admin-analytics .analytics-realtime__panel-head i {
color: var(--admin-warn);
}
.admin-analytics .analytics-realtime__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 var(--admin-space-2xl);
}
.admin-analytics .analytics-realtime__list li {
display: flex;
align-items: baseline;
gap: var(--admin-space-2xs);
padding: var(--admin-space-3xs) 0;
border-bottom: 1px dashed var(--admin-border-light);
font-size: var(--admin-fs-sm);
}
.admin-analytics .analytics-realtime__list li .analytics-path {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-analytics .analytics-realtime__list li em {
font-style: normal;
font-weight: 800;
color: var(--admin-text);
flex: 0 0 auto;
}
.admin-analytics .analytics-realtime__rank {
flex: 0 0 1.4rem;
text-align: center;
font-size: var(--admin-fs-xs);
font-weight: 800;
color: var(--admin-text-muted);
font-variant-numeric: tabular-nums;
}
.admin-analytics .analytics-realtime__empty {
grid-column: 1/-1;
color: var(--admin-text-muted);
font-size: var(--admin-fs-sm);
padding: var(--admin-space) 0;
border: 0;
}
.admin-analytics .analytics-table th.rank, .admin-analytics .analytics-table td.rank {
width: 2.6rem;
text-align: center;
color: var(--admin-text-muted);
font-variant-numeric: tabular-nums;
}
.admin-analytics .analytics-rate.is-warn {
background: var(--admin-error-bg);
color: var(--admin-error-text);
}
.admin-analytics .analytics-muted {
color: var(--admin-text-muted);
font-weight: 600;
}
.admin-analytics .analytics-note {
display: flex;
align-items: flex-start;
gap: var(--admin-space-2xs);
margin: 0 0 var(--admin-space-lg);
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-grey-50);
border: 1px dashed var(--admin-border);
border-radius: var(--admin-radius);
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-analytics .analytics-note i {
margin-top: 0.15em;
color: var(--admin-text-muted);
flex: 0 0 auto;
}
.admin-analytics .analytics-note code {
font-family: "Poppins", sans-serif;
font-size: 0.92em;
background: var(--admin-grey-100);
padding: 0.05em 0.35em;
border-radius: var(--admin-radius-xs);
color: var(--admin-text);
}
.admin-analytics .analytics-table td.empty code {
font-family: "Poppins", sans-serif;
font-size: 0.92em;
background: var(--admin-grey-100);
padding: 0.05em 0.35em;
border-radius: var(--admin-radius-xs);
color: var(--admin-text);
}
.admin-analytics .analytics-metrics--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-analytics .analytics-locale-tabs {
border-bottom: 2px solid var(--admin-border);
background: var(--admin-grey-50, #f8f8f8);
padding: 0 var(--admin-content-px, 24px);
margin-bottom: 0;
}
.admin-analytics .analytics-locale-tabs__nav {
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: stretch;
}
.admin-analytics .analytics-locale-tabs__tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
font-size: var(--admin-fs-sm, 0.9rem);
font-weight: 600;
color: var(--admin-text-muted);
text-decoration: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: color 0.15s, border-color 0.15s;
}
.admin-analytics .analytics-locale-tabs__tab:hover {
color: var(--admin-text);
border-bottom-color: var(--admin-grey-300, #ccc);
}
.admin-analytics .analytics-locale-tabs__tab--active {
color: var(--admin-primary, #0f172a);
border-bottom-color: var(--admin-primary, #0f172a);
background: transparent;
}
.admin-analytics .analytics-locale-tabs__tab-label {
white-space: nowrap;
}
.admin-analytics .analytics-locale-tabs__tab .locale-flag {
flex-shrink: 0;
width: 20px;
height: 14px;
border-radius: 2px;
}
.admin-analytics .analytics-ip-list .analytics-table__mono {
font-family: "Poppins", sans-serif;
font-size: 0.88rem;
letter-spacing: 0.01em;
}
.admin-analytics .analytics-ip-list__note {
margin-top: var(--admin-space-sm, 8px);
font-size: var(--admin-fs-xs, 0.8rem);
color: var(--admin-text-muted);
display: flex;
align-items: flex-start;
gap: 6px;
line-height: 1.5;
}
.admin-analytics .analytics-empty-msg {
display: flex;
align-items: center;
gap: 8px;
padding: var(--admin-space, 16px);
color: var(--admin-text-muted);
font-size: var(--admin-fs-sm, 0.9rem);
}
.admin-analytics .analytics-empty-msg code {
font-family: "Poppins", sans-serif;
font-size: 0.88em;
background: var(--admin-grey-100);
padding: 0.05em 0.35em;
border-radius: var(--admin-radius-xs);
color: var(--admin-text);
}
.admin-analytics .analytics-excluded-ips .analytics-table__mono {
font-family: "Poppins", sans-serif;
font-size: 0.88rem;
letter-spacing: 0.01em;
}
.admin-analytics .analytics-excluded-ips__form {
margin-bottom: var(--admin-space, 16px);
}
.admin-analytics .analytics-excluded-ips__form-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--admin-space, 16px);
}
.admin-analytics .analytics-excluded-ips__form-row .admin-form__block {
margin-bottom: 0;
}
.admin-analytics .analytics-excluded-ips__actions {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-sm, 8px);
margin-top: var(--admin-space-sm, 8px);
}
@media (max-width: 640px) {
.admin-analytics .analytics-excluded-ips__form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 1280px) {
.admin-analytics .analytics-kpis,
.admin-analytics .analytics-metrics,
.admin-analytics .analytics-realtime__nums {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-analytics .analytics-metrics--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-analytics .analytics-realtime__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.admin-analytics .analytics-grid--2,
.admin-analytics .analytics-grid--3 {
grid-template-columns: 1fr;
}
.admin-analytics .analytics-summary__list {
grid-template-columns: 1fr;
}
.admin-analytics .analytics-funnel__row {
grid-template-columns: 96px 1fr 96px;
}
.admin-analytics .analytics-header__range {
width: 100%;
}
}
@media (max-width: 544px) {
.admin-analytics .analytics-kpis,
.admin-analytics .analytics-metrics,
.admin-analytics .analytics-metrics--3,
.admin-analytics .analytics-realtime__nums,
.admin-analytics .analytics-realtime__list {
grid-template-columns: 1fr;
}
.admin-analytics .analytics-kpi__value {
font-size: var(--admin-fs-subtitle);
}
.admin-analytics .analytics-metric__hint {
display: none;
}
.admin-analytics .analytics-toolbar {
padding: var(--admin-space) var(--admin-space);
}
}
.admin-analytics .an-grid {
display: grid;
gap: var(--admin-space-lg);
}
.admin-analytics .an-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.admin-analytics .an-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.admin-analytics .an-grid--2-1 {
grid-template-columns: 2fr 1fr;
}
.admin-analytics .an-kpi-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--admin-space-2xl);
}
.admin-analytics .an-kpi {
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: 16px;
padding: var(--admin-space-lg);
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
transition: transform 0.18s, box-shadow 0.18s;
cursor: default;
}
.admin-analytics .an-kpi:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}
.admin-analytics .an-kpi__icon {
width: 2.4rem;
height: 2.4rem;
border-radius: var(--admin-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
margin-bottom: var(--admin-space-2xs);
}
.admin-analytics .an-kpi__label {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
font-weight: 500;
}
.admin-analytics .an-kpi__value {
font-size: var(--admin-fs-display);
font-weight: 700;
line-height: 1.1;
color: var(--admin-text);
letter-spacing: -0.02em;
}
.admin-analytics .an-kpi__delta {
font-size: var(--admin-fs-xs);
display: flex;
align-items: center;
gap: 2px;
}
.admin-analytics .an-kpi__delta-cap {
color: var(--admin-text-muted);
font-weight: 400;
}
.admin-analytics .an-kpi--blue .an-kpi__icon {
background: #eff6ff;
color: #3b82f6;
}
.admin-analytics .an-kpi--green .an-kpi__icon {
background: #f0fdf4;
color: #10b981;
}
.admin-analytics .an-kpi--purple .an-kpi__icon {
background: #faf5ff;
color: #8b5cf6;
}
.admin-analytics .an-kpi--orange .an-kpi__icon {
background: #fff7ed;
color: #f97316;
}
.admin-analytics .an-kpi--yellow .an-kpi__icon {
background: #fefce8;
color: #eab308;
}
.admin-analytics .an-kpi--primary {
border-color: #10b981;
background: linear-gradient(135deg, #f0fdf4 0%, var(--admin-card-bg) 60%);
}
.admin-analytics .an-kpi--primary .an-kpi__value {
color: #059669;
}
.admin-analytics .an-delta {
font-size: var(--admin-fs-xs);
font-weight: 600;
padding: 2px 6px;
border-radius: var(--admin-radius-xs);
}
.admin-analytics .an-delta--up {
color: #059669;
background: #f0fdf4;
}
.admin-analytics .an-delta--down {
color: #dc2626;
background: #fef2f2;
}
.admin-analytics .an-delta--flat {
color: var(--admin-text-muted);
}
.admin-analytics .an-delta--none {
color: var(--admin-text-muted);
}
.admin-analytics .an-insights {
background: #f8fafc;
border-radius: 20px;
padding: 3.2rem;
border: 1px solid var(--admin-border-light, #e5e7eb);
}
.admin-analytics .an-insights__head {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space);
font-weight: 600;
color: var(--admin-text);
font-size: var(--admin-fs-body);
}
.admin-analytics .an-insights__head i {
color: #8b5cf6;
font-size: 1.1rem;
}
.admin-analytics .an-insights__head small {
margin-left: auto;
font-size: var(--admin-fs-xs);
font-weight: 400;
color: var(--admin-text-muted);
}
.admin-analytics .an-insights__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
.admin-analytics .an-insights__list li {
display: flex;
align-items: flex-start;
gap: var(--admin-space-sm);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.6;
}
.admin-analytics .an-insights__list li i {
color: #10b981;
flex-shrink: 0;
margin-top: 3px;
}
.admin-analytics .an-insights--marketing {
background: linear-gradient(135deg, #faf5ff 0%, #f8fafc 100%);
border-color: #e9d5ff;
}
.admin-analytics .an-insights--marketing .an-insights__head i {
color: #7c3aed;
}
.admin-analytics .an-insights__list--cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--admin-space-sm) var(--admin-space-lg);
}
@media (max-width: 768px) {
.admin-analytics .an-insights__list--cols {
grid-template-columns: 1fr;
}
}
.admin-analytics .an-insights li.an-insight--up i {
color: #059669;
}
.admin-analytics .an-insights li.an-insight--down i {
color: #dc2626;
}
.admin-analytics .an-card {
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg, 12px);
overflow: visible;
}
.admin-analytics .an-card--wide {
grid-column: 1/-1;
}
.admin-analytics .an-card__header {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space) var(--admin-space-lg);
border-bottom: 1px solid var(--admin-border-light, #f0f0f0);
background: var(--admin-card-bg);
border-radius: var(--admin-radius-lg, 12px) var(--admin-radius-lg, 12px) 0 0;
}
.admin-analytics .an-card__header > i {
color: var(--admin-primary);
width: 1.6rem;
text-align: center;
flex-shrink: 0;
}
.admin-analytics .an-card__title {
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text);
margin: 0;
}
.admin-analytics .an-card__desc {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
margin: 0;
margin-left: auto;
}
.admin-analytics .an-card__body {
padding: var(--admin-space-lg);
border-radius: 0 0 var(--admin-radius-lg, 12px) var(--admin-radius-lg, 12px);
}
.admin-analytics .an-kpi-grid + .an-kpi-grid, .admin-analytics .an-kpi-grid + .an-insights, .admin-analytics .an-kpi-grid + .an-grid, .admin-analytics .an-kpi-grid + .an-card, .admin-analytics .an-kpi-grid + .an-realtime,
.admin-analytics .an-insights + .an-kpi-grid,
.admin-analytics .an-insights + .an-insights,
.admin-analytics .an-insights + .an-grid,
.admin-analytics .an-insights + .an-card,
.admin-analytics .an-insights + .an-realtime,
.admin-analytics .an-grid + .an-kpi-grid,
.admin-analytics .an-grid + .an-insights,
.admin-analytics .an-grid + .an-grid,
.admin-analytics .an-grid + .an-card,
.admin-analytics .an-grid + .an-realtime,
.admin-analytics .an-card + .an-kpi-grid,
.admin-analytics .an-card + .an-insights,
.admin-analytics .an-card + .an-grid,
.admin-analytics .an-card + .an-card,
.admin-analytics .an-card + .an-realtime,
.admin-analytics .an-realtime + .an-kpi-grid,
.admin-analytics .an-realtime + .an-insights,
.admin-analytics .an-realtime + .an-grid,
.admin-analytics .an-realtime + .an-card,
.admin-analytics .an-realtime + .an-realtime {
margin-top: var(--admin-space-2xl);
}
.admin-analytics .an-tip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.4em;
height: 1.4em;
padding: 0;
border: 0;
background: transparent;
border-radius: 50%;
color: var(--admin-text-muted);
cursor: help;
position: relative;
flex-shrink: 0;
transition: color 0.15s ease, background-color 0.15s ease;
}
.admin-analytics .an-tip:hover, .admin-analytics .an-tip:focus-visible {
color: var(--admin-text);
background: var(--admin-grey-100);
outline: 0;
}
.admin-analytics .an-tip i {
font-size: 0.85em;
line-height: 1;
}
.admin-analytics .an-tip::after {
content: attr(data-tip);
position: absolute;
z-index: 100;
left: 50%;
bottom: calc(100% + var(--admin-space-2xs));
transform: translateX(-50%);
width: max-content;
max-width: 26rem;
padding: var(--admin-space-xs) var(--admin-space-sm);
border-radius: var(--admin-radius-sm);
background: var(--admin-text, #171717);
color: #fff;
font-size: var(--admin-fs-xs);
font-weight: 400;
line-height: 1.5;
white-space: normal;
text-align: left;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease;
}
.admin-analytics .an-tip:hover::after, .admin-analytics .an-tip:focus-visible::after {
opacity: 1;
visibility: visible;
}
.admin-analytics .an-tip--bottom::after {
bottom: auto;
top: calc(100% + var(--admin-space-2xs));
}
.admin-analytics .an-tip--left::after {
left: auto;
right: calc(100% + var(--admin-space-2xs));
bottom: 50%;
transform: translateY(50%);
}
.admin-analytics .an-tip--right::after {
left: calc(100% + var(--admin-space-2xs));
right: auto;
bottom: 50%;
transform: translateY(50%);
}
.admin-analytics .an-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-analytics .an-table {
width: 100%;
border-collapse: collapse;
font-size: var(--admin-fs-body);
}
.admin-analytics .an-table thead th {
position: sticky;
top: 0;
background: var(--admin-grey-50, #f8f8f8);
padding: 10px var(--admin-space-sm);
text-align: left;
font-weight: 600;
color: var(--admin-text-muted);
font-size: var(--admin-fs-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--admin-border);
white-space: nowrap;
}
.admin-analytics .an-table tbody tr {
border-bottom: 1px solid var(--admin-border-light, #f3f3f3);
min-height: 56px;
transition: background 0.1s;
}
.admin-analytics .an-table tbody tr:hover {
background: #f8fafc;
}
.admin-analytics .an-table tbody tr:last-child {
border-bottom: none;
}
.admin-analytics .an-table tbody td {
padding: 14px var(--admin-space);
color: var(--admin-text);
vertical-align: middle;
}
.admin-analytics .an-table__rank {
width: 48px;
text-align: center;
}
.admin-analytics .an-table__num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.admin-analytics .an-table__path {
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-analytics .an-table__mono {
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-sm);
}
.admin-analytics .an-table-note {
margin-top: var(--admin-space-sm);
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-analytics .an-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 0.78rem;
font-weight: 700;
background: var(--admin-grey-100);
color: var(--admin-text-muted);
}
.admin-analytics .an-badge--gold {
background: #fef3c7;
color: #b45309;
}
.admin-analytics .an-badge--silver {
background: #f1f5f9;
color: #475569;
}
.admin-analytics .an-badge--bronze {
background: #fdf2e9;
color: #92400e;
}
.admin-analytics .an-cvr {
font-weight: 600;
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-analytics .an-cvr--mid {
color: #2563eb;
}
.admin-analytics .an-cvr--high {
color: #059669;
}
.admin-analytics .an-channel-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
flex-shrink: 0;
}
.admin-analytics .an-channel-dot--organic {
background: #3b82f6;
}
.admin-analytics .an-channel-dot--social {
background: #ec4899;
}
.admin-analytics .an-channel-dot--paid {
background: #f59e0b;
}
.admin-analytics .an-channel-dot--campaign {
background: #8b5cf6;
}
.admin-analytics .an-channel-dot--referral {
background: #14b8a6;
}
.admin-analytics .an-channel-dot--direct {
background: #6b7280;
}
.admin-analytics .an-channel-dot--internal {
background: #9ca3af;
}
.admin-analytics .an-channel-dot--email {
background: #f97316;
}
.admin-analytics .an-share-bar {
display: inline-block;
width: 60px;
height: 6px;
background: var(--admin-grey-100);
border-radius: 3px;
vertical-align: middle;
margin-right: 4px;
overflow: hidden;
}
.admin-analytics .an-share-bar span {
display: block;
height: 100%;
background: var(--admin-primary);
border-radius: 3px;
}
.admin-analytics .an-legend-list {
list-style: none;
padding: 0;
margin: var(--admin-space-sm) 0 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-analytics .an-legend-list__item {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-analytics .an-legend-list__item > strong {
margin-left: auto;
font-weight: 600;
color: var(--admin-text);
}
.admin-analytics .an-legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.admin-analytics .an-conv-list {
list-style: none;
padding: 0;
margin: var(--admin-space-sm) 0 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-analytics .an-conv-list__item {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
padding: var(--admin-space-xs) 0;
border-bottom: 1px solid var(--admin-border-light, #f3f3f3);
font-size: var(--admin-fs-sm);
}
.admin-analytics .an-conv-list__item:last-child {
border-bottom: none;
}
.admin-analytics .an-conv-list__item > i {
color: var(--admin-text-muted);
width: 1rem;
text-align: center;
}
.admin-analytics .an-conv-list__item > span {
flex: 1;
color: var(--admin-text-secondary);
}
.admin-analytics .an-conv-list__item > strong {
font-weight: 600;
color: var(--admin-text);
font-variant-numeric: tabular-nums;
}
.admin-analytics .an-conv-list__pct {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
min-width: 36px;
text-align: right;
}
.admin-analytics .an-realtime {
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg, 12px);
overflow: hidden;
}
.admin-analytics .an-realtime__head {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space-lg);
background: var(--admin-grey-50, #f8f8f8);
border-bottom: 1px solid var(--admin-border-light, #f0f0f0);
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text);
}
.admin-analytics .an-realtime__head small {
font-weight: 400;
color: var(--admin-text-muted);
margin-left: auto;
}
.admin-analytics .an-realtime__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
flex-shrink: 0;
}
.admin-analytics .an-realtime__body {
display: flex;
align-items: stretch;
gap: 0;
padding: 0;
}
.admin-analytics .an-realtime__num {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--admin-space);
border-right: 1px solid var(--admin-border-light, #f0f0f0);
gap: 2px;
}
.admin-analytics .an-realtime__num.is-accent .an-realtime__num-val {
color: #059669;
}
.admin-analytics .an-realtime__num-label {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-analytics .an-realtime__num-val {
font-size: 1.8rem;
font-weight: 700;
color: var(--admin-text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.admin-analytics .an-realtime__pages {
flex: 2;
padding: var(--admin-space);
}
.admin-analytics .an-realtime__pages-head {
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
display: block;
margin-bottom: var(--admin-space-xs);
}
.admin-analytics .an-realtime__pages-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.admin-analytics .an-realtime__pages-list li {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
font-size: var(--admin-fs-xs);
}
.admin-analytics .an-realtime__pages-list li em {
font-style: normal;
width: 16px;
text-align: center;
color: var(--admin-text-muted);
font-weight: 600;
flex-shrink: 0;
}
.admin-analytics .an-realtime__pages-list li span {
flex: 1;
color: var(--admin-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: "Poppins", sans-serif;
}
.admin-analytics .an-realtime__pages-list li b {
font-weight: 600;
color: var(--admin-text);
font-variant-numeric: tabular-nums;
}
.admin-analytics .an-realtime__empty {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
font-style: italic;
}
.admin-analytics .an-empty {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-xl);
color: var(--admin-text-muted);
font-size: var(--admin-fs-sm);
justify-content: center;
}
.admin-analytics .an-empty i {
opacity: 0.5;
}
.admin-analytics .an-muted {
color: var(--admin-text-muted);
}
.admin-analytics .an-warn {
color: #ea580c;
}
.admin-analytics .an-empty--guide {
flex-direction: column;
text-align: center;
gap: var(--admin-space-sm);
}
.admin-analytics .an-empty--guide strong {
display: block;
color: var(--admin-text);
font-weight: 500;
}
.admin-analytics .an-empty__guide {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
max-width: 28rem;
margin: 0 auto;
line-height: 1.6;
}
@keyframes an-skeleton-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
.admin-analytics .an-kpi--skeleton {
pointer-events: none;
}
.admin-analytics .an-kpi--skeleton .an-kpi__icon, .admin-analytics .an-kpi--skeleton .an-kpi__label, .admin-analytics .an-kpi--skeleton .an-kpi__value {
background: var(--admin-border, #e5e7eb);
border-radius: var(--admin-radius-sm);
color: transparent;
animation: an-skeleton-pulse 1.6s ease-in-out infinite;
}
.admin-analytics .an-chart--skeleton {
background: var(--admin-border, #e5e7eb);
border-radius: var(--admin-radius);
min-height: 20rem;
animation: an-skeleton-pulse 1.6s ease-in-out infinite;
display: block;
}
.admin-analytics .an-chart-canvas,
.admin-analytics .an-chart-canvas--sm {
display: block;
width: 100%;
height: 28rem !important;
}
.admin-analytics .an-chart-canvas--sm {
height: 24rem !important;
}
.admin-analytics .an-chart-canvas--donut {
width: 320px !important;
height: 320px !important;
max-width: 100%;
margin: 0 auto;
display: block;
}
.admin-analytics .an-donut-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 28rem;
}
.admin-analytics .an-kpi-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
.admin-analytics .an-kpi-grid--3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
.admin-analytics .an-kpi-grid--3 {
grid-template-columns: 1fr;
}
}
.admin-analytics .an-funnel {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) 0;
}
.admin-analytics .an-funnel__step {
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
gap: var(--admin-space-sm);
position: relative;
min-height: 3.6rem;
}
.admin-analytics .an-funnel__bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: linear-gradient(90deg, #ede9fe 0%, #ddd6fe 100%);
border-radius: var(--admin-radius-sm);
z-index: 0;
min-width: 4px;
transition: width 0.6s ease;
}
.admin-analytics .an-funnel__label, .admin-analytics .an-funnel__count, .admin-analytics .an-funnel__pct {
position: relative;
z-index: 1;
}
.admin-analytics .an-funnel__label {
font-size: var(--admin-fs-sm);
color: var(--admin-text);
padding-left: var(--admin-space-sm);
}
.admin-analytics .an-funnel__count {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text);
white-space: nowrap;
}
.admin-analytics .an-funnel__pct {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
white-space: nowrap;
width: 4.5rem;
text-align: right;
}
[data-theme*=dark] .admin-analytics .an-insights {
background: var(--admin-grey-900, #111827);
border-color: var(--admin-border, #374151);
}
[data-theme*=dark] .admin-analytics .an-insights--marketing {
background: linear-gradient(135deg, #1e1b2e 0%, #111827 100%);
border-color: #4c1d95;
}
[data-theme*=dark] .admin-analytics .an-kpi--primary {
background: linear-gradient(135deg, #052e16 0%, var(--admin-card-bg) 60%);
border-color: #059669;
}
[data-theme*=dark] .admin-analytics .an-table tbody tr:hover {
background: var(--admin-grey-800, #1f2937);
}
[data-theme*=dark] .admin-analytics .an-badge--gold {
background: #451a03;
color: #fbbf24;
}
[data-theme*=dark] .admin-analytics .an-badge--silver {
background: #1e293b;
color: #94a3b8;
}
[data-theme*=dark] .admin-analytics .an-badge--bronze {
background: #431407;
color: #fb923c;
}
[data-theme*=dark] .admin-analytics .an-funnel__bar {
background: linear-gradient(90deg, #2d1f5e 0%, #3b2a7a 100%);
}
@media (max-width: 1280px) {
.admin-analytics .an-kpi-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1024px) {
.admin-analytics .an-grid--2,
.admin-analytics .an-grid--3,
.admin-analytics .an-grid--2-1 {
grid-template-columns: 1fr;
}
.admin-analytics .an-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
.admin-analytics .an-realtime__body {
flex-wrap: wrap;
}
.admin-analytics .an-realtime__pages {
flex: 1 0 100%;
border-top: 1px solid var(--admin-border-light, #f0f0f0);
}
}
@media (max-width: 544px) {
.admin-analytics .an-kpi-grid {
grid-template-columns: 1fr;
}
.admin-analytics .an-realtime__num {
padding: var(--admin-space-sm);
}
.admin-analytics .an-realtime__num-val {
font-size: 1.4rem;
}
}
.admin-ad-fraud .an-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-sm) var(--admin-space-lg);
margin-bottom: var(--admin-space-lg);
}
.admin-ad-fraud .an-toolbar__hint {
margin-left: auto;
color: var(--admin-text-muted);
}
.admin-features {
max-width: 880px;
/* --- 소그룹(섹션) ----------------------------------------------- */
}
.admin-features__section {
margin-top: var(--admin-space-2xl);
}
.admin-features__section:first-of-type {
margin-top: var(--admin-space-xl);
}
.admin-features__section-title {
margin: 0 0 var(--admin-space-sm);
padding-bottom: var(--admin-space-2xs);
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text-secondary);
letter-spacing: 0.02em;
border-bottom: 1px solid var(--admin-border-light);
}
.admin-features {
/* --- 기능 목록 (카드형 행) -------------------------------------- */
}
.admin-features__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs);
}
.admin-features__item {
display: flex;
align-items: center;
gap: var(--admin-space);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-features__item:hover {
border-color: var(--admin-border);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.admin-features__item.is-off {
background: var(--admin-grey-50);
}
.admin-features__item.is-off .admin-features__item-icon {
opacity: 0.45;
}
.admin-features__item.is-off .admin-features__item-label {
color: var(--admin-text-secondary);
}
.admin-features__item.is-off .admin-features__item-state {
color: var(--admin-text-muted);
}
.admin-features__item.is-on {
border-left: 3px solid var(--admin-success);
padding-left: calc(var(--admin-space-lg) - 2px);
}
.admin-features__item.is-core {
border-left: 3px solid var(--admin-primary);
padding-left: calc(var(--admin-space-lg) - 2px);
}
@media (max-width: 1024px) {
.admin-features__item {
flex-wrap: wrap;
padding: var(--admin-space) var(--admin-space);
}
}
.admin-features {
/* --- 기능 아이콘 ------------------------------------------------ */
}
.admin-features__item-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--admin-radius-sm);
background: color-mix(in srgb, var(--admin-primary) 8%, transparent);
color: var(--admin-primary);
font-size: 1.7rem;
transition: opacity var(--admin-duration) var(--admin-ease);
}
.is-off .admin-features__item-icon {
background: var(--admin-grey-100);
color: var(--admin-text-muted);
}
.admin-features__item-info {
flex: 1 1 auto;
min-width: 0;
}
.admin-features {
/* --- 레이블 행 (label + 상태 텍스트) --------------------------- */
}
.admin-features__item-heading {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space-3xs);
}
.admin-features__item-label {
font-size: var(--admin-fs-lg);
font-weight: 600;
color: var(--admin-text);
line-height: 1.4;
}
.admin-features__item-state {
display: inline-flex;
align-items: center;
padding: 1px 8px;
font-size: var(--admin-fs-xs);
font-weight: 500;
color: var(--admin-success-text, var(--admin-success));
background: color-mix(in srgb, var(--admin-success) 12%, transparent);
border-radius: var(--admin-radius-full);
}
.is-off .admin-features__item-state {
color: var(--admin-text-muted);
background: var(--admin-grey-100);
}
.admin-features__item-desc {
margin: 0;
font-size: var(--admin-fs-body);
color: var(--admin-text-secondary);
line-height: 1.55;
}
.admin-features__item-toggle {
flex: 0 0 auto;
display: flex;
align-items: center;
}
@media (max-width: 1024px) {
.admin-features__item-toggle {
width: 100%;
padding-top: var(--admin-space-xs);
justify-content: flex-end;
}
}
.admin-features {
/* --- hint 상태 레이블 색 ---------------------------------------- */
}
.admin-features .admin-toggle-switch.is-on .admin-toggle-switch__hint {
color: var(--admin-success-text);
}
.admin-features .admin-toggle-switch.is-off .admin-toggle-switch__hint {
color: var(--admin-text-muted);
}
.admin-features {
/* --- 코어 배지 -------------------------------------------------- */
}
.admin-features__badge {
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs);
padding: var(--admin-space-3xs) var(--admin-space-sm);
font-size: var(--admin-fs-xs);
font-weight: 600;
letter-spacing: 0.04em;
border-radius: var(--admin-radius-full);
white-space: nowrap;
}
.admin-features__badge i {
font-size: 1.1rem;
}
.admin-features__badge--core {
background: color-mix(in srgb, var(--admin-primary) 12%, transparent);
color: var(--admin-primary);
border: 1px solid color-mix(in srgb, var(--admin-primary) 25%, transparent);
}
.admin-features {
/* --- 빈 상태 ---------------------------------------------------- */
}
.admin-features__empty {
padding: var(--admin-space-xl);
background: var(--admin-card-bg);
border: 1px dashed var(--admin-border);
border-radius: var(--admin-radius);
color: var(--admin-text-muted);
font-size: var(--admin-fs-body);
text-align: center;
}
.admin-prefs {
display: flex;
flex-direction: column;
gap: var(--admin-space-2xl);
}
.admin-prefs__section {
background: var(--admin-card-bg, var(--admin-surface));
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.admin-prefs__section-head {
display: flex;
align-items: center;
gap: var(--admin-space);
padding: var(--admin-space-lg) var(--admin-space-xl);
background: linear-gradient(180deg, var(--admin-grey-50, var(--admin-surface)) 0%, transparent 100%);
border-bottom: 1px solid var(--admin-border);
}
@media (max-width: 1024px) {
.admin-prefs__section-head {
padding: var(--admin-space) var(--admin-space-lg);
}
}
.admin-prefs__section-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 3.6rem;
border-radius: var(--admin-radius);
background: var(--admin-primary-light, var(--admin-grey-100));
color: var(--admin-primary);
font-size: 1.6rem;
}
.admin-prefs__section-headtxt {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-3xs);
}
.admin-prefs__section-title {
margin: 0;
font-size: var(--admin-fs-xl);
font-weight: 700;
color: var(--admin-text);
letter-spacing: -0.01em;
}
.admin-prefs__section-desc {
margin: 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.5;
}
.admin-prefs__section-body {
display: flex;
flex-direction: column;
}
.admin-prefs__block {
padding: var(--admin-space-xl);
}
.admin-prefs__block + .admin-prefs__block {
border-top: 1px solid var(--admin-border-light, var(--admin-border));
}
@media (max-width: 1024px) {
.admin-prefs__block {
padding: var(--admin-space-lg);
}
}
.admin-prefs__block-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--admin-space-xl);
}
@media (max-width: 1024px) {
.admin-prefs__block-head {
flex-direction: column;
align-items: stretch;
gap: var(--admin-space);
}
}
.admin-prefs__block-headtxt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-3xs);
}
.admin-prefs__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--admin-space-3xs);
align-self: flex-start;
padding: 0.2rem 0.6rem;
margin-bottom: var(--admin-space-3xs);
font-size: var(--admin-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--admin-text-secondary);
background: var(--admin-grey-100);
border-radius: var(--admin-radius-full);
}
.admin-prefs__eyebrow > i {
font-size: 0.9em;
}
.admin-prefs__eyebrow--light {
color: #b45309;
background: #fef3c7;
}
.admin-prefs__eyebrow--dark {
color: #4338ca;
background: #e0e7ff;
}
.admin-prefs__block-title {
margin: 0;
font-size: var(--admin-fs-lg);
font-weight: 700;
color: var(--admin-text);
letter-spacing: -0.005em;
}
.admin-prefs__block-desc {
margin: 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.55;
max-width: 64ch;
}
.admin-prefs__block-control {
flex-shrink: 0;
display: flex;
align-items: center;
}
@media (max-width: 1024px) {
.admin-prefs__block-control {
width: 100%;
}
}
.admin-prefs__block--variants .admin-prefs__block-head {
margin-bottom: var(--admin-space-lg);
}
.admin-prefs__mode-group {
display: inline-flex;
padding: 0.3rem;
background: var(--admin-grey-100, var(--admin-surface));
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
gap: 0.2rem;
}
@media (max-width: 1024px) {
.admin-prefs__mode-group {
width: 100%;
}
}
.admin-prefs__mode-btn {
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs);
padding: 0.55rem 1.1rem;
background: transparent;
border: none;
border-radius: var(--admin-radius-sm);
font: inherit;
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-secondary);
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-prefs__mode-btn > i {
font-size: 1em;
}
.admin-prefs__mode-btn:hover {
background: var(--admin-state-hover);
color: var(--admin-text);
}
.admin-prefs__mode-btn:focus-visible {
outline: none;
box-shadow: var(--admin-focus-ring);
}
.admin-prefs__mode-btn[aria-checked=true] {
background: var(--admin-main-bg, #fff);
color: var(--admin-primary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--admin-primary-border, var(--admin-border));
}
@media (max-width: 1024px) {
.admin-prefs__mode-btn {
flex: 1;
justify-content: center;
}
}
.admin-prefs__theme-grid {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: var(--admin-space);
}
@media (max-width: 1024px) {
.admin-prefs__theme-grid {
grid-template-columns: repeat(2, minmax(160px, 1fr));
}
}
@media (max-width: 768px) {
.admin-prefs__theme-grid {
grid-template-columns: 1fr;
}
}
.admin-prefs__theme-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
padding: var(--admin-space);
background: var(--admin-main-bg, var(--admin-surface));
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
cursor: pointer;
text-align: left;
font: inherit;
color: var(--admin-text);
transition: transform var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-prefs__theme-card:hover {
border-color: var(--admin-primary-border, var(--admin-primary));
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.admin-prefs__theme-card:focus-visible {
outline: none;
border-color: var(--admin-primary);
box-shadow: 0 0 0 3px var(--admin-state-focus, rgba(0, 118, 203, 0.25));
}
.admin-prefs__theme-card[aria-checked=true] {
border-color: var(--admin-primary);
background: var(--admin-primary-light, var(--admin-surface));
box-shadow: 0 0 0 1px var(--admin-primary);
}
.admin-prefs__theme-card[aria-checked=true] .admin-prefs__theme-card-check {
opacity: 1;
transform: scale(1);
}
.admin-prefs__theme-card-preview {
display: flex;
align-items: center;
gap: 4px;
height: 52px;
padding: 0 var(--admin-space-2xs);
border-radius: var(--admin-radius-sm);
background: var(--admin-surface);
border: 1px solid var(--admin-border);
overflow: hidden;
}
.admin-prefs__theme-card-swatch {
flex: 1;
height: 28px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}
.admin-prefs__theme-card-label {
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs);
font-size: var(--admin-fs-base);
font-weight: 700;
color: var(--admin-text);
}
.admin-prefs__theme-card-label > i {
font-size: 0.95em;
color: var(--admin-text-secondary);
}
.admin-prefs__theme-card-desc {
display: block;
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
line-height: 1.45;
}
.admin-prefs__theme-card-check {
position: absolute;
top: var(--admin-space-xs);
right: var(--admin-space-xs);
font-size: 1.4rem;
color: var(--admin-primary);
background: var(--admin-main-bg, #fff);
border-radius: 50%;
opacity: 0;
transform: scale(0.85);
transition: opacity var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-prefs__block--brand-pairs .admin-prefs__block-head {
margin-bottom: var(--admin-space-lg);
}
.admin-prefs__pair-cols {
display: grid;
grid-template-columns: 10rem 1fr 1fr;
gap: var(--admin-space);
padding: 0 var(--admin-space-xl) var(--admin-space-xs);
margin-bottom: var(--admin-space-xs);
}
@media (max-width: 1280px) {
.admin-prefs__pair-cols {
grid-template-columns: 7rem 1fr 1fr;
}
}
@media (max-width: 1024px) {
.admin-prefs__pair-cols {
display: none;
}
}
.admin-prefs__pair-col-label {
display: flex;
align-items: center;
gap: var(--admin-space-2xs);
font-size: var(--admin-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--admin-text-muted);
}
.admin-prefs__pair-col-label > i {
font-size: 0.9em;
}
.admin-prefs__brand-row {
display: grid;
grid-template-columns: 10rem 1fr 1fr;
gap: var(--admin-space);
padding: 0 var(--admin-space-xl) var(--admin-space);
align-items: start;
}
.admin-prefs__brand-row + .admin-prefs__brand-row {
border-top: 1px solid var(--admin-border-light, var(--admin-border));
padding-top: var(--admin-space);
}
@media (max-width: 1280px) {
.admin-prefs__brand-row {
grid-template-columns: 7rem 1fr 1fr;
}
}
@media (max-width: 1024px) {
.admin-prefs__brand-row {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
padding-inline: var(--admin-space-lg);
}
}
@media (max-width: 768px) {
.admin-prefs__brand-row {
grid-template-columns: 1fr;
}
}
.admin-prefs__brand-name {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--admin-space-2xs);
padding-top: var(--admin-space);
font-size: var(--admin-fs-sm);
font-weight: 700;
color: var(--admin-text-secondary);
}
.admin-prefs__brand-name > i {
font-size: 1.4rem;
color: var(--admin-text-muted);
}
@media (max-width: 1280px) {
.admin-prefs__brand-name {
font-size: var(--admin-fs-xs);
}
}
@media (max-width: 1024px) {
.admin-prefs__brand-name {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
padding-top: 0;
}
}
@media (max-width: 768px) {
.admin-prefs__brand-name {
grid-column: 1;
}
}
.admin-ops {
max-width: 1080px;
margin: 0 auto;
padding: var(--admin-space-xl) var(--admin-space-lg);
}
.admin-ops__header {
margin-bottom: var(--admin-space-lg);
}
.admin-ops__title {
margin: 0 0 var(--admin-space-sm);
font-size: var(--admin-fs-title);
font-weight: 700;
color: var(--admin-text);
line-height: 1.25;
}
.admin-ops__desc {
margin: 0;
font-size: var(--admin-fs-body);
line-height: 1.65;
color: var(--admin-text-secondary);
}
.admin-ops__desc code {
padding: 1px 6px;
font-family: "Poppins", sans-serif;
font-size: 0.9em;
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
color: var(--admin-text);
}
.admin-ops__tabs {
display: flex;
gap: 2px;
margin-bottom: var(--admin-space-lg);
border-bottom: 2px solid var(--admin-border-light);
}
.admin-ops__tab {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs);
padding: var(--admin-space-sm) var(--admin-space);
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text-secondary);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-ops__tab i {
font-size: 0.95em;
}
.admin-ops__tab:hover {
color: var(--admin-text);
}
.admin-ops__tab.is-active, .admin-ops__tab[aria-selected=true] {
color: var(--admin-primary);
border-bottom-color: var(--admin-primary);
}
.admin-ops__tab:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: 2px;
border-radius: var(--admin-radius-sm) var(--admin-radius-sm) 0 0;
}
.admin-ops__tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 11px;
font-weight: 700;
line-height: 1;
color: var(--admin-warn-text);
background: var(--admin-warn-bg);
border-radius: 999px;
}
.admin-ops__tab-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--admin-warn);
flex-shrink: 0;
}
.admin-ops__tab-dot--danger {
background: var(--admin-error);
}
.admin-ops__panel[hidden] {
display: none;
}
.admin-ops__result {
margin-bottom: var(--admin-space-xl);
padding: var(--admin-space) var(--admin-space-lg);
border-radius: var(--admin-radius);
border: 1px solid transparent;
}
.admin-ops__result.is-ok {
background: var(--admin-success-bg);
border-color: rgba(var(--admin-success-rgb), 0.35);
color: var(--admin-success-text);
}
.admin-ops__result.is-fail {
background: var(--admin-error-bg);
border-color: rgba(var(--admin-error-rgb), 0.35);
color: var(--admin-error-text);
}
.admin-ops__result-title {
display: flex;
align-items: center;
gap: var(--admin-space-2xs);
margin: 0;
font-size: var(--admin-fs-body-lg);
font-weight: 700;
}
.admin-ops__result-title i {
font-size: 1.1em;
}
.admin-ops__result-log {
margin: var(--admin-space-sm) 0 0;
padding: var(--admin-space-sm) var(--admin-space);
max-height: 22rem;
overflow: auto;
background: var(--admin-grey-900);
color: var(--admin-grey-100);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
line-height: 1.6;
white-space: pre;
border-radius: var(--admin-radius-sm);
}
.admin-ops__inline-log {
margin-top: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space);
max-height: 16rem;
overflow: auto;
background: var(--admin-grey-900);
color: var(--admin-grey-100);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
line-height: 1.6;
white-space: pre;
border-radius: var(--admin-radius-sm);
}
.admin-ops__inline-log.is-fail {
border-left: 3px solid var(--admin-error);
}
.admin-ops__summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--admin-space);
margin-bottom: var(--admin-space-xl);
}
.admin-ops__summary--single {
grid-template-columns: 1fr;
}
.admin-ops__summary-card {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-ops__summary-card code {
padding: 1px 6px;
font-family: "Poppins", sans-serif;
font-size: 0.9em;
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
color: var(--admin-text);
}
.admin-ops__summary-row {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
}
.admin-ops__summary-label {
font-size: var(--admin-fs-xs);
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
flex: 1 1 auto;
}
.admin-ops__summary-sub {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-ops__pending-alert {
margin-bottom: var(--admin-space-xl);
background: var(--admin-warn-bg);
border: 1px solid var(--admin-warn-border);
border-left: 4px solid var(--admin-warn);
border-radius: var(--admin-radius);
overflow: hidden;
}
.admin-ops__pending-alert--missing {
background: var(--admin-error-bg);
border-color: rgba(var(--admin-error-rgb), 0.4);
border-left-color: var(--admin-error);
}
.admin-ops__pending-alert-hd {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--admin-space-xs);
padding: var(--admin-space-sm) var(--admin-space-lg);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-ops__pending-alert-hd i {
color: var(--admin-warn);
font-size: 0.95em;
flex-shrink: 0;
align-self: center;
}
.admin-ops__pending-alert-hd strong {
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text);
}
.admin-ops__pending-alert--missing .admin-ops__pending-alert-hd i {
color: var(--admin-error);
}
.admin-ops__pending-alert-hint {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-ops__pending-list {
margin: 0;
padding: var(--admin-space-sm) var(--admin-space-lg);
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.admin-ops__pending-item {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: 6px var(--admin-space-sm);
background: rgba(255, 255, 255, 0.7);
border-radius: var(--admin-radius-sm);
border: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-ops__pending-item--missing {
background: rgba(255, 255, 255, 0.5);
}
.admin-ops__pending-kind {
flex-shrink: 0;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--admin-warn-text);
background: var(--admin-warn-bg);
padding: 1px 6px;
border-radius: var(--admin-radius-full);
}
.admin-ops__pending-date {
flex-shrink: 0;
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
font-variant-numeric: tabular-nums;
min-width: 6rem;
}
.admin-ops__pending-slug {
font-family: "Poppins", sans-serif;
font-size: 0.8rem;
color: var(--admin-text);
word-break: break-all;
background: var(--admin-grey-100);
padding: 1px 6px;
border-radius: var(--admin-radius-sm);
border: 1px solid var(--admin-border-light);
}
.admin-ops__group {
margin-bottom: var(--admin-space-2xl);
}
.admin-ops__group-title {
margin: 0 0 var(--admin-space);
font-size: var(--admin-fs-menu);
font-weight: 700;
color: var(--admin-text);
}
.admin-ops__cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--admin-space);
}
.admin-ops__card {
display: flex;
flex-direction: column;
padding: var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
transition: box-shadow var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-ops__card:hover {
box-shadow: var(--admin-elevation-2);
}
.admin-ops__card--danger {
border-color: rgba(var(--admin-error-rgb), 0.35);
background: linear-gradient(to bottom, var(--admin-error-bg), var(--admin-white) 35%);
}
.admin-ops__card-title {
margin: 0 0 var(--admin-space-2xs);
font-size: var(--admin-fs-body-lg);
font-weight: 700;
color: var(--admin-text);
}
.admin-ops__card-desc {
margin: 0 0 var(--admin-space);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.55;
flex: 1 1 auto;
}
.admin-ops__card-form {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
}
.admin-ops__card-field {
margin: 0;
}
.admin-ops__card-check {
margin: 0;
}
.admin-ops__card-btn {
align-self: flex-start;
margin-top: var(--admin-space-sm);
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs);
padding: var(--admin-space-2xs) var(--admin-space);
font-size: var(--admin-fs-sm);
font-weight: 700;
color: var(--admin-on-primary);
background: var(--admin-primary);
border: 1px solid var(--admin-primary);
border-radius: var(--admin-radius-sm);
cursor: pointer;
transition: background var(--admin-duration) var(--admin-ease);
}
.admin-ops__card-btn:hover {
background: var(--admin-primary-hover);
border-color: var(--admin-primary-hover);
}
.admin-ops__card-btn:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: var(--admin-focus-ring-offset);
}
.admin-ops__card--danger .admin-ops__card-btn, .admin-ops__card-btn.admin-ops__card--danger {
background: var(--admin-error);
border-color: var(--admin-error);
color: var(--admin-on-primary);
}
.admin-ops__card--danger .admin-ops__card-btn:hover, .admin-ops__card-btn.admin-ops__card--danger:hover {
background: var(--admin-error-hover);
border-color: var(--admin-error-hover);
}
.admin-ops__card-btn.admin-ops__card--warning {
background: var(--admin-warning, #d97706);
border-color: var(--admin-warning, #d97706);
color: #fff;
}
.admin-ops__card-btn.admin-ops__card--warning:hover {
background: var(--admin-warning-hover, #b45309);
border-color: var(--admin-warning-hover, #b45309);
}
.admin-ops__backup-actions {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
flex-wrap: wrap;
}
.admin-ops__inline-form {
display: contents;
}
.admin-ops__migrations {
margin-bottom: var(--admin-space-2xl);
}
.admin-ops__table-wrap {
overflow-x: auto;
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-ops__empty {
padding: var(--admin-space-xl);
background: var(--admin-card-bg);
border: 1px dashed var(--admin-border);
border-radius: var(--admin-radius);
color: var(--admin-text-muted);
text-align: center;
}
.admin-ops__table {
width: 100%;
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.admin-ops__table th,
.admin-ops__table td {
padding: var(--admin-space-sm) var(--admin-space);
text-align: left;
font-size: var(--admin-fs-sm);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-ops__table th {
background: var(--admin-grey-50);
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: var(--admin-fs-xs);
}
.admin-ops__table tbody tr:last-child td {
border-bottom: 0;
}
.admin-ops__table tbody tr:hover {
background: var(--admin-grey-50);
}
.admin-ops__table code {
padding: 1px 5px;
font-family: "Poppins", sans-serif;
font-size: 0.9em;
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
color: var(--admin-text);
}
.admin-ops__row--pending {
background: var(--admin-warn-bg) !important;
}
.admin-ops__row--pending:hover {
background: rgba(var(--admin-warn-rgb), 0.2) !important;
}
.admin-ops__row--missing {
background: var(--admin-error-bg) !important;
}
.admin-ops__row--missing:hover {
background: rgba(var(--admin-error-rgb), 0.12) !important;
}
.admin-ops__col-date {
white-space: nowrap;
color: var(--admin-text-secondary);
font-variant-numeric: tabular-nums;
}
.admin-ops__mig-slug {
word-break: break-all;
}
.admin-ops__group--devsync {
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
padding: var(--admin-space-lg);
box-shadow: var(--admin-elevation-1);
}
.admin-ops__group--devsync .admin-ops__group-title {
margin-bottom: var(--admin-space-sm);
}
.admin-ops__group--devsync .admin-ops__cards {
margin-top: var(--admin-space-lg);
}
.admin-ops__devsync-intro {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-ops__devsync-what {
margin: 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.65;
}
.admin-ops__devsync-what strong {
color: var(--admin-text);
}
.admin-ops__devsync-steps {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-sm);
}
.admin-ops__devsync-step {
display: flex;
align-items: flex-start;
gap: var(--admin-space-sm);
flex: 1 1 200px;
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
font-size: var(--admin-fs-sm);
line-height: 1.55;
}
.admin-ops__devsync-step strong {
display: block;
font-weight: 700;
color: var(--admin-text);
}
.admin-ops__devsync-step-num {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
font-size: 13px;
font-weight: 700;
color: var(--admin-on-primary);
background: var(--admin-primary);
border-radius: 50%;
flex-shrink: 0;
margin-top: 1px;
}
.admin-ops__devsync-step-sub {
display: block;
margin-top: 2px;
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
}
.admin-ops__devsync-step-sub code {
font-size: 0.9em;
padding: 1px 4px;
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
font-family: "Poppins", sans-serif;
}
.admin-ops__devsync-arrow {
color: var(--admin-text-muted);
font-size: 1rem;
flex-shrink: 0;
}
@media (max-width: 544px) {
.admin-ops__devsync-arrow {
display: none;
}
}
.admin-ops__ssl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--admin-space);
margin-bottom: var(--admin-space-xl);
}
.admin-ops__ssl-card {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-ops__ssl-card-hd {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
font-size: var(--admin-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--admin-text-secondary);
}
.admin-ops__ssl-card-hd i {
font-size: 0.9em;
opacity: 0.8;
}
.admin-ops__ssl-card-val {
font-size: var(--admin-fs-body);
font-weight: 600;
color: var(--admin-text);
}
.admin-ops__ssl-card-val small {
font-weight: 400;
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-ops__ssl-card-val code {
padding: 1px 6px;
font-family: "Poppins", sans-serif;
font-size: 0.9em;
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
color: var(--admin-text);
}
.admin-ops__ssl-card-val.is-ok {
color: var(--admin-success-text);
}
.admin-ops__ssl-card-val.is-warn {
color: var(--admin-warn-text);
}
.admin-ops__ssl-card-val.is-fail {
color: var(--admin-error-text);
}
.admin-ops__ssl-guide {
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
margin-bottom: var(--admin-space-xl);
}
.admin-ops__ssl-guide-title {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin: 0 0 var(--admin-space-sm);
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text);
}
.admin-ops__ssl-guide-title i {
color: var(--admin-primary);
}
.admin-ops__ssl-guide-list {
margin: 0;
padding: 0 0 0 var(--admin-space-lg);
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.6;
}
.admin-ops__ssl-guide-list code {
padding: 1px 5px;
font-family: "Poppins", sans-serif;
font-size: 0.9em;
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
color: var(--admin-text);
}
.admin-ops__info-box {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
margin-bottom: var(--admin-space-xl);
background: var(--admin-grey-50);
overflow: hidden;
}
.admin-ops__info-box-title {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
padding: var(--admin-space-sm) var(--admin-space-lg);
cursor: pointer;
font-weight: 600;
font-size: var(--admin-fs-body);
color: var(--admin-text);
list-style: none;
}
.admin-ops__info-box-title::-webkit-details-marker {
display: none;
}
.admin-ops__info-box-title i {
color: var(--admin-primary);
flex-shrink: 0;
}
.admin-ops__info-box-title:hover {
background: var(--admin-grey-100);
}
.admin-ops__info-box-body {
padding: 0 var(--admin-space-lg) var(--admin-space-lg);
border-top: 1px solid var(--admin-border-light);
}
.admin-ops__info-box-body h3 {
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text);
margin: var(--admin-space-sm) 0 var(--admin-space-xs);
}
.admin-ops__info-box-body p {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.65;
margin: 0 0 var(--admin-space-xs);
}
.admin-ops__info-box-body ol {
padding-left: 1.5em;
margin: 0 0 var(--admin-space-xs);
}
.admin-ops__info-box-body li {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.65;
margin-bottom: 4px;
}
.admin-ops__info-box-body a {
color: var(--admin-primary);
text-decoration: underline;
}
.admin-ops__kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--admin-space);
margin-bottom: var(--admin-space-xl);
}
@media (max-width: 1280px) {
.admin-ops__kpis {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 544px) {
.admin-ops__kpis {
grid-template-columns: 1fr;
}
}
.admin-ops__kpi {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
padding: var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
transition: box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-ops__kpi:hover {
box-shadow: var(--admin-elevation-2);
}
.admin-ops__kpi-hd {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
}
.admin-ops__kpi-hd i {
width: 2.4rem;
height: 2.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
border-radius: var(--admin-radius-sm);
font-size: 1.05em;
flex-shrink: 0;
}
.admin-ops__kpi-hd--primary i {
background: rgba(var(--admin-primary-rgb), 0.12);
color: var(--admin-primary);
}
.admin-ops__kpi-hd--success i {
background: var(--admin-success-bg);
color: var(--admin-success-text);
}
.admin-ops__kpi-hd--warn i {
background: var(--admin-warn-bg);
color: var(--admin-warn-text);
}
.admin-ops__kpi-hd--danger i {
background: var(--admin-error-bg);
color: var(--admin-error-text);
}
.admin-ops__kpi-label {
font-size: var(--admin-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--admin-text-secondary);
}
.admin-ops__kpi-value {
font-size: var(--admin-fs-display);
font-weight: 700;
color: var(--admin-text);
line-height: 1.15;
word-break: break-all;
font-family: "Poppins", sans-serif;
}
.admin-ops__kpi-sub {
display: flex;
align-items: center;
gap: var(--admin-space-2xs);
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
min-height: 1.6em;
}
.admin-ops__entry-card {
display: flex;
align-items: center;
gap: var(--admin-space-lg);
padding: var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
text-decoration: none;
color: inherit;
transition: box-shadow var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-ops__entry-card:hover {
box-shadow: var(--admin-elevation-2);
transform: translateY(-1px);
}
.admin-ops__entry-card:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: var(--admin-focus-ring-offset);
}
.admin-ops__entry-card-icon {
flex-shrink: 0;
width: 4rem;
height: 4rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(var(--admin-primary-rgb), 0.12);
color: var(--admin-primary);
border-radius: var(--admin-radius);
font-size: 1.6em;
}
.admin-ops__entry-card-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs);
}
.admin-ops__entry-card-title {
margin: 0;
font-size: var(--admin-fs-body-lg);
font-weight: 700;
color: var(--admin-text);
}
.admin-ops__entry-card-desc {
margin: 0;
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
line-height: 1.55;
}
.admin-ops__entry-card-arrow {
flex-shrink: 0;
color: var(--admin-text-muted);
font-size: 1.1em;
}
.admin-ops__quick-actions {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-xs);
margin-bottom: var(--admin-space-xl);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-ops__quick-actions-label {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin-right: auto;
font-size: var(--admin-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--admin-text-secondary);
}
.admin-ops__quick-actions-label i {
color: var(--admin-primary);
}
.admin-ops__cards--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.admin-ops__cards--two {
grid-template-columns: 1fr;
}
}
.admin-ops__badge {
display: inline-flex;
align-items: center;
padding: var(--admin-space-3xs) var(--admin-space-sm);
font-size: var(--admin-fs-xs);
font-weight: 700;
letter-spacing: 0.04em;
border-radius: var(--admin-radius-full);
white-space: nowrap;
}
.admin-ops__badge--ok {
background: var(--admin-success-bg);
color: var(--admin-success-text);
}
.admin-ops__badge--warn {
background: var(--admin-warn-bg);
color: var(--admin-warn-text);
}
.admin-ops__badge--danger {
background: var(--admin-error-bg);
color: var(--admin-error-text);
}
.admin-ops__badge--pending {
background: var(--admin-grey-100);
color: var(--admin-text-secondary);
}
[data-theme=light-notion] .admin-ops__card-btn.admin-ops__card--warning,
[data-theme=dark-notion] .admin-ops__card-btn.admin-ops__card--warning {
background: var(--admin-card-bg);
border-color: var(--admin-border-strong);
color: var(--admin-text);
}
[data-theme=light-notion] .admin-ops__card-btn.admin-ops__card--warning:hover,
[data-theme=dark-notion] .admin-ops__card-btn.admin-ops__card--warning:hover {
background: var(--admin-grey-100);
border-color: var(--admin-text-muted);
}
.admin-source-protection {
max-width: 1200px;
}
.admin-source-protection .admin-nav-tabs {
margin-bottom: var(--admin-space-2xl);
}
.admin-source-protection .admin-ops__kpis {
margin-bottom: var(--admin-space-2xl);
}
.admin-source-protection .admin-ops__kpi {
border-color: rgba(var(--admin-primary-rgb), 0.16);
}
.admin-source-protection .admin-ops__kpi-value {
line-height: 1.12;
}
.admin-source-protection .admin-ops__group-title {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin: 0 0 var(--admin-space);
color: var(--admin-text);
}
.admin-source-protection .admin-ops__group-title::before {
content: "";
width: 0.8rem;
height: 2rem;
border-radius: var(--admin-radius-full);
background: var(--admin-primary);
box-shadow: 0 0 0 0.4rem rgba(var(--admin-primary-rgb), 0.1);
flex: 0 0 auto;
}
.admin-source-protection .admin-detail-grid {
gap: var(--admin-space);
margin: 0;
}
@media (max-width: 1024px) {
.admin-source-protection .admin-detail-grid {
grid-template-columns: 1fr;
}
}
.admin-source-protection .admin-detail-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--admin-space);
min-width: 0;
min-height: 100%;
padding: var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
overflow: hidden;
}
.admin-source-protection .admin-detail-card::after {
content: "";
position: absolute;
inset: 0 0 auto;
height: 0.3rem;
background: var(--admin-grey-100);
pointer-events: none;
}
.admin-source-protection .admin-detail-card__title {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin: 0;
padding-right: var(--admin-space-3xl);
font-size: var(--admin-fs-body-lg);
font-weight: 800;
line-height: 1.35;
color: var(--admin-text);
}
.admin-source-protection .admin-detail-list {
display: grid;
grid-template-columns: minmax(8ch, 0.34fr) minmax(0, 1fr);
align-items: start;
gap: var(--admin-space-xs) var(--admin-space);
margin: 0;
}
@media (max-width: 544px) {
.admin-source-protection .admin-detail-list {
grid-template-columns: 1fr;
gap: var(--admin-space-2xs);
}
}
.admin-source-protection .admin-detail-list dt,
.admin-source-protection .admin-detail-list dd {
min-width: 0;
}
.admin-source-protection .admin-detail-list dt {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
margin: 0;
padding: var(--admin-space-3xs) var(--admin-space-xs);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-full);
background: var(--admin-grey-50);
color: var(--admin-text-secondary);
font-size: var(--admin-fs-xs);
font-weight: 700;
line-height: 1.35;
}
.admin-source-protection .admin-detail-list dd {
margin: 0;
color: var(--admin-text);
font-size: var(--admin-fs-sm);
line-height: 1.6;
word-break: keep-all;
overflow-wrap: anywhere;
}
.admin-source-protection .admin-detail-list a {
color: var(--admin-primary);
font-weight: 700;
text-decoration: none;
}
.admin-source-protection .admin-detail-list a:hover {
color: var(--admin-primary-hover);
text-decoration: underline;
}
.admin-source-protection .admin-detail-list a:focus-visible {
outline: var(--admin-focus-ring);
outline-offset: var(--admin-focus-ring-offset);
border-radius: var(--admin-radius-xs);
}
.admin-source-protection code {
display: inline-block;
max-width: 100%;
padding: var(--admin-space-3xs) var(--admin-space-xs);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
background: var(--admin-grey-100);
color: var(--admin-text);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
line-height: 1.45;
vertical-align: baseline;
overflow-wrap: anywhere;
}
.admin-source-protection__section {
margin-top: var(--admin-space-2xl);
}
.admin-source-protection__section + .admin-source-protection__section {
margin-top: var(--admin-space-3xl);
}
.admin-source-protection__section--next .admin-detail-card:first-child {
border-color: rgba(var(--admin-primary-rgb), 0.28);
}
.admin-source-protection__section--next .admin-detail-card:first-child::after {
background: var(--admin-primary);
}
.admin-source-protection__section--numbered .admin-detail-grid {
counter-reset: source-protection-step;
}
.admin-source-protection__section--numbered .admin-detail-card {
counter-increment: source-protection-step;
}
.admin-source-protection__section--numbered .admin-detail-card::before {
content: counter(source-protection-step);
position: absolute;
top: var(--admin-space);
right: var(--admin-space);
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.8rem;
border: 1px solid rgba(var(--admin-primary-rgb), 0.26);
border-radius: var(--admin-radius-full);
background: rgba(var(--admin-primary-rgb), 0.1);
color: var(--admin-primary);
font-size: var(--admin-fs-xs);
font-weight: 800;
line-height: 1;
}
.admin-source-protection__section--guide-flow .admin-detail-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1280px) {
.admin-source-protection__section--guide-flow .admin-detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.admin-source-protection__section--guide-flow .admin-detail-grid {
grid-template-columns: 1fr;
}
}
.admin-source-protection__section--profiles .admin-detail-card:first-child {
border-color: rgba(var(--admin-success-rgb), 0.32);
}
.admin-source-protection__section--profiles .admin-detail-card:first-child::after {
background: var(--admin-success-text);
}
.admin-source-protection__section--policy .admin-ops__entry-card {
align-items: flex-start;
border-color: rgba(var(--admin-error-rgb), 0.22);
background: var(--admin-card-bg);
}
.admin-source-protection__section--policy .admin-ops__entry-card-icon {
background: var(--admin-error-bg);
color: var(--admin-error-text);
}
.admin-source-protection__flow {
counter-reset: source-protection-flow;
}
.admin-source-protection__flow .admin-ops__summary-card {
position: relative;
min-height: 100%;
padding: var(--admin-space-lg);
border-color: rgba(var(--admin-primary-rgb), 0.14);
}
.admin-source-protection__flow .admin-ops__summary-row {
align-items: flex-start;
}
.admin-source-protection__flow .admin-ops__summary-row i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--admin-radius);
background: rgba(var(--admin-primary-rgb), 0.1);
color: var(--admin-primary);
flex: 0 0 auto;
}
.admin-source-protection__flow .admin-ops__summary-row strong {
color: var(--admin-text);
font-size: var(--admin-fs-body);
line-height: 1.4;
}
.admin-source-protection__flow .admin-empty__desc {
margin: 0;
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm);
line-height: 1.6;
}
.admin-source-protection__checks {
align-items: flex-end;
gap: var(--admin-space);
padding: var(--admin-space-lg);
border-color: rgba(var(--admin-primary-rgb), 0.18);
}
.admin-source-protection__checks .admin-ops__quick-actions-label {
align-self: center;
min-width: 8rem;
}
.admin-source-protection__checks form {
display: grid;
grid-template-columns: minmax(18rem, 1fr) auto;
align-items: end;
gap: var(--admin-space-xs);
min-width: min(100%, 34rem);
}
@media (max-width: 544px) {
.admin-source-protection__checks form {
grid-template-columns: 1fr;
}
}
.admin-source-protection__checks .admin-form__field {
margin: 0;
}
.admin-source-protection__checks .admin-btn {
white-space: nowrap;
}
.admin-source-protection__release-form {
max-width: min(100%, 76rem);
padding: var(--admin-space-xl);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-card-bg);
box-shadow: var(--admin-elevation-1);
}
.admin-source-protection__release-form .admin-form__actions {
margin-top: var(--admin-space-xl);
padding-top: var(--admin-space-lg);
border-top: 1px solid var(--admin-border-light);
}
.admin-source-protection__preflight {
margin-bottom: var(--admin-space-2xl);
}
.admin-source-protection__preflight-actions {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-xs);
margin-top: var(--admin-space);
}
.admin-source-protection__progress-card {
display: grid;
gap: var(--admin-space-lg);
padding: var(--admin-space-xl);
border: 1px solid rgba(var(--admin-primary-rgb), 0.24);
border-radius: var(--admin-radius);
background: var(--admin-card-bg);
box-shadow: var(--admin-elevation-1);
}
.admin-source-protection__progress-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--admin-space);
}
.admin-source-protection__progress-head strong {
display: block;
color: var(--admin-text);
font-size: var(--admin-fs-body-lg);
line-height: 1.35;
}
.admin-source-protection__progress-head p {
margin: var(--admin-space-3xs) 0 0;
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm);
line-height: 1.55;
}
@media (max-width: 544px) {
.admin-source-protection__progress-head {
flex-direction: column;
}
}
.admin-source-protection__progress-percent {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 6.4rem;
padding: var(--admin-space-xs) var(--admin-space);
border-radius: var(--admin-radius);
background: rgba(var(--admin-primary-rgb), 0.1);
color: var(--admin-primary);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-body-lg);
font-weight: 800;
line-height: 1;
}
.admin-source-protection__progress-track {
width: 100%;
height: 1rem;
overflow: hidden;
border-radius: var(--admin-radius-full);
background: var(--admin-grey-100);
}
.admin-source-protection__progress-bar {
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--admin-primary), var(--admin-info-text));
transition: width 240ms ease;
}
.admin-source-protection__steps {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--admin-space-xs);
margin: 0;
padding: 0;
list-style: none;
}
.admin-source-protection__steps li {
display: flex;
align-items: center;
min-height: 4.2rem;
padding: var(--admin-space-xs) var(--admin-space-sm);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-grey-50);
color: var(--admin-text-secondary);
font-size: var(--admin-fs-xs);
font-weight: 800;
line-height: 1.35;
overflow-wrap: anywhere;
}
.admin-source-protection__steps li::before {
content: "";
width: 0.8rem;
height: 0.8rem;
margin-right: var(--admin-space-xs);
border-radius: var(--admin-radius-full);
background: var(--admin-grey-300);
flex: 0 0 auto;
}
.admin-source-protection__steps li.is-complete {
border-color: rgba(var(--admin-success-rgb), 0.28);
background: var(--admin-success-bg);
color: var(--admin-success-text);
}
.admin-source-protection__steps li.is-complete::before {
background: var(--admin-success-text);
}
.admin-source-protection__steps li.is-active {
border-color: rgba(var(--admin-primary-rgb), 0.38);
background: rgba(var(--admin-primary-rgb), 0.08);
color: var(--admin-primary);
box-shadow: inset 0 0 0 0.1rem rgba(var(--admin-primary-rgb), 0.16);
}
.admin-source-protection__steps li.is-active::before {
background: var(--admin-primary);
}
.admin-source-protection__steps li.is-failed {
border-color: rgba(var(--admin-error-rgb), 0.32);
background: var(--admin-error-bg);
color: var(--admin-error-text);
}
.admin-source-protection__steps li.is-failed::before {
background: var(--admin-error-text);
}
@media (max-width: 1024px) {
.admin-source-protection__steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 544px) {
.admin-source-protection__steps {
grid-template-columns: 1fr;
}
}
.admin-source-protection__progress-log {
min-height: 16rem;
max-height: 34rem;
margin: 0;
padding: var(--admin-space);
overflow: auto;
border: 1px solid var(--admin-grey-700);
border-radius: var(--admin-radius);
background: var(--admin-grey-900);
color: var(--admin-grey-50);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
line-height: 1.65;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.admin-source-protection__artifact {
display: grid;
gap: var(--admin-space);
padding: var(--admin-space);
border: 1px solid rgba(var(--admin-success-rgb), 0.28);
border-radius: var(--admin-radius);
background: var(--admin-success-bg);
}
.admin-source-protection__artifact[hidden] {
display: none;
}
.admin-source-protection__artifact-paths {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--admin-space);
}
.admin-source-protection__artifact-paths div {
display: grid;
gap: var(--admin-space-2xs);
min-width: 0;
}
.admin-source-protection__artifact-paths span {
color: var(--admin-success-text);
font-size: var(--admin-fs-xs);
font-weight: 800;
line-height: 1.4;
}
.admin-source-protection__artifact-paths code {
background: var(--admin-card-bg);
}
@media (max-width: 768px) {
.admin-source-protection__artifact-paths {
grid-template-columns: 1fr;
}
}
.admin-source-protection__artifact-actions {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-xs);
}
.admin-source-protection__section--progress.is-failed .admin-source-protection__progress-card {
border-color: rgba(var(--admin-error-rgb), 0.32);
}
.admin-source-protection--show .admin-source-protection__section--release-summary {
margin-top: var(--admin-space-2xl);
}
.admin-git {
max-width: 1080px;
margin: 0 auto;
padding: var(--admin-space-xl) var(--admin-space-lg);
}
.admin-git__section-card {
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
margin-bottom: var(--admin-space-xl);
overflow: hidden;
}
.admin-git__section-card-hd {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--admin-space);
padding: var(--admin-space) var(--admin-space-lg);
border-bottom: 1px solid var(--admin-border-light);
background: var(--admin-grey-50);
}
.admin-git__section-card-title {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin: 0;
font-size: var(--admin-fs-body-lg);
font-weight: 700;
color: var(--admin-text);
}
.admin-git__section-card-title i {
width: 1.8rem;
height: 1.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(var(--admin-primary-rgb), 0.12);
color: var(--admin-primary);
border-radius: var(--admin-radius-sm);
font-size: 0.9em;
}
.admin-git__section-card-count {
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-text-muted);
background: var(--admin-grey-100);
padding: var(--admin-space-3xs) var(--admin-space-xs);
border-radius: var(--admin-radius-full);
margin-left: var(--admin-space-xs);
}
.admin-git__section-card-body {
padding: var(--admin-space-lg);
}
.admin-git__conflict-alert {
margin-bottom: var(--admin-space-xl);
background: var(--admin-error-bg);
border: 1px solid rgba(var(--admin-error-rgb), 0.4);
border-left: 4px solid var(--admin-error);
border-radius: var(--admin-radius);
overflow: hidden;
}
.admin-git__conflict-hd {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--admin-space-xs);
padding: var(--admin-space-sm) var(--admin-space-lg);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-git__conflict-hd i {
color: var(--admin-error);
font-size: 0.95em;
flex-shrink: 0;
align-self: center;
}
.admin-git__conflict-hd strong {
font-size: var(--admin-fs-body);
font-weight: 700;
color: var(--admin-text);
}
.admin-git__conflict-hint {
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-git__conflict-files {
margin: 0;
padding: var(--admin-space-sm) var(--admin-space-lg);
list-style: none;
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs);
}
.admin-git__conflict-files li {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
padding: var(--admin-space-2xs) var(--admin-space-xs);
background: rgba(255, 255, 255, 0.6);
border-radius: var(--admin-radius-sm);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
color: var(--admin-error-text);
}
.admin-git__conflict-files li i {
flex-shrink: 0;
}
.admin-git__conflict-actions {
display: flex;
gap: var(--admin-space-xs);
padding: var(--admin-space-sm) var(--admin-space-lg);
flex-wrap: wrap;
}
.admin-git__section {
margin-bottom: var(--admin-space-2xl);
}
.admin-git__section-title {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
margin: 0 0 var(--admin-space);
font-size: var(--admin-fs-menu);
font-weight: 700;
color: var(--admin-text);
}
.admin-git__section-title i {
color: var(--admin-primary);
font-size: 0.95em;
}
.admin-git__section-card .admin-git__empty {
padding: var(--admin-space-lg);
background: var(--admin-grey-50);
border: 1px dashed var(--admin-border);
border-radius: var(--admin-radius);
}
.admin-git__section-card .admin-git__branch-create, .admin-git__section-card .admin-git__tag-create, .admin-git__section-card .admin-git__stash-save {
background: transparent;
border: none;
padding: 0;
margin-bottom: var(--admin-space-lg);
padding-bottom: var(--admin-space-lg);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-git__branch-list {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
margin-bottom: var(--admin-space-lg);
}
.admin-git__branch-item {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-git__branch-item.is-current {
border-color: rgba(var(--admin-primary-rgb), 0.4);
background: rgba(var(--admin-primary-rgb), 0.04);
}
.admin-git__branch-name {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: var(--admin-space-xs);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text);
}
.admin-git__branch-name i {
color: var(--admin-primary);
font-size: 0.85em;
}
.admin-git__branch-actions {
display: flex;
gap: var(--admin-space-2xs);
flex-shrink: 0;
}
.admin-git__branch-create {
display: flex;
gap: var(--admin-space-lg);
align-items: flex-end;
flex-wrap: wrap;
padding: var(--admin-space-lg);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
}
.admin-git__branch-create-field {
flex: 1 1 200px;
}
.admin-git__commit-table-wrap {
overflow-x: auto;
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-git__commit-table {
width: 100%;
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.admin-git__commit-table th,
.admin-git__commit-table td {
padding: var(--admin-space-sm) var(--admin-space);
text-align: left;
font-size: var(--admin-fs-sm);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-git__commit-table th {
background: var(--admin-grey-50);
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: var(--admin-fs-xs);
white-space: nowrap;
}
.admin-git__commit-table tbody tr:last-child td {
border-bottom: 0;
}
.admin-git__commit-table tbody tr:hover {
background: var(--admin-grey-50);
}
.admin-git__commit-hash {
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
white-space: nowrap;
}
.admin-git__commit-subject {
color: var(--admin-text);
max-width: 340px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-git__commit-meta {
color: var(--admin-text-muted);
font-size: var(--admin-fs-xs);
white-space: nowrap;
}
.admin-git__commit-checkout {
white-space: nowrap;
}
.admin-git__checkout-inline {
display: none;
gap: var(--admin-space);
align-items: flex-end;
flex-wrap: wrap;
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-grey-50);
}
.admin-git__checkout-inline.is-open {
display: flex;
}
.admin-git__tag-create {
display: flex;
gap: var(--admin-space-lg);
align-items: flex-end;
flex-wrap: wrap;
padding: var(--admin-space-lg);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
margin-bottom: var(--admin-space-lg);
}
.admin-git__tag-create-field {
flex: 1 1 140px;
}
.admin-git__tag-list {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-git__tag-item {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-git__tag-badge {
display: inline-flex;
align-items: center;
gap: var(--admin-space-3xs);
padding: var(--admin-space-3xs) var(--admin-space-xs);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
font-weight: 700;
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
color: var(--admin-text);
flex-shrink: 0;
}
.admin-git__tag-badge i {
color: var(--admin-primary);
}
.admin-git__tag-meta {
flex: 1 1 auto;
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
}
.admin-git__tag-date {
margin-right: var(--admin-space-sm);
}
.admin-git__tag-subject {
color: var(--admin-text-muted);
font-style: italic;
}
.admin-git__stash-save {
display: flex;
gap: var(--admin-space-lg);
align-items: flex-end;
flex-wrap: wrap;
padding: var(--admin-space-lg);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
margin-bottom: var(--admin-space-lg);
}
.admin-git__stash-save-field {
flex: 1 1 200px;
}
.admin-git__stash-list {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-git__stash-item {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-git__stash-ref {
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
flex-shrink: 0;
min-width: 80px;
}
.admin-git__stash-message {
flex: 1 1 auto;
font-size: var(--admin-fs-sm);
color: var(--admin-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-git__stash-time {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
flex-shrink: 0;
}
.admin-git__stash-actions {
display: flex;
gap: var(--admin-space-2xs);
flex-shrink: 0;
}
.admin-git__empty {
padding: var(--admin-space-lg);
background: var(--admin-grey-50);
border: 1px dashed var(--admin-border);
border-radius: var(--admin-radius);
color: var(--admin-text-muted);
text-align: center;
font-size: var(--admin-fs-sm);
}
.admin-activity-logs__filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space-lg);
padding: var(--admin-space);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
}
.admin-activity-logs__field {
display: flex;
flex-direction: column;
gap: var(--admin-space-3xs);
min-width: 0;
}
.admin-activity-logs__field span {
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-text-secondary);
}
.admin-activity-logs__field .admin-input {
min-width: 8rem;
}
.admin-activity-logs__summary {
margin: 0 0 var(--admin-space-sm);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-activity-logs__summary strong {
color: var(--admin-text);
}
.admin-activity-logs__table-wrap {
overflow-x: auto;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-activity-logs__table {
width: 100%;
border-collapse: collapse;
font-size: var(--admin-fs-sm);
background: var(--admin-card-bg);
}
.admin-activity-logs__table th, .admin-activity-logs__table td {
padding: var(--admin-space-sm) var(--admin-space);
text-align: left;
border-bottom: 1px solid var(--admin-border-light);
vertical-align: middle;
}
.admin-activity-logs__table th {
background: var(--admin-grey-50);
font-size: var(--admin-fs-xs);
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.admin-activity-logs__table tbody tr:last-child td {
border-bottom: 0;
}
.admin-activity-logs__table tbody tr:hover {
background: var(--admin-grey-50);
}
.admin-activity-logs__table code {
font-family: "Poppins", sans-serif;
font-size: 0.85em;
padding: 1px 5px;
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
color: var(--admin-text);
}
.admin-activity-logs__row--security {
background: var(--admin-error-bg) !important;
border-left: 3px solid var(--admin-error);
}
.admin-activity-logs__row--security:hover {
background: rgba(var(--admin-error-rgb), 0.1) !important;
}
.admin-activity-logs__col-level {
width: 110px;
white-space: nowrap;
}
.admin-activity-logs__col-event {
width: 200px;
}
.admin-activity-logs__col-actor {
width: 110px;
}
.admin-activity-logs__col-subject {
width: 110px;
}
.admin-activity-logs__col-ip {
width: 130px;
white-space: nowrap;
}
.admin-activity-logs__col-time {
width: 140px;
white-space: nowrap;
color: var(--admin-text-secondary);
font-variant-numeric: tabular-nums;
}
.admin-activity-logs__col-message {
min-width: 200px;
}
.admin-activity-logs__event-code {
word-break: break-all;
}
.admin-activity-logs__context {
margin-top: var(--admin-space-2xs);
}
.admin-activity-logs__context summary {
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
cursor: pointer;
user-select: none;
}
.admin-activity-logs__context summary:hover {
color: var(--admin-primary);
}
.admin-activity-logs__context pre {
margin: var(--admin-space-2xs) 0 0;
padding: var(--admin-space-sm);
background: var(--admin-grey-900);
color: var(--admin-grey-100);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
border-radius: var(--admin-radius-sm);
max-height: 12rem;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}
.admin-activity-logs__actor {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
}
.admin-activity-logs__id {
font-family: "Poppins", sans-serif;
font-size: 0.9em;
color: var(--admin-text-muted);
}
.sl-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--admin-space);
margin-bottom: var(--admin-space-lg);
}
@media (max-width: 1024px) {
.sl-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.sl-kpi-grid {
grid-template-columns: 1fr;
}
}
.sl-kpi {
display: flex;
align-items: center;
gap: var(--admin-space);
padding: var(--admin-space);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
transition: box-shadow 0.15s;
}
.sl-kpi:hover {
box-shadow: var(--admin-elevation-2);
}
.sl-kpi__icon {
flex-shrink: 0;
width: 2.8rem;
height: 2.8rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--admin-radius-sm);
font-size: var(--admin-fs-lg);
}
.sl-kpi__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sl-kpi__label {
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sl-kpi__value {
font-size: var(--admin-fs-xl);
font-weight: 700;
color: var(--admin-text);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.sl-kpi--blue .sl-kpi__icon {
background: rgba(59, 130, 246, 0.12);
color: #3b82f6;
}
.sl-kpi--green .sl-kpi__icon {
background: rgba(16, 185, 129, 0.12);
color: #10b981;
}
.sl-kpi--purple .sl-kpi__icon {
background: rgba(139, 92, 246, 0.12);
color: #8b5cf6;
}
.sl-kpi--orange .sl-kpi__icon {
background: rgba(249, 115, 22, 0.12);
color: #f97316;
}
.sl-kpi--warn {
border-color: rgba(249, 115, 22, 0.4);
}
.sl-kpi--warn .sl-kpi__value {
color: #f97316;
}
.sl-charts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--admin-space);
margin-bottom: var(--admin-space-lg);
}
@media (max-width: 1100px) {
.sl-charts {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.sl-charts {
grid-template-columns: 1fr;
}
}
.sl-chart-card {
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
padding: var(--admin-space);
box-shadow: var(--admin-elevation-1);
}
.sl-chart-card--full {
grid-column: 1/-1;
}
.sl-chart-title {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-secondary);
margin: 0 0 var(--admin-space-sm);
}
.sl-chart-body {
position: relative;
height: 18rem;
}
.sl-chart-body canvas {
width: 100% !important;
height: 100% !important;
}
.sl-cat-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-3xs);
margin-bottom: var(--admin-space);
padding-bottom: var(--admin-space-sm);
border-bottom: 1px solid var(--admin-border-light);
}
.sl-cat-tab {
padding: var(--admin-space-2xs) var(--admin-space-sm);
font-size: var(--admin-fs-xs);
font-weight: 500;
color: var(--admin-text-secondary);
background: transparent;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
text-decoration: none;
transition: background 0.12s, color 0.12s, border-color 0.12s;
white-space: nowrap;
}
.sl-cat-tab:hover {
background: var(--admin-grey-50);
color: var(--admin-text);
}
.sl-cat-tab--active {
background: var(--admin-primary);
border-color: var(--admin-primary);
color: #fff;
}
.sl-cat-tab--active:hover {
background: var(--admin-primary);
color: #fff;
}
.sl-filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space-lg);
padding: var(--admin-space);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
}
.sl-filter-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-sm);
width: 100%;
}
.sl-filter-search {
flex: 1 1 16rem;
min-width: 0;
}
.sl-filter-select {
flex: 0 0 auto;
min-width: 12rem;
}
.sl-table-wrap {
overflow-x: auto;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.sl-table {
width: 100%;
border-collapse: collapse;
font-size: var(--admin-fs-sm);
background: var(--admin-card-bg);
}
.sl-table th, .sl-table td {
padding: var(--admin-space-sm) var(--admin-space);
text-align: left;
border-bottom: 1px solid var(--admin-border-light);
vertical-align: middle;
}
.sl-table th {
background: var(--admin-grey-50);
font-size: var(--admin-fs-xs);
font-weight: 700;
color: var(--admin-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.sl-table tbody tr:last-child td {
border-bottom: 0;
}
.sl-table tbody tr:hover {
background: var(--admin-grey-50);
}
.sl-table code {
font-family: "Poppins", sans-serif;
font-size: 0.85em;
padding: 1px 5px;
background: var(--admin-grey-100);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
color: var(--admin-text);
}
.sl-table__row--danger {
background: var(--admin-error-bg) !important;
border-left: 3px solid var(--admin-error);
}
.sl-table__row--danger:hover {
background: rgba(var(--admin-error-rgb), 0.1) !important;
}
.sl-table__row--security {
background: var(--admin-error-bg) !important;
border-left: 3px solid var(--admin-error);
}
.sl-table__row--security:hover {
background: rgba(var(--admin-error-rgb), 0.1) !important;
}
.sl-table__row--error {
background: var(--admin-error-bg) !important;
}
.sl-col-no {
width: 56px;
font-variant-numeric: tabular-nums;
}
.sl-col-sev {
width: 90px;
}
.sl-col-cat {
width: 90px;
}
.sl-col-type {
width: 180px;
}
.sl-col-file {
width: 180px;
}
.sl-col-url {
width: 160px;
}
.sl-col-count {
width: 72px;
text-align: right;
}
.sl-col-status {
width: 80px;
}
.sl-col-time {
width: 130px;
white-space: nowrap;
color: var(--admin-text-secondary);
font-variant-numeric: tabular-nums;
}
.sl-col-action {
width: 60px;
text-align: center;
}
.sl-col-level {
width: 110px;
white-space: nowrap;
}
.sl-col-event {
width: 200px;
}
.sl-col-actor {
width: 110px;
}
.sl-col-ip {
width: 130px;
white-space: nowrap;
}
.sl-col-message {
min-width: 200px;
}
.sl-code-wrap {
border-radius: var(--admin-radius-sm);
overflow: hidden;
}
.sl-code-block {
display: block;
margin: 0;
padding: var(--admin-space);
background: var(--admin-grey-900);
color: var(--admin-grey-100);
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
line-height: 1.6;
white-space: pre-wrap;
word-break: break-all;
overflow: auto;
max-height: 36rem;
border-radius: var(--admin-radius-sm);
}
.sl-ops-ok {
color: var(--admin-success);
}
.sl-ops-fail {
color: var(--admin-error);
}
.sl-audit-violation {
margin-bottom: var(--admin-space-lg);
}
.sl-audit-violation__file {
font-family: "Poppins", sans-serif;
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-text-secondary);
margin: 0 0 var(--admin-space-2xs);
}
.sl-audit-violation__item {
display: flex;
gap: var(--admin-space-sm);
padding: var(--admin-space-2xs) var(--admin-space-sm);
background: var(--admin-error-bg);
border-left: 3px solid var(--admin-error);
border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
margin-bottom: 2px;
font-size: var(--admin-fs-xs);
}
.sl-audit-violation__line {
flex-shrink: 0;
width: 5rem;
color: var(--admin-text-muted);
font-variant-numeric: tabular-nums;
}
.sl-audit-violation__type {
flex-shrink: 0;
padding: 1px var(--admin-space-2xs);
background: var(--admin-error);
color: #fff;
border-radius: var(--admin-radius-sm);
font-size: 1.1rem;
}
.sl-audit-violation__snippet {
min-width: 0;
word-break: break-all;
color: var(--admin-text);
font-family: "Poppins", sans-serif;
}
.sl-theme-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
gap: var(--admin-space);
}
.sl-theme-card {
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
overflow: hidden;
box-shadow: var(--admin-elevation-1);
}
.sl-theme-card__head {
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-grey-50);
font-size: var(--admin-fs-xs);
font-weight: 700;
color: var(--admin-text-secondary);
border-bottom: 1px solid var(--admin-border-light);
display: flex;
justify-content: space-between;
align-items: center;
}
.sl-theme-card__body {
padding: var(--admin-space);
}
.sl-theme-card__preview {
width: 100%;
height: 16rem;
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm);
}
.admin-ui-audit__summary {
display: flex;
gap: var(--admin-space-lg);
margin-bottom: var(--admin-space-2xl);
flex-wrap: wrap;
}
.admin-ui-audit__stat {
display: flex;
flex-direction: column;
align-items: center;
min-width: 120px;
padding: var(--admin-space-lg) var(--admin-space-xl);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-ui-audit__stat--warn {
border-color: rgba(var(--admin-warn-rgb), 0.4);
background: var(--admin-warn-bg);
}
.admin-ui-audit__stat--warn .admin-ui-audit__stat-num {
color: var(--admin-warn-text);
}
.admin-ui-audit__stat--ok {
border-color: rgba(var(--admin-success-rgb), 0.35);
background: var(--admin-success-bg);
}
.admin-ui-audit__stat--ok .admin-ui-audit__stat-num {
color: var(--admin-success-text);
}
.admin-ui-audit__stat-num {
font-size: 2rem;
font-weight: 700;
line-height: 1.1;
color: var(--admin-text);
}
.admin-ui-audit__stat-label {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
margin-top: 0.3rem;
}
.admin-ui-audit__filters {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-xs);
margin-bottom: var(--admin-space-xl);
}
.admin-ui-audit__filter-badge {
cursor: pointer;
text-decoration: none;
}
.admin-ui-audit__filter-badge:hover {
opacity: 0.8;
}
.admin-ui-audit__empty {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-2xl);
background: var(--admin-success-bg);
border: 1px solid rgba(var(--admin-success-rgb), 0.3);
border-radius: var(--admin-radius);
color: var(--admin-success-text);
font-weight: 600;
}
.admin-ui-audit__empty i {
font-size: 1.2em;
}
.admin-ui-audit__list {
display: flex;
flex-direction: column;
gap: var(--admin-space-xl);
}
.admin-ui-audit__file {
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
overflow: hidden;
}
.admin-ui-audit__file-header {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space-lg);
background: var(--admin-grey-50);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-ui-audit__file-path {
flex: 1;
font-size: var(--admin-fs-sm);
color: var(--admin-text);
font-family: "Poppins", sans-serif;
word-break: break-all;
}
.admin-ui-audit__file-count {
flex-shrink: 0;
}
.admin-ui-audit__table {
margin: 0;
border-radius: 0;
border: none;
}
.admin-ui-audit__col-line {
width: 60px;
text-align: center;
}
.admin-ui-audit__col-type {
width: 160px;
white-space: nowrap;
}
.admin-ui-audit__lineno {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 24px;
background: var(--admin-grey-100);
border-radius: var(--admin-radius-xs);
font-size: var(--admin-fs-xs);
font-family: "Poppins", sans-serif;
color: var(--admin-text-muted);
}
.admin-ui-audit__type-badge {
font-size: var(--admin-fs-xs);
}
.admin-ui-audit__type-badge--inline-style {
background: rgba(239, 68, 68, 0.12);
color: #b91c1c;
}
.admin-ui-audit__type-badge--raw-input {
background: rgba(245, 158, 11, 0.12);
color: #92400e;
}
.admin-ui-audit__type-badge--raw-textarea {
background: rgba(245, 158, 11, 0.12);
color: #92400e;
}
.admin-ui-audit__type-badge--raw-select {
background: rgba(239, 68, 68, 0.12);
color: #b91c1c;
}
.admin-ui-audit__type-badge--checkbox-no-wrap-false {
background: rgba(99, 102, 241, 0.12);
color: #3730a3;
}
.admin-ui-audit__type-badge--component-inline-style {
background: rgba(239, 68, 68, 0.12);
color: #b91c1c;
}
.admin-ui-audit__code {
display: block;
font-size: var(--admin-fs-xs);
font-family: "Poppins", sans-serif;
white-space: pre-wrap;
word-break: break-all;
color: var(--admin-text);
max-height: 4.5em;
overflow: hidden;
}
.admin-ui-audit__hint {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
max-width: 280px;
}
.admin-theme-audit {
display: flex;
flex-direction: column;
gap: var(--admin-space-xl);
}
.admin-theme-audit__legend {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--admin-space-sm);
font-size: var(--admin-fs-sm);
color: var(--admin-text-secondary);
}
.admin-theme-audit__legend-item {
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs);
}
.admin-theme-audit__legend-sep {
color: var(--admin-border-strong);
margin: 0 var(--admin-space-2xs);
}
.admin-theme-audit__legend-note {
display: inline-flex;
align-items: center;
gap: 0.4em;
color: var(--admin-text-muted);
font-style: italic;
}
.admin-theme-audit__dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.admin-theme-audit__dot--light {
background: #60a5fa;
}
.admin-theme-audit__dot--dark {
background: #6366f1;
}
.admin-theme-audit__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: var(--admin-space-lg);
}
@media (max-width: 1024px) {
.admin-theme-audit__grid {
grid-template-columns: 1fr;
}
}
.admin-theme-audit__card {
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.07);
display: flex;
flex-direction: column;
}
.admin-theme-audit__card-head {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
padding: var(--admin-space-sm) var(--admin-space);
border-bottom: 1px solid var(--admin-border-light);
background: var(--admin-grey-50);
}
.admin-theme-audit__card-label {
font-size: var(--admin-fs-sm);
font-weight: 700;
color: var(--admin-text);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-theme-audit__card-slug {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
font-family: "Poppins", sans-serif;
background: var(--admin-grey-100);
padding: 1px var(--admin-space-2xs);
border-radius: var(--admin-radius-sm);
}
.admin-theme-audit__apply-btn {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 4px var(--admin-space-xs);
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-primary);
background: var(--admin-primary-light);
border: 1px solid var(--admin-primary-border);
border-radius: var(--admin-radius-sm);
cursor: pointer;
font-family: inherit;
flex-shrink: 0;
transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-theme-audit__apply-btn:hover {
background: var(--admin-primary);
color: var(--admin-on-primary);
}
.admin-theme-audit__fake-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
min-height: 48px;
}
.admin-theme-audit__fake-breadcrumb {
display: flex;
align-items: center;
}
.admin-theme-audit__fake-actions {
display: flex;
align-items: center;
gap: 10px;
}
.admin-theme-audit__fake-action {
display: flex;
align-items: center;
gap: 4px;
position: relative;
}
.admin-theme-audit__fake-action--gap {
margin-left: 4px;
}
.admin-theme-audit__pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.35rem;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
line-height: 1;
border: 1.5px solid transparent;
flex-shrink: 0;
}
.admin-theme-audit__pill--unread {
background: #ffffff !important;
color: #c81e1e !important;
border-color: rgba(200, 30, 30, 0.25) !important;
box-shadow: 0 0 0 1.5px rgba(200, 30, 30, 0.18), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.admin-theme-audit__fake-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #ffffff;
color: #0a0a0a;
font-size: 11px;
font-weight: 800;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.admin-theme-audit__swatch-row {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-xs) 14px;
flex-wrap: wrap;
}
.admin-theme-audit__swatch {
padding: 3px var(--admin-space-xs);
border-radius: var(--admin-radius-sm);
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-text);
white-space: nowrap;
}
.admin-theme-audit__swatch-text,
.admin-theme-audit__swatch-primary {
font-size: var(--admin-fs-xs);
font-weight: 600;
white-space: nowrap;
}
.admin-theme-audit__checks {
padding: var(--admin-space-xs) 0;
border-top: 1px solid var(--admin-border-light);
flex: 1;
}
.admin-theme-audit__check-item {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
padding: 5px var(--admin-space);
cursor: pointer;
border-radius: 0;
transition: background var(--admin-duration) var(--admin-ease);
}
.admin-theme-audit__check-item:hover {
background: var(--admin-grey-50);
}
.admin-theme-audit__check-input {
flex-shrink: 0;
width: 14px;
height: 14px;
accent-color: var(--admin-success, #22c55e);
cursor: pointer;
}
.admin-theme-audit__check-label {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text);
min-width: 0;
white-space: nowrap;
}
.admin-theme-audit__check-desc {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-theme-audit__check-input:checked ~ .admin-theme-audit__check-label {
color: var(--admin-success, #22c55e);
text-decoration: line-through;
opacity: 0.7;
}
.admin-theme-audit__card-foot {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-xs) var(--admin-space);
border-top: 1px solid var(--admin-border-light);
background: var(--admin-grey-50);
}
.admin-theme-audit__score {
font-size: var(--admin-fs-xs);
color: var(--admin-text-secondary);
white-space: nowrap;
flex-shrink: 0;
}
.admin-theme-audit__score-pass {
font-weight: 700;
color: var(--admin-success, #22c55e);
}
.admin-theme-audit__score-bar {
flex: 1;
height: 4px;
border-radius: 99px;
background: var(--admin-border);
overflow: hidden;
}
.admin-theme-audit__score-fill {
height: 100%;
background: var(--admin-success, #22c55e);
border-radius: 99px;
transition: width 0.3s ease;
}
.admin-theme-audit__summary {
display: flex;
gap: var(--admin-space-xl);
padding: var(--admin-space-lg) var(--admin-space-xl);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
box-shadow: var(--admin-shadow);
}
@media (max-width: 1024px) {
.admin-theme-audit__summary {
gap: var(--admin-space-lg);
}
}
.admin-theme-audit__summary-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--admin-space-3xs);
}
.admin-theme-audit__summary-num {
font-size: var(--admin-fs-3xl, 2.8rem);
font-weight: 800;
color: var(--admin-text);
line-height: 1;
letter-spacing: -0.03em;
}
.admin-theme-audit__summary-label {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
}
.admin-resource-hints-audit__types {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--admin-space-md);
margin-bottom: var(--admin-space-2xl);
}
.admin-resource-hints-audit__type-card {
display: flex;
align-items: flex-start;
gap: var(--admin-space-md);
padding: var(--admin-space-md) var(--admin-space-lg);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
box-shadow: var(--admin-elevation-1);
}
.admin-resource-hints-audit__type-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--admin-radius-sm);
background: rgba(var(--admin-primary-rgb), 0.08);
color: var(--admin-primary);
flex-shrink: 0;
font-size: 1em;
}
.admin-resource-hints-audit__type-name {
display: block;
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text);
font-family: "Poppins", sans-serif;
margin-bottom: 0.2rem;
}
.admin-resource-hints-audit__type-desc {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
margin: 0;
line-height: 1.4;
}
.admin-resource-hints-audit__table {
margin: 0;
border-radius: 0;
border: none;
}
.admin-resource-hints-audit__col-rel {
width: 130px;
white-space: nowrap;
}
.admin-resource-hints-audit__col-as {
width: 100px;
}
.admin-resource-hints-audit__col-co {
width: 80px;
text-align: center;
}
.admin-resource-hints-audit__col-file {
width: 72px;
text-align: center;
}
.admin-resource-hints-audit__col-status {
width: 90px;
white-space: nowrap;
}
.admin-resource-hints-audit__href {
font-size: var(--admin-fs-xs);
font-family: "Poppins", sans-serif;
word-break: break-all;
color: var(--admin-text);
}
.admin-resource-hints-audit__local-badge {
font-size: var(--admin-fs-xs);
margin-left: 0.3rem;
}
.admin-resource-hints-audit__type-label {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-resource-hints-audit__empty-cell {
color: var(--admin-text-muted);
}
.admin-resource-hints-audit__rel-badge {
display: inline-flex;
align-items: center;
gap: 0.3em;
font-size: var(--admin-fs-xs);
font-family: "Poppins", sans-serif;
font-weight: 600;
}
.admin-resource-hints-audit__rel-badge--preload {
background: rgba(59, 130, 246, 0.12);
color: #1d4ed8;
}
.admin-resource-hints-audit__rel-badge--prefetch {
background: rgba(99, 102, 241, 0.12);
color: #3730a3;
}
.admin-resource-hints-audit__rel-badge--preconnect {
background: rgba(16, 185, 129, 0.12);
color: #065f46;
}
.admin-resource-hints-audit__rel-badge--dns_prefetch {
background: rgba(245, 158, 11, 0.12);
color: #92400e;
}
.admin-resource-hints-audit__rel-badge--modulepreload {
background: rgba(139, 92, 246, 0.12);
color: #5b21b6;
}
.admin-resource-hints-audit__status-badge {
display: inline-flex;
align-items: center;
gap: 0.3em;
font-size: var(--admin-fs-xs);
font-weight: 600;
}
.admin-resource-hints-audit__status-badge--ok {
background: var(--admin-success-bg);
color: var(--admin-success-text);
}
.admin-resource-hints-audit__status-badge--warn {
background: rgba(245, 158, 11, 0.12);
color: #92400e;
}
.admin-resource-hints-audit__status-badge--error {
background: rgba(239, 68, 68, 0.12);
color: #b91c1c;
}
.admin-resource-hints-audit__row--warn td {
background: rgba(245, 158, 11, 0.04);
}
.admin-resource-hints-audit__row--error td {
background: rgba(239, 68, 68, 0.04);
}
.admin-resource-hints-audit__icon--ok {
color: var(--admin-success-text);
}
.admin-resource-hints-audit__icon--error {
color: #b91c1c;
}
.admin-resource-hints-audit__issues {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.admin-resource-hints-audit__issues li::before {
content: "· ";
color: var(--admin-warn-text, #92400e);
}
.rp-page .admin-page__header {
margin-bottom: var(--admin-space-xl);
}
.rp-toolbar {
display: flex;
align-items: center;
gap: var(--admin-space);
margin-bottom: var(--admin-space-xl);
flex-wrap: wrap;
}
.rp-toolbar__hint {
font-size: var(--admin-fs-body);
color: var(--admin-text-muted);
display: flex;
align-items: center;
gap: var(--admin-space-2xs);
}
.rp-matrix-wrap {
width: 100%;
overflow-x: auto;
border-radius: var(--admin-radius-lg);
border: 1px solid var(--admin-border);
background: var(--admin-card-bg);
box-shadow: var(--admin-elevation-1);
}
.rp-matrix {
min-width: 640px;
}
.rp-table {
width: 100%;
border-collapse: collapse;
font-size: var(--admin-fs-body-lg);
table-layout: auto;
}
.rp-table th, .rp-table td {
padding: 0;
border: none;
}
.rp-table__role-col {
text-align: center;
min-width: 120px;
width: 120px;
vertical-align: top;
border-left: 1px solid var(--admin-border);
background: var(--admin-grey-50);
}
.rp-table__role-col--owner {
background: linear-gradient(160deg, #fff8e6 0%, #fffdf5 100%);
}
.rp-table__perm-col {
text-align: left;
min-width: 200px;
width: 220px;
background: var(--admin-grey-50);
border-right: 1px solid var(--admin-border);
font-weight: 600;
padding: var(--admin-space) var(--admin-space-lg);
font-size: var(--admin-fs-base);
color: var(--admin-text-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.rp-table__group-row {
background: var(--admin-grey-50);
border-top: 2px solid var(--admin-border);
}
.rp-table__group-row:first-child {
border-top: none;
}
.rp-table__group-cell {
padding: var(--admin-space-sm) var(--admin-space-lg);
font-size: var(--admin-fs-sm);
font-weight: 700;
color: var(--admin-text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: var(--admin-space-xs);
}
.rp-table__group-cell .fa-solid {
font-size: 0.9em;
color: var(--admin-primary);
opacity: 0.7;
}
.rp-table__perm-row {
border-top: 1px solid var(--admin-border);
transition: background var(--admin-duration-short);
}
.rp-table__perm-row:hover {
background: var(--admin-primary-light);
}
.rp-table__perm-label {
padding: var(--admin-space-sm) var(--admin-space-lg) var(--admin-space-sm) 1.6rem;
color: var(--admin-text);
font-size: var(--admin-fs-body-lg);
border-right: 1px solid var(--admin-border);
vertical-align: middle;
}
.rp-table__cell {
text-align: center;
vertical-align: middle;
padding: var(--admin-space-xs) 0;
border-left: 1px solid var(--admin-border);
position: relative;
}
.rp-table__cell--owner {
background: rgba(251, 191, 36, 0.04);
}
.rp-role-head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--admin-space-3xs);
padding: var(--admin-space) var(--admin-space-xs);
}
.rp-role-head__name {
font-size: var(--admin-fs-body-lg);
font-weight: 700;
color: var(--admin-text);
line-height: 1.2;
}
.rp-role-head__code {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
font-family: "Poppins", sans-serif;
background: var(--admin-grey-100);
padding: 0.1em 0.45em;
border-radius: var(--admin-radius-xs);
letter-spacing: 0.03em;
}
.rp-role-head__level {
font-size: var(--admin-fs-xs);
color: var(--admin-text-muted);
}
.rp-role-head__badge {
font-size: var(--admin-fs-xs);
padding: 0.15em 0.55em;
border-radius: var(--admin-radius-full);
font-weight: 700;
letter-spacing: 0.03em;
display: flex;
align-items: center;
gap: var(--admin-space-3xs);
margin-top: var(--admin-space-3xs);
}
.rp-role-head__badge--owner {
background: var(--admin-warn-bg);
color: var(--admin-warn-text);
border: 1px solid var(--admin-warn-border);
}
.rp-checkbox {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
width: 3.2rem;
height: 3.2rem;
border-radius: var(--admin-radius);
transition: background var(--admin-duration-short), transform 0.1s;
}
.rp-checkbox__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.rp-checkbox__box {
width: 2.2rem;
height: 2.2rem;
border-radius: var(--admin-radius-sm);
border: 2px solid var(--admin-border);
background: var(--admin-white);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--admin-duration) var(--admin-ease);
position: relative;
overflow: hidden;
}
.rp-checkbox__icon {
font-size: 1.1rem;
position: absolute;
transition: all var(--admin-duration) var(--admin-ease);
}
.rp-checkbox__icon--check {
color: var(--admin-white);
opacity: 0;
transform: scale(0.4);
}
.rp-checkbox__icon--x {
color: var(--admin-text-muted);
opacity: 0.35;
transform: scale(0.8);
}
.rp-checkbox.is-checked .rp-checkbox__box {
background: var(--admin-primary);
border-color: var(--admin-primary);
box-shadow: 0 2px 6px rgba(var(--admin-primary-rgb), 0.3);
}
.rp-checkbox.is-checked .rp-checkbox__icon--check {
opacity: 1;
transform: scale(1);
}
.rp-checkbox.is-checked .rp-checkbox__icon--x {
opacity: 0;
transform: scale(0.4);
}
.rp-checkbox.is-loading {
pointer-events: none;
opacity: 0.6;
}
.rp-checkbox--fixed {
cursor: default;
}
.rp-checkbox--fixed .rp-checkbox__box {
background: var(--admin-success-bg);
border-color: var(--admin-success-border);
}
.rp-checkbox--fixed .rp-checkbox__icon--check {
color: var(--admin-success);
opacity: 1;
transform: scale(1);
}
.rp-checkbox:not(.rp-checkbox--fixed):hover {
background: var(--admin-primary-light);
transform: scale(1.08);
}
.rp-checkbox:not(.rp-checkbox--fixed):active {
transform: scale(0.95);
}
.e-403 {
min-height: 70vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--admin-space-4xl) var(--admin-space-xl);
gap: var(--admin-space);
}
.e-403__graphic {
width: 12rem;
height: 12rem;
color: var(--admin-primary);
opacity: 0.6;
margin-bottom: var(--admin-space-xs);
}
.e-403__svg {
width: 100%;
height: 100%;
}
.e-403__num {
font-size: clamp(4.8rem, 8vw, 8rem);
font-weight: 900;
color: var(--admin-primary);
opacity: 0.15;
letter-spacing: -0.04em;
line-height: 1;
margin: -0.5rem 0;
}
.e-403__title {
font-size: clamp(2rem, 3vw, 2.8rem);
font-weight: 700;
color: var(--admin-text);
margin: 0;
}
.e-403__desc {
font-size: var(--admin-fs-body-lg);
color: var(--admin-text-muted);
line-height: 1.65;
max-width: 42rem;
margin: 0;
}
.e-403__actions {
display: flex;
gap: var(--admin-space-sm);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--admin-space-xs);
}
.e-403__foot {
font-size: var(--admin-fs-sm);
color: var(--admin-text-muted);
margin-top: var(--admin-space-xl);
}
.e-403__brand {
font-weight: 700;
letter-spacing: 0.04em;
}
.admin-role-perm {
margin-top: var(--admin-space-2xl);
}
.admin-role-perm__header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space);
}
.admin-role-perm__header-left {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
flex-wrap: wrap;
}
.admin-role-perm__title {
margin: 0;
font-size: var(--admin-fs-xl);
font-weight: 700;
color: var(--admin-text);
}
.admin-role-perm__owner-note {
padding: var(--admin-space-sm) var(--admin-space-lg);
background: var(--admin-warn-bg);
border: 1px solid var(--admin-warn-border);
border-radius: var(--admin-radius);
font-size: var(--admin-fs-body);
color: var(--admin-warn-text);
margin: 0;
}
.admin-role-perm__empty {
padding: var(--admin-space-2xl);
background: var(--admin-card-bg);
border: 1px dashed var(--admin-border);
border-radius: var(--admin-radius);
color: var(--admin-text-muted);
text-align: center;
font-size: var(--admin-fs-body);
margin: 0;
}
.admin-role-perm__empty a {
color: var(--admin-primary);
}
.rp-save-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.8rem;
height: 1.8rem;
padding: 0 var(--admin-space-xs);
border-radius: var(--admin-radius-full);
font-size: var(--admin-fs-xs);
font-weight: 700;
background: rgba(255, 255, 255, 0.3);
color: var(--admin-white);
margin-left: var(--admin-space-3xs);
line-height: 1;
}
.rp-crud-grid {
display: flex;
flex-direction: column;
gap: var(--admin-space-lg, 1.25rem);
}
.rp-crud-card {
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
overflow: hidden;
background: var(--admin-card-bg);
box-shadow: var(--admin-elevation-1);
}
.rp-crud-card__head {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 1rem 1.5rem;
background: var(--admin-grey-50);
border-bottom: 1px solid var(--admin-border);
font-size: var(--admin-fs-sm);
font-weight: 800;
color: var(--admin-text-secondary);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.rp-crud-card__head .fa-solid {
font-size: 1em;
color: var(--admin-primary);
opacity: 0.7;
}
.rp-crud-card__body {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
.rp-crud-card__body {
overflow-x: visible;
}
}
.rp-crud-table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
}
.rp-crud-table th, .rp-crud-table td {
border: none;
}
.rp-crud-table thead tr {
border-bottom: 1px solid var(--admin-border);
}
.rp-crud-table__th-feature {
text-align: left;
padding: 0.8rem 1.5rem 0.8rem 2rem;
font-size: var(--admin-fs-sm);
font-weight: 700;
color: var(--admin-text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
background: var(--admin-grey-50);
border-right: 1px solid var(--admin-border);
min-width: 200px;
}
.rp-crud-table__th-action {
text-align: center;
padding: 0.8rem 0.5rem;
font-size: var(--admin-fs-sm);
font-weight: 700;
color: var(--admin-text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
background: var(--admin-grey-50);
border-left: 1px solid var(--admin-border-light);
white-space: nowrap;
width: 96px;
min-width: 84px;
}
.rp-crud-table__row {
border-top: 1px solid var(--admin-border-light);
transition: background var(--admin-duration-short);
}
.rp-crud-table__row:hover {
background: var(--admin-primary-light);
}
.rp-crud-table__row:first-child {
border-top: none;
}
.rp-crud-table__feature {
padding: 1rem 1.5rem 1rem 2rem;
color: var(--admin-text);
font-size: var(--admin-fs-body-lg);
font-weight: 500;
border-right: 1px solid var(--admin-border);
vertical-align: middle;
}
.rp-crud-table__cell {
text-align: center;
vertical-align: middle;
padding: 0.6rem 0;
border-left: 1px solid var(--admin-border-light);
}
.rp-crud-table__empty {
display: inline-block;
font-size: 1.1rem;
line-height: 1;
color: var(--admin-text-muted);
opacity: 0.2;
user-select: none;
pointer-events: none;
}
@media (max-width: 768px) {
.rp-crud-table {
display: block;
}
.rp-crud-table thead {
display: none;
}
.rp-crud-table tbody {
display: block;
}
.rp-crud-table__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.5rem;
padding: 0.85rem 1.25rem 0.75rem;
border-top: 1px solid var(--admin-border-light);
}
.rp-crud-table__row:first-child {
border-top: none;
}
.rp-crud-table__row:hover {
background: var(--admin-primary-light);
}
.rp-crud-table__feature {
flex: 1 1 100%;
padding: 0 0 0.5rem;
border-right: none;
font-size: var(--admin-fs-body-lg);
font-weight: 600;
color: var(--admin-text);
}
.rp-crud-table__cell {
flex: 0 0 auto;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 0.25rem 0.4rem;
border-left: none;
}
.rp-crud-table__cell::before {
content: attr(data-label);
font-size: 0.9rem;
color: var(--admin-text-muted);
letter-spacing: 0.04em;
font-weight: 600;
text-transform: uppercase;
}
.rp-crud-table__cell--empty {
display: none;
}
}
.admin-map-preview {
margin-bottom: var(--admin-space-2xl);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-md);
overflow: hidden;
}
.admin-map-preview__search-bar {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm);
padding: var(--admin-space-md);
background: var(--admin-bg-subtle);
border-bottom: 1px solid var(--admin-border-light);
}
.admin-map-preview__radio-group {
display: flex;
gap: var(--admin-space-lg);
align-items: center;
flex-wrap: wrap;
}
.admin-map-preview__radio-group label {
display: flex;
align-items: center;
gap: var(--admin-space-xs);
font-size: var(--admin-fs-body-sm);
cursor: pointer;
}
.admin-map-preview__input-row {
display: flex;
gap: var(--admin-space-sm);
align-items: center;
}
.admin-map-preview__input-row input {
flex: 1;
min-width: 0;
}
.admin-map-preview__map {
display: block;
width: 100%;
height: 380px;
background: var(--admin-bg-subtle);
}
.admin-map-preview__apply-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space-md);
background: var(--admin-bg-subtle);
border-top: 1px solid var(--admin-border-light);
flex-wrap: wrap;
}
.admin-map-preview__result-label {
flex: 1;
min-width: 0;
font-size: var(--admin-fs-body-sm);
color: var(--admin-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-map-preview__no-key {
padding: var(--admin-space-lg) var(--admin-space-md);
font-size: var(--admin-fs-body-sm);
color: var(--admin-text-muted);
text-align: center;
background: var(--admin-bg-subtle);
}
.admin-map-preview__no-key a {
color: var(--admin-primary);
text-decoration: underline;
}
/* ──────────────────────────────────────────────────────────────
페이지·메뉴 관리 — 드래그 트리 + 자유 블록 빌더
────────────────────────────────────────────────────────────── */
/* 트리 ------------------------------------------------------------ */
.admin-page-tree {
margin-top: var(--admin-space-lg);
}
.admin-page-tree__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--admin-space);
padding: var(--admin-space-xl) var(--admin-space-lg);
background: var(--admin-grey-50);
border: 1px dashed var(--admin-border-light);
border-radius: var(--admin-radius-lg, 8px);
text-align: center;
}
.admin-page-tree__empty-text {
color: var(--admin-grey-500);
font-size: 14px;
}
.admin-page-tree__list, .admin-page-tree__children {
list-style: none;
margin: 0;
padding: 0;
}
.admin-page-tree {
/* 하위 목록 들여쓰기 + 가이드 라인 */
}
.admin-page-tree__children {
margin-left: var(--admin-space-lg);
padding-left: var(--admin-space);
border-left: 2px solid var(--admin-border-light);
min-height: 6px; /* 빈 하위에도 드롭 가능하도록 최소 높이 */
}
.admin-page-tree__item {
margin: var(--admin-space-sm) 0;
}
.admin-page-tree__row {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
padding: var(--admin-space-sm) var(--admin-space);
background: var(--admin-surface, #fff);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius, 6px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-page-tree__row:hover {
border-color: var(--admin-border);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.admin-page-tree__row--hidden {
opacity: 0.6;
}
.admin-page-tree__handle {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
color: var(--admin-grey-400);
background: transparent;
border: none;
cursor: grab;
border-radius: var(--admin-radius-sm, 4px);
}
.admin-page-tree__handle:hover {
color: var(--admin-grey-700);
background: var(--admin-grey-100);
}
.admin-page-tree__handle:active {
cursor: grabbing;
}
.admin-page-tree__title {
flex: 1 1 auto;
min-width: 0;
font-size: 14px;
font-weight: 600;
color: var(--admin-grey-900, #1a1a1a);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-page-tree__untitled {
color: var(--admin-grey-400);
font-weight: 400;
font-style: italic;
}
.admin-page-tree__meta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--admin-space-sm);
}
.admin-page-tree__slug {
font-size: 12px;
color: var(--admin-grey-500);
background: var(--admin-grey-50);
padding: 2px 6px;
border-radius: var(--admin-radius-sm, 4px);
}
.admin-page-tree__actions {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--admin-space-sm);
}
.admin-page-tree {
/* SortableJS 드래그 상태 */
}
.admin-page-tree__ghost > .admin-page-tree__row {
opacity: 0.5;
border-style: dashed;
border-color: var(--admin-primary, #2563eb);
}
.admin-page-tree__drag > .admin-page-tree__row {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
/* 블록 빌더 ------------------------------------------------------- */
.admin-page-blocks {
margin-top: var(--admin-space);
}
.admin-page-blocks__canvas {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-page-blocks__empty {
padding: var(--admin-space-xl) var(--admin-space-lg);
margin-bottom: var(--admin-space);
color: var(--admin-grey-500);
background: var(--admin-grey-50);
border: 1px dashed var(--admin-border-light);
border-radius: var(--admin-radius, 6px);
text-align: center;
font-size: 13px;
}
.admin-page-blocks__add {
display: flex;
flex-wrap: wrap;
gap: var(--admin-space-sm);
margin-top: var(--admin-space);
}
.admin-page-block {
position: relative;
padding: var(--admin-space);
background: var(--admin-surface, #fff);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-lg, 8px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.admin-page-block--ghost {
opacity: 0.5;
border-style: dashed;
border-color: var(--admin-primary, #2563eb);
}
.admin-page-block__head {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space);
padding-bottom: var(--admin-space-sm);
border-bottom: 1px dashed var(--admin-border-light);
}
.admin-page-block__handle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
color: var(--admin-grey-400);
background: transparent;
border: none;
cursor: grab;
border-radius: var(--admin-radius-sm, 4px);
}
.admin-page-block__handle:hover {
color: var(--admin-grey-700);
background: var(--admin-grey-100);
}
.admin-page-block__type-badge {
flex: 1 1 auto;
font-size: 12px;
font-weight: 600;
color: var(--admin-grey-700);
}
.admin-page-block__body {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-page-block__locale {
/* 언어별 입력 묶음 */
}
.admin-page-block__file-hint {
margin-top: var(--admin-space-sm);
font-size: 12px;
color: var(--admin-grey-500);
}
/* 추가/수정 모달 ------------------------------------------------- */
.site-page-modal.app-modal-box {
width: min(96vw, 56rem);
max-width: 56rem;
}
.admin-page-modal__delete-row {
margin-top: var(--admin-space);
padding-top: var(--admin-space);
border-top: 1px dashed var(--admin-border-light);
text-align: right;
}
/* ============================================================
CMS 관리자 (메뉴/페이지/섹션/요소) — 기능 위주 레이아웃.
트리(드래그)는 .admin-page-tree(_site-pages.scss) 스타일 재사용.
============================================================ */
/* 공용 — 모달 폼 삭제 줄 */
.admin-page-modal__delete-row {
margin-top: 1.6rem;
padding-top: 1.2rem;
border-top: 1px solid var(--admin-border, #e5e7eb);
text-align: right;
}
/* ── 메뉴 관리: 좌 그룹 / 우 트리 ── */
.admin-cms-menus__layout {
display: grid;
grid-template-columns: 28rem 1fr;
gap: 2rem;
align-items: start;
}
@media (max-width: 900px) {
.admin-cms-menus__layout {
grid-template-columns: 1fr;
}
}
.admin-cms-menus__groups {
padding: 1.6rem;
background: var(--admin-surface, #fff);
border: 1px solid var(--admin-border, #e5e7eb);
border-radius: 0.8rem;
}
.admin-cms-menus__group-list {
list-style: none;
margin: 0 0 1.2rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.admin-cms-menus__group {
border: 1px solid var(--admin-border, #e5e7eb);
border-radius: 0.6rem;
overflow: hidden;
}
.admin-cms-menus__group.is-active {
border-color: var(--admin-primary, #2563eb);
box-shadow: 0 0 0 1px var(--admin-primary, #2563eb) inset;
}
.admin-cms-menus__group-link {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.9rem 1rem;
text-decoration: none;
color: inherit;
}
.admin-cms-menus__group-link:hover {
background: var(--admin-surface-2, #f8fafc);
}
.admin-cms-menus__group-name {
font-weight: 600;
}
.admin-cms-menus__group-code {
margin-left: auto;
font-size: 1.2rem;
color: var(--admin-text-muted, #6b7280);
}
.admin-cms-menus__group-edit, .admin-cms-menus__group-new {
padding: 0 1rem 1rem;
}
.admin-cms-menus__group-edit > summary, .admin-cms-menus__group-new > summary {
cursor: pointer;
margin: 0.6rem 0;
display: inline-flex;
}
.admin-cms-menus__tree-area {
min-width: 0;
padding: 1.6rem;
background: var(--admin-surface, #fff);
border: 1px solid var(--admin-border, #e5e7eb);
border-radius: 0.8rem;
}
.admin-cms-menus__tree-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.2rem;
}
.admin-cms-menus__empty {
padding: 3rem;
text-align: center;
color: var(--admin-text-muted, #6b7280);
}
/* ── 페이지 편집: 넓은 전체화면 ── */
.admin-page--wide {
max-width: none;
}
.admin-cms-editor__panel {
margin-top: 1.6rem;
padding: 2rem;
background: var(--admin-surface, #fff);
border: 1px solid var(--admin-border, #e5e7eb);
border-radius: 0.8rem;
}
/* ── 콘텐츠 탭: 섹션/요소 ── */
.admin-cms-content__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.4rem;
}
.admin-cms-content__hint {
color: var(--admin-text-muted, #6b7280);
margin: 0;
}
.admin-cms-sections {
display: flex;
flex-direction: column;
gap: 1rem;
}
.admin-cms-section {
border: 1px solid var(--admin-border, #e5e7eb);
border-radius: 0.8rem;
background: var(--admin-surface, #fff);
}
.admin-cms-section__summary {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1rem 1.2rem;
cursor: pointer;
list-style: none;
}
.admin-cms-section__summary::-webkit-details-marker {
display: none;
}
.admin-cms-section__title {
font-weight: 600;
}
.admin-cms-section__meta {
margin-left: auto;
display: inline-flex;
gap: 0.4rem;
align-items: center;
}
.admin-cms-section__body {
padding: 1.2rem;
border-top: 1px solid var(--admin-border, #e5e7eb);
}
.admin-cms-section__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin-bottom: 1rem;
}
.admin-cms-section__add-el > summary {
cursor: pointer;
display: inline-flex;
}
.admin-cms-section__type-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
gap: 0.5rem;
margin-top: 0.8rem;
padding: 1rem;
background: var(--admin-surface-2, #f8fafc);
border-radius: 0.6rem;
}
.admin-cms-section__empty {
color: var(--admin-text-muted, #6b7280);
margin: 0.4rem 0;
}
.admin-cms-elements {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.admin-cms-element {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.7rem 1rem;
border: 1px solid var(--admin-border, #e5e7eb);
border-radius: 0.6rem;
background: var(--admin-surface-2, #f8fafc);
}
.admin-cms-element__title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-cms-element__actions {
margin-left: auto;
display: inline-flex;
gap: 0.4rem;
align-items: center;
}
.admin-form-inline {
display: inline;
}
/* 메뉴 항목 폼 — 새 페이지 자동 생성.
"메뉴 설정"과 명확히 구분되는 틴트 패널 + 좌측 액센트(= 새로 만드는 영역 신호). */
.cms-newpage {
margin: 1rem 0; /* 10px */
padding: 1.2rem; /* 12px */
background: var(--admin-primary-light, #eff6ff); /* blue-50 틴트 */
border: 1px solid var(--admin-primary-border, #dbeafe);
border-left: 3px solid var(--admin-primary, #2563eb); /* 좌측 액센트 */
border-radius: 0.6rem; /* 6px */
/* 토글(component checkbox)이 패널 헤더처럼 보이도록 컴포넌트 래퍼 여백 제거 */
}
.cms-newpage > .admin-form__block {
margin: 0;
}
.cms-newpage__fields {
display: block;
}
.cms-newpage__sections {
border: 0;
margin: 0.6rem 0 0;
padding: 0;
}
/* 메뉴 항목 폼 — 링크 유형별 조건부 영역. 루트 data-link-type 은 CmsMenuItemForm.ts 가
select[name="link_type"] 값으로 설정한다(SlimSelect 래핑돼도 안전). */
.cms-item-form__when {
display: none;
}
.cms-item-form[data-link-type=view] .cms-item-form__when[data-link~=view],
.cms-item-form[data-link-type=page] .cms-item-form__when[data-link~=page],
.cms-item-form[data-link-type=external] .cms-item-form__when[data-link~=external],
.cms-item-form[data-link-type=anchor] .cms-item-form__when[data-link~=anchor],
.cms-item-form[data-link-type=redirect] .cms-item-form__when[data-link~=redirect],
.cms-item-form[data-link-type=group] .cms-item-form__when[data-link~=group],
.cms-item-form[data-link-type=none] .cms-item-form__when[data-link~=none] {
display: block;
}
/* 파일 연결 — resources/views/ 기준 경로 입력 + 자동완성 드롭다운 */
.cms-viewfile {
position: relative;
}
.cms-viewfile__row {
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-1, 0.4rem);
}
.cms-viewfile__prefix {
flex: 0 0 auto;
padding: var(--spacing-1, 0.4rem) var(--spacing-2, 0.8rem);
background: var(--admin-surface-2, #f3f4f6);
border-radius: var(--radius-sm, 0.4rem);
font-family: "Poppins", sans-serif;
color: var(--admin-text-muted, #6b7280);
white-space: nowrap;
}
.cms-viewfile__input {
flex: 1 1 auto;
font-family: var(--font-mono, monospace);
}
.cms-viewfile__dropdown {
position: absolute;
z-index: 20;
top: calc(100% + 0.2rem);
left: 0;
right: 0;
max-height: 24rem;
overflow-y: auto;
margin: 0;
padding: 0.4rem;
list-style: none;
background: var(--admin-surface, #fff);
border: 1px solid var(--admin-border, #e5e7eb);
border-radius: var(--radius-sm, 0.4rem);
box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.12);
}
.cms-viewfile__dropdown[hidden] {
display: none;
}
.cms-viewfile__option {
padding: var(--spacing-1, 0.4rem) var(--spacing-2, 0.8rem);
border-radius: var(--radius-sm, 0.4rem);
font-family: "Poppins", sans-serif;
cursor: pointer;
}
.cms-viewfile__option:hover,
.cms-viewfile__option--active {
background: var(--admin-surface-2, #f3f4f6);
}
.cms-viewfile__option--empty {
color: var(--admin-text-muted, #6b7280);
cursor: default;
}
.cms-viewfile__url {
font-family: var(--font-mono, monospace);
}
/* 리다이렉트 대상 메뉴 — select 대신 계층 구조 모달 선택기 */
.cms-redirect-picker {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.cms-redirect-picker__hidden {
display: none;
}
.cms-redirect-picker__control {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
}
@media (max-width: 640px) {
.cms-redirect-picker__control {
align-items: stretch;
flex-direction: column;
}
}
.cms-redirect-picker__trigger {
flex: 1 1 auto;
min-width: 0;
min-height: var(--admin-size-input-height);
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--admin-space);
padding: 0 var(--admin-space-lg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
background: var(--admin-white);
color: var(--admin-text);
font-family: inherit;
font-size: var(--admin-fs-body-lg);
text-align: left;
cursor: pointer;
transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.cms-redirect-picker__trigger:hover {
border-color: var(--admin-border-strong);
background: var(--admin-surface-2);
}
.cms-redirect-picker__trigger:focus-visible {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.cms-redirect-picker__current {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cms-redirect-picker__trigger-icon {
flex: 0 0 auto;
color: var(--admin-primary);
}
.cms-redirect-picker__clear {
flex: 0 0 auto;
}
.cms-redirect-picker__panel {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.cms-redirect-picker__search-row {
position: sticky;
top: 0;
z-index: 1;
background: var(--admin-modal-box-bg);
padding-bottom: var(--admin-space-xs);
}
.cms-redirect-picker__search {
width: 100%;
}
.cms-redirect-picker__tree, .cms-redirect-picker__children {
list-style: none;
margin: 0;
padding: 0;
}
.cms-redirect-picker__tree {
max-height: min(62vh, 48rem);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.cms-redirect-picker__children {
margin-top: var(--admin-space-xs);
padding-left: var(--admin-space-xl);
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
border-left: 1px solid var(--admin-border-light);
}
.cms-redirect-picker__node[hidden] {
display: none;
}
.cms-redirect-picker__option {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--admin-space);
padding: var(--admin-space-sm) var(--admin-space);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
background: var(--admin-white);
color: var(--admin-text);
font-family: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.cms-redirect-picker__option:hover:not(:disabled), .cms-redirect-picker__option:focus-visible:not(:disabled) {
border-color: var(--admin-border-focus);
background: var(--admin-primary-light);
outline: none;
}
.cms-redirect-picker__option.is-selected {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
}
.cms-redirect-picker__option:disabled {
cursor: not-allowed;
color: var(--admin-text-muted);
background: var(--admin-surface-2);
}
.cms-redirect-picker__option-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs);
}
.cms-redirect-picker__option-title {
font-weight: 600;
}
.cms-redirect-picker__option-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-2xs);
}
.cms-redirect-picker__option-href, .cms-redirect-picker__option-sub {
min-width: 0;
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cms-redirect-picker__option-href--muted {
color: var(--admin-text-muted);
}
.cms-redirect-picker__check {
flex: 0 0 auto;
color: var(--admin-primary);
}
.cms-redirect-picker__empty {
margin: 0;
padding: var(--admin-space-xl);
border: 1px dashed var(--admin-border);
border-radius: var(--admin-radius);
color: var(--admin-text-muted);
text-align: center;
}
/* ============================================================
통합 CMS 사이트 빌더 — 좌 트리 · 중앙 캔버스 · 설정 패널 drawer
admin-page-tree / admin-cms-* 카드 스타일은 _site-pages.scss·_cms.scss 재사용.
루트 font-size 62.5% → 1rem = 10px (resources/scss/admin/base/_init.scss:13).
============================================================ */
/* 기본 콘텐츠 폭 제한 탈출(Work 캔버스 패턴) */
.admin__content:has(> .admin-cms-builder) {
max-width: none;
}
.admin-cms-builder {
--admin-cms-builder-surface: var(--admin-surface);
--admin-cms-builder-surface-muted: var(--admin-bg-soft);
--admin-cms-builder-border: var(--admin-border);
--admin-cms-builder-border-strong: var(--admin-border-strong);
--admin-cms-builder-text: var(--admin-text);
--admin-cms-builder-text-muted: var(--admin-text-muted);
display: flex;
flex-direction: column;
gap: 1.2rem; /* 12px */
height: calc(100vh - 9rem);
min-height: 56rem;
color: var(--admin-cms-builder-text);
/* ── 상단 툴바 ─────────────────────────────────────────── */
}
.admin-cms-builder__toolbar {
display: flex;
align-items: stretch;
flex-direction: column;
gap: 1.2rem; /* 12px */
padding: 1rem 1.4rem; /* 10px 14px */
background: var(--admin-surface);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-md);
box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(0, 0, 0, 0.04));
position: sticky;
top: 0;
z-index: 5;
}
.admin-cms-builder__toolbar-main {
display: flex;
align-items: center;
gap: 1.2rem;
flex-wrap: wrap;
width: 100%;
}
.admin-cms-builder__toolbar-title {
display: flex;
align-items: center;
gap: 0.8rem; /* 8px */
font-size: 1.6rem; /* 16px */
}
.admin-cms-builder__toolbar-title > strong {
letter-spacing: -0.01em;
}
.admin-cms-builder__toolbar-lang {
display: flex;
align-items: center;
gap: 0.4rem;
margin-left: auto;
}
.admin-cms-builder__toolbar-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.admin-cms-builder__toolbar-actions .is-disabled {
pointer-events: auto;
opacity: 0.55;
cursor: not-allowed;
}
.admin-cms-builder__lang {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--admin-space-2xs, 0.4rem);
min-width: 3.4rem; /* 34px */
padding: 0.4rem 0.9rem; /* 4px 9px */
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.5rem);
background: var(--admin-surface);
color: var(--admin-text-secondary);
cursor: pointer;
font-weight: 600;
transition: background var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease, color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-builder__lang:hover {
border-color: var(--admin-primary);
color: var(--admin-primary-text);
}
.admin-cms-builder__lang.is-active {
background: var(--admin-primary);
color: var(--admin-on-primary);
border-color: var(--admin-primary);
}
.admin-cms-builder {
/* ── 3패널 그리드 ──────────────────────────────────────── */
}
.admin-cms-builder__body {
display: grid;
grid-template-columns: minmax(38rem, 46rem) minmax(0, 1fr);
gap: 1.2rem; /* 12px */
flex: 1;
min-height: 0;
min-width: 0;
}
@media (max-width: 1280px) {
.admin-cms-builder__body {
grid-template-columns: minmax(34rem, 40rem) minmax(0, 1fr);
}
}
@media (max-width: 960px) {
.admin-cms-builder__body {
grid-template-columns: minmax(0, 1fr);
}
}
.admin-cms-builder__left, .admin-cms-builder__center {
background: var(--admin-surface);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-md);
box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(0, 0, 0, 0.04));
overflow: auto;
min-height: 0;
min-width: 0;
}
.admin-cms-builder {
/* ── 좌측 패널 (단일 메뉴 트리 + 미연결 페이지) ──────────── */
}
.admin-cms-builder__left {
padding: 1.4rem;
}
.admin-cms-builder { /* 14px */ }
.admin-cms-builder__left-head {
margin-bottom: 1rem;
}
.admin-cms-builder__left-actions {
margin-bottom: 1.2rem;
}
.admin-cms-builder__group-row {
display: flex;
align-items: center;
gap: 0.5rem; /* 5px */
margin-top: 0.5rem; /* 5px */
}
.admin-cms-builder__group-row > select {
flex: 1;
min-width: 0;
}
.admin-cms-builder__left-actions > .admin-btn {
width: 100%;
justify-content: center;
}
.admin-cms-builder__tree-search {
margin-bottom: 1rem;
}
.admin-cms-builder { /* 10px */ }
.admin-cms-builder__tree-host {
min-height: 0;
}
.admin-cms-builder {
/* ── 미연결 페이지 (트리 하단) ─────────────────────────── */
}
.admin-cms-builder__unlinked {
margin-top: 1.4rem; /* 14px */
padding-top: 1.2rem; /* 12px */
border-top: 1px dashed var(--admin-border-strong);
}
.admin-cms-builder__unlinked-box {
border-radius: var(--admin-radius-sm, 0.6rem);
}
.admin-cms-builder__unlinked-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
padding: 0.6rem 0.4rem; /* 6px 4px */
cursor: pointer;
list-style: none;
font-weight: 600;
color: var(--admin-text-secondary);
}
.admin-cms-builder__unlinked-head::-webkit-details-marker {
display: none;
}
.admin-cms-builder__unlinked-head .admin-badge {
font-weight: 600;
}
.admin-cms-builder__unlinked-chevron {
transition: transform var(--admin-duration-short, 0.15s) ease;
color: var(--admin-text-muted);
}
.admin-cms-builder__unlinked-box[open] .admin-cms-builder__unlinked-chevron {
transform: rotate(180deg);
}
.admin-cms-builder__unlinked-body {
padding: 0.6rem 0 0;
}
.admin-cms-builder__unlinked-empty {
color: var(--admin-text-muted);
font-size: 1.2rem;
margin: 0.4rem 0.4rem 0.8rem;
}
.admin-cms-builder__unlinked-list {
list-style: none;
margin: 0 0 0.8rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.admin-cms-builder__unlinked-item {
min-width: 0;
}
.admin-cms-builder__unlinked-row {
width: 100%;
display: flex;
align-items: center;
gap: 0.6rem; /* 6px */
padding: 0.7rem 0.9rem; /* 7px 9px */
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-surface);
cursor: pointer;
text-align: left;
transition: border-color var(--admin-duration-short, 0.12s) ease, background var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-builder__unlinked-row:hover {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
}
.admin-cms-builder__unlinked-row--page {
position: relative;
padding-left: calc(var(--admin-space-lg, 1.2rem) + var(--admin-space-md, 1rem));
}
.admin-cms-builder__unlinked-row--page::before {
content: "\f15c";
position: absolute;
left: var(--admin-space-sm, 0.8rem);
top: 50%;
transform: translateY(-50%);
font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro";
font-weight: 900;
color: var(--admin-primary-text);
}
.admin-cms-builder__unlinked-row--page::after {
content: "\f061";
font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro";
font-weight: 900;
color: var(--admin-text-placeholder);
transition: color var(--admin-duration-short, 0.12s) ease, transform var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-builder__unlinked-row--page:hover::after {
color: var(--admin-primary);
transform: translateX(0.2rem);
}
.admin-cms-builder__unlinked-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.admin-cms-builder__unlinked-add {
width: 100%;
justify-content: center;
}
.admin-cms-builder {
/* ── 중앙 / 우측 ───────────────────────────────────────── */
}
.admin-cms-builder__center {
padding: 1.8rem; /* 18px */
min-width: 0;
}
.admin-cms-builder__right {
position: fixed;
top: 0;
right: 0;
z-index: 80;
display: flex;
flex-direction: column;
width: min(48rem, 100vw - 2.4rem);
height: 100vh;
padding: 0;
overflow: hidden;
background: var(--admin-surface);
border-left: 1px solid var(--admin-border);
box-shadow: -1.2rem 0 3.2rem rgba(15, 23, 42, 0.18);
opacity: 0;
transform: translateX(2.4rem);
transition: opacity var(--admin-duration-base) ease, transform var(--admin-duration-base) ease;
will-change: opacity, transform;
}
.admin-cms-builder__right.is-open, .admin-cms-builder__right.is-opening {
opacity: 1;
transform: translateX(0);
}
.admin-cms-builder__right.is-closing {
opacity: 0;
transform: translateX(2.4rem);
}
.admin-cms-builder__right[hidden], .admin-cms-builder__drawer-backdrop[hidden] {
display: none;
}
.admin-cms-builder__drawer-backdrop {
position: fixed;
inset: 0;
z-index: 79;
background: rgba(15, 23, 42, 0.24);
opacity: 0;
transition: opacity var(--admin-duration-base) ease;
}
.admin-cms-builder__drawer-backdrop.is-open, .admin-cms-builder__drawer-backdrop.is-opening {
opacity: 1;
}
.admin-cms-builder__drawer-backdrop.is-closing {
opacity: 0;
}
.admin-cms-builder__drawer-close {
width: 2.8rem;
height: 2.8rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
}
.admin-cms-builder__inspector-head {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1.2rem 1.4rem; /* 12px 14px */
border-bottom: 1px solid var(--admin-border);
font-size: 1.4rem; /* 14px */
font-weight: 600;
background: var(--admin-bg-soft);
}
.admin-cms-builder__inspector-body {
padding: 1.4rem;
overflow: auto;
flex: 1;
min-height: 0;
}
.admin-cms-builder__inspector-foot {
position: sticky;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between; /* 삭제 좌 · 저장 우 */
gap: 0.8rem; /* 8px */
padding: 1.1rem 1.4rem; /* 11px 14px */
border-top: 1px solid var(--admin-border);
background: var(--admin-surface); /* 불투명 — 본문이 푸터 아래로 스크롤 */
}
.admin-cms-builder {
/* ── 고객용 선택 기반 UX override ─────────────────────── */
}
.admin-cms-builder__save-status {
display: inline-flex;
align-items: center;
min-height: 2.4rem;
padding: 0 var(--admin-space-xs, 0.6rem);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-full, 99rem);
color: var(--admin-text-secondary);
background: var(--admin-bg-soft);
font-size: var(--admin-fs-xs, 1.2rem);
font-weight: 700;
}
.admin-cms-builder__save-status[data-cms-save-state=saving], .admin-cms-builder__save-status[data-cms-save-state=dirty] {
color: var(--admin-warning-text, #92400e);
background: var(--admin-warning-bg, #fff7ed);
border-color: var(--admin-warning-border, #fed7aa);
}
.admin-cms-builder__save-status[data-cms-save-state=saved] {
color: var(--admin-success-text, #166534);
background: var(--admin-success-bg, #ecfdf3);
border-color: var(--admin-success-border, #bbf7d0);
}
.admin-cms-builder__save-status[data-cms-save-state=failed], .admin-cms-builder__save-status[data-cms-save-state=offline] {
color: var(--admin-danger);
background: var(--admin-danger-bg);
border-color: var(--admin-danger-border, var(--admin-danger));
}
.admin-cms-builder__device-toggle {
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs, 0.4rem);
padding: var(--admin-space-2xs, 0.4rem);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-bg-soft);
}
.admin-cms-builder__device {
width: 2.8rem;
height: 2.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid transparent;
border-radius: var(--admin-radius-xs, 0.4rem);
background: transparent;
color: var(--admin-text-secondary);
cursor: pointer;
}
.admin-cms-builder__device.is-active, .admin-cms-builder__device:hover {
color: var(--admin-primary-text);
border-color: var(--admin-primary-border);
background: var(--admin-surface);
}
.admin-cms-builder__body {
grid-template-columns: minmax(30rem, 36rem) minmax(0, 1fr) minmax(32rem, 38rem);
}
@media (max-width: 1280px) {
.admin-cms-builder__body {
grid-template-columns: minmax(28rem, 34rem) minmax(0, 1fr) minmax(30rem, 34rem);
}
}
@media (max-width: 1180px) {
.admin-cms-builder__body {
grid-template-columns: minmax(28rem, 34rem) minmax(0, 1fr);
}
}
@media (max-width: 960px) {
.admin-cms-builder__body {
grid-template-columns: minmax(0, 1fr);
}
}
.admin-cms-builder__left-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--admin-space-2xs, 0.4rem);
padding: var(--admin-space-2xs, 0.4rem);
margin-bottom: var(--admin-space-sm, 0.8rem);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-bg-soft);
}
.admin-cms-builder__left-tab {
min-height: 3.2rem;
border: 0;
border-radius: var(--admin-radius-xs, 0.4rem);
background: transparent;
color: var(--admin-text-secondary);
cursor: pointer;
font-weight: 700;
}
.admin-cms-builder__left-tab.is-active {
color: var(--admin-primary-text);
background: var(--admin-surface);
box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.admin-cms-builder__left-panel[hidden] {
display: none;
}
.admin-cms-builder__layer-head {
display: grid;
gap: var(--admin-space-2xs, 0.4rem);
margin-bottom: var(--admin-space-sm, 0.8rem);
}
.admin-cms-builder__layer-head > strong {
font-size: var(--admin-fs-sm, 1.3rem);
}
.admin-cms-builder__layer-head > span {
color: var(--admin-text-muted);
font-size: var(--admin-fs-xs, 1.2rem);
}
.admin-cms-builder__pages-head {
display: flex;
align-items: center;
gap: var(--admin-space-xs, 0.6rem);
margin-bottom: var(--admin-space-sm, 0.8rem);
}
.admin-cms-builder__page-rows {
display: grid;
gap: var(--admin-space-xs, 0.6rem);
margin: 0;
padding: 0;
list-style: none;
}
.admin-cms-builder__page-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-builder__page-row {
min-width: 0;
display: flex;
align-items: center;
gap: var(--admin-space-2xs, 0.4rem);
padding: var(--admin-space-xs, 0.6rem) var(--admin-space-sm, 0.8rem);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-surface);
color: var(--admin-text);
cursor: pointer;
text-align: left;
}
.admin-cms-builder__page-row:hover {
border-color: var(--admin-primary-border);
background: var(--admin-primary-light);
}
.admin-cms-builder__page-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
}
.admin-cms-builder__page-more {
width: 2.8rem;
height: 2.8rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.admin-cms-builder__right {
position: relative;
top: auto;
right: auto;
z-index: 1;
width: auto;
height: auto;
min-height: 0;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-md);
box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(0, 0, 0, 0.04));
opacity: 1;
transform: none;
will-change: auto;
}
@media (max-width: 1180px) {
.admin-cms-builder__right {
position: fixed;
top: 0;
right: 0;
z-index: 80;
width: min(48rem, 100vw - 2.4rem);
height: 100vh;
border-radius: 0;
border-width: 0 0 0 1px;
box-shadow: -1.2rem 0 3.2rem rgba(15, 23, 42, 0.18);
opacity: 0;
transform: translateX(2.4rem);
}
.admin-cms-builder__right.is-open, .admin-cms-builder__right.is-opening {
opacity: 1;
transform: translateX(0);
}
.admin-cms-builder__right.is-closing {
opacity: 0;
transform: translateX(2.4rem);
}
}
.admin-cms-builder__foot-left {
display: flex;
align-items: center;
}
.admin-cms-builder__foot-right {
display: flex;
align-items: center;
gap: 0.8rem;
}
.admin-cms-builder { /* 8px */ }
.admin-cms-builder [data-cms-save-loader] {
display: none;
}
.admin-cms-builder {
/* ── 빈 상태 ───────────────────────────────────────────── */
}
.admin-cms-builder__empty {
color: var(--admin-text-muted);
padding: 1.4rem;
text-align: center;
}
.admin-cms-builder__empty--center {
display: flex;
flex-direction: column;
gap: 0.8rem;
justify-content: center;
align-items: center;
height: 100%;
min-height: 24rem;
padding: 2.4rem;
border: 1px dashed var(--admin-border-strong);
border-radius: var(--admin-radius-md);
background: var(--admin-bg-soft);
}
.admin-cms-builder__empty--center::before {
content: "\f15c"; /* fa file-lines */
font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro";
font-weight: 900;
font-size: 3.2rem; /* 32px */
color: var(--admin-border-strong);
margin-bottom: 0.4rem;
}
.admin-cms-builder__tree-title {
background: none;
border: 0;
cursor: pointer;
text-align: left;
}
.admin-cms-builder__tree {
margin-top: 0;
}
.admin-cms-builder__tree .admin-page-tree__row {
gap: var(--admin-space-xs, 0.6rem);
padding: var(--admin-space-sm, 0.8rem) var(--admin-space-sm, 0.8rem);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-surface);
transition: background var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-builder__tree .admin-page-tree__row:hover {
border-color: var(--admin-border-strong);
background: var(--admin-bg-soft);
box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.06));
}
.admin-cms-builder__tree .admin-page-tree__row--page:hover {
border-color: var(--admin-primary-border);
background: var(--admin-primary-light);
box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(37, 99, 235, 0.12));
}
.admin-cms-builder__tree .admin-page-tree__title {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--admin-space-2xs, 0.4rem);
overflow: hidden;
text-align: left;
}
.admin-cms-builder__tree .admin-page-tree__title-main {
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs, 0.4rem);
max-width: 100%;
min-width: 0;
}
.admin-cms-builder__tree .admin-page-tree__title-main > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-cms-builder__tree .admin-page-tree__meta {
display: flex;
flex-wrap: wrap;
flex: 0 1 auto;
min-width: 0;
justify-content: flex-start;
gap: var(--admin-space-2xs, 0.4rem);
}
.admin-cms-builder__tree .admin-page-tree__type-badge {
max-width: 12rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-cms-builder__tree .admin-page-tree__slug {
max-width: 14rem;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--admin-text-muted);
font-size: var(--admin-fs-xs, 1.2rem);
}
.admin-cms-builder__tree .admin-page-tree__actions {
flex: none;
gap: var(--admin-space-2xs, 0.4rem);
}
.admin-cms-builder__tree .admin-page-tree__action-group {
display: inline-flex;
align-items: center;
gap: var(--admin-space-2xs, 0.4rem);
padding-right: var(--admin-space-2xs, 0.4rem);
border-right: 1px solid var(--admin-border);
}
.admin-cms-builder {
/* 트리 노드 액션 버튼(⚙ 메뉴설정 · + 하위추가) — 아이콘 정사각 */
}
.admin-cms-builder__node-btn {
width: 2.6rem; /* 26px */
height: 2.6rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem; /* 12px */
}
/* ── 트리 노드: 콘텐츠 진입(page) 강조 ─────────────────────── */
.admin-page-tree__title--page {
display: inline-flex;
align-items: center;
gap: 0.5rem; /* 5px */
font-weight: 600;
}
.admin-page-tree__title--page .admin-page-tree__title-icon {
color: var(--admin-primary-text);
font-size: 1.2rem; /* 12px */
flex: none;
}
/* 현재 중앙에서 편집 중인 페이지 노드 강조 */
.admin-page-tree__row.is-active-page {
position: relative;
background: var(--admin-primary-light);
border-radius: var(--admin-radius-sm, 0.6rem);
}
.admin-page-tree__row.is-active-page::before {
content: "";
position: absolute;
left: 0;
top: 0.4rem;
bottom: 0.4rem;
width: 0.3rem; /* 3px */
border-radius: 0 0.3rem 0.3rem 0;
background: var(--admin-primary);
}
.admin-page-tree__row.is-active-page .admin-page-tree__title {
color: var(--admin-primary-text);
}
.admin-page-tree__row.is-active-page .admin-page-tree__title-icon {
color: var(--admin-primary);
}
[data-cms-canvas-host] {
position: relative;
transition: opacity var(--admin-duration-base) ease, transform var(--admin-duration-base) ease;
}
[data-cms-canvas-host].is-loading-page {
cursor: wait;
}
[data-cms-canvas-host].is-page-changed {
animation: admin-cms-canvas-in 0.32s ease both;
}
.admin-cms-builder__canvas-loader {
position: absolute;
inset: 1.8rem;
z-index: 8;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
border: 1px dashed var(--admin-primary-border);
border-radius: var(--admin-radius-md);
background: rgba(248, 250, 252, 0.88);
color: var(--admin-primary-text);
font-size: var(--admin-fs-body-lg, 1.5rem);
font-weight: 700;
backdrop-filter: blur(0.2rem);
}
.admin-cms-builder__canvas-loader[hidden] {
display: none;
}
.admin-cms-builder__canvas-loader-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.2rem;
height: 3.2rem;
border-radius: var(--admin-radius-full, 99rem);
background: var(--admin-surface);
box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
}
@keyframes admin-cms-canvas-in {
from {
opacity: 0.72;
transform: translateY(0.4rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.admin-cms-builder__tree.is-dragging .admin-page-tree__children,
.admin-cms-builder__tree.is-dragging .admin-page-tree__list {
min-height: 1.8rem;
}
.admin-cms-builder__tree.is-drop-denied {
cursor: not-allowed;
}
.admin-cms-builder__tree .admin-page-tree__list.is-drop-target,
.admin-cms-builder__tree .admin-page-tree__children.is-drop-target {
outline: 1px dashed var(--admin-primary);
outline-offset: 0.3rem;
background: var(--admin-primary-light);
border-radius: var(--admin-radius-sm, 0.6rem);
}
.admin-cms-builder__tree .admin-page-tree__chosen > .admin-page-tree__row {
border-color: var(--admin-primary);
box-shadow: var(--admin-shadow-card, 0 3px 10px rgba(37, 99, 235, 0.18));
}
.admin-cms-builder__tree .admin-page-tree__ghost > .admin-page-tree__row {
position: relative;
opacity: 0.42;
background: var(--admin-primary-light);
border-color: var(--admin-primary);
}
.admin-cms-builder__tree .admin-page-tree__ghost > .admin-page-tree__row::after {
content: "";
position: absolute;
left: var(--admin-space-sm, 0.8rem);
right: var(--admin-space-sm, 0.8rem);
bottom: -0.4rem;
height: 0.2rem;
border-radius: var(--admin-radius-full, 99rem);
background: var(--admin-primary);
}
.admin-cms-builder__tree .admin-page-tree__drag > .admin-page-tree__row,
.admin-cms-builder__tree .admin-page-tree__fallback > .admin-page-tree__row {
cursor: grabbing;
transform: rotate(0.5deg);
}
.admin-cms-builder__tree.is-drop-denied .admin-page-tree__ghost > .admin-page-tree__row {
background: var(--admin-danger-bg);
border-color: var(--admin-danger);
}
/* 설정 패널 내부 페이지 탭 */
.admin-cms-inspector__tabs {
display: flex;
gap: 0.4rem;
margin-bottom: 1.2rem;
flex-wrap: wrap;
}
.admin-cms-inspector__tabs .admin-cms-inspector__tab {
padding: 0.5rem 1rem; /* 5px 10px */
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.5rem);
background: var(--admin-surface);
cursor: pointer;
transition: background var(--admin-duration-short, 0.12s) ease, color var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-inspector__tabs .admin-cms-inspector__tab:hover {
border-color: var(--admin-primary);
}
.admin-cms-inspector__tabs .admin-cms-inspector__tab.is-active {
background: var(--admin-primary);
color: var(--admin-on-primary);
border-color: var(--admin-primary);
}
/* ── 중앙 캔버스 ───────────────────────────────────────── */
.admin-cms-builder-canvas {
width: 100%;
max-width: 100%;
min-width: 0;
}
.admin-cms-builder-canvas__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.6rem;
padding: 1rem 1.2rem;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-surface);
box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.admin-cms-builder-canvas__head-info {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
}
.admin-cms-builder-canvas__title {
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--admin-text);
cursor: pointer;
font-size: 1.9rem; /* 19px */
font-weight: 800;
text-align: left;
}
.admin-cms-builder-canvas__title:hover, .admin-cms-builder-canvas__title:focus-visible {
color: var(--admin-primary-text);
outline: none;
}
.admin-cms-builder-canvas__slug {
color: var(--admin-text-muted);
background: var(--admin-bg-soft);
border-radius: var(--admin-radius-xs, 0.4rem);
padding: 0.1rem 0.6rem;
font-size: 1.3rem;
}
.admin-cms-builder-canvas__head-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.admin-cms-builder[data-cms-device-mode=tablet] .admin-cms-builder-canvas {
max-width: 82rem;
margin-inline: auto;
}
.admin-cms-builder[data-cms-device-mode=mobile] .admin-cms-builder-canvas {
max-width: 43rem;
margin-inline: auto;
}
/* ── 빌더 카드(섹션/요소) — admin-cms-* 와 동일 톤 ───────── */
.admin-cms-card {
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-md);
background: var(--admin-surface);
margin-bottom: 1.2rem; /* 12px */
transition: border-color var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-card.is-hidden {
opacity: 0.55;
}
.admin-cms-card--section {
padding: 0;
}
.admin-cms-card--section:hover {
border-color: var(--admin-border-strong);
box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.06));
}
.admin-cms-card--element {
display: flex;
align-items: center;
gap: 0.8rem; /* 8px */
padding: 0.8rem 1rem; /* 8px 10px */
background: var(--admin-bg-soft);
border-color: transparent;
margin-bottom: 0.5rem;
}
.admin-cms-card--element:hover {
border-color: var(--admin-border);
background: var(--admin-surface);
}
.admin-cms-card__head {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1.1rem 1.3rem; /* 11px 13px */
}
.admin-cms-card__title {
background: none;
border: 0;
cursor: pointer;
font-weight: 600;
text-align: left;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-card__title:hover {
color: var(--admin-primary-text);
}
.admin-cms-card__title--element {
font-weight: 400;
flex: 1;
}
.admin-cms-card__type {
flex: none;
min-width: 5.4rem; /* 54px — 요소 타입 배지 정렬폭 */
text-align: center;
}
.admin-cms-card__meta {
margin-left: auto;
display: inline-flex;
gap: 0.4rem;
align-items: center;
}
.admin-cms-card__actions {
display: inline-flex;
gap: 0.3rem;
align-items: center;
}
.admin-cms-card__body {
padding: 0 1.3rem 1.3rem;
border-top: 1px solid var(--admin-border);
padding-top: 1.1rem;
}
.admin-cms-card__empty {
color: var(--admin-text-muted);
margin: 0 0 0.8rem;
font-size: 1.3rem;
}
.admin-cms-card__add-el {
margin-top: 0.4rem;
}
.admin-cms-card__add-el > summary {
cursor: pointer;
display: inline-flex;
list-style: none;
}
.admin-cms-card__add-el > summary::-webkit-details-marker {
display: none;
}
.admin-cms-card--element .admin-cms-card__actions {
margin-left: auto;
}
/* 드래그 핸들 명도 */
.admin-cms-card .admin-page-tree__handle,
.admin-cms-builder__tree .admin-page-tree__handle {
color: var(--admin-text-placeholder);
cursor: grab;
transition: color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-card .admin-page-tree__handle:hover,
.admin-cms-builder__tree .admin-page-tree__handle:hover {
color: var(--admin-text-secondary);
}
/* ── 요소 추가 — 그룹별 아이콘 타일 그리드 ─────────────────── */
.admin-cms-types {
display: flex;
flex-direction: column;
gap: 1.2rem; /* 12px */
margin-top: 1rem;
padding: 1.2rem;
background: var(--admin-bg-soft);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-md);
}
.admin-cms-types__group {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.admin-cms-types__group-label {
font-size: 1.1rem; /* 11px */
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--admin-text-muted);
}
.admin-cms-types__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); /* 80px */
gap: 0.6rem; /* 6px */
}
.admin-cms-type {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem; /* 5px */
padding: 1rem 0.6rem; /* 10px 6px */
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-surface);
cursor: pointer;
text-align: center;
transition: border-color var(--admin-duration-short, 0.12s) ease, background var(--admin-duration-short, 0.12s) ease, transform var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-type:hover {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
transform: translateY(-1px);
box-shadow: var(--admin-shadow-card, 0 2px 6px rgba(37, 99, 235, 0.12));
}
.admin-cms-type:focus-visible {
outline: 2px solid var(--admin-primary);
outline-offset: 1px;
}
.admin-cms-type__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.2rem; /* 32px */
height: 3.2rem;
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-primary-light);
color: var(--admin-primary-text);
font-size: 1.5rem; /* 15px */
}
.admin-cms-type:hover .admin-cms-type__icon {
background: var(--admin-surface);
}
.admin-cms-type__label {
font-size: 1.15rem; /* 11.5px */
font-weight: 600;
color: var(--admin-text-secondary);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.admin-cms-live {
min-height: 32rem;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
background: var(--admin-bg-soft);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-md);
padding: 1.4rem;
}
.admin-cms-live__empty {
min-height: 5.6rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--admin-text-muted);
background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.08) 0.8rem, rgba(148, 163, 184, 0.14) 0.8rem, rgba(148, 163, 184, 0.14) 1.6rem);
border: 1px dashed var(--admin-border-strong);
border-radius: var(--admin-radius-sm, 0.6rem);
font-size: var(--admin-fs-sm, 1.3rem);
}
.admin-cms-live-sections,
.admin-cms-live-elements {
display: flex;
flex-direction: column;
gap: var(--admin-space-md, 1rem);
min-width: 0;
max-width: 100%;
}
.admin-cms-live-editable {
position: relative;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
min-height: 2.8rem;
border: 1px solid transparent;
border-radius: var(--admin-radius-sm, 0.6rem);
transition: border-color var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease, background var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-live-editable.is-hidden {
opacity: 0.58;
}
.admin-cms-live-editable.is-cms-editable-mounted {
cursor: pointer;
}
.admin-cms-live-editable:hover {
border-color: rgba(37, 99, 235, 0.42);
box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.06);
}
.admin-cms-live-editable.is-selected {
border-color: var(--admin-primary);
box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.16);
background: var(--admin-surface);
}
.admin-cms-live-editable--element {
padding: 0.4rem;
}
.admin-cms-live-editable--section {
overflow: hidden;
border-color: var(--admin-primary-border);
background: var(--admin-surface);
box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
}
.admin-cms-live-editable--section:hover {
border-color: var(--admin-primary);
box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.08), var(--admin-shadow-card, 0 2px 8px rgba(15, 23, 42, 0.08));
}
.admin-cms-live-editable--section.is-selected {
border-color: var(--admin-primary);
box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.18), var(--admin-shadow-card, 0 3px 12px rgba(37, 99, 235, 0.12));
}
.admin-cms-live-section-chrome {
display: flex;
align-items: center;
gap: var(--admin-space-xs, 0.6rem);
min-height: 3.8rem;
padding: 0.6rem 0.8rem;
border-bottom: 1px solid var(--admin-primary-border);
background: linear-gradient(180deg, var(--admin-primary-light), var(--admin-surface));
}
.admin-cms-live-section-chrome__label,
.admin-cms-live-section-chrome__type {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex: none;
min-height: 2.4rem;
padding: 0.3rem 0.8rem;
border-radius: var(--admin-radius-full, 99rem);
font-size: var(--admin-fs-xs, 1.2rem);
font-weight: 800;
}
.admin-cms-live-section-chrome__label {
color: var(--admin-primary-text);
background: var(--admin-primary-light);
border: 1px solid var(--admin-primary-border);
}
.admin-cms-live-section-chrome__type {
color: var(--admin-text-secondary);
background: var(--admin-surface);
border: 1px solid var(--admin-border);
}
.admin-cms-live-section-chrome__title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--admin-text-muted);
font-size: var(--admin-fs-sm, 1.3rem);
font-weight: 600;
}
.admin-cms-live-section-chrome__actions {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-left: auto;
}
.admin-cms-live-section-chrome__btn {
width: 2.6rem;
height: 2.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-xs, 0.4rem);
background: var(--admin-surface);
color: var(--admin-text-secondary);
cursor: pointer;
}
.admin-cms-live-section-chrome__btn:hover {
border-color: var(--admin-primary);
color: var(--admin-primary-text);
background: var(--admin-primary-light);
}
.admin-cms-live-section-body {
padding: var(--admin-space-sm, 0.8rem);
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.admin-cms-live-section-body > * {
max-width: 100%;
}
.admin-cms-floating-toolbar {
position: fixed;
z-index: 120;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem;
max-width: calc(100vw - var(--admin-space-xl, 2.4rem));
padding: 0.4rem;
background: var(--admin-surface);
border: 1px solid var(--admin-border-strong);
border-radius: var(--admin-radius-sm, 0.6rem);
box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.16);
}
.admin-cms-floating-toolbar[hidden] {
display: none;
}
.admin-cms-floating-toolbar__btn {
width: 2.8rem;
height: 2.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid transparent;
border-radius: var(--admin-radius-xs, 0.4rem);
background: transparent;
color: var(--admin-text-secondary);
cursor: pointer;
transition: background var(--admin-duration-short, 0.12s) ease, color var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-floating-toolbar__btn:hover {
background: var(--admin-primary-light);
border-color: var(--admin-primary);
color: var(--admin-primary-text);
}
.admin-cms-floating-toolbar__btn--delete:hover {
background: var(--admin-danger-bg);
border-color: var(--admin-danger);
color: var(--admin-danger);
}
.admin-cms-overflow-menu {
position: fixed;
z-index: 160;
min-width: 20rem;
max-width: min(32rem, 100vw - 2rem);
padding: var(--admin-space-2xs, 0.4rem);
border: 1px solid var(--admin-border-strong);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-surface);
box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.16);
}
.admin-cms-overflow-menu[hidden] {
display: none;
}
.admin-cms-overflow-menu__item {
width: 100%;
min-height: 3.4rem;
display: flex;
align-items: center;
gap: var(--admin-space-xs, 0.6rem);
padding: 0 var(--admin-space-sm, 0.8rem);
border: 0;
border-radius: var(--admin-radius-xs, 0.4rem);
background: transparent;
color: var(--admin-text);
cursor: pointer;
text-align: left;
font-size: var(--admin-fs-sm, 1.3rem);
}
.admin-cms-overflow-menu__item > i {
width: 1.6rem;
text-align: center;
color: var(--admin-text-muted);
}
.admin-cms-overflow-menu__item:hover, .admin-cms-overflow-menu__item:focus-visible {
background: var(--admin-primary-light);
color: var(--admin-primary-text);
outline: none;
}
.admin-cms-overflow-menu__item--danger {
color: var(--admin-danger);
}
.admin-cms-overflow-menu__item--danger:hover, .admin-cms-overflow-menu__item--danger:focus-visible {
background: var(--admin-danger-bg);
color: var(--admin-danger);
}
.admin-cms-layer-tree {
display: grid;
gap: var(--admin-space-2xs, 0.4rem);
margin: 0;
padding: 0;
list-style: none;
}
.admin-cms-layer-tree__children {
display: grid;
gap: var(--admin-space-2xs, 0.4rem);
margin: var(--admin-space-2xs, 0.4rem) 0 0 var(--admin-space-md, 1rem);
padding: 0 0 0 var(--admin-space-sm, 0.8rem);
border-left: 1px solid var(--admin-border);
list-style: none;
}
.admin-cms-layer-tree__button {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--admin-space-2xs, 0.4rem);
padding: var(--admin-space-xs, 0.6rem) var(--admin-space-sm, 0.8rem);
border: 1px solid transparent;
border-radius: var(--admin-radius-sm, 0.6rem);
background: transparent;
color: var(--admin-text);
cursor: pointer;
text-align: left;
}
.admin-cms-layer-tree__button > span,
.admin-cms-layer-tree__button > small {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-cms-layer-tree__button > span {
font-weight: 700;
font-size: var(--admin-fs-sm, 1.3rem);
}
.admin-cms-layer-tree__button > small {
color: var(--admin-text-muted);
font-size: var(--admin-fs-xs, 1.2rem);
}
.admin-cms-layer-tree__button:hover, .admin-cms-layer-tree__button.is-active {
border-color: var(--admin-primary-border);
background: var(--admin-primary-light);
color: var(--admin-primary-text);
}
.admin-cms-inspector__advanced {
margin-top: var(--admin-space-md, 1rem);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-bg-soft);
}
.admin-cms-inspector__advanced > summary {
min-height: 3.8rem;
display: flex;
align-items: center;
padding: 0 var(--admin-space-md, 1rem);
cursor: pointer;
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm, 1.3rem);
font-weight: 800;
}
.admin-cms-inspector__advanced-body {
display: grid;
gap: var(--admin-space-sm, 0.8rem);
padding: 0 var(--admin-space-md, 1rem) var(--admin-space-md, 1rem);
}
/* Element-first live canvas polish */
.admin-cms-live {
background: linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px), linear-gradient(180deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px), var(--admin-bg-soft);
background-size: 2.4rem 2.4rem;
}
.admin-cms-live-elements {
position: relative;
}
.admin-cms-live-elements.is-dragging {
cursor: grabbing;
}
.admin-cms-live-elements.is-saving::after, .admin-cms-live-elements.is-error::after {
position: absolute;
right: var(--admin-space-sm, 0.8rem);
top: var(--admin-space-sm, 0.8rem);
z-index: 3;
padding: 0.4rem 0.8rem;
border-radius: var(--admin-radius-full, 99rem);
font-size: var(--admin-fs-xs, 1.2rem);
font-weight: 700;
box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.admin-cms-live-elements.is-saving::after {
content: "Saving order...";
color: var(--admin-primary-text);
background: var(--admin-primary-light);
border: 1px solid var(--admin-primary-border);
}
.admin-cms-live-elements.is-error::after {
content: "Order save failed";
color: var(--admin-danger);
background: var(--admin-danger-bg);
border: 1px solid var(--admin-danger);
}
.admin-cms-live-editable--element {
display: grid;
grid-template-rows: auto minmax(5.6rem, auto);
overflow: hidden;
border-color: var(--admin-border);
background: var(--admin-surface);
box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.admin-cms-live-editable--element.is-cms-editable-mounted {
cursor: default;
}
.admin-cms-live-editable--element:hover {
border-color: var(--admin-primary-border);
box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.08), var(--admin-shadow-card, 0 2px 8px rgba(15, 23, 42, 0.08));
}
.admin-cms-live-editable--element.is-selected {
z-index: 12;
overflow: visible;
border-color: var(--admin-primary);
box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.18), var(--admin-shadow-card, 0 3px 12px rgba(37, 99, 235, 0.12));
background: var(--admin-surface);
}
.admin-cms-live-editable--element.is-empty {
border-style: dashed;
}
.admin-cms-live-editable__chrome {
display: flex;
align-items: center;
gap: var(--admin-space-xs, 0.6rem);
min-height: 3.6rem;
padding: 0.6rem 0.8rem;
border-bottom: 1px solid var(--admin-border);
background: linear-gradient(180deg, var(--admin-bg-soft), var(--admin-surface));
}
.admin-cms-live-editable__drag {
width: 2.6rem;
height: 2.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
padding: 0;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-xs, 0.4rem);
background: var(--admin-surface);
color: var(--admin-text-muted);
cursor: grab;
}
.admin-cms-live-editable__drag:hover {
border-color: var(--admin-primary);
color: var(--admin-primary-text);
background: var(--admin-primary-light);
}
.admin-cms-live-editable__drag:active {
cursor: grabbing;
}
.admin-cms-live-editable__type-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
max-width: 22rem;
min-width: 0;
padding: 0.4rem 0.8rem;
border-radius: var(--admin-radius-full, 99rem);
border: 1px solid var(--admin-border);
background: var(--admin-surface);
color: var(--admin-text-secondary);
font-size: var(--admin-fs-xs, 1.2rem);
font-weight: 700;
}
.admin-cms-live-editable__type-badge > i {
color: var(--admin-primary);
}
.admin-cms-live-editable__type-badge > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-cms-live-editable__type-badge[data-element-kind=image], .admin-cms-live-editable__type-badge[data-element-kind=gallery], .admin-cms-live-editable__type-badge[data-element-kind=media] {
background: #ecfeff;
border-color: #bae6fd;
}
.admin-cms-live-editable__type-badge[data-element-kind=image] > i, .admin-cms-live-editable__type-badge[data-element-kind=gallery] > i, .admin-cms-live-editable__type-badge[data-element-kind=media] > i {
color: #0284c7;
}
.admin-cms-live-editable__type-badge[data-element-kind=html] {
background: var(--admin-bg-soft);
}
.admin-cms-live-editable__type-badge[data-element-kind=html] > i {
color: #64748b;
}
.admin-cms-live-editable__actions,
.admin-cms-live-section-chrome__actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: var(--admin-space-2xs, 0.4rem);
flex: 1 1 auto;
min-width: 0;
margin-left: auto;
}
.admin-cms-live-action {
flex: none;
}
.admin-cms-live-action--btn {
width: 2.8rem;
height: 2.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-xs, 0.4rem);
background: var(--admin-surface);
color: var(--admin-text-secondary);
cursor: pointer;
transition: background var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease, color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-live-action--btn:hover {
border-color: var(--admin-primary);
color: var(--admin-primary-text);
background: var(--admin-primary-light);
}
.admin-cms-live-action--delete:hover {
border-color: var(--admin-danger);
color: var(--admin-danger);
background: var(--admin-danger-bg);
}
.admin-cms-live-action--type {
position: relative;
display: inline-flex;
align-items: center;
min-width: 0;
}
.admin-cms-live-action__type-trigger {
max-width: 18rem;
min-width: 11rem;
height: 2.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--admin-space-2xs, 0.4rem);
padding: 0 var(--admin-space-xs, 0.6rem);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-bg-soft);
color: var(--admin-text-secondary);
cursor: pointer;
font-size: var(--admin-fs-sm, 1.3rem);
font-weight: 700;
}
.admin-cms-live-action__type-trigger > i:first-child {
color: var(--admin-primary);
flex: none;
}
.admin-cms-live-action__type-trigger > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-cms-live-action__type-trigger > i:last-child {
color: var(--admin-text-muted);
font-size: var(--admin-fs-xs, 1.2rem);
flex: none;
}
.admin-cms-live-action__type-trigger:hover, .admin-cms-live-action__type-trigger[aria-expanded=true] {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
color: var(--admin-primary-text);
}
.admin-cms-live-action__type-trigger:focus-visible {
outline: 2px solid var(--admin-primary);
outline-offset: 1px;
}
.admin-cms-live-action__type-menu {
position: absolute;
right: 0;
top: calc(100% + var(--admin-space-2xs, 0.4rem));
z-index: 20;
display: grid;
grid-template-columns: repeat(2, minmax(12rem, 1fr));
gap: var(--admin-space-2xs, 0.4rem);
width: min(34rem, 100vw - 4rem);
max-height: min(36rem, 100vh - 12rem);
overflow: auto;
padding: var(--admin-space-xs, 0.6rem);
border: 1px solid var(--admin-border-strong);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-surface);
box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.16);
}
.admin-cms-live-action__type-menu[hidden] {
display: none;
}
.admin-cms-live-action__type-option {
min-width: 0;
min-height: 3.2rem;
display: inline-flex;
align-items: center;
gap: var(--admin-space-xs, 0.6rem);
padding: var(--admin-space-2xs, 0.4rem) var(--admin-space-xs, 0.6rem);
border: 1px solid transparent;
border-radius: var(--admin-radius-xs, 0.4rem);
background: transparent;
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm, 1.3rem);
font-weight: 700;
cursor: pointer;
text-align: left;
}
.admin-cms-live-action__type-option > i {
width: 1.6rem;
flex: none;
color: var(--admin-primary);
text-align: center;
}
.admin-cms-live-action__type-option > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-cms-live-action__type-option:hover, .admin-cms-live-action__type-option:focus-visible {
border-color: var(--admin-primary-border);
background: var(--admin-primary-light);
color: var(--admin-primary-text);
outline: none;
}
.admin-cms-live-action__type-option[aria-pressed=true] {
border-color: var(--admin-primary);
background: var(--admin-primary);
color: var(--admin-on-primary);
}
.admin-cms-live-action__type-option[aria-pressed=true] > i {
color: var(--admin-on-primary);
}
.admin-cms-live-action__type-group {
grid-column: 1/-1;
margin-top: var(--admin-space-2xs, 0.4rem);
padding: var(--admin-space-2xs, 0.4rem) var(--admin-space-xs, 0.6rem);
border-top: 1px solid var(--admin-border);
color: var(--admin-text-muted);
font-size: var(--admin-fs-xs, 1.2rem);
font-weight: 800;
}
.admin-cms-live-editable__content {
min-height: 5.6rem;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
padding: 1rem;
}
.admin-cms-live-editable__content > .cms-el {
margin: 0;
}
.admin-cms-live-editable__content > * {
max-width: 100%;
}
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal {
max-height: 24rem;
overflow: hidden;
}
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal > .cms-el--image {
display: flex;
flex-direction: column;
min-height: 0;
height: 22rem;
}
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal .no-auto-cover,
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal .ui-placeholder {
flex: 1 1 auto;
min-height: 0;
height: 100%;
max-height: 100%;
}
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal .no-auto-cover img,
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal .ui-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
}
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal .cms-el__caption {
flex: none;
margin-top: var(--admin-space-xs, 0.6rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-cms-live-placeholder {
min-height: 8.2rem;
display: flex;
align-items: center;
gap: 1.2rem;
padding: 1.4rem;
border: 1px dashed var(--admin-border-strong);
border-radius: var(--admin-radius-sm, 0.6rem);
background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.06) 0.8rem, rgba(148, 163, 184, 0.12) 0.8rem, rgba(148, 163, 184, 0.12) 1.6rem);
color: var(--admin-text-secondary);
}
.admin-cms-live-placeholder--media {
min-height: 12rem;
justify-content: center;
background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(37, 99, 235, 0.08)), repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.06) 0.8rem, rgba(148, 163, 184, 0.14) 0.8rem, rgba(148, 163, 184, 0.14) 1.6rem);
}
.admin-cms-live-placeholder--text {
align-items: flex-start;
}
.admin-cms-live-placeholder__icon {
width: 3.6rem;
height: 3.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
border-radius: var(--admin-radius-full, 99rem);
background: var(--admin-primary-light);
color: var(--admin-primary-text);
border: 1px solid var(--admin-primary-border);
font-size: 1.7rem;
}
.admin-cms-live-placeholder__body {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
.admin-cms-live-placeholder__body > strong {
color: var(--admin-text, #111827);
font-size: var(--admin-fs-body-lg, 1.5rem);
line-height: 1.35;
}
.admin-cms-live-placeholder__body > span {
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm, 1.3rem);
line-height: 1.45;
}
.admin-cms-live-editable--chosen {
border-color: var(--admin-primary);
}
.admin-cms-live-editable--ghost {
opacity: 0.48;
background: var(--admin-primary-light);
border-color: var(--admin-primary);
}
.admin-cms-live-editable--drag,
.admin-cms-live-editable--fallback {
cursor: grabbing;
box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.18);
}
.admin-cms-floating-toolbar {
gap: 0.4rem;
padding: 0.35rem;
}
.admin-cms-floating-toolbar__type {
position: relative;
display: inline-flex;
align-items: center;
min-width: 0;
}
.admin-cms-floating-toolbar__type-trigger {
max-width: 16rem;
min-width: 11rem;
height: 2.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--admin-space-2xs, 0.4rem);
padding: 0 var(--admin-space-xs, 0.6rem);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-bg-soft);
color: var(--admin-text-secondary);
cursor: pointer;
font-size: var(--admin-fs-sm, 1.3rem);
font-weight: 700;
}
.admin-cms-floating-toolbar__type-trigger > i:first-child {
color: var(--admin-primary);
flex: none;
}
.admin-cms-floating-toolbar__type-trigger > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-cms-floating-toolbar__type-trigger > i:last-child {
color: var(--admin-text-muted);
font-size: var(--admin-fs-xs, 1.2rem);
flex: none;
}
.admin-cms-floating-toolbar__type-trigger:hover, .admin-cms-floating-toolbar__type-trigger[aria-expanded=true] {
border-color: var(--admin-primary);
background: var(--admin-primary-light);
color: var(--admin-primary-text);
}
.admin-cms-floating-toolbar__type-menu {
position: absolute;
left: 0;
top: calc(100% + var(--admin-space-2xs, 0.4rem));
z-index: 20;
display: grid;
grid-template-columns: repeat(2, minmax(12rem, 1fr));
gap: var(--admin-space-2xs, 0.4rem);
width: min(34rem, 100vw - 4rem);
max-height: min(36rem, 100vh - 12rem);
overflow: auto;
padding: var(--admin-space-xs, 0.6rem);
border: 1px solid var(--admin-border-strong);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-surface);
box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.16);
}
.admin-cms-floating-toolbar__type-menu[hidden] {
display: none;
}
.admin-cms-floating-toolbar__type-option {
min-width: 0;
min-height: 3.2rem;
display: inline-flex;
align-items: center;
gap: var(--admin-space-xs, 0.6rem);
padding: var(--admin-space-2xs, 0.4rem) var(--admin-space-xs, 0.6rem);
border: 1px solid transparent;
border-radius: var(--admin-radius-xs, 0.4rem);
background: transparent;
color: var(--admin-text-secondary);
cursor: pointer;
font-size: var(--admin-fs-sm, 1.3rem);
font-weight: 700;
text-align: left;
}
.admin-cms-floating-toolbar__type-option > i {
width: 1.6rem;
flex: none;
color: var(--admin-primary);
text-align: center;
}
.admin-cms-floating-toolbar__type-option > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-cms-floating-toolbar__type-option:hover, .admin-cms-floating-toolbar__type-option:focus-visible {
border-color: var(--admin-primary-border);
background: var(--admin-primary-light);
color: var(--admin-primary-text);
outline: none;
}
.admin-cms-floating-toolbar__type-option[aria-pressed=true] {
border-color: var(--admin-primary);
background: var(--admin-primary);
color: var(--admin-on-primary);
}
.admin-cms-floating-toolbar__type-option[aria-pressed=true] > i {
color: var(--admin-on-primary);
}
.admin-cms-live-editable.is-editing-inline {
border-color: var(--admin-primary);
box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.16), var(--admin-shadow-card, 0 3px 12px rgba(37, 99, 235, 0.12));
}
.admin-cms-inline-editor-host {
padding: var(--admin-space-md, 1rem);
border-top: 1px solid var(--admin-border);
background: var(--admin-bg-soft);
}
.admin-cms-inline-form {
display: flex;
flex-direction: column;
gap: var(--admin-space-md, 1rem);
}
.admin-cms-inline-form__actions {
position: sticky;
bottom: 0;
z-index: 2;
display: flex;
justify-content: flex-end;
gap: var(--admin-space-xs, 0.6rem);
padding-top: var(--admin-space-sm, 0.8rem);
border-top: 1px solid var(--admin-border);
background: var(--admin-bg-soft);
}
.admin-cms-inline-form [data-cms-inline-save-loader] {
display: none;
}
.admin-cms-element-form {
display: flex;
flex-direction: column;
gap: var(--admin-space-md, 1rem);
}
.admin-cms-element-form__head {
display: flex;
align-items: center;
gap: var(--admin-space-xs, 0.6rem);
flex-wrap: wrap;
}
.admin-cms-element-form__type {
display: inline-flex;
align-items: center;
min-height: 2.4rem;
padding: 0.3rem 0.8rem;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-full, 99rem);
background: var(--admin-surface);
color: var(--admin-text-secondary);
font-size: var(--admin-fs-xs, 1.2rem);
font-weight: 700;
}
.admin-cms-element-form__grid, .admin-cms-element-form__code-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
gap: var(--admin-space-md, 1rem);
}
.admin-cms-html-workspace {
display: flex;
flex-direction: column;
gap: var(--admin-space-md, 1rem);
}
.admin-cms-html-preview {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-html-preview__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-html-preview__label {
color: var(--admin-text, #111827);
font-size: var(--admin-fs-sm, 1.4rem);
font-weight: 700;
}
.admin-cms-html-preview__frame {
width: 100%;
min-height: 24rem;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-surface);
}
.cms-linked-page {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs, 0.6rem);
padding: var(--admin-space-md, 1rem);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-bg-soft);
}
.cms-linked-page__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--admin-space-sm, 0.8rem);
}
.cms-linked-page__title {
color: var(--admin-text, #111827);
font-size: var(--admin-fs-sm, 1.4rem);
font-weight: 700;
}
.admin-code-editor {
--code-editor-min-height: 18rem;
overflow: hidden;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-surface);
}
.admin-code-editor:focus-within {
border-color: var(--admin-primary);
box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.12);
}
.admin-code-editor__mount {
min-height: var(--code-editor-min-height, 18rem);
}
.admin-code-editor .cm-editor {
min-height: var(--code-editor-min-height, 18rem);
}
.admin-code-editor--sm {
--code-editor-min-height: 16rem;
}
.admin-code-editor--lg {
--code-editor-min-height: 22rem;
}
.admin-code-editor--xl {
--code-editor-min-height: 32rem;
}
.admin-cms-json-repeater {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-json-repeater__list {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-json-repeater__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--admin-space-xs, 0.6rem);
align-items: start;
}
.admin-cms-json-repeater__remove {
width: 3.2rem;
height: 3.2rem;
padding: 0;
justify-content: center;
}
.admin-cms-element-picker {
display: flex;
flex-direction: column;
gap: var(--admin-space-md, 1rem);
}
.admin-cms-element-picker__search {
position: sticky;
top: 0;
z-index: 2;
padding-bottom: var(--admin-space-xs, 0.6rem);
background: var(--admin-surface);
}
.admin-cms-element-picker__groups {
display: flex;
flex-direction: column;
gap: var(--admin-space-lg, 1.2rem);
max-height: min(72vh, 72rem);
overflow: auto;
padding-right: var(--admin-space-2xs, 0.4rem);
}
.admin-cms-element-picker__group {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm, 0.8rem);
}
.admin-cms-element-picker__group-title {
margin: 0;
color: var(--admin-text, #111827);
font-size: var(--admin-fs-md, 1.5rem);
font-weight: 800;
}
.admin-cms-element-picker__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
gap: var(--admin-space-md, 1rem);
}
.admin-cms-element-picker__card {
display: flex;
flex-direction: column;
gap: var(--admin-space-sm, 0.8rem);
min-width: 0;
padding: var(--admin-space-sm, 0.8rem);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-surface);
cursor: pointer;
text-align: left;
transition: border-color var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease, transform var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-element-picker__card:hover, .admin-cms-element-picker__card:focus-visible {
border-color: var(--admin-primary);
box-shadow: var(--admin-shadow-card, 0 0.3rem 1.2rem rgba(37, 99, 235, 0.12));
outline: none;
transform: translateY(-0.1rem);
}
.admin-cms-element-picker__thumb {
position: relative;
display: block;
aspect-ratio: 16/10;
overflow: hidden;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-xs, 0.4rem);
background: var(--admin-bg-soft);
}
.admin-cms-element-picker__thumb iframe {
position: absolute;
inset: 0;
width: 200%;
height: 200%;
border: 0;
pointer-events: none;
transform: scale(0.5);
transform-origin: top left;
}
.admin-cms-element-picker__thumb--icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--admin-primary);
font-size: var(--admin-fs-2xl, 2.4rem);
}
.admin-cms-element-picker__meta {
display: flex;
flex-direction: column;
gap: var(--admin-space-2xs, 0.4rem);
min-width: 0;
}
.admin-cms-element-picker__meta strong,
.admin-cms-element-picker__meta code {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-cms-element-picker__meta strong {
color: var(--admin-text, #111827);
font-size: var(--admin-fs-sm, 1.4rem);
font-weight: 800;
}
.admin-cms-element-picker__meta code {
color: var(--admin-text-muted);
font-size: var(--admin-fs-xs, 1.2rem);
}
.admin-cms-element-picker__summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--admin-space-md, 1rem);
padding: var(--admin-space-md, 1rem);
border: 1px solid var(--admin-border-light, #eef2f7);
border-radius: var(--admin-radius-sm, 0.6rem);
background: var(--admin-bg-soft);
}
.admin-cms-element-picker__summary p {
margin: var(--admin-space-2xs, 0.4rem) 0 0;
color: var(--admin-text-secondary);
font-size: var(--admin-fs-sm, 1.4rem);
}
.admin-cms-element-picker__eyebrow {
display: inline-flex;
align-items: center;
color: var(--admin-text, #111827);
font-size: var(--admin-fs-xs, 1.2rem);
font-weight: 800;
}
.admin-cms-element-picker__action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.8rem;
margin-left: auto;
border-radius: 50%;
color: var(--admin-text-muted);
background: var(--admin-grey-100, #f3f4f6);
flex: 0 0 auto;
transition: background var(--admin-duration-short, 0.12s) ease, color var(--admin-duration-short, 0.12s) ease, transform var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-element-picker__empty {
padding: var(--admin-space-2xl, 2rem);
border: 1px dashed var(--admin-border);
border-radius: var(--admin-radius-sm, 0.6rem);
color: var(--admin-text-muted);
text-align: center;
}
.admin-cms-element-picker[data-cms-element-type-picker] .admin-cms-element-picker__groups {
max-height: min(66vh, 58rem);
}
.admin-cms-element-picker[data-cms-element-type-picker] .admin-cms-element-picker__grid {
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
gap: var(--admin-space-sm, 0.8rem);
}
.admin-cms-element-picker[data-cms-element-type-picker] .admin-cms-element-picker__card--element {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--admin-space-sm, 0.8rem);
min-height: 7.6rem;
padding: var(--admin-space-md, 1rem);
}
.admin-cms-element-picker[data-cms-element-type-picker] .admin-cms-element-picker__card--element:hover .admin-cms-element-picker__action, .admin-cms-element-picker[data-cms-element-type-picker] .admin-cms-element-picker__card--element:focus-visible .admin-cms-element-picker__action {
background: var(--admin-primary);
color: var(--admin-on-primary);
transform: translateX(0.2rem);
}
.admin-cms-element-picker[data-cms-element-type-picker] .admin-cms-element-picker__thumb--icon {
width: 4.4rem;
height: 4.4rem;
aspect-ratio: auto;
border-color: var(--admin-primary-border);
background: var(--admin-primary-light);
font-size: var(--admin-fs-xl, 2rem);
flex: 0 0 auto;
}
[data-theme^=dark] .admin-cms-builder {
--admin-cms-builder-surface: var(--admin-card-bg);
--admin-cms-builder-surface-muted: var(--admin-bg-soft);
}
[data-theme^=dark] .admin-cms-builder__toolbar, [data-theme^=dark] .admin-cms-builder__left, [data-theme^=dark] .admin-cms-builder__center, [data-theme^=dark] .admin-cms-builder__right, [data-theme^=dark] .admin-cms-builder__inspector-foot, [data-theme^=dark] .admin-cms-builder__unlinked-row, [data-theme^=dark] .admin-cms-builder__tree .admin-page-tree__row, [data-theme^=dark] .admin-cms-builder__page-row {
background: var(--admin-cms-builder-surface);
border-color: var(--admin-border);
color: var(--admin-text);
}
[data-theme^=dark] .admin-cms-builder__inspector-head, [data-theme^=dark] .admin-cms-builder__empty--center, [data-theme^=dark] .admin-cms-builder__page-row:hover, [data-theme^=dark] .admin-cms-builder__tree .admin-page-tree__row:hover, [data-theme^=dark] .admin-cms-builder__unlinked-row:hover {
background: var(--admin-cms-builder-surface-muted);
border-color: var(--admin-border-strong);
}
[data-theme^=dark] .admin-cms-builder__empty, [data-theme^=dark] .admin-cms-builder__unlinked-empty, [data-theme^=dark] .admin-cms-builder__unlinked-head, [data-theme^=dark] .admin-cms-builder__page-meta, [data-theme^=dark] .admin-cms-builder__page-more {
color: var(--admin-text-secondary);
}
[data-theme^=dark] .admin-cms-builder__drawer-backdrop {
background: rgba(0, 0, 0, 0.54);
}
[data-theme^=dark] .admin-page-tree__row.is-active-page,
[data-theme^=dark] .admin-cms-builder__tree .admin-page-tree__row--page:hover,
[data-theme^=dark] .admin-cms-builder__tree .admin-page-tree__list.is-drop-target,
[data-theme^=dark] .admin-cms-builder__tree .admin-page-tree__children.is-drop-target {
background: var(--admin-primary-light);
border-color: var(--admin-primary-border);
}
[data-theme^=dark] .admin-cms-builder__canvas-loader,
[data-theme^=dark] .admin-cms-builder__canvas-loader-icon,
[data-theme^=dark] .admin-cms-inspector__tab,
[data-theme^=dark] .admin-cms-builder-canvas__head,
[data-theme^=dark] .admin-cms-card,
[data-theme^=dark] .admin-cms-types,
[data-theme^=dark] .admin-cms-type,
[data-theme^=dark] .admin-cms-live,
[data-theme^=dark] .admin-cms-live-editable,
[data-theme^=dark] .admin-cms-live-editable--element,
[data-theme^=dark] .admin-cms-live-action--btn,
[data-theme^=dark] .admin-cms-live-action__type-menu,
[data-theme^=dark] .admin-cms-live-section-chrome__btn,
[data-theme^=dark] .admin-cms-floating-toolbar {
background-color: var(--admin-card-bg);
border-color: var(--admin-border);
color: var(--admin-text);
}
[data-theme^=dark] .admin-cms-live,
[data-theme^=dark] .admin-cms-live__empty,
[data-theme^=dark] .admin-cms-live-placeholder,
[data-theme^=dark] .admin-cms-live-action__type-trigger,
[data-theme^=dark] .admin-cms-live-editable__content {
background-color: var(--admin-bg-soft);
color: var(--admin-text-secondary);
}
[data-theme^=dark] .admin-cms-live-editable.is-selected,
[data-theme^=dark] .admin-cms-live-editable--section,
[data-theme^=dark] .admin-cms-live-editable--element.is-selected {
background: var(--admin-card-bg);
border-color: var(--admin-primary-border);
}
[data-theme^=dark] .admin-cms-live-section-chrome,
[data-theme^=dark] .admin-cms-live-editable__chrome {
background: linear-gradient(180deg, var(--admin-bg-soft), var(--admin-card-bg));
border-color: var(--admin-border);
}
[data-theme^=dark] .admin-cms-live-section-chrome__label,
[data-theme^=dark] .admin-cms-live-editable__type-badge,
[data-theme^=dark] .admin-cms-live-editable__type-badge[data-element-kind],
[data-theme^=dark] .admin-cms-live-placeholder__icon,
[data-theme^=dark] .admin-cms-type__icon {
background: var(--admin-primary-light);
border-color: var(--admin-primary-border);
color: var(--admin-primary-text);
}
[data-theme^=dark] .admin-cms-live-section-chrome__type,
[data-theme^=dark] .admin-cms-live-editable__drag,
[data-theme^=dark] .admin-cms-live-action__type-trigger,
[data-theme^=dark] .admin-cms-live-action__type-option {
background: var(--admin-surface);
border-color: var(--admin-border);
color: var(--admin-text-secondary);
}
[data-theme^=dark] .admin-cms-live-action__type-option:hover,
[data-theme^=dark] .admin-cms-live-action__type-option:focus-visible,
[data-theme^=dark] .admin-cms-type:hover,
[data-theme^=dark] .admin-cms-inspector__tab:hover {
background: var(--admin-primary-light);
border-color: var(--admin-primary-border);
color: var(--admin-primary-text);
}
.admin-menu-categories__add-section {
margin-top: var(--admin-space-3xl);
}
.admin-menu-categories__add-fields {
display: flex;
flex-direction: column;
gap: var(--admin-space-xl);
margin-bottom: var(--admin-space-xl);
}
.admin-menu-categories__edit-fields {
display: flex;
flex-direction: column;
gap: var(--admin-space-lg);
margin-bottom: var(--admin-space-lg);
}
.admin-menu-categories__edit-actions {
display: flex;
gap: var(--admin-space-sm);
}
.admin-menu-tags__add-section {
margin-top: var(--admin-space-3xl);
}
.admin-menu-tags__add-fields {
display: flex;
flex-direction: column;
gap: var(--admin-space-xl);
margin-bottom: var(--admin-space-xl);
}
.admin-menu-tags__edit-fields {
display: flex;
flex-direction: column;
gap: var(--admin-space-lg);
margin-bottom: var(--admin-space-lg);
}
.admin-menu-tags__edit-actions {
display: flex;
gap: var(--admin-space-sm);
}
.admin-menu-tags__inline-form {
margin-top: var(--admin-space-sm);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-grey-50);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius);
}
.admin-menu-tags__color-chip {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 3px;
vertical-align: middle;
border: 1px solid rgba(0, 0, 0, 0.15);
flex-shrink: 0;
background: var(--chip-color, var(--admin-grey-200));
}
/* 세트구성 폼 — 구성 메뉴 카드 행 */
.admin-set-item {
position: relative;
margin-bottom: var(--admin-space-lg);
padding: var(--admin-space-lg);
background: var(--admin-surface, #fff);
border: 1px solid var(--admin-border-light);
border-radius: var(--admin-radius-lg, 8px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-set-item:hover {
border-color: var(--admin-border);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.admin-set-item__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--admin-space-sm);
margin-bottom: var(--admin-space);
padding-bottom: var(--admin-space);
border-bottom: 1px dashed var(--admin-border-light);
}
.admin-set-item__num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 var(--admin-space-sm);
background: var(--admin-grey-100);
color: var(--admin-grey-700);
font-size: 12px;
font-weight: 600;
border-radius: 999px;
line-height: 1;
}
.admin-set-item__body {
display: flex;
flex-direction: column;
gap: var(--admin-space);
}
.admin-set-item {
/* 카드 내부 inline 블록 간격 */
}
.admin-set-item .admin-form__block--inline {
margin-bottom: 0;
}
#set-items-list:empty + #set-item-add,
#set-items-list:empty::before {
content: "";
}
#set-items-list:empty::before {
display: block;
padding: var(--admin-space-xl) var(--admin-space-lg);
margin-bottom: var(--admin-space-lg);
content: "+ 메뉴 추가 버튼을 눌러 구성 메뉴를 추가하세요.";
color: var(--admin-grey-500);
background: var(--admin-grey-50);
border: 1px dashed var(--admin-border-light);
border-radius: var(--admin-radius);
text-align: center;
font-size: 13px;
}
.admin-form__inline-action {
margin-left: var(--admin-space);
vertical-align: middle;
}
.admin-mail-settings__test {
margin-top: var(--admin-space-2xl);
padding-top: var(--admin-space-2xl);
border-top: 1px solid var(--admin-border-light);
}
.admin-contact-confirmation {
display: flex;
align-items: center;
gap: var(--admin-space);
max-width: 36rem;
}
.admin-contact-confirmation__select {
flex: 1 1 auto;
min-width: 16rem;
}
.admin-contact-confirmation__submit {
flex: 0 0 auto;
}
@media (max-width: 767px) {
.admin-contact-confirmation {
align-items: stretch;
flex-direction: column;
}
.admin-contact-confirmation__select {
min-width: 0;
}
}
.admin-contact-thread {
margin-top: 24px;
padding: 24px;
background: var(--admin-surface, #fff);
border: 1px solid var(--admin-border-light, #e5e7eb);
border-radius: 10px;
}
.admin-contact-thread__header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--admin-border-light, #e5e7eb);
}
.admin-contact-thread__title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--admin-text, #111);
}
.admin-contact-thread__count {
color: var(--admin-text-secondary, #6b7280);
font-weight: 500;
}
.admin-contact-thread__empty {
padding: 24px 16px;
text-align: center;
color: var(--admin-text-secondary, #6b7280);
background: var(--admin-bg-subtle, #f9fafb);
border-radius: 8px;
font-size: 14px;
}
.admin-contact-thread__list {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.admin-contact-thread__form {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--admin-border-light, #e5e7eb);
display: flex;
flex-direction: column;
gap: 12px;
}
.admin-contact-bubble {
position: relative;
padding: 14px 16px 14px 18px;
background: var(--admin-bg-subtle, #f9fafb);
border: 1px solid var(--admin-border-light, #e5e7eb);
border-radius: 10px;
overflow-wrap: anywhere;
}
.admin-contact-bubble::before {
content: "";
position: absolute;
top: 12px;
bottom: 12px;
left: 0;
width: 3px;
background: var(--admin-primary, #0076cb);
border-radius: 2px;
}
.admin-contact-bubble--admin {
background: #fff;
}
.admin-contact-bubble--customer {
background: var(--admin-bg-subtle, #f5f5f5);
}
.admin-contact-bubble--customer::before {
background: var(--admin-text-secondary, #6b7280);
}
.admin-contact-bubble__meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
flex-wrap: wrap;
font-size: 13px;
color: var(--admin-text-secondary, #6b7280);
}
.admin-contact-bubble__author {
font-weight: 600;
color: var(--admin-text, #111);
}
.admin-contact-bubble__time {
color: var(--admin-text-muted, #9ca3af);
font-variant-numeric: tabular-nums;
}
.admin-contact-bubble__body {
font-size: 15px;
line-height: 1.65;
color: var(--admin-text, #111);
white-space: pre-wrap;
word-break: break-word;
}
.admin-contact-bubble__files {
list-style: none;
padding: 0;
margin: 12px 0 0;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
}
.admin-contact-bubble__files li {
display: flex;
align-items: center;
gap: 6px;
}
.admin-contact-bubble__files a {
color: var(--admin-primary-text, #1d4ed8);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.admin-contact-bubble__files a:hover {
text-decoration: underline;
}
.admin-contact-bubble__file-size {
color: var(--admin-text-muted, #9ca3af);
font-variant-numeric: tabular-nums;
}
.admin-multi-file-input__input {
width: 100%;
padding: 10px 12px;
background: var(--admin-surface, #fff);
border: 1px dashed var(--admin-border, #d1d5db);
border-radius: 8px;
font-size: 14px;
color: var(--admin-text, #111);
}
.admin-multi-file-input__input:focus {
outline: none;
border-color: var(--admin-border-focus, var(--admin-primary, #0076cb));
}
.admin-multi-file-input__input::file-selector-button {
margin-right: 10px;
padding: 6px 12px;
background: var(--admin-primary, #0076cb);
color: #fff;
border: 0;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.admin-multi-file-input__input::file-selector-button:hover {
background: var(--admin-primary-hover, #1d4ed8);
}
.admin-chat-composer {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
background: var(--admin-surface, #fff);
border: 1px solid var(--admin-border, #d1d5db);
border-radius: 24px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-chat-composer:focus-within {
box-shadow: 0 0 0 3px rgba(0, 118, 203, 0.12);
}
.admin-chat-composer__attachments {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 4px 0 0;
}
.admin-chat-composer__attachments[hidden] {
display: none;
}
.admin-chat-composer__chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--admin-bg-subtle, #f3f4f6);
border: 1px solid var(--admin-border-light, #e5e7eb);
border-radius: 12px;
padding: 4px 8px 4px 6px;
font-size: 12px;
max-width: 220px;
color: var(--admin-text, #111);
}
.admin-chat-composer__chip-thumb {
width: 28px;
height: 28px;
object-fit: cover;
border-radius: 6px;
flex: 0 0 auto;
}
.admin-chat-composer__chip-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: var(--admin-surface, #fff);
color: var(--admin-text-secondary, #6b7280);
flex: 0 0 auto;
}
.admin-chat-composer__chip-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-chat-composer__chip-remove {
border: 0;
background: transparent;
cursor: pointer;
color: var(--admin-text-secondary, #6b7280);
padding: 2px;
display: inline-flex;
align-items: center;
line-height: 1;
border-radius: 4px;
}
.admin-chat-composer__chip-remove:hover {
color: var(--admin-text, #111);
background: rgba(0, 0, 0, 0.04);
}
.admin-chat-composer__input {
width: 100%;
border: 0;
outline: 0;
resize: none;
background: transparent;
font: inherit;
line-height: 1.5;
padding: 6px 4px;
max-height: 240px;
overflow-y: auto;
color: var(--admin-text, #111);
}
.admin-chat-composer__input::placeholder {
color: var(--admin-text-muted, #9ca3af);
}
.admin-chat-composer__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.admin-chat-composer__attach {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--admin-bg-subtle, #f3f4f6);
color: var(--admin-text-secondary, #374151);
cursor: pointer;
transition: background 0.15s, color 0.15s;
flex: 0 0 auto;
}
.admin-chat-composer__attach:hover {
background: var(--admin-border-light, #e5e7eb);
color: var(--admin-text, #111);
}
.admin-chat-composer__attach i {
font-size: 14px;
line-height: 1;
}
.admin-chat-composer__attach-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.admin-chat-composer__send {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
padding: 0;
border-radius: 50%;
font-size: 0;
line-height: 1;
gap: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--admin-primary, #0076cb);
color: #fff;
border: 0;
cursor: pointer;
transition: background 0.15s, opacity 0.15s;
flex: 0 0 auto;
position: relative;
overflow: hidden;
}
.admin-chat-composer__send:hover:not(:disabled) {
background: var(--admin-primary-hover, #1d4ed8);
}
.admin-chat-composer__send:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.admin-chat-composer__send-icon {
font-size: 14px;
line-height: 1;
}
.admin-chat-composer__send .admin-form__loader {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
font-size: 14px;
color: #fff;
}
.admin-chat-composer__send .admin-form__loader:not([hidden]) {
display: inline-flex;
}
.admin-chat-composer__send:has(.admin-form__loader:not([hidden])) .admin-chat-composer__send-icon {
visibility: hidden;
}
.admin-chat-composer.admin-chat-composer--dragover {
border-color: var(--admin-border-focus, var(--admin-primary, #0076cb));
background: rgba(0, 118, 203, 0.04);
box-shadow: 0 0 0 3px rgba(0, 118, 203, 0.15);
}
.admin-contact-thread__form.admin-chat-composer {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--admin-border-light, #e5e7eb);
}
.admin-access-control {
display: flex;
flex-direction: column;
gap: var(--admin-space-2xl);
}
.admin-access-control__panel {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--admin-space-2xl) var(--admin-space-4xl);
padding: var(--admin-space-xl);
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
box-shadow: var(--admin-shadow-card);
}
@media (max-width: 1024px) {
.admin-access-control__panel {
flex-direction: column;
gap: var(--admin-space-xl);
}
}
.admin-access-control__stat {
display: flex;
flex-direction: column;
gap: var(--admin-space-xs);
}
.admin-access-control__stat-label i {
color: var(--admin-text-muted);
margin-right: var(--admin-space-2xs);
}
.admin-access-control__stat-ipline {
display: flex;
align-items: center;
gap: var(--admin-space-sm);
min-height: 2.4rem;
}
.admin-access-control__stat-ip {
font-family: "Poppins", sans-serif;
color: var(--admin-text);
}
.admin-access-control__pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-xs);
margin-left: auto;
}
.admin-access-control__pills i {
margin-right: var(--admin-space-3xs);
}
@media (max-width: 1024px) {
.admin-access-control__pills {
margin-left: 0;
}
}
.admin-access-control__notice {
display: flex;
align-items: flex-start;
gap: var(--admin-space-sm);
padding: var(--admin-space) var(--admin-space-lg);
background: var(--admin-warn-bg);
border: 1px solid var(--admin-warn-border);
border-radius: var(--admin-radius);
color: var(--admin-warn-text);
}
.admin-access-control__notice i {
color: var(--admin-warn);
margin-top: 0.2rem;
flex-shrink: 0;
}
.admin-access-control__notice code {
background: rgba(var(--admin-warn-rgb), 0.12);
padding: 0 var(--admin-space-2xs);
border-radius: var(--admin-radius-sm);
}
.admin-access-control__card {
background: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-lg);
box-shadow: var(--admin-shadow-card);
}
.admin-access-control__card-head {
display: flex;
align-items: flex-start;
gap: var(--admin-space);
padding: var(--admin-space-lg) var(--admin-space-xl);
border-bottom: 1px solid var(--admin-border-light);
background: linear-gradient(180deg, var(--admin-grey-50) 0%, transparent 100%);
border-top-left-radius: var(--admin-radius-lg);
border-top-right-radius: var(--admin-radius-lg);
}
@media (max-width: 1024px) {
.admin-access-control__card-head {
padding: var(--admin-space-md) var(--admin-space-lg);
}
}
.admin-access-control__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 3.6rem;
flex-shrink: 0;
border-radius: var(--admin-radius);
background: var(--admin-primary-light);
color: var(--admin-primary);
}
.admin-access-control__card-icon i {
color: var(--admin-primary);
}
.admin-access-control__card-headtxt {
display: flex;
flex-direction: column;
gap: var(--admin-space-3xs);
min-width: 0;
}
.admin-access-control__card-title {
color: var(--admin-text);
margin: 0;
}
.admin-access-control__card-desc {
margin: 0;
}
.admin-access-control__card-toggle {
margin-left: auto;
flex-shrink: 0;
padding-top: var(--admin-space-3xs);
}
.admin-access-control__card-body {
padding: var(--admin-space-xl);
}
@media (max-width: 1024px) {
.admin-access-control__card-body {
padding: var(--admin-space-lg);
}
}
.admin-access-control__form {
max-width: none;
margin-bottom: var(--admin-space-xl);
}
.admin-access-control__fields {
display: flex;
flex-direction: column;
gap: var(--admin-space-lg);
}
.admin-access-control__fields .admin-form__block {
margin-bottom: 0;
}
.admin-access-control__ip-methods {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--admin-space-sm);
}
.admin-access-control__ip-methods .admin-access-control__cidr {
flex: 1 1 28rem;
min-width: 0;
}
@media (max-width: 544px) {
.admin-access-control__ip-methods .admin-access-control__cidr {
flex-basis: 100%;
}
}
.admin-access-control__or {
white-space: nowrap;
}
.admin-access-control__octets {
display: flex;
align-items: center;
gap: var(--admin-space-2xs);
}
.admin-access-control__octet {
width: 4.4rem;
height: var(--admin-size-input-height);
text-align: center;
padding: 0 var(--admin-space-2xs);
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
color: var(--admin-text);
}
.admin-access-control__octet:focus-visible {
outline: none;
border-color: var(--admin-border-focus);
box-shadow: var(--admin-focus-ring);
}
.admin-access-control__octet-dot {
color: var(--admin-text-muted);
user-select: none;
}
.admin-access-control__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-sm);
margin-top: var(--admin-space-lg);
}
.admin-access-control__submit {
margin-left: auto;
}
.admin-access-control__list {
display: flex;
flex-direction: column;
}
.admin-access-control__row {
display: flex;
align-items: center;
gap: var(--admin-space-lg);
padding: var(--admin-space-sm) 0;
}
.admin-access-control__row + .admin-access-control__row {
border-top: 1px solid var(--admin-border-light);
}
@media (max-width: 544px) {
.admin-access-control__row {
flex-wrap: wrap;
gap: var(--admin-space-xs);
}
}
.admin-access-control__row-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--admin-space-3xs);
}
.admin-access-control__row-memo {
color: var(--admin-text-secondary);
}
.admin-access-control__row-meta {
color: var(--admin-text-muted);
white-space: nowrap;
}
.admin-access-control__row-actions {
margin-left: var(--admin-space-md);
flex-shrink: 0;
}
.admin-access-control__mono {
font-family: "Poppins", sans-serif;
color: var(--admin-text);
}
.admin-access-control__country-cell {
display: inline-flex;
align-items: center;
gap: var(--admin-space-xs);
color: var(--admin-text);
}
.admin-access-control__country-cell .locale-flag {
flex-shrink: 0;
}
.admin-access-control__muted {
color: var(--admin-text-muted);
}
.admin-slots-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--admin-space-sm) var(--admin-space);
margin-bottom: var(--admin-space-lg);
}
.admin-slots-toolbar__label {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-slots-calendar__legend {
margin-left: var(--admin-space);
}
.admin-posts__fc-root {
margin-top: 2rem;
}
.fc {
--fc-border-color: var(--admin-border-light);
--fc-page-bg-color: var(--admin-white);
--fc-neutral-bg-color: var(--admin-grey-50);
--fc-today-bg-color: rgba(var(--admin-primary-rgb), 0.05);
--fc-highlight-color: rgba(var(--admin-primary-rgb), 0.12);
--fc-event-bg-color: var(--admin-primary);
--fc-event-border-color: var(--admin-primary);
--fc-event-text-color: var(--admin-on-primary);
font-size: var(--admin-fs-body);
color: var(--admin-text);
}
.fc .fc-scrollgrid {
border-radius: var(--admin-radius);
overflow: hidden;
}
.fc .fc-toolbar.fc-header-toolbar {
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.6rem;
}
.fc .fc-toolbar-title {
font-size: var(--admin-fs-subtitle);
font-weight: 700;
color: var(--admin-text);
letter-spacing: -0.01em;
}
.fc .fc-button {
height: 3.2rem;
padding: 0 1.1rem;
font-size: var(--admin-fs-base);
font-weight: 500;
line-height: 1;
background: var(--admin-white);
border: 1px solid var(--admin-border);
color: var(--admin-text-secondary);
border-radius: var(--admin-radius-sm);
box-shadow: none;
text-transform: none;
transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.fc .fc-button:hover {
background: var(--admin-grey-100);
border-color: var(--admin-border-strong);
color: var(--admin-text);
}
.fc .fc-button:focus {
box-shadow: none;
}
.fc .fc-button:focus-visible {
outline: none;
box-shadow: var(--admin-focus-ring);
}
.fc .fc-button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.fc .fc-button .fc-icon {
font-size: 1.6rem;
}
.fc .fc-prev-button,
.fc .fc-next-button {
padding: 0 0.9rem;
color: var(--admin-text-tertiary);
}
.fc .fc-today-button {
background: transparent;
border-color: rgba(var(--admin-primary-rgb), 0.45);
color: var(--admin-primary-text);
font-weight: 600;
}
.fc .fc-today-button:hover:not(:disabled) {
background: var(--admin-primary-light);
border-color: var(--admin-primary);
color: var(--admin-primary);
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
background: var(--admin-primary);
border-color: var(--admin-primary);
color: var(--admin-on-primary);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.fc .fc-button-primary:not(:disabled).fc-button-active:hover,
.fc .fc-button-primary:not(:disabled):active:hover {
background: var(--admin-primary-hover);
border-color: var(--admin-primary-hover);
color: var(--admin-on-primary);
}
.fc .fc-button-primary:not(:disabled).fc-button-active:focus-visible,
.fc .fc-button-primary:not(:disabled):active:focus-visible {
box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.3);
}
.fc .fc-col-header-cell {
background: var(--admin-grey-50);
padding: 0.8rem 0;
}
.fc .fc-col-header-cell-cushion {
font-size: var(--admin-fs-sm);
font-weight: 600;
color: var(--admin-text-secondary);
text-decoration: none;
padding: 0.4rem;
}
.fc .fc-col-header-cell.fc-day-sun .fc-col-header-cell-cushion {
color: var(--admin-error);
}
.fc .fc-col-header-cell.fc-day-sat .fc-col-header-cell-cushion {
color: var(--admin-primary);
}
.fc .fc-daygrid-day-frame {
cursor: pointer;
min-height: 8rem;
transition: background var(--admin-duration-short) var(--admin-ease);
}
.fc .fc-daygrid-day:hover .fc-daygrid-day-frame {
background: var(--admin-grey-50);
}
.fc .fc-daygrid-day-number {
font-size: var(--admin-fs-base);
font-weight: 500;
color: var(--admin-text);
padding: 0.5rem 0.7rem;
text-decoration: none;
}
.fc .fc-day-sun .fc-daygrid-day-number {
color: var(--admin-error);
}
.fc .fc-day-sat .fc-daygrid-day-number {
color: var(--admin-primary);
}
.fc .fc-day-other .fc-daygrid-day-number {
color: var(--admin-text-disabled);
}
.fc .fc-day-today .fc-daygrid-day-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
height: 2.4rem;
margin: 0.3rem 0.4rem;
padding: 0;
background: var(--admin-primary);
color: var(--admin-on-primary);
border-radius: var(--admin-radius-full);
font-weight: 700;
}
.fc .fc-daygrid-event {
cursor: pointer;
border: none;
border-radius: var(--admin-radius-xs);
padding: 0.3rem 0.6rem;
margin-top: 0.2rem;
font-size: var(--admin-fs-sm);
font-weight: 600;
line-height: 1.4;
box-shadow: 0 1px 2px rgba(var(--admin-primary-rgb), 0.25);
transition: filter var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.fc .fc-daygrid-event .fc-event-title {
font-weight: 600;
}
.fc .fc-daygrid-event:hover {
filter: brightness(0.93);
box-shadow: 0 2px 6px rgba(var(--admin-primary-rgb), 0.35);
}
.fc .fc-daygrid-event:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--admin-white), 0 0 0 4px rgba(var(--admin-primary-rgb), 0.55);
}
.fc .fc-daygrid-more-link {
font-size: var(--admin-fs-xs);
font-weight: 600;
color: var(--admin-primary-text);
cursor: pointer;
}
.fc .fc-daygrid-more-link:hover {
color: var(--admin-primary);
text-decoration: underline;
}
@media (max-width: 640px) {
.fc .fc-toolbar.fc-header-toolbar {
flex-direction: column;
align-items: stretch;
}
.fc .fc-toolbar-chunk {
display: flex;
justify-content: center;
}
.fc .fc-daygrid-day-frame {
min-height: 6rem;
}
}
/*# sourceMappingURL=style.css.map */