@charset "UTF-8";
@import url("/assets/fonts/Pretendard/web/static/pretendard.css");
/* http://meyerweb.com/eric/tools/css/reset/ 
	v2.0 | 20110126
	License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
main, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body, a,
button,
select,
input,
textarea,
option {
  font-family: var(--family-base);
  font-size: var(--body-sm-fs);
  font-weight: var(--body-sm-fw);
  line-height: var(--body-sm-lh);
  word-break: keep-all;
}

:root {
  /* === base === */
  --clr-base-white: #ffffff;
  --clr-base-black: #000000;
  --clr-base-background: #0a0a0a;
  --clr-base-background-hover: #111111;
  --clr-base-background-light: #141414;
  --clr-scroll-thumb: #212121;
  --clr-text-base: #ffffff;
  --clr-text-desc: #888888;
  /* === primary scale (50–900, anchor 500 = brand #00C9D4) === */
  --clr-primary-50: #e0fafb;
  --clr-primary-100: #b3f2f5;
  --clr-primary-200: #7de8ed;
  --clr-primary-300: #3ddbe0;
  --clr-primary-400: #12d4da;
  --clr-primary-500: #00c9d4;
  --clr-primary-600: #009fa9;
  --clr-primary-700: #007880;
  --clr-primary-800: #005559;
  --clr-primary-900: #003538;
  /* === gray scale === */
  --clr-gray-50: #f7f7f7;
  --clr-gray-100: #ececec;
  --clr-gray-200: #d4d4d4;
  --clr-gray-300: #b0b0b0;
  --clr-gray-400: #888888;
  --clr-gray-500: #666666;
  --clr-gray-600: #444444;
  --clr-gray-700: #2a2a2a;
  --clr-gray-800: #1a1a1a;
  --clr-gray-900: #111111;
  /* === shared overlays === */
  --clr-overlay-black-35: rgba(0, 0, 0, 0.35);
}

:root {
  /* === primary (brand #00C9D4) === */
  --clr-primary-main: #00c9d4;
  --clr-primary-hover: var(--clr-primary-400);
  --clr-primary-shadow: rgba(0, 201, 212, 0.42);
  --clr-primary-shadow-soft: rgba(0, 201, 212, 0.18);
  /* === secondary (neutral; buttons / accents) === */
  --clr-secondary-main: var(--clr-gray-100);
  --clr-secondary-hover: var(--clr-base-white);
  --clr-secondary-50: var(--clr-gray-800);
  /* === common === */
  --clr-common-background: #0a0a0a;
  --clr-common-on-background: var(--clr-base-white);
  /* === text === */
  --clr-text-primary: var(--clr-gray-50);
  --clr-text-secondary: var(--clr-gray-400);
  --clr-text-tertiary: var(--clr-gray-500);
  --clr-text-muted: var(--clr-gray-100);
  /* === background === */
  --clr-background-paper: var(--clr-gray-900);
  --clr-background-primary: #0a0a0a;
  --clr-background-secondary: var(--clr-primary-900);
  --clr-background-philo: var(--clr-gray-800);
  /* === main landing (main.scss) === */
  --clr-main-section-bg: #0a0a0a;
  --clr-main-content-bg: rgba(10, 10, 10, 0.58);
  --clr-main-content-border: rgba(0, 201, 212, 0.18);
  --clr-main-content-shadow: rgba(0, 0, 0, 0.45);
  --clr-main-text-muted: rgba(248, 250, 252, 0.88);
  --clr-main-pager-border: rgba(255, 255, 255, 0.45);
  --clr-main-pager-border-strong: rgba(255, 255, 255, 0.85);
  --clr-main-scroll-border: rgba(255, 255, 255, 0.35);
  --clr-main-scroll-bg: rgba(10, 10, 10, 0.35);
  --clr-main-scroll-hover-bg: rgba(0, 201, 212, 0.25);
  --clr-main-scroll-hover-border: rgba(0, 201, 212, 0.65);
  --clr-main-focus-ring: rgba(0, 201, 212, 0.9);
  /* === company page (company.scss) — shell & hero === */
  --clr-company-shell-bg: #0a0a0a;
  --clr-company-hero-overlay-1: rgba(10, 10, 10, 0.92);
  --clr-company-hero-overlay-2: rgba(10, 10, 10, 0.45);
  --clr-company-hero-overlay-3: rgba(10, 10, 10, 0.25);
  --clr-company-text-kicker: rgba(255, 255, 255, 0.75);
  --clr-company-text-lead: rgba(255, 255, 255, 0.88);
  --clr-company-possibility-copy: rgba(255, 255, 255, 0.92);
  /* possibility */
  --clr-company-possibility-bg: #111111;
  --clr-company-possibility-overlay: rgba(0, 0, 0, 0.72);
  /* service (light contrast section) */
  --clr-company-service-bg: #ffffff;
  --clr-company-service-text: #111111;
  --clr-company-service-heading: #0a0a0a;
  --clr-company-service-border: #e5e5e5;
  --clr-company-service-icon-tint: rgba(0, 201, 212, 0.08);
  --clr-company-service-sub: #6b7280;
  --clr-company-service-body: #4b5563;
  --clr-company-service-detail: #374151;
  --clr-company-aside-bg: #f5f5f5;
  --clr-company-aside-border: #e0e0e0;
  --clr-company-aside-link-hover: #00c9d4;
  /* project reference */
  --clr-company-project-bg: #0d1117;
  --clr-company-project-fade-0: rgba(13, 17, 23, 0);
  --clr-company-project-fade-mid: rgba(13, 17, 23, 0.55);
  --clr-company-project-nav-border: rgba(255, 255, 255, 0.22);
  --clr-company-project-nav-hover-bg: rgba(0, 201, 212, 0.08);
  --clr-company-project-nav-hover-border: rgba(0, 201, 212, 0.45);
  --clr-company-project-timeline: rgba(255, 255, 255, 0.22);
  --clr-company-project-desc: rgba(255, 255, 255, 0.72);
  /* portfolio */
  --clr-company-portfolio-bg: #0a0a0a;
  --clr-company-portfolio-card-bg: #141414;
  --clr-company-portfolio-cap-gradient-end: rgba(0, 0, 0, 0.82);
  /* clients & marquee */
  --clr-company-clients-text: rgba(255, 255, 255, 0.78);
  --clr-company-tabs-border: rgba(255, 255, 255, 0.15);
  --clr-company-tabs-text: rgba(255, 255, 255, 0.55);
  --clr-company-marquee-edge: rgba(255, 255, 255, 0.08);
  --clr-company-marquee-bg: rgba(255, 255, 255, 0.03);
  /* contact form */
  --clr-company-contact-lead: rgba(255, 255, 255, 0.82);
  --clr-company-form-bg: rgba(10, 10, 10, 0.85);
  --clr-company-form-border: rgba(255, 255, 255, 0.08);
  --clr-company-label: rgba(255, 255, 255, 0.75);
  --clr-company-error: #f87171;
  --clr-company-input-bg: rgba(0, 0, 0, 0.35);
  --clr-company-input-border: rgba(255, 255, 255, 0.12);
  --clr-company-input-placeholder: rgba(255, 255, 255, 0.38);
  --clr-company-input-focus: rgba(0, 201, 212, 0.65);
  --clr-company-privacy-text: rgba(255, 255, 255, 0.88);
  --clr-company-privacy-border: rgba(255, 255, 255, 0.38);
  --clr-company-privacy-face-bg: rgba(0, 0, 0, 0.45);
  --clr-company-privacy-focus: rgba(0, 201, 212, 0.85);
  --clr-company-captcha-border: rgba(255, 255, 255, 0.15);
  --clr-company-captcha-refresh-border: rgba(255, 255, 255, 0.18);
  --clr-company-captcha-refresh-text: rgba(255, 255, 255, 0.85);
  --clr-company-captcha-refresh-hover-border: rgba(0, 201, 212, 0.45);
  --clr-company-captcha-refresh-hover-bg: rgba(0, 201, 212, 0.08);
  /* location */
  --clr-company-location-bg: #111111;
  --clr-company-location-divider: #222222;
  --clr-company-location-dt: #888888;
  --clr-company-email-underline: rgba(255, 255, 255, 0.45);
  --clr-company-email-underline-hover: rgba(255, 255, 255, 0.85);
}

:root {
  /* 전체 텍스트 Pretendard 통일 (한/영/디스플레이 모두). 폴백은 Pretendard 로드 실패 시에만 사용 */
  --family-pretendard: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --family-satoshi: var(--family-pretendard);
  --family-bebas: var(--family-pretendard);
  --family-outfit: var(--family-pretendard);
  /* === Display (히어로/대제목) === */
  --display-xs-fs: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem);
  --display-sm-fs: clamp(3.6rem, 2.3300970874vw + 2.7262135922rem, 8.5980582524rem);
  --display-md-fs: clamp(4rem, 3.1067961165vw + 2.8349514563rem, 10.6640776699rem);
  --display-lg-fs: clamp(6.9rem, 3.8187702265vw + 5.467961165rem, 15.0912621359rem);
  --display-xl-fs: clamp(8rem, 6.9902912621vw + 5.3786407767rem, 22.9941747573rem);
  --display-xs-lh: 1.25;
  --display-sm-lh: 1.2;
  --display-md-lh: 1.15;
  --display-lg-lh: 1.12;
  --display-xl-lh: 1.1;
  --display-xs-fw: 500;
  --display-sm-fw: 500;
  --display-md-fw: 500;
  --display-lg-fw: 500;
  --display-xl-fw: 500;
  /* === Heading (섹션 타이틀) === */
  --heading-xs-fs: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  --heading-sm-fs: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 3.1883495146rem);
  --heading-md-fs: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem);
  --heading-lg-fs: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 4.0660194175rem);
  --heading-xl-fs: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 5.5766990291rem);
  --heading-xs-lh: 1.45;
  --heading-sm-lh: 1.4;
  --heading-md-lh: 1.35;
  --heading-lg-lh: 1.333;
  --heading-xl-lh: 1.25;
  --heading-xs-fw: 500;
  --heading-sm-fw: 500;
  --heading-md-fw: 500;
  --heading-lg-fw: 500;
  --heading-xl-fw: 500;
  /* === Body (본문/UI 텍스트) === */
  --body-xs-fs: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  --body-sm-fs: clamp(1.3rem, 0.1941747573vw + 1.227184466rem, 1.7165048544rem);
  --body-md-fs: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem); /* 기본 본문 */
  --body-lg-fs: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2.1941747573rem);
  --body-xl-fs: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
  --body-xs-lh: 1.6;
  --body-sm-lh: 1.6;
  --body-md-lh: 1.65;
  --body-lg-lh: 1.6;
  --body-xl-lh: 1.55;
  --body-xs-fw: 400;
  --body-sm-fw: 400;
  --body-md-fw: 400;
  --body-lg-fw: 400;
  --body-xl-fw: 400;
  /* === Letter-spacing (자간) — CMS 텍스트 인라인 서식 프리셋 === */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
}

:root {
  /* === Section spacing (섹션 상·하단 패딩) === */
  --section-xs: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem);
  --section-sm: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem);
  --section-md: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 11.4640776699rem);
  --section-lg: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 15.2854368932rem);
  --section-xl: clamp(9.6rem, 4.142394822vw + 8.0466019417rem, 18.4854368932rem);
  /* === Work 섹션 여백 전용 스케일 (CMS 캔버스 섹션 위/아래 여백 프리셋) ===
     전역 --section-* 보다 크게 잡아 섹션 사이를 시원하게. 전역 토큰과 분리해
     다른 페이지 섹션 간격에 영향 주지 않는다. */
  --work-pad-xs: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem);
  --work-pad-sm: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem);
  --work-pad-md: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 11.4640776699rem);
  --work-pad-lg: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 15.2854368932rem);
  --work-pad-xl: clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 30.5708737864rem);
  /* === Border Radius (유동 반경) === */
  --radius-xs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4776699029rem);
  --radius-sm: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
  --radius-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
  --radius-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.8660194175rem);
  --radius-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.8213592233rem);
  --radius-round: 9999px;
  /* === Spacing (마진·패딩 기본 단위, fluid 적용) === */
  --spacing-xxs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4776699029rem);
  --spacing-xs: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
  --spacing-sm: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.4330097087rem);
  --spacing-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
  --spacing-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.8660194175rem);
  --spacing-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.8213592233rem);
  --spacing-2xl: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem);
  --spacing-3xl: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem);
  --spacing-4xl: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 11.4640776699rem);
  --spacing-5xl: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 15.2854368932rem);
}

:root {
  --gutter: 2.4rem;
  /* 고정 헤더 + 노치/상단 세이프 에어리어 — 본문 padding-top·sticky offset과 동일 기준 */
  --header-height: calc(8rem + env(safe-area-inset-top, 0px));
  --header-z-index: 1000;
  --sub-nav-height: 7rem;
  --drawer-z-index: 1100;
  --tran-15: 0.15s ease-in-out;
  --tran-3: 0.3s ease-in-out;
  --family-base: var(--family-satoshi);
  --family-kr: var(--family-pretendard);
  --family-title: var(--family-bebas);
}
@media (max-width: 1024px) {
  :root {
    --header-height: calc(5.6rem + env(safe-area-inset-top, 0px));
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  font-size: 62.5%;
}

body {
  background: var(--clr-background-paper);
}

::selection {
  background: var(--clr-primary-main);
  color: var(--clr-base-white);
}

::-webkit-scrollbar {
  background-color: var(--clr-scroll-thumb);
  width: 0.3rem;
}

::-webkit-scrollbar-thumb {
  background-color: var(--clr-primary-main);
}

a,
button,
select,
input,
textarea,
option {
  font-size: var(--body-sm-fs);
}

ul,
ol,
li {
  list-style: none;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
}

em,
address {
  font-style: normal;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

label {
  cursor: pointer;
}

textarea {
  resize: none;
}

input,
textarea,
select,
option {
  border: none;
  outline: none;
}

.no-container-2xl {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-xl {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-lg {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-md {
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-sm {
  max-width: 544px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-xs {
  max-width: 450px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-xxs {
  max-width: 375px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-mg-xxs {
  margin: var(--spacing-xxs);
}

.no-mg-xxs--l {
  margin-left: var(--spacing-xxs);
}

.no-mg-xxs--r {
  margin-right: var(--spacing-xxs);
}

.no-mg-xxs--t {
  margin-top: var(--spacing-xxs);
}

.no-mg-xxs--b {
  margin-bottom: var(--spacing-xxs);
}

.no-mg-xxs--x {
  margin-inline: var(--spacing-xxs);
}

.no-mg-xxs--y {
  margin-block: var(--spacing-xxs);
}

.no-mg-xs {
  margin: var(--spacing-xs);
}

.no-mg-xs--l {
  margin-left: var(--spacing-xs);
}

.no-mg-xs--r {
  margin-right: var(--spacing-xs);
}

.no-mg-xs--t {
  margin-top: var(--spacing-xs);
}

.no-mg-xs--b {
  margin-bottom: var(--spacing-xs);
}

.no-mg-xs--x {
  margin-inline: var(--spacing-xs);
}

.no-mg-xs--y {
  margin-block: var(--spacing-xs);
}

.no-mg-sm {
  margin: var(--spacing-sm);
}

.no-mg-sm--l {
  margin-left: var(--spacing-sm);
}

.no-mg-sm--r {
  margin-right: var(--spacing-sm);
}

.no-mg-sm--t {
  margin-top: var(--spacing-sm);
}

.no-mg-sm--b {
  margin-bottom: var(--spacing-sm);
}

.no-mg-sm--x {
  margin-inline: var(--spacing-sm);
}

.no-mg-sm--y {
  margin-block: var(--spacing-sm);
}

.no-mg-md {
  margin: var(--spacing-md);
}

.no-mg-md--l {
  margin-left: var(--spacing-md);
}

.no-mg-md--r {
  margin-right: var(--spacing-md);
}

.no-mg-md--t {
  margin-top: var(--spacing-md);
}

.no-mg-md--b {
  margin-bottom: var(--spacing-md);
}

.no-mg-md--x {
  margin-inline: var(--spacing-md);
}

.no-mg-md--y {
  margin-block: var(--spacing-md);
}

.no-mg-lg {
  margin: var(--spacing-lg);
}

.no-mg-lg--l {
  margin-left: var(--spacing-lg);
}

.no-mg-lg--r {
  margin-right: var(--spacing-lg);
}

.no-mg-lg--t {
  margin-top: var(--spacing-lg);
}

.no-mg-lg--b {
  margin-bottom: var(--spacing-lg);
}

.no-mg-lg--x {
  margin-inline: var(--spacing-lg);
}

.no-mg-lg--y {
  margin-block: var(--spacing-lg);
}

.no-mg-xl {
  margin: var(--spacing-xl);
}

.no-mg-xl--l {
  margin-left: var(--spacing-xl);
}

.no-mg-xl--r {
  margin-right: var(--spacing-xl);
}

.no-mg-xl--t {
  margin-top: var(--spacing-xl);
}

.no-mg-xl--b {
  margin-bottom: var(--spacing-xl);
}

.no-mg-xl--x {
  margin-inline: var(--spacing-xl);
}

.no-mg-xl--y {
  margin-block: var(--spacing-xl);
}

.no-mg-2xl {
  margin: var(--spacing-2xl);
}

.no-mg-2xl--l {
  margin-left: var(--spacing-2xl);
}

.no-mg-2xl--r {
  margin-right: var(--spacing-2xl);
}

.no-mg-2xl--t {
  margin-top: var(--spacing-2xl);
}

.no-mg-2xl--b {
  margin-bottom: var(--spacing-2xl);
}

.no-mg-2xl--x {
  margin-inline: var(--spacing-2xl);
}

.no-mg-2xl--y {
  margin-block: var(--spacing-2xl);
}

.no-mg-3xl {
  margin: var(--spacing-3xl);
}

.no-mg-3xl--l {
  margin-left: var(--spacing-3xl);
}

.no-mg-3xl--r {
  margin-right: var(--spacing-3xl);
}

.no-mg-3xl--t {
  margin-top: var(--spacing-3xl);
}

.no-mg-3xl--b {
  margin-bottom: var(--spacing-3xl);
}

.no-mg-3xl--x {
  margin-inline: var(--spacing-3xl);
}

.no-mg-3xl--y {
  margin-block: var(--spacing-3xl);
}

.no-mg-4xl {
  margin: var(--spacing-4xl);
}

.no-mg-4xl--l {
  margin-left: var(--spacing-4xl);
}

.no-mg-4xl--r {
  margin-right: var(--spacing-4xl);
}

.no-mg-4xl--t {
  margin-top: var(--spacing-4xl);
}

.no-mg-4xl--b {
  margin-bottom: var(--spacing-4xl);
}

.no-mg-4xl--x {
  margin-inline: var(--spacing-4xl);
}

.no-mg-4xl--y {
  margin-block: var(--spacing-4xl);
}

.no-mg-5xl {
  margin: var(--spacing-5xl);
}

.no-mg-5xl--l {
  margin-left: var(--spacing-5xl);
}

.no-mg-5xl--r {
  margin-right: var(--spacing-5xl);
}

.no-mg-5xl--t {
  margin-top: var(--spacing-5xl);
}

.no-mg-5xl--b {
  margin-bottom: var(--spacing-5xl);
}

.no-mg-5xl--x {
  margin-inline: var(--spacing-5xl);
}

.no-mg-5xl--y {
  margin-block: var(--spacing-5xl);
}

.no-pd-xxs {
  padding: var(--spacing-xxs);
}

.no-pd-xxs--l {
  padding-left: var(--spacing-xxs);
}

.no-pd-xxs--r {
  padding-right: var(--spacing-xxs);
}

.no-pd-xxs--t {
  padding-top: var(--spacing-xxs);
}

.no-pd-xxs--b {
  padding-bottom: var(--spacing-xxs);
}

.no-pd-xxs--x {
  padding-inline: var(--spacing-xxs);
}

.no-pd-xxs--y {
  padding-block: var(--spacing-xxs);
}

.no-pd-xs {
  padding: var(--spacing-xs);
}

.no-pd-xs--l {
  padding-left: var(--spacing-xs);
}

.no-pd-xs--r {
  padding-right: var(--spacing-xs);
}

.no-pd-xs--t {
  padding-top: var(--spacing-xs);
}

.no-pd-xs--b {
  padding-bottom: var(--spacing-xs);
}

.no-pd-xs--x {
  padding-inline: var(--spacing-xs);
}

.no-pd-xs--y {
  padding-block: var(--spacing-xs);
}

.no-pd-sm {
  padding: var(--spacing-sm);
}

.no-pd-sm--l {
  padding-left: var(--spacing-sm);
}

.no-pd-sm--r {
  padding-right: var(--spacing-sm);
}

.no-pd-sm--t {
  padding-top: var(--spacing-sm);
}

.no-pd-sm--b {
  padding-bottom: var(--spacing-sm);
}

.no-pd-sm--x {
  padding-inline: var(--spacing-sm);
}

.no-pd-sm--y {
  padding-block: var(--spacing-sm);
}

.no-pd-md {
  padding: var(--spacing-md);
}

.no-pd-md--l {
  padding-left: var(--spacing-md);
}

.no-pd-md--r {
  padding-right: var(--spacing-md);
}

.no-pd-md--t {
  padding-top: var(--spacing-md);
}

.no-pd-md--b {
  padding-bottom: var(--spacing-md);
}

.no-pd-md--x {
  padding-inline: var(--spacing-md);
}

.no-pd-md--y {
  padding-block: var(--spacing-md);
}

.no-pd-lg {
  padding: var(--spacing-lg);
}

.no-pd-lg--l {
  padding-left: var(--spacing-lg);
}

.no-pd-lg--r {
  padding-right: var(--spacing-lg);
}

.no-pd-lg--t {
  padding-top: var(--spacing-lg);
}

.no-pd-lg--b {
  padding-bottom: var(--spacing-lg);
}

.no-pd-lg--x {
  padding-inline: var(--spacing-lg);
}

.no-pd-lg--y {
  padding-block: var(--spacing-lg);
}

.no-pd-xl {
  padding: var(--spacing-xl);
}

.no-pd-xl--l {
  padding-left: var(--spacing-xl);
}

.no-pd-xl--r {
  padding-right: var(--spacing-xl);
}

.no-pd-xl--t {
  padding-top: var(--spacing-xl);
}

.no-pd-xl--b {
  padding-bottom: var(--spacing-xl);
}

.no-pd-xl--x {
  padding-inline: var(--spacing-xl);
}

.no-pd-xl--y {
  padding-block: var(--spacing-xl);
}

.no-pd-2xl {
  padding: var(--spacing-2xl);
}

.no-pd-2xl--l {
  padding-left: var(--spacing-2xl);
}

.no-pd-2xl--r {
  padding-right: var(--spacing-2xl);
}

.no-pd-2xl--t {
  padding-top: var(--spacing-2xl);
}

.no-pd-2xl--b {
  padding-bottom: var(--spacing-2xl);
}

.no-pd-2xl--x {
  padding-inline: var(--spacing-2xl);
}

.no-pd-2xl--y {
  padding-block: var(--spacing-2xl);
}

.no-pd-3xl {
  padding: var(--spacing-3xl);
}

.no-pd-3xl--l {
  padding-left: var(--spacing-3xl);
}

.no-pd-3xl--r {
  padding-right: var(--spacing-3xl);
}

.no-pd-3xl--t {
  padding-top: var(--spacing-3xl);
}

.no-pd-3xl--b {
  padding-bottom: var(--spacing-3xl);
}

.no-pd-3xl--x {
  padding-inline: var(--spacing-3xl);
}

.no-pd-3xl--y {
  padding-block: var(--spacing-3xl);
}

.no-pd-4xl {
  padding: var(--spacing-4xl);
}

.no-pd-4xl--l {
  padding-left: var(--spacing-4xl);
}

.no-pd-4xl--r {
  padding-right: var(--spacing-4xl);
}

.no-pd-4xl--t {
  padding-top: var(--spacing-4xl);
}

.no-pd-4xl--b {
  padding-bottom: var(--spacing-4xl);
}

.no-pd-4xl--x {
  padding-inline: var(--spacing-4xl);
}

.no-pd-4xl--y {
  padding-block: var(--spacing-4xl);
}

.no-pd-5xl {
  padding: var(--spacing-5xl);
}

.no-pd-5xl--l {
  padding-left: var(--spacing-5xl);
}

.no-pd-5xl--r {
  padding-right: var(--spacing-5xl);
}

.no-pd-5xl--t {
  padding-top: var(--spacing-5xl);
}

.no-pd-5xl--b {
  padding-bottom: var(--spacing-5xl);
}

.no-pd-5xl--x {
  padding-inline: var(--spacing-5xl);
}

.no-pd-5xl--y {
  padding-block: var(--spacing-5xl);
}

.no-kr {
  font-family: var(--family-pretendard);
}

.no-en {
  font-family: var(--family-pretendard);
}

.no-title {
  font-family: var(--family-bebas);
  line-height: 1 !important;
}

/* === Display === */
.no-display-xs {
  font-size: var(--display-xs-fs);
  font-weight: var(--display-xs-fw);
  line-height: var(--display-xs-lh);
}

.no-display-sm {
  font-size: var(--display-sm-fs);
  font-weight: var(--display-sm-fw);
  line-height: var(--display-sm-lh);
}

.no-display-md {
  font-size: var(--display-md-fs);
  font-weight: var(--display-md-fw);
  line-height: var(--display-md-lh);
}

.no-display-lg {
  font-size: var(--display-lg-fs);
  font-weight: var(--display-lg-fw);
  line-height: var(--display-lg-lh);
}

.no-display-xl {
  font-size: var(--display-xl-fs);
  font-weight: var(--display-xl-fw);
  line-height: var(--display-xl-lh);
}

/* === Heading === */
.no-heading-xs {
  font-size: var(--heading-xs-fs);
  font-weight: var(--heading-xs-fw);
  line-height: var(--heading-xs-lh);
}

.no-heading-sm {
  font-size: var(--heading-sm-fs);
  font-weight: var(--heading-sm-fw);
  line-height: var(--heading-sm-lh);
}

.no-heading-md {
  font-size: var(--heading-md-fs);
  font-weight: var(--heading-md-fw);
  line-height: var(--heading-md-lh);
}

.no-heading-lg {
  font-size: var(--heading-lg-fs);
  font-weight: var(--heading-lg-fw);
  line-height: var(--heading-lg-lh);
}

.no-heading-xl {
  font-size: var(--heading-xl-fs);
  font-weight: var(--heading-xl-fw);
  line-height: var(--heading-xl-lh);
}

/* === Body === */
.no-body-xs {
  font-size: var(--body-xs-fs);
  font-weight: var(--body-xs-fw);
  line-height: var(--body-xs-lh);
}

.no-body-sm {
  font-size: var(--body-sm-fs);
  font-weight: var(--body-sm-fw);
  line-height: var(--body-sm-lh);
}

.no-body-md {
  font-size: var(--body-md-fs);
  font-weight: var(--body-md-fw);
  line-height: var(--body-md-lh);
} /* 기본 본문 */
.no-body-lg {
  font-size: var(--body-lg-fs);
  font-weight: var(--body-lg-fw);
  line-height: var(--body-lg-lh);
}

.no-body-xl {
  font-size: var(--body-xl-fs);
  font-weight: var(--body-xl-fw);
  line-height: var(--body-xl-lh);
}

/* === Prose === */
/* 본문 설명글용. 읽기 좋은 줄 길이(72ch) + 넉넉한 행간 + 한글 줄바꿈(keep-all) +
   긴 영문/URL 강제 줄바꿈 + text-wrap:pretty(고아 단어 방지).
   수동 <br>(특히 1024px 부근에서 어색하게 끊김)을 대체 — 설명 문단에 붙이고 <br>는 제거. */
.no-prose {
  max-width: 72ch;
  line-height: 1.618;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* === Section spacing (padding-y) === */
.no-section-xs {
  padding-top: var(--section-xs);
  padding-bottom: var(--section-xs);
}

.no-section-sm {
  padding-top: var(--section-sm);
  padding-bottom: var(--section-sm);
}

.no-section-md {
  padding-top: var(--section-md);
  padding-bottom: var(--section-md);
}

.no-section-lg {
  padding-top: var(--section-lg);
  padding-bottom: var(--section-lg);
}

.no-section-xl {
  padding-top: var(--section-xl);
  padding-bottom: var(--section-xl);
}

/* Below fixed header — pair with no-pd-*--b / no-section-* as needed */
.no-hero-under-header--sm {
  padding-top: calc(var(--header-height) + var(--section-sm));
}

.no-hero-under-header--md {
  padding-top: calc(var(--header-height) + var(--section-md));
}

.no-hero-under-header--lg {
  padding-top: calc(var(--header-height) + var(--section-lg));
}

.no-min-h-screen {
  min-height: 100vh;
}

/* === Border Radius === */
.no-radius-xs {
  border-radius: var(--radius-xs);
}

.no-radius-sm {
  border-radius: var(--radius-sm);
}

.no-radius-md {
  border-radius: var(--radius-md);
}

.no-radius-lg {
  border-radius: var(--radius-lg);
}

.no-radius-xl {
  border-radius: var(--radius-xl);
}

.no-radius-round {
  border-radius: var(--radius-round);
}

.no-heading__highlight {
  font-weight: 500;
  color: var(--clr-secondary-main);
  text-transform: uppercase;
}
.no-heading__title {
  font-size: var(--heading-lg-fs);
  font-weight: var(--heading-lg-fw);
  padding-top: 1.6rem;
}
.no-heading__desc {
  color: var(--clr-text-desc);
  padding-top: 0.8rem;
}

.no-base-button {
  position: static;
  margin: 0;
  width: 2.7rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  border-radius: 0.4rem;
  background: var(--clr-gray-50);
}
.no-base-button i {
  color: var(--clr-text-desc);
  font-size: 1.6rem;
}
.no-base-button::after {
  content: none;
}

.no-base-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.no-bedge-outline, .no-bedge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border-radius: 10rem;
}

.no-bedge {
  color: var(--clr-base-white);
  background: var(--clr-text-base);
}
.no-bedge-outline {
  background-color: transparent;
  color: var(--clr-text-base);
  border: 1px solid var(--clr-text-base);
}
.no-bedge--xs {
  line-height: 1;
  font-size: 1.2rem;
  padding: 0.4rem 0.8rem;
  border-radius: 5.5rem;
}

.no-section-hr {
  height: 0;
  border-top: 1px solid var(--clr-gray-300);
}

.no-bg--gray {
  background: var(--clr-gray-50);
}
.no-bg--primary-light {
  background: var(--clr-primary-50);
}

/* ============================================================
 * Media placeholder
 *  (logic: resources/ts/home/utils/MediaPlaceholder.ts)
 *
 * The old LQIP/blur-up pipeline added load listeners, animation classes, and
 * ScrollTrigger refreshes while scrolling. Work pages now use simple static
 * container backgrounds instead (e.g. .no-work-card__figure 배경), avoiding
 * per-image JS work.
 *
 * NOTE: 예전엔 모든 img/video 에 검정 배경(--clr-base-black)을 깔아 로드 전 빈
 * 공간을 채웠으나, 투명 로고(logo-white.svg)·PNG 뒤에까지 검정 박스가 비치는
 * 부작용이 있어 제거. 로드 전 빈 공간은 각 컨테이너 배경이 담당한다.
 * ============================================================ */
.no-hr {
  /* hr 브라우저 기본값(border-style: inset)이 border-color 를 무시하므로
     4면 border 를 모두 초기화한 뒤 border-top 만 명시. */
  height: 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  outline: none;
  display: block;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  color: rgba(255, 255, 255, 0.2);
  unicode-bidi: isolate;
  overflow: hidden;
}
.no-hr--y {
  margin-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}

.--hidden {
  overflow: hidden;
}

.--full-height {
  height: 100vh;
}
@supports (height: 100dvh) {
  .--full-height {
    height: 100dvh;
  }
}

.--flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.--flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.--tal {
  text-align: left;
}

.--tar {
  text-align: right;
}

.--tac {
  text-align: center;
}

@media (max-width: 768px) {
  .--wrap * br {
    display: none;
  }
}

.--blind {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.--highlight {
  color: var(--clr-primary-main);
}

.--gap-8 {
  gap: 0.8rem;
}

.--clr-base-white {
  color: var(--clr-base-white) !important;
}

.--clr-text-desc {
  color: var(--clr-text-desc);
}

.--clr-secondary-main {
  color: var(--clr-secondary-main);
}

.--100 {
  font-weight: 100;
}

.--200 {
  font-weight: 200;
}

.--300 {
  font-weight: 300;
}

.--400 {
  font-weight: 400;
}

.--500 {
  font-weight: 500;
}

.--600 {
  font-weight: 600;
}

.--700 {
  font-weight: 700;
}

.--800 {
  font-weight: 800;
}

.--900 {
  font-weight: 900;
}

.--ttu {
  text-transform: uppercase;
}

.--ttc {
  text-transform: capitalize;
}

.--ttl {
  text-transform: lowercase;
}

@media (max-width: 768px) {
  .--wrap-md br {
    display: none;
  }
}

.--clr-white {
  color: var(--clr-base-white);
}

.reveal-down {
  --dur: 0.9s;
  --stagger: 0.015s;
  --lift: 110%;
  --gap: 0.02em;
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: top;
  text-decoration: none;
}
.reveal-down,
.reveal-down * {
  text-decoration: none !important;
}
.reveal-down .wd {
  display: inline-block;
  white-space: nowrap;
  margin-right: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2.3883495146rem);
}
.reveal-down .wd:last-child {
  margin-right: 0;
}
.reveal-down .rd {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-right: var(--gap);
  vertical-align: top;
}
.reveal-down .rd:last-child {
  margin-right: 0;
}
.reveal-down .rd .char {
  display: inline-block;
  will-change: transform, opacity;
  transition: transform var(--dur) cubic-bezier(0.22, 1, 0.36, 1), opacity var(--dur) ease, color 0.3s;
  transition-delay: calc(var(--i) * var(--stagger));
  backface-visibility: hidden;
  transform: translateZ(0);
}
.reveal-down .rd .char.a {
  transform: translateY(0);
}
.reveal-down .rd .char.b {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(110%);
}
.reveal-down:hover .char.a {
  transform: translateY(calc(-1 * var(--lift)));
}
.reveal-down:hover .char.b {
  transform: translateY(0);
}

.reveal-char {
  overflow: hidden;
}
.reveal-char .word {
  display: inline-block;
  white-space: nowrap;
}
.reveal-char .char {
  display: inline-block;
  transform: translateY(100%);
  will-change: transform, opacity;
}

.reveal-wrap {
  position: relative;
}
.reveal-wrap.pc {
  display: block;
}
@media (max-width: 768px) {
  .reveal-wrap.pc {
    display: none;
  }
}
.reveal-wrap.m {
  display: none;
}
@media (max-width: 768px) {
  .reveal-wrap.m {
    display: block;
  }
}
.reveal-wrap .reveal {
  position: relative;
  overflow: hidden;
  margin: 0.6rem 0 0;
}
@media (max-width: 768px) {
  .reveal-wrap .reveal {
    margin: 0.4rem 0 0;
  }
}
.reveal-wrap .reveal .inner {
  display: block;
  transform: translateY(100%);
  will-change: transform;
}

.videomodal {
  display: none;
  position: fixed;
  z-index: 100000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
}
.videomodal.show {
  display: flex;
}
.videomodal.show .modal-content {
  opacity: 1;
}
.videomodal .modal-content {
  position: relative;
  padding: 2rem;
  max-width: 140rem;
  opacity: 0;
  transition: opacity 0.3s;
  width: 100%;
}
.videomodal .videoclose {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(2rem, 0.6472491909vw + 1.7572815534rem, 3.3883495146rem);
  cursor: pointer;
  color: #fff;
}
.videomodal .videocontainer {
  max-width: 140rem;
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
}

.sub-gallery {
  padding-top: clamp(12rem, 3.8834951456vw + 10.5436893204rem, 20.3300970874rem);
  overflow: hidden;
  padding-bottom: clamp(8rem, 3.8834951456vw + 6.5436893204rem, 16.3300970874rem);
}

/* 접근성: 시각적으로만 숨김(스크린리더·크롤러는 읽음). display:none 아님. */
.seo-headline {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

/* 접근성: skip link — 포커스 전엔 화면 밖, Tab 포커스 시 좌상단에 보임 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100001;
  padding: 0.8rem 1.6rem;
  background: #000;
  color: #fff;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  text-decoration: underline;
}
.skip-link:focus {
  left: 0;
}

/* skip link 타깃: 프로그래매틱 포커스 시 잔여 outline 억제(시각 표시는 "본문으로 이동"으로 충분) */
#main-content:focus {
  outline: none;
}

.search-box {
  position: relative;
  max-width: 30rem;
  width: 100%;
}
@media (max-width: 544px) {
  .search-box {
    max-width: 100%;
  }
}
.search-box .box-input {
  position: relative;
  width: 100%;
}
.search-box .box-input input {
  border-bottom: 0.2rem solid #222;
  width: 100%;
  height: 5.5rem;
  padding: 1.6rem 2rem 1.6rem 0;
  padding-right: 5rem;
  transition: border-color 0.3s ease;
  font-family: var(--family-pretendard);
  font-size: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
  line-height: 1.4;
  background-color: transparent;
}
.search-box .box-input input:focus {
  outline: none;
  border-bottom: 0.2rem solid #000;
  color: #000;
}
.search-box .box-input input::placeholder {
  color: #7f8388;
  font-family: var(--family-pretendard);
  font-size: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.9165048544rem);
  line-height: 1.4;
}
.search-box .box-input button {
  position: absolute;
  top: 50%;
  right: 0;
  font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  transform: translateY(-50%);
}
.search-box .box-input button i {
  color: #000;
}

/**
 * prefers-reduced-motion: reduce — 모션 민감 사용자 배려.
 * 애니메이션/트랜지션을 사실상 0으로, AOS 로 숨겨진 요소는 즉시 표시.
 * (Lenis 스무스 스크롤·GSAP ScrollTrigger 같은 JS 모션은 GlobalApplication.ts 에서 별도로 단락)
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.no-page-hero {
  padding-bottom: var(--spacing-3xl);
}
.no-page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.no-page-hero__body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem);
}
@media (max-width: 768px) {
  .no-page-hero__body {
    grid-template-columns: 1fr;
  }
}
.no-page-hero__eyebrow {
  font-size: clamp(1.364rem, 0.8828478964vw + 1.0329320388rem, 3.2577087379rem);
  line-height: var(--heading-sm-lh);
  font-weight: var(--heading-sm-fw);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: -0.01em;
}
.no-page-hero__heading {
  font-size: var(--heading-lg-fs);
  line-height: var(--heading-lg-lh);
  font-weight: var(--heading-lg-fw);
  color: var(--clr-base-white);
  letter-spacing: -0.01em;
}
.no-page-hero__heading span {
  display: block;
}
.no-page-hero__heading-line--primary {
  color: var(--clr-primary-main);
}
.no-page-hero__desc-title {
  padding-top: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.01em;
}
.no-page-hero__desc {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.01em;
}
.no-page-hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}
.no-page-hero--split .no-page-hero__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 3.2rem;
  row-gap: var(--spacing-xs);
  align-items: start;
}
.no-page-hero--split .no-page-hero__body {
  display: contents;
}
.no-page-hero--split .no-page-hero__eyebrow {
  grid-column: 1;
  grid-row: 1;
}
.no-page-hero--split .no-page-hero__heading {
  grid-column: 1;
  grid-row: 2;
}
.no-page-hero--split .no-page-hero__desc-wrap {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: start;
}
@media (max-width: 768px) {
  .no-page-hero--split .no-page-hero__inner {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-lg);
  }
  .no-page-hero--split .no-page-hero__eyebrow,
  .no-page-hero--split .no-page-hero__heading,
  .no-page-hero--split .no-page-hero__desc-wrap {
    grid-column: auto;
    grid-row: auto;
  }
}
.no-page-hero--aside .no-page-hero__inner {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  column-gap: clamp(4rem, 5.1779935275vw + 2.0582524272rem, 15.1067961165rem);
  row-gap: var(--spacing-xs);
  align-items: start;
}
.no-page-hero--aside .no-page-hero__body {
  display: contents;
}
.no-page-hero--aside .no-page-hero__eyebrow {
  grid-column: 1;
  grid-row: 1;
}
.no-page-hero--aside .no-page-hero__heading {
  grid-column: 1;
  grid-row: 2;
}
.no-page-hero--aside .no-page-hero__desc-wrap {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}
@media (max-width: 768px) {
  .no-page-hero--aside .no-page-hero__inner {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-lg);
  }
  .no-page-hero--aside .no-page-hero__eyebrow,
  .no-page-hero--aside .no-page-hero__heading,
  .no-page-hero--aside .no-page-hero__desc-wrap {
    grid-column: auto;
    grid-row: auto;
  }
}

.no-drawer {
  --drawer-dur: 1.2s;
  --drawer-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cp: 0%;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: var(--drawer-z-index);
  clip-path: polygon(0 0, 100% 0, 100% var(--cp), 0 var(--cp));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% var(--cp), 0 var(--cp));
  transition: clip-path var(--drawer-dur) var(--drawer-ease), -webkit-clip-path var(--drawer-dur) var(--drawer-ease);
  will-change: clip-path;
  overflow: hidden;
  padding: 0;
}
.no-drawer.active {
  --cp: 100%;
  pointer-events: auto;
}
.no-drawer.active .no-drawer__gnb .no-drawer__gnb-link .rd {
  transform: translateY(0);
}
.no-drawer.closing .no-drawer__gnb .no-drawer__gnb-link .rd {
  transform: translateY(110%);
}
.no-drawer .video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.no-drawer .video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.no-drawer .video-wrap::before, .no-drawer .video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.no-drawer .video-wrap::before {
  background-color: rgba(0, 0, 0, 0.7);
}
.no-drawer .video-wrap::after {
  z-index: 3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
}
.no-drawer__container {
  position: relative;
  z-index: 4;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12rem 6rem 4rem;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024px) {
  .no-drawer__container {
    padding: 12rem 2rem 4rem;
  }
}
.no-drawer__nav {
  width: 100%;
  margin: auto 0;
}
.no-drawer__gnb {
  width: 100%;
}
.no-drawer__gnb:hover .no-drawer__gnb-item {
  opacity: 0.4;
}
.no-drawer__gnb .no-drawer__gnb-item:hover {
  opacity: 1;
}
.no-drawer__gnb .no-drawer__gnb-item {
  transition: opacity 0.3s;
  width: max-content;
}
.no-drawer__gnb .no-drawer__gnb-item:hover .shop-link {
  max-height: 12rem;
  padding: clamp(1.5rem, 0.6472491909vw + 1.2572815534rem, 2.8883495146rem) 0 clamp(3rem, 0.6472491909vw + 2.7572815534rem, 4.3883495146rem);
  opacity: 1;
}
.no-drawer__gnb .no-drawer__gnb-item .no-drawer__gnb-link {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.no-drawer__gnb .no-drawer__gnb-item .no-drawer__gnb-link .rd {
  display: inline-block;
  overflow: hidden;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.no-drawer__gnb .no-drawer__gnb-item .shop-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2.3883495146rem);
  max-height: 0;
  padding: 0;
  opacity: 0;
  transition: max-height 0.4s var(--drawer-ease), padding 0.6s, opacity 0.25s;
  overflow: hidden;
}
.no-drawer__gnb .no-drawer__gnb-item .shop-link a {
  display: flex;
  align-items: center;
}
.no-drawer__gnb .no-drawer__gnb-item .shop-link a:hover img {
  transform: translate(0.4rem, -0.4rem);
}
.no-drawer__gnb .no-drawer__gnb-item .shop-link a img {
  width: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4.7766990291rem);
  transition: transform 0.3s;
}
.no-drawer .bottom-group {
  margin-top: clamp(4rem, 1.9417475728vw + 3.2718446602rem, 8.1650485437rem);
}
.no-drawer .bottom-group .top-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.no-drawer .bottom-group .top-group .sns-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.no-drawer .bottom-group .top-group .sns-group a {
  transition: opacity 0.3s;
}
.no-drawer .bottom-group .top-group .sns-group a:hover {
  opacity: 0.7;
}
.no-drawer .bottom-group .top-group .sns-group a img {
  width: clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.9553398058rem);
}
.no-drawer .bottom-group .top-group .language {
  display: none;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 768px) {
  .no-drawer .bottom-group .top-group .language {
    display: flex;
  }
}
.no-drawer .bottom-group .top-group .language a {
  opacity: 0.4;
  width: max-content;
  transition: opacity 0.3s, color 0.25s ease;
  color: #fff;
}
.no-drawer .bottom-group .top-group .language a:hover {
  opacity: 1;
}
.no-drawer .bottom-group .top-group .language a.active {
  opacity: 1;
  pointer-events: none;
}

body.drawer-open {
  overflow: hidden;
}

html[data-drawer-open=true] .no-header {
  visibility: hidden;
  pointer-events: none;
}

.drawer {
  --drawer-bg: #0a0a0a;
  --drawer-fg: #f5f5f5;
  --drawer-fg-muted: rgba(245, 245, 245, 0.5);
  --drawer-fade-dur: 0.45s;
  --drawer-item-dur: 0.7s;
  --drawer-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  inset: 0;
  z-index: var(--drawer-z-index);
  background: var(--drawer-bg);
  color: var(--drawer-fg);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--drawer-fade-dur) var(--drawer-ease), visibility var(--drawer-fade-dur);
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (min-width: 769px) {
  .drawer {
    display: none;
  }
}
.drawer__shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  padding: clamp(2.8rem, 1.8122977346vw + 2.1203883495rem, 6.6873786408rem) clamp(2.8rem, 2.3300970874vw + 1.9262135922rem, 7.7980582524rem) clamp(2.8rem, 1.8122977346vw + 2.1203883495rem, 6.6873786408rem);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem);
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .drawer__shell {
    padding: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem) clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
  }
}
.drawer__close {
  position: absolute;
  top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  right: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.7106796117rem);
  height: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.7106796117rem);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--drawer-fg);
  cursor: pointer;
  transition: opacity var(--tran-15);
}
.drawer__close .fa-xmark {
  font-size: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
}
.drawer__close:hover {
  opacity: 0.6;
}
.drawer__close:focus-visible {
  outline: 2px solid var(--drawer-fg);
  outline-offset: 3px;
}
.drawer__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.8660194175rem);
  width: 100%;
}
.drawer__item {
  margin: 0;
  overflow: hidden;
}
.drawer__link {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: clamp(0.8rem, 0.6472491909vw + 0.5572815534rem, 2.1883495146rem);
  padding: clamp(0.2rem, 0.2588996764vw + 0.1029126214rem, 0.7553398058rem) 0;
  color: inherit;
  text-decoration: none;
  transform: translateY(110%);
  opacity: 0;
  transition: transform var(--drawer-item-dur) var(--drawer-ease), opacity var(--drawer-item-dur) var(--drawer-ease);
}
.drawer__index {
  margin-top: clamp(1rem, 0.5177993528vw + 0.8058252427rem, 2.1106796117rem);
  font-family: var(--family-satoshi);
  font-size: clamp(1.1rem, 0.1941747573vw + 1.027184466rem, 1.5165048544rem);
  font-weight: 500;
  color: var(--drawer-fg-muted);
}
.drawer__title {
  font-family: var(--family-satoshi);
  font-weight: 700;
  font-size: clamp(48px, 12vw, 168px);
  line-height: 0.95;
  transition: opacity var(--tran-3);
}
.drawer__inner:hover .drawer__title {
  opacity: 0.35;
}
.drawer__link:hover .drawer__title {
  opacity: 1;
}
.drawer.is-open:not(.is-closing) .drawer__link {
  transform: translateY(0);
  opacity: 1;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(1) .drawer__link {
  transition-delay: 0.18s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(2) .drawer__link {
  transition-delay: 0.24s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(3) .drawer__link {
  transition-delay: 0.3s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(4) .drawer__link {
  transition-delay: 0.36s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(5) .drawer__link {
  transition-delay: 0.42s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(6) .drawer__link {
  transition-delay: 0.48s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(7) .drawer__link {
  transition-delay: 0.54s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(8) .drawer__link {
  transition-delay: 0.6s;
}
.drawer.is-closing .drawer__link {
  transform: translateY(110%);
  opacity: 0;
}
.drawer.is-closing .drawer__item:nth-child(1) .drawer__link {
  transition-delay: 0.35s;
}
.drawer.is-closing .drawer__item:nth-child(2) .drawer__link {
  transition-delay: 0.3s;
}
.drawer.is-closing .drawer__item:nth-child(3) .drawer__link {
  transition-delay: 0.25s;
}
.drawer.is-closing .drawer__item:nth-child(4) .drawer__link {
  transition-delay: 0.2s;
}
.drawer.is-closing .drawer__item:nth-child(5) .drawer__link {
  transition-delay: 0.15s;
}
.drawer.is-closing .drawer__item:nth-child(6) .drawer__link {
  transition-delay: 0.1s;
}
.drawer.is-closing .drawer__item:nth-child(7) .drawer__link {
  transition-delay: 0.05s;
}
.drawer.is-closing .drawer__item:nth-child(8) .drawer__link {
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .drawer {
    --drawer-item-dur: 0.01s;
    --drawer-fade-dur: 0.01s;
  }
  .drawer__link {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}
.drawer__footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 1.5533980583vw + 1.0174757282rem, 4.932038835rem);
  font-family: var(--family-satoshi);
  font-size: clamp(1.1rem, 0.1941747573vw + 1.027184466rem, 1.5165048544rem);
  font-weight: 500;
  color: var(--drawer-fg);
}
@media (max-width: 544px) {
  .drawer__footer {
    flex-direction: column;
    gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
  }
}
.drawer__footer-item {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--tran-15);
}
.drawer__footer-item:hover {
  opacity: 0.6;
}

.no-footer {
  position: relative;
  background-color: var(--clr-base-black);
  color: var(--clr-base-white);
  padding: var(--spacing-3xl) 0 var(--spacing-2xl);
}
.no-footer__container {
  padding: 0 var(--gutter);
}
.no-footer__top {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
}
@media (max-width: 1024px) {
  .no-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
  }
}
@media (max-width: 768px) {
  .no-footer__top {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
}
.no-footer__col-title {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--family-base);
  font-weight: 400;
  margin-bottom: var(--spacing-sm);
}
.no-footer__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.no-footer__list-item {
  color: var(--clr-base-white);
  font-family: var(--family-base);
}
.no-footer__list-link {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--tran-15);
}
.no-footer__list-link:hover {
  opacity: 0.7;
}
.no-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-5xl);
}
@media (max-width: 768px) {
  .no-footer__bottom {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
.no-footer__logo {
  display: block;
  min-width: 0;
  pointer-events: none;
  user-select: none;
}
.no-footer__logo img {
  display: block;
  width: 100%;
  max-width: 52rem;
  height: auto;
}
.no-footer__bottom-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-xs);
}
@media (max-width: 768px) {
  .no-footer__bottom-meta {
    align-items: flex-start;
  }
}
.no-footer__privacy {
  color: var(--clr-base-white);
  text-decoration: none;
  transition: opacity var(--tran-15);
}
.no-footer__privacy:hover {
  opacity: 0.7;
}
.no-footer__copyright {
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}
@media (max-width: 768px) {
  .no-footer__copyright {
    text-align: left;
  }
}

.no-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: var(--header-z-index);
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--clr-base-white);
  backdrop-filter: blur(1.2rem);
  contain: layout paint;
  transform: translateZ(0);
}
.no-header__container {
  height: 100%;
}
.no-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
}
.no-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.no-header__logo a {
  display: inline-flex;
  align-items: center;
}
.no-header__logo img {
  display: block;
  height: 2.2rem;
  width: auto;
}
@media (max-width: 768px) {
  .no-header__logo img {
    height: 1.9rem;
  }
}
@media (max-width: 768px) {
  .no-header__nav {
    display: none;
  }
}
.no-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xl);
}
.no-header__nav-link {
  position: relative;
  display: inline-block;
  color: var(--clr-base-white);
  font-family: var(--family-base);
  font-size: var(--body-sm-fs);
  font-weight: 400;
  text-decoration: none;
  padding: 0.4rem 0;
  transition: opacity var(--tran-15);
}
.no-header__nav-link:hover {
  opacity: 0.7;
}
.no-header__nav-link[aria-current=page] {
  font-weight: 500;
}
.no-header__nav-link[aria-current=page]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--clr-base-white);
}
.no-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 2.4rem;
  height: 1.6rem;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.no-header__hamburger span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--clr-base-white);
  transition: transform var(--tran-3), opacity var(--tran-3);
}
.no-header__hamburger[aria-expanded=true] span:nth-child(1) {
  transform: translateY(0.75rem) rotate(45deg);
}
.no-header__hamburger[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}
.no-header__hamburger[aria-expanded=true] span:nth-child(3) {
  transform: translateY(-0.75rem) rotate(-45deg);
}
@media (max-width: 768px) {
  .no-header__hamburger {
    display: flex;
  }
}

.no-sub-hero__background {
  position: relative;
  height: clamp(29.3rem, 25.8899676375vw + 19.5912621359rem, 84.8339805825rem);
  margin-top: var(--spacing-3xl);
}
.no-sub-hero__background img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-sub-hero__container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}
.no-sub-hero__content {
  padding-top: var(--header-height);
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  align-items: center;
  width: 100%;
}
.no-sub-hero__highlight {
  color: var(--clr-secondary-main);
  font-weight: 500;
}
.no-sub-hero__desc {
  color: var(--clr-base-white);
}

.no-sub-nav {
  height: var(--sub-nav-height);
  margin-top: var(--spacing-3xl);
}
.no-sub-nav__container {
  position: relative;
  overflow: hidden;
}
.no-sub-nav__carousel {
  width: auto;
  justify-content: center;
  display: flex;
}
.no-sub-nav__list {
  width: fit-content;
}
.no-sub-nav__item {
  width: auto;
}
.no-sub-nav__item:hover .no-sub-nav__link {
  color: var(--clr-primary-main);
  background: var(--clr-gray-50);
}
.no-sub-nav__item.--active .no-sub-nav__link {
  font-weight: 600;
  border-color: var(--clr-primary-main);
}
.no-sub-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  position: relative;
  border-bottom: 2px solid var(--clr-gray-300);
  border-radius: 0;
  transition: 0.3s ease-in-out;
}
.no-sub-nav__link::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  height: 0.2rem;
  width: 0%;
  transition: 0.3s ease-in-out;
  background: var(--clr-primary-main);
}
.no-sub-nav__button {
  background: var(--clr-base-white);
  height: calc(100% - 0.1rem);
  margin: 0;
  top: 0;
  transition: 0.15s ease-in-out;
}
.no-sub-nav__button.swiper-button-disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.no-sub-nav__button i {
  color: var(--clr-primary-main);
}
.no-sub-nav__button:hover {
  background: var(--clr-primary-50);
}
.no-sub-nav__button::after {
  content: none;
}
.no-sub-nav__button--prev {
  border-right: 1px solid var(--clr-gray-200);
  left: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.no-sub-nav__button--next {
  border-left: 1px solid var(--clr-gray-200);
  right: 0;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.12);
}

.no-board__total {
  font-weight: 600;
}
.no-board__total em {
  color: var(--clr-primary-main);
}
.no-board__filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
@media (max-width: 544px) {
  .no-board__filter {
    align-items: flex-start;
    flex-direction: column;
  }
}
.no-board__search {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex: 1;
  justify-content: flex-end;
}
@media (max-width: 544px) {
  .no-board__search {
    flex-direction: column;
    width: 100%;
  }
  .no-board__search .no-form-control--search {
    width: 100%;
  }
  .no-board__search .no-form-control--search label {
    width: 100%;
  }
  .no-board__search .no-form-control__input--search {
    max-width: 100%;
  }
  .no-board__search .no-form-select {
    max-width: 100%;
  }
}

.no-board-detail__headline {
  margin-bottom: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem);
}
.no-board-detail__head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  border-top: 2px solid var(--clr-base-black);
  padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  border-bottom: 1px solid var(--clr-gray-100);
}
@media (max-width: 768px) {
  .no-board-detail__head {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.4rem 0;
  }
}
.no-board-detail__admin {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.4rem;
  color: var(--clr-primary-main);
  font-weight: 600;
}
.no-board-detail__admin i {
  font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}
.no-board-detail__date {
  font-size: 1.4rem;
  color: var(--clr-gray-500);
}
.no-board-detail__body {
  padding: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 4.2990291262rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.no-board-detail__body.--comment {
  background: var(--clr-primary-50);
  border: 1px solid var(--clr-primary-main);
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .no-board-detail__body {
    padding: 2.4rem 0;
  }
}
.no-board-detail__action {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 3.6rem;
}
@media (max-width: 768px) {
  .no-board-detail__action {
    margin-top: 2.4rem;
  }
}

.no-locked__container {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}
.no-locked__logo {
  margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.no-locked__logo img {
  display: block;
  margin: 0 auto;
  width: 18rem;
}
.no-locked__title {
  margin-bottom: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}
.no-locked__desc {
  color: var(--clr-gray-600);
  line-height: 1.6;
  margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
}
.no-locked__desc strong {
  display: block;
  color: var(--clr-base-black);
  margin-bottom: 0.4rem;
}
.no-locked__form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.no-locked__field {
  width: 100%;
}
.no-locked__submit {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-lg, 12px);
  font-weight: 700;
}
.no-locked__back {
  display: inline-block;
  margin-top: 0.6rem;
  text-decoration: underline;
  color: var(--clr-primary-main);
  font-weight: 600;
}
.no-locked__back:hover {
  text-decoration: none;
}

/* 접근성 전용 텍스트 유틸 (이미 쓰고 있으면 생략 가능) */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * 브랜드 CTA 변형:
 * - 다크 배경 플랫 프레임: `@include no-main-cta-flat()` · `.no-main-link` · `a.no-btn-main-cta`
 * - 글래스 filled/outline: `no-btn--primary`, `no-btn--primary-outline`, `no-btn--white`
 * 조합 예: no-btn no-btn--md no-btn--primary
 */
/**
 * 다크 배경 인라인 CTA — 시안: 직각 · 1px 화이트 테두리 · 투명 배경 · 슬림 패딩 (↗ 유지).
 * 사용: 메인 `index.php` `.no-main-link`, 또는 동일 룩의 `a.no-btn-main-cta`.
 * (`no-btn--white` 글래스/그림자 버전과 별개)
 */
/* —— Primary filled (네이비 글래스) —— */
/* —— Primary outline (라이트 배경·비강조, 팀 필터 등) —— */
/* —— Dark 배경용 화이트 글래스 —— */
.no-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  color: #000;
  position: relative;
  padding: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem) clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2.1941747573rem);
  border: 2px solid #000;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  font-weight: 400;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}
.no-btn:hover {
  background-color: #000;
}
.no-btn:hover span {
  color: #fff;
}

.no-btn span {
  font-weight: inherit;
}
.no-btn .fa-arrow-right,
.no-btn .fa-arrow-up-right {
  transform: rotate(-45deg);
  padding-top: 0.2rem;
  color: inherit;
  font-weight: inherit;
}
.no-btn {
  /* 텍스트 버튼 (화이트) — 패딩/보더/배경 없이 텍스트만 */
}
.no-btn-text--white {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--clr-base-white);
  gap: 0.6em;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.no-btn-text--white:hover {
  background: transparent;
  opacity: 0.88;
}
.no-btn-text--white:active {
  opacity: 0.8;
}
.no-btn-text--white:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}
.no-btn-text--white .fa-arrow-right,
.no-btn-text--white .fa-arrow-up-right {
  transform: none;
  padding-top: 0;
}
.no-btn--xs {
  padding: 0.4rem 1.2rem;
}
.no-btn--sm {
  padding: 0.8rem 1.6rem;
}
.no-btn--md {
  padding: 1.2rem 2.4rem;
  font-size: var(--body-md-fs);
}
.no-btn--lg {
  padding: 1.6rem 3.2rem;
  font-size: var(--body-md-fs);
}
.no-btn--list {
  width: 9.6rem;
  height: 4rem;
}
.no-btn--submit {
  width: 18rem;
  height: 5rem;
}
.no-btn {
  /* === Primary (글래스 CTA — index 히어로와 동일) === */
}
.no-btn--primary {
  background: var(--clr-primary-main);
  color: var(--clr-base-white);
  border-color: var(--clr-primary-main);
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-btn--primary:hover span {
  color: var(--clr-base-white);
}
.no-btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
  border-width: 1px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--clr-primary-main) 78%, #ffffff 22%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 24px var(--clr-primary-shadow-soft);
}
.no-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%);
  opacity: 0.85;
  pointer-events: none;
}
.no-btn--primary > * {
  position: relative;
  z-index: 1;
}
.no-btn--primary:hover {
  background: var(--clr-primary-hover);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--clr-primary-hover) 82%, #ffffff 18%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 14px 36px var(--clr-primary-shadow);
}
.no-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 16px var(--clr-primary-shadow-soft);
}
.no-btn--primary .fa-arrow-right,
.no-btn--primary .fa-arrow-up-right {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-btn--primary:hover .fa-arrow-right, .no-btn--primary:hover .fa-arrow-up-right {
  transform: rotate(-45deg) translateX(0.2em);
}
.no-btn--primary-outline {
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
  border-width: 1px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--clr-primary-main) 45%, #ffffff 55%);
  background: rgba(255, 255, 255, 0.96);
  color: var(--clr-primary-main);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 6px 20px rgba(13, 53, 114, 0.1);
}
.no-btn--primary-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.55) 0%, transparent 48%);
  opacity: 0.9;
  pointer-events: none;
}
.no-btn--primary-outline > * {
  position: relative;
  z-index: 1;
}
.no-btn--primary-outline:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--clr-primary-hover) 55%, #ffffff 45%);
  background: rgb(255, 255, 255);
  color: var(--clr-primary-hover);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 14px 36px rgba(13, 53, 114, 0.16);
}
.no-btn--primary-outline:hover span {
  color: inherit;
}
.no-btn--primary-outline:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 4px 16px rgba(13, 53, 114, 0.1);
}
.no-btn {
  /* 어두운 섹션: 얇은 흰 테두리 + 글래스 */
}
.no-btn--white {
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 5.5rem;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  color: var(--clr-base-white);
  padding: 0.8rem clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem);
}
.no-btn--white > * {
  position: relative;
  z-index: 1;
}
.no-btn--white:hover {
  background: rgba(255, 255, 255, 0.14);
}
.no-btn--white:hover span {
  color: var(--clr-base-white);
}
.no-btn--white:active {
  background: rgba(255, 255, 255, 0.2);
}
.no-btn--white .fa-arrow-right,
.no-btn--white .fa-arrow-up-right {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-btn--white:hover .fa-arrow-right, .no-btn--white:hover .fa-arrow-up-right {
  transform: rotate(-45deg) translateX(0.2em);
}
.no-btn {
  /* 레거시: .no-btn.white */
}
.no-btn.white {
  color: #fff;
  border: 2px solid #fff;
  background: transparent;
}
.no-btn.white:hover {
  background: rgba(255, 255, 255, 0.12);
}
.no-btn--secondary {
  background: var(--clr-secondary-main);
  color: var(--clr-base-white);
  border-color: var(--clr-secondary-main);
}
.no-btn--secondary:hover {
  background: var(--clr-secondary-hover);
  border-color: var(--clr-secondary-hover);
}
.no-btn--secondary-outline {
  border: 2px solid var(--clr-secondary-main);
  color: var(--clr-secondary-main);
  background: transparent;
}
.no-btn--secondary-outline:hover {
  background: var(--clr-secondary-50);
  color: var(--clr-secondary-main);
}
.no-btn--white-primary {
  background: var(--clr-base-white);
  color: var(--clr-primary-main);
  border: 2px solid var(--clr-base-white);
}
.no-btn--white-primary:hover {
  background: var(--clr-primary-50);
  border-color: var(--clr-primary-50);
}
.no-btn--white-outline {
  border: 2px solid var(--clr-base-white);
  color: var(--clr-base-white);
  background: transparent;
}
.no-btn--white-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}
.no-btn--toolbar-end {
  flex-shrink: 0;
  align-self: flex-end;
}
.no-btn--form-submit {
  margin-left: auto;
  min-width: 14rem;
}
@media (max-width: 544px) {
  .no-btn--form-submit {
    margin-left: 0;
    width: 100%;
  }
}
.no-btn--primary:focus-visible, .no-btn--primary-outline:focus-visible {
  outline: 2px solid var(--clr-primary-main);
  outline-offset: 2px;
}
.no-btn--white:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

/* 다크 섹션 헤더용 플랫 아웃라인 CTA (`no-main-cta-flat` 과 동일) */
a.no-btn-main-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.6330097087rem);
  padding: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem) clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  border-radius: 0;
  border: 1px solid var(--clr-base-white);
  background: transparent;
  color: var(--clr-base-white);
  font-family: var(--family-satoshi);
  font-weight: 400;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background var(--tran-15), border-color var(--tran-15);
}
a.no-btn-main-cta:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--clr-base-white);
}
a.no-btn-main-cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
a.no-btn-main-cta .fa-arrow-up-right,
a.no-btn-main-cta .fa-arrow-right {
  flex-shrink: 0;
  font-size: 0.75em;
  line-height: 1;
  opacity: 0.95;
  transform: none;
  padding-top: 0;
  color: inherit;
}

/**
 * DPR Modal (alert/confirm) – site 공통.
 * TS: utils/Modal.ts 에서 생성. 인라인 스타일 없이 여기서만 관리.
 */
.dpr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1.5rem;
  animation: dpr-modal-fadeIn 0.2s ease;
}

.dpr-modal-box {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.08);
  min-width: 22rem;
  width: 100%;
  max-width: min(92vw, 36rem);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  animation: dpr-modal_slideIn 0.25s ease;
}

.dpr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.dpr-modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: #111827;
  line-height: 1.35;
}

.dpr-modal-close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.dpr-modal-close:hover {
  background: #f3f4f6;
  color: #111827;
}
.dpr-modal-close:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 2px;
}

.dpr-modal-body {
  padding: 1.5rem 1.75rem;
  color: #111827;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  flex: 1 1 auto;
  font-size: 1.125rem;
}

.dpr-modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.dpr-modal-btn {
  padding: 0.625rem 1.5rem;
  border-radius: 0;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dpr-modal-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.dpr-modal-btn--primary {
  background: #171717;
  color: #fff;
  border-color: #171717;
}
.dpr-modal-btn--primary:hover {
  background: #262626;
  border-color: #262626;
}

@keyframes dpr-modal-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes dpr-modal_slideIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* Company — 포트폴리오 썸네일 상세 모달 (로고 + 프로젝트 개요 / 핵심과제) */
body.no-modal-open {
  overflow: hidden;
}

.no-portfolio-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.6rem, 1.5533980583vw + 1.0174757282rem, 4.932038835rem);
  box-sizing: border-box;
}
.no-portfolio-modal[hidden] {
  display: none !important;
}
.no-portfolio-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.no-portfolio-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 92vw);
  max-width: min(100%, 88rem);
  max-height: min(92vh, 58rem);
  overflow: auto;
  padding: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 5.5766990291rem) clamp(2.2rem, 1.4239482201vw + 1.6660194175rem, 5.254368932rem) clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 5.5766990291rem);
  border-radius: 0.85rem;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, 0.28);
}
.no-portfolio-modal__close {
  position: absolute;
  top: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
  right: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
  width: clamp(3.25rem, 0.4854368932vw + 3.067961165rem, 4.2912621359rem);
  height: clamp(3.25rem, 0.4854368932vw + 3.067961165rem, 4.2912621359rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: #1a1a1a;
  font-size: clamp(1.85rem, 0.3236245955vw + 1.7286407767rem, 2.5441747573rem);
  font-weight: 400;
  font-family: var(--family-pretendard);
  line-height: 1;
  cursor: pointer;
  background: #f2f2f2;
  transition: background 0.15s ease, color 0.15s ease;
}
.no-portfolio-modal__close span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  transform: translateY(-0.08em);
  font-weight: 400;
}
.no-portfolio-modal__close:hover, .no-portfolio-modal__close:focus-visible {
  background: #f0f0f0;
  color: #000;
}
.no-portfolio-modal__close:focus-visible {
  outline: 2px solid var(--clr-primary-main, #00205b);
  outline-offset: 2px;
}
.no-portfolio-modal__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.no-portfolio-modal__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(12rem, 6.4724919094vw + 9.572815534rem, 25.8834951456rem);
  margin: 0 0 clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem);
  padding: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2.3883495146rem) clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
}
.no-portfolio-modal__logo-wrap--empty {
  display: none;
}
.no-portfolio-modal__logo {
  display: block;
  max-width: min(100%, 52rem);
  max-height: clamp(14rem, 5.1779935275vw + 12.0582524272rem, 25.1067961165rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
.no-portfolio-modal__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 0.9061488673vw + 1.0601941748rem, 3.3436893204rem);
  margin-top: clamp(0.4rem, 0.3883495146vw + 0.254368932rem, 1.2330097087rem);
}
@media (max-width: 768px) {
  .no-portfolio-modal__cols {
    grid-template-columns: 1fr;
  }
}
.no-portfolio-modal__col {
  min-width: 0;
  border: 1px solid #e0e0e0;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #fff;
}
.no-portfolio-modal__col-head {
  padding: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem) clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
  background: #f2f2f2;
  color: #222;
}
.no-portfolio-modal__dl {
  margin: 0;
}
.no-portfolio-modal__dl-row {
  display: grid;
  grid-template-columns: minmax(15.5rem, 44%) minmax(0, 1fr);
  gap: clamp(1rem, 0.5177993528vw + 0.8058252427rem, 2.1106796117rem);
  column-gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
  align-items: start;
  padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem) clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 2.0330097087rem);
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  line-height: 1.55;
  border-top: 1px solid #e8e8e8;
}
.no-portfolio-modal__dl-row:first-of-type {
  border-top: 0;
}
.no-portfolio-modal__dl-row dt {
  margin: 0;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}
.no-portfolio-modal__dl-row dd {
  margin: 0;
  font-weight: 500;
  color: #111;
  word-break: keep-all;
  min-width: 0;
}
@media (max-width: 450px) {
  .no-portfolio-modal__dl-row {
    grid-template-columns: 1fr;
    gap: 0.35rem 0;
  }
  .no-portfolio-modal__dl-row dt {
    white-space: normal;
  }
}
.no-portfolio-modal__tasks {
  padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) clamp(2rem, 0.1294498382vw + 1.9514563107rem, 2.2776699029rem);
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
  line-height: 1.65;
  color: #222;
  min-height: clamp(8.8rem, 3.3656957929vw + 7.5378640777rem, 16.0194174757rem);
}
.no-portfolio-modal__tasks-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.no-portfolio-modal__tasks-list li {
  position: relative;
  margin: 0 0 0.55em;
  padding-left: 1.15em;
  font-weight: 500;
}
.no-portfolio-modal__tasks-list li:last-child {
  margin-bottom: 0;
}
.no-portfolio-modal__tasks-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4em;
  height: 0.4em;
  background: var(--clr-primary-main, #00205b);
  border-radius: 0.06em;
}
.no-portfolio-modal__tasks-empty {
  margin: 0;
  color: #666;
}

.no-form-radio__title {
  display: block;
  font-weight: 500;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  margin-bottom: 0.8rem;
}
.no-form-radio__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.2rem;
}
@media (max-width: 1024px) {
  .no-form-radio__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .no-form-radio__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.no-form-radio__item {
  flex: 1;
}
.no-form-radio__item input {
  display: none;
}
.no-form-radio__item input:checked + .no-form-radio__label {
  color: var(--clr-primary-main);
  border-color: var(--clr-primary-main);
  outline: 1px solid var(--clr-primary-main);
}
.no-form-radio__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: var(--clr-base-white);
  border: 1px solid var(--clr-gray-300);
  width: 100%;
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
}

.no-form-checkbox__inner {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
.no-form-checkbox input {
  display: none;
}
.no-form-checkbox input:checked + .no-form-checkbox__box {
  border-color: var(--clr-primary-main);
  background: var(--clr-primary-main);
}
.no-form-checkbox input:checked + .no-form-checkbox__box i {
  visibility: visible;
  opacity: 1;
}
.no-form-checkbox__box {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.4rem;
  border: 1px solid var(--clr-gray-300);
  display: flex;
  align-items: center;
  background: var(--clr-base-white);
}
.no-form-checkbox__box i {
  color: var(--clr-base-white);
  visibility: hidden;
  opacity: 0;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
}
.no-form-checkbox__label {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
}

.no-form-group.--full {
  width: 100%;
}
.no-form-group.--base {
  width: calc(33.33% - 2.1333rem);
}
@media (max-width: 1024px) {
  .no-form-group.--base {
    width: calc(50% - 1.6rem);
  }
}
@media (max-width: 768px) {
  .no-form-group.--base {
    width: 100%;
  }
}
.no-form-group__label {
  margin-bottom: 0.8rem;
  font-weight: 500;
  display: inline-block;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
}

.no-form-control {
  border: 1px solid var(--clr-gray-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.no-form-control__button {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  border-radius: 0%;
}
.no-form-control.--textarea {
  height: clamp(16rem, 2.5889967638vw + 15.0291262136rem, 21.5533980583rem);
}
.no-form-control.--base {
  max-width: 40rem;
}
.no-form-control:focus-within {
  border-color: var(--clr-primary-main);
}
.no-form-control__textarea {
  width: 100%;
  padding: 2rem;
  height: 100%;
}
.no-form-control--search {
  display: inline-block;
}
.no-form-control--search label {
  display: inline-flex;
  align-items: center;
  background: var(--clr-base-white);
}
.no-form-control--search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
}
.no-form-control--search button i {
  color: var(--clr-primary-main);
  font-weight: 500;
  font-size: 2rem;
}
.no-form-control__input {
  width: 100%;
  height: 4.4rem;
  padding: 0 2rem;
}
.no-form-control__input:read-only {
  background: var(--clr-gray-100);
}
.no-form-control__input--search {
  max-width: 25.5rem;
  width: 100%;
}
.no-form-control__input--search::-webkit-search-decoration, .no-form-control__input--search::-webkit-search-cancel-button, .no-form-control__input--search::-webkit-search-results-button, .no-form-control__input--search::-webkit-search-results-decoration {
  display: none;
}

.no-form-select {
  max-width: 15rem;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.no-form-select__input {
  -webkit-appearance: none;
  border: 1px solid var(--clr-gray-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100%;
  height: 4.4rem;
  padding: 0 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.no-form-select__icon {
  position: absolute;
  pointer-events: none;
  right: 1.2rem;
  top: 50%;
  height: 100%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.no-form-file__inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--clr-base-white);
  border: 1px solid var(--clr-gray-300);
  border-radius: var(--radius-sm);
  min-height: 4.4rem;
  padding: 0.6rem 2rem;
  transition: border-color 0.2s ease, outline-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.no-form-file:focus-within .no-form-file__inner {
  border-color: var(--clr-primary-main);
  outline: 1px solid var(--clr-primary-main);
}
.no-form-file__label {
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
}
.no-form-file__input {
  width: 100%;
  height: 3.2rem;
  padding: 0 1.2rem 0 1.2rem;
  border: 0;
  background: transparent;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  color: var(--clr-gray-900);
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.no-form-file__input::file-selector-button {
  margin-right: 1.2rem;
  height: 3.2rem;
  padding: 0 1.2rem;
  border-radius: 0.6rem;
  border: 1px solid var(--clr-primary-main);
  background: var(--clr-primary-main);
  color: var(--clr-base-white);
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
}
.no-form-file__input:hover::file-selector-button {
  opacity: 0.9;
}
.no-form-file__input:active::file-selector-button {
  transform: translateY(1px);
}
.no-form-file__input::-webkit-file-upload-button {
  visibility: hidden;
}
.no-form-file__meta {
  margin-left: auto;
  color: var(--clr-gray-500);
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
@media (max-width: 768px) {
  .no-form-file__meta {
    max-width: 100%;
  }
}
.no-form-file.--drop {
  position: relative;
}
.no-form-file.--drop .no-form-file__inner {
  justify-content: center;
  gap: 0.8rem;
  border-style: dashed;
  border-color: var(--clr-gray-300);
  background: var(--clr-gray-50);
  min-height: 10rem;
  text-align: center;
}
.no-form-file.--drop .no-form-file__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.no-form-file.--drop.is-dragover .no-form-file__inner {
  border-color: var(--clr-primary-main);
  outline: 1px solid var(--clr-primary-main);
  background: rgba(0, 0, 0, 0.02);
}

.no-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  user-select: none;
}
@media (max-width: 768px) {
  .no-pagination {
    gap: 0.8rem;
  }
}
.no-pagination__numbers {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.no-pagination__dots {
  padding: 0 0.25rem;
  color: var(--clr-gray-500);
  font-weight: 500;
  pointer-events: none;
}
.no-pagination__link {
  --size: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4.3106796117rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size);
  height: var(--size);
  padding: 0 0.8rem;
  border: 1px solid var(--clr-gray-300);
  border-radius: 0.6rem;
  background: var(--clr-base-white);
  color: var(--clr-base-black);
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.no-pagination__link:hover {
  background: var(--clr-gray-100);
  border-color: var(--clr-gray-400);
}
.no-pagination__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--clr-primary-rgb, 33, 150, 243), 0.25);
}
.no-pagination__link.--disabled, .no-pagination__link[aria-disabled=true] {
  color: var(--clr-gray-400);
  border-color: var(--clr-gray-200);
  background: var(--clr-gray-50);
  pointer-events: none;
  opacity: 0.7;
}
.no-pagination {
  /* 숫자 버튼 */
}
.no-pagination__link--num {
  width: var(--size);
  padding: 0;
  font-weight: 500;
}
.no-pagination__link--num[aria-current=page], .no-pagination__link--num.is-active {
  background: var(--clr-primary-main);
  border-color: var(--clr-primary-main);
  color: var(--clr-base-white);
}
.no-pagination__link--num.--ghost {
  background: var(--clr-base-white);
  color: var(--clr-gray-700);
}
.no-pagination__link--arrow {
  width: var(--size);
  color: var(--clr-base-black);
  border-color: transparent;
  background: transparent;
}
.no-pagination__link--arrow i {
  font-size: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  line-height: 1;
}
.no-pagination__link--arrow:hover {
  background: var(--clr-gray-100);
  border-color: var(--clr-gray-300);
}

.no-prevnext {
  border-top: 1px solid var(--clr-base-black);
}
.no-prevnext__block {
  width: 100%;
  text-align: left;
  padding: 2.4rem;
  padding-left: 0;
  border-bottom: 1px solid var(--clr-gray-100);
}
@media (max-width: 768px) {
  .no-prevnext__block {
    padding: 1.8rem 2.4rem 1.8rem 0;
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
}
.no-prevnext__link {
  padding-left: 9.4rem;
  position: relative;
  display: inline-block;
}
@media (max-width: 768px) {
  .no-prevnext__link {
    padding-left: 4.6rem;
  }
}
.no-prevnext__label {
  color: var(--clr-gray-600);
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
}
@media (max-width: 768px) {
  .no-prevnext__label {
    font-size: 1.2rem;
  }
}
.no-prevnext__title {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
}
@media (max-width: 768px) {
  .no-prevnext__title {
    font-size: 1.2rem;
  }
}

.no-section-nav {
  width: 100%;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.no-section-nav__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: clamp(30rem, 3.2362459547vw + 28.786407767rem, 36.9417475728rem);
}
@media (max-width: 768px) {
  .no-section-nav__grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}
.no-section-nav__card {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  color: var(--clr-base-white);
  text-decoration: none;
  outline: none;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.no-section-nav__card--prev {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 768px) {
  .no-section-nav__card--prev {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}
.no-section-nav__card:focus-visible {
  z-index: 2;
  box-shadow: inset 0 0 0 2px var(--clr-main-focus-ring, rgba(96, 165, 250, 0.95));
}
.no-section-nav__card:hover .no-section-nav__img {
  transform: scale(1.05);
}
.no-section-nav__card:hover .no-section-nav__overlay--prev {
  background: rgba(4, 18, 32, 0.62);
}
.no-section-nav__card:hover .no-section-nav__overlay--next {
  background: rgba(4, 28, 24, 0.62);
}
.no-section-nav__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.no-section-nav__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.no-section-nav__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: background 0.35s ease;
}
.no-section-nav__overlay--prev {
  background: rgba(0, 0, 0, 0.52);
}
.no-section-nav__overlay--next {
  background: rgba(0, 0, 0, 0.52);
}
.no-section-nav__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
  width: 100%;
  padding: clamp(2.8rem, 1.0355987055vw + 2.4116504854rem, 5.0213592233rem) clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 3.2660194175rem);
  box-sizing: border-box;
}
.no-section-nav__kicker {
  margin: 0;
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-primary-300);
}
.no-section-nav__title {
  margin: 0;
  font-size: clamp(2.2rem, 1.0355987055vw + 1.8116504854rem, 4.4213592233rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.12;
  text-shadow: 0 0.12em 0.45em rgba(0, 0, 0, 0.45);
  color: var(--clr-base-white);
}
.no-section-nav__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin: 0;
  margin-top: clamp(0.4rem, 0.3883495146vw + 0.254368932rem, 1.2330097087rem);
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2388349515rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.92);
}
.no-section-nav__hint .fa-chevron-left,
.no-section-nav__hint .fa-chevron-right {
  font-size: 0.85em;
  opacity: 0.95;
}

.no-table__self {
  border-top: 2px solid var(--clr-gray-900);
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.no-table__self th, .no-table__self td {
  border-bottom: 1px solid var(--clr-gray-200);
  color: var(--clr-gray-600);
}
@media (max-width: 768px) {
  .no-table__self th, .no-table__self td {
    text-align: left;
    display: block;
    padding: 0;
    border-bottom: 0;
  }
}
.no-table__self th, .no-table__self td {
  padding: 2rem 1rem;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
}
.no-table__self thead {
  font-weight: 600;
}
@media (max-width: 768px) {
  .no-table__self thead {
    display: none;
  }
}
.no-table__self thead th {
  border-bottom: 1px solid var(--clr-gray-900);
  text-align: center;
}
@media (max-width: 768px) {
  .no-table__self tbody tr {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--clr-gray-200);
    padding: 1.6rem 0;
  }
}
@media (max-width: 768px) {
  .no-table__self tbody td {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .no-table .no-table__attr {
    display: inline-block;
    color: var(--clr-gray-400);
  }
  .no-table .no-table__attr:last-child span {
    padding-right: 0;
    margin-right: 0;
  }
  .no-table .no-table__attr:last-child span::after {
    content: none;
  }
  .no-table .no-table__attr span {
    font-size: 1.2rem;
    position: relative;
    padding-right: 0.8rem;
    margin-right: 0.8rem;
    line-height: 1;
  }
  .no-table .no-table__attr span::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    height: 1rem;
    width: 0.1rem;
    background: var(--clr-gray-600);
    transform: translateY(-40%);
  }
  .no-table .no-table__attr span::before {
    content: attr(data-label);
    color: var(--clr-gray-600);
    display: inline-block;
    padding-right: 0.4rem;
  }
}
.no-table .no-table__pin {
  color: var(--clr-primary-main);
}
.no-table .no-table__title {
  font-weight: 600;
  width: 100%;
}
.no-table .no-table__link {
  font-weight: inherit;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}
.no-table .no-table__link:hover {
  text-decoration: underline;
  color: var(--clr-primary-main);
}
.no-table .no-table__link-text {
  white-space: nowrap;
}

:root {
  --fcta-size: 5.2rem;
  --fcta-gap-edge: 4rem;
  --fcta-gap-bottom: clamp(12rem, 3.8834951456vw + 10.5436893204rem, 20.3300970874rem);
  --fcta-btn-gap: 1rem;
}

.no-floating-cta {
  position: fixed;
  inset-inline-end: calc(var(--fcta-gap-edge) + env(safe-area-inset-right));
  inset-block-end: calc(var(--fcta-gap-bottom) + env(safe-area-inset-bottom));
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: var(--fcta-btn-gap);
}
.no-floating-cta__btn {
  width: var(--fcta-size);
  height: var(--fcta-size);
  border-radius: var(--radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.3553398058rem);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  transition: background var(--tran-3), transform var(--tran-3), box-shadow var(--tran-3);
}
.no-floating-cta__btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}
.no-floating-cta__btn:active {
  transform: scale(0.95);
}
.no-floating-cta__btn svg {
  width: 48%;
  height: 48%;
  display: block;
}
.no-floating-cta__btn--tel {
  background: var(--clr-primary-main);
  color: var(--clr-base-black);
}
.no-floating-cta__btn--tel:hover {
  background: var(--clr-primary-400);
}
.no-floating-cta__btn--kakao {
  background: #fae100;
  color: #3b1f1f;
}
.no-floating-cta__btn--kakao:hover {
  background: #f0d800;
}
.no-floating-cta__btn--sns {
  color: var(--clr-base-white);
}
.no-floating-cta__btn--instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.no-floating-cta__btn--instagram:hover {
  filter: brightness(1.08);
}
.no-floating-cta__btn--youtube {
  background: #ff0000;
}
.no-floating-cta__btn--youtube:hover {
  background: #e60000;
}
.no-floating-cta__btn--naverblog {
  background: #03c75a;
}
.no-floating-cta__btn--naverblog:hover {
  background: #02b350;
}
.no-floating-cta__btn--facebook {
  background: #1877f2;
}
.no-floating-cta__btn--facebook:hover {
  background: #1467d8;
}
.no-floating-cta__btn--twitter {
  background: #2b2b2b;
}
.no-floating-cta__btn--twitter:hover {
  background: #3a3a3a;
}
.no-floating-cta__btn--linkedin {
  background: #0a66c2;
}
.no-floating-cta__btn--linkedin:hover {
  background: #0958a8;
}
.no-floating-cta__btn--tiktok {
  background: #2b2b2b;
}
.no-floating-cta__btn--tiktok:hover {
  background: #3a3a3a;
}
@media (max-width: 768px) {
  .no-floating-cta {
    --fcta-size: 46px;
    --fcta-gap-edge: 14px;
    --fcta-gap-bottom: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .no-floating-cta__btn {
    transition: none;
  }
}

.no-floating-container {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
@media (max-width: 768px) {
  .no-floating-container {
    grid-template-columns: 1fr;
    column-gap: auto;
  }
}

.no-floating-menu {
  width: 16rem;
  padding-left: 2rem;
  will-change: transform;
}
@media (max-width: 768px) {
  .no-floating-menu {
    display: none;
  }
}
.no-floating-menu__nav {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
}
.no-floating-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 500;
  color: var(--clr-gray-400);
}
.no-floating-menu__link:hover {
  color: var(--clr-base-black);
}
.no-floating-menu__link.--active {
  color: var(--clr-primary-main);
}
.no-floating-menu__link.--active::before {
  opacity: 1;
  visibility: visible;
}
.no-floating-menu__link::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: var(--clr-primary-main);
  opacity: 0;
  visibility: hidden;
}

:root {
  --gt-size: 48px;
  --gt-gap: 20px;
}

.no-gototop {
  position: fixed;
  inset-inline-end: calc(var(--gt-gap) + env(safe-area-inset-right));
  inset-block-end: calc(var(--gt-gap) + env(safe-area-inset-bottom));
  z-index: 999;
  pointer-events: none;
}
.no-gototop__btn {
  width: var(--gt-size);
  height: var(--gt-size);
  border: none;
  border-radius: var(--gt-size);
  background: var(--clr-primary-main);
  color: var(--clr-base-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.no-gototop__btn span {
  font-size: 12px;
}
.no-gototop__btn {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.2s ease;
}
.no-gototop__btn:hover {
  background: var(--clr-primary-hover);
}
.no-gototop__btn:active {
  transform: translateY(14px) scale(0.97);
}
.no-gototop__btn:focus-visible {
  outline: 2px solid var(--clr-primary-400);
  outline-offset: 3px;
}
.no-gototop.is-visible .no-gototop__btn {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .no-gototop__btn {
    transition: none;
  }
}

.no-captcha {
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .no-captcha {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .no-captcha .no-form-control {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .no-captcha .no-form-control label {
    width: 100%;
  }
}
.no-captcha .no-form-control__input {
  height: 4.8rem;
  width: 20rem;
}
@media (max-width: 768px) {
  .no-captcha .no-form-control__input {
    width: 100%;
  }
}
.no-captcha__label {
  display: block;
  margin-bottom: 0.8rem;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
}
.no-captcha__container {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media (max-width: 768px) {
  .no-captcha__container {
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
  }
}
.no-captcha__screen {
  display: flex;
  align-items: center;
  border: 1px solid var(--clr-gray-300);
  border-radius: 0.6rem;
  overflow: hidden;
  height: 4.8rem;
}
.no-captcha__image {
  display: flex;
  align-items: center;
  height: 100%;
  border-right: 1px solid var(--clr-gray-300);
}
.no-captcha__control {
  display: flex;
  flex-direction: column;
}
.no-captcha__control button {
  display: flex;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-bottom: 1px solid var(--clr-gray-300);
  background: var(--clr-base-white);
}
.no-captcha__control button:hover {
  background: var(--clr-gray-50);
}
.no-captcha__control button:last-child {
  border-bottom: 0;
}
.no-captcha__control button i {
  font-size: 1.1rem;
}

.no-marquee-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  gap: 5rem;
}
.no-marquee-section.--top {
  padding-top: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 15.2854368932rem);
}
.no-marquee-section.--bottom {
  padding-bottom: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 15.2854368932rem);
}
.no-marquee-section.--y {
  padding: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 15.2854368932rem) 0;
}

.no-marquee {
  padding: 1vw;
  white-space: nowrap;
}
.no-marquee__inner {
  display: flex;
  gap: 2rem;
}
.no-marquee__content {
  color: rgba(0, 164, 175, 0.15);
  font-size: clamp(9.6rem, 5.9546925566vw + 7.3669902913rem, 22.372815534rem);
}

.profile-sidebar {
  width: 100%;
}
.profile-sidebar__inner {
  position: relative;
}
.profile-sidebar__nav {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.profile-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.profile-sidebar__item {
  border-bottom: 1px solid var(--clr-gray-200);
}
.profile-sidebar__item:last-child {
  border-bottom: none;
}
.profile-sidebar__link, .profile-sidebar__logout-btn {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
  width: 100%;
  padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem) clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem);
  font-size: var(--body-md-fs, clamp(0.9375rem, 1.2vw, 1.0625rem));
  line-height: var(--body-md-lh, 1.5);
  color: var(--clr-text-primary);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  text-align: left;
}
.profile-sidebar__link:hover {
  color: var(--clr-primary-main);
  background: var(--clr-gray-50);
}
.profile-sidebar__link:focus-visible {
  outline: 2px solid var(--clr-primary-main);
  outline-offset: 2px;
}
.profile-sidebar__item.--active .profile-sidebar__link {
  font-weight: 600;
  color: var(--clr-common-on-background);
  background: var(--clr-gray-50);
}
.profile-sidebar__icon {
  flex-shrink: 0;
  width: 1.35em;
  font-size: 1.15em;
  color: inherit;
}
.profile-sidebar__text {
  flex: 1;
}
.profile-sidebar__option {
  margin-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  padding-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  border-top: 1px solid var(--clr-gray-200);
}
.profile-sidebar__logout-form {
  margin: 0;
  padding: 0;
}
.profile-sidebar__logout-btn {
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
  width: 100%;
  padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) 0;
  font-size: var(--body-md-fs, clamp(0.9375rem, 1.2vw, 1.0625rem));
  line-height: var(--body-md-lh, 1.5);
  color: var(--clr-text-secondary, #6b7280);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  text-align: left;
}
.profile-sidebar__logout-btn:hover {
  color: var(--clr-text-primary);
}
.profile-sidebar__logout-btn:focus-visible {
  outline: 2px solid var(--clr-primary-main);
  outline-offset: 2px;
}

.comm-sidebar {
  width: 100%;
}
.comm-sidebar__inner {
  position: relative;
}
.comm-sidebar__nav {
  width: 100%;
}
.comm-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.comm-sidebar__item {
  border-bottom: none;
  border-top: 1px solid var(--clr-gray-300, #ccc);
}
.comm-sidebar__item:first-child {
  border-top: none;
}
.comm-sidebar__link {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  width: 100%;
  padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
  font-size: var(--body-md-fs, 0.9375rem);
  line-height: var(--body-md-lh, 1.5);
  color: var(--clr-text-desc, #999999);
  text-decoration: none;
  background: transparent;
  transition: color 0.2s ease, background-color 0.2s ease, font-weight 0.2s ease;
  position: relative;
}
.comm-sidebar__link:hover {
  color: var(--clr-primary-main);
  background: var(--clr-gray-50);
}
.comm-sidebar__link:focus-visible {
  outline: 2px solid var(--clr-primary-main);
  outline-offset: 2px;
}
.comm-sidebar__item.--active .comm-sidebar__link {
  font-weight: 600;
  color: var(--clr-text-primary, #000000);
  background: transparent;
}
.comm-sidebar__item.--active .comm-sidebar__link:hover {
  background: transparent !important;
  color: var(--clr-text-primary, #000000) !important;
}
.comm-sidebar__icon {
  flex-shrink: 0;
  width: 1.25em;
  font-size: 1.1em;
  color: inherit;
}
.comm-sidebar__text {
  flex: 1;
}
.comm-sidebar__chevron {
  flex-shrink: 0;
  font-size: 0.875em;
  color: inherit;
  transition: transform 0.2s ease, color 0.2s ease;
  margin-left: auto;
  transform: rotate(0deg);
}
.comm-sidebar__item.--expanded .comm-sidebar__chevron {
  transform: rotate(180deg);
}
.comm-sidebar__sub {
  padding-left: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
  background: transparent;
  display: none;
}
.comm-sidebar__item.--expanded .comm-sidebar__sub {
  display: block;
}
.comm-sidebar__item.--active .comm-sidebar__sub {
  background: transparent;
}
.comm-sidebar__sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comm-sidebar__sub-item {
  border-bottom: none;
}
.comm-sidebar__sub-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem) clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
  font-size: var(--body-sm-fs, 0.9375rem);
  line-height: var(--body-sm-lh, 1.5);
  color: var(--clr-text-desc, #999999);
  text-decoration: none;
  background: transparent;
  transition: color 0.2s ease, background-color 0.2s ease, font-weight 0.2s ease;
}
.comm-sidebar__sub-link:hover {
  color: var(--clr-primary-main);
  background: var(--clr-base-white);
}
.comm-sidebar__sub-link:focus-visible {
  outline: 2px solid var(--clr-primary-main);
  outline-offset: 2px;
}
.comm-sidebar__sub-item.--active .comm-sidebar__sub-link {
  font-weight: 600;
  color: var(--clr-text-primary, #000000);
  background: var(--clr-gray-50);
}
.comm-sidebar__sub-item.--active .comm-sidebar__sub-link:hover {
  background: var(--clr-gray-50);
  color: var(--clr-text-primary, #000000);
}
.comm-sidebar__sub-text {
  flex: 1;
}

/* JS 부트 전 텍스트 flash 방지 — ScrollTextRevealAnimator.start() 에서 클래스 제거 */
.js-loading main h1, .js-loading main h2, .js-loading main h3, .js-loading main h4, .js-loading main h5, .js-loading main h6,
.js-loading main p, .js-loading main figcaption,
.js-loading footer h3, .js-loading footer p {
  opacity: 0;
}

/* SplitType — 라인은 마스크, 글자/단어는 inline-block + y% 트윈 (home/text-motion) */
.no-txt-in .line {
  display: block;
  overflow: hidden;
}
.no-txt-in .char,
.no-txt-in .word {
  display: inline-block;
  will-change: transform;
}
.no-txt-in {
  /* 한 번 노출이 끝난 본문은 모바일 브라우저(삼성 인터넷 등)의 스크롤-리사이즈로
   * SplitType/ScrollTrigger 가 재구성되더라도 항상 보이도록 변형을 고정한다. */
}
.no-txt-in.no-txt-revealed .char,
.no-txt-in.no-txt-revealed .word {
  transform: none !important;
  will-change: auto;
}

/* a 링크: 클립(한 줄) + 이중 .no-txt-link__row → hover 시 stack y 퍼센트 -50%
 * clip 높이는 반드시 “한 줄 line-box” 이상이어야 cap/ascender가 잘리지 않음
 * (이전 max-height: 1.1em 은 상단 클리핑 빈발) */
a.no-header__nav-link,
a.no-footer__list-link,
a.no-footer__privacy,
a.no-main-link {
  --no-txt-link-line: 1.35;
}
a.no-header__nav-link .no-txt-link__clip,
a.no-footer__list-link .no-txt-link__clip,
a.no-footer__privacy .no-txt-link__clip,
a.no-main-link .no-txt-link__clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  line-height: var(--no-txt-link-line);
  height: calc(1em * var(--no-txt-link-line));
  max-height: none;
  box-sizing: content-box;
}
a.no-header__nav-link .no-txt-link__stack,
a.no-footer__list-link .no-txt-link__stack,
a.no-footer__privacy .no-txt-link__stack,
a.no-main-link .no-txt-link__stack {
  display: block;
  line-height: var(--no-txt-link-line);
}
a.no-header__nav-link .no-txt-link__row,
a.no-footer__list-link .no-txt-link__row,
a.no-footer__privacy .no-txt-link__row,
a.no-main-link .no-txt-link__row {
  display: block;
  line-height: var(--no-txt-link-line);
  min-height: calc(1em * var(--no-txt-link-line));
  box-sizing: border-box;
}

a.no-header__nav-link {
  /* 기본 opacity:0.7 hover는 텍스트 이펙트를 가리므로 해제 */
}
a.no-header__nav-link:hover, a.no-header__nav-link:focus-visible {
  opacity: 1;
}

/**
 * Work 서비스 칩 (목록 카드 / 상세 히어로 / 메인 그리드 / About 캐러셀)
 * — `.no-work-card` 안팎 모두 동일 스타일 (단일 소스)
 */
.no-work-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.no-work-card__tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4776699029rem) clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 9999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--family-satoshi);
  font-weight: 400;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  transition: color var(--tran-15), background-color var(--tran-15), border-color var(--tran-15), transform var(--tran-15);
}
.no-work-card__tag:where(button) {
  cursor: pointer;
  appearance: none;
}
.no-work-card__tag:where(a) {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.no-work-card__tag:where(button, a):hover {
  color: var(--clr-base-white);
  border-color: rgba(255, 255, 255, 0.72);
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}
.no-work-card__tag:where(button, a):focus-visible {
  outline: 2px solid var(--clr-primary-main);
  outline-offset: 2px;
  color: var(--clr-base-white);
  border-color: rgba(255, 255, 255, 0.72);
  background-color: rgba(255, 255, 255, 0.08);
}
.no-work-card__tag:where(button, a):active {
  transform: translateY(0);
  background-color: rgba(255, 255, 255, 0.14);
}

.site-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}
.site-popup-backdrop[hidden] {
  display: none;
}

.site-popup {
  position: fixed;
  z-index: 9999;
  left: var(--popup-left, 50%);
  top: var(--popup-top, 50%);
  transform: translate(-50%, -50%);
  width: var(--popup-width, 420px);
  max-width: calc(100vw - 2rem);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #0d0d0d;
  color: var(--clr-base-white);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 201, 212, 0.15);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 201, 212, 0.06);
  display: flex;
  flex-direction: column;
}
.site-popup[hidden] {
  display: none;
}
.site-popup[data-popup-link] {
  cursor: pointer;
}
.site-popup__close-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background-color var(--tran-15), border-color var(--tran-15), color var(--tran-15);
  padding: 0;
  flex-shrink: 0;
}
.site-popup__close-icon:hover {
  background: rgba(0, 201, 212, 0.2);
  border-color: rgba(0, 201, 212, 0.55);
  color: var(--clr-base-white);
}
.site-popup__close-icon svg {
  display: block;
  pointer-events: none;
}
.site-popup__thumb {
  width: 100%;
  line-height: 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  background-color: #111;
}
.site-popup__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}
.site-popup[data-popup-link]:hover .site-popup__thumb img {
  transform: scale(1.04);
}
.site-popup__body {
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.site-popup__title {
  font-size: var(--heading-xs-fs);
  font-weight: 700;
  line-height: var(--heading-xs-lh);
  color: var(--clr-text-primary);
  letter-spacing: 0.01em;
}
.site-popup__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background-color: rgba(0, 0, 0, 0.45);
  border-top: 1px solid rgba(0, 201, 212, 0.1);
}
.site-popup__no-show {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--body-xs-fs);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  user-select: none;
}
.site-popup__no-show input[type=checkbox] {
  accent-color: var(--clr-primary-main);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.site-popup__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--body-xs-fs);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color var(--tran-15);
  white-space: nowrap;
}
.site-popup__close:hover {
  color: var(--clr-base-white);
}
@media (max-width: 544px) {
  .site-popup {
    width: calc(100vw - 1.5rem) !important;
    left: 50% !important;
    top: 50% !important;
    max-height: 85vh;
  }
}

:root {
  --e-bg: #fff;
  --e-fg: #18181b;
  --e-muted: #71717a;
  --e-line: #27272a;
  --e-line-light: #e4e4e7;
  --e-accent: #dc2626;
  --e-accent-bg: #fef2f2;
  --e-code-bg: #1e1e1e;
  --e-code-fg: #d4d4d4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --e-bg: #09090b;
    --e-fg: #fafafa;
    --e-muted: #a1a1aa;
    --e-line: #3f3f46;
    --e-line-light: #27272a;
    --e-accent: #f87171;
    --e-accent-bg: #450a0a;
    --e-code-bg: #18181b;
    --e-code-fg: #e4e4e7;
  }
}
.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: var(--family-pretendard);
}

.e-404 {
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.e-404__icon {
  margin: 0 auto 28px;
  color: var(--e-line);
}
.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-fg);
}

.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-404__foot {
  margin-top: 40px;
  font-size: 11px;
  color: var(--e-muted);
  letter-spacing: 0.02em;
}

.e-404__brand {
  font-weight: 600;
  color: var(--e-fg);
}

.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-fg);
  color: var(--e-bg);
  border-color: var(--e-fg);
}
.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: ui-monospace, monospace;
  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: ui-monospace, monospace;
  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: ui-monospace, "Cascadia Code", "Fira Code", monospace;
}

.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__foot {
  font-size: 12px;
  color: var(--e-muted);
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--e-line-light);
}

.e-error__brand {
  font-weight: 600;
  color: var(--e-fg);
}

.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: ui-monospace, monospace;
  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;
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--clr-base-white);
}
@media (min-width: 481px) {
  .auth-page {
    padding: 40px 20px;
  }
}

.auth-page__container {
  width: 100%;
  max-width: 400px;
  text-align: center;
  padding: 0 4px;
}

.auth-page__title {
  font-size: clamp(32px, 5vw, 40px);
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--clr-text-primary);
  letter-spacing: -0.02em;
}

.auth-page__desc {
  font-size: 13px;
  color: var(--clr-text-secondary);
  margin: 0 0 28px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.auth-page__invite-notice {
  font-size: 14px;
  color: var(--clr-text-primary);
  margin: 0 0 20px;
  padding: 10px 14px;
  background: var(--clr-gray-100, #f5f5f5);
  border-left: 3px solid var(--clr-text-primary);
  text-align: left;
}

.auth-page__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.auth-page__field {
  width: 100%;
}

.auth-page__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.auth-page__help-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  margin-bottom: 4px;
  padding: 0 4px;
}
@media (max-width: 480px) {
  .auth-page__help-links {
    margin-top: 10px;
    margin-bottom: 6px;
    gap: 6px 8px;
  }
}

.auth-page__help-link {
  font-size: 12px;
  color: var(--clr-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.auth-page__help-link:hover {
  color: var(--clr-text-primary);
  text-decoration: underline;
}
@media (max-width: 480px) {
  .auth-page__help-link {
    font-size: 11px;
  }
}

.auth-page__help-sep {
  font-size: 11px;
  color: var(--clr-text-secondary);
  user-select: none;
  pointer-events: none;
}

.auth-page__field--checkbox {
  margin-bottom: 0;
  flex-shrink: 0;
  display: flex;
}

.auth-page__checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--clr-text-primary);
  cursor: pointer;
  user-select: none;
}
.auth-page__checkbox-wrap:hover .auth-page__checkbox__box {
  border-color: var(--clr-text-primary);
}

.auth-page__checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.auth-page__checkbox-input:focus-visible + .auth-page__checkbox__box {
  outline: 2px solid var(--clr-text-primary);
  outline-offset: 2px;
}
.auth-page__checkbox-input:checked + .auth-page__checkbox__box {
  border-color: var(--clr-text-primary);
  background: var(--clr-text-primary);
}
.auth-page__checkbox-input:checked + .auth-page__checkbox__box i {
  visibility: visible;
  opacity: 1;
}

.auth-page__checkbox__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--clr-gray-900);
  background: var(--clr-base-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.auth-page__checkbox__box i {
  font-size: 11px;
  color: var(--clr-base-white);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.auth-page__checkbox__label {
  font-size: 14px;
  line-height: 1.4;
}

.auth-page {
  --ss-primary-color: var(--clr-text-primary);
  --ss-bg-color: var(--clr-base-white);
  --ss-font-color: var(--clr-text-primary);
  --ss-placeholder-color: var(--clr-text-secondary);
  --ss-border-color: var(--clr-gray-900);
  --ss-focus-color: var(--clr-text-primary);
  --ss-main-height: 48px;
  --ss-border-radius: 0;
}

.auth-page .ss-main {
  display: flex;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  min-height: 48px;
  border-radius: 0;
}
.auth-page .ss-main:focus {
  box-shadow: none;
  border-color: var(--clr-text-primary);
}

.auth-page .ss-main .ss-values .ss-placeholder {
  color: var(--clr-text-secondary);
  line-height: var(--body-md-lh);
}

.auth-page .ss-content {
  border-radius: 0;
  border: 1px solid var(--clr-gray-900);
}

.auth-page .ss-content .ss-list .ss-option:hover:not(.ss-disabled),
.auth-page .ss-content .ss-list .ss-option.ss-highlighted,
.auth-page .ss-content .ss-list .ss-option.ss-selected {
  background-color: var(--clr-text-primary);
  color: var(--clr-base-white);
  border-left-color: var(--clr-text-primary);
}

.auth-page .ss-content .ss-search input {
  font-size: 15px;
  font-family: inherit;
}

.auth-page__input-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.auth-page__input-wrap--password .auth-page__input {
  padding-right: 48px;
}

.auth-page__password-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: color 0.15s ease;
}
.auth-page__password-toggle:hover {
  color: var(--clr-text-primary);
}
.auth-page__password-toggle i {
  font-size: 1.4rem;
}

.auth-page__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--clr-gray-900);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  font-size: 15px;
  font-family: inherit;
  border-radius: 0;
  transition: border-color 0.15s ease, outline 0.15s ease;
}
.auth-page__input::placeholder {
  color: var(--clr-text-secondary);
}
.auth-page__input:focus {
  outline: none;
  border-color: var(--clr-text-primary);
}
.auth-page__input--birth {
  border-color: #000;
}
.auth-page__input--birth:focus {
  border-color: #000;
}
.auth-page__input:invalid:not(:placeholder-shown) {
  border-color: var(--clr-gray-400);
}
.auth-page__input:-webkit-autofill, .auth-page__input:-webkit-autofill:hover, .auth-page__input:-webkit-autofill:focus, .auth-page__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--clr-base-white) inset !important;
  box-shadow: 0 0 0 1000px var(--clr-base-white) inset !important;
  -webkit-text-fill-color: var(--clr-text-primary);
  transition: background-color 5000s ease-in-out 0s;
}

.auth-page__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
}

.auth-page__btn {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid var(--clr-gray-900);
  background: transparent;
  color: var(--clr-text-primary);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.auth-page__btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}
.auth-page__btn:hover:not([disabled]) {
  background: var(--clr-text-primary);
  color: var(--clr-base-white);
  border-color: var(--clr-text-primary);
}
.auth-page__btn--primary {
  background: var(--clr-text-primary);
  color: var(--clr-base-white);
  border-color: var(--clr-text-primary);
}
.auth-page__btn--primary:hover:not([disabled]) {
  background: var(--clr-gray-600);
  border-color: var(--clr-gray-600);
  color: var(--clr-base-white);
}

.auth-page__footer {
  margin-top: 32px;
  font-size: 14px;
  color: var(--clr-text-secondary);
  line-height: 1.6;
}

.auth-page__link {
  color: var(--clr-text-primary);
  text-decoration: underline;
  transition: opacity 0.15s ease;
}
.auth-page__link:hover {
  opacity: 0.7;
}

.auth-page__success-box {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid var(--clr-success, #50cd89);
  background: var(--clr-success-light, #e8fff3);
  color: var(--clr-success, #50cd89);
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0;
}

/* 에러/안내: 심플 한 줄 스타일 (DPR) */
.auth-page__error-box {
  margin-bottom: 16px;
  text-align: center;
}
.auth-page__error-box[hidden] {
  display: none;
}
.auth-page__error-box:not([hidden]) {
  font-size: 14px;
  line-height: 1.5;
  color: var(--clr-error, #c00);
  padding: 0;
  background: transparent;
  border: none;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.auth-page__error {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: 1.5;
}

.auth-page__verify-step {
  width: 100%;
  text-align: center;
  margin-top: 8px;
}
.auth-page__verify-step[hidden] {
  display: none;
}

.auth-page__verify-desc {
  font-size: 14px;
  color: var(--clr-text-secondary);
  margin: 0 0 8px;
  line-height: 1.5;
}

.auth-page__verify-email {
  font-size: 18px;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 20px;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.auth-page__verify-step .auth-page__form {
  margin-bottom: 0;
}

.auth-page__label {
  display: block;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-secondary);
  margin-bottom: 6px;
}

.auth-page__input--code {
  text-align: center;
  letter-spacing: 0.25em;
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
}

.auth-page__captcha-wrap {
  margin-bottom: 1rem;
}
.auth-page__captcha-wrap[hidden] {
  display: none;
}

.auth-page__label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #111;
}

.auth-page__captcha-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 48px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .auth-page__captcha-row {
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.auth-page__captcha-img {
  display: block;
  width: 120px;
  height: 46px;
  object-fit: contain;
  object-position: center;
  border: 1px solid #111;
  background: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .auth-page__captcha-img {
    flex-shrink: 0;
  }
}

.auth-page__captcha-refresh {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}
.auth-page__captcha-refresh:hover {
  background: #f5f5f5;
}
@media (max-width: 480px) {
  .auth-page__captcha-refresh {
    flex-shrink: 0;
  }
}

.auth-page__input--captcha {
  flex: 1;
  min-width: 120px;
  height: 48px;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .auth-page__input--captcha {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
  }
}

.auth-page__btn-inner {
  display: inline-block;
}

.auth-page__btn-loader {
  display: none;
  margin-left: 8px;
  align-items: center;
}
.auth-page__btn-loader i {
  font-size: 1em;
}

.auth-page__btn.is-loading {
  pointer-events: none;
  cursor: wait;
}
.auth-page__btn.is-loading .auth-page__btn-loader {
  display: inline-flex;
}

.ss-main .ss-values .ss-placeholder {
  text-align: left;
  padding: 0;
  margin: 0;
}

.auth-page__select.ss-content {
  border: 1px solid var(--clr-gray-900);
  border-radius: 0;
  background: var(--clr-base-white);
  box-shadow: none;
}

.auth-page__select .ss-search {
  padding: 0;
  border-bottom: 1px solid var(--clr-gray-900);
}

.auth-page__select .ss-values .ss-single {
  margin: 0;
  text-align: left;
  line-height: var(--body-md-lh);
}

.auth-page__select .ss-search input {
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  font-size: 15px;
  font-family: inherit;
  border-radius: 0;
}
.auth-page__select .ss-search input::placeholder {
  color: var(--clr-text-secondary);
}
.auth-page__select .ss-search input:focus {
  outline: none;
}

.auth-page__select .ss-list {
  max-height: 240px;
  padding: 0;
}

.auth-page__select .ss-list .ss-option {
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--clr-text-primary);
  border: none;
  border-radius: 0;
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-left-color 0.15s ease;
}
.auth-page__select .ss-list .ss-option.ss-disabled {
  color: var(--clr-text-secondary);
  opacity: 0.7;
}

.auth-page__select.ss-content .ss-list .ss-option:hover:not(.ss-disabled),
.auth-page__select.ss-content .ss-list .ss-option.ss-highlighted {
  background-color: var(--clr-gray-100, #f5f5f5);
  color: var(--clr-text-primary);
  border-left-color: var(--clr-gray-300, #ddd);
}

.auth-page__select.ss-content .ss-list .ss-option.ss-selected {
  background-color: var(--clr-gray-100, #f5f5f5);
  color: var(--clr-text-primary);
  border-left-color: var(--clr-text-primary);
  font-weight: 500;
}

.profile-page {
  min-height: 100vh;
  padding: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 13.5533980583rem) clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4.7766990291rem) clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4.6213592233rem);
  background: var(--clr-base-white);
}
.profile-page__header {
  max-width: 1200px;
  margin: 0 auto clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  padding-bottom: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
  border-bottom: 1px solid var(--clr-gray-900);
}
.profile-page__header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  flex-wrap: wrap;
}
.profile-page__community-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--clr-gray-900);
  background: transparent;
  color: var(--clr-text-primary);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.profile-page__community-link:hover {
  background: var(--clr-text-primary);
  color: var(--clr-base-white);
  border-color: var(--clr-text-primary);
}
.profile-page__community-link:focus-visible {
  outline: 2px solid var(--clr-text-primary);
  outline-offset: 2px;
}
.profile-page__container {
  display: grid;
  grid-template-columns: minmax(280px, 320px) 1fr;
  column-gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .profile-page__container {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  }
}
.profile-page__main {
  width: 100%;
}
.profile-page__title {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 400;
  margin: 0;
  color: var(--clr-text-primary);
  text-align: left;
  letter-spacing: -0.02em;
}
.profile-page__section {
  margin-bottom: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  padding: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  border: 1px solid var(--clr-gray-200);
  background: var(--clr-base-white);
  border-radius: 0;
}
.profile-page__section:last-of-type {
  margin-bottom: 0;
}
.profile-page__section {
  /* 가로 패딩 제거 – 리스트/호버가 섹션 전체 너비로 보이도록 (My Posts, My Comments 등) */
}
.profile-page__section--no-padding-x {
  padding-left: 0;
  padding-right: 0;
}
.profile-page__section .profile-page__empty {
  border: none;
}
.profile-page__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
@media (max-width: 768px) {
  .profile-page__section-header {
    flex-direction: column;
    align-items: stretch;
  }
}
.profile-page__section-header--right {
  justify-content: flex-end;
  margin-bottom: 0;
}
.profile-page__section-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-page__section-hint {
  margin: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) 0 0;
  font-size: 14px;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}
.profile-page__section-title {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 400;
  margin: 0;
  color: var(--clr-text-primary);
  letter-spacing: -0.01em;
}
.profile-page__intro {
  margin: 0 0 clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  font-size: 15px;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}
.profile-page__nav-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
}
.profile-page__nav-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  border: 1px solid var(--clr-gray-900);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.profile-page__nav-card:hover {
  background: var(--clr-gray-100, #f5f5f5);
  border-color: var(--clr-text-primary);
}
.profile-page__nav-card:focus-visible {
  outline: 2px solid var(--clr-text-primary);
  outline-offset: 2px;
}
.profile-page__nav-card-icon {
  font-size: 2rem;
  color: var(--clr-text-primary);
}
.profile-page__nav-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--clr-text-primary);
}
.profile-page__nav-card-desc {
  font-size: 14px;
  color: var(--clr-text-secondary);
}
.profile-page__nav-tabs {
  display: flex;
  gap: 0;
  margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  border-bottom: 1px solid var(--clr-gray-900);
}
.profile-page__nav-tab {
  padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  font-size: 15px;
  font-weight: 400;
  color: var(--clr-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.profile-page__nav-tab:hover {
  color: var(--clr-text-primary);
}
.profile-page__nav-tab.is-active {
  color: var(--clr-text-primary);
  border-bottom-color: var(--clr-text-primary);
}
.profile-page__toolbar {
  margin-bottom: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.5553398058rem);
}
.profile-page__bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) 0;
  border-bottom: 1px solid var(--clr-gray-200, #e5e5e5);
}
.profile-page__bulk--hidden {
  display: none;
}
.profile-page__bulk-check-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.profile-page__bulk-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--clr-text-primary);
}
.profile-page__bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-page__bulk-actions .profile-page__btn {
  padding: 5px 10px;
  font-size: 13px;
  min-height: auto;
  border: 1px solid var(--clr-error, #c00);
  background: transparent;
  color: var(--clr-error, #c00);
}
.profile-page__bulk-actions .profile-page__btn:hover:not(:disabled) {
  background: rgba(204, 0, 0, 0.06);
  border-color: var(--clr-error, #c00);
  color: var(--clr-error, #c00);
}
.profile-page__btn--outline {
  border: 1px solid var(--clr-gray-300, #ddd);
  background: transparent;
  color: var(--clr-text-primary);
}
.profile-page__btn--outline:hover:not(:disabled) {
  background: var(--clr-gray-100, #f5f5f5);
}
.profile-page__filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
.profile-page__filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-page__filter-group--btn .profile-page__filter-label {
  visibility: hidden;
  user-select: none;
}
.profile-page__filter-label {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--clr-text-secondary);
}
.profile-page__select {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--clr-gray-900);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  font-family: inherit;
  min-width: 120px;
  height: 40px;
  box-sizing: border-box;
}
.profile-page__filters .profile-page__btn {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
  box-sizing: border-box;
}
.profile-page__filters .choices__inner {
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--clr-gray-900);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.profile-page__filters .choices[data-type*=select-one] .choices__inner {
  padding: 0 36px 0 12px;
}
.profile-page__filters .choices__list--dropdown {
  border: 1px solid var(--clr-gray-900);
  z-index: 20;
}
.profile-page__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.profile-page__list-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) 0;
  border-bottom: 1px solid var(--clr-gray-200, #e5e5e5);
  transition: background 0.2s ease;
}
.profile-page__list-item:last-child {
  border-bottom: none;
}
.profile-page__list-item:hover {
  background: var(--clr-gray-50, #fafafa);
}
.profile-page__list-item--blocked {
  justify-content: space-between;
  flex-wrap: wrap;
}
.profile-page__list-check-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-right: 12px;
}
.profile-page__list-check {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--clr-text-primary, #111);
}
.profile-page__list-link-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-page__list-link {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--clr-text-primary);
  text-decoration: none;
  display: block;
  transition: color 0.15s ease;
}
.profile-page__list-link:hover {
  color: var(--clr-gray-900, #111);
}
.profile-page__list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.profile-page__list-btn {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 0;
  border: 1px solid var(--clr-gray-300, #ddd);
  background: var(--clr-bg-primary, #fff);
  color: var(--clr-text-primary);
  cursor: pointer;
  text-decoration: none;
}
.profile-page__list-btn:hover:not(:disabled) {
  background: var(--clr-gray-100, #f5f5f5);
}
.profile-page__list-btn--delete:hover:not(:disabled) {
  border-color: var(--clr-error, #c00);
  color: var(--clr-error, #c00);
}
.profile-page__list-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.profile-page__list-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.profile-page__list-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--clr-text-primary);
  margin: 0 0 4px;
}
.profile-page__list-desc {
  font-size: 14px;
  color: var(--clr-text-secondary);
  margin: 0;
  line-height: 1.4;
}
.profile-page__badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--clr-gray-900);
  background: transparent;
  color: var(--clr-text-primary);
  transition: background 0.15s ease, color 0.15s ease;
}
.profile-page__list-item:hover .profile-page__badge {
  background: var(--clr-gray-900);
  color: var(--clr-base-white);
}
.profile-page__badge--status {
  text-transform: lowercase;
}
.profile-page__meta-text {
  font-size: 13px;
  color: var(--clr-text-secondary);
}
.profile-page__empty {
  margin: 0;
  padding: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  color: var(--clr-text-secondary);
  font-size: 15px;
  background: var(--clr-gray-100, #f5f5f5);
}
.profile-page__section .profile-page__empty {
  border: none;
}
.profile-page__pagination {
  margin-top: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  display: flex;
  justify-content: center;
}
.profile-page .comm-list-loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 7.0213592233rem);
  color: var(--clr-text-secondary);
  font-size: 15px;
}
.profile-page .comm-list-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 7.0213592233rem);
  color: var(--clr-text-secondary);
  font-size: 15px;
}
.profile-page .comm-list-loader i {
  font-size: 1.5rem;
}
.profile-page__list-blocked-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-page__list-blocked-form {
  margin: 0;
  flex-shrink: 0;
}
.profile-page__btn--sm {
  padding: 6px 12px;
  font-size: 14px;
}
.profile-page__avatar-uploader {
  margin-top: 0;
}
.profile-page__avatar-uploader .admin-single-image-uploader__box,
.profile-page__avatar-uploader .admin-file-uploader-box {
  border: none;
  padding: 0;
  background: transparent;
  min-height: 0;
}
.profile-page__avatar-uploader .admin-file-uploader__fallback {
  border: none;
  min-height: 160px;
  background: var(--clr-gray-100, #f5f5f5);
  border-radius: 0;
}
.profile-page__avatar-uploader .admin-single-image-uploader__choice .admin-file-uploader__dropzone {
  border: none;
  min-height: 160px;
  background: var(--clr-gray-100, #f5f5f5);
  border-radius: 0;
}
.profile-page__avatar-uploader .admin-single-image-uploader__choice .admin-file-uploader__dropzone:hover, .profile-page__avatar-uploader .admin-single-image-uploader__choice .admin-file-uploader__dropzone--dragover {
  background: var(--clr-gray-200, #eee);
}
.profile-page__avatar-uploader .admin-file-uploader__list .admin-file-uploader__item {
  border: none;
  background: transparent;
  border-radius: 0;
}
.profile-page__avatar-uploader .profile-page__form-hint {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 14px;
  color: var(--clr-text-secondary);
}
.profile-page__identity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  flex-wrap: wrap;
  padding: 0;
}
@media (max-width: 768px) {
  .profile-page__identity-row {
    flex-direction: column;
    align-items: stretch;
  }
}
.profile-page__identity-row .profile-page__section-actions {
  align-self: center;
}
.profile-page__identity {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
}
.profile-page__identity-details {
  flex: 1;
  min-width: 0;
}
.profile-page__account-info {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  flex: 1;
}
.profile-page__avatar {
  flex-shrink: 0;
  width: clamp(6.4rem, 1.0355987055vw + 6.0116504854rem, 8.6213592233rem);
  height: clamp(6.4rem, 1.0355987055vw + 6.0116504854rem, 8.6213592233rem);
  border-radius: 50%;
  background: var(--clr-gray-900);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--clr-gray-900);
}
.profile-page__avatar svg {
  width: 60%;
  height: 60%;
  color: var(--clr-base-white);
}
.profile-page__avatar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--clr-base-white);
  font-size: 2rem;
}
.profile-page__avatar--large {
  width: clamp(8rem, 1.0355987055vw + 7.6116504854rem, 10.2213592233rem);
  height: clamp(8rem, 1.0355987055vw + 7.6116504854rem, 10.2213592233rem);
}
.profile-page__avatar--large .profile-page__avatar-icon {
  font-size: 2.5rem;
}
.profile-page__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-page__account-details {
  flex: 1;
}
.profile-page__username {
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 400;
  margin: 0 0 4px;
  color: var(--clr-text-primary);
  letter-spacing: -0.01em;
}
.profile-page__email {
  font-size: clamp(14px, 1.5vw, 16px);
  margin: 0;
  color: var(--clr-text-secondary);
}
.profile-page__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--clr-gray-200);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.profile-page__edit-btn i {
  font-size: 0.75rem;
}
.profile-page__edit-btn--with-icon .profile-page__edit-btn-icon {
  font-size: 1.125rem;
}
.profile-page__edit-btn:hover {
  background: var(--clr-gray-50);
  border-color: var(--clr-gray-300);
  color: var(--clr-text-primary);
}
.profile-page__edit-btn:focus-visible {
  outline: 2px solid var(--clr-text-primary);
  outline-offset: 2px;
}
.profile-page__edit-btn--secondary {
  border: 1px solid var(--clr-gray-200);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
}
.profile-page__edit-btn--secondary:hover {
  background: var(--clr-gray-50);
  border-color: var(--clr-gray-300);
  color: var(--clr-text-primary);
}
.profile-page__footer-actions {
  margin-top: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4.4660194175rem);
  padding-top: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  display: flex;
  justify-content: flex-end;
}
.profile-page__delete-form {
  display: inline-block;
}
.profile-page__delete-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  color: var(--clr-error, #c00);
  font-size: 15px;
  font-weight: 400;
  transition: opacity 0.15s ease;
}
.profile-page__delete-btn:hover {
  opacity: 0.8;
  text-decoration: underline;
}
.profile-page__delete-btn:focus-visible {
  outline: 2px solid var(--clr-error, #c00);
  outline-offset: 2px;
}
.profile-page__info-value--masked {
  font-variant-numeric: tabular-nums;
}
.profile-page__tabs {
  display: flex;
  gap: 0;
  margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  border-bottom: 1px solid var(--clr-gray-900);
}
.profile-page__tab {
  padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  font-size: 15px;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.profile-page__tab:hover {
  color: var(--clr-text-primary);
}
.profile-page__tab.is-active {
  color: var(--clr-text-primary);
  border-bottom-color: var(--clr-text-primary);
}
.profile-page__panel.is-active {
  display: block;
}
.profile-page__error-box {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--clr-error-bg, #fff5f5);
  color: var(--clr-error, #c00);
  font-size: 14px;
  border: 1px solid var(--clr-error, #f1416c);
}
.profile-page__back {
  margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.profile-page__link {
  color: var(--clr-text-primary);
  text-decoration: underline;
}
.profile-page__link:hover {
  opacity: 0.8;
}
.profile-page__form {
  max-width: 560px;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.profile-page__avatar-edit {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  flex-wrap: wrap;
  margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.profile-page__avatar-preview-wrap {
  flex-shrink: 0;
  position: relative;
}
.profile-page__dropzone {
  min-width: 160px;
  padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  border: 2px dashed var(--clr-gray-900);
  background: var(--clr-gray-100, #f5f5f5);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.profile-page__dropzone:hover, .profile-page__dropzone.is-dragover {
  background: var(--clr-gray-200, #eee);
  border-color: var(--clr-text-primary);
}
.profile-page__feedback {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--clr-text-secondary);
  line-height: 1.4;
}
.profile-page {
  /* 커스텀 IntlPhoneInput (인라인 플래그 + 번호) */
}
.profile-page .intl-phone {
  max-width: 320px;
}
.profile-page .intl-phone__wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--clr-gray-900);
  background: var(--clr-base-white);
}
.profile-page .intl-phone__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-right: 1px solid var(--clr-gray-900);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.profile-page .intl-phone__trigger:hover {
  background: var(--clr-gray-100, #f5f5f5);
}
.profile-page .intl-phone__flag {
  font-size: 1.1em;
  line-height: 1;
}
.profile-page .intl-phone__dial {
  font-weight: 400;
}
.profile-page .intl-phone__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: 2px;
  min-width: 200px;
  max-height: 280px;
  overflow: hidden;
  background: var(--clr-base-white);
  border: 1px solid var(--clr-gray-900);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.profile-page .intl-phone__search {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--clr-gray-900);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.profile-page .intl-phone__search:focus {
  outline: none;
}
.profile-page .intl-phone__list {
  max-height: 220px;
  overflow-y: auto;
}
.profile-page .intl-phone__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--clr-text-primary);
  cursor: pointer;
}
.profile-page .intl-phone__item:hover {
  background: var(--clr-gray-100, #f5f5f5);
}
.profile-page .intl-phone__item-flag {
  font-size: 1em;
}
.profile-page .intl-phone__item-name {
  flex: 1;
}
.profile-page .intl-phone__item-dial {
  color: var(--clr-text-secondary);
  font-size: 13px;
}
.profile-page .intl-phone input[data-intl-phone-national] {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: none;
  font-size: 15px;
  font-family: inherit;
  background: transparent;
  color: var(--clr-text-primary);
}
.profile-page .intl-phone input[data-intl-phone-national]:focus {
  outline: none;
}
.profile-page .intl-phone__wrap {
  position: relative;
}
.profile-page {
  /* Profile image uploader – 원형 미리보기, label로 클릭 시 파일 선택 */
}
.profile-page .profile-image-uploader__preview-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.profile-image-uploader.is-dragover .profile-page .profile-image-uploader__preview-wrap {
  transform: scale(1.04);
  box-shadow: 0 0 0 3px var(--clr-text-primary);
}
.profile-page .profile-image-uploader__trigger {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.profile-page .profile-image-uploader__preview {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--clr-gray-200, #eee);
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-page .profile-image-uploader__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-page .profile-image-uploader__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-gray-500);
}
.profile-page .profile-image-uploader__placeholder i {
  font-size: 2.5rem;
}
.profile-page .profile-image-uploader__overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: var(--clr-base-white);
  font-size: 13px;
  font-weight: 500;
  padding: 0 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.profile-image-uploader__trigger:hover .profile-page .profile-image-uploader__overlay, .profile-image-uploader__trigger:focus-visible .profile-page .profile-image-uploader__overlay, .profile-image-uploader.is-dragover .profile-page .profile-image-uploader__overlay {
  opacity: 1;
}
.profile-page .profile-image-uploader--loading .profile-image-uploader__overlay {
  opacity: 1;
  font-size: 0;
  color: transparent;
  background: rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  animation: profile-image-uploader-spin 0.8s linear infinite;
}
@keyframes profile-image-uploader-spin {
  to {
    transform: rotate(360deg);
  }
}
.profile-page__avatar-input {
  display: block;
  margin-top: 8px;
  font-size: 14px;
}
.profile-page__file-input--hidden {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.profile-page__field {
  margin-bottom: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}
.profile-page__phone-wrap {
  max-width: 320px;
}
.profile-page__radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
  margin-top: 6px;
}
.profile-page__radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--clr-text-primary);
  cursor: pointer;
  font-weight: 400;
}
.profile-page__radio {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--clr-text-primary);
  cursor: pointer;
}
.profile-page__radio-text {
  user-select: none;
}
.profile-page__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text-secondary);
  margin-bottom: 6px;
}
.profile-page__input {
  width: 100%;
  max-width: 320px;
  padding: 8px 12px;
  font-size: 15px;
  border: 1px solid var(--clr-gray-900);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  font-family: inherit;
  border-radius: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.profile-page__input::placeholder {
  color: var(--clr-text-secondary, #6b7280);
}
.profile-page__input:hover {
  border-color: var(--clr-text-primary);
}
.profile-page__input:focus {
  outline: none;
  border-color: var(--clr-text-primary);
  background: var(--clr-base-white);
}
.profile-page__input:disabled {
  background: var(--clr-gray-100, #f5f5f5);
  color: var(--clr-text-secondary);
  border-color: var(--clr-gray-900);
}
.profile-page__input--birth {
  border-color: #000;
}
.profile-page__input--birth:hover, .profile-page__input--birth:focus {
  border-color: #000;
}
.profile-page__input-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
}
.profile-page__input-wrap--password .profile-page__input {
  padding-right: 44px;
}
.profile-page__password-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: color 0.15s ease;
}
.profile-page__password-toggle:hover {
  color: var(--clr-text-primary);
}
.profile-page__password-toggle i {
  font-size: 1rem;
}
.profile-page select.profile-page__input, .profile-page__input[data-profile-select] {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1.5'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.profile-page select.profile-page__input option, .profile-page__input[data-profile-select] option {
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
}
.profile-page select.profile-page__input:hover, .profile-page__input[data-profile-select]:hover {
  border-color: var(--clr-text-primary);
}
.profile-page select.profile-page__input:focus, .profile-page__input[data-profile-select]:focus {
  border-color: var(--clr-text-primary);
  background-color: var(--clr-base-white);
}
.profile-page__static {
  font-size: 15px;
  color: var(--clr-text-primary);
  margin: 0 0 4px;
}
.profile-page__verify-message {
  margin: 0 0 1rem;
  color: var(--clr-text-secondary);
  font-size: 14px;
}
.profile-page__code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-page__input--code {
  width: 8em;
  text-align: center;
  letter-spacing: 0.2em;
}
.profile-page__countdown {
  font-size: 15px;
  font-weight: 500;
  color: var(--clr-text-primary);
  min-width: 3em;
}
.profile-page__countdown.is-expired {
  color: var(--clr-error, #c00);
}
.profile-page__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem);
  padding-top: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.profile-page__actions--form {
  margin-top: 20px;
  padding-top: 0;
  justify-content: flex-start;
}
.profile-page__btn-loader {
  display: none;
  margin-left: 6px;
  vertical-align: middle;
}
.profile-page__btn--loading .profile-page__btn-loader {
  display: inline-block;
}
.profile-page__btn-loader i {
  font-size: 1em;
}
.profile-page__btn {
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--clr-gray-900);
  background: transparent;
  color: var(--clr-text-primary);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.profile-page__btn:hover {
  background: var(--clr-gray-100);
}
.profile-page__btn--primary {
  background: var(--clr-text-primary);
  color: var(--clr-base-white);
  border-color: var(--clr-text-primary);
}
.profile-page__btn--primary:hover {
  background: var(--clr-text-primary);
  color: var(--clr-base-white);
  border-color: var(--clr-text-primary);
  filter: brightness(1.12);
}
.profile-page__btn--apply {
  background: #000;
  color: var(--clr-base-white);
  border-color: #000;
}
.profile-page__btn--apply:hover {
  background: #000;
  color: var(--clr-base-white);
  border-color: #000;
  filter: brightness(1.12);
}
.profile-page__btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}
.profile-page__info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem) clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
@media (max-width: 768px) {
  .profile-page__info-grid {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  }
}
.profile-page__info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-page__info-label {
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 500;
  color: var(--clr-text-secondary);
  margin: 0;
}
.profile-page__info-value {
  font-size: clamp(15px, 1.8vw, 16px);
  color: var(--clr-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-page__password-mask {
  flex: 1;
}
.profile-page__password-toggle {
  flex-shrink: 0;
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}
.profile-page__password-toggle:hover {
  color: var(--clr-text-primary);
}
.profile-page__password-toggle:focus-visible {
  outline: 2px solid var(--clr-text-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.profile-page__password-toggle i {
  font-size: 16px;
}
.profile-page__settings-list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}
.profile-page__setting-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) 0;
  border-bottom: 1px solid var(--clr-gray-900);
}
.profile-page__setting-item:last-child {
  border-bottom: none;
}
.profile-page__setting-item input[type=checkbox] {
  margin-top: 2px;
  accent-color: var(--clr-text-primary);
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.profile-page__setting-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-page__setting-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--clr-text-primary);
}
.profile-page__setting-desc {
  font-size: 13px;
  color: var(--clr-text-secondary);
}
.profile-page__card {
  padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  border: 1px solid var(--clr-gray-900);
  background: var(--clr-base-white);
  margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.profile-page__card:last-child {
  margin-bottom: 0;
}
.profile-page__card-title {
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--clr-text-primary);
}
.profile-page__card-price {
  font-size: 15px;
  color: var(--clr-text-secondary);
  margin: 0 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}
.profile-page__card-list {
  margin: 0 0 clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  padding-left: 1.25em;
  color: var(--clr-text-primary);
  font-size: 14px;
  line-height: 1.5;
}
.profile-page__paragraph {
  margin: 0 0 1em;
  font-size: 15px;
  line-height: 1.6;
  color: var(--clr-text-primary);
}
.profile-page__paragraph:last-child {
  margin-bottom: 0;
}
.profile-page__empty {
  margin: 0;
  padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  color: var(--clr-text-secondary);
  font-size: 15px;
  border: 1px solid var(--clr-gray-900);
  background: var(--clr-gray-100, #f5f5f5);
}
.profile-page__delete-link {
  font-size: clamp(14px, 1.5vw, 15px);
  color: var(--clr-error, #f1416c);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.15s ease;
}
.profile-page__delete-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}
.profile-page__delete-link:focus-visible {
  outline: 2px solid var(--clr-error, #f1416c);
  outline-offset: 2px;
}
.profile-page__divider {
  margin: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem) 0;
  border: none;
  border-top: 1px solid var(--clr-gray-900);
}
.profile-page__subtitle {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 600;
  margin: 0 0 clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  color: var(--clr-text-primary);
}
.profile-page__code-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-page__code-wrap .profile-page__input {
  flex: 1 1 auto;
  min-width: 120px;
}
.profile-page__countdown {
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text-secondary);
  min-width: 3em;
}
.profile-page__countdown.is-expired {
  color: var(--clr-error, #c00);
}
.profile-page__form-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--clr-text-secondary);
  line-height: 1.4;
}
.profile-page__form + .profile-page__form-hint {
  margin-top: 16px;
}
.profile-page {
  /* 프로필 이미지: 내부 박스 없음(섹션 하나만), 업로드된 파일 행은 border-bottom만 */
}
.profile-page__avatar-uploader .admin-file-uploader-box {
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.profile-page__avatar-uploader .admin-file-uploader__fallback {
  min-height: 120px;
  padding: 16px;
  border: 2px dashed var(--clr-gray-900);
  border-radius: 0;
  background: var(--clr-gray-100, #f5f5f5);
  cursor: pointer;
}
.profile-page__avatar-uploader .admin-file-uploader__fallback:hover {
  border-color: var(--clr-text-primary);
  background: var(--clr-gray-200, #eee);
}
.profile-page__avatar-uploader.admin-file-uploader-box--inited .admin-file-uploader__fallback, .profile-page__avatar-uploader .admin-file-uploader-box--inited .admin-file-uploader__fallback {
  display: none;
}
.profile-page__avatar-uploader .admin-file-uploader__dropzone {
  min-height: 120px;
  padding: 16px;
  border: 2px dashed var(--clr-gray-900);
  border-radius: 0;
  background: var(--clr-gray-100, #f5f5f5);
  cursor: pointer;
}
.profile-page__avatar-uploader .admin-file-uploader__dropzone:hover, .profile-page__avatar-uploader .admin-file-uploader__dropzone.admin-file-uploader__dropzone--dragover {
  border-color: var(--clr-text-primary);
  background: var(--clr-gray-200, #eee);
}
.profile-page__avatar-uploader .admin-file-uploader__dropzone--disabled {
  pointer-events: none;
  opacity: 0.65;
}
.profile-page__avatar-uploader .admin-file-uploader__dropzone-icon {
  font-size: 1.5rem;
  color: var(--clr-text-secondary);
  margin-bottom: 8px;
}
.profile-page__avatar-uploader .admin-file-uploader__dropzone-text {
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 4px;
}
.profile-page__avatar-uploader .admin-file-uploader__dropzone-hint {
  font-size: 13px;
  color: var(--clr-text-secondary);
}
.profile-page__avatar-uploader .admin-file-uploader__list {
  margin-top: 12px;
}
.profile-page__avatar-uploader .admin-input-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text-secondary);
  margin: 0 0 8px;
}
.profile-page__avatar-uploader .admin-file-uploader__grid--image {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.profile-page__avatar-uploader .admin-file-uploader__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--clr-gray-900);
  border-radius: 0;
}
.profile-page__avatar-uploader .admin-file-uploader__thumb {
  width: 80px;
  min-width: 80px;
  height: 80px;
  max-height: none;
  object-fit: cover;
  border: none;
  outline: none;
  border-radius: 0;
}
.profile-page__avatar-uploader .admin-file-uploader__meta {
  flex: 1;
  min-width: 0;
}
.profile-page__avatar-uploader .admin-file-uploader__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-page__avatar-uploader .admin-file-uploader__size {
  font-size: 12px;
  color: var(--clr-text-secondary);
}
.profile-page__avatar-uploader .admin-file-uploader__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-page__avatar-uploader .admin-btn {
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid var(--clr-gray-900);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.profile-page__avatar-uploader .admin-btn:hover {
  background: var(--clr-gray-100, #f5f5f5);
}
.profile-page__avatar-uploader .admin-btn--danger {
  color: var(--clr-error, #c00);
  border-color: var(--clr-error, #c00);
}
.profile-page__avatar-uploader .admin-btn--danger:hover {
  background: var(--clr-error-bg, #fff5f5);
}
.profile-page__avatar-uploader .admin-file-uploader__dropzone-loader {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  color: var(--clr-text-secondary);
}
.profile-page__avatar-uploader .admin-file-uploader-box--loading .admin-file-uploader__dropzone .admin-file-uploader__dropzone-loader {
  display: flex;
}

.terms-index .terms-index__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-text-primary);
}

.terms-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-radius: 4px;
}

.terms-index__item {
  border-bottom: 1px solid var(--clr-gray-200, #eee);
}
.terms-index__item:last-child {
  border-bottom: none;
}

.terms-index__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  color: var(--clr-text-primary);
  text-decoration: none;
  font-size: 15px;
  transition: opacity 0.15s ease;
}
.terms-index__link:hover {
  opacity: 0.8;
}
.terms-index__link:focus-visible {
  outline: 2px solid var(--clr-focus);
  outline-offset: 2px;
}

.terms-index__text {
  font-weight: 400;
}

.terms-index__icon {
  font-size: 12px;
  color: var(--clr-text-secondary);
}

.terms-doc__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  font-size: 15px;
  color: var(--clr-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.terms-doc__back:hover {
  color: var(--clr-text-primary);
}
.terms-doc__back:focus-visible {
  outline: 2px solid var(--clr-focus);
  outline-offset: 2px;
}

.terms-doc__content {
  font-size: 15px;
  line-height: 1.7;
  color: var(--clr-text-primary);
}
.terms-doc__content p {
  margin: 0 0 1em;
}
.terms-doc__content strong {
  font-weight: 600;
}
.terms-doc__content ul {
  margin: 0 0 1em;
  padding-left: 1.4em;
}
.terms-doc__content li {
  margin-bottom: 0.4em;
}
.terms-doc__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 14px;
}
.terms-doc__content th,
.terms-doc__content td {
  border: 1px solid var(--clr-gray-900);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.terms-doc__content th {
  font-weight: 600;
  background: var(--clr-gray-100, #f5f5f5);
}
.terms-doc__content a {
  color: var(--clr-primary, #2563eb);
  text-decoration: none;
}
.terms-doc__content a:hover {
  text-decoration: underline;
}

/* 리스트 영역 (My Posts, My Comments, My reports, Blocked members) – 패딩 없음, empty는 문구만 */
.list__section {
  padding: 0;
  margin-bottom: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.list__section:last-child {
  margin-bottom: 0;
}
.list__section .profile-page__list {
  padding-left: 0;
  padding-right: 0;
}
.list__section .profile-page__list-item {
  padding-left: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  padding-right: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}

.list__empty {
  margin: 0;
  padding: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem) 0;
  background: none;
  border: none;
  color: var(--clr-text-secondary, #666);
  font-size: clamp(14px, 1.4vw, 15px);
  text-align: center;
}

body:has(.no-main) {
  background: var(--clr-base-black);
}

.no-main {
  background: var(--clr-base-black);
  color: var(--clr-base-white);
}

/* =============================================================
 * Hero
 * ============================================================= */
.no-main-hero {
  position: relative;
  width: 100%;
  height: clamp(56rem, 14.2394822006vw + 50.6601941748rem, 86.5436893204rem);
  overflow: hidden;
}
.no-main-hero__container {
  height: 100%;
  display: flex;
  align-items: center;
}
.no-main-hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.no-main-hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-main-hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.75) 100%);
}
.no-main-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.no-main-hero__title {
  max-width: clamp(32rem, 24.5954692557vw + 22.7766990291rem, 84.7572815534rem);
  color: var(--clr-base-white);
  font-family: var(--family-satoshi);
  font-weight: 400;
}
@media (max-width: 768px) {
  .no-main-hero__title {
    max-width: 100%;
    text-align: left;
  }
}

/* =============================================================
 * Shared inline link button (About us / View all work) — `_button.scss` no-main-cta-flat
 * ============================================================= */
.no-main-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.6330097087rem);
  padding: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem) clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  border-radius: 0;
  border: 1px solid var(--clr-base-white);
  background: transparent;
  color: var(--clr-base-white);
  font-family: var(--family-satoshi);
  font-weight: 400;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background var(--tran-15), border-color var(--tran-15);
}
.no-main-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--clr-base-white);
}
.no-main-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
.no-main-link .fa-arrow-up-right,
.no-main-link .fa-arrow-right {
  flex-shrink: 0;
  font-size: 0.75em;
  line-height: 1;
  opacity: 0.95;
  transform: none;
  padding-top: 0;
  color: inherit;
}

/* =============================================================
 * About (What you do INWARD BRANDING)
 * ============================================================= */
.no-main-about__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.8213592233rem);
}
@media (max-width: 768px) {
  .no-main-about__head {
    display: contents;
  }
}
.no-main-about__heading {
  color: var(--clr-base-white);
  font-family: var(--family-satoshi);
  font-weight: 500;
}
@media (max-width: 768px) {
  .no-main-about__heading {
    order: 1;
    margin-bottom: var(--spacing-4xl);
  }
}
.no-main-about__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.4rem, 3.1067961165vw + 1.2349514563rem, 9.0640776699rem);
}
@media (max-width: 1024px) {
  .no-main-about__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem);
  }
}
@media (max-width: 768px) {
  .no-main-about__list {
    order: 2;
  }
}
@media (max-width: 544px) {
  .no-main-about__list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  .no-main-about > .no-container-xl {
    display: flex;
    flex-direction: column;
  }
  .no-main-about .no-main-link {
    order: 3;
    align-self: flex-start;
    margin-top: var(--spacing-4xl);
  }
}
.no-main-about__item {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
}
.no-main-about__icon {
  width: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 6.2213592233rem);
  height: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 6.2213592233rem);
  margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.no-main-about__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.no-main-about__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}
.no-main-about__title {
  color: var(--clr-base-white);
  font-family: var(--family-satoshi);
  font-weight: 600;
}
.no-main-about__subtitle {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--family-pretendard);
  margin-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
}
.no-main-about__desc {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--family-pretendard);
}

/* =============================================================
 * Work — 카드·그리드는 `_work.scss` 의 `.no-work-grid` / `.no-work-card` 공통 사용
 * ============================================================= */
.no-main-work__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.8213592233rem);
}
@media (max-width: 768px) {
  .no-main-work__head {
    display: contents;
  }
}
.no-main-work__heading {
  color: var(--clr-base-white);
  font-family: var(--family-satoshi);
  font-weight: 500;
}
@media (max-width: 768px) {
  .no-main-work__heading {
    order: 1;
    margin-bottom: var(--spacing-3xl);
  }
}
@media (max-width: 768px) {
  .no-main-work > .no-container-xl {
    display: flex;
    flex-direction: column;
  }
  .no-main-work .no-work-grid {
    order: 2;
  }
  .no-main-work .no-main-link {
    order: 3;
    align-self: flex-start;
    margin-top: var(--spacing-4xl);
  }
}

body:has(.no-work) {
  background: var(--clr-base-black);
}

.no-work {
  background: var(--clr-base-black);
  color: var(--clr-base-white);
}

/* =============================================================
 * Hero
 * ============================================================= */
.no-work-hero__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem);
}
@media (max-width: 768px) {
  .no-work-hero__inner {
    grid-template-columns: 1fr;
  }
}
.no-work-hero__eyebrow {
  color: var(--clr-primary-main);
}
.no-work-hero__heading {
  color: var(--clr-base-white);
}
.no-work-hero__desc {
  color: rgba(255, 255, 255, 0.65);
}

/* =============================================================
 * Filter
 * ============================================================= */
.no-work-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
  padding-top: 1.2rem;
}
.no-work-filter__row + .no-work-filter__row {
  margin-top: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  padding-top: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.no-work-filter__divider {
  display: inline-block;
  width: 1px;
  height: clamp(1rem, 0.1941747573vw + 0.927184466rem, 1.4165048544rem);
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  align-self: center;
}

.no-work-cat {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem) clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  border-radius: 9999px;
  color: var(--clr-base-white);
  font-weight: 400;
  cursor: pointer;
  transition: color var(--tran-15);
  border: none;
  background: transparent;
}
.no-work-cat:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.75);
}
.no-work-cat.is-active {
  color: var(--clr-primary-main);
  font-weight: 700;
  /* 헤더 `.no-header__nav-link[aria-current="page"]::after` 와 동형 — 메인 컬러 언더바 */
}
.no-work-cat.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--clr-primary-main);
}

.no-work-tag {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 0.1294498382vw + 0.4514563107rem, 0.7776699029rem);
  padding: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem) clamp(0.48rem, 1.7605177994vw - 0.1801941748rem, 4.2563106796rem);
  border: 1px solid var(--clr-base-white);
  border-radius: 9999px;
  color: var(--clr-base-white);
  cursor: pointer;
  font-weight: 400;
  transition: color var(--tran-15), border-color var(--tran-15), background var(--tran-15);
  background: transparent;
}
.no-work-tag i {
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: width var(--tran-15), opacity var(--tran-15);
  pointer-events: none;
  flex-shrink: 0;
}
.no-work-tag:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.45);
}
.no-work-tag.is-active {
  color: var(--clr-base-black);
  background: var(--clr-primary-main);
  border-color: var(--clr-primary-main);
  font-weight: 600;
}
.no-work-tag.is-active i {
  display: inline-flex;
  opacity: 1;
}

/* =============================================================
 * Grid
 * ============================================================= */
.no-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 7.0213592233rem) 3.2rem;
}
@media (max-width: 768px) {
  .no-work-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.no-work-item.is-hidden {
  display: none;
}

/* 서비스 칩: `components/_work-service-tags.scss` (카드·상세·메인 공통) */
.no-work-card {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  color: inherit;
}
.no-work-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.no-work-card__figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--clr-gray-800);
}
.no-work-card__figure img,
.no-work-card__figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tran-3);
}
.no-work-card__figure {
  /* 마스크 리빌 — bottom→top 으로 clip-path 가 열리고 미디어가 1.08→1 로 풀린다.
     초기 상태(.no-work-card__figure[data-mask-reveal]) 는 완전히 가려진 채 대기,
     .is-revealed (TS: WorkMediaMaskReveal) 가 붙으면 동시에 풀린다.
     --mask-delay 는 행 단위 stagger 용 (TS 에서 inline 으로 주입). */
}
.no-work-card__figure[data-mask-reveal] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.15s cubic-bezier(0.7, 0, 0.18, 1) var(--mask-delay, 0ms);
  will-change: clip-path;
}
.no-work-card__figure[data-mask-reveal] img,
.no-work-card__figure[data-mask-reveal] video {
  transform: scale(1.08);
  transition: transform 1.4s cubic-bezier(0.18, 0.7, 0.22, 1) var(--mask-delay, 0ms);
  will-change: transform;
}
.no-work-card__figure[data-mask-reveal].is-revealed {
  clip-path: inset(0 0 0 0);
}
.no-work-card__figure[data-mask-reveal].is-revealed img,
.no-work-card__figure[data-mask-reveal].is-revealed video {
  transform: scale(1);
}
.no-work-card:hover .no-work-card__figure img, .no-work-card:hover .no-work-card__figure video {
  transform: scale(1.04);
}
.no-work-card {
  /* 홈(메인) Work 그리드 한정 — 미디어가 많고 첫 화면 밖이라, 페인트/레이어 비용이 큰
     clip-path 마스크 + scale 대신 가벼운 opacity + translateY 리빌로 낮춘다.
     (`/work` 목록 카드는 위 clip-path 마스크 그대로 유지.) 톤·간격·색은 불변. */
}
.no-main-work .no-work-card__figure[data-mask-reveal] {
  clip-path: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out var(--mask-delay, 0ms), transform 0.7s cubic-bezier(0.22, 0.7, 0.18, 1) var(--mask-delay, 0ms);
  will-change: opacity, transform;
}
.no-main-work .no-work-card__figure[data-mask-reveal] img,
.no-main-work .no-work-card__figure[data-mask-reveal] video {
  /* 메인 그리드에선 미디어 스케일 트윈 제거 — 컨테이너 페이드/슬라이드만. */
  transform: none;
  transition: transform var(--tran-3);
  will-change: auto;
}
.no-main-work .no-work-card__figure[data-mask-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  /* 리빌 완료 후 상시 레이어 승격 제거 */
  will-change: auto;
}
.no-work-card:hover .no-work-card__title {
  color: var(--clr-primary-main);
}
.no-work-card__body {
  padding-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.no-work-card__title {
  margin: 0;
  color: var(--clr-base-white);
  font-family: var(--family-satoshi);
  font-weight: 600;
  font-size: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  line-height: 1.44;
  letter-spacing: -0.02em;
  transition: color var(--tran-15);
}

/* =============================================================
 * Empty state
 * ============================================================= */
.no-work-empty {
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}
.no-work-empty[hidden] {
  display: none;
}

/* =============================================================
 * Pagination (dark surface — shared .no-pagination 토큰 오버라이드)
 * ============================================================= */
.no-work-pagination {
  display: flex;
  justify-content: center;
}
.no-work-pagination[hidden] {
  display: none;
}
.no-work-pagination .no-pagination {
  color: var(--clr-base-white);
}
.no-work-pagination .no-pagination__dots {
  color: rgba(255, 255, 255, 0.45);
}
.no-work-pagination .no-pagination__link {
  border-color: rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--clr-base-white);
}
.no-work-pagination .no-pagination__link:hover:not(.--disabled):not([aria-disabled=true]) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
}
.no-work-pagination .no-pagination__link--num {
  border-color: transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
}
.no-work-pagination .no-pagination__link--num:hover:not(.--disabled):not([aria-disabled=true]) {
  color: var(--clr-base-white);
}
.no-work-pagination .no-pagination__link--num.is-active, .no-work-pagination .no-pagination__link--num[aria-current=page] {
  background: transparent;
  border-color: transparent;
  color: var(--clr-primary-main);
  box-shadow: 0 2px 0 0 var(--clr-primary-main);
}
.no-work-pagination .no-pagination__link--arrow {
  color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
  background: transparent;
}
.no-work-pagination .no-pagination__link--arrow:hover:not(.--disabled):not([aria-disabled=true]) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.no-work-pagination .no-pagination__link.--disabled,
.no-work-pagination .no-pagination__link[aria-disabled=true] {
  color: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
  opacity: 1;
}

.no-main .no-work-card__figure[data-mask-reveal],
.no-work .no-work-card__figure[data-mask-reveal],
.no-about .no-work-card__figure[data-mask-reveal] {
  clip-path: none;
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}
.no-main .no-work-card__figure[data-mask-reveal] img,
.no-main .no-work-card__figure[data-mask-reveal] video,
.no-work .no-work-card__figure[data-mask-reveal] img,
.no-work .no-work-card__figure[data-mask-reveal] video,
.no-about .no-work-card__figure[data-mask-reveal] img,
.no-about .no-work-card__figure[data-mask-reveal] video {
  transform: none;
  will-change: auto;
}

/* =========================================================
 * Work 상세 페이지 공용 섹션 스타일 (8개 섹션 공통 + 섹션별 modifier)
 * BEM: .no-work-section / .no-work-section__*  / .no-work-section--<slug>
 * ========================================================= */
.no-work-detail {
  position: relative;
  isolation: isolate; /* 자체 stacking context — .no-work-visual-fade(z:0) 와 콘텐츠(z:1) 순서를 이 안에서 결정 */
  background: var(--clr-base-black);
  color: var(--clr-text, #fafafa);
  /* 직접 자식(히어로 섹션·블록·하단 목록 등)은 비주얼 색 오버레이 위에 둔다 — 콘텐츠가 색에 덮이지 않게. */
}
.no-work-detail > * {
  position: relative;
  z-index: 1;
}
.no-work-detail {
  /* 하단 "목록" 영역의 구분선 제거 (깔끔하게) */
}
.no-work-detail .no-name-market-item-actions {
  border-top: 0;
}

/* 비주얼 색 = 페이지 전체 배경 (스크롤하면 본문 검정으로 페이드) — 마크업: pages/work/detail.php, 구동: home/work/WorkVisualColorFade.ts */
.no-work-detail > .no-work-visual-fade {
  position: fixed;
  inset: 0; /* 뷰포트 전체 */
  z-index: 0; /* .no-work-detail > * 의 z-index:1 아래 → 모든 콘텐츠 뒤에 깔린다 */
  pointer-events: none;
  will-change: opacity;
  /* background(관리자 비주얼 색, hex/그라데이션)는 인라인 style 로 주입. opacity 는 JS(ScrollTrigger)가 1→0 으로 스크럽 */
}

/* ============================================================
 * 블록 래퍼 — 뷰포트 밖 섹션의 paint/layout 을 스킵해 스크롤 성능 확보.
 *  - contain-intrinsic-size 로 placeholder 박스를 잡아 CLS 방지.
 *  - hero(visual fade) 와 fixed 오버레이는 content-visibility 의 stacking context 영향이 있어 제외.
 *  - ScrollTrigger 의 trigger 영역 계산에는 영향 없음(GSAP 공식 권장 패턴).
 * ============================================================ */
.no-work-detail .no-work-block {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* ============================================================
 * 섹션 위/아래 여백 오버라이드 (관리자 CMS: meta_json.spacing)
 *  - 공개(.no-work-block--custom-spacing-*) + CMS 미리보기(.no-blocks-showcase--cms-preview 에 동일 클래스)
 *    양쪽에서 동작하도록 클래스 기반으로 작성.
 *  - "기본 간격 대체": 설정된 edge 만 래퍼에 padding 을 주고, 내부 섹션(.no-section-*)의
 *    해당 방향 padding 은 0 으로 무력화해 래퍼로 일원화한다. 미설정 edge 는 섹션 기본 유지.
 * ============================================================ */
.no-work-block--custom-spacing-top {
  padding-top: var(--block-pad-top, 0);
  /* 내부 섹션이 자체 no-section-* 패딩으로 간격을 만들므로 해당 방향만 무력화 → 래퍼로 일원화.
     (CMS 색상 위젯 .admin-cms-block-color 등 no-section-* 없는 직계 자식은 영향 없음) */
}
.no-work-block--custom-spacing-top > [class*=no-section-] {
  padding-top: 0;
}

.no-work-block--custom-spacing-bottom {
  padding-bottom: var(--block-pad-bottom, 0);
}
.no-work-block--custom-spacing-bottom > [class*=no-section-] {
  padding-bottom: 0;
}

/* ============================================================
 * 이미지 정렬·너비 (관리자 CMS: meta_json.image — 단일 이미지 full_image 섹션)
 *  - 너비: 래퍼 인라인 --img-width 변수를 figure 가 읽음(기본 100%).
 *  - 정렬: .no-work-block--img-align-{left|right} 마커 클래스(center=기본).
 *  - 공개(.no-work-block) + CMS 미리보기(.no-blocks-showcase--cms-preview) 양쪽 동일 셀렉터.
 * ============================================================ */
.no-work-section--full-image .no-work-section__figure {
  width: var(--img-width, 100%);
  margin-inline: auto; /* center 기본 */
}

.no-work-block--img-align-left .no-work-section--full-image .no-work-section__figure {
  margin-inline: 0 auto;
}

.no-work-block--img-align-right .no-work-section--full-image .no-work-section__figure {
  margin-inline: auto 0;
}

/* pin/스크럽 섹션은 content-visibility 캡슐화에서 제외한다.
   ScrollTrigger 는 pin 진입 직전 spacer 를 외부 sibling 으로 동적 삽입하고,
   invalidateOnRefresh 로 start/end 를 재계산한다. 부모 `.no-work-block` 이 contain:size 로
   캡슐화되어 있으면 그 계산 결과가 캐시 미스로 어긋나, 첫 진입 시 800px placeholder 가
   잠깐 보이거나 pin 직후 빈 화면 점프가 발생한다. 해당 섹션만 visible 로 풀어 둔다. */
.no-work-detail .no-work-block:has(.no-block-pingallery),
.no-work-detail .no-work-block:has(.no-block-pstack),
.no-work-detail .no-work-block:has(.no-block-fbseq),
.no-work-detail .no-work-block:has(.no-block-wcap),
.no-work-detail .no-work-block:has(.no-block-hscroll) {
  content-visibility: visible;
  contain-intrinsic-size: auto;
  contain: none;
}

.no-work-section {
  position: relative;
  width: 100%;
}
.no-work-section__media {
  position: relative;
  width: 100%;
}
.no-work-section__image, .no-work-section__video {
  display: block;
  width: 100%;
  height: auto;
}
.no-work-section__inline-media {
  display: block;
  width: 100%;
  height: auto;
}
.no-work-section__eyebrow {
  color: var(--clr-accent, #2ec4b6);
}
.no-work-section__body {
  color: var(--clr-text-muted, #d4d4d4);
}
.no-work-section__body p {
  margin-bottom: 1em;
}
.no-work-section__body p:last-child {
  margin-bottom: 0;
}
.no-work-section__meta {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 16px;
}
.no-work-section__meta dt {
  color: var(--clr-text-muted, #9a9a9a);
  font-weight: 500;
}
.no-work-section__meta dd {
  margin: 0;
  color: var(--clr-text, #fafafa);
}
.no-work-section__figure {
  margin: 0;
}
.no-work-section__figure img {
  width: 100%;
  height: auto;
  display: block;
}
.no-work-section__blockquote {
  margin: 0;
  font-style: italic;
}
.no-work-section__cite {
  display: block;
  color: var(--clr-text-muted, #9a9a9a);
  font-style: normal;
}
.no-work-section--hero-visual {
  padding-top: clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 30.5708737864rem);
  padding-bottom: clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 30.5708737864rem);
}
.no-work-section--hero-visual .no-work-hero__header {
  text-align: center;
}
.no-work-section--hero-visual .no-work-hero__services {
  margin-top: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.8213592233rem);
}
.no-work-section--hero-visual .no-work-hero__title {
  margin: 0;
  letter-spacing: -0.02em;
  padding-bottom: 0.12em;
}
.no-work-section--hero-visual .no-work-hero__category {
  display: inline-block;
  margin-left: 0.6em;
  opacity: 0.72;
  transform: translateY(-0.08em);
  white-space: nowrap;
}
.no-work-section--hero-visual .no-work-hero__media {
  margin: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  aspect-ratio: 16/9;
  display: grid;
  place-items: center;
  position: relative;
}
.no-work-section--hero-visual .no-work-hero__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.no-work-section--hero-visual .no-work-hero__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 1.5533980583vw + 1.0174757282rem, 4.932038835rem);
  align-items: start;
}
@media (max-width: 768px) {
  .no-work-section--hero-visual .no-work-hero__info {
    grid-template-columns: 1fr;
  }
}
.no-work-section--hero-visual .no-work-hero__slogan {
  letter-spacing: -0.01em;
}
.no-work-section--hero-visual .no-work-hero__sub {
  margin: 0;
  color: var(--clr-text-muted, #d4d4d4);
}
.no-work-section--hero-visual .no-work-hero__desc {
  color: var(--clr-text-muted, #d4d4d4);
}
.no-work-section {
  /* Work detail: Carousel centered */
}
.no-work-section--carousel-centered {
  /* base: blocks-showcase.scss 의 .no-block-carousel 을 Work 상세 톤에 맞게 튜닝 */
}
.no-work-section--carousel-centered .no-block-carousel__viewport {
  padding-inline: 0;
}
.no-work-section--carousel-centered .no-block-carousel__media {
  /* 높이 과도하게 커지는 이슈 완화 */
  aspect-ratio: 16/10;
}
.no-work-section--carousel-centered .no-block-carousel__controls {
  padding-top: 14px;
}
.no-work-section--carousel-centered .no-block-carousel__pagination {
  opacity: 0.9;
}
.no-work-section--project-summary .no-work-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--block-inner-gap, var(--section-sm, 40px));
}
@media (max-width: 768px) {
  .no-work-section--project-summary .no-work-section__grid {
    grid-template-columns: 1fr;
  }
}
.no-work-section--two-col .no-work-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--block-inner-gap, var(--spacing-lg, 32px));
  align-items: center;
}
@media (max-width: 768px) {
  .no-work-section--two-col .no-work-section__grid {
    grid-template-columns: 1fr;
  }
}
.no-work-section--two-col.no-work-section--image-right .no-work-section__grid {
  direction: rtl;
}
.no-work-section--two-col.no-work-section--image-right .no-work-section__grid > * {
  direction: ltr;
}
.no-work-section--full-image .no-work-section__caption {
  text-align: center;
  color: var(--clr-text-muted, #9a9a9a);
}
.no-work-section--gallery-grid .no-work-section__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--block-inner-gap, var(--spacing-md, 16px));
}
.no-work-section--gallery-grid.no-work-section--cols-2 .no-work-section__grid {
  grid-template-columns: repeat(2, 1fr);
}
.no-work-section--gallery-grid.no-work-section--cols-3 .no-work-section__grid {
  grid-template-columns: repeat(3, 1fr);
}
.no-work-section--gallery-grid.no-work-section--cols-4 .no-work-section__grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .no-work-section--gallery-grid.no-work-section--cols-3 .no-work-section__grid, .no-work-section--gallery-grid.no-work-section--cols-4 .no-work-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.no-work-section--callout {
  text-align: center;
}
.no-work-section--callout.no-work-section--theme-dark {
  background: #111;
  color: #fff;
}
.no-work-section--callout.no-work-section--theme-brand {
  background: var(--clr-brand, #2037e8);
  color: #fff;
}
.no-work-section--callout.no-work-section--theme-light {
  background: #f4f4f5;
  color: #111;
}
.no-work-section--outro {
  text-align: center;
}
.no-work-section--outro .no-work-section__figure .no-work-section__inline-media {
  max-width: 160px;
  margin: 0 auto;
}

/* Work 섹션 전체 데모 (/work-section-layouts) */
.no-work-section-layouts-demo .no-work-section-layouts-demo__intro {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.no-work-section-layouts-demo .no-work-section-layouts-demo__intro a {
  color: var(--clr-accent, #2ec4b6);
  text-decoration: none;
}
.no-work-section-layouts-demo .no-work-section-layouts-demo__intro a:hover {
  text-decoration: underline;
}
.no-work-section-layouts-demo .no-work-section-layouts-demo__intro code {
  font-size: 0.85em;
  opacity: 0.9;
}
.no-work-section-layouts-demo .no-work-section-layouts-demo__marker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding-top: 1.5rem;
  opacity: 0.85;
}
.no-work-section-layouts-demo .no-work-section-layouts-demo__marker code {
  font-size: 11px;
}

body:has(.no-about) {
  background: var(--clr-base-black);
}

.no-about {
  background: var(--clr-base-black);
  color: var(--clr-base-white);
}

/* =============================================================
 * Hero — 그라디언트 + 그레인 노이즈 + GSAP 텍스트 인트로
 * (TS: home/about/AboutHeroIntro.ts)
 * ============================================================= */
.no-about-hero {
  position: relative;
  width: 100%;
  height: 69.3rem;
  overflow: hidden;
  background: var(--clr-base-black);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  padding-top: var(--header-height);
}
@media (max-width: 768px) {
  .no-about-hero {
    height: 100vh;
    height: 100svh;
  }
}
.no-about-hero {
  /* ---------- 배경 레이어 스택 ---------- */
}
.no-about-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.no-about-hero {
  /* 시안 → 다크 라디얼 그라디언트 (메인 컬러감) */
}
.no-about-hero__bg-gradient {
  position: absolute;
  inset: -10% -10% 0 -10%;
  background: radial-gradient(ellipse 90% 70% at 50% 18%, rgba(0, 201, 212, 0.78) 0%, rgba(0, 140, 150, 0.55) 28%, rgba(0, 70, 80, 0.32) 52%, rgba(0, 0, 0, 0) 78%), linear-gradient(180deg, #003a40 0%, #001518 45%, #000000 100%);
  opacity: 0;
  transform: scale(1.08);
  transform-origin: 50% 30%;
  will-change: opacity, transform;
}
.no-about-hero {
  /* 중앙 글로우 (포커스 라이트) */
}
.no-about-hero__bg-glow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: clamp(56rem, 41.4239482201vw + 40.4660194175rem, 144.854368932rem);
  height: clamp(56rem, 41.4239482201vw + 40.4660194175rem, 144.854368932rem);
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(circle, rgba(0, 230, 240, 0.45) 0%, rgba(0, 200, 215, 0.18) 32%, rgba(0, 0, 0, 0) 70%);
  opacity: 0;
  filter: blur(2px);
  will-change: opacity, transform;
}
.no-about-hero {
  /* 그레인/노이즈 오버레이 (assets/images/sub/blur.png) */
}
.no-about-hero__bg-noise {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: clamp(42rem, 19.4174757282vw + 34.7184466019rem, 83.6504854369rem) auto;
  mix-blend-mode: overlay;
  opacity: 0;
  will-change: opacity;
}
.no-about-hero {
  /* 하단 페이드(다음 섹션과 자연스러운 연결) */
}
.no-about-hero__bg-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 55%, var(--clr-base-black) 100%);
  pointer-events: none;
}
.no-about-hero {
  /* ---------- 콘텐츠 ---------- */
}
.no-about-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem);
}
.no-about-hero__eyebrow {
  color: var(--clr-primary-main);
  font-family: var(--family-satoshi);
  font-weight: 500;
  margin: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.no-about-hero__heading {
  color: var(--clr-base-white);
  font-family: var(--family-pretendard);
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}
@media (max-width: 768px) {
  .no-about-hero__heading {
    line-height: 1.4;
  }
}
.no-about-hero {
  /* SplitType chars 가 위 마스크에서 슬라이드업 하도록 한 줄 단위 마스킹 */
}
.no-about-hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
}
.no-about-hero {
  /* GSAP 미장착 환경 폴백: prefers-reduced-motion 또는 JS 비활성 시 즉시 표시 */
}
.no-about-hero.is-static .no-about-hero__bg-gradient, .no-about-hero.is-static .no-about-hero__bg-glow, .no-about-hero.is-static .no-about-hero__bg-noise, .no-about-hero.is-static .no-about-hero__eyebrow {
  opacity: 1;
  transform: none;
}

/* =============================================================
 * Intro
 * ============================================================= */
.no-about-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
  gap: clamp(3.2rem, 3.1067961165vw + 2.0349514563rem, 9.8640776699rem);
  align-items: start;
}
@media (max-width: 768px) {
  .no-about-intro__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4.6213592233rem);
  }
}
.no-about-intro__heading {
  color: var(--clr-base-white);
  font-family: var(--family-pretendard);
  font-weight: 700;
  line-height: var(--heading-lg-lh);
  position: sticky;
  top: calc(var(--header-height) + clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem));
}
@media (max-width: 768px) {
  .no-about-intro__heading {
    position: static;
  }
}
.no-about-intro__body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.no-about-intro__body p {
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--family-pretendard);
}

/* =============================================================
 * Services accordion
 * ============================================================= */
.no-about-svc {
  margin-top: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.no-about-svc:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.no-about-svc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem);
  padding: clamp(2rem, 1.0355987055vw + 1.6116504854rem, 4.2213592233rem) 0;
}
.no-about-svc__head[aria-expanded=true] {
  padding-bottom: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
}
.no-about-svc__label {
  color: var(--clr-base-white);
  font-family: var(--family-satoshi);
  font-weight: 600;
  transition: color var(--tran-15);
}
.no-about-svc__head:hover .no-about-svc__label {
  color: var(--clr-primary-main);
}
.no-about-svc__toggle {
  flex-shrink: 0;
  width: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.9106796117rem);
  height: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.9106796117rem);
  display: grid;
  place-items: center;
  color: var(--clr-base-white);
  font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  transition: color var(--tran-15);
}
.no-about-svc__toggle > i {
  line-height: 1;
  transition: transform var(--tran-3);
}
.no-about-svc__head:hover .no-about-svc__toggle {
  color: var(--clr-primary-main);
}
.no-about-svc.is-open .no-about-svc__toggle {
  color: var(--clr-primary-main);
}
.no-about-svc.is-open .no-about-svc__toggle > i {
  transform: rotate(180deg);
}
.no-about-svc.is-open .no-about-svc__label {
  color: var(--clr-primary-main);
}
.no-about-svc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-about-svc.is-open .no-about-svc__body {
  grid-template-rows: 1fr;
}
.no-about-svc__body-wrap {
  overflow: hidden;
}
.no-about-svc__body-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem;
}
@media (max-width: 1024px) {
  .no-about-svc__body-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
.no-about-svc__desc-col {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  padding-right: 17%;
  line-height: 1.15;
}
@media (max-width: 1024px) {
  .no-about-svc__desc-col {
    padding-right: 8%;
  }
}
@media (max-width: 768px) {
  .no-about-svc__desc-col {
    padding-right: 0;
  }
}
.no-about-svc__desc {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--family-pretendard);
}
.no-about-svc {
  /**
   * 비주얼은 메인 페이지와 통일하기 위해 `.no-main-link` 가 책임진다 (`_button.scss` no-main-cta-flat).
   * 여기서는 서비스 아코디언 좌측 컬럼 안에서 좌측 정렬만 보장.
   */
}
.no-about-svc__view-btn {
  align-self: flex-start;
}
.no-about-svc {
  /**
   * Process steps — 첨부 시안: 세로 스택 + 각 행 2컬럼(title | items) + 점선 구분선.
   * (이전: 가로 4컬럼 그리드. 컬러도 시안에 맞춰 화이트 톤으로 통일)
   */
}
.no-about-svc__steps {
  display: flex;
  flex-direction: column;
}
.no-about-svc__step {
  display: grid;
  grid-template-columns: 4fr 6.1fr;
  gap: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.8213592233rem);
  align-items: start;
  padding: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem) 0 clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.no-about-svc__step:first-child {
  border-top: 0;
  padding-top: 0;
}
.no-about-svc__step:last-child {
  padding-bottom: 0;
}
@media (max-width: 768px) {
  .no-about-svc__step {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  }
}
.no-about-svc__step-head {
  display: flex;
  flex-direction: column;
}
.no-about-svc__step-title {
  color: var(--clr-base-white);
  font-family: var(--family-satoshi);
  line-height: 1.15;
  font-weight: 600;
}
.no-about-svc__step-desc {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--family-pretendard);
  line-height: var(--body-md-lh);
  margin-top: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4776699029rem);
}
.no-about-svc__step-items {
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4776699029rem);
}
.no-about-svc__step-items li {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--family-pretendard);
  padding-left: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  letter-spacing: -0.01em;
  position: relative;
}
.no-about-svc__step-items li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.4);
}
.no-about-svc__works-loader {
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-about-svc__works-loader[hidden] {
  display: none;
}
.no-about-svc__loader-spin {
  display: block;
  width: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  height: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--clr-primary-main);
  border-radius: 9999px;
  animation: about-spin 0.75s linear infinite;
}
.no-about-svc__works-carousel[hidden] {
  display: none;
}
.no-about-svc__works-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.no-about-svc__works-pagination {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.1294498382vw + 0.4514563107rem, 0.7776699029rem);
}
.no-about-svc__works-pagination .swiper-pagination-bullet {
  display: block;
  width: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem);
  height: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background var(--tran-15), transform var(--tran-15);
  flex-shrink: 0;
  opacity: 1;
}
.no-about-svc__works-pagination .swiper-pagination-bullet-active {
  background: var(--clr-primary-main);
  transform: scale(1.3);
}
.no-about-svc__works-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
}
.no-about-svc__nav-btn {
  display: grid;
  place-items: center;
  width: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4.3106796117rem);
  height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4.3106796117rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: border-color var(--tran-15), color var(--tran-15);
}
.no-about-svc__nav-btn:hover {
  border-color: var(--clr-primary-main);
  color: var(--clr-primary-main);
}
.no-about-svc__nav-btn.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.no-about-svc__works-swiper {
  overflow: hidden;
}

@keyframes about-spin {
  to {
    transform: rotate(360deg);
  }
}
/* =============================================================
 * Process cards — 시안: 중앙 헤드라인 + 5열 카드(테두리·라운드·모노톤)
 * ============================================================= */
.no-about-process__heading {
  margin: 0 auto;
  max-width: clamp(30rem, 40.1294498382vw + 14.9514563107rem, 116.0776699029rem);
  color: var(--clr-base-white);
  font-family: var(--family-pretendard);
  font-weight: 700;
  font-size: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.9106796117rem);
  line-height: var(--heading-lg-lh, 1.18);
  text-align: center;
}
.no-about-process__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(2rem, 1.0355987055vw + 1.6116504854rem, 4.2213592233rem);
  align-items: stretch;
}
@media (max-width: 1024px) {
  .no-about-process__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem);
  }
}
@media (max-width: 768px) {
  .no-about-process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  }
}
@media (max-width: 544px) {
  .no-about-process__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.2rem, 0.3883495146vw + 2.054368932rem, 3.0330097087rem);
  }
}

.no-about-process-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.no-about-process-card__num {
  display: block;
  width: 100%;
  padding-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 4.0660194175rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--clr-primary-main);
  font-family: var(--family-satoshi);
  font-weight: 500;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  line-height: 1.2;
  letter-spacing: 0.06em;
}
.no-about-process-card__title {
  margin: 0;
  color: var(--clr-base-white);
  font-family: var(--family-satoshi);
  font-weight: 600;
  font-size: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.no-about-process-card__desc {
  padding-top: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.4330097087rem);
  margin: 0;
  flex: 1 1 auto;
  color: var(--clr-text-secondary);
  font-family: var(--family-pretendard);
  font-weight: 400;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.root_daum_roughmap .cont .section.lst {
  display: none;
}

body:has(.contact-page) {
  background: var(--clr-base-black);
}

.contact-page {
  background: var(--clr-base-black);
  color: var(--clr-base-white);
}

.contact-page__section {
  padding: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem) 0 clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 11.4640776699rem);
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  column-gap: clamp(4rem, 5.1779935275vw + 2.0582524272rem, 15.1067961165rem);
  row-gap: var(--spacing-xs);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
@media (max-width: 768px) {
  .contact-page__section {
    grid-template-columns: 1fr;
    gap: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4.4660194175rem);
  }
}

.contact-page__section-head {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
}

.contact-page__section-desc {
  color: rgba(255, 255, 255, 0.7);
}
.contact-page__section-desc strong {
  color: var(--clr-base-white);
  font-weight: 600;
}

.contact-page__section-body {
  min-width: 0;
}

/* =============================================================
 * Project Type — checkbox-driven toggle
 * ============================================================= */
.contact-page__type-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.8330097087rem);
}
@media (max-width: 1024px) {
  .contact-page__type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 544px) {
  .contact-page__type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

.contact-page__type-btn {
  position: relative;
  display: block;
  height: 100%;
  cursor: pointer;
}

.contact-page__type-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-page__type-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem) clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 9999px;
  color: var(--clr-base-white);
  text-align: center;
  transition: background var(--tran-15) ease, border-color var(--tran-15) ease, color var(--tran-15) ease, box-shadow var(--tran-15) ease;
  height: 100%;
  min-height: clamp(7rem, 1.2944983819vw + 6.5145631068rem, 9.7766990291rem);
}
@media (max-width: 544px) {
  .contact-page__type-content {
    padding: 14px 10px;
    min-height: 70px;
    gap: 2px;
  }
}

.contact-page__type-btn:hover .contact-page__type-content {
  border-color: var(--clr-base-white);
  background: rgba(255, 255, 255, 0.08);
}

.contact-page__type-input:focus-visible ~ .contact-page__type-content {
  outline: 2px solid var(--clr-base-white);
  outline-offset: 3px;
}

.contact-page__type-input:checked ~ .contact-page__type-content {
  background: var(--clr-base-white);
  border-color: var(--clr-base-white);
  color: var(--clr-base-black);
  box-shadow: 0 0 0 2px var(--clr-base-white) inset;
}

.contact-page__type-en {
  font-family: var(--family-outfit);
  font-weight: 500;
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.contact-page__type-ko {
  opacity: 0.85;
  line-height: 1.25;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* =============================================================
 * Inquiry form
 * ============================================================= */
.contact-page__form {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  padding-bottom: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 9.5533980583rem);
}

.contact-page__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 3.2660194175rem);
}
@media (max-width: 544px) {
  .contact-page__row {
    grid-template-columns: 1fr;
  }
}

.contact-page__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.contact-page__label {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  line-height: 1.15;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
}

.contact-page__input,
.contact-page__textarea {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--clr-base-white);
  font-family: inherit;
  border-radius: 0;
  transition: border-color var(--tran-15) ease;
}
.contact-page__input::placeholder,
.contact-page__textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.contact-page__input:focus,
.contact-page__textarea:focus {
  outline: none;
  border-bottom-color: var(--clr-base-white);
}
.contact-page__input:read-only,
.contact-page__textarea:read-only {
  cursor: default;
}
.contact-page__input:-webkit-autofill, .contact-page__input:-webkit-autofill:hover, .contact-page__input:-webkit-autofill:focus, .contact-page__input:-webkit-autofill:active,
.contact-page__textarea:-webkit-autofill,
.contact-page__textarea:-webkit-autofill:hover,
.contact-page__textarea:-webkit-autofill:focus,
.contact-page__textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--clr-base-black) inset !important;
  box-shadow: 0 0 0 1000px var(--clr-base-black) inset !important;
  -webkit-text-fill-color: var(--clr-base-white);
  transition: background-color 5000s ease-in-out 0s;
}

.contact-page__textarea {
  resize: vertical;
  min-height: clamp(14rem, 3.8834951456vw + 12.5436893204rem, 22.3300970874rem);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

.contact-page__input.is-error,
.contact-page__textarea.is-error {
  border-color: rgba(255, 90, 110, 0.85);
  border-bottom-color: rgba(255, 90, 110, 0.85);
}

.contact-page__field-error {
  color: rgb(255, 130, 150);
  margin-top: 6px;
}
.contact-page__field-error[hidden] {
  display: none;
}

.contact-page__budget-select.is-error + .ss-main,
.contact-page__budget-select:has(+ .ss-main).is-error,
.contact-page__budget .contact-page__budget-select.ss-main:has(.is-error) {
  border-bottom-color: rgba(255, 90, 110, 0.85);
}

.contact-page__privacy-input.is-error + .contact-page__privacy-box {
  border-color: rgba(255, 90, 110, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 90, 110, 0.25);
}

.contact-page__type-grid.is-error .contact-page__type-content {
  border-color: rgba(255, 90, 110, 0.6);
}

/* =============================================================
 * Budget — Custom Select (cs-*)
 * ============================================================= */
.contact-page__budget {
  position: relative;
}

.contact-page__budget-select + .cs-wrap {
  width: 100%;
}

.contact-page__budget-select + .cs-wrap .cs-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
  background: transparent;
  color: var(--clr-base-white);
  font-family: inherit;
  font-size: inherit;
  min-height: 48px;
  cursor: pointer;
  transition: border-color var(--tran-15) ease;
}
.contact-page__budget-select + .cs-wrap .cs-trigger:focus-visible {
  outline: none;
  border-bottom-color: var(--clr-base-white);
}

.contact-page__budget-select + .cs-wrap .cs-trigger__value {
  text-align: left;
}
.contact-page__budget-select + .cs-wrap .cs-trigger__value.cs-trigger__value--empty {
  color: rgba(255, 255, 255, 0.4);
}

.contact-page__budget-select + .cs-wrap .cs-trigger__arrow {
  flex-shrink: 0;
  margin-left: 12px;
  color: var(--clr-base-white);
  display: flex;
  align-items: center;
  transition: transform var(--tran-15) ease;
}

.contact-page__budget-select + .cs-wrap .cs-trigger[aria-expanded=true] .cs-trigger__arrow {
  transform: rotate(180deg);
}

.contact-page__budget-select + .cs-wrap .cs-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--clr-base-black);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
  box-shadow: none;
  max-height: 260px;
  overflow-y: auto;
}

.contact-page__budget-select + .cs-wrap .cs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-page__budget-select + .cs-wrap .cs-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--tran-15) ease, color var(--tran-15) ease;
}
.contact-page__budget-select + .cs-wrap .cs-option:hover, .contact-page__budget-select + .cs-wrap .cs-option.cs-option--selected {
  background: rgba(255, 255, 255, 0.1);
  color: var(--clr-base-white);
}
.contact-page__budget-select + .cs-wrap .cs-option.cs-option--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* =============================================================
 * File attachment
 * ============================================================= */
.contact-page__files-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.contact-page__files-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.contact-page__files-summary {
  flex: 1;
  min-width: 0;
  border-bottom: none;
  padding-right: 12px;
}

.contact-page__files-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--clr-base-white);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--tran-15) ease, color var(--tran-15) ease;
}
.contact-page__files-btn:hover {
  background: var(--clr-base-white);
  color: var(--clr-base-black);
}

.contact-page__files-btn--pick {
  flex-shrink: 0;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.06);
}

.contact-page__files-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  color: var(--clr-base-black);
  font-weight: 600;
}

.contact-page__files-btn-icon--add {
  background: var(--clr-primary-main, #00d2be);
}

.contact-page__files-controls {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.contact-page__files-hint {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.contact-page__files-remove {
  flex-shrink: 0;
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0 12px;
  font-size: 18px;
  transition: color var(--tran-15) ease, background var(--tran-15) ease;
}
.contact-page__files-remove:hover {
  color: var(--clr-base-white);
  background: rgba(255, 255, 255, 0.08);
}

.contact-page__field-hint {
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}

.contact-page__privacy-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  user-select: none;
}

.contact-page__privacy-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-page__privacy-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  transition: background var(--tran-15) ease, border-color var(--tran-15) ease;
  /* CSS 체크표시 — 아이콘 폰트(FA `<i>`)에 의존하지 않음 */
}
.contact-page__privacy-box::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--clr-base-black);
  border-bottom: 2px solid var(--clr-base-black);
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
  transition: opacity var(--tran-15) ease;
}

.contact-page__privacy-input:checked + .contact-page__privacy-box {
  background: var(--clr-base-white);
  border-color: var(--clr-base-white);
}
.contact-page__privacy-input:checked + .contact-page__privacy-box::after {
  opacity: 1;
}

.contact-page__privacy-input:focus-visible + .contact-page__privacy-box {
  outline: 2px solid var(--clr-base-white);
  outline-offset: 2px;
}

.contact-page__privacy-text {
  color: inherit;
}

.contact-page__privacy-more {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 4px;
  color: var(--clr-base-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  transition: color var(--tran-15) ease;
}
.contact-page__privacy-more:hover {
  color: var(--clr-primary-main, #00d2be);
}

.contact-privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.contact-privacy-modal[hidden] {
  display: none;
}

.contact-privacy-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.contact-privacy-modal__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 720px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--clr-base-white);
  border: 1px solid var(--clr-gray-200, #e5e5e5);
  /* 라이트 서피스: --clr-text-* 는 다크 배경용이라 모달에 쓰면 대비 붕괴 */
  color: var(--clr-gray-800);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.contact-privacy-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--clr-gray-200, #e5e5e5);
  background: var(--clr-base-white);
}

.contact-privacy-modal__title {
  margin: 0;
  font-family: inherit;
  font-size: clamp(1.5rem, 0.1294498382vw + 1.4514563107rem, 1.7776699029rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--clr-base-black);
}

.contact-privacy-modal__close {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--clr-gray-500);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  transition: color var(--tran-15) ease;
}
.contact-privacy-modal__close:hover {
  color: var(--clr-gray-900);
}

.contact-privacy-modal__body {
  flex: 1;
  overflow-y: auto;
  background: var(--clr-base-white);
  color: var(--clr-gray-800);
  scrollbar-width: thin;
  scrollbar-color: var(--clr-gray-300, #ccc) transparent;
}

.contact-privacy-modal__body .privacy-doc {
  gap: clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.5106796117rem);
  color: var(--clr-gray-700);
}

.contact-privacy-modal__body .privacy-doc__intro {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  line-height: 1.65;
  color: var(--clr-gray-600);
}

.contact-privacy-modal__body .privacy-doc__article {
  gap: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem);
}

.contact-privacy-modal__body .privacy-doc__article p {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  line-height: 1.65;
  color: var(--clr-gray-600);
}

.contact-privacy-modal__body .privacy-doc__article strong {
  color: var(--clr-gray-900);
}

.contact-privacy-modal__body .privacy-doc__article-title {
  margin: 0 0 clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4776699029rem);
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--clr-gray-900);
}

.contact-privacy-modal__body .privacy-doc__list {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  line-height: 1.6;
  color: var(--clr-gray-600);
}

.contact-privacy-modal__body .privacy-doc__sublist {
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2388349515rem);
  color: var(--clr-gray-600);
}

.contact-privacy-modal__body .privacy-doc__link {
  color: var(--clr-primary-700, #007880);
}
.contact-privacy-modal__body .privacy-doc__link:hover {
  color: var(--clr-gray-900);
}

.contact-privacy-modal__body .privacy-doc__effective {
  margin-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  padding-top: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2388349515rem);
  border-top-color: var(--clr-gray-200, #e5e5e5);
  color: var(--clr-gray-500);
}

.contact-privacy-modal__footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--clr-gray-200, #e5e5e5);
  background: var(--clr-base-white);
}

.contact-privacy-modal__ok {
  appearance: none;
  padding: 10px 28px;
  background: var(--clr-base-black);
  color: var(--clr-base-white);
  border: 1px solid var(--clr-base-black);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tran-15) ease, color var(--tran-15) ease;
}
.contact-privacy-modal__ok:hover {
  background: transparent;
  color: var(--clr-base-black);
}

body.contact-privacy-modal-open {
  overflow: hidden;
}

.contact-page__alert {
  padding: 12px 14px;
}
.contact-page__alert[hidden] {
  display: none;
}

.contact-page__alert--error {
  border: 1px solid rgba(255, 70, 100, 0.7);
  color: rgb(255, 130, 150);
  background: rgba(255, 70, 100, 0.08);
}

.contact-page__alert--success {
  border: 1px solid rgba(80, 205, 137, 0.7);
  color: rgb(160, 240, 200);
  background: rgba(80, 205, 137, 0.08);
}

.contact-page__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 200px;
  padding: 14px 28px;
  background: var(--clr-base-white);
  color: var(--clr-base-black);
  border: 1px solid var(--clr-base-white);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tran-15) ease, color var(--tran-15) ease, opacity var(--tran-15) ease;
}
.contact-page__submit:hover:not([disabled]) {
  background: transparent;
  color: var(--clr-base-white);
}
.contact-page__submit[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}
.contact-page__submit.is-loading {
  pointer-events: none;
  cursor: wait;
}
.contact-page__submit.is-loading .contact-page__submit-loader {
  display: inline-flex;
}

.contact-page__submit-inner {
  display: inline-block;
}

.contact-page__submit-loader {
  display: none;
}

.contact-page__address-body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 3.2660194175rem);
}

.contact-page__address-list {
  display: none;
}

.contact-page__address-line {
  color: var(--clr-base-white);
}

.contact-page__address-note {
  color: rgba(255, 255, 255, 0.7);
}

.contact-page__map {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.contact-page__map .root_daum_roughmap,
.contact-page__map .root_daum_roughmap_landing {
  width: 100% !important;
  max-width: 100% !important;
}
.contact-page__map .root_daum_roughmap .wrap_map {
  height: clamp(28rem, 9.0614886731vw + 24.6019417476rem, 47.4368932039rem) !important;
}

.contact-page .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;
}

.ss-content .ss-list .ss-option:hover:not(.ss-disabled) {
  border-left-color: var(--clr-primary-main);
}

body:has(.privacy-page) {
  background: var(--clr-base-black);
}

.privacy-page {
  background: var(--clr-base-black);
  color: var(--clr-base-white);
}

.privacy-page__head {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.privacy-page__sub {
  color: rgba(255, 255, 255, 0.6);
}

.privacy-page__body {
  max-width: 920px;
}

/* =============================================================
 * Shared privacy document (page + contact modal)
 * ============================================================= */
.privacy-doc {
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  gap: clamp(2.8rem, 1.0355987055vw + 2.4116504854rem, 5.0213592233rem);
}

.privacy-doc__intro {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

.privacy-doc__article {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
}
.privacy-doc__article p {
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
}
.privacy-doc__article strong {
  color: var(--clr-base-white);
  font-weight: 600;
}

.privacy-doc__article-title {
  color: var(--clr-base-white);
  font-family: var(--family-outfit), inherit;
}

.privacy-doc__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}
.privacy-doc__list > li {
  list-style: disc;
}
.privacy-doc__list--ordered > li {
  list-style: decimal;
}

.privacy-doc__sublist {
  margin-top: 4px;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(255, 255, 255, 0.7);
}
.privacy-doc__sublist > li {
  list-style: circle;
}

.privacy-doc__link {
  color: var(--clr-base-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.privacy-doc__link:hover {
  color: var(--clr-primary-main, #00d2be);
}

.privacy-doc__effective {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.6);
}

body:has(.no-name-market) {
  background: var(--clr-base-black);
}

.no-name-market {
  background: var(--clr-base-black);
  color: var(--clr-base-white);
}

/* =============================================================
 * Empty state
 * ============================================================= */
.no-name-market-empty {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  text-align: center;
}
.no-name-market-empty__desc {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

/* =============================================================
 * Detail
 * ============================================================= */
.no-name-market-item-hero {
  position: relative;
  --nm-line: rgba(255, 255, 255, 0.18);
  --nm-line-strong: rgba(255, 255, 255, 0.32);
  --nm-text-dim: rgba(255, 255, 255, 0.5);
  --nm-text-mute: rgba(255, 255, 255, 0.5);
}
.no-name-market-item-hero__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  padding-bottom: clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.no-name-market-item-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--nm-text-dim);
  text-decoration: none;
  transition: color var(--tran-15) ease;
}
.no-name-market-item-hero__back:hover {
  color: var(--clr-base-white);
}
.no-name-market-item-hero__back i {
  font-size: 16px;
  line-height: 1;
}
.no-name-market-item-hero__title {
  font-family: var(--family-outfit);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(3.4rem, 1.4239482201vw + 2.8660194175rem, 6.454368932rem);
}
.no-name-market-item-hero__meta {
  color: var(--nm-text-mute);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}
.no-name-market-item-hero__meta span {
  display: inline-flex;
  align-items: center;
}

.no-name-market-item-body {
  padding-top: clamp(1.8rem, 0.7766990291vw + 1.5087378641rem, 3.4660194175rem);
}

.no-name-market-item-actions {
  display: flex;
  justify-content: center;
  padding-top: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 3.1883495146rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.no-name-market-item-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 160px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  letter-spacing: 0.02em;
  font-weight: 700;
  transition: background var(--tran-15) ease, color var(--tran-15) ease, border-color var(--tran-15) ease;
}
.no-name-market-item-actions__btn:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #0a0a0a;
}

.no-name-market-item-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  border-bottom: 0;
}

.no-name-market-item-card {
  grid-column: span 12;
  background: transparent;
  border: 0;
  border-top: 0;
  border-radius: 0;
  backdrop-filter: none;
  /* 라인 기반 편집 디자인: 섹션을 카드가 아니라 "행"으로 보이게 */
  padding: clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem) clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.5106796117rem);
}
@media (max-width: 1024px) {
  .no-name-market-item-card {
    grid-column: span 6;
  }
}
@media (max-width: 1024px) {
  .no-name-market-item-card.--meta {
    grid-column: span 12;
  }
}
.no-name-market-item-card {
  /* 섹션 사이 라인은 1개만 */
}
.no-name-market-item-card + .no-name-market-item-card {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.no-name-market-item-card__title {
  font-weight: 600;
  margin-bottom: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  letter-spacing: -0.01em;
  font-size: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
}
.no-name-market-item-card__text {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.75;
  font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}
.no-name-market-item-card__text.--one-line {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.no-name-market-item-card__list {
  margin: 0;
  padding-left: 0;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.75;
  list-style: none;
}
.no-name-market-item-card__list li + li {
  margin-top: 8px;
}
.no-name-market-item-card__list li {
  position: relative;
  padding-left: 18px;
}
.no-name-market-item-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--clr-primary-main);
  box-shadow: 0 0 0 3px rgba(0, 210, 190, 0.12);
}
.no-name-market-item-card__note {
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.7;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
}

.no-name-market-item-meta__sep {
  margin: 0 6px;
  opacity: 0.45;
}

.no-name-market-item-status {
  --nm-h: 40px;
  --nm-border: rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
}
.no-name-market-item-status__step {
  height: var(--nm-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nm-border);
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 0;
  letter-spacing: 0.02em;
  font-weight: 800;
  text-transform: uppercase;
  transition: background var(--tran-15) ease, color var(--tran-15) ease, border-color var(--tran-15) ease;
  min-width: 140px;
  padding: 0 18px;
}
.no-name-market-item-status__text {
  font-size: 14px;
  line-height: 1;
}
.no-name-market-item-status__arrow {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1;
  transform: translateY(1px);
}
.no-name-market-item-status__step.is-done {
  border-color: rgba(255, 255, 255, 0.8);
  color: rgba(255, 255, 255, 0.92);
}
.no-name-market-item-status__step.is-active {
  background: #ffffff;
  border-color: #ffffff;
  color: #0a0a0a;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

@media (max-width: 768px) {
  .no-name-market-item-status {
    --nm-h: 38px;
    gap: 10px;
  }
  .no-name-market-item-status .no-name-market-item-status__step {
    min-width: 118px;
    padding: 0 14px;
  }
  .no-name-market-item-status .no-name-market-item-status__arrow {
    font-size: 14px;
  }
}
/* =============================================================
 * Hero — WebGL 배경 + 타이포 (메인 히어로 톤)
 * ============================================================= */
.no-name-market-hero {
  position: relative;
  overflow: hidden;
  background: var(--clr-base-black);
  isolation: isolate;
}
.no-name-market-hero__gl {
  position: absolute;
  inset: 0;
  /* ::before 위, 텍스트(::after는 상단 투명)보다 아래 */
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.no-name-market-hero {
  /* WebGL 실패·로딩 시에도 살짝 틴트 */
}
.no-name-market-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(125% 85% at 10% 44%, rgba(0, 70, 66, 0.22) 0%, transparent 56%), radial-gradient(ellipse 80% 50% at 92% 18%, rgba(0, 40, 52, 0.12) 0%, transparent 48%);
}
.no-name-market-hero {
  /* 상단·중앙은 거의 안 눌림 — WebGL 밝기·움직임 유지, 맨 아래만 이어짐 */
}
.no-name-market-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0.28) 100%);
}
.no-name-market-hero .no-container-xl {
  position: relative;
  z-index: 3;
}
.no-name-market-hero__inner {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
}
.no-name-market-hero__eyebrow {
  color: var(--clr-primary-main);
  font-family: var(--family-outfit);
  font-weight: 500;
}
.no-name-market-hero__title {
  color: var(--clr-base-white);
  font-weight: 600;
  text-shadow: 0 1px 32px rgba(0, 0, 0, 0.45);
}
.no-name-market-hero__desc {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}

/* =============================================================
 * Grid + cards
 * ============================================================= */
.no-name-market-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem) clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.8660194175rem);
}
@media (max-width: 1024px) {
  .no-name-market-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .no-name-market-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 450px) {
  .no-name-market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.no-name-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--clr-base-white);
}
.no-name-card:hover .no-name-card__thumb {
  background: rgba(255, 255, 255, 0.18);
}
.no-name-card:hover .no-name-card__meta::after {
  transform: scaleX(1);
  opacity: 1;
}
.no-name-card:hover .no-name-card__arrow i {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.no-name-card:hover .no-name-card__label {
  color: rgba(255, 255, 255, 0.88);
}

.no-name-card__thumb {
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  transition: background var(--tran-15) ease;
  overflow: hidden;
}

.no-name-card__name {
  color: var(--clr-base-white);
  font-family: var(--family-outfit);
  font-weight: 700;
  font-size: clamp(14px, 2.2vw, 20px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.no-name-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  padding-top: 10px;
}
.no-name-card__meta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.no-name-card__meta {
  /* hover 시 라인만 살짝 살아나게 (카드 밖으로 튀는 모션 방지) */
}
.no-name-card__meta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.42);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
  pointer-events: none;
}

.no-name-card__label {
  color: inherit;
  transition: color 240ms ease;
}

.no-name-card__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 아이콘이 밖으로 나가지 않게 클립 */
  width: 22px;
  height: 22px;
  overflow: hidden;
}
.no-name-card__arrow i {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1;
  transform: translate3d(-6px, 0, 0);
  opacity: 0.55;
  will-change: transform, opacity;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}

/* =============================================================
 * Pagination — Work 목록과 동일 토큰 (.no-pagination)
 * ============================================================= */
.no-name-market-pagination {
  display: flex;
  justify-content: center;
}
.no-name-market-pagination .no-pagination {
  color: var(--clr-base-white);
}
.no-name-market-pagination .no-pagination__dots {
  color: rgba(255, 255, 255, 0.45);
}
.no-name-market-pagination .no-pagination__link {
  border-color: rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--clr-base-white);
}
.no-name-market-pagination .no-pagination__link:hover:not(.--disabled):not([aria-disabled=true]) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
}
.no-name-market-pagination .no-pagination__link--num {
  border-color: transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
}
.no-name-market-pagination .no-pagination__link--num:hover:not(.--disabled):not([aria-disabled=true]) {
  color: var(--clr-base-white);
}
.no-name-market-pagination .no-pagination__link--num.is-active, .no-name-market-pagination .no-pagination__link--num[aria-current=page] {
  background: transparent;
  border-color: transparent;
  color: var(--clr-primary-main);
  box-shadow: 0 2px 0 0 var(--clr-primary-main);
}
.no-name-market-pagination .no-pagination__link--arrow {
  color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
  background: transparent;
}
.no-name-market-pagination .no-pagination__link--arrow:hover:not(.--disabled):not([aria-disabled=true]) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.no-name-market-pagination .no-pagination__link.--disabled,
.no-name-market-pagination .no-pagination__link[aria-disabled=true] {
  color: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
  opacity: 1;
}

/* ============================================================
 * /sections — 섹션 레이아웃 쇼케이스 + 재사용 마크업 스코프 (.no-block-*)
 * ============================================================ */
body:has(.no-blocks-showcase) {
  background: var(--clr-base-black);
}

.no-blocks-showcase [id^=block-] {
  scroll-margin-top: calc(var(--header-height) + clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 3.2660194175rem));
}

.no-blocks-showcase {
  color: var(--clr-base-white);
}

.no-blocks-showcase-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
  background: rgba(0, 0, 0, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}
.no-blocks-showcase-nav__swiper {
  overflow: hidden;
}
.no-blocks-showcase-nav__list {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.6330097087rem);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
}
.no-blocks-showcase-nav__slide {
  width: auto !important;
}
.no-blocks-showcase-nav a {
  display: inline-flex;
  align-items: center;
  padding: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem) clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--family-pretendard);
  text-decoration: none;
  transition: border-color var(--tran-15), color var(--tran-15), background var(--tran-15);
}
.no-blocks-showcase-nav a:hover {
  border-color: var(--clr-primary-main);
  color: var(--clr-primary-main);
}
.no-blocks-showcase-nav a.is-active {
  border-color: var(--clr-primary-main);
  background: var(--clr-primary-main);
  color: var(--clr-base-white);
}

/* 공통 미디어 플레이스홀더 — 공개 페이지에선 페이지 톤(검정)과 맞춰서, 로딩 전/실패 시
   회색 박스 대신 검정이 비치게. 관리자 캔버스(.no-blocks-showcase--cms-preview)는
   "여기 미디어 들어감" 표시용 회색을 아래에서 덮어쓴다. */
.no-block-media-slot {
  width: 100%;
  background: var(--clr-base-black);
  position: relative;
  overflow: hidden;
}
.no-block-media-slot--landscape {
  aspect-ratio: 16/9;
}
.no-block-media-slot--wide-landscape {
  aspect-ratio: 16/9;
}
.no-block-media-slot--cinema {
  aspect-ratio: 16/9;
  max-height: 85vh;
}
.no-block-media-slot--portrait {
  aspect-ratio: 3/4;
}
.no-block-media-slot--portrait-tall {
  aspect-ratio: 4/5;
}
.no-block-media-slot--square {
  aspect-ratio: 1/1;
}
.no-block-media-slot--hscroll-card {
  aspect-ratio: 16/10;
  min-width: clamp(26rem, 10.355987055vw + 22.1165048544rem, 48.213592233rem);
}
.no-block-media-slot--cover {
  min-height: clamp(28rem, 18.1229773463vw + 21.2038834951rem, 66.8737864078rem);
  aspect-ratio: auto;
  flex: 1;
}

/* ---------- Carousel centered ---------- */
.no-block-carousel {
  background: var(--clr-base-black);
  overflow: hidden;
}

.no-block-carousel__viewport {
  overflow: visible;
  padding-inline: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.8660194175rem);
}

.no-block-carousel__track {
  align-items: stretch;
}

.no-block-carousel__slide {
  height: auto;
}

.no-block-carousel__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  min-height: 0;
}

.no-auto-cover-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-block-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.no-block-carousel__pagination {
  display: inline-flex;
  gap: 6px;
}
.no-block-carousel__pagination .swiper-pagination-bullet {
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: transparent;
  opacity: 1;
}
.no-block-carousel__pagination .swiper-pagination-bullet-active {
  background: var(--clr-base-white);
  border-color: var(--clr-base-white);
}

.no-block-carousel__arrows {
  display: inline-flex;
  gap: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
}

.no-block-carousel__arrow {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
  transition: color var(--tran-15);
}
.no-block-carousel__arrow:hover {
  color: var(--clr-primary-main);
}

/* ---------- Staggered gallery ---------- */
.no-block-staggered__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--block-inner-gap, clamp(1rem, 0.5177993528vw + 0.8058252427rem, 2.1106796117rem));
}
@media (max-width: 768px) {
  .no-block-staggered__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 544px) {
  .no-block-staggered__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

ul.no-block-staggered__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.no-block-staggered__cell {
  min-width: 0;
}
.no-block-staggered__cell--1 {
  grid-column: 1;
  grid-row: 1;
}
.no-block-staggered__cell--2 {
  grid-column: 2;
  grid-row: 1;
}
.no-block-staggered__cell--3 {
  grid-column: 2;
  grid-row: 2;
}
.no-block-staggered__cell--4 {
  grid-column: 3;
  grid-row: 2;
}
@media (max-width: 768px) {
  .no-block-staggered__cell, .no-block-staggered__cell--1, .no-block-staggered__cell--2, .no-block-staggered__cell--3, .no-block-staggered__cell--4 {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ---------- Identity text ---------- */
/* ---------- Media dual ---------- */
.no-block-media-dual__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--block-inner-gap, clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2.3883495146rem));
}
@media (max-width: 544px) {
  .no-block-media-dual__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Brand callout (배경색·그라데이션은 섹션 인라인 --callout-bg 로 주입) ---------- */
.no-block-media-dual__callout {
  background: var(--callout-bg, #1a3365);
  color: var(--clr-base-white);
}

.no-block-brand-callout {
  background: #1a3365;
  color: var(--clr-base-white);
}

.no-block-brand-callout__inner {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

/* ---------- Text cards (타이틀 + 2x2 카드 — 카드별 배경/글자색은 인라인 --tcq-bg / --tcq-fg) ---------- */
.no-block-text-cards__head {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.6330097087rem);
}

.no-block-text-cards__title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.no-block-text-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--block-inner-gap, clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem));
}
@media (max-width: 544px) {
  .no-block-text-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.no-block-text-cards__card {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 3.2660194175rem);
  min-height: clamp(15rem, 4.5307443366vw + 13.3009708738rem, 24.7184466019rem);
  padding: clamp(2.8rem, 1.0355987055vw + 2.4116504854rem, 5.0213592233rem);
  background: var(--tcq-bg, #212121);
  color: var(--tcq-fg, #fff);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
  transition: transform var(--tran-3), box-shadow var(--tran-3);
}
@media (hover: hover) {
  .no-block-text-cards__card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
  }
}

.no-block-text-cards__rule {
  flex: 0 0 2px;
  align-self: stretch;
  background: currentColor;
  border-radius: 999px;
  opacity: 0.5;
}

.no-block-text-cards__body {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
}
.no-block-text-cards__body p {
  color: inherit;
}

/* ---------- Three bands ---------- */
.no-block-bands {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.no-block-bands__stripe {
  width: 100%;
  flex: 1 1 0;
}
.no-block-bands__stripe--dark {
  background: var(--clr-base-black);
}
.no-block-bands__stripe--muted {
  background: #bdbdbd;
}

/* ---------- IMPACT text + media grid ---------- */
.no-block-impact-split__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--block-inner-gap, clamp(2.4rem, 2.071197411vw + 1.6233009709rem, 6.8427184466rem));
  align-items: start;
}
@media (max-width: 768px) {
  .no-block-impact-split__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.no-block-impact-split__media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--block-inner-gap, clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.8330097087rem));
}

.no-block-impact-split__media-wide {
  grid-column: 1/-1;
}

/* ---------- IMPACT quad + text ---------- */
.no-block-impact-grid-text__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: var(--block-inner-gap, clamp(2.4rem, 2.071197411vw + 1.6233009709rem, 6.8427184466rem));
  align-items: start;
}
@media (max-width: 768px) {
  .no-block-impact-grid-text__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.no-block-impact-grid-text__quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--block-inner-gap, clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.8330097087rem));
}

/* ---------- IMPACT stack ---------- */
.no-block-impact-stack__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--block-inner-gap, clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.8660194175rem));
}
@media (max-width: 544px) {
  .no-block-impact-stack__duo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Full bleed ---------- */
.no-block-full-bleed {
  padding-inline: 0;
}

/* ---------- Horizontal scroll ---------- */
.no-block-hscroll {
  --hscroll-gap: var(--block-inner-gap, clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.8330097087rem));
  --hscroll-card-w: 102.4rem;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .no-block-hscroll {
    --hscroll-card-w: 88rem;
  }
}
@media (max-width: 768px) {
  .no-block-hscroll {
    --hscroll-card-w: 76.8rem;
  }
}
@media (max-width: 544px) {
  .no-block-hscroll {
    --hscroll-card-w: 80vw;
  }
}

.no-block-hscroll__viewport {
  width: 100%;
  padding-inline: var(--gutter);
}

.no-block-hscroll__strip {
  display: flex;
  gap: var(--hscroll-gap);
  width: max-content;
  will-change: transform;
}

ul.no-block-hscroll__strip {
  list-style: none;
  margin: 0;
  padding: 0;
}

.no-block-hscroll__cell {
  flex: 0 0 var(--hscroll-card-w);
}

/* ---------- Triple column ---------- */
.no-block-triple__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--block-inner-gap, clamp(1.6rem, 1.5533980583vw + 1.0174757282rem, 4.932038835rem));
}
@media (max-width: 768px) {
  .no-block-triple__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.no-block-triple__col {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}

.no-block-triple__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.58) 34%, rgba(0, 0, 0, 0) 72%);
}

.no-block-triple__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 3.1883495146rem);
  color: var(--clr-base-white);
}

.no-block-triple__title,
.no-block-triple__subtitle {
  margin: 0;
}

.no-block-triple__title {
  text-transform: uppercase;
}

.no-block-triple__subtitle {
  margin-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
}

.no-block-triple__body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
}

.no-block-triple__lead,
.no-block-triple__desc {
  margin: 0;
}

/* 본문 위계 — 카드 타이틀(heading) 아래 KR 리드는 한 단계 키우고(sm→lg),
   EN 보조문도 너무 작던 xs→md 로 올려 읽히게 한다. (HTML 클래스는 SplitType 타깃 선택자
   때문에 그대로 두고 여기서 크기만 덮어쓴다 — ScrollTargetCollector.ts 참고) */
.no-block-triple__lead {
  font-size: var(--body-lg-fs);
  line-height: var(--body-lg-lh);
}

.no-block-triple__desc {
  font-size: var(--body-md-fs);
  line-height: var(--body-md-lh);
}

/* SplitType 이 한글을 글자 단위(.char, inline-block)로 쪼개면 어절 중간에서도
   줄바꿈이 일어나 "시|작" 처럼 끊긴다. 어절 래퍼(.word)를 nowrap 으로 묶어
   한 어절은 항상 붙여 둔다. (no-JS·reduced-motion 상태는 body 의 word-break:keep-all 로 처리됨) */
.no-block-triple .word {
  white-space: nowrap;
}

.no-block-triple__lead p,
.no-block-triple__desc p {
  margin: 0;
}

/* ---------- Split 50/50 ---------- */
.no-block-split {
  width: 100%;
}

.no-block-split__row {
  display: flex;
  width: 100%;
  align-items: stretch;
}
.no-block-split__row--reverse {
  flex-direction: row-reverse;
}
@media (max-width: 768px) {
  .no-block-split__row {
    flex-direction: column;
  }
  .no-block-split__row.no-block-split__row--reverse {
    flex-direction: column;
  }
}

.no-block-split__half {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
}
.no-block-split__half--brand {
  background: var(--brand-bg, #1a3365);
  color: var(--clr-base-white);
  align-items: center;
}
.no-block-split__half--media {
  background: var(--clr-base-black);
  min-height: clamp(28rem, 12.9449838188vw + 23.145631068rem, 55.7669902913rem);
}

.no-block-split__half-inner {
  width: 100%;
}

.no-block-split__half--media .no-block-media-slot {
  min-height: clamp(32rem, 15.5339805825vw + 26.1747572816rem, 65.3203883495rem);
}

/* ---------- Two-up wide ---------- */
.no-block-media-two-up__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--block-inner-gap, clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2.3883495146rem));
}
@media (max-width: 544px) {
  .no-block-media-two-up__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Work CMS 캔버스: /sections 쇼케이스와 동일 토큰 ---------- */
.no-blocks-showcase--cms-preview {
  background: var(--clr-base-black);
  color: var(--clr-base-white);
  padding: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 3.2660194175rem);
  border-radius: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
}
.no-blocks-showcase--cms-preview .no-work-section {
  color: var(--clr-base-white);
}
.no-blocks-showcase--cms-preview .no-work-section__title,
.no-blocks-showcase--cms-preview .no-heading-md,
.no-blocks-showcase--cms-preview .no-heading-lg,
.no-blocks-showcase--cms-preview .no-heading-xl {
  color: var(--clr-base-white);
}
.no-blocks-showcase--cms-preview .no-work-section__caption {
  color: rgba(255, 255, 255, 0.68);
}
.no-blocks-showcase--cms-preview .no-body-sm,
.no-blocks-showcase--cms-preview .no-body-md {
  color: rgba(255, 255, 255, 0.82);
}
.no-blocks-showcase--cms-preview {
  /* 관리자 캔버스에선 "여기 미디어 들어감" affordance 로 슬롯 배경 회색 유지
     (공개 페이지에선 위에서 검정으로 바꿨음) */
}
.no-blocks-showcase--cms-preview .no-block-media-slot {
  background: #bdbdbd;
}
.no-blocks-showcase--cms-preview {
  /* Triple column media slot: 업로더(오버레이) 가독성을 위해 더 어둡게 */
}
.no-blocks-showcase--cms-preview .no-block-triple .no-block-media-slot--portrait {
  background: rgba(0, 0, 0, 0.35);
}

/* ============================================================
 * 이미지 채우기 방식 — 블록 단위 cover(기본) / contain(여백 + #000 배경)
 *   Work 상세: pages/work/detail.php 가 블록을 .no-media-fit--contain 으로 감쌈
 *   CMS 캔버스: _cms-canvas-fragment.php 가 .no-blocks-showcase--cms-preview 에 같은 클래스 부여
 *   값: work_blocks.meta_json.media_fit (관리자 캔버스 헤더 라디오 → canvas-save-block-meta)
 * ============================================================ */
.no-media-fit--contain img,
.no-media-fit--contain video {
  object-fit: contain !important;
  background-color: #000;
}
.no-media-fit--contain .no-block-media-slot,
.no-media-fit--contain .no-block-carousel__media,
.no-media-fit--contain .no-auto-cover-media,
.no-media-fit--contain .admin-cms-media-slot,
.no-media-fit--contain figure {
  background-color: #000;
}

/* =========================================================
 * Work 상세 — 가로형 이미지 + 스크롤 애니메이션 섹션
 *   GSAP/ScrollTrigger 와 함께 동작
 *   (resources/ts/home/components/WorkSectionScrollAnimations.ts)
 * 원칙: JS 미적용(또는 CMS 캔버스)에서도 콘텐츠가 전부 보이도록
 *       초기 가시 상태는 CSS 로 숨기지 않는다. 애니메이션 시작 상태는 JS 가 set 한다.
 * BEM: .no-block-pingallery / .no-block-pstack / .no-block-fbseq / .no-block-wcap
 * ========================================================= */
/* ---------- 핀 고정 가로 스크롤 갤러리 ---------- */
.no-block-pingallery {
  overflow: hidden;
}
.no-block-pingallery__pin {
  display: flex;
  align-items: stretch;
  gap: clamp(2rem, 2.3300970874vw + 1.1262135922rem, 6.9980582524rem);
  padding-inline: clamp(1.6rem, 1.5533980583vw + 1.0174757282rem, 4.932038835rem);
}
@media (max-width: 1024px) {
  .no-block-pingallery__pin {
    flex-direction: column;
    gap: clamp(1.4rem, 0.6472491909vw + 1.1572815534rem, 2.7883495146rem);
  }
}
.no-block-pingallery__heading {
  flex: 0 0 clamp(180px, 22vw, 320px);
  align-self: center;
  min-width: 0;
}
@media (max-width: 1024px) {
  .no-block-pingallery__heading {
    flex: none;
    align-self: stretch;
  }
}
.no-block-pingallery__eyebrow {
  color: var(--clr-primary-main);
  margin-bottom: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.4330097087rem);
}
.no-block-pingallery__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto; /* JS 미적용 fallback: 네이티브 가로 스크롤 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.no-block-pingallery__viewport::-webkit-scrollbar {
  display: none;
}
.no-block-pingallery {
  /* GSAP 핀이 활성화되면 JS 가 이 클래스를 붙이고 네이티브 스크롤을 끈다. */
}
.no-block-pingallery.is-pinned .no-block-pingallery__viewport {
  overflow: hidden;
}
.no-block-pingallery__track {
  display: flex;
  gap: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2.3883495146rem);
  width: max-content;
}
.no-block-pingallery__panel {
  flex: 0 0 auto;
  width: clamp(280px, 64vw, 1040px);
  min-width: 0;
}
@media (max-width: 768px) {
  .no-block-pingallery__panel {
    width: clamp(240px, 86vw, 720px);
  }
}
.no-block-pingallery__panel .no-block-media-slot {
  aspect-ratio: 16/9;
}

/* ---------- 패럴럭스 와이드 스택 (3장) ---------- */
.no-block-pstack__list {
  display: grid;
  gap: clamp(4rem, 3.6245954693vw + 2.640776699rem, 11.7747572816rem);
}
.no-block-pstack__item {
  min-width: 0;
}
.no-block-pstack__media {
  aspect-ratio: 16/9;
}
.no-block-pstack {
  /* 124% 높이 → JS 가 yPercent 패럴럭스(±10%) 시켜도 빈틈이 안 생긴다. */
}
.no-block-pstack__media-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;
  bottom: -12%;
}
.no-block-pstack__caption {
  color: var(--clr-text-primary);
  opacity: 0.78;
}

/* ---------- 풀블리드 와이드 시퀀스 (edge-to-edge) ---------- */
.no-block-fbseq__list {
  display: grid;
  gap: 0;
}
.no-block-fbseq__frame {
  aspect-ratio: 16/9;
  max-height: 92vh;
  position: relative;
}
.no-block-fbseq {
  /* 진입 시 scale 1.08→1 은 JS 가 처리. CSS 기본 transform 없음. */
}
.no-block-fbseq__frame-inner {
  position: absolute;
  inset: 0;
}
.no-block-fbseq__caption--overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.6rem, 1.5533980583vw + 1.0174757282rem, 4.932038835rem);
  color: var(--clr-base-white);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
.no-block-fbseq__caption--cms {
  text-align: center;
  color: var(--clr-text-primary);
  opacity: 0.78;
}

/* ---------- 와이드 이미지 + 슬라이드인 캡션 ---------- */
.no-block-wcap__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2.4rem, 2.5889967638vw + 1.4291262136rem, 7.9533980583rem);
  align-items: center;
}
@media (max-width: 768px) {
  .no-block-wcap__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem);
  }
}
@media (min-width: 768px) {
  .no-block-wcap--caption-left .no-block-wcap__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }
  .no-block-wcap--caption-left .no-block-wcap__layout > .no-block-wcap__media {
    order: 2;
  }
  .no-block-wcap--caption-left .no-block-wcap__layout > .no-block-wcap__copy {
    order: 1;
  }
}
.no-block-wcap__media {
  aspect-ratio: 16/9;
}
.no-block-wcap {
  /* clip-reveal + scale 1.06→1 은 JS 가 처리. */
}
.no-block-wcap__media-inner {
  position: absolute;
  inset: 0;
}
.no-block-wcap__copy {
  min-width: 0;
}
.no-block-wcap__eyebrow {
  color: var(--clr-primary-main);
}

: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: #2563eb;
  --admin-primary-rgb: 37, 99, 235;
  --admin-primary-hover: #1d4ed8;
  --admin-primary-light: #eff6ff;
  --admin-primary-border: #dbeafe;
  --admin-primary-text: #2563eb;
  --admin-on-primary: #ffffff;
  --admin-header-notifications-pill-bg: #f3f4f6;
  --admin-header-notifications-pill-fg: #0a0a0a;
  --admin-header-notifications-pill-border: #e5e7eb;
  --admin-header-notifications-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --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-sidebar-width: 220px;
  --admin-sidebar-mini-width: 68px;
  --admin-header-height: 56px;
  --admin-body-bg: #f6f8fa;
  --admin-main-bg: #ffffff;
  --admin-card-bg: #ffffff;
  --admin-header-bg: #ffffff;
  --admin-header-bg-hover: rgba(0, 0, 0, 0.04);
  --admin-sidebar-bg: #f6f8fa;
  --admin-sidebar-border: #d0d7de;
  --admin-sidebar-text: #4b5563;
  --admin-sidebar-text-active: #0a0a0a;
  --admin-sidebar-hover-bg: rgba(0, 0, 0, 0.04);
  --admin-sidebar-active-bg: rgba(0, 0, 0, 0.06);
  --admin-sidebar-active-bar: none;
  --admin-sidebar-active-accent: #0a0a0a;
  --admin-sidebar-focus-ring: rgba(9, 105, 218, 0.4);
  --admin-sidebar-summary-open-bg: rgba(0, 0, 0, 0.03);
  --admin-sidebar-summary-open-border: transparent;
  --admin-sidebar-sublink-active-bg: rgba(0, 0, 0, 0.05);
  --admin-sidebar-sublink-active-bar: none;
  --admin-sidebar-top-bg: rgba(0, 0, 0, 0.03);
  --admin-sidebar-top-border: #d0d7de;
  --admin-sidebar-top-text: #374151;
  --admin-sidebar-avatar-bg: #e5e7eb;
  --admin-border: #d1d5db;
  --admin-border-light: #e5e7eb;
  --admin-border-strong: #9ca3af;
  --admin-border-focus: #3b82f6;
  --admin-outline: rgba(0, 0, 0, 0.1);
  --admin-outline-variant: rgba(0, 0, 0, 0.06);
  --admin-font-family: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --admin-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Source Code Pro", monospace;
  --admin-fs-xs: 1.0rem;
  --admin-fs-sm: 1.1rem;
  --admin-fs-base: 1.2rem;
  --admin-fs-body: 1.3rem;
  --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 #dbeafe;
  --admin-focus-ring-border: 1px solid #3b82f6;
  --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: 4.0rem;
  --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-lg: 1.25rem;
  --admin-space-xl: 1.5rem;
  --admin-space-2xl: 2.0rem;
  --admin-space-3xl: 2.5rem;
  --admin-space-4xl: 3.0rem;
  --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-modal-backdrop-bg: rgba(0, 0, 0, 0.45);
  --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 {
  margin: 0;
  font-family: var(--admin-font-family);
  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;
}

.admin__wrap {
  display: flex;
  min-height: 100vh;
}

.admin__content-wrap {
  flex: 1;
  min-width: 0;
  margin-left: var(--admin-sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--admin-duration-long) ease;
}

.admin__main {
  flex: 1;
  padding: var(--admin-space-lg) var(--admin-space-2xl);
  background: var(--admin-main-bg);
  min-height: 0;
  overflow: auto;
}

.admin__content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--admin-space-sm);
}

.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-sidebar-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 (min-width: 1280px) {
  .admin__main {
    padding: var(--admin-space-2xl) var(--admin-space-3xl);
  }
}
@media (min-width: 1280px) and (max-width: 1279px) {
  .admin__main {
    padding: var(--admin-space-xl) var(--admin-space-2xl);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .admin__content-wrap {
    margin-left: 0;
  }
  .admin__main {
    padding: var(--admin-space-xl) var(--admin-space-2xl);
  }
  .admin__content {
    padding: 0;
  }
  .admin-sidebar-overlay {
    display: block;
    pointer-events: none;
  }
  .admin--sidebar-open .admin-sidebar-overlay {
    pointer-events: auto;
    opacity: 1;
  }
  .admin.admin--sidebar-open {
    overflow: hidden;
  }
}
@media (max-width: 767px) {
  .admin__content-wrap {
    margin-left: 0;
  }
  .admin__main {
    padding: var(--admin-space-lg) var(--admin-space-2xl);
  }
  .admin__content {
    padding: 0;
  }
  .admin-sidebar-overlay {
    display: block;
    pointer-events: none;
  }
  .admin--sidebar-open .admin-sidebar-overlay {
    pointer-events: auto;
    opacity: 1;
  }
  .admin.admin--sidebar-open {
    overflow: hidden;
  }
}
@media (max-width: 991px) {
  .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: var(--admin-radius-sm);
  border: 1px solid var(--admin-outline-variant);
  background: var(--admin-white);
  transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
  overflow: hidden;
}
.admin-auth__password-wrap:hover {
  border-color: var(--admin-border);
  background: var(--admin-grey-50);
}
.admin-auth__password-wrap:focus-within {
  border-color: var(--admin-primary);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--admin-primary);
}
.admin-auth__password-wrap .admin-auth__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--admin-size-input-height);
  border: none;
  border-radius: 0;
  padding-right: var(--admin-size-input-height);
  padding-left: var(--admin-space);
  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 var(--admin-border-light);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 80;
}

.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: var(--admin-grey-100);
  color: var(--admin-text);
  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: var(--admin-grey-200);
  color: var(--admin-text);
}
.admin-header__menu-btn:focus-visible {
  outline: 2px solid var(--admin-primary);
  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;
}

body.admin--sidebar-open .admin-header__menu-icon--open {
  display: none;
}

body.admin--sidebar-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;
}

.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);
}

.admin-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  margin: 0;
}

.admin-breadcrumb__link {
  color: var(--admin-text-secondary);
  text-decoration: none;
  font-weight: 400;
  transition: color var(--admin-duration) var(--admin-ease);
}
.admin-breadcrumb__link:hover {
  color: var(--admin-text);
}
.admin-breadcrumb__link:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}

.admin-breadcrumb__sep {
  color: var(--admin-text-muted);
  user-select: none;
  pointer-events: none;
  font-size: var(--admin-fs-xs);
}

.admin-breadcrumb__current {
  color: var(--admin-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.admin-header__actions {
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs);
}

.admin-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0 var(--admin-space-sm);
  border-radius: var(--admin-radius-full);
  color: var(--admin-text-secondary);
  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: var(--admin-grey-100);
  color: var(--admin-text);
}
.admin-header__action:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}
.admin-header__action i {
  font-size: var(--admin-fs-body);
  flex-shrink: 0;
}

.admin-header__action-label {
  white-space: nowrap;
  font-size: var(--admin-fs-sm);
}

.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: var(--admin-grey-100);
  color: var(--admin-text);
}
.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);
}

.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;
}

.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: var(--admin-border-light);
  flex-shrink: 0;
  margin: 0 var(--admin-space-2xs);
}

.admin-header__dropdown {
  position: relative;
}
.admin-header__dropdown[open] .admin-header__avatar {
  background: #fff;
  box-shadow: 0 0 0 3px var(--admin-grey-200), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.admin-header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--admin-grey-100);
  border: none;
  cursor: pointer;
  list-style: none;
  padding: 0;
  box-shadow: 0 0 0 1px var(--admin-border), 0 1px 3px rgba(0, 0, 0, 0.08);
  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: var(--admin-grey-200);
  box-shadow: 0 0 0 2px var(--admin-grey-300), 0 2px 6px rgba(0, 0, 0, 0.1);
}
.admin-header__avatar:has(.admin-header__avatar-img) {
  background: var(--admin-grey-200);
  box-shadow: 0 0 0 1px var(--admin-border), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.admin-header__avatar--lg {
  width: 52px;
  height: 52px;
  cursor: default;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
  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.1), 0 0 0 3px var(--admin-card-bg);
}

.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;
}

.admin-header__notifications-unread-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  margin-left: 0.25rem;
  padding: 0 0.35rem;
  border-radius: var(--admin-radius-full);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--admin-header-notifications-pill-fg);
  background: var(--admin-header-notifications-pill-bg);
  border: 1px solid var(--admin-header-notifications-pill-border);
  box-shadow: var(--admin-header-notifications-pill-shadow);
  flex-shrink: 0;
}
.admin-header__notifications-unread-pill.is-unread {
  background: var(--admin-error);
  color: var(--admin-white);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0 1px rgba(var(--admin-error-rgb), 0.35), 0 2px 8px rgba(var(--admin-error-rgb), 0.45);
}

.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: 320px;
  max-width: 400px;
  max-height: 70vh;
  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-list {
  padding: var(--admin-space-xs) 0;
  max-height: 320px;
  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 {
  display: block;
  padding: var(--admin-space-sm) var(--admin-space-lg);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text);
  text-decoration: none;
  border-bottom: 1px solid var(--admin-border-light);
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-item:hover {
  background: var(--admin-grey-50);
}

.admin-header__notifications-item--empty {
  color: var(--admin-text-muted);
}

.admin-header__notifications-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--admin-border-light);
}

.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-50);
}

.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);
}

@media (max-width: 992px) {
  .admin-header {
    padding: 0 var(--admin-space) 0 var(--admin-space);
  }
  .admin-header__menu-btn {
    display: inline-flex;
  }
  .admin-header__action-label {
    display: block;
    font-size: 9px;
    line-height: 1;
    text-align: center;
    margin-top: 2px;
  }
  .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;
  }
  .admin-header__action:not(.admin-header__action--link) {
    display: none;
  }
  .admin-header__actions .admin-header__action--link {
    display: inline-flex;
  }
  .admin-header__action-caret {
    display: none;
  }
  .admin-header__notifications-unread-pill {
    position: absolute;
    top: 4px;
    right: 4px;
    margin-left: 0;
  }
  .admin-header__notifications-bell-wrap {
    position: relative;
  }
  .admin-header__menu-dropdown {
    right: 0;
  }
  .admin-header__actions-divider {
    display: none;
  }
  .admin-header__breadcrumb {
    display: none !important;
    margin-right: var(--admin-space-2xs);
  }
  .admin-breadcrumb {
    font-size: var(--admin-fs-base);
  }
}
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--admin-sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--admin-sidebar-bg);
  z-index: 90;
  overflow: hidden;
  border-right: 1px solid var(--admin-sidebar-border);
  transition: width var(--admin-duration-long) ease;
}

.admin-sidebar__brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: var(--admin-space-sm) var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-sidebar-border);
  height: var(--admin-header-height);
}

.admin-sidebar__logo {
  display: block;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  transition: opacity var(--admin-duration) var(--admin-ease);
}
.admin-sidebar__logo:hover {
  opacity: 0.85;
}
.admin-sidebar__logo:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}

.admin-sidebar__logo img {
  display: block;
  max-width: 96px;
  max-height: 18px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.admin-sidebar__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--admin-space-2xs) 0 var(--admin-space-sm);
}

.admin-sidebar__home {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin: 0 var(--admin-space-xs) var(--admin-space-2xs);
  padding: var(--admin-space-sm) var(--admin-space-sm);
  min-height: 44px;
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  color: var(--admin-sidebar-text);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-sidebar__home:hover {
  background: var(--admin-sidebar-hover-bg);
  color: var(--admin-sidebar-text-active);
}
.admin-sidebar__home:focus-visible {
  outline: 2px solid var(--admin-sidebar-focus-ring);
  outline-offset: 2px;
}
.admin-sidebar__home--active {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
}
.admin-sidebar__home--active .admin-sidebar__home-icon {
  color: var(--admin-on-primary);
  opacity: 1;
}
.admin-sidebar__home--active:hover {
  background: var(--admin-primary-hover);
  color: var(--admin-on-primary);
}

.admin-sidebar__home-icon {
  flex-shrink: 0;
  width: var(--admin-size-icon);
  text-align: center;
  font-size: var(--admin-fs-sm);
  color: var(--admin-sidebar-text);
  opacity: 0.9;
  transition: color var(--admin-duration) var(--admin-ease), opacity var(--admin-duration) var(--admin-ease);
}

.admin-sidebar__home-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-sidebar__section {
  margin: 0;
  padding: 0;
  border: 0;
}
.admin-sidebar__section + .admin-sidebar__section {
  border-top: 1px solid var(--admin-sidebar-border);
}

.admin-sidebar__section-hd {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin: 0 var(--admin-space-xs);
  padding: var(--admin-space-sm) var(--admin-space-sm);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-sidebar-text);
  font-size: var(--admin-fs-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-sidebar__section-hd::-webkit-details-marker, .admin-sidebar__section-hd::marker {
  display: none;
}
.admin-sidebar__section-hd:hover {
  background: var(--admin-sidebar-hover-bg);
  color: var(--admin-sidebar-text-active);
}
.admin-sidebar__section-hd:hover .admin-sidebar__section-icon {
  color: var(--admin-sidebar-text-active);
  opacity: 1;
}
.admin-sidebar__section-hd:focus-visible {
  outline: 2px solid var(--admin-sidebar-focus-ring);
  outline-offset: 2px;
}

.admin-sidebar__section-icon {
  flex-shrink: 0;
  width: var(--admin-size-icon);
  text-align: center;
  font-size: var(--admin-fs-sm);
  color: var(--admin-sidebar-text);
  opacity: 0.85;
  transition: color var(--admin-duration) var(--admin-ease), opacity var(--admin-duration) var(--admin-ease);
}

.admin-sidebar__section-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-sidebar__section-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--admin-radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--admin-grey-200);
  color: var(--admin-sidebar-text);
}
.admin-sidebar__section--system .admin-sidebar__section-badge {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

.admin-sidebar__section-chevron {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--admin-sidebar-text);
  opacity: 0.45;
  transition: transform var(--admin-duration) var(--admin-ease), opacity var(--admin-duration) var(--admin-ease);
}

.admin-sidebar__section[open] > .admin-sidebar__section-hd {
  color: var(--admin-sidebar-text-active);
}
.admin-sidebar__section[open] > .admin-sidebar__section-hd .admin-sidebar__section-icon {
  color: var(--admin-sidebar-text-active);
  opacity: 1;
}
.admin-sidebar__section[open] > .admin-sidebar__section-hd .admin-sidebar__section-chevron {
  transform: rotate(180deg);
  opacity: 0.75;
}

.admin-sidebar__section-body {
  padding: 0 0 var(--admin-space-xs);
}

.admin-sidebar__section-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--admin-space-xs) var(--admin-space-2xs);
}

.admin-sidebar__nav-item {
  margin: 0 0 2px;
}

.admin-sidebar__nav-item--section-subgroup {
  margin-left: var(--admin-space-sm);
  padding-left: var(--admin-space-sm);
  border-left: 2px solid var(--admin-border-light);
}
.admin-sidebar__nav-item--section-subgroup .admin-sidebar__subtree {
  margin-left: calc(var(--admin-space-xs) + 0.35rem);
}

.admin-sidebar__parent.admin-sidebar__parent--nested {
  min-height: 38px;
  padding: var(--admin-space-xs) var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--admin-sidebar-text);
}
.admin-sidebar__parent.admin-sidebar__parent--nested .admin-sidebar__nav-icon {
  width: 1rem;
  font-size: var(--admin-fs-xs);
  opacity: 0.55;
}
.admin-sidebar__parent.admin-sidebar__parent--nested:hover {
  color: var(--admin-sidebar-text-active);
}
.admin-sidebar__parent.admin-sidebar__parent--nested:hover .admin-sidebar__nav-icon {
  opacity: 0.85;
}
.admin-sidebar__parent.admin-sidebar__parent--nested.admin-sidebar__parent--open, .admin-sidebar__expandable[open] .admin-sidebar__parent.admin-sidebar__parent--nested {
  color: var(--admin-sidebar-text-active);
}
.admin-sidebar__parent.admin-sidebar__parent--nested.admin-sidebar__parent--open .admin-sidebar__nav-icon, .admin-sidebar__expandable[open] .admin-sidebar__parent.admin-sidebar__parent--nested .admin-sidebar__nav-icon {
  color: var(--admin-sidebar-text);
  opacity: 0.85;
}

.admin-sidebar__nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin: 0;
  padding: var(--admin-space-sm) var(--admin-space-sm);
  min-height: 42px;
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  color: var(--admin-sidebar-text);
  font-size: var(--admin-fs-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-sidebar__nav-link:hover {
  background: var(--admin-sidebar-hover-bg);
  color: var(--admin-sidebar-text-active);
}
.admin-sidebar__nav-link:hover .admin-sidebar__nav-icon {
  color: var(--admin-sidebar-text);
  opacity: 1;
}
.admin-sidebar__nav-link:focus-visible {
  outline: 2px solid var(--admin-sidebar-focus-ring);
  outline-offset: 2px;
}
.admin-sidebar__nav-link--active {
  background: var(--admin-sidebar-active-bg);
  color: var(--admin-sidebar-text-active);
}
.admin-sidebar__nav-link--active .admin-sidebar__nav-icon {
  color: var(--admin-sidebar-text-active);
  opacity: 1;
}

.admin-sidebar__nav-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-sidebar__nav-icon {
  flex-shrink: 0;
  width: var(--admin-size-icon);
  text-align: center;
  font-size: var(--admin-fs-sm);
  color: var(--admin-sidebar-text);
  opacity: 0.92;
  transition: color var(--admin-duration) var(--admin-ease), opacity var(--admin-duration) var(--admin-ease);
}

.admin-sidebar__expandable {
  margin: 0;
}

.admin-sidebar__parent {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin: 0;
  padding: var(--admin-space-sm) var(--admin-space-sm);
  min-height: 42px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-sidebar-text);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-sidebar__parent::-webkit-details-marker, .admin-sidebar__parent::marker {
  display: none;
}
.admin-sidebar__parent:hover {
  background: var(--admin-sidebar-hover-bg);
  color: var(--admin-sidebar-text-active);
}
.admin-sidebar__parent:hover .admin-sidebar__nav-icon {
  color: var(--admin-sidebar-text);
  opacity: 1;
}
.admin-sidebar__parent:focus-visible {
  outline: 2px solid var(--admin-sidebar-focus-ring);
  outline-offset: 2px;
}
.admin-sidebar__parent--open, .admin-sidebar__expandable[open] .admin-sidebar__parent {
  color: var(--admin-sidebar-text-active);
}
.admin-sidebar__parent--open .admin-sidebar__nav-icon, .admin-sidebar__expandable[open] .admin-sidebar__parent .admin-sidebar__nav-icon {
  color: var(--admin-sidebar-text-active);
  opacity: 1;
}

.admin-sidebar__expandable-chevron {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--admin-sidebar-text);
  opacity: 0.45;
  transition: transform var(--admin-duration) var(--admin-ease), opacity var(--admin-duration) var(--admin-ease);
}

.admin-sidebar__expandable[open] .admin-sidebar__expandable-chevron {
  transform: rotate(180deg);
  opacity: 0.75;
}

.admin-sidebar__subtree {
  margin: var(--admin-space-3xs) 0 var(--admin-space-xs) calc(var(--admin-space-sm) + var(--admin-size-icon) * 0.5 - 0.5px);
  padding: 0 0 0 var(--admin-space);
  border-left: 1px solid var(--admin-border-light);
}

.admin-sidebar__children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-sidebar__child {
  margin: 0;
}

.admin-sidebar__child-link {
  display: flex;
  align-items: center;
  padding: var(--admin-space-xs) var(--admin-space-sm);
  min-height: 36px;
  line-height: 1.35;
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  color: var(--admin-sidebar-text);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-sidebar__child-link:hover {
  background: var(--admin-sidebar-hover-bg);
  color: var(--admin-sidebar-text-active);
}
.admin-sidebar__child-link:focus-visible {
  outline: 2px solid var(--admin-sidebar-focus-ring);
  outline-offset: 2px;
}
.admin-sidebar__child-link--active {
  background: var(--admin-sidebar-sublink-active-bg);
  color: var(--admin-sidebar-text-active);
  font-weight: 600;
}

.admin-sidebar__foot {
  flex-shrink: 0;
  padding: var(--admin-space-2xs) var(--admin-space-xs) var(--admin-space-sm);
  border-top: 1px solid var(--admin-sidebar-border);
}

.admin-sidebar__collapse-btn {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  width: 100%;
  padding: var(--admin-space-xs) var(--admin-space);
  min-height: 38px;
  background: none;
  border: none;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-sidebar-text);
  font: inherit;
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  opacity: 0.55;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), opacity var(--admin-duration) var(--admin-ease);
}
.admin-sidebar__collapse-btn:hover {
  background: var(--admin-sidebar-hover-bg);
  color: var(--admin-sidebar-text-active);
  opacity: 1;
}
.admin-sidebar__collapse-btn:focus-visible {
  outline: 2px solid var(--admin-sidebar-focus-ring);
  outline-offset: 2px;
}
.admin-sidebar__collapse-btn i {
  font-size: var(--admin-fs-sm);
  flex-shrink: 0;
  width: var(--admin-size-icon);
  text-align: center;
}
.admin-sidebar__collapse-btn span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.admin-sidebar__collapse-icon--mini {
  display: none;
}

.admin--sidebar-mini .admin-sidebar {
  width: var(--admin-sidebar-mini-width);
  overflow: visible;
}
.admin--sidebar-mini .admin-sidebar__nav {
  overflow: visible;
}
.admin--sidebar-mini .admin-sidebar__brand {
  justify-content: center;
  padding: var(--admin-space-sm) 0;
}
.admin--sidebar-mini .admin-sidebar__logo img {
  max-width: 40px;
  max-height: 18px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}
.admin--sidebar-mini .admin-sidebar__home-text,
.admin--sidebar-mini .admin-sidebar__section-label,
.admin--sidebar-mini .admin-sidebar__section-chevron,
.admin--sidebar-mini .admin-sidebar__section-badge,
.admin--sidebar-mini .admin-sidebar__nav-text,
.admin--sidebar-mini .admin-sidebar__expandable-chevron,
.admin--sidebar-mini .admin-sidebar__section-body {
  display: none;
}
.admin--sidebar-mini .admin-sidebar__home {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.admin--sidebar-mini .admin-sidebar__section-hd {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.admin--sidebar-mini .admin-sidebar__section-icon {
  margin: 0;
}
.admin--sidebar-mini .admin-sidebar__nav-link,
.admin--sidebar-mini .admin-sidebar__parent {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  min-height: 44px;
}
.admin--sidebar-mini .admin-sidebar__subtree {
  display: none;
}
.admin--sidebar-mini .admin-sidebar__collapse-btn {
  justify-content: center;
  padding: var(--admin-space-xs) 0;
}
.admin--sidebar-mini .admin-sidebar__collapse-icon--full {
  display: none;
}
.admin--sidebar-mini .admin-sidebar__collapse-icon--mini {
  display: inline;
}
.admin--sidebar-mini [data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  background: #18181b;
  color: #fff;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  padding: 5px 13px;
  border-radius: var(--admin-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  letter-spacing: 0;
}
.admin--sidebar-mini [data-tooltip]:hover::after {
  content: "";
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right-color: #18181b;
  pointer-events: none;
  z-index: 501;
}

@media (max-width: 992px) {
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform var(--admin-duration-long) var(--admin-ease), box-shadow var(--admin-duration-long) var(--admin-ease);
  }
  .admin--sidebar-open .admin-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  }
  .admin--sidebar-mini .admin-sidebar {
    width: var(--admin-sidebar-width);
    overflow: hidden;
  }
  .admin--sidebar-mini .admin__content-wrap {
    margin-left: 0;
  }
  .admin-sidebar__foot {
    display: none;
  }
}
.admin-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--admin-sidebar-mini-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--admin-sidebar-bg);
  border-right: 1px solid var(--admin-sidebar-border);
  z-index: 90;
  overflow: visible;
}

.admin-rail__brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--admin-header-height);
  border-bottom: 1px solid var(--admin-sidebar-border);
}

.admin-rail__logo {
  display: block;
  text-decoration: none;
  transition: opacity var(--admin-duration) var(--admin-ease);
}
.admin-rail__logo:hover {
  opacity: 0.75;
}
.admin-rail__logo:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
  border-radius: var(--admin-radius-xs);
}

.admin-rail__logo img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.admin-rail__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-sm) 0;
  width: 100%;
}

.admin-rail__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--admin-sidebar-text);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-rail__btn:hover {
  background: var(--admin-sidebar-hover-bg);
  color: var(--admin-sidebar-text-active);
}
.admin-rail__btn:hover .admin-rail__icon {
  opacity: 1;
}
.admin-rail__btn:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}
.admin-rail__btn--page-active {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
}
.admin-rail__btn--page-active .admin-rail__icon {
  opacity: 1;
}
.admin-rail__btn--page-active:hover {
  background: var(--admin-primary-hover);
  color: var(--admin-on-primary);
}
.admin-rail__btn--active {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
}
.admin-rail__btn--active .admin-rail__icon {
  opacity: 1;
}
.admin-rail__btn--active:hover {
  background: var(--admin-primary-hover);
  color: var(--admin-on-primary);
}
.admin-rail__btn[aria-expanded=true]:not(.admin-rail__btn--active):not(.admin-rail__btn--page-active) {
  background: var(--admin-sidebar-active-bg);
  color: var(--admin-sidebar-text-active);
}
.admin-rail__btn[aria-expanded=true]:not(.admin-rail__btn--active):not(.admin-rail__btn--page-active) .admin-rail__icon {
  opacity: 1;
}

.admin-rail__icon {
  font-size: 1.1rem;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--admin-duration) var(--admin-ease);
}

.admin-rail__btn[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  background: #18181b;
  color: #fff;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--admin-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.admin-rail__btn[data-tooltip]:hover::after {
  content: "";
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #18181b;
  pointer-events: none;
  z-index: 501;
}

.admin-rail__btn[aria-expanded=true][data-tooltip]:hover::before,
.admin-rail__btn[aria-expanded=true][data-tooltip]:hover::after {
  display: none;
}

.admin-rail__panel {
  position: fixed;
  left: calc(var(--admin-sidebar-mini-width) + 10px);
  top: calc(var(--admin-header-height) + 8px);
  bottom: 10px;
  width: 236px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
  z-index: 89;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition: opacity var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-rail__panel.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.admin-rail__panel--dev {
  border-top: 3px solid #f59e0b;
}

.admin-rail__panel-hd {
  flex-shrink: 0;
  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);
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: var(--admin-text);
}

.admin-rail__panel-hd-icon {
  flex-shrink: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  opacity: 0.8;
}

.admin-rail__panel-hd-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--admin-radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

.admin-rail__panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--admin-space-2xs);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.admin-rail__panel-link {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: 8px var(--admin-space-sm);
  min-height: 38px;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-sidebar-text);
  text-decoration: none;
  font-size: var(--admin-fs-base);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-rail__panel-link::-webkit-details-marker, .admin-rail__panel-link::marker {
  display: none;
}
.admin-rail__panel-link:hover {
  background: var(--admin-sidebar-hover-bg);
  color: var(--admin-sidebar-text-active);
}
.admin-rail__panel-link:hover .admin-rail__panel-icon {
  opacity: 1;
}
.admin-rail__panel-link:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}
.admin-rail__panel-link--active {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  font-weight: 600;
}
.admin-rail__panel-link--active .admin-rail__panel-icon {
  opacity: 1;
  color: var(--admin-on-primary);
}
.admin-rail__panel-link--active:hover {
  background: var(--admin-primary-hover);
  color: var(--admin-on-primary);
}

.admin-rail__panel-icon {
  flex-shrink: 0;
  font-size: var(--admin-fs-sm);
  width: 1.1rem;
  text-align: center;
  opacity: 0.55;
  transition: opacity var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}

.admin-rail__panel-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-rail__panel-details[open] > .admin-rail__panel-link .admin-rail__panel-chevron {
  transform: rotate(180deg);
}

.admin-rail__panel-chevron {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  opacity: 0.4;
  transition: transform var(--admin-duration) var(--admin-ease);
}

.admin-rail__panel-sublist {
  list-style: none;
  margin: 0;
  padding: 1px 0 var(--admin-space-2xs) calc(var(--admin-space-sm) + 1.1rem + var(--admin-space-sm));
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.admin-rail__panel-sublink {
  display: flex;
  align-items: center;
  padding: 6px var(--admin-space-sm);
  min-height: 32px;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-sidebar-text);
  text-decoration: none;
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-rail__panel-sublink:hover {
  background: var(--admin-sidebar-hover-bg);
  color: var(--admin-sidebar-text-active);
}
.admin-rail__panel-sublink:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}
.admin-rail__panel-sublink--active {
  background: var(--admin-sidebar-active-bg);
  color: var(--admin-sidebar-text-active);
  font-weight: 600;
}

@media (max-width: 992px) {
  .admin-rail {
    transform: translateX(-100%);
    overflow: hidden;
    transition: transform var(--admin-duration-long) var(--admin-ease), box-shadow var(--admin-duration-long) var(--admin-ease);
  }
  .admin--sidebar-open .admin-rail {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  }
  .admin-rail__panel {
    display: none;
  }
}
.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: #60a5fa;
  border-left-color: #3b82f6;
}

.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-lg);
  font-size: var(--admin-fs-xs);
  font-weight: 500;
  color: var(--admin-text-muted);
  letter-spacing: 0.02em;
}

.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;
  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);
  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);
}
.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);
}
.admin-btn:active {
  background: var(--admin-grey-200);
}
.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;
}
.admin-btn--primary {
  background: var(--admin-primary);
  border-color: transparent;
  color: var(--admin-on-primary);
  font-weight: 600;
}
.admin-btn--primary:hover {
  background: var(--admin-primary-hover);
  border-color: transparent;
}
.admin-btn--primary:active {
  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: var(--admin-primary-light);
  border-color: rgba(var(--admin-primary-rgb), 0.25);
  color: var(--admin-primary);
  font-weight: 600;
}
.admin-btn--secondary:hover {
  background: rgba(var(--admin-primary-rgb), 0.1);
  border-color: rgba(var(--admin-primary-rgb), 0.4);
}
.admin-btn--secondary:active {
  background: rgba(var(--admin-primary-rgb), 0.15);
}
.admin-btn--danger {
  background: var(--admin-error);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.admin-btn--danger:hover {
  background: var(--admin-error-hover);
}
.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: #fff;
  font-weight: 600;
}
.admin-btn--success:hover {
  background: var(--admin-success-hover);
}
.admin-btn--warn {
  background: var(--admin-warn);
  border-color: transparent;
  color: #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--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;
}

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 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;
  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: var(--admin-border-strong);
}
.admin-input:focus, .admin-textarea:focus {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: var(--admin-focus-ring);
}
.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: 1.5px solid var(--admin-grey-400);
  width: 15px;
  height: 15px;
  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: 4px;
  height: 7px;
  border-width: 0 1.5px 1.5px 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: 15px;
  height: 15px;
  margin: 0;
  clip: auto;
  overflow: visible;
  accent-color: var(--admin-primary);
  cursor: pointer;
}

.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-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;
}

.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-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-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: rgba(0, 0, 0, 0.4);
}

.admin-modal__box {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.admin-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}

.admin-modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.admin-modal__close {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  color: #64748b;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.admin-modal__close:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
}

.admin-modal__body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
}

.admin-modal__box--form {
  max-width: 480px;
}

.admin-modal__form {
  display: contents;
}

.admin-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--admin-space-sm);
  padding: var(--admin-space) var(--admin-space-lg);
  border-top: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50);
}

.admin-modal__body .admin-form__field + .admin-form__field {
  margin-top: var(--admin-space);
}

body.admin--modal-open {
  overflow: hidden;
}

.admin-modal__list {
  margin: 0;
  padding-left: 1.25rem;
}
.admin-modal__list li {
  margin: 0.25rem 0;
}

/**
 * Modal.ts(alert/confirm)용 스타일 – admin에서도 동일 클래스 사용.
 * home/components/_dpr-modal.scss 와 동일하게 admin 빌드에 포함.
 */
.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: 3.2rem;
  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__clear {
  position: absolute;
  right: var(--admin-space-xs);
  display: none;
  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-search-bar__input:not(:placeholder-shown) ~ .admin-search-bar__clear {
  display: flex;
}

.admin-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid var(--admin-border-light);
  margin-top: var(--admin-space-xl);
  margin-bottom: var(--admin-space-xl);
}
.admin-nav-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--admin-space-sm) var(--admin-space-lg);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: var(--admin-fs-body-lg);
  font-weight: 500;
  color: var(--admin-text-secondary);
  text-decoration: none;
  cursor: pointer;
  margin-bottom: -1px;
  border-radius: var(--admin-radius-xs) var(--admin-radius-xs) 0 0;
  transition: color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease);
}
.admin-nav-tabs__tab:hover {
  color: var(--admin-text);
  background: var(--admin-grey-50);
}
.admin-nav-tabs__tab--active {
  color: var(--admin-primary);
  font-weight: 600;
  border-bottom-color: var(--admin-primary);
  background: transparent;
}
.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-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-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;
  transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease), opacity var(--admin-duration-short) var(--admin-ease);
}

/* 빈 슬롯(이미지 없음): 업로드 드롭존을 오버레이로 노출(아이콘+안내문). hover/드래그 시 강조. */
.admin-cms-media-placeholder:not(:has(> img)) .admin-file-uploader__dropzone.is-cms-slot-overlay {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  opacity: 1;
}

.admin-cms-media-placeholder:not(:has(> img)):hover .admin-file-uploader__dropzone.is-cms-slot-overlay,
.admin-cms-media-placeholder:not(:has(> img)) .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);
}

/* 이미지가 있는 슬롯: 평소·hover 모두 깨끗한 이미지만(오버레이 숨김). 교체는 미니툴바 버튼.
   실제 파일을 드래그해 올릴 때(--dragover)만 "여기에 놓아 교체" 힌트를 보여준다.
   pointer-events:none 으로 클릭이 아래 이미지에 닿게 해 미니툴바 선택을 가능하게 한다(드롭은 루트 위임이라 유지). */
.admin-cms-media-placeholder:has(> img) .admin-file-uploader__dropzone.is-cms-slot-overlay {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}

.admin-cms-media-placeholder:has(> img) .admin-file-uploader__dropzone.is-cms-slot-overlay > * {
  opacity: 0;
}

.admin-cms-media-placeholder:has(> img) .admin-file-uploader__dropzone.is-cms-slot-overlay.admin-file-uploader__dropzone--dragover {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.6);
}

.admin-cms-media-placeholder:has(> img) .admin-file-uploader__dropzone.is-cms-slot-overlay.admin-file-uploader__dropzone--dragover > * {
  opacity: 1;
}

.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-img-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-img-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-img-uploader__dropzone:hover, .admin-single-img-uploader__dropzone--dragover {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
}
.admin-single-img-uploader__dropzone input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  color: transparent;
}
.admin-single-img-uploader__dropzone input[type=file]::file-selector-button {
  display: none;
}
.admin-single-img-uploader__dropzone-icon {
  font-size: 3rem;
  color: var(--admin-text-muted);
  margin-bottom: var(--admin-space);
  display: block;
}
.admin-single-img-uploader__dropzone-text {
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 0.4rem;
}
.admin-single-img-uploader__dropzone-hint {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-single-img-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-img-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-img-uploader__meta {
  flex: 1;
  min-width: 0;
}
.admin-single-img-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-img-uploader__size {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  margin-top: 0.2rem;
}
.admin-single-img-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: #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.5553398058rem);
}

.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.2776699029rem) clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.admin-si-deep__chip--section {
  background: #e8eaf6;
  color: #3949ab;
  border-color: #c5cae9;
}

.admin-si-deep__chip--end {
  background: #fce4ec;
  color: #c2185b;
  border-color: #f8bbd9;
}

.admin-si-deep__chip--title {
  background: #e0f2f1;
  color: #00695c;
  border-color: #b2dfdb;
}

.admin-si-deep__chip--sep {
  background: #fff3e0;
  color: #e65100;
  border-color: #ffe0b2;
}

.admin-si-deep__chip--at {
  background: #e3f2fd;
  color: #1565c0;
  border-color: #bbdefb;
}

.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: #fff;
  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: #e8eaf6;
  color: #3949ab;
  border-color: #c5cae9;
}

.admin-si-deep__tool--end {
  background: #fce4ec;
  color: #c2185b;
  border-color: #f8bbd9;
}

.admin-si-deep__tool--title {
  background: #e0f2f1;
  color: #00695c;
  border-color: #b2dfdb;
}

.admin-si-deep__tool--sep {
  background: #fff3e0;
  color: #e65100;
  border-color: #ffe0b2;
}

.admin-si-deep__tool--at {
  background: #e3f2fd;
  color: #1565c0;
  border-color: #bbdefb;
}

.admin-si-deep__editor-shell {
  min-height: 460px;
  border: 1px solid var(--admin-outline-variant);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.admin-si-deep__ta {
  display: block;
  margin: 0;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  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: #fff !important;
  color: #1a1a1a;
  caret-color: #1a1a1a;
}
.admin-si-deep__ta::placeholder {
  color: #8a8f98;
}
.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: #fff;
  overflow: hidden;
}

.admin-si-deep__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: #f6f8fb;
  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: #fff;
  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: #fff;
}
.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: #fff;
  color: #243041;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/**
 * 인덱스 페이지 공용 보조 스타일.
 * - Excel 다운로드 버튼 (Airtable 스타일)
 * - 대량 선택 체크박스 컬럼
 * - 선택된 행 강조
 *
 * 툴바 본체 스타일은 _index-toolbar.scss 참고.
 */
/* Excel 다운로드 버튼 (Airtable 스타일 — 녹색 계열) */
.admin-btn--excel {
  background: #fff;
  border-color: #d1d5db;
  color: #217346;
}
.admin-btn--excel:hover {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}
.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;
}
.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: 2.8rem;
  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-table-cards {
  display: none;
}

@media (max-width: 992px) {
  [data-table-manager] table,
  [data-listing-table] table {
    display: none;
  }
  .admin-table-cards {
    display: flex;
    flex-direction: column;
    gap: var(--admin-space-sm);
  }
}
.admin-table-card {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  overflow: hidden;
  transition: box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-table-card:hover {
  box-shadow: var(--admin-elevation-1);
}
.admin-table-card--current, .admin-table-card.user-sessions__row--current {
  background: var(--admin-white);
  border-left: 3px solid var(--admin-primary);
}
.admin-table-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-grey-50);
  border-bottom: 1px solid var(--admin-border-light);
  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: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  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--detached {
  position: fixed;
  top: auto;
  left: auto;
  min-width: max-content;
  margin-top: 4px;
}
.cs-dropdown--detached.cs-dropdown--up {
  margin-top: 0;
  margin-bottom: 4px;
}
.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__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);
}

.admin-editor-quill {
  position: relative;
  background: var(--admin-white);
  border: 1px solid var(--admin-border, var(--admin-grey-200));
  border-radius: var(--admin-radius-md, 6px);
  overflow: visible;
}
.admin-editor-quill .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--admin-border, var(--admin-grey-200));
  border-radius: var(--admin-radius-md, 6px) var(--admin-radius-md, 6px) 0 0;
  background: var(--admin-grey-50);
  padding: 6px 10px;
  font-family: inherit;
}
.admin-editor-quill .ql-toolbar.ql-snow button {
  width: 26px;
  height: 26px;
  padding: 2px;
  border-radius: var(--admin-radius-sm, 4px);
  color: var(--admin-text-secondary, var(--admin-grey-600));
}
.admin-editor-quill .ql-toolbar.ql-snow button:hover, .admin-editor-quill .ql-toolbar.ql-snow button:focus {
  color: var(--admin-primary);
  background: var(--admin-primary-light, var(--admin-grey-100));
}
.admin-editor-quill .ql-toolbar.ql-snow button.ql-active {
  color: var(--admin-primary);
}
.admin-editor-quill .ql-toolbar.ql-snow .ql-picker {
  color: var(--admin-text-secondary, var(--admin-grey-600));
}
.admin-editor-quill .ql-toolbar.ql-snow .ql-picker-label {
  border-radius: var(--admin-radius-sm, 4px);
}
.admin-editor-quill .ql-toolbar.ql-snow .ql-picker-label:hover {
  color: var(--admin-primary);
}
.admin-editor-quill .ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid var(--admin-border, var(--admin-grey-200));
  border-radius: var(--admin-radius-md, 6px);
  box-shadow: var(--admin-elevation-1, 0 2px 8px rgba(0, 0, 0, 0.08));
}
.admin-editor-quill .ql-toolbar.ql-snow .ql-stroke {
  stroke: currentColor;
}
.admin-editor-quill .ql-toolbar.ql-snow .ql-fill {
  fill: currentColor;
}
.admin-editor-quill .ql-container.ql-snow {
  border: none;
  border-radius: 0 0 var(--admin-radius-md, 6px) var(--admin-radius-md, 6px);
  font-family: inherit;
  font-size: var(--admin-fs-sm, 0.875rem);
}
.admin-editor-quill .ql-editor {
  min-height: 160px;
  padding: 10px 14px;
  color: var(--admin-text, var(--admin-grey-900));
  line-height: 1.65;
}
.admin-editor-quill .ql-editor.ql-blank::before {
  color: var(--admin-text-muted, var(--admin-grey-400));
  font-style: normal;
}
.admin-editor-quill .ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: var(--admin-radius-sm, 4px);
  cursor: grab;
}
.admin-editor-quill .ql-editor img:active {
  cursor: grabbing;
}
.admin-editor-quill .ql-editor video {
  max-width: 100%;
  height: auto;
  border-radius: var(--admin-radius-sm, 4px);
}

.ql-upload-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.65);
  border-radius: inherit;
  z-index: 20;
  pointer-events: none;
  font-size: 1.5rem;
  color: var(--admin-primary);
}

.ql-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.75;
  transform: rotate(2deg) scale(0.92);
  box-shadow: var(--admin-elevation-2, 0 4px 16px rgba(0, 0, 0, 0.18));
  border-radius: var(--admin-radius-sm, 4px);
  overflow: hidden;
  max-width: 200px;
}
.ql-drag-ghost img {
  display: block;
  max-width: 200px;
  max-height: 140px;
  object-fit: cover;
}

.ql-drop-indicator {
  position: fixed;
  z-index: 9998;
  height: 2px;
  background: var(--admin-primary);
  border-radius: 2px;
  pointer-events: none;
}
.ql-drop-indicator::before, .ql-drop-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--admin-primary);
}
.ql-drop-indicator::before {
  left: 0;
}
.ql-drop-indicator::after {
  right: 0;
}

.admin-dashboard {
  padding: var(--admin-space-2xl) 0;
}
.admin-dashboard__section {
  margin-bottom: var(--admin-space-2xl);
}
.admin-dashboard__section-title {
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--admin-space-lg);
}
.admin-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--admin-space-lg);
}
.admin-dashboard__card {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-lg);
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  text-decoration: none;
  color: var(--admin-text);
  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-dashboard__card:hover {
  border-color: rgba(var(--admin-primary-rgb), 0.3);
  box-shadow: var(--admin-elevation-2);
  transform: translateY(-1px);
}
.admin-dashboard__card--wide {
  flex-direction: row;
  align-items: center;
  gap: var(--admin-space-lg);
}
.admin-dashboard__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--admin-radius);
  background: var(--admin-primary-light);
  color: var(--admin-primary);
  font-size: 1.8rem;
  flex-shrink: 0;
}
.admin-dashboard__card-title {
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-text);
  line-height: 1.3;
}
.admin-dashboard__card-desc {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  line-height: 1.5;
  flex: 1;
}
.admin-dashboard__card-badge {
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 640px) {
  .admin-dashboard__grid {
    grid-template-columns: 1fr;
  }
}

.admin-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-main-bg);
  padding: var(--admin-space-lg);
}

.admin-auth__card {
  width: 100%;
  max-width: 400px;
  padding: var(--admin-space-2xl) var(--admin-space-xl);
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-elevation-2);
  border: 1px solid var(--admin-border-light);
}

.admin-auth__title {
  margin: 0 0 var(--admin-space-lg);
  font-size: var(--admin-fs-body-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--admin-text);
}

.admin-auth__form {
  margin: 0;
}

.admin-auth__form-group {
  margin-bottom: var(--admin-space);
}

.admin-auth__label {
  display: block;
  margin-bottom: var(--admin-space-2xs);
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  color: var(--admin-text-secondary);
  letter-spacing: 0.01em;
}

.admin-auth__input {
  width: 100%;
  padding: var(--admin-space-sm) var(--admin-space-lg);
  border: 1px solid var(--admin-outline-variant);
  border-radius: var(--admin-radius);
  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) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-auth__input::placeholder {
  color: var(--admin-text-muted);
}
.admin-auth__input:hover:not(:focus) {
  border-color: var(--admin-border);
  background: var(--admin-grey-50);
}
.admin-auth__input:focus {
  outline: none;
  border-color: var(--admin-primary);
  border-width: 2px;
  padding: calc(var(--admin-space-sm) - 1px) calc(var(--admin-space) - 1px);
  box-shadow: 0 0 0 1px var(--admin-primary);
}

.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: var(--admin-radius);
  border: 1px solid var(--admin-outline-variant);
  background: var(--admin-white);
  transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
  overflow: hidden;
}
.admin-auth__password-wrap:hover {
  border-color: var(--admin-border);
  background: var(--admin-grey-50);
}
.admin-auth__password-wrap:focus-within {
  border-color: var(--admin-primary);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--admin-primary);
}
.admin-auth__password-wrap .admin-auth__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--admin-size-input-height);
  border: none;
  border-radius: 0;
  padding-right: var(--admin-size-input-height);
  padding-left: var(--admin-space);
  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: var(--admin-space) 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);
  box-shadow: var(--admin-elevation-1);
}
.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__footer {
  margin-top: var(--admin-space-lg);
  padding-top: var(--admin-space);
  border-top: 1px solid var(--admin-border-light);
  text-align: center;
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text-secondary);
}

.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);
  transition: background var(--admin-duration-short) var(--admin-ease);
}
.admin-table tbody tr:hover {
  background: var(--admin-grey-50);
}
.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 {
  border-bottom-color: var(--admin-primary-border);
}
.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__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: 992px) {
  .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 {
  margin-bottom: var(--admin-space-lg);
}

.admin-page__title {
  margin: 0 0 var(--admin-space-2xs);
  font-size: var(--admin-fs-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--admin-text);
}

.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-index-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--admin-space) var(--admin-space-lg);
  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__item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
}
.admin-index-filter__item--date {
  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 {
  margin: 0;
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text-secondary);
  white-space: nowrap;
}

.admin-index-filter__input {
  min-width: 140px;
}

.admin-index-filter__select {
  width: auto;
  /* 옵션 중 가장 긴 텍스트(예: 발매일 최신순)가 잘리지 않도록 */
  min-width: 12rem;
}

.admin-index-filter__actions {
  margin-left: auto;
}

.admin-pagination {
  margin-top: var(--admin-space);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space);
}

.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.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.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: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text);
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  text-decoration: none;
  transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease);
}
.admin-pagination__btn:hover:not(.admin-pagination__btn--disabled):not(.admin-pagination__btn--current) {
  background: var(--admin-grey-50);
  border-color: var(--admin-border);
}
.admin-pagination__btn:focus-visible {
  outline: none;
  box-shadow: var(--admin-focus-ring);
  border-color: var(--admin-border-focus);
}
.admin-pagination__btn--current {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: var(--admin-on-primary);
  font-weight: 600;
  cursor: default;
}
.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);
}
.admin-pagination__btn i, .admin-pagination__btn svg {
  font-size: 1.2rem;
}

.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: #111;
}
.admin-siteinfo-logo-preview--light {
  background: #f9f9f9;
}
.admin-siteinfo-logo-preview--admin {
  background: var(--admin-sidebar-bg);
  border-color: var(--admin-sidebar-border);
}
.admin-siteinfo-logo-preview__img {
  max-height: 72px;
  max-width: 90%;
  object-fit: contain;
}

.admin-siteinfo-herovideo-preview {
  display: block;
  width: 100%;
  max-width: 480px;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border-light);
  background: #000;
}

.admin-form--hero-video .admin-form__section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--admin-space-xl);
}

.admin-hero-autoconv {
  margin-top: var(--admin-space);
  padding: var(--admin-space) var(--admin-space-lg);
  border: 1px solid var(--admin-info-bg, var(--admin-border-light));
  border-radius: var(--admin-radius-sm);
  background: var(--admin-info-bg, var(--admin-bg-subtle, #fafafa));
}

.admin-hero-autoconv__row {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  font-size: var(--admin-fs-sm);
  color: var(--admin-info-text, var(--admin-text-muted));
}

.admin-hero-autoconv__icon {
  flex: 0 0 auto;
}

.admin-hero-autoconv__bar {
  margin-top: var(--admin-space-xs);
  height: 6px;
  border-radius: 999px;
  background: var(--admin-border-light);
  overflow: hidden;
}

.admin-hero-autoconv__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--admin-primary);
  transition: width 0.2s ease;
}

.admin-hero-autoconv--error {
  border-color: var(--admin-error-border, var(--admin-border-light));
  background: var(--admin-error-bg, var(--admin-bg-subtle, #fafafa));
}
.admin-hero-autoconv--error .admin-hero-autoconv__row {
  color: var(--admin-error-text, var(--admin-text-muted));
}

.admin-hero-autoconv--done {
  border-color: var(--admin-success-border, var(--admin-border-light));
  background: var(--admin-success-bg, var(--admin-bg-subtle, #fafafa));
}
.admin-hero-autoconv--done .admin-hero-autoconv__row {
  color: var(--admin-success-text, var(--admin-text-muted));
}

.admin-form__label-hint {
  margin-left: var(--admin-space-xs);
  font-size: var(--admin-fs-xs);
  font-weight: 400;
  color: var(--admin-text-muted);
}

.admin-form {
  max-width: 640px;
}
.admin-form--wide {
  max-width: 1280px;
}
.admin-form__section {
  padding-bottom: var(--admin-space-2xl);
  margin-bottom: var(--admin-space-2xl);
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-form__section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  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-lg);
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
}
.admin-form__section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--admin-border-light);
}
.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__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;
}
.admin-form__label--required::after {
  content: " *";
  color: var(--admin-error);
  font-weight: 700;
}
.admin-form__input, .admin-form__textarea {
  display: block;
  width: 100%;
  height: var(--admin-size-input-height);
  padding: 0 var(--admin-space-lg);
  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);
  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: var(--admin-border-strong);
}
.admin-form__input:focus, .admin-form__textarea:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.15);
}
.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-input-height);
  padding: var(--admin-space-sm) var(--admin-space);
  resize: vertical;
  line-height: 1.6;
}
.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--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 {
  /* 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;
  gap: var(--admin-space-lg);
}
@media (max-width: 992px) {
  .admin-form__grid-2 {
    grid-template-columns: 1fr;
  }
}
.admin-form {
  /* 컬러 피커 */
}
.admin-form__color-picker-wrap {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
}
.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: 600;
  color: var(--admin-text-secondary);
  margin-left: var(--admin-space-2xs);
}

.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: var(--admin-font-mono, monospace);
  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-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: 720px) {
  .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: #fff;
  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: #ffffff;
  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: #fff;
}

.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;
}

/* =========================================================
 * 프로젝트 변수 문서 편집기  (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: 992px) {
  .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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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: var(--admin-mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
  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.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: 992px) {
  .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: 992px) {
  .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: 720px) {
  .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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--admin-space);
  flex-wrap: wrap;
}
.admin-library--show .admin-library__detail-breadcrumb {
  margin: 0 0 var(--admin-space-2xs);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-library--show .admin-library__detail-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.admin-library--show .admin-library__detail-breadcrumb a:hover {
  color: var(--admin-text);
}
.admin-library--show .admin-library__detail-breadcrumb span {
  margin: 0 6px;
}
.admin-library--show .admin-library__detail-actions {
  display: flex;
  gap: var(--admin-space-2xs);
}
.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: 992px) {
  .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: var(--admin-mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
  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: 992px) {
  .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: var(--admin-mono, ui-monospace, Menlo, Consolas, monospace);
  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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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: #fff;
  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: #fff;
}
.admin-work-sections__badge--off {
  background: var(--admin-grey-400);
  color: #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: #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-space);
}

.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: #fff;
  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: 1100px) {
  .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: #fff;
  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: #fff;
  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-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: #fff;
  padding: var(--admin-space);
}

.admin-work-template-canvas__preview {
  min-width: 0;
  min-height: 0;
}

.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: 1101px) {
  .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: #fff;
  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: #fff;
  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: #fff;
  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);
}

/* 블록 메타 입력: 표시 라벨 + 레이아웃 variant (head 바로 아래) */
.admin-cms-block__meta-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--admin-space-lg);
  padding: 8px 12px;
  border-bottom: 1px solid var(--admin-border-light);
  background: #fff;
}

.admin-cms-block__meta-row:has(.admin-cms-block__meta-field:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.admin-cms-block__meta-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-cms-block__meta-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;
}

@media (max-width: 760px) {
  .admin-cms-block__meta-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--admin-space-sm);
  }
}
.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: #fff;
  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;
}

/* 블록 미리보기 위 "섹션 여백"(위/아래 padding) 컨트롤 */
.admin-cms-block__spacing-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__spacing-label {
  font-weight: 700;
  color: var(--admin-text-secondary);
}

.admin-cms-block__spacing-edge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-cms-block__spacing-edge-label {
  color: var(--admin-text-secondary);
}

.admin-cms-block__spacing-bar .admin-form__field,
.admin-cms-block__spacing-bar .admin-select {
  margin: 0;
}

.admin-cms-block__spacing-custom {
  width: 9rem;
  font-size: 12px;
}

/* 블록 미리보기 위 "내부 간격"(멀티요소 레이아웃 gap) 컨트롤 — 라벨/커스텀 입력은 spacing-bar 클래스 재사용 */
.admin-cms-block__inner-gap-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__inner-gap-bar .admin-form__field,
.admin-cms-block__inner-gap-bar .admin-select {
  margin: 0;
}

/* 블록 미리보기 위 "이미지 정렬·크기" 컨트롤 (단일 이미지 섹션) */
.admin-cms-block__img-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__img-label {
  font-weight: 700;
  color: var(--admin-text-secondary);
}

.admin-cms-block__img-align,
.admin-cms-block__img-width {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-cms-block__img-width-label {
  color: var(--admin-text-secondary);
}

.admin-cms-block__img-bar .admin-radio-wrap {
  font-size: 12px;
}

.admin-cms-block__img-bar .admin-form__field,
.admin-cms-block__img-bar .admin-select {
  margin: 0;
}

.admin-cms-block__img-width-custom {
  width: 9rem;
  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);
}

.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;
}

@media (max-width: 640px) {
  .admin-cms-block-color-grid {
    grid-template-columns: 1fr;
  }
}
.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-placeholder:has(> img) {
  background: none;
  border-color: transparent;
}

.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;
}

/* 조정 모드: 업로드 드롭존 클릭 차단(드래그=이동 우선), 슬롯 강조 */
.admin-cms-media-slot.is-cms-adjusting {
  outline: 2px solid var(--admin-primary, #2563eb);
  outline-offset: -2px;
  z-index: 5;
}

.admin-cms-media-slot.is-cms-adjusting .admin-file-uploader__dropzone {
  opacity: 0;
  pointer-events: none;
}

/* Moveable 컨트롤 박스(body 직속) — admin 토큰 색으로 테마 + 툴바 위로 */
.moveable-control-box {
  --moveable-color: var(--admin-primary, #2563eb);
  z-index: 10001;
}

/* 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%;
}

.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: #b91c1c;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.admin-cms-media__delete:hover {
  background: #fff;
  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: #fff;
  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: #fff;
  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: #fff;
  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: ui-monospace, monospace;
  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: #fff;
  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: ui-monospace, monospace;
  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: 520px) {
  .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--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: 520px) {
  .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: #fff;
  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-2xs);
  align-items: center;
  flex-wrap: wrap;
}
.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: 720px) {
  .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: 720px) {
  .admin-form__block--grid-3 {
    grid-template-columns: 1fr;
  }
}

.admin-form__checkgroup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-2xs) var(--admin-space);
}

/* =========================================================
 * 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-space-xl);
  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;
}

.admin-list-section__hints {
  margin: 0 0 var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space);
  list-style: none;
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-left: 2px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
}
.admin-list-section__hints li {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.5;
}
.admin-list-section__hints li + li {
  margin-top: 0.25rem;
}
.admin-list-section__hints li > i {
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--admin-text-muted);
}
.admin-list-section__hints li strong {
  color: var(--admin-text);
  font-weight: 600;
}

/* =========================================================
 * Add section — rich variant (Work 서비스 페이지 전용)
 * 공유 클래스 .admin-add-section 은 그대로 두고, --rich 한정으로만 확장.
 * ========================================================= */
.admin-add-section--rich {
  padding: var(--admin-space-lg) var(--admin-space-xl);
  border-left: 3px solid var(--admin-primary);
}
.admin-add-section--rich .admin-add-section__header {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space);
}
.admin-add-section--rich .admin-add-section__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--admin-radius-full);
  background: var(--admin-primary-light);
  color: var(--admin-primary);
}
.admin-add-section--rich .admin-add-section__icon i {
  font-size: 1.3rem;
}
.admin-add-section--rich .admin-add-section__heading {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.admin-add-section--rich .admin-add-section__title {
  margin: 0;
}
.admin-add-section--rich .admin-add-section__desc {
  margin: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  line-height: 1.5;
}
.admin-add-section--rich .admin-add-section__form {
  display: grid;
  gap: var(--admin-space);
}
.admin-add-section--rich .admin-add-section__row {
  display: grid;
  gap: var(--admin-space);
}
.admin-add-section--rich .admin-add-section__row--fields {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.admin-add-section--rich .admin-add-section__row--action {
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-top: var(--admin-space-sm);
  border-top: 1px dashed var(--admin-border-light);
}
.admin-add-section--rich .admin-add-section__required {
  color: var(--admin-error);
  margin-left: 0.15em;
}
.admin-add-section--rich .admin-add-section__field-tag {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.1em 0.5em;
  font-size: var(--admin-fs-xs);
  font-weight: 500;
  color: var(--admin-text-muted);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  letter-spacing: 0;
}
.admin-add-section--rich .admin-add-section__toggle {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  flex-wrap: wrap;
}
.admin-add-section--rich .admin-add-section__toggle-hint {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-add-section--rich .admin-add-section__submit {
  white-space: nowrap;
}
.admin-add-section--rich .admin-form__hint {
  margin: var(--admin-space-3xs) 0 0;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
@media (max-width: 767px) {
  .admin-add-section--rich {
    padding: var(--admin-space) var(--admin-space);
  }
  .admin-add-section--rich .admin-add-section__row--fields,
  .admin-add-section--rich .admin-add-section__row--action {
    grid-template-columns: 1fr;
  }
  .admin-add-section--rich .admin-add-section__submit {
    width: 100%;
  }
}

/* =========================================================
 * Work 서비스 — 행 hover + 제목 셀 강조
 *   인라인 수정은 폐기(모달로 전환)되어 dirty/focus-within 룰은 더 이상 필요 없음.
 * ========================================================= */
.admin-work-services .admin-table tbody tr {
  transition: background-color 120ms ease;
}
.admin-work-services .admin-table tbody tr:hover {
  background: var(--admin-grey-50);
}
.admin-work-services .admin-work-services__title-cell {
  font-weight: 500;
  color: var(--admin-text);
}

/* =========================================================
 * 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: #fff;
  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;
}

/* Sidebar sub menu */
.admin-sidebar__sublist {
  list-style: none;
  padding: 0 0 0 28px;
  margin: 4px 0 8px 0;
  display: none;
  flex-direction: column;
  gap: 2px;
}

.admin-sidebar__item--open .admin-sidebar__sublist {
  display: flex;
}

.admin-sidebar__sublink {
  display: block;
  padding: 4px 8px;
  color: var(--admin-text-secondary);
  text-decoration: none;
  font-size: 12px;
  border-radius: var(--admin-radius-xs);
}
.admin-sidebar__sublink:hover {
  background: var(--admin-grey-100);
  color: var(--admin-text);
}
.admin-sidebar__sublink--active {
  background: var(--admin-grey-100);
  color: var(--admin-primary);
  font-weight: 600;
}

/* 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: #fff;
  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: #fff;
  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: var(--admin-mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
}
.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: 1100px) {
  .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: #fff;
  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: #fff;
  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: #fff;
  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: var(--admin-mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
  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: #fff;
  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: #fff;
  border-bottom: 1px solid var(--admin-grey-100);
}

@media (max-width: 760px) {
  .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 {
    grid-area: drag;
  }
  .admin-work-blocks__item--thumb .admin-work-blocks__move {
    grid-area: move;
  }
  .admin-work-blocks__item--thumb .admin-work-blocks__thumb-wrap {
    grid-area: thumb;
    width: 140px;
  }
  .admin-work-blocks__item--thumb .admin-work-blocks__meta {
    grid-area: meta;
  }
  .admin-work-blocks__item--thumb .admin-work-blocks__remove {
    grid-area: remove;
    justify-self: end;
  }
}
/* 드래그 핸들 */
.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;
}

.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: #fff;
}

.admin-work-blocks__move-btn {
  width: 24px;
  height: 18px;
  border: none;
  background: #fff;
  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;
}

.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;
}

.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: var(--admin-mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
  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__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: #fff;
  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;
}

/* =========================================================
 * CMS 캔버스: richtext 인라인 서식 floating toolbar
 *  - document.body 에 append, 선택 영역 위에 절대 위치(JS 가 top/left 지정)
 *  - 드래그한 텍스트의 크기/행간/자간을 선택 영역에만 적용
 * ========================================================= */
.cms-inline-format-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: var(--admin-radius, 8px);
  background: var(--admin-card-bg, #fff);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  color: var(--admin-text, #111);
}

.cms-inline-format-toolbar[hidden] {
  display: none;
}

.cms-inline-format-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 2.8rem;
  min-width: 2.8rem;
  padding: 0 6px;
  border: 0;
  border-radius: var(--admin-radius-sm, 5px);
  background: transparent;
  color: var(--admin-text-secondary, #6b7280);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--admin-duration-short, 150ms) var(--admin-ease, ease), color var(--admin-duration-short, 150ms) var(--admin-ease, ease);
}

.cms-inline-format-toolbar__btn:hover {
  background: var(--admin-grey-100, #f3f4f6);
  color: var(--admin-text, #111);
}

.cms-inline-format-toolbar__btn--active,
.cms-inline-format-toolbar__btn--active:hover {
  background: var(--admin-primary, #2563eb);
  color: #fff;
}

.cms-inline-format-toolbar__btn--size span {
  font-size: 12px;
}

.cms-inline-format-toolbar__divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 2px;
  background: var(--admin-border-light, #eee);
}

/* 이미지 클릭 시 뜨는 액션 미니툴바(ImageBlockToolbar) — 텍스트 툴바와 톤 일치. */
.cms-image-block-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: var(--admin-radius, 8px);
  background: var(--admin-card-bg, #fff);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  color: var(--admin-text, #111);
}

.cms-image-block-toolbar[hidden] {
  display: none;
}

.cms-image-block-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 2.8rem;
  min-width: 2.8rem;
  padding: 0 8px;
  border: 0;
  border-radius: var(--admin-radius-sm, 5px);
  background: transparent;
  color: var(--admin-text-secondary, #6b7280);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--admin-duration-short, 150ms) var(--admin-ease, ease), color var(--admin-duration-short, 150ms) var(--admin-ease, ease);
}

.cms-image-block-toolbar__btn:hover {
  background: var(--admin-grey-100, #f3f4f6);
  color: var(--admin-text, #111);
}

.cms-image-block-toolbar__btn--active,
.cms-image-block-toolbar__btn--active:hover {
  background: var(--admin-primary, #2563eb);
  color: #fff;
}

/* 선택된 이미지(프레임) 강조 — 슬롯/항목 테두리. */
.is-cms-img-selected {
  outline: 2px solid var(--admin-primary, #2563eb);
  outline-offset: -2px;
  z-index: 5;
}

/* 크기/행간/자간 팝오버 */
.cms-inline-format-toolbar__popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 24rem;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: var(--admin-radius, 8px);
  background: var(--admin-card-bg, #fff);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  color: var(--admin-text, #111);
}

.cms-inline-format-toolbar__popover[hidden] {
  display: none;
}

.cms-inline-format-toolbar__pop-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-text-secondary, #6b7280);
  margin-bottom: 6px;
}

.cms-inline-format-toolbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cms-inline-format-toolbar__chip {
  padding: 4px 8px;
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: var(--admin-radius-sm, 5px);
  background: var(--admin-card-bg, #fff);
  color: var(--admin-text-secondary, #6b7280);
  font-size: 12px;
  cursor: pointer;
}

.cms-inline-format-toolbar__chip:hover {
  background: var(--admin-grey-50, #fafafa);
}

.cms-inline-format-toolbar__chip--active {
  border-color: var(--admin-primary, #2563eb);
  background: var(--admin-primary, #2563eb);
  color: #fff;
}

.cms-inline-format-toolbar__slider {
  margin-top: 12px;
  margin-inline: 6px;
}

/* noUiSlider 테마 — 기반 CSS(admin.scss load-css) 위에 --admin-* 토큰으로 덮음 */
.cms-inline-format-toolbar__popover .noUi-target {
  height: 6px;
  border: 0;
  box-shadow: none;
  background: var(--admin-grey-200, #e5e7eb);
  border-radius: 999px;
}

.cms-inline-format-toolbar__popover .noUi-connect {
  background: var(--admin-primary, #2563eb);
}

.cms-inline-format-toolbar__popover .noUi-handle {
  width: 16px;
  height: 16px;
  right: -8px;
  top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--admin-primary, #2563eb);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.cms-inline-format-toolbar__popover .noUi-handle::before,
.cms-inline-format-toolbar__popover .noUi-handle::after {
  display: none;
}

.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 {
  display: flex;
  align-items: center;
  border: 1px solid var(--admin-border, #e2e8f0);
  border-radius: var(--admin-radius-sm);
  background: #fff;
  cursor: pointer;
}
.admin-datetime-input-wrap:focus-within,
.admin-time-input-wrap:focus-within {
  border-color: var(--admin-primary, #3b82f6);
  outline: 1px solid var(--admin-primary, #3b82f6);
}

.admin-datetime-input,
.admin-time-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 .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-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;
}

.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;
}

.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);
}

.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: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  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;
}

.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));
}

.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);
}

.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: #fff;
  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));
}

.admin-docs__link-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 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;
}

.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);
}

@media (max-width: 992px) {
  .admin-docs {
    grid-template-columns: 1fr;
    gap: var(--admin-space-xl);
    padding: var(--admin-space) var(--admin-space);
  }
  .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__main {
    max-width: none;
    padding: 0;
  }
  .admin-docs__hero {
    padding: var(--admin-space-xl);
  }
  .admin-docs__hero-actions,
  .admin-docs__link-grid,
  .admin-docs__card-grid {
    grid-template-columns: 1fr;
  }
  .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__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-notifications {
  max-width: 800px;
  padding-bottom: var(--admin-space-2xl);
}

.admin-notifications__header {
  margin-bottom: var(--admin-space-lg);
}

.admin-notifications__title {
  margin: 0 0 var(--admin-space-2xs);
  font-size: var(--admin-fs-title);
  font-weight: 600;
  color: var(--admin-text);
}

.admin-notifications__desc {
  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 {
  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;
}
.admin-notifications__item:last-child {
  border-bottom: none;
}
.admin-notifications__item--read {
  background: var(--admin-grey-50);
}

.admin-notifications__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--admin-grey-300);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-notifications__avatar-letter {
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-white);
  line-height: 1;
}

.admin-notifications__body {
  flex: 1;
  min-width: 0;
}

.admin-notifications__line {
  margin: 0 0 var(--admin-space-2xs);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text);
}

.admin-notifications__actor {
  margin-right: 0.25em;
  font-weight: 600;
}

.admin-notifications__text {
  font-weight: 500;
}

.admin-notifications__meta {
  margin: 0 0 var(--admin-space-2xs);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}

.admin-notifications__target {
  display: inline-block;
  margin-right: 0.5em;
}

.admin-notifications__time {
  margin: 0;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-tertiary);
}

.admin-notifications__date {
  flex-shrink: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  white-space: nowrap;
}

.admin-notifications-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  overflow: hidden;
  background: var(--admin-card-bg);
}

.admin-notifications-index__item {
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-notifications-index__item:last-child {
  border-bottom: none;
}
.admin-notifications-index__item--unread {
  background: var(--admin-grey-50);
}

.admin-notifications-index__link {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
  padding: var(--admin-space) var(--admin-space-lg);
  text-decoration: none;
  color: var(--admin-text);
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-notifications-index__link:hover {
  background: var(--admin-grey-50);
}
.admin-notifications-index__link:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: -2px;
}

.admin-notifications-index__title {
  font-size: var(--admin-fs-body);
  font-weight: 600;
}

.admin-notifications-index__msg {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}

.admin-notifications-index__meta {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}

.admin-analytics {
  --an-accent: var(--admin-primary);
}
.admin-analytics .analytics-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-space);
  flex-wrap: wrap;
}
.admin-analytics .analytics-header__text {
  min-width: 0;
}
.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: ui-monospace, SFMono-Regular, Menlo, monospace;
  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: #e5e7eb;
  border-radius: var(--admin-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--admin-fs-sm);
  overflow-x: auto;
  white-space: pre;
}
.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);
}
.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: rgba(255, 255, 255, 0.7);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__value {
  color: var(--admin-on-primary);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__icon {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__delta--none {
  color: rgba(255, 255, 255, 0.5);
}
.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;
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-kpi__hint {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-grey-500);
}
.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 {
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  color: var(--admin-text-muted);
}
.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: ui-monospace, SFMono-Regular, Menlo, monospace;
  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-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: ui-monospace, SFMono-Regular, Menlo, monospace;
  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: ui-monospace, SFMono-Regular, Menlo, monospace;
  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));
}
@media (max-width: 1100px) {
  .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: 992px) {
  .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: 560px) {
  .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-features {
  max-width: 800px;
  /* --- 기능 목록 (플랫 행) ----------------------------------------- */
}
.admin-features__list {
  list-style: none;
  margin: var(--admin-space) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.admin-features__item {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-sm);
  padding: var(--admin-space) 0;
  border-bottom: 1px solid var(--admin-border-light);
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-features__item:last-child {
  border-bottom: 0;
}
.admin-features__item.is-off .admin-features__item-label,
.admin-features__item.is-off .admin-features__item-desc {
  color: var(--admin-text-muted);
}
.admin-features {
  /* --- 왼쪽 상태 점 ----------------------------------------------- */
}
.admin-features__item-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--admin-grey-300);
  transition: background var(--admin-duration) var(--admin-ease);
}
.is-on .admin-features__item-dot {
  background: var(--admin-success);
}
.is-core .admin-features__item-dot {
  background: var(--admin-primary);
}
.admin-features__item-info {
  flex: 1 1 auto;
  min-width: 0;
}
.admin-features__item-label {
  display: inline-block;
  margin-right: var(--admin-space-2xs);
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-text);
  transition: color var(--admin-duration) var(--admin-ease);
}
.admin-features__item-key {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  background: var(--admin-grey-100);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  vertical-align: middle;
}
.admin-features__item-desc {
  margin: 2px 0 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.55;
  transition: color var(--admin-duration) var(--admin-ease);
}
.admin-features__item-routes {
  margin: var(--admin-space-2xs) 0 0;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-features__item-routes code {
  padding: 1px 5px;
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 0.95em;
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
}
.admin-features__item-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-top: 2px;
}
.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;
  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-features__badge--core {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
}
.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);
  text-align: center;
}
.admin-features {
  /* --- 시스템(코어·ungrouped) 섹션 --------------------------------- */
}
.admin-features__system {
  margin-top: var(--admin-space-xl);
  padding-top: var(--admin-space);
  border-top: 1px solid var(--admin-border-light);
}
.admin-features__system-title {
  margin: 0 0 var(--admin-space-2xs);
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 992px) {
  .admin-features__item {
    flex-wrap: wrap;
  }
  .admin-features__item-toggle {
    width: 100%;
    padding-top: var(--admin-space-2xs);
  }
}

.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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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__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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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: #fffbeb;
  border: 1px solid #fcd34d;
  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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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 {
  background: var(--admin-error);
  border-color: var(--admin-error);
  color: var(--admin-on-primary);
}
.admin-ops__card--danger .admin-ops__card-btn:hover {
  background: var(--admin-error-hover);
  border-color: var(--admin-error-hover);
}
.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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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: #fffbeb !important;
}
.admin-ops__row--pending:hover {
  background: #fef3c7 !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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
}
.admin-ops__devsync-arrow {
  color: var(--admin-text-muted);
  font-size: 1rem;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .admin-ops__devsync-arrow {
    display: none;
  }
}
.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);
}

.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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 0.9em;
  color: var(--admin-text-muted);
}

.admin-error-logs__summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--admin-space);
  margin-bottom: var(--admin-space-lg);
}
@media (max-width: 991px) {
  .admin-error-logs__summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .admin-error-logs__summary-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-error-logs__card {
  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);
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
}
.admin-error-logs__card--danger {
  border-left: 3px solid var(--admin-error);
  background: var(--admin-error-bg);
}
.admin-error-logs__card--danger .admin-error-logs__card-value {
  color: var(--admin-error);
}
.admin-error-logs__card--security {
  border-left: 3px solid var(--admin-warn);
  background: var(--admin-warn-bg);
}
.admin-error-logs__card--security .admin-error-logs__card-value {
  color: var(--admin-warn);
}

.admin-error-logs__card-label {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-error-logs__card-value {
  font-size: var(--admin-fs-xl);
  font-weight: 700;
  color: var(--admin-text);
  font-variant-numeric: tabular-nums;
}

.admin-error-logs__tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 2px solid var(--admin-border-light);
  margin-bottom: var(--admin-space-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-error-logs__tabs::-webkit-scrollbar {
  display: none;
}

.admin-error-logs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-sm) var(--admin-space);
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  color: var(--admin-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.admin-error-logs__tab:hover {
  color: var(--admin-text);
}
.admin-error-logs__tab--active {
  color: var(--admin-primary);
  border-bottom-color: var(--admin-primary);
  font-weight: 600;
}

.admin-error-logs__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;
  border-radius: 9px;
  background: var(--admin-grey-200);
  color: var(--admin-text-secondary);
}
.admin-error-logs__tab-badge--danger {
  background: var(--admin-error);
  color: #fff;
}

.admin-error-logs__filters {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: var(--admin-space);
  margin-bottom: var(--admin-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
}

.admin-error-logs__filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--admin-space-sm);
}

.admin-error-logs__field {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
}
.admin-error-logs__field span {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-text-secondary);
}
.admin-error-logs__field .admin-input {
  min-width: 8rem;
}
.admin-error-logs__field--wide .admin-input {
  min-width: 14rem;
}
.admin-error-logs__field--narrow .admin-input {
  max-width: 6rem;
}

.admin-error-logs__filter-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--admin-space-xs);
  padding-bottom: 1px;
}

.admin-error-logs__result-count {
  margin: 0 0 var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}
.admin-error-logs__result-count strong {
  color: var(--admin-text);
}

.admin-error-logs__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
  margin-bottom: var(--admin-space-lg);
}

.admin-error-logs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-fs-sm);
  background: var(--admin-card-bg);
}
.admin-error-logs__table th, .admin-error-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-error-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-error-logs__table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-error-logs__table tbody tr:hover {
  background: var(--admin-grey-50);
}

.admin-error-logs__row--security {
  background: rgba(var(--admin-error-rgb, 220 38 38), 0.07) !important;
  border-left: 3px solid var(--admin-error);
}

.admin-error-logs__row--danger {
  background: rgba(var(--admin-error-rgb, 220 38 38), 0.03) !important;
}

.admin-error-logs__row--warning {
  background: rgba(var(--admin-warn-rgb, 234 179 8), 0.05) !important;
}

.admin-error-logs__col-time {
  width: 140px;
  white-space: nowrap;
  color: var(--admin-text-secondary);
  font-variant-numeric: tabular-nums;
}

.admin-error-logs__col-level {
  width: 90px;
  white-space: nowrap;
}

.admin-error-logs__col-event {
  width: 180px;
}

.admin-error-logs__col-message {
  min-width: 180px;
}

.admin-error-logs__col-http {
  width: 200px;
}

.admin-error-logs__col-ip {
  width: 130px;
  white-space: nowrap;
}

.admin-error-logs__col-status {
  width: 80px;
  white-space: nowrap;
}

.admin-error-logs__col-action {
  width: 56px;
  text-align: right;
}

.admin-error-logs__event-code {
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  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);
  word-break: break-all;
}

.admin-error-logs__message-truncate {
  display: block;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-error-logs__http-method {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-grey-200);
  color: var(--admin-text-secondary);
  vertical-align: middle;
  margin-right: 3px;
}

.admin-error-logs__http-path {
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 0.82em;
  color: var(--admin-text);
}

.admin-error-logs__http-status {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78em;
  padding: 1px 4px;
  border-radius: var(--admin-radius-sm);
  margin-left: 4px;
  vertical-align: middle;
}
.admin-error-logs__http-status--error {
  background: var(--admin-error-bg);
  color: var(--admin-error);
}
.admin-error-logs__http-status--warn {
  background: var(--admin-warn-bg);
  color: var(--admin-warn);
}
.admin-error-logs__http-status--ok {
  background: var(--admin-success-bg, #dcfce7);
  color: var(--admin-success, #16a34a);
}

.admin-error-logs__empty {
  color: var(--admin-text-muted);
}

.admin-error-logs__id {
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 0.9em;
  color: var(--admin-text-muted);
}

.admin-error-log-detail__header {
  margin-bottom: var(--admin-space-lg);
}

.admin-error-log-detail__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space);
  flex-wrap: wrap;
}

.admin-error-log-detail__event {
  font-size: 0.6em;
  font-weight: 400;
  vertical-align: middle;
  margin-left: var(--admin-space-xs);
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  background: var(--admin-grey-100);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  padding: 2px 6px;
}

.admin-error-log-detail__section {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: var(--admin-space) var(--admin-space-lg);
  margin-bottom: var(--admin-space);
}
.admin-error-log-detail__section--resolve {
  border-color: var(--admin-error);
  background: var(--admin-error-bg);
}

.admin-error-log-detail__section-title {
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--admin-space-sm);
}

.admin-error-log-detail__subsection-title {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  margin: var(--admin-space) 0 var(--admin-space-xs);
}

.admin-error-log-detail__dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--admin-space-xs) var(--admin-space);
  font-size: var(--admin-fs-sm);
}
.admin-error-log-detail__dl dt {
  font-weight: 600;
  color: var(--admin-text-secondary);
  padding-top: 2px;
}
.admin-error-log-detail__dl dd {
  margin: 0;
  color: var(--admin-text);
  word-break: break-word;
}
@media (max-width: 767px) {
  .admin-error-log-detail__dl {
    grid-template-columns: 1fr;
  }
  .admin-error-log-detail__dl dt {
    padding-top: 0;
  }
}

.admin-error-log-detail__message {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text);
  word-break: break-word;
  white-space: pre-wrap;
  margin: 0;
}

.admin-error-log-detail__trace-loc {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  margin: 0 0 var(--admin-space-xs);
}
.admin-error-log-detail__trace-loc strong {
  color: var(--admin-text);
}

.admin-error-log-detail__trace-line {
  font-weight: 700;
  color: var(--admin-error);
}

.admin-error-log-detail__trace,
.admin-error-log-detail__json {
  margin: 0;
  padding: var(--admin-space);
  background: var(--admin-grey-900);
  color: var(--admin-grey-100);
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: var(--admin-fs-xs);
  border-radius: var(--admin-radius-sm);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 28rem;
  line-height: 1.6;
}

.admin-error-log-detail__user-agent {
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: var(--admin-fs-xs);
  word-break: break-all;
}

.admin-error-log-detail__resolved-info {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space-sm);
}

.admin-error-log-detail__resolved-meta {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}

.admin-error-log-detail__unresolved-desc {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  margin: 0 0 var(--admin-space-sm);
}

.admin-error-log-detail__resolve-form {
  display: inline-block;
}

.admin-error-log-detail__actor-type {
  display: inline-block;
  font-size: 0.78em;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-grey-200);
  color: var(--admin-text-secondary);
  margin-right: 3px;
}

.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: monospace;
  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: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.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: #d1fae5;
  border-color: #6ee7b7;
}
.rp-checkbox--fixed .rp-checkbox__icon--check {
  color: #059669;
  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: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: var(--admin-radius);
  font-size: var(--admin-fs-body);
  color: #92400e;
  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;
}

.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: 767px) {
  .rp-crud-card__body {
    overflow-x: visible;
  }
  .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;
  }
}

/*# sourceMappingURL=style.css.map */