@charset "UTF-8"; /* 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; } /** * Font @font-face declarations — Home * * - Inter / JetBrains Mono: Google Fonts CSS API (resources/scss/home/abstract/_typography.scss 상단 @import). * - Pretendard Variable: 로컬 호스트 (config/site/lighthouse.php preload). * - Oswald(영문 디스플레이): 자체 호스트 woff2 — assets/fonts/Oswald/oswald.css * (config/site/lighthouse.php vendor_styles 로드 · 적용 유틸 .no-oswald · 토큰 --font-oswald-family). * * 이 파일은 비워둠 — 추가 @font-face 가 필요할 때만 여기 작성. * (이전 프로젝트 HGGOTHIC / typekit 잔재는 제거.) */ :root { /* === semantic === */ --clr-primary-main: var(--clr-primary-900); --clr-primary-hover: var(--clr-primary-700); --clr-primary-accent: var(--clr-accent-500); --clr-common-background: var(--clr-base-white); --clr-common-on-background: var(--clr-base-black); --clr-text-primary: var(--clr-text-base); --clr-text-secondary: var(--clr-text-sub); --clr-text-tertiary: var(--clr-text-aux); --clr-background-paper: var(--clr-bg-page); --clr-background-primary: var(--clr-bg-section); --clr-background-secondary: var(--clr-bg-line); --clr-background-philo: var(--clr-bg-section); } :root { /* === base === */ --clr-base-white: #ffffff; --clr-base-black: #000000; /* === 60% — Background / Base === */ --clr-bg-page: #f4f3ec; /* 메인 배경 */ --clr-bg-section: #ecebe4; /* 섹션 구분용 (시안 섹션 배경) */ --clr-bg-line: #d8d6cc; /* 라인 / 카드 배경 */ /* === 30% — Brand Primary (The H deep indigo navy) === */ --clr-primary-950: #16162f; /* 900 보다 더 깊은 인디고 (quick-contact-bar 등 초저명도 다크 배경) */ --clr-primary-900: #24244f; /* 딥 인디고 - 메인 (헤더/히어로/다크섹션) */ --clr-primary-700: #1c3270; /* 900↔500 브릿지 */ --clr-primary-500: #0c388d; /* 로열 블루 - 링크/hover/info */ --clr-primary-400: #3e5ba6; /* 로열 tint */ --clr-primary-50: #eaedf6; /* 옅은 블루 tint */ /* gradient shorthand */ --clr-primary-gradient: 90deg, #24244f, #0c388d; /* === 10% — Accent / Point (The H chic gold) === */ --clr-accent-300: #e0b877; /* 포인트 - Accent 라이트 (eyebrow/on-dark) */ --clr-accent-500: #c59141; /* 포인트 - Accent 메인 */ --clr-accent-700: #9c6e2e; /* 포인트 hover (insight meta) */ /* === Text === */ --clr-text-base: #11121a; /* 메인 텍스트 */ --clr-text-sub: #5f6170; /* 서브 텍스트 */ --clr-text-aux: #8d8b84; /* 보조 텍스트 */ /* === UI (Border / Hover) === */ --clr-ui-border: #cdc9bc; --clr-ui-hover-bg: #f6f4ed; /* === Grayscale (warm — 새 bg 계열 정렬) === */ --clr-gray-50: #f6f4ed; --clr-gray-100: #ede9df; --clr-gray-200: #ddd9cc; --clr-gray-300: #cdc9bc; --clr-gray-400: #a7a197; --clr-gray-500: #77756f; --clr-gray-600: #5f6170; --clr-gray-700: #2e2e55; /* 인디고 언더톤 다크 컨테이너 */ --clr-gray-800: #24244f; /* 인디고 메인 정렬 */ --clr-gray-900: #11121a; /* === Semantic status === */ --clr-status-success: #16a34a; --clr-status-warning: #d97706; --clr-status-error: #dc2626; --clr-status-info: var(--clr-primary-500); /* === Event category chips === */ --clr-chip-seminar: #24244f; --clr-chip-workshop: #1c3270; --clr-chip-symposium: #0c388d; --clr-chip-education: #16a34a; --clr-chip-special: #dc2626; } /* Inter + JetBrains Mono — 로컬 호스트 (assets/lib/fonts/Inter|JetBrainsMono). * Pretendard 도 로컬 호스트 (config/site/lighthouse.php preload). * Display 도 sans(Inter ExtraBold) 단일 패밀리 — 2026-05-26 Fraunces 채택 reversal 결정. * 폰트 로드: lighthouse.php vendor_styles → inter.css / jetbrains-mono.css */ /** * Typography tokens — Home * 콤보: F0. Inter (Sans + Display) + Pretendard (KR) + JetBrains Mono * 정본: 본 파일. 가이드: docs/02-variables/brand-guide.md * * 규칙(CLAUDE.md 절대규칙 #11): * - SCSS 컴포넌트에서 font-size 직접 지정 금지. var(--*-fs) 만 사용. * - 페이지·뷰 마크업에서 .no-display-* / .no-heading-* / .no-body-* 유틸리티 클래스 사용. */ :root { /* === Font family — 정본 토큰 (단일 sans 패밀리) === */ --font-sans-family: "Inter", "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", system-ui, sans-serif; --font-display-family: var(--font-sans-family); /* Display 도 Inter 통일 */ /* Oswald — 영문 디스플레이 전용(마키·솔루션 행 타이틀). 한글은 Pretendard 로 폴백. * 자체 호스트: assets/fonts/Oswald/oswald.css · 적용 유틸: .no-oswald */ --font-oswald-family: "Oswald", "Pretendard Variable", "Pretendard", var(--font-sans-family); --font-mono-family: "JetBrains Mono", "SF Mono", "Cascadia Code", "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace; /* Letter-spacing */ --tracking-display: -0.015em; --tracking-heading: -0.01em; --tracking-body: 0em; --tracking-caps: 0.06em; /* small-caps·overline */ /* === Legacy family alias — 기존 페이지·컴포넌트 호환 === */ --family-primary: var(--font-sans-family); --family-display: var(--font-display-family); --family-mono: var(--font-mono-family); --family-pretendard: var(--font-sans-family); --family-hggothic: var(--font-sans-family); /* 이전 프로젝트 잔재. sans 로 흡수 */ /* === Display (히어로/대제목) — Inter ExtraBold === */ --display-xs-fs: clamp(2.8rem, 2.8478964401vw + 1.732038835rem, 7.2rem); --display-sm-fs: clamp(3.2rem, 3.3656957929vw + 1.9378640777rem, 8.4rem); --display-md-fs: clamp(3.6rem, 4.7896440129vw + 1.8038834951rem, 11rem); --display-lg-fs: clamp(4rem, 5.1779935275vw + 2.0582524272rem, 12rem); --display-xl-fs: clamp(4.8rem, 6.4724919094vw + 2.372815534rem, 14.8rem); --display-xs-lh: 1.12; --display-sm-lh: 1.08; --display-md-lh: 1.04; --display-lg-lh: 1.00; --display-xl-lh: 0.98; /* Inter 600 (SemiBold) — display 임팩트. 본문 위계는 heading 700 으로. */ --display-xs-fw: 600; --display-sm-fw: 600; --display-md-fw: 600; --display-lg-fw: 600; --display-xl-fw: 600; /* === Heading (섹션 타이틀) — Inter Sans === */ --heading-xs-fs: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); --heading-sm-fs: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem); --heading-md-fs: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); --heading-bl-fs: clamp(2rem, 1.0355987055vw + 1.6116504854rem, 3.6rem); --heading-lg-fs: clamp(2.2rem, 1.2944983819vw + 1.7145631068rem, 4.2rem); --heading-xl-fs: clamp(2.4rem, 2.3300970874vw + 1.5262135922rem, 6rem); --heading-xs-lh: 1.36; --heading-sm-lh: 1.32; --heading-md-lh: 1.28; --heading-bl-lh: 1.24; --heading-lg-lh: 1.20; --heading-xl-lh: 1.12; --heading-xs-fw: 600; --heading-sm-fw: 600; --heading-md-fw: 600; --heading-bl-fw: 600; --heading-lg-fw: 600; --heading-xl-fw: 600; /* === Body — Inter Sans (한글: Pretendard) === */ --body-xs-fs: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem); --body-sm-fs: clamp(1.3rem, 0.1941747573vw + 1.227184466rem, 1.6rem); --body-md-fs: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem); /* 기본 본문·설명글 default */ --body-lg-fs: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem); /* 강조·라벨 */ --body-xl-fs: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem); /* iOS Safari form-control auto zoom 방지용 고정 최소 크기. */ --form-control-fs: 1.6rem; --body-xs-lh: 1.55; --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; /* === Overline / eyebrow (섹션 소문구 라벨) — Inter Medium, 캡스 === */ --overline-fs: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); --overline-lh: 1.4; --overline-fw: 500; /* === Mono (캡션·다이어그램 라벨·overline) === */ --mono-xs-fs: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem); --mono-sm-fs: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem); /* === Decorative (Marquee Whisper / I3 — Inter ExtraBold, 매우 큼) === */ --deco-marquee-fs: clamp(9.6rem, 5.9546925566vw + 7.3669902913rem, 18.8rem); /* Decorative wordmark (WHO WE ARE §signature — Oswald, 뷰포트 폭 채우는 초대형). * scale(1) 에서 "THE H INSIGHT LAB" 한 줄이 컨테이너 폭에 맞고, JS 가 scale 확대→축소. */ --deco-wordmark-fs: clamp(6.4rem, 10.0970873786vw + 2.613592233rem, 22rem); } /** * Motion tokens — Home * 정본: 본 파일. JS는 resources/ts/home/global/MotionTokens.ts 동일 값. * 사용: SCSS `transition: transform var(--dur-base) var(--ease-out-quart);` * JS `gsap.to(el, { duration: 0.88, ease: 'expo.out' })` ← MotionTokens.ts 참조 * * 가이드 문서: docs/00-overview/goals.md "차분함 80% : 임팩트 20%" * workspace/guides/02-스타일-가이드.md §8 */ :root { /* === Duration === */ --dur-instant: 100ms; /* hover state 토글, focus ring */ --dur-fast: 200ms; /* 버튼 press, chip toggle */ --dur-base: 320ms; /* 카드 hover, 색 전환 */ --dur-slow: 560ms; /* 모달·드로어 진입 */ --dur-slower: 880ms; /* Hero Display reveal (I1) */ --dur-epic: 1200ms; /* Image mask reveal, scroll-pinned 단계 */ /* === Easing === * 1) out-quart : 기본 진입 (Unseen Studio·기본값) * 2) out-expo : 강한 감속 (Hero Display·시그니처 모먼트) * 3) in-out : 양방향 (드로어·tab 전환) * 4) spring : 미세 바운스 (버튼 한정 — 페이지 본문 금지) * 5) linear : 마키·무한 스크롤 */ --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-linear: linear; /* === Stagger === */ --stagger-base: 60ms; /* I1 Type Mask Reveal 단어 간격 */ --stagger-fast: 30ms; /* I2 Char Stagger 글자 간격 */ --stagger-slow: 120ms; /* 리스트 카드 진입 */ /* === Translate offsets (reveal 초기값) === */ --reveal-offset-sm: 16px; /* body·메타 */ --reveal-offset-md: 40px; /* heading */ --reveal-offset-lg: 80px; /* hero display */ } /* prefers-reduced-motion 가드 — 즉시 최종 상태로 */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; --dur-epic: 0ms; --stagger-base: 0ms; --stagger-fast: 0ms; --stagger-slow: 0ms; --reveal-offset-sm: 0px; --reveal-offset-md: 0px; --reveal-offset-lg: 0px; } } :root { --gutter: 2rem; --header-height: 9.8rem; --header-z-index: 9999; --drawer-z-index: 999; --tran-15: 0.15s ease; --tran-3: 0.3s ease; --family-base: var(--family-hggothic); } @media (max-width: 768px) { :root { --header-height: 4.8rem; } } body, a, button, select, input, textarea, option { font-family: var(--family-base); font-size: var(--body-md-fs); font-weight: var(--body-md-fw); line-height: var(--body-md-lh); word-break: keep-all; } :root { /* === Section spacing (섹션 상·하단 패딩) === */ --section-xs: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem); --section-sm: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem); --section-md: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 9.6rem); --section-lg: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem); --section-xl: clamp(8rem, 10.355987055vw + 4.1165048544rem, 24rem); /* === Border Radius (유동 반경) === */ --radius-xs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem); --radius-sm: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); --radius-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); --radius-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem); --radius-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem); --radius-round: 9999px; /* === Spacing (마진·패딩 기본 단위, fluid 적용) === */ --spacing-xxs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem); --spacing-xs: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); --spacing-sm: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem); --spacing-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); --spacing-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem); --spacing-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem); --spacing-2xl: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem); --spacing-3xl: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem); --spacing-4xl: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem); --spacing-5xl: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem); --spacing-6xl: clamp(8rem, 10.355987055vw + 4.1165048544rem, 24rem); } * { margin: 0; padding: 0; box-sizing: border-box; letter-spacing: -0.02em; } 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: #000; color: #fff; } ::-webkit-scrollbar { background-color: #f7f7f7; width: clamp(0.3rem, 0.1294498382vw + 0.2514563107rem, 0.5rem); } ::-webkit-scrollbar-thumb { background-color: var(--clr-primary-500); border-radius: 5.5rem; } a, button, select, input, textarea, option { font-size: var(--body-sm-fs); } ul, ol, li { list-style: none; } img { width: 100%; object-fit: cover; } a { text-decoration: none; display: block; color: var(--clr-text-base); } 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; } /* === 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); } /* 장식용 초대형 워드마크 (WHO WE ARE §signature 배경 타입) */ .no-deco-wordmark { font-size: var(--deco-wordmark-fs); font-weight: 600; line-height: 0.8; } /* === Heading === */ /* _init.scss 의 `a { font-size: var(--body-sm-fs) }` reset이 heading 자식 를 덮는 것을 방지. */ .no-heading-xs { font-size: var(--heading-xs-fs); font-weight: var(--heading-xs-fw); line-height: var(--heading-xs-lh); } .no-heading-xs a { font-size: inherit; } .no-heading-sm { font-size: var(--heading-sm-fs); font-weight: var(--heading-sm-fw); line-height: var(--heading-sm-lh); } .no-heading-sm a { font-size: inherit; } .no-heading-md { font-size: var(--heading-md-fs); font-weight: var(--heading-md-fw); line-height: var(--heading-md-lh); } .no-heading-md a { font-size: inherit; } .no-heading-bl { font-size: var(--heading-bl-fs); font-weight: var(--heading-bl-fw); line-height: var(--heading-bl-lh); } .no-heading-bl a { font-size: inherit; } .no-heading-lg { font-size: var(--heading-lg-fs); font-weight: var(--heading-lg-fw); line-height: var(--heading-lg-lh); } .no-heading-lg a { font-size: inherit; } .no-heading-xl { font-size: var(--heading-xl-fs); font-weight: var(--heading-xl-fw); line-height: var(--heading-xl-lh); } .no-heading-xl a { font-size: inherit; } /* === 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); } /* === 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); } /* === 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-container-xxl { max-width: 1920px; width: 100%; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .no-container-xl { max-width: 1640px; width: 100%; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .no-container-bl { max-width: 1320px; 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-content { max-width: 880px; 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-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-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-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-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-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-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-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-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-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-6xl { margin: var(--spacing-6xl); } .no-mg-6xl--l { margin-left: var(--spacing-6xl); } .no-mg-6xl--r { margin-right: var(--spacing-6xl); } .no-mg-6xl--t { margin-top: var(--spacing-6xl); } .no-mg-6xl--b { margin-bottom: var(--spacing-6xl); } .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-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-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-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-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-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-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-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-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-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-6xl { padding: var(--spacing-6xl); } .no-pd-6xl--l { padding-left: var(--spacing-6xl); } .no-pd-6xl--r { padding-right: var(--spacing-6xl); } .no-pd-6xl--t { padding-top: var(--spacing-6xl); } .no-pd-6xl--b { padding-bottom: var(--spacing-6xl); } .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); } .no-bg { /* === 시맨틱 배경 토큰 (섹션 prop $bgClass 용) === */ } .no-bg--paper { background: var(--clr-background-paper); } .no-bg--section { background: var(--clr-background-primary); } .no-bg--secondary { background: var(--clr-background-secondary); } .no-bg--brand { background: var(--clr-primary-900); } .no-bg--accent { background: var(--clr-accent-500); } /* === 글자색 유틸 (섹션 prop $textClass 용) === */ .no-text--primary { color: var(--clr-text-primary); } .no-text--secondary { color: var(--clr-text-secondary); } .no-text--tertiary { color: var(--clr-text-tertiary); } .no-text--inverse { color: var(--clr-base-white); } body.is-scrolling *:not([data-aos]):not([data-aos] *):not(.no-auto-cover):not(.no-auto-cover *) { transition: none !important; } .seo-headline { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100001; padding: 0.8rem 1.6rem; background: #000; color: #fff; font-size: var(--body-sm-fs); text-decoration: underline; } .skip-link:focus { left: 0; } .--blind { position: absolute; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; } .--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; } .--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; } .--tac { text-align: center; } .--tal { text-align: left; } .--tar { text-align: right; } .wh { color: #fff; } .gc { color: var(--clr-gray-50); } .op9 { opacity: 0.9; } .op8 { opacity: 0.8; } .op7 { opacity: 0.7; } .op6 { opacity: 0.6; } .op5 { opacity: 0.5; } .op4 { opacity: 0.4; } .op3 { opacity: 0.3; } .op2 { opacity: 0.2; } .op1 { opacity: 0.1; } .wh9 { color: var(--clr-gray-900); } .wh8 { color: var(--clr-gray-800); } .wh7 { color: var(--clr-gray-700); } .wh6 { color: var(--clr-gray-600); } .wh5 { color: var(--clr-gray-500); } .wh4 { color: var(--clr-gray-400); } .bc { color: var(--clr-primary-500); } .sc { color: var(--clr-secondary-500); } .bg { background-color: var(--clr-gray-50); } .bullet { display: flex; } .bullet::before { content: ""; width: 0.6rem; height: 0.6rem; min-width: 0.6rem; min-height: 0.6rem; border-radius: 99999px; left: 0; top: 1rem; margin-right: 1rem; position: relative; display: block; background-color: #b5b5b5; } .imgbg { background-position: center; background-size: cover; background-repeat: no-repeat; } .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .full-bg::before { content: ""; width: 100%; height: 100%; left: 0; top: 0; position: absolute; } .no-en { font-family: "Oaks", "oaks", var(--family-base); } .no-oswald { font-family: var(--font-oswald-family); } .reveal-up .reveal-up__mask { display: block; overflow: hidden; padding-bottom: 1rem; } .reveal-up .reveal-up__text { display: block; will-change: transform; } @media (max-width: 768px) { br { display: none; } br.no { display: block; } } [dir=rtl] .no-container-xl, [dir=rtl] .no-container-xl { direction: rtl; text-align: start; } [dir=rtl] .no-nav__list { flex-direction: row-reverse; } [dir=rtl] .no-lang-switch__dropdown { right: auto; left: 0; } [dir=rtl] .no-btn > i:first-child { margin-right: 0; margin-left: 0.4em; } :root { /* === base === */ --clr-base-white: #fff; --clr-base-black: #000; --clr-text-base: #000000; --clr-text-desc: #999999; /* === primary === */ --clr-primary-50: #fff6ee; --clr-primary-700: #ff8e24; --clr-primary-900: #ff7b00; --clr-secondary-900: #e60000; --clr-primary-main: var(--clr-primary-900); /* === background === */ --clr-white-bg-50: #f7f7f7; --clr-white-bg-100: #dddddd; --clr-white-bg-200: #dedede; --clr-black-bg-50: #111111; --clr-black-bg-100: #222222; --clr-black-bg-200: #333333; --clr-black-bg-300: #333333; --clr-black-bg-400: #444444; --clr-black-bg-500: #555555; --clr-black-bg-600: #666666; --clr-black-bg-700: #777777; --clr-black-bg-800: #888888; --clr-black-bg-900: #999999; /* === utils === */ --clr-gray-50: #f9f9f9; --clr-gray-100: #ddd; --clr-gray-200: #dedede; --clr-gray-300: #cccccc; --clr-gray-400: #a7a7a7; --clr-gray-500: #868686; --clr-gray-600: #5f5f5f; --clr-gray-700: #4c4c4c; --clr-gray-800: #222222; --clr-gray-900: #000000; --clr-white-alpha-10: rgba(255, 255, 255, 0.1); --clr-white-alpha-20: rgba(255, 255, 255, 0.2); --clr-white-alpha-30: rgba(255, 255, 255, 0.3); --clr-white-alpha-40: rgba(255, 255, 255, 0.4); --clr-white-alpha-50: rgba(255, 255, 255, 0.5); } .--text-white { color: #fff; } .--text-gray-900 { color: var(--clr-gray-900); } .--text-gray-800 { color: var(--clr-gray-800); } .--text-gray-700 { color: var(--clr-gray-700); } .--text-gray-600 { color: var(--clr-gray-600); } .--text-gray-500 { color: var(--clr-gray-500); } .--text-gray-400 { color: var(--clr-gray-400); } .--text-gray-300 { color: var(--clr-gray-300); } .--text-gray-200 { color: var(--clr-gray-200); } .--text-gray-100 { color: var(--clr-gray-100); } .--text-gray-50 { color: var(--clr-gray-50); } .--text-primary { color: var(--clr-primary-900); } .--text-secondary { color: var(--clr-secondary-900); } .--bg-transparent { background-color: transparent; } .--bg-white { background-color: var(--clr-base-white); } .--bg-white-50 { background-color: var(--clr-white-bg-50); } .--bg-white-100 { background-color: var(--clr-white-bg-100); } .--bg-white-200 { background-color: var(--clr-white-bg-200); } .--bg-black { background-color: var(--clr-base-black); color: var(--clr-base-white); } .--bg-black-50 { background-color: var(--clr-black-bg-50); color: var(--clr-base-white); } .--bg-black-100 { background-color: var(--clr-black-bg-100); color: var(--clr-base-white); } .--bg-black-200 { background-color: var(--clr-black-bg-200); color: var(--clr-base-white); } .--bg-gray-50 { background-color: var(--clr-gray-50); } .--bg-gray-100 { background-color: var(--clr-gray-100); } .--bg-primary { background-color: var(--clr-primary-900); } .--bg-primary-50 { background-color: var(--clr-primary-50); } .--border-transparent { border-color: transparent; } .--border-gray-100 { border-color: var(--clr-gray-100); } :root { --family-pretendard: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --display-xs-fs: clamp(2.8rem, 2.3300970874vw + 1.9262135922rem, 6.4rem); --display-xs-fw: 700; --display-xs-lh: 1.2; --display-sm-fs: clamp(3.2rem, 2.5889967638vw + 2.2291262136rem, 7.2rem); --display-sm-fw: 700; --display-sm-lh: 1.2; --display-md-fs: clamp(3.6rem, 3.3656957929vw + 2.3378640777rem, 8.8rem); --display-md-fw: 700; --display-md-lh: 1.15; --display-lg-fs: clamp(4rem, 3.6245954693vw + 2.640776699rem, 9.6rem); --display-lg-fw: 700; --display-lg-lh: 1.1; --display-xl-fs: clamp(4.8rem, 5.1779935275vw + 2.8582524272rem, 12.8rem); --display-xl-fw: 700; --display-xl-lh: 1.1; --no-display-xs-fs: clamp(2.8rem, 2.3300970874vw + 1.9262135922rem, 6.4rem); --no-display-xs-fw: 700; --no-display-xs-lh: 1.2; --no-display-sm-fs: clamp(3.2rem, 2.5889967638vw + 2.2291262136rem, 7.2rem); --no-display-sm-fw: 700; --no-display-sm-lh: 1.2; --no-display-md-fs: clamp(3.6rem, 3.3656957929vw + 2.3378640777rem, 8.8rem); --no-display-md-fw: 700; --no-display-md-lh: 1.15; --no-display-lg-fs: clamp(4rem, 3.6245954693vw + 2.640776699rem, 9.6rem); --no-display-lg-fw: 700; --no-display-lg-lh: 1.1; --no-display-xl-fs: clamp(4.8rem, 5.1779935275vw + 2.8582524272rem, 12.8rem); --no-display-xl-fw: 700; --no-display-xl-lh: 1.1; --heading-xs-fs: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); --heading-xs-fw: 600; --heading-xs-lh: 1.4; --heading-sm-fs: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem); --heading-sm-fw: 600; --heading-sm-lh: 1.4; --heading-md-fs: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); --heading-md-fw: 600; --heading-md-lh: 1.4; --heading-lg-fs: clamp(2.2rem, 1.1650485437vw + 1.7631067961rem, 4rem); --heading-lg-fw: 600; --heading-lg-lh: 1.3; --heading-xl-fs: clamp(2.2rem, 1.6828478964vw + 1.5689320388rem, 4.8rem); --heading-xl-fw: 600; --heading-xl-lh: 1.3; --no-heading-xs-fs: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); --no-heading-xs-fw: 600; --no-heading-xs-lh: 1.4; --no-heading-sm-fs: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem); --no-heading-sm-fw: 600; --no-heading-sm-lh: 1.4; --no-heading-md-fs: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); --no-heading-md-fw: 600; --no-heading-md-lh: 1.4; --no-heading-lg-fs: clamp(2.2rem, 1.1650485437vw + 1.7631067961rem, 4rem); --no-heading-lg-fw: 600; --no-heading-lg-lh: 1.3; --no-heading-xl-fs: clamp(2.2rem, 1.6828478964vw + 1.5689320388rem, 4.8rem); --no-heading-xl-fw: 600; --no-heading-xl-lh: 1.3; --body-xs-fs: clamp(1.2rem, 0vw + 1.2rem, 1.2rem); --body-xs-fw: 400; --body-xs-lh: 1.6; --body-sm-fs: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem); --body-sm-fw: 400; --body-sm-lh: 1.6; --body-md-fs: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem); --body-md-fw: 400; --body-md-lh: 1.6; --body-lg-fs: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.8rem); --body-lg-fw: 400; --body-lg-lh: 1.6; --body-xl-fs: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); --body-xl-fw: 400; --body-xl-lh: 1.6; --no-body-xs-fs: clamp(1.2rem, 0vw + 1.2rem, 1.2rem); --no-body-xs-fw: 400; --no-body-xs-lh: 1.6; --no-body-sm-fs: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem); --no-body-sm-fw: 400; --no-body-sm-lh: 1.6; --no-body-md-fs: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem); --no-body-md-fw: 400; --no-body-md-lh: 1.6; --no-body-lg-fs: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.8rem); --no-body-lg-fw: 400; --no-body-lg-lh: 1.6; --no-body-xl-fs: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); --no-body-xl-fw: 400; --no-body-xl-lh: 1.6; } :root { --gutter: 2.4rem; --header-height: 8rem; --header-z-index: 1000; --drawer-z-index: 999; --tran-15: 0.15s ease-in-out; --tran-3: 0.3s ease-in-out; --family-base: var(--family-pretendard); } @media (max-width: 768px) { :root { --header-height: 7rem; } } :root { /* === Section spacing (섹션 상·하단 패딩) === */ --section-none: clamp(0rem, 0vw + 0rem, 0rem); --section-xs: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem); --section-sm: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem); --section-md: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem); --section-lg: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem); --section-xl: clamp(8rem, 10.355987055vw + 4.1165048544rem, 24rem); /* === Border Radius (유동 반경) === */ --radius-xs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem); --radius-sm: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); --radius-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); --radius-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem); --radius-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem); --radius-round: 9999px; /* === Spacing (마진·패딩 기본 단위, fluid 적용) === */ --spacing-xxs: clamp(0.4rem, 0vw + 0.4rem, 0.4rem); --spacing-xs: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem); --spacing-sm: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); --spacing-md: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); --spacing-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem); --spacing-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem); --spacing-2xl: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem); --spacing-3xl: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem); --spacing-4xl: clamp(6.4rem, 1.0355987055vw + 6.0116504854rem, 8rem); --spacing-5xl: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem); } .tp-section-none { padding-top: var(--section-none); padding-bottom: var(--section-none); } .tp-section-xs { padding-top: var(--section-xs); padding-bottom: var(--section-xs); } .tp-section-sm { padding-top: var(--section-sm); padding-bottom: var(--section-sm); } .tp-section-md { padding-top: var(--section-md); padding-bottom: var(--section-md); } .tp-section-lg { padding-top: var(--section-lg); padding-bottom: var(--section-lg); } .tp-section-xl { padding-top: var(--section-xl); padding-bottom: var(--section-xl); } .tp-mg-xxs { margin: var(--spacing-xxs); } .tp-pd-xxs { padding: var(--spacing-xxs); } .tp-mg-xxs--x { margin-left: var(--spacing-xxs); margin-right: var(--spacing-xxs); } .tp-mg-xxs--y { margin-top: var(--spacing-xxs); margin-bottom: var(--spacing-xxs); } .tp-pd-xxs--x { padding-left: var(--spacing-xxs); padding-right: var(--spacing-xxs); } .tp-pd-xxs--y { padding-top: var(--spacing-xxs); padding-bottom: var(--spacing-xxs); } .tp-mg-xxs--l { margin-left: var(--spacing-xxs); } .tp-pd-xxs--l { padding-left: var(--spacing-xxs); } .tp-mg-xxs--r { margin-right: var(--spacing-xxs); } .tp-pd-xxs--r { padding-right: var(--spacing-xxs); } .tp-mg-xxs--t { margin-top: var(--spacing-xxs); } .tp-pd-xxs--t { padding-top: var(--spacing-xxs); } .tp-mg-xxs--b { margin-bottom: var(--spacing-xxs); } .tp-pd-xxs--b { padding-bottom: var(--spacing-xxs); } .tp-mg-xs { margin: var(--spacing-xs); } .tp-pd-xs { padding: var(--spacing-xs); } .tp-mg-xs--x { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); } .tp-mg-xs--y { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); } .tp-pd-xs--x { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); } .tp-pd-xs--y { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); } .tp-mg-xs--l { margin-left: var(--spacing-xs); } .tp-pd-xs--l { padding-left: var(--spacing-xs); } .tp-mg-xs--r { margin-right: var(--spacing-xs); } .tp-pd-xs--r { padding-right: var(--spacing-xs); } .tp-mg-xs--t { margin-top: var(--spacing-xs); } .tp-pd-xs--t { padding-top: var(--spacing-xs); } .tp-mg-xs--b { margin-bottom: var(--spacing-xs); } .tp-pd-xs--b { padding-bottom: var(--spacing-xs); } .tp-mg-sm { margin: var(--spacing-sm); } .tp-pd-sm { padding: var(--spacing-sm); } .tp-mg-sm--x { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); } .tp-mg-sm--y { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .tp-pd-sm--x { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); } .tp-pd-sm--y { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); } .tp-mg-sm--l { margin-left: var(--spacing-sm); } .tp-pd-sm--l { padding-left: var(--spacing-sm); } .tp-mg-sm--r { margin-right: var(--spacing-sm); } .tp-pd-sm--r { padding-right: var(--spacing-sm); } .tp-mg-sm--t { margin-top: var(--spacing-sm); } .tp-pd-sm--t { padding-top: var(--spacing-sm); } .tp-mg-sm--b { margin-bottom: var(--spacing-sm); } .tp-pd-sm--b { padding-bottom: var(--spacing-sm); } .tp-mg-md { margin: var(--spacing-md); } .tp-pd-md { padding: var(--spacing-md); } .tp-mg-md--x { margin-left: var(--spacing-md); margin-right: var(--spacing-md); } .tp-mg-md--y { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); } .tp-pd-md--x { padding-left: var(--spacing-md); padding-right: var(--spacing-md); } .tp-pd-md--y { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); } .tp-mg-md--l { margin-left: var(--spacing-md); } .tp-pd-md--l { padding-left: var(--spacing-md); } .tp-mg-md--r { margin-right: var(--spacing-md); } .tp-pd-md--r { padding-right: var(--spacing-md); } .tp-mg-md--t { margin-top: var(--spacing-md); } .tp-pd-md--t { padding-top: var(--spacing-md); } .tp-mg-md--b { margin-bottom: var(--spacing-md); } .tp-pd-md--b { padding-bottom: var(--spacing-md); } .tp-mg-lg { margin: var(--spacing-lg); } .tp-pd-lg { padding: var(--spacing-lg); } .tp-mg-lg--x { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); } .tp-mg-lg--y { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .tp-pd-lg--x { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); } .tp-pd-lg--y { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); } .tp-mg-lg--l { margin-left: var(--spacing-lg); } .tp-pd-lg--l { padding-left: var(--spacing-lg); } .tp-mg-lg--r { margin-right: var(--spacing-lg); } .tp-pd-lg--r { padding-right: var(--spacing-lg); } .tp-mg-lg--t { margin-top: var(--spacing-lg); } .tp-pd-lg--t { padding-top: var(--spacing-lg); } .tp-mg-lg--b { margin-bottom: var(--spacing-lg); } .tp-pd-lg--b { padding-bottom: var(--spacing-lg); } .tp-mg-xl { margin: var(--spacing-xl); } .tp-pd-xl { padding: var(--spacing-xl); } .tp-mg-xl--x { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); } .tp-mg-xl--y { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); } .tp-pd-xl--x { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); } .tp-pd-xl--y { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); } .tp-mg-xl--l { margin-left: var(--spacing-xl); } .tp-pd-xl--l { padding-left: var(--spacing-xl); } .tp-mg-xl--r { margin-right: var(--spacing-xl); } .tp-pd-xl--r { padding-right: var(--spacing-xl); } .tp-mg-xl--t { margin-top: var(--spacing-xl); } .tp-pd-xl--t { padding-top: var(--spacing-xl); } .tp-mg-xl--b { margin-bottom: var(--spacing-xl); } .tp-pd-xl--b { padding-bottom: var(--spacing-xl); } .tp-mg-2xl { margin: var(--spacing-2xl); } .tp-pd-2xl { padding: var(--spacing-2xl); } .tp-mg-2xl--x { margin-left: var(--spacing-2xl); margin-right: var(--spacing-2xl); } .tp-mg-2xl--y { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); } .tp-pd-2xl--x { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); } .tp-pd-2xl--y { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); } .tp-mg-2xl--l { margin-left: var(--spacing-2xl); } .tp-pd-2xl--l { padding-left: var(--spacing-2xl); } .tp-mg-2xl--r { margin-right: var(--spacing-2xl); } .tp-pd-2xl--r { padding-right: var(--spacing-2xl); } .tp-mg-2xl--t { margin-top: var(--spacing-2xl); } .tp-pd-2xl--t { padding-top: var(--spacing-2xl); } .tp-mg-2xl--b { margin-bottom: var(--spacing-2xl); } .tp-pd-2xl--b { padding-bottom: var(--spacing-2xl); } .tp-mg-3xl { margin: var(--spacing-3xl); } .tp-pd-3xl { padding: var(--spacing-3xl); } .tp-mg-3xl--x { margin-left: var(--spacing-3xl); margin-right: var(--spacing-3xl); } .tp-mg-3xl--y { margin-top: var(--spacing-3xl); margin-bottom: var(--spacing-3xl); } .tp-pd-3xl--x { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); } .tp-pd-3xl--y { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); } .tp-mg-3xl--l { margin-left: var(--spacing-3xl); } .tp-pd-3xl--l { padding-left: var(--spacing-3xl); } .tp-mg-3xl--r { margin-right: var(--spacing-3xl); } .tp-pd-3xl--r { padding-right: var(--spacing-3xl); } .tp-mg-3xl--t { margin-top: var(--spacing-3xl); } .tp-pd-3xl--t { padding-top: var(--spacing-3xl); } .tp-mg-3xl--b { margin-bottom: var(--spacing-3xl); } .tp-pd-3xl--b { padding-bottom: var(--spacing-3xl); } .tp-mg-4xl { margin: var(--spacing-4xl); } .tp-pd-4xl { padding: var(--spacing-4xl); } .tp-mg-4xl--x { margin-left: var(--spacing-4xl); margin-right: var(--spacing-4xl); } .tp-mg-4xl--y { margin-top: var(--spacing-4xl); margin-bottom: var(--spacing-4xl); } .tp-pd-4xl--x { padding-left: var(--spacing-4xl); padding-right: var(--spacing-4xl); } .tp-pd-4xl--y { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); } .tp-mg-4xl--l { margin-left: var(--spacing-4xl); } .tp-pd-4xl--l { padding-left: var(--spacing-4xl); } .tp-mg-4xl--r { margin-right: var(--spacing-4xl); } .tp-pd-4xl--r { padding-right: var(--spacing-4xl); } .tp-mg-4xl--t { margin-top: var(--spacing-4xl); } .tp-pd-4xl--t { padding-top: var(--spacing-4xl); } .tp-mg-4xl--b { margin-bottom: var(--spacing-4xl); } .tp-pd-4xl--b { padding-bottom: var(--spacing-4xl); } .tp-mg-5xl { margin: var(--spacing-5xl); } .tp-pd-5xl { padding: var(--spacing-5xl); } .tp-mg-5xl--x { margin-left: var(--spacing-5xl); margin-right: var(--spacing-5xl); } .tp-mg-5xl--y { margin-top: var(--spacing-5xl); margin-bottom: var(--spacing-5xl); } .tp-pd-5xl--x { padding-left: var(--spacing-5xl); padding-right: var(--spacing-5xl); } .tp-pd-5xl--y { padding-top: var(--spacing-5xl); padding-bottom: var(--spacing-5xl); } .tp-mg-5xl--l { margin-left: var(--spacing-5xl); } .tp-pd-5xl--l { padding-left: var(--spacing-5xl); } .tp-mg-5xl--r { margin-right: var(--spacing-5xl); } .tp-pd-5xl--r { padding-right: var(--spacing-5xl); } .tp-mg-5xl--t { margin-top: var(--spacing-5xl); } .tp-pd-5xl--t { padding-top: var(--spacing-5xl); } .tp-mg-5xl--b { margin-bottom: var(--spacing-5xl); } .tp-pd-5xl--b { padding-bottom: var(--spacing-5xl); } .tp-radius-xs { border-radius: var(--radius-xs); } .tp-radius-sm { border-radius: var(--radius-sm); } .tp-radius-md { border-radius: var(--radius-md); } .tp-radius-lg { border-radius: var(--radius-lg); } .tp-radius-xl { border-radius: var(--radius-xl); } .tp-radius-round { border-radius: var(--radius-round); } :root { /* === Brand Primary (The H deep indigo navy) === */ --clr-primary-900: #24244f; --clr-primary-700: #1c3270; --clr-primary-500: #0c388d; --clr-primary-400: #3e5ba6; --clr-primary-50: #eaedf6; --clr-primary-main: var(--clr-primary-900); /* vendor "secondary" 슬롯 = THE H accent(시크 골드) 로 매핑 */ --clr-secondary-900: #c59141; /* === Accent (The H chic gold) === */ --clr-accent-300: #e0b877; --clr-accent-500: #c59141; --clr-accent-700: #9c6e2e; /* === Text (vendor 가 --clr-text-base 를 #000 으로 덮어씀 → THE H 값 복원) === */ --clr-text-base: #11121a; --clr-text-sub: #5f6170; --clr-text-aux: #8d8b84; /* === Grayscale (vendor 가 중립 회색으로 덮어씀 → THE H warm/indigo 복원) === */ --clr-gray-50: #f6f4ed; --clr-gray-100: #ede9df; --clr-gray-200: #ddd9cc; --clr-gray-300: #cdc9bc; --clr-gray-400: #a7a197; --clr-gray-500: #77756f; --clr-gray-600: #5f6170; --clr-gray-700: #2e2e55; --clr-gray-800: #24244f; --clr-gray-900: #11121a; } /* 다크 네이비 2단 푸터 (2026-06-29 시안). * 배경 = .no-bg--brand 유틸(var(--clr-primary-900)). 타이포 위계 = HTML no-* 유틸. * 본 파일은 레이아웃(flex·gap)과 다크 배경용 색상만 담당(절대 규칙 #17). */ .site-footer { color: var(--clr-base-white); } .site-footer__inner { padding-top: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 8.8rem); padding-bottom: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 8.8rem); } .site-footer__main { display: flex; justify-content: space-between; gap: clamp(4rem, 5.1779935275vw + 2.0582524272rem, 12rem); } @media (max-width: 1024px) { .site-footer__main { flex-direction: column; gap: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); } } .site-footer__brand { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 8.8rem); min-width: 0; } @media (max-width: 1024px) { .site-footer__brand { justify-content: flex-start; gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem); } } .site-footer__brand-head { display: flex; flex-direction: column; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .site-footer__tagline { margin: 0; } .site-footer__company { display: flex; flex-direction: column; gap: 0.8rem; } .site-footer__info-line { color: rgba(255, 255, 255, 0.56); } .site-footer__info-line span { display: inline; } .site-footer__sep { color: rgba(255, 255, 255, 0.26); margin: 0 0.4rem; } .site-footer__brand-foot { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; flex-wrap: wrap; } @media (max-width: 544px) { .site-footer__brand-foot { gap: 1.6rem; } } .site-footer__logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; } .site-footer__logo img { height: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem); width: auto; object-fit: contain; } .site-footer__socials { display: flex; align-items: center; gap: 1.6rem; list-style: none; padding: 0; margin: 0; } .site-footer__socials a { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.62); font-size: 2rem; transition: color 0.18s ease; } .site-footer__socials a:hover { color: var(--clr-accent-300); } .site-footer__socials svg { width: 2.2rem; height: 2.2rem; fill: currentColor; } .site-footer__socials[hidden] { display: none; } .site-footer__aside { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 8.8rem); flex-shrink: 0; } @media (max-width: 1024px) { .site-footer__aside { justify-content: flex-start; gap: 2.8rem; } } .site-footer__nav-list { display: flex; flex-direction: column; gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); list-style: none; padding: 0; margin: 0; } .site-footer__nav-link { color: var(--clr-base-white); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; transition: color 0.18s ease; } .site-footer__nav-link:hover, .site-footer__nav-link.is-active { color: var(--clr-accent-300); } .site-footer span.site-footer__nav-link { cursor: default; } .site-footer__meta { display: flex; flex-direction: column; gap: 1.2rem; } .site-footer__copy { margin: 0; color: rgba(255, 255, 255, 0.45); } .site-footer__legal { display: flex; align-items: center; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); list-style: none; padding: 0; margin: 0; } .site-footer__legal a { color: rgba(255, 255, 255, 0.56); text-decoration: none; white-space: nowrap; transition: color 0.18s ease; } .site-footer__legal a:hover { color: var(--clr-base-white); } @media (max-width: 544px) { .site-footer__legal { flex-wrap: wrap; gap: 0.8rem 2rem; } } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--header-z-index); width: 100%; pointer-events: none; } .site-header__bar { position: relative; z-index: 1; width: 100%; height: 10rem; pointer-events: auto; display: flex; align-items: stretch; background: var(--clr-base-white); border-bottom: 1px solid var(--clr-ui-border); } @media (max-width: 1024px) { .site-header__bar { height: 8rem; } } @media (max-width: 768px) { .site-header__bar { height: 6rem; } } .site-header__bar-inner { flex: 1 1 0; min-width: 0; max-width: 1640px; margin: 0 auto; padding: 0 clamp(2.4rem, 2.3300970874vw + 1.5262135922rem, 6rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(1.6rem, 2.071197411vw + 0.8233009709rem, 4.8rem); } @media (max-width: 1640px) { .site-header__bar-inner { padding: 0 var(--spacing-lg); } } @media (max-width: 1024px) { .site-header__bar-inner { gap: var(--spacing-md); padding: 0 var(--spacing-md); } } @media (max-width: 768px) { .site-header__bar-inner { grid-template-columns: 1fr auto; padding: 0 var(--spacing-md); } } @media (max-width: 544px) { .site-header__bar-inner { padding: 0 var(--spacing-sm); } } .site-header__logo { display: inline-flex; align-items: center; justify-self: start; height: 100%; } .site-header__logo img { display: block; width: auto; height: auto; max-height: 6rem; /* (= 60px) 10rem 바 안 여백 확보 */ max-width: 18rem; object-fit: contain; } @media (max-width: 1024px) { .site-header__logo img { max-height: 5rem; } } @media (max-width: 768px) { .site-header__logo img { max-height: 4rem; } } @media (max-width: 544px) { .site-header__logo img { max-height: 3.6rem; } } .site-header nav { min-width: 0; } .site-header nav .cms-menu__link { display: inline-flex; align-items: center; white-space: nowrap; } .site-header nav .cms-menu__list--depth-0 { display: flex; align-items: stretch; justify-content: center; } .site-header nav .cms-menu__list--depth-0 > .cms-menu__item { display: flex; align-items: center; } .site-header nav .cms-menu__list--depth-0 > .cms-menu__item.is-dropdown-open .site-header__dropdown, .site-header nav .cms-menu__list--depth-0 > .cms-menu__item:focus-within .site-header__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .site-header nav .cms-menu__list--depth-0 > .cms-menu__item.is-dropdown-open > .cms-menu__link, .site-header nav .cms-menu__list--depth-0 > .cms-menu__item:focus-within > .cms-menu__link { color: var(--clr-text-sub); } .site-header nav .cms-menu__list--depth-0 > .cms-menu__item > .cms-menu__link { position: relative; min-height: 10rem; padding: 0 clamp(1.4rem, 0.7766990291vw + 1.1087378641rem, 2.6rem); font-size: var(--body-md-fs); font-weight: 700; color: var(--clr-text-base); transition: color 0.2s; } .site-header nav .cms-menu__list--depth-0 > .cms-menu__item > .cms-menu__link::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 0.2rem; background: var(--clr-accent-500); opacity: 0; transition: opacity 0.2s; } .site-header nav .cms-menu__list--depth-0 > .cms-menu__item > .cms-menu__link.is-active { color: var(--clr-accent-700); } .site-header nav .cms-menu__list--depth-0 > .cms-menu__item > .cms-menu__link.is-active::after { background: var(--clr-accent-500); opacity: 1; } @media (max-width: 1024px) { .site-header nav .cms-menu__list--depth-0 > .cms-menu__item > .cms-menu__link { min-height: 8rem; padding: 0 var(--spacing-sm); font-size: var(--body-xs-fs); } } .site-header nav .cms-menu__list--depth-0 > .cms-menu__item:hover > .cms-menu__link { color: var(--clr-accent-700); } .site-header nav .cms-menu__list--depth-0 > .cms-menu__item:hover > .cms-menu__link::after { opacity: 1; } .site-header nav .cms-menu__item { position: relative; } .site-header nav .cms-menu__list--depth-1 { position: absolute; top: 100%; left: 50%; min-width: 22rem; display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem; background: var(--clr-base-white); border: 1px solid var(--clr-ui-border); border-radius: 1.2rem; box-shadow: 0 1.8rem 4.4rem rgba(17, 18, 26, 0.16); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-0.6rem); transition: opacity 0.22s var(--ease-out-quart), visibility 0.22s ease, transform 0.22s var(--ease-out-quart); z-index: 200; } .site-header nav .cms-menu__list--depth-1 .cms-menu__link { display: block; min-height: 0; padding: 1rem 1.4rem; border-radius: 0.8rem; font-weight: 600; color: var(--clr-text-sub); white-space: nowrap; transition: background-color 0.16s ease, color 0.16s ease; } .site-header nav .cms-menu__list--depth-1 .cms-menu__link:hover { background: var(--clr-ui-hover-bg); color: var(--clr-accent-700); } .site-header nav .cms-menu__item--has-children:hover > .cms-menu__list--depth-1, .site-header nav .cms-menu__item--has-children:focus-within > .cms-menu__list--depth-1 { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } @media (max-width: 768px) { .site-header nav { display: none; } } .site-header__dropdown { position: fixed; top: 10rem; left: 0; right: 0; z-index: 200; width: 100%; background: #fff; border-top: 2px solid var(--clr-primary-900); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transform: translateY(-0.6rem); transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease; } .site-header__dropdown--mega { top: 10rem; } @media (max-width: 1024px) { .site-header__dropdown { top: 8rem; } } @media (max-width: 768px) { .site-header__dropdown { top: 6rem; } } .site-header__dropdown-inner { max-width: 1640px; margin: 0 auto; padding: 3.2rem clamp(2.4rem, 2.3300970874vw + 1.5262135922rem, 6rem) 3.6rem; } .site-header__dropdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem 2.4rem; align-items: start; } .site-header__dropdown-grid--col-2 { grid-template-columns: repeat(2, 1fr); } .site-header__dropdown-grid--col-3 { grid-template-columns: repeat(3, 1fr); } .site-header__dropdown-item { display: flex; flex-direction: column; } .site-header__dropdown-item-head { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.6rem; border-radius: 0.6rem; background: var(--clr-bg-section); border: 1px solid transparent; text-decoration: none; white-space: normal; transition: background-color 0.18s ease, border-color 0.18s ease; } .site-header__dropdown-item-head:hover { background: var(--clr-primary-50); border-color: var(--clr-primary-500); } .site-header__dropdown-item-head:hover .site-header__dropdown-item-title { color: var(--clr-primary-700); } .site-header__dropdown-item-title { display: block; font-weight: 700; font-size: var(--body-sm-fs); line-height: 1.4; color: var(--clr-text-base); transition: color 0.18s; } .site-header__dropdown-item-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--body-xs-fs); color: var(--clr-text-sub); line-height: 1.55; margin: 0; } .site-header__dropdown--research .site-header__dropdown-inner { padding-top: 3.2rem; padding-bottom: 3.6rem; } .site-header__dropdown-research-layout { display: grid; grid-template-columns: 1fr 36rem; gap: 0 3rem; align-items: start; } @media (max-width: 1320px) { .site-header__dropdown-research-layout { grid-template-columns: 1fr; gap: 2.4rem 0; } } .site-header__dropdown-section-label { display: block; color: var(--clr-text-aux); text-transform: uppercase; text-align: left; letter-spacing: 0.08em; margin-bottom: 1.2rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--clr-ui-border); } .site-header__dropdown-research-main { min-width: 0; } .site-header__dropdown-research-side { min-width: 0; padding-left: 2.4rem; border-left: 1px solid var(--clr-ui-border); } .site-header__dropdown-research-side a { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.9rem 0; color: var(--clr-text-base); border-bottom: 1px solid var(--clr-bg-line); white-space: normal; text-align: left; text-decoration: none; transition: color 0.18s; word-break: break-word; overflow-wrap: break-word; } .site-header__dropdown-research-side a:last-child { border-bottom: none; } .site-header__dropdown-research-side a:hover { color: var(--clr-primary-700); } .site-header__dropdown-research-side a:hover .site-header__dropdown-item-title { color: var(--clr-primary-700); } .site-header__dropdown-research-side a span { display: block; color: var(--clr-text-sub); text-align: left; white-space: normal; word-break: break-word; overflow-wrap: break-word; } @media (max-width: 1320px) { .site-header__dropdown-research-side { padding-left: 0; border-left: none; border-top: 1px solid var(--clr-ui-border); padding-top: 2.4rem; } } .site-header__actions { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; justify-self: end; gap: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); } @media (max-width: 768px) { .site-header__actions { gap: 0; } } .site-header__cta { flex-shrink: 0; } @media (max-width: 768px) { .site-header__cta { display: none; } } .site-header__menu-toggle { width: 4.8rem; height: 4.8rem; color: var(--clr-text-base); display: none; align-items: center; justify-content: center; transition: background-color 0.2s ease, color 0.2s ease; } .site-header__menu-toggle i { font-size: 2.2rem; } .site-header__menu-toggle:hover { background-color: rgba(17, 18, 26, 0.06); } @media (max-width: 768px) { .site-header__menu-toggle { display: flex; width: 5.6rem; height: 5.6rem; } .site-header__menu-toggle i { font-size: 1.6rem; } } @media (max-width: 544px) { .site-header__menu-toggle { width: 4.8rem; height: 4.8rem; } } .page-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--clr-primary-900) 0%, var(--clr-primary-700) 100%); min-height: clamp(20rem, 6.4724919094vw + 17.572815534rem, 30rem); display: flex; align-items: flex-end; } .page-hero__bg { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; } .page-hero .no-container-xl { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--header-height) + clamp(4rem, 1.2944983819vw + 3.5145631068rem, 6rem)); padding-bottom: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); } .page-hero__breadcrumb { margin-bottom: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); } .page-hero__breadcrumb ol { display: flex; align-items: center; gap: 0.6rem; list-style: none; margin: 0; padding: 0; } .page-hero__breadcrumb li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--body-xs-fs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .page-hero__breadcrumb li::after { content: "/"; color: rgba(255, 255, 255, 0.3); font-weight: 400; } .page-hero__breadcrumb li:last-child::after { content: none; } .page-hero__breadcrumb li[aria-current=page] { color: rgba(255, 255, 255, 0.9); } .page-hero__breadcrumb a { color: inherit; transition: color 0.2s ease; } .page-hero__breadcrumb a:hover { color: rgba(255, 255, 255, 0.85); } .page-hero__title { color: var(--clr-base-white, #fff); font-weight: 700; line-height: 1.15; } .page-hero__desc { margin-top: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); max-width: 64ch; color: rgba(255, 255, 255, 0.78); line-height: 1.65; } @media (max-width: 544px) { .page-hero { min-height: clamp(16rem, 2.5889967638vw + 15.0291262136rem, 20rem); } .page-hero__desc { display: none; } } .no-sub-visual { position: relative; overflow: hidden; background: url("../images/sub-visual-bg.jpg") center/cover no-repeat; height: clamp(32rem, 7.7669902913vw + 29.0873786408rem, 44rem); } .no-sub-visual .no-container-xl { position: relative; display: flex; align-items: flex-end; justify-content: space-between; height: 100%; padding-bottom: 3.2rem; } @media (max-width: 544px) { .no-sub-visual .no-container-xl { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start; gap: 2rem; } } .no-sub-visual .meta { display: inline-flex; align-items: center; gap: clamp(1rem, 0.5177993528vw + 0.8058252427rem, 1.8rem); margin-bottom: clamp(2rem, 0.6472491909vw + 1.7572815534rem, 3rem); } @media (max-width: 544px) { .no-sub-visual .meta { flex-wrap: wrap; gap: 0.8rem 1.2rem; margin-bottom: 1.6rem; } } .no-sub-visual .meta .line { width: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem); height: 1px; background: rgba(255, 255, 255, 0.5); } .no-sub-visual h2 { font-size: var(--display-xl-fs); } @media (max-width: 544px) { .no-sub-visual h2 { font-size: var(--display-xs-fs); } } .no-sub-visual h2 .word, .no-sub-visual h2 .space { display: inline-block; } .no-sub-visual h2 .word { overflow: hidden; vertical-align: top; } .no-sub-visual h2 .char { display: inline-block; will-change: transform, opacity; } .js .no-sub-visual h2 { visibility: hidden; } .js .no-sub-visual h2[data-split-done="1"] { visibility: visible; } .js .no-sub-visual h2 .char { opacity: 0; transform: translateY(105%); } .no-sub-visual--contact h2 .space { width: clamp(1.5rem, 0.9708737864vw + 1.1359223301rem, 3rem); } .no-sub-visual .metric { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; justify-content: flex-end; text-align: right; } @media (max-width: 768px) { .no-sub-visual .metric { margin-left: auto; flex-direction: column-reverse; } } .no-sub-visual .metric .count { color: var(--clr-secondary-500); } .no-sub-visual .metric .copy { text-align: right; font-size: var(--body-xs-fs); } .no-sub-visual .metric .copy br { display: block !important; } .no-sub-visual__marquee { position: relative; z-index: 1; overflow: hidden; width: 100%; } .no-sub-visual__marquee-track { display: flex; align-items: center; width: max-content; height: 100%; animation: sub-visual-marquee 200s linear infinite; } .no-sub-visual__marquee--reverse .no-sub-visual__marquee-track { animation-direction: reverse; } .no-sub-visual__marquee-group { display: flex; align-items: center; flex: 0 0 auto; } .no-sub-visual__marquee-group img { display: block; width: auto; flex: 0 0 auto; height: clamp(5.5rem, 0.6472491909vw + 5.2572815534rem, 6.5rem); } @keyframes sub-visual-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .no-sub-nav { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.15); position: relative; } .no-sub-nav.swiper { overflow: hidden; } .no-sub-nav__list { display: flex; align-items: center; justify-content: center; gap: clamp(3rem, 0.6472491909vw + 2.7572815534rem, 4rem); min-height: 4rem; } .no-sub-nav__list.swiper-wrapper { gap: 0; justify-content: flex-start; } .no-sub-nav__item.swiper-slide { width: auto; padding: 0 clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); } .no-sub-nav__item.swiper-slide:first-child { padding-left: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .no-sub-nav__item.swiper-slide:last-child { padding-right: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .no-sub-nav__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 100%; border: none; cursor: pointer; padding: 0; transition: opacity 0.2s ease; } .no-sub-nav__arrow::after { content: ""; display: block; width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--clr-gray-700); border-bottom: 2px solid var(--clr-gray-700); } .no-sub-nav__arrow--prev { left: 0; background: linear-gradient(to right, var(--clr-base-white) 60%, transparent); } .no-sub-nav__arrow--prev::after { transform: rotate(135deg) translate(2px, -2px); } .no-sub-nav__arrow--next { right: 0; background: linear-gradient(to left, var(--clr-base-white) 60%, transparent); } .no-sub-nav__arrow--next::after { transform: rotate(-45deg) translate(-2px, 2px); } .no-sub-nav__arrow.swiper-button-disabled { opacity: 0; pointer-events: none; } .no-sub-nav__item { position: relative; display: flex; align-items: center; justify-content: center; } .no-sub-nav__item.is-active .no-sub-nav__link { color: var(--clr-primary-500); } .no-sub-nav__item.is-active::after { transform: scaleX(1); } .no-sub-nav__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1rem; height: 0.2rem; background: var(--clr-primary-500); transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease; } .no-sub-nav__link { display: inline-flex; align-items: center; justify-content: center; min-height: 4rem; color: var(--clr-text-primary); font-size: var(--body-sm-fs); font-weight: 700; transition: color 0.2s ease; } .no-sub-nav__link:hover { color: var(--clr-primary-500); } .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, 4.8rem); } .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.4rem); 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, 2rem); } .no-board-detail__date { font-size: var(--body-xs-fs); color: var(--clr-gray-500); } .no-board-detail__body { padding: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .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.4rem); } .no-locked__logo img { display: block; margin: 0 auto; width: 18rem; } .no-locked__title { margin-bottom: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); } .no-locked__desc { color: var(--clr-gray-600); line-height: 1.6; margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); font-size: var(--body-sm-fs); } .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; } .board-qa { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--clr-base-black); } .board-qa__item { border-bottom: 1px solid var(--clr-gray-200); } .board-qa__details[open] .board-qa__toggle::after { content: "−"; } .board-qa__summary { display: flex; align-items: center; gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem) 0; cursor: pointer; list-style: none; user-select: none; } .board-qa__summary::-webkit-details-marker { display: none; } @media (max-width: 544px) { .board-qa__summary { flex-wrap: wrap; gap: 0.8rem; } } .board-qa__q-mark, .board-qa__a-mark { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: clamp(2.4rem, 0.3883495146vw + 2.254368932rem, 3rem); height: clamp(2.4rem, 0.3883495146vw + 2.254368932rem, 3rem); border-radius: 50%; font-size: var(--body-xs-fs); font-weight: 700; line-height: 1; } .board-qa__q-mark { background: var(--clr-primary-main); color: #fff; } .board-qa__a-mark { background: var(--clr-primary-50); color: var(--clr-primary-main); border: 1.5px solid var(--clr-primary-main); } .board-qa__title { flex: 1; font-size: var(--body-md-fs); font-weight: 600; color: var(--clr-text-primary); line-height: 1.5; } .board-qa__badge { flex-shrink: 0; font-size: var(--body-xs-fs); font-weight: 600; color: var(--clr-primary-main); background: var(--clr-primary-50); border: 1px solid var(--clr-primary-main); border-radius: 9999px; padding: 0.2rem clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); line-height: 1.4; white-space: nowrap; } .board-qa__meta { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .board-qa__date { font-size: var(--body-xs-fs); color: var(--clr-gray-500); white-space: nowrap; } .board-qa__toggle { flex-shrink: 0; font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem); color: var(--clr-gray-400); line-height: 1; margin-left: auto; } .board-qa__toggle::after { content: "+"; } .board-qa__body { padding: 0 0 clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem) clamp(3.4rem, 0.6472491909vw + 3.1572815534rem, 4.4rem); } @media (max-width: 544px) { .board-qa__body { padding-left: 0; } } .board-qa__content { color: var(--clr-text-secondary); line-height: 1.75; margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .board-qa__content:last-child { margin-bottom: 0; } .board-qa__answer { display: flex; gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); align-items: flex-start; background: var(--clr-primary-50); border: 1px solid rgba(15, 76, 129, 0.15); border-radius: 0.8rem; padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); margin-top: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); } .board-qa__answer-content { flex: 1; color: var(--clr-text-primary); line-height: 1.75; } .no-btn { --btn-min-height: clamp(5.2rem, 0.2588996764vw + 5.1029126214rem, 5.6rem); --btn-radius: 5.5rem; --btn-text-color: #fff; --btn-icon-bg: var(--clr-primary-500); --btn-blur: 0.7rem; --btn-target-width: 5.6rem; --btn-width-ease: cubic-bezier(0.22, 1, 0.36, 1); --btn-hover-peak: 1.085; --btn-hover-sub-peak: 1.022; --btn-hover-pop-duration: 0.56s; --btn-hover-out-duration: 0.38s; --btn-hover-out-ease: cubic-bezier(0.22, 1, 0.36, 1); --btn-icon-size: clamp(3.2rem, 0.2588996764vw + 3.1029126214rem, 3.6rem); position: fixed; left: 50%; bottom: 3.2rem; z-index: 9999; width: var(--btn-min-height); min-width: var(--btn-min-height); height: var(--btn-min-height); display: inline-flex; align-items: center; justify-content: flex-start; padding: 0 clamp(5.4rem, 0.6472491909vw + 5.1572815534rem, 6.4rem) 0 clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem); border-radius: var(--btn-radius); color: var(--btn-text-color); white-space: nowrap; overflow: hidden; text-decoration: none; cursor: pointer; touch-action: manipulation; opacity: 0; will-change: width, transform, opacity; backface-visibility: hidden; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, 0.1); } .no-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--btn-min-height); height: var(--btn-min-height); border-radius: var(--btn-radius); transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.92); -webkit-backdrop-filter: blur(var(--btn-blur)); backdrop-filter: blur(var(--btn-blur)); transition: width 0.44s var(--btn-width-ease); will-change: width; z-index: -1; } .no-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7.2rem; height: 7.2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); filter: blur(1rem); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) translateY(3.8rem) scale(0.88); will-change: transform, opacity; } .no-btn .txt { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; font-size: var(--heading-sm-fs); font-weight: 700; line-height: 1; transform: translate3d(-0.9rem, 0, 0); transition: max-width 0.24s var(--btn-width-ease), opacity 0.16s ease, transform 0.24s var(--btn-width-ease); will-change: max-width, opacity, transform; } .no-btn .icon { position: absolute; left: 50%; top: 49%; width: var(--btn-icon-size); height: var(--btn-icon-size); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background-color: var(--btn-icon-bg); color: #fff; transform: translate(-50%, -50%) scale(1); transition: left 0.44s var(--btn-width-ease), transform 0.44s var(--btn-width-ease), background-color 0.3s ease; will-change: left, transform; } .no-btn .icon svg { width: 100%; height: 100%; display: block; fill: currentColor; } .no-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } .no-btn.activated { opacity: 1; } .no-btn.activated::after { animation: btn-intro-ghost 0.82s both; } .no-btn.activated:not(.is-intro-done) { animation: btn-rise-bounce 0.82s both; } .no-btn.activated.is-intro-done { transform: translateX(-50%) translate3d(0, 0, 0) scale(1); transition: transform var(--btn-hover-out-duration) var(--btn-hover-out-ease); animation: none; } .no-btn.activated.is-intro-done:hover, .no-btn.activated.is-intro-done:active { animation: no-btn-hover-bounce var(--btn-hover-pop-duration) both; transition: none; background-color: #000; } @media (prefers-reduced-motion: reduce) { .no-btn.activated.is-intro-done:hover, .no-btn.activated.is-intro-done:active { animation: none; transform: translateX(-50%) translate3d(0, 0, 0) scale(1.03); transition: transform 0.2s ease; } } .no-btn.is-expanding { width: var(--btn-target-width); } .no-btn.is-expanding::before { width: var(--btn-target-width); } .no-btn.is-expanding .icon { left: calc(100% - 1.2rem - var(--btn-icon-size) / 2); transform: translate(-50%, -50%) scale(1); } .no-btn.is-text-visible .txt { max-width: 24rem; opacity: 1; transform: translate3d(0, 0, 0); } .no-btn:not(.activated) { pointer-events: none; opacity: 0; transform: translateX(-50%) translate3d(0, 3.8rem, 0) scale(0.84); } .no-btn:not(.activated)::after { opacity: 0; transform: translate(-50%, -50%) translateY(3.8rem) scale(0.88); animation: none; } .no-btn:not(.is-expanding) { width: var(--btn-min-height); } .no-btn:not(.is-expanding)::before { width: var(--btn-min-height); } .no-btn:not(.is-expanding) .icon { left: 50%; transform: translate(-50%, -50%) scale(1); } .no-btn:not(.is-text-visible) .txt { max-width: 0; opacity: 0; transform: translate3d(-0.9rem, 0, 0); } @keyframes btn-rise-bounce { 0% { opacity: 0; transform: translateX(-50%) translate3d(0, 4.2rem, 0) scale(0.84); animation-timing-function: cubic-bezier(0.22, 0.88, 0.3, 1); } 27% { opacity: 1; transform: translateX(-50%) translate3d(0, -2.7rem, 0) scale(1); animation-timing-function: cubic-bezier(0.34, 0, 0.2, 1); } 50% { opacity: 1; transform: translateX(-50%) translate3d(0, 0.62rem, 0) scale(0.996); animation-timing-function: cubic-bezier(0.28, 0.82, 0.36, 1); } 67% { opacity: 1; transform: translateX(-50%) translate3d(0, -0.2rem, 0) scale(1); animation-timing-function: cubic-bezier(0.34, 0, 0.24, 1); } 82% { opacity: 1; transform: translateX(-50%) translate3d(0, 0.08rem, 0) scale(1); animation-timing-function: linear; } 100% { opacity: 1; transform: translateX(-50%) translate3d(0, 0, 0) scale(1); } } @keyframes btn-intro-ghost { 0% { opacity: 0; transform: translate(-50%, -50%) translateY(4.2rem) scale(0.88); animation-timing-function: cubic-bezier(0.22, 0.88, 0.3, 1); } 27% { opacity: 0.48; transform: translate(-50%, -50%) translateY(-2.35rem) scale(1.1); animation-timing-function: cubic-bezier(0.34, 0, 0.2, 1); } 50% { opacity: 0.22; transform: translate(-50%, -50%) translateY(0.54rem) scale(1.04); animation-timing-function: cubic-bezier(0.28, 0.82, 0.36, 1); } 67% { opacity: 0.1; transform: translate(-50%, -50%) translateY(-0.14rem) scale(1.015); } 82% { opacity: 0.04; transform: translate(-50%, -50%) translateY(0.04rem) scale(1.005); } 100% { opacity: 0; transform: translate(-50%, -50%) translateY(0) scale(1); } } @keyframes no-btn-hover-bounce { 0% { transform: translateX(-50%) translate3d(0, 0, 0) scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 28% { transform: translateX(-50%) translate3d(0, 0, 0) scale(var(--btn-hover-peak)); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } 46% { transform: translateX(-50%) translate3d(0, 0, 0) scale(1); animation-timing-function: cubic-bezier(0.25, 0, 0.25, 1); } 66% { transform: translateX(-50%) translate3d(0, 0, 0) scale(var(--btn-hover-sub-peak)); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } 100% { transform: translateX(-50%) translate3d(0, 0, 0) scale(1); } } .no-form-radio__title { display: block; font-weight: 500; font-size: var(--body-md-fs); 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: var(--body-sm-fs); } .no-form-checkbox__inner { position: relative; display: inline-flex; align-items: center; gap: 1.2rem; } .no-form-checkbox input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } .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.4rem); } .no-form-checkbox input:focus-visible + .no-form-checkbox__box { outline: 2px solid var(--clr-primary-main); outline-offset: 3px; } .no-form-checkbox.is-invalid .no-form-checkbox__box { border-color: var(--clr-accent-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-accent-500) 18%, transparent); } .no-form-checkbox__label { font-size: var(--body-md-fs); } .no-form-checkbox__label a { color: var(--clr-primary-700); text-decoration: underline; } .no-form-checkbox__policy-btn { background: transparent; border: 0; padding: 0; color: var(--clr-primary-700); text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; } .no-form-checkbox__policy-btn:hover { color: var(--clr-primary-900, var(--clr-primary-700)); } .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: var(--body-md-fs); } .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, 20rem); } .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: var(--body-xs-fs); } .no-form-file__input { width: 100%; height: 3.2rem; padding: 0 1.2rem 0 1.2rem; border: 0; background: transparent; font-size: var(--body-md-fs); 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: var(--body-sm-fs); 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: var(--body-xs-fs); 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); } .form__success-msg { color: #1a7f4b; font-size: inherit; margin-bottom: 0.75rem; } .no-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); font-size: var(--body-md-fs); 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, 4rem); 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.8rem); 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: var(--body-xs-fs); 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: var(--body-md-fs); } @media (max-width: 768px) { .no-prevnext__label { font-size: var(--body-xs-fs); } } .no-prevnext__title { font-size: var(--body-md-fs); } @media (max-width: 768px) { .no-prevnext__title { font-size: var(--body-xs-fs); } } .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: var(--body-md-fs); } .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: var(--body-xs-fs); 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; } .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.2rem); } .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; } .no-floating-cta { --fcta-size: 5.2rem; --fcta-gap-edge: 4rem; --fcta-gap-bottom: 4rem; --fcta-btn-gap: 1rem; --fc-tel: var(--clr-status-success); --fc-kakao: #fee500; --fc-kakao-ink: #3a1d1d; --fc-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); --fc-youtube: #ff0000; --fc-facebook: #1877f2; --fc-twitter: #000000; --fc-linkedin: #0a66c2; --fc-tiktok: #000000; --fc-naverblog: #03c75a; position: fixed; inset-inline-end: calc(var(--fcta-gap-edge) + env(safe-area-inset-right)); inset-block-end: calc(var(--fcta-gap-bottom) + var(--quick-bar-h, 0px) + env(safe-area-inset-bottom)); z-index: 999; display: flex; flex-direction: column; gap: var(--fcta-btn-gap); pointer-events: auto; transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; } .is-quick-contact-open .no-floating-cta { opacity: 0; pointer-events: none; transform: translateY(var(--spacing-sm)); visibility: hidden; } .no-floating-cta__btn { width: var(--fcta-size); height: var(--fcta-size); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem); border: 0; cursor: pointer; background: var(--clr-primary-900); color: var(--clr-base-white); box-shadow: 0 0.4rem 1.6rem rgba(36, 36, 79, 0.22); transition: background var(--tran-3), color var(--tran-3), filter var(--tran-3), transform var(--tran-3), box-shadow var(--tran-3); } .no-floating-cta__btn svg { width: 55%; height: 55%; fill: currentColor; } .no-floating-cta__btn img { width: 55%; height: 55%; object-fit: contain; } .no-floating-cta__btn:hover { filter: brightness(1.08); transform: translateY(-0.2rem); box-shadow: 0 0.8rem 2rem rgba(36, 36, 79, 0.28); } .no-floating-cta__btn:active { transform: translateY(0) scale(0.96); } .no-floating-cta__btn:focus-visible { outline: 2px solid var(--clr-accent-500); outline-offset: 3px; } .no-floating-cta__btn--tel { background: var(--fc-tel); } .no-floating-cta__btn--kakao { background: var(--fc-kakao); color: var(--fc-kakao-ink); } .no-floating-cta__btn--instagram { background: var(--fc-instagram); } .no-floating-cta__btn--youtube { background: var(--fc-youtube); } .no-floating-cta__btn--facebook { background: var(--fc-facebook); } .no-floating-cta__btn--twitter { background: var(--fc-twitter); } .no-floating-cta__btn--linkedin { background: var(--fc-linkedin); } .no-floating-cta__btn--tiktok { background: var(--fc-tiktok); } .no-floating-cta__btn--naverblog { background: var(--fc-naverblog); } .no-floating-cta__btn--top { max-block-size: 0; margin-block-start: calc(-1 * var(--fcta-btn-gap)); opacity: 0; overflow: hidden; pointer-events: none; transform: scale(0); transform-origin: center; visibility: hidden; transition: opacity 0.28s ease, transform 0.28s ease, max-block-size 0.28s ease, margin-block-start 0.28s ease, visibility 0s linear 0.28s, background var(--tran-3), color var(--tran-3), filter var(--tran-3), box-shadow var(--tran-3); } .no-floating-cta__btn--top.is-visible { max-block-size: var(--fcta-size); margin-block-start: 0; opacity: 1; pointer-events: auto; transform: scale(1); visibility: visible; transition: opacity 0.28s ease, transform 0.28s ease, max-block-size 0.28s ease, margin-block-start 0.28s ease, visibility 0s linear 0s, background var(--tran-3), color var(--tran-3), filter var(--tran-3), box-shadow var(--tran-3); } .no-floating-cta__btn--top.is-visible:hover { transform: translateY(-0.2rem) scale(1); } .no-floating-cta__btn--top.is-visible:active { transform: translateY(0) scale(0.96); } .no-floating-cta__custom-icon { display: block; filter: none; } @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 { transition: none; } .no-floating-cta__btn { transition: none; } .no-floating-cta__btn--top { transition: none; } } .no-gototop__btn { border: 2px solid rgba(255, 255, 255, 0.85); background: var(--clr-primary-900); color: var(--clr-base-white); } .no-gototop__btn:hover { background: var(--clr-accent-500); filter: none; } .no-quick-contact { display: none; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 997; background: var(--clr-primary-950); border-top: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 -0.4rem 2.4rem rgba(0, 0, 0, 0.35); } .no-quick-contact__mobile-trigger, .no-quick-contact__sheet-head { display: none; } .no-quick-contact__inner { display: flex; align-items: center; gap: clamp(1.6rem, 1.5533980583vw + 1.0174757282rem, 4rem); padding-block: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); } @media (max-width: 768px) { .no-quick-contact__inner { align-items: stretch; gap: 1.2rem; padding-block: 1.2rem; } } .no-quick-contact__brand { flex: 0 0 auto; } @media (max-width: 768px) { .no-quick-contact__brand { display: none; } } .no-quick-contact__logo { display: block; height: clamp(3rem, 0.9061488673vw + 2.6601941748rem, 4.4rem); width: auto; max-width: 18rem; object-fit: contain; } .no-quick-contact__form { flex: 1 1 auto; display: flex; align-items: flex-end; flex-wrap: wrap; gap: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem); } @media (max-width: 768px) { .no-quick-contact__form { gap: var(--spacing-2xl); padding-block-start: var(--spacing-2xl); } } .no-quick-contact__field { flex: 1 1 12rem; min-width: 9rem; display: flex; flex-direction: column; gap: var(--spacing-xs); } .no-quick-contact__field--grow { flex: 1.6 1 18rem; } @media (max-width: 768px) { .no-quick-contact__field { flex: 1 1 100%; min-width: 0; gap: var(--spacing-xxs); } } .no-quick-contact__label { color: rgba(255, 255, 255, 0.9); font-weight: 600; } .no-quick-contact__req { color: var(--clr-accent-300); } .no-quick-contact__input { padding: var(--spacing-sm) 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: var(--clr-base-white); width: 100%; } .no-quick-contact__input::placeholder { color: rgba(255, 255, 255, 0.4); } .no-quick-contact__input:focus { outline: none; border-bottom-color: var(--clr-accent-500); } .no-quick-contact__submit { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--spacing-xs); } @media (max-width: 768px) { .no-quick-contact__submit { flex: 1 1 100%; align-items: stretch; } } .no-quick-contact__consent { display: flex; align-items: center; gap: var(--spacing-xs); white-space: nowrap; color: rgba(255, 255, 255, 0.6); } .no-quick-contact__consent a { color: var(--clr-accent-300); text-decoration: underline; white-space: nowrap; } @media (max-width: 768px) { .no-quick-contact__consent { justify-content: center; white-space: normal; } } .no-quick-contact__consent-box { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; accent-color: var(--clr-accent-500); } .no-quick-contact__actions { flex: 0 0 auto; } .no-quick-contact__actions .ui-cta { min-width: 17rem; justify-content: space-between; } @media (max-width: 768px) { .no-quick-contact__actions { align-self: stretch; } .no-quick-contact__actions .ui-cta { min-width: 0; width: 100%; } } .no-quick-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 768px) { .no-quick-contact { --quick-inline-start: max(var(--spacing-md), env(safe-area-inset-left)); --quick-inline-end: max(var(--spacing-md), env(safe-area-inset-right)); display: block; background: transparent; border-top: 0; box-shadow: none; pointer-events: none; } .no-quick-contact.is-open { pointer-events: auto; } .no-quick-contact.is-open .no-quick-contact__mobile-trigger { opacity: 0; transform: translateY(100%); visibility: hidden; } .no-quick-contact.is-open .no-quick-contact__inner { opacity: 1; transform: translateY(0); visibility: visible; } .no-quick-contact__mobile-trigger { position: absolute; inset-inline-start: var(--quick-inline-start); inset-inline-end: var(--quick-inline-end); inset-block-end: calc(var(--spacing-md) + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); min-height: 5.6rem; padding: 0 var(--spacing-lg); overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--radius-sm); background: linear-gradient(112deg, var(--clr-accent-700) 0%, var(--clr-accent-500) 28%, var(--clr-accent-300) 50%, var(--clr-accent-500) 72%, var(--clr-accent-700) 100%); background-size: 240% 100%; color: var(--clr-base-white); box-shadow: 0 -0.4rem 2.4rem rgba(0, 0, 0, 0.26); pointer-events: auto; animation: quick-contact-gold-flow 6.8s ease-in-out infinite; transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease; } .no-quick-contact__mobile-trigger::before, .no-quick-contact__mobile-trigger::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .no-quick-contact__mobile-trigger::before { z-index: 0; background: radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.18), transparent 34%), repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.045) 0, rgba(255, 255, 255, 0.045) 1px, transparent 1px, transparent 0.8rem); } .no-quick-contact__mobile-trigger::after { z-index: 0; inset-inline: -45%; background: linear-gradient(90deg, transparent 34%, rgba(255, 255, 255, 0.34) 50%, transparent 66%); transform: translateX(-58%) skewX(-18deg); animation: quick-contact-gold-sheen 4.8s ease-in-out infinite; } .no-quick-contact__mobile-trigger:hover, .no-quick-contact__mobile-trigger:focus-visible { box-shadow: 0 -0.4rem 2.4rem rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(224, 184, 119, 0.5); } .no-quick-contact__mobile-trigger:hover .no-quick-contact__mobile-trigger-icon, .no-quick-contact__mobile-trigger:focus-visible .no-quick-contact__mobile-trigger-icon { transform: translateX(var(--spacing-xxs)); } .no-quick-contact__mobile-trigger:focus-visible { outline: 2px solid var(--clr-base-white); outline-offset: 2px; } .no-quick-contact__mobile-trigger svg, .no-quick-contact__mobile-trigger i { flex: 0 0 auto; } .no-quick-contact__mobile-trigger-label, .no-quick-contact__mobile-trigger-icon { position: relative; z-index: 1; } .no-quick-contact__mobile-trigger-icon { display: inline-grid; place-items: center; min-width: 4.4rem; min-height: 4.4rem; margin-block: calc(var(--spacing-xs) * -1); margin-inline-end: calc(var(--spacing-sm) * -1); border-inline-start: 1px solid rgba(255, 255, 255, 0.28); transition: transform 220ms ease; } .no-quick-contact__inner { position: absolute; inset-inline: 0; inset-block-end: var(--quick-vv-bottom, 0px); display: block; max-height: calc(var(--quick-vv-h, 100vh) - var(--spacing-md)); padding-block-start: 0; padding-inline-start: var(--quick-inline-start); padding-inline-end: var(--quick-inline-end); padding-block-end: calc(var(--spacing-lg) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--clr-primary-950); border-top: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -0.8rem 3.2rem rgba(0, 0, 0, 0.42); opacity: 0; transform: translateY(calc(100% + var(--spacing-md))); transition: opacity 240ms ease, transform 240ms ease, visibility 240ms ease; visibility: hidden; pointer-events: auto; } .no-quick-contact__sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-block-start: 0; margin-block-end: 0; margin-inline-start: calc(var(--quick-inline-start) * -1); margin-inline-end: calc(var(--quick-inline-end) * -1); padding-block-start: 0; padding-block-end: var(--spacing-md); padding-inline-start: var(--quick-inline-start); padding-inline-end: var(--quick-inline-end); background: var(--clr-primary-950); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .no-quick-contact__sheet-title { color: var(--clr-base-white); } .no-quick-contact__close { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; flex: 0 0 4.4rem; border: 0; border-radius: 50%; background: transparent; color: var(--clr-base-white); } .no-quick-contact__close::before { content: ""; position: absolute; inset: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: inherit; background: rgba(255, 255, 255, 0.06); transition: border-color 180ms ease, background-color 180ms ease; } .no-quick-contact__close svg, .no-quick-contact__close i { position: relative; z-index: 1; width: 1.4rem; height: 1.4rem; } .no-quick-contact__close:hover::before, .no-quick-contact__close:focus-visible::before { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.1); } .no-quick-contact__close:focus-visible { outline: 2px solid var(--clr-accent-300); outline-offset: -2px; } .no-quick-contact__input { font-size: 1.6rem; padding-block: var(--spacing-xs); } } @keyframes quick-contact-gold-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes quick-contact-gold-sheen { 0%, 22% { transform: translateX(-58%) skewX(-18deg); opacity: 0; } 34% { opacity: 0.72; } 58%, 100% { transform: translateX(58%) skewX(-18deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .no-quick-contact__mobile-trigger, .no-quick-contact__mobile-trigger::after { animation: none; } .no-quick-contact__mobile-trigger { background-position: 50% 50%; } .no-quick-contact__mobile-trigger-icon { transition: none; } } .__root { padding-block-end: 0; } @media (max-width: 768px) { .__root { padding-block-end: var(--quick-bar-h, 11rem); } } .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: var(--body-md-fs); } .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, 12.8rem); } .no-marquee-section.--bottom { padding-bottom: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem); } .no-marquee-section.--y { padding: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem) 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: var(--deco-marquee-fs); } /** * marquee-whisper * • Marquee Whisper (.marquee-whisper) — CSS animation 기반 가로 흐름 텍스트 * • awards-wall 등 다중 페이지 재사용 부품 (sections 에서 keyframe 재사용) * * 모션 토큰: var(--dur-*) · var(--ease-*) 참조 (절대 하드코딩 금지) * 클래스명 .marquee-whisper · keyframe ui-marquee-whisper 는 TS·뷰가 의존 → 불변. */ .marquee-whisper { position: relative; width: 100%; overflow: hidden; pointer-events: auto; } .marquee-whisper__track { display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; } .marquee-whisper__set { display: inline-flex; align-items: center; flex-shrink: 0; padding-right: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem); font-family: var(--font-display-family); font-size: var(--deco-marquee-fs); font-weight: 500; line-height: 1; letter-spacing: var(--tracking-display); color: rgba(255, 255, 255, 0.1); white-space: nowrap; user-select: none; } .marquee-whisper { /* --solid : 밝은 배경용 솔리드 디스플레이 마키 (예: home.theh-solution). * 폰트 패밀리는 마크업의 .no-oswald 유틸에서 상속(#17 준수) — 여기선 색/굵기/케이스만. */ } .marquee-whisper--solid .marquee-whisper__set { font-family: inherit; font-weight: 700; color: var(--clr-base-black); text-transform: uppercase; } /* track 의 keyframe — JS 가 animationName 으로 'ui-marquee-whisper' 적용 */ @keyframes ui-marquee-whisper { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } /* track 안에 2 세트가 있어 -50% 가 1 세트 분량 */ } .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, 2rem); width: 100%; padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem) clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.6rem); 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.4rem); padding-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); 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, 2rem); width: 100%; padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) 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.6rem); width: 100%; padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem) clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem); 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, 2rem); 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.4rem) clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); 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; } .no-auto-cover { position: relative; display: block; overflow: hidden; margin: 0; width: 100%; background-color: var(--clr-gray-100, #f1f1f1); background-position: center; background-size: cover; background-repeat: no-repeat; } .no-auto-cover__img, .no-auto-cover__video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .no-auto-cover--1x1 { aspect-ratio: 1/1; } .no-auto-cover--4x3 { aspect-ratio: 4/3; } .no-auto-cover--16x9 { aspect-ratio: 16/9; } .no-auto-cover--3x4 { aspect-ratio: 3/4; } .no-auto-cover--21x9 { aspect-ratio: 21/9; } .app-modal-backdrop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--clr-primary-900) 82%, transparent); z-index: 20000; padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); backdrop-filter: blur(0.3rem); } .app-modal-backdrop .app-modal-box--success, .app-modal-backdrop .app-modal-box--error { width: min(clamp(32rem, 7.7669902913vw + 29.0873786408rem, 44rem), 100% - 3.2rem); max-width: clamp(32rem, 7.7669902913vw + 29.0873786408rem, 44rem); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-md); background: var(--clr-background-primary); box-shadow: 0 2.4rem 6.4rem color-mix(in srgb, var(--clr-primary-900) 36%, transparent); } .app-modal-backdrop .app-modal-box--success .app-modal-header, .app-modal-backdrop .app-modal-box--error .app-modal-header { padding: var(--spacing-lg) var(--spacing-xl); border-bottom: 0; background: var(--clr-primary-900); color: var(--clr-base-white); } .app-modal-backdrop .app-modal-box--success .app-modal-title, .app-modal-backdrop .app-modal-box--error .app-modal-title { color: inherit; } .app-modal-backdrop .app-modal-box--success .app-modal-close, .app-modal-backdrop .app-modal-box--error .app-modal-close { color: color-mix(in srgb, var(--clr-base-white) 70%, transparent); } .app-modal-backdrop .app-modal-box--success .app-modal-close:hover, .app-modal-backdrop .app-modal-box--success .app-modal-close:focus-visible, .app-modal-backdrop .app-modal-box--error .app-modal-close:hover, .app-modal-backdrop .app-modal-box--error .app-modal-close:focus-visible { color: var(--clr-base-white); } .app-modal-backdrop .app-modal-box--success .app-modal-status, .app-modal-backdrop .app-modal-box--error .app-modal-status { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem); height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem); border-radius: 50%; background: var(--clr-accent-500); color: var(--clr-base-white); font-size: var(--heading-sm-fs); } .app-modal-backdrop .app-modal-box--success .app-modal-body, .app-modal-backdrop .app-modal-box--error .app-modal-body { padding: var(--spacing-xl); background: var(--clr-background-primary); color: var(--clr-text-sub); font-size: var(--body-md-fs); line-height: 1.6; } .app-modal-backdrop .app-modal-box--success .app-modal-footer, .app-modal-backdrop .app-modal-box--error .app-modal-footer { padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl); border-top: 0; background: var(--clr-background-primary); } .app-modal-backdrop .app-modal-box--success .app-modal-btn--primary, .app-modal-backdrop .app-modal-box--error .app-modal-btn--primary { min-width: clamp(7.2rem, 1.5533980583vw + 6.6174757282rem, 9.6rem); min-height: clamp(4rem, 0.2588996764vw + 3.9029126214rem, 4.4rem); padding-inline: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); font-size: var(--body-sm-fs); border-color: var(--clr-accent-500); background: var(--clr-accent-500); color: var(--clr-base-white); } .app-modal-backdrop .app-modal-box--success .app-modal-btn--primary:hover, .app-modal-backdrop .app-modal-box--success .app-modal-btn--primary:focus-visible, .app-modal-backdrop .app-modal-box--error .app-modal-btn--primary:hover, .app-modal-backdrop .app-modal-box--error .app-modal-btn--primary:focus-visible { border-color: var(--clr-accent-700); background: var(--clr-accent-700); } .app-modal-box { width: min(48rem, 100% - 3.2rem); background: var(--clr-base-white); border-radius: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.18), 0 0.8rem 1.2rem rgba(0, 0, 0, 0.08); overflow: hidden; display: flex; flex-direction: column; animation: app-modal-appear 0.25s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes app-modal-appear { from { opacity: 0; transform: scale(0.92) translateY(0.8rem); } to { opacity: 1; transform: scale(1) translateY(0); } } .app-modal-header { display: flex; align-items: center; gap: 1.2rem; padding: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem) clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.8rem); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .app-modal-title { flex: 1; margin: 0; color: var(--clr-base-black); } .app-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border: none; background: transparent; cursor: pointer; font-size: var(--heading-md-fs); color: rgba(0, 0, 0, 0.48); border-radius: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem); padding: 0; flex-shrink: 0; transition: color var(--tran-3); } .app-modal-close:hover { color: var(--clr-base-black); } .app-modal-backdrop .app-modal-box--wide { max-width: 102.4rem; width: min(102.4rem, 100% - 3.2rem); max-height: 92vh; display: flex; flex-direction: column; } .app-modal-backdrop .app-modal-box--wide .app-modal-body--scroll { flex: 1; max-height: none; } .app-modal-backdrop .app-modal-box--md { max-width: 76.8rem; width: min(76.8rem, 100% - 3.2rem); } .app-modal-body { padding: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem) clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.8rem); color: var(--clr-base-black); line-height: 1.7; white-space: pre-line; } .app-modal-body--scroll { max-height: 78vh; overflow-y: auto; white-space: normal; overscroll-behavior: contain; } .app-modal-prose [class*=no-section-] { padding-top: 0; padding-bottom: 0; } .app-modal-prose [class*=no-container-] { max-width: none; padding-left: 0; padding-right: 0; } .app-modal-prose .no-heading-lg { font-size: var(--heading-sm-fs); line-height: var(--heading-sm-lh); } .app-modal-prose .no-heading-sm { font-size: var(--heading-xs-fs); line-height: var(--heading-xs-lh); } .app-modal-prose .sec-long-text-2col__grid { grid-template-columns: 1fr; } .app-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem) clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.8rem); border-top: 1px solid rgba(0, 0, 0, 0.08); } .app-modal-btn { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(8.8rem, 0.7766990291vw + 8.5087378641rem, 10rem); min-height: clamp(4.4rem, 0.2588996764vw + 4.3029126214rem, 4.8rem); padding-inline: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); border-radius: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem); border: 1px solid rgba(0, 0, 0, 0.2); background: transparent; color: var(--clr-base-black); cursor: pointer; font-family: inherit; font-size: var(--body-md-fs); transition: background-color var(--tran-3), border-color var(--tran-3), color var(--tran-3); } .app-modal-btn:hover { background: rgba(0, 0, 0, 0.06); } .app-modal-btn--primary { background: var(--clr-base-black); border-color: var(--clr-base-black); color: var(--clr-base-white); } .app-modal-btn--primary:hover { background: var(--clr-primary-500); border-color: var(--clr-primary-500); } .site-popups { display: contents; } .site-popup-layer { position: fixed; inset: 0; z-index: 19000; pointer-events: none; } .site-popup-slot { pointer-events: none; } .site-popup { pointer-events: auto; position: relative; width: 32rem; max-width: calc(100vw - 3.2rem); background: var(--clr-base-white); border-radius: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.22), 0 0.4rem 1rem rgba(0, 0, 0, 0.1); overflow: hidden; } .site-popup--anim { opacity: 0; transition: opacity var(--popup-dur, 300ms) var(--popup-delay, 0ms) ease, transform var(--popup-dur, 300ms) var(--popup-delay, 0ms) ease; } .site-popup--anim-scale { transform: scale(0.92); } .site-popup--anim-slide-up { transform: translateY(2rem); } .site-popup--anim-slide-down { transform: translateY(-2rem); } .site-popup--anim-slide-left { transform: translateX(2rem); } .site-popup--anim-slide-right { transform: translateX(-2rem); } .site-popup.is-visible { opacity: 1; transform: none; } .site-popup.is-leaving { opacity: 0; transform: scale(0.98); } .site-popup__handle { display: none; } .site-popup__close { position: absolute; top: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); right: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: var(--clr-base-white); cursor: pointer; line-height: 1; font-size: 2rem; transition: background var(--tran-3, 0.3s); } .site-popup__close:hover { background: rgba(0, 0, 0, 0.68); } .site-popup__picture, .site-popup__media { display: block; line-height: 0; } .site-popup__picture img, .site-popup__media img { display: block; width: 100%; height: auto; } .site-popup__media--link { cursor: pointer; } .site-popup__text { padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .site-popup__subtitle { margin: 0 0 clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem); color: var(--clr-accent-500); } .site-popup__title { margin: 0 0 clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem); color: var(--clr-primary-900); } .site-popup__desc { margin: 0 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); color: var(--clr-text-base); } .site-popup__cta { margin-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); } .site-popup__today { display: flex; align-items: center; gap: 0.6rem; padding: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); border-top: 1px solid rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.55); cursor: pointer; } .site-popup--image-only { background: transparent; box-shadow: none; overflow: visible; } .site-popup--split .site-popup__split { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .site-popup--split .site-popup__split { grid-template-columns: 1fr; } } .site-popup--split .site-popup__split-media { line-height: 0; } .site-popup--split .site-popup__split-media img { height: 100%; object-fit: cover; } .site-popup--split .site-popup__split-text { padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .site-popup--full-modal { width: min(56rem, 100vw - 3.2rem); max-height: 92vh; overflow: auto; overscroll-behavior: contain; } .site-popup--safe-area { padding-bottom: env(safe-area-inset-bottom, 0); } .site-popup-backdrop { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); background: rgba(0, 0, 0, 0.5); pointer-events: auto; opacity: 0; transition: opacity var(--popup-dur, 300ms) ease; } .site-popup-backdrop.is-visible { opacity: 1; } body.popup-modal-open { overflow: hidden; } .site-popup-slider__track { position: relative; } .site-popup-slider__slide { display: none; } .site-popup-slider__slide.is-active { display: block; } .site-popup-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 3.4rem; height: 3.4rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: var(--clr-base-white); cursor: pointer; font-size: 2rem; line-height: 1; } .site-popup-slider__nav--prev { left: 0.6rem; } .site-popup-slider__nav--next { right: 0.6rem; } .site-popup-slider__nav:hover { background: rgba(0, 0, 0, 0.65); } .site-popup-slider__dots { display: flex; justify-content: center; gap: 0.6rem; padding: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem); } .site-popup-slider__dot { width: 0.8rem; height: 0.8rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.22); cursor: pointer; padding: 0; } .site-popup-slider__dot.is-active { background: var(--clr-primary-900); } @media (prefers-reduced-motion: reduce) { .site-popup--anim, .site-popup-backdrop { transition: none !important; } } .join-privacy-consent { color: var(--clr-base-black); } .join-privacy-consent__intro { color: var(--clr-text-secondary); } .join-privacy-consent__list { list-style: none; padding: 0; margin: var(--spacing-lg) 0 0; display: flex; flex-direction: column; gap: var(--spacing-lg); } .join-privacy-consent__item { padding: var(--spacing-lg); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: var(--clr-bg-section); } .join-privacy-consent__item-body { color: var(--clr-text-secondary); } .join-privacy-consent__footer { color: var(--clr-text-secondary); } .lang-switcher { position: relative; align-self: center; } .lang-switcher__btn { display: flex; align-items: center; gap: 0.5rem; height: 3.2rem; padding: 0 1.2rem; color: #fff; border-radius: 0.6rem; border: 1.5px solid rgba(255, 255, 255, 0.25); transition: background-color 0.2s ease, border-color 0.2s ease; } .lang-switcher__btn:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); } .lang-switcher__btn i { font-size: 0.9rem; transition: transform 0.2s ease; } .lang-switcher__current { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.06em; } .lang-switcher__dropdown { position: absolute; top: calc(100% + 0.8rem); right: 0; min-width: 16rem; background: #fff; border: 1px solid var(--clr-ui-border); border-radius: 1rem; padding: 0.6rem; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transform: translateY(-0.6rem); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; z-index: 300; } .lang-switcher__dropdown li form { display: contents; } .lang-switcher__item { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.8rem 1.2rem; border-radius: 0.6rem; color: var(--clr-text-sub); font-size: var(--body-sm-fs); font-weight: 500; text-align: left; transition: background-color 0.15s ease, color 0.15s ease; } .lang-switcher__item:hover { background-color: var(--clr-bg-section); color: var(--clr-text-base); } .lang-switcher__item.is-active { background-color: var(--clr-primary-50); color: var(--clr-primary-700); font-weight: 700; } .lang-switcher.is-open .lang-switcher__btn { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); } .lang-switcher.is-open .lang-switcher__btn i { transform: rotate(180deg); } .lang-switcher.is-open .lang-switcher__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width: 768px) { .lang-switcher { display: none; } } /* 다크 네이비 드로어 (2026-06-29 시안 — 푸터와 동일 브랜드 톤). * 배경 = var(--clr-primary-900) 딥 인디고 남색 · 글자 = 화이트 · 포인트 = 골드(accent-300). * 대메뉴 타이포 위계(크기/굵기)는 마크업의 .no-display-xs + .no-oswald 유틸이 부여(절대 규칙 #17). * 본 파일은 레이아웃(flex·grid·transition)과 다크 배경용 색상만 담당. */ .site-drawer { position: fixed; inset: 0; z-index: calc(var(--header-z-index) + 10); width: 100%; height: 100svh; background: var(--clr-primary-900); color: var(--clr-base-white); overflow-y: auto; overscroll-behavior: contain; transform: translateY(-100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .site-drawer[data-state=open] { transform: translateY(0); pointer-events: auto; } .site-drawer__inner { display: flex; flex-direction: column; min-height: 100%; padding: 0 2rem 2.4rem; } .site-drawer__head { display: flex; align-items: center; justify-content: space-between; height: 6rem; flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 0.8rem; } .site-drawer__logo { display: inline-flex; align-items: center; height: 3.2rem; } .site-drawer__logo img { display: block; height: 100%; width: auto; object-fit: contain; } .site-drawer__close { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 0.6rem; color: var(--clr-base-white); transition: background-color 0.18s ease, color 0.18s ease; } .site-drawer__close i { font-size: 1.8rem; } .site-drawer__close:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--clr-accent-300); } .site-drawer__nav { list-style: none; flex: 1; } .site-drawer__nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .site-drawer__nav-item.is-active > .site-drawer__nav-row > .site-drawer__nav-label { color: var(--clr-accent-300); } .site-drawer__nav-row { display: flex; align-items: center; justify-content: space-between; } .site-drawer__nav-label { flex: 1; display: block; padding: 1.4rem 0; color: var(--clr-base-white); text-decoration: none; text-transform: uppercase; letter-spacing: 0.02em; transition: color 0.18s; } .site-drawer__nav-label:hover { color: var(--clr-accent-300); } .site-drawer__nav-label:focus-visible { outline: 2px solid var(--clr-accent-300); outline-offset: -2px; border-radius: 0.2rem; } .site-drawer__toggle { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 0.4rem; color: rgba(255, 255, 255, 0.7); transition: background-color 0.18s ease, color 0.18s ease; flex-shrink: 0; } .site-drawer__toggle i { font-size: 1.4rem; transition: transform 0.22s ease; } .site-drawer__toggle:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--clr-accent-300); } .site-drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.24s ease; overflow: hidden; } .site-drawer__sub > .site-drawer__sub-list { overflow: hidden; min-height: 0; } .site-drawer__nav-item.is-expanded > .site-drawer__nav-row > .site-drawer__toggle { color: var(--clr-accent-300); } .site-drawer__nav-item.is-expanded > .site-drawer__nav-row > .site-drawer__toggle i { transform: rotate(180deg); } .site-drawer__nav-item.is-expanded > .site-drawer__sub { grid-template-rows: 1fr; } .site-drawer__nav-item.is-expanded > .site-drawer__sub > .site-drawer__sub-list { padding: 0.4rem 0 1.2rem; } .site-drawer__sub-list { padding: 0; } .site-drawer__sub-link { display: block; padding: 0.6rem 0 0.6rem 1.4rem; color: rgba(255, 255, 255, 0.62); text-decoration: none; border-left: 2px solid rgba(255, 255, 255, 0.16); transition: color 0.18s, border-color 0.18s; } .site-drawer__sub-link:hover { color: var(--clr-accent-300); border-left-color: rgba(255, 255, 255, 0.45); } .site-drawer__sub-link.is-current { color: var(--clr-accent-300); border-left-color: var(--clr-accent-300); font-weight: 700; } .site-drawer__nav-item--cta { border-bottom: 0; margin-top: 1.6rem; } .site-drawer__cta.ui-cta { display: flex; width: 100%; justify-content: space-between; } .site-drawer__footer { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.12); flex-shrink: 0; } .site-drawer__lang { display: flex; gap: 0.8rem; flex-wrap: wrap; } .site-drawer__lang form { display: contents; } .site-drawer__lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 4.8rem; padding: 0.6rem 1.2rem; border-radius: 2rem; border: 1.5px solid rgba(255, 255, 255, 0.3); font-size: var(--body-sm-fs); font-weight: 600; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.8); transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease; } .site-drawer__lang-btn:hover { border-color: var(--clr-accent-300); color: var(--clr-accent-300); } .site-drawer__lang-btn.is-active { border-color: var(--clr-accent-300); color: var(--clr-primary-900); background-color: var(--clr-accent-300); font-weight: 700; } .is-drawer-open { overflow: hidden; } /* =================================================== Site Search Overlay — header magnifier triggers this. View: resources/views/components/search-overlay.php TS: resources/ts/home/global/SearchOverlayController.ts Rule #17 — typography & spacing through utilities, this file = layout/position/background only. =================================================== */ .site-search { position: fixed; inset: 0; z-index: calc(var(--header-z-index) + 5); pointer-events: none; opacity: 0; transition: opacity var(--dur-base, 240ms) var(--ease-out-quart, ease); } .site-search[data-state=open] { pointer-events: auto; opacity: 1; } .site-search__backdrop { position: absolute; inset: 0; background: rgba(8, 14, 28, 0.55); backdrop-filter: blur(4px); } .site-search__panel { position: absolute; top: 0; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--clr-gray-200); box-shadow: 0 24px 60px -20px rgba(8, 14, 28, 0.35); transform: translateY(-100%); transition: transform var(--dur-base, 280ms) var(--ease-out-quart, ease); max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; } .site-search[data-state=open] .site-search__panel { transform: translateY(0); } .site-search__panel-inner { padding-top: calc(var(--header-height) + clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem)); padding-bottom: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .site-search [hidden] { display: none !important; } .site-search { /* ── Form row ── */ } .site-search__form { display: flex; align-items: center; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); padding-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); border-bottom: 1px solid var(--clr-gray-200); flex-shrink: 0; } .site-search__field { position: relative; flex: 1; display: flex; align-items: center; } .site-search__icon { position: absolute; left: 0; color: var(--clr-primary-900); font-size: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); pointer-events: none; } .site-search__input { flex: 1; width: 100%; border: 0; outline: none; background: transparent; color: var(--clr-gray-900); padding-left: clamp(3.6rem, 1.0355987055vw + 3.2116504854rem, 5.2rem); padding-right: clamp(3.6rem, 0.7766990291vw + 3.3087378641rem, 4.8rem); } .site-search__input::placeholder { color: var(--clr-gray-400); } .site-search__input { /* Hide native WebKit/Blink search cancel button — we provide .site-search__clear */ } .site-search__input::-webkit-search-cancel-button, .site-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .site-search__clear { position: absolute; right: 0; width: 3.2rem; height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-round); background: var(--clr-gray-100); color: var(--clr-gray-600); cursor: pointer; transition: background var(--dur-base) var(--ease-out-quart); } .site-search__clear:hover { background: var(--clr-gray-200); color: var(--clr-gray-900); } .site-search__close { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.4rem; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-round); background: #fff; color: var(--clr-gray-700); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart), background var(--dur-base) var(--ease-out-quart); } .site-search__close:hover { border-color: var(--clr-primary-900); color: var(--clr-primary-900); background: var(--clr-gray-50); } .site-search__close-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 2.8rem; padding: 0.2rem 0.6rem; border: 1px solid var(--clr-gray-200); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--clr-gray-100); color: var(--clr-gray-600); /* Mono font only — keyboard chip visual identity (rule #17 component-internal exception) */ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em; } .site-search { /* ── Body ── */ } .site-search__body { padding-top: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); padding-bottom: clamp(2.8rem, 1.8122977346vw + 2.1203883495rem, 5.6rem); flex: 1; min-height: 0; overflow: hidden auto; -webkit-overflow-scrolling: touch; } .site-search__initial, .site-search__live { display: flex; flex-direction: column; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .site-search__group { display: flex; flex-direction: column; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } .site-search__label { color: var(--clr-gray-500); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; } .site-search__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem); } .site-search__chips .ui-badge { cursor: pointer; text-decoration: none; transition: border-color var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart), background var(--dur-base) var(--ease-out-quart); } .site-search__chips .ui-badge:hover { background: var(--clr-primary-900); border-color: var(--clr-primary-900); color: #fff; } .site-search { /* Browse — icon tile grid (Publications / People / Events / News / Equipment) */ } .site-search__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); } .site-search__tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: #fff; color: var(--clr-gray-900); text-decoration: none; position: relative; overflow: hidden; transition: border-color var(--dur-base) var(--ease-out-quart), background var(--dur-base) var(--ease-out-quart); /* precision accent — left teal line on hover */ } .site-search__tile::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--clr-accent-teal, var(--clr-primary-900)); transition: height var(--dur-base) var(--ease-out-quart), top var(--dur-base) var(--ease-out-quart); } .site-search__tile:hover { border-color: var(--clr-primary-900); background: var(--clr-gray-50); } .site-search__tile:hover::before { height: 60%; top: 20%; } .site-search__tile:hover .site-search__tile-arrow { transform: translateX(4px); color: var(--clr-primary-900); } .site-search__tile-icon { color: var(--clr-primary-900); } .site-search__tile-label { color: var(--clr-gray-900); } .site-search__tile-arrow { color: var(--clr-gray-400); transition: transform var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart); } .site-search { /* ── Live results ── */ } .site-search__live-groups { display: flex; flex-direction: column; gap: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 2.8rem); } .site-search__live-group { display: flex; flex-direction: column; gap: 0.4rem; background: var(--clr-gray-50); border-radius: var(--radius-md); padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); } .site-search__live-group-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.8rem; border-bottom: 1px solid var(--clr-gray-300); margin-bottom: 0.4rem; } .site-search__live-group-label { color: var(--clr-primary-900); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; } .site-search__live-group-count { color: var(--clr-gray-500); } .site-search__live-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .site-search__hit { display: flex; align-items: flex-start; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) 0.4rem; border-radius: var(--radius-sm); color: var(--clr-gray-900); text-decoration: none; transition: background var(--dur-base) var(--ease-out-quart); } .site-search__hit:hover, .site-search__hit.is-active { background: #fff; } .site-search__hit:hover .site-search__hit__hit-title, .site-search__hit.is-active .site-search__hit__hit-title { color: var(--clr-primary-900); } .site-search__hit:hover .site-search__hit__hit-arrow, .site-search__hit.is-active .site-search__hit__hit-arrow { color: var(--clr-primary-900); transform: translateX(4px); } .site-search__hit-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .site-search__hit-title { color: var(--clr-gray-900); margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; transition: color var(--dur-base) var(--ease-out-quart); } .site-search__hit-meta { color: var(--clr-gray-500); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-search__hit-thumb { flex-shrink: 0; width: 4.8rem; height: 4.8rem; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--clr-gray-200); align-self: center; } .site-search__hit-arrow { color: var(--clr-gray-300); align-self: center; transition: color var(--dur-base) var(--ease-out-quart), transform var(--dur-base) var(--ease-out-quart); } .site-search { /* ── See all link ── */ } .site-search__see-all { display: inline-flex; align-items: center; gap: 0.8rem; align-self: flex-start; padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.2rem); border: 1px solid var(--clr-primary-900); border-radius: var(--radius-round); color: var(--clr-primary-900); background: transparent; text-decoration: none; transition: background var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart); } .site-search__see-all:hover { background: var(--clr-primary-900); color: #fff; } .site-search__see-all i { transition: transform var(--dur-base) var(--ease-out-quart); } .site-search__see-all:hover i { transform: translateX(4px); } .site-search { /* ── Empty / Loading ── */ } .site-search__empty, .site-search__loading { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 4.8rem) 0; color: var(--clr-gray-600); } .site-search__loading { flex-direction: row; justify-content: center; } .site-search__spinner { width: 1.8rem; height: 1.8rem; border: 2px solid var(--clr-gray-200); border-top-color: var(--clr-primary-900); border-radius: 50%; display: inline-block; animation: site-search-spin 0.8s linear infinite; } @keyframes site-search-spin { to { transform: rotate(360deg); } } html.is-search-open { overflow: hidden; } /* Site-specific components */ /* =================================================== Badge / Tag component Usage: Research =================================================== */ .ui-badge { display: inline-flex; align-self: baseline; align-items: center; justify-content: center; padding: 0.7rem 1rem 0.5rem; border-radius: var(--radius-round); font-size: var(--body-xs-fs); font-weight: 600; line-height: 1; white-space: nowrap; letter-spacing: 0.02em; text-transform: uppercase; background: var(--clr-primary-50); color: var(--clr-primary-900); /* --- filled variants --- */ } .ui-badge--primary { background: var(--clr-primary-900); color: #fff; } .ui-badge--blue { background: var(--clr-primary-400); color: #fff; } .ui-badge--research { background: #e8f4fb; color: #004a82; } .ui-badge--announcement { background: #fef3c7; color: #92400e; } .ui-badge--partnership { background: #ede9fe; color: #5b21b6; } .ui-badge--press { background: #fce7f3; color: #9d174d; } .ui-badge--award { background: #fef9c3; color: #713f12; } .ui-badge--event { background: #dcfce7; color: #14532d; } .ui-badge { /* --- outline variant --- */ } .ui-badge--outline { background: transparent; border: 1px solid var(--clr-primary-400); color: var(--clr-primary-900); } .ui-badge--outline-white { background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; } .ui-badge { /* --- size modifier --- */ } .ui-badge--sm { font-size: var(--body-xs-fs); padding: 0.2rem 0.8rem; } .ui-badge--lg { font-size: var(--body-xs-fs); padding: 0.5rem 1.4rem; } .ui-badge { /* --- priority badges (Usage Procedures table) --- */ } .ui-badge--high { background: #004a82; color: #fff; } .ui-badge--standard { background: #e5e7eb; color: #374151; } .ui-badge--case { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; } /* =================================================== Tabs component Usage: =================================================== */ .ui-tabs { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--clr-gray-200); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .ui-tabs::-webkit-scrollbar { display: none; } .ui-tabs__item { position: relative; display: inline-flex; align-items: center; padding: 1.2rem 1.8rem; font-size: var(--body-sm-fs); font-weight: 500; color: var(--clr-gray-500); white-space: nowrap; cursor: pointer; border: 0; background: transparent; transition: color 0.2s ease; text-decoration: none; } .ui-tabs__item::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--clr-primary-900); transform: scaleX(0); transition: transform 0.2s ease; } .ui-tabs__item:hover { color: var(--clr-primary-900); } .ui-tabs__item.is-active { color: var(--clr-primary-900); font-weight: 600; } .ui-tabs__item.is-active::after { transform: scaleX(1); } @media (max-width: 544px) { .ui-tabs__item { padding: 1rem 1.2rem; font-size: var(--body-xs-fs); } } .ui-tabs { /* pill variant (News category tabs) */ } .ui-tabs--pill { gap: 0.8rem; border-bottom: 0; flex-wrap: wrap; } .ui-tabs--pill .ui-tabs__item { padding: 0.7rem 1.6rem; border-radius: var(--radius-round); border: 1px solid var(--clr-gray-300); color: var(--clr-gray-600); } .ui-tabs--pill .ui-tabs__item::after { display: none; } .ui-tabs--pill .ui-tabs__item:hover { border-color: var(--clr-primary-900); color: var(--clr-primary-900); } .ui-tabs--pill .ui-tabs__item.is-active { background: var(--clr-primary-900); border-color: var(--clr-primary-900); color: #fff; } .ui-tabs { /* view-toggle variant (List / Calendar) */ } .ui-tabs--toggle { gap: 0.4rem; border-bottom: 0; } .ui-tabs--toggle .ui-tabs__item { padding: 0.8rem 1.4rem; border-radius: var(--radius-sm); border: 1px solid var(--clr-gray-300); color: var(--clr-gray-600); } .ui-tabs--toggle .ui-tabs__item::after { display: none; } .ui-tabs--toggle .ui-tabs__item.is-active { background: var(--clr-primary-900); border-color: var(--clr-primary-900); color: #fff; } .ui-tabs { /* =================================================== Swiper 모드 (UiTabsSwiper / data-tabs-swiper) — 탭이 넘칠 때 드래그·스와이프 + 좌우 화살표로 스크롤. 화살표는 `.ui-tabs-rail` 이 양옆 별도 칸에 배치(항목과 겹치지 않음). =================================================== */ } .ui-tabs.swiper { overflow: hidden; /* overflow-x: auto 를 swiper 모드에서 대체 */ } .ui-tabs .swiper-wrapper { display: flex; align-items: center; } .ui-tabs { /* 슬라이드 = 평면 `` 또는 `
  • ` 래퍼 둘 다 지원 */ } .ui-tabs .swiper-slide { width: auto; /* slidesPerView: 'auto' */ flex-shrink: 0; list-style: none; } /* =================================================== Tabs rail — swiper 모드의 바깥 셸 (UiTabsSwiper 가 런타임 생성) 레이아웃: 가운데 `.ui-tabs`(스크롤 viewport) 풀폭 + 화살표는 absolute 로 컨테이너 거터(gutter) 영역으로 빼냄 → 탭 항목과 물리적으로 겹치지 않음. rail 은 컨테이너(no-container-*, gutter 2rem) 안에 있고, 화살표만 음수 offset 으로 거터(=컨테이너 가장자리 바깥 여백)에 떠 있는다. =================================================== */ .ui-tabs-rail { position: relative; /* 가운데 swiper viewport — rail 풀폭 차지, 잘림 허용(내부 swiper 가 스크롤) */ } .ui-tabs-rail .ui-tabs.swiper { width: 100%; min-width: 0; } .ui-tabs-rail { /* prev / next 화살표 버튼 (rail BEM 자식 — 컴포넌트 정본, 규칙 #17 토큰 참조 허용) absolute 로 탭 스트립 좌/우 끝 바깥(거터)에 배치. top/bottom 0 + flex center 로 탭 글자와 수직 중앙 정렬(탭 border-bottom 1px 까지 box 높이 공유). */ } .ui-tabs-rail__arrow { position: absolute; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: var(--gutter); /* 거터 폭(2rem=20px)과 동일 — viewport 밖 클리핑 방지 */ padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity 0.2s ease; } .ui-tabs-rail__arrow::after { content: ""; display: block; width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--clr-gray-700); border-bottom: 2px solid var(--clr-gray-700); } .ui-tabs-rail__arrow:hover::after { border-color: var(--clr-primary-900); } .ui-tabs-rail__arrow { /* 거터로 빼냄: 탭 스트립 좌/우 끝 바깥(=거터 영역)에 폭 == gutter 로 flush 배치. arrow 폭(var(--gutter)) == 컨테이너 거터 폭이라 viewport 밖 클리핑 0. */ } .ui-tabs-rail__arrow--prev { right: 100%; } .ui-tabs-rail__arrow--prev::after { transform: rotate(135deg) translate(2px, -2px); } .ui-tabs-rail__arrow--next { left: 100%; } .ui-tabs-rail__arrow--next::after { transform: rotate(-45deg) translate(-2px, 2px); } .ui-tabs-rail__arrow { /* watchOverflow — 넘침 없으면(데스크톱 등) 화살표 숨김 */ } .ui-tabs-rail__arrow.swiper-button-disabled { opacity: 0; pointer-events: none; } /* =================================================== Section layout helpers Provides consistent section padding, backgrounds, page-header (centered hero layout), and feature grids. =================================================== */ /* ── Page-level header (centered hero — two-column) * 컴포넌트 SCSS 는 utility 가 표현 못 하는 layout/color 만 정의: * text-align, max-width, margin-inline, justify-content, color. * 타이포 위계(size/weight/family/line-height) 와 spacing(padding/margin) * 은 모두 HTML 유틸 클래스(`no-display-*`, `no-section-*`, `no-mg-*-b`) 가 * 담당 — Rule #17 컴포넌트 예외 안에서 위계·spacing 직접지정 0건. * 사용: components.comm.page-header partial. */ .ui-page-header { text-align: center; background: var(--clr-background-primary); } .ui-page-header__breadcrumb { justify-content: center; color: var(--clr-primary-500); } .ui-page-header__breadcrumb a { color: inherit; } .ui-page-header__breadcrumb a:hover, .ui-page-header__breadcrumb a:focus-visible { color: var(--clr-primary-700); } .ui-page-header__breadcrumb span:not(.ui-breadcrumb__sep) { color: var(--clr-text-secondary); } .ui-page-header__title { color: var(--clr-text-primary); } .ui-page-header__desc { max-width: 68ch; margin-inline: auto; color: var(--clr-text-secondary); } .ui-page-header { /* split variant — 좌: 텍스트, 우: 이미지 (스타일) */ } .ui-page-header--split { text-align: left; } .ui-page-header--split .ui-page-header__breadcrumb { justify-content: flex-start; } .ui-page-header--split .ui-page-header__desc { margin-inline: 0; max-width: 60ch; } .ui-page-header__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--spacing-4xl); align-items: center; } @media (max-width: 768px) { .ui-page-header__grid { grid-template-columns: 1fr; gap: var(--spacing-2xl); } } .ui-page-header__copy { /* 타이포는 유틸 클래스 담당 */ } .ui-page-header__figure { margin: 0; } @media (max-width: 768px) { .ui-page-header__figure { order: -1; } } .ui-page-header__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); display: block; } .ui-page-header__caption { display: block; color: var(--clr-text-tertiary); } .ui-page-header--insight { position: relative; overflow: hidden; padding-top: calc(var(--header-height) + var(--section-xl)); text-align: center; background-color: var(--clr-primary-900); background-image: linear-gradient(180deg, rgba(22, 22, 47, 0.78), rgba(22, 22, 47, 0.84)), radial-gradient(circle at 50% 20%, rgba(197, 145, 65, 0.32), transparent 34%), url("/assets/images/main/clients-partners-bg.jpg"); background-size: cover; background-position: center; } .ui-page-header--insight::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: var(--spacing-3xl) var(--spacing-3xl); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.65) 26%, rgba(0, 0, 0, 0.45) 100%); } .ui-page-header--insight::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(22, 22, 47, 0.18), rgba(22, 22, 47, 0.74)); } .ui-page-header--insight > .no-container-xl { position: relative; z-index: 1; } .ui-page-header--insight .ui-page-header__breadcrumb { justify-content: center; color: var(--clr-accent-300); } .ui-page-header--insight .ui-page-header__breadcrumb a { color: var(--clr-accent-300); } .ui-page-header--insight .ui-page-header__breadcrumb a:hover, .ui-page-header--insight .ui-page-header__breadcrumb a:focus-visible { color: var(--clr-accent-500); } .ui-page-header--insight .ui-page-header__breadcrumb span:not(.ui-breadcrumb__sep) { color: var(--clr-base-white); } .ui-page-header--insight .ui-page-header__breadcrumb .ui-breadcrumb__sep { background-color: var(--clr-accent-500); opacity: 0.9; } .ui-page-header--insight .ui-page-header__title { color: var(--clr-base-white); } .ui-page-header--insight .ui-page-header__desc { margin-inline: auto; max-width: 68ch; color: rgba(255, 255, 255, 0.86); } .ui-page-header--insight .ui-page-header__grid { display: block; } .ui-page-header--insight .ui-page-header__copy { max-width: 82rem; margin-inline: auto; } .ui-page-header--insight .ui-page-header__figure { display: none; } /* ── Generic section wrapper ── */ .ui-section { padding: var(--section-lg) 0; } .ui-section--sm { padding: var(--section-md) 0; } .ui-section--lg { padding: var(--section-xl) 0; } .ui-section { /* background variants */ } .ui-section--light { background: var(--clr-background-page); } .ui-section--navy { background: var(--clr-primary-900); color: #fff; } .ui-section--navy .ui-section__title, .ui-section--navy .ui-section__label { color: #fff; } .ui-section--navy .ui-section__desc { color: rgba(255, 255, 255, 0.75); } .ui-section--white { background: #fff; } .ui-section__label { display: block; font-size: var(--body-xs-fs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-primary-400); margin-bottom: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); } .ui-section__title { font-size: var(--heading-lg-fs); font-weight: 700; line-height: 1.25; color: var(--clr-gray-900); margin-bottom: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); } .ui-section__desc { font-size: var(--body-lg-fs); line-height: 1.7; color: var(--clr-text-secondary); max-width: 68ch; } .ui-section { /* centered header variant */ } .ui-section__head--center { text-align: center; } .ui-section__head--center .ui-section__desc { margin: 0 auto; } /* ── Feature grid (2-4 columns) ── */ .ui-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .ui-feature-grid--3 { grid-template-columns: repeat(3, 1fr); } .ui-feature-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1024px) { .ui-feature-grid { grid-template-columns: repeat(2, 1fr); } .ui-feature-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .ui-feature-grid { grid-template-columns: 1fr; } .ui-feature-grid--2 { grid-template-columns: 1fr; } } /* ── Feature card (icon / number + title + body) ── */ .ui-feature-card { padding: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem) clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); border-radius: var(--radius-md); background: #fff; border: 1px solid var(--clr-gray-200); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .ui-feature-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -16px rgba(15, 23, 42, 0.18); border-color: var(--clr-gray-300, var(--clr-gray-200)); } .ui-feature-card__number { font-size: var(--heading-lg-fs); font-weight: 700; color: var(--clr-primary-400); line-height: 1; margin-bottom: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); display: block; } .ui-feature-card__label { font-size: var(--body-xs-fs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-gray-400); margin-bottom: 0.6rem; display: block; } .ui-feature-card__title { font-size: var(--heading-sm-fs); font-weight: 600; color: var(--clr-gray-900); margin-bottom: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); line-height: 1.35; } .ui-feature-card__body { font-size: var(--body-sm-fs); line-height: 1.7; color: var(--clr-text-secondary); } .ui-feature-card__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); font-size: var(--body-sm-fs); font-weight: 600; color: var(--clr-primary-400); text-decoration: none; transition: gap 0.2s ease; } .ui-feature-card__link:hover { gap: 0.8rem; } .ui-feature-card { /* navy filled variant */ } .ui-feature-card--navy { background: var(--clr-primary-900); border-color: var(--clr-primary-900); } .ui-feature-card--navy:hover { border-color: var(--clr-primary-900); box-shadow: 0 14px 32px -16px rgba(15, 23, 42, 0.4); } .ui-feature-card--navy .ui-feature-card__number, .ui-feature-card--navy .ui-feature-card__title { color: #fff; } .ui-feature-card--navy .ui-feature-card__label, .ui-feature-card--navy .ui-feature-card__body { color: rgba(255, 255, 255, 0.65); } .ui-feature-card--navy .ui-feature-card__link { color: var(--clr-primary-400); } /* ── Divider ── */ .ui-divider { width: 100%; height: 1px; background: var(--clr-gray-200); margin: var(--section-sm) 0; } .ui-divider--navy { background: rgba(255, 255, 255, 0.15); } /* section-head — 섹션 공통 헤더 (eyebrow + 2단 제목/카피) * * 구조: row1 = eyebrow(좌측 라벨) / row2 = [제목 | 카피] 2단. * eyebrow 가 별도 상단 행이라 우측 카피 상단이 제목(h2) 상단과 정렬된다. * 타이포 위계·spacing 은 HTML 유틸/토큰이 담당 — 본 SCSS 는 layout/color 만 * (#17 컴포넌트 예외 범위: 위계·spacing 직접 지정 0건). */ .section-head { display: grid; } .section-head__eyebrow { color: var(--eyebrow-color, var(--clr-accent-700)); font-size: var(--overline-fs); font-weight: var(--overline-fw); line-height: var(--overline-lh); letter-spacing: var(--tracking-caps); text-transform: uppercase; /* 색상 prop(eyebrowColor) — 토큰 화이트리스트 → modifier 로만 (인라인 style 금지 #5). * 요소 자신에 --eyebrow-color 를 세팅 → on-dark 가 root 에 내린 값보다 우선. */ } .section-head__eyebrow--accent-300 { --eyebrow-color: var(--clr-accent-300); } .section-head__eyebrow--accent-500 { --eyebrow-color: var(--clr-accent-500); } .section-head__eyebrow--accent-700 { --eyebrow-color: var(--clr-accent-700); } .section-head__eyebrow--primary { --eyebrow-color: var(--clr-primary-900); } .section-head__eyebrow--white { --eyebrow-color: var(--clr-base-white); } .section-head__eyebrow--muted { --eyebrow-color: var(--clr-text-sub); } .section-head__main { display: grid; /* 좌(제목) : 우(카피) 균등 2단. minmax(0,1fr) 로 콘텐츠 overflow 방지. * 우측 카피가 절반 폭을 확보 → 한글 어절 줄바꿈이 자연스럽고 중앙 빈 공간 제거. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-4xl); margin-top: var(--spacing-lg); align-items: start; } @media (max-width: 768px) { .section-head__main { grid-template-columns: 1fr; } } .section-head--align-end .section-head__main { align-items: end; } .section-head__copy { display: grid; color: var(--clr-text-sub); /* 마지막 줄 고아·짧은 꼬리 방지 (줄바꿈 다듬기, 타이포 위계와 무관) */ } .section-head__copy p { text-wrap: pretty; } .section-head__copy { /* 본문 강조(bodyHighlight) — 으로 위계 부여 */ } .section-head__copy strong { font-weight: 700; color: var(--clr-text-base); } .section-head__copy { /* CTA 는 래퍼 div(.no-pd-lg--t)로 상단 간격만 부여 — 좌측 정렬은 .ui-cta(inline-flex) 자연 정렬. * 카피 내부 간격은 gap 제거됨 → 각 요소가 유틸/마진으로 개별 제어(#17-B). */ } .section-head { /* 제목 강조 박스 — 색/배경/간격만 (글꼴 위계는 제목 유틸 상속) */ } .section-head__mark { background: var(--clr-primary-900); color: var(--clr-base-white); padding: 0 var(--spacing-xs); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .section-head { /* 다크 배경 위 색 보정 */ } .section-head--on-dark { /* eyebrow 기본색(다크). eyebrowColor prop 이 있으면 요소 레벨에서 덮어씀. */ --eyebrow-color: var(--clr-accent-300); } .section-head--on-dark .section-head__title { color: var(--clr-base-white); } .section-head--on-dark .section-head__copy { color: rgba(255, 255, 255, 0.74); } .section-head--on-dark .section-head__copy strong { color: var(--clr-base-white); } .section-head--on-dark { /* 강조 박스: 다크 위에서는 크림 박스 + 네이비 글자로 반전 */ } .section-head--on-dark .section-head__mark { background: var(--clr-bg-page); color: var(--clr-primary-900); } /* section-background — 섹션 배경 텍스처/이미지 오버레이 (공통 컴포넌트) * * 구조:
    직계 자식
    > . * z-index:-1 로 "배경 위·콘텐츠 아래"에 깔려 본문 가독성은 그대로 유지. * mix-blend-mode 로 섹션 배경색과 합성하고, 강도는 opacity 로 조절. * * ── 호스트 요건 (필수) ────────────────────────────── * 부모
    에 아래 둘이 반드시 있어야 정상 동작: * position: relative; // absolute inset:0 의 기준 컨테이너 * isolation: isolate; // mix-blend 합성을 이 섹션 내부로 한정 (뒤 섹션과 안 섞이게) * * ── 섹션별 조정 ───────────────────────────────────── * 호스트에서 CSS 변수만 덮어쓰면 됨 (별도 SCSS 변형 만들지 말 것): * --section-bg-opacity : 합성 강도 (기본 0.6) * --section-bg-blend : 합성 모드 (기본 overlay) */ .section-background { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: var(--section-bg-blend, overlay); opacity: var(--section-bg-opacity, 0.6); } .section-background img { width: 100%; height: 100%; object-fit: cover; } /* =================================================== Card components Variants: base / --person / --publication / --event =================================================== */ /* ── Base card (News, Activities) ── */ .ui-card { display: flex; flex-direction: column; border-radius: var(--radius-md); background: var(--clr-background-card); border: 1px solid var(--clr-gray-200); overflow: hidden; text-decoration: none; color: inherit; } .ui-card:hover .ui-card__img { transform: scale(1.04); } .ui-card:hover .ui-card__title { color: var(--clr-primary-400); } .ui-card__img { position: relative; overflow: hidden; aspect-ratio: 16/9; background: var(--clr-gray-100); flex-shrink: 0; transition: transform 0.4s ease; } .ui-card__img img { width: 100%; height: 100%; object-fit: cover; } .ui-card__body { display: flex; flex-direction: column; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); flex: 1; } .ui-card__meta { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .ui-card__category { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-primary-400); } .ui-card__date { font-size: var(--body-xs-fs); color: var(--clr-gray-400); } .ui-card__title { font-size: var(--heading-sm-fs); font-weight: 600; line-height: 1.4; color: var(--clr-gray-900); transition: color 0.25s ease; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; } .ui-card__excerpt { font-size: var(--body-sm-fs); line-height: 1.65; color: var(--clr-text-secondary); overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; } .ui-card__author { font-size: var(--body-xs-fs); color: var(--clr-gray-400); margin-top: auto; } .ui-card { /* flat variant (상세 페이지 Latest news — 박스 없이 이미지 flush + 아래 텍스트) */ } .ui-card--flat { border: none; border-radius: 0; background: transparent; overflow: visible; } .ui-card--flat .ui-card__img { border-radius: 0; } .ui-card--flat .ui-card__body { padding-inline: 0; padding-bottom: 0; padding-top: var(--spacing-md); } .ui-card { /* horizontal list-row variant (Events list, Activities list) */ } .ui-card--row { flex-direction: row; align-items: flex-start; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); border-radius: var(--radius-sm); padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); border: 1px solid var(--clr-gray-200); background: #fff; } .ui-card--row:hover .ui-card__img { transform: scale(1.04); } .ui-card--row:hover .ui-card__title { color: var(--clr-primary-400); } .ui-card--row .ui-card__img { aspect-ratio: auto; width: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem); height: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem); flex-shrink: 0; border-radius: var(--radius-sm); } .ui-card--row .ui-card__body { padding: 0; gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); } /* ── Person card (People page — 2-col grid, 좌측 3:4 풀하이트 이미지) ── */ .ui-card--person { display: flex; flex-direction: row; align-items: stretch; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--clr-gray-200); overflow: hidden; height: 100%; cursor: pointer; transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.12s ease; } .ui-card--person:hover { box-shadow: 0 6px 24px rgba(0, 74, 130, 0.12); border-color: var(--clr-primary-200, #b3d4ed); } .ui-card--person:active { transform: scale(0.985); box-shadow: 0 2px 8px rgba(0, 74, 130, 0.08); } .ui-card--person .ui-card__thumb { flex: 0 0 clamp(16rem, 2.5889967638vw + 15.0291262136rem, 20rem); align-self: stretch; overflow: hidden; background: var(--clr-gray-100); } .ui-card--person .ui-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ui-card--person { /* 사진 없는 인물 — 이름 기반 색조 그라데이션 + 이니셜 텍스트 */ } .ui-card--person .ui-card__thumb--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, hsl(calc(207deg + var(--ph-hue, 0deg)), 55%, 90%), hsl(calc(207deg + var(--ph-hue, 0deg)), 55%, 82%)); } .ui-card--person .ui-card__thumb-initial { font-size: clamp(3.2rem, 0.7766990291vw + 2.9087378641rem, 4.4rem); font-weight: 700; line-height: 1; color: hsl(calc(207deg + var(--ph-hue, 0deg)), 45%, 32%); letter-spacing: -0.02em; user-select: none; } .ui-card--person .ui-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); } .ui-card--person .ui-card__name { font-size: var(--heading-xs-fs); font-weight: 700; color: var(--clr-gray-900); line-height: 1.3; } .ui-card--person .ui-card__name button { all: unset; cursor: pointer; display: block; } .ui-card--person .ui-card__role { font-size: var(--body-sm-fs); font-weight: 700; color: var(--clr-primary-500, var(--clr-primary-400)); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.5rem; } .ui-card--person .ui-card__affiliation { font-size: var(--body-xs-fs); color: var(--clr-text-secondary); line-height: 1.5; margin-top: 0.6rem; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; } .ui-card--person .ui-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin-top: 1rem; } .ui-card--person .ui-card__tag { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--clr-gray-300); background: var(--clr-gray-100); color: var(--clr-gray-700); font-size: var(--body-xs-fs); font-weight: 600; line-height: 1.2; text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s; } .ui-card--person .ui-card__tag:hover { border-color: var(--clr-primary-400); color: var(--clr-primary-700, var(--clr-primary-900)); } .ui-card--person .ui-card__tag--leader { border-color: var(--clr-primary-400); background: var(--clr-primary-50, #e6f2fa); color: var(--clr-primary-700, var(--clr-primary-900)); } .ui-card--person .ui-card__tag-leader-mark { color: var(--clr-primary-400); font-size: 0.9em; line-height: 1; } .ui-card--person .ui-card__email { font-size: var(--body-xs-fs); color: var(--clr-primary-400); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; } .ui-card--person .ui-card__email:hover { text-decoration: underline; } .ui-card--person .ui-card__links { display: flex; gap: 0.8rem; margin-top: 1rem; } .ui-card--person .ui-card__links a { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--clr-gray-300); color: var(--clr-gray-500); font-size: var(--body-sm-fs); transition: border-color 0.2s, color 0.2s; } .ui-card--person .ui-card__links a:hover { border-color: var(--clr-primary-400); color: var(--clr-primary-400); } @media (max-width: 544px) { .ui-card--person { flex-direction: column; } .ui-card--person .ui-card__thumb { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 4/3; max-height: 28rem; } } /* ── Publication card (Publications page — list) ── */ .ui-card--publication { padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: #fff; display: flex; flex-direction: column; gap: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.4rem); transition: border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); } .ui-card--publication:hover { border-color: var(--clr-primary-400); box-shadow: 0 4px 16px rgba(15, 76, 129, 0.06); } .ui-card--publication .ui-card__pub-meta { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .ui-card--publication .ui-card__pub-journal { font-size: var(--body-xs-fs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-primary-400); } .ui-card--publication .ui-card__pub-date { font-size: var(--body-xs-fs); color: var(--clr-gray-400); } .ui-card--publication .ui-card__pub-title { font-size: var(--heading-xs-fs); font-weight: 600; line-height: 1.45; color: var(--clr-gray-900); text-decoration: none; } .ui-card--publication .ui-card__pub-title:hover { color: var(--clr-primary-400); } .ui-card--publication .ui-card__pub-authors { font-size: var(--body-xs-fs); color: var(--clr-text-secondary); line-height: 1.5; } .ui-card--publication .ui-card__pub-venue { font-size: var(--body-xs-fs); color: var(--clr-gray-400); font-style: italic; } .ui-card--publication .ui-card__pub-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; } .ui-card--publication .ui-card__pub-doi { font-size: var(--body-xs-fs); color: var(--clr-primary-400); text-decoration: none; } .ui-card--publication .ui-card__pub-doi:hover { text-decoration: underline; } /* ── Event card (Events page — date-block + info) ── */ .ui-card--event { display: flex; flex-direction: row; align-items: flex-start; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); border-radius: var(--radius-md); background: #fff; border: 1px solid var(--clr-gray-200); transition: box-shadow 0.25s ease; } .ui-card--event:hover { box-shadow: 0 4px 16px rgba(0, 74, 130, 0.1); } .ui-card--event .ui-card__date-block { flex-shrink: 0; width: clamp(5.6rem, 1.0355987055vw + 5.2116504854rem, 7.2rem); border-radius: var(--radius-sm); background: var(--clr-primary-900); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.8rem 0.6rem; text-align: center; } .ui-card--event .ui-card__date-block .month { font-size: var(--body-xs-fs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; } .ui-card--event .ui-card__date-block .day { font-size: var(--heading-md-fs); font-weight: 700; line-height: 1; } .ui-card--event .ui-card__date-block .year { font-size: var(--body-xs-fs); opacity: 0.6; } .ui-card--event .ui-card__date-block .type { font-size: var(--body-xs-fs); font-weight: 700; text-transform: uppercase; margin-top: 0.4rem; opacity: 0.75; } .ui-card--event .ui-card__event-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); } .ui-card--event .ui-card__event-type-badge { /* badge handled by .ui-badge */ } .ui-card--event .ui-card__event-title { font-size: var(--heading-sm-fs); font-weight: 600; line-height: 1.35; color: var(--clr-gray-900); } .ui-card--event .ui-card__event-detail { font-size: var(--body-xs-fs); color: var(--clr-text-secondary); display: flex; align-items: center; gap: 0.6rem; } .ui-card--event .ui-card__event-detail i { font-size: 1.4rem; color: var(--clr-primary-400); flex-shrink: 0; } .ui-card--event .ui-card__event-actions { display: flex; gap: 0.8rem; margin-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); flex-wrap: wrap; } .ui-card--event { /* 선택적 썸네일 — date-block 다음, 본문 앞. 요소가 있을 때만 렌더된다. */ } .ui-card--event .ui-card__thumb { flex-shrink: 0; width: clamp(12rem, 3.8834951456vw + 10.5436893204rem, 18rem); aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; background: var(--clr-gray-100); } .ui-card--event .ui-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 544px) { .ui-card--event { flex-direction: column; } .ui-card--event .ui-card__thumb { width: 100%; aspect-ratio: 16/9; } } /* ── Event card — compact (제목 + 시간 중심, 패딩 축소) ── */ .ui-card--event.ui-card--compact { padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); gap: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); } .ui-card--event.ui-card--compact .ui-card__date-block { width: clamp(4.8rem, 0.7766990291vw + 4.5087378641rem, 6rem); padding: 0.6rem 0.5rem; } /* ── Year-group separator (Publications grouped by year) ── */ .ui-year-group { display: flex; flex-direction: column; gap: var(--spacing-lg); } .ui-year-group + .ui-year-group { margin-top: var(--spacing-3xl); } .ui-year-group__heading { font-size: var(--heading-md-fs); font-weight: 700; color: var(--clr-gray-900); margin-bottom: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); padding-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); border-bottom: 2px solid var(--clr-primary-900); } /* =================================================== event-card-wide — 가로형 이벤트 카드 좌측 큰 이미지(날짜 오버레이) + 우측 일시·제목·설명·CTA 규칙: layout/position/color(토큰)만. 타이포 위계·spacing 은 마크업 .no-* 유틸. (#17) =================================================== */ .event-card-wide { display: flex; flex-direction: row; align-items: stretch; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); padding-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); border-bottom: 1px solid var(--clr-gray-200); /* ── 좌측 미디어 (이미지 + 날짜 오버레이 + 종료 라벨) ── */ } .event-card-wide__media { position: relative; flex-shrink: 0; width: clamp(42rem, 14.2394822006vw + 36.6601941748rem, 64rem); overflow: hidden; border-radius: var(--radius-sm); } .event-card-wide__img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--clr-gray-100); transition: transform 0.3s ease, filter 0.3s ease; } .event-card-wide__date { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.8rem 1.2rem; background: var(--clr-primary-900); color: #fff; border-bottom-right-radius: var(--radius-sm); text-align: center; } .event-card-wide__date-top { text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; } .event-card-wide__date-bottom { line-height: 1; } .event-card-wide__status { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.6rem 1.2rem; background: var(--clr-primary-900); color: #fff; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; } .event-card-wide { /* ── 우측 본문 ── */ } .event-card-wide__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .event-card-wide__datetime { color: var(--clr-primary-400); text-transform: uppercase; letter-spacing: 0.04em; } .event-card-wide__title { color: var(--clr-gray-900); transition: color 0.25s ease; } .event-card-wide__excerpt { color: var(--clr-text-secondary); overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; } .event-card-wide:hover .event-card-wide__img { transform: scale(1.04); } .event-card-wide:hover .event-card-wide__title { color: var(--clr-primary-400); } .event-card-wide { /* ── 종료된 행사: 어둡게 처리 ── */ } .event-card-wide--concluded .event-card-wide__img { filter: grayscale(0.8); opacity: 0.6; } .event-card-wide--concluded .event-card-wide__title, .event-card-wide--concluded .event-card-wide__datetime, .event-card-wide--concluded .event-card-wide__excerpt { color: var(--clr-text-secondary); } .event-card-wide--concluded:hover .event-card-wide__img { transform: none; } .event-card-wide--concluded:hover .event-card-wide__title { color: var(--clr-text-secondary); } .event-card-wide { /* ── 반응형: sm 이하 세로 전환 ── */ } @media (max-width: 544px) { .event-card-wide { flex-direction: column; gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); } .event-card-wide .event-card-wide__media { width: 100%; } } /* =================================================== Keyword chip — clickable keyword/tag pill. Publications list cards + detail meta(keywords row). Links to ?tag_id={id} (keyword filter). =================================================== */ .ui-card__pub-tags, .ui-keyword-chip-list { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; } .ui-keyword-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.3rem 0.9rem; border-radius: 999px; border: 1px solid var(--clr-gray-300); background: var(--clr-gray-100); color: var(--clr-gray-700); font-weight: 600; line-height: 1.2; text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s; } .ui-keyword-chip:hover, .ui-keyword-chip:focus-visible { border-color: var(--clr-primary-400); background: var(--clr-primary-50, #e6f2fa); color: var(--clr-primary-700, var(--clr-primary-900)); } /* =================================================== Publication detail meta — labeled definition rows. Used by components/publication-detail-meta.php (Publications detail). Typography hierarchy comes from no-* utilities in markup; here only layout + token-based spacing/color (#17 component exception). =================================================== */ .ui-pub-meta { margin: 0; display: flex; flex-direction: column; gap: var(--spacing-md); } .ui-pub-meta__row { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: clamp(0.8rem, 1.0355987055vw + 0.4116504854rem, 2.4rem); align-items: start; padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--clr-gray-200); } .ui-pub-meta__row:last-child { border-bottom: 0; padding-bottom: 0; } @media (max-width: 544px) { .ui-pub-meta__row { grid-template-columns: 1fr; gap: 0.4rem; } } .ui-pub-meta { /* Abstract spans wider line-height — block row. */ } .ui-pub-meta__row--block .ui-pub-meta__value { line-height: 1.7; } .ui-pub-meta__label { margin: 0; font-weight: 700; color: var(--clr-gray-500); text-transform: uppercase; letter-spacing: 0.04em; } .ui-pub-meta__value { margin: 0; color: var(--clr-gray-900); word-break: break-word; } .ui-pub-meta__value a { color: var(--clr-primary-400); text-decoration: none; } .ui-pub-meta__value a:hover, .ui-pub-meta__value a:focus-visible { text-decoration: underline; } .ui-pub-meta__abstract p { margin: 0 0 0.8rem; } .ui-pub-meta__abstract p:last-child { margin-bottom: 0; } /** * ui-cta — 표준 CTA * * variant: * --primary : 흰색 pill 버튼 (배경 무관하게 항상 white, navy 텍스트) * --filled : 채워진 navy pill (강조 CTA / submit) * --accent : 골드 채움 + 우측 박스형 화살표 (헤더 Contact 등 1차 CTA) * --boxed-navy: --accent 와 형태(박스+화살표) 100% 동일, 화이트 채움 + 네이비 (2차 CTA) * --ghost : 텍스트+화살표 심플 링크 (좌측 작대기 없음) * --secondary : primary 와 동일 (마크업 호환용) * * 형태(geometry)와 색(skin) 분리: 박스형 화살표 형태는 `--accent, --boxed-navy` 공통 블록 1곳에 * 정의 → 형태를 바꾸면 모든 boxed CTA 동시 반영. 색은 각 variant 가 입힌다. (#17-C / SOLID) * * 모션: * - 공통: hover 시 화살표 6px 우측 slide, color transition * - 토큰: var(--dur-base) var(--ease-out-quart) * 가이드: docs/03-constants/components.md §3.3 */ .ui-cta { /* 베이스 reset & 공통 */ display: inline-flex; align-items: center; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); font-family: var(--font-sans-family); font-size: var(--body-md-fs); font-weight: 600; line-height: 1; letter-spacing: var(--tracking-heading); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart), border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart); } .ui-cta__label { display: inline-block; line-height: 1; } .ui-cta__loader { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .ui-cta__loader[hidden] { display: none; } .ui-cta__loader i { display: block; animation: ui-cta-loader-spin 0.8s linear infinite; } .ui-cta[data-submitting="1"] .ui-cta__icon { display: none; } .ui-cta { /* 화살표 — hover 시 우측 6px slide. 라벨 baseline 과 수평 정렬 보장. */ } .ui-cta__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; font-size: 1em; transition: transform var(--dur-base) var(--ease-out-quart); /* 인라인 svg 또는 fontawesome 둘 다 지원 */ } .ui-cta__icon svg, .ui-cta__icon i { display: block; width: 1em; height: 1em; line-height: 1; font-size: inherit; vertical-align: middle; } .ui-cta:hover .ui-cta__icon, .ui-cta:focus-visible .ui-cta__icon { transform: translateX(6px); } .ui-cta { /* 브랜드 이미지 아이콘(예: 네이버지도 svg) — 화살표가 아니므로 hover 슬라이드 없음, 고정 크기 2rem(=20px) */ } .ui-cta__icon--img img { display: block; width: 2rem; height: 2rem; } .ui-cta:hover .ui-cta__icon--img, .ui-cta:focus-visible .ui-cta__icon--img { transform: none; } .ui-cta { /* --icon-left : 브랜드 마크를 라벨 좌측에 (네이버지도 등). DOM 순서로 좌측 배치됨. 우측 화살표 전용 hover 슬라이드(translateX)는 좌측 아이콘에 어울리지 않으므로 비활성. */ } .ui-cta--icon-left:hover .ui-cta__icon, .ui-cta--icon-left:focus-visible .ui-cta__icon { transform: none; } .ui-cta { /* press 시 살짝 눌림 (모든 variant 공통) */ } .ui-cta:active { transform: scale(0.98); } .ui-cta { /* 접근성: 키보드 포커스 링 */ } .ui-cta:focus-visible { outline: 2px solid var(--clr-accent-500); outline-offset: 3px; } .ui-cta { /* ─────────────────────────────── * --primary : 흰색 pill (배경 무관하게 항상 white) * ─────────────────────────────── */ } .ui-cta--primary { padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem) clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3rem); background: var(--clr-base-white); color: var(--clr-primary-900); border: 1px solid var(--clr-ui-border); border-radius: 999px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); /* mouse-click focus 는 hover 스타일 적용 안 함 */ } .ui-cta--primary:focus:not(:focus-visible) { background: var(--clr-base-white); border-color: var(--clr-ui-border); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); } .ui-cta--primary:hover, .ui-cta--primary:focus-visible { background: var(--clr-primary-50); border-color: var(--clr-primary-50); box-shadow: 0 6px 18px rgba(15, 76, 129, 0.12); } .ui-cta { /* ─────────────────────────────── * --filled : 채워진 navy pill (검색 submit, 강조 CTA) * 배경: primary-900 / 텍스트: 흰색 * ─────────────────────────────── */ } .ui-cta--filled { padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem) clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3rem); background: var(--clr-primary-900); color: var(--clr-base-white); border: 1px solid var(--clr-primary-900); border-radius: 999px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); } .ui-cta--filled:hover, .ui-cta--filled:focus-visible { background: var(--clr-primary-700); border-color: var(--clr-primary-700); box-shadow: 0 6px 18px rgba(15, 76, 129, 0.24); } .ui-cta { /* ─────────────────────────────── * Boxed CTA — 공통 형태(geometry). 라벨 + 좌측 구분선으로 분리된 우측 화살표 칸. * 색은 각 색 variant(--accent 골드 / --boxed-navy 화이트+네이비)가 입힌다. * ⚠ 형태를 바꾸려면 이 블록 한 곳만 수정 → 모든 boxed CTA 동시 반영. (#17-C / SOLID) * ─────────────────────────────── */ } .ui-cta--accent, .ui-cta--boxed-navy { /* 세로 패딩은 라벨에 둔다 → 화살표 칸(.__icon)이 stretch 로 버튼 "전체 높이"를 채워 완전한 박스 영역구분이 된다(레퍼런스 시안). 버튼엔 좌측 패딩만. */ padding: 0 0 0 clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); border-radius: var(--radius-xs); gap: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); } .ui-cta--accent .ui-cta__label, .ui-cta--boxed-navy .ui-cta__label { padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem) clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) 0; } .ui-cta--accent .ui-cta__icon, .ui-cta--boxed-navy .ui-cta__icon { align-self: stretch; display: inline-flex; align-items: center; padding: 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); border-left: 1px solid rgba(255, 255, 255, 0.35); /* 우측 모서리만 버튼 곡률에 맞춤 → 박스 fill 이 둥근 모서리 밖으로 안 삐져나옴 */ border-radius: 0 var(--radius-xs) var(--radius-xs) 0; } .ui-cta--accent, .ui-cta--boxed-navy { /* 화살표가 우측 구분 칸(끝선 flush)이라 base 의 hover 6px slide 는 칸을 버튼 밖으로 밀어냄 → boxed CTA 에서만 비활성. */ } .ui-cta--accent:hover .ui-cta__icon, .ui-cta--accent:focus-visible .ui-cta__icon, .ui-cta--boxed-navy:hover .ui-cta__icon, .ui-cta--boxed-navy:focus-visible .ui-cta__icon { transform: none; } .ui-cta { /* --accent : 골드 채움 skin (배경 accent-500 / 텍스트 흰색) — 1차 CTA */ } .ui-cta--accent { background: var(--clr-accent-500); color: var(--clr-base-white); border: 1px solid var(--clr-accent-500); /* 화살표 칸을 밝은 골드로 채워 영역구분(레퍼런스 시안의 박스) */ } .ui-cta--accent .ui-cta__icon { background: rgba(255, 255, 255, 0.15); } .ui-cta--accent:hover, .ui-cta--accent:focus-visible { background: var(--clr-accent-700); border-color: var(--clr-accent-700); } .ui-cta { /* --boxed-navy : 화이트 채움 + 네이비 skin (형태는 --accent 와 동일, 색만 다름) — 2차 CTA. 구분선은 네이비, hover 시 네이비 채움으로 반전(텍스트·구분선 흰색). */ } .ui-cta--boxed-navy { background: var(--clr-base-white); color: var(--clr-primary-900); border: 1px solid var(--clr-primary-900); /* 화살표 칸을 연한 네이비로 채워 영역구분(흰 배경 위 박스). 구분선도 네이비. */ } .ui-cta--boxed-navy .ui-cta__icon { border-left-color: rgba(36, 36, 79, 0.22); /* primary-900(#24244f) 구분선 */ background: rgba(36, 36, 79, 0.06); } .ui-cta--boxed-navy:hover, .ui-cta--boxed-navy:focus-visible { background: var(--clr-primary-900); color: var(--clr-base-white); border-color: var(--clr-primary-900); /* hover = 네이비 채움 반전 → 화살표 칸은 밝은 칸으로 (accent 와 동일 톤) */ } .ui-cta--boxed-navy:hover .ui-cta__icon, .ui-cta--boxed-navy:focus-visible .ui-cta__icon { border-left-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.15); } .ui-cta { /* ─────────────────────────────── * --secondary : primary 와 동일 (마크업 호환 유지) * ─────────────────────────────── */ } .ui-cta--secondary { padding: clamp(1.3rem, 0.2588996764vw + 1.2029126214rem, 1.7rem) clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); background: var(--clr-base-white); color: var(--clr-primary-900); border: 1px solid var(--clr-ui-border); border-radius: 999px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); /* mouse-click focus 는 hover 스타일 적용 안 함 */ } .ui-cta--secondary:focus:not(:focus-visible) { background: var(--clr-base-white); border-color: var(--clr-ui-border); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); } .ui-cta--secondary:hover, .ui-cta--secondary:focus-visible { background: var(--clr-primary-50); border-color: var(--clr-primary-50); box-shadow: 0 6px 18px rgba(15, 76, 129, 0.12); } .ui-cta { /* ─────────────────────────────── * --ghost : 텍스트+화살표 (심플 링크 스타일) * hover 변화 = (1) 라벨 navy→accent teal (2) 화살표 6px slide * ─────────────────────────────── */ } .ui-cta--ghost { padding: 0; background: transparent; color: var(--clr-primary-900); border: 0; font-size: var(--body-sm-fs); border-radius: 0; } .ui-cta--ghost:hover, .ui-cta--ghost:focus-visible { color: var(--clr-accent-500); } .ui-cta { /* ─────────────────────────────── * --outline : 외곽선 라운드-렉트 버튼 (배경 투명 + 1px 보더 + 우측 화살표) * hover = 채움 반전(보더색 배경 / 텍스트 흰색). on-dark 와 조합 가능. * ─────────────────────────────── */ } .ui-cta--outline { padding: clamp(1rem, 0.1941747573vw + 0.927184466rem, 1.3rem) clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); background: transparent; color: var(--clr-primary-900); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-sm); } .ui-cta--outline:hover, .ui-cta--outline:focus-visible { background: var(--clr-primary-900); border-color: var(--clr-primary-900); color: var(--clr-base-white); } .ui-cta { /* ─────────────────────────────── * --on-dark : 다크 배경 위 (Primary/Secondary/Ghost 모두 호환) * 사용: * ─────────────────────────────── */ } .ui-cta--on-dark.ui-cta--primary { /* 흰 pill 유지, border만 반투명 흰색으로 */ border-color: rgba(255, 255, 255, 0.4); } .ui-cta--on-dark.ui-cta--primary:hover, .ui-cta--on-dark.ui-cta--primary:focus-visible { background: var(--clr-primary-50); border-color: var(--clr-primary-50); } .ui-cta--on-dark.ui-cta--secondary { /* primary 와 동일하게 처리 */ border-color: rgba(255, 255, 255, 0.4); } .ui-cta--on-dark.ui-cta--secondary:hover, .ui-cta--on-dark.ui-cta--secondary:focus-visible { background: var(--clr-primary-50); border-color: var(--clr-primary-50); } .ui-cta--on-dark.ui-cta--ghost { color: var(--clr-base-white); } .ui-cta--on-dark.ui-cta--ghost:hover, .ui-cta--on-dark.ui-cta--ghost:focus-visible { color: var(--clr-accent-500); } .ui-cta--on-dark.ui-cta--outline { color: var(--clr-base-white); border-color: rgba(255, 255, 255, 0.5); } .ui-cta--on-dark.ui-cta--outline:hover, .ui-cta--on-dark.ui-cta--outline:focus-visible { background: var(--clr-base-white); border-color: var(--clr-base-white); color: var(--clr-primary-900); } .ui-cta { /* ─────────────────────────────── * Sizes * ─────────────────────────────── */ } .ui-cta--sm { font-size: var(--body-sm-fs); } .ui-cta--sm.ui-cta--primary, .ui-cta--sm.ui-cta--secondary, .ui-cta--sm.ui-cta--filled, .ui-cta--sm.ui-cta--outline { padding: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); } .ui-cta--sm { /* boxed CTA(accent·boxed-navy) — 세로패딩은 라벨로(화살표 칸 full-height 유지) + 축소 (헤더 Contact 등) */ } .ui-cta--sm.ui-cta--accent, .ui-cta--sm.ui-cta--boxed-navy { padding: 0 0 0 clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); } .ui-cta--sm.ui-cta--accent .ui-cta__label, .ui-cta--sm.ui-cta--boxed-navy .ui-cta__label { padding: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem) clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem) 0; } .ui-cta--sm.ui-cta--accent .ui-cta__icon, .ui-cta--sm.ui-cta--boxed-navy .ui-cta__icon { padding: 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } .ui-cta--lg { font-size: var(--body-lg-fs); } .ui-cta--lg.ui-cta--primary, .ui-cta--lg.ui-cta--secondary, .ui-cta--lg.ui-cta--filled { padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem) clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem); } @keyframes ui-cta-loader-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ui-cta__loader i { animation-duration: 1.6s; } } /* prefers-reduced-motion 가드 — _motion.scss 가 duration을 0 으로 만들지만 * transform hover까지 끄려면 직접 차단 */ @media (prefers-reduced-motion: reduce) { .ui-cta:hover .ui-cta__icon, .ui-cta:focus-visible .ui-cta__icon { transform: none; } } /* =================================================== Filter / Search bar components - .ui-filter-bar : top bar (keyword search + sort) - .ui-filter-sidebar : Publications left-side filter panel =================================================== */ /* ── Top filter bar (News, Activities) ── */ .ui-filter-bar { display: flex; align-items: center; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); flex-wrap: wrap; margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .ui-filter-bar__search { position: relative; flex: 1; min-width: 22rem; } .ui-filter-bar__search .icon { position: absolute; left: 1.6rem; top: 50%; transform: translateY(-50%); color: var(--clr-gray-400); font-size: 1.6rem; pointer-events: none; } .ui-filter-bar__search input { width: 100%; height: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.2rem); border: 1px solid var(--clr-gray-300); border-radius: var(--radius-round); padding: 0 1.6rem 0 4.4rem; font-size: var(--body-md-fs); color: var(--clr-gray-900); background: #fff; outline: none; transition: border-color 0.2s ease; } .ui-filter-bar__search input::placeholder { color: var(--clr-gray-400); } .ui-filter-bar__search input:focus { border-color: var(--clr-primary-400); box-shadow: 0 0 0 3px rgba(46, 167, 224, 0.12); } .ui-filter-bar__sort { display: flex; align-items: center; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } .ui-filter-bar__sort-label { font-size: var(--body-sm-fs); color: var(--clr-gray-500); white-space: nowrap; } .ui-filter-bar__select { height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem); padding: 0 3.2rem 0 1.2rem; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); font-size: var(--body-sm-fs); color: var(--clr-gray-900); background: #fff; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.6rem; cursor: pointer; outline: none; transition: border-color 0.2s; } .ui-filter-bar__select:focus { border-color: var(--clr-primary-400); } .ui-filter-bar__count { font-size: var(--body-sm-fs); color: var(--clr-gray-500); white-space: nowrap; margin-left: auto; } @media (max-width: 544px) { .ui-filter-bar { flex-direction: column; align-items: stretch; } .ui-filter-bar__search { min-width: 0; } .ui-filter-bar__sort { justify-content: space-between; } .ui-filter-bar__count { margin-left: 0; } } /* ── Mobile filter trigger (lg↓ 에서만 노출) ── */ .ui-filter-trigger { display: none; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-lg); border: 1px solid var(--clr-gray-300); border-radius: var(--radius-round); background: #fff; color: var(--clr-primary-900); font-size: var(--body-sm-fs); font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out-quart); } .ui-filter-trigger:hover { border-color: var(--clr-primary-400); } @media (max-width: 1024px) { .ui-filter-trigger { display: inline-flex; } } /* ── Sidebar filter (News, Publications) ── */ .ui-filter-sidebar { align-self: flex-start; position: sticky; top: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); width: clamp(20rem, 4.142394822vw + 18.4466019417rem, 26.4rem); min-width: clamp(20rem, 4.142394822vw + 18.4466019417rem, 26.4rem); contain: layout style; } .ui-filter-sidebar__backdrop, .ui-filter-sidebar__sheet-head { display: none; } .ui-filter-sidebar__panel { display: flex; flex-direction: column; } .ui-filter-sidebar__form { display: flex; flex-direction: column; gap: var(--spacing-2xl); } .ui-filter-sidebar__group { display: flex; flex-direction: column; gap: var(--spacing-xs); } .ui-filter-sidebar__group-label { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--clr-gray-400); margin-bottom: var(--spacing-sm); } .ui-filter-sidebar__option { display: flex; align-items: center; gap: var(--spacing-md); cursor: pointer; font-size: var(--body-sm-fs); line-height: 1.4; color: var(--clr-gray-700); padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md); border-left: 2px solid transparent; transition: color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart); } .ui-filter-sidebar__option input[type=checkbox], .ui-filter-sidebar__option input[type=radio] { appearance: none; width: 1.5rem; height: 1.5rem; flex-shrink: 0; margin: 0; border: 1.5px solid var(--clr-gray-300); border-radius: 50%; background: #fff; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart); } .ui-filter-sidebar__option input[type=checkbox]:checked, .ui-filter-sidebar__option input[type=radio]:checked { border-color: var(--clr-primary-900); box-shadow: inset 0 0 0 4px var(--clr-primary-900); } .ui-filter-sidebar__option input[type=checkbox]:focus-visible, .ui-filter-sidebar__option input[type=radio]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(46, 167, 224, 0.18); border-color: var(--clr-primary-400); } .ui-filter-sidebar__option input[type=checkbox]:focus-visible:checked, .ui-filter-sidebar__option input[type=radio]:focus-visible:checked { box-shadow: inset 0 0 0 4px var(--clr-primary-900), 0 0 0 3px rgba(46, 167, 224, 0.18); } .ui-filter-sidebar__option input[type=checkbox] { border-radius: var(--radius-xs); } .ui-filter-sidebar__option:hover { color: var(--clr-primary-900); } .ui-filter-sidebar__option.is-active { color: var(--clr-primary-900); font-weight: 600; border-left-color: var(--clr-accent-500); } .ui-filter-sidebar__clear { margin-top: var(--spacing-sm); font-size: var(--body-xs-fs); color: var(--clr-gray-400); cursor: pointer; border: 0; background: transparent; padding: 0; align-self: flex-start; text-decoration: underline; text-underline-offset: 0.3rem; transition: color var(--dur-fast) var(--ease-out-quart); } .ui-filter-sidebar__clear:hover { color: var(--clr-primary-900); } @media (max-width: 1024px) { .ui-filter-sidebar { position: static; width: auto; min-width: 0; } .ui-filter-sidebar[data-filter-sidebar]:not(.is-open) { display: none; } .ui-filter-sidebar[data-filter-sidebar].is-open { display: block; position: fixed; inset: 0; z-index: 1000; } .ui-filter-sidebar .ui-filter-sidebar__backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); } .ui-filter-sidebar .ui-filter-sidebar__panel { position: fixed; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; background: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl); box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18); animation: ui-filter-sheet-up var(--dur-base) var(--ease-out-quart); } .ui-filter-sidebar .ui-filter-sidebar__sheet-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--spacing-md); margin-bottom: var(--spacing-md); border-bottom: 1px solid var(--clr-gray-200); } .ui-filter-sidebar .ui-filter-sidebar__sheet-title { font-size: var(--body-md-fs); font-weight: 700; color: var(--clr-primary-900); } .ui-filter-sidebar .ui-filter-sidebar__sheet-close { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border: 0; background: transparent; color: var(--clr-gray-500); font-size: 1.6rem; cursor: pointer; } .ui-filter-sidebar .ui-filter-sidebar__sheet-close:hover { color: var(--clr-primary-900); } } @keyframes ui-filter-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ── Layout wrapper for sidebar + content ── */ .ui-filter-layout { display: flex; align-items: flex-start; gap: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem); } .ui-filter-layout__content { flex: 1; min-width: 0; } @media (max-width: 1024px) { .ui-filter-layout { flex-direction: column; } .ui-filter-layout .ui-filter-sidebar { width: 100%; min-width: 0; } } /* =================================================== Search input — 돋보기 아이콘 + 커스텀 클리어(×) 버튼 - 브라우저 기본 search 클리어 UI 제거(appearance + ::-webkit-search-cancel-button) - × 버튼은 값 있을 때만 노출(TS: SearchInput.ts 가 [hidden] 토글) =================================================== */ .ui-search-input { position: relative; width: 100%; } .ui-search-input__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; } .ui-search-input__field { width: 100%; height: clamp(4rem, 0.3883495146vw + 3.854368932rem, 4.6rem); padding: 0 3.4rem 0 3.6rem; border: 0; border-bottom: 1px solid var(--clr-gray-300); border-radius: 0; font-size: var(--form-control-fs); color: var(--clr-gray-900); background: transparent; outline: none; appearance: none; -webkit-appearance: none; transition: border-color var(--dur-fast) var(--ease-out-quart); } .ui-search-input__field::placeholder { color: var(--clr-gray-400); } .ui-search-input__field:focus { border-bottom-color: var(--clr-primary-900); } .ui-search-input__field::-webkit-search-cancel-button, .ui-search-input__field::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .ui-search-input__icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--clr-gray-400); font-size: 1.4rem; pointer-events: none; transition: color var(--dur-fast) var(--ease-out-quart); } .ui-search-input__field:focus ~ .ui-search-input__icon { color: var(--clr-primary-900); } .ui-search-input__clear { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--clr-gray-400); font-size: 1.3rem; cursor: pointer; transition: color var(--dur-fast) var(--ease-out-quart); } .ui-search-input__clear[hidden] { display: none; } .ui-search-input__clear:hover { color: var(--clr-primary-900); } .ui-search-input__clear:focus-visible { outline: 2px solid var(--clr-primary-400); outline-offset: 2px; border-radius: 50%; } .ui-search-input { /* ── --bare 변형 ── 필(pill) 바 같은 외부 컨테이너 안에 끼워 넣을 때: 컴포넌트 자체 underline· focus 라인을 제거하고(외부 컨테이너가 테두리·포커스 ring 담당) 좌측 돋보기· 우측 커스텀 ×·네이티브 × 제거는 기본형 그대로 상속. */ } .ui-search-input--bare .ui-search-input__field { border-bottom: 0; } .ui-search-input--bare .ui-search-input__field:focus { border-bottom-color: transparent; } /* =================================================== Search result row — reusable hit component View: resources/views/components/search-result-item.php Used on: pages/search/index.php Rule #17 — typography from no-* utilities only. This file = layout. =================================================== */ .ui-search-hit { list-style: none; display: block; border-bottom: 1px solid var(--clr-gray-200); } .ui-search-hit:last-child { border-bottom: 0; } .ui-search-hit__link { display: flex; flex-direction: row; align-items: flex-start; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem) clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); color: inherit; text-decoration: none; transition: background var(--dur-base) var(--ease-out-quart), padding-left var(--dur-base) var(--ease-out-quart); } .ui-search-hit__link:hover { background: var(--clr-gray-50); padding-left: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } @media (hover: none) and (pointer: coarse) { .ui-search-hit__link:hover { padding-left: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); } } .ui-search-hit__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; } .ui-search-hit__head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } @media (max-width: 544px) { .ui-search-hit__head { gap: 0.6rem; } } .ui-search-hit__meta { color: var(--clr-gray-500); } .ui-search-hit__title { color: var(--clr-gray-900); margin: 0; transition: color var(--dur-base) var(--ease-out-quart); } .ui-search-hit__link:hover .ui-search-hit__title { color: var(--clr-primary-900); } .ui-search-hit__snippet { color: var(--clr-gray-600); margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ui-search-hit__thumb { flex-shrink: 0; width: 7.2rem; height: 7.2rem; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--clr-gray-100); align-self: center; } @media (max-width: 544px) { .ui-search-hit__thumb { width: 5.6rem; height: 5.6rem; } } /* =================================================== Steps component Usage Procedures — numbered vertical steps =================================================== */ .ui-steps { display: flex; flex-direction: column; gap: 0; position: relative; /* vertical connector line */ } .ui-steps::before { content: ""; position: absolute; left: clamp(1.9rem, 0.2588996764vw + 1.8029126214rem, 2.3rem); top: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.4rem); bottom: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.4rem); width: 2px; background: var(--clr-gray-200); z-index: 0; } @media (max-width: 544px) { .ui-steps::before { left: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); } } .ui-steps__item { display: flex; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); padding: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem) 0; position: relative; z-index: 1; } .ui-steps__item:last-child { padding-bottom: 0; } .ui-steps__number { flex-shrink: 0; width: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem); height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem); border-radius: 50%; background: var(--clr-primary-900); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--body-md-fs); font-weight: 700; line-height: 1; position: relative; z-index: 2; } @media (max-width: 544px) { .ui-steps__number { width: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); } } .ui-steps__content { flex: 1; padding-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); padding-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); } .ui-steps__label { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-primary-400); margin-bottom: 0.4rem; display: block; } .ui-steps__title { font-size: var(--heading-sm-fs); font-weight: 700; color: var(--clr-gray-900); line-height: 1.3; margin-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } .ui-steps__desc { font-size: var(--body-sm-fs); line-height: 1.7; color: var(--clr-text-secondary); } .ui-steps__note { margin-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); border-left: 3px solid var(--clr-primary-400); background: var(--clr-primary-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--body-xs-fs); color: var(--clr-primary-900); line-height: 1.6; } /* ── How-to-register (numbered circles inline) ── */ .ui-steps--inline { flex-direction: row; align-items: flex-start; } .ui-steps--inline::before { top: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem); left: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem); right: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem); bottom: auto; width: auto; height: 2px; } @media (max-width: 768px) { .ui-steps--inline::before { display: none; } } .ui-steps--inline .ui-steps__item { flex: 1; flex-direction: column; align-items: center; text-align: center; padding: 0; gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); } @media (max-width: 768px) { .ui-steps--inline .ui-steps__item { flex-direction: row; text-align: left; padding: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem) 0; } } .ui-steps--inline .ui-steps__content { padding: 0; } @media (max-width: 768px) { .ui-steps--inline { flex-direction: column; } } /* =================================================== Table component Usage Procedures — User Fee Schedule & Guidelines =================================================== */ .ui-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--clr-gray-200); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--clr-gray-300) transparent; } .ui-table-wrap::-webkit-scrollbar { height: 0.6rem; } .ui-table-wrap::-webkit-scrollbar-track { background: transparent; } .ui-table-wrap::-webkit-scrollbar-thumb { background: var(--clr-gray-300); border-radius: 999px; } .ui-table { width: 100%; border-collapse: collapse; font-size: var(--body-sm-fs); } .ui-table thead { background: var(--clr-primary-900); color: #fff; } .ui-table thead th { padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); text-align: left; font-weight: 700; font-size: var(--body-xs-fs); letter-spacing: 0.04em; white-space: nowrap; } .ui-table thead th:first-child { border-radius: var(--radius-sm) 0 0 0; } .ui-table thead th:last-child { border-radius: 0 var(--radius-sm) 0 0; } .ui-table tbody tr { border-bottom: 1px solid var(--clr-gray-200); transition: background 0.15s ease; } .ui-table tbody tr:last-child { border-bottom: 0; } .ui-table tbody tr:hover { background: var(--clr-primary-50); } .ui-table tbody td { padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); color: var(--clr-gray-700); vertical-align: middle; line-height: 1.55; } .ui-table { /* user type column */ } .ui-table__user-type { font-weight: 600; color: var(--clr-gray-900); white-space: nowrap; } .ui-table__user-sub { font-size: var(--body-xs-fs); color: var(--clr-gray-400); font-weight: 400; display: block; margin-top: 0.2rem; } .ui-table { /* rate cells */ } .ui-table__rate { font-weight: 600; color: var(--clr-primary-900); } .ui-table__rate--discounted { color: var(--clr-status-success); } .ui-table__rate--standard { color: var(--clr-gray-700); } .ui-table__rate--premium { color: var(--clr-primary-900); } .ui-table { /* priority badge column */ } .ui-table__priority { white-space: nowrap; } .ui-table { /* footnote */ } .ui-table__note { font-size: var(--body-xs-fs); color: var(--clr-gray-400); font-style: italic; margin-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } /* ── Info cards grid (Guidelines for External Users) ── */ .ui-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 2.8rem); } @media (max-width: 768px) { .ui-info-grid { grid-template-columns: 1fr; } } .ui-info-card { padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); border-radius: var(--radius-md); background: var(--clr-background-page); border-left: 4px solid var(--clr-primary-400); } .ui-info-card__label { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-primary-400); margin-bottom: 0.6rem; display: block; } .ui-info-card__title { font-size: var(--heading-xs-fs); font-weight: 700; color: var(--clr-gray-900); margin-bottom: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); line-height: 1.3; } .ui-info-card__body { font-size: var(--body-sm-fs); line-height: 1.7; color: var(--clr-text-secondary); } /* =================================================== Calendar component Month grid + event chips + legend =================================================== */ /* ── Controls row (List / Calendar toggle + Today + Nav + Export) ── */ .ui-cal-controls { display: flex; align-items: center; gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); flex-wrap: wrap; margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .ui-cal-controls__view { display: flex; align-items: center; gap: 0.4rem; } .ui-cal-controls__nav { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; } @media (max-width: 544px) { .ui-cal-controls__nav { margin-left: 0; } } .ui-cal-controls__month { font-size: var(--heading-md-fs); font-weight: 700; color: var(--clr-primary-900); min-width: clamp(16rem, 3.8834951456vw + 14.5436893204rem, 22rem); text-align: center; } .ui-cal-controls__btn { display: inline-flex; align-items: center; justify-content: center; width: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); border-radius: 50%; border: 1px solid var(--clr-gray-300); background: #fff; color: var(--clr-gray-600); font-size: var(--body-md-fs); cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; } .ui-cal-controls__btn:hover { border-color: var(--clr-primary-900); color: var(--clr-primary-900); } .ui-cal-controls__today { padding: 0 1.4rem; height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); border-radius: var(--radius-sm); border: 1px solid var(--clr-gray-300); background: #fff; font-size: var(--body-sm-fs); font-weight: 600; color: var(--clr-gray-700); cursor: pointer; transition: border-color 0.2s, color 0.2s; } .ui-cal-controls__today:hover { border-color: var(--clr-primary-900); color: var(--clr-primary-900); } .ui-cal-controls__export { margin-left: auto; padding: 0 1.4rem; height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); border-radius: var(--radius-sm); border: 1px solid var(--clr-gray-300); background: #fff; font-size: var(--body-xs-fs); color: var(--clr-gray-600); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: border-color 0.2s, color 0.2s; } .ui-cal-controls__export:hover { border-color: var(--clr-primary-400); color: var(--clr-primary-400); } @media (max-width: 544px) { .ui-cal-controls__export { margin-left: 0; } } /* ── Legend ── */ .ui-cal-legend { display: flex; align-items: center; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); flex-wrap: wrap; margin-bottom: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); } .ui-cal-legend__item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--body-xs-fs); color: var(--clr-gray-600); } .ui-cal-legend__dot { width: 1rem; height: 1rem; border-radius: 50%; flex-shrink: 0; } .ui-cal-legend__dot--seminar { background: var(--clr-chip-seminar); } .ui-cal-legend__dot--workshop { background: var(--clr-chip-workshop); } .ui-cal-legend__dot--symposium { background: var(--clr-chip-symposium); } .ui-cal-legend__dot--education { background: var(--clr-chip-education); } .ui-cal-legend__dot--special { background: var(--clr-chip-special); } /* ── Calendar grid ── */ .ui-calendar { border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); overflow: hidden; /* day-of-week header */ } .ui-calendar__header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--clr-primary-900); color: #fff; } .ui-calendar__dow { padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); text-align: center; font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } @media (max-width: 544px) { .ui-calendar__dow { font-size: var(--body-xs-fs); padding: 0.8rem 0.2rem; } } .ui-calendar { /* weeks */ } .ui-calendar__body { display: flex; flex-direction: column; background: var(--clr-gray-200); gap: 1px; } .ui-calendar__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .ui-calendar__day { background: #fff; min-height: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem); padding: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); display: flex; flex-direction: column; gap: 0.4rem; } .ui-calendar__day--outside { background: var(--clr-gray-50); } .ui-calendar__day--today .ui-calendar__day-num { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--clr-primary-400); color: #fff; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .ui-calendar__day { min-height: clamp(6rem, 1.2944983819vw + 5.5145631068rem, 8rem); padding: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem); } } @media (max-width: 544px) { .ui-calendar__day { min-height: 5rem; } } .ui-calendar__day-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .ui-calendar__day-num { font-size: var(--body-xs-fs); font-weight: 600; color: var(--clr-gray-700); line-height: 1; flex-shrink: 0; } @media (max-width: 768px) { .ui-calendar__day-num { font-size: var(--body-xs-fs); } } .ui-calendar__add { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px dashed var(--clr-gray-300); color: var(--clr-gray-400); background: transparent; font-size: var(--body-xs-fs); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .ui-calendar__add:hover, .ui-calendar__add:focus-visible { border-color: var(--clr-primary-400); color: var(--clr-primary-400); background: #fff; outline: none; } .ui-calendar__chips { display: flex; flex-direction: column; gap: 0.3rem; overflow: hidden; } .ui-calendar { /* ── Event chip ── */ } .ui-calendar__chip { display: block; padding: 0.2rem 0.6rem; border-radius: var(--radius-xs); font-size: var(--body-xs-fs); font-weight: 600; line-height: 1.4; color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; transition: opacity 0.15s ease; } .ui-calendar__chip:hover { opacity: 0.85; } .ui-calendar__chip--seminar { background: var(--clr-chip-seminar); } .ui-calendar__chip--workshop { background: var(--clr-chip-workshop); } .ui-calendar__chip--symposium { background: var(--clr-chip-symposium); } .ui-calendar__chip--education { background: var(--clr-chip-education); } .ui-calendar__chip--special { background: var(--clr-chip-special); } @media (max-width: 768px) { .ui-calendar__chip { display: none; } .ui-calendar__chip:first-child { display: block; } } .ui-calendar { /* ── Footnote ── */ } .ui-calendar__footnote { padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); font-size: var(--body-xs-fs); color: var(--clr-gray-400); border-top: 1px solid var(--clr-gray-200); background: var(--clr-gray-50); } .ui-calendar__footnote a { color: var(--clr-primary-400); text-decoration: none; } .ui-calendar__footnote a:hover { text-decoration: underline; } /* =================================================== Placeholder Gray box used as image / map / video stand-in in temporary scaffolding before real assets land. =================================================== */ .ui-placeholder { position: relative; display: flex; align-items: center; justify-content: center; background: var(--clr-gray-200); border-radius: var(--radius-sm); color: var(--clr-gray-400); font-size: var(--body-xs-fs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; } .ui-placeholder::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(135deg, transparent calc(50% - 1px), var(--clr-gray-300) calc(50% - 1px), var(--clr-gray-300) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(45deg, transparent calc(50% - 1px), var(--clr-gray-300) calc(50% - 1px), var(--clr-gray-300) calc(50% + 1px), transparent calc(50% + 1px)); opacity: 0.4; pointer-events: none; } .ui-placeholder__label { position: relative; z-index: 1; max-width: 80%; text-align: center; overflow-wrap: break-word; word-break: break-word; line-height: 1.4; } .ui-placeholder--16x9 { aspect-ratio: 16/9; width: 100%; } .ui-placeholder--4x3 { aspect-ratio: 4/3; width: 100%; } .ui-placeholder--1x1 { aspect-ratio: 1/1; width: 100%; } .ui-placeholder--portrait { aspect-ratio: 3/4; width: 100%; } .ui-placeholder--map { aspect-ratio: 16/7; width: 100%; } /* =================================================== Breadcrumb 페이지 헤더 안의 경로 네비게이션. 타이포 위계(size/weight/line-height)와 spacing 은 HTML 유틸 클래스(`no-body-sm`, `no-mg-lg--b`)가 담당하고, 이 컴포넌트는 정렬·간격·색·자간·대문자 같은 시각 디테일만 정의한다. =================================================== */ .ui-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; color: var(--clr-gray-500); text-transform: uppercase; letter-spacing: var(--tracking-caps, 0.06em); } .ui-breadcrumb a { color: var(--clr-primary-500); text-decoration: none; text-decoration-color: transparent; transition: color var(--dur-base, 0.2s), text-decoration-color var(--dur-base, 0.2s); } .ui-breadcrumb a:hover, .ui-breadcrumb a:focus-visible { text-decoration: underline; text-decoration-color: var(--clr-primary-500); text-underline-offset: 3px; } .ui-breadcrumb span { color: var(--clr-gray-400); } .ui-breadcrumb__sep { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background-color: var(--clr-primary-500); opacity: 0.6; vertical-align: middle; margin-bottom: 0.1rem; } .ui-share-btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 0.8rem 1.6rem; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-round); background: var(--clr-base-white); color: var(--clr-text-primary); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .ui-share-btn i { font-size: 1.4rem; } .ui-share-btn:hover { border-color: var(--clr-primary-400); color: var(--clr-primary-400); } .ui-share-modal { display: flex; flex-direction: column; } .ui-share-modal__nets-label { margin-bottom: var(--spacing-md); color: var(--clr-text-secondary); text-align: center; } .ui-share-modal__nets { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-lg); } .ui-share-modal__net { display: inline-flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); color: var(--clr-text-secondary); } .ui-share-modal__net:hover .ui-share-modal__net-icon { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .ui-share-modal__net-icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem); height: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem); border-radius: var(--radius-round); background: var(--clr-gray-100); color: var(--clr-text-primary); font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem); transition: transform 0.2s ease, box-shadow 0.2s ease; } .ui-share-modal__net-label { color: var(--clr-text-secondary); } .ui-share-modal__net--x .ui-share-modal__net-icon { background: #000; color: #fff; } .ui-share-modal__net--fb .ui-share-modal__net-icon { background: #1877f2; color: #fff; } .ui-share-modal__net--in .ui-share-modal__net-icon { background: #0a66c2; color: #fff; } .ui-share-modal__net--mail .ui-share-modal__net-icon { background: var(--clr-primary-700); color: var(--clr-base-white); } .ui-share-modal__divider { height: 1px; margin: var(--spacing-lg) 0; background: var(--clr-gray-200); } .ui-share-modal__label { display: block; margin-bottom: var(--spacing-xs); color: var(--clr-text-secondary); } .ui-share-modal__copy-row { display: flex; gap: var(--spacing-sm); } @media (max-width: 768px) { .ui-share-modal__copy-row { flex-direction: column; } } .ui-share-modal__input { flex: 1 1 auto; min-width: 0; padding: 0.9rem 1.6rem; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-round); background: var(--clr-gray-50); color: var(--clr-text-secondary); } .ui-share-modal__copy-btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--spacing-xs); padding: 0.9rem 2rem; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-round); background: var(--clr-base-white); color: var(--clr-text-primary); white-space: nowrap; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .ui-share-modal__copy-btn:hover { border-color: var(--clr-primary-500); color: var(--clr-primary-500); background: var(--clr-gray-50); } /** * ui-toast — 전역 토스트 (home·admin 공용). * * Toast.ts 가 document.body 에 .ui-toast-container > .ui-toast 를 append. * 폰트 위계는 마크업의 no-body-sm 유틸이 부여(#17-A) — 여기선 layout/색/elevation 만. * admin.css 에도 동일 파트셜이 forward 되므로(단일 소스, #19), admin 테마에 없는 * --clr-* 토큰은 var(--token, #fallback) 로 작성해 양 번들에서 동일 렌더. */ .ui-toast-container { position: fixed; left: 0; right: 0; bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); pointer-events: none; z-index: 30000; } @media (max-width: 768px) { .ui-toast-container { bottom: calc(var(--quick-bar-h, 0px) + var(--spacing-md) + env(safe-area-inset-bottom)); } } .ui-toast { display: inline-flex; align-items: center; gap: var(--spacing-sm); max-width: min(92vw, 44rem); padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem); border-radius: var(--radius-md, 0.8rem); background: var(--clr-base-white, #fff); color: var(--clr-text-primary, #111); box-shadow: 0 8px 28px rgba(15, 76, 129, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08); border-left: 3px solid var(--clr-primary-500, #3fa0d0); pointer-events: auto; animation: ui-toast-in 0.28s var(--ease-out-quart, ease); } .ui-toast__icon { display: inline-flex; flex: 0 0 auto; font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem); } .ui-toast__msg { min-width: 0; white-space: pre-line; } .ui-toast__action { appearance: none; border: 0; border-left: 1px solid rgba(17, 17, 17, 0.18); background: transparent; color: inherit; cursor: pointer; font: inherit; font-weight: 700; margin-inline-start: var(--spacing-2xs, 0.4rem); padding-inline-start: var(--spacing-xs, 0.8rem); } .ui-toast__action:hover, .ui-toast__action:focus-visible { text-decoration: underline; } .ui-toast--success { border-left-color: var(--clr-status-success, #16a34a); } .ui-toast--success .ui-toast__icon { color: var(--clr-status-success, #16a34a); } .ui-toast--error { border-left-color: var(--clr-status-error, #dc2626); } .ui-toast--error .ui-toast__icon { color: var(--clr-status-error, #dc2626); } .ui-toast--warning { border-left-color: var(--clr-status-warning, #d97706); } .ui-toast--warning .ui-toast__icon { color: var(--clr-status-warning, #d97706); } .ui-toast--info { border-left-color: var(--clr-accent-500, #00a8cc); } .ui-toast--info .ui-toast__icon { color: var(--clr-accent-500, #00a8cc); } .ui-toast--loading { border-left-color: var(--clr-primary-500, #3fa0d0); } .ui-toast--loading .ui-toast__icon { color: var(--clr-primary-500, #3fa0d0); } .ui-toast--default { border-left-color: var(--clr-primary-500, #3fa0d0); } .ui-toast--default .ui-toast__icon { color: var(--clr-primary-500, #3fa0d0); } .ui-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; } @keyframes ui-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* =================================================== Empty State (미니멀 톤) 목록 0건 등 빈 상태를 중앙 정렬 + 라인 아이콘으로 표시. 타이포 위계는 no-body-* 유틸로만 부여 (절대규칙 #17-A). spacing 은 토큰만 사용 (절대규칙 #17-B). =================================================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--spacing-sm); padding-block: var(--section-md); padding-inline: var(--spacing-lg); color: var(--clr-text-sub); list-style: none; } .empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--spacing-3xl); height: var(--spacing-3xl); margin-bottom: var(--spacing-xs); color: var(--clr-text-aux); opacity: 0.85; } .empty-state__icon svg { width: 100%; height: 100%; display: block; } .empty-state__message { color: var(--clr-text-base); margin: 0; } .empty-state__description { color: var(--clr-text-aux); margin: 0; max-width: 42ch; } .empty-state--compact { padding-block: var(--section-xs); gap: var(--spacing-xs); } .empty-state--compact .empty-state__icon { width: var(--spacing-2xl); height: var(--spacing-2xl); margin-bottom: 0; } /* =================================================== newsletter-form — Footer 뉴스레터 구독 form (지시서 §3.6) - 이메일 input + Subscribe 버튼. 위계/폰트는 마크업 .no-* 유틸 담당(rule #17). - newsletter-footer-band 섹션의 form 패턴을 단독 컴포넌트로 추출(rule #19). - spacing/색은 토큰만(rule #10·#17 §B). =================================================== */ .newsletter-form { display: flex; flex-direction: column; gap: var(--spacing-sm); max-width: 42rem; } .newsletter-form__label { color: var(--clr-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .newsletter-form__row { display: flex; gap: var(--spacing-sm); align-items: stretch; } .newsletter-form__input { flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--clr-gray-300); background: var(--clr-base-white); color: var(--clr-text-primary); } .newsletter-form__input::placeholder { color: var(--clr-text-secondary); } .newsletter-form__input:focus { outline: 0; border-color: var(--clr-primary-700); } .newsletter-form__btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-lg); border: 0; background: var(--clr-primary-700); color: var(--clr-base-white); cursor: pointer; flex-shrink: 0; transition: background var(--dur-fast) var(--ease-out-quart); } .newsletter-form__btn:hover { background: var(--clr-primary-hover); } .newsletter-form__btn:focus-visible { outline: 2px solid var(--clr-primary-accent); outline-offset: 2px; } .newsletter-form__btn-icon { display: inline-flex; transition: transform var(--dur-base) var(--ease-out-quart); } .newsletter-form__btn:hover .newsletter-form__btn-icon { transform: translateX(3px); } .newsletter-form { /* 다크 배경 위 사용 시(현재 Footer 는 라이트라 미사용, 향후 확장 대비) */ } .newsletter-form--on-dark .newsletter-form__label { color: rgba(255, 255, 255, 0.7); } .newsletter-form--on-dark .newsletter-form__input { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); color: #fff; } .newsletter-form--on-dark .newsletter-form__input::placeholder { color: rgba(255, 255, 255, 0.5); } .theh-metric { display: grid; gap: var(--spacing-xs); padding-top: var(--spacing-lg); border-top: 1px solid color-mix(in srgb, var(--clr-primary-900) 24%, transparent); } .theh-metric__value { display: block; overflow: hidden; color: var(--clr-primary-900); font-variant-numeric: tabular-nums; } .theh-metric__value .char, .theh-metric__value .theh-metric-reel__suffix { display: inline-block; } .theh-metric__value .theh-metric-reel { height: 1em; overflow: hidden; vertical-align: -0.08em; } .theh-metric__value .theh-metric-reel__track { display: flex; flex-direction: column; width: max-content; } .theh-metric__value .theh-metric-reel__digit { display: block; flex: 0 0 1em; height: 1em; line-height: 1; } .theh-metric__label { color: var(--clr-text-base); } .theh-metric__desc { color: var(--clr-text-sub); } .theh-service-card { --theh-card-mask-fill: var(--clr-primary-900); --theh-card-mask-text: var(--clr-base-white); --theh-card-mask-accent: var(--clr-accent-300); position: relative; isolation: isolate; display: grid; min-height: 100%; overflow: hidden; background: var(--clr-base-white); border: 1px solid color-mix(in srgb, var(--clr-primary-900) 12%, transparent); transition: transform var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart), border-color var(--dur-base) var(--ease-out-quart); } .theh-service-card::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: var(--spacing-xxs); background: var(--theh-card-mask-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-base) var(--ease-out-quart), background-color var(--dur-base) var(--ease-out-quart); } .theh-service-card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--theh-card-mask-fill, var(--clr-primary-900)); clip-path: inset(100% 0 0 0); pointer-events: none; transition: clip-path var(--dur-slower) var(--ease-out-expo); will-change: clip-path; } .theh-service-card--mask-gold { --theh-card-mask-fill: color-mix(in srgb, var(--clr-accent-300) 58%, var(--clr-base-white)); --theh-card-mask-text: var(--clr-primary-950); --theh-card-mask-accent: var(--clr-primary-900); } .theh-service-card--link { color: inherit; text-decoration: none; cursor: pointer; } .theh-service-card__body { position: relative; z-index: 1; display: grid; gap: var(--spacing-sm); padding: var(--spacing-xl); } .theh-service-card__heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-md); align-items: start; } .theh-service-card__title { color: var(--clr-text-base); transition: color var(--dur-base) var(--ease-out-quart); } .theh-service-card__desc { color: var(--clr-text-sub); text-wrap: pretty; word-break: keep-all; transition: color var(--dur-base) var(--ease-out-quart); } .theh-service-card__action { display: inline-flex; align-items: center; gap: var(--spacing-xs); margin-top: var(--spacing-xs); color: var(--clr-primary-900); letter-spacing: var(--tracking-caps); white-space: nowrap; transition: color var(--dur-base) var(--ease-out-quart); } .theh-service-card__action svg { width: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); aspect-ratio: 1; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-out-quart); } .theh-service-card__media { position: relative; z-index: 1; padding: 0 var(--spacing-xl) var(--spacing-xl); } .theh-service-card__media .no-auto-cover { background: var(--clr-background-secondary); } .theh-service-card--link:focus-visible { transform: translateY(-0.6rem); border-color: color-mix(in srgb, var(--clr-accent-500) 58%, transparent); box-shadow: 0 clamp(1.2rem, 0.9061488673vw + 0.8601941748rem, 2.6rem) clamp(2.8rem, 1.8122977346vw + 2.1203883495rem, 5.6rem) color-mix(in srgb, var(--clr-primary-900) 22%, transparent); outline: 2px solid var(--clr-accent-500); outline-offset: 3px; } .theh-service-card--link:focus-visible::before { transform: scaleX(1); background: var(--theh-card-mask-accent); } .theh-service-card--link:focus-visible::after { clip-path: inset(0); } .theh-service-card--link:focus-visible .theh-service-card__title, .theh-service-card--link:focus-visible .theh-service-card__desc, .theh-service-card--link:focus-visible .theh-service-card__action { color: var(--theh-card-mask-text); } .theh-service-card--link:focus-visible .theh-service-card__action svg { transform: translate(var(--spacing-xxs), calc(var(--spacing-xxs) * -1)); } @media (hover: hover) { .theh-service-card--link:hover { transform: translateY(-0.6rem); border-color: color-mix(in srgb, var(--clr-accent-500) 58%, transparent); box-shadow: 0 clamp(1.2rem, 0.9061488673vw + 0.8601941748rem, 2.6rem) clamp(2.8rem, 1.8122977346vw + 2.1203883495rem, 5.6rem) color-mix(in srgb, var(--clr-primary-900) 22%, transparent); } .theh-service-card--link:hover::before { transform: scaleX(1); background: var(--theh-card-mask-accent); } .theh-service-card--link:hover::after { clip-path: inset(0); } .theh-service-card--link:hover .theh-service-card__title, .theh-service-card--link:hover .theh-service-card__desc, .theh-service-card--link:hover .theh-service-card__action { color: var(--theh-card-mask-text); } .theh-service-card--link:hover .theh-service-card__action svg { transform: translate(var(--spacing-xxs), calc(var(--spacing-xxs) * -1)); } } @media (prefers-reduced-motion: reduce) { .theh-service-card::after { transition: none; will-change: auto; } .theh-service-card--link:hover, .theh-service-card--link:focus-visible, .theh-service-card--link:hover .theh-service-card__action svg, .theh-service-card--link:focus-visible .theh-service-card__action svg { transform: none; } } .theh-solution-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--spacing-lg); align-items: start; padding: var(--spacing-xl); overflow: hidden; border: 1px solid color-mix(in srgb, var(--clr-primary-900) 15%, transparent); border-radius: var(--radius-md); color: var(--clr-text-base); background: var(--clr-base-white); box-shadow: 0 var(--spacing-xs) var(--spacing-lg) color-mix(in srgb, var(--clr-primary-900) 5%, transparent); transition: transform var(--dur-base) var(--ease-out-quart), border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); } .theh-solution-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--spacing-xxs); z-index: 2; background: var(--clr-accent-500); transform: scaleY(0); transform-origin: top center; transition: transform var(--dur-slow) var(--ease-out-expo); } .theh-solution-row::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(105deg, color-mix(in srgb, var(--clr-accent-300) 20%, var(--clr-base-white)) 0%, color-mix(in srgb, var(--clr-accent-300) 10%, var(--clr-base-white)) 42%, transparent 72%); clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-slower) var(--ease-out-expo); will-change: clip-path; } .theh-solution-row__no, .theh-solution-row__title, .theh-solution-row__body, .theh-solution-row__cta { position: relative; z-index: 1; } .theh-solution-row__no { grid-column: 1; grid-row: 1; padding-top: var(--spacing-xs); color: var(--clr-accent-700); } .theh-solution-row__title { grid-column: 2; grid-row: 1; color: var(--clr-primary-900); text-wrap: balance; } .theh-solution-row__body { grid-column: 2/-1; grid-row: 2; display: grid; gap: var(--spacing-sm); padding-top: var(--spacing-md); border-top: 1px solid color-mix(in srgb, var(--clr-primary-900) 12%, transparent); } .theh-solution-row__desc { max-width: 64rem; color: var(--clr-text-base); text-wrap: pretty; word-break: keep-all; } .theh-solution-row__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } .theh-solution-row__tags li { padding: var(--spacing-xs) var(--spacing-md); border: 1px solid color-mix(in srgb, var(--clr-primary-900) 16%, transparent); border-radius: var(--radius-round); color: var(--clr-primary-900); background: var(--clr-gray-50); transition: border-color var(--dur-base) var(--ease-out-quart), background-color var(--dur-base) var(--ease-out-quart); } .theh-solution-row__cta { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; } .theh-solution-row:focus-within { border-color: var(--clr-accent-500); box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) color-mix(in srgb, var(--clr-primary-900) 12%, transparent); } .theh-solution-row:focus-within::before { transform: scaleY(1); } .theh-solution-row:focus-within::after { clip-path: inset(0); } .sec-theh-solution.is-solution-tracking .theh-solution-row.is-active { border-color: color-mix(in srgb, var(--clr-accent-500) 70%, transparent); box-shadow: 0 var(--spacing-md) var(--spacing-2xl) color-mix(in srgb, var(--clr-primary-900) 12%, transparent); } .sec-theh-solution.is-solution-tracking .theh-solution-row.is-active::before { transform: scaleY(1); } .sec-theh-solution.is-solution-tracking .theh-solution-row.is-active::after { clip-path: inset(0); } .sec-theh-solution.is-solution-tracking .theh-solution-row.is-active .theh-solution-row__tags li { border-color: color-mix(in srgb, var(--clr-accent-500) 32%, transparent); background: color-mix(in srgb, var(--clr-accent-300) 8%, var(--clr-base-white)); } @media (hover: hover) { .theh-solution-row:hover { transform: translateY(calc(var(--spacing-xxs) * -1)); border-color: color-mix(in srgb, var(--clr-accent-500) 62%, transparent); box-shadow: 0 var(--spacing-md) var(--spacing-2xl) color-mix(in srgb, var(--clr-primary-900) 12%, transparent); } .theh-solution-row:hover::before { transform: scaleY(1); } .theh-solution-row:hover::after { clip-path: inset(0); } .theh-solution-row:hover .theh-solution-row__tags li { border-color: color-mix(in srgb, var(--clr-accent-500) 38%, transparent); background: color-mix(in srgb, var(--clr-accent-300) 8%, var(--clr-base-white)); } } @media (max-width: 768px) { .theh-solution-row { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--spacing-lg); } .theh-solution-row__body { grid-column: 1/-1; grid-row: 2; } .theh-solution-row__cta { grid-column: 1/-1; grid-row: 3; justify-self: start; } } @media (prefers-reduced-motion: reduce) { .theh-solution-row { transition: none; } .theh-solution-row::before, .theh-solution-row::after { transition: none; will-change: auto; } .theh-solution-row:hover { transform: none; } } .theh-partner-logo { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: clamp(18rem, 4.4012944984vw + 16.3495145631rem, 24.8rem); height: clamp(6rem, 1.4239482201vw + 5.4660194175rem, 8.2rem); border-radius: var(--radius-sm); background: linear-gradient(180deg, #ffffff 0%, #eef1f7 100%); color: var(--clr-text-base); box-shadow: 0 clamp(0.8rem, 0.6472491909vw + 0.5572815534rem, 1.8rem) clamp(2rem, 1.5533980583vw + 1.4174757282rem, 4.4rem) color-mix(in srgb, var(--clr-primary-900) 30%, transparent); overflow: hidden; } .theh-partner-logo__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .theh-partner-logo__label { color: var(--clr-text-base); white-space: nowrap; } .theh-insight-card { --theh-card-mask-fill: var(--clr-primary-900); --theh-card-mask-text: var(--clr-base-white); --theh-card-mask-accent: var(--clr-accent-300); position: relative; isolation: isolate; display: grid; min-width: 0; overflow: hidden; background: var(--clr-base-white); border-bottom: 1px solid var(--clr-ui-border); color: var(--clr-text-base); transition: border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); } .theh-insight-card::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: var(--spacing-xxs); background: var(--theh-card-mask-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-base) var(--ease-out-quart); } .theh-insight-card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--theh-card-mask-fill, var(--clr-primary-900)); clip-path: inset(100% 0 0 0); pointer-events: none; transition: clip-path var(--dur-slower) var(--ease-out-expo); will-change: clip-path; } .theh-insight-card--mask-gold { --theh-card-mask-fill: color-mix(in srgb, var(--clr-accent-300) 58%, var(--clr-base-white)); --theh-card-mask-text: var(--clr-primary-950); --theh-card-mask-accent: var(--clr-primary-900); } .theh-insight-card > * { position: relative; z-index: 1; } .theh-insight-card__media { display: block; overflow: hidden; } .theh-insight-card__body { display: grid; gap: var(--spacing-sm); padding: var(--spacing-lg); } .theh-insight-card__meta { color: var(--clr-accent-500); transition: color var(--dur-base) var(--ease-out-quart); } .theh-insight-card__title { color: var(--clr-text-base); transition: color var(--dur-base) var(--ease-out-quart); } .theh-insight-card__action { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); margin-top: var(--spacing-xs); color: var(--clr-primary-900); transition: color var(--dur-base) var(--ease-out-quart); } .theh-insight-card__action-label { position: relative; } .theh-insight-card__action-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--spacing-xxs) * -1); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out-quart); } .theh-insight-card__action-icon { width: var(--spacing-lg); height: var(--spacing-lg); flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-out-quart); } .theh-insight-card:focus-visible { outline: 2px solid var(--clr-accent-500); outline-offset: var(--spacing-xs); } .theh-insight-card:focus-visible, .theh-insight-card:hover { border-color: var(--clr-accent-500); box-shadow: 0 clamp(1.6rem, 0.9061488673vw + 1.2601941748rem, 3rem) clamp(3rem, 1.8122977346vw + 2.3203883495rem, 5.8rem) color-mix(in srgb, var(--clr-primary-900) 20%, transparent); } .theh-insight-card:focus-visible::before, .theh-insight-card:hover::before { transform: scaleX(1); } .theh-insight-card:focus-visible::after, .theh-insight-card:hover::after { clip-path: inset(0); } .theh-insight-card:focus-visible .theh-insight-card__meta, .theh-insight-card:hover .theh-insight-card__meta { color: var(--theh-card-mask-accent); } .theh-insight-card:focus-visible .theh-insight-card__title, .theh-insight-card:focus-visible .theh-insight-card__action, .theh-insight-card:hover .theh-insight-card__title, .theh-insight-card:hover .theh-insight-card__action { color: var(--theh-card-mask-text); } .theh-insight-card:focus-visible .theh-insight-card__action-label::after, .theh-insight-card:hover .theh-insight-card__action-label::after { transform: scaleX(1); } .theh-insight-card:focus-visible .theh-insight-card__action-icon, .theh-insight-card:hover .theh-insight-card__action-icon { transform: translateX(var(--spacing-xs)); } @media (prefers-reduced-motion: reduce) { .theh-insight-card::after { transition: none; will-change: auto; } .theh-insight-card:hover, .theh-insight-card:focus-visible, .theh-insight-card:hover .theh-insight-card__action-icon, .theh-insight-card:focus-visible .theh-insight-card__action-icon { transform: none; } } .theh-field-preview { display: grid; gap: var(--spacing-md); align-content: start; min-width: 0; } .theh-field-preview--wide { grid-column: 1/-1; } .theh-field-preview__label { color: var(--clr-text-base); } .theh-field-preview { /* 필수 별표 — 디자인의 옅은 블루 (#5 인라인 style 금지: 클래스로만) */ } .theh-field-preview__required { color: var(--clr-primary-400); } .theh-field-preview { /* 실제 입력 컨트롤 — 투명 배경 + 하단 라인(언더라인) */ } .theh-field-preview__input { width: 100%; border: 0; border-bottom: 1px solid var(--clr-ui-border); background: transparent; padding: 0 0 var(--spacing-md); font-size: var(--form-control-fs); color: var(--clr-text-base); transition: border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); } .theh-field-preview__input::placeholder { color: var(--clr-text-aux); transition: color var(--dur-base) var(--ease-out-quart); } .theh-field-preview__input { /* hover — 언더라인이 브랜드 네이비로 짙어지고 placeholder 가 선명해짐 */ } .theh-field-preview__input:hover:not(:focus) { border-bottom-color: color-mix(in srgb, var(--clr-primary-900) 55%, var(--clr-ui-border)); } .theh-field-preview__input:hover:not(:focus)::placeholder { color: var(--clr-text-sub); } .theh-field-preview__input { /* focus(active) — 네이비 언더라인 + inset 박스섀도로 1px→2px 강조(레이아웃 시프트 없음) */ } .theh-field-preview__input:focus { outline: none; border-bottom-color: var(--clr-primary-main); box-shadow: inset 0 -1px 0 0 var(--clr-primary-main); } .theh-field-preview__input { /* 값이 입력된 상태(filled) — 언더라인을 옅은 네이비로 유지해 입력 완료를 암시 */ } .theh-field-preview__input:not(:placeholder-shown) { border-bottom-color: color-mix(in srgb, var(--clr-primary-900) 35%, var(--clr-ui-border)); } .theh-field-preview { /* select — chevron 자리 + 미선택(placeholder) 회색 */ } .theh-field-preview__select { position: relative; display: block; } .theh-field-preview__select .theh-field-preview__input { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer; } .theh-field-preview__select .theh-field-preview__input:has(option[value=""]:checked) { color: var(--clr-text-aux); } .theh-field-preview__chevron { position: absolute; right: 0; bottom: var(--spacing-md); color: var(--clr-text-sub); font-size: 1.2rem; pointer-events: none; } .theh-field-preview { /* Message — 라인 없는 높은 입력 영역(아래 구분선이 경계 역할) */ } .theh-field-preview--textarea .theh-field-preview__input { min-height: 8rem; padding-bottom: 0; border-bottom: 0; resize: vertical; } /* ========================================================================= Contact select — SelectWrapper(→Select.ts) 업그레이드 시 .cs-* 커스텀 드롭다운. home 번들은 admin 의 cs-* 스타일을 로드하지 않으므로 여기서 전체를 정의한다. 미감은 폼의 언더라인 입력과 통일(투명 배경 + 하단 라인 + 네이비 포커스). ========================================================================= */ .theh-field-preview--select { /* 업그레이드 완료(.cs-wrap 삽입) 시 네이티브 chevron 제거 — cs-trigger 자체 화살표 사용 */ } .theh-field-preview--select .theh-field-preview__select:has(.cs-wrap) .theh-field-preview__chevron { display: none; } .theh-field-preview--select .cs-wrap { position: relative; display: block; } .theh-field-preview--select { /* 트리거 — 언더라인 스타일(다른 입력과 동일한 미감) */ } .theh-field-preview--select .cs-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); width: 100%; padding: 0 0 var(--spacing-md); background: transparent; border: 0; border-bottom: 1px solid var(--clr-ui-border); border-radius: 0; /* cs-trigger = 컴포넌트 클래스 → #17A 컴포넌트 토큰 참조 예외(본문 위계 토큰) */ font-size: var(--form-control-fs); font-weight: var(--body-md-fw); line-height: var(--body-md-lh); font-family: inherit; color: var(--clr-text-base); text-align: left; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); } .theh-field-preview--select .cs-trigger:hover:not(.cs-trigger--open) { border-bottom-color: color-mix(in srgb, var(--clr-primary-900) 55%, var(--clr-ui-border)); } .theh-field-preview--select .cs-trigger:focus-visible, .theh-field-preview--select .cs-trigger--open, .theh-field-preview--select .cs-trigger[aria-expanded=true] { outline: none; border-bottom-color: var(--clr-primary-main); box-shadow: inset 0 -1px 0 0 var(--clr-primary-main); } .theh-field-preview--select .cs-trigger__value { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* placeholder(미선택) — 보조 텍스트 색 */ } .theh-field-preview--select .cs-trigger__value--empty { color: var(--clr-text-aux); } .theh-field-preview--select .cs-trigger__arrow { flex-shrink: 0; display: flex; align-items: center; color: var(--clr-text-sub); transition: transform var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart); } .theh-field-preview--select .cs-trigger--open .theh-field-preview--select .cs-trigger__arrow, .theh-field-preview--select .cs-trigger[aria-expanded=true] .theh-field-preview--select .cs-trigger__arrow { transform: rotate(180deg); color: var(--clr-primary-main); } .theh-field-preview--select { /* 드롭다운 패널 — 흰 카드 + 소프트 섀도 */ } .theh-field-preview--select .cs-dropdown { position: absolute; z-index: 40; top: calc(100% + 0.6rem); left: 0; min-width: 100%; background: var(--clr-base-white); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-md); box-shadow: 0 1.2rem 3.2rem -1.2rem rgba(36, 36, 79, 0.32); overflow: hidden; animation: theh-cs-in var(--dur-base) var(--ease-out-quart) both; } .theh-field-preview--select .cs-dropdown--up { top: auto; bottom: calc(100% + 0.6rem); animation-name: theh-cs-in-up; } .theh-field-preview--select { /* 드롭다운 검색창 — 폼 톤(흰 박스 + 네이비 focus 링). 브라우저 기본 파란 focus 제거 */ } .theh-field-preview--select .cs-dropdown__search { padding: var(--spacing-sm); background: var(--clr-gray-50); border-bottom: 1px solid var(--clr-gray-100); } .theh-field-preview--select .cs-dropdown__search-input { width: 100%; padding: var(--spacing-xs) var(--spacing-md); background: var(--clr-base-white); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-sm); /* cs-* 검색 input = 컴포넌트 클래스 → #17-A 컴포넌트 토큰 참조 예외 */ font-size: var(--form-control-fs); font-family: inherit; line-height: var(--body-md-lh); color: var(--clr-text-base); transition: border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); } .theh-field-preview--select .cs-dropdown__search-input::placeholder { color: var(--clr-text-aux); } .theh-field-preview--select .cs-dropdown__search-input:hover:not(:focus) { border-color: color-mix(in srgb, var(--clr-primary-900) 45%, var(--clr-ui-border)); } .theh-field-preview--select .cs-dropdown__search-input { /* focus — 네이비 테두리 + 옅은 네이비 링(에이치랩 톤) */ } .theh-field-preview--select .cs-dropdown__search-input:focus { outline: none; border-color: var(--clr-primary-main); box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--clr-primary-900) 14%, transparent); } .theh-field-preview--select .cs-list { list-style: none; margin: 0; padding: var(--spacing-xs) 0; max-height: min(28rem, 60vh); overflow-y: auto; overscroll-behavior: contain; } .theh-field-preview--select .cs-option { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--body-md-fs); line-height: 1.4; color: var(--clr-text-base); cursor: pointer; transition: background-color var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart); } .theh-field-preview--select .cs-option:hover:not(.cs-option--disabled):not(.cs-option--empty):not(.cs-option--selected), .theh-field-preview--select .cs-option--active:not(.cs-option--selected):not(.cs-option--disabled) { background: var(--clr-ui-hover-bg); } .theh-field-preview--select .cs-option--selected { background: var(--clr-primary-50); color: var(--clr-primary-900); font-weight: 600; } .theh-field-preview--select .cs-option--disabled { opacity: 0.4; cursor: not-allowed; } .theh-field-preview--select .cs-option--empty { justify-content: center; color: var(--clr-text-aux); cursor: default; } .theh-field-preview--select .cs-option__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theh-field-preview--select .cs-option__check { flex-shrink: 0; display: flex; align-items: center; color: var(--clr-accent-500); } @keyframes theh-cs-in { from { opacity: 0; transform: translateY(-0.6rem); } to { opacity: 1; transform: translateY(0); } } @keyframes theh-cs-in-up { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: translateY(0); } } .theh-thumb { background: var(--clr-background-secondary); } .theh-thumb .no-auto-cover__img { backface-visibility: hidden; transform: translateZ(0); } /* Reservation page components */ /** * rsv-eq-item — 장비 목록 1행 컴포넌트. * 타이포 위계는 HTML .no-* 유틸로만(규칙 #17-A). 여기선 레이아웃·색·상태만. */ .rsv-eq-item { display: flex; gap: var(--spacing-sm); padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); border-bottom: 1px solid var(--clr-gray-200); background: transparent; text-decoration: none; cursor: pointer; transition: background-color var(--tran-15); } .rsv-eq-item:hover { background: var(--clr-gray-50); } .rsv-eq-item.is-active { background: var(--clr-primary-50); border-left: 3px solid var(--clr-primary-700); } .rsv-eq-item__thumb { flex-shrink: 0; width: 6.4rem; height: 6.4rem; border-radius: var(--radius-sm); overflow: hidden; background: var(--clr-gray-100); } .rsv-eq-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .rsv-eq-item__thumb-placeholder { display: block; width: 100%; height: 100%; background: var(--clr-gray-200); } .rsv-eq-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .rsv-eq-item__name { display: block; color: var(--clr-text-base); } .is-active .rsv-eq-item__name { color: var(--clr-primary-900); } .rsv-eq-item__sub { display: block; color: var(--clr-primary-700); } .rsv-eq-item__contact, .rsv-eq-item__phone { display: block; color: var(--clr-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /** * rsv-notices — 예약 페이지 우측 Notices 박스. * 타이포 위계는 HTML .no-* 유틸로만(규칙 #17-A). 여기선 레이아웃·색·상태만. */ .rsv-notices { border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: #fff; overflow: hidden; } .rsv-notices__tabs { display: flex; border-bottom: 1px solid var(--clr-gray-200); } .rsv-notices__tab { flex: 1; padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--clr-text-sub); cursor: pointer; text-align: center; transition: color var(--tran-15), border-color var(--tran-15); } .rsv-notices__tab:hover { color: var(--clr-text-base); } .rsv-notices__tab.is-active { color: var(--clr-primary-900); border-bottom-color: var(--clr-primary-700); } .rsv-notices__list { list-style: none; padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); margin: 0; display: flex; flex-direction: column; gap: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); } .rsv-notices__item { display: flex; flex-direction: column; gap: 0.2rem; } .rsv-notices__tag { display: block; color: var(--clr-primary-700); } .rsv-notices__body { display: none; } .rsv-notices__pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-xs); padding: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); border-top: 1px solid var(--clr-gray-200); } .rsv-notices__pager-count { color: var(--clr-text-sub); margin-right: auto; } .rsv-notices__pager-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-xs); background: #fff; color: var(--clr-text-base); cursor: pointer; transition: background-color var(--tran-15), border-color var(--tran-15); } .rsv-notices__pager-btn:hover { background: var(--clr-gray-50); border-color: var(--clr-gray-400); } /** * rsv-cal — 예약 월간 스케줄 달력 컴포넌트. * board-calendar와 완전 독립(BEM: rsv-cal). * 타이포 위계는 HTML .no-* 유틸로만(규칙 #17-A). 여기선 레이아웃·색·상태만. */ .rsv-cal__head { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } @media (max-width: 768px) { .rsv-cal__head { flex-direction: column; align-items: flex-start; } } .rsv-cal__view-toggle { display: inline-flex; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); overflow: hidden; } .rsv-cal__view-btn { padding: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem) clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); background: #fff; border: 0; color: var(--clr-text-sub); cursor: pointer; transition: background-color var(--tran-15), color var(--tran-15); } .rsv-cal__view-btn + .rsv-cal__view-btn { border-left: 1px solid var(--clr-gray-300); } .rsv-cal__view-btn.is-active { background: var(--clr-primary-900); color: #fff; } .rsv-cal__view-btn:not(.is-active):hover { background: var(--clr-gray-50); color: var(--clr-text-base); } .rsv-cal__nav { display: inline-flex; align-items: center; gap: var(--spacing-md); margin-left: auto; } @media (max-width: 768px) { .rsv-cal__nav { margin-left: 0; } } .rsv-cal__nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-xs); background: #fff; color: var(--clr-text-base); text-decoration: none; transition: background-color var(--tran-15); } .rsv-cal__nav-btn:hover { background: var(--clr-gray-50); } .rsv-cal__month { color: var(--clr-text-base); min-width: 9rem; text-align: center; } .rsv-cal__legend { display: inline-flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; } .rsv-cal__legend-item { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--clr-text-sub); } .rsv-cal__chip { display: inline-block; width: 1rem; height: 1rem; border-radius: var(--radius-xs); flex-shrink: 0; } .rsv-cal__chip--pending { background: var(--clr-gray-300); } .rsv-cal__chip--approved { background: var(--clr-primary-700); } .rsv-cal__chip--completed { background: #15803d; } .rsv-cal__grid { border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); overflow: hidden; } .rsv-cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--clr-primary-900); } .rsv-cal__weekday { padding: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem) clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); color: rgba(255, 255, 255, 0.85); text-align: center; } .rsv-cal__week { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--clr-gray-200); } .rsv-cal__week:last-child { border-bottom: 0; } .rsv-cal__cell { min-height: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem); border-right: 1px solid var(--clr-gray-200); padding: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem) clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem); display: flex; flex-direction: column; gap: 0.2rem; background: #fff; } .rsv-cal__cell:last-child { border-right: 0; } .rsv-cal__cell--empty { background: var(--clr-gray-50); } .rsv-cal__cell--today { background: var(--clr-primary-50); } .rsv-cal__day-num { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; color: var(--clr-text-sub); align-self: flex-start; } .rsv-cal__day-num--today { background: var(--clr-primary-700); color: #fff; border-radius: 50%; } .rsv-cal__slot { display: block; width: 100%; padding: 0.2rem 0.4rem; border: 0; border-radius: var(--radius-xs); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: opacity var(--tran-15); } .rsv-cal__slot:hover { opacity: 0.8; } .rsv-cal__slot--pending { background: var(--clr-gray-200); color: var(--clr-text-sub); } .rsv-cal__slot--approved { background: var(--clr-primary-700); color: #fff; } .rsv-cal__slot--completed { background: #15803d; color: #fff; } .rsv-cal__footnote { margin-top: var(--spacing-sm); color: var(--clr-text-sub); } /* Third-party wrappers */ :root { --iti-hover-color: rgba(0, 0, 0, 0.05); --iti-border-color: #ccc; --iti-dropdown-bg: white; --iti-icon-color: #555; --iti-spacer-horizontal: 8px; --iti-flag-height: 12px; --iti-flag-width: 16px; --iti-globe-height: 16px; --iti-search-clear-icon-height: 13px; --iti-border-width: 1px; --iti-arrow-height: 4px; --iti-arrow-width: calc((var(--iti-arrow-height) / 2) * 3); --iti-triangle-border: calc(var(--iti-arrow-width) / 2); --iti-arrow-padding: 6px; --iti-flag-sprite-width: 3904px; --iti-flag-sprite-height: 12px; --iti-mobile-popup-margin: 30px; } .iti { position: relative; display: inline-block; } .iti * { box-sizing: border-box; } .iti__a11y-text { width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; position: absolute; } .iti input.iti__tel-input, .iti input.iti__tel-input[type=text], .iti input.iti__tel-input[type=tel] { position: relative; z-index: 0; margin: 0 !important; } .iti__country-container { position: absolute; top: 0; bottom: 0; left: 0; padding: var(--iti-border-width); } .iti__selected-country { z-index: 1; position: relative; display: flex; align-items: center; height: 100%; background: none; border: 0; margin: 0; padding: 0; font-family: inherit; font-size: inherit; color: inherit; border-radius: 0; font-weight: inherit; line-height: inherit; text-decoration: none; } .iti__selected-country-primary { display: flex; align-items: center; height: 100%; padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal); } .iti__arrow { margin-left: var(--iti-arrow-padding); width: 0; height: 0; border-left: var(--iti-triangle-border) solid transparent; border-right: var(--iti-triangle-border) solid transparent; border-top: var(--iti-arrow-height) solid var(--iti-icon-color); } .iti__arrow--up { border-top: none; border-bottom: var(--iti-arrow-height) solid var(--iti-icon-color); } .iti__dropdown-content { border-radius: 3px; background-color: var(--iti-dropdown-bg); } .iti--inline-dropdown .iti__dropdown-content { border: var(--iti-border-width) solid var(--iti-border-color); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); } .iti--inline-dropdown:not(.iti--container) .iti__dropdown-content { position: absolute; z-index: 2; left: 0; } .iti__search-input { width: 100%; border-width: 0; border-radius: 3px; padding-left: 30px; padding-right: 28px; } [dir=rtl] .iti__search-input { padding-left: inherit; padding-right: 30px; background-position: right 8px center; } .iti__search-input::-webkit-search-cancel-button { appearance: none; } .iti__search-input, .iti__country { padding-top: 8px; padding-bottom: 8px; } .iti__search-input-wrapper { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--iti-border-color); } .iti__search-icon { position: absolute; left: 8px; display: flex; pointer-events: none; } [dir=rtl] .iti__search-icon { left: auto; right: 8px; } .iti__search-icon-svg { width: var(--iti-globe-height); height: var(--iti-globe-height); display: block; stroke: var(--iti-icon-color); fill: none; stroke-width: 3; } .iti__search-clear { position: absolute; right: 4px; background: transparent; border: 0; border-radius: 3px; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s ease; } .iti__search-clear .iti__search-clear-x { stroke-width: 2; } .iti__search-clear .iti__search-clear-bg { fill: var(--iti-icon-color); } .iti__search-clear-svg { width: var(--iti-search-clear-icon-height); height: var(--iti-search-clear-icon-height); display: block; } [dir=rtl] .iti__search-clear { right: auto; left: 4px; } .iti__search-clear:hover, .iti__search-clear:focus-visible { background: var(--iti-hover-color); outline: none; } .iti__no-results { text-align: center; padding: 30px 0; } .iti__country-list { list-style: none; padding: 0; margin: 0; cursor: pointer; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .iti--inline-dropdown .iti__country-list { max-height: 185px; } .iti--flexible-dropdown-width .iti__country-list { white-space: nowrap; } @media (max-width: 500px) { .iti--flexible-dropdown-width .iti__country-list { white-space: normal; } } .iti__country { display: flex; align-items: center; padding-left: var(--iti-spacer-horizontal); padding-right: var(--iti-spacer-horizontal); outline: none; } .iti__country-name { flex-grow: 1; } .iti__country-check { margin: 0 1px 0 var(--iti-spacer-horizontal); display: flex; align-items: center; color: var(--iti-icon-color); } .iti__country-check-svg { width: var(--iti-search-clear-icon-height); height: var(--iti-search-clear-icon-height); display: block; } .iti__country.iti__highlight { background-color: var(--iti-hover-color); } .iti__country-list .iti__flag { margin-right: var(--iti-spacer-horizontal); } [dir=rtl] .iti__country-list .iti__flag { margin-right: 0; margin-left: var(--iti-spacer-horizontal); } .iti__country-list .iti__flag { flex-shrink: 0; } .iti--allow-dropdown .iti__country-container:has(+ input[disabled]) button.iti__selected-country, .iti--allow-dropdown .iti__country-container:has(+ input[readonly]) button.iti__selected-country { cursor: not-allowed; } .iti--allow-dropdown .iti__country-container:has(+ input[disabled]) button.iti__selected-country .iti__arrow, .iti--allow-dropdown .iti__country-container:has(+ input[readonly]) button.iti__selected-country .iti__arrow { visibility: hidden; } .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary { background-color: var(--iti-hover-color); } .iti .iti__selected-dial-code { margin-left: 4px; } .iti--container { position: fixed; top: -1000px; left: -1000px; z-index: 1060; } .iti--container:hover { cursor: pointer; } .iti__hide { display: none; } .iti__v-hide { visibility: hidden; } .iti--fullscreen-popup.iti--container { background-color: rgba(0, 0, 0, 0.5); top: 0; bottom: 0; left: 0; right: 0; position: fixed; padding: var(--iti-mobile-popup-margin); display: flex; flex-direction: column; justify-content: flex-start; } .iti--fullscreen-popup .iti__dropdown-content { display: flex; flex-direction: column; max-height: 100%; position: relative; } .iti--fullscreen-popup .iti__country, .iti--fullscreen-popup .iti__search-input { padding-top: 10px; padding-bottom: 10px; } .iti--fullscreen-popup .iti__country { padding-left: 10px; padding-right: 10px; line-height: 1.5em; } .iti__flag { --iti-flag-offset: 100px; height: var(--iti-flag-height); width: var(--iti-flag-width); border-radius: 1px; box-shadow: 0px 0px 1px 0px #888; background-image: image-set(var(--iti-path-flags-1x) 1x, var(--iti-path-flags-2x) 2x); background-repeat: no-repeat; background-position: var(--iti-flag-offset) 0; background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height); } .iti__loading { position: relative; background: none; box-shadow: none; } .iti__loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: var(--iti-flag-height); height: var(--iti-flag-height); box-sizing: border-box; border: 2px solid var(--iti-icon-color); border-right-color: transparent; border-radius: 50%; animation: iti-spinner 1s linear infinite; } @keyframes iti-spinner { to { transform: rotate(360deg); } } .iti__ac { --iti-flag-offset: 0px; } .iti__ad { --iti-flag-offset: -16px; } .iti__ae { --iti-flag-offset: -32px; } .iti__af { --iti-flag-offset: -48px; } .iti__ag { --iti-flag-offset: -64px; } .iti__ai { --iti-flag-offset: -80px; } .iti__al { --iti-flag-offset: -96px; } .iti__am { --iti-flag-offset: -112px; } .iti__ao { --iti-flag-offset: -128px; } .iti__ar { --iti-flag-offset: -144px; } .iti__as { --iti-flag-offset: -160px; } .iti__at { --iti-flag-offset: -176px; } .iti__au { --iti-flag-offset: -192px; } .iti__aw { --iti-flag-offset: -208px; } .iti__ax { --iti-flag-offset: -224px; } .iti__az { --iti-flag-offset: -240px; } .iti__ba { --iti-flag-offset: -256px; } .iti__bb { --iti-flag-offset: -272px; } .iti__bd { --iti-flag-offset: -288px; } .iti__be { --iti-flag-offset: -304px; } .iti__bf { --iti-flag-offset: -320px; } .iti__bg { --iti-flag-offset: -336px; } .iti__bh { --iti-flag-offset: -352px; } .iti__bi { --iti-flag-offset: -368px; } .iti__bj { --iti-flag-offset: -384px; } .iti__bl { --iti-flag-offset: -400px; } .iti__bm { --iti-flag-offset: -416px; } .iti__bn { --iti-flag-offset: -432px; } .iti__bo { --iti-flag-offset: -448px; } .iti__bq { --iti-flag-offset: -464px; } .iti__br { --iti-flag-offset: -480px; } .iti__bs { --iti-flag-offset: -496px; } .iti__bt { --iti-flag-offset: -512px; } .iti__bw { --iti-flag-offset: -528px; } .iti__by { --iti-flag-offset: -544px; } .iti__bz { --iti-flag-offset: -560px; } .iti__ca { --iti-flag-offset: -576px; } .iti__cc { --iti-flag-offset: -592px; } .iti__cd { --iti-flag-offset: -608px; } .iti__cf { --iti-flag-offset: -624px; } .iti__cg { --iti-flag-offset: -640px; } .iti__ch { --iti-flag-offset: -656px; } .iti__ci { --iti-flag-offset: -672px; } .iti__ck { --iti-flag-offset: -688px; } .iti__cl { --iti-flag-offset: -704px; } .iti__cm { --iti-flag-offset: -720px; } .iti__cn { --iti-flag-offset: -736px; } .iti__co { --iti-flag-offset: -752px; } .iti__cr { --iti-flag-offset: -768px; } .iti__cu { --iti-flag-offset: -784px; } .iti__cv { --iti-flag-offset: -800px; } .iti__cw { --iti-flag-offset: -816px; } .iti__cx { --iti-flag-offset: -832px; } .iti__cy { --iti-flag-offset: -848px; } .iti__cz { --iti-flag-offset: -864px; } .iti__de { --iti-flag-offset: -880px; } .iti__dj { --iti-flag-offset: -896px; } .iti__dk { --iti-flag-offset: -912px; } .iti__dm { --iti-flag-offset: -928px; } .iti__do { --iti-flag-offset: -944px; } .iti__dz { --iti-flag-offset: -960px; } .iti__ec { --iti-flag-offset: -976px; } .iti__ee { --iti-flag-offset: -992px; } .iti__eg { --iti-flag-offset: -1008px; } .iti__eh { --iti-flag-offset: -1024px; } .iti__er { --iti-flag-offset: -1040px; } .iti__es { --iti-flag-offset: -1056px; } .iti__et { --iti-flag-offset: -1072px; } .iti__fi { --iti-flag-offset: -1088px; } .iti__fj { --iti-flag-offset: -1104px; } .iti__fk { --iti-flag-offset: -1120px; } .iti__fm { --iti-flag-offset: -1136px; } .iti__fo { --iti-flag-offset: -1152px; } .iti__fr { --iti-flag-offset: -1168px; } .iti__ga { --iti-flag-offset: -1184px; } .iti__gb { --iti-flag-offset: -1200px; } .iti__gd { --iti-flag-offset: -1216px; } .iti__ge { --iti-flag-offset: -1232px; } .iti__gf { --iti-flag-offset: -1248px; } .iti__gg { --iti-flag-offset: -1264px; } .iti__gh { --iti-flag-offset: -1280px; } .iti__gi { --iti-flag-offset: -1296px; } .iti__gl { --iti-flag-offset: -1312px; } .iti__gm { --iti-flag-offset: -1328px; } .iti__gn { --iti-flag-offset: -1344px; } .iti__gp { --iti-flag-offset: -1360px; } .iti__gq { --iti-flag-offset: -1376px; } .iti__gr { --iti-flag-offset: -1392px; } .iti__gt { --iti-flag-offset: -1408px; } .iti__gu { --iti-flag-offset: -1424px; } .iti__gw { --iti-flag-offset: -1440px; } .iti__gy { --iti-flag-offset: -1456px; } .iti__hk { --iti-flag-offset: -1472px; } .iti__hn { --iti-flag-offset: -1488px; } .iti__hr { --iti-flag-offset: -1504px; } .iti__ht { --iti-flag-offset: -1520px; } .iti__hu { --iti-flag-offset: -1536px; } .iti__id { --iti-flag-offset: -1552px; } .iti__ie { --iti-flag-offset: -1568px; } .iti__il { --iti-flag-offset: -1584px; } .iti__im { --iti-flag-offset: -1600px; } .iti__in { --iti-flag-offset: -1616px; } .iti__io { --iti-flag-offset: -1632px; } .iti__iq { --iti-flag-offset: -1648px; } .iti__ir { --iti-flag-offset: -1664px; } .iti__is { --iti-flag-offset: -1680px; } .iti__it { --iti-flag-offset: -1696px; } .iti__je { --iti-flag-offset: -1712px; } .iti__jm { --iti-flag-offset: -1728px; } .iti__jo { --iti-flag-offset: -1744px; } .iti__jp { --iti-flag-offset: -1760px; } .iti__ke { --iti-flag-offset: -1776px; } .iti__kg { --iti-flag-offset: -1792px; } .iti__kh { --iti-flag-offset: -1808px; } .iti__ki { --iti-flag-offset: -1824px; } .iti__km { --iti-flag-offset: -1840px; } .iti__kn { --iti-flag-offset: -1856px; } .iti__kp { --iti-flag-offset: -1872px; } .iti__kr { --iti-flag-offset: -1888px; } .iti__kw { --iti-flag-offset: -1904px; } .iti__ky { --iti-flag-offset: -1920px; } .iti__kz { --iti-flag-offset: -1936px; } .iti__la { --iti-flag-offset: -1952px; } .iti__lb { --iti-flag-offset: -1968px; } .iti__lc { --iti-flag-offset: -1984px; } .iti__li { --iti-flag-offset: -2000px; } .iti__lk { --iti-flag-offset: -2016px; } .iti__lr { --iti-flag-offset: -2032px; } .iti__ls { --iti-flag-offset: -2048px; } .iti__lt { --iti-flag-offset: -2064px; } .iti__lu { --iti-flag-offset: -2080px; } .iti__lv { --iti-flag-offset: -2096px; } .iti__ly { --iti-flag-offset: -2112px; } .iti__ma { --iti-flag-offset: -2128px; } .iti__mc { --iti-flag-offset: -2144px; } .iti__md { --iti-flag-offset: -2160px; } .iti__me { --iti-flag-offset: -2176px; } .iti__mf { --iti-flag-offset: -2192px; } .iti__mg { --iti-flag-offset: -2208px; } .iti__mh { --iti-flag-offset: -2224px; } .iti__mk { --iti-flag-offset: -2240px; } .iti__ml { --iti-flag-offset: -2256px; } .iti__mm { --iti-flag-offset: -2272px; } .iti__mn { --iti-flag-offset: -2288px; } .iti__mo { --iti-flag-offset: -2304px; } .iti__mp { --iti-flag-offset: -2320px; } .iti__mq { --iti-flag-offset: -2336px; } .iti__mr { --iti-flag-offset: -2352px; } .iti__ms { --iti-flag-offset: -2368px; } .iti__mt { --iti-flag-offset: -2384px; } .iti__mu { --iti-flag-offset: -2400px; } .iti__mv { --iti-flag-offset: -2416px; } .iti__mw { --iti-flag-offset: -2432px; } .iti__mx { --iti-flag-offset: -2448px; } .iti__my { --iti-flag-offset: -2464px; } .iti__mz { --iti-flag-offset: -2480px; } .iti__na { --iti-flag-offset: -2496px; } .iti__nc { --iti-flag-offset: -2512px; } .iti__ne { --iti-flag-offset: -2528px; } .iti__nf { --iti-flag-offset: -2544px; } .iti__ng { --iti-flag-offset: -2560px; } .iti__ni { --iti-flag-offset: -2576px; } .iti__nl { --iti-flag-offset: -2592px; } .iti__no { --iti-flag-offset: -2608px; } .iti__np { --iti-flag-offset: -2624px; } .iti__nr { --iti-flag-offset: -2640px; } .iti__nu { --iti-flag-offset: -2656px; } .iti__nz { --iti-flag-offset: -2672px; } .iti__om { --iti-flag-offset: -2688px; } .iti__pa { --iti-flag-offset: -2704px; } .iti__pe { --iti-flag-offset: -2720px; } .iti__pf { --iti-flag-offset: -2736px; } .iti__pg { --iti-flag-offset: -2752px; } .iti__ph { --iti-flag-offset: -2768px; } .iti__pk { --iti-flag-offset: -2784px; } .iti__pl { --iti-flag-offset: -2800px; } .iti__pm { --iti-flag-offset: -2816px; } .iti__pr { --iti-flag-offset: -2832px; } .iti__ps { --iti-flag-offset: -2848px; } .iti__pt { --iti-flag-offset: -2864px; } .iti__pw { --iti-flag-offset: -2880px; } .iti__py { --iti-flag-offset: -2896px; } .iti__qa { --iti-flag-offset: -2912px; } .iti__re { --iti-flag-offset: -2928px; } .iti__ro { --iti-flag-offset: -2944px; } .iti__rs { --iti-flag-offset: -2960px; } .iti__ru { --iti-flag-offset: -2976px; } .iti__rw { --iti-flag-offset: -2992px; } .iti__sa { --iti-flag-offset: -3008px; } .iti__sb { --iti-flag-offset: -3024px; } .iti__sc { --iti-flag-offset: -3040px; } .iti__sd { --iti-flag-offset: -3056px; } .iti__se { --iti-flag-offset: -3072px; } .iti__sg { --iti-flag-offset: -3088px; } .iti__sh { --iti-flag-offset: -3104px; } .iti__si { --iti-flag-offset: -3120px; } .iti__sj { --iti-flag-offset: -3136px; } .iti__sk { --iti-flag-offset: -3152px; } .iti__sl { --iti-flag-offset: -3168px; } .iti__sm { --iti-flag-offset: -3184px; } .iti__sn { --iti-flag-offset: -3200px; } .iti__so { --iti-flag-offset: -3216px; } .iti__sr { --iti-flag-offset: -3232px; } .iti__ss { --iti-flag-offset: -3248px; } .iti__st { --iti-flag-offset: -3264px; } .iti__sv { --iti-flag-offset: -3280px; } .iti__sx { --iti-flag-offset: -3296px; } .iti__sy { --iti-flag-offset: -3312px; } .iti__sz { --iti-flag-offset: -3328px; } .iti__tc { --iti-flag-offset: -3344px; } .iti__td { --iti-flag-offset: -3360px; } .iti__tg { --iti-flag-offset: -3376px; } .iti__th { --iti-flag-offset: -3392px; } .iti__tj { --iti-flag-offset: -3408px; } .iti__tk { --iti-flag-offset: -3424px; } .iti__tl { --iti-flag-offset: -3440px; } .iti__tm { --iti-flag-offset: -3456px; } .iti__tn { --iti-flag-offset: -3472px; } .iti__to { --iti-flag-offset: -3488px; } .iti__tr { --iti-flag-offset: -3504px; } .iti__tt { --iti-flag-offset: -3520px; } .iti__tv { --iti-flag-offset: -3536px; } .iti__tw { --iti-flag-offset: -3552px; } .iti__tz { --iti-flag-offset: -3568px; } .iti__ua { --iti-flag-offset: -3584px; } .iti__ug { --iti-flag-offset: -3600px; } .iti__us { --iti-flag-offset: -3616px; } .iti__uy { --iti-flag-offset: -3632px; } .iti__uz { --iti-flag-offset: -3648px; } .iti__va { --iti-flag-offset: -3664px; } .iti__vc { --iti-flag-offset: -3680px; } .iti__ve { --iti-flag-offset: -3696px; } .iti__vg { --iti-flag-offset: -3712px; } .iti__vi { --iti-flag-offset: -3728px; } .iti__vn { --iti-flag-offset: -3744px; } .iti__vu { --iti-flag-offset: -3760px; } .iti__wf { --iti-flag-offset: -3776px; } .iti__ws { --iti-flag-offset: -3792px; } .iti__xk { --iti-flag-offset: -3808px; } .iti__ye { --iti-flag-offset: -3824px; } .iti__yt { --iti-flag-offset: -3840px; } .iti__za { --iti-flag-offset: -3856px; } .iti__zm { --iti-flag-offset: -3872px; } .iti__zw { --iti-flag-offset: -3888px; } .iti__globe { background: none; box-shadow: none; height: var(--iti-globe-height); display: flex; align-items: center; justify-content: center; padding: 0; } .iti__globe .iti__globe-svg { width: 100%; height: 100%; fill: var(--iti-icon-color); } @supports (-webkit-appearance: none) and (not (background: -webkit-canvas(foo))) { .iti__tel-input:focus { outline-offset: 1px; } } :root { --iti-path-flags-1x: url('/assets/images/intl-tel-input/flags.webp'); --iti-path-flags-2x: url('/assets/images/intl-tel-input/flags@2x.webp'); } .sec-join-intl-phone { position: relative; overflow: visible; } .sec-join-intl-phone .iti { width: 100%; display: block; overflow: visible; } .sec-join-intl-phone .iti__selected-country { padding: 0 var(--spacing-sm) 0 0; background: transparent; border: 0; color: var(--clr-text-primary); gap: var(--spacing-xs); transition: color 0.15s ease; } .sec-join-intl-phone .iti__selected-country:hover:not(:disabled) { color: var(--clr-primary-700); } .sec-join-intl-phone .iti__selected-country:focus { outline: 0; } .sec-join-intl-phone__input { padding: var(--spacing-sm) 0; border: 0; border-bottom: 1px solid var(--clr-gray-300); background: transparent; color: var(--clr-text-primary); width: 100%; } .sec-join-intl-phone__input:focus { outline: 0; border-bottom-color: var(--clr-primary-700); } .sec-join-intl-phone .iti--allow-dropdown input, .sec-join-intl-phone .iti--separate-dial-code input { border: 0; border-bottom: 1px solid var(--clr-gray-300); background: transparent; padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); } .sec-join-intl-phone .iti--allow-dropdown input:focus, .sec-join-intl-phone .iti--separate-dial-code input:focus { border-bottom-color: var(--clr-primary-700); outline: 0; } .sec-join-intl-phone .iti__dropdown-content { border: 1px solid var(--clr-gray-200); border-radius: var(--radius-sm); background: var(--clr-base-white); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); color: var(--clr-text-base); z-index: 9999; min-width: 28rem; max-width: min(40rem, 90vw); max-height: 30rem; overflow: hidden; } .sec-join-intl-phone .iti__dropdown-content:not(.iti__hide) { display: flex; flex-direction: column; } .sec-join-intl-phone .iti__country-list { overflow-y: auto; flex: 1 1 auto; } .sec-join-intl-phone .iti__country { color: var(--clr-text-base); } .sec-join-intl-phone .iti__country.iti__highlight, .sec-join-intl-phone .iti__country:hover { background: var(--clr-bg-section); } .sec-join-intl-phone .iti__dial-code { color: var(--clr-text-sub); } .sec-join-intl-phone .iti__search-input { border-bottom: 1px solid var(--clr-gray-200); color: var(--clr-text-base); background: var(--clr-base-white); font-family: inherit; } .sec-join-intl-phone .iti__search-input::placeholder { color: var(--clr-text-aux); } .cms-section { position: relative; isolation: isolate; background: var(--cms-sec-bg, transparent); background-image: var(--cms-sec-img, none); background-position: var(--cms-sec-img-pos, center center); background-size: var(--cms-sec-img-size, cover); background-repeat: var(--cms-sec-img-repeat, no-repeat); color: var(--cms-sec-color, inherit); } .cms-section--has-overlay::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--cms-sec-ov, transparent); opacity: var(--cms-sec-op, 0); } .cms-section__bg-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .cms-section > :not(.cms-section__bg-video) { position: relative; z-index: 1; } .cms-section--has-bg > section { background-color: transparent; } .cms-template-media-fit-cover img, .cms-template-media-fit-cover video { object-fit: cover; } .cms-template-media-fit-contain img, .cms-template-media-fit-contain video { object-fit: contain; } .cms-template-media-fit-fill img, .cms-template-media-fit-fill video { object-fit: fill; } .cms-template-media-fit-none img, .cms-template-media-fit-none video { object-fit: none; } .cms-template-media-fit-scale-down img, .cms-template-media-fit-scale-down video { object-fit: scale-down; } /** * sec-ui-hero-scroll-fx — Waabi-style pinned hero+about (1:1 port). * 정본: workspace/main-animation/styles.css * Layout/positioning only. 폰트 위계는 마크업 .no-* 유틸 위임 (Rule #17). * Waabi 원본의 px 값(125px, 1000px, 225px, 500px, 4rem, 275svh)·`#e3e3db` 배경은 * ScrollTrigger progress 곡선 보존을 위해 verbatim 유지. */ .sec-ui-hero-scroll-fx { position: relative; width: 100%; overflow: hidden; } .sec-ui-hero-scroll-fx img { width: 100%; height: 100%; object-fit: cover; display: block; } .sec-ui-hero-scroll-fx__hero { position: relative; width: 100%; height: 100svh; z-index: 3; /* about-col 위 stacking (사용자 요청) */ pointer-events: none; /* pinSpacing:false 로 about 위에 DOM 그대로 잔존 → CTA 클릭 차단. hero 내부는 장식 텍스트뿐이라 안전. 추후 hero 에 클릭 요소 추가 시 해당 요소만 pointer-events:auto 로 복귀 필요. */ } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx__hero { z-index: 2; } } .sec-ui-hero-scroll-fx__hero-img, .sec-ui-hero-scroll-fx__hero-header, .sec-ui-hero-scroll-fx__hero-copy { position: absolute; width: 100%; height: 100%; will-change: transform, opacity; } .sec-ui-hero-scroll-fx__hero-img { top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; pointer-events: none; } .sec-ui-hero-scroll-fx__hero-img-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%); pointer-events: none; } .sec-ui-hero-scroll-fx__hero-header, .sec-ui-hero-scroll-fx__hero-copy { padding: 4rem; /* 4rem = 40px @ root 62.5% */ color: #fff; display: flex; align-items: flex-end; } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx__hero-header, .sec-ui-hero-scroll-fx__hero-copy { padding: 2rem; /* 20px */ } } .sec-ui-hero-scroll-fx__hero-header h1 { width: 75%; } .sec-ui-hero-scroll-fx__hero-header h1.is-intro-ready .line { display: block; overflow: hidden; /* translateY 된 word 가 줄 밖으로 안 새도록 */ } .sec-ui-hero-scroll-fx__hero-header h1.is-intro-ready .word { display: inline-block; /* yPercent 적용 위해 */ opacity: 0; will-change: transform, opacity; /* transform: translateY(110%) 제거 — gsap yPercent:110 이 일원 관리. SCSS raw transform 과 gsap yPercent 가 합산돼 0 으로 못 내려가는 버그 수정. */ } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx__hero-header h1 { width: 100%; } } @media (scripting: enabled) { .sec-ui-hero-scroll-fx__hero-header h1, .sec-ui-hero-scroll-fx__hero-copy h3, .sec-ui-hero-scroll-fx__about-header h3 { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sec-ui-hero-scroll-fx__hero-header h1, .sec-ui-hero-scroll-fx__hero-copy h3, .sec-ui-hero-scroll-fx__about-header h3 { opacity: 1; } .sec-ui-hero-scroll-fx__hero-header h1.is-intro-ready .word { transform: none; opacity: 1; } } .sec-ui-hero-scroll-fx__hero-copy h3 { width: 50%; } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx__hero-copy h3 { width: 100%; } } .sec-ui-hero-scroll-fx__about { position: relative; width: 100%; height: 100svh; margin-top: 275svh; display: flex; justify-content: center; align-items: center; text-align: center; z-index: 1; /* hero(z3) 아래 * } &__about-images { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; /* 헤더 CTA 클릭 통과 — 이미지에 hover/lightbox 추가 시 해당 이미지만 auto 로 복귀 */ z-index: 1; } .sec-ui-hero-scroll-fx__img { position: absolute; width: 15rem; /* 150px @ root 62.5% — hero img 종점과 통일 */ height: 15rem; /* 150px */ border-radius: 1.6rem; /* 16px */ overflow: hidden; will-change: transform; } @media (max-width: 1320px) and (min-width: 1024px) { .sec-ui-hero-scroll-fx__img { width: 12rem; /* 120px — 150px 보다 작게 해서 외측·내측 사이 gap 확보 */ height: 12rem; /* 120px */ } } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx__img { width: 10rem; /* 100px — 좁은 viewport 비례 축소 */ height: 10rem; /* 100px */ opacity: 0.5; filter: saturate(0); } } .sec-ui-hero-scroll-fx { /* 초기 transform 은 GSAP set (x/y) 이 매 프레임 일원 관리 — SCSS 미지정 */ /* 8장 코너 산개 좌표 — 외측 ↔ 내측 페어 (1·2 좌상, 3·4 우상, 5·6 좌하, 7·8 우하) */ } .sec-ui-hero-scroll-fx #about-img-1 { top: 8%; left: 6%; } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-1 { top: 6%; left: 4%; } } .sec-ui-hero-scroll-fx #about-img-2 { top: 18%; left: 22%; } @media (max-width: 1320px) and (min-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-2 { top: 20%; left: 18%; } } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-2 { display: none; } } .sec-ui-hero-scroll-fx #about-img-3 { top: 18%; right: 22%; } @media (max-width: 1320px) and (min-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-3 { top: 20%; right: 18%; } } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-3 { display: none; } } .sec-ui-hero-scroll-fx #about-img-4 { top: 8%; right: 6%; } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-4 { top: 6%; right: 4%; } } .sec-ui-hero-scroll-fx #about-img-5 { bottom: 18%; left: 22%; } @media (max-width: 1320px) and (min-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-5 { bottom: 20%; left: 18%; } } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-5 { display: none; } } .sec-ui-hero-scroll-fx #about-img-6 { bottom: 8%; left: 6%; } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-6 { bottom: 6%; left: 4%; } } .sec-ui-hero-scroll-fx #about-img-7 { bottom: 18%; right: 22%; } @media (max-width: 1320px) and (min-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-7 { bottom: 20%; right: 18%; } } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-7 { display: none; } } .sec-ui-hero-scroll-fx #about-img-8 { bottom: 8%; right: 6%; } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx #about-img-8 { bottom: 6%; right: 4%; } } .sec-ui-hero-scroll-fx__about-header { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40%; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; /* 24px — h3 와 CTA 사이 */ z-index: 2; /* images(z1) 위 — CTA 클릭 보장 */ } @media (max-width: 1024px) { .sec-ui-hero-scroll-fx__about-header { width: 100%; padding: 2rem; /* 20px */ } } .sec-ui-hero-scroll-fx__about-header h3 { will-change: opacity; /* progress 후반 페이드인(JS) 대비 */ } /** * sec-hero-mesh — Fullbleed gradient mesh hero (layout/background only). * Typography / spacing inside is delivered by .no-* utility classes in the markup. */ .sec-hero-mesh { position: relative; width: 100%; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--clr-primary-900); color: var(--clr-base-white); isolation: isolate; } .sec-hero-mesh__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 0% 0%, rgba(0, 168, 204, 0.35) 0%, transparent 45%), radial-gradient(circle at 100% 0%, rgba(63, 160, 208, 0.3) 0%, transparent 50%), radial-gradient(circle at 50% 100%, rgba(15, 76, 129, 0.85) 0%, transparent 60%); } .sec-hero-mesh__blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; } .sec-hero-mesh__blob--1 { width: 40rem; height: 40rem; left: -8rem; top: 10%; background: var(--clr-accent-500); } .sec-hero-mesh__blob--2 { width: 50rem; height: 50rem; right: -10rem; top: -10%; background: var(--clr-primary-500); } .sec-hero-mesh__blob--3 { width: 60rem; height: 60rem; left: 30%; bottom: -20rem; background: var(--clr-primary-700); } .sec-hero-mesh__inner { position: relative; z-index: 1; padding-top: var(--section-xl); padding-bottom: var(--section-lg); display: flex; flex-direction: column; gap: var(--spacing-lg); } .sec-hero-mesh__overline { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: rgba(255, 255, 255, 0.7); } .sec-hero-mesh__headline { color: var(--clr-base-white); max-width: 22ch; } .sec-hero-mesh__sub { color: rgba(255, 255, 255, 0.78); max-width: 52ch; } .sec-hero-mesh__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-md); } .sec-hero-video-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--clr-base-white); } @media (max-width: 1024px) { .sec-hero-video-split { grid-template-columns: 1fr; } } .sec-hero-video-split__media { position: relative; aspect-ratio: 16/10; background: var(--clr-gray-100); overflow: hidden; } .sec-hero-video-split__video { width: 100%; height: 100%; object-fit: cover; display: block; } .sec-hero-video-split__body { display: flex; flex-direction: column; justify-content: center; color: var(--clr-text-primary); } .sec-hero-video-split__eyebrow { color: var(--clr-accent-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-hero-video-split__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-xl); } .sec-page-header-center__subline { text-align: center; color: var(--clr-text-secondary); padding-bottom: var(--section-md); } .sec-page-header-center__subline > p { max-width: 64ch; margin: 0 auto; } .sec-page-header-left { background: var(--clr-base-white); color: var(--clr-text-primary); } .sec-page-header-left__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--spacing-3xl); align-items: start; } @media (max-width: 768px) { .sec-page-header-left__grid { grid-template-columns: 1fr; } } .sec-page-header-left__copy { max-width: 60ch; } .sec-page-header-left__logo { display: flex; justify-content: flex-end; align-items: flex-start; } .sec-page-header-left__logo img { max-width: 36rem; width: 100%; height: auto; object-fit: contain; } .sec-section-intro-band { background: var(--clr-bg-section); text-align: center; color: var(--clr-text-primary); } .sec-section-intro-band__eyebrow { color: var(--clr-accent-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-section-intro-band__body { color: var(--clr-text-secondary); max-width: 60ch; margin-left: auto; margin-right: auto; } .sec-section-intro-band--bg-white { background: #fff; } .sec-disease-areas-grid { background: var(--clr-base-white); } .sec-disease-areas-grid__head { border-top: 1px solid var(--clr-gray-300); padding-top: var(--spacing-xl); } .sec-disease-areas-grid__eyebrow { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-disease-areas-grid__list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--spacing-3xl); row-gap: var(--spacing-2xl); } @media (max-width: 768px) { .sec-disease-areas-grid__list { grid-template-columns: 1fr; } } .sec-disease-areas-grid__item { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--spacing-xl); align-items: start; } @media (max-width: 544px) { .sec-disease-areas-grid__item { grid-template-columns: 1fr; } } .sec-disease-areas-grid__media { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--clr-gray-100); } .sec-disease-areas-grid__media img, .sec-disease-areas-grid__media .no-auto-cover { width: 100%; height: 100%; } .sec-disease-areas-grid__media .no-auto-cover__img { object-fit: cover; transition: transform 0.4s ease; } .sec-disease-areas-grid__media:hover .no-auto-cover__img { transform: scale(1.04); } .sec-disease-areas-grid__body { color: var(--clr-text-primary); } .sec-disease-areas-grid__body p { color: var(--clr-text-secondary); } .sec-feature-grid-3--bg-primary-50 { background: var(--clr-primary-50); } .sec-feature-grid-3 .ui-feature-card__icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; border-radius: var(--radius-round); background: var(--clr-primary-900); color: #fff; margin-bottom: var(--spacing-lg); } .sec-feature-grid-3 .ui-feature-card__icon-wrap svg { width: 2.4rem; height: 2.4rem; flex-shrink: 0; } .sec-feature-grid-3--bg-primary-50 .ui-feature-card { border-left: 3px solid var(--clr-primary-900); border-top: 1px solid var(--clr-gray-200); border-right: 1px solid var(--clr-gray-200); border-bottom: 1px solid var(--clr-gray-200); } .sec-feature-grid-3--bg-primary-50 .ui-feature-card:hover { border-left-color: var(--clr-primary-500); } .sec-feature-grid-3--bg-primary-50 .ui-feature-card__number { font-size: var(--body-xs-fs); color: var(--clr-primary-500); opacity: 0.7; margin-bottom: var(--spacing-xs); } .sec-feature-2-bigimg { background: var(--clr-base-white); } .sec-feature-2-bigimg__row { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--spacing-3xl); align-items: center; padding-top: var(--section-md); padding-bottom: var(--section-md); border-top: 1px solid var(--clr-gray-200); } .sec-feature-2-bigimg__row:first-child { border-top: 0; padding-top: 0; } .sec-feature-2-bigimg__row:last-child { padding-bottom: 0; } .sec-feature-2-bigimg__row--reversed { grid-template-columns: 1fr 1.2fr; } .sec-feature-2-bigimg__row--reversed .sec-feature-2-bigimg__media { order: 2; } .sec-feature-2-bigimg__row--reversed .sec-feature-2-bigimg__copy { order: 1; } @media (max-width: 768px) { .sec-feature-2-bigimg__row { grid-template-columns: 1fr; } .sec-feature-2-bigimg__row--reversed { grid-template-columns: 1fr; } .sec-feature-2-bigimg__row--reversed .sec-feature-2-bigimg__media { order: 0; } .sec-feature-2-bigimg__row--reversed .sec-feature-2-bigimg__copy { order: 0; } } .sec-feature-2-bigimg__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--clr-gray-100); } .sec-feature-2-bigimg__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .sec-feature-2-bigimg__media:hover img { transform: scale(1.04); } .sec-feature-2-bigimg__copy { max-width: 52ch; color: var(--clr-text-primary); } .sec-feature-2-bigimg__copy p { color: var(--clr-text-secondary); } .sec-feature-2-bigimg__eyebrow { color: var(--clr-accent-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-centers-leadership-3col { background: var(--clr-base-white); border-top: 1px solid var(--clr-gray-300); border-bottom: 1px solid var(--clr-gray-300); } .sec-centers-leadership-3col__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-3xl); } @media (max-width: 768px) { .sec-centers-leadership-3col__grid { grid-template-columns: 1fr; } } .sec-centers-leadership-3col__list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .sec-centers-leadership-3col__item { color: var(--clr-text-primary); } .sec-centers-leadership-3col__name { color: var(--clr-primary-700); } .sec-centers-leadership-3col__name:hover, .sec-centers-leadership-3col__name:focus-visible { color: var(--clr-accent-500); text-decoration: underline; } .sec-centers-leadership-3col__role { color: var(--clr-text-secondary); } .sec-buildings-grid-4col { background: var(--clr-base-white); } .sec-buildings-grid-4col__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-xl); } @media (max-width: 1320px) { .sec-buildings-grid-4col__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .sec-buildings-grid-4col__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .sec-buildings-grid-4col__grid { grid-template-columns: 1fr; } } .sec-buildings-grid-4col__media { aspect-ratio: 4/3; overflow: hidden; background: var(--clr-gray-100); margin-bottom: var(--spacing-md); } .sec-buildings-grid-4col__media img { width: 100%; height: 100%; object-fit: cover; } .sec-buildings-grid-4col__body { color: var(--clr-text-primary); } .sec-buildings-grid-4col__addr { color: var(--clr-text-secondary); } .sec-stats-band { background: var(--clr-primary-900); color: var(--clr-base-white); padding-top: var(--section-lg); padding-bottom: var(--section-lg); position: relative; overflow: hidden; } .sec-stats-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(0, 168, 204, 0.2) 0%, transparent 60%); pointer-events: none; } .sec-stats-band > .no-container-xl { position: relative; z-index: 1; } .sec-stats-band__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-xl); } @media (max-width: 1320px) { .sec-stats-band__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 544px) { .sec-stats-band__grid { grid-template-columns: repeat(2, 1fr); } } .sec-stats-band__item { text-align: left; border-left: 2px solid var(--clr-accent-500); padding-left: var(--spacing-md); } .sec-stats-band__value { color: var(--clr-base-white); } .sec-stats-band__label { color: rgba(255, 255, 255, 0.88); margin-top: var(--spacing-sm); } .sec-stats-band__sub { color: rgba(255, 255, 255, 0.55); margin-top: var(--spacing-xxs); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-tab-switch-content { background: var(--clr-bg-section); color: var(--clr-text-primary); } .sec-tab-switch-content__eyebrow { color: var(--clr-accent-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-tab-switch-content__panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3xl); align-items: center; } @media (max-width: 768px) { .sec-tab-switch-content__panel { grid-template-columns: 1fr; } } .sec-tab-switch-content__panel[hidden] { display: none; } .sec-tab-switch-content__copy { max-width: 56ch; } .sec-tab-switch-content__copy p { color: var(--clr-text-secondary); } .sec-tab-switch-content__media { aspect-ratio: 4/3; overflow: hidden; background: var(--clr-gray-100); } .sec-tab-switch-content__media img { width: 100%; height: 100%; object-fit: cover; } .sec-tab-content-underline { background: var(--clr-bg-section); color: var(--clr-text-primary); } .sec-tab-content-underline__tab-btn::before { content: "▶"; margin-right: 0.6em; display: inline-block; transform: scale(0.75); transform-origin: center; color: var(--clr-gray-400); transition: color 0.2s ease; } .sec-tab-content-underline__tab-btn.is-active::before { color: var(--clr-accent-500); } .sec-tab-content-underline__panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3xl); align-items: start; } @media (max-width: 768px) { .sec-tab-content-underline__panel { grid-template-columns: 1fr; } } .sec-tab-content-underline__panel[hidden] { display: none; } .sec-tab-content-underline__copy { max-width: 56ch; } .sec-tab-content-underline__copy p { color: var(--clr-text-secondary); } .sec-tab-content-underline__subitems { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-lg); } .sec-tab-content-underline__subitem { padding-top: var(--spacing-lg); border-top: 1px solid var(--clr-gray-200); } .sec-tab-content-underline__subitem strong { color: var(--clr-text-primary); } .sec-tab-content-underline__media { aspect-ratio: 4/3; overflow: hidden; background: var(--clr-gray-100); } .sec-tab-content-underline__media img { width: 100%; height: 100%; object-fit: cover; } .sec-about-intro { background: var(--clr-base-white); } .sec-about-intro__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); align-items: center; } @media (max-width: 768px) { .sec-about-intro__row { grid-template-columns: 1fr; gap: var(--spacing-xl); } } .sec-about-intro__eyebrow { color: var(--clr-primary-700); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-about-intro__title { color: var(--clr-text-primary); } .sec-about-intro__title::after { content: ""; display: block; width: 4.8rem; height: 2px; margin-top: var(--spacing-md); background: var(--clr-primary-900); } .sec-about-intro__body { display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-about-intro__body p { color: var(--clr-text-secondary); } .sec-about-intro__media { overflow: hidden; } .sec-about-intro__img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; } .sec-linked-cards { background: var(--clr-base-white); } .sec-linked-cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2xl); } @media (max-width: 768px) { .sec-linked-cards__grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } } .sec-linked-cards__card { display: flex; flex-direction: column; padding-top: var(--spacing-md); border-top: 2px solid var(--clr-primary-900); } .sec-linked-cards__media { overflow: hidden; } .sec-linked-cards__media .ui-placeholder, .sec-linked-cards__media .sec-linked-cards__img { transition: transform 0.4s ease; } .sec-linked-cards__img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; } .sec-linked-cards__card:hover .sec-linked-cards__media .ui-placeholder, .sec-linked-cards__card:hover .sec-linked-cards__img { transform: scale(1.03); } .sec-linked-cards__body { padding-top: var(--spacing-lg); } .sec-linked-cards__title { color: var(--clr-text-primary); } .sec-linked-cards__text { color: var(--clr-text-secondary); } .sec-values { background: var(--clr-bg-section); } .sec-values__header { text-align: center; max-width: 72ch; margin-inline: auto; } .sec-values__eyebrow { display: inline-flex; align-items: center; gap: var(--spacing-sm); color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-values__title { color: var(--clr-text-primary); } .sec-values__title::after { content: ""; display: block; width: 4.8rem; height: 3px; margin-top: var(--spacing-md); margin-inline: auto; background: linear-gradient(90deg, var(--clr-primary-900), var(--clr-accent-500)); border-radius: var(--radius-round); } .sec-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-2xl); align-items: stretch; } @media (max-width: 1024px) { .sec-values__grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } } .sec-values__card { background: var(--clr-base-white); border: 1px solid var(--clr-gray-200); border-top: 4px solid var(--clr-primary-900); border-radius: var(--radius-md); padding: var(--spacing-3xl) var(--spacing-2xl); display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); } .sec-values__card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -12px rgba(15, 76, 129, 0.14); } @media (max-width: 1024px) { .sec-values__card:hover { transform: none; box-shadow: none; } } .sec-values__card-num { display: block; color: var(--clr-primary-50); line-height: 1; letter-spacing: var(--tracking-display); pointer-events: none; user-select: none; } .sec-values__card-heading-wrap { border-top: 1px solid var(--clr-gray-200); padding-top: var(--spacing-lg); } .sec-values__group-heading { color: var(--clr-primary-900); } .sec-values__group-intro { color: var(--clr-text-secondary); } .sec-values__items-stack { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--clr-gray-200); } .sec-values__item { display: grid; grid-template-columns: 1.2rem 1fr; grid-template-rows: auto auto; grid-template-areas: "tick label" ". desc"; column-gap: var(--spacing-md); padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--clr-gray-100); } .sec-values__item:last-child { border-bottom: none; } .sec-values__item-tick { grid-area: tick; align-self: start; margin-top: 0.45em; width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--clr-accent-500); flex-shrink: 0; } .sec-values__label { grid-area: label; color: var(--clr-primary-900); font-weight: 600; } .sec-values__desc { grid-area: desc; color: var(--clr-text-secondary); } .sec-history-text { background: var(--clr-base-white); } .sec-history-text__eyebrow { color: var(--clr-primary-700); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-history-text__title { color: var(--clr-text-primary); } .sec-history-text__title::after { content: ""; display: block; width: 4.8rem; height: 2px; margin-top: var(--spacing-md); background: var(--clr-primary-900); } .sec-history-text__body { display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-history-text__body p { color: var(--clr-text-secondary); } .sec-news-latest-4up { background: var(--clr-base-white); } .sec-news-latest-4up__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--clr-gray-300); gap: var(--spacing-md); flex-wrap: wrap; } .sec-news-latest-4up__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-xl); } @media (max-width: 1320px) { .sec-news-latest-4up__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .sec-news-latest-4up__grid { grid-template-columns: 1fr; gap: var(--spacing-2xl); } } .sec-news-featured-carousel { background: var(--clr-base-white); } .sec-news-featured-carousel__sublinks { display: flex; gap: var(--spacing-lg); margin-top: var(--spacing-md); color: var(--clr-primary-700); flex-wrap: wrap; } .sec-news-featured-carousel__sublinks a { color: inherit; } .sec-news-featured-carousel__sublinks a:hover { color: var(--clr-accent-500); text-decoration: underline; } .sec-news-featured-carousel__split { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--spacing-2xl); } @media (max-width: 768px) { .sec-news-featured-carousel__split { grid-template-columns: 1fr; } } .sec-news-featured-carousel__featured { display: block; color: var(--clr-text-primary); } .sec-news-featured-carousel__featured-media { aspect-ratio: 16/10; overflow: hidden; background: var(--clr-gray-100); } .sec-news-featured-carousel__featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .sec-news-featured-carousel__featured:hover .sec-news-featured-carousel__featured-media img { transform: scale(1.04); } .sec-news-featured-carousel__featured:hover .sec-news-featured-carousel__featured-body h3 { color: var(--clr-primary-400); } .sec-news-featured-carousel__featured-body { padding-top: var(--spacing-md); } .sec-news-featured-carousel__featured-body p { color: var(--clr-text-secondary); } .sec-news-featured-carousel__featured-body h3 { transition: color 0.25s ease; } .sec-news-featured-carousel__meta { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-news-featured-carousel__side { display: flex; flex-direction: column; gap: var(--spacing-lg); } .sec-news-featured-carousel__side-item { display: grid; grid-template-columns: 12rem 1fr; gap: var(--spacing-md); align-items: start; color: var(--clr-text-primary); } .sec-news-featured-carousel__side-item h4 { transition: color 0.25s ease; } .sec-news-featured-carousel__side-item:hover h4 { color: var(--clr-primary-400); } .sec-news-featured-carousel__side-item:hover .sec-news-featured-carousel__side-media img { transform: scale(1.04); } .sec-news-featured-carousel__side-media { aspect-ratio: 1/1; overflow: hidden; background: var(--clr-gray-100); } .sec-news-featured-carousel__side-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .sec-news-list-paged { background: var(--clr-base-white); } .sec-news-list-paged__filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--clr-gray-200); } .sec-news-list-paged__filter-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sec-news-list-paged__search { flex: 1 1 24rem; min-width: 0; } .sec-news-list-paged__search-input { width: 100%; min-height: 4rem; padding: 0 var(--spacing-md); border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); background: var(--clr-base-white); color: var(--clr-text-primary); } .sec-news-list-paged__search-input::placeholder { color: var(--clr-text-tertiary); } .sec-news-list-paged__search-input:focus-visible { outline: none; border-color: var(--clr-accent-500); } .sec-news-list-paged__selects { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); } .sec-news-list-paged__select { min-height: 4rem; padding: 0 var(--spacing-xl) 0 var(--spacing-md); border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); background: var(--clr-base-white); color: var(--clr-text-primary); 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='%23667' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--spacing-sm) center; } .sec-news-list-paged__select:focus-visible { outline: none; border-color: var(--clr-accent-500); } .sec-news-list-paged__apply { min-height: 4rem; padding: 0 var(--spacing-lg); border: 1px solid var(--clr-primary-700); border-radius: var(--radius-sm); background: var(--clr-primary-700); color: var(--clr-base-white); cursor: pointer; transition: background-color var(--tran-3), border-color var(--tran-3); } .sec-news-list-paged__apply:hover, .sec-news-list-paged__apply:focus-visible { background: var(--clr-accent-500); border-color: var(--clr-accent-500); } .sec-news-list-paged__list { display: flex; flex-direction: column; } .sec-news-list-paged__item { display: grid; grid-template-columns: 48rem 1fr; gap: var(--spacing-2xl); align-items: start; padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); border-top: 1px solid var(--clr-gray-200); color: var(--clr-text-primary); } @media (max-width: 1320px) { .sec-news-list-paged__item { grid-template-columns: 38rem 1fr; gap: var(--spacing-xl); } } @media (max-width: 1024px) { .sec-news-list-paged__item { grid-template-columns: 30rem 1fr; } } @media (max-width: 544px) { .sec-news-list-paged__item { grid-template-columns: 1fr; } } .sec-news-list-paged__item:not(:has(.sec-news-list-paged__media)) { grid-template-columns: 1fr; } .sec-news-list-paged__media { aspect-ratio: 4/3; overflow: hidden; background: var(--clr-gray-100); } .sec-news-list-paged__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform var(--dur-base) var(--ease-out-quart); } .sec-news-list-paged__date { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-news-list-paged__body p { color: var(--clr-text-secondary); } .sec-news-list-paged__body h3 { transition: color var(--dur-base) var(--ease-out-quart); } .sec-news-list-paged__item:hover .sec-news-list-paged__media img { transform: scale(1.06); } .sec-news-list-paged__item:hover .sec-news-list-paged__body h3 { color: var(--clr-accent-500); } @media (prefers-reduced-motion: reduce) { .sec-news-list-paged__item:hover .sec-news-list-paged__media img { transform: scale(1); } } .sec-news-list-paged__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-md); } .sec-news-list-paged__tag { color: var(--clr-primary-700); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-news-list-paged__pagination { display: flex; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-2xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--clr-gray-200); } .sec-news-list-paged__page { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; padding: var(--spacing-xs) var(--spacing-sm); color: var(--clr-primary-700); } .sec-news-list-paged__page.is-active { color: var(--clr-text-primary); border-bottom: 2px solid var(--clr-primary-700); } .sec-news-list-paged__page:hover { color: var(--clr-accent-500); } .sec-news-list-paged__dots { color: var(--clr-text-tertiary); padding: 0 var(--spacing-xs); } .sec-board-preview__head { max-width: 760px; margin-bottom: var(--spacing-8); } .sec-board-preview__eyebrow, .sec-board-preview__meta, .sec-board-preview__date, .sec-board-preview__sub { color: var(--clr-primary-500); } .sec-board-preview__desc, .sec-board-preview__excerpt { color: var(--clr-gray-600); } .sec-board-preview__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-5); } .sec-board-preview__card { overflow: hidden; border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: var(--clr-white); } .sec-board-preview__card-link, .sec-board-preview__list-link, .sec-board-preview__logo-link { display: flex; color: inherit; text-decoration: none; } .sec-board-preview__card-link { height: 100%; flex-direction: column; } .sec-board-preview__media { display: block; aspect-ratio: 4/3; background: var(--clr-gray-100); } .sec-board-preview__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .sec-board-preview__logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--spacing-4); } .sec-board-preview__logo { min-width: 0; } .sec-board-preview__logo-link { min-height: 112px; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-2); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); padding: var(--spacing-4); background: var(--clr-white); text-align: center; } .sec-board-preview__logo-media { display: flex; width: 100%; height: 56px; align-items: center; justify-content: center; } .sec-board-preview__logo-media img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .sec-board-preview__logo-badge { color: var(--clr-primary-500); } .sec-board-preview__logo-title { color: var(--clr-gray-800); } .sec-board-preview__body { display: grid; gap: var(--spacing-2); padding: var(--spacing-5); } .sec-board-preview__list { display: grid; gap: var(--spacing-3); margin: 0; padding: 0; list-style: none; } .sec-board-preview__list-link { align-items: center; justify-content: space-between; gap: var(--spacing-5); border-bottom: 1px solid var(--clr-gray-200); padding: var(--spacing-4) 0; } .sec-board-preview__list-main { display: grid; gap: var(--spacing-1); } .sec-board-preview__faq { display: grid; gap: var(--spacing-3); } .sec-board-preview__faq-item { border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: var(--clr-white); } .sec-board-preview__faq-question { cursor: pointer; padding: var(--spacing-4) var(--spacing-5); } .sec-board-preview__faq-answer { padding: 0 var(--spacing-5) var(--spacing-5); color: var(--clr-gray-700); } .sec-board-preview__more { display: flex; justify-content: center; margin-top: var(--spacing-8); } .sec-events-board__toolbar { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); flex-wrap: wrap; } @media (max-width: 544px) { .sec-events-board__toolbar { flex-direction: column; align-items: stretch; } } .sec-events-board__search { flex: 1; min-width: clamp(20rem, 5.1779935275vw + 18.0582524272rem, 28rem); max-width: 36rem; } @media (max-width: 544px) { .sec-events-board__search { max-width: none; } } .sec-events-board__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .sec-events-grid { background: var(--clr-base-white); } .sec-events-grid__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } @media (max-width: 768px) { .sec-events-grid__list { grid-template-columns: 1fr; gap: var(--spacing-2xl); } } .sec-events-grid__item { display: grid; grid-template-columns: 9rem 1fr; gap: var(--spacing-lg); padding: var(--spacing-lg); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-sm); color: var(--clr-text-primary); background: var(--clr-base-white); } .sec-events-grid__item:hover h3 { color: var(--clr-primary-400); } .sec-events-grid__body h3 { transition: color 0.25s ease; } .sec-events-grid__date { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-sm); background: var(--clr-bg-section); border-radius: var(--radius-sm); color: var(--clr-primary-900); text-align: center; } .sec-events-grid__date-m { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-500); } .sec-events-grid__date-d { margin-top: var(--spacing-xs); } .sec-events-grid__date-w { color: var(--clr-text-secondary); margin-top: var(--spacing-xs); } .sec-events-grid__body { min-width: 0; } .sec-events-grid__body p { color: var(--clr-text-secondary); } .sec-events-grid__chip { display: inline-flex; align-items: center; padding: var(--spacing-xxs) var(--spacing-sm); border-radius: 999px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--clr-base-white); background: var(--clr-primary-900); } .sec-events-grid__chip--seminar { background: var(--clr-chip-seminar, var(--clr-primary-900)); } .sec-events-grid__chip--workshop { background: var(--clr-chip-workshop, var(--clr-primary-700)); } .sec-events-grid__chip--symposium { background: var(--clr-chip-symposium, var(--clr-primary-500)); color: var(--clr-primary-900); } .sec-events-grid__chip--education { background: var(--clr-chip-education, var(--clr-status-success)); } .sec-events-grid__chip--special { background: var(--clr-chip-special, var(--clr-status-error)); } .sec-events-grid__meta { display: flex; gap: var(--spacing-sm); color: var(--clr-text-secondary); flex-wrap: wrap; } .sec-events-calendar { background: var(--clr-base-white); } .sec-events-calendar__grid { display: grid; grid-template-columns: 2.2fr 1fr; gap: var(--spacing-2xl); } @media (max-width: 768px) { .sec-events-calendar__grid { grid-template-columns: 1fr; } } .sec-events-calendar__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); } .sec-events-calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; color: var(--clr-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-caps); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--clr-gray-200); } .sec-events-calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--clr-gray-200); border: 1px solid var(--clr-gray-200); } .sec-events-calendar__day { min-height: 8rem; padding: var(--spacing-xs); background: var(--clr-base-white); display: flex; flex-direction: column; gap: var(--spacing-xxs); } .sec-events-calendar__day--empty { background: var(--clr-gray-50); } .sec-events-calendar__day.is-today { background: var(--clr-primary-50); outline: 2px solid var(--clr-primary-700); outline-offset: -2px; } .sec-events-calendar__d { color: var(--clr-text-primary); } .sec-events-calendar__chip { display: block; padding: var(--spacing-xxs) var(--spacing-xs); background: var(--clr-primary-700); color: var(--clr-base-white); border-radius: var(--radius-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sec-events-calendar__side { padding: var(--spacing-lg); background: var(--clr-bg-section); border-radius: var(--radius-md); align-self: start; } .sec-events-calendar__today-item { padding: var(--spacing-md) 0; border-top: 1px solid var(--clr-gray-200); } .sec-events-calendar__today-item:first-child { border-top: 0; padding-top: 0; } .sec-events-calendar__today-item p { color: var(--clr-text-primary); } .sec-events-calendar__today-time { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); text-transform: uppercase; } /** * home.events-calendar-interactive — 좁은 캘린더(좌) + 동적 이벤트 피드(우). * 타이포 위계는 HTML .no-* 유틸로만(규칙 #17-A). 여기선 레이아웃·상태·색만. */ .sec-events-calendar-interactive { background: var(--clr-base-white); } .sec-events-calendar-interactive__grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-2xl); align-items: start; } @media (max-width: 768px) { .sec-events-calendar-interactive__grid { grid-template-columns: 1fr; } } .sec-events-calendar-interactive__aside { align-self: start; display: flex; flex-direction: column; gap: var(--spacing-2xl); } .sec-events-calendar-interactive__aside .ui-filter-sidebar { position: static; top: auto; width: 100%; min-width: 0; } .sec-events-calendar-interactive__cal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); background: var(--clr-primary-900); border-radius: var(--radius-sm); margin-bottom: var(--spacing-md); } .sec-events-calendar-interactive__selects { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); min-width: 0; } .sec-events-calendar-interactive__dd { position: relative; } .sec-events-calendar-interactive__dd-trigger { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-sm); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--clr-base-white); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .sec-events-calendar-interactive__dd-trigger:hover { background: rgba(255, 255, 255, 0.12); } .sec-events-calendar-interactive__dd-trigger:focus-visible { outline: 2px solid var(--clr-base-white); outline-offset: 2px; } .sec-events-calendar-interactive__dd-trigger[aria-expanded=true] { background: rgba(255, 255, 255, 0.16); } .sec-events-calendar-interactive__dd-caret { font-size: 0.65em; transition: transform 0.15s ease; } .sec-events-calendar-interactive__dd-trigger[aria-expanded=true] .sec-events-calendar-interactive__dd-caret { transform: rotate(180deg); } .sec-events-calendar-interactive__dd-menu { position: absolute; top: calc(100% + var(--spacing-xs)); left: 50%; transform: translateX(-50%); z-index: 20; min-width: 12rem; display: flex; flex-direction: column; gap: 2px; padding: var(--spacing-xs); background: var(--clr-base-white); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); } .sec-events-calendar-interactive__dd-menu[hidden] { display: none; } .sec-events-calendar-interactive__dd-menu--scroll { max-height: 22rem; overflow-y: auto; } .sec-events-calendar-interactive__dd-opt { padding: var(--spacing-xs) var(--spacing-md); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--clr-text-primary); text-align: center; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .sec-events-calendar-interactive__dd-opt:hover { background: var(--clr-primary-50); } .sec-events-calendar-interactive__dd-opt.is-selected { background: var(--clr-primary-900); color: var(--clr-base-white); } .sec-events-calendar-interactive__nav-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; padding: 0; margin: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radius-round); background: transparent; color: rgba(255, 255, 255, 0.6); font-size: 0.85em; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .sec-events-calendar-interactive__nav-btn:hover { background: rgba(255, 255, 255, 0.16); color: var(--clr-base-white); border-color: rgba(255, 255, 255, 0.4); } .sec-events-calendar-interactive__nav-btn:focus-visible { outline: 2px solid var(--clr-base-white); outline-offset: 2px; } .sec-events-calendar-interactive__subhead { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); } .sec-events-calendar-interactive__today-btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-md); border: 1px solid var(--clr-gray-300); border-radius: var(--radius-round); background: transparent; color: var(--clr-text-primary); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .sec-events-calendar-interactive__today-btn:hover { background: var(--clr-primary-50); border-color: var(--clr-primary-500); color: var(--clr-primary-700); } .sec-events-calendar-interactive__today-btn:focus-visible { outline: 2px solid var(--clr-primary-700); outline-offset: 2px; } .sec-events-calendar-interactive__count { color: var(--clr-text-tertiary); } .sec-events-calendar-interactive__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; color: var(--clr-text-secondary); text-transform: uppercase; padding-bottom: var(--spacing-sm); } .sec-events-calendar-interactive__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--spacing-xs); } .sec-events-calendar-interactive__days:focus-visible { outline: none; } .sec-events-calendar-interactive__cal.is-loading .sec-events-calendar-interactive__days { opacity: 0.5; pointer-events: none; } .sec-events-calendar-interactive__day { position: relative; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 1px solid transparent; border-radius: var(--radius-round); background: transparent; color: var(--clr-text-primary); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .sec-events-calendar-interactive__day--empty { cursor: default; pointer-events: none; } .sec-events-calendar-interactive__day:hover { background: var(--clr-primary-50); } .sec-events-calendar-interactive__day:focus-visible { outline: 2px solid var(--clr-primary-700); outline-offset: 2px; } .sec-events-calendar-interactive__day--today:not(.is-selected) { border-color: var(--clr-primary-500); font-weight: 700; color: var(--clr-primary-700); } .sec-events-calendar-interactive__day.is-selected { background: var(--clr-primary-900); border-color: var(--clr-primary-900); color: var(--clr-base-white); font-weight: 700; } .sec-events-calendar-interactive__day-dot { position: absolute; bottom: 0.4rem; left: 50%; transform: translateX(-50%); width: 0.5rem; height: 0.5rem; border-radius: var(--radius-round); background: var(--clr-accent-500); pointer-events: none; } .sec-events-calendar-interactive__day.is-selected .sec-events-calendar-interactive__day-dot { background: var(--clr-base-white); } .sec-events-calendar-interactive__day-count { position: absolute; top: 0.2rem; right: 0.2rem; min-width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.3rem; border-radius: var(--radius-round); background: var(--clr-accent-500); color: var(--clr-base-white); font-size: 0.62em; font-weight: 700; line-height: 1; pointer-events: none; } .sec-events-calendar-interactive__feed { min-width: 0; } .sec-events-calendar-interactive__panel { display: flex; flex-direction: column; gap: var(--spacing-lg); animation: sec-eci-fade 0.32s ease both; } .sec-events-calendar-interactive__panel[hidden] { display: none; } @keyframes sec-eci-fade { from { opacity: 0; transform: translateY(0.8rem); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .sec-events-calendar-interactive__panel { animation: none; } } .sec-publications-list { background: var(--clr-base-white); } .sec-publications-list__grid { display: grid; grid-template-columns: 24rem 1fr; gap: var(--spacing-2xl); } @media (max-width: 768px) { .sec-publications-list__grid { grid-template-columns: 1fr; } } .sec-publications-list__filter { align-self: start; padding: var(--spacing-lg); background: var(--clr-bg-section); border-radius: var(--radius-md); } .sec-publications-list__filter-list { display: flex; flex-direction: column; } .sec-publications-list__filter-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-xs); color: var(--clr-text-primary); } .sec-publications-list__filter-item:hover { background: var(--clr-base-white); color: var(--clr-accent-500); } .sec-publications-list__filter-item.is-active { background: var(--clr-primary-700); color: var(--clr-base-white); } .sec-publications-list__filter-count { color: var(--clr-text-tertiary); } .is-active .sec-publications-list__filter-count { color: rgba(255, 255, 255, 0.7); } .sec-publications-list__head { margin-bottom: var(--spacing-xl); } .sec-publications-list__items { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--spacing-2xl); row-gap: var(--spacing-md); } @media (max-width: 544px) { .sec-publications-list__items { grid-template-columns: 1fr; row-gap: var(--spacing-2xl); } } .sec-publications-list__item { padding: var(--spacing-md) 0; border-top: 1px solid var(--clr-gray-200); } .sec-publications-list__title { display: block; color: var(--clr-primary-700); } .sec-publications-list__title:hover { color: var(--clr-accent-500); text-decoration: underline; } .sec-publications-list__meta { color: var(--clr-text-secondary); } .sec-people-grid { background: var(--clr-base-white); } .sec-people-grid__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); } @media (max-width: 768px) { .sec-people-grid__list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .sec-people-grid__list { grid-template-columns: 1fr; } } .sec-directory-search { background: var(--clr-base-white); text-align: center; color: var(--clr-text-primary); } .sec-directory-search p { color: var(--clr-text-secondary); } .sec-directory-search__form { max-width: 56rem; margin: 0 auto; } .sec-directory-search__label { display: flex; align-items: center; gap: var(--spacing-sm); border-bottom: 2px solid var(--clr-primary-700); padding: var(--spacing-sm) var(--spacing-md); } .sec-directory-search__input { flex: 1; background: transparent; border: 0; color: var(--clr-text-primary); } .sec-directory-search__input::placeholder { color: var(--clr-text-tertiary); } .sec-directory-search__submit { color: var(--clr-primary-700); } .sec-directory-search__submit:hover { color: var(--clr-accent-500); } .sec-contact-form-band { background: var(--clr-base-white); color: var(--clr-text-primary); } .sec-contact-form-band__heading { text-align: center; } .sec-contact-form-band__form { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--spacing-xl); row-gap: var(--spacing-lg); } @media (max-width: 544px) { .sec-contact-form-band__form { grid-template-columns: 1fr; } } .sec-contact-form-band__field { display: flex; flex-direction: column; gap: var(--spacing-xs); } .sec-contact-form-band__field--full { grid-column: 1/-1; } .sec-contact-form-band__label { color: var(--clr-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-contact-form-band__input { padding: var(--spacing-sm) 0; border: 0; border-bottom: 1px solid var(--clr-gray-300); background: transparent; color: var(--clr-text-primary); } .sec-contact-form-band__input:focus { outline: 0; border-bottom-color: var(--clr-primary-700); } .sec-contact-form-band textarea.sec-contact-form-band__input { resize: vertical; min-height: 12rem; } .sec-contact-form-band__actions { grid-column: 1/-1; display: flex; justify-content: flex-start; padding-top: var(--spacing-md); } .sec-contact-form-band__note { color: var(--clr-text-tertiary); border-top: 1px solid var(--clr-gray-200); padding-top: var(--spacing-md); } .sec-contact-form-band__note a { color: var(--clr-primary-700); } .sec-contact-form-band__note a:hover { color: var(--clr-accent-500); } .sec-join-form-band { background: var(--clr-base-white); color: var(--clr-text-primary); } .sec-join-form-band__heading { text-align: left; } .sec-join-form-band__lead { color: var(--clr-text-secondary); max-width: 64ch; } .sec-join-form-band__form { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--spacing-xl); row-gap: var(--spacing-lg); } @media (max-width: 544px) { .sec-join-form-band__form { grid-template-columns: 1fr; } } .sec-join-form-band__field { display: flex; flex-direction: column; gap: var(--spacing-xs); } .sec-join-form-band__field--full { grid-column: 1/-1; } .sec-join-form-band__field--agree { flex-direction: row; align-items: flex-start; gap: var(--spacing-sm); } .sec-join-form-band__field--file { gap: var(--spacing-sm); } .sec-join-form-band__label { color: var(--clr-text-secondary); } .sec-join-form-band__required { color: var(--clr-primary-700); } .sec-join-form-band__input { padding: var(--spacing-sm) 0; border: 0; border-bottom: 1px solid var(--clr-gray-300); background: transparent; color: var(--clr-text-primary); } .sec-join-form-band__input:focus { outline: 0; border-bottom-color: var(--clr-primary-700); } .sec-join-form-band__file-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); } .sec-join-form-band__file-slot { display: flex; align-items: center; gap: var(--spacing-sm); } .sec-join-form-band__file-custom { flex: 1 1 auto; display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--clr-gray-300); } .sec-join-form-band__file-btn { flex: 0 0 auto; padding: var(--spacing-xs) var(--spacing-md); border: 1px solid var(--clr-gray-300); color: var(--clr-text-secondary); background: transparent; transition: border-color 0.15s ease, color 0.15s ease; } .sec-join-form-band__file-custom:hover .sec-join-form-band__file-btn { border-color: var(--clr-primary-700); color: var(--clr-primary-700); } .sec-join-form-band__file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .sec-join-form-band__file-name { color: var(--clr-text-secondary); flex: 1 1 auto; } .sec-join-form-band__file-hint { color: var(--clr-text-secondary); } .sec-join-form-band__file-remove { flex: 0 0 auto; background: transparent; border: 0; color: var(--clr-text-secondary); cursor: pointer; padding: var(--spacing-xs); display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s ease; } .sec-join-form-band__file-remove:hover { color: var(--clr-status-error, #dc2626); } .sec-join-form-band__file-add { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--spacing-xs); background: transparent; border: 1px dashed var(--clr-gray-300); color: var(--clr-text-secondary); cursor: pointer; padding: var(--spacing-xs) var(--spacing-md); transition: border-color 0.15s ease, color 0.15s ease; } .sec-join-form-band__file-add:hover:not(:disabled) { border-color: var(--clr-primary-700); color: var(--clr-primary-700); } .sec-join-form-band__file-add:disabled { opacity: 0.4; cursor: default; } .sec-join-form-band__actions { grid-column: 1/-1; display: flex; justify-content: flex-start; padding-top: var(--spacing-md); } .sec-join-form-band__submit { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-xl); border: 0; background: var(--clr-primary-700); color: var(--clr-base-white); cursor: pointer; transition: background-color 0.15s ease; } .sec-join-form-band__submit:hover { background: var(--clr-accent-500, var(--clr-primary-700)); } .sec-join-form-band__submit[disabled] { opacity: 0.6; cursor: progress; } .sec-join-form-band__submit-loader { display: none; } .sec-locations-map { background: var(--clr-base-white); } .sec-locations-map__grid { display: grid; grid-template-columns: 30rem 1fr; gap: var(--spacing-xl); } @media (max-width: 768px) { .sec-locations-map__grid { grid-template-columns: 1fr; } } .sec-locations-map__list { display: flex; flex-direction: column; } .sec-locations-map__item { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--spacing-md); padding: var(--spacing-md); border-top: 1px solid var(--clr-gray-200); color: var(--clr-text-primary); } .sec-locations-map__item:first-child { border-top: 0; } .sec-locations-map__item:hover { background: var(--clr-primary-50); } .sec-locations-map__pin { color: var(--clr-primary-700); margin-top: 0.4rem; } .sec-locations-map__sub { color: var(--clr-text-secondary); } .sec-locations-map__map { aspect-ratio: 16/11; background: var(--clr-gray-100); } .sec-locations-map__map iframe { width: 100%; height: 100%; border: 0; display: block; } .sec-newsletter-band { background: var(--clr-bg-section); padding-top: var(--section-md); padding-bottom: var(--section-md); color: var(--clr-text-primary); } .sec-newsletter-band__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--spacing-2xl); } @media (max-width: 768px) { .sec-newsletter-band__grid { grid-template-columns: 1fr; } } .sec-newsletter-band__addr { color: var(--clr-text-secondary); } .sec-newsletter-band__socials { display: flex; gap: var(--spacing-md); color: var(--clr-text-primary); } .sec-newsletter-band__socials a { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; color: inherit; } .sec-newsletter-band__socials a:hover { color: var(--clr-accent-500); } .sec-newsletter-band__form { display: flex; flex-direction: column; gap: var(--spacing-sm); max-width: 48rem; } .sec-newsletter-band__label { color: var(--clr-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-newsletter-band__row { display: flex; gap: var(--spacing-sm); align-items: stretch; } .sec-newsletter-band__input { flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--clr-gray-300); background: var(--clr-base-white); color: var(--clr-text-primary); } .sec-newsletter-band__input:focus { outline: 0; border-color: var(--clr-primary-700); } .sec-newsletter-band__did p { color: var(--clr-text-secondary); } .sec-newsletter-band__did p:first-child { color: var(--clr-text-primary); } .sec-cta-callout-navy { background: var(--clr-primary-900); color: var(--clr-base-white); position: relative; overflow: hidden; } .sec-cta-callout-navy::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 30%, rgba(0, 168, 204, 0.25) 0%, transparent 50%), radial-gradient(circle at 10% 90%, rgba(63, 160, 208, 0.18) 0%, transparent 55%); pointer-events: none; } .sec-cta-callout-navy__inner { position: relative; z-index: 1; padding-top: var(--section-lg); padding-bottom: var(--section-lg); text-align: center; max-width: 102.4rem; } .sec-cta-callout-navy__eyebrow { color: var(--clr-accent-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-cta-callout-navy__headline { color: var(--clr-base-white); } .sec-cta-callout-navy__body { color: rgba(255, 255, 255, 0.82); } .sec-cta-callout-navy__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-xl); } .sec-article-body { background: var(--clr-base-white); } .sec-article-body__grid { display: grid; grid-template-columns: 1fr 28rem; gap: var(--spacing-3xl); } @media (max-width: 768px) { .sec-article-body__grid { grid-template-columns: 1fr; } } .sec-article-body__main { color: var(--clr-text-primary); max-width: 72ch; } .sec-article-body__main p { color: var(--clr-text-secondary); } .sec-article-aside { align-self: start; position: sticky; top: 8rem; padding: var(--spacing-lg); background: var(--clr-bg-section); border-radius: var(--radius-md); } .sec-article-aside--image { padding: 0; background: transparent; border-radius: 0; } .sec-article-aside__title { padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--clr-gray-300); } .sec-article-aside__list { display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-article-aside__link { color: var(--clr-primary-700); } .sec-article-aside__link:hover { color: var(--clr-accent-500); text-decoration: underline; } .sec-article-aside__figure { margin: 0; } .sec-article-aside__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); display: block; } .sec-article-aside__caption { display: block; color: var(--clr-text-tertiary); } .sec-article-header-meta { background: var(--clr-base-white); color: var(--clr-text-primary); } .sec-article-header-meta__meta { display: flex; gap: var(--spacing-sm); color: var(--clr-accent-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-article-header-meta__category { color: var(--clr-accent-500); } .sec-article-header-meta__date { color: var(--clr-text-secondary); } .sec-article-header-meta__excerpt { color: var(--clr-text-secondary); } .sec-article-header-meta__author { color: var(--clr-text-tertiary); } .sec-article-header-split { background: var(--clr-base-white); } .sec-article-header-split__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--spacing-3xl); align-items: start; } @media (max-width: 768px) { .sec-article-header-split__grid { grid-template-columns: 1fr; } } .sec-article-header-split__grid--no-media { grid-template-columns: 1fr; } .sec-article-header-split__main { min-width: 0; } .sec-article-header-split__excerpt { color: var(--clr-text-secondary); } .sec-article-header-split__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); color: var(--clr-text-secondary); } .sec-article-header-split__category { color: var(--clr-accent-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-article-header-split__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-md); } @media (max-width: 768px) { .sec-article-header-split__aside { align-items: flex-start; } } .sec-article-header-split__share { align-self: flex-end; } @media (max-width: 768px) { .sec-article-header-split__share { align-self: flex-start; } } .sec-article-header-split__media { width: 100%; margin: 0; aspect-ratio: 4/3; overflow: hidden; background: var(--clr-gray-100); } .sec-article-header-split__media img { width: 100%; height: 100%; object-fit: cover; } .sec-video-embed { background: var(--clr-base-white); } .sec-video-embed__frame { aspect-ratio: 16/9; background: var(--clr-gray-900); overflow: hidden; border-radius: var(--radius-md); } .sec-video-embed__frame iframe { width: 100%; height: 100%; border: 0; display: block; } .sec-video-embed__caption { color: var(--clr-text-secondary); text-align: center; } .sec-related-prev-next { background: var(--clr-base-white); } .sec-related-prev-next__head { padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--clr-gray-300); } .sec-related-prev-next__card { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--spacing-2xl); align-items: stretch; color: var(--clr-text-primary); } @media (max-width: 768px) { .sec-related-prev-next__card { grid-template-columns: 1fr; } } .sec-related-prev-next__card h3 { transition: color 0.25s ease; } .sec-related-prev-next__card h3 a { color: var(--clr-text-base); text-decoration: none; font-size: inherit !important; font-weight: inherit; line-height: inherit; } .sec-related-prev-next__media-link { display: block; height: 100%; } .sec-related-prev-next__media { height: 100%; overflow: hidden; background: var(--clr-gray-100); position: relative; overflow: hidden; height: 0; padding-bottom: 62.5%; } .sec-related-prev-next__media img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; } .sec-related-prev-next__media img { transition: transform 0.25s ease; } .sec-related-prev-next__card:hover .sec-related-prev-next__media img { transform: translate(-50%, -50%) scale(1.04); } .sec-related-prev-next__card:hover h3, .sec-related-prev-next__card:hover h3 a { color: var(--clr-primary-400); } .sec-related-prev-next__meta { color: var(--clr-accent-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-related-prev-next__foot { display: flex; justify-content: space-between; align-items: center; } .sec-related-prev-next__pagination { display: flex; align-items: center; gap: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem); } .sec-related-prev-next__pagination .swiper-pagination-bullet { width: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem); height: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem); border-radius: 50%; background: var(--clr-gray-300); opacity: 1; cursor: pointer; transition: background 0.2s ease; } .sec-related-prev-next__pagination .swiper-pagination-bullet-active { background: var(--clr-primary-700); } .sec-related-prev-next__nav { display: flex; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } .sec-related-prev-next__nav-btn { width: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); height: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); border-radius: 50%; border: 1px solid var(--clr-gray-300); background: transparent; color: var(--clr-gray-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .sec-related-prev-next__nav-btn:hover { border-color: var(--clr-primary-700); color: var(--clr-primary-700); } .sec-related-prev-next__nav-btn:focus-visible { outline: 2px solid var(--clr-primary-700); outline-offset: 2px; } .sec-related-prev-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xl); list-style: none; margin: 0; padding: 0; } @media (max-width: 768px) { .sec-related-prev-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 544px) { .sec-related-prev-next__grid { grid-template-columns: 1fr; } } .sec-related-prev-next__card--grid { display: flex; flex-direction: column; gap: var(--spacing-md); align-items: stretch; cursor: pointer; text-decoration: none; color: inherit; } .sec-related-prev-next__card--grid h3 { transition: color 0.25s ease; } .sec-related-prev-next__card--grid .sec-related-prev-next__media { aspect-ratio: 16/10; } .sec-related-posts-carousel { background: var(--clr-base-white); } .sec-related-posts-carousel__head { padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--clr-gray-300); } .sec-related-posts-carousel__foot { display: flex; justify-content: space-between; align-items: center; } .sec-related-posts-carousel__pagination { display: flex; align-items: center; gap: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem); } .sec-related-posts-carousel__pagination .swiper-pagination-bullet { width: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem); height: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem); border-radius: 50%; background: var(--clr-gray-300); opacity: 1; cursor: pointer; transition: background 0.2s ease; } .sec-related-posts-carousel__pagination .swiper-pagination-bullet-active { background: var(--clr-primary-700); } .sec-related-posts-carousel__nav { display: flex; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } .sec-related-posts-carousel__nav-btn { width: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); height: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); border-radius: 50%; border: 1px solid var(--clr-gray-300); background: transparent; color: var(--clr-gray-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .sec-related-posts-carousel__nav-btn:hover { border-color: var(--clr-primary-700); color: var(--clr-primary-700); } .sec-related-posts-carousel__nav-btn:focus-visible { outline: 2px solid var(--clr-primary-700); outline-offset: 2px; } .sec-related-posts-carousel__nav-btn.swiper-button-disabled { opacity: 0.35; cursor: not-allowed; } .ui-related-carousel__list { list-style: none; margin: 0; padding: 0; } .ui-related-carousel__item { width: 100%; height: auto; box-sizing: border-box; } .ui-related-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--spacing-2xl); align-items: stretch; color: var(--clr-text-primary); } @media (max-width: 768px) { .ui-related-feature { grid-template-columns: 1fr; } } .ui-related-feature__media-link { display: block; height: 100%; } .ui-related-feature__media { height: 100%; overflow: hidden; background: var(--clr-gray-100); } .ui-related-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .ui-related-feature:hover .ui-related-feature__media img { transform: scale(1.04); } .ui-related-feature:hover h3 a { color: var(--clr-primary-400); } .ui-related-feature__body h3 { transition: color 0.25s ease; } .ui-related-feature__body h3 a { color: var(--clr-text-base); text-decoration: none; font-size: inherit !important; font-weight: inherit; line-height: inherit; } .ui-related-feature__meta { color: var(--clr-accent-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-sticky-sidenav-layout { background: var(--clr-base-white); } .sec-sticky-sidenav-layout__grid { display: grid; grid-template-columns: 22rem 1fr; gap: var(--spacing-3xl); } @media (max-width: 768px) { .sec-sticky-sidenav-layout__grid { grid-template-columns: 1fr; } } .sec-sticky-sidenav-layout__aside { position: sticky; top: 8rem; align-self: start; } .sec-sticky-sidenav-layout__aside-title { color: var(--clr-text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-sticky-sidenav-layout__nav { display: flex; flex-direction: column; border-top: 1px solid var(--clr-gray-200); } .sec-sticky-sidenav-layout__nav li { border-bottom: 1px solid var(--clr-gray-200); } .sec-sticky-sidenav-layout__link { display: block; padding: var(--spacing-sm) 0; color: var(--clr-primary-700); } .sec-sticky-sidenav-layout__link:hover { color: var(--clr-accent-500); } .sec-sticky-sidenav-layout__link.is-active { color: var(--clr-text-primary); border-left: 2px solid var(--clr-primary-700); padding-left: var(--spacing-sm); } .sec-sticky-sidenav-layout__main { color: var(--clr-text-primary); max-width: 72ch; } .sec-sticky-sidenav-layout__main p { color: var(--clr-text-secondary); } .sec-long-text-2col { background: var(--clr-base-white); color: var(--clr-text-primary); } .sec-long-text-2col__grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--spacing-3xl); row-gap: var(--spacing-2xl); } @media (max-width: 768px) { .sec-long-text-2col__grid { grid-template-columns: 1fr; } } .sec-long-text-2col__grid p { color: var(--clr-text-secondary); } .sec-legal-toc { background: var(--clr-base-white); } .sec-legal-toc__grid { display: grid; grid-template-columns: 1fr 24rem; gap: var(--spacing-3xl); align-items: start; } @media (max-width: 768px) { .sec-legal-toc__grid { grid-template-columns: 1fr; } } .sec-legal-toc__main { max-width: 72ch; } .sec-legal-toc__section { display: flex; flex-direction: column; gap: var(--spacing-md); padding-top: var(--spacing-2xl); border-top: 1px solid var(--clr-gray-200); } .sec-legal-toc__section:first-child { padding-top: 0; border-top: none; } .sec-legal-toc__section p { color: var(--clr-text-secondary); } .sec-legal-toc__section-title { color: var(--clr-text-primary); } .sec-legal-toc__aside { position: sticky; top: 8rem; align-self: start; padding: var(--spacing-lg); background: var(--clr-bg-section); border-radius: var(--radius-md); } @media (max-width: 768px) { .sec-legal-toc__aside { display: none; } } .sec-legal-toc__toc-label { color: var(--clr-text-tertiary); text-transform: uppercase; margin-bottom: var(--spacing-md); } .sec-legal-toc__toc-list { display: flex; flex-direction: column; border-top: 1px solid var(--clr-gray-200); } .sec-legal-toc__toc-list li { border-bottom: 1px solid var(--clr-gray-200); } .sec-legal-toc__toc-link { display: block; padding: var(--spacing-sm) 0; color: var(--clr-primary-700); } .sec-legal-toc__toc-link:hover { color: var(--clr-accent-500); } /** * sec-research-framework — Infinity-Sigma 다이어그램 (layout/background). * 타이포·spacing 은 마크업 .no-* 유틸로만. */ .sec-research-framework { position: relative; padding-block: var(--section-lg); background: radial-gradient(circle at 50% 30%, rgba(0, 168, 204, 0.06), transparent 70%), var(--clr-base-white); } .sec-research-framework__head { text-align: center; max-width: 76rem; margin: 0 auto var(--section-md); display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-research-framework__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-700); } .sec-research-framework__title { color: var(--clr-text-base); margin: 0; } .sec-research-framework__lead { color: var(--clr-text-sub); margin: 0; } .sec-research-framework__board { display: grid; grid-template-columns: 1fr; gap: var(--spacing-2xl); align-items: center; } @media (min-width: 1024px) { .sec-research-framework__board { grid-template-columns: minmax(0, 1fr) 30rem; } } .sec-research-framework__diagram { width: 100%; height: auto; max-height: 56rem; display: block; } .sec-research-framework__node { cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; transform-box: fill-box; } .sec-research-framework__node:hover { transform: scale(1.08); } .sec-research-framework__node-code { font-size: 11px; font-weight: 700; fill: var(--clr-text-base); } .sec-research-framework__node-label { font-size: 8px; font-weight: 500; fill: var(--clr-text-sub); } .sec-research-framework__platforms-text { font-size: 11px; font-weight: 600; fill: var(--clr-base-white); letter-spacing: var(--tracking-caps); } .sec-research-framework__legend { list-style: none; padding: var(--spacing-xl); margin: 0; background: var(--clr-bg-section); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-research-framework__legend-item { display: flex; align-items: flex-start; gap: var(--spacing-md); color: var(--clr-text-sub); } .sec-research-framework__legend-dot { flex-shrink: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%; margin-top: 0.4em; } .sec-research-framework__legend-dot--tg { background: var(--clr-primary-700); } .sec-research-framework__legend-dot--cp { background: var(--clr-accent-500); } .sec-research-framework__legend-dot--platform { background: var(--clr-primary-900); } .sec-research-framework { /* Hovered-node dim others (driven by JS or pure :has() in modern browsers) */ } .sec-research-framework__tg-group:hover .sec-research-framework__node--tg:not(:hover), .sec-research-framework__cp-group:hover .sec-research-framework__node--cp:not(:hover) { opacity: 0.35; } /** * sec-tg-spotlight — TG1~5 Swiper carousel (layout only). */ .sec-tg-spotlight { padding-block: var(--section-lg); background: var(--clr-bg-page); } .sec-tg-spotlight__head { text-align: left; max-width: 76rem; margin: 0 0 var(--section-md); display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-tg-spotlight__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-700); } .sec-tg-spotlight__title { color: var(--clr-text-base); margin: 0; } .sec-tg-spotlight__lead { color: var(--clr-text-sub); margin: 0; max-width: 64ch; } .sec-tg-spotlight__stage { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--clr-bg-section); } .sec-tg-spotlight__slide { display: grid; grid-template-columns: 1fr; align-items: stretch; min-height: 48rem; } @media (min-width: 1024px) { .sec-tg-spotlight__slide { grid-template-columns: 1.1fr 1fr; } } .sec-tg-spotlight__media { margin: 0; overflow: hidden; background: var(--clr-gray-200); min-height: 28rem; } .sec-tg-spotlight__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .sec-tg-spotlight__body { padding: var(--section-md) var(--section-sm); display: flex; flex-direction: column; gap: var(--spacing-md); background: var(--clr-base-white); } .sec-tg-spotlight__code { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--clr-primary-700); color: var(--clr-primary-700); border-radius: var(--radius-round); text-transform: uppercase; letter-spacing: var(--tracking-caps); width: max-content; } .sec-tg-spotlight__name { color: var(--clr-text-base); margin: 0; } .sec-tg-spotlight__leader { color: var(--clr-text-aux); margin: 0; } .sec-tg-spotlight__tagline { color: var(--clr-text-sub); margin: var(--spacing-sm) 0 var(--spacing-md); } .sec-tg-spotlight__papers { list-style: none; margin: 0; padding: var(--spacing-lg) 0 0; border-top: 1px solid var(--clr-ui-border); display: flex; flex-direction: column; gap: var(--spacing-sm); } .sec-tg-spotlight__paper { display: flex; flex-direction: column; gap: 0.2rem; } .sec-tg-spotlight__paper-title { color: var(--clr-text-base); } .sec-tg-spotlight__paper-venue { color: var(--clr-text-aux); } .sec-tg-spotlight__controls { position: absolute; bottom: var(--spacing-lg); right: var(--spacing-lg); display: flex; align-items: center; gap: var(--spacing-md); background: var(--clr-base-white); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-round); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); z-index: 2; } .sec-tg-spotlight__nav-btn { width: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); height: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); border-radius: 50%; border: 1px solid var(--clr-gray-300); background: transparent; color: var(--clr-gray-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .sec-tg-spotlight__nav-btn:hover { border-color: var(--clr-primary-700); color: var(--clr-primary-700); } .sec-tg-spotlight__nav-btn:focus-visible { outline: 2px solid var(--clr-primary-700); outline-offset: 2px; } .sec-tg-spotlight__nav-btn.swiper-button-disabled { opacity: 0.35; cursor: not-allowed; } .sec-tg-spotlight__pagination { min-width: 5rem; text-align: center; color: var(--clr-text-sub); font-variant-numeric: tabular-nums; } /** * sec-cp-roadmap — Phase I 가로 connector line + 4 노드 (layout only). */ .sec-cp-roadmap { padding-block: var(--section-lg); background: var(--clr-bg-section); } .sec-cp-roadmap__head { text-align: left; max-width: 76rem; margin: 0 0 var(--section-md); display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-cp-roadmap__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-700); } .sec-cp-roadmap__title { color: var(--clr-text-base); margin: 0; } .sec-cp-roadmap__lead { color: var(--clr-text-sub); margin: 0; max-width: 64ch; } .sec-cp-roadmap__track { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); padding-top: var(--spacing-xl); } @media (min-width: 1024px) { .sec-cp-roadmap__track { grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); padding-top: var(--section-sm); } } .sec-cp-roadmap__connector { display: none; position: absolute; top: 7rem; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--clr-primary-700), var(--clr-accent-500)); transform-origin: left center; transform: scaleX(var(--cp-progress, 1)); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); z-index: 0; } @media (min-width: 1024px) { .sec-cp-roadmap__connector { display: block; } } .sec-cp-roadmap__node { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); padding: var(--spacing-xl) var(--spacing-lg); background: var(--clr-base-white); border-radius: var(--radius-md); border-top: 3px solid var(--clr-ui-border); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; z-index: 1; } .sec-cp-roadmap__node:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15, 76, 129, 0.12); } .sec-cp-roadmap__node--active { border-top-color: var(--clr-accent-500); } .sec-cp-roadmap__node--upcoming { border-top-color: var(--clr-primary-500); } .sec-cp-roadmap__node--completed { border-top-color: var(--clr-gray-400); } .sec-cp-roadmap__year { color: var(--clr-text-aux); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-cp-roadmap__dot { position: absolute; top: -0.6rem; left: var(--spacing-lg); width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--clr-base-white); border: 3px solid var(--clr-primary-700); box-shadow: 0 0 0 4px var(--clr-base-white); } .sec-cp-roadmap__code { color: var(--clr-primary-700); font-weight: 700; letter-spacing: var(--tracking-caps); } .sec-cp-roadmap__name { color: var(--clr-text-base); margin: var(--spacing-xs) 0; } .sec-cp-roadmap__desc { color: var(--clr-text-sub); margin: 0; } .sec-cp-roadmap__status { margin-top: var(--spacing-md); padding: 0.4rem 0.8rem; background: var(--clr-bg-section); color: var(--clr-text-aux); border-radius: var(--radius-sm); letter-spacing: var(--tracking-caps); width: max-content; } .sec-cp-roadmap__node--active .sec-cp-roadmap__status { background: var(--clr-accent-500); color: var(--clr-base-white); } .sec-cp-roadmap__node--upcoming .sec-cp-roadmap__status { background: var(--clr-primary-50); color: var(--clr-primary-900); } /** * sec-scale-zoom — 5단 stair + pinned panel (layout only). * GSAP ScrollTrigger 가 .is-active 토글 + pin 처리. */ .sec-scale-zoom { padding-block: var(--section-lg); background: var(--clr-primary-900); color: var(--clr-base-white); } .sec-scale-zoom__head { max-width: 76rem; margin: 0 0 var(--section-md); display: flex; flex-direction: column; gap: var(--spacing-md); color: var(--clr-base-white); } .sec-scale-zoom__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-500); } .sec-scale-zoom__title { color: var(--clr-base-white); margin: 0; } .sec-scale-zoom__lead { color: rgba(255, 255, 255, 0.78); margin: 0; max-width: 64ch; } .sec-scale-zoom__pin { display: grid; grid-template-columns: 1fr; gap: var(--spacing-2xl); } @media (min-width: 1024px) { .sec-scale-zoom__pin { grid-template-columns: 28rem 1fr; align-items: start; } } .sec-scale-zoom__stairs { display: flex; flex-direction: column; gap: var(--spacing-sm); } .sec-scale-zoom__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: var(--spacing-md) var(--spacing-lg); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid transparent; border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.7); cursor: pointer; text-align: left; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; padding-left: calc(var(--spacing-lg) + var(--step-order, 1) * 1.6rem); } .sec-scale-zoom__step:hover { background: rgba(255, 255, 255, 0.08); color: var(--clr-base-white); } .sec-scale-zoom__step.is-active { background: var(--clr-base-white); color: var(--clr-text-base); border-color: var(--clr-accent-500); transform: translateX(0.6rem); } .sec-scale-zoom__step-scale { letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: 0.7; } .sec-scale-zoom__step-label { font-weight: 600; } .sec-scale-zoom__panel { position: relative; min-height: 36rem; background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-md); padding: var(--section-md) var(--section-sm); overflow: hidden; } .sec-scale-zoom__pane { position: absolute; inset: 0; padding: var(--section-md) var(--section-sm); display: flex; flex-direction: column; gap: var(--spacing-md); opacity: 0; transform: translateY(2rem); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .sec-scale-zoom__pane.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .sec-scale-zoom__symbol { font-size: 6.4rem; line-height: 1; color: var(--clr-accent-500); font-family: ui-monospace, monospace; } .sec-scale-zoom__pane-scale { color: rgba(255, 255, 255, 0.6); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: 0; } .sec-scale-zoom__pane-label { color: var(--clr-base-white); margin: 0; } .sec-scale-zoom__pane-desc { color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 64ch; } /** * sec-research-themes — 12 토픽 masonry (CSS columns 기반, layout only). */ .sec-research-themes { padding-block: var(--section-lg); background: var(--clr-base-white); } .sec-research-themes__head { max-width: 76rem; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-research-themes__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-700); } .sec-research-themes__title { color: var(--clr-text-base); margin: 0; } .sec-research-themes__lead { color: var(--clr-text-sub); margin: 0; max-width: 64ch; } .sec-research-themes__mosaic { column-count: 1; column-gap: var(--spacing-lg); } @media (min-width: 768px) { .sec-research-themes__mosaic { column-count: 2; } } @media (min-width: 1320px) { .sec-research-themes__mosaic { column-count: 3; } } .sec-research-themes__card { position: relative; break-inside: avoid; margin-bottom: var(--spacing-lg); overflow: hidden; border-radius: var(--radius-md); isolation: isolate; cursor: pointer; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; } .sec-research-themes__card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15, 76, 129, 0.18); } .sec-research-themes__card { /* aspect modifiers control intrinsic ratio of the image */ } .sec-research-themes__card--tall .sec-research-themes__media { aspect-ratio: 3/4; } .sec-research-themes__card--square .sec-research-themes__media { aspect-ratio: 1/1; } .sec-research-themes__card--wide .sec-research-themes__media { aspect-ratio: 4/3; } .sec-research-themes__media { margin: 0; background: var(--clr-gray-200); overflow: hidden; } .sec-research-themes__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .sec-research-themes__card:hover .sec-research-themes__media img { transform: scale(1.06); } .sec-research-themes__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--spacing-lg); color: var(--clr-base-white); background: linear-gradient(to top, rgba(15, 76, 129, 0.85) 0%, rgba(15, 76, 129, 0) 60%); } .sec-research-themes__overlay::before { content: ""; position: absolute; top: var(--spacing-md); left: var(--spacing-lg); width: 0; height: 2px; background: var(--clr-accent-500); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .sec-research-themes__card:hover .sec-research-themes__overlay::before { width: 4rem; } .sec-research-themes__name { color: var(--clr-base-white); margin: 0 0 var(--spacing-xs); } .sec-research-themes__desc { color: rgba(255, 255, 255, 0.85); margin: 0; } /** * sec-oa-sdl — OA-SDL showcase (layout only). */ .sec-oa-sdl { padding-block: var(--section-lg); background: var(--clr-primary-900); color: var(--clr-base-white); } .sec-oa-sdl__grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-2xl); align-items: stretch; } @media (min-width: 1024px) { .sec-oa-sdl__grid { grid-template-columns: 1.4fr 1fr; } } .sec-oa-sdl__media { position: relative; margin: 0; aspect-ratio: 16/10; background: var(--clr-gray-800); border-radius: var(--radius-md); overflow: hidden; isolation: isolate; } .sec-oa-sdl__video { width: 100%; height: 100%; object-fit: cover; display: block; } .sec-oa-sdl__live-pill { position: absolute; top: var(--spacing-md); left: var(--spacing-md); display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 1rem; background: rgba(0, 0, 0, 0.7); color: var(--clr-base-white); border-radius: var(--radius-round); backdrop-filter: blur(8px); letter-spacing: var(--tracking-caps); font-weight: 700; } .sec-oa-sdl__live-dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #ff5252; animation: sec-oa-sdl-pulse 1.6s ease-in-out infinite; } .sec-oa-sdl__caption { position: absolute; bottom: var(--spacing-md); left: var(--spacing-md); color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.55); padding: 0.4rem 1rem; border-radius: var(--radius-sm); backdrop-filter: blur(6px); font-variant-numeric: tabular-nums; } .sec-oa-sdl__info { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-xl) 0; } .sec-oa-sdl__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-500); } .sec-oa-sdl__title { color: var(--clr-base-white); margin: 0; } .sec-oa-sdl__tagline { color: rgba(255, 255, 255, 0.82); margin: 0; } .sec-oa-sdl__stats { list-style: none; padding: var(--spacing-lg) 0; margin: var(--spacing-md) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); border-top: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .sec-oa-sdl__stat { display: flex; flex-direction: column; gap: 0.2rem; } .sec-oa-sdl__stat-value { color: var(--clr-accent-500); font-variant-numeric: tabular-nums; } .sec-oa-sdl__stat-label { color: rgba(255, 255, 255, 0.65); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-oa-sdl__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } .sec-oa-sdl__feature { display: flex; align-items: flex-start; gap: var(--spacing-sm); color: rgba(255, 255, 255, 0.85); } .sec-oa-sdl__bullet { flex-shrink: 0; width: 0.6rem; height: 0.6rem; margin-top: 0.8em; background: var(--clr-accent-500); border-radius: 50%; } .sec-oa-sdl__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-md); } @keyframes sec-oa-sdl-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /** * sec-equipment-carousel — Swiper coverflow (layout only). */ .sec-equipment-carousel { padding-block: var(--section-lg); background: var(--clr-bg-section); } .sec-equipment-carousel__head { max-width: 76rem; margin: 0 0 var(--section-md); display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-equipment-carousel__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-700); } .sec-equipment-carousel__title { color: var(--clr-text-base); margin: 0; } .sec-equipment-carousel__lead { color: var(--clr-text-sub); margin: 0; max-width: 64ch; } .sec-equipment-carousel__stage { overflow: visible; padding-block: var(--spacing-2xl); } .sec-equipment-carousel__card { width: 30rem; background: var(--clr-base-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 12px 32px rgba(15, 76, 129, 0.12); transition: transform 0.4s ease, box-shadow 0.4s ease; } .sec-equipment-carousel__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 76, 129, 0.2); } .sec-equipment-carousel__media { margin: 0; aspect-ratio: 4/3; background: var(--clr-gray-200); overflow: hidden; } .sec-equipment-carousel__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .sec-equipment-carousel__body { padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-xs); } .sec-equipment-carousel__tag { color: var(--clr-accent-700); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-equipment-carousel__name { color: var(--clr-text-base); margin: 0; } .sec-equipment-carousel__model { color: var(--clr-text-sub); margin: 0; } /** * sec-floor-plan — SVG 평면도 + 사이드 details (layout only). */ .sec-floor-plan { padding-block: var(--section-lg); background: var(--clr-base-white); } .sec-floor-plan__head { max-width: 76rem; margin: 0 0 var(--section-md); display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-floor-plan__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-700); } .sec-floor-plan__title { color: var(--clr-text-base); margin: 0; } .sec-floor-plan__lead { color: var(--clr-text-sub); margin: 0; max-width: 64ch; } .sec-floor-plan__board { display: grid; grid-template-columns: 1fr; gap: var(--spacing-2xl); } @media (min-width: 1024px) { .sec-floor-plan__board { grid-template-columns: 1.6fr 1fr; } } .sec-floor-plan__map { background: var(--clr-bg-section); border-radius: var(--radius-md); padding: var(--spacing-lg); } .sec-floor-plan__map svg { width: 100%; height: auto; display: block; } .sec-floor-plan__zone { cursor: pointer; transition: opacity 0.25s ease, filter 0.25s ease; } .sec-floor-plan__zone:hover { filter: brightness(0.92); } .sec-floor-plan__zone.is-active rect { stroke-width: 3; } .sec-floor-plan__zone-text { font-size: 13px; font-weight: 600; fill: var(--clr-text-base); } .sec-floor-plan__zone-text--accent { fill: var(--clr-base-white); } .sec-floor-plan__details { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-xl); background: var(--clr-bg-section); border-radius: var(--radius-md); } .sec-floor-plan__detail-eyebrow { color: var(--clr-accent-700); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-floor-plan__detail-title { color: var(--clr-text-base); margin: 0; } .sec-floor-plan__detail-desc { color: var(--clr-text-sub); margin: 0; } .sec-floor-plan__zone-list { list-style: none; padding: 0; margin: var(--spacing-md) 0 0; display: flex; flex-direction: column; gap: var(--spacing-xs); border-top: 1px solid var(--clr-ui-border); padding-top: var(--spacing-md); } .sec-floor-plan__zone-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) var(--spacing-md); background: var(--clr-base-white); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--clr-text-base); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; text-align: left; } .sec-floor-plan__zone-btn:hover { background: var(--clr-primary-50); border-color: var(--clr-primary-700); } .sec-floor-plan__zone-btn.is-active { background: var(--clr-primary-900); color: var(--clr-base-white); border-color: var(--clr-primary-900); } .sec-floor-plan__zone-area { color: var(--clr-text-aux); font-variant-numeric: tabular-nums; } .sec-floor-plan__zone-btn.is-active .sec-floor-plan__zone-area { color: rgba(255, 255, 255, 0.7); } /** * sec-faculty-spotlight — Featured spotlight 톤 (layout only). */ .sec-faculty-spotlight { padding-block: var(--section-lg); background: var(--clr-base-white); } .sec-faculty-spotlight__head { max-width: 76rem; margin: 0 0 var(--section-md); display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-faculty-spotlight__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-700); } .sec-faculty-spotlight__title { color: var(--clr-text-base); margin: 0; } .sec-faculty-spotlight__stage { position: relative; min-height: 56rem; } .sec-faculty-spotlight__person { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; gap: var(--spacing-2xl); opacity: 0; transform: translateY(2rem); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } @media (min-width: 1024px) { .sec-faculty-spotlight__person { grid-template-columns: 1fr 1.2fr; } } .sec-faculty-spotlight__person.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; } .sec-faculty-spotlight__portrait { margin: 0; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius-md); background: var(--clr-gray-200); } .sec-faculty-spotlight__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .sec-faculty-spotlight__content { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-md); } .sec-faculty-spotlight__role { color: var(--clr-accent-700); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-faculty-spotlight__name { color: var(--clr-text-base); margin: 0; } .sec-faculty-spotlight__quote { position: relative; color: var(--clr-text-base); margin: var(--spacing-md) 0; padding-left: var(--spacing-xl); border-left: 3px solid var(--clr-accent-500); font-style: italic; } .sec-faculty-spotlight__quote-mark { position: absolute; left: -0.5rem; top: -2.4rem; width: var(--spacing-4xl); height: var(--spacing-4xl); color: var(--clr-accent-500); opacity: 0.6; pointer-events: none; } .sec-faculty-spotlight__quote-mark svg { width: 100%; height: 100%; display: block; } .sec-faculty-spotlight__papers { list-style: none; padding: var(--spacing-lg) 0 0; margin: var(--spacing-md) 0 0; border-top: 1px solid var(--clr-ui-border); display: flex; flex-direction: column; gap: var(--spacing-sm); } .sec-faculty-spotlight__papers li { display: flex; flex-direction: column; gap: 0.2rem; } .sec-faculty-spotlight__paper-title { color: var(--clr-text-base); } .sec-faculty-spotlight__paper-venue { color: var(--clr-text-aux); } .sec-faculty-spotlight__nav { margin-top: var(--spacing-2xl); display: flex; justify-content: center; align-items: center; gap: var(--spacing-md); } .sec-faculty-spotlight__nav-btn { width: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); height: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); border-radius: 50%; border: 1px solid var(--clr-gray-300); background: transparent; color: var(--clr-gray-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .sec-faculty-spotlight__nav-btn:hover { border-color: var(--clr-primary-700); color: var(--clr-primary-700); } .sec-faculty-spotlight__nav-btn:focus-visible { outline: 2px solid var(--clr-primary-700); outline-offset: 2px; } .sec-faculty-spotlight__nav-counter { color: var(--clr-text-sub); font-variant-numeric: tabular-nums; min-width: 4rem; text-align: center; } /** * sec-alumni-pathways — Fellows pathways (layout only). */ .sec-alumni-pathways { padding-block: var(--section-lg); background: var(--clr-bg-section); } .sec-alumni-pathways__head { max-width: 76rem; margin: 0 0 var(--section-md); display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-alumni-pathways__eyebrow { color: var(--clr-accent-700); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-alumni-pathways__title { color: var(--clr-text-base); margin: 0; } .sec-alumni-pathways__lead { color: var(--clr-text-sub); margin: 0; max-width: 64ch; } .sec-alumni-pathways__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); } @media (min-width: 768px) { .sec-alumni-pathways__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1320px) { .sec-alumni-pathways__grid { grid-template-columns: repeat(3, 1fr); } } .sec-alumni-pathways__card { background: var(--clr-base-white); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .sec-alumni-pathways__card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(15, 76, 129, 0.12); } .sec-alumni-pathways__photo { margin: 0; aspect-ratio: 4/3; overflow: hidden; background: var(--clr-gray-200); } .sec-alumni-pathways__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .sec-alumni-pathways__body { padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-xs); } .sec-alumni-pathways__name { color: var(--clr-text-base); margin: 0; } .sec-alumni-pathways__ui-role { color: var(--clr-text-aux); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-alumni-pathways__now { margin: var(--spacing-md) 0 0; padding-top: var(--spacing-md); border-top: 1px solid var(--clr-ui-border); color: var(--clr-text-base); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-sm); } .sec-alumni-pathways__now-label { color: var(--clr-accent-700); letter-spacing: var(--tracking-caps); font-weight: 700; } .sec-alumni-pathways__arrow { color: var(--clr-accent-700); transition: transform 0.3s ease; margin-left: auto; } .sec-alumni-pathways__card:hover .sec-alumni-pathways__arrow { transform: translateX(0.6rem); } /** * sec-timeline-milestones — Swiper free-mode horizontal timeline (layout only). */ .sec-timeline-milestones { padding-block: var(--section-lg); background: var(--clr-base-white); } .sec-timeline-milestones__head { max-width: 76rem; margin: 0 0 var(--section-md); display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-timeline-milestones__eyebrow { color: var(--clr-accent-700); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-timeline-milestones__title { color: var(--clr-text-base); margin: 0; } .sec-timeline-milestones__lead { color: var(--clr-text-sub); margin: 0; max-width: 64ch; } .sec-timeline-milestones__stage { position: relative; overflow: visible; padding-block: var(--spacing-2xl); padding-top: var(--spacing-3xl); } .sec-timeline-milestones__rail { position: absolute; top: calc(var(--spacing-3xl) + 1.2rem); left: 0; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--clr-ui-border) 0, var(--clr-ui-border) 6px, transparent 6px, transparent 12px); z-index: 0; } .sec-timeline-milestones__node { position: relative; width: 28rem; padding-top: var(--spacing-xl); padding-right: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-xs); z-index: 1; } .sec-timeline-milestones__year { color: var(--clr-text-aux); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-timeline-milestones__dot { position: absolute; top: 0.6rem; left: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--clr-base-white); border: 3px solid var(--clr-primary-700); box-shadow: 0 0 0 4px var(--clr-base-white); } .swiper-slide-active .sec-timeline-milestones__dot { border-color: var(--clr-accent-500); transform: scale(1.15); } .sec-timeline-milestones__tag { color: var(--clr-accent-700); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: 700; } .sec-timeline-milestones__name { color: var(--clr-text-base); margin: var(--spacing-xs) 0; } .sec-timeline-milestones__body { color: var(--clr-text-sub); margin: 0; } /** * sec-awards-wall — Marquee wall + count-up stats (layout only). * Marquee 자체는 기존 ui-marquee-whisper keyframe 재사용. */ .sec-awards-wall { padding-block: var(--section-lg); background: var(--clr-primary-900); color: var(--clr-base-white); overflow: hidden; } .sec-awards-wall__head { max-width: 76rem; margin: 0 0 var(--section-md); display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-awards-wall__eyebrow { color: var(--clr-accent-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-awards-wall__title { color: var(--clr-base-white); margin: 0; } .sec-awards-wall__lead { color: rgba(255, 255, 255, 0.78); margin: 0; max-width: 64ch; } .sec-awards-wall__stats { list-style: none; padding: 0; margin: 0 0 var(--section-md); display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); } @media (min-width: 768px) { .sec-awards-wall__stats { grid-template-columns: repeat(3, 1fr); } } .sec-awards-wall__stat { padding: var(--spacing-xl); background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--spacing-xs); } .sec-awards-wall__stat-value { color: var(--clr-accent-500); font-variant-numeric: tabular-nums; } .sec-awards-wall__stat-label { color: rgba(255, 255, 255, 0.78); } .sec-awards-wall__marquees { display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-awards-wall__row { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .sec-awards-wall__track { display: flex; gap: var(--spacing-md); width: max-content; } .sec-awards-wall__track--reverse { animation-direction: reverse; } .sec-awards-wall__card { flex-shrink: 0; min-width: 36rem; padding: var(--spacing-md) var(--spacing-lg); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); color: var(--clr-base-white); } .sec-awards-wall__card--alt { background: var(--clr-accent-500); border-color: var(--clr-accent-500); } .sec-awards-wall__card-title { color: var(--clr-base-white); margin: 0; } .sec-awards-wall__card-meta { color: rgba(255, 255, 255, 0.72); margin: var(--spacing-xs) 0 0; text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-awards-wall__card--alt .sec-awards-wall__card-meta { color: rgba(255, 255, 255, 0.85); } /* Facilities pages */ /** * sec-rsv-layout — 예약 페이지 전체 레이아웃 섹션. * 타이포 위계는 HTML .no-* 유틸로만(규칙 #17-A). * spacing 은 var(--spacing-*) / .no-section-* 토큰만(규칙 #17-B). */ .sec-rsv-layout { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); } .sec-rsv-layout__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); flex-wrap: wrap; } .sec-rsv-layout__totals { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; } .sec-rsv-layout__totals-label { color: var(--clr-text-sub); } .sec-rsv-layout__totals-value { color: var(--clr-primary-900); } .sec-rsv-layout__search { position: relative; flex: 0 0 clamp(22rem, 6.4724919094vw + 19.572815534rem, 32rem); } .sec-rsv-layout__search i { position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); color: var(--clr-gray-400); pointer-events: none; } .sec-rsv-layout__search input { width: 100%; height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem); border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); padding: 0 1.4rem 0 4rem; background: #fff; color: var(--clr-text-base); appearance: none; } .sec-rsv-layout__search input::placeholder { color: var(--clr-text-aux); } .sec-rsv-layout__search input:focus { outline: none; border-color: var(--clr-primary-700); box-shadow: 0 0 0 3px var(--clr-primary-50); } .sec-rsv-layout__cats { margin-bottom: var(--spacing-xl); flex-wrap: wrap; } .sec-rsv-layout__cols { display: grid; grid-template-columns: 3.5fr 8.5fr; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); align-items: start; } @media (max-width: 1024px) { .sec-rsv-layout__cols { grid-template-columns: 1fr; } } .sec-rsv-layout__left-col { display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-rsv-layout__right-col { display: flex; flex-direction: column; gap: var(--spacing-3xl); position: relative; } .sec-rsv-layout__loader { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(0.2rem); backdrop-filter: blur(0.2rem); border-radius: var(--radius-md); opacity: 0; visibility: hidden; transition: opacity var(--tran-25), visibility var(--tran-25); } .sec-rsv-layout__right-col.is-loading .sec-rsv-layout__loader { opacity: 1; visibility: visible; } .sec-rsv-layout__loader-spinner { width: 2.4rem; height: 2.4rem; border: 3px solid var(--clr-gray-200); border-top-color: var(--clr-primary-900); border-radius: 50%; animation: sec-rsv-spin 0.8s linear infinite; } .sec-rsv-layout__right-inner { display: grid; grid-template-columns: 5fr 3.5fr; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); align-items: start; } @media (max-width: 1024px) { .sec-rsv-layout__right-inner { grid-template-columns: 1fr; } } .sec-rsv-layout__list-col { border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: #fff; } .sec-rsv-layout__list-head { display: flex; align-items: center; justify-content: space-between; padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); border-bottom: 1px solid var(--clr-gray-200); background: #fff; border-radius: var(--radius-md) var(--radius-md) 0 0; position: sticky; top: 0; z-index: 20; } .sec-rsv-layout__sort-wrap { position: relative; } .sec-rsv-layout__sort-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 0; color: var(--clr-text-sub); cursor: pointer; } .sec-rsv-layout__sort-btn i { transition: transform var(--tran-15); } .sec-rsv-layout__sort-btn[aria-expanded=true] i { transform: rotate(180deg); } .sec-rsv-layout__sort-menu { display: none; position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 10; list-style: none; margin: 0; padding: 0.4rem 0; background: #fff; border: 1px solid var(--clr-gray-200); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); min-width: 14rem; } .sec-rsv-layout__sort-menu.is-open { display: block; } .sec-rsv-layout__sort-option { padding: 0.8rem 1.4rem; color: var(--clr-text-base); cursor: pointer; white-space: nowrap; transition: background-color var(--tran-15); } .sec-rsv-layout__sort-option:hover { background: var(--clr-gray-50); } .sec-rsv-layout__sort-option.is-selected { color: var(--clr-primary-700); font-weight: 600; } .sec-rsv-layout__list-items { max-height: clamp(48rem, 10.355987055vw + 44.1165048544rem, 64rem); overflow-y: auto; border-radius: 0 0 var(--radius-md) var(--radius-md); } .sec-rsv-layout__list-items-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); color: var(--clr-text-sub); text-align: center; } .sec-rsv-layout__list-items-empty i { font-size: 2.4rem; opacity: 0.4; } .sec-rsv-layout__detail { border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: #fff; padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); } .sec-rsv-layout__detail-img { margin-bottom: var(--spacing-lg); border-radius: var(--radius-sm); overflow: hidden; } .sec-rsv-layout__detail-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .sec-rsv-layout__detail-img .ui-placeholder { border-radius: 0; } .sec-rsv-layout__detail-name { color: var(--clr-text-base); margin-bottom: 0.4rem; } .sec-rsv-layout__detail-sub { color: var(--clr-primary-700); margin-bottom: var(--spacing-lg); } .sec-rsv-layout__detail-meta { margin: 0 0 var(--spacing-lg); display: flex; flex-direction: column; gap: 0.6rem; } .sec-rsv-layout__detail-row { display: grid; grid-template-columns: 10rem 1fr; gap: var(--spacing-sm); align-items: baseline; } .sec-rsv-layout__detail-row dt { color: var(--clr-text-sub); } .sec-rsv-layout__detail-row dd { color: var(--clr-text-base); margin: 0; word-break: break-all; } .sec-rsv-layout__side { display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-rsv-layout__apply-cta { width: 100%; justify-content: center; } .sec-rsv-layout__side-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); } .sec-rsv-layout__side-links .ui-cta { justify-content: center; min-width: 0; overflow: hidden; } .sec-rsv-layout__side-links .ui-cta__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sec-rsv-layout__staff-notes { border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); padding: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); background: #fff; } .sec-rsv-layout__staff-notes-head { color: var(--clr-text-sub); text-transform: uppercase; margin-bottom: var(--spacing-sm); } .sec-rsv-layout__staff-notes-body { color: var(--clr-text-base); margin-bottom: var(--spacing-sm); } .sec-rsv-layout__staff-notes-body p { margin: 0 0 var(--spacing-xs); } .sec-rsv-layout__staff-notes-body p:last-child { margin-bottom: 0; } .sec-rsv-layout__staff-flag { color: var(--clr-status-error); } .sec-rsv-layout__staff-notes-expand { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-xs); padding: 0.5rem 1rem; color: var(--clr-text-base); cursor: pointer; margin-top: var(--spacing-xs); transition: background-color var(--tran-15); } .sec-rsv-layout__staff-notes-expand:hover { background: var(--clr-gray-50); } .rsv-detail-modal { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); align-items: start; } @media (max-width: 768px) { .rsv-detail-modal { grid-template-columns: 1fr; } } .rsv-detail-modal__img { width: 100%; border-radius: var(--radius-md); display: block; } .rsv-detail-modal__body { display: flex; flex-direction: column; gap: var(--spacing-md); } .rsv-detail-modal__sub { color: var(--clr-text-sub); margin: 0; } .rsv-detail-modal__meta { display: grid; grid-template-columns: 10rem 1fr; gap: var(--spacing-xs) var(--spacing-sm); } @media (max-width: 544px) { .rsv-detail-modal__meta { grid-template-columns: 1fr; } } .rsv-detail-modal__row { display: contents; } .rsv-detail-modal__row dt { color: var(--clr-text-sub); } .rsv-detail-modal__row dd { margin: 0; color: var(--clr-text-base); } .rsv-detail-modal__apply { align-self: flex-start; } .rsv-detail-modal__lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } @media (max-width: 544px) { .rsv-detail-modal__lists { grid-template-columns: 1fr; } } .rsv-detail-modal__list-col ul { list-style: none; margin: var(--spacing-xs) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .rsv-detail-modal__list-col ul a { color: var(--clr-primary-600); text-decoration: none; } .rsv-detail-modal__list-col ul a:hover { text-decoration: underline; } .rsv-detail-modal__list-title { color: var(--clr-text-sub); text-transform: uppercase; margin: 0; padding-bottom: 0.6rem; border-bottom: 1px solid var(--clr-gray-200); } .rsv-notes-modal { display: flex; flex-direction: column; gap: var(--spacing-md); } .rsv-notes-modal__item { padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); border: 1px solid var(--clr-gray-100); border-radius: var(--radius-sm); background: var(--clr-gray-50); } .rsv-notes-modal__meta { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); } .rsv-notes-modal__author { color: var(--clr-primary-700); font-weight: 600; } .rsv-notes-modal__date { color: var(--clr-text-sub); } .rsv-notes-modal__body { color: var(--clr-text-base); margin: 0; white-space: pre-line; } @keyframes sec-rsv-spin { to { transform: rotate(360deg); } } .sec-booking-form-band { background: var(--clr-base-white); color: var(--clr-text-primary); } .sec-booking-form-band__header { border-bottom: 1px solid var(--clr-gray-200); } .sec-booking-form-band__equipment-name { color: var(--clr-text-primary); } .sec-booking-form-band__equipment-model { color: var(--clr-text-secondary); margin-left: var(--spacing-sm); } .sec-booking-form-band__equipment-model::before { content: "·"; margin-right: var(--spacing-sm); } .sec-booking-form-band__alert { padding: var(--spacing-md); background: var(--clr-status-error-bg, #fef2f2); border: 1px solid var(--clr-status-error, #dc2626); color: var(--clr-status-error, #dc2626); } .sec-booking-form-band__form { display: flex; flex-direction: column; gap: var(--spacing-2xl); } .sec-booking-form-band__group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-lg); } .sec-booking-form-band__group-title { color: var(--clr-text-primary); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--clr-gray-200); margin-bottom: var(--spacing-xs); } .sec-booking-form-band__row { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--spacing-xl); row-gap: var(--spacing-lg); } @media (max-width: 544px) { .sec-booking-form-band__row { grid-template-columns: 1fr; } } .sec-booking-form-band__row--three { grid-template-columns: repeat(3, 1fr); } @media (max-width: 544px) { .sec-booking-form-band__row--three { grid-template-columns: 1fr; } } .sec-booking-form-band__field { display: flex; flex-direction: column; gap: var(--spacing-xs); } .sec-booking-form-band__field--full { grid-column: 1/-1; } .sec-booking-form-band__field.is-error .sec-booking-form-band__input, .sec-booking-form-band__field.is-error .sec-booking-form-band__select, .sec-booking-form-band__field.is-error .sec-booking-form-band__textarea { border-bottom-color: var(--clr-status-error, #dc2626); } .sec-booking-form-band__label { color: var(--clr-text-secondary); } .sec-booking-form-band__required { color: var(--clr-primary-700); } .sec-booking-form-band__error { color: var(--clr-status-error, #dc2626); margin-top: var(--spacing-2xs); } .sec-booking-form-band__input, .sec-booking-form-band__select, .sec-booking-form-band__textarea { padding: var(--spacing-sm) 0; border: 0; border-bottom: 1px solid var(--clr-gray-300); background: transparent; color: var(--clr-text-primary); } .sec-booking-form-band__input:focus, .sec-booking-form-band__select:focus, .sec-booking-form-band__textarea:focus { outline: 0; border-bottom-color: var(--clr-primary-700); } .sec-booking-form-band__textarea { resize: vertical; } .sec-booking-form-band__select { cursor: pointer; } .sec-booking-form-band__actions { display: flex; align-items: center; gap: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--clr-gray-200); } @media (max-width: 544px) { .sec-booking-form-band__actions { flex-direction: column; align-items: stretch; } } .sec-fee-guide-body { background: var(--clr-base-white); } .sec-fee-guide-body__group + .sec-fee-guide-body__group { margin-top: var(--spacing-2xl); } .sec-fee-guide-body__group-title { color: var(--clr-text-primary); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--clr-primary-700); margin-bottom: var(--spacing-lg); } .sec-fee-guide-body__items { display: flex; flex-direction: column; gap: var(--spacing-lg); } .sec-fee-guide-body__item { padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--clr-gray-200); background: var(--clr-gray-50, #f9fafb); } @media (max-width: 544px) { .sec-fee-guide-body__item { padding: var(--spacing-md); } } .sec-fee-guide-body__item-title { color: var(--clr-text-primary); margin-bottom: var(--spacing-xs); } .sec-fee-guide-body__item-content { color: var(--clr-text-secondary); } .sec-fee-guide-body__item-content p + p { margin-top: var(--spacing-xs); } .sec-fee-guide-body__item-content ul, .sec-fee-guide-body__item-content ol { padding-left: var(--spacing-lg); } .sec-faq-body { background: var(--clr-base-white); } .sec-faq-body__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--clr-gray-200); } .sec-faq-body__item { border-bottom: 1px solid var(--clr-gray-200); } .sec-faq-body__question { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-md); width: 100%; padding: var(--spacing-lg) 0; background: transparent; border: 0; color: var(--clr-text-primary); cursor: pointer; text-align: left; transition: color 0.15s ease; } .sec-faq-body__question:hover { color: var(--clr-primary-700); } .sec-faq-body__question[aria-expanded=true] { color: var(--clr-primary-700); } .sec-faq-body__question[aria-expanded=true] .sec-faq-body__chevron { transform: rotate(180deg); } .sec-faq-body__question-text { flex: 1 1 auto; } .sec-faq-body__chevron { flex: 0 0 auto; transition: transform 0.2s ease; color: var(--clr-text-secondary); } .sec-faq-body__answer { color: var(--clr-text-secondary); padding-bottom: var(--spacing-lg); } .sec-faq-body__answer p + p { margin-top: var(--spacing-xs); } .sec-faq-body__answer ul, .sec-faq-body__answer ol { padding-left: var(--spacing-lg); } /* Research — Platforms (2026-06-04 신설, 260504 docx 3) */ .sec-platforms-list { background: var(--clr-base-white); } .sec-platforms-list__heading { color: var(--clr-text-primary); } .sec-platforms-list__lead { color: var(--clr-text-secondary); max-width: 76rem; } .sec-platforms-list__items { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-2xl); } .sec-platforms-list__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-2xl); align-items: center; } @media (max-width: 768px) { .sec-platforms-list__item { grid-template-columns: 1fr; gap: var(--spacing-lg); } } .sec-platforms-list__media { overflow: hidden; } .sec-platforms-list__img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; } .sec-platforms-list__title { color: var(--clr-text-primary); } .sec-platforms-list__intro { color: var(--clr-text-secondary); } .sec-platform-detail { background: var(--clr-base-white); } .sec-platform-detail__split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-2xl); align-items: start; } @media (max-width: 768px) { .sec-platform-detail__split { grid-template-columns: 1fr; gap: var(--spacing-lg); } } .sec-platform-detail__eyebrow { color: var(--clr-primary-700); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-platform-detail__title { color: var(--clr-text-primary); } .sec-platform-detail__body { color: var(--clr-text-secondary); } .sec-platform-detail__media { overflow: hidden; } .sec-platform-detail__img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; } .sec-platform-detail__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2xl); } @media (max-width: 768px) { .sec-platform-detail__lists { grid-template-columns: 1fr; gap: var(--spacing-lg); } } .sec-platform-detail__list-title { color: var(--clr-text-primary); } .sec-platform-detail__bullets { color: var(--clr-text-secondary); padding-left: 1.2em; } .sec-platform-detail__bullets li { list-style: disc; } .sec-platform-detail__bullets li + li { margin-top: var(--spacing-xs); } .sec-research-intro { background: var(--clr-base-white); } .sec-research-intro__para, .sec-research-intro__lead, .sec-research-intro__outro { color: var(--clr-text-secondary); } .sec-research-intro__lead { color: var(--clr-text-primary); } .sec-research-intro__bullets { color: var(--clr-text-secondary); padding-left: 1.2em; } .sec-research-intro__bullets li + li { margin-top: var(--spacing-xs); } /* Research — 인덱스 소개글 (2026-06-05 신설, Rule #19) */ .sec-research-intro-text { background: var(--clr-base-white); } .sec-research-intro-text__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--spacing-4xl); align-items: start; } @media (max-width: 768px) { .sec-research-intro-text__grid { grid-template-columns: 1fr; gap: var(--spacing-2xl); } } .sec-research-intro-text__lead { position: sticky; top: 8rem; } @media (max-width: 768px) { .sec-research-intro-text__lead { position: static; } } .sec-research-intro-text__eyebrow { display: block; color: var(--clr-primary-600); text-transform: uppercase; } /* Group 7 — Home Main (2026-05-31 신설, pages/index.php 인라인 BEM 추출) */ .sec-theh__eyebrow { color: var(--clr-accent-700); text-transform: uppercase; } .sec-theh-hero { position: relative; min-height: 100vh; display: grid; grid-template-rows: 1fr auto 2.4fr; overflow: hidden; color: var(--clr-base-white); background: var(--clr-primary-900); } .sec-theh-hero__media, .sec-theh-hero__shade, .sec-theh-hero__intro-mask { position: absolute; inset: 0; } .sec-theh-hero__media { z-index: 0; height: 100%; } .sec-theh-hero__media .img-auto-cover, .sec-theh-hero__media .no-auto-cover { height: 100%; } .sec-theh-hero__shade { z-index: 1; background: rgba(36, 36, 79, 0.4); } .sec-theh-hero__intro-mask { z-index: 2; pointer-events: none; opacity: 0; background: var(--clr-primary-900); --theh-hero-mask-radius: 0vmax; -webkit-mask-image: radial-gradient(circle at center, transparent 0 var(--theh-hero-mask-radius), #000 calc(var(--theh-hero-mask-radius) + 1px)); mask-image: radial-gradient(circle at center, transparent 0 var(--theh-hero-mask-radius), #000 calc(var(--theh-hero-mask-radius) + 1px)); } .sec-theh-hero__inner { position: relative; z-index: 3; grid-row: 2; display: grid; gap: var(--spacing-lg); } .sec-theh-hero__eyebrow { color: var(--clr-accent-300); } .sec-theh-hero__mark { background: var(--clr-bg-page); color: var(--clr-accent-500); padding: 0.02em 0.2em; white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; transform-origin: center; } .sec-theh-hero.is-theh-hero-intro-ready .sec-theh-hero__intro-mask { opacity: 1; } .sec-theh-hero.is-theh-hero-intro-ready .sec-theh-hero__title { opacity: 1; } .sec-theh-hero.is-theh-hero-intro-ready .sec-theh-hero__title .line { display: block; overflow: hidden; } .sec-theh-hero.is-theh-hero-intro-ready .sec-theh-hero__title .word { display: inline-block; white-space: nowrap; } .sec-theh-hero.is-theh-hero-intro-ready .sec-theh-hero__title .char { display: inline-block; opacity: 0; } .sec-theh-hero.is-theh-hero-intro-ready .sec-theh-hero__mark { display: inline-block; } .sec-theh-hero.is-theh-hero-intro-ready .sec-theh-hero__lead { opacity: 0; } @media (prefers-reduced-motion: reduce) { .sec-theh-hero__intro-mask { display: none; } } .sec-theh-why { background: var(--clr-base-white); } .sec-theh-why__intro { padding-bottom: 0; } .sec-theh-why__eyebrow, .sec-theh-why__axis-meta { display: flex; align-items: center; } .sec-theh-why__eyebrow { gap: var(--spacing-sm); color: var(--clr-accent-700); letter-spacing: var(--tracking-caps); } .sec-theh-why__eyebrow-divider { width: var(--spacing-2xl); height: 1px; background: var(--clr-ui-border); } .sec-theh-why__intro-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(28rem, 0.8fr); align-items: end; gap: var(--spacing-4xl); margin-top: var(--spacing-xl); } @media (max-width: 1024px) { .sec-theh-why__intro-grid { grid-template-columns: 1fr; align-items: start; gap: var(--spacing-2xl); } } .sec-theh-why__title { max-width: 13ch; color: var(--clr-primary-950); text-wrap: balance; word-break: keep-all; } .sec-theh-why__lead { max-width: 38em; color: var(--clr-text-secondary); word-break: keep-all; } .sec-theh-why__lead span { display: inline; } .sec-theh-why__journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--spacing-4xl); border-top: 1px solid var(--clr-primary-950); border-bottom: 1px solid var(--clr-ui-border); } @media (max-width: 768px) { .sec-theh-why__journey { grid-template-columns: 1fr; } } .sec-theh-why__journey-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--spacing-lg); padding: var(--spacing-xl); } .sec-theh-why__journey-item:not(:last-child) { border-right: 1px solid var(--clr-ui-border); } @media (max-width: 768px) { .sec-theh-why__journey-item:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--clr-ui-border); } } .sec-theh-why__journey-number { color: var(--clr-accent-700); } .sec-theh-why__journey-copy { display: flex; flex-direction: column; gap: var(--spacing-xxs); } .sec-theh-why__journey-label { color: var(--clr-primary-950); letter-spacing: var(--tracking-caps); } .sec-theh-why__journey-desc { color: var(--clr-text-secondary); word-break: keep-all; } .sec-theh-why__story { margin-top: var(--spacing-3xl); } .sec-theh-why__diagnostic-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(44rem, 0.88fr); min-height: min(54vw, 72rem); margin-top: 0; overflow: hidden; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--clr-primary-950); } @media (max-width: 1024px) { .sec-theh-why__diagnostic-stage { grid-template-columns: minmax(0, 0.9fr) minmax(40rem, 1.1fr); min-height: min(64vw, 66rem); } } @media (max-width: 768px) { .sec-theh-why__diagnostic-stage { display: block; min-height: 0; background: var(--clr-background-paper); } } .sec-theh-why__visual-frame { position: absolute; inset: 0; overflow: hidden; background: var(--clr-primary-950); } @media (max-width: 768px) { .sec-theh-why__visual-frame { position: relative; min-height: min(62vw, 48rem); } } .sec-theh-why__visual-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--clr-primary-950) 58%, transparent) 0%, transparent 46%), linear-gradient(90deg, color-mix(in srgb, var(--clr-primary-950) 8%, transparent) 42%, color-mix(in srgb, var(--clr-primary-950) 68%, transparent) 100%); pointer-events: none; } @media (max-width: 768px) { .sec-theh-why__visual-frame::after { background: linear-gradient(180deg, color-mix(in srgb, var(--clr-primary-950) 58%, transparent) 0%, transparent 48%, color-mix(in srgb, var(--clr-primary-950) 38%, transparent) 100%); } } .sec-theh-why__visual-image { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-position: center 58%; } @media (max-width: 768px) { .sec-theh-why__visual-image { object-position: center 62%; } } .sec-theh-why__visual-mask { position: absolute; inset: 0; z-index: 2; background: var(--clr-primary-950); pointer-events: none; transform: scaleX(0); transform-origin: right center; } .sec-theh-why__diagnostic-panel { position: relative; z-index: 3; grid-column: 2; align-self: stretch; margin: var(--spacing-xl); padding: var(--spacing-2xl); border: 1px solid color-mix(in srgb, var(--clr-ui-border) 72%, transparent); background: color-mix(in srgb, var(--clr-base-white) 94%, transparent); } @media (max-width: 768px) { .sec-theh-why__diagnostic-panel { margin: 0; border: 0; background: transparent; } } @media (max-width: 544px) { .sec-theh-why__diagnostic-panel { padding: var(--spacing-xl); } } .sec-theh-why__diagnostic-panel .sec-theh-why__axis-list { margin-top: 0; } .sec-theh-why__subhead { display: block; } .sec-theh-why__subhead--visual { position: absolute; z-index: 3; top: var(--spacing-4xl); left: var(--spacing-2xl); max-width: calc(50% - var(--spacing-5xl)); } @media (max-width: 768px) { .sec-theh-why__subhead--visual { top: var(--spacing-3xl); right: var(--spacing-xl); left: var(--spacing-xl); max-width: none; } } .sec-theh-why__subhead--visual .sec-theh-why__subhead-label, .sec-theh-why__subhead--visual .sec-theh-why__subhead-title { color: var(--clr-base-white); } .sec-theh-why__subhead--visual .sec-theh-why__stage-count { color: var(--clr-accent-500); } .sec-theh-why__subhead-label, .sec-theh-why__axis-keyword, .sec-theh-why__bridge-label, .sec-theh-why__conclusion-kicker { color: var(--clr-accent-700); letter-spacing: var(--tracking-caps); } .sec-theh-why__subhead-label, .sec-theh-why__conclusion-kicker { display: flex; align-items: center; gap: var(--spacing-sm); } .sec-theh-why__stage-count { font-variant-numeric: tabular-nums; white-space: nowrap; } .sec-theh-why__subhead-title, .sec-theh-why__reality-title { color: var(--clr-primary-950); word-break: keep-all; } .sec-theh-why__subhead-title { margin-top: var(--spacing-md); } .sec-theh-why__axis-list { display: grid; grid-template-columns: 1fr; margin-top: var(--spacing-xl); border-top: 1px solid var(--clr-primary-950); } .sec-theh-why__axis { display: grid; grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr); align-items: center; gap: var(--spacing-xl); padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--clr-ui-border); } @media (max-width: 544px) { .sec-theh-why__axis { grid-template-columns: 1fr; gap: var(--spacing-sm); } } .sec-theh-why__axis-meta { justify-content: flex-start; gap: var(--spacing-md); } .sec-theh-why__axis-number { color: var(--clr-primary-950); } .sec-theh-why__axis-question { color: var(--clr-text-primary); text-wrap: pretty; word-break: keep-all; } .sec-theh-why__reality { display: grid; grid-template-columns: minmax(24rem, 0.72fr) minmax(0, 1.28fr); gap: var(--spacing-4xl); margin-top: 0; padding: var(--spacing-3xl); border-right: 1px solid var(--clr-ui-border); border-left: 1px solid var(--clr-ui-border); background: var(--clr-background-paper); } @media (max-width: 1024px) { .sec-theh-why__reality { grid-template-columns: 1fr; gap: var(--spacing-3xl); } } @media (max-width: 544px) { .sec-theh-why__reality { padding-right: var(--gutter); padding-left: var(--gutter); } } .sec-theh-why__reality-intro { align-self: start; position: sticky; top: calc(var(--header-height) + var(--spacing-2xl)); } @media (max-width: 1024px) { .sec-theh-why__reality-intro { position: static; } } .sec-theh-why__reality-title { margin-top: var(--spacing-xl); } .sec-theh-why__reality-list { border-top: 1px solid var(--clr-primary-950); } .sec-theh-why__reality-item { display: grid; grid-template-columns: minmax(3rem, auto) minmax(0, 1fr); gap: var(--spacing-2xl); padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); border-bottom: 1px solid var(--clr-ui-border); } @media (max-width: 544px) { .sec-theh-why__reality-item { gap: var(--spacing-lg); } } .sec-theh-why__reality-number { color: var(--clr-text-tertiary); } .sec-theh-why__reality-copy { display: grid; grid-template-columns: minmax(18rem, 0.7fr) minmax(0, 1.3fr); align-items: start; gap: var(--spacing-xl); } @media (max-width: 768px) { .sec-theh-why__reality-copy { grid-template-columns: 1fr; gap: var(--spacing-sm); } } .sec-theh-why__reality-name { color: var(--clr-primary-950); word-break: keep-all; } .sec-theh-why__reality-desc { color: var(--clr-text-secondary); word-break: keep-all; } .sec-theh-why__conclusion { margin-top: 0; padding: var(--spacing-xl) var(--spacing-3xl); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--clr-primary-950); } @media (max-width: 544px) { .sec-theh-why__conclusion { padding: var(--spacing-xl) var(--gutter); } } .sec-theh-why__conclusion-kicker { color: var(--clr-accent-500); } .sec-theh-why__conclusion-main { display: grid; grid-template-columns: minmax(24rem, 0.72fr) minmax(0, 1.28fr); align-items: start; gap: var(--spacing-4xl); margin-top: var(--spacing-lg); } @media (max-width: 1024px) { .sec-theh-why__conclusion-main { grid-template-columns: 1fr; gap: var(--spacing-xl); } } .sec-theh-why__conclusion-title { color: var(--clr-base-white); word-break: keep-all; } .sec-theh-why__conclusion-resolution { display: flex; flex-direction: column; gap: var(--spacing-lg); } .sec-theh-why__bridge { display: flex; align-items: flex-start; flex-direction: column; gap: var(--spacing-xl); } .sec-theh-why__conclusion-body { max-width: 68rem; color: color-mix(in srgb, var(--clr-base-white) 90%, transparent); word-break: keep-all; } .sec-theh-why__bridge-body { max-width: 46rem; color: color-mix(in srgb, var(--clr-base-white) 76%, transparent); word-break: keep-all; } .sec-theh-why.is-theh-why-reveal-ready .sec-theh-why__visual-mask { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .sec-theh-why__visual-mask { display: none; } } .sec-theh-lab { position: relative; isolation: isolate; background: var(--clr-background-primary); } .sec-theh-lab__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(28rem, 46rem); gap: var(--spacing-4xl); } @media (max-width: 768px) { .sec-theh-lab__head { grid-template-columns: 1fr; } } .sec-theh-lab__copy { display: grid; gap: var(--spacing-md); color: var(--clr-text-sub); } .sec-theh-lab__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-2xl); margin-top: var(--spacing-4xl); } @media (max-width: 1024px) { .sec-theh-lab__metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .sec-theh-lab__metrics { grid-template-columns: 1fr; } } .sec-theh-services { background: var(--clr-primary-900); color: var(--clr-base-white); } .sec-theh-services .section-head__main { grid-template-columns: minmax(0, 1.08fr) minmax(32rem, 0.92fr); } @media (max-width: 768px) { .sec-theh-services .section-head__main { grid-template-columns: 1fr; } } .sec-theh-services .section-head__copy { width: 100%; max-width: 64rem; justify-self: end; gap: var(--spacing-sm); color: rgba(255, 255, 255, 0.88); word-break: keep-all; } @media (max-width: 768px) { .sec-theh-services .section-head__copy { max-width: none; justify-self: stretch; } } .sec-theh-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); margin-top: var(--spacing-4xl); } @media (max-width: 1024px) { .sec-theh-services__grid { grid-template-columns: 1fr; } } .sec-theh-solution { overflow: visible; background: var(--clr-bg-page); } .sec-theh-solution__layout { display: grid; grid-template-columns: minmax(34rem, 0.82fr) minmax(0, 1.18fr); gap: var(--spacing-3xl); align-items: start; } @media (max-width: 1024px) { .sec-theh-solution__layout { grid-template-columns: 1fr; } } .sec-theh-solution__intro { position: sticky; top: calc(var(--header-height) + var(--spacing-xl)); display: flex; flex-direction: column; min-height: min(72rem, 100vh - var(--header-height) - var(--spacing-2xl)); padding: var(--spacing-3xl); border-radius: var(--radius-lg); color: var(--clr-base-white); background: var(--clr-primary-900); } @media (max-width: 1024px) { .sec-theh-solution__intro { position: static; min-height: 0; } } .sec-theh-solution__intro .section-head__eyebrow { display: block; width: auto; } .sec-theh-solution__intro .section-head__main { grid-template-columns: 1fr; gap: var(--spacing-xl); } .sec-theh-solution__intro .section-head__title { max-width: 64rem; color: var(--clr-base-white); text-wrap: balance; word-break: keep-all; } .sec-theh-solution__intro .section-head__copy { max-width: 58rem; color: rgba(255, 255, 255, 0.82); word-break: keep-all; } .sec-theh-solution__intro .section-head__copy strong { color: var(--clr-accent-300); } .sec-theh-solution__progress { display: grid; gap: var(--spacing-md); margin-top: auto; padding-top: var(--spacing-2xl); border-top: 1px solid rgba(255, 255, 255, 0.22); } @media (max-width: 1024px) { .sec-theh-solution__progress { display: none; } } .sec-theh-solution__progress-meta { display: flex; align-items: baseline; gap: var(--spacing-xs); } .sec-theh-solution__progress-current { color: var(--clr-accent-300); } .sec-theh-solution__progress-separator, .sec-theh-solution__progress-total { color: rgba(255, 255, 255, 0.58); } .sec-theh-solution__progress-title { color: var(--clr-base-white); } .sec-theh-solution__progress-track { height: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.2); } .sec-theh-solution__progress-fill { display: block; width: 100%; height: 100%; background: var(--clr-accent-300); transform: scaleX(0.2); transform-origin: left center; } .sec-theh-solution__list { display: grid; gap: var(--spacing-lg); } .sec-theh-partners { position: relative; overflow: hidden; color: var(--clr-base-white); background: var(--clr-primary-900); } .sec-theh-partners::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("/assets/images/main/clients-partners-bg.jpg") center/cover no-repeat; } .sec-theh-partners::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(6, 6, 20, 0.84) 0%, rgba(6, 6, 20, 0.52) 42%, rgba(6, 6, 20, 0.58) 64%, rgba(6, 6, 20, 0.9) 100%); } .sec-theh-partners__head, .sec-theh-partners__marquees, .sec-theh-partners__actions { position: relative; z-index: 1; } .sec-theh-partners__head { display: grid; justify-items: center; gap: var(--spacing-md); max-width: 72rem; margin: 0 auto var(--spacing-4xl); text-align: center; } .sec-theh-partners__eyebrow { color: var(--clr-accent-300); letter-spacing: var(--tracking-caps); } .sec-theh-partners__title { margin: 0; } .sec-theh-partners__copy { max-width: 64rem; color: rgba(255, 255, 255, 0.78); } .sec-theh-partners__copy p { margin: 0; } .sec-theh-partners__marquees { display: flex; flex-direction: column; gap: var(--spacing-lg); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%); } .sec-theh-partners__row { overflow: hidden; } .sec-theh-partners__track { display: flex; gap: var(--spacing-lg); width: max-content; padding-block: var(--spacing-xs); } .sec-theh-partners__track--reverse { animation-direction: reverse; } .sec-theh-partners__actions { display: flex; justify-content: center; margin-top: var(--spacing-4xl); } .sec-theh-insights { background: var(--clr-base-white); } .sec-theh-insights .section-head__copy { max-width: 54rem; color: var(--clr-text-base); } .sec-theh-insights .section-head__copy p { max-width: 46rem; } .sec-theh-insights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); margin-top: var(--spacing-3xl); } @media (max-width: 1024px) { .sec-theh-insights__grid { grid-template-columns: 1fr; gap: var(--spacing-2xl); } } .sec-theh-insights__cta { display: flex; justify-content: center; margin-top: var(--spacing-3xl); } .sec-theh-contact { background: var(--clr-background-primary); } .sec-theh-contact > .no-container-xl { display: grid; grid-template-columns: minmax(28rem, 48rem) 1fr; gap: var(--spacing-5xl); align-items: start; } @media (max-width: 1024px) { .sec-theh-contact > .no-container-xl { grid-template-columns: 1fr; } } .sec-theh-contact__left { display: grid; align-content: start; gap: var(--spacing-lg); } .sec-theh-contact { /* 제목 2줄: 1줄 일반 + 2줄 네이비 강조 박스(section-head__mark 재사용) */ /* 강조 줄 = inline — 단어(line box)마다 배경 fill 이 hug(box-decoration-break:clone). inline-block 이면 2줄이 한 블록 박스로 합쳐져 라인 전체가 채워짐 → 금지. 상단 간격은 앞 줄 margin-bottom 으로. */ } .sec-theh-contact__title-line { display: block; margin-bottom: var(--spacing-xs); } .sec-theh-contact__title-accent { display: inline; } .sec-theh-contact__lead { display: grid; gap: var(--spacing-xs); color: var(--clr-text-sub); } .sec-theh-contact { /* === 진단 리포트 카드 === */ } .sec-theh-contact__report { display: grid; gap: var(--spacing-sm); margin-top: var(--spacing-lg); padding: var(--spacing-xl); background: var(--clr-base-white); border-radius: var(--radius-md); box-shadow: 0 1.2rem 3.6rem -1.8rem rgba(36, 36, 79, 0.22); } .sec-theh-contact__report-title { color: var(--clr-accent-500); } .sec-theh-contact__report-desc { color: var(--clr-text-sub); } .sec-theh-contact { /* 리포트 이미지 — 은은한 강조: 상단 노출(하단 크롭) + 소프트 섀도 + 슬로우 플로팅 + 1회성 sheen */ } .sec-theh-contact__report-figure { position: relative; margin-top: var(--spacing-md); aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-md); box-shadow: 0 1.6rem 4.2rem -1.4rem rgba(36, 36, 79, 0.42); animation: theh-report-float 7s ease-in-out infinite; } .sec-theh-contact__report-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%); transform: translateX(-130%); animation: theh-report-sheen 6s ease-in-out 1.4s infinite; pointer-events: none; } .sec-theh-contact__report-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.7s ease; } .sec-theh-contact__report-figure:hover .sec-theh-contact__report-img { transform: scale(1.04); } .sec-theh-contact { /* === Contact 제출 폼 === */ } .sec-theh-contact__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: var(--spacing-xl) var(--spacing-2xl); } @media (max-width: 1024px) { .sec-theh-contact__form { grid-template-columns: 1fr; } } .sec-theh-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sec-theh-contact__divider { grid-column: 1/-1; margin: var(--spacing-md) 0; border: 0; border-top: 1px solid var(--clr-ui-border); } .sec-theh-contact__agree { grid-column: 1/-1; } .sec-theh-contact__agree-error { margin: var(--spacing-xs) 0 0 3.4rem; color: var(--clr-accent-700); } .sec-theh-contact__agree-error[hidden] { display: none; } .sec-theh-contact { /* === 캡차 === */ } .sec-theh-contact__captcha-row { display: flex; align-items: center; gap: var(--spacing-lg); max-width: 42rem; padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--clr-ui-border); transition: border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); } .sec-theh-contact { /* hover — 언더라인 네이비로 짙어짐(다른 입력과 통일) */ } .sec-theh-contact__captcha-row:hover:not(:focus-within) { border-bottom-color: color-mix(in srgb, var(--clr-primary-900) 55%, var(--clr-ui-border)); } .sec-theh-contact { /* focus — 네이비 언더라인 + inset 박스섀도 강조 */ } .sec-theh-contact__captcha-row:focus-within { border-bottom-color: var(--clr-primary-main); box-shadow: inset 0 -1px 0 0 var(--clr-primary-main); } .sec-theh-contact { /* 보안문자 코드 — 흰 박스 + 테두리 + 이탤릭(시안) */ } .sec-theh-contact__captcha-code { flex: none; padding: 0.6rem 1.8rem; background: var(--clr-base-white); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-sm); color: var(--clr-primary-900); font-style: italic; user-select: none; } .sec-theh-contact__captcha-control { flex: 1 1 auto; min-width: 0; } .sec-theh-contact__captcha-input { width: 100%; border: 0; background: transparent; font-size: var(--form-control-fs); color: var(--clr-text-base); } .sec-theh-contact__captcha-input::placeholder { color: var(--clr-text-aux); } .sec-theh-contact__submit { justify-self: start; margin-top: var(--spacing-sm); } .sec-theh-contact__submit[disabled] { cursor: wait; opacity: 0.72; transform: none; } @media (prefers-reduced-motion: reduce) { .sec-theh-contact__report-figure { animation: none; } .sec-theh-contact__report-figure::after { animation: none; opacity: 0; } .sec-theh-contact__report-img { transition: none; } } @keyframes theh-report-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.6rem); } } @keyframes theh-report-sheen { 0% { transform: translateX(-130%); } 16%, 100% { transform: translateX(130%); } } .sec-theh-location { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 48rem; background: var(--clr-base-white); } .sec-theh-location__map { position: relative; min-height: 48rem; overflow: hidden; background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.42)), repeating-linear-gradient(35deg, transparent 0 4rem, rgba(36, 36, 79, 0.08) 4rem 4.1rem), repeating-linear-gradient(115deg, transparent 0 5.2rem, rgba(197, 145, 65, 0.16) 5.2rem 5.3rem), var(--clr-background-primary); } .sec-theh-location__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .sec-theh-location__pin { position: absolute; top: 48%; left: 48%; display: inline-flex; align-items: center; justify-content: center; min-width: 8rem; min-height: 4rem; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-xs); background: var(--clr-primary-900); color: var(--clr-base-white); box-shadow: 0 1rem 2.8rem rgba(36, 36, 79, 0.24); } .sec-theh-location__panel { position: relative; display: grid; min-width: 0; overflow: hidden; background: var(--clr-base-white); } .sec-theh-location__body { position: relative; z-index: 1; display: grid; align-content: center; gap: var(--spacing-lg); padding: var(--spacing-4xl); } .sec-theh-location__visual { min-width: 0; margin: 0; overflow: hidden; } .sec-theh-location__visual-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .sec-theh-location--background .sec-theh-location__visual { position: absolute; inset: 0; } .sec-theh-location--background .sec-theh-location__visual::after { position: absolute; inset: 0; background: color-mix(in srgb, var(--clr-base-white) 84%, transparent); content: ""; } .sec-theh-location--split .sec-theh-location__panel { grid-template-rows: auto auto; } .sec-theh-location--split .sec-theh-location__visual { order: 2; aspect-ratio: 16/9; } .sec-theh-location__title-line { display: block; margin-bottom: var(--spacing-xs); } .sec-theh-location__title-accent { display: inline; } .sec-theh-location__info { display: grid; gap: var(--spacing-lg); margin-top: var(--spacing-md); } .sec-theh-location__info-row { display: grid; gap: var(--spacing-xxs); } .sec-theh-location__info-label { color: var(--clr-text-sub); } .sec-theh-location__info-value { color: var(--clr-text-base); } .sec-theh-location__cta { justify-self: start; margin-top: var(--spacing-xl); } @media (max-width: 1024px) { .sec-theh-location { grid-template-columns: 1fr; } } .store-map-pin { display: flex; align-items: center; justify-content: center; overflow: visible; pointer-events: none; transform-origin: center bottom; transition: transform 0.16s ease; } .store-map-pin--public { width: 11.2rem; height: 14rem; } .store-map-pin--preview { width: 4rem; height: 4rem; } .store-map-pin--active { transform: scale(1.18); } .store-map-pin__image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } /* ===================================================== home.home-people-grid 다크 배경 + 좌측 텍스트(eyebrow·title·rule·desc·Join) + 우측 4칸 role 카드 그리드. 레이아웃: __inner(88vh) align-items:stretch → 우측 그리드(height:100%, 1fr/1fr)가 4카드로 컬럼을 edge-to-edge 풀 타일 → navy void 제거(2026-06-03 리디자인). 호버는 의도적 예외 — 다크 풀-블리드 카드는 통일 스펙(이미지 zoom + 라벨 색상)만으로는 잠잠해지므로 기존 풍부한 효과(오버레이 전환 + accent bar + 라벨 translateX + 화살표 scale + 이미지 zoom 1.08)를 유지한다. ===================================================== */ .home-people { background: #0c1828; color: #fff; overflow: hidden; } .home-people__inner { display: grid; grid-template-columns: 5fr 7fr; min-height: 88vh; align-items: stretch; } @media (max-width: 1024px) { .home-people__inner { grid-template-columns: 1fr; min-height: auto; } } .home-people__text { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 2.8rem); padding: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 9.6rem) clamp(3.2rem, 2.5889967638vw + 2.2291262136rem, 7.2rem); } .home-people { /* eyebrow — cyan overline. 위계는 마크업 .no-body-xs 가 담당(rule #17 §A); 여기서는 caps 변환 + 토큰 트래킹 + 색만(폰트 size/weight/family/line-height 미지정). */ } .home-people__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-500); margin: 0; } .home-people__title { color: #fff; margin: 0; } .home-people { /* title 하단 accent rule — 정밀 톤 마커 */ } .home-people__rule { display: block; width: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem); height: 2px; background: var(--clr-accent-500); opacity: 0.9; } .home-people__desc { /* 본문 위계(line-height 포함)는 마크업 .no-body-md 가 담당(rule #17 §A). */ color: rgba(255, 255, 255, 0.65); margin: 0; } .home-people { /* Join — People 카드와 성격이 달라 그리드서 분리한 좌측 텍스트 하단 링크 (지시서 §3.4) */ } .home-people__join { margin-top: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); } .home-people { /* 우측 카드 그리드: 1fr/1fr 2×2 auto-placement. height:100% 로 __inner 행을 풀 채움 → navy void 제거. */ } .home-people__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem); height: 100%; } @media (max-width: 1024px) { .home-people__grid { grid-template-rows: auto; height: auto; } } @media (max-width: 544px) { .home-people__grid { grid-template-columns: 1fr; } } .home-people { /* 개별 카드 — Cinematic Reveal (의도적 예외 유지) */ } .home-people__card { position: relative; display: block; height: 100%; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; /* lg 이하 스택 시: 카드가 height:100% 기댈 행이 없어지므로 적정 비율 부여 */ } @media (max-width: 1024px) { .home-people__card { height: auto; aspect-ratio: 16/10; } } .home-people__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--clr-primary-accent); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-base) var(--ease-out-quart); z-index: 2; } .home-people__card:hover::before { transform: scaleY(1); transform-origin: top; } .home-people__card:hover .home-people__card-bg img { transform: scale(1.08); } .home-people__card:hover .home-people__card-overlay { background: linear-gradient(180deg, rgba(8, 18, 32, 0.15) 0%, rgba(8, 18, 32, 0.45) 50%, rgba(8, 18, 32, 0.85) 100%); } .home-people__card:hover .home-people__card-label { /* letter-spacing 호버 효과는 rule #17 §A 위반이라 제거. translateX 만으로도 호버 응답 충분. */ transform: translateX(8px); } .home-people__card:hover .home-people__card-arrow { background: var(--clr-primary-accent); border-color: transparent; transform: translateX(4px) scale(1.05); } .home-people__card:focus-visible { outline: 2px solid var(--clr-primary-accent); outline-offset: -2px; } .home-people__card-bg { position: absolute; inset: 0; } .home-people__card-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.01); transition: transform var(--dur-slow) var(--ease-out-quart); } .home-people__card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 18, 32, 0) 0%, rgba(8, 18, 32, 0.2) 45%, rgba(8, 18, 32, 0.78) 100%); transition: background var(--dur-base) var(--ease-out-quart); } .home-people__card-body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 2.8rem); } .home-people { /* 01–04 인덱스 — cyan 누메랄, 카드 좌상단 */ } .home-people__card-index { align-self: flex-start; color: var(--clr-accent-500); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); } .home-people { /* 라벨 + 화살표 하단 정렬 */ } .home-people__card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); } .home-people__card-label { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); transition: transform var(--dur-base) var(--ease-out-quart); } .home-people__card-arrow { display: flex; align-items: center; justify-content: center; width: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); border-radius: var(--radius-round); background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; flex-shrink: 0; transition: background var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart), transform var(--dur-base) var(--ease-out-quart); } /* ===================================================== home.home-news-bento 좌측 큰 featured 카드 1 + 우측 3개 side stack. 호버 통일: 이미지 zoom(1.04) + 타이틀 → primary-700. ===================================================== */ .home-news { padding: clamp(6rem, 2.5889967638vw + 5.0291262136rem, 10rem) 0; background: var(--clr-background-page); } .home-news__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; } .home-news__title { color: var(--clr-gray-900); margin: 0; } .home-news { /* ── Bento layout ── 좌측 큰 카드 1개 + 우측 3개 stack */ } .home-news--bento .home-news__bento { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem); align-items: stretch; } @media (max-width: 768px) { .home-news--bento .home-news__bento { grid-template-columns: 1fr; } } .home-news__featured { border-radius: 4px; overflow: hidden; background: var(--clr-base-white); } .home-news__featured-link { display: block; color: inherit; } .home-news__featured-img { aspect-ratio: 16/10; overflow: hidden; background: var(--clr-gray-100); } .home-news__featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .home-news__featured-title { color: var(--clr-gray-900); margin: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem) 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); transition: color 0.25s ease; } .home-news__featured-excerpt { color: var(--clr-text-secondary); } .home-news__featured:hover .home-news__featured-img img { transform: scale(1.04); } .home-news__featured:hover .home-news__featured-title { color: var(--clr-primary-700); } .home-news__side { display: flex; flex-direction: column; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); } .home-news__side-card { background: var(--clr-base-white); border-top: 1px solid var(--clr-ui-border); padding: clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.2rem) 0 0; } .home-news__side-card .ui-card__title { transition: color 0.25s ease; } .home-news__side-card:hover .ui-card__title { color: var(--clr-primary-700); } .home-news__side-link { display: block; color: inherit; } /* ===================================================== home.home-news-carousel Latest News 가로 Swiper 캐러셀. 카드 4장 노출 + 우측 peek (slidesPerView 는 JS 가 담당). 호버 통일: 이미지 zoom(1.04) + 타이틀 → primary-700. 절대 규칙 #17: 타이포 위계는 마크업 .no-* 유틸로만, 본 파일은 layout/grid/색상/spacing 만. ===================================================== */ .home-news-carousel { /* 섹션 상하 padding 은 마크업 .no-section-lg 가 담당 (rule #17 §B). */ background: #fff; /* &__head : 헤더-본문 간격은 마크업 .no-mg-2xl--b 가 담당, 별도 SCSS 없음. */ } .home-news-carousel__title { color: var(--clr-gray-900); margin: 0; } .home-news-carousel__stage.swiper { /* peek 효과: 우측 가장자리 다음 카드 노출 허용. 컨테이너(.no-container-xl) 가 오른쪽을 클립하지 않으므로 Swiper 측 overflow:hidden 기본값을 풀어준다. */ overflow: visible; } .home-news-carousel__card { display: flex; flex-direction: column; gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); text-decoration: none; color: inherit; height: auto; } .home-news-carousel__card:hover .home-news-carousel__card-img img { transform: scale(1.04); } .home-news-carousel__card:hover .home-news-carousel__card-title { color: var(--clr-primary-700); } .home-news-carousel__card-img { overflow: hidden; border-radius: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.4rem); aspect-ratio: 4/3; } .home-news-carousel__card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .home-news-carousel__card-title { color: var(--clr-gray-900); transition: color 0.25s ease; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; } .home-news-carousel__card-date { color: var(--clr-primary-700); } .home-news-carousel__foot { /* 본문-푸터 간격은 마크업 .no-mg-2xl--t 가 담당. */ display: flex; justify-content: space-between; align-items: center; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); flex-wrap: wrap; } .home-news-carousel__nav { display: flex; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } .home-news-carousel__nav-btn { width: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); height: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); border-radius: 50%; border: 1px solid var(--clr-gray-300); background: transparent; color: var(--clr-gray-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .home-news-carousel__nav-btn:hover { border-color: var(--clr-primary-700); color: var(--clr-primary-700); } .home-news-carousel__nav-btn:focus-visible { outline: 2px solid var(--clr-primary-700); outline-offset: 2px; } .home-news-carousel__nav-btn.swiper-button-disabled { opacity: 0.35; cursor: not-allowed; } /* ===================================================== home.home-events-bento 좌측 대형 featured 1 + 우측 2x3 그리드 6. 호버 통일: 이미지 zoom(1.04) + 타이틀 → primary-700. ===================================================== */ .home-events { padding: clamp(6rem, 2.5889967638vw + 5.0291262136rem, 10rem) 0; background: #fff; } .home-events__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.6rem; } .home-events__title { color: var(--clr-gray-900); margin: 0; } .home-events__layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem); align-items: start; } @media (max-width: 768px) { .home-events__layout { grid-template-columns: 1fr; } } .home-events__featured { display: flex; flex-direction: column; gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); text-decoration: none; color: inherit; } .home-events__featured:hover .home-events__featured-img img { transform: scale(1.04); } .home-events__featured:hover .home-events__featured-title { color: var(--clr-primary-700); } .home-events__featured-img { overflow: hidden; border-radius: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.4rem); aspect-ratio: 4/3; } .home-events__featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .home-events__featured-title { color: var(--clr-gray-900); transition: color 0.25s ease; } .home-events__featured-date { color: var(--clr-text-secondary); display: flex; align-items: center; gap: 0.6rem; } .home-events__featured-date i { color: var(--clr-primary-700); font-size: 1.2rem; } .home-events__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); } @media (max-width: 544px) { .home-events__grid { grid-template-columns: 1fr; gap: var(--spacing-2xl); } } .home-events__item { display: flex; flex-direction: column; gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); text-decoration: none; color: inherit; } .home-events__item:hover .home-events__item-img img { transform: scale(1.04); } .home-events__item:hover .home-events__item-title { color: var(--clr-primary-700); } .home-events__item-img { overflow: hidden; border-radius: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); aspect-ratio: 4/3; } .home-events__item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .home-events__item-title { color: var(--clr-gray-900); transition: color 0.25s ease; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; } .home-events__item-date { color: var(--clr-text-secondary); } /* ===================================================== home.home-events-featured Row1: lead 1 + small 2 (3-col, 동일 행/동일 높이) Row2: small 4 (4-col) 호버 통일: 이미지 zoom(1.04) + 타이틀 → primary-700. 타이포 위계는 마크업 .no-* 유틸로만 (규칙 #17). ===================================================== */ .home-events-featured { /* 섹션 상하 padding 은 마크업 .no-section-lg 가 담당 (rule #17 §B). */ /* 배경은 마크업 .no-bg--* 유틸이 담당 ($bgClass prop). 기본값 = .no-bg--paper. */ } .home-events-featured__head { /* 헤더-본문 간격은 마크업 .no-mg-2xl--b 가 담당. */ display: flex; align-items: flex-end; justify-content: space-between; gap: 1.6rem; } .home-events-featured__title { color: var(--clr-gray-900); margin: 0; } .home-events-featured__row { display: grid; align-items: stretch; } .home-events-featured__row--hero { grid-template-columns: 2fr 1fr 1fr; gap: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem); } @media (max-width: 768px) { .home-events-featured__row--hero { grid-template-columns: 1fr 1fr; } } @media (max-width: 544px) { .home-events-featured__row--hero { grid-template-columns: 1fr; } } .home-events-featured__row--grid { /* row 간 간격은 마크업 .no-mg-xl--t 가 담당. */ grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } @media (max-width: 768px) { .home-events-featured__row--grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .home-events-featured__row--grid { grid-template-columns: 1fr; } } .home-events-featured__card { display: flex; flex-direction: column; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); text-decoration: none; color: inherit; height: 100%; } .home-events-featured__card:hover .home-events-featured__media img { transform: scale(1.04); } .home-events-featured__card:hover .home-events-featured__card-title { color: var(--clr-primary-700); } @media (max-width: 768px) { .home-events-featured__card--lead { grid-column: 1/-1; } } .home-events-featured__media { overflow: hidden; border-radius: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); aspect-ratio: 4/3; } .home-events-featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .home-events-featured__card--lead .home-events-featured__media { border-radius: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.4rem); } .home-events-featured__card-title { color: var(--clr-gray-900); transition: color 0.25s ease; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; } .home-events-featured__card-date { color: var(--clr-primary-700); display: flex; align-items: center; gap: 0.6rem; /* 캘린더 아이콘은 부모 .no-body-xs 폰트 사이즈 상속 (rule #17 §A). */ } .home-events-featured__card-date i { color: var(--clr-primary-700); } /* ===================================================== home.home-research-tg-list 좌측 sticky sub-nav + 우측 TG 이미지+텍스트 행 리스트. 호버 통일: 이미지 zoom(1.04) + TG name → primary-700. ===================================================== */ .home-research { /* 섹션 상하 padding 은 마크업 .no-section-lg 가 담당 (rule #17 §B). */ background: var(--clr-background-page); } .home-research__title { /* 타이틀-본문 간격은 마크업 .no-mg-2xl--b 가 담당. */ color: var(--clr-gray-900); } .home-research__layout { display: grid; grid-template-columns: clamp(14rem, 3.8834951456vw + 12.5436893204rem, 20rem) 1fr; gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem); align-items: start; } @media (max-width: 768px) { .home-research__layout { grid-template-columns: 1fr; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } } .home-research__nav { position: sticky; top: clamp(10rem, 1.2944983819vw + 9.5145631068rem, 12rem); } @media (max-width: 768px) { .home-research__nav { position: static; } } .home-research__nav ul { display: flex; flex-direction: column; border-left: 2px solid var(--clr-gray-200); } @media (max-width: 768px) { .home-research__nav ul { flex-direction: row; flex-wrap: wrap; border-left: none; border-bottom: 2px solid var(--clr-gray-200); } } .home-research__nav-item { display: block; padding: clamp(0.9rem, 0.2588996764vw + 0.8029126214rem, 1.3rem) clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); color: var(--clr-text-secondary); text-decoration: none; border: none; background: none; font: inherit; cursor: pointer; text-align: left; border-left: 2px solid transparent; margin-left: -2px; transition: color 0.2s, border-color 0.2s; } .home-research__nav-item:hover { color: var(--clr-gray-900); } .home-research__nav-item--active { color: var(--clr-primary-900); border-left-color: var(--clr-primary-900); } @media (max-width: 768px) { .home-research__nav-item { border-left: none; margin-left: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: clamp(0.8rem, 0.1941747573vw + 0.727184466rem, 1.1rem) clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); } .home-research__nav-item--active { border-bottom-color: var(--clr-primary-900); border-left-color: transparent; } } .home-research__tg-list { display: flex; flex-direction: column; } .home-research__tg { display: grid; grid-template-columns: clamp(27rem, 9.7087378641vw + 23.359223301rem, 42rem) 1fr; gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); align-items: center; padding: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); border-bottom: 1px solid var(--clr-gray-200); text-decoration: none; color: inherit; } .home-research__tg:last-child { border-bottom: 1px solid transparent; } .home-research__tg:hover .home-research__tg-img .no-auto-cover__img { transform: scale(1.04); } .home-research__tg:hover .home-research__tg-name a { color: var(--clr-primary-700); } @media (max-width: 544px) { .home-research__tg { grid-template-columns: 1fr; } } .home-research__tg-img { border-radius: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); overflow: hidden; /* render_image()가 반환하는
    가 cover를 담당. 이중 컨테이너 충돌 방지를 위해 aspect-ratio / img 직접 스타일은 제거. */ } .home-research__tg-img .no-auto-cover { width: 100%; display: block; } .home-research__tg-img .no-auto-cover__img { transition: transform 0.4s ease; } .home-research__tg-body { display: flex; flex-direction: column; gap: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); align-items: flex-start; } .home-research__tg-body > .ui-cta { margin-top: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); } .home-research__tg-name { color: var(--clr-gray-900); } .home-research__tg-name a { color: inherit; text-decoration: none; transition: color 0.25s ease; } .home-research__tg-id { color: var(--clr-primary-700); } .home-research__tg-desc { /* 본문 위계(line-height 포함)는 마크업 .no-body-sm 가 담당 (rule #17 §A). */ color: var(--clr-text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; } .home-research { /* ── panels wrapper ─────────────────────────────── */ } .home-research__panels { min-width: 0; } .home-research { /* AOS가 hidden 속성을 무시하므로 CSS 클래스로 숨김 처리. !important 로 AOS transform/opacity 우선순위 차단. */ } .home-research__panel--hidden { display: none !important; } .home-research { /* ── Publication panel ──────────────────────────── */ } .home-research__pub-list { display: flex; flex-direction: column; } .home-research__pub { display: flex; flex-direction: column; gap: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem); padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); border-bottom: 1px solid var(--clr-gray-200); } .home-research__pub:last-child { border-bottom: 1px solid transparent; } .home-research__pub-meta { /* 위계는 마크업 .no-body-xs 담당 (rule #17 §A). */ display: flex; flex-wrap: wrap; gap: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem); color: var(--clr-text-secondary); } .home-research__pub-year { color: var(--clr-primary-700); font-weight: 600; } .home-research__pub-sep { color: var(--clr-gray-400); } .home-research__pub-title { /* 위계는 마크업 .no-heading-xs 담당 (rule #17 §A). */ color: var(--clr-gray-900); } .home-research__pub-title a { color: inherit; text-decoration: none; transition: color 0.2s; } .home-research__pub-title a:hover { color: var(--clr-primary-700); } .home-research__pub-doi { /* 위계는 마크업 .no-body-xs 담당. */ color: var(--clr-text-secondary); } .home-research__pub-doi a { color: var(--clr-primary-700); text-decoration: underline; text-underline-offset: 2px; } .home-research__pub-doi a:hover { color: var(--clr-primary-900); } /* Research — TG Overview (2026-06-05 신설) */ .sec-tg-overview { background: var(--clr-bg-page); } .sec-tg-overview__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); align-items: center; } @media (max-width: 768px) { .sec-tg-overview__grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } } .sec-tg-overview__copy { /* layout only — typography via .no-* utilities */ } .sec-tg-overview__eyebrow { color: var(--clr-primary-700); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-tg-overview__heading { color: var(--clr-text-primary); } .sec-tg-overview__heading::after { content: ""; display: block; width: 4.8rem; height: 2px; margin-top: var(--spacing-md); background: var(--clr-primary-900); } .sec-tg-overview__body { display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-tg-overview__body p { color: var(--clr-text-secondary); } .sec-tg-overview__media { overflow: hidden; border-radius: var(--radius-md); background: var(--clr-primary-50); } .sec-tg-overview__diagram { background: transparent; } /* Research — CP Overview + CP List (2026-06-05 신설, Rule #19) */ .sec-cp-overview { background: var(--clr-bg-page); } .sec-cp-overview__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); align-items: center; } @media (max-width: 768px) { .sec-cp-overview__grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } } .sec-cp-overview__copy { /* layout only — typography via .no-* utilities */ } .sec-cp-overview__eyebrow { display: inline-flex; align-items: center; gap: var(--spacing-sm); color: var(--clr-primary-700); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-cp-overview__eyebrow::before { content: ""; display: inline-block; width: 3px; height: 1.2em; background: var(--clr-primary-400); border-radius: 2px; flex-shrink: 0; } .sec-cp-overview__heading { color: var(--clr-text-primary); } .sec-cp-overview__heading::after { content: ""; display: block; width: 4.8rem; height: 2px; margin-top: var(--spacing-md); background: var(--clr-primary-900); } .sec-cp-overview__body { display: flex; flex-direction: column; gap: var(--spacing-md); max-width: 54ch; } .sec-cp-overview__body p { color: var(--clr-text-secondary); } .sec-cp-overview__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); } @media (max-width: 544px) { .sec-cp-overview__stats { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } } .sec-cp-overview__stat { display: flex; flex-direction: column; gap: var(--spacing-xs); padding-top: var(--spacing-md); border-top: 2px solid var(--clr-primary-100); } .sec-cp-overview__stat-value { color: var(--clr-primary-900); line-height: 1; } .sec-cp-overview__stat-label { color: var(--clr-text-secondary); } .sec-cp-overview__media { overflow: hidden; border-radius: var(--radius-md); background: var(--clr-primary-50); } .sec-cp-overview__diagram { background: transparent; } .sec-cp-list { background: var(--clr-base-white); } .sec-cp-list__head { border-top: 1px solid var(--clr-gray-300); padding-top: var(--spacing-xl); } .sec-cp-list__eyebrow { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-cp-list__list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--spacing-3xl); row-gap: var(--spacing-2xl); } @media (max-width: 768px) { .sec-cp-list__list { grid-template-columns: 1fr; } } .sec-cp-list__item { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--spacing-xl); align-items: start; } @media (max-width: 544px) { .sec-cp-list__item { grid-template-columns: 1fr; } } .sec-cp-list__media { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--clr-gray-100); } .sec-cp-list__media img, .sec-cp-list__media .no-auto-cover { width: 100%; height: 100%; } .sec-cp-list__media .no-auto-cover__img { object-fit: cover; transition: transform 0.4s ease; } .sec-cp-list__media:hover .no-auto-cover__img { transform: scale(1.04); } .sec-cp-list__body { color: var(--clr-text-primary); } .sec-cp-list__body p { color: var(--clr-text-secondary); } .sec-cp-list__item-eyebrow { color: var(--clr-primary-700); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .sec-cp-list__item-title { color: var(--clr-text-primary); } .sec-cp-list__item-id { color: var(--clr-primary-700); font-weight: 700; } .sec-cp-list__item-name { color: var(--clr-text-primary); } /* Search (2026-06-05 신설 — search-bar 섹션 추출, Rule #19) */ /* =================================================== sec-search-bar — 검색 결과 페이지 재검색 바 View: resources/views/sections/search/search-bar.php Rule #17 — layout/border/shadow 만. font·spacing 는 유틸 또는 토큰만. =================================================== */ .sec-search-bar__form { display: flex; align-items: center; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); padding: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem) clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem) clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-round); background: var(--clr-base-white); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); transition: border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); } .sec-search-bar__form:focus-within { border-color: var(--clr-primary-900); box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.08); } .sec-search-bar__form .ui-search-input { flex: 1; min-width: 0; } @media (max-width: 544px) { .sec-search-bar__form { flex-direction: column; align-items: stretch; border-radius: var(--radius-md); } .sec-search-bar__form .ui-cta { justify-content: center; } } /* Learning — callout text band (2026-06-05 신설, Rule #19) */ .sec-callout-text-band { background: var(--clr-primary-50); padding: clamp(5.6rem, 2.5889967638vw + 4.6291262136rem, 9.6rem) 0; text-align: center; } .sec-callout-text-band__text { max-width: 76rem; margin: 0 auto; color: var(--clr-text-primary); line-height: 1.85; } .sec-callout-text-band--bg-white { background: #fff; } /* Research — 사이드컬럼 Resources (2026-06-05 신설, sitemap §3.2) */ /* =================================================== sec-research-side — Research 섹션 사이드컬럼 sitemap §3.2 "Side column (supporting assets)" 구현 =================================================== */ .sec-research-side { padding: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: #fff; } .sec-research-side__label { display: block; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-text-secondary); padding-bottom: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); margin-bottom: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); border-bottom: 1px solid var(--clr-gray-200); } .sec-research-side__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .sec-research-side__item { border-bottom: 1px solid var(--clr-gray-100); } .sec-research-side__item:last-child { border-bottom: none; } .sec-research-side__link { display: flex; flex-direction: column; gap: 0.3rem; padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) 0; text-decoration: none; color: inherit; transition: color 0.2s ease; } .sec-research-side__link:hover .sec-research-side__link-label, .sec-research-side__link:focus-visible .sec-research-side__link-label { color: var(--clr-primary-700); } .sec-research-side__link.is-active .sec-research-side__link-label { color: var(--clr-primary-700); font-weight: 700; } .sec-research-side__link-label { font-weight: 600; color: var(--clr-text-primary); line-height: 1.4; transition: color 0.2s ease; } .sec-research-side__link-desc { color: var(--clr-text-secondary); line-height: 1.5; } /* Research — OA-SDL 개요 섹션 (2026-06-05 신설, 밝은 배경) */ /* =================================================== sec-oasdl-overview — OA-SDL 상단 개요 섹션 밝은 배경 + stat bar + 2컬럼 소개 =================================================== */ .sec-oasdl-overview { background: var(--clr-bg-page); padding: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem) 0; } .sec-oasdl-overview__stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--clr-primary-900); border-bottom: 1px solid var(--clr-gray-200); } @media (max-width: 768px) { .sec-oasdl-overview__stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 544px) { .sec-oasdl-overview__stats { grid-template-columns: repeat(2, 1fr); } } .sec-oasdl-overview__stat { display: flex; flex-direction: column; gap: 0.4rem; padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); border-right: 1px solid var(--clr-gray-200); } .sec-oasdl-overview__stat:last-child { border-right: none; } @media (max-width: 768px) { .sec-oasdl-overview__stat:nth-child(3) { border-right: none; } .sec-oasdl-overview__stat:nth-child(4) { border-right: 1px solid var(--clr-gray-200); } } @media (max-width: 544px) { .sec-oasdl-overview__stat:nth-child(2n) { border-right: none; } .sec-oasdl-overview__stat:nth-child(2n+1):not(:last-child) { border-right: 1px solid var(--clr-gray-200); } } .sec-oasdl-overview__stat-value { color: var(--clr-primary-900); font-weight: 700; line-height: 1; } .sec-oasdl-overview__stat-label { font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--clr-text-secondary); } .sec-oasdl-overview__grid { display: grid; grid-template-columns: 4fr 6fr; gap: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem); align-items: start; } @media (max-width: 768px) { .sec-oasdl-overview__grid { grid-template-columns: 1fr; gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); } } .sec-oasdl-overview__eyebrow { font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--clr-primary-700); } .sec-oasdl-overview__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); } .sec-oasdl-overview__bullet-item { display: flex; align-items: baseline; gap: 0.8rem; color: var(--clr-text-primary); line-height: 1.6; } .sec-oasdl-overview__bullet-item::before { content: ""; display: inline-block; flex-shrink: 0; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--clr-primary-700); margin-top: 0.1em; } .sec-oasdl-overview__body p { color: var(--clr-text-secondary); line-height: 1.8; } .sec-oasdl-overview__actions { display: flex; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); flex-wrap: wrap; } /* WHO WE ARE — 전용 시그니처 섹션 4종 (2026-07-13 신설, /about/who-we-are) */ /** * sec-wwa-hero — WHO WE ARE §1 (layout/position/color only, #17). * 레이어: 배경 그라디언트(z0) → 초대형 1줄 마키(z0) → noise 오버레이(z1) → * 중앙 다크 스크림(z1) → 인트로 카피(z2, 최상단). */ .sec-wwa-hero { position: relative; height: 100vh; min-height: 100vh; } @supports (height: 100svh) { .sec-wwa-hero { height: 100svh; min-height: 100svh; } } .sec-wwa-hero { overflow: hidden; background: linear-gradient(150deg, #1a1a3a 0%, var(--clr-primary-900) 55%, #0c1636 100%); color: var(--clr-base-white); display: flex; align-items: center; /* 중앙 다크 스크림 — 마키 위에 깔아 카피 가독성 확보 (noise 아래/카피 위 사이) */ } .sec-wwa-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(9, 14, 34, 0.18) 0%, rgba(9, 14, 34, 0.72) 44%, rgba(9, 14, 34, 0.44) 68%, rgba(9, 14, 34, 0.08) 100%), radial-gradient(circle at 48% 50%, rgba(9, 14, 34, 0.82) 0%, rgba(9, 14, 34, 0.54) 28%, transparent 58%); pointer-events: none; } .sec-wwa-hero { /* (1) 초대형 1줄 마키 — 높이 꽉 채움 */ } .sec-wwa-hero__marquee { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; overflow: hidden; } .sec-wwa-hero__marquee .marquee-whisper__track { align-items: center; min-height: 100%; } .sec-wwa-hero__marquee { /* #17 예외 — 장식용 풀블리드 초대형 타입(높이 기준 뷰포트 단위). */ } .sec-wwa-hero__marquee .marquee-whisper__set { font-size: 112vh; } @supports (font-size: 112svh) { .sec-wwa-hero__marquee .marquee-whisper__set { font-size: 112svh; } } .sec-wwa-hero__marquee .marquee-whisper__set { line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: 0; color: rgba(197, 145, 65, 0.58); padding-right: 0; } .sec-wwa-hero { /* (2) 노이즈 오버레이 */ } .sec-wwa-hero__noise { position: absolute; inset: 0; z-index: 1; background-image: url("/assets/images/sub/noise.png"); background-repeat: repeat; opacity: 0.4; mix-blend-mode: overlay; pointer-events: none; } .sec-wwa-hero { /* (3) 인트로 카피 — 최상단 */ } .sec-wwa-hero__inner { position: relative; z-index: 2; width: 100%; display: flex; justify-content: flex-end; } .sec-wwa-hero__copy { max-width: 60rem; text-align: left; display: flex; flex-direction: column; gap: var(--spacing-md); margin-right: clamp(var(--spacing-2xl), 10vw, 18rem); } @media (max-width: 768px) { .sec-wwa-hero__copy { max-width: none; text-align: left; margin-right: 0; } } .sec-wwa-hero__lines { display: flex; flex-direction: column; gap: 0.35em; margin: 0; color: var(--clr-base-white); font-weight: 500; } .sec-wwa-hero__line { display: block; } .sec-wwa-hero__mark { background: var(--clr-base-white); color: var(--clr-accent-700); font-weight: 700; padding: 0 0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /** * sec-wwa-horizon — WHO WE ARE §2 (layout/position/color only, #17). * 기본: 세로 흐름(그레이스풀). .is-immersive(JS): 핀 + clip 마스크 스택. */ .sec-wwa-horizon { position: relative; background: var(--clr-bg-section); color: var(--clr-text-base); } .sec-wwa-horizon__stage { position: relative; padding-block: var(--section-xl); } .sec-wwa-horizon__eyebrow { text-align: center; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--clr-accent-700); margin-bottom: var(--section-lg); } .sec-wwa-horizon__slides { position: relative; display: flex; flex-direction: column; gap: var(--section-xl); } .sec-wwa-horizon__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(24rem, 16vw, 32rem); width: 100%; max-width: 160rem; margin: 0 auto; padding-inline: var(--gutter); } @media (max-width: 768px) { .sec-wwa-horizon__grid { grid-template-columns: 1fr; justify-items: center; gap: var(--spacing-lg); } } .sec-wwa-horizon__ko { justify-self: end; font-weight: 700; white-space: nowrap; color: var(--clr-text-base); } @media (max-width: 768px) { .sec-wwa-horizon__ko { justify-self: center; } } .sec-wwa-horizon__en { justify-self: start; font-weight: 700; letter-spacing: var(--tracking-display); color: var(--clr-accent-500); } @media (max-width: 768px) { .sec-wwa-horizon__en { justify-self: center; } } .sec-wwa-horizon__media { width: min(47rem, 30vw); aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: var(--radius-xs); box-shadow: 0 3rem 6rem -3rem rgba(22, 22, 47, 0.5); } .sec-wwa-horizon__media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 768px) { .sec-wwa-horizon__media { width: min(40rem, 82vw); } } .sec-wwa-horizon__caption { text-align: center; color: var(--clr-text-sub); margin-top: var(--section-md); } .sec-wwa-horizon__progress { display: none; } .sec-wwa-horizon__dot { width: 0.8rem; height: 0.8rem; border-radius: var(--radius-round); background: var(--clr-ui-border); transition: background 0.3s ease, transform 0.3s ease; } .sec-wwa-horizon__dot.is-active { background: var(--clr-accent-500); transform: scale(1.35); } .sec-wwa-horizon { /* ================= IMMERSIVE (JS 가 .is-immersive 부착) ================= */ } .sec-wwa-horizon.is-immersive .sec-wwa-horizon__stage { height: 100vh; } @supports (height: 100svh) { .sec-wwa-horizon.is-immersive .sec-wwa-horizon__stage { height: 100svh; } } .sec-wwa-horizon.is-immersive .sec-wwa-horizon__stage { padding-block: 0; display: grid; align-content: center; overflow: hidden; } .sec-wwa-horizon.is-immersive .sec-wwa-horizon__eyebrow { position: absolute; top: calc(var(--header-height, 10rem) + var(--spacing-5xl) + var(--spacing-xl)); left: 0; right: 0; margin: 0; } .sec-wwa-horizon.is-immersive .sec-wwa-horizon__slides { position: relative; display: block; height: 62vh; transform: translateY(var(--spacing-4xl)); } .sec-wwa-horizon.is-immersive .sec-wwa-horizon__slide { position: absolute; inset: 0; display: grid; align-content: center; gap: var(--spacing-4xl); will-change: clip-path; /* 불투명 배경 → clip wipe 시 이전 슬라이드를 완전히 덮어 텍스트 겹침 방지(깔끔한 마스크). */ background: var(--clr-bg-section); } .sec-wwa-horizon.is-immersive .sec-wwa-horizon__caption { margin-top: 0; } .sec-wwa-horizon.is-immersive .sec-wwa-horizon__progress { display: flex; gap: var(--spacing-sm); justify-content: center; position: absolute; left: 0; right: 0; bottom: calc(var(--header-height, 10rem) * 0.4 + var(--spacing-xl)); } /** * sec-wwa-signature — WHO WE ARE §3 (layout/position/color only, #17). * 기본(비몰입/모바일): 카드·워드마크·CTA 세로 흐름(그레이스풀, 골드 노출). * .is-immersive(JS): 핀 시작상태 = 중앙에 카드 3장 파일(위 카드가 앞) + 초대형 다크 워드마크. * 스크롤 시 카드가 위로 하나씩 떠나고, 마지막에 워드마크 scale 축소 + 골드(sub/gold- * background.jpg) text-clip 리빌. * * ⚠ 카드 pile offset(-1.2rem, -0.6rem, scale-0.04, rotate -12/7/15)·START_SCALE(2.6)은 컨트롤러 상수와 동기. */ .sec-wwa-signature { position: relative; overflow: hidden; background: var(--clr-base-white); color: var(--clr-text-base); } .sec-wwa-signature__stage { position: relative; padding-block: var(--section-md); } .sec-wwa-signature { /* --- 상단 헤더(항상 노출) --- */ } .sec-wwa-signature__head { position: relative; z-index: 4; text-align: center; display: flex; flex-direction: column; gap: var(--spacing-sm); } .sec-wwa-signature__eyebrow { color: var(--clr-accent-700); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-wwa-signature__title { color: var(--clr-text-base); margin: 0; } .sec-wwa-signature { /* --- (C) 배경 워드마크 (골드 text-clip) --- */ } .sec-wwa-signature__wordmark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; pointer-events: none; overflow: visible; } .sec-wwa-signature__wordmark-text { white-space: nowrap; letter-spacing: var(--tracking-display); transform-origin: center center; will-change: transform; max-width: min(92vw, 172rem); /* 골드 포일 텍스처(sub/gold-background.jpg) + 그라디언트 폴백. */ background-image: url("/assets/images/sub/gold-background.jpg"), linear-gradient(118deg, var(--clr-accent-700), var(--clr-accent-300), var(--clr-accent-500), var(--clr-accent-700)); background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; /* 기본 = 골드 노출 (그레이스풀 종료상태) */ -webkit-text-fill-color: transparent; color: transparent; transition: -webkit-text-fill-color 0.55s ease, color 0.55s ease; } .sec-wwa-signature { /* --- (A) 카드 파일 (중앙, 위 카드가 앞) --- */ } .sec-wwa-signature__cards { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; } .sec-wwa-signature__card { grid-area: 1/1; width: min(42rem, 86vw); min-height: min(44rem, 58vh); padding: var(--spacing-3xl) var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: var(--spacing-md); background: var(--clr-base-white); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-md); box-shadow: 0 4rem 8rem -3rem rgba(22, 22, 47, 0.45); /* 파일 오프셋: 뒤 카드는 위로·좌로 살짝 + 축소. z-index 는 0번(맨 위)이 앞. */ transform: translateY(calc(var(--card-index) * -1.2rem)) translateX(calc(var(--card-index) * -0.6rem)) rotate(var(--card-rotate, 0deg)) scale(calc(1 - var(--card-index) * 0.04)); z-index: calc(9 - var(--card-index)); } .sec-wwa-signature__card:nth-child(1) { --card-rotate: -12deg; } .sec-wwa-signature__card:nth-child(2) { --card-rotate: 7deg; } .sec-wwa-signature__card:nth-child(3) { --card-rotate: 15deg; } .sec-wwa-signature__card-no { color: var(--clr-accent-500); font-weight: 700; } .sec-wwa-signature__card-mark { color: var(--clr-primary-500); display: inline-flex; align-items: center; justify-content: center; width: clamp(4.8rem, 4vw, 6.4rem); height: clamp(4.8rem, 4vw, 6.4rem); } .sec-wwa-signature__lord-icon { display: block; width: 100%; height: 100%; } .sec-wwa-signature__card-title { color: var(--clr-text-base); margin: 0; } .sec-wwa-signature__card-desc { color: var(--clr-text-sub); margin: 0; max-width: 30rem; } .sec-wwa-signature { /* --- (C) CTA --- */ } .sec-wwa-signature__cta { position: absolute; left: 0; right: 0; bottom: var(--section-lg); z-index: 3; display: flex; justify-content: center; } .sec-wwa-signature { /* ================ IMMERSIVE START-STATE (JS 부착) ================ */ } .sec-wwa-signature.is-immersive { --wwa-sig-head-top: calc(var(--header-height, 10rem) + var(--spacing-2xl)); --wwa-sig-cta-bottom: calc(var(--section-lg) + var(--spacing-xl)); } .sec-wwa-signature.is-immersive .sec-wwa-signature__stage { height: 100vh; } @supports (height: 100svh) { .sec-wwa-signature.is-immersive .sec-wwa-signature__stage { height: 100svh; } } .sec-wwa-signature.is-immersive .sec-wwa-signature__stage { padding-block: 0; } .sec-wwa-signature.is-immersive .sec-wwa-signature__head { position: absolute; top: var(--wwa-sig-head-top); left: 0; right: 0; } .sec-wwa-signature.is-immersive { /* 카드는 base pile 그대로 보이게 두고(위 규칙), JS 가 onUpdate 로 위로 하나씩 내보냄. */ } .sec-wwa-signature.is-immersive .sec-wwa-signature__wordmark-text { transform: scale(2.6); -webkit-text-fill-color: var(--clr-text-base); color: var(--clr-text-base); } .sec-wwa-signature.is-immersive .sec-wwa-signature__cta { bottom: var(--wwa-sig-cta-bottom); opacity: 0; } .sec-wwa-signature { /* JS 가 워드마크에 .is-revealed → 골드 리빌 (immersive 다크상태보다 우선) */ } .sec-wwa-signature.is-immersive .sec-wwa-signature__wordmark-text.is-revealed { -webkit-text-fill-color: transparent; color: transparent; } .sec-wwa-signature { /* background-clip:text 미지원 → 클립 제거 + 플랫 골드 (항상 가독) */ } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .sec-wwa-signature__wordmark-text { background: none; -webkit-text-fill-color: currentColor; color: var(--clr-accent-500); } } .sec-wwa-signature { /* ================ 모바일/정적 (핀 없음) ================ */ } @media (max-width: 768px) { .sec-wwa-signature__stage { padding-block: var(--section-sm); } .sec-wwa-signature__head { margin-bottom: var(--spacing-2xl); } .sec-wwa-signature__wordmark { position: relative; inset: auto; margin-block: var(--spacing-2xl); } .sec-wwa-signature__wordmark-text { transform: none; white-space: normal; text-align: center; } .sec-wwa-signature__cards { position: relative; inset: auto; display: flex; flex-direction: column; gap: var(--spacing-lg); pointer-events: auto; } .sec-wwa-signature__card { position: relative; grid-area: auto; width: auto; min-height: auto; transform: none; box-shadow: 0 2rem 4rem -2rem rgba(22, 22, 47, 0.3); } .sec-wwa-signature__cta { position: relative; inset: auto; margin-top: var(--spacing-2xl); } } /** * sec-wwa-specialty — WHO WE ARE §4 (layout/position/color only, #17). * 배경: sub/special-background.jpg + 블랙 오버레이(52%)로 가독성 확보. * 좌: 헤더 / 우: 4행 스탯(라벨│대형 값, 세로 구분선 + 가로 구분선). */ .sec-wwa-specialty { position: relative; overflow: hidden; background: var(--clr-primary-950); color: var(--clr-base-white); } .sec-wwa-specialty__bg { position: absolute; inset: 0; z-index: 0; background-image: url("/assets/images/sub/special-background.jpg"); background-size: cover; background-position: center; pointer-events: none; /* 블랙 오버레이 40~60% → 글자 가독성 */ } .sec-wwa-specialty__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.52); } .sec-wwa-specialty__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(30rem, 38%) 1fr; gap: var(--section-lg) clamp(9.6rem, 6.213592233vw + 7.2699029126rem, 19.2rem); align-items: start; } @media (max-width: 1320px) { .sec-wwa-specialty__inner { grid-template-columns: 1fr; gap: var(--section-md); } } .sec-wwa-specialty__head { display: flex; flex-direction: column; gap: var(--spacing-md); } .sec-wwa-specialty__eyebrow { color: var(--clr-accent-300); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .sec-wwa-specialty__title { color: var(--clr-base-white); margin: 0; } .sec-wwa-specialty__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .sec-wwa-specialty__row { display: grid; grid-template-columns: 1fr 40rem; align-items: center; padding-block: var(--spacing-xl); border-top: 1px solid rgba(255, 255, 255, 0.18); } .sec-wwa-specialty__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); } @media (max-width: 1024px) { .sec-wwa-specialty__row { grid-template-columns: minmax(0, 1fr) minmax(14rem, auto); gap: var(--spacing-lg); } } @media (max-width: 544px) { .sec-wwa-specialty__row { grid-template-columns: 1fr; gap: var(--spacing-sm); } } .sec-wwa-specialty__label { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .sec-wwa-specialty__label-title { color: var(--clr-base-white); } .sec-wwa-specialty__label-sub { color: rgba(255, 255, 255, 0.6); } .sec-wwa-specialty__value { text-align: right; color: var(--clr-base-white); line-height: 1; white-space: nowrap; min-width: 0; overflow-wrap: anywhere; border-left: 1px solid rgba(255, 255, 255, 0.18); padding-left: var(--spacing-2xl); } @media (max-width: 1024px) { .sec-wwa-specialty__value { justify-self: end; } } @media (max-width: 768px) { .sec-wwa-specialty__value { white-space: normal; } } @media (max-width: 544px) { .sec-wwa-specialty__value { text-align: left; border-left: 0; padding-left: 0; justify-self: start; } } /** * WHY THE H page sections — layout/position/color only, typography via no-* utilities. */ .sec-why-h-hero { position: relative; min-height: 100vh; } @supports (min-height: 100svh) { .sec-why-h-hero { min-height: 100svh; } } .sec-why-h-hero { overflow: hidden; color: var(--clr-base-white); background: var(--clr-primary-950); } .sec-why-h-hero__bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 9, 28, 0.9), rgba(11, 24, 54, 0.68) 45%, rgba(3, 9, 28, 0.88)), url("/assets/images/main/clients-partners-bg.jpg") center/cover no-repeat; } .sec-why-h-hero__bg::after { content: ""; position: absolute; inset: 0; background-image: url("/assets/images/sub/noise.png"); opacity: 0.22; mix-blend-mode: overlay; } .sec-why-h-hero__inner { position: relative; z-index: 1; min-height: inherit; display: flex; flex-direction: column; justify-content: center; gap: var(--section-sm); padding-top: calc(var(--header-height, 10rem) + var(--section-sm)); padding-bottom: var(--section-lg); } .sec-why-h-hero__eyebrow { color: var(--clr-accent-300); letter-spacing: var(--tracking-caps); } .sec-why-h-hero__title { max-width: 104rem; color: var(--clr-base-white); line-height: 1.08; } .sec-why-h-hero__message { max-width: 86rem; border-top: 1px solid rgba(221, 179, 97, 0.44); padding-top: var(--spacing-xl); } .sec-why-h-hero__message-text { color: rgba(255, 255, 255, 0.88); } .sec-why-h-reality { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(245, 246, 250, 0.96), rgba(238, 241, 247, 0.92)), url("/assets/images/sub/core_3.jpg") center/cover no-repeat; color: var(--clr-primary-950); } .sec-why-h-reality__inner { padding-top: var(--section-xl); padding-bottom: var(--section-xl); } .sec-why-h-reality__head { max-width: 92rem; display: flex; flex-direction: column; gap: var(--spacing-lg); margin-bottom: var(--section-lg); } .sec-why-h-reality__eyebrow, .sec-why-h-reality__num { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); } .sec-why-h-reality__title { color: var(--clr-primary-900); line-height: 1.18; } .sec-why-h-reality__copy { max-width: 78rem; display: flex; flex-direction: column; gap: var(--spacing-sm); color: rgba(22, 22, 47, 0.74); } .sec-why-h-reality__copy p { margin: 0; } .sec-why-h-reality__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xl); } @media (max-width: 1024px) { .sec-why-h-reality__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 544px) { .sec-why-h-reality__grid { grid-template-columns: 1fr; } } .sec-why-h-reality__card { position: relative; min-height: 32rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-md); padding: var(--spacing-xl); background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 2.4rem 6rem rgba(15, 25, 58, 0.12); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .sec-why-h-reality__card:hover { transform: translateY(calc(var(--spacing-sm) * -1)); background: rgba(255, 255, 255, 0.88); border-color: rgba(221, 179, 97, 0.5); box-shadow: 0 3.2rem 7rem rgba(15, 25, 58, 0.18); } .sec-why-h-reality__card:hover .sec-why-h-reality__icon { transform: scale(1.04); color: var(--clr-accent-500); border-color: rgba(221, 179, 97, 0.44); } .sec-why-h-reality__num { align-self: flex-start; } .sec-why-h-reality__icon { width: clamp(11rem, 13vw, 18rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.58); border: clamp(0.4rem, 0.55vw, 0.7rem) solid rgba(255, 255, 255, 0.86); color: var(--clr-primary-700); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .sec-why-h-reality__lord-icon { display: block; width: 58%; height: 58%; color: currentColor; } .sec-why-h-reality__card-title { color: var(--clr-primary-900); } .sec-why-h-reality__card-body { color: rgba(22, 22, 47, 0.72); } .sec-why-h-protocol { position: relative; overflow: hidden; color: var(--clr-base-white); background: var(--clr-primary-950); } .sec-why-h-protocol__bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 10, 34, 0.96), rgba(0, 31, 83, 0.88)), url("/assets/images/sub/core_2.jpg") center/cover no-repeat; opacity: 0.94; } .sec-why-h-protocol__inner { position: relative; z-index: 1; padding-top: var(--section-xl); padding-bottom: var(--section-xl); } .sec-why-h-protocol__head { margin-bottom: var(--section-md); } .sec-why-h-protocol__eyebrow { margin-bottom: var(--spacing-lg); color: var(--clr-accent-300); letter-spacing: var(--tracking-caps); } .sec-why-h-protocol__title { color: var(--clr-base-white); line-height: 1.14; } .sec-why-h-protocol__layout { display: flex; flex-direction: column; align-items: center; gap: var(--section-md); } .sec-why-h-protocol__seal { width: min(100%, 76rem); min-height: 14rem; display: flex; align-items: center; place-items: center; justify-content: center; gap: var(--spacing-xl); border-radius: 999rem; border: clamp(0.2rem, 0.28vw, 0.4rem) solid rgba(221, 179, 97, 0.76); box-shadow: 0 0 0 clamp(1rem, 1.4vw, 1.8rem) rgba(255, 255, 255, 0.08); text-align: center; } @media (max-width: 544px) { .sec-why-h-protocol__seal { flex-direction: column; min-height: 18rem; gap: var(--spacing-xs); } } .sec-why-h-protocol__seal-num, .sec-why-h-protocol__seal-text { color: var(--clr-accent-300); } .sec-why-h-protocol__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xl); width: 100%; list-style: none; margin: 0; padding: 0; } @media (max-width: 1024px) { .sec-why-h-protocol__list { grid-template-columns: 1fr; } } .sec-why-h-protocol__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-lg); align-items: center; min-height: 24rem; padding: var(--spacing-lg) var(--spacing-xl); border-radius: var(--radius-lg); background: rgba(0, 43, 119, 0.88); box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.16); align-items: start; } .sec-why-h-protocol__step { width: clamp(6.4rem, 7vw, 8.8rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--clr-base-white); color: var(--clr-primary-900); } .sec-why-h-protocol__content { display: flex; flex-direction: column; gap: var(--spacing-sm); } .sec-why-h-protocol__item-title { color: var(--clr-accent-300); } .sec-why-h-protocol__body { display: flex; flex-direction: column; gap: var(--spacing-xs); color: rgba(255, 255, 255, 0.84); } .sec-why-h-protocol__body p { margin: 0; } .sec-why-h-partner { position: relative; min-height: 82rem; display: flex; align-items: center; overflow: hidden; color: var(--clr-base-white); background: var(--clr-primary-950); } .sec-why-h-partner__bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 9, 27, 0.95), rgba(2, 9, 27, 0.7) 52%, rgba(2, 9, 27, 0.92)), url("/assets/images/sub/gold-background.jpg") center/cover no-repeat; } .sec-why-h-partner__inner { position: relative; z-index: 1; width: 100%; padding-top: var(--section-xl); padding-bottom: var(--section-xl); } .sec-why-h-partner__content { max-width: 96rem; } .sec-why-h-partner__eyebrow { margin-bottom: var(--spacing-xl); color: var(--clr-accent-300); letter-spacing: var(--tracking-caps); } .sec-why-h-partner__title { color: var(--clr-base-white); margin-bottom: var(--spacing-xl); } .sec-why-h-partner__lead { color: rgba(255, 255, 255, 0.92); margin-bottom: var(--section-sm); } .sec-why-h-partner__copy { max-width: 76rem; display: flex; flex-direction: column; gap: var(--spacing-sm); color: rgba(255, 255, 255, 0.72); } .sec-why-h-partner__copy p { margin: 0; } .sec-why-h-values { position: relative; overflow: hidden; background: var(--clr-primary-950); color: var(--clr-base-white); } .sec-why-h-values__bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 12, 42, 0.96), rgba(0, 25, 66, 0.86)), url("/assets/images/sub/special-background.jpg") center/cover no-repeat; } .sec-why-h-values__bg::after { content: ""; position: absolute; inset: 0; background: rgba(2, 9, 27, 0.18); } .sec-why-h-values__inner { position: relative; z-index: 1; min-height: 90rem; display: flex; flex-direction: column; justify-content: center; gap: var(--section-sm); padding-top: var(--section-xl); padding-bottom: calc(var(--section-xl) + var(--quick-bar-h, 11rem)); } .sec-why-h-values__head { display: grid; gap: var(--spacing-lg); } .sec-why-h-values__eyebrow { color: var(--clr-accent-300); } .sec-why-h-values__main-title { max-width: 132rem; color: var(--clr-base-white); } .sec-why-h-values__lead { max-width: 132rem; color: rgba(255, 255, 255, 0.68); } .sec-why-h-values__rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 0; margin-top: var(--spacing-xl); } @media (max-width: 1024px) { .sec-why-h-values__rings { grid-template-columns: 1fr; } } .sec-why-h-values__ring { position: relative; display: grid; place-items: center; min-width: 0; } .sec-why-h-values__ring--high { z-index: 2; margin-inline: calc(var(--spacing-4xl) * -1); } @media (max-width: 1024px) { .sec-why-h-values__ring--high { margin-inline: 0; margin-block: calc(var(--spacing-4xl) * -1); } } .sec-why-h-values__ring-frame { width: min(100%, 48rem); aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--spacing-md); padding: var(--spacing-3xl); border-radius: 50%; border: clamp(1rem, 1.4vw, 1.8rem) solid var(--clr-base-white); background: rgba(0, 16, 54, 0.52); text-align: center; box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.24); } .sec-why-h-values__ring--horizon .sec-why-h-values__ring-frame, .sec-why-h-values__ring--hub .sec-why-h-values__ring-frame { border-color: var(--clr-primary-700); } .sec-why-h-values__title { color: var(--clr-base-white); } .sec-why-h-values__word { color: var(--clr-accent-300); font-style: italic; } .sec-why-h-values__body { color: rgba(255, 255, 255, 0.76); } .sec-why-h-values__ring-num { color: var(--clr-accent-300); letter-spacing: var(--tracking-caps); } .sec-why-h-values__statement { display: grid; gap: var(--spacing-md); justify-items: center; margin-top: var(--spacing-lg); text-align: center; } .sec-why-h-values__statement-main { max-width: 126rem; color: var(--clr-base-white); } .sec-why-h-values__statement-sub { color: rgba(255, 255, 255, 0.72); } /* Services — Medical 랜딩 (2026-07-13 신설, pages/services/medical.php) */ [data-anim=hero-title-stagger].is-title-stagger-ready .line, [data-anim=hero-title-stagger].is-hero-title-stagger-ready .line, [data-anim=section-title-stagger].is-title-stagger-ready .line, [data-anim=section-title-stagger].is-hero-title-stagger-ready .line { display: block; overflow: hidden; } [data-anim=hero-title-stagger].is-title-stagger-ready .word, [data-anim=hero-title-stagger].is-hero-title-stagger-ready .word, [data-anim=section-title-stagger].is-title-stagger-ready .word, [data-anim=section-title-stagger].is-hero-title-stagger-ready .word { display: inline-block; white-space: nowrap; } [data-anim=hero-title-stagger].is-title-stagger-ready .char, [data-anim=hero-title-stagger].is-hero-title-stagger-ready .char, [data-anim=section-title-stagger].is-title-stagger-ready .char, [data-anim=section-title-stagger].is-hero-title-stagger-ready .char { display: inline-block; transform: translateY(112%); opacity: 0; } .sec-medical-hero { position: relative; min-height: clamp(52rem, 90vh, 96rem); display: grid; align-items: end; overflow: hidden; color: var(--clr-base-white); background: var(--clr-primary-950); } .sec-medical-hero__media, .sec-medical-hero__shade { position: absolute; inset: 0; } .sec-medical-hero__media { height: 100%; } .sec-medical-hero__media .img-auto-cover, .sec-medical-hero__media .no-auto-cover { height: 100%; } .sec-medical-hero__shade { z-index: 1; background: linear-gradient(180deg, rgba(11, 11, 26, 0.32) 0%, rgba(11, 11, 26, 0.48) 52%, rgba(11, 11, 26, 0.82) 100%); } .sec-medical-hero__inner { position: relative; z-index: 2; display: grid; gap: var(--spacing-sm); padding-bottom: var(--spacing-2xl); } .sec-medical-hero__eyebrow { color: var(--clr-accent-300); } .sec-medical-hero__title { margin: 0; font-size: clamp(6.4rem, 20vw, 26rem); line-height: 0.86; letter-spacing: -0.02em; color: var(--clr-base-white); } .sec-medical-intro { background: var(--clr-bg-page); color: var(--clr-text-base); } .sec-medical-intro__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--spacing-4xl) var(--spacing-5xl); align-items: start; } @media (max-width: 1024px) { .sec-medical-intro__grid { grid-template-columns: 1fr; gap: var(--spacing-2xl); } } .sec-medical-intro__label { margin: 0; color: var(--clr-primary-900); letter-spacing: -0.01em; } .sec-medical-intro__body { display: grid; gap: var(--spacing-xl); } .sec-medical-intro__lead { margin: 0; color: var(--clr-primary-900); } .sec-medical-intro__copy { display: grid; gap: var(--spacing-md); max-width: 60rem; color: var(--clr-text-sub); } .sec-medical-intro__copy p { margin: 0; } .sec-medical-intro__figure { margin-top: var(--spacing-md); overflow: hidden; border-radius: var(--radius-md); } .sec-medical-intro__figure .img-auto-cover { width: 100%; } .sec-medical-challenges { background: var(--clr-base-white); color: var(--clr-text-base); } .sec-medical-challenges__head { display: grid; gap: var(--spacing-sm); max-width: 72rem; margin-bottom: var(--spacing-4xl); } .sec-medical-challenges__eyebrow { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); } .sec-medical-challenges__title { margin: 0; color: var(--clr-primary-900); } .sec-medical-challenges__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spacing-3xl); row-gap: var(--spacing-3xl); margin: 0; padding: 0; list-style: none; } @media (max-width: 1024px) { .sec-medical-challenges__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 544px) { .sec-medical-challenges__grid { grid-template-columns: 1fr; } } .sec-medical-challenges__item { display: grid; gap: var(--spacing-sm); padding-top: var(--spacing-lg); border-top: 1px solid var(--clr-ui-border); } .sec-medical-challenges__item-title { margin: 0; color: var(--clr-primary-900); } .sec-medical-challenges__item-body { margin: 0; color: var(--clr-text-sub); } .sec-medical-process { background: var(--clr-primary-900); color: var(--clr-base-white); } .sec-medical-process__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--spacing-4xl) var(--spacing-5xl); align-items: start; } @media (max-width: 1024px) { .sec-medical-process__grid { grid-template-columns: 1fr; gap: var(--spacing-3xl); } } .sec-medical-process__head { display: grid; gap: var(--spacing-lg); position: sticky; top: var(--spacing-4xl); } @media (max-width: 1024px) { .sec-medical-process__head { position: static; } } .sec-medical-process__eyebrow { color: var(--clr-accent-300); letter-spacing: var(--tracking-caps); } .sec-medical-process__title { margin: 0; } .sec-medical-process__lead { display: grid; gap: var(--spacing-xs); color: rgba(255, 255, 255, 0.72); } .sec-medical-process__lead p { margin: 0; } .sec-medical-process__list { display: grid; margin: 0; padding: 0; list-style: none; } .sec-medical-process__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-xl); align-items: start; padding: var(--spacing-2xl) 0; border-top: 1px solid rgba(255, 255, 255, 0.16); } .sec-medical-process__step:first-child { padding-top: 0; border-top: 0; } .sec-medical-process__step-no { color: var(--clr-accent-300); line-height: 1; } .sec-medical-process__step-body { display: grid; gap: var(--spacing-sm); } .sec-medical-process__step-title { margin: 0; } .sec-medical-process__step-desc { margin: 0; color: rgba(255, 255, 255, 0.72); } .sec-medical-process__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin: var(--spacing-xs) 0 0; padding: 0; list-style: none; } .sec-medical-process__tag { padding: var(--spacing-xxs) var(--spacing-md); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--radius-round); color: rgba(255, 255, 255, 0.86); } .sec-medical-specialty { background: var(--clr-bg-section); color: var(--clr-text-base); } .sec-medical-specialty__head { display: grid; gap: var(--spacing-sm); max-width: 72rem; margin-bottom: var(--spacing-4xl); } .sec-medical-specialty__eyebrow { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); } .sec-medical-specialty__title { margin: 0; color: var(--clr-primary-900); } .sec-medical-specialty__editorial { display: grid; grid-template-columns: minmax(0, 4fr) minmax(32rem, 5fr); gap: var(--spacing-3xl); align-items: stretch; } @media (max-width: 1024px) { .sec-medical-specialty__editorial { grid-template-columns: 1fr; } } .sec-medical-specialty__visual { position: relative; min-height: clamp(30rem, 32vw, 46rem); margin: 0; overflow: hidden; background: var(--clr-primary-900); } .sec-medical-specialty__visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 54%, color-mix(in srgb, var(--clr-primary-900) 30%, transparent)); opacity: 0; transition: opacity var(--dur-base) var(--ease-out-quart); } .sec-medical-specialty__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out-expo); } .sec-medical-specialty__list { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } @media (max-width: 1024px) { .sec-medical-specialty__list { grid-template-rows: none; } } .sec-medical-specialty__item { position: relative; isolation: isolate; display: grid; align-content: center; gap: var(--spacing-sm); padding: var(--spacing-xl) 0; overflow: hidden; border-bottom: 1px solid var(--clr-ui-border); transition: border-color var(--dur-base) var(--ease-out-quart); } .sec-medical-specialty__item::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: color-mix(in srgb, var(--clr-accent-300) 34%, var(--clr-base-white)); clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-slower) var(--ease-out-expo); will-change: clip-path; } .sec-medical-specialty__item > * { position: relative; z-index: 1; } .sec-medical-specialty__item:first-child { padding-top: 0; } .sec-medical-specialty__item:last-child { padding-bottom: 0; border-bottom: 0; } .sec-medical-specialty__item-no { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); transition: color var(--dur-base) var(--ease-out-quart); } .sec-medical-specialty__item-title { margin: 0; color: var(--clr-primary-900); transition: color var(--dur-base) var(--ease-out-quart); } .sec-medical-specialty__item-body { margin: 0; color: var(--clr-text-base); } @media (hover: hover) { .sec-medical-specialty__editorial:hover .sec-medical-specialty__image { transform: scale(1.025); } .sec-medical-specialty__editorial:hover .sec-medical-specialty__visual::after { opacity: 1; } .sec-medical-specialty__item:hover { border-color: var(--clr-accent-500); } .sec-medical-specialty__item:hover::before { clip-path: inset(0); } .sec-medical-specialty__item:hover .sec-medical-specialty__item-title { color: var(--clr-primary-950); } .sec-medical-specialty__item:hover .sec-medical-specialty__item-no { color: var(--clr-accent-700); } } .sec-medical-specialty__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xl); margin: 0; padding: 0; list-style: none; } @media (max-width: 1024px) { .sec-medical-specialty__grid { grid-template-columns: 1fr; } } .sec-medical-specialty__card { display: grid; align-content: start; gap: var(--spacing-lg); padding: var(--spacing-2xl); background: var(--clr-base-white); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-md); } .sec-medical-specialty__card-icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(5.2rem, 5vw, 7.2rem); height: clamp(5.2rem, 5vw, 7.2rem); margin-bottom: var(--spacing-sm); color: var(--clr-primary-500); } .sec-medical-specialty__lord-icon { display: block; width: 100%; height: 100%; } .sec-medical-specialty__card-title { margin: 0; color: var(--clr-primary-900); } .sec-medical-specialty__card-body { margin: 0; color: var(--clr-text-sub); } .sec-medical-specialty__cta { display: grid; margin-top: var(--spacing-4xl); overflow: hidden; background: var(--clr-base-white); border: 1px solid var(--clr-ui-border); border-top: 2px solid var(--clr-accent-500); border-radius: var(--radius-lg); box-shadow: 0 1.2rem 3.6rem -1.8rem rgba(36, 36, 79, 0.18); } .sec-medical-specialty__cta-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-xl) var(--spacing-3xl); align-items: center; padding: var(--spacing-2xl) var(--spacing-3xl); } @media (max-width: 768px) { .sec-medical-specialty__cta-main { grid-template-columns: 1fr; align-items: start; } } .sec-medical-specialty__cta-copy { display: grid; gap: var(--spacing-xs); } .sec-medical-specialty__cta-eyebrow { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); } .sec-medical-specialty__cta-text { margin: 0; color: var(--clr-primary-900); } .sec-medical-specialty__cta-foot { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); align-items: center; justify-content: space-between; padding: var(--spacing-lg) var(--spacing-3xl); background: color-mix(in srgb, var(--clr-primary-50) 42%, var(--clr-base-white)); border-top: 1px solid var(--clr-ui-border); } @media (max-width: 768px) { .sec-medical-specialty__cta-foot { align-items: flex-start; padding-inline: var(--spacing-xl); } } .sec-medical-specialty__cta-note { flex: 1 1 32rem; margin: 0; color: var(--clr-text-aux); } @media (prefers-reduced-motion: reduce) { .sec-medical-specialty__image, .sec-medical-specialty__visual::after, .sec-medical-specialty__item, .sec-medical-specialty__item::before, .sec-medical-specialty__item-no, .sec-medical-specialty__item-title { transition: none; } .sec-medical-specialty__item::before { will-change: auto; } .sec-medical-specialty__editorial:hover .sec-medical-specialty__image { transform: none; } } /* Services — H&B Brand 랜딩 (2026-07-13 신설, pages/services/hb-brand.php) */ .sec-hb-hero { position: relative; min-height: clamp(52rem, 90vh, 96rem); display: grid; align-items: end; overflow: hidden; color: var(--clr-base-white); background: var(--clr-primary-950); } .sec-hb-hero__media, .sec-hb-hero__shade { position: absolute; inset: 0; } .sec-hb-hero__media { height: 100%; } .sec-hb-hero__media .img-auto-cover, .sec-hb-hero__media .no-auto-cover { height: 100%; } .sec-hb-hero__shade { z-index: 1; background: linear-gradient(180deg, rgba(11, 11, 26, 0.36) 0%, rgba(11, 11, 26, 0.55) 44%, rgba(11, 11, 26, 0.9) 100%); } .sec-hb-hero__inner { position: relative; z-index: 2; display: grid; gap: var(--spacing-sm); padding-bottom: var(--spacing-2xl); } .sec-hb-hero__title { margin: 0; font-size: clamp(5.6rem, 13vw, 18rem); line-height: 0.86; letter-spacing: -0.02em; color: var(--clr-base-white); } .sec-hb-intro { background: var(--clr-bg-page); color: var(--clr-text-base); } .sec-hb-intro__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--spacing-4xl) var(--spacing-5xl); align-items: start; } @media (max-width: 1024px) { .sec-hb-intro__grid { grid-template-columns: 1fr; gap: var(--spacing-2xl); } } .sec-hb-intro__label { margin: 0; color: var(--clr-primary-900); letter-spacing: -0.01em; } .sec-hb-intro__body { display: grid; gap: var(--spacing-xl); } .sec-hb-intro__lead { margin: 0; color: var(--clr-primary-900); } .sec-hb-intro__copy { display: grid; gap: var(--spacing-md); max-width: 60rem; color: var(--clr-text-sub); } .sec-hb-intro__copy p { margin: 0; } .sec-hb-intro__figure { margin-top: var(--spacing-md); overflow: hidden; border-radius: var(--radius-md); } .sec-hb-intro__figure .img-auto-cover { width: 100%; } .sec-hb-challenges { background: var(--clr-base-white); color: var(--clr-text-base); } .sec-hb-challenges__head { display: grid; gap: var(--spacing-sm); max-width: 72rem; margin-bottom: var(--spacing-4xl); } .sec-hb-challenges__eyebrow { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); } .sec-hb-challenges__title { margin: 0; color: var(--clr-primary-900); } .sec-hb-challenges__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spacing-3xl); row-gap: var(--spacing-3xl); margin: 0; padding: 0; list-style: none; } @media (max-width: 1024px) { .sec-hb-challenges__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 544px) { .sec-hb-challenges__grid { grid-template-columns: 1fr; } } .sec-hb-challenges__item { display: grid; gap: var(--spacing-sm); padding-top: var(--spacing-lg); border-top: 1px solid var(--clr-ui-border); } .sec-hb-challenges__item-title { margin: 0; color: var(--clr-primary-900); } .sec-hb-challenges__item-body { margin: 0; color: var(--clr-text-sub); } .sec-hb-process { background: var(--clr-primary-900); color: var(--clr-base-white); } .sec-hb-process__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--spacing-4xl) var(--spacing-5xl); align-items: start; } @media (max-width: 1024px) { .sec-hb-process__grid { grid-template-columns: 1fr; gap: var(--spacing-3xl); } } .sec-hb-process__head { display: grid; gap: var(--spacing-lg); position: sticky; top: var(--spacing-4xl); } @media (max-width: 1024px) { .sec-hb-process__head { position: static; } } .sec-hb-process__eyebrow { color: var(--clr-accent-300); letter-spacing: var(--tracking-caps); } .sec-hb-process__title { margin: 0; } .sec-hb-process__lead { display: grid; gap: var(--spacing-xs); color: rgba(255, 255, 255, 0.72); } .sec-hb-process__lead p { margin: 0; } .sec-hb-process__list { display: grid; margin: 0; padding: 0; list-style: none; } .sec-hb-process__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-xl); align-items: start; padding: var(--spacing-2xl) 0; border-top: 1px solid rgba(255, 255, 255, 0.16); } .sec-hb-process__step:first-child { padding-top: 0; border-top: 0; } .sec-hb-process__step-no { color: var(--clr-accent-300); line-height: 1; } .sec-hb-process__step-body { display: grid; gap: var(--spacing-sm); } .sec-hb-process__step-title { margin: 0; } .sec-hb-process__step-desc { margin: 0; color: rgba(255, 255, 255, 0.72); } .sec-hb-process__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin: var(--spacing-xs) 0 0; padding: 0; list-style: none; } .sec-hb-process__tag { padding: var(--spacing-xxs) var(--spacing-md); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--radius-round); color: rgba(255, 255, 255, 0.86); } .sec-hb-specialty { background: var(--clr-bg-section); color: var(--clr-text-base); } .sec-hb-specialty__head { display: grid; gap: var(--spacing-sm); max-width: 72rem; margin-bottom: var(--spacing-4xl); } .sec-hb-specialty__eyebrow { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); } .sec-hb-specialty__title { margin: 0; color: var(--clr-primary-900); } .sec-hb-specialty__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xl); margin: 0; padding: 0; list-style: none; } @media (max-width: 1024px) { .sec-hb-specialty__grid { grid-template-columns: 1fr; } } .sec-hb-specialty__card { display: grid; align-content: start; gap: var(--spacing-lg); padding: var(--spacing-2xl); background: var(--clr-base-white); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-md); } .sec-hb-specialty__card-icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(5.2rem, 5vw, 7.2rem); height: clamp(5.2rem, 5vw, 7.2rem); margin-bottom: var(--spacing-sm); color: var(--clr-primary-500); } .sec-hb-specialty__lord-icon { display: block; width: 100%; height: 100%; } .sec-hb-specialty__card-title { margin: 0; color: var(--clr-primary-900); } .sec-hb-specialty__card-body { margin: 0; color: var(--clr-text-sub); } .sec-hb-specialty__cta { display: grid; gap: var(--spacing-lg); margin-top: var(--spacing-4xl); } .sec-hb-specialty__cta-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-xl) var(--spacing-3xl); align-items: center; padding: var(--spacing-2xl) var(--spacing-3xl); background: var(--clr-base-white); border-radius: var(--radius-lg); box-shadow: 0 1.2rem 3.6rem -1.8rem rgba(36, 36, 79, 0.22); } @media (max-width: 768px) { .sec-hb-specialty__cta-main { grid-template-columns: 1fr; align-items: start; } } .sec-hb-specialty__cta-copy { display: grid; gap: var(--spacing-xs); } .sec-hb-specialty__cta-eyebrow { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); } .sec-hb-specialty__cta-text { margin: 0; color: var(--clr-primary-900); } .sec-hb-specialty__cta-foot { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); align-items: center; justify-content: space-between; padding: 0 var(--spacing-md); } .sec-hb-specialty__cta-note { flex: 1 1 32rem; margin: 0; color: var(--clr-text-aux); } /* Services — Startup & Store 랜딩 (2026-07-13 신설, pages/services/startup-strategy.php) */ .sec-startup-hero { position: relative; min-height: clamp(52rem, 90vh, 96rem); display: grid; align-items: end; overflow: hidden; color: var(--clr-base-white); background: var(--clr-primary-950); } .sec-startup-hero__media, .sec-startup-hero__shade { position: absolute; inset: 0; } .sec-startup-hero__media { height: 100%; } .sec-startup-hero__media .img-auto-cover, .sec-startup-hero__media .no-auto-cover { height: 100%; } .sec-startup-hero__shade { z-index: 1; background: linear-gradient(180deg, rgba(11, 11, 26, 0.36) 0%, rgba(11, 11, 26, 0.55) 44%, rgba(11, 11, 26, 0.9) 100%); } .sec-startup-hero__inner { position: relative; z-index: 2; display: grid; gap: var(--spacing-sm); padding-bottom: var(--spacing-2xl); } .sec-startup-hero__title { margin: 0; font-size: clamp(4.8rem, 10vw, 14.8rem); line-height: 0.86; letter-spacing: -0.02em; color: var(--clr-base-white); } .sec-startup-intro { background: var(--clr-bg-page); color: var(--clr-text-base); } .sec-startup-intro__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--spacing-4xl) var(--spacing-5xl); align-items: start; } @media (max-width: 1024px) { .sec-startup-intro__grid { grid-template-columns: 1fr; gap: var(--spacing-2xl); } } .sec-startup-intro__label { margin: 0; color: var(--clr-primary-900); letter-spacing: -0.01em; } .sec-startup-intro__body { display: grid; gap: var(--spacing-xl); } .sec-startup-intro__lead { margin: 0; color: var(--clr-primary-900); } .sec-startup-intro__copy { display: grid; gap: var(--spacing-md); max-width: 60rem; color: var(--clr-text-sub); } .sec-startup-intro__copy p { margin: 0; } .sec-startup-intro__figure { margin-top: var(--spacing-md); overflow: hidden; border-radius: var(--radius-md); } .sec-startup-intro__figure .img-auto-cover { width: 100%; } .sec-startup-challenges { background: var(--clr-base-white); color: var(--clr-text-base); } .sec-startup-challenges__head { display: grid; gap: var(--spacing-sm); max-width: 72rem; margin-bottom: var(--spacing-4xl); } .sec-startup-challenges__eyebrow { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); } .sec-startup-challenges__title { margin: 0; color: var(--clr-primary-900); } .sec-startup-challenges__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spacing-3xl); row-gap: var(--spacing-3xl); margin: 0; padding: 0; list-style: none; } @media (max-width: 1024px) { .sec-startup-challenges__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 544px) { .sec-startup-challenges__grid { grid-template-columns: 1fr; } } .sec-startup-challenges__item { display: grid; gap: var(--spacing-sm); padding-top: var(--spacing-lg); border-top: 1px solid var(--clr-ui-border); } .sec-startup-challenges__item-title { margin: 0; color: var(--clr-primary-900); } .sec-startup-challenges__item-body { margin: 0; color: var(--clr-text-sub); } .sec-startup-process { background: var(--clr-primary-900); color: var(--clr-base-white); } .sec-startup-process__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--spacing-4xl) var(--spacing-5xl); align-items: start; } @media (max-width: 1024px) { .sec-startup-process__grid { grid-template-columns: 1fr; gap: var(--spacing-3xl); } } .sec-startup-process__head { display: grid; gap: var(--spacing-lg); position: sticky; top: var(--spacing-4xl); } @media (max-width: 1024px) { .sec-startup-process__head { position: static; } } .sec-startup-process__eyebrow { color: var(--clr-accent-300); letter-spacing: var(--tracking-caps); } .sec-startup-process__title { margin: 0; } .sec-startup-process__lead { display: grid; gap: var(--spacing-xs); color: rgba(255, 255, 255, 0.72); } .sec-startup-process__lead p { margin: 0; } .sec-startup-process__list { display: grid; margin: 0; padding: 0; list-style: none; } .sec-startup-process__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-xl); align-items: start; padding: var(--spacing-2xl) 0; border-top: 1px solid rgba(255, 255, 255, 0.16); } .sec-startup-process__step:first-child { padding-top: 0; border-top: 0; } .sec-startup-process__step-no { color: var(--clr-accent-300); line-height: 1; } .sec-startup-process__step-body { display: grid; gap: var(--spacing-sm); } .sec-startup-process__step-title { margin: 0; } .sec-startup-process__step-desc { margin: 0; color: rgba(255, 255, 255, 0.72); } .sec-startup-process__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin: var(--spacing-xs) 0 0; padding: 0; list-style: none; } .sec-startup-process__tag { padding: var(--spacing-xxs) var(--spacing-md); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--radius-round); color: rgba(255, 255, 255, 0.86); } .sec-startup-specialty { background: var(--clr-bg-section); color: var(--clr-text-base); } .sec-startup-specialty__head { display: grid; gap: var(--spacing-sm); max-width: 72rem; margin-bottom: var(--spacing-4xl); } .sec-startup-specialty__eyebrow { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); } .sec-startup-specialty__title { margin: 0; color: var(--clr-primary-900); } .sec-startup-specialty__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xl); margin: 0; padding: 0; list-style: none; } @media (max-width: 1024px) { .sec-startup-specialty__grid { grid-template-columns: 1fr; } } .sec-startup-specialty__card { display: grid; align-content: start; gap: var(--spacing-lg); padding: var(--spacing-2xl); background: var(--clr-base-white); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-md); } .sec-startup-specialty__card-icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(5.2rem, 5vw, 7.2rem); height: clamp(5.2rem, 5vw, 7.2rem); margin-bottom: var(--spacing-sm); color: var(--clr-primary-500); } .sec-startup-specialty__lord-icon { display: block; width: 100%; height: 100%; } .sec-startup-specialty__card-title { margin: 0; color: var(--clr-primary-900); } .sec-startup-specialty__card-body { margin: 0; color: var(--clr-text-sub); } .sec-startup-specialty__cta { display: grid; gap: var(--spacing-lg); margin-top: var(--spacing-4xl); } .sec-startup-specialty__cta-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-xl) var(--spacing-3xl); align-items: center; padding: var(--spacing-2xl) var(--spacing-3xl); background: var(--clr-base-white); border-radius: var(--radius-lg); box-shadow: 0 1.2rem 3.6rem -1.8rem rgba(36, 36, 79, 0.22); } @media (max-width: 768px) { .sec-startup-specialty__cta-main { grid-template-columns: 1fr; align-items: start; } } .sec-startup-specialty__cta-copy { display: grid; gap: var(--spacing-xs); } .sec-startup-specialty__cta-eyebrow { color: var(--clr-accent-500); letter-spacing: var(--tracking-caps); } .sec-startup-specialty__cta-text { margin: 0; color: var(--clr-primary-900); } .sec-startup-specialty__cta-foot { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); align-items: center; justify-content: space-between; padding: 0 var(--spacing-md); } .sec-startup-specialty__cta-note { flex: 1 1 32rem; margin: 0; color: var(--clr-text-aux); } .sec-other-services { overflow: hidden; color: var(--clr-text-base); background: var(--clr-bg-page); border-top: 1px solid var(--clr-ui-border); } .sec-other-services__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(24rem, 0.8fr); gap: var(--spacing-sm) var(--spacing-3xl); align-items: end; margin-bottom: var(--spacing-3xl); } @media (max-width: 1024px) { .sec-other-services__head { grid-template-columns: 1fr; } } .sec-other-services__eyebrow { grid-column: 1/-1; color: var(--clr-accent-700); letter-spacing: var(--tracking-caps); } .sec-other-services__title { max-width: 82rem; margin: 0; color: var(--clr-primary-900); } .sec-other-services__lead { max-width: 42rem; margin: 0; color: var(--clr-text-sub); } .sec-other-services__viewport { min-width: 0; } .sec-other-services__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } @media (max-width: 768px) { .sec-other-services__list { grid-template-columns: 1fr; } } .sec-other-services__item { position: relative; min-width: 0; border-top: 1px solid var(--clr-ui-border); } .sec-other-services__item::before { content: ""; position: absolute; z-index: 2; top: -1px; left: 0; width: 0; height: 2px; background: var(--clr-accent-500); transition: width var(--dur-slow) var(--ease-out-expo); } .sec-other-services__link { display: grid; grid-template-rows: auto 1fr auto; gap: var(--spacing-xl); min-height: 28rem; padding: var(--spacing-xl); color: inherit; text-decoration: none; border-right: 1px solid var(--clr-ui-border); transition: background-color var(--dur-base) var(--ease-out-quart); } @media (max-width: 768px) { .sec-other-services__link { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; gap: var(--spacing-lg); align-items: start; min-height: 0; padding: var(--spacing-xl) 0; border-right: 0; } } .sec-other-services__item:last-child .sec-other-services__link { border-right: 0; } .sec-other-services__rail { display: flex; gap: var(--spacing-sm); align-items: center; } @media (max-width: 768px) { .sec-other-services__rail { align-self: start; } } .sec-other-services__no { color: var(--clr-text-aux); transition: color var(--dur-base) var(--ease-out-quart); } .sec-other-services__marker { width: 0.7rem; aspect-ratio: 1; border: 1px solid var(--clr-text-aux); border-radius: 50%; transition: border-color var(--dur-base) var(--ease-out-quart), background-color var(--dur-base) var(--ease-out-quart); } .sec-other-services__copy { display: grid; align-content: start; gap: var(--spacing-sm); } .sec-other-services__category { color: var(--clr-accent-700); letter-spacing: var(--tracking-caps); } .sec-other-services__name { color: var(--clr-primary-900); } .sec-other-services__desc { max-width: 68rem; color: var(--clr-text-sub); } .sec-other-services__action { display: inline-flex; gap: var(--spacing-sm); align-items: center; justify-self: start; color: var(--clr-primary-700); } .sec-other-services__action svg { width: 2.4rem; height: 2.4rem; transition: transform var(--dur-base) var(--ease-out-quart); } @media (max-width: 768px) { .sec-other-services__action { grid-column: 2; align-self: end; justify-self: start; } } @media (hover: hover) { .sec-other-services__link:hover { background: color-mix(in srgb, var(--clr-base-white) 72%, var(--clr-primary-50)); } .sec-other-services__link:hover .sec-other-services__action svg { transform: translateX(var(--spacing-xs)); } .sec-other-services__item:hover::before { width: 100%; } .sec-other-services__link:hover .sec-other-services__no { color: var(--clr-primary-700); } .sec-other-services__link:hover .sec-other-services__marker { border-color: var(--clr-accent-500); background: var(--clr-accent-500); } } .sec-other-services__link:focus-visible { position: relative; z-index: 3; outline: 2px solid var(--clr-accent-500); outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .sec-other-services__item::before, .sec-other-services__link, .sec-other-services__no, .sec-other-services__marker, .sec-other-services__action svg { transition: none; } .sec-other-services__link:hover .sec-other-services__action svg { transform: none; } } /* Portfolio — 실전 사례 목록/상세 (2026-07-13 신설, pages/portfolio*.php) */ .sec-portfolio-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--clr-primary-900) 8%, transparent), transparent 48%), var(--clr-bg-page); border-bottom: 0; padding-top: var(--section-xl); padding-bottom: var(--section-lg); } .sec-portfolio-hero__eyebrow { color: var(--clr-accent-700); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin: 0 0 var(--spacing-md); } .sec-portfolio-hero__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(28rem, 0.65fr); gap: var(--spacing-3xl); align-items: end; } @media (max-width: 1024px) { .sec-portfolio-hero__body { grid-template-columns: 1fr; gap: var(--spacing-lg); } } .sec-portfolio-hero__title { color: var(--clr-primary-900); margin: 0; } .sec-portfolio-hero__desc { color: var(--clr-text-sub); max-width: 52rem; margin: 0; justify-self: end; } @media (max-width: 1024px) { .sec-portfolio-hero__desc { justify-self: start; } } .sec-portfolio-list { position: relative; scroll-margin-top: calc(var(--header-height) + var(--spacing-lg)); transition: opacity var(--dur-fast) var(--ease-out-quart); } .sec-portfolio-list.is-loading { opacity: 0.58; pointer-events: none; } .sec-portfolio-list { background: var(--clr-bg-page); padding-top: var(--section-sm); padding-bottom: var(--section-lg); } .portfolio-filterbar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); margin-bottom: var(--spacing-2xl); padding: var(--spacing-md) 0; border-bottom: 0; } @media (max-width: 544px) { .portfolio-filterbar { align-items: flex-start; flex-direction: column; } } .portfolio-filterbar__label { color: var(--clr-accent-700); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: 0; } .portfolio-filter { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-sm); justify-content: flex-end; } @media (max-width: 544px) { .portfolio-filter { justify-content: flex-start; } } .portfolio-filter__item { display: inline-flex; align-items: center; padding: var(--spacing-xs) var(--spacing-lg); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-round); color: var(--clr-text-sub); background: transparent; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .portfolio-filter__item:hover, .portfolio-filter__item:focus-visible { color: var(--clr-primary-900); border-color: var(--clr-primary-500); } .portfolio-filter__item.is-active { color: var(--clr-base-white); background: var(--clr-primary-900); border-color: var(--clr-primary-900); } .portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-2xl) var(--spacing-xl); } @media (max-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 544px) { .portfolio-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } } .portfolio-card { display: flex; flex-direction: column; background: var(--clr-base-white); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-sm); overflow: hidden; color: inherit; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .portfolio-card:hover, .portfolio-card:focus-within { transform: translateY(-4px); border-color: var(--clr-primary-500); box-shadow: 0 1.6rem 4rem color-mix(in srgb, var(--clr-primary-900) 12%, transparent); } .portfolio-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--clr-primary-900); } .portfolio-card__status { position: absolute; z-index: 2; top: var(--spacing-md); right: var(--spacing-md); padding: var(--spacing-xxs) var(--spacing-sm); border: 1px solid color-mix(in srgb, var(--clr-base-white) 52%, transparent); border-radius: var(--radius-round); color: var(--clr-base-white); background: color-mix(in srgb, var(--clr-primary-900) 82%, transparent); letter-spacing: var(--tracking-caps); } .portfolio-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .portfolio-card:hover .portfolio-card__img { transform: scale(1.04); } .portfolio-card__media-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--spacing-xl); color: var(--clr-base-white); background: var(--clr-primary-900); } .portfolio-card__fallback-logo { width: min(58%, 24rem); height: auto; filter: brightness(0) invert(1); } .portfolio-card__fallback-wordmark { color: var(--clr-base-white); margin: 0; } .portfolio-card__logo { position: absolute; left: var(--spacing-md); bottom: var(--spacing-md); display: inline-flex; padding: var(--spacing-xxs) var(--spacing-sm); background: rgba(255, 255, 255, 0.92); border-radius: var(--radius-xs); } .portfolio-card__logo img { max-height: 1.8rem; width: auto; object-fit: contain; } .portfolio-card__body { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl); } .portfolio-card__meta { color: var(--clr-accent-700); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin: 0; } .portfolio-card__title { color: var(--clr-primary-900); margin: 0; } .portfolio-card__summary { color: var(--clr-text-sub); margin: 0; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; } .portfolio-card__cta { display: inline-flex; align-items: center; gap: var(--spacing-xxs); margin-top: auto; padding-top: var(--spacing-xs); color: var(--clr-primary-500); letter-spacing: var(--tracking-caps); } .portfolio-card__cta svg { transition: transform 0.25s ease; } .portfolio-card:hover .portfolio-card__cta svg { transform: translateX(3px); } .portfolio-empty { display: flex; align-items: center; justify-content: center; min-height: 24rem; border: 1px dashed var(--clr-ui-border); border-radius: var(--radius-sm); } .portfolio-empty__text { color: var(--clr-text-aux); margin: 0; } .portfolio-preview-banner { background: var(--clr-primary-900); color: var(--clr-base-white); text-align: center; padding: var(--spacing-sm) var(--spacing-lg); } .portfolio-case-brief { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xl); align-items: start; margin-bottom: var(--spacing-3xl); padding: var(--spacing-3xl) 0; border-top: 1px solid var(--clr-primary-900); } .portfolio-case-brief__visual { width: 100%; min-width: 0; aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; background: var(--clr-primary-900); border: 1px solid color-mix(in srgb, var(--clr-primary-900) 84%, var(--clr-base-white)); } .portfolio-case-brief__visual > img { width: 100%; height: 100%; object-fit: cover; } .portfolio-case-brief__fallback { display: grid; place-items: center; width: 100%; height: 100%; padding: var(--spacing-xl); } .portfolio-case-brief__fallback-logo { width: auto; max-width: 12rem; height: auto; max-height: 9rem; filter: brightness(0) invert(1); } .portfolio-case-brief__fallback-logo--vector { width: min(48%, 18rem); max-width: none; max-height: none; } .portfolio-case-brief__fallback-wordmark { color: var(--clr-base-white); margin: 0; } .portfolio-case-brief__panel { display: grid; align-content: start; gap: var(--spacing-lg); padding: 0; } .portfolio-case-brief__eyebrow { color: var(--clr-accent-500); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin: 0; } .portfolio-case-brief__title { color: var(--clr-primary-900); margin: 0; max-width: 64rem; } .portfolio-case-brief__table { display: grid; margin: var(--spacing-lg) 0 0; border-top: 2px solid var(--clr-primary-900); } .portfolio-case-brief__row { display: grid; grid-template-columns: minmax(15rem, 0.36fr) minmax(0, 1fr); gap: var(--spacing-xl); padding: var(--spacing-lg) 0; } .portfolio-case-brief__row:not(:last-child) { border-bottom: 1px solid var(--clr-ui-border); } @media (max-width: 544px) { .portfolio-case-brief__row { grid-template-columns: 1fr; gap: var(--spacing-sm); } } .portfolio-case-brief__label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-sm); margin: 0; } .portfolio-case-brief__no, .portfolio-case-brief__label-en { color: var(--clr-accent-700); letter-spacing: var(--tracking-caps); } .portfolio-case-brief__label-en, .portfolio-case-brief__label-ko { display: block; } .portfolio-case-brief__label-ko { color: var(--clr-text-aux); margin-top: var(--spacing-xxs); } .portfolio-case-brief__value { color: var(--clr-primary-900); margin: 0; } .portfolio-detail { background: var(--clr-bg-page); } .portfolio-detail__crumb { margin-bottom: var(--spacing-xl); color: var(--clr-text-aux); } .portfolio-detail__hero { display: grid; gap: var(--spacing-lg); max-width: 112rem; margin-bottom: var(--spacing-3xl); padding: var(--spacing-lg) 0 var(--spacing-3xl); border-top: 1px solid var(--clr-primary-900); } .portfolio-detail__eyebrow { color: var(--clr-accent-700); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: 0; } .portfolio-detail__identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); } .portfolio-detail__status { display: inline-flex; align-items: center; padding: var(--spacing-xxs) var(--spacing-sm); border: 1px solid var(--clr-accent-500); border-radius: var(--radius-round); color: var(--clr-accent-700); letter-spacing: var(--tracking-caps); } .portfolio-detail__hero-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0; margin: var(--spacing-lg) 0 0; border-top: 1px solid var(--clr-ui-border); border-bottom: 1px solid var(--clr-ui-border); } .portfolio-detail__hero-meta-item { display: flex; flex-direction: column; gap: var(--spacing-xxs); min-width: 0; padding: var(--spacing-md) var(--spacing-lg); border-left: 1px solid var(--clr-ui-border); } .portfolio-detail__hero-meta-item:first-child { border-left: 0; } .portfolio-detail__hero-meta-item dt { color: var(--clr-text-aux); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: 0; } .portfolio-detail__hero-meta-item dd { color: var(--clr-primary-900); margin: 0; } .portfolio-detail__logo { grid-column: 1/-1; padding: var(--spacing-lg) 0; border-bottom: 1px solid var(--clr-ui-border); } .portfolio-detail__logo img { max-height: 4rem; width: auto; object-fit: contain; } .portfolio-detail__visual { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius-xs); background: var(--clr-bg-section); } .portfolio-detail__visual img { width: 100%; height: 100%; object-fit: cover; } .portfolio-detail__title { color: var(--clr-primary-900); margin: 0; max-width: 96rem; } .portfolio-detail__summary { color: var(--clr-text-sub); margin: 0; max-width: 80rem; } .portfolio-detail__content { display: grid; gap: 0; max-width: 112rem; margin: 0 auto; } .portfolio-detail__overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: start; border-top: 1px solid var(--clr-primary-900); } @media (max-width: 1024px) { .portfolio-detail__overview { grid-template-columns: 1fr; } } .portfolio-detail__block { display: grid; gap: var(--spacing-md); min-width: 0; padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) 0; } .portfolio-detail__block + .portfolio-detail__block { padding-right: 0; padding-left: var(--spacing-xl); } @media (max-width: 1024px) { .portfolio-detail__block { padding: var(--spacing-lg) 0; } .portfolio-detail__block + .portfolio-detail__block { padding-left: 0; } } .portfolio-detail__block-label { color: var(--clr-text-aux); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin: 0; } .portfolio-detail__taglist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spacing-lg); list-style: none; margin: 0; padding: 0; } .portfolio-detail__taglist li { padding: var(--spacing-sm) 0; color: var(--clr-primary-900); } .portfolio-detail__checklist { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; } .portfolio-detail__checklist li { position: relative; padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-lg); color: var(--clr-text-base); } .portfolio-detail__checklist li::before { content: ""; position: absolute; left: 0; top: 1.2em; width: 0.7rem; height: 1px; background: var(--clr-accent-500); } .portfolio-detail__nda { grid-column: 1/-1; color: var(--clr-text-aux); padding: var(--spacing-md) 0; border-top: 1px solid var(--clr-ui-border); margin: 0; } .portfolio-detail__back-wrap { display: flex; justify-content: center; } .portfolio-detail__back { display: inline-flex; align-items: center; gap: var(--spacing-xxs); color: var(--clr-primary-500); padding-bottom: var(--spacing-xs); border-bottom: 1px solid currentColor; } .portfolio-detail__links { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-2xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--clr-ui-border); } .portfolio-detail__link { color: var(--clr-primary-500); } .portfolio-detail__main { display: grid; gap: 0; min-width: 0; } .portfolio-stage { display: grid; grid-template-columns: minmax(20rem, 0.36fr) minmax(0, 1fr); column-gap: var(--spacing-3xl); row-gap: var(--spacing-xl); padding: var(--spacing-3xl) 0; border-top: 1px solid var(--clr-ui-border); } .portfolio-stage:first-child { border-top-color: var(--clr-primary-900); } .portfolio-stage:last-of-type { border-bottom: 1px solid var(--clr-ui-border); } .portfolio-stage > :not(.portfolio-stage__head) { grid-column: 2; } @media (max-width: 1024px) { .portfolio-stage { grid-template-columns: 1fr; gap: var(--spacing-lg); } .portfolio-stage > :not(.portfolio-stage__head) { grid-column: 1; } } .portfolio-stage__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-md); align-items: start; } .portfolio-stage__no { color: var(--clr-accent-500); font-weight: 700; letter-spacing: var(--tracking-caps); } .portfolio-stage__en { color: var(--clr-primary-900); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin: 0; } .portfolio-stage__ko { color: var(--clr-text-aux); font-weight: 600; margin: var(--spacing-xxs) 0 0; } .portfolio-stage__body { color: var(--clr-text-base); max-width: 76rem; } .portfolio-stage__body :where(p, ul, ol) { margin: 0 0 var(--spacing-md); } .portfolio-stage__body :where(ul, ol) { padding-left: var(--spacing-xl); } .portfolio-stage__body :where(img) { max-width: 100%; height: auto; border-radius: var(--radius-xs); } .portfolio-stage__result-summary { color: var(--clr-primary-900); margin: 0; max-width: 82rem; } .portfolio-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-lg); list-style: none; margin: 0; padding: 0; } @media (max-width: 544px) { .portfolio-metrics { grid-template-columns: 1fr; gap: var(--spacing-xs); } } .portfolio-metrics__item { color: var(--clr-primary-900); padding: 1.2rem; margin: 0; background: var(--clr-bg-section); border-radius: var(--radius-xs); } .portfolio-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg); } @media (max-width: 544px) { .portfolio-gallery { grid-template-columns: 1fr; } } .portfolio-gallery__item { margin: 0; } .portfolio-gallery__item img { width: 100%; height: auto; display: block; border-radius: var(--radius-xs); border: 1px solid var(--clr-ui-border); } .portfolio-gallery__item figcaption { color: var(--clr-text-aux); margin-top: var(--spacing-xs); } .portfolio-docs { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-lg); } .portfolio-docs__btn { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--clr-primary-900); border-radius: var(--radius-xs); color: var(--clr-primary-900); transition: color 0.2s ease, background-color 0.2s ease; } .portfolio-docs__btn:hover, .portfolio-docs__btn:focus-visible { color: var(--clr-base-white); background: var(--clr-primary-900); } .portfolio-docs__name { color: var(--clr-text-aux); } .portfolio-docs__btn:hover .portfolio-docs__name { color: rgba(255, 255, 255, 0.7); } /* Solution — Insight Consulting 스플릿 히어로 (pages/solution/insight-consulting.php) */ .sec-insight-hero { position: relative; min-height: 100vh; display: grid; align-items: center; overflow: hidden; color: var(--clr-base-white); background: var(--clr-primary-950); } .sec-insight-hero::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 50%; background: rgba(22, 22, 47, 0.64); pointer-events: none; } @media (max-width: 768px) { .sec-insight-hero::before { width: 100%; } } .sec-insight-hero__media { position: absolute; z-index: 0; inset: 0; width: 100%; } @media (max-width: 768px) { .sec-insight-hero__media { position: absolute; height: 100%; } } .sec-insight-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .sec-insight-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.7fr); gap: var(--spacing-3xl); align-items: center; width: 100%; } @media (max-width: 1024px) { .sec-insight-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.55fr); } } @media (max-width: 768px) { .sec-insight-hero__inner { grid-template-columns: 1fr; padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-3xl); } } .sec-insight-hero__copy { display: grid; gap: var(--spacing-lg); max-width: 68rem; } @media (max-width: 768px) { .sec-insight-hero__copy { max-width: 100%; } } .sec-insight-hero__identity { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-lg); align-items: center; } .sec-insight-hero__step { color: var(--clr-accent-300); letter-spacing: var(--tracking-caps); } .sec-insight-hero__category { position: relative; padding-left: var(--spacing-lg); color: var(--clr-base-white); } .sec-insight-hero__category::before { content: ""; position: absolute; top: 50%; left: 0; width: var(--spacing-md); height: 1px; background: currentColor; opacity: 0.48; } .sec-insight-hero__title { margin: 0; color: var(--clr-base-white); } .sec-insight-hero__subtitle { margin: 0; color: rgba(255, 255, 255, 0.74); } .sec-insight-hero__signature { position: relative; justify-self: end; width: clamp(20rem, 25vw, 38rem); aspect-ratio: 1; color: var(--clr-base-white); opacity: 0; animation: solution-signature-enter var(--dur-slower) var(--ease-out-expo) 0.18s forwards; } @media (max-width: 768px) { .sec-insight-hero__signature { position: relative; width: clamp(11rem, 30vw, 15rem); } } .sec-insight-hero__signature-frame, .sec-insight-hero__signature-trace, .sec-insight-hero__signature-point { position: absolute; display: block; } .sec-insight-hero__signature-frame { inset: 8%; border: 1px solid color-mix(in srgb, var(--clr-base-white) 24%, transparent); } .sec-insight-hero__signature-trace { background: color-mix(in srgb, var(--clr-base-white) 44%, transparent); transform-origin: left center; animation: solution-signature-trace var(--dur-slower) var(--ease-out-expo) 0.36s both; } .sec-insight-hero__signature-trace--a { top: 50%; left: 8%; width: 84%; height: 1px; } .sec-insight-hero__signature-trace--b { top: 8%; left: 50%; width: 1px; height: 84%; transform-origin: center top; } .sec-insight-hero__signature-point { width: clamp(0.8rem, 0.75vw, 1.2rem); aspect-ratio: 1; border: 1px solid var(--clr-accent-300); border-radius: 50%; background: var(--clr-primary-950); box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--clr-primary-950) 42%, transparent); animation: solution-signature-point var(--dur-slow) var(--ease-out-quart) both; } .sec-insight-hero__signature-point--1 { animation-delay: 0.46s; } .sec-insight-hero__signature-point--2 { animation-delay: 0.52s; } .sec-insight-hero__signature-point--3 { animation-delay: 0.58s; } .sec-insight-hero__signature-point--4 { animation-delay: 0.64s; } .sec-insight-hero__signature-point--5 { animation-delay: 0.7s; } .sec-insight-hero--diagnosis .sec-insight-hero__signature-frame { border-radius: 50%; } .sec-insight-hero--diagnosis .sec-insight-hero__signature-point--1 { top: 18%; left: 42%; } .sec-insight-hero--diagnosis .sec-insight-hero__signature-point--2 { top: 34%; left: 68%; } .sec-insight-hero--diagnosis .sec-insight-hero__signature-point--3 { top: 52%; left: 48%; background: var(--clr-accent-300); } .sec-insight-hero--diagnosis .sec-insight-hero__signature-point--4 { top: 68%; left: 24%; } .sec-insight-hero--diagnosis .sec-insight-hero__signature-point--5 { top: 76%; left: 72%; } .sec-insight-hero--setup .sec-insight-hero__signature-frame { inset: 12%; } .sec-insight-hero--setup .sec-insight-hero__signature-trace--a { top: 36%; } .sec-insight-hero--setup .sec-insight-hero__signature-trace--b { left: 64%; } .sec-insight-hero--setup .sec-insight-hero__signature-point { border-radius: 0; } .sec-insight-hero--setup .sec-insight-hero__signature-point--1 { top: 22%; left: 22%; } .sec-insight-hero--setup .sec-insight-hero__signature-point--2 { top: 22%; left: 62%; } .sec-insight-hero--setup .sec-insight-hero__signature-point--3 { top: 46%; left: 42%; background: var(--clr-accent-300); } .sec-insight-hero--setup .sec-insight-hero__signature-point--4 { top: 70%; left: 22%; } .sec-insight-hero--setup .sec-insight-hero__signature-point--5 { top: 70%; left: 62%; } .sec-insight-hero--marketing .sec-insight-hero__signature-frame { border-radius: 50% 50% 0 50%; transform: rotate(45deg) scale(0.72); } .sec-insight-hero--marketing .sec-insight-hero__signature-trace--a { top: 58%; transform: rotate(-18deg); } .sec-insight-hero--marketing .sec-insight-hero__signature-trace--b { left: 64%; transform: rotate(22deg); } .sec-insight-hero--marketing .sec-insight-hero__signature-point--1 { top: 20%; left: 18%; } .sec-insight-hero--marketing .sec-insight-hero__signature-point--2 { top: 34%; left: 38%; } .sec-insight-hero--marketing .sec-insight-hero__signature-point--3 { top: 50%; left: 58%; background: var(--clr-accent-300); } .sec-insight-hero--marketing .sec-insight-hero__signature-point--4 { top: 66%; left: 70%; } .sec-insight-hero--marketing .sec-insight-hero__signature-point--5 { top: 78%; left: 80%; } .sec-insight-hero--operation .sec-insight-hero__signature-frame { inset: 20% 8%; border-radius: 999px; } .sec-insight-hero--operation .sec-insight-hero__signature-trace--a { top: 50%; } .sec-insight-hero--operation .sec-insight-hero__signature-trace--b { display: none; } .sec-insight-hero--operation .sec-insight-hero__signature-point { top: calc(50% - 0.5rem); } .sec-insight-hero--operation .sec-insight-hero__signature-point--1 { left: 12%; } .sec-insight-hero--operation .sec-insight-hero__signature-point--2 { left: 30%; } .sec-insight-hero--operation .sec-insight-hero__signature-point--3 { left: 48%; background: var(--clr-accent-300); } .sec-insight-hero--operation .sec-insight-hero__signature-point--4 { left: 66%; } .sec-insight-hero--operation .sec-insight-hero__signature-point--5 { left: 84%; } .sec-insight-hero--scale-up .sec-insight-hero__signature-frame { inset: 15%; transform: rotate(-8deg); } .sec-insight-hero--scale-up .sec-insight-hero__signature-trace--a { top: 62%; transform: rotate(-34deg); } .sec-insight-hero--scale-up .sec-insight-hero__signature-trace--b { left: 70%; transform: rotate(18deg); } .sec-insight-hero--scale-up .sec-insight-hero__signature-point--1 { top: 72%; left: 16%; } .sec-insight-hero--scale-up .sec-insight-hero__signature-point--2 { top: 58%; left: 34%; } .sec-insight-hero--scale-up .sec-insight-hero__signature-point--3 { top: 40%; left: 52%; } .sec-insight-hero--scale-up .sec-insight-hero__signature-point--4 { top: 24%; left: 68%; } .sec-insight-hero--scale-up .sec-insight-hero__signature-point--5 { top: 10%; left: 82%; background: var(--clr-accent-300); } @media (max-width: 768px) { .sec-insight-hero { min-height: 72vh; align-items: center; } } @media (prefers-reduced-motion: reduce) { .sec-insight-hero__signature, .sec-insight-hero__signature-trace, .sec-insight-hero__signature-point { animation: none; opacity: 1; } } @keyframes solution-signature-enter { from { opacity: 0; transform: translateY(var(--spacing-lg)); } to { opacity: 0.82; transform: translateY(0); } } @keyframes solution-signature-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } } @keyframes solution-signature-point { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } } .sec-solution-flow { overflow: hidden; color: var(--clr-text-base); background: var(--clr-bg-page); border-top: 1px solid var(--clr-ui-border); } .sec-solution-flow__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(24rem, 0.8fr); gap: var(--spacing-sm) var(--spacing-3xl); align-items: end; margin-bottom: var(--spacing-3xl); } @media (max-width: 1024px) { .sec-solution-flow__head { grid-template-columns: 1fr; } } .sec-solution-flow__eyebrow { grid-column: 1/-1; color: var(--clr-accent-700); letter-spacing: var(--tracking-caps); } .sec-solution-flow__title { max-width: 82rem; margin: 0; color: var(--clr-primary-900); } .sec-solution-flow__lead { max-width: 42rem; margin: 0; color: var(--clr-text-sub); } .sec-solution-flow__viewport { min-width: 0; } .sec-solution-flow__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } @media (max-width: 768px) { .sec-solution-flow__list { grid-template-columns: 1fr; } } .sec-solution-flow__item { position: relative; min-width: 0; border-top: 1px solid var(--clr-ui-border); } .sec-solution-flow__item::before { content: ""; position: absolute; z-index: 2; top: -1px; left: 0; width: 0; height: 2px; background: var(--clr-accent-500); transition: width var(--dur-slow) var(--ease-out-expo); } .sec-solution-flow__item.is-current::before { width: 100%; } .sec-solution-flow__link { display: grid; grid-template-rows: auto 1fr auto; gap: var(--spacing-xl); min-height: 31rem; padding: var(--spacing-xl); color: inherit; text-decoration: none; border-right: 1px solid var(--clr-ui-border); transition: background-color var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart); } @media (max-width: 1024px) { .sec-solution-flow__link { min-height: 28rem; padding-inline: var(--spacing-md); } } @media (max-width: 768px) { .sec-solution-flow__link { grid-template-rows: auto; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--spacing-lg); min-height: 0; padding: var(--spacing-xl) 0; border-right: 0; } } .sec-solution-flow__item:last-child .sec-solution-flow__link { border-right: 0; } .sec-solution-flow__rail { display: flex; gap: var(--spacing-sm); align-items: center; } @media (max-width: 768px) { .sec-solution-flow__rail { align-self: start; } } .sec-solution-flow__no { color: var(--clr-text-aux); transition: color var(--dur-base) var(--ease-out-quart); } .sec-solution-flow__marker { width: 0.7rem; aspect-ratio: 1; border: 1px solid var(--clr-text-aux); border-radius: 50%; transition: border-color var(--dur-base) var(--ease-out-quart), background-color var(--dur-base) var(--ease-out-quart); } .sec-solution-flow__copy { display: grid; align-content: start; gap: var(--spacing-sm); } .sec-solution-flow__category { color: var(--clr-accent-700); letter-spacing: var(--tracking-caps); } .sec-solution-flow__name { color: var(--clr-primary-900); } .sec-solution-flow__desc { color: var(--clr-text-sub); } .sec-solution-flow__action { display: inline-flex; gap: var(--spacing-sm); align-items: center; justify-self: start; color: var(--clr-primary-700); } .sec-solution-flow__action svg { width: 2rem; height: 2rem; transition: transform var(--dur-base) var(--ease-out-quart); } @media (max-width: 768px) { .sec-solution-flow__action { align-self: end; } } .sec-solution-flow__item.is-current .sec-solution-flow__link { color: var(--clr-base-white); background: var(--clr-primary-900); } .sec-solution-flow__item.is-current .sec-solution-flow__no, .sec-solution-flow__item.is-current .sec-solution-flow__category, .sec-solution-flow__item.is-current .sec-solution-flow__name, .sec-solution-flow__item.is-current .sec-solution-flow__action { color: var(--clr-base-white); } .sec-solution-flow__item.is-current .sec-solution-flow__desc { color: color-mix(in srgb, var(--clr-base-white) 72%, transparent); } .sec-solution-flow__item.is-current .sec-solution-flow__marker { border-color: var(--clr-accent-300); background: var(--clr-accent-300); } @media (hover: hover) { .sec-solution-flow__item:not(.is-current) .sec-solution-flow__link:hover { background: var(--clr-ui-hover-bg); } .sec-solution-flow__item:not(.is-current) .sec-solution-flow__link:hover .sec-solution-flow__action svg { transform: translateX(var(--spacing-xs)); } .sec-solution-flow__item:not(.is-current):hover::before { width: 100%; } } .sec-solution-flow__link:focus-visible { position: relative; z-index: 3; outline: 2px solid var(--clr-accent-500); outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .sec-solution-flow__item::before, .sec-solution-flow__link, .sec-solution-flow__no, .sec-solution-flow__marker, .sec-solution-flow__action svg { transition: none; } .sec-solution-flow__item:not(.is-current) .sec-solution-flow__link:hover .sec-solution-flow__action svg { transform: none; } } .no-visual { position: relative; overflow: hidden; padding: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem) clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem) 0; display: flex; flex-direction: column; height: 90svh; } @media (max-width: 1920px) { .no-visual { padding: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem) clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem) 20rem; height: auto; } } @media (max-width: 768px) { .no-visual { height: auto; padding-bottom: clamp(8rem, 7.7669902913vw + 5.0873786408rem, 20rem); } } .no-visual .title-txt { --slogan-gap: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2rem); --brand-offset: 0px; --brand-gap: 0px; display: flex; flex-direction: column; } .no-visual .title-txt .line-mask { display: block; overflow: hidden; padding-bottom: clamp(0.5rem, 0.9708737864vw + 0.1359223301rem, 2rem); } .no-visual .title-txt .line-mask h2 { font-size: var(--display-xl-fs); } @media (max-width: 1920px) { .no-visual .title-txt .line-mask h2 { font-size: var(--display-xl-fs); } } .no-visual .title-txt .slogan-line { display: inline-block; will-change: transform, padding-left; } .no-visual .title-txt .slogan-brand { padding-left: calc(var(--brand-offset) + var(--brand-gap)); } .no-visual .title-txt .img-reveal { display: flex; align-items: center; position: relative; } .no-visual .title-txt .img-box { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 100%; overflow: hidden; will-change: width; border-radius: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); display: flex; } .no-visual .title-txt .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; } .no-visual .sub-title-txt { display: flex; flex-direction: column; margin-top: clamp(3rem, 3.2362459547vw + 1.786407767rem, 8rem); } .no-visual .sub-title-txt p { margin-left: auto; font-size: var(--heading-sm-fs); } .no-visual .scroll-down { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4rem; color: #666; transition: color 0.3s, gap 0.45s; display: flex; align-items: center; gap: 0.2rem; } @media (max-width: 768px) { .no-visual .scroll-down { display: none; } } .no-visual .scroll-down:hover { color: #000; gap: 0.8rem; } .no-visual--hero { height: 100svh; padding: 0; } .no-visual--hero .no-visual__bg { position: absolute; inset: 0; background-image: url("/assets/images/home-hero.jpg"); background-size: cover; background-position: center; z-index: 0; } .no-visual--hero .no-visual__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%); z-index: 1; } .no-visual--hero .no-visual__body { position: relative; z-index: 2; margin-top: auto; padding: 0 clamp(2.4rem, 3.6245954693vw + 1.040776699rem, 8rem) clamp(6rem, 2.5889967638vw + 5.0291262136rem, 10rem); } .no-visual--hero .no-visual__body .title-txt .line-mask .no-visual__headline { color: #fff; font-size: var(--display-xl-fs); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } .no-visual--hero .scroll-down { color: rgba(255, 255, 255, 0.7); z-index: 2; } .no-visual--hero .scroll-down:hover { color: #fff; } .no-show { position: relative; overflow: hidden; } .no-show figure { display: flex; position: relative; overflow: hidden; aspect-ratio: 16/9; margin: 0 clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); border-radius: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem); } @media (max-width: 1024px) { .no-show figure { aspect-ratio: auto; height: 100%; } } .no-show figure video { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transform-origin: 50% 50%; } /* HOME — Our People · Latest News · Events · Research * 4개 BEM 블록 정의는 sections/_sec-home-{people-grid,news-bento,events-bento,research-tg-list}.scss * 4개 파일로 추출 (2026-05-31, 절대규칙 #19). */ /* ===================================================== EXISTING — no-projects ===================================================== */ .no-projects { position: relative; } .no-projects .inner { padding: 0 clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); } .no-projects h2 { position: relative; width: max-content; margin: 0 auto; } .no-projects h2 .count { position: absolute; right: -4rem; top: -0.5rem; padding: clamp(0.5rem, 0.3236245955vw + 0.3786407767rem, 1rem) clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2rem); font-size: var(--heading-xs-fs); background-color: var(--clr-primary-400); color: #fff; display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-weight: 600; border-radius: 5.5rem; transform-origin: center center; overflow: hidden; z-index: 2; } @media (max-width: 544px) { .no-projects h2 .count { right: -2rem; top: -1.5rem; } } .no-projects .projects-wrap { position: relative; display: flex; gap: 4.8rem; align-items: flex-start; } @media (max-width: 768px) { .no-projects .projects-wrap { gap: 3.2rem; flex-direction: column; align-items: stretch; margin-top: clamp(3.2rem, 6.213592233vw + 0.8699029126rem, 12.8rem); } } .no-projects .projects-wrap .sticky-wrap { position: sticky; top: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem); height: fit-content; width: min(clamp(20rem, 18.1229773463vw + 13.2038834951rem, 48rem), 22%); min-width: clamp(20rem, 18.1229773463vw + 13.2038834951rem, 48rem); align-self: flex-start; } @media (max-width: 768px) { .no-projects .projects-wrap .sticky-wrap { position: relative; width: 100%; top: 0; } } .no-projects .projects-wrap .filter-box { position: relative; width: 100%; align-self: flex-start; background-color: #fff; padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.8rem); border-radius: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } @media (max-width: 768px) { .no-projects .projects-wrap .filter-box.is-fixed { position: fixed; top: 0; left: 0; width: 100%; border-radius: 0; z-index: 40; } } @media (max-width: 768px) { .no-projects .projects-wrap .filter-box .count { text-align: center; font-size: var(--heading-xs-fs); } } .no-projects .projects-wrap .filter-box .no-filter-search { position: relative; } .no-projects .projects-wrap .filter-box .no-filter-search .icon { position: absolute; left: 2rem; top: 51%; transform: translateY(-50%); cursor: auto; color: #999; font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem); } .no-projects .projects-wrap .filter-box .no-filter-search input { width: 100%; height: clamp(4.6rem, 0.2588996764vw + 4.5029126214rem, 5rem); border: 2px solid #aaa; border-radius: 5.5rem; padding: 13px 42px 13px 46px; font-size: var(--body-sm-fs); font-weight: 400; outline: none; transition: border-color 0.2s ease; } @media (max-width: 768px) { .no-projects .projects-wrap .filter-box .no-filter-search input { border-width: 1px; } } .no-projects .projects-wrap .filter-box .no-filter-search input::placeholder { color: #999; font-weight: 500; } .no-projects .projects-wrap .filter-box .no-filter-search input:focus { border-color: var(--clr-primary-500); } .no-projects .projects-wrap .filter-box .no-filter-group { position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 768px) { .no-projects .projects-wrap .filter-box .no-filter-group { display: none; } } .no-projects .projects-wrap .filter-box .no-filter-group .list { display: flex; flex-wrap: wrap; gap: 0.8rem; } .no-projects .projects-wrap .filter-box .no-filter-group .list button { border: 1px solid rgba(0, 0, 0, 0.36); border-radius: 999px; color: rgba(0, 0, 0, 0.36); font-size: var(--body-sm-fs); font-weight: 500; line-height: 1; padding: clamp(0.5rem, 0.1294498382vw + 0.4514563107rem, 0.7rem) clamp(0.9rem, 0.3236245955vw + 0.7786407767rem, 1.4rem); transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease; } .no-projects .projects-wrap .filter-box .no-filter-group .list button:hover { border-color: #000; color: #000; } .no-projects .projects-wrap .filter-box .no-filter-group .list button.active { color: #000; border-color: #000; font-weight: 500; } .no-projects .projects-wrap .filter-box .no-filter-actions { display: flex; gap: 1rem; } @media (max-width: 768px) { .no-projects .projects-wrap .filter-box .no-filter-actions { margin-top: 1.2rem; } } .no-projects .projects-wrap .filter-box .no-filter-actions button { border-radius: 5.5rem; padding: 1.4rem 0.8rem; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: var(--body-sm-fs); transition: border 0.3s, background-color 0.3s; } .no-projects .projects-wrap .filter-box .no-filter-actions .reset { width: 30%; border: 1px solid #aaa; background-color: #fff; } @media (max-width: 768px) { .no-projects .projects-wrap .filter-box .no-filter-actions .reset { width: 25%; } } @media (max-width: 450px) { .no-projects .projects-wrap .filter-box .no-filter-actions .reset { display: none; } } .no-projects .projects-wrap .filter-box .no-filter-actions .reset:hover { border-color: #000; } .no-projects .projects-wrap .filter-box .no-filter-actions .category { width: 30%; border: 1px solid #aaa; background-color: #fff; display: none; } @media (max-width: 768px) { .no-projects .projects-wrap .filter-box .no-filter-actions .category { width: 25%; display: flex; } } @media (max-width: 450px) { .no-projects .projects-wrap .filter-box .no-filter-actions .category { width: 50%; } } .no-projects .projects-wrap .filter-box .no-filter-actions .category:hover { border-color: #000; } .no-projects .projects-wrap .filter-box .no-filter-actions .submit { width: 70%; background-color: #000; color: #fff; } @media (max-width: 768px) { .no-projects .projects-wrap .filter-box .no-filter-actions .submit { width: 50%; } } .no-projects .projects-wrap .filter-box .no-filter-actions .submit:hover { background-color: var(--clr-primary-400); } .no-projects .projects-wrap .filter-mobile-wrap { position: fixed; inset: 0px; z-index: 99999; display: none; pointer-events: none; } .no-projects .projects-wrap .filter-mobile-wrap.is-open { display: block; pointer-events: auto; } .no-projects .projects-wrap .filter-mobile-wrap .overlay { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.4); } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box { position: absolute; bottom: 0px; left: 0px; right: 0px; background: #fff; border-radius: 2rem 2rem 0px 0px; padding: 2rem; max-height: 80vh; overflow-y: auto; display: flex; flex-direction: column; z-index: 2; } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .top-group { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 1rem; } @media (max-width: 450px) { .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .top-group { align-items: center; } } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .top-group p { font-size: var(--body-lg-fs); } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .top-group .close { cursor: pointer; font-size: var(--body-lg-fs); } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group { position: relative; margin-top: 2rem; } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group h3 { font-size: var(--body-md-fs); margin-bottom: 1.2rem; } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group .list { display: flex; flex-wrap: wrap; gap: 0.8rem; } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group .list button { border: 1px solid rgba(0, 0, 0, 0.36); border-radius: 999px; color: rgba(0, 0, 0, 0.36); font-size: var(--body-sm-fs); font-weight: 500; line-height: 1; padding: 1rem 1.6rem; transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease; } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group .list button:hover { border-color: #000; color: #000; } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-group .list button.active { color: #000; border-color: #000; font-weight: 500; } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions { display: flex; gap: 1rem; padding-top: 2rem; padding-bottom: 1.2rem; border-top: 1px solid rgba(0, 0, 0, 0.2); } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions button { border-radius: 5.5rem; padding: 1.4rem 0.8rem; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: var(--body-sm-fs); transition: border 0.3s, background-color 0.3s; } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions .reset { width: 50%; border: 1px solid #aaa; background-color: #fff; } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions .reset:hover { border-color: #000; } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions .submit { width: 50%; background-color: #000; color: #fff; } .no-projects .projects-wrap .filter-mobile-wrap .filter-mobile-box .no-filter-actions .submit:hover { background-color: #222; } .no-projects .projects-wrap .projects-list { flex: 1 1 0%; min-width: 0px; width: 100%; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4.8rem 2.4rem; } @media (max-width: 1920px) { .no-projects .projects-wrap .projects-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .no-projects .projects-wrap .projects-list { grid-template-columns: repeat(1, 1fr); } } @media (max-width: 768px) { .no-projects .projects-wrap .projects-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .no-projects .projects-wrap .projects-list { grid-template-columns: repeat(1, 1fr); gap: 2.4rem; } } .no-projects .projects-wrap .projects-list li.no-projects-empty { grid-column: 1/-1; display: grid; place-items: center; padding: 7.2rem 0; width: 100%; text-align: center !important; } .no-projects .projects-wrap .projects-list li.no-projects-empty .no-projects-empty__inner { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.8rem; margin: 0 auto; } .no-projects .projects-wrap .projects-list li.no-projects-empty .no-projects-empty__icon { width: 6.4rem; height: 6.4rem; border: 2px solid #d9d9d9; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #b7b7b7; font-size: var(--heading-lg-fs); line-height: 1; } .no-projects .projects-wrap .projects-list li.no-projects-empty .no-projects-empty__text { color: #5a5a5a; font-size: var(--heading-xs-fs); font-weight: 500; line-height: 1.35; text-align: center !important; } @media (max-width: 768px) { .no-projects .projects-wrap .projects-list li.no-projects-empty { padding: 4.8rem 0; } .no-projects .projects-wrap .projects-list li.no-projects-empty .no-projects-empty__inner { gap: 2rem; } .no-projects .projects-wrap .projects-list li.no-projects-empty .no-projects-empty__text { font-size: var(--body-lg-fs); } } .no-projects .projects-wrap .projects-list li a { position: relative; } .no-projects .projects-wrap .projects-list li a figure { display: flex; overflow: hidden; aspect-ratio: 16/9; border-radius: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); position: relative; } .no-projects .projects-wrap .projects-list li a figure svg { position: absolute; width: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); height: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); right: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2rem); bottom: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2rem); z-index: 2; background-color: #333; border-radius: 50%; transition: background-color 0.3s, transform 0.45s; } .no-projects .projects-wrap .projects-list li a figure svg path { fill: #fff; } .no-projects .projects-wrap .projects-list li a figure img { transition: transform 0.45s; } .no-projects .projects-wrap .projects-list li a .f-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; } .no-projects .projects-wrap .projects-list li a .f-wrap .category-list { display: flex; flex-wrap: wrap; gap: 0.6rem; } .no-projects .projects-wrap .projects-list li a .f-wrap .category-list li { border-radius: 5.5rem; align-items: center; justify-content: center; padding: clamp(0.4rem, 0.0647249191vw + 0.3757281553rem, 0.5rem) clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); color: #666; border: 1px solid rgba(0, 0, 0, 0.2); } .no-projects .projects-wrap .projects-list li a:hover figure svg { background-color: var(--clr-primary-400); transform: rotate(180deg); } .no-projects .projects-wrap .projects-list li a:hover figure img { transform: scale(1.05); } .no-projects .projects-wrap .projects-modal-wrap { position: fixed; inset: 0px; z-index: 99999; pointer-events: none; } .no-projects .projects-wrap .projects-modal-wrap.is-open { pointer-events: auto; } .no-projects .projects-wrap .projects-modal-wrap.is-open .overlay { opacity: 1; } .no-projects .projects-wrap .projects-modal-wrap.is-open .projects-modal-box { transform: translateY(0%); opacity: 1; } .no-projects .projects-wrap .projects-modal-wrap .overlay { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.35s ease; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box { position: absolute; bottom: 0px; left: 0px; right: 0px; background: #fff; max-width: 164rem; margin: 0 auto; transition: 0.3s ease-in-out; border-radius: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem) clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem) 0px 0px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; z-index: 2; opacity: 0; transform: translateY(100%); transition: transform 0.35s ease, opacity 0.35s ease; scrollbar-width: none; -ms-overflow-style: none; padding: 0 clamp(1.5rem, 4.2071197411vw - 0.0776699029rem, 8rem); } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box::-webkit-scrollbar { display: none; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-close { position: sticky; top: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem); right: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem); align-self: flex-end; min-width: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem); min-height: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem); border-radius: 50%; background: #ebebeb; display: flex; align-items: center; justify-content: center; font-size: var(--body-lg-fs); transition: border-color 0.25s ease, background-color 0.25s ease; z-index: 4; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-close:hover { background-color: #dfdfdf; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info { display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2rem); padding: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem) 0 0; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .category-list { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; justify-content: center; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .category-list li { background: #f7f7f7; color: #666; border-radius: 5.5rem; font-size: var(--body-sm-fs); padding: clamp(0.4rem, 0.1941747573vw + 0.327184466rem, 0.7rem) clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); text-align: center; display: flex; align-items: center; justify-content: center; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap { width: 100%; margin-top: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem); position: relative; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap iframe { width: 100%; min-height: 60svh; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.1); } @media (max-width: 768px) { .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap iframe { min-height: 80svh; } } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap .site-direct-link { position: absolute; left: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2rem); bottom: clamp(2rem, 0.6472491909vw + 1.7572815534rem, 3rem); z-index: 2; border-radius: 5.5rem; padding: 1.1rem 1.6rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(2px); transition: background-color 0.25s ease; border: 1px solid rgba(255, 255, 255, 0.1); display: inline-flex; align-items: center; gap: 0.6rem; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap .site-direct-link i { color: #fff; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-info .iframe-wrap .site-direct-link:hover { background: var(--clr-primary-500); } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-footer { padding: clamp(3rem, 0.6472491909vw + 2.7572815534rem, 4rem) 0 clamp(4rem, 1.2944983819vw + 3.5145631068rem, 6rem); background: #fff; display: flex; align-items: center; justify-content: space-between; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-footer .modal-nav { width: 4.4rem; height: 4.4rem; border-radius: 50%; background-color: #eee; color: #333; display: inline-flex; align-items: center; justify-content: center; font-size: var(--body-lg-fs); transition: background-color 0.25s ease; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-footer .modal-nav:hover { background-color: #d9d9d9; } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-footer .inquiry-btn { min-width: clamp(19rem, 9.7087378641vw + 15.359223301rem, 34rem); border-radius: 5.5rem; padding: 1.6rem 2.4rem; text-align: center; line-height: 1; transition: background-color 0.3s; color: #fff; background-color: var(--clr-primary-400); } .no-projects .projects-wrap .projects-modal-wrap .projects-modal-box .projects-modal-footer .inquiry-btn:hover { background-color: var(--clr-primary-800); } .sub-menu-hero { position: relative; overflow: hidden; background: var(--clr-base-black) center/cover no-repeat; color: var(--clr-base-white); height: 90svh; user-select: none; --hero-orbit-stroke: #5300c5; --hero-disc-fill: #4900b0; } @media (max-width: 1024px) { .sub-menu-hero { height: auto; min-height: 100svh; } } .sub-menu-hero__inner { position: relative; height: 100%; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: stretch; } @media (max-width: 1024px) { .sub-menu-hero__inner { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); min-height: inherit; } } .sub-menu-hero__column { position: relative; z-index: 2; overflow: visible; } .sub-menu-hero__wheel { position: relative; width: 100%; height: 100%; cursor: grab; touch-action: none; overflow: visible; } .sub-menu-hero__wheel:active { cursor: grabbing; } @media (max-width: 1024px) { .sub-menu-hero__wheel { cursor: default; touch-action: auto; } .sub-menu-hero__wheel:active { cursor: default; } } .sub-menu-hero__orbit { position: absolute; border: 4px solid var(--hero-orbit-stroke); border-radius: 999rem; pointer-events: none; box-sizing: border-box; z-index: 1; } .sub-menu-hero__wheel-track { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; } .sub-menu-hero__wheel-item { position: absolute; top: 0; left: 0; width: clamp(9rem, 13vw, 20rem); aspect-ratio: 5/6; z-index: 2; opacity: var(--item-opacity, 0); transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%)) scale(var(--scale, 1)); transform-origin: center center; will-change: transform, opacity; pointer-events: auto; cursor: pointer; } @media (max-width: 1024px) { .sub-menu-hero__wheel-item { width: clamp(7rem, 16vw, 13rem); } } .sub-menu-hero__wheel-image { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 999rem; overflow: hidden; background: var(--hero-disc-fill); } .sub-menu-hero__wheel-image img { width: 82%; height: 82%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; } .sub-menu-hero__wheel-text { position: absolute; top: 50%; left: calc(100% + clamp(1.2rem, 0.6472491909vw + 0.9572815534rem, 2.2rem)); transform: translateY(-50%); color: var(--clr-base-white); white-space: nowrap; pointer-events: none; } @media (max-width: 1024px) { .sub-menu-hero__wheel-text { display: none; } } .sub-menu-hero__wheel-eyebrow { color: rgba(255, 255, 255, 0.55); margin-bottom: 0.4rem; } .sub-menu-hero__wheel-name { line-height: 1.2; } .sub-menu-hero__column--right .sub-menu-hero__wheel-text { left: auto; right: calc(100% + clamp(1.2rem, 0.6472491909vw + 0.9572815534rem, 2.2rem)); text-align: right; } @media (max-width: 1024px) { .sub-menu-hero__column--right .sub-menu-hero__wheel-text { display: none; } } .sub-menu-hero__center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 3; padding: clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4rem) clamp(0.8rem, 1.0355987055vw + 0.4116504854rem, 2.4rem); pointer-events: none; } @media (max-width: 1024px) { .sub-menu-hero__center { padding: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem) clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); } } .sub-menu-hero__title { margin-bottom: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 2.8rem); } @media (max-width: 1024px) { .sub-menu-hero__title { margin-bottom: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem); } } .sub-menu-hero__title-en { line-height: 1.05; letter-spacing: 0.02em; } @media (max-width: 1024px) { .sub-menu-hero__title-en { display: none; } } .sub-menu-hero__title-ko { margin-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); color: rgba(255, 255, 255, 0.85); } @media (max-width: 1024px) { .sub-menu-hero__title-ko { margin-top: 0; } } .sub-menu-hero__set { position: relative; list-style: none; margin: 0; padding: 0; width: 100%; min-height: clamp(30rem, 36vw, 44rem); } @media (max-width: 1024px) { .sub-menu-hero__set { min-height: clamp(24rem, 62vw, 32rem); } } .sub-menu-hero__set-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.96); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .sub-menu-hero__set-item.is-active { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 1; } .sub-menu-hero__set-link { display: flex; flex-direction: column; align-items: center; gap: clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.2rem); text-decoration: none; color: inherit; } .sub-menu-hero__set-link:hover .sub-menu-hero__set-image, .sub-menu-hero__set-link:focus-visible .sub-menu-hero__set-image { transform: scale(1.1); } .sub-menu-hero__set-link:focus-visible { outline: 2px solid var(--clr-base-white); outline-offset: 6px; border-radius: 8px; } @media (max-width: 1024px) { .sub-menu-hero__set-link { gap: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.4rem); } } .sub-menu-hero__set-image { width: min(100%, clamp(28rem, 11.6504854369vw + 23.6310679612rem, 46rem)); transform-origin: center center; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } @media (max-width: 544px) { .sub-menu-hero__set-image { width: min(100%, 34rem); } } @media (max-width: 1024px) { .sub-menu-hero__set-image { width: min(100%, clamp(16rem, 38vw, 22rem)); } } .sub-menu-hero__set-image img { width: 100%; height: auto; object-fit: contain; } .sub-menu-hero__set-info { display: flex; flex-direction: column; align-items: center; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } @media (max-width: 1024px) { .sub-menu-hero__set-info { gap: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); } } .sub-menu-hero__set-desc { color: rgba(255, 255, 255, 0.85); } .sub-menu-hero__set-price { display: inline-flex; align-items: baseline; gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); } .sub-menu-hero__set-before { color: rgba(255, 255, 255, 0.5); text-decoration: line-through; text-decoration-thickness: 1px; } html.is-brand-locked, html.is-brand-locked body { height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; } .intro { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; background-color: #000; overflow: hidden; transition: opacity 1.2s ease; will-change: opacity; } .intro.is-exiting #sky, .intro.is-exiting > p, .intro.is-exiting > img, .intro.is-exiting .intro-crawl, .intro.is-exiting .intro-skip { opacity: 0; visibility: hidden; animation: none; transition: none; } .intro.is-hidden { opacity: 0; pointer-events: none; } .intro #sky { position: absolute; inset: 0; z-index: 0; } .intro > p { position: absolute; top: 50%; width: 100%; left: 50%; transform: translate(-50%, -50%); z-index: 1; opacity: 0; padding: 0 2rem; will-change: opacity; animation: brand-intro-text-in 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards, brand-intro-text-out 0.9s cubic-bezier(0.4, 0, 0.6, 1) 3.4s forwards; } @media (prefers-reduced-motion: reduce) { .intro > p { opacity: 1; animation: none; } } .intro > p br { display: block !important; } @media (max-width: 544px) { .intro > p br { display: none !important; } } .intro > img { position: absolute; top: 50%; left: 50%; width: 70vw; height: auto; z-index: 1; opacity: 0; transform: translate(-50%, calc(-50% + 20vh)) scale(1); will-change: transform, opacity; animation: brand-intro-logo-appear 1ms linear 4.3s forwards, brand-intro-logo-recede 3s linear 4.31s forwards; } @media (prefers-reduced-motion: reduce) { .intro > img { opacity: 0; transform: translate(-50%, calc(-50% - 30vh)) scale(0.02); animation: none; } } .intro .intro-skip { position: absolute; left: 50%; bottom: clamp(6rem, 3.8834951456vw + 4.5436893204rem, 12rem); transform: translateX(-50%); z-index: 2; display: inline-flex; padding: 0.8rem 2.4rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; backdrop-filter: blur(0.6rem); -webkit-backdrop-filter: blur(0.6rem); } .intro .intro-skip:hover, .intro .intro-skip:focus-visible { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.7); } .intro .intro-crawl { display: flex; justify-content: center; position: absolute; inset: 0; overflow: hidden; perspective: 400px; perspective-origin: 50% 50%; z-index: 1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%); } .intro .intro-crawl > div { position: relative; top: 150%; transform-origin: 50% 100%; line-height: 1.2; animation: brand-intro-crawl 60s linear 6.5s forwards; will-change: top, transform; } .intro .intro-crawl p { margin: 0 0 clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem); font-size: var(--display-xs-fs); font-family: "Pretendard"; white-space: nowrap; } .intro .intro-crawl p br { display: block !important; } .intro .intro-crawl p:last-child { margin-bottom: 0; } @keyframes brand-intro-text-in { from { opacity: 0; } to { opacity: 1; } } @keyframes brand-intro-text-out { from { opacity: 1; } to { opacity: 0; } } @keyframes brand-intro-logo-appear { to { opacity: 1; } } @keyframes brand-intro-logo-recede { 0% { transform: translate(-50%, calc(-50% + 20vh)) scale(1); opacity: 1; } 50% { opacity: 1; } 100% { transform: translate(-50%, calc(-50% - 30vh)) scale(0.02); opacity: 0; } } @keyframes brand-intro-crawl { 0% { top: 150%; transform: rotateX(20deg) translateZ(0); } 100% { top: -12000px; transform: rotateX(25deg) translateZ(-5000px); } } @media (max-width: 768px) { @keyframes brand-intro-crawl { 0% { top: 120%; transform: rotateX(20deg) translateZ(0); } 100% { top: -6000px; transform: rotateX(25deg) translateZ(-2500px); } } } .star { opacity: 0; position: absolute; background: white; box-shadow: 0px 0px 20px 0px rgb(255, 255, 255); border-radius: 100%; transform-origin: 0, 0; animation-timing-function: linear, linear !important; animation-iteration-count: infinite, infinite !important; animation-delay: -30s, -30s !important; } .size-1 { width: 1px; height: 1px; } .size-2 { width: 2px; height: 2px; } .axis-1 { animation: anim0 15782ms, fade1 15782ms; } .axis-2 { animation: anim0 30733ms, fade5 30733ms; } .axis-3 { animation: anim0 20430ms, fade2 20430ms; } .axis-4 { animation: anim4 10234ms, fade1 10234ms; } .axis-5 { animation: anim4 19510ms, fade2 19510ms; } .axis-6 { animation: anim4 31544ms, fade9 31544ms; } .axis-7 { animation: anim4 27389ms, fade9 27389ms; } .axis-8 { animation: anim8 26042ms, fade1 26042ms; } .axis-9 { animation: anim8 34994ms, fade6 34994ms; } .axis-10 { animation: anim8 29587ms, fade7 29587ms; } .axis-11 { animation: anim8 44717ms, fade7 44717ms; } .axis-12 { animation: anim12 38755ms, fade7 38755ms; } .axis-13 { animation: anim12 30036ms, fade2 30036ms; } .axis-14 { animation: anim12 27222ms, fade5 27222ms; } .axis-15 { animation: anim12 31378ms, fade3 31378ms; } .axis-16 { animation: anim16 43524ms, fade2 43524ms; } .axis-17 { animation: anim16 6897ms, fade8 6897ms; } .axis-18 { animation: anim16 36031ms, fade4 36031ms; } .axis-19 { animation: anim16 39883ms, fade5 39883ms; } .axis-20 { animation: anim20 34445ms, fade5 34445ms; } .axis-21 { animation: anim20 32094ms, fade6 32094ms; } .axis-22 { animation: anim20 12546ms, fade10 12546ms; } .axis-23 { animation: anim20 30015ms, fade9 30015ms; } .axis-24 { animation: anim24 32628ms, fade5 32628ms; } .axis-25 { animation: anim24 14438ms, fade1 14438ms; } .axis-26 { animation: anim24 11681ms, fade4 11681ms; } .axis-27 { animation: anim24 17137ms, fade9 17137ms; } .axis-28 { animation: anim28 42580ms, fade8 42580ms; } .axis-29 { animation: anim28 9666ms, fade5 9666ms; } .axis-30 { animation: anim28 33511ms, fade4 33511ms; } .axis-31 { animation: anim28 38168ms, fade8 38168ms; } .axis-32 { animation: anim32 37575ms, fade7 37575ms; } .axis-33 { animation: anim32 8059ms, fade9 8059ms; } .axis-34 { animation: anim32 18870ms, fade5 18870ms; } .axis-35 { animation: anim32 32219ms, fade2 32219ms; } .axis-36 { animation: anim36 31985ms, fade10 31985ms; } .axis-37 { animation: anim36 29130ms, fade5 29130ms; } .axis-38 { animation: anim36 38811ms, fade10 38811ms; } .axis-39 { animation: anim36 19642ms, fade6 19642ms; } .axis-40 { animation: anim40 21455ms, fade8 21455ms; } .axis-41 { animation: anim40 41093ms, fade4 41093ms; } .axis-42 { animation: anim40 24898ms, fade4 24898ms; } .axis-43 { animation: anim40 12864ms, fade7 12864ms; } .axis-44 { animation: anim44 41148ms, fade7 41148ms; } .axis-45 { animation: anim44 25924ms, fade9 25924ms; } .axis-46 { animation: anim44 28213ms, fade10 28213ms; } .axis-47 { animation: anim44 14732ms, fade4 14732ms; } .axis-48 { animation: anim48 11567ms, fade1 11567ms; } .axis-49 { animation: anim48 44065ms, fade8 44065ms; } .axis-50 { animation: anim48 19276ms, fade10 19276ms; } .axis-51 { animation: anim48 39397ms, fade2 39397ms; } .axis-52 { animation: anim52 18330ms, fade5 18330ms; } .axis-53 { animation: anim52 39949ms, fade1 39949ms; } .axis-54 { animation: anim52 19271ms, fade2 19271ms; } .axis-55 { animation: anim52 44438ms, fade3 44438ms; } .axis-56 { animation: anim56 21762ms, fade9 21762ms; } .axis-57 { animation: anim56 20324ms, fade4 20324ms; } .axis-58 { animation: anim56 23763ms, fade7 23763ms; } .axis-59 { animation: anim56 20218ms, fade1 20218ms; } .axis-60 { animation: anim60 20741ms, fade1 20741ms; } .axis-61 { animation: anim60 21312ms, fade8 21312ms; } .axis-62 { animation: anim60 24374ms, fade1 24374ms; } .axis-63 { animation: anim60 34144ms, fade1 34144ms; } .axis-64 { animation: anim64 27344ms, fade3 27344ms; } .axis-65 { animation: anim64 44603ms, fade7 44603ms; } .axis-66 { animation: anim64 23440ms, fade2 23440ms; } .axis-67 { animation: anim64 11471ms, fade10 11471ms; } .axis-68 { animation: anim68 10806ms, fade8 10806ms; } .axis-69 { animation: anim68 10374ms, fade7 10374ms; } .axis-70 { animation: anim68 44182ms, fade4 44182ms; } .axis-71 { animation: anim68 9601ms, fade5 9601ms; } .axis-72 { animation: anim72 7361ms, fade3 7361ms; } .axis-73 { animation: anim72 11397ms, fade1 11397ms; } .axis-74 { animation: anim72 12379ms, fade4 12379ms; } .axis-75 { animation: anim72 18830ms, fade1 18830ms; } .axis-76 { animation: anim76 21122ms, fade9 21122ms; } .axis-77 { animation: anim76 41225ms, fade8 41225ms; } .axis-78 { animation: anim76 37864ms, fade10 37864ms; } .axis-79 { animation: anim76 14643ms, fade7 14643ms; } .axis-80 { animation: anim80 41069ms, fade9 41069ms; } .axis-81 { animation: anim80 21985ms, fade10 21985ms; } .axis-82 { animation: anim80 6409ms, fade5 6409ms; } .axis-83 { animation: anim80 9511ms, fade3 9511ms; } .axis-84 { animation: anim84 30298ms, fade2 30298ms; } .axis-85 { animation: anim84 34711ms, fade1 34711ms; } .axis-86 { animation: anim84 6361ms, fade4 6361ms; } .axis-87 { animation: anim84 24293ms, fade2 24293ms; } .axis-88 { animation: anim88 28768ms, fade6 28768ms; } .axis-89 { animation: anim88 11426ms, fade3 11426ms; } .axis-90 { animation: anim88 21263ms, fade10 21263ms; } .axis-91 { animation: anim88 14724ms, fade1 14724ms; } .axis-92 { animation: anim92 42517ms, fade10 42517ms; } .axis-93 { animation: anim92 41643ms, fade4 41643ms; } .axis-94 { animation: anim92 42893ms, fade8 42893ms; } .axis-95 { animation: anim92 43963ms, fade2 43963ms; } .axis-96 { animation: anim96 5463ms, fade9 5463ms; } .axis-97 { animation: anim96 22957ms, fade9 22957ms; } .axis-98 { animation: anim96 21503ms, fade9 21503ms; } .axis-99 { animation: anim96 11065ms, fade2 11065ms; } .axis-100 { animation: anim100 21332ms, fade6 21332ms; } .axis-101 { animation: anim100 30773ms, fade10 30773ms; } .axis-102 { animation: anim100 11999ms, fade5 11999ms; } .axis-103 { animation: anim100 24771ms, fade9 24771ms; } .axis-104 { animation: anim104 14720ms, fade6 14720ms; } .axis-105 { animation: anim104 21416ms, fade5 21416ms; } .axis-106 { animation: anim104 37418ms, fade1 37418ms; } .axis-107 { animation: anim104 7912ms, fade9 7912ms; } .axis-108 { animation: anim108 23908ms, fade1 23908ms; } .axis-109 { animation: anim108 26017ms, fade8 26017ms; } .axis-110 { animation: anim108 26196ms, fade10 26196ms; } .axis-111 { animation: anim108 12204ms, fade2 12204ms; } .axis-112 { animation: anim112 23926ms, fade10 23926ms; } .axis-113 { animation: anim112 18045ms, fade6 18045ms; } .axis-114 { animation: anim112 38048ms, fade5 38048ms; } .axis-115 { animation: anim112 19930ms, fade1 19930ms; } .axis-116 { animation: anim116 18646ms, fade3 18646ms; } .axis-117 { animation: anim116 18158ms, fade6 18158ms; } .axis-118 { animation: anim116 34285ms, fade2 34285ms; } .axis-119 { animation: anim116 31130ms, fade3 31130ms; } .axis-120 { animation: anim120 39114ms, fade2 39114ms; } .axis-121 { animation: anim120 24196ms, fade6 24196ms; } .axis-122 { animation: anim120 20991ms, fade9 20991ms; } .axis-123 { animation: anim120 38265ms, fade4 38265ms; } .axis-124 { animation: anim124 29451ms, fade5 29451ms; } .axis-125 { animation: anim124 44369ms, fade8 44369ms; } .axis-126 { animation: anim124 9234ms, fade9 9234ms; } .axis-127 { animation: anim124 28330ms, fade4 28330ms; } .axis-128 { animation: anim128 31465ms, fade1 31465ms; } .axis-129 { animation: anim128 23763ms, fade5 23763ms; } .axis-130 { animation: anim128 10195ms, fade2 10195ms; } .axis-131 { animation: anim128 29670ms, fade10 29670ms; } .axis-132 { animation: anim132 33782ms, fade1 33782ms; } .axis-133 { animation: anim132 25512ms, fade8 25512ms; } .axis-134 { animation: anim132 29354ms, fade9 29354ms; } .axis-135 { animation: anim132 30531ms, fade1 30531ms; } .axis-136 { animation: anim136 44186ms, fade9 44186ms; } .axis-137 { animation: anim136 27108ms, fade4 27108ms; } .axis-138 { animation: anim136 35696ms, fade2 35696ms; } .axis-139 { animation: anim136 17729ms, fade2 17729ms; } .axis-140 { animation: anim140 13863ms, fade6 13863ms; } .axis-141 { animation: anim140 6549ms, fade6 6549ms; } .axis-142 { animation: anim140 26980ms, fade4 26980ms; } .axis-143 { animation: anim140 40436ms, fade3 40436ms; } .axis-144 { animation: anim144 13696ms, fade5 13696ms; } .axis-145 { animation: anim144 35160ms, fade9 35160ms; } .axis-146 { animation: anim144 18064ms, fade8 18064ms; } .axis-147 { animation: anim144 20462ms, fade9 20462ms; } .axis-148 { animation: anim148 9915ms, fade7 9915ms; } .axis-149 { animation: anim148 18982ms, fade2 18982ms; } .axis-150 { animation: anim148 34075ms, fade1 34075ms; } .axis-151 { animation: anim148 31393ms, fade1 31393ms; } .axis-152 { animation: anim152 31666ms, fade7 31666ms; } .axis-153 { animation: anim152 11745ms, fade6 11745ms; } .axis-154 { animation: anim152 34987ms, fade8 34987ms; } .axis-155 { animation: anim152 36615ms, fade2 36615ms; } .axis-156 { animation: anim156 38593ms, fade2 38593ms; } .axis-157 { animation: anim156 32383ms, fade7 32383ms; } .axis-158 { animation: anim156 39381ms, fade7 39381ms; } .axis-159 { animation: anim156 11232ms, fade3 11232ms; } .axis-160 { animation: anim160 7183ms, fade10 7183ms; } .axis-161 { animation: anim160 43873ms, fade2 43873ms; } .axis-162 { animation: anim160 25374ms, fade5 25374ms; } .axis-163 { animation: anim160 10166ms, fade5 10166ms; } .axis-164 { animation: anim164 25419ms, fade1 25419ms; } .axis-165 { animation: anim164 29564ms, fade5 29564ms; } .axis-166 { animation: anim164 38948ms, fade10 38948ms; } .axis-167 { animation: anim164 42067ms, fade10 42067ms; } .axis-168 { animation: anim168 7855ms, fade8 7855ms; } .axis-169 { animation: anim168 17307ms, fade2 17307ms; } .axis-170 { animation: anim168 29195ms, fade6 29195ms; } .axis-171 { animation: anim168 11282ms, fade2 11282ms; } .axis-172 { animation: anim172 7612ms, fade8 7612ms; } .axis-173 { animation: anim172 20757ms, fade2 20757ms; } .axis-174 { animation: anim172 43331ms, fade5 43331ms; } .axis-175 { animation: anim172 35930ms, fade1 35930ms; } .axis-176 { animation: anim176 20021ms, fade3 20021ms; } .axis-177 { animation: anim176 38541ms, fade8 38541ms; } .axis-178 { animation: anim176 38163ms, fade7 38163ms; } .axis-179 { animation: anim176 34042ms, fade3 34042ms; } .axis-180 { animation: anim180 8817ms, fade2 8817ms; } .axis-181 { animation: anim180 20669ms, fade4 20669ms; } .axis-182 { animation: anim180 40329ms, fade9 40329ms; } .axis-183 { animation: anim180 36879ms, fade5 36879ms; } .axis-184 { animation: anim184 44483ms, fade4 44483ms; } .axis-185 { animation: anim184 15775ms, fade4 15775ms; } .axis-186 { animation: anim184 6975ms, fade4 6975ms; } .axis-187 { animation: anim184 42123ms, fade1 42123ms; } .axis-188 { animation: anim188 20462ms, fade3 20462ms; } .axis-189 { animation: anim188 28433ms, fade6 28433ms; } .axis-190 { animation: anim188 13198ms, fade6 13198ms; } .axis-191 { animation: anim188 34857ms, fade3 34857ms; } .axis-192 { animation: anim192 44025ms, fade10 44025ms; } .axis-193 { animation: anim192 14119ms, fade6 14119ms; } .axis-194 { animation: anim192 17078ms, fade1 17078ms; } .axis-195 { animation: anim192 40570ms, fade8 40570ms; } .axis-196 { animation: anim196 38370ms, fade6 38370ms; } .axis-197 { animation: anim196 28980ms, fade2 28980ms; } .axis-198 { animation: anim196 41988ms, fade4 41988ms; } .axis-199 { animation: anim196 24076ms, fade10 24076ms; } .axis-200 { animation: anim200 34329ms, fade4 34329ms; } .axis-201 { animation: anim200 16223ms, fade10 16223ms; } .axis-202 { animation: anim200 42996ms, fade7 42996ms; } .axis-203 { animation: anim200 21644ms, fade8 21644ms; } .axis-204 { animation: anim204 24504ms, fade4 24504ms; } .axis-205 { animation: anim204 8417ms, fade10 8417ms; } .axis-206 { animation: anim204 35897ms, fade4 35897ms; } .axis-207 { animation: anim204 38284ms, fade5 38284ms; } .axis-208 { animation: anim208 31130ms, fade6 31130ms; } .axis-209 { animation: anim208 10825ms, fade9 10825ms; } .axis-210 { animation: anim208 6926ms, fade8 6926ms; } .axis-211 { animation: anim208 7222ms, fade5 7222ms; } .axis-212 { animation: anim212 11911ms, fade7 11911ms; } .axis-213 { animation: anim212 21474ms, fade3 21474ms; } .axis-214 { animation: anim212 28174ms, fade6 28174ms; } .axis-215 { animation: anim212 38765ms, fade8 38765ms; } .axis-216 { animation: anim216 15551ms, fade9 15551ms; } .axis-217 { animation: anim216 36211ms, fade9 36211ms; } .axis-218 { animation: anim216 25590ms, fade1 25590ms; } .axis-219 { animation: anim216 6754ms, fade10 6754ms; } .axis-220 { animation: anim220 39736ms, fade7 39736ms; } .axis-221 { animation: anim220 29689ms, fade7 29689ms; } .axis-222 { animation: anim220 33940ms, fade3 33940ms; } .axis-223 { animation: anim220 31206ms, fade3 31206ms; } .axis-224 { animation: anim224 26356ms, fade3 26356ms; } .axis-225 { animation: anim224 31411ms, fade6 31411ms; } .axis-226 { animation: anim224 39302ms, fade9 39302ms; } .axis-227 { animation: anim224 33302ms, fade7 33302ms; } .axis-228 { animation: anim228 44110ms, fade4 44110ms; } .axis-229 { animation: anim228 44839ms, fade8 44839ms; } .axis-230 { animation: anim228 13667ms, fade5 13667ms; } .axis-231 { animation: anim228 16717ms, fade2 16717ms; } .axis-232 { animation: anim232 33168ms, fade4 33168ms; } .axis-233 { animation: anim232 35787ms, fade6 35787ms; } .axis-234 { animation: anim232 8936ms, fade10 8936ms; } .axis-235 { animation: anim232 20430ms, fade5 20430ms; } .axis-236 { animation: anim236 16783ms, fade7 16783ms; } .axis-237 { animation: anim236 34599ms, fade2 34599ms; } .axis-238 { animation: anim236 14896ms, fade8 14896ms; } .axis-239 { animation: anim236 21987ms, fade2 21987ms; } .axis-240 { animation: anim240 10052ms, fade6 10052ms; } .axis-241 { animation: anim240 27549ms, fade2 27549ms; } .axis-242 { animation: anim240 9958ms, fade4 9958ms; } .axis-243 { animation: anim240 5263ms, fade8 5263ms; } .axis-244 { animation: anim244 36558ms, fade8 36558ms; } .axis-245 { animation: anim244 35296ms, fade10 35296ms; } .axis-246 { animation: anim244 26422ms, fade10 26422ms; } .axis-247 { animation: anim244 17845ms, fade6 17845ms; } .axis-248 { animation: anim248 39977ms, fade2 39977ms; } .axis-249 { animation: anim248 25082ms, fade9 25082ms; } .axis-250 { animation: anim248 16982ms, fade7 16982ms; } .axis-251 { animation: anim248 31381ms, fade1 31381ms; } .axis-252 { animation: anim252 31162ms, fade1 31162ms; } .axis-253 { animation: anim252 44432ms, fade9 44432ms; } .axis-254 { animation: anim252 38487ms, fade10 38487ms; } .axis-255 { animation: anim252 40832ms, fade10 40832ms; } .axis-256 { animation: anim256 30039ms, fade3 30039ms; } .axis-257 { animation: anim256 33030ms, fade9 33030ms; } .axis-258 { animation: anim256 43685ms, fade10 43685ms; } .axis-259 { animation: anim256 20570ms, fade4 20570ms; } .axis-260 { animation: anim260 17940ms, fade10 17940ms; } .axis-261 { animation: anim260 14943ms, fade8 14943ms; } .axis-262 { animation: anim260 32873ms, fade10 32873ms; } .axis-263 { animation: anim260 33894ms, fade4 33894ms; } .axis-264 { animation: anim264 39616ms, fade9 39616ms; } .axis-265 { animation: anim264 44275ms, fade10 44275ms; } .axis-266 { animation: anim264 10799ms, fade8 10799ms; } .axis-267 { animation: anim264 10718ms, fade8 10718ms; } .axis-268 { animation: anim268 20413ms, fade2 20413ms; } .axis-269 { animation: anim268 19999ms, fade9 19999ms; } .axis-270 { animation: anim268 11485ms, fade7 11485ms; } .axis-271 { animation: anim268 35700ms, fade4 35700ms; } .axis-272 { animation: anim272 36426ms, fade10 36426ms; } .axis-273 { animation: anim272 10020ms, fade10 10020ms; } .axis-274 { animation: anim272 23209ms, fade1 23209ms; } .axis-275 { animation: anim272 25536ms, fade10 25536ms; } .axis-276 { animation: anim276 32395ms, fade4 32395ms; } .axis-277 { animation: anim276 13190ms, fade10 13190ms; } .axis-278 { animation: anim276 44665ms, fade9 44665ms; } .axis-279 { animation: anim276 6731ms, fade7 6731ms; } .axis-280 { animation: anim280 35035ms, fade8 35035ms; } .axis-281 { animation: anim280 18004ms, fade5 18004ms; } .axis-282 { animation: anim280 11211ms, fade7 11211ms; } .axis-283 { animation: anim280 16519ms, fade1 16519ms; } .axis-284 { animation: anim284 41715ms, fade8 41715ms; } .axis-285 { animation: anim284 38181ms, fade1 38181ms; } .axis-286 { animation: anim284 41451ms, fade3 41451ms; } .axis-287 { animation: anim284 5508ms, fade8 5508ms; } .axis-288 { animation: anim288 18858ms, fade3 18858ms; } .axis-289 { animation: anim288 12661ms, fade10 12661ms; } .axis-290 { animation: anim288 44943ms, fade6 44943ms; } .axis-291 { animation: anim288 30327ms, fade1 30327ms; } .axis-292 { animation: anim292 32664ms, fade4 32664ms; } .axis-293 { animation: anim292 24624ms, fade9 24624ms; } .axis-294 { animation: anim292 25991ms, fade10 25991ms; } .axis-295 { animation: anim292 44407ms, fade1 44407ms; } .axis-296 { animation: anim296 5487ms, fade9 5487ms; } .axis-297 { animation: anim296 22634ms, fade9 22634ms; } .axis-298 { animation: anim296 10312ms, fade4 10312ms; } .axis-299 { animation: anim296 7979ms, fade10 7979ms; } .axis-300 { animation: anim300 10949ms, fade6 10949ms; } .axis-301 { animation: anim300 5777ms, fade8 5777ms; } .axis-302 { animation: anim300 21814ms, fade7 21814ms; } .axis-303 { animation: anim300 44504ms, fade4 44504ms; } .axis-304 { animation: anim304 9742ms, fade2 9742ms; } .axis-305 { animation: anim304 40789ms, fade1 40789ms; } .axis-306 { animation: anim304 11093ms, fade3 11093ms; } .axis-307 { animation: anim304 42753ms, fade5 42753ms; } .axis-308 { animation: anim308 26407ms, fade7 26407ms; } .axis-309 { animation: anim308 17317ms, fade2 17317ms; } .axis-310 { animation: anim308 26469ms, fade9 26469ms; } .axis-311 { animation: anim308 35638ms, fade6 35638ms; } .axis-312 { animation: anim312 35902ms, fade7 35902ms; } .axis-313 { animation: anim312 22585ms, fade7 22585ms; } .axis-314 { animation: anim312 25201ms, fade3 25201ms; } .axis-315 { animation: anim312 22228ms, fade2 22228ms; } .axis-316 { animation: anim316 37338ms, fade7 37338ms; } .axis-317 { animation: anim316 16837ms, fade3 16837ms; } .axis-318 { animation: anim316 20548ms, fade3 20548ms; } .axis-319 { animation: anim316 16060ms, fade1 16060ms; } .axis-320 { animation: anim320 28191ms, fade5 28191ms; } .axis-321 { animation: anim320 28757ms, fade2 28757ms; } .axis-322 { animation: anim320 6653ms, fade3 6653ms; } .axis-323 { animation: anim320 20825ms, fade9 20825ms; } .axis-324 { animation: anim324 37981ms, fade7 37981ms; } .axis-325 { animation: anim324 38225ms, fade5 38225ms; } .axis-326 { animation: anim324 11716ms, fade1 11716ms; } .axis-327 { animation: anim324 30975ms, fade8 30975ms; } .axis-328 { animation: anim328 33997ms, fade1 33997ms; } .axis-329 { animation: anim328 6421ms, fade9 6421ms; } .axis-330 { animation: anim328 12367ms, fade3 12367ms; } .axis-331 { animation: anim328 34158ms, fade8 34158ms; } .axis-332 { animation: anim332 22711ms, fade7 22711ms; } .axis-333 { animation: anim332 17533ms, fade10 17533ms; } .axis-334 { animation: anim332 10686ms, fade7 10686ms; } .axis-335 { animation: anim332 20228ms, fade4 20228ms; } .axis-336 { animation: anim336 41063ms, fade6 41063ms; } .axis-337 { animation: anim336 26478ms, fade9 26478ms; } .axis-338 { animation: anim336 36155ms, fade1 36155ms; } .axis-339 { animation: anim336 26199ms, fade3 26199ms; } .axis-340 { animation: anim340 18376ms, fade7 18376ms; } .axis-341 { animation: anim340 7233ms, fade10 7233ms; } .axis-342 { animation: anim340 5470ms, fade7 5470ms; } .axis-343 { animation: anim340 34030ms, fade6 34030ms; } .axis-344 { animation: anim344 18709ms, fade3 18709ms; } .axis-345 { animation: anim344 32283ms, fade4 32283ms; } .axis-346 { animation: anim344 41360ms, fade2 41360ms; } .axis-347 { animation: anim344 19723ms, fade7 19723ms; } .axis-348 { animation: anim348 30138ms, fade7 30138ms; } .axis-349 { animation: anim348 27446ms, fade7 27446ms; } .axis-350 { animation: anim348 17618ms, fade1 17618ms; } .axis-351 { animation: anim348 43211ms, fade10 43211ms; } .axis-352 { animation: anim352 40337ms, fade9 40337ms; } .axis-353 { animation: anim352 33102ms, fade5 33102ms; } .axis-354 { animation: anim352 39286ms, fade10 39286ms; } .axis-355 { animation: anim352 8534ms, fade10 8534ms; } .axis-356 { animation: anim356 10125ms, fade10 10125ms; } .axis-357 { animation: anim356 31154ms, fade5 31154ms; } .axis-358 { animation: anim356 14910ms, fade2 14910ms; } .axis-359 { animation: anim356 18105ms, fade4 18105ms; } .axis-360 { animation: anim360 28979ms, fade7 28979ms; } @keyframes fade1 { 19% { opacity: 0; } 29% { opacity: 1; } 100% { opacity: 1; } } @keyframes fade2 { 5% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 1; } } @keyframes fade3 { 14% { opacity: 0; } 24% { opacity: 1; } 100% { opacity: 1; } } @keyframes fade4 { 17% { opacity: 0; } 27% { opacity: 1; } 100% { opacity: 1; } } @keyframes fade5 { 2% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 1; } } @keyframes fade6 { 17% { opacity: 0; } 27% { opacity: 1; } 100% { opacity: 1; } } @keyframes fade7 { 4% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 1; } } @keyframes fade8 { 16% { opacity: 0; } 26% { opacity: 1; } 100% { opacity: 1; } } @keyframes fade9 { 7% { opacity: 0; } 17% { opacity: 1; } 100% { opacity: 1; } } @keyframes fade10 { 4% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 1; } } @keyframes anim4 { 100% { transform: translate(79.8051240208vw, 5.5805178995vh); } } @keyframes anim8 { 100% { transform: translate(79.2214454993vw, 11.1338480768vh); } } @keyframes anim12 { 100% { transform: translate(78.2518080587vw, 16.6329352654vh); } } @keyframes anim16 { 100% { transform: translate(76.9009356751vw, 22.0509884654vh); } } @keyframes anim20 { 100% { transform: translate(75.1754096629vw, 27.3616114661vh); } } @keyframes anim24 { 100% { transform: translate(73.0836366114vw, 32.5389314461vh); } } @keyframes anim28 { 100% { transform: translate(70.6358074287vw, 37.5577250229vh); } } @keyframes anim32 { 100% { transform: translate(67.8438476925vw, 42.3935411387vh); } } @keyframes anim36 { 100% { transform: translate(64.72135955vw, 47.0228201834vh); } } @keyframes anim40 { 100% { transform: translate(61.2835554495vw, 51.4230087749vh); } } @keyframes anim44 { 100% { transform: translate(57.5471840271vw, 55.5726696367vh); } } @keyframes anim48 { 100% { transform: translate(53.5304485087vw, 59.4515860382vh); } } @keyframes anim52 { 100% { transform: translate(49.2529180261vw, 63.0408602885vh); } } @keyframes anim56 { 100% { transform: translate(44.7354322777vw, 66.3230058044vh); } } @keyframes anim60 { 100% { transform: translate(40vw, 69.2820323028vh); } } @keyframes anim64 { 100% { transform: translate(35.0696917431vw, 71.9035237039vh); } } @keyframes anim68 { 100% { transform: translate(29.9685274733vw, 74.1747083653vh); } } @keyframes anim72 { 100% { transform: translate(24.72135955vw, 76.0845213036vh); } } @keyframes anim76 { 100% { transform: translate(19.353751648vw, 77.6236581021vh); } } @keyframes anim80 { 100% { transform: translate(13.8918542134vw, 78.784620241vh); } } @keyframes anim84 { 100% { transform: translate(8.3622770614vw, 79.5617516295vh); } } @keyframes anim88 { 100% { transform: translate(2.7919597362vw, 79.9512661615vh); } } @keyframes anim92 { 100% { transform: translate(-2.7919597362vw, 79.9512661615vh); } } @keyframes anim96 { 100% { transform: translate(-8.3622770614vw, 79.5617516295vh); } } @keyframes anim100 { 100% { transform: translate(-13.8918542134vw, 78.784620241vh); } } @keyframes anim104 { 100% { transform: translate(-19.353751648vw, 77.6236581021vh); } } @keyframes anim108 { 100% { transform: translate(-24.72135955vw, 76.0845213036vh); } } @keyframes anim112 { 100% { transform: translate(-29.9685274733vw, 74.1747083653vh); } } @keyframes anim116 { 100% { transform: translate(-35.0696917431vw, 71.9035237039vh); } } @keyframes anim120 { 100% { transform: translate(-40vw, 69.2820323028vh); } } @keyframes anim124 { 100% { transform: translate(-44.7354322777vw, 66.3230058044vh); } } @keyframes anim128 { 100% { transform: translate(-49.2529180261vw, 63.0408602885vh); } } @keyframes anim132 { 100% { transform: translate(-53.5304485087vw, 59.4515860382vh); } } @keyframes anim136 { 100% { transform: translate(-57.5471840271vw, 55.5726696367vh); } } @keyframes anim140 { 100% { transform: translate(-61.2835554495vw, 51.4230087749vh); } } @keyframes anim144 { 100% { transform: translate(-64.72135955vw, 47.0228201834vh); } } @keyframes anim148 { 100% { transform: translate(-67.8438476925vw, 42.3935411387vh); } } @keyframes anim152 { 100% { transform: translate(-70.6358074287vw, 37.5577250229vh); } } @keyframes anim156 { 100% { transform: translate(-73.0836366114vw, 32.5389314461vh); } } @keyframes anim160 { 100% { transform: translate(-75.1754096629vw, 27.3616114661vh); } } @keyframes anim164 { 100% { transform: translate(-76.9009356751vw, 22.0509884654vh); } } @keyframes anim168 { 100% { transform: translate(-78.2518080587vw, 16.6329352654vh); } } @keyframes anim172 { 100% { transform: translate(-79.2214454993vw, 11.1338480768vh); } } @keyframes anim176 { 100% { transform: translate(-79.8051240208vw, 5.5805178995vh); } } @keyframes anim180 { 100% { transform: translate(-80vw, 0vh); } } @keyframes anim184 { 100% { transform: translate(-79.8051240208vw, -5.5805178995vh); } } @keyframes anim188 { 100% { transform: translate(-79.2214454993vw, -11.1338480768vh); } } @keyframes anim192 { 100% { transform: translate(-78.2518080587vw, -16.6329352654vh); } } @keyframes anim196 { 100% { transform: translate(-76.9009356751vw, -22.0509884654vh); } } @keyframes anim200 { 100% { transform: translate(-75.1754096629vw, -27.3616114661vh); } } @keyframes anim204 { 100% { transform: translate(-73.0836366114vw, -32.5389314461vh); } } @keyframes anim208 { 100% { transform: translate(-70.6358074287vw, -37.5577250229vh); } } @keyframes anim212 { 100% { transform: translate(-67.8438476925vw, -42.3935411387vh); } } @keyframes anim216 { 100% { transform: translate(-64.72135955vw, -47.0228201834vh); } } @keyframes anim220 { 100% { transform: translate(-61.2835554495vw, -51.4230087749vh); } } @keyframes anim224 { 100% { transform: translate(-57.5471840271vw, -55.5726696367vh); } } @keyframes anim228 { 100% { transform: translate(-53.5304485087vw, -59.4515860382vh); } } @keyframes anim232 { 100% { transform: translate(-49.2529180261vw, -63.0408602885vh); } } @keyframes anim236 { 100% { transform: translate(-44.7354322777vw, -66.3230058044vh); } } @keyframes anim240 { 100% { transform: translate(-40vw, -69.2820323028vh); } } @keyframes anim244 { 100% { transform: translate(-35.0696917431vw, -71.9035237039vh); } } @keyframes anim248 { 100% { transform: translate(-29.9685274733vw, -74.1747083653vh); } } @keyframes anim252 { 100% { transform: translate(-24.72135955vw, -76.0845213036vh); } } @keyframes anim256 { 100% { transform: translate(-19.353751648vw, -77.6236581021vh); } } @keyframes anim260 { 100% { transform: translate(-13.8918542134vw, -78.784620241vh); } } @keyframes anim264 { 100% { transform: translate(-8.3622770614vw, -79.5617516295vh); } } @keyframes anim268 { 100% { transform: translate(-2.7919597362vw, -79.9512661615vh); } } @keyframes anim272 { 100% { transform: translate(2.7919597362vw, -79.9512661615vh); } } @keyframes anim276 { 100% { transform: translate(8.3622770614vw, -79.5617516295vh); } } @keyframes anim280 { 100% { transform: translate(13.8918542134vw, -78.784620241vh); } } @keyframes anim284 { 100% { transform: translate(19.353751648vw, -77.6236581021vh); } } @keyframes anim288 { 100% { transform: translate(24.72135955vw, -76.0845213036vh); } } @keyframes anim292 { 100% { transform: translate(29.9685274733vw, -74.1747083653vh); } } @keyframes anim296 { 100% { transform: translate(35.0696917431vw, -71.9035237039vh); } } @keyframes anim300 { 100% { transform: translate(40vw, -69.2820323028vh); } } @keyframes anim304 { 100% { transform: translate(44.7354322777vw, -66.3230058044vh); } } @keyframes anim308 { 100% { transform: translate(49.2529180261vw, -63.0408602885vh); } } @keyframes anim312 { 100% { transform: translate(53.5304485087vw, -59.4515860382vh); } } @keyframes anim316 { 100% { transform: translate(57.5471840271vw, -55.5726696367vh); } } @keyframes anim320 { 100% { transform: translate(61.2835554495vw, -51.4230087749vh); } } @keyframes anim324 { 100% { transform: translate(64.72135955vw, -47.0228201834vh); } } @keyframes anim328 { 100% { transform: translate(67.8438476925vw, -42.3935411387vh); } } @keyframes anim332 { 100% { transform: translate(70.6358074287vw, -37.5577250229vh); } } @keyframes anim336 { 100% { transform: translate(73.0836366114vw, -32.5389314461vh); } } @keyframes anim340 { 100% { transform: translate(75.1754096629vw, -27.3616114661vh); } } @keyframes anim344 { 100% { transform: translate(76.9009356751vw, -22.0509884654vh); } } @keyframes anim348 { 100% { transform: translate(78.2518080587vw, -16.6329352654vh); } } @keyframes anim352 { 100% { transform: translate(79.2214454993vw, -11.1338480768vh); } } @keyframes anim356 { 100% { transform: translate(79.8051240208vw, -5.5805178995vh); } } @keyframes anim360 { 100% { transform: translate(80vw, 0vh); } } .story-hero { position: relative; height: 280vh; background-color: var(--clr-base-white); color: var(--clr-base-black); } .story-hero__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 clamp(2rem, 3.8834951456vw + 0.5436893204rem, 8rem); } @media (max-width: 768px) { .story-hero__pin { padding: 0 2rem; } } .story-hero h2 { display: grid; gap: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem); } @media (max-width: 768px) { .story-hero h2 { font-size: var(--heading-lg-fs); gap: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem); } } .story-hero__line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } @media (max-width: 768px) { .story-hero__line { display: grid; grid-template-columns: max-content auto; justify-content: center; justify-items: center; column-gap: 0; } } .story-hero__phrase { display: inline-block; overflow: hidden; vertical-align: bottom; } .story-hero__phrase > span { display: inline-block; transform: translateY(115%); opacity: 0; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; will-change: transform, opacity; } @media (max-width: 768px) { .story-hero__phrase { white-space: nowrap; } } @media (max-width: 768px) { .story-hero__phrase:last-child { grid-column: 1/-1; } } .story-hero__box { display: inline-block; position: relative; vertical-align: middle; width: var(--brand-hero-box-width, 0px); height: 0.95em; margin: 0 calc(0.14em + var(--brand-hero-box-gap, 0px)); background-color: var(--clr-secondary-500); clip-path: inset(-2.7em var(--brand-hero-clip, 100%) -0.7em 0); --brand-hero-box-width: 0px; --brand-hero-box-gap: 0px; --brand-hero-clip: 100%; transform: translateY(115%); opacity: 0; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; will-change: width, margin, clip-path, transform, opacity; } .story-hero__box--ch { background-color: var(--clr-yellow-500); } .story-hero__box > img { position: absolute; top: 50%; left: 50%; width: 118%; height: 2.45em; transform: translate(-50%, -50%); object-fit: contain; object-position: center; pointer-events: none; user-select: none; max-width: none; } .story-hero__box--pizza > img { animation: brand-hero-food-wiggle 2.4s ease-in-out infinite; } .story-hero__box--ch > img { animation: brand-hero-food-wiggle 2.6s ease-in-out 0.18s infinite reverse; } @media (max-width: 768px) { .story-hero__box { margin: 0 0 0 0.14em; } } .story-hero.is-headline-visible .story-hero__phrase > span, .story-hero.is-headline-visible .story-hero__box { transform: translateY(0); opacity: 1; } .story-hero.is-headline-visible .story-hero__line:first-child .story-hero__phrase:first-child > span { transition-delay: 0.1s; } .story-hero.is-headline-visible .story-hero__line:first-child .story-hero__box { transition-delay: 0.22s; } .story-hero.is-headline-visible .story-hero__line:first-child .story-hero__phrase:last-child > span { transition-delay: 0.34s; } .story-hero.is-headline-visible .story-hero__line:last-child .story-hero__phrase:first-child > span { transition-delay: 0.46s; } .story-hero.is-headline-visible .story-hero__line:last-child .story-hero__box { transition-delay: 0.58s; } .story-hero.is-headline-visible .story-hero__line:last-child .story-hero__phrase:last-child > span { transition-delay: 0.7s; } @keyframes brand-hero-food-wiggle { 0%, 100% { transform: translate(-50%, -50%) rotate(-1.6deg); } 50% { transform: translate(-50%, -50%) rotate(1.6deg); } } .cosmo-sec { position: relative; height: 600vh; background-color: var(--clr-base-white); color: var(--clr-base-black); } .cosmo-sec .pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .cosmo-sec .txt { position: absolute; top: clamp(13rem, 2.8478964401vw + 11.932038835rem, 17.4rem); left: 50%; z-index: 2; width: 100%; transform: translateX(-50%); line-height: 1.42; } .cosmo-sec .txt p { opacity: 0; transform: translateY(1.6rem); } .cosmo-sec .txt p:first-child { opacity: 1; transform: none; } @media (max-width: 768px) { .cosmo-sec .txt { top: clamp(9.6rem, 2.2006472492vw + 8.7747572816rem, 13rem); padding: 0 2rem; } } .cosmo-sec .mark { position: relative; width: min(72vw, 104rem); opacity: 0; transform: scale(0.16); overflow: hidden; } .cosmo-sec .mark img { display: block; width: 100%; height: auto; } .cosmo-sec .mark strong { position: absolute; top: 50%; left: 50%; display: grid; justify-items: center; align-content: center; gap: clamp(0.6rem, 0.5177993528vw + 0.4058252427rem, 1.4rem); width: min(92%, 96rem); max-height: 78%; color: var(--clr-base-white); line-height: 0.92; text-align: center; transform: translate(-50%, -50%); pointer-events: none; overflow: hidden; box-sizing: border-box; } .cosmo-sec .mark span { display: block; width: max-content; max-width: 100%; margin-inline: auto; text-align: center; opacity: 1; } @media (max-width: 768px) { .cosmo-sec .mark { width: min(86vw, 64rem); } } .cosmo-sec .cap { position: absolute; left: 50%; bottom: clamp(8.8rem, 3.4951456311vw + 7.4893203883rem, 14.2rem); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.4rem); width: 100%; padding: 0 2rem; opacity: 0; transform: translate(-50%, 2rem); box-sizing: border-box; } .cosmo-sec .cap p { margin: 0; width: 100%; max-width: min(100% - 4rem, 118rem); } @media (max-width: 768px) { .cosmo-sec .cap { bottom: clamp(7rem, 1.6828478964vw + 6.3689320388rem, 9.6rem); } } .story-gallery { position: relative; height: 240vh; background-color: var(--clr-base-white); overflow: clip; } .story-gallery__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem) 40px; } .story-gallery__grid { width: 100%; display: grid; gap: clamp(1rem, 0.5177993528vw + 0.8058252427rem, 1.8rem); } .story-gallery__row { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 0.5177993528vw + 0.8058252427rem, 1.8rem); justify-self: center; opacity: 1; } @media (max-width: 768px) { .story-gallery__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .story-gallery__item { aspect-ratio: 440/320; overflow: hidden; background-color: var(--clr-gray-50); border-radius: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); } .story-gallery__item img { width: 100%; height: 100%; object-fit: cover; } .menu-edge { width: 100%; max-width: 100%; background-color: var(--clr-base-white); position: relative; } @media (max-width: 768px) { .menu-edge.bottom { height: 30rem; } } .menu-edge p { width: 100%; } @media (max-width: 1640px) { .menu-edge p { padding: 0 2rem; } } .menu-edge img { display: block; width: 100%; height: 100%; } section[data-brand-menu-space] { position: relative; padding: 0; background-color: var(--clr-base-white); } section[data-brand-menu-space] .menu-frame { position: relative; display: flex; flex-direction: column; align-items: center; background: #03050b url("/assets/images/brand-space-bg.jpg") center/cover no-repeat; overflow: hidden; } section[data-brand-menu-space] .menu-frame .menu-title { z-index: 7; display: flex; align-items: center; justify-content: center; gap: clamp(1.2rem, 1.0355987055vw + 0.8116504854rem, 2.8rem); width: 100%; max-width: 100%; margin: 0; padding: 0 clamp(2.4rem, 7.2491909385vw - 0.3184466019rem, 13.6rem); box-sizing: border-box; } section[data-brand-menu-space] .menu-frame .menu-title::before, section[data-brand-menu-space] .menu-frame .menu-title::after { content: ""; flex: 0 1 10.8rem; width: 100%; height: 1px; align-self: center; background: linear-gradient(90deg, transparent 0%, var(--clr-secondary-500) 18%, var(--clr-secondary-500) 82%, transparent 100%); box-shadow: 0 0 12px color-mix(in srgb, var(--clr-secondary-500) 35%, transparent); } section[data-brand-menu-space] .menu-frame .menu-title span { flex: 0 0 auto; min-width: 0; white-space: nowrap; } section[data-brand-menu-space] .menu-frame .menu-swiper { width: 100%; padding: 0; position: relative; z-index: 3; overflow: visible; margin: clamp(12rem, 7.7669902913vw + 9.0873786408rem, 24rem) 0 12rem; } section[data-brand-menu-space] .menu-frame .menu-swiper .menu-slide { position: relative; display: block; overflow: visible; color: var(--clr-base-white); background: transparent; } section[data-brand-menu-space] .menu-frame .menu-swiper .menu-slide img { z-index: 1; width: min(128%, 128rem); max-width: none; opacity: 0.5; transform: scale(0.5) rotate(20deg); transform-origin: center center; transition: all 0.6s; } @media (max-width: 768px) { section[data-brand-menu-space] .menu-frame .menu-swiper .menu-slide img { left: -4rem; position: relative; } } section[data-brand-menu-space] .menu-frame .menu-swiper .menu-slide h3 { position: absolute; left: 0; top: 80%; transform: translateY(-50%); z-index: 3; opacity: 0; visibility: hidden; line-height: 0.9; font-size: var(--display-md-fs); transition: opacity 0.3s ease, visibility 0.3s ease; } @media (max-width: 1640px) { section[data-brand-menu-space] .menu-frame .menu-swiper .menu-slide h3 { left: 2rem; top: 90%; } } section[data-brand-menu-space] .menu-frame .menu-swiper .menu-slide h3 br { display: block !important; } section[data-brand-menu-space] .menu-frame .menu-swiper .menu-slide.swiper-slide-active { opacity: 1; } section[data-brand-menu-space] .menu-frame .menu-swiper .menu-slide.swiper-slide-active h3 { opacity: 1; visibility: visible; } section[data-brand-menu-space] .menu-frame .menu-swiper .menu-slide.swiper-slide-active img { transform: scale(1) rotate(20deg); opacity: 1; } section[data-brand-menu-space] .menu-frame .menu-swiper .menu-nav { position: absolute; top: 50%; z-index: 5; width: clamp(4.2rem, 1.4239482201vw + 3.6660194175rem, 6.4rem); height: clamp(4.2rem, 1.4239482201vw + 3.6660194175rem, 6.4rem); border: 0; border-radius: 999rem; background: rgba(0, 0, 0, 0.75); transform: translateY(-50%); cursor: pointer; } section[data-brand-menu-space] .menu-frame .menu-swiper .menu-nav[data-menu-prev] { left: clamp(1.6rem, 3.1067961165vw + 0.4349514563rem, 6.4rem); } section[data-brand-menu-space] .menu-frame .menu-swiper .menu-nav[data-menu-next] { right: clamp(1.6rem, 3.1067961165vw + 0.4349514563rem, 6.4rem); } section[data-brand-menu-space] .menu-frame .menu-frame__cta { z-index: 7; display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; gap: clamp(2.8rem, 1.8122977346vw + 2.1203883495rem, 5.6rem); } section[data-brand-menu-space] .menu-frame .menu-warn { position: relative; width: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); } section[data-brand-menu-space] .menu-frame .menu-warn__above, section[data-brand-menu-space] .menu-frame .menu-warn__below { display: flex; flex-direction: column; align-items: center; gap: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem); width: 100%; max-width: 100%; text-align: center; overflow: hidden; } section[data-brand-menu-space] .menu-frame .menu-warn__above span, section[data-brand-menu-space] .menu-frame .menu-warn__below span { display: block; width: max-content; max-width: 100%; margin-inline: auto; color: #f00; font-size: var(--heading-xs-fs); font-weight: 800; line-height: 1.15; white-space: nowrap; } section[data-brand-menu-space] .menu-frame .menu-warn__above span:nth-child(2) { transform: translateX(clamp(0.4rem, 0.3883495146vw + 0.254368932rem, 1rem)); opacity: 1; } section[data-brand-menu-space] .menu-frame .menu-warn__below span:nth-child(1) { transform: translateX(clamp(-0.4rem, -0.3883495146vw - 0.254368932rem, -1rem)); opacity: 1; } section[data-brand-menu-space] .menu-frame .menu-warn__above span:nth-child(1), section[data-brand-menu-space] .menu-frame .menu-warn__below span:nth-child(2) { opacity: 0.48; filter: blur(0.1rem); } section[data-brand-menu-space] .menu-frame .menu-warn__body { position: relative; width: 100%; min-height: clamp(5.2rem, 2.071197411vw + 4.4233009709rem, 8.4rem); display: flex; align-items: center; justify-content: center; padding: clamp(1.4rem, 0.6472491909vw + 1.1572815534rem, 2.4rem) clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem); box-sizing: border-box; overflow: hidden; background: transparent; isolation: isolate; } section[data-brand-menu-space] .menu-frame .menu-warn__body strong { position: relative; z-index: 1; display: block; max-width: 100%; font-size: var(--heading-xs-fs); font-weight: 800; line-height: 1.38; text-align: center; text-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.45), 0 0.02em 0.06em rgba(0, 0, 0, 0.35); } @keyframes menu-warn-body-gradient { 0%, 100% { opacity: 0.5; filter: brightness(0.88) saturate(0.95); } 50% { opacity: 1; filter: brightness(1.12) saturate(1.1); } } .power-sec .box { border: 1px solid #6e7378; } @media (max-width: 544px) { .power-sec .box { padding-right: 2rem; padding-left: 2rem; } } .power-sec .logos { display: flex; align-items: center; justify-content: center; gap: clamp(5.4rem, 3.7540453074vw + 3.9922330097rem, 11.2rem); } @media (max-width: 544px) { .power-sec .logos { gap: 2.4rem; } } .power-sec .logos img { display: block; width: auto; max-width: min(44%, 30.2rem); height: auto; object-fit: contain; } .power-sec .txt { display: grid; gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); } .sub-menu { position: relative; } .sub-menu .tabs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(1.2rem, 1.4239482201vw + 0.6660194175rem, 3.4rem); border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .sub-menu .tab { padding-bottom: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); margin-bottom: -1px; border-bottom: 2px solid transparent; transition: color var(--tran-3), border-color var(--tran-3); } .sub-menu .tab.is-active { color: var(--clr-primary-500); font-weight: 700; border-bottom-color: var(--clr-primary-500); } .sub-menu .tab:hover:not(.is-active) { color: var(--clr-primary-500); } .sub-menu .menu-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(4.2rem, 1.4239482201vw + 3.6660194175rem, 6.4rem) clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); transition: opacity 0.18s ease; } .sub-menu .menu-list.is-switching { opacity: 0.3; pointer-events: none; } @media (max-width: 1024px) { .sub-menu .menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 544px) { .sub-menu .menu-list { grid-template-columns: 1fr; } } .sub-menu .item { min-width: 0; } .sub-menu .item[hidden] { display: none; } .sub-menu .link { display: block; } .sub-menu .link:hover .particle, .sub-menu .link:focus-visible .particle, .item.is-featured .sub-menu .link .particle { opacity: 1; transform: translate(-50%, -50%) scale(1.02); } .sub-menu .link:hover .visual-title, .sub-menu .link:focus-visible .visual-title, .item.is-featured .sub-menu .link .visual-title { color: var(--clr-primary-500); } .sub-menu .link:hover .food, .sub-menu .link:focus-visible .food { transform: rotate(-20deg) scale(1.1); } .sub-menu .visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(22rem, 5.1779935275vw + 20.0582524272rem, 30rem); } .sub-menu .particle, .sub-menu .food { display: block; } .sub-menu .particle { position: absolute; left: 50%; top: 52%; z-index: 0; width: clamp(26rem, 9.0614886731vw + 22.6019417476rem, 40rem); height: auto; opacity: 0.45; transform: translate(-50%, -50%); transition: opacity var(--tran-3), transform var(--tran-3); } .sub-menu .food { position: relative; z-index: 1; width: min(100%, clamp(24rem, 5.8252427184vw + 21.8155339806rem, 33rem)); height: auto; transform: rotate(0deg) scale(1); transform-origin: center center; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .sub-menu .visual-title { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center; transition: color var(--tran-3); } .sub-menu .price { display: flex; align-items: baseline; justify-content: center; gap: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); } .sub-menu .price span { text-decoration: line-through; text-decoration-thickness: 1px; } @keyframes menu-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .menu-skeleton__tab { width: clamp(7.2rem, 1.5533980583vw + 6.6174757282rem, 9.6rem); height: 1.25em; border-radius: 4px; background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%); background-size: 200% 100%; animation: menu-shimmer 1.4s infinite linear; } .menu-skeleton__item { pointer-events: none; } .menu-skeleton__visual { border-radius: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); min-height: clamp(22rem, 5.1779935275vw + 20.0582524272rem, 30rem); background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%); background-size: 200% 100%; animation: menu-shimmer 1.4s infinite linear; } .menu-skeleton__text { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .menu-skeleton__line { border-radius: 4px; background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%); background-size: 200% 100%; animation: menu-shimmer 1.4s infinite linear; } .menu-skeleton__line--name { width: 60%; height: 1.2em; } .menu-skeleton__line--tag { width: 45%; height: 0.9em; animation-delay: 0.1s; } .menu-skeleton__line--price { width: 35%; height: 1em; animation-delay: 0.2s; } .menu-empty { display: flex; flex-direction: column; align-items: center; gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); padding: clamp(6.4rem, 2.071197411vw + 5.6233009709rem, 9.6rem) 0; text-align: center; } .menu-empty[hidden] { display: none; } .menu-empty__icon { font-size: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem); line-height: 1; } .sub-menu-detail { position: relative; padding-top: calc(var(--header-height) + clamp(5.2rem, 1.5533980583vw + 4.6174757282rem, 7.6rem)); } .sub-menu-detail .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3.6rem, 1.8122977346vw + 2.9203883495rem, 6.4rem); align-items: start; } @media (max-width: 1024px) { .sub-menu-detail .hero { grid-template-columns: 1fr; } } .sub-menu-detail .visual-wrap { display: flex; justify-content: center; } .sub-menu-detail .visual { width: min(100%, clamp(56rem, 9.0614886731vw + 52.6019417476rem, 70rem)); } .sub-menu-detail .visual img { display: block; width: 100%; height: auto; object-fit: contain; } .sub-menu-detail .summary { padding-top: clamp(0.4rem, 0.5177993528vw + 0.2058252427rem, 1.2rem); } .sub-menu-detail .head { display: flex; align-items: start; justify-content: space-between; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); padding-bottom: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem); border-bottom: 1px solid rgba(0, 0, 0, 0.14); } @media (max-width: 544px) { .sub-menu-detail .head { flex-direction: column; } } .sub-menu-detail .title-group { min-width: 0; } .sub-menu-detail .order-button { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(12rem, 2.2006472492vw + 11.1747572816rem, 15.4rem); min-height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); padding: 0 clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); border-radius: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem); background: var(--clr-base-black); color: var(--clr-base-white); transition: background-color var(--tran-3), color var(--tran-3); } .sub-menu-detail .order-button:hover { background: var(--clr-primary-500); } .sub-menu-detail .price strong { display: inline-block; } .sub-menu-detail .info-card { display: grid; } .sub-menu-detail .info-block + .info-block { margin-top: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); padding-top: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); border-top: 1px solid rgba(0, 0, 0, 0.14); } .sub-menu-detail .meta-actions { display: flex; flex-wrap: nowrap; gap: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); } @media (max-width: 544px) { .sub-menu-detail .meta-actions { flex-wrap: wrap; } } .sub-menu-detail .pill-button { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; line-height: 1.1; min-width: 0; min-height: clamp(3.8rem, 0.3883495146vw + 3.654368932rem, 4.4rem); padding: 0.5rem clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); border: 1px solid var(--clr-base-black); border-radius: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem); color: var(--clr-base-black); transition: background-color var(--tran-3), color var(--tran-3), border-color var(--tran-3); } .sub-menu-detail .pill-button:hover { background: var(--clr-base-black); color: var(--clr-base-white); border-color: var(--clr-base-black); } .sub-menu-detail .pill-button:last-child { flex-grow: 1.6; } .sub-menu-detail .notice { max-width: none; color: var(--clr-text-desc); } .sub-menu-detail .detail-banner { border-radius: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); overflow: hidden; background-color: #f3f3f3; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%); background-size: 10rem 10rem; background-position: 0 0, 0 5rem, 5rem -5rem, -5rem 0; } .sub-menu-detail .detail-banner__inner { min-height: clamp(22rem, 5.1779935275vw + 20.0582524272rem, 30rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); padding: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem); text-align: center; color: var(--clr-text-desc); background: rgba(255, 255, 255, 0.3); } .menu-info-modal .content .scroll-box { padding-top: 0; } .menu-info-modal .content .scroll-box img { display: block; width: 100%; height: auto; object-fit: contain; } @media (max-width: 768px) { .menu-info-modal { width: calc(100vw - 2.4rem); height: auto; max-height: calc(100vh - 2.4rem); } .menu-info-modal .content { height: auto; max-height: calc(100vh - 10rem); } .menu-info-modal .content .scroll-box { height: auto; max-height: calc(100vh - 10rem); } } .sub-events { position: relative; overflow: hidden; } .sub-events .events-wrap { position: relative; padding-top: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem); } .sub-events .events-wrap .events-empty { padding: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem) 0; color: #6f6876; } .sub-events .events-wrap.end .events-list li { opacity: 0.5; } .sub-events .events-wrap .events-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 2rem; } @media (max-width: 1024px) { .sub-events .events-wrap .events-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .sub-events .events-wrap .events-list { grid-template-columns: repeat(1, 1fr); } } .sub-events .events-wrap .events-list li a { display: flex; flex-direction: column; height: 100%; border: 1px solid rgba(0, 0, 0, 0.08); background: var(--clr-base-white); transition: transform var(--tran-3), border-color var(--tran-3); } .sub-events .events-wrap .events-list li a:hover { border-color: rgba(98, 0, 234, 0.2); } .sub-events .events-wrap .events-list li a:hover figure img { transform: scale(1.1); } .sub-events .events-wrap .events-list li a:hover .txt h3, .sub-events .events-wrap .events-list li a:hover .bottom > span:last-child { color: var(--clr-primary-500); } .sub-events .events-wrap .events-list li a figure { aspect-ratio: 310/230; overflow: hidden; position: relative; display: flex; border-radius: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem) 0 0; } .sub-events .events-wrap .events-list li a figure .badge { position: absolute; left: 1.6rem; top: 1.6rem; z-index: 1; display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.2rem; border-radius: 99rem; } .sub-events .events-wrap .events-list li a figure .badge.live { background: var(--clr-secondary-500); color: var(--clr-primary-500); } .sub-events .events-wrap .events-list li a figure .badge.ended { background: var(--clr-base-white); color: #6f6876; } .sub-events .events-wrap .events-list li a figure .badge .space { letter-spacing: 0.2rem; } .sub-events .events-wrap .events-list li a figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tran-3); } .sub-events .events-wrap .events-list li a .txt h3 { transition: color var(--tran-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .sub-events .events-wrap .events-list li a .txt p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .sub-events .events-wrap .events-list li a .bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; border-top: 1px dashed rgba(0, 0, 0, 0.14); } .sub-events .events-wrap .events-list li a .bottom time { letter-spacing: 0.08em; } .sub-events .events-wrap .events-list li a .bottom > span:last-child { display: inline-flex; align-items: center; gap: 0.6rem; transition: color var(--tran-3); white-space: nowrap; } .sub-events.detail-page .detail { border-top: 1px solid var(--clr-gray-100); } .sub-events.detail-page .detail.ended > :not(.action) { opacity: 0.5; } .sub-events.detail-page .detail .head { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem); padding-top: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem); margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); } @media (max-width: 544px) { .sub-events.detail-page .detail .head { flex-direction: column; } } .sub-events.detail-page .detail .summary { min-width: 0; } .sub-events.detail-page .detail .summary h3 { color: var(--clr-base-black); } .sub-events.detail-page .detail .summary p { margin-top: 0.8rem; color: var(--clr-base-black); } .sub-events.detail-page .detail .direct, .sub-events.detail-page .detail .list-button { display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background-color var(--tran-3), color var(--tran-3); } .sub-events.detail-page .detail .direct { min-width: clamp(13.2rem, 2.0064724919vw + 12.4475728155rem, 16.3rem); min-height: clamp(4.2rem, 0.5177993528vw + 4.0058252427rem, 5rem); padding-inline: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); border-radius: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); background: var(--clr-base-black); color: var(--clr-base-white); } .sub-events.detail-page .detail .direct:hover { background: var(--clr-primary-500); color: var(--clr-base-white); } .sub-events.detail-page .detail .content { color: var(--clr-base-black); } .sub-events.detail-page .detail .content img { display: block; width: 100%; height: auto; } .sub-events.detail-page .detail .content p, .sub-events.detail-page .detail .content ul, .sub-events.detail-page .detail .content ol, .sub-events.detail-page .detail .content table, .sub-events.detail-page .detail .content figure { margin-bottom: 1.2rem; } .sub-events.detail-page .action { display: flex; justify-content: center; } .sub-events.detail-page .list-button { display: inline-flex; align-items: center; justify-content: space-between; min-width: clamp(14.2rem, 2.5889967638vw + 13.2291262136rem, 18.2rem); min-height: clamp(5rem, 0.6472491909vw + 4.7572815534rem, 6rem); padding: 0 3rem; border-radius: 99rem; background: var(--clr-yellow-500); color: var(--clr-base-black); gap: 2rem; line-height: 1; transition: background-color var(--tran-3), color var(--tran-3); } .sub-events.detail-page .list-button svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; } .sub-events.detail-page .list-button:hover { background: var(--clr-yellow-700); } .sub-notice { position: relative; overflow: hidden; } .sub-notice .notice .tabs { display: flex; align-items: center; justify-content: center; gap: clamp(2.8rem, 1.0355987055vw + 2.4116504854rem, 4.4rem); min-height: 4.2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.16); } .sub-notice .notice .tab { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 4.2rem; color: var(--clr-base-black); transition: color var(--tran-3); } .sub-notice .notice .tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1rem; height: 0.2rem; background: var(--clr-primary-500); transform: scaleX(0); transform-origin: center; transition: transform var(--tran-3); } .sub-notice .notice .tab:hover, .sub-notice .notice .tab.is-active { color: var(--clr-primary-500); } .sub-notice .notice .tab:hover::after, .sub-notice .notice .tab.is-active::after { transform: scaleX(1); } .sub-notice .notice .list { display: flex; flex-direction: column; gap: 1.2rem; } .sub-notice .notice .link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1.6rem, 1.5533980583vw + 1.0174757282rem, 4rem); min-height: clamp(5.6rem, 1.0355987055vw + 5.2116504854rem, 7.2rem); border: 1px solid rgba(0, 0, 0, 0.12); transition: border-color var(--tran-3), background-color var(--tran-3); } .sub-notice .notice .link:hover { border-color: var(--clr-primary-500); background: rgba(98, 0, 234, 0.04); } .sub-notice .notice .link:hover strong { color: var(--clr-primary-500); } @media (max-width: 544px) { .sub-notice .notice .link { grid-template-columns: 1fr; align-items: flex-start; gap: 0.8rem; } } .sub-notice .notice .link > span:first-child { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(5.8rem, 0.7766990291vw + 5.5087378641rem, 7rem); min-height: clamp(3rem, 0.3883495146vw + 2.854368932rem, 3.6rem); padding-inline: 1.2rem; background: var(--clr-base-black); line-height: 1; } .sub-notice .notice .link strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--tran-3); } @media (max-width: 544px) { .sub-notice .notice .link strong { white-space: normal; } } .sub-notice .notice time { white-space: nowrap; } .sub-notice .notice .empty { padding: clamp(5.6rem, 1.5533980583vw + 5.0174757282rem, 8rem) 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .sub-notice .notice .pagination { display: flex; align-items: center; justify-content: center; gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); } .sub-notice .notice .page { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem); min-height: clamp(2.8rem, 0.6472491909vw + 2.5572815534rem, 3.8rem); color: var(--clr-base-black); line-height: 1; transition: color var(--tran-3); } .sub-notice .notice .page::after { content: ""; position: absolute; left: 50%; bottom: 0; width: clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.6rem); height: 2px; background: var(--clr-primary-500); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform var(--tran-3); } .sub-notice .notice .page:hover, .sub-notice .notice .page.is-active { color: var(--clr-primary-500); } .sub-notice .notice .page.is-active::after { transform: translateX(-50%) scaleX(1); } .sub-notice .notice .arrow::after { content: none; } .sub-notice .notice .prev .icon, .sub-notice .notice .first .icon { transform: rotate(180deg); } .sub-notice .notice .icon { width: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem); height: clamp(0.7rem, 0.1941747573vw + 0.627184466rem, 1rem); background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } .sub-stores { position: relative; overflow: hidden; border-top: 1px solid rgba(0, 0, 0, 0.12); } .sub-stores .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "filters map" "list map"; height: calc(100vh - 8rem); min-height: 68rem; max-height: 84rem; overflow: hidden; } @media (max-width: 1024px) { .sub-stores .grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "filters" "map" "list"; height: auto; max-height: none; overflow: visible; } } .sub-stores .filters { grid-area: filters; padding: clamp(2.2rem, 0.6472491909vw + 1.9572815534rem, 3.2rem) clamp(2.4rem, 3.3656957929vw + 1.1378640777rem, 7.6rem) clamp(2.4rem, 0.6472491909vw + 2.1572815534rem, 3.4rem); border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .sub-stores .filters h3 { margin-bottom: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); color: var(--clr-base-black); } .sub-stores .filters .selects { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); } @media (max-width: 544px) { .sub-stores .filters .selects { grid-template-columns: 1fr; } } .sub-stores .filters .select { position: relative; display: block; } .sub-stores .filters .select::after { content: ""; position: absolute; top: 50%; right: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); width: 0.8rem; height: 0.8rem; border-right: 1px solid rgba(0, 0, 0, 0.42); border-bottom: 1px solid rgba(0, 0, 0, 0.42); transform: translateY(-65%) rotate(45deg); pointer-events: none; } .sub-stores .filters select { width: 100%; min-height: clamp(4.6rem, 0.5177993528vw + 4.4058252427rem, 5.4rem); padding: 0 clamp(4.2rem, 0.5177993528vw + 4.0058252427rem, 5rem) 0 clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); border: 1px solid rgba(0, 0, 0, 0.65); border-radius: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); background: var(--clr-base-white); font-size: var(--body-lg-fs); font-weight: var(--body-lg-fw); line-height: var(--body-lg-lh); color: rgba(0, 0, 0, 0.42); appearance: none; cursor: pointer; } .sub-stores .list { grid-area: list; min-height: 0; height: 100%; max-height: 100%; padding: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem) clamp(2.4rem, 2.071197411vw + 1.6233009709rem, 5.6rem) clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem) clamp(2.4rem, 3.3656957929vw + 1.1378640777rem, 7.6rem); overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain; display: flex; flex-direction: column; gap: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .sub-stores .list::-webkit-scrollbar { display: none; } @media (max-width: 1024px) { .sub-stores .list { height: auto; max-height: none; overflow: visible; } } .sub-stores .list .empty { padding: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem) 0; color: var(--clr-base-black); text-align: center; } .sub-stores .card { position: relative; display: grid; grid-template-columns: minmax(24rem, 32rem) minmax(0, 1fr); gap: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem); padding: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem) clamp(0rem, 0vw + 0rem, 0rem) clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem) clamp(0rem, 0vw + 0rem, 0rem); border-bottom: 1px solid rgba(0, 0, 0, 0.12); cursor: pointer; outline: 0; transition: border-color var(--tran-3), background var(--tran-3); } .sub-stores .card::before { content: ""; position: absolute; left: calc(-1 * clamp(2.4rem, 3.3656957929vw + 1.1378640777rem, 7.6rem)); top: 0; bottom: 0; width: 0.3rem; background: var(--clr-primary-500); border-radius: 0 0.3rem 0.3rem 0; opacity: 0; transform: scaleY(0.6); transition: opacity var(--tran-3), transform var(--tran-3); } @media (max-width: 1024px) { .sub-stores .card::before { display: none; } } .sub-stores .card[hidden] { display: none; } .sub-stores .card:hover h3 { color: var(--clr-primary-500); } .sub-stores .card.is-active::before { opacity: 1; transform: scaleY(1); } .sub-stores .card.is-active h3 { color: var(--clr-primary-500); } .sub-stores .card.is-active .thumb img { transform: scale(1.04); } @media (max-width: 544px) { .sub-stores .card { grid-template-columns: 1fr; } } .sub-stores .card .thumb { position: relative; overflow: hidden; aspect-ratio: 270/360; border-radius: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); } .sub-stores .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .sub-stores .card .info { min-width: 0; padding-top: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.4rem); color: var(--clr-base-black); } .sub-stores .card .info h3 { transition: color var(--tran-3); } .sub-stores .card .info .badges { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); } .sub-stores .card .info .badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: clamp(2.8rem, 0.3883495146vw + 2.654368932rem, 3.4rem); padding: 0 clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); background: var(--clr-secondary-500); color: var(--clr-base-white); border-radius: 0.4rem; line-height: 1; } .sub-stores .card .info .badge i { font-size: 1.1rem; } .sub-stores .card .info .address { margin-top: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); } .sub-stores .card .info .phone { margin-top: 1rem; } .sub-stores .card .info dl { display: flex; flex-direction: column; gap: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); margin-top: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); } .sub-stores .card .info dl dt { margin-bottom: 0.8rem; } .sub-stores .card .info .card-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .sub-stores .card .info .card-btn { display: inline-flex; align-items: center; gap: 0.7rem; min-height: clamp(3.6rem, 0.3883495146vw + 3.454368932rem, 4.2rem); padding: 0 clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); border-radius: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem); font-size: var(--body-sm-fs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-family: inherit; cursor: pointer; transition: background var(--tran-2), color var(--tran-2), border-color var(--tran-2); } .sub-stores .card .info .card-btn i { font-size: 1.2rem; } .sub-stores .card .info .card-btn--map { background: var(--clr-primary-500); color: var(--clr-base-white); border: 1.5px solid var(--clr-primary-500); } .sub-stores .card .info .card-btn--map:hover { background: transparent; color: var(--clr-primary-500); } .sub-stores .card .info .card-btn--external { background: transparent; color: var(--clr-base-black); border: 1.5px solid rgba(0, 0, 0, 0.3); } .sub-stores .card .info .card-btn--external:hover { border-color: var(--clr-base-black); background: var(--clr-base-black); color: var(--clr-base-white); } .sub-stores .map-area { grid-area: map; position: sticky; top: 0; min-height: 100%; border-left: 1px solid rgba(0, 0, 0, 0.12); } @media (max-width: 1024px) { .sub-stores .map-area { position: relative; min-height: 38rem; border-left: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); } } @media (max-width: 544px) { .sub-stores .map-area { min-height: 32rem; } } .sub-stores .map { position: relative; width: 100%; height: 100%; min-height: inherit; background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), #eeeeee; background-size: 4rem 4rem, 4rem 4rem, auto; } .sub-stores .map .map-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 2.4rem; color: var(--clr-base-black); text-align: center; } .store-tooltip { display: none; } @keyframes pinRipple { 0% { transform: scale(0.8); opacity: 0.3; } 100% { transform: scale(1.7); opacity: 0; } } .store-pin-ripple { position: absolute; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--clr-primary-500); pointer-events: none; animation: pinRipple 2s ease-out infinite; } .sub-inquiry { position: relative; overflow: hidden; padding: 0; width: 100%; } .sub-inquiry .gate { display: flex; align-items: stretch; gap: 0; min-height: clamp(44rem, 39vw, 62rem); } @media (max-width: 768px) { .sub-inquiry .gate { flex-direction: column; min-height: auto; } } .sub-inquiry .gate .card { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1 1 50%; padding: clamp(3.2rem, 3vw, 9.2rem); overflow: hidden; color: var(--clr-base-white); isolation: isolate; transition: flex-basis var(--tran-3), min-height var(--tran-3), transform var(--tran-3); } .sub-inquiry .gate .card::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 2; pointer-events: none; transition: opacity var(--tran-3); } @media (max-width: 768px) { .sub-inquiry .gate .card::after { display: none; } } @media (max-width: 768px) { .sub-inquiry .gate .card { min-height: 28rem; padding: 3.2rem 2.4rem; flex-basis: auto; } } .sub-inquiry .gate .card:hover { flex-basis: 54%; } .sub-inquiry .gate .card:hover::after { opacity: 0; } @media (max-width: 768px) { .sub-inquiry .gate .card:hover { min-height: 31rem; } } .sub-inquiry .gate:hover .card:not(:hover) > p:first-of-type, .sub-inquiry .gate:hover .card:not(:hover) > strong, .sub-inquiry .gate:hover .card:not(:hover) > span { opacity: 0.45; } .sub-inquiry .gate .card > p:first-of-type, .sub-inquiry .gate .card > strong, .sub-inquiry .gate .card > span, .sub-inquiry .gate .card > p:last-of-type { position: relative; z-index: 1; } .sub-inquiry .gate .card > p:first-of-type { display: inline-flex; align-items: center; gap: 1.2rem; margin-bottom: clamp(2rem, 2vw, 3.6rem); } .sub-inquiry .gate .card > p:first-of-type .dot { width: 1rem; height: 1rem; border-radius: 999rem; background: currentColor; flex: 0 0 auto; } .sub-inquiry .gate .card > p:first-of-type .line { width: clamp(3.2rem, 3vw, 5rem); height: 1px; background: currentColor; opacity: 0.5; } .sub-inquiry .gate .card > strong { line-height: 0.9; margin-bottom: clamp(2.4rem, 2.5vw, 4.8rem); transition: opacity var(--tran-3); } .sub-inquiry .gate .card > span { display: inline-flex; align-items: center; justify-content: space-between; min-width: clamp(16.4rem, 2.9773462783vw + 15.2834951456rem, 21rem); min-height: clamp(5.4rem, 1.0355987055vw + 5.0116504854rem, 7rem); padding: 0 clamp(2rem, 0.3883495146vw + 1.854368932rem, 2.6rem); border-radius: 99rem; background: rgba(7, 2, 16, 0.92); color: var(--clr-base-white); transition: opacity var(--tran-3), background-color var(--tran-3), color var(--tran-3); } .sub-inquiry .gate .card > span svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; } .sub-inquiry .gate .card > span svg rect, .sub-inquiry .gate .card > span svg path { transition: fill var(--tran-3); } .sub-inquiry .gate .card > p:last-of-type { display: none; } .sub-inquiry .gate .write { z-index: 2; align-items: flex-start; justify-content: center; background: var(--clr-primary-700); clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); } .sub-inquiry .gate .write > p:first-of-type, .sub-inquiry .gate .write > strong, .sub-inquiry .gate .write > span { transform: translateY(-4rem); } .sub-inquiry .gate .write:hover > span { background: var(--clr-base-white); color: var(--clr-primary-700); } .sub-inquiry .gate .write:hover > span rect, .sub-inquiry .gate .write:hover > span path { fill: var(--clr-primary-700); } @media (max-width: 768px) { .sub-inquiry .gate .write { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); } .sub-inquiry .gate .write > p:first-of-type, .sub-inquiry .gate .write > strong, .sub-inquiry .gate .write > span { transform: none; } } .sub-inquiry .gate .history { z-index: 1; align-items: flex-end; justify-content: center; text-align: right; margin-left: -20rem; padding-left: clamp(12rem, 14vw, 22rem); background: var(--clr-secondary-500); clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); } .sub-inquiry .gate .history > p:first-of-type, .sub-inquiry .gate .history > span, .sub-inquiry .gate .history > p:last-of-type { margin-left: auto; } .sub-inquiry .gate .history > p:first-of-type, .sub-inquiry .gate .history > strong, .sub-inquiry .gate .history > span { transform: translateY(4rem); } .sub-inquiry .gate .history:hover > span { background: var(--clr-base-white); color: var(--clr-secondary-500); } .sub-inquiry .gate .history:hover > span rect, .sub-inquiry .gate .history:hover > span path { fill: var(--clr-secondary-500); } @media (max-width: 768px) { .sub-inquiry .gate .history { margin-left: 0; margin-top: -3.2rem; padding-top: 5.6rem; padding-left: 2.4rem; clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); } .sub-inquiry .gate .history > p:first-of-type, .sub-inquiry .gate .history > strong, .sub-inquiry .gate .history > span { transform: none; } } .sub-form { position: relative; overflow: hidden; } .sub-form .form .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem) clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); } @media (max-width: 768px) { .sub-form .form .grid { grid-template-columns: 1fr; } } .sub-form .form .field { min-width: 0; } .sub-form .form .field > label, .sub-form .form .field > span { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; } .sub-form .form .full { grid-column: 1/-1; } .sub-form .form .inline { display: grid; grid-template-columns: 9fr 3fr; align-items: center; gap: 1rem; } @media (max-width: 544px) { .sub-form .form .inline { grid-template-columns: 1fr; } } .sub-form .form .verified[hidden] { display: none !important; } .sub-form .form .verified:not([hidden]) { display: inline-flex; align-items: center; } .sub-form .form .verified { white-space: nowrap; } .sub-form .form .input, .sub-form .form .textarea { width: 100%; border: 2px solid var(--clr-base-black); border-radius: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); background: var(--clr-base-white); outline: none; transition: border-color var(--tran-3); } .sub-form .form .input::placeholder, .sub-form .form .textarea::placeholder { color: rgba(0, 0, 0, 0.72); } .sub-form .form .input:focus, .sub-form .form .textarea:focus { border-color: var(--clr-primary-500); } .sub-form .form .input { min-height: clamp(4.8rem, 0.6472491909vw + 4.5572815534rem, 5.8rem); padding: 0 clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); } .sub-form .form .select { appearance: none; padding-right: 4.4rem; background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(135deg, rgba(0, 0, 0, 0.45) 50%, transparent 50%); background-position: calc(100% - 2.2rem) 50%, calc(100% - 1.6rem) 50%; background-size: 0.6rem 0.6rem; background-repeat: no-repeat; } .sub-form .form .textarea { min-height: clamp(15rem, 3.2362459547vw + 13.786407767rem, 20rem); padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); resize: vertical; } .sub-form .form .button, .sub-form .form .submit, .sub-form .form .file-button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); background: var(--clr-base-black); cursor: pointer; transition: background-color var(--tran-3), color var(--tran-3); } .sub-form .form .button { grid-column: 2; grid-row: 1; min-height: clamp(4.8rem, 0.6472491909vw + 4.5572815534rem, 5.8rem); padding-inline: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .sub-form .form .button:hover { background: var(--clr-primary-500); } .sub-form .form .button.is-verified { background: var(--clr-primary-500); cursor: default; pointer-events: none; } @media (max-width: 544px) { .sub-form .form .button { grid-column: auto; grid-row: auto; } } .sub-form .form .checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .sub-form .form .check { display: flex; align-items: center; min-height: clamp(4.8rem, 0.6472491909vw + 4.5572815534rem, 5.8rem); padding: 0 clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); border: 2px solid var(--clr-base-black); border-radius: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } .sub-form .form .check input { appearance: none; position: relative; width: 1.6rem; height: 1.6rem; margin-right: 1rem; border: 2px solid var(--clr-base-black); border-radius: 0.4rem; background: var(--clr-base-white); } .sub-form .form .check input::after { content: ""; position: absolute; left: 50%; top: 45%; width: 0.5rem; height: 0.25rem; border-left: 2px solid var(--clr-base-black); border-bottom: 2px solid var(--clr-base-black); opacity: 0; transform: translate(-50%, -60%) rotate(-45deg); } .sub-form .form .check input:checked { border-color: var(--clr-primary-500); background: var(--clr-primary-500); } .sub-form .form .check input:checked::after { border-color: var(--clr-base-white); opacity: 1; } .sub-form .form .files { display: flex; flex-direction: column; gap: 1.2rem; } .sub-form .form .file { display: grid; grid-template-columns: clamp(12rem, 1.9417475728vw + 11.2718446602rem, 15rem) minmax(0, 1fr); gap: 1rem; } @media (max-width: 544px) { .sub-form .form .file { grid-template-columns: 1fr; } } .sub-form .form .file > p { display: flex; align-items: center; min-width: 0; min-height: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem); padding: 0 clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); border-radius: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem); background: #dcdcdc; } .sub-form .form .file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); } .sub-form .form .file-button { min-height: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem); padding-inline: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); } .sub-form .form .file-button:hover, .sub-form .form .file-button:focus-visible { background: var(--clr-primary-500); } .sub-form .form .footer { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } @media (max-width: 544px) { .sub-form .form .footer { flex-direction: column; align-items: stretch; } } .sub-form .form .privacy { display: flex; align-items: center; } .sub-form .form .privacy input { width: 2rem; height: 2rem; margin-right: 0.8rem; accent-color: var(--clr-primary-500); } .sub-form .form .privacy button { text-decoration: underline; text-underline-offset: 0.3rem; } .sub-form .form .submit { min-width: clamp(13.8rem, 2.071197411vw + 13.0233009709rem, 17rem); min-height: clamp(5.8rem, 0.3883495146vw + 5.654368932rem, 6.4rem); padding-inline: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem); border-radius: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem); background: rgba(7, 2, 16, 0.96); } .sub-form .form .submit:hover { background: var(--clr-secondary-500); color: var(--clr-base-black); border: 2px solid var(--clr-base-black); } .sub-form.history .grid { align-items: end; } .sub-form.history .privacy { min-height: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem); } .sub-form.history .submit { min-width: clamp(13.8rem, 1.9417475728vw + 13.0718446602rem, 16.8rem); } .sub-history .search .row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(15.4rem, 0.2588996764vw + 15.3029126214rem, 15.8rem); gap: 1.6rem; } @media (max-width: 544px) { .sub-history .search .row { grid-template-columns: 1fr; gap: 1rem; } } .sub-history .search .field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(12.8rem, 1.9417475728vw + 12.0718446602rem, 15.8rem); grid-column: 1/2; grid-row: 1; min-height: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem); border: 2px solid var(--clr-base-black); border-radius: 1.2rem; overflow: hidden; } @media (max-width: 544px) { .sub-history .search .field { grid-template-columns: minmax(0, 1fr) clamp(8.8rem, 1.2944983819vw + 8.3145631068rem, 10.8rem); min-height: 5.4rem; } } .sub-history .search .field .icon { position: absolute; left: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); top: 50%; transform: translateY(-50%); font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem); color: var(--clr-base-black); pointer-events: none; z-index: 1; } .sub-history .search input, .sub-history .search .filter { width: 100%; min-height: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem); border: 2px solid var(--clr-base-black); border-radius: 1.2rem; background: var(--clr-base-white); color: var(--clr-base-black); } @media (max-width: 544px) { .sub-history .search input, .sub-history .search .filter { min-height: 5.4rem; } } .sub-history .search input { grid-column: 1/2; padding: 0 clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem) 0 clamp(4.4rem, 0.2588996764vw + 4.3029126214rem, 4.8rem); border: 0; border-radius: 0; } .sub-history .search .filter { grid-column: 2/3; grid-row: 1; appearance: none; padding: 0 clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem); background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(135deg, rgba(0, 0, 0, 0.45) 50%, transparent 50%); background-position: calc(100% - 2.2rem) 50%, calc(100% - 1.6rem) 50%; background-size: 0.6rem 0.6rem; background-repeat: no-repeat; } .sub-history .search .button { grid-column: 1/2; grid-row: 1; justify-self: end; z-index: 1; min-width: clamp(12.8rem, 1.9417475728vw + 12.0718446602rem, 15.8rem); min-height: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem); border-radius: 1rem; background: var(--clr-base-black); color: var(--clr-base-white); transition: background-color var(--tran-3), color var(--tran-3); } @media (max-width: 544px) { .sub-history .search .button { min-width: clamp(8.8rem, 1.2944983819vw + 8.3145631068rem, 10.8rem); min-height: 5.4rem; } } .sub-history .search .button:hover { background: var(--clr-primary-500); } .sub-history .list { display: flex; flex-direction: column; gap: 1.6rem; } .sub-history .item { border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 1.4rem; background: var(--clr-base-white); overflow: hidden; } .sub-history .item.is-open { border-color: var(--clr-base-black); } .sub-history .item.is-open .summary { border-bottom-color: rgba(25, 216, 42, 0.72); } .sub-history .item.is-open .arrow { transform: rotate(-135deg); } .sub-history .summary { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem) clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem); border-bottom: 1px solid transparent; text-align: left; } @media (max-width: 544px) { .sub-history .summary { grid-template-columns: 7.6rem minmax(0, 1fr) auto; grid-template-areas: "state . side" "title title title"; align-items: center; column-gap: 1.4rem; row-gap: 1rem; padding: 1.6rem 1.6rem 1.7rem; } } .sub-history .state { display: inline-flex; align-items: center; justify-content: center; min-width: 7.7rem; min-height: 4rem; padding-inline: 1.2rem; color: var(--clr-base-white); border-radius: 0; } .sub-history .state.is-done { background: var(--clr-secondary-500); } .sub-history .state.is-wait { background: var(--clr-base-black); } @media (max-width: 544px) { .sub-history .state { grid-area: state; min-width: 100%; min-height: 3.6rem; align-self: center; font-size: var(--body-xs-fs); } } .sub-history .title { min-width: 0; color: var(--clr-base-black); } @media (max-width: 544px) { .sub-history .title { grid-area: title; align-self: start; line-height: 1.4; font-size: var(--body-sm-fs); padding-top: 0.2rem; white-space: normal; overflow: visible; text-overflow: initial; } } .sub-history .meta-side { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(2rem, 1.0355987055vw + 1.6116504854rem, 3.6rem); } @media (max-width: 544px) { .sub-history .meta-side { grid-area: side; align-self: center; } } .sub-history .date { color: var(--clr-base-black); white-space: nowrap; } @media (max-width: 544px) { .sub-history .date { font-size: var(--body-sm-fs); line-height: 1; text-align: right; } } .sub-history .arrow { width: 0.9rem; height: 0.9rem; border-right: 2px solid var(--clr-base-black); border-bottom: 2px solid var(--clr-base-black); transform: rotate(45deg); transition: transform var(--tran-3); } @media (max-width: 544px) { .sub-history .arrow { margin-top: -0.5rem; } } .sub-history .body { padding: 0; } .sub-history .meta { display: grid; gap: 0.8rem; padding: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem) clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem); border-bottom: 1px solid rgba(25, 216, 42, 0.56); } .sub-history .meta div { display: flex; align-items: flex-start; gap: 0.4rem; } @media (max-width: 544px) { .sub-history .meta div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.6rem; } } .sub-history .meta dt, .sub-history .meta dd { color: var(--clr-base-black); } @media (max-width: 544px) { .sub-history .meta dt { white-space: nowrap; } } @media (max-width: 544px) { .sub-history .meta dd { min-width: 0; word-break: break-word; } } .sub-history .section { padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem) clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem) clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem); } .sub-history .section p { margin-top: 1rem; color: var(--clr-base-black); } .sub-history .section.answer { margin-top: 0; padding-top: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem); border-top: 1px solid rgba(0, 0, 0, 0.12); background: #fafafa; } .sub-history .section .head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } @media (max-width: 544px) { .sub-history .section .head { align-items: flex-start; } } .sub-history .empty { padding: clamp(4.8rem, 1.5533980583vw + 4.2174757282rem, 7.2rem) 0; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); } .verify { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .verify.is-open { display: flex; } .verify .backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); } .verify .dialog { position: relative; z-index: 1; width: min(69.4rem, 100% - 3.2rem); min-height: clamp(46rem, 10.7443365696vw + 41.9708737864rem, 62.6rem); margin: 0; padding: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem); border-radius: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8rem); background: var(--clr-base-white); color: var(--clr-base-black); } .verify .close { position: absolute; top: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem); right: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); width: 2.8rem; height: 2.8rem; display: inline-flex; align-items: center; justify-content: center; font-size: var(--body-lg-fs); color: var(--clr-base-black); } .verify .close:hover { color: var(--clr-primary-500); } .verify .dialog > h3 { margin-bottom: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem); } .verify .dialog > p { color: var(--clr-base-black); } .verify .dialog > p + p { margin-top: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); } .verify .row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(12.8rem, 1.0355987055vw + 12.4116504854rem, 14.4rem); gap: 0.8rem; margin-top: clamp(3.6rem, 0.2588996764vw + 3.5029126214rem, 4rem); } @media (max-width: 544px) { .verify .row { grid-template-columns: 1fr; } } .verify .code { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: clamp(4.4rem, 0.2588996764vw + 4.3029126214rem, 4.8rem); padding: 0 clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem); border: 1px solid rgba(0, 0, 0, 0.28); border-radius: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem); } .verify .input { min-width: 0; width: 100%; color: var(--clr-base-black); } .verify .timer { color: rgba(0, 0, 0, 0.48); } .verify .msg { margin-top: 0.8rem; color: #c0392b; } .verify .msg.--ok { color: #1a7f4b; } .verify .resend, .verify .submit { display: inline-flex; align-items: center; justify-content: center; border-radius: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem); background: var(--clr-base-black); color: var(--clr-base-white); transition: background-color var(--tran-3), color var(--tran-3); } .verify .resend:hover, .verify .submit:hover { background: var(--clr-primary-500); color: var(--clr-base-white); } .verify .resend { min-height: clamp(4.4rem, 0.2588996764vw + 4.3029126214rem, 4.8rem); padding-inline: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); } .verify .submit { position: absolute; left: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem); right: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem); bottom: clamp(2.8rem, 0.3883495146vw + 2.654368932rem, 3.4rem); min-height: clamp(5.8rem, 0.3883495146vw + 5.654368932rem, 6.4rem); border-radius: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem); background: rgba(7, 2, 16, 0.96); color: var(--clr-secondary-500); } .verify .submit:hover { background: var(--clr-secondary-500); color: var(--clr-base-black); border: 2px solid var(--clr-base-black); } .fh { position: relative; overflow: hidden; background: url("../images/franchise-bg.jpg") center/cover no-repeat; color: var(--clr-base-white); } .fh-in { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2.8rem, 2.8478964401vw + 1.732038835rem, 7.2rem); align-items: center; min-height: clamp(56rem, 23.3009708738vw + 47.2621359223rem, 92rem); padding-block: clamp(5.6rem, 4.142394822vw + 4.0466019417rem, 12rem); } @media (max-width: 1024px) { .fh-in { grid-template-columns: 1fr; gap: clamp(3.6rem, 1.2944983819vw + 3.1145631068rem, 5.6rem); min-height: 0; padding-block: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 8.8rem); } } .fh-copy { position: relative; z-index: 2; width: 100%; min-width: 0; max-width: none; text-align: left; } .fh-hd { display: flex; flex-direction: column; gap: clamp(0.4rem, 0.5177993528vw + 0.2058252427rem, 1.2rem); margin: 0; font-weight: 900; font-size: var(--display-xs-fs); line-height: 1.08; word-break: keep-all; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.35); } .fh-line { display: block; } .fh-hi { color: var(--clr-secondary-500); } .fh-lead { margin-top: clamp(1.4rem, 0.9061488673vw + 1.0601941748rem, 2.8rem); font-size: var(--body-md-fs); font-weight: 500; line-height: 1.55; text-align: left; color: rgba(255, 255, 255, 0.92); text-shadow: 0 6px 40px rgba(0, 0, 0, 0.35); word-break: keep-all; } .fh-lead p { margin: 0; } .fh-media { position: relative; z-index: 2; display: flex; justify-content: flex-end; align-items: center; min-width: 0; overflow: visible; } @media (max-width: 1024px) { .fh-media { justify-content: center; } } .fh-plates { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: clamp(52rem, 25.8899676375vw + 42.2912621359rem, 92rem); min-height: clamp(32rem, 19.4174757282vw + 24.7184466019rem, 62rem); margin-inline: clamp(-3.6rem, -3.1067961165vw - 2.4349514563rem, -8.4rem) clamp(-4.4rem, -4.4012944984vw - 2.7495145631rem, -11.2rem); } @media (max-width: 1024px) { .fh-plates { margin-inline: auto; max-width: clamp(36rem, 18.1229773463vw + 29.2038834951rem, 64rem); min-height: clamp(28rem, 12.9449838188vw + 23.145631068rem, 48rem); } } .fh-fig { position: relative; display: block; width: min(100%, clamp(52rem, 23.3009708738vw + 43.2621359223rem, 88rem)); max-width: none; } .fh-ring { position: absolute; left: 50%; top: 50%; z-index: 0; width: 82%; max-width: none; transform: translate(-50%, -50%); border-radius: 999rem; pointer-events: none; aspect-ratio: 1/1; box-sizing: border-box; border: 1px dashed rgba(255, 255, 255, 0.55); } .fh-img { position: relative; z-index: 1; display: block; width: 100%; max-width: none; height: auto; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 clamp(2rem, 2.071197411vw + 1.2233009709rem, 5.2rem) clamp(3.6rem, 2.3300970874vw + 2.7262135922rem, 7.2rem) rgba(0, 0, 0, 0.42)); } @media (max-width: 1024px) { .fh-img { width: clamp(30rem, 16.8284789644vw + 23.6893203883rem, 56rem); max-width: 100%; } } .fh-dot { position: absolute; top: -22%; left: 62%; right: auto; z-index: 3; transform: translate(-50%, -50%); width: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); height: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); border-radius: 999rem; background: var(--clr-secondary-500); box-shadow: 0 0 clamp(1rem, 0.7766990291vw + 0.7087378641rem, 2.2rem) var(--clr-secondary-500), 0 0 clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem) rgba(25, 216, 42, 0.55); } .fh-marq { position: absolute; left: 0; right: 0; inset-inline: 0; top: 0; z-index: 3; height: clamp(17rem, 5.8252427184vw + 14.8155339806rem, 26rem); pointer-events: none; transform: rotate(3deg); transform-origin: center; } .fh-marq ul { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; padding-block: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); box-sizing: border-box; width: max-content; min-width: 100%; background: var(--clr-base-black); animation: franchise-marquee 200s linear infinite; transform: translate3d(-50%, -50%, 0); will-change: transform; } .fh-marq ul::before, .fh-marq ul::after { content: ""; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem); background: linear-gradient(90deg, #6200ea 0%, #ff6fc0 100%); pointer-events: none; } .fh-marq ul::after { top: auto; bottom: 0; } .fh-marq li { flex: 0 0 auto; } .fh-marq img { display: block; width: auto; height: clamp(6.4rem, 2.071197411vw + 5.6233009709rem, 9.6rem); } .fh-sys { position: relative; overflow: hidden; color: var(--clr-base-white); background: linear-gradient(180deg, #3e00af 0%, #0a0016 100%); padding-top: clamp(12rem, 3.8834951456vw + 10.5436893204rem, 18rem); } .fh-sys > .no-container-xl { position: relative; z-index: 1; padding-block: clamp(12rem, 2.3300970874vw + 11.1262135922rem, 15.6rem) 9.2rem; } @media (max-width: 1024px) { .fh-sys > .no-container-xl { padding-block: 5.6rem 7.2rem; } } .fh-sys .label { display: flex; align-items: center; gap: 1.2rem; margin: 0 0 1.2rem; line-height: 1; } .fh-sys .label span { font-size: var(--heading-xl-fs); } @media (max-width: 768px) { .fh-sys .label span { font-size: var(--heading-lg-fs); } } .fh-sys .label small { font-size: var(--body-md-fs); } .fh-sys h2 { font-size: var(--display-xs-fs); line-height: 0.96; word-break: keep-all; } .fh-sys h2 span { display: block; } @media (max-width: 1024px) { .fh-sys h2 { font-size: var(--heading-xl-fs); } } @media (max-width: 768px) { .fh-sys h2 { font-size: var(--heading-lg-fs); line-height: 1.04; } } .fh-sys .sys-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 4rem; } @media (max-width: 1024px) { .fh-sys .sys-list { grid-template-columns: 1fr; max-width: 48rem; } } .fh-sys .sys-list li { position: relative; min-height: 47.2rem; padding: 2.2rem 2rem 1.8rem; border-radius: 1.4rem; overflow: hidden; isolation: isolate; } @media (max-width: 768px) { .fh-sys .sys-list li { min-height: 40rem; } } .fh-sys .sys-list img { position: absolute; z-index: 1; max-width: none; height: auto; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 2.4rem 3.6rem rgba(0, 0, 0, 0.22)); } .fh-sys .sys-list p { position: absolute; left: 2rem; right: 2rem; bottom: 1.8rem; z-index: 2; font-size: var(--body-sm-fs); line-height: 1.35; } .fh-sys .sys-list h3 { position: relative; z-index: 2; font-size: var(--heading-bl-fs); line-height: 1; } .fh-sys .sys-list span { position: absolute; top: 2.2rem; right: 2rem; z-index: 2; color: rgba(255, 255, 255, 0.76); font-size: var(--body-sm-fs); line-height: 1; } .fh-sys .chicken { background: #6200ea; } .fh-sys .chicken img { left: 50%; top: 5.8rem; width: 86%; transform: translateX(-50%); } .fh-sys .set { background: var(--clr-secondary-500); color: var(--clr-base-black); } .fh-sys .set img { left: 50%; top: 7.6rem; width: 122%; transform: translateX(-50%); } .fh-sys .pizza { background: #ff6fc0; } .fh-sys .pizza img { left: 50%; top: 5.2rem; width: 80%; transform: translateX(-50%); } .fh-rev { position: relative; overflow: hidden; color: var(--clr-base-white); background: #0a0016 url("../images/franchise-bg2.jpg") center/cover no-repeat; } .fh-rev > .no-container-xl { padding-block: 7.2rem 9.8rem; } .fh-rev .label { display: flex; align-items: center; gap: 1.2rem; line-height: 1; } .fh-rev .label span { font-size: var(--heading-xl-fs); } .fh-rev .label small { font-size: var(--body-md-fs); } .fh-rev h2 { margin-top: 1.2rem; font-size: var(--display-xs-fs); line-height: 0.96; word-break: keep-all; } .fh-rev h2 span { display: block; } @media (max-width: 1024px) { .fh-rev h2 { font-size: var(--heading-xl-fs); } } @media (max-width: 768px) { .fh-rev h2 { font-size: var(--heading-lg-fs); line-height: 1.04; } } .fh-rev .rev-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; margin-top: 5.2rem; } @media (max-width: 1024px) { .fh-rev .rev-list { grid-template-columns: 1fr; } } .fh-rev .rev-list > li { position: relative; min-height: 29.8rem; padding: 3.6rem 3.8rem; border-radius: 1.8rem; overflow: hidden; } @media (max-width: 768px) { .fh-rev .rev-list > li { min-height: 34rem; padding: 2.8rem 2.4rem; } } .fh-rev .rev-list .main { background: #6200ea; } .fh-rev .rev-list .main ol li { background: #18dc28; } .fh-rev .rev-list .sub { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.48); } .fh-rev .rev-list .sub .tag { color: #ff6fc0; } .fh-rev .rev-list .sub ol li { background: rgba(255, 255, 255, 0.16); } .fh-rev .rev-list ol { position: absolute; left: 27%; right: 5.8rem; bottom: 7.8rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 1.2rem; height: 8.4rem; } @media (max-width: 768px) { .fh-rev .rev-list ol { left: 43%; right: 2.4rem; bottom: 8.6rem; gap: 0.8rem; height: 7rem; } } .fh-rev .rev-list ol li { border-radius: 0.6rem 0.6rem 0 0; transform-origin: bottom; animation: rev-bar 0.9s ease-out both; } .fh-rev .rev-list ol li:nth-child(1) { height: 3.3rem; } .fh-rev .rev-list ol li:nth-child(2) { height: 4.2rem; animation-delay: 0.08s; } .fh-rev .rev-list ol li:nth-child(3) { height: 5.4rem; animation-delay: 0.16s; } .fh-rev .rev-list ol li:nth-child(4) { height: 6.5rem; animation-delay: 0.24s; } .fh-rev .rev-list ol li:nth-child(5) { height: 7rem; animation-delay: 0.32s; } .fh-rev .rev-list .tag { position: relative; z-index: 2; font-size: var(--body-sm-fs); line-height: 1; } .fh-rev .rev-list dl { position: absolute; left: 3.8rem; bottom: 8rem; z-index: 2; } @media (max-width: 768px) { .fh-rev .rev-list dl { left: 2.4rem; bottom: 8.4rem; } } .fh-rev .rev-list dt { color: rgba(255, 255, 255, 0.74); font-size: var(--body-sm-fs); line-height: 1.2; } @media (max-width: 768px) { .fh-rev .rev-list dt { font-size: var(--body-sm-fs); } } .fh-rev .rev-list dd { margin-top: 0.4rem; font-size: var(--display-sm-fs); line-height: 0.95; } @media (max-width: 768px) { .fh-rev .rev-list dd { font-size: var(--display-xs-fs); } } .fh-rev .rev-list > li > p:last-child { position: absolute; left: 3.8rem; right: 3.8rem; bottom: 3.8rem; z-index: 2; color: rgba(255, 255, 255, 0.75); font-size: var(--body-sm-fs); line-height: 1.5; } @media (max-width: 768px) { .fh-rev .rev-list > li > p:last-child { left: 2.4rem; right: 2.4rem; bottom: 3.4rem; } } .fh-rev .scale { position: relative; min-height: 14.8rem; margin-top: 3.6rem; padding: 3.2rem 3.8rem; border: 1px dashed rgba(255, 255, 255, 0.24); border-radius: 1.8rem; } @media (max-width: 768px) { .fh-rev .scale { padding: 2.8rem 2.4rem; } } .fh-rev .scale .tag { font-size: var(--body-sm-fs); line-height: 1; } .fh-rev .scale strong { display: block; margin-top: 2rem; font-size: var(--heading-lg-fs); line-height: 1.15; } @media (max-width: 768px) { .fh-rev .scale strong { font-size: var(--heading-md-fs); } } .fh-rev .scale p:last-child { position: absolute; right: 3.8rem; top: 50%; max-width: 36rem; color: rgba(255, 255, 255, 0.7); font-size: var(--body-sm-fs); line-height: 1.5; transform: translateY(-50%); } @media (max-width: 1024px) { .fh-rev .scale p:last-child { position: static; max-width: none; margin-top: 1.6rem; transform: none; } } .fh-ch { position: relative; overflow: hidden; color: var(--clr-base-white); background: #0a0016; } .fh-ch > .no-container-xl { padding-block: 7.6rem 10.4rem; } @media (max-width: 768px) { .fh-ch > .no-container-xl { padding-block: 6.4rem 8rem; } } .fh-ch .label { display: flex; align-items: center; gap: 1.2rem; line-height: 1; } .fh-ch .label span { font-size: var(--heading-xl-fs); } @media (max-width: 768px) { .fh-ch .label span { font-size: var(--heading-lg-fs); } } .fh-ch .label small { font-size: var(--body-md-fs); } @media (max-width: 768px) { .fh-ch .label small { font-size: var(--body-sm-fs); } } .fh-ch h2 { margin-top: 1.2rem; font-size: var(--display-sm-fs); line-height: 1; word-break: keep-all; } @media (max-width: 1024px) { .fh-ch h2 { font-size: var(--heading-xl-fs); } } @media (max-width: 768px) { .fh-ch h2 { font-size: var(--heading-lg-fs); line-height: 1.08; } } .fh-ch .ch-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; margin-top: 5.2rem; } @media (max-width: 1024px) { .fh-ch .ch-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .fh-ch .ch-list { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 3.2rem; } } .fh-ch li { position: relative; min-height: 23.6rem; padding: 3.6rem 3.4rem 3rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 1.8rem; overflow: hidden; background: rgba(255, 255, 255, 0.05); } @media (max-width: 768px) { .fh-ch li { min-height: 20rem; padding: 2.8rem 2.4rem; } } .fh-ch .tag { position: relative; z-index: 1; color: #8b22ff; font-size: var(--body-sm-fs); letter-spacing: 0.18em; line-height: 1; } .fh-ch strong { position: relative; z-index: 1; display: block; margin-top: 7.4rem; font-size: var(--heading-bl-fs); line-height: 1.12; } @media (max-width: 768px) { .fh-ch strong { margin-top: 5.6rem; font-size: var(--heading-sm-fs); } } .fh-ch li > p:last-child { position: relative; z-index: 1; margin-top: 1rem; color: rgba(255, 255, 255, 0.62); font-size: var(--body-md-fs); line-height: 1.55; } @media (max-width: 768px) { .fh-ch li > p:last-child { font-size: var(--body-sm-fs); } } .fh-way { position: relative; overflow: hidden; color: var(--clr-base-white); background: linear-gradient(180deg, #0a0016 0%, #5001c5 100%); } .fh-way > .no-container-xl { position: relative; z-index: 1; padding-block: 7.6rem clamp(30rem, 7.7669902913vw + 27.0873786408rem, 42rem); } @media (max-width: 768px) { .fh-way > .no-container-xl { padding-block: 6.4rem clamp(24rem, 3.8834951456vw + 22.5436893204rem, 30rem); } } .fh-way .label { display: flex; align-items: center; gap: 1.2rem; line-height: 1; } .fh-way .label span { font-size: var(--heading-xl-fs); } @media (max-width: 768px) { .fh-way .label span { font-size: var(--heading-lg-fs); } } .fh-way .label small { font-size: var(--body-md-fs); } @media (max-width: 768px) { .fh-way .label small { font-size: var(--body-sm-fs); } } .fh-way h2 { margin-top: 1.2rem; font-size: var(--display-xs-fs); line-height: 0.92; word-break: keep-all; } .fh-way h2 span { display: block; } @media (max-width: 1024px) { .fh-way h2 { font-size: var(--heading-xl-fs); } } @media (max-width: 768px) { .fh-way h2 { font-size: var(--heading-lg-fs); line-height: 1.05; } } .fh-way .way-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; margin-top: 5.4rem; } @media (max-width: 1024px) { .fh-way .way-list { grid-template-columns: 1fr; } } @media (max-width: 768px) { .fh-way .way-list { gap: 1.6rem; margin-top: 3.6rem; } } .fh-way .way-list li { min-height: 28rem; padding: 3.8rem 3.4rem; border: 2px solid #8b22ff; border-radius: 1.8rem; background: rgba(255, 255, 255, 0.04); } @media (max-width: 768px) { .fh-way .way-list li { min-height: 23rem; padding: 3rem 2.4rem; } } .fh-way .way-list li:nth-child(2) { border-color: var(--clr-secondary-500); } .fh-way .way-list li:nth-child(3) { border-color: var(--clr-base-white); } .fh-way .way-list li:nth-child(3) .tag { color: #ff6fc0; } .fh-way .tag { color: var(--clr-secondary-500); font-size: var(--body-sm-fs); letter-spacing: 0.16em; line-height: 1; } .fh-way .way-list span { display: block; margin-top: 2.8rem; font-size: var(--display-xs-fs); line-height: 1; filter: drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, 0.28)); } @media (max-width: 768px) { .fh-way .way-list span { margin-top: 2.4rem; font-size: var(--display-xs-fs); } } .fh-way .way-list strong { display: block; margin-top: 2rem; font-size: var(--heading-xl-fs); line-height: 1; } @media (max-width: 768px) { .fh-way .way-list strong { font-size: var(--heading-lg-fs); } } .fh-way .way-list li > p:last-child { margin-top: 1.2rem; font-size: var(--body-lg-fs); line-height: 1.3; } .fh-way .way-info { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(23.6rem, 4.142394822vw + 22.0466019417rem, 30rem) minmax(0, 1fr); align-items: center; gap: 3.2rem; min-height: 28.6rem; margin-top: 3.2rem; padding: 3.2rem 3.8rem; border-radius: 1.8rem; background: rgba(98, 0, 234, 0.58); } @media (max-width: 1024px) { .fh-way .way-info { grid-template-columns: 1fr; gap: 4rem; } } @media (max-width: 768px) { .fh-way .way-info { padding: 2.8rem 2.4rem; } } .fh-way .way-info > div:first-child { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; } .fh-way dl { margin-top: 4.8rem; } .fh-way dt { color: rgba(255, 255, 255, 0.82); font-size: var(--body-sm-fs); line-height: 1.2; } .fh-way dd { margin-top: 0.4rem; font-size: var(--display-sm-fs); line-height: 0.95; } @media (max-width: 768px) { .fh-way dd { font-size: var(--display-xs-fs); } } .fh-way .way-info > div:first-child > p:last-child { color: rgba(255, 255, 255, 0.78); font-size: var(--body-sm-fs); line-height: 1.5; } .fh-way .pie { position: relative; justify-self: center; width: 100%; max-width: clamp(23.6rem, 4.142394822vw + 22.0466019417rem, 30rem); aspect-ratio: 1; } @media (max-width: 768px) { .fh-way .pie { width: 20rem; } } .fh-way .pie svg { display: block; width: 100%; height: 100%; overflow: visible; } .fh-way .pie circle { fill: none; stroke-width: 48; transform: rotate(-90deg); transform-origin: 50% 50%; } .fh-way .pie .food { stroke: #d9ab9f; stroke-dasharray: 32.4 67.6; } .fh-way .pie .labor { stroke: #ef6868; stroke-dasharray: 10.1 89.9; stroke-dashoffset: -32.4; } .fh-way .pie .cost { stroke: #ead95f; stroke-dasharray: 21.2 78.8; stroke-dashoffset: -42.5; } .fh-way .pie .rent { stroke: #e79a3a; stroke-dasharray: 11.7 88.3; stroke-dashoffset: -63.7; } .fh-way .pie .profit { stroke: #61babd; stroke-dasharray: 24.6 75.4; stroke-dashoffset: -75.4; } .fh-way .pie .hole { fill: rgba(98, 0, 234, 0.58); stroke: none; transform: none; } .fh-way .pie text { fill: var(--clr-base-white); font-size: var(--body-xs-fs); font-weight: 800; line-height: 1; text-anchor: middle; } .fh-way .pie tspan + tspan { fill: rgba(255, 255, 255, 0.84); font-size: var(--body-xs-fs); } .fh-way .leg { display: grid; gap: 1rem; align-self: start; justify-self: center; margin-top: 0.6rem; } @media (max-width: 1024px) { .fh-way .leg { grid-template-columns: repeat(5, max-content); align-self: auto; } } @media (max-width: 768px) { .fh-way .leg { grid-template-columns: repeat(2, max-content); } } .fh-way .leg li { position: relative; padding-left: 2rem; color: rgba(255, 255, 255, 0.78); font-size: var(--body-sm-fs); line-height: 1.2; } .fh-way .leg li::before { content: ""; position: absolute; left: 0; top: 0.1rem; width: 1.2rem; aspect-ratio: 5/6; border-radius: 999rem; background: #d9ab9f; } .fh-way .leg li:nth-child(2)::before { background: #ef6868; } .fh-way .leg li:nth-child(3)::before { background: #ead95f; } .fh-way .leg li:nth-child(4)::before { background: #e79a3a; } .fh-way .leg li:nth-child(5)::before { background: #61babd; } .fh-way .way-info > p:last-child { position: absolute; right: 3.8rem; bottom: 3.6rem; color: rgba(255, 255, 255, 0.82); font-size: var(--body-sm-fs); line-height: 1.4; } @media (max-width: 1024px) { .fh-way .way-info > p:last-child { position: static; } } .fh-way .fh-marq.btm { top: auto; bottom: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem); height: clamp(19rem, 5.8252427184vw + 16.8155339806rem, 28rem); transform: rotate(3deg); transform-origin: center; } @media (max-width: 768px) { .fh-way .fh-marq.btm { bottom: clamp(2.8rem, 0.9061488673vw + 2.4601941748rem, 4.2rem); height: clamp(17rem, 3.2362459547vw + 15.786407767rem, 22rem); } } .fh-way .fh-marq.btm ul { animation-name: franchise-marquee-reverse; } @media (max-width: 768px) { .fh-way .fh-marq.btm ul { padding-block: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); } } .fh-cost { position: relative; overflow: hidden; color: var(--clr-base-white); background: #5001c5 url("../images/franchise-bg3.jpg") center/cover no-repeat; } .fh-cost > .no-container-xl { position: relative; z-index: 1; padding-block: 7.2rem 9.6rem; } @media (max-width: 768px) { .fh-cost > .no-container-xl { padding-block: 6.4rem 8rem; } } .fh-cost .label { display: flex; align-items: center; gap: 1.2rem; color: var(--clr-base-white); line-height: 1; } .fh-cost .label span { font-size: var(--heading-xl-fs); } @media (max-width: 768px) { .fh-cost .label span { font-size: var(--heading-lg-fs); } } .fh-cost .label small { font-size: var(--body-sm-fs); } .fh-cost .cost-head { margin-top: 1.6rem; text-align: center; } .fh-cost .cost-head h2 { font-size: var(--display-xs-fs); line-height: 1; word-break: keep-all; } @media (max-width: 1024px) { .fh-cost .cost-head h2 { font-size: var(--heading-xl-fs); } } @media (max-width: 768px) { .fh-cost .cost-head h2 { font-size: var(--heading-lg-fs); } } .fh-cost .cost-head p { display: inline-flex; align-items: center; justify-content: center; min-height: 4.6rem; margin-top: 2.8rem; padding-inline: 2.8rem; border: 2px solid var(--clr-secondary-500); border-radius: 999rem; color: var(--clr-secondary-500); font-size: var(--body-md-fs); line-height: 1; } @media (max-width: 768px) { .fh-cost .cost-head p { min-height: 4rem; margin-top: 2rem; padding-inline: 2rem; font-size: var(--body-sm-fs); } } .fh-cost .cost-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; margin-top: 4.8rem; } @media (max-width: 1024px) { .fh-cost .cost-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 80rem; margin-inline: auto; } } @media (max-width: 768px) { .fh-cost .cost-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 3.6rem; } } @media (max-width: 450px) { .fh-cost .cost-list { grid-template-columns: 1fr; max-width: 24rem; } } .fh-cost .cost-list li { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 5/6; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999rem; background: rgba(255, 255, 255, 0.04); text-align: center; } .fh-cost strong { color: var(--clr-secondary-500); font-size: var(--heading-lg-fs); line-height: 1; } @media (max-width: 768px) { .fh-cost strong { font-size: var(--heading-bl-fs); } } .fh-cost .cost-list p { margin-top: 2.4rem; font-size: var(--body-sm-fs); line-height: 1.45; } @media (max-width: 768px) { .fh-cost .cost-list p { margin-top: 1.6rem; font-size: var(--body-sm-fs); } } .fh-cost .note { margin-top: 4rem; color: rgba(255, 255, 255, 0.62); text-align: center; font-size: var(--body-sm-fs); line-height: 1.7; } .fh-process { position: relative; overflow: hidden; color: var(--clr-base-white); background: #6200ea url("../images/franchise-bg4.jpg") center/cover no-repeat; } .fh-process > .no-container-xl { position: relative; z-index: 1; padding-block: clamp(5.2rem, 0.1294498382vw + 5.1514563107rem, 5.4rem) clamp(3.2rem, 0.1294498382vw + 3.1514563107rem, 3.4rem); } .fh-process .label { display: flex; align-items: center; gap: 1.6rem; line-height: 1; } .fh-process .label span { font-size: var(--display-xs-fs); line-height: 0.9; } .fh-process .label small { font-size: var(--body-xs-fs); line-height: 1; transform: translateY(0.2rem); } .fh-process h2 { margin-top: 2.2rem; font-size: var(--display-sm-fs); line-height: 1.05; word-break: keep-all; } .fh-process h2 span { display: block; } .fh-process h2 em { color: var(--clr-secondary-500); } .fh-process .process-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; margin-top: 5.4rem; } .fh-process .process-list li { position: relative; min-height: 17.6rem; padding: 3.8rem 2.4rem 2.8rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 1.4rem; overflow: hidden; background: rgba(255, 255, 255, 0.04); } .fh-process .step { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding-inline: 1.4rem; background: var(--clr-secondary-500); color: var(--clr-base-black); font-size: var(--body-xs-fs); line-height: 1; } .fh-process .num { position: absolute; top: 3.4rem; right: 2.4rem; color: rgba(255, 255, 255, 0.32); font-size: var(--heading-bl-fs); line-height: 0.9; } .fh-process h3 { margin-top: 3.2rem; font-size: var(--heading-xs-fs); line-height: 1.1; } .fh-process .process-list li > p:last-child { margin-top: 1.2rem; color: rgba(255, 255, 255, 0.62); font-size: var(--body-sm-fs); line-height: 1.45; } .fh-process .process-cta { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; min-height: 10.8rem; margin-top: 5rem; padding: 2.4rem 3.2rem; border-radius: 1.4rem; background: var(--clr-base-white); color: var(--clr-primary-500); } .fh-process .process-cta p { font-size: var(--heading-bl-fs); line-height: 1; } .fh-process .process-link { display: inline-flex; align-items: center; justify-content: center; min-width: 10.6rem; min-height: 5.2rem; padding-inline: 2.8rem; border: 2px solid var(--clr-base-black); border-radius: 1rem; background: var(--clr-primary-500); color: var(--clr-base-white); font-size: var(--body-sm-fs); line-height: 1; } @media (max-width: 1024px) { .fh-process h2 { font-size: var(--heading-xl-fs); } .fh-process .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .fh-process > .no-container-xl { padding-block: 6.4rem 7.2rem; } .fh-process .label span { font-size: var(--heading-xl-fs); } .fh-process h2 { font-size: var(--heading-lg-fs); line-height: 1.08; } .fh-process .process-list { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 4rem; } .fh-process .process-list li { min-height: 16rem; padding: 3rem 2.4rem 2.6rem; } .fh-process h3 { margin-top: 2.8rem; font-size: var(--heading-xs-fs); } .fh-process .process-cta { align-items: stretch; flex-direction: column; min-height: 0; margin-top: 3.6rem; padding: 2.8rem 2.4rem; } .fh-process .process-cta p { font-size: var(--heading-sm-fs); } .fh-process .process-link { width: 100%; } } .fh-lineup { position: relative; overflow: hidden; background: var(--clr-base-white); color: #090013; } .fh-lineup > .no-container-xl { position: relative; z-index: 1; padding-block: clamp(4.4rem, 0.9061488673vw + 4.0601941748rem, 5.8rem) clamp(8.8rem, 1.2944983819vw + 8.3145631068rem, 10.8rem); } .fh-lineup .lineup-head { display: grid; grid-template-columns: 1fr max-content; align-items: end; gap: 2.4rem; } .fh-lineup .label { display: flex; align-items: center; gap: 1.4rem; color: var(--clr-primary-500); line-height: 1; } .fh-lineup .label span { font-size: var(--heading-xl-fs); line-height: 0.95; } .fh-lineup .label small { font-size: var(--body-xs-fs); line-height: 1; transform: translateY(0.2rem); } .fh-lineup h2 { margin-top: 1.2rem; font-size: var(--display-sm-fs); line-height: 1.02; word-break: keep-all; } .fh-lineup .lineup-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 3.8rem; margin-top: 2.4rem; padding-inline: 2.4rem; border: 2px solid var(--clr-primary-500); border-radius: 999rem; color: var(--clr-primary-500); font-size: var(--body-sm-fs); line-height: 1; } .fh-lineup .lineup-more { display: inline-flex; align-items: center; justify-content: center; min-height: 5rem; padding-inline: 2.8rem; border-radius: 1rem; background: #090013; color: var(--clr-base-white); font-size: var(--body-sm-fs); line-height: 1; } .fh-lineup .lineup-list { display: grid; gap: clamp(4.2rem, 0.9061488673vw + 3.8601941748rem, 5.6rem); margin-top: clamp(3rem, 0.2588996764vw + 2.9029126214rem, 3.4rem); overflow: visible; } .fh-lineup .lineup-card { --lineup-bg: var(--clr-primary-500); --lineup-fg: var(--clr-base-white); --lineup-desc: rgba(255, 255, 255, 0.74); --lineup-badge-bg: var(--clr-base-white); --lineup-badge-fg: var(--clr-primary-500); position: relative; min-height: clamp(34rem, 4.4012944984vw + 32.3495145631rem, 40.8rem); padding: clamp(3.4rem, 0.7766990291vw + 3.1087378641rem, 4.6rem) clamp(3.6rem, 1.0355987055vw + 3.2116504854rem, 5.2rem); border-radius: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem); background: var(--lineup-bg); color: var(--lineup-fg); isolation: isolate; overflow: visible; } .fh-lineup .lineup-card.green { --lineup-bg: var(--clr-secondary-500); --lineup-fg: #090013; --lineup-desc: rgba(9, 0, 19, 0.78); --lineup-badge-bg: #090013; --lineup-badge-fg: var(--clr-secondary-500); } .fh-lineup .lineup-copy { position: relative; z-index: 2; width: 40%; min-width: 34rem; } .fh-lineup .eyebrow { display: flex; align-items: center; gap: 1.8rem; font-size: var(--body-xs-fs); line-height: 1.35; } .fh-lineup .eyebrow span { display: inline-flex; align-items: center; justify-content: center; min-height: 2.2rem; padding-inline: 1rem; background: var(--lineup-badge-bg); color: var(--lineup-badge-fg); font-size: var(--body-xs-fs); line-height: 1.25; } .fh-lineup h3 { margin-top: 2.2rem; font-size: var(--display-md-fs); line-height: 0.86; } .fh-lineup strong { display: block; margin-top: 1.8rem; font-size: var(--heading-xs-fs); line-height: 1.2; } .fh-lineup .lineup-copy > p:last-child { margin-top: 1.4rem; color: var(--lineup-desc); font-size: var(--body-sm-fs); line-height: 1.65; } .fh-lineup .lineup-food { position: absolute; z-index: 1; right: -4%; bottom: -3.8rem; width: 66%; max-width: none; height: auto; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2.4rem 3rem rgba(0, 0, 0, 0.22)); } .fh-lineup .lineup-card:nth-child(2) .lineup-food { right: -6%; bottom: -4rem; width: 68%; } .fh-lineup .lineup-card:nth-child(3) .lineup-food { right: -3%; bottom: -3.8rem; width: 66%; } @media (max-width: 1024px) { .fh-lineup h2 { font-size: var(--display-xs-fs); } .fh-lineup .lineup-card { min-height: 34rem; } .fh-lineup .lineup-copy { width: 44%; min-width: 30rem; } .fh-lineup h3 { font-size: var(--display-xs-fs); } .fh-lineup .lineup-food, .fh-lineup .lineup-card:nth-child(2) .lineup-food, .fh-lineup .lineup-card:nth-child(3) .lineup-food { right: -8%; bottom: -3.4rem; width: 72%; } } @media (max-width: 768px) { .fh-lineup > .no-container-xl { padding-block: 6rem 7.2rem; } .fh-lineup .lineup-head { grid-template-columns: 1fr; align-items: start; gap: 2.4rem; } .fh-lineup .label span { font-size: var(--heading-lg-fs); } .fh-lineup h2 { font-size: var(--heading-xl-fs); } .fh-lineup .lineup-pill { min-height: 4rem; margin-top: 2rem; padding-inline: 1.8rem; font-size: var(--body-sm-fs); } .fh-lineup .lineup-more { min-height: 4.8rem; padding-inline: 2.4rem; font-size: var(--body-sm-fs); } .fh-lineup .lineup-list { gap: 5.6rem; margin-top: 3.2rem; } .fh-lineup .lineup-card { min-height: 0; padding: 3.2rem 2.4rem 0; } .fh-lineup .lineup-copy { width: 100%; min-width: 0; } .fh-lineup h3 { font-size: var(--heading-xl-fs); } .fh-lineup strong { font-size: var(--body-lg-fs); } .fh-lineup .lineup-copy > p:last-child { font-size: var(--body-sm-fs); } .fh-lineup .lineup-food, .fh-lineup .lineup-card:nth-child(2) .lineup-food, .fh-lineup .lineup-card:nth-child(3) .lineup-food { position: relative; right: auto; bottom: auto; display: block; width: 108%; margin: 2.2rem -8% -2.8rem auto; } } @media (max-width: 450px) { .fh-lineup h3 { font-size: var(--heading-xl-fs); } .fh-lineup .lineup-food, .fh-lineup .lineup-card:nth-child(2) .lineup-food, .fh-lineup .lineup-card:nth-child(3) .lineup-food { width: 122%; margin-right: -14%; } } .fh-inquiry { position: relative; overflow: hidden; background: var(--clr-base-white); color: #090013; } .fh-inquiry > .no-container-xl { padding-block: clamp(7.8rem, 1.9417475728vw + 7.0718446602rem, 10.8rem) clamp(8.4rem, 1.8122977346vw + 7.7203883495rem, 11.2rem); } .fh-inquiry .head { text-align: center; } .fh-inquiry .head img { display: block; width: clamp(9.2rem, 2.071197411vw + 8.4233009709rem, 12.4rem); height: auto; margin-inline: auto; } .fh-inquiry h2 { margin-top: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem); font-size: var(--display-xs-fs); line-height: 1.08; word-break: keep-all; } .fh-inquiry h2 span { display: block; } .fh-inquiry h2 em { color: var(--clr-primary-500); } .fh-inquiry .head p { margin-top: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem); color: rgba(9, 0, 19, 0.56); font-size: var(--body-sm-fs); line-height: 1.8; word-break: keep-all; } .fh-inquiry .form { margin-top: clamp(7.6rem, 1.2944983819vw + 7.1145631068rem, 9.6rem); padding-top: clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3rem); border-top: 1px solid rgba(9, 0, 19, 0.2); } .fh-inquiry .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; } .fh-inquiry .field { min-width: 0; } .fh-inquiry .field > label, .fh-inquiry .field > span { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; } .fh-inquiry .full { grid-column: 1/-1; } .fh-inquiry .inline { display: grid; grid-template-columns: minmax(0, 1fr) 10.4rem; gap: 0.8rem; } .fh-inquiry .region-row, .fh-inquiry .checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } .fh-inquiry .verified { white-space: nowrap; } .fh-inquiry .verified[hidden] { display: none !important; } .fh-inquiry .input, .fh-inquiry .textarea, .fh-inquiry .check { width: 100%; border: 1px solid #090013; border-radius: 0.8rem; background: var(--clr-base-white); } .fh-inquiry .input, .fh-inquiry .textarea { outline: none; transition: border-color var(--tran-3); } .fh-inquiry .input::placeholder, .fh-inquiry .textarea::placeholder { color: rgba(9, 0, 19, 0.62); } .fh-inquiry .input:focus, .fh-inquiry .textarea:focus { border-color: var(--clr-primary-500); } .fh-inquiry .input { min-height: 4.8rem; padding-inline: 1.4rem; } .fh-inquiry .select { appearance: none; padding-right: 4rem; background-image: linear-gradient(45deg, transparent 50%, rgba(9, 0, 19, 0.44) 50%), linear-gradient(135deg, rgba(9, 0, 19, 0.44) 50%, transparent 50%); background-position: calc(100% - 1.9rem) 50%, calc(100% - 1.4rem) 50%; background-size: 0.6rem 0.6rem; background-repeat: no-repeat; } .fh-inquiry .textarea { min-height: clamp(15rem, 2.4595469256vw + 14.0776699029rem, 18.8rem); padding: 1.6rem; resize: vertical; } .fh-inquiry .button, .fh-inquiry .submit { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0.8rem; background: #090013; cursor: pointer; transition: background-color var(--tran-3), color var(--tran-3); } .fh-inquiry .button:hover, .fh-inquiry .submit:hover { background: var(--clr-primary-500); } .fh-inquiry .button { min-height: 4.8rem; padding-inline: 1.8rem; } .fh-inquiry .check { display: flex; align-items: center; min-height: 4.8rem; padding-inline: 1.4rem; } .fh-inquiry .check input, .fh-inquiry .privacy input { appearance: none; position: relative; width: 1.4rem; height: 1.4rem; margin-right: 0.8rem; border: 1px solid #090013; border-radius: 0.2rem; background: var(--clr-base-white); } .fh-inquiry .check input::after, .fh-inquiry .privacy input::after { content: ""; position: absolute; left: 50%; top: 45%; width: 0.5rem; height: 0.25rem; border-left: 2px solid var(--clr-base-white); border-bottom: 2px solid var(--clr-base-white); opacity: 0; transform: translate(-50%, -60%) rotate(-45deg); } .fh-inquiry .check input:checked, .fh-inquiry .privacy input:checked { border-color: var(--clr-primary-500); background: var(--clr-primary-500); } .fh-inquiry .check input:checked::after, .fh-inquiry .privacy input:checked::after { opacity: 1; } .fh-inquiry .foot { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; margin-top: 2.4rem; } .fh-inquiry .privacy { display: inline-flex; align-items: center; } .fh-inquiry .privacy button { border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; } .fh-inquiry .submit { min-width: 10.8rem; min-height: 4.8rem; padding-inline: 2.6rem; color: var(--clr-secondary-500); } @media (max-width: 768px) { .fh-inquiry > .no-container-xl { padding-block: 6.8rem 7.6rem; } .fh-inquiry h2 { font-size: var(--heading-lg-fs); } .fh-inquiry .head p br { display: none; } .fh-inquiry .form { margin-top: 5.6rem; } .fh-inquiry .grid { grid-template-columns: 1fr; gap: 1.8rem; } .fh-inquiry .inline { grid-template-columns: 1fr; } .fh-inquiry .foot { align-items: stretch; flex-direction: column; } .fh-inquiry .submit { width: 100%; } } @media (max-width: 450px) { .fh-inquiry h2 { font-size: var(--heading-lg-fs); } .fh-inquiry .region-row, .fh-inquiry .checks { grid-template-columns: 1fr; } } .fh-sys .label, .fh-sys .label span, .fh-sys .label small, .fh-rev .label, .fh-rev .label span, .fh-rev .label small, .fh-ch .label, .fh-ch .label span, .fh-ch .label small, .fh-way .label, .fh-way .label span, .fh-way .label small, .fh-cost .label, .fh-cost .label span, .fh-cost .label small, .fh-process .label, .fh-process .label span, .fh-process .label small, .fh-lineup .label, .fh-lineup .label span, .fh-lineup .label small { line-height: 1.12; } @keyframes rev-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes franchise-marquee { from { transform: translate3d(-50%, -50%, 0); } to { transform: translate3d(-100%, -50%, 0); } } @keyframes franchise-marquee-reverse { from { transform: translate3d(-50%, -50%, 0); } to { transform: translate3d(0, -50%, 0); } } .is-email-verify-open { overflow: hidden; } .about-page .no-sub-nav { position: sticky; top: var(--header-height); z-index: 10; background: var(--clr-base-white, #fff); } .about-page .about-section { padding: clamp(6.4rem, 3.1067961165vw + 5.2349514563rem, 11.2rem) 0; } .about-page .about-structure { background: var(--clr-background-primary); } .about-page .about-structure__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem); align-items: start; } @media (max-width: 768px) { .about-page .about-structure__inner { grid-template-columns: 1fr; gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); } } .about-page .about-structure__heading { font-size: var(--heading-xl-fs); font-weight: 700; color: var(--clr-text-primary); line-height: 1.2; } .about-page .about-structure__body { display: flex; flex-direction: column; gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); } .about-page .about-structure__body p { color: var(--clr-text-secondary); line-height: 1.75; } .about-page .about-features__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } @media (max-width: 768px) { .about-page .about-features__grid { grid-template-columns: 1fr; } } .about-page .about-card { padding: clamp(3.6rem, 1.2944983819vw + 3.1145631068rem, 5.6rem) clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem); background: var(--clr-background-primary); border-top: 3px solid var(--clr-primary-900); } .about-page .about-card__eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-primary-700); margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); } .about-page .about-card__eyebrow::before { content: ""; display: block; width: 2rem; height: 2px; background: currentColor; flex: 0 0 auto; } .about-page .about-card__title { font-size: var(--heading-md-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); line-height: 1.3; } .about-page .about-card__body { color: var(--clr-text-secondary); line-height: 1.75; } .about-page .about-vision-lead__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem); align-items: center; } @media (max-width: 768px) { .about-page .about-vision-lead__grid { grid-template-columns: 1fr; } } .about-page .about-vision-lead__quote { color: var(--clr-text-secondary); line-height: 1.85; } .about-page .about-vision-points { border-top: 1px solid var(--clr-gray-200); } .about-page .about-vision-points__list { display: flex; flex-direction: column; gap: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem); max-width: 92rem; margin: 0 auto; } .about-page .about-vision-point__title { font-size: var(--heading-md-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); line-height: 1.3; } .about-page .about-vision-point__body { color: var(--clr-text-secondary); line-height: 1.75; } .about-page .about-vision-point__body + .about-page .about-vision-point__body { margin-top: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); } .about-page .about-advisory__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } @media (max-width: 1024px) { .about-page .about-advisory__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .about-page .about-advisory__grid { grid-template-columns: 1fr; } } .about-page .about-advisor-card { display: flex; flex-direction: column; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); } .about-page .about-advisor-card__photo { width: 100%; } .about-page .about-advisor-card__body { display: flex; flex-direction: column; gap: 0.4rem; } .about-page .about-advisor-card__name { font-size: var(--heading-sm-fs); font-weight: 700; color: var(--clr-text-primary); line-height: 1.3; } .about-page .about-advisor-card__role { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-primary-700); } .about-page .about-advisor-card__affiliation { font-size: var(--body-sm-fs); color: var(--clr-text-secondary); line-height: 1.5; } .about-page .sec-advisory-list .no-container-xl { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem); } .about-page .sec-advisory-list__toolbar { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); flex-wrap: wrap; } .about-page .sec-advisory-list__totals-label { font-size: var(--body-sm-fs); color: var(--clr-text-secondary); margin-right: 0.6rem; } .about-page .sec-advisory-list__totals-value { font-size: var(--body-md-fs); font-weight: 700; color: var(--clr-primary-900); } .about-page .sec-advisory-list__search { position: relative; flex: 0 0 28rem; } .about-page .sec-advisory-list__search i { position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); color: var(--clr-gray-400); pointer-events: none; } .about-page .sec-advisory-list__search input { width: 100%; height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem); border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); padding: 0 1.4rem 0 4rem; font-size: var(--body-sm-fs); background: #fff; } .about-page .sec-advisory-list__search input:focus { outline: none; border-color: var(--clr-primary-700); } .about-page .sec-advisory-list__empty { grid-column: 1/-1; padding: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem) 0; color: var(--clr-text-secondary); text-align: center; } .about-page .sec-advisory-list .no-pagination { grid-column: 1/-1; } .about-page .sec-advisory-list__item { display: grid; grid-template-columns: 20rem 1fr; gap: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); align-items: start; padding: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem) 0; border-top: 1px solid var(--clr-gray-200); cursor: pointer; transition: opacity 0.2s ease; } .about-page .sec-advisory-list__item:hover { opacity: 0.8; } .about-page .sec-advisory-list__item:last-child { border-bottom: 1px solid var(--clr-gray-200); } @media (max-width: 1024px) { .about-page .sec-advisory-list__item:nth-child(2) { border-top: 1px solid var(--clr-gray-200); } } @media (max-width: 768px) { .about-page .sec-advisory-list__item { grid-template-columns: 1fr; gap: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); } } .about-page .sec-advisory-list__photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; } .about-page .sec-advisory-list__photo--placeholder { aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, hsl(calc(207deg + var(--ph-hue, 0deg)), 55%, 90%), hsl(calc(207deg + var(--ph-hue, 0deg)), 55%, 82%)); } .about-page .sec-advisory-list__photo-initial { color: hsl(calc(207deg + var(--ph-hue, 0deg)), 45%, 32%); user-select: none; } .about-page .sec-advisory-list__info { display: flex; flex-direction: column; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); padding-top: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem); } .about-page .sec-advisory-list__name { color: var(--clr-text-primary); } .about-page .sec-advisory-list__role { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-primary-700); } .about-page .sec-advisory-list__affiliation { color: var(--clr-text-secondary); } .about-page .sec-advisory-list__research { color: var(--clr-text-tertiary, var(--clr-gray-500)); margin-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem); } .about-page .about-join__list { display: flex; flex-direction: column; gap: clamp(3.6rem, 1.2944983819vw + 3.1145631068rem, 5.6rem); } .about-page .about-join__block-title { font-size: var(--heading-sm-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); } .about-page .about-join__block-lead, .about-page .about-join__block-body { color: var(--clr-text-secondary); line-height: 1.75; } .about-page .about-join__block-lead + .about-page .about-join__block-lead, .about-page .about-join__block-lead + .about-page .about-join__block-body, .about-page .about-join__block-body + .about-page .about-join__block-lead, .about-page .about-join__block-body + .about-page .about-join__block-body { margin-top: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); } .about-page .about-join__bullets { margin: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) 0; padding-left: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); } .about-page .about-join__bullets li { font-size: var(--body-md-fs); color: var(--clr-text-secondary); line-height: 1.7; list-style: disc; } .about-page .about-join__block--cta { padding-top: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem); border-top: 1px solid var(--clr-gray-200); } .about-page .about-join__actions { display: flex; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); margin-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); flex-wrap: wrap; } .about-page .about-contact { text-align: center; } .about-page .about-contact__map-wrap { max-width: 96rem; margin: 0 auto clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); aspect-ratio: 16/9; border-radius: var(--radius-md, 8px); overflow: hidden; } .about-page .about-contact__map-frame { width: 100%; height: 100%; border: 0; display: block; } .about-page .about-contact__details { display: flex; flex-direction: column; align-items: center; gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); } .about-page .about-contact__address { color: var(--clr-text-primary); } .about-page .about-contact__social { display: flex; align-items: center; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); list-style: none; margin: 0; padding: 0; } .about-page .about-contact__social a { display: inline-flex; align-items: center; justify-content: center; color: var(--clr-gray-600); transition: color 0.2s ease; } .about-page .about-contact__social a:hover { color: var(--clr-primary-900); } .about-page .about-contact__social a i { font-size: 1.6rem; } .about-page .about-contact__email a { font-size: var(--body-sm-fs); color: var(--clr-primary-700); text-decoration: none; } .about-page .about-contact__email a:hover { text-decoration: underline; } .about-page .about-contact__note { color: var(--clr-text-secondary); } .about-page .about-banner { background: var(--clr-primary-900); color: var(--clr-base-white, #fff); } .about-page .about-banner__inner { max-width: 80rem; margin-inline: auto; text-align: center; } .about-page .about-banner__heading { font-size: var(--heading-xl-fs); font-weight: 700; margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); color: inherit; } .about-page .about-banner__body { color: rgba(255, 255, 255, 0.78); line-height: 1.75; } .people-related { margin-top: var(--section-sm, clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem)); } .people-related__title { margin-bottom: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); color: var(--clr-text-base); } .people-related__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } .people-related__item { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); border-bottom: 1px solid var(--clr-gray-200); } .people-related__link { color: var(--clr-primary-700, var(--clr-primary-900)); text-decoration: none; font-size: var(--body-sm-fs); font-weight: 600; line-height: 1.4; } .people-related__link:hover { text-decoration: underline; } .people-related__name { font-size: var(--body-sm-fs); font-weight: 600; color: var(--clr-text-base); line-height: 1.4; } .people-related__meta { font-size: var(--body-xs-fs); color: var(--clr-text-secondary); } .person-modal { display: flex; flex-direction: column; gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); } .person-modal__header { display: flex; align-items: flex-start; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .person-modal__photo { flex: 0 0 clamp(160px, 14vw, 200px); width: clamp(160px, 14vw, 200px); aspect-ratio: 3/4; position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--clr-gray-100); } .person-modal__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .person-modal__photo--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, hsl(calc(207deg + var(--ph-hue, 0deg)), 52%, 88%), hsl(calc(207deg + var(--ph-hue, 0deg)), 52%, 78%)); } .person-modal__photo-initial { font-size: clamp(3.6rem, 0.7766990291vw + 3.3087378641rem, 4.8rem); font-weight: 700; line-height: 1; color: hsl(calc(207deg + var(--ph-hue, 0deg)), 45%, 28%); letter-spacing: -0.02em; user-select: none; } .person-modal__header-info { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.4rem; } .person-modal__name { font-size: var(--heading-sm-fs); font-weight: 700; color: var(--clr-text-primary); line-height: 1.2; margin: 0; } .person-modal__role { font-size: var(--body-sm-fs); font-weight: 700; color: var(--clr-primary-500, var(--clr-primary-400)); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; } .person-modal__affiliation { font-size: var(--body-sm-fs); color: var(--clr-text-secondary); margin: 0; } .person-modal__name-ko { font-size: var(--body-xs-fs); color: var(--clr-text-tertiary, var(--clr-gray-400)); margin: 0; margin-top: 0.2rem; } .person-modal__meta-strip { display: flex; flex-direction: column; gap: 0; padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) 0; border-top: 1px solid var(--clr-gray-200); border-bottom: 1px solid var(--clr-gray-200); margin: 0; } .person-modal__meta-item { display: grid; grid-template-columns: 14rem 1fr; align-items: baseline; gap: 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); padding: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2rem) 0; border-bottom: 1px solid var(--clr-gray-100); } .person-modal__meta-item:last-child { border-bottom: none; } .person-modal__meta-item dt { font-size: var(--body-xs-fs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-text-tertiary, var(--clr-gray-400)); padding-top: 0.15em; } .person-modal__meta-item dd { font-size: var(--body-sm-fs); color: var(--clr-text-primary); margin: 0; line-height: 1.5; } .person-modal__meta-item dd a { color: var(--clr-primary-700, var(--clr-primary-900)); text-decoration: none; word-break: break-all; } .person-modal__meta-item dd a:hover { text-decoration: underline; } .person-modal__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .person-modal__links { display: flex; flex-wrap: wrap; gap: 0.6rem; } .person-modal__links a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1.2rem; border-radius: 999px; border: 1px solid var(--clr-primary-300, var(--clr-primary-400)); background: transparent; color: var(--clr-primary-700, var(--clr-primary-900)); font-size: var(--body-sm-fs); font-weight: 600; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; } .person-modal__links a i { font-size: 0.9em; } .person-modal__links a:hover { background: var(--clr-primary-50, #e6f2fa); border-color: var(--clr-primary-500, var(--clr-primary-400)); } .person-modal__bio { color: var(--clr-text-secondary); line-height: 1.85; font-size: var(--body-md-fs); } /* =================================================== Research pages — Framework, Technical Groups, Core Projects, Platforms, Publications, Partnering =================================================== */ .research-page .research-band { padding: clamp(5.6rem, 2.5889967638vw + 4.6291262136rem, 9.6rem) 0; text-align: center; } .research-page .research-band--navy { background: var(--clr-primary-900); color: #fff; } .research-page .research-band--soft { background: transparent; } .research-page .research-band__title { color: var(--clr-text-primary); margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .research-page .research-band__text { max-width: 80rem; margin: 0 auto; line-height: 1.75; color: inherit; } .research-page .research-cycle__title { text-align: center; color: var(--clr-text-primary); margin-bottom: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem); } .research-page .research-cycle__diagram { margin: 0 auto clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem); } .research-page .research-cycle__columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem); } @media (max-width: 768px) { .research-page .research-cycle__columns { grid-template-columns: 1fr; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } } .research-page .research-cycle__columns p { color: var(--clr-text-secondary); line-height: 1.8; } .research-page .research-why { text-align: center; } .research-page .research-why__eyebrow { letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-primary-700); margin-bottom: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); } .research-page .research-why__title { color: var(--clr-text-primary); margin-bottom: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem); } .research-page .research-why .ui-feature-card { text-align: left; } .research-page .research-platform-links { display: flex; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); justify-content: center; margin-top: clamp(2.8rem, 1.0355987055vw + 2.4116504854rem, 4.4rem); flex-wrap: wrap; } .research-page .research-platform-link { display: inline-flex; align-items: center; justify-content: center; padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem) clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem); border-radius: var(--radius-sm); font-size: var(--body-md-fs); font-weight: 700; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .research-page .research-platform-link:hover, .research-page .research-platform-link:focus-visible { opacity: 0.92; transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.3); } .research-page .research-platform-link--filled-navy { background: var(--clr-primary-900); color: #fff; } .research-page .research-platform-link--filled-blue { background: var(--clr-primary-700); color: #fff; } .research-page .research-platform-link--outline { background: #fff; color: var(--clr-primary-900); border: 1px solid var(--clr-primary-900); } .research-page .research-platform-oasdl { text-align: center; } .research-page .research-platform-oasdl__title { color: var(--clr-text-primary); margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .research-page .research-platform-oasdl__sub { max-width: 76rem; margin: 0 auto clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); color: var(--clr-text-secondary); line-height: 1.75; } .research-page .research-tg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } @media (max-width: 1024px) { .research-page .research-tg-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .research-page .research-tg-grid { grid-template-columns: 1fr; } } .research-page .research-tg-card { display: flex; flex-direction: column; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--clr-base-white); } .research-page .research-tg-card:hover .research-page .research-tg-card__img img { transform: scale(1.04); } .research-page .research-tg-card:hover .research-page .research-tg-card__name { color: var(--clr-primary-400); } .research-page .research-tg-card__img { width: 100%; overflow: hidden; border-radius: var(--radius-sm); } .research-page .research-tg-card__img img { display: block; width: 100%; height: auto; transition: transform 0.4s ease; } .research-page .research-tg-card__body { display: flex; flex-direction: column; gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem); align-items: flex-start; } .research-page .research-tg-card__title { display: flex; align-items: baseline; gap: 0.8rem; font-size: var(--heading-sm-fs); font-weight: 700; line-height: 1.3; } .research-page .research-tg-card__id { color: var(--clr-primary-700); } .research-page .research-tg-card__name { color: var(--clr-text-primary); transition: color 0.25s ease; } .research-page .research-tg-card__desc { font-size: var(--body-sm-fs); color: var(--clr-text-secondary); line-height: 1.7; } .research-page .research-tg-footer { background: var(--clr-bg-section); } .research-page .research-tg-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem); align-items: center; } @media (max-width: 768px) { .research-page .research-tg-footer__grid { grid-template-columns: 1fr; } } .research-page .research-tg-footer__title { color: var(--clr-text-primary); margin-bottom: clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.2rem); } .research-page .research-tg-footer p { color: var(--clr-text-secondary); line-height: 1.8; } .research-page .research-tg-footer p + p { margin-top: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); } .research-page .research-cp-overview { background: var(--clr-bg-section); } .research-page .research-cp-overview__title { font-size: var(--heading-md-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .research-page .research-cp-overview__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem); } @media (max-width: 768px) { .research-page .research-cp-overview__grid { grid-template-columns: 1fr; } } .research-page .research-cp-overview__grid p { color: var(--clr-text-secondary); line-height: 1.8; } .research-page .research-cp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); } @media (max-width: 544px) { .research-page .research-cp-stats { grid-template-columns: repeat(2, 1fr); } } .research-page .research-cp-stat { display: flex; flex-direction: column; gap: 0.4rem; } .research-page .research-cp-stat__value { font-size: var(--heading-lg-fs); font-weight: 700; color: var(--clr-primary-900); line-height: 1; } .research-page .research-cp-stat__label { font-size: var(--body-xs-fs); color: var(--clr-text-secondary); } .research-page .research-cp-list-section__title { font-size: var(--heading-md-fs); font-weight: 700; text-align: center; color: var(--clr-text-primary); margin-bottom: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem); } .research-page .research-cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } @media (max-width: 768px) { .research-page .research-cp-grid { grid-template-columns: 1fr; } } .research-page .research-cp-card { padding: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem); border-radius: var(--radius-md); color: #fff; display: flex; flex-direction: column; gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); transition: transform 0.28s ease, box-shadow 0.28s ease; } .research-page .research-cp-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -18px rgba(15, 23, 42, 0.45); } .research-page .research-cp-card--navy { background: var(--clr-primary-900); } .research-page .research-cp-card--sky { background: var(--clr-primary-700); } .research-page .research-cp-card--red { background: #b32424; } .research-page .research-cp-card--blue { background: #1e3a8a; } .research-page .research-cp-card__eyebrow { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } .research-page .research-cp-card__title { display: flex; align-items: baseline; gap: 0.8rem; font-size: var(--heading-sm-fs); font-weight: 700; line-height: 1.3; flex-wrap: wrap; } .research-page .research-cp-card__id { color: rgba(255, 255, 255, 0.65); } .research-page .research-cp-card__desc { font-size: var(--body-sm-fs); line-height: 1.75; color: rgba(255, 255, 255, 0.85); } .research-page .research-cp-card__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .research-page .research-cp-card__bullets li { font-size: var(--body-sm-fs); color: rgba(255, 255, 255, 0.9); padding-left: 1.6rem; position: relative; line-height: 1.6; } .research-page .research-cp-card__bullets li::before { content: "—"; position: absolute; left: 0; color: rgba(255, 255, 255, 0.55); } .research-page .research-cp-banner { background: var(--clr-primary-900); color: #fff; text-align: center; } .research-page .research-cp-banner__inner { max-width: 92rem; margin: 0 auto; } .research-page .research-cp-banner__eyebrow { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-primary-500); margin-bottom: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); } .research-page .research-cp-banner__title { font-size: var(--heading-md-fs); font-weight: 700; margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .research-page .research-cp-banner__body { color: rgba(255, 255, 255, 0.8); line-height: 1.8; } .research-page .research-publications__bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); border-bottom: 1px solid var(--clr-gray-200); flex-wrap: wrap; gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); } .research-page .research-publications__count { font-size: var(--body-sm-fs); color: var(--clr-text-secondary); } .research-page .research-publications__active-filters { display: flex; gap: 0.8rem; align-items: center; } .research-page .research-partnering-intro__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem); align-items: center; } @media (max-width: 768px) { .research-page .research-partnering-intro__grid { grid-template-columns: 1fr; } } .research-page .research-partnering-intro__grid p { color: var(--clr-text-secondary); line-height: 1.8; } .research-page .research-partnering-types { background: var(--clr-bg-section); } .research-page .research-partnering-types__title { font-size: var(--heading-sm-fs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-primary); margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); } .research-page .research-partnering-soft { background: var(--clr-bg-section); padding: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem) 0; } .research-page .research-partnering-soft__text { max-width: 86rem; margin: 0 auto; text-align: center; color: var(--clr-text-secondary); line-height: 1.85; } .research-page .research-partnering-impact__title { font-size: var(--heading-sm-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); } .research-page .research-partnering-cta { background: var(--clr-primary-900); color: #fff; padding: clamp(5.6rem, 2.5889967638vw + 4.6291262136rem, 9.6rem) 0; } .research-page .research-partnering-cta__inner { max-width: 76rem; text-align: left; } .research-page .research-partnering-cta__title { font-size: var(--heading-md-fs); font-weight: 700; margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); } .research-page .research-partnering-cta__body { color: rgba(255, 255, 255, 0.8); line-height: 1.75; margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); } .research-two-col { display: grid; grid-template-columns: 1fr 28rem; gap: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem); align-items: start; padding-block: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem); } @media (max-width: 1024px) { .research-two-col { grid-template-columns: 1fr; gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem); } } .research-two-col__main { min-width: 0; } .research-two-col__side { position: sticky; top: calc(var(--header-height, 7.2rem) + clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem)); } @media (max-width: 1024px) { .research-two-col__side { position: static; } } /* =================================================== Facilities pages — OA-SDL, Usage Procedures, Reservation =================================================== */ .facilities-page .about-section, .research-page .about-section { padding: clamp(6.4rem, 3.1067961165vw + 5.2349514563rem, 11.2rem) 0; } .facilities-page .oasdl-hero, .research-page .oasdl-hero { background: linear-gradient(135deg, var(--clr-primary-900) 0%, var(--clr-primary-700) 100%); color: #fff; padding-top: calc(var(--header-height) + clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem)); padding-bottom: 0; } .facilities-page .oasdl-hero__eyebrow, .research-page .oasdl-hero__eyebrow { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .facilities-page .oasdl-hero__title, .research-page .oasdl-hero__title { font-size: var(--heading-xl-fs); font-weight: 700; line-height: 1.15; max-width: 72rem; margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .facilities-page .oasdl-hero__abbr, .research-page .oasdl-hero__abbr { color: var(--clr-primary-500); } .facilities-page .oasdl-hero__sub, .research-page .oasdl-hero__sub { font-size: var(--body-lg-fs); color: rgba(255, 255, 255, 0.8); max-width: 60rem; line-height: 1.7; margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); } .facilities-page .oasdl-hero__actions, .research-page .oasdl-hero__actions { display: flex; gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem); flex-wrap: wrap; margin-bottom: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem); } .facilities-page .oasdl-hero__btn, .research-page .oasdl-hero__btn { display: inline-flex; align-items: center; gap: 0.8rem; padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; transition: transform 0.2s ease; } .facilities-page .oasdl-hero__btn:hover, .research-page .oasdl-hero__btn:hover { transform: translateY(-1px); } .facilities-page .oasdl-hero__btn--primary, .research-page .oasdl-hero__btn--primary { background: #fff; color: var(--clr-primary-900); } .facilities-page .oasdl-hero__btn--ghost, .research-page .oasdl-hero__btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); } .facilities-page .oasdl-hero__stats, .research-page .oasdl-hero__stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); list-style: none; padding: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem) 0; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15); background: var(--clr-primary-900); } .facilities-page .oasdl-hero__stats li, .research-page .oasdl-hero__stats li { display: flex; flex-direction: column; gap: 0.4rem; } @media (max-width: 768px) { .facilities-page .oasdl-hero__stats, .research-page .oasdl-hero__stats { grid-template-columns: repeat(2, 1fr); } } .facilities-page .oasdl-hero__stat-value, .research-page .oasdl-hero__stat-value { font-size: var(--heading-md-fs); font-weight: 700; color: #fff; line-height: 1; } .facilities-page .oasdl-hero__stat-label, .research-page .oasdl-hero__stat-label { font-size: var(--body-xs-fs); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .facilities-page .oasdl-intro__eyebrow, .research-page .oasdl-intro__eyebrow { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-primary-700); margin-bottom: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); } .facilities-page .oasdl-intro__title, .research-page .oasdl-intro__title { font-size: var(--heading-md-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); max-width: 80rem; } .facilities-page .oasdl-intro__body, .research-page .oasdl-intro__body { display: flex; flex-direction: column; gap: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); max-width: 84rem; } .facilities-page .oasdl-intro__body p, .research-page .oasdl-intro__body p { color: var(--clr-text-secondary); line-height: 1.8; } .facilities-page .oasdl-flow, .research-page .oasdl-flow { background: var(--clr-bg-section); } .facilities-page .oasdl-flow__title, .research-page .oasdl-flow__title { font-size: var(--heading-md-fs); font-weight: 700; text-align: center; color: var(--clr-text-primary); margin-bottom: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem); } .facilities-page .oasdl-inside__title, .research-page .oasdl-inside__title { font-size: var(--heading-md-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); } .facilities-page .oasdl-contact__title, .research-page .oasdl-contact__title { font-size: var(--heading-md-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); } .facilities-page .oasdl-contact__grid, .research-page .oasdl-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } @media (max-width: 768px) { .facilities-page .oasdl-contact__grid, .research-page .oasdl-contact__grid { grid-template-columns: 1fr; } } .facilities-page .oasdl-contact-card, .research-page .oasdl-contact-card { padding: clamp(2.8rem, 1.0355987055vw + 2.4116504854rem, 4.4rem); border-radius: var(--radius-md); border: 1px solid var(--clr-gray-200); background: #fff; } .facilities-page .oasdl-contact-card--filled, .research-page .oasdl-contact-card--filled { background: var(--clr-primary-900); color: #fff; border-color: var(--clr-primary-900); } .facilities-page .oasdl-contact-card--filled .oasdl-contact-card__label, .research-page .oasdl-contact-card--filled .oasdl-contact-card__label { color: rgba(255, 255, 255, 0.65); } .facilities-page .oasdl-contact-card--filled .oasdl-contact-card__value, .research-page .oasdl-contact-card--filled .oasdl-contact-card__value { color: #fff; } .facilities-page .oasdl-contact-card--filled .oasdl-contact-card__detail, .research-page .oasdl-contact-card--filled .oasdl-contact-card__detail { color: rgba(255, 255, 255, 0.85); } .facilities-page .oasdl-contact-card__label, .research-page .oasdl-contact-card__label { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-gray-400); margin-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem); } .facilities-page .oasdl-contact-card__value, .research-page .oasdl-contact-card__value { font-size: var(--heading-sm-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); } .facilities-page .oasdl-contact-card__note, .facilities-page .oasdl-contact-card__detail, .research-page .oasdl-contact-card__note, .research-page .oasdl-contact-card__detail { color: var(--clr-text-secondary); line-height: 1.6; } .facilities-page .oasdl-contact-card__note + .facilities-page .oasdl-contact-card__note, .facilities-page .oasdl-contact-card__note + .facilities-page .oasdl-contact-card__detail, .facilities-page .oasdl-contact-card__note + .research-page .oasdl-contact-card__note, .facilities-page .oasdl-contact-card__note + .research-page .oasdl-contact-card__detail, .facilities-page .oasdl-contact-card__detail + .facilities-page .oasdl-contact-card__note, .facilities-page .oasdl-contact-card__detail + .facilities-page .oasdl-contact-card__detail, .facilities-page .oasdl-contact-card__detail + .research-page .oasdl-contact-card__note, .facilities-page .oasdl-contact-card__detail + .research-page .oasdl-contact-card__detail, .research-page .oasdl-contact-card__note + .facilities-page .oasdl-contact-card__note, .research-page .oasdl-contact-card__note + .facilities-page .oasdl-contact-card__detail, .research-page .oasdl-contact-card__note + .research-page .oasdl-contact-card__note, .research-page .oasdl-contact-card__note + .research-page .oasdl-contact-card__detail, .research-page .oasdl-contact-card__detail + .facilities-page .oasdl-contact-card__note, .research-page .oasdl-contact-card__detail + .facilities-page .oasdl-contact-card__detail, .research-page .oasdl-contact-card__detail + .research-page .oasdl-contact-card__note, .research-page .oasdl-contact-card__detail + .research-page .oasdl-contact-card__detail { margin-top: 0.4rem; } .facilities-page .oasdl-contact-card__btn, .research-page .oasdl-contact-card__btn { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); background: #fff; color: var(--clr-primary-900); border-radius: var(--radius-sm); font-weight: 700; font-size: var(--body-sm-fs); text-decoration: none; } .facilities-page .oasdl-faq, .research-page .oasdl-faq { background: var(--clr-bg-section); } .facilities-page .oasdl-faq__title, .research-page .oasdl-faq__title { font-size: var(--heading-md-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); } .facilities-page .oasdl-faq__list, .research-page .oasdl-faq__list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--clr-gray-200); } .facilities-page .oasdl-faq__item, .research-page .oasdl-faq__item { border-bottom: 1px solid var(--clr-gray-200); padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem) 0; } .facilities-page .oasdl-faq__item summary, .research-page .oasdl-faq__item summary { cursor: pointer; font-size: var(--body-md-fs); font-weight: 600; color: var(--clr-text-primary); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .facilities-page .oasdl-faq__item summary::-webkit-details-marker, .research-page .oasdl-faq__item summary::-webkit-details-marker { display: none; } .facilities-page .oasdl-faq__item summary::after, .research-page .oasdl-faq__item summary::after { content: "+"; font-size: var(--heading-xs-fs); color: var(--clr-primary-700); } .facilities-page .oasdl-faq__item[open] summary::after, .research-page .oasdl-faq__item[open] summary::after { content: "−"; } .facilities-page .oasdl-faq__item p, .research-page .oasdl-faq__item p { margin-top: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); color: var(--clr-text-secondary); line-height: 1.7; } .facilities-page .usage-intro__quote, .research-page .usage-intro__quote { max-width: 84rem; margin: 0 auto; padding: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); border-left: 4px solid var(--clr-primary-700); background: var(--clr-primary-50); font-size: var(--body-md-fs); color: var(--clr-text-primary); line-height: 1.7; } .facilities-page .usage-steps__eyebrow, .research-page .usage-steps__eyebrow { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-primary-700); margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .facilities-page .usage-fees, .research-page .usage-fees { background: var(--clr-bg-section); } .facilities-page .usage-fees__title, .research-page .usage-fees__title { font-size: var(--heading-md-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); } .facilities-page .usage-fees__sub, .research-page .usage-fees__sub { color: var(--clr-text-secondary); margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .facilities-page .usage-fees__note, .research-page .usage-fees__note { font-size: var(--body-xs-fs); color: var(--clr-text-secondary); } .facilities-page .usage-fees__footnote, .research-page .usage-fees__footnote { margin-top: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); color: var(--clr-text-secondary); } .facilities-page .usage-guidelines__title, .research-page .usage-guidelines__title { font-size: var(--heading-md-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem); } .facilities-page .reservation__toolbar, .research-page .reservation__toolbar { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); flex-wrap: wrap; } .facilities-page .reservation__totals-label, .research-page .reservation__totals-label { font-size: var(--body-sm-fs); color: var(--clr-text-secondary); margin-right: 0.6rem; } .facilities-page .reservation__totals-value, .research-page .reservation__totals-value { font-size: var(--body-md-fs); font-weight: 700; color: var(--clr-primary-900); } .facilities-page .reservation__search, .research-page .reservation__search { position: relative; flex: 0 0 28rem; } .facilities-page .reservation__search i, .research-page .reservation__search i { position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); color: var(--clr-gray-400); } .facilities-page .reservation__search input, .research-page .reservation__search input { width: 100%; height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem); border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); padding: 0 1.4rem 0 4rem; font-size: var(--body-sm-fs); background: #fff; } .facilities-page .reservation__search input:focus, .research-page .reservation__search input:focus { outline: none; border-color: var(--clr-primary-700); } .facilities-page .reservation__categories, .research-page .reservation__categories { margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); } .facilities-page .reservation__layout, .research-page .reservation__layout { display: grid; grid-template-columns: 26rem 1fr 26rem; gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); align-items: flex-start; } @media (max-width: 1024px) { .facilities-page .reservation__layout, .research-page .reservation__layout { grid-template-columns: 1fr; } } .facilities-page .reservation__list, .research-page .reservation__list { display: flex; flex-direction: column; gap: 0; max-height: 72rem; overflow-y: auto; border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: #fff; } .facilities-page .reservation__list-head, .research-page .reservation__list-head { display: flex; align-items: center; justify-content: space-between; padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); border-bottom: 1px solid var(--clr-gray-200); font-size: var(--body-sm-fs); font-weight: 600; color: var(--clr-text-primary); position: sticky; top: 0; background: #fff; z-index: 1; } .facilities-page .reservation__sort, .research-page .reservation__sort { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 0; color: var(--clr-text-secondary); font-size: var(--body-xs-fs); cursor: pointer; } .facilities-page .reservation__detail, .research-page .reservation__detail { padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: #fff; } .facilities-page .reservation__detail-img, .research-page .reservation__detail-img { margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .facilities-page .reservation__detail-name, .research-page .reservation__detail-name { font-size: var(--heading-sm-fs); font-weight: 700; color: var(--clr-text-primary); margin-bottom: 0.4rem; } .facilities-page .reservation__detail-sub, .research-page .reservation__detail-sub { font-size: var(--body-sm-fs); color: var(--clr-text-secondary); margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); } .facilities-page .reservation__detail-meta, .research-page .reservation__detail-meta { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); } .facilities-page .reservation__detail-meta div, .research-page .reservation__detail-meta div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; font-size: var(--body-sm-fs); } .facilities-page .reservation__detail-meta dt, .research-page .reservation__detail-meta dt { color: var(--clr-text-secondary); } .facilities-page .reservation__detail-meta dd, .research-page .reservation__detail-meta dd { color: var(--clr-text-primary); margin: 0; } .facilities-page .reservation__detail-more, .research-page .reservation__detail-more { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.2rem; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); background: #fff; font-size: var(--body-xs-fs); color: var(--clr-text-primary); cursor: pointer; } .facilities-page .reservation__side, .research-page .reservation__side { display: flex; flex-direction: column; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .facilities-page .reservation__apply-btn, .research-page .reservation__apply-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); background: var(--clr-primary-700); color: #fff; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; } .facilities-page .reservation__side-tabs, .research-page .reservation__side-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .facilities-page .reservation__side-tab, .research-page .reservation__side-tab { display: inline-flex; align-items: center; justify-content: space-between; padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem); border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); background: #fff; font-size: var(--body-sm-fs); color: var(--clr-text-primary); cursor: pointer; } .facilities-page .reservation__side-tab.is-active, .research-page .reservation__side-tab.is-active { background: var(--clr-primary-50); border-color: var(--clr-primary-700); color: var(--clr-primary-900); } .facilities-page .reservation__notices, .research-page .reservation__notices { padding: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); background: #fff; } .facilities-page .reservation__notices-head, .research-page .reservation__notices-head { font-size: var(--body-xs-fs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-secondary); margin-bottom: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); } .facilities-page .reservation__notice-list, .research-page .reservation__notice-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); } .facilities-page .reservation__notice-tag, .research-page .reservation__notice-tag { font-size: var(--body-xs-fs); font-weight: 700; color: var(--clr-primary-700); } .facilities-page .reservation__notice-body, .research-page .reservation__notice-body { font-size: var(--body-sm-fs); color: var(--clr-text-primary); line-height: 1.5; } .facilities-page .reservation__notice-pager, .research-page .reservation__notice-pager { display: flex; align-items: center; gap: 0.6rem; margin-top: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem); font-size: var(--body-xs-fs); color: var(--clr-text-secondary); } .facilities-page .reservation__notice-pager button, .research-page .reservation__notice-pager button { background: transparent; border: 0; color: inherit; cursor: pointer; } .facilities-page .reservation__schedule, .research-page .reservation__schedule { margin-top: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem); } .facilities-page .reservation__schedule-head, .research-page .reservation__schedule-head { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); margin-bottom: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); flex-wrap: wrap; } .facilities-page .reservation__schedule-nav, .research-page .reservation__schedule-nav { display: inline-flex; align-items: center; gap: 1rem; } .facilities-page .reservation__schedule-nav button, .research-page .reservation__schedule-nav button { background: transparent; border: 0; color: var(--clr-text-primary); cursor: pointer; } .facilities-page .reservation__schedule-legend, .research-page .reservation__schedule-legend { display: inline-flex; align-items: center; gap: 1.2rem; font-size: var(--body-xs-fs); color: var(--clr-text-secondary); } .facilities-page .reservation__legend-chip, .research-page .reservation__legend-chip { display: inline-block; width: 1rem; height: 1rem; border-radius: var(--radius-xs); margin-right: 0.4rem; } .facilities-page .reservation__legend-chip--pending, .research-page .reservation__legend-chip--pending { background: var(--clr-gray-300); } .facilities-page .reservation__legend-chip--approved, .research-page .reservation__legend-chip--approved { background: var(--clr-primary-700); } .facilities-page .reservation__legend-chip--completed, .research-page .reservation__legend-chip--completed { background: #15803d; } .facilities-page .reservation__schedule-grid, .research-page .reservation__schedule-grid { width: 100%; } .facilities-page .reservation__schedule-footnote, .research-page .reservation__schedule-footnote { margin-top: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem); color: var(--clr-text-secondary); } .facilities-page .reservation-item, .research-page .reservation-item { display: flex; gap: 1rem; padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); border-bottom: 1px solid var(--clr-gray-200); text-align: left; background: transparent; transition: background-color 0.2s ease; } .facilities-page .reservation-item:hover, .research-page .reservation-item:hover { background: var(--clr-gray-50); } .facilities-page .reservation-item.is-active, .research-page .reservation-item.is-active { background: var(--clr-primary-50); border-left: 3px solid var(--clr-primary-700); } .facilities-page .reservation-item__thumb, .research-page .reservation-item__thumb { width: 6.4rem; flex-shrink: 0; } .facilities-page .reservation-item__body, .research-page .reservation-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; } .facilities-page .reservation-item__name, .research-page .reservation-item__name { font-size: var(--body-md-fs); font-weight: 700; color: var(--clr-text-primary); line-height: 1.3; } .facilities-page .reservation-item__sub, .research-page .reservation-item__sub { font-size: var(--body-xs-fs); color: var(--clr-primary-700); font-weight: 600; } .facilities-page .reservation-item__contact, .facilities-page .reservation-item__phone, .research-page .reservation-item__contact, .research-page .reservation-item__phone { font-size: var(--body-xs-fs); color: var(--clr-text-secondary); line-height: 1.4; } /* =================================================== Learning pages — Education Programs, Outreach & Public Engagement, Learning Resources =================================================== */ /* =================================================== News / Events / Activities pages =================================================== */ .news-page .about-section { padding: clamp(6.4rem, 3.1067961165vw + 5.2349514563rem, 11.2rem) 0; } .news-page .news-list-section__categories, .news-page .events-section__categories, .news-page .activities-section__categories { margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); } .news-page .news-list-section__pager { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem); } .news-page .news-list-section__pager button, .news-page .news-list-section__pager a { display: inline-flex; align-items: center; justify-content: center; min-width: 3.6rem; height: 3.6rem; padding: 0 0.8rem; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); background: #fff; color: var(--clr-text-primary); font-size: var(--body-sm-fs); text-decoration: none; cursor: pointer; } .news-page .news-list-section__pager .is-active { background: var(--clr-primary-900); color: #fff; border-color: var(--clr-primary-900); padding: 0 1.2rem; min-width: 3.6rem; display: inline-flex; align-items: center; justify-content: center; } .news-page .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } @media (max-width: 1024px) { .news-page .news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .news-page .news-grid { grid-template-columns: 1fr; } } .news-page .events-section__toolbar { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); flex-wrap: wrap; } .news-page .events-section__view .ui-tabs__item { display: inline-flex; align-items: center; gap: 0.6rem; } .news-page .events-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem); } .news-page .events-calendar .ui-calendar__head { display: flex; align-items: center; justify-content: center; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .news-page .events-calendar .ui-calendar__nav { background: transparent; border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); width: 3.6rem; height: 3.6rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .news-page .events-calendar .ui-calendar__month { font-size: var(--heading-sm-fs); font-weight: 700; color: var(--clr-text-primary); } .news-page .activities-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } @media (max-width: 1024px) { .news-page .activities-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .news-page .activities-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .news-page .activities-grid { grid-template-columns: 1fr; } } /* ─── People (about-page extension) ──────────────────────────────────────── */ .about-page .about-people__toolbar { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); flex-wrap: wrap; } .about-page .about-people__totals-label { font-size: var(--body-sm-fs); color: var(--clr-text-secondary); margin-right: 0.6rem; } .about-page .about-people__totals-value { font-size: var(--body-md-fs); font-weight: 700; color: var(--clr-primary-900); } .about-page .about-people__search { position: relative; flex: 0 0 28rem; } .about-page .about-people__search i { position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); color: var(--clr-gray-400); } .about-page .about-people__search input { width: 100%; height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem); border: 1px solid var(--clr-gray-300); border-radius: var(--radius-sm); padding: 0 1.4rem 0 4rem; font-size: var(--body-sm-fs); background: #fff; } .about-page .about-people__search input:focus { outline: none; border-color: var(--clr-primary-700); } .about-page .about-people__categories { margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 3.6rem); } .about-page .about-people__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } @media (max-width: 544px) { .about-page .about-people__grid { grid-template-columns: 1fr; } } /* =================================================== 게시판 게시글 — 썸네일 / 첨부파일 (board-page · post-card · post-detail 의 신규 미디어 요소 한정) =================================================== */ .post-card__thumb { display: block; overflow: hidden; contain: paint; margin-bottom: var(--spacing-md); border-radius: var(--radius-md); background: var(--clr-gray-50); aspect-ratio: 16/9; } .post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transform: translateZ(0) scale(1.001); transform-origin: center; backface-visibility: hidden; will-change: transform; transition: transform var(--dur-base) var(--ease-out-quart); } .post-card__link:hover .post-card__thumb img, .post-card__link:focus-visible .post-card__thumb img { transform: translateZ(0) scale(1.045); } .post-card--gallery .post-card__thumb, .post-card--webzine .post-card__thumb { aspect-ratio: 4/3; } .board-page--gallery { padding-block: var(--section-md); } .board-search { display: flex; align-items: center; gap: var(--spacing-xs); width: 100%; max-width: 48rem; margin: 0 auto var(--section-sm); padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg); border: 1px solid var(--clr-ui-border); border-radius: var(--radius-round); background: var(--clr-base-white); transition: border-color var(--tran-3), box-shadow var(--tran-3); } .board-search__field { min-width: 0; flex: 1 1 auto; } .board-search__field .ui-search-input__field { height: auto; padding: 0 var(--spacing-xl) 0 0; border-bottom: 0; } .board-search__field .ui-search-input__icon { display: none; } .board-search__field .ui-search-input__clear { right: 0; color: var(--clr-primary-700); } .board-search:focus-within { border-color: var(--clr-accent-500); } .board-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--clr-text-base); } .board-search__input:focus-visible { outline: none; } .board-search__input::placeholder { color: var(--clr-text-aux); } .board-search__submit { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.4rem); height: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.4rem); border: 0; border-radius: var(--radius-round); background: var(--clr-primary-700); color: var(--clr-base-white); cursor: pointer; transition: background-color var(--tran-3); } .board-search__submit:hover { background: var(--clr-accent-500); } .board-search__submit:focus-visible { outline: none; background: var(--clr-accent-500); } .board-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-2xl) var(--spacing-xl); } @media (max-width: 1024px) { .board-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 544px) { .board-gallery { grid-template-columns: minmax(0, 1fr); } } .board-page--insight { position: relative; scroll-margin-top: calc(var(--header-height) + var(--spacing-lg)); transition: opacity var(--dur-fast) var(--ease-out-quart); } .board-page--insight.is-loading { opacity: 0.58; pointer-events: none; } .board-page--insight .board-gallery { gap: var(--spacing-xl); } .board-page--insight .board-gallery__cell, .board-page--insight .theh-insight-card { min-width: 0; height: 100%; } .board-page--insight .theh-insight-card { grid-template-rows: auto 1fr; } .post-card--gallery .post-card__link { display: block; color: var(--clr-text-base); } .post-card--gallery .post-card__title { text-align: center; color: var(--clr-text-base); transition: color var(--tran-3); } .post-card--gallery .post-card__date { display: block; margin-top: var(--spacing-xs); text-align: center; color: var(--clr-text-sub); } .post-card--gallery .post-card__summary { display: none; } .post-card--gallery .post-card__link:hover .post-card__title, .post-card--gallery .post-card__link:focus-visible .post-card__title { color: var(--clr-accent-500); } .board-page--gallery .no-pagination .--numbers { display: inline-flex; align-items: center; gap: var(--spacing-xs); } .board-page--gallery .no-pagination .--numbers a { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); padding: 0 var(--spacing-xs); border-radius: var(--radius-round); color: var(--clr-text-sub); transition: background-color var(--tran-3), color var(--tran-3); } .board-page--gallery .no-pagination .--numbers a:hover { color: var(--clr-primary-900); } .board-page--gallery .no-pagination .--numbers a.active { background: var(--clr-primary-main); color: var(--clr-base-white); font-weight: 600; } .board-page--gallery .no-pagination .--arrow { display: inline-flex; align-items: center; justify-content: center; width: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem); color: var(--clr-text-sub); transition: color var(--tran-3); } .board-page--gallery .no-pagination .--arrow:hover { color: var(--clr-primary-900); } .board-page--gallery .no-pagination .--arrow[disabled] { opacity: 0.4; pointer-events: none; } .board-page--gallery .no-pagination .--dots { padding: 0 var(--spacing-xxs); color: var(--clr-text-aux); } .post-attachments { margin-top: var(--section-sm); padding-top: var(--spacing-xl); border-top: 1px solid var(--clr-gray-100); } .post-attachments__title { margin-bottom: var(--spacing-md); } .post-attachments__list { display: flex; flex-direction: column; gap: var(--spacing-sm); list-style: none; margin: 0; padding: 0; } .post-attachments__link { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--clr-gray-100); border-radius: var(--radius-md); color: var(--clr-base-black); transition: border-color var(--tran-3), background-color var(--tran-3), color var(--tran-3); } .post-attachments__link:hover, .post-attachments__link:focus-visible { border-color: var(--clr-primary-500); background: color-mix(in srgb, var(--clr-primary-500) 5%, transparent); color: var(--clr-primary-500); } .post-attachments__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; } .post-attachments__name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-attachments__size { flex: 0 0 auto; color: var(--clr-text-desc); } .post-detail__head { margin-bottom: var(--section-sm); } .post-detail__crumbs { margin-bottom: var(--spacing-lg); color: var(--clr-text-aux); } .post-detail__title { padding: var(--spacing-lg) 0; border-top: 2px solid var(--clr-text-base); color: var(--clr-text-base); } .post-detail__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-md) 0; border-top: 1px solid var(--clr-gray-200); border-bottom: 1px solid var(--clr-gray-200); color: var(--clr-text-sub); } @media (max-width: 544px) { .post-detail__meta { flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); } } .post-detail__meta-group { display: flex; align-items: center; gap: var(--spacing-lg); } .post-detail__author { color: var(--clr-primary-main); font-weight: 600; } .post-detail__date, .post-detail__views { color: var(--clr-text-sub); } .post-detail__thumb { margin: 0 0 var(--section-sm); } .post-detail__thumb img { display: block; width: 100%; max-width: 80rem; height: auto; margin-inline: auto; border-radius: var(--radius-md); } .post-detail__content { color: var(--clr-text-base); line-height: 1.8; } .post-detail__content img { display: block; max-width: 100%; height: auto; margin-inline: auto; } .post-detail__content :where(p, ul, ol, h2, h3, h4, blockquote, figure, table) { margin-bottom: var(--spacing-lg); } .post-detail__content :where(p, ul, ol, h2, h3, h4, blockquote, figure, table):last-child { margin-bottom: 0; } .post-detail__back { display: flex; justify-content: center; margin-top: var(--section-md); padding-top: var(--spacing-lg); border-top: 1px solid var(--clr-gray-200); } .post-prev-next { display: flex; flex-direction: column; margin-top: var(--section-sm); border-top: 1px solid var(--clr-gray-300); } .post-prev-next__cell { display: flex; align-items: center; gap: var(--spacing-xl); padding: var(--spacing-md) var(--spacing-xs); border-bottom: 1px solid var(--clr-gray-200); color: var(--clr-text-primary); transition: background-color var(--tran-3), color var(--tran-3); } .post-prev-next__cell:hover:not(.post-prev-next__cell--empty), .post-prev-next__cell:focus-visible:not(.post-prev-next__cell--empty) { background: var(--clr-ui-hover-bg); color: var(--clr-primary-900); } .post-prev-next__cell--empty { opacity: 0.55; pointer-events: none; } @media (max-width: 544px) { .post-prev-next__cell { gap: var(--spacing-md); } } .post-prev-next__label { flex: 0 0 auto; min-width: 6.4rem; color: var(--clr-text-sub); font-weight: 600; } .post-prev-next__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-prev-next__date { flex: 0 0 auto; margin-left: auto; color: var(--clr-text-aux); } @media (max-width: 544px) { .post-prev-next__date { display: none; } } /* =================================================== Search results page (/search) View: resources/views/pages/search/index.php Rule #17 — typography hierarchy via no-* utility classes only. This file = layout / position / background / border only. =================================================== */ .search-page { background: #fff; } .search-results { /* 상단 여백: page-header 와 검색바 사이 숨통 (토큰만 — Rule #17-B). 하단 기존 유지. */ padding-block: var(--section-xs) clamp(6.4rem, 3.6245954693vw + 5.040776699rem, 12rem); /* 검색 바 레이아웃은 sec-search-bar 섹션 SCSS 로 위임 (Rule #19) */ } .search-results .sec-search-bar { margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .search-results { /* ── Tabs ── */ } .search-results__tabs { margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); } .search-results__tab-count { margin-left: 0.4rem; color: var(--clr-gray-400); } .search-results__count { color: var(--clr-gray-600); margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); } .search-results__count strong { color: var(--clr-primary-900); } .search-results { /* ── Group (All tab) ── */ } .search-results__group { margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem); background: #fff; border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); overflow: hidden; } .search-results__group:last-child { margin-bottom: 0; } .search-results__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem); background: var(--clr-gray-50); border-bottom: 1px solid var(--clr-gray-200); } @media (max-width: 544px) { .search-results__group-head { flex-direction: column; align-items: flex-start; } } .search-results__see-all { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--clr-primary-900); text-decoration: none; white-space: nowrap; transition: color var(--dur-base) var(--ease-out-quart); } .search-results__see-all i { transition: transform var(--dur-base) var(--ease-out-quart); } .search-results__see-all:hover { color: var(--clr-primary-400); } .search-results__see-all:hover i { transform: translateX(4px); } .search-results { /* ── List ── */ } .search-results__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .search-results { /* 빈 상태 / 플레이스홀더는 `empty-state` 공용 컴포넌트로 위임 (Rule #19) */ /* ── Pagination ── */ } .search-results__pagination { display: flex; justify-content: center; gap: 0.4rem; margin-top: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 4.8rem); } .search-results__page { min-width: 4rem; height: 4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--clr-gray-200); color: var(--clr-gray-700); text-decoration: none; transition: border-color var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart), background var(--dur-base) var(--ease-out-quart); } .search-results__page:hover { border-color: var(--clr-primary-900); color: var(--clr-primary-900); } .search-results__page.is-active { background: var(--clr-primary-900); border-color: var(--clr-primary-900); color: #fff; } .search-results { /* ── 정렬 사이드바: 모바일(lg↓)에서 세로 블록 대신 가로 스크롤 스트립 ── 레이아웃이 lg 에서 스택되면(sidebar 가 결과 위 풀폭) 세로 옵션이 화면을 크게 차지함 → 가로 한 줄로 압축. layout/overflow 만 (Rule #17 준수). */ } @media (max-width: 1024px) { .search-results__sidebar .ui-filter-sidebar__group { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--spacing-sm); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: var(--spacing-xs); } } @media (max-width: 1024px) { .search-results__sidebar .ui-filter-sidebar__group::-webkit-scrollbar { display: none; } } @media (max-width: 1024px) { .search-results__sidebar .ui-filter-sidebar__group-label { flex-shrink: 0; margin-bottom: 0; } } @media (max-width: 1024px) { .search-results__sidebar .ui-filter-sidebar__option { flex-shrink: 0; white-space: nowrap; padding: var(--spacing-xs) var(--spacing-md); border-left: 0; border-radius: var(--radius-round); border: 1px solid var(--clr-gray-200); } } @media (max-width: 1024px) { .search-results__sidebar .ui-filter-sidebar__option.is-active { border-color: var(--clr-primary-900); } } /* =================================================== Guide — /guide/components 쇼케이스 페이지 chrome. 원칙 (CLAUDE.md 절대규칙 #17 준수): - 이 파일은 페이지 레이아웃·격자·sticky·data-display 만 담당. - 타이포 위계(font-size/weight/family/lh/ls)는 SCSS에서 지정하지 않는다. 마크업에서 no-display-* / no-heading-* / no-body-* 유틸로만 부여. - 컴포넌트(ui-*)·유틸(no-*)을 그대로 인용. 새 BEM 컴포넌트 정의 금지. - 모든 spacing 은 var(--spacing-*) / var(--section-*) 토큰만 사용. =================================================== */ .guide { /* 페이지 컨테이너 — 좌우 여백 + 본문 최대폭. */ padding-bottom: var(--section-xl); } .guide__intro { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); color: var(--clr-text-secondary); } /* === Sticky tab bar — ui-tabs 컴포넌트를 그대로 감싼다. === */ .guide-tabnav { position: sticky; top: 0; z-index: 10; background: var(--clr-base-white); border-bottom: 1px solid var(--clr-gray-200); padding-top: var(--spacing-sm); padding-bottom: 0; margin-bottom: var(--spacing-2xl); /* ui-tabs 가 가진 border-bottom 을 sticky 바깥에서 처리하므로 끈다. */ } .guide-tabnav .ui-tabs { border-bottom: 0; } /* === Panel / section === */ .guide-panel[hidden] { display: none; } .guide-panel + .guide-panel { margin-top: 0; } .guide-section { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); border-top: 1px solid var(--clr-gray-200); } .guide-section:first-child { border-top: 0; padding-top: 0; } .guide-section__head { margin-bottom: var(--spacing-xl); } .guide-section__eyebrow { display: inline-block; padding: var(--spacing-xxs) var(--spacing-sm); border-radius: var(--radius-sm); background: var(--clr-primary-50); color: var(--clr-primary-900); text-transform: uppercase; margin-bottom: var(--spacing-sm); } .guide-section__lead { max-width: 72ch; color: var(--clr-text-secondary); margin-top: var(--spacing-sm); } .guide-section__body + .guide-section__body { margin-top: var(--spacing-2xl); } /* 데모 블록 — variants 를 가로로 늘어놓는 라이브 영역 */ .guide-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-xl); background: var(--clr-bg-section); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); } .guide-demo--dark { background: var(--clr-gray-900); border-color: var(--clr-gray-900); } .guide-demo--center { justify-content: center; } .guide-demo--stack { flex-direction: column; align-items: stretch; } .guide-demo--plain { background: transparent; border: 0; padding: 0; } .guide-demo__label { width: 100%; color: var(--clr-text-secondary); margin-bottom: var(--spacing-xs); } .guide-demo--dark .guide-demo__label { color: rgba(255, 255, 255, 0.6); } .guide-demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr)); gap: var(--spacing-lg); } /* === Code snippet block === font-family / font-size / line-height 은 HTML 
     의 UA 모노스페이스 기본을
   그대로 사용하고, 위계는 
     처럼 유틸로 부여한다.  */
.guide-code {
  margin-top: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--clr-gray-900);
  color: var(--clr-gray-100);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.guide-code code {
  color: inherit;
  white-space: pre;
}

/* === Color swatches === */
.guide-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--spacing-lg);
}

.guide-swatch {
  border: 1px solid var(--clr-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--clr-base-white);
}
.guide-swatch__chip {
  height: 9.6rem;
  background-color: var(--swatch-color, var(--clr-gray-200));
}
.guide-swatch__meta {
  padding: var(--spacing-md);
}
.guide-swatch__token {
  display: block;
  color: var(--clr-text-primary);
  margin-bottom: var(--spacing-xs);
  word-break: break-all;
}
.guide-swatch__hex {
  color: var(--clr-text-secondary);
}
.guide-swatch__role {
  margin-top: var(--spacing-xs);
  color: var(--clr-text-tertiary);
}

/* === Typography hierarchy rows === */
.guide-type {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.guide-type-row {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: var(--spacing-lg);
  align-items: baseline;
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px dashed var(--clr-gray-200);
}
@media (max-width: 768px) {
  .guide-type-row {
    grid-template-columns: 1fr;
  }
}
.guide-type-row__meta {
  color: var(--clr-text-secondary);
}
.guide-type-row__meta code {
  display: block;
  color: var(--clr-primary-900);
  word-break: break-all;
}
.guide-type-row__sample {
  color: var(--clr-text-primary);
}

/* === Spacing visualization === */
.guide-spacing-list {
  display: grid;
  gap: var(--spacing-md);
}

.guide-spacing-row {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--spacing-md);
  align-items: center;
}
@media (max-width: 768px) {
  .guide-spacing-row {
    grid-template-columns: 1fr;
  }
}
.guide-spacing-row__meta {
  color: var(--clr-text-secondary);
}
.guide-spacing-row__meta code {
  display: inline-block;
  color: var(--clr-primary-900);
}
.guide-spacing-row__bar {
  width: var(--guide-bar-width, var(--spacing-md));
  height: 1.6rem;
  background: var(--clr-primary-900);
  border-radius: var(--radius-xs);
}

.guide-section-spacing {
  display: grid;
  gap: var(--spacing-md);
}
.guide-section-spacing__row {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--spacing-md);
  align-items: stretch;
}
@media (max-width: 768px) {
  .guide-section-spacing__row {
    grid-template-columns: 1fr;
  }
}
.guide-section-spacing__meta {
  color: var(--clr-text-secondary);
}
.guide-section-spacing__meta code {
  color: var(--clr-primary-900);
}
.guide-section-spacing__demo {
  background: repeating-linear-gradient(45deg, var(--clr-primary-50), var(--clr-primary-50) 8px, var(--clr-base-white) 8px, var(--clr-base-white) 16px);
  border: 1px solid var(--clr-gray-200);
  border-radius: var(--radius-sm);
  position: relative;
}
.guide-section-spacing__demo-inner {
  background: var(--clr-base-white);
  border-left: 2px solid var(--clr-primary-900);
  border-right: 2px solid var(--clr-primary-900);
  margin: 0 var(--spacing-lg);
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  color: var(--clr-text-secondary);
  text-align: center;
}

/* === Border-radius preview === */
.guide-radius-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--spacing-lg);
}

.guide-radius {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}
.guide-radius__box {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--clr-primary-50);
  border: 1px solid var(--clr-primary-500);
}
.guide-radius__label {
  color: var(--clr-text-secondary);
}

/* === Container width preview === */
.guide-container-list {
  display: grid;
  gap: var(--spacing-sm);
}

.guide-container-bar {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--spacing-md);
  align-items: center;
}
.guide-container-bar__meta {
  color: var(--clr-text-secondary);
}
.guide-container-bar__rule {
  height: 0.4rem;
  background: var(--clr-primary-900);
  border-radius: var(--radius-round);
  width: var(--guide-container-width, 100%);
  max-width: 100%;
}

/* === Layout snippet card (header/footer 등) === */
.guide-snippet {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background: var(--clr-bg-section);
  border: 1px solid var(--clr-gray-200);
  border-radius: var(--radius-md);
}
.guide-snippet__note {
  color: var(--clr-text-secondary);
}

/* === Form layout demo === */
.guide-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  max-width: 64rem;
}
@media (max-width: 544px) {
  .guide-form-grid {
    grid-template-columns: 1fr;
  }
}
.guide-form-grid--inline {
  grid-template-columns: 1fr auto;
  align-items: end;
}
.guide-form-grid--stack {
  grid-template-columns: 1fr;
}

.guide-field {
  display: grid;
  gap: var(--spacing-xs);
}
.guide-field__label {
  color: var(--clr-text-primary);
}
.guide-field__input {
  width: 100%;
  height: 4.4rem;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--clr-gray-300);
  border-radius: var(--radius-sm);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.guide-field__input:focus {
  outline: none;
  border-color: var(--clr-primary-900);
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.16);
}
.guide-field__input--textarea {
  height: auto;
  min-height: 10rem;
  padding: var(--spacing-md);
  resize: vertical;
}
.guide-field__input.is-error {
  border-color: var(--clr-status-error);
}
.guide-field__input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
}
.guide-field__input:disabled {
  background: var(--clr-gray-100);
  color: var(--clr-text-tertiary);
  cursor: not-allowed;
}
.guide-field__helper {
  color: var(--clr-text-secondary);
}
.guide-field__error {
  color: var(--clr-status-error);
}

/* === Alert (Forms/Components 공용) — 임시 inline alert, 추후 ui-alert 도입 시 교체 === */
.guide-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 4px solid var(--clr-gray-400);
  background: var(--clr-bg-section);
  color: var(--clr-text-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.guide-alert + .guide-alert {
  margin-top: var(--spacing-sm);
}
.guide-alert--success {
  border-left-color: var(--clr-status-success);
  background: rgba(22, 163, 74, 0.06);
}
.guide-alert--warning {
  border-left-color: var(--clr-status-warning);
  background: rgba(217, 119, 6, 0.06);
}
.guide-alert--error {
  border-left-color: var(--clr-status-error);
  background: rgba(220, 38, 38, 0.06);
}
.guide-alert--info {
  border-left-color: var(--clr-status-info);
  background: rgba(0, 168, 204, 0.06);
}

/* === Chip (simple, until ui-chip 컴포넌트 정의) === */
.guide-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xxs) var(--spacing-md);
  background: var(--clr-gray-100);
  color: var(--clr-text-secondary);
  border-radius: var(--radius-round);
}
.guide-chip--primary {
  background: var(--clr-primary-50);
  color: var(--clr-primary-900);
}
.guide-chip__close {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
}
.guide-chip__close:hover {
  opacity: 1;
}

/* === Mock card (for Layout 탭 — 헤더·푸터 등 라이브 임베드 없이 frame 만 표시) === */
.guide-mockup {
  background: var(--clr-base-white);
  border: 1px dashed var(--clr-gray-300);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  color: var(--clr-text-secondary);
  text-align: center;
}
.guide-mockup__pin {
  display: inline-block;
  padding: var(--spacing-xxs) var(--spacing-md);
  background: var(--clr-primary-900);
  color: var(--clr-base-white);
  border-radius: var(--radius-round);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
}

/* ===================================================
   /guide/sections 전용 보조 클래스
   - 섹션 partial 의 실제 디자인을 풀폭으로 보여주는 라이브 프레임.
   - .guide-demo 와 달리 padding·background 를 두지 않는다 (섹션 자체가 책임).
   =================================================== */
.guide-section-item {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
  border-top: 1px solid var(--clr-gray-200);
}
.guide-section-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.guide-section-item__meta {
  margin-bottom: var(--spacing-xl);
}
.guide-section-item__meta > code {
  display: inline-block;
  padding: var(--spacing-xxs) var(--spacing-sm);
  background: var(--clr-primary-50);
  color: var(--clr-primary-900);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.guide-section-item__desc {
  max-width: 72ch;
  color: var(--clr-text-secondary);
  margin-top: var(--spacing-xs);
}

.guide-section-item__frame {
  position: relative;
  border: 1px solid var(--clr-gray-200);
  border-radius: var(--radius-md);
  background: var(--clr-base-white);
  overflow: hidden;
  /* 섹션 안에서 .no-container-* 가 풀폭이 아닌 데모 폭에 맞춰지도록 */
}
.guide-section-item__frame > section {
  width: 100%;
}
.guide-section-item__frame--bleed {
  /* 본문 컨테이너 .no-container-xl 의 좌우 패딩을 무시하고 풀-블리드로 노출 */
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.guide-section-item__frame--dark {
  background: var(--clr-gray-900);
}

:root {
  --e-bg: var(--clr-base-white);
  --e-fg: var(--clr-text-base);
  --e-brand: var(--clr-primary-900);
  --e-muted: var(--clr-text-sub);
  --e-line: var(--clr-ui-border);
  --e-line-light: var(--clr-gray-100);
  --e-accent: var(--clr-status-error);
  --e-accent-bg: var(--clr-primary-50);
  --e-code-bg: #1e1e1e;
  --e-code-fg: #d4d4d4;
}

.e-body {
  margin: 0;
  background: var(--e-bg);
  color: var(--e-fg);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

.e-404__icon {
  margin: 0 auto 28px;
  color: var(--e-brand);
}
.e-404__icon svg {
  width: 64px;
  height: 64px;
  stroke-width: 1.5;
}

.e-404__num {
  font-size: clamp(48px, 10vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 16px;
  color: var(--e-brand);
}

.e-404__title {
  font-size: clamp(15px, 2vw, 16px);
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--e-fg);
}

.e-404__desc {
  font-size: 13px;
  color: var(--e-muted);
  margin: 0 0 32px;
  line-height: 1.6;
}

.e-404__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.e-btn {
  appearance: none;
  border: 1px solid var(--e-line);
  background: transparent;
  color: var(--e-fg);
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.e-btn:hover {
  background: var(--e-line-light);
  border-color: var(--e-line);
}
.e-btn--primary {
  background: var(--e-brand);
  color: var(--e-bg);
  border-color: var(--e-brand);
}
.e-btn--primary:hover {
  opacity: 0.9;
}

.e-error {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.e-error__container {
  width: min(720px, 100%);
  text-align: left;
}

.e-error__header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.e-error__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--e-fg);
  background: var(--e-line-light);
  border: 1px solid var(--e-line);
}

.e-error__exception {
  font-size: 12px;
  color: var(--e-muted);
  font-family: 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__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;
}

.no-about-type1 {
  position: relative;
}
.no-about-type1 .inner figure {
  min-height: 28rem;
}
.no-about-type1.reverse .inner {
  display: flex;
  flex-direction: column;
}
.no-about-type1.reverse .inner hgroup {
  order: 1;
}
.no-about-type1.reverse .inner .visual {
  order: -1;
  margin-top: 0;
  margin-bottom: var(--spacing-2xl);
}

.no-about-type2 {
  overflow: hidden;
}
.no-about-type2 .inner {
  align-items: center;
  min-height: 62rem;
}
@media (max-width: 768px) {
  .no-about-type2 .inner {
    min-height: 0;
  }
}
.no-about-type2 .inner .text-content {
  align-self: center;
}
@media (max-width: 768px) {
  .no-about-type2 .inner .text-content {
    grid-column-start: auto !important;
    order: initial !important;
  }
}
.no-about-type2 .inner .visual {
  overflow: hidden;
  min-height: 48rem;
  grid-column-start: 7;
}
@media (max-width: 768px) {
  .no-about-type2 .inner .visual {
    min-height: 32rem;
    grid-column-start: auto !important;
    order: initial !important;
  }
}
.no-about-type2.image-left .inner .text-content {
  order: 2;
}
.no-about-type2.image-left .inner .visual {
  grid-column-start: 1;
  order: 1;
}

.no-about-type3 .inner .card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(32rem, 10.355987055vw + 28.1165048544rem, 48rem);
  align-items: center;
}
.no-about-type3 .inner .card .visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.no-about-type3 .inner .card .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-about-type3 .inner .card .visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.45) 100%);
}
.no-about-type3 .inner .card .text-content {
  position: relative;
  z-index: 1;
}
.no-about-type3 .inner .card .no-btn {
  border: 1px solid var(--clr-white-alpha-50);
}
.no-about-type3 .inner .card .no-btn:hover {
  border-color: var(--clr-base-white);
}

.no-about-type4 .inner .content {
  align-items: start;
}
.no-about-type4.image-right .inner .content .visual {
  order: 2;
}
.no-about-type4.image-right .inner .content .text-content {
  order: 1;
}
.no-about-type4.content-center .inner .content {
  align-items: center;
}
.no-about-type4[data-tp-section-tone=dark] .inner .content .text-content .lead,
.no-about-type4[data-tp-section-tone=dark] .inner .content .text-content .lead-emphasis {
  color: var(--clr-base-white);
}
.no-about-type4[data-tp-section-tone=dark] .inner .content .text-content .text {
  color: var(--clr-gray-300);
}
.no-about-type4[data-tp-section-tone=dark] .inner .content .text-content .caption {
  color: var(--clr-gray-400);
}

.no-about-type5 {
  overflow: hidden;
}
.no-about-type5 .inner {
  display: flex;
  flex-direction: column;
}
.no-about-type5 .inner .title {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(-3rem, -1.9417475728vw - 2.2718446602rem, -6rem);
  will-change: transform;
}
.no-about-type5 .inner .visual {
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 60%, transparent 100%);
  mask-image: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 60%, transparent 100%);
  will-change: transform;
}
.no-about-type5 .inner .text {
  position: relative;
  z-index: 2;
}

.no-about-type6 {
  position: relative;
  overflow: hidden;
}
.no-about-type6 .inner {
  position: relative;
  min-height: 100vh;
}
@media (max-width: 768px) {
  .no-about-type6 .inner {
    min-height: 0;
  }
}
.no-about-type6 .inner .slider {
  height: 100vh;
  min-height: 64rem;
  overflow: hidden;
}
@media (max-width: 768px) {
  .no-about-type6 .inner .slider {
    height: auto;
    min-height: 0;
  }
}
.no-about-type6 .inner .slider .swiper-wrapper .slide {
  display: flex;
  height: 100%;
  background-color: var(--clr-base-white);
}
@media (max-width: 768px) {
  .no-about-type6 .inner .slider .swiper-wrapper .slide {
    display: block;
    height: auto;
  }
}
.no-about-type6 .inner .slider .swiper-wrapper .slide .text-panel {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(5.6rem, 4.142394822vw + 4.0466019417rem, 12rem);
}
@media (max-width: 768px) {
  .no-about-type6 .inner .slider .swiper-wrapper .slide .text-panel {
    padding: var(--spacing-3xl) var(--spacing-xl);
  }
}
.no-about-type6 .inner .slider .swiper-wrapper .slide .text-panel .text-content .indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.no-about-type6 .inner .slider .swiper-wrapper .slide .text-panel .text-content .indicator .bar {
  position: relative;
  display: block;
  width: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
  height: 0.2rem;
  overflow: hidden;
  background-color: var(--clr-gray-200);
}
.no-about-type6 .inner .slider .swiper-wrapper .slide .text-panel .text-content .indicator .bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 33.333%;
  background-color: var(--clr-primary);
  transition: width 0.3s ease;
}
.no-about-type6 .inner .slider .swiper-wrapper .slide .text-panel .text-content .indicator .dots {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.no-about-type6 .inner .slider .swiper-wrapper .slide .text-panel .text-content .indicator .dots .dot {
  padding: 0;
  border: 0;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  appearance: none;
  background-color: var(--clr-gray-300);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.no-about-type6 .inner .slider .swiper-wrapper .slide .text-panel .text-content .indicator .dots .dot.is-active {
  background-color: var(--clr-primary);
}
.no-about-type6 .inner .slider .swiper-wrapper .slide .visual {
  flex: 0 0 50%;
  height: 100%;
  border-radius: 0;
  background-color: var(--clr-black-bg-100);
}
@media (max-width: 768px) {
  .no-about-type6 .inner .slider .swiper-wrapper .slide .visual {
    height: auto;
  }
}
.no-about-type6 .inner .slider .swiper-wrapper .slide .visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.48);
}
.no-about-type6.image-left .inner .slider .swiper-wrapper .slide {
  flex-direction: row-reverse;
}
@media (max-width: 768px) {
  .no-about-type6.image-left .inner .slider .swiper-wrapper .slide {
    display: flex;
    flex-direction: column-reverse;
  }
}
.no-about-type6.panel-dark .inner .slider .swiper-wrapper .slide .text-panel {
  background-color: var(--clr-black-bg-100);
}
.no-about-type6.panel-dark .inner .slider .swiper-wrapper .slide .text-panel .text-content .slide-title {
  color: var(--clr-base-white);
}
.no-about-type6.panel-dark .inner .slider .swiper-wrapper .slide .text-panel .text-content .slide-text {
  color: var(--clr-gray-300);
}
.no-about-type6.panel-dark .inner .slider .swiper-wrapper .slide .text-panel .text-content .indicator .bar {
  background-color: var(--clr-white-alpha-20);
}
.no-about-type6.panel-dark .inner .slider .swiper-wrapper .slide .text-panel .text-content .indicator .dots .dot {
  background-color: var(--clr-white-alpha-30);
}
.no-about-type6.panel-dark .inner .slider .swiper-wrapper .slide .text-panel .text-content .indicator .dots .dot.is-active {
  background-color: var(--clr-primary);
}
.no-about-type6.height-compact .inner {
  min-height: 80vh;
}
@media (max-width: 768px) {
  .no-about-type6.height-compact .inner {
    min-height: 0;
  }
}
.no-about-type6.height-compact .inner .slider {
  height: 80vh;
  min-height: 56rem;
}
@media (max-width: 768px) {
  .no-about-type6.height-compact .inner .slider {
    height: auto;
    min-height: 0;
  }
}
.no-about-type6.indicator-hidden .inner .slider .swiper-wrapper .slide .text-panel .text-content .indicator {
  display: none;
}
.no-template-preview .canvas > .no-about-type6, .admin-cms-live .no-about-type6 {
  aspect-ratio: 16/9;
}
.no-template-preview .canvas > .no-about-type6 .inner,
.no-template-preview .canvas > .no-about-type6 .slider, .admin-cms-live .no-about-type6 .inner,
.admin-cms-live .no-about-type6 .slider {
  height: 100%;
  min-height: 0;
}
.no-template-preview .canvas > .no-about-type6 .inner .slider .swiper-wrapper .slide, .admin-cms-live .no-about-type6 .inner .slider .swiper-wrapper .slide {
  height: 100%;
}
.no-template-preview .canvas > .no-about-type6 .inner .slider .swiper-wrapper .slide:not(:first-child), .admin-cms-live .no-about-type6 .inner .slider .swiper-wrapper .slide:not(:first-child) {
  display: none;
}
.no-template-preview .canvas > .no-about-type6 .inner .slider .swiper-wrapper .slide .text-panel, .admin-cms-live .no-about-type6 .inner .slider .swiper-wrapper .slide .text-panel {
  padding: var(--spacing-2xl);
}

.no-content-type1 {
  overflow: hidden;
}
.no-content-type1 .inner {
  display: flex;
  flex-direction: column;
}
.no-content-type1 .inner .intro {
  margin-right: auto;
  margin-left: auto;
}
.no-content-type1 .inner .intro.--tal {
  margin-left: 0;
}
.no-content-type1 .inner .intro.--tar {
  margin-right: 0;
  margin-left: auto;
}
.no-content-type1 .inner .gallery .card:hover .card-link .visual img, .no-content-type1 .inner .gallery .card:focus-within .card-link .visual img {
  transform: translate(-50%, -50%) scale(1.05);
}
.no-content-type1 .inner .gallery .card .card-link {
  color: inherit;
}
.no-content-type1 .inner .gallery .card .card-link .visual {
  overflow: hidden;
}
.no-content-type1 .inner .gallery .card .card-link .visual img {
  transform-origin: center;
  transition: transform 0.3s ease;
}

.no-content-type10 .inner {
  align-items: start;
}
.no-content-type10 .inner .text-content {
  align-self: start;
}
.no-content-type10 .inner .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}
.no-content-type10 .inner .cards:has(.card:nth-child(odd):last-child) {
  grid-template-columns: 1fr;
}
@media (max-width: 544px) {
  .no-content-type10 .inner .cards {
    grid-template-columns: 1fr;
  }
}
.no-content-type10 .inner .cards .card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--spacing-md);
}
.no-content-type10 .inner .cards .card .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  height: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
}
.no-content-type10 .inner .cards .card .card-icon svg {
  width: 100%;
  height: 100%;
}
.no-content-type10.title-center .inner .text-content {
  align-self: center;
}
@media (max-width: 1024px) {
  .no-content-type10.title-center .inner .text-content {
    align-self: start;
  }
}
.no-content-type10[data-tp-section-tone=dark] .inner .cards .card {
  background-color: var(--clr-black-bg-100);
}
.no-content-type10[data-tp-section-tone=dark] .inner .cards .card .card-text {
  color: var(--clr-base-white);
}

.no-content-type11 .inner .steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.no-content-type11 .inner .steps .step {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xl);
}
@media (max-width: 768px) {
  .no-content-type11 .inner .steps .step {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl);
  }
}
.no-content-type11 .inner .steps .step .step-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.no-content-type11 .inner .steps .step .step-badge[hidden] {
  display: none;
}
.no-content-type11 .inner .steps .step .step-content {
  flex: 1 1 auto;
}
.no-content-type11.item-start .inner .steps .step {
  align-items: flex-start;
}
.no-content-type11[data-tp-section-tone=dark] .inner .steps .step {
  background-color: var(--clr-black-bg-100);
}
.no-content-type11[data-tp-section-tone=dark] .inner .steps .step .step-title {
  color: var(--clr-base-white);
}
.no-content-type11[data-tp-section-tone=dark] .inner .steps .step .step-text {
  color: var(--clr-gray-300);
}

.no-content-type12 .inner .steps {
  position: relative;
  display: flex;
  gap: var(--spacing-xl);
}
.no-content-type12 .inner .steps::before {
  content: "";
  position: absolute;
  top: calc(var(--content-type12-icon) / 2);
  left: calc(var(--content-type12-icon) / 2);
  right: calc(var(--content-type12-icon) / 2);
  height: 1px;
  background-color: var(--clr-gray-100);
  z-index: 0;
}
@media (max-width: 768px) {
  .no-content-type12 .inner .steps {
    flex-direction: column;
    gap: var(--spacing-2xl);
  }
  .no-content-type12 .inner .steps::before {
    top: calc(var(--content-type12-icon) / 2);
    bottom: calc(var(--content-type12-icon) / 2);
    left: calc(var(--content-type12-icon) / 2);
    right: auto;
    width: 1px;
    height: auto;
  }
}
.no-content-type12 .inner .steps {
  --content-type12-icon: clamp(6.4rem, 1.5533980583vw + 5.8174757282rem, 8.8rem);
}
.no-content-type12 .inner .steps .step {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
}
@media (max-width: 768px) {
  .no-content-type12 .inner .steps .step {
    display: grid;
    grid-template-columns: var(--content-type12-icon) 1fr;
    align-items: start;
    column-gap: var(--spacing-lg);
    flex: 0 0 auto;
    text-align: left;
  }
}
.no-content-type12 .inner .steps .step .step-icon {
  display: inline-flex;
  width: var(--content-type12-icon);
  height: var(--content-type12-icon);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-gray-100);
}
.no-content-type12 .inner .steps .step .step-icon svg {
  width: 45%;
  height: 45%;
}
@media (max-width: 768px) {
  .no-content-type12 .inner .steps .step .step-title {
    margin-top: 0;
    grid-column: 2;
  }
}
@media (max-width: 768px) {
  .no-content-type12 .inner .steps .step .step-text {
    grid-column: 2;
  }
}
.no-content-type12.line-off .inner .steps::before {
  display: none;
}
.no-content-type12[data-tp-section-tone=dark] .inner .steps::before {
  background-color: var(--clr-white-alpha-20);
}
.no-content-type12[data-tp-section-tone=dark] .inner .steps .step .step-icon {
  border-color: var(--clr-white-alpha-20);
  background-color: var(--clr-black-bg-100);
}
.no-content-type12[data-tp-section-tone=dark] .inner .steps .step .step-title {
  color: var(--clr-base-white);
}
.no-content-type12[data-tp-section-tone=dark] .inner .steps .step .step-text {
  color: var(--clr-gray-300);
}

.no-content-type13 {
  overflow: hidden;
}
.no-content-type13 .inner .rows {
  display: flex;
  flex-direction: column;
  gap: clamp(8rem, 5.1779935275vw + 6.0582524272rem, 16rem);
}
.no-content-type13 .inner .row {
  align-items: start;
}
.no-content-type13 .inner .row .text-content {
  align-self: start;
}
.no-content-type13 .inner .row .visual {
  grid-column-start: 7;
  width: 100%;
  align-self: start;
}
@media (max-width: 1024px) {
  .no-content-type13 .inner .row .visual {
    grid-column-start: auto !important;
  }
}
.no-content-type13 .inner .row:nth-child(even) .text-content {
  grid-column-start: 7;
}
@media (max-width: 1024px) {
  .no-content-type13 .inner .row:nth-child(even) .text-content {
    grid-column-start: auto !important;
    order: 2;
  }
}
.no-content-type13 .inner .row:nth-child(even) .visual {
  grid-column-start: 1;
  grid-row-start: 1;
}
@media (max-width: 1024px) {
  .no-content-type13 .inner .row:nth-child(even) .visual {
    grid-column-start: auto !important;
    grid-row-start: auto !important;
    order: 1;
  }
}
.no-content-type13.image-all-right .inner .row .text-content,
.no-content-type13.image-all-right .inner .row:nth-child(even) .text-content {
  grid-column-start: auto;
}
@media (max-width: 1024px) {
  .no-content-type13.image-all-right .inner .row .text-content,
  .no-content-type13.image-all-right .inner .row:nth-child(even) .text-content {
    grid-column-start: auto !important;
    order: initial;
  }
}
.no-content-type13.image-all-right .inner .row .visual,
.no-content-type13.image-all-right .inner .row:nth-child(even) .visual {
  grid-column-start: 7;
  grid-row-start: auto;
}
@media (max-width: 1024px) {
  .no-content-type13.image-all-right .inner .row .visual,
  .no-content-type13.image-all-right .inner .row:nth-child(even) .visual {
    grid-column-start: auto !important;
    grid-row-start: auto !important;
    order: initial;
  }
}
.no-content-type13.image-all-left .inner .row .text-content,
.no-content-type13.image-all-left .inner .row:nth-child(even) .text-content {
  grid-column-start: 7;
}
@media (max-width: 1024px) {
  .no-content-type13.image-all-left .inner .row .text-content,
  .no-content-type13.image-all-left .inner .row:nth-child(even) .text-content {
    grid-column-start: auto !important;
    order: 2;
  }
}
.no-content-type13.image-all-left .inner .row .visual,
.no-content-type13.image-all-left .inner .row:nth-child(even) .visual {
  grid-column-start: 1;
  grid-row-start: 1;
}
@media (max-width: 1024px) {
  .no-content-type13.image-all-left .inner .row .visual,
  .no-content-type13.image-all-left .inner .row:nth-child(even) .visual {
    grid-column-start: auto !important;
    grid-row-start: auto !important;
    order: 1;
  }
}
.no-content-type13.title-center .inner .row {
  align-items: center;
}
.no-content-type13.title-center .inner .row .text-content {
  align-self: center;
}
@media (max-width: 1024px) {
  .no-content-type13.title-center .inner .row .text-content {
    align-self: start;
  }
}
.no-content-type13.title-center .inner .row .visual {
  align-self: center;
}
@media (max-width: 1024px) {
  .no-content-type13.title-center .inner .row .visual {
    align-self: start;
  }
}
.no-content-type13[data-tp-section-tone=dark] .inner .row .text-content .title,
.no-content-type13[data-tp-section-tone=dark] .inner .row .text-content .text {
  color: var(--clr-base-white);
}

.no-content-type14 .inner .cards .card .card-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.no-content-type14 .inner .cards .card .card-number {
  display: inline-flex;
  width: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem);
  height: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}
.no-content-type14 .inner .cards .card .card-number[hidden] {
  display: none;
}
.no-content-type14 .inner .cards .card .card-list .card-list-item {
  position: relative;
  padding-left: 0.9em;
}
.no-content-type14 .inner .cards .card .card-list .card-list-item::before {
  content: "·";
  position: absolute;
  top: 0;
  left: 0.1em;
  line-height: inherit;
}
.no-content-type14[data-tp-section-tone=dark] .inner .cards .card {
  background-color: var(--clr-black-bg-100);
}
.no-content-type14[data-tp-section-tone=dark] .inner .cards .card .card-title {
  color: var(--clr-base-white);
}
.no-content-type14[data-tp-section-tone=dark] .inner .cards .card .card-list .card-list-item {
  color: var(--clr-gray-300);
}

.no-content-type15 .inner .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-3xl) var(--spacing-2xl);
}
.no-content-type15 .inner .cards .card {
  flex: 0 0 calc((100% - var(--spacing-2xl) * 3) / 4);
  max-width: 100%;
}
@media (max-width: 768px) {
  .no-content-type15 .inner .cards .card {
    flex: 0 0 calc((100% - var(--spacing-2xl)) / 2);
  }
}
@media (max-width: 544px) {
  .no-content-type15 .inner .cards .card {
    flex: 0 0 100%;
  }
}
.no-content-type15 .inner .cards .card .visual {
  width: clamp(14rem, 3.8834951456vw + 12.5436893204rem, 20rem);
  margin-right: auto;
  margin-left: auto;
}
.no-content-type15[data-tp-section-tone=dark] .inner .cards .card .card-title {
  color: var(--clr-base-white);
}
.no-content-type15[data-tp-section-tone=dark] .inner .cards .card .card-text {
  color: var(--clr-gray-300);
}

.no-content-type16 .inner .intro {
  max-width: 920px;
}
.no-content-type16 .inner .cards .card {
  border: 1px solid var(--clr-gray-100);
}
.no-content-type16 .inner .cards .card .card-head {
  display: flex;
  gap: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
  align-items: flex-start;
}
.no-content-type16 .inner .cards .card .card-number {
  display: inline-flex;
  width: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
  height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}
.no-content-type16 .inner .cards .card .card-content {
  flex: 1 1 auto;
}
.no-content-type16 .inner .cards .card .tag-list {
  display: none;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}
.no-content-type16 .inner .cards .card .tag-list:has(.tag:not(:empty)) {
  display: flex;
}
.no-content-type16 .inner .cards .card .tag {
  border: 1px solid var(--clr-primary-50);
  background-color: var(--clr-primary-50);
}
.no-content-type16 .inner .cards .card .tag:empty {
  display: none;
}
.no-content-type16.card-filled .inner .cards .card {
  background-color: var(--clr-gray-50);
  border-color: transparent;
}
.no-content-type16.badge-gray .inner .cards .card .card-number {
  background-color: var(--clr-gray-900);
}
.no-content-type16.compact .inner .cards .card {
  padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
}
.no-content-type16[data-tp-section-tone=dark] .inner .cards .card {
  background-color: var(--clr-black-bg-100);
  border-color: var(--clr-white-alpha-20);
}
.no-content-type16[data-tp-section-tone=dark] .inner .cards .card .card-title {
  color: var(--clr-base-white);
}
.no-content-type16[data-tp-section-tone=dark] .inner .cards .card .card-text {
  color: var(--clr-gray-300);
}
.no-content-type16[data-tp-section-tone=dark] .inner .cards .card .tag {
  color: var(--clr-base-white);
  border-color: var(--clr-white-alpha-30);
  background-color: var(--clr-white-alpha-10);
}
@media (max-width: 768px) {
  .no-content-type16 .inner .cards .card .card-head {
    gap: var(--spacing-lg);
  }
}
@media (max-width: 544px) {
  .no-content-type16 .inner .cards .card .card-head {
    flex-direction: column;
  }
}

.no-content-type2 {
  --content-type2-stagger: clamp(10rem, 3.8834951456vw + 8.5436893204rem, 16rem);
  --content-type2-visual-size: clamp(10rem, 1.5533980583vw + 9.4174757282rem, 12.4rem);
  --content-type2-visual-size-sm: clamp(8.8rem, 0.7766990291vw + 8.5087378641rem, 10rem);
  overflow: visible;
}
.no-content-type2 .inner {
  align-items: start;
}
.no-content-type2 .inner .text-content {
  position: sticky;
  top: var(--spacing-4xl);
  align-self: start;
}
@media (max-width: 1024px) {
  .no-content-type2 .inner .text-content {
    position: static;
    grid-column-start: auto !important;
    order: initial !important;
  }
}
.no-content-type2 .inner .cards {
  align-items: start;
  grid-column-start: 7;
  width: 100%;
  padding-bottom: var(--content-type2-stagger);
}
@media (max-width: 1024px) {
  .no-content-type2 .inner .cards {
    grid-column-start: auto !important;
    order: initial !important;
  }
}
@media (max-width: 544px) {
  .no-content-type2 .inner .cards {
    padding-bottom: 0;
  }
}
.no-content-type2 .inner .cards.--tal .card .card-visual {
  margin-right: auto;
  margin-left: 0;
}
.no-content-type2 .inner .cards.--tac .card .card-visual {
  margin-right: auto;
  margin-left: auto;
}
.no-content-type2 .inner .cards.--tar .card .card-visual {
  margin-right: 0;
  margin-left: auto;
}
.no-content-type2 .inner .cards .card {
  display: flex;
  flex-direction: column;
}
.no-content-type2 .inner .cards .card:nth-child(even) {
  transform: translateY(var(--content-type2-stagger));
}
@media (max-width: 544px) {
  .no-content-type2 .inner .cards .card:nth-child(even) {
    transform: none;
  }
}
.no-content-type2 .inner .cards .card .card-visual {
  width: var(--content-type2-visual-size);
  margin-right: 0;
  margin-left: auto;
  overflow: hidden;
  border-radius: 0;
}
@media (max-width: 544px) {
  .no-content-type2 .inner .cards .card .card-visual {
    width: var(--content-type2-visual-size-sm);
  }
}
.no-content-type2 .inner .cards .card .card-visual img {
  transform-origin: center;
  transition: transform 0.3s ease;
}
.no-content-type2.image-left .inner .text-content {
  order: 2;
}
.no-content-type2.image-left .inner .cards {
  grid-column-start: 1;
  order: 1;
}
.no-content-type2[data-tp-section-tone=dark] .inner .cards .card {
  background-color: var(--clr-black-bg-100);
}
.no-content-type2[data-tp-section-tone=dark] .inner .cards .card .card-title,
.no-content-type2[data-tp-section-tone=dark] .inner .cards .card .card-text {
  color: var(--clr-base-white);
}

.no-content-type3 {
  overflow: hidden;
}
.no-content-type3 .inner {
  display: flex;
  flex-direction: column;
}
.no-content-type3 .inner .intro.--tac {
  margin-right: auto;
  margin-left: auto;
}
.no-content-type3 .inner .intro.--tar {
  margin-left: auto;
}
.no-content-type3 .inner .cards .card {
  display: flex;
  flex-direction: column;
}
.no-content-type3 .inner .cards .card .stat-number {
  line-height: 1;
}
.no-content-type3.card-boxed .inner .cards .card {
  padding: var(--spacing-2xl);
  background-color: var(--clr-gray-50);
  border-radius: var(--radius-md);
}
.no-content-type3[data-tp-section-tone=dark] .inner .cards .card .card-title,
.no-content-type3[data-tp-section-tone=dark] .inner .cards .card .card-text {
  color: var(--clr-base-white);
}
.no-content-type3[data-tp-section-tone=dark].card-boxed .inner .cards .card {
  background-color: var(--clr-black-bg-200);
}

.no-content-type4 {
  overflow: hidden;
}
.no-content-type4 .inner {
  align-items: start;
}
.no-content-type4 .inner .text-content {
  align-self: start;
}
.no-content-type4 .inner .cards .card:hover .card-link .visual img, .no-content-type4 .inner .cards .card:focus-within .card-link .visual img {
  transform: translate(-50%, -50%) scale(1.05);
}
.no-content-type4 .inner .cards .card .card-link {
  position: relative;
  display: block;
  color: inherit;
}
.no-content-type4 .inner .cards .card .card-link .visual {
  position: relative;
  overflow: hidden;
}
.no-content-type4 .inner .cards .card .card-link .visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.no-content-type4 .inner .cards .card .card-link .visual img {
  transform-origin: center;
  transition: transform 0.3s ease;
}
.no-content-type4 .inner .cards .card .card-link .card-title {
  position: absolute;
  left: var(--spacing-xl);
  right: var(--spacing-xl);
  bottom: var(--spacing-lg);
  z-index: 1;
  margin-top: 0;
  color: var(--clr-base-white);
}
.no-content-type4.image-left .inner .text-content {
  order: 2;
}
.no-content-type4.image-left .inner .cards {
  order: 1;
}
.no-content-type4.title-center .inner .text-content {
  align-self: center;
}
@media (max-width: 1024px) {
  .no-content-type4.title-center .inner .text-content {
    align-self: start;
  }
}
.no-content-type4[data-tp-section-tone=dark] .inner .cards .card > .card-title {
  color: var(--clr-base-white);
}
.no-content-type4[data-tp-section-tone=dark] .inner .cards .card .card-link .visual::after {
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
}

.no-content-type5 {
  overflow: hidden;
}
.no-content-type5 .inner {
  align-items: center;
}
.no-content-type5 .inner .text-content {
  align-self: center;
}
.no-content-type5 .inner .text-content.--tac {
  margin-right: auto;
  margin-left: auto;
}
.no-content-type5 .inner .text-content.--tac .features {
  align-items: center;
}
.no-content-type5 .inner .text-content.--tac .no-btn {
  align-self: center;
}
.no-content-type5 .inner .features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
}
.no-content-type5 .inner .features .feature {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.no-content-type5 .inner .features .feature .feature-icon {
  flex: 0 0 auto;
  width: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  height: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  color: var(--clr-primary-900);
}
.no-content-type5 .inner .no-btn {
  align-self: flex-start;
}
.no-content-type5 .inner .visual {
  grid-column-start: 7;
  width: 100%;
  align-self: center;
}
@media (max-width: 1024px) {
  .no-content-type5 .inner .visual {
    grid-column-start: auto !important;
  }
}
.no-content-type5.image-left .inner .text-content {
  grid-column-start: 7;
}
@media (max-width: 1024px) {
  .no-content-type5.image-left .inner .text-content {
    grid-column-start: auto !important;
    order: 2;
  }
}
.no-content-type5.image-left .inner .visual {
  grid-column-start: 1;
  grid-row-start: 1;
}
@media (max-width: 1024px) {
  .no-content-type5.image-left .inner .visual {
    grid-column-start: auto !important;
    grid-row-start: auto !important;
    order: 1;
  }
}

.no-content-type6 {
  overflow: hidden;
}
.no-content-type6 .inner {
  display: flex;
  flex-direction: column;
}
.no-content-type6 .inner .intro.--tac {
  margin-right: auto;
  margin-left: auto;
}
.no-content-type6 .inner .intro.--tar {
  margin-left: auto;
}
.no-content-type6 .inner .cards.--tac .card .card-icon {
  align-self: center;
}
.no-content-type6 .inner .cards.--tar .card .card-icon {
  align-self: flex-end;
}
.no-content-type6 .inner .cards .card {
  display: flex;
  flex-direction: column;
}
.no-content-type6 .inner .cards .card .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
}
.no-content-type6 .inner .cards .card .card-icon svg {
  width: 100%;
  height: 100%;
}
.no-content-type6.icon-left .inner .cards .card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--spacing-lg);
  align-items: start;
}
.no-content-type6.icon-left .inner .cards .card .card-icon {
  grid-row: 1/3;
  width: 4rem;
  height: 4rem;
  margin-top: 0;
  align-self: start;
}
.no-content-type6.icon-left .inner .cards .card .card-title {
  grid-column-start: 2;
  margin-top: 0;
}
.no-content-type6.icon-left .inner .cards .card .card-text {
  grid-column-start: 2;
}
.no-content-type6.card-boxed .inner .cards .card {
  padding: var(--spacing-2xl);
  background-color: var(--clr-gray-50);
  border-radius: var(--radius-md);
}
.no-content-type6[data-tp-section-tone=dark] .inner .cards .card .card-title,
.no-content-type6[data-tp-section-tone=dark] .inner .cards .card .card-text {
  color: var(--clr-base-white);
}
.no-content-type6[data-tp-section-tone=dark].card-boxed .inner .cards .card {
  background-color: var(--clr-black-bg-200);
}

.no-content-type7 .inner {
  align-items: start;
}
.no-content-type7 .inner .text-content {
  align-self: start;
}
.no-content-type7 .inner .cards .card {
  display: flex;
  flex-direction: column;
}
.no-content-type7 .inner .cards .card .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.4rem);
  height: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.4rem);
  align-self: flex-end;
  margin-top: var(--spacing-2xl);
}
.no-content-type7 .inner .cards .card .card-icon svg {
  width: 100%;
  height: 100%;
}
.no-content-type7.icon-top-left .inner .cards .card .card-icon {
  order: -1;
  align-self: flex-start;
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}
.no-content-type7.icon-top-right .inner .cards .card .card-icon {
  order: -1;
  align-self: flex-end;
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}
.no-content-type7.icon-bottom-left .inner .cards .card .card-icon {
  align-self: flex-start;
}
.no-content-type7.title-center .inner .text-content {
  align-self: center;
}
@media (max-width: 1024px) {
  .no-content-type7.title-center .inner .text-content {
    align-self: start;
  }
}
.no-content-type7[data-tp-section-tone=dark] .inner .cards .card {
  background-color: var(--clr-black-bg-100);
}
.no-content-type7[data-tp-section-tone=dark] .inner .cards .card .card-title,
.no-content-type7[data-tp-section-tone=dark] .inner .cards .card .card-lead {
  color: var(--clr-base-white);
}
.no-content-type7[data-tp-section-tone=dark] .inner .cards .card .card-text {
  color: var(--clr-gray-300);
}
.no-content-type7[data-tp-section-tone=dark] .inner .cards .card .card-icon {
  color: var(--clr-base-white);
}

.no-content-type8 .inner {
  align-items: start;
}
.no-content-type8 .inner .text-content {
  position: sticky;
  top: var(--spacing-4xl);
  align-self: start;
}
@media (max-width: 1024px) {
  .no-content-type8 .inner .text-content {
    position: static;
  }
}
.no-content-type8 .inner .cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.no-content-type8 .inner .cards .card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--spacing-2xl);
}
@media (max-width: 544px) {
  .no-content-type8 .inner .cards .card {
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: var(--spacing-md);
  }
}
.no-content-type8 .inner .cards .card .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.6rem, 0.7766990291vw + 3.3087378641rem, 4.8rem);
  height: clamp(3.6rem, 0.7766990291vw + 3.3087378641rem, 4.8rem);
}
.no-content-type8 .inner .cards .card .card-icon svg {
  width: 100%;
  height: 100%;
}
.no-content-type8.card-start .inner .cards .card {
  align-items: start;
}
.no-content-type8.title-static .inner .text-content {
  position: static;
  top: auto;
}
.no-content-type8.title-center .inner .text-content {
  align-self: center;
}
@media (max-width: 1024px) {
  .no-content-type8.title-center .inner .text-content {
    align-self: start;
  }
}
.no-content-type8[data-tp-section-tone=dark] .inner .cards .card {
  background-color: var(--clr-black-bg-100);
}
.no-content-type8[data-tp-section-tone=dark] .inner .cards .card .card-title {
  color: var(--clr-base-white);
}
.no-content-type8[data-tp-section-tone=dark] .inner .cards .card .card-text {
  color: var(--clr-gray-300);
}
.no-content-type8[data-tp-section-tone=dark] .inner .cards .card .card-icon {
  color: var(--clr-base-white);
}

.no-content-type9 .inner {
  align-items: start;
}
.no-content-type9 .inner .text-content {
  align-self: start;
}
.no-content-type9 .inner .cards .card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clr-gray-100);
}
.no-content-type9 .inner .cards .card .card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxs);
}
.no-content-type9.title-center .inner .text-content {
  align-self: center;
}
@media (max-width: 1024px) {
  .no-content-type9.title-center .inner .text-content {
    align-self: start;
  }
}
.no-content-type9[data-tp-section-tone=dark] .inner .cards .card {
  background-color: var(--clr-black-bg-100);
  border-color: var(--clr-black-bg-200);
}
.no-content-type9[data-tp-section-tone=dark] .inner .cards .card .card-title {
  color: var(--clr-base-white);
}
.no-content-type9[data-tp-section-tone=dark] .inner .cards .card .card-sub,
.no-content-type9[data-tp-section-tone=dark] .inner .cards .card .card-text {
  color: var(--clr-gray-300);
}

.no-faq-type1 {
  overflow: hidden;
}
.no-faq-type1 .inner {
  display: flex;
  flex-direction: column;
}
.no-faq-type1 .inner .intro.--tac {
  margin-right: auto;
  margin-left: auto;
}
.no-faq-type1 .inner .intro.--tar {
  margin-left: auto;
}
.no-faq-type1 .inner .qa-list {
  display: flex;
  flex-direction: column;
}
.no-faq-type1 .inner .qa-list .card {
  border-top: 1px solid var(--clr-gray-100);
}
.no-faq-type1 .inner .qa-list .card:last-child {
  border-bottom: 1px solid var(--clr-gray-100);
}
.no-faq-type1[data-tp-section-tone=dark] .inner .qa-list .card {
  border-top-color: var(--clr-black-bg-200);
}
.no-faq-type1[data-tp-section-tone=dark] .inner .qa-list .card:last-child {
  border-bottom-color: var(--clr-black-bg-200);
}
.no-faq-type1[data-tp-section-tone=dark] .inner .qa-list .card .card-title,
.no-faq-type1[data-tp-section-tone=dark] .inner .qa-list .card .card-text {
  color: var(--clr-base-white);
}

.no-faq-type2 {
  overflow: hidden;
}
.no-faq-type2 .inner {
  display: flex;
  flex-direction: column;
}
.no-faq-type2 .inner .intro.--tac {
  margin-right: auto;
  margin-left: auto;
}
.no-faq-type2 .inner .intro.--tar {
  margin-left: auto;
}
.no-faq-type2 .inner .qa-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.no-faq-type2 .inner .qa-list .panel {
  overflow: hidden;
  border: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.no-faq-type2 .inner .qa-list .panel .question {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-xl);
  color: inherit;
}
.no-faq-type2 .inner .qa-list .panel .question .card-title {
  flex: 1 1 auto;
}
.no-faq-type2 .inner .qa-list .panel .question .icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  height: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  align-items: center;
  justify-content: center;
  color: var(--clr-gray-900);
  transition: transform 0.3s ease;
}
.no-faq-type2 .inner .qa-list .panel .question .icon svg {
  width: 100%;
  height: 100%;
}
.no-faq-type2 .inner .qa-list .panel .answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.no-faq-type2 .inner .qa-list .panel .answer .answer-inner {
  overflow: hidden;
}
.no-faq-type2 .inner .qa-list .panel.is-open .question .icon {
  transform: rotate(180deg);
}
.no-faq-type2 .inner .qa-list .panel.is-open .answer {
  grid-template-rows: 1fr;
}
.no-faq-type2:not(.is-faq-ready) .inner .qa-list .panel:first-child .question .icon {
  transform: rotate(180deg);
}
.no-faq-type2:not(.is-faq-ready) .inner .qa-list .panel:first-child .answer {
  grid-template-rows: 1fr;
}
.no-faq-type2.panel-outline .inner .qa-list .panel {
  background-color: transparent;
  border-color: var(--clr-gray-100);
}
.no-faq-type2.panel-shadow .inner .qa-list .panel {
  box-shadow: 0 1.6rem 4.8rem rgba(0, 0, 0, 0.08);
}
.no-faq-type2.panel-compact .inner .qa-list .panel {
  padding: var(--spacing-xl);
}
.no-faq-type2[data-tp-section-tone=dark] .inner .intro .title-eyebrow,
.no-faq-type2[data-tp-section-tone=dark] .inner .intro .title,
.no-faq-type2[data-tp-section-tone=dark] .inner .intro .text {
  color: var(--clr-base-white);
}
.no-faq-type2[data-tp-section-tone=dark] .inner .qa-list .panel {
  background-color: var(--clr-black-bg-100);
  border-color: var(--clr-black-bg-200);
}
.no-faq-type2[data-tp-section-tone=dark] .inner .qa-list .panel .question .card-title,
.no-faq-type2[data-tp-section-tone=dark] .inner .qa-list .panel .question .icon {
  color: var(--clr-base-white);
}
.no-faq-type2[data-tp-section-tone=dark] .inner .qa-list .panel .answer .card-text {
  color: var(--clr-gray-300);
}

.no-faq-type3 {
  overflow: hidden;
}
.no-faq-type3 .inner .qa-list {
  display: flex;
  flex-direction: column;
}
.no-faq-type3 .inner .qa-list .panel {
  border-top: 1px solid var(--clr-gray-100);
}
.no-faq-type3 .inner .qa-list .panel:last-child {
  border-bottom: 1px solid var(--clr-gray-100);
}
.no-faq-type3 .inner .qa-list .panel .question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  color: inherit;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.no-faq-type3 .inner .qa-list .panel .question .card-title {
  flex: 1 1 auto;
}
.no-faq-type3 .inner .qa-list .panel .question .icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
  height: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
  align-items: center;
  justify-content: center;
}
.no-faq-type3 .inner .qa-list .panel .question .icon::before, .no-faq-type3 .inner .qa-list .panel .question .icon::after {
  content: "";
  position: absolute;
  width: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
  height: 0.2rem;
  background-color: currentColor;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.no-faq-type3 .inner .qa-list .panel .question .icon::after {
  transform: rotate(90deg);
}
.no-faq-type3 .inner .qa-list .panel .answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.no-faq-type3 .inner .qa-list .panel .answer .answer-inner {
  overflow: hidden;
}
.no-faq-type3 .inner .qa-list .panel.is-open .question {
  background-color: var(--clr-black-bg-50);
  color: var(--clr-base-white);
}
.no-faq-type3 .inner .qa-list .panel.is-open .question .card-title {
  color: var(--clr-base-white);
}
.no-faq-type3 .inner .qa-list .panel.is-open .question .icon::after {
  opacity: 0;
  transform: rotate(0deg);
}
.no-faq-type3 .inner .qa-list .panel.is-open .answer {
  grid-template-rows: 1fr;
}
.no-faq-type3:not(.is-faq-ready) .inner .qa-list .panel:nth-child(-n+2) .question {
  background-color: var(--clr-black-bg-50);
  color: var(--clr-base-white);
}
.no-faq-type3:not(.is-faq-ready) .inner .qa-list .panel:nth-child(-n+2) .question .card-title {
  color: var(--clr-base-white);
}
.no-faq-type3:not(.is-faq-ready) .inner .qa-list .panel:nth-child(-n+2) .question .icon::after {
  opacity: 0;
  transform: rotate(0deg);
}
.no-faq-type3:not(.is-faq-ready) .inner .qa-list .panel:nth-child(-n+2) .answer {
  grid-template-rows: 1fr;
}
.no-faq-type3.single-open {
  position: relative;
}
.no-faq-type3.compact .inner .qa-list .panel .question {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}
.no-faq-type3.compact .inner .qa-list .panel .answer .answer-inner {
  padding: var(--spacing-lg);
}
.no-faq-type3.active-primary .inner .qa-list .panel.is-open .question {
  background-color: var(--clr-primary);
}
.no-faq-type3.active-primary:not(.is-faq-ready) .inner .qa-list .panel:nth-child(-n+2) .question {
  background-color: var(--clr-primary);
}
.no-faq-type3.answer-gray .inner .qa-list .panel .answer .answer-inner {
  background-color: var(--clr-gray-50);
}
.no-faq-type3[data-tp-section-tone=dark] .inner .qa-list .panel {
  border-top-color: var(--clr-black-bg-200);
}
.no-faq-type3[data-tp-section-tone=dark] .inner .qa-list .panel:last-child {
  border-bottom-color: var(--clr-black-bg-200);
}
.no-faq-type3[data-tp-section-tone=dark] .inner .qa-list .panel .question .card-title {
  color: var(--clr-base-white);
}
.no-faq-type3[data-tp-section-tone=dark] .inner .qa-list .panel .answer .answer-inner {
  background-color: var(--clr-black-bg-100);
}
.no-faq-type3[data-tp-section-tone=dark] .inner .qa-list .panel .answer .answer-inner .card-text {
  color: var(--clr-gray-300);
}
.no-faq-type3[data-tp-section-tone=dark] .inner .qa-list .panel.is-open .question {
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
}
.no-faq-type3[data-tp-section-tone=dark] .inner .qa-list .panel.is-open .question .card-title {
  color: var(--clr-gray-900);
}
.no-faq-type3[data-tp-section-tone=dark]:not(.is-faq-ready) .inner .qa-list .panel:nth-child(-n+2) .question {
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
}
.no-faq-type3[data-tp-section-tone=dark]:not(.is-faq-ready) .inner .qa-list .panel:nth-child(-n+2) .question .card-title {
  color: var(--clr-gray-900);
}
.no-faq-type3[data-tp-section-tone=dark].active-primary .inner .qa-list .panel.is-open .question {
  background-color: var(--clr-primary);
  color: var(--clr-base-white);
}
.no-faq-type3[data-tp-section-tone=dark].active-primary .inner .qa-list .panel.is-open .question .card-title {
  color: var(--clr-base-white);
}
.no-faq-type3[data-tp-section-tone=dark].active-primary:not(.is-faq-ready) .inner .qa-list .panel:nth-child(-n+2) .question {
  background-color: var(--clr-primary);
  color: var(--clr-base-white);
}
.no-faq-type3[data-tp-section-tone=dark].active-primary:not(.is-faq-ready) .inner .qa-list .panel:nth-child(-n+2) .question .card-title {
  color: var(--clr-base-white);
}

@keyframes no-main-visual-type1-progress-bar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes no-main-visual-type1-controller-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.no-main-visual-type1 {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.no-main-visual-type1.is-paused .swiper-pagination-bullet-active .timer-bar {
  animation-play-state: paused;
}
.no-main-visual-type1.--tac .main-slider .swiper-wrapper .swiper-slide .inner, .no-main-visual-type1.center .main-slider .swiper-wrapper .swiper-slide .inner {
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}
.no-main-visual-type1.--tac .main-slider .swiper-wrapper .swiper-slide .inner hgroup, .no-main-visual-type1.center .main-slider .swiper-wrapper .swiper-slide .inner hgroup {
  width: 100%;
  margin-inline: auto;
}
.no-main-visual-type1.--tac .main-slider .swiper-wrapper .swiper-slide .inner hgroup .slide-title, .no-main-visual-type1.center .main-slider .swiper-wrapper .swiper-slide .inner hgroup .slide-title {
  transform: none;
}
.no-main-visual-type1.left-center .main-slider .swiper-wrapper .swiper-slide .inner {
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 0;
}
@media (max-width: 1440px) {
  .no-main-visual-type1.left-center .main-slider .swiper-wrapper .swiper-slide .inner hgroup .slide-title {
    transform: translateX(0);
  }
}
.no-main-visual-type1.controller-center .main-slider .controller {
  justify-content: center;
  gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
@media (max-width: 544px) {
  .no-main-visual-type1.controller-center .main-slider .controller {
    align-items: center;
  }
}
.no-main-visual-type1.controller-right .main-slider .controller {
  justify-content: flex-end;
  gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
@media (max-width: 544px) {
  .no-main-visual-type1.controller-right .main-slider .controller {
    align-items: flex-end;
  }
}
.no-main-visual-type1 .main-slider {
  position: relative;
  height: 100%;
  background-color: var(--clr-base-black);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.no-main-visual-type1 .main-slider .swiper-wrapper .swiper-slide {
  position: relative;
  z-index: 2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.no-main-visual-type1 .main-slider .swiper-wrapper .swiper-slide .inner {
  position: relative;
  z-index: 4;
  display: flex;
  height: 100%;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: clamp(12rem, 5.1779935275vw + 10.0582524272rem, 20rem);
}
@media (max-width: 450px) {
  .no-main-visual-type1 .main-slider .swiper-wrapper .swiper-slide .inner {
    padding-bottom: clamp(9.6rem, 4.142394822vw + 8.0466019417rem, 16rem);
  }
}
.no-main-visual-type1 .main-slider .swiper-wrapper .swiper-slide .inner hgroup {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20%);
  transition: transform 0.6s ease-out, opacity 0.6s ease-in-out, filter 0.6s ease-in-out;
  transition-delay: 0.6s;
}
.no-main-visual-type1 .main-slider .swiper-wrapper .swiper-slide .inner hgroup .slide-title {
  transform: translateX(-1rem);
}
@media (max-width: 1440px) {
  .no-main-visual-type1 .main-slider .swiper-wrapper .swiper-slide .inner hgroup .slide-title {
    transform: translateX(0);
  }
}
@media (max-width: 544px) {
  .no-main-visual-type1 .main-slider .swiper-wrapper .swiper-slide .inner hgroup .slide-title {
    font-size: clamp(5rem, 2.9773462783vw + 3.8834951456rem, 9.6rem);
  }
}
.no-main-visual-type1 .main-slider .swiper-wrapper .swiper-slide.swiper-slide-active {
  z-index: 3;
}
.no-main-visual-type1 .main-slider .swiper-wrapper .swiper-slide.swiper-slide-active .inner hgroup {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}
.no-main-visual-type1 .main-slider .controller {
  position: absolute;
  bottom: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem);
  left: 50%;
  z-index: 9;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 1440px;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  transform: translateX(-50%);
  opacity: 0;
  animation: no-main-visual-type1-controller-in 0.6s forwards;
}
@media (max-width: 544px) {
  .no-main-visual-type1 .main-slider .controller {
    bottom: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
}
.no-main-visual-type1 .main-slider .controller .progress-group {
  display: flex;
  align-items: center;
  gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
}
.no-main-visual-type1 .main-slider .controller .progress-group .swiper-pagination {
  position: relative;
  bottom: 0;
  left: 0;
  display: flex;
  width: clamp(20rem, 12.9449838188vw + 15.145631068rem, 40rem);
  align-items: center;
  gap: 1rem;
}
.no-main-visual-type1 .main-slider .controller .progress-group .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  width: 100%;
  height: 0.3rem;
  border-radius: 0;
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: background-color 0.3s;
}
.no-main-visual-type1 .main-slider .controller .progress-group .swiper-pagination .swiper-pagination-bullet:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.no-main-visual-type1 .main-slider .controller .progress-group .swiper-pagination .swiper-pagination-bullet .timer-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background-color: var(--clr-base-white);
}
.no-main-visual-type1 .main-slider .controller .progress-group .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .timer-bar {
  animation: no-main-visual-type1-progress-bar var(--main-visual-autoplay, 5000ms) linear forwards;
}
.no-main-visual-type1 .main-slider .controller .progress-group .play-toggle {
  display: flex;
  width: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
  height: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--clr-base-white);
  cursor: pointer;
}
.no-main-visual-type1 .main-slider .controller .progress-group .play-toggle svg {
  display: block;
  width: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
  height: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.no-main-visual-type1 .main-slider .controller .progress-group .play-toggle .icon-play {
  display: none;
}
.no-main-visual-type1 .main-slider .controller .progress-group .play-toggle.is-paused .icon-pause {
  display: none;
}
.no-main-visual-type1 .main-slider .controller .progress-group .play-toggle.is-paused .icon-play {
  display: block;
}
.no-main-visual-type1 .main-slider .controller .arrow-group {
  position: relative;
  display: flex;
  width: auto;
  align-items: center;
  gap: 1.2rem;
}
@media (max-width: 1440px) {
  .no-main-visual-type1 .main-slider .controller .arrow-group {
    display: none;
  }
}
.no-main-visual-type1 .main-slider .controller .arrow-group .arrow {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: clamp(5rem, 0.6472491909vw + 4.7572815534rem, 6rem);
  height: clamp(5rem, 0.6472491909vw + 4.7572815534rem, 6rem);
  margin: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--clr-base-white);
  border-radius: 50%;
  background: transparent;
  color: var(--clr-base-white);
  cursor: pointer;
  transition: background-color 0.3s;
}
.no-main-visual-type1 .main-slider .controller .arrow-group .arrow::after {
  display: none;
}
.no-main-visual-type1 .main-slider .controller .arrow-group .arrow:hover {
  background-color: rgba(255, 255, 255, 0.16);
}
.no-main-visual-type1 .main-slider .controller .arrow-group .arrow svg {
  position: relative;
  width: clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.8rem);
  height: clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.8rem);
}
.no-template-preview .canvas > .no-main-visual-type1, .admin-cms-live .no-main-visual-type1 {
  height: auto;
  aspect-ratio: 16/9;
}
.no-template-preview .canvas > .no-main-visual-type1 .main-slider,
.no-template-preview .canvas > .no-main-visual-type1 .main-slider .swiper-wrapper,
.no-template-preview .canvas > .no-main-visual-type1 .main-slider .swiper-wrapper .swiper-slide, .admin-cms-live .no-main-visual-type1 .main-slider,
.admin-cms-live .no-main-visual-type1 .main-slider .swiper-wrapper,
.admin-cms-live .no-main-visual-type1 .main-slider .swiper-wrapper .swiper-slide {
  height: 100%;
}
.no-template-preview .canvas > .no-main-visual-type1 .main-slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-main-visual-type1 .main-slider:not(.swiper-initialized) .swiper-wrapper {
  transform: none;
}
.no-template-preview .canvas > .no-main-visual-type1 .main-slider:not(.swiper-initialized) .swiper-slide, .admin-cms-live .no-main-visual-type1 .main-slider:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 100%;
}
.no-template-preview .canvas > .no-main-visual-type1 .main-slider:not(.swiper-initialized) .swiper-slide:not(:first-child), .admin-cms-live .no-main-visual-type1 .main-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}

@keyframes no-main-visual-type2-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.no-main-visual-type2 {
  position: relative;
  height: 100svh;
  padding-left: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
  padding-right: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
}
.no-main-visual-type2 .stage {
  position: relative;
  width: 100%;
  height: 100%;
}
.no-main-visual-type2 .main-slider {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
  overflow: hidden;
}
.no-main-visual-type2 .main-slider .swiper-wrapper .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
}
.no-main-visual-type2 .main-slider .swiper-wrapper .swiper-slide::before {
  z-index: 1;
}
.no-main-visual-type2 .main-slider .swiper-wrapper .swiper-slide .slide-link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.no-main-visual-type2 .main-slider .swiper-wrapper .swiper-slide .visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}
.no-main-visual-type2 .main-slider .swiper-wrapper .swiper-slide .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-main-visual-type2 .main-slider .swiper-wrapper .swiper-slide .inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.no-main-visual-type2 .main-slider .swiper-wrapper .swiper-slide .no-btn {
  border: 1px solid var(--clr-white-alpha-50);
  background-color: transparent;
  color: var(--clr-base-white);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.no-main-visual-type2 .main-slider .swiper-wrapper .swiper-slide .no-btn:hover {
  border-color: var(--clr-base-white);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
}
.no-main-visual-type2 .main-slider .swiper-wrapper .swiper-slide .no-btn[hidden] {
  display: none;
}
.no-main-visual-type2 .controller {
  --controller-curve: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
  --controller-bg: var(--clr-base-white);
  --controller-curve-overlap: 1px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
  padding: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
  background-color: var(--controller-bg);
  border-top-left-radius: var(--controller-curve);
}
.no-main-visual-type2 .controller::before, .no-main-visual-type2 .controller::after {
  content: "";
  position: absolute;
  width: var(--controller-curve);
  height: var(--controller-curve);
  pointer-events: none;
  background: radial-gradient(circle at 0 0, transparent calc(71% - 1px), var(--controller-bg) 71%);
}
.no-main-visual-type2 .controller::before {
  right: calc(var(--controller-curve-overlap) * -1);
  bottom: calc(100% - var(--controller-curve-overlap));
}
.no-main-visual-type2 .controller::after {
  right: calc(100% - var(--controller-curve-overlap));
  bottom: calc(var(--controller-curve-overlap) * -1);
}
.no-main-visual-type2 .controller > * {
  position: relative;
  z-index: 1;
}
.no-main-visual-type2 .controller .arrow-prev {
  order: 1;
}
.no-main-visual-type2 .controller .counter {
  order: 2;
}
.no-main-visual-type2 .controller .play-toggle {
  order: 3;
}
.no-main-visual-type2 .controller .arrow-next {
  order: 4;
}
.no-main-visual-type2 .controller .arrow::after {
  display: none;
}
.no-main-visual-type2 .controller .counter {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
  min-width: clamp(7.2rem, 2.071197411vw + 6.4233009709rem, 10.4rem);
  justify-content: center;
}
.no-main-visual-type2 .controller .counter .bar {
  position: relative;
  display: inline-block;
  width: clamp(3.6rem, 1.2944983819vw + 3.1145631068rem, 5.6rem);
  height: 2px;
  overflow: hidden;
  background-color: var(--clr-gray-300, #ccc);
}
.no-main-visual-type2 .controller .counter .bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--clr-gray-900);
  transform: scaleX(0);
  transform-origin: left center;
}
.no-main-visual-type2 .controller .counter .total {
  color: var(--clr-gray-500, #888);
}
.no-main-visual-type2 .controller .play-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem);
  height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem);
  border: 0;
  background: transparent;
  color: var(--clr-gray-900);
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.no-main-visual-type2 .controller .play-toggle:hover {
  opacity: 0.6;
}
.no-main-visual-type2 .controller .play-toggle svg {
  width: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
  height: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
}
.no-main-visual-type2 .controller .play-toggle.is-paused .icon-pause {
  display: none;
}
.no-main-visual-type2 .controller .play-toggle .icon-play {
  display: none;
}
.no-main-visual-type2 .controller .play-toggle.is-paused .icon-play {
  display: inline-flex;
}
.no-main-visual-type2 .controller .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(4rem, 0.7766990291vw + 3.7087378641rem, 5.2rem);
  height: clamp(4rem, 0.7766990291vw + 3.7087378641rem, 5.2rem);
  border: 0;
  border-radius: 50%;
  background-color: var(--clr-gray-900);
  color: var(--clr-base-white);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.no-main-visual-type2 .controller .arrow:hover {
  background-color: var(--clr-gray-800, #333);
}
.no-main-visual-type2 .controller .arrow svg {
  width: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
  height: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
}
.no-main-visual-type2.is-progressing .controller .counter .bar::before {
  animation: no-main-visual-type2-progress var(--main-visual-autoplay, 6000ms) linear forwards;
}
.no-main-visual-type2.is-paused .controller .counter .bar::before {
  animation-play-state: paused;
}
.no-template-preview .canvas > .no-main-visual-type2, .admin-cms-live .no-main-visual-type2 {
  height: auto;
  aspect-ratio: 16/9;
}
.no-template-preview .canvas > .no-main-visual-type2 .stage,
.no-template-preview .canvas > .no-main-visual-type2 .main-slider,
.no-template-preview .canvas > .no-main-visual-type2 .main-slider .swiper-wrapper,
.no-template-preview .canvas > .no-main-visual-type2 .main-slider .swiper-wrapper .swiper-slide, .admin-cms-live .no-main-visual-type2 .stage,
.admin-cms-live .no-main-visual-type2 .main-slider,
.admin-cms-live .no-main-visual-type2 .main-slider .swiper-wrapper,
.admin-cms-live .no-main-visual-type2 .main-slider .swiper-wrapper .swiper-slide {
  height: 100%;
}
.no-template-preview .canvas > .no-main-visual-type2 .main-slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-main-visual-type2 .main-slider:not(.swiper-initialized) .swiper-wrapper {
  transform: none;
}
.no-template-preview .canvas > .no-main-visual-type2 .main-slider:not(.swiper-initialized) .swiper-slide, .admin-cms-live .no-main-visual-type2 .main-slider:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 100%;
}
.no-template-preview .canvas > .no-main-visual-type2 .main-slider:not(.swiper-initialized) .swiper-slide:not(:first-child), .admin-cms-live .no-main-visual-type2 .main-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}

.no-main-visual-type3 {
  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.no-main-visual-type3 .title-area {
  position: relative;
  z-index: 2;
  height: 45%;
}
.no-main-visual-type3 .title-mask {
  overflow-y: hidden;
  position: absolute;
  left: 0;
  bottom: 4rem;
}
.no-main-visual-type3 .title {
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.82s;
}
.no-main-visual-type3 .visual-stage {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background-color: var(--clr-gray-100);
  transition: top 1.2s cubic-bezier(0.76, 0, 0.24, 1), height 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
.no-main-visual-type3 .main-slider,
.no-main-visual-type3 .swiper-wrapper,
.no-main-visual-type3 .swiper-slide,
.no-main-visual-type3 .visual {
  width: 100%;
  height: 100%;
}
.no-main-visual-type3 .main-slider {
  position: relative;
}
.no-main-visual-type3 .main-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}
.no-main-visual-type3 .visual {
  margin: 0;
  overflow: hidden;
}
.no-main-visual-type3 .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.no-main-visual-type3.is-intro-ready .title {
  transform: translateY(0);
}
.no-main-visual-type3.is-intro-ready .visual-stage {
  top: 48svh;
  height: 52svh;
}
.no-main-visual-type3.is-intro-ready .visual img {
  transform: scale(1);
}
.no-template-preview .canvas > .no-main-visual-type3, .admin-cms-live .no-main-visual-type3 {
  height: auto;
  aspect-ratio: 16/9;
}
.no-template-preview .canvas > .no-main-visual-type3 .title, .admin-cms-live .no-main-visual-type3 .title {
  transform: translateY(0);
  transition: none;
}
.no-template-preview .canvas > .no-main-visual-type3 .visual-stage, .admin-cms-live .no-main-visual-type3 .visual-stage {
  top: 48%;
  height: 52%;
  transition: none;
}
.no-template-preview .canvas > .no-main-visual-type3 .visual img, .admin-cms-live .no-main-visual-type3 .visual img {
  transform: none;
}
@media (max-width: 768px) {
  .no-main-visual-type3.is-intro-ready .visual-stage {
    top: 50svh;
    height: 50svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .no-main-visual-type3 .title,
  .no-main-visual-type3 .visual-stage,
  .no-main-visual-type3 .visual img {
    transition: none;
  }
}
.no-main-visual-type4 {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}
.no-main-visual-type4 .inner {
  position: relative;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(7.2rem, 2.5889967638vw + 6.2291262136rem, 11.2rem);
  padding-bottom: clamp(5.6rem, 2.071197411vw + 4.8233009709rem, 8.8rem);
}
.no-main-visual-type4 .inner .intro {
  position: relative;
  z-index: 2;
}
.no-main-visual-type4 .inner .visual {
  width: 78%;
  margin-right: auto;
  margin-left: auto;
  background-color: var(--clr-black-bg-100);
}
@media (max-width: 768px) {
  .no-main-visual-type4 .inner .visual {
    width: 100%;
  }
}
.no-main-visual-type4 .inner .scroll-cue {
  position: absolute;
  left: clamp(2.4rem, 2.071197411vw + 1.6233009709rem, 5.6rem);
  bottom: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}
@media (max-width: 768px) {
  .no-main-visual-type4 .inner .scroll-cue {
    display: none;
  }
}
.no-main-visual-type4 .inner .scroll-cue .scroll-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.no-main-visual-type4 .inner .scroll-cue .scroll-line {
  display: block;
  width: 1px;
  height: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem);
  background-color: var(--clr-white-alpha-40);
}
.no-main-visual-type4.visual-wide .inner .visual {
  width: 100%;
}
.no-main-visual-type4.visual-compact .inner .visual {
  width: 62%;
}
@media (max-width: 768px) {
  .no-main-visual-type4.visual-compact .inner .visual {
    width: 100%;
  }
}
.no-main-visual-type4.scroll-cue-off .inner .scroll-cue {
  display: none;
}
.no-template-preview .canvas > .no-main-visual-type4, .admin-cms-live .no-main-visual-type4 {
  min-height: 0;
  aspect-ratio: 16/9;
}
.no-template-preview .canvas > .no-main-visual-type4 .inner, .admin-cms-live .no-main-visual-type4 .inner {
  min-height: 100%;
}

@keyframes no-main-visual-type5-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.no-main-visual-type5 {
  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.no-main-visual-type5.is-static .stage .control-panel .controller .arrow-group {
  display: none;
}
.no-main-visual-type5.is-progressing .stage .control-panel .controller .counter .progress .progress-bar {
  animation: no-main-visual-type5-progress var(--main-visual-autoplay, 6000ms) linear forwards;
}
.no-main-visual-type5 .stage {
  position: relative;
  height: 100%;
}
.no-main-visual-type5 .stage .main-slider,
.no-main-visual-type5 .stage .swiper-wrapper,
.no-main-visual-type5 .stage .swiper-slide {
  height: 100%;
}
.no-main-visual-type5 .stage .main-slider {
  position: relative;
}
.no-main-visual-type5 .stage .main-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}
.no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide {
  position: relative;
  overflow: hidden;
}
.no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide::before {
  z-index: 1;
}
.no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide .slide-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
}
.no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide .visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: var(--clr-black-bg-100);
}
.no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 0.6s ease;
}
.no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide .content {
  position: absolute;
  left: 50%;
  bottom: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 8.8rem);
  z-index: 2;
  width: 100%;
  align-items: end;
  transform: translateX(-50%);
  pointer-events: none;
}
@media (max-width: 768px) {
  .no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide .content {
    bottom: clamp(8.8rem, 2.071197411vw + 8.0233009709rem, 12rem);
    align-items: start;
  }
}
.no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide .content .text-content,
.no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide .content .side-content {
  pointer-events: auto;
}
.no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide .content .side-content {
  grid-column-start: 9;
  align-self: end;
  padding-bottom: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
}
@media (max-width: 768px) {
  .no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide .content .side-content {
    grid-column-start: auto !important;
    align-self: start;
    padding-bottom: 0;
  }
}
.no-main-visual-type5 .stage .main-slider .swiper-wrapper .slide.swiper-slide-active .visual img {
  transform: scale(1);
}
.no-main-visual-type5 .stage .control-panel {
  position: absolute;
  left: 50%;
  bottom: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 8.8rem);
  z-index: 3;
  width: 100%;
  align-items: end;
  transform: translateX(-50%);
  pointer-events: none;
}
@media (max-width: 768px) {
  .no-main-visual-type5 .stage .control-panel {
    bottom: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem);
  }
}
.no-main-visual-type5 .stage .control-panel .controller {
  grid-column-start: 9;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  pointer-events: auto;
}
@media (max-width: 768px) {
  .no-main-visual-type5 .stage .control-panel .controller {
    grid-column-start: auto !important;
  }
}
.no-main-visual-type5 .stage .control-panel .controller .counter {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.no-main-visual-type5 .stage .control-panel .controller .counter .progress {
  position: relative;
  display: inline-block;
  width: clamp(5.6rem, 3.1067961165vw + 4.4349514563rem, 10.4rem);
  height: 1px;
  overflow: hidden;
  background-color: var(--clr-white-alpha-40);
}
.no-main-visual-type5 .stage .control-panel .controller .counter .progress .progress-bar {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background-color: var(--clr-base-white);
}
.no-main-visual-type5 .stage .control-panel .controller .counter .total {
  color: var(--clr-white-alpha-50);
}
.no-main-visual-type5 .stage .control-panel .controller .arrow-group {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.no-main-visual-type5 .stage .control-panel .controller .arrow {
  display: inline-flex;
  width: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
  height: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
  align-items: center;
  justify-content: center;
  color: var(--clr-base-white);
  transition: opacity 0.3s ease;
}
.no-main-visual-type5 .stage .control-panel .controller .arrow:hover {
  opacity: 0.6;
}
.no-main-visual-type5 .stage .control-panel .controller .arrow svg {
  width: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
  height: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
}
.no-main-visual-type5 .stage .scroll-down {
  position: absolute;
  right: clamp(3.2rem, 2.5889967638vw + 2.2291262136rem, 7.2rem);
  bottom: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 8rem);
  z-index: 4;
  display: inline-flex;
  width: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem);
  height: clamp(4.4rem, 1.2944983819vw + 3.9145631068rem, 6.4rem);
  align-items: center;
  justify-content: center;
  color: var(--clr-base-white);
  transition: opacity 0.3s ease;
}
@media (max-width: 768px) {
  .no-main-visual-type5 .stage .scroll-down {
    display: none;
  }
}
.no-main-visual-type5 .stage .scroll-down:hover {
  opacity: 0.6;
}
.no-main-visual-type5 .stage .scroll-down svg {
  width: 100%;
  height: 100%;
}
.no-main-visual-type5.controller-left .stage .control-panel .controller {
  grid-column-start: 1;
}
.no-main-visual-type5.controller-hidden .stage .control-panel {
  display: none;
}
.no-main-visual-type5.visual-clear .stage .main-slider .swiper-wrapper .slide::before {
  background: rgba(0, 0, 0, 0.35);
}
.no-main-visual-type5.visual-deep .stage .main-slider .swiper-wrapper .slide::before {
  background: rgba(0, 0, 0, 0.78);
}
.no-template-preview .canvas > .no-main-visual-type5, .admin-cms-live .no-main-visual-type5 {
  height: auto;
  aspect-ratio: 16/9;
}
.no-template-preview .canvas > .no-main-visual-type5 .stage,
.no-template-preview .canvas > .no-main-visual-type5 .main-slider,
.no-template-preview .canvas > .no-main-visual-type5 .swiper-wrapper,
.no-template-preview .canvas > .no-main-visual-type5 .swiper-slide, .admin-cms-live .no-main-visual-type5 .stage,
.admin-cms-live .no-main-visual-type5 .main-slider,
.admin-cms-live .no-main-visual-type5 .swiper-wrapper,
.admin-cms-live .no-main-visual-type5 .swiper-slide {
  height: 100%;
}

.no-slider-cover-type1 {
  position: relative;
  overflow: hidden;
}
.no-slider-cover-type1 .inner .top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}
@media (max-width: 768px) {
  .no-slider-cover-type1 .inner .top {
    display: block;
  }
}
.no-slider-cover-type1 .inner .top:has(.intro.--tac) {
  flex-direction: column;
  align-items: stretch;
}
.no-slider-cover-type1 .inner .top:has(.intro.--tac) .intro {
  margin-right: auto;
  margin-left: auto;
}
.no-slider-cover-type1 .inner .top:has(.intro.--tac) .control {
  justify-content: center;
}
.no-slider-cover-type1 .inner .top .control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--spacing-sm);
}
@media (max-width: 768px) {
  .no-slider-cover-type1 .inner .top .control {
    margin-top: var(--spacing-xl);
  }
}
.no-slider-cover-type1 .inner .top .control .arrow {
  display: inline-flex;
  width: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
  height: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-gray-100);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.no-slider-cover-type1 .inner .top .control .arrow svg {
  width: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
  height: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
}
.no-slider-cover-type1 .inner .top .control .arrow:hover {
  border-color: var(--clr-gray-900);
  background-color: var(--clr-gray-900);
  color: var(--clr-base-white);
}
.no-slider-cover-type1 .inner .cover {
  position: relative;
}
.no-slider-cover-type1 .inner .cover .slider {
  --slider-cover-type1-static-gap: 2.4rem;
  overflow: visible;
}
@media (max-width: 768px) {
  .no-slider-cover-type1 .inner .cover .slider {
    --slider-cover-type1-static-gap: 1.6rem;
  }
}
.no-template-preview .no-slider-cover-type1 .inner .cover .slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-slider-cover-type1 .inner .cover .slider:not(.swiper-initialized) .swiper-wrapper {
  gap: var(--slider-cover-type1-static-gap);
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper {
  align-items: stretch;
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide {
  position: relative;
  width: 100%;
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide:hover .slide-link .visual img, .no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide:focus-within .slide-link .visual img {
  transform: translate(-50%, -50%) scale(1.05);
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link {
  color: inherit;
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .visual {
  overflow: hidden;
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.18));
}
@media (max-width: 768px) {
  .no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .visual::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.68));
  }
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .visual img {
  transform-origin: center;
  transition: transform 0.3s ease;
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .panel {
  position: absolute;
  bottom: var(--spacing-2xl);
  left: var(--spacing-2xl);
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}
@media (max-width: 768px) {
  .no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .panel {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: var(--spacing-md);
    background-color: var(--clr-black-bg-50);
    backdrop-filter: none;
  }
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .panel .cms-collection-extra-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  margin-top: var(--spacing-sm);
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .panel .cms-collection-extra-slot {
  margin: 0;
  color: var(--clr-base-white);
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .panel .cms-collection-extra-slot--repeater,
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .panel .cms-collection-extra-slot--badge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  padding: 0;
  list-style: none;
}
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .panel .cms-collection-extra-slot--repeater li,
.no-slider-cover-type1 .inner .cover .slider .swiper-wrapper .slide .slide-link .panel .cms-collection-extra-slot--badge li {
  border: 1px solid var(--clr-white-alpha-30);
  border-radius: 999px;
  padding: var(--spacing-2xs) var(--spacing-xs);
  color: var(--clr-base-white);
  font-size: var(--body-xs-fs);
  line-height: var(--body-xs-lh);
}
.no-slider-cover-type1.loop-off {
  position: relative;
}
.no-slider-cover-type1[data-tp-section-tone=dark] .inner .top .control .arrow {
  border-color: var(--clr-white-alpha-30);
  background-color: transparent;
  color: var(--clr-base-white);
}
.no-slider-cover-type1[data-tp-section-tone=dark] .inner .top .control .arrow:hover {
  border-color: var(--clr-base-white);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
}

.no-slider-cover-type2 {
  position: relative;
  overflow: hidden;
}
.no-slider-cover-type2 .inner .slide-area .slider {
  --slider-cover-type2-static-gap: 2.4rem;
  overflow: visible;
}
@media (max-width: 768px) {
  .no-slider-cover-type2 .inner .slide-area .slider {
    --slider-cover-type2-static-gap: 1.6rem;
  }
}
.no-template-preview .no-slider-cover-type2 .inner .slide-area .slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-slider-cover-type2 .inner .slide-area .slider:not(.swiper-initialized) .swiper-wrapper {
  gap: var(--slider-cover-type2-static-gap);
}
.no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper {
  align-items: stretch;
}
.no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper .slide {
  position: relative;
  overflow: hidden;
  width: clamp(22rem, 5.1779935275vw + 20.0582524272rem, 30rem);
}
.no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper .slide:hover .slide-link .visual img, .no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper .slide:focus-within .slide-link .visual img {
  transform: translate(-50%, -50%) scale(1.05);
}
.no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper .slide:hover .panel .slide-keywords, .no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper .slide:focus-within .panel .slide-keywords {
  max-height: 30rem;
  margin-top: var(--spacing-md);
  opacity: 1;
}
.no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper .slide .slide-link {
  display: block;
  color: inherit;
}
.no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper .slide .slide-link .visual img {
  transform-origin: center;
  transition: transform 0.3s ease;
}
.no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper .slide .visual {
  overflow: hidden;
}
.no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper .slide .visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 35%, rgba(0, 0, 0, 0.8) 100%);
}
.no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper .slide .panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.no-slider-cover-type2 .inner .slide-area .slider .swiper-wrapper .slide .panel .slide-keywords {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, margin-top 0.3s ease, opacity 0.3s ease;
}
.no-slider-cover-type2 .inner .slide-area .scrollbar {
  position: relative;
  height: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--clr-gray-100);
}
.no-slider-cover-type2 .inner .slide-area .scrollbar .swiper-scrollbar-drag {
  height: 100%;
  border-radius: inherit;
  background-color: var(--clr-gray-900);
}
.no-slider-cover-type2.loop-off {
  position: relative;
}
.no-slider-cover-type2[data-tp-section-tone=dark] .inner .slide-area .slider .swiper-wrapper .slide .visual::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.85) 100%);
}
.no-slider-cover-type2[data-tp-section-tone=dark] .inner .slide-area .scrollbar {
  background-color: var(--clr-white-alpha-20);
}
.no-slider-cover-type2[data-tp-section-tone=dark] .inner .slide-area .scrollbar .swiper-scrollbar-drag {
  background-color: var(--clr-base-white);
}

.no-slider-horizon-type1 {
  position: relative;
  overflow: hidden;
}
.no-slider-horizon-type1[data-tp-section-tone=dark] .inner .top .control .arrow {
  border-color: var(--clr-white-alpha-40);
  color: var(--clr-base-white);
}
.no-slider-horizon-type1[data-tp-section-tone=dark] .inner .top .control .arrow:hover {
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
}
.no-slider-horizon-type1 .inner {
  position: relative;
}
.no-slider-horizon-type1 .inner .top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-xl);
}
@media (max-width: 768px) {
  .no-slider-horizon-type1 .inner .top {
    display: block;
  }
}
.no-slider-horizon-type1 .inner .top hgroup {
  flex: 1;
}
.no-slider-horizon-type1 .inner .top .control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: var(--spacing-xs);
}
@media (max-width: 768px) {
  .no-slider-horizon-type1 .inner .top .control {
    display: none;
  }
}
.no-slider-horizon-type1 .inner .top .control .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-gray-900);
  color: var(--clr-gray-900);
  background-color: transparent;
  aspect-ratio: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.no-slider-horizon-type1 .inner .top .control .arrow:hover {
  background-color: var(--clr-gray-900);
  color: var(--clr-base-white);
}
.no-slider-horizon-type1 .inner .top .control .arrow svg {
  width: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  height: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
}
.no-slider-horizon-type1 .inner .slide-wrap {
  position: relative;
}
@media (max-width: 768px) {
  .no-slider-horizon-type1 .inner .slide-wrap {
    overflow: hidden;
  }
}
.no-slider-horizon-type1 .inner .slide-wrap .slider {
  --slider-horizon-type1-static-gap: 9.6rem;
  width: 100%;
  overflow: visible;
}
@media (max-width: 1024px) {
  .no-slider-horizon-type1 .inner .slide-wrap .slider {
    --slider-horizon-type1-static-gap: 6.4rem;
  }
}
@media (max-width: 768px) {
  .no-slider-horizon-type1 .inner .slide-wrap .slider {
    --slider-horizon-type1-static-gap: 2rem;
  }
}
.no-template-preview .no-slider-horizon-type1 .inner .slide-wrap .slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-slider-horizon-type1 .inner .slide-wrap .slider:not(.swiper-initialized) .swiper-wrapper {
  gap: var(--slider-horizon-type1-static-gap);
}
.no-slider-horizon-type1 .inner .slide-wrap .slider.is-ready .swiper-wrapper .slide .visual {
  transition: opacity 0.6s ease, transform 0.9s ease;
}
.no-slider-horizon-type1 .inner .slide-wrap .slider.is-ready .swiper-wrapper .slide .content {
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--spacing-xl));
}
.no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide {
  width: 100%;
  align-items: center;
  position: relative;
}
@media (max-width: 1024px) {
  .no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide {
    width: 80%;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide {
    width: 100%;
    overflow: hidden;
    display: block;
  }
}
.no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide.swiper-slide-prev .visual, .no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide.swiper-slide-duplicate-prev .visual {
  opacity: 0.3;
  transform: translateX(calc(100% + var(--spacing-xl)));
}
.no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide.swiper-slide-prev .content, .no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide.swiper-slide-duplicate-prev .content {
  opacity: 0;
  transform: translateX(var(--spacing-xl));
}
@media (max-width: 768px) {
  .no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide.swiper-slide-prev .visual, .no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide.swiper-slide-duplicate-prev .visual {
    opacity: 1;
    transform: none;
  }
  .no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide.swiper-slide-prev .content, .no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide.swiper-slide-duplicate-prev .content {
    opacity: 1;
  }
}
.no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide.swiper-slide-active .content, .no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide.swiper-slide-duplicate-active .content {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide .visual {
  width: 100%;
  overflow: hidden;
}
.no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide .content {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (max-width: 768px) {
  .no-slider-horizon-type1 .inner .slide-wrap .slider .swiper-wrapper .slide .content {
    margin-top: var(--spacing-lg);
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}
.no-slider-horizon-type1 .inner .slide-wrap .slider.is-transitioning .swiper-wrapper .slide .content {
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--spacing-xl));
}
@media (max-width: 768px) {
  .no-slider-horizon-type1 .inner .slide-wrap .slider.is-transitioning .swiper-wrapper .slide .content {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

.no-slider-horizon-type2 {
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .no-slider-horizon-type2.is-slider-horizon-type2-ready .inner .slide-wrap .split {
    display: flex !important;
  }
}
@media (min-width: 768px) {
  .no-slider-horizon-type2.is-slider-horizon-type2-ready .inner .slide-wrap .mobile-slider-wrap {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .no-slider-horizon-type2:not(.is-slider-horizon-type2-ready) .inner .slide-wrap .split {
    display: flex;
  }
  .no-slider-horizon-type2:not(.is-slider-horizon-type2-ready) .inner .slide-wrap .mobile-slider-wrap {
    display: none;
  }
}
@media (max-width: 768px) {
  .no-slider-horizon-type2:not(.is-slider-horizon-type2-ready) .inner .slide-wrap .mobile-slider-wrap .slider {
    overflow: hidden;
  }
  .no-slider-horizon-type2:not(.is-slider-horizon-type2-ready) .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper {
    display: block;
  }
  .no-slider-horizon-type2:not(.is-slider-horizon-type2-ready) .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card {
    display: none;
    width: 100%;
  }
  .no-slider-horizon-type2:not(.is-slider-horizon-type2-ready) .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card:first-child {
    display: block;
  }
}
.no-slider-horizon-type2[data-tp-section-tone=dark] .inner .slide-wrap .split .stage .control--desktop .arrow,
.no-slider-horizon-type2[data-tp-section-tone=dark] .inner .slide-wrap .control--mobile .arrow {
  border-color: var(--clr-white-alpha-40);
  color: var(--clr-base-white);
}
.no-slider-horizon-type2[data-tp-section-tone=dark] .inner .slide-wrap .split .stage .control--desktop .arrow:hover,
.no-slider-horizon-type2[data-tp-section-tone=dark] .inner .slide-wrap .control--mobile .arrow:hover {
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
}
.no-slider-horizon-type2 .inner {
  position: relative;
}
.no-slider-horizon-type2 .inner .slide-wrap {
  --h2-image-height: clamp(44rem, 3.8834951456vw + 42.5436893204rem, 50rem);
  --h2-visual-width: clamp(34rem, 2.9126213592vw + 32.9077669903rem, 38.5rem);
  --h2-copy-width: clamp(30rem, 2.5889967638vw + 29.0291262136rem, 34rem);
  --h2-panel-gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
  --h2-queue-gap: clamp(16rem, 7.7669902913vw + 13.0873786408rem, 28rem);
  --h2-thumb-width: clamp(22rem, 2.2653721683vw + 21.1504854369rem, 25.5rem);
  --h2-stage-width: calc(var(--h2-visual-width) + var(--h2-copy-width) + var(--h2-panel-gap));
  position: relative;
}
@media (max-width: 768px) {
  .no-slider-horizon-type2 .inner .slide-wrap {
    overflow: hidden;
  }
}
.no-slider-horizon-type2 .inner .slide-wrap .control--mobile {
  display: none;
  align-items: center;
  gap: var(--spacing-xs);
}
.no-slider-horizon-type2 .inner .slide-wrap .control--mobile .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-gray-900);
  color: var(--clr-gray-900);
  background-color: transparent;
  aspect-ratio: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.no-slider-horizon-type2 .inner .slide-wrap .control--mobile .arrow:hover {
  background-color: var(--clr-gray-900);
  color: var(--clr-base-white);
}
.no-slider-horizon-type2 .inner .slide-wrap .control--mobile .arrow svg {
  width: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  height: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
}
.no-slider-horizon-type2 .inner .slide-wrap .split {
  display: none;
  position: relative;
  align-items: flex-start;
  gap: var(--h2-queue-gap);
  min-height: var(--h2-image-height);
  width: calc(100% + max(0px, (100vw - 100%) / 2));
}
.no-slider-horizon-type2 .inner .slide-wrap .split .stage {
  position: relative;
  flex: 0 0 var(--h2-stage-width);
  display: flex;
  flex-direction: column;
}
.no-slider-horizon-type2 .inner .slide-wrap .split .stage .stage-panels {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: var(--h2-image-height);
  overflow: hidden;
  isolation: isolate;
}
.no-slider-horizon-type2 .inner .slide-wrap .split .stage .stage-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--h2-panel-gap);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
@media (max-width: 1024px) {
  .no-slider-horizon-type2 .inner .slide-wrap .split .stage .stage-panel {
    gap: var(--h2-panel-gap);
  }
}
.no-slider-horizon-type2 .inner .slide-wrap .split .stage .stage-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.no-slider-horizon-type2 .inner .slide-wrap .split .stage .stage-panel > .visual {
  flex: 0 0 auto;
  grid-column: unset;
  width: var(--h2-visual-width);
  align-self: flex-start;
  overflow: hidden;
  height: var(--h2-image-height) !important;
  padding-bottom: 0 !important;
}
@media (max-width: 1024px) {
  .no-slider-horizon-type2 .inner .slide-wrap .split .stage .stage-panel > .visual {
    width: var(--h2-visual-width);
  }
}
.no-slider-horizon-type2 .inner .slide-wrap .split .stage .stage-panel > .text-content {
  flex: 0 0 var(--h2-copy-width);
  grid-column: unset;
}
.no-slider-horizon-type2 .inner .slide-wrap .split .stage .control--desktop {
  position: absolute;
  left: calc(var(--h2-visual-width) + var(--h2-panel-gap));
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
@media (max-width: 768px) {
  .no-slider-horizon-type2 .inner .slide-wrap .split .stage .control--desktop {
    display: none;
  }
}
.no-slider-horizon-type2 .inner .slide-wrap .split .stage .control--desktop .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-gray-900);
  color: var(--clr-gray-900);
  background-color: transparent;
  aspect-ratio: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.no-slider-horizon-type2 .inner .slide-wrap .split .stage .control--desktop .arrow:hover {
  background-color: var(--clr-gray-900);
  color: var(--clr-base-white);
}
.no-slider-horizon-type2 .inner .slide-wrap .split .stage .control--desktop .arrow svg {
  width: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  height: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
}
.no-slider-horizon-type2 .inner .slide-wrap .split .thumbs {
  flex: 1 1 0;
  align-self: flex-start;
  overflow: hidden;
}
.no-slider-horizon-type2 .inner .slide-wrap .split .thumbs .thumbs-slider {
  width: 100%;
  overflow: visible;
}
.no-slider-horizon-type2 .inner .slide-wrap .split .thumbs .thumbs-slider .swiper-wrapper {
  align-items: stretch;
}
.no-slider-horizon-type2 .inner .slide-wrap .split .thumbs .thumbs-slider .thumb-slide {
  width: var(--h2-thumb-width) !important;
  height: auto;
  cursor: default;
  flex-shrink: 0;
}
.no-slider-horizon-type2 .inner .slide-wrap .split .thumbs .thumbs-slider .thumb-slide .thumb-visual {
  height: var(--h2-image-height) !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  width: 100%;
}
.no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap {
  display: block;
}
.no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider {
  width: 100%;
  overflow: visible;
}
.no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper {
  align-items: stretch;
}
.no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card {
  width: clamp(26rem, 73vw, 34rem);
  height: auto;
  position: relative;
}
@media (max-width: 768px) {
  .no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card {
    overflow: visible;
  }
}
.no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card.swiper-slide-prev .visual, .no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card.swiper-slide-duplicate-prev .visual {
  opacity: 0.35;
  transform: translateX(calc(100% + var(--spacing-md)));
}
.no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card.swiper-slide-prev .text-content, .no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card.swiper-slide-duplicate-prev .text-content {
  opacity: 0;
  transform: translateX(var(--spacing-md));
}
@media (max-width: 768px) {
  .no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card.swiper-slide-prev .visual, .no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card.swiper-slide-duplicate-prev .visual {
    opacity: 1;
    transform: none;
  }
  .no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card.swiper-slide-prev .text-content, .no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card.swiper-slide-duplicate-prev .text-content {
    opacity: 1;
    transform: none;
  }
}
.no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card .card-inner {
  height: 100%;
}
.no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card .visual {
  width: 100%;
  overflow: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.no-slider-horizon-type2 .inner .slide-wrap .mobile-slider-wrap .slider .swiper-wrapper .slide-card .text-content {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.no-slider-horizon-type3 {
  position: relative;
  overflow: hidden;
}
.no-slider-horizon-type3 .inner {
  display: flex;
  flex-direction: column;
}
.no-slider-horizon-type3 .inner .top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}
@media (max-width: 768px) {
  .no-slider-horizon-type3 .inner .top {
    display: block;
  }
}
.no-slider-horizon-type3 .inner .top:has(.intro.--tac) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.no-slider-horizon-type3 .inner .top:has(.intro.--tac) .intro {
  margin-right: auto;
  margin-left: auto;
}
.no-slider-horizon-type3 .inner .top:has(.intro.--tac) .no-btn {
  align-self: center;
}
.no-slider-horizon-type3 .inner .slide-area .slider {
  --slider-horizon-type3-static-gap: 2.4rem;
  overflow: visible;
}
@media (max-width: 768px) {
  .no-slider-horizon-type3 .inner .slide-area .slider {
    --slider-horizon-type3-static-gap: 1.6rem;
  }
}
.no-template-preview .no-slider-horizon-type3 .inner .slide-area .slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-slider-horizon-type3 .inner .slide-area .slider:not(.swiper-initialized) .swiper-wrapper {
  gap: var(--slider-horizon-type3-static-gap);
}
.no-slider-horizon-type3 .inner .slide-area .slider .swiper-wrapper .slide {
  width: clamp(34rem, 6.4724919094vw + 31.572815534rem, 44rem);
}
@media (max-width: 768px) {
  .no-slider-horizon-type3 .inner .slide-area .slider .swiper-wrapper .slide {
    width: calc(100% - var(--spacing-4xl));
  }
}
.no-slider-horizon-type3 .inner .slide-area .slider .swiper-wrapper .slide .visual {
  overflow: hidden;
}
.no-slider-horizon-type3 .inner .slide-area .control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2.4rem;
  margin-top: 4rem;
}
@media (max-width: 768px) {
  .no-slider-horizon-type3 .inner .slide-area .control {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-top: 2.4rem;
  }
}
.no-slider-horizon-type3 .inner .slide-area .control .scrollbar {
  position: relative;
  height: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--clr-gray-100);
}
.no-slider-horizon-type3 .inner .slide-area .control .scrollbar .swiper-scrollbar-drag {
  height: 100%;
  border-radius: inherit;
  background-color: var(--clr-gray-900);
}
.no-slider-horizon-type3 .inner .slide-area .control .arrows {
  display: flex;
  gap: 1.2rem;
}
@media (max-width: 768px) {
  .no-slider-horizon-type3 .inner .slide-area .control .arrows {
    display: none;
  }
}
.no-slider-horizon-type3 .inner .slide-area .control .arrows .arrow {
  display: inline-flex;
  width: 5.6rem;
  height: 5.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-gray-300);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
@media (max-width: 768px) {
  .no-slider-horizon-type3 .inner .slide-area .control .arrows .arrow {
    width: 4.8rem;
    height: 4.8rem;
  }
}
.no-slider-horizon-type3 .inner .slide-area .control .arrows .arrow svg {
  width: 2.6rem;
  height: 2.6rem;
}
.no-slider-horizon-type3 .inner .slide-area .control .arrows .arrow:hover {
  border-color: var(--clr-gray-900);
  background-color: var(--clr-gray-900);
  color: var(--clr-base-white);
}

.no-slider-horizon-type4 {
  position: relative;
  overflow: hidden;
}
.no-slider-horizon-type4 .inner {
  display: flex;
  flex-direction: column;
}
.no-slider-horizon-type4 .inner .top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}
@media (max-width: 768px) {
  .no-slider-horizon-type4 .inner .top {
    display: block;
  }
}
.no-slider-horizon-type4 .inner .top:has(.intro.--tac) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.no-slider-horizon-type4 .inner .top:has(.intro.--tac) .intro {
  margin-right: auto;
  margin-left: auto;
}
.no-slider-horizon-type4 .inner .top:has(.intro.--tac) .no-btn {
  align-self: center;
}
.no-slider-horizon-type4 .inner .slide-area {
  margin-right: calc(var(--gutter) * -1);
  margin-left: calc(var(--gutter) * -1);
}
.no-slider-horizon-type4 .inner .slide-area .slider {
  --slider-horizon-type4-static-gap: 3.2rem;
  overflow: visible;
}
@media (max-width: 768px) {
  .no-slider-horizon-type4 .inner .slide-area .slider {
    --slider-horizon-type4-static-gap: 1.6rem;
  }
}
.no-template-preview .no-slider-horizon-type4 .inner .slide-area .slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-slider-horizon-type4 .inner .slide-area .slider:not(.swiper-initialized) .swiper-wrapper {
  gap: var(--slider-horizon-type4-static-gap);
}
.no-slider-horizon-type4 .inner .slide-area .slider .swiper-wrapper .slide {
  width: clamp(24rem, 9.0614886731vw + 20.6019417476rem, 38rem);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@media (max-width: 768px) {
  .no-slider-horizon-type4 .inner .slide-area .slider .swiper-wrapper .slide {
    width: calc(100% - var(--spacing-5xl));
  }
}
.no-slider-horizon-type4 .inner .slide-area .slider .swiper-wrapper .slide .visual {
  overflow: hidden;
}
.no-slider-horizon-type4 .inner .slide-area .slider .swiper-wrapper .slide.swiper-slide-active {
  transform: translateY(-3.2rem);
  opacity: 1;
}
@media (max-width: 768px) {
  .no-slider-horizon-type4 .inner .slide-area .slider .swiper-wrapper .slide.swiper-slide-active {
    transform: none;
  }
}
.no-slider-horizon-type4 .inner .slide-area .slider .swiper-wrapper .slide.swiper-slide-prev, .no-slider-horizon-type4 .inner .slide-area .slider .swiper-wrapper .slide.swiper-slide-next {
  opacity: 0.92;
}

.no-slider-horizon-type5 {
  position: relative;
  overflow: hidden;
}
.no-slider-horizon-type5 .inner {
  display: flex;
  flex-direction: column;
}
.no-slider-horizon-type5 .inner .top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}
@media (max-width: 768px) {
  .no-slider-horizon-type5 .inner .top {
    display: block;
  }
}
.no-slider-horizon-type5 .inner .top:has(.intro.--tac) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.no-slider-horizon-type5 .inner .top:has(.intro.--tac) .intro {
  margin-right: auto;
  margin-left: auto;
}
.no-slider-horizon-type5 .inner .top:has(.intro.--tac) .no-btn {
  align-self: center;
}
.no-slider-horizon-type5 .inner .slide-area {
  position: relative;
  margin-right: calc(var(--gutter) * -1);
  margin-left: calc(var(--gutter) * -1);
}
.no-slider-horizon-type5 .inner .slide-area .arrow {
  position: absolute;
  top: 32%;
  z-index: 3;
  display: inline-flex;
  width: 7.2rem;
  height: 7.2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-gray-100);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
@media (max-width: 768px) {
  .no-slider-horizon-type5 .inner .slide-area .arrow {
    top: 28%;
    width: 5.6rem;
    height: 5.6rem;
  }
}
.no-slider-horizon-type5 .inner .slide-area .arrow svg {
  width: 2.8rem;
  height: 2.8rem;
}
.no-slider-horizon-type5 .inner .slide-area .arrow:hover {
  border-color: var(--clr-gray-900);
  background-color: var(--clr-gray-900);
  color: var(--clr-base-white);
}
.no-slider-horizon-type5 .inner .slide-area .arrow.prev {
  left: var(--gutter);
}
.no-slider-horizon-type5 .inner .slide-area .arrow.next {
  right: var(--gutter);
}
.no-slider-horizon-type5 .inner .slide-area .slider {
  --slider-horizon-type5-static-gap: 2.4rem;
  overflow: visible;
}
@media (max-width: 768px) {
  .no-slider-horizon-type5 .inner .slide-area .slider {
    --slider-horizon-type5-static-gap: 1.6rem;
  }
}
.no-template-preview .no-slider-horizon-type5 .inner .slide-area .slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-slider-horizon-type5 .inner .slide-area .slider:not(.swiper-initialized) .swiper-wrapper {
  gap: var(--slider-horizon-type5-static-gap);
}
.no-slider-horizon-type5 .inner .slide-area .slider .swiper-wrapper .slide {
  width: clamp(32rem, 16.8284789644vw + 25.6893203883rem, 58rem);
}
@media (max-width: 768px) {
  .no-slider-horizon-type5 .inner .slide-area .slider .swiper-wrapper .slide {
    width: calc(100% - var(--spacing-4xl));
  }
}
.no-slider-horizon-type5 .inner .slide-area .slider .swiper-wrapper .slide:hover .slide-link .visual img, .no-slider-horizon-type5 .inner .slide-area .slider .swiper-wrapper .slide:focus-within .slide-link .visual img {
  transform: translate(-50%, -50%) scale(1.05);
}
.no-slider-horizon-type5 .inner .slide-area .slider .swiper-wrapper .slide .slide-link {
  color: inherit;
}
.no-slider-horizon-type5 .inner .slide-area .slider .swiper-wrapper .slide .slide-link .visual {
  overflow: hidden;
}
.no-slider-horizon-type5 .inner .slide-area .slider .swiper-wrapper .slide .slide-link .visual img {
  transform-origin: center;
  transition: transform 0.3s ease;
}

.no-slider-pin-type1 {
  position: relative;
  overflow: hidden;
}
.no-slider-pin-type1 .conwrap {
  --pin-slides: 3;
  position: relative;
  width: 100%;
  height: calc(var(--pin-slides) * 100vh);
  overflow: hidden;
}
@media (max-width: 768px) {
  .no-slider-pin-type1 .conwrap {
    height: auto;
  }
}
.no-slider-pin-type1 .conwrap .boxwrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
}
@media (max-width: 768px) {
  .no-slider-pin-type1 .conwrap .boxwrap {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 100svh;
  }
}
.no-slider-pin-type1 .conwrap .boxwrap:not(:first-child) {
  clip-path: inset(100% 0 0 0);
}
@media (max-width: 768px) {
  .no-slider-pin-type1 .conwrap .boxwrap:not(:first-child) {
    clip-path: none;
  }
}
.no-slider-pin-type1 .conwrap .boxwrap:nth-child(1) {
  z-index: 1;
}
.no-slider-pin-type1 .conwrap .boxwrap:nth-child(2) {
  z-index: 2;
}
.no-slider-pin-type1 .conwrap .boxwrap:nth-child(3) {
  z-index: 3;
}
.no-slider-pin-type1 .conwrap .boxwrap:nth-child(4) {
  z-index: 4;
}
.no-slider-pin-type1 .conwrap .boxwrap:nth-child(5) {
  z-index: 5;
}
.no-slider-pin-type1 .conwrap .boxwrap:nth-child(6) {
  z-index: 6;
}
.no-slider-pin-type1 .conwrap .boxwrap:nth-child(7) {
  z-index: 7;
}
.no-slider-pin-type1 .conwrap .boxwrap:nth-child(8) {
  z-index: 8;
}
.no-slider-pin-type1 .conwrap .boxwrap .slide-link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
}
.no-slider-pin-type1 .conwrap .boxwrap .bg {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
}
.no-slider-pin-type1 .conwrap .boxwrap .bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.no-slider-pin-type1 .conwrap .boxwrap .con {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.no-slider-pin-type1 .conwrap .boxwrap .sticky {
  position: relative;
  height: 100%;
  padding-top: clamp(9.6rem, 4.142394822vw + 8.0466019417rem, 16rem);
  padding-bottom: clamp(9.6rem, 4.142394822vw + 8.0466019417rem, 16rem);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--spacing-xl);
}
.no-slider-pin-type1 .conwrap .boxwrap .count {
  align-self: start;
  letter-spacing: 0.04em;
}
.no-slider-pin-type1 .conwrap .boxwrap .count .count-sep,
.no-slider-pin-type1 .conwrap .boxwrap .count .count-total {
  opacity: 0.6;
}
.no-slider-pin-type1 .conwrap .boxwrap .inner {
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}
.no-slider-pin-type1 .conwrap .boxwrap .txtarea {
  flex: 1 1 auto;
  max-width: 64rem;
}
.no-slider-pin-type1 .conwrap .boxwrap .imgarea {
  flex: 0 0 auto;
  width: 30%;
  max-width: 38rem;
}
.no-slider-pin-type1 .conwrap .boxwrap .imgarea[hidden] {
  display: none;
}
.no-slider-pin-type1.text-top .conwrap .boxwrap .sticky .inner {
  align-self: start;
}
.no-slider-pin-type1.text-middle .conwrap .boxwrap .sticky .inner {
  align-self: center;
}
.no-template-preview .canvas > .no-slider-pin-type1, .admin-cms-live .no-slider-pin-type1 {
  aspect-ratio: 16/9;
}
.no-template-preview .canvas > .no-slider-pin-type1 .conwrap, .admin-cms-live .no-slider-pin-type1 .conwrap {
  height: 100%;
}
.no-template-preview .canvas > .no-slider-pin-type1 .conwrap .boxwrap, .admin-cms-live .no-slider-pin-type1 .conwrap .boxwrap {
  height: 100%;
}
.no-template-preview .canvas > .no-slider-pin-type1 .conwrap .boxwrap:not(:first-child), .admin-cms-live .no-slider-pin-type1 .conwrap .boxwrap:not(:first-child) {
  display: none;
}

.no-slider-quote-type1 {
  position: relative;
  overflow: hidden;
}
.no-slider-quote-type1 .inner .top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}
@media (max-width: 768px) {
  .no-slider-quote-type1 .inner .top {
    display: block;
  }
}
.no-slider-quote-type1 .inner .top:has(.intro.--tac) {
  flex-direction: column;
  align-items: stretch;
}
.no-slider-quote-type1 .inner .top:has(.intro.--tac) .intro {
  margin-right: auto;
  margin-left: auto;
}
.no-slider-quote-type1 .inner .top:has(.intro.--tac) .control {
  justify-content: center;
}
.no-slider-quote-type1 .inner .top .control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--spacing-sm);
}
@media (max-width: 768px) {
  .no-slider-quote-type1 .inner .top .control {
    margin-top: var(--spacing-2xl);
  }
}
.no-slider-quote-type1 .inner .top .control .arrow {
  display: inline-flex;
  width: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
  height: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-gray-100);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.no-slider-quote-type1 .inner .top .control .arrow svg {
  width: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
  height: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
}
.no-slider-quote-type1 .inner .top .control .arrow:hover {
  border-color: var(--clr-gray-900);
  background-color: var(--clr-gray-900);
  color: var(--clr-base-white);
}
.no-slider-quote-type1 .inner .quote-wrap .slider {
  --slider-quote-type1-static-gap: 2.4rem;
  overflow: visible;
}
@media (max-width: 768px) {
  .no-slider-quote-type1 .inner .quote-wrap .slider {
    --slider-quote-type1-static-gap: 1.6rem;
  }
}
.no-template-preview .no-slider-quote-type1 .inner .quote-wrap .slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-slider-quote-type1 .inner .quote-wrap .slider:not(.swiper-initialized) .swiper-wrapper {
  gap: var(--slider-quote-type1-static-gap);
}
.no-slider-quote-type1 .inner .quote-wrap .slider .swiper-wrapper {
  align-items: stretch;
}
.no-slider-quote-type1 .inner .quote-wrap .slider .swiper-wrapper .slide {
  width: calc((100% - var(--slider-quote-type1-static-gap) * 2) / 3);
  height: auto;
}
@media (max-width: 768px) {
  .no-slider-quote-type1 .inner .quote-wrap .slider .swiper-wrapper .slide {
    width: 100%;
  }
}
.no-slider-quote-type1 .inner .quote-wrap .slider .swiper-wrapper .slide .quote-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--clr-gray-100);
}
.no-slider-quote-type1 .inner .quote-wrap .slider .swiper-wrapper .slide .quote-card .visual {
  width: clamp(6.4rem, 1.5533980583vw + 5.8174757282rem, 8.8rem);
  overflow: hidden;
}
.no-slider-quote-type1.loop-off {
  position: relative;
}
.no-slider-quote-type1[data-tp-section-tone=dark] .inner .top .control .arrow {
  border-color: var(--clr-white-alpha-30);
  background-color: transparent;
  color: var(--clr-base-white);
}
.no-slider-quote-type1[data-tp-section-tone=dark] .inner .top .control .arrow:hover {
  border-color: var(--clr-base-white);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
}
.no-slider-quote-type1[data-tp-section-tone=dark] .inner .quote-wrap .slider .swiper-wrapper .slide .quote-card {
  border-color: var(--clr-white-alpha-20);
  background-color: var(--clr-black-bg-100);
}
.no-slider-quote-type1[data-tp-section-tone=dark] .inner .quote-wrap .slider .swiper-wrapper .slide .quote-card .slide-title {
  color: var(--clr-base-white);
}
.no-slider-quote-type1[data-tp-section-tone=dark] .inner .quote-wrap .slider .swiper-wrapper .slide .quote-card .slide-text {
  color: var(--clr-gray-300);
}

.no-slider-stack-type1 {
  position: relative;
  overflow: hidden;
}
.no-slider-stack-type1 .inner .top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}
@media (max-width: 768px) {
  .no-slider-stack-type1 .inner .top {
    display: block;
  }
}
.no-slider-stack-type1 .inner .top:has(.intro.--tac) {
  flex-direction: column;
  align-items: stretch;
}
.no-slider-stack-type1 .inner .top:has(.intro.--tac) .intro {
  margin-right: auto;
  margin-left: auto;
}
.no-slider-stack-type1 .inner .top:has(.intro.--tac) .control {
  justify-content: center;
}
.no-slider-stack-type1 .inner .top .control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--spacing-sm);
}
@media (max-width: 768px) {
  .no-slider-stack-type1 .inner .top .control {
    margin-top: var(--spacing-2xl);
  }
}
.no-slider-stack-type1 .inner .top .control .arrow {
  display: inline-flex;
  width: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
  height: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-gray-100);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.no-slider-stack-type1 .inner .top .control .arrow svg {
  width: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
  height: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
}
.no-slider-stack-type1 .inner .top .control .arrow:hover {
  border-color: var(--clr-gray-900);
  background-color: var(--clr-gray-900);
  color: var(--clr-base-white);
}
.no-slider-stack-type1 .inner .slide-area .slider {
  --slider-stack-type1-static-gap: 2.4rem;
  overflow: visible;
}
@media (max-width: 768px) {
  .no-slider-stack-type1 .inner .slide-area .slider {
    --slider-stack-type1-static-gap: 1.6rem;
  }
}
.no-template-preview .no-slider-stack-type1 .inner .slide-area .slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-slider-stack-type1 .inner .slide-area .slider:not(.swiper-initialized) .swiper-wrapper {
  gap: var(--slider-stack-type1-static-gap);
}
.no-slider-stack-type1 .inner .slide-area .slider .swiper-wrapper {
  align-items: stretch;
}
.no-slider-stack-type1 .inner .slide-area .slider .swiper-wrapper .slide {
  width: calc((100% - var(--slider-stack-type1-static-gap) * 2) / 3);
  opacity: 0.45;
  transform: translateY(var(--spacing-xl));
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (max-width: 768px) {
  .no-slider-stack-type1 .inner .slide-area .slider .swiper-wrapper .slide {
    width: 100%;
    opacity: 1;
    transform: translateY(0);
  }
}
.no-slider-stack-type1 .inner .slide-area .slider .swiper-wrapper .slide.swiper-slide-active {
  opacity: 1;
  transform: translateY(0);
}
.no-slider-stack-type1 .inner .slide-area .slider .swiper-wrapper .slide:hover .slide-link .visual img, .no-slider-stack-type1 .inner .slide-area .slider .swiper-wrapper .slide:focus-within .slide-link .visual img {
  transform: translate(-50%, -50%) scale(1.05);
}
.no-slider-stack-type1 .inner .slide-area .slider .swiper-wrapper .slide .visual {
  overflow: hidden;
}
.no-slider-stack-type1 .inner .slide-area .slider .swiper-wrapper .slide .visual img {
  transform-origin: center;
  transition: transform 0.3s ease;
}
.no-slider-stack-type1 .inner .slide-area .slider .swiper-wrapper .slide .panel {
  position: relative;
  margin: calc(var(--spacing-4xl) * -1) var(--spacing-lg) 0;
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
  .no-slider-stack-type1 .inner .slide-area .slider .swiper-wrapper .slide .panel {
    margin-right: var(--spacing-md);
    margin-left: var(--spacing-md);
  }
}
.no-slider-stack-type1 .inner .slide-area .slider .swiper-wrapper .slide .slide-link {
  color: inherit;
}
.no-slider-stack-type1.loop-off {
  position: relative;
}
.no-slider-stack-type1[data-tp-section-tone=dark] .inner .top .control .arrow {
  border-color: var(--clr-white-alpha-30);
  background-color: transparent;
  color: var(--clr-base-white);
}
.no-slider-stack-type1[data-tp-section-tone=dark] .inner .top .control .arrow:hover {
  border-color: var(--clr-base-white);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
}
.no-slider-stack-type1[data-tp-section-tone=dark] .inner .slide-area .slider .swiper-wrapper .slide .panel {
  background-color: var(--clr-black-bg-100);
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.32);
}
.no-slider-stack-type1[data-tp-section-tone=dark] .inner .slide-area .slider .swiper-wrapper .slide .panel .slide-title {
  color: var(--clr-base-white);
}
.no-slider-stack-type1[data-tp-section-tone=dark] .inner .slide-area .slider .swiper-wrapper .slide .panel .slide-text {
  color: var(--clr-gray-300);
}

.no-slider-tabs-type1 {
  position: relative;
  overflow: hidden;
}
.no-slider-tabs-type1 .inner:has(.intro.--tac) .intro {
  margin-right: auto;
  margin-left: auto;
}
.no-slider-tabs-type1 .inner:has(.intro.--tac) .stage .tabs {
  justify-content: center;
}
.no-slider-tabs-type1 .inner .stage .tabs-slider {
  overflow: visible;
}
.no-slider-tabs-type1 .inner .stage .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
@media (max-width: 768px) {
  .no-slider-tabs-type1 .inner .stage .tabs {
    flex-wrap: nowrap;
    gap: 0;
  }
}
.no-slider-tabs-type1 .inner .stage .tabs li {
  flex: 0 0 auto;
  width: auto;
}
.no-slider-tabs-type1 .inner .stage .tabs li .tab {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  border: 1px solid var(--clr-gray-100);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-700);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
@media (max-width: 768px) {
  .no-slider-tabs-type1 .inner .stage .tabs li .tab {
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-md);
  }
}
.no-slider-tabs-type1 .inner .stage .tabs li .tab:hover, .no-slider-tabs-type1 .inner .stage .tabs li .tab.is-active {
  border-color: var(--clr-gray-900);
  background-color: var(--clr-gray-900);
  color: var(--clr-base-white);
}
.no-slider-tabs-type1 .inner .stage .tabs li .tab .tab-index {
  color: var(--clr-primary-main);
}
.no-slider-tabs-type1 .inner .stage .tabs li .tab .tab-text {
  white-space: nowrap;
}
.no-slider-tabs-type1 .inner .stage .slider {
  --slider-tabs-type1-static-gap: 2.4rem;
  overflow: visible;
  margin-top: var(--spacing-xl);
}
@media (max-width: 768px) {
  .no-slider-tabs-type1 .inner .stage .slider {
    --slider-tabs-type1-static-gap: 1.6rem;
  }
}
.no-template-preview .no-slider-tabs-type1 .inner .stage .slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-slider-tabs-type1 .inner .stage .slider:not(.swiper-initialized) .swiper-wrapper {
  gap: var(--slider-tabs-type1-static-gap);
}
.no-slider-tabs-type1 .inner .stage .slider .swiper-wrapper {
  align-items: stretch;
}
.no-slider-tabs-type1 .inner .stage .slider .swiper-wrapper .slide {
  width: 100%;
  align-items: center;
}
.no-slider-tabs-type1 .inner .stage .slider .swiper-wrapper .slide .visual {
  overflow: hidden;
}
.no-slider-tabs-type1 .inner .stage .slider .swiper-wrapper .slide .text-content {
  align-self: center;
}
.no-slider-tabs-type1[data-tp-section-tone=dark] .inner .stage .tabs li .tab {
  border-color: var(--clr-white-alpha-30);
  background-color: transparent;
  color: var(--clr-base-white);
}
.no-slider-tabs-type1[data-tp-section-tone=dark] .inner .stage .tabs li .tab:hover, .no-slider-tabs-type1[data-tp-section-tone=dark] .inner .stage .tabs li .tab.is-active {
  border-color: var(--clr-base-white);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
}
.no-slider-tabs-type1[data-tp-section-tone=dark] .inner .stage .slider .swiper-wrapper .slide .text-content .slide-title {
  color: var(--clr-base-white);
}
.no-slider-tabs-type1[data-tp-section-tone=dark] .inner .stage .slider .swiper-wrapper .slide .text-content .slide-text {
  color: var(--clr-gray-300);
}

.no-slider-timeline-type1 {
  position: relative;
  overflow: hidden;
}
.no-slider-timeline-type1 .inner:has(.intro.--tac) .intro {
  margin-right: auto;
  margin-left: auto;
}
.no-slider-timeline-type1 .inner .stage {
  align-items: start;
}
.no-slider-timeline-type1 .inner .stage .timeline .steps li .step {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--spacing-md);
  border: 1px solid var(--clr-gray-100);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-700);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.no-slider-timeline-type1 .inner .stage .timeline .steps li .step:hover, .no-slider-timeline-type1 .inner .stage .timeline .steps li .step.is-active {
  border-color: var(--clr-gray-900);
  background-color: var(--clr-gray-900);
  color: var(--clr-base-white);
}
.no-slider-timeline-type1 .inner .stage .timeline .steps li .step .step-number {
  color: var(--clr-primary-main);
}
.no-slider-timeline-type1 .inner .stage .timeline .steps li .step .step-text {
  white-space: nowrap;
}
.no-slider-timeline-type1 .inner .stage .slider {
  --slider-timeline-type1-static-gap: 2.4rem;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 768px) {
  .no-slider-timeline-type1 .inner .stage .slider {
    --slider-timeline-type1-static-gap: 1.6rem;
  }
}
.no-template-preview .no-slider-timeline-type1 .inner .stage .slider:not(.swiper-initialized) .swiper-wrapper, .admin-cms-live .no-slider-timeline-type1 .inner .stage .slider:not(.swiper-initialized) .swiper-wrapper {
  gap: var(--slider-timeline-type1-static-gap);
}
.no-template-preview .no-slider-timeline-type1 .inner .stage .slider:not(.swiper-initialized) .swiper-wrapper .slide, .admin-cms-live .no-slider-timeline-type1 .inner .stage .slider:not(.swiper-initialized) .swiper-wrapper .slide {
  flex-shrink: 0;
  width: 100%;
}
.no-slider-timeline-type1 .inner .stage .slider .swiper-wrapper {
  align-items: stretch;
}
.no-slider-timeline-type1 .inner .stage .slider .swiper-wrapper .slide .visual {
  overflow: hidden;
}
.no-slider-timeline-type1[data-tp-section-tone=dark] .inner .stage .timeline .steps li .step {
  border-color: var(--clr-white-alpha-30);
  background-color: transparent;
  color: var(--clr-base-white);
}
.no-slider-timeline-type1[data-tp-section-tone=dark] .inner .stage .timeline .steps li .step:hover, .no-slider-timeline-type1[data-tp-section-tone=dark] .inner .stage .timeline .steps li .step.is-active {
  border-color: var(--clr-base-white);
  background-color: var(--clr-base-white);
  color: var(--clr-gray-900);
}

.no-slider-type1 {
  position: relative;
  overflow: hidden;
}
.no-slider-type1 .desktop {
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .no-slider-type1 .desktop {
    display: none;
  }
}
.no-slider-type1 .desktop .wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.4rem;
}
.no-slider-type1 .desktop .wrap .main {
  grid-column: span 11;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  align-items: stretch;
}
.no-slider-type1 .desktop .wrap .main .visual {
  grid-column: span 5;
}
.no-slider-type1 .desktop .wrap .main .visual .track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% * var(--slider-type1-slide-count, 1));
  display: flex;
  flex-direction: column;
  transition: transform 0.9s ease;
}
.no-slider-type1 .desktop .wrap .main .visual .track img {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 0 0 calc(100% / var(--slider-type1-slide-count, 1));
}
.no-slider-type1 .desktop .wrap .main .txt-list {
  grid-column: 7/span 5;
  justify-self: end;
  position: relative;
  width: 100%;
  height: 100%;
}
.no-slider-type1 .desktop .wrap .main .txt-list .slide {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-30%);
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s ease, opacity 0.3s ease;
}
.no-slider-type1 .desktop .wrap .main .txt-list .slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
  z-index: 2;
}
.no-slider-type1 .desktop .wrap .main .txt-list .slide .slide-inner .keyword-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
}
.no-slider-type1 .desktop .wrap .main .txt-list .slide .slide-inner .keyword-list .keyword {
  border: 1px solid transparent;
  border-radius: 5.5rem;
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--clr-white-bg-50);
  color: var(--clr-gray-700);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.no-slider-type1 .desktop .wrap .indicator-list {
  grid-column: span 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2rem);
}
.no-slider-type1 .desktop .wrap .indicator-list li {
  display: flex;
  cursor: pointer;
}
.no-slider-type1 .desktop .wrap .indicator-list li .dot {
  width: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
  height: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: var(--clr-gray-600);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.no-slider-type1 .desktop .wrap .indicator-list li.active .dot {
  background-color: var(--clr-primary-main);
}
.no-slider-type1 .mobile {
  display: none;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .no-slider-type1 .mobile {
    display: block;
  }
}
.no-slider-type1 .mobile .mobile-slider {
  width: 100%;
  overflow: hidden;
}
.no-slider-type1 .mobile .mobile-slider .swiper-wrapper {
  align-items: stretch;
}
.no-slider-type1 .mobile .mobile-slider .swiper-wrapper .swiper-slide {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.no-slider-type1 .mobile .txt-list--m {
  position: relative;
  width: 100%;
  margin-top: 2.4rem;
}
.no-slider-type1 .mobile .txt-list--m .slide {
  position: relative;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.no-slider-type1 .mobile .txt-list--m .slide.active {
  display: block;
  opacity: 1;
}
.no-slider-type1 .mobile .txt-list--m .slide .slide-inner .keyword-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
}
.no-slider-type1 .mobile .txt-list--m .slide .slide-inner .keyword-list .keyword {
  border: 1px solid transparent;
  border-radius: 5.5rem;
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--clr-white-bg-50);
  color: var(--clr-gray-700);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.no-slider-type1 .mobile .swiper-pagination {
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-md);
  position: relative;
  left: auto;
  margin-top: 4rem;
}
.no-slider-type1 .mobile .swiper-pagination .swiper-pagination-bullet {
  width: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
  height: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
  margin: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: var(--clr-gray-300);
  opacity: 1;
}
.no-slider-type1 .mobile .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--clr-base-white);
  border: 0.3rem solid var(--clr-primary-900);
}
.no-slider-type1[data-tp-section-tone=dark] .desktop .wrap .main .txt-list .slide .slide-inner .keyword-list .keyword {
  border-color: var(--clr-white-alpha-40);
  background-color: transparent;
  color: var(--clr-base-white);
}
.no-slider-type1[data-tp-section-tone=dark] .desktop .wrap .indicator-list li .dot {
  border-color: var(--clr-base-white);
  background-color: transparent;
}
.no-slider-type1[data-tp-section-tone=dark] .desktop .wrap .indicator-list li.active .dot {
  border-color: var(--clr-primary-main);
  background-color: var(--clr-primary-main);
}
.no-slider-type1[data-tp-section-tone=dark] .mobile .txt-list--m .slide .slide-inner .keyword-list .keyword {
  border-color: var(--clr-base-white);
  background-color: transparent;
  color: var(--clr-base-white);
}
.no-slider-type1[data-tp-section-tone=dark] .mobile .swiper-pagination .swiper-pagination-bullet {
  border-color: var(--clr-base-white);
  background-color: transparent;
}
.no-slider-type1[data-tp-section-tone=dark] .mobile .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid var(--clr-primary-main);
  background-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: #0076cb;
  --admin-primary-rgb: 0, 118, 203;
  --admin-primary-hover: #0066b2;
  --admin-primary-light: #f0f8ff;
  --admin-primary-border: #dff0ff;
  --admin-primary-text: #0066b2;
  --admin-on-primary: #ffffff;
  --admin-header-notifications-pill-bg: rgba(255, 255, 255, 0.92);
  --admin-header-notifications-pill-fg: #1a1a2e;
  --admin-header-notifications-pill-border: rgba(255, 255, 255, 0.65);
  --admin-header-notifications-pill-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  --admin-accent-violet: #5b21b6;
  --admin-accent-violet-bg: #ede9fe;
  --admin-accent-violet-text: #4c1d95;
  --admin-accent-purple: #6d28d9;
  --admin-accent-purple-bg: #f5f3ff;
  --admin-accent-purple-text: #5b21b6;
  --admin-accent-fuchsia: #a21caf;
  --admin-accent-fuchsia-bg: #fae8ff;
  --admin-accent-fuchsia-text: #86198f;
  --admin-accent-pink: #be185d;
  --admin-accent-pink-bg: #fce7f3;
  --admin-accent-pink-text: #9d174d;
  --admin-accent-rose: #e11d48;
  --admin-accent-rose-bg: #ffe4e6;
  --admin-accent-rose-text: #be123c;
  --admin-accent-coral: #ea580c;
  --admin-accent-coral-bg: #ffedd5;
  --admin-accent-coral-text: #c2410c;
  --admin-accent-cyan: #0e7490;
  --admin-accent-cyan-bg: #ecfeff;
  --admin-accent-cyan-text: #155e75;
  --admin-accent-teal: #0f766e;
  --admin-accent-teal-bg: #ccfbf1;
  --admin-accent-teal-text: #115e59;
  --admin-drawer-width: 220px;
  --admin-drawer-mini-width: 68px;
  --admin-sub-drawer-width: 220px;
  --admin-header-height: 6.4rem;
  --admin-body-bg: #f4f6f8;
  --admin-main-bg: #ffffff;
  --admin-card-bg: #ffffff;
  --admin-bg-soft: #f9fafb;
  --admin-header-bg: linear-gradient(135deg, #0066b2 0%, #0a4370 50%, #055187 100%);
  --admin-header-bg-hover: rgba(255, 255, 255, 0.1);
  --admin-drawer-bg: #ffffff;
  --admin-drawer-border: #e5e7eb;
  --admin-drawer-text: #4b5563;
  --admin-drawer-text-active: #111827;
  --admin-drawer-hover-bg: #f3f4f6;
  --admin-drawer-active-bg: #f0f8ff;
  --admin-drawer-active-bar: 3px solid #0076cb;
  --admin-drawer-active-accent: #0066b2;
  --admin-drawer-focus-ring: rgba(0, 118, 203, 0.25);
  --admin-drawer-summary-open-bg: #f9fafb;
  --admin-drawer-summary-open-border: #f3f4f6;
  --admin-drawer-sublink-active-bg: #f0f8ff;
  --admin-drawer-sublink-active-bar: 3px solid #0076cb;
  --admin-drawer-top-bg: #f9fafb;
  --admin-drawer-top-border: #e5e7eb;
  --admin-drawer-top-text: #374151;
  --admin-drawer-avatar-bg: #0076cb;
  --admin-border: #d1d5db;
  --admin-border-light: #e5e7eb;
  --admin-border-strong: #9ca3af;
  --admin-border-focus: #0a97ed;
  --admin-outline: rgba(0, 0, 0, 0.1);
  --admin-outline-variant: rgba(0, 0, 0, 0.06);
  --admin-fs-xs: 1.1rem;
  --admin-fs-sm: 1.2rem;
  --admin-fs-base: 1.3rem;
  --admin-fs-body: 1.4rem;
  --admin-fs-body-lg: 1.4rem;
  --admin-fs-lg: 1.5rem;
  --admin-fs-xl: 1.6rem;
  --admin-fs-2xl: 1.8rem;
  --admin-fs-display: 2.4rem;
  --admin-fs-menu: var(--admin-fs-lg);
  --admin-fs-title: var(--admin-fs-2xl);
  --admin-fs-subtitle: 2.0rem;
  --admin-fs-body-xl: var(--admin-fs-body-lg);
  --admin-text: #111827;
  --admin-text-secondary: #6b7280;
  --admin-text-muted: #9ca3af;
  --admin-text-disabled: #d1d5db;
  --admin-text-tertiary: #4b5563;
  --admin-text-inverse: #f9fafb;
  --admin-state-hover: rgba(0, 0, 0, 0.04);
  --admin-state-focus: rgba(0, 0, 0, 0.08);
  --admin-state-pressed: rgba(0, 0, 0, 0.1);
  --admin-state-drag: rgba(0, 0, 0, 0.12);
  --admin-focus-ring: 0 0 0 3px #dff0ff;
  --admin-focus-ring-border: 1px solid #0a97ed;
  --admin-focus-ring-offset: 0px;
  --admin-error-focus-ring: 0 0 0 3px #fee2e2;
  --admin-duration-short: 150ms;
  --admin-duration: 200ms;
  --admin-duration-long: 300ms;
  --admin-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --admin-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --admin-radius-xs: 3px;
  --admin-radius-sm: 5px;
  --admin-radius: 8px;
  --admin-radius-lg: 10px;
  --admin-radius-full: 9999px;
  --admin-size-input-height: 3.6rem;
  --admin-size-icon-sm: 1.125rem;
  --admin-size-icon: 1.25rem;
  --admin-size-icon-lg: 2.5rem;
  --admin-size-select-arrow: 2.25rem;
  --admin-size-scrollbar: 0.3rem;
  --admin-size-dropdown-head-bg: 5.6rem;
  --admin-size-editor-min-height: 18rem;
  --admin-space-3xs: 0.2rem;
  --admin-space-2xs: 0.4rem;
  --admin-space-xs: 0.6rem;
  --admin-space-sm: 0.75rem;
  --admin-space: 1.0rem;
  --admin-space-md: 1.0rem;
  --admin-space-lg: 1.25rem;
  --admin-space-xl: 1.5rem;
  --admin-space-2xl: 2.0rem;
  --admin-space-3xl: 2.5rem;
  --admin-space-4xl: 3.0rem;
  --admin-space-main-y: 5rem;
  --admin-space-main-y-md: 3.6rem;
  --admin-space-main-y-sm: 3rem;
  --admin-section-action-gap: var(--admin-space-2xl);
  --admin-elevation-0: none;
  --admin-elevation-1: 0 1px 3px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  --admin-elevation-2: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --admin-elevation-3: 0 8px 30px rgba(0,0,0,0.10);
  --admin-shadow: var(--admin-elevation-1);
  --admin-shadow-card: var(--admin-elevation-2);
  --admin-surface: var(--admin-card-bg);
  --admin-surface-2: var(--admin-bg-soft);
  --admin-bg: var(--admin-body-bg);
  --admin-bg-secondary: var(--admin-main-bg);
  --admin-bg-subtle: var(--admin-bg-soft);
  --admin-text-primary: var(--admin-text);
  --admin-text-placeholder: var(--admin-text-muted);
  --admin-on-surface: var(--admin-text);
  --admin-on-surface-variant: var(--admin-text-secondary);
  --admin-danger: var(--admin-error);
  --admin-danger-bg: var(--admin-error-bg);
  --admin-warning: var(--admin-warn);
  --admin-warning-bg: var(--admin-warn-bg);
  --admin-warning-hover: var(--admin-warn-hover);
  --admin-on-error: var(--admin-on-primary);
  --admin-on-success: var(--admin-on-primary);
  --admin-on-warn: var(--admin-black);
  --admin-primary-soft: var(--admin-primary-light);
  --admin-primary-tint: var(--admin-primary-light);
  --admin-duration-base: var(--admin-duration);
  --admin-radius-md: var(--admin-radius);
  --admin-fs-2xs: 1.0rem;
  --admin-fs-md: var(--admin-fs-base);
  --admin-fs-body-sm: var(--admin-fs-sm);
  --admin-fs-3xl: 2.2rem;
  --admin-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --admin-font-mono: var(--admin-mono);
  --admin-shadow-md: var(--admin-elevation-2);
  --admin-shadow-lg: var(--admin-elevation-3);
  --admin-content-px: var(--admin-space-2xl);
  --admin-z-dropdown: 1000;
  --admin-modal-backdrop-bg: rgba(0, 0, 0, 0.6);
  --admin-modal-backdrop-blur: 4px;
  --admin-modal-backdrop-padding: var(--admin-space-lg);
  --admin-modal-backdrop-z: 10000;
  --admin-modal-box-bg: var(--admin-white);
  --admin-modal-box-radius: var(--admin-radius);
  --admin-modal-box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.08);
  --admin-modal-min-width: 26rem;
  --admin-modal-max-width: min(90vw, 36rem);
  --admin-modal-max-height: 85vh;
  --admin-modal-header-padding: var(--admin-space) var(--admin-space-lg);
  --admin-modal-header-border: 1px solid var(--admin-border);
  --admin-modal-title-fs: var(--admin-fs-body-lg);
  --admin-modal-title-fw: 600;
  --admin-modal-title-color: var(--admin-text);
  --admin-modal-close-size: 2rem;
  --admin-modal-close-radius: var(--admin-radius-sm);
  --admin-modal-close-color: var(--admin-text-muted);
  --admin-modal-close-hover-bg: var(--admin-grey-100);
  --admin-modal-close-hover-color: var(--admin-text);
  --admin-modal-close-focus-ring: 2px solid var(--admin-primary);
  --admin-modal-body-padding: var(--admin-space-xl) var(--admin-space-lg);
  --admin-modal-body-color: var(--admin-text-secondary);
  --admin-modal-body-fs: var(--admin-fs-body);
  --admin-modal-body-lh: 1.6;
  --admin-modal-footer-padding: var(--admin-space) var(--admin-space-lg);
  --admin-modal-footer-border: 1px solid var(--admin-border);
  --admin-modal-btn-padding: 0.5rem 1.25rem;
  --admin-modal-btn-radius: var(--admin-radius-sm);
  --admin-modal-btn-fs: var(--admin-fs-sm);
  --admin-modal-btn-border: 1px solid var(--admin-border);
  --admin-modal-btn-bg: var(--admin-white);
  --admin-modal-btn-color: var(--admin-text-secondary);
  --admin-modal-btn-hover-bg: var(--admin-grey-50);
  --admin-modal-btn-hover-border: var(--admin-grey-400);
  --admin-modal-btn-primary-bg: var(--admin-primary);
  --admin-modal-btn-primary-color: var(--admin-on-primary);
  --admin-modal-btn-primary-hover-bg: var(--admin-primary-hover);
  --admin-modal-duration: var(--admin-duration);
  --admin-theme-mode: light;
}

[data-theme=dark] {
  --admin-body-bg: #0b0d14;
  --admin-main-bg: #13161e;
  --admin-card-bg: #1c2032;
  --admin-bg-soft: #161a26;
  --admin-drawer-bg: #181c2a;
  --admin-drawer-border: #2c3050;
  --admin-drawer-text: #b8c0d4;
  --admin-drawer-text-active: #ffffff;
  --admin-drawer-hover-bg: #232740;
  --admin-drawer-active-bg: rgba(52, 175, 252, 0.18);
  --admin-drawer-active-bar: 3px solid #34affc;
  --admin-drawer-active-accent: #7bcafe;
  --admin-drawer-focus-ring: rgba(52, 175, 252, 0.35);
  --admin-drawer-summary-open-bg: rgba(255,255,255,0.04);
  --admin-drawer-summary-open-border: #2c3050;
  --admin-drawer-sublink-active-bg: rgba(52, 175, 252, 0.14);
  --admin-drawer-sublink-active-bar: 3px solid #7bcafe;
  --admin-drawer-top-bg: #111422;
  --admin-drawer-top-border: #2c3050;
  --admin-drawer-top-text: #dde3f0;
  --admin-drawer-avatar-bg: #0a97ed;
  --admin-border: #2c3050;
  --admin-border-light: #222640;
  --admin-border-strong: #3d4472;
  --admin-border-focus: #34affc;
  --admin-outline: rgba(255,255,255,0.07);
  --admin-outline-variant: rgba(255,255,255,0.04);
  --admin-text: #eef2fa;
  --admin-text-secondary: #a8b4cc;
  --admin-text-muted: #6e7b99;
  --admin-text-disabled: #3d4472;
  --admin-text-tertiary: #b4bdd4;
  --admin-text-inverse: #111827;
  --admin-state-hover: rgba(255,255,255,0.05);
  --admin-state-focus: rgba(255,255,255,0.08);
  --admin-state-pressed: rgba(255,255,255,0.1);
  --admin-state-drag: rgba(255,255,255,0.12);
  --admin-focus-ring: 0 0 0 3px rgba(52,175,252,0.25);
  --admin-focus-ring-border: 1px solid #34affc;
  --admin-error-focus-ring: 0 0 0 3px rgba(239,68,68,0.2);
  --admin-elevation-0: none;
  --admin-elevation-1: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
  --admin-elevation-2: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --admin-elevation-3: 0 8px 30px rgba(0,0,0,0.5);
  --admin-shadow: var(--admin-elevation-1);
  --admin-shadow-card: var(--admin-elevation-2);
  --admin-modal-box-bg: #1e2230;
  --admin-modal-btn-bg: #252838;
  --admin-modal-btn-color: #94a3b8;
  --admin-modal-btn-hover-bg: #2e3347;
  --admin-white: #1e2230;
  --admin-theme-mode: dark;
  --admin-grey-50: #252838;
  --admin-grey-100: #2e3347;
  --admin-grey-200: #3d4260;
  --admin-grey-300: #4a5072;
  --admin-grey-400: #64748b;
  --admin-grey-500: #8899aa;
  --admin-grey-600: #a0aec0;
  --admin-grey-700: #cbd5e1;
  --admin-grey-800: #e2e8f0;
  --admin-grey-900: #f1f5f9;
  --admin-header-notifications-pill-bg: rgba(255, 255, 255, 0.88);
  --admin-header-notifications-pill-fg: #1a1a2e;
  --admin-header-notifications-pill-border: rgba(255,255,255,0.55);
  --admin-header-notifications-pill-shadow: 0 1px 4px rgba(0,0,0,0.6);
  --admin-primary: #34affc;
  --admin-primary-rgb: 96, 165, 250;
  --admin-primary-hover: #7bcafe;
  --admin-on-primary: #ffffff;
  --admin-primary-light: rgba(52, 175, 252, 0.15);
  --admin-primary-border: rgba(52, 175, 252, 0.30);
  --admin-primary-text: #7bcafe;
  --admin-primary-dark: #7bcafe;
  --admin-text-muted: #8b9abf;
  --admin-error-bg: rgba(220, 38, 38, 0.15);
  --admin-error-text: #fca5a5;
  --admin-error-border: rgba(220, 38, 38, 0.35);
  --admin-success-bg: rgba(34, 197, 94, 0.13);
  --admin-success-text: #86efac;
  --admin-success-border: rgba(34, 197, 94, 0.30);
  --admin-warn-bg: rgba(234, 179, 8, 0.13);
  --admin-warn-text: #fde047;
  --admin-warn-border: rgba(234, 179, 8, 0.30);
  --admin-info-bg: rgba(59, 130, 246, 0.13);
  --admin-info-text: #93c5fd;
  --admin-premium-bg: rgba(249, 168, 37, 0.15);
  --admin-premium-text: #fcd34d;
  --admin-accent-violet-bg: rgba(91, 33, 182, 0.18);
  --admin-accent-violet-text: #c4b5fd;
  --admin-accent-teal-bg: rgba(15, 118, 110, 0.18);
  --admin-accent-teal-text: #5eead4;
  --admin-accent-coral-bg: rgba(234, 88, 12, 0.18);
  --admin-accent-coral-text: #fdba74;
}

.admin {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--admin-fs-body);
  line-height: 1.5;
  color: var(--admin-text);
  background: var(--admin-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 1024px) {
  .admin.admin--drawer-open {
    overflow: hidden;
  }
}

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

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

.admin__main {
  flex: 1;
  padding: var(--admin-space-main-y) var(--admin-space-2xl);
  background: var(--admin-body-bg);
  min-height: 0;
  overflow: auto;
}
@media (max-width: 1640px) {
  .admin__main {
    padding: var(--admin-space-main-y) var(--admin-space-2xl);
  }
}
@media (max-width: 1024px) {
  .admin__main {
    padding: var(--admin-space-main-y-md) var(--admin-space-2xl);
  }
}
@media (max-width: 768px) {
  .admin__main {
    padding: var(--admin-space-main-y-sm) var(--admin-space-2xl);
  }
}

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

.admin.admin--embed .admin__main--embed {
  min-height: 100vh;
  padding: var(--admin-space-lg) var(--admin-space-2xl);
}
.admin.admin--embed .admin__content--embed {
  max-width: 1200px;
  margin: 0 auto;
}

.admin--auth .admin__wrap {
  display: block;
}

.admin--auth .admin__content-wrap {
  margin-left: 0;
}

.admin-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--admin-modal-backdrop-bg);
  z-index: 85;
  opacity: 0;
  transition: opacity var(--admin-duration-long) var(--admin-ease);
}
@media (max-width: 1024px) {
  .admin-drawer-overlay {
    display: block;
    pointer-events: none;
  }
  .admin--drawer-open .admin-drawer-overlay {
    pointer-events: auto;
    opacity: 1;
  }
}

.admin__content-wrap::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--admin-duration-long) var(--admin-ease);
}

#admin-drawer[data-flyout-active] ~ .admin__content-wrap::after {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 1024px) {
  #admin-drawer[data-flyout-active] ~ .admin__content-wrap::after {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 1024px) {
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
html[data-admin-theme=light] body.admin-shell-v2,
html[data-theme=light] body.admin-shell-v2 {
  color-scheme: light;
  --figma-menu-row-hover: #eeeeee;
  --figma-menu-row-open: #eeeeee;
  --figma-menu-row-active: #e7edf9;
  --figma-menu-row-active-hover: #dce5f6;
  --figma-menu-row-active-text: #1f1f1f;
  --figma-menu-row-active-icon: #1f1f1f;
  --figma-floating-menu-bg: #ffffff;
  --figma-floating-menu-border: #d9d9d9;
  --figma-floating-menu-text: #1f1f1f;
  --figma-floating-menu-text-hover: #1f1f1f;
  --figma-floating-menu-label: #6b6b6b;
  --figma-badge-admin-bg: #e5f4ff;
  --figma-badge-admin-text: #0b5f9e;
  --figma-badge-dev-bg: #eeeeee;
  --figma-badge-dev-text: #5f5f5f;
  --figma-badge-free-bg: #e6e6e6;
  --figma-badge-free-text: #1f1f1f;
  --figma-notice-unread-bg: #fff5f5;
  --figma-notice-unread-text: #c81e1e;
  --figma-notice-unread-border: #f1b6b6;
  --figma-switch-off-bg: #ffffff;
  --figma-switch-off-border: #c7c7c7;
  --figma-switch-thumb-off-bg: #ffffff;
  --figma-switch-on-bg: #0d99ff;
  --figma-switch-on-border: #0d99ff;
  --figma-switch-thumb-on-bg: #ffffff;
}

html[data-admin-theme=dark] body.admin-shell-v2,
html[data-theme=dark] body.admin-shell-v2 {
  color-scheme: dark;
  --figma-switch-off-bg: #3a3a3a;
  --figma-switch-off-border: #8a8a8a;
  --figma-switch-thumb-off-bg: #4a4a4a;
  --figma-switch-on-bg: #7cc7f6;
  --figma-switch-on-border: #7cc7f6;
  --figma-switch-thumb-on-bg: #2c2c2c;
  --figma-notice-unread-bg: #3a2428;
  --figma-notice-unread-text: #ff9aa2;
  --figma-notice-unread-border: #6c343c;
}

html:has(body.admin-shell-v2)[data-admin-font-scale=sm] {
  font-size: 56.25%;
}

html:has(body.admin-shell-v2)[data-admin-font-scale=lg] {
  font-size: 63.75%;
}

body.admin-shell-v2 {
  --admin-shell-header-height: var(--figma-toolbar-height, 4.8rem);
  --admin-shell-sidebar-width: var(--figma-sidebar-width, 24rem);
  --admin-shell-sidebar-expanded-width: calc(var(--admin-shell-sidebar-width) + var(--admin-sub-drawer-width));
  --admin-shell-content-max-width: none;
  --admin-shell-content-padding-inline: var(--admin-space-lg);
  --admin-shell-content-padding-block: var(--admin-space-2xl);
  --admin-shell-surface-border: var(--color-border-subtle);
  --admin-shell-action-bg-hover: var(--color-bg-hover);
  --admin-shell-action-bg-selected: var(--color-bg-selected);
  --admin-shell-action-text: var(--color-text-secondary);
  --admin-shell-action-text-active: var(--color-text-primary);
  --admin-header-height: var(--admin-shell-header-height);
  --admin-drawer-width: var(--admin-shell-sidebar-width);
  --admin-sub-drawer-width: 24rem;
  --admin-header-bg: var(--color-bg-surface);
  --admin-drawer-bg: var(--color-bg-surface);
  --admin-drawer-border: var(--admin-shell-surface-border);
  --admin-drawer-text: var(--color-text-secondary);
  --admin-drawer-text-active: var(--color-text-primary);
  --admin-drawer-hover-bg: var(--color-bg-hover);
  --admin-drawer-active-bg: var(--color-bg-selected);
  --admin-drawer-active-accent: var(--color-action-primary);
  --admin-drawer-focus-ring: var(--color-action-primary);
  --figma-control-height: 4.8rem;
  --figma-select-height: 4.8rem;
  --admin-size-input-height: var(--figma-select-height);
  --size-control-large: var(--figma-select-height);
  --admin-radius-xs: 0.3rem;
  --admin-radius-sm: var(--figma-radius, 0.4rem);
  --admin-radius: var(--figma-radius, 0.4rem);
  --admin-radius-lg: 0.6rem;
  --figma-drawer-gutter: 0.8rem;
  --figma-drawer-row-radius: 0.6rem;
  --figma-drawer-row-padding-x: 1.2rem;
  --figma-drawer-row-gap: var(--admin-space-2xs);
  --figma-drawer-icon-box: 1.6rem;
  --figma-drawer-icon-size: 1rem;
  --figma-surface-padding: var(--admin-space);
  --figma-control-padding-x: var(--admin-space);
  --figma-menu-row-hover: #383838;
  --figma-menu-row-open: #383838;
  --figma-menu-row-active: #383f51;
  --figma-menu-row-active-hover: #41495d;
  --figma-menu-row-active-text: #f5f5f5;
  --figma-menu-row-active-icon: #ffffff;
  --figma-floating-menu-bg: #1e1e1e;
  --figma-floating-menu-border: #333333;
  --figma-floating-menu-text: #f5f5f5;
  --figma-floating-menu-text-hover: #ffffff;
  --figma-floating-menu-label: #a6a6a6;
  --figma-floating-menu-width: 29.6rem;
  --figma-floating-menu-max-width: 36rem;
  --figma-settings-panel-width: min(100%, 124rem);
  --figma-settings-content-width: min(100%, 77rem);
  --figma-settings-panel-max-height: calc(100vh - 4rem);
  --figma-switch-width: 4rem;
  --figma-switch-height: 2rem;
  --figma-switch-thumb-size: 1.4rem;
  --figma-switch-thumb-gap: calc((var(--figma-switch-height) - var(--figma-switch-thumb-size)) / 2);
  --figma-badge-admin-bg: #273b60;
  --figma-badge-admin-text: #78b9ff;
  --figma-badge-dev-bg: #383838;
  --figma-badge-dev-text: #d7d7d7;
  --figma-badge-free-bg: #454545;
  --figma-badge-free-text: #f1f1f1;
  --figma-badge-new-bg: #0d99ff;
  --figma-badge-new-text: #ffffff;
  --figma-badge-locked-bg: #ffd028;
  --figma-badge-locked-text: #0a0a0a;
  --figma-notice-unread-bg: #3a2428;
  --figma-notice-unread-text: #ff9aa2;
  --figma-notice-unread-border: #6c343c;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
body.admin-shell-v2 .admin__wrap {
  background: var(--color-bg-canvas);
}
body.admin-shell-v2 .admin__content-wrap {
  margin-left: var(--admin-shell-sidebar-width);
}
@media (max-width: 1024px) {
  body.admin-shell-v2 .admin__content-wrap {
    margin-left: 0;
  }
}
body.admin-shell-v2 .admin-drawer--side-expanded[data-flyout-active] ~ .admin__content-wrap {
  margin-left: var(--admin-shell-sidebar-expanded-width);
}
@media (max-width: 1024px) {
  body.admin-shell-v2 .admin-drawer--side-expanded[data-flyout-active] ~ .admin__content-wrap {
    margin-left: 0;
  }
}
body.admin-shell-v2 .admin__main {
  padding: var(--admin-shell-content-padding-block) var(--admin-shell-content-padding-inline);
  background: var(--color-bg-canvas);
  min-height: calc(100vh - var(--admin-shell-header-height));
}
body.admin-shell-v2 .admin__content {
  width: 100%;
  max-width: var(--admin-shell-content-max-width);
  padding: 0;
}
body.admin-shell-v2 .admin-header {
  min-height: var(--admin-shell-header-height);
  height: var(--admin-shell-header-height);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--admin-shell-surface-border);
  box-shadow: var(--elevation-0);
  color: var(--color-text-primary);
  padding-inline: var(--admin-space);
  gap: var(--admin-space-xs);
}
body.admin-shell-v2 .admin-header__chrome {
  display: none;
  align-items: center;
  gap: var(--admin-space-2xs);
  flex: 0 0 auto;
  min-height: var(--admin-shell-header-height);
  padding-right: var(--admin-space-sm);
  border-right: 1px solid var(--admin-shell-surface-border);
}
@media (max-width: 1024px) {
  body.admin-shell-v2 .admin-header__chrome {
    display: inline-flex;
  }
}
body.admin-shell-v2 .admin-header__profile {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  min-width: 0;
  max-width: 18rem;
  min-height: 3.2rem;
  padding: 0 var(--admin-space-sm) 0 var(--admin-space-2xs);
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-primary);
  text-decoration: none;
}
body.admin-shell-v2 .admin-header__profile:hover, body.admin-shell-v2 .admin-header__profile:focus-visible {
  background: var(--admin-shell-action-bg-hover);
}
body.admin-shell-v2 .admin-header__profile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-border-focus) inset;
}
body.admin-shell-v2 .admin-header__profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  overflow: hidden;
  border-radius: 50%;
  background: #ff4f24;
  color: #050505;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
}
body.admin-shell-v2 .admin-header__profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.admin-shell-v2 .admin-header__profile-name {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-header__profile-caret {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: 1rem;
}
body.admin-shell-v2 .admin-header__navigation {
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  min-height: var(--admin-shell-header-height);
  gap: var(--admin-space-xs);
}
body.admin-shell-v2 .admin-header__history {
  display: none;
  align-items: center;
  gap: var(--admin-space-3xs);
  flex: 0 0 auto;
}
body.admin-shell-v2 .admin-header__history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.3rem;
}
body.admin-shell-v2 .admin-header__history-btn:hover, body.admin-shell-v2 .admin-header__history-btn:focus-visible {
  color: var(--color-text-primary);
  background: var(--admin-shell-action-bg-hover);
}
body.admin-shell-v2 .admin-header__history-btn:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
}
body.admin-shell-v2 .admin-header__breadcrumb {
  flex: 1;
  min-width: 0;
  margin-right: var(--admin-space-sm);
}
body.admin-shell-v2 .admin-header__tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--admin-space-2xs);
  flex: 0 0 auto;
  min-height: var(--admin-shell-header-height);
  margin-left: auto;
}
body.admin-shell-v2 .admin-header__left,
body.admin-shell-v2 .admin-header__right,
body.admin-shell-v2 .admin-header__actions {
  min-height: var(--admin-shell-header-height);
}
body.admin-shell-v2 .admin-header__menu-btn,
body.admin-shell-v2 .admin-header__action {
  display: inline-flex;
  color: var(--admin-shell-action-text);
  background: transparent;
  border: 1px solid transparent;
  min-height: 3rem;
  height: 3rem;
  min-width: 3rem;
  padding-inline: 0;
  border-radius: var(--figma-radius);
  box-shadow: none;
  font-size: 1.1rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-header__menu-btn:hover, body.admin-shell-v2 .admin-header__menu-btn:focus-visible,
body.admin-shell-v2 .admin-header__action:hover,
body.admin-shell-v2 .admin-header__action:focus-visible {
  color: var(--admin-shell-action-text-active);
  background: var(--admin-shell-action-bg-hover);
}
body.admin-shell-v2 .admin-header__menu-btn:focus-visible,
body.admin-shell-v2 .admin-header__action:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
}
body.admin-shell-v2 .admin-header__menu[open] > summary {
  color: var(--admin-shell-action-text-active);
  background: var(--admin-shell-action-bg-selected);
}
body.admin-shell-v2 .admin-header__action-label,
body.admin-shell-v2 .admin-header__action-caret {
  color: currentColor;
}
body.admin-shell-v2 .admin-header__action i,
body.admin-shell-v2 .admin-header__menu-btn i {
  font-size: 1.2rem;
}
body.admin-shell-v2 .admin-header__font-scale {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-3xs);
  height: 3rem;
  padding-inline: var(--admin-space-2xs);
  border: 1px solid var(--admin-shell-surface-border);
  border-radius: var(--figma-radius);
  background: var(--color-bg-subtle);
}
body.admin-shell-v2 .admin-header__font-scale-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  color: var(--color-text-primary);
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 650;
}
body.admin-shell-v2 .admin-header__tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
  list-style: none;
}
body.admin-shell-v2 .admin-header__tool-btn:hover, body.admin-shell-v2 .admin-header__tool-btn:focus-visible {
  background: var(--admin-shell-action-bg-hover);
  color: var(--color-text-primary);
  outline: 0;
}
body.admin-shell-v2 .admin-header__tool-btn:disabled {
  cursor: default;
  opacity: 0.36;
}
body.admin-shell-v2 .admin-header__tool-btn::-webkit-details-marker,
body.admin-shell-v2 .admin-header__tool-btn::marker,
body.admin-shell-v2 .admin-header__profile-menu summary::-webkit-details-marker,
body.admin-shell-v2 .admin-header__profile-menu summary::marker {
  display: none;
}
body.admin-shell-v2 .admin-header__theme-menu,
body.admin-shell-v2 .admin-header__profile-menu {
  position: relative;
}
body.admin-shell-v2 .admin-header__theme-menu[open] > .admin-header__tool-btn,
body.admin-shell-v2 .admin-header__profile-menu[open] > .admin-header__profile {
  background: var(--admin-shell-action-bg-hover);
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-header__quick-menu,
body.admin-shell-v2 .admin-header__profile-dropdown {
  position: absolute;
  top: calc(100% + var(--admin-space-sm));
  right: 0;
  z-index: 1210;
  border: 1px solid var(--admin-shell-surface-border);
  border-radius: 1.6rem;
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-floating);
}
body.admin-shell-v2 .admin-header__quick-menu {
  display: grid;
  gap: var(--admin-space-2xs);
  width: 22rem;
  padding: var(--admin-space-sm);
}
body.admin-shell-v2 .admin-header__profile-dropdown {
  width: min(32rem, 100vw - var(--admin-space-2xl));
  max-height: calc(100vh - var(--admin-shell-header-height) - var(--admin-space-2xl));
  overflow: auto;
  padding: var(--admin-space-xl) 0 var(--admin-space-sm);
}
body.admin-shell-v2 .admin-header__profile-head {
  display: grid;
  justify-items: center;
  gap: var(--admin-space-2xs);
  padding: 0 var(--admin-space-xl) var(--admin-space-xl);
  text-align: center;
}
body.admin-shell-v2 .admin-header__profile-avatar--lg {
  width: 5.6rem;
  height: 5.6rem;
  margin-bottom: var(--admin-space-sm);
  font-size: var(--admin-fs-xl);
}
body.admin-shell-v2 .admin-header__profile-head strong,
body.admin-shell-v2 .admin-header__profile-head span:not(.admin-header__profile-avatar) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-header__profile-head strong {
  color: var(--color-text-primary);
  font-size: 1.5rem;
  line-height: 2.2rem;
  font-weight: 650;
}
body.admin-shell-v2 .admin-header__profile-head span:not(.admin-header__profile-avatar) {
  color: var(--color-text-secondary);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-header__quick-section {
  display: grid;
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-lg) var(--admin-space);
  border-top: 1px solid var(--admin-shell-surface-border);
}
body.admin-shell-v2 .admin-header__quick-section--actions {
  padding-bottom: 0;
}
body.admin-shell-v2 .admin-header__quick-label {
  padding: 0 var(--admin-space-lg) var(--admin-space-2xs);
  color: var(--color-text-secondary);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-header__quick-row {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
  width: 100%;
  min-height: 3.6rem;
  padding: 0 var(--admin-space-lg);
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--admin-fs-sm);
  line-height: 1.8rem;
  text-align: left;
  text-decoration: none;
}
body.admin-shell-v2 .admin-header__quick-row:hover, body.admin-shell-v2 .admin-header__quick-row:focus-visible {
  background: var(--figma-menu-row-hover);
  color: var(--color-text-primary);
  outline: 0;
  text-decoration: none;
}
body.admin-shell-v2 .admin-header__quick-row[aria-checked=true] {
  background: var(--figma-menu-row-active);
  color: var(--figma-menu-row-active-text);
}
body.admin-shell-v2 .admin-header__quick-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  color: currentColor;
  font-size: 1.6rem;
}
body.admin-shell-v2 .admin-header__quick-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-header__quick-row-caret,
body.admin-shell-v2 .admin-header__quick-row .admin-form__loader {
  margin-left: auto;
}
body.admin-shell-v2 .admin-header__profile-logout {
  margin: 0;
}
body.admin-shell-v2 .admin-header__actions-divider {
  background: var(--admin-shell-surface-border);
}
body.admin-shell-v2 .admin-header__notifications-unread-pill {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  border-color: var(--admin-shell-surface-border);
  box-shadow: var(--elevation-0);
}
body.admin-shell-v2 .admin-header__dropdown-menu,
body.admin-shell-v2 .admin-header__menu-dropdown,
body.admin-shell-v2 .admin-header__notifications-dropdown,
body.admin-shell-v2 .admin-breadcrumb__menu {
  background: var(--color-bg-surface);
  border-color: var(--admin-shell-surface-border);
  border-radius: var(--figma-radius);
  box-shadow: var(--shadow-floating);
  padding: 0.4rem;
}
body.admin-shell-v2 .admin-breadcrumb__menu {
  background: var(--figma-floating-menu-bg, var(--figma-menu-bg));
  border-color: var(--figma-floating-menu-border, var(--admin-shell-surface-border));
  border-radius: 1.6rem;
}
body.admin-shell-v2 .admin-header__dropdown-item,
body.admin-shell-v2 .admin-header__menu-item,
body.admin-shell-v2 .admin-header__notifications-footer a,
body.admin-shell-v2 .admin-header__notifications-mark-all {
  min-height: 3.2rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--figma-radius);
  color: var(--color-text-secondary);
  font-size: 1.2rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-header__dropdown-item:hover, body.admin-shell-v2 .admin-header__dropdown-item:focus-visible,
body.admin-shell-v2 .admin-header__menu-item:hover,
body.admin-shell-v2 .admin-header__menu-item:focus-visible,
body.admin-shell-v2 .admin-header__notifications-footer a:hover,
body.admin-shell-v2 .admin-header__notifications-footer a:focus-visible,
body.admin-shell-v2 .admin-header__notifications-mark-all:hover,
body.admin-shell-v2 .admin-header__notifications-mark-all:focus-visible {
  color: var(--color-text-primary);
  background: var(--admin-shell-action-bg-hover);
}
body.admin-shell-v2 .admin-breadcrumb {
  flex-wrap: nowrap;
  overflow: visible;
  gap: var(--admin-space-xs);
  font-size: var(--admin-fs-base);
  line-height: 1.8rem;
}
body.admin-shell-v2 .admin-breadcrumb__item {
  min-height: 3rem;
  padding: 0;
  flex: 0 1 auto;
  min-width: 0;
  color: inherit;
  background: transparent;
}
body.admin-shell-v2 .admin-breadcrumb__item--has-menu {
  cursor: default;
}
body.admin-shell-v2 .admin-breadcrumb__link,
body.admin-shell-v2 .admin-breadcrumb__current,
body.admin-shell-v2 .admin-breadcrumb__trigger {
  min-height: 3rem;
  max-width: 24rem;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--admin-fs-base);
  line-height: 1.8rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-breadcrumb__link:hover,
body.admin-shell-v2 .admin-breadcrumb__trigger:hover,
body.admin-shell-v2 .admin-breadcrumb__dropdown[open] .admin-breadcrumb__trigger {
  color: var(--color-text-primary);
  background: var(--admin-shell-action-bg-hover);
}
body.admin-shell-v2 .admin-breadcrumb__sep {
  display: inline-flex;
  color: var(--color-text-muted);
  font-size: var(--admin-fs-sm);
  pointer-events: none;
}
body.admin-shell-v2 .admin-breadcrumb__item--current .admin-breadcrumb__current,
body.admin-shell-v2 .admin-breadcrumb__item--current .admin-breadcrumb__trigger {
  color: var(--color-text-primary);
  font-weight: 500;
}
body.admin-shell-v2 .admin-breadcrumb__item--current .admin-breadcrumb__node::before {
  content: none;
}
body.admin-shell-v2 .admin-breadcrumb__item--home {
  flex: 0 0 auto;
}
body.admin-shell-v2 .admin-breadcrumb__link--home,
body.admin-shell-v2 .admin-breadcrumb__current--home {
  justify-content: center;
  width: 3rem;
  max-width: 3rem;
  color: var(--color-text-secondary);
  font-size: var(--admin-fs-xl);
}
body.admin-shell-v2 .admin-breadcrumb__home-icon {
  width: 1.6rem;
  text-align: center;
}
body.admin-shell-v2 .admin-breadcrumb__text,
body.admin-shell-v2 .admin-breadcrumb__trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-breadcrumb__trigger-label {
  pointer-events: none;
}
body.admin-shell-v2 .admin-breadcrumb__trigger:focus-visible,
body.admin-shell-v2 .admin-breadcrumb__link:focus-visible {
  outline: none;
  outline-offset: var(--admin-space-2xs);
}
body.admin-shell-v2 .admin-header__avatar {
  width: 3rem;
  height: 3.2rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--admin-shell-surface-border);
  box-shadow: var(--elevation-0);
}
body.admin-shell-v2 .admin-header__avatar:hover {
  background: var(--admin-shell-action-bg-hover);
  box-shadow: var(--elevation-0);
}
body.admin-shell-v2 .admin-header__dropdown[open] .admin-header__avatar,
body.admin-shell-v2 .admin-header__avatar--lg {
  width: 3.6rem;
  height: 3.6rem;
  background: var(--color-bg-subtle);
  box-shadow: var(--elevation-0);
}
body.admin-shell-v2 .admin-header__avatar-letter,
body.admin-shell-v2 .admin-header__avatar--lg .admin-header__avatar-letter {
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-drawer {
  width: var(--admin-shell-sidebar-width);
  background: var(--color-bg-surface);
  border-right: 1px solid var(--admin-shell-surface-border);
}
body.admin-shell-v2 .admin-drawer--nested {
  overflow: visible;
}
body.admin-shell-v2 .admin-drawer__nested {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: visible;
}
body.admin-shell-v2 .admin-drawer__figma {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--color-bg-surface);
}
body.admin-shell-v2 .admin-drawer__figma-scroll {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: var(--admin-space-sm);
  overflow-y: auto;
  overflow-x: visible;
  padding: var(--admin-space-xs) var(--figma-drawer-gutter) var(--admin-space);
  scrollbar-gutter: stable;
}
body.admin-shell-v2 .admin-drawer__figma-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-2xs);
  min-height: 4.8rem;
}
body.admin-shell-v2 .admin-drawer__figma-account,
body.admin-shell-v2 .admin-drawer__figma-home,
body.admin-shell-v2 .admin-drawer__figma-bell,
body.admin-shell-v2 .admin-drawer__figma-menu,
body.admin-shell-v2 .admin-drawer__figma-search,
body.admin-shell-v2 .admin-drawer__figma-workspace-head,
body.admin-shell-v2 .admin-drawer__figma-plan-card,
body.admin-shell-v2 .admin-drawer__figma-upgrade {
  color: var(--color-text-primary);
  text-decoration: none;
}
body.admin-shell-v2 .admin-drawer__figma-profile {
  display: inline-flex;
  min-width: 0;
  max-width: calc(100% - 7.6rem);
}
body.admin-shell-v2 .admin-drawer__figma-profile summary::-webkit-details-marker,
body.admin-shell-v2 .admin-drawer__figma-profile summary::marker {
  display: none;
}
body.admin-shell-v2 .admin-drawer__figma-account {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-sm);
  min-width: 0;
  max-width: calc(100% - 7.6rem);
  min-height: 4rem;
  padding: var(--admin-space-2xs) var(--admin-space-sm) var(--admin-space-2xs) var(--admin-space-2xs);
  border-radius: 0.7rem;
  background: var(--color-bg-subtle);
  cursor: pointer;
}
body.admin-shell-v2 .admin-drawer__figma-account:hover, body.admin-shell-v2 .admin-drawer__figma-account:focus-visible {
  background: var(--figma-menu-row-hover);
  outline: 0;
}
body.admin-shell-v2 .admin-drawer__figma-profile .admin-drawer__figma-account {
  width: 100%;
  max-width: none;
}
body.admin-shell-v2 .admin-drawer__figma-profile[open] .admin-drawer__figma-account {
  background: var(--figma-menu-row-hover);
}
body.admin-shell-v2 .admin-drawer__figma-home {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-sm);
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 7.6rem);
  min-height: 4rem;
  padding: var(--admin-space-2xs) var(--admin-space-sm);
  border-radius: 0.7rem;
  background: var(--color-bg-subtle);
}
body.admin-shell-v2 .admin-drawer__figma-home:hover, body.admin-shell-v2 .admin-drawer__figma-home:focus-visible {
  background: var(--figma-menu-row-hover);
  color: var(--color-text-primary);
  outline: 0;
  text-decoration: none;
}
body.admin-shell-v2 .admin-drawer__figma-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 3.2rem;
  width: 3.2rem;
  height: 3.2rem;
  overflow: hidden;
  border-radius: 50%;
  background: #ff4f24;
  color: #050505;
  font-size: 1.3rem;
}
body.admin-shell-v2 .admin-drawer__figma-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.admin-shell-v2 .admin-drawer__figma-user,
body.admin-shell-v2 .admin-drawer__figma-home-copy strong,
body.admin-shell-v2 .admin-drawer__figma-workspace-name {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-drawer__figma-home-copy {
  display: grid;
  gap: var(--admin-space-3xs);
  flex: 1 1 auto;
  min-width: 0;
}
body.admin-shell-v2 .admin-drawer__figma-home-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--admin-fs-xs);
  line-height: 1.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-drawer__figma-home-icon {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: 1.2rem;
}
body.admin-shell-v2 .admin-drawer__figma-account-caret,
body.admin-shell-v2 .admin-drawer__figma-workspace-caret {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: 1.1rem;
}
body.admin-shell-v2 .admin-drawer__figma-top-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-3xs);
  flex: 0 0 auto;
}
body.admin-shell-v2 .admin-drawer__figma-notifications {
  position: relative;
}
body.admin-shell-v2 .admin-drawer__figma-notifications summary::-webkit-details-marker,
body.admin-shell-v2 .admin-drawer__figma-notifications summary::marker {
  display: none;
}
body.admin-shell-v2 .admin-drawer__figma-bell,
body.admin-shell-v2 .admin-drawer__figma-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 3.2rem;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: 1.4rem;
}
body.admin-shell-v2 .admin-drawer__figma-bell:hover, body.admin-shell-v2 .admin-drawer__figma-bell:focus-visible,
body.admin-shell-v2 .admin-drawer__figma-menu:hover,
body.admin-shell-v2 .admin-drawer__figma-menu:focus-visible {
  background: var(--admin-shell-action-bg-hover);
  outline: 0;
}
body.admin-shell-v2 .admin-drawer__figma-menu {
  display: none;
}
@media (max-width: 1024px) {
  body.admin-shell-v2 .admin-drawer__figma-menu {
    display: inline-flex;
  }
}
body.admin-shell-v2 .admin-drawer__figma-bell-pill {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border: 1px solid var(--color-bg-surface);
  border-radius: var(--admin-radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
}
body.admin-shell-v2 .admin-drawer__figma-bell-pill.is-unread {
  background: var(--figma-notice-unread-bg);
  color: var(--figma-notice-unread-text);
  border-color: var(--figma-notice-unread-border);
}
body.admin-shell-v2 .admin-drawer__figma-notifications[open] .admin-drawer__figma-bell {
  background: var(--admin-shell-action-bg-selected);
}
body.admin-shell-v2 .admin-drawer__figma-profile-dropdown {
  position: fixed;
  top: calc(var(--admin-space-xs) + 4.8rem + var(--admin-space-xs));
  left: var(--figma-drawer-gutter);
  z-index: 1210;
  width: min(32rem, 100vw - var(--admin-space-2xl));
  max-height: calc(100vh - 7.2rem);
  overflow: auto;
  padding: var(--admin-space-xl) 0 var(--admin-space-sm);
  border: 1px solid var(--admin-shell-surface-border);
  border-radius: 1.6rem;
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-floating);
}
body.admin-shell-v2 .admin-drawer__figma-profile-head {
  display: grid;
  justify-items: center;
  gap: var(--admin-space-2xs);
  padding: 0 var(--admin-space-xl) var(--admin-space-xl);
  text-align: center;
}
body.admin-shell-v2 .admin-drawer__figma-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  margin-bottom: var(--admin-space-sm);
  overflow: hidden;
  border-radius: 50%;
  background: #ff4f24;
  color: #050505;
  font-size: var(--admin-fs-xl);
}
body.admin-shell-v2 .admin-drawer__figma-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.admin-shell-v2 .admin-drawer__figma-profile-head strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 1.5rem;
  line-height: 2.2rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-drawer__figma-profile-head span:not(.admin-drawer__figma-profile-avatar) {
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 1.4rem;
  line-height: 2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-drawer__figma-profile-section {
  display: grid;
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-lg) var(--admin-space);
  border-top: 1px solid var(--admin-shell-surface-border);
}
body.admin-shell-v2 .admin-drawer__figma-profile-section--actions {
  padding-bottom: 0;
}
body.admin-shell-v2 .admin-drawer__figma-profile-label {
  padding: 0 var(--admin-space-lg) var(--admin-space-2xs);
  color: var(--color-text-secondary);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-drawer__figma-profile-row {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
  width: 100%;
  min-height: 3.6rem;
  padding: 0 var(--admin-space-lg);
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--admin-fs-sm);
  line-height: 1.8rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
body.admin-shell-v2 .admin-drawer__figma-profile-row:hover, body.admin-shell-v2 .admin-drawer__figma-profile-row:focus-visible {
  background: var(--figma-menu-row-hover);
  color: var(--color-text-primary);
  outline: 0;
  text-decoration: none;
}
body.admin-shell-v2 .admin-drawer__figma-profile-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  color: var(--color-text-primary);
  font-size: 1.8rem;
}
body.admin-shell-v2 .admin-drawer__figma-profile-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-drawer__figma-profile-row-caret,
body.admin-shell-v2 .admin-drawer__figma-profile-row .admin-form__loader {
  margin-left: auto;
}
body.admin-shell-v2 .admin-drawer__figma-profile-logout {
  margin: 0;
}
body.admin-shell-v2 .admin-drawer__figma-profile-row--logout {
  justify-content: flex-start;
  min-height: 3.6rem;
  background: var(--color-action-primary);
  color: #ffffff;
}
body.admin-shell-v2 .admin-drawer__figma-profile-row--logout:hover, body.admin-shell-v2 .admin-drawer__figma-profile-row--logout:focus-visible {
  background: var(--color-action-primary-hover);
  color: #ffffff;
}
body.admin-shell-v2 .admin-drawer__figma-profile-row--logout .admin-drawer__figma-profile-row-icon {
  color: #ffffff;
}
body.admin-shell-v2 .admin-drawer__figma-notifications .admin-header__notifications-dropdown {
  position: fixed;
  top: calc(var(--admin-space-xs) + 4.8rem + var(--admin-space-xs));
  left: calc(var(--admin-shell-sidebar-width) + var(--admin-space-sm));
  right: auto;
  width: min(44rem, 100vw - var(--admin-shell-sidebar-width) - var(--admin-space-2xl));
  min-width: 34rem;
  max-height: calc(100vh - 6.4rem);
  background: var(--color-bg-surface);
  border-color: var(--admin-shell-surface-border);
  border-radius: 1.6rem;
  z-index: 1200;
}
body.admin-shell-v2 .admin-header__notifications-head {
  min-height: 5.2rem;
  padding: 0 var(--admin-space-2xl);
}
body.admin-shell-v2 .admin-header__notifications-head-title {
  color: var(--color-text-primary);
  font-size: var(--admin-fs-xl);
  line-height: 2.4rem;
  font-weight: 650;
}
body.admin-shell-v2 .admin-header__notifications-head-count {
  display: none;
}
body.admin-shell-v2 .admin-header__notifications-settings {
  color: var(--color-text-primary);
  font-size: 2rem;
}
body.admin-shell-v2 .admin-header__notifications-nav {
  min-height: 5.2rem;
  padding: 0 var(--admin-space-2xl);
  border-bottom-color: var(--admin-shell-surface-border);
}
body.admin-shell-v2 .admin-header__notifications-tab {
  min-height: 3.2rem;
  padding: 0 var(--admin-space-lg);
  border: 0;
  border-radius: 0.8rem;
  color: var(--color-text-secondary);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-header__notifications-tab:hover:not(body.admin-shell-v2 .admin-header__notifications-tab--active) {
  color: var(--color-text-primary);
  background: var(--admin-shell-action-bg-hover);
}
body.admin-shell-v2 .admin-header__notifications-tab--active {
  color: var(--color-text-primary);
  background: var(--admin-shell-action-bg-hover);
}
body.admin-shell-v2 .admin-header__notifications-list {
  padding: var(--admin-space-lg) 0;
}
body.admin-shell-v2 .admin-header__notifications-item {
  padding: var(--admin-space-lg) var(--admin-space-2xl);
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-header__notifications-item-icon {
  width: 4rem;
  height: 4rem;
  background: #ff4f24;
  color: #050505;
}
body.admin-shell-v2 .admin-header__notifications-item-title {
  color: var(--color-text-primary);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-header__notifications-item-msg {
  color: var(--color-text-primary);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
body.admin-shell-v2 .admin-header__notifications-item-time,
body.admin-shell-v2 .admin-header__notifications-item-meta {
  color: var(--color-text-muted);
  font-size: 1.2rem;
}
body.admin-shell-v2 .admin-header__notifications-footer {
  background: transparent;
  border-top-color: var(--admin-shell-surface-border);
}
body.admin-shell-v2 .admin-header__notifications-mark-all {
  color: #8dccff;
  font-size: 1.3rem;
}
@media (max-width: 1024px) {
  body.admin-shell-v2 .admin-drawer__figma-notifications .admin-header__notifications-dropdown {
    top: calc(var(--admin-shell-header-height) + var(--admin-space));
    left: var(--admin-space);
    width: calc(100vw - var(--admin-space-2xl));
    min-width: 0;
  }
  body.admin-shell-v2 .admin-drawer__figma-profile-dropdown {
    top: calc(var(--admin-shell-header-height) + var(--admin-space));
    left: var(--admin-space);
    width: calc(100vw - var(--admin-space-2xl));
  }
}
body.admin-shell-v2 .admin-drawer__figma-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  min-height: 4rem;
  padding: 0 var(--admin-space);
  border: 1px solid transparent;
  border-radius: 0.8rem;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1.7rem;
}
body.admin-shell-v2 .admin-drawer__figma-search i {
  color: var(--color-text-primary);
  font-size: 1.5rem;
}
body.admin-shell-v2 .admin-drawer__figma-search:focus-within {
  border-color: var(--color-action-primary);
  box-shadow: 0 0 0 1px var(--color-action-primary) inset;
}
body.admin-shell-v2 .admin-drawer__figma-search input {
  width: 100%;
  min-width: 0;
  height: 3.8rem;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
}
body.admin-shell-v2 .admin-drawer__figma-search input::-webkit-search-cancel-button,
body.admin-shell-v2 .admin-drawer__figma-search input::-webkit-search-decoration {
  appearance: none;
  display: none;
}
body.admin-shell-v2 .admin-drawer__figma-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.8rem;
  width: 2.8rem;
  height: 2.8rem;
  margin-right: -0.6rem;
  padding: 0;
  border: 0;
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
body.admin-shell-v2 .admin-drawer__figma-search-clear:hover, body.admin-shell-v2 .admin-drawer__figma-search-clear:focus-visible {
  background: var(--figma-menu-row-hover);
  color: var(--color-text-primary);
  outline: 0;
}
body.admin-shell-v2 .admin-drawer__figma-search-clear[hidden] {
  display: none;
}
body.admin-shell-v2 .admin-drawer__figma-search input::placeholder {
  color: var(--color-text-muted);
}
body.admin-shell-v2 .admin-drawer__figma-search-empty {
  margin: 0;
  padding: var(--admin-space-sm) var(--admin-space);
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1.7rem;
}
body.admin-shell-v2 .admin-drawer__figma-list {
  display: grid;
  gap: var(--figma-drawer-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.admin-shell-v2 .admin-drawer__figma-section {
  display: grid;
  gap: var(--admin-space-sm);
  margin-inline: calc(var(--figma-drawer-gutter) * -1);
  padding: var(--admin-space) var(--figma-drawer-gutter) 0;
  border-top: 1px solid var(--admin-shell-surface-border);
}
body.admin-shell-v2 .admin-drawer__figma-workspace-switch {
  position: relative;
}
body.admin-shell-v2 .admin-drawer__figma-workspace-switch summary::-webkit-details-marker,
body.admin-shell-v2 .admin-drawer__figma-workspace-switch summary::marker {
  display: none;
}
body.admin-shell-v2 .admin-drawer__figma-workspace-head {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  min-height: 4rem;
  padding-inline: var(--admin-space-sm);
  border-radius: var(--figma-drawer-row-radius);
  cursor: pointer;
}
body.admin-shell-v2 .admin-drawer__figma-workspace-head:hover, body.admin-shell-v2 .admin-drawer__figma-workspace-head:focus-visible {
  background: var(--figma-menu-row-hover);
  outline: 0;
}
body.admin-shell-v2 .admin-drawer__figma-workspace-switch[open] .admin-drawer__figma-workspace-head {
  background: var(--figma-menu-row-hover);
}
body.admin-shell-v2 .admin-drawer__figma-workspace-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #f03bd6;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
}
body.admin-shell-v2 .admin-drawer__figma-plan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 2rem;
  padding-inline: var(--admin-space-sm);
  border-radius: 0.5rem;
  background: var(--figma-badge-admin-bg);
  color: var(--figma-badge-admin-text);
  font-size: 1.1rem;
  line-height: 1.6rem;
  font-weight: 600;
}
body.admin-shell-v2 .admin-drawer__figma-account-menu {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0;
  right: 0;
  z-index: 6;
  display: grid;
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-sm);
  border: 1px solid var(--figma-floating-menu-border);
  border-radius: 1.2rem;
  background: var(--figma-floating-menu-bg);
  box-shadow: var(--shadow-floating);
}
body.admin-shell-v2 .admin-drawer__figma-account-row,
body.admin-shell-v2 .admin-drawer__figma-create-account {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  min-height: 4rem;
  padding: var(--admin-space-2xs) var(--admin-space-sm);
  border-radius: 0.6rem;
  color: var(--color-text-primary);
  text-decoration: none;
}
body.admin-shell-v2 .admin-drawer__figma-account-row:hover, body.admin-shell-v2 .admin-drawer__figma-account-row:focus-visible,
body.admin-shell-v2 .admin-drawer__figma-create-account:hover,
body.admin-shell-v2 .admin-drawer__figma-create-account:focus-visible {
  background: var(--figma-menu-row-hover);
  outline: 0;
  text-decoration: none;
}
body.admin-shell-v2 .admin-drawer__figma-account-row--current {
  cursor: default;
}
body.admin-shell-v2 .admin-drawer__figma-account-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.8rem;
  width: 1.8rem;
  color: var(--color-text-primary);
  font-size: 1.1rem;
}
body.admin-shell-v2 .admin-drawer__figma-account-avatar,
body.admin-shell-v2 .admin-drawer__figma-account-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.8rem;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: #0d99ff;
  color: #ffffff;
  overflow: hidden;
}
body.admin-shell-v2 .admin-drawer__figma-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.admin-shell-v2 .admin-drawer__figma-account-icon {
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.4rem;
}
body.admin-shell-v2 .admin-drawer__figma-account-copy {
  display: grid;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}
body.admin-shell-v2 .admin-drawer__figma-account-copy strong,
body.admin-shell-v2 .admin-drawer__figma-account-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-drawer__figma-account-copy strong {
  color: var(--color-text-primary);
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-drawer__figma-account-copy small {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.5rem;
}
body.admin-shell-v2 .admin-drawer__figma-account-badge {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding-inline: var(--admin-space-sm);
  border-radius: 0.5rem;
  font-size: 1.1rem;
  line-height: 1.6rem;
  font-weight: 600;
}
body.admin-shell-v2 .admin-drawer__figma-create-account {
  justify-content: center;
  min-height: 4.4rem;
  margin-top: var(--admin-space-2xs);
  background: var(--color-action-primary);
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-drawer__figma-create-account:hover, body.admin-shell-v2 .admin-drawer__figma-create-account:focus-visible {
  background: var(--color-action-primary-hover);
}
body.admin-shell-v2 .admin-drawer__figma-logout {
  margin: 0;
  padding-top: var(--admin-space-2xs);
}
body.admin-shell-v2 .admin-drawer__figma-logout-button {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  width: 100%;
  min-height: var(--figma-control-height);
  padding: 0 var(--figma-drawer-row-padding-x);
  border: 0;
  border-radius: var(--figma-drawer-row-radius);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: 500;
  text-align: left;
}
body.admin-shell-v2 .admin-drawer__figma-logout-button:hover, body.admin-shell-v2 .admin-drawer__figma-logout-button:focus-visible {
  background: var(--figma-menu-row-hover);
  color: var(--color-text-primary);
  outline: 0;
}
body.admin-shell-v2 .admin-drawer__figma-logout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--figma-drawer-icon-box);
  width: var(--figma-drawer-icon-box);
  height: var(--figma-drawer-icon-box);
  color: currentColor;
  font-size: var(--figma-drawer-icon-size);
  line-height: 1;
  opacity: 0.68;
}
body.admin-shell-v2 .admin-drawer__figma-plan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space);
  min-height: 7rem;
  padding: var(--admin-space) var(--admin-space-lg);
  border: 1px solid var(--color-border-default);
  border-radius: 1.2rem;
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-drawer__figma-plan-card span {
  display: grid;
  gap: var(--admin-space-2xs);
}
body.admin-shell-v2 .admin-drawer__figma-plan-card strong {
  color: var(--color-text-primary);
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: 600;
}
body.admin-shell-v2 .admin-drawer__figma-plan-card small {
  color: var(--color-text-secondary);
  font-size: 1.2rem;
  line-height: 1.7rem;
}
body.admin-shell-v2 .admin-drawer__figma-section-title {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: 600;
}
body.admin-shell-v2 .admin-drawer__figma-section-title i {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
body.admin-shell-v2 .admin-drawer__figma-footer {
  flex: 0 0 auto;
  padding: var(--admin-space-sm) var(--admin-space-lg) var(--admin-space);
  background: var(--color-bg-surface);
}
body.admin-shell-v2 .admin-drawer__figma-upgrade {
  display: grid;
  gap: var(--admin-space);
  justify-items: center;
  min-height: 13.6rem;
  padding: var(--admin-space-lg) var(--admin-space);
  border-radius: 0.7rem;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  text-align: center;
}
body.admin-shell-v2 .admin-drawer__figma-upgrade-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-text-primary);
  border-radius: 50%;
  color: var(--color-text-primary);
  font-size: 1.4rem;
}
body.admin-shell-v2 .admin-drawer__figma-upgrade-copy {
  max-width: 19rem;
  color: var(--color-text-primary);
  font-size: 1.3rem;
  line-height: 1.9rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-drawer__figma-upgrade-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4rem;
  border-radius: 0.5rem;
  background: #0d99ff;
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: 600;
}
body.admin-shell-v2 .admin-drawer__brand {
  height: var(--admin-shell-header-height);
  background: var(--color-bg-surface);
  border-bottom-color: var(--admin-shell-surface-border);
  padding-inline: var(--figma-drawer-gutter);
}
body.admin-shell-v2 .admin-drawer__logo {
  display: flex;
  align-items: center;
  min-width: 0;
}
body.admin-shell-v2 .admin-drawer__logo .admin-drawer__logo-img {
  width: 9.2rem;
  max-height: 3.2rem;
  object-position: left center;
}
body.admin-shell-v2 .admin-drawer__body {
  padding: var(--figma-drawer-gutter);
}
body.admin-shell-v2 .admin-drawer__column {
  padding: var(--admin-space-2xl) var(--figma-drawer-gutter) var(--admin-space-lg);
}
body.admin-shell-v2 .admin-drawer__list {
  display: grid;
  gap: var(--figma-drawer-row-gap);
}
body.admin-shell-v2 .admin-drawer__section {
  padding-block: var(--admin-space-2xs);
}
body.admin-shell-v2 .admin-drawer__section + .admin-drawer__section {
  border-top: 1px solid var(--admin-shell-surface-border);
}
body.admin-shell-v2 .admin-drawer__drill,
body.admin-shell-v2 .admin-drawer__leaf {
  width: 100%;
  margin: 0;
  min-height: var(--figma-control-height);
  padding: 0 var(--figma-drawer-row-padding-x);
  border: 0;
  border-left: 0;
  border-radius: var(--figma-drawer-row-radius);
  color: var(--color-text-secondary);
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-drawer__drill:hover, body.admin-shell-v2 .admin-drawer__drill:focus-visible,
body.admin-shell-v2 .admin-drawer__leaf:hover,
body.admin-shell-v2 .admin-drawer__leaf:focus-visible {
  color: var(--color-text-primary);
  background: var(--figma-menu-row-hover);
}
body.admin-shell-v2 .admin-drawer__drill:focus-visible,
body.admin-shell-v2 .admin-drawer__leaf:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
}
body.admin-shell-v2 .admin-drawer__drill--active,
body.admin-shell-v2 .admin-drawer__leaf--active {
  color: var(--figma-menu-row-active-text);
  background: var(--figma-menu-row-active);
  border-left: 0;
  border-radius: var(--figma-drawer-row-radius);
  box-shadow: none;
}
body.admin-shell-v2 .admin-drawer__drill--active:hover, body.admin-shell-v2 .admin-drawer__drill--active:focus-visible,
body.admin-shell-v2 .admin-drawer__leaf--active:hover,
body.admin-shell-v2 .admin-drawer__leaf--active:focus-visible {
  color: var(--figma-menu-row-active-text);
  background: var(--figma-menu-row-active-hover);
}
body.admin-shell-v2 .admin-drawer__drill--active .admin-drawer__drill-icon,
body.admin-shell-v2 .admin-drawer__leaf--active .admin-drawer__leaf-icon,
body.admin-shell-v2 .admin-drawer__drill--active .admin-drawer__drill-chevron {
  color: var(--figma-menu-row-active-icon);
}
body.admin-shell-v2 .admin-drawer__drill-icon,
body.admin-shell-v2 .admin-drawer__leaf-icon,
body.admin-shell-v2 .admin-drawer__flyout-subhead-icon,
body.admin-shell-v2 .admin-drawer__utility-link i:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--figma-drawer-icon-box);
  width: var(--figma-drawer-icon-box);
  height: var(--figma-drawer-icon-box);
  color: currentColor;
  font-size: var(--figma-drawer-icon-size);
  font-weight: 300;
  line-height: 1;
  text-align: center;
  opacity: 0.68;
}
body.admin-shell-v2 .admin-drawer__drill-text,
body.admin-shell-v2 .admin-drawer__leaf-text,
body.admin-shell-v2 .admin-drawer__utility-link span {
  line-height: 1.7rem;
}
body.admin-shell-v2 .admin-drawer__drill-chevron {
  margin-left: auto;
  font-size: 1.2rem;
  opacity: 0.55;
}
body.admin-shell-v2 .admin-drawer__flyout-sublist {
  border-left-color: var(--admin-shell-surface-border);
}
body.admin-shell-v2 .admin-drawer__flyout-subhead {
  min-height: 4.4rem;
  color: var(--color-text-secondary);
  border-radius: var(--figma-drawer-row-radius);
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-drawer__flyout-subhead:hover, body.admin-shell-v2 .admin-drawer__flyout-subhead:focus-visible {
  background: var(--admin-shell-action-bg-hover);
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-drawer__badge {
  border-color: transparent;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  letter-spacing: 0;
}
body.admin-shell-v2 .admin-drawer__badge--admin {
  background: var(--figma-badge-admin-bg);
  color: var(--figma-badge-admin-text);
}
body.admin-shell-v2 .admin-drawer__badge--dev {
  background: var(--figma-badge-dev-bg);
  color: var(--figma-badge-dev-text);
}
body.admin-shell-v2 .admin-drawer__badge--free {
  background: var(--figma-badge-free-bg);
  color: var(--figma-badge-free-text);
}
body.admin-shell-v2 .admin-drawer__badge--new {
  background: var(--figma-badge-new-bg);
  color: var(--figma-badge-new-text);
}
body.admin-shell-v2 .admin-drawer__badge--locked {
  background: var(--figma-badge-locked-bg);
  color: var(--figma-badge-locked-text);
}
body.admin-shell-v2 .admin-drawer--side-expanded {
  width: var(--admin-shell-sidebar-width);
}
body.admin-shell-v2 .admin-drawer--side-expanded[data-flyout-active] {
  width: var(--admin-shell-sidebar-expanded-width);
}
body.admin-shell-v2 .admin-drawer--side-expanded .admin-drawer__figma {
  flex: 0 0 var(--admin-shell-sidebar-width);
  width: var(--admin-shell-sidebar-width);
}
body.admin-shell-v2 .admin-drawer--side-expanded .admin-drawer__flyout {
  left: var(--admin-shell-sidebar-width);
  width: var(--admin-sub-drawer-width);
  border-left: 1px solid var(--admin-shell-surface-border);
  box-shadow: none;
}
@media (max-width: 1024px) {
  body.admin-shell-v2 .admin-drawer--side-expanded {
    width: var(--admin-shell-sidebar-width);
  }
}
body.admin-shell-v2 .admin-drawer__flyout {
  background: var(--color-bg-surface);
  border-color: var(--admin-shell-surface-border);
  box-shadow: var(--shadow-floating);
}
body.admin-shell-v2 .admin-drawer__flyout .admin-drawer__head {
  min-height: var(--figma-control-height);
  padding: 0 var(--figma-drawer-gutter);
  background: var(--color-bg-surface);
}
body.admin-shell-v2 .admin-drawer__flyout .admin-drawer__back {
  min-height: 3.6rem;
  margin: 0;
  padding: 0 var(--figma-drawer-row-padding-x);
  border-radius: var(--figma-drawer-row-radius);
  color: var(--color-text-secondary);
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-drawer__flyout .admin-drawer__body {
  padding: var(--admin-space-2xs);
}
body.admin-shell-v2 .admin-drawer__flyout .admin-drawer__list {
  display: grid;
  gap: 0;
}
body.admin-shell-v2 .admin-drawer__flyout .admin-drawer__drill,
body.admin-shell-v2 .admin-drawer__flyout .admin-drawer__leaf,
body.admin-shell-v2 .admin-drawer__flyout .admin-drawer__flyout-subhead {
  min-height: 3.6rem;
  padding: 0 var(--figma-drawer-row-padding-x);
}
body.admin-shell-v2 .admin-drawer__flyout .admin-drawer__flyout-details {
  margin: 0;
}
body.admin-shell-v2 .admin-drawer__flyout .admin-drawer__flyout-sublist {
  margin: var(--admin-space-2xs) 0;
  padding: var(--admin-space-2xs) 0 var(--admin-space-2xs) var(--admin-space-2xs);
  border-left: 1px solid var(--admin-shell-surface-border);
}
@media (min-width: 1025px) {
  body.admin-shell-v2 .admin-drawer__flyout .admin-drawer__mobile-layer-head {
    display: none;
  }
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout {
  top: var(--admin-flyout-y, var(--admin-space-lg));
  bottom: auto;
  left: calc(100% + var(--admin-space-2xs));
  width: min(var(--figma-floating-menu-width), 100vw - var(--admin-shell-sidebar-width) - var(--admin-space-2xl));
  max-width: var(--figma-floating-menu-max-width);
  max-height: calc(100vh - var(--admin-flyout-y, var(--admin-space-lg)) - var(--admin-space-lg));
  overflow: hidden;
  border: 1px solid var(--figma-floating-menu-border);
  border-radius: 1.2rem;
  background: var(--figma-floating-menu-bg);
  box-shadow: var(--shadow-floating);
  transform: translateX(calc(var(--admin-space-xs) * -1));
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout[data-flyout-open] {
  transform: translateX(0);
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__head {
  display: none;
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__body {
  max-height: inherit;
  overflow-y: auto;
  padding: var(--admin-space-2xs);
  scrollbar-gutter: stable;
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__list {
  gap: 0;
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__leaf,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-subhead {
  min-height: 3.6rem;
  padding: 0 var(--admin-space-lg);
  border-radius: 0.6rem;
  color: var(--figma-floating-menu-text);
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill:hover,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill:focus-visible,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__leaf:hover,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__leaf:focus-visible,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-subhead:hover,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-subhead:focus-visible {
  background: var(--figma-menu-row-hover);
  color: var(--figma-floating-menu-text-hover);
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill[aria-expanded=true] {
  background: var(--figma-menu-row-open);
  color: var(--figma-floating-menu-text-hover);
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__leaf--active,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill--active,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill--active[aria-expanded=true] {
  background: var(--figma-menu-row-active);
  color: var(--figma-menu-row-active-text);
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__leaf--active:hover,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__leaf--active:focus-visible,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill--active:hover,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill--active:focus-visible,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill--active[aria-expanded=true]:hover,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill--active[aria-expanded=true]:focus-visible {
  background: var(--figma-menu-row-active-hover);
  color: var(--figma-menu-row-active-text);
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill-icon,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__leaf-icon,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-subhead-icon {
  color: currentColor;
  opacity: 0.72;
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill--active .admin-drawer__drill-icon,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__leaf--active .admin-drawer__leaf-icon,
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__drill--active .admin-drawer__drill-chevron {
  color: var(--figma-menu-row-active-icon);
  opacity: 1;
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-subhead {
  margin: 0;
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-details[open] .admin-drawer__flyout-subhead-chevron {
  transform: none;
  opacity: 0.75;
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-sublist {
  margin: var(--admin-space-2xs) 0;
  padding: var(--admin-space-2xs) 0 var(--admin-space-2xs) var(--admin-space-2xs);
  border-left: 1px solid var(--figma-floating-menu-border);
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__mobile-layer-head {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout[data-flyout-open] {
    overflow: visible;
    transform: none;
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__body {
    overflow-x: visible;
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-details[data-cascade-open] > .admin-drawer__flyout-subhead {
    background: var(--figma-menu-row-open);
    color: var(--figma-floating-menu-text-hover);
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-details[data-cascade-open] > .admin-drawer__flyout-subhead .admin-drawer__flyout-subhead-chevron {
    opacity: 0.85;
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-sublist[data-flyout-submenu-panel] {
    position: fixed;
    top: var(--admin-cascade-menu-top, var(--admin-space-lg));
    left: var(--admin-cascade-menu-left, var(--admin-space-lg));
    z-index: calc(var(--admin-z-drawer, 90) + 4);
    width: var(--admin-cascade-menu-width, min(var(--figma-floating-menu-width), 100vw - var(--admin-space-2xl)));
    max-height: var(--admin-cascade-menu-max-height, calc(100vh - var(--admin-space-2xl)));
    overflow-y: auto;
    margin: 0;
    padding: var(--admin-space-2xs);
    border: 1px solid var(--figma-floating-menu-border);
    border-radius: 1.2rem;
    background: var(--figma-floating-menu-bg);
    box-shadow: var(--shadow-floating);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(calc(var(--admin-space-xs) * -1));
    transition: opacity var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
    scrollbar-gutter: stable;
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-details[data-cascade-open] > .admin-drawer__flyout-sublist[data-flyout-submenu-panel] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-details[data-cascade-placement=left] > .admin-drawer__flyout-sublist[data-flyout-submenu-panel] {
    transform: translateX(var(--admin-space-xs));
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-details[data-cascade-placement=left][data-cascade-open] > .admin-drawer__flyout-sublist[data-flyout-submenu-panel],
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-details[data-cascade-placement=clamped][data-cascade-open] > .admin-drawer__flyout-sublist[data-flyout-submenu-panel],
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-details[data-cascade-placement=drilldown][data-cascade-open] > .admin-drawer__flyout-sublist[data-flyout-submenu-panel] {
    transform: translateX(0);
  }
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__divider {
  margin: var(--admin-space-2xs) 0;
  border-top-color: var(--figma-floating-menu-border);
}
body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__list-group-label {
  padding: var(--admin-space-xs) var(--admin-space-lg) var(--admin-space-2xs);
  color: var(--figma-floating-menu-label);
  font-size: 1.1rem;
  line-height: 1.6rem;
  font-weight: 600;
}
body.admin-shell-v2 .admin-drawer--figma-floating[data-flyout-active] ~ .admin__content-wrap::after {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 1024px) {
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    transform: translateX(100%);
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout[data-flyout-open] {
    transform: translateX(0);
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__head {
    display: block;
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__body {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout[data-mobile-layer-active] .admin-drawer__body {
    overflow: visible;
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-sublist[data-flyout-submenu-panel] {
    display: none;
    margin: 0;
    padding: 0;
    border-left: 0;
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__flyout-details[data-mobile-layer-open] > .admin-drawer__flyout-sublist[data-flyout-submenu-panel] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: auto;
    max-height: none;
    overflow-y: auto;
    padding: 0 var(--admin-space-2xs) var(--admin-space-2xs);
    border: 0;
    border-radius: 0;
    background: var(--figma-floating-menu-bg);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    scrollbar-gutter: stable;
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__mobile-layer-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    margin: 0 calc(var(--admin-space-2xs) * -1) var(--admin-space-2xs);
    padding: 0;
    border-bottom: 1px solid var(--figma-floating-menu-border);
    background: var(--figma-floating-menu-bg);
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__mobile-layer-back {
    display: flex;
    align-items: center;
    gap: var(--admin-space-sm);
    width: 100%;
    min-height: 5.6rem;
    padding: 0 var(--admin-space-lg);
    border: 0;
    background: transparent;
    color: var(--figma-floating-menu-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__mobile-layer-back:focus-visible {
    outline: 2px solid var(--admin-drawer-focus-ring);
    outline-offset: -2px;
  }
  body.admin-shell-v2 .admin-drawer--figma-floating .admin-drawer__mobile-layer-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
body.admin-shell-v2 .admin-drawer__body {
  scrollbar-gutter: stable;
}
body.admin-shell-v2 .admin-drawer__utility {
  display: grid;
  gap: var(--figma-drawer-row-gap);
  margin: auto var(--figma-drawer-gutter) var(--admin-space-lg);
  padding-top: var(--admin-space-lg);
  border-top: 1px solid var(--admin-shell-surface-border);
}
body.admin-shell-v2 .admin-drawer__utility-link {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  min-height: var(--figma-control-height);
  padding: 0 var(--figma-drawer-row-padding-x);
  border-radius: var(--figma-drawer-row-radius);
  color: var(--color-text-secondary);
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-drawer__utility-link:hover, body.admin-shell-v2 .admin-drawer__utility-link:focus-visible {
  background: var(--admin-shell-action-bg-hover);
  color: var(--color-text-primary);
  outline: 0;
}
body.admin-shell-v2 .admin-drawer__utility-link span {
  flex: 1;
  min-width: 0;
}
body.admin-shell-v2 .admin-drawer__utility-external {
  font-size: 1rem;
  opacity: 0.65;
}
body.admin-shell-v2 .admin-page__header,
body.admin-shell-v2 .admin-page-header,
body.admin-shell-v2 .admin-card,
body.admin-shell-v2 .admin-panel,
body.admin-shell-v2 .admin-form,
body.admin-shell-v2 .admin-search-panel,
body.admin-shell-v2 .admin-list-panel,
body.admin-shell-v2 .admin-index-filter,
body.admin-shell-v2 .admin-dash-filter,
body.admin-shell-v2 .admin-dash-section,
body.admin-shell-v2 .admin-stat-card {
  background: transparent;
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  box-shadow: none;
}
body.admin-shell-v2 .admin-card,
body.admin-shell-v2 .admin-panel,
body.admin-shell-v2 .admin-form,
body.admin-shell-v2 .admin-search-panel,
body.admin-shell-v2 .admin-list-panel,
body.admin-shell-v2 .admin-dash-filter,
body.admin-shell-v2 .admin-dash-section,
body.admin-shell-v2 .admin-stat-card {
  border: 1px solid var(--color-border-default);
  padding: var(--figma-surface-padding);
}
body.admin-shell-v2 .admin-page--form,
body.admin-shell-v2 .admin-page:has(> .admin-form),
body.admin-shell-v2 .admin-page:has(> .admin-form__section--tabs) {
  max-width: 96rem;
}
body.admin-shell-v2 .admin-form {
  max-width: 84rem;
}
body.admin-shell-v2 .admin-form--wide {
  max-width: 112rem;
}
body.admin-shell-v2 .cs-trigger,
body.admin-shell-v2 .mcs-trigger,
body.admin-shell-v2 .admin-form__input,
body.admin-shell-v2 .admin-input,
body.admin-shell-v2 .admin-select,
body.admin-shell-v2 select.admin-form__input {
  min-height: var(--figma-select-height);
  padding-inline: var(--figma-control-padding-x);
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-primary);
  font-size: 1.2rem;
  line-height: 1.6rem;
}
body.admin-shell-v2 .cs-trigger,
body.admin-shell-v2 .mcs-trigger,
body.admin-shell-v2 .admin-select,
body.admin-shell-v2 select.admin-form__input {
  border-radius: 0.8rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
}
body.admin-shell-v2 .cs-dropdown,
body.admin-shell-v2 .mcs-dropdown {
  background: var(--figma-floating-menu-bg, var(--figma-menu-bg));
  border-color: var(--admin-shell-surface-border);
  border-radius: 2rem;
  box-shadow: var(--shadow-floating);
  padding: var(--admin-space-2xs);
}
body.admin-shell-v2 .cs-option,
body.admin-shell-v2 .mcs-option {
  min-height: var(--figma-control-height);
  padding-inline: var(--admin-space-md);
  border-radius: 0.8rem;
  color: var(--color-text-primary);
  font-size: 1.6rem;
  line-height: 2.4rem;
}
body.admin-shell-v2 .cs-option:hover:not(.cs-option--disabled):not(.cs-option--empty):not(.cs-option--selected), body.admin-shell-v2 .cs-option:hover:not(.mcs-option--disabled):not(.mcs-option--empty):not(.mcs-option--selected),
body.admin-shell-v2 .mcs-option:hover:not(.cs-option--disabled):not(.cs-option--empty):not(.cs-option--selected),
body.admin-shell-v2 .mcs-option:hover:not(.mcs-option--disabled):not(.mcs-option--empty):not(.mcs-option--selected) {
  background: var(--figma-menu-row-hover);
  color: var(--color-text-primary);
}
body.admin-shell-v2 .cs-option--active:not(.cs-option--selected):not(.cs-option--disabled),
body.admin-shell-v2 .mcs-option--active:not(.mcs-option--selected):not(.mcs-option--disabled) {
  background: var(--figma-menu-row-active);
  color: var(--figma-menu-row-active-text);
}
body.admin-shell-v2 .cs-option--selected,
body.admin-shell-v2 .mcs-option--selected {
  background: transparent;
  color: var(--color-text-primary);
}
body.admin-shell-v2 .cs-option--selected.cs-option--active,
body.admin-shell-v2 .mcs-option--selected.mcs-option--active,
body.admin-shell-v2 .cs-option--selected:hover:not(.cs-option--disabled):not(.cs-option--empty),
body.admin-shell-v2 .mcs-option--selected:hover:not(.mcs-option--disabled):not(.mcs-option--empty) {
  background: transparent;
  color: var(--color-text-primary);
}
body.admin-shell-v2 .cs-option__check,
body.admin-shell-v2 .mcs-option__check {
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-page__title,
body.admin-shell-v2 .admin-page-header__title {
  color: var(--color-text-primary);
  font-size: var(--admin-fs-display);
  line-height: 3rem;
  font-weight: 650;
  letter-spacing: 0;
}
body.admin-shell-v2 .admin-page__subtitle,
body.admin-shell-v2 .admin-page-header__desc {
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1.7rem;
}
body.admin-shell-v2 .admin-page__header,
body.admin-shell-v2 .admin-page-header {
  margin-bottom: var(--admin-space-xl);
  padding: var(--admin-space-lg) 0 var(--admin-space-xl);
  border: 0;
  background: transparent;
}
body.admin-shell-v2 .admin-page__toolbar,
body.admin-shell-v2 .admin-page__header-actions,
body.admin-shell-v2 .admin-index-filter__filters,
body.admin-shell-v2 .admin-index-filter__search,
body.admin-shell-v2 .admin-dash-filter__actions {
  gap: var(--admin-space-sm);
}
body.admin-shell-v2 .admin-index-filter {
  margin-bottom: var(--admin-space);
  padding: var(--admin-space) 0;
  border-width: 1px 0;
  border-radius: 0;
}
body.admin-shell-v2 .admin-dash-section {
  overflow: hidden;
}
body.admin-shell-v2 .admin-dash-section__hd,
body.admin-shell-v2 .admin-dash-section__body,
body.admin-shell-v2 .admin-stat-card__icon {
  background: transparent;
  border-color: var(--color-border-default);
  box-shadow: none;
}
body.admin-shell-v2 .admin-stat-card {
  gap: var(--admin-space);
  transform: none;
}
body.admin-shell-v2 .admin-stat-card:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  box-shadow: none;
  transform: none;
}
@media (max-width: 1024px) {
  body.admin-shell-v2 {
    --admin-shell-content-padding-inline: var(--admin-space-xl);
    --admin-shell-content-padding-block: var(--admin-space-lg);
  }
  body.admin-shell-v2 .admin-header__tools {
    display: none;
  }
  body.admin-shell-v2 .admin-drawer {
    width: min(100vw, 39.6rem);
    max-width: 100vw;
  }
  body.admin-shell-v2 .admin-drawer__figma-footer {
    padding: var(--admin-space-sm);
    border-top: 1px solid var(--admin-shell-surface-border);
  }
  body.admin-shell-v2 .admin-drawer__figma-upgrade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--admin-space-sm);
    min-height: var(--figma-control-height);
    padding: 0 var(--figma-drawer-row-padding-x);
    text-align: left;
  }
  body.admin-shell-v2 .admin-drawer__figma-upgrade-icon {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.1rem;
  }
  body.admin-shell-v2 .admin-drawer__figma-upgrade-copy {
    display: none;
  }
  body.admin-shell-v2 .admin-drawer__figma-upgrade-button {
    width: auto;
    min-height: 3.2rem;
    padding-inline: var(--admin-space);
    white-space: nowrap;
  }
}
@media (max-width: 768px) {
  body.admin-shell-v2 {
    --admin-shell-content-padding-inline: var(--admin-space);
    --admin-shell-content-padding-block: var(--admin-space);
  }
  body.admin-shell-v2 .admin-drawer {
    width: 100vw;
  }
  body.admin-shell-v2 .admin-header {
    gap: var(--admin-space-xs);
  }
  body.admin-shell-v2 .admin-header__history {
    display: none;
  }
}

html[data-admin-theme=light] body.admin-shell-v2,
html[data-theme=light] body.admin-shell-v2 {
  color-scheme: light;
  --figma-menu-row-hover: #eeeeee;
  --figma-menu-row-open: #eeeeee;
  --figma-menu-row-active: #e7edf9;
  --figma-menu-row-active-hover: #dce5f6;
  --figma-menu-row-active-text: #1f1f1f;
  --figma-menu-row-active-icon: #1f1f1f;
  --figma-floating-menu-bg: #ffffff;
  --figma-floating-menu-border: #d9d9d9;
  --figma-floating-menu-text: #1f1f1f;
  --figma-floating-menu-text-hover: #1f1f1f;
  --figma-floating-menu-label: #6b6b6b;
  --figma-badge-admin-bg: #e5f4ff;
  --figma-badge-admin-text: #0b5f9e;
  --figma-badge-dev-bg: #eeeeee;
  --figma-badge-dev-text: #5f5f5f;
  --figma-badge-free-bg: #e6e6e6;
  --figma-badge-free-text: #1f1f1f;
  --figma-notice-unread-bg: #fff5f5;
  --figma-notice-unread-text: #c81e1e;
  --figma-notice-unread-border: #f1b6b6;
  --figma-switch-off-bg: #ffffff;
  --figma-switch-off-border: #c7c7c7;
  --figma-switch-thumb-off-bg: #ffffff;
  --figma-switch-on-bg: #0d99ff;
  --figma-switch-on-border: #0d99ff;
  --figma-switch-thumb-on-bg: #ffffff;
}
html[data-admin-theme=light] body.admin-shell-v2 .admin-drawer--figma-floating,
html[data-theme=light] body.admin-shell-v2 .admin-drawer--figma-floating {
  --figma-floating-menu-bg: #ffffff;
  --figma-floating-menu-border: #d9d9d9;
  --figma-floating-menu-text: #1f1f1f;
  --figma-floating-menu-text-hover: #1f1f1f;
  --figma-floating-menu-label: #6b6b6b;
}

.admin-auth__password-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  min-height: var(--admin-size-input-height);
  border-radius: 0.6rem;
  border: 1px solid var(--admin-border);
  background: var(--admin-white);
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
  overflow: hidden;
}
.admin-auth__password-wrap:hover {
  border-color: rgba(var(--admin-primary-rgb), 0.4);
}
.admin-auth__password-wrap:focus-within {
  border-color: var(--admin-border-focus);
  box-shadow: 0 0 0 0.2rem rgba(var(--admin-primary-rgb), 0.1);
}
.admin-auth__password-wrap .admin-auth__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--admin-size-input-height);
  height: auto;
  border: none;
  border-radius: 0;
  padding: 0.9rem var(--admin-size-input-height) 0.9rem 1.2rem;
  background: transparent;
  box-shadow: none;
}
.admin-auth__password-wrap .admin-auth__input:focus {
  box-shadow: none;
}

.admin-auth__password-toggle {
  flex: 0 0 var(--admin-size-input-height);
  width: var(--admin-size-input-height);
  min-width: var(--admin-size-input-height);
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  border-left: 1px solid var(--admin-border-light);
  background: transparent;
  color: var(--admin-text-muted);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-auth__password-toggle:hover {
  color: var(--admin-text-secondary);
  background: var(--admin-state-hover);
}
.admin-auth__password-toggle:active {
  background: var(--admin-state-pressed);
}
.admin-auth__password-toggle:focus {
  outline: none;
}
.admin-auth__password-toggle:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: -2px;
}
.admin-auth__password-toggle .admin-auth__toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.admin-auth__password-toggle .admin-auth__toggle-icon i {
  font-size: var(--admin-fs-body);
}

.admin.admin--auth .admin-auth__password-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
.admin.admin--auth .admin-auth__password-wrap > .admin-auth__input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.admin.admin--auth .admin-auth__password-wrap > .admin-auth__password-toggle {
  flex: 0 0 var(--admin-size-input-height) !important;
  width: var(--admin-size-input-height) !important;
  min-width: var(--admin-size-input-height) !important;
  display: inline-flex !important;
  align-self: stretch !important;
}

.admin-header {
  flex-shrink: 0;
  height: var(--admin-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--admin-space-lg) 0 var(--admin-space-lg);
  gap: var(--admin-space);
  background: var(--admin-header-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 80;
}
@media (max-width: 1024px) {
  .admin-header {
    padding: 0 var(--admin-space) 0 var(--admin-space);
  }
}

.admin-header__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--admin-radius-sm);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font: inherit;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
  flex-shrink: 0;
}
.admin-header__menu-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.admin-header__menu-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}
.admin-header__menu-btn .admin-header__menu-icon {
  font-size: var(--admin-fs-body);
}
.admin-header__menu-btn .admin-header__menu-icon--close {
  display: none;
}
@media (max-width: 1024px) {
  .admin-header__menu-btn {
    display: inline-flex;
  }
}

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

body.admin--drawer-open .admin-header__menu-icon--close {
  display: inline-block !important;
}

.admin-header__breadcrumb {
  flex: 1;
  min-width: 0;
  margin: 0 var(--admin-space-sm) 0 0;
}
@media (max-width: 1024px) {
  .admin-header__breadcrumb {
    display: none !important;
    margin-right: var(--admin-space-2xs);
  }
}

.admin-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--admin-space-2xs);
  font-size: var(--admin-fs-sm);
}
@media (max-width: 1024px) {
  .admin-breadcrumb {
    font-size: var(--admin-fs-base);
  }
}

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

.admin-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: #d9ecff;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  transition: color var(--admin-duration) var(--admin-ease);
}
.admin-breadcrumb__link:hover {
  color: #fff;
}
.admin-breadcrumb__link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.admin-breadcrumb__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b8d9f5;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.admin-breadcrumb__sep i {
  font-size: var(--admin-fs-xs);
}

.admin-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}

.admin-breadcrumb__node {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--admin-space-3xs);
}

.admin-breadcrumb__home-icon {
  flex: 0 0 auto;
}

.admin-breadcrumb__home-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.admin-breadcrumb__dropdown {
  display: inline-flex;
  align-items: center;
}

.admin-breadcrumb__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 3rem;
  max-width: 28rem;
  padding: 0 var(--admin-space-2xs);
  gap: var(--admin-space-2xs);
  border: 0;
  border-radius: var(--admin-radius-sm);
  color: #fff;
  background: transparent;
  cursor: pointer;
  list-style: none;
  line-height: 1.25;
  transition: background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-breadcrumb__trigger::-webkit-details-marker, .admin-breadcrumb__trigger::marker {
  display: none;
}
.admin-breadcrumb__trigger i {
  flex-shrink: 0;
  font-size: var(--admin-fs-xs);
  transition: transform var(--admin-duration) var(--admin-ease);
}
.admin-breadcrumb__trigger:hover, .admin-breadcrumb__trigger[aria-expanded=true], .admin-breadcrumb__dropdown[open] .admin-breadcrumb__trigger {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.admin-breadcrumb__trigger[aria-expanded=true] i, .admin-breadcrumb__dropdown[open] .admin-breadcrumb__trigger i {
  transform: rotate(180deg);
}
.admin-breadcrumb__trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.admin-breadcrumb__item--current .admin-breadcrumb__trigger {
  color: #fff;
}

.admin-breadcrumb__trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.admin-breadcrumb__trigger-label--current {
  font-weight: 700;
}

.admin-breadcrumb__menu {
  position: absolute;
  top: calc(100% + var(--admin-space-2xs));
  left: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  min-width: 24rem;
  max-width: min(44.8rem, 100vw - var(--admin-space-xl));
  max-height: min(42rem, 100vh - var(--admin-header-height) - var(--admin-space-lg));
  padding: var(--admin-space-2xs);
  overflow-y: auto;
  background: var(--figma-floating-menu-bg, var(--figma-menu-bg, #1f1f1f));
  border: 1px solid var(--figma-floating-menu-border, var(--color-border-subtle));
  border-radius: 1.6rem;
  box-shadow: var(--shadow-floating);
}
.admin-breadcrumb__menu[hidden], .admin-breadcrumb__dropdown:not([open]) .admin-breadcrumb__menu {
  display: none;
}

.admin-breadcrumb__menu-item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  min-width: 0;
  min-height: var(--figma-control-height, 4.8rem);
  padding: 0 var(--admin-space-md);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--admin-fs-body);
  font-weight: 500;
  line-height: 1.8rem;
  border-radius: 0.8rem;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-breadcrumb__menu-item:hover, .admin-breadcrumb__menu-item:focus-visible {
  background: var(--figma-menu-row-hover, var(--color-bg-hover));
  color: var(--color-text-primary);
}
.admin-breadcrumb__menu-item:focus-visible {
  outline: none;
}
.admin-breadcrumb__menu-item--current {
  color: #ffffff;
  background: var(--color-action-primary);
  cursor: default;
}

.admin-breadcrumb__menu-icon {
  flex-shrink: 0;
  width: 1.8rem;
  color: currentColor;
  text-align: center;
}

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

.admin-header__actions {
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs);
}
@media (max-width: 1024px) {
  .admin-header__actions .admin-header__action--link {
    display: inline-flex;
  }
}

.admin-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 4rem;
  padding: 0 var(--admin-space-sm);
  border-radius: var(--admin-radius-full);
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-header__action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}
.admin-header__action:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}
.admin-header__action i {
  font-size: 1.8rem;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .admin-header__action {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 4px 8px;
    min-width: 44px;
    min-height: 48px;
  }
}
@media (max-width: 1024px) {
  .admin-header__action:not(.admin-header__action--link) {
    display: none;
  }
}

.admin-header__action-label {
  white-space: nowrap;
  font-size: var(--admin-fs-sm);
}
@media (max-width: 1024px) {
  .admin-header__action-label {
    display: block;
    font-size: 9px;
    line-height: 1;
    text-align: center;
    margin-top: 2px;
  }
}

.admin-header__menu {
  position: relative;
}
.admin-header__menu > summary {
  list-style: none;
}
.admin-header__menu > summary::-webkit-details-marker, .admin-header__menu > summary::marker {
  display: none;
}
.admin-header__menu[open] > summary {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}
.admin-header__menu[open] > summary .admin-header__action-caret {
  transform: rotate(180deg);
}

.admin-header__action--menu {
  cursor: pointer;
  gap: 0.4rem;
}

.admin-header__action-caret {
  font-size: var(--admin-fs-xs);
  opacity: 0.7;
  transition: transform var(--admin-duration) var(--admin-ease);
}
@media (max-width: 1024px) {
  .admin-header__action-caret {
    display: none;
  }
}

.admin-header__menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--admin-border-light);
  padding: var(--admin-space-xs) 0;
  z-index: 200;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .admin-header__menu-dropdown {
    right: 0;
  }
}

.admin-header__menu-item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  width: 100%;
  padding: var(--admin-space-sm) var(--admin-space-lg);
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
  box-sizing: border-box;
}
.admin-header__menu-item:hover {
  background: var(--admin-grey-50);
  color: var(--admin-text);
}
.admin-header__menu-item:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: -2px;
}
.admin-header__menu-item i {
  flex-shrink: 0;
  width: 1.1em;
  text-align: center;
  color: var(--admin-grey-400);
  font-size: var(--admin-fs-body);
  transition: color var(--admin-duration) var(--admin-ease);
}
.admin-header__menu-item:hover i {
  color: var(--admin-grey-600);
}
.admin-header__menu-item > span {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.admin-header__actions-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  margin: 0 var(--admin-space-2xs);
}
@media (max-width: 1024px) {
  .admin-header__actions-divider {
    display: none;
  }
}

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

.admin-header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  cursor: pointer;
  list-style: none;
  padding: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-header__avatar::-webkit-details-marker, .admin-header__avatar::marker {
  display: none;
}
.admin-header__avatar:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 3px 10px rgba(0, 0, 0, 0.3);
}
.admin-header__avatar:has(.admin-header__avatar-img) {
  background: var(--admin-grey-200);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.admin-header__avatar--lg {
  width: 52px;
  height: 52px;
  cursor: default;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.admin-header__avatar-letter {
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: #0a0a0a;
  line-height: 1;
  letter-spacing: -0.01em;
}

.admin-header__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.admin-header__avatar--lg .admin-header__avatar-letter {
  font-size: var(--admin-fs-body-lg);
  font-weight: 800;
  color: #0a0a0a;
}

.admin-header__avatar--lg .admin-header__avatar-img {
  width: 52px;
  height: 52px;
}

.admin-header__dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 268px;
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--admin-border-light);
  padding: 0;
  z-index: 200;
  overflow: hidden;
}

.admin-header__dropdown-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--admin-space-xl) var(--admin-space-xl) var(--admin-space-lg);
  padding-top: calc(var(--admin-space-3xl) + var(--admin-space));
}

.admin-header__dropdown-head-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--admin-size-dropdown-head-bg);
  background: linear-gradient(135deg, var(--admin-header-bg-hover) 0%, var(--admin-header-bg) 100%);
  border-radius: var(--admin-radius-lg) var(--admin-radius-lg) 0 0;
}

.admin-header__dropdown-head .admin-header__avatar--lg {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--admin-size-icon-lg) * -1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.admin-header__dropdown-name {
  position: relative;
  z-index: 1;
  margin-top: var(--admin-space-sm);
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  letter-spacing: -0.01em;
}

.admin-header__dropdown-role {
  position: relative;
  z-index: 1;
  margin-top: var(--admin-space-3xs);
  font-size: var(--admin-fs-xs);
  font-weight: 500;
  color: var(--admin-text-muted);
  background: var(--admin-grey-100);
  padding: 2px var(--admin-space-xs);
  border-radius: var(--admin-radius-full);
}

.admin-header__dropdown-list {
  padding: var(--admin-space-xs) 0;
  border-top: 1px solid var(--admin-border-light);
}

.admin-header__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  width: 100%;
  padding: var(--admin-space-sm) var(--admin-space-lg);
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
  box-sizing: border-box;
}
.admin-header__dropdown-item:hover {
  background: var(--admin-grey-50);
  color: var(--admin-text);
}
.admin-header__dropdown-item:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: -2px;
}
.admin-header__dropdown-item i {
  flex-shrink: 0;
  width: 1.1em;
  text-align: center;
  color: var(--admin-grey-400);
  font-size: var(--admin-fs-body);
  transition: color var(--admin-duration) var(--admin-ease);
}
.admin-header__dropdown-item:hover i {
  color: var(--admin-grey-600);
}
.admin-header__dropdown-item > span {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.admin-header__dropdown-item--logout {
  color: var(--admin-error);
  font-weight: 500;
  margin-top: var(--admin-space-3xs);
  padding-top: var(--admin-space-sm);
  border-top: 1px solid var(--admin-border-light);
}
.admin-header__dropdown-item--logout:hover {
  background: var(--admin-error-bg);
  color: var(--admin-error);
}
.admin-header__dropdown-item--logout i {
  color: var(--admin-error);
  opacity: 0.7;
}
.admin-header__dropdown-item--logout:hover i {
  color: var(--admin-error);
  opacity: 1;
}

.admin-header__dropdown-form {
  margin: 0;
  padding: 0;
  border: none;
}

.admin-header__notifications {
  position: relative;
}

.admin-header__notifications-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1024px) {
  .admin-header__notifications-bell-wrap {
    position: relative;
  }
}

.admin-header__notifications-unread-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: var(--admin-radius-full);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
  background: rgba(255, 255, 255, 0.95);
  color: #111111;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.admin-header__notifications-unread-pill.is-unread {
  background: #ffffff;
  color: #c81e1e;
  border-color: rgba(200, 30, 30, 0.25);
  box-shadow: 0 0 0 1.5px rgba(200, 30, 30, 0.18), 0 2px 8px rgba(0, 0, 0, 0.35);
}
@media (max-width: 1024px) {
  .admin-header__notifications-unread-pill {
    position: absolute;
    top: 4px;
    right: 4px;
    margin-left: 0;
  }
}

.admin-header__notifications summary::-webkit-details-marker,
.admin-header__notifications summary::marker {
  display: none;
}

.admin-header__notifications-dropdown {
  position: absolute;
  top: calc(100% + var(--admin-space));
  right: 0;
  width: min(76.8rem, 100vw - var(--admin-space-2xl));
  min-width: 36rem;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--admin-border-light);
  z-index: 200;
  overflow: hidden;
}

.admin-header__notifications-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-xl) var(--admin-space-2xl);
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-header__notifications-head-title {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-xs);
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text);
}

.admin-header__notifications-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-left: auto;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text-secondary);
  text-decoration: none;
}
.admin-header__notifications-settings:hover, .admin-header__notifications-settings:focus-visible {
  color: var(--admin-text);
  background: var(--admin-grey-50);
  outline: 0;
}

.admin-header__notifications-nav {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
  padding: var(--admin-space) var(--admin-space-2xl);
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-header__notifications-head-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.6rem;
  padding: 0 0.5rem;
  border-radius: var(--admin-radius-full);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--admin-text-secondary);
  background: var(--admin-grey-100);
}
.admin-header__notifications-head-count--unread, .admin-header__notifications-head-count.is-unread {
  color: #ffffff;
  background: var(--admin-primary);
}

.admin-header__notifications-tabs {
  display: flex;
  flex: 1 1 auto;
  gap: var(--admin-space-2xs);
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-header__notifications-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  flex-shrink: 0;
  min-height: 3.2rem;
  padding: 0 var(--admin-space);
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  color: var(--admin-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-tab:hover {
  background: var(--admin-grey-50);
  color: var(--admin-text);
}
.admin-header__notifications-tab--active {
  background: var(--admin-primary-soft, rgba(59, 130, 246, 0.1));
  color: var(--admin-primary);
  border-color: var(--admin-primary-soft, rgba(59, 130, 246, 0.2));
}

.admin-header__notifications-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.1rem;
  padding: 0 0.35rem;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background: var(--admin-primary);
  border-radius: var(--admin-radius-full);
}

.admin-header__notifications-list {
  padding: 0;
  max-height: min(68vh, 64rem);
  overflow-y: auto;
}

.admin-header__notifications-loading {
  margin: 0;
  padding: var(--admin-space-xl);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  text-align: center;
}

.admin-header__notifications-item {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--admin-space-lg);
  padding: var(--admin-space-lg) var(--admin-space-2xl);
  border-bottom: 0;
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-item:last-child {
  border-bottom: none;
}
.admin-header__notifications-item:hover {
  background: var(--admin-grey-50);
}
.admin-header__notifications-item.is-unread {
  background: transparent;
}
.admin-header__notifications-item.is-unread:hover {
  background: var(--admin-grey-50);
}

.admin-header__notifications-item-link {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-lg);
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.admin-header__notifications-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  font-size: 0.95rem;
}
.admin-header__notifications-item.is-unread .admin-header__notifications-item-icon {
  background: var(--admin-primary-soft, rgba(59, 130, 246, 0.15));
  color: var(--admin-primary);
}

.admin-header__notifications-item-body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
  flex: 1;
  min-width: 0;
}

.admin-header__notifications-item-title {
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-header__notifications-item-msg {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.admin-header__notifications-item-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2px;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}

.admin-header__notifications-item-group-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--admin-text-secondary);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-full);
}

.admin-header__notifications-item-time {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}

.admin-header__notifications-item-mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  margin: 0;
}
.admin-header__notifications-item-mark button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--admin-border-light);
  border-radius: 50%;
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-item-mark button:hover {
  background: var(--admin-primary);
  color: #ffffff;
  border-color: var(--admin-primary);
}

.admin-header__notifications-item--empty {
  display: block;
  padding: var(--admin-space-xl);
  color: var(--admin-text-muted);
  text-align: center;
  font-size: var(--admin-fs-sm);
}

.admin-header__notifications-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--admin-space-2xs);
  padding: var(--admin-space) var(--admin-space-2xl);
  border-top: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50);
}

.admin-header__notifications-mark-all-form {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  border-right: 0;
}

.admin-header__notifications-mark-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-2xs);
  width: auto;
  min-height: 3.2rem;
  padding: 0 var(--admin-space);
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-mark-all:hover {
  background: var(--admin-grey-100);
  color: var(--admin-primary);
}

.admin-header__notifications-all,
.admin-header__notifications-log {
  flex: 0 0 auto;
  min-width: 0;
  padding: var(--admin-space-sm) var(--admin-space);
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-primary);
  text-align: center;
  text-decoration: none;
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-all:hover,
.admin-header__notifications-log:hover {
  background: var(--admin-grey-100);
}

.admin-header__notifications-log {
  border-left: 1px solid var(--admin-border-light);
  color: var(--admin-text-secondary);
  font-weight: 500;
}
.admin-header__notifications-log:hover {
  color: var(--admin-primary);
}

.admin-header__theme-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.admin-header__theme-icon--light {
  display: none;
}
.admin-header__theme-icon--dark {
  display: inline-block;
}

:root[data-admin-theme=light] .admin-header__theme-icon--light,
:root[data-theme=light] .admin-header__theme-icon--light,
[data-forced-theme=light] .admin-header__theme-icon--light {
  display: inline-block;
}
:root[data-admin-theme=light] .admin-header__theme-icon--dark,
:root[data-theme=light] .admin-header__theme-icon--dark,
[data-forced-theme=light] .admin-header__theme-icon--dark {
  display: none;
}

:root[data-admin-theme=dark] .admin-header__theme-icon--light,
:root[data-theme=dark] .admin-header__theme-icon--light,
[data-forced-theme=dark] .admin-header__theme-icon--light {
  display: none;
}
:root[data-admin-theme=dark] .admin-header__theme-icon--dark,
:root[data-theme=dark] .admin-header__theme-icon--dark,
[data-forced-theme=dark] .admin-header__theme-icon--dark {
  display: inline-block;
}

.admin-header__theme-dropdown {
  min-width: 18rem;
}

.admin-header__theme-group-label {
  display: block;
  padding: 0.5rem 1rem 0.2rem;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  cursor: default;
  user-select: none;
  border-top: 1px solid var(--admin-border-light);
  margin-top: 0.2rem;
}
.admin-header__theme-group-label:first-of-type {
  border-top: none;
  margin-top: 0;
}

.admin-header__theme-check {
  margin-left: auto;
  font-size: var(--admin-fs-xs);
  color: var(--admin-primary);
  opacity: 0;
  flex-shrink: 0;
}

.admin-header__theme-item[aria-checked=true] .admin-header__theme-check {
  opacity: 1;
}

[data-admin-theme=dark] .admin-header__menu-dropdown,
[data-admin-theme=dark] .admin-header__dropdown-menu,
[data-admin-theme=dark] .admin-header__notifications-dropdown,
[data-theme=dark] .admin-header__menu-dropdown,
[data-theme=dark] .admin-header__dropdown-menu,
[data-theme=dark] .admin-header__notifications-dropdown {
  background: var(--admin-card-bg);
  border-color: var(--admin-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--admin-border);
}
[data-admin-theme=dark] .admin-header__dropdown-list,
[data-admin-theme=dark] .admin-header__notifications-list,
[data-admin-theme=dark] .admin-header__notifications-footer,
[data-theme=dark] .admin-header__dropdown-list,
[data-theme=dark] .admin-header__notifications-list,
[data-theme=dark] .admin-header__notifications-footer {
  border-color: var(--admin-border);
}
[data-admin-theme=dark] .admin-header__notifications-item,
[data-theme=dark] .admin-header__notifications-item {
  border-color: var(--admin-border);
}
[data-admin-theme=dark] .admin-header__dropdown-item--logout,
[data-theme=dark] .admin-header__dropdown-item--logout {
  border-top-color: var(--admin-border);
}
[data-admin-theme=dark] .admin-header__notifications-log,
[data-theme=dark] .admin-header__notifications-log {
  border-left-color: var(--admin-border);
}
[data-admin-theme=dark] .admin-header__actions-divider,
[data-theme=dark] .admin-header__actions-divider {
  background: rgba(255, 255, 255, 0.1);
}
[data-admin-theme=dark] .admin-header__dropdown-role,
[data-theme=dark] .admin-header__dropdown-role {
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
}

.admin-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--admin-drawer-width);
  display: flex;
  flex-direction: column;
  background: var(--admin-drawer-bg);
  z-index: 90;
  overflow: hidden;
  border-right: 1px solid var(--admin-drawer-border);
  transition: transform var(--admin-duration-long) var(--admin-ease), box-shadow var(--admin-duration-long) var(--admin-ease);
}
@media (max-width: 1024px) {
  .admin-drawer {
    transform: translateX(-100%);
  }
}
@media (max-width: 1024px) {
  .admin--drawer-open .admin-drawer {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
  }
}

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

.admin-drawer__logo {
  display: block;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  transition: opacity var(--admin-duration) var(--admin-ease);
}
.admin-drawer__logo:hover {
  opacity: 0.85;
}
.admin-drawer__logo:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}
.admin-drawer__logo .admin-drawer__logo-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 44px;
  object-fit: contain;
  object-position: left center;
}
.admin-drawer__logo .admin-drawer__logo-img--dark {
  display: none;
}

[data-admin-theme=dark] .admin-drawer__logo .admin-drawer__logo-img--light,
[data-theme=dark] .admin-drawer__logo .admin-drawer__logo-img--light {
  display: none;
}
[data-admin-theme=dark] .admin-drawer__logo .admin-drawer__logo-img--dark,
[data-theme=dark] .admin-drawer__logo .admin-drawer__logo-img--dark {
  display: block;
}

.admin-drawer--drilldown {
  width: var(--admin-drawer-width);
}

.admin-drawer__stack {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.admin-drawer__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--admin-drawer-bg);
  transform: translateX(100%);
  transition: transform var(--admin-duration-long) var(--admin-ease);
  visibility: hidden;
}
.admin-drawer__panel.is-active {
  transform: translateX(0);
  visibility: visible;
}
.admin-drawer__panel.is-prev {
  transform: translateX(-100%);
  visibility: visible;
}
.admin-drawer__panel.is-no-animate {
  transition: none;
}

.admin-drawer__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: var(--admin-space-2xs) var(--admin-space-2xs);
  min-height: var(--admin-header-height);
  border-bottom: 1px solid var(--admin-drawer-border);
}

.admin-drawer__back {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 1px var(--admin-space-xs);
  padding: var(--admin-space-xs) var(--admin-space-sm);
  min-height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  color: var(--admin-drawer-text);
  font: inherit;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.35;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer__back:hover {
  background: var(--admin-drawer-hover-bg);
  color: var(--admin-drawer-text-active);
}
.admin-drawer__back:focus-visible {
  outline: 2px solid var(--admin-drawer-focus-ring);
  outline-offset: 2px;
}

.admin-drawer__back-icon {
  font-size: 1.2rem;
  opacity: 0.85;
}

.admin-drawer__back-text {
  line-height: 1.2;
}

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

.admin-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-drawer__divider {
  height: 1px;
  background: var(--admin-drawer-border);
  margin: var(--admin-space-xs) var(--admin-space-xs);
  list-style: none;
}

.admin-drawer__list-group-label {
  list-style: none;
  margin: var(--admin-space-xs) var(--admin-space-xs) 2px;
  padding: 4px var(--admin-space-sm) 2px;
  color: color-mix(in srgb, var(--admin-drawer-text) 80%, transparent);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

.admin-drawer__drill {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  width: calc(100% - 2 * var(--admin-space-xs));
  margin: 1px var(--admin-space-xs);
  padding: var(--admin-space-xs) var(--admin-space-sm);
  min-height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  color: var(--admin-drawer-text);
  font: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  text-align: left;
  letter-spacing: 0.01em;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer__drill:hover {
  background: var(--admin-drawer-hover-bg);
  color: var(--admin-drawer-text-active);
}
.admin-drawer__drill:focus-visible {
  outline: 2px solid var(--admin-drawer-focus-ring);
  outline-offset: 2px;
}
.admin-drawer__drill--active {
  background: var(--admin-drawer-active-bg);
  color: var(--admin-drawer-active-accent);
  font-weight: 700;
}

.admin-drawer__drill-icon {
  flex-shrink: 0;
  width: 1.6rem;
  text-align: center;
  font-size: 1.4rem;
  color: inherit;
  opacity: 0.75;
}

.admin-drawer__drill--active .admin-drawer__drill-icon {
  opacity: 1;
}

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

.admin-drawer__drill-chevron {
  flex-shrink: 0;
  font-size: 1.1rem;
  opacity: 0.5;
  transition: transform var(--admin-duration) var(--admin-ease);
}

.admin-drawer__drill:hover .admin-drawer__drill-chevron {
  transform: translateX(2px);
  opacity: 0.8;
}

.admin-drawer__leaf {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 1px var(--admin-space-xs);
  padding: var(--admin-space-xs) var(--admin-space-sm);
  min-height: 40px;
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  color: var(--admin-drawer-text);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.35;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer__leaf:hover {
  background: var(--admin-drawer-hover-bg);
  color: var(--admin-drawer-text-active);
}
.admin-drawer__leaf:focus-visible {
  outline: 2px solid var(--admin-drawer-focus-ring);
  outline-offset: 2px;
}
.admin-drawer__leaf--active {
  background: var(--admin-drawer-active-bg);
  color: var(--admin-drawer-active-accent);
  font-weight: 700;
  border-left: var(--admin-drawer-active-bar);
  border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}
.admin-drawer__leaf--active .admin-drawer__leaf-icon {
  color: var(--admin-drawer-active-accent);
  opacity: 1;
}
.admin-drawer__leaf--active:hover {
  background: var(--admin-drawer-active-bg);
  color: var(--admin-drawer-active-accent);
}

.admin-drawer__leaf-icon {
  flex-shrink: 0;
  width: 1.6rem;
  text-align: center;
  font-size: 1.4rem;
  color: inherit;
  opacity: 0.75;
}

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

.admin-drawer__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: var(--admin-radius-full);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(245, 158, 11, 0.12);
  color: var(--admin-warn-text);
  margin-right: var(--admin-space-2xs);
}

.admin-drawer--tree {
  width: var(--admin-drawer-width);
}
.admin-drawer--tree .admin-drawer__nav {
  overflow-y: auto;
  display: block;
}
.admin-drawer--tree .admin-drawer__menu {
  list-style: none;
  margin: 0;
  padding: var(--admin-space-xs) 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
}
.admin-drawer--tree .admin-drawer__menu-item {
  margin: 0;
}
.admin-drawer--tree .admin-sidebar__home {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 0 var(--admin-space-xs);
  padding: var(--admin-space-xs) var(--admin-space-sm);
  min-height: 40px;
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  color: var(--admin-drawer-text);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__home:hover {
  background: var(--admin-drawer-hover-bg);
  color: var(--admin-drawer-text-active);
}
.admin-drawer--tree .admin-sidebar__home:focus-visible {
  outline: 2px solid var(--admin-drawer-focus-ring);
  outline-offset: 2px;
}
.admin-drawer--tree .admin-sidebar__home--active {
  background: var(--admin-drawer-active-bg);
  color: var(--admin-drawer-active-accent);
  font-weight: 700;
  border-left: var(--admin-drawer-active-bar);
  border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}
.admin-drawer--tree .admin-sidebar__home--active .admin-sidebar__home-icon {
  color: var(--admin-drawer-active-accent);
  opacity: 1;
}
.admin-drawer--tree .admin-sidebar__home-icon {
  flex-shrink: 0;
  width: 1.6rem;
  text-align: center;
  font-size: 1.4rem;
  opacity: 0.75;
  transition: opacity var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__home-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-drawer--tree .admin-sidebar__section {
  margin: 0;
  padding: 0;
  border: 0;
}
.admin-drawer--tree .admin-sidebar__section-hd {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 0 var(--admin-space-xs);
  padding: var(--admin-space-xs) var(--admin-space-sm);
  min-height: 40px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text-secondary);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__section-hd::-webkit-details-marker, .admin-drawer--tree .admin-sidebar__section-hd::marker {
  display: none;
}
.admin-drawer--tree .admin-sidebar__section-hd:hover {
  background: var(--admin-drawer-hover-bg);
  color: var(--admin-text-secondary);
}
.admin-drawer--tree .admin-sidebar__section-hd:focus-visible {
  outline: 2px solid var(--admin-drawer-focus-ring);
  outline-offset: 2px;
}
.admin-drawer--tree .admin-sidebar__section-icon {
  flex-shrink: 0;
  width: 1.6rem;
  text-align: center;
  font-size: 1.4rem;
  opacity: 0.75;
}
.admin-drawer--tree .admin-sidebar__section-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-drawer--tree .admin-sidebar__section-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: var(--admin-radius-full);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--admin-grey-100);
  color: var(--admin-text-muted);
}
.admin-sidebar__section--system .admin-drawer--tree .admin-sidebar__section-badge {
  background: rgba(245, 158, 11, 0.12);
  color: var(--admin-warn-text);
}
.admin-drawer--tree .admin-sidebar__section-chevron {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--admin-text-muted);
  transition: transform var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__section[open] > .admin-sidebar__section-hd .admin-sidebar__section-chevron {
  transform: rotate(180deg);
}
.admin-drawer--tree .admin-sidebar__section-body {
  padding: var(--admin-space-3xs) 0 var(--admin-space-xs);
}
.admin-drawer--tree .admin-sidebar__section-list {
  list-style: none;
  margin: 0 var(--admin-space-xs) 0 calc(var(--admin-space-xs) + 1.8rem);
  padding: 0 var(--admin-space-xs) 0 var(--admin-space-sm);
  border-left: 2px solid var(--admin-drawer-border);
}
.admin-drawer--tree .admin-sidebar__nav-item {
  margin: 0 0 1px;
}
.admin-drawer--tree .admin-sidebar__nav-group-label {
  list-style: none;
  margin: var(--admin-space-xs) 0 2px;
  padding: 2px var(--admin-space-sm) 2px 0;
  color: color-mix(in srgb, var(--admin-drawer-text) 80%, transparent);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
.admin-drawer--tree .admin-sidebar__nav-divider {
  list-style: none;
  height: 1px;
  margin: var(--admin-space-xs) 0;
  background: var(--admin-drawer-border);
}
.admin-drawer--tree .admin-sidebar__nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin: 0;
  padding: var(--admin-space-xs) var(--admin-space-sm);
  min-height: 38px;
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  color: var(--admin-drawer-text);
  font-size: 1.4rem;
  font-weight: 400;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__nav-link:hover {
  background: var(--admin-drawer-hover-bg);
  color: var(--admin-drawer-text-active);
}
.admin-drawer--tree .admin-sidebar__nav-link:focus-visible {
  outline: 2px solid var(--admin-drawer-focus-ring);
  outline-offset: 2px;
}
.admin-drawer--tree .admin-sidebar__nav-link--active {
  background: var(--admin-drawer-active-bg);
  color: var(--admin-drawer-active-accent);
  font-weight: 600;
  border-left: var(--admin-drawer-active-bar);
  border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}
.admin-drawer--tree .admin-sidebar__nav-link--active .admin-sidebar__nav-icon {
  opacity: 0.9;
}
.admin-drawer--tree .admin-sidebar__nav-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-drawer--tree .admin-sidebar__nav-icon {
  flex-shrink: 0;
  width: 1.6rem;
  text-align: center;
  font-size: 1.3rem;
  opacity: 0.65;
  transition: opacity var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__expandable {
  margin: 0;
}
.admin-drawer--tree .admin-sidebar__parent {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin: 0;
  padding: var(--admin-space-xs) var(--admin-space-sm);
  min-height: 38px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-drawer-text);
  font-size: 1.4rem;
  font-weight: 600;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__parent::-webkit-details-marker, .admin-drawer--tree .admin-sidebar__parent::marker {
  display: none;
}
.admin-drawer--tree .admin-sidebar__parent:hover {
  background: var(--admin-drawer-hover-bg);
  color: var(--admin-drawer-text-active);
}
.admin-drawer--tree .admin-sidebar__parent:focus-visible {
  outline: 2px solid var(--admin-drawer-focus-ring);
  outline-offset: 2px;
}
.admin-drawer--tree .admin-sidebar__parent--open, .admin-sidebar__expandable[open] .admin-drawer--tree .admin-sidebar__parent {
  color: var(--admin-drawer-active-accent);
}
.admin-drawer--tree .admin-sidebar__parent--open .admin-sidebar__nav-icon, .admin-sidebar__expandable[open] .admin-drawer--tree .admin-sidebar__parent .admin-sidebar__nav-icon {
  opacity: 1;
}
.admin-drawer--tree .admin-sidebar__expandable-chevron {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  opacity: 0.45;
  transition: transform var(--admin-duration) var(--admin-ease), opacity var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__expandable[open] .admin-sidebar__expandable-chevron {
  transform: rotate(180deg);
  opacity: 0.75;
}
.admin-drawer--tree .admin-sidebar__subtree {
  margin: var(--admin-space-3xs) 0 var(--admin-space-xs) 1.6rem;
  padding: 0 0 0 var(--admin-space-sm);
  border-left: 2px solid var(--admin-drawer-border);
}
.admin-drawer--tree .admin-sidebar__children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-drawer--tree .admin-sidebar__child-link {
  display: flex;
  align-items: center;
  padding: 0.8rem 1.2rem;
  min-height: 34px;
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  color: var(--admin-drawer-text);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.35;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-drawer--tree .admin-sidebar__child-link:hover {
  background: var(--admin-drawer-hover-bg);
  color: var(--admin-drawer-text-active);
}
.admin-drawer--tree .admin-sidebar__child-link:focus-visible {
  outline: 2px solid var(--admin-drawer-focus-ring);
  outline-offset: 2px;
}
.admin-drawer--tree .admin-sidebar__child-link--active {
  background: var(--admin-drawer-sublink-active-bg);
  color: var(--admin-drawer-active-accent);
  font-weight: 600;
  border-left: var(--admin-drawer-sublink-active-bar);
  border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}

[data-admin-theme=dark] .admin-drawer__drill--active,
[data-theme=dark] .admin-drawer__drill--active {
  background: #ffffff;
  color: #0a0a08;
  font-weight: 700;
  border-left: none;
  border-radius: var(--admin-radius-lg, 9999px);
  margin-inline: var(--admin-space-xs);
}
[data-admin-theme=dark] .admin-drawer__drill--active .admin-drawer__drill-icon,
[data-theme=dark] .admin-drawer__drill--active .admin-drawer__drill-icon {
  color: #0a0a08;
  opacity: 1;
}
[data-admin-theme=dark] .admin-drawer__drill--active .admin-drawer__drill-chevron,
[data-theme=dark] .admin-drawer__drill--active .admin-drawer__drill-chevron {
  opacity: 0.5;
}
[data-admin-theme=dark] .admin-drawer__drill--active:hover,
[data-theme=dark] .admin-drawer__drill--active:hover {
  background: #f0f0e8;
  color: #0a0a08;
}
[data-admin-theme=dark] .admin-drawer__leaf--active,
[data-theme=dark] .admin-drawer__leaf--active {
  background: #ffffff;
  color: #0a0a08;
  font-weight: 700;
  border-left: none;
  border-radius: var(--admin-radius-lg, 9999px);
  margin-inline: var(--admin-space-xs);
}
[data-admin-theme=dark] .admin-drawer__leaf--active .admin-drawer__leaf-icon,
[data-theme=dark] .admin-drawer__leaf--active .admin-drawer__leaf-icon {
  color: #0a0a08;
  opacity: 1;
}
[data-admin-theme=dark] .admin-drawer__leaf--active:hover,
[data-theme=dark] .admin-drawer__leaf--active:hover {
  background: #f0f0e8;
  color: #0a0a08;
}
[data-admin-theme=dark] .admin-sidebar__nav-link--active,
[data-theme=dark] .admin-sidebar__nav-link--active {
  background: #ffffff;
  color: #0a0a08;
  font-weight: 700;
  border-left: none;
  border-radius: var(--admin-radius-lg, 9999px);
  padding-inline: var(--admin-space-md);
}
[data-admin-theme=dark] .admin-sidebar__nav-link--active .admin-sidebar__nav-icon,
[data-theme=dark] .admin-sidebar__nav-link--active .admin-sidebar__nav-icon {
  opacity: 1;
  color: #0a0a08;
}
[data-admin-theme=dark] .admin-sidebar__nav-link--active:hover,
[data-theme=dark] .admin-sidebar__nav-link--active:hover {
  background: #f0f0e8;
  color: #0a0a08;
}
[data-admin-theme=dark] .admin-sidebar__child-link--active,
[data-theme=dark] .admin-sidebar__child-link--active {
  background: rgba(255, 255, 255, 0.9);
  color: #0a0a08;
  font-weight: 600;
  border-left: none;
  border-radius: var(--admin-radius-lg, 9999px);
}
[data-admin-theme=dark] .admin-sidebar__child-link--active:hover,
[data-theme=dark] .admin-sidebar__child-link--active:hover {
  background: #f0f0e8;
  color: #0a0a08;
}

.admin-drawer--nested {
  width: var(--admin-drawer-width);
  overflow: visible;
}

.admin-drawer__nested {
  position: relative;
  flex: 1;
  min-height: 0;
}

.admin-drawer__column {
  height: 100%;
  overflow-y: auto;
  padding: var(--admin-space-2xs) 0 var(--admin-space-sm);
}

.admin-drawer__flyout {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: var(--admin-sub-drawer-width);
  display: flex;
  flex-direction: column;
  background: var(--admin-drawer-bg);
  border-right: 1px solid var(--admin-drawer-border);
  box-shadow: var(--admin-elevation-2);
  transform: translateX(-0.8rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--admin-duration-long) var(--admin-ease), opacity var(--admin-duration-long) var(--admin-ease), visibility var(--admin-duration-long) var(--admin-ease);
  z-index: 1;
}
.admin-drawer__flyout[data-flyout-open] {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (max-width: 1024px) {
  .admin-drawer__flyout {
    left: 0;
    width: 100%;
    z-index: 2;
    box-shadow: none;
  }
}

.admin-drawer__flyout-group {
  list-style: none;
}

.admin-drawer__flyout-details {
  margin: var(--admin-space-2xs) 0 0;
}

.admin-drawer__flyout-subhead {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 1px var(--admin-space-xs);
  padding: var(--admin-space-xs) var(--admin-space-sm);
  min-height: 36px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-drawer-text);
  font-size: 1.35rem;
  font-weight: 600;
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-drawer__flyout-subhead::-webkit-details-marker, .admin-drawer__flyout-subhead::marker {
  display: none;
}
.admin-drawer__flyout-subhead:hover {
  background: var(--admin-drawer-hover-bg);
  color: var(--admin-drawer-text-active);
}

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

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

.admin-drawer__flyout-sublist {
  list-style: none;
  margin: 0 0 0 var(--admin-space-md);
  padding: 0 0 0 var(--admin-space-sm);
  border-left: 2px solid var(--admin-drawer-border);
}

.admin-flash {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space);
  padding: var(--admin-space) var(--admin-space-lg);
  margin-bottom: var(--admin-space-lg);
  border-radius: var(--admin-radius);
  font-size: var(--admin-fs-body-lg);
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  border-left-width: 4px;
}
.admin-flash__icon {
  flex-shrink: 0;
  font-size: 1.4rem;
  margin-top: 0.1rem;
}
.admin-flash__body {
  flex: 1;
}
.admin-flash__title {
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.admin-flash__msg {
  font-weight: 400;
  color: inherit;
  opacity: 0.85;
}

.admin-flash--success {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
  border-color: var(--admin-success);
}

.admin-flash--error {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
  border-color: var(--admin-error);
}

.admin-flash--warning {
  background: var(--admin-warn-bg);
  color: var(--admin-warn-text);
  border-color: var(--admin-warn);
}

.admin-flash--info {
  background: var(--admin-info-bg);
  color: var(--admin-info-text);
  border-color: var(--admin-info);
  border-left-color: var(--admin-info);
}

.admin-flash--premium {
  background: var(--admin-premium-bg);
  color: var(--admin-premium-text);
  border-color: var(--admin-premium);
}

.admin-footer {
  padding: var(--admin-space) var(--admin-space-2xl);
  font-size: var(--admin-fs-xs);
  font-weight: 500;
  color: var(--admin-text-muted);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--admin-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space);
  flex-wrap: wrap;
  background: var(--admin-white);
}
.admin-footer__copy {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.admin-footer__links {
  display: flex;
  gap: var(--admin-space-sm);
  align-items: center;
  flex-shrink: 0;
}
.admin-footer__link {
  color: var(--admin-text-muted);
  text-decoration: none;
  transition: color var(--admin-duration-short) var(--admin-ease);
}
.admin-footer__link:hover {
  color: var(--admin-primary);
}

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 3rem;
  padding: 0 1rem;
  font-size: var(--admin-fs-base);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--admin-border);
  border-radius: var(--figma-radius, var(--admin-radius-sm));
  cursor: pointer;
  font-family: inherit;
  background: var(--admin-white);
  color: var(--admin-text);
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease), transform 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);
  transform: none;
}
.admin-btn:active {
  background: var(--admin-grey-200);
  transform: none;
  transition-duration: 0.1s;
}
.admin-btn:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
}
.admin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.admin-btn--primary {
  background: var(--admin-primary);
  border-color: transparent;
  color: var(--admin-on-primary);
  font-weight: 600;
  box-shadow: none;
}
.admin-btn--primary:hover {
  background: var(--admin-primary-hover);
  border-color: transparent;
  box-shadow: none;
}
.admin-btn--primary:active {
  background: var(--admin-primary-hover);
  filter: brightness(0.92);
}
.admin-btn--primary:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
}
.admin-btn--secondary {
  background: transparent;
  border-color: var(--admin-border);
  color: var(--admin-text-secondary);
  font-weight: 500;
}
.admin-btn--secondary:hover {
  background: var(--admin-state-hover);
  border-color: var(--admin-border-strong);
  color: var(--admin-text);
}
.admin-btn--secondary:active {
  background: rgba(var(--admin-primary-rgb), 0.12);
}
.admin-btn--secondary:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
}
.admin-btn--outline {
  background: transparent;
  border-color: var(--admin-border-strong);
  color: var(--admin-text-secondary);
  font-weight: 500;
}
.admin-btn--outline:hover {
  background: var(--admin-grey-100);
  border-color: var(--admin-border-strong);
  color: var(--admin-text);
}
.admin-btn--outline:active {
  background: var(--admin-grey-200);
}
.admin-btn--outline:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
}
.admin-btn--danger {
  background: var(--admin-error);
  border-color: transparent;
  color: var(--admin-on-error, #fff);
  font-weight: 600;
  box-shadow: none;
}
.admin-btn--danger:hover {
  background: var(--admin-error-hover);
  box-shadow: none;
}
.admin-btn--danger:active {
  background: var(--admin-error-active);
}
.admin-btn--danger:focus-visible {
  outline: none;
  border-color: var(--admin-error-border);
  box-shadow: none;
}
.admin-btn--danger-outline {
  background: transparent;
  border-color: var(--admin-error-border);
  color: var(--admin-error-text);
  font-weight: 500;
}
.admin-btn--danger-outline:hover {
  background: var(--admin-error-bg);
  border-color: var(--admin-error-border);
  color: var(--admin-error-text);
  box-shadow: none;
}
.admin-btn--danger-outline:active {
  background: var(--admin-error-bg);
}
.admin-btn--danger-outline:focus-visible {
  outline: none;
  border-color: var(--admin-error-border);
  box-shadow: none;
}
.admin-btn--success {
  background: var(--admin-success);
  border-color: transparent;
  color: var(--admin-on-success, #fff);
  font-weight: 600;
  box-shadow: none;
}
.admin-btn--success:hover {
  background: var(--admin-success-hover);
  box-shadow: none;
}
.admin-btn--warn {
  background: var(--admin-warn);
  border-color: transparent;
  color: var(--admin-on-warn, #fff);
  font-weight: 600;
}
.admin-btn--warn:hover {
  background: var(--admin-warn-hover);
}
.admin-btn--premium {
  background: var(--admin-premium);
  border-color: transparent;
  color: var(--admin-grey-900);
  font-weight: 600;
}
.admin-btn--premium:hover {
  background: var(--admin-premium-hover);
}
.admin-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--admin-text-secondary);
}
.admin-btn--ghost:hover {
  background: var(--admin-grey-100);
  color: var(--admin-text);
  border-color: transparent;
}
.admin-btn--ghost:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
}
.admin-btn--icon {
  width: 3rem;
  padding: 0;
  flex-shrink: 0;
}
.admin-btn--icon i, .admin-btn--icon svg {
  font-size: 1.4rem;
}
.admin-btn--icon.admin-btn--sm {
  width: 2.8rem;
}
.admin-btn--icon.admin-btn--sm i, .admin-btn--icon.admin-btn--sm svg {
  font-size: 1.2rem;
}
.admin-btn--xs {
  height: 2.4rem;
  padding: 0 0.7rem;
  font-size: var(--admin-fs-xs);
  gap: 0.3rem;
  border-radius: var(--admin-radius-xs);
}
.admin-btn--xs i, .admin-btn--xs svg {
  font-size: 1rem;
}
.admin-btn--sm {
  height: 2.8rem;
  padding: 0 0.8rem;
  font-size: var(--admin-fs-sm);
  gap: 0.4rem;
}
.admin-btn--sm i, .admin-btn--sm svg {
  font-size: 1.1rem;
}
.admin-btn--lg {
  height: 3.2rem;
  padding: 0 1.2rem;
  font-size: var(--admin-fs-base);
  gap: 0.8rem;
}
.admin-btn--xl {
  height: 4.6rem;
  padding: 0 2.2rem;
  font-size: var(--admin-fs-lg);
  gap: 1rem;
}
.admin-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
@media (hover: none) and (pointer: coarse) {
  .admin-btn:hover {
    transform: none;
    box-shadow: none;
  }
  .admin-btn:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
}

button.admin-btn {
  appearance: none;
  -webkit-appearance: none;
}

.admin-input-wrap {
  margin-bottom: var(--admin-space-lg);
}
.admin-input-wrap--sort-order {
  max-width: 140px;
}
.admin-input-wrap--sort-order .admin-form__hint {
  margin-bottom: 0;
}

.admin-input-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text);
  letter-spacing: 0.005em;
}

.admin-input, .admin-textarea {
  display: block;
  width: 100%;
  height: var(--admin-size-input-height);
  padding: 0 0.9rem;
  font-size: var(--admin-fs-base);
  line-height: 1.5;
  color: var(--admin-text);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--figma-radius, 0.4rem);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-input::placeholder, .admin-textarea::placeholder {
  color: var(--admin-text-muted);
}
.admin-input:hover:not(:disabled):not(:focus), .admin-textarea:hover:not(:disabled):not(:focus) {
  border-color: rgba(var(--admin-primary-rgb), 0.4);
}
.admin-input:focus, .admin-textarea:focus {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
}
.admin-input:-webkit-autofill, .admin-textarea:-webkit-autofill, .admin-input:-webkit-autofill:hover, .admin-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--admin-white) inset;
  -webkit-text-fill-color: var(--admin-text);
}
.admin-input.admin-input--error, .admin-input--error.admin-textarea {
  border-color: var(--admin-error);
}
.admin-input.admin-input--error:focus, .admin-input--error.admin-textarea:focus {
  border-color: var(--admin-error);
  box-shadow: var(--admin-error-focus-ring);
}
.admin-input:disabled, .admin-textarea:disabled {
  background: var(--admin-grey-50);
  color: var(--admin-text-disabled);
  cursor: not-allowed;
  border-color: var(--admin-border-light);
  opacity: 0.7;
}

.admin-textarea {
  height: auto;
  min-height: var(--admin-size-editor-min-height);
  padding: var(--admin-space-sm) var(--admin-space);
  line-height: 1.6;
  resize: vertical;
}

.admin-form__loader,
.admin-auth__loader,
.auth-page__btn-loader,
.profile-page__btn-loader {
  align-items: center;
  justify-content: center;
}
.admin-form__loader i.fa-spinner,
.admin-form__loader i.fa-spin,
.admin-auth__loader i.fa-spinner,
.admin-auth__loader i.fa-spin,
.auth-page__btn-loader i.fa-spinner,
.auth-page__btn-loader i.fa-spin,
.profile-page__btn-loader i.fa-spinner,
.profile-page__btn-loader i.fa-spin {
  display: inline-block;
  width: var(--figma-loader-size, 3.2rem);
  height: var(--figma-loader-size, 3.2rem);
  border: var(--figma-loader-stroke, 0.2rem) solid var(--color-border-strong, var(--admin-border-strong));
  border-right-color: transparent;
  border-radius: 50%;
  color: transparent;
  font-size: 0;
  line-height: 1;
  animation: admin-loader-spin 0.8s linear infinite;
}
.admin-form__loader i.fa-spinner::before,
.admin-form__loader i.fa-spin::before,
.admin-auth__loader i.fa-spinner::before,
.admin-auth__loader i.fa-spin::before,
.auth-page__btn-loader i.fa-spinner::before,
.auth-page__btn-loader i.fa-spin::before,
.profile-page__btn-loader i.fa-spinner::before,
.profile-page__btn-loader i.fa-spin::before {
  content: "";
}

@keyframes admin-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
.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: none;
  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 {
  outline: 2px solid var(--admin-border-focus);
  outline-offset: 0.2rem;
  box-shadow: none;
}
.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: 1px solid var(--admin-grey-400);
  width: 14px;
  height: 14px;
  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: none;
  border-color: var(--admin-border-focus);
}
.admin-checkbox-wrap--disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.admin-checkbox-wrap .admin-checkbox__label {
  font-weight: 500;
}
.admin-checkbox-wrap--xs .admin-checkbox__box {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}
.admin-checkbox-wrap--xs .admin-checkbox__box::after {
  width: 4px;
  height: 6px;
  border-width: 0 1.5px 1.5px 0;
}
.admin-checkbox-wrap--sm .admin-checkbox__box {
  width: 15px;
  height: 15px;
  border-width: 1.5px;
}
.admin-checkbox-wrap--sm .admin-checkbox__box::after {
  width: 4px;
  height: 7px;
  border-width: 0 1.5px 1.5px 0;
}
.admin-checkbox-wrap--md .admin-checkbox__box {
  width: 18px;
  height: 18px;
  border-width: 2px;
}
.admin-checkbox-wrap--md .admin-checkbox__box::after {
  width: 5px;
  height: 9px;
  border-width: 0 2px 2px 0;
}
.admin-checkbox-wrap--lg .admin-checkbox__box {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
.admin-checkbox-wrap--lg .admin-checkbox__box::after {
  width: 6px;
  height: 10px;
  border-width: 0 2px 2px 0;
}
.admin-checkbox-wrap--xl .admin-checkbox__box {
  width: 22px;
  height: 22px;
  border-width: 2px;
}
.admin-checkbox-wrap--xl .admin-checkbox__box::after {
  width: 7px;
  height: 11px;
  border-width: 0 2.5px 2.5px 0;
}

.admin-checkbox-wrap:not(:has(.admin-checkbox__box)) input {
  position: static;
  width: 18px;
  height: 18px;
  margin: 0;
  clip: auto;
  overflow: visible;
  accent-color: var(--admin-primary);
  cursor: pointer;
}

.admin-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--admin-space-2xs) var(--admin-space-sm);
  border: 1px solid var(--admin-border);
  border-radius: var(--figma-radius);
  background: var(--admin-bg-secondary);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.admin-tag-chip__input {
  display: none;
}
.admin-tag-chip__label {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1;
}
.admin-tag-chip.is-selected {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
}
.admin-tag-chip.is-selected .admin-tag-chip__label {
  color: #fff;
}
.admin-tag-chip:hover:not(.is-selected) {
  border-color: var(--admin-primary);
  background: var(--admin-primary-tint, color-mix(in srgb, var(--admin-primary) 12%, transparent));
}

.admin-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
}

.admin-radio-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-sm);
  font-size: var(--admin-fs-body-lg);
  color: var(--admin-text);
  cursor: pointer;
  user-select: none;
}
.admin-radio-wrap input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-radio-wrap .admin-radio__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--admin-grey-400);
  border-radius: 50%;
  background: var(--admin-white);
  transition: border-color var(--admin-duration-short) var(--admin-ease);
}
.admin-radio-wrap .admin-radio__dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--admin-primary);
  transform: scale(0);
  transition: transform var(--admin-duration-short) var(--admin-ease);
}
.admin-radio-wrap input:checked + .admin-radio__dot {
  border-color: var(--admin-primary);
}
.admin-radio-wrap input:checked + .admin-radio__dot::after {
  transform: scale(1);
}
.admin-radio-wrap:hover .admin-radio__dot {
  border-color: var(--admin-grey-600);
}
.admin-radio-wrap input:focus-visible + .admin-radio__dot {
  outline: 2px solid var(--admin-border-focus);
  outline-offset: 0.2rem;
  box-shadow: none;
}
.admin-radio-wrap .admin-radio__label {
  font-weight: 500;
}
.admin-radio-wrap--disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-radio-wrap:not(:has(.admin-radio__dot)) input {
  position: static;
  width: 18px;
  height: 18px;
  margin: 0;
  clip: auto;
  overflow: visible;
  accent-color: var(--admin-primary);
  cursor: pointer;
}

.admin-radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.6rem;
}

.admin-radio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-radio-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-radio-card:hover {
  border-color: var(--admin-border-strong);
  background: var(--admin-bg-soft);
}
.admin-radio-card:has(input:checked) {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
}
.admin-radio-card:has(input:checked) .admin-radio-card__icon {
  color: var(--admin-primary);
}
.admin-radio-card:has(input:focus-visible) {
  box-shadow: none;
  border-color: var(--admin-border-focus);
}

.admin-radio-card__icon {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--admin-text-secondary);
  transition: color var(--admin-duration-short) var(--admin-ease);
}

.admin-radio-card__label {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--admin-text);
}

.admin-select {
  display: block;
  width: 100%;
  height: var(--admin-size-input-height);
  padding: 0 var(--admin-size-select-arrow) 0 var(--admin-space-lg);
  font-size: var(--admin-fs-base);
  line-height: 1;
  color: var(--admin-text);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--figma-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: none;
}
.admin-select.admin-select--error {
  border-color: var(--admin-error);
}
.admin-select.admin-select--error:focus {
  border-color: var(--admin-error);
  box-shadow: var(--admin-error-focus-ring);
}
.admin-select:disabled {
  background-color: var(--admin-grey-50);
  color: var(--admin-text-muted);
  cursor: not-allowed;
}

select.admin-select[multiple] {
  height: auto;
  padding: var(--admin-space-sm) var(--admin-space);
  min-height: 120px;
  background-image: none;
}

[data-admin-theme=dark] .admin-select,
[data-theme=dark] .admin-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8b4cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-admin-theme=dark] .admin-select:focus,
[data-theme=dark] .admin-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2334affc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2rem;
  padding: 0 0.75rem;
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--figma-radius);
  border: 1px solid transparent;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}
.admin-badge i, .admin-badge svg {
  font-size: 1rem;
}
.admin-badge--default {
  background: var(--admin-grey-100);
  color: var(--admin-grey-700);
  border-color: var(--admin-grey-200);
}
.admin-badge--primary {
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
  border-color: var(--admin-primary-border);
}
.admin-badge--success {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
  border-color: var(--admin-success-border);
}
.admin-badge--error {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
  border-color: var(--admin-error-border);
}
.admin-badge--warn {
  background: var(--admin-warn-bg);
  color: var(--admin-warn-text);
  border-color: var(--admin-warn-border);
}
.admin-badge--premium {
  background: var(--admin-premium-bg);
  color: var(--admin-premium-text);
}
.admin-badge--info {
  background: var(--admin-info-bg);
  color: var(--admin-info-text);
}
.admin-badge--outline {
  background: transparent;
  color: var(--admin-text-secondary);
  border-color: var(--admin-border);
}
.admin-badge--sm {
  height: 1.7rem;
  padding: 0 0.55rem;
  font-size: var(--admin-fs-xs);
}

.admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.4rem;
  padding: 0 0.9rem;
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  border-radius: var(--admin-radius-full);
  border: 1px solid var(--admin-border);
  background: var(--admin-white);
  color: var(--admin-text);
  transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease);
}
.admin-chip:hover {
  background: var(--admin-grey-50);
  border-color: #c6ccd2;
}
.admin-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--admin-text-muted);
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--admin-fs-body);
  line-height: 1;
  transition: background var(--admin-duration-short) var(--admin-ease);
}
.admin-chip__remove:hover {
  background: var(--admin-state-hover);
  color: var(--admin-text);
}
.admin-chip__remove:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 1px;
}
.admin-chip--success {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
  border-color: rgba(var(--admin-success-rgb), 0.3);
}
.admin-chip--error {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
  border-color: rgba(var(--admin-error-rgb), 0.3);
}
.admin-chip--warn {
  background: var(--admin-warn-bg);
  color: var(--admin-warn-text);
  border-color: rgba(var(--admin-warn-rgb), 0.3);
}
.admin-chip--premium {
  background: var(--admin-premium-bg);
  color: var(--admin-premium-text);
  border-color: rgba(var(--admin-premium-rgb), 0.3);
}

.admin-card {
  background: var(--admin-white);
  border-radius: var(--figma-radius);
  border: 1px solid var(--admin-border-light);
  margin-bottom: 2.4rem;
  overflow: hidden;
  box-shadow: none;
}
@media (min-width: 1024px) {
  .admin-card {
    margin-bottom: 3.2rem;
  }
}
.admin-card__header {
  padding: 2rem 2.4rem;
  border-bottom: 1px solid var(--admin-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
  background: var(--admin-white);
}
.admin-card__title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--admin-text);
  margin: 0;
  line-height: 1.4;
}
.admin-card__badge {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  border-radius: 1.2rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
}
.admin-card__body {
  padding: 0;
  background: var(--admin-white);
}
.admin-card__body--padded {
  padding: 2.4rem;
}
.admin-card__body--lg {
  padding: 3.2rem;
}
.admin-card__footer {
  padding: 1.6rem 2.4rem;
  border-top: 1px solid var(--admin-border-light);
  display: flex;
  align-items: center;
  gap: var(--admin-space);
  background: var(--admin-grey-50);
}
.admin-card__empty {
  padding: 6rem 2.4rem;
  text-align: center;
}
.admin-card__empty-text {
  color: var(--admin-text-muted);
  font-size: 1.4rem;
  margin: 0;
  line-height: 1.6;
}
.admin-card__empty-link {
  color: var(--admin-primary);
  text-decoration: none;
  font-weight: 500;
  margin-left: 0.4rem;
  transition: color 0.2s;
}
.admin-card__empty-link:hover {
  color: var(--admin-primary-hover);
  text-decoration: underline;
}

body.admin-shell-v2 .admin-btn {
  height: var(--figma-control-height, 4.8rem);
  padding: 0 var(--admin-space-xl);
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: none;
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 500;
  transform: none;
}
body.admin-shell-v2 .admin-btn::before {
  display: none;
}
body.admin-shell-v2 .admin-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  box-shadow: none;
  transform: none;
}
body.admin-shell-v2 .admin-btn:active {
  background: var(--color-bg-selected);
  transform: none;
}
body.admin-shell-v2 .admin-btn--primary {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--admin-on-primary);
}
body.admin-shell-v2 .admin-btn--primary:hover {
  background: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
  color: var(--admin-on-primary);
}
body.admin-shell-v2 .admin-btn--danger-outline {
  background: transparent;
  border-color: var(--admin-error-border);
  color: var(--admin-error-text);
}
body.admin-shell-v2 .admin-btn--danger-outline:hover {
  background: var(--admin-error-bg);
  border-color: var(--admin-error-border);
  color: var(--admin-error-text);
}
body.admin-shell-v2 .admin-btn--secondary, body.admin-shell-v2 .admin-btn--outline, body.admin-shell-v2 .admin-btn--ghost {
  background: transparent;
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}
body.admin-shell-v2 .admin-btn--secondary:hover, body.admin-shell-v2 .admin-btn--outline:hover, body.admin-shell-v2 .admin-btn--ghost:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-btn--sm {
  height: 3.6rem;
  padding: 0 var(--admin-space);
  font-size: 1.3rem;
}
body.admin-shell-v2 .admin-btn--xs {
  height: 2.8rem;
  padding: 0 var(--admin-space-sm);
  font-size: 1.2rem;
}
body.admin-shell-v2 .admin-btn--icon {
  width: var(--figma-control-height, 4.8rem);
  padding: 0;
}
body.admin-shell-v2 .admin-input,
body.admin-shell-v2 .admin-textarea,
body.admin-shell-v2 .admin-select,
body.admin-shell-v2 .admin-form__input,
body.admin-shell-v2 .admin-form__control,
body.admin-shell-v2 .admin-form__select,
body.admin-shell-v2 select.admin-select,
body.admin-shell-v2 select.admin-form__input,
body.admin-shell-v2 input[type=text].admin-form__input,
body.admin-shell-v2 input[type=search].admin-form__input,
body.admin-shell-v2 input[type=email].admin-form__input,
body.admin-shell-v2 input[type=number].admin-form__input,
body.admin-shell-v2 input[type=url].admin-form__input,
body.admin-shell-v2 textarea.admin-form__input {
  height: var(--figma-control-height, 4.8rem);
  min-height: var(--figma-control-height, 4.8rem);
  padding: 0 var(--admin-space-xl);
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: none;
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-input::placeholder,
body.admin-shell-v2 .admin-textarea::placeholder,
body.admin-shell-v2 .admin-select::placeholder,
body.admin-shell-v2 .admin-form__input::placeholder,
body.admin-shell-v2 .admin-form__control::placeholder,
body.admin-shell-v2 .admin-form__select::placeholder,
body.admin-shell-v2 select.admin-select::placeholder,
body.admin-shell-v2 select.admin-form__input::placeholder,
body.admin-shell-v2 input[type=text].admin-form__input::placeholder,
body.admin-shell-v2 input[type=search].admin-form__input::placeholder,
body.admin-shell-v2 input[type=email].admin-form__input::placeholder,
body.admin-shell-v2 input[type=number].admin-form__input::placeholder,
body.admin-shell-v2 input[type=url].admin-form__input::placeholder,
body.admin-shell-v2 textarea.admin-form__input::placeholder {
  color: var(--color-text-muted);
}
body.admin-shell-v2 .admin-input:hover:not(:disabled):not(:focus),
body.admin-shell-v2 .admin-textarea:hover:not(:disabled):not(:focus),
body.admin-shell-v2 .admin-select:hover:not(:disabled):not(:focus),
body.admin-shell-v2 .admin-form__input:hover:not(:disabled):not(:focus),
body.admin-shell-v2 .admin-form__control:hover:not(:disabled):not(:focus),
body.admin-shell-v2 .admin-form__select:hover:not(:disabled):not(:focus),
body.admin-shell-v2 select.admin-select:hover:not(:disabled):not(:focus),
body.admin-shell-v2 select.admin-form__input:hover:not(:disabled):not(:focus),
body.admin-shell-v2 input[type=text].admin-form__input:hover:not(:disabled):not(:focus),
body.admin-shell-v2 input[type=search].admin-form__input:hover:not(:disabled):not(:focus),
body.admin-shell-v2 input[type=email].admin-form__input:hover:not(:disabled):not(:focus),
body.admin-shell-v2 input[type=number].admin-form__input:hover:not(:disabled):not(:focus),
body.admin-shell-v2 input[type=url].admin-form__input:hover:not(:disabled):not(:focus),
body.admin-shell-v2 textarea.admin-form__input:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-strong);
}
body.admin-shell-v2 .admin-input:focus,
body.admin-shell-v2 .admin-textarea:focus,
body.admin-shell-v2 .admin-select:focus,
body.admin-shell-v2 .admin-form__input:focus,
body.admin-shell-v2 .admin-form__control:focus,
body.admin-shell-v2 .admin-form__select:focus,
body.admin-shell-v2 select.admin-select:focus,
body.admin-shell-v2 select.admin-form__input:focus,
body.admin-shell-v2 input[type=text].admin-form__input:focus,
body.admin-shell-v2 input[type=search].admin-form__input:focus,
body.admin-shell-v2 input[type=email].admin-form__input:focus,
body.admin-shell-v2 input[type=number].admin-form__input:focus,
body.admin-shell-v2 input[type=url].admin-form__input:focus,
body.admin-shell-v2 textarea.admin-form__input:focus {
  border-color: var(--color-border-focus);
  box-shadow: none;
}
body.admin-shell-v2 .admin-input:disabled,
body.admin-shell-v2 .admin-textarea:disabled,
body.admin-shell-v2 .admin-select:disabled,
body.admin-shell-v2 .admin-form__input:disabled,
body.admin-shell-v2 .admin-form__control:disabled,
body.admin-shell-v2 .admin-form__select:disabled,
body.admin-shell-v2 select.admin-select:disabled,
body.admin-shell-v2 select.admin-form__input:disabled,
body.admin-shell-v2 input[type=text].admin-form__input:disabled,
body.admin-shell-v2 input[type=search].admin-form__input:disabled,
body.admin-shell-v2 input[type=email].admin-form__input:disabled,
body.admin-shell-v2 input[type=number].admin-form__input:disabled,
body.admin-shell-v2 input[type=url].admin-form__input:disabled,
body.admin-shell-v2 textarea.admin-form__input:disabled {
  background: var(--color-bg-canvas);
  color: var(--admin-text-disabled);
  border-color: var(--color-border-subtle);
}
body.admin-shell-v2 .admin-select,
body.admin-shell-v2 select.admin-select,
body.admin-shell-v2 select.admin-form__input {
  padding-right: var(--admin-size-select-arrow);
  background-color: transparent;
  background-position: right var(--admin-space) center;
}
body.admin-shell-v2 .admin-textarea,
body.admin-shell-v2 textarea.admin-form__input {
  height: auto;
  min-height: 14rem;
  padding-block: var(--admin-space-lg);
  line-height: 2rem;
}
body.admin-shell-v2 .admin-input-label,
body.admin-shell-v2 .admin-form__label {
  margin-bottom: var(--admin-space-sm);
  color: var(--color-text-secondary);
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-checkbox-wrap .admin-checkbox__box,
body.admin-shell-v2 .admin-radio-wrap .admin-radio__dot {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}
body.admin-shell-v2 .admin-checkbox-wrap {
  gap: var(--admin-space-sm);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-checkbox-wrap .admin-checkbox__box {
  width: 2rem;
  height: 2rem;
  border-radius: 0.2rem;
}
body.admin-shell-v2 .admin-checkbox-wrap .admin-checkbox__box::after {
  width: 0.55rem;
  height: 1rem;
  border-width: 0 0.2rem 0.2rem 0;
}
body.admin-shell-v2 .admin-checkbox-wrap input:checked + .admin-checkbox__box {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
}
body.admin-shell-v2 .admin-radio-wrap {
  gap: var(--admin-space-sm);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-radio-wrap .admin-radio__dot {
  width: 1.8rem;
  height: 1.8rem;
  border-width: 0.2rem;
}
body.admin-shell-v2 .admin-radio-wrap .admin-radio__dot::after {
  width: 0.8rem;
  height: 0.8rem;
  background: var(--admin-on-primary);
}
body.admin-shell-v2 .admin-radio-wrap input:checked + .admin-radio__dot {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
}
body.admin-shell-v2 .admin-radio-wrap input:focus-visible + .admin-radio__dot,
body.admin-shell-v2 .admin-checkbox-wrap input:focus-visible + .admin-checkbox__box {
  border-color: var(--color-border-focus);
  box-shadow: none;
}
body.admin-shell-v2 .admin-switch__track {
  width: var(--figma-switch-width);
  height: var(--figma-switch-height);
  background: var(--figma-switch-off-bg);
  border: 1px solid var(--figma-switch-off-border);
  box-shadow: none;
}
body.admin-shell-v2 .admin-switch input:checked + .admin-switch__track {
  background: var(--figma-switch-on-bg);
  border-color: var(--figma-switch-on-border);
}
body.admin-shell-v2 .admin-switch__thumb {
  top: 50%;
  left: var(--figma-switch-thumb-gap);
  width: var(--figma-switch-thumb-size);
  height: var(--figma-switch-thumb-size);
  background: var(--figma-switch-thumb-off-bg);
  border: 1px solid var(--figma-switch-off-border);
  box-shadow: none;
  transform: translateY(-50%);
}
body.admin-shell-v2 .admin-switch input:checked + .admin-switch__track .admin-switch__thumb {
  background: var(--figma-switch-thumb-on-bg);
  border-color: var(--figma-switch-thumb-on-bg);
  transform: translateX(calc(var(--figma-switch-width) - var(--figma-switch-thumb-size) - var(--figma-switch-thumb-gap) * 2)) translateY(-50%);
}
body.admin-shell-v2 .admin-switch input:focus-visible + .admin-switch__track {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 0.2rem;
  box-shadow: none;
}
body.admin-shell-v2 .admin-card {
  margin-bottom: var(--admin-space-xl);
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
  padding: var(--admin-space-2xl);
  box-shadow: none;
}
body.admin-shell-v2 .admin-card__header,
body.admin-shell-v2 .admin-card__body,
body.admin-shell-v2 .admin-card__footer {
  background: transparent;
  border-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-card__header {
  padding: 0 0 var(--admin-space-xl);
}
body.admin-shell-v2 .admin-card__body--padded {
  padding: 0;
}
body.admin-shell-v2 .admin-card__title {
  color: var(--color-text-primary);
  font-size: 1.6rem;
  line-height: 2.2rem;
}
body.admin-shell-v2 .admin-badge,
body.admin-shell-v2 .admin-card__badge,
body.admin-shell-v2 .admin-tag-chip,
body.admin-shell-v2 .admin-chip {
  height: 1.8rem;
  padding: 0 0.6rem;
  border-radius: var(--figma-radius);
  border-color: var(--color-border-default);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  line-height: 1.4rem;
  font-weight: 500;
}
body.admin-shell-v2 .admin-badge--default {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-badge--primary {
  background: var(--color-action-primary-subtle);
  color: var(--color-action-primary-text);
  border-color: color-mix(in srgb, var(--color-action-primary) 38%, var(--color-border-default));
}
body.admin-shell-v2 .admin-badge--success {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
  border-color: var(--admin-success-border);
}
body.admin-shell-v2 .admin-badge--warn,
body.admin-shell-v2 .admin-badge--warning {
  background: var(--admin-warn-bg);
  color: var(--admin-warn-text);
  border-color: var(--admin-warn-border);
}
body.admin-shell-v2 .admin-badge--error,
body.admin-shell-v2 .admin-badge--danger {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
  border-color: var(--admin-error-border);
}
body.admin-shell-v2 .admin-badge--info {
  background: var(--admin-info-bg);
  color: var(--admin-info-text);
  border-color: color-mix(in srgb, var(--admin-info) 34%, var(--color-border-default));
}
body.admin-shell-v2 .admin-dropdown,
body.admin-shell-v2 .admin-dropdown__menu,
body.admin-shell-v2 .admin-select__menu,
body.admin-shell-v2 .admin-custom-select__menu {
  background: var(--figma-menu-bg, var(--color-bg-surface));
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  box-shadow: var(--shadow-floating);
  color: var(--color-text-secondary);
}
body.admin-shell-v2 .admin-empty,
body.admin-shell-v2 .admin-empty-state,
body.admin-shell-v2 .admin-loading {
  color: var(--color-text-muted);
  background: transparent;
  border-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-form {
  max-width: none;
  background: transparent;
}
body.admin-shell-v2 .admin-form__section {
  margin-bottom: var(--admin-space-2xl);
  padding-top: var(--admin-space-2xl);
  border-top-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-form__section-title,
body.admin-shell-v2 .admin-form__subsection-title {
  margin-bottom: var(--admin-space-sm);
  padding-bottom: var(--admin-space-sm);
  color: var(--color-text-primary);
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
body.admin-shell-v2 .admin-form__section-desc,
body.admin-shell-v2 .admin-form__desc,
body.admin-shell-v2 .admin-form__hint {
  color: var(--color-text-muted);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-form__block {
  margin-bottom: var(--admin-space-2xl);
}
body.admin-shell-v2 .admin-form__block + body.admin-shell-v2 .admin-form__block {
  margin-top: var(--admin-space-2xl);
}
body.admin-shell-v2 .admin-form__group {
  gap: var(--admin-space-sm);
}
body.admin-shell-v2 .admin-form__actions {
  gap: var(--admin-space-sm);
  padding-top: var(--admin-space);
  border-top-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-radio-cards {
  gap: var(--admin-space-sm);
}
body.admin-shell-v2 .admin-radio-card {
  min-height: 7.2rem;
  padding: var(--admin-space-lg);
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: none;
}
body.admin-shell-v2 .admin-radio-card:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-hover);
  box-shadow: none;
}
body.admin-shell-v2 .admin-radio-card:has(input:checked) {
  border-color: var(--color-action-primary);
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: none;
}
body.admin-shell-v2 .admin-radio-card:has(input:checked) .admin-radio-card__icon,
body.admin-shell-v2 .admin-radio-card:has(input:checked) .admin-radio-card__label {
  color: var(--color-text-primary);
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.admin-modal[hidden] {
  display: none;
}

.admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--admin-modal-backdrop-bg);
  backdrop-filter: blur(var(--admin-modal-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--admin-modal-backdrop-blur));
}

.admin-modal__box {
  position: relative;
  background: var(--admin-modal-box-bg);
  border-radius: var(--admin-modal-box-radius);
  box-shadow: var(--admin-modal-box-shadow);
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.admin-modal__box--md {
  max-width: 480px;
}
.admin-modal__box--lg {
  max-width: 640px;
}

body.admin-shell-v2 .admin-modal__box {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--figma-radius);
  box-shadow: var(--shadow-floating);
}
body.admin-shell-v2 .admin-modal__head,
body.admin-shell-v2 .admin-modal__footer {
  padding: var(--admin-space) var(--admin-space-2xl);
  border-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-modal__body {
  padding: var(--admin-space-2xl);
  color: var(--color-text-secondary);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-modal__close,
body.admin-shell-v2 .admin-modal__back {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--figma-radius);
  color: var(--color-text-secondary);
}

.admin-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--admin-modal-header-padding);
  border-bottom: var(--admin-modal-header-border);
}

.admin-modal__title {
  margin: 0;
  font-size: var(--admin-modal-title-fs);
  font-weight: var(--admin-modal-title-fw);
  color: var(--admin-modal-title-color);
}

.admin-modal__title-sub {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--admin-text-muted);
  margin-top: 0.2rem;
}
.admin-modal__title-sub code {
  font-family: var(--admin-font-mono, monospace);
  font-size: 1.1rem;
  background: var(--admin-bg-subtle, #f3f4f6);
  padding: 0 0.3rem;
  border-radius: 3px;
}

.admin-modal__close {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  color: var(--admin-modal-close-color);
  width: 32px;
  height: 32px;
  border-radius: var(--admin-modal-close-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-modal__close:hover {
  color: var(--admin-modal-close-hover-color);
  background: var(--admin-modal-close-hover-bg);
}
.admin-modal__close:focus-visible {
  outline: var(--admin-modal-close-focus-ring);
  outline-offset: 2px;
}

.admin-modal__body {
  padding: var(--admin-modal-body-padding);
  color: var(--admin-modal-body-color);
  font-size: var(--admin-modal-body-fs);
  line-height: var(--admin-modal-body-lh);
  overflow-y: auto;
  overflow-x: hidden;
}

.admin-modal__steps {
  display: block;
  overflow: hidden;
}

.admin-modal__step {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg);
  min-width: 0;
}

.admin-modal__steps[data-active=main] > .admin-modal__step--options {
  display: none;
}

.admin-modal__steps[data-active=options] > .admin-modal__step--main {
  display: none;
}

.admin-modal__step-header {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}

.admin-modal__step-title {
  font-size: var(--admin-fs-md);
  font-weight: 700;
  color: var(--admin-text);
}

.admin-modal__step-desc {
  margin: 0;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
}

.admin-modal__back {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--admin-modal-close-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-secondary);
  cursor: pointer;
  margin-right: var(--admin-space-xs);
  transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-modal__back:hover {
  color: var(--admin-text);
  background: var(--admin-bg-soft);
}
.admin-modal__back:focus-visible {
  outline: var(--admin-modal-close-focus-ring);
  outline-offset: 2px;
}
.admin-modal__back--hidden {
  display: none;
}

.admin-modal__head > .admin-modal__close {
  margin-left: auto;
}

.admin-modal__footer--hidden {
  display: none;
}

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

.admin-modal__footer {
  display: flex;
  gap: var(--admin-space-sm);
  justify-content: flex-end;
  padding: var(--admin-modal-footer-padding);
  border-top: var(--admin-modal-footer-border);
  background: var(--admin-bg-soft);
}

.admin-modal__body--form {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg);
}

.admin-modal__section {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}

.admin-modal__section-title {
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

body.admin-shell-v2 .admin-modal {
  padding: 2rem;
}
body.admin-shell-v2 .admin-modal__backdrop {
  background: var(--admin-modal-backdrop-bg);
  backdrop-filter: blur(0.2rem);
  -webkit-backdrop-filter: blur(0.2rem);
}
body.admin-shell-v2 .admin-modal__box {
  border: 1px solid var(--color-border-default);
  border-radius: var(--figma-radius);
  background: var(--color-bg-surface);
  box-shadow: var(--admin-shadow-modal);
}
body.admin-shell-v2 .admin-modal__head,
body.admin-shell-v2 .admin-modal__footer {
  padding: var(--admin-space) var(--admin-space-2xl);
  border-color: var(--color-border-default);
  background: var(--color-bg-surface);
}
body.admin-shell-v2 .admin-modal__body {
  padding: var(--admin-space-2xl);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-modal__title,
body.admin-shell-v2 .admin-modal__step-title {
  color: var(--color-text-primary);
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 600;
}
body.admin-shell-v2 .admin-modal__title-sub,
body.admin-shell-v2 .admin-modal__step-desc,
body.admin-shell-v2 .admin-modal__section-title {
  color: var(--color-text-muted);
}
body.admin-shell-v2 .admin-modal__close,
body.admin-shell-v2 .admin-modal__back {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--figma-radius);
  color: var(--color-text-muted);
}
body.admin-shell-v2 .admin-modal__close:hover, body.admin-shell-v2 .admin-modal__close:focus-visible,
body.admin-shell-v2 .admin-modal__back:hover,
body.admin-shell-v2 .admin-modal__back:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
  outline: 0;
}
body.admin-shell-v2 .admin-modal__footer {
  background: var(--color-bg-surface);
}

.app-modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-modal-backdrop-bg);
  z-index: var(--admin-modal-backdrop-z);
  padding: var(--admin-modal-backdrop-padding);
  backdrop-filter: blur(0.4rem);
}

.app-modal-box {
  max-width: var(--admin-modal-max-width);
  width: 100%;
  background: var(--admin-modal-box-bg);
  border-radius: 1.6rem;
  box-shadow: 0 2rem 2.5rem rgba(0, 0, 0, 0.15), 0 0.8rem 1rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid var(--admin-border-light);
  display: flex;
  flex-direction: column;
  animation: app-modal-appear 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-modal-backdrop .app-modal-box--wide {
  max-width: min(96vw, 112rem);
}

.app-modal-backdrop .app-modal-box--md {
  max-width: min(92vw, 54rem);
}

.app-modal-backdrop .app-modal-box--wide .app-modal-body--scroll {
  max-height: min(78vh, 76rem);
}

.app-modal-backdrop .cal-post-modal {
  max-width: min(94vw, 72rem);
}
.app-modal-backdrop .cal-post-modal .cal-post-modal__body {
  max-height: 72vh;
}

.cal-modal-delete-row {
  display: flex;
  margin-top: var(--admin-space-2xl);
  padding-top: var(--admin-space-lg);
  border-top: 1px solid var(--admin-border-light);
}
.cal-modal-delete-row .admin-btn {
  min-width: 12rem;
}

@keyframes app-modal-appear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.app-modal-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: var(--admin-modal-header-padding);
  border-bottom: var(--admin-modal-header-border);
}

.app-modal-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.app-modal-icon-wrap--success {
  background: var(--admin-success-bg);
  color: var(--admin-success);
}
.app-modal-icon-wrap--error {
  background: var(--admin-error-bg);
  color: var(--admin-error);
}
.app-modal-icon-wrap--warning {
  background: var(--admin-warn-bg);
  color: var(--admin-warn);
}
.app-modal-icon-wrap--info {
  background: var(--admin-info-bg);
  color: var(--admin-info);
}

.app-modal-icon {
  font-size: 2.4rem;
}

.app-modal-title {
  font-size: clamp(1.8rem, 2vw, 2rem);
  font-weight: 600;
  color: var(--admin-modal-title-color);
  margin: 0;
  line-height: 1.2;
  flex: 1;
}
.app-modal-title--success {
  color: var(--admin-success-text);
}
.app-modal-title--error {
  color: var(--admin-error-text);
}
.app-modal-title--warning {
  color: var(--admin-warn-text);
}

.app-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--admin-modal-close-color);
  border-radius: 0.8rem;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease), transform var(--admin-duration-short) var(--admin-ease);
}
.app-modal-close:hover {
  background: var(--admin-grey-100);
  color: var(--admin-text);
}
.app-modal-close:active {
  transform: scale(0.95);
}
.app-modal-close:focus-visible {
  outline: 2px solid rgba(var(--admin-primary-rgb), 0.4);
  outline-offset: 2px;
}

.app-modal-body {
  padding: var(--admin-modal-body-padding);
  font-size: var(--admin-fs-body-lg);
  line-height: 1.6;
  color: var(--admin-modal-body-color);
  white-space: pre-line;
  overflow-y: auto;
  max-height: 60vh;
  -webkit-overflow-scrolling: touch;
}
.app-modal-body--scroll {
  white-space: normal;
}

.app-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--admin-space-sm);
  padding: var(--admin-modal-footer-padding);
  border-top: var(--admin-modal-footer-border);
}

.app-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10rem;
  padding: var(--admin-modal-btn-padding);
  border-radius: 0.6rem;
  font-size: var(--admin-modal-btn-fs);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--admin-border);
  background: var(--admin-white);
  color: var(--admin-text);
  font-family: inherit;
  transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease), transform var(--admin-duration-short) var(--admin-ease);
}
.app-modal-btn:hover {
  background: var(--admin-grey-100);
  border-color: var(--admin-border-strong);
}
.app-modal-btn:active {
  transform: scale(0.98);
}
.app-modal-btn--primary {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: var(--admin-on-primary);
  font-weight: 600;
}
.app-modal-btn--primary:hover {
  background: var(--admin-primary-hover);
  border-color: var(--admin-primary-hover);
}
.app-modal-btn--danger {
  background: var(--admin-error);
  border-color: var(--admin-error);
  color: #fff;
  font-weight: 600;
}
.app-modal-btn--danger:hover {
  background: var(--admin-error-hover);
  border-color: var(--admin-error-hover);
}

.admin-search-bar {
  position: relative;
  display: flex;
  align-items: center;
}
.admin-search-bar__icon {
  position: absolute;
  left: var(--admin-space);
  color: var(--admin-text-muted);
  font-size: 1.3rem;
  pointer-events: none;
  z-index: 1;
}
.admin-search-bar__input {
  width: 100%;
  height: var(--admin-size-input-height);
  padding: 0 var(--admin-space) 0 calc(var(--admin-space) + 1.6rem + var(--admin-space-xs));
  font-size: var(--admin-fs-body-lg);
  color: var(--admin-text);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  font-family: inherit;
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-search-bar__input::placeholder {
  color: var(--admin-text-muted);
}
.admin-search-bar__input:hover:not(:disabled) {
  border-color: var(--admin-border-strong);
}
.admin-search-bar__input:focus {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
}
.admin-search-bar__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.admin-search-bar__clear {
  position: absolute;
  right: var(--admin-space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: none;
  background: transparent;
  color: var(--admin-text-muted);
  border-radius: var(--admin-radius-xs);
  cursor: pointer;
  font-size: 1.3rem;
  transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-search-bar__clear:hover {
  background: var(--admin-grey-100);
  color: var(--admin-text);
}

body.admin-shell-v2 .admin-search-bar__input {
  height: var(--admin-size-input-height);
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-primary);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-search-bar__input:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}
body.admin-shell-v2 .admin-search-bar__input:focus {
  border-color: var(--color-border-focus);
  box-shadow: none;
}
body.admin-shell-v2 .admin-search-bar__icon,
body.admin-shell-v2 .admin-search-bar__clear {
  color: var(--color-text-muted);
}

.admin-nav-tabs {
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-2xs);
  margin: 0 0 var(--admin-space) 0;
  border: 0;
  background: transparent;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.admin-nav-tabs::-webkit-scrollbar {
  display: none;
}
.admin-nav-tabs--center {
  justify-content: center;
}
.admin-nav-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  min-height: 3.2rem;
  padding: 0 var(--admin-space);
  color: var(--admin-text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--admin-fs-base);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-lg);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease);
  position: relative;
}
.admin-nav-tabs__tab i, .admin-nav-tabs__tab svg {
  font-size: var(--admin-fs-sm);
  color: currentColor;
  transition: color var(--admin-duration-short) var(--admin-ease);
}
.admin-nav-tabs__tab:hover:not(.admin-nav-tabs__tab--active) {
  color: var(--admin-text);
  background: var(--admin-grey-100);
}
.admin-nav-tabs__tab--active {
  color: var(--admin-text);
  border-color: transparent;
  font-weight: 600;
  background: var(--admin-grey-100);
}
.admin-nav-tabs__tab--active i, .admin-nav-tabs__tab--active svg {
  color: currentColor;
}
.admin-nav-tabs__tab:focus-visible {
  outline: 0;
  border-color: var(--admin-border-focus);
}
.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-lg);
  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.14);
  color: var(--admin-text);
}
.admin-nav-tabs--locale {
  margin-top: var(--admin-space-2xl);
  margin-bottom: var(--admin-space-sm);
}

.admin-form__locale-panel {
  display: none;
}
.admin-form__locale-panel--active {
  display: block;
}

body.admin-shell-v2 .admin-nav-tabs {
  gap: var(--admin-space-xs);
  padding: 0;
  border-bottom: 0;
}
body.admin-shell-v2 .admin-nav-tabs__tab {
  min-height: 3.2rem;
  padding: 0 var(--admin-space-lg);
  color: var(--color-text-secondary);
  font-size: var(--admin-fs-base);
  border: 1px solid transparent;
  border-radius: var(--admin-radius-lg);
  margin-bottom: 0;
  transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease);
}
body.admin-shell-v2 .admin-nav-tabs__tab:hover:not(body.admin-shell-v2 .admin-nav-tabs__tab--active) {
  color: var(--color-text-primary);
  background: var(--figma-menu-hover, var(--color-bg-hover));
}
body.admin-shell-v2 .admin-nav-tabs__tab--active {
  color: var(--color-text-primary);
  border-color: transparent;
  background: var(--color-bg-hover);
  font-weight: 600;
}
body.admin-shell-v2 .admin-nav-tabs__tab--active i,
body.admin-shell-v2 .admin-nav-tabs__tab--active svg {
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-nav-tabs__tab:focus-visible {
  outline: 0;
  border-color: var(--color-border-focus);
}
body.admin-shell-v2 .admin-nav-tabs__badge {
  height: 1.8rem;
  border-radius: var(--figma-radius);
  background: var(--color-bg-selected);
  color: var(--color-text-secondary);
}
body.admin-shell-v2 .admin-nav-tabs__tab--active .admin-nav-tabs__badge {
  background: var(--color-bg-selected);
  color: var(--color-text-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 {
  outline: 2px solid var(--color-border-focus, var(--admin-border-focus));
  outline-offset: 0.2rem;
}
.admin-toggle-switch[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}
.admin-toggle-switch__track {
  position: relative;
  display: inline-block;
  flex: 0 0 var(--figma-switch-width);
  width: var(--figma-switch-width);
  height: var(--figma-switch-height);
  background: var(--figma-switch-off-bg);
  border: 1px solid var(--figma-switch-off-border);
  border-radius: 999px;
  transition: background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-toggle-switch__thumb {
  position: absolute;
  top: 50%;
  left: var(--figma-switch-thumb-gap);
  width: var(--figma-switch-thumb-size);
  height: var(--figma-switch-thumb-size);
  background: var(--figma-switch-thumb-off-bg);
  border: 1px solid var(--figma-switch-off-border);
  border-radius: 50%;
  box-shadow: none;
  transform: translateY(-50%);
  transition: left var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), border-color 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(--figma-switch-on-bg);
  border-color: var(--figma-switch-on-border);
}
.admin-toggle-switch.is-on .admin-toggle-switch__thumb {
  left: calc(100% - var(--figma-switch-thumb-size) - var(--figma-switch-thumb-gap));
  background: var(--figma-switch-thumb-on-bg);
  border-color: var(--figma-switch-thumb-on-bg);
}
.admin-toggle-switch.is-off .admin-toggle-switch__track {
  background: var(--figma-switch-off-bg);
  border-color: var(--figma-switch-off-border);
}
.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(--color-bg-hover);
  border-color: var(--color-border-strong);
}

.admin-sns-visibility {
  margin-top: var(--admin-space-lg);
  padding-top: var(--admin-space-lg);
  border-top: 1px solid var(--admin-border);
}
.admin-sns-visibility__title {
  margin: 0 0 var(--admin-space-xs);
  font-size: var(--admin-fs-lg);
  font-weight: 700;
  color: var(--admin-text);
  line-height: 1.4;
}
.admin-sns-visibility__hint {
  margin: 0 0 var(--admin-space-md);
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
  line-height: 1.55;
}
.admin-sns-visibility__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
}
.admin-sns-visibility__item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-md);
  padding: var(--admin-space-md);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
}
@media (max-width: 544px) {
  .admin-sns-visibility__item {
    flex-wrap: wrap;
  }
}
.admin-sns-visibility__item-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--admin-radius-sm);
  background: color-mix(in srgb, var(--admin-primary) 8%, transparent);
  color: var(--admin-primary);
  font-size: var(--admin-fs-lg);
}
.admin-sns-visibility__item-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.admin-sns-visibility__item-label {
  font-size: var(--admin-fs-lg);
  font-weight: 600;
  color: var(--admin-text);
  line-height: 1.4;
}
.admin-sns-visibility__item-desc {
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
  line-height: 1.55;
}
.admin-sns-visibility__item-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
@media (max-width: 544px) {
  .admin-sns-visibility__item-toggle {
    width: 100%;
    padding-top: var(--admin-space-xs);
    justify-content: flex-end;
  }
}

.admin-segmented-control-form {
  margin: 0;
  display: inline-flex;
}

.admin-segmented-control {
  display: inline-flex;
  align-items: stretch;
  padding: 0.1875rem;
  background: var(--admin-grey-200);
  border: 1px solid var(--admin-grey-300);
  border-radius: 999px;
  position: relative;
  font-size: var(--admin-fs-sm);
  user-select: none;
}
.admin-segmented-control.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-segmented-control__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-segmented-control__input:focus-visible + .admin-segmented-control__option {
  outline: 2px solid var(--admin-state-focus);
  outline-offset: 2px;
}

.admin-segmented-control__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  color: var(--admin-text-secondary);
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-segmented-control__option:hover {
  color: var(--admin-text);
  background: rgba(0, 0, 0, 0.04);
}
.admin-segmented-control__option.is-selected {
  background: var(--admin-white);
  color: var(--admin-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--admin-grey-300);
}
.admin-segmented-control__option.is-selected:hover {
  background: var(--admin-white);
}

.admin-segmented-control.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

.admin-segmented-control.is-disabled .admin-segmented-control__option {
  cursor: not-allowed;
}

.admin-segmented-control__label {
  display: inline-block;
  white-space: nowrap;
}

.admin-segmented-control--radio-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: var(--admin-space-2xs);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.admin-segmented-control--radio-list .admin-segmented-control__option {
  justify-content: flex-start;
  gap: var(--admin-space);
  min-height: var(--figma-control-height, var(--admin-size-input-height));
  padding: var(--admin-space-sm) var(--admin-space);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: transparent;
  text-align: left;
}

.admin-segmented-control__indicator {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  border: 2px solid var(--admin-text-muted);
  border-radius: var(--admin-radius-full);
  background: transparent;
}

.admin-segmented-control__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
}

.admin-segmented-control__desc {
  display: block;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs);
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
}

.admin-segmented-control--radio-list .admin-segmented-control__option.is-selected .admin-segmented-control__indicator {
  border-color: var(--admin-primary);
  background: radial-gradient(circle, var(--admin-primary) 0 38%, transparent 42%);
}

body.admin-shell-v2 .admin-segmented-control {
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-2xs);
  background: transparent;
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  font-size: var(--admin-fs-base);
}
body.admin-shell-v2 .admin-segmented-control__input:focus-visible + .admin-segmented-control__option {
  outline: 0;
  border-color: var(--color-border-focus);
}
body.admin-shell-v2 .admin-segmented-control__option {
  min-height: 3.2rem;
  min-width: 0;
  padding: 0.6rem var(--admin-space);
  border: 1px solid transparent;
  border-radius: var(--figma-radius);
  color: var(--color-text-secondary);
  font-weight: 500;
}
body.admin-shell-v2 .admin-segmented-control__option:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}
body.admin-shell-v2 .admin-segmented-control__option.is-selected {
  background: var(--color-bg-hover);
  border-color: transparent;
  color: var(--color-text-primary);
  box-shadow: none;
}
body.admin-shell-v2 .admin-segmented-control--radio-list {
  gap: var(--admin-space-2xs);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
body.admin-shell-v2 .admin-segmented-control--radio-list .admin-segmented-control__option {
  justify-content: flex-start;
  align-items: center;
  gap: var(--admin-space);
  min-height: var(--figma-row-height, 4.8rem);
  padding: var(--admin-space-xs) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-segmented-control--radio-list .admin-segmented-control__option:hover {
  background: transparent;
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-segmented-control--radio-list .admin-segmented-control__option.is-selected {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-segmented-control__indicator {
  width: 1.8rem;
  height: 1.8rem;
  margin-top: 0;
  border-color: var(--color-text-muted);
}
body.admin-shell-v2 .admin-segmented-control__desc {
  color: var(--color-text-muted);
}
body.admin-shell-v2 .admin-segmented-control--radio-list .admin-segmented-control__option.is-selected .admin-segmented-control__indicator {
  border-color: var(--color-action-primary);
  background: radial-gradient(circle, var(--color-action-primary) 0 38%, transparent 42%);
}

.admin-file-uploader-box {
  min-height: 120px;
  padding: var(--admin-space);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
}

.admin-file-uploader__fallback {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: var(--admin-space-xl);
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-grey-50);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-file-uploader__fallback:hover {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
}
.admin-file-uploader__fallback input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  color: transparent;
}
.admin-file-uploader__fallback input[type=file]::file-selector-button {
  display: none;
}

.admin-file-uploader__dropzone input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  color: transparent;
}
.admin-file-uploader__dropzone input[type=file]::file-selector-button {
  display: none;
}

.admin-file-uploader-box--inited .admin-file-uploader__fallback {
  display: none;
}

.admin-file-uploader__list {
  margin-top: var(--admin-space);
}

.admin-file-uploader__grid {
  display: grid;
  gap: var(--admin-space-sm);
  margin-top: var(--admin-space-sm);
}
.admin-file-uploader__grid--image {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.admin-file-uploader__grid--video, .admin-file-uploader__grid--audio {
  grid-template-columns: 1fr;
}
.admin-file-uploader__grid--document, .admin-file-uploader__grid--archive {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.admin-file-uploader__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-sm);
  background: var(--admin-grey-50);
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border-light);
  transition: box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-file-uploader__item:hover {
  box-shadow: var(--admin-elevation-1);
}

.admin-file-uploader__thumb {
  width: 100%;
  height: auto;
  max-height: 110px;
  object-fit: cover;
  border-radius: var(--admin-radius-xs);
}

.admin-file-uploader__preview-video {
  width: 100%;
  max-height: 160px;
  border-radius: var(--admin-radius-xs);
}

.admin-file-uploader__preview-audio {
  width: 100%;
  max-width: 320px;
}

.admin-file-uploader__icon {
  font-size: var(--admin-fs-body-xl);
  color: var(--admin-text-muted);
}

.admin-file-uploader__dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: var(--admin-space-xl);
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-grey-50);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-file-uploader__dropzone:hover, .admin-file-uploader__dropzone--dragover {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
}
.admin-file-uploader__dropzone--disabled {
  pointer-events: none;
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-file-uploader__dropzone-icon {
  display: block;
  font-size: 2.4rem;
  color: var(--admin-text-muted);
  margin-bottom: var(--admin-space-sm);
}
.admin-file-uploader__dropzone-icon i {
  font-size: inherit;
}

.admin-file-uploader__dropzone-text {
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 0.3rem;
}

.admin-file-uploader__dropzone-hint {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}

.admin-file-uploader__dropzone-loader {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space);
  background: rgba(255, 255, 255, 0.92);
  border-radius: inherit;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  backdrop-filter: blur(2px);
}
.admin-file-uploader__dropzone-loader .fa-spinner {
  font-size: 1.8rem;
  color: var(--admin-primary);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.admin-file-uploader-box--loading .admin-file-uploader__dropzone .admin-file-uploader__dropzone-loader {
  display: flex;
}

.admin-file-uploader-box--loading .admin-file-uploader__dropzone .admin-file-uploader__dropzone-icon,
.admin-file-uploader-box--loading .admin-file-uploader__dropzone .admin-file-uploader__dropzone-text,
.admin-file-uploader-box--loading .admin-file-uploader__dropzone .admin-file-uploader__dropzone-hint {
  visibility: hidden;
}

.admin-file-uploader__meta {
  width: 100%;
  margin-top: var(--admin-space-2xs);
}

.admin-file-uploader__name {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-file-uploader__size {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  margin-top: 0.1rem;
}

.admin-file-uploader__actions {
  display: flex;
  gap: var(--admin-space-2xs);
  flex-wrap: wrap;
  margin-top: var(--admin-space-xs);
}

/* CMS 슬롯 변형 */
.admin-file-uploader-box--cms-slot {
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: inherit;
  background: transparent;
}

.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone--cms-slot {
  width: 100%;
  min-height: 100%;
  flex: 1;
  margin: 0;
  gap: var(--admin-space-xs);
}

.admin-cms-media-placeholder--list-uploader.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone--cms-slot {
  min-height: 140px;
  flex: 0 0 auto;
}

.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone.is-cms-slot-overlay {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  opacity: 1;
  transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease);
}

.admin-file-uploader-box--cms-slot:hover .admin-file-uploader__dropzone.is-cms-slot-overlay,
.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone.is-cms-slot-overlay.admin-file-uploader__dropzone--dragover {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.6);
}

.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone-icon {
  margin-bottom: var(--admin-space-2xs);
}

.admin-file-uploader-box--cms-slot .admin-file-uploader__dropzone-text {
  margin-bottom: 0;
  text-align: center;
}

.admin-single-image-uploader__rules {
  margin-bottom: var(--admin-space-xl);
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.6;
}
.admin-single-image-uploader__dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: var(--admin-space-2xl);
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-grey-50);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-single-image-uploader__dropzone:hover, .admin-single-image-uploader__dropzone--dragover {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
}
.admin-single-image-uploader__dropzone input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  color: transparent;
}
.admin-single-image-uploader__dropzone input[type=file]::file-selector-button {
  display: none;
}
.admin-single-image-uploader__dropzone-icon {
  font-size: 3rem;
  color: var(--admin-text-muted);
  margin-bottom: var(--admin-space);
  display: block;
}
.admin-single-image-uploader__dropzone-text {
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 0.4rem;
}
.admin-single-image-uploader__dropzone-hint {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-single-image-uploader__preview {
  display: flex;
  align-items: center;
  gap: var(--admin-space-lg);
  max-width: 440px;
  padding: var(--admin-space);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  margin-top: var(--admin-space);
}
.admin-single-image-uploader__thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border-light);
}
.admin-single-image-uploader__meta {
  flex: 1;
  min-width: 0;
}
.admin-single-image-uploader__name {
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-single-image-uploader__size {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  margin-top: 0.2rem;
}
.admin-single-image-uploader__actions {
  display: flex;
  gap: var(--admin-space-xs);
  margin-top: var(--admin-space-sm);
  flex-wrap: wrap;
}

.admin-single-video-uploader__rules {
  margin-bottom: var(--admin-space-lg);
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.6;
}
.admin-single-video-uploader__dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: var(--admin-space-xl);
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-grey-50);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-single-video-uploader__dropzone:hover, .admin-single-video-uploader__dropzone--dragover {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
}
.admin-single-video-uploader__dropzone input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  color: transparent;
}
.admin-single-video-uploader__dropzone input[type=file]::file-selector-button {
  display: none;
}
.admin-single-video-uploader__icon {
  font-size: 2.8rem;
  color: var(--admin-text-muted);
  margin-bottom: var(--admin-space-sm);
  display: block;
}
.admin-single-video-uploader__text {
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 0.3rem;
}
.admin-single-video-uploader__hint {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-single-video-uploader__preview {
  margin-top: var(--admin-space);
  padding: var(--admin-space);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
}
.admin-single-video-uploader video {
  width: 100%;
  max-height: 200px;
  border-radius: var(--admin-radius-sm);
}

.admin-cpf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.admin-cpf__modes {
  display: inline-flex;
  border: 1px solid var(--admin-border-light, #eee);
  border-radius: var(--admin-radius-sm, 6px);
  overflow: hidden;
}
.admin-cpf__modes[hidden] {
  display: none;
}

.admin-cpf__mode {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  background: var(--admin-grey-50, #fafafa);
  color: var(--admin-text-secondary, #525252);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
}
.admin-cpf__mode + .admin-cpf__mode {
  border-left: 1px solid var(--admin-border-light, #eee);
}
.admin-cpf__mode.is-active {
  background: var(--admin-primary, #171717);
  color: var(--admin-on-primary, #fff);
}

.admin-cpf__pane[hidden] {
  display: none;
}

.admin-cpf__pane--gradient {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 320px;
}

.admin-cpf__grad-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.admin-cpf__grad-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12px;
  color: var(--admin-text-secondary, #525252);
}

.admin-cpf__grad-type {
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--admin-border-light, #eee);
  border-radius: var(--admin-radius-xs, 4px);
  background: #fff;
}

.admin-cpf__grad-angle,
.admin-cpf__stop-pos {
  width: 3.5rem;
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--admin-border-light, #eee);
  border-radius: var(--admin-radius-xs, 4px);
  background: #fff;
}

.admin-cpf__grad-unit {
  font-size: 11px;
  color: var(--admin-text-secondary, #525252);
}

.admin-cpf__stops {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.admin-cpf__stop {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-cpf__stop-tag {
  width: 2.6em;
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-text-secondary, #525252);
}

.admin-cpf__grad-preview {
  width: 100%;
  min-width: 12rem;
  height: 1.75rem;
  border-radius: var(--admin-radius-xs, 4px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.admin-cpf .pickr {
  position: relative;
  z-index: 2;
}

.admin-cpf .pcr-app {
  z-index: 40;
}

.admin-cpf__pickr .pickr .pcr-button {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.35rem;
  border-radius: var(--admin-radius-sm, 6px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.admin-cpf__stop-pickr .pickr .pcr-button {
  width: 1.9rem;
  height: 1.9rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.25rem;
  border-radius: var(--admin-radius-xs, 4px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.fcf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
}

.fcf__swatch {
  flex: 0 0 auto;
}

.fcf__swatch .pickr {
  position: relative;
  line-height: 0;
}

.fcf__swatch .pcr-button {
  width: 2.8rem;
  height: 2.8rem;
  min-width: 2.8rem;
  border-radius: var(--admin-radius-sm, 6px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
.fcf__swatch .pcr-button::after {
  border-radius: inherit;
}

.fcf__hex.admin-form__input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
}

.fcf__eyedropper {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 6px);
  background: var(--admin-bg-soft, transparent);
  color: var(--admin-text-secondary);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.fcf__eyedropper:hover {
  color: var(--admin-text);
  background: var(--admin-bg-hover, rgba(0, 0, 0, 0.05));
  border-color: var(--admin-border-strong, var(--admin-border));
}

.pcr-app.fcf-app {
  padding: 0.9rem;
  border: 1px solid var(--admin-border, rgba(15, 23, 42, 0.12));
  border-radius: 12px;
  background: var(--admin-surface, #ffffff);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(15, 23, 42, 0.1);
  width: 22rem;
  max-width: calc(100vw - 1.6rem);
}
.pcr-app.fcf-app .pcr-selection {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  height: auto;
}
.pcr-app.fcf-app .pcr-color-preview {
  display: none;
}
.pcr-app.fcf-app .pcr-color-palette,
.pcr-app.fcf-app .pcr-palette {
  width: 100%;
}
.pcr-app.fcf-app .pcr-palette {
  min-height: 12.5rem;
  border-radius: 8px;
}
.pcr-app.fcf-app .pcr-palette .pcr-picker {
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #fff, 0 0 2px rgba(0, 0, 0, 0.5);
}
.pcr-app.fcf-app .pcr-color-chooser,
.pcr-app.fcf-app .pcr-color-opacity {
  width: 100%;
}
.pcr-app.fcf-app .pcr-hue,
.pcr-app.fcf-app .pcr-opacity {
  border-radius: 999px;
  height: 1rem;
}
.pcr-app.fcf-app .pcr-hue .pcr-picker,
.pcr-app.fcf-app .pcr-opacity .pcr-picker {
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, 0.35);
}
.pcr-app.fcf-app .pcr-interaction {
  margin-top: 0.8rem;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.pcr-app.fcf-app .pcr-interaction input {
  height: 3rem;
  padding: 0 0.7rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-bg-soft, var(--admin-surface, #fff));
  color: var(--admin-text);
  font-size: 1.2rem;
  box-shadow: none;
}
.pcr-app.fcf-app .pcr-interaction input:focus {
  outline: none;
  border-color: var(--admin-border-focus, var(--admin-primary));
}
.pcr-app.fcf-app .pcr-interaction .pcr-result {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
}
.pcr-app.fcf-app .pcr-interaction .pcr-type {
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--admin-bg-soft, transparent);
}
.pcr-app.fcf-app .pcr-interaction .pcr-type.active {
  background: var(--admin-primary, #2563eb);
  color: #fff;
}
.pcr-app.fcf-app .pcr-swatches {
  margin-top: 0.8rem;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.pcr-app.fcf-app .pcr-swatches > button {
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
}
.pcr-app.fcf-app .pcr-swatches > button::after {
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* 하위 서비스 — 심층 DSL 편집기 (관리자) */
.admin-si-deep {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
}

.admin-si-deep__hint-top {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--admin-on-surface-variant);
}

.admin-si-deep__guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2rem) clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
  background: rgba(var(--admin-primary-rgb), 0.06);
  border: 1px solid var(--admin-outline-variant);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}

.admin-si-deep__toolbar-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-si-deep__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-si-deep__guide-label {
  font-weight: 700;
  color: var(--admin-on-surface);
  margin-right: 4px;
}

.admin-si-deep__guide-doc {
  width: 100%;
  margin-top: 2px;
  font-size: 11px;
  color: var(--admin-on-surface-variant);
}
.admin-si-deep__guide-doc code {
  font-size: 11px;
}

.admin-si-deep__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 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: var(--admin-accent-purple-bg);
  color: var(--admin-accent-purple-text);
  border-color: transparent;
}

.admin-si-deep__chip--end {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
  border-color: transparent;
}

.admin-si-deep__chip--title {
  background: var(--admin-accent-teal-bg);
  color: var(--admin-accent-teal-text);
  border-color: transparent;
}

.admin-si-deep__chip--sep {
  background: var(--admin-premium-bg);
  color: var(--admin-premium-text);
  border-color: transparent;
}

.admin-si-deep__chip--at {
  background: var(--admin-info-bg);
  color: var(--admin-info-text);
  border-color: transparent;
}

.admin-si-deep__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--admin-outline-variant);
  border-radius: 8px;
  background: var(--admin-white);
  color: var(--admin-on-surface);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.admin-si-deep__tool:hover {
  transform: translateY(-1px);
}
.admin-si-deep__tool:focus-visible {
  outline: 2px solid rgba(var(--admin-primary-rgb), 0.35);
  outline-offset: 2px;
}

.admin-si-deep__tool--section {
  background: var(--admin-accent-purple-bg);
  color: var(--admin-accent-purple-text);
  border-color: transparent;
}

.admin-si-deep__tool--end {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
  border-color: transparent;
}

.admin-si-deep__tool--title {
  background: var(--admin-accent-teal-bg);
  color: var(--admin-accent-teal-text);
  border-color: transparent;
}

.admin-si-deep__tool--sep {
  background: var(--admin-premium-bg);
  color: var(--admin-premium-text);
  border-color: transparent;
}

.admin-si-deep__tool--at {
  background: var(--admin-info-bg);
  color: var(--admin-info-text);
  border-color: transparent;
}

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

.admin-si-deep__ta {
  display: block;
  margin: 0;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.7;
  font-family: 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: var(--admin-white) !important;
  color: var(--admin-text);
  caret-color: var(--admin-text);
}
.admin-si-deep__ta::placeholder {
  color: var(--admin-text-muted);
}
.admin-si-deep__ta::selection {
  background: rgba(var(--admin-primary-rgb), 0.2);
}
.admin-si-deep__ta:focus {
  outline: 2px solid rgba(var(--admin-primary-rgb), 0.35);
  outline-offset: -1px;
}

.admin-si-deep__result {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--admin-outline-variant);
  border-radius: 10px;
  background: var(--admin-white);
  overflow: hidden;
}

.admin-si-deep__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: var(--admin-grey-50);
  border-bottom: 1px solid var(--admin-outline-variant);
}

.admin-si-deep__tab {
  min-width: 84px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--admin-on-surface-variant);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.admin-si-deep__tab:hover {
  background: rgba(var(--admin-primary-rgb), 0.08);
  color: var(--admin-on-surface);
}
.admin-si-deep__tab.is-active {
  background: var(--admin-white);
  border-color: var(--admin-outline-variant);
  color: var(--admin-on-surface);
}
.admin-si-deep__tab:focus-visible {
  outline: 2px solid rgba(var(--admin-primary-rgb), 0.35);
  outline-offset: 2px;
}

.admin-si-deep__panel {
  display: none;
  background: var(--admin-white);
}
.admin-si-deep__panel.is-active {
  display: block;
}

.admin-si-deep__output {
  margin: 0;
  padding: 16px 18px;
  min-height: 240px;
  max-height: 360px;
  overflow: auto;
  background: var(--admin-white);
  color: var(--admin-text);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/**
 * 인덱스 페이지 공용 보조 스타일.
 * - Excel 다운로드 버튼 (Airtable 스타일)
 * - 대량 선택 체크박스 컬럼
 * - 선택된 행 강조
 *
 * 툴바 본체 스타일은 _index-toolbar.scss 참고.
 */
/* Excel 다운로드 버튼 (녹색 계열 — Office 엑셀 컬러) */
.admin-btn--excel {
  background: var(--admin-white);
  border-color: var(--admin-border);
  color: #217346;
}
.admin-btn--excel:hover {
  background: var(--admin-success-bg);
  border-color: var(--admin-success-border);
  color: var(--admin-success-text);
}
.admin-btn--excel i {
  color: #217346;
}

/* 테이블 체크박스 컬럼 */
.admin-table__check {
  width: 40px !important;
  padding-left: 1rem !important;
  padding-right: 0 !important;
}
.admin-table__check input[type=checkbox] {
  accent-color: var(--admin-primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* 선택된 행 하이라이트 */
table tr.is-selected td,
.admin-table tbody tr.is-selected td {
  background: var(--admin-primary-light);
}

.admin-index-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-xs) var(--admin-space);
  margin: 0 0 var(--admin-space);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  transition: background 150ms ease, border-color 150ms ease;
}
.admin-index-toolbar.is-active {
  background: var(--admin-primary-light);
  border-color: rgba(var(--admin-primary-rgb), 0.35);
}
.admin-index-toolbar .admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  height: var(--admin-size-input-height);
}
.admin-index-toolbar .admin-btn i {
  font-size: 1.2rem;
  line-height: 1;
}

.admin-index-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs);
}
.admin-index-toolbar__group--page {
  flex-wrap: wrap;
  gap: var(--admin-space-xs);
  padding-left: var(--admin-space);
  margin-left: var(--admin-space-xs);
  border-left: 1px solid var(--admin-border-light);
}
.admin-index-toolbar__group--end {
  margin-left: auto;
}

.admin-index-toolbar__page-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-body);
}

.admin-index-toolbar__page-input {
  width: 52px;
  height: var(--admin-size-input-height);
  padding: 0 0.5rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-xs);
  background: var(--admin-white);
  color: var(--admin-text);
  font-size: var(--admin-fs-body-lg);
  text-align: center;
  -moz-appearance: textfield;
}
.admin-index-toolbar__page-input::-webkit-outer-spin-button, .admin-index-toolbar__page-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.admin-index-toolbar__page-input:focus {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
}

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

body.admin-shell-v2 .admin-index-toolbar {
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-2xs);
  margin-bottom: var(--admin-space-xs);
  border-color: var(--color-border-default);
  border-width: 1px;
  border-radius: 0.8rem;
  background: var(--figma-menu-bg);
  box-shadow: none;
}
body.admin-shell-v2 .admin-index-toolbar.is-active {
  background: var(--figma-menu-bg);
  border-color: var(--color-border-strong);
}
body.admin-shell-v2 .admin-index-toolbar .admin-btn {
  height: 3rem;
  min-height: 3rem;
  padding-inline: var(--admin-space-sm);
  border-color: transparent;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.2rem;
  line-height: 1.6rem;
}
body.admin-shell-v2 .admin-index-toolbar .admin-btn:hover:not(:disabled), body.admin-shell-v2 .admin-index-toolbar .admin-btn:focus-visible {
  border-color: transparent;
  background: var(--figma-menu-row-hover);
  color: var(--color-text-primary);
  box-shadow: none;
}
body.admin-shell-v2 .admin-index-toolbar .admin-btn:disabled {
  background: transparent;
  color: var(--color-text-muted);
  opacity: 0.52;
}
body.admin-shell-v2 .admin-index-toolbar [data-bulk-action=select-all] {
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-index-toolbar [data-bulk-action=delete]:not(:disabled) {
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-index-toolbar [data-bulk-action=delete]:not(:disabled):hover, body.admin-shell-v2 .admin-index-toolbar [data-bulk-action=delete]:not(:disabled):focus-visible {
  background: #0d99ff;
  color: #ffffff;
}
body.admin-shell-v2 .admin-index-toolbar__group {
  gap: var(--admin-space-2xs);
}
body.admin-shell-v2 .admin-index-toolbar__group--page {
  padding-left: var(--admin-space-xs);
  margin-left: var(--admin-space-2xs);
  border-left-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-index-toolbar__page-info,
body.admin-shell-v2 .admin-index-toolbar__page-jump {
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1.6rem;
}
body.admin-shell-v2 .admin-index-toolbar__page-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: none;
}
body.admin-shell-v2 .admin-index-toolbar__count {
  min-width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.admin-index-listing {
  position: relative;
}
@media (max-width: 1024px) {
  .admin-index-listing .admin-table-wrap {
    display: none;
  }
}

.admin-index-card {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1024px) {
  .admin-index-card {
    display: flex;
    flex-direction: column;
    gap: var(--admin-space-lg);
  }
}

.admin-index-card__i18n {
  display: none;
}
@media (max-width: 1024px) {
  .admin-index-card__i18n {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--admin-space);
  }
}

.admin-index-card__item {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-md);
  padding: var(--admin-space-xl);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
}

.admin-index-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-space);
}

.admin-index-card__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--admin-fs-lg);
  font-weight: 600;
  color: var(--admin-text);
}
.admin-index-card__title a {
  color: inherit;
  text-decoration: none;
}
.admin-index-card__title a:hover {
  color: var(--admin-primary);
  text-decoration: underline;
}

.admin-index-card__check {
  flex-shrink: 0;
}
.admin-index-card__check .admin-checkbox-wrap {
  margin: 0;
}

.admin-index-card__fields {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  margin: 0;
}

.admin-index-card__field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--admin-space);
}

.admin-index-card__field-label {
  flex-shrink: 0;
  margin: 0;
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-index-card__field-value {
  margin: 0;
  text-align: right;
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
  word-break: break-word;
}

.admin-index-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--admin-space-xs);
  padding-top: var(--admin-space-xs);
  border-top: 1px solid var(--admin-border-light);
}
.admin-index-card__actions .admin-table__actions {
  display: contents;
}

@media (max-width: 1024px) {
  body.admin-shell-v2 .admin-index-card {
    gap: var(--admin-space-xl);
  }
}
body.admin-shell-v2 .admin-index-card__item {
  gap: var(--admin-space-lg);
  padding: var(--admin-space-2xl);
  background: transparent;
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  box-shadow: none;
}
body.admin-shell-v2 .admin-index-card__actions {
  padding-top: var(--admin-space-lg);
  border-top-color: var(--color-border-default);
}

.admin-table-cards {
  display: none;
}
@media (max-width: 1024px) {
  .admin-table-cards {
    display: flex;
    flex-direction: column;
    gap: var(--admin-space-sm);
  }
}

@media (max-width: 1024px) {
  [data-table-manager] table,
  [data-listing-table] table {
    display: none;
  }
}
.admin-table-card {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: transparent;
  overflow: hidden;
}
.admin-table-card--current, .admin-table-card.user-sessions__row--current {
  border-left: 3px solid var(--admin-primary);
}
.admin-table-card__header {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-xs) var(--admin-space);
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50);
}
.admin-table-card__check {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.admin-table-card__check .admin-checkbox-wrap {
  margin: 0;
}
.admin-table-card__icon {
  display: flex;
  align-items: center;
  color: var(--admin-text-muted);
  font-size: 1.3rem;
}
.admin-table-card__body {
  padding: var(--admin-space-sm) var(--admin-space);
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}
.admin-table-card__row {
  display: flex;
  align-items: baseline;
  gap: var(--admin-space-sm);
}
.admin-table-card__label {
  flex-shrink: 0;
  min-width: 80px;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-table-card__value {
  flex: 1;
  font-size: var(--admin-fs-body-lg);
  color: var(--admin-text);
  word-break: break-all;
}
.admin-table-card__value code {
  font-family: 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(--figma-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), background 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: none;
}
.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(--figma-radius);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
  animation: cs-in var(--admin-duration-short) var(--admin-ease) both;
}
.cs-dropdown--up {
  top: auto;
  bottom: calc(100% + 4px);
  animation-name: cs-in-up;
}
.cs-dropdown__search {
  padding: var(--admin-space-xs) var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50);
}
.cs-dropdown__search-input {
  width: 100%;
  height: 3rem;
  padding: 0 var(--admin-space-sm);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-xs);
  font-size: var(--admin-fs-body-lg);
  font-family: inherit;
  color: var(--admin-text);
}
.cs-dropdown__search-input::placeholder {
  color: var(--admin-text-muted);
}
.cs-dropdown__search-input:focus {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
}

@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;
  gap: var(--admin-space-sm);
  justify-content: space-between;
  min-height: 2.8rem;
  padding: 0.4rem 0.8rem;
  font-size: var(--admin-fs-base);
  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(--color-bg-selected);
  color: var(--color-text-primary);
  font-weight: 500;
}
.cs-option--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cs-option--empty {
  cursor: default;
  justify-content: center;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-sm);
  padding: 1.2rem var(--admin-space);
}
.cs-option__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-option__sublabel {
  flex-shrink: 0;
  margin-left: var(--admin-space-sm);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  letter-spacing: 0.02em;
}
.cs-option--selected .cs-option__sublabel {
  color: var(--color-text-muted);
  opacity: 1;
}
.cs-option__check {
  order: -1;
  flex-shrink: 0;
  margin-left: 0;
  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(--figma-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: none;
}

.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(--color-bg-selected);
  color: var(--color-text-primary);
  border: 1px solid rgba(var(--admin-primary-rgb), 0.25);
  border-radius: var(--figma-radius);
  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(--figma-radius);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
  animation: cs-in var(--admin-duration-short) var(--admin-ease) both;
}
.mcs-dropdown--up {
  top: auto;
  bottom: calc(100% + 4px);
  animation-name: cs-in-up;
}

.mcs-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: min(240px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mcs-option {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: 0.65rem var(--admin-space);
  font-size: var(--admin-fs-body-lg);
  color: var(--admin-text);
  cursor: pointer;
  transition: background var(--admin-duration-short) var(--admin-ease);
}
.mcs-option:hover:not(.mcs-option--disabled):not(.mcs-option--empty) {
  background: var(--admin-grey-50);
}
.mcs-option--active:not(.mcs-option--disabled) {
  background: var(--admin-grey-100);
}
.mcs-option--selected {
  font-weight: 500;
}
.mcs-option--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mcs-option--empty {
  cursor: default;
  justify-content: center;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-sm);
  padding: 1.2rem var(--admin-space);
}
.mcs-option--addable {
  color: var(--admin-primary);
  font-weight: 500;
}
.mcs-option__check {
  flex-shrink: 0;
  width: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-primary);
}
.mcs-option__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcs-option__add-icon {
  flex-shrink: 0;
  width: 1.4rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--admin-primary);
}

.mcs-wrap--search-top .mcs-trigger {
  cursor: pointer;
  padding: var(--admin-space-xs) var(--admin-space-sm);
  min-height: var(--admin-size-input-height);
}
.mcs-wrap--search-top .mcs-trigger-placeholder {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body-lg);
  pointer-events: none;
  user-select: none;
}

.mcs-search-bar {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-xs) var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50);
  position: sticky;
  top: 0;
  z-index: 1;
}
.mcs-search-bar__icon {
  flex-shrink: 0;
  color: var(--admin-text-muted);
  display: flex;
  align-items: center;
}
.mcs-search-bar .mcs-search {
  flex: 1 1 0;
  min-width: 0;
  height: 2.8rem;
  padding: 0 var(--admin-space-xs);
  font-size: var(--admin-fs-body-lg);
}

.mcs-wrap--rich .mcs-trigger {
  align-items: stretch;
}
.mcs-wrap--rich .mcs-tags {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--admin-space-2xs);
}
.mcs-wrap--rich .mcs-tag--rich {
  width: 100%;
  max-width: none;
  height: auto;
  align-items: center;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-2xs) var(--admin-space-xs);
  border-radius: var(--figma-radius);
}
.mcs-wrap--rich .mcs-option__body,
.mcs-wrap--rich .mcs-tag__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}
.mcs-wrap--rich .mcs-option__title,
.mcs-wrap--rich .mcs-tag__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcs-wrap--rich .mcs-option__meta,
.mcs-wrap--rich .mcs-tag__meta {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcs-thumb {
  flex-shrink: 0;
  width: 4rem;
  height: 3rem;
  object-fit: cover;
  border-radius: var(--admin-radius-xs);
  background: var(--admin-grey-100);
  user-select: none;
}
.mcs-thumb--empty {
  display: inline-block;
}

body.admin-shell-v2 .cs-trigger,
body.admin-shell-v2 .mcs-trigger {
  min-height: var(--figma-select-trigger-height, 4.8rem);
  padding-inline: var(--admin-space-xl);
  background: var(--color-bg-subtle);
  border-color: var(--color-border-default);
  border-radius: 0.8rem;
  color: var(--color-text-primary);
  font-size: 1.6rem;
  line-height: 2.4rem;
}
body.admin-shell-v2 .cs-trigger:hover:not(:disabled),
body.admin-shell-v2 .mcs-trigger:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-hover);
}
body.admin-shell-v2 .cs-trigger:focus-visible,
body.admin-shell-v2 .cs-trigger--open,
body.admin-shell-v2 .cs-trigger[aria-expanded=true],
body.admin-shell-v2 .mcs-trigger--open,
body.admin-shell-v2 .mcs-trigger:focus-within,
body.admin-shell-v2 .mcs-trigger[aria-expanded=true] {
  border-color: var(--color-border-focus);
  background: var(--color-bg-subtle);
  box-shadow: none;
}
body.admin-shell-v2 .cs-trigger__arrow {
  color: var(--color-text-secondary);
}
body.admin-shell-v2 .cs-trigger--open .cs-trigger__arrow,
body.admin-shell-v2 .cs-trigger[aria-expanded=true] .cs-trigger__arrow {
  color: var(--color-text-primary);
}
body.admin-shell-v2 .cs-dropdown,
body.admin-shell-v2 .mcs-dropdown {
  min-width: max(100%, 23.2rem);
  background: var(--figma-floating-menu-bg, var(--figma-menu-bg, var(--color-bg-surface)));
  border-color: var(--color-border-default);
  border-radius: 2rem;
  box-shadow: var(--shadow-floating);
  padding: var(--admin-space-2xs);
}
body.admin-shell-v2 .cs-dropdown__search,
body.admin-shell-v2 .mcs-search-bar {
  background: transparent;
  border-bottom-color: var(--color-border-default);
  margin-inline: var(--admin-space-2xs);
}
body.admin-shell-v2 .cs-dropdown__search-input,
body.admin-shell-v2 .mcs-search {
  height: 4rem;
  background: transparent;
  border-color: var(--color-border-default);
  border-radius: var(--admin-radius-lg);
  color: var(--color-text-primary);
}
body.admin-shell-v2 .mcs-wrap--search-top .mcs-trigger {
  min-height: var(--figma-select-trigger-height, 4.8rem);
  padding-inline: var(--admin-space-xl);
}
body.admin-shell-v2 .cs-list,
body.admin-shell-v2 .mcs-list {
  padding: 0;
}
body.admin-shell-v2 .cs-option,
body.admin-shell-v2 .mcs-option {
  min-height: var(--figma-control-height, 4.8rem);
  padding: 0 var(--admin-space-md);
  border-radius: 0.8rem;
  color: var(--color-text-primary);
  font-size: 1.6rem;
  line-height: 2.4rem;
}
body.admin-shell-v2 .cs-option:hover:not(.cs-option--disabled):not(.cs-option--empty):not(.cs-option--selected),
body.admin-shell-v2 .mcs-option:hover:not(.mcs-option--disabled):not(.mcs-option--empty):not(.mcs-option--selected) {
  background: var(--figma-menu-row-hover, var(--color-bg-hover));
  color: var(--color-text-primary);
}
body.admin-shell-v2 .cs-option--active:not(.cs-option--selected):not(.cs-option--disabled),
body.admin-shell-v2 .mcs-option--active:not(.mcs-option--selected):not(.mcs-option--disabled) {
  background: var(--figma-menu-row-active, var(--color-bg-selected));
  color: var(--figma-menu-row-active-text, var(--color-text-inverse));
}
body.admin-shell-v2 .cs-option--selected,
body.admin-shell-v2 .mcs-option--selected {
  background: transparent;
  color: var(--color-text-primary);
  font-weight: 500;
}
body.admin-shell-v2 .cs-option--selected.cs-option--active,
body.admin-shell-v2 .mcs-option--selected.mcs-option--active,
body.admin-shell-v2 .cs-option--selected:hover:not(.cs-option--disabled):not(.cs-option--empty),
body.admin-shell-v2 .mcs-option--selected:hover:not(.mcs-option--disabled):not(.mcs-option--empty) {
  background: transparent;
  color: var(--color-text-primary);
}
body.admin-shell-v2 .cs-option--selected .cs-option__check,
body.admin-shell-v2 .mcs-option--selected .mcs-option__check {
  color: currentColor;
}
body.admin-shell-v2 .cs-option__check,
body.admin-shell-v2 .mcs-option__check {
  width: 1.8rem;
  color: currentColor;
}
body.admin-shell-v2 .cs-option--selected .cs-option__sublabel,
body.admin-shell-v2 .mcs-option--selected .mcs-option__label {
  color: inherit;
}
body.admin-shell-v2 .mcs-tag {
  background: var(--color-bg-selected);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.admin-tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-2xs);
  min-height: var(--admin-size-input-height);
  padding: var(--admin-space-xs) var(--admin-space-sm);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  cursor: text;
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-tag-input:focus-within {
  border-color: var(--admin-border-focus);
  box-shadow: var(--admin-focus-ring);
  outline: none;
}
.admin-tag-input--error {
  border-color: var(--admin-error);
}
.admin-tag-input--error:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(var(--admin-error-rgb, 220, 38, 38), 0.12);
}
.admin-tag-input--stacked {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}
.admin-tag-input--stacked .admin-tag-input__chip {
  width: 100%;
  max-width: none;
  justify-content: space-between;
}
.admin-tag-input--stacked .admin-tag-input__chip-label {
  flex: 1 1 auto;
}
.admin-tag-input--stacked .admin-tag-input__field {
  flex: 0 0 auto;
  width: 100%;
}
.admin-tag-input__tags {
  display: contents;
}
.admin-tag-input__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.2rem;
  padding: 0 0.4rem 0 0.7rem;
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
  border: 1px solid rgba(var(--admin-primary-rgb), 0.25);
  border-radius: var(--admin-radius-full);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  max-width: 180px;
}
.admin-tag-input__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-tag-input__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--admin-duration-short) var(--admin-ease), opacity var(--admin-duration-short) var(--admin-ease);
}
.admin-tag-input__chip-remove:hover {
  background: rgba(var(--admin-primary-rgb), 0.18);
  opacity: 1;
}
.admin-tag-input__field {
  flex: 1 1 100px;
  min-width: 100px;
  height: 2.4rem;
  padding: 0 var(--admin-space-2xs);
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--admin-fs-body-lg);
  font-family: inherit;
  color: var(--admin-text);
}
.admin-tag-input__field::placeholder {
  color: var(--admin-text-muted);
}

.admin-number-stepper {
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  height: var(--admin-size-input-height);
  width: auto;
  max-width: 100%;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-number-stepper:focus-within {
  border-color: var(--admin-border-focus);
  box-shadow: none;
}
.admin-number-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.8rem;
  padding: 0;
  border: none;
  background: var(--admin-grey-50);
  color: var(--admin-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
  user-select: none;
}
.admin-number-stepper__btn:hover:not(:disabled) {
  background: var(--admin-grey-100);
  color: var(--admin-text);
}
.admin-number-stepper__btn:active:not(:disabled) {
  background: var(--admin-grey-200, #e5e7eb);
}
.admin-number-stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.admin-number-stepper__btn--minus {
  border-right: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius) 0 0 var(--admin-radius);
}
.admin-number-stepper__btn--plus {
  border-left: 1px solid var(--admin-border-light);
  border-radius: 0 var(--admin-radius) var(--admin-radius) 0;
}
.admin-number-stepper__input {
  flex: 0 1 auto;
  display: inline-block;
  width: auto;
  min-width: 5ch;
  field-sizing: content;
  height: 100%;
  padding: 0 var(--admin-space-xs);
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--admin-fs-body-lg);
  font-family: inherit;
  color: var(--admin-text);
  text-align: center;
  -moz-appearance: textfield;
}
.admin-number-stepper__input::-webkit-inner-spin-button, .admin-number-stepper__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.admin-number-stepper__suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--admin-space-sm) 0 0;
  font-size: var(--admin-fs-body);
  color: var(--admin-text-muted);
  white-space: nowrap;
}

body.admin-shell-v2 .admin-number-stepper {
  height: var(--figma-control-height, 4.8rem);
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
}
body.admin-shell-v2 .admin-number-stepper:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: none;
}
body.admin-shell-v2 .admin-number-stepper__btn {
  width: var(--figma-control-height, 4.8rem);
  background: transparent;
  color: var(--color-text-secondary);
}
body.admin-shell-v2 .admin-number-stepper__btn:hover:not(:disabled) {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-number-stepper__btn--minus {
  border-right-color: var(--color-border-default);
  border-radius: var(--figma-radius) 0 0 var(--figma-radius);
}
body.admin-shell-v2 .admin-number-stepper__btn--plus {
  border-left-color: var(--color-border-default);
  border-radius: 0 var(--figma-radius) var(--figma-radius) 0;
}
body.admin-shell-v2 .admin-number-stepper__input {
  color: var(--color-text-primary);
  font-size: var(--admin-fs-base);
}

.admin-char-counter__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space-sm);
}
.admin-char-counter__header .admin-form__label {
  margin-bottom: 0;
}
.admin-char-counter__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-char-counter__current {
  font-weight: 600;
  color: var(--admin-text);
  transition: color var(--admin-duration-short) var(--admin-ease);
}
.admin-char-counter__current--warn {
  color: var(--admin-warn-text, #92400e);
}
.admin-char-counter__current--limit {
  color: var(--admin-error-text, #991b1b);
}
.admin-char-counter__sep {
  color: var(--admin-border);
  margin: 0 0.15rem;
}
.admin-char-counter__max {
  color: var(--admin-text-muted);
}
.admin-char-counter__wrap {
  position: relative;
}
.admin-char-counter__wrap textarea {
  display: block;
  width: 100%;
  padding: var(--admin-space-sm) var(--admin-space);
  min-height: var(--admin-size-editor-min-height);
  resize: vertical;
  font-size: var(--admin-fs-body-lg);
  font-family: inherit;
  line-height: 1.6;
  color: var(--admin-text);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-char-counter__wrap textarea::placeholder {
  color: var(--admin-text-muted);
}
.admin-char-counter__wrap textarea:focus {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: var(--admin-focus-ring);
}
.admin-char-counter__wrap--warn textarea {
  border-color: var(--admin-warn, #d97706);
}
.admin-char-counter__wrap--limit textarea {
  border-color: var(--admin-error, #dc2626);
}

.admin-password-copy {
  display: flex;
  align-items: stretch;
  min-height: var(--admin-size-input-height);
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: var(--figma-radius, var(--admin-radius-sm));
  background: var(--admin-white);
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-password-copy:hover {
  border-color: var(--admin-border-strong);
}
.admin-password-copy:focus-within {
  border-color: var(--admin-border-focus);
  box-shadow: 0 0 0 0.2rem rgba(var(--admin-primary-rgb), 0.1);
}

.admin-password-copy__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--admin-size-input-height);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.admin-password-copy__input:focus {
  box-shadow: none;
}

.admin-password-copy__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-2xs);
  min-width: var(--admin-size-input-height);
  min-height: var(--admin-size-input-height);
  padding: 0 var(--admin-space-sm);
  border: 0;
  border-left: 1px solid var(--admin-border-light);
  background: transparent;
  color: var(--admin-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--admin-fs-sm);
  line-height: 1;
  transition: color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-password-copy__button:hover {
  color: var(--admin-text-secondary);
  background: var(--admin-state-hover);
}
.admin-password-copy__button:active {
  background: var(--admin-state-pressed);
}
.admin-password-copy__button:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: -2px;
}
.admin-password-copy__button i {
  font-size: var(--admin-fs-body);
}

.admin-intl-phone {
  position: relative;
}
.admin-intl-phone .iti {
  width: 100%;
  display: block;
}
.admin-intl-phone .iti__selected-country {
  height: 3.2rem;
  padding: 0 var(--admin-space-xs) 0 var(--admin-space-sm);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-right: none;
  border-radius: var(--admin-radius-sm) 0 0 var(--admin-radius-sm);
  color: var(--admin-text);
  gap: var(--admin-space-xs);
  transition: border-color var(--admin-duration-short) var(--admin-ease);
}
.admin-intl-phone .iti__selected-country:hover:not(:disabled) {
  border-color: var(--admin-border-strong);
}
.admin-intl-phone .iti__selected-country:focus {
  outline: none;
  border-color: var(--admin-border-focus);
}
.admin-intl-phone__input {
  border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}
.admin-intl-phone .iti__dropdown-content {
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-elevation-2);
  color: var(--admin-text);
}
.admin-intl-phone .iti__country {
  color: var(--admin-text);
  font-size: var(--admin-fs-body);
}
.admin-intl-phone .iti__country.iti__highlight, .admin-intl-phone .iti__country:hover {
  background: var(--admin-grey-100);
}
.admin-intl-phone .iti__dial-code {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-sm);
}
.admin-intl-phone .iti__search-input {
  border-bottom: 1px solid var(--admin-border-light);
  color: var(--admin-text);
  background: var(--admin-white);
  font-family: inherit;
  font-size: var(--admin-fs-body);
}
.admin-intl-phone .iti__search-input::placeholder {
  color: var(--admin-text-muted);
}

.admin-rich-editor {
  background: var(--admin-white);
  border-radius: var(--admin-radius-sm);
  overflow: visible;
  position: relative;
  --rich-editor-min-height: 24rem;
}

.admin-rich-editor__mount,
.admin-editor-quill.admin-quill-container {
  position: relative;
}

.admin-rich-editor .ql-toolbar.ql-snow,
.admin-quill-toolbar.ql-snow {
  align-items: center;
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-bottom: 0;
  border-radius: var(--admin-radius-sm) var(--admin-radius-sm) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-xs) var(--admin-space);
  overflow: visible;
  padding: var(--admin-space-xs) var(--admin-space);
  position: relative;
  z-index: 30;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-formats,
.admin-quill-toolbar.ql-snow .ql-formats {
  margin-right: 0;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker,
.admin-rich-editor .ql-toolbar.ql-snow button,
.admin-quill-toolbar.ql-snow .ql-picker,
.admin-quill-toolbar.ql-snow button {
  color: var(--admin-text-secondary);
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker:hover, .admin-rich-editor .ql-toolbar.ql-snow .ql-picker:focus,
.admin-rich-editor .ql-toolbar.ql-snow button:hover,
.admin-rich-editor .ql-toolbar.ql-snow button:focus,
.admin-quill-toolbar.ql-snow .ql-picker:hover,
.admin-quill-toolbar.ql-snow .ql-picker:focus,
.admin-quill-toolbar.ql-snow button:hover,
.admin-quill-toolbar.ql-snow button:focus {
  color: var(--admin-primary);
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-active,
.admin-quill-toolbar.ql-snow .ql-active {
  color: var(--admin-primary);
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-active .ql-stroke,
.admin-quill-toolbar.ql-snow .ql-active .ql-stroke {
  stroke: var(--admin-primary);
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-active .ql-fill,
.admin-quill-toolbar.ql-snow .ql-active .ql-fill {
  fill: var(--admin-primary);
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font {
  width: 13.8rem;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-header,
.admin-quill-toolbar.ql-snow .ql-picker.ql-header {
  width: 11.2rem;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker-options,
.admin-quill-toolbar.ql-snow .ql-picker-options {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  box-shadow: var(--admin-elevation-2);
  z-index: 80;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "Normal";
  font-family: inherit;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: "Serif";
  font-family: Georgia, "Times New Roman", serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: "Mono";
  font-family: ui-monospace, "Cascadia Code", monospace;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=display]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=display]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=display]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=display]::before {
  content: "Display";
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=pretendard]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=pretendard]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=pretendard]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=pretendard]::before {
  content: "Pretendard";
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=inter]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=inter]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=inter]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=inter]::before {
  content: "Inter";
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=noto]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=noto]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=noto]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=noto]::before {
  content: "Noto KR";
  font-family: "Noto Sans KR", "Pretendard Variable", sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=nanum]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=nanum]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=nanum]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=nanum]::before {
  content: "Nanum";
  font-family: "Nanum Gothic", "Noto Sans KR", sans-serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=cormorant]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=cormorant]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=cormorant]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=cormorant]::before {
  content: "Cormorant";
  font-family: "Cormorant Garamond", Georgia, serif;
}
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=rounded]::before,
.admin-rich-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=rounded]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=rounded]::before,
.admin-quill-toolbar.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=rounded]::before {
  content: "Rounded";
  font-family: "Arial Rounded MT Bold", Pretendard, system-ui, sans-serif;
}

.admin-rich-editor .ql-container.ql-snow,
.admin-editor-quill.ql-container.ql-snow {
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: 0 0 var(--admin-radius-sm) var(--admin-radius-sm);
  font-family: inherit;
  font-size: var(--admin-fs-body);
  overflow: visible;
}

.admin-rich-editor .ql-editor,
.admin-editor-quill.ql-container .ql-editor {
  color: var(--admin-text);
  line-height: 1.7;
  padding: var(--admin-space-xl) var(--admin-space-2xl);
}
.admin-rich-editor .ql-editor.ql-blank::before,
.admin-editor-quill.ql-container .ql-editor.ql-blank::before {
  color: var(--admin-text-muted);
  font-style: normal;
  left: var(--admin-space-2xl);
  right: var(--admin-space-2xl);
}
.admin-rich-editor .ql-editor strong,
.admin-rich-editor .ql-editor b,
.admin-editor-quill.ql-container .ql-editor strong,
.admin-editor-quill.ql-container .ql-editor b {
  font-weight: 700;
}
.admin-rich-editor .ql-editor em,
.admin-rich-editor .ql-editor i,
.admin-editor-quill.ql-container .ql-editor em,
.admin-editor-quill.ql-container .ql-editor i {
  font-style: italic;
}
.admin-rich-editor .ql-editor u,
.admin-editor-quill.ql-container .ql-editor u {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.admin-rich-editor .ql-editor s,
.admin-rich-editor .ql-editor strike,
.admin-editor-quill.ql-container .ql-editor s,
.admin-editor-quill.ql-container .ql-editor strike {
  text-decoration: line-through;
}
.admin-rich-editor .ql-editor a,
.admin-editor-quill.ql-container .ql-editor a {
  color: var(--admin-primary);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.admin-rich-editor .ql-editor h1, .admin-rich-editor .ql-editor h2, .admin-rich-editor .ql-editor h3, .admin-rich-editor .ql-editor h4, .admin-rich-editor .ql-editor h5, .admin-rich-editor .ql-editor h6,
.admin-editor-quill.ql-container .ql-editor h1,
.admin-editor-quill.ql-container .ql-editor h2,
.admin-editor-quill.ql-container .ql-editor h3,
.admin-editor-quill.ql-container .ql-editor h4,
.admin-editor-quill.ql-container .ql-editor h5,
.admin-editor-quill.ql-container .ql-editor h6 {
  color: var(--admin-text);
  font-weight: 700;
}
.admin-rich-editor .ql-editor h1,
.admin-editor-quill.ql-container .ql-editor h1 {
  font-size: var(--admin-fs-display);
  margin: var(--admin-space-2xl) 0 var(--admin-space);
}
.admin-rich-editor .ql-editor h2,
.admin-editor-quill.ql-container .ql-editor h2 {
  font-size: var(--admin-fs-2xl);
  margin: var(--admin-space-xl) 0 var(--admin-space);
}
.admin-rich-editor .ql-editor h3,
.admin-editor-quill.ql-container .ql-editor h3 {
  font-size: var(--admin-fs-xl);
  margin: var(--admin-space-lg) 0 var(--admin-space-sm);
}
.admin-rich-editor .ql-editor h4,
.admin-editor-quill.ql-container .ql-editor h4 {
  font-size: var(--admin-fs-lg);
  margin: var(--admin-space) 0 var(--admin-space-sm);
}
.admin-rich-editor .ql-editor h5,
.admin-editor-quill.ql-container .ql-editor h5 {
  font-size: var(--admin-fs-body-lg);
  margin: var(--admin-space) 0 var(--admin-space-xs);
}
.admin-rich-editor .ql-editor h6,
.admin-editor-quill.ql-container .ql-editor h6 {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm);
  letter-spacing: 0;
  margin: var(--admin-space) 0 var(--admin-space-xs);
  text-transform: uppercase;
}
.admin-rich-editor .ql-editor .ql-font-serif,
.admin-editor-quill.ql-container .ql-editor .ql-font-serif {
  font-family: Georgia, "Times New Roman", serif;
}
.admin-rich-editor .ql-editor .ql-font-monospace,
.admin-editor-quill.ql-container .ql-editor .ql-font-monospace {
  font-family: ui-monospace, "Cascadia Code", monospace;
}
.admin-rich-editor .ql-editor .ql-font-display,
.admin-editor-quill.ql-container .ql-editor .ql-font-display {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-pretendard,
.admin-editor-quill.ql-container .ql-editor .ql-font-pretendard {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-inter,
.admin-editor-quill.ql-container .ql-editor .ql-font-inter {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-noto,
.admin-editor-quill.ql-container .ql-editor .ql-font-noto {
  font-family: "Noto Sans KR", "Pretendard Variable", sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-nanum,
.admin-editor-quill.ql-container .ql-editor .ql-font-nanum {
  font-family: "Nanum Gothic", "Noto Sans KR", sans-serif;
}
.admin-rich-editor .ql-editor .ql-font-cormorant,
.admin-editor-quill.ql-container .ql-editor .ql-font-cormorant {
  font-family: "Cormorant Garamond", Georgia, serif;
}
.admin-rich-editor .ql-editor .ql-font-rounded,
.admin-editor-quill.ql-container .ql-editor .ql-font-rounded {
  font-family: "Arial Rounded MT Bold", Pretendard, system-ui, sans-serif;
}
.admin-rich-editor .ql-editor p,
.admin-editor-quill.ql-container .ql-editor p {
  margin: 0 0 var(--admin-space);
}
.admin-rich-editor .ql-editor blockquote,
.admin-editor-quill.ql-container .ql-editor blockquote {
  border-left: 3px solid var(--admin-primary);
  color: var(--admin-text-secondary);
  margin: var(--admin-space) 0;
  padding: var(--admin-space-2xs) 0 var(--admin-space-2xs) var(--admin-space-lg);
}
.admin-rich-editor .ql-editor code,
.admin-rich-editor .ql-editor pre.ql-syntax,
.admin-editor-quill.ql-container .ql-editor code,
.admin-editor-quill.ql-container .ql-editor pre.ql-syntax {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.92em;
}
.admin-rich-editor .ql-editor code,
.admin-editor-quill.ql-container .ql-editor code {
  background: var(--admin-grey-100);
  border-radius: 3px;
  color: var(--admin-accent-coral, var(--admin-primary));
  padding: 0.1rem var(--admin-space-2xs);
}
.admin-rich-editor .ql-editor pre.ql-syntax,
.admin-editor-quill.ql-container .ql-editor pre.ql-syntax {
  background: #0f172a;
  border-radius: var(--admin-radius-sm);
  color: #e2e8f0;
  overflow-x: auto;
  padding: var(--admin-space-lg) var(--admin-space-xl);
}
.admin-rich-editor .ql-editor img,
.admin-rich-editor .ql-editor video,
.admin-rich-editor .ql-editor iframe.ql-video,
.admin-editor-quill.ql-container .ql-editor img,
.admin-editor-quill.ql-container .ql-editor video,
.admin-editor-quill.ql-container .ql-editor iframe.ql-video {
  border-radius: var(--admin-radius-sm);
  box-shadow: var(--admin-elevation-1);
  height: auto;
  max-width: 100%;
}
.admin-rich-editor .ql-editor video,
.admin-rich-editor .ql-editor iframe.ql-video,
.admin-editor-quill.ql-container .ql-editor video,
.admin-editor-quill.ql-container .ql-editor iframe.ql-video {
  display: block;
  min-height: 18rem;
}
.admin-rich-editor .ql-editor .ql-media-draggable,
.admin-editor-quill.ql-container .ql-editor .ql-media-draggable {
  cursor: grab;
  outline: 0 solid transparent;
  transition: outline-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-rich-editor .ql-editor .ql-media-draggable:focus-visible,
.admin-editor-quill.ql-container .ql-editor .ql-media-draggable:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 3px;
}
.admin-rich-editor .ql-editor .ql-media-draggable.is-dragging,
.admin-editor-quill.ql-container .ql-editor .ql-media-draggable.is-dragging {
  cursor: grabbing;
  opacity: 0.65;
}
.admin-rich-editor .ql-editor table,
.admin-editor-quill.ql-container .ql-editor table {
  border-collapse: collapse;
  font-size: var(--admin-fs-body);
  margin: var(--admin-space-lg) 0;
  width: 100%;
}
.admin-rich-editor .ql-editor td, .admin-rich-editor .ql-editor th,
.admin-editor-quill.ql-container .ql-editor td,
.admin-editor-quill.ql-container .ql-editor th {
  border: 1px solid var(--admin-border-light);
  padding: var(--admin-space-xs) var(--admin-space);
  vertical-align: top;
}
.admin-rich-editor .ql-editor th,
.admin-editor-quill.ql-container .ql-editor th {
  background: var(--admin-grey-50);
  font-weight: 600;
  text-align: left;
}

.admin-rich-editor .ql-editor {
  min-height: var(--rich-editor-min-height);
}

.admin-editor-quill.ql-container .ql-editor {
  min-height: var(--admin-size-editor-min-height);
}

.admin-quill-container.ql-snow .ql-tooltip {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  box-shadow: var(--admin-elevation-2);
  max-width: min(42rem, 100vw - 2.4rem);
  white-space: normal;
  z-index: 90;
}
.admin-quill-container.ql-snow .ql-tooltip input[type=text] {
  max-width: calc(100vw - 9rem);
}
.admin-quill-container.ql-snow .ql-out-bottom,
.admin-quill-container.ql-snow .ql-out-top {
  visibility: visible;
}
.admin-quill-container.ql-snow .ql-drop-indicator {
  background: var(--admin-primary);
  border-radius: 9999px;
  box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.14);
  height: 2px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(-1px);
  transition: opacity var(--admin-duration-short) var(--admin-ease);
  z-index: 85;
}
.admin-quill-container.ql-snow .ql-drop-indicator.is-visible {
  opacity: 1;
}
.admin-quill-container.ql-snow.is-file-dragging .ql-editor {
  outline: 1px dashed var(--admin-primary);
  outline-offset: -0.4rem;
}

.admin-rich-editor .qlbt-operation-menu,
.admin-quill-container .qlbt-operation-menu {
  border-radius: var(--admin-radius-sm);
  box-shadow: var(--admin-elevation-2);
  z-index: 100;
}

.guide-demo .admin-rich-editor {
  width: 100%;
  --rich-editor-min-height: 28rem;
}

.admin-locale-tabs {
  margin-bottom: 1.6rem;
}

.admin-locale-tabs__bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  background: var(--admin-bg-soft, #f4f6f8);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}

.admin-locale-tabs__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin-left: auto;
}

.admin-locale-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.6rem;
  background: transparent;
  border: 0;
  border-radius: calc(var(--admin-radius) - 0.2rem);
  color: var(--admin-text-secondary);
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.admin-locale-tabs__tab:hover {
  background: rgba(var(--admin-primary-rgb), 0.06);
  color: var(--admin-primary);
}
.admin-locale-tabs__tab:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}

.admin-locale-tabs__tab--active {
  background: var(--admin-white);
  color: var(--admin-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: default;
}
.admin-locale-tabs__tab--active:hover {
  background: var(--admin-white);
}

.admin-locale-tabs__tab-code {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  background: rgba(var(--admin-primary-rgb), 0.1);
  border-radius: var(--admin-radius-full);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--admin-primary);
}

.admin-locale-tabs__tab .locale-flag {
  flex: none;
}

.admin-locale-tabs__tab--active .admin-locale-tabs__tab-code {
  background: var(--admin-primary);
  color: var(--admin-white);
}

.admin-locale-tabs__panels {
  position: relative;
}

.admin-locale-tabs__panel {
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg);
}

.admin-locale-tabs__panel--hidden {
  display: none;
}

.admin-locale-tabs--split {
  margin-bottom: 0;
}
.admin-locale-tabs--split .admin-card {
  margin-bottom: 1.6rem;
}
.admin-locale-tabs--split .admin-card:last-child {
  margin-bottom: 2.4rem;
}
.admin-locale-tabs--split .admin-locale-tabs__panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.csg-wrap {
  position: relative;
  display: block;
}

.csg-trigger {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  width: 100%;
  min-height: var(--admin-size-input-height);
  padding: 0 var(--admin-space-sm) 0 var(--admin-space-lg);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  font-size: var(--admin-fs-body-lg);
  font-family: inherit;
  color: var(--admin-text);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.csg-trigger:hover {
  border-color: var(--admin-border-strong);
}
.csg-trigger--open, .csg-trigger[aria-expanded=true] {
  border-color: var(--admin-border-focus);
  box-shadow: var(--admin-focus-ring);
  outline: none;
}
.csg-trigger__icon {
  display: inline-flex;
  align-items: center;
  font-size: var(--admin-fs-xl);
  color: var(--admin-primary);
  line-height: 1;
  flex-shrink: 0;
}
.csg-trigger__label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csg-trigger__label--empty {
  color: var(--admin-text-placeholder, var(--admin-text-secondary));
}
.csg-trigger__arrow {
  flex-shrink: 0;
  color: var(--admin-text-secondary);
  transition: transform var(--admin-duration-short) var(--admin-ease);
}
.csg-trigger[aria-expanded=true] .csg-trigger__arrow {
  transform: rotate(180deg);
}

.csg-panel {
  position: absolute;
  z-index: var(--admin-z-dropdown, 200);
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 100%;
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-shadow-md);
  padding: var(--admin-space-sm);
}
.csg-panel--up {
  top: auto;
  bottom: calc(100% + 0.4rem);
}

.csg-grid {
  display: grid;
  grid-template-columns: repeat(var(--csg-cols, 4), minmax(0, 1fr));
  gap: var(--admin-space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.csg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: var(--admin-space-sm) var(--admin-space-xs);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
  user-select: none;
}
.csg-card:hover:not(.csg-card--disabled) {
  border-color: var(--admin-border-strong);
  background: var(--admin-bg-soft, #f4f6f8);
}
.csg-card--selected {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
}
.csg-card--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.csg-card__icon {
  font-size: var(--admin-fs-xl);
  color: var(--admin-text);
  line-height: 1;
}
.csg-card--selected .csg-card__icon {
  color: var(--admin-primary);
}
.csg-card__label {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text);
  line-height: 1.2;
}
.csg-card__desc {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
  line-height: 1.2;
}

.fp-locale-fields {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-md);
}

.fp-input-row {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}
.fp-input-row__label {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
}
.fp-input-row__input {
  width: 100%;
  padding: 0.5rem var(--admin-space-sm);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  font-size: var(--admin-fs-body);
  color: var(--admin-text);
  background: var(--admin-card-bg);
  line-height: 1.4;
}
.fp-input-row__input:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 2px var(--admin-primary-light);
}

.fp-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--admin-space-xs) 0;
  font-size: var(--admin-fs-body);
}
.fp-toggle-row__label {
  color: var(--admin-text);
}

.fp-toggle-switch {
  position: relative;
  display: inline-block;
  width: 3.6rem;
  height: 2rem;
  flex-shrink: 0;
  cursor: pointer;
}
.fp-toggle-switch__input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.fp-toggle-switch__input:checked + .fp-toggle-switch__slider {
  background: var(--admin-primary);
}
.fp-toggle-switch__input:checked + .fp-toggle-switch__slider::before {
  transform: translateX(1.6rem);
}
.fp-toggle-switch__input:focus + .fp-toggle-switch__slider {
  box-shadow: 0 0 0 2px var(--admin-primary-light);
}
.fp-toggle-switch__slider {
  position: absolute;
  inset: 0;
  background: var(--admin-border);
  border-radius: 2rem;
  transition: background 0.2s;
}
.fp-toggle-switch__slider::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--admin-white);
  transition: transform 0.2s;
}

.fp-options-card {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
  width: 100%;
  padding: var(--admin-space) var(--admin-space-lg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-card-bg);
  color: var(--admin-text);
  cursor: pointer;
  transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease);
  text-align: left;
}
.fp-options-card:hover {
  background: var(--admin-bg-soft);
  border-color: var(--admin-primary-border);
}
.fp-options-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--admin-radius);
  background: var(--admin-primary-light);
  color: var(--admin-primary);
  flex-shrink: 0;
  font-size: var(--admin-fs-base);
}
.fp-options-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}
.fp-options-card__label {
  font-size: var(--admin-fs-body);
  color: var(--admin-text);
  font-weight: 600;
}
.fp-options-card__count {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
}
.fp-options-card__chevron {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-base);
}

.fp-options-root {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}

.fp-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--admin-space-xs);
}

.fp-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: var(--admin-space-sm) var(--admin-space-xs);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
  user-select: none;
}
.fp-type-card:hover {
  border-color: var(--admin-border-strong);
  background: var(--admin-bg-soft, #f4f6f8);
}
.fp-type-card--selected {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
}
.fp-type-card--selected .fp-type-card__icon {
  color: var(--admin-primary);
}
.fp-type-card__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fp-type-card__icon {
  font-size: var(--admin-fs-xl);
  color: var(--admin-text);
  line-height: 1;
}
.fp-type-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.fp-type-card__label {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text);
  line-height: 1.2;
}
.fp-type-card__desc {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
  line-height: 1.2;
}

.fp-dynamic-sec {
  display: contents;
}

.admin-btn--icon {
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border-light);
  background: transparent;
  color: var(--admin-text-secondary);
  cursor: pointer;
  font-size: var(--admin-fs-base);
}
.admin-btn--icon:hover {
  background: var(--admin-bg-soft);
  color: var(--admin-text);
  border-color: var(--admin-border);
}

/* ===================================================
   board-calendar (admin)
   Same DOM classes as home/_ui-calendar.scss but
   wired to admin design tokens. View partial:
   resources/views/components/board-calendar.php
   =================================================== */
.ui-cal-controls {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.ui-cal-controls__nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ui-cal-controls__month {
  font-size: var(--admin-fs-lg, 1.6rem);
  font-weight: 700;
  color: var(--admin-text, #111);
  min-width: 18rem;
  text-align: center;
}
.ui-cal-controls__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 1px solid var(--admin-border, var(--admin-grey-200));
  background: var(--admin-surface, #fff);
  color: var(--admin-text-muted, var(--admin-grey-500));
  font-size: var(--admin-fs-sm, 1.2rem);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ui-cal-controls__btn:hover, .ui-cal-controls__btn:focus-visible {
  border-color: var(--admin-primary);
  color: var(--admin-primary);
  outline: none;
}
.ui-cal-controls__today {
  padding: 0 1.4rem;
  height: 3.4rem;
  display: inline-flex;
  align-items: center;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border, var(--admin-grey-200));
  background: var(--admin-surface, #fff);
  font-size: var(--admin-fs-sm, 1.2rem);
  font-weight: 600;
  color: var(--admin-text, #111);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ui-cal-controls__today:hover, .ui-cal-controls__today:focus-visible {
  border-color: var(--admin-primary);
  color: var(--admin-primary);
  outline: none;
}

.ui-calendar {
  border: 1px solid var(--admin-border, var(--admin-grey-200));
  border-radius: var(--admin-radius);
  overflow: hidden;
  background: var(--admin-surface, #fff);
}
.ui-calendar__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--admin-primary);
  color: #fff;
}
.ui-calendar__dow {
  padding: 1rem 0.4rem;
  text-align: center;
  font-size: var(--admin-fs-sm, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ui-calendar__body {
  display: flex;
  flex-direction: column;
  background: var(--admin-border, var(--admin-grey-200));
  gap: 1px;
}
.ui-calendar__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.ui-calendar__day {
  background: var(--admin-surface, #fff);
  min-height: 9rem;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ui-calendar__day--outside {
  background: var(--admin-grey-50);
}
.ui-calendar__day--today .ui-calendar__day-num {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--admin-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ui-calendar__day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.ui-calendar__day-num {
  font-size: var(--admin-fs-sm, 1.2rem);
  font-weight: 600;
  color: var(--admin-text, var(--admin-grey-700));
  line-height: 1;
  flex-shrink: 0;
}
.ui-calendar__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 1px dashed var(--admin-border, var(--admin-grey-300));
  color: var(--admin-text-muted, var(--admin-grey-500));
  background: transparent;
  font-size: var(--admin-fs-sm, 1.2rem);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ui-calendar__add:hover, .ui-calendar__add:focus-visible {
  border-color: var(--admin-primary);
  color: var(--admin-primary);
  background: var(--admin-primary-light);
  outline: none;
}
.ui-calendar__chips {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow: hidden;
}
.ui-calendar__chip {
  display: block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--admin-radius-xs);
  font-size: var(--admin-fs-sm, 1.2rem);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: var(--admin-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.ui-calendar__chip:hover, .ui-calendar__chip:focus-visible {
  opacity: 0.85;
  outline: none;
}
.ui-calendar__chip--pending {
  background: var(--admin-warn);
}
.ui-calendar__chip--approved {
  background: var(--admin-info);
}
.ui-calendar__chip--completed {
  background: var(--admin-success);
}
.ui-calendar__chip[hidden] {
  display: none;
}

.board-calendar-wrap {
  display: block;
}

.admin-entity-picker {
  display: inline-block;
  position: relative;
}

.admin-entity-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-sm);
  min-width: 22rem;
  min-height: var(--admin-size-input-height);
  padding: 0 var(--admin-space) 0 var(--admin-space-lg);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  font-size: var(--admin-fs-body-lg);
  font-family: inherit;
  color: var(--admin-text);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-entity-picker__trigger:hover {
  border-color: var(--admin-border-strong);
}
.admin-entity-picker__trigger:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: var(--admin-focus-ring);
}

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

.admin-entity-picker__chevron {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--admin-text-muted);
}

.admin-entity-picker__panel {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}

.admin-entity-picker__search-row {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-entity-picker__search-icon {
  position: absolute;
  left: var(--admin-space);
  color: var(--admin-text-muted);
  font-size: 1.3rem;
  pointer-events: none;
}

.admin-entity-picker__search {
  width: 100%;
  height: var(--admin-size-input-height);
  padding: 0 var(--admin-space) 0 calc(var(--admin-space) + 1.6rem + var(--admin-space-xs));
  font-size: var(--admin-fs-body-lg);
  color: var(--admin-text);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  font-family: inherit;
}
.admin-entity-picker__search::placeholder {
  color: var(--admin-text-muted);
}
.admin-entity-picker__search:focus {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: var(--admin-focus-ring);
}
.admin-entity-picker__search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.admin-entity-picker__list {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 50vh;
  overflow-y: auto;
}

.admin-entity-picker__card {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  width: 100%;
  padding: var(--admin-space-sm);
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-entity-picker__card:hover {
  border-color: var(--admin-border-strong);
  background: var(--admin-grey-50);
}
.admin-entity-picker__card:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: var(--admin-focus-ring);
}
.admin-entity-picker__card--selected {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
}

.admin-entity-picker__thumb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  color: var(--admin-text-muted);
  font-size: 1.6rem;
  overflow: hidden;
}
.admin-entity-picker__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-entity-picker__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.admin-entity-picker__name {
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-entity-picker__sub {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-entity-picker__check {
  flex-shrink: 0;
  color: var(--admin-primary);
  font-size: 1.3rem;
}

.admin-entity-picker__empty,
.admin-entity-picker__no-result {
  margin: 0;
  padding: var(--admin-space-lg) 0;
  text-align: center;
  font-size: var(--admin-fs-body);
  color: var(--admin-text-muted);
}

.admin-status-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space) var(--admin-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.admin-status-legend__dot {
  width: 1rem;
  height: 1rem;
  border-radius: var(--admin-radius-full);
  background: var(--admin-text-muted);
  flex-shrink: 0;
}
.admin-status-legend__dot--pending {
  background: var(--admin-warn);
}
.admin-status-legend__dot--approved {
  background: var(--admin-info);
}
.admin-status-legend__dot--completed {
  background: var(--admin-success);
}

.admin-status-legend__label {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}

.admin-cal-filter {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-xs);
}

.admin-cal-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-3xs);
  padding: var(--admin-space-3xs) var(--admin-space-sm);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-full);
  background: var(--admin-white);
  font-size: var(--admin-fs-sm);
  font-family: inherit;
  color: var(--admin-text-secondary);
  cursor: pointer;
  transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-cal-filter__chip::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--admin-radius-full);
  background: currentColor;
  opacity: 0.55;
}
.admin-cal-filter__chip:hover {
  border-color: var(--admin-border-strong);
}
.admin-cal-filter__chip:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: var(--admin-focus-ring);
}
.admin-cal-filter__chip[aria-pressed=false] {
  opacity: 0.5;
}
.admin-cal-filter__chip--pending {
  color: var(--admin-warn);
}
.admin-cal-filter__chip--approved {
  color: var(--admin-info);
}
.admin-cal-filter__chip--completed {
  color: var(--admin-success);
}
.admin-cal-filter__chip--all {
  color: var(--admin-text-secondary);
}
.admin-cal-filter__chip.is-active {
  color: var(--admin-text-inverse);
  border-color: transparent;
}
.admin-cal-filter__chip.is-active::before {
  opacity: 1;
  background: var(--admin-white);
}
.admin-cal-filter__chip--pending.is-active {
  background: var(--admin-warn);
}
.admin-cal-filter__chip--approved.is-active {
  background: var(--admin-info);
}
.admin-cal-filter__chip--completed.is-active {
  background: var(--admin-success);
}
.admin-cal-filter__chip--all.is-active {
  background: var(--admin-text-secondary);
}

.admin-tooltip-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.admin-tooltip {
  position: fixed;
  z-index: 1;
  max-width: 28rem;
  padding: var(--admin-space-xs) var(--admin-space-sm);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-text, #111827);
  color: var(--admin-white, #fff);
  box-shadow: var(--admin-shadow-lg, 0 1.2rem 3rem rgba(15, 23, 42, 0.18));
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  line-height: 1.45;
  pointer-events: none;
}

.admin-tooltip[hidden] {
  display: none;
}

.admin-tooltip__label {
  position: relative;
  z-index: 1;
}

.admin-tooltip__arrow {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  rotate: 45deg;
  background: inherit;
}

.admin-db__body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.admin-db__group-title {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-secondary);
  margin-bottom: 0.6rem;
}
.admin-db__group-title-bar {
  display: none;
}
.admin-db__group-title-bar--orange {
  background: var(--admin-accent-coral);
}
.admin-db__group-title-bar--grey {
  background: var(--admin-grey-300);
}
.admin-db__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-border-default);
}
@media (max-width: 1640px) {
  .admin-db__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .admin-db__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .admin-db__cards {
    grid-template-columns: 1fr;
    gap: var(--admin-space-sm);
  }
}
.admin-db__card {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.4rem;
  padding: 0.7rem 0.9rem;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-db__card::before {
  content: none;
}
.admin-db__card:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-hover);
  box-shadow: none;
  transform: none;
}
.admin-db__card:hover .admin-db__card-arrow {
  opacity: 1;
  transform: translateX(2px);
}
.admin-db__card:hover .admin-db__card-title {
  color: var(--color-text-primary);
}
.admin-db__card--alert {
  background: color-mix(in srgb, var(--admin-accent-coral) 10%, var(--color-bg-surface));
  border-color: color-mix(in srgb, var(--admin-accent-coral) 38%, var(--color-border-default));
}
.admin-db__card--alert .admin-db__card-title {
  color: var(--admin-text);
}
.admin-db__card--alert .admin-db__card-desc {
  color: var(--admin-text-secondary);
}
.admin-db__card--alert:hover {
  border-color: var(--admin-accent-coral);
  box-shadow: none;
}
.admin-db__card--alert:hover .admin-db__card-title {
  color: var(--admin-accent-coral);
}
.admin-db__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 0;
  font-size: 1.3rem;
}
.admin-db__card-icon--blue, .admin-db__card-icon--teal, .admin-db__card-icon--purple, .admin-db__card-icon--green, .admin-db__card-icon--orange, .admin-db__card-icon--amber, .admin-db__card-icon--cyan, .admin-db__card-icon--red {
  background: transparent;
  color: var(--color-text-secondary);
}
.admin-db__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}
.admin-db__card-title {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
  transition: color var(--admin-duration-short) var(--admin-ease);
}
.admin-db__card-desc {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.6rem;
}
.admin-db__card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  background: var(--admin-accent-coral);
  color: var(--admin-on-primary, #fff);
  border-radius: var(--admin-radius-full);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.admin-db__card-arrow {
  color: var(--admin-text-muted);
  font-size: 1.2rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--admin-duration-short) var(--admin-ease), transform var(--admin-duration-short) var(--admin-ease);
}

.admin-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--admin-space-lg);
  margin-bottom: var(--admin-space-2xl);
}
@media (max-width: 1320px) {
  .admin-stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .admin-stat-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--admin-space-sm);
  }
}

.admin-stat-card {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 2.4rem;
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-lg);
  box-shadow: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.admin-stat-card:hover {
  border-color: rgba(var(--admin-primary-rgb), 0.35);
  background: var(--color-bg-hover);
  box-shadow: none;
  transform: none;
}
.admin-stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 1.4rem;
  flex-shrink: 0;
  font-size: 2.2rem;
  transition: all 0.2s ease;
}
.admin-stat-card__icon--blue {
  background: color-mix(in srgb, var(--admin-primary) 14%, var(--admin-card-bg));
  color: var(--admin-primary);
}
.admin-stat-card__icon--green {
  background: color-mix(in srgb, var(--admin-success) 14%, var(--admin-card-bg));
  color: var(--admin-success);
}
.admin-stat-card__icon--orange {
  background: color-mix(in srgb, var(--admin-premium) 14%, var(--admin-card-bg));
  color: var(--admin-premium);
}
.admin-stat-card__icon--yellow {
  background: color-mix(in srgb, var(--admin-warn) 14%, var(--admin-card-bg));
  color: var(--admin-warn-text);
}
.admin-stat-card__icon--red {
  background: color-mix(in srgb, var(--admin-error) 14%, var(--admin-card-bg));
  color: var(--admin-error);
}
.admin-stat-card__icon--purple {
  background: color-mix(in srgb, var(--admin-accent-purple) 14%, var(--admin-card-bg));
  color: var(--admin-accent-purple);
}
.admin-stat-card__icon--teal {
  background: color-mix(in srgb, var(--admin-accent-teal) 14%, var(--admin-card-bg));
  color: var(--admin-accent-teal);
}
.admin-stat-card__icon--cyan {
  background: color-mix(in srgb, var(--admin-accent-cyan) 14%, var(--admin-card-bg));
  color: var(--admin-accent-cyan);
}
.admin-stat-card__body {
  flex: 1;
  min-width: 0;
}
.admin-stat-card__label {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--admin-text-secondary);
  margin-bottom: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.admin-stat-card__value {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--admin-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.admin-stat-card__sub {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  margin-top: var(--admin-space-3xs);
}
@media (max-width: 768px) {
  .admin-stat-card {
    padding: 1.4rem;
    gap: 1rem;
  }
  .admin-stat-card__icon {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 1rem;
    font-size: 1.8rem;
  }
  .admin-stat-card__value {
    font-size: var(--admin-fs-xl);
  }
}

.admin-dash-section {
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: none;
  margin-bottom: var(--admin-space-xl);
  overflow: hidden;
}
.admin-dash-section__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--admin-space-lg) var(--admin-space-2xl);
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50);
}
.admin-dash-section__title {
  font-size: var(--admin-fs-body-lg);
  font-weight: 700;
  color: var(--admin-text);
}
.admin-dash-section__meta {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-dash-section__body {
  padding: 0;
}
.admin-dash-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-fs-body);
}
.admin-dash-section table thead th {
  padding: var(--admin-space-sm) var(--admin-space-xl);
  background: var(--admin-grey-50);
  border-bottom: 1px solid var(--admin-border-light);
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-secondary);
  text-align: left;
  white-space: nowrap;
}
.admin-dash-section table tbody td {
  padding: var(--admin-space-sm) var(--admin-space-xl);
  border-bottom: 1px solid var(--admin-border-light);
  color: var(--admin-text);
  vertical-align: middle;
}
.admin-dash-section table tbody tr:last-child td {
  border-bottom: none;
}
.admin-dash-section table tbody tr:hover td {
  background: var(--admin-grey-50);
}
.admin-dash-section__empty {
  padding: var(--admin-space-3xl);
  text-align: center;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body);
}

.admin-dash-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--admin-space-lg);
  padding: var(--admin-space-xl) var(--admin-space-2xl);
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  margin-bottom: var(--admin-space-xl);
}
.admin-dash-filter__group {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  flex: 1;
  min-width: 160px;
}
.admin-dash-filter__label {
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  color: var(--admin-text-secondary);
}
.admin-dash-filter__actions {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding-bottom: 0;
}
@media (max-width: 768px) {
  .admin-dash-filter {
    flex-direction: column;
    gap: var(--admin-space);
  }
  .admin-dash-filter__group {
    min-width: 100%;
  }
  .admin-dash-filter__actions {
    width: 100%;
  }
}

body.admin-shell-v2 .admin-db {
  display: block;
  max-width: 112rem;
}
body.admin-shell-v2 .admin-db__body {
  display: grid;
  gap: var(--admin-space-2xl);
}
body.admin-shell-v2 .admin-db__group {
  min-width: 0;
  padding-top: var(--admin-space-xs);
}
body.admin-shell-v2 .admin-db__group-title {
  min-height: 2rem;
  margin: 0 0 var(--admin-space-sm);
  color: var(--color-text-secondary);
  font-size: var(--admin-fs-xs);
  letter-spacing: 0;
}
body.admin-shell-v2 .admin-db__group-title-bar {
  display: none;
}
body.admin-shell-v2 .admin-db__cards {
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: var(--admin-space-sm);
  border-top: 0;
}
body.admin-shell-v2 .admin-db__card {
  min-height: 7.2rem;
  align-items: center;
  flex-direction: row;
  padding: var(--admin-space) var(--admin-space-lg);
  gap: var(--admin-space);
  border: 1px solid var(--color-border-default);
  border-radius: var(--figma-radius);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  box-shadow: none;
}
body.admin-shell-v2 .admin-db__card::before {
  content: none;
}
body.admin-shell-v2 .admin-db__card:hover, body.admin-shell-v2 .admin-db__card:focus-visible {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  outline: 0;
  box-shadow: none;
  transform: none;
}
body.admin-shell-v2 .admin-db__card:hover .admin-db__card-icon, body.admin-shell-v2 .admin-db__card:focus-visible .admin-db__card-icon {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-db__card:hover .admin-db__card-arrow, body.admin-shell-v2 .admin-db__card:focus-visible .admin-db__card-arrow {
  opacity: 1;
  transform: translateX(var(--admin-space-3xs));
}
body.admin-shell-v2 .admin-db__card--alert {
  background: color-mix(in srgb, var(--color-status-warning) 10%, var(--color-bg-surface));
  border-color: color-mix(in srgb, var(--color-status-warning) 34%, var(--color-border-default));
}
body.admin-shell-v2 .admin-db__card-icon {
  width: var(--figma-select-height);
  height: var(--figma-select-height);
  border: 1px solid var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.3rem;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
body.admin-shell-v2 .admin-db__card-icon--blue, body.admin-shell-v2 .admin-db__card-icon--teal, body.admin-shell-v2 .admin-db__card-icon--purple, body.admin-shell-v2 .admin-db__card-icon--green, body.admin-shell-v2 .admin-db__card-icon--orange, body.admin-shell-v2 .admin-db__card-icon--amber, body.admin-shell-v2 .admin-db__card-icon--cyan, body.admin-shell-v2 .admin-db__card-icon--red {
  background: transparent;
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-db__card-body {
  gap: var(--admin-space-2xs);
}
body.admin-shell-v2 .admin-db__card-title {
  color: var(--color-text-primary);
  font-size: var(--admin-fs-sm);
  line-height: 1.8rem;
  font-weight: 600;
}
body.admin-shell-v2 .admin-db__card-desc {
  color: var(--color-text-muted);
  font-size: var(--admin-fs-xs);
  line-height: 1.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
body.admin-shell-v2 .admin-db__card-arrow {
  position: static;
  margin-left: auto;
  color: var(--color-text-muted);
  opacity: 0;
}
@media (max-width: 768px) {
  body.admin-shell-v2 .admin-db {
    max-width: none;
  }
  body.admin-shell-v2 .admin-db__cards {
    grid-template-columns: 1fr;
  }
}

.admin-auth {
  --admin-size-input-height: 3rem;
  --size-control-large: 2.667rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-body-bg);
  padding: var(--admin-space);
}

.admin-auth__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--admin-space-sm);
  width: 100%;
  max-width: 440px;
}

.admin-auth__card {
  width: 100%;
  padding: 1.6rem;
  background: var(--admin-card-bg);
  border-radius: var(--figma-radius);
  border: 1px solid var(--admin-border);
  box-shadow: none;
}

.admin-auth__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.6rem;
}
.admin-auth__logo .admin-auth__logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.admin-auth__logo .admin-auth__logo-text {
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
  letter-spacing: 0;
  line-height: 1;
}

.admin-auth__title {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  color: var(--admin-text);
}

.admin-auth__form {
  margin: 0;
}

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

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

.admin-auth__input {
  width: 100%;
  height: var(--admin-size-input-height);
  padding: 0 1rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--figma-radius);
  font-size: var(--admin-fs-body);
  font-family: inherit;
  box-sizing: border-box;
  color: var(--admin-text);
  background: var(--admin-white);
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-auth__input::placeholder {
  color: var(--admin-text-muted);
}
.admin-auth__input:hover:not(:disabled):not(:focus) {
  border-color: var(--admin-border-strong);
}
.admin-auth__input:focus {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: 0 0 0 0.2rem rgba(var(--admin-primary-rgb), 0.1);
}

.admin-auth__password-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  min-height: var(--admin-size-input-height);
  height: auto;
  border-radius: var(--figma-radius);
  border: 1px solid var(--admin-border);
  background: var(--admin-white);
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
  overflow: hidden;
}
.admin-auth__password-wrap:hover {
  border-color: var(--admin-border-strong);
}
.admin-auth__password-wrap:focus-within {
  border-color: var(--admin-border-focus);
  box-shadow: 0 0 0 0.2rem rgba(var(--admin-primary-rgb), 0.1);
}
.admin-auth__password-wrap .admin-auth__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--admin-size-input-height);
  height: auto;
  border: none;
  border-radius: 0;
  padding: 0 var(--admin-size-input-height) 0 1rem;
  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%;
  height: var(--admin-size-input-height);
  padding: 0 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);
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-auth__submit:hover {
  background: var(--admin-primary-hover);
}
.admin-auth__submit:active {
  background: var(--admin-grey-900);
}
.admin-auth__submit:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: var(--admin-focus-ring-offset);
}

.admin-auth__below-card {
  width: 100%;
  padding: 1rem 1.2rem;
  background: var(--admin-card-bg);
  border-radius: var(--figma-radius);
  border: 1px solid var(--admin-border);
  text-align: center;
}

.admin-auth__below-card-text {
  margin: 0;
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
}

.admin-auth__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--admin-space-lg);
}
.admin-auth__logo .admin-auth__logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--admin-radius);
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  font-size: 1.5rem;
}

.admin-auth__subtitle {
  margin: 0 0 1.6rem;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  text-align: center;
  line-height: 1.5;
}

.admin-auth__checkrow {
  display: flex;
  align-items: center;
  gap: var(--admin-space-lg);
}

.admin-auth__divider {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin: 1.4rem 0;
  font-size: var(--admin-fs-xs);
  font-weight: 400;
  color: var(--admin-text-muted);
  letter-spacing: 0.06em;
}
.admin-auth__divider::before, .admin-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--admin-border);
}

.admin-auth__social-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.admin-auth__social-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-white);
  color: var(--admin-text);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-auth__social-btn:hover {
  background: #f8f8f8;
  border-color: #bbb;
}
.admin-auth__social-btn:active {
  background: #f0f0f0;
}
.admin-auth__social-btn:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: var(--admin-focus-ring-offset);
}
.admin-auth__social-btn .admin-auth__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.admin-auth__social-btn .admin-auth__social-icon img, .admin-auth__social-btn .admin-auth__social-icon svg {
  width: 18px;
  height: 18px;
}

.admin-auth__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}

.admin-auth__sso-label {
  margin: 0 0 var(--admin-space-sm);
  font-size: var(--admin-fs-xs);
  font-weight: 500;
  color: var(--admin-text-muted);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-auth__otp-input {
  width: 100%;
  padding: var(--admin-space) var(--admin-space-lg);
  border: 1px solid var(--admin-outline-variant);
  border-radius: var(--admin-radius);
  font-size: 1.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-align: center;
  box-sizing: border-box;
  color: var(--admin-text);
  background: var(--admin-white);
  transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-auth__otp-input::placeholder {
  color: var(--admin-text-muted);
  letter-spacing: 0.2em;
  font-size: var(--admin-fs-body-lg);
}
.admin-auth__otp-input:focus {
  outline: none;
  border-color: var(--admin-primary);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--admin-primary);
}

.admin-auth__otp-group {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
}

.admin-auth__backup-toggle {
  display: block;
  margin-top: var(--admin-space);
  text-align: center;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
}
.admin-auth__backup-toggle:hover {
  color: var(--admin-text-secondary);
}

.admin-auth__backup-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--admin-space-sm);
  margin: var(--admin-space-sm) 0;
}
.admin-auth__backup-codes .admin-auth__backup-code {
  padding: var(--admin-space-xs) var(--admin-space-sm);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text);
  text-align: center;
  letter-spacing: 0.1em;
}

.admin-auth__qr-wrap {
  display: flex;
  justify-content: center;
  margin: var(--admin-space-lg) 0;
}
.admin-auth__qr-wrap img {
  width: 200px;
  height: 200px;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
}

.admin-auth__secret-key {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--admin-text);
  word-break: break-all;
  cursor: pointer;
  user-select: all;
}

.admin-auth__submit--link {
  display: block;
  text-align: center;
  text-decoration: none;
}

.admin-auth__submit--mt {
  margin-top: var(--admin-space-sm);
}

.admin-auth__step {
  margin: 0 0 var(--admin-space);
}
.admin-auth__step .admin-auth__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  flex-shrink: 0;
  margin-right: var(--admin-space-xs);
}
.admin-auth__step .admin-auth__step-label {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text);
}

.admin-auth__step-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--admin-space-xs);
}

.admin-auth__back-link {
  display: block;
  text-align: center;
  margin-top: var(--admin-space);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  text-decoration: none;
  transition: color var(--admin-duration) var(--admin-ease);
}
.admin-auth__back-link:hover {
  color: var(--admin-text-secondary);
  text-decoration: underline;
}

.admin-auth__step--done .admin-auth__step-num {
  background: var(--admin-success, #16a34a);
  color: #fff;
  font-size: var(--admin-fs-xs);
}
.admin-auth__step--done .admin-auth__step-label {
  color: var(--admin-text-muted);
  font-weight: 400;
}

.admin-auth__step--active .admin-auth__step-num {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
}
.admin-auth__step--active .admin-auth__step-label {
  color: var(--admin-text);
  font-weight: 600;
}

.admin-auth__steps {
  margin-bottom: var(--admin-space-lg);
}

.admin-auth__send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-xs);
  width: 100%;
  padding: 0.7rem var(--admin-space);
  margin-bottom: var(--admin-space-sm);
  background: var(--admin-white);
  color: var(--admin-primary);
  border: 1.5px solid var(--admin-primary);
  border-radius: var(--admin-radius-sm);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-auth__send-btn:hover {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
}
.admin-auth__send-btn:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: var(--admin-focus-ring-offset);
}
.admin-auth__send-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--admin-white);
  color: var(--admin-text-muted);
  border-color: var(--admin-border-light);
}

.admin-auth__hint {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 0 0 var(--admin-space-sm);
  padding: var(--admin-space-xs) var(--admin-space-sm);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-xs);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.5;
}
.admin-auth__hint strong {
  color: var(--admin-text);
  font-weight: 600;
}
.admin-auth__hint i {
  flex-shrink: 0;
  color: var(--admin-primary);
}

.admin-auth__channel-group {
  border: none;
  padding: 0;
  margin: 0 0 var(--admin-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}

.admin-auth__channel-legend {
  display: block;
  margin-bottom: var(--admin-space-xs);
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text);
}

.admin-auth__channel-option {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space);
  border: 1.5px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-auth__channel-option:has(.admin-auth__channel-radio:checked) {
  border-color: var(--admin-primary);
  background: rgba(var(--admin-primary-rgb), 0.04);
}
.admin-auth__channel-option:hover:not(:has(.admin-auth__channel-radio:checked)) {
  border-color: #aaa;
  background: var(--admin-state-hover);
}

.admin-auth__channel-radio {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--admin-primary);
  cursor: pointer;
}

.admin-auth__channel-label {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
  cursor: pointer;
  flex: 1;
}
.admin-auth__channel-label i {
  display: none;
}

.admin-auth__channel-name {
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
}

.admin-auth__channel-desc {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}

.admin-auth__steps--timeline {
  margin-bottom: var(--admin-space-lg);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-auth__steps--timeline .admin-auth__step {
  display: flex;
  gap: var(--admin-space-sm);
  margin: 0;
}

.admin-auth__step-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}

.admin-auth__step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--admin-grey-200);
  color: var(--admin-text-muted);
  flex-shrink: 0;
  z-index: 1;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-auth__step-dot .admin-auth__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  line-height: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  color: inherit;
  border-radius: 0;
}

.admin-auth__step-line {
  flex: 1;
  width: 2px;
  background: var(--admin-grey-200);
  margin: 2px 0;
  min-height: 16px;
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-auth__step-line.admin-auth__step-line--done {
  background: var(--admin-success, #16a34a);
}

.admin-auth__step-content {
  flex: 1;
  min-width: 0;
  padding-bottom: var(--admin-space-md);
}

.admin-auth__steps--timeline .admin-auth__step-header {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 0;
}

.admin-auth__steps--timeline .admin-auth__step-label {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-muted);
  transition: color var(--admin-duration) var(--admin-ease);
}

.admin-auth__step-body {
  margin-top: var(--admin-space-sm);
}

.admin-auth__steps--timeline .admin-auth__step--done .admin-auth__step-dot {
  background: var(--admin-success, #16a34a);
  color: #fff;
}
.admin-auth__steps--timeline .admin-auth__step--done .admin-auth__step-label {
  color: var(--admin-text-muted);
  font-weight: 400;
}

.admin-auth__steps--timeline .admin-auth__step--active .admin-auth__step-dot {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.18);
}
.admin-auth__steps--timeline .admin-auth__step--active .admin-auth__step-label {
  color: var(--admin-text);
  font-weight: 600;
}

.admin-auth__steps--timeline .admin-auth__step--pending .admin-auth__step-dot {
  background: var(--admin-grey-100);
  color: var(--admin-text-muted);
  border: 1.5px dashed var(--admin-border-light);
}
.admin-auth__steps--timeline .admin-auth__step--pending .admin-auth__step-label {
  color: var(--admin-text-muted);
  font-weight: 400;
}

.admin-auth__step-next-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin-top: var(--admin-space-sm);
  padding: 0.5rem var(--admin-space);
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  border: none;
  border-radius: var(--admin-radius-sm);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-auth__step-next-btn:hover {
  background: var(--admin-primary-hover);
}
.admin-auth__step-next-btn:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: var(--admin-focus-ring-offset);
}

.admin-auth__channel-cards {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  margin-bottom: var(--admin-space-sm);
}

.admin-auth__channel-card {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space);
  border: 1.5px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-auth__channel-card:hover {
  border-color: #aaa;
  background: var(--admin-state-hover);
}
.admin-auth__channel-card:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: var(--admin-focus-ring-offset);
}
.admin-auth__channel-card[aria-checked=true] {
  border-color: var(--admin-primary);
  background: rgba(var(--admin-primary-rgb), 0.05);
  box-shadow: 0 0 0 1px var(--admin-primary);
}
.admin-auth__channel-card--disabled {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
}

.admin-auth__channel-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--admin-radius-xs);
  background: var(--admin-grey-100);
  flex-shrink: 0;
}
.admin-auth__channel-card-icon i {
  font-size: 1.1rem;
  color: var(--admin-text-secondary);
}

.admin-auth__channel-card[aria-checked=true] .admin-auth__channel-card-icon {
  background: rgba(var(--admin-primary-rgb), 0.1);
}
.admin-auth__channel-card[aria-checked=true] .admin-auth__channel-card-icon i {
  color: var(--admin-primary);
}

.admin-auth__channel-card-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.admin-auth__channel-badge--soon {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--admin-grey-200);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-2xs, 1rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.admin-auth__totp-guide {
  margin: 0 0 var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.5;
}

.admin-auth__totp-qr-wrap {
  display: flex;
  justify-content: center;
  margin: var(--admin-space-sm) 0;
}

.admin-auth__totp-qr {
  width: 200px;
  height: 200px;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  display: block;
}

.admin-auth__totp-or {
  margin: var(--admin-space-sm) 0 var(--admin-space-xs);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  text-align: center;
}

.admin-auth__totp-secret {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--admin-text);
  word-break: break-all;
  cursor: pointer;
  transition: background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-auth__totp-secret:hover {
  background: var(--admin-grey-100);
  border-color: var(--admin-primary);
}
.admin-auth__totp-secret i:first-child {
  color: var(--admin-primary);
  flex-shrink: 0;
}
.admin-auth__totp-secret span {
  flex: 1;
  min-width: 0;
}

.admin-auth__totp-secret-copy {
  flex-shrink: 0;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-sm);
}

.admin.admin--auth .admin-auth__password-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
.admin.admin--auth .admin-auth__password-wrap > .admin-auth__input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
}
.admin.admin--auth .admin-auth__password-wrap > .admin-auth__password-toggle {
  flex: 0 0 var(--admin-size-input-height) !important;
  width: var(--admin-size-input-height) !important;
  min-width: var(--admin-size-input-height) !important;
  display: inline-flex !important;
  align-self: stretch !important;
}

.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border-light);
  box-shadow: var(--admin-elevation-1);
  background: var(--admin-card-bg);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--admin-card-bg);
}

.admin-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.admin-table th {
  padding: 1rem var(--admin-space-lg);
  text-align: left;
  background: var(--admin-grey-50);
  font-weight: 600;
  font-size: var(--admin-fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
  border-bottom: 2px solid var(--admin-border);
  white-space: nowrap;
  user-select: none;
}
.admin-table th.admin-table__col-sortable {
  cursor: pointer;
}
.admin-table th.admin-table__col-sortable:hover {
  color: var(--admin-text-secondary);
}

.admin-table td {
  padding: 1.1rem var(--admin-space-lg);
  text-align: left;
  border-bottom: 1px solid var(--admin-border-light);
  font-size: var(--admin-fs-body-lg);
  color: var(--admin-text);
  vertical-align: middle;
}

.admin-table tbody tr {
  background: var(--admin-card-bg);
  position: relative;
  transition: background var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-table tbody tr: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.is-selected:hover {
  background: rgba(var(--admin-primary-rgb), 0.07);
}
.admin-table tbody tr.admin-table__row--current, .admin-table tbody tr.user-sessions__row--current {
  background: var(--admin-white);
}

.admin-table--compact th {
  padding: 0.7rem var(--admin-space);
  font-size: var(--admin-fs-xs);
}
.admin-table--compact td {
  padding: 0.7rem var(--admin-space);
  font-size: var(--admin-fs-body);
}

.admin-table--comfortable th {
  padding: 1.4rem var(--admin-space-xl);
}
.admin-table--comfortable td {
  padding: 1.4rem var(--admin-space-xl);
}

.admin-table__col-check,
.admin-table__cell-check {
  width: 40px;
  max-width: 40px;
  text-align: center;
}

.admin-table__col-handle,
.admin-table__cell-handle {
  width: 32px;
  max-width: 32px;
  color: var(--admin-text-muted);
  cursor: grab;
  text-align: center;
}
.admin-table__col-handle:active,
.admin-table__cell-handle:active {
  cursor: grabbing;
}

.admin-table__col-thumb,
.admin-table__cell-thumb {
  width: 132px;
  max-width: 132px;
}

.admin-table__col-thumb--portfolio-logo,
.admin-table__cell-thumb--portfolio-logo {
  width: 112px;
  max-width: 112px;
}

.admin-table__col-compact {
  white-space: nowrap;
  vertical-align: middle;
}

.admin-table__thumb {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-grey-100);
  border: 1px solid var(--admin-border-light);
}

.admin-table__thumb--service-item {
  width: 120px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.admin-table__thumb--portfolio-logo {
  width: 96px;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
  object-position: center left;
  aspect-ratio: auto;
}

.admin-table__thumb-placeholder {
  display: block;
  width: 120px;
  max-width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-grey-100);
  border: 1px dashed var(--admin-border-light);
}

.admin-table__thumb-placeholder--portfolio-logo {
  width: 96px;
  height: 40px;
  aspect-ratio: auto;
}

.admin-table .admin-badge {
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-table td:has(.admin-badge) {
  white-space: nowrap;
  vertical-align: middle;
}

.admin-table__muted {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}

.admin-table__sub {
  display: block;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  margin-top: 2px;
}

.admin-table__title-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.admin-table__title-link:hover {
  color: var(--admin-primary);
  text-decoration: underline;
}
.admin-table__title-link:focus-visible {
  outline: none;
  border-radius: var(--admin-radius-xs);
  box-shadow: none;
  border-color: var(--admin-border-focus);
}

.admin-i18n-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-xs);
}
.admin-i18n-switch__label { /* "이름" 등 단일 라벨 — 헤더 th 의 text-transform 상속 */ }
.admin-i18n-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-card-bg);
  color: var(--admin-text-secondary);
  font-family: inherit;
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.admin-i18n-switch__btn:hover {
  border-color: var(--admin-border-focus);
  background: var(--admin-grey-50);
}
.admin-i18n-switch__btn:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--admin-border-focus);
}
.admin-i18n-switch__icon {
  font-size: var(--admin-fs-xs);
  transition: transform var(--admin-duration-short) var(--admin-ease);
}
.admin-i18n-switch[data-i18n-switch] .admin-i18n-switch__btn[aria-expanded=true] .admin-i18n-switch__icon {
  transform: rotate(180deg);
}
.admin-i18n-switch__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: auto;
  right: 0;
  z-index: 8;
  min-width: 9rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  box-shadow: var(--admin-elevation-2);
}
.admin-i18n-switch__menu li {
  padding: 0.6rem 0.8rem;
  border-radius: var(--admin-radius-xs);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--admin-text-secondary);
  cursor: pointer;
}
.admin-i18n-switch__menu li:hover {
  background: var(--admin-grey-100);
  color: var(--admin-text);
}
.admin-i18n-switch__menu li[aria-selected=true] {
  color: var(--admin-primary);
  font-weight: 600;
}

.admin-table__col-actions,
.admin-table__cell-actions {
  width: 1px;
  text-align: right;
  white-space: nowrap;
}

.admin-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--admin-space-xs);
  flex-wrap: nowrap;
  white-space: nowrap;
}

.admin-table__actions > form,
.admin-table__actions > .admin-form-inline {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.admin-table__actions > form {
  gap: var(--admin-space-xs);
}

.admin-table__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.8rem;
  padding: 0 1rem;
  font-size: var(--admin-fs-body);
  font-weight: 500;
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--admin-text-secondary);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-table__btn i, .admin-table__btn svg {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.admin-table__btn:hover {
  background: var(--admin-grey-100);
  border-color: var(--admin-border);
  color: var(--admin-text);
}
.admin-table__btn:active {
  background: var(--admin-grey-200);
}
.admin-table__btn:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
}
.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%;
}

body.admin-shell-v2 .admin-table-wrap {
  border: 1px solid var(--color-border-default);
  border-radius: var(--figma-radius);
  box-shadow: none;
  background: transparent;
}
body.admin-shell-v2 .admin-table {
  background: transparent;
  font-size: var(--admin-fs-base);
  border-collapse: collapse;
}
body.admin-shell-v2 .admin-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
body.admin-shell-v2 .admin-table th {
  height: 3.2rem;
  padding: 0.7rem 1rem;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
  font-size: var(--admin-fs-xs);
  line-height: 1.6rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
body.admin-shell-v2 .admin-table td {
  height: 4rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: var(--admin-fs-base);
  line-height: 1.8rem;
}
body.admin-shell-v2 .admin-table tbody tr {
  background: transparent;
  transition: background var(--admin-duration-short) var(--admin-ease);
}
body.admin-shell-v2 .admin-table tbody tr td:first-child {
  box-shadow: none;
  transition: none;
}
body.admin-shell-v2 .admin-table tbody tr:hover {
  background: var(--color-bg-hover);
}
body.admin-shell-v2 .admin-table tbody tr:hover td:first-child {
  box-shadow: none;
}
body.admin-shell-v2 .admin-table tbody tr.is-selected {
  background: var(--color-bg-selected);
}
body.admin-shell-v2 .admin-table tbody tr.is-selected td {
  border-bottom-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-table tbody tr.is-selected td:first-child {
  box-shadow: none;
}
body.admin-shell-v2 .admin-table__title-link:focus-visible,
body.admin-shell-v2 .admin-i18n-switch__btn:focus-visible,
body.admin-shell-v2 .admin-table-page-input:focus,
body.admin-shell-v2 .admin-table-toolbar__search-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: none;
}
body.admin-shell-v2 .admin-table__title-link {
  font-weight: 600;
  color: var(--color-action-primary-text);
}
body.admin-shell-v2 .admin-table__title-link:hover {
  color: var(--color-action-primary);
  text-decoration: none;
}
body.admin-shell-v2 .admin-table__sub,
body.admin-shell-v2 .admin-table__muted {
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1.6rem;
}
body.admin-shell-v2 .admin-table__btn {
  height: 3rem;
  padding: 0 0.9rem;
  border-color: var(--color-border-default);
  border-radius: 0.5rem;
  color: var(--color-text-secondary);
  font-size: 1.2rem;
  background: transparent;
}
body.admin-shell-v2 .admin-table__btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-table__btn.admin-btn--danger-outline {
  border-color: var(--admin-error-border);
  color: var(--admin-error-text);
}
body.admin-shell-v2 .admin-table__btn.admin-btn--danger-outline:hover {
  background: var(--admin-error-bg);
  border-color: var(--admin-error-border);
  color: var(--admin-error-text);
}

.admin-page__breadcrumb {
  display: none;
  margin-bottom: var(--admin-space);
  padding: var(--admin-space-sm) 0;
}
.admin-page__breadcrumb .admin-breadcrumb {
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
}
.admin-page__breadcrumb .admin-breadcrumb__link {
  color: var(--admin-primary);
  text-decoration: none;
}
.admin-page__breadcrumb .admin-breadcrumb__link:hover {
  text-decoration: underline;
}
.admin-page__breadcrumb .admin-breadcrumb__sep {
  color: var(--admin-text-tertiary);
}
.admin-page__breadcrumb .admin-breadcrumb__current {
  color: var(--admin-text);
  font-weight: 600;
}
@media (max-width: 1024px) {
  .admin-page__breadcrumb {
    display: block;
  }
}

.admin-invite-created-banner {
  margin-bottom: var(--admin-space-lg);
  padding: var(--admin-space-lg);
  background: rgba(22, 101, 52, 0.08);
  border: 1px solid rgba(22, 101, 52, 0.22);
  border-radius: var(--admin-radius);
}

.admin-invite-created-banner__title {
  margin: 0 0 var(--admin-space-xs);
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text);
}
.admin-invite-created-banner__title .fa-link {
  margin-right: 0.35em;
  opacity: 0.85;
}

.admin-invite-created-banner__desc {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
  line-height: 1.45;
}

.admin-invite-url--banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
  align-items: center;
}
.admin-invite-url--banner .admin-form__input {
  flex: 1;
  min-width: min(100%, 280px);
}

.admin-page__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.admin-page__header > .admin-page__header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
}
.admin-page__header > .admin-page__header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
}
.admin-page__header > .admin-page__header-info .admin-page__header-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .admin-page__header {
    flex-direction: column;
    gap: 1.6rem;
    margin-bottom: 2.4rem;
    align-items: flex-start;
  }
  .admin-page__header > .admin-page__header-left {
    flex-direction: column;
    gap: 0.8rem;
    align-items: flex-start;
  }
  .admin-page__header > .admin-page__header-info {
    gap: 0.4rem;
  }
  .admin-page__header .admin-page__header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
}

.admin-page__header-actions {
  display: flex;
  gap: 0.8rem;
  flex-shrink: 0;
  width: auto;
  justify-content: flex-end;
}

.admin-page__title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--admin-text);
  line-height: 2.8rem;
  word-break: break-word;
}

.admin-page__subtitle {
  display: inline-flex;
  align-items: center;
  font-size: 1.2rem;
  color: var(--admin-text-secondary);
  background: var(--color-bg-subtle);
  padding: 0.1rem 0.6rem;
  border-radius: var(--figma-radius);
  margin: 0;
  line-height: 1.5;
  font-weight: 600;
  border: 1px solid rgba(var(--admin-primary-rgb), 0.2);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .admin-page__subtitle {
    font-size: 1.2rem;
    padding: 0.1rem 0.6rem;
  }
}
@media (min-width: 1024px) {
  .admin-page__subtitle {
    padding: 0.1rem 0.6rem;
  }
}

.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: 1.6rem;
  text-align: center;
  background: var(--admin-card-bg);
  border-radius: var(--figma-radius);
  border: 1px dashed var(--admin-border);
}

.admin-empty__text {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text-secondary);
}

.admin-empty__text--sm,
.admin-empty__desc {
  margin: calc(var(--admin-space) * -0.5) 0 var(--admin-space);
  font-size: var(--admin-fs-sm, 1.25rem);
  font-weight: 400;
  color: var(--admin-text-muted);
}

.admin-index-filter {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  padding: 0.8rem 0;
  background: transparent;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-index-filter .admin-search-bar__input,
.admin-index-filter .admin-form__input,
.admin-index-filter .admin-select,
.admin-index-filter .admin-btn {
  height: var(--admin-size-input-height);
}
.admin-index-filter .cs-trigger {
  min-height: var(--admin-size-input-height);
  height: var(--admin-size-input-height);
}

.admin-index-filter__search {
  width: 100%;
}

.admin-index-filter__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.8rem 1.2rem;
}

.admin-index-filter__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--admin-space-2xs);
}
.admin-index-filter__item--date .admin-index-filter__date-inputs {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
}
.admin-index-filter__item--date .admin-index-filter__sep {
  color: var(--admin-text-tertiary);
  font-weight: 500;
}
.admin-index-filter__item--date .admin-form__input {
  width: auto;
}

.admin-index-filter__label {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 500;
  color: var(--admin-text-muted);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.admin-index-filter__label i {
  font-size: 0.85em;
}

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

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

.admin-index-filter__item .cs-wrap,
.admin-index-filter__item .mcs-wrap {
  width: 19rem;
  max-width: 100%;
}

.admin-index-filter__search-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
}
.admin-index-filter__search-row .admin-search-bar {
  flex: 1 1 0;
  min-width: 0;
}
.admin-index-filter__search-row .admin-index-filter__action-btns {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  flex-shrink: 0;
}

.admin-index-filter__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
}

body.admin-shell-v2 .admin-index-filter {
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space);
  padding: var(--admin-space) 0;
  border: 0;
  border-bottom: 1px solid var(--color-border-default);
  background: transparent;
}
body.admin-shell-v2 .admin-index-filter__search-row {
  align-items: center;
  gap: var(--admin-space-sm);
}
body.admin-shell-v2 .admin-index-filter__filters {
  align-items: center;
  gap: var(--admin-space-sm);
}
body.admin-shell-v2 .admin-index-filter__item {
  gap: 0;
}
body.admin-shell-v2 .admin-index-filter__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
body.admin-shell-v2 .admin-index-filter__item .cs-wrap,
body.admin-shell-v2 .admin-index-filter__item .mcs-wrap {
  width: auto;
  min-width: 16.8rem;
}
body.admin-shell-v2 .admin-index-filter__item--date .admin-index-filter__date-inputs {
  gap: var(--admin-space-xs);
}
body.admin-shell-v2 .admin-index-filter__input,
body.admin-shell-v2 .admin-index-filter .cs-trigger,
body.admin-shell-v2 .admin-index-filter .mcs-trigger,
body.admin-shell-v2 .admin-index-filter .admin-btn,
body.admin-shell-v2 .admin-index-filter .admin-search-bar__input {
  min-height: var(--figma-control-height);
  height: var(--figma-control-height);
  border-radius: 0.8rem;
}
body.admin-shell-v2 .admin-index-filter .cs-trigger,
body.admin-shell-v2 .admin-index-filter .mcs-trigger {
  padding-inline: var(--admin-space-lg);
  background: transparent;
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-index-filter .cs-dropdown,
body.admin-shell-v2 .admin-index-filter .mcs-dropdown {
  min-width: 24rem;
  padding: var(--admin-space-2xs);
  border-radius: 1.2rem;
}
body.admin-shell-v2 .admin-index-filter .cs-option,
body.admin-shell-v2 .admin-index-filter .mcs-option {
  min-height: 4rem;
  padding-inline: var(--admin-space-lg);
  justify-content: flex-start;
  gap: var(--admin-space);
  font-size: 1.4rem;
  line-height: 2rem;
}
body.admin-shell-v2 .admin-index-filter .cs-option__check,
body.admin-shell-v2 .admin-index-filter .mcs-option__check {
  order: -1;
  width: 1.6rem;
  margin-left: 0;
}

.admin-pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .admin-pagination-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem;
    margin-top: 1.6rem;
  }
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  flex: 1;
}
@media (max-width: 768px) {
  .admin-pagination {
    gap: 0.4rem;
    width: 100%;
  }
}

.admin-pagination__info {
  margin: 0;
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text-secondary);
}
.admin-pagination__info strong {
  color: var(--admin-text);
  font-weight: 600;
}

.admin-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  .admin-pagination__list {
    gap: 0.4rem;
  }
}

.admin-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  height: 3.2rem;
  padding: 0 0.8rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--admin-text-secondary);
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--figma-radius);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
@media (min-width: 768px) {
  .admin-pagination__btn {
    min-width: 3.6rem;
    height: 3.6rem;
    padding: 0 1.2rem;
  }
}
.admin-pagination__btn:hover:not(.admin-pagination__btn--disabled):not(.admin-pagination__btn--current):not(.admin-pagination__btn--ellipsis) {
  background: var(--admin-primary-light);
  border-color: rgba(var(--admin-primary-rgb), 0.4);
  color: var(--admin-primary);
  transform: none;
  box-shadow: none;
}
.admin-pagination__btn:active:not(.admin-pagination__btn--disabled):not(.admin-pagination__btn--current):not(.admin-pagination__btn--ellipsis) {
  transform: none;
  box-shadow: none;
}
.admin-pagination__btn:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
}
.admin-pagination__btn--current {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: var(--admin-on-primary);
  font-weight: 600;
  cursor: default;
  box-shadow: none;
  transform: none;
}
.admin-pagination__btn--current:hover {
  background: var(--admin-primary-hover);
  transform: none;
  box-shadow: none;
}
.admin-pagination__btn--disabled {
  color: var(--admin-text-disabled);
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.admin-pagination__btn--ellipsis {
  border-color: transparent;
  background: transparent;
  cursor: default;
  pointer-events: none;
  color: var(--admin-text-muted);
  padding: 0 0.4rem;
}
.admin-pagination__btn--ellipsis:hover {
  background: transparent;
}
.admin-pagination__btn i, .admin-pagination__btn svg {
  font-size: 1.2rem;
}

.admin-pagination__per-page {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .admin-pagination__per-page {
    width: 100%;
    justify-content: space-between;
  }
}

.admin-pagination__per-page-label {
  font-size: 1.3rem;
  color: var(--admin-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}
.admin-pagination__per-page-label i {
  font-size: 1.2rem;
}

.admin-pagination__per-page-select {
  padding: 0.7rem 2.8rem 0.7rem 1rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--figma-radius);
  font-size: 1.3rem;
  background: var(--admin-white);
  color: var(--admin-text);
  cursor: pointer;
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1.2rem;
  min-width: 7rem;
  font-family: inherit;
}
.admin-pagination__per-page-select:focus {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230076cb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
.admin-pagination__per-page-select:hover {
  border-color: rgba(var(--admin-primary-rgb), 0.4);
}
@media (max-width: 768px) {
  .admin-pagination__per-page-select {
    flex: 1;
    max-width: 12rem;
  }
}

.admin-form-inline {
  display: inline;
}

.admin-table__link {
  font-weight: 600;
  color: var(--admin-text);
  text-decoration: none;
}
.admin-table__link:hover {
  text-decoration: underline;
  color: var(--admin-primary);
}

.admin-message {
  padding: var(--admin-space) var(--admin-space-lg);
  border-radius: var(--admin-radius-sm);
  margin-bottom: var(--admin-space);
  font-size: var(--admin-fs-body);
  font-weight: 500;
}
.admin-message--error {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
  border: 1px solid rgba(var(--admin-error-rgb), 0.3);
}

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

.admin-tab-nav {
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  margin-bottom: var(--admin-space);
  padding: var(--admin-space-2xs);
  border: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tab-nav::-webkit-scrollbar {
  display: none;
}

.admin-tab-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 3.2rem;
  padding: 0 var(--admin-space);
  font-size: var(--admin-fs-base);
  font-weight: 500;
  color: var(--admin-text-secondary);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-lg);
  background: transparent;
  line-height: 1;
  transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease);
  white-space: nowrap;
}
.admin-tab-nav__item:hover {
  color: var(--admin-text);
  background: var(--admin-grey-100);
}
.admin-tab-nav__item--active {
  color: var(--admin-text);
  font-weight: 600;
  border-color: transparent;
  background: var(--admin-grey-100);
}
.admin-tab-nav__item:focus-visible {
  outline: 0;
  border-color: var(--admin-border-focus);
}

body.admin-shell-v2 .admin-tab-nav {
  gap: var(--admin-space-xs);
  margin-bottom: var(--admin-space);
  padding: 0;
}
body.admin-shell-v2 .admin-tab-nav__item {
  padding: 0 var(--admin-space-lg);
  color: var(--color-text-secondary);
  border-radius: var(--admin-radius-lg);
}
body.admin-shell-v2 .admin-tab-nav__item:hover {
  color: var(--color-text-primary);
  background: var(--figma-menu-hover, var(--color-bg-hover));
}
body.admin-shell-v2 .admin-tab-nav__item--active {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}
body.admin-shell-v2 .admin-tab-nav__item:focus-visible {
  border-color: var(--color-border-focus);
}

.admin-siteinfo-logo-list {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}

.admin-siteinfo-logo-item {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-lg);
  padding: var(--admin-space);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-bg-subtle, #fafafa);
}

.admin-siteinfo-logo-item__left {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}

.admin-siteinfo-logo-item__right {
  flex: 1 1 0;
  min-width: 0;
}

.admin-siteinfo-logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border-light);
  overflow: hidden;
}
.admin-siteinfo-logo-preview--dark {
  background: var(--admin-grey-900);
}
.admin-siteinfo-logo-preview--light {
  background: var(--admin-grey-50);
}
.admin-siteinfo-logo-preview--admin {
  background: var(--admin-drawer-bg);
  border-color: var(--admin-drawer-border);
}
.admin-siteinfo-logo-preview__img {
  max-height: 72px;
  max-width: 90%;
  object-fit: contain;
}

.admin-siteinfo-quick-menu {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-siteinfo-quick-menu__item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-bg);
}
.admin-siteinfo-quick-menu__item.is-dragging {
  opacity: 0.55;
  box-shadow: var(--admin-shadow-sm);
}

.admin-siteinfo-quick-menu__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-xs);
  background: var(--admin-bg-subtle, #fafafa);
  color: var(--admin-text-muted);
  cursor: grab;
}
.admin-siteinfo-quick-menu__handle:active {
  cursor: grabbing;
}
.admin-siteinfo-quick-menu__handle:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}

.admin-siteinfo-quick-menu__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  background: var(--admin-primary-soft);
  color: var(--admin-primary);
  font-weight: 700;
}

.admin-siteinfo-quick-menu__body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
  min-width: 0;
}

.admin-siteinfo-quick-menu__label {
  color: var(--admin-text);
}

.admin-siteinfo-quick-menu__meta {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}

.admin-siteinfo-quick-menu__rank {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
}

.admin-siteinfo-quick-menu__rank-label {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}

.admin-siteinfo-quick-menu__rank-input {
  width: 7rem;
}

.admin-siteinfo-sns-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: var(--admin-space);
}

.admin-siteinfo-sns-icon-card {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
  padding: var(--admin-space);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-bg);
}

.admin-siteinfo-sns-icon-card__header {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
}

.admin-siteinfo-sns-icon-card__preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-grey-900);
  color: var(--admin-white);
}
.admin-siteinfo-sns-icon-card__preview svg {
  width: 55%;
  height: 55%;
  fill: currentColor;
}

.admin-siteinfo-sns-icon-card__title {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
  min-width: 0;
}
.admin-siteinfo-sns-icon-card__title strong {
  color: var(--admin-text);
}
.admin-siteinfo-sns-icon-card__title span {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}

@media (max-width: 768px) {
  .admin-siteinfo-quick-menu__item {
    grid-template-columns: auto auto minmax(0, 1fr);
  }
  .admin-siteinfo-quick-menu__rank {
    grid-column: 1/-1;
    justify-content: flex-end;
  }
}
.admin-form__label-hint {
  margin-left: var(--admin-space-xs);
  font-size: var(--admin-fs-xs);
  font-weight: 400;
  color: var(--admin-text-muted);
}

[data-admin-theme=dark] .admin-pagination__per-page-select,
[data-theme=dark] .admin-pagination__per-page-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a8b4cc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
[data-admin-theme=dark] .admin-pagination__per-page-select:focus,
[data-theme=dark] .admin-pagination__per-page-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2334affc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.admin-form {
  max-width: 1100px;
}
.admin-form--wide {
  max-width: 1280px;
}
.admin-form__section {
  margin-bottom: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--admin-border-light);
}
.admin-form__section:first-child {
  padding-top: 0;
  border-top: 0;
}
.admin-form__section:last-child {
  margin-bottom: 0;
}
.admin-form__section:has(+ .admin-form__actions) {
  margin-bottom: 0;
}
.admin-form__section-title {
  font-size: var(--admin-fs-base);
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: var(--admin-space-2xs);
  padding-bottom: var(--admin-space-xs);
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
}
.admin-form__section-title::after {
  content: none;
}
.admin-form__fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg);
  margin-bottom: var(--admin-space-lg);
}
.admin-form__block {
  margin-bottom: var(--admin-space-2xl);
}
.admin-form__block:last-child {
  margin-bottom: 0;
}
.admin-form__block + .admin-form__block {
  margin-top: var(--admin-space-xl);
}
.admin-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
}
.admin-form__label {
  display: block;
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  color: var(--admin-text);
  letter-spacing: 0.005em;
  margin-bottom: var(--admin-space-xs);
}
.admin-form__label--required::after {
  content: " *";
  color: var(--admin-error);
  font-weight: 700;
}
.admin-form__label--sm {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-secondary);
  margin-bottom: var(--admin-space-xs);
}
.admin-form__input, .admin-form__textarea {
  display: block;
  width: 100%;
  height: var(--admin-size-input-height);
  padding: 0 0.9rem;
  font-size: var(--admin-fs-base);
  color: var(--admin-text);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--figma-radius, 0.4rem);
  font-family: inherit;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background 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-border-focus);
  box-shadow: none;
}
.admin-form__input:-webkit-autofill, .admin-form__input:-webkit-autofill:hover, .admin-form__input:-webkit-autofill:focus, .admin-form__textarea:-webkit-autofill, .admin-form__textarea:-webkit-autofill:hover, .admin-form__textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--admin-white) inset;
  -webkit-text-fill-color: var(--admin-text);
}
.admin-form__input:disabled, .admin-form__textarea:disabled {
  background: var(--color-bg-canvas);
  color: var(--admin-text-muted);
  cursor: not-allowed;
}
.admin-form__textarea {
  height: auto;
  min-height: var(--admin-size-editor-min-height);
  padding: var(--admin-space-sm) var(--admin-space);
  resize: vertical;
  line-height: 1.6;
}
.admin-form__desc {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  line-height: 1.5;
  margin-top: var(--admin-space-2xs);
  margin-bottom: 1.2rem;
}
.admin-form__desc + .admin-form__label, .admin-form__desc + .admin-form__label--sm {
  margin-top: var(--admin-space-lg);
}
.admin-form__hint {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  line-height: 1.5;
  margin-top: 0.2rem;
}
.admin-form__hint--below {
  margin-bottom: var(--admin-space-xs);
}
.admin-form__hint--readable {
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-xs);
}
.admin-form__hint--rules {
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-warn-bg);
  color: var(--admin-warn-text);
  border: 1px solid rgba(var(--admin-warn-rgb), 0.25);
  border-radius: var(--admin-radius-xs);
}
.admin-form__hint--rules ul {
  padding-left: 1.4em;
  list-style: disc;
}
.admin-form__hint--rules li {
  margin-bottom: 0.2rem;
}
.admin-form__error {
  font-size: var(--admin-fs-sm);
  color: var(--admin-error-text);
  font-weight: 500;
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.admin-form__field--narrow {
  max-width: 10rem;
}
.admin-form__field--narrow:has(.admin-number-stepper) {
  max-width: max-content;
}
.admin-form {
  /* Avatar / 썸네일 미리보기 */
}
.admin-form__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--admin-border-light);
  background: var(--admin-grey-100);
}
.admin-form {
  /* 2컬럼 그리드 */
}
.admin-form__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--admin-space-lg);
  align-items: start;
}
.admin-form__grid-2 > .admin-form__block:not(:has(.admin-checkbox-wrap)) {
  margin: 0;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}
.admin-form__grid-2 > .admin-form__block:not(:has(.admin-checkbox-wrap)) > .admin-form__group {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: var(--admin-space-sm);
}
.admin-form__grid-2 > .admin-form__block:has(.admin-checkbox-wrap) {
  margin: 0;
  align-self: end;
}
.admin-form__grid-2 .admin-form__label {
  min-height: 2rem;
}
@media (max-width: 1024px) {
  .admin-form__grid-2 {
    grid-template-columns: 1fr;
  }
}
.admin-form {
  /* 태그 피커 — 체크박스 기반 멀티 칩 선택 컨테이너 */
}
.admin-form__tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-xs) var(--admin-space-sm);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-bg);
  min-height: 4.4rem;
  align-content: flex-start;
}
.admin-form {
  /* 컬러 피커 */
}
.admin-form__color-picker-wrap {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
}
.admin-form {
  /* 사진 미리보기 — file 입력 위에 현재 사진 썸네일 표시 */
}
.admin-form__photo-preview {
  margin-bottom: var(--admin-space-2xs);
}
.admin-form__photo-preview img {
  display: block;
  max-width: 12rem;
  max-height: 12rem;
  object-fit: cover;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-bg-secondary);
}
.admin-form {
  /* 폼 submit 로더 — 기본 숨김, Form.ts가 submit 중에만 inline-block으로 표시 */
}
.admin-form__loader {
  display: none;
  margin-left: var(--admin-space-2xs);
}
.admin-form__loader--hidden {
  display: none;
}
.admin-form {
  /* 폼 하단 액션 바 */
}
.admin-form__actions {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
  padding-top: var(--admin-space-xl);
  border-top: 1px solid var(--admin-border-light);
  margin-top: var(--admin-space-xl);
  flex-wrap: wrap;
}
.admin-form__actions--right {
  justify-content: flex-end;
}
.admin-form__actions--between {
  justify-content: space-between;
}

body.admin-shell-v2 .admin-form {
  border: 1px solid var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
  box-shadow: none;
}
body.admin-shell-v2 .admin-form__section {
  margin-bottom: var(--admin-space-xl);
  padding-top: 0;
  border-top: 0;
}
body.admin-shell-v2 .admin-form__actions {
  padding-top: var(--admin-space-lg);
  margin-top: var(--admin-space-lg);
  border-top-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-user-edit .admin-form__section--tabs {
  padding: var(--figma-surface-padding);
  border: 1px solid var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
}
body.admin-shell-v2 .admin-user-edit-panel > .admin-form {
  max-width: none;
  padding: 0;
  border: 0;
}
body.admin-shell-v2 .admin-user-edit-panel .admin-form__actions {
  margin-top: var(--admin-space-xl);
}
body.admin-shell-v2 .admin-profile-uploader .admin-form__hint--readable {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-notice-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--admin-border-light);
  margin-bottom: var(--admin-space);
}

.admin-notice-tabs__tab {
  padding: var(--admin-space-sm) var(--admin-space);
  border: none;
  background: none;
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-notice-tabs__tab:hover {
  color: var(--admin-text);
}
.admin-notice-tabs__tab--active {
  color: var(--admin-primary);
  font-weight: 600;
  border-bottom-color: var(--admin-primary);
}

.admin-notice-panel--hidden {
  display: none;
}

.admin-notice-panel__body-en {
  margin-top: var(--admin-space);
}

.admin-notice-thumbnail-current {
  margin-bottom: var(--admin-space);
}

.admin-editor-quill .ql-editor {
  min-height: var(--admin-size-editor-min-height);
}

.admin-editor-quill .ql-container {
  font-size: var(--admin-fs-body-lg);
}

.admin-form__section-badge {
  font-size: var(--admin-fs-xs);
  font-weight: 500;
  color: var(--admin-text-muted);
  background: var(--admin-grey-100);
  border: 1px solid var(--admin-border-light);
  border-radius: 9999px;
  padding: 0.1rem 0.7rem;
  margin-left: var(--admin-space-xs);
  vertical-align: middle;
}

.admin-artist-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--admin-border-light);
  margin-bottom: var(--admin-space);
}

.admin-artist-tabs__tab {
  padding: var(--admin-space-sm) var(--admin-space);
  border: none;
  background: none;
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-artist-tabs__tab:hover {
  color: var(--admin-text);
}
.admin-artist-tabs__tab--active {
  color: var(--admin-primary);
  font-weight: 600;
  border-bottom-color: var(--admin-primary);
}

.admin-artist-panel--hidden {
  display: none;
}

.admin-form__list-area {
  margin-top: var(--admin-space-2xl);
  padding-top: var(--admin-space-lg);
  border-top: 1px solid var(--admin-border-light);
  width: 100%;
}

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

.admin-form__list-area .admin-table-wrap {
  width: 100%;
}

.admin-artists-form .admin-form__section .admin-form__block {
  margin-bottom: var(--admin-space);
}

.admin-artists-form .admin-form__section .admin-form__row {
  gap: var(--admin-space-sm) var(--admin-space);
}

.admin-artists-form .admin-form__row--add-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--admin-space-sm) var(--admin-space);
}

.admin-artists-form .admin-form__group--flex {
  flex: 1;
  min-width: 200px;
}

.admin-form__section--nested {
  margin-bottom: 0;
}

.admin-form__section--nested .admin-form__section-title {
  font-size: var(--admin-fs-body);
  margin-bottom: var(--admin-space-sm);
}

.admin-user-edit-tabs {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--admin-border-light);
  margin-bottom: var(--admin-space);
}
.admin-user-edit-tabs::-webkit-scrollbar {
  display: none;
}

.admin-user-edit-tabs__tab {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding: var(--admin-space-sm) var(--admin-space-lg);
  font-size: var(--admin-fs-body-lg);
  font-weight: 500;
  color: var(--admin-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--admin-radius-xs) var(--admin-radius-xs) 0 0;
  transition: color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-user-edit-tabs__tab:hover {
  color: var(--admin-text);
  background: var(--admin-grey-50);
}
.admin-user-edit-tabs__tab--active {
  color: var(--admin-primary);
  font-weight: 600;
  border-bottom-color: var(--admin-primary);
  background: transparent;
}

.admin-user-edit-panel--hidden {
  display: none;
}

.admin-form__actions--page {
  margin-top: var(--admin-space-2xl);
  border-top: none;
  padding-top: 0;
}

[data-controller=UserController][data-action=edit] .admin-form__section--tabs {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.user-sessions__table th, .user-sessions__table td {
  vertical-align: middle;
}
.user-sessions__row--current {
  background: var(--admin-white);
}
.user-sessions__icon-cell {
  text-align: center;
  color: var(--admin-text-secondary);
}
.user-sessions__device-icon {
  font-size: 1.25rem;
}
.user-sessions__ip-code {
  font-family: 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;
}

body.admin-shell-v2 .admin-user-edit-tabs {
  gap: 0;
  margin-bottom: var(--admin-space-xl);
  border-bottom-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-user-edit-tabs__tab {
  min-height: 3.6rem;
  padding: 0 var(--admin-space-xl);
  border-radius: 0;
  color: var(--color-text-secondary);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
body.admin-shell-v2 .admin-user-edit-tabs__tab:hover {
  color: var(--color-text-primary);
  background: transparent;
}
body.admin-shell-v2 .admin-user-edit-tabs__tab--active {
  color: var(--color-action-primary);
  border-bottom-color: var(--color-action-primary);
  background: transparent;
}
body.admin-shell-v2 .admin-form__actions--page {
  max-width: 96rem;
}

.admin-board-edit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--admin-border-light);
  margin-top: var(--admin-space-lg);
  margin-bottom: var(--admin-space-lg);
}

.admin-board-edit-tabs__tab {
  padding: var(--admin-space-sm) var(--admin-space);
  border: none;
  background: none;
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-board-edit-tabs__tab:hover {
  color: var(--admin-text);
}
.admin-board-edit-tabs__tab--active {
  color: var(--admin-primary);
  font-weight: 600;
  border-bottom-color: var(--admin-primary);
}

.admin-board-edit-panel--hidden {
  display: none;
}

.admin-form__block--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space) var(--admin-space-lg);
}

.admin-input-wrap--select .admin-select--board {
  min-width: 12rem;
  width: auto;
}

.admin-input-wrap--sort-order .admin-input--narrow {
  width: 6rem;
}

.admin-input--narrow {
  width: 5rem;
}

.admin-input--hours {
  width: 5rem;
  min-width: 4rem;
}

.admin-input--role-code {
  width: 10rem;
  max-width: 100%;
}

.admin-board-approval-fields {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}

.admin-board-approval-fields__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-sm) var(--admin-space);
}
.admin-board-approval-fields__row .admin-form__inline-unit {
  margin-left: 0;
}

.admin-form__section-note {
  margin-bottom: var(--admin-space-sm);
}

.admin-form__inline-unit {
  color: var(--admin-text-secondary);
}

.admin-form__row--wrap {
  flex-wrap: wrap;
  gap: var(--admin-space) var(--admin-space-lg);
}

.admin-form__row--tag-list {
  gap: var(--admin-space-2xs) var(--admin-space);
}

.admin-board-tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 28rem;
}

.admin-board-tag-list__item {
  border-bottom: 1px solid var(--admin-border-light, #e2e8f0);
}
.admin-board-tag-list__item:last-child {
  border-bottom: none;
}

.admin-board-tag-list__label {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) 0;
  cursor: pointer;
  min-height: 2.25rem;
}
.admin-board-tag-list__label:hover .admin-board-tag-list__box {
  border-color: var(--admin-primary, #0f172a);
  background: var(--admin-card-bg, #fff);
}

.admin-board-tag-list__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.admin-board-tag-list__input:focus-visible + .admin-board-tag-list__box {
  outline: 2px solid var(--admin-primary, #0f172a);
  outline-offset: 2px;
}
.admin-board-tag-list__input:checked + .admin-board-tag-list__box {
  background: var(--admin-primary, #0f172a);
  border-color: var(--admin-primary, #0f172a);
}
.admin-board-tag-list__input:checked + .admin-board-tag-list__box::after {
  opacity: 1;
}

.admin-board-tag-list__box {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--admin-grey-400, #94a3b8);
  border-radius: 4px;
  background: var(--admin-card-bg, #fff);
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.admin-board-tag-list__box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.375rem;
  height: 0.625rem;
  margin-left: -0.1875rem;
  margin-top: -0.3125rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.15s;
}

.admin-board-tag-list__name {
  font-size: var(--admin-fs-body);
  color: var(--admin-text);
}

.admin-boards__count-link {
  text-decoration: none;
}
.admin-boards__count-link:hover {
  background: var(--admin-primary-light);
  color: var(--admin-primary);
}

.admin-code {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--admin-bg-soft);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text);
}

.admin-boards-fields,
.admin-boards-categories,
.admin-boards-tags {
  margin-top: var(--admin-space-xl);
}

.admin-boards-fields__head,
.admin-boards-categories__head,
.admin-boards-tags__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-space-md);
  margin-bottom: var(--admin-section-action-gap);
}
@media (max-width: 544px) {
  .admin-boards-fields__head,
  .admin-boards-categories__head,
  .admin-boards-tags__head {
    flex-direction: column;
    align-items: stretch;
  }
}

.admin-boards-fields__head-text,
.admin-boards-categories__head-text,
.admin-boards-tags__head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-boards-fields__new,
.admin-boards-categories__new,
.admin-boards-tags__new {
  margin-bottom: var(--admin-section-action-gap);
}

.admin-boards-fields__new-form,
.admin-boards-categories__new-form,
.admin-boards-tags__new-form {
  gap: 2.4rem;
}
.admin-boards-fields__new-form .admin-form__label,
.admin-boards-categories__new-form .admin-form__label,
.admin-boards-tags__new-form .admin-form__label {
  margin-bottom: 0;
}
.admin-boards-fields__new-form .admin-form__group,
.admin-boards-categories__new-form .admin-form__group,
.admin-boards-tags__new-form .admin-form__group {
  gap: 0.8rem;
}
.admin-boards-fields__new-form .admin-form__block,
.admin-boards-categories__new-form .admin-form__block,
.admin-boards-tags__new-form .admin-form__block {
  margin-bottom: 0;
}
.admin-boards-fields__new-form .admin-locale-tabs,
.admin-boards-categories__new-form .admin-locale-tabs,
.admin-boards-tags__new-form .admin-locale-tabs {
  margin-bottom: 0;
}
.admin-boards-fields__new-form .admin-locale-tabs__bar,
.admin-boards-categories__new-form .admin-locale-tabs__bar,
.admin-boards-tags__new-form .admin-locale-tabs__bar {
  margin-bottom: var(--admin-space-md);
}
.admin-boards-fields__new-form .admin-locale-tabs__panel:not(.admin-locale-tabs__panel--hidden),
.admin-boards-categories__new-form .admin-locale-tabs__panel:not(.admin-locale-tabs__panel--hidden),
.admin-boards-tags__new-form .admin-locale-tabs__panel:not(.admin-locale-tabs__panel--hidden) {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.admin-boards-fields__new-form select[data-card-select] {
  display: none;
}

.admin-boards-fields__new-row {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.admin-boards-fields__new-row > .admin-form__block {
  margin-bottom: 0;
}

.admin-boards-fields__new-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-xl);
}
.admin-boards-fields__new-options .admin-form__block,
.admin-boards-fields__new-options .admin-form__group {
  display: contents;
}
.admin-boards-fields__new-options .admin-checkbox-wrap {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .admin-boards-fields__new-options {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--admin-space-md);
  }
}

.admin-boards-fields__empty,
.admin-boards-categories__empty,
.admin-boards-tags__empty {
  margin-top: var(--admin-space-md);
  padding: var(--admin-space-xl);
  background: var(--admin-bg-soft);
  border: 1px dashed var(--admin-border-light);
  border-radius: var(--admin-radius-lg);
  text-align: center;
  color: var(--admin-text-secondary);
}

.admin-boards-fields__table-wrap,
.admin-boards-categories__table-wrap,
.admin-boards-tags__table-wrap {
  margin-top: var(--admin-space-md);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-lg);
  overflow: hidden;
  background: var(--admin-card-bg);
}

.admin-boards-fields__row {
  transition: background 0.12s ease;
}
.admin-boards-fields__row:hover {
  background: var(--admin-bg-soft);
}

.admin-boards-fields__handle {
  cursor: grab;
  color: var(--admin-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--admin-radius-sm);
}
.admin-boards-fields__handle:hover {
  color: var(--admin-text-secondary);
  background: var(--admin-bg-soft);
}

.admin-boards-fields__type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-xs);
  padding: 0.3rem 0.7rem;
  background: var(--admin-bg-soft);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-full);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}
.admin-boards-fields__type-badge i {
  color: var(--admin-primary);
}

.admin-boards-fields__label-ko {
  display: block;
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
}

.admin-boards-fields__label-en {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}

.admin-boards-fields__key-code {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--admin-bg-soft);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
}

.admin-boards-fields__meta {
  display: flex;
  gap: var(--admin-space-xs);
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.admin-boards-fields__cell-handle {
  width: 4rem;
  text-align: center;
}

.admin-boards-fields__cell-options {
  text-align: center;
}

.admin-boards-fields__cell-actions {
  white-space: nowrap;
}
.admin-boards-fields__cell-actions > * + * {
  margin-left: var(--admin-space-xs);
}

.admin-boards-fields__col-handle {
  width: 4rem;
}

.admin-boards-fields__col-sort {
  width: 4rem;
}

.admin-boards-fields__col-type {
  width: 14rem;
}

.admin-boards-fields__col-key {
  width: 16rem;
}

.admin-boards-fields__col-options {
  width: 8rem;
}

.admin-boards-fields__col-actions {
  width: 14rem;
}

.admin-boards-fields__cell-sort {
  text-align: center;
}

.admin-boards-fields__sort-num {
  font-size: 1.1rem;
  color: var(--admin-text-muted);
  font-variant-numeric: tabular-nums;
}

.admin-boards-fields__options-row--hidden {
  display: none;
}

.admin-boards-fields__options-cell {
  padding: var(--admin-space-md) var(--admin-space-lg);
  background: var(--admin-bg-soft);
  border-top: 1px solid var(--admin-border-light);
}

.admin-boards-fields__options {
  margin-top: 1.6rem;
  padding: 1.4rem;
  background: var(--admin-bg-soft);
  border-radius: var(--admin-radius);
}

.admin-boards-fields__options-title {
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1rem;
}

.admin-boards-fields__option-new {
  margin-bottom: 1rem;
}
.admin-boards-fields__option-new > summary {
  cursor: pointer;
  list-style: none;
}
.admin-boards-fields__option-new > summary::-webkit-details-marker {
  display: none;
}
.admin-boards-fields__option-new[open] > summary {
  margin-bottom: 1rem;
}
.admin-boards-fields__option-new form {
  padding: 1.2rem;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
}

.admin-boards-fields__option-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.admin-boards-fields__option-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.8rem 1rem;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  position: relative;
}

.admin-boards-fields__option-value code {
  padding: 0.2rem 0.6rem;
  background: var(--admin-bg-soft);
  border-radius: var(--admin-radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text);
}

.admin-boards-fields__option-label {
  font-size: var(--admin-fs-base);
  color: var(--admin-text);
}

.admin-boards-fields__option-actions {
  display: flex;
  gap: 0.4rem;
}

.admin-boards-fields__option-edit {
  grid-column: 1/-1;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--admin-border-light);
}

.admin-boards-fields__option-edit--hidden {
  display: none;
}

.admin-form__subsection-title {
  font-size: var(--admin-fs-base);
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.6rem 0 1rem;
}

.admin-form__section-header {
  margin-bottom: 1.6rem;
}

.admin-form__section-desc {
  margin: var(--admin-space-2xs) 0 var(--admin-space-2xl);
  font-size: var(--admin-fs-base);
  color: var(--admin-text-secondary);
}

.admin-form__row--3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: start;
}
@media (max-width: 768px) {
  .admin-form__row--3col {
    grid-template-columns: 1fr;
  }
}

.admin-post-form .admin-locale-tabs--split {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xl);
  margin-bottom: var(--admin-space-2xl);
}
.admin-post-form .admin-locale-tabs__bar {
  margin-bottom: 0;
}
.admin-post-form .admin-post-form__section,
.admin-post-form .admin-form__section {
  padding-top: var(--admin-space-2xl);
  border-top: 1px solid var(--admin-border-light);
}
.admin-post-form .admin-post-form__section {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xl);
}
.admin-post-form .admin-post-form__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space);
}
.admin-post-form .admin-post-form__section-title,
.admin-post-form .admin-form__section-title {
  margin: 0;
  padding: 0;
  border: 0;
}
.admin-post-form .admin-post-form__section-body {
  min-width: 0;
}
.admin-post-form .admin-post-form__locale-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.admin-table__sub {
  color: var(--admin-text-secondary);
}

.admin-table__muted {
  color: var(--admin-text-secondary);
  font-style: italic;
}

body.admin-shell-v2 .admin-boards-fields,
body.admin-shell-v2 .admin-boards-categories,
body.admin-shell-v2 .admin-boards-tags {
  margin-top: var(--admin-space-lg);
}
body.admin-shell-v2 .admin-boards-fields__head,
body.admin-shell-v2 .admin-boards-categories__head,
body.admin-shell-v2 .admin-boards-tags__head,
body.admin-shell-v2 .admin-boards-fields__new,
body.admin-shell-v2 .admin-boards-categories__new,
body.admin-shell-v2 .admin-boards-tags__new {
  margin-bottom: var(--admin-space-lg);
}
body.admin-shell-v2 .admin-boards-fields__new-form,
body.admin-shell-v2 .admin-boards-categories__new-form,
body.admin-shell-v2 .admin-boards-tags__new-form,
body.admin-shell-v2 .admin-boards-fields__new-row {
  gap: var(--admin-space-2xl);
}
body.admin-shell-v2 .admin-boards-fields__new-form .admin-form__group,
body.admin-shell-v2 .admin-boards-categories__new-form .admin-form__group,
body.admin-shell-v2 .admin-boards-tags__new-form .admin-form__group {
  gap: var(--admin-space-sm);
}
body.admin-shell-v2 .admin-boards-fields__new-form .admin-locale-tabs__bar,
body.admin-shell-v2 .admin-boards-categories__new-form .admin-locale-tabs__bar,
body.admin-shell-v2 .admin-boards-tags__new-form .admin-locale-tabs__bar {
  margin-bottom: var(--admin-space);
}
body.admin-shell-v2 .admin-boards-fields__new-form .admin-locale-tabs__panel:not(.admin-locale-tabs__panel--hidden),
body.admin-shell-v2 .admin-boards-categories__new-form .admin-locale-tabs__panel:not(.admin-locale-tabs__panel--hidden),
body.admin-shell-v2 .admin-boards-tags__new-form .admin-locale-tabs__panel:not(.admin-locale-tabs__panel--hidden) {
  gap: var(--admin-space-2xl);
}
body.admin-shell-v2 .admin-boards-fields__empty,
body.admin-shell-v2 .admin-boards-categories__empty,
body.admin-shell-v2 .admin-boards-tags__empty,
body.admin-shell-v2 .admin-boards-fields__table-wrap,
body.admin-shell-v2 .admin-boards-categories__table-wrap,
body.admin-shell-v2 .admin-boards-tags__table-wrap,
body.admin-shell-v2 .admin-boards-fields__options,
body.admin-shell-v2 .admin-boards-fields__option-new form,
body.admin-shell-v2 .admin-boards-fields__option-item {
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
  box-shadow: none;
}
body.admin-shell-v2 .admin-boards-fields__options-cell,
body.admin-shell-v2 .admin-boards-fields__options {
  background: transparent;
}
body.admin-shell-v2 .admin-boards-fields__options {
  margin-top: var(--admin-space-xl);
  padding: var(--admin-space-xl);
}
body.admin-shell-v2 .admin-boards-fields__option-list {
  gap: var(--admin-space-2xs);
}
body.admin-shell-v2 .admin-boards-fields__option-item {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: var(--admin-space-lg);
  padding: var(--admin-space-lg);
}
body.admin-shell-v2 .admin-boards-fields__type-badge,
body.admin-shell-v2 .admin-boards-fields__key-code,
body.admin-shell-v2 .admin-boards-fields__option-value code,
body.admin-shell-v2 .admin-code {
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--color-text-secondary);
}
body.admin-shell-v2 .admin-boards-fields__label-ko,
body.admin-shell-v2 .admin-boards-fields__option-label {
  color: var(--color-text-primary);
}
body.admin-shell-v2 .admin-post-form .admin-locale-tabs--split {
  gap: var(--admin-space-3xl);
}
body.admin-shell-v2 .admin-post-form .admin-locale-tabs__bar {
  padding: var(--admin-space-xs);
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  background: var(--color-bg-subtle);
}
body.admin-shell-v2 .admin-post-form .admin-post-form__section,
body.admin-shell-v2 .admin-post-form .admin-form__section {
  margin-bottom: 0;
  padding-top: var(--admin-space-3xl);
  border-top-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-post-form .admin-post-form__section {
  gap: var(--admin-space-2xl);
}
body.admin-shell-v2 .admin-post-form .admin-post-form__section-title,
body.admin-shell-v2 .admin-post-form .admin-form__section-title {
  font-size: 1.9rem;
  line-height: 2.6rem;
}
body.admin-shell-v2 .admin-post-form .admin-post-form__locale-panel {
  gap: var(--admin-space-3xl);
}
body.admin-shell-v2 .admin-post-form .admin-rich-editor,
body.admin-shell-v2 .admin-post-form .admin-rich-editor .ql-toolbar.ql-snow,
body.admin-shell-v2 .admin-post-form .admin-quill-toolbar.ql-snow,
body.admin-shell-v2 .admin-post-form .admin-rich-editor .ql-container.ql-snow,
body.admin-shell-v2 .admin-post-form .admin-editor-quill.ql-container.ql-snow {
  background: transparent;
  border-color: var(--color-border-default);
}

.admin-secret-toggle {
  display: flex;
  align-items: center;
  gap: var(--admin-space-md);
}

.admin-secret-toggle__desc {
  color: var(--admin-text);
  line-height: 1.5;
}

.admin-secret-section {
  transition: opacity 0.2s ease;
}
.admin-secret-section.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.admin-index-filter select[name=board_id] {
  min-width: 20rem;
}

.admin-tags-add {
  margin-bottom: 1.5rem;
}

.admin-tags-add__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.admin-tags-add__group {
  margin-bottom: 0;
}

.admin-tags-add__hint {
  margin-top: 0.35rem;
}

.admin-tags-boards-cell .admin-btn {
  margin-left: 0.35rem;
}

.admin-form--inline {
  display: inline;
}

.admin-modal__body .admin-form__hint {
  margin-top: 0;
}

.admin-detail {
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius);
  padding: var(--admin-space-lg) var(--admin-space-xl);
  box-shadow: var(--admin-elevation-1);
  border: 1px solid var(--admin-border-light);
}

.admin-detail__list {
  margin: 0;
}

.admin-detail__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--admin-space);
  padding: var(--admin-space-sm) 0;
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-detail__row:last-child {
  border-bottom: none;
}
.admin-detail__row--full {
  grid-template-columns: 1fr;
}

.admin-detail__term {
  margin: 0;
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text-secondary);
}

.admin-detail__value {
  margin: 0;
  font-size: var(--admin-fs-body-lg);
  font-weight: 500;
  color: var(--admin-text);
}
.admin-detail__value a {
  color: var(--admin-primary);
  text-decoration: none;
  border-radius: var(--admin-radius-xs);
  padding: var(--admin-space-3xs) var(--admin-space-3xs);
  margin: calc(var(--admin-space-3xs) * -1);
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-detail__value a:hover {
  color: var(--admin-primary-hover);
  background: var(--admin-state-hover);
}
.admin-detail__value a:active {
  background: var(--admin-state-pressed);
}
.admin-detail__value a:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: 2px;
}
.admin-detail__value--block {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

.admin-site__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--admin-space);
  margin-top: var(--admin-space-lg);
}

.admin-site__card {
  display: flex;
  flex-direction: column;
  padding: var(--admin-space-lg) var(--admin-space-xl);
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--admin-border-light);
  transition: box-shadow var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-site__card:hover {
  box-shadow: var(--admin-elevation-2);
  background: var(--admin-white);
  border-color: var(--admin-border);
  transform: translateY(-1px);
}
.admin-site__card:active {
  transform: translateY(0);
  box-shadow: var(--admin-elevation-1);
}
.admin-site__card:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: var(--admin-focus-ring-offset);
}

.admin-site__card-icon {
  display: block;
  font-size: var(--admin-fs-menu);
  margin-bottom: var(--admin-space);
  opacity: 0.9;
  color: var(--admin-text);
}
.admin-site__card-icon i {
  font-size: inherit;
}

.admin-site__card-title {
  margin: 0;
  font-size: var(--admin-fs-menu);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.admin-site__card-desc {
  margin: var(--admin-space-sm) 0 0;
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text-secondary);
  line-height: 1.45;
  flex: 1;
}

/* 탭 네비게이션은 공용 컴포넌트로 이동: resources/scss/admin/components/_nav-tabs.scss
 * (view: admin.components.nav-tabs · 카탈로그: docs/03-constants/components.md) */
.admin-site-meta-aux {
  margin-top: var(--admin-space-xl);
  padding-top: var(--admin-space-lg);
  border-top: 1px solid var(--admin-border-light);
}

.admin-site-meta__robots-pre {
  padding: 12px;
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  white-space: pre-wrap;
  font-size: var(--admin-fs-xs);
}

/* =========================================================
 * Favicon 페이지 전용 UI (7종 카드 그리드 + 업로드 폼)
 * ========================================================= */
.admin-favicon {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}

/* -------- 상단 요약 -------- */
.admin-favicon__summary {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 280px);
  gap: var(--admin-space);
  align-items: center;
  padding: var(--admin-space);
  background: linear-gradient(135deg, var(--admin-grey-50) 0%, var(--admin-grey-100) 100%);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
}
@media (max-width: 768px) {
  .admin-favicon__summary {
    grid-template-columns: 1fr;
  }
}

.admin-favicon__title {
  margin: 0 0 var(--admin-space-3xs) 0;
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text);
}

.admin-favicon__desc {
  margin: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.5;
}
.admin-favicon__desc code {
  padding: 1px 5px;
  background: var(--admin-grey-200);
  border-radius: var(--admin-radius-xs);
  font-size: 0.9em;
}

.admin-favicon__summary-stats {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
}

.admin-favicon__progress {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--admin-grey-200);
  border-radius: var(--admin-radius-full);
  overflow: hidden;
}

.admin-favicon__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--admin-success) 0%, var(--admin-primary) 100%);
  border-radius: inherit;
  transition: width var(--admin-duration) var(--admin-ease);
}

.admin-favicon__progress-text {
  margin: 0;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
}
.admin-favicon__progress-text strong {
  color: var(--admin-text);
  font-size: var(--admin-fs-sm);
  font-weight: 700;
}

.admin-favicon__updated {
  margin: 0;
  font-size: 11px;
  color: var(--admin-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.admin-favicon__updated i {
  opacity: 0.7;
}

/* -------- 카드 그리드 (컴팩트) -------- */
.admin-favicon__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--admin-space-sm);
}

.admin-favicon__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-white);
  overflow: hidden;
  transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-favicon__card:hover {
  border-color: var(--admin-grey-400);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.admin-favicon__card--missing {
  background: var(--admin-grey-50);
  border-style: dashed;
}
.admin-favicon__card--present {
  border-color: rgba(var(--admin-success-rgb), 0.35);
}

.admin-favicon__card-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-grey-100);
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-favicon__preview-checker {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--admin-white);
  background-image: linear-gradient(45deg, var(--admin-grey-200) 25%, transparent 25%), linear-gradient(-45deg, var(--admin-grey-200) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--admin-grey-200) 75%), linear-gradient(-45deg, transparent 75%, var(--admin-grey-200) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

.admin-favicon__preview-img {
  max-width: 62%;
  max-height: 62%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}

.admin-favicon__preview-icon {
  font-size: 28px;
  color: var(--admin-grey-400);
}
.admin-favicon__card--present .admin-favicon__preview-icon {
  color: var(--admin-text-secondary);
}

.admin-favicon__status {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: var(--admin-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.admin-favicon__status--ok {
  background: var(--admin-success);
}
.admin-favicon__status--missing {
  background: var(--admin-grey-400);
}

.admin-favicon__card-body {
  padding: var(--admin-space-xs) var(--admin-space-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-favicon__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.admin-favicon__card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--admin-text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-favicon__card-size {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: var(--admin-radius-full);
  background: var(--admin-grey-200);
  font-size: 10px;
  font-weight: 600;
  color: var(--admin-text-secondary);
  letter-spacing: 0.2px;
}

.admin-favicon__card-purpose {
  margin: 0;
  font-size: 11px;
  color: var(--admin-text-secondary);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.admin-favicon__card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--admin-primary);
  text-decoration: none;
  font-weight: 500;
}
.admin-favicon__card-link:hover {
  text-decoration: underline;
}

/* -------- 업로드 폼 섹션 -------- */
.admin-favicon__form {
  margin: 0;
}

.admin-favicon__upload {
  padding: var(--admin-space);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
}

.admin-favicon__upload-head {
  margin-bottom: var(--admin-space-sm);
}

.admin-favicon__upload-title {
  margin: 0 0 var(--admin-space-3xs) 0;
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: var(--admin-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-favicon__upload-title i {
  color: var(--admin-primary);
}

.admin-favicon__upload-desc {
  margin: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.5;
}

/* =========================================================
 * 소셜 로그인 설정 페이지
 * ========================================================= */
.admin-social-provider {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: var(--admin-space-lg);
  background: var(--admin-white);
  margin-bottom: var(--admin-space);
}
.admin-social-provider:last-of-type {
  margin-bottom: 0;
}

.admin-social-provider__header {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space-sm);
}

.admin-social-provider__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  flex-shrink: 0;
}
.admin-social-provider__icon svg {
  display: block;
}

.admin-social-provider__title {
  margin: 0;
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text);
  flex: 1;
}

.admin-social-provider__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--admin-radius-full);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
}
.admin-social-provider__badge--on {
  background: rgba(var(--admin-success-rgb), 0.12);
  color: var(--admin-success);
}
.admin-social-provider__badge--off {
  background: var(--admin-grey-100);
  color: var(--admin-text-muted);
}

.admin-social-provider__callback {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-xs) var(--admin-space-sm);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  margin-bottom: var(--admin-space);
}

.admin-social-provider__callback-label {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-social-provider__callback-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--admin-fs-xs);
  color: var(--admin-primary);
  word-break: break-all;
  background: none;
  border: none;
  padding: 0;
}

/* =========================================================
 * 언어 설정 토글 리스트
 * ========================================================= */
.admin-form__locale-list {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  margin-top: var(--admin-space-sm);
}

.admin-form__locale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--admin-space-sm) var(--admin-space);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-white);
  transition: border-color var(--admin-duration) var(--admin-ease);
}
.admin-form__locale-row:hover {
  border-color: var(--admin-grey-400);
}

.admin-form__locale-info {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
}

.admin-form__locale-flag {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 15px;
}

.admin-form__locale-name {
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
}

.admin-form__hint-link {
  color: var(--admin-primary);
  text-decoration: underline;
  font-weight: 500;
}
.admin-form__hint-link:hover {
  color: var(--admin-primary-hover);
}

.admin-form__og-cache-hint {
  margin-top: 0.8rem;
}

.admin-locale {
  max-width: 720px;
}
.admin-locale__body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xl);
}

/* 언어 선택 드롭다운 wrapper */
.admin-locale-select-wrap {
  max-width: 32rem;
}
.admin-locale-select-wrap select {
  width: 100%;
}

/* 언어 추가 selectbox 하단 여백 */
.admin-locale__add-wrap {
  margin-bottom: var(--admin-space-xl);
}
.admin-locale__add-wrap--spaced {
  margin-top: var(--admin-space-2xl);
}

/* 활성 언어 리스트 row 간격·패딩 */
.admin-form__locale-list {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
  margin-top: var(--admin-space-lg);
}

.admin-form__locale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--admin-space-lg) var(--admin-space-xl);
  min-height: 5.6rem;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-white);
  transition: border-color var(--admin-duration) var(--admin-ease);
}
.admin-form__locale-row:hover {
  border-color: var(--admin-grey-400);
}

.admin-form__locale-info {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  flex: 1;
  min-width: 0;
}

/* 드래그 핸들 */
.admin-form__locale-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: var(--admin-space-xs);
  color: var(--admin-text-muted);
  cursor: grab;
  border-radius: var(--admin-radius-xs);
  transition: background-color var(--admin-duration-short) var(--admin-ease);
}
.admin-form__locale-handle:hover {
  background-color: var(--admin-grey-100);
  color: var(--admin-text-secondary);
}
.admin-form__locale-handle:active {
  cursor: grabbing;
}
.admin-form__locale-handle i {
  font-size: 1.4rem;
  pointer-events: none;
}

/* 토글 + 구분선 + 삭제버튼 묶음 */
.admin-form__locale-actions {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  flex-shrink: 0;
}

/* 토글과 삭제 버튼 사이 수직 구분선 */
.admin-locale__actions-divider {
  display: block;
  width: 1px;
  height: 2rem;
  background: var(--admin-border-light);
  flex-shrink: 0;
}

.admin-form__locale-row:hover .admin-locale__actions-divider {
  background: var(--admin-border);
}

.admin-locale__delete-form {
  display: inline-flex;
}

.locale-flag {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  background-image: image-set(url("/assets/images/intl-tel-input/flags.webp") 1x, url("/assets/images/intl-tel-input/flags@2x.webp") 2x);
  background-repeat: no-repeat;
  background-size: 4880px 15px;
}

.cs-option__label .locale-flag {
  vertical-align: middle;
  margin-right: var(--admin-space-xs);
  margin-top: -1px;
}

.cs-trigger__value .locale-flag {
  vertical-align: middle;
  margin-right: var(--admin-space-xs);
  margin-top: -1px;
}

.locale-flag--ac {
  background-position: 0px 0;
}

.locale-flag--ad {
  background-position: -20px 0;
}

.locale-flag--ae {
  background-position: -40px 0;
}

.locale-flag--af {
  background-position: -60px 0;
}

.locale-flag--ag {
  background-position: -80px 0;
}

.locale-flag--ai {
  background-position: -100px 0;
}

.locale-flag--al {
  background-position: -120px 0;
}

.locale-flag--am {
  background-position: -140px 0;
}

.locale-flag--ao {
  background-position: -160px 0;
}

.locale-flag--ar {
  background-position: -180px 0;
}

.locale-flag--as {
  background-position: -200px 0;
}

.locale-flag--at {
  background-position: -220px 0;
}

.locale-flag--au {
  background-position: -240px 0;
}

.locale-flag--aw {
  background-position: -260px 0;
}

.locale-flag--ax {
  background-position: -280px 0;
}

.locale-flag--az {
  background-position: -300px 0;
}

.locale-flag--ba {
  background-position: -320px 0;
}

.locale-flag--bb {
  background-position: -340px 0;
}

.locale-flag--bd {
  background-position: -360px 0;
}

.locale-flag--be {
  background-position: -380px 0;
}

.locale-flag--bf {
  background-position: -400px 0;
}

.locale-flag--bg {
  background-position: -420px 0;
}

.locale-flag--bh {
  background-position: -440px 0;
}

.locale-flag--bi {
  background-position: -460px 0;
}

.locale-flag--bj {
  background-position: -480px 0;
}

.locale-flag--bl {
  background-position: -500px 0;
}

.locale-flag--bm {
  background-position: -520px 0;
}

.locale-flag--bn {
  background-position: -540px 0;
}

.locale-flag--bo {
  background-position: -560px 0;
}

.locale-flag--bq {
  background-position: -580px 0;
}

.locale-flag--br {
  background-position: -600px 0;
}

.locale-flag--bs {
  background-position: -620px 0;
}

.locale-flag--bt {
  background-position: -640px 0;
}

.locale-flag--bw {
  background-position: -660px 0;
}

.locale-flag--by {
  background-position: -680px 0;
}

.locale-flag--bz {
  background-position: -700px 0;
}

.locale-flag--ca {
  background-position: -720px 0;
}

.locale-flag--cc {
  background-position: -740px 0;
}

.locale-flag--cd {
  background-position: -760px 0;
}

.locale-flag--cf {
  background-position: -780px 0;
}

.locale-flag--cg {
  background-position: -800px 0;
}

.locale-flag--ch {
  background-position: -820px 0;
}

.locale-flag--ci {
  background-position: -840px 0;
}

.locale-flag--ck {
  background-position: -860px 0;
}

.locale-flag--cl {
  background-position: -880px 0;
}

.locale-flag--cm {
  background-position: -900px 0;
}

.locale-flag--cn {
  background-position: -920px 0;
}

.locale-flag--co {
  background-position: -940px 0;
}

.locale-flag--cr {
  background-position: -960px 0;
}

.locale-flag--cu {
  background-position: -980px 0;
}

.locale-flag--cv {
  background-position: -1000px 0;
}

.locale-flag--cw {
  background-position: -1020px 0;
}

.locale-flag--cx {
  background-position: -1040px 0;
}

.locale-flag--cy {
  background-position: -1060px 0;
}

.locale-flag--cz {
  background-position: -1080px 0;
}

.locale-flag--de {
  background-position: -1100px 0;
}

.locale-flag--dj {
  background-position: -1120px 0;
}

.locale-flag--dk {
  background-position: -1140px 0;
}

.locale-flag--dm {
  background-position: -1160px 0;
}

.locale-flag--do {
  background-position: -1180px 0;
}

.locale-flag--dz {
  background-position: -1200px 0;
}

.locale-flag--ec {
  background-position: -1220px 0;
}

.locale-flag--ee {
  background-position: -1240px 0;
}

.locale-flag--eg {
  background-position: -1260px 0;
}

.locale-flag--eh {
  background-position: -1280px 0;
}

.locale-flag--er {
  background-position: -1300px 0;
}

.locale-flag--es {
  background-position: -1320px 0;
}

.locale-flag--et {
  background-position: -1340px 0;
}

.locale-flag--fi {
  background-position: -1360px 0;
}

.locale-flag--fj {
  background-position: -1380px 0;
}

.locale-flag--fk {
  background-position: -1400px 0;
}

.locale-flag--fm {
  background-position: -1420px 0;
}

.locale-flag--fo {
  background-position: -1440px 0;
}

.locale-flag--fr {
  background-position: -1460px 0;
}

.locale-flag--ga {
  background-position: -1480px 0;
}

.locale-flag--gb {
  background-position: -1500px 0;
}

.locale-flag--gd {
  background-position: -1520px 0;
}

.locale-flag--ge {
  background-position: -1540px 0;
}

.locale-flag--gf {
  background-position: -1560px 0;
}

.locale-flag--gg {
  background-position: -1580px 0;
}

.locale-flag--gh {
  background-position: -1600px 0;
}

.locale-flag--gi {
  background-position: -1620px 0;
}

.locale-flag--gl {
  background-position: -1640px 0;
}

.locale-flag--gm {
  background-position: -1660px 0;
}

.locale-flag--gn {
  background-position: -1680px 0;
}

.locale-flag--gp {
  background-position: -1700px 0;
}

.locale-flag--gq {
  background-position: -1720px 0;
}

.locale-flag--gr {
  background-position: -1740px 0;
}

.locale-flag--gt {
  background-position: -1760px 0;
}

.locale-flag--gu {
  background-position: -1780px 0;
}

.locale-flag--gw {
  background-position: -1800px 0;
}

.locale-flag--gy {
  background-position: -1820px 0;
}

.locale-flag--hk {
  background-position: -1840px 0;
}

.locale-flag--hn {
  background-position: -1860px 0;
}

.locale-flag--hr {
  background-position: -1880px 0;
}

.locale-flag--ht {
  background-position: -1900px 0;
}

.locale-flag--hu {
  background-position: -1920px 0;
}

.locale-flag--id {
  background-position: -1940px 0;
}

.locale-flag--ie {
  background-position: -1960px 0;
}

.locale-flag--il {
  background-position: -1980px 0;
}

.locale-flag--im {
  background-position: -2000px 0;
}

.locale-flag--in {
  background-position: -2020px 0;
}

.locale-flag--io {
  background-position: -2040px 0;
}

.locale-flag--iq {
  background-position: -2060px 0;
}

.locale-flag--ir {
  background-position: -2080px 0;
}

.locale-flag--is {
  background-position: -2100px 0;
}

.locale-flag--it {
  background-position: -2120px 0;
}

.locale-flag--je {
  background-position: -2140px 0;
}

.locale-flag--jm {
  background-position: -2160px 0;
}

.locale-flag--jo {
  background-position: -2180px 0;
}

.locale-flag--jp {
  background-position: -2200px 0;
}

.locale-flag--ke {
  background-position: -2220px 0;
}

.locale-flag--kg {
  background-position: -2240px 0;
}

.locale-flag--kh {
  background-position: -2260px 0;
}

.locale-flag--ki {
  background-position: -2280px 0;
}

.locale-flag--km {
  background-position: -2300px 0;
}

.locale-flag--kn {
  background-position: -2320px 0;
}

.locale-flag--kp {
  background-position: -2340px 0;
}

.locale-flag--kr {
  background-position: -2360px 0;
}

.locale-flag--kw {
  background-position: -2380px 0;
}

.locale-flag--ky {
  background-position: -2400px 0;
}

.locale-flag--kz {
  background-position: -2420px 0;
}

.locale-flag--la {
  background-position: -2440px 0;
}

.locale-flag--lb {
  background-position: -2460px 0;
}

.locale-flag--lc {
  background-position: -2480px 0;
}

.locale-flag--li {
  background-position: -2500px 0;
}

.locale-flag--lk {
  background-position: -2520px 0;
}

.locale-flag--lr {
  background-position: -2540px 0;
}

.locale-flag--ls {
  background-position: -2560px 0;
}

.locale-flag--lt {
  background-position: -2580px 0;
}

.locale-flag--lu {
  background-position: -2600px 0;
}

.locale-flag--lv {
  background-position: -2620px 0;
}

.locale-flag--ly {
  background-position: -2640px 0;
}

.locale-flag--ma {
  background-position: -2660px 0;
}

.locale-flag--mc {
  background-position: -2680px 0;
}

.locale-flag--md {
  background-position: -2700px 0;
}

.locale-flag--me {
  background-position: -2720px 0;
}

.locale-flag--mf {
  background-position: -2740px 0;
}

.locale-flag--mg {
  background-position: -2760px 0;
}

.locale-flag--mh {
  background-position: -2780px 0;
}

.locale-flag--mk {
  background-position: -2800px 0;
}

.locale-flag--ml {
  background-position: -2820px 0;
}

.locale-flag--mm {
  background-position: -2840px 0;
}

.locale-flag--mn {
  background-position: -2860px 0;
}

.locale-flag--mo {
  background-position: -2880px 0;
}

.locale-flag--mp {
  background-position: -2900px 0;
}

.locale-flag--mq {
  background-position: -2920px 0;
}

.locale-flag--mr {
  background-position: -2940px 0;
}

.locale-flag--ms {
  background-position: -2960px 0;
}

.locale-flag--mt {
  background-position: -2980px 0;
}

.locale-flag--mu {
  background-position: -3000px 0;
}

.locale-flag--mv {
  background-position: -3020px 0;
}

.locale-flag--mw {
  background-position: -3040px 0;
}

.locale-flag--mx {
  background-position: -3060px 0;
}

.locale-flag--my {
  background-position: -3080px 0;
}

.locale-flag--mz {
  background-position: -3100px 0;
}

.locale-flag--na {
  background-position: -3120px 0;
}

.locale-flag--nc {
  background-position: -3140px 0;
}

.locale-flag--ne {
  background-position: -3160px 0;
}

.locale-flag--nf {
  background-position: -3180px 0;
}

.locale-flag--ng {
  background-position: -3200px 0;
}

.locale-flag--ni {
  background-position: -3220px 0;
}

.locale-flag--nl {
  background-position: -3240px 0;
}

.locale-flag--no {
  background-position: -3260px 0;
}

.locale-flag--np {
  background-position: -3280px 0;
}

.locale-flag--nr {
  background-position: -3300px 0;
}

.locale-flag--nu {
  background-position: -3320px 0;
}

.locale-flag--nz {
  background-position: -3340px 0;
}

.locale-flag--om {
  background-position: -3360px 0;
}

.locale-flag--pa {
  background-position: -3380px 0;
}

.locale-flag--pe {
  background-position: -3400px 0;
}

.locale-flag--pf {
  background-position: -3420px 0;
}

.locale-flag--pg {
  background-position: -3440px 0;
}

.locale-flag--ph {
  background-position: -3460px 0;
}

.locale-flag--pk {
  background-position: -3480px 0;
}

.locale-flag--pl {
  background-position: -3500px 0;
}

.locale-flag--pm {
  background-position: -3520px 0;
}

.locale-flag--pr {
  background-position: -3540px 0;
}

.locale-flag--ps {
  background-position: -3560px 0;
}

.locale-flag--pt {
  background-position: -3580px 0;
}

.locale-flag--pw {
  background-position: -3600px 0;
}

.locale-flag--py {
  background-position: -3620px 0;
}

.locale-flag--qa {
  background-position: -3640px 0;
}

.locale-flag--re {
  background-position: -3660px 0;
}

.locale-flag--ro {
  background-position: -3680px 0;
}

.locale-flag--rs {
  background-position: -3700px 0;
}

.locale-flag--ru {
  background-position: -3720px 0;
}

.locale-flag--rw {
  background-position: -3740px 0;
}

.locale-flag--sa {
  background-position: -3760px 0;
}

.locale-flag--sb {
  background-position: -3780px 0;
}

.locale-flag--sc {
  background-position: -3800px 0;
}

.locale-flag--sd {
  background-position: -3820px 0;
}

.locale-flag--se {
  background-position: -3840px 0;
}

.locale-flag--sg {
  background-position: -3860px 0;
}

.locale-flag--sh {
  background-position: -3880px 0;
}

.locale-flag--si {
  background-position: -3900px 0;
}

.locale-flag--sj {
  background-position: -3920px 0;
}

.locale-flag--sk {
  background-position: -3940px 0;
}

.locale-flag--sl {
  background-position: -3960px 0;
}

.locale-flag--sm {
  background-position: -3980px 0;
}

.locale-flag--sn {
  background-position: -4000px 0;
}

.locale-flag--so {
  background-position: -4020px 0;
}

.locale-flag--sr {
  background-position: -4040px 0;
}

.locale-flag--ss {
  background-position: -4060px 0;
}

.locale-flag--st {
  background-position: -4080px 0;
}

.locale-flag--sv {
  background-position: -4100px 0;
}

.locale-flag--sx {
  background-position: -4120px 0;
}

.locale-flag--sy {
  background-position: -4140px 0;
}

.locale-flag--sz {
  background-position: -4160px 0;
}

.locale-flag--tc {
  background-position: -4180px 0;
}

.locale-flag--td {
  background-position: -4200px 0;
}

.locale-flag--tg {
  background-position: -4220px 0;
}

.locale-flag--th {
  background-position: -4240px 0;
}

.locale-flag--tj {
  background-position: -4260px 0;
}

.locale-flag--tk {
  background-position: -4280px 0;
}

.locale-flag--tl {
  background-position: -4300px 0;
}

.locale-flag--tm {
  background-position: -4320px 0;
}

.locale-flag--tn {
  background-position: -4340px 0;
}

.locale-flag--to {
  background-position: -4360px 0;
}

.locale-flag--tr {
  background-position: -4380px 0;
}

.locale-flag--tt {
  background-position: -4400px 0;
}

.locale-flag--tv {
  background-position: -4420px 0;
}

.locale-flag--tw {
  background-position: -4440px 0;
}

.locale-flag--tz {
  background-position: -4460px 0;
}

.locale-flag--ua {
  background-position: -4480px 0;
}

.locale-flag--ug {
  background-position: -4500px 0;
}

.locale-flag--us {
  background-position: -4520px 0;
}

.locale-flag--uy {
  background-position: -4540px 0;
}

.locale-flag--uz {
  background-position: -4560px 0;
}

.locale-flag--va {
  background-position: -4580px 0;
}

.locale-flag--vc {
  background-position: -4600px 0;
}

.locale-flag--ve {
  background-position: -4620px 0;
}

.locale-flag--vg {
  background-position: -4640px 0;
}

.locale-flag--vi {
  background-position: -4660px 0;
}

.locale-flag--vn {
  background-position: -4680px 0;
}

.locale-flag--vu {
  background-position: -4700px 0;
}

.locale-flag--wf {
  background-position: -4720px 0;
}

.locale-flag--ws {
  background-position: -4740px 0;
}

.locale-flag--xk {
  background-position: -4760px 0;
}

.locale-flag--ye {
  background-position: -4780px 0;
}

.locale-flag--yt {
  background-position: -4800px 0;
}

.locale-flag--za {
  background-position: -4820px 0;
}

.locale-flag--zm {
  background-position: -4840px 0;
}

.locale-flag--zw {
  background-position: -4860px 0;
}

/* =========================================================
 * 프로젝트 변수 문서 편집기  (view: admin.pages.project-docs.edit)
 * 세로 스택 레이아웃:
 *   ① 메타데이터 카드 (프런트매터 필드별 입력)
 *   ② 본문 카드 (마크다운 textarea, 풀-와이드)
 *   ③ 미리보기 카드 (메타박스 + 본문 렌더, 풀-와이드)
 * 탭은 공용 컴포넌트(.admin-nav-tabs), 버튼은 .admin-form__actions 재사용 — 여기엔 페이지 고유 레이아웃만.
 * ========================================================= */
.admin-project-docs__filemeta {
  margin: var(--admin-space-2xs) 0 var(--admin-space);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-project-docs__filemeta code {
  padding: 1px 5px;
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
}
.admin-project-docs__form {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}
.admin-project-docs {
  /* --- 카드 (메타·본문·미리보기 공통 컨테이너) ---------------------------- */
}
.admin-project-docs__card {
  box-sizing: border-box;
  padding: var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-project-docs__card + .admin-project-docs__card {
  margin-top: 0;
}
.admin-project-docs__card--preview {
  background: var(--admin-grey-50);
}
.admin-project-docs__card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--admin-space);
  padding-bottom: var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-project-docs__card-title {
  margin: 0;
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-text);
  letter-spacing: -0.01em;
}
.admin-project-docs__card-desc {
  margin: 0;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-project-docs {
  /* --- 메타 카드 내부 grid (2열, 작은 화면에서 1열) ----------------------- */
}
.admin-project-docs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-space) var(--admin-space-lg);
}
@media (max-width: 1024px) {
  .admin-project-docs__grid {
    grid-template-columns: 1fr;
  }
}
.admin-project-docs__grid-row {
  min-width: 0;
}
.admin-project-docs__grid-row--full {
  grid-column: 1/-1;
}
.admin-project-docs__grid-row .admin-form__block {
  margin: 0;
}
.admin-project-docs {
  /* --- 본문 textarea ---------------------------------------------------- */
}
.admin-project-docs__textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: max(var(--admin-size-editor-min-height), 60vh);
  font-family: 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.project-sync.edit)
 * 세로 스택 카드 레이아웃:
 *   ① API 키 카드 (Anthropic 키 입력)
 *   ② 본 입력 카드 (자유 텍스트 → 5개 정본 문서 갱신)
 *   ③ 최근 백업 카드 (있을 때만, 되돌리기 버튼)
 * project-docs 의 카드 톤을 그대로 따른다 — 동일 그룹(insight/docs).
 * ========================================================= */
.admin-project-sync {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}
.admin-project-sync__card {
  box-sizing: border-box;
  padding: var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-project-sync__card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--admin-space);
  padding-bottom: var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-project-sync__card-title {
  margin: 0;
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-text);
  letter-spacing: -0.01em;
}
.admin-project-sync__card-desc {
  margin: 0;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  line-height: 1.6;
}
.admin-project-sync__card-desc strong {
  color: var(--admin-text);
}
.admin-project-sync__card-desc a {
  color: var(--admin-primary);
  text-decoration: underline;
  text-decoration-color: rgba(var(--admin-primary-rgb), 0.35);
  text-underline-offset: 2px;
}
.admin-project-sync__card-desc a:hover {
  text-decoration-color: var(--admin-primary);
}
.admin-project-sync {
  /* code 칩 (백업 디렉터리명 등) */
}
.admin-project-sync code {
  padding: 1px 6px;
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 0.92em;
  color: var(--admin-text);
}
.admin-project-sync {
  /* 본 입력 textarea — 자유 텍스트라 mono 폰트는 부담스러움. 본문 폰트 유지 + 적당한 높이. */
}
.admin-project-sync .admin-form__textarea {
  min-height: 28rem;
  line-height: 1.7;
}

/* =========================================================
 * 문서 라이브러리 (view: admin.pages.library.index / .show)
 * 21st.dev 스타일 — 좌 카테고리 사이드바(체크박스형 다중 선택) + 우 2열 카드 그리드.
 * 필터링은 클라이언트(TS) 가 비동기로 — 카테고리 토글·검색 시 새로고침 없음.
 * ========================================================= */
.admin-library__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--admin-space-xl, 32px);
  align-items: start;
  margin-top: var(--admin-space-lg);
}
@media (max-width: 1024px) {
  .admin-library__layout {
    grid-template-columns: 1fr;
    gap: var(--admin-space);
  }
}
.admin-library {
  /* ----------------------------------------------- 사이드바 ----- */
}
.admin-library__sidebar {
  position: sticky;
  top: var(--admin-space);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg);
}
@media (max-width: 1024px) {
  .admin-library__sidebar {
    position: static;
  }
}
.admin-library__sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}
.admin-library__sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--admin-space-2xs);
}
.admin-library__sidebar-title {
  margin: 0;
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
}
.admin-library__sidebar-clear {
  appearance: none;
  background: none;
  border: 0;
  padding: 2px 6px;
  border-radius: var(--admin-radius-sm);
  font-size: var(--admin-fs-xs);
  color: var(--admin-primary);
  cursor: pointer;
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-library__sidebar-clear:hover {
  background: rgba(59, 130, 246, 0.08);
}
.admin-library__sidebar-clear.is-hidden {
  display: none;
}
.admin-library__sidebar-hint {
  margin: var(--admin-space-xs) 0 0;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  line-height: 1.5;
}
.admin-library__cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-library__cat {
  appearance: none;
  background: none;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text);
  text-align: left;
  font-size: var(--admin-fs-sm);
  line-height: 1.3;
  cursor: pointer;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-library__cat:hover:not(:disabled) {
  background: var(--admin-grey-50);
}
.admin-library__cat {
  /* active 가 base hover 보다 우선되도록 specificity 를 :not(:disabled) 까지 맞춤 */
}
.admin-library__cat--active, .admin-library__cat--active:hover:not(:disabled), .admin-library__cat--active:focus-visible {
  background: var(--admin-grey-900);
  color: var(--admin-white);
}
.admin-library__cat--empty {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-library__cat:disabled {
  cursor: not-allowed;
}
.admin-library__cat-check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--admin-border);
  border-radius: 5px;
  background: var(--admin-card-bg);
  font-size: 10px;
  color: transparent;
  transition: background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-library__cat--active .admin-library__cat-check {
  background: var(--admin-white);
  border-color: var(--admin-white);
  color: var(--admin-grey-900);
}
.admin-library__cat-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.admin-library__cat-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--admin-fs-xs);
  opacity: 0.6;
}
.admin-library {
  /* ----------------------------------------------- 메인 ----- */
}
.admin-library__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}
.admin-library__searchbar {
  display: flex;
  gap: var(--admin-space);
  align-items: center;
  flex-wrap: wrap;
}
.admin-library__search {
  position: relative;
  flex: 1;
  min-width: 280px;
}
.admin-library__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-sm);
  pointer-events: none;
}
.admin-library__search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 40px;
  border: 1px solid var(--admin-border-light);
  border-radius: 10px;
  background: var(--admin-card-bg);
  color: var(--admin-text);
  font-size: var(--admin-fs-body);
  line-height: 1.4;
  transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-library__search-input::placeholder {
  color: var(--admin-text-muted);
}
.admin-library__search-input:focus {
  outline: none;
  border-color: var(--admin-grey-900);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.admin-library__search-clear {
  appearance: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-library__search-clear:hover {
  background: var(--admin-grey-100);
  color: var(--admin-text);
}
.admin-library__search-clear.is-hidden {
  display: none;
}
.admin-library__searchbar-meta {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  font-variant-numeric: tabular-nums;
}
.admin-library__searchbar-meta strong {
  color: var(--admin-text);
  font-weight: 700;
}
.admin-library__activefilters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-library__activefilters.is-hidden {
  display: none;
}
.admin-library__chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--admin-grey-900);
  color: var(--admin-white);
  border: 0;
  font-size: var(--admin-fs-xs);
  cursor: pointer;
  transition: opacity var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-library__chip:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.admin-library__chip strong {
  font-weight: 600;
}
.admin-library__chip i {
  font-size: 10px;
  opacity: 0.7;
}
.admin-library__empty {
  padding: calc(var(--admin-space-lg) * 2.5) var(--admin-space);
  text-align: center;
  color: var(--admin-text-secondary);
  background: var(--admin-card-bg);
  border: 1px dashed var(--admin-border-light);
  border-radius: var(--admin-radius);
}
.admin-library__empty.is-hidden {
  display: none;
}
.admin-library {
  /* ----------------------------------------------- 카드 그리드 (2열) ----- */
}
.admin-library__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-space);
}
@media (max-width: 768px) {
  .admin-library__grid {
    grid-template-columns: 1fr;
  }
}
.admin-library__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--admin-card-bg);
  border-radius: 14px;
  border: 1px solid var(--admin-border-light);
  overflow: hidden;
  transition: box-shadow var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-library__card:hover {
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
  border-color: var(--admin-grey-300, #d1d5db);
  transform: translateY(-2px);
}
.admin-library__card:hover .admin-library__card-cta {
  color: var(--admin-text);
  opacity: 1;
  transform: translateX(2px);
}
.admin-library__card[hidden] {
  display: none;
}
.admin-library__card-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 18px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-height: 200px;
}
.admin-library__card-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-library__card-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.admin-library__card-cats li {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.admin-library__card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--admin-text);
  letter-spacing: -0.01em;
}
.admin-library__card-desc {
  margin: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.admin-library__card-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--admin-grey-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--admin-space-xs);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-library__card-rel {
  font-family: 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-crumb {
  margin: 0 0 var(--admin-space-2xs);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-library--show .admin-library__detail-crumb .admin-breadcrumb__link {
  color: inherit;
  text-decoration: none;
}
.admin-library--show .admin-library__detail-crumb .admin-breadcrumb__link:hover {
  color: var(--admin-text);
}
.admin-library--show .admin-library__detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--admin-space-lg);
  align-items: start;
  margin-top: var(--admin-space);
}
@media (max-width: 1024px) {
  .admin-library--show .admin-library__detail-layout {
    grid-template-columns: 1fr;
  }
}
.admin-library--show .admin-library__detail-body {
  box-sizing: border-box;
  padding: var(--admin-space-lg) var(--admin-space-xl, 32px);
  border: 1px solid var(--admin-border-light);
  border-radius: 12px;
  background: var(--admin-card-bg);
  color: var(--admin-text);
  font-size: var(--admin-fs-body);
  line-height: 1.7;
  word-break: break-word;
  min-height: 60vh;
}
.admin-library--show .admin-library__detail-body > :first-child {
  margin-top: 0;
}
.admin-library--show .admin-library__detail-body h1, .admin-library--show .admin-library__detail-body h2, .admin-library--show .admin-library__detail-body h3, .admin-library--show .admin-library__detail-body h4, .admin-library--show .admin-library__detail-body h5, .admin-library--show .admin-library__detail-body h6 {
  margin: 1.3em 0 0.5em;
  line-height: 1.3;
}
.admin-library--show .admin-library__detail-body h1 {
  font-size: 1.5em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-library--show .admin-library__detail-body h2 {
  font-size: 1.28em;
  padding-bottom: 0.15em;
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-library--show .admin-library__detail-body h3 {
  font-size: 1.12em;
}
.admin-library--show .admin-library__detail-body p {
  margin: 0.6em 0;
}
.admin-library--show .admin-library__detail-body a {
  color: var(--admin-primary);
}
.admin-library--show .admin-library__detail-body code {
  padding: 1px 5px;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-sm);
  font-family: 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: 1024px) {
  .admin-library--show .admin-library__detail-meta {
    position: static;
  }
}
.admin-library--show .admin-library__meta-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-library--show .admin-library__meta-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--admin-space);
}
.admin-library--show .admin-library__meta-list dt {
  color: var(--admin-text-muted);
  margin: 0;
  font-size: var(--admin-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-library--show .admin-library__meta-list dd {
  margin: 0;
  color: var(--admin-text);
  text-align: right;
}
.admin-library--show .admin-library__meta-list dd a {
  color: var(--admin-primary);
  text-decoration: none;
}
.admin-library--show .admin-library__meta-list dd span {
  margin: 0 4px;
  color: var(--admin-text-muted);
}
.admin-library--show .admin-library__meta-list dd code {
  font-family: 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: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  overflow: hidden;
  padding: var(--admin-space);
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
}
.admin-work-sections__card--off {
  opacity: 0.7;
  background: var(--admin-grey-50);
}
.admin-work-sections__card--orphan {
  border-color: var(--admin-danger, #b91c1c);
  background: rgba(185, 28, 28, 0.04);
}

.admin-work-sections__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-2xs);
}

.admin-work-sections__slug code {
  background: var(--admin-grey-100);
  padding: 2px 6px;
  border-radius: var(--admin-radius-xs);
  font-size: 12px;
}

.admin-work-sections__badge {
  padding: 2px 8px;
  border-radius: var(--admin-radius-full);
  font-size: 11px;
  font-weight: 600;
}
.admin-work-sections__badge--ok {
  background: var(--admin-success);
  color: var(--admin-on-success, #fff);
}
.admin-work-sections__badge--off {
  background: var(--admin-grey-400);
  color: var(--admin-text-inverse, #fff);
}
.admin-work-sections__badge--info {
  background: var(--admin-grey-200);
  color: var(--admin-text);
}
.admin-work-sections__badge--warn {
  background: var(--admin-danger, #b91c1c);
  color: var(--admin-on-error, #fff);
}

.admin-work-sections__title {
  margin: 0;
  font-size: var(--admin-fs-body);
  font-weight: 700;
}

.admin-work-sections__desc {
  margin: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}

.admin-work-sections__fields summary {
  cursor: pointer;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm);
}

.admin-work-sections__fields ul {
  list-style: none;
  padding-left: 0;
  margin: var(--admin-space-2xs) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-work-sections__fields ul li {
  font-size: 12px;
}
.admin-work-sections__fields ul code {
  margin-right: 6px;
}

.admin-work-sections__ft {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--admin-radius-xs);
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  font-size: 10px;
  margin-right: 4px;
}

.admin-work-sections__req {
  color: var(--admin-danger, #b91c1c);
}

.admin-work-sections__actions {
  display: flex;
  gap: var(--admin-space-2xs);
  margin-top: auto;
}

/* Template blocks builder */
.admin-work-blocks {
  margin-top: var(--admin-space-lg);
}

.admin-work-blocks__head {
  margin-bottom: var(--admin-section-action-gap);
}

.admin-work-blocks__palette {
  border: 1px dashed var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: var(--admin-space);
  margin-bottom: var(--admin-space);
}

.admin-work-blocks__palette-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-work-blocks__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
}

.admin-work-blocks__palette-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  text-align: left;
}
.admin-work-blocks__palette-btn i:first-child {
  opacity: 0.85;
  font-size: 14px;
}

.admin-work-blocks__palette-slug {
  opacity: 0.65;
  font-weight: 400;
  margin-left: 2px;
}

.admin-work-blocks__item {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  padding: var(--admin-space);
}

.admin-work-blocks__item-head {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-2xs);
  margin-bottom: var(--admin-space-sm);
  flex-wrap: wrap;
}

.admin-work-blocks__drag {
  flex-shrink: 0;
  margin-top: 2px;
  border: none;
  background: transparent;
  padding: 0;
}

.admin-work-blocks__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--admin-radius-xs);
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  font-size: 14px;
}

.admin-work-blocks__meta {
  flex: 1;
  min-width: 140px;
}

.admin-work-blocks__label {
  display: block;
  font-size: var(--admin-fs-body);
}

.admin-work-blocks__desc {
  margin: 4px 0 0 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.4;
}

.admin-work-blocks__slug {
  padding: 2px 6px;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  font-size: 11px;
  align-self: center;
}

.admin-work-blocks__item-body {
  padding-top: var(--admin-space-2xs);
  border-top: 1px solid var(--admin-border-light);
}

.admin-work-blocks__advanced-sum {
  cursor: pointer;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-secondary);
}

.admin-work-blocks__advanced-body {
  margin-top: var(--admin-space-sm);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--admin-space);
}

/* Work template editor: 메인 + 우측 미리보기 */
.admin-work-templates-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-space-lg);
  align-items: start;
  margin-top: var(--admin-space-lg);
}
@media (max-width: 1320px) {
  .admin-work-templates-layout {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
 * Canvas route: ㅍ 형태 (상단 툴바 + 좌 구조 + 우 캔버스)
 * ========================================================= */
.admin-work-templates--canvas .admin-page__header,
.admin-work-templates--canvas .admin-page__toolbar {
  display: none;
}

/* 레이아웃 .admin__content 기본 max-width:1200px — 캔버스는 1280까지 사용 */
.admin__content:has(> .admin-work-templates--canvas.is-canvas-only),
.admin__content:has(> .admin-work.admin-work--canvas) {
  max-width: 1280px;
}

/* Work 캔버스와 동일 톤: 캔버스 미리보기는 외곽 박스(패널) 느낌 제거 */
.admin-work-templates--canvas .admin-work-templates__preview--canvas {
  border: 0;
  background: transparent;
  padding: 0;
  max-height: none;
  overflow: visible;
}

.admin-work-template-canvas {
  height: calc(100vh - var(--admin-space) * 2);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--admin-space);
}

.admin-work-template-canvas__toolbar {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--admin-space-sm);
  align-items: stretch;
  padding: var(--admin-space-sm);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  position: sticky;
  top: var(--admin-space);
  z-index: 2;
}

.admin-work-template-canvas__toolbar-title {
  min-width: 0;
}

.admin-work-template-canvas__toolbar-blocks {
  min-width: 0;
}

.admin-work-template-canvas__toolbar-blocks--work {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-work-template-canvas__add-label {
  margin: 0;
  font-size: 12px;
}

.admin-work-template-canvas__add-select {
  max-width: 280px;
  min-width: 160px;
}

.admin-work-template-canvas__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Canvas: force-save loading state */
.admin-work--canvas [data-work-canvas-force-save].is-loading {
  opacity: 0.85;
  cursor: progress;
}

.admin-work-template-canvas__title {
  font-size: var(--admin-fs-body);
  font-weight: 800;
  margin: 0;
  display: block;
}

.admin-work-template-canvas__desc {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--admin-text-muted);
  line-height: 1.4;
}

/* 템플릿 캔버스: 블록 팔레트 Swiper (가로 스크롤 대신 화살표) */
.admin-work-blocks-palette__swiper-host {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-work-blocks-palette-swiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.admin-work-blocks-palette__slide {
  width: auto;
  height: auto;
  padding: 2px 4px;
  box-sizing: border-box;
}

.admin-work-blocks-palette__slide .admin-work-blocks__palette-btn {
  white-space: nowrap;
}

.admin-work-blocks-palette__nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--admin-radius-xs);
  border: 1px solid var(--admin-border-light);
  background: var(--admin-white);
  color: var(--admin-text-secondary);
  cursor: pointer;
  transition: background var(--tran-15, 0.15s), border-color var(--tran-15, 0.15s), color var(--tran-15, 0.15s);
}
.admin-work-blocks-palette__nav:hover:not(.swiper-button-disabled) {
  border-color: rgba(99, 102, 241, 0.45);
  color: rgb(67, 56, 202);
  background: rgba(99, 102, 241, 0.06);
}
.admin-work-blocks-palette__nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.admin-work-blocks-palette__nav i {
  font-size: 12px;
}

.admin-work-template-canvas__body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: var(--admin-space);
  align-items: stretch;
}

.admin-work-templates--canvas.is-canvas-only .admin-work-template-canvas__body {
  grid-template-columns: 1fr;
}
.admin-work-templates--canvas.is-canvas-only .admin-work-template-canvas__structure {
  display: none;
}

.admin-work-template-canvas__structure {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  padding: var(--admin-space);
}

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

.admin-work-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: 1320px) {
  .admin-work-templates__preview {
    position: sticky;
    top: var(--admin-space);
    max-height: calc(100vh - var(--admin-space) * 3);
    overflow: auto;
  }
}

.admin-work-templates__preview-box {
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.admin-work-templates__canvas-form {
  flex: 1;
  min-height: 420px;
}

.admin-work-templates__preview-cms-body {
  min-height: 420px;
}

.admin-work-templates__preview-head {
  margin-bottom: var(--admin-space-sm);
}

.admin-work-templates__preview-title {
  margin: 0 0 var(--admin-space-3xs);
  font-size: var(--admin-fs-body);
  font-weight: 700;
}

.admin-work-templates__preview-hint {
  margin: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  line-height: 1.45;
}

.admin-work-templates__preview-actions {
  margin: var(--admin-space-sm) 0 0;
}

.admin-work-templates__canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50, #fafafa);
}

.admin-work-templates__canvas-form {
  display: block;
}

.admin-work-templates__preview-tabs {
  margin-top: var(--admin-space-sm);
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-work-templates__preview-tab {
  appearance: none;
  border: 1px solid var(--admin-border-light);
  background: var(--admin-white);
  color: var(--admin-text-secondary);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.admin-work-templates__preview-tab.is-active {
  background: var(--admin-grey-100);
  color: var(--admin-text);
}

.admin-work-templates__preview-tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-work-templates__preview-box {
  position: relative;
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  min-height: 120px;
}

.admin-work-templates__preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-2xs);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  background: rgba(255, 255, 255, 0.85);
  z-index: 1;
}

.admin-work-templates__preview-body {
  padding: var(--admin-space-sm);
}

.admin-work-templates__preview-cms-body {
  padding: var(--admin-space-sm);
}

/* Canvas: section labeling + handle (match blocks list tone) */
.admin-cms-block {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  overflow: hidden;
  margin-bottom: var(--admin-space);
}

/* Canvas performance: skip offscreen render work */
.admin-work--canvas .admin-work-templates-cms-preview .admin-cms-block {
  content-visibility: auto;
  contain: layout paint style;
  /* approximate block height to prevent scroll jumps */
  contain-intrinsic-size: 900px;
}

.admin-cms-block__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50, #fafafa);
}

.admin-cms-block__drag {
  border: none;
  background: transparent;
  padding: 0;
  cursor: grab;
  color: var(--admin-text-secondary);
}

.admin-cms-block__move {
  display: inline-flex;
  gap: 4px;
}

.admin-cms-block__move-btn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--admin-border-light);
  background: var(--admin-white);
  color: var(--admin-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.admin-cms-block__move-btn:disabled,
.admin-cms-block__move-btn[aria-disabled=true] {
  opacity: 0.4;
  cursor: not-allowed;
}

.admin-cms-block__move-btn:hover:not(:disabled) {
  background: var(--admin-grey-100);
}

.admin-cms-block__label {
  font-size: 13px;
  font-weight: 800;
}

.admin-cms-block__slug {
  margin-left: auto;
  padding: 2px 6px;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  font-size: 11px;
}

.admin-cms-block__badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  color: rgb(67, 56, 202);
  font-size: 11px;
  font-weight: 700;
}

.admin-cms-block__body {
  padding: 12px;
}

/* 블록 미리보기 위 "이미지 채우기" 라디오 (cover / contain) */
.admin-cms-block__fit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 6px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-grey-50, #fafafa);
  font-size: 12px;
}

.admin-cms-block__fit-label {
  font-weight: 700;
  color: var(--admin-text-secondary);
}

/* 옵션은 공통 라디오 컴포넌트(.admin-radio-wrap) 사용 — components/_ui.scss */
.admin-cms-block__fit-bar .admin-radio-wrap {
  font-size: 12px;
}

/* CMS 캔버스: 섹션별 인라인 색상 선택기 (예: split_brand_media_text·media_dual_row 배경)
   — 위젯 자체 스타일은 components/_color-picker-field.scss(.admin-cpf) */
.admin-cms-block-color {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--admin-space);
  padding: 10px 12px;
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50, #fafafa);
  /* .no-blocks-showcase--cms-preview 가 흰 글자색을 상속시키므로 명시적으로 되돌림 */
  color: var(--admin-text);
}

.admin-cms-block-color__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--admin-text-secondary);
  padding-top: 6px;
}

.admin-cms-block-color__value {
  margin-left: auto;
  align-self: flex-start;
  padding: 2px 6px;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  font-size: 11px;
}

/* 카드 N개 섹션: 카드별 색상 컨트롤을 2열 그리드(아래 카드 입력란과 동일 리듬)로 */
.admin-cms-block-color-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px 12px;
  background: var(--admin-grey-50, #fafafa);
  border-bottom: 1px solid var(--admin-border-light);
}
@media (max-width: 544px) {
  .admin-cms-block-color-grid {
    grid-template-columns: 1fr;
  }
}

.admin-cms-block-color-grid__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-white, #fff);
  overflow: hidden;
}

.admin-cms-block-color-grid .admin-cms-block-color {
  flex: 1;
  background: transparent;
}

.admin-cms-block-color-grid__card .admin-cms-block-color:last-child {
  border-bottom: 0;
}

.admin-work-templates-cms-preview [data-field-key] {
  outline: 1px dashed rgba(99, 102, 241, 0.35);
  outline-offset: 2px;
  border-radius: 4px;
  cursor: text;
}

.admin-work-templates-cms-preview [data-field-type=text],
.admin-work-templates-cms-preview [data-field-type=richtext],
.admin-work-templates-cms-preview [data-field-type=json] {
  background: rgba(99, 102, 241, 0.06);
  padding: 2px 4px;
  border-radius: 4px;
  caret-color: #0f172a;
}

.admin-work-templates-cms-preview .is-cms-editing {
  outline: 2px solid rgba(99, 102, 241, 0.65);
  background: rgba(99, 102, 241, 0.1);
}

.admin-work-templates-cms-preview [data-field-type=text]:empty::before,
.admin-work-templates-cms-preview [data-field-type=richtext]:empty::before {
  content: "텍스트 입력";
  opacity: 0.45;
}

.admin-work-templates-cms-preview [data-field-key][data-cms-placeholder]:empty::before {
  content: attr(data-cms-placeholder);
}

/* :empty 가 아닌데 내용은 비어 보일 때(줄바꿈·제로폭 문자 등) — TS 가 data-cms-empty 설정 */
.admin-work-templates-cms-preview [data-field-key][data-cms-placeholder][data-cms-empty="1"]:not(:focus-within)::before {
  content: attr(data-cms-placeholder);
  opacity: 0.45;
  pointer-events: none;
}

.admin-work-templates-cms-preview [data-field-type=text]:focus-within,
.admin-work-templates-cms-preview [data-field-type=richtext]:focus-within,
.admin-work-templates-cms-preview [data-field-type=json]:focus-within {
  outline: 2px solid rgba(79, 70, 229, 0.65);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.admin-work-templates-cms-preview [data-field-type=json]:empty::before {
  content: "JSON 입력";
  opacity: 0.45;
}

.admin-work-templates-cms-preview [data-field-type=image],
.admin-work-templates-cms-preview [data-field-type=video],
.admin-work-templates-cms-preview [data-field-type=image_list],
.admin-work-templates-cms-preview [data-field-type=json] {
  cursor: default;
}

.admin-cms-media-placeholder {
  min-height: 220px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(15, 23, 42, 0.04));
  border: 1px dashed rgba(99, 102, 241, 0.4);
  position: relative;
}

.admin-cms-media-slot {
  overflow: hidden;
  height: 100%;
}

.admin-cms-media-slot > img,
.admin-cms-media-slot > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Work 캔버스: 섹션 미디어 컨테이너(비율/고정높이) 안에서 슬롯이 100% 채우도록 고정 */
.admin-work-templates-cms-preview .no-block-media-slot,
.admin-work-templates-cms-preview .no-work-section__media,
.admin-work-templates-cms-preview figure.no-work-section__media {
  position: relative;
}
.admin-work-templates-cms-preview .no-block-media-slot > .admin-cms-media-slot,
.admin-work-templates-cms-preview .no-work-section__media > .admin-cms-media-slot,
.admin-work-templates-cms-preview figure.no-work-section__media > .admin-cms-media-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* CMS 캔버스: gallery_swiper 는 가로 스크롤 대신 그리드로 나열(정렬/드래그는 Sortable 유지) */
.admin-work-templates-cms-preview .no-work-section--gallery-swiper .no-work-section__swiper {
  overflow: visible;
  scroll-snap-type: none;
  padding-inline: 0;
}
.admin-work-templates-cms-preview .no-work-section--gallery-swiper .no-work-section__track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--spacing-md, 16px);
}
.admin-work-templates-cms-preview .no-work-section--gallery-swiper .no-work-section__slide {
  width: auto;
  scroll-snap-align: unset;
}
.admin-work-templates-cms-preview .no-work-section--gallery-swiper .no-work-section__slide img {
  width: 100%;
  height: auto;
  display: block;
}

.admin-cms-media-placeholder::before {
  content: "클릭/드롭으로 업로드";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-muted);
  font-size: 12px;
}

.admin-cms-media-placeholder:has(.admin-file-uploader__dropzone)::before {
  display: none;
}

.admin-cms-media-placeholder.admin-file-uploader-box--cms-slot {
  display: flex;
  flex-direction: column;
}

.admin-cms-media-placeholder--hero {
  min-height: 340px;
}

.admin-work-templates-cms-preview .is-drop-over {
  outline: 2px solid rgba(99, 102, 241, 0.55);
  outline-offset: 2px;
}

.admin-cms-media__delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.92);
  color: var(--admin-error);
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.admin-cms-media__delete:hover {
  background: var(--admin-white);
  border-color: rgba(185, 28, 28, 0.25);
}

.admin-work-templates__preview-error {
  margin: 0;
  padding: var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-error-text, #b91c1c);
  background: var(--admin-error-bg, rgba(185, 28, 28, 0.06));
}

.admin-work-templates-preview-empty__text {
  margin: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  text-align: center;
  padding: var(--admin-space);
}

/* Work CMS canvas: 라이트 프리뷰 — 카드 패딩 제거 + 편집 영역 대비 */
.admin-work--canvas {
  /*
   * NOTE:
   * - 기존에는 "미리보기 본문만 스크롤"로 이중 스크롤을 막았지만,
   *   편집 시 맨 위로 올리기 불편해서 페이지 스크롤을 사용하도록 변경.
   */
}
.admin-work--canvas .admin-work-template-canvas {
  height: auto;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.admin-work--canvas .admin-work-template-canvas__toolbar {
  flex-shrink: 0;
}
.admin-work--canvas .admin-work-template-canvas__body {
  flex: 1;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.admin-work--canvas .admin-work-template-canvas__preview {
  flex: 1;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
}
.admin-work--canvas .admin-work-template-canvas__preview > form[data-work-canvas-form],
.admin-work--canvas .admin-work-template-canvas__preview > .admin-work-templates__preview-loading,
.admin-work--canvas .admin-work-template-canvas__preview > .admin-work-templates__preview-error {
  flex-shrink: 0;
}
.admin-work--canvas .admin-work-templates__preview-cms-body {
  flex: 1;
  min-height: auto;
  overflow: visible;
  overscroll-behavior: auto;
  padding: 0;
}
.admin-work--canvas .admin-cms-block {
  border: 1px dashed rgba(99, 102, 241, 0.35);
  background: transparent;
}
.admin-work--canvas .admin-cms-block__body {
  padding: 0;
  background: transparent;
}
.admin-work--canvas {
  /* 다크 쇼케이스 배경 위 인라인 편집 힌트 (/sections 프리뷰와 동일 영역) */
}
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=text],
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=richtext],
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=json] {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  caret-color: #f8fafc;
}
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-key][data-cms-placeholder]:empty::before {
  content: attr(data-cms-placeholder);
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-key][data-cms-placeholder][data-cms-empty="1"]:not(:focus-within)::before {
  content: attr(data-cms-placeholder);
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
  pointer-events: none;
}
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=text]:empty::before,
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=richtext]:empty::before,
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=json]:empty::before {
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=text]:focus-within,
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=richtext]:focus-within,
.admin-work--canvas .no-blocks-showcase--cms-preview [data-field-type=json]:focus-within {
  outline: 2px solid rgba(56, 189, 248, 0.95);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.22);
  background: rgba(255, 255, 255, 0.14);
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-cms-media-placeholder {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-color: rgba(255, 255, 255, 0.28);
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-cms-media-placeholder::before {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader__dropzone--cms-slot {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.35);
  color: #f8fafc;
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader__dropzone--cms-slot:hover,
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader__dropzone--cms-slot.admin-file-uploader__dropzone--dragover {
  border-color: rgba(56, 189, 248, 0.85);
  background: rgba(56, 189, 248, 0.12);
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader__dropzone--cms-slot .admin-file-uploader__dropzone-icon {
  color: rgba(255, 255, 255, 0.85);
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader__dropzone--cms-slot .admin-file-uploader__dropzone-text {
  color: rgba(248, 250, 252, 0.92);
}
.admin-work--canvas .no-blocks-showcase--cms-preview .admin-file-uploader-box--cms-slot.admin-file-uploader-box--loading .admin-file-uploader__dropzone-loader {
  background: rgba(15, 23, 42, 0.82);
  color: rgba(248, 250, 252, 0.9);
}
.admin-work--canvas .no-blocks-showcase--cms-preview {
  /* image_list 도 FileUploader 드롭존으로 통일 (JS가 업로더 박스를 삽입) */
}

.admin-work-templates-preview-stack {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
}

.admin-work-templates-preview-card {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: var(--admin-space-sm);
  background: var(--admin-grey-50, #fafafa);
  position: relative;
  overflow: hidden;
}

.admin-work-templates-preview-card__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--admin-primary, #111);
  opacity: 0.85;
}

.admin-work-templates-preview-card__head {
  display: flex;
  gap: var(--admin-space-2xs);
  align-items: flex-start;
  padding-left: 8px;
}

.admin-work-templates-preview-card__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--admin-radius-xs);
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  color: var(--admin-text-secondary);
  font-size: 14px;
}

.admin-work-templates-preview-card__titles {
  flex: 1;
  min-width: 0;
}

.admin-work-templates-preview-card__step {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--admin-text-muted);
  margin-right: 6px;
}

.admin-work-templates-preview-card__title {
  margin: 0;
  display: inline;
  font-size: var(--admin-fs-sm);
  font-weight: 700;
}

.admin-work-templates-preview-card__desc {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--admin-text-secondary);
  line-height: 1.4;
}

.admin-work-templates-preview-card__meta {
  margin-top: var(--admin-space-2xs);
  padding-left: calc(2rem + var(--admin-space-2xs) + 8px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-work-templates-preview-card__slug {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--admin-white);
  border-radius: var(--admin-radius-xs);
  border: 1px solid var(--admin-border-light);
}

.admin-work-templates-preview-card__variant {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--admin-radius-full);
  background: var(--admin-grey-200);
  color: var(--admin-text);
}

.admin-work-templates-preview-fields {
  list-style: none;
  padding: var(--admin-space-2xs) 0 0 0;
  margin: var(--admin-space-2xs) 0 0 0;
  border-top: 1px dashed var(--admin-border-light);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-work-templates-preview-fields__item {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--admin-radius-xs);
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
}

.admin-work-templates-preview-fields__key {
  font-weight: 600;
  margin-right: 4px;
}

.admin-work-templates-preview-fields__type {
  font-family: 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: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  padding: var(--admin-space-sm);
  font-size: 11px;
}

.admin-work-wireframe__slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--admin-radius-xs);
  border: 1px dashed var(--admin-grey-400, #9ca3af);
  background: var(--admin-grey-50, #fafafa);
  min-height: 2.25rem;
  justify-content: center;
}

.admin-work-wireframe__slot-key {
  font-family: 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: 544px) {
  .admin-work-wireframe--project-summary .admin-work-wireframe__ps-grid {
    grid-template-columns: 1fr;
  }
}

.admin-work-wireframe__ps-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-work-wireframe--gallery-grid .admin-work-wireframe__gg-title {
  margin-bottom: 6px;
}

.admin-work-wireframe__gg-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  min-height: 120px;
  padding: 8px;
  border-radius: var(--admin-radius-xs);
  background: repeating-linear-gradient(-45deg, var(--admin-grey-100), var(--admin-grey-100) 6px, #fff 6px, #fff 12px);
}

.admin-work-wireframe--cols-2 .admin-work-wireframe__gg-grid {
  grid-template-columns: repeat(2, 1fr);
}

.admin-work-wireframe--cols-3 .admin-work-wireframe__gg-grid {
  grid-template-columns: repeat(3, 1fr);
}

.admin-work-wireframe--cols-4 .admin-work-wireframe__gg-grid {
  grid-template-columns: repeat(4, 1fr);
}

.admin-work-wireframe__gg-cell {
  min-height: 36px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.65);
}

.admin-work-wireframe__gg-hint {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 10px;
  color: var(--admin-text-muted);
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: var(--admin-radius-xs);
}

.admin-work-wireframe--gallery-swiper .admin-work-wireframe__gs-title {
  margin-bottom: 6px;
}

.admin-work-wireframe__gs-track {
  display: flex;
  gap: 8px;
  align-items: stretch;
  min-height: 88px;
  padding: 8px;
  border-radius: var(--admin-radius-xs);
  background: var(--admin-grey-100);
  overflow-x: auto;
  position: relative;
}

.admin-work-wireframe__gs-slide {
  flex: 0 0 72px;
  height: 72px;
  border-radius: 4px;
  border: 1px dashed var(--admin-grey-400);
  background: var(--admin-white);
}

.admin-work-wireframe__gs-hint {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 10px;
  color: var(--admin-text-muted);
}

.admin-work-wireframe--full-image {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-work-wireframe--full-image > .admin-work-wireframe__slot:first-child {
  min-height: 120px;
}

.admin-work-wireframe__fi-caption {
  max-width: 100%;
}

.admin-work-wireframe--callout-quote {
  padding: var(--admin-space);
}

.admin-work-wireframe--theme-dark {
  background: #1f2937;
  color: #f9fafb;
}
.admin-work-wireframe--theme-dark .admin-work-wireframe__slot {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}

.admin-work-wireframe--theme-brand {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.35);
}

.admin-work-wireframe--theme-light {
  background: #f3f4f6;
}

.admin-work-wireframe__cq-quote .admin-work-wireframe__slot {
  min-height: 72px;
}

.admin-work-wireframe__cq-attr {
  margin-top: 6px;
  max-width: 80%;
}

.admin-work-wireframe--outro .admin-work-wireframe__outro-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-work-wireframe--two-col .admin-work-wireframe__tc-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--admin-space-sm);
  align-items: start;
}
@media (max-width: 544px) {
  .admin-work-wireframe--two-col .admin-work-wireframe__tc-grid {
    grid-template-columns: 1fr;
  }
}

.admin-work-wireframe--image-right .admin-work-wireframe__tc-grid {
  direction: rtl;
}
.admin-work-wireframe--image-right .admin-work-wireframe__tc-grid > * {
  direction: ltr;
}

.admin-work-wireframe__tc-media .admin-work-wireframe__slot {
  min-height: 140px;
}

.admin-work-wireframe__tc-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-work-wireframe--generic .admin-work-wireframe__variant-badge {
  margin: 0 0 8px 0;
  font-size: 10px;
}

.admin-work-wireframe--generic .admin-work-wireframe__stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Work form block editor */
.admin-work-block-editor {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
}

.admin-work-block-editor__block {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  padding: var(--admin-space-sm) var(--admin-space);
}

.admin-work-block-editor__summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  flex-wrap: wrap;
  font-weight: 600;
}

.admin-work-block-editor__slug,
.admin-work-block-editor__key {
  padding: 2px 6px;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  font-size: 11px;
  font-weight: 500;
  color: var(--admin-text-secondary);
}

.admin-work-block-editor__field {
  margin-top: var(--admin-space);
}

.admin-work-block-editor__ft {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--admin-radius-xs);
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  font-size: 10px;
  font-weight: 500;
}

.admin-work-block-editor__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--admin-space-sm);
}

/* Inline row edit for categories */
.admin-form__block--inline {
  display: flex;
  gap: var(--admin-space-sm);
  align-items: flex-start;
  flex-wrap: wrap;
}
.admin-form__block--inline .admin-form__field {
  flex: 1;
  min-width: 0;
}
.admin-form__block--inline .admin-form__input {
  min-width: 140px;
}

.admin-form-row {
  display: contents;
}

/* Work form grid helpers */
.admin-form__block--grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--admin-space);
}
@media (max-width: 768px) {
  .admin-form__block--grid-2 {
    grid-template-columns: 1fr;
  }
}

.admin-form__block--grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--admin-space);
}
@media (max-width: 768px) {
  .admin-form__block--grid-3 {
    grid-template-columns: 1fr;
  }
}

.admin-form__checkgroup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-sm) var(--admin-space-lg);
  align-items: center;
}

/* =========================================================
 * Add / List section visual separation
 * ========================================================= */
.admin-add-section {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: var(--admin-space-lg);
  margin-bottom: var(--admin-section-action-gap);
  box-shadow: var(--admin-elevation-1);
}

.admin-add-section__title {
  margin: 0 0 var(--admin-space-sm);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
}

.admin-add-section__form .admin-form__block--inline {
  gap: var(--admin-space-sm);
}

.admin-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
}
.admin-form__field .admin-form__label {
  margin: 0;
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  color: var(--admin-text-secondary);
  white-space: nowrap;
}
.admin-form__field .admin-form__input {
  flex: none;
}

.admin-list-section {
  margin-bottom: var(--admin-space-xl);
}

.admin-list-section__header {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space-xs);
}

.admin-list-section__title {
  margin: 0;
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
}

.admin-list-section__count {
  font-size: var(--admin-fs-sm);
  font-weight: 400;
  color: var(--admin-text-muted);
}

.admin-list-section__hint {
  margin: 0 0 var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-list-section__hint .fa-grip-lines {
  margin-right: 0.35em;
}

/* =========================================================
 * Sortable drag-and-drop
 * ========================================================= */
.admin-table__col-handle {
  width: 2.5rem;
  padding: 0 var(--admin-space-xs) !important;
}

.admin-sortable__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--admin-text-muted);
  cursor: grab;
  border-radius: var(--admin-radius-xs);
  transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-sortable__handle:hover {
  background: var(--admin-grey-100);
  color: var(--admin-text);
}
.admin-sortable__handle:active {
  cursor: grabbing;
}

/* Ghost row (placeholder while dragging) */
.admin-sortable__ghost {
  opacity: 0.4;
  background: var(--admin-primary-light);
}

/* Row being dragged */
.admin-sortable__drag {
  box-shadow: var(--admin-elevation-3);
  background: var(--admin-card-bg) !important;
  opacity: 1;
}

/* Saving overlay – tbody를 가리는 전체 크기 로더 */
.admin-sortable__saving {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: var(--admin-space-xl);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(2px);
  color: var(--admin-text-muted);
}
.admin-sortable__saving--visible {
  display: flex;
}

.admin-sortable__saving-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-sm);
  min-width: 240px;
  padding: var(--admin-space-lg) var(--admin-space-xl);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-2);
}
.admin-sortable__saving-inner .fa-spinner {
  font-size: 2rem;
  color: var(--admin-grey-400);
}

/* 로더가 떠도 리스트는 유지 (스크롤/레이아웃 고정 목적) */
/* 저장 실패 에러 표시 */
.admin-sortable__error {
  display: none;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space-lg);
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  color: var(--admin-error-text);
  background: var(--admin-error-bg);
  border-bottom: 2px solid var(--admin-error);
}
.admin-sortable__error i {
  flex-shrink: 0;
}
.admin-sortable__error--visible {
  display: flex;
}

/* global loading state (keep scroll position, block interactions) */
html.admin--loading,
html.admin--loading body {
  cursor: progress;
}

/* CMS 캔버스 — 블록 레이아웃 갤러리 모달 */
.admin-work-block-picker {
  z-index: 1100;
}
.admin-work-block-picker .admin-work-block-picker__box {
  max-width: min(960px, 96vw);
  width: 100%;
  max-height: 88vh;
}
.admin-work-block-picker .admin-work-block-picker__body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}
.admin-work-block-picker .admin-work-block-picker__filter-wrap {
  display: block;
  margin: 0;
}
.admin-work-block-picker .admin-search-bar {
  max-width: 440px;
}
.admin-work-block-picker .admin-work-block-picker__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--admin-space-sm);
}
.admin-work-block-picker .admin-work-block-picker__cell {
  margin: 0;
}
.admin-work-block-picker .admin-work-block-picker__card {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-work-block-picker .admin-work-block-picker__card:hover {
  border-color: var(--admin-primary, #0ea5e9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.admin-work-block-picker .admin-work-block-picker__card:focus-visible {
  outline: 2px solid var(--admin-primary, #0ea5e9);
  outline-offset: 2px;
}
.admin-work-block-picker .admin-work-block-picker__thumb-wrap {
  aspect-ratio: 16/10;
  background: var(--admin-grey-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.admin-work-block-picker .admin-work-block-picker__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-work-block-picker .admin-work-block-picker__thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 80px;
  color: var(--admin-grey-400);
  font-size: 2rem;
}
.admin-work-block-picker .admin-work-block-picker__meta {
  padding: var(--admin-space-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-work-block-picker .admin-work-block-picker__label {
  font-size: var(--admin-fs-body);
  font-weight: 700;
  margin: 0;
}
.admin-work-block-picker .admin-work-block-picker__slug {
  font-size: 11px;
  color: var(--admin-text-secondary);
  background: var(--admin-grey-100);
  padding: 2px 6px;
  border-radius: var(--admin-radius-xs);
  align-self: flex-start;
}
.admin-work-block-picker .admin-work-block-picker__desc {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.admin-work-block-picker .admin-work-block-picker__hint {
  margin: 0;
  margin-top: var(--admin-space-xs);
}

/* ================================================================
 * Work 템플릿 캔버스 — 썸네일 모드 (좌측 컴팩트 팔레트 + 우측 카드 리스트)
 * 디자인 톤: 엔터프라이즈 (subtle elevation, 절제된 색, 충분한 여백)
 * ================================================================ */
.admin-work-templates--canvas-thumb .admin-work-template-canvas {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg);
}
.admin-work-templates--canvas-thumb {
  /* 헤더 바 */
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__header {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
  padding: var(--admin-space-sm) var(--admin-space);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  box-shadow: var(--admin-elevation-1);
  flex-wrap: wrap;
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__header-title {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-sm);
  flex: 1 1 auto;
  min-width: 0;
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__title {
  font-size: var(--admin-fs-body-lg);
  font-weight: 700;
  color: var(--admin-text-primary);
  line-height: 1.2;
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__slug {
  padding: 3px 8px;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
  font-family: 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: 1320px) {
  .admin-work-templates--canvas-thumb .admin-work-template-canvas__body {
    grid-template-columns: 1fr;
  }
}
.admin-work-templates--canvas-thumb .admin-work-template-canvas__target {
  min-width: 0;
}

/* ─── 좌측 팔레트 (컴팩트) ─────────────────────────────────────── */
.admin-work-blocks-thumb-palette {
  display: flex;
  flex-direction: column;
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  box-shadow: var(--admin-elevation-1);
  position: sticky;
  top: var(--admin-space-lg);
  max-height: calc(100vh - var(--admin-space-2xl));
  overflow: hidden;
  min-width: 0;
}

.admin-work-blocks-thumb-palette__head {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  flex: 0 0 auto;
  padding: var(--admin-space-sm) var(--admin-space) var(--admin-space-xs);
  border-bottom: 1px solid var(--admin-grey-100);
}

.admin-work-blocks-thumb-palette__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  color: var(--admin-text-secondary);
}

.admin-work-blocks-thumb-palette__filter {
  display: block;
}

.admin-work-blocks-thumb-palette__filter input {
  width: 100%;
  padding: 6px 10px;
  font-size: var(--admin-fs-sm);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-xs);
  background: var(--admin-grey-50, #fafafa);
  transition: border-color 120ms ease, background 120ms ease;
}

.admin-work-blocks-thumb-palette__filter input:focus {
  outline: none;
  border-color: var(--admin-primary);
  background: var(--admin-white);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.admin-work-blocks-thumb-palette__list {
  list-style: none;
  margin: 0;
  padding: var(--admin-space-2xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.admin-work-blocks-thumb-palette__cell {
  list-style: none;
}

.admin-work-blocks-thumb-palette__cell[hidden] {
  display: none;
}

.admin-work-blocks-thumb-palette__card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--admin-space-2xs);
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-xs);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.admin-work-blocks-thumb-palette__card:hover {
  background: var(--admin-grey-50, #fafafa);
  border-color: var(--admin-grey-100);
}

.admin-work-blocks-thumb-palette__card:focus-visible {
  outline: none;
  background: var(--admin-white);
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.admin-work-blocks-thumb-palette__thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--admin-grey-100);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-work-blocks-thumb-palette__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-work-blocks-thumb-palette__thumb-fallback {
  font-size: 12px;
  color: var(--admin-text-secondary);
}

.admin-work-blocks-thumb-palette__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
  align-self: center;
}

.admin-work-blocks-thumb-palette__label {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.25;
}

.admin-work-blocks-thumb-palette__slug {
  font-family: 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: var(--admin-white);
  overflow: hidden;
  box-shadow: var(--admin-elevation-1);
  transition: box-shadow 150ms ease;
}

.admin-work-blocks__item--thumb:hover {
  box-shadow: var(--admin-elevation-2);
}

.admin-work-blocks__item--thumb .admin-work-blocks__item-head {
  display: grid;
  grid-template-columns: auto auto 220px minmax(0, 1fr) auto;
  gap: var(--admin-space);
  align-items: center;
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-white);
  border-bottom: 1px solid var(--admin-grey-100);
}
@media (max-width: 768px) {
  .admin-work-blocks__item--thumb .admin-work-blocks__item-head {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "drag move thumb remove" "meta meta meta meta";
    row-gap: var(--admin-space-sm);
  }
}

/* 드래그 핸들 */
.admin-work-blocks__item--thumb .admin-work-blocks__drag {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--admin-text-secondary);
  cursor: grab;
  border-radius: var(--admin-radius-xs);
  transition: background 120ms ease, color 120ms ease;
}
@media (max-width: 768px) {
  .admin-work-blocks__item--thumb .admin-work-blocks__drag {
    grid-area: drag;
  }
}

.admin-work-blocks__item--thumb .admin-work-blocks__drag:hover {
  background: var(--admin-grey-50, #fafafa);
  color: var(--admin-text-primary);
}

.admin-work-blocks__item--thumb .admin-work-blocks__drag:active {
  cursor: grabbing;
}

/* ▲▼ 이동 버튼: 컴팩트한 세그먼트 컨트롤 느낌 */
.admin-work-blocks__move {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-xs);
  overflow: hidden;
  background: var(--admin-white);
}

@media (max-width: 768px) {
  .admin-work-blocks__item--thumb .admin-work-blocks__move {
    grid-area: move;
  }
}

.admin-work-blocks__move-btn {
  width: 24px;
  height: 18px;
  border: none;
  background: var(--admin-white);
  color: var(--admin-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  padding: 0;
  transition: background 100ms ease, color 100ms ease;
}

.admin-work-blocks__move-btn + .admin-work-blocks__move-btn {
  border-top: 1px solid var(--admin-border-light);
}

.admin-work-blocks__move-btn:hover:not(:disabled) {
  background: var(--admin-grey-50, #fafafa);
  color: var(--admin-text-primary);
}

.admin-work-blocks__move-btn:disabled,
.admin-work-blocks__move-btn[aria-disabled=true] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 우측 카드 썸네일 */
.admin-work-blocks__thumb-wrap {
  width: 220px;
  aspect-ratio: 16/9;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .admin-work-blocks__item--thumb .admin-work-blocks__thumb-wrap {
    grid-area: thumb;
    width: 140px;
  }
}

.admin-work-blocks__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-work-blocks__thumb-fallback {
  font-size: 28px;
  color: var(--admin-text-secondary);
}

/* 메타 텍스트 */
.admin-work-blocks__item--thumb .admin-work-blocks__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 768px) {
  .admin-work-blocks__item--thumb .admin-work-blocks__meta {
    grid-area: meta;
  }
}

.admin-work-blocks__item--thumb .admin-work-blocks__label {
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text-primary);
  line-height: 1.2;
}

.admin-work-blocks__item--thumb .admin-work-blocks__slug {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px 6px;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  font-family: 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__item--thumb .admin-work-blocks__item-foot {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--admin-space-lg);
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-grey-50, #fafafa);
  border-top: 1px solid var(--admin-grey-100);
}
@media (max-width: 768px) {
  .admin-work-blocks__item--thumb .admin-work-blocks__item-foot {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--admin-space-sm);
  }
}

.admin-work-blocks__inline-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.admin-work-blocks__inline-field .admin-form__label--sm {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--admin-text-secondary);
  margin: 0;
}

.admin-work-blocks__inline-field input,
.admin-work-blocks__inline-field select {
  padding: 6px 10px;
  font-size: var(--admin-fs-sm);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-xs);
  background: var(--admin-white);
  width: 100%;
}

/* 빈 상태 */
.admin-work-blocks__empty {
  list-style: none;
  padding: var(--admin-space-2xl) var(--admin-space-lg);
  border: 1.5px dashed var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  text-align: center;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm);
}

.admin-work-blocks__empty p {
  margin: 0;
}

/* 삭제 버튼은 카드 헤드 우측에서 살짝 작게 */
.admin-work-blocks__item--thumb .admin-work-blocks__remove {
  white-space: nowrap;
}
@media (max-width: 768px) {
  .admin-work-blocks__item--thumb .admin-work-blocks__remove {
    grid-area: remove;
    justify-self: end;
  }
}

/* =========================================================
 * Admin Portfolio (실전 사례) — 폼 미디어 편집 리스트
 * ========================================================= */
.admin-portfolio-media-list {
  display: grid;
  gap: var(--admin-space);
  margin-bottom: var(--admin-space);
}
.admin-portfolio-media-list__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--admin-space);
  align-items: start;
  padding: var(--admin-space);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius, 4px);
}
.admin-portfolio-media-list__row--doc {
  grid-template-columns: 1fr;
}
.admin-portfolio-media-list__thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--admin-radius, 4px);
  background: var(--admin-grey-100);
}
.admin-portfolio-media-list__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-space-2xs) var(--admin-space);
  align-items: end;
}
@media (max-width: 640px) {
  .admin-portfolio-media-list__fields {
    grid-template-columns: 1fr;
  }
}
.admin-portfolio-media-list__docname {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  color: var(--admin-text, currentColor);
}

.admin-comp-section {
  margin-bottom: var(--admin-space-2xl);
  padding: var(--admin-space-lg);
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
  border: 1px solid var(--admin-border-light);
}

.admin-comp-section__title {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--admin-text);
  padding-bottom: var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-comp-section__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space);
  align-items: center;
}
.admin-comp-section__row--col {
  flex-direction: column;
  align-items: stretch;
  max-width: 400px;
}

.admin-comp-section__note {
  margin: var(--admin-space) 0 0;
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  color: var(--admin-text-secondary);
  word-break: keep-all;
  overflow-wrap: normal;
}
.admin-comp-section__note code {
  padding: var(--admin-space-3xs) var(--admin-space-2xs);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  font-size: var(--admin-fs-sm);
}

.admin-comp-section--file-uploader .admin-file-uploader-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--admin-space-lg);
  margin-top: var(--admin-space);
}

.admin-file-uploader-box {
  min-height: 140px;
  padding: var(--admin-space);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-card-bg);
}

.admin-file-uploader-demo__item .admin-input-label {
  font-weight: 600;
  color: var(--admin-text);
}

.admin-file-uploader__list {
  margin-top: var(--admin-space);
}

.admin-file-uploader__grid {
  display: grid;
  gap: var(--admin-space);
  margin-top: var(--admin-space-sm);
}
.admin-file-uploader__grid--image {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.admin-file-uploader__grid--video, .admin-file-uploader__grid--audio {
  grid-template-columns: 1fr;
}
.admin-file-uploader__grid--document, .admin-file-uploader__grid--archive {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.admin-file-uploader__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--admin-space-sm);
  padding: var(--admin-space);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border-light);
}

.admin-file-uploader__thumb {
  width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: cover;
  border-radius: var(--admin-radius-xs);
}

.admin-file-uploader__preview-video {
  width: 100%;
  max-height: 180px;
  border-radius: var(--admin-radius-xs);
}

.admin-file-uploader__preview-audio {
  width: 100%;
  max-width: 320px;
}

.admin-file-uploader__icon {
  font-size: var(--admin-fs-body-xl);
  color: var(--admin-text-secondary);
}

.admin-file-uploader__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: var(--admin-space);
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-grey-100);
  cursor: pointer;
  transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-file-uploader__dropzone:hover, .admin-file-uploader__dropzone--dragover {
  border-color: var(--admin-primary);
  background: rgba(var(--admin-primary-rgb), 0.06);
}
.admin-file-uploader__dropzone--disabled {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

.admin-file-uploader__dropzone-text {
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: var(--admin-space-2xs);
}

.admin-file-uploader__dropzone-hint {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}

.admin-file-uploader__meta {
  width: 100%;
  margin-top: var(--admin-space-2xs);
}

.admin-file-uploader__name {
  font-size: var(--admin-fs-xs);
  font-weight: 500;
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-file-uploader__size {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
  margin-top: var(--admin-space-3xs);
}

.admin-file-uploader__actions {
  display: flex;
  gap: var(--admin-space-2xs);
  flex-wrap: wrap;
  margin-top: var(--admin-space-sm);
}

.admin-datetime-input-wrap,
.admin-time-input-wrap,
.admin-daterange-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--admin-border, #e2e8f0);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-white);
  cursor: pointer;
}
.admin-datetime-input-wrap:focus-within,
.admin-time-input-wrap:focus-within,
.admin-daterange-input-wrap:focus-within {
  border-color: var(--admin-primary, #3b82f6);
  outline: 1px solid var(--admin-primary, #3b82f6);
}

.admin-datetime-input,
.admin-time-input,
.admin-daterange-input {
  flex: 1;
  border: none;
  background: none;
  cursor: pointer;
}

.admin-datetime-input__icon,
.admin-time-input__icon {
  padding: 0 var(--admin-space);
  color: var(--admin-text-secondary, #64748b);
  pointer-events: none;
}

.admin-comp-editor-wrap {
  min-height: 180px;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border, #e2e8f0);
  border-radius: var(--admin-radius);
}
.admin-comp-editor-wrap .ql-editor {
  min-height: 160px;
}

.admin-comp-section__row--calendars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-lg);
  align-items: flex-start;
  margin-top: var(--admin-space);
}

.admin-comp-calendar-box {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}
.admin-comp-calendar-box__label {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-secondary);
}
.admin-comp-calendar-box__inner {
  display: inline-block;
  border-radius: var(--admin-radius);
  overflow: hidden;
  box-shadow: var(--admin-elevation-2);
}
.admin-comp-calendar-box__inner .flatpickr-calendar {
  position: static;
  box-shadow: none;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  font-family: inherit;
}
.admin-comp-calendar-box__inner .flatpickr-day.selected,
.admin-comp-calendar-box__inner .flatpickr-day.selected:hover {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
}
.admin-comp-calendar-box__inner .flatpickr-day.inRange {
  background: rgba(var(--admin-primary-rgb), 0.12);
  border-color: transparent;
}
.admin-comp-calendar-box__inner .flatpickr-day.startRange,
.admin-comp-calendar-box__inner .flatpickr-day.endRange {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
}

.admin-guide {
  max-width: 100%;
}

.guide-section {
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: 2.4rem;
  margin-bottom: 2.4rem;
}
.guide-section:last-child {
  margin-bottom: 0;
}

.guide-section__header {
  margin-bottom: 2rem;
}

.guide-section__tag {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--admin-primary);
  background: var(--admin-primary-light);
  border: 1px solid rgba(var(--admin-primary-rgb), 0.2);
  border-radius: var(--admin-radius-full);
  padding: 0.3rem 1rem;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.guide-section__title {
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 700;
  color: var(--admin-text);
  margin: 0 0 0.6rem;
  line-height: 1.3;
}

.guide-section__desc {
  font-size: 1.4rem;
  color: var(--admin-text-secondary);
  margin: 0;
  line-height: 1.6;
}

.guide-grid {
  display: grid;
  gap: 1.6rem;
}
.guide-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
  .guide-grid--2 {
    grid-template-columns: 1fr;
  }
}
.guide-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .guide-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .guide-grid--3 {
    grid-template-columns: 1fr;
  }
}
.guide-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .guide-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .guide-grid--4 {
    grid-template-columns: 1fr;
  }
}

.guide-card {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: 2rem;
  background: var(--admin-white);
}
.guide-card--highlight {
  background: var(--admin-primary-light);
  border-color: rgba(var(--admin-primary-rgb), 0.18);
}

.guide-card__icon {
  font-size: 2.4rem;
  color: var(--admin-primary);
  margin-bottom: 1.2rem;
}

.guide-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--admin-text);
  margin: 0 0 0.8rem;
}

.guide-card__body {
  font-size: 1.4rem;
  color: var(--admin-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.guide-value-card {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: 1.6rem;
  background: var(--admin-white);
  position: relative;
  overflow: hidden;
}
.guide-value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--admin-primary);
  border-radius: var(--admin-radius) var(--admin-radius) 0 0;
}

.guide-value-card__num {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: rgba(var(--admin-primary-rgb), 0.15);
  line-height: 1;
  margin-bottom: 0.8rem;
  letter-spacing: -0.04em;
}

.guide-value-card__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--admin-text);
  margin: 0 0 0.4rem;
}

.guide-value-card__body {
  font-size: 1.3rem;
  color: var(--admin-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.guide-colors {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.guide-color-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.guide-color-group__label {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.guide-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.guide-swatch {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 9.6rem;
  height: 6.4rem;
  border-radius: var(--admin-radius-sm);
  padding: 0.6rem 0.8rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.guide-swatch--bordered {
  border: 1px solid var(--admin-border-light);
}
@media (max-width: 768px) {
  .guide-swatch {
    width: 7.2rem;
    height: 5.2rem;
  }
}

.guide-swatch__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1;
}

.guide-swatch__hex {
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.45);
  font-family: ui-monospace, "Cascadia Code", monospace;
  margin-top: 0.2rem;
}

.guide-voice-card {
  border-radius: var(--admin-radius);
  padding: 2rem;
  border: 1px solid var(--admin-border-light);
}
.guide-voice-card--do {
  background: var(--admin-success-bg);
  border-color: rgba(var(--admin-success-rgb), 0.25);
}
.guide-voice-card--do .guide-voice-card__badge {
  background: var(--admin-success);
  color: #fff;
}
.guide-voice-card--dont {
  background: var(--admin-error-bg);
  border-color: rgba(var(--admin-error-rgb), 0.2);
}
.guide-voice-card--dont .guide-voice-card__badge {
  background: var(--admin-error);
  color: #fff;
}

.guide-voice-card__badge {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.3rem 1rem;
  border-radius: var(--admin-radius-full);
  margin-bottom: 1.2rem;
}

.guide-voice-card__list {
  margin: 0;
  padding: 0 0 0 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.guide-voice-card__list li {
  font-size: 1.4rem;
  color: var(--admin-text-secondary);
  line-height: 1.5;
}

.guide-type-table {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  overflow: hidden;
}

.guide-type-row {
  display: grid;
  grid-template-columns: 10rem 16rem 12rem 1fr;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--admin-border-light);
}
.guide-type-row:last-child {
  border-bottom: none;
}
.guide-type-row--header {
  background: var(--admin-grey-50);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1rem 1.6rem;
}
@media (max-width: 1024px) {
  .guide-type-row--header span:nth-child(n+3) {
    display: none;
  }
}
@media (max-width: 1024px) {
  .guide-type-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
}
@media (max-width: 768px) {
  .guide-type-row {
    grid-template-columns: 1fr;
  }
}

.guide-type-role {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--admin-text);
}

.guide-type-token {
  font-size: 1.1rem;
  font-family: ui-monospace, "Cascadia Code", monospace;
  color: var(--admin-accent-coral);
  background: var(--admin-grey-50);
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
}

.guide-type-size {
  font-size: 1.2rem;
  color: var(--admin-text-muted);
}

.guide-type-sample {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-spacing-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.guide-spacing-row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.guide-spacing-token {
  flex: 0 0 14rem;
  font-size: 1.1rem;
  font-family: ui-monospace, "Cascadia Code", monospace;
  color: var(--admin-accent-coral);
  background: var(--admin-grey-50);
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  white-space: nowrap;
}

.guide-spacing-bar {
  height: 1.2rem;
  background: var(--admin-primary);
  border-radius: 2px;
  opacity: 0.7;
  flex-shrink: 0;
}

.guide-spacing-size {
  flex: 0 0 10rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--admin-text);
}

.guide-spacing-desc {
  font-size: 1.3rem;
  color: var(--admin-text-secondary);
}

.guide-breakpoints {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.guide-bp {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.guide-bp__bar {
  height: 3.2rem;
  background: linear-gradient(90deg, var(--admin-primary) 0%, rgba(var(--admin-primary-rgb), 0.4) 100%);
  border-radius: var(--admin-radius-sm);
  flex-shrink: 0;
  min-width: 4rem;
}

.guide-bp__label {
  flex: 0 0 6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--admin-text);
}

.guide-bp__val {
  flex: 0 0 14rem;
  font-size: 1.2rem;
  color: var(--admin-text-secondary);
  font-family: ui-monospace, monospace;
}

.guide-bp__cols {
  font-size: 1.3rem;
  color: var(--admin-primary);
  font-weight: 600;
}

.guide-motion-card {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: 1.6rem;
  text-align: center;
  background: var(--admin-white);
}

.guide-motion-card__demo {
  height: 6.4rem;
  border-radius: var(--admin-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
  cursor: default;
}
.guide-motion-card__demo--fade {
  background: var(--admin-primary-light);
  color: var(--admin-primary);
  transition: opacity 200ms ease-out;
}
.guide-motion-card__demo--fade:hover {
  opacity: 0.4;
}
.guide-motion-card__demo--slide {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.guide-motion-card__demo--slide:hover {
  transform: translateY(-4px);
}
.guide-motion-card__demo--scale {
  background: var(--admin-warn-bg);
  color: var(--admin-warn-text);
  transition: transform 150ms ease;
}
.guide-motion-card__demo--scale:hover {
  transform: scale(1.05);
}

.guide-motion-card__label {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--admin-text);
  margin: 0 0 0.4rem;
}

.guide-motion-card__code {
  font-size: 1.1rem;
  font-family: ui-monospace, "Cascadia Code", monospace;
  color: var(--admin-text-muted);
  background: var(--admin-grey-50);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}

.admin-guide-page .admin__content {
  max-width: 1440px;
}

.guide-layout {
  display: grid;
  grid-template-columns: 24rem minmax(0, 1fr) 20rem;
  gap: 2.4rem;
  margin-top: 2rem;
  align-items: start;
}
@media (max-width: 1320px) {
  .guide-layout {
    grid-template-columns: 24rem minmax(0, 1fr);
    gap: 2rem;
  }
}
@media (max-width: 1024px) {
  .guide-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.guide-layout__nav {
  position: sticky;
  top: 8rem;
  max-height: calc(100vh - 8rem - 2rem);
  overflow-y: auto;
  padding: 0.4rem 0.4rem 2rem 0;
  scrollbar-width: thin;
}
@media (max-width: 1024px) {
  .guide-layout__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: min(28rem, 86vw);
    height: 100vh;
    max-height: none;
    background: var(--admin-white);
    border-right: 1px solid var(--admin-border-light);
    box-shadow: var(--admin-elevation-3);
    padding: 1.6rem 1.6rem 2.4rem;
    transform: translateX(-101%);
    transition: transform 240ms var(--admin-ease);
    z-index: 9000;
  }
  .guide-layout--nav-open .guide-layout__nav {
    transform: translateX(0);
  }
}

.guide-layout__main {
  min-width: 0;
}

.guide-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.guide-layout__toc {
  position: sticky;
  top: 8rem;
  max-height: calc(100vh - 8rem - 2rem);
  overflow-y: auto;
  padding: 0.4rem 0.4rem 2rem 0;
  scrollbar-width: thin;
}
@media (max-width: 1320px) {
  .guide-layout__toc {
    display: none;
  }
}

.guide-layout::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--admin-ease);
  z-index: 8900;
}
@media (min-width: 1024px) {
  .guide-layout::before {
    display: none;
  }
}

.guide-layout--nav-open::before {
  opacity: 1;
  pointer-events: auto;
}

body.guide-nav-open {
  overflow: hidden;
}
@media (min-width: 1024px) {
  body.guide-nav-open {
    overflow: auto;
  }
}

.guide-nav__close {
  display: none;
  align-self: flex-end;
  width: 3.2rem;
  height: 3.2rem;
  border: 0;
  background: transparent;
  color: var(--admin-text-secondary);
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  font-size: 1.6rem;
}
.guide-nav__close:hover {
  background: var(--admin-state-hover);
}
@media (max-width: 1024px) {
  .guide-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
  }
}

.guide-nav {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.guide-nav__group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.guide-nav__group-title {
  margin: 0 0 0.2rem;
  padding: 0 1rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
}

.guide-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.guide-nav__item {
  margin: 0;
}

.guide-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--admin-text-secondary);
  text-decoration: none;
  border-radius: var(--admin-radius-sm);
  border-left: 2px solid transparent;
  transition: background 160ms var(--admin-ease), color 160ms var(--admin-ease), border-color 160ms var(--admin-ease);
}
.guide-nav__link:hover {
  background: var(--admin-state-hover);
  color: var(--admin-text);
}
.guide-nav__link.is-active {
  background: var(--admin-primary-light);
  border-left-color: var(--admin-primary);
  color: var(--admin-primary-text);
  font-weight: 700;
}

.guide-nav__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-nav__badge {
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: var(--admin-radius-full);
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
}
.is-active .guide-nav__badge {
  background: rgba(var(--admin-primary-rgb), 0.18);
  color: var(--admin-primary-text);
}

.guide-toc__title {
  margin: 0 0 1rem;
  padding: 0 1rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
}

.guide-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  border-left: 1px solid var(--admin-border-light);
}

.guide-toc__item {
  margin: 0;
}

.guide-toc__link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--admin-text-muted);
  text-decoration: none;
  transition: color 160ms var(--admin-ease), border-color 160ms var(--admin-ease);
}
.guide-toc__link:hover {
  color: var(--admin-text-secondary);
}
.guide-toc__link.is-active {
  color: var(--admin-primary-text);
  border-left-color: var(--admin-primary);
  font-weight: 600;
}

.guide-toc__bullet {
  display: none;
}

.guide-toc__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-mobile-toggle {
  display: none;
}
@media (max-width: 1024px) {
  .guide-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.2rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--admin-text);
    background: var(--admin-white);
    border: 1px solid var(--admin-border-light);
    border-radius: var(--admin-radius-sm);
    cursor: pointer;
    margin: 1.2rem 0;
  }
  .guide-mobile-toggle:hover {
    background: var(--admin-grey-50);
  }
  .guide-mobile-toggle i {
    color: var(--admin-primary);
  }
}

.guide-section {
  scroll-margin-top: 8rem;
}
.guide-section--no-card {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 0;
}
.guide-section--bordered {
  background: var(--admin-white);
}

.guide-demo {
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  overflow: hidden;
  box-shadow: var(--admin-elevation-1);
}
.guide-demo:has([data-admin-breadcrumb]) {
  overflow: visible;
}
.guide-demo[data-mode=preview] .guide-demo__code {
  display: none;
}
.guide-demo[data-mode=code] .guide-demo__preview {
  display: none;
}

.guide-demo__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.8rem 1.2rem;
  background: var(--admin-grey-50);
  border-bottom: 1px solid var(--admin-border-light);
}

.guide-demo__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.guide-demo__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.guide-demo__actions button {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--admin-text-secondary);
  padding: 0.4rem 0.9rem;
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  transition: background 160ms var(--admin-ease), color 160ms var(--admin-ease);
}
.guide-demo__actions button:hover {
  background: var(--admin-state-hover);
  color: var(--admin-text);
}
.guide-demo__actions button.is-active {
  background: var(--admin-white);
  color: var(--admin-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--admin-border-light);
}
.guide-demo__actions button.is-copied {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
}
.guide-demo__actions button.is-copied::after {
  content: " ✓";
}

.guide-demo__preview {
  padding: 2rem 2.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.guide-demo__preview--block {
  display: block;
}
.guide-demo__preview--center {
  justify-content: center;
}

.guide-demo__code {
  margin: 0;
  padding: 1.6rem 2rem;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 1.25rem;
  line-height: 1.6;
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;
  white-space: pre;
  tab-size: 2;
}

.admin-guide__breadcrumb-surface {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--admin-header-height);
  padding: 0 var(--admin-space-lg);
  background: var(--admin-header-bg);
  border-radius: var(--admin-radius);
}

.admin-guide__breadcrumb-nav {
  flex: 1;
  min-width: 0;
}

.guide-token-row {
  display: grid;
  grid-template-columns: 5.2rem minmax(16rem, 22rem) minmax(10rem, 14rem) 1fr auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1rem 1.4rem;
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
}
.guide-token-row + .guide-token-row {
  margin-top: 0.6rem;
}
@media (max-width: 1024px) {
  .guide-token-row {
    grid-template-columns: 4rem 1fr auto;
    grid-template-areas: "swatch var copy" "swatch value value" "swatch usage usage";
    row-gap: 0.4rem;
  }
}

.guide-token-row__swatch {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: var(--admin-radius-sm);
  background: var(--swatch-bg, var(--admin-grey-100));
  border: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .guide-token-row > .guide-token-row__swatch {
    grid-area: swatch;
  }
}

.guide-token-row__var {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 1.25rem;
  color: var(--admin-accent-coral, var(--admin-primary));
  background: var(--admin-grey-50);
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  justify-self: start;
}
@media (max-width: 1024px) {
  .guide-token-row > .guide-token-row__var {
    grid-area: var;
  }
}

.guide-token-row__value {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 1.25rem;
  color: var(--admin-text);
}
@media (max-width: 1024px) {
  .guide-token-row > .guide-token-row__value {
    grid-area: value;
  }
}

.guide-token-row__usage {
  font-size: 1.3rem;
  color: var(--admin-text-secondary);
}
@media (max-width: 1024px) {
  .guide-token-row > .guide-token-row__usage {
    grid-area: usage;
  }
}

.guide-token-row__copy {
  appearance: none;
  border: 1px solid var(--admin-border-light);
  background: var(--admin-white);
  color: var(--admin-text-secondary);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  transition: background 160ms var(--admin-ease), color 160ms var(--admin-ease);
}
.guide-token-row__copy:hover {
  background: var(--admin-state-hover);
  color: var(--admin-text);
}
.guide-token-row__copy.is-copied {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
  border-color: rgba(var(--admin-success-rgb), 0.3);
}
.guide-token-row__copy.is-copied::after {
  content: " ✓";
}
@media (max-width: 1024px) {
  .guide-token-row > .guide-token-row__copy {
    grid-area: copy;
  }
}

.guide-props-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  overflow: hidden;
  font-size: 1.3rem;
  margin-top: 1.4rem;
}
.guide-props-table thead {
  background: var(--admin-grey-50);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.guide-props-table th, .guide-props-table td {
  text-align: left;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--admin-border-light);
  vertical-align: top;
}
.guide-props-table tr:last-child td {
  border-bottom: 0;
}
.guide-props-table code {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 1.2rem;
  color: var(--admin-accent-coral, var(--admin-primary));
  background: var(--admin-grey-50);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}

.guide-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.2rem;
}

.guide-swatch-card {
  background: var(--admin-white);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.guide-swatch-card__color {
  height: 8rem;
  background: var(--swatch-bg, var(--admin-grey-100));
}

.guide-swatch-card__meta {
  padding: 0.8rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.guide-swatch-card__name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--admin-text);
}

.guide-swatch-card__hex {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 1.15rem;
  color: var(--admin-text-secondary);
}

.guide-callout {
  display: flex;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  background: var(--admin-info-bg);
  border: 1px solid rgba(var(--admin-info-rgb), 0.25);
  border-radius: var(--admin-radius-sm);
  color: var(--admin-info-text);
}
.guide-callout--warn {
  background: var(--admin-warn-bg);
  border-color: rgba(var(--admin-warn-rgb), 0.3);
  color: var(--admin-warn-text);
}
.guide-callout--error {
  background: var(--admin-error-bg);
  border-color: rgba(var(--admin-error-rgb), 0.3);
  color: var(--admin-error-text);
}
.guide-callout__icon {
  flex: 0 0 auto;
  font-size: 1.8rem;
  line-height: 1.2;
}
.guide-callout__body {
  flex: 1 1 auto;
  font-size: 1.3rem;
  line-height: 1.55;
}
.guide-callout__title {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 700;
}

.admin-docs {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  gap: var(--admin-space-3xl);
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--admin-space-2xl) var(--admin-space-lg);
  font-size: var(--admin-fs-body);
  line-height: 1.65;
}
@media (max-width: 1024px) {
  .admin-docs {
    grid-template-columns: 1fr;
    gap: var(--admin-space-xl);
    padding: var(--admin-space) var(--admin-space);
  }
}

.admin-docs__tabs {
  grid-column: 1/-1;
  display: flex;
  gap: 0;
  margin-bottom: var(--admin-space);
  border-bottom: 2px solid var(--admin-border-light);
  background: var(--admin-main-bg);
}

.admin-docs__tab {
  padding: var(--admin-space) var(--admin-space-lg);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text-secondary);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-docs__tab:hover {
  color: var(--admin-text);
}
.admin-docs__tab.is-active {
  color: var(--admin-primary);
  border-bottom-color: var(--admin-primary);
}

.admin-docs__tab-panel {
  display: none;
}
.admin-docs__tab-panel.is-active {
  display: block;
}

.admin-docs__tab-panel-title {
  margin: 0 0 var(--admin-space-sm);
  font-size: var(--admin-fs-menu);
  font-weight: 600;
  color: var(--admin-text);
}

.admin-docs__tab-panel-lead {
  margin: 0 0 var(--admin-space-xl);
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
}

.admin-docs__nav-group {
  margin-bottom: var(--admin-space);
  list-style: none;
}

.admin-docs__nav-group-title {
  display: block;
  padding: var(--admin-space-2xs) 0 var(--admin-space-2xs) var(--admin-space-sm);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-text-muted);
}

.admin-docs__nav-sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-docs__nav {
  padding: var(--admin-space) var(--admin-space-sm) var(--admin-space-xl) 0;
  margin: 0 var(--admin-space-sm) 0 0;
  border-right: 1px solid var(--admin-border-light);
  background: var(--admin-main-bg);
  z-index: 2;
}
@media (max-width: 1024px) {
  .admin-docs__nav {
    position: static;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0 0 var(--admin-space);
    margin-bottom: var(--admin-space);
    border-right: none;
    border-bottom: 1px solid var(--admin-border-light);
    background: transparent;
  }
}

.admin-docs__nav-title {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--admin-text-muted);
}

.admin-docs__nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-docs__nav-list li {
  margin-bottom: 0;
}

.admin-docs__nav-link {
  display: block;
  padding: var(--admin-space-2xs) 0 var(--admin-space-2xs) var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-docs__nav-link:hover {
  color: var(--admin-text);
  border-left-color: var(--admin-grey-300);
}

.admin-docs__main {
  min-width: 0;
  max-width: 720px;
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-main-bg);
  border-radius: var(--admin-radius-sm);
}
@media (max-width: 1024px) {
  .admin-docs__main {
    max-width: none;
    padding: 0;
  }
}

.admin-docs__header {
  margin-bottom: var(--admin-space-2xl);
  padding-bottom: var(--admin-space-xl);
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-docs__title {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--admin-text);
}

.admin-docs__lead {
  margin: 0;
  font-size: var(--admin-fs-body-lg);
  line-height: 1.6;
  color: var(--admin-text-secondary);
}

.admin-docs__section {
  margin-bottom: var(--admin-space-2xl);
  padding-bottom: var(--admin-space-xl);
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-docs__section:last-child {
  border-bottom: none;
}

.admin-docs__section-title {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-menu);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--admin-text);
  scroll-margin-top: calc(var(--admin-header-height) + var(--admin-space-lg));
}

.admin-docs__subsection {
  margin: var(--admin-space-xl) 0 var(--admin-space);
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-text);
  scroll-margin-top: calc(var(--admin-header-height) + var(--admin-space-lg));
}
.admin-docs__subsection:first-child {
  margin-top: 0;
}

.admin-docs__subsubsection {
  margin: var(--admin-space-lg) 0 var(--admin-space-sm);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text-secondary);
}

.admin-docs__main p {
  margin: 0 0 var(--admin-space);
  font-size: inherit;
  line-height: 1.7;
  color: var(--admin-text);
}

.admin-docs__main code {
  font-family: 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;
}

@media (max-width: 1024px) {
  .admin-docs__table {
    font-size: 1.15rem;
  }
  .admin-docs__table th,
  .admin-docs__table td {
    padding: var(--admin-space) var(--admin-space-sm);
  }
  .admin-docs__table td:first-child {
    white-space: normal;
  }
}

.admin-docs__hero {
  position: relative;
  overflow: hidden;
  padding: var(--admin-space-2xl);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.04), rgba(17, 24, 39, 0.01));
}
@media (max-width: 1024px) {
  .admin-docs__hero {
    padding: var(--admin-space-xl);
  }
}

.admin-docs__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--admin-space-sm);
  padding: 0.35rem 0.7rem;
  border-radius: var(--admin-radius-full);
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-docs__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
  margin-top: var(--admin-space-lg);
}
@media (max-width: 1024px) {
  .admin-docs__hero-actions {
    grid-template-columns: 1fr;
  }
}

.admin-docs__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--admin-space-lg);
  border-radius: var(--admin-radius-full);
  background: var(--admin-text);
  color: #fff !important;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-docs__button:hover {
  background: var(--admin-primary);
  transform: translateY(-1px);
  text-decoration: none !important;
  box-shadow: var(--admin-elevation-2);
}
.admin-docs__button--secondary {
  background: var(--admin-white);
  color: var(--admin-text) !important;
  border: 1px solid var(--admin-border-light);
}

.admin-docs__callout,
.admin-docs__tip {
  margin: 0 0 var(--admin-space-lg);
  padding: var(--admin-space-lg);
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border-light);
}

.admin-docs__callout {
  background: rgba(15, 23, 42, 0.04);
}
.admin-docs__callout strong {
  display: inline-block;
  margin-bottom: var(--admin-space-2xs);
  color: var(--admin-text);
}
.admin-docs__callout p:last-child {
  margin-bottom: 0;
}

.admin-docs__tip {
  background: rgba(255, 255, 255, 0.92);
}
.admin-docs__tip strong {
  display: inline-block;
  margin-bottom: var(--admin-space-2xs);
  color: var(--admin-primary);
}
.admin-docs__tip p:last-child {
  margin-bottom: 0;
}

.admin-docs__card-grid,
.admin-docs__link-grid {
  display: grid;
  gap: var(--admin-space);
}

.admin-docs__card-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
@media (max-width: 1024px) {
  .admin-docs__card-grid {
    grid-template-columns: 1fr;
  }
}

.admin-docs__link-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
@media (max-width: 1024px) {
  .admin-docs__link-grid {
    grid-template-columns: 1fr;
  }
}

.admin-docs__mini-card,
.admin-docs__link-card {
  padding: var(--admin-space-lg);
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border-light);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-elevation-1);
}

.admin-docs__mini-card p:last-child {
  margin-bottom: 0;
}

.admin-docs__link-card {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
  text-decoration: none;
  transition: transform var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-docs__link-card strong {
  color: var(--admin-text);
  font-size: var(--admin-fs-body);
}
.admin-docs__link-card span {
  color: var(--admin-text-secondary);
  line-height: 1.6;
}
.admin-docs__link-card:hover {
  transform: translateY(-2px);
  border-color: var(--admin-border);
  box-shadow: var(--admin-elevation-2);
  text-decoration: none !important;
}

.admin-docs--ops-manual {
  max-width: none;
  margin: 0;
  padding: var(--admin-space-lg) var(--admin-space);
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
}
.admin-docs--ops-manual .admin-docs__nav,
.admin-docs--ops-manual .admin-docs__main,
.admin-docs--ops-manual .admin-docs__toc,
.admin-docs--ops-manual .admin-docs__tabs {
  background: transparent;
}
.admin-docs--ops-manual .admin-docs__main {
  max-width: 78rem;
  padding: var(--admin-space) var(--admin-space-lg);
  border-radius: var(--figma-radius);
}
.admin-docs--ops-manual .admin-docs__hero,
.admin-docs--ops-manual .admin-docs__mini-card,
.admin-docs--ops-manual .admin-docs__link-card,
.admin-docs--ops-manual .admin-docs__callout,
.admin-docs--ops-manual .admin-docs__tip,
.admin-docs--ops-manual .admin-docs__table {
  background: transparent;
  border-color: var(--color-border-default);
  box-shadow: none;
}
.admin-docs--ops-manual .admin-docs__hero {
  padding: var(--admin-space-lg);
  border-radius: var(--figma-radius);
}
.admin-docs--ops-manual .admin-docs__eyebrow,
.admin-docs--ops-manual .admin-docs__button--secondary {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border-default);
}
.admin-docs--ops-manual .admin-docs__button {
  min-height: var(--figma-select-height, 3.2rem);
  border-radius: var(--figma-radius);
  background: var(--color-action-primary);
  color: #ffffff !important;
}
.admin-docs--ops-manual .admin-docs__button:hover {
  background: var(--color-action-primary-hover);
  box-shadow: none;
  transform: none;
}
.admin-docs--ops-manual .admin-docs__nav-link,
.admin-docs--ops-manual .admin-docs__toc-link {
  border-radius: var(--figma-radius);
}
.admin-docs--ops-manual .admin-docs__nav-link:hover,
.admin-docs--ops-manual .admin-docs__toc-link:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  text-decoration: none;
}
.admin-docs--ops-manual .admin-docs__title,
.admin-docs--ops-manual .admin-docs__section-title,
.admin-docs--ops-manual .admin-docs__subsection,
.admin-docs--ops-manual .admin-docs__main p,
.admin-docs--ops-manual .admin-docs__main code,
.admin-docs--ops-manual .admin-docs__link-card strong,
.admin-docs--ops-manual .admin-docs__tip strong,
.admin-docs--ops-manual .admin-docs__callout strong {
  color: var(--color-text-primary);
}
.admin-docs--ops-manual .admin-docs__lead,
.admin-docs--ops-manual .admin-docs__subsubsection,
.admin-docs--ops-manual .admin-docs__link-card span,
.admin-docs--ops-manual .admin-docs__table td:first-child {
  color: var(--color-text-secondary);
}
.admin-docs--ops-manual .admin-docs__nav,
.admin-docs--ops-manual .admin-docs__toc,
.admin-docs--ops-manual .admin-docs__header,
.admin-docs--ops-manual .admin-docs__section,
.admin-docs--ops-manual .admin-docs__tabs,
.admin-docs--ops-manual .admin-docs__table,
.admin-docs--ops-manual .admin-docs__table thead,
.admin-docs--ops-manual .admin-docs__table td {
  border-color: var(--color-border-default);
}
.admin-docs--ops-manual .admin-docs__table thead,
.admin-docs--ops-manual .admin-docs__table tbody tr:hover,
.admin-docs--ops-manual .admin-docs__main code {
  background: var(--color-bg-subtle);
}
.admin-docs--ops-manual .admin-docs__link-card:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  box-shadow: none;
  transform: none;
}
.admin-docs--ops-manual .admin-docs__section:first-of-type {
  padding-top: 0;
}

.admin-docs__toc {
  padding: var(--admin-space) 0 var(--admin-space-xl) var(--admin-space-sm);
  margin: 0 0 0 var(--admin-space-sm);
  border-left: 1px solid var(--admin-border-light);
  background: var(--admin-main-bg);
  z-index: 2;
}
@media (max-width: 1024px) {
  .admin-docs__toc {
    position: static;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: var(--admin-space) 0 0;
    border-left: none;
    border-top: 1px solid var(--admin-border-light);
    background: transparent;
  }
}

.admin-docs__toc-title {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--admin-text-muted);
}

.admin-docs__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-docs__toc-list li {
  margin-bottom: var(--admin-space-2xs);
}

.admin-docs__toc-link {
  display: block;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  text-decoration: none;
  padding: var(--admin-space-2xs) 0;
  transition: color var(--admin-duration) var(--admin-ease);
}
.admin-docs__toc-link:hover {
  color: var(--admin-primary);
}

.admin-notifications {
  max-width: 900px;
  padding-bottom: var(--admin-space-2xl);
}

.admin-notifications__tabs {
  margin-top: var(--admin-space);
  margin-bottom: var(--admin-space);
}

.admin-notifications__filters {
  display: flex;
  align-items: flex-end;
  gap: var(--admin-space);
  margin-bottom: var(--admin-space);
}
.admin-notifications__filters .admin-form__field {
  max-width: 14rem;
}

.admin-notifications__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space);
  padding: var(--admin-space-2xl) var(--admin-space);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  color: var(--admin-text-muted);
}

.admin-notifications__empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--admin-grey-100);
  color: var(--admin-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.admin-notifications__empty-text {
  margin: 0;
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
}

.admin-notifications__list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  overflow: hidden;
}

.admin-notifications__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space);
  padding: var(--admin-space) var(--admin-space-lg);
  border-bottom: 1px solid var(--admin-border-light);
  min-height: 72px;
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-notifications__item:last-child {
  border-bottom: none;
}
.admin-notifications__item:hover {
  background: var(--admin-grey-50);
}
.admin-notifications__item--unread {
  background: var(--admin-primary-soft, rgba(59, 130, 246, 0.05));
}
.admin-notifications__item--unread::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--admin-primary);
}
.admin-notifications__item--unread:hover {
  background: var(--admin-primary-soft, rgba(59, 130, 246, 0.08));
}

.admin-notifications__item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  font-size: 1.05rem;
}
.admin-notifications__item--unread .admin-notifications__item-icon {
  background: var(--admin-primary-soft, rgba(59, 130, 246, 0.15));
  color: var(--admin-primary);
}

.admin-notifications__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
}

.admin-notifications__item-link {
  text-decoration: none;
  color: inherit;
}
.admin-notifications__item-link:hover .admin-notifications__title {
  color: var(--admin-primary);
}

.admin-notifications__title {
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
  transition: color var(--admin-duration) var(--admin-ease);
}

.admin-notifications__msg {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.admin-notifications__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}

.admin-notifications__group-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  font-size: 11px;
  font-weight: 500;
  color: var(--admin-text-secondary);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-full);
}

.admin-notifications__time {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}

.admin-notifications__unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--admin-primary);
  flex-shrink: 0;
}

.admin-notifications__mark-form {
  flex-shrink: 0;
  margin: 0;
}
.admin-notifications__mark-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--admin-border-light);
  border-radius: 50%;
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-notifications__mark-form button:hover {
  background: var(--admin-primary);
  color: #ffffff;
  border-color: var(--admin-primary);
}

.admin-notifications__mark-all-form {
  display: inline-flex;
  margin: 0;
}

.admin-notifications-config {
  max-width: 880px;
  /* --- 리스트 ---------------------------------------------------- */
}
.admin-notifications-config__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}
.admin-notifications-config {
  /* --- 항목 카드 -------------------------------------------------- */
}
.admin-notifications-config__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon info toggle" "form form form";
  column-gap: var(--admin-space);
  row-gap: var(--admin-space);
  align-items: center;
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-notifications-config__item:hover {
  border-color: var(--admin-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.admin-notifications-config__item.is-on {
  border-color: var(--admin-border);
  background: var(--admin-card-bg);
}
.admin-notifications-config__item.is-off {
  background: var(--admin-grey-50);
}
.admin-notifications-config__item.is-off .admin-notifications-config__item-icon {
  opacity: 0.45;
}
.admin-notifications-config__item.is-off .admin-notifications-config__item-label {
  color: var(--admin-text-secondary);
}
.admin-notifications-config__item.is-off .admin-notifications-config__item-state {
  color: var(--admin-text-muted);
  background: var(--admin-grey-100);
}
.admin-notifications-config__item.is-off .admin-notifications-config__recipients-form {
  opacity: 0.7;
}
.admin-notifications-config__item {
  /* --- 반응형 ---------------------------------------------------- */
}
@media (max-width: 1024px) {
  .admin-notifications-config__item {
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon info" "toggle toggle" "form form";
    padding: var(--admin-space);
  }
}
.admin-notifications-config {
  /* --- 아이콘 ---------------------------------------------------- */
}
.admin-notifications-config__item-icon {
  grid-area: icon;
  align-self: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--admin-radius-sm);
  background: color-mix(in srgb, var(--admin-primary) 8%, transparent);
  color: var(--admin-primary);
  font-size: 1.7rem;
  transition: opacity var(--admin-duration) var(--admin-ease);
}
.is-off .admin-notifications-config__item-icon {
  background: var(--admin-grey-100);
  color: var(--admin-text-muted);
}
.admin-notifications-config {
  /* --- 정보 영역 -------------------------------------------------- */
}
.admin-notifications-config__item-info {
  grid-area: info;
  align-self: center;
  min-width: 0;
}
.admin-notifications-config__item-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space-3xs);
}
.admin-notifications-config__item-label {
  font-size: var(--admin-fs-lg);
  font-weight: 600;
  color: var(--admin-text);
  line-height: 1.4;
}
.admin-notifications-config__item-group {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--admin-radius-full);
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs);
  font-weight: 500;
}
.admin-notifications-config__item-state {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: var(--admin-fs-xs);
  font-weight: 500;
  color: var(--admin-success-text, var(--admin-success));
  background: color-mix(in srgb, var(--admin-success) 12%, transparent);
  border-radius: var(--admin-radius-full);
}
.admin-notifications-config__item-desc {
  margin: 0;
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
  line-height: 1.55;
}
.admin-notifications-config {
  /* --- 토글 영역 -------------------------------------------------- */
}
.admin-notifications-config__item-toggle {
  grid-area: toggle;
  align-self: center;
  display: flex;
  align-items: center;
}
@media (max-width: 1024px) {
  .admin-notifications-config__item-toggle {
    justify-content: flex-end;
    padding-top: var(--admin-space-xs);
  }
}
.admin-notifications-config .admin-toggle-switch.is-on .admin-toggle-switch__hint {
  color: var(--admin-success-text);
}
.admin-notifications-config .admin-toggle-switch.is-off .admin-toggle-switch__hint {
  color: var(--admin-text-muted);
}
.admin-notifications-config {
  /* --- 받는 사람 폼 ----------------------------------------------- */
}
.admin-notifications-config__recipients-form {
  grid-area: form;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
  padding-top: var(--admin-space);
  border-top: 1px dashed var(--admin-border-light);
}
.admin-notifications-config__field {
  margin: 0;
}
.admin-notifications-config__field[hidden] {
  display: none;
}
.admin-notifications-config__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--admin-space-2xs);
}
.admin-notifications-config {
  /* --- 빈 상태 ---------------------------------------------------- */
}
.admin-notifications-config__empty {
  margin: var(--admin-space-lg) 0;
  padding: var(--admin-space-xl);
  background: var(--admin-card-bg);
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body);
  text-align: center;
}
.admin-notifications-config__empty code {
  padding: 2px 6px;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-sm, 4px);
  font-family: var(--admin-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.92em;
}

.admin-analytics {
  --an-accent: var(--admin-primary);
}
.admin-analytics .analytics-header__range {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-2xs);
  align-items: center;
}
.admin-analytics .analytics-header__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-3xs);
  padding: var(--admin-space-3xs) var(--admin-space-sm);
  border-radius: var(--admin-radius-full);
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  white-space: nowrap;
}
.admin-analytics .analytics-header__chip i {
  font-size: 0.92em;
  opacity: 0.85;
}
.admin-analytics .analytics-header__chip--soft {
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
}
.admin-analytics .analytics-header__chip--soft i {
  color: var(--admin-text-muted);
  opacity: 1;
}
.admin-analytics .analytics-header__dash {
  opacity: 0.65;
}
.admin-analytics .analytics-manual {
  margin-bottom: var(--admin-space-lg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-card-bg);
  overflow: hidden;
  box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-manual__summary {
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-sm) var(--admin-space-lg);
  cursor: pointer;
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text);
  background: var(--admin-grey-50);
  list-style: none;
}
.admin-analytics .analytics-manual__summary::-webkit-details-marker {
  display: none;
}
.admin-analytics .analytics-manual__summary:hover {
  background: var(--admin-grey-100);
}
.admin-analytics .analytics-manual__summary .fa-circle-question {
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-manual__summary .analytics-manual__chev {
  margin-left: auto;
  transition: transform 0.2s ease;
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-manual[open] .analytics-manual__chev {
  transform: rotate(180deg);
}
.admin-analytics .analytics-manual__body {
  padding: var(--admin-space-lg) var(--admin-space-xl) var(--admin-space-xl);
  border-top: 1px solid var(--admin-border-light);
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
}
.admin-analytics .analytics-manual__body p {
  margin: 0 0 var(--admin-space-sm);
}
.admin-analytics .analytics-manual__body ul {
  margin: 0 0 var(--admin-space) 1.3em;
  padding: 0;
}
.admin-analytics .analytics-manual__body ul li {
  margin-bottom: var(--admin-space-3xs);
}
.admin-analytics .analytics-manual__body strong {
  color: var(--admin-text);
}
.admin-analytics .analytics-manual__body code {
  font-family: 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: var(--admin-grey-200);
  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-manual__table-wrap {
  margin: 0 0 var(--admin-space);
  overflow-x: auto;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
}
.admin-analytics .analytics-manual__formula {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}
.admin-analytics .analytics-manual__formula th, .admin-analytics .analytics-manual__formula td {
  padding: var(--admin-space-2xs) var(--admin-space-sm);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-analytics .analytics-manual__formula thead th {
  background: var(--admin-grey-50);
  color: var(--admin-text);
  font-weight: 800;
  font-size: var(--admin-fs-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--admin-border);
  white-space: nowrap;
}
.admin-analytics .analytics-manual__formula tbody th[scope=row] {
  color: var(--admin-text);
  font-weight: 700;
  white-space: nowrap;
  width: 9rem;
}
.admin-analytics .analytics-manual__formula tbody tr:last-child th,
.admin-analytics .analytics-manual__formula tbody tr:last-child td {
  border-bottom: 0;
}
.admin-analytics .analytics-manual__formula tbody tr:hover {
  background: var(--admin-grey-50);
}
.admin-analytics .analytics-manual__formula code {
  font-family: 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-toolbar {
  display: grid;
  gap: var(--admin-space-sm);
  padding: var(--admin-space) var(--admin-space-lg);
  margin-bottom: var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-toolbar__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-sm) var(--admin-space-lg);
}
.admin-analytics .analytics-toolbar__sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-sm) var(--admin-space-lg);
  padding-top: var(--admin-space-sm);
  border-top: 1px dashed var(--admin-border);
}
.admin-analytics .analytics-fg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--admin-space-2xs);
}
.admin-analytics .analytics-fg__label {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-3xs);
  font-size: var(--admin-fs-sm);
  font-weight: 800;
  color: var(--admin-text-muted);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.admin-analytics .analytics-fg__label i {
  font-size: 0.95em;
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  background: var(--admin-grey-100);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-full);
}
.admin-analytics .analytics-seg__item {
  display: inline-flex;
  align-items: center;
  padding: var(--admin-space-3xs) var(--admin-space-sm);
  border-radius: var(--admin-radius-full);
  background: transparent;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.admin-analytics .analytics-seg__item:hover {
  background: var(--admin-white);
  color: var(--admin-text);
}
.admin-analytics .analytics-seg__item.is-active {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.admin-analytics .analytics-toolbar__dates {
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs);
}
.admin-analytics .analytics-toolbar__date {
  padding: var(--admin-space-3xs) var(--admin-space-2xs);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text);
  background: var(--admin-white);
}
.admin-analytics .analytics-toolbar__tilde {
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-summary {
  margin-bottom: var(--admin-space-lg);
  padding: var(--admin-space-lg);
  background: linear-gradient(180deg, var(--admin-grey-50), var(--admin-white));
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-summary__head {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space-sm);
  padding-bottom: var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-analytics .analytics-summary__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border-radius: var(--admin-radius);
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  font-size: var(--admin-fs-body);
}
.admin-analytics .analytics-summary__title {
  margin: 0;
  font-size: var(--admin-fs-body-xl);
  font-weight: 800;
  color: var(--admin-text);
}
.admin-analytics .analytics-summary__sub {
  margin: 1px 0 0;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-space-2xs) var(--admin-space-lg);
}
.admin-analytics .analytics-summary__item {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-2xs);
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
  line-height: 1.5;
}
.admin-analytics .analytics-summary__item i {
  margin-top: 0.2em;
  color: var(--admin-success-text);
  font-size: 0.95em;
  flex: 0 0 auto;
}
.admin-analytics .analytics-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--admin-space);
  margin-bottom: var(--admin-space);
}
@media (max-width: 1320px) {
  .admin-analytics .analytics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 544px) {
  .admin-analytics .analytics-kpis {
    grid-template-columns: 1fr;
  }
}
.admin-analytics .analytics-kpi {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: var(--admin-space-sm);
  row-gap: var(--admin-space-3xs);
  align-items: center;
  padding: var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-elevation-1);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.admin-analytics .analytics-kpi:hover {
  box-shadow: var(--admin-elevation-2);
  transform: translateY(-1px);
}
.admin-analytics .analytics-kpi--accent {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__label,
.admin-analytics .analytics-kpi--accent .analytics-kpi__hint {
  color: color-mix(in srgb, var(--admin-on-primary, #fff) 70%, transparent);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__value {
  color: var(--admin-on-primary, #fff);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__icon {
  background: color-mix(in srgb, var(--admin-on-primary, #fff) 14%, transparent);
  color: var(--admin-on-primary, #fff);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__delta--none {
  color: color-mix(in srgb, var(--admin-on-primary, #fff) 50%, transparent);
}
.admin-analytics .analytics-kpi__icon {
  grid-row: 1/span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--admin-radius);
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-menu);
}
.admin-analytics .analytics-kpi__label {
  align-self: end;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-3xs);
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-kpi__label-text {
  font-weight: inherit;
  color: inherit;
}
.admin-analytics .analytics-kpi__hint {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-grey-500);
}
.admin-analytics .analytics-kpi__info,
.admin-analytics .analytics-metric__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  margin-left: var(--admin-space-3xs);
  border-radius: 50%;
  color: var(--admin-text-muted);
  cursor: help;
  font-size: 0.95em;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.admin-analytics .analytics-kpi__info:hover, .admin-analytics .analytics-kpi__info:focus,
.admin-analytics .analytics-metric__info:hover,
.admin-analytics .analytics-metric__info:focus {
  color: var(--admin-text);
  background: var(--admin-grey-100);
  outline: 0;
}
.admin-analytics .analytics-kpi__info i,
.admin-analytics .analytics-metric__info i {
  line-height: 1;
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__info {
  color: color-mix(in srgb, var(--admin-on-primary, #fff) 65%, transparent);
}
.admin-analytics .analytics-kpi--accent .analytics-kpi__info:hover,
.admin-analytics .analytics-kpi--accent .analytics-kpi__info:focus {
  color: var(--admin-on-primary, #fff);
  background: color-mix(in srgb, var(--admin-on-primary, #fff) 14%, transparent);
}
.admin-analytics .analytics-kpi__value {
  align-self: start;
  font-size: var(--admin-fs-display);
  font-weight: 800;
  line-height: 1.05;
  color: var(--admin-text);
  letter-spacing: -0.02em;
}
.admin-analytics .analytics-kpi__deltawrap {
  grid-column: 1/-1;
  margin-top: var(--admin-space-3xs);
}
.admin-analytics .analytics-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-3xs);
  padding: 2px var(--admin-space-2xs);
  border-radius: var(--admin-radius-full);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
}
.admin-analytics .analytics-kpi__delta--up {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
}
.admin-analytics .analytics-kpi__delta--down {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
}
.admin-analytics .analytics-kpi__delta--flat {
  background: var(--admin-grey-100);
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-kpi__delta--none {
  padding: 0;
  background: transparent;
  color: var(--admin-grey-500);
  font-weight: 600;
}
.admin-analytics .analytics-kpi__delta-cap {
  font-weight: 500;
  color: inherit;
  opacity: 0.7;
}
.admin-analytics .analytics-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--admin-space);
  margin-bottom: var(--admin-space-lg);
}
.admin-analytics .analytics-metric {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-grey-100);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body);
}
.admin-analytics .analytics-metric__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.admin-analytics .analytics-metric__label {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-3xs);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-metric__label-text {
  font-weight: inherit;
  color: inherit;
}
.admin-analytics .analytics-metric__value {
  font-size: var(--admin-fs-menu);
  font-weight: 800;
  line-height: 1.1;
  color: var(--admin-text);
}
.admin-analytics .analytics-metric__hint {
  margin-left: auto;
  font-size: var(--admin-fs-xs);
  color: var(--admin-grey-500);
  white-space: nowrap;
}
.admin-analytics .analytics-grid {
  display: grid;
  gap: var(--admin-space);
  margin-bottom: var(--admin-space);
}
.admin-analytics .analytics-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-analytics .analytics-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-analytics .analytics-card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  margin-bottom: var(--admin-space);
  overflow: hidden;
  box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-card--wide {
  width: 100%;
}
.admin-analytics .analytics-card__header {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space) var(--admin-space-lg);
  border-bottom: 1px solid var(--admin-border-light);
  background: linear-gradient(180deg, var(--admin-grey-50), var(--admin-white));
}
.admin-analytics .analytics-card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  font-size: var(--admin-fs-body);
}
.admin-analytics .analytics-card__title {
  margin: 0;
  font-size: var(--admin-fs-body-xl);
  font-weight: 800;
  color: var(--admin-text);
}
.admin-analytics .analytics-card__desc {
  margin: 1px 0 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-card__body {
  padding: var(--admin-space-lg);
  position: relative;
}
.admin-analytics .analytics-card__body--flush {
  padding: 0;
}
.admin-analytics .analytics-chart-canvas {
  width: 100% !important;
  min-height: 240px;
  max-height: 340px;
}
.admin-analytics .analytics-funnel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--admin-space-sm);
}
.admin-analytics .analytics-funnel__empty {
  text-align: center;
  color: var(--admin-text-muted);
  padding: var(--admin-space-2xl);
}
.admin-analytics .analytics-funnel__row {
  display: grid;
  grid-template-columns: 130px 1fr 120px;
  align-items: center;
  gap: var(--admin-space-sm);
}
.admin-analytics .analytics-funnel__label {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  font-weight: 700;
}
.admin-analytics .analytics-funnel__bar {
  height: 24px;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-sm);
  overflow: hidden;
}
.admin-analytics .analytics-funnel__bar span {
  display: block;
  height: 100%;
  min-width: 4px;
  background: linear-gradient(90deg, var(--admin-grey-600), var(--admin-grey-900));
  border-radius: var(--admin-radius-sm);
  transition: width 0.4s ease;
}
.admin-analytics .analytics-funnel__meta {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--admin-space-3xs);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-funnel__meta strong {
  color: var(--admin-text);
  font-size: var(--admin-fs-body-lg);
  font-weight: 800;
}
.admin-analytics .analytics-funnel__meta em {
  font-style: normal;
}
.admin-analytics .analytics-table {
  margin: 0;
}
.admin-analytics .analytics-table th.num, .admin-analytics .analytics-table td.num {
  text-align: right;
  white-space: nowrap;
}
.admin-analytics .analytics-table td.empty {
  text-align: center;
  color: var(--admin-text-muted);
  padding: var(--admin-space-2xl);
}
.admin-analytics .analytics-table tbody tr:hover {
  background: var(--admin-grey-50);
}
.admin-analytics .analytics-path {
  font-family: 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-heatmap__legend-step--1 {
  background: color-mix(in srgb, var(--admin-text) 10%, transparent);
}
.admin-analytics .analytics-heatmap__legend-step--2 {
  background: color-mix(in srgb, var(--admin-text) 30%, transparent);
}
.admin-analytics .analytics-heatmap__legend-step--3 {
  background: color-mix(in srgb, var(--admin-text) 55%, transparent);
}
.admin-analytics .analytics-heatmap__legend-step--4 {
  background: color-mix(in srgb, var(--admin-text) 80%, transparent);
}
.admin-analytics .analytics-tabs {
  margin-top: var(--admin-space);
}
.admin-analytics .analytics-condbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-2xs);
  align-items: center;
  margin-bottom: var(--admin-space-sm);
}
.admin-analytics .analytics-realtime {
  margin-bottom: var(--admin-space-lg);
}
.admin-analytics .analytics-realtime__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--admin-space-2xs);
  margin-bottom: var(--admin-space-sm);
  padding: 0 var(--admin-space-3xs);
}
.admin-analytics .analytics-realtime__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--admin-success);
  box-shadow: 0 0 0 0 rgba(var(--admin-success-rgb), 0.45);
  animation: analyticsPulse 2s infinite;
}
@keyframes analyticsPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--admin-success-rgb), 0.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(var(--admin-success-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--admin-success-rgb), 0);
  }
}
.admin-analytics .analytics-realtime__title {
  font-size: var(--admin-fs-body-lg);
  font-weight: 800;
  color: var(--admin-text);
}
.admin-analytics .analytics-realtime__sub {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-realtime__sub strong {
  color: var(--admin-text);
  font-weight: 800;
}
.admin-analytics .analytics-realtime__nums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--admin-space);
  margin-bottom: var(--admin-space);
}
.admin-analytics .analytics-realtime__num {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-realtime__num.is-accent {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
}
.admin-analytics .analytics-realtime__num.is-accent .analytics-realtime__num-value {
  color: var(--admin-on-primary);
}
.admin-analytics .analytics-realtime__num.is-accent .analytics-realtime__num-label {
  color: rgba(255, 255, 255, 0.7);
}
.admin-analytics .analytics-realtime__num.is-accent .analytics-realtime__num-ico {
  color: rgba(255, 255, 255, 0.85);
}
.admin-analytics .analytics-realtime__num-ico {
  position: absolute;
  top: var(--admin-space);
  right: var(--admin-space-lg);
  font-size: var(--admin-fs-body);
  color: var(--admin-grey-400);
}
.admin-analytics .analytics-realtime__num-label {
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-realtime__num-value {
  font-size: var(--admin-fs-subtitle);
  font-weight: 800;
  line-height: 1.05;
  color: var(--admin-text);
  letter-spacing: -0.02em;
}
.admin-analytics .analytics-realtime__panel {
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-elevation-1);
}
.admin-analytics .analytics-realtime__panel-head {
  display: flex;
  align-items: center;
  gap: var(--admin-space-3xs);
  margin-bottom: var(--admin-space-sm);
  padding-bottom: var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-border-light);
  font-size: var(--admin-fs-sm);
  font-weight: 800;
  color: var(--admin-text-secondary);
}
.admin-analytics .analytics-realtime__panel-head i {
  color: var(--admin-warn);
}
.admin-analytics .analytics-realtime__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--admin-space-2xl);
}
.admin-analytics .analytics-realtime__list li {
  display: flex;
  align-items: baseline;
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-3xs) 0;
  border-bottom: 1px dashed var(--admin-border-light);
  font-size: var(--admin-fs-sm);
}
.admin-analytics .analytics-realtime__list li .analytics-path {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-analytics .analytics-realtime__list li em {
  font-style: normal;
  font-weight: 800;
  color: var(--admin-text);
  flex: 0 0 auto;
}
.admin-analytics .analytics-realtime__rank {
  flex: 0 0 1.4rem;
  text-align: center;
  font-size: var(--admin-fs-xs);
  font-weight: 800;
  color: var(--admin-text-muted);
  font-variant-numeric: tabular-nums;
}
.admin-analytics .analytics-realtime__empty {
  grid-column: 1/-1;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-sm);
  padding: var(--admin-space) 0;
  border: 0;
}
.admin-analytics .analytics-table th.rank, .admin-analytics .analytics-table td.rank {
  width: 2.6rem;
  text-align: center;
  color: var(--admin-text-muted);
  font-variant-numeric: tabular-nums;
}
.admin-analytics .analytics-rate.is-warn {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
}
.admin-analytics .analytics-muted {
  color: var(--admin-text-muted);
  font-weight: 600;
}
.admin-analytics .analytics-note {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-2xs);
  margin: 0 0 var(--admin-space-lg);
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-grey-50);
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-analytics .analytics-note i {
  margin-top: 0.15em;
  color: var(--admin-text-muted);
  flex: 0 0 auto;
}
.admin-analytics .analytics-note code {
  font-family: 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));
}
.admin-analytics .analytics-locale-tabs {
  border-bottom: 2px solid var(--admin-border);
  background: var(--admin-grey-50, #f8f8f8);
  padding: 0 var(--admin-content-px, 24px);
  margin-bottom: 0;
}
.admin-analytics .analytics-locale-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
}
.admin-analytics .analytics-locale-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: var(--admin-fs-sm, 0.9rem);
  font-weight: 600;
  color: var(--admin-text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.admin-analytics .analytics-locale-tabs__tab:hover {
  color: var(--admin-text);
  border-bottom-color: var(--admin-grey-300, #ccc);
}
.admin-analytics .analytics-locale-tabs__tab--active {
  color: var(--admin-primary, #0f172a);
  border-bottom-color: var(--admin-primary, #0f172a);
  background: transparent;
}
.admin-analytics .analytics-locale-tabs__tab-label {
  white-space: nowrap;
}
.admin-analytics .analytics-locale-tabs__tab .locale-flag {
  flex-shrink: 0;
  width: 20px;
  height: 14px;
  border-radius: 2px;
}
.admin-analytics .analytics-ip-list .analytics-table__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}
.admin-analytics .analytics-ip-list__note {
  margin-top: var(--admin-space-sm, 8px);
  font-size: var(--admin-fs-xs, 0.8rem);
  color: var(--admin-text-muted);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.5;
}
.admin-analytics .analytics-empty-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--admin-space, 16px);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-sm, 0.9rem);
}
.admin-analytics .analytics-empty-msg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--admin-grey-100);
  padding: 0.05em 0.35em;
  border-radius: var(--admin-radius-xs);
  color: var(--admin-text);
}
.admin-analytics .analytics-excluded-ips .analytics-table__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}
.admin-analytics .analytics-excluded-ips__form {
  margin-bottom: var(--admin-space, 16px);
}
.admin-analytics .analytics-excluded-ips__form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--admin-space, 16px);
}
.admin-analytics .analytics-excluded-ips__form-row .admin-form__block {
  margin-bottom: 0;
}
.admin-analytics .analytics-excluded-ips__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-sm, 8px);
  margin-top: var(--admin-space-sm, 8px);
}
@media (max-width: 640px) {
  .admin-analytics .analytics-excluded-ips__form-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1320px) {
  .admin-analytics .analytics-kpis,
  .admin-analytics .analytics-metrics,
  .admin-analytics .analytics-realtime__nums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-analytics .analytics-metrics--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-analytics .analytics-realtime__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .admin-analytics .analytics-grid--2,
  .admin-analytics .analytics-grid--3 {
    grid-template-columns: 1fr;
  }
  .admin-analytics .analytics-summary__list {
    grid-template-columns: 1fr;
  }
  .admin-analytics .analytics-funnel__row {
    grid-template-columns: 96px 1fr 96px;
  }
  .admin-analytics .analytics-header__range {
    width: 100%;
  }
}
@media (max-width: 544px) {
  .admin-analytics .analytics-kpis,
  .admin-analytics .analytics-metrics,
  .admin-analytics .analytics-metrics--3,
  .admin-analytics .analytics-realtime__nums,
  .admin-analytics .analytics-realtime__list {
    grid-template-columns: 1fr;
  }
  .admin-analytics .analytics-kpi__value {
    font-size: var(--admin-fs-subtitle);
  }
  .admin-analytics .analytics-metric__hint {
    display: none;
  }
  .admin-analytics .analytics-toolbar {
    padding: var(--admin-space) var(--admin-space);
  }
}
.admin-analytics .an-grid {
  display: grid;
  gap: var(--admin-space-lg);
}
.admin-analytics .an-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.admin-analytics .an-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.admin-analytics .an-grid--2-1 {
  grid-template-columns: 2fr 1fr;
}
.admin-analytics .an-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--admin-space-2xl);
}
.admin-analytics .an-kpi {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: 16px;
  padding: var(--admin-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  transition: transform 0.18s, box-shadow 0.18s;
  cursor: default;
}
.admin-analytics .an-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}
.admin-analytics .an-kpi__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--admin-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: var(--admin-space-2xs);
}
.admin-analytics .an-kpi__label {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  font-weight: 500;
}
.admin-analytics .an-kpi__value {
  font-size: var(--admin-fs-display);
  font-weight: 700;
  line-height: 1.1;
  color: var(--admin-text);
  letter-spacing: -0.02em;
}
.admin-analytics .an-kpi__delta {
  font-size: var(--admin-fs-xs);
  display: flex;
  align-items: center;
  gap: 2px;
}
.admin-analytics .an-kpi__delta-cap {
  color: var(--admin-text-muted);
  font-weight: 400;
}
.admin-analytics .an-kpi--blue .an-kpi__icon {
  background: #eff6ff;
  color: #3b82f6;
}
.admin-analytics .an-kpi--green .an-kpi__icon {
  background: #f0fdf4;
  color: #10b981;
}
.admin-analytics .an-kpi--purple .an-kpi__icon {
  background: #faf5ff;
  color: #8b5cf6;
}
.admin-analytics .an-kpi--orange .an-kpi__icon {
  background: #fff7ed;
  color: #f97316;
}
.admin-analytics .an-kpi--yellow .an-kpi__icon {
  background: #fefce8;
  color: #eab308;
}
.admin-analytics .an-kpi--primary {
  border-color: #10b981;
  background: linear-gradient(135deg, #f0fdf4 0%, var(--admin-card-bg) 60%);
}
.admin-analytics .an-kpi--primary .an-kpi__value {
  color: #059669;
}
.admin-analytics .an-delta {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--admin-radius-xs);
}
.admin-analytics .an-delta--up {
  color: #059669;
  background: #f0fdf4;
}
.admin-analytics .an-delta--down {
  color: #dc2626;
  background: #fef2f2;
}
.admin-analytics .an-delta--flat {
  color: var(--admin-text-muted);
}
.admin-analytics .an-delta--none {
  color: var(--admin-text-muted);
}
.admin-analytics .an-insights {
  background: #f8fafc;
  border-radius: 20px;
  padding: 3.2rem;
  border: 1px solid var(--admin-border-light, #e5e7eb);
}
.admin-analytics .an-insights__head {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space);
  font-weight: 600;
  color: var(--admin-text);
  font-size: var(--admin-fs-body);
}
.admin-analytics .an-insights__head i {
  color: #8b5cf6;
  font-size: 1.1rem;
}
.admin-analytics .an-insights__head small {
  margin-left: auto;
  font-size: var(--admin-fs-xs);
  font-weight: 400;
  color: var(--admin-text-muted);
}
.admin-analytics .an-insights__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
}
.admin-analytics .an-insights__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.6;
}
.admin-analytics .an-insights__list li i {
  color: #10b981;
  flex-shrink: 0;
  margin-top: 3px;
}
.admin-analytics .an-insights--marketing {
  background: linear-gradient(135deg, #faf5ff 0%, #f8fafc 100%);
  border-color: #e9d5ff;
}
.admin-analytics .an-insights--marketing .an-insights__head i {
  color: #7c3aed;
}
.admin-analytics .an-insights__list--cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--admin-space-sm) var(--admin-space-lg);
}
@media (max-width: 768px) {
  .admin-analytics .an-insights__list--cols {
    grid-template-columns: 1fr;
  }
}
.admin-analytics .an-insights li.an-insight--up i {
  color: #059669;
}
.admin-analytics .an-insights li.an-insight--down i {
  color: #dc2626;
}
.admin-analytics .an-card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg, 12px);
  overflow: visible;
}
.admin-analytics .an-card--wide {
  grid-column: 1/-1;
}
.admin-analytics .an-card__header {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space) var(--admin-space-lg);
  border-bottom: 1px solid var(--admin-border-light, #f0f0f0);
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius-lg, 12px) var(--admin-radius-lg, 12px) 0 0;
}
.admin-analytics .an-card__header > i {
  color: var(--admin-primary);
  width: 1.6rem;
  text-align: center;
  flex-shrink: 0;
}
.admin-analytics .an-card__title {
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
  margin: 0;
}
.admin-analytics .an-card__desc {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  margin: 0;
  margin-left: auto;
}
.admin-analytics .an-card__body {
  padding: var(--admin-space-lg);
  border-radius: 0 0 var(--admin-radius-lg, 12px) var(--admin-radius-lg, 12px);
}
.admin-analytics .an-kpi-grid + .an-kpi-grid, .admin-analytics .an-kpi-grid + .an-insights, .admin-analytics .an-kpi-grid + .an-grid, .admin-analytics .an-kpi-grid + .an-card, .admin-analytics .an-kpi-grid + .an-realtime,
.admin-analytics .an-insights + .an-kpi-grid,
.admin-analytics .an-insights + .an-insights,
.admin-analytics .an-insights + .an-grid,
.admin-analytics .an-insights + .an-card,
.admin-analytics .an-insights + .an-realtime,
.admin-analytics .an-grid + .an-kpi-grid,
.admin-analytics .an-grid + .an-insights,
.admin-analytics .an-grid + .an-grid,
.admin-analytics .an-grid + .an-card,
.admin-analytics .an-grid + .an-realtime,
.admin-analytics .an-card + .an-kpi-grid,
.admin-analytics .an-card + .an-insights,
.admin-analytics .an-card + .an-grid,
.admin-analytics .an-card + .an-card,
.admin-analytics .an-card + .an-realtime,
.admin-analytics .an-realtime + .an-kpi-grid,
.admin-analytics .an-realtime + .an-insights,
.admin-analytics .an-realtime + .an-grid,
.admin-analytics .an-realtime + .an-card,
.admin-analytics .an-realtime + .an-realtime {
  margin-top: var(--admin-space-2xl);
}
.admin-analytics .an-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--admin-text-muted);
  cursor: help;
  position: relative;
  flex-shrink: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.admin-analytics .an-tip:hover, .admin-analytics .an-tip:focus-visible {
  color: var(--admin-text);
  background: var(--admin-grey-100);
  outline: 0;
}
.admin-analytics .an-tip i {
  font-size: 0.85em;
  line-height: 1;
}
.admin-analytics .an-tip::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 100;
  left: 50%;
  bottom: calc(100% + var(--admin-space-2xs));
  transform: translateX(-50%);
  width: max-content;
  max-width: 26rem;
  padding: var(--admin-space-xs) var(--admin-space-sm);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-text, #171717);
  color: #fff;
  font-size: var(--admin-fs-xs);
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.admin-analytics .an-tip:hover::after, .admin-analytics .an-tip:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
.admin-analytics .an-tip--bottom::after {
  bottom: auto;
  top: calc(100% + var(--admin-space-2xs));
}
.admin-analytics .an-tip--left::after {
  left: auto;
  right: calc(100% + var(--admin-space-2xs));
  bottom: 50%;
  transform: translateY(50%);
}
.admin-analytics .an-tip--right::after {
  left: calc(100% + var(--admin-space-2xs));
  right: auto;
  bottom: 50%;
  transform: translateY(50%);
}
.admin-analytics .an-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-analytics .an-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-fs-body);
}
.admin-analytics .an-table thead th {
  position: sticky;
  top: 0;
  background: var(--admin-grey-50, #f8f8f8);
  padding: 10px var(--admin-space-sm);
  text-align: left;
  font-weight: 600;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--admin-border);
  white-space: nowrap;
}
.admin-analytics .an-table tbody tr {
  border-bottom: 1px solid var(--admin-border-light, #f3f3f3);
  min-height: 56px;
  transition: background 0.1s;
}
.admin-analytics .an-table tbody tr:hover {
  background: #f8fafc;
}
.admin-analytics .an-table tbody tr:last-child {
  border-bottom: none;
}
.admin-analytics .an-table tbody td {
  padding: 14px var(--admin-space);
  color: var(--admin-text);
  vertical-align: middle;
}
.admin-analytics .an-table__rank {
  width: 48px;
  text-align: center;
}
.admin-analytics .an-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-analytics .an-table__path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-analytics .an-table__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--admin-fs-sm);
}
.admin-analytics .an-table-note {
  margin-top: var(--admin-space-sm);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-analytics .an-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--admin-grey-100);
  color: var(--admin-text-muted);
}
.admin-analytics .an-badge--gold {
  background: #fef3c7;
  color: #b45309;
}
.admin-analytics .an-badge--silver {
  background: #f1f5f9;
  color: #475569;
}
.admin-analytics .an-badge--bronze {
  background: #fdf2e9;
  color: #92400e;
}
.admin-analytics .an-cvr {
  font-weight: 600;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-analytics .an-cvr--mid {
  color: #2563eb;
}
.admin-analytics .an-cvr--high {
  color: #059669;
}
.admin-analytics .an-channel-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.admin-analytics .an-channel-dot--organic {
  background: #3b82f6;
}
.admin-analytics .an-channel-dot--social {
  background: #ec4899;
}
.admin-analytics .an-channel-dot--paid {
  background: #f59e0b;
}
.admin-analytics .an-channel-dot--campaign {
  background: #8b5cf6;
}
.admin-analytics .an-channel-dot--referral {
  background: #14b8a6;
}
.admin-analytics .an-channel-dot--direct {
  background: #6b7280;
}
.admin-analytics .an-channel-dot--internal {
  background: #9ca3af;
}
.admin-analytics .an-channel-dot--email {
  background: #f97316;
}
.admin-analytics .an-share-bar {
  display: inline-block;
  width: 60px;
  height: 6px;
  background: var(--admin-grey-100);
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
  overflow: hidden;
}
.admin-analytics .an-share-bar span {
  display: block;
  height: 100%;
  background: var(--admin-primary);
  border-radius: 3px;
}
.admin-analytics .an-legend-list {
  list-style: none;
  padding: 0;
  margin: var(--admin-space-sm) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}
.admin-analytics .an-legend-list__item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}
.admin-analytics .an-legend-list__item > strong {
  margin-left: auto;
  font-weight: 600;
  color: var(--admin-text);
}
.admin-analytics .an-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.admin-analytics .an-conv-list {
  list-style: none;
  padding: 0;
  margin: var(--admin-space-sm) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}
.admin-analytics .an-conv-list__item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-xs) 0;
  border-bottom: 1px solid var(--admin-border-light, #f3f3f3);
  font-size: var(--admin-fs-sm);
}
.admin-analytics .an-conv-list__item:last-child {
  border-bottom: none;
}
.admin-analytics .an-conv-list__item > i {
  color: var(--admin-text-muted);
  width: 1rem;
  text-align: center;
}
.admin-analytics .an-conv-list__item > span {
  flex: 1;
  color: var(--admin-text-secondary);
}
.admin-analytics .an-conv-list__item > strong {
  font-weight: 600;
  color: var(--admin-text);
  font-variant-numeric: tabular-nums;
}
.admin-analytics .an-conv-list__pct {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  min-width: 36px;
  text-align: right;
}
.admin-analytics .an-realtime {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg, 12px);
  overflow: hidden;
}
.admin-analytics .an-realtime__head {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space-lg);
  background: var(--admin-grey-50, #f8f8f8);
  border-bottom: 1px solid var(--admin-border-light, #f0f0f0);
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text);
}
.admin-analytics .an-realtime__head small {
  font-weight: 400;
  color: var(--admin-text-muted);
  margin-left: auto;
}
.admin-analytics .an-realtime__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  flex-shrink: 0;
}
.admin-analytics .an-realtime__body {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.admin-analytics .an-realtime__num {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--admin-space);
  border-right: 1px solid var(--admin-border-light, #f0f0f0);
  gap: 2px;
}
.admin-analytics .an-realtime__num.is-accent .an-realtime__num-val {
  color: #059669;
}
.admin-analytics .an-realtime__num-label {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-analytics .an-realtime__num-val {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--admin-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.admin-analytics .an-realtime__pages {
  flex: 2;
  padding: var(--admin-space);
}
.admin-analytics .an-realtime__pages-head {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: var(--admin-space-xs);
}
.admin-analytics .an-realtime__pages-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-analytics .an-realtime__pages-list li {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  font-size: var(--admin-fs-xs);
}
.admin-analytics .an-realtime__pages-list li em {
  font-style: normal;
  width: 16px;
  text-align: center;
  color: var(--admin-text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.admin-analytics .an-realtime__pages-list li span {
  flex: 1;
  color: var(--admin-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, monospace;
}
.admin-analytics .an-realtime__pages-list li b {
  font-weight: 600;
  color: var(--admin-text);
  font-variant-numeric: tabular-nums;
}
.admin-analytics .an-realtime__empty {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  font-style: italic;
}
.admin-analytics .an-empty {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-xl);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-sm);
  justify-content: center;
}
.admin-analytics .an-empty i {
  opacity: 0.5;
}
.admin-analytics .an-muted {
  color: var(--admin-text-muted);
}
.admin-analytics .an-warn {
  color: #ea580c;
}
.admin-analytics .an-empty--guide {
  flex-direction: column;
  text-align: center;
  gap: var(--admin-space-sm);
}
.admin-analytics .an-empty--guide strong {
  display: block;
  color: var(--admin-text);
  font-weight: 500;
}
.admin-analytics .an-empty__guide {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  max-width: 28rem;
  margin: 0 auto;
  line-height: 1.6;
}
@keyframes an-skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.admin-analytics .an-kpi--skeleton {
  pointer-events: none;
}
.admin-analytics .an-kpi--skeleton .an-kpi__icon, .admin-analytics .an-kpi--skeleton .an-kpi__label, .admin-analytics .an-kpi--skeleton .an-kpi__value {
  background: var(--admin-border, #e5e7eb);
  border-radius: var(--admin-radius-sm);
  color: transparent;
  animation: an-skeleton-pulse 1.6s ease-in-out infinite;
}
.admin-analytics .an-chart--skeleton {
  background: var(--admin-border, #e5e7eb);
  border-radius: var(--admin-radius);
  min-height: 20rem;
  animation: an-skeleton-pulse 1.6s ease-in-out infinite;
  display: block;
}
.admin-analytics .an-chart-canvas,
.admin-analytics .an-chart-canvas--sm {
  display: block;
  width: 100%;
  height: 28rem !important;
}
.admin-analytics .an-chart-canvas--sm {
  height: 24rem !important;
}
.admin-analytics .an-chart-canvas--donut {
  width: 320px !important;
  height: 320px !important;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}
.admin-analytics .an-donut-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28rem;
}
.admin-analytics .an-kpi-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .admin-analytics .an-kpi-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 544px) {
  .admin-analytics .an-kpi-grid--3 {
    grid-template-columns: 1fr;
  }
}
.admin-analytics .an-funnel {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) 0;
}
.admin-analytics .an-funnel__step {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--admin-space-sm);
  position: relative;
  min-height: 3.6rem;
}
.admin-analytics .an-funnel__bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #ede9fe 0%, #ddd6fe 100%);
  border-radius: var(--admin-radius-sm);
  z-index: 0;
  min-width: 4px;
  transition: width 0.6s ease;
}
.admin-analytics .an-funnel__label, .admin-analytics .an-funnel__count, .admin-analytics .an-funnel__pct {
  position: relative;
  z-index: 1;
}
.admin-analytics .an-funnel__label {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text);
  padding-left: var(--admin-space-sm);
}
.admin-analytics .an-funnel__count {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text);
  white-space: nowrap;
}
.admin-analytics .an-funnel__pct {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  white-space: nowrap;
  width: 4.5rem;
  text-align: right;
}
[data-theme*=dark] .admin-analytics .an-insights {
  background: var(--admin-grey-900, #111827);
  border-color: var(--admin-border, #374151);
}
[data-theme*=dark] .admin-analytics .an-insights--marketing {
  background: linear-gradient(135deg, #1e1b2e 0%, #111827 100%);
  border-color: #4c1d95;
}
[data-theme*=dark] .admin-analytics .an-kpi--primary {
  background: linear-gradient(135deg, #052e16 0%, var(--admin-card-bg) 60%);
  border-color: #059669;
}
[data-theme*=dark] .admin-analytics .an-table tbody tr:hover {
  background: var(--admin-grey-800, #1f2937);
}
[data-theme*=dark] .admin-analytics .an-badge--gold {
  background: #451a03;
  color: #fbbf24;
}
[data-theme*=dark] .admin-analytics .an-badge--silver {
  background: #1e293b;
  color: #94a3b8;
}
[data-theme*=dark] .admin-analytics .an-badge--bronze {
  background: #431407;
  color: #fb923c;
}
[data-theme*=dark] .admin-analytics .an-funnel__bar {
  background: linear-gradient(90deg, #2d1f5e 0%, #3b2a7a 100%);
}
@media (max-width: 1320px) {
  .admin-analytics .an-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .admin-analytics .an-grid--2,
  .admin-analytics .an-grid--3,
  .admin-analytics .an-grid--2-1 {
    grid-template-columns: 1fr;
  }
  .admin-analytics .an-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-analytics .an-realtime__body {
    flex-wrap: wrap;
  }
  .admin-analytics .an-realtime__pages {
    flex: 1 0 100%;
    border-top: 1px solid var(--admin-border-light, #f0f0f0);
  }
}
@media (max-width: 544px) {
  .admin-analytics .an-kpi-grid {
    grid-template-columns: 1fr;
  }
  .admin-analytics .an-realtime__num {
    padding: var(--admin-space-sm);
  }
  .admin-analytics .an-realtime__num-val {
    font-size: 1.4rem;
  }
}

.admin-ad-fraud .an-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-sm) var(--admin-space-lg);
  margin-bottom: var(--admin-space-lg);
}
.admin-ad-fraud .an-toolbar__hint {
  margin-left: auto;
  color: var(--admin-text-muted);
}

.admin-features {
  width: 100%;
  max-width: var(--figma-settings-panel-width);
  margin-inline: auto;
}
.admin-features__sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.admin-features__dialog {
  display: flex;
  flex-direction: column;
  min-height: min(100vh - 6rem, 72rem);
  max-height: var(--figma-settings-panel-max-height);
  overflow: hidden;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--figma-settings-radius);
  box-shadow: none;
}
.admin-features__dialog-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex: 0 0 auto;
  min-height: var(--figma-toolbar-height);
  padding-inline: var(--admin-space);
  border-bottom: 1px solid var(--color-border-default);
}
.admin-features__tabs {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: var(--admin-space-xs) 0;
  align-items: center;
}
.admin-features__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--figma-toolbar-height);
  width: var(--figma-toolbar-height);
  height: var(--figma-toolbar-height);
  color: var(--color-text-secondary);
  font-size: 2.4rem;
  text-decoration: none;
}
.admin-features__close:hover, .admin-features__close:focus-visible {
  color: var(--color-text-primary);
}
.admin-features__close:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-border-focus);
}
.admin-features__body {
  width: var(--figma-settings-content-width);
  max-width: 100%;
  margin-inline: auto;
  padding: var(--admin-space-xl) 0 var(--admin-space-4xl);
  overflow-y: auto;
}
.admin-features {
  /* --- 소그룹(섹션) ----------------------------------------------- */
}
.admin-features__section {
  margin: 0;
  padding: var(--admin-space-2xl) 0;
  border-top: 1px solid var(--color-border-default);
}
.admin-features__section:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.admin-features__section-title {
  margin: 0 0 var(--admin-space-xl);
  padding: 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2.8rem;
  color: var(--color-text-primary);
  letter-spacing: 0;
  border-bottom: 0;
}
.admin-features {
  /* --- 기능 목록 (카드형 행) -------------------------------------- */
}
.admin-features__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.admin-features__item {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-lg);
  min-height: 5.6rem;
  padding: var(--admin-space-lg) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-features__item + .admin-features__item {
  border-top: 1px solid var(--color-border-subtle);
}
.admin-features__item:hover {
  border-color: var(--color-border-subtle);
  box-shadow: none;
}
.admin-features__item.is-off {
  background: transparent;
}
.admin-features__item.is-off .admin-features__item-icon {
  opacity: 0.45;
}
.admin-features__item.is-off .admin-features__item-label {
  color: var(--admin-text-secondary);
}
.admin-features__item.is-off .admin-features__item-state {
  color: var(--admin-text-muted);
}
.admin-features__item.is-on {
  border-color: var(--color-border-subtle);
  background: transparent;
}
.admin-features__item.is-core {
  border-color: var(--color-border-subtle);
  background: transparent;
}
@media (max-width: 1024px) {
  .admin-features__item {
    padding: var(--admin-space-lg) var(--admin-space);
  }
}
.admin-features {
  /* --- 기능 아이콘 ------------------------------------------------ */
}
.admin-features__item-icon {
  display: none;
}
.admin-features__item-info {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
}
.admin-features {
  /* --- 레이블 행 (label + 상태 텍스트) --------------------------- */
}
.admin-features__item-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--admin-space-xs);
  margin-bottom: var(--admin-space-2xs);
}
.admin-features__item-label {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 2.4rem;
}
.admin-features__item-state {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--admin-space-xs);
  font-size: var(--admin-fs-xs);
  font-weight: 500;
  color: var(--figma-badge-new-text);
  background: var(--figma-badge-new-bg);
  border-radius: var(--figma-radius);
}
.is-off .admin-features__item-state {
  color: var(--color-text-secondary);
  background: var(--color-bg-hover);
}
.admin-features__item-desc {
  margin: 0;
  max-width: 54rem;
  font-size: 1.4rem;
  color: var(--color-text-secondary);
  line-height: 2rem;
}
.admin-features__item-toggle {
  order: 1;
  flex: 0 0 var(--figma-switch-width);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: var(--figma-switch-width);
  min-height: var(--figma-switch-height);
  padding-top: var(--admin-space-3xs);
}
@media (max-width: 1024px) {
  .admin-features__item-toggle {
    width: auto;
    padding-top: var(--admin-space-3xs);
  }
}
.admin-features {
  /* --- hint 상태 레이블 색 ---------------------------------------- */
}
.admin-features .admin-toggle-switch {
  gap: 0;
}
.admin-features .admin-toggle-switch__hint {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.admin-features .admin-toggle-switch.is-on .admin-toggle-switch__hint {
  color: var(--color-text-secondary);
}
.admin-features .admin-toggle-switch.is-off .admin-toggle-switch__hint {
  color: var(--color-text-secondary);
}
.admin-features {
  /* --- 코어 배지 -------------------------------------------------- */
}
.admin-features__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-2xs) var(--admin-space-xs);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--admin-radius-full);
  white-space: nowrap;
}
.admin-features__badge i {
  font-size: 1.1rem;
}
.admin-features__badge--core {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}
.admin-features {
  /* --- 빈 상태 ---------------------------------------------------- */
}
.admin-features__empty {
  padding: var(--admin-space-xl);
  background: var(--admin-card-bg);
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body);
  text-align: center;
}

.admin-prefs {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xl);
}

.admin-prefs__section {
  background: var(--admin-card-bg, var(--admin-surface));
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.admin-prefs__section-head {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
  padding: var(--admin-space-lg) var(--admin-space-xl);
  background: linear-gradient(180deg, var(--admin-grey-50, var(--admin-surface)) 0%, transparent 100%);
  border-bottom: 1px solid var(--admin-border);
}
@media (max-width: 1024px) {
  .admin-prefs__section-head {
    padding: var(--admin-space) var(--admin-space-lg);
  }
}

.admin-prefs__section-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--admin-radius);
  background: var(--admin-primary-light, var(--admin-grey-100));
  color: var(--admin-primary);
  font-size: 1.6rem;
}

.admin-prefs__section-headtxt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
}

.admin-prefs__section-title {
  margin: 0;
  font-size: var(--admin-fs-xl);
  font-weight: 700;
  color: var(--admin-text);
  letter-spacing: -0.01em;
}

.admin-prefs__section-desc {
  margin: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.5;
}

.admin-prefs__section-body {
  display: flex;
  flex-direction: column;
}

.admin-prefs__block {
  padding: var(--admin-space-xl);
}
.admin-prefs__block + .admin-prefs__block {
  border-top: 1px solid var(--admin-border-light, var(--admin-border));
}
@media (max-width: 1024px) {
  .admin-prefs__block {
    padding: var(--admin-space-lg);
  }
}

.admin-prefs__block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-space-xl);
}
@media (max-width: 1024px) {
  .admin-prefs__block-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--admin-space);
  }
}

.admin-prefs__block-headtxt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
}

.admin-prefs__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-3xs);
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  margin-bottom: var(--admin-space-3xs);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-text-secondary);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-full);
}
.admin-prefs__eyebrow > i {
  font-size: 0.9em;
}
.admin-prefs__eyebrow--light {
  color: #b45309;
  background: #fef3c7;
}
.admin-prefs__eyebrow--dark {
  color: #4338ca;
  background: #e0e7ff;
}

.admin-prefs__block-title {
  margin: 0;
  font-size: var(--admin-fs-lg);
  font-weight: 700;
  color: var(--admin-text);
  letter-spacing: -0.005em;
}

.admin-prefs__block-desc {
  margin: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.55;
  max-width: 64ch;
}

.admin-prefs__block-control {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
@media (max-width: 1024px) {
  .admin-prefs__block-control {
    width: 100%;
  }
}

.admin-prefs__mode-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-space-2xs);
  min-width: 32rem;
}
@media (max-width: 1024px) {
  .admin-prefs__mode-group {
    width: 100%;
    min-width: 0;
  }
}

.admin-prefs__mode-btn {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space);
  min-height: var(--figma-control-height, var(--admin-size-input-height));
  padding: var(--admin-space-sm) var(--admin-space);
  background: transparent;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  font: inherit;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-secondary);
  cursor: pointer;
  text-align: left;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-prefs__mode-btn > i {
  font-size: 1em;
}
.admin-prefs__mode-btn:hover {
  background: var(--admin-state-hover);
  color: var(--admin-text);
}
.admin-prefs__mode-btn:focus-visible {
  outline: none;
  box-shadow: var(--admin-focus-ring);
}
.admin-prefs__mode-btn[aria-checked=true] {
  background: var(--admin-primary-light);
  border-color: var(--admin-primary-border, var(--admin-primary));
  color: var(--admin-primary);
  box-shadow: none;
}
@media (max-width: 1024px) {
  .admin-prefs__mode-btn {
    flex: 1;
    justify-content: center;
  }
}

.admin-prefs__mode-indicator {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  border: 2px solid var(--admin-text-muted);
  border-radius: var(--admin-radius-full);
  background: transparent;
}

.admin-prefs__mode-btn[aria-checked=true] .admin-prefs__mode-indicator {
  border-color: var(--admin-primary);
  background: radial-gradient(circle, var(--admin-primary) 0 38%, transparent 42%);
}

.admin-prefs__mode-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
}

.admin-prefs__mode-label {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  color: var(--admin-text);
}

.admin-prefs__mode-desc {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs);
  font-weight: 400;
  line-height: 1.5;
}

.admin-prefs__font-scale {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-3xs);
  padding: 0.3rem;
  background: var(--admin-grey-100, var(--admin-surface));
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
}
@media (max-width: 1024px) {
  .admin-prefs__font-scale {
    width: 100%;
    justify-content: center;
  }
}

.admin-prefs__font-scale-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 0;
  border-radius: var(--admin-radius-sm);
  background: transparent;
  color: var(--admin-text-secondary);
  cursor: pointer;
}
.admin-prefs__font-scale-btn:hover, .admin-prefs__font-scale-btn:focus-visible {
  background: var(--admin-state-hover);
  color: var(--admin-text);
}
.admin-prefs__font-scale-btn:focus-visible {
  outline: none;
  box-shadow: var(--admin-focus-ring);
}
.admin-prefs__font-scale-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.admin-prefs__font-scale-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  height: 3.2rem;
  color: var(--admin-text);
  font-size: var(--admin-fs-body);
  font-weight: 700;
}
.admin-prefs__font-scale-label[data-admin-font-scale-value=sm] {
  font-size: var(--admin-fs-sm);
}
.admin-prefs__font-scale-label[data-admin-font-scale-value=lg] {
  font-size: var(--admin-fs-lg);
}

body.admin-shell-v2 .admin-prefs {
  max-width: 104rem;
  gap: var(--admin-space);
}
body.admin-shell-v2 .admin-prefs > .admin-page-header,
body.admin-shell-v2 .admin-prefs > .admin-nav-tabs {
  max-width: 100%;
}
body.admin-shell-v2 .admin-prefs__section {
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  background: var(--color-bg-surface);
  box-shadow: none;
}
body.admin-shell-v2 .admin-prefs__section-head {
  min-height: var(--figma-control-height);
  padding: var(--admin-space) var(--admin-space-lg);
  border-bottom-color: var(--color-border-default);
  background: var(--color-bg-subtle);
}
body.admin-shell-v2 .admin-prefs__section-icon {
  width: var(--figma-select-height);
  height: var(--figma-select-height);
  border: 1px solid var(--color-border-default);
  border-radius: var(--figma-radius);
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
  font-size: var(--admin-fs-base);
}
body.admin-shell-v2 .admin-prefs__section-title {
  color: var(--color-text-primary);
  font-size: var(--admin-fs-sm);
  line-height: 1.8rem;
  font-weight: 600;
  letter-spacing: 0;
}
body.admin-shell-v2 .admin-prefs__section-desc {
  color: var(--color-text-muted);
  font-size: var(--admin-fs-xs);
  line-height: 1.6rem;
}
body.admin-shell-v2 .admin-prefs__block {
  padding: 0;
}
body.admin-shell-v2 .admin-prefs__block + body.admin-shell-v2 .admin-prefs__block {
  border-top-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-prefs__block-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(32rem, max-content);
  align-items: center;
  gap: var(--admin-space-xl);
  min-height: 6.4rem;
  padding: var(--admin-space) var(--admin-space-lg);
}
body.admin-shell-v2 .admin-prefs__block-title {
  color: var(--color-text-primary);
  font-size: var(--admin-fs-sm);
  line-height: 1.8rem;
  font-weight: 600;
  letter-spacing: 0;
}
body.admin-shell-v2 .admin-prefs__block-desc {
  max-width: 56rem;
  color: var(--color-text-muted);
  font-size: var(--admin-fs-xs);
  line-height: 1.6rem;
}
body.admin-shell-v2 .admin-prefs__block-control {
  justify-content: flex-end;
  min-width: 0;
}
body.admin-shell-v2 .admin-prefs__mode-group,
body.admin-shell-v2 .admin-prefs__font-scale {
  padding: var(--admin-space-2xs);
  border-color: var(--color-border-default);
  border-radius: var(--figma-radius);
  background: transparent;
}
body.admin-shell-v2 .admin-prefs__mode-group {
  gap: var(--admin-space-2xs);
  min-width: 36rem;
  padding: 0;
  border: 0;
}
body.admin-shell-v2 .admin-prefs__mode-btn,
body.admin-shell-v2 .admin-prefs__font-scale-btn {
  min-height: var(--figma-select-height);
  border-radius: var(--figma-radius);
  color: var(--color-text-secondary);
  font-size: var(--admin-fs-xs);
  font-weight: 500;
}
body.admin-shell-v2 .admin-prefs__mode-btn:hover, body.admin-shell-v2 .admin-prefs__mode-btn:focus-visible,
body.admin-shell-v2 .admin-prefs__font-scale-btn:hover,
body.admin-shell-v2 .admin-prefs__font-scale-btn:focus-visible {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  box-shadow: none;
}
body.admin-shell-v2 .admin-prefs__mode-btn {
  padding: 0 var(--admin-space);
}
body.admin-shell-v2 .admin-prefs__mode-btn[aria-checked=true] {
  background: var(--color-bg-selected);
  border-color: var(--color-border-focus);
  color: var(--color-text-primary);
  box-shadow: none;
}
body.admin-shell-v2 .admin-prefs__mode-btn {
  align-items: flex-start;
  min-height: var(--figma-control-height);
  padding: var(--admin-space-sm) var(--admin-space);
  border: 1px solid var(--color-border-default);
}
body.admin-shell-v2 .admin-prefs__mode-btn:hover, body.admin-shell-v2 .admin-prefs__mode-btn:focus-visible {
  border-color: var(--color-border-default);
}
body.admin-shell-v2 .admin-prefs__mode-indicator {
  border-color: var(--color-text-muted);
}
body.admin-shell-v2 .admin-prefs__mode-btn[aria-checked=true] .admin-prefs__mode-indicator {
  border-color: var(--color-action-primary);
  background: radial-gradient(circle, var(--color-action-primary) 0 38%, transparent 42%);
}
body.admin-shell-v2 .admin-prefs__mode-label {
  color: var(--color-text-primary);
  font-size: var(--admin-fs-xs);
  line-height: 1.6rem;
}
body.admin-shell-v2 .admin-prefs__mode-desc {
  color: var(--color-text-muted);
  font-size: var(--admin-fs-xs);
  line-height: 1.6rem;
}
body.admin-shell-v2 .admin-prefs__font-scale-label {
  height: var(--figma-select-height);
  color: var(--color-text-primary);
  font-size: var(--admin-fs-base);
}
body.admin-shell-v2 .admin-segmented-control-form,
body.admin-shell-v2 .admin-segmented-control {
  max-width: 100%;
}
body.admin-shell-v2 .admin-segmented-control {
  justify-content: flex-end;
  flex-wrap: wrap;
}
body.admin-shell-v2 .admin-prefs--layout {
  max-width: 96rem;
}
body.admin-shell-v2 .admin-prefs--layout .admin-prefs__block-head {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--admin-space-sm);
}
body.admin-shell-v2 .admin-prefs--layout .admin-prefs__block-control {
  justify-content: flex-start;
  width: 100%;
}
body.admin-shell-v2 .admin-prefs--layout .admin-segmented-control-form,
body.admin-shell-v2 .admin-prefs--layout .admin-segmented-control {
  width: 100%;
}
body.admin-shell-v2 .admin-prefs--layout .admin-segmented-control {
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024px) {
  body.admin-shell-v2 .admin-prefs {
    max-width: none;
  }
  body.admin-shell-v2 .admin-prefs__block-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  body.admin-shell-v2 .admin-prefs__block-control {
    justify-content: flex-start;
  }
  body.admin-shell-v2 .admin-prefs__mode-group,
  body.admin-shell-v2 .admin-prefs__font-scale,
  body.admin-shell-v2 .admin-segmented-control-form {
    width: 100%;
    min-width: 0;
  }
  body.admin-shell-v2 .admin-segmented-control {
    justify-content: flex-start;
  }
}

.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__tab-dot--danger {
  background: var(--admin-error);
}
.admin-ops__panel[hidden] {
  display: none;
}
.admin-ops__result {
  margin-bottom: var(--admin-space-xl);
  padding: var(--admin-space) var(--admin-space-lg);
  border-radius: var(--admin-radius);
  border: 1px solid transparent;
}
.admin-ops__result.is-ok {
  background: var(--admin-success-bg);
  border-color: rgba(var(--admin-success-rgb), 0.35);
  color: var(--admin-success-text);
}
.admin-ops__result.is-fail {
  background: var(--admin-error-bg);
  border-color: rgba(var(--admin-error-rgb), 0.35);
  color: var(--admin-error-text);
}
.admin-ops__result-title {
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  margin: 0;
  font-size: var(--admin-fs-body-lg);
  font-weight: 700;
}
.admin-ops__result-title i {
  font-size: 1.1em;
}
.admin-ops__result-log {
  margin: var(--admin-space-sm) 0 0;
  padding: var(--admin-space-sm) var(--admin-space);
  max-height: 22rem;
  overflow: auto;
  background: var(--admin-grey-900);
  color: var(--admin-grey-100);
  font-family: 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: var(--admin-warn-bg);
  border: 1px solid var(--admin-warn-border);
  border-left: 4px solid var(--admin-warn);
  border-radius: var(--admin-radius);
  overflow: hidden;
}
.admin-ops__pending-alert--missing {
  background: var(--admin-error-bg);
  border-color: rgba(var(--admin-error-rgb), 0.4);
  border-left-color: var(--admin-error);
}
.admin-ops__pending-alert-hd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-sm) var(--admin-space-lg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-ops__pending-alert-hd i {
  color: var(--admin-warn);
  font-size: 0.95em;
  flex-shrink: 0;
  align-self: center;
}
.admin-ops__pending-alert-hd strong {
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text);
}
.admin-ops__pending-alert--missing .admin-ops__pending-alert-hd i {
  color: var(--admin-error);
}
.admin-ops__pending-alert-hint {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}
.admin-ops__pending-list {
  margin: 0;
  padding: var(--admin-space-sm) var(--admin-space-lg);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-ops__pending-item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: 6px var(--admin-space-sm);
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--admin-radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-ops__pending-item--missing {
  background: rgba(255, 255, 255, 0.5);
}
.admin-ops__pending-kind {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--admin-warn-text);
  background: var(--admin-warn-bg);
  padding: 1px 6px;
  border-radius: var(--admin-radius-full);
}
.admin-ops__pending-date {
  flex-shrink: 0;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 6rem;
}
.admin-ops__pending-slug {
  font-family: 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, .admin-ops__card-btn.admin-ops__card--danger {
  background: var(--admin-error);
  border-color: var(--admin-error);
  color: var(--admin-on-primary);
}
.admin-ops__card--danger .admin-ops__card-btn:hover, .admin-ops__card-btn.admin-ops__card--danger:hover {
  background: var(--admin-error-hover);
  border-color: var(--admin-error-hover);
}
.admin-ops__card-btn.admin-ops__card--warning {
  background: var(--admin-warning, #d97706);
  border-color: var(--admin-warning, #d97706);
  color: #fff;
}
.admin-ops__card-btn.admin-ops__card--warning:hover {
  background: var(--admin-warning-hover, #b45309);
  border-color: var(--admin-warning-hover, #b45309);
}
.admin-ops__backup-actions {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  flex-wrap: wrap;
}
.admin-ops__inline-form {
  display: contents;
}
.admin-ops__migrations {
  margin-bottom: var(--admin-space-2xl);
}
.admin-ops__table-wrap {
  overflow-x: auto;
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-ops__empty {
  padding: var(--admin-space-xl);
  background: var(--admin-card-bg);
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  color: var(--admin-text-muted);
  text-align: center;
}
.admin-ops__table {
  width: 100%;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.admin-ops__table th,
.admin-ops__table td {
  padding: var(--admin-space-sm) var(--admin-space);
  text-align: left;
  font-size: var(--admin-fs-sm);
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-ops__table th {
  background: var(--admin-grey-50);
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--admin-fs-xs);
}
.admin-ops__table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-ops__table tbody tr:hover {
  background: var(--admin-grey-50);
}
.admin-ops__table code {
  padding: 1px 5px;
  font-family: 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: var(--admin-warn-bg) !important;
}
.admin-ops__row--pending:hover {
  background: rgba(var(--admin-warn-rgb), 0.2) !important;
}
.admin-ops__row--missing {
  background: var(--admin-error-bg) !important;
}
.admin-ops__row--missing:hover {
  background: rgba(var(--admin-error-rgb), 0.12) !important;
}
.admin-ops__col-date {
  white-space: nowrap;
  color: var(--admin-text-secondary);
  font-variant-numeric: tabular-nums;
}
.admin-ops__mig-slug {
  word-break: break-all;
}
.admin-ops__group--devsync {
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: var(--admin-space-lg);
  box-shadow: var(--admin-elevation-1);
}
.admin-ops__group--devsync .admin-ops__group-title {
  margin-bottom: var(--admin-space-sm);
}
.admin-ops__group--devsync .admin-ops__cards {
  margin-top: var(--admin-space-lg);
}
.admin-ops__devsync-intro {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}
.admin-ops__devsync-what {
  margin: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.65;
}
.admin-ops__devsync-what strong {
  color: var(--admin-text);
}
.admin-ops__devsync-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-sm);
}
.admin-ops__devsync-step {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-sm);
  flex: 1 1 200px;
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  font-size: var(--admin-fs-sm);
  line-height: 1.55;
}
.admin-ops__devsync-step strong {
  display: block;
  font-weight: 700;
  color: var(--admin-text);
}
.admin-ops__devsync-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  color: var(--admin-on-primary);
  background: var(--admin-primary);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
}
.admin-ops__devsync-step-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
}
.admin-ops__devsync-step-sub code {
  font-size: 0.9em;
  padding: 1px 4px;
  background: var(--admin-grey-100);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  font-family: 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: 544px) {
  .admin-ops__devsync-arrow {
    display: none;
  }
}
.admin-ops__ssl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--admin-space);
  margin-bottom: var(--admin-space-xl);
}
.admin-ops__ssl-card {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-ops__ssl-card-hd {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-text-secondary);
}
.admin-ops__ssl-card-hd i {
  font-size: 0.9em;
  opacity: 0.8;
}
.admin-ops__ssl-card-val {
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
}
.admin-ops__ssl-card-val small {
  font-weight: 400;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-ops__ssl-card-val code {
  padding: 1px 6px;
  font-family: 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__ssl-card-val.is-ok {
  color: var(--admin-success-text);
}
.admin-ops__ssl-card-val.is-warn {
  color: var(--admin-warn-text);
}
.admin-ops__ssl-card-val.is-fail {
  color: var(--admin-error-text);
}
.admin-ops__ssl-guide {
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  margin-bottom: var(--admin-space-xl);
}
.admin-ops__ssl-guide-title {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 0 0 var(--admin-space-sm);
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text);
}
.admin-ops__ssl-guide-title i {
  color: var(--admin-primary);
}
.admin-ops__ssl-guide-list {
  margin: 0;
  padding: 0 0 0 var(--admin-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.6;
}
.admin-ops__ssl-guide-list code {
  padding: 1px 5px;
  font-family: 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__info-box {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  margin-bottom: var(--admin-space-xl);
  background: var(--admin-grey-50);
  overflow: hidden;
}
.admin-ops__info-box-title {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-sm) var(--admin-space-lg);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--admin-fs-body);
  color: var(--admin-text);
  list-style: none;
}
.admin-ops__info-box-title::-webkit-details-marker {
  display: none;
}
.admin-ops__info-box-title i {
  color: var(--admin-primary);
  flex-shrink: 0;
}
.admin-ops__info-box-title:hover {
  background: var(--admin-grey-100);
}
.admin-ops__info-box-body {
  padding: 0 var(--admin-space-lg) var(--admin-space-lg);
  border-top: 1px solid var(--admin-border-light);
}
.admin-ops__info-box-body h3 {
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text);
  margin: var(--admin-space-sm) 0 var(--admin-space-xs);
}
.admin-ops__info-box-body p {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.65;
  margin: 0 0 var(--admin-space-xs);
}
.admin-ops__info-box-body ol {
  padding-left: 1.5em;
  margin: 0 0 var(--admin-space-xs);
}
.admin-ops__info-box-body li {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.65;
  margin-bottom: 4px;
}
.admin-ops__info-box-body a {
  color: var(--admin-primary);
  text-decoration: underline;
}
.admin-ops__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--admin-space);
  margin-bottom: var(--admin-space-xl);
}
@media (max-width: 1320px) {
  .admin-ops__kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 544px) {
  .admin-ops__kpis {
    grid-template-columns: 1fr;
  }
}
.admin-ops__kpi {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
  transition: box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-ops__kpi:hover {
  box-shadow: var(--admin-elevation-2);
}
.admin-ops__kpi-hd {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
}
.admin-ops__kpi-hd i {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  border-radius: var(--admin-radius-sm);
  font-size: 1.05em;
  flex-shrink: 0;
}
.admin-ops__kpi-hd--primary i {
  background: rgba(var(--admin-primary-rgb), 0.12);
  color: var(--admin-primary);
}
.admin-ops__kpi-hd--success i {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
}
.admin-ops__kpi-hd--warn i {
  background: var(--admin-warn-bg);
  color: var(--admin-warn-text);
}
.admin-ops__kpi-hd--danger i {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
}
.admin-ops__kpi-label {
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-text-secondary);
}
.admin-ops__kpi-value {
  font-size: var(--admin-fs-display);
  font-weight: 700;
  color: var(--admin-text);
  line-height: 1.15;
  word-break: break-all;
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
}
.admin-ops__kpi-sub {
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  min-height: 1.6em;
}
.admin-ops__entry-card {
  display: flex;
  align-items: center;
  gap: var(--admin-space-lg);
  padding: var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--admin-duration) var(--admin-ease), transform var(--admin-duration) var(--admin-ease);
}
.admin-ops__entry-card:hover {
  box-shadow: var(--admin-elevation-2);
  transform: translateY(-1px);
}
.admin-ops__entry-card:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: var(--admin-focus-ring-offset);
}
.admin-ops__entry-card-icon {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--admin-primary-rgb), 0.12);
  color: var(--admin-primary);
  border-radius: var(--admin-radius);
  font-size: 1.6em;
}
.admin-ops__entry-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
}
.admin-ops__entry-card-title {
  margin: 0;
  font-size: var(--admin-fs-body-lg);
  font-weight: 700;
  color: var(--admin-text);
}
.admin-ops__entry-card-desc {
  margin: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  line-height: 1.55;
}
.admin-ops__entry-card-arrow {
  flex-shrink: 0;
  color: var(--admin-text-muted);
  font-size: 1.1em;
}
.admin-ops__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-xs);
  margin-bottom: var(--admin-space-xl);
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-ops__quick-actions-label {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin-right: auto;
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-text-secondary);
}
.admin-ops__quick-actions-label i {
  color: var(--admin-primary);
}
.admin-ops__cards--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .admin-ops__cards--two {
    grid-template-columns: 1fr;
  }
}
.admin-ops__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--admin-space-3xs) var(--admin-space-sm);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--admin-radius-full);
  white-space: nowrap;
}
.admin-ops__badge--ok {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
}
.admin-ops__badge--warn {
  background: var(--admin-warn-bg);
  color: var(--admin-warn-text);
}
.admin-ops__badge--danger {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
}
.admin-ops__badge--pending {
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
}

.admin-source-protection {
  max-width: 1200px;
}
.admin-source-protection .admin-nav-tabs {
  margin-bottom: var(--admin-space-2xl);
}
.admin-source-protection .admin-ops__kpis {
  margin-bottom: var(--admin-space-2xl);
}
.admin-source-protection .admin-ops__kpi {
  border-color: rgba(var(--admin-primary-rgb), 0.16);
}
.admin-source-protection .admin-ops__kpi-value {
  line-height: 1.12;
}
.admin-source-protection .admin-ops__group-title {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 0 0 var(--admin-space);
  color: var(--admin-text);
}
.admin-source-protection .admin-ops__group-title::before {
  content: "";
  width: 0.8rem;
  height: 2rem;
  border-radius: var(--admin-radius-full);
  background: var(--admin-primary);
  box-shadow: 0 0 0 0.4rem rgba(var(--admin-primary-rgb), 0.1);
  flex: 0 0 auto;
}
.admin-source-protection .admin-detail-grid {
  gap: var(--admin-space);
  margin: 0;
}
@media (max-width: 1024px) {
  .admin-source-protection .admin-detail-grid {
    grid-template-columns: 1fr;
  }
}
.admin-source-protection .admin-detail-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
  min-width: 0;
  min-height: 100%;
  padding: var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
  overflow: hidden;
}
.admin-source-protection .admin-detail-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.3rem;
  background: var(--admin-grey-100);
  pointer-events: none;
}
.admin-source-protection .admin-detail-card__title {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 0;
  padding-right: var(--admin-space-3xl);
  font-size: var(--admin-fs-body-lg);
  font-weight: 800;
  line-height: 1.35;
  color: var(--admin-text);
}
.admin-source-protection .admin-detail-list {
  display: grid;
  grid-template-columns: minmax(8ch, 0.34fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--admin-space-xs) var(--admin-space);
  margin: 0;
}
@media (max-width: 544px) {
  .admin-source-protection .admin-detail-list {
    grid-template-columns: 1fr;
    gap: var(--admin-space-2xs);
  }
}
.admin-source-protection .admin-detail-list dt,
.admin-source-protection .admin-detail-list dd {
  min-width: 0;
}
.admin-source-protection .admin-detail-list dt {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: var(--admin-space-3xs) var(--admin-space-xs);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-full);
  background: var(--admin-grey-50);
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  line-height: 1.35;
}
.admin-source-protection .admin-detail-list dd {
  margin: 0;
  color: var(--admin-text);
  font-size: var(--admin-fs-sm);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.admin-source-protection .admin-detail-list a {
  color: var(--admin-primary);
  font-weight: 700;
  text-decoration: none;
}
.admin-source-protection .admin-detail-list a:hover {
  color: var(--admin-primary-hover);
  text-decoration: underline;
}
.admin-source-protection .admin-detail-list a:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: var(--admin-focus-ring-offset);
  border-radius: var(--admin-radius-xs);
}
.admin-source-protection code {
  display: inline-block;
  max-width: 100%;
  padding: var(--admin-space-3xs) var(--admin-space-xs);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-grey-100);
  color: var(--admin-text);
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: var(--admin-fs-xs);
  line-height: 1.45;
  vertical-align: baseline;
  overflow-wrap: anywhere;
}

.admin-source-protection__section {
  margin-top: var(--admin-space-2xl);
}
.admin-source-protection__section + .admin-source-protection__section {
  margin-top: var(--admin-space-3xl);
}

.admin-source-protection__section--next .admin-detail-card:first-child {
  border-color: rgba(var(--admin-primary-rgb), 0.28);
}
.admin-source-protection__section--next .admin-detail-card:first-child::after {
  background: var(--admin-primary);
}

.admin-source-protection__section--numbered .admin-detail-grid {
  counter-reset: source-protection-step;
}
.admin-source-protection__section--numbered .admin-detail-card {
  counter-increment: source-protection-step;
}
.admin-source-protection__section--numbered .admin-detail-card::before {
  content: counter(source-protection-step);
  position: absolute;
  top: var(--admin-space);
  right: var(--admin-space);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(var(--admin-primary-rgb), 0.26);
  border-radius: var(--admin-radius-full);
  background: rgba(var(--admin-primary-rgb), 0.1);
  color: var(--admin-primary);
  font-size: var(--admin-fs-xs);
  font-weight: 800;
  line-height: 1;
}

.admin-source-protection__section--guide-flow .admin-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1320px) {
  .admin-source-protection__section--guide-flow .admin-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .admin-source-protection__section--guide-flow .admin-detail-grid {
    grid-template-columns: 1fr;
  }
}

.admin-source-protection__section--profiles .admin-detail-card:first-child {
  border-color: rgba(var(--admin-success-rgb), 0.32);
}
.admin-source-protection__section--profiles .admin-detail-card:first-child::after {
  background: var(--admin-success-text);
}

.admin-source-protection__section--policy .admin-ops__entry-card {
  align-items: flex-start;
  border-color: rgba(var(--admin-error-rgb), 0.22);
  background: var(--admin-card-bg);
}
.admin-source-protection__section--policy .admin-ops__entry-card-icon {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
}

.admin-source-protection__flow {
  counter-reset: source-protection-flow;
}
.admin-source-protection__flow .admin-ops__summary-card {
  position: relative;
  min-height: 100%;
  padding: var(--admin-space-lg);
  border-color: rgba(var(--admin-primary-rgb), 0.14);
}
.admin-source-protection__flow .admin-ops__summary-row {
  align-items: flex-start;
}
.admin-source-protection__flow .admin-ops__summary-row i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--admin-radius);
  background: rgba(var(--admin-primary-rgb), 0.1);
  color: var(--admin-primary);
  flex: 0 0 auto;
}
.admin-source-protection__flow .admin-ops__summary-row strong {
  color: var(--admin-text);
  font-size: var(--admin-fs-body);
  line-height: 1.4;
}
.admin-source-protection__flow .admin-empty__desc {
  margin: 0;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm);
  line-height: 1.6;
}

.admin-source-protection__checks {
  align-items: flex-end;
  gap: var(--admin-space);
  padding: var(--admin-space-lg);
  border-color: rgba(var(--admin-primary-rgb), 0.18);
}
.admin-source-protection__checks .admin-ops__quick-actions-label {
  align-self: center;
  min-width: 8rem;
}
.admin-source-protection__checks form {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  align-items: end;
  gap: var(--admin-space-xs);
  min-width: min(100%, 34rem);
}
@media (max-width: 544px) {
  .admin-source-protection__checks form {
    grid-template-columns: 1fr;
  }
}
.admin-source-protection__checks .admin-form__field {
  margin: 0;
}
.admin-source-protection__checks .admin-btn {
  white-space: nowrap;
}

.admin-source-protection__release-form {
  max-width: min(100%, 76rem);
  padding: var(--admin-space-xl);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-elevation-1);
}
.admin-source-protection__release-form .admin-form__actions {
  margin-top: var(--admin-space-xl);
  padding-top: var(--admin-space-lg);
  border-top: 1px solid var(--admin-border-light);
}

.admin-source-protection__preflight {
  margin-bottom: var(--admin-space-2xl);
}

.admin-source-protection__preflight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-xs);
  margin-top: var(--admin-space);
}

.admin-source-protection__progress-card {
  display: grid;
  gap: var(--admin-space-lg);
  padding: var(--admin-space-xl);
  border: 1px solid rgba(var(--admin-primary-rgb), 0.24);
  border-radius: var(--admin-radius);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-elevation-1);
}

.admin-source-protection__progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-space);
}
.admin-source-protection__progress-head strong {
  display: block;
  color: var(--admin-text);
  font-size: var(--admin-fs-body-lg);
  line-height: 1.35;
}
.admin-source-protection__progress-head p {
  margin: var(--admin-space-3xs) 0 0;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm);
  line-height: 1.55;
}
@media (max-width: 544px) {
  .admin-source-protection__progress-head {
    flex-direction: column;
  }
}

.admin-source-protection__progress-percent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.4rem;
  padding: var(--admin-space-xs) var(--admin-space);
  border-radius: var(--admin-radius);
  background: rgba(var(--admin-primary-rgb), 0.1);
  color: var(--admin-primary);
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: var(--admin-fs-body-lg);
  font-weight: 800;
  line-height: 1;
}

.admin-source-protection__progress-track {
  width: 100%;
  height: 1rem;
  overflow: hidden;
  border-radius: var(--admin-radius-full);
  background: var(--admin-grey-100);
}

.admin-source-protection__progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--admin-primary), var(--admin-info-text));
  transition: width 240ms ease;
}

.admin-source-protection__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--admin-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-source-protection__steps li {
  display: flex;
  align-items: center;
  min-height: 4.2rem;
  padding: var(--admin-space-xs) var(--admin-space-sm);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-grey-50);
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.admin-source-protection__steps li::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  margin-right: var(--admin-space-xs);
  border-radius: var(--admin-radius-full);
  background: var(--admin-grey-300);
  flex: 0 0 auto;
}
.admin-source-protection__steps li.is-complete {
  border-color: rgba(var(--admin-success-rgb), 0.28);
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
}
.admin-source-protection__steps li.is-complete::before {
  background: var(--admin-success-text);
}
.admin-source-protection__steps li.is-active {
  border-color: rgba(var(--admin-primary-rgb), 0.38);
  background: rgba(var(--admin-primary-rgb), 0.08);
  color: var(--admin-primary);
  box-shadow: inset 0 0 0 0.1rem rgba(var(--admin-primary-rgb), 0.16);
}
.admin-source-protection__steps li.is-active::before {
  background: var(--admin-primary);
}
.admin-source-protection__steps li.is-failed {
  border-color: rgba(var(--admin-error-rgb), 0.32);
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
}
.admin-source-protection__steps li.is-failed::before {
  background: var(--admin-error-text);
}
@media (max-width: 1024px) {
  .admin-source-protection__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 544px) {
  .admin-source-protection__steps {
    grid-template-columns: 1fr;
  }
}

.admin-source-protection__progress-log {
  min-height: 16rem;
  max-height: 34rem;
  margin: 0;
  padding: var(--admin-space);
  overflow: auto;
  border: 1px solid var(--admin-grey-700);
  border-radius: var(--admin-radius);
  background: var(--admin-grey-900);
  color: var(--admin-grey-50);
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: var(--admin-fs-xs);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-source-protection__artifact {
  display: grid;
  gap: var(--admin-space);
  padding: var(--admin-space);
  border: 1px solid rgba(var(--admin-success-rgb), 0.28);
  border-radius: var(--admin-radius);
  background: var(--admin-success-bg);
}
.admin-source-protection__artifact[hidden] {
  display: none;
}

.admin-source-protection__artifact-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-space);
}
.admin-source-protection__artifact-paths div {
  display: grid;
  gap: var(--admin-space-2xs);
  min-width: 0;
}
.admin-source-protection__artifact-paths span {
  color: var(--admin-success-text);
  font-size: var(--admin-fs-xs);
  font-weight: 800;
  line-height: 1.4;
}
.admin-source-protection__artifact-paths code {
  background: var(--admin-card-bg);
}
@media (max-width: 768px) {
  .admin-source-protection__artifact-paths {
    grid-template-columns: 1fr;
  }
}

.admin-source-protection__artifact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-xs);
}

.admin-source-protection__section--progress.is-failed .admin-source-protection__progress-card {
  border-color: rgba(var(--admin-error-rgb), 0.32);
}

.admin-source-protection--show .admin-source-protection__section--release-summary {
  margin-top: var(--admin-space-2xl);
}

.admin-git {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--admin-space-xl) var(--admin-space-lg);
}
.admin-git__section-card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
  margin-bottom: var(--admin-space-xl);
  overflow: hidden;
}
.admin-git__section-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space);
  padding: var(--admin-space) var(--admin-space-lg);
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50);
}
.admin-git__section-card-title {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 0;
  font-size: var(--admin-fs-body-lg);
  font-weight: 700;
  color: var(--admin-text);
}
.admin-git__section-card-title i {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--admin-primary-rgb), 0.12);
  color: var(--admin-primary);
  border-radius: var(--admin-radius-sm);
  font-size: 0.9em;
}
.admin-git__section-card-count {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-text-muted);
  background: var(--admin-grey-100);
  padding: var(--admin-space-3xs) var(--admin-space-xs);
  border-radius: var(--admin-radius-full);
  margin-left: var(--admin-space-xs);
}
.admin-git__section-card-body {
  padding: var(--admin-space-lg);
}
.admin-git__conflict-alert {
  margin-bottom: var(--admin-space-xl);
  background: var(--admin-error-bg);
  border: 1px solid rgba(var(--admin-error-rgb), 0.4);
  border-left: 4px solid var(--admin-error);
  border-radius: var(--admin-radius);
  overflow: hidden;
}
.admin-git__conflict-hd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-sm) var(--admin-space-lg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-git__conflict-hd i {
  color: var(--admin-error);
  font-size: 0.95em;
  flex-shrink: 0;
  align-self: center;
}
.admin-git__conflict-hd strong {
  font-size: var(--admin-fs-body);
  font-weight: 700;
  color: var(--admin-text);
}
.admin-git__conflict-hint {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}
.admin-git__conflict-files {
  margin: 0;
  padding: var(--admin-space-sm) var(--admin-space-lg);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
}
.admin-git__conflict-files li {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-2xs) var(--admin-space-xs);
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--admin-radius-sm);
  font-family: var(--admin-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: var(--admin-fs-xs);
  color: var(--admin-error-text);
}
.admin-git__conflict-files li i {
  flex-shrink: 0;
}
.admin-git__conflict-actions {
  display: flex;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-sm) var(--admin-space-lg);
  flex-wrap: wrap;
}
.admin-git__section {
  margin-bottom: var(--admin-space-2xl);
}
.admin-git__section-title {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-menu);
  font-weight: 700;
  color: var(--admin-text);
}
.admin-git__section-title i {
  color: var(--admin-primary);
  font-size: 0.95em;
}
.admin-git__section-card .admin-git__empty {
  padding: var(--admin-space-lg);
  background: var(--admin-grey-50);
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius);
}
.admin-git__section-card .admin-git__branch-create, .admin-git__section-card .admin-git__tag-create, .admin-git__section-card .admin-git__stash-save {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: var(--admin-space-lg);
  padding-bottom: var(--admin-space-lg);
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-git__branch-list {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  margin-bottom: var(--admin-space-lg);
}
.admin-git__branch-item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-git__branch-item.is-current {
  border-color: rgba(var(--admin-primary-rgb), 0.4);
  background: rgba(var(--admin-primary-rgb), 0.04);
}
.admin-git__branch-name {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  font-family: var(--admin-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text);
}
.admin-git__branch-name i {
  color: var(--admin-primary);
  font-size: 0.85em;
}
.admin-git__branch-actions {
  display: flex;
  gap: var(--admin-space-2xs);
  flex-shrink: 0;
}
.admin-git__branch-create {
  display: flex;
  gap: var(--admin-space-lg);
  align-items: flex-end;
  flex-wrap: wrap;
  padding: var(--admin-space-lg);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
}
.admin-git__branch-create-field {
  flex: 1 1 200px;
}
.admin-git__commit-table-wrap {
  overflow-x: auto;
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-git__commit-table {
  width: 100%;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.admin-git__commit-table th,
.admin-git__commit-table td {
  padding: var(--admin-space-sm) var(--admin-space);
  text-align: left;
  font-size: var(--admin-fs-sm);
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-git__commit-table th {
  background: var(--admin-grey-50);
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--admin-fs-xs);
  white-space: nowrap;
}
.admin-git__commit-table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-git__commit-table tbody tr:hover {
  background: var(--admin-grey-50);
}
.admin-git__commit-hash {
  font-family: var(--admin-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
  white-space: nowrap;
}
.admin-git__commit-subject {
  color: var(--admin-text);
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-git__commit-meta {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs);
  white-space: nowrap;
}
.admin-git__commit-checkout {
  white-space: nowrap;
}
.admin-git__checkout-inline {
  display: none;
  gap: var(--admin-space);
  align-items: flex-end;
  flex-wrap: wrap;
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-grey-50);
}
.admin-git__checkout-inline.is-open {
  display: flex;
}
.admin-git__tag-create {
  display: flex;
  gap: var(--admin-space-lg);
  align-items: flex-end;
  flex-wrap: wrap;
  padding: var(--admin-space-lg);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  margin-bottom: var(--admin-space-lg);
}
.admin-git__tag-create-field {
  flex: 1 1 140px;
}
.admin-git__tag-list {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}
.admin-git__tag-item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-git__tag-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-3xs);
  padding: var(--admin-space-3xs) var(--admin-space-xs);
  font-family: var(--admin-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  background: var(--admin-grey-100);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text);
  flex-shrink: 0;
}
.admin-git__tag-badge i {
  color: var(--admin-primary);
}
.admin-git__tag-meta {
  flex: 1 1 auto;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
}
.admin-git__tag-date {
  margin-right: var(--admin-space-sm);
}
.admin-git__tag-subject {
  color: var(--admin-text-muted);
  font-style: italic;
}
.admin-git__stash-save {
  display: flex;
  gap: var(--admin-space-lg);
  align-items: flex-end;
  flex-wrap: wrap;
  padding: var(--admin-space-lg);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  margin-bottom: var(--admin-space-lg);
}
.admin-git__stash-save-field {
  flex: 1 1 200px;
}
.admin-git__stash-list {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}
.admin-git__stash-item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-git__stash-ref {
  font-family: var(--admin-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
  flex-shrink: 0;
  min-width: 80px;
}
.admin-git__stash-message {
  flex: 1 1 auto;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-git__stash-time {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  flex-shrink: 0;
}
.admin-git__stash-actions {
  display: flex;
  gap: var(--admin-space-2xs);
  flex-shrink: 0;
}
.admin-git__empty {
  padding: var(--admin-space-lg);
  background: var(--admin-grey-50);
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  color: var(--admin-text-muted);
  text-align: center;
  font-size: var(--admin-fs-sm);
}

.admin-activity-logs__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space-lg);
  padding: var(--admin-space);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
}

.admin-activity-logs__field {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
  min-width: 0;
}
.admin-activity-logs__field span {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-text-secondary);
}
.admin-activity-logs__field .admin-input {
  min-width: 8rem;
}

.admin-activity-logs__summary {
  margin: 0 0 var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}
.admin-activity-logs__summary strong {
  color: var(--admin-text);
}

.admin-activity-logs__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}

.admin-activity-logs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-fs-sm);
  background: var(--admin-card-bg);
}
.admin-activity-logs__table th, .admin-activity-logs__table td {
  padding: var(--admin-space-sm) var(--admin-space);
  text-align: left;
  border-bottom: 1px solid var(--admin-border-light);
  vertical-align: middle;
}
.admin-activity-logs__table th {
  background: var(--admin-grey-50);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.admin-activity-logs__table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-activity-logs__table tbody tr:hover {
  background: var(--admin-grey-50);
}
.admin-activity-logs__table code {
  font-family: 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);
}

.sl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--admin-space);
  margin-bottom: var(--admin-space-lg);
}
@media (max-width: 1024px) {
  .sl-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .sl-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.sl-kpi {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
  padding: var(--admin-space);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
  transition: box-shadow 0.15s;
}
.sl-kpi:hover {
  box-shadow: var(--admin-elevation-2);
}

.sl-kpi__icon {
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--admin-radius-sm);
  font-size: var(--admin-fs-lg);
}

.sl-kpi__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sl-kpi__label {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-kpi__value {
  font-size: var(--admin-fs-xl);
  font-weight: 700;
  color: var(--admin-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sl-kpi--blue .sl-kpi__icon {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.sl-kpi--green .sl-kpi__icon {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.sl-kpi--purple .sl-kpi__icon {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}

.sl-kpi--orange .sl-kpi__icon {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}

.sl-kpi--warn {
  border-color: rgba(249, 115, 22, 0.4);
}
.sl-kpi--warn .sl-kpi__value {
  color: #f97316;
}

.sl-charts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--admin-space);
  margin-bottom: var(--admin-space-lg);
}
@media (max-width: 1100px) {
  .sl-charts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .sl-charts {
    grid-template-columns: 1fr;
  }
}

.sl-chart-card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  padding: var(--admin-space);
  box-shadow: var(--admin-elevation-1);
}

.sl-chart-card--full {
  grid-column: 1/-1;
}

.sl-chart-title {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-secondary);
  margin: 0 0 var(--admin-space-sm);
}

.sl-chart-body {
  position: relative;
  height: 18rem;
}
.sl-chart-body canvas {
  width: 100% !important;
  height: 100% !important;
}

.sl-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-3xs);
  margin-bottom: var(--admin-space);
  padding-bottom: var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-border-light);
}

.sl-cat-tab {
  padding: var(--admin-space-2xs) var(--admin-space-sm);
  font-size: var(--admin-fs-xs);
  font-weight: 500;
  color: var(--admin-text-secondary);
  background: transparent;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.sl-cat-tab:hover {
  background: var(--admin-grey-50);
  color: var(--admin-text);
}

.sl-cat-tab--active {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: #fff;
}
.sl-cat-tab--active:hover {
  background: var(--admin-primary);
  color: #fff;
}

.sl-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space-lg);
  padding: var(--admin-space);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
}

.sl-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-sm);
  width: 100%;
}

.sl-filter-search {
  flex: 1 1 16rem;
  min-width: 0;
}

.sl-filter-select {
  flex: 0 0 auto;
  min-width: 12rem;
}

.sl-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}

.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-fs-sm);
  background: var(--admin-card-bg);
}
.sl-table th, .sl-table td {
  padding: var(--admin-space-sm) var(--admin-space);
  text-align: left;
  border-bottom: 1px solid var(--admin-border-light);
  vertical-align: middle;
}
.sl-table th {
  background: var(--admin-grey-50);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  color: var(--admin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sl-table tbody tr:last-child td {
  border-bottom: 0;
}
.sl-table tbody tr:hover {
  background: var(--admin-grey-50);
}
.sl-table code {
  font-family: 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);
}

.sl-table__row--danger {
  background: var(--admin-error-bg) !important;
  border-left: 3px solid var(--admin-error);
}
.sl-table__row--danger:hover {
  background: rgba(var(--admin-error-rgb), 0.1) !important;
}

.sl-table__row--security {
  background: var(--admin-error-bg) !important;
  border-left: 3px solid var(--admin-error);
}
.sl-table__row--security:hover {
  background: rgba(var(--admin-error-rgb), 0.1) !important;
}

.sl-table__row--error {
  background: var(--admin-error-bg) !important;
}

.sl-col-no {
  width: 56px;
  font-variant-numeric: tabular-nums;
}

.sl-col-sev {
  width: 90px;
}

.sl-col-cat {
  width: 90px;
}

.sl-col-type {
  width: 180px;
}

.sl-col-file {
  width: 180px;
}

.sl-col-url {
  width: 160px;
}

.sl-col-count {
  width: 72px;
  text-align: right;
}

.sl-col-status {
  width: 80px;
}

.sl-col-time {
  width: 130px;
  white-space: nowrap;
  color: var(--admin-text-secondary);
  font-variant-numeric: tabular-nums;
}

.sl-col-action {
  width: 60px;
  text-align: center;
}

.sl-col-level {
  width: 110px;
  white-space: nowrap;
}

.sl-col-event {
  width: 200px;
}

.sl-col-actor {
  width: 110px;
}

.sl-col-ip {
  width: 130px;
  white-space: nowrap;
}

.sl-col-message {
  min-width: 200px;
}

.sl-code-wrap {
  border-radius: var(--admin-radius-sm);
  overflow: hidden;
}

.sl-code-block {
  display: block;
  margin: 0;
  padding: var(--admin-space);
  background: var(--admin-grey-900);
  color: var(--admin-grey-100);
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: var(--admin-fs-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  overflow: auto;
  max-height: 36rem;
  border-radius: var(--admin-radius-sm);
}

.sl-ops-ok {
  color: var(--admin-success);
}

.sl-ops-fail {
  color: var(--admin-error);
}

.sl-audit-violation {
  margin-bottom: var(--admin-space-lg);
}

.sl-audit-violation__file {
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-text-secondary);
  margin: 0 0 var(--admin-space-2xs);
}

.sl-audit-violation__item {
  display: flex;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-2xs) var(--admin-space-sm);
  background: var(--admin-error-bg);
  border-left: 3px solid var(--admin-error);
  border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
  margin-bottom: 2px;
  font-size: var(--admin-fs-xs);
}

.sl-audit-violation__line {
  flex-shrink: 0;
  width: 5rem;
  color: var(--admin-text-muted);
  font-variant-numeric: tabular-nums;
}

.sl-audit-violation__type {
  flex-shrink: 0;
  padding: 1px var(--admin-space-2xs);
  background: var(--admin-error);
  color: #fff;
  border-radius: var(--admin-radius-sm);
  font-size: 1.1rem;
}

.sl-audit-violation__snippet {
  min-width: 0;
  word-break: break-all;
  color: var(--admin-text);
  font-family: var(--admin-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
}

.sl-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  gap: var(--admin-space);
}

.sl-theme-card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  overflow: hidden;
  box-shadow: var(--admin-elevation-1);
}

.sl-theme-card__head {
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-grey-50);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  color: var(--admin-text-secondary);
  border-bottom: 1px solid var(--admin-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sl-theme-card__body {
  padding: var(--admin-space);
}

.sl-theme-card__preview {
  width: 100%;
  height: 16rem;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
}

.admin-ui-audit__summary {
  display: flex;
  gap: var(--admin-space-lg);
  margin-bottom: var(--admin-space-2xl);
  flex-wrap: wrap;
}
.admin-ui-audit__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
  padding: var(--admin-space-lg) var(--admin-space-xl);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-ui-audit__stat--warn {
  border-color: rgba(var(--admin-warn-rgb), 0.4);
  background: var(--admin-warn-bg);
}
.admin-ui-audit__stat--warn .admin-ui-audit__stat-num {
  color: var(--admin-warn-text);
}
.admin-ui-audit__stat--ok {
  border-color: rgba(var(--admin-success-rgb), 0.35);
  background: var(--admin-success-bg);
}
.admin-ui-audit__stat--ok .admin-ui-audit__stat-num {
  color: var(--admin-success-text);
}
.admin-ui-audit__stat-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--admin-text);
}
.admin-ui-audit__stat-label {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  margin-top: 0.3rem;
}
.admin-ui-audit__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-xs);
  margin-bottom: var(--admin-space-xl);
}
.admin-ui-audit__filter-badge {
  cursor: pointer;
  text-decoration: none;
}
.admin-ui-audit__filter-badge:hover {
  opacity: 0.8;
}
.admin-ui-audit__empty {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-2xl);
  background: var(--admin-success-bg);
  border: 1px solid rgba(var(--admin-success-rgb), 0.3);
  border-radius: var(--admin-radius);
  color: var(--admin-success-text);
  font-weight: 600;
}
.admin-ui-audit__empty i {
  font-size: 1.2em;
}
.admin-ui-audit__list {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xl);
}
.admin-ui-audit__file {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  overflow: hidden;
}
.admin-ui-audit__file-header {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space-lg);
  background: var(--admin-grey-50);
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-ui-audit__file-path {
  flex: 1;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text);
  font-family: var(--admin-font-mono, monospace);
  word-break: break-all;
}
.admin-ui-audit__file-count {
  flex-shrink: 0;
}
.admin-ui-audit__table {
  margin: 0;
  border-radius: 0;
  border: none;
}
.admin-ui-audit__col-line {
  width: 60px;
  text-align: center;
}
.admin-ui-audit__col-type {
  width: 160px;
  white-space: nowrap;
}
.admin-ui-audit__lineno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  font-size: var(--admin-fs-xs);
  font-family: var(--admin-font-mono, monospace);
  color: var(--admin-text-muted);
}
.admin-ui-audit__type-badge {
  font-size: var(--admin-fs-xs);
}
.admin-ui-audit__type-badge--inline-style {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.admin-ui-audit__type-badge--raw-input {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}
.admin-ui-audit__type-badge--raw-textarea {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}
.admin-ui-audit__type-badge--raw-select {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.admin-ui-audit__type-badge--checkbox-no-wrap-false {
  background: rgba(99, 102, 241, 0.12);
  color: #3730a3;
}
.admin-ui-audit__type-badge--component-inline-style {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.admin-ui-audit__code {
  display: block;
  font-size: var(--admin-fs-xs);
  font-family: var(--admin-font-mono, monospace);
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--admin-text);
  max-height: 4.5em;
  overflow: hidden;
}
.admin-ui-audit__hint {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  max-width: 280px;
}

.admin-theme-audit {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xl);
}

.admin-theme-audit__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}

.admin-theme-audit__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs);
}

.admin-theme-audit__legend-sep {
  color: var(--admin-border-strong);
  margin: 0 var(--admin-space-2xs);
}

.admin-theme-audit__legend-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--admin-text-muted);
  font-style: italic;
}

.admin-theme-audit__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.admin-theme-audit__dot--light {
  background: #60a5fa;
}
.admin-theme-audit__dot--dark {
  background: #6366f1;
}

.admin-theme-audit__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--admin-space-lg);
}
@media (max-width: 1024px) {
  .admin-theme-audit__grid {
    grid-template-columns: 1fr;
  }
}

.admin-theme-audit__card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
}

.admin-theme-audit__card-head {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-sm) var(--admin-space);
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50);
}

.admin-theme-audit__card-label {
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: var(--admin-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-theme-audit__card-slug {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  font-family: monospace;
  background: var(--admin-grey-100);
  padding: 1px var(--admin-space-2xs);
  border-radius: var(--admin-radius-sm);
}

.admin-theme-audit__apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 4px var(--admin-space-xs);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-primary);
  background: var(--admin-primary-light);
  border: 1px solid var(--admin-primary-border);
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-theme-audit__apply-btn:hover {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
}

.admin-theme-audit__fake-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  min-height: 48px;
}

.admin-theme-audit__fake-breadcrumb {
  display: flex;
  align-items: center;
}

.admin-theme-audit__fake-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-theme-audit__fake-action {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.admin-theme-audit__fake-action--gap {
  margin-left: 4px;
}

.admin-theme-audit__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  border: 1.5px solid transparent;
  flex-shrink: 0;
}
.admin-theme-audit__pill--unread {
  background: #ffffff !important;
  color: #c81e1e !important;
  border-color: rgba(200, 30, 30, 0.25) !important;
  box-shadow: 0 0 0 1.5px rgba(200, 30, 30, 0.18), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.admin-theme-audit__fake-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.admin-theme-audit__swatch-row {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-xs) 14px;
  flex-wrap: wrap;
}

.admin-theme-audit__swatch {
  padding: 3px var(--admin-space-xs);
  border-radius: var(--admin-radius-sm);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-text);
  white-space: nowrap;
}

.admin-theme-audit__swatch-text,
.admin-theme-audit__swatch-primary {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.admin-theme-audit__checks {
  padding: var(--admin-space-xs) 0;
  border-top: 1px solid var(--admin-border-light);
  flex: 1;
}

.admin-theme-audit__check-item {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  padding: 5px var(--admin-space);
  cursor: pointer;
  border-radius: 0;
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-theme-audit__check-item:hover {
  background: var(--admin-grey-50);
}

.admin-theme-audit__check-input {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--admin-success, #22c55e);
  cursor: pointer;
}

.admin-theme-audit__check-label {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text);
  min-width: 0;
  white-space: nowrap;
}

.admin-theme-audit__check-desc {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-theme-audit__check-input:checked ~ .admin-theme-audit__check-label {
  color: var(--admin-success, #22c55e);
  text-decoration: line-through;
  opacity: 0.7;
}

.admin-theme-audit__card-foot {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-xs) var(--admin-space);
  border-top: 1px solid var(--admin-border-light);
  background: var(--admin-grey-50);
}

.admin-theme-audit__score {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-theme-audit__score-pass {
  font-weight: 700;
  color: var(--admin-success, #22c55e);
}

.admin-theme-audit__score-bar {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--admin-border);
  overflow: hidden;
}

.admin-theme-audit__score-fill {
  height: 100%;
  background: var(--admin-success, #22c55e);
  border-radius: 99px;
  transition: width 0.3s ease;
}

.admin-theme-audit__summary {
  display: flex;
  gap: var(--admin-space-xl);
  padding: var(--admin-space-lg) var(--admin-space-xl);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow);
}
@media (max-width: 1024px) {
  .admin-theme-audit__summary {
    gap: var(--admin-space-lg);
  }
}

.admin-theme-audit__summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--admin-space-3xs);
}

.admin-theme-audit__summary-num {
  font-size: var(--admin-fs-3xl, 2.8rem);
  font-weight: 800;
  color: var(--admin-text);
  line-height: 1;
  letter-spacing: -0.03em;
}

.admin-theme-audit__summary-label {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}

.admin-resource-hints-audit__types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--admin-space-md);
  margin-bottom: var(--admin-space-2xl);
}
.admin-resource-hints-audit__type-card {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-md);
  padding: var(--admin-space-md) var(--admin-space-lg);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-elevation-1);
}
.admin-resource-hints-audit__type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--admin-radius-sm);
  background: rgba(var(--admin-primary-rgb), 0.08);
  color: var(--admin-primary);
  flex-shrink: 0;
  font-size: 1em;
}
.admin-resource-hints-audit__type-name {
  display: block;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text);
  font-family: var(--admin-font-mono, monospace);
  margin-bottom: 0.2rem;
}
.admin-resource-hints-audit__type-desc {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
  margin: 0;
  line-height: 1.4;
}
.admin-resource-hints-audit__table {
  margin: 0;
  border-radius: 0;
  border: none;
}
.admin-resource-hints-audit__col-rel {
  width: 130px;
  white-space: nowrap;
}
.admin-resource-hints-audit__col-as {
  width: 100px;
}
.admin-resource-hints-audit__col-co {
  width: 80px;
  text-align: center;
}
.admin-resource-hints-audit__col-file {
  width: 72px;
  text-align: center;
}
.admin-resource-hints-audit__col-status {
  width: 90px;
  white-space: nowrap;
}
.admin-resource-hints-audit__href {
  font-size: var(--admin-fs-xs);
  font-family: var(--admin-font-mono, monospace);
  word-break: break-all;
  color: var(--admin-text);
}
.admin-resource-hints-audit__local-badge {
  font-size: var(--admin-fs-xs);
  margin-left: 0.3rem;
}
.admin-resource-hints-audit__type-label {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-resource-hints-audit__empty-cell {
  color: var(--admin-text-muted);
}
.admin-resource-hints-audit__rel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--admin-fs-xs);
  font-family: var(--admin-font-mono, monospace);
  font-weight: 600;
}
.admin-resource-hints-audit__rel-badge--preload {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.admin-resource-hints-audit__rel-badge--prefetch {
  background: rgba(99, 102, 241, 0.12);
  color: #3730a3;
}
.admin-resource-hints-audit__rel-badge--preconnect {
  background: rgba(16, 185, 129, 0.12);
  color: #065f46;
}
.admin-resource-hints-audit__rel-badge--dns_prefetch {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}
.admin-resource-hints-audit__rel-badge--modulepreload {
  background: rgba(139, 92, 246, 0.12);
  color: #5b21b6;
}
.admin-resource-hints-audit__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--admin-fs-xs);
  font-weight: 600;
}
.admin-resource-hints-audit__status-badge--ok {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
}
.admin-resource-hints-audit__status-badge--warn {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}
.admin-resource-hints-audit__status-badge--error {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.admin-resource-hints-audit__row--warn td {
  background: rgba(245, 158, 11, 0.04);
}
.admin-resource-hints-audit__row--error td {
  background: rgba(239, 68, 68, 0.04);
}
.admin-resource-hints-audit__icon--ok {
  color: var(--admin-success-text);
}
.admin-resource-hints-audit__icon--error {
  color: #b91c1c;
}
.admin-resource-hints-audit__issues {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-muted);
}
.admin-resource-hints-audit__issues li::before {
  content: "· ";
  color: var(--admin-warn-text, #92400e);
}

.rp-page .admin-page__header {
  margin-bottom: var(--admin-space-xl);
}

.rp-toolbar {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
  margin-bottom: var(--admin-space-xl);
  flex-wrap: wrap;
}
.rp-toolbar__hint {
  font-size: var(--admin-fs-body);
  color: var(--admin-text-muted);
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs);
}

.rp-matrix-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--admin-radius-lg);
  border: 1px solid var(--admin-border);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-elevation-1);
}

.rp-matrix {
  min-width: 640px;
}

.rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-fs-body-lg);
  table-layout: auto;
}
.rp-table th, .rp-table td {
  padding: 0;
  border: none;
}
.rp-table__role-col {
  text-align: center;
  min-width: 120px;
  width: 120px;
  vertical-align: top;
  border-left: 1px solid var(--admin-border);
  background: var(--admin-grey-50);
}
.rp-table__role-col--owner {
  background: linear-gradient(160deg, #fff8e6 0%, #fffdf5 100%);
}
.rp-table__perm-col {
  text-align: left;
  min-width: 200px;
  width: 220px;
  background: var(--admin-grey-50);
  border-right: 1px solid var(--admin-border);
  font-weight: 600;
  padding: var(--admin-space) var(--admin-space-lg);
  font-size: var(--admin-fs-base);
  color: var(--admin-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rp-table__group-row {
  background: var(--admin-grey-50);
  border-top: 2px solid var(--admin-border);
}
.rp-table__group-row:first-child {
  border-top: none;
}
.rp-table__group-cell {
  padding: var(--admin-space-sm) var(--admin-space-lg);
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: var(--admin-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
}
.rp-table__group-cell .fa-solid {
  font-size: 0.9em;
  color: var(--admin-primary);
  opacity: 0.7;
}
.rp-table__perm-row {
  border-top: 1px solid var(--admin-border);
  transition: background var(--admin-duration-short);
}
.rp-table__perm-row:hover {
  background: var(--admin-primary-light);
}
.rp-table__perm-label {
  padding: var(--admin-space-sm) var(--admin-space-lg) var(--admin-space-sm) 1.6rem;
  color: var(--admin-text);
  font-size: var(--admin-fs-body-lg);
  border-right: 1px solid var(--admin-border);
  vertical-align: middle;
}
.rp-table__cell {
  text-align: center;
  vertical-align: middle;
  padding: var(--admin-space-xs) 0;
  border-left: 1px solid var(--admin-border);
  position: relative;
}
.rp-table__cell--owner {
  background: rgba(251, 191, 36, 0.04);
}

.rp-role-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--admin-space-3xs);
  padding: var(--admin-space) var(--admin-space-xs);
}
.rp-role-head__name {
  font-size: var(--admin-fs-body-lg);
  font-weight: 700;
  color: var(--admin-text);
  line-height: 1.2;
}
.rp-role-head__code {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  font-family: 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: var(--admin-warn-bg);
  color: var(--admin-warn-text);
  border: 1px solid var(--admin-warn-border);
}

.rp-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--admin-radius);
  transition: background var(--admin-duration-short), transform 0.1s;
}
.rp-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.rp-checkbox__box {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--admin-radius-sm);
  border: 2px solid var(--admin-border);
  background: var(--admin-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--admin-duration) var(--admin-ease);
  position: relative;
  overflow: hidden;
}
.rp-checkbox__icon {
  font-size: 1.1rem;
  position: absolute;
  transition: all var(--admin-duration) var(--admin-ease);
}
.rp-checkbox__icon--check {
  color: var(--admin-white);
  opacity: 0;
  transform: scale(0.4);
}
.rp-checkbox__icon--x {
  color: var(--admin-text-muted);
  opacity: 0.35;
  transform: scale(0.8);
}
.rp-checkbox.is-checked .rp-checkbox__box {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  box-shadow: 0 2px 6px rgba(var(--admin-primary-rgb), 0.3);
}
.rp-checkbox.is-checked .rp-checkbox__icon--check {
  opacity: 1;
  transform: scale(1);
}
.rp-checkbox.is-checked .rp-checkbox__icon--x {
  opacity: 0;
  transform: scale(0.4);
}
.rp-checkbox.is-loading {
  pointer-events: none;
  opacity: 0.6;
}
.rp-checkbox--fixed {
  cursor: default;
}
.rp-checkbox--fixed .rp-checkbox__box {
  background: var(--admin-success-bg);
  border-color: var(--admin-success-border);
}
.rp-checkbox--fixed .rp-checkbox__icon--check {
  color: var(--admin-success);
  opacity: 1;
  transform: scale(1);
}
.rp-checkbox:not(.rp-checkbox--fixed):hover {
  background: var(--admin-primary-light);
  transform: scale(1.08);
}
.rp-checkbox:not(.rp-checkbox--fixed):active {
  transform: scale(0.95);
}

.e-403 {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--admin-space-4xl) var(--admin-space-xl);
  gap: var(--admin-space);
}
.e-403__graphic {
  width: 12rem;
  height: 12rem;
  color: var(--admin-primary);
  opacity: 0.6;
  margin-bottom: var(--admin-space-xs);
}
.e-403__svg {
  width: 100%;
  height: 100%;
}
.e-403__num {
  font-size: clamp(4.8rem, 8vw, 8rem);
  font-weight: 900;
  color: var(--admin-primary);
  opacity: 0.15;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: -0.5rem 0;
}
.e-403__title {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 700;
  color: var(--admin-text);
  margin: 0;
}
.e-403__desc {
  font-size: var(--admin-fs-body-lg);
  color: var(--admin-text-muted);
  line-height: 1.65;
  max-width: 42rem;
  margin: 0;
}
.e-403__actions {
  display: flex;
  gap: var(--admin-space-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--admin-space-xs);
}
.e-403__foot {
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
  margin-top: var(--admin-space-xl);
}
.e-403__brand {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.admin-role-perm {
  margin-top: var(--admin-space-2xl);
}
.admin-role-perm__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space);
}
.admin-role-perm__header-left {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  flex-wrap: wrap;
}
.admin-role-perm__title {
  margin: 0;
  font-size: var(--admin-fs-xl);
  font-weight: 700;
  color: var(--admin-text);
}
.admin-role-perm__owner-note {
  padding: var(--admin-space-sm) var(--admin-space-lg);
  background: var(--admin-warn-bg);
  border: 1px solid var(--admin-warn-border);
  border-radius: var(--admin-radius);
  font-size: var(--admin-fs-body);
  color: var(--admin-warn-text);
  margin: 0;
}
.admin-role-perm__empty {
  padding: var(--admin-space-2xl);
  background: var(--admin-card-bg);
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  color: var(--admin-text-muted);
  text-align: center;
  font-size: var(--admin-fs-body);
  margin: 0;
}
.admin-role-perm__empty a {
  color: var(--admin-primary);
}

.rp-save-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 var(--admin-space-xs);
  border-radius: var(--admin-radius-full);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.3);
  color: var(--admin-white);
  margin-left: var(--admin-space-3xs);
  line-height: 1;
}

.rp-crud-grid {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg, 1.25rem);
}

.rp-crud-card {
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  overflow: hidden;
  background: var(--admin-card-bg);
  box-shadow: var(--admin-elevation-1);
}
.rp-crud-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  background: var(--admin-grey-50);
  border-bottom: 1px solid var(--admin-border);
  font-size: var(--admin-fs-sm);
  font-weight: 800;
  color: var(--admin-text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rp-crud-card__head .fa-solid {
  font-size: 1em;
  color: var(--admin-primary);
  opacity: 0.7;
}
.rp-crud-card__body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .rp-crud-card__body {
    overflow-x: visible;
  }
}

.rp-crud-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.rp-crud-table th, .rp-crud-table td {
  border: none;
}
.rp-crud-table thead tr {
  border-bottom: 1px solid var(--admin-border);
}
.rp-crud-table__th-feature {
  text-align: left;
  padding: 0.8rem 1.5rem 0.8rem 2rem;
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: var(--admin-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--admin-grey-50);
  border-right: 1px solid var(--admin-border);
  min-width: 200px;
}
.rp-crud-table__th-action {
  text-align: center;
  padding: 0.8rem 0.5rem;
  font-size: var(--admin-fs-sm);
  font-weight: 700;
  color: var(--admin-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--admin-grey-50);
  border-left: 1px solid var(--admin-border-light);
  white-space: nowrap;
  width: 96px;
  min-width: 84px;
}
.rp-crud-table__row {
  border-top: 1px solid var(--admin-border-light);
  transition: background var(--admin-duration-short);
}
.rp-crud-table__row:hover {
  background: var(--admin-primary-light);
}
.rp-crud-table__row:first-child {
  border-top: none;
}
.rp-crud-table__feature {
  padding: 1rem 1.5rem 1rem 2rem;
  color: var(--admin-text);
  font-size: var(--admin-fs-body-lg);
  font-weight: 500;
  border-right: 1px solid var(--admin-border);
  vertical-align: middle;
}
.rp-crud-table__cell {
  text-align: center;
  vertical-align: middle;
  padding: 0.6rem 0;
  border-left: 1px solid var(--admin-border-light);
}
.rp-crud-table__empty {
  display: inline-block;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--admin-text-muted);
  opacity: 0.2;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 768px) {
  .rp-crud-table {
    display: block;
  }
  .rp-crud-table thead {
    display: none;
  }
  .rp-crud-table tbody {
    display: block;
  }
  .rp-crud-table__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.85rem 1.25rem 0.75rem;
    border-top: 1px solid var(--admin-border-light);
  }
  .rp-crud-table__row:first-child {
    border-top: none;
  }
  .rp-crud-table__row:hover {
    background: var(--admin-primary-light);
  }
  .rp-crud-table__feature {
    flex: 1 1 100%;
    padding: 0 0 0.5rem;
    border-right: none;
    font-size: var(--admin-fs-body-lg);
    font-weight: 600;
    color: var(--admin-text);
  }
  .rp-crud-table__cell {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0.25rem 0.4rem;
    border-left: none;
  }
  .rp-crud-table__cell::before {
    content: attr(data-label);
    font-size: 0.9rem;
    color: var(--admin-text-muted);
    letter-spacing: 0.04em;
    font-weight: 600;
    text-transform: uppercase;
  }
  .rp-crud-table__cell--empty {
    display: none;
  }
}

.admin-stores-settings__divider {
  margin: var(--admin-space-2xl) 0;
  border: 0;
  border-top: 1px solid var(--admin-border);
}
.admin-stores-settings__test-note {
  margin: 0 0 var(--admin-space-xl);
}
.admin-stores-settings__test-form {
  display: flex;
  gap: var(--admin-space-sm);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--admin-space-xl);
}
.admin-stores-settings__test-current {
  flex: 1;
  min-width: 20rem;
  margin: 0;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body-sm);
}
.admin-stores-settings__test-status {
  display: grid;
  gap: var(--admin-space-xs);
  margin-bottom: var(--admin-space-xl);
  padding: var(--admin-space-md);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-md);
  background: var(--admin-bg-subtle);
}
.admin-stores-settings__test-status-row {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body-sm);
  line-height: 1.5;
}
.admin-stores-settings__test-badge {
  flex: 0 0 auto;
  min-width: 4.8rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text-muted);
  background: var(--admin-bg);
  font-size: var(--admin-fs-body-xs);
  font-weight: 700;
  text-align: center;
}
.admin-stores-settings__test-badge[data-state=pending] {
  color: var(--admin-primary);
  border-color: color-mix(in srgb, var(--admin-primary) 35%, var(--admin-border));
}
.admin-stores-settings__test-badge[data-state=success] {
  color: var(--admin-success);
  border-color: color-mix(in srgb, var(--admin-success) 35%, var(--admin-border));
}
.admin-stores-settings__test-badge[data-state=error] {
  color: var(--admin-danger);
  border-color: color-mix(in srgb, var(--admin-danger) 35%, var(--admin-border));
}
.admin-stores-settings__test-badge[data-state=skipped] {
  color: var(--admin-warning);
  border-color: color-mix(in srgb, var(--admin-warning) 35%, var(--admin-border));
}
.admin-stores-settings__request {
  display: grid;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space-xl);
  padding: var(--admin-space-md);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-md);
  background: var(--admin-bg);
}
.admin-stores-settings__request-title {
  margin: 0;
  color: var(--admin-text);
  font-size: var(--admin-fs-body-md);
  font-weight: 700;
}
.admin-stores-settings__request-list {
  display: grid;
  gap: var(--admin-space-xs);
  margin: 0;
}
.admin-stores-settings__request-list > div {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
  gap: var(--admin-space-sm);
  align-items: start;
}
.admin-stores-settings__request-list dt {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body-xs);
  font-weight: 700;
}
.admin-stores-settings__request-list dd {
  min-width: 0;
  margin: 0;
  color: var(--admin-text);
  font-size: var(--admin-fs-body-xs);
}
.admin-stores-settings__request-list code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-stores-settings__request-list pre {
  margin: 0;
  white-space: pre-wrap;
}
.admin-stores-settings__request-note {
  margin: 0;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body-xs);
  line-height: 1.5;
}

.admin-map-settings-preview {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-md);
  overflow: hidden;
  background: var(--admin-bg);
}
.admin-map-settings-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-md);
  padding: var(--admin-space-md);
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--admin-bg-subtle);
  flex-wrap: wrap;
}
.admin-map-settings-preview__copy {
  display: grid;
  gap: var(--admin-space-xs);
  min-width: 0;
}
.admin-map-settings-preview__title {
  margin: 0;
  font-size: var(--admin-fs-body-lg);
  font-weight: 700;
  color: var(--admin-text);
}
.admin-map-settings-preview__desc {
  margin: 0;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body-sm);
}
.admin-map-settings-preview__status {
  padding: var(--admin-space-sm) var(--admin-space-md);
  border-bottom: 1px solid var(--admin-border-light);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body-sm);
}
.admin-map-settings-preview__status[data-state=success] {
  color: var(--admin-success);
}
.admin-map-settings-preview__status[data-state=error] {
  color: var(--admin-danger);
}
.admin-map-settings-preview__canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 38rem;
  background: var(--admin-bg-subtle);
}
.admin-map-settings-preview__search {
  display: grid;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-md);
  border-top: 1px solid var(--admin-border-light);
  background: var(--admin-bg-subtle);
}
.admin-map-settings-preview__search-types {
  display: flex;
  align-items: center;
  gap: var(--admin-space-lg);
  flex-wrap: wrap;
}
.admin-map-settings-preview__search-types label {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-xs);
  color: var(--admin-text);
  font-size: var(--admin-fs-body-sm);
  cursor: pointer;
}
.admin-map-settings-preview__search-row, .admin-map-settings-preview__coord-row {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  flex-wrap: wrap;
}
.admin-map-settings-preview__query {
  flex: 1 1 24rem;
  min-width: 14rem;
}
.admin-map-settings-preview__coord-row label {
  display: grid;
  grid-template-columns: auto minmax(10rem, 1fr);
  align-items: center;
  gap: var(--admin-space-xs);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body-sm);
}
.admin-map-settings-preview__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--admin-space-md);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-body-sm);
  text-align: center;
}

.store-map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
  transform-origin: center bottom;
  transition: transform 0.16s ease;
}

.store-map-pin--public {
  width: 11.2rem;
  height: 14rem;
}

.store-map-pin--preview {
  width: 4rem;
  height: 4rem;
}

.store-map-pin--active {
  transform: scale(1.18);
}

.store-map-pin__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* ──────────────────────────────────────────────────────────────
   페이지·메뉴 관리 — 드래그 트리 + 자유 블록 빌더
   ────────────────────────────────────────────────────────────── */
/* 트리 ------------------------------------------------------------ */
.admin-page-tree {
  margin-top: var(--admin-space-lg);
}
.admin-page-tree__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--admin-space);
  padding: var(--admin-space-xl) var(--admin-space-lg);
  background: var(--admin-grey-50);
  border: 1px dashed var(--admin-border-light);
  border-radius: var(--admin-radius-lg, 8px);
  text-align: center;
}
.admin-page-tree__empty-text {
  color: var(--admin-grey-500);
  font-size: 14px;
}
.admin-page-tree__list, .admin-page-tree__children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin-page-tree {
  /* 하위 목록 들여쓰기 + 가이드 라인 */
}
.admin-page-tree__children {
  margin-left: var(--admin-space-lg);
  padding-left: var(--admin-space);
  border-left: 2px solid var(--admin-border-light);
  min-height: 6px; /* 빈 하위에도 드롭 가능하도록 최소 높이 */
}
.admin-page-tree__item {
  margin: var(--admin-space-sm) 0;
}
.admin-page-tree__row {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-surface, #fff);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius, 6px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-page-tree__row:hover {
  border-color: var(--admin-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.admin-page-tree__row--hidden {
  opacity: 0.6;
}
.admin-page-tree__handle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--admin-grey-400);
  background: transparent;
  border: none;
  cursor: grab;
  border-radius: var(--admin-radius-sm, 4px);
}
.admin-page-tree__handle:hover {
  color: var(--admin-grey-700);
  background: var(--admin-grey-100);
}
.admin-page-tree__handle:active {
  cursor: grabbing;
}
.admin-page-tree__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--admin-grey-900, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-page-tree__untitled {
  color: var(--admin-grey-400);
  font-weight: 400;
  font-style: italic;
}
.admin-page-tree__meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-sm);
}
.admin-page-tree__slug {
  font-size: 12px;
  color: var(--admin-grey-500);
  background: var(--admin-grey-50);
  padding: 2px 6px;
  border-radius: var(--admin-radius-sm, 4px);
}
.admin-page-tree__actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-sm);
}
.admin-page-tree {
  /* SortableJS 드래그 상태 */
}
.admin-page-tree__ghost > .admin-page-tree__row {
  opacity: 0.5;
  border-style: dashed;
  border-color: var(--admin-primary, #2563eb);
}
.admin-page-tree__drag > .admin-page-tree__row {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* 블록 빌더 ------------------------------------------------------- */
.admin-page-blocks {
  margin-top: var(--admin-space);
}
.admin-page-blocks__canvas {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}
.admin-page-blocks__empty {
  padding: var(--admin-space-xl) var(--admin-space-lg);
  margin-bottom: var(--admin-space);
  color: var(--admin-grey-500);
  background: var(--admin-grey-50);
  border: 1px dashed var(--admin-border-light);
  border-radius: var(--admin-radius, 6px);
  text-align: center;
  font-size: 13px;
}
.admin-page-blocks__add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
  margin-top: var(--admin-space);
}

.admin-page-block {
  position: relative;
  padding: var(--admin-space);
  background: var(--admin-surface, #fff);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-lg, 8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.admin-page-block--ghost {
  opacity: 0.5;
  border-style: dashed;
  border-color: var(--admin-primary, #2563eb);
}
.admin-page-block__head {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space);
  padding-bottom: var(--admin-space-sm);
  border-bottom: 1px dashed var(--admin-border-light);
}
.admin-page-block__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--admin-grey-400);
  background: transparent;
  border: none;
  cursor: grab;
  border-radius: var(--admin-radius-sm, 4px);
}
.admin-page-block__handle:hover {
  color: var(--admin-grey-700);
  background: var(--admin-grey-100);
}
.admin-page-block__type-badge {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--admin-grey-700);
}
.admin-page-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}
.admin-page-block__locale {
  /* 언어별 입력 묶음 */
}
.admin-page-block__file-hint {
  margin-top: var(--admin-space-sm);
  font-size: 12px;
  color: var(--admin-grey-500);
}

/* 추가/수정 모달 ------------------------------------------------- */
.site-page-modal.app-modal-box {
  width: min(96vw, 56rem);
  max-width: 56rem;
}

.admin-page-modal__delete-row {
  margin-top: var(--admin-space);
  padding-top: var(--admin-space);
  border-top: 1px dashed var(--admin-border-light);
  text-align: right;
}

/* ============================================================
   CMS 관리자 (메뉴/페이지/섹션/요소) — 기능 위주 레이아웃.
   트리(드래그)는 .admin-page-tree(_site-pages.scss) 스타일 재사용.
   ============================================================ */
/* 공용 — 모달 폼 삭제 줄 */
.admin-page-modal__delete-row {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--admin-border, #e5e7eb);
  text-align: right;
}

/* ── 메뉴 관리: 좌 그룹 / 우 트리 ── */
.admin-cms-menus__layout {
  display: grid;
  grid-template-columns: 28rem 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .admin-cms-menus__layout {
    grid-template-columns: 1fr;
  }
}
.admin-cms-menus__groups {
  padding: 1.6rem;
  background: var(--admin-surface, #fff);
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: 0.8rem;
}
.admin-cms-menus__group-list {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.admin-cms-menus__group {
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: 0.6rem;
  overflow: hidden;
}
.admin-cms-menus__group.is-active {
  border-color: var(--admin-primary, #2563eb);
  box-shadow: 0 0 0 1px var(--admin-primary, #2563eb) inset;
}
.admin-cms-menus__group-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: inherit;
}
.admin-cms-menus__group-link:hover {
  background: var(--admin-surface-2, #f8fafc);
}
.admin-cms-menus__group-name {
  font-weight: 600;
}
.admin-cms-menus__group-code {
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--admin-text-muted, #6b7280);
}
.admin-cms-menus__group-edit, .admin-cms-menus__group-new {
  padding: 0 1rem 1rem;
}
.admin-cms-menus__group-edit > summary, .admin-cms-menus__group-new > summary {
  cursor: pointer;
  margin: 0.6rem 0;
  display: inline-flex;
}
.admin-cms-menus__tree-area {
  min-width: 0;
  padding: 1.6rem;
  background: var(--admin-surface, #fff);
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: 0.8rem;
}
.admin-cms-menus__tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.admin-cms-menus__empty {
  padding: 3rem;
  text-align: center;
  color: var(--admin-text-muted, #6b7280);
}

.admin-cms-variables .admin-cms-variable-panel {
  min-height: 64rem;
}

.admin-cms-variable-panel {
  --cms-variable-bg: var(--color-bg-surface);
  --cms-variable-sidebar-bg: var(--color-bg-subtle);
  --cms-variable-toolbar-bg: var(--color-bg-surface);
  --cms-variable-row-hover: var(--color-bg-hover);
  --cms-variable-row-selected: var(--color-bg-selected);
  --cms-variable-border: var(--color-border-default);
  --cms-variable-border-soft: var(--color-border-subtle);
  --cms-variable-text: var(--color-text-primary);
  --cms-variable-muted: var(--color-text-secondary);
  --cms-variable-faint: var(--color-text-muted);
  --cms-variable-focus: var(--color-border-focus);
  --cms-variable-danger: var(--color-status-danger);
  --cms-variable-swatch: var(--color-bg-surface);
  display: grid;
  grid-template-columns: minmax(24rem, 28rem) minmax(0, 1fr);
  overflow: hidden;
  min-height: 100%;
  border: 1px solid var(--cms-variable-border);
  border-radius: var(--admin-radius-lg);
  background: var(--cms-variable-bg);
  color: var(--cms-variable-text);
  box-shadow: var(--admin-shadow-lg);
}
.admin-cms-variable-panel__sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--cms-variable-border);
  background: var(--cms-variable-sidebar-bg);
  overflow: auto;
}
.admin-cms-variable-panel__sidebar-head, .admin-cms-variable-panel__topbar {
  min-height: 5.2rem;
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space) var(--admin-space-lg);
  border-bottom: 1px solid var(--cms-variable-border);
}
.admin-cms-variable-panel__topbar {
  justify-content: flex-end;
  cursor: move;
}
.admin-cms-variable-panel__title {
  flex: 1;
  min-width: 0;
  font-size: var(--admin-fs-md);
}
.admin-cms-variable-panel__layout-icon, .admin-cms-variable-panel__icon-button, .admin-cms-variable-panel__save, .admin-cms-variable-panel__delete, .admin-cms-variable-panel__create-button {
  color: var(--cms-variable-text);
}
.admin-cms-variable-panel__icon-button, .admin-cms-variable-panel__save, .admin-cms-variable-panel__delete, .admin-cms-variable-panel__create-button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.admin-cms-variable-panel__icon-button, .admin-cms-variable-panel__save, .admin-cms-variable-panel__delete {
  width: var(--size-control-small);
  height: var(--size-control-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--admin-radius-sm);
}
.admin-cms-variable-panel__icon-button:hover, .admin-cms-variable-panel__icon-button:focus-visible, .admin-cms-variable-panel__save:hover, .admin-cms-variable-panel__save:focus-visible, .admin-cms-variable-panel__delete:hover, .admin-cms-variable-panel__delete:focus-visible {
  background: var(--cms-variable-row-hover);
  outline: none;
}
.admin-cms-variable-panel__delete:hover, .admin-cms-variable-panel__delete:focus-visible {
  color: var(--cms-variable-danger);
}
.admin-cms-variable-panel__collection-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--size-control-small);
  align-items: end;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-lg);
  border-bottom: 1px solid var(--cms-variable-border-soft);
}
.admin-cms-variable-panel__collection-form .admin-form__label {
  color: var(--cms-variable-text);
}
.admin-cms-variable-panel__collection-list, .admin-cms-variable-panel__groups {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
  padding: var(--admin-space-lg);
}
.admin-cms-variable-panel__groups {
  margin-top: var(--admin-space);
  border-top: 1px solid var(--cms-variable-border);
}
.admin-cms-variable-panel__group-title {
  color: var(--cms-variable-muted);
  font-size: var(--admin-fs-sm);
}
.admin-cms-variable-panel__collection, .admin-cms-variable-panel__group {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space);
  border: 0;
  border-radius: var(--admin-radius-sm);
  background: transparent;
  color: var(--cms-variable-muted);
  cursor: pointer;
  text-align: left;
}
.admin-cms-variable-panel__collection:hover, .admin-cms-variable-panel__collection:focus-visible, .admin-cms-variable-panel__group:hover, .admin-cms-variable-panel__group:focus-visible {
  background: var(--cms-variable-row-hover);
  color: var(--cms-variable-text);
  outline: none;
}
.admin-cms-variable-panel__collection.is-active, .admin-cms-variable-panel__group.is-active {
  background: var(--cms-variable-row-selected);
  color: var(--cms-variable-text);
}
.admin-cms-variable-panel__collection-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.admin-cms-variable-panel__count {
  color: currentColor;
  opacity: 0.75;
}
.admin-cms-variable-panel__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-cms-variable-panel__search {
  width: min(34rem, 100%);
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--cms-variable-border);
  border-radius: var(--admin-radius-sm);
  background: var(--cms-variable-toolbar-bg);
  color: var(--cms-variable-muted);
}
.admin-cms-variable-panel__search > i {
  justify-self: center;
}
.admin-cms-variable-panel__search .admin-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.admin-cms-variable-panel .admin-form__input {
  min-width: 0;
  border-color: transparent;
  background: transparent;
  color: var(--cms-variable-text);
}
.admin-cms-variable-panel .admin-form__input::placeholder {
  color: var(--cms-variable-faint);
}
.admin-cms-variable-panel .admin-form__input:focus {
  border-color: var(--cms-variable-focus);
  box-shadow: none;
}
.admin-cms-variable-panel__table {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.admin-cms-variable-panel__head, .admin-cms-variable-panel__row-form {
  display: grid;
  grid-template-columns: minmax(22rem, 1fr) minmax(22rem, 1fr) minmax(12rem, 16rem) minmax(8rem, 12rem);
  align-items: stretch;
}
.admin-cms-variable-panel__head {
  min-height: 5.2rem;
  border-bottom: 1px solid var(--cms-variable-border);
  color: var(--cms-variable-text);
  font-weight: 700;
}
.admin-cms-variable-panel__head > span {
  display: flex;
  align-items: center;
  padding: var(--admin-space) var(--admin-space-lg);
  border-right: 1px solid var(--cms-variable-border);
}
.admin-cms-variable-panel__row, .admin-cms-variable-panel__create, .admin-cms-variable-panel__create-trigger {
  border-bottom: 1px solid var(--cms-variable-border-soft);
}
.admin-cms-variable-panel__row.is-hidden, .admin-cms-variable-panel__create.is-hidden, .admin-cms-variable-panel__create-trigger.is-hidden {
  display: none;
}
.admin-cms-variable-panel__cell {
  min-width: 0;
  min-height: 5.8rem;
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm) var(--admin-space-lg);
  border-right: 1px solid var(--cms-variable-border-soft);
}
.admin-cms-variable-panel__cell .admin-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.admin-cms-variable-panel__cell code {
  color: var(--cms-variable-faint);
  white-space: nowrap;
}
.admin-cms-variable-panel__cell--name > i {
  color: var(--cms-variable-muted);
}
.admin-cms-variable-panel__cell--value .admin-form__input {
  font-family: var(--admin-font-mono, monospace);
  text-transform: uppercase;
}
.admin-cms-variable-panel__cell--state {
  justify-content: center;
}
.admin-cms-variable-panel__cell--state .admin-checkbox-wrap {
  margin: 0;
}
.admin-cms-variable-panel__cell--action {
  justify-content: center;
  gap: var(--admin-space-xs);
  border-right: 0;
}
.admin-cms-variable-panel__swatch {
  width: var(--size-icon-large);
  height: var(--size-icon-large);
  flex: 0 0 auto;
  border: 1px solid var(--cms-variable-border);
  border-radius: var(--admin-radius-sm);
  background: var(--cms-variable-swatch);
}
.admin-cms-variable-panel__swatch.is-empty {
  background: linear-gradient(45deg, transparent 45%, var(--cms-variable-faint) 45%, var(--cms-variable-faint) 55%, transparent 55%), var(--cms-variable-row-hover);
}
.admin-cms-variable-panel__create {
  background: var(--cms-variable-row-hover);
}
.admin-cms-variable-panel__create-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-sm);
  width: 100%;
  min-height: var(--size-control-medium);
  border-radius: var(--admin-radius-sm);
  color: var(--cms-variable-text);
}
.admin-cms-variable-panel__create-button:hover, .admin-cms-variable-panel__create-button:focus-visible {
  background: var(--cms-variable-row-hover);
  outline: none;
}
.admin-cms-variable-panel__create-trigger {
  padding: var(--admin-space-sm) var(--admin-space-lg);
}
.admin-cms-variable-panel__create-trigger-button {
  width: 100%;
  min-height: var(--size-control-large);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--admin-space-sm);
  padding: 0 var(--admin-space);
  appearance: none;
  border: 0;
  border-radius: var(--admin-radius-sm);
  background: transparent;
  color: var(--cms-variable-text);
  cursor: pointer;
}
.admin-cms-variable-panel__create-trigger-button:hover, .admin-cms-variable-panel__create-trigger-button:focus-visible {
  background: var(--cms-variable-row-hover);
  outline: none;
}
.admin-cms-variable-panel__delete-form {
  display: none;
}
.admin-cms-variable-panel__empty {
  margin: 0;
  padding: var(--admin-space-lg);
  color: var(--cms-variable-muted);
}
.admin-cms-variable-panel__empty--table {
  text-align: center;
}
@media (max-width: 900px) {
  .admin-cms-variable-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-cms-variable-panel__sidebar {
    max-height: 24rem;
    border-right: 0;
    border-bottom: 1px solid var(--cms-variable-border);
  }
  .admin-cms-variable-panel__head, .admin-cms-variable-panel__row-form {
    grid-template-columns: minmax(20rem, 1fr) minmax(18rem, 1fr) minmax(10rem, 14rem) minmax(8rem, 10rem);
  }
}

/* ── 페이지 편집: 넓은 전체화면 ── */
.admin-page--wide {
  max-width: none;
}

.admin-cms-editor__panel {
  margin-top: 1.6rem;
  padding: 2rem;
  background: var(--admin-surface, #fff);
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: 0.8rem;
}

/* ── 콘텐츠 탭: 섹션/요소 ── */
.admin-cms-content__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.admin-cms-content__hint {
  color: var(--admin-text-muted, #6b7280);
  margin: 0;
}

.admin-cms-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-cms-section {
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: 0.8rem;
  background: var(--admin-surface, #fff);
}
.admin-cms-section__summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.admin-cms-section__summary::-webkit-details-marker {
  display: none;
}
.admin-cms-section__title {
  font-weight: 600;
}
.admin-cms-section__meta {
  margin-left: auto;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}
.admin-cms-section__body {
  padding: 1.2rem;
  border-top: 1px solid var(--admin-border, #e5e7eb);
}
.admin-cms-section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.admin-cms-section__add-el > summary {
  cursor: pointer;
  display: inline-flex;
}
.admin-cms-section__type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 1rem;
  background: var(--admin-surface-2, #f8fafc);
  border-radius: 0.6rem;
}
.admin-cms-section__empty {
  color: var(--admin-text-muted, #6b7280);
  margin: 0.4rem 0;
}

.admin-cms-elements {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-cms-element {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: 0.6rem;
  background: var(--admin-surface-2, #f8fafc);
}
.admin-cms-element__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-element__actions {
  margin-left: auto;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.admin-form-inline {
  display: inline;
}

/* 메뉴 항목 폼 — 새 페이지 자동 생성.
   "메뉴 설정"과 명확히 구분되는 틴트 패널 + 좌측 액센트(= 새로 만드는 영역 신호). */
.cms-newpage {
  margin: 1rem 0; /* 10px */
  padding: 1.2rem; /* 12px */
  background: var(--admin-primary-light, #eff6ff); /* blue-50 틴트 */
  border: 1px solid var(--admin-primary-border, #dbeafe);
  border-left: 3px solid var(--admin-primary, #2563eb); /* 좌측 액센트 */
  border-radius: 0.6rem; /* 6px */
  /* 토글(component checkbox)이 패널 헤더처럼 보이도록 컴포넌트 래퍼 여백 제거 */
}
.cms-newpage > .admin-form__block {
  margin: 0;
}
.cms-newpage__fields {
  display: block;
}
.cms-newpage__sections {
  border: 0;
  margin: 0.6rem 0 0;
  padding: 0;
}

/* 메뉴 항목 폼 — 링크 유형별 조건부 영역. 루트 data-link-type 은 CmsMenuItemForm.ts 가
   select[name="link_type"] 값으로 설정한다(SlimSelect 래핑돼도 안전). */
.cms-item-form__when {
  display: none;
}

.cms-item-form[data-link-type=view] .cms-item-form__when[data-link~=view],
.cms-item-form[data-link-type=page] .cms-item-form__when[data-link~=page],
.cms-item-form[data-link-type=board] .cms-item-form__when[data-link~=board],
.cms-item-form[data-link-type=external] .cms-item-form__when[data-link~=external],
.cms-item-form[data-link-type=anchor] .cms-item-form__when[data-link~=anchor],
.cms-item-form[data-link-type=redirect] .cms-item-form__when[data-link~=redirect],
.cms-item-form[data-link-type=group] .cms-item-form__when[data-link~=group],
.cms-item-form[data-link-type=none] .cms-item-form__when[data-link~=none] {
  display: block;
}

/* 파일 연결 — resources/views/ 기준 경로 입력 + 자동완성 드롭다운 */
.cms-viewfile {
  position: relative;
}

.cms-viewfile__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-1, 0.4rem);
}

.cms-viewfile__prefix {
  flex: 0 0 auto;
  padding: var(--spacing-1, 0.4rem) var(--spacing-2, 0.8rem);
  background: var(--admin-surface-2, #f3f4f6);
  border-radius: var(--radius-sm, 0.4rem);
  font-family: var(--font-mono, monospace);
  color: var(--admin-text-muted, #6b7280);
  white-space: nowrap;
}

.cms-viewfile__input {
  flex: 1 1 auto;
  font-family: var(--font-mono, monospace);
}

.cms-viewfile__dropdown {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  max-height: 24rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--admin-surface, #fff);
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: var(--radius-sm, 0.4rem);
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.12);
}

.cms-viewfile__dropdown[hidden] {
  display: none;
}

.cms-viewfile__option {
  padding: var(--spacing-1, 0.4rem) var(--spacing-2, 0.8rem);
  border-radius: var(--radius-sm, 0.4rem);
  font-family: var(--font-mono, monospace);
  cursor: pointer;
}

.cms-viewfile__option:hover,
.cms-viewfile__option--active {
  background: var(--admin-surface-2, #f3f4f6);
}

.cms-viewfile__option--empty {
  color: var(--admin-text-muted, #6b7280);
  cursor: default;
}

.cms-viewfile__url {
  font-family: var(--font-mono, monospace);
}

/* 리다이렉트 대상 메뉴 — select 대신 계층 구조 모달 선택기 */
.cms-redirect-picker {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}
.cms-redirect-picker__hidden {
  display: none;
}
.cms-redirect-picker__control {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
}
@media (max-width: 640px) {
  .cms-redirect-picker__control {
    align-items: stretch;
    flex-direction: column;
  }
}
.cms-redirect-picker__trigger {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--admin-size-input-height);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space);
  padding: 0 var(--admin-space-lg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  color: var(--admin-text);
  font-family: inherit;
  font-size: var(--admin-fs-body-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease);
}
.cms-redirect-picker__trigger:hover {
  border-color: var(--admin-border-strong);
  background: var(--admin-surface-2);
}
.cms-redirect-picker__trigger:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: var(--admin-focus-ring);
}
.cms-redirect-picker__current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cms-redirect-picker__trigger-icon {
  flex: 0 0 auto;
  color: var(--admin-primary);
}
.cms-redirect-picker__clear {
  flex: 0 0 auto;
}
.cms-redirect-picker__panel {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}
.cms-redirect-picker__search-row {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--admin-modal-box-bg);
  padding-bottom: var(--admin-space-xs);
}
.cms-redirect-picker__search {
  width: 100%;
}
.cms-redirect-picker__tree, .cms-redirect-picker__children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cms-redirect-picker__tree {
  max-height: min(62vh, 48rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}
.cms-redirect-picker__children {
  margin-top: var(--admin-space-xs);
  padding-left: var(--admin-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  border-left: 1px solid var(--admin-border-light);
}
.cms-redirect-picker__node[hidden] {
  display: none;
}
.cms-redirect-picker__option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space);
  padding: var(--admin-space-sm) var(--admin-space);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  color: var(--admin-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--admin-duration-short) var(--admin-ease), background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.cms-redirect-picker__option:hover:not(:disabled), .cms-redirect-picker__option:focus-visible:not(:disabled) {
  border-color: var(--admin-border-focus);
  background: var(--admin-primary-light);
  outline: none;
}
.cms-redirect-picker__option.is-selected {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
}
.cms-redirect-picker__option:disabled {
  cursor: not-allowed;
  color: var(--admin-text-muted);
  background: var(--admin-surface-2);
}
.cms-redirect-picker__option-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
}
.cms-redirect-picker__option-title {
  font-weight: 600;
}
.cms-redirect-picker__option-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-2xs);
}
.cms-redirect-picker__option-href, .cms-redirect-picker__option-sub {
  min-width: 0;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cms-redirect-picker__option-href--muted {
  color: var(--admin-text-muted);
}
.cms-redirect-picker__check {
  flex: 0 0 auto;
  color: var(--admin-primary);
}
.cms-redirect-picker__empty {
  margin: 0;
  padding: var(--admin-space-xl);
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  color: var(--admin-text-muted);
  text-align: center;
}

/* ============================================================
   통합 CMS 사이트 빌더 — 좌 트리 · 중앙 캔버스 · 설정 패널 drawer
   admin-page-tree / admin-cms-* 카드 스타일은 _site-pages.scss·_cms.scss 재사용.
   루트 font-size 62.5% → 1rem = 10px (resources/scss/admin/base/_init.scss:13).
   ============================================================ */
/* 기본 콘텐츠 폭 제한 탈출(Work 캔버스 패턴) */
.admin__content:has(> .admin-cms-builder) {
  max-width: none;
}

.admin-cms-builder {
  --admin-cms-builder-surface: var(--admin-surface);
  --admin-cms-builder-surface-muted: var(--admin-bg-soft);
  --admin-cms-builder-border: var(--admin-border);
  --admin-cms-builder-border-strong: var(--admin-border-strong);
  --admin-cms-builder-text: var(--admin-text);
  --admin-cms-builder-text-muted: var(--admin-text-muted);
  display: flex;
  flex-direction: column;
  gap: 1.2rem; /* 12px */
  height: calc(100vh - 9rem);
  min-height: 56rem;
  color: var(--admin-cms-builder-text);
  /* ── 상단 툴바 ─────────────────────────────────────────── */
}
.admin-cms-builder__toolbar {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 1.2rem; /* 12px */
  padding: 1rem 1.4rem; /* 10px 14px */
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(0, 0, 0, 0.04));
  position: sticky;
  top: 0;
  z-index: 5;
}
.admin-cms-builder__toolbar-main {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  width: 100%;
}
.admin-cms-builder__toolbar-title {
  display: flex;
  align-items: center;
  gap: 0.8rem; /* 8px */
  font-size: 1.6rem; /* 16px */
}
.admin-cms-builder__toolbar-title > strong {
  letter-spacing: -0.01em;
}
.admin-cms-builder__toolbar-lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.admin-cms-builder__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin-cms-builder__toolbar-actions .is-disabled {
  pointer-events: auto;
  opacity: 0.55;
  cursor: not-allowed;
}
.admin-cms-builder__lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-2xs, 0.4rem);
  min-width: 3.4rem; /* 34px */
  padding: 0.4rem 0.9rem; /* 4px 9px */
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.5rem);
  background: var(--admin-surface);
  color: var(--admin-text-secondary);
  cursor: pointer;
  font-weight: 600;
  transition: background var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease, color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-builder__lang:hover {
  border-color: var(--admin-primary);
  color: var(--admin-primary-text);
}
.admin-cms-builder__lang.is-active {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  border-color: var(--admin-primary);
}
.admin-cms-builder {
  /* ── 3패널 그리드 ──────────────────────────────────────── */
}
.admin-cms-builder__body {
  display: grid;
  grid-template-columns: minmax(38rem, 46rem) minmax(0, 1fr);
  gap: 1.2rem; /* 12px */
  flex: 1;
  min-height: 0;
  min-width: 0;
}
@media (max-width: 1280px) {
  .admin-cms-builder__body {
    grid-template-columns: minmax(34rem, 40rem) minmax(0, 1fr);
  }
}
@media (max-width: 960px) {
  .admin-cms-builder__body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.admin-cms-builder__left, .admin-cms-builder__center {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(0, 0, 0, 0.04));
  overflow: auto;
  min-height: 0;
  min-width: 0;
}
.admin-cms-builder {
  /* ── 좌측 패널 (단일 메뉴 트리 + 미연결 페이지) ──────────── */
}
.admin-cms-builder__left {
  padding: 1.4rem;
}
.admin-cms-builder { /* 14px */ }
.admin-cms-builder__left-head {
  margin-bottom: 1rem;
}
.admin-cms-builder__left-actions {
  margin-bottom: 1.2rem;
}
.admin-cms-builder__group-row {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 5px */
  margin-top: 0.5rem; /* 5px */
}
.admin-cms-builder__group-row > select {
  flex: 1;
  min-width: 0;
}
.admin-cms-builder__left-actions > .admin-btn {
  width: 100%;
  justify-content: center;
}
.admin-cms-builder__tree-search {
  margin-bottom: 1rem;
}
.admin-cms-builder { /* 10px */ }
.admin-cms-builder__tree-host {
  min-height: 0;
}
.admin-cms-builder {
  /* ── 미연결 페이지 (트리 하단) ─────────────────────────── */
}
.admin-cms-builder__unlinked {
  margin-top: 1.4rem; /* 14px */
  padding-top: 1.2rem; /* 12px */
  border-top: 1px dashed var(--admin-border-strong);
}
.admin-cms-builder__unlinked-box {
  border-radius: var(--admin-radius-sm, 0.6rem);
}
.admin-cms-builder__unlinked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.4rem; /* 6px 4px */
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--admin-text-secondary);
}
.admin-cms-builder__unlinked-head::-webkit-details-marker {
  display: none;
}
.admin-cms-builder__unlinked-head .admin-badge {
  font-weight: 600;
}
.admin-cms-builder__unlinked-chevron {
  transition: transform var(--admin-duration-short, 0.15s) ease;
  color: var(--admin-text-muted);
}
.admin-cms-builder__unlinked-box[open] .admin-cms-builder__unlinked-chevron {
  transform: rotate(180deg);
}
.admin-cms-builder__unlinked-body {
  padding: 0.6rem 0 0;
}
.admin-cms-builder__unlinked-empty {
  color: var(--admin-text-muted);
  font-size: 1.2rem;
  margin: 0.4rem 0.4rem 0.8rem;
}
.admin-cms-builder__unlinked-list {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.admin-cms-builder__unlinked-item {
  min-width: 0;
}
.admin-cms-builder__unlinked-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem; /* 6px */
  padding: 0.7rem 0.9rem; /* 7px 9px */
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--admin-duration-short, 0.12s) ease, background var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-builder__unlinked-row:hover {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
}
.admin-cms-builder__unlinked-row--page {
  position: relative;
  padding-left: calc(var(--admin-space-lg, 1.2rem) + var(--admin-space-md, 1rem));
}
.admin-cms-builder__unlinked-row--page::before {
  content: "\f15c";
  position: absolute;
  left: var(--admin-space-sm, 0.8rem);
  top: 50%;
  transform: translateY(-50%);
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro";
  font-weight: 900;
  color: var(--admin-primary-text);
}
.admin-cms-builder__unlinked-row--page::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro";
  font-weight: 900;
  color: var(--admin-text-placeholder);
  transition: color var(--admin-duration-short, 0.12s) ease, transform var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-builder__unlinked-row--page:hover::after {
  color: var(--admin-primary);
  transform: translateX(0.2rem);
}
.admin-cms-builder__unlinked-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.admin-cms-builder__unlinked-add {
  width: 100%;
  justify-content: center;
}
.admin-cms-builder {
  /* ── 중앙 / 우측 ───────────────────────────────────────── */
}
.admin-cms-builder__center {
  padding: 1.8rem; /* 18px */
  min-width: 0;
}
.admin-cms-builder__right {
  --cms-inspector-bg: var(--admin-card-bg, var(--admin-surface, #ffffff));
  --cms-inspector-header-bg: var(--admin-card-bg, var(--admin-surface, #ffffff));
  --cms-inspector-panel-bg: var(--admin-card-bg, var(--admin-surface, #ffffff));
  --cms-inspector-control-bg: var(--admin-bg-soft, #f9fafb);
  --cms-inspector-control-hover: var(--admin-state-hover, rgba(0, 0, 0, 0.04));
  --cms-inspector-control-active: var(--admin-primary, #0076cb);
  --cms-inspector-border: var(--admin-border, #d1d5db);
  --cms-inspector-divider: var(--admin-border-light, #e5e7eb);
  --cms-inspector-text: var(--admin-text, #111827);
  --cms-inspector-muted: var(--admin-text-secondary, #6b7280);
  --cms-inspector-placeholder: var(--admin-text-muted, #9ca3af);
  --cms-inspector-subtle: var(--cms-inspector-placeholder);
  --cms-inspector-accent: var(--admin-primary, #0076cb);
  --cms-inspector-danger: var(--admin-error, #dc2626);
  --cms-inspector-focus: var(--admin-border-focus, #0a97ed);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 33.6rem;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  background: var(--cms-inspector-bg);
  border-left: 1px solid var(--cms-inspector-border);
  box-shadow: -0.4rem 0 1.6rem rgba(15, 23, 42, 0.08);
  opacity: 0;
  transform: translateX(2.4rem);
  transition: opacity var(--admin-duration-base) ease, transform var(--admin-duration-base) ease;
  will-change: opacity, transform;
}
.admin-cms-builder__right.is-open, .admin-cms-builder__right.is-opening {
  opacity: 1;
  transform: translateX(0);
}
.admin-cms-builder__right.is-closing {
  opacity: 0;
  transform: translateX(2.4rem);
}
.admin-cms-builder__right[hidden], .admin-cms-builder__drawer-backdrop[hidden] {
  display: none;
}
.admin-cms-builder__drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(15, 23, 42, 0.24);
  opacity: 0;
  transition: opacity var(--admin-duration-base) ease;
}
.admin-cms-builder__drawer-backdrop.is-open, .admin-cms-builder__drawer-backdrop.is-opening {
  opacity: 1;
}
.admin-cms-builder__drawer-backdrop.is-closing {
  opacity: 0;
}
.admin-cms-builder__drawer-close {
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.admin-cms-builder__inspector-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.4rem;
  padding: 0.8rem 1.2rem; /* 8px 12px */
  border-bottom: 1px solid var(--cms-inspector-border);
  color: var(--cms-inspector-text);
  font-size: 1.3rem; /* 13px */
  font-weight: 600;
  background: var(--cms-inspector-header-bg);
}
.admin-cms-builder__inspector-body {
  padding: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  background: var(--cms-inspector-bg);
  color: var(--cms-inspector-text);
}
.admin-cms-builder__inspector-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 삭제 좌 · 저장 우 */
  gap: 0.8rem; /* 8px */
  padding: 1rem 1.2rem; /* 10px 12px */
  border-top: 1px solid var(--cms-inspector-border);
  background: var(--cms-inspector-header-bg);
}
.admin-cms-builder {
  /* ── 고객용 선택 기반 UX override ─────────────────────── */
}
.admin-cms-builder__save-status {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0 var(--admin-space-xs, 0.6rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-full, 99rem);
  color: var(--admin-text-secondary);
  background: var(--admin-bg-soft);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 700;
}
.admin-cms-builder__save-status[data-cms-save-state=saving], .admin-cms-builder__save-status[data-cms-save-state=dirty] {
  color: var(--admin-warning-text, #92400e);
  background: var(--admin-warning-bg, #fff7ed);
  border-color: var(--admin-warning-border, #fed7aa);
}
.admin-cms-builder__save-status[data-cms-save-state=saved] {
  color: var(--admin-success-text, #166534);
  background: var(--admin-success-bg, #ecfdf3);
  border-color: var(--admin-success-border, #bbf7d0);
}
.admin-cms-builder__save-status[data-cms-save-state=failed], .admin-cms-builder__save-status[data-cms-save-state=offline] {
  color: var(--admin-danger);
  background: var(--admin-danger-bg);
  border-color: var(--admin-danger-border, var(--admin-danger));
}
.admin-cms-builder__device-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs, 0.4rem);
  padding: var(--admin-space-2xs, 0.4rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
}
.admin-cms-builder__device {
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: transparent;
  color: var(--admin-text-secondary);
  cursor: pointer;
}
.admin-cms-builder__device.is-active, .admin-cms-builder__device:hover {
  color: var(--admin-primary-text);
  border-color: var(--admin-primary-border);
  background: var(--admin-surface);
}
.admin-cms-builder__variable-window {
  position: fixed;
  z-index: 95;
  width: min(112rem, 100vw - var(--admin-space-4xl));
  height: min(72rem, 100vh - var(--admin-space-4xl));
  min-width: min(72rem, 100vw - var(--admin-space-4xl));
  min-height: 44rem;
  overflow: hidden;
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow-modal, 0 2.4rem 7rem rgba(15, 23, 42, 0.28));
}
.admin-cms-builder__variable-window[hidden] {
  display: none;
}
.admin-cms-builder__variable-window.is-dragging {
  user-select: none;
}
.admin-cms-builder__variable-window .admin-cms-variable-panel {
  height: 100%;
  min-height: 0;
}
.admin-cms-builder__body {
  grid-template-columns: minmax(30rem, 36rem) minmax(0, 1fr) minmax(32rem, 38rem);
}
@media (max-width: 1280px) {
  .admin-cms-builder__body {
    grid-template-columns: minmax(28rem, 34rem) minmax(0, 1fr) minmax(30rem, 34rem);
  }
}
@media (max-width: 1180px) {
  .admin-cms-builder__body {
    grid-template-columns: minmax(28rem, 34rem) minmax(0, 1fr);
  }
}
@media (max-width: 960px) {
  .admin-cms-builder__body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.admin-cms-builder__left-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-space-2xs, 0.4rem);
  padding: var(--admin-space-2xs, 0.4rem);
  margin-bottom: var(--admin-space-sm, 0.8rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
}
.admin-cms-builder__left-tab {
  min-height: 3.2rem;
  border: 0;
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: transparent;
  color: var(--admin-text-secondary);
  cursor: pointer;
  font-weight: 700;
}
.admin-cms-builder__left-tab.is-active {
  color: var(--admin-primary-text);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.admin-cms-builder__left-panel[hidden] {
  display: none;
}
.admin-cms-builder__layer-head {
  display: grid;
  gap: var(--admin-space-2xs, 0.4rem);
  margin-bottom: var(--admin-space-sm, 0.8rem);
}
.admin-cms-builder__layer-head > strong {
  font-size: var(--admin-fs-sm, 1.3rem);
}
.admin-cms-builder__layer-head > span {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
}
.admin-cms-builder__pages-head {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
  margin-bottom: var(--admin-space-sm, 0.8rem);
}
.admin-cms-builder__page-rows {
  display: grid;
  gap: var(--admin-space-xs, 0.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-cms-builder__page-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-builder__page-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs, 0.4rem);
  padding: var(--admin-space-xs, 0.6rem) var(--admin-space-sm, 0.8rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
  color: var(--admin-text);
  cursor: pointer;
  text-align: left;
}
.admin-cms-builder__page-row:hover {
  border-color: var(--admin-primary-border);
  background: var(--admin-primary-light);
}
.admin-cms-builder__page-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.admin-cms-builder__page-more {
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-cms-builder__right {
  position: relative;
  top: auto;
  right: auto;
  z-index: 1;
  width: auto;
  height: auto;
  min-height: 0;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(0, 0, 0, 0.04));
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (max-width: 1180px) {
  .admin-cms-builder__right {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 80;
    width: min(48rem, 100vw - 2.4rem);
    height: 100vh;
    border-radius: 0;
    border-width: 0 0 0 1px;
    box-shadow: -1.2rem 0 3.2rem rgba(15, 23, 42, 0.18);
    opacity: 0;
    transform: translateX(2.4rem);
  }
  .admin-cms-builder__right.is-open, .admin-cms-builder__right.is-opening {
    opacity: 1;
    transform: translateX(0);
  }
  .admin-cms-builder__right.is-closing {
    opacity: 0;
    transform: translateX(2.4rem);
  }
}
.admin-cms-builder__foot-left {
  display: flex;
  align-items: center;
}
.admin-cms-builder__foot-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.admin-cms-builder { /* 8px */ }
.admin-cms-builder [data-cms-save-loader] {
  display: none;
}
.admin-cms-builder {
  /* ── 빈 상태 ───────────────────────────────────────────── */
}
.admin-cms-builder__empty {
  color: var(--admin-text-muted);
  padding: 1.4rem;
  text-align: center;
}
.admin-cms-builder__empty--center {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 24rem;
  padding: 2.4rem;
  border: 1px dashed var(--admin-border-strong);
  border-radius: var(--admin-radius-md);
  background: var(--admin-bg-soft);
}
.admin-cms-builder__empty--center::before {
  content: "\f15c"; /* fa file-lines */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 3.2rem; /* 32px */
  color: var(--admin-border-strong);
  margin-bottom: 0.4rem;
}
.admin-cms-builder__tree-title {
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.admin-cms-builder__tree {
  margin-top: 0;
}
.admin-cms-builder__tree .admin-page-tree__row {
  gap: var(--admin-space-xs, 0.6rem);
  padding: var(--admin-space-sm, 0.8rem) var(--admin-space-sm, 0.8rem);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
  transition: background var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-builder__tree .admin-page-tree__row:hover {
  border-color: var(--admin-border-strong);
  background: var(--admin-bg-soft);
  box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.06));
}
.admin-cms-builder__tree .admin-page-tree__row--page:hover {
  border-color: var(--admin-primary-border);
  background: var(--admin-primary-light);
  box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(37, 99, 235, 0.12));
}
.admin-cms-builder__tree .admin-page-tree__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--admin-space-2xs, 0.4rem);
  overflow: hidden;
  text-align: left;
}
.admin-cms-builder__tree .admin-page-tree__title-main {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs, 0.4rem);
  max-width: 100%;
  min-width: 0;
}
.admin-cms-builder__tree .admin-page-tree__title-main > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-builder__tree .admin-page-tree__meta {
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-start;
  gap: var(--admin-space-2xs, 0.4rem);
}
.admin-cms-builder__tree .admin-page-tree__type-badge {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-builder__tree .admin-page-tree__slug {
  max-width: 14rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
}
.admin-cms-builder__tree .admin-page-tree__actions {
  flex: none;
  gap: var(--admin-space-2xs, 0.4rem);
}
.admin-cms-builder__tree .admin-page-tree__action-group {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs, 0.4rem);
  padding-right: var(--admin-space-2xs, 0.4rem);
  border-right: 1px solid var(--admin-border);
}
.admin-cms-builder {
  /* 트리 노드 액션 버튼(⚙ 메뉴설정 · + 하위추가) — 아이콘 정사각 */
}
.admin-cms-builder__node-btn {
  width: 2.6rem; /* 26px */
  height: 2.6rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem; /* 12px */
}

/* ── 트리 노드: 콘텐츠 진입(page) 강조 ─────────────────────── */
.admin-page-tree__title--page {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 5px */
  font-weight: 600;
}
.admin-page-tree__title--page .admin-page-tree__title-icon {
  color: var(--admin-primary-text);
  font-size: 1.2rem; /* 12px */
  flex: none;
}

/* 현재 중앙에서 편집 중인 페이지 노드 강조 */
.admin-page-tree__row.is-active-page {
  position: relative;
  background: var(--admin-primary-light);
  border-radius: var(--admin-radius-sm, 0.6rem);
}
.admin-page-tree__row.is-active-page::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 0.3rem; /* 3px */
  border-radius: 0 0.3rem 0.3rem 0;
  background: var(--admin-primary);
}
.admin-page-tree__row.is-active-page .admin-page-tree__title {
  color: var(--admin-primary-text);
}
.admin-page-tree__row.is-active-page .admin-page-tree__title-icon {
  color: var(--admin-primary);
}

[data-cms-canvas-host] {
  position: relative;
  transition: opacity var(--admin-duration-base) ease, transform var(--admin-duration-base) ease;
}
[data-cms-canvas-host].is-loading-page {
  cursor: wait;
}
[data-cms-canvas-host].is-page-changed {
  animation: admin-cms-canvas-in 0.32s ease both;
}

.admin-cms-builder__canvas-loader {
  position: absolute;
  inset: 1.8rem;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border: 1px dashed var(--admin-primary-border);
  border-radius: var(--admin-radius-md);
  background: rgba(248, 250, 252, 0.88);
  color: var(--admin-primary-text);
  font-size: var(--admin-fs-body-lg, 1.5rem);
  font-weight: 700;
  backdrop-filter: blur(0.2rem);
}
.admin-cms-builder__canvas-loader[hidden] {
  display: none;
}

.admin-cms-builder__canvas-loader-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--admin-radius-full, 99rem);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
}

@keyframes admin-cms-canvas-in {
  from {
    opacity: 0.72;
    transform: translateY(0.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.admin-cms-builder__tree.is-dragging .admin-page-tree__children,
.admin-cms-builder__tree.is-dragging .admin-page-tree__list {
  min-height: 1.8rem;
}
.admin-cms-builder__tree.is-drop-denied {
  cursor: not-allowed;
}
.admin-cms-builder__tree .admin-page-tree__list.is-drop-target,
.admin-cms-builder__tree .admin-page-tree__children.is-drop-target {
  outline: 1px dashed var(--admin-primary);
  outline-offset: 0.3rem;
  background: var(--admin-primary-light);
  border-radius: var(--admin-radius-sm, 0.6rem);
}
.admin-cms-builder__tree .admin-page-tree__chosen > .admin-page-tree__row {
  border-color: var(--admin-primary);
  box-shadow: var(--admin-shadow-card, 0 3px 10px rgba(37, 99, 235, 0.18));
}
.admin-cms-builder__tree .admin-page-tree__ghost > .admin-page-tree__row {
  position: relative;
  opacity: 0.42;
  background: var(--admin-primary-light);
  border-color: var(--admin-primary);
}
.admin-cms-builder__tree .admin-page-tree__ghost > .admin-page-tree__row::after {
  content: "";
  position: absolute;
  left: var(--admin-space-sm, 0.8rem);
  right: var(--admin-space-sm, 0.8rem);
  bottom: -0.4rem;
  height: 0.2rem;
  border-radius: var(--admin-radius-full, 99rem);
  background: var(--admin-primary);
}
.admin-cms-builder__tree .admin-page-tree__drag > .admin-page-tree__row,
.admin-cms-builder__tree .admin-page-tree__fallback > .admin-page-tree__row {
  cursor: grabbing;
  transform: rotate(0.5deg);
}
.admin-cms-builder__tree.is-drop-denied .admin-page-tree__ghost > .admin-page-tree__row {
  background: var(--admin-danger-bg);
  border-color: var(--admin-danger);
}

/* 설정 패널 내부 페이지 탭 */
.admin-cms-inspector__tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.admin-cms-inspector__tabs .admin-cms-inspector__tab {
  padding: 0.5rem 1rem; /* 5px 10px */
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.5rem);
  background: var(--admin-surface);
  cursor: pointer;
  transition: background var(--admin-duration-short, 0.12s) ease, color var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-inspector__tabs .admin-cms-inspector__tab:hover {
  border-color: var(--admin-primary);
}
.admin-cms-inspector__tabs .admin-cms-inspector__tab.is-active {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  border-color: var(--admin-primary);
}

/* ── 중앙 캔버스 ───────────────────────────────────────── */
.admin-cms-builder-canvas {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.admin-cms-builder-canvas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.admin-cms-builder-canvas__head-info {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.admin-cms-builder-canvas__title {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--admin-text);
  cursor: pointer;
  font-size: 1.9rem; /* 19px */
  font-weight: 800;
  text-align: left;
}
.admin-cms-builder-canvas__title:hover, .admin-cms-builder-canvas__title:focus-visible {
  color: var(--admin-primary-text);
  outline: none;
}
.admin-cms-builder-canvas__slug {
  color: var(--admin-text-muted);
  background: var(--admin-bg-soft);
  border-radius: var(--admin-radius-xs, 0.4rem);
  padding: 0.1rem 0.6rem;
  font-size: 1.3rem;
}
.admin-cms-builder-canvas__head-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-cms-builder[data-cms-device-mode=tablet] .admin-cms-builder-canvas {
  max-width: 82rem;
  margin-inline: auto;
}

.admin-cms-builder[data-cms-device-mode=mobile] .admin-cms-builder-canvas {
  max-width: 43rem;
  margin-inline: auto;
}

/* ── 빌더 카드(섹션/요소) — admin-cms-* 와 동일 톤 ───────── */
.admin-cms-card {
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  background: var(--admin-surface);
  margin-bottom: 1.2rem; /* 12px */
  transition: border-color var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-card.is-hidden {
  opacity: 0.55;
}
.admin-cms-card--section {
  padding: 0;
}
.admin-cms-card--section:hover {
  border-color: var(--admin-border-strong);
  box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.06));
}
.admin-cms-card--element {
  display: flex;
  align-items: center;
  gap: 0.8rem; /* 8px */
  padding: 0.8rem 1rem; /* 8px 10px */
  background: var(--admin-bg-soft);
  border-color: transparent;
  margin-bottom: 0.5rem;
}
.admin-cms-card--element:hover {
  border-color: var(--admin-border);
  background: var(--admin-surface);
}
.admin-cms-card__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 1.3rem; /* 11px 13px */
}
.admin-cms-card__title {
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-card__title:hover {
  color: var(--admin-primary-text);
}
.admin-cms-card__title--element {
  font-weight: 400;
  flex: 1;
}
.admin-cms-card__type {
  flex: none;
  min-width: 5.4rem; /* 54px — 요소 타입 배지 정렬폭 */
  text-align: center;
}
.admin-cms-card__meta {
  margin-left: auto;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}
.admin-cms-card__actions {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}
.admin-cms-card__body {
  padding: 0 1.3rem 1.3rem;
  border-top: 1px solid var(--admin-border);
  padding-top: 1.1rem;
}
.admin-cms-card__empty {
  color: var(--admin-text-muted);
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
}
.admin-cms-card__add-el {
  margin-top: 0.4rem;
}
.admin-cms-card__add-el > summary {
  cursor: pointer;
  display: inline-flex;
  list-style: none;
}
.admin-cms-card__add-el > summary::-webkit-details-marker {
  display: none;
}

.admin-cms-card--element .admin-cms-card__actions {
  margin-left: auto;
}

/* 드래그 핸들 명도 */
.admin-cms-card .admin-page-tree__handle,
.admin-cms-builder__tree .admin-page-tree__handle {
  color: var(--admin-text-placeholder);
  cursor: grab;
  transition: color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-card .admin-page-tree__handle:hover,
.admin-cms-builder__tree .admin-page-tree__handle:hover {
  color: var(--admin-text-secondary);
}

/* ── 요소 추가 — 그룹별 아이콘 타일 그리드 ─────────────────── */
.admin-cms-types {
  display: flex;
  flex-direction: column;
  gap: 1.2rem; /* 12px */
  margin-top: 1rem;
  padding: 1.2rem;
  background: var(--admin-bg-soft);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
}
.admin-cms-types__group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.admin-cms-types__group-label {
  font-size: 1.1rem; /* 11px */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
}
.admin-cms-types__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); /* 80px */
  gap: 0.6rem; /* 6px */
}

.admin-cms-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* 5px */
  padding: 1rem 0.6rem; /* 10px 6px */
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--admin-duration-short, 0.12s) ease, background var(--admin-duration-short, 0.12s) ease, transform var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-type:hover {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
  transform: translateY(-1px);
  box-shadow: var(--admin-shadow-card, 0 2px 6px rgba(37, 99, 235, 0.12));
}
.admin-cms-type:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 1px;
}
.admin-cms-type__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem; /* 32px */
  height: 3.2rem;
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
  font-size: 1.5rem; /* 15px */
}
.admin-cms-type:hover .admin-cms-type__icon {
  background: var(--admin-surface);
}
.admin-cms-type__label {
  font-size: 1.15rem; /* 11.5px */
  font-weight: 600;
  color: var(--admin-text-secondary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.admin-cms-live {
  min-height: 32rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--admin-bg-soft);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  padding: 1.4rem;
}
.admin-cms-live__empty {
  min-height: 5.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-muted);
  background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.08) 0.8rem, rgba(148, 163, 184, 0.14) 0.8rem, rgba(148, 163, 184, 0.14) 1.6rem);
  border: 1px dashed var(--admin-border-strong);
  border-radius: var(--admin-radius-sm, 0.6rem);
  font-size: var(--admin-fs-sm, 1.3rem);
}

.admin-cms-live-sections,
.admin-cms-live-elements {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-md, 1rem);
  min-width: 0;
  max-width: 100%;
}

.admin-cms-live-editable {
  position: relative;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 2.8rem;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-sm, 0.6rem);
  transition: border-color var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease, background var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-live-editable.is-hidden {
  opacity: 0.58;
}
.admin-cms-live-editable.is-cms-editable-mounted {
  cursor: pointer;
}
.admin-cms-live-editable:hover {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.06);
}
.admin-cms-live-editable.is-selected {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.16);
  background: var(--admin-surface);
}
.admin-cms-live-editable--element {
  padding: 0.4rem;
}

.admin-cms-live-editable--section {
  overflow: hidden;
  border-color: var(--admin-primary-border);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
}
.admin-cms-live-editable--section:hover {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.08), var(--admin-shadow-card, 0 2px 8px rgba(15, 23, 42, 0.08));
}
.admin-cms-live-editable--section.is-selected {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.18), var(--admin-shadow-card, 0 3px 12px rgba(37, 99, 235, 0.12));
}

.admin-cms-live-section-chrome {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
  min-height: 3.8rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--admin-primary-border);
  background: linear-gradient(180deg, var(--admin-primary-light), var(--admin-surface));
}

.admin-cms-live-section-chrome__label,
.admin-cms-live-section-chrome__type {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  min-height: 2.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--admin-radius-full, 99rem);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
}

.admin-cms-live-section-chrome__label {
  color: var(--admin-primary-text);
  background: var(--admin-primary-light);
  border: 1px solid var(--admin-primary-border);
}

.admin-cms-live-section-chrome__type {
  color: var(--admin-text-secondary);
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
}

.admin-cms-live-section-chrome__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-sm, 1.3rem);
  font-weight: 600;
}

.admin-cms-live-section-chrome__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.admin-cms-live-section-chrome__btn {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: var(--admin-surface);
  color: var(--admin-text-secondary);
  cursor: pointer;
}
.admin-cms-live-section-chrome__btn:hover {
  border-color: var(--admin-primary);
  color: var(--admin-primary-text);
  background: var(--admin-primary-light);
}

.admin-cms-live-section-body {
  padding: var(--admin-space-sm, 0.8rem);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.admin-cms-live-section-body > * {
  max-width: 100%;
}
.admin-cms-live-section-body [data-cms-template-field] {
  max-width: 100%;
  box-sizing: border-box;
}

[data-cms-template-field] {
  outline: 1px dashed transparent;
  outline-offset: var(--admin-space-2xs, 0.4rem);
  transition: outline-color var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease;
}
[data-cms-template-field]:hover, [data-cms-template-field]:focus-visible, [data-cms-template-field].is-cms-template-field-active {
  outline-color: var(--admin-primary, #2563eb);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.08);
}
[data-cms-template-field][contenteditable=true] {
  cursor: text;
}
[data-cms-template-field].is-cms-template-field-dirty {
  outline-color: var(--admin-warn, #eab308);
}
[data-cms-template-field].--font-serif,
[data-cms-template-field] .--font-serif {
  font-family: Georgia, "Times New Roman", serif;
}
[data-cms-template-field].--font-mono,
[data-cms-template-field] .--font-mono {
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace;
}
[data-cms-template-field].--font-display, [data-cms-template-field].--font-inter,
[data-cms-template-field] .--font-display,
[data-cms-template-field] .--font-inter {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
[data-cms-template-field].--font-pretendard,
[data-cms-template-field] .--font-pretendard {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}
[data-cms-template-field].--font-noto,
[data-cms-template-field] .--font-noto {
  font-family: "Noto Sans KR", "Pretendard Variable", sans-serif;
}
[data-cms-template-field].--font-nanum,
[data-cms-template-field] .--font-nanum {
  font-family: "Nanum Gothic", "Noto Sans KR", sans-serif;
}
[data-cms-template-field].--font-cormorant,
[data-cms-template-field] .--font-cormorant {
  font-family: "Cormorant Garamond", Georgia, serif;
}
[data-cms-template-field].--font-rounded,
[data-cms-template-field] .--font-rounded {
  font-family: "Arial Rounded MT Bold", Pretendard, system-ui, sans-serif;
}

[data-cms-template-field-type=media] {
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  background: var(--admin-bg-soft, #f8fafc);
}
[data-cms-template-field-type=media]:is(img, video),
[data-cms-template-field-type=media] img,
[data-cms-template-field-type=media] video {
  object-fit: contain;
  background: var(--admin-bg-soft, #f8fafc);
}
[data-cms-template-field-type=media]::after {
  content: "드롭/클릭 교체";
  position: absolute;
  right: var(--admin-space-sm, 0.8rem);
  top: var(--admin-space-sm, 0.8rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0 var(--admin-space-xs, 0.6rem);
  border: 1px solid var(--admin-primary-border, #bfdbfe);
  border-radius: var(--admin-radius-full, 99rem);
  background: var(--admin-primary-light, #eff6ff);
  color: var(--admin-primary-text, #1d4ed8);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-1 * var(--admin-space-2xs, 0.4rem)));
  transition: opacity var(--admin-duration-short, 0.12s) ease, transform var(--admin-duration-short, 0.12s) ease;
}
[data-cms-template-field-type=media]:hover::after, [data-cms-template-field-type=media]:focus-visible::after, [data-cms-template-field-type=media].is-cms-template-field-active::after, [data-cms-template-field-type=media].is-cms-template-media-dragover::after {
  opacity: 1;
  transform: translateY(0);
}
[data-cms-template-field-type=media].is-cms-template-media-dragover {
  outline-color: var(--admin-primary, #2563eb);
  box-shadow: 0 0 0 0.4rem rgba(37, 99, 235, 0.16);
}

.is-cms-template-media-loading {
  position: relative;
  overflow: hidden;
}

.admin-cms-template-media-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-xs, 0.6rem);
  min-height: 4rem;
  padding: var(--admin-space-sm, 0.8rem);
  background: rgba(248, 250, 252, 0.82);
  color: var(--admin-primary-text, #1d4ed8);
  font-size: var(--admin-fs-sm, 1.3rem);
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}

.admin-cms-template-media-overlay {
  position: fixed;
  z-index: 119;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: calc(100vw - var(--admin-space-xl, 2.4rem) - var(--admin-space-xl, 2.4rem));
  max-height: calc(100vh - var(--admin-space-xl, 2.4rem) - var(--admin-space-xl, 2.4rem));
  padding: var(--admin-space-sm, 0.8rem);
  border: 2px dashed rgba(37, 99, 235, 0.72);
  border-radius: inherit;
  background: rgba(248, 250, 252, 0.18);
  box-shadow: inset 0 0 0 999rem rgba(255, 255, 255, 0.02);
  pointer-events: auto;
  transition: background var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-template-media-overlay[hidden] {
  display: none;
}
.admin-cms-template-media-overlay.is-dragover {
  border-color: var(--admin-primary, #2563eb);
  background: rgba(37, 99, 235, 0.16);
  box-shadow: inset 0 0 0 999rem rgba(37, 99, 235, 0.08);
}
.admin-cms-template-media-overlay__drop, .admin-cms-template-media-overlay__remove {
  border: 1px solid var(--admin-border-strong);
  background: var(--admin-surface);
  color: var(--admin-text-secondary);
  box-shadow: 0 0.8rem 2rem rgba(15, 23, 42, 0.14);
  cursor: pointer;
}
.admin-cms-template-media-overlay__drop {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
  min-height: 3.4rem;
  max-width: calc(100% - 5.6rem);
  padding: 0 var(--admin-space-sm, 0.8rem);
  border-radius: var(--admin-radius-full, 99rem);
  font-size: var(--admin-fs-sm, 1.3rem);
  font-weight: 800;
}
.admin-cms-template-media-overlay__drop > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-template-media-overlay__drop:hover, .admin-cms-template-media-overlay__drop:focus-visible {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
  outline: none;
}
.admin-cms-template-media-overlay__remove {
  position: absolute;
  top: var(--admin-space-xs, 0.6rem);
  right: var(--admin-space-xs, 0.6rem);
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--admin-radius-full, 99rem);
}
.admin-cms-template-media-overlay__remove:hover, .admin-cms-template-media-overlay__remove:focus-visible {
  border-color: var(--admin-danger);
  background: var(--admin-danger-bg);
  color: var(--admin-danger);
  outline: none;
}

.admin-cms-floating-toolbar {
  position: fixed;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: calc(100vw - var(--admin-space-xl, 2.4rem));
  padding: 0.4rem;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--admin-radius-sm, 0.6rem);
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.16);
}
.admin-cms-floating-toolbar[hidden] {
  display: none;
}
.admin-cms-floating-toolbar__btn {
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: transparent;
  color: var(--admin-text-secondary);
  cursor: pointer;
  transition: background var(--admin-duration-short, 0.12s) ease, color var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-floating-toolbar__btn:hover {
  background: var(--admin-primary-light);
  border-color: var(--admin-primary);
  color: var(--admin-primary-text);
}
.admin-cms-floating-toolbar__btn--delete:hover {
  background: var(--admin-danger-bg);
  border-color: var(--admin-danger);
  color: var(--admin-danger);
}

.admin-cms-overflow-menu {
  position: fixed;
  z-index: 160;
  min-width: 20rem;
  max-width: min(32rem, 100vw - 2rem);
  padding: var(--admin-space-2xs, 0.4rem);
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.16);
}
.admin-cms-overflow-menu[hidden] {
  display: none;
}
.admin-cms-overflow-menu__item {
  width: 100%;
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
  padding: 0 var(--admin-space-sm, 0.8rem);
  border: 0;
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: transparent;
  color: var(--admin-text);
  cursor: pointer;
  text-align: left;
  font-size: var(--admin-fs-sm, 1.3rem);
}
.admin-cms-overflow-menu__item > i {
  width: 1.6rem;
  text-align: center;
  color: var(--admin-text-muted);
}
.admin-cms-overflow-menu__item:hover, .admin-cms-overflow-menu__item:focus-visible {
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
  outline: none;
}
.admin-cms-overflow-menu__item--danger {
  color: var(--admin-danger);
}
.admin-cms-overflow-menu__item--danger:hover, .admin-cms-overflow-menu__item--danger:focus-visible {
  background: var(--admin-danger-bg);
  color: var(--admin-danger);
}

.admin-cms-layer-tree {
  display: grid;
  gap: var(--admin-space-2xs, 0.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-cms-layer-tree__children {
  display: grid;
  gap: var(--admin-space-2xs, 0.4rem);
  margin: var(--admin-space-2xs, 0.4rem) 0 0 var(--admin-space-md, 1rem);
  padding: 0 0 0 var(--admin-space-sm, 0.8rem);
  border-left: 1px solid var(--admin-border);
  list-style: none;
}
.admin-cms-layer-tree__button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--admin-space-2xs, 0.4rem);
  padding: var(--admin-space-xs, 0.6rem) var(--admin-space-sm, 0.8rem);
  border: 1px solid transparent;
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: transparent;
  color: var(--admin-text);
  cursor: pointer;
  text-align: left;
}
.admin-cms-layer-tree__button > span,
.admin-cms-layer-tree__button > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-layer-tree__button > span {
  font-weight: 700;
  font-size: var(--admin-fs-sm, 1.3rem);
}
.admin-cms-layer-tree__button > small {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
}
.admin-cms-layer-tree__button:hover, .admin-cms-layer-tree__button.is-active {
  border-color: var(--admin-primary-border);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
}

.admin-cms-inspector__advanced {
  margin-top: var(--admin-space-md, 1rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
}
.admin-cms-inspector__advanced > summary {
  min-height: 3.8rem;
  display: flex;
  align-items: center;
  padding: 0 var(--admin-space-md, 1rem);
  cursor: pointer;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm, 1.3rem);
  font-weight: 800;
}

.admin-cms-inspector__advanced-body {
  display: grid;
  gap: var(--admin-space-sm, 0.8rem);
  padding: 0 var(--admin-space-md, 1rem) var(--admin-space-md, 1rem);
}

/* Element-first live canvas polish */
.admin-cms-live {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px), linear-gradient(180deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px), var(--admin-bg-soft);
  background-size: 2.4rem 2.4rem;
}

.admin-cms-live-elements {
  position: relative;
}
.admin-cms-live-elements.is-dragging {
  cursor: grabbing;
}
.admin-cms-live-elements.is-saving::after, .admin-cms-live-elements.is-error::after {
  position: absolute;
  right: var(--admin-space-sm, 0.8rem);
  top: var(--admin-space-sm, 0.8rem);
  z-index: 3;
  padding: 0.4rem 0.8rem;
  border-radius: var(--admin-radius-full, 99rem);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 700;
  box-shadow: var(--admin-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.admin-cms-live-elements.is-saving::after {
  content: "Saving order...";
  color: var(--admin-primary-text);
  background: var(--admin-primary-light);
  border: 1px solid var(--admin-primary-border);
}
.admin-cms-live-elements.is-error::after {
  content: "Order save failed";
  color: var(--admin-danger);
  background: var(--admin-danger-bg);
  border: 1px solid var(--admin-danger);
}

.admin-cms-live-editable--element {
  display: grid;
  grid-template-rows: auto minmax(5.6rem, auto);
  overflow: hidden;
  border-color: var(--admin-border);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.admin-cms-live-editable--element.is-cms-editable-mounted {
  cursor: default;
}
.admin-cms-live-editable--element:hover {
  border-color: var(--admin-primary-border);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.08), var(--admin-shadow-card, 0 2px 8px rgba(15, 23, 42, 0.08));
}
.admin-cms-live-editable--element.is-selected {
  z-index: 12;
  overflow: visible;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.18), var(--admin-shadow-card, 0 3px 12px rgba(37, 99, 235, 0.12));
  background: var(--admin-surface);
}
.admin-cms-live-editable--element.is-empty {
  border-style: dashed;
}

.admin-cms-live-editable__chrome {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
  min-height: 3.6rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--admin-border);
  background: linear-gradient(180deg, var(--admin-bg-soft), var(--admin-surface));
}

.admin-cms-live-editable__drag {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: var(--admin-surface);
  color: var(--admin-text-muted);
  cursor: grab;
}
.admin-cms-live-editable__drag:hover {
  border-color: var(--admin-primary);
  color: var(--admin-primary-text);
  background: var(--admin-primary-light);
}
.admin-cms-live-editable__drag:active {
  cursor: grabbing;
}

.admin-cms-live-editable__type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 22rem;
  min-width: 0;
  padding: 0.4rem 0.8rem;
  border-radius: var(--admin-radius-full, 99rem);
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 700;
}
.admin-cms-live-editable__type-badge > i {
  color: var(--admin-primary);
}
.admin-cms-live-editable__type-badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-live-editable__type-badge[data-element-kind=image], .admin-cms-live-editable__type-badge[data-element-kind=gallery], .admin-cms-live-editable__type-badge[data-element-kind=media] {
  background: #ecfeff;
  border-color: #bae6fd;
}
.admin-cms-live-editable__type-badge[data-element-kind=image] > i, .admin-cms-live-editable__type-badge[data-element-kind=gallery] > i, .admin-cms-live-editable__type-badge[data-element-kind=media] > i {
  color: #0284c7;
}
.admin-cms-live-editable__type-badge[data-element-kind=html] {
  background: var(--admin-bg-soft);
}
.admin-cms-live-editable__type-badge[data-element-kind=html] > i {
  color: #64748b;
}

.admin-cms-live-editable__actions,
.admin-cms-live-section-chrome__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--admin-space-2xs, 0.4rem);
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
}

.admin-cms-live-action {
  flex: none;
}
.admin-cms-live-action--btn {
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: var(--admin-surface);
  color: var(--admin-text-secondary);
  cursor: pointer;
  transition: background var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease, color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-live-action--btn:hover {
  border-color: var(--admin-primary);
  color: var(--admin-primary-text);
  background: var(--admin-primary-light);
}
.admin-cms-live-action--delete:hover {
  border-color: var(--admin-danger);
  color: var(--admin-danger);
  background: var(--admin-danger-bg);
}
.admin-cms-live-action--type {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.admin-cms-live-action__type-trigger {
  max-width: 18rem;
  min-width: 11rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-2xs, 0.4rem);
  padding: 0 var(--admin-space-xs, 0.6rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
  color: var(--admin-text-secondary);
  cursor: pointer;
  font-size: var(--admin-fs-sm, 1.3rem);
  font-weight: 700;
}
.admin-cms-live-action__type-trigger > i:first-child {
  color: var(--admin-primary);
  flex: none;
}
.admin-cms-live-action__type-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-live-action__type-trigger > i:last-child {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
  flex: none;
}
.admin-cms-live-action__type-trigger:hover, .admin-cms-live-action__type-trigger[aria-expanded=true] {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
}
.admin-cms-live-action__type-trigger:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 1px;
}
.admin-cms-live-action__type-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--admin-space-2xs, 0.4rem));
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(12rem, 1fr));
  gap: var(--admin-space-2xs, 0.4rem);
  width: min(34rem, 100vw - 4rem);
  max-height: min(36rem, 100vh - 12rem);
  overflow: auto;
  padding: var(--admin-space-xs, 0.6rem);
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.16);
}
.admin-cms-live-action__type-menu[hidden] {
  display: none;
}
.admin-cms-live-action__type-option {
  min-width: 0;
  min-height: 3.2rem;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
  padding: var(--admin-space-2xs, 0.4rem) var(--admin-space-xs, 0.6rem);
  border: 1px solid transparent;
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: transparent;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm, 1.3rem);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.admin-cms-live-action__type-option > i {
  width: 1.6rem;
  flex: none;
  color: var(--admin-primary);
  text-align: center;
}
.admin-cms-live-action__type-option > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-live-action__type-option:hover, .admin-cms-live-action__type-option:focus-visible {
  border-color: var(--admin-primary-border);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
  outline: none;
}
.admin-cms-live-action__type-option[aria-pressed=true] {
  border-color: var(--admin-primary);
  background: var(--admin-primary);
  color: var(--admin-on-primary);
}
.admin-cms-live-action__type-option[aria-pressed=true] > i {
  color: var(--admin-on-primary);
}
.admin-cms-live-action__type-group {
  grid-column: 1/-1;
  margin-top: var(--admin-space-2xs, 0.4rem);
  padding: var(--admin-space-2xs, 0.4rem) var(--admin-space-xs, 0.6rem);
  border-top: 1px solid var(--admin-border);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
}

.admin-cms-live-editable__content {
  min-height: 5.6rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1rem;
}
.admin-cms-live-editable__content > .cms-el {
  margin: 0;
}
.admin-cms-live-editable__content > * {
  max-width: 100%;
}

.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal {
  max-height: 24rem;
  overflow: hidden;
}
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal > .cms-el--image {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 22rem;
}
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal .no-auto-cover,
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal .ui-placeholder {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal .no-auto-cover img,
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal .ui-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-cms-live-editable--image .admin-cms-live-editable__content--minimal .cms-el__caption {
  flex: none;
  margin-top: var(--admin-space-xs, 0.6rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cms-live-placeholder {
  min-height: 8.2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem;
  border: 1px dashed var(--admin-border-strong);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.06) 0.8rem, rgba(148, 163, 184, 0.12) 0.8rem, rgba(148, 163, 184, 0.12) 1.6rem);
  color: var(--admin-text-secondary);
}
.admin-cms-live-placeholder--media {
  min-height: 12rem;
  justify-content: center;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(37, 99, 235, 0.08)), repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.06) 0.8rem, rgba(148, 163, 184, 0.14) 0.8rem, rgba(148, 163, 184, 0.14) 1.6rem);
}
.admin-cms-live-placeholder--text {
  align-items: flex-start;
}
.admin-cms-live-placeholder__icon {
  width: 3.6rem;
  height: 3.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--admin-radius-full, 99rem);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
  border: 1px solid var(--admin-primary-border);
  font-size: 1.7rem;
}
.admin-cms-live-placeholder__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.admin-cms-live-placeholder__body > strong {
  color: var(--admin-text, #111827);
  font-size: var(--admin-fs-body-lg, 1.5rem);
  line-height: 1.35;
}
.admin-cms-live-placeholder__body > span {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm, 1.3rem);
  line-height: 1.45;
}

.admin-cms-live-editable--chosen {
  border-color: var(--admin-primary);
}

.admin-cms-live-editable--ghost {
  opacity: 0.48;
  background: var(--admin-primary-light);
  border-color: var(--admin-primary);
}

.admin-cms-live-editable--drag,
.admin-cms-live-editable--fallback {
  cursor: grabbing;
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.18);
}

.admin-cms-floating-toolbar {
  gap: 0.4rem;
  padding: 0.35rem;
}
.admin-cms-floating-toolbar__type {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.admin-cms-floating-toolbar__type-trigger {
  max-width: 16rem;
  min-width: 11rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-2xs, 0.4rem);
  padding: 0 var(--admin-space-xs, 0.6rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
  color: var(--admin-text-secondary);
  cursor: pointer;
  font-size: var(--admin-fs-sm, 1.3rem);
  font-weight: 700;
}
.admin-cms-floating-toolbar__type-trigger > i:first-child {
  color: var(--admin-primary);
  flex: none;
}
.admin-cms-floating-toolbar__type-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-floating-toolbar__type-trigger > i:last-child {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
  flex: none;
}
.admin-cms-floating-toolbar__type-trigger:hover, .admin-cms-floating-toolbar__type-trigger[aria-expanded=true] {
  border-color: var(--admin-primary);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
}
.admin-cms-floating-toolbar__type-menu {
  position: absolute;
  left: 0;
  top: calc(100% + var(--admin-space-2xs, 0.4rem));
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(12rem, 1fr));
  gap: var(--admin-space-2xs, 0.4rem);
  width: min(34rem, 100vw - 4rem);
  max-height: min(36rem, 100vh - 12rem);
  overflow: auto;
  padding: var(--admin-space-xs, 0.6rem);
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.16);
}
.admin-cms-floating-toolbar__type-menu[hidden] {
  display: none;
}
.admin-cms-floating-toolbar__type-option {
  min-width: 0;
  min-height: 3.2rem;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
  padding: var(--admin-space-2xs, 0.4rem) var(--admin-space-xs, 0.6rem);
  border: 1px solid transparent;
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: transparent;
  color: var(--admin-text-secondary);
  cursor: pointer;
  font-size: var(--admin-fs-sm, 1.3rem);
  font-weight: 700;
  text-align: left;
}
.admin-cms-floating-toolbar__type-option > i {
  width: 1.6rem;
  flex: none;
  color: var(--admin-primary);
  text-align: center;
}
.admin-cms-floating-toolbar__type-option > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-floating-toolbar__type-option:hover, .admin-cms-floating-toolbar__type-option:focus-visible {
  border-color: var(--admin-primary-border);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
  outline: none;
}
.admin-cms-floating-toolbar__type-option[aria-pressed=true] {
  border-color: var(--admin-primary);
  background: var(--admin-primary);
  color: var(--admin-on-primary);
}
.admin-cms-floating-toolbar__type-option[aria-pressed=true] > i {
  color: var(--admin-on-primary);
}

.admin-cms-live-editable.is-editing-inline {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.16), var(--admin-shadow-card, 0 3px 12px rgba(37, 99, 235, 0.12));
}

.admin-cms-inline-editor-host {
  padding: var(--admin-space-md, 1rem);
  border-top: 1px solid var(--admin-border);
  background: var(--admin-bg-soft);
}

.admin-cms-inline-form {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-md, 1rem);
}
.admin-cms-inline-form__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: var(--admin-space-xs, 0.6rem);
  padding-top: var(--admin-space-sm, 0.8rem);
  border-top: 1px solid var(--admin-border);
  background: var(--admin-bg-soft);
}
.admin-cms-inline-form [data-cms-inline-save-loader] {
  display: none;
}

.admin-cms-element-form {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-md, 1rem);
}
.admin-cms-element-form__head {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
  flex-wrap: wrap;
}
.admin-cms-element-form__type {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-full, 99rem);
  background: var(--admin-surface);
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 700;
}
.admin-cms-element-form__grid, .admin-cms-element-form__code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--admin-space-md, 1rem);
}

.admin-cms-html-workspace {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-md, 1rem);
}

.admin-cms-html-preview {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-html-preview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-html-preview__label {
  color: var(--admin-text, #111827);
  font-size: var(--admin-fs-sm, 1.4rem);
  font-weight: 700;
}
.admin-cms-html-preview__frame {
  width: 100%;
  min-height: 24rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
}

.cms-linked-page {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs, 0.6rem);
  padding: var(--admin-space-md, 1rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
}
.cms-linked-page__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-sm, 0.8rem);
}
.cms-linked-page__title {
  color: var(--admin-text, #111827);
  font-size: var(--admin-fs-sm, 1.4rem);
  font-weight: 700;
}

.admin-code-editor {
  --code-editor-min-height: 18rem;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
}
.admin-code-editor:focus-within {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.12);
}
.admin-code-editor__mount {
  min-height: var(--code-editor-min-height, 18rem);
}
.admin-code-editor .cm-editor {
  min-height: var(--code-editor-min-height, 18rem);
}
.admin-code-editor--sm {
  --code-editor-min-height: 16rem;
}
.admin-code-editor--lg {
  --code-editor-min-height: 22rem;
}
.admin-code-editor--xl {
  --code-editor-min-height: 32rem;
}

.admin-cms-json-repeater {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-json-repeater__list {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-json-repeater__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--admin-space-xs, 0.6rem);
  align-items: start;
}
.admin-cms-json-repeater__remove {
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  justify-content: center;
}

.admin-cms-template-picker {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-md, 1rem);
}
.admin-cms-template-picker__search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: var(--admin-space-xs, 0.6rem);
  background: var(--admin-surface);
}
.admin-cms-template-picker__groups {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg, 1.2rem);
  max-height: min(72vh, 72rem);
  overflow: auto;
  padding-right: var(--admin-space-2xs, 0.4rem);
}
.admin-cms-template-picker__group {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm, 0.8rem);
}
.admin-cms-template-picker__group-title {
  margin: 0;
  color: var(--admin-text, #111827);
  font-size: var(--admin-fs-md, 1.5rem);
  font-weight: 800;
}
.admin-cms-template-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: var(--admin-space-md, 1rem);
}
.admin-cms-template-picker__card {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm, 0.8rem);
  min-width: 0;
  padding: var(--admin-space-sm, 0.8rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--admin-duration-short, 0.12s) ease, box-shadow var(--admin-duration-short, 0.12s) ease, transform var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-template-picker__card:hover, .admin-cms-template-picker__card:focus-visible {
  border-color: var(--admin-primary);
  box-shadow: var(--admin-shadow-card, 0 0.3rem 1.2rem rgba(37, 99, 235, 0.12));
  outline: none;
  transform: translateY(-0.1rem);
}
.admin-cms-template-picker__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: var(--admin-bg-soft);
}
.admin-cms-template-picker__thumb iframe {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 200%;
  border: 0;
  pointer-events: none;
  transform: scale(0.5);
  transform-origin: top left;
}
.admin-cms-template-picker__thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-primary);
  font-size: var(--admin-fs-2xl, 2.4rem);
}
.admin-cms-template-picker__meta {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs, 0.4rem);
  min-width: 0;
}
.admin-cms-template-picker__meta strong,
.admin-cms-template-picker__meta code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-template-picker__meta strong {
  color: var(--admin-text, #111827);
  font-size: var(--admin-fs-sm, 1.4rem);
  font-weight: 800;
}
.admin-cms-template-picker__meta code {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
}
.admin-cms-template-picker__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-space-md, 1rem);
  padding: var(--admin-space-md, 1rem);
  border: 1px solid var(--admin-border-light, #eef2f7);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
}
.admin-cms-template-picker__summary p {
  margin: var(--admin-space-2xs, 0.4rem) 0 0;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm, 1.4rem);
}
.admin-cms-template-picker__eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--admin-text, #111827);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
}
.admin-cms-template-picker__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-left: auto;
  border-radius: 50%;
  color: var(--admin-text-muted);
  background: var(--admin-grey-100, #f3f4f6);
  flex: 0 0 auto;
  transition: background var(--admin-duration-short, 0.12s) ease, color var(--admin-duration-short, 0.12s) ease, transform var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-template-picker__empty {
  padding: var(--admin-space-2xl, 2rem);
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  color: var(--admin-text-muted);
  text-align: center;
}
.admin-cms-template-picker[data-cms-element-type-picker] .admin-cms-template-picker__groups {
  max-height: min(66vh, 58rem);
}
.admin-cms-template-picker[data-cms-element-type-picker] .admin-cms-template-picker__grid {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--admin-space-sm, 0.8rem);
}
.admin-cms-template-picker[data-cms-element-type-picker] .admin-cms-template-picker__card--element {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--admin-space-sm, 0.8rem);
  min-height: 7.6rem;
  padding: var(--admin-space-md, 1rem);
}
.admin-cms-template-picker[data-cms-element-type-picker] .admin-cms-template-picker__card--element:hover .admin-cms-template-picker__action, .admin-cms-template-picker[data-cms-element-type-picker] .admin-cms-template-picker__card--element:focus-visible .admin-cms-template-picker__action {
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  transform: translateX(0.2rem);
}
.admin-cms-template-picker[data-cms-element-type-picker] .admin-cms-template-picker__thumb--icon {
  width: 4.4rem;
  height: 4.4rem;
  aspect-ratio: auto;
  border-color: var(--admin-primary-border);
  background: var(--admin-primary-light);
  font-size: var(--admin-fs-xl, 2rem);
  flex: 0 0 auto;
}

.admin-cms-template-picker__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(32rem, 0.42fr);
  gap: var(--admin-space-md, 1rem);
  min-height: 0;
}
@media (max-width: 1100px) {
  .admin-cms-template-picker__layout {
    grid-template-columns: 1fr;
  }
}
.admin-cms-template-picker__detail {
  position: sticky;
  top: 0;
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
}
.admin-cms-template-picker__detail[hidden] {
  display: none;
}
.admin-cms-template-picker__detail-frame {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-bg-soft);
}
.admin-cms-template-picker__detail-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.admin-cms-template-picker__detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs, 0.6rem);
  padding: var(--admin-space-md, 1rem);
}
.admin-cms-template-picker__detail-body > strong {
  color: var(--admin-text, #111827);
  font-size: var(--admin-fs-lg, 1.8rem);
  font-weight: 800;
  line-height: 1.25;
}
.admin-cms-template-picker__detail-body > code {
  min-width: 0;
  overflow: hidden;
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-template-picker__detail-category {
  display: inline-flex;
  align-self: flex-start;
  min-height: 2.2rem;
  align-items: center;
  padding: 0 var(--admin-space-xs, 0.6rem);
  border: 1px solid var(--admin-primary-border);
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: var(--admin-primary-light);
  color: var(--admin-primary);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
}
.admin-cms-template-picker__detail-actions, .admin-cms-template-picker__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-template-picker__card {
  cursor: default;
}
.admin-cms-template-picker__card.is-selected {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.16);
}
.admin-cms-template-picker__card-main {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm, 0.8rem);
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.admin-cms-template-picker__card-main:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}

.admin-cms-template-repeat {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm, 0.8rem);
}
.admin-cms-template-repeat__head, .admin-cms-template-repeat__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-sm, 0.8rem);
}
.admin-cms-template-repeat__list {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm, 0.8rem);
}
.admin-cms-template-repeat__item {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm, 0.8rem);
  padding: var(--admin-space-md, 1rem);
  border: 1px dashed var(--admin-border-strong);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
}
.admin-cms-template-repeat__item-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs, 0.4rem);
}
.admin-cms-template-repeat__title {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
}

.admin-cms-visual-edit-note {
  display: grid;
  gap: var(--admin-space-2xs, 0.4rem);
  padding: var(--admin-space-md, 1rem);
  border: 1px solid var(--admin-primary-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
}
.admin-cms-visual-edit-note > strong {
  font-size: var(--admin-fs-sm, 1.4rem);
  font-weight: 800;
}
.admin-cms-visual-edit-note > span {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  line-height: 1.5;
}

.cms-template-binding__panel {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm, 0.8rem);
}
.cms-template-binding__slot {
  display: grid;
  gap: var(--admin-space-2xs, 0.4rem);
  padding: var(--admin-space-sm, 0.8rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg);
}
.cms-template-binding__slot-head {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
}

.cms-collection-template-map {
  display: grid;
  gap: var(--admin-space-sm, 0.8rem);
  padding: var(--admin-space-md, 1rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
}
.cms-collection-template-map__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-space-sm, 0.8rem);
}
.cms-collection-template-map__header > div {
  display: grid;
  gap: var(--admin-space-3xs, 0.2rem);
  min-width: 0;
}
.cms-collection-template-map__header strong {
  color: var(--admin-text);
  font-size: var(--admin-fs-sm, 1.4rem);
  font-weight: 900;
}
.cms-collection-template-map__header span {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  line-height: 1.45;
}
.cms-collection-template-map__header code {
  padding: var(--admin-space-3xs, 0.2rem) var(--admin-space-xs, 0.6rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: var(--admin-bg);
  color: var(--admin-primary-text);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
}
.cms-collection-template-map__tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
}
.cms-collection-template-map__tools .admin-form__input {
  width: 14rem;
  min-height: 3.2rem;
  padding-block: var(--admin-space-2xs, 0.4rem);
  font-size: var(--admin-fs-xs, 1.2rem);
}
.cms-collection-template-map__slots {
  display: grid;
  gap: var(--admin-space-xs, 0.6rem);
}
.cms-collection-template-map__slot-head {
  display: grid;
  gap: var(--admin-space-3xs, 0.2rem);
  min-width: 0;
}
.cms-collection-template-map__slot-head strong {
  color: var(--admin-text);
  font-size: var(--admin-fs-sm, 1.4rem);
  font-weight: 900;
}
.cms-collection-template-map__slot-head code {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  overflow-wrap: anywhere;
}

.cms-collection-slot-format {
  border-top: 1px dashed var(--admin-border);
  padding-top: var(--admin-space-xs, 0.6rem);
}
.cms-collection-slot-format summary {
  cursor: pointer;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
}

.cms-collection-summary {
  display: grid;
  gap: var(--admin-space-sm, 0.8rem);
  padding: var(--admin-space-md, 1rem);
  border: 1px solid var(--admin-primary-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-primary-light);
}
.cms-collection-summary__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: var(--admin-space-2xs, 0.4rem);
  color: var(--admin-primary-text);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
}
.cms-collection-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--admin-space-sm, 0.8rem);
  margin: 0;
}
.cms-collection-summary__grid > div {
  display: grid;
  gap: var(--admin-space-3xs, 0.2rem);
  min-width: 0;
}
.cms-collection-summary__grid dt {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 700;
}
.cms-collection-summary__grid dd {
  min-width: 0;
  margin: 0;
  color: var(--admin-text);
  font-size: var(--admin-fs-sm, 1.4rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cms-field-browser {
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg);
}
.cms-field-browser__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-sm, 0.8rem);
  padding: var(--admin-space-sm, 0.8rem) var(--admin-space-md, 1rem);
  color: var(--admin-text);
  cursor: pointer;
  font-weight: 800;
}
.cms-field-browser__body {
  padding: 0 var(--admin-space-md, 1rem) var(--admin-space-md, 1rem);
}
.cms-field-browser__search {
  display: grid;
  gap: var(--admin-space-3xs, 0.2rem);
  margin-bottom: var(--admin-space-sm, 0.8rem);
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 700;
}
.cms-field-browser__search input {
  min-height: 3.6rem;
  padding: 0 var(--admin-space-sm, 0.8rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
  color: var(--admin-text);
}
.cms-field-browser__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--admin-space-xs, 0.6rem);
}
.cms-field-browser__item {
  display: grid;
  gap: var(--admin-space-3xs, 0.2rem);
  min-width: 0;
  padding: var(--admin-space-xs, 0.6rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
}
.cms-field-browser__item strong {
  color: var(--admin-text);
  font-size: var(--admin-fs-xs, 1.2rem);
}
.cms-field-browser__item code {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  overflow-wrap: anywhere;
}
.cms-field-browser__item em {
  justify-self: start;
  padding: 0.1rem 0.45rem;
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: color-mix(in srgb, var(--admin-info, #0b84ff) 10%, transparent);
  color: var(--admin-text-secondary);
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 800;
}

.cms-collection-preview {
  display: grid;
  gap: var(--admin-space-sm, 0.8rem);
}
.cms-collection-preview__result {
  min-height: 0;
}
.cms-collection-preview__summary {
  margin: 0 0 var(--admin-space-xs, 0.6rem);
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 700;
}
.cms-collection-preview__list {
  display: grid;
  gap: var(--admin-space-xs, 0.6rem);
}
.cms-collection-preview__item {
  display: grid;
  gap: var(--admin-space-3xs, 0.2rem);
  min-width: 0;
  padding: var(--admin-space-sm, 0.8rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
}
.cms-collection-preview__item strong {
  color: var(--admin-text);
  font-size: var(--admin-fs-sm, 1.4rem);
}
.cms-collection-preview__item span,
.cms-collection-preview__item code {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
  overflow-wrap: anywhere;
}

.admin-cms-live__binding-note {
  display: block;
  margin-bottom: var(--admin-space-2xs, 0.4rem);
  padding: var(--admin-space-2xs, 0.4rem) var(--admin-space-sm, 0.8rem);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 700;
}

.admin-cms-live__binding-empty {
  padding: var(--admin-space-lg, 1.6rem);
  border: 1px dashed var(--admin-border-strong);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
  color: var(--admin-text-secondary);
  text-align: center;
  font-size: var(--admin-fs-sm, 1.4rem);
}

.admin-cms-live-sections,
.admin-cms-live-elements {
  gap: 0;
}

.admin-cms-live-editable,
.admin-cms-live-editable--section,
.admin-cms-live-editable--element,
.admin-cms-live-editable.is-selected,
.admin-cms-live-editable--element.is-selected {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.admin-cms-live-editable:hover,
.admin-cms-live-editable--section:hover,
.admin-cms-live-editable--element:hover,
.admin-cms-live-editable.is-editing-inline {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.admin-cms-live-editable--section,
.admin-cms-live-editable--element {
  overflow: visible;
}

.admin-cms-live-editable--element {
  display: block;
  padding: 0;
}

.admin-cms-live-section-body,
.admin-cms-live-editable__content {
  min-height: 0;
  padding: 0;
  background: transparent;
}

.admin-cms-live-section-chrome,
.admin-cms-live-section-chrome__actions,
.admin-cms-live-editable__chrome,
.admin-cms-live-editable__actions,
.admin-cms-floating-toolbar,
.admin-cms-template-media-overlay,
.admin-cms-live__binding-note {
  display: none;
}

body.admin-shell-v2 .admin__content:has(> .admin-cms-builder) {
  max-width: none;
}
body.admin-shell-v2 .admin__content:has(> .admin-cms-builder),
body.admin-shell-v2 .admin__main:has(.admin-cms-builder) {
  padding: 1.2rem;
}

.admin-cms-builder {
  --builder-panel: var(--color-bg-surface);
  --builder-panel-subtle: var(--color-bg-subtle);
  --builder-panel-hover: var(--color-bg-hover);
  --builder-panel-selected: var(--color-bg-selected);
  --builder-border: var(--color-border-default);
  --builder-border-subtle: var(--color-border-subtle);
  --builder-text: var(--color-text-primary);
  --builder-text-secondary: var(--color-text-secondary);
  --builder-text-muted: var(--color-text-muted);
  --builder-canvas: var(--admin-cms-builder-canvas-bg, var(--figma-workspace));
  --builder-canvas-border: var(--admin-cms-builder-canvas-border, var(--figma-border));
  --builder-canvas-text: var(--admin-cms-builder-canvas-text, var(--figma-text-secondary));
  gap: 0.8rem;
  height: calc(100vh - var(--admin-shell-header-height, 4.8rem) - 3.2rem);
  min-height: 58rem;
  color: var(--builder-text);
}
.admin-cms-builder__toolbar {
  padding: 0.8rem 1rem;
  border-color: var(--builder-border);
  border-radius: var(--figma-radius);
  background: var(--builder-panel);
  box-shadow: none;
}
.admin-cms-builder__toolbar-main {
  gap: 0.8rem;
}
.admin-cms-builder__toolbar-title {
  font-size: 1.4rem;
  color: var(--builder-text);
}
.admin-cms-builder__toolbar-lang {
  margin-left: auto;
}
.admin-cms-builder__body {
  grid-template-columns: minmax(26rem, 28rem) minmax(0, 1fr) minmax(28rem, 30rem);
  gap: 0.8rem;
}
.admin-cms-builder__left, .admin-cms-builder__right {
  border-color: var(--builder-border);
  border-radius: var(--figma-radius);
  background: var(--builder-panel);
  color: var(--builder-text);
  box-shadow: none;
}
.admin-cms-builder__left {
  padding: 0.8rem;
}
.admin-cms-builder__center {
  padding: 1.2rem;
  border-color: var(--builder-border);
  border-radius: var(--figma-radius);
  background: var(--builder-canvas);
  color: var(--builder-canvas-text);
  box-shadow: none;
}
.admin-cms-builder__left-tabs, .admin-cms-builder__device-toggle {
  gap: 0.2rem;
  padding: 0.2rem;
  border-color: var(--builder-border);
  border-radius: 0.5rem;
  background: var(--builder-panel-subtle);
}
.admin-cms-builder__left-tab, .admin-cms-builder__device, .admin-cms-builder__lang {
  min-height: 3.2rem;
  border-color: transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--builder-text-secondary);
  font-size: 1.2rem;
}
.admin-cms-builder__left-tab:hover, .admin-cms-builder__device:hover, .admin-cms-builder__lang:hover {
  background: var(--builder-panel-hover);
  color: var(--builder-text);
}
.admin-cms-builder__left-tab.is-active, .admin-cms-builder__device.is-active, .admin-cms-builder__lang.is-active {
  background: var(--builder-panel-selected);
  border-color: var(--builder-panel-selected);
  color: var(--color-text-primary);
  box-shadow: none;
}
.admin-cms-builder__save-status, .admin-cms-builder__save-status[data-cms-save-state] {
  min-height: 2.4rem;
  border-color: var(--builder-border);
  background: var(--builder-panel-subtle);
  color: var(--builder-text-muted);
}
.admin-cms-builder__group-row {
  gap: 0.4rem;
}
.admin-cms-builder__left-head, .admin-cms-builder__left-actions, .admin-cms-builder__tree-search {
  margin-bottom: 0.8rem;
}
.admin-cms-builder__tree-host {
  padding-top: 0.2rem;
}
.admin-cms-builder__empty {
  color: var(--builder-text-muted);
}
.admin-cms-builder__empty--center {
  min-height: 100%;
  display: grid;
  place-items: center;
  gap: var(--admin-space);
  align-content: center;
  padding: var(--admin-space-2xl);
  border: 1px dashed var(--builder-canvas-border);
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--builder-canvas-text);
  text-align: center;
}
.admin-cms-builder__empty-frame {
  width: min(42rem, 72%);
  padding: var(--admin-space);
  border: 1px solid var(--builder-canvas-border);
  border-radius: var(--figma-radius);
  background: #ffffff;
  box-shadow: none;
}
.admin-cms-builder__empty-topbar, .admin-cms-builder__empty-lines, .admin-cms-builder__empty-grid {
  display: flex;
  gap: var(--admin-space-xs);
}
.admin-cms-builder__empty-topbar {
  margin-bottom: var(--admin-space);
}
.admin-cms-builder__empty-topbar span {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--admin-radius-full);
  background: #d6dbe2;
}
.admin-cms-builder__empty-hero {
  height: 8.8rem;
  border-radius: var(--figma-radius);
  background: #eef2f6;
}
.admin-cms-builder__empty-lines {
  flex-direction: column;
  margin-top: var(--admin-space);
}
.admin-cms-builder__empty-lines span {
  height: 0.8rem;
  border-radius: var(--admin-radius-full);
  background: #e5e9ef;
}
.admin-cms-builder__empty-lines span:nth-child(1) {
  width: 72%;
}
.admin-cms-builder__empty-lines span:nth-child(2) {
  width: 56%;
}
.admin-cms-builder__empty-lines span:nth-child(3) {
  width: 64%;
}
.admin-cms-builder__empty-grid {
  margin-top: var(--admin-space);
}
.admin-cms-builder__empty-grid span {
  flex: 1;
  height: 4.8rem;
  border-radius: 0.5rem;
  background: #f2f4f7;
}
.admin-cms-builder__empty-copy {
  display: grid;
  gap: var(--admin-space-xs);
  max-width: 42rem;
}
.admin-cms-builder__empty-kicker {
  color: var(--color-action-primary-text);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
}
.admin-cms-builder__empty-copy strong {
  color: var(--builder-canvas-text);
  font-size: 1.8rem;
  line-height: 2.4rem;
}
.admin-cms-builder__empty-copy p {
  margin: 0;
  color: #5f6875;
  font-size: var(--admin-fs-sm);
}
.admin-cms-builder__empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-sm);
  flex-wrap: wrap;
}
.admin-cms-builder__empty-hint {
  color: #6b7280;
  font-size: var(--admin-fs-xs);
}
.admin-cms-builder__inspector-head, .admin-cms-builder__inspector-foot {
  min-height: 4rem;
  padding: 0.8rem 1rem;
  border-color: var(--builder-border);
  background: var(--builder-panel);
  color: var(--builder-text);
}
.admin-cms-builder__inspector-body {
  background: var(--builder-panel);
  color: var(--builder-text-secondary);
}
.admin-cms-builder__right {
  --cms-inspector-bg: var(--builder-panel);
  --cms-inspector-header-bg: var(--builder-panel);
  --cms-inspector-panel-bg: var(--builder-panel-subtle);
  --cms-inspector-control-bg: var(--builder-panel-subtle);
  --cms-inspector-control-hover: var(--builder-panel-hover);
  --cms-inspector-border: var(--builder-border);
  --cms-inspector-divider: var(--builder-border-subtle);
  --cms-inspector-text: var(--builder-text);
  --cms-inspector-muted: var(--builder-text-secondary);
  --cms-inspector-placeholder: var(--builder-text-muted);
  --cms-inspector-focus: var(--color-border-focus);
}
.admin-cms-builder .admin-form__label,
.admin-cms-builder .admin-input-label {
  color: var(--builder-text-secondary);
}
.admin-cms-builder .admin-form__input,
.admin-cms-builder .admin-input,
.admin-cms-builder .admin-textarea,
.admin-cms-builder select.admin-form__input {
  min-height: 3.2rem;
  border-color: var(--builder-border);
  background: var(--builder-panel-subtle);
  color: var(--builder-text);
}
.admin-cms-builder .admin-btn {
  min-height: 3.2rem;
  border-color: var(--builder-border);
  background: var(--builder-panel-subtle);
  color: var(--builder-text-secondary);
}
.admin-cms-builder .admin-btn:hover {
  background: var(--builder-panel-hover);
  border-color: var(--color-border-strong);
  color: var(--builder-text);
}
.admin-cms-builder .admin-btn--primary {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--admin-on-primary);
}
.admin-cms-builder .admin-page-tree__row, .admin-cms-builder__page-row, .admin-cms-builder__unlinked-row {
  min-height: 3.4rem;
  padding: 0.6rem 0.8rem;
  border-color: transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--builder-text-secondary);
  box-shadow: none;
}
.admin-cms-builder .admin-page-tree__row:hover, .admin-cms-builder__page-row:hover, .admin-cms-builder__unlinked-row:hover {
  border-color: transparent;
  background: var(--builder-panel-hover);
  color: var(--builder-text);
  box-shadow: none;
}
.admin-cms-builder .admin-page-tree__row--page:hover,
.admin-cms-builder .admin-page-tree__row.is-active-page,
.admin-cms-builder .admin-page-tree__list.is-drop-target,
.admin-cms-builder .admin-page-tree__children.is-drop-target {
  background: var(--builder-panel-selected);
  color: var(--color-text-primary);
  box-shadow: none;
}
.admin-cms-builder .admin-page-tree__row.is-active-page::before {
  top: 0.4rem;
  bottom: 0.4rem;
  background: var(--color-action-primary);
}
.admin-cms-builder .admin-page-tree__slug,
.admin-cms-builder .admin-page-tree__meta,
.admin-cms-builder .admin-page-tree__type-badge {
  color: var(--builder-text-muted);
}
.admin-cms-builder .admin-page-tree__action-group {
  border-right-color: var(--builder-border);
}
.admin-cms-builder__node-btn, .admin-cms-builder__page-more, .admin-cms-builder__drawer-close {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
}

.admin-cms-builder-canvas {
  color: var(--builder-canvas-text, #1f1f1f);
}
.admin-cms-builder-canvas__head {
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border-color: var(--builder-canvas-border, #d0d0d0);
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: none;
}
.admin-cms-builder-canvas__title {
  color: var(--builder-canvas-text, #1f1f1f);
  font-size: 1.5rem;
  letter-spacing: 0;
}
.admin-cms-builder-canvas__slug {
  background: #efefef;
  color: #6a6a6a;
  font-size: 1.2rem;
}

.admin-cms-card {
  border-color: var(--builder-canvas-border, #d0d0d0);
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: none;
}
.admin-cms-card--element {
  min-height: 3.4rem;
  padding: 0.6rem 0.8rem;
  background: #f0f0f0;
}
.admin-cms-card__head {
  min-height: 3.6rem;
  padding: 0.7rem 0.9rem;
}

.admin-cms-inspector__tabs {
  padding: 0.8rem 1rem 0;
  margin-bottom: 0.8rem;
}
.admin-cms-inspector__tabs .admin-cms-inspector__tab {
  min-height: 3rem;
  border-color: var(--builder-border, var(--color-border-default));
  background: var(--builder-panel-subtle, var(--color-bg-subtle));
  color: var(--builder-text-secondary, var(--color-text-secondary));
}
.admin-cms-inspector__tabs .admin-cms-inspector__tab:hover, .admin-cms-inspector__tabs .admin-cms-inspector__tab.is-active {
  background: var(--builder-panel-selected, var(--color-bg-selected));
  border-color: var(--builder-panel-selected, var(--color-bg-selected));
  color: var(--color-text-primary);
}

.admin-cms-live-editable__drag-handle {
  position: absolute;
  inset-block-start: var(--admin-space-xs, 0.6rem);
  inset-inline-start: var(--admin-space-xs, 0.6rem);
  z-index: 30;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--admin-primary-border, #bfdbfe);
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: var(--admin-surface, #ffffff);
  color: var(--admin-primary-text, #1d4ed8);
  box-shadow: var(--admin-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.12));
  cursor: grab;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--admin-duration-short, 0.12s) ease;
}

.admin-cms-live-editable--element:hover > .admin-cms-live-editable__drag-handle,
.admin-cms-live-editable--element.is-selected > .admin-cms-live-editable__drag-handle,
.admin-cms-live-editable__drag-handle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.admin-cms-live-editable__drag-handle:active {
  cursor: grabbing;
}

[data-cms-template-field] {
  cursor: pointer;
  user-select: none;
}

[data-cms-template-field-type=media] {
  cursor: pointer;
}

[data-cms-template-field-type=media]::after {
  content: none;
}

[data-cms-template-field][contenteditable=true] {
  caret-color: var(--admin-primary, #2563eb);
  outline: 0;
  cursor: text;
  user-select: text;
}

.admin-cms-selection-overlay {
  position: fixed;
  inset: 0;
  z-index: 118;
  pointer-events: none;
}

.admin-cms-selection-overlay__box {
  position: fixed;
  box-sizing: border-box;
  border: 1px solid var(--admin-primary, #2563eb);
  pointer-events: none;
}

.admin-cms-selection-overlay__box--hover {
  border-style: dashed;
  border-color: rgba(37, 99, 235, 0.72);
}

.admin-cms-selection-overlay__box--selected {
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.86), 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.admin-cms-selection-overlay__box--selected::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(-1 * var(--admin-space-xs, 0.6rem));
  inset-block-end: calc(-1 * var(--admin-space-xs, 0.6rem));
  width: var(--admin-space-sm, 0.8rem);
  height: var(--admin-space-sm, 0.8rem);
  border: 2px solid var(--admin-primary, #2563eb);
  background: var(--admin-surface, #ffffff);
}

.admin-cms-selection-overlay__label {
  position: absolute;
  inset-inline-start: -2px;
  inset-block-end: calc(100% + var(--admin-space-2xs, 0.4rem));
  display: inline-flex;
  align-items: center;
  max-width: 32rem;
  min-height: 2.2rem;
  padding: 0 var(--admin-space-xs, 0.6rem);
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: var(--admin-primary, #2563eb);
  color: var(--admin-on-primary, #ffffff);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-cms-selection-overlay__label--below {
  inset-block-start: calc(100% + var(--admin-space-2xs, 0.4rem));
  inset-block-end: auto;
}

.admin-cms-context-inspector {
  display: grid;
  gap: var(--admin-space-sm, 0.8rem);
  padding: var(--admin-space-md, 1rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
}

.admin-cms-context-inspector__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--admin-space-sm, 0.8rem);
}

.admin-cms-context-inspector__icon {
  width: 3.2rem;
  height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
}

.admin-cms-context-inspector__title {
  display: grid;
  min-width: 0;
  gap: var(--admin-space-2xs, 0.4rem);
}
.admin-cms-context-inspector__title > span {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
  text-transform: uppercase;
}
.admin-cms-context-inspector__title > strong {
  min-width: 0;
  color: var(--admin-text);
  font-size: var(--admin-fs-body, 1.4rem);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.admin-cms-context-inspector__more {
  position: relative;
}
.admin-cms-context-inspector__more > summary {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
  color: var(--admin-text-secondary);
  cursor: pointer;
  list-style: none;
}
.admin-cms-context-inspector__more > summary::-webkit-details-marker {
  display: none;
}

.admin-cms-context-inspector__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--admin-space-2xs, 0.4rem));
  inset-inline-end: 0;
  z-index: 60;
  min-width: 14rem;
  display: grid;
  gap: var(--admin-space-2xs, 0.4rem);
  padding: var(--admin-space-xs, 0.6rem);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-card, 0 1rem 2rem rgba(15, 23, 42, 0.12));
}
.admin-cms-context-inspector__menu > button {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
  width: 100%;
  padding: var(--admin-space-xs, 0.6rem);
  border: 0;
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: transparent;
  color: var(--admin-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.admin-cms-context-inspector__menu > button:hover,
.admin-cms-context-inspector__menu > button:focus-visible {
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
  outline: 0;
}

.admin-cms-context-inspector__crumb,
.admin-cms-context-inspector__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
}

.admin-cms-context-inspector__meta {
  margin: 0;
}
.admin-cms-context-inspector__meta > div {
  display: inline-flex;
  gap: var(--admin-space-2xs, 0.4rem);
}
.admin-cms-context-inspector__meta dt {
  font-weight: 800;
}
.admin-cms-context-inspector__meta dd {
  margin: 0;
}

.admin-cms-inspector-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-sm, 0.8rem);
  min-height: 12rem;
  padding: var(--admin-space-xl, 2rem);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-sm, 1.3rem);
}
.admin-cms-inspector-loading > i {
  font-size: 1.6rem;
  color: var(--cms-inspector-accent, var(--admin-primary));
}

.admin-cms-inspector-group {
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
}
.admin-cms-inspector-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-sm, 0.8rem);
  padding: var(--admin-space-sm, 0.8rem) var(--admin-space-md, 1rem);
  color: var(--admin-text);
  font-size: var(--admin-fs-sm, 1.3rem);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.admin-cms-inspector-group > summary::-webkit-details-marker {
  display: none;
}

.admin-cms-inspector-group__body {
  display: grid;
  gap: var(--admin-space-sm, 0.8rem);
  padding: 0 var(--admin-space-md, 1rem) var(--admin-space-md, 1rem);
}

.admin-cms-template-field-inspector {
  display: grid;
  gap: var(--admin-space-sm, 0.8rem);
}

.admin-cms-template-field-inspector__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-xs, 0.6rem);
}

.admin-cms-builder__right {
  font-size: 1.1rem;
  line-height: 1.35;
}
.admin-cms-builder__right .admin-cms-page-inspector,
.admin-cms-builder__right [data-cms-section-form] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--cms-inspector-bg);
}
.admin-cms-builder__right .admin-cms-context-inspector {
  margin: 0;
  padding: 0.8rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--cms-inspector-divider);
  border-radius: 0;
  background: var(--cms-inspector-header-bg);
}
.admin-cms-builder__right .admin-cms-context-inspector__top {
  gap: 0.8rem;
}
.admin-cms-builder__right .admin-cms-context-inspector__icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.5rem;
  background: var(--cms-inspector-control-bg);
  color: var(--cms-inspector-accent);
  font-size: 1.1rem;
}
.admin-cms-builder__right .admin-cms-context-inspector__title > span,
.admin-cms-builder__right .admin-cms-context-inspector__crumb,
.admin-cms-builder__right .admin-cms-context-inspector__meta {
  color: var(--cms-inspector-subtle);
  font-size: 1.1rem;
}
.admin-cms-builder__right .admin-cms-context-inspector__title > strong {
  color: var(--cms-inspector-text);
  font-size: 1.2rem;
  font-weight: 600;
}
.admin-cms-builder__right .admin-cms-context-inspector__crumb,
.admin-cms-builder__right .admin-cms-context-inspector__meta {
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.admin-cms-builder__right .admin-cms-context-inspector__more > summary {
  width: 2.8rem;
  height: 2.8rem;
  min-height: 2.8rem;
}
.admin-cms-builder__right .admin-cms-context-inspector__more > summary,
.admin-cms-builder__right .admin-cms-context-inspector__menu {
  border-color: var(--cms-inspector-border);
  background: var(--cms-inspector-control-bg);
  color: var(--cms-inspector-text);
}
.admin-cms-builder__right .admin-cms-inspector-tabs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.admin-cms-builder__right .admin-cms-inspector-tabs__rail {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
  min-height: 3.2rem;
  padding: 0 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--cms-inspector-divider);
  background: var(--cms-inspector-header-bg);
  scrollbar-width: thin;
}
.admin-cms-builder__right .admin-cms-inspector-tabs__tab {
  position: relative;
  min-width: max-content;
  height: 3.2rem;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cms-inspector-muted);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--admin-duration-short, 0.12s) ease, color var(--admin-duration-short, 0.12s) ease, border-color var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-builder__right .admin-cms-inspector-tabs__tab:hover {
  background: transparent;
  color: var(--cms-inspector-text);
}
.admin-cms-builder__right .admin-cms-inspector-tabs__tab:focus-visible {
  outline: 0.2rem solid var(--cms-inspector-control-active);
  outline-offset: 0.1rem;
}
.admin-cms-builder__right .admin-cms-inspector-tabs__tab.is-active {
  background: transparent;
  color: var(--cms-inspector-text);
}
.admin-cms-builder__right .admin-cms-inspector-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 0.2rem;
  border-radius: var(--admin-radius-full, 9999px);
  background: var(--cms-inspector-accent);
}
.admin-cms-builder__right .admin-cms-inspector-tabs__viewport {
  flex: 1;
  width: 100%;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.admin-cms-builder__right .admin-cms-inspector-tabs__wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
}
.admin-cms-builder__right .admin-cms-inspector-tabs__panel {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--cms-inspector-bg);
}
.admin-cms-builder__right .admin-cms-inspector-tabs__panel:not(.is-active) {
  pointer-events: none;
}
.admin-cms-builder__right .admin-cms-inspector-tabs__panel-scroll {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: none;
  padding: 0.8rem 1rem 5.6rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.admin-cms-builder__right .admin-cms-inspector-group,
.admin-cms-builder__right .admin-cms-raw-fields,
.admin-cms-builder__right .admin-form__section--nested,
.admin-cms-builder__right .admin-cms-section-design,
.admin-cms-builder__right .admin-form__grid,
.admin-cms-builder__right .locale-tabs {
  margin: 0 0 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.admin-cms-builder__right .admin-cms-inspector-group,
.admin-cms-builder__right .admin-cms-raw-fields,
.admin-cms-builder__right .admin-form__section--nested {
  border-top: 1px solid var(--cms-inspector-border);
  padding-top: 0.8rem;
}
.admin-cms-builder__right .admin-cms-inspector-group > summary,
.admin-cms-builder__right .admin-cms-raw-fields__summary,
.admin-cms-builder__right .admin-cms-inspector-group__head,
.admin-cms-builder__right .admin-form__section-title {
  min-height: 2.4rem;
  padding: 0;
  color: var(--cms-inspector-text);
  font-size: 1.15rem;
  font-weight: 600;
}
.admin-cms-builder__right .admin-cms-inspector-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.admin-cms-builder__right .admin-cms-inspector-group__body,
.admin-cms-builder__right .admin-cms-raw-fields__body,
.admin-cms-builder__right .admin-form__grid,
.admin-cms-builder__right .locale-tabs__panel,
.admin-cms-builder__right .cms-template-binding__panel,
.admin-cms-builder__right .cms-board-preview-settings {
  display: grid;
  gap: 1.2rem;
  padding: 0;
}
.admin-cms-builder__right .admin-form__field {
  display: grid;
  grid-template-columns: minmax(7.2rem, 0.38fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  min-height: 2.8rem;
  min-width: 0;
}
.admin-cms-builder__right .admin-form__field > * {
  min-width: 0;
  max-width: 100%;
}
.admin-cms-builder__right .admin-form__label,
.admin-cms-builder__right label.admin-form__label {
  margin: 0;
  color: var(--cms-inspector-muted);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
}
.admin-cms-builder__right .admin-form__hint {
  display: none;
}
.admin-cms-builder__right input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.admin-cms-builder__right select,
.admin-cms-builder__right textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2.8rem;
  border: 1px solid var(--cms-inspector-border);
  border-radius: var(--figma-radius);
  background: var(--cms-inspector-control-bg);
  color: var(--cms-inspector-text);
  font-size: 1.15rem;
  line-height: 1.3;
}
.admin-cms-builder__right textarea {
  min-height: 5.6rem;
}
.admin-cms-builder__right input:not([type=checkbox]):not([type=radio]):focus,
.admin-cms-builder__right select:focus,
.admin-cms-builder__right textarea:focus {
  border-color: var(--cms-inspector-control-active);
  box-shadow: none;
  outline: 0;
}
.admin-cms-builder__right input::placeholder,
.admin-cms-builder__right textarea::placeholder {
  color: var(--cms-inspector-subtle);
}
.admin-cms-builder__right .admin-cms-property-row {
  display: grid;
  grid-template-columns: minmax(7.2rem, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-height: 2.8rem;
  font-size: 1.1rem;
}
.admin-cms-builder__right .admin-cms-property-row__label {
  color: var(--cms-inspector-muted);
}
.admin-cms-builder__right .admin-cms-property-row__value {
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  padding: 0 0.8rem;
  border-radius: var(--figma-radius);
  background: var(--cms-inspector-control-bg);
  color: var(--cms-inspector-text);
}
.admin-cms-builder__right .cms-collection-summary {
  border: 1px solid var(--cms-inspector-border);
  border-radius: var(--figma-radius);
  background: var(--cms-inspector-panel-bg);
}
.admin-cms-builder__right .cms-collection-summary__grid {
  gap: 0.5rem;
}
.admin-cms-builder__right .admin-cms-inspector-empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.8rem;
  padding: 0 0.8rem;
  border: 1px dashed var(--cms-inspector-border);
  border-radius: var(--figma-radius);
  color: var(--cms-inspector-subtle);
  font-size: 1.1rem;
}
.admin-cms-builder__right .admin-locale-tabs {
  display: grid;
  gap: 0.6rem;
}
.admin-cms-builder__right .admin-locale-tabs__bar {
  gap: 0.6rem;
}
.admin-cms-builder__right .admin-locale-tabs__tab {
  min-height: 2.8rem;
  padding: 0 0.7rem;
  gap: 0.5rem;
  font-size: 1.15rem;
}
.admin-cms-builder__right .admin-locale-tabs__tab-code {
  min-height: 1.8rem;
  padding: 0 0.6rem;
  font-size: 1rem;
}
.admin-cms-builder__right .admin-locale-tabs__copy {
  gap: 0.6rem;
}
.admin-cms-builder__right .cs-trigger,
.admin-cms-builder__right .mcs-trigger {
  min-height: 2.8rem;
  padding-inline: 0.8rem 2.8rem;
  border-radius: var(--figma-radius);
  font-size: 1.15rem;
  line-height: 1.3;
}
.admin-cms-builder__right .cs-dropdown,
.admin-cms-builder__right .mcs-dropdown {
  min-width: max(100%, 18rem);
  border-radius: 0.8rem;
  padding: 0.3rem;
}
.admin-cms-builder__right .cs-option,
.admin-cms-builder__right .mcs-option {
  min-height: 2.8rem;
  padding: 0 0.8rem;
  border-radius: 0.5rem;
  font-size: 1.15rem;
  line-height: 1.3;
}
.admin-cms-builder__right .cs-dropdown__search-input,
.admin-cms-builder__right .mcs-search {
  height: 2.8rem;
  border-radius: 0.5rem;
  font-size: 1.15rem;
}
.admin-cms-builder__right .admin-btn {
  min-height: 2.8rem;
  padding: 0 0.8rem;
  font-size: 1.1rem;
}
.admin-cms-builder__right .cms-template-binding__group,
.admin-cms-builder__right .cms-template-binding__slot,
.admin-cms-builder__right .cms-collection-template-map,
.admin-cms-builder__right .cms-field-browser,
.admin-cms-builder__right .cms-collection-summary {
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: var(--figma-radius);
}
.admin-cms-builder__right .cms-template-binding__group-head,
.admin-cms-builder__right .cms-collection-template-map__header,
.admin-cms-builder__right .cms-collection-template-map__slot-head,
.admin-cms-builder__right .cms-field-browser__summary {
  gap: 0.5rem;
  font-size: 1.1rem;
}
.admin-cms-builder__right .cms-collection-template-map__header strong,
.admin-cms-builder__right .cms-collection-template-map__slot-head strong,
.admin-cms-builder__right .cms-collection-summary__grid dd,
.admin-cms-builder__right .cms-field-browser__item strong {
  font-size: 1.15rem;
}
.admin-cms-builder__right .cms-collection-template-map__header span,
.admin-cms-builder__right .cms-collection-template-map__slot-head code,
.admin-cms-builder__right .cms-collection-summary__badge,
.admin-cms-builder__right .cms-collection-summary__grid dt,
.admin-cms-builder__right .cms-field-browser__search,
.admin-cms-builder__right .cms-field-browser__item code,
.admin-cms-builder__right .cms-field-browser__item em,
.admin-cms-builder__right .cms-field-browser__item span,
.admin-cms-builder__right .cms-collection-selected-slot,
.admin-cms-builder__right .cms-collection-slot-format summary {
  font-size: 1.05rem;
}
.admin-cms-builder__right .cms-field-browser__body {
  padding: 0 0.7rem 0.7rem;
}
.admin-cms-builder__right .cms-field-browser__search input {
  min-height: 2.8rem;
  padding: 0 0.7rem;
  font-size: 1.1rem;
}
.admin-cms-builder__right .cms-field-browser__list {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.admin-cms-builder__right .cms-field-browser__item {
  gap: 0.2rem;
  padding: 0.5rem 0.6rem;
}
.admin-cms-builder__right .cms-collection-summary {
  padding: 0.7rem;
}
.admin-cms-builder__right .cms-collection-summary__grid {
  grid-template-columns: 1fr;
}

.admin-cms-builder__qa-panel {
  margin: var(--admin-space-md, 1rem);
  padding: var(--admin-space-sm, 0.8rem);
  border: 1px dashed var(--admin-border-strong);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs, 1.2rem);
}
.admin-cms-builder__qa-panel > summary {
  font-weight: 800;
  cursor: pointer;
}
.admin-cms-builder__qa-panel dl {
  display: grid;
  gap: var(--admin-space-2xs, 0.4rem);
  margin: var(--admin-space-xs, 0.6rem) 0 0;
}
.admin-cms-builder__qa-panel div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-builder__qa-panel dt {
  font-weight: 800;
}
.admin-cms-builder__qa-panel dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-cms-builder__qa-checklist {
  display: grid;
  gap: var(--admin-space-2xs, 0.4rem);
  margin: var(--admin-space-sm, 0.8rem) 0 0;
  padding-inline-start: var(--admin-space-lg, 1.6rem);
}

.admin-cms-raw-fields,
.admin-cms-section-design {
  display: grid;
  gap: var(--admin-space-sm, 0.8rem);
}

.admin-cms-history {
  display: grid;
  gap: var(--admin-space-md, 1rem);
}
.admin-cms-history__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-md, 1rem);
  padding: var(--admin-space-md, 1rem);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-bg-soft);
}
.admin-cms-history__summary-copy {
  display: grid;
  gap: var(--admin-space-2xs, 0.4rem);
  min-width: 0;
}
.admin-cms-history__summary-copy > strong,
.admin-cms-history__summary-copy > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-history__summary-copy > span {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm, 1.4rem);
}
.admin-cms-history__summary-count, .admin-cms-history__date-count, .admin-cms-history__today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--admin-radius-pill, 999px);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.admin-cms-history__summary-count {
  padding: var(--admin-space-xs, 0.6rem) var(--admin-space-sm, 0.8rem);
  background: var(--admin-surface);
  color: var(--admin-text-secondary);
  border: 1px solid var(--admin-border);
}
.admin-cms-history__eyebrow {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
}
.admin-cms-history__groups {
  display: grid;
  gap: var(--admin-space-lg, 1.25rem);
  max-height: min(62vh, 64rem);
  overflow-y: auto;
  padding-right: var(--admin-space-2xs, 0.4rem);
}
.admin-cms-history__group {
  display: grid;
  gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-history__date {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-sm, 0.8rem);
  padding: var(--admin-space-sm, 0.8rem) var(--admin-space-md, 1rem);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: color-mix(in srgb, var(--admin-surface) 92%, var(--admin-bg-soft));
}
.admin-cms-history__date-main {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs, 0.6rem);
  min-width: 0;
}
.admin-cms-history__date-main > time,
.admin-cms-history__date-main > span {
  min-width: 0;
}
.admin-cms-history__date-main > time,
.admin-cms-history__date-main > span:first-child {
  color: var(--admin-text);
  font-size: var(--admin-fs-sm, 1.4rem);
  font-weight: 800;
}
.admin-cms-history__date-count {
  padding: var(--admin-space-2xs, 0.4rem) var(--admin-space-xs, 0.6rem);
  background: var(--admin-bg-soft);
  color: var(--admin-text-secondary);
  border: 1px solid var(--admin-border-light);
}
.admin-cms-history__today {
  padding: var(--admin-space-2xs, 0.4rem) var(--admin-space-xs, 0.6rem);
  background: var(--admin-primary-light);
  color: var(--admin-primary-text);
}
.admin-cms-history__list {
  display: grid;
  gap: var(--admin-space-xs, 0.6rem);
}
.admin-cms-history__item {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--admin-space-md, 1rem);
  padding: var(--admin-space-md, 1rem);
  border: 1px solid var(--admin-border);
  border-left: 3px solid var(--admin-primary-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-xs);
}
.admin-cms-history__item.is-restored {
  border-left-color: var(--admin-border-strong);
  background: var(--admin-bg-soft);
}
.admin-cms-history__time {
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-cms-history__time > time,
.admin-cms-history__time > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.4rem;
  padding: var(--admin-space-2xs, 0.4rem) var(--admin-space-xs, 0.6rem);
  border-radius: var(--admin-radius-pill, 999px);
  background: var(--admin-bg-soft);
  border: 1px solid var(--admin-border-light);
}
.admin-cms-history__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--admin-space-xs, 0.6rem);
  color: var(--admin-text-muted);
  font-size: var(--admin-fs-xs, 1.2rem);
}
.admin-cms-history__body {
  display: grid;
  gap: var(--admin-space-2xs, 0.4rem);
  min-width: 0;
}
.admin-cms-history__body > strong,
.admin-cms-history__body > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-history__body > strong {
  color: var(--admin-text);
  font-weight: 800;
}
.admin-cms-history__body > span {
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm, 1.4rem);
}
.admin-cms-history__actions {
  display: flex;
  justify-content: flex-end;
}
.admin-cms-history__actions .admin-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-2xs, 0.4rem);
  white-space: nowrap;
}
.admin-cms-history__empty {
  padding: var(--admin-space-xl, 1.6rem);
  border: 1px dashed var(--admin-border-strong);
  border-radius: var(--admin-radius-sm, 0.6rem);
  color: var(--admin-text-muted);
  text-align: center;
}
@media (max-width: 720px) {
  .admin-cms-history__summary, .admin-cms-history__date {
    align-items: flex-start;
  }
  .admin-cms-history__summary-copy > span {
    white-space: normal;
  }
  .admin-cms-history__item {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .admin-cms-history__time > time, .admin-cms-history__time > span {
    justify-content: flex-start;
  }
  .admin-cms-history__actions {
    justify-content: flex-start;
  }
}

.admin-cms-raw-fields {
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-surface);
}
.admin-cms-raw-fields[open] {
  border-color: var(--admin-border-strong);
}
.admin-cms-raw-fields__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-sm, 0.8rem);
  padding: var(--admin-space-sm, 0.8rem) var(--admin-space-md, 1rem);
  cursor: pointer;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-sm, 1.4rem);
  font-weight: 800;
  list-style: none;
}
.admin-cms-raw-fields__summary::-webkit-details-marker {
  display: none;
}
.admin-cms-raw-fields__summary > i {
  color: var(--admin-text-muted);
  transition: transform var(--admin-duration-short, 0.12s) ease;
}
.admin-cms-raw-fields[open] .admin-cms-raw-fields__summary {
  border-bottom: 1px solid var(--admin-border);
}
.admin-cms-raw-fields[open] .admin-cms-raw-fields__summary > i {
  transform: rotate(180deg);
}
.admin-cms-raw-fields__body {
  display: grid;
  gap: var(--admin-space-md, 1rem);
  padding: var(--admin-space-md, 1rem);
}

[data-theme^=dark] .admin-cms-builder {
  --admin-cms-builder-surface: var(--admin-card-bg);
  --admin-cms-builder-surface-muted: var(--admin-bg-soft);
}
[data-theme^=dark] .admin-cms-builder__toolbar, [data-theme^=dark] .admin-cms-builder__left, [data-theme^=dark] .admin-cms-builder__center, [data-theme^=dark] .admin-cms-builder__right, [data-theme^=dark] .admin-cms-builder__inspector-foot, [data-theme^=dark] .admin-cms-builder__unlinked-row, [data-theme^=dark] .admin-cms-builder__tree .admin-page-tree__row, [data-theme^=dark] .admin-cms-builder__page-row {
  background: var(--admin-cms-builder-surface);
  border-color: var(--admin-border);
  color: var(--admin-text);
}
[data-theme^=dark] .admin-cms-builder__inspector-head, [data-theme^=dark] .admin-cms-builder__empty--center, [data-theme^=dark] .admin-cms-builder__page-row:hover, [data-theme^=dark] .admin-cms-builder__tree .admin-page-tree__row:hover, [data-theme^=dark] .admin-cms-builder__unlinked-row:hover {
  background: var(--admin-cms-builder-surface-muted);
  border-color: var(--admin-border-strong);
}
[data-theme^=dark] .admin-cms-builder__empty, [data-theme^=dark] .admin-cms-builder__unlinked-empty, [data-theme^=dark] .admin-cms-builder__unlinked-head, [data-theme^=dark] .admin-cms-builder__page-meta, [data-theme^=dark] .admin-cms-builder__page-more {
  color: var(--admin-text-secondary);
}
[data-theme^=dark] .admin-cms-builder__drawer-backdrop {
  background: rgba(0, 0, 0, 0.54);
}
[data-theme^=dark] .admin-page-tree__row.is-active-page,
[data-theme^=dark] .admin-cms-builder__tree .admin-page-tree__row--page:hover,
[data-theme^=dark] .admin-cms-builder__tree .admin-page-tree__list.is-drop-target,
[data-theme^=dark] .admin-cms-builder__tree .admin-page-tree__children.is-drop-target {
  background: var(--admin-primary-light);
  border-color: var(--admin-primary-border);
}
[data-theme^=dark] .admin-cms-builder__canvas-loader,
[data-theme^=dark] .admin-cms-builder__canvas-loader-icon,
[data-theme^=dark] .admin-cms-inspector__tab,
[data-theme^=dark] .admin-cms-builder-canvas__head,
[data-theme^=dark] .admin-cms-card,
[data-theme^=dark] .admin-cms-types,
[data-theme^=dark] .admin-cms-type,
[data-theme^=dark] .admin-cms-live,
[data-theme^=dark] .admin-cms-live-editable,
[data-theme^=dark] .admin-cms-live-editable--element,
[data-theme^=dark] .admin-cms-live-action--btn,
[data-theme^=dark] .admin-cms-live-action__type-menu,
[data-theme^=dark] .admin-cms-live-section-chrome__btn,
[data-theme^=dark] .admin-cms-floating-toolbar,
[data-theme^=dark] .admin-cms-template-picker__detail,
[data-theme^=dark] .admin-cms-template-repeat__item {
  background-color: var(--admin-card-bg);
  border-color: var(--admin-border);
  color: var(--admin-text);
}
[data-theme^=dark] .admin-cms-live,
[data-theme^=dark] .admin-cms-live__empty,
[data-theme^=dark] .admin-cms-live-placeholder,
[data-theme^=dark] .admin-cms-live-action__type-trigger,
[data-theme^=dark] .admin-cms-live-editable__content {
  background-color: var(--admin-bg-soft);
  color: var(--admin-text-secondary);
}
[data-theme^=dark] .admin-cms-live-editable.is-selected,
[data-theme^=dark] .admin-cms-live-editable--section,
[data-theme^=dark] .admin-cms-live-editable--element.is-selected {
  background: var(--admin-card-bg);
  border-color: var(--admin-primary-border);
}
[data-theme^=dark] .admin-cms-live-section-chrome,
[data-theme^=dark] .admin-cms-live-editable__chrome {
  background: linear-gradient(180deg, var(--admin-bg-soft), var(--admin-card-bg));
  border-color: var(--admin-border);
}
[data-theme^=dark] .admin-cms-live-section-chrome__label,
[data-theme^=dark] .admin-cms-live-editable__type-badge,
[data-theme^=dark] .admin-cms-live-editable__type-badge[data-element-kind],
[data-theme^=dark] .admin-cms-live-placeholder__icon,
[data-theme^=dark] .admin-cms-type__icon,
[data-theme^=dark] .admin-cms-template-picker__detail-category {
  background: var(--admin-primary-light);
  border-color: var(--admin-primary-border);
  color: var(--admin-primary-text);
}
[data-theme^=dark] .admin-cms-live-section-chrome__type,
[data-theme^=dark] .admin-cms-live-editable__drag,
[data-theme^=dark] .admin-cms-live-action__type-trigger,
[data-theme^=dark] .admin-cms-live-action__type-option {
  background: var(--admin-surface);
  border-color: var(--admin-border);
  color: var(--admin-text-secondary);
}
[data-theme^=dark] .admin-cms-live-action__type-option:hover,
[data-theme^=dark] .admin-cms-live-action__type-option:focus-visible,
[data-theme^=dark] .admin-cms-type:hover,
[data-theme^=dark] .admin-cms-inspector__tab:hover {
  background: var(--admin-primary-light);
  border-color: var(--admin-primary-border);
  color: var(--admin-primary-text);
}

.admin-cms-live-editable,
.admin-cms-live-editable--section,
.admin-cms-live-editable--element,
.admin-cms-live-editable.is-selected,
.admin-cms-live-editable--element.is-selected,
.admin-cms-live-editable:hover,
.admin-cms-live-editable--section:hover,
.admin-cms-live-editable--element:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.admin-cms-live-section-body,
.admin-cms-live-editable__content {
  background: transparent;
}

.admin-cms-live-section-chrome,
.admin-cms-live-editable__chrome,
.admin-cms-floating-toolbar,
.admin-cms-template-media-overlay,
.admin-cms-live__binding-note {
  display: none;
}

body.admin-shell-v2 .admin-cms-builder {
  --builder-panel: var(--figma-panel);
  --builder-panel-subtle: #333333;
  --builder-panel-hover: var(--figma-panel-hover);
  --builder-panel-selected: var(--figma-panel-selected);
  --builder-border: var(--figma-border);
  --builder-border-subtle: var(--color-border-subtle);
  --builder-text: var(--color-text-primary);
  --builder-text-secondary: var(--color-text-secondary);
  --builder-text-muted: var(--color-text-muted);
  --builder-canvas: var(--admin-cms-builder-canvas-bg, #f6f7f9);
  --builder-canvas-border: var(--admin-cms-builder-canvas-border, #d6dbe2);
  --builder-canvas-text: var(--admin-cms-builder-canvas-text, #1f2328);
  height: calc(100vh - var(--figma-toolbar-height, 4.8rem) - 3.2rem);
  min-height: 58rem;
  gap: 0;
}
body.admin-shell-v2 .admin-cms-builder__toolbar {
  min-height: var(--figma-toolbar-height, 4.8rem);
  padding: 0 1rem;
  border-color: var(--builder-border);
  border-width: 0 0 1px;
  border-radius: 0;
  background: var(--builder-panel);
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder__toolbar-main, body.admin-shell-v2 .admin-cms-builder__toolbar-actions {
  gap: 0.8rem;
}
body.admin-shell-v2 .admin-cms-builder__toolbar-title {
  color: var(--builder-text);
  font-size: var(--admin-fs-base);
}
body.admin-shell-v2 .admin-cms-builder__toolbar-lang {
  margin-left: auto;
}
body.admin-shell-v2 .admin-cms-builder__body {
  grid-template-columns: 30rem minmax(0, 1fr) 32rem;
  gap: 0;
  min-height: 0;
}
body.admin-shell-v2 .admin-cms-builder__left, body.admin-shell-v2 .admin-cms-builder__right {
  border-color: var(--builder-border);
  border-radius: 0;
  background: var(--builder-panel);
  color: var(--builder-text);
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder__left {
  padding: 0.8rem;
  border-width: 0 1px 0 0;
}
body.admin-shell-v2 .admin-cms-builder__center {
  padding: 1.2rem;
  border-color: var(--builder-border);
  border-width: 0 1px;
  border-radius: 0;
  background: var(--builder-canvas);
  color: var(--builder-canvas-text);
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder__left-tabs, body.admin-shell-v2 .admin-cms-builder__device-toggle {
  gap: var(--admin-space-3xs);
  padding: var(--admin-space-3xs);
  border-color: var(--builder-border);
  border-radius: var(--figma-radius);
  background: var(--builder-panel-subtle);
}
body.admin-shell-v2 .admin-cms-builder__left-tab, body.admin-shell-v2 .admin-cms-builder__device, body.admin-shell-v2 .admin-cms-builder__lang {
  min-height: 2.8rem;
  border-color: transparent;
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--builder-text-secondary);
  font-size: var(--admin-fs-xs);
}
body.admin-shell-v2 .admin-cms-builder__left-tab:hover, body.admin-shell-v2 .admin-cms-builder__left-tab:focus-visible, body.admin-shell-v2 .admin-cms-builder__device:hover, body.admin-shell-v2 .admin-cms-builder__device:focus-visible, body.admin-shell-v2 .admin-cms-builder__lang:hover, body.admin-shell-v2 .admin-cms-builder__lang:focus-visible {
  background: var(--builder-panel-hover);
  color: var(--builder-text);
  outline: 0;
}
body.admin-shell-v2 .admin-cms-builder__left-tab.is-active, body.admin-shell-v2 .admin-cms-builder__device.is-active, body.admin-shell-v2 .admin-cms-builder__lang.is-active {
  background: var(--builder-panel-selected);
  border-color: var(--builder-panel-selected);
  color: var(--color-text-primary);
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder__group-row, body.admin-shell-v2 .admin-cms-builder__left-actions {
  gap: var(--admin-space-2xs);
}
body.admin-shell-v2 .admin-cms-builder__tree-host {
  padding-top: var(--admin-space-2xs);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row, body.admin-shell-v2 .admin-cms-builder__page-row, body.admin-shell-v2 .admin-cms-builder__unlinked-row {
  min-height: 3rem;
  padding: 0.5rem 0.7rem;
  border-color: transparent;
  border-radius: var(--figma-radius);
  background: transparent;
  color: var(--builder-text-secondary);
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:hover, body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:focus-visible, body.admin-shell-v2 .admin-cms-builder__page-row:hover, body.admin-shell-v2 .admin-cms-builder__page-row:focus-visible, body.admin-shell-v2 .admin-cms-builder__unlinked-row:hover, body.admin-shell-v2 .admin-cms-builder__unlinked-row:focus-visible {
  border-color: transparent;
  background: var(--builder-panel-hover);
  color: var(--builder-text);
  outline: 0;
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row.is-active-page,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row--page:hover,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__list.is-drop-target,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children.is-drop-target {
  background: var(--builder-panel-selected);
  color: var(--color-text-primary);
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__actions {
  opacity: 0;
  transition: opacity var(--admin-duration-short) var(--admin-ease);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:hover .admin-page-tree__actions,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:focus-within .admin-page-tree__actions,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row.is-active-page .admin-page-tree__actions {
  opacity: 1;
}
body.admin-shell-v2 .admin-cms-builder__empty {
  color: var(--builder-text-muted);
}
body.admin-shell-v2 .admin-cms-builder__empty--center {
  min-height: 100%;
  border-color: var(--builder-canvas-border);
  background: transparent;
  color: var(--builder-canvas-text);
}
body.admin-shell-v2 .admin-cms-builder__empty--center::before {
  content: none;
}
body.admin-shell-v2 .admin-cms-builder__empty-frame, body.admin-shell-v2 .admin-cms-builder__empty-topbar, body.admin-shell-v2 .admin-cms-builder__empty-hero, body.admin-shell-v2 .admin-cms-builder__empty-lines, body.admin-shell-v2 .admin-cms-builder__empty-grid {
  display: none;
}
body.admin-shell-v2 .admin-cms-builder__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--builder-text-muted);
  font-size: 1.6rem;
}
body.admin-shell-v2 .admin-cms-builder__inspector-head, body.admin-shell-v2 .admin-cms-builder__inspector-foot {
  min-height: 3.2rem;
  padding: 0.5rem 0.8rem;
  border-color: var(--builder-border);
  background: var(--builder-panel);
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder__inspector-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--builder-panel);
  color: var(--builder-text-secondary);
}
body.admin-shell-v2 .admin-cms-builder input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.admin-shell-v2 .admin-cms-builder select,
body.admin-shell-v2 .admin-cms-builder textarea,
body.admin-shell-v2 .admin-cms-builder .admin-cms-property-row__value,
body.admin-shell-v2 .admin-cms-builder .cms-collection-summary,
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-empty {
  border-radius: var(--figma-radius);
}
body.admin-shell-v2 .admin-cms-builder input:not([type=checkbox]):not([type=radio]):focus,
body.admin-shell-v2 .admin-cms-builder select:focus,
body.admin-shell-v2 .admin-cms-builder textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: none;
  outline: 0;
}
body.admin-shell-v2 .admin-cms-builder__right {
  --cms-inspector-bg: var(--builder-panel);
  --cms-inspector-header-bg: var(--builder-panel);
  --cms-inspector-panel-bg: var(--builder-panel-subtle);
  --cms-inspector-control-bg: var(--builder-panel-subtle);
  --cms-inspector-control-hover: var(--builder-panel-hover);
  --cms-inspector-control-active: var(--color-border-focus);
  --cms-inspector-border: var(--builder-border);
  --cms-inspector-divider: var(--builder-border-subtle);
  --cms-inspector-text: var(--builder-text);
  --cms-inspector-muted: var(--builder-text-secondary);
  --cms-inspector-subtle: var(--builder-text-muted);
  --cms-inspector-placeholder: var(--builder-text-muted);
  --cms-inspector-accent: var(--color-action-primary-text);
  border-width: 0 0 0 1px;
}
@media (max-width: 720px) {
  body.admin-shell-v2 .admin-cms-builder {
    height: auto;
    min-height: 0;
  }
  body.admin-shell-v2 .admin-cms-builder__body {
    grid-template-columns: minmax(0, 1fr);
  }
  body.admin-shell-v2 .admin-cms-builder__left, body.admin-shell-v2 .admin-cms-builder__center {
    overflow: visible;
  }
  body.admin-shell-v2 .admin-cms-builder__center {
    min-height: 42rem;
  }
}

html[data-admin-theme=light] body.admin-shell-v2 .admin-cms-builder,
html[data-theme=light] body.admin-shell-v2 .admin-cms-builder {
  --admin-cms-builder-canvas-bg: var(--figma-workspace);
  --admin-cms-builder-canvas-border: var(--figma-border);
  --admin-cms-builder-canvas-text: var(--figma-text-secondary);
}

html[data-admin-theme=dark] body.admin-shell-v2 .admin-cms-builder,
html[data-theme=dark] body.admin-shell-v2 .admin-cms-builder {
  --admin-cms-builder-canvas-bg: var(--figma-workspace);
  --admin-cms-builder-canvas-border: var(--figma-border);
  --admin-cms-builder-canvas-text: var(--figma-text-secondary);
}

body.admin-shell-v2 .admin-cms-builder-canvas {
  min-height: 100%;
  border: 1px solid #d0d0d0;
  border-radius: 0;
  background: var(--figma-page-frame, #ffffff);
  color: #1f2328;
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder-canvas__head {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-color: #d0d0d0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder-canvas .admin-cms-live,
body.admin-shell-v2 .admin-cms-builder-canvas .admin-cms-live-sections {
  background: #ffffff;
}

.admin-cms-design-vars {
  display: grid;
  gap: 0.8rem;
}
.admin-cms-design-vars__desc, .admin-cms-design-vars__empty {
  margin: 0;
  color: var(--cms-inspector-text, inherit);
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: 0.75;
}
.admin-cms-design-vars__group {
  display: grid;
  gap: 0.3rem;
}
.admin-cms-design-vars__group-title {
  color: var(--cms-inspector-text, inherit);
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.6;
}
.admin-cms-design-vars__list {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-cms-design-vars__item {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--cms-inspector-border, rgba(127, 127, 127, 0.3));
  border-radius: 3px;
  color: var(--cms-inspector-text, inherit);
  font-size: 1rem;
  word-break: break-all;
}
.admin-cms-design-vars__manage {
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

/* CMS Builder Figma system: one scoped source for builder density, hierarchy, and component states. */
body.admin-shell-v2 {
  --cms-figma-sidebar-width: 30rem;
  --cms-figma-inspector-width: 32rem;
  --cms-figma-toolbar-height: var(--figma-toolbar-height);
  --cms-figma-panel: var(--figma-panel);
  --cms-figma-panel-raised: var(--figma-panel-raised);
  --cms-figma-panel-hover: var(--figma-panel-hover);
  --cms-figma-panel-selected: var(--figma-panel-selected);
  --cms-figma-section-header: color-mix(in srgb, var(--figma-panel-raised) 88%, var(--figma-panel-hover));
  --cms-figma-top-row: color-mix(in srgb, var(--figma-panel-raised) 82%, var(--figma-panel));
  --cms-figma-top-row-hover: color-mix(in srgb, var(--figma-panel-hover) 88%, var(--figma-panel-raised));
  --cms-figma-border: var(--figma-border);
  --cms-figma-border-subtle: var(--color-border-subtle);
  --cms-figma-text: var(--figma-text-primary);
  --cms-figma-text-secondary: var(--figma-text-secondary);
  --cms-figma-text-muted: var(--figma-text-muted);
  --cms-figma-accent: var(--figma-accent);
  --cms-figma-accent-soft: var(--color-action-primary-subtle);
  --cms-figma-radius: var(--figma-radius);
  --cms-figma-row: 2.8rem;
  --cms-figma-control: 2.8rem;
  --cms-figma-field: 3.2rem;
  --cms-figma-pad-2xs: var(--admin-space-2xs);
  --cms-figma-pad-xs: var(--admin-space-xs);
  --cms-figma-pad-sm: var(--admin-space-sm);
  --cms-figma-pad: var(--admin-space);
  --cms-figma-pad-lg: var(--admin-space-lg);
  --cms-figma-pad-xl: var(--admin-space-xl);
  --cms-figma-pad-2xl: var(--admin-space-2xl);
}
body.admin-shell-v2 .admin__main:has(.admin-cms-builder),
body.admin-shell-v2 .admin__content:has(> .admin-cms-builder) {
  padding: 0;
}
body.admin-shell-v2 .admin__main:has(.admin-cms-builder) {
  min-height: calc(100vh - var(--admin-shell-header-height));
}

body.admin-shell-v2 .admin-cms-builder {
  --builder-panel: var(--cms-figma-panel);
  --builder-panel-subtle: var(--cms-figma-panel-raised);
  --builder-panel-hover: var(--cms-figma-panel-hover);
  --builder-panel-selected: var(--cms-figma-panel-selected);
  --builder-border: var(--cms-figma-border);
  --builder-border-subtle: var(--cms-figma-border-subtle);
  --builder-text: var(--cms-figma-text);
  --builder-text-secondary: var(--cms-figma-text-secondary);
  --builder-text-muted: var(--cms-figma-text-muted);
  --builder-canvas: var(--figma-workspace);
  --builder-canvas-border: var(--cms-figma-border);
  --builder-canvas-text: var(--cms-figma-text-secondary);
  height: calc(100vh - var(--admin-shell-header-height));
  min-height: 0;
  gap: 0;
  overflow: hidden;
  background: var(--builder-panel);
}
body.admin-shell-v2 .admin-cms-builder__toolbar {
  min-height: var(--cms-figma-toolbar-height);
  padding: 0 var(--cms-figma-pad);
  border-width: 0 0 1px;
  border-color: var(--builder-border);
  border-radius: 0;
  background: var(--builder-panel);
}
body.admin-shell-v2 .admin-cms-builder__toolbar-main {
  min-height: var(--cms-figma-toolbar-height);
  gap: var(--cms-figma-pad-sm);
}
body.admin-shell-v2 .admin-cms-builder__toolbar-title {
  gap: var(--cms-figma-pad-sm);
  color: var(--builder-text);
  font-size: var(--admin-fs-base);
  line-height: var(--admin-lh-base);
}
body.admin-shell-v2 .admin-cms-builder__toolbar-title > strong, body.admin-shell-v2 .admin-cms-builder__section-title > strong, body.admin-shell-v2 .admin-cms-builder__inspector-head > strong {
  font-weight: 700;
}
body.admin-shell-v2 .admin-cms-builder__toolbar-lang {
  gap: var(--cms-figma-pad-2xs);
  margin-left: auto;
}
body.admin-shell-v2 .admin-cms-builder__toolbar-lang .admin-form__label {
  margin: 0;
  color: var(--builder-text-muted);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
}
body.admin-shell-v2 .admin-cms-builder__toolbar-actions {
  gap: var(--cms-figma-pad-2xs);
}
body.admin-shell-v2 .admin-cms-builder__body {
  grid-template-columns: var(--cms-figma-sidebar-width) minmax(0, 1fr) var(--cms-figma-inspector-width);
  gap: 0;
  min-height: 0;
  overflow: hidden;
}
body.admin-shell-v2 .admin-cms-builder__left, body.admin-shell-v2 .admin-cms-builder__right {
  border-color: var(--builder-border);
  border-radius: 0;
  background: var(--builder-panel);
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder__left {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-width: 0 1px 0 0;
  overflow: auto;
}
body.admin-shell-v2 .admin-cms-builder__center {
  padding: var(--cms-figma-pad-lg);
  border-width: 0 1px;
  border-color: var(--builder-border);
  border-radius: 0;
  background: var(--builder-canvas);
}
body.admin-shell-v2 .admin-cms-builder__right {
  --cms-inspector-bg: var(--builder-panel);
  --cms-inspector-header-bg: var(--builder-panel);
  --cms-inspector-panel-bg: var(--builder-panel);
  --cms-inspector-control-bg: var(--builder-panel-raised);
  --cms-inspector-control-hover: var(--builder-panel-hover);
  --cms-inspector-control-active: var(--cms-figma-accent);
  --cms-inspector-border: var(--builder-border);
  --cms-inspector-divider: var(--builder-border-subtle);
  --cms-inspector-text: var(--builder-text);
  --cms-inspector-muted: var(--builder-text-secondary);
  --cms-inspector-subtle: var(--builder-text-muted);
  --cms-inspector-placeholder: var(--builder-text-muted);
  --cms-inspector-accent: var(--cms-figma-accent);
  border-width: 0 0 0 1px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
body.admin-shell-v2 .admin-cms-builder__panel-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--cms-figma-pad-sm);
  border-bottom: 1px solid var(--builder-border);
}
body.admin-shell-v2 .admin-cms-builder__panel-section--pages {
  flex: 0 0 auto;
}
body.admin-shell-v2 .admin-cms-builder__panel-section--layers {
  flex: 1 1 auto;
  overflow: hidden;
}
body.admin-shell-v2 .admin-cms-builder__section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cms-figma-pad-sm);
  min-height: var(--cms-figma-field);
  margin-bottom: var(--cms-figma-pad);
  padding: 0 var(--cms-figma-pad);
  border: 1px solid var(--builder-border-subtle);
  border-radius: calc(var(--cms-figma-radius) * 2);
  background: var(--cms-figma-section-header);
  color: var(--builder-text);
  font-size: var(--admin-fs-md);
  line-height: var(--admin-lh-md);
}
body.admin-shell-v2 .admin-cms-builder__section-title--layers {
  align-items: center;
  flex-direction: row;
  justify-content: center;
  gap: var(--cms-figma-pad-sm);
}
body.admin-shell-v2 .admin-cms-builder__section-title--layers > span {
  margin-left: auto;
  color: var(--builder-text-muted);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
}
body.admin-shell-v2 .admin-cms-builder__section-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--cms-figma-pad-2xs);
}
body.admin-shell-v2 .admin-cms-builder__icon-action, body.admin-shell-v2 .admin-cms-builder__device, body.admin-shell-v2 .admin-cms-builder__lang, body.admin-shell-v2 .admin-cms-builder__node-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cms-figma-control);
  min-width: var(--cms-figma-control);
  height: var(--cms-figma-control);
  min-height: var(--cms-figma-control);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--cms-figma-radius);
  background: transparent;
  color: var(--builder-text-secondary);
  cursor: pointer;
}
body.admin-shell-v2 .admin-cms-builder__lang {
  width: auto;
  padding: 0 var(--cms-figma-pad-sm);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
}
body.admin-shell-v2 .admin-cms-builder__icon-action:hover, body.admin-shell-v2 .admin-cms-builder__icon-action:focus-visible, body.admin-shell-v2 .admin-cms-builder__device:hover, body.admin-shell-v2 .admin-cms-builder__device:focus-visible, body.admin-shell-v2 .admin-cms-builder__lang:hover, body.admin-shell-v2 .admin-cms-builder__lang:focus-visible, body.admin-shell-v2 .admin-cms-builder__node-btn:hover, body.admin-shell-v2 .admin-cms-builder__node-btn:focus-visible {
  background: var(--builder-panel-hover);
  color: var(--builder-text);
  outline: 0;
}
body.admin-shell-v2 .admin-cms-builder__device.is-active, body.admin-shell-v2 .admin-cms-builder__lang.is-active, body.admin-shell-v2 .admin-cms-builder__icon-action:active {
  background: var(--builder-panel-selected);
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder__device-toggle {
  gap: var(--cms-figma-pad-2xs);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.admin-shell-v2 .admin-cms-builder__left-head {
  margin-bottom: var(--cms-figma-pad);
  padding: 0 var(--cms-figma-pad-2xs);
}
body.admin-shell-v2 .admin-cms-builder__left-head .admin-form__label {
  margin-bottom: var(--cms-figma-pad-xs);
  color: var(--builder-text-muted);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
  font-weight: 600;
}
body.admin-shell-v2 .admin-cms-builder__group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, var(--cms-figma-control));
  align-items: center;
  gap: var(--cms-figma-pad-xs);
  margin-top: 0;
}
body.admin-shell-v2 .admin-cms-builder__group-row > .admin-btn {
  width: var(--cms-figma-control);
  min-width: var(--cms-figma-control);
  height: var(--cms-figma-control);
  min-height: var(--cms-figma-control);
  padding: 0;
  font-size: 0;
}
body.admin-shell-v2 .admin-cms-builder__group-row > .admin-btn i {
  margin: 0;
  font-size: var(--admin-fs-sm);
  line-height: 1;
}
body.admin-shell-v2 .admin-cms-builder__left-actions {
  display: none;
}
body.admin-shell-v2 .admin-cms-builder__tree-search {
  margin-bottom: var(--cms-figma-pad);
}
body.admin-shell-v2 .admin-cms-builder__tree-host, body.admin-shell-v2 .admin-cms-builder__layer-host {
  min-height: 0;
  padding: 0;
}
body.admin-shell-v2 .admin-cms-builder__layer-host {
  overflow: auto;
}
body.admin-shell-v2 .admin-cms-builder__empty {
  padding: var(--cms-figma-pad);
  color: var(--builder-text-muted);
  font-size: var(--admin-fs-sm);
  line-height: var(--admin-lh-sm);
  text-align: left;
}
body.admin-shell-v2 .admin-cms-builder__empty--center {
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--cms-figma-pad-xl);
  border-color: var(--builder-canvas-border);
  border-radius: var(--cms-figma-radius);
  background: transparent;
  color: var(--builder-canvas-text);
  text-align: center;
}
body.admin-shell-v2 .admin-cms-builder__empty--center::before, body.admin-shell-v2 .admin-cms-builder__empty-frame, body.admin-shell-v2 .admin-cms-builder__empty-topbar, body.admin-shell-v2 .admin-cms-builder__empty-hero, body.admin-shell-v2 .admin-cms-builder__empty-lines, body.admin-shell-v2 .admin-cms-builder__empty-grid {
  content: none;
  display: none;
}
body.admin-shell-v2 .admin-cms-builder__empty-icon {
  width: var(--cms-figma-control);
  height: var(--cms-figma-control);
  color: var(--builder-text-muted);
  font-size: var(--admin-fs-md);
}
body.admin-shell-v2 .admin-cms-builder .admin-form__input,
body.admin-shell-v2 .admin-cms-builder .admin-select,
body.admin-shell-v2 .admin-cms-builder .ss-main,
body.admin-shell-v2 .admin-cms-builder input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.admin-shell-v2 .admin-cms-builder select,
body.admin-shell-v2 .admin-cms-builder textarea {
  min-height: var(--cms-figma-field);
  border-color: var(--builder-border-subtle);
  border-radius: var(--cms-figma-radius);
  background-color: var(--builder-panel-raised);
  color: var(--builder-text);
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-form__input:focus,
body.admin-shell-v2 .admin-cms-builder .admin-select:focus,
body.admin-shell-v2 .admin-cms-builder .ss-main:focus-within,
body.admin-shell-v2 .admin-cms-builder input:not([type=checkbox]):not([type=radio]):focus,
body.admin-shell-v2 .admin-cms-builder select:focus,
body.admin-shell-v2 .admin-cms-builder textarea:focus {
  border-color: var(--cms-figma-accent);
  box-shadow: none;
  outline: 0;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__list,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__children {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__children {
  padding-left: var(--cms-figma-pad-xl);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__children {
  position: relative;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children {
  margin-top: var(--cms-figma-pad-2xs);
  margin-bottom: var(--cms-figma-pad-xs);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children::before,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__children::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 var(--cms-figma-pad-xs);
  width: 1px;
  background: var(--builder-border-subtle);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row, body.admin-shell-v2 .admin-cms-builder__page-row, body.admin-shell-v2 .admin-cms-builder__unlinked-row,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button {
  min-height: var(--cms-figma-row);
  padding: 0 var(--cms-figma-pad-sm);
  border: 1px solid transparent;
  border-radius: var(--cms-figma-radius);
  background: transparent;
  color: var(--builder-text-secondary);
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__list > .admin-page-tree__item > .admin-page-tree__row {
  min-height: var(--cms-figma-row);
  border-color: transparent;
  background: transparent;
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__list > .admin-page-tree__item > .admin-page-tree__row:hover,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__list > .admin-page-tree__item > .admin-page-tree__row:focus-within {
  background: var(--cms-figma-top-row-hover);
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__list > .admin-page-tree__item > .admin-page-tree__row .admin-page-tree__title-main {
  color: var(--builder-text);
  font-weight: 650;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children .admin-page-tree__row {
  min-height: var(--cms-figma-row);
  background: transparent;
  color: var(--builder-text-secondary);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children .admin-page-tree__title-main {
  font-weight: 500;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cms-figma-pad-2xs);
  cursor: pointer;
  text-align: left;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree > .admin-cms-layer-tree__item--section > .admin-cms-layer-tree__button {
  min-height: var(--cms-figma-row);
  border-color: transparent;
  background: transparent;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree > .admin-cms-layer-tree__item--section > .admin-cms-layer-tree__button > span {
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__item--element > .admin-cms-layer-tree__button {
  min-height: var(--cms-figma-row);
  background: transparent;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button > span {
  color: var(--builder-text);
  font-size: var(--admin-fs-sm);
  line-height: var(--admin-lh-sm);
  font-weight: 500;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button > small {
  min-width: 0;
  overflow: hidden;
  color: var(--builder-text-muted);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:hover,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:focus-within,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button:hover,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button:focus-visible {
  border-color: transparent;
  background: var(--builder-panel-hover);
  color: var(--builder-text);
  outline: 0;
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row.is-active-page,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row--page:hover,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__list.is-drop-target,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children.is-drop-target,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button.is-active {
  border-color: transparent;
  background: color-mix(in srgb, var(--cms-figma-accent) 40%, var(--builder-panel-selected));
  color: var(--builder-text);
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__list > .admin-page-tree__item > .admin-page-tree__row.is-active-page,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree > .admin-cms-layer-tree__item--section > .admin-cms-layer-tree__button.is-active {
  border-color: transparent;
  background: color-mix(in srgb, var(--cms-figma-accent) 40%, var(--builder-panel-selected));
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row.is-active-page::before {
  content: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__title {
  gap: var(--cms-figma-pad-xs);
  min-width: 0;
  color: inherit;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__title-main,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__meta {
  gap: var(--cms-figma-pad-2xs);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__title-icon,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__handle {
  color: var(--builder-text-muted);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__handle {
  width: 1.8rem;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  font-size: var(--admin-fs-xs);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__title-icon {
  width: 1.4rem;
  min-width: 1.4rem;
  font-size: var(--admin-fs-xs);
  text-align: center;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row.is-active-page .admin-page-tree__title,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row.is-active-page .admin-page-tree__title-icon {
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__actions {
  opacity: 0;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:hover .admin-page-tree__actions,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:focus-within .admin-page-tree__actions,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row.is-active-page .admin-page-tree__actions {
  opacity: 1;
}
body.admin-shell-v2 .admin-cms-builder .admin-badge {
  height: 1.8rem;
  padding: 0 var(--cms-figma-pad-xs);
  border-radius: var(--cms-figma-radius);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
  font-weight: 600;
  letter-spacing: 0;
}
body.admin-shell-v2 .admin-cms-builder .admin-badge--default {
  border-color: var(--builder-border);
  background: var(--builder-panel-hover);
  color: var(--builder-text-secondary);
}
body.admin-shell-v2 .admin-cms-builder .admin-badge--primary {
  border-color: var(--cms-figma-accent);
  background: var(--cms-figma-accent-soft);
  color: var(--color-action-primary-text);
}
body.admin-shell-v2 .admin-cms-builder .admin-badge--success {
  border-color: color-mix(in srgb, var(--admin-success) 45%, var(--builder-border));
  background: color-mix(in srgb, var(--admin-success) 16%, var(--builder-panel));
  color: color-mix(in srgb, var(--admin-success) 72%, var(--builder-text));
}
body.admin-shell-v2 .admin-cms-builder .admin-badge--warn,
body.admin-shell-v2 .admin-cms-builder .admin-badge--warning {
  border-color: color-mix(in srgb, var(--admin-warn) 45%, var(--builder-border));
  background: color-mix(in srgb, var(--admin-warn) 16%, var(--builder-panel));
  color: color-mix(in srgb, var(--admin-warn) 72%, var(--builder-text));
}
body.admin-shell-v2 .admin-cms-builder .admin-badge--info {
  border-color: color-mix(in srgb, var(--admin-info) 45%, var(--builder-border));
  background: color-mix(in srgb, var(--admin-info) 16%, var(--builder-panel));
  color: color-mix(in srgb, var(--admin-info) 72%, var(--builder-text));
}
body.admin-shell-v2 .admin-cms-builder .admin-badge--error,
body.admin-shell-v2 .admin-cms-builder .admin-badge--danger {
  border-color: color-mix(in srgb, var(--admin-error) 45%, var(--builder-border));
  background: color-mix(in srgb, var(--admin-error) 16%, var(--builder-panel));
  color: color-mix(in srgb, var(--admin-error) 72%, var(--builder-text));
}
body.admin-shell-v2 .admin-cms-builder__save-status[data-cms-save-state] {
  height: 2.2rem;
  min-height: 2.2rem;
  padding: 0 var(--cms-figma-pad-sm);
  border-radius: var(--cms-figma-radius);
  background: var(--builder-panel-hover);
  color: var(--builder-text-secondary);
  border-color: var(--builder-border);
}
body.admin-shell-v2 .admin-cms-builder__save-status[data-cms-save-state=dirty], body.admin-shell-v2 .admin-cms-builder__save-status[data-cms-save-state=saving] {
  border-color: color-mix(in srgb, var(--admin-warn) 45%, var(--builder-border));
  background: color-mix(in srgb, var(--admin-warn) 16%, var(--builder-panel));
  color: color-mix(in srgb, var(--admin-warn) 72%, var(--builder-text));
}
body.admin-shell-v2 .admin-cms-builder__save-status[data-cms-save-state=saved] {
  border-color: color-mix(in srgb, var(--admin-success) 45%, var(--builder-border));
  background: color-mix(in srgb, var(--admin-success) 16%, var(--builder-panel));
  color: color-mix(in srgb, var(--admin-success) 72%, var(--builder-text));
}
body.admin-shell-v2 .admin-cms-builder__save-status[data-cms-save-state=failed], body.admin-shell-v2 .admin-cms-builder__save-status[data-cms-save-state=offline] {
  border-color: color-mix(in srgb, var(--admin-error) 45%, var(--builder-border));
  background: color-mix(in srgb, var(--admin-error) 16%, var(--builder-panel));
  color: color-mix(in srgb, var(--admin-error) 72%, var(--builder-text));
}
body.admin-shell-v2 .admin-cms-builder__inspector-head, body.admin-shell-v2 .admin-cms-builder__inspector-foot {
  min-height: 3.2rem;
  padding: 0.5rem 0.8rem;
  border-color: var(--builder-border);
  background: var(--builder-panel);
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder__inspector-head {
  padding-block: 0.5rem;
}
body.admin-shell-v2 .admin-cms-builder__inspector-foot {
  position: relative;
  bottom: auto;
  z-index: 4;
  min-height: 5.2rem;
  padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
}
body.admin-shell-v2 .admin-cms-builder__inspector-foot .admin-btn {
  min-height: 3.2rem;
  padding: 0 1rem;
  font-size: 1.15rem;
  line-height: 1.3;
}
body.admin-shell-v2 .admin-cms-builder__inspector-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--builder-panel);
  color: var(--builder-text-secondary);
}
body.admin-shell-v2 .admin-cms-builder__inspector-body .admin-cms-page-inspector, body.admin-shell-v2 .admin-cms-builder__inspector-body [data-cms-section-form] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  min-width: 0;
  background: var(--builder-panel);
  overflow: hidden;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs__rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cms-figma-pad-2xs);
  min-height: 3.1rem;
  padding: 0.3rem 0.6rem;
  overflow: visible;
  border-bottom: 1px solid var(--builder-border);
  background: var(--builder-panel);
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs__tab,
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector__tab {
  width: 100%;
  min-width: 0;
  min-height: var(--cms-figma-control);
  height: var(--cms-figma-control);
  padding: 0 var(--cms-figma-pad-xs);
  border: 1px solid transparent;
  border-radius: var(--cms-figma-radius);
  background: transparent;
  color: var(--builder-text-secondary);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs__tab:hover,
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs__tab:focus-visible,
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector__tab:hover,
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector__tab:focus-visible {
  background: var(--builder-panel-hover);
  color: var(--builder-text);
  outline: 0;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs__tab.is-active,
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector__tab.is-active {
  background: var(--builder-panel-hover);
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs__viewport {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden auto;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs__wrapper {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs__panel {
  display: none;
  width: 100%;
  min-width: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  flex: 0 0 auto;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs__panel.is-active {
  display: block;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs__panel-scroll {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  max-height: none;
  padding: 0 0 6.2rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--builder-panel);
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-group {
  margin: 0;
  border-width: 0 0 1px;
  border-color: var(--builder-border);
  border-radius: 0;
  background: var(--builder-panel);
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-group > summary,
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-group__head {
  min-height: 3rem;
  padding: 0 0.8rem;
  color: var(--builder-text);
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 700;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-group__body {
  display: grid;
  gap: 0.6rem;
  padding: 0 0.8rem 0.8rem;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-property-row {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-builder__right .admin-form__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.3rem;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-property-row__label,
body.admin-shell-v2 .admin-cms-builder .admin-cms-builder__right .admin-form__label {
  margin-bottom: 0;
  min-width: 0;
  max-width: 100%;
  color: var(--builder-text-secondary);
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: anywhere;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-property-row__value,
body.admin-shell-v2 .admin-cms-builder .cms-collection-summary,
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-empty {
  min-height: var(--cms-figma-field);
  border-color: var(--builder-border-subtle);
  border-radius: var(--cms-figma-radius);
  background: var(--builder-panel-raised);
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder__right .admin-form__input, body.admin-shell-v2 .admin-cms-builder__right .admin-select, body.admin-shell-v2 .admin-cms-builder__right .ss-main, body.admin-shell-v2 .admin-cms-builder__right input:not([type=checkbox]):not([type=radio]):not([type=hidden]), body.admin-shell-v2 .admin-cms-builder__right select, body.admin-shell-v2 .admin-cms-builder__right textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 3rem;
  padding: 0 var(--cms-figma-pad-sm);
  border-radius: var(--cms-figma-radius);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
}
body.admin-shell-v2 .admin-cms-builder__right select, body.admin-shell-v2 .admin-cms-builder__right .admin-select {
  height: 3rem;
  line-height: 1.2;
}
body.admin-shell-v2 .admin-cms-builder__right textarea {
  min-height: 6.4rem;
  padding-block: var(--cms-figma-pad-xs);
  line-height: var(--admin-lh-sm);
}
body.admin-shell-v2 .admin-cms-builder__panel-section {
  padding: var(--cms-figma-pad-xs);
}
body.admin-shell-v2 .admin-cms-builder__section-title {
  min-height: var(--cms-figma-control);
  margin-bottom: var(--cms-figma-pad-xs);
  padding: 0 var(--cms-figma-pad-sm);
  border: 0;
  border-radius: var(--cms-figma-radius);
  background: transparent;
  font-size: var(--admin-fs-sm);
  line-height: var(--admin-lh-sm);
}
body.admin-shell-v2 .admin-cms-builder__section-title--layers {
  justify-content: space-between;
}
body.admin-shell-v2 .admin-cms-builder__left-head {
  margin-bottom: var(--cms-figma-pad-xs);
  padding: 0 var(--cms-figma-pad-xs);
}
body.admin-shell-v2 .admin-cms-builder__tree-search {
  margin-bottom: var(--cms-figma-pad-xs);
  padding: 0 var(--cms-figma-pad-xs);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__children {
  padding-left: var(--cms-figma-pad-lg);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children::before,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__children::before {
  inset-inline-start: var(--cms-figma-pad-sm);
  opacity: 0.5;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: var(--cms-figma-pad-xs);
  min-height: var(--cms-figma-row);
  padding: 0 var(--cms-figma-pad-xs);
  border-radius: var(--cms-figma-radius);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  padding: 0;
  text-align: left;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__title-main,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__meta,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__main {
  display: flex;
  align-items: center;
  min-width: 0;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__title-main > span,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__slug,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__name,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__meta {
  display: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__handle,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__title-icon,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__main > i {
  width: 1.6rem;
  min-width: 1.6rem;
  color: var(--builder-text-muted);
  font-size: var(--admin-fs-xs);
  line-height: 1;
  text-align: center;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__actions,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__state {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: var(--cms-figma-control);
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) var(--cms-figma-control);
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button > small {
  align-self: center;
  color: var(--builder-text-muted);
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__state {
  opacity: 0;
  color: var(--builder-text-muted);
  font-size: var(--admin-fs-xs);
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button:hover .admin-cms-layer-tree__state,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button:focus-visible .admin-cms-layer-tree__state,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button.is-active .admin-cms-layer-tree__state {
  opacity: 1;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row.is-active-page,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button.is-active {
  background: var(--builder-panel-selected);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:hover,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:focus-within,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button:hover,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button:focus-visible {
  background: var(--builder-panel-hover);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row.is-active-page:hover,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button.is-active:hover {
  background: color-mix(in srgb, var(--cms-figma-accent) 26%, var(--builder-panel-selected));
}
body.admin-shell-v2 .admin-cms-builder .admin-badge {
  height: 1.6rem;
  padding: 0 var(--cms-figma-pad-2xs);
  font-size: var(--admin-fs-2xs);
  line-height: 1;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__list,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__children {
  gap: 0;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__children,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__children {
  margin-block: 0;
  padding-left: calc(var(--cms-figma-pad-lg) + var(--cms-figma-pad-2xs));
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button {
  box-sizing: border-box;
  min-height: var(--cms-figma-row);
  height: var(--cms-figma-row);
  padding-block: 0;
  gap: var(--cms-figma-pad-xs);
  overflow: hidden;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row {
  grid-template-columns: 1.6rem minmax(0, 1fr) var(--cms-figma-control);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--cms-figma-pad-xs);
  height: 100%;
  min-height: 0;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__title-main {
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__meta {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--cms-figma-pad-2xs);
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__type-badge,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__badge {
  /* One hue per badge; text/background/border are derived from it plus the
     theme-aware --builder-text / --builder-panel so light and dark both stay
     readable from a single rule set (no per-theme duplication). */
  --badge-hue: var(--builder-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 1.6rem;
  min-width: 3.8rem;
  max-width: 5.6rem;
  padding: 0 var(--cms-figma-pad-2xs);
  border: 1px solid color-mix(in srgb, var(--badge-hue) 42%, var(--builder-border));
  border-radius: var(--cms-figma-radius);
  background: color-mix(in srgb, var(--badge-hue) 14%, var(--builder-panel));
  color: color-mix(in srgb, var(--badge-hue) 72%, var(--builder-text));
  font-size: var(--admin-fs-2xs);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__type-badge--page {
  --badge-hue: var(--cms-figma-accent);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__type-badge--view {
  --badge-hue: var(--builder-text-secondary);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__type-badge--group,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__badge--frame {
  --badge-hue: #8b5cf6;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__type-badge--board {
  --badge-hue: var(--admin-success);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__type-badge--external,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__type-badge--anchor,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__badge--layer {
  --badge-hue: var(--admin-info);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__type-badge--redirect {
  --badge-hue: var(--admin-warn);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__type-badge--none,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__type-badge--hidden {
  --badge-hue: var(--builder-text-muted);
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__handle {
  align-self: center;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__actions {
  min-width: var(--cms-figma-control);
  height: 100%;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button {
  grid-template-columns: 4.4rem minmax(0, 1fr) minmax(0, 0.72fr) var(--cms-figma-control);
  align-items: center;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__main,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button > small,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__state {
  height: 100%;
  align-items: center;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__main {
  overflow: hidden;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__main > i,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__title-icon {
  display: none;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button > small {
  display: flex;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__state {
  display: inline-flex;
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row.is-active-page,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button.is-active {
  background: color-mix(in srgb, var(--cms-figma-accent) 42%, var(--builder-panel-selected));
}
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:hover,
body.admin-shell-v2 .admin-cms-builder .admin-page-tree__row:focus-within,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button:hover,
body.admin-shell-v2 .admin-cms-builder .admin-cms-layer-tree__button:focus-visible {
  background: var(--builder-panel-hover);
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-inspector-tabs__panel-scroll {
  overflow: auto;
}
body.admin-shell-v2 .admin-cms-builder__right, body.admin-shell-v2 .admin-cms-builder__right *,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer],
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-context-inspector__menu {
  min-width: 14rem;
  max-width: min(24rem, 100vw - 2rem);
  overflow-wrap: normal;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-context-inspector__menu > button {
  overflow-wrap: normal;
  white-space: nowrap;
}
body.admin-shell-v2 .admin-cms-builder .admin-cms-context-inspector__meta dd {
  overflow-wrap: break-word;
  word-break: normal;
}
body.admin-shell-v2 .admin-cms-builder__right input:not([type=checkbox]):not([type=radio]), body.admin-shell-v2 .admin-cms-builder__right select, body.admin-shell-v2 .admin-cms-builder__right textarea,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] input:not([type=checkbox]):not([type=radio]),
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] select,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 2.7rem;
  font-size: 1.05rem;
  line-height: 1.25;
}
body.admin-shell-v2 .admin-cms-builder__right .cs-trigger, body.admin-shell-v2 .admin-cms-builder__right .mcs-trigger,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .cs-trigger,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .mcs-trigger {
  min-height: 2.7rem;
  padding-inline: 0.7rem 2.4rem;
  border-radius: var(--cms-figma-radius);
  font-size: 1.05rem;
  line-height: 1.25;
}
body.admin-shell-v2 .admin-cms-builder__right .cs-trigger__value, body.admin-shell-v2 .admin-cms-builder__right .mcs-trigger-placeholder,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .cs-trigger__value,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .mcs-trigger-placeholder {
  min-width: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}
body.admin-shell-v2 .admin-cms-builder__right .cs-trigger__arrow,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .cs-trigger__arrow {
  width: 1.4rem;
  min-width: 1.4rem;
}
body.admin-shell-v2 .admin-cms-builder__right .cs-dropdown, body.admin-shell-v2 .admin-cms-builder__right .mcs-dropdown,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .cs-dropdown,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .mcs-dropdown {
  min-width: max(100%, 16rem);
  padding: 0.25rem;
  border-radius: 0.8rem;
}
body.admin-shell-v2 .admin-cms-builder__right .cs-list, body.admin-shell-v2 .admin-cms-builder__right .mcs-list,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .cs-list,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .mcs-list {
  max-height: 16rem;
}
body.admin-shell-v2 .admin-cms-builder__right .cs-option, body.admin-shell-v2 .admin-cms-builder__right .mcs-option,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .cs-option,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .mcs-option {
  min-height: 2.6rem;
  padding: 0 0.7rem;
  border-radius: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.25;
}
body.admin-shell-v2 .admin-cms-builder__right .cs-option__label, body.admin-shell-v2 .admin-cms-builder__right .cs-option__sublabel, body.admin-shell-v2 .admin-cms-builder__right .mcs-option__label, body.admin-shell-v2 .admin-cms-builder__right .mcs-option__title, body.admin-shell-v2 .admin-cms-builder__right .mcs-option__meta,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .cs-option__label,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .cs-option__sublabel,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .mcs-option__label,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .mcs-option__title,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .mcs-option__meta {
  font-size: 1.05rem;
  line-height: 1.25;
}
body.admin-shell-v2 .admin-cms-builder__right .cs-option__check, body.admin-shell-v2 .admin-cms-builder__right .mcs-option__check,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .cs-option__check,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .mcs-option__check {
  width: 1.4rem;
  min-width: 1.4rem;
}
body.admin-shell-v2 .admin-cms-builder__right .cs-dropdown__search-input, body.admin-shell-v2 .admin-cms-builder__right .mcs-search,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .cs-dropdown__search-input,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .mcs-search {
  height: 2.7rem;
  min-height: 2.7rem;
  border-radius: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.25;
}
body.admin-shell-v2 .admin-cms-builder__right .is-cms-overflowing,
body.admin-shell-v2 .admin-cms-builder [data-cms-inspector-drawer] .is-cms-overflowing {
  outline: 1px solid #ff4d4f;
  outline-offset: -1px;
}
body.admin-shell-v2 .admin-cms-builder .cms-template-binding {
  border-top: 0;
  padding-top: 0;
}
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__panel {
  display: grid;
  gap: 0;
}
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__group,
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border: 0;
  border-bottom: 1px solid var(--builder-border);
  border-radius: 0;
  background: var(--builder-panel);
}
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__group-head,
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cms-figma-pad-2xs);
  min-width: 0;
}
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__group-head > strong,
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__header strong {
  color: var(--builder-text);
  font-size: 1.1rem;
  line-height: 1.25;
  font-weight: 700;
}
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__group-head > span,
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__header span {
  color: var(--builder-text-muted);
  font-size: 1rem;
  line-height: 1.25;
}
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__group .admin-form__field,
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__slot .admin-form__field,
body.admin-shell-v2 .admin-cms-builder .cms-collection-slot-format .admin-form__field {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--cms-figma-pad-2xs);
  min-height: 0;
}
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__group .admin-form__hint,
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__slot .admin-form__hint {
  display: block;
  margin: 0;
  color: var(--builder-text-muted);
  font-size: var(--admin-fs-2xs);
  line-height: var(--admin-lh-xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-summary {
  min-height: 0;
  padding: var(--cms-figma-pad-xs) var(--cms-figma-pad-sm);
  border-color: var(--builder-border);
  background: var(--builder-panel-raised);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-summary__badge {
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-summary__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cms-figma-pad-2xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-summary__grid dt,
body.admin-shell-v2 .admin-cms-builder .cms-collection-summary__grid dd {
  font-size: var(--admin-fs-2xs);
  line-height: var(--admin-lh-xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-summary__grid dd {
  display: grid;
  gap: 0.2rem;
  white-space: normal;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-summary__grid dd small {
  color: var(--builder-text-muted);
  font: inherit;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-selected-slot {
  display: grid;
  gap: var(--cms-figma-pad-2xs);
  padding: var(--cms-figma-pad-sm);
  border: 1px solid var(--cms-figma-accent);
  border-radius: var(--cms-figma-radius);
  background: color-mix(in srgb, var(--cms-figma-accent) 14%, transparent);
  color: var(--builder-text);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
  white-space: normal;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map {
  padding: 0;
  border-bottom: 0;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__header {
  padding: 0;
}
body.admin-shell-v2 .admin-cms-builder {
  /* 슬롯 추가 도구줄 — item 코드 + 유형 셀렉트(1행) 위에 풀폭 라벨 버튼(2행) */
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__tools {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--cms-figma-pad-2xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__tools code,
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__tools .admin-form__input {
  min-width: 0;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__tools > .admin-btn {
  grid-column: 1/-1;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--cms-figma-control);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__tools > .admin-btn i {
  font-size: var(--admin-fs-xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slots,
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__slots {
  display: grid;
  gap: var(--cms-figma-pad-xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__slot {
  display: grid;
  gap: var(--cms-figma-pad-xs);
  padding: var(--cms-figma-pad-xs) var(--cms-figma-pad-sm);
  border: 1px solid var(--builder-border);
  border-radius: var(--cms-figma-radius);
  background: var(--builder-panel-raised);
}
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__slot.is-selected-slot {
  border-color: var(--cms-figma-accent);
  background: color-mix(in srgb, var(--cms-figma-accent) 12%, var(--builder-panel-raised));
}
body.admin-shell-v2 .admin-cms-builder .cms-template-binding__slot.is-hidden-slot {
  opacity: 0.58;
}
body.admin-shell-v2 .admin-cms-builder {
  /* 슬롯 = 한 줄 행: 아이콘 | 메타(라벨 + 상태칩) | 편집 | ⋯ */
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--cms-figma-pad-xs);
  min-width: 0;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  color: var(--builder-text-secondary);
  font-size: var(--admin-fs-xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-meta {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  justify-items: start;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-meta > strong {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--builder-text);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
  font-weight: 600;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-meta > [data-slot-path-chip] {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.6rem;
  border-radius: 999px;
  font-size: var(--admin-fs-2xs);
  line-height: 1.9;
}
body.admin-shell-v2 .admin-cms-builder [data-slot-path-chip][data-state=unmapped] {
  background: color-mix(in srgb, var(--builder-text-muted) 18%, transparent);
  color: var(--builder-text-muted);
}
body.admin-shell-v2 .admin-cms-builder [data-slot-path-chip][data-state=mapped] {
  background: color-mix(in srgb, var(--cms-figma-accent) 18%, transparent);
  color: color-mix(in srgb, var(--cms-figma-accent) 70%, var(--builder-text));
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-row > [data-template-binding-slot-edit] {
  white-space: nowrap;
}
body.admin-shell-v2 .admin-cms-builder {
  /* ⋯ 오버플로 메뉴 (정렬/복제/숨김/삭제) */
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-more {
  position: relative;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-more > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--cms-figma-radius);
  color: var(--builder-text-secondary);
  cursor: pointer;
  list-style: none;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-more > summary::-webkit-details-marker {
  display: none;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-more[open] > summary {
  background: var(--builder-panel-hover);
  color: var(--builder-text);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.2rem);
  z-index: 30;
  display: grid;
  gap: 0.1rem;
  min-width: 15rem;
  padding: 0.4rem;
  border: 1px solid var(--builder-border);
  border-radius: var(--cms-figma-radius);
  background: var(--builder-panel-raised);
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.28);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--cms-figma-radius);
  background: transparent;
  color: var(--builder-text);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
  text-align: left;
  cursor: pointer;
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-menu button:hover {
  background: var(--builder-panel-hover);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-menu button i {
  width: 1.4rem;
  text-align: center;
  color: var(--builder-text-secondary);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-menu button.is-danger {
  color: var(--admin-error, #ff6b6b);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-template-map__slot-menu button.is-danger i {
  color: inherit;
}
body.admin-shell-v2 .admin-cms-builder .cms-field-browser {
  min-height: 0;
  border-color: var(--builder-border);
  border-radius: var(--cms-figma-radius);
  background: var(--builder-panel-raised);
}
body.admin-shell-v2 .admin-cms-builder .cms-field-browser__summary {
  min-height: var(--cms-figma-field);
  padding: 0 var(--cms-figma-pad-sm);
  color: var(--builder-text);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-field-browser__body {
  display: grid;
  gap: var(--cms-figma-pad-xs);
  max-height: 18rem;
  overflow: auto;
  padding: 0 var(--cms-figma-pad-sm) var(--cms-figma-pad-sm);
}
body.admin-shell-v2 .admin-cms-builder .cms-field-browser__search {
  margin: 0;
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-field-browser__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cms-figma-pad-xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-field-browser__group {
  color: var(--builder-text-secondary);
  font-size: var(--admin-fs-2xs);
  line-height: var(--admin-lh-xs);
  font-weight: 700;
}
body.admin-shell-v2 .admin-cms-builder .cms-field-browser__item {
  display: grid;
  gap: var(--cms-figma-pad-2xs);
  width: 100%;
  text-align: left;
  padding: var(--cms-figma-pad-xs);
  border-color: var(--builder-border);
  border-radius: var(--cms-figma-radius);
  background: var(--builder-panel);
  color: inherit;
  cursor: pointer;
}
body.admin-shell-v2 .admin-cms-builder .cms-field-browser__item strong,
body.admin-shell-v2 .admin-cms-builder .cms-field-browser__item code,
body.admin-shell-v2 .admin-cms-builder .cms-field-browser__item em {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-slot-format {
  padding-top: var(--cms-figma-pad-sm);
  border-top-color: var(--builder-border);
}
body.admin-shell-v2 .admin-cms-builder .cms-collection-slot-format summary {
  min-height: var(--cms-figma-control);
  color: var(--builder-text-secondary);
  font-size: var(--admin-fs-xs);
  line-height: var(--admin-lh-xs);
}

/* CMS 슬롯 편집 모달 — #app-modal-root(body 직속)이라 .admin-cms-builder 밖.
   빌더 --builder-* 변수는 여기 닿지 않으므로 body.admin-shell-v2 에 정의된
   --cms-figma-* / --admin-* 토큰만 사용한다. 모달 셸/백드롭은 _app-modal.scss. */
body.admin-shell-v2 .cms-slot-modal__body {
  display: grid;
  gap: 1.2rem;
}

body.admin-shell-v2 .cms-slot-modal__body .admin-form__field {
  display: grid;
  gap: 0.4rem;
}

body.admin-shell-v2 .cms-slot-modal__body [data-slot-modal-field],
body.admin-shell-v2 .cms-slot-modal__body [data-slot-modal-fixed] {
  display: grid;
  gap: 0.8rem;
}

body.admin-shell-v2 .cms-slot-modal__format {
  display: grid;
  gap: 0.8rem;
}

body.admin-shell-v2 .cms-slot-modal__format > summary {
  color: var(--cms-figma-text-secondary);
  font-size: var(--admin-fs-sm);
  cursor: pointer;
}

body.admin-shell-v2 .cms-slot-modal__browser {
  border: 1px solid var(--cms-figma-border);
  border-radius: var(--cms-figma-radius);
  background: var(--cms-figma-panel-raised);
}

body.admin-shell-v2 .cms-slot-modal__browser > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  color: var(--cms-figma-text);
  font-size: var(--admin-fs-sm);
  cursor: pointer;
}

body.admin-shell-v2 .cms-slot-modal__browser input[type=search] {
  width: 100%;
  min-height: 3.2rem;
  padding: 0 0.8rem;
  border: 1px solid var(--cms-figma-border);
  border-radius: var(--cms-figma-radius);
  background: var(--cms-figma-panel);
  color: var(--cms-figma-text);
  font: inherit;
}

body.admin-shell-v2 .cms-slot-modal__browser .cms-field-browser__search {
  display: grid;
  gap: 0.3rem;
  font-size: var(--admin-fs-xs);
  color: var(--cms-figma-text-secondary);
}

body.admin-shell-v2 .cms-slot-modal__browser .cms-field-browser__body {
  display: grid;
  gap: 0.6rem;
  max-height: 24rem;
  overflow: auto;
  padding: 0 0.8rem 0.8rem;
}

body.admin-shell-v2 .cms-slot-modal__browser .cms-field-browser__list {
  display: grid;
  gap: 0.4rem;
}

body.admin-shell-v2 .cms-slot-modal__browser .cms-field-browser__group {
  color: var(--cms-figma-text-secondary);
  font-size: var(--admin-fs-2xs);
  font-weight: 700;
}

body.admin-shell-v2 .cms-slot-modal__browser .cms-field-browser__item {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--cms-figma-border);
  border-radius: var(--cms-figma-radius);
  background: var(--cms-figma-panel);
  color: var(--cms-figma-text);
  text-align: left;
  cursor: pointer;
}

body.admin-shell-v2 .cms-slot-modal__browser .cms-field-browser__item:hover {
  border-color: var(--cms-figma-accent);
}

body.admin-shell-v2 .cms-slot-modal__browser .cms-field-browser__item code {
  color: var(--cms-figma-text-secondary);
  font-size: var(--admin-fs-2xs);
}

body.admin-shell-v2 .cms-slot-modal__browser .cms-field-browser__item em {
  color: var(--cms-figma-text-muted);
  font-size: var(--admin-fs-2xs);
  font-style: normal;
}

body.admin-shell-v2 .admin-cms-builder-canvas {
  min-height: 100%;
  border: 1px solid #d0d0d0;
  border-radius: 0;
  background: var(--figma-page-frame);
  color: #1f2328;
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder-canvas__head {
  min-height: var(--cms-figma-toolbar-height);
  margin: 0;
  padding: 0 var(--cms-figma-pad);
  border-color: #d0d0d0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: var(--figma-page-frame);
  box-shadow: none;
}
body.admin-shell-v2 .admin-cms-builder-canvas__title {
  color: #1f2328;
  font-size: var(--admin-fs-lg);
  line-height: var(--admin-lh-lg);
}
body.admin-shell-v2 .admin-cms-builder-canvas__slug {
  border: 1px solid #d0d0d0;
  border-radius: var(--cms-figma-radius);
  background: #f4f4f4;
  color: #5f5f5f;
}
body.admin-shell-v2 .admin-cms-builder-canvas .admin-cms-live,
body.admin-shell-v2 .admin-cms-builder-canvas .admin-cms-live-sections {
  background: var(--figma-page-frame);
}

@media (max-width: 1180px) {
  body.admin-shell-v2 .admin-cms-builder {
    height: auto;
    overflow: visible;
  }
  body.admin-shell-v2 .admin-cms-builder__body {
    grid-template-columns: var(--cms-figma-sidebar-width) minmax(0, 1fr);
  }
  body.admin-shell-v2 .admin-cms-builder__right {
    width: min(48rem, 100vw - var(--admin-space-2xl));
  }
}
@media (max-width: 720px) {
  body.admin-shell-v2 .admin-cms-builder__body {
    grid-template-columns: minmax(0, 1fr);
  }
  body.admin-shell-v2 .admin-cms-builder__left, body.admin-shell-v2 .admin-cms-builder__center {
    overflow: visible;
  }
  body.admin-shell-v2 .admin-cms-builder__center {
    min-height: 42rem;
  }
}
.admin-cms-template-library__container {
  width: 100%;
}
.admin-cms-template-library__inner {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg, 1.6rem);
}
.admin-cms-template-library__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--admin-space-md, 1rem);
  align-items: end;
}
@media (max-width: 991px) {
  .admin-cms-template-library__head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
.admin-cms-template-library__filters {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 0.48fr) auto;
  gap: var(--admin-space-md, 1rem);
  align-items: end;
}
@media (max-width: 991px) {
  .admin-cms-template-library__filters {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.62fr);
  }
}
@media (max-width: 767px) {
  .admin-cms-template-library__filters {
    grid-template-columns: 1fr;
  }
}
.admin-cms-template-library__filter {
  min-width: 0;
}
.admin-cms-template-library__filter-actions {
  display: flex;
  gap: var(--admin-space-xs, 0.6rem);
  align-items: center;
}
@media (max-width: 991px) {
  .admin-cms-template-library__filter-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
}
@media (max-width: 767px) {
  .admin-cms-template-library__filter-actions {
    align-items: stretch;
    flex-direction: column;
  }
}
.admin-cms-template-library__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-2xs, 0.4rem);
  min-height: 4.2rem;
  padding: 0 var(--admin-space-md, 1rem);
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-white, #fff);
  color: var(--admin-text-secondary, #475569);
  font-size: var(--admin-fs-sm, 1.4rem);
}
.admin-cms-template-library__summary strong {
  color: var(--admin-text, #111827);
  font-size: var(--admin-fs-lg, 1.8rem);
}
@media (max-width: 991px) {
  .admin-cms-template-library__summary {
    justify-content: flex-start;
  }
}
.admin-cms-template-library__body {
  min-width: 0;
}
.admin-cms-template-library__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
  gap: var(--admin-space-lg, 1.6rem);
}
@media (max-width: 1279px) {
  .admin-cms-template-library__grid {
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  }
}
@media (max-width: 767px) {
  .admin-cms-template-library__grid {
    grid-template-columns: 1fr;
  }
}
.admin-cms-template-library__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--admin-border, #e5e7eb);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-white, #fff);
}
.admin-cms-template-library__preview {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-bottom: 1px solid var(--admin-border, #e5e7eb);
  background: var(--admin-grey-50, #f9fafb);
}
.admin-cms-template-library__preview iframe {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 200%;
  border: 0;
  pointer-events: none;
  transform: scale(0.5);
  transform-origin: top left;
}
.admin-cms-template-library__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm, 0.8rem);
  padding: var(--admin-space-md, 1rem);
}
.admin-cms-template-library__card-kicker {
  display: flex;
  align-items: center;
}
.admin-cms-template-library__card-kicker span {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0 var(--admin-space-xs, 0.6rem);
  border: 1px solid var(--admin-primary-border, #dbeafe);
  border-radius: var(--admin-radius-xs, 0.4rem);
  color: var(--admin-primary, #2563eb);
  background: var(--admin-primary-light, #eff6ff);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 800;
}
.admin-cms-template-library__card-title {
  margin: 0;
  color: var(--admin-text, #111827);
  font-size: var(--admin-fs-lg, 1.8rem);
  font-weight: 800;
  line-height: 1.25;
  word-break: keep-all;
}
.admin-cms-template-library__slug {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--admin-text-muted, #6b7280);
  font-size: var(--admin-fs-xs, 1.2rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-cms-template-library__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-space-xs, 0.6rem);
  margin: 0;
}
.admin-cms-template-library__meta div {
  min-width: 0;
  padding: var(--admin-space-sm, 0.8rem);
  border: 1px solid var(--admin-border-light, #eef2f7);
  border-radius: var(--admin-radius-xs, 0.4rem);
  background: var(--admin-grey-50, #f9fafb);
}
.admin-cms-template-library__meta dt,
.admin-cms-template-library__meta dd {
  margin: 0;
}
.admin-cms-template-library__meta dt {
  color: var(--admin-text-muted, #6b7280);
  font-size: var(--admin-fs-xs, 1.2rem);
  font-weight: 700;
}
.admin-cms-template-library__meta dd {
  color: var(--admin-text, #111827);
  font-size: var(--admin-fs-md, 1.5rem);
  font-weight: 800;
}
.admin-cms-template-library__actions {
  display: flex;
  justify-content: flex-start;
}
.admin-cms-template-library__empty {
  border: 1px dashed var(--admin-border, #e5e7eb);
  border-radius: var(--admin-radius-sm, 0.6rem);
  background: var(--admin-white, #fff);
}

.admin-cms-site-editor-index__filters {
  display: flex;
  align-items: end;
  gap: var(--admin-space-sm);
  margin-block: var(--admin-space-md);
}
.admin-cms-site-editor-index__search {
  min-width: min(42rem, 100%);
}
.admin-cms-site-editor-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  gap: var(--admin-space-md);
}
.admin-cms-site-editor-index__card {
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  background: var(--admin-surface);
}
.admin-cms-site-editor-index__preview {
  aspect-ratio: 16/9;
  background: var(--admin-bg-soft);
  border-bottom: 1px solid var(--admin-border);
}
.admin-cms-site-editor-index__preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.admin-cms-site-editor-index__body {
  display: grid;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-md);
}
.admin-cms-site-editor-index__body h2 {
  margin: 0;
  color: var(--admin-text);
  font: inherit;
  font-weight: 700;
}
.admin-cms-site-editor-index__body code,
.admin-cms-site-editor-index__body p {
  margin: 0;
  color: var(--admin-text-muted);
}
.admin-cms-site-editor-index__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-xs);
  margin-top: var(--admin-space-sm);
}

.admin-cms-site-editor__form {
  display: grid;
  gap: var(--admin-space-md);
}
.admin-cms-site-editor__meta {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--admin-space-sm);
  padding: var(--admin-space-md);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  background: var(--admin-surface);
}
.admin-cms-site-editor__meta .admin-form__field:nth-child(1),
.admin-cms-site-editor__meta .admin-form__field:nth-child(6) {
  grid-column: span 2;
}
.admin-cms-site-editor__workspace {
  display: grid;
  grid-template-columns: 22rem minmax(0, 1fr) 30rem;
  min-height: 72rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  background: var(--admin-surface);
  overflow: hidden;
}
.admin-cms-site-editor__palette, .admin-cms-site-editor__inspector {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  padding: var(--admin-space-md);
  background: var(--admin-bg-soft);
  overflow: auto;
}
.admin-cms-site-editor__palette {
  border-right: 1px solid var(--admin-border);
}
.admin-cms-site-editor__inspector {
  border-left: 1px solid var(--admin-border);
}
.admin-cms-site-editor__inspector label {
  display: grid;
  gap: var(--admin-space-2xs);
  color: var(--admin-text-muted);
  font-weight: 600;
}
.admin-cms-site-editor__inspector input,
.admin-cms-site-editor__inspector textarea,
.admin-cms-site-editor__inspector select {
  width: 100%;
  min-height: 3.6rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-surface);
  color: var(--admin-text);
  padding: 0 var(--admin-space-xs);
}
.admin-cms-site-editor__inspector textarea {
  min-height: 8rem;
  padding-block: var(--admin-space-xs);
  resize: vertical;
}
.admin-cms-site-editor__panel-title {
  color: var(--admin-text);
  font-weight: 800;
}
.admin-cms-site-editor__tool, .admin-cms-site-editor__layer {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  width: 100%;
  min-height: 3.8rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-surface);
  color: var(--admin-text);
  padding: 0 var(--admin-space-sm);
  text-align: left;
  cursor: pointer;
}
.admin-cms-site-editor__tool.is-active, .admin-cms-site-editor__tool:hover, .admin-cms-site-editor__layer.is-active, .admin-cms-site-editor__layer:hover {
  border-color: var(--admin-primary);
  color: var(--admin-primary);
}
.admin-cms-site-editor__layers {
  display: grid;
  gap: var(--admin-space-xs);
  margin-top: var(--admin-space-md);
}
.admin-cms-site-editor__stage {
  min-width: 0;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.08) 1px, transparent 1px), linear-gradient(0deg, rgba(15, 23, 42, 0.08) 1px, transparent 1px), #eef2f7;
  background-size: 24px 24px;
}
.admin-cms-site-editor__stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-sm);
  padding: var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-border);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
}
.admin-cms-site-editor__breakpoints {
  display: inline-flex;
  gap: var(--admin-space-2xs);
}
.admin-cms-site-editor__breakpoints button {
  min-height: 3.2rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-surface);
  color: var(--admin-text-muted);
  padding: 0 var(--admin-space-sm);
  cursor: pointer;
}
.admin-cms-site-editor__breakpoints button.is-active {
  border-color: var(--admin-primary);
  background: var(--admin-primary);
  color: #fff;
}
.admin-cms-site-editor__viewport {
  display: grid;
  place-items: start center;
  height: calc(100% - 5.4rem);
  overflow: auto;
  padding: var(--admin-space-xl);
}
.admin-cms-site-editor__artboard {
  position: relative;
  box-shadow: var(--admin-shadow-lg);
  transform-origin: top center;
}
.admin-cms-site-editor__node {
  position: absolute;
  display: block;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.58);
  padding: var(--admin-space-xs);
  text-align: inherit;
  cursor: grab;
  overflow: hidden;
}
.admin-cms-site-editor__node.is-selected {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 2px rgba(11, 125, 216, 0.18);
}
.admin-cms-site-editor__resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--admin-radius-xs);
  background: var(--admin-primary);
  cursor: nwse-resize;
}
.admin-cms-site-editor__quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-space-xs);
}
.admin-cms-site-editor__empty {
  margin: 0;
  color: var(--admin-text-muted);
}

@media (max-width: 1200px) {
  .admin-cms-site-editor__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-cms-site-editor__workspace {
    grid-template-columns: 18rem minmax(0, 1fr);
  }
  .admin-cms-site-editor__inspector {
    grid-column: 1/-1;
    border-left: 0;
    border-top: 1px solid var(--admin-border);
  }
}
.admin-menu-categories__add-section {
  margin-top: var(--admin-space-3xl);
}
.admin-menu-categories__add-fields {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xl);
  margin-bottom: var(--admin-space-xl);
}
.admin-menu-categories__edit-fields {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg);
  margin-bottom: var(--admin-space-lg);
}
.admin-menu-categories__edit-actions {
  display: flex;
  gap: var(--admin-space-sm);
}

.admin-menu-tags__add-section {
  margin-top: var(--admin-space-3xl);
}
.admin-menu-tags__add-fields {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xl);
  margin-bottom: var(--admin-space-xl);
}
.admin-menu-tags__edit-fields {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg);
  margin-bottom: var(--admin-space-lg);
}
.admin-menu-tags__edit-actions {
  display: flex;
  gap: var(--admin-space-sm);
}
.admin-menu-tags__inline-form {
  margin-top: var(--admin-space-sm);
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-grey-50);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
}
.admin-menu-tags__color-chip {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  background: var(--chip-color, var(--admin-grey-200));
}

/* 세트구성 폼 — 구성 메뉴 카드 행 */
.admin-set-item {
  position: relative;
  margin-bottom: var(--admin-space-lg);
  padding: var(--admin-space-lg);
  background: var(--admin-surface, #fff);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-lg, 8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-set-item:hover {
  border-color: var(--admin-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.admin-set-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space);
  padding-bottom: var(--admin-space);
  border-bottom: 1px dashed var(--admin-border-light);
}
.admin-set-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--admin-space-sm);
  background: var(--admin-grey-100);
  color: var(--admin-grey-700);
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  line-height: 1;
}
.admin-set-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space);
}
.admin-set-item {
  /* 카드 내부 inline 블록 간격 */
}
.admin-set-item .admin-form__block--inline {
  margin-bottom: 0;
}

#set-items-list:empty + #set-item-add,
#set-items-list:empty::before {
  content: "";
}

#set-items-list:empty::before {
  display: block;
  padding: var(--admin-space-xl) var(--admin-space-lg);
  margin-bottom: var(--admin-space-lg);
  content: "+ 메뉴 추가 버튼을 눌러 구성 메뉴를 추가하세요.";
  color: var(--admin-grey-500);
  background: var(--admin-grey-50);
  border: 1px dashed var(--admin-border-light);
  border-radius: var(--admin-radius);
  text-align: center;
  font-size: 13px;
}

.admin-form__inline-action {
  margin-left: var(--admin-space);
  vertical-align: middle;
}

.admin-mail-settings__test {
  margin-top: var(--admin-space-2xl);
  padding-top: var(--admin-space-2xl);
  border-top: 1px solid var(--admin-border-light);
}

.admin-contact-thread {
  margin-top: 24px;
  padding: 24px;
  background: var(--admin-surface, #fff);
  border: 1px solid var(--admin-border-light, #e5e7eb);
  border-radius: 10px;
}
.admin-contact-thread__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--admin-border-light, #e5e7eb);
}
.admin-contact-thread__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--admin-text, #111);
}
.admin-contact-thread__count {
  color: var(--admin-text-secondary, #6b7280);
  font-weight: 500;
}
.admin-contact-thread__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--admin-text-secondary, #6b7280);
  background: var(--admin-bg-subtle, #f9fafb);
  border-radius: 8px;
  font-size: 14px;
}
.admin-contact-thread__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-contact-thread__form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--admin-border-light, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-contact-thread[hidden] {
  display: none !important;
}

.admin-contact-bubble {
  position: relative;
  padding: 14px 16px 14px 18px;
  background: var(--admin-bg-subtle, #f9fafb);
  border: 1px solid var(--admin-border-light, #e5e7eb);
  border-radius: 10px;
  overflow-wrap: anywhere;
}
.admin-contact-bubble::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  background: var(--admin-primary, #0076cb);
  border-radius: 2px;
}
.admin-contact-bubble--admin {
  background: #fff;
}
.admin-contact-bubble__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--admin-text-secondary, #6b7280);
}
.admin-contact-bubble__author {
  font-weight: 600;
  color: var(--admin-text, #111);
}
.admin-contact-bubble__time {
  color: var(--admin-text-muted, #9ca3af);
  font-variant-numeric: tabular-nums;
}
.admin-contact-bubble__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--admin-text, #111);
  white-space: pre-wrap;
  word-break: break-word;
}
.admin-contact-bubble__files {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.admin-contact-bubble__files li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-contact-bubble__files a {
  color: var(--admin-primary-text, #1d4ed8);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-contact-bubble__files a:hover {
  text-decoration: underline;
}
.admin-contact-bubble__file-size {
  color: var(--admin-text-muted, #9ca3af);
  font-variant-numeric: tabular-nums;
}

.admin-multi-file-input__input {
  width: 100%;
  padding: 10px 12px;
  background: var(--admin-surface, #fff);
  border: 1px dashed var(--admin-border, #d1d5db);
  border-radius: 8px;
  font-size: 14px;
  color: var(--admin-text, #111);
}
.admin-multi-file-input__input:focus {
  outline: none;
  border-color: var(--admin-border-focus, var(--admin-primary, #0076cb));
}
.admin-multi-file-input__input::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  background: var(--admin-primary, #0076cb);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.admin-multi-file-input__input::file-selector-button:hover {
  background: var(--admin-primary-hover, #1d4ed8);
}

.admin-chat-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--admin-surface, #fff);
  border: 1px solid var(--admin-border, #d1d5db);
  border-radius: 24px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-chat-composer:focus-within {
  border-color: var(--admin-border-focus, var(--admin-primary, #0076cb));
  box-shadow: 0 0 0 3px rgba(0, 118, 203, 0.12);
}
.admin-chat-composer__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 0;
}
.admin-chat-composer__attachments[hidden] {
  display: none;
}
.admin-chat-composer__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--admin-bg-subtle, #f3f4f6);
  border: 1px solid var(--admin-border-light, #e5e7eb);
  border-radius: 12px;
  padding: 4px 8px 4px 6px;
  font-size: 12px;
  max-width: 220px;
  color: var(--admin-text, #111);
}
.admin-chat-composer__chip-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
}
.admin-chat-composer__chip-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--admin-surface, #fff);
  color: var(--admin-text-secondary, #6b7280);
  flex: 0 0 auto;
}
.admin-chat-composer__chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-chat-composer__chip-remove {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--admin-text-secondary, #6b7280);
  padding: 2px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  border-radius: 4px;
}
.admin-chat-composer__chip-remove:hover {
  color: var(--admin-text, #111);
  background: rgba(0, 0, 0, 0.04);
}
.admin-chat-composer__input {
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font: inherit;
  line-height: 1.5;
  padding: 6px 4px;
  max-height: 240px;
  overflow-y: auto;
  color: var(--admin-text, #111);
}
.admin-chat-composer__input::placeholder {
  color: var(--admin-text-muted, #9ca3af);
}
.admin-chat-composer__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-chat-composer__attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--admin-bg-subtle, #f3f4f6);
  color: var(--admin-text-secondary, #374151);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex: 0 0 auto;
}
.admin-chat-composer__attach:hover {
  background: var(--admin-border-light, #e5e7eb);
  color: var(--admin-text, #111);
}
.admin-chat-composer__attach i {
  font-size: 14px;
  line-height: 1;
}
.admin-chat-composer__attach-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-chat-composer__send {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  line-height: 1;
  gap: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-primary, #0076cb);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.admin-chat-composer__send:hover:not(:disabled) {
  background: var(--admin-primary-hover, #1d4ed8);
}
.admin-chat-composer__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.admin-chat-composer__send-icon {
  font-size: 14px;
  line-height: 1;
}
.admin-chat-composer__send .admin-form__loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
}
.admin-chat-composer__send .admin-form__loader:not([hidden]) {
  display: inline-flex;
}
.admin-chat-composer__send:has(.admin-form__loader:not([hidden])) .admin-chat-composer__send-icon {
  visibility: hidden;
}

.admin-chat-composer.admin-chat-composer--dragover {
  border-color: var(--admin-border-focus, var(--admin-primary, #0076cb));
  background: rgba(0, 118, 203, 0.04);
  box-shadow: 0 0 0 3px rgba(0, 118, 203, 0.15);
}

.admin-contact-thread__form.admin-chat-composer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--admin-border-light, #e5e7eb);
}

.admin-popup-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40rem;
  gap: var(--admin-space-2xl);
  align-items: start;
}
@media (max-width: 1200px) {
  .admin-popup-builder {
    grid-template-columns: 1fr;
  }
}
.admin-popup-builder__main {
  min-width: 0;
}
.admin-popup-builder[data-popup-template=text-notice] [data-popup-fieldgroup=media] {
  display: none;
}

.admin-popup-bp {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  margin-bottom: var(--admin-space-md);
  background: var(--admin-surface);
}
.admin-popup-bp__summary {
  cursor: pointer;
  padding: var(--admin-space-md) var(--admin-space-lg);
  font-weight: 600;
  color: var(--admin-text);
  list-style: none;
}
.admin-popup-bp__summary::-webkit-details-marker {
  display: none;
}
.admin-popup-bp__summary::before {
  content: "▸";
  margin-right: var(--admin-space-xs);
  color: var(--admin-text-muted);
}
.admin-popup-bp[open] > .admin-popup-bp__summary::before {
  content: "▾";
}
.admin-popup-bp__body {
  padding: var(--admin-space-lg);
  border-top: 1px solid var(--admin-border-light);
}

.admin-popup-days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-xs);
}
.admin-popup-days__item {
  position: relative;
}
.admin-popup-days__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.admin-popup-days__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-full);
  cursor: pointer;
  color: var(--admin-text-secondary);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.admin-popup-days__item input:checked + span {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: #fff;
}
.admin-popup-days__item input:focus-visible + span {
  outline: 2px solid var(--admin-border-focus);
  outline-offset: 2px;
}

.admin-popup-builder__preview {
  position: sticky;
  top: var(--admin-space-2xl);
  background: var(--admin-surface);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-lg);
  padding: var(--admin-space-lg);
}
@media (max-width: 1200px) {
  .admin-popup-builder__preview {
    position: static;
  }
}

.admin-popup-preview__head {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space-md);
}
.admin-popup-preview__switches {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-sm);
  flex-wrap: wrap;
}
.admin-popup-preview__devices {
  display: inline-flex;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  overflow: hidden;
}
.admin-popup-preview__device {
  padding: var(--admin-space-2xs) var(--admin-space-sm);
  background: var(--admin-surface);
  border: 0;
  cursor: pointer;
  color: var(--admin-text-secondary);
  font-size: 1.2rem;
}
.admin-popup-preview__device.is-active {
  background: var(--admin-primary);
  color: #fff;
}
.admin-popup-preview__device + .admin-popup-preview__device {
  border-left: 1px solid var(--admin-border);
}
.admin-popup-preview__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(45deg, var(--admin-bg-soft) 25%, transparent 25%) 0 0/16px 16px, var(--admin-surface-2);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  overflow: hidden;
}
.admin-popup-preview__stage[data-device=tablet] {
  aspect-ratio: 4/5;
  max-width: 32rem;
  margin-inline: auto;
}
.admin-popup-preview__stage[data-device=mobile] {
  aspect-ratio: 9/16;
  max-width: 22rem;
  margin-inline: auto;
}
.admin-popup-preview__canvas {
  position: absolute;
  inset: 0;
}
.admin-popup-preview__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-muted);
  font-size: 1.2rem;
  text-align: center;
  padding: var(--admin-space-lg);
}
.admin-popup-preview__hint {
  margin-top: var(--admin-space-sm);
  font-size: 1.1rem;
  color: var(--admin-text-muted);
}

.pp-mock {
  --pp-tx: 0;
  --pp-ty: 0;
  position: absolute;
  width: 20rem;
  max-width: 90%;
  background: #fff;
  color: #1a1a1a;
  border-radius: var(--admin-radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  cursor: grab;
  user-select: none;
  overflow: hidden;
}
.pp-mock.is-dragging {
  cursor: grabbing;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.pp-mock__inner {
  position: relative;
}
.pp-mock__close {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.pp-mock__image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  background: repeating-linear-gradient(45deg, #e9edf3, #e9edf3 8px, #dfe5ee 8px, #dfe5ee 16px);
  color: #94a3b8;
  font-size: 1.1rem;
}
.pp-mock__body {
  padding: var(--admin-space-md);
}
.pp-mock__subtitle {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--admin-primary);
}
.pp-mock__title {
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}
.pp-mock__desc {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  color: #4b5563;
  line-height: 1.45;
}
.pp-mock__cta {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: var(--admin-primary);
  color: #fff;
  border-radius: var(--admin-radius-sm);
  font-size: 1.2rem;
}
.pp-mock__today {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: var(--admin-space-xs) var(--admin-space-md);
  border-top: 1px solid #eef1f5;
  font-size: 1.1rem;
  color: #6b7280;
}
.pp-mock[style*="--pp-tx"] {
  transform: translate(var(--pp-tx), var(--pp-ty));
}
.pp-mock--image-only .pp-mock__image {
  min-height: 12rem;
}
.pp-mock--full-modal {
  width: 28rem;
}
.pp-mock--split-media .pp-mock__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.admin-inline-form {
  display: inline;
  margin: 0;
}

.admin-access-control {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xl);
}
.admin-access-control__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--admin-space-2xl) var(--admin-space-4xl);
  padding: var(--admin-space-xl);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow-card);
}
@media (max-width: 1024px) {
  .admin-access-control__panel {
    flex-direction: column;
    gap: var(--admin-space-xl);
  }
}
.admin-access-control__stat {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
}
.admin-access-control__stat-label i {
  color: var(--admin-text-muted);
  margin-right: var(--admin-space-2xs);
}
.admin-access-control__stat-ipline {
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
  min-height: 2.4rem;
}
.admin-access-control__stat-ip {
  font-family: var(--admin-font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  color: var(--admin-text);
}
.admin-access-control__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-xs);
  margin-left: auto;
}
.admin-access-control__pills i {
  margin-right: var(--admin-space-3xs);
}
@media (max-width: 1024px) {
  .admin-access-control__pills {
    margin-left: 0;
  }
}
.admin-access-control__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-sm);
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-warn-bg);
  border: 1px solid var(--admin-warn-border);
  border-radius: var(--admin-radius);
  color: var(--admin-warn-text);
}
.admin-access-control__notice i {
  color: var(--admin-warn);
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.admin-access-control__notice code {
  background: rgba(var(--admin-warn-rgb), 0.12);
  padding: 0 var(--admin-space-2xs);
  border-radius: var(--admin-radius-sm);
}
.admin-access-control__card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow-card);
}
.admin-access-control__card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space);
  padding: var(--admin-space-lg) var(--admin-space-xl);
  border-bottom: 1px solid var(--admin-border-light);
  background: linear-gradient(180deg, var(--admin-grey-50) 0%, transparent 100%);
  border-top-left-radius: var(--admin-radius-lg);
  border-top-right-radius: var(--admin-radius-lg);
}
@media (max-width: 1024px) {
  .admin-access-control__card-head {
    padding: var(--admin-space-md) var(--admin-space-lg);
  }
}
.admin-access-control__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  flex-shrink: 0;
  border-radius: var(--admin-radius);
  background: var(--admin-primary-light);
  color: var(--admin-primary);
}
.admin-access-control__card-icon i {
  color: var(--admin-primary);
}
.admin-access-control__card-headtxt {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
  min-width: 0;
}
.admin-access-control__card-title {
  color: var(--admin-text);
  margin: 0;
}
.admin-access-control__card-desc {
  margin: 0;
}
.admin-access-control__card-toggle {
  margin-left: auto;
  flex-shrink: 0;
  padding-top: var(--admin-space-3xs);
}
.admin-access-control__card-body {
  padding: var(--admin-space-xl);
}
@media (max-width: 1024px) {
  .admin-access-control__card-body {
    padding: var(--admin-space-lg);
  }
}
.admin-access-control__form {
  max-width: none;
  margin-bottom: var(--admin-space-xl);
}
.admin-access-control__fields {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg);
}
.admin-access-control__fields .admin-form__block {
  margin-bottom: 0;
}
.admin-access-control__ip-methods {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
}
.admin-access-control__ip-methods .admin-access-control__cidr {
  flex: 1 1 28rem;
  min-width: 0;
}
@media (max-width: 544px) {
  .admin-access-control__ip-methods .admin-access-control__cidr {
    flex-basis: 100%;
  }
}
.admin-access-control__or {
  white-space: nowrap;
}
.admin-access-control__octets {
  display: flex;
  align-items: center;
  gap: var(--admin-space-2xs);
}
.admin-access-control__octet {
  width: 4.4rem;
  height: var(--admin-size-input-height);
  text-align: center;
  padding: 0 var(--admin-space-2xs);
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  color: var(--admin-text);
}
.admin-access-control__octet:focus-visible {
  outline: none;
  border-color: var(--admin-border-focus);
  box-shadow: var(--admin-focus-ring);
}
.admin-access-control__octet-dot {
  color: var(--admin-text-muted);
  user-select: none;
}
.admin-access-control__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-sm);
  margin-top: var(--admin-space-lg);
}
.admin-access-control__submit {
  margin-left: auto;
}
.admin-access-control__list {
  display: flex;
  flex-direction: column;
}
.admin-access-control__row {
  display: flex;
  align-items: center;
  gap: var(--admin-space-lg);
  padding: var(--admin-space-sm) 0;
}
.admin-access-control__row + .admin-access-control__row {
  border-top: 1px solid var(--admin-border-light);
}
@media (max-width: 544px) {
  .admin-access-control__row {
    flex-wrap: wrap;
    gap: var(--admin-space-xs);
  }
}
.admin-access-control__row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-3xs);
}
.admin-access-control__row-memo {
  color: var(--admin-text-secondary);
}
.admin-access-control__row-meta {
  color: var(--admin-text-muted);
  white-space: nowrap;
}
.admin-access-control__row-actions {
  margin-left: var(--admin-space-md);
  flex-shrink: 0;
}
.admin-access-control__mono {
  font-family: var(--admin-font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  color: var(--admin-text);
}
.admin-access-control__country-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-xs);
  color: var(--admin-text);
}
.admin-access-control__country-cell .locale-flag {
  flex-shrink: 0;
}
.admin-access-control__muted {
  color: var(--admin-text-muted);
}

.admin-slots-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-space-sm) var(--admin-space);
  margin-bottom: var(--admin-space-lg);
}

.admin-slots-toolbar__label {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-slots-calendar__legend {
  margin-left: var(--admin-space);
}

.admin-posts__fc-root {
  margin-top: 2rem;
}

.fc {
  --fc-border-color: var(--admin-border-light);
  --fc-page-bg-color: var(--admin-white);
  --fc-neutral-bg-color: var(--admin-grey-50);
  --fc-today-bg-color: rgba(var(--admin-primary-rgb), 0.05);
  --fc-highlight-color: rgba(var(--admin-primary-rgb), 0.12);
  --fc-event-bg-color: var(--admin-primary);
  --fc-event-border-color: var(--admin-primary);
  --fc-event-text-color: var(--admin-on-primary);
  font-size: var(--admin-fs-body);
  color: var(--admin-text);
}

.fc .fc-scrollgrid {
  border-radius: var(--admin-radius);
  overflow: hidden;
}

.fc .fc-toolbar.fc-header-toolbar {
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.fc .fc-toolbar-title {
  font-size: var(--admin-fs-subtitle);
  font-weight: 700;
  color: var(--admin-text);
  letter-spacing: -0.01em;
}

.fc .fc-button {
  height: 3.2rem;
  padding: 0 1.1rem;
  font-size: var(--admin-fs-base);
  font-weight: 500;
  line-height: 1;
  background: var(--admin-white);
  border: 1px solid var(--admin-border);
  color: var(--admin-text-secondary);
  border-radius: var(--admin-radius-sm);
  box-shadow: none;
  text-transform: none;
  transition: background var(--admin-duration-short) var(--admin-ease), border-color var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.fc .fc-button:hover {
  background: var(--admin-grey-100);
  border-color: var(--admin-border-strong);
  color: var(--admin-text);
}
.fc .fc-button:focus {
  box-shadow: none;
}
.fc .fc-button:focus-visible {
  outline: none;
  box-shadow: var(--admin-focus-ring);
}
.fc .fc-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.fc .fc-button .fc-icon {
  font-size: 1.6rem;
}

.fc .fc-prev-button,
.fc .fc-next-button {
  padding: 0 0.9rem;
  color: var(--admin-text-tertiary);
}

.fc .fc-today-button {
  background: transparent;
  border-color: rgba(var(--admin-primary-rgb), 0.45);
  color: var(--admin-primary-text);
  font-weight: 600;
}
.fc .fc-today-button:hover:not(:disabled) {
  background: var(--admin-primary-light);
  border-color: var(--admin-primary);
  color: var(--admin-primary);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: var(--admin-on-primary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.fc .fc-button-primary:not(:disabled).fc-button-active:hover,
.fc .fc-button-primary:not(:disabled):active:hover {
  background: var(--admin-primary-hover);
  border-color: var(--admin-primary-hover);
  color: var(--admin-on-primary);
}
.fc .fc-button-primary:not(:disabled).fc-button-active:focus-visible,
.fc .fc-button-primary:not(:disabled):active:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.3);
}

.fc .fc-col-header-cell {
  background: var(--admin-grey-50);
  padding: 0.8rem 0;
}

.fc .fc-col-header-cell-cushion {
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  color: var(--admin-text-secondary);
  text-decoration: none;
  padding: 0.4rem;
}

.fc .fc-col-header-cell.fc-day-sun .fc-col-header-cell-cushion {
  color: var(--admin-error);
}

.fc .fc-col-header-cell.fc-day-sat .fc-col-header-cell-cushion {
  color: var(--admin-primary);
}

.fc .fc-daygrid-day-frame {
  cursor: pointer;
  min-height: 8rem;
  transition: background var(--admin-duration-short) var(--admin-ease);
}

.fc .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background: var(--admin-grey-50);
}

.fc .fc-daygrid-day-number {
  font-size: var(--admin-fs-base);
  font-weight: 500;
  color: var(--admin-text);
  padding: 0.5rem 0.7rem;
  text-decoration: none;
}

.fc .fc-day-sun .fc-daygrid-day-number {
  color: var(--admin-error);
}

.fc .fc-day-sat .fc-daygrid-day-number {
  color: var(--admin-primary);
}

.fc .fc-day-other .fc-daygrid-day-number {
  color: var(--admin-text-disabled);
}

.fc .fc-day-today .fc-daygrid-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  margin: 0.3rem 0.4rem;
  padding: 0;
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  border-radius: var(--admin-radius-full);
  font-weight: 700;
}

.fc .fc-daygrid-event {
  cursor: pointer;
  border: none;
  border-radius: var(--admin-radius-xs);
  padding: 0.3rem 0.6rem;
  margin-top: 0.2rem;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(var(--admin-primary-rgb), 0.25);
  transition: filter var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.fc .fc-daygrid-event .fc-event-title {
  font-weight: 600;
}
.fc .fc-daygrid-event:hover {
  filter: brightness(0.93);
  box-shadow: 0 2px 6px rgba(var(--admin-primary-rgb), 0.35);
}
.fc .fc-daygrid-event:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--admin-white), 0 0 0 4px rgba(var(--admin-primary-rgb), 0.55);
}

.fc .fc-daygrid-more-link {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-primary-text);
  cursor: pointer;
}
.fc .fc-daygrid-more-link:hover {
  color: var(--admin-primary);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .fc .fc-toolbar.fc-header-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .fc .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
  }
  .fc .fc-daygrid-day-frame {
    min-height: 6rem;
  }
}
body.admin-shell-v2 :is(.admin-card,
.admin-panel,
.admin-form,
.admin-prefs__section,
.admin-dash-section,
.admin-stat-card,
.admin-table-wrap,
.admin-index-card,
.admin-detail-card,
.admin-detail-grid > *,
.admin-list-section,
.admin-search-panel,
.admin-list-panel,
.admin-ops-card,
.admin-analytics-card,
.admin-project-docs__panel,
.admin-source-card,
.admin-system-log-card,
.admin-guide-section,
.admin-components-showcase__section,
.admin-access-control__panel,
.admin-site-page-card,
.admin-menu-set-card,
.admin-help-card) {
  border-color: var(--color-border-default);
  box-shadow: none;
}
body.admin-shell-v2 :is(.admin-card,
.admin-panel,
.admin-prefs__section,
.admin-dash-section,
.admin-stat-card,
.admin-table-wrap,
.admin-index-card,
.admin-list-section,
.admin-ops-card,
.admin-analytics-card,
.admin-project-docs__panel,
.admin-source-card,
.admin-system-log-card,
.admin-guide-section,
.admin-components-showcase__section,
.admin-access-control__panel,
.admin-site-page-card,
.admin-menu-set-card,
.admin-help-card):hover {
  box-shadow: none;
  transform: none;
}

/*# sourceMappingURL=style.css.map */